@gusto/embedded-react-sdk 0.55.3 → 0.55.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (130) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/components/Common/DataView/DataCards/DataCards.d.ts +2 -1
  3. package/dist/components/Common/DataView/DataCards/DataCards.js +63 -54
  4. package/dist/components/Common/DataView/DataCards/DataCards.js.map +1 -1
  5. package/dist/components/Common/DataView/DataCards/DataCards.module.scss.js +14 -12
  6. package/dist/components/Common/DataView/DataCards/DataCards.module.scss.js.map +1 -1
  7. package/dist/components/Common/DataView/DataTable/DataTable.d.ts +2 -1
  8. package/dist/components/Common/DataView/DataTable/DataTable.js +75 -66
  9. package/dist/components/Common/DataView/DataTable/DataTable.js.map +1 -1
  10. package/dist/components/Common/DataView/DataTable/DataTable.module.scss.js +8 -4
  11. package/dist/components/Common/DataView/DataTable/DataTable.module.scss.js.map +1 -1
  12. package/dist/components/Common/DataView/DataView.js +18 -17
  13. package/dist/components/Common/DataView/DataView.js.map +1 -1
  14. package/dist/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.js +3 -6
  15. package/dist/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.js.map +1 -1
  16. package/dist/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.js +3 -6
  17. package/dist/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.js.map +1 -1
  18. package/dist/components/Company/AssignSignatory/useAssignSignatory.js +5 -8
  19. package/dist/components/Company/AssignSignatory/useAssignSignatory.js.map +1 -1
  20. package/dist/components/Company/BankAccount/BankAccountForm/context.js +3 -6
  21. package/dist/components/Company/BankAccount/BankAccountForm/context.js.map +1 -1
  22. package/dist/components/Company/DocumentSigner/DocumentList/useDocumentList.js +3 -6
  23. package/dist/components/Company/DocumentSigner/DocumentList/useDocumentList.js.map +1 -1
  24. package/dist/components/Company/FederalTaxes/useFederalTaxes.js +8 -11
  25. package/dist/components/Company/FederalTaxes/useFederalTaxes.js.map +1 -1
  26. package/dist/components/Company/Industry/Context.js +6 -9
  27. package/dist/components/Company/Industry/Context.js.map +1 -1
  28. package/dist/components/Company/Locations/LocationForm/useLocationForm.js +3 -6
  29. package/dist/components/Company/Locations/LocationForm/useLocationForm.js.map +1 -1
  30. package/dist/components/Company/Locations/LocationsList/List.js +27 -25
  31. package/dist/components/Company/Locations/LocationsList/List.js.map +1 -1
  32. package/dist/components/Company/Locations/LocationsList/LocationsList.js +41 -36
  33. package/dist/components/Company/Locations/LocationsList/LocationsList.js.map +1 -1
  34. package/dist/components/Company/Locations/LocationsList/useLocationsList.d.ts +1 -0
  35. package/dist/components/Company/Locations/LocationsList/useLocationsList.js +3 -6
  36. package/dist/components/Company/Locations/LocationsList/useLocationsList.js.map +1 -1
  37. package/dist/components/Company/OnboardingOverview/context.js +3 -6
  38. package/dist/components/Company/OnboardingOverview/context.js.map +1 -1
  39. package/dist/components/Company/StateTaxes/StateTaxesForm/Form.d.ts +9 -2
  40. package/dist/components/Company/StateTaxes/StateTaxesForm/Form.js +19 -18
  41. package/dist/components/Company/StateTaxes/StateTaxesForm/Form.js.map +1 -1
  42. package/dist/components/Company/StateTaxes/StateTaxesForm/StateTaxesForm.js +63 -62
  43. package/dist/components/Company/StateTaxes/StateTaxesForm/StateTaxesForm.js.map +1 -1
  44. package/dist/components/Company/StateTaxes/StateTaxesForm/context.js +3 -6
  45. package/dist/components/Company/StateTaxes/StateTaxesForm/context.js.map +1 -1
  46. package/dist/components/Company/StateTaxes/StateTaxesList/context.js +3 -6
  47. package/dist/components/Company/StateTaxes/StateTaxesList/context.js.map +1 -1
  48. package/dist/components/Company/StateTaxes/TaxRateManagement/AddTaxRateDialog.js +69 -65
  49. package/dist/components/Company/StateTaxes/TaxRateManagement/AddTaxRateDialog.js.map +1 -1
  50. package/dist/components/Company/StateTaxes/TaxRateManagement/context.js +3 -6
  51. package/dist/components/Company/StateTaxes/TaxRateManagement/context.js.map +1 -1
  52. package/dist/components/Company/StateTaxes/TaxRateManagement/toHistoryRows.js +30 -23
  53. package/dist/components/Company/StateTaxes/TaxRateManagement/toHistoryRows.js.map +1 -1
  54. package/dist/components/Company/StateTaxes/shared/RequirementFields.d.ts +8 -4
  55. package/dist/components/Company/StateTaxes/shared/RequirementFields.js +13 -12
  56. package/dist/components/Company/StateTaxes/shared/RequirementFields.js.map +1 -1
  57. package/dist/components/Company/StateTaxes/shared/prepareRequirements.d.ts +29 -0
  58. package/dist/components/Company/StateTaxes/shared/prepareRequirements.js +24 -0
  59. package/dist/components/Company/StateTaxes/shared/prepareRequirements.js.map +1 -0
  60. package/dist/components/Company/StateTaxes/shared/prepareRequirements.test.d.ts +1 -0
  61. package/dist/components/Contractor/Payments/PaymentsList/PaymentsList.js +68 -55
  62. package/dist/components/Contractor/Payments/PaymentsList/PaymentsList.js.map +1 -1
  63. package/dist/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.js +36 -35
  64. package/dist/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.js.map +1 -1
  65. package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.js +3 -6
  66. package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.js.map +1 -1
  67. package/dist/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.js +84 -96
  68. package/dist/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.js.map +1 -1
  69. package/dist/components/Flow/Flow.js +22 -22
  70. package/dist/components/Flow/Flow.js.map +1 -1
  71. package/dist/components/Flow/useFlow.js +3 -3
  72. package/dist/components/InformationRequests/InformationRequests.d.ts +1 -1
  73. package/dist/components/InformationRequests/InformationRequests.js +68 -53
  74. package/dist/components/InformationRequests/InformationRequests.js.map +1 -1
  75. package/dist/components/Payroll/GrossUpModal/GrossUpModal.js +2 -3
  76. package/dist/components/Payroll/GrossUpModal/GrossUpModal.js.map +1 -1
  77. package/dist/components/Payroll/OffCycleCreation/OffCycleCreation.js +52 -50
  78. package/dist/components/Payroll/OffCycleCreation/OffCycleCreation.js.map +1 -1
  79. package/dist/components/Payroll/OffCycleCreation/OffCycleCreationPresentation.d.ts +1 -1
  80. package/dist/components/Payroll/OffCycleCreation/OffCycleCreationPresentation.js +86 -67
  81. package/dist/components/Payroll/OffCycleCreation/OffCycleCreationPresentation.js.map +1 -1
  82. package/dist/components/Payroll/OffCycleCreation/OffCycleCreationTypes.d.ts +4 -0
  83. package/dist/components/Payroll/OffCycleDeductionsSetting/OffCycleDeductionsSetting.d.ts +1 -1
  84. package/dist/components/Payroll/OffCycleDeductionsSetting/OffCycleDeductionsSetting.js +26 -21
  85. package/dist/components/Payroll/OffCycleDeductionsSetting/OffCycleDeductionsSetting.js.map +1 -1
  86. package/dist/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.d.ts +8 -1
  87. package/dist/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.js +29 -17
  88. package/dist/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.js.map +1 -1
  89. package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTable.js +21 -18
  90. package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTable.js.map +1 -1
  91. package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTable.module.scss.js +9 -7
  92. package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTable.module.scss.js.map +1 -1
  93. package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTableTypes.d.ts +2 -0
  94. package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTableTypes.js.map +1 -1
  95. package/dist/components/Payroll/PayrollConfiguration/PayrollConfiguration.js +193 -191
  96. package/dist/components/Payroll/PayrollConfiguration/PayrollConfiguration.js.map +1 -1
  97. package/dist/components/Payroll/PayrollConfiguration/usePayrollConfigurationData.d.ts +3 -2
  98. package/dist/components/Payroll/PayrollConfiguration/usePayrollConfigurationData.js +31 -31
  99. package/dist/components/Payroll/PayrollConfiguration/usePayrollConfigurationData.js.map +1 -1
  100. package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.js +254 -243
  101. package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.js.map +1 -1
  102. package/dist/components/Payroll/PayrollHistory/PayrollHistory.js +83 -76
  103. package/dist/components/Payroll/PayrollHistory/PayrollHistory.js.map +1 -1
  104. package/dist/components/Payroll/PayrollHistory/PayrollHistoryPresentation.js +23 -22
  105. package/dist/components/Payroll/PayrollHistory/PayrollHistoryPresentation.js.map +1 -1
  106. package/dist/components/Payroll/PayrollList/PayrollList.js +108 -97
  107. package/dist/components/Payroll/PayrollList/PayrollList.js.map +1 -1
  108. package/dist/components/Payroll/PayrollList/PayrollListPresentation.js +38 -37
  109. package/dist/components/Payroll/PayrollList/PayrollListPresentation.js.map +1 -1
  110. package/dist/components/Payroll/PayrollOverview/PayrollOverview.js +176 -167
  111. package/dist/components/Payroll/PayrollOverview/PayrollOverview.js.map +1 -1
  112. package/dist/components/Payroll/PayrollOverview/PayrollOverviewPresentation.d.ts +2 -1
  113. package/dist/components/Payroll/PayrollOverview/PayrollOverviewPresentation.js +173 -164
  114. package/dist/components/Payroll/PayrollOverview/PayrollOverviewPresentation.js.map +1 -1
  115. package/dist/components/Payroll/usePreparedPayrollData.js +12 -15
  116. package/dist/components/Payroll/usePreparedPayrollData.js.map +1 -1
  117. package/dist/helpers/openPdfInNewTab.d.ts +15 -0
  118. package/dist/helpers/openPdfInNewTab.js +28 -0
  119. package/dist/helpers/openPdfInNewTab.js.map +1 -0
  120. package/dist/i18n/en/Company.StateTaxes.json.js +1 -1
  121. package/dist/i18n/en/Payroll.OffCycleCreation.json.js +11 -9
  122. package/dist/i18n/en/Payroll.OffCycleCreation.json.js.map +1 -1
  123. package/dist/i18n/en/Payroll.OffCycleTaxWithholding.json.js +7 -7
  124. package/dist/i18n/en/Payroll.PayrollEditEmployee.json.js +29 -27
  125. package/dist/i18n/en/Payroll.PayrollEditEmployee.json.js.map +1 -1
  126. package/dist/i18n/en/Payroll.PayrollOverview.json.js +43 -41
  127. package/dist/i18n/en/Payroll.PayrollOverview.json.js.map +1 -1
  128. package/dist/i18n/types.d.ts +20 -0
  129. package/dist/style.css +1 -1
  130. package/package.json +17 -17
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # Changelog
2
2
 
