@servicetitan/anvil2 1.38.0 → 1.40.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +51 -12
- package/dist/Breadcrumbs-C_gan90a.js +36 -0
- package/dist/Breadcrumbs-C_gan90a.js.map +1 -0
- package/dist/{Breadcrumbs-DJbCkSeD.js → Breadcrumbs-D_jgwoN3-Dlw-weD8.js} +8 -38
- package/dist/Breadcrumbs-D_jgwoN3-Dlw-weD8.js.map +1 -0
- package/dist/Breadcrumbs.js +1 -1
- package/dist/{Calendar-jl0s6W7p.js → Calendar-C2ONV7cq.js} +2 -2
- package/dist/{Calendar-jl0s6W7p.js.map → Calendar-C2ONV7cq.js.map} +1 -1
- package/dist/{Calendar-CohGSWFp-DFYJkf7Y.js → Calendar-DixTCgAW-CfphBge0.js} +16 -15
- package/dist/Calendar-DixTCgAW-CfphBge0.js.map +1 -0
- package/dist/Calendar.js +1 -1
- package/dist/{Checkbox-TIcImbEx-EgjesTNn.js → Checkbox-BNrjUtHs-BBLXLwO5.js} +3 -3
- package/dist/{Checkbox-TIcImbEx-EgjesTNn.js.map → Checkbox-BNrjUtHs-BBLXLwO5.js.map} +1 -1
- package/dist/{Checkbox-DbDwtefR.js → Checkbox-Dxr3rgQV.js} +2 -2
- package/dist/{Checkbox-DbDwtefR.js.map → Checkbox-Dxr3rgQV.js.map} +1 -1
- package/dist/Checkbox.js +1 -1
- package/dist/{Combobox-7ADxZKDE.js → Combobox-C7nV-w8I.js} +196 -392
- package/dist/Combobox-C7nV-w8I.js.map +1 -0
- package/dist/Combobox.css +43 -281
- package/dist/Combobox.js +1 -1
- package/dist/{DateField-CUO_26rh.js → DateField-Df42sxE9.js} +43 -43
- package/dist/DateField-Df42sxE9.js.map +1 -0
- package/dist/DateField.js +1 -1
- package/dist/DateFieldRange--ZCTVrKX-DoogWMrm.js +2759 -0
- package/dist/DateFieldRange--ZCTVrKX-DoogWMrm.js.map +1 -0
- package/dist/DateFieldRange-DQJ_FMeA.js +22 -0
- package/dist/DateFieldRange-DQJ_FMeA.js.map +1 -0
- package/dist/DateFieldRange.d.ts +2 -0
- package/dist/DateFieldRange.js +2 -0
- package/dist/DateFieldRange.js.map +1 -0
- package/dist/DateFieldSingle-BXPhS91g.js +22 -0
- package/dist/DateFieldSingle-BXPhS91g.js.map +1 -0
- package/dist/DateFieldSingle.d.ts +2 -0
- package/dist/DateFieldSingle.js +2 -0
- package/dist/DateFieldSingle.js.map +1 -0
- package/dist/{DaysOfTheWeek-CEKoAJSv.js → DaysOfTheWeek-C4ZGriW7.js} +3 -3
- package/dist/{DaysOfTheWeek-CEKoAJSv.js.map → DaysOfTheWeek-C4ZGriW7.js.map} +1 -1
- package/dist/DaysOfTheWeek.js +1 -1
- package/dist/{Dialog-D6zpW-GE.js → Dialog-CBWaZO5U.js} +2 -2
- package/dist/{Dialog-D6zpW-GE.js.map → Dialog-CBWaZO5U.js.map} +1 -1
- package/dist/Dialog.js +1 -1
- package/dist/{Drawer-qb7Q0BAm.js → Drawer-Be0tyTMM.js} +2 -2
- package/dist/{Drawer-qb7Q0BAm.js.map → Drawer-Be0tyTMM.js.map} +1 -1
- package/dist/Drawer.js +1 -1
- package/dist/{FieldMessage-ChFXWVDb-loVSCnCM.js → FieldMessage-Bobp105T-DYhStLY4.js} +4 -4
- package/dist/FieldMessage-Bobp105T-DYhStLY4.js.map +1 -0
- package/dist/{FieldMessage-ChFXWVDb.css → FieldMessage-Bobp105T.css} +13 -3
- package/dist/{FieldMessage-Cg3zcgk5.js → FieldMessage-DkJ0K5s-.js} +2 -2
- package/dist/{FieldMessage-Cg3zcgk5.js.map → FieldMessage-DkJ0K5s-.js.map} +1 -1
- package/dist/FieldMessage.js +1 -1
- package/dist/{Helper-C9sHaTrI-C5fAsK6i.js → Helper-h7k80qls-DHPFHTvI.js} +3 -3
- package/dist/{Helper-C9sHaTrI-C5fAsK6i.js.map → Helper-h7k80qls-DHPFHTvI.js.map} +1 -1
- package/dist/{InputMask-kJ-hlK0O-Ctwa0U7r.js → InputMask-CiHg25XE--lofQ4oF.js} +2 -2
- package/dist/{InputMask-kJ-hlK0O-Ctwa0U7r.js.map → InputMask-CiHg25XE--lofQ4oF.js.map} +1 -1
- package/dist/{InputMask-DKPqOpHs.js → InputMask-DYthrVaU.js} +2 -2
- package/dist/{InputMask-DKPqOpHs.js.map → InputMask-DYthrVaU.js.map} +1 -1
- package/dist/InputMask.js +1 -1
- package/dist/{ListView-0xHc5wT6.js → ListView-DgrUsTC8.js} +3 -3
- package/dist/{ListView-0xHc5wT6.js.map → ListView-DgrUsTC8.js.map} +1 -1
- package/dist/ListView.js +1 -1
- package/dist/Menu-By8ps-lb.js +60 -0
- package/dist/Menu-By8ps-lb.js.map +1 -0
- package/dist/{Menu-BAuADOyt.js → Menu-jt64Cbkd-mK95uUq6.js} +23 -73
- package/dist/Menu-jt64Cbkd-mK95uUq6.js.map +1 -0
- package/dist/{Menu.css → Menu-jt64Cbkd.css} +22 -21
- package/dist/Menu.js +1 -1
- package/dist/{Page-CtwsyE3i.js → Page-DoCYLmH8.js} +135 -105
- package/dist/Page-DoCYLmH8.js.map +1 -0
- package/dist/Page.js +1 -1
- package/dist/Pagination.css +124 -0
- package/dist/Pagination.d.ts +6 -0
- package/dist/Pagination.js +430 -0
- package/dist/Pagination.js.map +1 -0
- package/dist/{Popover-VztF0YHt-ci3tYiye.js → Popover-CVCAWhdO-CJw1mW49.js} +3 -3
- package/dist/{Popover-VztF0YHt-ci3tYiye.js.map → Popover-CVCAWhdO-CJw1mW49.js.map} +1 -1
- package/dist/{Popover-Bnkwq99S.js → Popover-Dv7ntx4P.js} +2 -2
- package/dist/{Popover-Bnkwq99S.js.map → Popover-Dv7ntx4P.js.map} +1 -1
- package/dist/Popover.js +1 -1
- package/dist/{ProgressBar-Cfi5zZRy-BpESsdh_.js → ProgressBar-CZhkKwaS-dlDRDjxo.js} +24 -11
- package/dist/ProgressBar-CZhkKwaS-dlDRDjxo.js.map +1 -0
- package/dist/{ProgressBar-BotOFymw.js → ProgressBar-Eeudkcyc.js} +2 -2
- package/dist/{ProgressBar-BotOFymw.js.map → ProgressBar-Eeudkcyc.js.map} +1 -1
- package/dist/ProgressBar.js +1 -1
- package/dist/{Radio-7U7IBI58-BDhdZJoC.js → Radio-DiBn0-hf-hhLKXDdl.js} +4 -4
- package/dist/{Radio-7U7IBI58-BDhdZJoC.js.map → Radio-DiBn0-hf-hhLKXDdl.js.map} +1 -1
- package/dist/{Radio-D4rRt1a6.js → Radio-Dx2GeEZp.js} +2 -2
- package/dist/{Radio-D4rRt1a6.js.map → Radio-Dx2GeEZp.js.map} +1 -1
- package/dist/Radio.js +1 -1
- package/dist/{SearchField-Bz4HPxCQ.js → SearchField-BQY7LHe2.js} +3 -3
- package/dist/SearchField-BQY7LHe2.js.map +1 -0
- package/dist/SearchField.js +1 -1
- package/dist/{SelectCard-B5EqtxOK-CpCgVjV8.js → SelectCard-CL8T4DQb-ClozUyqV.js} +46 -26
- package/dist/SelectCard-CL8T4DQb-ClozUyqV.js.map +1 -0
- package/dist/SelectCard-CL8T4DQb.css +51 -0
- package/dist/SelectCard.js +1 -1
- package/dist/{SelectCardGroup-DsHZgCqA.js → SelectCardGroup-KTtcsOar.js} +2 -2
- package/dist/{SelectCardGroup-DsHZgCqA.js.map → SelectCardGroup-KTtcsOar.js.map} +1 -1
- package/dist/SelectTrigger-BvUO-g1F.js +138 -0
- package/dist/SelectTrigger-BvUO-g1F.js.map +1 -0
- package/dist/SelectTrigger.css +16 -0
- package/dist/SelectTrigger.d.ts +6 -0
- package/dist/SelectTrigger.js +2 -0
- package/dist/SelectTrigger.js.map +1 -0
- package/dist/SelectTriggerBase-BMhRDkFW-DjkagPpu.js +301 -0
- package/dist/SelectTriggerBase-BMhRDkFW-DjkagPpu.js.map +1 -0
- package/dist/SelectTriggerBase-BMhRDkFW.css +270 -0
- package/dist/{Switch-Dd9tJFmG.js → Switch-DAQFzi-X.js} +2 -2
- package/dist/{Switch-Dd9tJFmG.js.map → Switch-DAQFzi-X.js.map} +1 -1
- package/dist/Switch.js +1 -1
- package/dist/{TextField-BYyyw3m2.js → TextField-0XKj7lDu.js} +2 -2
- package/dist/{TextField-BYyyw3m2.js.map → TextField-0XKj7lDu.js.map} +1 -1
- package/dist/{TextField-CGJtMoil-CJqYM83o.js → TextField-C5KbQxoU-CSkSyt7P.js} +8 -10
- package/dist/TextField-C5KbQxoU-CSkSyt7P.js.map +1 -0
- package/dist/TextField.js +1 -1
- package/dist/{Textarea-AczEXhHB.js → Textarea-DkSeFIg7.js} +8 -10
- package/dist/Textarea-DkSeFIg7.js.map +1 -0
- package/dist/Textarea.js +1 -1
- package/dist/Toast.js +1 -1
- package/dist/{Toolbar-Cu3u0TRX.js → Toolbar-38Z9fVxY.js} +5 -7
- package/dist/Toolbar-38Z9fVxY.js.map +1 -0
- package/dist/Toolbar.js +1 -1
- package/dist/{Tooltip-BL_bgvwA.js → Tooltip-BwUVaBEo.js} +2 -2
- package/dist/{Tooltip-BL_bgvwA.js.map → Tooltip-BwUVaBEo.js.map} +1 -1
- package/dist/Tooltip.js +1 -1
- package/dist/assets/css-utils/a2-border.css +53 -0
- package/dist/assets/css-utils/a2-color.css +235 -0
- package/dist/assets/css-utils/a2-font.css +49 -0
- package/dist/assets/css-utils/a2-spacing.css +483 -0
- package/dist/assets/css-utils/a2-utils.css +785 -0
- package/dist/assets/icons/st/document_audio.svg +1 -0
- package/dist/assets/icons/st/document_doc.svg +1 -0
- package/dist/assets/icons/st/document_drawing.svg +1 -0
- package/dist/assets/icons/st/document_form.svg +1 -0
- package/dist/assets/icons/st/document_message.svg +1 -0
- package/dist/assets/icons/st/document_other.svg +1 -0
- package/dist/assets/icons/st/document_pdf.svg +1 -0
- package/dist/assets/icons/st/document_spreadsheet.svg +1 -0
- package/dist/assets/icons/st/document_text.svg +1 -0
- package/dist/assets/icons/st/document_web.svg +1 -0
- package/dist/assets/icons/st/gnav_insurance_work_queue_active.svg +1 -0
- package/dist/assets/icons/st/gnav_insurance_work_queue_inactive.svg +1 -0
- package/dist/assets/icons/st/gnav_production_work_queue_active.svg +1 -0
- package/dist/assets/icons/st/gnav_production_work_queue_inactive.svg +1 -0
- package/dist/assets/icons/st.ts +14 -0
- package/dist/components/Alert/Alert.figma.d.ts +1 -0
- package/dist/components/DateFieldRange/DateFieldRange.d.ts +7 -0
- package/dist/components/DateFieldRange/index.d.ts +2 -0
- package/dist/components/DateFieldSingle/DateFieldSingle.d.ts +7 -0
- package/dist/components/DateFieldSingle/index.d.ts +2 -0
- package/dist/components/Page/Page.d.ts +19 -352
- package/dist/components/Page/PageContent.d.ts +24 -0
- package/dist/components/Page/PageContext.d.ts +4 -0
- package/dist/components/Page/PageFooter.d.ts +24 -0
- package/dist/components/Page/PageHeader.d.ts +135 -0
- package/dist/components/Page/PagePanel.d.ts +57 -0
- package/dist/components/Page/PageSidebar.d.ts +57 -0
- package/dist/components/Page/PageSidebarContext.d.ts +5 -0
- package/dist/components/Page/PageSidebarHeader.d.ts +23 -0
- package/dist/components/Page/index.d.ts +5 -0
- package/dist/components/Pagination/Pagination.d.ts +58 -0
- package/dist/components/Pagination/index.d.ts +2 -0
- package/dist/components/Pagination/internal/usePaginationArray.d.ts +36 -0
- package/dist/components/SelectTrigger/SelectTrigger.d.ts +11 -0
- package/dist/components/SelectTrigger/index.d.ts +2 -0
- package/dist/components/index.d.ts +3 -0
- package/dist/event-BEJFimi3.js +6 -0
- package/dist/event-BEJFimi3.js.map +1 -0
- package/dist/index.js +27 -24
- package/dist/index.js.map +1 -1
- package/dist/keyboard_arrow_right-DZWNVytH.js +8 -0
- package/dist/keyboard_arrow_right-DZWNVytH.js.map +1 -0
- package/dist/more_horiz-DJgdQiy0.js +6 -0
- package/dist/more_horiz-DJgdQiy0.js.map +1 -0
- package/dist/{toast-B39L6vJ0.js → toast-CWVuLkyv.js} +2 -2
- package/dist/{toast-B39L6vJ0.js.map → toast-CWVuLkyv.js.map} +1 -1
- package/dist/token/core/css-utils/a2-border.css +53 -0
- package/dist/token/core/css-utils/a2-color.css +235 -0
- package/dist/token/core/css-utils/a2-font.css +49 -0
- package/dist/token/core/css-utils/a2-spacing.css +483 -0
- package/dist/token/core/css-utils/a2-utils.css +785 -0
- package/package.json +8 -5
- package/dist/Breadcrumbs-DJbCkSeD.js.map +0 -1
- package/dist/Calendar-CohGSWFp-DFYJkf7Y.js.map +0 -1
- package/dist/Combobox-7ADxZKDE.js.map +0 -1
- package/dist/DateField-CUO_26rh.js.map +0 -1
- package/dist/FieldMessage-ChFXWVDb-loVSCnCM.js.map +0 -1
- package/dist/Menu-BAuADOyt.js.map +0 -1
- package/dist/Page-CtwsyE3i.js.map +0 -1
- package/dist/ProgressBar-Cfi5zZRy-BpESsdh_.js.map +0 -1
- package/dist/SearchField-Bz4HPxCQ.js.map +0 -1
- package/dist/SelectCard-B5EqtxOK-CpCgVjV8.js.map +0 -1
- package/dist/SelectCard-B5EqtxOK.css +0 -38
- package/dist/TextField-CGJtMoil-CJqYM83o.js.map +0 -1
- package/dist/Textarea-AczEXhHB.js.map +0 -1
- package/dist/Toolbar-Cu3u0TRX.js.map +0 -1
- /package/dist/{Breadcrumbs.css → Breadcrumbs-D_jgwoN3.css} +0 -0
- /package/dist/{Calendar-CohGSWFp.css → Calendar-DixTCgAW.css} +0 -0
- /package/dist/{Helper-C9sHaTrI.css → Helper-h7k80qls.css} +0 -0
- /package/dist/{Popover-VztF0YHt.css → Popover-CVCAWhdO.css} +0 -0
- /package/dist/{ProgressBar-Cfi5zZRy.css → ProgressBar-CZhkKwaS.css} +0 -0
- /package/dist/{Radio-7U7IBI58.css → Radio-DiBn0-hf.css} +0 -0
|
@@ -109,7 +109,7 @@ const SearchField$1 = forwardRef(
|
|
|
109
109
|
type: "search",
|
|
110
110
|
autoComplete,
|
|
111
111
|
disabled,
|
|
112
|
-
"aria-
|
|
112
|
+
"aria-labelledby": placeholderUid,
|
|
113
113
|
...rest
|
|
114
114
|
}
|
|
115
115
|
),
|
|
@@ -130,7 +130,7 @@ const SearchField$1 = forwardRef(
|
|
|
130
130
|
]
|
|
131
131
|
}
|
|
132
132
|
),
|
|
133
|
-
/* @__PURE__ */ jsx(SrOnly, {
|
|
133
|
+
/* @__PURE__ */ jsx(SrOnly, { id: placeholderUid, children: placeholder })
|
|
134
134
|
]
|
|
135
135
|
}
|
|
136
136
|
);
|
|
@@ -157,4 +157,4 @@ const SearchField = forwardRef(
|
|
|
157
157
|
SearchField.displayName = SearchField$1.displayName;
|
|
158
158
|
|
|
159
159
|
export { SearchField as S };
|
|
160
|
-
//# sourceMappingURL=SearchField-
|
|
160
|
+
//# sourceMappingURL=SearchField-BQY7LHe2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchField-BQY7LHe2.js","sources":["../../hammer-icon/mdi/round/search.svg","../../hammer-react/dist/SearchField-D-FNLgqh.js","../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 { jsxs, jsx } from 'react/jsx-runtime';\nimport { forwardRef, useState, useId, useRef, useEffect } from 'react';\nimport cx from 'classnames';\nimport { useMergeRefs } from '@floating-ui/react';\nimport { t as textfieldStyles } from './TextField.module-ChLlwuT-.js';\nimport Close from '@servicetitan/hammer-icon/mdi/round/close.svg';\nimport Search from '@servicetitan/hammer-icon/mdi/round/search.svg';\nimport { S as SrOnly } from './SrOnly-BsKDHetF.js';\nimport { I as Icon } from './Icon-B6HmlQiR.js';\nimport { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DWACCL8v.js';\n\nimport './SearchField.css';const searchfield = \"_searchfield_1s8tg_2\";\nconst clear = \"_clear_1s8tg_10\";\nconst styles = {\n\tsearchfield: searchfield,\n\t\"input-wrapper\": \"_input-wrapper_1s8tg_7\",\n\tclear: clear};\n\nconst SearchField = forwardRef(\n function SearchField2(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 const [hasValue, setHasValue] = useState(\n rest.defaultValue || value ? true : false\n );\n const placeholderUid = useId();\n const inputRef = useRef(null);\n const styleCombined = { ...style, ...layoutStyles };\n const handleOnChange = (e) => {\n if (e.target.value) {\n setHasValue(true);\n } else {\n setHasValue(false);\n }\n onChange?.(e);\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 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 return /* @__PURE__ */ jsxs(\n \"div\",\n {\n className: cx(\n textfieldStyles[\"textfield\"],\n styles[\"searchfield\"],\n className\n ),\n \"data-anv\": \"SearchField\",\n style: styleCombined,\n children: [\n /* @__PURE__ */ jsxs(\n \"div\",\n {\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 children: [\n /* @__PURE__ */ jsx(\"div\", { \"aria-hidden\": true, className: textfieldStyles[\"prefix\"], children: /* @__PURE__ */ jsx(Icon, { \"aria-label\": \"search\", svg: Search }) }),\n /* @__PURE__ */ jsx(\n \"input\",\n {\n className: cx(textfieldStyles[\"input\"]),\n ref: useMergeRefs([ref, inputRef]),\n onChange: handleOnChange,\n placeholder,\n value,\n type: \"search\",\n autoComplete,\n disabled,\n \"aria-labelledby\": placeholderUid,\n ...rest\n }\n ),\n /* @__PURE__ */ jsx(\n Icon,\n {\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 )\n ]\n }\n ),\n /* @__PURE__ */ jsx(SrOnly, { id: placeholderUid, children: placeholder })\n ]\n }\n );\n }\n);\n\nexport { SearchField as S };\n//# sourceMappingURL=SearchField-D-FNLgqh.js.map\n","import {\n SearchField as CoreSearchField,\n type SearchFieldProps as CoreSearchFieldProps,\n} from \"@servicetitan/hammer-react\";\nimport { useTrackingId } from \"../../hooks/useTrackingId\";\nimport { DataTrackingId } from \"../../types/DataTrackingId\";\nimport { forwardRef, Ref } from \"react\";\n\n/**\n * Props for the SearchField component\n * @property {string} [size] - Size of the search field (small, medium, large)\n * @property {Function} [onClear] - Callback when the clear button is clicked\n * @extends DataTrackingId\n */\nexport type SearchFieldProps = CoreSearchFieldProps & 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(\n (props: SearchFieldProps, ref: Ref<HTMLInputElement>) => {\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 return (\n <CoreSearchField ref={ref} data-tracking-id={trackingId} {...props} />\n );\n },\n);\nSearchField.displayName = CoreSearchField.displayName;\n"],"names":["SearchField","Search","Close","CoreSearchField"],"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-BQY7LHe2.js';
|
|
2
2
|
//# sourceMappingURL=SearchField.js.map
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef, useState, useId, createContext, useContext, useLayoutEffect } from 'react';
|
|
2
3
|
import { C as Card } from './Card-ZknG-yim-7W6rYSFV.js';
|
|
3
|
-
import { R as RadioGroup, a as Radio } from './Radio-
|
|
4
|
+
import { R as RadioGroup, a as Radio } from './Radio-DiBn0-hf-hhLKXDdl.js';
|
|
4
5
|
import { c as cx } from './index-tZvMCc77.js';
|
|
5
|
-
import { C as CheckboxGroup, a as Checkbox } from './Checkbox-
|
|
6
|
-
import { forwardRef, useState, useId, createContext, useContext } from 'react';
|
|
6
|
+
import { C as CheckboxGroup, a as Checkbox } from './Checkbox-BNrjUtHs-BBLXLwO5.js';
|
|
7
7
|
import { u as useOptionallyControlledState } from './useOptionallyControlledState-DAv5LXXh-DAv5LXXh.js';
|
|
8
8
|
|
|
9
|
-
import './SelectCard-
|
|
10
|
-
"select-card": "_select-
|
|
11
|
-
"select-card--
|
|
12
|
-
"select-card--
|
|
13
|
-
"select-card--
|
|
9
|
+
import './SelectCard-CL8T4DQb.css';const styles = {
|
|
10
|
+
"select-card": "_select-card_3pbcy_2",
|
|
11
|
+
"select-card--errored": "_select-card--errored_3pbcy_22",
|
|
12
|
+
"select-card--selected": "_select-card--selected_3pbcy_25",
|
|
13
|
+
"select-card--disabled": "_select-card--disabled_3pbcy_41",
|
|
14
|
+
"select-card--remove-drop-shadow": "_select-card--remove-drop-shadow_3pbcy_45"
|
|
14
15
|
};
|
|
15
16
|
|
|
16
17
|
const SelectCardContext = createContext(null);
|
|
@@ -21,9 +22,11 @@ const SelectCardProvider = ({
|
|
|
21
22
|
}) => {
|
|
22
23
|
const [selection, setSelection] = useState(/* @__PURE__ */ new Set());
|
|
23
24
|
const radioName = useId();
|
|
24
|
-
const handleChange = (e, state) => {
|
|
25
|
+
const handleChange = (e, state, options) => {
|
|
25
26
|
if (!state || !state.id) {
|
|
26
|
-
|
|
27
|
+
if (!options?.internal) {
|
|
28
|
+
onChange(e, state);
|
|
29
|
+
}
|
|
27
30
|
return;
|
|
28
31
|
}
|
|
29
32
|
if (selectionMode === "single") {
|
|
@@ -40,7 +43,9 @@ const SelectCardProvider = ({
|
|
|
40
43
|
setSelection(selection);
|
|
41
44
|
}
|
|
42
45
|
}
|
|
43
|
-
|
|
46
|
+
if (!options?.internal) {
|
|
47
|
+
onChange(e, state);
|
|
48
|
+
}
|
|
44
49
|
};
|
|
45
50
|
const context = {
|
|
46
51
|
selectionMode,
|
|
@@ -99,6 +104,7 @@ const SelectCardElement = forwardRef(
|
|
|
99
104
|
errored,
|
|
100
105
|
radioProps,
|
|
101
106
|
onChange,
|
|
107
|
+
removeDropShadow,
|
|
102
108
|
id,
|
|
103
109
|
...rest
|
|
104
110
|
} = props;
|
|
@@ -108,6 +114,20 @@ const SelectCardElement = forwardRef(
|
|
|
108
114
|
onChange
|
|
109
115
|
});
|
|
110
116
|
const context = useSelectCardContext();
|
|
117
|
+
const [_, setForceRenderCount] = useState(0);
|
|
118
|
+
useLayoutEffect(() => {
|
|
119
|
+
if (defaultCheckedProp) {
|
|
120
|
+
context?.onChange(
|
|
121
|
+
void 0,
|
|
122
|
+
{
|
|
123
|
+
id,
|
|
124
|
+
checked: defaultCheckedProp
|
|
125
|
+
},
|
|
126
|
+
{ internal: true }
|
|
127
|
+
);
|
|
128
|
+
setForceRenderCount((prev) => prev + 1);
|
|
129
|
+
}
|
|
130
|
+
}, []);
|
|
111
131
|
const handleChange = (event) => {
|
|
112
132
|
const newChecked = event ? event.target.checked : false;
|
|
113
133
|
setChecked(newChecked);
|
|
@@ -122,6 +142,7 @@ const SelectCardElement = forwardRef(
|
|
|
122
142
|
Checkbox,
|
|
123
143
|
{
|
|
124
144
|
...checkboxProps,
|
|
145
|
+
defaultChecked: defaultCheckedProp,
|
|
125
146
|
onChange: handleChange,
|
|
126
147
|
disabled,
|
|
127
148
|
ref,
|
|
@@ -129,13 +150,12 @@ const SelectCardElement = forwardRef(
|
|
|
129
150
|
Card,
|
|
130
151
|
{
|
|
131
152
|
...rest,
|
|
132
|
-
className: cx(
|
|
133
|
-
styles["select-card"],
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
),
|
|
153
|
+
className: cx(styles["select-card"], className, {
|
|
154
|
+
[styles["select-card--remove-drop-shadow"]]: removeDropShadow,
|
|
155
|
+
[styles["select-card--selected"]]: isChecked && !errored,
|
|
156
|
+
[styles["select-card--errored"]]: errored,
|
|
157
|
+
[styles["select-card--disabled"]]: disabled
|
|
158
|
+
}),
|
|
139
159
|
children
|
|
140
160
|
}
|
|
141
161
|
),
|
|
@@ -146,6 +166,7 @@ const SelectCardElement = forwardRef(
|
|
|
146
166
|
Radio,
|
|
147
167
|
{
|
|
148
168
|
...radioProps,
|
|
169
|
+
defaultChecked: defaultCheckedProp,
|
|
149
170
|
onChange: handleChange,
|
|
150
171
|
disabled,
|
|
151
172
|
ref,
|
|
@@ -154,13 +175,12 @@ const SelectCardElement = forwardRef(
|
|
|
154
175
|
Card,
|
|
155
176
|
{
|
|
156
177
|
...rest,
|
|
157
|
-
className: cx(
|
|
158
|
-
styles["select-card"],
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
),
|
|
178
|
+
className: cx(styles["select-card"], className, {
|
|
179
|
+
[styles["select-card--remove-drop-shadow"]]: removeDropShadow,
|
|
180
|
+
[styles["select-card--selected"]]: isChecked && !errored,
|
|
181
|
+
[styles["select-card--errored"]]: errored,
|
|
182
|
+
[styles["select-card--disabled"]]: disabled
|
|
183
|
+
}),
|
|
164
184
|
children
|
|
165
185
|
}
|
|
166
186
|
),
|
|
@@ -201,4 +221,4 @@ const SelectCard = Object.assign(SelectCardElement, {
|
|
|
201
221
|
});
|
|
202
222
|
|
|
203
223
|
export { SelectCardGroup as S, SelectCard as a };
|
|
204
|
-
//# sourceMappingURL=SelectCard-
|
|
224
|
+
//# sourceMappingURL=SelectCard-CL8T4DQb-ClozUyqV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectCard-CL8T4DQb-ClozUyqV.js","sources":["../../hammer-react/dist/SelectCard-CL8T4DQb.js"],"sourcesContent":["import { jsx, jsxs, Fragment } from 'react/jsx-runtime';\nimport { useContext, useState, useId, createContext, forwardRef, useLayoutEffect } from 'react';\nimport { C as Card } from './Card-ZknG-yim.js';\nimport { a as RadioGroup, R as Radio } from './Radio-DiBn0-hf.js';\nimport cx from 'classnames';\nimport { a as CheckboxGroup, C as Checkbox } from './Checkbox-BNrjUtHs.js';\nimport { u as useOptionallyControlledState } from './useOptionallyControlledState-DAv5LXXh.js';\n\nimport './SelectCard.css';const styles = {\n\t\"select-card\": \"_select-card_3pbcy_2\",\n\t\"select-card--errored\": \"_select-card--errored_3pbcy_22\",\n\t\"select-card--selected\": \"_select-card--selected_3pbcy_25\",\n\t\"select-card--disabled\": \"_select-card--disabled_3pbcy_41\",\n\t\"select-card--remove-drop-shadow\": \"_select-card--remove-drop-shadow_3pbcy_45\"\n};\n\nconst SelectCardContext = createContext(null);\nconst SelectCardProvider = ({\n children,\n onChange,\n selectionMode\n}) => {\n const [selection, setSelection] = useState(/* @__PURE__ */ new Set());\n const radioName = useId();\n const handleChange = (e, state, options) => {\n if (!state || !state.id) {\n if (!options?.internal) {\n onChange(e, state);\n }\n return;\n }\n if (selectionMode === \"single\") {\n if (state.checked) {\n setSelection(/* @__PURE__ */ new Set([state.id]));\n } else {\n setSelection(/* @__PURE__ */ 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 if (!options?.internal) {\n onChange(e, state);\n }\n };\n const context = {\n selectionMode,\n onChange: handleChange,\n radioName,\n selection\n };\n return /* @__PURE__ */ jsx(SelectCardContext.Provider, { value: context, children });\n};\nconst useSelectCardContext = () => useContext(SelectCardContext);\n\nconst SelectCardGroup = forwardRef((props, _ref) => {\n const {\n ariaLabelledBy,\n children,\n legend,\n onChange,\n required = false,\n selectionMode,\n ...rest\n } = props;\n return /* @__PURE__ */ jsxs(SelectCardProvider, { onChange, selectionMode, children: [\n selectionMode === \"multiple\" && /* @__PURE__ */ jsx(\n CheckboxGroup,\n {\n \"aria-labelledby\": ariaLabelledBy,\n legend,\n required,\n ...rest,\n children\n }\n ),\n selectionMode === \"single\" && /* @__PURE__ */ jsx(\n RadioGroup,\n {\n \"aria-labelledby\": ariaLabelledBy,\n legend,\n required,\n ...rest,\n children\n }\n )\n ] });\n});\nSelectCardGroup.displayName = \"SelectCardGroup\";\n\nconst SelectCardElement = forwardRef(\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 const [checked, setChecked] = useOptionallyControlledState({\n controlledValue: checkedProp,\n defaultValue: defaultCheckedProp || false,\n onChange\n });\n const context = useSelectCardContext();\n const [_, setForceRenderCount] = useState(0);\n useLayoutEffect(() => {\n if (defaultCheckedProp) {\n context?.onChange(\n void 0,\n {\n id,\n checked: defaultCheckedProp\n },\n { internal: true }\n );\n setForceRenderCount((prev) => prev + 1);\n }\n }, []);\n const handleChange = (event) => {\n const newChecked = event ? event.target.checked : false;\n setChecked(newChecked);\n context?.onChange(event, {\n id,\n checked: newChecked\n });\n };\n const isChecked = context ? context.selection.has(id) : checked;\n return /* @__PURE__ */ jsxs(Fragment, { children: [\n (!context || context?.selectionMode === \"multiple\") && /* @__PURE__ */ jsx(\n Checkbox,\n {\n ...checkboxProps,\n defaultChecked: defaultCheckedProp,\n onChange: handleChange,\n disabled,\n ref,\n label: /* @__PURE__ */ jsx(\n Card,\n {\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 children\n }\n ),\n hideCheckbox: true\n }\n ),\n context?.selectionMode === \"single\" && /* @__PURE__ */ jsx(\n Radio,\n {\n ...radioProps,\n defaultChecked: defaultCheckedProp,\n onChange: handleChange,\n disabled,\n ref,\n name: context.radioName,\n label: /* @__PURE__ */ jsx(\n Card,\n {\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 children\n }\n ),\n hideRadio: true\n }\n )\n ] });\n }\n);\nSelectCardElement.displayName = \"SelectCard\";\nconst 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\nexport { SelectCard as S, SelectCardGroup as a };\n//# sourceMappingURL=SelectCard-CL8T4DQb.js.map\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
@layer starter, reset, base, state, application;
|
|
2
|
+
@layer starter, reset, base, state, application;
|
|
3
|
+
@layer base {
|
|
4
|
+
._select-card_3pbcy_2 {
|
|
5
|
+
--box-shadow-size: 0rem 0.125rem 0.5rem;
|
|
6
|
+
--box-shadow-color: var(--shadow-color, rgba(20, 20, 20, 0.0784313725));
|
|
7
|
+
box-shadow: var(--box-shadow-size) var(--box-shadow-color);
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
transition-property: box-shadow, color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
10
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
11
|
+
transition-duration: 200ms;
|
|
12
|
+
isolation: isolate;
|
|
13
|
+
position: relative;
|
|
14
|
+
width: -moz-fit-content;
|
|
15
|
+
width: fit-content;
|
|
16
|
+
}
|
|
17
|
+
._select-card_3pbcy_2::before {
|
|
18
|
+
position: absolute;
|
|
19
|
+
inset: 0;
|
|
20
|
+
z-index: -1;
|
|
21
|
+
border-radius: inherit;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
@layer state {
|
|
25
|
+
._select-card--errored_3pbcy_22 {
|
|
26
|
+
border: 2px solid var(--border-color-danger, #e13212);
|
|
27
|
+
}
|
|
28
|
+
._select-card--selected_3pbcy_25 {
|
|
29
|
+
border: 0.0625rem solid var(--border-color-strong, #444445);
|
|
30
|
+
outline: 0.0625rem solid var(--border-color-strong, #444445);
|
|
31
|
+
}
|
|
32
|
+
._select-card_3pbcy_2:hover::before {
|
|
33
|
+
content: "";
|
|
34
|
+
background-color: var(--overlay-color-hover, rgba(20, 20, 20, 0.0784313725));
|
|
35
|
+
}
|
|
36
|
+
._select-card_3pbcy_2:active::before {
|
|
37
|
+
content: "";
|
|
38
|
+
background-color: var(--overlay-color-active, rgba(20, 20, 20, 0.1607843137));
|
|
39
|
+
}
|
|
40
|
+
._select-card_3pbcy_2:focus {
|
|
41
|
+
outline: 0.25rem solid var(--focus-ring-color, #0265DC);
|
|
42
|
+
outline-offset: 0.125rem;
|
|
43
|
+
}
|
|
44
|
+
._select-card--disabled_3pbcy_41 {
|
|
45
|
+
opacity: 0.4;
|
|
46
|
+
cursor: not-allowed;
|
|
47
|
+
}
|
|
48
|
+
._select-card--remove-drop-shadow_3pbcy_45 {
|
|
49
|
+
box-shadow: none;
|
|
50
|
+
}
|
|
51
|
+
}
|
package/dist/SelectCard.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { S as SelectCard, b as SelectCardElement, a as SelectCardGroup, S as default } from './SelectCardGroup-
|
|
1
|
+
export { S as SelectCard, b as SelectCardElement, a as SelectCardGroup, S as default } from './SelectCardGroup-KTtcsOar.js';
|
|
2
2
|
//# sourceMappingURL=SelectCard.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
|
-
import { S as SelectCardGroup$1, a as SelectCard$1 } from './SelectCard-
|
|
3
|
+
import { S as SelectCardGroup$1, a as SelectCard$1 } from './SelectCard-CL8T4DQb-ClozUyqV.js';
|
|
4
4
|
|
|
5
5
|
const SelectCardElement = forwardRef(
|
|
6
6
|
(props, ref) => {
|
|
@@ -46,4 +46,4 @@ const SelectCardGroup = forwardRef(
|
|
|
46
46
|
SelectCardGroup.displayName = SelectCardGroup$1.displayName;
|
|
47
47
|
|
|
48
48
|
export { SelectCard as S, SelectCardGroup as a, SelectCardElement as b };
|
|
49
|
-
//# sourceMappingURL=SelectCardGroup-
|
|
49
|
+
//# sourceMappingURL=SelectCardGroup-KTtcsOar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectCardGroup-
|
|
1
|
+
{"version":3,"file":"SelectCardGroup-KTtcsOar.js","sources":["../src/components/SelectCard/SelectCard.tsx","../src/components/SelectCard/SelectCardGroup.tsx"],"sourcesContent":["import {\n SelectCardProps as CoreSelectCardProps,\n SelectCard as CoreSelectCard,\n SelectCardGroup as CoreSelectCardGroup,\n} from \"@servicetitan/hammer-react\";\nimport { Ref, forwardRef } from \"react\";\n\n/**\n * Props for the SelectCard component\n * @property {Omit<CheckboxProps, \"label\">} [checkboxProps] - Passes props to the underlying Checkbox component\n * @property {boolean} [checked] - Controlled state. When provided, the component becomes controlled\n * @property {boolean} [defaultChecked] - Uncontrolled state\n * @property {boolean} [disabled] - When true, disables the card\n * @property {boolean} [errored] - When true, sets error styling on the card\n * @property {string | number} id - A unique identifier for the card, used to track the selection state\n * @property {(value: boolean) => void} onChange - Function called on selection state change\n * @property {Omit<RadioProps, \"label\">} [radioProps] - Passes props to the underlying Radio component\n * @extends CoreSelectCardProps\n */\nexport type SelectCardProps = CoreSelectCardProps;\n\nexport const SelectCardElement = forwardRef(\n (props: SelectCardProps, ref: Ref<HTMLInputElement>) => {\n return <CoreSelectCard ref={ref} {...props} />;\n },\n);\nSelectCardElement.displayName = CoreSelectCard.displayName;\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 * - Automatic tracking ID generation for analytics\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 * - Automatic tracking ID generation for analytics\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: CoreSelectCardGroup,\n});\n","import {\n SelectCardGroupProps as CoreSelectCardGroupProps,\n SelectCardGroup as CoreSelectCardGroup,\n} from \"@servicetitan/hammer-react\";\nimport { Ref, forwardRef } from \"react\";\n\n/**\n * Props for the SelectCardGroup component\n * @property {string} [ariaLabelledBy] - Associates the legend with content below\n * @property {ReactNode} [children] - Child SelectCard components\n * @property {CheckboxGroupProps[\"legend\"]} legend - Sets the legend on the group\n * @property {boolean} [required] - When true, sets \"required\" text in label. This does not enforce error when nothing is selected\n * @property {(e?: ChangeEvent<HTMLInputElement>, state?: ISelectCardState) => void} onChange - Callback function that is triggered when the selection state changes\n * @property {\"single\" | \"multiple\"} selectionMode - Sets how many cards the user can select, either 'single' (radio buttons) or 'multiple' (checkboxes)\n * @extends CoreSelectCardGroupProps\n */\nexport type SelectCardGroupProps = CoreSelectCardGroupProps;\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 * - Automatic tracking ID generation for analytics\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\">Basic Plan</Text>\n * </SelectCard>\n * <SelectCard id=\"premium\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\">Premium Plan</Text>\n * </SelectCard>\n * </SelectCardGroup>\n */\nexport const SelectCardGroup = forwardRef(\n (props: SelectCardGroupProps, ref: Ref<HTMLInputElement>) => {\n return <CoreSelectCardGroup ref={ref} {...props} />;\n },\n);\nSelectCardGroup.displayName = CoreSelectCardGroup.displayName;\n"],"names":["CoreSelectCard","CoreSelectCardGroup"],"mappings":";;;;AAqBO,MAAM,iBAAoB,GAAA,UAAA;AAAA,EAC/B,CAAC,OAAwB,GAA+B,KAAA;AACtD,IAAA,uBAAQ,GAAA,CAAAA,YAAA,EAAA,EAAe,GAAW,EAAA,GAAG,KAAO,EAAA,CAAA;AAAA;AAEhD;AACA,iBAAA,CAAkB,cAAcA,YAAe,CAAA,WAAA;AAwBlC,MAAA,UAAA,GAAa,MAAO,CAAA,MAAA,CAAO,iBAAmB,EAAA;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;AAAA,EA2BzD,KAAO,EAAAC;AACT,CAAC;;ACjCM,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,CAAC,OAA6B,GAA+B,KAAA;AAC3D,IAAA,uBAAQ,GAAA,CAAAA,iBAAA,EAAA,EAAoB,GAAW,EAAA,GAAG,KAAO,EAAA,CAAA;AAAA;AAErD;AACA,eAAA,CAAgB,cAAcA,iBAAoB,CAAA,WAAA;;;;"}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useTrackingId } from './useTrackingId.js';
|
|
3
|
+
import { c as childrenToString } from './childrenToString-Bz9MqbHb-Bz9MqbHb.js';
|
|
4
|
+
import { I as Icon } from './Icon-B6HmlQiR-BxQkO3X5.js';
|
|
5
|
+
import { a as Avatar } from './Avatar-B20IdOEO-Di14brYV.js';
|
|
6
|
+
import { S as SelectTriggerBase, d as defaultItemToString, a as defaultItemToKey } from './SelectTriggerBase-BMhRDkFW-DjkagPpu.js';
|
|
7
|
+
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DWACCL8v-CZNrcQT-.js';
|
|
8
|
+
|
|
9
|
+
import './SelectTrigger.css';const SelectTrigger$1 = function(props) {
|
|
10
|
+
const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
|
|
11
|
+
const {
|
|
12
|
+
className,
|
|
13
|
+
style,
|
|
14
|
+
label,
|
|
15
|
+
size,
|
|
16
|
+
error,
|
|
17
|
+
hint,
|
|
18
|
+
description,
|
|
19
|
+
required,
|
|
20
|
+
moreInfo,
|
|
21
|
+
openMoreInfo,
|
|
22
|
+
prefix,
|
|
23
|
+
suffix,
|
|
24
|
+
maxRows,
|
|
25
|
+
selectedItemProps = () => ({}),
|
|
26
|
+
id,
|
|
27
|
+
placeholder,
|
|
28
|
+
disabled: isDisabled,
|
|
29
|
+
readOnly: isReadOnly,
|
|
30
|
+
onClick,
|
|
31
|
+
multiple,
|
|
32
|
+
onChange,
|
|
33
|
+
disableClearSelection,
|
|
34
|
+
itemToString: itemToStringProp,
|
|
35
|
+
itemToKey: itemToKeyProp,
|
|
36
|
+
selectedItem = null,
|
|
37
|
+
selectedItems = [],
|
|
38
|
+
...rest
|
|
39
|
+
} = componentProps;
|
|
40
|
+
const itemToString = itemToStringProp ?? defaultItemToString;
|
|
41
|
+
const itemToKey = itemToKeyProp ?? defaultItemToKey;
|
|
42
|
+
function removeSelectedItem(item) {
|
|
43
|
+
if (multiple) {
|
|
44
|
+
onChange?.(
|
|
45
|
+
selectedItems.filter(
|
|
46
|
+
(selectedItem2) => itemToKey(selectedItem2) !== itemToKey(item)
|
|
47
|
+
)
|
|
48
|
+
);
|
|
49
|
+
} else if (itemToKey(selectedItem) === itemToKey(item)) {
|
|
50
|
+
onChange?.(null);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
function reset() {
|
|
54
|
+
if (multiple) {
|
|
55
|
+
onChange?.([]);
|
|
56
|
+
} else {
|
|
57
|
+
onChange?.(null);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
const noClearButton = isDisabled || isReadOnly || disableClearSelection;
|
|
61
|
+
const styleCombined = {
|
|
62
|
+
...style,
|
|
63
|
+
...layoutStyles
|
|
64
|
+
};
|
|
65
|
+
return /* @__PURE__ */ jsx(
|
|
66
|
+
SelectTriggerBase,
|
|
67
|
+
{
|
|
68
|
+
"data-anv": "select-trigger",
|
|
69
|
+
className,
|
|
70
|
+
style: styleCombined,
|
|
71
|
+
label,
|
|
72
|
+
size,
|
|
73
|
+
error,
|
|
74
|
+
hint,
|
|
75
|
+
description,
|
|
76
|
+
labelProps: {
|
|
77
|
+
required,
|
|
78
|
+
moreInfo,
|
|
79
|
+
openMoreInfo
|
|
80
|
+
},
|
|
81
|
+
prefix,
|
|
82
|
+
suffix,
|
|
83
|
+
maxRows,
|
|
84
|
+
selectedItemProps,
|
|
85
|
+
id,
|
|
86
|
+
placeholder,
|
|
87
|
+
disabled: isDisabled,
|
|
88
|
+
readOnly: isReadOnly,
|
|
89
|
+
itemToString,
|
|
90
|
+
removeSelectedItem,
|
|
91
|
+
disableClearSelection: noClearButton,
|
|
92
|
+
selectedItem,
|
|
93
|
+
selectedItems,
|
|
94
|
+
onClearButtonClick: reset,
|
|
95
|
+
inputWrapperProps: { onClick },
|
|
96
|
+
inputProps: rest
|
|
97
|
+
}
|
|
98
|
+
);
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
const SelectTrigger = function({
|
|
102
|
+
prefix: prefixProp,
|
|
103
|
+
...props
|
|
104
|
+
}) {
|
|
105
|
+
const data = {
|
|
106
|
+
label: childrenToString(props.label),
|
|
107
|
+
size: props.size,
|
|
108
|
+
required: props.required,
|
|
109
|
+
moreInfo: props.moreInfo,
|
|
110
|
+
openMoreInfo: props.openMoreInfo,
|
|
111
|
+
description: childrenToString(props.description),
|
|
112
|
+
hint: props.hint,
|
|
113
|
+
labelProps: props.labelProps
|
|
114
|
+
};
|
|
115
|
+
const trackingId = useTrackingId({
|
|
116
|
+
name: "ComboboxSearchField",
|
|
117
|
+
data,
|
|
118
|
+
hasOverride: !!props["data-tracking-id"]
|
|
119
|
+
});
|
|
120
|
+
const prefix = prefixProp == null || typeof prefixProp === "string" ? prefixProp : "icon" in prefixProp ? /* @__PURE__ */ jsx(Icon, { ...prefixProp.icon }) : "avatar" in prefixProp ? /* @__PURE__ */ jsx(
|
|
121
|
+
Avatar,
|
|
122
|
+
{
|
|
123
|
+
...prefixProp.avatar,
|
|
124
|
+
size: props.size === "small" ? "small" : "medium"
|
|
125
|
+
}
|
|
126
|
+
) : prefixProp;
|
|
127
|
+
return /* @__PURE__ */ jsx(
|
|
128
|
+
SelectTrigger$1,
|
|
129
|
+
{
|
|
130
|
+
"data-tracking-id": trackingId,
|
|
131
|
+
...props,
|
|
132
|
+
prefix
|
|
133
|
+
}
|
|
134
|
+
);
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
export { SelectTrigger as S };
|
|
138
|
+
//# sourceMappingURL=SelectTrigger-BvUO-g1F.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectTrigger-BvUO-g1F.js","sources":["../../hammer-react/dist/SelectTrigger-D1lfcufw.js","../src/components/SelectTrigger/SelectTrigger.tsx"],"sourcesContent":["import { jsx } from 'react/jsx-runtime';\nimport { S as SelectTriggerBase, d as defaultItemToString, a as defaultItemToKey } from './SelectTriggerBase-BMhRDkFW.js';\nimport { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DWACCL8v.js';\n\nconst SelectTrigger = function(props) {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n style,\n label,\n size,\n error,\n hint,\n description,\n required,\n moreInfo,\n openMoreInfo,\n prefix,\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 const itemToString = itemToStringProp ?? defaultItemToString;\n const itemToKey = itemToKeyProp ?? defaultItemToKey;\n function removeSelectedItem(item) {\n if (multiple) {\n onChange?.(\n selectedItems.filter(\n (selectedItem2) => itemToKey(selectedItem2) !== itemToKey(item)\n )\n );\n } else if (itemToKey(selectedItem) === itemToKey(item)) {\n onChange?.(null);\n }\n }\n function reset() {\n if (multiple) {\n onChange?.([]);\n } else {\n onChange?.(null);\n }\n }\n const noClearButton = isDisabled || isReadOnly || disableClearSelection;\n const styleCombined = {\n ...style,\n ...layoutStyles\n };\n return /* @__PURE__ */ jsx(\n SelectTriggerBase,\n {\n \"data-anv\": \"select-trigger\",\n className,\n style: styleCombined,\n label,\n size,\n error,\n hint,\n description,\n labelProps: {\n required,\n moreInfo,\n openMoreInfo\n },\n prefix,\n suffix,\n maxRows,\n selectedItemProps,\n id,\n placeholder,\n disabled: isDisabled,\n readOnly: isReadOnly,\n itemToString,\n removeSelectedItem,\n disableClearSelection: noClearButton,\n selectedItem,\n selectedItems,\n onClearButtonClick: reset,\n inputWrapperProps: { onClick },\n inputProps: rest\n }\n );\n};\n\nexport { SelectTrigger as S };\n//# sourceMappingURL=SelectTrigger-D1lfcufw.js.map\n","import {\n SelectTriggerProps as CoreSelectTriggerProps,\n SelectTrigger as CoreSelectTrigger,\n childrenToString,\n Icon as CoreIcon,\n IconProps as CoreIconProps,\n Avatar as CoreAvatar,\n AvatarProps as CoreAvatarProps,\n} from \"@servicetitan/hammer-react\";\nimport { useTrackingId } from \"../../hooks/useTrackingId\";\nimport { DataTrackingId } from \"../../types/DataTrackingId\";\nimport { DistributiveOmit } from \"../../types\";\nimport \"./SelectTrigger.scss\";\n\nexport type SelectTriggerProps<Item> = DistributiveOmit<\n CoreSelectTriggerProps<Item>,\n \"prefix\"\n> &\n DataTrackingId & {\n prefix?:\n | string\n | { icon: DistributiveOmit<CoreIconProps, \"size\"> }\n | { avatar: DistributiveOmit<CoreAvatarProps, \"size\"> };\n };\n\nexport const SelectTrigger = function <Item = any>({\n prefix: prefixProp,\n ...props\n}: SelectTriggerProps<Item>) {\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 <CoreIcon {...prefixProp.icon} />\n ) : \"avatar\" in prefixProp ? (\n <CoreAvatar\n {...prefixProp.avatar}\n size={props.size === \"small\" ? \"small\" : \"medium\"}\n />\n ) : (\n prefixProp\n );\n\n return (\n <CoreSelectTrigger<Item>\n data-tracking-id={trackingId}\n {...props}\n prefix={prefix}\n />\n );\n};\n"],"names":["SelectTrigger","CoreIcon","CoreAvatar","CoreSelectTrigger"],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
@layer starter, reset, base, state, application;
|
|
2
|
+
/* REVERT LAYER BUGFIX START */
|
|
3
|
+
[data-anv=select-trigger] input::-moz-placeholder {
|
|
4
|
+
all: revert-layer;
|
|
5
|
+
-webkit-font-smoothing: auto;
|
|
6
|
+
}
|
|
7
|
+
[data-anv=select-trigger] > label,
|
|
8
|
+
[data-anv=select-trigger][data-anv=select-trigger] input,
|
|
9
|
+
[data-anv=select-trigger][data-anv=select-trigger] button,
|
|
10
|
+
[data-anv=select-trigger][data-anv=select-trigger] div[class*=input-wrapper],
|
|
11
|
+
[data-anv=select-trigger] input::placeholder {
|
|
12
|
+
all: revert-layer;
|
|
13
|
+
-webkit-font-smoothing: auto;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* REVERT LAYER BUGFIX END */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectTrigger.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|