@servicetitan/anvil2 3.7.1 → 3.9.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 +30 -0
- package/dist/{AiMark-DKAIkwNU.js → AiMark-2_O4tKv_.js} +5 -5
- package/dist/AiMark-2_O4tKv_.js.map +1 -0
- package/dist/AiMark.js +1 -1
- package/dist/{Alert-tsu15fCc.js → Alert-DtM7NDN9.js} +3 -3
- package/dist/Alert-DtM7NDN9.js.map +1 -0
- package/dist/Alert.js +1 -1
- package/dist/{Announcement-DU0J4111.js → Announcement-CGglhMfd.js} +3 -3
- package/dist/Announcement-CGglhMfd.js.map +1 -0
- package/dist/Announcement.js +1 -1
- package/dist/AnvilProvider-b3gvW6Md.js.map +1 -1
- package/dist/Avatar-CoQcOHWU.js.map +1 -1
- package/dist/Avatar-DX96Mxe7.js.map +1 -1
- package/dist/Badge-BNrYBFiU.js.map +1 -1
- package/dist/Badge.css +2 -3
- package/dist/{Breadcrumbs-CoqJO7Ca.js → Breadcrumbs-Bmqmw5F5.js} +4 -4
- package/dist/Breadcrumbs-Bmqmw5F5.js.map +1 -0
- package/dist/Breadcrumbs.js +1 -1
- package/dist/{Button-BNzCI47m.js → Button-Dwh_Nd4l.js} +6 -8
- package/dist/Button-Dwh_Nd4l.js.map +1 -0
- package/dist/Button.js +1 -1
- package/dist/ButtonCompound-D7kA0qXr.js.map +1 -1
- package/dist/{ButtonLink-PlW08u41.js → ButtonLink-DOFAxNvC.js} +2 -2
- package/dist/ButtonLink-DOFAxNvC.js.map +1 -0
- package/dist/ButtonLink.js +1 -1
- package/dist/{ButtonToggle-DBGc7dIn.js → ButtonToggle-DKDBD1g3.js} +2 -2
- package/dist/ButtonToggle-DKDBD1g3.js.map +1 -0
- package/dist/ButtonToggle.js +1 -1
- package/dist/{Calendar-Csw2CkqE.js → Calendar-CUgFbnKj.js} +2 -2
- package/dist/Calendar-CUgFbnKj.js.map +1 -0
- package/dist/{Calendar-DnwCL7gm.js → Calendar-D_fqe0-J.js} +11 -4
- package/dist/Calendar-D_fqe0-J.js.map +1 -0
- package/dist/Calendar.js +2 -2
- package/dist/Card-Bt0F6RTq.js.map +1 -1
- package/dist/{Checkbox-DGU3JwZA.js → Checkbox-4wRmrann.js} +2 -2
- package/dist/Checkbox-4wRmrann.js.map +1 -0
- package/dist/{Checkbox-Cmn1o3Ta.js → Checkbox-DoxWcbfv.js} +5 -5
- package/dist/Checkbox-DoxWcbfv.js.map +1 -0
- package/dist/Checkbox.js +1 -1
- package/dist/{Chip-BsGckplA.js → Chip-D6Q0J0Xe.js} +3 -3
- package/dist/Chip-D6Q0J0Xe.js.map +1 -0
- package/dist/Chip.js +1 -1
- package/dist/Combobox.js +1 -1
- package/dist/{DataTable-BLK4-7QQ.js → DataTable-CRzQKN_P.js} +11 -11
- package/dist/DataTable-CRzQKN_P.js.map +1 -0
- package/dist/DataTable.css +2 -3
- package/dist/{DateFieldRange-BnNrQvuG.js → DateFieldRange-CHbrYgsD.js} +12 -5
- package/dist/DateFieldRange-CHbrYgsD.js.map +1 -0
- package/dist/DateFieldRange.js +1 -1
- package/dist/{DateFieldSingle-CwcV_AOp.js → DateFieldSingle-D-KZ3NL0.js} +12 -5
- package/dist/DateFieldSingle-D-KZ3NL0.js.map +1 -0
- package/dist/DateFieldSingle.js +1 -1
- package/dist/{DateFieldYearless-HntvaWSJ.js → DateFieldYearless-DouEX24o.js} +5 -5
- package/dist/DateFieldYearless-DouEX24o.js.map +1 -0
- package/dist/DateFieldYearless.js +1 -1
- package/dist/{DateFieldYearlessRange-BPvJvBob.js → DateFieldYearlessRange-B_bImgyn.js} +5 -5
- package/dist/DateFieldYearlessRange-B_bImgyn.js.map +1 -0
- package/dist/DateFieldYearlessRange.js +1 -1
- package/dist/{DaysOfTheWeek-4Cd2WK7u.js → DaysOfTheWeek--FBi44iw.js} +5 -5
- package/dist/DaysOfTheWeek--FBi44iw.js.map +1 -0
- package/dist/DaysOfTheWeek.js +1 -1
- package/dist/{Details-DkteVZbk.js → Details-CVA5zbrR.js} +2 -2
- package/dist/Details-CVA5zbrR.js.map +1 -0
- package/dist/Details.js +1 -1
- package/dist/{Dialog-CE2fxzJR.js → Dialog-Clh3jaX8.js} +5 -5
- package/dist/Dialog-Clh3jaX8.js.map +1 -0
- package/dist/Dialog.js +1 -1
- package/dist/{DialogCancelButton-DmSUPuCR.js → DialogCancelButton-DBL0aKTK.js} +2 -2
- package/dist/DialogCancelButton-DBL0aKTK.js.map +1 -0
- package/dist/DialogContext-DBgtApl9.js.map +1 -1
- package/dist/Divider-C7fp5Xb6.js.map +1 -1
- package/dist/Dnd.js +2 -2
- package/dist/{DndHandleButton-Ck5nc8w2.js → DndHandleButton-BRlodkDO.js} +2 -2
- package/dist/{DndHandleButton-Ck5nc8w2.js.map → DndHandleButton-BRlodkDO.js.map} +1 -1
- package/dist/DndSort.js +4 -4
- package/dist/DndSort.js.map +1 -1
- package/dist/{Drawer-CWLwXp1D.js → Drawer-h2Mut1lB.js} +61 -34
- package/dist/Drawer-h2Mut1lB.js.map +1 -0
- package/dist/Drawer.css +34 -28
- package/dist/Drawer.js +1 -1
- package/dist/DrawerContext-BSpnzXVZ.js.map +1 -1
- package/dist/DrillDown.js +1 -1
- package/dist/DrillDown.module-D1Bf9_yP.js.map +1 -1
- package/dist/{EditCard-DqFAx5cl.js → EditCard-QohYSylF.js} +4 -4
- package/dist/EditCard-QohYSylF.js.map +1 -0
- package/dist/EditCard.js +1 -1
- package/dist/{FieldLabel-v6vMVVWB.js → FieldLabel-SzH61hCb.js} +3 -3
- package/dist/FieldLabel-SzH61hCb.js.map +1 -0
- package/dist/FieldLabel.js +1 -1
- package/dist/{FilterBar-Ce22r7lY.js → FilterBar-CBTAkEri.js} +8 -8
- package/dist/FilterBar-CBTAkEri.js.map +1 -0
- package/dist/FilterBar.js +1 -1
- package/dist/{Flex-Bb3iHExM.js → Flex-CRF7gj0_.js} +3 -3
- package/dist/Flex-CRF7gj0_.js.map +1 -0
- package/dist/Flex.css +2 -4
- package/dist/Flex.js +1 -1
- package/dist/{Grid-ho1pGJ5L.js → Grid-CvGQrIhE.js} +4 -4
- package/dist/Grid-CvGQrIhE.js.map +1 -0
- package/dist/Grid.css +3 -5
- package/dist/Grid.js +1 -1
- package/dist/{Helper-B_VAFgGd.js → Helper-Bq6Npkgh.js} +2 -2
- package/dist/Helper-Bq6Npkgh.js.map +1 -0
- package/dist/{Icon-B4uCvMU9.js → Icon-B5zwN7GD.js} +4 -4
- package/dist/Icon-B5zwN7GD.js.map +1 -0
- package/dist/Icon.js +1 -1
- package/dist/{InputMask-DnbZnynw.js → InputMask-CQONHcTq.js} +3 -3
- package/dist/InputMask-CQONHcTq.js.map +1 -0
- package/dist/InputMask.js +1 -1
- package/dist/InteractiveCard-C0g5PxB6.js.map +1 -1
- package/dist/Layout-C2Q2hyLG.js.map +1 -1
- package/dist/{Link-C7dtI5K6.js → Link-D7ycmfQ_.js} +2 -2
- package/dist/Link-D7ycmfQ_.js.map +1 -0
- package/dist/Link.css +2 -4
- package/dist/Link.js +1 -1
- package/dist/LinkButton-C0wps8r1.js.map +1 -1
- package/dist/List-BvzfZ9TW.js.map +1 -1
- package/dist/{ListView-Dy4m0aQb.js → ListView-BgGEwal3.js} +3 -3
- package/dist/ListView-BgGEwal3.js.map +1 -0
- package/dist/ListView.js +1 -1
- package/dist/{Listbox-By-gyw1j.js → Listbox-Cw_2W62S.js} +4 -4
- package/dist/Listbox-Cw_2W62S.js.map +1 -0
- package/dist/Listbox.js +1 -1
- package/dist/LocalizationContext-UsmB5mnR.js.map +1 -1
- package/dist/LocalizationProvider-BPcOU7YX.js.map +1 -1
- package/dist/{Menu-DmEXQLXt.js → Menu-DNOOmDQC.js} +3 -3
- package/dist/Menu-DNOOmDQC.js.map +1 -0
- package/dist/Menu.js +1 -1
- package/dist/{MenuFooter-Ck9L599M.js → MenuFooter-BXcNxNnX.js} +2 -2
- package/dist/MenuFooter-BXcNxNnX.js.map +1 -0
- package/dist/MultiSelectField.js +1 -1
- package/dist/{MultiSelectFieldSync-CGOAko_r.js → MultiSelectFieldSync-CpfsWecG.js} +18 -8
- package/dist/MultiSelectFieldSync-CpfsWecG.js.map +1 -0
- package/dist/MultiSelectMenu.js +1 -1
- package/dist/{MultiSelectMenuSync-DTRWdqGg.js → MultiSelectMenuSync-CtyLYyDE.js} +10 -8
- package/dist/MultiSelectMenuSync-CtyLYyDE.js.map +1 -0
- package/dist/{NumberField-BuAlvtg_.js → NumberField-B1761jkf.js} +7 -7
- package/dist/NumberField-B1761jkf.js.map +1 -0
- package/dist/NumberField.css +2 -3
- package/dist/NumberField.js +1 -1
- package/dist/Overflow.js +1 -1
- package/dist/Overflow.js.map +1 -1
- package/dist/{Page-DBKu3XYh.js → Page-B6E3Gbji.js} +13 -13
- package/dist/Page-B6E3Gbji.js.map +1 -0
- package/dist/Page.js +1 -1
- package/dist/{Pagination-Ceh0uZhU.js → Pagination-DF7iMeJe.js} +6 -6
- package/dist/Pagination-DF7iMeJe.js.map +1 -0
- package/dist/Pagination.js +1 -1
- package/dist/{Popover-hQKMGTiJ.js → Popover-CjsE5FG0.js} +3 -3
- package/dist/Popover-CjsE5FG0.js.map +1 -0
- package/dist/Popover.js +1 -1
- package/dist/PortalProvider-Cj_y3gbC.js.map +1 -1
- package/dist/{ProgressBar-CFdDZFV9.js → ProgressBar-Coh2nTJ1.js} +6 -6
- package/dist/ProgressBar-Coh2nTJ1.js.map +1 -0
- package/dist/ProgressBar.js +1 -1
- package/dist/{Radio-Dey7KUCQ.js → Radio-BxSL1PoP.js} +2 -2
- package/dist/Radio-BxSL1PoP.js.map +1 -0
- package/dist/{Radio-ARjSflvI.js → Radio-J4Iv3wbJ.js} +5 -5
- package/dist/Radio-J4Iv3wbJ.js.map +1 -0
- package/dist/Radio.js +1 -1
- package/dist/{RichTextEditor-B4ZPAevY.js → RichTextEditor-CLo8yoUP.js} +13 -13
- package/dist/RichTextEditor-CLo8yoUP.js.map +1 -0
- package/dist/RichTextEditor.css +1 -2
- package/dist/RichTextEditor.js +1 -1
- package/dist/{SavedFiltersButton-DPISXV2b.js → SavedFiltersButton-FcYVncxU.js} +12 -12
- package/dist/SavedFiltersButton-FcYVncxU.js.map +1 -0
- package/dist/SavedFiltersButton.js +1 -1
- package/dist/{SearchField-B7fIOJf-.js → SearchField-ChoNtw8w.js} +2 -2
- package/dist/SearchField-ChoNtw8w.js.map +1 -0
- package/dist/{SearchField-X4B7f23E.js → SearchField-DX8hZyo2.js} +2 -2
- package/dist/SearchField-DX8hZyo2.js.map +1 -0
- package/dist/SearchField.js +1 -1
- package/dist/{SegmentedControl-Be6jCglV.js → SegmentedControl-CQ6DrbDc.js} +2 -2
- package/dist/SegmentedControl-CQ6DrbDc.js.map +1 -0
- package/dist/SegmentedControl.css +2 -3
- package/dist/SegmentedControl.js +1 -1
- package/dist/{SelectCard-DtEUPxgj.js → SelectCard-BTfhPyHH.js} +4 -4
- package/dist/SelectCard-BTfhPyHH.js.map +1 -0
- package/dist/SelectCard.js +1 -1
- package/dist/SelectField.js +1 -1
- package/dist/{SelectFieldLabel-DB3o9bDD.js → SelectFieldLabel-CjY6zFJA.js} +2 -2
- package/dist/SelectFieldLabel-CjY6zFJA.js.map +1 -0
- package/dist/{SelectFieldSync-B5r-wl1D.js → SelectFieldSync-Bi8HsMYP.js} +23 -8
- package/dist/SelectFieldSync-Bi8HsMYP.js.map +1 -0
- package/dist/SelectMenu.js +1 -1
- package/dist/{SelectMenuSync-CqKMKaWt.js → SelectMenuSync-DKg4g5nN.js} +7 -7
- package/dist/SelectMenuSync-DKg4g5nN.js.map +1 -0
- package/dist/{SelectOptions-VVJ4D-0C.js → SelectOptions-DszNAjxB.js} +2 -2
- package/dist/SelectOptions-DszNAjxB.js.map +1 -0
- package/dist/{SelectTrigger-TRI2LhJR.js → SelectTrigger-DNIc5ttg.js} +4 -4
- package/dist/SelectTrigger-DNIc5ttg.js.map +1 -0
- package/dist/SelectTrigger.js +1 -1
- package/dist/{SelectTriggerBase-D1nOad4B.js → SelectTriggerBase-1Cc6EUBw.js} +10 -14
- package/dist/SelectTriggerBase-1Cc6EUBw.js.map +1 -0
- package/dist/SelectTriggerBase.css +2 -3
- package/dist/{SideNav-DoxX8Vi-.js → SideNav-DZRXOYHs.js} +2 -2
- package/dist/SideNav-DZRXOYHs.js.map +1 -0
- package/dist/SideNav.js +1 -1
- package/dist/Skeleton.js.map +1 -1
- package/dist/Spinner-B7tTWcP6.js.map +1 -1
- package/dist/SrOnly-pnf8ajnh.js.map +1 -1
- package/dist/{Stepper-CvaR7OoT.js → Stepper-BX_gDWLE.js} +4 -4
- package/dist/Stepper-BX_gDWLE.js.map +1 -0
- package/dist/Stepper.css +1 -2
- package/dist/Stepper.js +1 -1
- package/dist/{Switch-ClbHJvDU.js → Switch-BpjBYm-U.js} +5 -5
- package/dist/Switch-BpjBYm-U.js.map +1 -0
- package/dist/Switch.js +1 -1
- package/dist/{Tab-Cy4G562A.js → Tab-Bqfvg8Ce.js} +53 -23
- package/dist/Tab-Bqfvg8Ce.js.map +1 -0
- package/dist/Tab.css +35 -31
- package/dist/Tab.js +1 -1
- package/dist/Table.js +1 -1
- package/dist/{Text-BjYHzUGW.js → Text-CIoD_RK4.js} +2 -2
- package/dist/Text-CIoD_RK4.js.map +1 -0
- package/dist/Text.js +1 -1
- package/dist/{TextField-DX6-K3jO.js → TextField-CzzvLI5_.js} +4 -4
- package/dist/TextField-CzzvLI5_.js.map +1 -0
- package/dist/{TextField-BsVxym0-.js → TextField-D3sRS5q1.js} +2 -2
- package/dist/TextField-D3sRS5q1.js.map +1 -0
- package/dist/TextField.js +1 -1
- package/dist/{Textarea-B3z6Y7VU.js → Textarea-B3C7AkPj.js} +4 -4
- package/dist/Textarea-B3C7AkPj.js.map +1 -0
- package/dist/Textarea.js +1 -1
- package/dist/ThemeProvider-Sd8LK0A9.js.map +1 -1
- package/dist/ThemeProviderContext-l52GohYT.js.map +1 -1
- package/dist/{TimeField-Bmcwic3C.js → TimeField-L9B_X6-H.js} +31 -9
- package/dist/TimeField-L9B_X6-H.js.map +1 -0
- package/dist/TimeField.js +1 -1
- package/dist/TimezoneMessage-BrKB_psP.js.map +1 -1
- package/dist/Toast.js +2 -2
- package/dist/{Toaster-CvY-A7zY.js → Toaster-CAI7tX8q.js} +4 -4
- package/dist/Toaster-CAI7tX8q.js.map +1 -0
- package/dist/{Toaster-CTjkTMie.js → Toaster-DZxf0N9g.js} +2 -2
- package/dist/Toaster-DZxf0N9g.js.map +1 -0
- package/dist/{Toolbar-BpCO-4zj.js → Toolbar-2VQIjU5b.js} +9 -9
- package/dist/Toolbar-2VQIjU5b.js.map +1 -0
- package/dist/{Toolbar-pdJXcqY0.js → Toolbar-BbImThIu.js} +7 -7
- package/dist/Toolbar-BbImThIu.js.map +1 -0
- package/dist/Toolbar.js +2 -2
- package/dist/{ToolbarButtonToggle-3xbnm1Qr.js → ToolbarButtonToggle-Bc0XvCM9.js} +2 -2
- package/dist/ToolbarButtonToggle-Bc0XvCM9.js.map +1 -0
- package/dist/Tooltip-BC8lnFhe.js.map +1 -1
- package/dist/TrackingProvider-Co4lyoI9.js.map +1 -1
- package/dist/TrackingProviderContext-CrVA7KHv.js.map +1 -1
- package/dist/TreeSelectField.js +1 -1
- package/dist/{TreeSelectFieldSync-Cz8uOdpT.js → TreeSelectFieldSync-DUHVmOQa.js} +19 -8
- package/dist/TreeSelectFieldSync-DUHVmOQa.js.map +1 -0
- package/dist/TreeSelectMenu.js +1 -1
- package/dist/{TreeSelectMenuSync-Bk8BN6_B.js → TreeSelectMenuSync-DVoYUG7F.js} +8 -8
- package/dist/TreeSelectMenuSync-DVoYUG7F.js.map +1 -0
- package/dist/{TypeaheadTextField-Dg7O5Yu5.js → TypeaheadTextField-9Nkkd4c4.js} +3 -3
- package/dist/TypeaheadTextField-9Nkkd4c4.js.map +1 -0
- package/dist/TypeaheadTextField.js +1 -1
- package/dist/{YearlessDateInputWithPicker-CpnLg01W.js → YearlessDateInputWithPicker-CM9mmz8s.js} +16 -6
- package/dist/YearlessDateInputWithPicker-CM9mmz8s.js.map +1 -0
- package/dist/beta.js +16 -16
- package/dist/{bulkActionTypes-B20IInUD.js → bulkActionTypes-BnZNAru6.js} +2 -2
- package/dist/bulkActionTypes-BnZNAru6.js.map +1 -0
- package/dist/childrenToString-Bz9MqbHb.js.map +1 -1
- package/dist/{filter-state-CuiHPC94.js → filter-state-XmqhkURU.js} +37 -33
- package/dist/filter-state-XmqhkURU.js.map +1 -0
- package/dist/{index-B12T0Vxa.js → index-BwNeldDw.js} +2 -2
- package/dist/{index-B12T0Vxa.js.map → index-BwNeldDw.js.map} +1 -1
- package/dist/{index-SZMmvI3D.js → index-BwV_Pz7v.js} +2 -2
- package/dist/index-BwV_Pz7v.js.map +1 -0
- package/dist/index.js +56 -56
- package/dist/makeZeroShortcutPreprocessor-CxsiGTRW.js.map +1 -1
- package/dist/src/beta/components/FilterBar/index.d.ts +1 -1
- package/dist/src/beta/components/Toolbar/index.d.ts +1 -1
- package/dist/src/components/Alert/Alert.d.ts +2 -4
- package/dist/src/components/Announcement/Announcement.d.ts +2 -4
- package/dist/src/components/Breadcrumbs/index.d.ts +1 -1
- package/dist/src/components/ButtonCompound/ButtonCompound.d.ts +2 -4
- package/dist/src/components/ButtonLink/ButtonLink.d.ts +2 -4
- package/dist/src/components/ButtonToggle/ButtonToggle.d.ts +2 -4
- package/dist/src/components/Calendar/Calendar.d.ts +3 -1
- package/dist/src/components/Calendar/index.d.ts +1 -1
- package/dist/src/components/Checkbox/index.d.ts +2 -2
- package/dist/src/components/Combobox/Combobox.d.ts +2 -2
- package/dist/src/components/Combobox/ComboboxEmpty.d.ts +1 -1
- package/dist/src/components/Combobox/index.d.ts +2 -2
- package/dist/src/components/DateFieldSingle/index.d.ts +1 -1
- package/dist/src/components/DateFieldYearless/index.d.ts +1 -1
- package/dist/src/components/Details/index.d.ts +2 -2
- package/dist/src/components/Dialog/index.d.ts +4 -4
- package/dist/src/components/DndSort/index.d.ts +3 -3
- package/dist/src/components/Drawer/Drawer.d.ts +3 -1
- package/dist/src/components/Drawer/DrawerHeader.d.ts +35 -3
- package/dist/src/components/Drawer/index.d.ts +4 -4
- package/dist/src/components/Grid/index.d.ts +1 -1
- package/dist/src/components/List/index.d.ts +1 -1
- package/dist/src/components/Listbox/index.d.ts +2 -2
- package/dist/src/components/Menu/index.d.ts +1 -1
- package/dist/src/components/Overflow/index.d.ts +1 -1
- package/dist/src/components/Popover/index.d.ts +4 -4
- package/dist/src/components/Radio/index.d.ts +2 -2
- package/dist/src/components/SelectCard/index.d.ts +1 -1
- package/dist/src/components/SelectMenu/internal/useMenuInteraction.d.ts +7 -1
- package/dist/src/components/SideNav/index.d.ts +3 -3
- package/dist/src/components/Stepper/index.d.ts +6 -6
- package/dist/src/components/Tab/index.d.ts +3 -3
- package/dist/src/components/TimeField/index.d.ts +1 -1
- package/dist/src/components/Toolbar/index.d.ts +5 -5
- package/dist/src/components/Tooltip/index.d.ts +2 -2
- package/dist/src/internal/components/Popover/index.d.ts +4 -4
- package/dist/src/providers/ThemeProvider/index.d.ts +2 -2
- package/dist/src/providers/TrackingProvider/index.d.ts +1 -1
- package/dist/src/types/index.d.ts +3 -3
- package/dist/{stripInlineMarkdown-C-3FEh_E.js → stripInlineMarkdown-BfNNOWPk.js} +2 -2
- package/dist/{stripInlineMarkdown-C-3FEh_E.js.map → stripInlineMarkdown-BfNNOWPk.js.map} +1 -1
- package/dist/{syncFilterUtils-CU5iJQSC.js → syncFilterUtils-UVNoFsDr.js} +5 -5
- package/dist/syncFilterUtils-UVNoFsDr.js.map +1 -0
- package/dist/{treeSync-CUf4vwDm.js → treeSync-CiU5d6rF.js} +4 -4
- package/dist/{treeSync-CUf4vwDm.js.map → treeSync-CiU5d6rF.js.map} +1 -1
- package/dist/{useAdaptiveView-C0F7qnLD.js → useAdaptiveView-C_WvM4-P.js} +7 -7
- package/dist/useAdaptiveView-C_WvM4-P.js.map +1 -0
- package/dist/useChipLayout-BWZfKDgd.js.map +1 -1
- package/dist/{useDrilldown-CCsr0_3L.js → useDrilldown-D7DKSs7E.js} +5 -5
- package/dist/{useDrilldown-CCsr0_3L.js.map → useDrilldown-D7DKSs7E.js.map} +1 -1
- package/dist/useFocusWithin-hi77jsrB.js.map +1 -1
- package/dist/{useInfiniteCombobox-HSttRaX5.js → useInfiniteCombobox-COJTJxCZ.js} +70 -68
- package/dist/useInfiniteCombobox-COJTJxCZ.js.map +1 -0
- package/dist/{useInitialFocus-BIvXK1Rp.js → useInitialFocus-BUxEDMEG.js} +2 -2
- package/dist/useInitialFocus-BUxEDMEG.js.map +1 -0
- package/dist/useLayoutPropsUtil-DjqeAJZ9.js.map +1 -1
- package/dist/{useMenuInteraction-NEJXUD4I.js → useMenuInteraction-AgrXU8kv.js} +8 -2
- package/dist/useMenuInteraction-AgrXU8kv.js.map +1 -0
- package/dist/{useNumberField-D_ic9i2q.js → useNumberField-CXFYUZ_n.js} +4 -2
- package/dist/useNumberField-CXFYUZ_n.js.map +1 -0
- package/dist/useOptionallyControlledState-DbDuos5L.js.map +1 -1
- package/dist/{usePopoverTransitionStates-B1opfxxn.js → usePopoverTransitionStates-CDXCdyKa.js} +2 -1
- package/dist/{usePopoverTransitionStates-B1opfxxn.js.map → usePopoverTransitionStates-CDXCdyKa.js.map} +1 -1
- package/dist/useSize.js.map +1 -1
- package/dist/useSwipe-Cp-CJxLU.js.map +1 -1
- package/package.json +6 -4
- package/dist/AiMark-DKAIkwNU.js.map +0 -1
- package/dist/Alert-tsu15fCc.js.map +0 -1
- package/dist/Announcement-DU0J4111.js.map +0 -1
- package/dist/Breadcrumbs-CoqJO7Ca.js.map +0 -1
- package/dist/Button-BNzCI47m.js.map +0 -1
- package/dist/ButtonLink-PlW08u41.js.map +0 -1
- package/dist/ButtonToggle-DBGc7dIn.js.map +0 -1
- package/dist/Calendar-Csw2CkqE.js.map +0 -1
- package/dist/Calendar-DnwCL7gm.js.map +0 -1
- package/dist/Checkbox-Cmn1o3Ta.js.map +0 -1
- package/dist/Checkbox-DGU3JwZA.js.map +0 -1
- package/dist/Chip-BsGckplA.js.map +0 -1
- package/dist/DataTable-BLK4-7QQ.js.map +0 -1
- package/dist/DateFieldRange-BnNrQvuG.js.map +0 -1
- package/dist/DateFieldSingle-CwcV_AOp.js.map +0 -1
- package/dist/DateFieldYearless-HntvaWSJ.js.map +0 -1
- package/dist/DateFieldYearlessRange-BPvJvBob.js.map +0 -1
- package/dist/DaysOfTheWeek-4Cd2WK7u.js.map +0 -1
- package/dist/Details-DkteVZbk.js.map +0 -1
- package/dist/Dialog-CE2fxzJR.js.map +0 -1
- package/dist/DialogCancelButton-DmSUPuCR.js.map +0 -1
- package/dist/Drawer-CWLwXp1D.js.map +0 -1
- package/dist/EditCard-DqFAx5cl.js.map +0 -1
- package/dist/FieldLabel-v6vMVVWB.js.map +0 -1
- package/dist/FilterBar-Ce22r7lY.js.map +0 -1
- package/dist/Flex-Bb3iHExM.js.map +0 -1
- package/dist/Grid-ho1pGJ5L.js.map +0 -1
- package/dist/Helper-B_VAFgGd.js.map +0 -1
- package/dist/Icon-B4uCvMU9.js.map +0 -1
- package/dist/InputMask-DnbZnynw.js.map +0 -1
- package/dist/Link-C7dtI5K6.js.map +0 -1
- package/dist/ListView-Dy4m0aQb.js.map +0 -1
- package/dist/Listbox-By-gyw1j.js.map +0 -1
- package/dist/Menu-DmEXQLXt.js.map +0 -1
- package/dist/MenuFooter-Ck9L599M.js.map +0 -1
- package/dist/MultiSelectFieldSync-CGOAko_r.js.map +0 -1
- package/dist/MultiSelectMenuSync-DTRWdqGg.js.map +0 -1
- package/dist/NumberField-BuAlvtg_.js.map +0 -1
- package/dist/Page-DBKu3XYh.js.map +0 -1
- package/dist/Pagination-Ceh0uZhU.js.map +0 -1
- package/dist/Popover-hQKMGTiJ.js.map +0 -1
- package/dist/ProgressBar-CFdDZFV9.js.map +0 -1
- package/dist/Radio-ARjSflvI.js.map +0 -1
- package/dist/Radio-Dey7KUCQ.js.map +0 -1
- package/dist/RichTextEditor-B4ZPAevY.js.map +0 -1
- package/dist/SavedFiltersButton-DPISXV2b.js.map +0 -1
- package/dist/SearchField-B7fIOJf-.js.map +0 -1
- package/dist/SearchField-X4B7f23E.js.map +0 -1
- package/dist/SegmentedControl-Be6jCglV.js.map +0 -1
- package/dist/SelectCard-DtEUPxgj.js.map +0 -1
- package/dist/SelectFieldLabel-DB3o9bDD.js.map +0 -1
- package/dist/SelectFieldSync-B5r-wl1D.js.map +0 -1
- package/dist/SelectMenuSync-CqKMKaWt.js.map +0 -1
- package/dist/SelectOptions-VVJ4D-0C.js.map +0 -1
- package/dist/SelectTrigger-TRI2LhJR.js.map +0 -1
- package/dist/SelectTriggerBase-D1nOad4B.js.map +0 -1
- package/dist/SideNav-DoxX8Vi-.js.map +0 -1
- package/dist/Stepper-CvaR7OoT.js.map +0 -1
- package/dist/Switch-ClbHJvDU.js.map +0 -1
- package/dist/Tab-Cy4G562A.js.map +0 -1
- package/dist/Text-BjYHzUGW.js.map +0 -1
- package/dist/TextField-BsVxym0-.js.map +0 -1
- package/dist/TextField-DX6-K3jO.js.map +0 -1
- package/dist/Textarea-B3z6Y7VU.js.map +0 -1
- package/dist/TimeField-Bmcwic3C.js.map +0 -1
- package/dist/Toaster-CTjkTMie.js.map +0 -1
- package/dist/Toaster-CvY-A7zY.js.map +0 -1
- package/dist/Toolbar-BpCO-4zj.js.map +0 -1
- package/dist/Toolbar-pdJXcqY0.js.map +0 -1
- package/dist/ToolbarButtonToggle-3xbnm1Qr.js.map +0 -1
- package/dist/TreeSelectFieldSync-Cz8uOdpT.js.map +0 -1
- package/dist/TreeSelectMenuSync-Bk8BN6_B.js.map +0 -1
- package/dist/TypeaheadTextField-Dg7O5Yu5.js.map +0 -1
- package/dist/YearlessDateInputWithPicker-CpnLg01W.js.map +0 -1
- package/dist/bulkActionTypes-B20IInUD.js.map +0 -1
- package/dist/filter-state-CuiHPC94.js.map +0 -1
- package/dist/index-SZMmvI3D.js.map +0 -1
- package/dist/syncFilterUtils-CU5iJQSC.js.map +0 -1
- package/dist/useAdaptiveView-C0F7qnLD.js.map +0 -1
- package/dist/useInfiniteCombobox-HSttRaX5.js.map +0 -1
- package/dist/useInitialFocus-BIvXK1Rp.js.map +0 -1
- package/dist/useMenuInteraction-NEJXUD4I.js.map +0 -1
- package/dist/useNumberField-D_ic9i2q.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterBar-CBTAkEri.js","sources":["../src/internal/hooks/useContainerQuery/useContainerQuery.ts","../../hammer-icon/mdi/round/tune.svg","../src/beta/components/FilterBar/FilterDrawer.tsx","../src/beta/components/FilterBar/FilterBar.tsx"],"sourcesContent":["import { useEffect, useState, type RefObject } from \"react\";\nimport { core } from \"@servicetitan/hammer-token\";\n\n/**\n * Return type for the useContainerQuery hook\n */\nexport type ContainerQueryReturnProps = {\n /**\n * The breakpoint name\n */\n name: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n /**\n * Minimum width for this breakpoint\n */\n min: number | undefined;\n /**\n * Maximum width for this breakpoint\n */\n max: number | undefined;\n /**\n * Current container width\n */\n containerWidth: number;\n /**\n * Current container height\n */\n containerHeight: number;\n};\n\n/**\n * Determines if the current container width matches a specific breakpoint\n * @param containerWidth - The container width\n * @param name - The breakpoint name\n * @param min - Minimum width for this breakpoint\n * @param max - Maximum width for this breakpoint\n * @returns Breakpoint information if matched, undefined otherwise\n */\nfunction containerBreakpoint(\n containerWidth: number,\n name: ContainerQueryReturnProps[\"name\"],\n min?: number,\n max?: number,\n): ContainerQueryReturnProps | undefined {\n if (\n (min == null || containerWidth >= min) &&\n (max == null || containerWidth < max)\n ) {\n return {\n name,\n min,\n max,\n containerWidth,\n containerHeight: 0, // Will be updated with actual height\n } as const;\n }\n return undefined;\n}\n\n/**\n * Determines the current breakpoint based on container width and hammer-token breakpoint values.\n *\n * Features:\n * - Validates that all required hammer-token breakpoint values are available\n * - Uses cascade logic to determine the appropriate breakpoint\n * - Returns the first matching breakpoint in order of preference\n * - Handles edge cases where breakpoint values are missing\n * - Uses container dimensions for accurate measurements\n * - Supports all standard breakpoints (xs, sm, md, lg, xl, xxl)\n *\n * @param containerWidth - The width of the container element\n * @param containerHeight - The height of the container element\n * @returns Current breakpoint information or undefined if breakpoint values are unavailable\n */\nconst getContainerBreakpoint = (\n containerWidth: number,\n containerHeight: number,\n) => {\n if (!core.primitive?.BreakpointSm) return;\n if (!core.primitive?.BreakpointMd) return;\n if (!core.primitive?.BreakpointLg) return;\n if (!core.primitive?.BreakpointXl) return;\n if (!core.primitive?.BreakpointXxl) return;\n\n const sm = parseInt(core.primitive?.BreakpointSm.value);\n const md = parseInt(core.primitive?.BreakpointMd.value);\n const lg = parseInt(core.primitive?.BreakpointLg.value);\n const xl = parseInt(core.primitive?.BreakpointXl.value);\n const xxl = parseInt(core.primitive?.BreakpointXxl.value);\n\n const result =\n containerBreakpoint(containerWidth, \"xs\", undefined, sm) ??\n containerBreakpoint(containerWidth, \"sm\", sm, md) ??\n containerBreakpoint(containerWidth, \"md\", md, lg) ??\n containerBreakpoint(containerWidth, \"lg\", lg, xl) ??\n containerBreakpoint(containerWidth, \"xl\", xl, xxl) ??\n containerBreakpoint(containerWidth, \"xxl\", xxl, undefined);\n\n return result ? { ...result, containerHeight } : undefined;\n};\n\n/**\n * Custom hook for detecting current breakpoint based on container dimensions.\n *\n * Features:\n * - Detects current breakpoint based on container width instead of viewport width\n * - Supports all standard breakpoints (xs, sm, md, lg, xl, xxl)\n * - Provides container dimensions information\n * - Uses hammer-token breakpoint values for consistency\n * - Listens for container resize events using ResizeObserver\n * - Supports optional disable functionality\n * - Uses container element dimensions for accurate measurements\n *\n * @param containerRef - React ref to the container element to observe\n * @param props - Optional configuration object\n * @param props.disable - Whether to disable the hook\n * @returns Current breakpoint information or undefined if disabled\n */\nexport const useContainerQuery = (\n containerRef: RefObject<HTMLElement>,\n props?: { disable?: boolean },\n) => {\n const [size, setSize] = useState<ContainerQueryReturnProps | undefined>(\n undefined,\n );\n\n useEffect(() => {\n if (props?.disable || !containerRef.current) return;\n\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const { width, height } = entry.contentRect;\n const breakpoint = getContainerBreakpoint(width, height);\n setSize(breakpoint);\n }\n });\n\n resizeObserver.observe(containerRef.current);\n\n // Set initial size\n const rect = containerRef.current.getBoundingClientRect();\n setSize(getContainerBreakpoint(rect.width, rect.height));\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [containerRef, props?.disable]);\n\n if (props?.disable) return undefined;\n return size;\n};\n","import * as React from \"react\";\nconst SvgTune = (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: \"M3 18c0 .55.45 1 1 1h5v-2H4c-.55 0-1 .45-1 1zM3 6c0 .55.45 1 1 1h9V5H4c-.55 0-1 .45-1 1zm10 14v-1h7c.55 0 1-.45 1-1s-.45-1-1-1h-7v-1c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1s1-.45 1-1zM7 10v1H4c-.55 0-1 .45-1 1s.45 1 1 1h3v1c0 .55.45 1 1 1s1-.45 1-1v-4c0-.55-.45-1-1-1s-1 .45-1 1zm14 2c0-.55-.45-1-1-1h-9v2h9c.55 0 1-.45 1-1zm-5-3c.55 0 1-.45 1-1V7h3c.55 0 1-.45 1-1s-.45-1-1-1h-3V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1z\" }));\nexport default SvgTune;\n","import {\n useContext,\n useEffect,\n useState,\n useMemo,\n useCallback,\n useRef,\n} from \"react\";\nimport IconTune from \"@servicetitan/hammer-icon/mdi/round/tune.svg\";\nimport IconClose from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport type {\n DateListFilter,\n DateListLibraryOptionId,\n Filter,\n} from \"./internal/types\";\nimport { FilterGroupContext } from \"./internal/FilterGroupContext\";\nimport { Flex } from \"../../../components/Flex\";\nimport {\n checkActiveFilters,\n getActiveFilters,\n resetFilters,\n updateSingleFilter,\n cloneFiltersWithItemRefs,\n hasFilterSelectionChanged,\n} from \"./internal/utils/filter-state\";\nimport { getAdapter } from \"./internal/adapters\";\nimport { DateListDialog } from \"./FilterDateList\";\nimport ButtonToggle from \"../../../components/ButtonToggle\";\nimport Chip from \"../../../components/Chip\";\nimport Drawer from \"../../../components/Drawer\";\nimport Button from \"../../../components/Button\";\n\nimport { useToolbarSize } from \"../Toolbar/internal/ToolbarContext\";\n\nimport cx from \"classnames\";\nimport styles from \"./FilterBar.module.scss\";\n\n/**\n * FilterDrawer component provides a drawer interface for filter selection.\n * Always operates in controlled mode with batch updates.\n * Built into FilterGroup for batch editing of drawer-only and below-breakpoint filters.\n *\n * Features:\n * - Shows all available filters in a side panel\n * - Maintains separate draft state for all filters\n * - Updates filters only when Apply is clicked\n * - Provides Clear All functionality\n * - Supports boolean, custom, single-select, multi-select, date, and date range filter types\n * - Integrates with FilterGroup context for state management\n * - Handles date and date range filters with appropriate input components\n */\nexport const FilterDrawer = () => {\n const [open, setOpen] = useState(false);\n\n // Get filter context from parent\n const {\n filters,\n updateFilter,\n onFilterChange,\n drawerOnlyFilters,\n showInlineFilters,\n } = useContext(FilterGroupContext);\n const toolbarSize = useToolbarSize();\n\n // Local draft state for filters within the drawer\n const [draftFilters, setDraftFilters] = useState<Filter[]>(filters);\n\n // Open dialog for a dateList library option (On…/Before…/After…/Custom Range…).\n const [dateListDialogState, setDateListDialogState] = useState<{\n filterId: string;\n libraryId: DateListLibraryOptionId;\n } | null>(null);\n\n // Filters not reachable from the toolbar: when inline filters are shown,\n // only drawer-only filters qualify; otherwise every filter qualifies.\n const filtersNotInToolbar = showInlineFilters ? drawerOnlyFilters : filters;\n\n const activeFiltersCount = getActiveFilters(filtersNotInToolbar).length;\n\n // Track previous state to detect when to sync draft\n const prevOpenRef = useRef(open);\n const prevFiltersRef = useRef<Filter[]>(filters);\n\n /**\n * Reset draft filters when drawer opens and sync when filter selections change while open\n * Ensures drawer always shows current filter state\n */\n useEffect(() => {\n const justOpened = open && !prevOpenRef.current;\n prevOpenRef.current = open;\n\n if (open) {\n // Sync draft state if:\n // 1. Drawer just opened, OR\n // 2. Any filter selection value changed while already open (race condition fix)\n // Don't sync when only items arrays change (preserves selections during search)\n const anySelectionChanged = prevFiltersRef.current.some(\n (prevFilter, index) => {\n const newFilter = filters[index];\n return newFilter && hasFilterSelectionChanged(prevFilter, newFilter);\n },\n );\n\n const shouldSync = justOpened || anySelectionChanged;\n\n if (shouldSync) {\n setDraftFilters(cloneFiltersWithItemRefs(filters));\n }\n\n prevFiltersRef.current = filters;\n }\n }, [open, filters]);\n\n /**\n * Handles changing a draft filter value\n * Updates only the draft state, not the actual filters\n *\n * @param filterId - ID of the filter to update\n * @param value - New value for the filter\n */\n const handleDraftChange = useCallback((filterId: string, value: unknown) => {\n setDraftFilters((draft) => updateSingleFilter(draft, filterId, value));\n }, []);\n\n /**\n * Clears all draft filters in the drawer\n * Does not affect the actual filters until Apply is clicked\n */\n const clearDraftFilters = () => {\n setDraftFilters(resetFilters(draftFilters));\n };\n\n const hasActiveDraftFilters = checkActiveFilters(draftFilters);\n\n const requestDateListDialog = useCallback(\n (filterId: string, libraryId: DateListLibraryOptionId) => {\n setDateListDialogState({ filterId, libraryId });\n },\n [],\n );\n\n const filterForm = useMemo(\n () =>\n draftFilters.map((draftFilter) => {\n const originalFilter = filters.find((f) => f.id === draftFilter.id);\n if (!originalFilter) return null;\n\n return getAdapter(draftFilter).renderDrawer({\n originalFilter,\n draftFilter,\n onDraftChange: handleDraftChange,\n requestDateListDialog,\n });\n }),\n [draftFilters, filters, handleDraftChange, requestDateListDialog],\n );\n\n const applyFiltering = () => {\n draftFilters.forEach((draftFilter) => {\n const value = getAdapter(draftFilter).getValue(draftFilter);\n updateFilter(draftFilter.id, value, false);\n });\n\n onFilterChange?.(draftFilters);\n setOpen(false);\n };\n\n const handleCancel = () => {\n setOpen(false);\n };\n\n const hasHiddenActiveFilters = activeFiltersCount > 0;\n\n const triggerClasses = cx(\n styles[\"filter-button-trigger\"],\n styles[\"filter-drawer-trigger\"],\n {\n [styles[\"filter-drawer-trigger--chipped\"]]: hasHiddenActiveFilters,\n },\n );\n\n const dateListDialogTarget = dateListDialogState\n ? draftFilters.find(\n (f): f is DateListFilter =>\n f.id === dateListDialogState.filterId && f.type === \"dateList\",\n )\n : undefined;\n const dateListDialogSelected = dateListDialogTarget?.selectedOption;\n const dateListDialogInitialValue =\n dateListDialogSelected &&\n dateListDialogSelected.id === dateListDialogState?.libraryId &&\n dateListDialogSelected.value !== null\n ? dateListDialogSelected.value\n : undefined;\n\n return (\n <>\n <ButtonToggle\n data-anv=\"filter-group-drawer-trigger\"\n icon={{ before: IconTune }}\n onClick={() => setOpen(true)}\n className={triggerClasses}\n checked={open}\n size={toolbarSize}\n >\n Filters\n {hasHiddenActiveFilters && (\n <Chip\n size=\"small\"\n color=\"#0265DC\"\n label={activeFiltersCount.toString()}\n />\n )}\n </ButtonToggle>\n\n <Drawer\n data-anv=\"filter-group-drawer\"\n data-testid=\"filter-group-drawer\"\n open={open}\n onClose={() => setOpen(false)}\n >\n <Drawer.Content>\n <Flex direction=\"column\" gap={6} grow={1}>\n {filterForm}\n </Flex>\n </Drawer.Content>\n\n <Drawer.Footer>\n <Flex\n justifyContent={\n hasActiveDraftFilters ? \"space-between\" : \"flex-end\"\n }\n grow={1}\n >\n {hasActiveDraftFilters && (\n <Button\n appearance=\"ghost\"\n icon={{ before: IconClose }}\n onClick={clearDraftFilters}\n >\n Clear All Filters\n </Button>\n )}\n\n <Flex gap=\"3\">\n <Button onClick={handleCancel}>Cancel</Button>\n <Button appearance=\"primary\" onClick={applyFiltering}>\n Apply\n </Button>\n </Flex>\n </Flex>\n </Drawer.Footer>\n </Drawer>\n <DateListDialog\n libraryId={dateListDialogState?.libraryId ?? null}\n parentFilterId={dateListDialogState?.filterId ?? \"\"}\n initialValue={dateListDialogInitialValue}\n mode={dateListDialogTarget?.mode}\n dialogCtaLabel=\"Save\"\n onCommit={(option) => {\n if (dateListDialogState) {\n handleDraftChange(dateListDialogState.filterId, option);\n }\n setDateListDialogState(null);\n }}\n onCancel={() => setDateListDialogState(null)}\n />\n </>\n );\n};\n","import {\n type ComponentPropsWithoutRef,\n forwardRef,\n useEffect,\n useMemo,\n useRef,\n useState,\n useCallback,\n} from \"react\";\nimport { useMergeRefs } from \"../../../hooks\";\nimport CloseIcon from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport type { Filter } from \"./internal/types\";\nimport { FilterItemWrapper } from \"./FilterItemWrapper\";\nimport Button from \"../../../components/Button\";\nimport type { LayoutUtilProps } from \"../../../types\";\nimport { useContainerQuery, useLayoutPropsUtil } from \"../../../internal/hooks\";\nimport {\n checkActiveFilters,\n resetFilters,\n updateSingleFilter,\n hasFilterSelectionChanged,\n preserveFilterState,\n} from \"./internal/utils/filter-state\";\nimport { getAdapter } from \"./internal/adapters\";\nimport { FilterGroupContext } from \"./internal/FilterGroupContext\";\nimport { FilterDrawer } from \"./FilterDrawer\";\nimport { ToolbarContext } from \"../Toolbar/internal/ToolbarContext\";\nimport type { ToolbarSize } from \"../Toolbar/types\";\nimport {\n getToolbarElements,\n handleToolbarKeyDown,\n updateToolbarItemsTabIndex,\n} from \"../Toolbar/internal/utils/accessibility\";\nimport { Flex } from \"../../../components/Flex\";\n\nimport styles from \"./FilterBar.module.scss\";\n\n/**\n * Props for the FilterBar component\n *\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends LayoutUtilProps\n */\nexport type FilterBarProps = ComponentPropsWithoutRef<\"div\"> &\n LayoutUtilProps & {\n /** Array of filter objects */\n filters: Filter[];\n /** Description of the content this filter bar is associated with, used for accessibility */\n associatedContent: string;\n /** Callback function when filters change */\n onFilterChange: (filters: Filter[]) => void;\n /** Whether the filters submission is controlled via an apply button */\n controlledFiltering?: boolean;\n /**\n * Size of filter controls\n * @default xsmall\n */\n size?: ToolbarSize;\n /**\n * When true, filters stay inline at every container width instead of\n * collapsing to drawer-only mode at narrow widths.\n * @default false\n */\n disableCollapse?: boolean;\n };\n\n/**\n * FilterBar component for displaying a standalone group of filters with toggles and a clear button.\n *\n * Features:\n * - Standalone component with `role=\"toolbar\"` and keyboard navigation\n * - Renders filter toggles and popovers for all filter types\n * - Supports controlled and uncontrolled filtering\n * - Integrates with FilterDrawer for batch filter editing of drawer-only filters\n * - Provides a clear all filters button\n * - Shares filter state via context for child components\n * - Supports boolean, custom, single-select, multi-select, date, and date range filter types\n * - Preserves filter state when filter configuration changes\n * - Responsive: collapses to drawer-only mode below 640px; opt out via `disableCollapse`\n * - Always wraps; never collapses items into an overflow menu\n * - Can be composed alongside Toolbar as a sibling using Flex layout\n *\n * @example\n * <FilterBar\n * associatedContent=\"invoices\"\n * filters={filters}\n * onFilterChange={handleFilter}\n * controlledFiltering={true}\n * />\n *\n * @example\n * // With Toolbar as sibling\n * <Flex alignItems=\"center\" justifyContent=\"space-between\">\n * <Toolbar associatedContent=\"invoice actions\">\n * <Toolbar.Button icon={SaveIcon} aria-label=\"Save\" />\n * </Toolbar>\n * <FilterBar\n * associatedContent=\"invoices\"\n * filters={filters}\n * onFilterChange={handleFilter}\n * />\n * </Flex>\n */\nexport const FilterBar = forwardRef<HTMLDivElement, FilterBarProps>(\n function FilterBarInner(props, ref) {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n filters: initialFilters,\n onFilterChange,\n controlledFiltering = false,\n associatedContent,\n size = \"xsmall\",\n disableCollapse = false,\n className,\n style,\n onKeyDown,\n ...rest\n } = componentProps;\n\n const [filters, setFilters] = useState<Filter[]>(initialFilters);\n const filterBarRef = useRef<HTMLDivElement>(null);\n const containerQuery = useContainerQuery(filterBarRef);\n\n const showInlineFilters =\n disableCollapse || !!(containerQuery && containerQuery.name !== \"xs\");\n\n // Update filters when props change\n useEffect(() => {\n setFilters((prevFilters) => {\n const existingFiltersMap = new Map(prevFilters.map((f) => [f.id, f]));\n\n return initialFilters.map((newFilter: Filter) => {\n const existingFilter = existingFiltersMap.get(newFilter.id);\n\n if (!existingFilter) {\n return newFilter;\n }\n\n if (!hasFilterSelectionChanged(existingFilter, newFilter)) {\n return preserveFilterState(newFilter, existingFilter);\n }\n\n return newFilter;\n });\n });\n }, [initialFilters]);\n\n /**\n * Updates filter state when a filter is changed\n *\n * @param filterId - ID of the filter to update\n * @param value - New value for the filter\n * @param submit - Whether to submit the filter change\n */\n const updateFilter = useCallback(\n (filterId: string, value: unknown, submit: boolean) => {\n setFilters((prevFilters) => {\n const updatedFilters = updateSingleFilter(\n prevFilters,\n filterId,\n value,\n );\n\n if (submit) {\n onFilterChange?.(updatedFilters);\n }\n\n return updatedFilters;\n });\n },\n [onFilterChange],\n );\n\n /**\n * Clears all active filters\n */\n const clearAllFilters = () => {\n const resetAllFilters = resetFilters(filters);\n setFilters(resetAllFilters);\n onFilterChange?.(resetAllFilters);\n\n requestAnimationFrame(() => {\n if (filterBarRef.current) {\n const firstFocusable = filterBarRef.current.querySelector(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n ) as HTMLElement;\n\n if (firstFocusable) {\n firstFocusable.focus();\n }\n }\n });\n };\n\n const hasActiveFilters = checkActiveFilters(filters);\n\n const { inlineFilters, drawerOnlyFilters } = useMemo(() => {\n const inline: Filter[] = [];\n const drawer: Filter[] = [];\n for (const f of filters) {\n (f.drawerOnly ? drawer : inline).push(f);\n }\n // The search filter is a pinned, always-visible field — keyboard\n // navigation treats it as a fixed edge of the roving-focus sequence\n // (see the ArrowLeft/ArrowRight boundary handoff below), so it always\n // renders first regardless of where it sits in `filters`.\n const searchFilter = inline.find((f) => f.type === \"search\");\n const orderedInline = searchFilter\n ? [searchFilter, ...inline.filter((f) => f !== searchFilter)]\n : inline;\n return { inlineFilters: orderedInline, drawerOnlyFilters: drawer };\n }, [filters]);\n\n // The drawer (and its trigger) only exists when at least one filter is\n // unreachable from the toolbar — either because the container is too\n // narrow to show inline filters or the filter is configured as drawer-only.\n const shouldShowDrawer = !showInlineFilters || drawerOnlyFilters.length > 0;\n\n const filterGroupControls = inlineFilters.map((filter) =>\n getAdapter(filter).renderBarControl({\n filter,\n updateFilter,\n controlledFiltering,\n }),\n );\n\n // Provide ToolbarContext so filter sub-components read size from FilterBar.\n // overflow is omitted — it's optional and defaults to wrap behavior.\n const toolbarContextValue = useMemo(\n () => ({\n overflowItems: [],\n addItem: () => {},\n removeItem: () => {},\n toolbarRef: filterBarRef,\n size,\n }),\n [size],\n );\n\n const filterGroupContextValue = useMemo(\n () => ({\n filterGroupRef: filterBarRef,\n filters,\n updateFilter,\n onFilterChange,\n controlledFiltering,\n associatedContent,\n showInlineFilters,\n drawerOnlyFilters,\n }),\n [\n filterBarRef,\n filters,\n updateFilter,\n onFilterChange,\n controlledFiltering,\n associatedContent,\n showInlineFilters,\n drawerOnlyFilters,\n ],\n );\n\n // Initialize tabindex values for keyboard navigation\n useEffect(() => {\n if (filterBarRef.current) {\n updateToolbarItemsTabIndex(filterBarRef.current);\n }\n }, [filters]);\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (filterBarRef.current) {\n // The search field's input keeps a fixed tabindex and is excluded\n // from the roving-tabindex pool (see FilterSearchField), so the\n // generic handler below only knows about the filter chips and\n // wraps within just that pool. When a search field is present,\n // treat it as the boundary neighbor instead: ArrowLeft from the\n // first chip and ArrowRight from the last chip go to the search\n // input rather than wrapping among the chips.\n const searchInput = filterBarRef.current.querySelector<HTMLElement>(\n '[data-anv=\"filter-search-field\"] input',\n );\n\n if (searchInput) {\n const items = getToolbarElements(filterBarRef.current);\n const activeElement = event.target as HTMLElement;\n const activeItem = items.find(\n (item) =>\n item === activeElement ||\n Array.from(item.children).some(\n (child) => child === activeElement,\n ),\n );\n const activeIndex = activeItem ? items.indexOf(activeItem) : -1;\n\n if (\n (event.code === \"ArrowLeft\" && activeIndex === 0) ||\n (event.code === \"ArrowRight\" && activeIndex === items.length - 1)\n ) {\n event.preventDefault();\n searchInput.focus();\n onKeyDown?.(event);\n return;\n }\n }\n\n handleToolbarKeyDown(event, filterBarRef.current);\n }\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n return (\n <ToolbarContext.Provider value={toolbarContextValue}>\n <FilterGroupContext.Provider value={filterGroupContextValue}>\n <Flex\n ref={useMergeRefs([filterBarRef, ref])}\n role=\"toolbar\"\n aria-label={`Filters for ${associatedContent}. Use arrow keys to navigate through filter controls.`}\n aria-orientation=\"horizontal\"\n tabIndex={-1}\n onKeyDown={handleKeyDown}\n alignItems=\"center\"\n gap={1}\n wrap=\"wrap\"\n className={className}\n style={styleCombined}\n data-anv=\"filter-bar\"\n {...rest}\n >\n <Flex\n alignItems=\"center\"\n gap={1}\n wrap=\"wrap\"\n grow={1}\n data-anv=\"toolbar-content\"\n >\n {showInlineFilters && filterGroupControls}\n {shouldShowDrawer && <FilterDrawer />}\n\n {showInlineFilters && hasActiveFilters && (\n <FilterItemWrapper>\n <Button\n appearance=\"ghost\"\n size={size}\n className={styles[\"filter-button-trigger\"]}\n icon={{\n before: CloseIcon,\n }}\n onClick={clearAllFilters}\n >\n Clear Filters\n </Button>\n </FilterItemWrapper>\n )}\n </Flex>\n </Flex>\n </FilterGroupContext.Provider>\n </ToolbarContext.Provider>\n );\n },\n);\n\nFilterBar.displayName = \"FilterBar\";\n"],"names":["core.primitive?.BreakpointSm","core.primitive?.BreakpointMd","core.primitive?.BreakpointLg","core.primitive?.BreakpointXl","core.primitive?.BreakpointXxl","IconTune","IconClose","CloseIcon"],"mappings":"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"}
|
package/dist/FilterBar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { F as FilterBar, F as default } from './FilterBar-
|
|
1
|
+
export { F as FilterBar, F as default } from './FilterBar-CBTAkEri.js';
|
|
2
2
|
//# sourceMappingURL=FilterBar.js.map
|
|
@@ -3,10 +3,10 @@ import { forwardRef } from 'react';
|
|
|
3
3
|
import { c as cx } from './index-De1g9FRV.js';
|
|
4
4
|
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';
|
|
5
5
|
|
|
6
|
-
import './Flex.css';const flex = "
|
|
6
|
+
import './Flex.css';const flex = "_flex_1c0z6_1";
|
|
7
7
|
const styles = {
|
|
8
8
|
flex: flex,
|
|
9
|
-
"inline-flex": "_inline-
|
|
9
|
+
"inline-flex": "_inline-flex_1c0z6_6"
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
const Flex = forwardRef((props, ref) => {
|
|
@@ -97,4 +97,4 @@ const Flex = forwardRef((props, ref) => {
|
|
|
97
97
|
Flex.displayName = "Flex";
|
|
98
98
|
|
|
99
99
|
export { Flex as F };
|
|
100
|
-
//# sourceMappingURL=Flex-
|
|
100
|
+
//# sourceMappingURL=Flex-CRF7gj0_.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Flex-CRF7gj0_.js","sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./Flex.module.scss\";\nimport type { FlexSpecificProps } from \"./internal/FlexSpecificProps\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\n/**\n * Props for the Flex component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends FlexSpecificProps\n */\nexport type FlexProps = ComponentPropsWithoutRef<\"div\"> &\n FlexSpecificProps & {\n /**\n * Responsive props for small screens (sm breakpoint).\n */\n sm?: FlexSpecificProps;\n /**\n * Responsive props for medium screens (md breakpoint).\n */\n md?: FlexSpecificProps;\n /**\n * Responsive props for large screens (lg breakpoint).\n */\n lg?: FlexSpecificProps;\n /**\n * Responsive props for extra large screens (xl breakpoint).\n */\n xl?: FlexSpecificProps;\n /**\n * Responsive props for extra extra large screens (xxl breakpoint).\n */\n xxl?: FlexSpecificProps;\n };\n\n/**\n * Flex component for creating flexible layouts using CSS Flexbox.\n *\n * Features:\n * - CSS Flexbox layout with full control over flex properties\n * - Support for both flex and inline-flex display modes\n * - Responsive design with breakpoint-specific props (sm, md, lg, xl, xxl)\n * - Comprehensive layout utilities for spacing, alignment, and positioning\n * - Automatic style generation and class management\n * - Support for all standard div element props\n * - Flexible direction, grow, shrink, basis, and wrap controls\n *\n * @example\n * <Flex direction=\"row\" gap=\"4\" alignItems=\"center\">\n * <div>Item 1</div>\n * <div>Item 2</div>\n * <div>Item 3</div>\n * </Flex>\n *\n * @example\n * <Flex\n * direction=\"column\"\n * gap=\"2\"\n * md={{ direction: \"row\", gap: \"4\" }}\n * >\n * <div>Item 1</div>\n * <div>Item 2</div>\n * <div>Item 3</div>\n * </Flex>\n */\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {\n const {\n inline,\n direction,\n grow,\n shrink,\n basis,\n wrap,\n sm,\n md,\n lg,\n xl,\n xxl,\n ...nonLayoutProps\n } = props;\n const combineLayoutProps = {\n ...nonLayoutProps,\n flexDirection: direction,\n flexGrow: grow,\n flexShrink: shrink,\n flexBasis: basis,\n flexWrap: wrap,\n sm: {\n ...sm,\n flexDirection: sm?.direction,\n flexGrow: sm?.grow,\n flexShrink: sm?.shrink,\n flexBasis: sm?.basis,\n flexWrap: sm?.wrap,\n },\n md: {\n ...md,\n flexDirection: md?.direction,\n flexGrow: md?.grow,\n flexShrink: md?.shrink,\n flexBasis: md?.basis,\n flexWrap: md?.wrap,\n },\n lg: {\n ...lg,\n flexDirection: lg?.direction,\n flexGrow: lg?.grow,\n flexShrink: lg?.shrink,\n flexBasis: lg?.basis,\n flexWrap: lg?.wrap,\n },\n xl: {\n ...xl,\n flexDirection: xl?.direction,\n flexGrow: xl?.grow,\n flexShrink: xl?.shrink,\n flexBasis: xl?.basis,\n flexWrap: xl?.wrap,\n },\n xxl: {\n ...xxl,\n flexDirection: xxl?.direction,\n flexGrow: xxl?.grow,\n flexShrink: xxl?.shrink,\n flexBasis: xxl?.basis,\n flexWrap: xxl?.wrap,\n },\n };\n const { layoutStyles, componentProps } =\n useLayoutPropsUtil(combineLayoutProps);\n\n const { children, className, style, ...rest } = componentProps;\n\n const flexClassNames = cx(className, {\n [styles[\"flex\"]]: !inline,\n [styles[\"inline-flex\"]]: inline,\n });\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n return (\n <div\n className={flexClassNames}\n data-anv=\"flex\"\n style={styleCombined}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n});\n\nFlex.displayName = \"Flex\";\n"],"names":[],"mappings":"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"}
|
package/dist/Flex.css
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
.anvil2 {.
|
|
1
|
+
.anvil2 {._flex_1c0z6_1 {
|
|
2
2
|
box-sizing: border-box;
|
|
3
3
|
display: flex;
|
|
4
|
-
|
|
5
|
-
}._inline-flex_1yrhm_7 {
|
|
4
|
+
}._inline-flex_1c0z6_6 {
|
|
6
5
|
display: inline-flex;
|
|
7
6
|
box-sizing: border-box;
|
|
8
|
-
font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
|
|
9
7
|
}
|
|
10
8
|
}
|
package/dist/Flex.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { F as Flex, F as default } from './Flex-
|
|
1
|
+
export { F as Flex, F as default } from './Flex-CRF7gj0_.js';
|
|
2
2
|
//# sourceMappingURL=Flex.js.map
|
|
@@ -3,11 +3,11 @@ import { forwardRef } from 'react';
|
|
|
3
3
|
import { c as cx } from './index-De1g9FRV.js';
|
|
4
4
|
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';
|
|
5
5
|
|
|
6
|
-
import './Grid.css';const grid = "
|
|
6
|
+
import './Grid.css';const grid = "_grid_14op6_1";
|
|
7
7
|
const styles = {
|
|
8
8
|
grid: grid,
|
|
9
|
-
"inline-grid": "_inline-
|
|
10
|
-
"grid-item": "_grid-
|
|
9
|
+
"inline-grid": "_inline-grid_14op6_6",
|
|
10
|
+
"grid-item": "_grid-item_14op6_11"
|
|
11
11
|
};
|
|
12
12
|
|
|
13
13
|
const GridItem = forwardRef(
|
|
@@ -146,4 +146,4 @@ const Grid = Object.assign(
|
|
|
146
146
|
Grid.displayName = "Grid";
|
|
147
147
|
|
|
148
148
|
export { Grid as G };
|
|
149
|
-
//# sourceMappingURL=Grid-
|
|
149
|
+
//# sourceMappingURL=Grid-CvGQrIhE.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Grid-CvGQrIhE.js","sources":["../src/components/Grid/internal/GridItem.tsx","../src/components/Grid/Grid.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"../Grid.module.scss\";\nimport { useLayoutPropsUtil } from \"../../../internal/hooks\";\nimport type { LayoutUtilProps } from \"../../../types\";\n\n/**\n * Props for the GridItem component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends LayoutUtilProps\n */\nexport type GridItemProps = ComponentPropsWithoutRef<\"div\"> & LayoutUtilProps;\n\n/**\n * GridItem component for individual items within a CSS Grid layout.\n *\n * Features:\n * - Individual grid item with full layout utility support\n * - Automatic grid item styling and class management\n * - Comprehensive layout utilities for positioning and sizing\n * - Support for all standard div element props\n * - Flexible grid positioning and sizing controls\n * - Automatic style generation and class management\n * - Works seamlessly with Grid component\n *\n * @example\n * <Grid templateColumns=\"repeat(2, 1fr)\" gap=\"4\">\n * <Grid.Item>Grid Item 1</Grid.Item>\n * <Grid.Item>Grid Item 2</Grid.Item>\n * </Grid>\n */\nexport const GridItem = forwardRef<HTMLDivElement, GridItemProps>(\n (props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const { className, children, style, ...rest } = componentProps;\n\n const gridItemClassNames = cx([styles[\"grid-item\"]], className, {});\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n return (\n <div\n className={gridItemClassNames}\n data-anv=\"grid-item\"\n ref={ref}\n style={styleCombined}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n\nGridItem.displayName = \"GridItem\";\n","import { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport styles from \"./Grid.module.scss\";\nimport type { GridSpecificProps } from \"./internal/GridSpecificProps\";\nimport { GridItem } from \"./internal/GridItem\";\n\n/**\n * Props for the Grid component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends GridSpecificProps\n */\nexport type GridProps = ComponentPropsWithoutRef<\"div\"> & {\n /**\n * Applies `display: inline-grid` instead of `grid`\n */\n inline?: boolean;\n} & GridSpecificProps & {\n /**\n * Responsive props for small screens (sm breakpoint).\n */\n sm?: GridSpecificProps;\n /**\n * Responsive props for medium screens (md breakpoint).\n */\n md?: GridSpecificProps;\n /**\n * Responsive props for large screens (lg breakpoint).\n */\n lg?: GridSpecificProps;\n /**\n * Responsive props for extra large screens (xl breakpoint).\n */\n xl?: GridSpecificProps;\n /**\n * Responsive props for extra extra large screens (xxl breakpoint).\n */\n xxl?: GridSpecificProps;\n };\n\n/**\n * Grid component for creating responsive multi-column CSS Grid layouts that arrange content or tiles into evenly spaced columns and rows which reflow across breakpoints.\n *\n * Features:\n * - CSS Grid layout with full control over grid properties\n * - Support for both grid and inline-grid display modes\n * - Responsive design with breakpoint-specific props (sm, md, lg, xl, xxl)\n * - Comprehensive layout utilities for spacing, alignment, and positioning\n * - Template columns, rows, and areas configuration\n * - Auto columns and rows sizing\n * - Automatic style generation and class management\n * - Support for all standard div element props\n * - Flexible grid template and auto-sizing controls\n * - Automatic tracking ID generation for analytics\n * - Compound component structure with Item sub-component\n *\n * @example\n * <Grid templateColumns=\"repeat(3, 1fr)\" gap=\"4\">\n * <Grid.Item>Grid Item 1</Grid.Item>\n * <Grid.Item>Grid Item 2</Grid.Item>\n * <Grid.Item>Grid Item 3</Grid.Item>\n * </Grid>\n *\n * @example\n * <Grid\n * templateColumns=\"repeat(1, 1fr)\"\n * gap=\"2\"\n * md={{ templateColumns: \"repeat(3, 1fr)\", gap: \"4\" }}\n * >\n * <Grid.Item>Grid Item 1</Grid.Item>\n * <Grid.Item>Grid Item 2</Grid.Item>\n * <Grid.Item>Grid Item 3</Grid.Item>\n * </Grid>\n */\nexport const Grid = Object.assign(\n forwardRef<HTMLDivElement, GridProps>(function GridInner(props, ref) {\n const {\n inline,\n templateColumns,\n templateRows,\n templateAreas,\n autoColumns,\n autoRows,\n sm,\n md,\n lg,\n xl,\n xxl,\n ...nonLayoutProps\n } = props;\n const combineLayoutProps = {\n ...nonLayoutProps,\n gridTemplateColumns: props.templateColumns,\n gridTemplateRows: props.templateRows,\n gridTemplateAreas: props.templateAreas,\n gridAutoColumns: props.autoColumns,\n gridAutoRows: props.autoRows,\n sm: {\n ...sm,\n gridTemplateColumns: sm?.templateColumns,\n gridTemplateRows: sm?.templateRows,\n gridTemplateAreas: sm?.templateAreas,\n gridAutoColumns: sm?.autoColumns,\n gridAutoRows: sm?.autoRows,\n },\n md: {\n ...md,\n gridTemplateColumns: md?.templateColumns,\n gridTemplateRows: md?.templateRows,\n gridTemplateAreas: md?.templateAreas,\n gridAutoColumns: md?.autoColumns,\n gridAutoRows: md?.autoRows,\n },\n lg: {\n ...lg,\n gridTemplateColumns: lg?.templateColumns,\n gridTemplateRows: lg?.templateRows,\n gridTemplateAreas: lg?.templateAreas,\n gridAutoColumns: lg?.autoColumns,\n gridAutoRows: lg?.autoRows,\n },\n xl: {\n ...xl,\n gridTemplateColumns: xl?.templateColumns,\n gridTemplateRows: xl?.templateRows,\n gridTemplateAreas: xl?.templateAreas,\n gridAutoColumns: xl?.autoColumns,\n gridAutoRows: xl?.autoRows,\n },\n xxl: {\n ...xxl,\n gridTemplateColumns: xxl?.templateColumns,\n gridTemplateRows: xxl?.templateRows,\n gridTemplateAreas: xxl?.templateAreas,\n gridAutoColumns: xxl?.autoColumns,\n gridAutoRows: xxl?.autoRows,\n },\n };\n const { layoutStyles, componentProps } =\n useLayoutPropsUtil(combineLayoutProps);\n const { children, className, style, ...rest } = componentProps;\n\n const gridClassNames = cx(className, {\n [styles[\"grid\"]]: !inline,\n [styles[\"inline-grid\"]]: inline,\n });\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n return (\n <div\n className={gridClassNames}\n data-anv=\"grid\"\n style={styleCombined}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n }),\n {\n /**\n * GridItem component for individual items within a CSS Grid layout.\n *\n * Features:\n * - Individual grid item with full layout utility support\n * - Automatic grid item styling and class management\n * - Comprehensive layout utilities for positioning and sizing\n * - Support for all standard div element props\n * - Flexible grid positioning and sizing controls\n * - Automatic style generation and class management\n * - Works seamlessly with Grid component\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Grid templateColumns=\"repeat(2, 1fr)\" gap=\"4\">\n * <Grid.Item>Grid Item 1</Grid.Item>\n * <Grid.Item>Grid Item 2</Grid.Item>\n * </Grid>\n */\n Item: GridItem,\n },\n);\nGrid.displayName = \"Grid\";\n"],"names":[],"mappings":"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"}
|
package/dist/Grid.css
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
.anvil2 {.
|
|
1
|
+
.anvil2 {._grid_14op6_1 {
|
|
2
2
|
display: grid;
|
|
3
3
|
box-sizing: border-box;
|
|
4
|
-
|
|
5
|
-
}._inline-grid_fgegg_7 {
|
|
4
|
+
}._inline-grid_14op6_6 {
|
|
6
5
|
display: inline-grid;
|
|
7
6
|
box-sizing: border-box;
|
|
8
|
-
|
|
9
|
-
}._grid-item_fgegg_13 {
|
|
7
|
+
}._grid-item_14op6_11 {
|
|
10
8
|
font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
|
|
11
9
|
font-size: 100%;
|
|
12
10
|
color: inherit;
|
package/dist/Grid.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { G as Grid, G as default } from './Grid-
|
|
1
|
+
export { G as Grid, G as default } from './Grid-CvGQrIhE.js';
|
|
2
2
|
//# sourceMappingURL=Grid.js.map
|
|
@@ -38,10 +38,10 @@ const Helper = forwardRef((props, ref) => {
|
|
|
38
38
|
"/",
|
|
39
39
|
maxLength
|
|
40
40
|
] }),
|
|
41
|
-
isTyping &&
|
|
41
|
+
isTyping && maxLength ? maxLength - inputLength >= 1 ? /* @__PURE__ */ jsx(SrOnly, { children: /* @__PURE__ */ jsx("span", { "aria-live": "polite", "aria-atomic": "true", children: `${maxLength - inputLength} character${maxLength - inputLength !== 1 ? "s" : ""} left` }) }) : /* @__PURE__ */ jsx(SrOnly, { children: /* @__PURE__ */ jsx("span", { role: "alert", children: "Maximum characters count reached" }) }) : null
|
|
42
42
|
] });
|
|
43
43
|
});
|
|
44
44
|
Helper.displayName = "Helper";
|
|
45
45
|
|
|
46
46
|
export { Helper as H };
|
|
47
|
-
//# sourceMappingURL=Helper-
|
|
47
|
+
//# sourceMappingURL=Helper-Bq6Npkgh.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Helper-Bq6Npkgh.js","sources":["../src/internal/components/Helper/Helper.tsx"],"sourcesContent":["import { forwardRef, type AriaAttributes, type ReactElement } from \"react\";\nimport styles from \"./Helper.module.scss\";\nimport { FieldMessage } from \"../../../components/FieldMessage\";\nimport { SrOnly } from \"../../../components/SrOnly\";\n\nexport type HelperProps = {\n id?: string;\n // required?: boolean;\n hint?: ReactElement | string;\n description?: ReactElement | string;\n /**\n * Error message(s) to display. Supports a single string or an array of strings.\n */\n error?: string | string[];\n /**\n * Warning message(s) to display. Supports a single string or an array of strings.\n */\n warning?: string | string[];\n /**\n * @deprecated Use the `error` prop instead.\n */\n errorMessage?: ReactElement | string;\n /**\n * @deprecated No longer used. Error messages always use `aria-live=\"assertive\"`.\n */\n errorAriaLive?: AriaAttributes[\"aria-live\"];\n maxLength?: number;\n inputLength?: number;\n isTyping?: boolean;\n showCounter?: boolean;\n};\n\nexport const Helper = forwardRef<HTMLDivElement, HelperProps>((props, ref) => {\n const {\n id,\n hint,\n description,\n error,\n warning,\n errorAriaLive: _errorAriaLive,\n errorMessage,\n maxLength,\n isTyping,\n inputLength = 0,\n showCounter,\n } = props;\n\n return (\n <div className={styles[\"helper\"]} ref={ref} id={id}>\n <FieldMessage\n hint={hint}\n description={description}\n error={error}\n warning={warning}\n errorMessage={errorMessage}\n />\n\n {showCounter && (\n <span aria-hidden=\"true\">\n {inputLength}/{maxLength}\n </span>\n )}\n\n {isTyping && maxLength ? (\n maxLength - inputLength >= 1 ? (\n <SrOnly>\n {/* TODO: potential localization */}\n <span aria-live=\"polite\" aria-atomic=\"true\">{`${\n maxLength - inputLength\n } character${maxLength - inputLength !== 1 ? \"s\" : \"\"} left`}</span>\n </SrOnly>\n ) : (\n <SrOnly>\n {/* TODO: potential localization */}\n <span role=\"alert\">Maximum characters count reached</span>\n </SrOnly>\n )\n ) : null}\n </div>\n );\n});\n\nHelper.displayName = \"Helper\";\n"],"names":[],"mappings":";;;;;;;;;;AAgCO,MAAM,MAAA,GAAS,UAAA,CAAwC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM;AAAA,IACJ,EAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,aAAA,EAAe,cAAA;AAAA,IACf,YAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA,GAAc,CAAA;AAAA,IACd;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,QAAQ,CAAA,EAAG,KAAU,EAAA,EAC1C,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,WAAA;AAAA,QACA,KAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IAEC,WAAA,oBACC,IAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EACf,QAAA,EAAA;AAAA,MAAA,WAAA;AAAA,MAAY,GAAA;AAAA,MAAE;AAAA,KAAA,EACjB,CAAA;AAAA,IAGD,QAAA,IAAY,SAAA,GACX,SAAA,GAAY,WAAA,IAAe,oBACzB,GAAA,CAAC,MAAA,EAAA,EAEC,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAA,EAAU,QAAA,EAAS,aAAA,EAAY,MAAA,EAAQ,aAC3C,SAAA,GAAY,WACd,CAAA,UAAA,EAAa,SAAA,GAAY,WAAA,KAAgB,CAAA,GAAI,GAAA,GAAM,EAAE,SAAQ,CAAA,EAC/D,CAAA,mBAEA,GAAA,CAAC,MAAA,EAAA,EAEC,8BAAC,MAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,QAAA,EAAA,kCAAA,EAAgC,GACrD,CAAA,GAEA;AAAA,GAAA,EACN,CAAA;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
|
|
@@ -64,7 +64,7 @@ const Icon = forwardRef((props, ref) => {
|
|
|
64
64
|
const {
|
|
65
65
|
size = "medium",
|
|
66
66
|
className,
|
|
67
|
-
svg:
|
|
67
|
+
svg: Svg,
|
|
68
68
|
inherit,
|
|
69
69
|
style,
|
|
70
70
|
color,
|
|
@@ -77,7 +77,7 @@ const Icon = forwardRef((props, ref) => {
|
|
|
77
77
|
const svg = localRef.current?.querySelector("svg");
|
|
78
78
|
if (!svg) return;
|
|
79
79
|
uniquifySvgDomIds(svg, idPrefix);
|
|
80
|
-
}, [
|
|
80
|
+
}, [Svg, idPrefix]);
|
|
81
81
|
const iconClassNames = cx([styles["icon"]], className, {
|
|
82
82
|
[styles["small"]]: size === "small",
|
|
83
83
|
[styles["medium"]]: size === "medium",
|
|
@@ -97,11 +97,11 @@ const Icon = forwardRef((props, ref) => {
|
|
|
97
97
|
style: styleCombined,
|
|
98
98
|
ref: mergedRef,
|
|
99
99
|
...rest,
|
|
100
|
-
children: /* @__PURE__ */ jsx(
|
|
100
|
+
children: /* @__PURE__ */ jsx(Svg, {})
|
|
101
101
|
}
|
|
102
102
|
);
|
|
103
103
|
});
|
|
104
104
|
Icon.displayName = "Icon";
|
|
105
105
|
|
|
106
106
|
export { Icon as I };
|
|
107
|
-
//# sourceMappingURL=Icon-
|
|
107
|
+
//# sourceMappingURL=Icon-B5zwN7GD.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Icon-B5zwN7GD.js","sources":["../src/internal/utils/uniquifySvgDomIds.ts","../src/components/Icon/Icon.tsx"],"sourcesContent":["const URL_REF_ATTRS = [\n \"fill\",\n \"stroke\",\n \"filter\",\n \"mask\",\n \"clip-path\",\n \"clipPath\",\n] as const;\n\nconst HREF_ATTRS = [\"href\", \"xlink:href\"] as const;\n\nconst URL_REF_PATTERN = /^url\\(#(.+)\\)$/;\nconst HREF_REF_PATTERN = /^#(.+)$/;\n\n/**\n * Prefixes SVG `id` attributes and matching `url(#…)` / `#…` references under\n * `svgRoot` so multiple instances of the same SVG do not collide in the\n * document. Idempotent when called again with the same `idPrefix`.\n *\n * Fast path: returns immediately when the SVG has no `[id]` attributes.\n *\n * Walks elements and reads attributes directly instead of building attribute\n * selectors — namespaced attrs like `xlink:href` are not valid in\n * `querySelectorAll('[xlink:href]')`.\n */\nexport function uniquifySvgDomIds(svgRoot: SVGElement, idPrefix: string): void {\n const elementsWithId = svgRoot.querySelectorAll(\"[id]\");\n if (elementsWithId.length === 0) return;\n\n const prefixWithSeparator = `${idPrefix}-`;\n const elements = svgRoot.querySelectorAll(\"*\");\n\n for (const element of elements) {\n const currentId = element.getAttribute(\"id\");\n if (currentId && !currentId.startsWith(prefixWithSeparator)) {\n element.setAttribute(\"id\", `${prefixWithSeparator}${currentId}`);\n }\n\n for (const attr of URL_REF_ATTRS) {\n const value = element.getAttribute(attr);\n if (!value) continue;\n\n const match = value.match(URL_REF_PATTERN);\n if (!match) continue;\n\n const refId = match[1];\n if (refId.startsWith(prefixWithSeparator)) continue;\n\n element.setAttribute(attr, `url(#${prefixWithSeparator}${refId})`);\n }\n\n for (const attr of HREF_ATTRS) {\n const value = element.getAttribute(attr);\n if (!value) continue;\n\n const match = value.match(HREF_REF_PATTERN);\n if (!match) continue;\n\n const refId = match[1];\n if (refId.startsWith(prefixWithSeparator)) continue;\n\n element.setAttribute(attr, `#${prefixWithSeparator}${refId}`);\n }\n }\n}\n","import type { LayoutUtilProps, Size, Svg } from \"../../types\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n useId,\n useLayoutEffect,\n useRef,\n} from \"react\";\nimport styles from \"./Icon.module.scss\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { uniquifySvgDomIds } from \"../../internal/utils/uniquifySvgDomIds\";\nimport { useMergeRefs } from \"../../hooks/useMergeRefs\";\nimport cx from \"classnames\";\n\n/**\n * Props for the Icon component\n * @extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type IconProps = Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> &\n Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> & {\n /**\n * Apply a specific color to the icon.\n */\n color?: string;\n\n /**\n * The size of the icon.\n * @default medium\n */\n size?: Extract<Size, \"small\" | \"medium\" | \"large\" | \"xlarge\">;\n\n /**\n * Assets passed in using svgr.\n */\n svg: Svg;\n\n /**\n * Whether the icon should inherit the color from its parent element.\n * @default false\n */\n inherit?: boolean;\n };\n\n/**\n * Icon component for displaying SVG icons with consistent styling and sizing.\n *\n * Features:\n * - SVG icon rendering with consistent styling\n * - Four predefined sizes: small, medium, large, xlarge\n * - Custom color support with optional inheritance\n * - Layout utilities for positioning and spacing\n * - Support for all standard span element props\n * - Flexible color inheritance and custom color options\n * - Consistent sizing across different icon sets\n *\n * @example\n * import Close from \"@servicetitan/anvil2/assets/icons/material/round/close.svg\";\n *\n * <Icon svg={Close} size=\"medium\" />\n *\n * @example\n * import Info from \"@servicetitan/anvil2/assets/icons/material/round/info.svg\";\n *\n * <Icon\n * svg={Info}\n * size=\"large\"\n * color=\"#007bff\"\n * inherit={false}\n * />\n */\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n size = \"medium\",\n className,\n svg: Svg,\n inherit,\n style,\n color,\n ...rest\n } = componentProps;\n\n const localRef = useRef<HTMLSpanElement>(null);\n const mergedRef = useMergeRefs([localRef, ref]);\n const idPrefix = useId().replace(/:/g, \"\");\n\n useLayoutEffect(() => {\n const svg = localRef.current?.querySelector(\"svg\");\n if (!svg) return;\n uniquifySvgDomIds(svg, idPrefix);\n }, [Svg, idPrefix]);\n\n const iconClassNames = cx([styles[\"icon\"]], className, {\n [styles[\"small\"]]: size === \"small\",\n [styles[\"medium\"]]: size === \"medium\",\n [styles[\"large\"]]: size === \"large\",\n [styles[\"xlarge\"]]: size === \"xlarge\",\n });\n\n const styleCombined = {\n color: color ? color : inherit ? \"inherit\" : undefined,\n ...style,\n ...layoutStyles,\n };\n\n return (\n <span\n className={iconClassNames}\n data-anv=\"icon\"\n style={styleCombined}\n ref={mergedRef}\n {...rest}\n >\n <Svg />\n </span>\n );\n});\n\nIcon.displayName = \"Icon\";\n"],"names":[],"mappings":"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"}
|
package/dist/Icon.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { I as Icon, I as default } from './Icon-
|
|
1
|
+
export { I as Icon, I as default } from './Icon-B5zwN7GD.js';
|
|
2
2
|
//# sourceMappingURL=Icon.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { forwardRef, useRef, useMemo, isValidElement, cloneElement } from 'react';
|
|
3
|
-
import { u as useMergeRefs } from './AiMark-
|
|
4
|
-
import { T as TextField } from './TextField-
|
|
3
|
+
import { u as useMergeRefs } from './AiMark-2_O4tKv_.js';
|
|
4
|
+
import { T as TextField } from './TextField-CzzvLI5_.js';
|
|
5
5
|
import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
|
|
6
6
|
import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
|
|
7
7
|
import { useTrackingId } from './useTrackingId.js';
|
|
@@ -261,4 +261,4 @@ const InputMask = forwardRef(
|
|
|
261
261
|
InputMask.displayName = "InputMask";
|
|
262
262
|
|
|
263
263
|
export { InputMask as I };
|
|
264
|
-
//# sourceMappingURL=InputMask-
|
|
264
|
+
//# sourceMappingURL=InputMask-CQONHcTq.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputMask-CQONHcTq.js","sources":["../src/components/InputMask/internal/constants.ts","../src/components/InputMask/internal/utils.ts","../src/components/InputMask/InputMask.tsx"],"sourcesContent":["export const MASK_CHARS = [\"a\", \"9\", \"*\"];\n","import { MASK_CHARS } from \"./constants\";\n\n/**\n * This function applies the mask to the input value, returning a new string that matches the mask's format.\n * @param value - a string representing the raw input value (e.g., what the user typed)\n * @param mask - a string representing the desired input mask (e.g., \"99/99/9999\" for a date)\n * @param defaultMaskCharacter - a string representing the default mask character (e.g., \"_\")\n * @returns a string representing the masked value (e.g., \"12/31/2025\" for a date)\n *\n * @example\n * applyMask(\"1234567890\", \"99/99/9999\", \"_\") // \"12/31/2025\"\n * applyMask(\"1234567890\", \"999-999-9999\", \"-\") // \"123-456-7890\"\n * applyMask(\"123\", \"99/99\", \"_\") // \"12/3_\"\n */\nexport function applyMask(\n value: string,\n mask: string,\n defaultMaskCharacter: string,\n) {\n let maskedValue = \"\";\n let valueIndex = 0;\n for (let i = 0; i < mask.length; i++) {\n const maskChar = mask[i];\n if (MASK_CHARS.includes(maskChar)) {\n // Find next acceptable char in value\n while (\n valueIndex < value.length &&\n !isAcceptableChar(value[valueIndex], maskChar)\n ) {\n valueIndex++;\n }\n if (valueIndex < value.length) {\n maskedValue += value[valueIndex];\n valueIndex++;\n } else {\n maskedValue += defaultMaskCharacter;\n }\n } else {\n maskedValue += maskChar;\n }\n }\n return maskedValue;\n}\n/**\n * This function checks if a character is acceptable for a given mask character.\n * @param char - a string representing the character to check\n * @param maskChar - a string representing the mask character\n * @returns a boolean indicating if the character is acceptable\n */\nfunction isAcceptableChar(char: string, maskChar: string) {\n if (maskChar === \"9\") {\n return /\\d/.test(char);\n }\n if (maskChar === \"a\") {\n return /[a-zA-Z]/.test(char);\n }\n if (maskChar === \"*\") {\n return /[a-zA-Z0-9]/.test(char);\n }\n return false;\n}\n/**\n * This function finds the next open character in a given value.\n * @param value - a string representing the value to search\n * @param defaultMaskCharacter - a string representing the default mask character (e.g., \"_\")\n * @returns a number representing the index of the next open character\n */\nexport function getNextOpenCharacterIndex(\n value: string,\n defaultMaskCharacter: string,\n) {\n let idx = value.indexOf(defaultMaskCharacter);\n if (idx < 0) {\n idx = value.length;\n }\n return idx;\n}\n/**\n * This function finds the first non-fixed character in the value.\n * @param startingIndex - a number representing the index to start searching from\n * @param fixedCharacterIndices - an array of numbers representing the indices of the fixed characters\n * @returns a number representing the index of the first non-fixed character\n */\nexport function getFirstNonFixedCharacterIndex(\n startingIndex: number,\n fixedCharacterIndices: number[],\n) {\n let idx = startingIndex;\n while (fixedCharacterIndices.includes(idx)) {\n idx++;\n }\n return idx;\n}\n/**\n * This function finds the last filled character in a given value.\n * @param value - a string representing the value to search\n * @param mask - a string representing the mask\n * @returns a number representing the index of the last filled character\n */\nexport function getLastFilledCharacterIndex(value: string, mask: string) {\n let idx = value\n .split(\"\")\n .findLastIndex((char, i) => isAcceptableChar(char, mask[i]));\n if (idx < 0) {\n idx = 0;\n }\n return idx;\n}\n/**\n * This function finds the first filled character in a given value.\n * @param value - a string representing the value to search\n * @param mask - a string representing the mask\n * @returns a number representing the index of the first filled character\n */\nexport function getFirstFilledCharacterIndex(value: string, mask: string) {\n let idx = value\n .split(\"\")\n .findIndex((char, i) => isAcceptableChar(char, mask[i]));\n if (idx < 0) {\n idx = 0;\n }\n return idx;\n}\n","import {\n type ChangeEvent,\n type ChangeEventHandler,\n type FocusEvent,\n type KeyboardEvent,\n type InputHTMLAttributes,\n type ReactElement,\n cloneElement,\n forwardRef,\n isValidElement,\n useRef,\n useMemo,\n type MouseEvent,\n} from \"react\";\nimport { useMergeRefs } from \"@floating-ui/react\";\nimport { useOptionallyControlledState } from \"../../internal/hooks\";\nimport { useTrackingId } from \"../../hooks\";\nimport {\n TextField,\n type TextFieldProps,\n} from \"../TextField/internal/TextField\";\nimport { childrenToString } from \"../../internal/functions\";\nimport {\n applyMask,\n getLastFilledCharacterIndex,\n getFirstFilledCharacterIndex,\n getFirstNonFixedCharacterIndex,\n getNextOpenCharacterIndex,\n} from \"./internal/utils\";\nimport { MASK_CHARS } from \"./internal/constants\";\nimport type { DataTrackingId } from \"../../types\";\n\n/**\n * Props for InputMask when using with children\n */\ninterface InputMaskPropsWithChildren {\n /**\n * Custom input element to be wrapped with mask functionality.\n */\n children: ReactElement<InputHTMLAttributes<HTMLInputElement>>;\n /**\n * Additional props to pass to the input element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n}\n\n/**\n * Props for InputMask when using without children\n */\ninterface InputMaskPropsWithoutChildren {\n /**\n * No children allowed when using default TextField.\n */\n children?: never;\n /**\n * Props to pass to the default TextField component.\n */\n inputProps?: TextFieldProps;\n}\n\n/**\n * Configuration for custom mask handler matching\n */\ninterface ICustomMaskHandlerMatch {\n /**\n * Regular expression pattern to match against input.\n */\n matchPattern: RegExp;\n /**\n * Starting position in the input string.\n */\n startPosition: number;\n /**\n * Ending position in the input string.\n */\n endPosition: number;\n}\n\n/**\n * Configuration for custom mask handler application\n */\ninterface ICustomMaskHandlerApply {\n /**\n * Pattern to apply when match is found.\n */\n applyPattern: string;\n /**\n * Offset to apply to cursor position after transformation.\n */\n caretOffset: number;\n}\n\n/**\n * Custom mask handler for advanced input transformations\n */\ninterface ICustomMaskHandler {\n /**\n * Matching configuration for the handler.\n */\n match: ICustomMaskHandlerMatch;\n /**\n * Application configuration for the handler.\n */\n apply: ICustomMaskHandlerApply;\n}\n\n/**\n * Shared props for InputMask component\n */\ninterface SharedInputMaskProps {\n /**\n * The mask pattern to apply to the input.\n * - \"9\" for digits only\n * - \"a\" for letters only\n * - \"*\" for alphanumeric\n * - Any other character is treated as a fixed character\n */\n mask: string;\n /**\n * Character to display for unfilled mask positions.\n * @default \"_\"\n */\n defaultMaskCharacter?: string;\n /**\n * Controlled value for the input.\n */\n value?: string;\n /**\n * Default value for uncontrolled input.\n */\n defaultValue?: string;\n /**\n * Callback function called when input value changes.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Array of custom mask handlers for advanced transformations.\n */\n customMaskHandler?: ICustomMaskHandler[];\n}\n\ntype SpecialChange = {\n reason: \"Backspace\" | \"Delete\" | \"Edit\";\n start: number;\n end: number;\n};\n\n/**\n * Props for the InputMask component\n * @property {string} mask - The mask pattern to apply to the input (9 for digits, a for letters, * for alphanumeric)\n * @property {string} [defaultMaskCharacter] - Character to display for unfilled mask positions\n * @property {array} [customMaskHandler] - Array of custom mask handlers for advanced transformations\n * @property {object} [inputProps] - Props to pass to the input component\n * @property {ReactElement} [children] - Custom input element to be wrapped with mask functionality\n * @property {string} [data-tracking-id] - Custom tracking ID for analytics\n */\nexport type InputMaskProps = SharedInputMaskProps &\n (InputMaskPropsWithChildren | InputMaskPropsWithoutChildren) &\n DataTrackingId;\n\n/**\n * InputMask component for applying input masks and formatting to text inputs.\n *\n * @deprecated Use the TextField component with custom masking instead. Over time, we intend to release additional components with built-in masking.\n */\nexport const InputMask = forwardRef<HTMLInputElement, InputMaskProps>(\n (\n {\n children,\n mask,\n defaultMaskCharacter = \"_\",\n value,\n defaultValue,\n onChange,\n inputProps,\n \"data-tracking-id\": dataTrackingId,\n },\n ref,\n ) => {\n const [v, setV] = useOptionallyControlledState({\n controlledValue:\n value !== undefined\n ? applyMask(value, mask, defaultMaskCharacter)\n : undefined,\n defaultValue: applyMask(defaultValue || \"\", mask, defaultMaskCharacter),\n // Omitting the onChange handler here because we want to handle it ourselves (i.e. send an event instead of just the value)\n });\n const specialChange = useRef<SpecialChange | null>(null);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const passInRef = useMergeRefs([inputRef, ref]);\n\n const currentOpenCharacterCount = useMemo(() => {\n return v.split(\"\").filter((char) => char === defaultMaskCharacter).length;\n }, [v, defaultMaskCharacter]);\n\n const fixedCharacterIndices = useMemo(() => {\n const fixedIndices: number[] = [];\n mask.split(\"\").forEach((char, i) => {\n if (!MASK_CHARS.includes(char)) {\n fixedIndices.push(i);\n }\n });\n return fixedIndices;\n }, [mask]);\n\n const moveCursorTo = (start: number, end: number = start) => {\n requestAnimationFrame(() => {\n inputRef.current?.setSelectionRange(start, end);\n });\n };\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n let newVal = applyMask(e.target.value, mask, defaultMaskCharacter);\n if (\n // A single character was backspaced\n specialChange.current?.reason === \"Backspace\" &&\n specialChange.current.start === specialChange.current.end\n ) {\n // If the character before the backspace is a fixed character, we need to remove the filled character before the fixed character\n if (fixedCharacterIndices.includes(specialChange.current.start - 1)) {\n const removeIndex = getLastFilledCharacterIndex(\n newVal.slice(0, specialChange.current.start),\n mask,\n );\n newVal = applyMask(\n newVal.slice(0, removeIndex) + newVal.slice(removeIndex + 1),\n mask,\n defaultMaskCharacter,\n );\n moveCursorTo(removeIndex, removeIndex);\n } else {\n const idx = Math.min(\n getLastFilledCharacterIndex(newVal, mask) + 1,\n specialChange.current.start - 1,\n );\n moveCursorTo(idx, idx);\n }\n } else if (\n // A single character was deleted\n specialChange.current?.reason === \"Delete\" &&\n specialChange.current.start === specialChange.current.end\n ) {\n // If the character after the delete is a fixed character, we need to remove the filled character after the fixed character\n if (fixedCharacterIndices.includes(specialChange.current.start)) {\n const removeIndex = getFirstFilledCharacterIndex(\n newVal.slice(specialChange.current.start + 1),\n mask,\n );\n newVal = applyMask(\n newVal.slice(0, removeIndex) + newVal.slice(removeIndex + 1),\n mask,\n defaultMaskCharacter,\n );\n }\n const firstFilledIdx = getFirstFilledCharacterIndex(newVal, mask);\n const targetIdx = Math.max(firstFilledIdx, specialChange.current.start);\n moveCursorTo(targetIdx, targetIdx);\n } else if (\n specialChange.current?.reason === \"Edit\" &&\n specialChange.current.start === specialChange.current.end // A single character was edited\n ) {\n const firstNonFixedIdx = getFirstNonFixedCharacterIndex(\n specialChange.current.start + 1,\n fixedCharacterIndices,\n );\n moveCursorTo(firstNonFixedIdx, firstNonFixedIdx);\n } else {\n const newIndex = getNextOpenCharacterIndex(\n newVal,\n defaultMaskCharacter,\n );\n moveCursorTo(newIndex, newIndex);\n }\n\n setV(newVal);\n if (inputRef.current) {\n inputRef.current.value = newVal;\n }\n onChange?.({ ...e, target: { ...e.target, value: newVal } });\n };\n\n const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n requestAnimationFrame(() => {\n if (\n e.target.selectionStart === null ||\n e.target.selectionStart === undefined ||\n e.target.selectionStart >= v.length\n ) {\n const newIndex = getNextOpenCharacterIndex(v, defaultMaskCharacter);\n moveCursorTo(newIndex, newIndex);\n }\n });\n inputProps?.onFocus?.(e);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n const target = e.target as HTMLInputElement;\n if (target.selectionStart === null || target.selectionEnd === null) {\n return;\n }\n if (e.key === \"Backspace\") {\n specialChange.current = {\n reason: \"Backspace\",\n start: target.selectionStart,\n end: target.selectionEnd,\n };\n } else if (e.key === \"Delete\") {\n specialChange.current = {\n reason: \"Delete\",\n start: target.selectionStart,\n end: target.selectionEnd,\n };\n } else if (currentOpenCharacterCount === 0) {\n specialChange.current = {\n reason: \"Edit\",\n start: target.selectionStart,\n end: target.selectionEnd,\n };\n } else {\n specialChange.current = null;\n }\n inputProps?.onKeyDown?.(e);\n };\n\n const handleClick = (e: MouseEvent<HTMLInputElement>) => {\n // For future use.\n e.preventDefault();\n e.stopPropagation();\n inputProps?.onClick?.(e);\n };\n\n const handleBlur = (e: FocusEvent<HTMLInputElement>) => {\n // For future use.\n e.preventDefault();\n e.stopPropagation();\n inputProps?.onBlur?.(e);\n };\n\n const mergedInputProps = {\n ...inputProps,\n ...(children && isValidElement(children) ? children.props : {}),\n value: v,\n onChange: handleChange,\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n onClick: handleClick,\n onBlur: handleBlur,\n ref: passInRef,\n };\n\n const isInputEmpty = useMemo(() => {\n if (v.length === 0) {\n return true;\n }\n return v === applyMask(\"\", mask, defaultMaskCharacter);\n }, [v, defaultMaskCharacter, mask]);\n\n const data = {\n label:\n \"label\" in mergedInputProps\n ? childrenToString(mergedInputProps.label)\n : null,\n labelProps:\n \"labelProps\" in mergedInputProps ? mergedInputProps.labelProps : null,\n prefix: childrenToString(mergedInputProps.prefix),\n hint:\n \"hint\" in mergedInputProps\n ? childrenToString(mergedInputProps.hint)\n : null,\n description:\n \"description\" in mergedInputProps\n ? childrenToString(mergedInputProps.description)\n : null,\n size: mergedInputProps.size,\n type: mergedInputProps.type,\n };\n\n const trackingId = useTrackingId({\n name: \"InputMask\",\n data,\n hasOverride: !!dataTrackingId,\n });\n\n return children && isValidElement(children) && children.type === \"input\" ? (\n cloneElement(children, {\n ...mergedInputProps,\n \"data-tracking-id\": trackingId,\n } as InputHTMLAttributes<HTMLInputElement> & {\n \"data-tracking-id\"?: string;\n })\n ) : (\n <TextField\n data-input-empty={isInputEmpty}\n data-tracking-id={trackingId}\n {...(mergedInputProps as TextFieldProps)}\n />\n );\n },\n);\n\nInputMask.displayName = \"InputMask\";\n"],"names":[],"mappings":"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"}
|
package/dist/InputMask.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { I as InputMask, I as default } from './InputMask-
|
|
1
|
+
export { I as InputMask, I as default } from './InputMask-CQONHcTq.js';
|
|
2
2
|
//# sourceMappingURL=InputMask.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractiveCard-C0g5PxB6.js","sources":["../src/beta/components/InteractiveCard/InteractiveCard.tsx"],"sourcesContent":["import { forwardRef, MouseEvent, Ref, useRef } from \"react\";\nimport {\n InteractiveCardProps,\n ActionLinkProps,\n ActionButtonProps,\n} from \"./types\";\nimport { Card } from \"../../../components/Card\";\nimport { KEYBOARD_FOCUSABLE_SELECTOR } from \"../../../internal/functions\";\nimport { useMergeRefs } from \"../../../hooks/useMergeRefs/useMergeRefs\";\n\nimport cx from \"classnames\";\nimport styles from \"./InteractiveCard.module.scss\";\n\n/**\n * InteractiveCard component for creating clickable cards with nested interactive elements.\n *\n * Features:\n * - Clickable card area that can be a button or link\n * - Supports nested interactive elements without accessibility violations\n * - Dead-space clicks are forwarded to the action element via event delegation,\n * so any focusable child (button, link, input, switch, etc.) handles its own\n * click without bubbling to the card action\n * - Box-shadow feedback on hover and focus of any interactive element\n * - Full keyboard accessibility with proper focus management\n * - Touch-friendly with mobile support\n * - Customizable padding and background variants via contentProps\n * - WCAG AA 2.2 compliant\n * - Required ARIA labels for screen reader support\n * - Supports all Card props for styling and layout via contentProps\n *\n * @example\n * // Button card with nested actions\n * <InteractiveCard\n * wrapperProps={{ \"aria-label\": \"Kitchen Measurement 2 card\" }}\n * actionProps={{\n * \"aria-label\": \"Expand Kitchen Measurement 2\",\n * onClick: handleExpand,\n * }}\n * contentProps={{ padding: \"large\" }}\n * >\n * <Text variant=\"headline\">Kitchen Measurement 2</Text>\n * <Button>Exact Size</Button>\n * <Button>Block Size</Button>\n * </InteractiveCard>\n *\n * @example\n * // Link card with nested actions\n * <InteractiveCard\n * wrapperProps={{ \"aria-label\": \"Tommy Lee's Project card\" }}\n * actionProps={{\n * \"aria-label\": \"Navigate to Tommy Lee's Project\",\n * href: \"/project/123\",\n * }}\n * contentProps={{ padding: \"large\" }}\n * >\n * <Text variant=\"headline\">Tommy Lee's Project</Text>\n * <IconButton icon={Edit} onClick={(e) => {\n * e.preventDefault();\n * handleEdit();\n * }} />\n * </InteractiveCard>\n */\nexport const InteractiveCard = forwardRef<HTMLDivElement, InteractiveCardProps>(\n (props, ref) => {\n const {\n wrapperProps,\n actionProps,\n contentProps = {},\n children,\n \"data-interactive\": dataInteractive,\n } = props as InteractiveCardProps & {\n \"data-interactive\"?: string;\n };\n\n // Destructure className and style from wrapperProps to merge with internal values\n const {\n \"aria-label\": ariaLabel,\n className: wrapperClassName,\n style: wrapperStyle,\n ref: wrapperRef,\n ...restWrapperProps\n } = wrapperProps;\n\n const mergedWrapperRef = useMergeRefs([ref, wrapperRef]);\n\n // Destructure aria-label from actionProps\n const { \"aria-label\": actionAriaLabel, ...restActionProps } = actionProps;\n\n // Destructure contentProps\n const {\n padding = \"medium\",\n background,\n className: contentClassName,\n ...restContentProps\n } = contentProps;\n\n const actionClassNames = cx(styles[\"card-action\"], {\n [styles[`bg-${background}`]]: !!background,\n });\n\n const contentClassNames = cx(styles[\"card-content\"], contentClassName);\n\n const wrapperClassNames = cx(styles[\"card-wrapper\"], wrapperClassName);\n\n // Determine the interactive element type based on href presence\n const isLink = \"href\" in restActionProps;\n\n const actionRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n\n // Forward dead-space clicks (anywhere not on a focusable child or its\n // label) to the action element so the entire card behaves as a single\n // interactive surface, while letting nested controls handle their own\n // clicks. `label` is included alongside focusables because clicking a\n // label routes activation to its associated form control.\n const handleWrapperClick = (e: MouseEvent<HTMLDivElement>) => {\n const target = e.target as HTMLElement;\n if (target.closest(`label, ${KEYBOARD_FOCUSABLE_SELECTOR}`)) return;\n const action = actionRef.current;\n if (!action) return;\n\n // For link variants, preserve modifier-click semantics (cmd/ctrl/shift\n // → new tab/window). Programmatic .click() ignores modifier state, so\n // we open the href explicitly when modifiers are present.\n if (isLink && (e.metaKey || e.ctrlKey || e.shiftKey)) {\n const href = action.getAttribute(\"href\");\n if (href) {\n window.open(href, \"_blank\", \"noopener,noreferrer\");\n return;\n }\n }\n action.click();\n };\n\n // Middle-click should also open the link in a new tab. `auxclick` fires\n // for non-primary mouse buttons and isn't routed through onClick.\n const handleWrapperAuxClick = (e: MouseEvent<HTMLDivElement>) => {\n if (e.button !== 1 || !isLink) return;\n const target = e.target as HTMLElement;\n if (target.closest(`label, ${KEYBOARD_FOCUSABLE_SELECTOR}`)) return;\n const href = actionRef.current?.getAttribute(\"href\");\n if (href) window.open(href, \"_blank\", \"noopener,noreferrer\");\n };\n\n return (\n // Mouse-only dead-space forwarder. Keyboard users tab to the inner <button>/<a> and activate it natively (Enter/Space)\n // The wrapper itself is never focused. Adding a keyboard listener here would double-fire the action.\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions\n <div\n {...restWrapperProps}\n role=\"group\"\n aria-label={ariaLabel}\n className={wrapperClassNames}\n style={wrapperStyle}\n ref={mergedWrapperRef}\n onClick={handleWrapperClick}\n onAuxClick={handleWrapperAuxClick}\n >\n {/* Interactive layer (button or link) - provides background and hover effects */}\n {isLink ? (\n <a\n {...(restActionProps as ActionLinkProps)}\n aria-label={actionAriaLabel}\n className={actionClassNames}\n data-interactive={dataInteractive}\n ref={actionRef as Ref<HTMLAnchorElement>}\n />\n ) : (\n <button\n {...(restActionProps as ActionButtonProps)}\n aria-label={actionAriaLabel}\n className={actionClassNames}\n data-interactive={dataInteractive}\n type=\"button\"\n ref={actionRef as Ref<HTMLButtonElement>}\n />\n )}\n\n {/* Content layer - transparent card with padding */}\n <Card\n padding={padding}\n className={contentClassNames}\n {...restContentProps}\n >\n {children}\n </Card>\n </div>\n );\n },\n);\n\nInteractiveCard.displayName = \"InteractiveCard\";\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"InteractiveCard-C0g5PxB6.js","sources":["../src/beta/components/InteractiveCard/InteractiveCard.tsx"],"sourcesContent":["import { forwardRef, type MouseEvent, type Ref, useRef } from \"react\";\nimport type {\n InteractiveCardProps,\n ActionLinkProps,\n ActionButtonProps,\n} from \"./types\";\nimport { Card } from \"../../../components/Card\";\nimport { KEYBOARD_FOCUSABLE_SELECTOR } from \"../../../internal/functions\";\nimport { useMergeRefs } from \"../../../hooks/useMergeRefs/useMergeRefs\";\n\nimport cx from \"classnames\";\nimport styles from \"./InteractiveCard.module.scss\";\n\n/**\n * InteractiveCard component for creating clickable cards with nested interactive elements.\n *\n * Features:\n * - Clickable card area that can be a button or link\n * - Supports nested interactive elements without accessibility violations\n * - Dead-space clicks are forwarded to the action element via event delegation,\n * so any focusable child (button, link, input, switch, etc.) handles its own\n * click without bubbling to the card action\n * - Box-shadow feedback on hover and focus of any interactive element\n * - Full keyboard accessibility with proper focus management\n * - Touch-friendly with mobile support\n * - Customizable padding and background variants via contentProps\n * - WCAG AA 2.2 compliant\n * - Required ARIA labels for screen reader support\n * - Supports all Card props for styling and layout via contentProps\n *\n * @example\n * // Button card with nested actions\n * <InteractiveCard\n * wrapperProps={{ \"aria-label\": \"Kitchen Measurement 2 card\" }}\n * actionProps={{\n * \"aria-label\": \"Expand Kitchen Measurement 2\",\n * onClick: handleExpand,\n * }}\n * contentProps={{ padding: \"large\" }}\n * >\n * <Text variant=\"headline\">Kitchen Measurement 2</Text>\n * <Button>Exact Size</Button>\n * <Button>Block Size</Button>\n * </InteractiveCard>\n *\n * @example\n * // Link card with nested actions\n * <InteractiveCard\n * wrapperProps={{ \"aria-label\": \"Tommy Lee's Project card\" }}\n * actionProps={{\n * \"aria-label\": \"Navigate to Tommy Lee's Project\",\n * href: \"/project/123\",\n * }}\n * contentProps={{ padding: \"large\" }}\n * >\n * <Text variant=\"headline\">Tommy Lee's Project</Text>\n * <IconButton icon={Edit} onClick={(e) => {\n * e.preventDefault();\n * handleEdit();\n * }} />\n * </InteractiveCard>\n */\nexport const InteractiveCard = forwardRef<HTMLDivElement, InteractiveCardProps>(\n (props, ref) => {\n const {\n wrapperProps,\n actionProps,\n contentProps = {},\n children,\n \"data-interactive\": dataInteractive,\n } = props as InteractiveCardProps & {\n \"data-interactive\"?: string;\n };\n\n // Destructure className and style from wrapperProps to merge with internal values\n const {\n \"aria-label\": ariaLabel,\n className: wrapperClassName,\n style: wrapperStyle,\n ref: wrapperRef,\n ...restWrapperProps\n } = wrapperProps;\n\n const mergedWrapperRef = useMergeRefs([ref, wrapperRef]);\n\n // Destructure aria-label from actionProps\n const { \"aria-label\": actionAriaLabel, ...restActionProps } = actionProps;\n\n // Destructure contentProps\n const {\n padding = \"medium\",\n background,\n className: contentClassName,\n ...restContentProps\n } = contentProps;\n\n const actionClassNames = cx(styles[\"card-action\"], {\n [styles[`bg-${background}`]]: !!background,\n });\n\n const contentClassNames = cx(styles[\"card-content\"], contentClassName);\n\n const wrapperClassNames = cx(styles[\"card-wrapper\"], wrapperClassName);\n\n // Determine the interactive element type based on href presence\n const isLink = \"href\" in restActionProps;\n\n const actionRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n\n // Forward dead-space clicks (anywhere not on a focusable child or its\n // label) to the action element so the entire card behaves as a single\n // interactive surface, while letting nested controls handle their own\n // clicks. `label` is included alongside focusables because clicking a\n // label routes activation to its associated form control.\n const handleWrapperClick = (e: MouseEvent<HTMLDivElement>) => {\n const target = e.target as HTMLElement;\n if (target.closest(`label, ${KEYBOARD_FOCUSABLE_SELECTOR}`)) return;\n const action = actionRef.current;\n if (!action) return;\n\n // For link variants, preserve modifier-click semantics (cmd/ctrl/shift\n // → new tab/window). Programmatic .click() ignores modifier state, so\n // we open the href explicitly when modifiers are present.\n if (isLink && (e.metaKey || e.ctrlKey || e.shiftKey)) {\n const href = action.getAttribute(\"href\");\n if (href) {\n window.open(href, \"_blank\", \"noopener,noreferrer\");\n return;\n }\n }\n action.click();\n };\n\n // Middle-click should also open the link in a new tab. `auxclick` fires\n // for non-primary mouse buttons and isn't routed through onClick.\n const handleWrapperAuxClick = (e: MouseEvent<HTMLDivElement>) => {\n if (e.button !== 1 || !isLink) return;\n const target = e.target as HTMLElement;\n if (target.closest(`label, ${KEYBOARD_FOCUSABLE_SELECTOR}`)) return;\n const href = actionRef.current?.getAttribute(\"href\");\n if (href) window.open(href, \"_blank\", \"noopener,noreferrer\");\n };\n\n return (\n // Mouse-only dead-space forwarder. Keyboard users tab to the inner <button>/<a> and activate it natively (Enter/Space)\n // The wrapper itself is never focused. Adding a keyboard listener here would double-fire the action.\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions\n <div\n {...restWrapperProps}\n role=\"group\"\n aria-label={ariaLabel}\n className={wrapperClassNames}\n style={wrapperStyle}\n ref={mergedWrapperRef}\n onClick={handleWrapperClick}\n onAuxClick={handleWrapperAuxClick}\n >\n {/* Interactive layer (button or link) - provides background and hover effects */}\n {isLink ? (\n <a\n {...(restActionProps as ActionLinkProps)}\n aria-label={actionAriaLabel}\n className={actionClassNames}\n data-interactive={dataInteractive}\n ref={actionRef as Ref<HTMLAnchorElement>}\n />\n ) : (\n <button\n {...(restActionProps as ActionButtonProps)}\n aria-label={actionAriaLabel}\n className={actionClassNames}\n data-interactive={dataInteractive}\n type=\"button\"\n ref={actionRef as Ref<HTMLButtonElement>}\n />\n )}\n\n {/* Content layer - transparent card with padding */}\n <Card\n padding={padding}\n className={contentClassNames}\n {...restContentProps}\n >\n {children}\n </Card>\n </div>\n );\n },\n);\n\nInteractiveCard.displayName = \"InteractiveCard\";\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Layout-C2Q2hyLG.js","sources":["../src/components/Layout/Layout.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./Layout.module.scss\";\n\n/**\n * Props for the Layout component.\n */\nexport type LayoutProps = ComponentPropsWithoutRef<\"div\"> & {\n /** Whether the layout should be fluid (full width) instead of constrained */\n fluid?: boolean;\n /** The spacing variant for the layout grid */\n variant?: \"default\" | \"wide\" | \"narrow\";\n};\n\n/**\n * Props for the Layout.Item component.\n */\nexport type LayoutItemProps = ComponentPropsWithoutRef<\"div\"> & {\n /** Default span across all breakpoints (1-12) */\n span?: number;\n /** Extra small breakpoint span (1-12) */\n xs?: number;\n /** Small breakpoint span (1-12) */\n sm?: number;\n /** Medium breakpoint span (1-12) */\n md?: number;\n /** Large breakpoint span (1-12) */\n lg?: number;\n /** Extra large breakpoint span (1-12) */\n xl?: number;\n /** Extra extra large breakpoint span (1-12) */\n xxl?: number;\n};\n\n// TODO: clamp span numbers higher than 12\n\n/**\n * Layout item component that defines grid columns within a Layout container.\n *\n * Features:\n * - Responsive grid columns with breakpoint-specific spans\n * - 12-column grid system for flexible layouts\n * - Breakpoint-specific span controls (xs, sm, md, lg, xl, xxl)\n * - Default span fallback for all breakpoints\n * - Automatic responsive behavior using container queries\n * - Semantic HTML structure with proper accessibility\n * - Flexible content area for any child components\n * - Consistent spacing and alignment with parent Layout\n * - Automatic tracking ID generation for analytics\n *\n * Breakpoints:\n * - xs: Extra small (mobile)\n * - sm: Small (tablet portrait)\n * - md: Medium (tablet landscape)\n * - lg: Large (desktop)\n * - xl: Extra large (large desktop)\n * - xxl: Extra extra large (ultra-wide)\n *\n * @example\n * <Layout>\n * <Layout.Item span={6} md={4} lg={3}>\n * <Card>Responsive Card</Card>\n * </Layout.Item>\n * <Layout.Item span={6} md={8} lg={9}>\n * <Card>Main Content</Card>\n * </Layout.Item>\n * </Layout>\n *\n * @example\n * <Layout>\n * <Layout.Item span={12} md={6}>\n * <h2>Left Column</h2>\n * <p>This takes full width on mobile, half width on medium+ screens.</p>\n * </Layout.Item>\n * <Layout.Item span={12} md={6}>\n * <h2>Right Column</h2>\n * <p>This also takes full width on mobile, half width on medium+ screens.</p>\n * </Layout.Item>\n * </Layout>\n *\n * @example\n * <Layout variant=\"wide\">\n * <Layout.Item span={1} sm={2} md={3} lg={4}>\n * <Button>Small Button</Button>\n * </Layout.Item>\n * <Layout.Item span={11} sm={10} md={9} lg={8}>\n * <TextField placeholder=\"Search...\" />\n * </Layout.Item>\n * </Layout>\n */\nexport const LayoutItem = forwardRef<HTMLDivElement, LayoutItemProps>(\n (\n { children, className, span = 12, xs, sm, md, lg, xl, xxl, ...props },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n {...props}\n className={cx(\n styles.cell,\n styles[`xs${xs || span}`],\n {\n [styles[`sm${sm}`]]: sm,\n [styles[`md${md}`]]: md,\n [styles[`lg${lg}`]]: lg,\n [styles[`xl${xl}`]]: xl,\n [styles[`xxl${xxl}`]]: xxl,\n },\n className,\n )}\n >\n {children}\n </div>\n );\n },\n);\n\nLayoutItem.displayName = \"LayoutItem\";\n\n/**\n * Layout container component that provides a responsive grid system.\n *\n * Features:\n * - CSS Grid-based responsive layout system\n * - Container with max-width constraint (1280px) by default\n * - Fluid option for full-width layouts\n * - Three spacing variants: default, wide, and narrow\n * - Container queries for responsive behavior\n * - Automatic tracking ID generation for analytics\n * - Semantic HTML structure with proper accessibility\n * - Flexible content area for child Layout.Item components\n * - Consistent spacing and alignment across breakpoints\n *\n * @example\n * <Layout>\n * <Layout.Item span={6}>Left Column</Layout.Item>\n * <Layout.Item span={6}>Right Column</Layout.Item>\n * </Layout>\n *\n * @example\n * <Layout fluid variant=\"wide\">\n * <Layout.Item span={4}>Column 1</Layout.Item>\n * <Layout.Item span={4}>Column 2</Layout.Item>\n * <Layout.Item span={4}>Column 3</Layout.Item>\n * </Layout>\n *\n * @example\n * <Layout variant=\"narrow\">\n * <Layout.Item span={12}>\n * <h1>Full Width Content</h1>\n * <p>This content spans the full width of the layout.</p>\n * </Layout.Item>\n * </Layout>\n */\nexport const Layout = Object.assign(\n forwardRef<HTMLDivElement, LayoutProps>(function LayoutInner(props, ref) {\n const {\n children,\n className,\n fluid = false,\n variant = \"default\",\n ...rest\n } = props;\n\n return (\n <div className={cx(styles.container, { [styles.fluid]: fluid })}>\n <div\n className={cx(\n styles.grid,\n {\n [styles.wide]: variant === \"wide\",\n [styles.narrow]: variant === \"narrow\",\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n </div>\n );\n }),\n {\n Item: LayoutItem,\n },\n);\nLayout.displayName = \"Layout\";\nexport const LayoutElement = Layout;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CACE,EAAE,QAAA,EAAU,SAAA,EAAW,OAAO,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,IAAI,EAAA,EAAI,GAAA,EAAK,GAAG,KAAA,IAC9D,GAAA,KACG;AACH,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,SAAA,EAAW,EAAA;AAAA,UACT,MAAA,CAAO,IAAA;AAAA,UACP,MAAA,CAAO,CAAA,EAAA,EAAK,EAAA,IAAM,IAAI,CAAA,CAAE,CAAA;AAAA,UACxB;AAAA,YACE,CAAC,MAAA,CAAO,CAAA,EAAA,EAAK,EAAE,CAAA,CAAE,CAAC,GAAG,EAAA;AAAA,YACrB,CAAC,MAAA,CAAO,CAAA,EAAA,EAAK,EAAE,CAAA,CAAE,CAAC,GAAG,EAAA;AAAA,YACrB,CAAC,MAAA,CAAO,CAAA,EAAA,EAAK,EAAE,CAAA,CAAE,CAAC,GAAG,EAAA;AAAA,YACrB,CAAC,MAAA,CAAO,CAAA,EAAA,EAAK,EAAE,CAAA,CAAE,CAAC,GAAG,EAAA;AAAA,YACrB,CAAC,MAAA,CAAO,CAAA,GAAA,EAAM,GAAG,CAAA,CAAE,CAAC,GAAG;AAAA,WACzB;AAAA,UACA;AAAA,SACF;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAqClB,MAAM,SAAS,MAAA,CAAO,MAAA;AAAA,EAC3B,UAAA,CAAwC,SAAS,WAAA,CAAY,KAAA,EAAO,GAAA,EAAK;AACvE,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA,GAAQ,KAAA;AAAA,MACR,OAAA,GAAU,SAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,SAAA,EAAW,EAAE,CAAC,MAAA,CAAO,KAAK,GAAG,KAAA,EAAO,CAAA,EAC5D,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,MAAA,CAAO,IAAA;AAAA,UACP;AAAA,YACE,CAAC,MAAA,CAAO,IAAI,GAAG,OAAA,KAAY,MAAA;AAAA,YAC3B,CAAC,MAAA,CAAO,MAAM,GAAG,OAAA,KAAY;AAAA,WAC/B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ,CAAC,CAAA;AAAA,EACD;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;AACA,MAAA,CAAO,WAAA,GAAc,QAAA;AACd,MAAM,aAAA,GAAgB;;;;"}
|
|
1
|
+
{"version":3,"file":"Layout-C2Q2hyLG.js","sources":["../src/components/Layout/Layout.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./Layout.module.scss\";\n\n/**\n * Props for the Layout component.\n */\nexport type LayoutProps = ComponentPropsWithoutRef<\"div\"> & {\n /** Whether the layout should be fluid (full width) instead of constrained */\n fluid?: boolean;\n /** The spacing variant for the layout grid */\n variant?: \"default\" | \"wide\" | \"narrow\";\n};\n\n/**\n * Props for the Layout.Item component.\n */\nexport type LayoutItemProps = ComponentPropsWithoutRef<\"div\"> & {\n /** Default span across all breakpoints (1-12) */\n span?: number;\n /** Extra small breakpoint span (1-12) */\n xs?: number;\n /** Small breakpoint span (1-12) */\n sm?: number;\n /** Medium breakpoint span (1-12) */\n md?: number;\n /** Large breakpoint span (1-12) */\n lg?: number;\n /** Extra large breakpoint span (1-12) */\n xl?: number;\n /** Extra extra large breakpoint span (1-12) */\n xxl?: number;\n};\n\n// TODO: clamp span numbers higher than 12\n\n/**\n * Layout item component that defines grid columns within a Layout container.\n *\n * Features:\n * - Responsive grid columns with breakpoint-specific spans\n * - 12-column grid system for flexible layouts\n * - Breakpoint-specific span controls (xs, sm, md, lg, xl, xxl)\n * - Default span fallback for all breakpoints\n * - Automatic responsive behavior using container queries\n * - Semantic HTML structure with proper accessibility\n * - Flexible content area for any child components\n * - Consistent spacing and alignment with parent Layout\n * - Automatic tracking ID generation for analytics\n *\n * Breakpoints:\n * - xs: Extra small (mobile)\n * - sm: Small (tablet portrait)\n * - md: Medium (tablet landscape)\n * - lg: Large (desktop)\n * - xl: Extra large (large desktop)\n * - xxl: Extra extra large (ultra-wide)\n *\n * @example\n * <Layout>\n * <Layout.Item span={6} md={4} lg={3}>\n * <Card>Responsive Card</Card>\n * </Layout.Item>\n * <Layout.Item span={6} md={8} lg={9}>\n * <Card>Main Content</Card>\n * </Layout.Item>\n * </Layout>\n *\n * @example\n * <Layout>\n * <Layout.Item span={12} md={6}>\n * <h2>Left Column</h2>\n * <p>This takes full width on mobile, half width on medium+ screens.</p>\n * </Layout.Item>\n * <Layout.Item span={12} md={6}>\n * <h2>Right Column</h2>\n * <p>This also takes full width on mobile, half width on medium+ screens.</p>\n * </Layout.Item>\n * </Layout>\n *\n * @example\n * <Layout variant=\"wide\">\n * <Layout.Item span={1} sm={2} md={3} lg={4}>\n * <Button>Small Button</Button>\n * </Layout.Item>\n * <Layout.Item span={11} sm={10} md={9} lg={8}>\n * <TextField placeholder=\"Search...\" />\n * </Layout.Item>\n * </Layout>\n */\nexport const LayoutItem = forwardRef<HTMLDivElement, LayoutItemProps>(\n (\n { children, className, span = 12, xs, sm, md, lg, xl, xxl, ...props },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n {...props}\n className={cx(\n styles.cell,\n styles[`xs${xs || span}`],\n {\n [styles[`sm${sm}`]]: sm,\n [styles[`md${md}`]]: md,\n [styles[`lg${lg}`]]: lg,\n [styles[`xl${xl}`]]: xl,\n [styles[`xxl${xxl}`]]: xxl,\n },\n className,\n )}\n >\n {children}\n </div>\n );\n },\n);\n\nLayoutItem.displayName = \"LayoutItem\";\n\n/**\n * Layout container component that provides a responsive grid system.\n *\n * Features:\n * - CSS Grid-based responsive layout system\n * - Container with max-width constraint (1280px) by default\n * - Fluid option for full-width layouts\n * - Three spacing variants: default, wide, and narrow\n * - Container queries for responsive behavior\n * - Automatic tracking ID generation for analytics\n * - Semantic HTML structure with proper accessibility\n * - Flexible content area for child Layout.Item components\n * - Consistent spacing and alignment across breakpoints\n *\n * @example\n * <Layout>\n * <Layout.Item span={6}>Left Column</Layout.Item>\n * <Layout.Item span={6}>Right Column</Layout.Item>\n * </Layout>\n *\n * @example\n * <Layout fluid variant=\"wide\">\n * <Layout.Item span={4}>Column 1</Layout.Item>\n * <Layout.Item span={4}>Column 2</Layout.Item>\n * <Layout.Item span={4}>Column 3</Layout.Item>\n * </Layout>\n *\n * @example\n * <Layout variant=\"narrow\">\n * <Layout.Item span={12}>\n * <h1>Full Width Content</h1>\n * <p>This content spans the full width of the layout.</p>\n * </Layout.Item>\n * </Layout>\n */\nexport const Layout = Object.assign(\n forwardRef<HTMLDivElement, LayoutProps>(function LayoutInner(props, ref) {\n const {\n children,\n className,\n fluid = false,\n variant = \"default\",\n ...rest\n } = props;\n\n return (\n <div className={cx(styles.container, { [styles.fluid]: fluid })}>\n <div\n className={cx(\n styles.grid,\n {\n [styles.wide]: variant === \"wide\",\n [styles.narrow]: variant === \"narrow\",\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n </div>\n );\n }),\n {\n Item: LayoutItem,\n },\n);\nLayout.displayName = \"Layout\";\nexport const LayoutElement = Layout;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CACE,EAAE,QAAA,EAAU,SAAA,EAAW,OAAO,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,IAAI,EAAA,EAAI,GAAA,EAAK,GAAG,KAAA,IAC9D,GAAA,KACG;AACH,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,SAAA,EAAW,EAAA;AAAA,UACT,MAAA,CAAO,IAAA;AAAA,UACP,MAAA,CAAO,CAAA,EAAA,EAAK,EAAA,IAAM,IAAI,CAAA,CAAE,CAAA;AAAA,UACxB;AAAA,YACE,CAAC,MAAA,CAAO,CAAA,EAAA,EAAK,EAAE,CAAA,CAAE,CAAC,GAAG,EAAA;AAAA,YACrB,CAAC,MAAA,CAAO,CAAA,EAAA,EAAK,EAAE,CAAA,CAAE,CAAC,GAAG,EAAA;AAAA,YACrB,CAAC,MAAA,CAAO,CAAA,EAAA,EAAK,EAAE,CAAA,CAAE,CAAC,GAAG,EAAA;AAAA,YACrB,CAAC,MAAA,CAAO,CAAA,EAAA,EAAK,EAAE,CAAA,CAAE,CAAC,GAAG,EAAA;AAAA,YACrB,CAAC,MAAA,CAAO,CAAA,GAAA,EAAM,GAAG,CAAA,CAAE,CAAC,GAAG;AAAA,WACzB;AAAA,UACA;AAAA,SACF;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAqClB,MAAM,SAAS,MAAA,CAAO,MAAA;AAAA,EAC3B,UAAA,CAAwC,SAAS,WAAA,CAAY,KAAA,EAAO,GAAA,EAAK;AACvE,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA,GAAQ,KAAA;AAAA,MACR,OAAA,GAAU,SAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,SAAA,EAAW,EAAE,CAAC,MAAA,CAAO,KAAK,GAAG,KAAA,EAAO,CAAA,EAC5D,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,MAAA,CAAO,IAAA;AAAA,UACP;AAAA,YACE,CAAC,MAAA,CAAO,IAAI,GAAG,OAAA,KAAY,MAAA;AAAA,YAC3B,CAAC,MAAA,CAAO,MAAM,GAAG,OAAA,KAAY;AAAA,WAC/B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ,CAAC,CAAA;AAAA,EACD;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;AACA,MAAA,CAAO,WAAA,GAAc,QAAA;AACd,MAAM,aAAA,GAAgB;;;;"}
|
|
@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { s as styles } from './Link.module-JgOOqNcL.js';
|
|
5
|
-
import { I as Icon } from './Icon-
|
|
5
|
+
import { I as Icon } from './Icon-B5zwN7GD.js';
|
|
6
6
|
import { c as cx } from './index-De1g9FRV.js';
|
|
7
7
|
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';
|
|
8
8
|
import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
|
|
@@ -100,4 +100,4 @@ const Link = forwardRef(
|
|
|
100
100
|
Link.displayName = Link$1.displayName;
|
|
101
101
|
|
|
102
102
|
export { Link as L, useLinkStyles as u };
|
|
103
|
-
//# sourceMappingURL=Link-
|
|
103
|
+
//# sourceMappingURL=Link-D7ycmfQ_.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Link-D7ycmfQ_.js","sources":["../../hammer-icon/mdi/round/open_in_new.svg","../src/components/Link/internal/LinkHeadless.tsx","../src/components/Link/useLinkStyles.ts","../src/components/Link/internal/Link.tsx","../src/components/Link/Link.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgOpenInNew = (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: \"M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13a.996.996 0 1 0 1.41 1.41L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z\" }));\nexport default SvgOpenInNew;\n","import { forwardRef, type ComponentPropsWithoutRef } from \"react\";\n\nimport styles from \"./Link.module.scss\";\nimport { Icon } from \"../../Icon\";\nimport OpenInNew from \"@servicetitan/hammer-icon/mdi/round/open_in_new.svg\";\n\n/**\n * Props for the LinkHeadless component.\n * @extends ComponentPropsWithoutRef<\"a\">\n */\nexport type LinkHeadlessProps = ComponentPropsWithoutRef<\"a\">;\n\n/**\n * Headless link component for creating accessible hyperlinks.\n *\n * Features:\n * - Security attributes (rel=\"noopener noreferrer\") for external links\n *\n * @example\n * <LinkHeadless href=\"/dashboard\">\n * Go to Dashboard\n * </LinkHeadless>\n *\n * @example\n * <LinkHeadless href=\"https://example.com\" target=\"_blank\">\n * External Documentation\n * </LinkHeadless>\n *\n */\nexport const LinkHeadless = forwardRef<HTMLAnchorElement, LinkHeadlessProps>(\n ({ children, ...props }, ref) => {\n return (\n <a\n rel=\"noopener noreferrer\"\n data-anv=\"link-headless\"\n ref={ref}\n {...props}\n >\n {children}\n {props.target === \"_blank\" && (\n <Icon className={styles[\"open-in-new\"]} inherit svg={OpenInNew} />\n )}\n </a>\n );\n },\n);\n\nLinkHeadless.displayName = \"LinkHeadless\";\n","import cx from \"classnames\";\n\nimport type { LayoutUtilProps } from \"../../types\";\nimport type { LinkProps } from \"./Link\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport styles from \"./internal/Link.module.scss\";\n\n/**\n * Props for the useLinkStyles hook.\n * @extends LayoutUtilProps\n */\nexport type UseLinkStylesProps = LayoutUtilProps &\n Pick<LinkProps, \"className\" | \"appearance\" | \"ghost\" | \"style\">;\n\n/**\n * Hook for generating link styles and class names.\n *\n * @param props - The link style properties\n * @returns Object containing linkClassNames and styleCombined\n */\nexport const useLinkStyles = (props: UseLinkStylesProps) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const { className, appearance = \"primary\", ghost, style } = componentProps;\n\n const linkClassNames = cx([styles[\"link\"]], className, {\n [styles[\"ghost\"]]: ghost,\n [styles[\"secondary\"]]: appearance === \"secondary\",\n });\n\n const styleCombined = Object.assign({}, style, layoutStyles);\n\n return { linkClassNames, styleCombined };\n};\n","import { forwardRef, type ComponentPropsWithoutRef } from \"react\";\n\nimport type { LayoutUtilProps } from \"../../../types\";\n\nimport { LinkHeadless } from \"./LinkHeadless\";\n\nimport { useLinkStyles } from \"../useLinkStyles\";\n\n/**\n * Props for the Link component.\n * @extends ComponentPropsWithoutRef<\"a\">\n * @extends LayoutUtilProps\n */\nexport type LinkProps = ComponentPropsWithoutRef<\"a\"> &\n LayoutUtilProps &\n (\n | {\n /**\n * The visual appearance of the link.\n * @default \"primary\"\n */\n appearance?: \"primary\";\n /**\n * Whether the link should have a quieter, less prominent appearance\n * @remarks Only available when appearance is \"primary\".\n */\n ghost?: boolean;\n }\n | {\n /**\n * The visual appearance of the LinkButton. Secondary appearance cannot be ghost.\n */\n appearance: \"secondary\";\n /**\n * Whether the LinkButton should have a quieter, less prominent appearance.\n * @remarks Must be false when appearance is \"secondary\".\n */\n ghost?: false;\n }\n );\n\n/**\n * Link component for creating accessible, styled hyperlinks.\n *\n * Features:\n * - Two visual appearances: primary (default) and secondary\n * - Ghost mode for less prominent styling\n * - Automatic external link icon for target=\"_blank\" links\n * - Security attributes (rel=\"noopener noreferrer\") for external links\n * - Full accessibility support with proper focus management\n * - Supports layout utilities for positioning and spacing\n * - Flexible content support for text and other elements\n * - Responsive design with consistent typography\n * - Hover and focus states with proper visual feedback\n * - Screen reader support for external link announcements\n *\n * @example\n * <Link href=\"/dashboard\" appearance=\"primary\">\n * Go to Dashboard\n * </Link>\n *\n * @example\n * <Link href=\"https://example.com\" target=\"_blank\" ghost>\n * External Documentation\n * </Link>\n *\n * @example\n * <Link href=\"/settings\" appearance=\"secondary\">\n * Settings\n * </Link>\n *\n * @example\n * <Link href=\"/profile\" gap=\"2\" alignItems=\"center\">\n * <Avatar name=\"John Doe\" size=\"small\" />\n * View Profile\n * </Link>\n */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n const { appearance, className, ghost, style, children, ...rest } = props;\n const { linkClassNames, styleCombined } = useLinkStyles({\n appearance,\n className,\n ghost,\n style,\n });\n\n return (\n <LinkHeadless\n className={linkClassNames}\n data-anv=\"link\"\n ref={ref}\n style={styleCombined}\n {...rest}\n >\n {children}\n </LinkHeadless>\n );\n});\n\nLink.displayName = \"Link\";\n","import { type Ref, forwardRef } from \"react\";\n\nimport { childrenToString } from \"../../internal/functions\";\nimport type { DataTrackingId, DistributiveOmit } from \"../../types\";\nimport { useTrackingId } from \"../../hooks\";\n\nimport {\n type LinkProps as BaseLinkProps,\n Link as BaseLink,\n} from \"./internal/Link\";\n\n/**\n * Props for the Link component.\n * @extends Omit<BaseLinkProps, \"href\">\n * @extends DataTrackingId\n */\nexport type LinkProps = DistributiveOmit<BaseLinkProps, \"href\"> &\n DataTrackingId &\n (\n | {\n pathname?: never;\n search?: never;\n href?: BaseLinkProps[\"href\"];\n }\n | {\n pathname: string;\n search?: string;\n href?: never;\n }\n | {\n pathname?: never;\n search?: never;\n href?: never;\n }\n );\n\n/**\n * Link component for creating accessible, styled hyperlinks with tracking support.\n *\n * Features:\n * - Two visual appearances: primary (default) and secondary\n * - Quiet mode for less prominent styling\n * - Automatic external link icon for target=\"_blank\" links\n * - Security attributes (rel=\"noopener noreferrer\") for external links\n * - Full accessibility support with proper focus management\n * - Supports layout utilities for positioning and spacing\n * - Flexible content support for text and other elements\n * - Responsive design with consistent typography\n * - Hover and focus states with proper visual feedback\n * - Screen reader support for external link announcements\n * - Automatic tracking ID generation for analytics\n * - Client-side navigation support with pathname and search params\n * - History API integration for single-page application navigation\n *\n * @example\n * <Link href=\"/dashboard\" appearance=\"primary\">\n * Go to Dashboard\n * </Link>\n *\n * @example\n * <Link pathname=\"/settings\" search=\"?tab=profile\">\n * Profile Settings\n * </Link>\n *\n * @example\n * <Link href=\"https://example.com\" target=\"_blank\" ghost>\n * External Documentation\n * </Link>\n *\n * @example\n * <Link href=\"/profile\" gap=\"2\" alignItems=\"center\">\n * <Avatar name=\"John Doe\" size=\"small\" />\n * View Profile\n * </Link>\n */\nexport const Link = forwardRef(\n (props: LinkProps, ref: Ref<HTMLAnchorElement>) => {\n const { onClick, pathname, children, search, ...rest } = props;\n const data = {\n appearance: props.appearance,\n ghost: props.ghost,\n children: childrenToString(children),\n };\n\n const handleClick = (\n ...args: Parameters<NonNullable<LinkProps[\"onClick\"]>>\n ) => {\n if (pathname) {\n const to = pathname + (search ?? \"\");\n args[0].preventDefault();\n history.pushState(null, \"\", to);\n onClick?.(...args);\n } else {\n onClick?.(...args);\n }\n };\n\n const trackingId = useTrackingId({\n name: \"Link\",\n data,\n hasOverride: !!rest[\"data-tracking-id\"],\n });\n\n return (\n <BaseLink\n onClick={handleClick}\n ref={ref}\n data-tracking-id={trackingId}\n {...rest}\n >\n {children}\n </BaseLink>\n );\n },\n);\n\nLink.displayName = BaseLink.displayName;\n"],"names":["OpenInNew","Link","BaseLink"],"mappings":"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"}
|
package/dist/Link.css
CHANGED
|
@@ -28,8 +28,7 @@
|
|
|
28
28
|
}._link_17g38_1[data-interactive=focus-visible], ._link_17g38_1:focus, ._link_17g38_1:focus-visible {
|
|
29
29
|
outline-width: var(--a2-size-half, 0.125rem);
|
|
30
30
|
color: var(--a2-mod-link-foreground-color);
|
|
31
|
-
|
|
32
|
-
text-decoration: var(--a2-mod-link-text-decoration);
|
|
31
|
+
text-decoration: var(--a2-mod-link-text-decoration);
|
|
33
32
|
}._link_17g38_1[data-interactive=hover], ._link_17g38_1:hover {
|
|
34
33
|
color: var(--a2-mod-link-foreground-color-hover) !important;
|
|
35
34
|
/* Need !important and redeclaring the property here to override !important that is in the bootstrap file...
|
|
@@ -37,8 +36,7 @@
|
|
|
37
36
|
text-decoration: none !important;
|
|
38
37
|
}
|
|
39
38
|
*/
|
|
40
|
-
|
|
41
|
-
text-decoration: var(--a2-mod-link-text-decoration) !important;
|
|
39
|
+
text-decoration: var(--a2-mod-link-text-decoration) !important;
|
|
42
40
|
}._secondary_17g38_44 {
|
|
43
41
|
--a2-mod-link-foreground-color: var(--a2-link-secondary-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
|
|
44
42
|
--a2-mod-link-foreground-color-hover: var(--a2-link-secondary-foreground-color-hover, light-dark(color-mix(in srgb, var(--a2-foreground-color-default, #040404) 80%, transparent), color-mix(in srgb, var(--a2-foreground-color-default, #ffffff) 80%, transparent)));
|
package/dist/Link.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { L as Link, L as default, u as useLinkStyles } from './Link-
|
|
1
|
+
export { L as Link, L as default, u as useLinkStyles } from './Link-D7ycmfQ_.js';
|
|
2
2
|
//# sourceMappingURL=Link.js.map
|