3
+ ## [0.55.4](https://github.com/Gusto/embedded-react-sdk/compare/v0.55.3...v0.55.4) (2026-08-31)
4
+
5
+ ### Features & Enhancements
6
+
7
+ - Add explanatory copy for tax withholding and a disclaimer note for off-cycle payrolls ([#2618](https://github.com/Gusto/embedded-react-sdk/issues/2618))
8
+
9
+ ### Fixes
10
+
11
+ - Add Suspense boundaries so components no longer throw a React error while i18n resources are loading ([#2654](https://github.com/Gusto/embedded-react-sdk/issues/2654))
12
+ - Fix reimbursement amount validation ([#2630](https://github.com/Gusto/embedded-react-sdk/issues/2630))
13
+ - Fix duplicate requirement keys colliding in the tax rate history so each entry is handled independently ([#2637](https://github.com/Gusto/embedded-react-sdk/issues/2637))
14
+ - Correctly evaluate conditional (`applicable_if`) fields against non-editable sibling fields ([#2636](https://github.com/Gusto/embedded-react-sdk/issues/2636))
15
+ - Show a loading indicator during data grid pagination transitions ([#2638](https://github.com/Gusto/embedded-react-sdk/issues/2638))
16
+ - Show a loading indicator while a paystub downloads in `PayrollOverview` ([#2653](https://github.com/Gusto/embedded-react-sdk/issues/2653))
17
+ - Prevent re-preparing a payroll from wiping an already-completed calculation ([#2656](https://github.com/Gusto/embedded-react-sdk/issues/2656))
18
+ - Keep the current page visible during paginated list navigation instead of showing a loading fallback on every page change ([#2639](https://github.com/Gusto/embedded-react-sdk/issues/2639))
19
+ - Disable invalid payment dates in the off-cycle payroll date picker ([#2650](https://github.com/Gusto/embedded-react-sdk/issues/2650))
20
+ - Reject negative additional-earning amounts before submit ([#2651](https://github.com/Gusto/embedded-react-sdk/issues/2651))
21
+
22
+ ### Chores & Maintenance
23
+
24
+ - Bump dependencies (`react-hook-form`, `react-i18next`, `dompurify`, `sass-embedded`, `@storybook/*`, `@testing-library/*`, `@types/react-dom`, `@typescript-eslint/*`, `eslint-plugin-storybook`, `cspell`)
25
+
3
26
  ## [0.55.3](https://github.com/Gusto/embedded-react-sdk/compare/v0.55.2...v0.55.3) (2026-08-24)
4
27
 
5
28
  ### Features & Enhancements
@@ -14,6 +14,7 @@ export type DataCardsProps<T> = {
14
14
  footer?: useDataViewPropReturn<T>['footer'];
15
15
  selectionMode?: SelectionMode;
16
16
  isWithinBox?: TableProps['isWithinBox'];
17
+ isFetching?: useDataViewPropReturn<T>['isFetching'];
17
18
  };
18
19
  /** @internal */
19
- export declare const DataCards: <T>({ label, data, columns, itemMenu, onSelect, onSelectAll, getIsItemSelected, hideSelectAll, emptyState, footer, selectionMode, isWithinBox, }: DataCardsProps<T>) => import("react").JSX.Element;
20
+ export declare const DataCards: <T>({ label, data, columns, itemMenu, onSelect, onSelectAll, getIsItemSelected, hideSelectAll, emptyState, footer, selectionMode, isWithinBox, isFetching, }: DataCardsProps<T>) => import("react").JSX.Element;
@@ -1,33 +1,34 @@
1
1
  import { jsxs as t, jsx as e } from "react/jsx-runtime";
2
- import { useId as T } from "react";
3
- import j from "classnames";
4
- import { useTranslation as A } from "react-i18next";
5
- import a from "./DataCards.module.scss.js";
2
+ import { useId as j } from "react";
3
+ import A from "classnames";
4
+ import { useTranslation as y } from "react-i18next";
5
+ import r from "./DataCards.module.scss.js";
6
6
  import { useSelectionState as H } from "../useSelectionState.js";
7
- import { Flex as N } from "../../Flex/Flex.js";
7
+ import { Flex as x } from "../../Flex/Flex.js";
8
8
  import { useComponentContext as V } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
9
- const I = ({
10
- label: x,
9
+ const J = ({
10
+ label: g,
11
11
  data: s,
12
12
  columns: h,
13
13
  itemMenu: p,
14
14
  onSelect: c,
15
- onSelectAll: g,
15
+ onSelectAll: w,
16
16
  getIsItemSelected: m,
17
- hideSelectAll: w,
17
+ hideSelectAll: L,
18
18
  emptyState: f,
19
19
  footer: v,
20
20
  selectionMode: C = "multiple",
21
- isWithinBox: d
21
+ isWithinBox: d,
22
+ isFetching: b
22
23
  }) => {
23
- const o = V(), { t: u } = A("common"), L = T(), { allSelected: R } = H(s, m), D = (l, n) => {
24
+ const o = V(), { t: u } = y("common"), R = j(), { allSelected: D } = H(s, m), T = (l, n) => {
24
25
  if (!c) return;
25
- const r = m?.(l) ?? !1;
26
+ const a = m?.(l) ?? !1;
26
27
  return C === "single" ? /* @__PURE__ */ e(
27
28
  o.Radio,
28
29
  {
29
- name: L,
30
- value: r,
30
+ name: R,
31
+ value: a,
31
32
  onChange: () => {
32
33
  c(l, !0);
33
34
  },
@@ -37,7 +38,7 @@ const I = ({
37
38
  ) : /* @__PURE__ */ e(
38
39
  o.Checkbox,
39
40
  {
40
- value: r,
41
+ value: a,
41
42
  onChange: (i) => {
42
43
  c(l, i);
43
44
  },
@@ -46,46 +47,54 @@ const I = ({
46
47
  }
47
48
  );
48
49
  };
49
- return /* @__PURE__ */ t("div", { className: j(a.root, d && a.withinBox), "data-testid": "data-cards", children: [
50
- c && m && C === "multiple" && !w && s.length > 0 && /* @__PURE__ */ e("div", { className: a.selectAllRow, children: /* @__PURE__ */ e(
51
- o.Checkbox,
52
- {
53
- value: R,
54
- onChange: (l) => g?.(l, s),
55
- label: u("card.selectAllRowsLabel")
56
- }
57
- ) }),
58
- /* @__PURE__ */ t("div", { role: "list", "aria-label": x, children: [
59
- s.length === 0 && f && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(o.Card, { className: d ? a.flushCard : void 0, children: f() }) }),
60
- s.map((l, n) => /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(
61
- o.Card,
62
- {
63
- menu: p && p(l),
64
- action: D(l),
65
- className: d ? a.flushCard : void 0,
66
- children: h.map((r, i) => /* @__PURE__ */ t(N, { flexDirection: "column", gap: 0, children: [
67
- r.title && /* @__PURE__ */ e("h5", { className: a.columnTitle, children: r.title }),
68
- /* @__PURE__ */ t("div", { className: a.columnData, children: [
69
- " ",
70
- r.render ? r.render(l) : String(l[r.key])
71
- ] })
72
- ] }, i))
73
- }
74
- ) }, n)),
75
- v && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(o.Card, { className: d ? a.flushCard : void 0, children: (() => {
76
- const l = v();
77
- return Object.entries(l).map(([n, r]) => {
78
- const i = n.startsWith("column-") ? parseInt(n.replace("column-", ""), 10) : -1, b = i >= 0 ? h[i]?.title : void 0;
79
- return /* @__PURE__ */ t(N, { flexDirection: "column", gap: 0, children: [
80
- b && /* @__PURE__ */ e("h5", { className: a.columnTitle, children: b }),
81
- /* @__PURE__ */ e("div", { className: a.footerItem, children: r })
82
- ] }, n);
83
- });
84
- })() }) })
85
- ] })
86
- ] });
50
+ return /* @__PURE__ */ t(
51
+ "div",
52
+ {
53
+ className: A(r.root, d && r.withinBox, b && r.isFetching),
54
+ "data-testid": "data-cards",
55
+ "aria-busy": !!b,
56
+ children: [
57
+ c && m && C === "multiple" && !L && s.length > 0 && /* @__PURE__ */ e("div", { className: r.selectAllRow, children: /* @__PURE__ */ e(
58
+ o.Checkbox,
59
+ {
60
+ value: D,
61
+ onChange: (l) => w?.(l, s),
62
+ label: u("card.selectAllRowsLabel")
63
+ }
64
+ ) }),
65
+ /* @__PURE__ */ t("div", { role: "list", "aria-label": g, children: [
66
+ s.length === 0 && f && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(o.Card, { className: d ? r.flushCard : void 0, children: f() }) }),
67
+ s.map((l, n) => /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(
68
+ o.Card,
69
+ {
70
+ menu: p && p(l),
71
+ action: T(l),
72
+ className: d ? r.flushCard : void 0,
73
+ children: h.map((a, i) => /* @__PURE__ */ t(x, { flexDirection: "column", gap: 0, children: [
74
+ a.title && /* @__PURE__ */ e("h5", { className: r.columnTitle, children: a.title }),
75
+ /* @__PURE__ */ t("div", { className: r.columnData, children: [
76
+ " ",
77
+ a.render ? a.render(l) : String(l[a.key])
78
+ ] })
79
+ ] }, i))
80
+ }
81
+ ) }, n)),
82
+ v && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(o.Card, { className: d ? r.flushCard : void 0, children: (() => {
83
+ const l = v();
84
+ return Object.entries(l).map(([n, a]) => {
85
+ const i = n.startsWith("column-") ? parseInt(n.replace("column-", ""), 10) : -1, N = i >= 0 ? h[i]?.title : void 0;
86
+ return /* @__PURE__ */ t(x, { flexDirection: "column", gap: 0, children: [
87
+ N && /* @__PURE__ */ e("h5", { className: r.columnTitle, children: N }),
88
+ /* @__PURE__ */ e("div", { className: r.footerItem, children: a })
89
+ ] }, n);
90
+ });
91
+ })() }) })
92
+ ] })
93
+ ]
94
+ }
95
+ );
87
96
  };
88
97
  export {
89
- I as DataCards
98
+ J as DataCards
90
99
  };
91
100
  //# sourceMappingURL=DataCards.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DataCards.js","sources":["../../../../../src/components/Common/DataView/DataCards/DataCards.tsx"],"sourcesContent":["import { useId } from 'react'\nimport cn from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport styles from './DataCards.module.scss'\nimport type { useDataViewPropReturn, SelectionMode } from '@/components/Common/DataView/useDataView'\nimport type { TableProps } from '@/components/Common/UI/Table/TableTypes'\nimport { useSelectionState } from '@/components/Common/DataView/useSelectionState'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\n/** @internal */\nexport type DataCardsProps<T> = {\n label: string\n columns: useDataViewPropReturn<T>['columns']\n data: useDataViewPropReturn<T>['data']\n itemMenu?: useDataViewPropReturn<T>['itemMenu']\n onSelect?: (item: T, checked: boolean) => void\n onSelectAll?: (checked: boolean, visibleData: T[]) => void\n getIsItemSelected?: (item: T) => boolean\n hideSelectAll?: useDataViewPropReturn<T>['hideSelectAll']\n emptyState?: useDataViewPropReturn<T>['emptyState']\n footer?: useDataViewPropReturn<T>['footer']\n selectionMode?: SelectionMode\n isWithinBox?: TableProps['isWithinBox']\n}\n\n/** @internal */\nexport const DataCards = <T,>({\n label,\n data,\n columns,\n itemMenu,\n onSelect,\n onSelectAll,\n getIsItemSelected,\n hideSelectAll,\n emptyState,\n footer,\n selectionMode = 'multiple',\n isWithinBox,\n}: DataCardsProps<T>) => {\n const Components = useComponentContext()\n const { t } = useTranslation('common')\n const radioGroupName = useId()\n const { allSelected } = useSelectionState(data, getIsItemSelected)\n\n const renderAction = (item: T, index: number) => {\n if (!onSelect) return undefined\n\n const isSelected = getIsItemSelected?.(item) ?? false\n\n if (selectionMode === 'single') {\n return (\n <Components.Radio\n name={radioGroupName}\n value={isSelected}\n onChange={() => {\n onSelect(item, true)\n }}\n label={t('card.selectRowLabel')}\n shouldVisuallyHideLabel\n />\n )\n }\n\n return (\n <Components.Checkbox\n value={isSelected}\n onChange={(checked: boolean) => {\n onSelect(item, checked)\n }}\n label={t('card.selectRowLabel')}\n shouldVisuallyHideLabel\n />\n )\n }\n\n return (\n <div className={cn(styles.root, isWithinBox && styles.withinBox)} data-testid=\"data-cards\">\n {onSelect &&\n getIsItemSelected &&\n selectionMode === 'multiple' &&\n !hideSelectAll &&\n data.length > 0 && (\n <div className={styles.selectAllRow}>\n <Components.Checkbox\n value={allSelected}\n onChange={(checked: boolean) => onSelectAll?.(checked, data)}\n label={t('card.selectAllRowsLabel')}\n />\n </div>\n )}\n <div role=\"list\" aria-label={label}>\n {data.length === 0 && emptyState && (\n <div role=\"listitem\">\n <Components.Card className={isWithinBox ? styles.flushCard : undefined}>\n {emptyState()}\n </Components.Card>\n </div>\n )}\n {data.map((item, index) => (\n <div role=\"listitem\" key={index}>\n <Components.Card\n menu={itemMenu && itemMenu(item)}\n action={renderAction(item, index)}\n className={isWithinBox ? styles.flushCard : undefined}\n >\n {columns.map((column, colIndex) => (\n <Flex key={colIndex} flexDirection=\"column\" gap={0}>\n {column.title && <h5 className={styles.columnTitle}>{column.title}</h5>}\n <div className={styles.columnData}>\n {' '}\n {column.render ? column.render(item) : String(item[column.key as keyof T])}\n </div>\n </Flex>\n ))}\n </Components.Card>\n </div>\n ))}\n {footer && (\n <div role=\"listitem\">\n <Components.Card className={isWithinBox ? styles.flushCard : undefined}>\n {(() => {\n const footerContent = footer()\n\n return Object.entries(footerContent).map(([key, content]) => {\n const columnIndex = key.startsWith('column-')\n ? parseInt(key.replace('column-', ''), 10)\n : -1\n const columnTitle = columnIndex >= 0 ? columns[columnIndex]?.title : undefined\n\n return (\n <Flex key={key} flexDirection=\"column\" gap={0}>\n {columnTitle && <h5 className={styles.columnTitle}>{columnTitle}</h5>}\n <div className={styles.footerItem}>{content}</div>\n </Flex>\n )\n })\n })()}\n </Components.Card>\n </div>\n )}\n </div>\n </div>\n )\n}\n"],"names":["DataCards","label","data","columns","itemMenu","onSelect","onSelectAll","getIsItemSelected","hideSelectAll","emptyState","footer","selectionMode","isWithinBox","Components","useComponentContext","t","useTranslation","radioGroupName","useId","allSelected","useSelectionState","renderAction","item","index","isSelected","jsx","checked","jsxs","cn","styles","column","colIndex","Flex","footerContent","key","content","columnIndex","columnTitle"],"mappings":"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"}
1
+ {"version":3,"file":"DataCards.js","sources":["../../../../../src/components/Common/DataView/DataCards/DataCards.tsx"],"sourcesContent":["import { useId } from 'react'\nimport cn from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport styles from './DataCards.module.scss'\nimport type { useDataViewPropReturn, SelectionMode } from '@/components/Common/DataView/useDataView'\nimport type { TableProps } from '@/components/Common/UI/Table/TableTypes'\nimport { useSelectionState } from '@/components/Common/DataView/useSelectionState'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\n/** @internal */\nexport type DataCardsProps<T> = {\n label: string\n columns: useDataViewPropReturn<T>['columns']\n data: useDataViewPropReturn<T>['data']\n itemMenu?: useDataViewPropReturn<T>['itemMenu']\n onSelect?: (item: T, checked: boolean) => void\n onSelectAll?: (checked: boolean, visibleData: T[]) => void\n getIsItemSelected?: (item: T) => boolean\n hideSelectAll?: useDataViewPropReturn<T>['hideSelectAll']\n emptyState?: useDataViewPropReturn<T>['emptyState']\n footer?: useDataViewPropReturn<T>['footer']\n selectionMode?: SelectionMode\n isWithinBox?: TableProps['isWithinBox']\n isFetching?: useDataViewPropReturn<T>['isFetching']\n}\n\n/** @internal */\nexport const DataCards = <T,>({\n label,\n data,\n columns,\n itemMenu,\n onSelect,\n onSelectAll,\n getIsItemSelected,\n hideSelectAll,\n emptyState,\n footer,\n selectionMode = 'multiple',\n isWithinBox,\n isFetching,\n}: DataCardsProps<T>) => {\n const Components = useComponentContext()\n const { t } = useTranslation('common')\n const radioGroupName = useId()\n const { allSelected } = useSelectionState(data, getIsItemSelected)\n\n const renderAction = (item: T, index: number) => {\n if (!onSelect) return undefined\n\n const isSelected = getIsItemSelected?.(item) ?? false\n\n if (selectionMode === 'single') {\n return (\n <Components.Radio\n name={radioGroupName}\n value={isSelected}\n onChange={() => {\n onSelect(item, true)\n }}\n label={t('card.selectRowLabel')}\n shouldVisuallyHideLabel\n />\n )\n }\n\n return (\n <Components.Checkbox\n value={isSelected}\n onChange={(checked: boolean) => {\n onSelect(item, checked)\n }}\n label={t('card.selectRowLabel')}\n shouldVisuallyHideLabel\n />\n )\n }\n\n return (\n <div\n className={cn(styles.root, isWithinBox && styles.withinBox, isFetching && styles.isFetching)}\n data-testid=\"data-cards\"\n aria-busy={Boolean(isFetching)}\n >\n {onSelect &&\n getIsItemSelected &&\n selectionMode === 'multiple' &&\n !hideSelectAll &&\n data.length > 0 && (\n <div className={styles.selectAllRow}>\n <Components.Checkbox\n value={allSelected}\n onChange={(checked: boolean) => onSelectAll?.(checked, data)}\n label={t('card.selectAllRowsLabel')}\n />\n </div>\n )}\n <div role=\"list\" aria-label={label}>\n {data.length === 0 && emptyState && (\n <div role=\"listitem\">\n <Components.Card className={isWithinBox ? styles.flushCard : undefined}>\n {emptyState()}\n </Components.Card>\n </div>\n )}\n {data.map((item, index) => (\n <div role=\"listitem\" key={index}>\n <Components.Card\n menu={itemMenu && itemMenu(item)}\n action={renderAction(item, index)}\n className={isWithinBox ? styles.flushCard : undefined}\n >\n {columns.map((column, colIndex) => (\n <Flex key={colIndex} flexDirection=\"column\" gap={0}>\n {column.title && <h5 className={styles.columnTitle}>{column.title}</h5>}\n <div className={styles.columnData}>\n {' '}\n {column.render ? column.render(item) : String(item[column.key as keyof T])}\n </div>\n </Flex>\n ))}\n </Components.Card>\n </div>\n ))}\n {footer && (\n <div role=\"listitem\">\n <Components.Card className={isWithinBox ? styles.flushCard : undefined}>\n {(() => {\n const footerContent = footer()\n\n return Object.entries(footerContent).map(([key, content]) => {\n const columnIndex = key.startsWith('column-')\n ? parseInt(key.replace('column-', ''), 10)\n : -1\n const columnTitle = columnIndex >= 0 ? columns[columnIndex]?.title : undefined\n\n return (\n <Flex key={key} flexDirection=\"column\" gap={0}>\n {columnTitle && <h5 className={styles.columnTitle}>{columnTitle}</h5>}\n <div className={styles.footerItem}>{content}</div>\n </Flex>\n )\n })\n })()}\n </Components.Card>\n </div>\n )}\n </div>\n </div>\n )\n}\n"],"names":["DataCards","label","data","columns","itemMenu","onSelect","onSelectAll","getIsItemSelected","hideSelectAll","emptyState","footer","selectionMode","isWithinBox","isFetching","Components","useComponentContext","t","useTranslation","radioGroupName","useId","allSelected","useSelectionState","renderAction","item","index","isSelected","jsx","checked","jsxs","cn","styles","column","colIndex","Flex","footerContent","key","content","columnIndex","columnTitle"],"mappings":"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"}
@@ -1,20 +1,22 @@
1
- const o = "_root_102z1_1", t = "_withinBox_102z1_1", l = "_selectAllRow_102z1_1", _ = "_flushCard_102z1_4", e = "_columnTitle_102z1_19", c = "_columnData_102z1_26", n = "_footerItem_102z1_31", s = {
2
- root: o,
3
- withinBox: t,
1
+ const t = "_root_quxrx_1", o = "_isFetching_quxrx_4", _ = "_withinBox_quxrx_7", l = "_selectAllRow_quxrx_7", c = "_flushCard_quxrx_10", e = "_columnTitle_quxrx_25", n = "_columnData_quxrx_32", s = "_footerItem_quxrx_37", x = {
2
+ root: t,
3
+ isFetching: o,
4
+ withinBox: _,
4
5
  selectAllRow: l,
5
- flushCard: _,
6
+ flushCard: c,
6
7
  columnTitle: e,
7
- columnData: c,
8
- footerItem: n
8
+ columnData: n,
9
+ footerItem: s
9
10
  };
10
11
  export {
11
- c as columnData,
12
+ n as columnData,
12
13
  e as columnTitle,
13
- s as default,
14
- _ as flushCard,
15
- n as footerItem,
16
- o as root,
14
+ x as default,
15
+ c as flushCard,
16
+ s as footerItem,
17
+ o as isFetching,
18
+ t as root,
17
19
  l as selectAllRow,
18
- t as withinBox
20
+ _ as withinBox
19
21
  };
20
22
  //# sourceMappingURL=DataCards.module.scss.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DataCards.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
1
+ {"version":3,"file":"DataCards.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
@@ -14,6 +14,7 @@ export type DataTableProps<T> = {
14
14
  footer?: useDataViewPropReturn<T>['footer'];
15
15
  isWithinBox?: TableProps['isWithinBox'];
16
16
  selectionMode?: SelectionMode;
17
+ isFetching?: useDataViewPropReturn<T>['isFetching'];
17
18
  };
18
19
  /** @internal */
19
- export declare const DataTable: <T>({ label, data, columns, itemMenu, onSelect, onSelectAll, getIsItemSelected, hideSelectAll, emptyState, footer, isWithinBox, selectionMode, }: DataTableProps<T>) => import("react").JSX.Element;
20
+ export declare const DataTable: <T>({ label, data, columns, itemMenu, onSelect, onSelectAll, getIsItemSelected, hideSelectAll, emptyState, footer, isWithinBox, selectionMode, isFetching, }: DataTableProps<T>) => import("react").JSX.Element;
@@ -1,41 +1,43 @@
1
1
  import { jsx as r } from "react/jsx-runtime";
2
- import { useId as j, useState as T } from "react";
3
- import { useTranslation as E } from "react-i18next";
4
- import { useSelectionState as F } from "../useSelectionState.js";
5
- import N from "./DataTable.module.scss.js";
6
- import { useComponentContext as S } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
7
- import { VisuallyHidden as C } from "../../VisuallyHidden/VisuallyHidden.js";
8
- function p(a, o) {
9
- return !o || o === "start" ? a : /* @__PURE__ */ r("div", { className: N.cellEnd, children: a });
2
+ import { useId as T, useState as E } from "react";
3
+ import F from "classnames";
4
+ import { useTranslation as S } from "react-i18next";
5
+ import { useSelectionState as A } from "../useSelectionState.js";
6
+ import h from "./DataTable.module.scss.js";
7
+ import { useComponentContext as B } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
8
+ import { VisuallyHidden as m } from "../../VisuallyHidden/VisuallyHidden.js";
9
+ function f(n, o) {
10
+ return !o || o === "start" ? n : /* @__PURE__ */ r("div", { className: h.cellEnd, children: n });
10
11
  }
11
- function A(a, o) {
12
+ function G(n, o) {
12
13
  if (o.render)
13
- return o.render(a);
14
+ return o.render(n);
14
15
  if (o.key) {
15
16
  const i = o.key;
16
- return String(a[i] ?? "");
17
+ return String(n[i] ?? "");
17
18
  }
18
19
  return "";
19
20
  }
20
- const U = ({
21
- label: a,
21
+ const Y = ({
22
+ label: n,
22
23
  data: o,
23
24
  columns: i,
24
- itemMenu: u,
25
+ itemMenu: d,
25
26
  onSelect: l,
26
- onSelectAll: g,
27
- getIsItemSelected: d,
28
- hideSelectAll: R,
29
- emptyState: h,
30
- footer: b,
27
+ onSelectAll: R,
28
+ getIsItemSelected: u,
29
+ hideSelectAll: v,
30
+ emptyState: b,
31
+ footer: k,
31
32
  isWithinBox: D,
32
- selectionMode: k = "multiple"
33
+ selectionMode: C = "multiple",
34
+ isFetching: g
33
35
  }) => {
34
- const y = S(), { t: c } = E("common"), $ = j(), [m, v] = T(null), { allSelected: w } = F(o, d), H = [
36
+ const p = B(), { t: c } = S("common"), $ = T(), [w, H] = E(null), { allSelected: L } = A(o, u), x = [
35
37
  ...l ? [
36
38
  {
37
39
  key: "select-header",
38
- content: k === "multiple" && d && !R && o.length > 0 ? (
40
+ content: C === "multiple" && u && !v && o.length > 0 ? (
39
41
  // Stop propagation so the surrounding react-aria-components
40
42
  // <Column> press handler doesn't intercept the checkbox click
41
43
  // and desync the controlled DOM state. The inner <input> is
@@ -55,75 +57,75 @@ const U = ({
55
57
  e.stopPropagation();
56
58
  },
57
59
  children: /* @__PURE__ */ r(
58
- y.Checkbox,
60
+ p.Checkbox,
59
61
  {
60
- value: w,
61
- onChange: (e) => g?.(e, o),
62
+ value: L,
63
+ onChange: (e) => R?.(e, o),
62
64
  label: c("table.selectAllRowsLabel"),
63
65
  shouldVisuallyHideLabel: !0
64
66
  }
65
67
  )
66
68
  }
67
69
  )
68
- ) : /* @__PURE__ */ r(C, { children: c("table.selectRowHeader") })
70
+ ) : /* @__PURE__ */ r(m, { children: c("table.selectRowHeader") })
69
71
  }
70
72
  ] : [],
71
73
  ...i.map((e, t) => ({
72
74
  key: typeof e.key == "string" ? e.key : `header-${t}`,
73
- content: p(e.title, e.justify)
75
+ content: f(e.title, e.justify)
74
76
  })),
75
- ...u ? [
77
+ ...d ? [
76
78
  {
77
79
  key: "actions-header",
78
- content: /* @__PURE__ */ r(C, { children: c("table.actionsColumnHeader") })
80
+ content: /* @__PURE__ */ r(m, { children: c("table.actionsColumnHeader") })
79
81
  }
80
82
  ] : []
81
- ], L = (e, t) => {
82
- v(t), l?.(e, !0);
83
- }, x = (e, t) => {
84
- if (k === "single") {
85
- const n = d?.(e) ?? m === t;
83
+ ], N = (e, t) => {
84
+ H(t), l?.(e, !0);
85
+ }, P = (e, t) => {
86
+ if (C === "single") {
87
+ const a = u?.(e) ?? w === t;
86
88
  return /* @__PURE__ */ r(
87
- y.Radio,
89
+ p.Radio,
88
90
  {
89
91
  name: $,
90
- value: n,
92
+ value: a,
91
93
  onChange: () => {
92
- L(e, t);
94
+ N(e, t);
93
95
  },
94
96
  label: c("table.selectRowLabel"),
95
97
  shouldVisuallyHideLabel: !0
96
98
  }
97
99
  );
98
100
  }
99
- const s = d?.(e) ?? !1;
101
+ const s = u?.(e) ?? !1;
100
102
  return /* @__PURE__ */ r(
101
- y.Checkbox,
103
+ p.Checkbox,
102
104
  {
103
105
  value: s,
104
- onChange: (n) => {
105
- l?.(e, n);
106
+ onChange: (a) => {
107
+ l?.(e, a);
106
108
  },
107
109
  label: c("table.selectRowLabel"),
108
110
  shouldVisuallyHideLabel: !0
109
111
  }
110
112
  );
111
- }, P = o.map((e, t) => {
113
+ }, V = o.map((e, t) => {
112
114
  const s = [
113
115
  ...l ? [
114
116
  {
115
117
  key: `select-${t}`,
116
- content: x(e, t)
118
+ content: P(e, t)
117
119
  }
118
120
  ] : [],
119
- ...i.map((n, f) => ({
120
- key: typeof n.key == "string" ? n.key : `cell-${f}`,
121
- content: p(A(e, n), n.justify)
121
+ ...i.map((a, y) => ({
122
+ key: typeof a.key == "string" ? a.key : `cell-${y}`,
123
+ content: f(G(e, a), a.justify)
122
124
  })),
123
- ...u ? [
125
+ ...d ? [
124
126
  {
125
127
  key: `menu-${t}`,
126
- content: u(e)
128
+ content: d(e)
127
129
  }
128
130
  ] : []
129
131
  ];
@@ -131,38 +133,45 @@ const U = ({
131
133
  key: `row-${t}`,
132
134
  data: s
133
135
  };
134
- }), V = (() => {
135
- if (!b) return;
136
- const e = b(), t = [];
136
+ }), j = (() => {
137
+ if (!k) return;
138
+ const e = k(), t = [];
137
139
  return l && t.push({
138
140
  key: "footer-select",
139
141
  content: ""
140
- }), i.forEach((s, n) => {
141
- const f = typeof s.key == "string" ? s.key : `column-${n}`;
142
+ }), i.forEach((s, a) => {
143
+ const y = typeof s.key == "string" ? s.key : `column-${a}`;
142
144
  t.push({
143
- key: `footer-${f}`,
144
- content: p(e[f] || "", s.justify)
145
+ key: `footer-${y}`,
146
+ content: f(e[y] || "", s.justify)
145
147
  });
146
- }), u && t.push({
148
+ }), d && t.push({
147
149
  key: "footer-actions",
148
150
  content: ""
149
151
  }), t;
150
152
  })();
151
153
  return /* @__PURE__ */ r(
152
- y.Table,
154
+ "div",
153
155
  {
154
- "aria-label": a,
155
- "data-testid": "data-table",
156
- headers: H,
157
- rows: P,
158
- footer: V,
159
- emptyState: h ? h() : void 0,
160
- isWithinBox: D,
161
- hasCheckboxColumn: !!l
156
+ className: F(h.tableWrapper, g && h.isFetching),
157
+ "aria-busy": !!g,
158
+ children: /* @__PURE__ */ r(
159
+ p.Table,
160
+ {
161
+ "aria-label": n,
162
+ "data-testid": "data-table",
163
+ headers: x,
164
+ rows: V,
165
+ footer: j,
166
+ emptyState: b ? b() : void 0,
167
+ isWithinBox: D,
168
+ hasCheckboxColumn: !!l
169
+ }
170
+ )
162
171
  }
163
172
  );
164
173
  };
165
174
  export {
166
- U as DataTable
175
+ Y as DataTable
167
176
  };
168
177
  //# sourceMappingURL=DataTable.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DataTable.js","sources":["../../../../../src/components/Common/DataView/DataTable/DataTable.tsx"],"sourcesContent":["import { useId, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { useDataViewPropReturn, SelectionMode } from '../useDataView'\nimport { useSelectionState } from '../useSelectionState'\nimport type { TableData, TableRow, TableProps } from '../../UI/Table/TableTypes'\nimport { VisuallyHidden } from '../../VisuallyHidden'\nimport styles from './DataTable.module.scss'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nfunction withJustify(content: React.ReactNode, justify?: 'start' | 'end') {\n if (!justify || justify === 'start') return content\n return <div className={styles.cellEnd}>{content}</div>\n}\n\n/** @internal */\nexport type DataTableProps<T> = {\n label: string\n columns: useDataViewPropReturn<T>['columns']\n data: useDataViewPropReturn<T>['data']\n itemMenu?: useDataViewPropReturn<T>['itemMenu']\n onSelect?: useDataViewPropReturn<T>['onSelect']\n onSelectAll?: (checked: boolean, visibleData: T[]) => void\n getIsItemSelected?: (item: T) => boolean\n hideSelectAll?: useDataViewPropReturn<T>['hideSelectAll']\n emptyState?: useDataViewPropReturn<T>['emptyState']\n footer?: useDataViewPropReturn<T>['footer']\n isWithinBox?: TableProps['isWithinBox']\n selectionMode?: SelectionMode\n}\n\nfunction getCellContent<T>(\n item: T,\n column: { key?: string | keyof T; render?: (item: T) => React.ReactNode },\n) {\n if (column.render) {\n return column.render(item)\n }\n\n if (column.key) {\n const key = column.key as keyof T\n return String(item[key] ?? '')\n }\n\n return ''\n}\n\n/** @internal */\nexport const DataTable = <T,>({\n label,\n data,\n columns,\n itemMenu,\n onSelect,\n onSelectAll,\n getIsItemSelected,\n hideSelectAll,\n emptyState,\n footer,\n isWithinBox,\n selectionMode = 'multiple',\n}: DataTableProps<T>) => {\n const Components = useComponentContext()\n const { t } = useTranslation('common')\n const radioGroupName = useId()\n const [selectedRadioIndex, setSelectedRadioIndex] = useState<number | null>(null)\n const { allSelected } = useSelectionState(data, getIsItemSelected)\n\n const headers: TableData[] = [\n ...(onSelect\n ? [\n {\n key: 'select-header',\n content:\n selectionMode === 'multiple' &&\n getIsItemSelected &&\n !hideSelectAll &&\n data.length > 0 ? (\n // Stop propagation so the surrounding react-aria-components\n // <Column> press handler doesn't intercept the checkbox click\n // and desync the controlled DOM state. The inner <input> is\n // the actual interactive element; this span is a propagation\n // shield, not a click target itself.\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n <span\n onClick={e => {\n e.stopPropagation()\n }}\n onPointerDown={e => {\n e.stopPropagation()\n }}\n onMouseDown={e => {\n e.stopPropagation()\n }}\n >\n <Components.Checkbox\n value={allSelected}\n onChange={(checked: boolean) => onSelectAll?.(checked, data)}\n label={t('table.selectAllRowsLabel')}\n shouldVisuallyHideLabel\n />\n </span>\n ) : (\n <VisuallyHidden>{t('table.selectRowHeader')}</VisuallyHidden>\n ),\n },\n ]\n : []),\n ...columns.map((column, index) => ({\n key: typeof column.key === 'string' ? column.key : `header-${index}`,\n content: withJustify(column.title, column.justify),\n })),\n ...(itemMenu\n ? [\n {\n key: 'actions-header',\n content: <VisuallyHidden>{t('table.actionsColumnHeader')}</VisuallyHidden>,\n },\n ]\n : []),\n ]\n\n const handleRadioSelect = (item: T, rowIndex: number) => {\n setSelectedRadioIndex(rowIndex)\n onSelect?.(item, true)\n }\n\n const renderSelectionControl = (item: T, rowIndex: number) => {\n if (selectionMode === 'single') {\n const isSelected = getIsItemSelected?.(item) ?? selectedRadioIndex === rowIndex\n return (\n <Components.Radio\n name={radioGroupName}\n value={isSelected}\n onChange={() => {\n handleRadioSelect(item, rowIndex)\n }}\n label={t('table.selectRowLabel')}\n shouldVisuallyHideLabel\n />\n )\n }\n\n const isSelected = getIsItemSelected?.(item) ?? false\n return (\n <Components.Checkbox\n value={isSelected}\n onChange={(checked: boolean) => {\n onSelect?.(item, checked)\n }}\n label={t('table.selectRowLabel')}\n shouldVisuallyHideLabel\n />\n )\n }\n\n const rows: TableRow[] = data.map((item, rowIndex) => {\n const rowData: TableData[] = [\n ...(onSelect\n ? [\n {\n key: `select-${rowIndex}`,\n content: renderSelectionControl(item, rowIndex),\n },\n ]\n : []),\n ...columns.map((column, colIndex) => {\n return {\n key: typeof column.key === 'string' ? column.key : `cell-${colIndex}`,\n content: withJustify(getCellContent(item, column), column.justify),\n }\n }),\n ...(itemMenu\n ? [\n {\n key: `menu-${rowIndex}`,\n content: itemMenu(item),\n },\n ]\n : []),\n ]\n\n return {\n key: `row-${rowIndex}`,\n data: rowData,\n }\n })\n\n const buildFooterData = () => {\n if (!footer) return undefined\n\n const footerContent = footer()\n const footerCells: TableData[] = []\n\n // Add select column footer (empty)\n if (onSelect) {\n footerCells.push({\n key: 'footer-select',\n content: '',\n })\n }\n\n // Add data column footers\n columns.forEach((column, index) => {\n const columnKey = typeof column.key === 'string' ? column.key : `column-${index}`\n footerCells.push({\n key: `footer-${columnKey}`,\n content: withJustify(footerContent[columnKey] || '', column.justify),\n })\n })\n\n // Add actions column footer (empty)\n if (itemMenu) {\n footerCells.push({\n key: 'footer-actions',\n content: '',\n })\n }\n\n return footerCells\n }\n\n const footerData = buildFooterData()\n\n return (\n <Components.Table\n aria-label={label}\n data-testid=\"data-table\"\n headers={headers}\n rows={rows}\n footer={footerData}\n emptyState={emptyState ? emptyState() : undefined}\n isWithinBox={isWithinBox}\n hasCheckboxColumn={!!onSelect}\n />\n )\n}\n"],"names":["withJustify","content","justify","jsx","styles","getCellContent","item","column","key","DataTable","label","data","columns","itemMenu","onSelect","onSelectAll","getIsItemSelected","hideSelectAll","emptyState","footer","isWithinBox","selectionMode","Components","useComponentContext","t","useTranslation","radioGroupName","useId","selectedRadioIndex","setSelectedRadioIndex","useState","allSelected","useSelectionState","headers","checked","VisuallyHidden","index","handleRadioSelect","rowIndex","renderSelectionControl","isSelected","rows","rowData","colIndex","footerData","footerContent","footerCells","columnKey"],"mappings":"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"}
1
+ {"version":3,"file":"DataTable.js","sources":["../../../../../src/components/Common/DataView/DataTable/DataTable.tsx"],"sourcesContent":["import { useId, useState } from 'react'\nimport cn from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport type { useDataViewPropReturn, SelectionMode } from '../useDataView'\nimport { useSelectionState } from '../useSelectionState'\nimport type { TableData, TableRow, TableProps } from '../../UI/Table/TableTypes'\nimport { VisuallyHidden } from '../../VisuallyHidden'\nimport styles from './DataTable.module.scss'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nfunction withJustify(content: React.ReactNode, justify?: 'start' | 'end') {\n if (!justify || justify === 'start') return content\n return <div className={styles.cellEnd}>{content}</div>\n}\n\n/** @internal */\nexport type DataTableProps<T> = {\n label: string\n columns: useDataViewPropReturn<T>['columns']\n data: useDataViewPropReturn<T>['data']\n itemMenu?: useDataViewPropReturn<T>['itemMenu']\n onSelect?: useDataViewPropReturn<T>['onSelect']\n onSelectAll?: (checked: boolean, visibleData: T[]) => void\n getIsItemSelected?: (item: T) => boolean\n hideSelectAll?: useDataViewPropReturn<T>['hideSelectAll']\n emptyState?: useDataViewPropReturn<T>['emptyState']\n footer?: useDataViewPropReturn<T>['footer']\n isWithinBox?: TableProps['isWithinBox']\n selectionMode?: SelectionMode\n isFetching?: useDataViewPropReturn<T>['isFetching']\n}\n\nfunction getCellContent<T>(\n item: T,\n column: { key?: string | keyof T; render?: (item: T) => React.ReactNode },\n) {\n if (column.render) {\n return column.render(item)\n }\n\n if (column.key) {\n const key = column.key as keyof T\n return String(item[key] ?? '')\n }\n\n return ''\n}\n\n/** @internal */\nexport const DataTable = <T,>({\n label,\n data,\n columns,\n itemMenu,\n onSelect,\n onSelectAll,\n getIsItemSelected,\n hideSelectAll,\n emptyState,\n footer,\n isWithinBox,\n selectionMode = 'multiple',\n isFetching,\n}: DataTableProps<T>) => {\n const Components = useComponentContext()\n const { t } = useTranslation('common')\n const radioGroupName = useId()\n const [selectedRadioIndex, setSelectedRadioIndex] = useState<number | null>(null)\n const { allSelected } = useSelectionState(data, getIsItemSelected)\n\n const headers: TableData[] = [\n ...(onSelect\n ? [\n {\n key: 'select-header',\n content:\n selectionMode === 'multiple' &&\n getIsItemSelected &&\n !hideSelectAll &&\n data.length > 0 ? (\n // Stop propagation so the surrounding react-aria-components\n // <Column> press handler doesn't intercept the checkbox click\n // and desync the controlled DOM state. The inner <input> is\n // the actual interactive element; this span is a propagation\n // shield, not a click target itself.\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n <span\n onClick={e => {\n e.stopPropagation()\n }}\n onPointerDown={e => {\n e.stopPropagation()\n }}\n onMouseDown={e => {\n e.stopPropagation()\n }}\n >\n <Components.Checkbox\n value={allSelected}\n onChange={(checked: boolean) => onSelectAll?.(checked, data)}\n label={t('table.selectAllRowsLabel')}\n shouldVisuallyHideLabel\n />\n </span>\n ) : (\n <VisuallyHidden>{t('table.selectRowHeader')}</VisuallyHidden>\n ),\n },\n ]\n : []),\n ...columns.map((column, index) => ({\n key: typeof column.key === 'string' ? column.key : `header-${index}`,\n content: withJustify(column.title, column.justify),\n })),\n ...(itemMenu\n ? [\n {\n key: 'actions-header',\n content: <VisuallyHidden>{t('table.actionsColumnHeader')}</VisuallyHidden>,\n },\n ]\n : []),\n ]\n\n const handleRadioSelect = (item: T, rowIndex: number) => {\n setSelectedRadioIndex(rowIndex)\n onSelect?.(item, true)\n }\n\n const renderSelectionControl = (item: T, rowIndex: number) => {\n if (selectionMode === 'single') {\n const isSelected = getIsItemSelected?.(item) ?? selectedRadioIndex === rowIndex\n return (\n <Components.Radio\n name={radioGroupName}\n value={isSelected}\n onChange={() => {\n handleRadioSelect(item, rowIndex)\n }}\n label={t('table.selectRowLabel')}\n shouldVisuallyHideLabel\n />\n )\n }\n\n const isSelected = getIsItemSelected?.(item) ?? false\n return (\n <Components.Checkbox\n value={isSelected}\n onChange={(checked: boolean) => {\n onSelect?.(item, checked)\n }}\n label={t('table.selectRowLabel')}\n shouldVisuallyHideLabel\n />\n )\n }\n\n const rows: TableRow[] = data.map((item, rowIndex) => {\n const rowData: TableData[] = [\n ...(onSelect\n ? [\n {\n key: `select-${rowIndex}`,\n content: renderSelectionControl(item, rowIndex),\n },\n ]\n : []),\n ...columns.map((column, colIndex) => {\n return {\n key: typeof column.key === 'string' ? column.key : `cell-${colIndex}`,\n content: withJustify(getCellContent(item, column), column.justify),\n }\n }),\n ...(itemMenu\n ? [\n {\n key: `menu-${rowIndex}`,\n content: itemMenu(item),\n },\n ]\n : []),\n ]\n\n return {\n key: `row-${rowIndex}`,\n data: rowData,\n }\n })\n\n const buildFooterData = () => {\n if (!footer) return undefined\n\n const footerContent = footer()\n const footerCells: TableData[] = []\n\n // Add select column footer (empty)\n if (onSelect) {\n footerCells.push({\n key: 'footer-select',\n content: '',\n })\n }\n\n // Add data column footers\n columns.forEach((column, index) => {\n const columnKey = typeof column.key === 'string' ? column.key : `column-${index}`\n footerCells.push({\n key: `footer-${columnKey}`,\n content: withJustify(footerContent[columnKey] || '', column.justify),\n })\n })\n\n // Add actions column footer (empty)\n if (itemMenu) {\n footerCells.push({\n key: 'footer-actions',\n content: '',\n })\n }\n\n return footerCells\n }\n\n const footerData = buildFooterData()\n\n return (\n <div\n className={cn(styles.tableWrapper, isFetching && styles.isFetching)}\n aria-busy={Boolean(isFetching)}\n >\n <Components.Table\n aria-label={label}\n data-testid=\"data-table\"\n headers={headers}\n rows={rows}\n footer={footerData}\n emptyState={emptyState ? emptyState() : undefined}\n isWithinBox={isWithinBox}\n hasCheckboxColumn={!!onSelect}\n />\n </div>\n )\n}\n"],"names":["withJustify","content","justify","jsx","styles","getCellContent","item","column","key","DataTable","label","data","columns","itemMenu","onSelect","onSelectAll","getIsItemSelected","hideSelectAll","emptyState","footer","isWithinBox","selectionMode","isFetching","Components","useComponentContext","t","useTranslation","radioGroupName","useId","selectedRadioIndex","setSelectedRadioIndex","useState","allSelected","useSelectionState","headers","checked","VisuallyHidden","index","handleRadioSelect","rowIndex","renderSelectionControl","isSelected","rows","rowData","colIndex","footerData","footerContent","footerCells","columnKey","cn"],"mappings":"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"}
@@ -1,8 +1,12 @@
1
- const l = "_cellEnd_oem7d_1", e = {
2
- cellEnd: l
1
+ const e = "_cellEnd_p6l7a_1", l = "_tableWrapper_p6l7a_6", t = "_isFetching_p6l7a_9", a = {
2
+ cellEnd: e,
3
+ tableWrapper: l,
4
+ isFetching: t
3
5
  };
4
6
  export {
5
- l as cellEnd,
6
- e as default
7
+ e as cellEnd,
8
+ a as default,
9
+ t as isFetching,
10
+ l as tableWrapper
7
11
  };
8
12
  //# sourceMappingURL=DataTable.module.scss.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DataTable.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
1
+ {"version":3,"file":"DataTable.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}