@servicetitan/anvil2 1.48.1 → 1.49.0
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 +28 -0
- package/dist/{Alert-Cz_w_cw0.js → Alert-aGBkujwE.js} +4 -4
- package/dist/{Alert-Cz_w_cw0.js.map → Alert-aGBkujwE.js.map} +1 -1
- package/dist/Alert.js +1 -1
- package/dist/{Announcement-C1xSJkl0.js → Announcement-BPwFNhYe.js} +4 -4
- package/dist/{Announcement-C1xSJkl0.js.map → Announcement-BPwFNhYe.js.map} +1 -1
- package/dist/Announcement.js +1 -1
- package/dist/{AnvilProvider-DDo8ZcIA.js → AnvilProvider-DBYMPYAO.js} +3 -3
- package/dist/{AnvilProvider-DDo8ZcIA.js.map → AnvilProvider-DBYMPYAO.js.map} +1 -1
- package/dist/AnvilProvider.js +1 -1
- package/dist/{Avatar-VQrimv28.js → Avatar-DeEV-v-b.js} +2 -2
- package/dist/{Avatar-VQrimv28.js.map → Avatar-DeEV-v-b.js.map} +1 -1
- package/dist/{Avatar-Bbwk2MCy.js → Avatar-gtxslf5v.js} +2 -2
- package/dist/{Avatar-Bbwk2MCy.js.map → Avatar-gtxslf5v.js.map} +1 -1
- package/dist/Avatar.js +2 -2
- package/dist/{Badge-DOnID5l5.js → Badge-DY5xJkqi.js} +2 -2
- package/dist/{Badge-DOnID5l5.js.map → Badge-DY5xJkqi.js.map} +1 -1
- package/dist/Badge.js +1 -1
- package/dist/{Breadcrumbs-DKqd8VRz.js → Breadcrumbs-DjR-2OEH.js} +5 -5
- package/dist/{Breadcrumbs-DKqd8VRz.js.map → Breadcrumbs-DjR-2OEH.js.map} +1 -1
- package/dist/Breadcrumbs.js +1 -1
- package/dist/{Button-DzcOa6iJ.js → Button-92_FKAyV.js} +3 -3
- package/dist/{Button-DzcOa6iJ.js.map → Button-92_FKAyV.js.map} +1 -1
- package/dist/Button.js +1 -1
- package/dist/{ButtonCompound-Dvr3Fres.js → ButtonCompound-COdSELhh.js} +2 -2
- package/dist/{ButtonCompound-Dvr3Fres.js.map → ButtonCompound-COdSELhh.js.map} +1 -1
- package/dist/ButtonCompound.js +1 -1
- package/dist/{ButtonLink-DGIRpyK6.js → ButtonLink-C0zR7Wnb.js} +3 -3
- package/dist/{ButtonLink-DGIRpyK6.js.map → ButtonLink-C0zR7Wnb.js.map} +1 -1
- package/dist/ButtonLink.js +1 -1
- package/dist/{ButtonToggle-Dv6VAm4W.js → ButtonToggle--sKvhBoA.js} +3 -3
- package/dist/{ButtonToggle-Dv6VAm4W.js.map → ButtonToggle--sKvhBoA.js.map} +1 -1
- package/dist/ButtonToggle.js +1 -1
- package/dist/{Calendar-8bP4LsQV.js → Calendar-1MhJ03iy.js} +2 -2
- package/dist/{Calendar-8bP4LsQV.js.map → Calendar-1MhJ03iy.js.map} +1 -1
- package/dist/{Calendar-NDOcurOz.js → Calendar-B7ypKGUn.js} +5 -5
- package/dist/{Calendar-NDOcurOz.js.map → Calendar-B7ypKGUn.js.map} +1 -1
- package/dist/Calendar.js +2 -2
- package/dist/{Card-Cyoz-LaD.js → Card-Ch3sMUo5.js} +2 -2
- package/dist/{Card-Cyoz-LaD.js.map → Card-Ch3sMUo5.js.map} +1 -1
- package/dist/Card.js +1 -1
- package/dist/{Checkbox-Bsa1FgoI.js → Checkbox-Bhjj-jM4.js} +5 -5
- package/dist/{Checkbox-Bsa1FgoI.js.map → Checkbox-Bhjj-jM4.js.map} +1 -1
- package/dist/{Checkbox-BJnt8TFk.js → Checkbox-C5Qjq_tU.js} +2 -2
- package/dist/{Checkbox-BJnt8TFk.js.map → Checkbox-C5Qjq_tU.js.map} +1 -1
- package/dist/Checkbox.js +2 -2
- package/dist/{Chip-BGa1Inb8.js → Chip-X2EwdZ97.js} +4 -4
- package/dist/{Chip-BGa1Inb8.js.map → Chip-X2EwdZ97.js.map} +1 -1
- package/dist/Chip.js +1 -1
- package/dist/{Combobox-BfqKpX1v.js → Combobox-C4COM7BZ.js} +13 -13
- package/dist/{Combobox-BfqKpX1v.js.map → Combobox-C4COM7BZ.js.map} +1 -1
- package/dist/Combobox.js +1 -1
- package/dist/{DataTable-xUON92DR.js → DataTable-BkNCMaVu.js} +93 -89
- package/dist/DataTable-BkNCMaVu.js.map +1 -0
- package/dist/{DateField-Cm0FIG3Y.js → DateField-C5rA3USK.js} +6 -6
- package/dist/{DateField-Cm0FIG3Y.js.map → DateField-C5rA3USK.js.map} +1 -1
- package/dist/DateField.js +1 -1
- package/dist/{DateFieldRange-CGGqW_cg.js → DateFieldRange-BLfEH-oC.js} +7 -7
- package/dist/{DateFieldRange-CGGqW_cg.js.map → DateFieldRange-BLfEH-oC.js.map} +1 -1
- package/dist/DateFieldRange.js +1 -1
- package/dist/{DateFieldSingle-BYWuJ3IL.js → DateFieldSingle-7Cx_FMtb.js} +7 -7
- package/dist/{DateFieldSingle-BYWuJ3IL.js.map → DateFieldSingle-7Cx_FMtb.js.map} +1 -1
- package/dist/DateFieldSingle.js +1 -1
- package/dist/DateFieldYearless-D2uo-uqE.js +132 -0
- package/dist/DateFieldYearless-D2uo-uqE.js.map +1 -0
- package/dist/DateFieldYearless.js +1 -1
- package/dist/DateFieldYearlessRange-BivGidsU.js +178 -0
- package/dist/DateFieldYearlessRange-BivGidsU.js.map +1 -0
- package/dist/DateFieldYearlessRange.css +36 -0
- package/dist/DateFieldYearlessRange.d.ts +2 -0
- package/dist/DateFieldYearlessRange.js +2 -0
- package/dist/DateFieldYearlessRange.js.map +1 -0
- package/dist/{DaysOfTheWeek-BIi9dyJP.js → DaysOfTheWeek-Dn6zHxpt.js} +6 -6
- package/dist/{DaysOfTheWeek-BIi9dyJP.js.map → DaysOfTheWeek-Dn6zHxpt.js.map} +1 -1
- package/dist/DaysOfTheWeek.js +1 -1
- package/dist/{Details-Bg7QzlOm.js → Details-CkaKTRvc.js} +3 -3
- package/dist/{Details-Bg7QzlOm.js.map → Details-CkaKTRvc.js.map} +1 -1
- package/dist/Details.js +1 -1
- package/dist/{Dialog-fJClGTI6.js → Dialog-CxH4Vnbb.js} +4 -4
- package/dist/{Dialog-fJClGTI6.js.map → Dialog-CxH4Vnbb.js.map} +1 -1
- package/dist/Dialog.js +1 -1
- package/dist/{Divider-DYZFKug1.js → Divider-Olv8yWXD.js} +2 -2
- package/dist/{Divider-DYZFKug1.js.map → Divider-Olv8yWXD.js.map} +1 -1
- package/dist/Divider.js +1 -1
- package/dist/Dnd.js +1 -1
- package/dist/DndSort.js +5 -5
- package/dist/{Drawer-DyHDRTR-.js → Drawer-BLfDJU-e.js} +4 -4
- package/dist/{Drawer-DyHDRTR-.js.map → Drawer-BLfDJU-e.js.map} +1 -1
- package/dist/Drawer.js +1 -1
- package/dist/{EditCard-LdyduHqX.js → EditCard-Ds1UXJIS.js} +6 -6
- package/dist/{EditCard-LdyduHqX.js.map → EditCard-Ds1UXJIS.js.map} +1 -1
- package/dist/EditCard.js +1 -1
- package/dist/{FieldLabel-DIlzcPIQ.js → FieldLabel-CHMCV9wX.js} +38 -19
- package/dist/FieldLabel-CHMCV9wX.js.map +1 -0
- package/dist/FieldLabel.css +22 -7
- package/dist/FieldLabel.js +1 -1
- package/dist/{FieldMessage-BbARBii0.js → FieldMessage-DWONT3dr.js} +2 -2
- package/dist/{FieldMessage-BbARBii0.js.map → FieldMessage-DWONT3dr.js.map} +1 -1
- package/dist/FieldMessage.js +1 -1
- package/dist/{Flex-GLF5XRJg.js → Flex-CjPHUTeq.js} +2 -2
- package/dist/{Flex-GLF5XRJg.js.map → Flex-CjPHUTeq.js.map} +1 -1
- package/dist/Flex.js +1 -1
- package/dist/{Grid-BpAt2zA7.js → Grid-DW2cAuHi.js} +2 -2
- package/dist/{Grid-BpAt2zA7.js.map → Grid-DW2cAuHi.js.map} +1 -1
- package/dist/Grid.js +1 -1
- package/dist/{Helper-DHoKHqxV.js → Helper-DjWotFtO.js} +2 -2
- package/dist/{Helper-DHoKHqxV.js.map → Helper-DjWotFtO.js.map} +1 -1
- package/dist/{Icon-TcJbUdTz.js → Icon-BSuTVNaa.js} +2 -2
- package/dist/{Icon-TcJbUdTz.js.map → Icon-BSuTVNaa.js.map} +1 -1
- package/dist/Icon.js +1 -1
- package/dist/{InputMask-B6oJlChY.js → InputMask-fS5nqXdI.js} +2 -2
- package/dist/{InputMask-B6oJlChY.js.map → InputMask-fS5nqXdI.js.map} +1 -1
- package/dist/InputMask.js +1 -1
- package/dist/{Link-Br_AJ7Af.js → Link-DuYh7Xl2.js} +3 -3
- package/dist/{Link-Br_AJ7Af.js.map → Link-DuYh7Xl2.js.map} +1 -1
- package/dist/Link.js +1 -1
- package/dist/{LinkButton-CwiVzaro.js → LinkButton-pIUNATNE.js} +2 -2
- package/dist/{LinkButton-CwiVzaro.js.map → LinkButton-pIUNATNE.js.map} +1 -1
- package/dist/LinkButton.js +1 -1
- package/dist/{ListView-fBFSagWO.js → ListView-CZ5T8bR1.js} +3 -3
- package/dist/{ListView-fBFSagWO.js.map → ListView-CZ5T8bR1.js.map} +1 -1
- package/dist/ListView.js +1 -1
- package/dist/{Listbox-gtZ2Ao_I.js → Listbox-C-n4IVVj.js} +5 -5
- package/dist/{Listbox-gtZ2Ao_I.js.map → Listbox-C-n4IVVj.js.map} +1 -1
- package/dist/Listbox.js +1 -1
- package/dist/{LocalizationProvider-Cqattc3O.js → LocalizationProvider-u6xdKCBi.js} +2 -2
- package/dist/{LocalizationProvider-Cqattc3O.js.map → LocalizationProvider-u6xdKCBi.js.map} +1 -1
- package/dist/LocalizationProvider.js +1 -1
- package/dist/{Menu-CBbUK_sX.js → Menu-DUAfSImY.js} +4 -4
- package/dist/{Menu-CBbUK_sX.js.map → Menu-DUAfSImY.js.map} +1 -1
- package/dist/Menu.js +1 -1
- package/dist/{NumberField-CNskrtsN.js → NumberField-C62E56_v.js} +7 -7
- package/dist/{NumberField-CNskrtsN.js.map → NumberField-C62E56_v.js.map} +1 -1
- package/dist/NumberField.js +1 -1
- package/dist/Overflow.js +2 -3
- package/dist/Overflow.js.map +1 -1
- package/dist/{Page-4VdFrCjy.js → Page-CGZQ-nsg.js} +15 -15
- package/dist/Page-CGZQ-nsg.js.map +1 -0
- package/dist/Page.js +1 -1
- package/dist/{Pagination-CQjNN1yN.js → Pagination-BHEEnNas.js} +6 -6
- package/dist/{Pagination-CQjNN1yN.js.map → Pagination-BHEEnNas.js.map} +1 -1
- package/dist/Pagination.js +1 -1
- package/dist/{Popover--c9PXAVi.js → Popover-CIPg_ZgX.js} +5 -4
- package/dist/Popover-CIPg_ZgX.js.map +1 -0
- package/dist/Popover.js +1 -1
- package/dist/{ProgressBar-CXMuhBQV.js → ProgressBar-CUpF9fFW.js} +6 -6
- package/dist/{ProgressBar-CXMuhBQV.js.map → ProgressBar-CUpF9fFW.js.map} +1 -1
- package/dist/ProgressBar.js +1 -1
- package/dist/{Radio-CTYs8JpI.js → Radio-CyCFna1X.js} +2 -2
- package/dist/{Radio-CTYs8JpI.js.map → Radio-CyCFna1X.js.map} +1 -1
- package/dist/Radio.js +2 -2
- package/dist/{RadioGroup-BVGnsTuG.js → RadioGroup-DRS2EjVH.js} +5 -5
- package/dist/{RadioGroup-BVGnsTuG.js.map → RadioGroup-DRS2EjVH.js.map} +1 -1
- package/dist/{SearchField-DLqva3o3.js → SearchField-DrgNbG3I.js} +3 -3
- package/dist/{SearchField-DLqva3o3.js.map → SearchField-DrgNbG3I.js.map} +1 -1
- package/dist/SearchField.js +1 -1
- package/dist/{SegmentedControl-1OzOQmCp.js → SegmentedControl-C-QOwO7q.js} +2 -2
- package/dist/{SegmentedControl-1OzOQmCp.js.map → SegmentedControl-C-QOwO7q.js.map} +1 -1
- package/dist/SegmentedControl.js +1 -1
- package/dist/{SelectCard-Dw7zW0UN.js → SelectCard-lBcnP5j5.js} +4 -4
- package/dist/{SelectCard-Dw7zW0UN.js.map → SelectCard-lBcnP5j5.js.map} +1 -1
- package/dist/SelectCard.js +1 -1
- package/dist/{SelectTrigger-BQNqyG3M.js → SelectTrigger-qvoGCkb1.js} +5 -5
- package/dist/{SelectTrigger-BQNqyG3M.js.map → SelectTrigger-qvoGCkb1.js.map} +1 -1
- package/dist/SelectTrigger.js +1 -1
- package/dist/{SelectTriggerBase-B-fxog4U.js → SelectTriggerBase-C4gebtca.js} +6 -6
- package/dist/{SelectTriggerBase-B-fxog4U.js.map → SelectTriggerBase-C4gebtca.js.map} +1 -1
- package/dist/{SideNav-COiPAIph.js → SideNav-B1sH17Uc.js} +3 -3
- package/dist/{SideNav-COiPAIph.js.map → SideNav-B1sH17Uc.js.map} +1 -1
- package/dist/SideNav.js +1 -1
- package/dist/Skeleton.js +1 -1
- package/dist/{Stepper-xcgOQzru.js → Stepper-B0U_YrbZ.js} +4 -4
- package/dist/{Stepper-xcgOQzru.js.map → Stepper-B0U_YrbZ.js.map} +1 -1
- package/dist/Stepper.js +1 -1
- package/dist/{Switch-mhyHJeex.js → Switch-DjL2CsQi.js} +5 -5
- package/dist/{Switch-mhyHJeex.js.map → Switch-DjL2CsQi.js.map} +1 -1
- package/dist/Switch.js +1 -1
- package/dist/{Tab-BISlFW_i.js → Tab-6UavokJJ.js} +3 -3
- package/dist/{Tab-BISlFW_i.js.map → Tab-6UavokJJ.js.map} +1 -1
- package/dist/Tab.js +1 -1
- package/dist/Table.js +1 -1
- package/dist/{Text-CDzLZl1O.js → Text-kPA-VzsB.js} +2 -2
- package/dist/{Text-CDzLZl1O.js.map → Text-kPA-VzsB.js.map} +1 -1
- package/dist/Text.js +1 -1
- package/dist/{TextField-CUrYEZR4.js → TextField-DOSwy_gm.js} +2 -2
- package/dist/{TextField-CUrYEZR4.js.map → TextField-DOSwy_gm.js.map} +1 -1
- package/dist/{TextField-DPTJjF8V.js → TextField-DcyjojNg.js} +4 -4
- package/dist/{TextField-DPTJjF8V.js.map → TextField-DcyjojNg.js.map} +1 -1
- package/dist/TextField.js +1 -1
- package/dist/{Textarea-f0jAKcvn.js → Textarea-DacevzmW.js} +4 -4
- package/dist/{Textarea-f0jAKcvn.js.map → Textarea-DacevzmW.js.map} +1 -1
- package/dist/Textarea.js +1 -1
- package/dist/{ThemeProvider-CUiXHn4p.js → ThemeProvider-Bmsz__5N.js} +2 -2
- package/dist/{ThemeProvider-CUiXHn4p.js.map → ThemeProvider-Bmsz__5N.js.map} +1 -1
- package/dist/ThemeProvider.js +1 -1
- package/dist/{TimeField-CGSwrpl0.js → TimeField-C4s8fjDG.js} +7 -7
- package/dist/{TimeField-CGSwrpl0.js.map → TimeField-C4s8fjDG.js.map} +1 -1
- package/dist/TimeField.js +1 -1
- package/dist/Toast.js +2 -2
- package/dist/{Toaster-C6iB4h0P.js → Toaster-BxbR-XcR.js} +2 -2
- package/dist/{Toaster-C6iB4h0P.js.map → Toaster-BxbR-XcR.js.map} +1 -1
- package/dist/{Toaster-D72xHdfH.js → Toaster-Dg7M4W4U.js} +4 -4
- package/dist/{Toaster-D72xHdfH.js.map → Toaster-Dg7M4W4U.js.map} +1 -1
- package/dist/{Toolbar-CcJa_YpH.js → Toolbar-BvFwcXOk.js} +20 -20
- package/dist/{Toolbar-CcJa_YpH.js.map → Toolbar-BvFwcXOk.js.map} +1 -1
- package/dist/Toolbar.js +1 -1
- package/dist/{Tooltip-BOfdwyTv.js → Tooltip-CZsoFe6C.js} +2 -2
- package/dist/{Tooltip-BOfdwyTv.js.map → Tooltip-CZsoFe6C.js.map} +1 -1
- package/dist/Tooltip.js +1 -1
- package/dist/YearlessDateInputWithPicker-MHLlAdrH.js +949 -0
- package/dist/YearlessDateInputWithPicker-MHLlAdrH.js.map +1 -0
- package/dist/YearlessDateInputWithPicker.css +199 -0
- package/dist/beta/components/Table/DataTable/DataTable.d.ts +4 -4
- package/dist/beta/components/Table/DataTable/internal/useAsyncData.d.ts +5 -0
- package/dist/beta.js +4 -4
- package/dist/components/DateFieldYearless/DateFieldYearless.d.ts +57 -3
- package/dist/components/DateFieldYearless/internal/PickerList.d.ts +61 -0
- package/dist/components/DateFieldYearless/internal/PickerListOption.d.ts +61 -0
- package/dist/components/DateFieldYearless/internal/YearlessDateInput.d.ts +51 -0
- package/dist/components/DateFieldYearless/internal/YearlessDateInputWithPicker.d.ts +134 -0
- package/dist/components/DateFieldYearless/internal/YearlessDateSelectionPopover.d.ts +27 -0
- package/dist/components/DateFieldYearless/internal/maskito/yearlessDatePlaceholderMask.d.ts +3 -1
- package/dist/components/DateFieldYearless/internal/maskito/yearlessDateSegmentsStepping.d.ts +12 -0
- package/dist/components/DateFieldYearless/internal/utils.d.ts +50 -1
- package/dist/components/DateFieldYearlessRange/DateFieldYearlessRange.d.ts +59 -0
- package/dist/components/DateFieldYearlessRange/index.d.ts +1 -0
- package/dist/components/FieldLabel/FieldLabel.d.ts +9 -48
- package/dist/components/FieldLabel/internal/FieldLabelMoreInfoIcon.d.ts +3 -1
- package/dist/components/Popover/Popover.d.ts +1 -0
- package/dist/components/Popover/PopoverContent.d.ts +8 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/{index-CUVkL0hr.js → index-B25zeBIC.js} +3 -3
- package/dist/{index-CUVkL0hr.js.map → index-B25zeBIC.js.map} +1 -1
- package/dist/{index.esm-BwMVvxTV.js → index.esm-C2ZhC_8d.js} +2 -2
- package/dist/{index.esm-BwMVvxTV.js.map → index.esm-C2ZhC_8d.js.map} +1 -1
- package/dist/index.js +68 -67
- package/dist/index.js.map +1 -1
- package/dist/{useLayoutPropsUtil-C7FVYB8F.js → useLayoutPropsUtil-BlIWftBb.js} +2 -2
- package/dist/{useLayoutPropsUtil-C7FVYB8F.js.map → useLayoutPropsUtil-BlIWftBb.js.map} +1 -1
- package/dist/{utils-CyPyKUVh.js → utils-B8bmyfFR.js} +2 -2
- package/dist/{utils-CyPyKUVh.js.map → utils-B8bmyfFR.js.map} +1 -1
- package/package.json +2 -1
- package/dist/DataTable-xUON92DR.js.map +0 -1
- package/dist/DateFieldYearless-BXRgNWzy.js +0 -266
- package/dist/DateFieldYearless-BXRgNWzy.js.map +0 -1
- package/dist/FieldLabel-DIlzcPIQ.js.map +0 -1
- package/dist/Page-4VdFrCjy.js.map +0 -1
- package/dist/Popover--c9PXAVi.js.map +0 -1
- package/dist/components/DateFieldYearless/internal/MaskedYearlessDateInput.d.ts +0 -35
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateFieldYearless-D2uo-uqE.js","sources":["../src/components/DateFieldYearless/DateFieldYearless.tsx"],"sourcesContent":["import { childrenToString } from \"../../internal/functions\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DataTrackingId, LayoutUtilProps, Size } from \"../../types\";\nimport { YearlessDate, YearlessDateMode } from \"./types\";\nimport {\n YearlessDateInputWithPicker,\n YearlessDateInputWithPickerRef,\n} from \"./internal/YearlessDateInputWithPicker\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport {\n useId,\n useRef,\n useState,\n ReactElement,\n ReactNode,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { FieldLabel, FieldLabelProps } from \"../FieldLabel\";\nimport { Helper, HelperProps } from \"../../internal/components\";\nimport styles from \"../TextField/TextField.module.scss\";\nimport cx from \"classnames\";\n\nexport type DateFieldYearlessProps = Omit<\n ComponentPropsWithoutRef<\"input\">,\n | \"onChange\"\n | \"value\"\n | \"defaultValue\"\n | \"ref\"\n | \"size\"\n | \"type\"\n | \"onFocus\"\n | \"onBlur\"\n> &\n LayoutUtilProps & {\n /**\n * The controlled value of the date field\n */\n value?: YearlessDate | null;\n /**\n * The default value for uncontrolled usage\n */\n defaultValue?: YearlessDate | null;\n /**\n * The function to call when the date value changes\n */\n onChange?: DateFieldYearlessChangeHandler;\n /**\n * The date format mode (mm/dd or dd/mm)\n */\n mode?: YearlessDateMode;\n /**\n * Whether the field is required\n */\n required?: boolean;\n /**\n * The minimum allowed date\n */\n minDate?: YearlessDate | null;\n /**\n * The maximum allowed date\n */\n maxDate?: YearlessDate | null;\n /**\n * Configuration for unavailable dates\n */\n unavailable?: {\n /**\n * Array of dates that are not selectable\n */\n dates?: YearlessDate[];\n };\n /**\n * Whether the picker is disabled\n */\n disablePicker?: boolean;\n /**\n * Error state or error message\n */\n error?: ReactElement | string | boolean;\n /**\n * Label for the field\n */\n label?: FieldLabelProps[\"children\"];\n /**\n * Props for the label component\n */\n labelProps?: FieldLabelProps;\n /**\n * Description text for the field\n */\n description?: HelperProps[\"description\"];\n /**\n * Error aria-live setting\n */\n errorAriaLive?: HelperProps[\"errorAriaLive\"];\n /**\n * Size of the input\n */\n size?: Extract<Size, \"small\" | \"medium\" | \"large\">;\n /**\n * Whether the field is disabled\n */\n disabled?: boolean;\n /**\n * Whether the field is in loading state\n */\n loading?: boolean;\n /**\n * Additional info content\n */\n moreInfo?: ReactNode;\n /**\n * Whether to disable the format hint\n */\n disableHint?: boolean;\n /**\n * Function to call when the field is focused\n */\n onFocus?: (event: React.FocusEvent) => void;\n /**\n * Function to call when the field is blurred\n */\n onBlur?: (event: React.FocusEvent) => void;\n } & DataTrackingId;\n\n/**\n * Represents a change event for the DateFieldYearless component\n */\nexport type DateFieldYearlessChange = {\n /**\n * The current date value\n */\n value: YearlessDate | null;\n /**\n * Whether the input is valid\n */\n isInputValid: boolean;\n /**\n * Whether the input is empty\n */\n isInputEmpty: boolean;\n /**\n * Whether the overall value is valid\n */\n isValid: boolean;\n};\n\n/**\n * Handler function for DateFieldYearless change events\n */\nexport type DateFieldYearlessChangeHandler = (\n change: DateFieldYearlessChange,\n) => void;\n\n/**\n * DateFieldYearless component for inputting dates without year information.\n *\n * Features:\n * - Supports both controlled and uncontrolled usage\n * - Supports different date formats (mm/dd or dd/mm)\n * - Supports layout utilities for positioning and spacing\n *\n * @example\n * <DateFieldYearless\n * label=\"Birthday\"\n * mode=\"mm/dd\"\n * required\n * onChange={(change) => console.log('Date changed:', change.value)}\n * />\n */\nexport const DateFieldYearless = (props: DateFieldYearlessProps) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n value,\n defaultValue,\n minDate,\n maxDate,\n unavailable,\n required,\n disablePicker = false,\n mode = \"mm/dd\",\n error,\n errorAriaLive: errorAriaLiveProp = \"assertive\",\n label,\n moreInfo,\n size,\n disabled,\n loading,\n labelProps,\n description,\n id: idProp,\n style,\n disableHint = false,\n onFocus,\n onBlur,\n className,\n onChange,\n ...restProps\n } = componentProps;\n\n const inputRef = useRef<YearlessDateInputWithPickerRef>(null);\n\n const [openInfo, setOpenInfo] = useState(false);\n const [errorAriaLive, setErrorAriaLive] =\n useState<HelperProps[\"errorAriaLive\"]>(\"off\");\n\n const handleFocus = (e: React.FocusEvent) => {\n setOpenInfo(true);\n setErrorAriaLive(errorAriaLiveProp);\n onFocus?.(e);\n };\n const handleBlur = (e: React.FocusEvent) => {\n setOpenInfo(false);\n setErrorAriaLive(\"off\");\n onBlur?.(e);\n };\n\n const data = {\n label: childrenToString(props.label),\n labelProps: props.labelProps,\n description: childrenToString(props.description),\n };\n\n const trackingId = useTrackingId({\n name: \"DateFieldYearless\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n\n const labelUid = useId();\n const id = idProp ?? labelUid;\n const helperUid = useId();\n\n const errorMessage = typeof error !== \"boolean\" ? error : undefined;\n\n const styleCombined = { ...style, ...layoutStyles };\n\n return (\n <div\n className={cx(styles[\"textfield\"], className)}\n data-anv=\"datefield-yearless\"\n style={styleCombined}\n >\n {label && (\n <FieldLabel\n // Hack to deal with Tooltip mismanaging state\n key={openInfo ? \"open\" : \"closed\"}\n moreInfo={moreInfo}\n openMoreInfo={openInfo}\n required={required}\n htmlFor={id}\n {...labelProps}\n >\n {label}\n </FieldLabel>\n )}\n <YearlessDateInputWithPicker\n {...restProps}\n ref={inputRef}\n mode={mode}\n required={required}\n minDate={minDate}\n maxDate={maxDate}\n unavailable={unavailable}\n disablePicker={disablePicker}\n size={size}\n error={!!error}\n disabled={disabled}\n loading={loading}\n id={id}\n data-tracking-id={trackingId}\n aria-describedby={helperUid}\n aria-invalid={error ? !!error : undefined}\n value={value}\n defaultValue={defaultValue}\n onChange={onChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n />\n {errorMessage || description || (!disableHint && mode) ? (\n <Helper\n id={helperUid}\n hint={disableHint ? undefined : `Format: ${mode}`}\n showCounter={false}\n errorMessage={errorMessage}\n errorAriaLive={errorAriaLive}\n description={description}\n />\n ) : null}\n </div>\n );\n};\n\nDateFieldYearless.displayName = \"DateFieldYearless\";\n"],"names":["styles"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { D as DateFieldYearless } from './DateFieldYearless-
|
|
1
|
+
export { D as DateFieldYearless } from './DateFieldYearless-D2uo-uqE.js';
|
|
2
2
|
//# sourceMappingURL=DateFieldYearless.js.map
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { useState, useId } from 'react';
|
|
4
|
+
import { c as cx } from './index-tZvMCc77.js';
|
|
5
|
+
import { t as textFieldStyles } from './TextField.module-pD1felN8.js';
|
|
6
|
+
import { F as FieldLabel } from './FieldLabel-CHMCV9wX.js';
|
|
7
|
+
import { I as Icon } from './Icon-BSuTVNaa.js';
|
|
8
|
+
import { Y as YearlessDateInputWithPicker } from './YearlessDateInputWithPicker-MHLlAdrH.js';
|
|
9
|
+
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-BlIWftBb.js';
|
|
10
|
+
import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
|
|
11
|
+
import { H as Helper } from './Helper-DjWotFtO.js';
|
|
12
|
+
|
|
13
|
+
import './DateFieldYearlessRange.css';const dateFieldYearlessRangeStyles = {
|
|
14
|
+
"range-row": "_range-row_xox8l_1",
|
|
15
|
+
"range-root": "_range-root_xox8l_12",
|
|
16
|
+
"sr-only": "_sr-only_xox8l_23"
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const SvgArrowForward = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" }));
|
|
20
|
+
|
|
21
|
+
const DateFieldYearlessRange = (props) => {
|
|
22
|
+
const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
|
|
23
|
+
const {
|
|
24
|
+
label,
|
|
25
|
+
moreInfo,
|
|
26
|
+
size,
|
|
27
|
+
hideLabel = false,
|
|
28
|
+
required,
|
|
29
|
+
id: idProp,
|
|
30
|
+
legendProps,
|
|
31
|
+
errorAriaLive: errorAriaLiveProp = "assertive",
|
|
32
|
+
onFocus: onFocusProp,
|
|
33
|
+
onBlur: onBlurProp,
|
|
34
|
+
error,
|
|
35
|
+
disabled,
|
|
36
|
+
disableHint,
|
|
37
|
+
description,
|
|
38
|
+
mode = "mm/dd",
|
|
39
|
+
startLabel = "Start date",
|
|
40
|
+
endLabel = "End date",
|
|
41
|
+
disablePicker
|
|
42
|
+
} = componentProps;
|
|
43
|
+
const [value, setValue] = useOptionallyControlledState({
|
|
44
|
+
controlledValue: props.value,
|
|
45
|
+
defaultValue: props.defaultValue,
|
|
46
|
+
onChange: props.onChange
|
|
47
|
+
});
|
|
48
|
+
const [openInfo, setOpenInfo] = useState(false);
|
|
49
|
+
const [errorAriaLive, setErrorAriaLive] = useState("off");
|
|
50
|
+
const handleFocus = (e) => {
|
|
51
|
+
setOpenInfo(true);
|
|
52
|
+
setErrorAriaLive(errorAriaLiveProp);
|
|
53
|
+
onFocusProp?.(e);
|
|
54
|
+
};
|
|
55
|
+
const handleBlur = (e) => {
|
|
56
|
+
setOpenInfo(false);
|
|
57
|
+
setErrorAriaLive("off");
|
|
58
|
+
onBlurProp?.(e);
|
|
59
|
+
};
|
|
60
|
+
const labelUid = useId();
|
|
61
|
+
const id = idProp ?? labelUid;
|
|
62
|
+
const helperUid = useId();
|
|
63
|
+
const errorMessage = typeof error !== "boolean" ? error : void 0;
|
|
64
|
+
const handleStartDateChange = (startDate) => {
|
|
65
|
+
setValue({
|
|
66
|
+
...value,
|
|
67
|
+
startDate
|
|
68
|
+
});
|
|
69
|
+
};
|
|
70
|
+
const handleEndDateChange = (endDate) => {
|
|
71
|
+
setValue({
|
|
72
|
+
...value,
|
|
73
|
+
endDate
|
|
74
|
+
});
|
|
75
|
+
};
|
|
76
|
+
return /* @__PURE__ */ jsxs(
|
|
77
|
+
"fieldset",
|
|
78
|
+
{
|
|
79
|
+
className: cx(
|
|
80
|
+
textFieldStyles["textfield"],
|
|
81
|
+
dateFieldYearlessRangeStyles["range-root"]
|
|
82
|
+
),
|
|
83
|
+
"data-anv": "date-field-yearless-range",
|
|
84
|
+
style: layoutStyles,
|
|
85
|
+
children: [
|
|
86
|
+
/* @__PURE__ */ jsx(
|
|
87
|
+
FieldLabel,
|
|
88
|
+
{
|
|
89
|
+
el: "legend",
|
|
90
|
+
moreInfo,
|
|
91
|
+
openMoreInfo: openInfo,
|
|
92
|
+
required,
|
|
93
|
+
...legendProps,
|
|
94
|
+
className: cx(
|
|
95
|
+
legendProps?.className,
|
|
96
|
+
hideLabel ? dateFieldYearlessRangeStyles["sr-only"] : void 0
|
|
97
|
+
),
|
|
98
|
+
children: label
|
|
99
|
+
}
|
|
100
|
+
),
|
|
101
|
+
/* @__PURE__ */ jsxs("div", { className: dateFieldYearlessRangeStyles["range-row"], children: [
|
|
102
|
+
/* @__PURE__ */ jsx(
|
|
103
|
+
FieldLabel,
|
|
104
|
+
{
|
|
105
|
+
htmlFor: id + "-start",
|
|
106
|
+
className: dateFieldYearlessRangeStyles["sr-only"],
|
|
107
|
+
children: startLabel
|
|
108
|
+
}
|
|
109
|
+
),
|
|
110
|
+
/* @__PURE__ */ jsx(
|
|
111
|
+
YearlessDateInputWithPicker,
|
|
112
|
+
{
|
|
113
|
+
id: id + "-start",
|
|
114
|
+
size,
|
|
115
|
+
error: !!error,
|
|
116
|
+
required,
|
|
117
|
+
disabled,
|
|
118
|
+
mode,
|
|
119
|
+
value: value?.startDate,
|
|
120
|
+
onChange: (change) => handleStartDateChange(change.value),
|
|
121
|
+
"aria-describedby": helperUid,
|
|
122
|
+
disablePicker,
|
|
123
|
+
onFocus: handleFocus,
|
|
124
|
+
onBlur: handleBlur
|
|
125
|
+
}
|
|
126
|
+
),
|
|
127
|
+
/* @__PURE__ */ jsx(
|
|
128
|
+
Icon,
|
|
129
|
+
{
|
|
130
|
+
svg: SvgArrowForward,
|
|
131
|
+
className: dateFieldYearlessRangeStyles["range-arrow"]
|
|
132
|
+
}
|
|
133
|
+
),
|
|
134
|
+
/* @__PURE__ */ jsx(
|
|
135
|
+
FieldLabel,
|
|
136
|
+
{
|
|
137
|
+
htmlFor: id + "-end",
|
|
138
|
+
className: dateFieldYearlessRangeStyles["sr-only"],
|
|
139
|
+
children: endLabel
|
|
140
|
+
}
|
|
141
|
+
),
|
|
142
|
+
/* @__PURE__ */ jsx(
|
|
143
|
+
YearlessDateInputWithPicker,
|
|
144
|
+
{
|
|
145
|
+
id: id + "-end",
|
|
146
|
+
size,
|
|
147
|
+
error: !!error,
|
|
148
|
+
required,
|
|
149
|
+
disabled,
|
|
150
|
+
mode,
|
|
151
|
+
value: value?.endDate,
|
|
152
|
+
onChange: (change) => handleEndDateChange(change.value),
|
|
153
|
+
"aria-labelledby": labelUid,
|
|
154
|
+
"aria-describedby": helperUid,
|
|
155
|
+
disablePicker,
|
|
156
|
+
onFocus: handleFocus,
|
|
157
|
+
onBlur: handleBlur
|
|
158
|
+
}
|
|
159
|
+
)
|
|
160
|
+
] }),
|
|
161
|
+
!disableHint || errorMessage || description ? /* @__PURE__ */ jsx(
|
|
162
|
+
Helper,
|
|
163
|
+
{
|
|
164
|
+
id: helperUid,
|
|
165
|
+
hint: disableHint ? void 0 : `Format: ${mode}`,
|
|
166
|
+
showCounter: false,
|
|
167
|
+
errorMessage,
|
|
168
|
+
errorAriaLive,
|
|
169
|
+
description
|
|
170
|
+
}
|
|
171
|
+
) : null
|
|
172
|
+
]
|
|
173
|
+
}
|
|
174
|
+
);
|
|
175
|
+
};
|
|
176
|
+
|
|
177
|
+
export { DateFieldYearlessRange as D };
|
|
178
|
+
//# sourceMappingURL=DateFieldYearlessRange-BivGidsU.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateFieldYearlessRange-BivGidsU.js","sources":["../../hammer-icon/mdi/filled/arrow_forward.svg","../src/components/DateFieldYearlessRange/DateFieldYearlessRange.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgArrowForward = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\" }));\nexport default SvgArrowForward;\n","import { ReactElement, useId, useState } from \"react\";\nimport cx from \"classnames\";\nimport textFieldStyles from \"../TextField/TextField.module.scss\";\nimport dateFieldYearlessRangeStyles from \"./DateFieldYearlessRange.module.scss\";\nimport { Helper, HelperProps } from \"../../internal/components\";\nimport { LayoutUtilProps, Size } from \"../../types\";\nimport {\n useLayoutPropsUtil,\n useOptionallyControlledState,\n} from \"../../internal/hooks\";\nimport FieldLabel, { FieldLabelProps } from \"../FieldLabel\";\nimport { YearlessDate, YearlessDateMode } from \"../DateFieldYearless/types\";\nimport Icon from \"../Icon\";\nimport ArrowForward from \"@servicetitan/hammer-icon/mdi/filled/arrow_forward.svg\";\nimport { YearlessDateInputWithPicker } from \"../DateFieldYearless/internal/YearlessDateInputWithPicker\";\n\nexport type DateFieldYearlessRangeValue = {\n startDate: YearlessDate | null;\n endDate: YearlessDate | null;\n};\n\nexport type DateFieldYearlessRangeChange = {\n startDate: YearlessDate | null;\n endDate: YearlessDate | null;\n};\n\nexport type DateFieldYearlessRangeChangeHandler = (\n change: DateFieldYearlessRangeChange,\n) => void;\n\nexport type DateFieldYearlessRangeProps = {\n /**\n * The controlled value of the date field\n */\n value?: DateFieldYearlessRangeValue;\n /**\n * The default value for uncontrolled usage\n */\n defaultValue?: DateFieldYearlessRangeValue;\n /**\n * The function to call when the date value changes\n */\n onChange?: DateFieldYearlessRangeChangeHandler;\n /**\n * The date format mode (mm/dd or dd/mm)\n */\n mode?: YearlessDateMode;\n /**\n * Whether the field is required\n */\n required?: boolean;\n /**\n * Whether the picker is disabled\n */\n disablePicker?: boolean;\n /**\n * Whether to disable the hint\n */\n disableHint?: boolean;\n error?: ReactElement | string | boolean;\n label: string;\n hideLabel?: boolean;\n size?: Extract<Size, \"small\" | \"medium\" | \"large\">;\n description?: HelperProps[\"description\"];\n errorAriaLive?: HelperProps[\"errorAriaLive\"];\n disabled?: boolean;\n onFocus?: (event: React.FocusEvent) => void;\n onBlur?: (event: React.FocusEvent) => void;\n id?: string;\n startLabel?: string;\n endLabel?: string;\n legendProps?: Omit<FieldLabelProps, \"el\">;\n moreInfo?: FieldLabelProps[\"moreInfo\"];\n} & LayoutUtilProps;\n\nexport const DateFieldYearlessRange = (props: DateFieldYearlessRangeProps) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n label,\n moreInfo,\n size,\n hideLabel = false,\n required,\n id: idProp,\n legendProps,\n errorAriaLive: errorAriaLiveProp = \"assertive\",\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n error,\n disabled,\n disableHint,\n description,\n mode = \"mm/dd\",\n startLabel = \"Start date\",\n endLabel = \"End date\",\n disablePicker,\n } = componentProps;\n\n const [value, setValue] =\n useOptionallyControlledState<DateFieldYearlessRangeValue>({\n controlledValue: props.value,\n defaultValue: props.defaultValue,\n onChange: props.onChange,\n });\n\n const [openInfo, setOpenInfo] = useState(false);\n const [errorAriaLive, setErrorAriaLive] =\n useState<HelperProps[\"errorAriaLive\"]>(\"off\");\n\n const handleFocus = (e: React.FocusEvent) => {\n setOpenInfo(true);\n setErrorAriaLive(errorAriaLiveProp);\n onFocusProp?.(e);\n };\n const handleBlur = (e: React.FocusEvent) => {\n setOpenInfo(false);\n setErrorAriaLive(\"off\");\n onBlurProp?.(e);\n };\n\n const labelUid = useId();\n const id = idProp ?? labelUid;\n const helperUid = useId();\n\n const errorMessage = typeof error !== \"boolean\" ? error : undefined;\n\n const handleStartDateChange = (startDate: YearlessDate | null) => {\n setValue({\n ...value,\n startDate,\n });\n };\n\n const handleEndDateChange = (endDate: YearlessDate | null) => {\n setValue({\n ...value,\n endDate,\n });\n };\n\n return (\n <fieldset\n className={cx(\n textFieldStyles[\"textfield\"],\n dateFieldYearlessRangeStyles[\"range-root\"],\n )}\n data-anv=\"date-field-yearless-range\"\n style={layoutStyles}\n >\n <FieldLabel\n el=\"legend\"\n moreInfo={moreInfo}\n openMoreInfo={openInfo}\n required={required}\n {...legendProps}\n className={cx(\n legendProps?.className,\n hideLabel ? dateFieldYearlessRangeStyles[\"sr-only\"] : undefined,\n )}\n >\n {label}\n </FieldLabel>\n <div className={dateFieldYearlessRangeStyles[\"range-row\"]}>\n <FieldLabel\n htmlFor={id + \"-\" + \"start\"}\n className={dateFieldYearlessRangeStyles[\"sr-only\"]}\n >\n {startLabel}\n </FieldLabel>\n <YearlessDateInputWithPicker\n id={id + \"-\" + \"start\"}\n size={size}\n error={!!error}\n required={required}\n disabled={disabled}\n mode={mode}\n value={value?.startDate}\n onChange={(change) => handleStartDateChange(change.value)}\n aria-describedby={helperUid}\n disablePicker={disablePicker}\n onFocus={handleFocus}\n onBlur={handleBlur}\n />\n <Icon\n svg={ArrowForward}\n className={dateFieldYearlessRangeStyles[\"range-arrow\"]}\n />\n <FieldLabel\n htmlFor={id + \"-\" + \"end\"}\n className={dateFieldYearlessRangeStyles[\"sr-only\"]}\n >\n {endLabel}\n </FieldLabel>\n <YearlessDateInputWithPicker\n id={id + \"-\" + \"end\"}\n size={size}\n error={!!error}\n required={required}\n disabled={disabled}\n mode={mode}\n value={value?.endDate}\n onChange={(change) => handleEndDateChange(change.value)}\n aria-labelledby={labelUid}\n aria-describedby={helperUid}\n disablePicker={disablePicker}\n onFocus={handleFocus}\n onBlur={handleBlur}\n />\n </div>\n {!disableHint || errorMessage || description ? (\n <Helper\n id={helperUid}\n hint={disableHint ? undefined : `Format: ${mode}`}\n showCounter={false}\n errorMessage={errorMessage}\n errorAriaLive={errorAriaLive}\n description={description}\n />\n ) : null}\n </fieldset>\n );\n};\n"],"names":["ArrowForward"],"mappings":"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"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
@layer starter, reset, base, state, application;
|
|
2
|
+
|
|
3
|
+
._range-row_xox8l_1 {
|
|
4
|
+
display: grid;
|
|
5
|
+
grid-template-columns: 1fr auto 1fr;
|
|
6
|
+
gap: 0.5rem;
|
|
7
|
+
align-items: center;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
._range-row_xox8l_1 ._input_xox8l_8 {
|
|
11
|
+
width: 100% !important;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
._range-root_xox8l_12 {
|
|
15
|
+
width: 100% !important;
|
|
16
|
+
container: range-root/inline-size;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@container range-root (width < 180px) {
|
|
20
|
+
._range-row_xox8l_1 {
|
|
21
|
+
grid-template-columns: 1fr;
|
|
22
|
+
justify-items: center;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
._range-root_xox8l_12 ._sr-only_xox8l_23 {
|
|
26
|
+
border: 0;
|
|
27
|
+
clip: rect(0, 0, 0, 0);
|
|
28
|
+
height: 1px;
|
|
29
|
+
margin: -1px;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
padding-block: 0;
|
|
32
|
+
padding-inline: 0;
|
|
33
|
+
position: absolute;
|
|
34
|
+
white-space: nowrap;
|
|
35
|
+
width: 1px;
|
|
36
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateFieldYearlessRange.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { forwardRef, useId, useMemo } from 'react';
|
|
3
|
-
import { F as FieldLabel } from './FieldLabel-
|
|
4
|
-
import { B as ButtonToggle } from './ButtonToggle
|
|
5
|
-
import { T as Tooltip } from './Tooltip-
|
|
6
|
-
import { F as Flex } from './Flex-
|
|
7
|
-
import { H as Helper } from './Helper-
|
|
3
|
+
import { F as FieldLabel } from './FieldLabel-CHMCV9wX.js';
|
|
4
|
+
import { B as ButtonToggle } from './ButtonToggle--sKvhBoA.js';
|
|
5
|
+
import { T as Tooltip } from './Tooltip-CZsoFe6C.js';
|
|
6
|
+
import { F as Flex } from './Flex-CjPHUTeq.js';
|
|
7
|
+
import { H as Helper } from './Helper-DjWotFtO.js';
|
|
8
8
|
|
|
9
9
|
import './DaysOfTheWeek.css';const styles = {
|
|
10
10
|
"days-of-the-week-container": "_days-of-the-week-container_13rkh_3",
|
|
@@ -108,4 +108,4 @@ const DaysOfTheWeek = forwardRef(
|
|
|
108
108
|
DaysOfTheWeek.displayName = "DaysOfTheWeek";
|
|
109
109
|
|
|
110
110
|
export { DaysOfTheWeek as D };
|
|
111
|
-
//# sourceMappingURL=DaysOfTheWeek-
|
|
111
|
+
//# sourceMappingURL=DaysOfTheWeek-Dn6zHxpt.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DaysOfTheWeek-
|
|
1
|
+
{"version":3,"file":"DaysOfTheWeek-Dn6zHxpt.js","sources":["../src/components/DaysOfTheWeek/DaysOfTheWeek.tsx"],"sourcesContent":["import {\n AriaAttributes,\n ReactElement,\n Ref,\n forwardRef,\n useId,\n useMemo,\n} from \"react\";\nimport { DataTrackingId } from \"../../types\";\nimport styles from \"./DaysOfTheWeek.module.scss\";\nimport { FieldLabel, FieldLabelProps } from \"../FieldLabel\";\n\nimport ButtonToggle from \"../ButtonToggle\";\nimport Tooltip from \"../Tooltip\";\nimport { Helper } from \"../../internal/components\";\nimport Flex from \"../Flex\";\n\n/**\n * Props for the DaysOfTheWeek component\n */\nexport type DaysOfTheWeekProps = {\n /**\n * The selected days (1-7, where 1 is Monday and 7 is Sunday)\n */\n selectedDays?: number[];\n /**\n * Callback fired when the selection changes\n */\n onChange?: (selectedDays: number[]) => void;\n /**\n * Whether the component is disabled\n * Can be a boolean to disable all days, or an array of day numbers (1-7) to disable specific days\n */\n disabled?: boolean | number[];\n /**\n * The first day of the week (1-7, where 1 is Monday and 7 is Sunday)\n * @default 1\n */\n firstDay?: number;\n /**\n * Hint text or element to display above the component\n */\n hint?: ReactElement | string;\n /**\n * ID for the component\n */\n id?: string;\n /**\n * Description text or element to display below the component\n */\n description?: ReactElement | string;\n /**\n * Error message to display when there is an error\n */\n errorMessage?: ReactElement | string;\n /**\n * aria-live for the error message\n * @default assertive\n */\n errorAriaLive?: AriaAttributes[\"aria-live\"];\n /**\n * Label text or element\n */\n label?: FieldLabelProps[\"children\"];\n /**\n * Whether the field is required\n */\n required?: boolean;\n /**\n * Additional info to display in a tooltip next to the label\n */\n moreInfo?: FieldLabelProps[\"moreInfo\"];\n /**\n * Additional props to pass to the Label component\n */\n labelProps?: FieldLabelProps;\n} & DataTrackingId;\n\ninterface DayInfo {\n short: string;\n full: string;\n}\n\n// Days in order from Monday to Sunday\nconst DAYS: DayInfo[] = [\n { short: \"Mo\", full: \"Monday\" },\n { short: \"Tu\", full: \"Tuesday\" },\n { short: \"We\", full: \"Wednesday\" },\n { short: \"Th\", full: \"Thursday\" },\n { short: \"Fr\", full: \"Friday\" },\n { short: \"Sa\", full: \"Saturday\" },\n { short: \"Su\", full: \"Sunday\" },\n];\n\n/**\n * DaysOfTheWeek component for selecting multiple days of the week.\n *\n * Features:\n * - Displays days of the week as toggleable buttons\n * - Supports custom first day of the week (Monday-Sunday)\n * - Individual day selection and deselection\n * - Optional label, hint, description, and error messaging\n * - Full accessibility support with ARIA attributes\n * - Tooltips showing full day names on hover\n * - Responsive design with flexible layout\n * - Support for disabling specific days or the entire component\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <DaysOfTheWeek\n * selectedDays={[2, 4, 6]}\n * onChange={(days) => console.log('Selected days:', days)}\n * label=\"Working Days\"\n * firstDay={1}\n * />\n */\nexport const DaysOfTheWeek = forwardRef(\n (props: DaysOfTheWeekProps, ref: Ref<HTMLDivElement>) => {\n const {\n selectedDays = [],\n onChange,\n disabled,\n firstDay = 7,\n hint,\n id: idProp,\n description,\n errorMessage,\n errorAriaLive,\n label,\n required,\n moreInfo,\n labelProps,\n } = props;\n\n const autoId = useId();\n const id = idProp ?? autoId;\n const labelUid = useId();\n const helperUid = useId();\n\n const hasHelperText = hint || errorMessage || description;\n\n const orderedDays = useMemo(() => {\n const firstDayIndex = firstDay - 1;\n return [...DAYS.slice(firstDayIndex), ...DAYS.slice(0, firstDayIndex)];\n }, [firstDay]);\n\n const handleDayToggle = (index: number) => {\n // Convert from 0-based array index to 1-based day number, accounting for firstDay\n const dayNumber = ((index + firstDay - 1) % 7) + 1;\n const newSelectedDays = selectedDays.includes(dayNumber)\n ? selectedDays.filter((d) => d !== dayNumber)\n : [...selectedDays, dayNumber];\n\n onChange?.(newSelectedDays);\n };\n\n const isDayDisabled = (dayNumber: number) => {\n if (typeof disabled === \"boolean\") {\n return disabled;\n }\n if (Array.isArray(disabled)) {\n return disabled.includes(dayNumber);\n }\n return false;\n };\n\n return (\n <div className={styles[\"days-of-the-week-container\"]}>\n {label ? (\n <FieldLabel\n moreInfo={moreInfo}\n required={required}\n id={labelUid}\n htmlFor={id}\n {...labelProps}\n >\n {label}\n </FieldLabel>\n ) : null}\n <Flex ref={ref} gap={2} className={styles[\"days-of-the-week\"]} id={id}>\n {orderedDays.map((day, index) => {\n // Convert from 0-based array index to 1-based day number, accounting for firstDay\n const dayNumber = ((index + firstDay - 1) % 7) + 1;\n return (\n <Tooltip key={day.short} placement=\"top\">\n <Tooltip.Trigger className={styles[\"button-toggle-wrapper\"]}>\n <ButtonToggle\n checked={selectedDays.includes(dayNumber)}\n onClick={() => handleDayToggle(index)}\n disabled={isDayDisabled(dayNumber)}\n className={styles[\"button-toggle\"]}\n id={label ? labelUid : undefined}\n aria-describedby={hasHelperText ? helperUid : undefined}\n >\n {day.short}\n </ButtonToggle>\n </Tooltip.Trigger>\n <Tooltip.Content>{day.full}</Tooltip.Content>\n </Tooltip>\n );\n })}\n </Flex>\n {hasHelperText ? (\n <Helper\n id={helperUid}\n hint={hint}\n description={description}\n errorMessage={errorMessage}\n errorAriaLive={errorAriaLive}\n />\n ) : null}\n </div>\n );\n },\n);\nDaysOfTheWeek.displayName = \"DaysOfTheWeek\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAoFA,MAAM,IAAA,GAAkB;AAAA,EACtB,EAAE,KAAA,EAAO,IAAA,EAAM,IAAA,EAAM,QAAA,EAAS;AAAA,EAC9B,EAAE,KAAA,EAAO,IAAA,EAAM,IAAA,EAAM,SAAA,EAAU;AAAA,EAC/B,EAAE,KAAA,EAAO,IAAA,EAAM,IAAA,EAAM,WAAA,EAAY;AAAA,EACjC,EAAE,KAAA,EAAO,IAAA,EAAM,IAAA,EAAM,UAAA,EAAW;AAAA,EAChC,EAAE,KAAA,EAAO,IAAA,EAAM,IAAA,EAAM,QAAA,EAAS;AAAA,EAC9B,EAAE,KAAA,EAAO,IAAA,EAAM,IAAA,EAAM,UAAA,EAAW;AAAA,EAChC,EAAE,KAAA,EAAO,IAAA,EAAM,IAAA,EAAM,QAAA;AACvB,CAAA;AAwBO,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,CAAC,OAA2B,GAAA,KAA6B;AACvD,IAAA,MAAM;AAAA,MACJ,eAAe,EAAC;AAAA,MAChB,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA,GAAW,CAAA;AAAA,MACX,IAAA;AAAA,MACA,EAAA,EAAI,MAAA;AAAA,MACJ,WAAA;AAAA,MACA,YAAA;AAAA,MACA,aAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KACF,GAAI,KAAA;AAEJ,IAAA,MAAM,SAAS,KAAA,EAAM;AACrB,IAAA,MAAM,KAAK,MAAA,IAAU,MAAA;AACrB,IAAA,MAAM,WAAW,KAAA,EAAM;AACvB,IAAA,MAAM,YAAY,KAAA,EAAM;AAExB,IAAA,MAAM,aAAA,GAAgB,QAAQ,YAAA,IAAgB,WAAA;AAE9C,IAAA,MAAM,WAAA,GAAc,QAAQ,MAAM;AAChC,MAAA,MAAM,gBAAgB,QAAA,GAAW,CAAA;AACjC,MAAA,OAAO,CAAC,GAAG,IAAA,CAAK,KAAA,CAAM,aAAa,CAAA,EAAG,GAAG,IAAA,CAAK,KAAA,CAAM,CAAA,EAAG,aAAa,CAAC,CAAA;AAAA,IACvE,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,IAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAkB;AAEzC,MAAA,MAAM,SAAA,GAAA,CAAc,KAAA,GAAQ,QAAA,GAAW,CAAA,IAAK,CAAA,GAAK,CAAA;AACjD,MAAA,MAAM,eAAA,GAAkB,YAAA,CAAa,QAAA,CAAS,SAAS,IACnD,YAAA,CAAa,MAAA,CAAO,CAAC,CAAA,KAAM,MAAM,SAAS,CAAA,GAC1C,CAAC,GAAG,cAAc,SAAS,CAAA;AAE/B,MAAA,QAAA,GAAW,eAAe,CAAA;AAAA,IAC5B,CAAA;AAEA,IAAA,MAAM,aAAA,GAAgB,CAAC,SAAA,KAAsB;AAC3C,MAAA,IAAI,OAAO,aAAa,SAAA,EAAW;AACjC,QAAA,OAAO,QAAA;AAAA,MACT;AACA,MAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,QAAQ,CAAA,EAAG;AAC3B,QAAA,OAAO,QAAA,CAAS,SAAS,SAAS,CAAA;AAAA,MACpC;AACA,MAAA,OAAO,KAAA;AAAA,IACT,CAAA;AAEA,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,4BAA4B,CAAA,EAChD,QAAA,EAAA;AAAA,MAAA,KAAA,mBACC,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,QAAA;AAAA,UACA,QAAA;AAAA,UACA,EAAA,EAAI,QAAA;AAAA,UACJ,OAAA,EAAS,EAAA;AAAA,UACR,GAAG,UAAA;AAAA,UAEH,QAAA,EAAA;AAAA;AAAA,OACH,GACE,IAAA;AAAA,sBACJ,GAAA,CAAC,IAAA,EAAA,EAAK,GAAA,EAAU,GAAA,EAAK,GAAG,SAAA,EAAW,MAAA,CAAO,kBAAkB,CAAA,EAAG,EAAA,EAC5D,QAAA,EAAA,WAAA,CAAY,GAAA,CAAI,CAAC,KAAK,KAAA,KAAU;AAE/B,QAAA,MAAM,SAAA,GAAA,CAAc,KAAA,GAAQ,QAAA,GAAW,CAAA,IAAK,CAAA,GAAK,CAAA;AACjD,QAAA,uBACE,IAAA,CAAC,OAAA,EAAA,EAAwB,SAAA,EAAU,KAAA,EACjC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAQ,OAAA,EAAR,EAAgB,SAAA,EAAW,MAAA,CAAO,uBAAuB,CAAA,EACxD,QAAA,kBAAA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAS,YAAA,CAAa,QAAA,CAAS,SAAS,CAAA;AAAA,cACxC,OAAA,EAAS,MAAM,eAAA,CAAgB,KAAK,CAAA;AAAA,cACpC,QAAA,EAAU,cAAc,SAAS,CAAA;AAAA,cACjC,SAAA,EAAW,OAAO,eAAe,CAAA;AAAA,cACjC,EAAA,EAAI,QAAQ,QAAA,GAAW,MAAA;AAAA,cACvB,kBAAA,EAAkB,gBAAgB,SAAA,GAAY,MAAA;AAAA,cAE7C,QAAA,EAAA,GAAA,CAAI;AAAA;AAAA,WACP,EACF,CAAA;AAAA,0BACA,GAAA,CAAC,OAAA,CAAQ,OAAA,EAAR,EAAiB,cAAI,IAAA,EAAK;AAAA,SAAA,EAAA,EAbf,IAAI,KAclB,CAAA;AAAA,MAEJ,CAAC,CAAA,EACH,CAAA;AAAA,MACC,aAAA,mBACC,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,SAAA;AAAA,UACJ,IAAA;AAAA,UACA,WAAA;AAAA,UACA,YAAA;AAAA,UACA;AAAA;AAAA,OACF,GACE;AAAA,KAAA,EACN,CAAA;AAAA,EAEJ;AACF;AACA,aAAA,CAAc,WAAA,GAAc,eAAA;;;;"}
|
package/dist/DaysOfTheWeek.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { D as DaysOfTheWeek, D as default } from './DaysOfTheWeek-
|
|
1
|
+
export { D as DaysOfTheWeek, D as default } from './DaysOfTheWeek-Dn6zHxpt.js';
|
|
2
2
|
//# sourceMappingURL=DaysOfTheWeek.js.map
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { createContext, forwardRef, useContext, useId, useState, useMemo } from 'react';
|
|
3
3
|
import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
|
|
4
|
-
import { I as Icon } from './Icon-
|
|
4
|
+
import { I as Icon } from './Icon-BSuTVNaa.js';
|
|
5
5
|
import { c as cx } from './index-tZvMCc77.js';
|
|
6
6
|
import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
|
|
7
7
|
import { useTrackingId } from './useTrackingId.js';
|
|
8
|
-
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-
|
|
8
|
+
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-BlIWftBb.js';
|
|
9
9
|
|
|
10
10
|
import './Details.css';const DetailsContext = createContext({
|
|
11
11
|
id: "",
|
|
@@ -164,4 +164,4 @@ const Details = Object.assign(DetailsElement, {
|
|
|
164
164
|
});
|
|
165
165
|
|
|
166
166
|
export { Details as D, DetailsSummary as a, DetailsContent as b };
|
|
167
|
-
//# sourceMappingURL=Details-
|
|
167
|
+
//# sourceMappingURL=Details-CkaKTRvc.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Details-Bg7QzlOm.js","sources":["../src/components/Details/internal/DetailsContext.tsx","../src/components/Details/internal/DetailsArrow.tsx","../src/components/Details/DetailsSummary.tsx","../src/components/Details/DetailsContent.tsx","../src/components/Details/Details.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type DetailsContextProps = {\n id: string;\n isExpanded: boolean;\n expanded: () => void;\n close: () => void;\n toggle: () => void;\n};\n\nexport const DetailsContext = createContext<DetailsContextProps>({\n id: \"\",\n isExpanded: false,\n expanded: () => undefined,\n close: () => undefined,\n toggle: () => undefined,\n});\n","import { forwardRef, useContext, type ComponentPropsWithoutRef } from \"react\";\nimport Arrow_right from \"@servicetitan/hammer-icon/mdi/round/chevron_right.svg\";\nimport { DetailsContext } from \"./DetailsContext\";\nimport Icon from \"../../Icon\";\n\nimport cx from \"classnames\";\nimport styles from \"../Details.module.scss\";\n\n/**\n * Props for the DetailsArrow component\n * @extends ComponentPropsWithoutRef<\"span\">\n */\nexport type DetailsArrowProps = ComponentPropsWithoutRef<\"span\">;\n\n/**\n * DetailsArrow component for the animated arrow indicator in DetailsSummary.\n *\n * Features:\n * - Animated chevron icon that rotates on expand/collapse\n * - Automatically reflects the current expanded state\n * - Uses consistent icon sizing and styling\n * - Smooth transition animations\n * - Accessible with proper ARIA context\n *\n * @example\n * <DetailsArrow className=\"custom-arrow\" />\n */\nexport const DetailsArrow = forwardRef<HTMLSpanElement, DetailsArrowProps>(\n function DetailsArrow({ className: classNameProp, ...rest }, ref) {\n const { isExpanded } = useContext(DetailsContext);\n\n const className = cx(\n styles.arrow,\n { [styles[\"is-expanded\"]]: isExpanded },\n classNameProp,\n );\n\n return (\n <span className={className} ref={ref} {...rest}>\n <Icon size=\"large\" svg={Arrow_right} />\n </span>\n );\n },\n);\n","import {\n forwardRef,\n useContext,\n type ComponentPropsWithoutRef,\n type MouseEventHandler,\n} from \"react\";\nimport { DataTrackingId } from \"../../types\";\nimport { DetailsContext } from \"./internal/DetailsContext\";\nimport { childrenToString } from \"../../internal/functions\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DetailsArrow } from \"./internal/DetailsArrow\";\n\nimport cx from \"classnames\";\nimport styles from \"./Details.module.scss\";\n\n/**\n * Props for the DetailsSummary component\n * @extends ComponentPropsWithoutRef<\"button\">\n */\nexport type DetailsSummaryProps = ComponentPropsWithoutRef<\"button\"> &\n DataTrackingId;\n\n/**\n * DetailsSummary component for the clickable header of a Details section.\n *\n * Features:\n * - Clickable button that toggles the Details expanded state\n * - Automatic ARIA attributes for accessibility\n * - Includes animated arrow indicator\n * - Supports custom onClick handlers\n * - Keyboard navigation support (Enter, Space)\n * - Styled with consistent typography and spacing\n *\n * @example\n * <Details.Summary onClick={() => console.log('Summary clicked')}>\n * Click to expand content\n * </Details.Summary>\n */\nexport const DetailsSummary = forwardRef<\n HTMLButtonElement,\n DetailsSummaryProps\n>(function DetailsSummary(\n { children, onClick: onClickProp, className: classNameProp, ...rest },\n ref,\n) {\n const { id, isExpanded, toggle } = useContext(DetailsContext);\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (...args) => {\n onClickProp?.(...args);\n toggle();\n };\n\n const data = {\n children: childrenToString(children),\n };\n\n const trackingId = useTrackingId({\n name: \"DetailsSummary\",\n data,\n hasOverride: !!rest[\"data-tracking-id\"],\n });\n\n const className = cx(styles.summary, classNameProp);\n\n return (\n <button\n data-tracking-id={trackingId}\n data-anv=\"details-summary\"\n aria-controls={id}\n aria-expanded={isExpanded}\n className={className}\n onClick={handleClick}\n ref={ref}\n {...rest}\n >\n <DetailsArrow />\n {children}\n </button>\n );\n});\n","import { forwardRef, useContext, type ComponentPropsWithoutRef } from \"react\";\nimport { DetailsContext } from \"./internal/DetailsContext\";\n\nimport cx from \"classnames\";\nimport styles from \"./Details.module.scss\";\n\n/**\n * Props for the DetailsContent component\n * @extends ComponentPropsWithoutRef<\"div\">\n */\nexport type DetailsContentProps = ComponentPropsWithoutRef<\"div\"> & {\n /**\n * Fixed height for the content area\n */\n height?: string | number;\n /**\n * Maximum height for the content area\n */\n maxHeight?: string | number;\n};\n\n/**\n * DetailsContent component for the expandable content area of a Details section.\n *\n * Features:\n * - Expandable and collapsible content area\n * - Smooth animations for height transitions\n * - Configurable height and maxHeight constraints\n * - Automatic overflow handling when height is constrained\n * - Proper ARIA associations with the summary\n * - Responsive design with flexible layout\n *\n * @example\n * <Details.Content maxHeight={300}>\n * <p>This content will be constrained to 300px max height</p>\n * </Details.Content>\n */\nexport const DetailsContent = forwardRef<HTMLDivElement, DetailsContentProps>(\n function DetailsContent(\n {\n className: classNameProp,\n children,\n height,\n maxHeight,\n style: styleProp,\n ...rest\n },\n ref,\n ) {\n const { id, isExpanded } = useContext(DetailsContext);\n\n const style = {\n height,\n maxHeight,\n ...(height || maxHeight ? { overflow: \"auto\" } : {}),\n ...styleProp,\n };\n\n return (\n <div\n data-anv=\"details-content\"\n id={id}\n className={cx(styles[\"content-wrapper\"], {\n [styles.expanded]: isExpanded,\n })}\n ref={ref}\n >\n <div className={styles.content}>\n <div className={classNameProp} style={style} {...rest}>\n {children}\n </div>\n </div>\n </div>\n );\n },\n);\n","import {\n ComponentPropsWithoutRef,\n Ref,\n forwardRef,\n useId,\n useMemo,\n useState,\n} from \"react\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { DetailsSummary } from \"./DetailsSummary\";\nimport { DetailsContent } from \"./DetailsContent\";\nimport { DetailsContext } from \"./internal/DetailsContext\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport cx from \"classnames\";\nimport styles from \"./Details.module.scss\";\n\n/**\n * Props for the Details component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends LayoutUtilProps\n */\nexport type DetailsProps = ComponentPropsWithoutRef<\"div\"> &\n LayoutUtilProps & {\n /**\n * Determines the controlled expanded state of the details.\n * @remarks Use this to make the details expanded state controlled.\n * @default false\n */\n expanded?: boolean;\n /**\n * Determines the default expanded state of the details.\n * @remarks Use this to make the details expanded state uncontrolled.\n * @default false\n */\n defaultExpanded?: boolean;\n };\n\nconst DetailsElement = forwardRef(\n (props: DetailsProps, ref: Ref<HTMLDivElement>) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n children,\n id: idProp,\n expanded: expandedControlled,\n defaultExpanded = false,\n style,\n className,\n ...rest\n } = componentProps;\n const id = useId();\n const [isExpanded, setIsOpen] = useState(defaultExpanded);\n\n function expanded() {\n setIsOpen(true);\n }\n\n function close() {\n setIsOpen(false);\n }\n\n function toggle() {\n setIsOpen((prevIsOpen: boolean) => !prevIsOpen);\n }\n\n const value = useMemo(\n () => ({\n id: idProp != null ? idProp : id,\n isExpanded:\n expandedControlled != null ? expandedControlled : isExpanded,\n expanded,\n close,\n toggle,\n }),\n [id, idProp, isExpanded, expandedControlled],\n );\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n return (\n <DetailsContext.Provider value={value}>\n <div\n data-anv=\"details\"\n ref={ref}\n className={cx(styles.details, className)}\n style={styleCombined}\n {...rest}\n >\n {children}\n </div>\n </DetailsContext.Provider>\n );\n },\n);\n\nDetailsElement.displayName = \"Details\";\n\n/**\n * Details component for creating expandable/collapsible content sections.\n *\n * Features:\n * - Expandable and collapsible content sections\n * - Controlled and uncontrolled state management\n * - Accessible with proper ARIA attributes\n * - Smooth animations for expand/collapse\n * - Keyboard navigation support\n * - Layout utility props for positioning and spacing\n * - Compound component pattern with Summary, Content, and Arrow sub-components\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Details defaultExpanded>\n * <Details.Summary>Click to expand</Details.Summary>\n * <Details.Content>This content is now visible</Details.Content>\n * </Details>\n */\nexport const Details = Object.assign(DetailsElement, {\n Summary: DetailsSummary,\n Content: DetailsContent,\n});\n"],"names":["DetailsArrow","Arrow_right","DetailsSummary","DetailsContent"],"mappings":";;;;;;;;;AAUO,MAAM,iBAAiB,aAAA,CAAmC;AAAA,EAC/D,EAAA,EAAI,EAAA;AAAA,EACJ,UAAA,EAAY,KAAA;AAAA,EACZ,UAAU,MAAM,MAAA;AAAA,EAChB,OAAO,MAAM,MAAA;AAAA,EACb,QAAQ,MAAM;AAChB,CAAC,CAAA;;;;;;;;;;;;;;;;;ACWM,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,cAAa,EAAE,SAAA,EAAW,eAAe,GAAG,IAAA,IAAQ,GAAA,EAAK;AAChE,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,UAAA,CAAW,cAAc,CAAA;AAEhD,IAAA,MAAM,SAAA,GAAY,EAAA;AAAA,MAChB,MAAA,CAAO,KAAA;AAAA,MACP,EAAE,CAAC,MAAA,CAAO,aAAa,CAAC,GAAG,UAAA,EAAW;AAAA,MACtC;AAAA,KACF;AAEA,IAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAsB,GAAA,EAAW,GAAG,IAAA,EACxC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,GAAA,EAAKC,eAAA,EAAa,CAAA,EACvC,CAAA;AAAA,EAEJ;AACF,CAAA;;ACLO,MAAM,cAAA,GAAiB,UAAA,CAG5B,SAASC,eAAAA,CACT,EAAE,QAAA,EAAU,OAAA,EAAS,WAAA,EAAa,SAAA,EAAW,aAAA,EAAe,GAAG,IAAA,IAC/D,GAAA,EACA;AACA,EAAA,MAAM,EAAE,EAAA,EAAI,UAAA,EAAY,MAAA,EAAO,GAAI,WAAW,cAAc,CAAA;AAE5D,EAAA,MAAM,WAAA,GAAoD,IAAI,IAAA,KAAS;AACrE,IAAA,WAAA,GAAc,GAAG,IAAI,CAAA;AACrB,IAAA,MAAA,EAAO;AAAA,EACT,CAAA;AAEA,EAAA,MAAM,IAAA,GAAO;AAAA,IACX,QAAA,EAAU,iBAAiB,QAAQ;AAAA,GACrC;AAEA,EAAA,MAAM,aAAa,aAAA,CAAc;AAAA,IAC/B,IAAA,EAAM,gBAAA;AAAA,IACN,IAAA;AAAA,IACA,WAAA,EAAa,CAAC,CAAC,IAAA,CAAK,kBAAkB;AAAA,GACvC,CAAA;AAED,EAAA,MAAM,SAAA,GAAY,EAAA,CAAG,MAAA,CAAO,OAAA,EAAS,aAAa,CAAA;AAElD,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,kBAAA,EAAkB,UAAA;AAAA,MAClB,UAAA,EAAS,iBAAA;AAAA,MACT,eAAA,EAAe,EAAA;AAAA,MACf,eAAA,EAAe,UAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACT,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA;AAAA,QACb;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;AC1CM,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASC,eAAAA,CACP;AAAA,IACE,SAAA,EAAW,aAAA;AAAA,IACX,QAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,EAAE,EAAA,EAAI,UAAA,EAAW,GAAI,WAAW,cAAc,CAAA;AAEpD,IAAA,MAAM,KAAA,GAAQ;AAAA,MACZ,MAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAI,MAAA,IAAU,SAAA,GAAY,EAAE,QAAA,EAAU,MAAA,KAAW,EAAC;AAAA,MAClD,GAAG;AAAA,KACL;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAS,iBAAA;AAAA,QACT,EAAA;AAAA,QACA,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,iBAAiB,CAAA,EAAG;AAAA,UACvC,CAAC,MAAA,CAAO,QAAQ,GAAG;AAAA,SACpB,CAAA;AAAA,QACD,GAAA;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EAAe,KAAA,EAAe,GAAG,IAAA,EAC9C,UACH,CAAA,EACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;ACrCA,MAAM,cAAA,GAAiB,UAAA;AAAA,EACrB,CAAC,OAAqB,GAAA,KAA6B;AACjD,IAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AACjE,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,EAAA,EAAI,MAAA;AAAA,MACJ,QAAA,EAAU,kBAAA;AAAA,MACV,eAAA,GAAkB,KAAA;AAAA,MAClB,KAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,cAAA;AACJ,IAAA,MAAM,KAAK,KAAA,EAAM;AACjB,IAAA,MAAM,CAAC,UAAA,EAAY,SAAS,CAAA,GAAI,SAAS,eAAe,CAAA;AAExD,IAAA,SAAS,QAAA,GAAW;AAClB,MAAA,SAAA,CAAU,IAAI,CAAA;AAAA,IAChB;AAEA,IAAA,SAAS,KAAA,GAAQ;AACf,MAAA,SAAA,CAAU,KAAK,CAAA;AAAA,IACjB;AAEA,IAAA,SAAS,MAAA,GAAS;AAChB,MAAA,SAAA,CAAU,CAAC,UAAA,KAAwB,CAAC,UAAU,CAAA;AAAA,IAChD;AAEA,IAAA,MAAM,KAAA,GAAQ,OAAA;AAAA,MACZ,OAAO;AAAA,QACL,EAAA,EAAI,MAAA,IAAU,IAAA,GAAO,MAAA,GAAS,EAAA;AAAA,QAC9B,UAAA,EACE,kBAAA,IAAsB,IAAA,GAAO,kBAAA,GAAqB,UAAA;AAAA,QACpD,QAAA;AAAA,QACA,KAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,EAAA,EAAI,MAAA,EAAQ,UAAA,EAAY,kBAAkB;AAAA,KAC7C;AAEA,IAAA,MAAM,aAAA,GAAgB;AAAA,MACpB,GAAG,KAAA;AAAA,MACH,GAAG;AAAA,KACL;AAEA,IAAA,uBACE,GAAA,CAAC,cAAA,CAAe,QAAA,EAAf,EAAwB,KAAA,EACvB,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAS,SAAA;AAAA,QACT,GAAA;AAAA,QACA,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,OAAA,EAAS,SAAS,CAAA;AAAA,QACvC,KAAA,EAAO,aAAA;AAAA,QACN,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF,CAAA;AAEA,cAAA,CAAe,WAAA,GAAc,SAAA;AAqBtB,MAAM,OAAA,GAAU,MAAA,CAAO,MAAA,CAAO,cAAA,EAAgB;AAAA,EACnD,OAAA,EAAS,cAAA;AAAA,EACT,OAAA,EAAS;AACX,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"Details-CkaKTRvc.js","sources":["../src/components/Details/internal/DetailsContext.tsx","../src/components/Details/internal/DetailsArrow.tsx","../src/components/Details/DetailsSummary.tsx","../src/components/Details/DetailsContent.tsx","../src/components/Details/Details.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type DetailsContextProps = {\n id: string;\n isExpanded: boolean;\n expanded: () => void;\n close: () => void;\n toggle: () => void;\n};\n\nexport const DetailsContext = createContext<DetailsContextProps>({\n id: \"\",\n isExpanded: false,\n expanded: () => undefined,\n close: () => undefined,\n toggle: () => undefined,\n});\n","import { forwardRef, useContext, type ComponentPropsWithoutRef } from \"react\";\nimport Arrow_right from \"@servicetitan/hammer-icon/mdi/round/chevron_right.svg\";\nimport { DetailsContext } from \"./DetailsContext\";\nimport Icon from \"../../Icon\";\n\nimport cx from \"classnames\";\nimport styles from \"../Details.module.scss\";\n\n/**\n * Props for the DetailsArrow component\n * @extends ComponentPropsWithoutRef<\"span\">\n */\nexport type DetailsArrowProps = ComponentPropsWithoutRef<\"span\">;\n\n/**\n * DetailsArrow component for the animated arrow indicator in DetailsSummary.\n *\n * Features:\n * - Animated chevron icon that rotates on expand/collapse\n * - Automatically reflects the current expanded state\n * - Uses consistent icon sizing and styling\n * - Smooth transition animations\n * - Accessible with proper ARIA context\n *\n * @example\n * <DetailsArrow className=\"custom-arrow\" />\n */\nexport const DetailsArrow = forwardRef<HTMLSpanElement, DetailsArrowProps>(\n function DetailsArrow({ className: classNameProp, ...rest }, ref) {\n const { isExpanded } = useContext(DetailsContext);\n\n const className = cx(\n styles.arrow,\n { [styles[\"is-expanded\"]]: isExpanded },\n classNameProp,\n );\n\n return (\n <span className={className} ref={ref} {...rest}>\n <Icon size=\"large\" svg={Arrow_right} />\n </span>\n );\n },\n);\n","import {\n forwardRef,\n useContext,\n type ComponentPropsWithoutRef,\n type MouseEventHandler,\n} from \"react\";\nimport { DataTrackingId } from \"../../types\";\nimport { DetailsContext } from \"./internal/DetailsContext\";\nimport { childrenToString } from \"../../internal/functions\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DetailsArrow } from \"./internal/DetailsArrow\";\n\nimport cx from \"classnames\";\nimport styles from \"./Details.module.scss\";\n\n/**\n * Props for the DetailsSummary component\n * @extends ComponentPropsWithoutRef<\"button\">\n */\nexport type DetailsSummaryProps = ComponentPropsWithoutRef<\"button\"> &\n DataTrackingId;\n\n/**\n * DetailsSummary component for the clickable header of a Details section.\n *\n * Features:\n * - Clickable button that toggles the Details expanded state\n * - Automatic ARIA attributes for accessibility\n * - Includes animated arrow indicator\n * - Supports custom onClick handlers\n * - Keyboard navigation support (Enter, Space)\n * - Styled with consistent typography and spacing\n *\n * @example\n * <Details.Summary onClick={() => console.log('Summary clicked')}>\n * Click to expand content\n * </Details.Summary>\n */\nexport const DetailsSummary = forwardRef<\n HTMLButtonElement,\n DetailsSummaryProps\n>(function DetailsSummary(\n { children, onClick: onClickProp, className: classNameProp, ...rest },\n ref,\n) {\n const { id, isExpanded, toggle } = useContext(DetailsContext);\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (...args) => {\n onClickProp?.(...args);\n toggle();\n };\n\n const data = {\n children: childrenToString(children),\n };\n\n const trackingId = useTrackingId({\n name: \"DetailsSummary\",\n data,\n hasOverride: !!rest[\"data-tracking-id\"],\n });\n\n const className = cx(styles.summary, classNameProp);\n\n return (\n <button\n data-tracking-id={trackingId}\n data-anv=\"details-summary\"\n aria-controls={id}\n aria-expanded={isExpanded}\n className={className}\n onClick={handleClick}\n ref={ref}\n {...rest}\n >\n <DetailsArrow />\n {children}\n </button>\n );\n});\n","import { forwardRef, useContext, type ComponentPropsWithoutRef } from \"react\";\nimport { DetailsContext } from \"./internal/DetailsContext\";\n\nimport cx from \"classnames\";\nimport styles from \"./Details.module.scss\";\n\n/**\n * Props for the DetailsContent component\n * @extends ComponentPropsWithoutRef<\"div\">\n */\nexport type DetailsContentProps = ComponentPropsWithoutRef<\"div\"> & {\n /**\n * Fixed height for the content area\n */\n height?: string | number;\n /**\n * Maximum height for the content area\n */\n maxHeight?: string | number;\n};\n\n/**\n * DetailsContent component for the expandable content area of a Details section.\n *\n * Features:\n * - Expandable and collapsible content area\n * - Smooth animations for height transitions\n * - Configurable height and maxHeight constraints\n * - Automatic overflow handling when height is constrained\n * - Proper ARIA associations with the summary\n * - Responsive design with flexible layout\n *\n * @example\n * <Details.Content maxHeight={300}>\n * <p>This content will be constrained to 300px max height</p>\n * </Details.Content>\n */\nexport const DetailsContent = forwardRef<HTMLDivElement, DetailsContentProps>(\n function DetailsContent(\n {\n className: classNameProp,\n children,\n height,\n maxHeight,\n style: styleProp,\n ...rest\n },\n ref,\n ) {\n const { id, isExpanded } = useContext(DetailsContext);\n\n const style = {\n height,\n maxHeight,\n ...(height || maxHeight ? { overflow: \"auto\" } : {}),\n ...styleProp,\n };\n\n return (\n <div\n data-anv=\"details-content\"\n id={id}\n className={cx(styles[\"content-wrapper\"], {\n [styles.expanded]: isExpanded,\n })}\n ref={ref}\n >\n <div className={styles.content}>\n <div className={classNameProp} style={style} {...rest}>\n {children}\n </div>\n </div>\n </div>\n );\n },\n);\n","import {\n ComponentPropsWithoutRef,\n Ref,\n forwardRef,\n useId,\n useMemo,\n useState,\n} from \"react\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { DetailsSummary } from \"./DetailsSummary\";\nimport { DetailsContent } from \"./DetailsContent\";\nimport { DetailsContext } from \"./internal/DetailsContext\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport cx from \"classnames\";\nimport styles from \"./Details.module.scss\";\n\n/**\n * Props for the Details component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends LayoutUtilProps\n */\nexport type DetailsProps = ComponentPropsWithoutRef<\"div\"> &\n LayoutUtilProps & {\n /**\n * Determines the controlled expanded state of the details.\n * @remarks Use this to make the details expanded state controlled.\n * @default false\n */\n expanded?: boolean;\n /**\n * Determines the default expanded state of the details.\n * @remarks Use this to make the details expanded state uncontrolled.\n * @default false\n */\n defaultExpanded?: boolean;\n };\n\nconst DetailsElement = forwardRef(\n (props: DetailsProps, ref: Ref<HTMLDivElement>) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n children,\n id: idProp,\n expanded: expandedControlled,\n defaultExpanded = false,\n style,\n className,\n ...rest\n } = componentProps;\n const id = useId();\n const [isExpanded, setIsOpen] = useState(defaultExpanded);\n\n function expanded() {\n setIsOpen(true);\n }\n\n function close() {\n setIsOpen(false);\n }\n\n function toggle() {\n setIsOpen((prevIsOpen: boolean) => !prevIsOpen);\n }\n\n const value = useMemo(\n () => ({\n id: idProp != null ? idProp : id,\n isExpanded:\n expandedControlled != null ? expandedControlled : isExpanded,\n expanded,\n close,\n toggle,\n }),\n [id, idProp, isExpanded, expandedControlled],\n );\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n return (\n <DetailsContext.Provider value={value}>\n <div\n data-anv=\"details\"\n ref={ref}\n className={cx(styles.details, className)}\n style={styleCombined}\n {...rest}\n >\n {children}\n </div>\n </DetailsContext.Provider>\n );\n },\n);\n\nDetailsElement.displayName = \"Details\";\n\n/**\n * Details component for creating expandable/collapsible content sections.\n *\n * Features:\n * - Expandable and collapsible content sections\n * - Controlled and uncontrolled state management\n * - Accessible with proper ARIA attributes\n * - Smooth animations for expand/collapse\n * - Keyboard navigation support\n * - Layout utility props for positioning and spacing\n * - Compound component pattern with Summary, Content, and Arrow sub-components\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Details defaultExpanded>\n * <Details.Summary>Click to expand</Details.Summary>\n * <Details.Content>This content is now visible</Details.Content>\n * </Details>\n */\nexport const Details = Object.assign(DetailsElement, {\n Summary: DetailsSummary,\n Content: DetailsContent,\n});\n"],"names":["DetailsArrow","Arrow_right","DetailsSummary","DetailsContent"],"mappings":"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"}
|
package/dist/Details.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { D as Details, b as DetailsContent, a as DetailsSummary, D as default } from './Details-
|
|
1
|
+
export { D as Details, b as DetailsContent, a as DetailsSummary, D as default } from './Details-CkaKTRvc.js';
|
|
2
2
|
//# sourceMappingURL=Details.js.map
|
|
@@ -2,12 +2,12 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import { useContext, forwardRef, useRef, useState, useId, useCallback, useEffect } from 'react';
|
|
3
3
|
import { S as SvgClose } from './close-DZj38AEh.js';
|
|
4
4
|
import { c as cx } from './index-tZvMCc77.js';
|
|
5
|
-
import { T as Text } from './Text-
|
|
6
|
-
import { B as Button } from './Button-
|
|
5
|
+
import { T as Text } from './Text-kPA-VzsB.js';
|
|
6
|
+
import { B as Button } from './Button-92_FKAyV.js';
|
|
7
7
|
import { D as DialogContext } from './DrawerContext-D4tWTLVf.js';
|
|
8
8
|
import { useTrackingId } from './useTrackingId.js';
|
|
9
9
|
import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
|
|
10
|
-
import { a as ToastProvider, b as ToasterPopover, c as ToasterContent } from './Toaster-
|
|
10
|
+
import { a as ToastProvider, b as ToasterPopover, c as ToasterContent } from './Toaster-Dg7M4W4U.js';
|
|
11
11
|
import { u as useDialogTransitionStates, a as useKeyboardFocusables, b as useDialogScrollLock, c as useInitialFocus } from './useInitialFocus-Cl_Txu7W.js';
|
|
12
12
|
import { r as registerLayer, a as unregisterLayer, b as useOnClickOutside } from './useOnClickOutside-BDzuUjmY.js';
|
|
13
13
|
import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
|
|
@@ -382,4 +382,4 @@ const Dialog = Object.assign(DialogElement, {
|
|
|
382
382
|
});
|
|
383
383
|
|
|
384
384
|
export { Dialog as D, DialogCancelButton as a, DialogContent as b, DialogFooter as c, DialogHeader as d };
|
|
385
|
-
//# sourceMappingURL=Dialog-
|
|
385
|
+
//# sourceMappingURL=Dialog-CxH4Vnbb.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog-fJClGTI6.js","sources":["../src/components/Dialog/internal/useDialogContext.ts","../src/components/Dialog/DialogCancelButton.tsx","../src/components/Dialog/DialogHeader.tsx","../src/components/Dialog/DialogFooter.tsx","../src/components/Dialog/DialogContent.tsx","../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { DialogContext } from \"./DialogContext\";\n\nexport function useDialogContext() {\n const context = useContext(DialogContext);\n if (!context) {\n throw new Error(\n \"useDialogContext must be used within a DialogContextProvider\",\n );\n }\n return context;\n}\n","import { MouseEvent, forwardRef } from \"react\";\nimport { Button, ButtonProps } from \"../Button\";\nimport { useDialogContext } from \"./internal/useDialogContext\";\nimport { DataTrackingId } from \"../../types\";\nimport { useTrackingId } from \"../../hooks\";\n\n/**\n * Props for the DialogCancelButton component\n * @extends ButtonProps\n */\nexport type DialogCancelButtonProps = ButtonProps & DataTrackingId;\n\n/**\n * DialogCancelButton component for cancel/close actions in a Dialog.\n *\n * Features:\n * - Button that automatically closes the dialog when clicked\n * - Extends all Button component props and functionality\n * - Proper accessibility with close dialog semantics\n * - Automatic focus management\n * - Consistent styling with other dialog elements\n *\n * @example\n * <Dialog.CancelButton appearance=\"ghost\">Cancel</Dialog.CancelButton>\n */\nexport const DialogCancelButton = forwardRef<\n HTMLButtonElement,\n DialogCancelButtonProps\n>((props, ref) => {\n const { onClick, ...rest } = props;\n const { close } = useDialogContext();\n const data = {\n title: props.title,\n appearance: props.appearance,\n size: props.size,\n type: props.type,\n };\n\n const trackingId = useTrackingId({\n name: \"DialogCancelButton\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n const onClickHandler = (e: MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n close();\n };\n return (\n <Button\n aria-label=\"Close dialog\"\n data-anv=\"dialog-cancel-button\"\n data-tracking-id={trackingId}\n onClick={onClickHandler}\n ref={ref}\n {...rest}\n />\n );\n});\n\nDialogCancelButton.displayName = \"DialogCancelButton\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport cx from \"classnames\";\n\nimport { Text } from \"../Text\";\nimport { DialogCancelButton } from \"./DialogCancelButton\";\n\nimport styles from \"./Dialog.module.scss\";\nimport { childrenToString } from \"../../internal/functions\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DataTrackingId } from \"../../types\";\n\n/**\n * Props for the DialogHeader component\n * @extends ComponentPropsWithoutRef<\"header\">\n */\nexport type DialogHeaderProps = ComponentPropsWithoutRef<\"header\"> &\n DataTrackingId;\n\n/**\n * DialogHeader component for the header section of a Dialog.\n *\n * Features:\n * - Displays dialog title with headline typography\n * - Includes close button with proper accessibility\n * - Sticky positioning for long content\n * - Consistent spacing and styling\n * - Automatic focus management\n *\n * @example\n * <Dialog.Header>Confirm Delete</Dialog.Header>\n */\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n (props: DialogHeaderProps, ref) => {\n const { children, className, ...rest } = props;\n const data = {\n children: childrenToString(props.children),\n };\n\n const trackingId = useTrackingId({\n name: \"Dialog\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n\n const headerClassNames = cx(className, styles[\"header\"]);\n\n return (\n <header\n className={headerClassNames}\n data-anv=\"dialog-header\"\n data-tracking-id={trackingId}\n ref={ref}\n {...rest}\n >\n <Text variant=\"headline\" el=\"h1\">\n {children}\n </Text>\n <span className={styles[\"close-container\"]}>\n <DialogCancelButton\n className={styles[\"close-button\"]}\n size=\"small\"\n appearance=\"ghost\"\n aria-label=\"Close dialog\"\n icon={Close}\n />\n </span>\n </header>\n );\n },\n);\n\nDialogHeader.displayName = \"DialogHeader\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"./Dialog.module.scss\";\n\n/**\n * Props for the DialogFooter component\n * @extends ComponentPropsWithoutRef<\"footer\">\n */\nexport type DialogFooterProps = ComponentPropsWithoutRef<\"footer\"> & {\n /**\n * @default false\n */\n sticky?: boolean;\n};\n\n/**\n * DialogFooter component for the footer section of a Dialog.\n *\n * Features:\n * - Container for dialog action buttons\n * - Optional sticky positioning for long content\n * - Consistent spacing and alignment\n * - Right-aligned button layout by default\n * - Flexible content area for custom layouts\n *\n * @example\n * <Dialog.Footer sticky>\n * <Dialog.CancelButton>Cancel</Dialog.CancelButton>\n * <Button appearance=\"primary\">Save</Button>\n * </Dialog.Footer>\n */\nexport const DialogFooter = forwardRef<HTMLElement, DialogFooterProps>(\n (props, ref) => {\n const { children, className, sticky = false, ...rest } = props;\n\n const footerClassNames = cx(styles[\"footer\"], className, {\n [styles[\"sticky\"]]: sticky,\n });\n\n return (\n <footer\n className={footerClassNames}\n data-anv=\"dialog-footer\"\n ref={ref}\n {...rest}\n >\n {children}\n </footer>\n );\n },\n);\n\nDialogFooter.displayName = \"DialogFooter\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"./Dialog.module.scss\";\n\n/**\n * Props for the DialogContent component\n * @extends ComponentPropsWithoutRef<\"div\">\n */\nexport type DialogContentProps = ComponentPropsWithoutRef<\"div\">;\n\n/**\n * DialogContent component for the main content area of a Dialog.\n *\n * Features:\n * - Main content container for dialog body\n * - Flexible height with overflow handling\n * - Consistent padding and spacing\n * - Responsive design\n * - Proper content scrolling for long content\n *\n * @example\n * <Dialog.Content>\n * <p>This is the main content of the dialog.</p>\n * </Dialog.Content>\n */\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n (props, ref) => {\n const { children, className, ...rest } = props;\n\n const contentClassNames = cx(styles[\"content\"], className);\n\n return (\n <div\n className={contentClassNames}\n data-anv=\"dialog-content\"\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n\nDialogContent.displayName = \"DialogContent\";\n","import {\n ComponentPropsWithoutRef,\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n KeyboardEvent,\n} from \"react\";\nimport { DialogHeader } from \"./DialogHeader\";\nimport { DialogFooter } from \"./DialogFooter\";\nimport { DialogContent } from \"./DialogContent\";\nimport { DialogCancelButton } from \"./DialogCancelButton\";\nimport {\n OpenCloseTransitionStateEffects,\n useDialogScrollLock,\n useDialogTransitionStates,\n useKeyboardFocusables,\n useOnClickOutside,\n} from \"../../internal/hooks\";\nimport {\n FocusableElement,\n DisableCloseOnEscapeOrClickProps,\n Size,\n} from \"../../types\";\nimport { registerLayer, unregisterLayer } from \"../../internal/utils\";\nimport { DialogContext, DialogContextProps } from \"./internal/DialogContext\";\nimport styles from \"./Dialog.module.scss\";\nimport { useMergeRefs } from \"../../hooks\";\nimport cx from \"classnames\";\n\nimport { ToastProvider } from \"../Toast/internal/ToastProvider\";\nimport { ToasterPopover } from \"../Toast/internal/ToasterPopover\";\nimport { ToasterContent } from \"../Toast/internal/Toaster\";\nimport { useInitialFocus } from \"./internal/useInitialFocus\";\n\n/**\n * Props for the Dialog component\n * @extends ComponentPropsWithoutRef<\"dialog\">\n * @extends DialogTransitionStateEffects\n * @extends DisableCloseOnEscapeOrClickProps\n */\nexport type DialogProps = ComponentPropsWithoutRef<\"dialog\"> &\n OpenCloseTransitionStateEffects &\n DisableCloseOnEscapeOrClickProps & {\n /**\n * @default false\n */\n fullScreen?: boolean;\n /**\n * @default \"medium\"\n */\n size?: Extract<Size, \"medium\" | \"large\">;\n\n /**\n * @default false\n */\n open?: boolean;\n onClose?: () => void;\n /**\n * @deprecated - use onOpenAnimationStart or onOpenAnimationComplete instead\n */\n onOpen?: () => void;\n /**\n * @deprecated - use onOpenAnimationStart or onOpenAnimationComplete instead\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * Callback when clicking outside the dialog\n */\n onClickOutside?: (e: globalThis.MouseEvent) => void;\n /**\n * Enables scroll chaining\n * @link https://developer.mozilla.org/en-US/docs/Glossary/Scroll_chaining\n */\n enableScrollChaining?: boolean;\n /**\n * Given an array of focusable elements, return the initial focus target.\n * @param focusables - The focusable elements to pick from\n * @returns The initial focus target\n */\n initialFocusResolver?: (focusables: FocusableElement[]) => FocusableElement;\n };\n\nexport const DialogElement = forwardRef<HTMLDialogElement, DialogProps>(\n (props, ref) => {\n const {\n className,\n open = false,\n children,\n onOpen,\n onOpenChange,\n onClose,\n onKeyDown,\n fullScreen = false,\n disableCloseOnEscape = false,\n onClickOutside,\n disableCloseOnClickOutside = false,\n size,\n enableScrollChaining,\n onOpenAnimationStart,\n onOpenAnimationComplete,\n onCloseAnimationStart,\n onCloseAnimationComplete,\n initialFocusResolver,\n ...rest\n } = props;\n\n const elRef = useRef<HTMLDialogElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const toasterRef = useRef<HTMLDivElement>(null);\n const [hasOpenPopover, setHasOpenPopover] =\n useState<DialogContextProps[\"hasOpenPopover\"]>(false);\n const id = useId();\n\n const { state, isOpenOrOpening } = useDialogTransitionStates(elRef, open, {\n onOpenAnimationStart: useCallback(() => {\n onOpenAnimationStart?.();\n }, [onOpenAnimationStart]),\n onOpenAnimationComplete: useCallback(() => {\n onOpenAnimationComplete?.();\n onOpen?.(); // DEPRECATED\n }, [onOpen, onOpenAnimationComplete]),\n onCloseAnimationStart: useCallback(() => {\n onCloseAnimationStart?.();\n }, [onCloseAnimationStart]),\n onCloseAnimationComplete: useCallback(() => {\n onCloseAnimationComplete?.();\n }, [onCloseAnimationComplete]),\n });\n\n // DEPRECATED\n const initial = useRef(true);\n useEffect(() => {\n if (initial.current) {\n initial.current = false;\n } else {\n onOpenChange?.(isOpenOrOpening);\n }\n }, [id, onOpenChange, isOpenOrOpening]);\n\n const classNames = cx([styles[\"dialog\"]], className, {\n [styles[\"closing\"]]: state === \"closing\",\n [styles[\"fullscreen\"]]: fullScreen,\n [styles[\"large\"]]: size === \"large\",\n });\n\n const { focusables } = useKeyboardFocusables(contentRef, {\n observeChange: true,\n });\n\n useDialogScrollLock({\n open: isOpenOrOpening,\n id,\n enableScrollChaining,\n elementRef: elRef,\n });\n\n // Register/unregister with layer manager for proper stacking\n useEffect(() => {\n if (open) {\n registerLayer(id);\n } else {\n unregisterLayer(id);\n }\n\n // Cleanup when component unmounts\n return () => {\n unregisterLayer(id);\n };\n }, [open, id]);\n\n useOnClickOutside({\n onOutsidePress: (e) => {\n if (!open) return;\n onClickOutside?.(e);\n },\n targets: [\n contentRef.current as HTMLElement,\n toasterRef.current as HTMLElement,\n ],\n onClose: () => {\n if (disableCloseOnClickOutside || !open) return;\n onClose?.();\n },\n layerId: id,\n });\n\n const computeFocus = useCallback((focusables: FocusableElement[]) => {\n return (\n focusables.find(\n (focusable) => focusable.dataset.anv !== \"dialog-cancel-button\",\n ) || focusables[0]\n );\n }, []);\n\n useInitialFocus(elRef, {\n computeFocus: initialFocusResolver || computeFocus,\n });\n\n const onKeyDownHandler = (e: KeyboardEvent<HTMLDialogElement>) => {\n onKeyDown?.(e);\n if (e.code === \"Escape\") {\n e.preventDefault();\n if (disableCloseOnEscape) return;\n if (hasOpenPopover) return;\n onClose?.();\n return;\n }\n\n if (e.code === \"Tab\") {\n if (e.shiftKey && e.target === focusables?.[0]) {\n e.preventDefault();\n (focusables[focusables.length - 1] as HTMLElement)?.focus();\n return;\n }\n if (e.target === focusables?.[focusables.length - 1] && !e.shiftKey) {\n e.preventDefault();\n focusables[0].focus();\n return;\n }\n }\n };\n\n return (\n // dialog element does seem to be interactive on MDN guideline\n <dialog\n className={classNames}\n data-anv=\"dialog\"\n data-anv-scroll-chaining={enableScrollChaining}\n data-anv-transition-state={state}\n ref={useMergeRefs([ref, elRef])}\n onKeyDown={onKeyDownHandler}\n {...rest}\n >\n <ToastProvider isDialogToaster={open}>\n <ToasterPopover>\n <ToasterContent id=\"dialog-toaster\" ref={toasterRef} />\n </ToasterPopover>\n </ToastProvider>\n <DialogContext.Provider\n value={{\n close: () => onClose?.(),\n ref: elRef,\n hasOpenPopover,\n setHasOpenPopover,\n }}\n >\n <section\n ref={contentRef}\n className={styles[\"container\"]}\n data-open={open}\n >\n {children}\n </section>\n </DialogContext.Provider>\n </dialog>\n );\n },\n);\n\nDialogElement.displayName = \"Dialog\";\n\n/**\n * Dialog component for creating modal dialogs and overlays.\n *\n * Features:\n * - Modal dialog with backdrop overlay\n * - Controlled and uncontrolled open state\n * - Smooth open/close animations\n * - Keyboard navigation and focus management\n * - Escape key and click outside to close\n * - Multiple size variants (medium, large, fullscreen)\n * - Scroll chaining support\n * - Toast integration for notifications\n * - Compound component pattern with Header, Footer, Content, and CancelButton sub-components\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Dialog open={isOpen} onClose={() => setIsOpen(false)}>\n * <Dialog.Header>Confirm Action</Dialog.Header>\n * <Dialog.Content>Are you sure you want to proceed?</Dialog.Content>\n * <Dialog.Footer>\n * <Dialog.CancelButton>Cancel</Dialog.CancelButton>\n * <Button appearance=\"primary\">Confirm</Button>\n * </Dialog.Footer>\n * </Dialog>\n */\nexport const Dialog = Object.assign(DialogElement, {\n /**\n * DialogHeader component for the header section of a Dialog.\n *\n * Features:\n * - Displays dialog title with headline typography\n * - Includes close button with proper accessibility\n * - Sticky positioning for long content\n * - Consistent spacing and styling\n * - Automatic focus management\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Dialog.Header>Confirm Delete</Dialog.Header>\n */\n Header: DialogHeader,\n /**\n * DialogFooter component for the footer section of a Dialog.\n *\n * Features:\n * - Container for dialog action buttons\n * - Optional sticky positioning for long content\n * - Consistent spacing and alignment\n * - Right-aligned button layout by default\n * - Flexible content area for custom layouts\n *\n * @example\n * <Dialog.Footer sticky>\n * <Dialog.CancelButton>Cancel</Dialog.CancelButton>\n * <Button appearance=\"primary\">Save</Button>\n * </Dialog.Footer>\n */\n Footer: DialogFooter,\n /**\n * DialogContent component for the main content area of a Dialog.\n *\n * Features:\n * - Main content container for dialog body\n * - Flexible height with overflow handling\n * - Consistent padding and spacing\n * - Responsive design\n * - Proper content scrolling for long content\n *\n * @example\n * <Dialog.Content>\n * <p>This is the main content of the dialog.</p>\n * </Dialog.Content>\n */\n Content: DialogContent,\n /**\n * DialogCancelButton component for cancel/close actions in a Dialog.\n *\n * Features:\n * - Button that automatically closes the dialog when clicked\n * - Extends all Button component props and functionality\n * - Proper accessibility with close dialog semantics\n * - Automatic focus management\n * - Consistent styling with other dialog elements\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Dialog.CancelButton appearance=\"ghost\">Cancel</Dialog.CancelButton>\n */\n CancelButton: DialogCancelButton,\n});\n"],"names":["Close","focusables"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dialog-CxH4Vnbb.js","sources":["../src/components/Dialog/internal/useDialogContext.ts","../src/components/Dialog/DialogCancelButton.tsx","../src/components/Dialog/DialogHeader.tsx","../src/components/Dialog/DialogFooter.tsx","../src/components/Dialog/DialogContent.tsx","../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { DialogContext } from \"./DialogContext\";\n\nexport function useDialogContext() {\n const context = useContext(DialogContext);\n if (!context) {\n throw new Error(\n \"useDialogContext must be used within a DialogContextProvider\",\n );\n }\n return context;\n}\n","import { MouseEvent, forwardRef } from \"react\";\nimport { Button, ButtonProps } from \"../Button\";\nimport { useDialogContext } from \"./internal/useDialogContext\";\nimport { DataTrackingId } from \"../../types\";\nimport { useTrackingId } from \"../../hooks\";\n\n/**\n * Props for the DialogCancelButton component\n * @extends ButtonProps\n */\nexport type DialogCancelButtonProps = ButtonProps & DataTrackingId;\n\n/**\n * DialogCancelButton component for cancel/close actions in a Dialog.\n *\n * Features:\n * - Button that automatically closes the dialog when clicked\n * - Extends all Button component props and functionality\n * - Proper accessibility with close dialog semantics\n * - Automatic focus management\n * - Consistent styling with other dialog elements\n *\n * @example\n * <Dialog.CancelButton appearance=\"ghost\">Cancel</Dialog.CancelButton>\n */\nexport const DialogCancelButton = forwardRef<\n HTMLButtonElement,\n DialogCancelButtonProps\n>((props, ref) => {\n const { onClick, ...rest } = props;\n const { close } = useDialogContext();\n const data = {\n title: props.title,\n appearance: props.appearance,\n size: props.size,\n type: props.type,\n };\n\n const trackingId = useTrackingId({\n name: \"DialogCancelButton\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n const onClickHandler = (e: MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n close();\n };\n return (\n <Button\n aria-label=\"Close dialog\"\n data-anv=\"dialog-cancel-button\"\n data-tracking-id={trackingId}\n onClick={onClickHandler}\n ref={ref}\n {...rest}\n />\n );\n});\n\nDialogCancelButton.displayName = \"DialogCancelButton\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport cx from \"classnames\";\n\nimport { Text } from \"../Text\";\nimport { DialogCancelButton } from \"./DialogCancelButton\";\n\nimport styles from \"./Dialog.module.scss\";\nimport { childrenToString } from \"../../internal/functions\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DataTrackingId } from \"../../types\";\n\n/**\n * Props for the DialogHeader component\n * @extends ComponentPropsWithoutRef<\"header\">\n */\nexport type DialogHeaderProps = ComponentPropsWithoutRef<\"header\"> &\n DataTrackingId;\n\n/**\n * DialogHeader component for the header section of a Dialog.\n *\n * Features:\n * - Displays dialog title with headline typography\n * - Includes close button with proper accessibility\n * - Sticky positioning for long content\n * - Consistent spacing and styling\n * - Automatic focus management\n *\n * @example\n * <Dialog.Header>Confirm Delete</Dialog.Header>\n */\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n (props: DialogHeaderProps, ref) => {\n const { children, className, ...rest } = props;\n const data = {\n children: childrenToString(props.children),\n };\n\n const trackingId = useTrackingId({\n name: \"Dialog\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n\n const headerClassNames = cx(className, styles[\"header\"]);\n\n return (\n <header\n className={headerClassNames}\n data-anv=\"dialog-header\"\n data-tracking-id={trackingId}\n ref={ref}\n {...rest}\n >\n <Text variant=\"headline\" el=\"h1\">\n {children}\n </Text>\n <span className={styles[\"close-container\"]}>\n <DialogCancelButton\n className={styles[\"close-button\"]}\n size=\"small\"\n appearance=\"ghost\"\n aria-label=\"Close dialog\"\n icon={Close}\n />\n </span>\n </header>\n );\n },\n);\n\nDialogHeader.displayName = \"DialogHeader\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"./Dialog.module.scss\";\n\n/**\n * Props for the DialogFooter component\n * @extends ComponentPropsWithoutRef<\"footer\">\n */\nexport type DialogFooterProps = ComponentPropsWithoutRef<\"footer\"> & {\n /**\n * @default false\n */\n sticky?: boolean;\n};\n\n/**\n * DialogFooter component for the footer section of a Dialog.\n *\n * Features:\n * - Container for dialog action buttons\n * - Optional sticky positioning for long content\n * - Consistent spacing and alignment\n * - Right-aligned button layout by default\n * - Flexible content area for custom layouts\n *\n * @example\n * <Dialog.Footer sticky>\n * <Dialog.CancelButton>Cancel</Dialog.CancelButton>\n * <Button appearance=\"primary\">Save</Button>\n * </Dialog.Footer>\n */\nexport const DialogFooter = forwardRef<HTMLElement, DialogFooterProps>(\n (props, ref) => {\n const { children, className, sticky = false, ...rest } = props;\n\n const footerClassNames = cx(styles[\"footer\"], className, {\n [styles[\"sticky\"]]: sticky,\n });\n\n return (\n <footer\n className={footerClassNames}\n data-anv=\"dialog-footer\"\n ref={ref}\n {...rest}\n >\n {children}\n </footer>\n );\n },\n);\n\nDialogFooter.displayName = \"DialogFooter\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"./Dialog.module.scss\";\n\n/**\n * Props for the DialogContent component\n * @extends ComponentPropsWithoutRef<\"div\">\n */\nexport type DialogContentProps = ComponentPropsWithoutRef<\"div\">;\n\n/**\n * DialogContent component for the main content area of a Dialog.\n *\n * Features:\n * - Main content container for dialog body\n * - Flexible height with overflow handling\n * - Consistent padding and spacing\n * - Responsive design\n * - Proper content scrolling for long content\n *\n * @example\n * <Dialog.Content>\n * <p>This is the main content of the dialog.</p>\n * </Dialog.Content>\n */\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n (props, ref) => {\n const { children, className, ...rest } = props;\n\n const contentClassNames = cx(styles[\"content\"], className);\n\n return (\n <div\n className={contentClassNames}\n data-anv=\"dialog-content\"\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n\nDialogContent.displayName = \"DialogContent\";\n","import {\n ComponentPropsWithoutRef,\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n KeyboardEvent,\n} from \"react\";\nimport { DialogHeader } from \"./DialogHeader\";\nimport { DialogFooter } from \"./DialogFooter\";\nimport { DialogContent } from \"./DialogContent\";\nimport { DialogCancelButton } from \"./DialogCancelButton\";\nimport {\n OpenCloseTransitionStateEffects,\n useDialogScrollLock,\n useDialogTransitionStates,\n useKeyboardFocusables,\n useOnClickOutside,\n} from \"../../internal/hooks\";\nimport {\n FocusableElement,\n DisableCloseOnEscapeOrClickProps,\n Size,\n} from \"../../types\";\nimport { registerLayer, unregisterLayer } from \"../../internal/utils\";\nimport { DialogContext, DialogContextProps } from \"./internal/DialogContext\";\nimport styles from \"./Dialog.module.scss\";\nimport { useMergeRefs } from \"../../hooks\";\nimport cx from \"classnames\";\n\nimport { ToastProvider } from \"../Toast/internal/ToastProvider\";\nimport { ToasterPopover } from \"../Toast/internal/ToasterPopover\";\nimport { ToasterContent } from \"../Toast/internal/Toaster\";\nimport { useInitialFocus } from \"./internal/useInitialFocus\";\n\n/**\n * Props for the Dialog component\n * @extends ComponentPropsWithoutRef<\"dialog\">\n * @extends DialogTransitionStateEffects\n * @extends DisableCloseOnEscapeOrClickProps\n */\nexport type DialogProps = ComponentPropsWithoutRef<\"dialog\"> &\n OpenCloseTransitionStateEffects &\n DisableCloseOnEscapeOrClickProps & {\n /**\n * @default false\n */\n fullScreen?: boolean;\n /**\n * @default \"medium\"\n */\n size?: Extract<Size, \"medium\" | \"large\">;\n\n /**\n * @default false\n */\n open?: boolean;\n onClose?: () => void;\n /**\n * @deprecated - use onOpenAnimationStart or onOpenAnimationComplete instead\n */\n onOpen?: () => void;\n /**\n * @deprecated - use onOpenAnimationStart or onOpenAnimationComplete instead\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * Callback when clicking outside the dialog\n */\n onClickOutside?: (e: globalThis.MouseEvent) => void;\n /**\n * Enables scroll chaining\n * @link https://developer.mozilla.org/en-US/docs/Glossary/Scroll_chaining\n */\n enableScrollChaining?: boolean;\n /**\n * Given an array of focusable elements, return the initial focus target.\n * @param focusables - The focusable elements to pick from\n * @returns The initial focus target\n */\n initialFocusResolver?: (focusables: FocusableElement[]) => FocusableElement;\n };\n\nexport const DialogElement = forwardRef<HTMLDialogElement, DialogProps>(\n (props, ref) => {\n const {\n className,\n open = false,\n children,\n onOpen,\n onOpenChange,\n onClose,\n onKeyDown,\n fullScreen = false,\n disableCloseOnEscape = false,\n onClickOutside,\n disableCloseOnClickOutside = false,\n size,\n enableScrollChaining,\n onOpenAnimationStart,\n onOpenAnimationComplete,\n onCloseAnimationStart,\n onCloseAnimationComplete,\n initialFocusResolver,\n ...rest\n } = props;\n\n const elRef = useRef<HTMLDialogElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const toasterRef = useRef<HTMLDivElement>(null);\n const [hasOpenPopover, setHasOpenPopover] =\n useState<DialogContextProps[\"hasOpenPopover\"]>(false);\n const id = useId();\n\n const { state, isOpenOrOpening } = useDialogTransitionStates(elRef, open, {\n onOpenAnimationStart: useCallback(() => {\n onOpenAnimationStart?.();\n }, [onOpenAnimationStart]),\n onOpenAnimationComplete: useCallback(() => {\n onOpenAnimationComplete?.();\n onOpen?.(); // DEPRECATED\n }, [onOpen, onOpenAnimationComplete]),\n onCloseAnimationStart: useCallback(() => {\n onCloseAnimationStart?.();\n }, [onCloseAnimationStart]),\n onCloseAnimationComplete: useCallback(() => {\n onCloseAnimationComplete?.();\n }, [onCloseAnimationComplete]),\n });\n\n // DEPRECATED\n const initial = useRef(true);\n useEffect(() => {\n if (initial.current) {\n initial.current = false;\n } else {\n onOpenChange?.(isOpenOrOpening);\n }\n }, [id, onOpenChange, isOpenOrOpening]);\n\n const classNames = cx([styles[\"dialog\"]], className, {\n [styles[\"closing\"]]: state === \"closing\",\n [styles[\"fullscreen\"]]: fullScreen,\n [styles[\"large\"]]: size === \"large\",\n });\n\n const { focusables } = useKeyboardFocusables(contentRef, {\n observeChange: true,\n });\n\n useDialogScrollLock({\n open: isOpenOrOpening,\n id,\n enableScrollChaining,\n elementRef: elRef,\n });\n\n // Register/unregister with layer manager for proper stacking\n useEffect(() => {\n if (open) {\n registerLayer(id);\n } else {\n unregisterLayer(id);\n }\n\n // Cleanup when component unmounts\n return () => {\n unregisterLayer(id);\n };\n }, [open, id]);\n\n useOnClickOutside({\n onOutsidePress: (e) => {\n if (!open) return;\n onClickOutside?.(e);\n },\n targets: [\n contentRef.current as HTMLElement,\n toasterRef.current as HTMLElement,\n ],\n onClose: () => {\n if (disableCloseOnClickOutside || !open) return;\n onClose?.();\n },\n layerId: id,\n });\n\n const computeFocus = useCallback((focusables: FocusableElement[]) => {\n return (\n focusables.find(\n (focusable) => focusable.dataset.anv !== \"dialog-cancel-button\",\n ) || focusables[0]\n );\n }, []);\n\n useInitialFocus(elRef, {\n computeFocus: initialFocusResolver || computeFocus,\n });\n\n const onKeyDownHandler = (e: KeyboardEvent<HTMLDialogElement>) => {\n onKeyDown?.(e);\n if (e.code === \"Escape\") {\n e.preventDefault();\n if (disableCloseOnEscape) return;\n if (hasOpenPopover) return;\n onClose?.();\n return;\n }\n\n if (e.code === \"Tab\") {\n if (e.shiftKey && e.target === focusables?.[0]) {\n e.preventDefault();\n (focusables[focusables.length - 1] as HTMLElement)?.focus();\n return;\n }\n if (e.target === focusables?.[focusables.length - 1] && !e.shiftKey) {\n e.preventDefault();\n focusables[0].focus();\n return;\n }\n }\n };\n\n return (\n // dialog element does seem to be interactive on MDN guideline\n <dialog\n className={classNames}\n data-anv=\"dialog\"\n data-anv-scroll-chaining={enableScrollChaining}\n data-anv-transition-state={state}\n ref={useMergeRefs([ref, elRef])}\n onKeyDown={onKeyDownHandler}\n {...rest}\n >\n <ToastProvider isDialogToaster={open}>\n <ToasterPopover>\n <ToasterContent id=\"dialog-toaster\" ref={toasterRef} />\n </ToasterPopover>\n </ToastProvider>\n <DialogContext.Provider\n value={{\n close: () => onClose?.(),\n ref: elRef,\n hasOpenPopover,\n setHasOpenPopover,\n }}\n >\n <section\n ref={contentRef}\n className={styles[\"container\"]}\n data-open={open}\n >\n {children}\n </section>\n </DialogContext.Provider>\n </dialog>\n );\n },\n);\n\nDialogElement.displayName = \"Dialog\";\n\n/**\n * Dialog component for creating modal dialogs and overlays.\n *\n * Features:\n * - Modal dialog with backdrop overlay\n * - Controlled and uncontrolled open state\n * - Smooth open/close animations\n * - Keyboard navigation and focus management\n * - Escape key and click outside to close\n * - Multiple size variants (medium, large, fullscreen)\n * - Scroll chaining support\n * - Toast integration for notifications\n * - Compound component pattern with Header, Footer, Content, and CancelButton sub-components\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Dialog open={isOpen} onClose={() => setIsOpen(false)}>\n * <Dialog.Header>Confirm Action</Dialog.Header>\n * <Dialog.Content>Are you sure you want to proceed?</Dialog.Content>\n * <Dialog.Footer>\n * <Dialog.CancelButton>Cancel</Dialog.CancelButton>\n * <Button appearance=\"primary\">Confirm</Button>\n * </Dialog.Footer>\n * </Dialog>\n */\nexport const Dialog = Object.assign(DialogElement, {\n /**\n * DialogHeader component for the header section of a Dialog.\n *\n * Features:\n * - Displays dialog title with headline typography\n * - Includes close button with proper accessibility\n * - Sticky positioning for long content\n * - Consistent spacing and styling\n * - Automatic focus management\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Dialog.Header>Confirm Delete</Dialog.Header>\n */\n Header: DialogHeader,\n /**\n * DialogFooter component for the footer section of a Dialog.\n *\n * Features:\n * - Container for dialog action buttons\n * - Optional sticky positioning for long content\n * - Consistent spacing and alignment\n * - Right-aligned button layout by default\n * - Flexible content area for custom layouts\n *\n * @example\n * <Dialog.Footer sticky>\n * <Dialog.CancelButton>Cancel</Dialog.CancelButton>\n * <Button appearance=\"primary\">Save</Button>\n * </Dialog.Footer>\n */\n Footer: DialogFooter,\n /**\n * DialogContent component for the main content area of a Dialog.\n *\n * Features:\n * - Main content container for dialog body\n * - Flexible height with overflow handling\n * - Consistent padding and spacing\n * - Responsive design\n * - Proper content scrolling for long content\n *\n * @example\n * <Dialog.Content>\n * <p>This is the main content of the dialog.</p>\n * </Dialog.Content>\n */\n Content: DialogContent,\n /**\n * DialogCancelButton component for cancel/close actions in a Dialog.\n *\n * Features:\n * - Button that automatically closes the dialog when clicked\n * - Extends all Button component props and functionality\n * - Proper accessibility with close dialog semantics\n * - Automatic focus management\n * - Consistent styling with other dialog elements\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Dialog.CancelButton appearance=\"ghost\">Cancel</Dialog.CancelButton>\n */\n CancelButton: DialogCancelButton,\n});\n"],"names":["Close","focusables"],"mappings":"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"}
|