From caee26880fb8a9bff502ce99c215aed6bdf5f77a Mon Sep 17 00:00:00 2001 From: Anurag Hazra Date: Wed, 3 Jul 2024 12:27:39 +0530 Subject: [PATCH 1/4] fix: add button type button (#2290) * fix: add button type button * Create wet-planets-end.md --- .changeset/wet-planets-end.md | 5 +++++ .../blade/src/components/Accordion/AccordionButton.web.tsx | 1 + .../__tests__/__snapshots__/Accordion.ssr.test.tsx.snap | 4 +++- .../__tests__/__snapshots__/Accordion.web.test.tsx.snap | 6 ++++++ 4 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 .changeset/wet-planets-end.md diff --git a/.changeset/wet-planets-end.md b/.changeset/wet-planets-end.md new file mode 100644 index 00000000000..187e8973df3 --- /dev/null +++ b/.changeset/wet-planets-end.md @@ -0,0 +1,5 @@ +--- +"@razorpay/blade": patch +--- + +fix: add button type button diff --git a/packages/blade/src/components/Accordion/AccordionButton.web.tsx b/packages/blade/src/components/Accordion/AccordionButton.web.tsx index 41dbf2d150f..8b13f4376a4 100644 --- a/packages/blade/src/components/Accordion/AccordionButton.web.tsx +++ b/packages/blade/src/components/Accordion/AccordionButton.web.tsx @@ -53,6 +53,7 @@ const _AccordionButton = ({ width="100%" > should render Accordion on server 1`] = `"
"`; +exports[` should render Accordion on server 1`] = `"
"`; exports[` should render Accordion on server 2`] = ` .c0.c0.c0.c0.c0 { @@ -368,6 +368,7 @@ exports[` should render Accordion on server 2`] = ` aria-expanded="false" class="c3" data-blade-component="accordion-button" + type="button" >
should render Accordion on server 2`] = ` aria-expanded="false" class="c3" data-blade-component="accordion-button" + type="button" >
should render 1`] = ` aria-expanded="false" class="c3" data-blade-component="accordion-button" + type="button" >
should render 1`] = ` aria-expanded="false" class="c3" data-blade-component="accordion-button" + type="button" >
should render 1`] = ` aria-expanded="false" class="c3" data-blade-component="accordion-button" + type="button" >
should render 1`] = ` aria-expanded="false" class="c3" data-blade-component="accordion-button" + type="button" >
should render 1`] = ` aria-expanded="false" class="c3" data-blade-component="accordion-button" + type="button" >
should render 1`] = ` aria-expanded="false" class="c3" data-blade-component="accordion-button" + type="button" >
Date: Wed, 3 Jul 2024 12:28:07 +0530 Subject: [PATCH 2/4] feat: add multiselection-mode prop (#2283) * chore: add multiselection-mode prop * chore: change prop name * Create popular-paws-explain.md --- .changeset/popular-paws-explain.md | 5 +++++ packages/blade/src/components/Table/Table.web.tsx | 9 ++++++++- packages/blade/src/components/Table/types.ts | 5 +++++ 3 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 .changeset/popular-paws-explain.md diff --git a/.changeset/popular-paws-explain.md b/.changeset/popular-paws-explain.md new file mode 100644 index 00000000000..5bb7613312a --- /dev/null +++ b/.changeset/popular-paws-explain.md @@ -0,0 +1,5 @@ +--- +"@razorpay/blade": patch +--- + +feat: add multiselection-mode prop to Table diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 48d06f85ca6..32537187bae 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -4,7 +4,11 @@ import { useTheme as useTableTheme } from '@table-library/react-table-library/th import type { MiddlewareFunction } from '@table-library/react-table-library/types/common'; import { useSort } from '@table-library/react-table-library/sort'; import { usePagination } from '@table-library/react-table-library/pagination'; -import { SelectTypes, useRowSelect } from '@table-library/react-table-library/select'; +import { + SelectClickTypes, + SelectTypes, + useRowSelect, +} from '@table-library/react-table-library/select'; import styled from 'styled-components'; import usePresence from 'use-presence'; import type { TableContextType } from './TableContext'; @@ -116,6 +120,7 @@ const RefreshWrapper = styled(BaseBox)<{ const _Table = ({ children, data, + multiSelectTrigger = 'row', selectionType = 'none', onSelectionChange, isHeaderSticky, @@ -258,6 +263,8 @@ const _Table = ({ onChange: onSelectChange, }, { + clickType: + multiSelectTrigger === 'row' ? SelectClickTypes.RowClick : SelectClickTypes.ButtonClick, rowSelect: selectionType !== 'none' ? rowSelectType[selectionType] : undefined, }, ); diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index 5e9b18ea71a..9af981b2671 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -73,6 +73,11 @@ type TableProps = { * The object should have an id property that is a unique identifier for the row. */ data: TableData; + /** + * Selection mode determines how the table rows can be selected. + * @default 'row' + **/ + multiSelectTrigger?: 'checkbox' | 'row'; /** * The selectionType prop determines the type of selection that is allowed on the table. * The selectionType prop can be 'none', 'single' or 'multiple'. From b38943c04c8c50fefd045b1a6f795a5bcbd9bcca Mon Sep 17 00:00:00 2001 From: Anurag Hazra Date: Wed, 3 Jul 2024 13:23:55 +0530 Subject: [PATCH 3/4] fix: table multiselect with pagination bug (#2282) * fix: table multiselect with pagination bug * chore: fix story * chore: fix tests * Create mighty-chicken-train.md * chore: add jsdoc comment and deprecate values * chore: update --- .changeset/mighty-chicken-train.md | 5 +++++ .../blade/src/components/Table/Table.web.tsx | 7 ++++--- .../Table/__tests__/Table.web.test.tsx | 13 +++++++----- .../src/components/Table/docs/stories.ts | 4 +++- packages/blade/src/components/Table/types.ts | 20 ++++++++++++++++++- 5 files changed, 39 insertions(+), 10 deletions(-) create mode 100644 .changeset/mighty-chicken-train.md diff --git a/.changeset/mighty-chicken-train.md b/.changeset/mighty-chicken-train.md new file mode 100644 index 00000000000..2caa92bb932 --- /dev/null +++ b/.changeset/mighty-chicken-train.md @@ -0,0 +1,5 @@ +--- +"@razorpay/blade": patch +--- + +fix: table multiselect with pagination bug diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 32537187bae..66ea177cff4 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -250,10 +250,11 @@ const _Table = ({ // Selection Logic const onSelectChange: MiddlewareFunction = (action, state): void => { - const selectedIDs: Identifier[] = state.id ? [state.id] : state.ids ?? []; - setSelectedRows(selectedIDs); + const selectedIds: Identifier[] = state.id ? [state.id] : state.ids ?? []; + setSelectedRows(selectedIds); onSelectionChange?.({ - values: data.nodes.filter((node) => selectedIDs.includes(node.id)), + selectedIds, + values: data.nodes.filter((node) => selectedIds.includes(node.id)), }); }; diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index 2f0be38fbfd..072c40c84ab 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -780,10 +780,10 @@ describe('', () => { const firstSelectableRow = getByText('rzp01').closest('td'); if (firstSelectableRow) await user.click(firstSelectableRow); - expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[0]] }); + expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[0]], selectedIds: ['1'] }); const secondSelectableRow = getByText('rzp02').closest('td'); if (secondSelectableRow) await user.click(secondSelectableRow); - expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[1]] }); + expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[1]], selectedIds: ['2'] }); }); it('should render table with multi select', async () => { @@ -831,14 +831,17 @@ describe('
', () => { expect(getAllByRole('checkbox')).toHaveLength(6); const firstSelectableRow = getByText('rzp01').closest('td'); if (firstSelectableRow) await user.click(firstSelectableRow); - expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[0]] }); + expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[0]], selectedIds: ['1'] }); const secondSelectableRow = getByText('rzp02').closest('td'); if (secondSelectableRow) await user.click(secondSelectableRow); - expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[0], nodes[1]] }); + expect(onSelectionChange).toHaveBeenCalledWith({ + values: [nodes[0], nodes[1]], + selectedIds: ['1', '2'], + }); expect(getByText('2 Items Selected')).toBeInTheDocument(); const deselectButton = getByText('Deselect'); await user.click(deselectButton); - expect(onSelectionChange).toHaveBeenCalledWith({ values: [] }); + expect(onSelectionChange).toHaveBeenCalledWith({ values: [], selectedIds: [] }); }); it('should render table with client side pagination', async () => { diff --git a/packages/blade/src/components/Table/docs/stories.ts b/packages/blade/src/components/Table/docs/stories.ts index 831ee5b4d5f..68f7b7b9bf0 100644 --- a/packages/blade/src/components/Table/docs/stories.ts +++ b/packages/blade/src/components/Table/docs/stories.ts @@ -594,7 +594,9 @@ function App(): React.ReactElement {
setSelectedItems(values)} + onSelectionChange={({ selectedIds }) => { + setSelectedItems(data.nodes.filter((node) => selectedIds.includes(node.id))); + }} toolbar={ = { * The onSelectionChange prop is a function that is called when the selection changes. * The function is called with an object that has a values property that is an array of the selected rows. **/ - onSelectionChange?: ({ values }: { values: TableNode[] }) => void; + onSelectionChange?: ({ + values, + selectedIds, + }: { + /** + * Note: on server side paginated data, this prop will only contain the selected rows on the current page. + * + * Thus, it's recommended to use `selectedIds` for more consistent state management across server/client paginated data. + * + * *Deprecated:* Use `selectedIds` instead. + * + * @deprecated + */ + values: TableNode[]; + /** + * An array of selected row ids. + */ + selectedIds: Identifier[]; + }) => void; /** * The isHeaderSticky prop determines whether the table header is sticky or not. * The default value is `false`. From b0afc6137f9339e2a20900e74de9bf63ba4461ac Mon Sep 17 00:00:00 2001 From: rzpcibot <64553331+rzpcibot@users.noreply.github.com> Date: Wed, 3 Jul 2024 13:34:35 +0530 Subject: [PATCH 4/4] build(blade): update version (#2293) Co-authored-by: github-actions[bot] --- .changeset/mighty-chicken-train.md | 5 ----- .changeset/popular-paws-explain.md | 5 ----- .changeset/wet-planets-end.md | 5 ----- packages/blade/CHANGELOG.md | 8 ++++++++ packages/blade/package.json | 2 +- 5 files changed, 9 insertions(+), 16 deletions(-) delete mode 100644 .changeset/mighty-chicken-train.md delete mode 100644 .changeset/popular-paws-explain.md delete mode 100644 .changeset/wet-planets-end.md diff --git a/.changeset/mighty-chicken-train.md b/.changeset/mighty-chicken-train.md deleted file mode 100644 index 2caa92bb932..00000000000 --- a/.changeset/mighty-chicken-train.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@razorpay/blade": patch ---- - -fix: table multiselect with pagination bug diff --git a/.changeset/popular-paws-explain.md b/.changeset/popular-paws-explain.md deleted file mode 100644 index 5bb7613312a..00000000000 --- a/.changeset/popular-paws-explain.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@razorpay/blade": patch ---- - -feat: add multiselection-mode prop to Table diff --git a/.changeset/wet-planets-end.md b/.changeset/wet-planets-end.md deleted file mode 100644 index 187e8973df3..00000000000 --- a/.changeset/wet-planets-end.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@razorpay/blade": patch ---- - -fix: add button type button diff --git a/packages/blade/CHANGELOG.md b/packages/blade/CHANGELOG.md index b38d66eb4d3..b9d0dd0cddd 100644 --- a/packages/blade/CHANGELOG.md +++ b/packages/blade/CHANGELOG.md @@ -1,5 +1,13 @@ # @razorpay/blade +## 11.24.1 + +### Patch Changes + +- b38943c0: fix: table multiselect with pagination bug +- 636952b6: feat: add multiselection-mode prop to Table +- caee2688: fix: add button type button + ## 11.24.0 ### Minor Changes diff --git a/packages/blade/package.json b/packages/blade/package.json index eb3d8c64551..08ea1cc5dcc 100644 --- a/packages/blade/package.json +++ b/packages/blade/package.json @@ -1,7 +1,7 @@ { "name": "@razorpay/blade", "description": "The Design System that powers Razorpay", - "version": "11.24.0", + "version": "11.24.1", "license": "MIT", "engines": { "node": ">=18.12.1"