@gusto/embedded-react-sdk 0.55.2 → 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 (159) hide show
  1. package/CHANGELOG.md +41 -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/Common/FieldLayout/FieldLayout.js +6 -6
  15. package/dist/components/Common/Fieldset/Fieldset.js +6 -6
  16. package/dist/components/Common/HorizontalFieldLayout/HorizontalFieldLayout.js +6 -6
  17. package/dist/components/Common/UI/MultiSelectComboBox/MultiSelectComboBox.js +58 -49
  18. package/dist/components/Common/UI/MultiSelectComboBox/MultiSelectComboBox.js.map +1 -1
  19. package/dist/components/Common/UI/MultiSelectComboBox/MultiSelectComboBox.module.scss.js +14 -10
  20. package/dist/components/Common/UI/MultiSelectComboBox/MultiSelectComboBox.module.scss.js.map +1 -1
  21. package/dist/components/Common/UI/MultiSelectComboBox/MultiSelectComboBoxTypes.d.ts +4 -0
  22. package/dist/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.js +3 -4
  23. package/dist/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.js.map +1 -1
  24. package/dist/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.js +3 -4
  25. package/dist/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.js.map +1 -1
  26. package/dist/components/Company/AssignSignatory/useAssignSignatory.js +5 -6
  27. package/dist/components/Company/AssignSignatory/useAssignSignatory.js.map +1 -1
  28. package/dist/components/Company/BankAccount/BankAccountForm/context.js +3 -4
  29. package/dist/components/Company/BankAccount/BankAccountForm/context.js.map +1 -1
  30. package/dist/components/Company/DocumentSigner/DocumentList/DocumentList.d.ts +4 -0
  31. package/dist/components/Company/DocumentSigner/DocumentList/DocumentList.js.map +1 -1
  32. package/dist/components/Company/DocumentSigner/DocumentList/List.js +11 -8
  33. package/dist/components/Company/DocumentSigner/DocumentList/List.js.map +1 -1
  34. package/dist/components/Company/DocumentSigner/DocumentList/useDocumentList.js +3 -4
  35. package/dist/components/Company/DocumentSigner/DocumentList/useDocumentList.js.map +1 -1
  36. package/dist/components/Company/FederalTaxes/useFederalTaxes.js +5 -6
  37. package/dist/components/Company/FederalTaxes/useFederalTaxes.js.map +1 -1
  38. package/dist/components/Company/Industry/Context.js +6 -7
  39. package/dist/components/Company/Industry/Context.js.map +1 -1
  40. package/dist/components/Company/Locations/LocationForm/useLocationForm.js +3 -4
  41. package/dist/components/Company/Locations/LocationForm/useLocationForm.js.map +1 -1
  42. package/dist/components/Company/Locations/LocationsList/List.js +27 -25
  43. package/dist/components/Company/Locations/LocationsList/List.js.map +1 -1
  44. package/dist/components/Company/Locations/LocationsList/LocationsList.js +41 -36
  45. package/dist/components/Company/Locations/LocationsList/LocationsList.js.map +1 -1
  46. package/dist/components/Company/Locations/LocationsList/useLocationsList.d.ts +1 -0
  47. package/dist/components/Company/Locations/LocationsList/useLocationsList.js +3 -4
  48. package/dist/components/Company/Locations/LocationsList/useLocationsList.js.map +1 -1
  49. package/dist/components/Company/OnboardingOverview/context.js +3 -4
  50. package/dist/components/Company/OnboardingOverview/context.js.map +1 -1
  51. package/dist/components/Company/StateTaxes/StateTaxesForm/Form.d.ts +9 -2
  52. package/dist/components/Company/StateTaxes/StateTaxesForm/Form.js +19 -18
  53. package/dist/components/Company/StateTaxes/StateTaxesForm/Form.js.map +1 -1
  54. package/dist/components/Company/StateTaxes/StateTaxesForm/StateTaxesForm.js +63 -62
  55. package/dist/components/Company/StateTaxes/StateTaxesForm/StateTaxesForm.js.map +1 -1
  56. package/dist/components/Company/StateTaxes/StateTaxesForm/context.js +3 -4
  57. package/dist/components/Company/StateTaxes/StateTaxesForm/context.js.map +1 -1
  58. package/dist/components/Company/StateTaxes/StateTaxesList/context.js +3 -4
  59. package/dist/components/Company/StateTaxes/StateTaxesList/context.js.map +1 -1
  60. package/dist/components/Company/StateTaxes/TaxRateManagement/AddTaxRateDialog.js +69 -65
  61. package/dist/components/Company/StateTaxes/TaxRateManagement/AddTaxRateDialog.js.map +1 -1
  62. package/dist/components/Company/StateTaxes/TaxRateManagement/context.js +3 -4
  63. package/dist/components/Company/StateTaxes/TaxRateManagement/context.js.map +1 -1
  64. package/dist/components/Company/StateTaxes/TaxRateManagement/toHistoryRows.js +30 -23
  65. package/dist/components/Company/StateTaxes/TaxRateManagement/toHistoryRows.js.map +1 -1
  66. package/dist/components/Company/StateTaxes/shared/RequirementFields.d.ts +8 -4
  67. package/dist/components/Company/StateTaxes/shared/RequirementFields.js +13 -12
  68. package/dist/components/Company/StateTaxes/shared/RequirementFields.js.map +1 -1
  69. package/dist/components/Company/StateTaxes/shared/prepareRequirements.d.ts +29 -0
  70. package/dist/components/Company/StateTaxes/shared/prepareRequirements.js +24 -0
  71. package/dist/components/Company/StateTaxes/shared/prepareRequirements.js.map +1 -0
  72. package/dist/components/Company/StateTaxes/shared/prepareRequirements.test.d.ts +1 -0
  73. package/dist/components/Contractor/Payments/PaymentsList/PaymentsList.js +68 -55
  74. package/dist/components/Contractor/Payments/PaymentsList/PaymentsList.js.map +1 -1
  75. package/dist/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.js +36 -35
  76. package/dist/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.js.map +1 -1
  77. package/dist/components/Employee/Compensation/shared/useJobForm/useJobForm.js +116 -116
  78. package/dist/components/Employee/Compensation/shared/useJobForm/useJobForm.js.map +1 -1
  79. package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/DocumentList.d.ts +4 -0
  80. package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/DocumentList.js +19 -19
  81. package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/DocumentList.js.map +1 -1
  82. package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/List.js +16 -13
  83. package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/List.js.map +1 -1
  84. package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.js +3 -4
  85. package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.js.map +1 -1
  86. package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentSigner.d.ts +4 -0
  87. package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentSigner.js.map +1 -1
  88. package/dist/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.js +84 -96
  89. package/dist/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.js.map +1 -1
  90. package/dist/components/Flow/Flow.js +22 -22
  91. package/dist/components/Flow/Flow.js.map +1 -1
  92. package/dist/components/Flow/useFlow.js +3 -3
  93. package/dist/components/InformationRequests/InformationRequests.d.ts +1 -1
  94. package/dist/components/InformationRequests/InformationRequests.js +68 -53
  95. package/dist/components/InformationRequests/InformationRequests.js.map +1 -1
  96. package/dist/components/Payroll/GrossUpModal/GrossUpModal.js +2 -3
  97. package/dist/components/Payroll/GrossUpModal/GrossUpModal.js.map +1 -1
  98. package/dist/components/Payroll/OffCycleCreation/OffCycleCreation.js +87 -81
  99. package/dist/components/Payroll/OffCycleCreation/OffCycleCreation.js.map +1 -1
  100. package/dist/components/Payroll/OffCycleCreation/OffCycleCreationPresentation.d.ts +1 -1
  101. package/dist/components/Payroll/OffCycleCreation/OffCycleCreationPresentation.js +86 -67
  102. package/dist/components/Payroll/OffCycleCreation/OffCycleCreationPresentation.js.map +1 -1
  103. package/dist/components/Payroll/OffCycleCreation/OffCycleCreationTypes.d.ts +4 -0
  104. package/dist/components/Payroll/OffCycleDeductionsSetting/OffCycleDeductionsSetting.d.ts +1 -1
  105. package/dist/components/Payroll/OffCycleDeductionsSetting/OffCycleDeductionsSetting.js +26 -21
  106. package/dist/components/Payroll/OffCycleDeductionsSetting/OffCycleDeductionsSetting.js.map +1 -1
  107. package/dist/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.d.ts +8 -1
  108. package/dist/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.js +29 -17
  109. package/dist/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.js.map +1 -1
  110. package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTable.js +21 -18
  111. package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTable.js.map +1 -1
  112. package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTable.module.scss.js +9 -7
  113. package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTable.module.scss.js.map +1 -1
  114. package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTableTypes.d.ts +2 -0
  115. package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTableTypes.js.map +1 -1
  116. package/dist/components/Payroll/PayrollConfiguration/PayrollConfiguration.js +200 -199
  117. package/dist/components/Payroll/PayrollConfiguration/PayrollConfiguration.js.map +1 -1
  118. package/dist/components/Payroll/PayrollConfiguration/usePayrollConfigurationData.d.ts +3 -2
  119. package/dist/components/Payroll/PayrollConfiguration/usePayrollConfigurationData.js +32 -32
  120. package/dist/components/Payroll/PayrollConfiguration/usePayrollConfigurationData.js.map +1 -1
  121. package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.js +254 -243
  122. package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.js.map +1 -1
  123. package/dist/components/Payroll/PayrollHistory/PayrollHistory.js +83 -76
  124. package/dist/components/Payroll/PayrollHistory/PayrollHistory.js.map +1 -1
  125. package/dist/components/Payroll/PayrollHistory/PayrollHistoryPresentation.js +23 -22
  126. package/dist/components/Payroll/PayrollHistory/PayrollHistoryPresentation.js.map +1 -1
  127. package/dist/components/Payroll/PayrollList/PayrollList.js +108 -97
  128. package/dist/components/Payroll/PayrollList/PayrollList.js.map +1 -1
  129. package/dist/components/Payroll/PayrollList/PayrollListPresentation.js +38 -37
  130. package/dist/components/Payroll/PayrollList/PayrollListPresentation.js.map +1 -1
  131. package/dist/components/Payroll/PayrollOverview/PayrollOverview.d.ts +8 -1
  132. package/dist/components/Payroll/PayrollOverview/PayrollOverview.js +196 -174
  133. package/dist/components/Payroll/PayrollOverview/PayrollOverview.js.map +1 -1
  134. package/dist/components/Payroll/PayrollOverview/PayrollOverviewPresentation.d.ts +3 -1
  135. package/dist/components/Payroll/PayrollOverview/PayrollOverviewPresentation.js +173 -163
  136. package/dist/components/Payroll/PayrollOverview/PayrollOverviewPresentation.js.map +1 -1
  137. package/dist/components/Payroll/helpers.d.ts +0 -15
  138. package/dist/components/Payroll/helpers.js +13 -18
  139. package/dist/components/Payroll/helpers.js.map +1 -1
  140. package/dist/components/Payroll/usePreparedPayrollData.js +8 -9
  141. package/dist/components/Payroll/usePreparedPayrollData.js.map +1 -1
  142. package/dist/helpers/openPdfInNewTab.d.ts +15 -0
  143. package/dist/helpers/openPdfInNewTab.js +28 -0
  144. package/dist/helpers/openPdfInNewTab.js.map +1 -0
  145. package/dist/i18n/en/Company.DocumentList.json.js +34 -32
  146. package/dist/i18n/en/Company.DocumentList.json.js.map +1 -1
  147. package/dist/i18n/en/Company.StateTaxes.json.js +1 -1
  148. package/dist/i18n/en/Employee.DocumentSigner.json.js +24 -22
  149. package/dist/i18n/en/Employee.DocumentSigner.json.js.map +1 -1
  150. package/dist/i18n/en/Payroll.OffCycleCreation.json.js +11 -9
  151. package/dist/i18n/en/Payroll.OffCycleCreation.json.js.map +1 -1
  152. package/dist/i18n/en/Payroll.OffCycleTaxWithholding.json.js +7 -7
  153. package/dist/i18n/en/Payroll.PayrollEditEmployee.json.js +29 -27
  154. package/dist/i18n/en/Payroll.PayrollEditEmployee.json.js.map +1 -1
  155. package/dist/i18n/en/Payroll.PayrollOverview.json.js +41 -39
  156. package/dist/i18n/en/Payroll.PayrollOverview.json.js.map +1 -1
  157. package/dist/i18n/types.d.ts +331 -1
  158. package/dist/style.css +1 -1
  159. package/package.json +21 -21
