@servicetitan/anvil2 3.0.4 → 3.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +28 -0
- package/dist/{AiMark-DjOf60tj.js → AiMark-BXL0sWIV.js} +2 -2
- package/dist/{AiMark-DjOf60tj.js.map → AiMark-BXL0sWIV.js.map} +1 -1
- package/dist/AiMark.js +1 -1
- package/dist/{Alert-BTesdKK7.js → Alert-BNH0UD2s.js} +2 -2
- package/dist/{Alert-BTesdKK7.js.map → Alert-BNH0UD2s.js.map} +1 -1
- package/dist/Alert.js +1 -1
- package/dist/{AnvilProvider-JXEbeQjR.js → AnvilProvider-J9DjoJiB.js} +13 -2
- package/dist/AnvilProvider-J9DjoJiB.js.map +1 -0
- package/dist/AnvilProvider.js +1 -1
- package/dist/{Breadcrumbs-DTi5RqT-.js → Breadcrumbs-Bzxbdu-S.js} +2 -2
- package/dist/{Breadcrumbs-DTi5RqT-.js.map → Breadcrumbs-Bzxbdu-S.js.map} +1 -1
- package/dist/Breadcrumbs.js +1 -1
- package/dist/{Calendar-ddGQKSGU.js → Calendar-BYNFAWpZ.js} +2 -2
- package/dist/{Calendar-ddGQKSGU.js.map → Calendar-BYNFAWpZ.js.map} +1 -1
- package/dist/{Calendar-CpCRxcue.js → Calendar-DS5eWpGF.js} +2 -2
- package/dist/{Calendar-CpCRxcue.js.map → Calendar-DS5eWpGF.js.map} +1 -1
- package/dist/Calendar.js +2 -2
- package/dist/{Checkbox-CJ8eYejR.js → Checkbox-BB3BDJsK.js} +4 -4
- package/dist/{Checkbox-CJ8eYejR.js.map → Checkbox-BB3BDJsK.js.map} +1 -1
- package/dist/{Checkbox-CVidv1sO.js → Checkbox-BeIzx_ZX.js} +2 -2
- package/dist/{Checkbox-CVidv1sO.js.map → Checkbox-BeIzx_ZX.js.map} +1 -1
- package/dist/Checkbox.css +40 -37
- package/dist/Checkbox.js +1 -1
- package/dist/Checkbox.module-CURNX27M.js +28 -0
- package/dist/Checkbox.module-CURNX27M.js.map +1 -0
- package/dist/{Chip-0-Yx9SGX.js → Chip-D2k5X_wX.js} +2 -2
- package/dist/{Chip-0-Yx9SGX.js.map → Chip-D2k5X_wX.js.map} +1 -1
- package/dist/Chip.js +1 -1
- package/dist/{Combobox-C9-3tlcP.js → Combobox-Cp7M4-4r.js} +5 -5
- package/dist/{Combobox-C9-3tlcP.js.map → Combobox-Cp7M4-4r.js.map} +1 -1
- package/dist/Combobox.js +1 -1
- package/dist/{DataTable-Dr5A6RDe.js → DataTable-0kOuVgSB.js} +8 -8
- package/dist/{DataTable-Dr5A6RDe.js.map → DataTable-0kOuVgSB.js.map} +1 -1
- package/dist/{DateFieldRange-CO2C776E.js → DateFieldRange-Be_I9GTp.js} +4 -4
- package/dist/{DateFieldRange-CO2C776E.js.map → DateFieldRange-Be_I9GTp.js.map} +1 -1
- package/dist/DateFieldRange.js +1 -1
- package/dist/{DateFieldSingle-DjmHpn1y.js → DateFieldSingle-CsrsY9i8.js} +4 -4
- package/dist/{DateFieldSingle-DjmHpn1y.js.map → DateFieldSingle-CsrsY9i8.js.map} +1 -1
- package/dist/DateFieldSingle.js +1 -1
- package/dist/{DateFieldYearless-CCJAopYd.js → DateFieldYearless-m_Hl2gMY.js} +5 -5
- package/dist/{DateFieldYearless-CCJAopYd.js.map → DateFieldYearless-m_Hl2gMY.js.map} +1 -1
- package/dist/DateFieldYearless.js +1 -1
- package/dist/{DateFieldYearlessRange-BUv1mGJg.js → DateFieldYearlessRange-DNqSTBDr.js} +4 -4
- package/dist/{DateFieldYearlessRange-BUv1mGJg.js.map → DateFieldYearlessRange-DNqSTBDr.js.map} +1 -1
- package/dist/DateFieldYearlessRange.js +1 -1
- package/dist/{DaysOfTheWeek-BihTU2No.js → DaysOfTheWeek-D58z_eF3.js} +10 -9
- package/dist/{DaysOfTheWeek-BihTU2No.js.map → DaysOfTheWeek-D58z_eF3.js.map} +1 -1
- package/dist/DaysOfTheWeek.css +10 -6
- package/dist/DaysOfTheWeek.js +1 -1
- package/dist/{Dialog-BZTo4hbX.js → Dialog-CD-SDfPT.js} +22 -20
- package/dist/{Dialog-BZTo4hbX.js.map → Dialog-CD-SDfPT.js.map} +1 -1
- package/dist/Dialog.css +43 -29
- package/dist/Dialog.js +1 -1
- package/dist/{Drawer-Dg35inxH.js → Drawer-s2y0xcgV.js} +3 -3
- package/dist/{Drawer-Dg35inxH.js.map → Drawer-s2y0xcgV.js.map} +1 -1
- package/dist/Drawer.js +1 -1
- package/dist/DrillDown.js +1 -1
- package/dist/{EditCard-BfNq-T8n.js → EditCard-B25pj0Jx.js} +2 -2
- package/dist/{EditCard-BfNq-T8n.js.map → EditCard-B25pj0Jx.js.map} +1 -1
- package/dist/EditCard.js +1 -1
- package/dist/{FieldLabel-xV6EdVwo.js → FieldLabel-D1qPAGtB.js} +3 -3
- package/dist/{FieldLabel-xV6EdVwo.js.map → FieldLabel-D1qPAGtB.js.map} +1 -1
- package/dist/FieldLabel.js +1 -1
- package/dist/{FilterBar-BUfajdQU.js → FilterBar-yysyZ-t1.js} +378 -23
- package/dist/FilterBar-yysyZ-t1.js.map +1 -0
- package/dist/FilterBar.js +1 -1
- package/dist/{InputMask-8rI6UIb8.js → InputMask-BDl09V4u.js} +3 -3
- package/dist/{InputMask-8rI6UIb8.js.map → InputMask-BDl09V4u.js.map} +1 -1
- package/dist/InputMask.js +1 -1
- package/dist/{ListView-CIa981KJ.js → ListView-CcRRh1ap.js} +2 -2
- package/dist/{ListView-CIa981KJ.js.map → ListView-CcRRh1ap.js.map} +1 -1
- package/dist/ListView.js +1 -1
- package/dist/{Listbox-DRznPBCr.js → Listbox-CvQHBFWb.js} +2 -2
- package/dist/{Listbox-DRznPBCr.js.map → Listbox-CvQHBFWb.js.map} +1 -1
- package/dist/Listbox.js +1 -1
- package/dist/MultiSelectField.js +1 -1
- package/dist/{MultiSelectFieldSync-DXIBQABc.js → MultiSelectFieldSync-BMVROOjy.js} +58 -28
- package/dist/MultiSelectFieldSync-BMVROOjy.js.map +1 -0
- package/dist/MultiSelectFieldSync.css +63 -57
- package/dist/MultiSelectMenu.js +1 -1
- package/dist/{MultiSelectMenuSync-CCINebbr.js → MultiSelectMenuSync-BNPp_2Bm.js} +20 -7
- package/dist/MultiSelectMenuSync-BNPp_2Bm.js.map +1 -0
- package/dist/{NumberField-D7YYo4Rl.js → NumberField-BymFZhIJ.js} +4 -4
- package/dist/{NumberField-D7YYo4Rl.js.map → NumberField-BymFZhIJ.js.map} +1 -1
- package/dist/NumberField.js +1 -1
- package/dist/{Page-cELP59Hm.js → Page-SBy27-Wv.js} +8 -8
- package/dist/{Page-cELP59Hm.js.map → Page-SBy27-Wv.js.map} +1 -1
- package/dist/Page.js +1 -1
- package/dist/{Pagination-DTN4FovY.js → Pagination-Cm8-K6VH.js} +2 -2
- package/dist/{Pagination-DTN4FovY.js.map → Pagination-Cm8-K6VH.js.map} +1 -1
- package/dist/Pagination.js +1 -1
- package/dist/{Popover-B3Vw4lDW.js → Popover-8mTJoMy7.js} +2 -2
- package/dist/{Popover-B3Vw4lDW.js.map → Popover-8mTJoMy7.js.map} +1 -1
- package/dist/Popover.js +1 -1
- package/dist/{ProgressBar-kzCNhaCO.js → ProgressBar-C1CkQHV5.js} +2 -2
- package/dist/{ProgressBar-kzCNhaCO.js.map → ProgressBar-C1CkQHV5.js.map} +1 -1
- package/dist/ProgressBar.js +1 -1
- package/dist/{Radio-CSBetBV6.js → Radio-BcHMk8dD.js} +2 -2
- package/dist/{Radio-CSBetBV6.js.map → Radio-BcHMk8dD.js.map} +1 -1
- package/dist/{Radio-BDE1xGel.js → Radio-D5WyQN2i.js} +16 -16
- package/dist/{Radio-BDE1xGel.js.map → Radio-D5WyQN2i.js.map} +1 -1
- package/dist/Radio.css +40 -37
- package/dist/Radio.js +1 -1
- package/dist/{RichTextEditor-BFFXj0zS.js → RichTextEditor-DstVbYch.js} +8 -8
- package/dist/{RichTextEditor-BFFXj0zS.js.map → RichTextEditor-DstVbYch.js.map} +1 -1
- package/dist/RichTextEditor.js +1 -1
- package/dist/{SearchField-Dl7sh_M4.js → SearchField-3tUPU8hH.js} +2 -2
- package/dist/{SearchField-Dl7sh_M4.js.map → SearchField-3tUPU8hH.js.map} +1 -1
- package/dist/{SearchField-CO9BHCYB.js → SearchField-BcQZ5e0x.js} +2 -2
- package/dist/{SearchField-CO9BHCYB.js.map → SearchField-BcQZ5e0x.js.map} +1 -1
- package/dist/SearchField.js +1 -1
- package/dist/{SelectCard-CLCLIBoq.js → SelectCard-BN-LI14f.js} +3 -3
- package/dist/{SelectCard-CLCLIBoq.js.map → SelectCard-BN-LI14f.js.map} +1 -1
- package/dist/SelectCard.js +1 -1
- package/dist/SelectField.js +1 -1
- package/dist/{SelectFieldLabel-Db9w6O6r.js → SelectFieldLabel-UbQT7fDD.js} +2 -2
- package/dist/{SelectFieldLabel-Db9w6O6r.js.map → SelectFieldLabel-UbQT7fDD.js.map} +1 -1
- package/dist/{SelectFieldSync-DqIDTKqt.js → SelectFieldSync-BeDYbJ2M.js} +41 -11
- package/dist/SelectFieldSync-BeDYbJ2M.js.map +1 -0
- package/dist/SelectMenu.js +1 -1
- package/dist/{SelectMenuSync-DYPEX5wc.js → SelectMenuSync-C-PFemsQ.js} +20 -7
- package/dist/SelectMenuSync-C-PFemsQ.js.map +1 -0
- package/dist/{SelectOptions-DuMbmJjh.js → SelectOptions-Tr11Ckqw.js} +2 -2
- package/dist/{SelectOptions-DuMbmJjh.js.map → SelectOptions-Tr11Ckqw.js.map} +1 -1
- package/dist/{SelectTrigger-RiRjgwXd.js → SelectTrigger-DTz7V-Xx.js} +2 -2
- package/dist/{SelectTrigger-RiRjgwXd.js.map → SelectTrigger-DTz7V-Xx.js.map} +1 -1
- package/dist/SelectTrigger.js +1 -1
- package/dist/{SelectTriggerBase-CWxP7nPA.js → SelectTriggerBase-Ds6I7Qbr.js} +4 -4
- package/dist/{SelectTriggerBase-CWxP7nPA.js.map → SelectTriggerBase-Ds6I7Qbr.js.map} +1 -1
- package/dist/SelectTriggerBase.css +48 -42
- package/dist/SelectTriggerBase.module-DsPvTQE7.js +37 -0
- package/dist/SelectTriggerBase.module-DsPvTQE7.js.map +1 -0
- package/dist/{Switch-p4yVJTNy.js → Switch-onmiKoRd.js} +2 -2
- package/dist/{Switch-p4yVJTNy.js.map → Switch-onmiKoRd.js.map} +1 -1
- package/dist/Switch.js +1 -1
- package/dist/Table.js +1 -1
- package/dist/{Text-BgPuOXJM.js → Text-BTzgTpqu.js} +2 -2
- package/dist/{Text-BgPuOXJM.js.map → Text-BTzgTpqu.js.map} +1 -1
- package/dist/Text.js +1 -1
- package/dist/{TextField-DzuM8vvd.js → TextField-WTYZJlX3.js} +2 -2
- package/dist/{TextField-DzuM8vvd.js.map → TextField-WTYZJlX3.js.map} +1 -1
- package/dist/{TextField-D7NyaKId.js → TextField-rVfctM1E.js} +4 -4
- package/dist/{TextField-D7NyaKId.js.map → TextField-rVfctM1E.js.map} +1 -1
- package/dist/TextField.css +22 -58
- package/dist/TextField.js +1 -1
- package/dist/TextField.module-C8FsjTpx.js +23 -0
- package/dist/TextField.module-C8FsjTpx.js.map +1 -0
- package/dist/{Textarea-Dks15Zt3.js → Textarea-PXjppEQ6.js} +3 -3
- package/dist/{Textarea-Dks15Zt3.js.map → Textarea-PXjppEQ6.js.map} +1 -1
- package/dist/Textarea.js +1 -1
- package/dist/{TimeField-lN_5V6-X.js → TimeField-BJPXIv6W.js} +4 -4
- package/dist/{TimeField-lN_5V6-X.js.map → TimeField-BJPXIv6W.js.map} +1 -1
- package/dist/TimeField.js +1 -1
- package/dist/Toast.js +2 -2
- package/dist/{Toaster-3GI_qJxj.js → Toaster-CoChsMD0.js} +3 -3
- package/dist/{Toaster-3GI_qJxj.js.map → Toaster-CoChsMD0.js.map} +1 -1
- package/dist/{Toaster-2pAMQXRk.js → Toaster-DXLc86VD.js} +2 -2
- package/dist/{Toaster-2pAMQXRk.js.map → Toaster-DXLc86VD.js.map} +1 -1
- package/dist/{Toolbar-B0WHsX9W.js → Toolbar-BUd9eNkq.js} +6 -6
- package/dist/{Toolbar-B0WHsX9W.js.map → Toolbar-BUd9eNkq.js.map} +1 -1
- package/dist/{Toolbar-BRQpvj9U.js → Toolbar-Bt3kShho.js} +4 -4
- package/dist/{Toolbar-BRQpvj9U.js.map → Toolbar-Bt3kShho.js.map} +1 -1
- package/dist/Toolbar.js +2 -2
- package/dist/{ToolbarButtonToggle-xvMWRxzC.js → ToolbarButtonToggle-C06cqJ6F.js} +2 -2
- package/dist/{ToolbarButtonToggle-xvMWRxzC.js.map → ToolbarButtonToggle-C06cqJ6F.js.map} +1 -1
- package/dist/{Tooltip-DGo3OWqL.js → Tooltip-yr1D06BE.js} +5 -5
- package/dist/{Tooltip-DGo3OWqL.js.map → Tooltip-yr1D06BE.js.map} +1 -1
- package/dist/Tooltip.css +6 -7
- package/dist/Tooltip.js +1 -1
- package/dist/{YearlessDateInputWithPicker-BhbR5F22.js → YearlessDateInputWithPicker-BIcVgz-J.js} +3 -3
- package/dist/{YearlessDateInputWithPicker-BhbR5F22.js.map → YearlessDateInputWithPicker-BIcVgz-J.js.map} +1 -1
- package/dist/assets/icons/st/batch.svg +1 -1
- package/dist/assets/icons/st/call.svg +1 -1
- package/dist/assets/icons/st/customer.svg +1 -1
- package/dist/assets/icons/st/enterprise_hub.svg +1 -1
- package/dist/assets/icons/st/equipment.svg +1 -1
- package/dist/assets/icons/st/estimate.svg +1 -1
- package/dist/assets/icons/st/full_fluid.svg +1 -1
- package/dist/assets/icons/st/gnav_titan_advisor_active.svg +1 -1
- package/dist/assets/icons/st/gnav_titan_advisor_inactive.svg +1 -1
- package/dist/assets/icons/st/job.svg +1 -1
- package/dist/assets/icons/st/leads.svg +1 -1
- package/dist/assets/icons/st/proposal.svg +1 -1
- package/dist/assets/icons/st/roofing.svg +1 -1
- package/dist/beta.js +12 -12
- package/dist/{index-B6Demgr-.js → index-DVYRUKtW.js} +2 -2
- package/dist/{index-B6Demgr-.js.map → index-DVYRUKtW.js.map} +1 -1
- package/dist/index.js +39 -39
- package/dist/src/beta/components/FilterBar/FilterButton.d.ts +6 -3
- package/dist/src/beta/components/FilterBar/FilterDateList.d.ts +37 -0
- package/dist/src/beta/components/FilterBar/index.d.ts +1 -1
- package/dist/src/beta/components/FilterBar/internal/types.d.ts +40 -2
- package/dist/src/beta/components/FilterBar/internal/utils/dateListLibraryOptions.d.ts +29 -0
- package/dist/src/beta/components/FilterBar/internal/utils/filter-state.d.ts +2 -0
- package/dist/src/beta/components/FilterBar/internal/utils/test.d.ts +2 -1
- package/dist/src/beta/components/MultiSelectField/MultiSelectField.d.ts +1 -0
- package/dist/src/beta/components/MultiSelectField/internal/MultiSelectFieldComboboxMode.d.ts +1 -1
- package/dist/src/beta/components/MultiSelectField/internal/MultiSelectFieldSelectMode.d.ts +1 -1
- package/dist/src/beta/components/MultiSelectField/internal/types.d.ts +2 -1
- package/dist/src/beta/components/MultiSelectField/types.d.ts +2 -1
- package/dist/src/beta/components/MultiSelectMenu/MultiSelectMenu.d.ts +1 -0
- package/dist/src/beta/components/MultiSelectMenu/types.d.ts +2 -1
- package/dist/src/beta/components/SelectField/SelectField.d.ts +21 -0
- package/dist/src/beta/components/SelectField/internal/SelectFieldComboboxMode.d.ts +1 -1
- package/dist/src/beta/components/SelectField/internal/SelectFieldSelectMode.d.ts +1 -1
- package/dist/src/beta/components/SelectField/types.d.ts +2 -1
- package/dist/src/beta/components/SelectMenu/SelectMenu.d.ts +1 -0
- package/dist/src/beta/components/SelectMenu/types.d.ts +2 -1
- package/dist/src/internal/components/AddNewItemButton.d.ts +40 -0
- package/dist/src/internal/components/OptionsDialog/OptionsDialog.d.ts +3 -1
- package/dist/src/internal/components/OptionsPopover/OptionsPopover.d.ts +13 -1
- package/dist/src/internal/types/addNewItemTypes.d.ts +12 -0
- package/dist/src/internal/types/selectFieldInternalTypes.d.ts +2 -1
- package/dist/{stripInlineMarkdown-D_eHogvh.js → stripInlineMarkdown-C5DNxxwf.js} +2 -2
- package/dist/{stripInlineMarkdown-D_eHogvh.js.map → stripInlineMarkdown-C5DNxxwf.js.map} +1 -1
- package/dist/{syncFilterUtils-hlw11Ud8.js → syncFilterUtils-COxBIkt6.js} +271 -199
- package/dist/syncFilterUtils-COxBIkt6.js.map +1 -0
- package/dist/syncFilterUtils.css +44 -23
- package/dist/{useDrilldown-bIRsbg1m.js → useDrilldown-KZ9rRsXQ.js} +2 -2
- package/dist/{useDrilldown-bIRsbg1m.js.map → useDrilldown-KZ9rRsXQ.js.map} +1 -1
- package/dist/{useMenuInteraction-BwZ2ORo9.js → useMenuInteraction-C4RU5Fdq.js} +1 -5
- package/dist/useMenuInteraction-C4RU5Fdq.js.map +1 -0
- package/dist/{useToggleSelection-VwlBkdZo.js → useToggleSelection-B5PnTuT2.js} +2 -2
- package/dist/{useToggleSelection-VwlBkdZo.js.map → useToggleSelection-B5PnTuT2.js.map} +1 -1
- package/package.json +1 -1
- package/dist/AnvilProvider-JXEbeQjR.js.map +0 -1
- package/dist/Checkbox.module-DVbXNsaN.js +0 -28
- package/dist/Checkbox.module-DVbXNsaN.js.map +0 -1
- package/dist/FilterBar-BUfajdQU.js.map +0 -1
- package/dist/MultiSelectFieldSync-DXIBQABc.js.map +0 -1
- package/dist/MultiSelectMenuSync-CCINebbr.js.map +0 -1
- package/dist/SelectFieldSync-DqIDTKqt.js.map +0 -1
- package/dist/SelectMenuSync-DYPEX5wc.js.map +0 -1
- package/dist/SelectTriggerBase.module-CCLOnHm1.js +0 -37
- package/dist/SelectTriggerBase.module-CCLOnHm1.js.map +0 -1
- package/dist/TextField.module-DkZwywjf.js +0 -23
- package/dist/TextField.module-DkZwywjf.js.map +0 -1
- package/dist/syncFilterUtils-hlw11Ud8.js.map +0 -1
- package/dist/useMenuInteraction-BwZ2ORo9.js.map +0 -1
package/dist/RichTextEditor.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { R as RichTextEditor } from './RichTextEditor-
|
|
1
|
+
export { R as RichTextEditor } from './RichTextEditor-DstVbYch.js';
|
|
2
2
|
//# sourceMappingURL=RichTextEditor.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { S as SearchField$1 } from './SearchField-
|
|
2
|
+
import { S as SearchField$1 } from './SearchField-BcQZ5e0x.js';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
|
|
5
5
|
const SearchField = forwardRef(
|
|
@@ -10,4 +10,4 @@ const SearchField = forwardRef(
|
|
|
10
10
|
SearchField.displayName = "SearchField";
|
|
11
11
|
|
|
12
12
|
export { SearchField as S };
|
|
13
|
-
//# sourceMappingURL=SearchField-
|
|
13
|
+
//# sourceMappingURL=SearchField-3tUPU8hH.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField-
|
|
1
|
+
{"version":3,"file":"SearchField-3tUPU8hH.js","sources":["../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import {\n SearchField as CoreSearchField,\n SearchFieldProps as CoreSearchFieldProps,\n} from \"./internal/SearchField\";\nimport { forwardRef } from \"react\";\nimport { DistributiveOmit } 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 = DistributiveOmit<\n CoreSearchFieldProps,\n \"size\"\n> & {\n /**\n * Size of the search field\n * @default \"medium\"\n */\n size?: Extract<CoreSearchFieldProps[\"size\"], \"small\" | \"medium\" | \"large\">;\n};\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 * - Arrow key navigation between input and clear button (Right arrow to clear button, Left arrow back to input)\n * - Clear button activated with Enter/Space keys\n * - Focus returns to input after clearing\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 (props, ref) => {\n return <CoreSearchField ref={ref} {...props} />;\n },\n);\nSearchField.displayName = \"SearchField\";\n"],"names":["CoreSearchField"],"mappings":";;;;AAyDO,MAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,uBAAO,GAAA,CAACA,aAAA,EAAA,EAAgB,GAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAAA,EAC/C;AACF;AACA,WAAA,CAAY,WAAA,GAAc,aAAA;;;;"}
|
|
@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { forwardRef, useState, useId, useRef, useEffect } from 'react';
|
|
4
4
|
import { c as cx } from './index-De1g9FRV.js';
|
|
5
|
-
import { t as textFieldStyles } from './TextField.module-
|
|
5
|
+
import { t as textFieldStyles } from './TextField.module-C8FsjTpx.js';
|
|
6
6
|
import { S as SvgClose } from './close-DZj38AEh.js';
|
|
7
7
|
import { S as SrOnly } from './SrOnly-pnf8ajnh.js';
|
|
8
8
|
import { I as Icon } from './Icon-feeG7gXA.js';
|
|
@@ -182,4 +182,4 @@ const SearchField = forwardRef(
|
|
|
182
182
|
);
|
|
183
183
|
|
|
184
184
|
export { SearchField as S, SvgSearch as a };
|
|
185
|
-
//# sourceMappingURL=SearchField-
|
|
185
|
+
//# sourceMappingURL=SearchField-BcQZ5e0x.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField-CO9BHCYB.js","sources":["../../hammer-icon/mdi/round/search.svg","../src/components/SearchField/internal/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 KeyboardEvent,\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, \"xsmall\" | \"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 or activated via keyboard (Enter/Space)\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 * - Arrow key navigation between input and clear button (Right arrow to clear button, Left arrow back to input)\n * - Clear button activated with Enter/Space keys\n * - Focus returns to input after clearing\n * - Multiple size variants (xsmall, 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 inputRef.current.focus();\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 inputRef.current.focus();\n };\n\n const handleClearKeyDown = (e: KeyboardEvent<HTMLSpanElement>) => {\n if (e.code === \"Enter\" || e.code === \"Space\") {\n e.preventDefault();\n handleClear();\n } else if (e.code === \"ArrowLeft\") {\n e.preventDefault();\n inputRef.current?.focus();\n }\n };\n\n const handleInputKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.code === \"ArrowRight\" && hasValue) {\n const input = e.currentTarget;\n if (input.selectionStart === input.value.length) {\n e.preventDefault();\n const clearButton = input.parentElement?.querySelector(\n '[role=\"button\"]',\n ) as HTMLElement;\n clearButton?.focus();\n }\n }\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[\"xsmall\"]]: size === \"xsmall\",\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\"], styles[\"input\"], {\n [styles[\"input--has-value\"]]: hasValue,\n })}\n ref={useMergeRefs([ref, inputRef])}\n onChange={handleOnChange}\n onKeyDown={handleInputKeyDown}\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=\"Clear search\"\n svg={Close}\n role=\"button\"\n onClick={handleClear}\n onKeyDown={handleClearKeyDown}\n tabIndex={-1}\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-BcQZ5e0x.js","sources":["../../hammer-icon/mdi/round/search.svg","../src/components/SearchField/internal/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 KeyboardEvent,\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, \"xsmall\" | \"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 or activated via keyboard (Enter/Space)\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 * - Arrow key navigation between input and clear button (Right arrow to clear button, Left arrow back to input)\n * - Clear button activated with Enter/Space keys\n * - Focus returns to input after clearing\n * - Multiple size variants (xsmall, 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 inputRef.current.focus();\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 inputRef.current.focus();\n };\n\n const handleClearKeyDown = (e: KeyboardEvent<HTMLSpanElement>) => {\n if (e.code === \"Enter\" || e.code === \"Space\") {\n e.preventDefault();\n handleClear();\n } else if (e.code === \"ArrowLeft\") {\n e.preventDefault();\n inputRef.current?.focus();\n }\n };\n\n const handleInputKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.code === \"ArrowRight\" && hasValue) {\n const input = e.currentTarget;\n if (input.selectionStart === input.value.length) {\n e.preventDefault();\n const clearButton = input.parentElement?.querySelector(\n '[role=\"button\"]',\n ) as HTMLElement;\n clearButton?.focus();\n }\n }\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[\"xsmall\"]]: size === \"xsmall\",\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\"], styles[\"input\"], {\n [styles[\"input--has-value\"]]: hasValue,\n })}\n ref={useMergeRefs([ref, inputRef])}\n onChange={handleOnChange}\n onKeyDown={handleInputKeyDown}\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=\"Clear search\"\n svg={Close}\n role=\"button\"\n onClick={handleClear}\n onKeyDown={handleClearKeyDown}\n tabIndex={-1}\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-3tUPU8hH.js';
|
|
2
2
|
//# sourceMappingURL=SearchField.js.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { useContext, createContext, useState, useMemo, useId, forwardRef, useLayoutEffect, useRef } from 'react';
|
|
3
3
|
import { c as cx } from './index-De1g9FRV.js';
|
|
4
|
-
import { a as CheckboxGroup, C as Checkbox } from './Checkbox-
|
|
5
|
-
import { a as RadioGroup, R as Radio, S as SvgRadioButtonChecked, b as SvgRadioButtonUnchecked } from './Radio-
|
|
4
|
+
import { a as CheckboxGroup, C as Checkbox } from './Checkbox-BB3BDJsK.js';
|
|
5
|
+
import { a as RadioGroup, R as Radio, S as SvgRadioButtonChecked, b as SvgRadioButtonUnchecked } from './Radio-D5WyQN2i.js';
|
|
6
6
|
import { C as Card } from './Card-fBqg853U.js';
|
|
7
7
|
import { I as Icon } from './Icon-feeG7gXA.js';
|
|
8
8
|
import { S as SvgCheckBox, a as SvgCheckBoxOutlineBlank } from './check_box-0U1tbEAd.js';
|
|
@@ -348,4 +348,4 @@ const SelectCard = Object.assign(SelectCardElement, {
|
|
|
348
348
|
});
|
|
349
349
|
|
|
350
350
|
export { SelectCard as S };
|
|
351
|
-
//# sourceMappingURL=SelectCard-
|
|
351
|
+
//# sourceMappingURL=SelectCard-BN-LI14f.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectCard-CLCLIBoq.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 /**\n * When `true`, indicates that selection is controlled at the group level via the `value` prop.\n * @default false\n */\n isGroupControlled?: boolean;\n\n /**\n * When `true`, the group was given a `defaultValue` and owns the initial selection state.\n * Individual `SelectCard` mount syncs should be skipped to avoid overriding it.\n * @default false\n */\n hasGroupDefault?: boolean;\n\n /**\n * When `true`, displays a checkbox or radio indicator in a separate column on the left side of the card.\n * The indicator type (checkbox or radio) is automatically determined by the selection mode from SelectCard.Group context.\n * @default false\n */\n showSelectIndicator?: boolean;\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, useMemo, 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 extends Omit<\n ISelectCardContext,\n \"radioName\" | \"selection\"\n> {\n children: ReactNode;\n\n /**\n * Controlled selection state. When provided, the group becomes controlled.\n * Array of `SelectCard` ids that are currently selected.\n */\n value?: Array<string | number>;\n\n /**\n * Initial selection state for uncontrolled usage.\n * Array of `SelectCard` ids that are selected on first render.\n */\n defaultValue?: Array<string | number>;\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 defaultValue,\n onChange,\n selectionMode,\n showSelectIndicator,\n value,\n}: ISelectCardProviderProps) => {\n const isControlled = value !== undefined;\n const [internalSelection, setInternalSelection] = useState<\n Set<string | number>\n >(() => {\n const ids = defaultValue ?? [];\n return new Set(selectionMode === \"single\" ? ids.slice(0, 1) : ids);\n });\n const selection = useMemo(() => {\n if (!isControlled) return internalSelection;\n const ids = value ?? [];\n return new Set(selectionMode === \"single\" ? ids.slice(0, 1) : ids);\n }, [isControlled, value, internalSelection, selectionMode]);\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 // Update internal selection when uncontrolled\n if (!isControlled) {\n if (selectionMode === \"single\") {\n setInternalSelection(state.checked ? new Set([state.id]) : new Set());\n } else {\n setInternalSelection((prev) => {\n const next = new Set(prev);\n if (state.checked) {\n next.add(state.id!);\n } else {\n next.delete(state.id!);\n }\n return next;\n });\n }\n }\n\n if (!options?.internal) {\n onChange?.(e, state);\n }\n };\n\n const context = {\n hasGroupDefault: defaultValue !== undefined,\n isGroupControlled: isControlled,\n selectionMode,\n onChange: handleChange,\n radioName,\n selection,\n showSelectIndicator,\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/RadioGroup\";\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\n Omit<ISelectCardContext, \"radioName\" | \"selection\">,\n Pick<CheckboxGroupProps, \"moreInfo\"> {\n /**\n * Associates the legend with content below.\n */\n ariaLabelledBy?: string;\n\n children?: ReactNode;\n\n /**\n * Initial selection state for uncontrolled usage.\n * Array of `SelectCard` ids that are selected on first render.\n * Takes precedence over individual `SelectCard` `defaultChecked` props.\n */\n defaultValue?: Array<string | number>;\n\n /**\n * Sets the legend on the group.\n */\n legend: CheckboxGroupProps[\"legend\"];\n\n /**\n * Additional props for the legend `FieldLabel` (for example `aiMark`, `className`).\n */\n legendProps?: CheckboxGroupProps[\"legendProps\"];\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 * When `true`, displays a checkbox or radio indicator in a separate column on the left side of the card.\n * The indicator type (checkbox or radio) is automatically determined by the `selectionMode` setting.\n * @default false\n */\n showSelectIndicator?: boolean;\n\n /**\n * Controlled selection state. When provided, the group becomes controlled.\n * Array of `SelectCard` ids that are currently selected.\n */\n value?: Array<string | number>;\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 * - Supports AI mark indicator\n *\n * @example\n * <SelectCardGroup\n * legend=\"Choose your plan\"\n * selectionMode=\"single\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * legendProps={{ aiMark: true }}\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 defaultValue,\n legend,\n legendProps,\n moreInfo,\n onChange,\n required = false,\n selectionMode,\n showSelectIndicator = false,\n value,\n ...rest\n } = props;\n\n return (\n <SelectCardProvider\n defaultValue={defaultValue}\n onChange={onChange}\n selectionMode={selectionMode}\n showSelectIndicator={showSelectIndicator}\n value={value}\n >\n {selectionMode === \"multiple\" && (\n <CheckboxGroup\n aria-labelledby={ariaLabelledBy}\n legend={legend}\n legendProps={legendProps}\n required={required}\n moreInfo={moreInfo}\n {...rest}\n >\n {children}\n </CheckboxGroup>\n )}\n {selectionMode === \"single\" && (\n <RadioGroup\n aria-labelledby={ariaLabelledBy}\n legend={legend}\n legendProps={legendProps}\n required={required}\n moreInfo={moreInfo}\n {...rest}\n >\n {children}\n </RadioGroup>\n )}\n </SelectCardProvider>\n );\n});\n\nSelectCardGroup.displayName = \"SelectCardGroup\";\n","import {\n useLayoutEffect,\n useState,\n useRef,\n forwardRef,\n type ChangeEvent,\n} 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\";\nimport { useSelectCardContext } from \"./internal/SelectCardContext\";\nimport { Icon } from \"../Icon\";\n\nimport CheckboxOutline from \"@servicetitan/hammer-icon/mdi/round/check_box_outline_blank.svg\";\nimport CheckboxChecked from \"@servicetitan/hammer-icon/mdi/round/check_box.svg\";\nimport RadioOutline from \"@servicetitan/hammer-icon/mdi/two-tone/radio_button_unchecked.svg\";\nimport RadioChecked from \"@servicetitan/hammer-icon/mdi/two-tone/radio_button_checked.svg\";\n\nimport styles from \"./SelectCard.module.scss\";\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 initial state. Ignored when inside a `SelectCard.Group` that sets `defaultValue`.\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 /**\n * When `true`, displays a checkbox or radio indicator in a separate column on the left side of the card.\n * The indicator type (checkbox or radio) is automatically determined by the `selectionMode` prop on the\n * `SelectCard.Group`, and defaults to checkbox if no `SelectCard.Group` is used.\n * @default false\n */\n showSelectIndicator?: boolean;\n}\n\nconst 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 showSelectIndicator = false,\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 const isCardControlled = checkedProp !== undefined;\n const isGroupControlled = context?.isGroupControlled ?? false;\n\n // we need to re-render after setting the initial selection state on context\n const [_, setForceRenderCount] = useState(0);\n useLayoutEffect(() => {\n // Sync initial checked state to context (for both controlled and uncontrolled modes).\n // Skip when group is controlled — the group's value prop owns the selection Set.\n const initialChecked = checkedProp ?? defaultCheckedProp;\n if (initialChecked && !isGroupControlled && !context?.hasGroupDefault) {\n context?.onChange?.(\n undefined,\n {\n id,\n checked: initialChecked,\n },\n { internal: true },\n );\n\n setForceRenderCount((prev) => prev + 1);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Sync controlled state changes to context (skip initial mount - handled by above effect)\n const isFirstRender = useRef(true);\n useLayoutEffect(() => {\n if (isFirstRender.current) {\n isFirstRender.current = false;\n return;\n }\n if (isCardControlled && context) {\n // In single selection mode, only sync when checked is true.\n // Unchecking is implicit when another card becomes checked.\n // Syncing checked=false would clear the entire selection.\n if (context.selectionMode === \"single\" && !checkedProp) {\n return;\n }\n context.onChange?.(\n undefined,\n {\n id,\n checked: checkedProp!,\n },\n { internal: true },\n );\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [checkedProp]);\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 const showIndicator = context?.showSelectIndicator || showSelectIndicator;\n\n // When group is controlled (value prop), drive input from context selection.\n // When group has defaultValue, it takes precedence — ignore individual defaultChecked.\n const inputChecked = isGroupControlled\n ? isChecked\n : isCardControlled\n ? checkedProp\n : undefined;\n const inputDefaultChecked =\n isGroupControlled || isCardControlled\n ? undefined\n : context?.hasGroupDefault\n ? context.selection.has(id)\n : defaultCheckedProp;\n\n const contentClassName = cx(styles[\"select-card\"], className, {\n [styles[\"select-card--remove-drop-shadow\"]]: removeDropShadow,\n [styles[\"select-card--checked\"]]: isChecked,\n [styles[\"select-card--selected\"]]: isChecked && !errored,\n [styles[\"select-card--errored\"]]: errored,\n [styles[\"select-card--disabled\"]]: disabled,\n });\n\n const iconClassNames = cx({\n [styles[\"icon-checked\"]]: isChecked && !errored && !disabled,\n [styles[\"icon-unchecked\"]]: !isChecked && !disabled,\n [styles[\"icon-checked-error\"]]: errored && !disabled,\n [styles[\"icon-checked-disabled\"]]: disabled,\n });\n\n return (\n <>\n {(!context || context?.selectionMode === \"multiple\") && (\n <Checkbox\n {...checkboxProps}\n className={cx(\n styles[\"select-card-wrapper\"],\n checkboxProps?.className,\n {\n [styles[\"select-card-checkbox-unchecked\"]]:\n !isChecked && !errored,\n [styles[\"select-card-checkbox-checked\"]]: isChecked && !errored,\n [styles[\"select-card-checkbox-error\"]]: errored,\n },\n )}\n labelWrapperClassName={styles[\"select-card-label\"]}\n checked={inputChecked}\n defaultChecked={inputDefaultChecked}\n onChange={handleChange}\n disabled={disabled}\n ref={ref}\n label={\n <Card\n {...rest}\n className={contentClassName}\n flex={showIndicator ? \"1\" : undefined}\n gap={showIndicator ? \"2\" : undefined}\n alignItems={showIndicator ? \"flex-start\" : undefined}\n >\n {showIndicator ? (\n <>\n <span className={styles[\"icon-wrapper\"]} aria-hidden>\n <Icon\n size=\"large\"\n svg={isChecked ? CheckboxChecked : CheckboxOutline}\n className={iconClassNames}\n />\n </span>\n {children}\n </>\n ) : (\n children\n )}\n </Card>\n }\n hideCheckbox\n />\n )}\n {context?.selectionMode === \"single\" && (\n <Radio\n {...radioProps}\n className={cx(\n styles[\"select-card-wrapper\"],\n radioProps?.className,\n {\n [styles[\"select-card-checkbox-unchecked\"]]:\n !isChecked && !errored,\n [styles[\"select-card-checkbox-checked\"]]: isChecked && !errored,\n [styles[\"select-card-checkbox-error\"]]: errored,\n },\n )}\n labelWrapperClassName={styles[\"select-card-label\"]}\n checked={inputChecked}\n defaultChecked={inputDefaultChecked}\n onChange={handleChange}\n disabled={disabled}\n ref={ref}\n name={context.radioName}\n label={\n <Card\n {...rest}\n className={contentClassName}\n flex={showIndicator ? \"1\" : undefined}\n gap={showIndicator ? \"2\" : undefined}\n alignItems={showIndicator ? \"flex-start\" : undefined}\n >\n {showIndicator ? (\n <>\n <span className={styles[\"icon-wrapper\"]} aria-hidden>\n <Icon\n size=\"large\"\n svg={isChecked ? RadioChecked : RadioOutline}\n className={iconClassNames}\n />\n </span>\n {children}\n </>\n ) : (\n children\n )}\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":["CheckboxChecked","CheckboxOutline","RadioChecked","RadioOutline"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelectCard-BN-LI14f.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 /**\n * When `true`, indicates that selection is controlled at the group level via the `value` prop.\n * @default false\n */\n isGroupControlled?: boolean;\n\n /**\n * When `true`, the group was given a `defaultValue` and owns the initial selection state.\n * Individual `SelectCard` mount syncs should be skipped to avoid overriding it.\n * @default false\n */\n hasGroupDefault?: boolean;\n\n /**\n * When `true`, displays a checkbox or radio indicator in a separate column on the left side of the card.\n * The indicator type (checkbox or radio) is automatically determined by the selection mode from SelectCard.Group context.\n * @default false\n */\n showSelectIndicator?: boolean;\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, useMemo, 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 extends Omit<\n ISelectCardContext,\n \"radioName\" | \"selection\"\n> {\n children: ReactNode;\n\n /**\n * Controlled selection state. When provided, the group becomes controlled.\n * Array of `SelectCard` ids that are currently selected.\n */\n value?: Array<string | number>;\n\n /**\n * Initial selection state for uncontrolled usage.\n * Array of `SelectCard` ids that are selected on first render.\n */\n defaultValue?: Array<string | number>;\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 defaultValue,\n onChange,\n selectionMode,\n showSelectIndicator,\n value,\n}: ISelectCardProviderProps) => {\n const isControlled = value !== undefined;\n const [internalSelection, setInternalSelection] = useState<\n Set<string | number>\n >(() => {\n const ids = defaultValue ?? [];\n return new Set(selectionMode === \"single\" ? ids.slice(0, 1) : ids);\n });\n const selection = useMemo(() => {\n if (!isControlled) return internalSelection;\n const ids = value ?? [];\n return new Set(selectionMode === \"single\" ? ids.slice(0, 1) : ids);\n }, [isControlled, value, internalSelection, selectionMode]);\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 // Update internal selection when uncontrolled\n if (!isControlled) {\n if (selectionMode === \"single\") {\n setInternalSelection(state.checked ? new Set([state.id]) : new Set());\n } else {\n setInternalSelection((prev) => {\n const next = new Set(prev);\n if (state.checked) {\n next.add(state.id!);\n } else {\n next.delete(state.id!);\n }\n return next;\n });\n }\n }\n\n if (!options?.internal) {\n onChange?.(e, state);\n }\n };\n\n const context = {\n hasGroupDefault: defaultValue !== undefined,\n isGroupControlled: isControlled,\n selectionMode,\n onChange: handleChange,\n radioName,\n selection,\n showSelectIndicator,\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/RadioGroup\";\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\n Omit<ISelectCardContext, \"radioName\" | \"selection\">,\n Pick<CheckboxGroupProps, \"moreInfo\"> {\n /**\n * Associates the legend with content below.\n */\n ariaLabelledBy?: string;\n\n children?: ReactNode;\n\n /**\n * Initial selection state for uncontrolled usage.\n * Array of `SelectCard` ids that are selected on first render.\n * Takes precedence over individual `SelectCard` `defaultChecked` props.\n */\n defaultValue?: Array<string | number>;\n\n /**\n * Sets the legend on the group.\n */\n legend: CheckboxGroupProps[\"legend\"];\n\n /**\n * Additional props for the legend `FieldLabel` (for example `aiMark`, `className`).\n */\n legendProps?: CheckboxGroupProps[\"legendProps\"];\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 * When `true`, displays a checkbox or radio indicator in a separate column on the left side of the card.\n * The indicator type (checkbox or radio) is automatically determined by the `selectionMode` setting.\n * @default false\n */\n showSelectIndicator?: boolean;\n\n /**\n * Controlled selection state. When provided, the group becomes controlled.\n * Array of `SelectCard` ids that are currently selected.\n */\n value?: Array<string | number>;\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 * - Supports AI mark indicator\n *\n * @example\n * <SelectCardGroup\n * legend=\"Choose your plan\"\n * selectionMode=\"single\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * legendProps={{ aiMark: true }}\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 defaultValue,\n legend,\n legendProps,\n moreInfo,\n onChange,\n required = false,\n selectionMode,\n showSelectIndicator = false,\n value,\n ...rest\n } = props;\n\n return (\n <SelectCardProvider\n defaultValue={defaultValue}\n onChange={onChange}\n selectionMode={selectionMode}\n showSelectIndicator={showSelectIndicator}\n value={value}\n >\n {selectionMode === \"multiple\" && (\n <CheckboxGroup\n aria-labelledby={ariaLabelledBy}\n legend={legend}\n legendProps={legendProps}\n required={required}\n moreInfo={moreInfo}\n {...rest}\n >\n {children}\n </CheckboxGroup>\n )}\n {selectionMode === \"single\" && (\n <RadioGroup\n aria-labelledby={ariaLabelledBy}\n legend={legend}\n legendProps={legendProps}\n required={required}\n moreInfo={moreInfo}\n {...rest}\n >\n {children}\n </RadioGroup>\n )}\n </SelectCardProvider>\n );\n});\n\nSelectCardGroup.displayName = \"SelectCardGroup\";\n","import {\n useLayoutEffect,\n useState,\n useRef,\n forwardRef,\n type ChangeEvent,\n} 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\";\nimport { useSelectCardContext } from \"./internal/SelectCardContext\";\nimport { Icon } from \"../Icon\";\n\nimport CheckboxOutline from \"@servicetitan/hammer-icon/mdi/round/check_box_outline_blank.svg\";\nimport CheckboxChecked from \"@servicetitan/hammer-icon/mdi/round/check_box.svg\";\nimport RadioOutline from \"@servicetitan/hammer-icon/mdi/two-tone/radio_button_unchecked.svg\";\nimport RadioChecked from \"@servicetitan/hammer-icon/mdi/two-tone/radio_button_checked.svg\";\n\nimport styles from \"./SelectCard.module.scss\";\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 initial state. Ignored when inside a `SelectCard.Group` that sets `defaultValue`.\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 /**\n * When `true`, displays a checkbox or radio indicator in a separate column on the left side of the card.\n * The indicator type (checkbox or radio) is automatically determined by the `selectionMode` prop on the\n * `SelectCard.Group`, and defaults to checkbox if no `SelectCard.Group` is used.\n * @default false\n */\n showSelectIndicator?: boolean;\n}\n\nconst 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 showSelectIndicator = false,\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 const isCardControlled = checkedProp !== undefined;\n const isGroupControlled = context?.isGroupControlled ?? false;\n\n // we need to re-render after setting the initial selection state on context\n const [_, setForceRenderCount] = useState(0);\n useLayoutEffect(() => {\n // Sync initial checked state to context (for both controlled and uncontrolled modes).\n // Skip when group is controlled — the group's value prop owns the selection Set.\n const initialChecked = checkedProp ?? defaultCheckedProp;\n if (initialChecked && !isGroupControlled && !context?.hasGroupDefault) {\n context?.onChange?.(\n undefined,\n {\n id,\n checked: initialChecked,\n },\n { internal: true },\n );\n\n setForceRenderCount((prev) => prev + 1);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Sync controlled state changes to context (skip initial mount - handled by above effect)\n const isFirstRender = useRef(true);\n useLayoutEffect(() => {\n if (isFirstRender.current) {\n isFirstRender.current = false;\n return;\n }\n if (isCardControlled && context) {\n // In single selection mode, only sync when checked is true.\n // Unchecking is implicit when another card becomes checked.\n // Syncing checked=false would clear the entire selection.\n if (context.selectionMode === \"single\" && !checkedProp) {\n return;\n }\n context.onChange?.(\n undefined,\n {\n id,\n checked: checkedProp!,\n },\n { internal: true },\n );\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [checkedProp]);\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 const showIndicator = context?.showSelectIndicator || showSelectIndicator;\n\n // When group is controlled (value prop), drive input from context selection.\n // When group has defaultValue, it takes precedence — ignore individual defaultChecked.\n const inputChecked = isGroupControlled\n ? isChecked\n : isCardControlled\n ? checkedProp\n : undefined;\n const inputDefaultChecked =\n isGroupControlled || isCardControlled\n ? undefined\n : context?.hasGroupDefault\n ? context.selection.has(id)\n : defaultCheckedProp;\n\n const contentClassName = cx(styles[\"select-card\"], className, {\n [styles[\"select-card--remove-drop-shadow\"]]: removeDropShadow,\n [styles[\"select-card--checked\"]]: isChecked,\n [styles[\"select-card--selected\"]]: isChecked && !errored,\n [styles[\"select-card--errored\"]]: errored,\n [styles[\"select-card--disabled\"]]: disabled,\n });\n\n const iconClassNames = cx({\n [styles[\"icon-checked\"]]: isChecked && !errored && !disabled,\n [styles[\"icon-unchecked\"]]: !isChecked && !disabled,\n [styles[\"icon-checked-error\"]]: errored && !disabled,\n [styles[\"icon-checked-disabled\"]]: disabled,\n });\n\n return (\n <>\n {(!context || context?.selectionMode === \"multiple\") && (\n <Checkbox\n {...checkboxProps}\n className={cx(\n styles[\"select-card-wrapper\"],\n checkboxProps?.className,\n {\n [styles[\"select-card-checkbox-unchecked\"]]:\n !isChecked && !errored,\n [styles[\"select-card-checkbox-checked\"]]: isChecked && !errored,\n [styles[\"select-card-checkbox-error\"]]: errored,\n },\n )}\n labelWrapperClassName={styles[\"select-card-label\"]}\n checked={inputChecked}\n defaultChecked={inputDefaultChecked}\n onChange={handleChange}\n disabled={disabled}\n ref={ref}\n label={\n <Card\n {...rest}\n className={contentClassName}\n flex={showIndicator ? \"1\" : undefined}\n gap={showIndicator ? \"2\" : undefined}\n alignItems={showIndicator ? \"flex-start\" : undefined}\n >\n {showIndicator ? (\n <>\n <span className={styles[\"icon-wrapper\"]} aria-hidden>\n <Icon\n size=\"large\"\n svg={isChecked ? CheckboxChecked : CheckboxOutline}\n className={iconClassNames}\n />\n </span>\n {children}\n </>\n ) : (\n children\n )}\n </Card>\n }\n hideCheckbox\n />\n )}\n {context?.selectionMode === \"single\" && (\n <Radio\n {...radioProps}\n className={cx(\n styles[\"select-card-wrapper\"],\n radioProps?.className,\n {\n [styles[\"select-card-checkbox-unchecked\"]]:\n !isChecked && !errored,\n [styles[\"select-card-checkbox-checked\"]]: isChecked && !errored,\n [styles[\"select-card-checkbox-error\"]]: errored,\n },\n )}\n labelWrapperClassName={styles[\"select-card-label\"]}\n checked={inputChecked}\n defaultChecked={inputDefaultChecked}\n onChange={handleChange}\n disabled={disabled}\n ref={ref}\n name={context.radioName}\n label={\n <Card\n {...rest}\n className={contentClassName}\n flex={showIndicator ? \"1\" : undefined}\n gap={showIndicator ? \"2\" : undefined}\n alignItems={showIndicator ? \"flex-start\" : undefined}\n >\n {showIndicator ? (\n <>\n <span className={styles[\"icon-wrapper\"]} aria-hidden>\n <Icon\n size=\"large\"\n svg={isChecked ? RadioChecked : RadioOutline}\n className={iconClassNames}\n />\n </span>\n {children}\n </>\n ) : (\n children\n )}\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":["CheckboxChecked","CheckboxOutline","RadioChecked","RadioOutline"],"mappings":"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"}
|
package/dist/SelectCard.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { S as SelectCard, S as default } from './SelectCard-
|
|
1
|
+
export { S as SelectCard, S as default } from './SelectCard-BN-LI14f.js';
|
|
2
2
|
//# sourceMappingURL=SelectCard.js.map
|
package/dist/SelectField.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-
|
|
1
|
+
export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-BeDYbJ2M.js';
|
|
2
2
|
//# sourceMappingURL=SelectField.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { F as FieldLabel } from './FieldLabel-
|
|
2
|
+
import { F as FieldLabel } from './FieldLabel-D1qPAGtB.js';
|
|
3
3
|
import { S as SrOnly } from './SrOnly-pnf8ajnh.js';
|
|
4
4
|
|
|
5
5
|
const SelectFieldLabel = ({
|
|
@@ -31,4 +31,4 @@ const SelectFieldLabel = ({
|
|
|
31
31
|
};
|
|
32
32
|
|
|
33
33
|
export { SelectFieldLabel as S };
|
|
34
|
-
//# sourceMappingURL=SelectFieldLabel-
|
|
34
|
+
//# sourceMappingURL=SelectFieldLabel-UbQT7fDD.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectFieldLabel-
|
|
1
|
+
{"version":3,"file":"SelectFieldLabel-UbQT7fDD.js","sources":["../src/beta/components/SelectField/internal/SelectFieldLabel.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { FieldLabel, FieldLabelProps } from \"../../../../components/FieldLabel\";\nimport { SrOnly } from \"../../../../components/SrOnly\";\n\ntype GetLabelProps = (options?: object) => { id: string; htmlFor: string };\n\n/**\n * Props for the SelectFieldLabel component\n * @property {AiMarkWithTooltipOrPopoverProps} aiMark - The AI mark to display\n * @property {string} label - The text content to display as the label\n * @property {GetLabelProps} getLabelProps - Downshift getter function that returns accessibility props for the label\n * @property {boolean} [required] - Whether the field is required. Shows a red asterisk (*) when true.\n * @property {ReactNode} [moreInfo] - Additional information to display in a tooltip\n * @property {string} [moreInfoId] - ID for the sr-only description span, referenced via aria-describedby on the associated input\n * @property {boolean} [moreInfoOpen] - Controls the open state of the more info tooltip\n * @property {boolean} [hideLabel] - Visually hides the label while keeping it accessible to screen readers\n */\nexport type SelectFieldLabelProps = {\n aiMark?: FieldLabelProps[\"aiMark\"];\n label: string;\n getLabelProps: GetLabelProps;\n hideLabel?: boolean;\n moreInfo?: ReactNode;\n moreInfoId?: string;\n moreInfoOpen?: boolean;\n required?: boolean;\n};\n\n/**\n * Internal label component for the SelectField that renders an accessible label element.\n *\n * Features:\n * - Renders a FieldLabel with proper accessibility attributes from Downshift\n * - Automatically associates the label with the combobox input\n * - Supports screen readers with proper labeling\n * - Optional required field indicator with red asterisk\n * - Help tooltip with info icon for additional context\n * - Can visually hide the label while maintaining accessibility\n *\n * @example\n * <SelectFieldLabel\n * label=\"Select an option\"\n * getLabelProps={getLabelProps}\n * required\n * moreInfo=\"Choose from available options\"\n * />\n */\nexport const SelectFieldLabel = ({\n aiMark,\n label,\n getLabelProps,\n hideLabel = false,\n moreInfo,\n moreInfoId,\n moreInfoOpen,\n required,\n}: SelectFieldLabelProps) => {\n const labelContent = (\n <FieldLabel\n {...getLabelProps()}\n aiMark={aiMark}\n required={required}\n moreInfo={moreInfo}\n moreInfoId={moreInfoId}\n moreInfoOpen={moreInfoOpen}\n >\n {label}\n </FieldLabel>\n );\n\n if (hideLabel) {\n return <SrOnly>{labelContent}</SrOnly>;\n }\n\n return labelContent;\n};\n"],"names":[],"mappings":";;;;AA+CO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,MAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,QAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,KAA6B;AAC3B,EAAA,MAAM,YAAA,mBACJ,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,aAAA,EAAc;AAAA,MAClB,MAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MAEC,QAAA,EAAA;AAAA;AAAA,GACH;AAGF,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,uBAAO,GAAA,CAAC,UAAQ,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,EAC/B;AAEA,EAAA,OAAO,YAAA;AACT;;;;"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useState, useMemo, useRef, useCallback, useEffect, forwardRef, useId } from 'react';
|
|
3
3
|
import { w as warnDeprecatedErrorUsage } from './utils-CM48ODEJ.js';
|
|
4
|
-
import { S as SelectOptions } from './SelectOptions-
|
|
5
|
-
import { s as styles } from './SelectTriggerBase.module-
|
|
4
|
+
import { S as SelectOptions } from './SelectOptions-Tr11Ckqw.js';
|
|
5
|
+
import { s as styles } from './SelectTriggerBase.module-DsPvTQE7.js';
|
|
6
6
|
import { c as cx } from './index-De1g9FRV.js';
|
|
7
7
|
import { B as Button } from './Button-C_V2xQAs.js';
|
|
8
8
|
import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
|
|
9
9
|
import { S as SvgClose } from './close-DZj38AEh.js';
|
|
10
|
-
import { S as SelectFieldLabel } from './SelectFieldLabel-
|
|
10
|
+
import { S as SelectFieldLabel } from './SelectFieldLabel-UbQT7fDD.js';
|
|
11
11
|
import { u as useDownshiftEnvironment, a as useCombobox, b as useSelect } from './downshift.esm-xtSnQp44.js';
|
|
12
|
-
import { b as useProcessedOptions, c as buildSelectItems, h as toSelectItem, d as useDebouncedCallback, e as OptionsDialog, f as OptionsPopover, a as useSelectOrchestration, g as defaultSyncFilter, t as toSyncFilterFn, s as sortByGroup } from './syncFilterUtils-
|
|
12
|
+
import { b as useProcessedOptions, c as buildSelectItems, h as toSelectItem, d as useDebouncedCallback, e as OptionsDialog, f as OptionsPopover, A as AddNewItemButton, a as useSelectOrchestration, g as defaultSyncFilter, t as toSyncFilterFn, s as sortByGroup } from './syncFilterUtils-COxBIkt6.js';
|
|
13
13
|
import { F as FieldMessage } from './FieldMessage-mTGdycSA.js';
|
|
14
14
|
import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
|
|
15
15
|
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
|
|
@@ -289,7 +289,9 @@ const SelectFieldComboboxMode = ({
|
|
|
289
289
|
initialLoadPerformed,
|
|
290
290
|
setInitialLoadPerformed,
|
|
291
291
|
inputWrapperRef,
|
|
292
|
-
debounceMs
|
|
292
|
+
debounceMs,
|
|
293
|
+
addItemLabel,
|
|
294
|
+
onAddNewItem
|
|
293
295
|
}) => {
|
|
294
296
|
const listRef = useRef(null);
|
|
295
297
|
const debouncedOptionLoader = useDebouncedCallback((inputValue2) => {
|
|
@@ -360,6 +362,15 @@ const SelectFieldComboboxMode = ({
|
|
|
360
362
|
const handleLoadMore = async () => {
|
|
361
363
|
await loadMore(adjustInputValueForSelectedOption(inputValue));
|
|
362
364
|
};
|
|
365
|
+
const addNewItemButton = onAddNewItem ? /* @__PURE__ */ jsx(
|
|
366
|
+
AddNewItemButton,
|
|
367
|
+
{
|
|
368
|
+
searchText: inputValue,
|
|
369
|
+
addItemLabel,
|
|
370
|
+
onAddNewItem,
|
|
371
|
+
onCloseMenu: closeMenu
|
|
372
|
+
}
|
|
373
|
+
) : null;
|
|
363
374
|
if (displayAs === "dialog") {
|
|
364
375
|
return /* @__PURE__ */ jsxs(
|
|
365
376
|
"div",
|
|
@@ -440,6 +451,7 @@ const SelectFieldComboboxMode = ({
|
|
|
440
451
|
initialFocusResolver: (elements) => {
|
|
441
452
|
return elements.find((element) => element.tagName === "INPUT") || elements[0];
|
|
442
453
|
},
|
|
454
|
+
footer: addNewItemButton ?? void 0,
|
|
443
455
|
children: /* @__PURE__ */ jsx(
|
|
444
456
|
SelectOptions,
|
|
445
457
|
{
|
|
@@ -523,8 +535,9 @@ const SelectFieldComboboxMode = ({
|
|
|
523
535
|
id: `${id}-popover`,
|
|
524
536
|
referenceElement: inputWrapperRef,
|
|
525
537
|
open: isOpen && displayAs === "popover",
|
|
526
|
-
|
|
538
|
+
onClose: closeMenu,
|
|
527
539
|
width: "reference",
|
|
540
|
+
footer: addNewItemButton ?? void 0,
|
|
528
541
|
children: /* @__PURE__ */ jsx(
|
|
529
542
|
SelectOptions,
|
|
530
543
|
{
|
|
@@ -615,7 +628,7 @@ const SelectFieldTrigger = ({
|
|
|
615
628
|
"div",
|
|
616
629
|
{
|
|
617
630
|
className: styles["buttons-wrapper"],
|
|
618
|
-
style: { insetInlineEnd: "2rem" },
|
|
631
|
+
style: { insetInlineEnd: "2rem", insetBlockStart: "0.25rem" },
|
|
619
632
|
children: /* @__PURE__ */ jsx("div", { className: styles["close-button-wrapper"], children: /* @__PURE__ */ jsx(
|
|
620
633
|
Button,
|
|
621
634
|
{
|
|
@@ -799,7 +812,9 @@ const SelectFieldSelectMode = ({
|
|
|
799
812
|
initialLoadPerformed,
|
|
800
813
|
setInitialLoadPerformed,
|
|
801
814
|
inputWrapperRef,
|
|
802
|
-
required
|
|
815
|
+
required,
|
|
816
|
+
addItemLabel,
|
|
817
|
+
onAddNewItem
|
|
803
818
|
}) => {
|
|
804
819
|
const listRef = useRef(null);
|
|
805
820
|
const {
|
|
@@ -843,6 +858,15 @@ const SelectFieldSelectMode = ({
|
|
|
843
858
|
const handleLoadMore = async () => {
|
|
844
859
|
await loadMore("");
|
|
845
860
|
};
|
|
861
|
+
const addNewItemButton = onAddNewItem ? /* @__PURE__ */ jsx(
|
|
862
|
+
AddNewItemButton,
|
|
863
|
+
{
|
|
864
|
+
searchText: "",
|
|
865
|
+
addItemLabel,
|
|
866
|
+
onAddNewItem,
|
|
867
|
+
onCloseMenu: closeMenu
|
|
868
|
+
}
|
|
869
|
+
) : null;
|
|
846
870
|
const toggleButtonProps = getToggleButtonProps({
|
|
847
871
|
disabled: !!disabled,
|
|
848
872
|
"aria-required": required ? true : void 0,
|
|
@@ -904,6 +928,7 @@ const SelectFieldSelectMode = ({
|
|
|
904
928
|
isOpen,
|
|
905
929
|
onClose: closeMenu,
|
|
906
930
|
title: label,
|
|
931
|
+
footer: addNewItemButton ?? void 0,
|
|
907
932
|
children: /* @__PURE__ */ jsx(
|
|
908
933
|
SelectOptions,
|
|
909
934
|
{
|
|
@@ -988,8 +1013,9 @@ const SelectFieldSelectMode = ({
|
|
|
988
1013
|
id: `${id}-popover`,
|
|
989
1014
|
referenceElement: inputWrapperRef,
|
|
990
1015
|
open: isOpen && displayAs === "popover",
|
|
991
|
-
|
|
1016
|
+
onClose: closeMenu,
|
|
992
1017
|
width: "reference",
|
|
1018
|
+
footer: addNewItemButton ?? void 0,
|
|
993
1019
|
children: /* @__PURE__ */ jsx(
|
|
994
1020
|
SelectOptions,
|
|
995
1021
|
{
|
|
@@ -1051,7 +1077,9 @@ const SelectField = forwardRef(
|
|
|
1051
1077
|
style,
|
|
1052
1078
|
pinned,
|
|
1053
1079
|
virtualize,
|
|
1054
|
-
disableSearch
|
|
1080
|
+
disableSearch,
|
|
1081
|
+
addItemLabel,
|
|
1082
|
+
onAddNewItem
|
|
1055
1083
|
} = componentProps;
|
|
1056
1084
|
const groupToString = "groupToString" in componentProps ? componentProps.groupToString : void 0;
|
|
1057
1085
|
const groupSorter = "groupSorter" in componentProps ? componentProps.groupSorter : void 0;
|
|
@@ -1117,6 +1145,8 @@ const SelectField = forwardRef(
|
|
|
1117
1145
|
groupToString,
|
|
1118
1146
|
groupSorter,
|
|
1119
1147
|
virtualize,
|
|
1148
|
+
addItemLabel,
|
|
1149
|
+
onAddNewItem,
|
|
1120
1150
|
options,
|
|
1121
1151
|
loading,
|
|
1122
1152
|
loadingMore,
|
|
@@ -1173,4 +1203,4 @@ const SelectFieldSync = (props) => {
|
|
|
1173
1203
|
};
|
|
1174
1204
|
|
|
1175
1205
|
export { SelectField as S, SelectFieldSync as a };
|
|
1176
|
-
//# sourceMappingURL=SelectFieldSync-
|
|
1206
|
+
//# sourceMappingURL=SelectFieldSync-BeDYbJ2M.js.map
|