@servicetitan/anvil2 1.47.1 → 1.48.1
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 +32 -0
- package/dist/{Alert-BoJUAPue.js → Alert-Cz_w_cw0.js} +4 -4
- package/dist/{Alert-BoJUAPue.js.map → Alert-Cz_w_cw0.js.map} +1 -1
- package/dist/Alert.js +1 -1
- package/dist/{Announcement-DtMAQ0Xc.js → Announcement-C1xSJkl0.js} +4 -4
- package/dist/{Announcement-DtMAQ0Xc.js.map → Announcement-C1xSJkl0.js.map} +1 -1
- package/dist/Announcement.js +1 -1
- package/dist/{AnvilProvider-BhQklhtR.js → AnvilProvider-DDo8ZcIA.js} +4 -4
- package/dist/{AnvilProvider-BhQklhtR.js.map → AnvilProvider-DDo8ZcIA.js.map} +1 -1
- package/dist/AnvilProvider.js +1 -1
- package/dist/{Avatar-C0FuFDK4.js → Avatar-Bbwk2MCy.js} +2 -2
- package/dist/{Avatar-C0FuFDK4.js.map → Avatar-Bbwk2MCy.js.map} +1 -1
- package/dist/{Avatar-BWw31pcL.js → Avatar-VQrimv28.js} +2 -2
- package/dist/{Avatar-BWw31pcL.js.map → Avatar-VQrimv28.js.map} +1 -1
- package/dist/Avatar.js +2 -2
- package/dist/{Badge-DniZR2GC.js → Badge-DOnID5l5.js} +2 -2
- package/dist/{Badge-DniZR2GC.js.map → Badge-DOnID5l5.js.map} +1 -1
- package/dist/Badge.js +1 -1
- package/dist/{Breadcrumbs-0Yx3iLZ8.js → Breadcrumbs-DKqd8VRz.js} +5 -5
- package/dist/{Breadcrumbs-0Yx3iLZ8.js.map → Breadcrumbs-DKqd8VRz.js.map} +1 -1
- package/dist/Breadcrumbs.js +1 -1
- package/dist/{Button-Bm-YMdkp.js → Button-DzcOa6iJ.js} +3 -3
- package/dist/{Button-Bm-YMdkp.js.map → Button-DzcOa6iJ.js.map} +1 -1
- package/dist/Button.js +1 -1
- package/dist/{ButtonCompound-BA95JQGP.js → ButtonCompound-Dvr3Fres.js} +2 -2
- package/dist/{ButtonCompound-BA95JQGP.js.map → ButtonCompound-Dvr3Fres.js.map} +1 -1
- package/dist/ButtonCompound.js +1 -1
- package/dist/{ButtonLink-BiFzqDml.js → ButtonLink-DGIRpyK6.js} +3 -3
- package/dist/{ButtonLink-BiFzqDml.js.map → ButtonLink-DGIRpyK6.js.map} +1 -1
- package/dist/ButtonLink.js +1 -1
- package/dist/{ButtonToggle-BO9HLpIW.js → ButtonToggle-Dv6VAm4W.js} +3 -3
- package/dist/{ButtonToggle-BO9HLpIW.js.map → ButtonToggle-Dv6VAm4W.js.map} +1 -1
- package/dist/ButtonToggle.js +1 -1
- package/dist/{Calendar-B3YJQo6Y.js → Calendar-8bP4LsQV.js} +2 -2
- package/dist/{Calendar-B3YJQo6Y.js.map → Calendar-8bP4LsQV.js.map} +1 -1
- package/dist/{Calendar-BE9JCFwy.js → Calendar-NDOcurOz.js} +5 -5
- package/dist/{Calendar-BE9JCFwy.js.map → Calendar-NDOcurOz.js.map} +1 -1
- package/dist/Calendar.js +2 -2
- package/dist/{Card-TyKjI6d8.js → Card-Cyoz-LaD.js} +2 -2
- package/dist/{Card-TyKjI6d8.js.map → Card-Cyoz-LaD.js.map} +1 -1
- package/dist/Card.js +1 -1
- package/dist/{Checkbox-DdDtsKg7.js → Checkbox-BJnt8TFk.js} +2 -2
- package/dist/{Checkbox-DdDtsKg7.js.map → Checkbox-BJnt8TFk.js.map} +1 -1
- package/dist/{Checkbox-Bib3kQcl.js → Checkbox-Bsa1FgoI.js} +5 -5
- package/dist/{Checkbox-Bib3kQcl.js.map → Checkbox-Bsa1FgoI.js.map} +1 -1
- package/dist/Checkbox.js +2 -2
- package/dist/{Chip-DRw9cu1_.js → Chip-BGa1Inb8.js} +4 -4
- package/dist/{Chip-DRw9cu1_.js.map → Chip-BGa1Inb8.js.map} +1 -1
- package/dist/Chip.js +1 -1
- package/dist/{Combobox-BWGxdcGI.js → Combobox-BfqKpX1v.js} +13 -13
- package/dist/{Combobox-BWGxdcGI.js.map → Combobox-BfqKpX1v.js.map} +1 -1
- package/dist/Combobox.js +1 -1
- package/dist/{DataTable-ApkEFfCX.js → DataTable-xUON92DR.js} +302 -132
- package/dist/DataTable-xUON92DR.js.map +1 -0
- package/dist/DataTable.css +86 -83
- package/dist/{DateField-ynB9Nkku.js → DateField-Cm0FIG3Y.js} +6 -6
- package/dist/{DateField-ynB9Nkku.js.map → DateField-Cm0FIG3Y.js.map} +1 -1
- package/dist/DateField.js +1 -1
- package/dist/{DateFieldRange-DwUXExjQ.js → DateFieldRange-CGGqW_cg.js} +6 -6
- package/dist/{DateFieldRange-DwUXExjQ.js.map → DateFieldRange-CGGqW_cg.js.map} +1 -1
- package/dist/DateFieldRange.js +1 -1
- package/dist/{DateFieldSingle-ipxhv1fi.js → DateFieldSingle-BYWuJ3IL.js} +6 -6
- package/dist/{DateFieldSingle-ipxhv1fi.js.map → DateFieldSingle-BYWuJ3IL.js.map} +1 -1
- package/dist/DateFieldSingle.js +1 -1
- package/dist/{DateFieldYearless-BH3Kdx-c.js → DateFieldYearless-BXRgNWzy.js} +2 -2
- package/dist/{DateFieldYearless-BH3Kdx-c.js.map → DateFieldYearless-BXRgNWzy.js.map} +1 -1
- package/dist/DateFieldYearless.js +1 -1
- package/dist/{DaysOfTheWeek-GHPO3u2J.js → DaysOfTheWeek-BIi9dyJP.js} +9 -8
- package/dist/DaysOfTheWeek-BIi9dyJP.js.map +1 -0
- package/dist/DaysOfTheWeek.js +1 -1
- package/dist/{Details-clBN4oi5.js → Details-Bg7QzlOm.js} +3 -3
- package/dist/{Details-clBN4oi5.js.map → Details-Bg7QzlOm.js.map} +1 -1
- package/dist/Details.js +1 -1
- package/dist/{Dialog-Drw33nrV.js → Dialog-fJClGTI6.js} +4 -4
- package/dist/{Dialog-Drw33nrV.js.map → Dialog-fJClGTI6.js.map} +1 -1
- package/dist/Dialog.js +1 -1
- package/dist/{Divider-Dx2AV2jM.js → Divider-DYZFKug1.js} +2 -2
- package/dist/{Divider-Dx2AV2jM.js.map → Divider-DYZFKug1.js.map} +1 -1
- package/dist/Divider.js +1 -1
- package/dist/Dnd.js +1 -1
- package/dist/DndSort.js +5 -5
- package/dist/{Drawer-BDShECnc.js → Drawer-DyHDRTR-.js} +4 -4
- package/dist/{Drawer-BDShECnc.js.map → Drawer-DyHDRTR-.js.map} +1 -1
- package/dist/Drawer.js +1 -1
- package/dist/{EditCard-1KcrWvsY.js → EditCard-LdyduHqX.js} +6 -6
- package/dist/{EditCard-1KcrWvsY.js.map → EditCard-LdyduHqX.js.map} +1 -1
- package/dist/EditCard.js +1 -1
- package/dist/{FieldLabel-NOjvQkOa.js → FieldLabel-DIlzcPIQ.js} +3 -3
- package/dist/{FieldLabel-NOjvQkOa.js.map → FieldLabel-DIlzcPIQ.js.map} +1 -1
- package/dist/FieldLabel.js +1 -1
- package/dist/{FieldMessage-D0Z4yMMm.js → FieldMessage-BbARBii0.js} +2 -2
- package/dist/{FieldMessage-D0Z4yMMm.js.map → FieldMessage-BbARBii0.js.map} +1 -1
- package/dist/FieldMessage.js +1 -1
- package/dist/{Flex-DdOpCJf2.js → Flex-GLF5XRJg.js} +2 -2
- package/dist/{Flex-DdOpCJf2.js.map → Flex-GLF5XRJg.js.map} +1 -1
- package/dist/Flex.js +1 -1
- package/dist/{Grid-M1Gq9b-a.js → Grid-BpAt2zA7.js} +2 -2
- package/dist/{Grid-M1Gq9b-a.js.map → Grid-BpAt2zA7.js.map} +1 -1
- package/dist/Grid.js +1 -1
- package/dist/{Helper-BTXu4PCQ.js → Helper-DHoKHqxV.js} +2 -2
- package/dist/{Helper-BTXu4PCQ.js.map → Helper-DHoKHqxV.js.map} +1 -1
- package/dist/{Icon-CB-34pME.js → Icon-TcJbUdTz.js} +2 -2
- package/dist/{Icon-CB-34pME.js.map → Icon-TcJbUdTz.js.map} +1 -1
- package/dist/Icon.js +1 -1
- package/dist/{InputMask-D1Uushxa.js → InputMask-B6oJlChY.js} +2 -2
- package/dist/{InputMask-D1Uushxa.js.map → InputMask-B6oJlChY.js.map} +1 -1
- package/dist/InputMask.js +1 -1
- package/dist/{Link-BYvAKMcm.js → Link-Br_AJ7Af.js} +3 -3
- package/dist/{Link-BYvAKMcm.js.map → Link-Br_AJ7Af.js.map} +1 -1
- package/dist/Link.js +1 -1
- package/dist/{LinkButton-DFJqMz7w.js → LinkButton-CwiVzaro.js} +2 -2
- package/dist/{LinkButton-DFJqMz7w.js.map → LinkButton-CwiVzaro.js.map} +1 -1
- package/dist/LinkButton.js +1 -1
- package/dist/{ListView-DG9YJ3DU.js → ListView-fBFSagWO.js} +6 -4
- package/dist/ListView-fBFSagWO.js.map +1 -0
- package/dist/ListView.js +1 -1
- package/dist/{Listbox-CMg3B6Nd.js → Listbox-gtZ2Ao_I.js} +5 -5
- package/dist/{Listbox-CMg3B6Nd.js.map → Listbox-gtZ2Ao_I.js.map} +1 -1
- package/dist/Listbox.js +1 -1
- package/dist/{LocalizationProvider-Dgx0sOZg.js → LocalizationProvider-Cqattc3O.js} +2 -2
- package/dist/{LocalizationProvider-Dgx0sOZg.js.map → LocalizationProvider-Cqattc3O.js.map} +1 -1
- package/dist/LocalizationProvider.js +1 -1
- package/dist/{Menu-WuNO2Rbu.js → Menu-CBbUK_sX.js} +4 -4
- package/dist/{Menu-WuNO2Rbu.js.map → Menu-CBbUK_sX.js.map} +1 -1
- package/dist/Menu.js +1 -1
- package/dist/{NumberField-BUo30AOa.js → NumberField-CNskrtsN.js} +9 -8
- package/dist/{NumberField-BUo30AOa.js.map → NumberField-CNskrtsN.js.map} +1 -1
- package/dist/NumberField.js +1 -1
- package/dist/Overflow.js +6 -4
- package/dist/Overflow.js.map +1 -1
- package/dist/{Page-BtkspWJj.js → Page-4VdFrCjy.js} +13 -13
- package/dist/{Page-BtkspWJj.js.map → Page-4VdFrCjy.js.map} +1 -1
- package/dist/Page.js +1 -1
- package/dist/{Pagination-D6y_imDK.js → Pagination-CQjNN1yN.js} +8 -7
- package/dist/{Pagination-D6y_imDK.js.map → Pagination-CQjNN1yN.js.map} +1 -1
- package/dist/Pagination.js +1 -1
- package/dist/{Popover-CSj2mv66.js → Popover--c9PXAVi.js} +3 -3
- package/dist/{Popover-CSj2mv66.js.map → Popover--c9PXAVi.js.map} +1 -1
- package/dist/Popover.js +1 -1
- package/dist/{ProgressBar-BPIta_9F.js → ProgressBar-CXMuhBQV.js} +6 -6
- package/dist/{ProgressBar-BPIta_9F.js.map → ProgressBar-CXMuhBQV.js.map} +1 -1
- package/dist/ProgressBar.js +1 -1
- package/dist/{Radio-0WGmwHGs.js → Radio-CTYs8JpI.js} +2 -2
- package/dist/{Radio-0WGmwHGs.js.map → Radio-CTYs8JpI.js.map} +1 -1
- package/dist/Radio.js +2 -2
- package/dist/{RadioGroup-BARdP9VP.js → RadioGroup-BVGnsTuG.js} +6 -6
- package/dist/RadioGroup-BVGnsTuG.js.map +1 -0
- package/dist/{SearchField-DTdrOWbb.js → SearchField-DLqva3o3.js} +3 -3
- package/dist/{SearchField-DTdrOWbb.js.map → SearchField-DLqva3o3.js.map} +1 -1
- package/dist/SearchField.js +1 -1
- package/dist/{SegmentedControl-DVSlMI3w.js → SegmentedControl-1OzOQmCp.js} +2 -2
- package/dist/{SegmentedControl-DVSlMI3w.js.map → SegmentedControl-1OzOQmCp.js.map} +1 -1
- package/dist/SegmentedControl.js +1 -1
- package/dist/{SelectCard-Db-CNnMe.js → SelectCard-Dw7zW0UN.js} +4 -4
- package/dist/{SelectCard-Db-CNnMe.js.map → SelectCard-Dw7zW0UN.js.map} +1 -1
- package/dist/SelectCard.js +1 -1
- package/dist/{SelectTrigger-CcCiccEp.js → SelectTrigger-BQNqyG3M.js} +5 -5
- package/dist/{SelectTrigger-CcCiccEp.js.map → SelectTrigger-BQNqyG3M.js.map} +1 -1
- package/dist/SelectTrigger.js +1 -1
- package/dist/{SelectTriggerBase-DtLWrsm7.js → SelectTriggerBase-B-fxog4U.js} +6 -6
- package/dist/{SelectTriggerBase-DtLWrsm7.js.map → SelectTriggerBase-B-fxog4U.js.map} +1 -1
- package/dist/{SideNav-B-rd3esD.js → SideNav-COiPAIph.js} +3 -3
- package/dist/{SideNav-B-rd3esD.js.map → SideNav-COiPAIph.js.map} +1 -1
- package/dist/SideNav.js +1 -1
- package/dist/Skeleton.js +1 -1
- package/dist/{Stepper-CrqRl7BV.js → Stepper-xcgOQzru.js} +4 -4
- package/dist/{Stepper-CrqRl7BV.js.map → Stepper-xcgOQzru.js.map} +1 -1
- package/dist/Stepper.js +1 -1
- package/dist/{Switch-Dt8kun__.js → Switch-mhyHJeex.js} +5 -5
- package/dist/{Switch-Dt8kun__.js.map → Switch-mhyHJeex.js.map} +1 -1
- package/dist/Switch.js +1 -1
- package/dist/{Tab-D8fMPPzs.js → Tab-BISlFW_i.js} +3 -3
- package/dist/{Tab-D8fMPPzs.js.map → Tab-BISlFW_i.js.map} +1 -1
- package/dist/Tab.js +1 -1
- package/dist/Table.js +1 -1
- package/dist/{Text-Bbi-LKog.js → Text-CDzLZl1O.js} +2 -2
- package/dist/{Text-Bbi-LKog.js.map → Text-CDzLZl1O.js.map} +1 -1
- package/dist/Text.js +1 -1
- package/dist/{TextField-BNIVbKWT.js → TextField-CUrYEZR4.js} +2 -2
- package/dist/{TextField-BNIVbKWT.js.map → TextField-CUrYEZR4.js.map} +1 -1
- package/dist/{TextField-gFol8RuR.js → TextField-DPTJjF8V.js} +7 -6
- package/dist/TextField-DPTJjF8V.js.map +1 -0
- package/dist/TextField.js +1 -1
- package/dist/{Textarea-Ddnqj2Qt.js → Textarea-f0jAKcvn.js} +7 -6
- package/dist/{Textarea-Ddnqj2Qt.js.map → Textarea-f0jAKcvn.js.map} +1 -1
- package/dist/Textarea.js +1 -1
- package/dist/{ThemeProvider-Bo2JRqGq.js → ThemeProvider-CUiXHn4p.js} +2 -2
- package/dist/{ThemeProvider-Bo2JRqGq.js.map → ThemeProvider-CUiXHn4p.js.map} +1 -1
- package/dist/ThemeProvider.js +1 -1
- package/dist/{TimeField-Dc0CfW4e.js → TimeField-CGSwrpl0.js} +6 -6
- package/dist/{TimeField-Dc0CfW4e.js.map → TimeField-CGSwrpl0.js.map} +1 -1
- package/dist/TimeField.js +1 -1
- package/dist/Toast.js +2 -2
- package/dist/{Toaster-BGqW3sq1.js → Toaster-C6iB4h0P.js} +2 -2
- package/dist/{Toaster-BGqW3sq1.js.map → Toaster-C6iB4h0P.js.map} +1 -1
- package/dist/{Toaster-DEV2FFN2.js → Toaster-D72xHdfH.js} +26 -27
- package/dist/Toaster-D72xHdfH.js.map +1 -0
- package/dist/Toaster.css +56 -59
- package/dist/{Toolbar-DsBKx1eB.js → Toolbar-CcJa_YpH.js} +20 -20
- package/dist/{Toolbar-DsBKx1eB.js.map → Toolbar-CcJa_YpH.js.map} +1 -1
- package/dist/Toolbar.js +1 -1
- package/dist/{Tooltip-CmsYVHVU.js → Tooltip-BOfdwyTv.js} +2 -2
- package/dist/{Tooltip-CmsYVHVU.js.map → Tooltip-BOfdwyTv.js.map} +1 -1
- package/dist/Tooltip.js +1 -1
- package/dist/anvil-fonts.css +30 -0
- package/dist/beta/components/Table/DataTable/DataTable.d.ts +22 -1
- package/dist/beta/components/Table/DataTable/DataTable.test-data.d.ts +1 -0
- package/dist/beta/components/Table/DataTable/internal/DataTableContext.d.ts +1 -2
- package/dist/beta/components/Table/DataTable/internal/DataTablePagination.d.ts +3 -0
- package/dist/beta/components/Table/DataTable/internal/useDataTableContext.d.ts +4 -0
- package/dist/beta/components/Table/DataTable/stories/DataTable.story-data.d.ts +1 -0
- package/dist/beta/components/Table/DataTable/types.d.ts +43 -0
- package/dist/beta/components/Table/createColumnHelper.d.ts +1 -2
- package/dist/beta/components/Table/index.d.ts +1 -0
- package/dist/beta/components/Toolbar/Toolbar.d.ts +2 -2
- package/dist/beta/components/Toolbar/index.d.ts +1 -0
- package/dist/beta.js +4 -4
- package/dist/components/DateFieldRange/internal/useDateFieldRangeConversion.d.ts +1 -1
- package/dist/hooks/useBreakpoint/useBreakpoint.d.ts +32 -0
- package/dist/{index-CVqRZ_4L.js → index-CUVkL0hr.js} +3 -3
- package/dist/{index-CVqRZ_4L.js.map → index-CUVkL0hr.js.map} +1 -1
- package/dist/index.js +70 -69
- package/dist/index.js.map +1 -1
- package/dist/index2.css +0 -30
- package/dist/{useBreakpoint-6KK6MJ9g.js → useBreakpoint-BGCsBhQ7.js} +15 -2
- package/dist/useBreakpoint-BGCsBhQ7.js.map +1 -0
- package/dist/useBreakpoint.js +1 -1
- package/dist/{useLayoutPropsUtil-DLrhehwU.js → useLayoutPropsUtil-C7FVYB8F.js} +5 -46
- package/dist/useLayoutPropsUtil-C7FVYB8F.js.map +1 -0
- package/dist/{utils-wis6GReX.js → utils-CyPyKUVh.js} +2 -2
- package/dist/{utils-wis6GReX.js.map → utils-CyPyKUVh.js.map} +1 -1
- package/package.json +1 -1
- package/dist/DataTable-ApkEFfCX.js.map +0 -1
- package/dist/DaysOfTheWeek-GHPO3u2J.js.map +0 -1
- package/dist/ListView-DG9YJ3DU.js.map +0 -1
- package/dist/RadioGroup-BARdP9VP.js.map +0 -1
- package/dist/TextField-gFol8RuR.js.map +0 -1
- package/dist/Toaster-DEV2FFN2.js.map +0 -1
- package/dist/useBreakpoint-6KK6MJ9g.js.map +0 -1
- package/dist/useLayoutPropsUtil-DLrhehwU.js.map +0 -1
|
@@ -2,11 +2,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { forwardRef, useId, useState } from 'react';
|
|
4
4
|
import { c as cx } from './index-tZvMCc77.js';
|
|
5
|
-
import { I as Icon } from './Icon-
|
|
6
|
-
import { H as Helper } from './Helper-
|
|
7
|
-
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-
|
|
5
|
+
import { I as Icon } from './Icon-TcJbUdTz.js';
|
|
6
|
+
import { H as Helper } from './Helper-DHoKHqxV.js';
|
|
7
|
+
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-C7FVYB8F.js';
|
|
8
8
|
import { S as SrOnly } from './SrOnly-CTsYSuby.js';
|
|
9
|
-
import { F as FieldLabel } from './FieldLabel-
|
|
9
|
+
import { F as FieldLabel } from './FieldLabel-DIlzcPIQ.js';
|
|
10
10
|
|
|
11
11
|
import './RadioGroup.css';const SvgRadioButtonUnchecked = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }));
|
|
12
12
|
|
|
@@ -79,7 +79,7 @@ const RadioElement = forwardRef((props, ref) => {
|
|
|
79
79
|
defaultChecked,
|
|
80
80
|
value,
|
|
81
81
|
onChange: onChangeHandler,
|
|
82
|
-
"aria-describedby": helperUid,
|
|
82
|
+
"aria-describedby": description ? helperUid : void 0,
|
|
83
83
|
ref,
|
|
84
84
|
...rest
|
|
85
85
|
}
|
|
@@ -194,4 +194,4 @@ const RadioGroup = forwardRef(
|
|
|
194
194
|
RadioGroup.displayName = "RadioGroup";
|
|
195
195
|
|
|
196
196
|
export { RadioGroup as R, Radio as a };
|
|
197
|
-
//# sourceMappingURL=RadioGroup-
|
|
197
|
+
//# sourceMappingURL=RadioGroup-BVGnsTuG.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroup-BVGnsTuG.js","sources":["../../hammer-icon/mdi/two-tone/radio_button_unchecked.svg","../../hammer-icon/mdi/two-tone/radio_button_checked.svg","../src/components/Radio/internal/Radio.tsx","../src/components/Radio/RadioGroup.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgRadioButtonUnchecked = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\" }));\nexport default SvgRadioButtonUnchecked;\n","import * as React from \"react\";\nconst SvgRadioButtonChecked = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\" }), /* @__PURE__ */ React.createElement(\"circle\", { cx: 12, cy: 12, r: 5 }));\nexport default SvgRadioButtonChecked;\n","import {\n forwardRef,\n ComponentPropsWithoutRef,\n ChangeEvent,\n ReactElement,\n useId,\n} from \"react\";\nimport cx from \"classnames\";\nimport { Icon } from \"../../Icon\";\nimport Radio_outline from \"@servicetitan/hammer-icon/mdi/two-tone/radio_button_unchecked.svg\";\nimport Radio_checked from \"@servicetitan/hammer-icon/mdi/two-tone/radio_button_checked.svg\";\nimport styles from \"../Radio.module.scss\";\nimport { LayoutUtilProps, Svg } from \"../../../types\";\nimport { useLayoutPropsUtil } from \"../../../internal/hooks\";\nimport { Helper, HelperProps } from \"../../../internal/components\";\nimport { RadioState } from \"../types\";\n\n/**\n * Props for the Radio component\n * @extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\">\n * @extends LayoutUtilProps\n */\nexport type RadioProps = Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\"> &\n LayoutUtilProps & {\n /**\n * Controlled state\n * @default false\n */\n checked?: boolean;\n\n /**\n * Uncontrolled state\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * Callback when radio is changed\n */\n onChange?: (e?: ChangeEvent<HTMLInputElement>, state?: RadioState) => void;\n\n /**\n * Label for Radio\n * @remarks This should either be a string or have text content inside for accessibility\n */\n label?: ReactElement | string;\n\n /**\n * Error state for the radio\n * @default false\n */\n error?: boolean;\n\n /**\n * Icon overrides for checked and unchecked states\n */\n icons?: {\n /**\n * Icon to display when radio is checked\n */\n checked?: Svg;\n /**\n * Icon to display when radio is unchecked\n */\n unchecked?: Svg;\n };\n\n /**\n * Description text to display below the radio\n */\n description?: HelperProps[\"description\"];\n\n /**\n * When true, hides the radio for visual users\n * @default false\n */\n hideRadio?: boolean;\n };\n\nconst RadioElement = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n checked,\n defaultChecked,\n value,\n icons,\n error,\n label,\n onChange,\n style,\n description,\n hideRadio = false,\n ...rest\n } = componentProps;\n const {\n checked: checkedIcon = Radio_checked,\n unchecked: uncheckedIcon = Radio_outline,\n } = { ...icons };\n\n const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(e, { value, checked: e.target.checked });\n };\n\n const helperUid = useId();\n\n const wrapperClassNames = cx(\n styles[\"wrapper\"],\n { [styles[\"focus\"]]: hideRadio },\n className,\n );\n\n const radioClassNames = cx(styles[\"radio\"], {\n [styles[\"error\"]]: error,\n });\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n return (\n <div className={wrapperClassNames} style={styleCombined} data-anv=\"radio\">\n <label className={radioClassNames}>\n <input\n type=\"radio\"\n aria-checked={checked ?? defaultChecked}\n checked={checked}\n defaultChecked={defaultChecked}\n value={value}\n onChange={onChangeHandler}\n aria-describedby={description ? helperUid : undefined}\n ref={ref}\n {...rest}\n />\n\n <span\n className={cx(styles[\"icon-wrapper\"], {\n [styles[\"sr-only\"]]: hideRadio,\n })}\n >\n <Icon\n size=\"large\"\n svg={uncheckedIcon}\n className={cx([styles[\"icon-unchecked\"]])}\n />\n\n <Icon\n size=\"large\"\n svg={checkedIcon}\n className={cx([styles[\"icon-checked\"]])}\n />\n </span>\n\n <span className={cx({ [styles[\"focus-label\"]]: hideRadio })}>\n {label}\n </span>\n </label>\n\n {description ? (\n <div className={styles[\"helper-wrapper\"]}>\n <Helper id={helperUid} description={description} />\n </div>\n ) : null}\n </div>\n );\n});\n\nRadioElement.displayName = \"RadioElement\";\n\n/**\n * Radio component for single selection from a group of options.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Customizable icons for checked and unchecked states\n * - Error state with visual indicators\n * - Description text support\n * - Accessibility support with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Optional radio hiding for visual users\n * - Flexible labeling options\n * - Group support via Radio.Group\n *\n * @example\n * <Radio\n * label=\"Option 1\"\n * value=\"option1\"\n * checked={selectedValue === \"option1\"}\n * onChange={(e, state) => setSelectedValue(state?.value)}\n * />\n *\n * @example\n * <Radio\n * label=\"Custom styled option\"\n * value=\"custom\"\n * icons={{\n * checked: CustomCheckedIcon,\n * unchecked: CustomUncheckedIcon\n * }}\n * description=\"This option has custom styling\"\n * />\n *\n * @example\n * <Radio.Group legend=\"Choose your preference\" required>\n * <Radio label=\"Option A\" value=\"a\" />\n * <Radio label=\"Option B\" value=\"b\" />\n * <Radio label=\"Option C\" value=\"c\" />\n * </Radio.Group>\n */\nexport const Radio = RadioElement;\n","import {\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n ReactElement,\n useState,\n} from \"react\";\nimport styles from \"./Radio.module.scss\";\nimport cx from \"classnames\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { SrOnly } from \"../SrOnly\";\nimport { FieldLabel } from \"../FieldLabel\";\nimport { FieldLabelProps } from \"../../internal/types\";\n\n/**\n * Props for the RadioGroup component\n * @extends ComponentPropsWithoutRef<\"fieldset\">\n * @extends LayoutUtilProps\n * @extends Omit<FieldLabelProps, \"labelProps\">\n */\nexport type RadioGroupProps = ComponentPropsWithoutRef<\"fieldset\"> &\n LayoutUtilProps &\n Omit<FieldLabelProps, \"labelProps\"> & {\n /**\n * Required flag for label\n * @remarks This does not enforce error when nothing is selected\n */\n required?: boolean;\n\n /**\n * Legend for the fieldset\n */\n legend?: string | ReactElement;\n };\n\n/**\n * RadioGroup component for grouping related radio options.\n *\n * Features:\n * - Groups multiple radio options together\n * - Legend support for group labeling\n * - Required field indication\n * - Accessibility support with proper fieldset semantics\n * - Layout utility props for positioning and spacing\n * - Focus and blur event handling\n * - More info support for additional context\n * - Automatic alignment based on flex direction\n *\n * @example\n * <RadioGroup legend=\"Choose your preference\" required>\n * <Radio label=\"Option A\" value=\"a\" />\n * <Radio label=\"Option B\" value=\"b\" />\n * <Radio label=\"Option C\" value=\"c\" />\n * </RadioGroup>\n *\n * @example\n * <RadioGroup\n * legend=\"Horizontal layout\"\n * flexDirection=\"row\"\n * gap=\"4\"\n * >\n * <Radio label=\"Yes\" value=\"yes\" />\n * <Radio label=\"No\" value=\"no\" />\n * </RadioGroup>\n */\nexport const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(\n (props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n children,\n legend,\n moreInfo,\n onBlur,\n onFocus,\n required,\n style,\n ...rest\n } = componentProps;\n\n const RadioGroupClassNames = cx(styles[\"radio-group\"], className);\n const [openInfo, setOpenInfo] = useState<boolean>(false);\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n alignItems:\n layoutStyles?.alignItems ??\n (layoutStyles?.flexDirection === \"row\" ? \"center\" : undefined),\n };\n\n const focusHandler: FocusEventHandler<HTMLFieldSetElement> = (e) => {\n onFocus?.(e);\n setOpenInfo(true);\n };\n\n const blurHandler: FocusEventHandler<HTMLFieldSetElement> = (e) => {\n onBlur?.(e);\n setOpenInfo(false);\n };\n\n return (\n <fieldset\n role=\"radiogroup\"\n data-anv=\"radio-group\"\n className={RadioGroupClassNames}\n aria-required={required}\n style={styleCombined}\n ref={ref}\n onFocus={focusHandler}\n onBlur={blurHandler}\n {...rest}\n >\n <legend className={styles[\"legend\"]}>\n {legend}\n {required && \", required\"}\n {moreInfo && <SrOnly>{moreInfo}</SrOnly>}\n </legend>\n <FieldLabel\n aria-hidden\n moreInfo={moreInfo}\n required={required}\n openMoreInfo={openInfo}\n >\n {legend}\n </FieldLabel>\n <div\n className={styles[\"children\"]}\n style={{\n flexDirection: layoutStyles?.flexDirection,\n gap: layoutStyles?.gap,\n }}\n >\n {children}\n </div>\n </fieldset>\n );\n },\n);\n\nRadioGroup.displayName = \"RadioGroup\";\n"],"names":["Radio_checked","Radio_outline"],"mappings":"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"}
|
|
@@ -5,8 +5,8 @@ import { c as cx } from './index-tZvMCc77.js';
|
|
|
5
5
|
import { t as textFieldStyles } from './TextField.module-pD1felN8.js';
|
|
6
6
|
import { S as SvgClose } from './close-DZj38AEh.js';
|
|
7
7
|
import { S as SrOnly } from './SrOnly-CTsYSuby.js';
|
|
8
|
-
import { I as Icon } from './Icon-
|
|
9
|
-
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-
|
|
8
|
+
import { I as Icon } from './Icon-TcJbUdTz.js';
|
|
9
|
+
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-C7FVYB8F.js';
|
|
10
10
|
import { useTrackingId } from './useTrackingId.js';
|
|
11
11
|
import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
|
|
12
12
|
|
|
@@ -151,4 +151,4 @@ const SearchField = forwardRef(
|
|
|
151
151
|
);
|
|
152
152
|
|
|
153
153
|
export { SearchField as S, SvgSearch as a };
|
|
154
|
-
//# sourceMappingURL=SearchField-
|
|
154
|
+
//# sourceMappingURL=SearchField-DLqva3o3.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField-DTdrOWbb.js","sources":["../../hammer-icon/mdi/round/search.svg","../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgSearch = (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: \"M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" }));\nexport default SvgSearch;\n","import {\n forwardRef,\n ComponentPropsWithoutRef,\n useId,\n useRef,\n ChangeEvent,\n useState,\n useEffect,\n} from \"react\";\nimport cx from \"classnames\";\n\nimport textfieldStyles from \"../TextField/TextField.module.scss\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport Search from \"@servicetitan/hammer-icon/mdi/round/search.svg\";\nimport styles from \"./SearchField.module.scss\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { SrOnly } from \"../SrOnly\";\nimport { Icon } from \"../Icon\";\nimport { useTrackingId, useMergeRefs } from \"../../hooks\";\nimport { DataTrackingId, LayoutUtilProps, Size } from \"../../types\";\n\n/**\n * Props for the SearchField component\n * @extends Omit<ComponentPropsWithoutRef<\"input\">, \"size\" | \"prefix\" | \"required\" | \"children\">\n * @extends LayoutUtilProps\n */\nexport type SearchFieldProps = Omit<\n ComponentPropsWithoutRef<\"input\">,\n \"size\" | \"prefix\" | \"required\" | \"children\"\n> &\n LayoutUtilProps & {\n /**\n * Size of the search field\n * @default \"medium\"\n */\n size?: Extract<Size, \"small\" | \"medium\" | \"large\">;\n /**\n * Whether the search field is disabled\n * @default false\n */\n disabled?: boolean;\n /**\n * Callback when the clear button is clicked\n */\n onClear?: () => void;\n } & DataTrackingId;\n\n/**\n * SearchField component for text input with search functionality.\n *\n * Features:\n * - Search icon prefix for visual clarity\n * - Clear button that appears when input has value\n * - Multiple size variants (small, medium, large)\n * - Controlled and uncontrolled modes\n * - Disabled and read-only states\n * - Accessibility support with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Automatic value detection for clear button visibility\n * - Search-specific input type and autocomplete settings\n * - Screen reader support with placeholder announcements\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <SearchField\n * placeholder=\"Search users...\"\n * onChange={(e) => setSearchTerm(e.target.value)}\n * onClear={() => setSearchTerm(\"\")}\n * />\n *\n * @example\n * <SearchField\n * size=\"large\"\n * value={searchValue}\n * onChange={(e) => setSearchValue(e.target.value)}\n * disabled={isLoading}\n * />\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n function SearchField(props, ref) {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n size,\n onChange,\n onClear,\n id: idProp,\n disabled,\n style,\n value,\n placeholder = \"Search...\",\n autoComplete = \"off\",\n ...rest\n } = componentProps;\n\n const [hasValue, setHasValue] = useState(\n rest.defaultValue || value ? true : false,\n );\n const placeholderUid = useId();\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const styleCombined = { ...style, ...layoutStyles };\n\n const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.value) {\n setHasValue(true);\n } else {\n setHasValue(false);\n }\n onChange?.(e);\n };\n\n useEffect(() => {\n if (typeof value === \"undefined\") return;\n if (value === \"\" || !value) {\n setHasValue(false);\n } else {\n setHasValue(true);\n }\n }, [value]);\n\n const handleClear = () => {\n if (!inputRef.current) return;\n if (disabled || rest.readOnly) return;\n onClear?.();\n if (value) {\n return;\n }\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\",\n )?.set;\n nativeInputValueSetter?.call(inputRef.current, \"\");\n inputRef.current.dispatchEvent(new Event(\"input\", { bubbles: true }));\n setHasValue(false);\n };\n\n const data = {\n value: props.value,\n defaultValue: props.defaultValue,\n disabled: props.disabled,\n readOnly: props.readOnly,\n size: props.size,\n };\n\n const trackingId = useTrackingId({\n name: \"SearchField\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n\n return (\n <div\n className={cx(\n textfieldStyles[\"textfield\"],\n styles[\"searchfield\"],\n className,\n )}\n data-anv=\"SearchField\"\n style={styleCombined}\n >\n <div\n className={cx(\n textfieldStyles[\"input-wrapper\"],\n styles[\"input-wrapper\"],\n {\n [textfieldStyles[\"small\"]]: size === \"small\",\n [textfieldStyles[\"large\"]]: size === \"large\",\n },\n )}\n role=\"presentation\"\n onClick={() => inputRef.current?.focus()}\n >\n <div aria-hidden className={textfieldStyles[\"prefix\"]}>\n <Icon aria-label=\"search\" svg={Search} />\n </div>\n <input\n className={cx(textfieldStyles[\"input\"])}\n ref={useMergeRefs([ref, inputRef])}\n onChange={handleOnChange}\n placeholder={placeholder}\n value={value}\n type=\"search\"\n autoComplete={autoComplete}\n disabled={disabled}\n aria-labelledby={placeholderUid}\n data-tracking-id={trackingId}\n {...rest}\n />\n <Icon\n aria-label=\"cancel\"\n svg={Close}\n role=\"button\"\n onClick={handleClear}\n className={styles[\"clear\"]}\n aria-disabled={disabled}\n style={{\n visibility: hasValue ? \"visible\" : \"hidden\",\n }}\n />\n </div>\n <SrOnly id={placeholderUid}>{placeholder}</SrOnly>\n </div>\n );\n },\n);\n"],"names":["SearchField","textfieldStyles","Search","Close"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SearchField-DLqva3o3.js","sources":["../../hammer-icon/mdi/round/search.svg","../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgSearch = (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: \"M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" }));\nexport default SvgSearch;\n","import {\n forwardRef,\n ComponentPropsWithoutRef,\n useId,\n useRef,\n ChangeEvent,\n useState,\n useEffect,\n} from \"react\";\nimport cx from \"classnames\";\n\nimport textfieldStyles from \"../TextField/TextField.module.scss\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport Search from \"@servicetitan/hammer-icon/mdi/round/search.svg\";\nimport styles from \"./SearchField.module.scss\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { SrOnly } from \"../SrOnly\";\nimport { Icon } from \"../Icon\";\nimport { useTrackingId, useMergeRefs } from \"../../hooks\";\nimport { DataTrackingId, LayoutUtilProps, Size } from \"../../types\";\n\n/**\n * Props for the SearchField component\n * @extends Omit<ComponentPropsWithoutRef<\"input\">, \"size\" | \"prefix\" | \"required\" | \"children\">\n * @extends LayoutUtilProps\n */\nexport type SearchFieldProps = Omit<\n ComponentPropsWithoutRef<\"input\">,\n \"size\" | \"prefix\" | \"required\" | \"children\"\n> &\n LayoutUtilProps & {\n /**\n * Size of the search field\n * @default \"medium\"\n */\n size?: Extract<Size, \"small\" | \"medium\" | \"large\">;\n /**\n * Whether the search field is disabled\n * @default false\n */\n disabled?: boolean;\n /**\n * Callback when the clear button is clicked\n */\n onClear?: () => void;\n } & DataTrackingId;\n\n/**\n * SearchField component for text input with search functionality.\n *\n * Features:\n * - Search icon prefix for visual clarity\n * - Clear button that appears when input has value\n * - Multiple size variants (small, medium, large)\n * - Controlled and uncontrolled modes\n * - Disabled and read-only states\n * - Accessibility support with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Automatic value detection for clear button visibility\n * - Search-specific input type and autocomplete settings\n * - Screen reader support with placeholder announcements\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <SearchField\n * placeholder=\"Search users...\"\n * onChange={(e) => setSearchTerm(e.target.value)}\n * onClear={() => setSearchTerm(\"\")}\n * />\n *\n * @example\n * <SearchField\n * size=\"large\"\n * value={searchValue}\n * onChange={(e) => setSearchValue(e.target.value)}\n * disabled={isLoading}\n * />\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n function SearchField(props, ref) {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n size,\n onChange,\n onClear,\n id: idProp,\n disabled,\n style,\n value,\n placeholder = \"Search...\",\n autoComplete = \"off\",\n ...rest\n } = componentProps;\n\n const [hasValue, setHasValue] = useState(\n rest.defaultValue || value ? true : false,\n );\n const placeholderUid = useId();\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const styleCombined = { ...style, ...layoutStyles };\n\n const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.value) {\n setHasValue(true);\n } else {\n setHasValue(false);\n }\n onChange?.(e);\n };\n\n useEffect(() => {\n if (typeof value === \"undefined\") return;\n if (value === \"\" || !value) {\n setHasValue(false);\n } else {\n setHasValue(true);\n }\n }, [value]);\n\n const handleClear = () => {\n if (!inputRef.current) return;\n if (disabled || rest.readOnly) return;\n onClear?.();\n if (value) {\n return;\n }\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\",\n )?.set;\n nativeInputValueSetter?.call(inputRef.current, \"\");\n inputRef.current.dispatchEvent(new Event(\"input\", { bubbles: true }));\n setHasValue(false);\n };\n\n const data = {\n value: props.value,\n defaultValue: props.defaultValue,\n disabled: props.disabled,\n readOnly: props.readOnly,\n size: props.size,\n };\n\n const trackingId = useTrackingId({\n name: \"SearchField\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n\n return (\n <div\n className={cx(\n textfieldStyles[\"textfield\"],\n styles[\"searchfield\"],\n className,\n )}\n data-anv=\"SearchField\"\n style={styleCombined}\n >\n <div\n className={cx(\n textfieldStyles[\"input-wrapper\"],\n styles[\"input-wrapper\"],\n {\n [textfieldStyles[\"small\"]]: size === \"small\",\n [textfieldStyles[\"large\"]]: size === \"large\",\n },\n )}\n role=\"presentation\"\n onClick={() => inputRef.current?.focus()}\n >\n <div aria-hidden className={textfieldStyles[\"prefix\"]}>\n <Icon aria-label=\"search\" svg={Search} />\n </div>\n <input\n className={cx(textfieldStyles[\"input\"])}\n ref={useMergeRefs([ref, inputRef])}\n onChange={handleOnChange}\n placeholder={placeholder}\n value={value}\n type=\"search\"\n autoComplete={autoComplete}\n disabled={disabled}\n aria-labelledby={placeholderUid}\n data-tracking-id={trackingId}\n {...rest}\n />\n <Icon\n aria-label=\"cancel\"\n svg={Close}\n role=\"button\"\n onClick={handleClear}\n className={styles[\"clear\"]}\n aria-disabled={disabled}\n style={{\n visibility: hasValue ? \"visible\" : \"hidden\",\n }}\n />\n </div>\n <SrOnly id={placeholderUid}>{placeholder}</SrOnly>\n </div>\n );\n },\n);\n"],"names":["SearchField","textfieldStyles","Search","Close"],"mappings":"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"}
|
package/dist/SearchField.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { S as SearchField } from './SearchField-
|
|
1
|
+
export { S as SearchField } from './SearchField-DLqva3o3.js';
|
|
2
2
|
//# sourceMappingURL=SearchField.js.map
|
|
@@ -2,7 +2,7 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import { createContext, forwardRef, useContext, useRef, useId } from 'react';
|
|
3
3
|
import { c as cx } from './index-tZvMCc77.js';
|
|
4
4
|
import { D as Duration } from './primitive-BByug0kD.js';
|
|
5
|
-
import { I as Icon } from './Icon-
|
|
5
|
+
import { I as Icon } from './Icon-TcJbUdTz.js';
|
|
6
6
|
import { u as useReducedMotion } from './use-reduced-motion-DSpxmqyT.js';
|
|
7
7
|
import { m as motion } from './proxy-BbFHSE6L.js';
|
|
8
8
|
import { useTrackingId } from './useTrackingId.js';
|
|
@@ -162,4 +162,4 @@ const SegmentedControl = Object.assign(SegmentedControlElement, {
|
|
|
162
162
|
});
|
|
163
163
|
|
|
164
164
|
export { SegmentedControl as S, SegmentedControlSegment as a };
|
|
165
|
-
//# sourceMappingURL=SegmentedControl-
|
|
165
|
+
//# sourceMappingURL=SegmentedControl-1OzOQmCp.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl-DVSlMI3w.js","sources":["../src/components/SegmentedControl/internal/SegmentedControlContext.ts","../src/components/SegmentedControl/SegmentedControlSegment.tsx","../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nimport { SegmentedControlSegmentProps } from \"../SegmentedControlSegment\";\nimport { SegmentedControlProps } from \"../SegmentedControl\";\n\n/**\n * Context props for SegmentedControl internal state management\n */\nexport type SegmentedControlContextProps = {\n /**\n * Currently selected segment value\n */\n current?: SegmentedControlSegmentProps[\"value\"];\n /**\n * Function to set the current segment\n */\n setCurrent?: (value: SegmentedControlSegmentProps[\"value\"]) => void;\n /**\n * Change handler for the segmented control\n */\n onChange?: SegmentedControlProps[\"onChange\"];\n /**\n * Name attribute for radio inputs\n */\n name?: string;\n};\n\nexport const SegmentedControlContext =\n createContext<SegmentedControlContextProps>({});\n","import {\n useContext,\n useRef,\n forwardRef,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport cx from \"classnames\";\nimport { core } from \"@servicetitan/hammer-token\";\n\nimport { DataTrackingId } from \"../../types\";\nimport { Icon, IconProps } from \"../Icon\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useMergeRefs, useTrackingId } from \"../../hooks\";\n\nimport { SegmentedControlContext } from \"./internal/SegmentedControlContext\";\n\nimport styles from \"./SegmentedControl.module.scss\";\n\n/**\n * State object returned by segment interactions\n */\nexport type SegmentState = {\n /**\n * Whether the segment is checked\n */\n checked: boolean;\n /**\n * The value of the segment\n */\n value?: SegmentedControlSegmentProps[\"value\"];\n};\n\n/**\n * Props for the SegmentedControlSegment component\n * @extends ComponentPropsWithoutRef<\"label\">\n */\nexport type SegmentedControlSegmentProps = ComponentPropsWithoutRef<\"label\"> & {\n /**\n * Optional icon to display in the segment\n */\n icon?: IconProps[\"svg\"];\n /**\n * Value of the segment\n */\n value: string;\n /**\n * The content to display in the segment\n */\n children?: React.ReactNode;\n} & DataTrackingId;\n\n/**\n * SegmentedControlSegment component for individual segments within a segmented control.\n *\n * Features:\n * - Individual segment with radio input\n * - Optional icon support\n * - Animated selection indicator\n * - Accessibility support with proper ARIA attributes\n * - Context integration with parent SegmentedControl\n * - Motion animations with reduced motion support\n * - Icon-only mode when no children provided\n * - Data tracking id support\n *\n * @example\n * <SegmentedControl.Segment value=\"option1\" icon={Icon1}>\n * Option 1\n * </SegmentedControl.Segment>\n *\n * @example\n * <SegmentedControl.Segment value=\"icon-only\" icon={IconOnly} />\n */\nexport const SegmentedControlSegment = forwardRef<\n HTMLLabelElement,\n SegmentedControlSegmentProps\n>((props, ref) => {\n const { icon, value, children, className, ...rest } = props;\n const shouldReduceMotion = useReducedMotion();\n const { current, setCurrent, name } = useContext(SegmentedControlContext);\n const labelRef = useRef<HTMLSpanElement>(null);\n\n const classNames = cx(styles.segment, className, {\n [styles[\"icon-only\"]]: icon && !children,\n });\n\n const data = {\n value: props.value,\n };\n\n const trackingId = useTrackingId({\n name: \"SegmentedControlSegment\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n\n return (\n <>\n <label\n className={classNames}\n ref={useMergeRefs([labelRef, ref])}\n data-tracking-id={trackingId}\n data-anv=\"segmented-control-segment\"\n {...rest}\n >\n <input\n type=\"radio\"\n name={name}\n value={value}\n onChange={() => setCurrent?.(value)}\n checked={current === value}\n aria-checked={current === value}\n />\n {icon ? <Icon svg={icon} aria-hidden /> : null}\n {children}\n {current === value && (\n <motion.span\n layoutId={name}\n className={styles[\"select-indicator\"]}\n transition={{\n duration: shouldReduceMotion\n ? 0\n : +core.primitive.Duration.value.replace(\"ms\", \"\") / 1000,\n }}\n />\n )}\n </label>\n </>\n );\n});\n\nSegmentedControlSegment.displayName = \"SegmentedControlSegment\";\n","import { forwardRef, useId, ComponentPropsWithoutRef, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { motion } from \"motion/react\";\n\nimport { DataTrackingId, LayoutUtilProps, Size } from \"../../types\";\nimport { useMergeRefs, useTrackingId } from \"../../hooks\";\nimport { useOptionallyControlledState } from \"../../internal/hooks\";\n\nimport { SegmentedControlContext } from \"./internal/SegmentedControlContext\";\nimport {\n SegmentedControlSegment,\n SegmentedControlSegmentProps,\n} from \"./SegmentedControlSegment\";\n\nimport styles from \"./SegmentedControl.module.scss\";\n\n/**\n * Base props for SegmentedControl component\n * @extends Omit<ComponentPropsWithoutRef<\"div\">, \"onAnimationStart\" | \"onDragStart\" | \"onDragEnd\" | \"onDrag\" | \"onChange\">\n * @extends LayoutUtilProps\n */\ntype BaseSegmentedControlProps = Omit<\n ComponentPropsWithoutRef<\"div\">,\n \"onAnimationStart\" | \"onDragStart\" | \"onDragEnd\" | \"onDrag\" | \"onChange\"\n> &\n LayoutUtilProps &\n DataTrackingId & {\n /**\n * Callback when segment is changed\n */\n onChange?: (value: SegmentedControlSegmentProps[\"value\"]) => void;\n\n /**\n * Size of the segment\n * @default \"medium\"\n */\n size?: Extract<Size, \"small\" | \"medium\">;\n\n /**\n * Whether to fill available width\n * @default false\n */\n fill?: boolean;\n\n /**\n * Name attribute for radio inputs\n * @remarks If empty, it will auto generate one using useId()\n */\n name?: string;\n\n /**\n * The segments to render within the segmented control\n */\n children?: React.ReactNode;\n };\n\n/**\n * Props for controlled SegmentedControl\n */\ntype ControlledSegmentedControlProps = BaseSegmentedControlProps & {\n /**\n * Selected segment (controlled mode)\n */\n selected: SegmentedControlSegmentProps[\"value\"];\n defaultSelected?: never;\n};\n\n/**\n * Props for uncontrolled SegmentedControl\n */\ntype UncontrolledSegmentedControlProps = BaseSegmentedControlProps & {\n /**\n * Initial selection (uncontrolled mode)\n */\n defaultSelected: SegmentedControlSegmentProps[\"value\"];\n selected?: never;\n};\n\n/**\n * Props for the SegmentedControl component\n */\nexport type SegmentedControlProps =\n | ControlledSegmentedControlProps\n | UncontrolledSegmentedControlProps;\n\nconst SegmentedControlElement = forwardRef<\n HTMLDivElement,\n SegmentedControlProps\n>((props, ref) => {\n const {\n className,\n onClick,\n onChange,\n children,\n size = \"medium\",\n defaultSelected,\n selected,\n name,\n fill,\n ...rest\n } = props;\n\n const [current, setCurrent] = useOptionallyControlledState({\n controlledValue: selected,\n defaultValue: defaultSelected,\n onChange,\n });\n\n const segmentedControlRef = useRef<HTMLDivElement>(null);\n\n const SegmentedControlClassNames = cx(\n styles[\"segmented-control\"],\n styles[size],\n className,\n {\n [styles.fill]: fill,\n },\n );\n\n const uid = useId();\n\n const data = {\n name: props.name,\n };\n\n const trackingId = useTrackingId({\n name: \"SegmentedControl\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n\n return (\n <motion.div\n transition={{ duration: 0 }}\n layout\n role=\"radiogroup\"\n className={SegmentedControlClassNames}\n data-anv=\"segmented-control\"\n data-tracking-id={trackingId}\n ref={useMergeRefs([segmentedControlRef, ref])}\n {...rest}\n >\n <SegmentedControlContext.Provider\n value={{ current, setCurrent, name: name ?? uid }}\n >\n {children}\n </SegmentedControlContext.Provider>\n </motion.div>\n );\n});\n\nSegmentedControlElement.displayName = \"SegmentedControl\";\n\n/**\n * SegmentedControl component for selecting one option from a group of related choices.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Multiple size variants (small, medium)\n * - Optional fill width mode\n * - Smooth animations with motion\n * - Accessibility support with proper radio group semantics\n * - Layout utility props for positioning and spacing\n * - Context-based state management\n * - Auto-generated or custom name attributes\n * - Segment support via SegmentedControl.Segment\n * - Data tracking id support\n *\n * @example\n * <SegmentedControl\n * selected={selectedValue}\n * onChange={setSelectedValue}\n * size=\"medium\"\n * >\n * <SegmentedControl.Segment value=\"option1\">Option 1</SegmentedControl.Segment>\n * <SegmentedControl.Segment value=\"option2\">Option 2</SegmentedControl.Segment>\n * <SegmentedControl.Segment value=\"option3\">Option 3</SegmentedControl.Segment>\n * </SegmentedControl>\n *\n * @example\n * <SegmentedControl\n * defaultSelected=\"small\"\n * size=\"small\"\n * fill\n * >\n * <SegmentedControl.Segment value=\"small\" icon={SmallIcon}>Small</SegmentedControl.Segment>\n * <SegmentedControl.Segment value=\"large\" icon={LargeIcon}>Large</SegmentedControl.Segment>\n * </SegmentedControl>\n */\nexport const SegmentedControl = Object.assign(SegmentedControlElement, {\n /**\n * SegmentedControlSegment component for individual segments within a segmented control.\n *\n * Features:\n * - Individual segment with radio input\n * - Optional icon support\n * - Animated selection indicator\n * - Accessibility support with proper ARIA attributes\n * - Context integration with parent SegmentedControl\n * - Motion animations with reduced motion support\n *\n * @example\n * <SegmentedControl.Segment value=\"option1\" icon={Icon1}>\n * Option 1\n * </SegmentedControl.Segment>\n */\n Segment: SegmentedControlSegment,\n});\n\nexport default SegmentedControl;\n"],"names":["core.primitive.Duration"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SegmentedControl-1OzOQmCp.js","sources":["../src/components/SegmentedControl/internal/SegmentedControlContext.ts","../src/components/SegmentedControl/SegmentedControlSegment.tsx","../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nimport { SegmentedControlSegmentProps } from \"../SegmentedControlSegment\";\nimport { SegmentedControlProps } from \"../SegmentedControl\";\n\n/**\n * Context props for SegmentedControl internal state management\n */\nexport type SegmentedControlContextProps = {\n /**\n * Currently selected segment value\n */\n current?: SegmentedControlSegmentProps[\"value\"];\n /**\n * Function to set the current segment\n */\n setCurrent?: (value: SegmentedControlSegmentProps[\"value\"]) => void;\n /**\n * Change handler for the segmented control\n */\n onChange?: SegmentedControlProps[\"onChange\"];\n /**\n * Name attribute for radio inputs\n */\n name?: string;\n};\n\nexport const SegmentedControlContext =\n createContext<SegmentedControlContextProps>({});\n","import {\n useContext,\n useRef,\n forwardRef,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport cx from \"classnames\";\nimport { core } from \"@servicetitan/hammer-token\";\n\nimport { DataTrackingId } from \"../../types\";\nimport { Icon, IconProps } from \"../Icon\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useMergeRefs, useTrackingId } from \"../../hooks\";\n\nimport { SegmentedControlContext } from \"./internal/SegmentedControlContext\";\n\nimport styles from \"./SegmentedControl.module.scss\";\n\n/**\n * State object returned by segment interactions\n */\nexport type SegmentState = {\n /**\n * Whether the segment is checked\n */\n checked: boolean;\n /**\n * The value of the segment\n */\n value?: SegmentedControlSegmentProps[\"value\"];\n};\n\n/**\n * Props for the SegmentedControlSegment component\n * @extends ComponentPropsWithoutRef<\"label\">\n */\nexport type SegmentedControlSegmentProps = ComponentPropsWithoutRef<\"label\"> & {\n /**\n * Optional icon to display in the segment\n */\n icon?: IconProps[\"svg\"];\n /**\n * Value of the segment\n */\n value: string;\n /**\n * The content to display in the segment\n */\n children?: React.ReactNode;\n} & DataTrackingId;\n\n/**\n * SegmentedControlSegment component for individual segments within a segmented control.\n *\n * Features:\n * - Individual segment with radio input\n * - Optional icon support\n * - Animated selection indicator\n * - Accessibility support with proper ARIA attributes\n * - Context integration with parent SegmentedControl\n * - Motion animations with reduced motion support\n * - Icon-only mode when no children provided\n * - Data tracking id support\n *\n * @example\n * <SegmentedControl.Segment value=\"option1\" icon={Icon1}>\n * Option 1\n * </SegmentedControl.Segment>\n *\n * @example\n * <SegmentedControl.Segment value=\"icon-only\" icon={IconOnly} />\n */\nexport const SegmentedControlSegment = forwardRef<\n HTMLLabelElement,\n SegmentedControlSegmentProps\n>((props, ref) => {\n const { icon, value, children, className, ...rest } = props;\n const shouldReduceMotion = useReducedMotion();\n const { current, setCurrent, name } = useContext(SegmentedControlContext);\n const labelRef = useRef<HTMLSpanElement>(null);\n\n const classNames = cx(styles.segment, className, {\n [styles[\"icon-only\"]]: icon && !children,\n });\n\n const data = {\n value: props.value,\n };\n\n const trackingId = useTrackingId({\n name: \"SegmentedControlSegment\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n\n return (\n <>\n <label\n className={classNames}\n ref={useMergeRefs([labelRef, ref])}\n data-tracking-id={trackingId}\n data-anv=\"segmented-control-segment\"\n {...rest}\n >\n <input\n type=\"radio\"\n name={name}\n value={value}\n onChange={() => setCurrent?.(value)}\n checked={current === value}\n aria-checked={current === value}\n />\n {icon ? <Icon svg={icon} aria-hidden /> : null}\n {children}\n {current === value && (\n <motion.span\n layoutId={name}\n className={styles[\"select-indicator\"]}\n transition={{\n duration: shouldReduceMotion\n ? 0\n : +core.primitive.Duration.value.replace(\"ms\", \"\") / 1000,\n }}\n />\n )}\n </label>\n </>\n );\n});\n\nSegmentedControlSegment.displayName = \"SegmentedControlSegment\";\n","import { forwardRef, useId, ComponentPropsWithoutRef, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { motion } from \"motion/react\";\n\nimport { DataTrackingId, LayoutUtilProps, Size } from \"../../types\";\nimport { useMergeRefs, useTrackingId } from \"../../hooks\";\nimport { useOptionallyControlledState } from \"../../internal/hooks\";\n\nimport { SegmentedControlContext } from \"./internal/SegmentedControlContext\";\nimport {\n SegmentedControlSegment,\n SegmentedControlSegmentProps,\n} from \"./SegmentedControlSegment\";\n\nimport styles from \"./SegmentedControl.module.scss\";\n\n/**\n * Base props for SegmentedControl component\n * @extends Omit<ComponentPropsWithoutRef<\"div\">, \"onAnimationStart\" | \"onDragStart\" | \"onDragEnd\" | \"onDrag\" | \"onChange\">\n * @extends LayoutUtilProps\n */\ntype BaseSegmentedControlProps = Omit<\n ComponentPropsWithoutRef<\"div\">,\n \"onAnimationStart\" | \"onDragStart\" | \"onDragEnd\" | \"onDrag\" | \"onChange\"\n> &\n LayoutUtilProps &\n DataTrackingId & {\n /**\n * Callback when segment is changed\n */\n onChange?: (value: SegmentedControlSegmentProps[\"value\"]) => void;\n\n /**\n * Size of the segment\n * @default \"medium\"\n */\n size?: Extract<Size, \"small\" | \"medium\">;\n\n /**\n * Whether to fill available width\n * @default false\n */\n fill?: boolean;\n\n /**\n * Name attribute for radio inputs\n * @remarks If empty, it will auto generate one using useId()\n */\n name?: string;\n\n /**\n * The segments to render within the segmented control\n */\n children?: React.ReactNode;\n };\n\n/**\n * Props for controlled SegmentedControl\n */\ntype ControlledSegmentedControlProps = BaseSegmentedControlProps & {\n /**\n * Selected segment (controlled mode)\n */\n selected: SegmentedControlSegmentProps[\"value\"];\n defaultSelected?: never;\n};\n\n/**\n * Props for uncontrolled SegmentedControl\n */\ntype UncontrolledSegmentedControlProps = BaseSegmentedControlProps & {\n /**\n * Initial selection (uncontrolled mode)\n */\n defaultSelected: SegmentedControlSegmentProps[\"value\"];\n selected?: never;\n};\n\n/**\n * Props for the SegmentedControl component\n */\nexport type SegmentedControlProps =\n | ControlledSegmentedControlProps\n | UncontrolledSegmentedControlProps;\n\nconst SegmentedControlElement = forwardRef<\n HTMLDivElement,\n SegmentedControlProps\n>((props, ref) => {\n const {\n className,\n onClick,\n onChange,\n children,\n size = \"medium\",\n defaultSelected,\n selected,\n name,\n fill,\n ...rest\n } = props;\n\n const [current, setCurrent] = useOptionallyControlledState({\n controlledValue: selected,\n defaultValue: defaultSelected,\n onChange,\n });\n\n const segmentedControlRef = useRef<HTMLDivElement>(null);\n\n const SegmentedControlClassNames = cx(\n styles[\"segmented-control\"],\n styles[size],\n className,\n {\n [styles.fill]: fill,\n },\n );\n\n const uid = useId();\n\n const data = {\n name: props.name,\n };\n\n const trackingId = useTrackingId({\n name: \"SegmentedControl\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n\n return (\n <motion.div\n transition={{ duration: 0 }}\n layout\n role=\"radiogroup\"\n className={SegmentedControlClassNames}\n data-anv=\"segmented-control\"\n data-tracking-id={trackingId}\n ref={useMergeRefs([segmentedControlRef, ref])}\n {...rest}\n >\n <SegmentedControlContext.Provider\n value={{ current, setCurrent, name: name ?? uid }}\n >\n {children}\n </SegmentedControlContext.Provider>\n </motion.div>\n );\n});\n\nSegmentedControlElement.displayName = \"SegmentedControl\";\n\n/**\n * SegmentedControl component for selecting one option from a group of related choices.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Multiple size variants (small, medium)\n * - Optional fill width mode\n * - Smooth animations with motion\n * - Accessibility support with proper radio group semantics\n * - Layout utility props for positioning and spacing\n * - Context-based state management\n * - Auto-generated or custom name attributes\n * - Segment support via SegmentedControl.Segment\n * - Data tracking id support\n *\n * @example\n * <SegmentedControl\n * selected={selectedValue}\n * onChange={setSelectedValue}\n * size=\"medium\"\n * >\n * <SegmentedControl.Segment value=\"option1\">Option 1</SegmentedControl.Segment>\n * <SegmentedControl.Segment value=\"option2\">Option 2</SegmentedControl.Segment>\n * <SegmentedControl.Segment value=\"option3\">Option 3</SegmentedControl.Segment>\n * </SegmentedControl>\n *\n * @example\n * <SegmentedControl\n * defaultSelected=\"small\"\n * size=\"small\"\n * fill\n * >\n * <SegmentedControl.Segment value=\"small\" icon={SmallIcon}>Small</SegmentedControl.Segment>\n * <SegmentedControl.Segment value=\"large\" icon={LargeIcon}>Large</SegmentedControl.Segment>\n * </SegmentedControl>\n */\nexport const SegmentedControl = Object.assign(SegmentedControlElement, {\n /**\n * SegmentedControlSegment component for individual segments within a segmented control.\n *\n * Features:\n * - Individual segment with radio input\n * - Optional icon support\n * - Animated selection indicator\n * - Accessibility support with proper ARIA attributes\n * - Context integration with parent SegmentedControl\n * - Motion animations with reduced motion support\n *\n * @example\n * <SegmentedControl.Segment value=\"option1\" icon={Icon1}>\n * Option 1\n * </SegmentedControl.Segment>\n */\n Segment: SegmentedControlSegment,\n});\n\nexport default SegmentedControl;\n"],"names":["core.primitive.Duration"],"mappings":";;;;;;;;;;;AA2BO,MAAM,uBAAA,GACX,aAAA,CAA4C,EAAE,CAAA;;;;;;;;;;;;;;;;;;;;AC4CzC,MAAM,uBAAA,GAA0B,UAAA,CAGrC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,IAAA,EAAM,KAAA,EAAO,UAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACtD,EAAA,MAAM,qBAAqB,gBAAA,EAAiB;AAC5C,EAAA,MAAM,EAAE,OAAA,EAAS,UAAA,EAAY,IAAA,EAAK,GAAI,WAAW,uBAAuB,CAAA;AACxE,EAAA,MAAM,QAAA,GAAW,OAAwB,IAAI,CAAA;AAE7C,EAAA,MAAM,UAAA,GAAa,EAAA,CAAG,MAAA,CAAO,OAAA,EAAS,SAAA,EAAW;AAAA,IAC/C,CAAC,MAAA,CAAO,WAAW,CAAC,GAAG,QAAQ,CAAC;AAAA,GACjC,CAAA;AAED,EAAA,MAAM,IAAA,GAAO;AAAA,IACX,OAAO,KAAA,CAAM;AAAA,GACf;AAEA,EAAA,MAAM,aAAa,aAAA,CAAc;AAAA,IAC/B,IAAA,EAAM,yBAAA;AAAA,IACN,IAAA;AAAA,IACA,WAAA,EAAa,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,GACxC,CAAA;AAED,EAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACE,QAAA,kBAAA,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,UAAA;AAAA,MACX,GAAA,EAAK,YAAA,CAAa,CAAC,QAAA,EAAU,GAAG,CAAC,CAAA;AAAA,MACjC,kBAAA,EAAkB,UAAA;AAAA,MAClB,UAAA,EAAS,2BAAA;AAAA,MACR,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,OAAA;AAAA,YACL,IAAA;AAAA,YACA,KAAA;AAAA,YACA,QAAA,EAAU,MAAM,UAAA,GAAa,KAAK,CAAA;AAAA,YAClC,SAAS,OAAA,KAAY,KAAA;AAAA,YACrB,gBAAc,OAAA,KAAY;AAAA;AAAA,SAC5B;AAAA,QACC,uBAAO,GAAA,CAAC,IAAA,EAAA,EAAK,KAAK,IAAA,EAAM,aAAA,EAAW,MAAC,CAAA,GAAK,IAAA;AAAA,QACzC,QAAA;AAAA,QACA,YAAY,KAAA,oBACX,GAAA;AAAA,UAAC,MAAA,CAAO,IAAA;AAAA,UAAP;AAAA,YACC,QAAA,EAAU,IAAA;AAAA,YACV,SAAA,EAAW,OAAO,kBAAkB,CAAA;AAAA,YACpC,UAAA,EAAY;AAAA,cACV,QAAA,EAAU,kBAAA,GACN,CAAA,GACA,CAACA,QAAe,CAAS,KAAA,CAAM,OAAA,CAAQ,IAAA,EAAM,EAAE,CAAA,GAAI;AAAA;AACzD;AAAA;AACF;AAAA;AAAA,GAEJ,EACF,CAAA;AAEJ,CAAC;AAED,uBAAA,CAAwB,WAAA,GAAc,yBAAA;;AC7CtC,MAAM,uBAAA,GAA0B,UAAA,CAG9B,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,eAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,4BAAA,CAA6B;AAAA,IACzD,eAAA,EAAiB,QAAA;AAAA,IACjB,YAAA,EAAc,eAAA;AAAA,IACd;AAAA,GACD,CAAA;AAED,EAAA,MAAM,mBAAA,GAAsB,OAAuB,IAAI,CAAA;AAEvD,EAAA,MAAM,0BAAA,GAA6B,EAAA;AAAA,IACjC,OAAO,mBAAmB,CAAA;AAAA,IAC1B,OAAO,IAAI,CAAA;AAAA,IACX,SAAA;AAAA,IACA;AAAA,MACE,CAAC,MAAA,CAAO,IAAI,GAAG;AAAA;AACjB,GACF;AAEA,EAAA,MAAM,MAAM,KAAA,EAAM;AAElB,EAAA,MAAM,IAAA,GAAO;AAAA,IACX,MAAM,KAAA,CAAM;AAAA,GACd;AAEA,EAAA,MAAM,aAAa,aAAA,CAAc;AAAA,IAC/B,IAAA,EAAM,kBAAA;AAAA,IACN,IAAA;AAAA,IACA,WAAA,EAAa,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,GACxC,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,UAAA,EAAY,EAAE,QAAA,EAAU,CAAA,EAAE;AAAA,MAC1B,MAAA,EAAM,IAAA;AAAA,MACN,IAAA,EAAK,YAAA;AAAA,MACL,SAAA,EAAW,0BAAA;AAAA,MACX,UAAA,EAAS,mBAAA;AAAA,MACT,kBAAA,EAAkB,UAAA;AAAA,MAClB,GAAA,EAAK,YAAA,CAAa,CAAC,mBAAA,EAAqB,GAAG,CAAC,CAAA;AAAA,MAC3C,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,uBAAA,CAAwB,QAAA;AAAA,QAAxB;AAAA,UACC,OAAO,EAAE,OAAA,EAAS,UAAA,EAAY,IAAA,EAAM,QAAQ,GAAA,EAAI;AAAA,UAE/C;AAAA;AAAA;AACH;AAAA,GACF;AAEJ,CAAC,CAAA;AAED,uBAAA,CAAwB,WAAA,GAAc,kBAAA;AAsC/B,MAAM,gBAAA,GAAmB,MAAA,CAAO,MAAA,CAAO,uBAAA,EAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBrE,OAAA,EAAS;AACX,CAAC;;;;"}
|
package/dist/SegmentedControl.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { S as SegmentedControl, a as SegmentedControlSegment, S as default } from './SegmentedControl-
|
|
1
|
+
export { S as SegmentedControl, a as SegmentedControlSegment, S as default } from './SegmentedControl-1OzOQmCp.js';
|
|
2
2
|
//# sourceMappingURL=SegmentedControl.js.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { useContext, createContext, useState, useId, forwardRef, useLayoutEffect } from 'react';
|
|
3
3
|
import { c as cx } from './index-tZvMCc77.js';
|
|
4
|
-
import { C as CheckboxGroup, a as Checkbox } from './Checkbox-
|
|
5
|
-
import { R as RadioGroup, a as Radio } from './RadioGroup-
|
|
6
|
-
import { C as Card } from './Card-
|
|
4
|
+
import { C as CheckboxGroup, a as Checkbox } from './Checkbox-Bsa1FgoI.js';
|
|
5
|
+
import { R as RadioGroup, a as Radio } from './RadioGroup-BVGnsTuG.js';
|
|
6
|
+
import { C as Card } from './Card-Cyoz-LaD.js';
|
|
7
7
|
import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
|
|
8
8
|
|
|
9
9
|
import './SelectCard.css';const SelectCardContext = createContext(null);
|
|
@@ -222,4 +222,4 @@ const SelectCard = Object.assign(SelectCardElement, {
|
|
|
222
222
|
});
|
|
223
223
|
|
|
224
224
|
export { SelectCard as S, SelectCardElement as a, SelectCardGroup as b };
|
|
225
|
-
//# sourceMappingURL=SelectCard-
|
|
225
|
+
//# sourceMappingURL=SelectCard-Dw7zW0UN.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectCard-Db-CNnMe.js","sources":["../src/components/SelectCard/internal/SelectCardContext.tsx","../src/components/SelectCard/internal/SelectCardProvider.tsx","../src/components/SelectCard/SelectCardGroup.tsx","../src/components/SelectCard/SelectCard.tsx"],"sourcesContent":["import { ChangeEvent, createContext, useContext } from \"react\";\n\n/**\n * Interface for the select card state\n */\nexport interface ISelectCardState {\n /**\n * When `true`, adds the item to the selected state holder.\n */\n checked: boolean;\n\n /**\n * Gives an explicit id to each item in the set.\n */\n id?: string | number;\n}\n\n/**\n * Interface for the select card onChange options\n */\nexport interface ISelectCardOnChangeOptions {\n /**\n * When `true`, doesn't fire the user's `onChange`\n */\n internal?: boolean;\n}\n\n/**\n * Interface for the select card context\n */\nexport interface ISelectCardContext {\n /**\n * Callback function that is triggered when the selection state changes.\n *\n * @callback OnChangeCallback\n * @param {ChangeEvent<HTMLInputElement>} [e] - The native HTML input change event.\n * @param {ISelectCardState} [state] - The current state of the select card component after the change.\n * @returns {void}\n */\n onChange: (\n e?: ChangeEvent<HTMLInputElement>,\n state?: ISelectCardState,\n options?: ISelectCardOnChangeOptions,\n ) => void;\n\n /**\n * Sets how many cards the user can select, either 'single' (radio buttons) or 'multiple' (checkboxes)\n */\n selectionMode: \"single\" | \"multiple\";\n\n /**\n * Used internally to create a UUID for the HTML `name` property on radios.\n */\n radioName: string;\n\n /**\n * Creates a set of ids that are selected.\n */\n selection: Set<string | number>;\n}\n\nexport const SelectCardContext = createContext<ISelectCardContext | null>(null);\n\n/**\n * Custom hook for accessing the SelectCard context.\n * @returns The SelectCard context or null if not within a SelectCardProvider\n */\nexport const useSelectCardContext = () => useContext(SelectCardContext);\n","import { ChangeEvent, ReactNode, useId, useState } from \"react\";\nimport {\n ISelectCardContext,\n ISelectCardOnChangeOptions,\n ISelectCardState,\n SelectCardContext,\n} from \"./SelectCardContext\";\n\n/**\n * Props for the SelectCardProvider component\n * @extends Omit<ISelectCardContext, \"radioName\" | \"selection\">\n */\ninterface ISelectCardProviderProps\n extends Omit<ISelectCardContext, \"radioName\" | \"selection\"> {\n children: ReactNode;\n}\n\n/**\n * SelectCardProvider component for managing selection state across SelectCard components.\n *\n * Features:\n * - Provides context for SelectCard components to share selection state\n * - Manages selection mode (single vs multiple)\n * - Handles selection state updates and callbacks\n * - Generates unique radio button names for single selection mode\n * - Maintains a set of selected card IDs\n * - Integrates with SelectCardGroup for automatic context provision\n *\n * @example\n * <SelectCardProvider\n * selectionMode=\"multiple\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n * <SelectCard id=\"1\" onChange={() => {}}>Option 1</SelectCard>\n * <SelectCard id=\"2\" onChange={() => {}}>Option 2</SelectCard>\n * </SelectCardProvider>\n */\nexport const SelectCardProvider = ({\n children,\n onChange,\n selectionMode,\n}: ISelectCardProviderProps) => {\n const [selection, setSelection] = useState<Set<string | number>>(new Set());\n\n const radioName = useId();\n\n const handleChange = (\n e?: ChangeEvent<HTMLInputElement>,\n state?: ISelectCardState,\n options?: ISelectCardOnChangeOptions,\n ) => {\n if (!state || !state.id) {\n if (!options?.internal) {\n onChange(e, state);\n }\n\n return;\n }\n\n // Set internal selection\n if (selectionMode === \"single\") {\n if (state.checked) {\n setSelection(new Set([state.id]));\n } else {\n setSelection(new Set());\n }\n } else {\n if (state.checked) {\n setSelection(selection.add(state.id));\n } else {\n selection.delete(state.id);\n setSelection(selection);\n }\n }\n\n if (!options?.internal) {\n onChange(e, state);\n }\n };\n\n const context = {\n selectionMode,\n onChange: handleChange,\n radioName,\n selection,\n };\n\n return (\n <SelectCardContext.Provider value={context}>\n {children}\n </SelectCardContext.Provider>\n );\n};\n","import { forwardRef, ReactNode } from \"react\";\nimport { CheckboxGroup, CheckboxGroupProps } from \"../Checkbox/CheckboxGroup\";\nimport { RadioGroup } from \"../Radio\";\nimport { SelectCardProvider } from \"./internal/SelectCardProvider\";\nimport { ISelectCardContext } from \"./internal/SelectCardContext\";\n\n/**\n * Props for the SelectCardGroup component\n * @extends Omit<ISelectCardContext, \"radioName\" | \"selection\">\n */\nexport interface SelectCardGroupProps\n extends Omit<ISelectCardContext, \"radioName\" | \"selection\"> {\n /**\n * Associates the legend with content below.\n */\n ariaLabelledBy?: string;\n\n children?: ReactNode;\n\n /**\n * Sets the legend on the group.\n */\n legend: CheckboxGroupProps[\"legend\"];\n\n /**\n * When `true`, sets \"required\" text in label.\n * @accessibility This does not enforce error when nothing is selected.\n * @default false\n */\n required?: boolean;\n}\n\n/**\n * SelectCardGroup component for managing groups of selectable cards.\n *\n * Features:\n * - Manages selection state for multiple SelectCard components\n * - Supports both single and multiple selection modes\n * - Provides proper accessibility with legends and ARIA labels\n * - Handles required field validation\n * - Automatic radio button grouping for single selection\n * - Context provider for child SelectCard components\n * - Integrates with CheckboxGroup and RadioGroup for proper form semantics\n *\n * @example\n * <SelectCardGroup\n * legend=\"Choose your plan\"\n * selectionMode=\"single\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n * <SelectCard id=\"basic\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\" el=\"h3\">Basic Plan</Text>\n * </SelectCard>\n * <SelectCard id=\"premium\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\" el=\"h3\">Premium Plan</Text>\n * </SelectCard>\n * </SelectCardGroup>\n */\nexport const SelectCardGroup = forwardRef<\n HTMLInputElement,\n SelectCardGroupProps\n>((props, _ref) => {\n const {\n ariaLabelledBy,\n children,\n legend,\n onChange,\n required = false,\n selectionMode,\n ...rest\n } = props;\n\n return (\n <SelectCardProvider onChange={onChange} selectionMode={selectionMode}>\n {selectionMode === \"multiple\" && (\n <CheckboxGroup\n aria-labelledby={ariaLabelledBy}\n legend={legend}\n required={required}\n {...rest}\n >\n {children}\n </CheckboxGroup>\n )}\n {selectionMode === \"single\" && (\n <RadioGroup\n aria-labelledby={ariaLabelledBy}\n legend={legend}\n required={required}\n {...rest}\n >\n {children}\n </RadioGroup>\n )}\n </SelectCardProvider>\n );\n});\n\nSelectCardGroup.displayName = \"SelectCardGroup\";\n","import { useLayoutEffect, useState, forwardRef, type ChangeEvent } from \"react\";\nimport cx from \"classnames\";\n\nimport { SelectCardGroup } from \"./SelectCardGroup\";\nimport { Card, CardProps } from \"../Card\";\nimport { Radio, RadioProps } from \"../Radio/internal/Radio\";\nimport { Checkbox, CheckboxProps } from \"../Checkbox/internal/Checkbox\";\nimport { useOptionallyControlledState } from \"../../internal/hooks\";\n\nimport styles from \"./SelectCard.module.scss\";\nimport { useSelectCardContext } from \"./internal/SelectCardContext\";\n\n/**\n * Props for the SelectCard component\n * @extends Omit<CardProps, \"onChange\" | \"id\">\n */\nexport interface SelectCardProps extends Omit<CardProps, \"onChange\" | \"id\"> {\n /**\n * Passes props to the underlying `<Checkbox />` component.\n */\n checkboxProps?: Omit<CheckboxProps, \"label\">;\n\n /**\n * Controlled state. When provided, the component becomes controlled.\n */\n checked?: boolean;\n\n /**\n * Uncontrolled state.\n */\n defaultChecked?: boolean;\n\n /**\n * When `true`, disables the card.\n */\n disabled?: boolean;\n\n /**\n * When `true`, sets error styling on the card.\n */\n errored?: boolean;\n\n /**\n * A unique identifier for the card, used to track the selection state.\n */\n id: string | number;\n\n /**\n * Function called on selection state change.\n */\n onChange: (value: boolean) => void;\n\n /**\n * Passes props to the underlying `<Radio />` component.\n */\n radioProps?: Omit<RadioProps, \"label\">;\n\n /**\n * Removes the drop shadow effect on the card.\n */\n removeDropShadow?: boolean;\n}\n\nexport const SelectCardElement = forwardRef<HTMLInputElement, SelectCardProps>(\n (props, ref) => {\n const {\n checkboxProps,\n children,\n checked: checkedProp,\n className,\n defaultChecked: defaultCheckedProp,\n disabled,\n errored,\n radioProps,\n onChange,\n removeDropShadow,\n id,\n ...rest\n } = props;\n\n const [checked, setChecked] = useOptionallyControlledState<boolean>({\n controlledValue: checkedProp,\n defaultValue: defaultCheckedProp || false,\n onChange,\n });\n\n const context = useSelectCardContext();\n\n // we need to re-render after setting the initial selection state on context\n const [_, setForceRenderCount] = useState(0);\n useLayoutEffect(() => {\n if (defaultCheckedProp) {\n context?.onChange(\n undefined,\n {\n id,\n checked: defaultCheckedProp,\n },\n { internal: true },\n );\n\n setForceRenderCount((prev) => prev + 1);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleChange = (event?: ChangeEvent<HTMLInputElement>) => {\n const newChecked = event ? event.target.checked : false;\n setChecked(newChecked);\n context?.onChange(event, {\n id,\n checked: newChecked,\n });\n };\n\n // A selection in the group context supersedes the normal checked state of the card\n const isChecked = context ? context.selection.has(id) : checked;\n\n return (\n <>\n {(!context || context?.selectionMode === \"multiple\") && (\n <Checkbox\n {...checkboxProps}\n defaultChecked={defaultCheckedProp}\n onChange={handleChange}\n disabled={disabled}\n ref={ref}\n label={\n <Card\n {...rest}\n className={cx(styles[\"select-card\"], className, {\n [styles[\"select-card--remove-drop-shadow\"]]: removeDropShadow,\n [styles[\"select-card--selected\"]]: isChecked && !errored,\n [styles[\"select-card--errored\"]]: errored,\n [styles[\"select-card--disabled\"]]: disabled,\n })}\n >\n {children}\n </Card>\n }\n hideCheckbox\n />\n )}\n {context?.selectionMode === \"single\" && (\n <Radio\n {...radioProps}\n defaultChecked={defaultCheckedProp}\n onChange={handleChange}\n disabled={disabled}\n ref={ref}\n name={context.radioName}\n label={\n <Card\n {...rest}\n className={cx(styles[\"select-card\"], className, {\n [styles[\"select-card--remove-drop-shadow\"]]: removeDropShadow,\n [styles[\"select-card--selected\"]]: isChecked && !errored,\n [styles[\"select-card--errored\"]]: errored,\n [styles[\"select-card--disabled\"]]: disabled,\n })}\n >\n {children}\n </Card>\n }\n hideRadio\n />\n )}\n </>\n );\n },\n);\n\nSelectCardElement.displayName = \"SelectCard\";\n\n/**\n * SelectCard component for creating interactive card-based selection interfaces.\n *\n * Features:\n * - Supports both single selection (radio) and multiple selection (checkbox) modes\n * - Automatic context detection for selection behavior\n * - Visual feedback for selected, disabled, and error states\n * - Accessible with proper ARIA roles and keyboard navigation\n * - Customizable styling through Card component props\n * - Hover and focus states with smooth transitions\n * - Integration with SelectCardGroup for grouped selection\n *\n * @example\n * <SelectCard\n * id=\"option-1\"\n * onChange={(checked) => console.log('Selected:', checked)}\n * >\n * <Text variant=\"headline\" size=\"small\">Option 1</Text>\n * <Text>Description of option 1</Text>\n * </SelectCard>\n */\nexport const SelectCard = Object.assign(SelectCardElement, {\n /**\n * SelectCardGroup component for managing groups of selectable cards.\n *\n * Features:\n * - Manages selection state for multiple SelectCard components\n * - Supports both single and multiple selection modes\n * - Provides proper accessibility with legends and ARIA labels\n * - Handles required field validation\n * - Automatic radio button grouping for single selection\n * - Context provider for child SelectCard components\n *\n * @example\n * <SelectCard.Group\n * legend=\"Choose your plan\"\n * selectionMode=\"single\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n * <SelectCard id=\"basic\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\">Basic Plan</Text>\n * </SelectCard>\n * <SelectCard id=\"premium\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\">Premium Plan</Text>\n * </SelectCard>\n * </SelectCard.Group>\n */\n Group: SelectCardGroup,\n});\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelectCard-Dw7zW0UN.js","sources":["../src/components/SelectCard/internal/SelectCardContext.tsx","../src/components/SelectCard/internal/SelectCardProvider.tsx","../src/components/SelectCard/SelectCardGroup.tsx","../src/components/SelectCard/SelectCard.tsx"],"sourcesContent":["import { ChangeEvent, createContext, useContext } from \"react\";\n\n/**\n * Interface for the select card state\n */\nexport interface ISelectCardState {\n /**\n * When `true`, adds the item to the selected state holder.\n */\n checked: boolean;\n\n /**\n * Gives an explicit id to each item in the set.\n */\n id?: string | number;\n}\n\n/**\n * Interface for the select card onChange options\n */\nexport interface ISelectCardOnChangeOptions {\n /**\n * When `true`, doesn't fire the user's `onChange`\n */\n internal?: boolean;\n}\n\n/**\n * Interface for the select card context\n */\nexport interface ISelectCardContext {\n /**\n * Callback function that is triggered when the selection state changes.\n *\n * @callback OnChangeCallback\n * @param {ChangeEvent<HTMLInputElement>} [e] - The native HTML input change event.\n * @param {ISelectCardState} [state] - The current state of the select card component after the change.\n * @returns {void}\n */\n onChange: (\n e?: ChangeEvent<HTMLInputElement>,\n state?: ISelectCardState,\n options?: ISelectCardOnChangeOptions,\n ) => void;\n\n /**\n * Sets how many cards the user can select, either 'single' (radio buttons) or 'multiple' (checkboxes)\n */\n selectionMode: \"single\" | \"multiple\";\n\n /**\n * Used internally to create a UUID for the HTML `name` property on radios.\n */\n radioName: string;\n\n /**\n * Creates a set of ids that are selected.\n */\n selection: Set<string | number>;\n}\n\nexport const SelectCardContext = createContext<ISelectCardContext | null>(null);\n\n/**\n * Custom hook for accessing the SelectCard context.\n * @returns The SelectCard context or null if not within a SelectCardProvider\n */\nexport const useSelectCardContext = () => useContext(SelectCardContext);\n","import { ChangeEvent, ReactNode, useId, useState } from \"react\";\nimport {\n ISelectCardContext,\n ISelectCardOnChangeOptions,\n ISelectCardState,\n SelectCardContext,\n} from \"./SelectCardContext\";\n\n/**\n * Props for the SelectCardProvider component\n * @extends Omit<ISelectCardContext, \"radioName\" | \"selection\">\n */\ninterface ISelectCardProviderProps\n extends Omit<ISelectCardContext, \"radioName\" | \"selection\"> {\n children: ReactNode;\n}\n\n/**\n * SelectCardProvider component for managing selection state across SelectCard components.\n *\n * Features:\n * - Provides context for SelectCard components to share selection state\n * - Manages selection mode (single vs multiple)\n * - Handles selection state updates and callbacks\n * - Generates unique radio button names for single selection mode\n * - Maintains a set of selected card IDs\n * - Integrates with SelectCardGroup for automatic context provision\n *\n * @example\n * <SelectCardProvider\n * selectionMode=\"multiple\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n * <SelectCard id=\"1\" onChange={() => {}}>Option 1</SelectCard>\n * <SelectCard id=\"2\" onChange={() => {}}>Option 2</SelectCard>\n * </SelectCardProvider>\n */\nexport const SelectCardProvider = ({\n children,\n onChange,\n selectionMode,\n}: ISelectCardProviderProps) => {\n const [selection, setSelection] = useState<Set<string | number>>(new Set());\n\n const radioName = useId();\n\n const handleChange = (\n e?: ChangeEvent<HTMLInputElement>,\n state?: ISelectCardState,\n options?: ISelectCardOnChangeOptions,\n ) => {\n if (!state || !state.id) {\n if (!options?.internal) {\n onChange(e, state);\n }\n\n return;\n }\n\n // Set internal selection\n if (selectionMode === \"single\") {\n if (state.checked) {\n setSelection(new Set([state.id]));\n } else {\n setSelection(new Set());\n }\n } else {\n if (state.checked) {\n setSelection(selection.add(state.id));\n } else {\n selection.delete(state.id);\n setSelection(selection);\n }\n }\n\n if (!options?.internal) {\n onChange(e, state);\n }\n };\n\n const context = {\n selectionMode,\n onChange: handleChange,\n radioName,\n selection,\n };\n\n return (\n <SelectCardContext.Provider value={context}>\n {children}\n </SelectCardContext.Provider>\n );\n};\n","import { forwardRef, ReactNode } from \"react\";\nimport { CheckboxGroup, CheckboxGroupProps } from \"../Checkbox/CheckboxGroup\";\nimport { RadioGroup } from \"../Radio\";\nimport { SelectCardProvider } from \"./internal/SelectCardProvider\";\nimport { ISelectCardContext } from \"./internal/SelectCardContext\";\n\n/**\n * Props for the SelectCardGroup component\n * @extends Omit<ISelectCardContext, \"radioName\" | \"selection\">\n */\nexport interface SelectCardGroupProps\n extends Omit<ISelectCardContext, \"radioName\" | \"selection\"> {\n /**\n * Associates the legend with content below.\n */\n ariaLabelledBy?: string;\n\n children?: ReactNode;\n\n /**\n * Sets the legend on the group.\n */\n legend: CheckboxGroupProps[\"legend\"];\n\n /**\n * When `true`, sets \"required\" text in label.\n * @accessibility This does not enforce error when nothing is selected.\n * @default false\n */\n required?: boolean;\n}\n\n/**\n * SelectCardGroup component for managing groups of selectable cards.\n *\n * Features:\n * - Manages selection state for multiple SelectCard components\n * - Supports both single and multiple selection modes\n * - Provides proper accessibility with legends and ARIA labels\n * - Handles required field validation\n * - Automatic radio button grouping for single selection\n * - Context provider for child SelectCard components\n * - Integrates with CheckboxGroup and RadioGroup for proper form semantics\n *\n * @example\n * <SelectCardGroup\n * legend=\"Choose your plan\"\n * selectionMode=\"single\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n * <SelectCard id=\"basic\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\" el=\"h3\">Basic Plan</Text>\n * </SelectCard>\n * <SelectCard id=\"premium\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\" el=\"h3\">Premium Plan</Text>\n * </SelectCard>\n * </SelectCardGroup>\n */\nexport const SelectCardGroup = forwardRef<\n HTMLInputElement,\n SelectCardGroupProps\n>((props, _ref) => {\n const {\n ariaLabelledBy,\n children,\n legend,\n onChange,\n required = false,\n selectionMode,\n ...rest\n } = props;\n\n return (\n <SelectCardProvider onChange={onChange} selectionMode={selectionMode}>\n {selectionMode === \"multiple\" && (\n <CheckboxGroup\n aria-labelledby={ariaLabelledBy}\n legend={legend}\n required={required}\n {...rest}\n >\n {children}\n </CheckboxGroup>\n )}\n {selectionMode === \"single\" && (\n <RadioGroup\n aria-labelledby={ariaLabelledBy}\n legend={legend}\n required={required}\n {...rest}\n >\n {children}\n </RadioGroup>\n )}\n </SelectCardProvider>\n );\n});\n\nSelectCardGroup.displayName = \"SelectCardGroup\";\n","import { useLayoutEffect, useState, forwardRef, type ChangeEvent } from \"react\";\nimport cx from \"classnames\";\n\nimport { SelectCardGroup } from \"./SelectCardGroup\";\nimport { Card, CardProps } from \"../Card\";\nimport { Radio, RadioProps } from \"../Radio/internal/Radio\";\nimport { Checkbox, CheckboxProps } from \"../Checkbox/internal/Checkbox\";\nimport { useOptionallyControlledState } from \"../../internal/hooks\";\n\nimport styles from \"./SelectCard.module.scss\";\nimport { useSelectCardContext } from \"./internal/SelectCardContext\";\n\n/**\n * Props for the SelectCard component\n * @extends Omit<CardProps, \"onChange\" | \"id\">\n */\nexport interface SelectCardProps extends Omit<CardProps, \"onChange\" | \"id\"> {\n /**\n * Passes props to the underlying `<Checkbox />` component.\n */\n checkboxProps?: Omit<CheckboxProps, \"label\">;\n\n /**\n * Controlled state. When provided, the component becomes controlled.\n */\n checked?: boolean;\n\n /**\n * Uncontrolled state.\n */\n defaultChecked?: boolean;\n\n /**\n * When `true`, disables the card.\n */\n disabled?: boolean;\n\n /**\n * When `true`, sets error styling on the card.\n */\n errored?: boolean;\n\n /**\n * A unique identifier for the card, used to track the selection state.\n */\n id: string | number;\n\n /**\n * Function called on selection state change.\n */\n onChange: (value: boolean) => void;\n\n /**\n * Passes props to the underlying `<Radio />` component.\n */\n radioProps?: Omit<RadioProps, \"label\">;\n\n /**\n * Removes the drop shadow effect on the card.\n */\n removeDropShadow?: boolean;\n}\n\nexport const SelectCardElement = forwardRef<HTMLInputElement, SelectCardProps>(\n (props, ref) => {\n const {\n checkboxProps,\n children,\n checked: checkedProp,\n className,\n defaultChecked: defaultCheckedProp,\n disabled,\n errored,\n radioProps,\n onChange,\n removeDropShadow,\n id,\n ...rest\n } = props;\n\n const [checked, setChecked] = useOptionallyControlledState<boolean>({\n controlledValue: checkedProp,\n defaultValue: defaultCheckedProp || false,\n onChange,\n });\n\n const context = useSelectCardContext();\n\n // we need to re-render after setting the initial selection state on context\n const [_, setForceRenderCount] = useState(0);\n useLayoutEffect(() => {\n if (defaultCheckedProp) {\n context?.onChange(\n undefined,\n {\n id,\n checked: defaultCheckedProp,\n },\n { internal: true },\n );\n\n setForceRenderCount((prev) => prev + 1);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleChange = (event?: ChangeEvent<HTMLInputElement>) => {\n const newChecked = event ? event.target.checked : false;\n setChecked(newChecked);\n context?.onChange(event, {\n id,\n checked: newChecked,\n });\n };\n\n // A selection in the group context supersedes the normal checked state of the card\n const isChecked = context ? context.selection.has(id) : checked;\n\n return (\n <>\n {(!context || context?.selectionMode === \"multiple\") && (\n <Checkbox\n {...checkboxProps}\n defaultChecked={defaultCheckedProp}\n onChange={handleChange}\n disabled={disabled}\n ref={ref}\n label={\n <Card\n {...rest}\n className={cx(styles[\"select-card\"], className, {\n [styles[\"select-card--remove-drop-shadow\"]]: removeDropShadow,\n [styles[\"select-card--selected\"]]: isChecked && !errored,\n [styles[\"select-card--errored\"]]: errored,\n [styles[\"select-card--disabled\"]]: disabled,\n })}\n >\n {children}\n </Card>\n }\n hideCheckbox\n />\n )}\n {context?.selectionMode === \"single\" && (\n <Radio\n {...radioProps}\n defaultChecked={defaultCheckedProp}\n onChange={handleChange}\n disabled={disabled}\n ref={ref}\n name={context.radioName}\n label={\n <Card\n {...rest}\n className={cx(styles[\"select-card\"], className, {\n [styles[\"select-card--remove-drop-shadow\"]]: removeDropShadow,\n [styles[\"select-card--selected\"]]: isChecked && !errored,\n [styles[\"select-card--errored\"]]: errored,\n [styles[\"select-card--disabled\"]]: disabled,\n })}\n >\n {children}\n </Card>\n }\n hideRadio\n />\n )}\n </>\n );\n },\n);\n\nSelectCardElement.displayName = \"SelectCard\";\n\n/**\n * SelectCard component for creating interactive card-based selection interfaces.\n *\n * Features:\n * - Supports both single selection (radio) and multiple selection (checkbox) modes\n * - Automatic context detection for selection behavior\n * - Visual feedback for selected, disabled, and error states\n * - Accessible with proper ARIA roles and keyboard navigation\n * - Customizable styling through Card component props\n * - Hover and focus states with smooth transitions\n * - Integration with SelectCardGroup for grouped selection\n *\n * @example\n * <SelectCard\n * id=\"option-1\"\n * onChange={(checked) => console.log('Selected:', checked)}\n * >\n * <Text variant=\"headline\" size=\"small\">Option 1</Text>\n * <Text>Description of option 1</Text>\n * </SelectCard>\n */\nexport const SelectCard = Object.assign(SelectCardElement, {\n /**\n * SelectCardGroup component for managing groups of selectable cards.\n *\n * Features:\n * - Manages selection state for multiple SelectCard components\n * - Supports both single and multiple selection modes\n * - Provides proper accessibility with legends and ARIA labels\n * - Handles required field validation\n * - Automatic radio button grouping for single selection\n * - Context provider for child SelectCard components\n *\n * @example\n * <SelectCard.Group\n * legend=\"Choose your plan\"\n * selectionMode=\"single\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n * <SelectCard id=\"basic\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\">Basic Plan</Text>\n * </SelectCard>\n * <SelectCard id=\"premium\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\">Premium Plan</Text>\n * </SelectCard>\n * </SelectCard.Group>\n */\n Group: SelectCardGroup,\n});\n"],"names":[],"mappings":";;;;;;;;AA6DO,MAAM,iBAAA,GAAoB,cAAyC,IAAI,CAAA;AAMvE,MAAM,oBAAA,GAAuB,MAAM,UAAA,CAAW,iBAAiB,CAAA;;AC9B/D,MAAM,qBAAqB,CAAC;AAAA,EACjC,QAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,KAAgC;AAC9B,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,IAAI,QAAA,iBAA+B,IAAI,KAAK,CAAA;AAE1E,EAAA,MAAM,YAAY,KAAA,EAAM;AAExB,EAAA,MAAM,YAAA,GAAe,CACnB,CAAA,EACA,KAAA,EACA,OAAA,KACG;AACH,IAAA,IAAI,CAAC,KAAA,IAAS,CAAC,KAAA,CAAM,EAAA,EAAI;AACvB,MAAA,IAAI,CAAC,SAAS,QAAA,EAAU;AACtB,QAAA,QAAA,CAAS,GAAG,KAAK,CAAA;AAAA,MACnB;AAEA,MAAA;AAAA,IACF;AAGA,IAAA,IAAI,kBAAkB,QAAA,EAAU;AAC9B,MAAA,IAAI,MAAM,OAAA,EAAS;AACjB,QAAA,YAAA,qBAAiB,GAAA,CAAI,CAAC,KAAA,CAAM,EAAE,CAAC,CAAC,CAAA;AAAA,MAClC,CAAA,MAAO;AACL,QAAA,YAAA,iBAAa,IAAI,KAAK,CAAA;AAAA,MACxB;AAAA,IACF,CAAA,MAAO;AACL,MAAA,IAAI,MAAM,OAAA,EAAS;AACjB,QAAA,YAAA,CAAa,SAAA,CAAU,GAAA,CAAI,KAAA,CAAM,EAAE,CAAC,CAAA;AAAA,MACtC,CAAA,MAAO;AACL,QAAA,SAAA,CAAU,MAAA,CAAO,MAAM,EAAE,CAAA;AACzB,QAAA,YAAA,CAAa,SAAS,CAAA;AAAA,MACxB;AAAA,IACF;AAEA,IAAA,IAAI,CAAC,SAAS,QAAA,EAAU;AACtB,MAAA,QAAA,CAAS,GAAG,KAAK,CAAA;AAAA,IACnB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,OAAA,GAAU;AAAA,IACd,aAAA;AAAA,IACA,QAAA,EAAU,YAAA;AAAA,IACV,SAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,2BACG,iBAAA,CAAkB,QAAA,EAAlB,EAA2B,KAAA,EAAO,SAChC,QAAA,EACH,CAAA;AAEJ,CAAA;;AClCO,MAAM,eAAA,GAAkB,UAAA,CAG7B,CAAC,KAAA,EAAO,IAAA,KAAS;AACjB,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,aAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,uBACE,IAAA,CAAC,kBAAA,EAAA,EAAmB,QAAA,EAAoB,aAAA,EACrC,QAAA,EAAA;AAAA,IAAA,aAAA,KAAkB,UAAA,oBACjB,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,iBAAA,EAAiB,cAAA;AAAA,QACjB,MAAA;AAAA,QACA,QAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,IAED,kBAAkB,QAAA,oBACjB,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,iBAAA,EAAiB,cAAA;AAAA,QACjB,MAAA;AAAA,QACA,QAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA;AACH,GAAA,EAEJ,CAAA;AAEJ,CAAC;AAED,eAAA,CAAgB,WAAA,GAAc,iBAAA;;;;;;;;;;ACnCvB,MAAM,iBAAA,GAAoB,UAAA;AAAA,EAC/B,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM;AAAA,MACJ,aAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACT,SAAA;AAAA,MACA,cAAA,EAAgB,kBAAA;AAAA,MAChB,QAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,EAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,4BAAA,CAAsC;AAAA,MAClE,eAAA,EAAiB,WAAA;AAAA,MACjB,cAAc,kBAAA,IAAsB,KAAA;AAAA,MACpC;AAAA,KACD,CAAA;AAED,IAAA,MAAM,UAAU,oBAAA,EAAqB;AAGrC,IAAA,MAAM,CAAC,CAAA,EAAG,mBAAmB,CAAA,GAAI,SAAS,CAAC,CAAA;AAC3C,IAAA,eAAA,CAAgB,MAAM;AACpB,MAAA,IAAI,kBAAA,EAAoB;AACtB,QAAA,OAAA,EAAS,QAAA;AAAA,UACP,MAAA;AAAA,UACA;AAAA,YACE,EAAA;AAAA,YACA,OAAA,EAAS;AAAA,WACX;AAAA,UACA,EAAE,UAAU,IAAA;AAAK,SACnB;AAEA,QAAA,mBAAA,CAAoB,CAAC,IAAA,KAAS,IAAA,GAAO,CAAC,CAAA;AAAA,MACxC;AAAA,IAEF,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAA0C;AAC9D,MAAA,MAAM,UAAA,GAAa,KAAA,GAAQ,KAAA,CAAM,MAAA,CAAO,OAAA,GAAU,KAAA;AAClD,MAAA,UAAA,CAAW,UAAU,CAAA;AACrB,MAAA,OAAA,EAAS,SAAS,KAAA,EAAO;AAAA,QACvB,EAAA;AAAA,QACA,OAAA,EAAS;AAAA,OACV,CAAA;AAAA,IACH,CAAA;AAGA,IAAA,MAAM,YAAY,OAAA,GAAU,OAAA,CAAQ,SAAA,CAAU,GAAA,CAAI,EAAE,CAAA,GAAI,OAAA;AAExD,IAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACI,QAAA,EAAA;AAAA,MAAA,CAAA,CAAC,OAAA,IAAW,OAAA,EAAS,aAAA,KAAkB,UAAA,qBACvC,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACE,GAAG,aAAA;AAAA,UACJ,cAAA,EAAgB,kBAAA;AAAA,UAChB,QAAA,EAAU,YAAA;AAAA,UACV,QAAA;AAAA,UACA,GAAA;AAAA,UACA,KAAA,kBACE,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACE,GAAG,IAAA;AAAA,cACJ,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,aAAa,GAAG,SAAA,EAAW;AAAA,gBAC9C,CAAC,MAAA,CAAO,iCAAiC,CAAC,GAAG,gBAAA;AAAA,gBAC7C,CAAC,MAAA,CAAO,uBAAuB,CAAC,GAAG,aAAa,CAAC,OAAA;AAAA,gBACjD,CAAC,MAAA,CAAO,sBAAsB,CAAC,GAAG,OAAA;AAAA,gBAClC,CAAC,MAAA,CAAO,uBAAuB,CAAC,GAAG;AAAA,eACpC,CAAA;AAAA,cAEA;AAAA;AAAA,WACH;AAAA,UAEF,YAAA,EAAY;AAAA;AAAA,OACd;AAAA,MAED,OAAA,EAAS,kBAAkB,QAAA,oBAC1B,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACE,GAAG,UAAA;AAAA,UACJ,cAAA,EAAgB,kBAAA;AAAA,UAChB,QAAA,EAAU,YAAA;AAAA,UACV,QAAA;AAAA,UACA,GAAA;AAAA,UACA,MAAM,OAAA,CAAQ,SAAA;AAAA,UACd,KAAA,kBACE,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACE,GAAG,IAAA;AAAA,cACJ,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,aAAa,GAAG,SAAA,EAAW;AAAA,gBAC9C,CAAC,MAAA,CAAO,iCAAiC,CAAC,GAAG,gBAAA;AAAA,gBAC7C,CAAC,MAAA,CAAO,uBAAuB,CAAC,GAAG,aAAa,CAAC,OAAA;AAAA,gBACjD,CAAC,MAAA,CAAO,sBAAsB,CAAC,GAAG,OAAA;AAAA,gBAClC,CAAC,MAAA,CAAO,uBAAuB,CAAC,GAAG;AAAA,eACpC,CAAA;AAAA,cAEA;AAAA;AAAA,WACH;AAAA,UAEF,SAAA,EAAS;AAAA;AAAA;AACX,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AAEA,iBAAA,CAAkB,WAAA,GAAc,YAAA;AAuBzB,MAAM,UAAA,GAAa,MAAA,CAAO,MAAA,CAAO,iBAAA,EAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0BzD,KAAA,EAAO;AACT,CAAC;;;;"}
|
package/dist/SelectCard.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { S as SelectCard, a as SelectCardElement, b as SelectCardGroup, S as default } from './SelectCard-
|
|
1
|
+
export { S as SelectCard, a as SelectCardElement, b as SelectCardGroup, S as default } from './SelectCard-Dw7zW0UN.js';
|
|
2
2
|
//# sourceMappingURL=SelectCard.js.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { A as Avatar } from './Avatar-
|
|
3
|
-
import { I as Icon } from './Icon-
|
|
4
|
-
import { S as SelectTriggerBase, d as defaultItemToString, a as defaultItemToKey } from './SelectTriggerBase-
|
|
5
|
-
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-
|
|
2
|
+
import { A as Avatar } from './Avatar-VQrimv28.js';
|
|
3
|
+
import { I as Icon } from './Icon-TcJbUdTz.js';
|
|
4
|
+
import { S as SelectTriggerBase, d as defaultItemToString, a as defaultItemToKey } from './SelectTriggerBase-B-fxog4U.js';
|
|
5
|
+
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-C7FVYB8F.js';
|
|
6
6
|
import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
|
|
7
7
|
import { useTrackingId } from './useTrackingId.js';
|
|
8
8
|
|
|
@@ -122,4 +122,4 @@ const SelectTrigger = function(props) {
|
|
|
122
122
|
};
|
|
123
123
|
|
|
124
124
|
export { SelectTrigger as S };
|
|
125
|
-
//# sourceMappingURL=SelectTrigger-
|
|
125
|
+
//# sourceMappingURL=SelectTrigger-BQNqyG3M.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectTrigger-
|
|
1
|
+
{"version":3,"file":"SelectTrigger-BQNqyG3M.js","sources":["../src/components/SelectTrigger/SelectTrigger.tsx"],"sourcesContent":["import { Dispatch, SetStateAction } from \"react\";\nimport {\n UseComboboxProps as UseDownshiftComboboxProps,\n UseMultipleSelectionProps as UseDownshiftMultipleSelectionProps,\n} from \"downshift\";\n\nimport { Avatar, AvatarProps } from \"../Avatar\";\nimport { childrenToString } from \"../../internal/functions\";\nimport { DataTrackingId, DistributiveOmit } from \"../../types\";\nimport { FieldLabelProps } from \"../FieldLabel\";\nimport { Icon, IconProps } from \"../Icon\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { useTrackingId } from \"../../hooks\";\n\nimport {\n SelectTriggerBase,\n SelectTriggerBaseProps,\n} from \"./internal/SelectTriggerBase\";\nimport {\n defaultItemToKey,\n defaultItemToString,\n} from \"../Combobox/internal/ComboboxUtils\";\n\nexport type SelectTriggerProps<Item> = DistributiveOmit<\n SelectTriggerBaseProps<Item>,\n \"prefix\" | \"selectedItem\" | \"selectedItems\" | \"onChange\"\n> &\n Pick<FieldLabelProps, \"required\" | \"moreInfo\" | \"openMoreInfo\"> &\n Pick<UseDownshiftComboboxProps<Item>, \"itemToString\" | \"itemToKey\"> &\n DataTrackingId & {\n prefix?:\n | string\n | { icon: DistributiveOmit<IconProps, \"size\"> }\n | { avatar: DistributiveOmit<AvatarProps, \"size\"> };\n } & (\n | {\n multiple?: never;\n onChange?:\n | Dispatch<SetStateAction<Item | null>>\n | ((arg: Item | null) => void);\n selectedItem: UseDownshiftComboboxProps<Item>[\"selectedItem\"];\n selectedItems?: never;\n }\n | {\n multiple: true;\n onChange?:\n | Dispatch<SetStateAction<Item[] | null>>\n | ((arg: Item[] | null) => void);\n selectedItem?: never;\n selectedItems: UseDownshiftMultipleSelectionProps<Item>[\"selectedItems\"];\n }\n );\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO: look into unknown\nexport const SelectTrigger = function <Item = any>(\n props: SelectTriggerProps<Item>,\n) {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n\n const {\n className,\n style,\n label,\n size,\n error,\n hint,\n description,\n required,\n moreInfo,\n openMoreInfo,\n prefix: prefixProp,\n suffix,\n maxRows,\n selectedItemProps = () => ({}),\n id,\n placeholder,\n disabled: isDisabled,\n readOnly: isReadOnly,\n onClick,\n multiple,\n onChange,\n disableClearSelection,\n itemToString: itemToStringProp,\n itemToKey: itemToKeyProp,\n selectedItem = null,\n selectedItems = [],\n ...rest\n } = componentProps;\n\n const itemToString = itemToStringProp ?? defaultItemToString<Item>;\n const itemToKey = itemToKeyProp ?? defaultItemToKey<Item>;\n\n function removeSelectedItem(item: Item) {\n if (multiple) {\n onChange?.(\n selectedItems.filter(\n (selectedItem: Item) => itemToKey(selectedItem) !== itemToKey(item),\n ),\n );\n } else if (itemToKey(selectedItem) === itemToKey(item)) {\n onChange?.(null);\n }\n }\n\n function reset() {\n if (multiple) {\n onChange?.([]);\n } else {\n onChange?.(null);\n }\n }\n\n const noClearButton = isDisabled || isReadOnly || disableClearSelection;\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n const data = {\n label: childrenToString(props.label),\n size: props.size,\n required: props.required,\n moreInfo: props.moreInfo,\n openMoreInfo: props.openMoreInfo,\n description: childrenToString(props.description),\n hint: props.hint,\n labelProps: props.labelProps,\n };\n\n const trackingId = useTrackingId({\n name: \"ComboboxSearchField\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n\n const prefix =\n prefixProp == null || typeof prefixProp === \"string\" ? (\n prefixProp\n ) : \"icon\" in prefixProp ? (\n <Icon {...prefixProp.icon} />\n ) : \"avatar\" in prefixProp ? (\n <Avatar\n {...prefixProp.avatar}\n size={props.size === \"small\" ? \"small\" : \"medium\"}\n />\n ) : (\n prefixProp\n );\n\n return (\n <SelectTriggerBase\n data-anv=\"select-trigger\"\n data-tracking-id={trackingId}\n className={className}\n style={styleCombined}\n label={label}\n size={size}\n error={error}\n hint={hint}\n description={description}\n labelProps={{\n required,\n moreInfo,\n openMoreInfo,\n }}\n prefix={prefix}\n suffix={suffix}\n maxRows={maxRows}\n selectedItemProps={selectedItemProps}\n id={id}\n placeholder={placeholder}\n disabled={isDisabled}\n readOnly={isReadOnly}\n itemToString={itemToString}\n removeSelectedItem={removeSelectedItem}\n disableClearSelection={noClearButton}\n selectedItem={selectedItem}\n selectedItems={selectedItems}\n onClearButtonClick={reset}\n inputWrapperProps={{ onClick }}\n inputProps={rest}\n />\n );\n};\n"],"names":["selectedItem"],"mappings":"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"}
|
package/dist/SelectTrigger.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { S as SelectTrigger, S as default } from './SelectTrigger-
|
|
1
|
+
export { S as SelectTrigger, S as default } from './SelectTrigger-BQNqyG3M.js';
|
|
2
2
|
//# sourceMappingURL=SelectTrigger.js.map
|
|
@@ -3,11 +3,11 @@ import { useRef, useId, useState, useLayoutEffect } from 'react';
|
|
|
3
3
|
import { c as cx } from './index-tZvMCc77.js';
|
|
4
4
|
import { S as SvgClose } from './close-DZj38AEh.js';
|
|
5
5
|
import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
|
|
6
|
-
import { B as Button } from './Button-
|
|
7
|
-
import { C as Chip } from './Chip-
|
|
8
|
-
import { F as Flex } from './Flex-
|
|
9
|
-
import { F as FieldLabel } from './FieldLabel-
|
|
10
|
-
import { H as Helper } from './Helper-
|
|
6
|
+
import { B as Button } from './Button-DzcOa6iJ.js';
|
|
7
|
+
import { C as Chip } from './Chip-BGa1Inb8.js';
|
|
8
|
+
import { F as Flex } from './Flex-GLF5XRJg.js';
|
|
9
|
+
import { F as FieldLabel } from './FieldLabel-DIlzcPIQ.js';
|
|
10
|
+
import { H as Helper } from './Helper-DHoKHqxV.js';
|
|
11
11
|
|
|
12
12
|
import './SelectTriggerBase.css';const ADD_NEW = Symbol.for("add-new");
|
|
13
13
|
const SELECT_ALL = Symbol.for("select-all");
|
|
@@ -327,4 +327,4 @@ const SelectTriggerBase = function({
|
|
|
327
327
|
};
|
|
328
328
|
|
|
329
329
|
export { ADD_NEW as A, SelectTriggerBase as S, defaultItemToKey as a, SELECT_ALL as b, defaultItemToString as d, getScrollParent as g, isMultiple as i, useDownshiftEnvironment as u };
|
|
330
|
-
//# sourceMappingURL=SelectTriggerBase-
|
|
330
|
+
//# sourceMappingURL=SelectTriggerBase-B-fxog4U.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectTriggerBase-DtLWrsm7.js","sources":["../src/components/Combobox/internal/ComboboxUtils.ts","../src/components/SelectTrigger/internal/SelectTriggerBase.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport {\n ComboboxMultipleProps,\n ComboboxProps,\n ComboboxSelectProps,\n SelectMultipleProps,\n} from \"../ComboboxTypes\";\n\nexport const ADD_NEW = Symbol.for(\"add-new\");\nexport const SELECT_ALL = Symbol.for(\"select-all\");\n\n/**\n * Default function to convert an item to a string representation\n * @template Item - The type of the item\n * @param item - The item to convert to string\n * @returns String representation of the item or empty string if null/undefined\n */\nexport const defaultItemToString = function <Item>(item: Item | null) {\n return item != null ? String(item) : \"\";\n};\n\n/**\n * Default function to generate a unique key for an item\n * @template Item - The type of the item\n * @param item - The item to generate a key for\n * @returns The item itself as the key\n */\nexport const defaultItemToKey = function <Item>(item: Item | null) {\n return item;\n};\n\n/**\n * Hook to handle downshift environment configuration for shadow DOM support\n *\n * Features:\n * - Fixes shadow DOM compatibility issues with downshift\n * - Provides proper document and event listener references\n * - Returns ref for wrapper element and environment configuration\n *\n * @returns Object containing ref and environment configuration\n *\n * @example\n * const { ref, environment } = useDownshiftEnvironment();\n *\n * return (\n * <div ref={ref}>\n * <Combobox environment={environment}>\n * combobox content\n * </Combobox>\n * </div>\n * );\n */\nexport const useDownshiftEnvironment = () => {\n // fix for shadow DOM, see https://gist.github.com/Rendez/1dd55882e9b850dd3990feefc9d6e177\n const wrapperDivRef = useRef<HTMLDivElement | null>(null);\n\n const shadowRoot = wrapperDivRef.current\n ? wrapperDivRef.current.getRootNode()\n : null;\n\n const shadowDocument =\n wrapperDivRef.current && shadowRoot ? shadowRoot.ownerDocument : null;\n\n const environment = shadowDocument\n ? {\n document: shadowDocument,\n addEventListener: shadowDocument.addEventListener.bind(shadowRoot),\n removeEventListener:\n shadowDocument.removeEventListener.bind(shadowRoot),\n Node,\n }\n : undefined;\n\n return { ref: wrapperDivRef, environment };\n};\n\nexport function isMultiple<Item>(\n props: ComboboxProps<Item> | ComboboxSelectProps<Item>,\n): props is ComboboxMultipleProps<Item> | SelectMultipleProps<Item> {\n return Object.hasOwn(props, \"multiple\") && props.multiple === true;\n}\n\nexport function getScrollParent(node: HTMLElement | null) {\n if (node == null) {\n return null;\n }\n\n if (node.scrollHeight > node.clientHeight) {\n return node;\n } else {\n if (node.parentNode instanceof HTMLElement) {\n return getScrollParent(node.parentNode);\n }\n return null;\n }\n}\n","import {\n useState,\n useId,\n useRef,\n useLayoutEffect,\n type ComponentPropsWithoutRef,\n type MouseEvent,\n type MutableRefObject,\n type MouseEventHandler,\n ReactNode,\n} from \"react\";\nimport cx from \"classnames\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport Chevron_Right from \"@servicetitan/hammer-icon/mdi/round/chevron_right.svg\";\n\nimport { Button } from \"../../Button\";\nimport { Chip, ChipProps } from \"../../Chip\";\nimport { Flex } from \"../../Flex\";\nimport { FieldLabel, FieldLabelProps } from \"../../FieldLabel\";\nimport { Helper } from \"../../../internal/components\";\nimport { TextFieldProps } from \"../../TextField\";\n\nimport styles from \"./SelectTriggerBase.module.scss\";\nimport { DistributiveOmit } from \"../../../types\";\nimport { defaultItemToString } from \"../../Combobox/internal/ComboboxUtils\";\n\ntype PartialChipProps = Partial<Omit<ChipProps, \"icon\" | \"avatar\">> &\n (\n | { icon?: ChipProps[\"icon\"]; avatar?: never }\n | { icon?: never; avatar?: ChipProps[\"avatar\"] }\n );\n\nfunction mergeChipProps(\n ...propSets: (PartialChipProps | Partial<ChipProps>)[]\n): ChipProps {\n const merged = propSets.reduce(\n (acc, props) => ({ ...acc, ...props }),\n {} as Record<string, unknown>,\n );\n\n return merged as ChipProps;\n}\n\nexport type SelectTriggerBaseProps<Item = unknown> = DistributiveOmit<\n TextFieldProps,\n \"showCounter\" | \"prefix\"\n> & {\n /**\n * Should be a positive integer.\n */\n maxRows?: number;\n\n /** Allows Combobox/Select to display custom-colored Chips */\n selectedItemProps?: (item: Item, index: number) => PartialChipProps;\n} & {\n itemToString?: (item: Item) => string;\n removeSelectedItem?: (item: Item) => void;\n disableClearSelection?: boolean;\n selectedItem: Item | null;\n selectedItems: Item[];\n\n inputValue?: string;\n referenceRef?: MutableRefObject<HTMLDivElement | null>;\n} & {\n variant?: \"select\" | \"combobox\";\n onClearButtonClick?: MouseEventHandler<HTMLButtonElement>;\n labelProps?: Partial<FieldLabelProps>;\n inputWrapperProps?: ComponentPropsWithoutRef<\"div\">;\n toggleButtonProps?: ComponentPropsWithoutRef<\"button\">;\n chipProps?: (item: Item, index: number) => PartialChipProps;\n inputProps?: ComponentPropsWithoutRef<\"input\" | \"div\">;\n} & {\n prefix?: string | ReactNode;\n};\n\nexport const SelectTriggerBase = function <Item>({\n className,\n label,\n size,\n error,\n hint,\n description,\n prefix,\n suffix,\n maxRows,\n selectedItemProps = (_item: Item, _index: number): PartialChipProps => ({}),\n disabled,\n readOnly,\n /** ======== */\n disableClearSelection,\n itemToString: itemToStringProp,\n selectedItem,\n selectedItems,\n removeSelectedItem,\n inputValue,\n referenceRef,\n /** ======== */\n variant = \"select\",\n onClearButtonClick,\n labelProps,\n inputWrapperProps = {},\n toggleButtonProps = {},\n inputProps = {},\n chipProps = (_item: Item, _index: number): PartialChipProps => ({}),\n placeholder,\n ...rest\n}: SelectTriggerBaseProps<Item>) {\n const itemToString = itemToStringProp ?? defaultItemToString<Item>;\n\n const ComboboxTriggerClassNames = cx(styles[\"search-field\"], {\n [styles[\"select\"]]: variant === \"select\",\n });\n\n const noClearButton = disabled || readOnly || disableClearSelection;\n\n const ComboboxInputWrapperClassNames = cx(\n styles[\"input-wrapper\"],\n className\n ? {\n [className]: variant === \"select\",\n }\n : {},\n {\n [styles[\"small\"]]: size === \"small\",\n [styles[\"large\"]]: size === \"large\",\n [styles[\"no-clear-button\"]]: noClearButton,\n },\n );\n\n const ComboboxInputClassNames = cx(\n styles[\"input\"],\n className\n ? {\n [className]: variant === \"combobox\",\n }\n : {},\n {\n [styles[\"error\"]]: error,\n },\n );\n\n const helperUid = \"helper\" + useId();\n const placeholderUid = \"placeholder\" + useId();\n const ariaDescribedBy = `${helperUid} ${placeholderUid}`;\n\n const errorMessage = typeof error !== \"boolean\" ? error : undefined;\n\n const rowsRef = useRef<HTMLDivElement>(null);\n const [stillCalculating, setStillCalculating] = useState<boolean>(false);\n const [collapsedChips, setCollapsedChips] = useState<boolean>(false);\n const [visibleChipsCount, setVisibleChipsCount] = useState<number | null>(\n null,\n );\n const [forceRenderCount, setForceRenderCount] = useState<number>(0);\n\n useLayoutEffect(() => {\n // we only need to do this nonsense if maxRows is set\n if (maxRows === undefined) return;\n\n // 1) Render with no chips collapsed, if it's already just one row, we're done\n // 2) If there is a second row, then render again with best guess at how we should collapse\n // 3) If there is still a second row while collapsed, then render again with one less item\n // 4) Keep going until there is only one row, then /actually/ render\n\n // start calculation loop, set intiial values and force re-render\n if (stillCalculating === false) {\n setStillCalculating(true);\n setCollapsedChips(false);\n setVisibleChipsCount(null);\n setForceRenderCount((x) => x + 1);\n\n // otherwise, calculate the number of rows\n } else if (rowsRef?.current?.children) {\n const children = rowsRef?.current?.children;\n\n const rowData = Array.from(children).reduce(\n (acc, child) => {\n const top = child.getBoundingClientRect().top;\n\n if (!acc.length) {\n return [{ count: 1, top }];\n } else if (acc[acc.length - 1].top === top) {\n return [\n ...acc.slice(0, -1),\n { count: acc[acc.length - 1].count + 1, top },\n ];\n } else if (acc[acc.length - 1].top !== top) {\n return [...acc, { count: 1, top }];\n } else {\n return acc;\n }\n },\n [] as { count: number; top: number }[],\n );\n\n // Call it a day if:\n // We don't have a second row OR\n // We're already hiding everything OR\n // There's only one item selected\n if (\n !rowData[maxRows] ||\n visibleChipsCount === 0 ||\n selectedItems.length === 1\n ) {\n setStillCalculating(false);\n } else {\n setCollapsedChips(true);\n\n // otherwise, either guess how many visible chips we have\n if (visibleChipsCount == null) {\n const firstGuess = Math.max(\n rowData.reduce((sum, row) => sum + row.count, -2),\n 0,\n );\n setVisibleChipsCount(firstGuess);\n\n // or decrease our last guess by 1 and try again\n } else {\n setVisibleChipsCount(visibleChipsCount - 1);\n }\n\n setForceRenderCount((x) => x + 1);\n }\n }\n }, [selectedItems.length, maxRows, forceRenderCount]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const selectedItemsDisplayCount =\n collapsedChips && maxRows != null && visibleChipsCount !== null\n ? visibleChipsCount\n : selectedItems.length;\n\n // TODO: Update this to use a TextField component once we can pass props\n // directly to both the label and the text input\n return (\n <div {...rest} className={ComboboxTriggerClassNames} ref={referenceRef}>\n {label ? (\n <FieldLabel\n {...labelProps}\n className={cx(styles[\"label\"], labelProps?.className)}\n >\n {label}\n </FieldLabel>\n ) : null}\n\n <div\n {...inputWrapperProps}\n className={ComboboxInputWrapperClassNames}\n {...(variant === \"select\"\n ? {\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": labelProps?.id,\n }\n : {})}\n >\n <div className={styles[\"buttons-wrapper\"]}>\n {(inputValue || selectedItem || selectedItems.length) &&\n !noClearButton ? (\n <div className={styles[\"close-button-wrapper\"]}>\n <Button\n aria-label=\"clear selection\"\n appearance=\"ghost\"\n size=\"small\"\n icon={Close}\n className={styles[\"close-button\"]}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n onClearButtonClick?.(e);\n }}\n tabIndex={-1}\n />\n </div>\n ) : null}\n\n <div className={styles[\"toggle-button-wrapper\"]}>\n <Button\n {...toggleButtonProps}\n {...(variant === \"select\" ? { tabIndex: -1, inert: \"true\" } : {})}\n className={styles[\"toggle-button\"]}\n aria-label=\"toggle menu\"\n icon={Chevron_Right}\n appearance=\"ghost\"\n size=\"small\"\n disabled={disabled}\n />\n </div>\n </div>\n\n <div className={styles[\"prefix-wrapper\"]}>\n {prefix ? <div className={styles[\"prefix\"]}>{prefix}</div> : null}\n </div>\n\n <div className={styles[\"rows-wrapper\"]} ref={rowsRef}>\n {selectedItems.length && removeSelectedItem != null\n ? selectedItems\n .slice(0, selectedItemsDisplayCount)\n .map((item, index) => {\n return (\n <div\n key={`selected-item-${index}`}\n className={styles[\"chip-wrapper\"]}\n >\n <Chip\n {...mergeChipProps(\n chipProps(item, index),\n selectedItemProps(item, index),\n {\n label: itemToString(item),\n onClose:\n disabled || readOnly\n ? undefined\n : (_e) => {\n removeSelectedItem(item);\n },\n className: styles[\"chip\"],\n title: itemToString(item),\n },\n )}\n />\n </div>\n );\n })\n : null}\n\n {collapsedChips && maxRows != null ? (\n <div className={styles[\"chip-wrapper\"]}>\n <Chip\n label={`+${selectedItems.length - selectedItemsDisplayCount}`}\n className={styles[\"chip\"]}\n title={selectedItems\n .slice(selectedItemsDisplayCount)\n .map((item) => itemToString(item))\n .join(\", \")}\n />\n </div>\n ) : null}\n\n <Flex className={styles[\"input-flex\"]} alignItems=\"center\">\n {variant === \"select\" ? (\n <div\n {...inputProps}\n className={cx(ComboboxInputClassNames, inputProps.className)}\n >\n {selectedItems.length ? null : selectedItem ? (\n itemToString(selectedItem)\n ) : (\n <span\n className={styles[\"fake-placeholder\"]}\n id={placeholderUid}\n >\n {placeholder}\n </span>\n )}\n </div>\n ) : (\n <input\n {...inputProps}\n placeholder={placeholder}\n className={cx(ComboboxInputClassNames, inputProps.className)}\n {...(inputProps[\"aria-expanded\"] != null &&\n inputProps[\"aria-controls\"] != null\n ? {\n role: \"combobox\",\n }\n : {})}\n />\n )}\n\n {suffix ? <div className={styles[\"suffix\"]}>{suffix}</div> : null}\n </Flex>\n </div>\n </div>\n\n {hint || errorMessage || description ? (\n <Helper\n id={helperUid}\n errorMessage={errorMessage}\n hint={hint}\n description={description}\n />\n ) : null}\n </div>\n );\n};\n"],"names":["Close","Chevron_Right"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelectTriggerBase-B-fxog4U.js","sources":["../src/components/Combobox/internal/ComboboxUtils.ts","../src/components/SelectTrigger/internal/SelectTriggerBase.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport {\n ComboboxMultipleProps,\n ComboboxProps,\n ComboboxSelectProps,\n SelectMultipleProps,\n} from \"../ComboboxTypes\";\n\nexport const ADD_NEW = Symbol.for(\"add-new\");\nexport const SELECT_ALL = Symbol.for(\"select-all\");\n\n/**\n * Default function to convert an item to a string representation\n * @template Item - The type of the item\n * @param item - The item to convert to string\n * @returns String representation of the item or empty string if null/undefined\n */\nexport const defaultItemToString = function <Item>(item: Item | null) {\n return item != null ? String(item) : \"\";\n};\n\n/**\n * Default function to generate a unique key for an item\n * @template Item - The type of the item\n * @param item - The item to generate a key for\n * @returns The item itself as the key\n */\nexport const defaultItemToKey = function <Item>(item: Item | null) {\n return item;\n};\n\n/**\n * Hook to handle downshift environment configuration for shadow DOM support\n *\n * Features:\n * - Fixes shadow DOM compatibility issues with downshift\n * - Provides proper document and event listener references\n * - Returns ref for wrapper element and environment configuration\n *\n * @returns Object containing ref and environment configuration\n *\n * @example\n * const { ref, environment } = useDownshiftEnvironment();\n *\n * return (\n * <div ref={ref}>\n * <Combobox environment={environment}>\n * combobox content\n * </Combobox>\n * </div>\n * );\n */\nexport const useDownshiftEnvironment = () => {\n // fix for shadow DOM, see https://gist.github.com/Rendez/1dd55882e9b850dd3990feefc9d6e177\n const wrapperDivRef = useRef<HTMLDivElement | null>(null);\n\n const shadowRoot = wrapperDivRef.current\n ? wrapperDivRef.current.getRootNode()\n : null;\n\n const shadowDocument =\n wrapperDivRef.current && shadowRoot ? shadowRoot.ownerDocument : null;\n\n const environment = shadowDocument\n ? {\n document: shadowDocument,\n addEventListener: shadowDocument.addEventListener.bind(shadowRoot),\n removeEventListener:\n shadowDocument.removeEventListener.bind(shadowRoot),\n Node,\n }\n : undefined;\n\n return { ref: wrapperDivRef, environment };\n};\n\nexport function isMultiple<Item>(\n props: ComboboxProps<Item> | ComboboxSelectProps<Item>,\n): props is ComboboxMultipleProps<Item> | SelectMultipleProps<Item> {\n return Object.hasOwn(props, \"multiple\") && props.multiple === true;\n}\n\nexport function getScrollParent(node: HTMLElement | null) {\n if (node == null) {\n return null;\n }\n\n if (node.scrollHeight > node.clientHeight) {\n return node;\n } else {\n if (node.parentNode instanceof HTMLElement) {\n return getScrollParent(node.parentNode);\n }\n return null;\n }\n}\n","import {\n useState,\n useId,\n useRef,\n useLayoutEffect,\n type ComponentPropsWithoutRef,\n type MouseEvent,\n type MutableRefObject,\n type MouseEventHandler,\n ReactNode,\n} from \"react\";\nimport cx from \"classnames\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport Chevron_Right from \"@servicetitan/hammer-icon/mdi/round/chevron_right.svg\";\n\nimport { Button } from \"../../Button\";\nimport { Chip, ChipProps } from \"../../Chip\";\nimport { Flex } from \"../../Flex\";\nimport { FieldLabel, FieldLabelProps } from \"../../FieldLabel\";\nimport { Helper } from \"../../../internal/components\";\nimport { TextFieldProps } from \"../../TextField\";\n\nimport styles from \"./SelectTriggerBase.module.scss\";\nimport { DistributiveOmit } from \"../../../types\";\nimport { defaultItemToString } from \"../../Combobox/internal/ComboboxUtils\";\n\ntype PartialChipProps = Partial<Omit<ChipProps, \"icon\" | \"avatar\">> &\n (\n | { icon?: ChipProps[\"icon\"]; avatar?: never }\n | { icon?: never; avatar?: ChipProps[\"avatar\"] }\n );\n\nfunction mergeChipProps(\n ...propSets: (PartialChipProps | Partial<ChipProps>)[]\n): ChipProps {\n const merged = propSets.reduce(\n (acc, props) => ({ ...acc, ...props }),\n {} as Record<string, unknown>,\n );\n\n return merged as ChipProps;\n}\n\nexport type SelectTriggerBaseProps<Item = unknown> = DistributiveOmit<\n TextFieldProps,\n \"showCounter\" | \"prefix\"\n> & {\n /**\n * Should be a positive integer.\n */\n maxRows?: number;\n\n /** Allows Combobox/Select to display custom-colored Chips */\n selectedItemProps?: (item: Item, index: number) => PartialChipProps;\n} & {\n itemToString?: (item: Item) => string;\n removeSelectedItem?: (item: Item) => void;\n disableClearSelection?: boolean;\n selectedItem: Item | null;\n selectedItems: Item[];\n\n inputValue?: string;\n referenceRef?: MutableRefObject<HTMLDivElement | null>;\n} & {\n variant?: \"select\" | \"combobox\";\n onClearButtonClick?: MouseEventHandler<HTMLButtonElement>;\n labelProps?: Partial<FieldLabelProps>;\n inputWrapperProps?: ComponentPropsWithoutRef<\"div\">;\n toggleButtonProps?: ComponentPropsWithoutRef<\"button\">;\n chipProps?: (item: Item, index: number) => PartialChipProps;\n inputProps?: ComponentPropsWithoutRef<\"input\" | \"div\">;\n} & {\n prefix?: string | ReactNode;\n};\n\nexport const SelectTriggerBase = function <Item>({\n className,\n label,\n size,\n error,\n hint,\n description,\n prefix,\n suffix,\n maxRows,\n selectedItemProps = (_item: Item, _index: number): PartialChipProps => ({}),\n disabled,\n readOnly,\n /** ======== */\n disableClearSelection,\n itemToString: itemToStringProp,\n selectedItem,\n selectedItems,\n removeSelectedItem,\n inputValue,\n referenceRef,\n /** ======== */\n variant = \"select\",\n onClearButtonClick,\n labelProps,\n inputWrapperProps = {},\n toggleButtonProps = {},\n inputProps = {},\n chipProps = (_item: Item, _index: number): PartialChipProps => ({}),\n placeholder,\n ...rest\n}: SelectTriggerBaseProps<Item>) {\n const itemToString = itemToStringProp ?? defaultItemToString<Item>;\n\n const ComboboxTriggerClassNames = cx(styles[\"search-field\"], {\n [styles[\"select\"]]: variant === \"select\",\n });\n\n const noClearButton = disabled || readOnly || disableClearSelection;\n\n const ComboboxInputWrapperClassNames = cx(\n styles[\"input-wrapper\"],\n className\n ? {\n [className]: variant === \"select\",\n }\n : {},\n {\n [styles[\"small\"]]: size === \"small\",\n [styles[\"large\"]]: size === \"large\",\n [styles[\"no-clear-button\"]]: noClearButton,\n },\n );\n\n const ComboboxInputClassNames = cx(\n styles[\"input\"],\n className\n ? {\n [className]: variant === \"combobox\",\n }\n : {},\n {\n [styles[\"error\"]]: error,\n },\n );\n\n const helperUid = \"helper\" + useId();\n const placeholderUid = \"placeholder\" + useId();\n const ariaDescribedBy = `${helperUid} ${placeholderUid}`;\n\n const errorMessage = typeof error !== \"boolean\" ? error : undefined;\n\n const rowsRef = useRef<HTMLDivElement>(null);\n const [stillCalculating, setStillCalculating] = useState<boolean>(false);\n const [collapsedChips, setCollapsedChips] = useState<boolean>(false);\n const [visibleChipsCount, setVisibleChipsCount] = useState<number | null>(\n null,\n );\n const [forceRenderCount, setForceRenderCount] = useState<number>(0);\n\n useLayoutEffect(() => {\n // we only need to do this nonsense if maxRows is set\n if (maxRows === undefined) return;\n\n // 1) Render with no chips collapsed, if it's already just one row, we're done\n // 2) If there is a second row, then render again with best guess at how we should collapse\n // 3) If there is still a second row while collapsed, then render again with one less item\n // 4) Keep going until there is only one row, then /actually/ render\n\n // start calculation loop, set intiial values and force re-render\n if (stillCalculating === false) {\n setStillCalculating(true);\n setCollapsedChips(false);\n setVisibleChipsCount(null);\n setForceRenderCount((x) => x + 1);\n\n // otherwise, calculate the number of rows\n } else if (rowsRef?.current?.children) {\n const children = rowsRef?.current?.children;\n\n const rowData = Array.from(children).reduce(\n (acc, child) => {\n const top = child.getBoundingClientRect().top;\n\n if (!acc.length) {\n return [{ count: 1, top }];\n } else if (acc[acc.length - 1].top === top) {\n return [\n ...acc.slice(0, -1),\n { count: acc[acc.length - 1].count + 1, top },\n ];\n } else if (acc[acc.length - 1].top !== top) {\n return [...acc, { count: 1, top }];\n } else {\n return acc;\n }\n },\n [] as { count: number; top: number }[],\n );\n\n // Call it a day if:\n // We don't have a second row OR\n // We're already hiding everything OR\n // There's only one item selected\n if (\n !rowData[maxRows] ||\n visibleChipsCount === 0 ||\n selectedItems.length === 1\n ) {\n setStillCalculating(false);\n } else {\n setCollapsedChips(true);\n\n // otherwise, either guess how many visible chips we have\n if (visibleChipsCount == null) {\n const firstGuess = Math.max(\n rowData.reduce((sum, row) => sum + row.count, -2),\n 0,\n );\n setVisibleChipsCount(firstGuess);\n\n // or decrease our last guess by 1 and try again\n } else {\n setVisibleChipsCount(visibleChipsCount - 1);\n }\n\n setForceRenderCount((x) => x + 1);\n }\n }\n }, [selectedItems.length, maxRows, forceRenderCount]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const selectedItemsDisplayCount =\n collapsedChips && maxRows != null && visibleChipsCount !== null\n ? visibleChipsCount\n : selectedItems.length;\n\n // TODO: Update this to use a TextField component once we can pass props\n // directly to both the label and the text input\n return (\n <div {...rest} className={ComboboxTriggerClassNames} ref={referenceRef}>\n {label ? (\n <FieldLabel\n {...labelProps}\n className={cx(styles[\"label\"], labelProps?.className)}\n >\n {label}\n </FieldLabel>\n ) : null}\n\n <div\n {...inputWrapperProps}\n className={ComboboxInputWrapperClassNames}\n {...(variant === \"select\"\n ? {\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": labelProps?.id,\n }\n : {})}\n >\n <div className={styles[\"buttons-wrapper\"]}>\n {(inputValue || selectedItem || selectedItems.length) &&\n !noClearButton ? (\n <div className={styles[\"close-button-wrapper\"]}>\n <Button\n aria-label=\"clear selection\"\n appearance=\"ghost\"\n size=\"small\"\n icon={Close}\n className={styles[\"close-button\"]}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n onClearButtonClick?.(e);\n }}\n tabIndex={-1}\n />\n </div>\n ) : null}\n\n <div className={styles[\"toggle-button-wrapper\"]}>\n <Button\n {...toggleButtonProps}\n {...(variant === \"select\" ? { tabIndex: -1, inert: \"true\" } : {})}\n className={styles[\"toggle-button\"]}\n aria-label=\"toggle menu\"\n icon={Chevron_Right}\n appearance=\"ghost\"\n size=\"small\"\n disabled={disabled}\n />\n </div>\n </div>\n\n <div className={styles[\"prefix-wrapper\"]}>\n {prefix ? <div className={styles[\"prefix\"]}>{prefix}</div> : null}\n </div>\n\n <div className={styles[\"rows-wrapper\"]} ref={rowsRef}>\n {selectedItems.length && removeSelectedItem != null\n ? selectedItems\n .slice(0, selectedItemsDisplayCount)\n .map((item, index) => {\n return (\n <div\n key={`selected-item-${index}`}\n className={styles[\"chip-wrapper\"]}\n >\n <Chip\n {...mergeChipProps(\n chipProps(item, index),\n selectedItemProps(item, index),\n {\n label: itemToString(item),\n onClose:\n disabled || readOnly\n ? undefined\n : (_e) => {\n removeSelectedItem(item);\n },\n className: styles[\"chip\"],\n title: itemToString(item),\n },\n )}\n />\n </div>\n );\n })\n : null}\n\n {collapsedChips && maxRows != null ? (\n <div className={styles[\"chip-wrapper\"]}>\n <Chip\n label={`+${selectedItems.length - selectedItemsDisplayCount}`}\n className={styles[\"chip\"]}\n title={selectedItems\n .slice(selectedItemsDisplayCount)\n .map((item) => itemToString(item))\n .join(\", \")}\n />\n </div>\n ) : null}\n\n <Flex className={styles[\"input-flex\"]} alignItems=\"center\">\n {variant === \"select\" ? (\n <div\n {...inputProps}\n className={cx(ComboboxInputClassNames, inputProps.className)}\n >\n {selectedItems.length ? null : selectedItem ? (\n itemToString(selectedItem)\n ) : (\n <span\n className={styles[\"fake-placeholder\"]}\n id={placeholderUid}\n >\n {placeholder}\n </span>\n )}\n </div>\n ) : (\n <input\n {...inputProps}\n placeholder={placeholder}\n className={cx(ComboboxInputClassNames, inputProps.className)}\n {...(inputProps[\"aria-expanded\"] != null &&\n inputProps[\"aria-controls\"] != null\n ? {\n role: \"combobox\",\n }\n : {})}\n />\n )}\n\n {suffix ? <div className={styles[\"suffix\"]}>{suffix}</div> : null}\n </Flex>\n </div>\n </div>\n\n {hint || errorMessage || description ? (\n <Helper\n id={helperUid}\n errorMessage={errorMessage}\n hint={hint}\n description={description}\n />\n ) : null}\n </div>\n );\n};\n"],"names":["Close","Chevron_Right"],"mappings":"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"}
|