Skip to content

Commit

Permalink
Merge branch 'razorpay:master' into master
Browse files Browse the repository at this point in the history
  • Loading branch information
@k-parihar
k-parihar authored Jul 6, 2024
2 parents 5b203d1 + b0afc61 commit 14f959f
Show file tree
Hide file tree
Showing 9 changed files with 66 additions and 13 deletions.
8 changes: 8 additions & 0 deletions packages/blade/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/blade/package.json
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
1 change: 1 addition & 0 deletions packages/blade/src/components/Accordion/AccordionButton.web.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ const _AccordionButton = ({
width="100%"
>
<StyledAccordionButton
type="button"
isExpanded={isItemExpanded}
disabled={isDisabled}
onClick={onClick}
Expand Down
4 changes: 3 additions & 1 deletion packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Accordion /> should render Accordion on server 1`] = `"<div id="root"><div data-blade-component="accordion" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kPjdiT"><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 ekfgOX"><div data-blade-component="accordion-item-header" class="BaseBox-bmPWx dozxZd"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx cqLAOk"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO ibEuPD" data-blade-component="text">How can I setup Route?</p></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gJhLSN"><div data-blade-component="box" class="BaseBox-bmPWx"></div></div></div></div></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx mhVFF"><div data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="accordion-item-body" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">You can use Razorpay Route from the Dashboard or using APIs to transfer money to customers. You may also check our docs for detailed instructions.</p></div></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 ekfgOX"><div data-blade-component="accordion-item-header" class="BaseBox-bmPWx dozxZd"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx cqLAOk"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO ibEuPD" data-blade-component="text">How can I setup QR Codes?</p></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gJhLSN"><div data-blade-component="box" class="BaseBox-bmPWx"></div></div></div></div></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx mhVFF"><div data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="accordion-item-body" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Just use Razorpay. You may also check our docs for detailed instructions. Please use the search functionality to ask your queries.</p></div></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div></div></div>"`;
exports[`<Accordion /> should render Accordion on server 1`] = `"<div id="root"><div data-blade-component="accordion" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kPjdiT"><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button type="button" aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 ekfgOX"><div data-blade-component="accordion-item-header" class="BaseBox-bmPWx dozxZd"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx cqLAOk"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO ibEuPD" data-blade-component="text">How can I setup Route?</p></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gJhLSN"><div data-blade-component="box" class="BaseBox-bmPWx"></div></div></div></div></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx mhVFF"><div data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="accordion-item-body" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">You can use Razorpay Route from the Dashboard or using APIs to transfer money to customers. You may also check our docs for detailed instructions.</p></div></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button type="button" aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 ekfgOX"><div data-blade-component="accordion-item-header" class="BaseBox-bmPWx dozxZd"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx cqLAOk"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO ibEuPD" data-blade-component="text">How can I setup QR Codes?</p></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gJhLSN"><div data-blade-component="box" class="BaseBox-bmPWx"></div></div></div></div></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx mhVFF"><div data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="accordion-item-body" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Just use Razorpay. You may also check our docs for detailed instructions. Please use the search functionality to ask your queries.</p></div></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div></div></div>"`;

exports[`<Accordion /> should render Accordion on server 2`] = `
.c0.c0.c0.c0.c0 {
Expand Down Expand Up @@ -368,6 +368,7 @@ exports[`<Accordion /> should render Accordion on server 2`] = `
aria-expanded="false"
class="c3"
data-blade-component="accordion-button"
type="button"
>
<div
class="c4"
Expand Down Expand Up @@ -515,6 +516,7 @@ exports[`<Accordion /> should render Accordion on server 2`] = `
aria-expanded="false"
class="c3"
data-blade-component="accordion-button"
type="button"
>
<div
class="c4"
Expand Down
6 changes: 6 additions & 0 deletions packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -364,6 +364,7 @@ exports[`<Accordion /> should render 1`] = `
aria-expanded="false"
class="c3"
data-blade-component="accordion-button"
type="button"
>
<div
class="c4"
Expand Down Expand Up @@ -511,6 +512,7 @@ exports[`<Accordion /> should render 1`] = `
aria-expanded="false"
class="c3"
data-blade-component="accordion-button"
type="button"
>
<div
class="c4"
Expand Down Expand Up @@ -658,6 +660,7 @@ exports[`<Accordion /> should render 1`] = `
aria-expanded="false"
class="c3"
data-blade-component="accordion-button"
type="button"
>
<div
class="c4"
Expand Down Expand Up @@ -1151,6 +1154,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
aria-expanded="false"
class="c3"
data-blade-component="accordion-button"
type="button"
>
<div
class="c4"
Expand Down Expand Up @@ -1298,6 +1302,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
aria-expanded="false"
class="c3"
data-blade-component="accordion-button"
type="button"
>
<div
class="c4"
Expand Down Expand Up @@ -1445,6 +1450,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
aria-expanded="false"
class="c3"
data-blade-component="accordion-button"
type="button"
>
<div
class="c4"
Expand Down
16 changes: 12 additions & 4 deletions packages/blade/src/components/Table/Table.web.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -116,6 +120,7 @@ const RefreshWrapper = styled(BaseBox)<{
const _Table = <Item,>({
children,
data,
multiSelectTrigger = 'row',
selectionType = 'none',
onSelectionChange,
isHeaderSticky,
Expand Down Expand Up @@ -245,10 +250,11 @@ const _Table = <Item,>({

// 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)),
});
};

Expand All @@ -258,6 +264,8 @@ const _Table = <Item,>({
onChange: onSelectChange,
},
{
clickType:
multiSelectTrigger === 'row' ? SelectClickTypes.RowClick : SelectClickTypes.ButtonClick,
rowSelect: selectionType !== 'none' ? rowSelectType[selectionType] : undefined,
},
);
Expand Down
13 changes: 8 additions & 5 deletions packages/blade/src/components/Table/__tests__/Table.web.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -780,10 +780,10 @@ describe('<Table />', () => {

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 () => {
Expand Down Expand Up @@ -831,14 +831,17 @@ describe('<Table />', () => {
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 () => {
Expand Down
4 changes: 3 additions & 1 deletion packages/blade/src/components/Table/docs/stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -594,7 +594,9 @@ function App(): React.ReactElement {
<Table
data={data}
selectionType="multiple"
onSelectionChange={({ values }) => setSelectedItems(values)}
onSelectionChange={({ selectedIds }) => {
setSelectedItems(data.nodes.filter((node) => selectedIds.includes(node.id)));
}}
toolbar={
<TableToolbar
title="Showing Recent Transactions"
Expand Down
Loading

0 comments on commit 14f959f

Please sign in to comment.