@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.
- package/CHANGELOG.md +41 -0
- package/dist/components/Common/DataView/DataCards/DataCards.d.ts +2 -1
- package/dist/components/Common/DataView/DataCards/DataCards.js +63 -54
- package/dist/components/Common/DataView/DataCards/DataCards.js.map +1 -1
- package/dist/components/Common/DataView/DataCards/DataCards.module.scss.js +14 -12
- package/dist/components/Common/DataView/DataCards/DataCards.module.scss.js.map +1 -1
- package/dist/components/Common/DataView/DataTable/DataTable.d.ts +2 -1
- package/dist/components/Common/DataView/DataTable/DataTable.js +75 -66
- package/dist/components/Common/DataView/DataTable/DataTable.js.map +1 -1
- package/dist/components/Common/DataView/DataTable/DataTable.module.scss.js +8 -4
- package/dist/components/Common/DataView/DataTable/DataTable.module.scss.js.map +1 -1
- package/dist/components/Common/DataView/DataView.js +18 -17
- package/dist/components/Common/DataView/DataView.js.map +1 -1
- package/dist/components/Common/FieldLayout/FieldLayout.js +6 -6
- package/dist/components/Common/Fieldset/Fieldset.js +6 -6
- package/dist/components/Common/HorizontalFieldLayout/HorizontalFieldLayout.js +6 -6
- package/dist/components/Common/UI/MultiSelectComboBox/MultiSelectComboBox.js +58 -49
- package/dist/components/Common/UI/MultiSelectComboBox/MultiSelectComboBox.js.map +1 -1
- package/dist/components/Common/UI/MultiSelectComboBox/MultiSelectComboBox.module.scss.js +14 -10
- package/dist/components/Common/UI/MultiSelectComboBox/MultiSelectComboBox.module.scss.js.map +1 -1
- package/dist/components/Common/UI/MultiSelectComboBox/MultiSelectComboBoxTypes.d.ts +4 -0
- package/dist/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.js +3 -4
- package/dist/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.js.map +1 -1
- package/dist/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.js +3 -4
- package/dist/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.js.map +1 -1
- package/dist/components/Company/AssignSignatory/useAssignSignatory.js +5 -6
- package/dist/components/Company/AssignSignatory/useAssignSignatory.js.map +1 -1
- package/dist/components/Company/BankAccount/BankAccountForm/context.js +3 -4
- package/dist/components/Company/BankAccount/BankAccountForm/context.js.map +1 -1
- package/dist/components/Company/DocumentSigner/DocumentList/DocumentList.d.ts +4 -0
- package/dist/components/Company/DocumentSigner/DocumentList/DocumentList.js.map +1 -1
- package/dist/components/Company/DocumentSigner/DocumentList/List.js +11 -8
- package/dist/components/Company/DocumentSigner/DocumentList/List.js.map +1 -1
- package/dist/components/Company/DocumentSigner/DocumentList/useDocumentList.js +3 -4
- package/dist/components/Company/DocumentSigner/DocumentList/useDocumentList.js.map +1 -1
- package/dist/components/Company/FederalTaxes/useFederalTaxes.js +5 -6
- package/dist/components/Company/FederalTaxes/useFederalTaxes.js.map +1 -1
- package/dist/components/Company/Industry/Context.js +6 -7
- package/dist/components/Company/Industry/Context.js.map +1 -1
- package/dist/components/Company/Locations/LocationForm/useLocationForm.js +3 -4
- package/dist/components/Company/Locations/LocationForm/useLocationForm.js.map +1 -1
- package/dist/components/Company/Locations/LocationsList/List.js +27 -25
- package/dist/components/Company/Locations/LocationsList/List.js.map +1 -1
- package/dist/components/Company/Locations/LocationsList/LocationsList.js +41 -36
- package/dist/components/Company/Locations/LocationsList/LocationsList.js.map +1 -1
- package/dist/components/Company/Locations/LocationsList/useLocationsList.d.ts +1 -0
- package/dist/components/Company/Locations/LocationsList/useLocationsList.js +3 -4
- package/dist/components/Company/Locations/LocationsList/useLocationsList.js.map +1 -1
- package/dist/components/Company/OnboardingOverview/context.js +3 -4
- package/dist/components/Company/OnboardingOverview/context.js.map +1 -1
- package/dist/components/Company/StateTaxes/StateTaxesForm/Form.d.ts +9 -2
- package/dist/components/Company/StateTaxes/StateTaxesForm/Form.js +19 -18
- package/dist/components/Company/StateTaxes/StateTaxesForm/Form.js.map +1 -1
- package/dist/components/Company/StateTaxes/StateTaxesForm/StateTaxesForm.js +63 -62
- package/dist/components/Company/StateTaxes/StateTaxesForm/StateTaxesForm.js.map +1 -1
- package/dist/components/Company/StateTaxes/StateTaxesForm/context.js +3 -4
- package/dist/components/Company/StateTaxes/StateTaxesForm/context.js.map +1 -1
- package/dist/components/Company/StateTaxes/StateTaxesList/context.js +3 -4
- package/dist/components/Company/StateTaxes/StateTaxesList/context.js.map +1 -1
- package/dist/components/Company/StateTaxes/TaxRateManagement/AddTaxRateDialog.js +69 -65
- package/dist/components/Company/StateTaxes/TaxRateManagement/AddTaxRateDialog.js.map +1 -1
- package/dist/components/Company/StateTaxes/TaxRateManagement/context.js +3 -4
- package/dist/components/Company/StateTaxes/TaxRateManagement/context.js.map +1 -1
- package/dist/components/Company/StateTaxes/TaxRateManagement/toHistoryRows.js +30 -23
- package/dist/components/Company/StateTaxes/TaxRateManagement/toHistoryRows.js.map +1 -1
- package/dist/components/Company/StateTaxes/shared/RequirementFields.d.ts +8 -4
- package/dist/components/Company/StateTaxes/shared/RequirementFields.js +13 -12
- package/dist/components/Company/StateTaxes/shared/RequirementFields.js.map +1 -1
- package/dist/components/Company/StateTaxes/shared/prepareRequirements.d.ts +29 -0
- package/dist/components/Company/StateTaxes/shared/prepareRequirements.js +24 -0
- package/dist/components/Company/StateTaxes/shared/prepareRequirements.js.map +1 -0
- package/dist/components/Company/StateTaxes/shared/prepareRequirements.test.d.ts +1 -0
- package/dist/components/Contractor/Payments/PaymentsList/PaymentsList.js +68 -55
- package/dist/components/Contractor/Payments/PaymentsList/PaymentsList.js.map +1 -1
- package/dist/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.js +36 -35
- package/dist/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.js.map +1 -1
- package/dist/components/Employee/Compensation/shared/useJobForm/useJobForm.js +116 -116
- package/dist/components/Employee/Compensation/shared/useJobForm/useJobForm.js.map +1 -1
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/DocumentList.d.ts +4 -0
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/DocumentList.js +19 -19
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/DocumentList.js.map +1 -1
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/List.js +16 -13
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/List.js.map +1 -1
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.js +3 -4
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.js.map +1 -1
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentSigner.d.ts +4 -0
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentSigner.js.map +1 -1
- package/dist/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.js +84 -96
- package/dist/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.js.map +1 -1
- package/dist/components/Flow/Flow.js +22 -22
- package/dist/components/Flow/Flow.js.map +1 -1
- package/dist/components/Flow/useFlow.js +3 -3
- package/dist/components/InformationRequests/InformationRequests.d.ts +1 -1
- package/dist/components/InformationRequests/InformationRequests.js +68 -53
- package/dist/components/InformationRequests/InformationRequests.js.map +1 -1
- package/dist/components/Payroll/GrossUpModal/GrossUpModal.js +2 -3
- package/dist/components/Payroll/GrossUpModal/GrossUpModal.js.map +1 -1
- package/dist/components/Payroll/OffCycleCreation/OffCycleCreation.js +87 -81
- package/dist/components/Payroll/OffCycleCreation/OffCycleCreation.js.map +1 -1
- package/dist/components/Payroll/OffCycleCreation/OffCycleCreationPresentation.d.ts +1 -1
- package/dist/components/Payroll/OffCycleCreation/OffCycleCreationPresentation.js +86 -67
- package/dist/components/Payroll/OffCycleCreation/OffCycleCreationPresentation.js.map +1 -1
- package/dist/components/Payroll/OffCycleCreation/OffCycleCreationTypes.d.ts +4 -0
- package/dist/components/Payroll/OffCycleDeductionsSetting/OffCycleDeductionsSetting.d.ts +1 -1
- package/dist/components/Payroll/OffCycleDeductionsSetting/OffCycleDeductionsSetting.js +26 -21
- package/dist/components/Payroll/OffCycleDeductionsSetting/OffCycleDeductionsSetting.js.map +1 -1
- package/dist/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.d.ts +8 -1
- package/dist/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.js +29 -17
- package/dist/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.js.map +1 -1
- package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTable.js +21 -18
- package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTable.js.map +1 -1
- package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTable.module.scss.js +9 -7
- package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTable.module.scss.js.map +1 -1
- package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTableTypes.d.ts +2 -0
- package/dist/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTableTypes.js.map +1 -1
- package/dist/components/Payroll/PayrollConfiguration/PayrollConfiguration.js +200 -199
- package/dist/components/Payroll/PayrollConfiguration/PayrollConfiguration.js.map +1 -1
- package/dist/components/Payroll/PayrollConfiguration/usePayrollConfigurationData.d.ts +3 -2
- package/dist/components/Payroll/PayrollConfiguration/usePayrollConfigurationData.js +32 -32
- package/dist/components/Payroll/PayrollConfiguration/usePayrollConfigurationData.js.map +1 -1
- package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.js +254 -243
- package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.js.map +1 -1
- package/dist/components/Payroll/PayrollHistory/PayrollHistory.js +83 -76
- package/dist/components/Payroll/PayrollHistory/PayrollHistory.js.map +1 -1
- package/dist/components/Payroll/PayrollHistory/PayrollHistoryPresentation.js +23 -22
- package/dist/components/Payroll/PayrollHistory/PayrollHistoryPresentation.js.map +1 -1
- package/dist/components/Payroll/PayrollList/PayrollList.js +108 -97
- package/dist/components/Payroll/PayrollList/PayrollList.js.map +1 -1
- package/dist/components/Payroll/PayrollList/PayrollListPresentation.js +38 -37
- package/dist/components/Payroll/PayrollList/PayrollListPresentation.js.map +1 -1
- package/dist/components/Payroll/PayrollOverview/PayrollOverview.d.ts +8 -1
- package/dist/components/Payroll/PayrollOverview/PayrollOverview.js +196 -174
- package/dist/components/Payroll/PayrollOverview/PayrollOverview.js.map +1 -1
- package/dist/components/Payroll/PayrollOverview/PayrollOverviewPresentation.d.ts +3 -1
- package/dist/components/Payroll/PayrollOverview/PayrollOverviewPresentation.js +173 -163
- package/dist/components/Payroll/PayrollOverview/PayrollOverviewPresentation.js.map +1 -1
- package/dist/components/Payroll/helpers.d.ts +0 -15
- package/dist/components/Payroll/helpers.js +13 -18
- package/dist/components/Payroll/helpers.js.map +1 -1
- package/dist/components/Payroll/usePreparedPayrollData.js +8 -9
- package/dist/components/Payroll/usePreparedPayrollData.js.map +1 -1
- package/dist/helpers/openPdfInNewTab.d.ts +15 -0
- package/dist/helpers/openPdfInNewTab.js +28 -0
- package/dist/helpers/openPdfInNewTab.js.map +1 -0
- package/dist/i18n/en/Company.DocumentList.json.js +34 -32
- package/dist/i18n/en/Company.DocumentList.json.js.map +1 -1
- package/dist/i18n/en/Company.StateTaxes.json.js +1 -1
- package/dist/i18n/en/Employee.DocumentSigner.json.js +24 -22
- package/dist/i18n/en/Employee.DocumentSigner.json.js.map +1 -1
- package/dist/i18n/en/Payroll.OffCycleCreation.json.js +11 -9
- package/dist/i18n/en/Payroll.OffCycleCreation.json.js.map +1 -1
- package/dist/i18n/en/Payroll.OffCycleTaxWithholding.json.js +7 -7
- package/dist/i18n/en/Payroll.PayrollEditEmployee.json.js +29 -27
- package/dist/i18n/en/Payroll.PayrollEditEmployee.json.js.map +1 -1
- package/dist/i18n/en/Payroll.PayrollOverview.json.js +41 -39
- package/dist/i18n/en/Payroll.PayrollOverview.json.js.map +1 -1
- package/dist/i18n/types.d.ts +331 -1
- package/dist/style.css +1 -1
- package/package.json +21 -21
|
@@ -1,52 +1,53 @@
|
|
|
1
|
-
import { jsxs as C, jsx as
|
|
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
|
|
5
|
-
import { DataTable as
|
|
6
|
-
import { DataCards as
|
|
7
|
-
import
|
|
8
|
-
const
|
|
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:
|
|
10
|
+
isFetching: o,
|
|
11
11
|
breakAt: a = "small",
|
|
12
12
|
breakpoints: i,
|
|
13
13
|
footer: m,
|
|
14
14
|
isWithinBox: p,
|
|
15
|
-
emptyState:
|
|
16
|
-
selectionMode:
|
|
15
|
+
emptyState: l,
|
|
16
|
+
selectionMode: c,
|
|
17
17
|
onSelectAll: f,
|
|
18
18
|
...d
|
|
19
19
|
}) => {
|
|
20
|
-
const e = D(null),
|
|
20
|
+
const e = D(null), r = M({
|
|
21
21
|
ref: e,
|
|
22
22
|
breakpoints: i
|
|
23
|
-
}), u =
|
|
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:
|
|
28
|
+
className: j.dataViewContainer,
|
|
29
29
|
ref: (k) => {
|
|
30
30
|
e.current = k;
|
|
31
31
|
},
|
|
32
32
|
children: [
|
|
33
|
-
u && /* @__PURE__ */
|
|
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:
|
|
41
|
-
selectionMode:
|
|
40
|
+
emptyState: l,
|
|
41
|
+
selectionMode: c,
|
|
42
|
+
isFetching: o
|
|
42
43
|
}
|
|
43
44
|
),
|
|
44
|
-
t && /* @__PURE__ */
|
|
45
|
+
t && /* @__PURE__ */ s(x, { ...t, isFetching: o })
|
|
45
46
|
]
|
|
46
47
|
}
|
|
47
48
|
);
|
|
48
49
|
};
|
|
49
50
|
export {
|
|
50
|
-
|
|
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,
|
|
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 {
|
|
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
|
|
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), ...
|
|
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
|
-
|
|
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(
|
|
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
|
|
6
|
-
import { FieldCaption as
|
|
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
|
-
...
|
|
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
|
-
|
|
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(
|
|
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
|
|
5
|
-
import { VisuallyHidden as
|
|
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
|
-
...
|
|
32
|
+
...g(h),
|
|
33
33
|
children: [
|
|
34
34
|
/* @__PURE__ */ e("div", { className: r.children, children: c }),
|
|
35
|
-
i ? /* @__PURE__ */ e(
|
|
36
|
-
/* @__PURE__ */ e(
|
|
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
|
|
2
|
-
import { useState as Q, useRef as C, useCallback as
|
|
3
|
-
import { ComboBox as W, Input as X, Button as Y, Popover as Z, Virtualizer as $, ListLayout as V, ListBox as ee, ListBoxItem as
|
|
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
|
|
6
|
-
import { useFieldIds as
|
|
7
|
-
import
|
|
8
|
-
import { FieldLayout as
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
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
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
function
|
|
16
|
-
className:
|
|
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:
|
|
21
|
+
inputRef: y,
|
|
21
22
|
isDisabled: f,
|
|
22
23
|
isInvalid: h,
|
|
23
|
-
isLoading:
|
|
24
|
+
isLoading: T,
|
|
24
25
|
isRequired: R,
|
|
25
|
-
label:
|
|
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:
|
|
32
|
+
value: i = [],
|
|
32
33
|
shouldVisuallyHideLabel: O
|
|
33
34
|
}) {
|
|
34
|
-
const j =
|
|
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 =
|
|
39
|
+
}, [b]), k = m(() => {
|
|
39
40
|
o.current && (clearTimeout(o.current), o.current = null);
|
|
40
|
-
}, []), a =
|
|
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
|
-
),
|
|
48
|
+
), g = u(
|
|
47
49
|
() => l.filter((e) => a.has(e.value)),
|
|
48
50
|
[l, a]
|
|
49
|
-
), H =
|
|
50
|
-
() =>
|
|
51
|
-
|
|
52
|
-
|
|
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?.([...
|
|
60
|
+
e && (n?.([...i, e.toString()]), v(""), I.current?.blur());
|
|
55
61
|
},
|
|
56
|
-
[
|
|
57
|
-
), U =
|
|
62
|
+
[i, n]
|
|
63
|
+
), U = m(
|
|
58
64
|
(e) => {
|
|
59
|
-
n?.(
|
|
65
|
+
n?.(i.filter((J) => J !== e));
|
|
60
66
|
},
|
|
61
|
-
[
|
|
62
|
-
), B = (
|
|
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__ */
|
|
68
|
-
/* @__PURE__ */
|
|
69
|
-
|
|
73
|
+
return /* @__PURE__ */ c("div", { className: N(t.root, D), children: [
|
|
74
|
+
/* @__PURE__ */ r(
|
|
75
|
+
oe,
|
|
70
76
|
{
|
|
71
|
-
label:
|
|
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:
|
|
85
|
+
className: t.comboBoxField,
|
|
80
86
|
withErrorIcon: !1,
|
|
81
|
-
children: /* @__PURE__ */
|
|
87
|
+
children: /* @__PURE__ */ c(
|
|
82
88
|
W,
|
|
83
89
|
{
|
|
84
|
-
"aria-label":
|
|
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__ */
|
|
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__ */
|
|
107
|
-
h && /* @__PURE__ */
|
|
108
|
-
/* @__PURE__ */
|
|
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__ */
|
|
116
|
+
/* @__PURE__ */ r(
|
|
111
117
|
Z,
|
|
112
118
|
{
|
|
113
|
-
className: N(
|
|
119
|
+
className: N(t.popover, "react-aria-Popover"),
|
|
114
120
|
UNSTABLE_portalContainer: z.current ?? void 0,
|
|
115
121
|
maxHeight: 320,
|
|
116
|
-
children: /* @__PURE__ */
|
|
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
|
-
|
|
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
|
-
|
|
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 = "
|
|
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:
|
|
4
|
-
icons:
|
|
5
|
-
popover:
|
|
6
|
-
|
|
3
|
+
comboBoxField: n,
|
|
4
|
+
icons: t,
|
|
5
|
+
popover: i,
|
|
6
|
+
optionLabel: _,
|
|
7
|
+
optionDescription: c,
|
|
8
|
+
chips: s
|
|
7
9
|
};
|
|
8
10
|
export {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
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
|
package/dist/components/Common/UI/MultiSelectComboBox/MultiSelectComboBox.module.scss.js.map
CHANGED
|
@@ -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 [
|
|
15
|
+
const [d, s] = t("CreateSignatoryContext");
|
|
17
16
|
export {
|
|
18
|
-
|
|
19
|
-
|
|
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":"
|
|
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 [
|
|
15
|
+
const [S, c] = t("InviteSignatoryContext");
|
|
17
16
|
export {
|
|
18
|
-
|
|
19
|
-
|
|
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":"
|
|
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
|
|
15
|
+
const d = {
|
|
17
16
|
createSignatory: "createSignatory",
|
|
18
17
|
inviteSignatory: "inviteSignatory"
|
|
19
|
-
}, [
|
|
18
|
+
}, [v, x] = t("AssignSignatoryContext");
|
|
20
19
|
export {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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":"
|
|
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 [
|
|
15
|
+
const [C, d] = o("BankAccountContext");
|
|
17
16
|
export {
|
|
18
|
-
|
|
19
|
-
|
|
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":"
|
|
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
|
* | ----- | ----------- | ---- |
|