@@ -1,52 +1,53 @@
1
- import { jsxs as C, jsx as n } from "react/jsx-runtime";
1
+ import { jsxs as C, jsx as s } from "react/jsx-runtime";
2
2
  import { useRef as D, useMemo as w } from "react";
3
3
  import { PaginationControl as x } from "../PaginationControl/PaginationControl.js";
4
- import h from "./DataView.module.scss.js";
5
- import { DataTable as j } from "./DataTable/DataTable.js";
6
- import { DataCards as v } from "./DataCards/DataCards.js";
7
- import B from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
8
- const T = ({
4
+ import j from "./DataView.module.scss.js";
5
+ import { DataTable as v } from "./DataTable/DataTable.js";
6
+ import { DataCards as B } from "./DataCards/DataCards.js";
7
+ import M from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
8
+ const g = ({
9
9
  pagination: t,
10
- isFetching: s,
10
+ isFetching: o,
11
11
  breakAt: a = "small",
12
12
  breakpoints: i,
13
13
  footer: m,
14
14
  isWithinBox: p,
15
- emptyState: c,
16
- selectionMode: l,
15
+ emptyState: l,
16
+ selectionMode: c,
17
17
  onSelectAll: f,
18
18
  ...d
19
19
  }) => {
20
- const e = D(null), o = B({
20
+ const e = D(null), r = M({
21
21
  ref: e,
22
22
  breakpoints: i
23
- }), u = o.length > 0, r = !o.includes(a), b = w(() => r ? v : j, [r]);
23
+ }), u = r.length > 0, n = !r.includes(a), b = w(() => n ? B : v, [n]);
24
24
  return /* @__PURE__ */ C(
25
25
  "div",
26
26
  {
27
27
  "data-testid": "data-view",
28
- className: h.dataViewContainer,
28
+ className: j.dataViewContainer,
29
29
  ref: (k) => {
30
30
  e.current = k;
31
31
  },
32
32
  children: [
33
- u && /* @__PURE__ */ n(
33
+ u && /* @__PURE__ */ s(
34
34
  b,
35
35
  {
36
36
  ...d,
37
37
  onSelectAll: f,
38
38
  footer: m,
39
39
  isWithinBox: p,
40
- emptyState: c,
41
- selectionMode: l
40
+ emptyState: l,
41
+ selectionMode: c,
42
+ isFetching: o
42
43
  }
43
44
  ),
44
- t && /* @__PURE__ */ n(x, { ...t, isFetching: s })
45
+ t && /* @__PURE__ */ s(x, { ...t, isFetching: o })
45
46
  ]
46
47
  }
47
48
  );
48
49
  };
49
50
  export {
50
- T as DataView
51
+ g as DataView
51
52
  };
52
53
  //# sourceMappingURL=DataView.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DataView.js","sources":["../../../../src/components/Common/DataView/DataView.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\nimport { PaginationControl } from '../PaginationControl/PaginationControl'\nimport type { TableProps } from '../UI/Table/TableTypes'\nimport styles from './DataView.module.scss'\nimport { DataTable } from './DataTable/DataTable'\nimport type { useDataViewPropReturn, SelectionMode } from './useDataView'\nimport { DataCards } from './DataCards/DataCards'\nimport type { useContainerBreakpointsProps } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\n/** @internal */\nexport type DataViewProps<T> = {\n columns: useDataViewPropReturn<T>['columns']\n data: T[]\n pagination?: useDataViewPropReturn<T>['pagination']\n label: string\n itemMenu?: useDataViewPropReturn<T>['itemMenu']\n onSelect?: useDataViewPropReturn<T>['onSelect']\n onSelectAll?: useDataViewPropReturn<T>['onSelectAll']\n getIsItemSelected?: (item: T) => boolean\n hideSelectAll?: useDataViewPropReturn<T>['hideSelectAll']\n breakAt?: string\n breakpoints?: useContainerBreakpointsProps['breakpoints']\n footer?: useDataViewPropReturn<T>['footer']\n isFetching?: boolean\n isWithinBox?: TableProps['isWithinBox']\n emptyState?: useDataViewPropReturn<T>['emptyState']\n selectionMode?: SelectionMode\n}\n\n/** @internal */\nexport const DataView = <T,>({\n pagination,\n isFetching,\n breakAt = 'small',\n breakpoints: customBreakpoints,\n footer,\n isWithinBox,\n emptyState,\n selectionMode,\n onSelectAll,\n ...dataViewProps\n}: DataViewProps<T>) => {\n const containerRef = useRef<HTMLElement | null>(null)\n const breakpoints = useContainerBreakpoints({\n ref: containerRef,\n breakpoints: customBreakpoints,\n })\n\n // Wait for breakpoints to be detected before rendering\n const isBreakpointsDetected = breakpoints.length > 0\n const isMobile = !breakpoints.includes(breakAt)\n\n const Component = useMemo(() => {\n return isMobile ? DataCards : DataTable\n }, [isMobile])\n\n return (\n <div\n data-testid=\"data-view\"\n className={styles.dataViewContainer}\n ref={ref => {\n containerRef.current = ref\n }}\n >\n {isBreakpointsDetected && (\n <Component\n {...dataViewProps}\n onSelectAll={onSelectAll}\n footer={footer}\n isWithinBox={isWithinBox}\n emptyState={emptyState}\n selectionMode={selectionMode}\n />\n )}\n {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}\n </div>\n )\n}\n"],"names":["DataView","pagination","isFetching","breakAt","customBreakpoints","footer","isWithinBox","emptyState","selectionMode","onSelectAll","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AA+BO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAaC;AAAA,EACb,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,IACL,aAAaP;AAAA,EAAA,CACd,GAGKW,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAASV,CAAO,GAExCc,IAAYC,EAAQ,MACjBF,IAAWG,IAAYC,GAC7B,CAACJ,CAAQ,CAAC;AAEb,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,EAAO;AAAA,MAClB,KAAK,CAAAC,MAAO;AACV,QAAAZ,EAAa,UAAUY;AAAA,MACzB;AAAA,MAEC,UAAA;AAAA,QAAAR,KACC,gBAAAS;AAAA,UAACP;AAAA,UAAA;AAAA,YACE,GAAGP;AAAA,YACJ,aAAAD;AAAA,YACA,QAAAJ;AAAA,YACA,aAAAC;AAAA,YACA,YAAAC;AAAA,YACA,eAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHP,KAAc,gBAAAuB,EAACC,GAAA,EAAmB,GAAGxB,GAAY,YAAAC,EAAA,CAAwB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhF;"}
1
+ {"version":3,"file":"DataView.js","sources":["../../../../src/components/Common/DataView/DataView.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\nimport { PaginationControl } from '../PaginationControl/PaginationControl'\nimport type { TableProps } from '../UI/Table/TableTypes'\nimport styles from './DataView.module.scss'\nimport { DataTable } from './DataTable/DataTable'\nimport type { useDataViewPropReturn, SelectionMode } from './useDataView'\nimport { DataCards } from './DataCards/DataCards'\nimport type { useContainerBreakpointsProps } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\n/** @internal */\nexport type DataViewProps<T> = {\n columns: useDataViewPropReturn<T>['columns']\n data: T[]\n pagination?: useDataViewPropReturn<T>['pagination']\n label: string\n itemMenu?: useDataViewPropReturn<T>['itemMenu']\n onSelect?: useDataViewPropReturn<T>['onSelect']\n onSelectAll?: useDataViewPropReturn<T>['onSelectAll']\n getIsItemSelected?: (item: T) => boolean\n hideSelectAll?: useDataViewPropReturn<T>['hideSelectAll']\n breakAt?: string\n breakpoints?: useContainerBreakpointsProps['breakpoints']\n footer?: useDataViewPropReturn<T>['footer']\n isFetching?: boolean\n isWithinBox?: TableProps['isWithinBox']\n emptyState?: useDataViewPropReturn<T>['emptyState']\n selectionMode?: SelectionMode\n}\n\n/** @internal */\nexport const DataView = <T,>({\n pagination,\n isFetching,\n breakAt = 'small',\n breakpoints: customBreakpoints,\n footer,\n isWithinBox,\n emptyState,\n selectionMode,\n onSelectAll,\n ...dataViewProps\n}: DataViewProps<T>) => {\n const containerRef = useRef<HTMLElement | null>(null)\n const breakpoints = useContainerBreakpoints({\n ref: containerRef,\n breakpoints: customBreakpoints,\n })\n\n // Wait for breakpoints to be detected before rendering\n const isBreakpointsDetected = breakpoints.length > 0\n const isMobile = !breakpoints.includes(breakAt)\n\n const Component = useMemo(() => {\n return isMobile ? DataCards : DataTable\n }, [isMobile])\n\n return (\n <div\n data-testid=\"data-view\"\n className={styles.dataViewContainer}\n ref={ref => {\n containerRef.current = ref\n }}\n >\n {isBreakpointsDetected && (\n <Component\n {...dataViewProps}\n onSelectAll={onSelectAll}\n footer={footer}\n isWithinBox={isWithinBox}\n emptyState={emptyState}\n selectionMode={selectionMode}\n isFetching={isFetching}\n />\n )}\n {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}\n </div>\n )\n}\n"],"names":["DataView","pagination","isFetching","breakAt","customBreakpoints","footer","isWithinBox","emptyState","selectionMode","onSelectAll","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AA+BO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAaC;AAAA,EACb,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,IACL,aAAaP;AAAA,EAAA,CACd,GAGKW,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAASV,CAAO,GAExCc,IAAYC,EAAQ,MACjBF,IAAWG,IAAYC,GAC7B,CAACJ,CAAQ,CAAC;AAEb,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,EAAO;AAAA,MAClB,KAAK,CAAAC,MAAO;AACV,QAAAZ,EAAa,UAAUY;AAAA,MACzB;AAAA,MAEC,UAAA;AAAA,QAAAR,KACC,gBAAAS;AAAA,UAACP;AAAA,UAAA;AAAA,YACE,GAAGP;AAAA,YACJ,aAAAD;AAAA,YACA,QAAAJ;AAAA,YACA,aAAAC;AAAA,YACA,YAAAC;AAAA,YACA,eAAAC;AAAA,YACA,YAAAN;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHD,KAAc,gBAAAuB,EAACC,GAAA,EAAmB,GAAGxB,GAAY,YAAAC,EAAA,CAAwB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhF;"}
@@ -1,9 +1,9 @@
1
1
  import { jsxs as s, jsx as e } from "react/jsx-runtime";
2
2
  import t from "classnames";
3
- import { FieldCaption as F } from "../FieldCaption/FieldCaption.js";
3
+ import { FieldDescription as F } from "../FieldDescription/FieldDescription.js";
4
+ import { FieldCaption as N } from "../FieldCaption/FieldCaption.js";
4
5
  import r from "./FieldLayout.module.scss.js";
5
- import { getDataProps as N } from "../../../helpers/getDataProps.js";
6
- import { FieldDescription as g } from "../FieldDescription/FieldDescription.js";
6
+ import { getDataProps as g } from "../../../helpers/getDataProps.js";
7
7
  import { FieldErrorMessage as x } from "../FieldErrorMessage/FieldErrorMessage.js";
8
8
  const A = ({
9
9
  label: l,
@@ -18,7 +18,7 @@ const A = ({
18
18
  className: f,
19
19
  withErrorIcon: h = !0,
20
20
  ...D
21
- }) => /* @__PURE__ */ s("div", { className: t(r.root, f), ...N(D), children: [
21
+ }) => /* @__PURE__ */ s("div", { className: t(r.root, f), ...g(D), children: [
22
22
  /* @__PURE__ */ s(
23
23
  "div",
24
24
  {
@@ -28,7 +28,7 @@ const A = ({
28
28
  }),
29
29
  children: [
30
30
  /* @__PURE__ */ e(
31
- F,
31
+ N,
32
32
  {
33
33
  htmlFor: p,
34
34
  isRequired: c,
@@ -36,7 +36,7 @@ const A = ({
36
36
  children: l
37
37
  }
38
38
  ),
39
- /* @__PURE__ */ e(g, { id: a, children: i })
39
+ /* @__PURE__ */ e(F, { id: a, children: i })
40
40
  ]
41
41
  }
42
42
  ),
@@ -1,10 +1,10 @@
1
1
  import { jsxs as a, jsx as r } from "react/jsx-runtime";
2
2
  import { useId as f } from "react";
3
3
  import l from "classnames";
4
+ import { FieldDescription as g } from "../FieldDescription/FieldDescription.js";
4
5
  import e from "./Fieldset.module.scss.js";
5
- import { getDataProps as g } from "../../../helpers/getDataProps.js";
6
- import { FieldCaption as h } from "../FieldCaption/FieldCaption.js";
7
- import { FieldDescription as D } from "../FieldDescription/FieldDescription.js";
6
+ import { getDataProps as h } from "../../../helpers/getDataProps.js";
7
+ import { FieldCaption as D } from "../FieldCaption/FieldCaption.js";
8
8
  import { FieldErrorMessage as F } from "../FieldErrorMessage/FieldErrorMessage.js";
9
9
  const y = ({
10
10
  children: d,
@@ -22,7 +22,7 @@ const y = ({
22
22
  {
23
23
  className: l(e.root, c),
24
24
  "aria-describedby": i ? t : void 0,
25
- ...g(p),
25
+ ...h(p),
26
26
  children: [
27
27
  /* @__PURE__ */ a(
28
28
  "div",
@@ -33,7 +33,7 @@ const y = ({
33
33
  }),
34
34
  children: [
35
35
  /* @__PURE__ */ r(
36
- h,
36
+ D,
37
37
  {
38
38
  as: "legend",
39
39
  isRequired: m,
@@ -41,7 +41,7 @@ const y = ({
41
41
  children: n
42
42
  }
43
43
  ),
44
- /* @__PURE__ */ r(D, { children: s })
44
+ /* @__PURE__ */ r(g, { children: s })
45
45
  ]
46
46
  }
47
47
  ),
@@ -1,9 +1,9 @@
1
1
  import { jsxs as f, jsx as e } from "react/jsx-runtime";
2
2
  import N from "classnames";
3
+ import { FieldDescription as b } from "../FieldDescription/FieldDescription.js";
3
4
  import r from "./HorizontalFieldLayout.module.scss.js";
4
- import { getDataProps as b } from "../../../helpers/getDataProps.js";
5
- import { VisuallyHidden as g } from "../VisuallyHidden/VisuallyHidden.js";
6
- import { FieldDescription as w } from "../FieldDescription/FieldDescription.js";
5
+ import { getDataProps as g } from "../../../helpers/getDataProps.js";
6
+ import { VisuallyHidden as w } from "../VisuallyHidden/VisuallyHidden.js";
7
7
  import { FieldErrorMessage as x } from "../FieldErrorMessage/FieldErrorMessage.js";
8
8
  const M = ({
9
9
  label: m,
@@ -29,11 +29,11 @@ const M = ({
29
29
  },
30
30
  p
31
31
  ),
32
- ...b(h),
32
+ ...g(h),
33
33
  children: [
34
34
  /* @__PURE__ */ e("div", { className: r.children, children: c }),
35
- i ? /* @__PURE__ */ e(g, { children: t }) : t,
36
- /* @__PURE__ */ e(w, { id: a, className: r.description, children: o }),
35
+ i ? /* @__PURE__ */ e(w, { children: t }) : t,
36
+ /* @__PURE__ */ e(b, { id: a, className: r.description, children: o }),
37
37
  /* @__PURE__ */ e(x, { id: n, className: r.errorMessage, children: s })
38
38
  ]
39
39
  }
@@ -1,74 +1,80 @@
1
- import { jsxs as d, jsx as t } from "react/jsx-runtime";
2
- import { useState as Q, useRef as C, useCallback as c, useMemo as m } from "react";
3
- import { ComboBox as W, Input as X, Button as Y, Popover as Z, Virtualizer as $, ListLayout as V, ListBox as ee, ListBoxItem as te } from "react-aria-components";
1
+ import { jsxs as c, jsx as r } from "react/jsx-runtime";
2
+ import { useState as Q, useRef as C, useCallback as m, useMemo as u } from "react";
3
+ import { ComboBox as W, Input as X, Button as Y, Popover as Z, Virtualizer as $, ListLayout as V, ListBox as ee, ListBoxItem as re } from "react-aria-components";
4
4
  import N from "classnames";
5
- import { useTranslation as re } from "react-i18next";
6
- import { useFieldIds as oe } from "../hooks/useFieldIds.js";
7
- import i from "./MultiSelectComboBox.module.scss.js";
8
- import { FieldLayout as ie } from "../../FieldLayout/FieldLayout.js";
9
- import { useComponentContext as ne } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
10
- import { useTheme as le } from "../../../../contexts/ThemeProvider/useTheme.js";
5
+ import { useTranslation as te } from "react-i18next";
6
+ import { useFieldIds as ie } from "../hooks/useFieldIds.js";
7
+ import t from "./MultiSelectComboBox.module.scss.js";
8
+ import { FieldLayout as oe } from "../../FieldLayout/FieldLayout.js";
9
+ import { FieldDescription as ne } from "../../FieldDescription/FieldDescription.js";
10
+ import { useComponentContext as le } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
11
+ import { useTheme as se } from "../../../../contexts/ThemeProvider/useTheme.js";
11
12
  /* empty css */
12
- import { useForkRef as se } from "../../../../hooks/useForkRef/useForkRef.js";
13
- import ae from "../../../../assets/icons/alert-circle.svg.js";
14
- import ce from "../../../../assets/icons/caret-down.svg.js";
15
- function ye({
16
- className: y,
13
+ import { useForkRef as ae } from "../../../../hooks/useForkRef/useForkRef.js";
14
+ import ce from "../../../../assets/icons/alert-circle.svg.js";
15
+ import me from "../../../../assets/icons/caret-down.svg.js";
16
+ function Le({
17
+ className: D,
17
18
  description: F,
18
19
  errorMessage: p,
19
20
  id: L,
20
- inputRef: T,
21
+ inputRef: y,
21
22
  isDisabled: f,
22
23
  isInvalid: h,
23
- isLoading: D,
24
+ isLoading: T,
24
25
  isRequired: R,
25
- label: u,
26
+ label: d,
26
27
  name: w,
27
28
  onBlur: b,
28
29
  onChange: n,
29
30
  options: l,
30
31
  placeholder: A,
31
- value: r = [],
32
+ value: i = [],
32
33
  shouldVisuallyHideLabel: O
33
34
  }) {
34
- const j = ne(), { t: s } = re("common"), { container: z } = le(), [E, v] = Q(""), o = C(null), I = C(null), M = se(T, I), P = c(() => {
35
+ const j = le(), { t: s } = te("common"), { container: z } = se(), [E, v] = Q(""), o = C(null), I = C(null), M = ae(y, I), P = m(() => {
35
36
  o.current = setTimeout(() => {
36
37
  o.current = null, b?.();
37
38
  }, 50);
38
- }, [b]), k = c(() => {
39
+ }, [b]), k = m(() => {
39
40
  o.current && (clearTimeout(o.current), o.current = null);
40
- }, []), a = m(() => new Set(r), [r]), g = m(
41
+ }, []), a = u(() => new Set(i), [i]), x = u(
41
42
  () => l.filter((e) => !a.has(e.value)).map((e) => ({
42
43
  label: e.label,
43
- value: e.value
44
+ value: e.value,
45
+ description: e.description
44
46
  })),
45
47
  [l, a]
46
- ), x = m(
48
+ ), g = u(
47
49
  () => l.filter((e) => a.has(e.value)),
48
50
  [l, a]
49
- ), H = m(
50
- () => g.map((e) => ({ name: e.label, id: e.value })),
51
- [g]
52
- ), K = c(
51
+ ), H = u(
52
+ () => x.map((e) => ({
53
+ name: e.label,
54
+ id: e.value,
55
+ description: e.description
56
+ })),
57
+ [x]
58
+ ), K = m(
53
59
  (e) => {
54
- e && (n?.([...r, e.toString()]), v(""), I.current?.blur());
60
+ e && (n?.([...i, e.toString()]), v(""), I.current?.blur());
55
61
  },
56
- [r, n]
57
- ), U = c(
62
+ [i, n]
63
+ ), U = m(
58
64
  (e) => {
59
- n?.(r.filter((J) => J !== e));
65
+ n?.(i.filter((J) => J !== e));
60
66
  },
61
- [r, n]
62
- ), B = (D ? s("status.loadingOptions") : void 0) ?? F, { inputId: S, errorMessageId: _, descriptionId: q, ariaDescribedBy: G } = oe({
67
+ [i, n]
68
+ ), B = (T ? s("status.loadingOptions") : void 0) ?? F, { inputId: S, errorMessageId: _, descriptionId: q, ariaDescribedBy: G } = ie({
63
69
  inputId: L,
64
70
  errorMessage: p,
65
71
  description: B
66
72
  });
67
- return /* @__PURE__ */ d("div", { className: N(i.root, y), children: [
68
- /* @__PURE__ */ t(
69
- ie,
73
+ return /* @__PURE__ */ c("div", { className: N(t.root, D), children: [
74
+ /* @__PURE__ */ r(
75
+ oe,
70
76
  {
71
- label: u,
77
+ label: d,
72
78
  htmlFor: S,
73
79
  errorMessage: p,
74
80
  errorMessageId: _,
@@ -76,12 +82,12 @@ function ye({
76
82
  isRequired: R,
77
83
  description: B,
78
84
  shouldVisuallyHideLabel: O,
79
- className: i.comboBoxField,
85
+ className: t.comboBoxField,
80
86
  withErrorIcon: !1,
81
- children: /* @__PURE__ */ d(
87
+ children: /* @__PURE__ */ c(
82
88
  W,
83
89
  {
84
- "aria-label": u,
90
+ "aria-label": d,
85
91
  "aria-describedby": G,
86
92
  className: "react-aria-ComboBox-root",
87
93
  isDisabled: f,
@@ -94,7 +100,7 @@ function ye({
94
100
  id: S,
95
101
  name: w,
96
102
  children: [
97
- /* @__PURE__ */ t(
103
+ /* @__PURE__ */ r(
98
104
  X,
99
105
  {
100
106
  ref: M,
@@ -103,17 +109,20 @@ function ye({
103
109
  onFocus: k
104
110
  }
105
111
  ),
106
- /* @__PURE__ */ t(Y, { children: /* @__PURE__ */ d("div", { "aria-hidden": "true", className: i.icons, children: [
107
- h && /* @__PURE__ */ t(ae, { fontSize: 16 }),
108
- /* @__PURE__ */ t(ce, { title: s("icons.selectArrow") })
112
+ /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ c("div", { "aria-hidden": "true", className: t.icons, children: [
113
+ h && /* @__PURE__ */ r(ce, { fontSize: 16 }),
114
+ /* @__PURE__ */ r(me, { title: s("icons.selectArrow") })
109
115
  ] }) }),
110
- /* @__PURE__ */ t(
116
+ /* @__PURE__ */ r(
111
117
  Z,
112
118
  {
113
- className: N(i.popover, "react-aria-Popover"),
119
+ className: N(t.popover, "react-aria-Popover"),
114
120
  UNSTABLE_portalContainer: z.current ?? void 0,
115
121
  maxHeight: 320,
116
- children: /* @__PURE__ */ t($, { layout: V, children: /* @__PURE__ */ t(ee, { items: H, children: (e) => /* @__PURE__ */ t(te, { children: e.name }, e.id) }) })
122
+ children: /* @__PURE__ */ r($, { layout: V, children: /* @__PURE__ */ r(ee, { items: H, children: (e) => /* @__PURE__ */ c(re, { textValue: e.name, children: [
123
+ /* @__PURE__ */ r("div", { className: t.optionLabel, children: e.name }),
124
+ e.description && /* @__PURE__ */ r(ne, { className: t.optionDescription, children: e.description })
125
+ ] }, e.id) }) })
117
126
  }
118
127
  )
119
128
  ]
@@ -121,7 +130,7 @@ function ye({
121
130
  )
122
131
  }
123
132
  ),
124
- x.length > 0 && /* @__PURE__ */ t("div", { className: i.chips, role: "list", "aria-label": s("labels.selectedItems", { label: u }), children: x.map((e) => /* @__PURE__ */ t("span", { role: "listitem", children: /* @__PURE__ */ t(
133
+ g.length > 0 && /* @__PURE__ */ r("div", { className: t.chips, role: "list", "aria-label": s("labels.selectedItems", { label: d }), children: g.map((e) => /* @__PURE__ */ r("span", { role: "listitem", children: /* @__PURE__ */ r(
125
134
  j.Badge,
126
135
  {
127
136
  status: "info",
@@ -136,6 +145,6 @@ function ye({
136
145
  ] });
137
146
  }
138
147
  export {
139
- ye as MultiSelectComboBox
148
+ Le as MultiSelectComboBox
140
149
  };
141
150
  //# sourceMappingURL=MultiSelectComboBox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"MultiSelectComboBox.js","sources":["../../../../../src/components/Common/UI/MultiSelectComboBox/MultiSelectComboBox.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react'\nimport type { Key } from 'react-aria-components'\nimport {\n ComboBox as AriaComboBox,\n Button,\n Input,\n ListBox,\n ListBoxItem,\n ListLayout,\n Popover,\n Virtualizer,\n} from 'react-aria-components'\nimport classNames from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './MultiSelectComboBox.module.scss'\nimport type { MultiSelectComboBoxProps } from './MultiSelectComboBoxTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport { useForkRef } from '@/hooks/useForkRef/useForkRef'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\n\n/**\n * Combo box that lets the user pick multiple options, rendering each selection as a dismissable chip below the input.\n *\n * @param props - See {@link MultiSelectComboBoxProps}.\n * @returns The rendered multi-select combo box field.\n * @internal\n */\nexport function MultiSelectComboBox({\n className,\n description,\n errorMessage,\n id,\n inputRef: inputRefFromProps,\n isDisabled,\n isInvalid,\n isLoading,\n isRequired,\n label,\n name,\n onBlur,\n onChange,\n options,\n placeholder,\n value: selectedValues = [],\n shouldVisuallyHideLabel,\n}: MultiSelectComboBoxProps) {\n const Components = useComponentContext()\n const { t } = useTranslation('common')\n const { container } = useTheme()\n const [inputValue, setInputValue] = useState('')\n const blurTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n const internalInputRef = useRef<HTMLInputElement>(null)\n const inputRef = useForkRef(inputRefFromProps, internalInputRef)\n\n const handleInputBlur = useCallback(() => {\n blurTimeoutRef.current = setTimeout(() => {\n blurTimeoutRef.current = null\n onBlur?.()\n }, 50)\n }, [onBlur])\n\n const handleInputFocus = useCallback(() => {\n if (blurTimeoutRef.current) {\n clearTimeout(blurTimeoutRef.current)\n blurTimeoutRef.current = null\n }\n }, [])\n\n const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues])\n\n const availableOptions = useMemo(\n () =>\n options\n .filter(option => !selectedSet.has(option.value))\n .map(option => ({\n label: option.label,\n value: option.value,\n })),\n [options, selectedSet],\n )\n\n const selectedOptions = useMemo(\n () => options.filter(option => selectedSet.has(option.value)),\n [options, selectedSet],\n )\n\n const items = useMemo(\n () => availableOptions.map(option => ({ name: option.label, id: option.value })),\n [availableOptions],\n )\n\n const handleSelectionChange = useCallback(\n (key: Key | null) => {\n if (!key) return\n onChange?.([...selectedValues, key.toString()])\n setInputValue('')\n internalInputRef.current?.blur()\n },\n [selectedValues, onChange],\n )\n\n const handleDismiss = useCallback(\n (value: string) => {\n onChange?.(selectedValues.filter(v => v !== value))\n },\n [selectedValues, onChange],\n )\n\n const loadingDescription = isLoading ? t('status.loadingOptions') : undefined\n const displayDescription = loadingDescription ?? description\n\n const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n inputId: id,\n errorMessage,\n description: displayDescription,\n })\n\n return (\n <div className={classNames(styles.root, className)}>\n <FieldLayout\n label={label}\n htmlFor={inputId}\n errorMessage={errorMessage}\n errorMessageId={errorMessageId}\n descriptionId={descriptionId}\n isRequired={isRequired}\n description={displayDescription}\n shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n className={styles.comboBoxField}\n withErrorIcon={false}\n >\n <AriaComboBox\n aria-label={label}\n aria-describedby={ariaDescribedBy}\n className={'react-aria-ComboBox-root'}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n menuTrigger=\"focus\"\n inputValue={inputValue}\n onInputChange={setInputValue}\n selectedKey={null}\n onSelectionChange={handleSelectionChange}\n id={inputId}\n name={name}\n >\n <Input\n ref={inputRef}\n placeholder={placeholder}\n onBlur={handleInputBlur}\n onFocus={handleInputFocus}\n />\n <Button>\n <div aria-hidden=\"true\" className={styles.icons}>\n {isInvalid && <AlertCircle fontSize={16} />}\n <CaretDown title={t('icons.selectArrow')} />\n </div>\n </Button>\n\n <Popover\n className={classNames(styles.popover, 'react-aria-Popover')}\n UNSTABLE_portalContainer={container.current ?? undefined}\n maxHeight={320}\n >\n <Virtualizer layout={ListLayout}>\n <ListBox items={items}>\n {item => <ListBoxItem key={item.id}>{item.name}</ListBoxItem>}\n </ListBox>\n </Virtualizer>\n </Popover>\n </AriaComboBox>\n </FieldLayout>\n\n {selectedOptions.length > 0 && (\n <div className={styles.chips} role=\"list\" aria-label={t('labels.selectedItems', { label })}>\n {selectedOptions.map(option => (\n <span key={option.value} role=\"listitem\">\n <Components.Badge\n status=\"info\"\n onDismiss={() => {\n handleDismiss(option.value)\n }}\n dismissAriaLabel={t('labels.removeItem', { label: option.label })}\n isDisabled={isDisabled}\n >\n {option.label}\n </Components.Badge>\n </span>\n ))}\n </div>\n )}\n </div>\n )\n}\n"],"names":["MultiSelectComboBox","className","description","errorMessage","id","inputRefFromProps","isDisabled","isInvalid","isLoading","isRequired","label","name","onBlur","onChange","options","placeholder","selectedValues","shouldVisuallyHideLabel","Components","useComponentContext","t","useTranslation","container","useTheme","inputValue","setInputValue","useState","blurTimeoutRef","useRef","internalInputRef","inputRef","useForkRef","handleInputBlur","useCallback","handleInputFocus","selectedSet","useMemo","availableOptions","option","selectedOptions","items","handleSelectionChange","key","handleDismiss","value","v","displayDescription","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","classNames","styles","jsx","FieldLayout","jsxs","AriaComboBox","Input","Button","AlertCircle","CaretDown","Popover","Virtualizer","ListLayout","ListBox","item","ListBoxItem"],"mappings":"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"}
1
+ {"version":3,"file":"MultiSelectComboBox.js","sources":["../../../../../src/components/Common/UI/MultiSelectComboBox/MultiSelectComboBox.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react'\nimport type { Key } from 'react-aria-components'\nimport {\n ComboBox as AriaComboBox,\n Button,\n Input,\n ListBox,\n ListBoxItem,\n ListLayout,\n Popover,\n Virtualizer,\n} from 'react-aria-components'\nimport classNames from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './MultiSelectComboBox.module.scss'\nimport type { MultiSelectComboBoxProps } from './MultiSelectComboBoxTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { FieldDescription } from '@/components/Common/FieldDescription'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport { useForkRef } from '@/hooks/useForkRef/useForkRef'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\n\n/**\n * Combo box that lets the user pick multiple options, rendering each selection as a dismissable chip below the input.\n *\n * @param props - See {@link MultiSelectComboBoxProps}.\n * @returns The rendered multi-select combo box field.\n * @internal\n */\nexport function MultiSelectComboBox({\n className,\n description,\n errorMessage,\n id,\n inputRef: inputRefFromProps,\n isDisabled,\n isInvalid,\n isLoading,\n isRequired,\n label,\n name,\n onBlur,\n onChange,\n options,\n placeholder,\n value: selectedValues = [],\n shouldVisuallyHideLabel,\n}: MultiSelectComboBoxProps) {\n const Components = useComponentContext()\n const { t } = useTranslation('common')\n const { container } = useTheme()\n const [inputValue, setInputValue] = useState('')\n const blurTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n const internalInputRef = useRef<HTMLInputElement>(null)\n const inputRef = useForkRef(inputRefFromProps, internalInputRef)\n\n const handleInputBlur = useCallback(() => {\n blurTimeoutRef.current = setTimeout(() => {\n blurTimeoutRef.current = null\n onBlur?.()\n }, 50)\n }, [onBlur])\n\n const handleInputFocus = useCallback(() => {\n if (blurTimeoutRef.current) {\n clearTimeout(blurTimeoutRef.current)\n blurTimeoutRef.current = null\n }\n }, [])\n\n const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues])\n\n const availableOptions = useMemo(\n () =>\n options\n .filter(option => !selectedSet.has(option.value))\n .map(option => ({\n label: option.label,\n value: option.value,\n description: option.description,\n })),\n [options, selectedSet],\n )\n\n const selectedOptions = useMemo(\n () => options.filter(option => selectedSet.has(option.value)),\n [options, selectedSet],\n )\n\n const items = useMemo(\n () =>\n availableOptions.map(option => ({\n name: option.label,\n id: option.value,\n description: option.description,\n })),\n [availableOptions],\n )\n\n const handleSelectionChange = useCallback(\n (key: Key | null) => {\n if (!key) return\n onChange?.([...selectedValues, key.toString()])\n setInputValue('')\n internalInputRef.current?.blur()\n },\n [selectedValues, onChange],\n )\n\n const handleDismiss = useCallback(\n (value: string) => {\n onChange?.(selectedValues.filter(v => v !== value))\n },\n [selectedValues, onChange],\n )\n\n const loadingDescription = isLoading ? t('status.loadingOptions') : undefined\n const displayDescription = loadingDescription ?? description\n\n const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n inputId: id,\n errorMessage,\n description: displayDescription,\n })\n\n return (\n <div className={classNames(styles.root, className)}>\n <FieldLayout\n label={label}\n htmlFor={inputId}\n errorMessage={errorMessage}\n errorMessageId={errorMessageId}\n descriptionId={descriptionId}\n isRequired={isRequired}\n description={displayDescription}\n shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n className={styles.comboBoxField}\n withErrorIcon={false}\n >\n <AriaComboBox\n aria-label={label}\n aria-describedby={ariaDescribedBy}\n className={'react-aria-ComboBox-root'}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n menuTrigger=\"focus\"\n inputValue={inputValue}\n onInputChange={setInputValue}\n selectedKey={null}\n onSelectionChange={handleSelectionChange}\n id={inputId}\n name={name}\n >\n <Input\n ref={inputRef}\n placeholder={placeholder}\n onBlur={handleInputBlur}\n onFocus={handleInputFocus}\n />\n <Button>\n <div aria-hidden=\"true\" className={styles.icons}>\n {isInvalid && <AlertCircle fontSize={16} />}\n <CaretDown title={t('icons.selectArrow')} />\n </div>\n </Button>\n\n <Popover\n className={classNames(styles.popover, 'react-aria-Popover')}\n UNSTABLE_portalContainer={container.current ?? undefined}\n maxHeight={320}\n >\n <Virtualizer layout={ListLayout}>\n <ListBox items={items}>\n {item => (\n <ListBoxItem key={item.id} textValue={item.name}>\n <div className={styles.optionLabel}>{item.name}</div>\n {item.description && (\n <FieldDescription className={styles.optionDescription}>\n {item.description}\n </FieldDescription>\n )}\n </ListBoxItem>\n )}\n </ListBox>\n </Virtualizer>\n </Popover>\n </AriaComboBox>\n </FieldLayout>\n\n {selectedOptions.length > 0 && (\n <div className={styles.chips} role=\"list\" aria-label={t('labels.selectedItems', { label })}>\n {selectedOptions.map(option => (\n <span key={option.value} role=\"listitem\">\n <Components.Badge\n status=\"info\"\n onDismiss={() => {\n handleDismiss(option.value)\n }}\n dismissAriaLabel={t('labels.removeItem', { label: option.label })}\n isDisabled={isDisabled}\n >\n {option.label}\n </Components.Badge>\n </span>\n ))}\n </div>\n )}\n </div>\n )\n}\n"],"names":["MultiSelectComboBox","className","description","errorMessage","id","inputRefFromProps","isDisabled","isInvalid","isLoading","isRequired","label","name","onBlur","onChange","options","placeholder","selectedValues","shouldVisuallyHideLabel","Components","useComponentContext","t","useTranslation","container","useTheme","inputValue","setInputValue","useState","blurTimeoutRef","useRef","internalInputRef","inputRef","useForkRef","handleInputBlur","useCallback","handleInputFocus","selectedSet","useMemo","availableOptions","option","selectedOptions","items","handleSelectionChange","key","handleDismiss","value","v","displayDescription","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","classNames","styles","jsx","FieldLayout","jsxs","AriaComboBox","Input","Button","AlertCircle","CaretDown","Popover","Virtualizer","ListLayout","ListBox","item","ListBoxItem","FieldDescription"],"mappings":"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"}
@@ -1,16 +1,20 @@
1
- const o = "_root_kyxn6_1", c = "_comboBoxField_kyxn6_5", s = "_icons_kyxn6_71", _ = "_popover_kyxn6_81", n = "_chips_kyxn6_130", t = {
1
+ const o = "_root_1ynwu_1", n = "_comboBoxField_1ynwu_5", t = "_icons_1ynwu_71", i = "_popover_1ynwu_81", _ = "_optionLabel_1ynwu_130", c = "_optionDescription_1ynwu_134", s = "_chips_1ynwu_138", p = {
2
2
  root: o,
3
- comboBoxField: c,
4
- icons: s,
5
- popover: _,
6
- chips: n
3
+ comboBoxField: n,
4
+ icons: t,
5
+ popover: i,
6
+ optionLabel: _,
7
+ optionDescription: c,
8
+ chips: s
7
9
  };
8
10
  export {
9
- n as chips,
10
- c as comboBoxField,
11
- t as default,
12
- s as icons,
13
- _ as popover,
11
+ s as chips,
12
+ n as comboBoxField,
13
+ p as default,
14
+ t as icons,
15
+ c as optionDescription,
16
+ _ as optionLabel,
17
+ i as popover,
14
18
  o as root
15
19
  };
16
20
  //# sourceMappingURL=MultiSelectComboBox.module.scss.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"MultiSelectComboBox.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
1
+ {"version":3,"file":"MultiSelectComboBox.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
@@ -15,6 +15,10 @@ export interface MultiSelectComboBoxOption {
15
15
  * Value of the option that will be passed to onChange
16
16
  */
17
17
  value: string;
18
+ /**
19
+ * Optional secondary text rendered beneath the label in the option list
20
+ */
21
+ description?: string;
18
22
  }
19
23
  /**
20
24
  * Props your `MultiSelectComboBox` implementation must accept from the component adapter.
@@ -11,11 +11,10 @@ import "@gusto/embedded-api/models/errors/unprocessableentityerror";
11
11
  import "@gusto/embedded-api/models/errors/httpclienterrors";
12
12
  import "../../../../shared/constants.js";
13
13
  import "../../../../contexts/ComponentAdapter/useComponentContext.js";
14
- import "../../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
15
14
  import { createCompoundContext as t } from "../../../Base/createCompoundContext.js";
16
- const [s, u] = t("CreateSignatoryContext");
15
+ const [d, s] = t("CreateSignatoryContext");
17
16
  export {
18
- u as CreateSignatoryProvider,
19
- s as useCreateSignatory
17
+ s as CreateSignatoryProvider,
18
+ d as useCreateSignatory
20
19
  };
21
20
  //# sourceMappingURL=useCreateSignatory.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useCreateSignatory.js","sources":["../../../../../src/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.ts"],"sourcesContent":["import { type Signatory } from '@gusto/embedded-api/models/components/signatory'\nimport { createCompoundContext } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\n/**\n * Initial values for the {@link CreateSignatory} form fields. At least one field must be provided.\n *\n * @public\n */\nexport type CreateSignatoryDefaultValues = RequireAtLeastOne<\n Pick<Signatory, 'firstName' | 'lastName' | 'email' | 'title' | 'phone' | 'birthday'> &\n Pick<\n NonNullable<Signatory['homeAddress']>,\n 'street1' | 'street2' | 'city' | 'state' | 'zip'\n > & {\n ssn?: string\n }\n>\ntype CreateSignatoryContextType = {\n isPending: boolean\n currentSignatory?: Signatory\n}\n\nconst [useCreateSignatory, CreateSignatoryProvider] =\n createCompoundContext<CreateSignatoryContextType>('CreateSignatoryContext')\n\nexport {\n /** @internal */\n useCreateSignatory,\n /** @internal */\n CreateSignatoryProvider,\n}\n"],"names":["useCreateSignatory","CreateSignatoryProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAM,CAACA,GAAoBC,CAAuB,IAChDC,EAAkD,wBAAwB;"}
1
+ {"version":3,"file":"useCreateSignatory.js","sources":["../../../../../src/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.ts"],"sourcesContent":["import { type Signatory } from '@gusto/embedded-api/models/components/signatory'\nimport { createCompoundContext } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\n/**\n * Initial values for the {@link CreateSignatory} form fields. At least one field must be provided.\n *\n * @public\n */\nexport type CreateSignatoryDefaultValues = RequireAtLeastOne<\n Pick<Signatory, 'firstName' | 'lastName' | 'email' | 'title' | 'phone' | 'birthday'> &\n Pick<\n NonNullable<Signatory['homeAddress']>,\n 'street1' | 'street2' | 'city' | 'state' | 'zip'\n > & {\n ssn?: string\n }\n>\ntype CreateSignatoryContextType = {\n isPending: boolean\n currentSignatory?: Signatory\n}\n\nconst [useCreateSignatory, CreateSignatoryProvider] =\n createCompoundContext<CreateSignatoryContextType>('CreateSignatoryContext')\n\nexport {\n /** @internal */\n useCreateSignatory,\n /** @internal */\n CreateSignatoryProvider,\n}\n"],"names":["useCreateSignatory","CreateSignatoryProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,CAACA,GAAoBC,CAAuB,IAChDC,EAAkD,wBAAwB;"}
@@ -11,11 +11,10 @@ import "@gusto/embedded-api/models/errors/unprocessableentityerror";
11
11
  import "@gusto/embedded-api/models/errors/httpclienterrors";
12
12
  import "../../../../shared/constants.js";
13
13
  import "../../../../contexts/ComponentAdapter/useComponentContext.js";
14
- import "../../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
15
14
  import { createCompoundContext as t } from "../../../Base/createCompoundContext.js";
16
- const [c, d] = t("InviteSignatoryContext");
15
+ const [S, c] = t("InviteSignatoryContext");
17
16
  export {
18
- d as InviteSignatoryProvider,
19
- c as useInviteSignatory
17
+ c as InviteSignatoryProvider,
18
+ S as useInviteSignatory
20
19
  };
21
20
  //# sourceMappingURL=useInviteSignatory.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useInviteSignatory.js","sources":["../../../../../src/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.ts"],"sourcesContent":["import { type Signatory } from '@gusto/embedded-api/models/components/signatory'\nimport { createCompoundContext } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\ntype InviteSignatoryContextType = {\n isPending: boolean\n}\n\n/**\n * Default values for the invite signatory form fields: `firstName`, `lastName`, `email`,\n * `confirmEmail`, and `title`. At least one field is required.\n *\n * @public\n */\nexport type InviteSignatoryDefaultValues = RequireAtLeastOne<\n Pick<Signatory, 'firstName' | 'lastName' | 'email' | 'title'> & {\n confirmEmail: string\n }\n>\n\nconst [useInviteSignatory, InviteSignatoryProvider] =\n createCompoundContext<InviteSignatoryContextType>('InviteSignatoryContext')\n\nexport { useInviteSignatory, InviteSignatoryProvider }\n"],"names":["useInviteSignatory","InviteSignatoryProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,CAACA,GAAoBC,CAAuB,IAChDC,EAAkD,wBAAwB;"}
1
+ {"version":3,"file":"useInviteSignatory.js","sources":["../../../../../src/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.ts"],"sourcesContent":["import { type Signatory } from '@gusto/embedded-api/models/components/signatory'\nimport { createCompoundContext } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\ntype InviteSignatoryContextType = {\n isPending: boolean\n}\n\n/**\n * Default values for the invite signatory form fields: `firstName`, `lastName`, `email`,\n * `confirmEmail`, and `title`. At least one field is required.\n *\n * @public\n */\nexport type InviteSignatoryDefaultValues = RequireAtLeastOne<\n Pick<Signatory, 'firstName' | 'lastName' | 'email' | 'title'> & {\n confirmEmail: string\n }\n>\n\nconst [useInviteSignatory, InviteSignatoryProvider] =\n createCompoundContext<InviteSignatoryContextType>('InviteSignatoryContext')\n\nexport { useInviteSignatory, InviteSignatoryProvider }\n"],"names":["useInviteSignatory","InviteSignatoryProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAM,CAACA,GAAoBC,CAAuB,IAChDC,EAAkD,wBAAwB;"}
@@ -11,15 +11,14 @@ import "@gusto/embedded-api/models/errors/unprocessableentityerror";
11
11
  import "@gusto/embedded-api/models/errors/httpclienterrors";
12
12
  import "../../../shared/constants.js";
13
13
  import "../../../contexts/ComponentAdapter/useComponentContext.js";
14
- import "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
15
14
  import { createCompoundContext as t } from "../../Base/createCompoundContext.js";
16
- const v = {
15
+ const d = {
17
16
  createSignatory: "createSignatory",
18
17
  inviteSignatory: "inviteSignatory"
19
- }, [x, C] = t("AssignSignatoryContext");
18
+ }, [v, x] = t("AssignSignatoryContext");
20
19
  export {
21
- C as AssignSignatoryProvider,
22
- v as SignatoryAssignmentMode,
23
- x as useAssignSignatory
20
+ x as AssignSignatoryProvider,
21
+ d as SignatoryAssignmentMode,
22
+ v as useAssignSignatory
24
23
  };
25
24
  //# sourceMappingURL=useAssignSignatory.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useAssignSignatory.js","sources":["../../../../src/components/Company/AssignSignatory/useAssignSignatory.ts"],"sourcesContent":["import { type CreateSignatoryDefaultValues } from './CreateSignatory'\nimport { type InviteSignatoryDefaultValues } from './InviteSignatory'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport { createCompoundContext } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\n/** @internal */\nexport const SignatoryAssignmentMode = {\n createSignatory: 'createSignatory',\n inviteSignatory: 'inviteSignatory',\n} as const\n\n/**\n * Default values for the create and invite forms rendered by {@link AssignSignatory}.\n *\n * @remarks\n * At least one of `create` or `invite` must be provided.\n *\n * @public\n */\nexport type AssignSignatoryDefaultValues = RequireAtLeastOne<{\n create?: CreateSignatoryDefaultValues\n invite?: InviteSignatoryDefaultValues\n}>\n\ntype AssignSignatoryContextType = {\n companyId: string\n signatoryId?: string\n defaultValues?: AssignSignatoryDefaultValues\n onSignatoryAssignmentModeChange: (mode: string) => void\n onSignatoryFormEvent: BaseComponentInterface['onEvent']\n}\n\nconst [useAssignSignatory, AssignSignatoryProvider] =\n createCompoundContext<AssignSignatoryContextType>('AssignSignatoryContext')\n\nexport { useAssignSignatory, AssignSignatoryProvider }\n"],"names":["SignatoryAssignmentMode","useAssignSignatory","AssignSignatoryProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;AAOO,MAAMA,IAA0B;AAAA,EACrC,iBAAiB;AAAA,EACjB,iBAAiB;AACnB,GAuBM,CAACC,GAAoBC,CAAuB,IAChDC,EAAkD,wBAAwB;"}
1
+ {"version":3,"file":"useAssignSignatory.js","sources":["../../../../src/components/Company/AssignSignatory/useAssignSignatory.ts"],"sourcesContent":["import { type CreateSignatoryDefaultValues } from './CreateSignatory'\nimport { type InviteSignatoryDefaultValues } from './InviteSignatory'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport { createCompoundContext } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\n/** @internal */\nexport const SignatoryAssignmentMode = {\n createSignatory: 'createSignatory',\n inviteSignatory: 'inviteSignatory',\n} as const\n\n/**\n * Default values for the create and invite forms rendered by {@link AssignSignatory}.\n *\n * @remarks\n * At least one of `create` or `invite` must be provided.\n *\n * @public\n */\nexport type AssignSignatoryDefaultValues = RequireAtLeastOne<{\n create?: CreateSignatoryDefaultValues\n invite?: InviteSignatoryDefaultValues\n}>\n\ntype AssignSignatoryContextType = {\n companyId: string\n signatoryId?: string\n defaultValues?: AssignSignatoryDefaultValues\n onSignatoryAssignmentModeChange: (mode: string) => void\n onSignatoryFormEvent: BaseComponentInterface['onEvent']\n}\n\nconst [useAssignSignatory, AssignSignatoryProvider] =\n createCompoundContext<AssignSignatoryContextType>('AssignSignatoryContext')\n\nexport { useAssignSignatory, AssignSignatoryProvider }\n"],"names":["SignatoryAssignmentMode","useAssignSignatory","AssignSignatoryProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;AAOO,MAAMA,IAA0B;AAAA,EACrC,iBAAiB;AAAA,EACjB,iBAAiB;AACnB,GAuBM,CAACC,GAAoBC,CAAuB,IAChDC,EAAkD,wBAAwB;"}
@@ -11,11 +11,10 @@ import "@gusto/embedded-api/models/errors/unprocessableentityerror";
11
11
  import "@gusto/embedded-api/models/errors/httpclienterrors";
12
12
  import "../../../../shared/constants.js";
13
13
  import "../../../../contexts/ComponentAdapter/useComponentContext.js";
14
- import "../../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
15
14
  import { createCompoundContext as o } from "../../../Base/createCompoundContext.js";
16
- const [d, s] = o("BankAccountContext");
15
+ const [C, d] = o("BankAccountContext");
17
16
  export {
18
- s as BankAccountFormProvider,
19
- d as useBankAccountForm
17
+ d as BankAccountFormProvider,
18
+ C as useBankAccountForm
20
19
  };
21
20
  //# sourceMappingURL=context.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"context.js","sources":["../../../../../src/components/Company/BankAccount/BankAccountForm/context.ts"],"sourcesContent":["import { createCompoundContext } from '@/components/Base'\nimport { type OnEventType } from '@/components/Base/useBase'\nimport { type EventType } from '@/shared/constants'\n\ntype BankAccountFormContextType = {\n isPending: boolean\n isEditing: boolean\n onEvent: OnEventType<EventType, unknown>\n}\n\nconst [useBankAccountForm, BankAccountFormProvider] =\n createCompoundContext<BankAccountFormContextType>('BankAccountContext')\n\nexport { useBankAccountForm, BankAccountFormProvider }\n"],"names":["useBankAccountForm","BankAccountFormProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;AAUA,MAAM,CAACA,GAAoBC,CAAuB,IAChDC,EAAkD,oBAAoB;"}
1
+ {"version":3,"file":"context.js","sources":["../../../../../src/components/Company/BankAccount/BankAccountForm/context.ts"],"sourcesContent":["import { createCompoundContext } from '@/components/Base'\nimport { type OnEventType } from '@/components/Base/useBase'\nimport { type EventType } from '@/shared/constants'\n\ntype BankAccountFormContextType = {\n isPending: boolean\n isEditing: boolean\n onEvent: OnEventType<EventType, unknown>\n}\n\nconst [useBankAccountForm, BankAccountFormProvider] =\n createCompoundContext<BankAccountFormContextType>('BankAccountContext')\n\nexport { useBankAccountForm, BankAccountFormProvider }\n"],"names":["useBankAccountForm","BankAccountFormProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,CAACA,GAAoBC,CAAuB,IAChDC,EAAkD,oBAAoB;"}
@@ -25,6 +25,10 @@ export interface DocumentListProps extends BaseComponentInterface<'Company.Docum
25
25
  * When `signatoryId` matches the currently saved signatory's id, the user is treated as the
26
26
  * signatory and is allowed to sign documents.
27
27
  *
28
+ * Each form's description is rendered as returned by the API, unless the `dictionary` prop
29
+ * supplies a `forms.<name>.description` override for that form's `name` (e.g.
30
+ * `forms.US_8655.description`).
31
+ *
28
32
  * @events
29
33
  * | Event | Description | Data |
30
34
  * | ----- | ----------- | ---- |