npm - @servicetitan/anvil2 - Versions diffs - 2.0.4 → 2.2.0 - Mend

@servicetitan/anvil2 2.0.4 → 2.2.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.

Files changed (225) hide show

package/dist/Radio-BRcpSu-d.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Radio-BRcpSu-d.js","sources":["../src/components/Radio/internal/RadioGroupContext.tsx","../src/components/Radio/RadioGroup.tsx","../../hammer-icon/mdi/two-tone/radio_button_unchecked.svg","../../hammer-icon/mdi/two-tone/radio_button_checked.svg","../src/components/Radio/internal/Radio.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\n/**\n * Context value for RadioGroup\n * @property {boolean} hasError - Whether the group has an error state\n */\nexport type RadioGroupContextValue = {\n /**\n * Whether the radio group has an error state\n */\n hasError: boolean;\n};\n\n/**\n * Context for sharing state between RadioGroup and child Radio components\n */\nexport const RadioGroupContext = createContext<\n RadioGroupContextValue | undefined\n>(undefined);\n\n/**\n * Hook to access RadioGroup context from child Radio components\n * @returns RadioGroupContextValue if inside a RadioGroup, undefined otherwise\n */\nexport const useRadioGroupContext = () => {\n return useContext(RadioGroupContext);\n};\n","import {\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n ReactElement,\n useState,\n useId,\n useMemo,\n} from \"react\";\nimport styles from \"./Radio.module.scss\";\nimport cx from \"classnames\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { SrOnly } from \"../SrOnly\";\nimport { FieldLabel } from \"../FieldLabel\";\nimport { FieldLabelProps } from \"../../internal/types\";\nimport { HelperProps } from \"../../internal/components\";\nimport FieldMessage, { warnDeprecatedErrorUsage } from \"../FieldMessage\";\nimport { RadioGroupContext } from \"./internal/RadioGroupContext\";\n\n/**\n * Props for the RadioGroup component\n * @extends ComponentPropsWithoutRef<\"fieldset\">\n * @extends LayoutUtilProps\n * @extends Omit<FieldLabelProps, \"labelProps\">\n */\nexport type RadioGroupProps = ComponentPropsWithoutRef<\"fieldset\"> &\n LayoutUtilProps &\n Omit<FieldLabelProps, \"labelProps\"> & {\n /**\n * Required flag for label\n * @remarks This does not enforce error when nothing is selected\n */\n required?: boolean;\n\n /**\n * Legend for the fieldset\n */\n legend: string | ReactElement;\n\n /**\n * Error state for the field. Pass `true` to indicate error styling without a message.\n * Pass a string, string[], or ReactElement (deprecated) for error messages.\n */\n error?: boolean | string | ReactElement | string[];\n\n /**\n * @deprecated No longer used. Error messages always use `aria-live=\"assertive\"`.\n */\n errorAriaLive?: HelperProps[\"errorAriaLive\"];\n\n /**\n * Warning message(s) to display. Supports a single string or an array of strings.\n */\n warning?: string | string[];\n\n /**\n * Description text to display below the field.\n */\n description?: HelperProps[\"description\"];\n\n /**\n * Hint text to display below the field.\n */\n hint?: HelperProps[\"hint\"];\n };\n\n/**\n * RadioGroup component for grouping related radio options.\n *\n * Features:\n * - Groups multiple radio options together\n * - Legend support for group labeling\n * - Required field indication\n * - Accessibility support with proper fieldset semantics\n * - Layout utility props for positioning and spacing\n * - Focus and blur event handling\n * - More info support for additional context\n * - Automatic alignment based on flex direction\n *\n * @example\n * <RadioGroup legend=\"Choose your preference\" required>\n * <Radio label=\"Option A\" value=\"a\" />\n * <Radio label=\"Option B\" value=\"b\" />\n * <Radio label=\"Option C\" value=\"c\" />\n * </RadioGroup>\n *\n * @example\n * <RadioGroup\n * legend=\"Horizontal layout\"\n * flexDirection=\"row\"\n * gap=\"4\"\n * >\n * <Radio label=\"Yes\" value=\"yes\" />\n * <Radio label=\"No\" value=\"no\" />\n * </RadioGroup>\n */\nexport const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(\n (props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n children,\n description,\n error,\n errorAriaLive: _errorAriaLive,\n hint,\n warning,\n legend,\n moreInfo,\n onBlur,\n onFocus,\n required,\n style,\n ...rest\n } = componentProps;\n\n const RadioGroupClassNames = cx(styles[\"radio-group\"], className);\n const [openInfo, setOpenInfo] = useState<boolean>(false);\n const helperUid = useId();\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n alignItems:\n layoutStyles?.alignItems ??\n (layoutStyles?.flexDirection === \"row\" ? \"center\" : undefined),\n };\n\n const focusHandler: FocusEventHandler<HTMLFieldSetElement> = (e) => {\n onFocus?.(e);\n setOpenInfo(true);\n };\n\n const blurHandler: FocusEventHandler<HTMLFieldSetElement> = (e) => {\n onBlur?.(e);\n setOpenInfo(false);\n };\n\n warnDeprecatedErrorUsage(\"RadioGroup\", error);\n\n const errorMessages =\n typeof error === \"boolean\" || error === undefined ? undefined : error;\n\n const hasHelperText = hint || errorMessages || warning || description;\n\n const contextValue = useMemo(\n () => ({\n hasError: !!error,\n }),\n [error],\n );\n\n return (\n <fieldset\n role=\"radiogroup\"\n data-anv=\"radio-group\"\n className={RadioGroupClassNames}\n aria-required={required}\n style={styleCombined}\n ref={ref}\n onFocus={focusHandler}\n onBlur={blurHandler}\n {...rest}\n aria-describedby={hasHelperText ? helperUid : undefined}\n >\n <legend className={styles[\"legend\"]}>\n {legend}\n {required && \", required\"}\n {moreInfo && <SrOnly>{moreInfo}</SrOnly>}\n </legend>\n <FieldLabel\n aria-hidden\n moreInfo={moreInfo}\n required={required}\n moreInfoOpen={openInfo}\n >\n {legend}\n </FieldLabel>\n <RadioGroupContext.Provider value={contextValue}>\n <div\n className={styles[\"children\"]}\n style={{\n flexDirection: layoutStyles?.flexDirection,\n gap: layoutStyles?.gap,\n }}\n >\n {children}\n </div>\n </RadioGroupContext.Provider>\n {hasHelperText ? (\n <FieldMessage\n id={helperUid}\n hint={hint}\n error={errorMessages}\n warning={warning}\n description={description}\n />\n ) : null}\n </fieldset>\n );\n },\n);\n\nRadioGroup.displayName = \"RadioGroup\";\n","import * as React from \"react\";\nconst SvgRadioButtonUnchecked = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\" }));\nexport default SvgRadioButtonUnchecked;\n","import * as React from \"react\";\nconst SvgRadioButtonChecked = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\" }), /* @__PURE__ */ React.createElement(\"circle\", { cx: 12, cy: 12, r: 5 }));\nexport default SvgRadioButtonChecked;\n","import {\n forwardRef,\n ComponentPropsWithoutRef,\n ChangeEvent,\n ReactElement,\n useId,\n} from \"react\";\nimport cx from \"classnames\";\nimport { Icon } from \"../../Icon\";\nimport Radio_outline from \"@servicetitan/hammer-icon/mdi/two-tone/radio_button_unchecked.svg\";\nimport Radio_checked from \"@servicetitan/hammer-icon/mdi/two-tone/radio_button_checked.svg\";\nimport styles from \"../Radio.module.scss\";\nimport { LayoutUtilProps, Svg } from \"../../../types\";\nimport { useLayoutPropsUtil } from \"../../../internal/hooks\";\nimport { Helper, HelperProps } from \"../../../internal/components\";\nimport { RadioState } from \"../types\";\nimport { useRadioGroupContext } from \"./RadioGroupContext\";\n\n/**\n * Props for the Radio component\n * @extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\">\n * @extends LayoutUtilProps\n */\nexport type RadioProps = Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\"> &\n LayoutUtilProps & {\n /**\n * Controlled state\n * @default false\n */\n checked?: boolean;\n\n /**\n * Uncontrolled state\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * Callback when radio is changed\n */\n onChange?: (e: ChangeEvent<HTMLInputElement>, state?: RadioState) => void;\n\n /**\n * Label for Radio\n * @remarks This should either be a string or have text content inside for accessibility\n */\n label?: ReactElement | string;\n\n /**\n * Error state for the radio\n * @default false\n */\n error?: boolean;\n\n /**\n * Icon overrides for checked and unchecked states\n */\n icons?: {\n /**\n * Icon to display when radio is checked\n */\n checked?: Svg;\n /**\n * Icon to display when radio is unchecked\n */\n unchecked?: Svg;\n };\n\n /**\n * Description text to display below the radio\n */\n description?: HelperProps[\"description\"];\n\n /**\n * When true, hides the radio for visual users\n * @default false\n */\n hideRadio?: boolean;\n };\n\nconst RadioElement = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n checked,\n defaultChecked,\n value,\n icons,\n error,\n label,\n onChange,\n style,\n description,\n hideRadio = false,\n ...rest\n } = componentProps;\n\n const groupContext = useRadioGroupContext();\n\n const {\n checked: checkedIcon = Radio_checked,\n unchecked: uncheckedIcon = Radio_outline,\n } = { ...icons };\n\n const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(e, { value, checked: e.target.checked });\n };\n\n const helperUid = useId();\n\n // Combine local error state with group error state\n const hasError = error || groupContext?.hasError;\n\n const wrapperClassNames = cx(\n styles[\"wrapper\"],\n { [styles[\"focus\"]]: hideRadio },\n className,\n );\n\n const radioClassNames = cx(styles[\"radio\"], {\n [styles[\"error\"]]: hasError,\n });\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n return (\n <div className={wrapperClassNames} style={styleCombined} data-anv=\"radio\">\n <label className={radioClassNames}>\n <input\n type=\"radio\"\n aria-checked={checked ?? defaultChecked}\n checked={checked}\n defaultChecked={defaultChecked}\n value={value}\n onChange={onChangeHandler}\n aria-describedby={description ? helperUid : undefined}\n ref={ref}\n {...rest}\n />\n\n <span\n className={cx(styles[\"icon-wrapper\"], {\n [styles[\"sr-only\"]]: hideRadio,\n })}\n >\n <Icon\n size=\"large\"\n svg={uncheckedIcon}\n className={cx([styles[\"icon-unchecked\"]])}\n />\n\n <Icon\n size=\"large\"\n svg={checkedIcon}\n className={cx([styles[\"icon-checked\"]])}\n />\n </span>\n\n <span className={cx({ [styles[\"focus-label\"]]: hideRadio })}>\n {label}\n </span>\n </label>\n\n {description ? (\n <div className={styles[\"helper-wrapper\"]}>\n <Helper id={helperUid} description={description} />\n </div>\n ) : null}\n </div>\n );\n});\n\nRadioElement.displayName = \"RadioElement\";\n\n/**\n * Radio component for single selection from a group of options.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Customizable icons for checked and unchecked states\n * - Error state with visual indicators\n * - Description text support\n * - Accessibility support with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Optional radio hiding for visual users\n * - Flexible labeling options\n * - Group support via Radio.Group\n *\n * @example\n * <Radio\n * label=\"Option 1\"\n * value=\"option1\"\n * checked={selectedValue === \"option1\"}\n * onChange={(e, state) => setSelectedValue(state?.value)}\n * />\n *\n * @example\n * <Radio\n * label=\"Custom styled option\"\n * value=\"custom\"\n * icons={{\n * checked: CustomCheckedIcon,\n * unchecked: CustomUncheckedIcon\n * }}\n * description=\"This option has custom styling\"\n * />\n *\n * @example\n * <Radio.Group legend=\"Choose your preference\" required>\n * <Radio label=\"Option A\" value=\"a\" />\n * <Radio label=\"Option B\" value=\"b\" />\n * <Radio label=\"Option C\" value=\"c\" />\n * </Radio.Group>\n */\nexport const Radio = RadioElement;\n"],"names":["Radio_checked","Radio_outline"],"mappings":"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"}

package/dist/{Radio-BwWDJuLF.js → Radio-D7hNws2b.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { R as RadioGroup, a as Radio$1 } from './Radio-31wKzlZ4.js';
+import { R as RadioGroup, a as Radio$1 } from './Radio-BRcpSu-d.js';
 import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
 import { useTrackingId } from './useTrackingId.js';
@@ -57,4 +57,4 @@ const Radio = Object.assign(RadioElement, {
 });
 export { Radio as R };
-//# sourceMappingURL=Radio-BwWDJuLF.js.map
+//# sourceMappingURL=Radio-D7hNws2b.js.map

package/dist/{Radio-BwWDJuLF.js.map → Radio-D7hNws2b.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio-~~BwWDJuLF~~.js","sources":["../src/components/Radio/Radio.tsx"],"sourcesContent":["import { Ref, forwardRef } from \"react\";\nimport {\n RadioProps as CoreRadioProps,\n Radio as CoreRadio,\n} from \"./internal/Radio\";\nimport { RadioGroup } from \"./RadioGroup\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DataTrackingId } from \"../../types\";\nimport { childrenToString } from \"../../internal/functions\";\n\n/*\n Props for the Radio component\n * @property {boolean} [checked] - Controlled state\n * @property {boolean} [defaultChecked] - Uncontrolled state\n * @property {Function} [onChange] - Callback when radio is changed\n * @property {ReactElement \| string} [label] - Label for Radio\n * @property {boolean} [error] - Error state for the radio\n * @property {object} [icons] - Icon overrides for checked and unchecked states\n * @property {string} [description] - Description text to display below the radio\n * @property {string} [aria-label] - Accessible label for the radio\n * @property {string} [aria-labelledby] - ID of element that labels the radio\n * @property {string} [name] - Name attribute for the radio\n * @property {string} [data-tracking-id] - Custom tracking ID for analytics\n * @extends DataTrackingId\n /\nexport type RadioProps = Omit<CoreRadioProps, \"hideRadio\"> & DataTrackingId;\n\nconst RadioElement = forwardRef(\n (props: RadioProps, ref: Ref<HTMLInputElement>) => {\n const data = {\n label: childrenToString(props.label),\n ariaLabel: props[\"aria-label\"],\n ariaLabelledBy: props[\"aria-labelledby\"],\n name: props.name,\n value: props.value,\n };\n\n const trackingId = useTrackingId({\n name: \"Radio\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n return <CoreRadio ref={ref} data-tracking-id={trackingId} {...props} />;\n },\n);\n\nRadioElement.displayName = CoreRadio?.displayName ?? \"RadioElement\";\n\n/\n Radio component for single selection from a group of options.\n \n Features:\n * - Supports both controlled and uncontrolled modes\n * - Customizable icons for checked and unchecked states\n * - Error state with visual indicators\n * - Description text support\n * - Accessibility support with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Flexible labeling options\n * - Group support via Radio.Group\n * - Automatic tracking ID generation for analytics\n \n @example\n * <Radio\n * label=\"Option 1\"\n * value=\"option1\"\n * checked={selectedValue === \"option1\"}\n * onChange={(e, state) => setSelectedValue(state?.value)}\n * />\n \n @example\n * <Radio\n * label=\"Custom styled option\"\n * value=\"custom\"\n * icons={{\n * checked: CustomCheckedIcon,\n * unchecked: CustomUncheckedIcon\n * }}\n * description=\"This option has custom styling\"\n * />\n \n @example\n * <Radio.Group legend=\"Choose your preference\" required>\n * <Radio label=\"Option A\" value=\"a\" />\n * <Radio label=\"Option B\" value=\"b\" />\n * <Radio label=\"Option C\" value=\"c\" />\n * </Radio.Group>\n /\nexport const Radio = Object.assign(RadioElement, {\n /\n RadioGroup component for grouping related radio options.\n \n Features:\n * - Groups multiple radio options together\n * - Legend support for group labeling\n * - Required field indication\n * - Accessibility support with proper fieldset semantics\n * - Layout utility props for positioning and spacing\n * - Focus and blur event handling\n * - More info support for additional context\n * - Automatic alignment based on flex direction\n \n @example\n * <RadioGroup legend=\"Choose your preference\" required>\n * <Radio label=\"Option A\" value=\"a\" />\n * <Radio label=\"Option B\" value=\"b\" />\n * <Radio label=\"Option C\" value=\"c\" />\n * </RadioGroup>\n \n @example\n * <RadioGroup\n * legend=\"Horizontal layout\"\n * flexDirection=\"row\"\n * gap=\"4\"\n * >\n * <Radio label=\"Yes\" value=\"yes\" />\n * <Radio label=\"No\" value=\"no\" />\n * </RadioGroup>\n */\n Group: RadioGroup,\n});\n"],"names":["CoreRadio"],"mappings":";;;;;;AA2BA,MAAM,YAAA,GAAe,UAAA;AAAA,EACnB,CAAC,OAAmB,GAAA,KAA+B;AACjD,IAAA,MAAM,IAAA,GAAO;AAAA,MACX,KAAA,EAAO,gBAAA,CAAiB,KAAA,CAAM,KAAK,CAAA;AAAA,MACnC,SAAA,EAAW,MAAM,YAAY,CAAA;AAAA,MAC7B,cAAA,EAAgB,MAAM,iBAAiB,CAAA;AAAA,MACvC,MAAM,KAAA,CAAM,IAAA;AAAA,MACZ,OAAO,KAAA,CAAM;AAAA,KACf;AAEA,IAAA,MAAM,aAAa,aAAA,CAAc;AAAA,MAC/B,IAAA,EAAM,OAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAA,EAAa,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AACD,IAAA,2BAAQA,OAAA,EAAA,EAAU,GAAA,EAAU,kBAAA,EAAkB,UAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AAAA,EACvE;AACF,CAAA;AAEA,YAAA,CAAa,WAAA,GAAcA,SAAW,WAAA,IAAe,cAAA;AA0C9C,MAAM,KAAA,GAAQ,MAAA,CAAO,MAAA,CAAO,YAAA,EAAc;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;AAAA;AAAA;AAAA;AAAA,EA+B/C,KAAA,EAAO;AACT,CAAC;;;;"}
1	+ {"version":3,"file":"Radio-D7hNws2b.js","sources":["../src/components/Radio/Radio.tsx"],"sourcesContent":["import { Ref, forwardRef } from \"react\";\nimport {\n RadioProps as CoreRadioProps,\n Radio as CoreRadio,\n} from \"./internal/Radio\";\nimport { RadioGroup } from \"./RadioGroup\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DataTrackingId } from \"../../types\";\nimport { childrenToString } from \"../../internal/functions\";\n\n/*\n Props for the Radio component\n * @property {boolean} [checked] - Controlled state\n * @property {boolean} [defaultChecked] - Uncontrolled state\n * @property {Function} [onChange] - Callback when radio is changed\n * @property {ReactElement \| string} [label] - Label for Radio\n * @property {boolean} [error] - Error state for the radio\n * @property {object} [icons] - Icon overrides for checked and unchecked states\n * @property {string} [description] - Description text to display below the radio\n * @property {string} [aria-label] - Accessible label for the radio\n * @property {string} [aria-labelledby] - ID of element that labels the radio\n * @property {string} [name] - Name attribute for the radio\n * @property {string} [data-tracking-id] - Custom tracking ID for analytics\n * @extends DataTrackingId\n /\nexport type RadioProps = Omit<CoreRadioProps, \"hideRadio\"> & DataTrackingId;\n\nconst RadioElement = forwardRef(\n (props: RadioProps, ref: Ref<HTMLInputElement>) => {\n const data = {\n label: childrenToString(props.label),\n ariaLabel: props[\"aria-label\"],\n ariaLabelledBy: props[\"aria-labelledby\"],\n name: props.name,\n value: props.value,\n };\n\n const trackingId = useTrackingId({\n name: \"Radio\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n return <CoreRadio ref={ref} data-tracking-id={trackingId} {...props} />;\n },\n);\n\nRadioElement.displayName = CoreRadio?.displayName ?? \"RadioElement\";\n\n/\n Radio component for single selection from a group of options.\n \n Features:\n * - Supports both controlled and uncontrolled modes\n * - Customizable icons for checked and unchecked states\n * - Error state with visual indicators\n * - Description text support\n * - Accessibility support with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Flexible labeling options\n * - Group support via Radio.Group\n * - Automatic tracking ID generation for analytics\n \n @example\n * <Radio\n * label=\"Option 1\"\n * value=\"option1\"\n * checked={selectedValue === \"option1\"}\n * onChange={(e, state) => setSelectedValue(state?.value)}\n * />\n \n @example\n * <Radio\n * label=\"Custom styled option\"\n * value=\"custom\"\n * icons={{\n * checked: CustomCheckedIcon,\n * unchecked: CustomUncheckedIcon\n * }}\n * description=\"This option has custom styling\"\n * />\n \n @example\n * <Radio.Group legend=\"Choose your preference\" required>\n * <Radio label=\"Option A\" value=\"a\" />\n * <Radio label=\"Option B\" value=\"b\" />\n * <Radio label=\"Option C\" value=\"c\" />\n * </Radio.Group>\n /\nexport const Radio = Object.assign(RadioElement, {\n /\n RadioGroup component for grouping related radio options.\n \n Features:\n * - Groups multiple radio options together\n * - Legend support for group labeling\n * - Required field indication\n * - Accessibility support with proper fieldset semantics\n * - Layout utility props for positioning and spacing\n * - Focus and blur event handling\n * - More info support for additional context\n * - Automatic alignment based on flex direction\n \n @example\n * <RadioGroup legend=\"Choose your preference\" required>\n * <Radio label=\"Option A\" value=\"a\" />\n * <Radio label=\"Option B\" value=\"b\" />\n * <Radio label=\"Option C\" value=\"c\" />\n * </RadioGroup>\n \n @example\n * <RadioGroup\n * legend=\"Horizontal layout\"\n * flexDirection=\"row\"\n * gap=\"4\"\n * >\n * <Radio label=\"Yes\" value=\"yes\" />\n * <Radio label=\"No\" value=\"no\" />\n * </RadioGroup>\n */\n Group: RadioGroup,\n});\n"],"names":["CoreRadio"],"mappings":";;;;;;AA2BA,MAAM,YAAA,GAAe,UAAA;AAAA,EACnB,CAAC,OAAmB,GAAA,KAA+B;AACjD,IAAA,MAAM,IAAA,GAAO;AAAA,MACX,KAAA,EAAO,gBAAA,CAAiB,KAAA,CAAM,KAAK,CAAA;AAAA,MACnC,SAAA,EAAW,MAAM,YAAY,CAAA;AAAA,MAC7B,cAAA,EAAgB,MAAM,iBAAiB,CAAA;AAAA,MACvC,MAAM,KAAA,CAAM,IAAA;AAAA,MACZ,OAAO,KAAA,CAAM;AAAA,KACf;AAEA,IAAA,MAAM,aAAa,aAAA,CAAc;AAAA,MAC/B,IAAA,EAAM,OAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAA,EAAa,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AACD,IAAA,2BAAQA,OAAA,EAAA,EAAU,GAAA,EAAU,kBAAA,EAAkB,UAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AAAA,EACvE;AACF,CAAA;AAEA,YAAA,CAAa,WAAA,GAAcA,SAAW,WAAA,IAAe,cAAA;AA0C9C,MAAM,KAAA,GAAQ,MAAA,CAAO,MAAA,CAAO,YAAA,EAAc;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;AAAA;AAAA;AAAA;AAAA,EA+B/C,KAAA,EAAO;AACT,CAAC;;;;"}

package/dist/Radio.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export { R as Radio, R as default } from './Radio-BwWDJuLF.js';
+export { R as Radio, R as default } from './Radio-D7hNws2b.js';
 //# sourceMappingURL=Radio.js.map

package/dist/{SelectCard-C91twG1S.js → SelectCard-Bag44PmE.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useContext, createContext, useState, useId, forwardRef, useLayoutEffect } from 'react';
 import { c as cx } from './index-SvGbrGuT.js';
-import { C as CheckboxGroup, a as Checkbox } from './Checkbox-9VbydUcM.js';
-import { R as RadioGroup, a as Radio, S as SvgRadioButtonUnchecked, b as SvgRadioButtonChecked } from './Radio-31wKzlZ4.js';
+import { C as CheckboxGroup, a as Checkbox } from './Checkbox-DIY-6agd.js';
+import { R as RadioGroup, a as Radio, S as SvgRadioButtonUnchecked, b as SvgRadioButtonChecked } from './Radio-BRcpSu-d.js';
 import { C as Card } from './Card-DDH7gI8m.js';
 import { I as Icon } from './Icon-Bcil6aBo.js';
 import { a as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './indeterminate_check_box-B4zobNlt.js';
@@ -284,4 +284,4 @@ const SelectCard = Object.assign(SelectCardElement, {
 });
 export { SelectCard as S };
-//# sourceMappingURL=SelectCard-C91twG1S.js.map
+//# sourceMappingURL=SelectCard-Bag44PmE.js.map

package/dist/{SelectCard-C91twG1S.js.map → SelectCard-Bag44PmE.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectCard-C91twG1S.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`, 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, 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/\n SelectCardProvider component for managing selection state across SelectCard components.\n \n Features:\n * - Provides context for SelectCard components to share selection state\n * - Manages selection mode (single vs multiple)\n * - Handles selection state updates and callbacks\n * - Generates unique radio button names for single selection mode\n * - Maintains a set of selected card IDs\n * - Integrates with SelectCardGroup for automatic context provision\n \n @example\n * <SelectCardProvider\n * selectionMode=\"multiple\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n * <SelectCard id=\"1\" onChange={() => {}}>Option 1</SelectCard>\n * <SelectCard id=\"2\" onChange={() => {}}>Option 2</SelectCard>\n * </SelectCardProvider>\n /\nexport const SelectCardProvider = ({\n children,\n onChange,\n selectionMode,\n showSelectIndicator,\n}: ISelectCardProviderProps) => {\n const [selection, setSelection] = useState<Set<string \| number>>(new Set());\n\n const radioName = useId();\n\n const handleChange = (\n e?: ChangeEvent<HTMLInputElement>,\n state?: ISelectCardState,\n options?: ISelectCardOnChangeOptions,\n ) => {\n if (!state \|\| !state.id) {\n if (!options?.internal) {\n onChange?.(e, state);\n }\n\n return;\n }\n\n // Set internal selection\n if (selectionMode === \"single\") {\n if (state.checked) {\n setSelection(new Set([state.id]));\n } else {\n setSelection(new Set());\n }\n } else {\n if (state.checked) {\n setSelection(selection.add(state.id));\n } else {\n selection.delete(state.id);\n setSelection(selection);\n }\n }\n\n if (!options?.internal) {\n onChange?.(e, state);\n }\n };\n\n const context = {\n selectionMode,\n onChange: handleChange,\n radioName,\n selection,\n 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 extends Omit<\n ISelectCardContext,\n \"radioName\" \| \"selection\"\n> {\n /\n Associates the legend with content below.\n /\n ariaLabelledBy?: string;\n\n children?: ReactNode;\n\n /\n Sets the legend on the group.\n /\n legend: CheckboxGroupProps[\"legend\"];\n\n /\n When `true`, sets \"required\" text in label.\n * @accessibility This does not enforce error when nothing is selected.\n * @default false\n /\n required?: boolean;\n\n /\n 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/\n SelectCardGroup component for managing groups of selectable cards.\n \n Features:\n * - Manages selection state for multiple SelectCard components\n * - Supports both single and multiple selection modes\n * - Provides proper accessibility with legends and ARIA labels\n * - Handles required field validation\n * - Automatic radio button grouping for single selection\n * - Context provider for child SelectCard components\n * - Integrates with CheckboxGroup and RadioGroup for proper form semantics\n \n @example\n * <SelectCardGroup\n * legend=\"Choose your plan\"\n * selectionMode=\"single\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n * <SelectCard id=\"basic\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\" el=\"h3\">Basic Plan</Text>\n * </SelectCard>\n * <SelectCard id=\"premium\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\" el=\"h3\">Premium Plan</Text>\n * </SelectCard>\n * </SelectCardGroup>\n /\nexport const SelectCardGroup = forwardRef<\n HTMLInputElement,\n SelectCardGroupProps\n>((props, _ref) => {\n const {\n ariaLabelledBy,\n children,\n legend,\n onChange,\n required = false,\n selectionMode,\n showSelectIndicator = false,\n ...rest\n } = props;\n\n return (\n <SelectCardProvider\n onChange={onChange}\n selectionMode={selectionMode}\n showSelectIndicator={showSelectIndicator}\n >\n {selectionMode === \"multiple\" && (\n <CheckboxGroup\n aria-labelledby={ariaLabelledBy}\n legend={legend}\n required={required}\n {...rest}\n >\n {children}\n </CheckboxGroup>\n )}\n {selectionMode === \"single\" && (\n <RadioGroup\n aria-labelledby={ariaLabelledBy}\n legend={legend}\n required={required}\n {...rest}\n >\n {children}\n </RadioGroup>\n )}\n </SelectCardProvider>\n );\n});\n\nSelectCardGroup.displayName = \"SelectCardGroup\";\n","import { useLayoutEffect, useState, forwardRef, type ChangeEvent } from \"react\";\nimport cx from \"classnames\";\n\nimport { SelectCardGroup } from \"./SelectCardGroup\";\nimport { Card, CardProps } from \"../Card\";\nimport { Radio, RadioProps } from \"../Radio/internal/Radio\";\nimport { Checkbox, CheckboxProps } from \"../Checkbox/internal/Checkbox\";\nimport { useOptionallyControlledState } from \"../../internal/hooks\";\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 state.\n /\n defaultChecked?: boolean;\n\n /\n When `true`, disables the card.\n /\n disabled?: boolean;\n\n /\n When `true`, sets error styling on the card.\n /\n errored?: boolean;\n\n /\n A unique identifier for the card, used to track the selection state.\n /\n id: string \| number;\n\n /\n Function called on selection state change.\n /\n onChange?: (value: boolean) => void;\n\n /\n Passes props to the underlying `<Radio />` component.\n /\n radioProps?: Omit<RadioProps, \"label\">;\n\n /\n Removes the drop shadow effect on the card.\n /\n removeDropShadow?: boolean;\n\n /\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\n // we need to re-render after setting the initial selection state on context\n const [_, setForceRenderCount] = useState(0);\n useLayoutEffect(() => {\n if (defaultCheckedProp) {\n context?.onChange?.(\n undefined,\n {\n id,\n checked: defaultCheckedProp,\n },\n { internal: true },\n );\n\n setForceRenderCount((prev) => prev + 1);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleChange = (event?: ChangeEvent<HTMLInputElement>) => {\n const newChecked = event ? event.target.checked : false;\n setChecked(newChecked);\n context?.onChange?.(event, {\n id,\n checked: newChecked,\n });\n };\n\n // A selection in the group context supersedes the normal checked state of the card\n const isChecked = context ? context.selection.has(id) : checked;\n const showIndicator = context?.showSelectIndicator \|\| showSelectIndicator;\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 return (\n <>\n {(!context \|\| context?.selectionMode === \"multiple\") && (\n <Checkbox\n {...checkboxProps}\n defaultChecked={defaultCheckedProp}\n onChange={handleChange}\n disabled={disabled}\n ref={ref}\n label={\n <Card\n {...rest}\n className={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={CheckboxChecked}\n className={styles[\"icon-checked\"]}\n />\n\n <Icon\n size=\"large\"\n svg={CheckboxOutline}\n className={styles[\"icon-unchecked\"]}\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 defaultChecked={defaultCheckedProp}\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={RadioOutline}\n className={styles[\"icon-unchecked\"]}\n />\n\n <Icon\n size=\"large\"\n svg={RadioChecked}\n className={styles[\"icon-checked\"]}\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","RadioOutline","RadioChecked"],"mappings":"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"}
1	+ {"version":3,"file":"SelectCard-Bag44PmE.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`, 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, 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/\n SelectCardProvider component for managing selection state across SelectCard components.\n \n Features:\n * - Provides context for SelectCard components to share selection state\n * - Manages selection mode (single vs multiple)\n * - Handles selection state updates and callbacks\n * - Generates unique radio button names for single selection mode\n * - Maintains a set of selected card IDs\n * - Integrates with SelectCardGroup for automatic context provision\n \n @example\n * <SelectCardProvider\n * selectionMode=\"multiple\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n * <SelectCard id=\"1\" onChange={() => {}}>Option 1</SelectCard>\n * <SelectCard id=\"2\" onChange={() => {}}>Option 2</SelectCard>\n * </SelectCardProvider>\n /\nexport const SelectCardProvider = ({\n children,\n onChange,\n selectionMode,\n showSelectIndicator,\n}: ISelectCardProviderProps) => {\n const [selection, setSelection] = useState<Set<string \| number>>(new Set());\n\n const radioName = useId();\n\n const handleChange = (\n e?: ChangeEvent<HTMLInputElement>,\n state?: ISelectCardState,\n options?: ISelectCardOnChangeOptions,\n ) => {\n if (!state \|\| !state.id) {\n if (!options?.internal) {\n onChange?.(e, state);\n }\n\n return;\n }\n\n // Set internal selection\n if (selectionMode === \"single\") {\n if (state.checked) {\n setSelection(new Set([state.id]));\n } else {\n setSelection(new Set());\n }\n } else {\n if (state.checked) {\n setSelection(selection.add(state.id));\n } else {\n selection.delete(state.id);\n setSelection(selection);\n }\n }\n\n if (!options?.internal) {\n onChange?.(e, state);\n }\n };\n\n const context = {\n selectionMode,\n onChange: handleChange,\n radioName,\n selection,\n 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 extends Omit<\n ISelectCardContext,\n \"radioName\" \| \"selection\"\n> {\n /\n Associates the legend with content below.\n /\n ariaLabelledBy?: string;\n\n children?: ReactNode;\n\n /\n Sets the legend on the group.\n /\n legend: CheckboxGroupProps[\"legend\"];\n\n /\n When `true`, sets \"required\" text in label.\n * @accessibility This does not enforce error when nothing is selected.\n * @default false\n /\n required?: boolean;\n\n /\n 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/\n SelectCardGroup component for managing groups of selectable cards.\n \n Features:\n * - Manages selection state for multiple SelectCard components\n * - Supports both single and multiple selection modes\n * - Provides proper accessibility with legends and ARIA labels\n * - Handles required field validation\n * - Automatic radio button grouping for single selection\n * - Context provider for child SelectCard components\n * - Integrates with CheckboxGroup and RadioGroup for proper form semantics\n \n @example\n * <SelectCardGroup\n * legend=\"Choose your plan\"\n * selectionMode=\"single\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n * <SelectCard id=\"basic\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\" el=\"h3\">Basic Plan</Text>\n * </SelectCard>\n * <SelectCard id=\"premium\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\" el=\"h3\">Premium Plan</Text>\n * </SelectCard>\n * </SelectCardGroup>\n /\nexport const SelectCardGroup = forwardRef<\n HTMLInputElement,\n SelectCardGroupProps\n>((props, _ref) => {\n const {\n ariaLabelledBy,\n children,\n legend,\n onChange,\n required = false,\n selectionMode,\n showSelectIndicator = false,\n ...rest\n } = props;\n\n return (\n <SelectCardProvider\n onChange={onChange}\n selectionMode={selectionMode}\n showSelectIndicator={showSelectIndicator}\n >\n {selectionMode === \"multiple\" && (\n <CheckboxGroup\n aria-labelledby={ariaLabelledBy}\n legend={legend}\n required={required}\n {...rest}\n >\n {children}\n </CheckboxGroup>\n )}\n {selectionMode === \"single\" && (\n <RadioGroup\n aria-labelledby={ariaLabelledBy}\n legend={legend}\n required={required}\n {...rest}\n >\n {children}\n </RadioGroup>\n )}\n </SelectCardProvider>\n );\n});\n\nSelectCardGroup.displayName = \"SelectCardGroup\";\n","import { useLayoutEffect, useState, forwardRef, type ChangeEvent } from \"react\";\nimport cx from \"classnames\";\n\nimport { SelectCardGroup } from \"./SelectCardGroup\";\nimport { Card, CardProps } from \"../Card\";\nimport { Radio, RadioProps } from \"../Radio/internal/Radio\";\nimport { Checkbox, CheckboxProps } from \"../Checkbox/internal/Checkbox\";\nimport { useOptionallyControlledState } from \"../../internal/hooks\";\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 state.\n /\n defaultChecked?: boolean;\n\n /\n When `true`, disables the card.\n /\n disabled?: boolean;\n\n /\n When `true`, sets error styling on the card.\n /\n errored?: boolean;\n\n /\n A unique identifier for the card, used to track the selection state.\n /\n id: string \| number;\n\n /\n Function called on selection state change.\n /\n onChange?: (value: boolean) => void;\n\n /\n Passes props to the underlying `<Radio />` component.\n /\n radioProps?: Omit<RadioProps, \"label\">;\n\n /\n Removes the drop shadow effect on the card.\n /\n removeDropShadow?: boolean;\n\n /\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\n // we need to re-render after setting the initial selection state on context\n const [_, setForceRenderCount] = useState(0);\n useLayoutEffect(() => {\n if (defaultCheckedProp) {\n context?.onChange?.(\n undefined,\n {\n id,\n checked: defaultCheckedProp,\n },\n { internal: true },\n );\n\n setForceRenderCount((prev) => prev + 1);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleChange = (event?: ChangeEvent<HTMLInputElement>) => {\n const newChecked = event ? event.target.checked : false;\n setChecked(newChecked);\n context?.onChange?.(event, {\n id,\n checked: newChecked,\n });\n };\n\n // A selection in the group context supersedes the normal checked state of the card\n const isChecked = context ? context.selection.has(id) : checked;\n const showIndicator = context?.showSelectIndicator \|\| showSelectIndicator;\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 return (\n <>\n {(!context \|\| context?.selectionMode === \"multiple\") && (\n <Checkbox\n {...checkboxProps}\n defaultChecked={defaultCheckedProp}\n onChange={handleChange}\n disabled={disabled}\n ref={ref}\n label={\n <Card\n {...rest}\n className={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={CheckboxChecked}\n className={styles[\"icon-checked\"]}\n />\n\n <Icon\n size=\"large\"\n svg={CheckboxOutline}\n className={styles[\"icon-unchecked\"]}\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 defaultChecked={defaultCheckedProp}\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={RadioOutline}\n className={styles[\"icon-unchecked\"]}\n />\n\n <Icon\n size=\"large\"\n svg={RadioChecked}\n className={styles[\"icon-checked\"]}\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","RadioOutline","RadioChecked"],"mappings":"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"}

package/dist/SelectCard.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export { S as SelectCard, S as default } from './SelectCard-C91twG1S.js';
+export { S as SelectCard, S as default } from './SelectCard-Bag44PmE.js';
 //# sourceMappingURL=SelectCard.js.map

package/dist/SelectField.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-BFsJssdD.js';
+export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-CigqXq3T.js';
 //# sourceMappingURL=SelectField.js.map

package/dist/{SelectFieldSync-BFsJssdD.js → SelectFieldSync-CigqXq3T.js} RENAMED Viewed

@@ -1,25 +1,28 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback, useState, useMemo, useRef, forwardRef, useId, useImperativeHandle, useEffect } from 'react';
 import { u as useDownshiftEnvironment, a as useCombobox, m as matchSorter } from './match-sorter.esm-B3vwg1-X.js';
-import { useCallback, useState, useMemo, forwardRef, useRef, useId, useImperativeHandle, useEffect } from 'react';
-import { F as FieldListBase, a as usePinnedOptions, b as useGroupedOptions, s as sortGroupSections, u as useAdaptiveView, D as DEFAULT_PAGE_SIZE, c as useSelectFieldLoading, d as useDebouncedCallback, S as SelectFieldLabel, e as FieldDialog, f as FieldPopover } from './FieldDialog-Be54L3E-.js';
+import { V as VirtualizedFieldListBase, F as FieldListBase, a as usePinnedOptions, b as useGroupedOptions, s as sortGroupSections, u as useAdaptiveView, D as DEFAULT_PAGE_SIZE, c as useSelectFieldLoading, d as useDebouncedCallback, S as SelectFieldLabel, e as FieldDialog, f as FieldPopover } from './FieldDialog-CAuhkCZY.js';
 import { s as styles } from './SelectTriggerBase.module-B0NFRlQP.js';
 import { c as cx } from './index-SvGbrGuT.js';
 import { B as Button } from './Button-l7pTJdPc.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
+import { F as FieldMessage } from './FieldMessage-DS0COrjp.js';
+import { w as warnDeprecatedErrorUsage } from './utils-pudAMGnO.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-loxbyklF.js';
-import { F as FieldMessage } from './FieldMessage-tEr6rWXS.js';
 const SelectFieldList = ({
   selectedOption,
+  virtualize,
   ...rest
 }) => {
   const getCheckedState = useCallback(
     (item) => selectedOption?.id === item.original.id ? "checked" : "unchecked",
     [selectedOption]
   );
+  const ListComponent = virtualize ? VirtualizedFieldListBase : FieldListBase;
   return /* @__PURE__ */ jsx(
-    FieldListBase,
+    ListComponent,
     {
       ...rest,
       selectionType: "single",
@@ -125,7 +128,8 @@ const useCombo = ({
   onIsOpenChange,
   displayAs = "popover",
   disableHighlightOnOpen = false,
-  disabled
+  disabled,
+  virtualize = false
 }) => {
   const [inputValue, setInputValue] = useState(selectedOption?.label ?? "");
   const effectiveSearchValue = selectedOption?.label === inputValue ? "" : inputValue;
@@ -203,6 +207,7 @@ const useCombo = ({
     return selectedOption ? mapOptionToDownshiftItem(selectedOption) : null;
   }, [selectedOption]);
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const highlightChangeTypeRef = useRef("");
   const {
     isOpen,
     highlightedIndex,
@@ -238,6 +243,9 @@ const useCombo = ({
       setInputValue(changes.inputValue ?? "");
       onInputValueChange?.(changes);
     },
+    onHighlightedIndexChange: ({ type }) => {
+      highlightChangeTypeRef.current = type;
+    },
     onIsOpenChange: (changes) => {
       onIsOpenChange?.(changes);
       if (changes.isOpen && !disableHighlightOnOpen) {
@@ -251,7 +259,9 @@ const useCombo = ({
     itemToString(item) {
       return item?.original.label ?? "";
     },
-    stateReducer: (state, actionAndChanges) => stateReducer(state, actionAndChanges, displayAs)
+    stateReducer: (state, actionAndChanges) => stateReducer(state, actionAndChanges, displayAs),
+    ...virtualize && { scrollIntoView: () => {
+    } }
   });
   return {
     inputValue,
@@ -262,6 +272,7 @@ const useCombo = ({
     getInputProps,
     getItemProps,
     highlightedIndex,
+    highlightChangeTypeRef,
     isOpen,
     downshiftItems,
     sectionsMeta,
@@ -337,30 +348,26 @@ const SelectField = forwardRef(
       error,
       hint,
       description,
-      errorAriaLive: errorAriaLiveProp = "assertive",
+      errorAriaLive: _errorAriaLive,
       required,
       disabled,
       readOnly,
       prefix,
       suffix,
+      warning,
       className,
       style,
-      pinned
+      pinned,
+      virtualize
     } = componentProps;
     const groupToString = "groupToString" in componentProps ? componentProps.groupToString : void 0;
     const groupSorter = "groupSorter" in componentProps ? componentProps.groupSorter : void 0;
     const autoId = useId();
     const id = idProp ?? autoId;
     const helperUid = useId();
-    const [shouldAriaLive, setShouldAriaLive] = useState(false);
-    const handleFocus = () => {
-      setShouldAriaLive(true);
-    };
-    const handleBlur = () => {
-      setShouldAriaLive(false);
-    };
-    const errorMessage = typeof error !== "boolean" ? error : void 0;
-    const hasHelperText = hint || errorMessage || description;
+    warnDeprecatedErrorUsage("SelectField", error);
+    const errorMessages = typeof error === "boolean" || error === void 0 ? void 0 : error;
+    const hasHelperText = hint || errorMessages || warning || description;
     const isDisabledOrReadOnly = (disabled || readOnly) ?? false;
     const { isMobile } = useAdaptiveView();
     const displayAs = displayMenuAsProp === "auto" ? isMobile ? "dialog" : "popover" : displayMenuAsProp;
@@ -414,7 +421,17 @@ const SelectField = forwardRef(
       loadMore,
       clearCache
     } = useSelectFieldLoading(loadingHookConfig);
-    useImperativeHandle(ref, () => ({ clearCache }), [clearCache]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        clearCache,
+        invalidate: () => {
+          clearCache();
+          setInitialLoadPerformed(false);
+        }
+      }),
+      [clearCache]
+    );
     const debouncedOptionLoader = useDebouncedCallback((inputValue2) => {
       loadOptions(selectedOption?.label === inputValue2 ? "" : inputValue2, {
         initial: true
@@ -438,6 +455,7 @@ const SelectField = forwardRef(
       getInputProps,
       wrapperDivRef,
       highlightedIndex,
+      highlightChangeTypeRef,
       getItemProps,
       inputValue,
       downshiftItems,
@@ -451,6 +469,7 @@ const SelectField = forwardRef(
       groupToString,
       groupSorter,
       selectedOption,
+      virtualize,
       onSelectedOptionChange: (selectedOption2) => {
         onSelectedOptionChange(selectedOption2);
       },
@@ -519,9 +538,7 @@ const SelectField = forwardRef(
                 id: `${id}-input`,
                 inputProps: getInputProps({
                   "aria-describedby": hasHelperText ? helperUid : void 0,
-                  "aria-invalid": error ? true : void 0,
-                  onFocus: handleFocus,
-                  onBlur: handleBlur
+                  "aria-invalid": error ? true : void 0
                 }),
                 size,
                 error: !!error,
@@ -534,8 +551,8 @@ const SelectField = forwardRef(
               {
                 id: helperUid,
                 hint,
-                errorMessage,
-                errorAriaLive: isOpen || shouldAriaLive ? errorAriaLiveProp : "off",
+                error: errorMessages,
+                warning,
                 description
               }
             ) : null,
@@ -576,16 +593,14 @@ const SelectField = forwardRef(
                     getMenuProps,
                     getItemProps,
                     highlightedIndex,
+                    highlightChangeTypeRef,
                     selectedOption,
                     hasMore,
                     onLoadMore: handleLoadMore,
                     loading,
                     loadingMore,
                     disabled: isDisabledOrReadOnly,
-                    style: {
-                      paddingInline: 24,
-                      paddingBlockEnd: 24
-                    }
+                    virtualize
                   }
                 )
               }
@@ -619,9 +634,7 @@ const SelectField = forwardRef(
               inputProps: getInputProps({
                 popovertarget: `${id}-popover`,
                 "aria-describedby": hasHelperText ? helperUid : void 0,
-                "aria-invalid": error ? true : void 0,
-                onFocus: handleFocus,
-                onBlur: handleBlur
+                "aria-invalid": error ? true : void 0
               }),
               toggleButtonProps: getToggleButtonProps(),
               disableToggleButton: false,
@@ -642,8 +655,8 @@ const SelectField = forwardRef(
             {
               id: helperUid,
               hint,
-              errorMessage,
-              errorAriaLive: isOpen || shouldAriaLive ? errorAriaLiveProp : "off",
+              error: errorMessages,
+              warning,
               description
             }
           ) : null,
@@ -663,15 +676,14 @@ const SelectField = forwardRef(
                   getMenuProps,
                   getItemProps,
                   highlightedIndex,
+                  highlightChangeTypeRef,
                   selectedOption,
                   hasMore,
                   onLoadMore: handleLoadMore,
                   loading,
                   loadingMore,
                   disabled: isDisabledOrReadOnly,
-                  style: {
-                    padding: 8
-                  }
+                  virtualize
                 }
               )
             }
@@ -683,11 +695,14 @@ const SelectField = forwardRef(
 );
 SelectField.displayName = "SelectField";
-const defaultFilter = (options, searchValue) => {
-  return matchSorter(options, searchValue, {
-    keys: ["label", "searchText"]
-  });
-};
+const defaultFilter = (options, searchValue) => matchSorter(options, searchValue, {
+  keys: ["label", "searchText"],
+  baseSort: (a, b) => a.index - b.index
+});
+const toFilterFn = (filter) => typeof filter === "function" ? filter : (options, searchValue) => matchSorter(options, searchValue, {
+  baseSort: (a, b) => a.index - b.index,
+  ...filter
+});
 const sortByGroup = (options, groupSorter) => {
   const groupOrder = /* @__PURE__ */ new Map();
   const uniqueGroups = [];
@@ -719,21 +734,23 @@ const SelectFieldSync = (props) => {
     groupSorter,
     ...rest
   } = props;
-  const filter = typeof filterProp === "function" ? filterProp : (options2, searchValue) => matchSorter(
-    options2,
-    searchValue,
-    filterProp
-  );
+  const filter = useMemo(() => toFilterFn(filterProp), [filterProp]);
   const loadOptions = (searchValue) => {
     const filtered = filter(options, searchValue);
-    if (groupSorter) {
-      return sortByGroup(filtered, groupSorter);
-    }
-    return filtered;
+    return groupSorter ? sortByGroup(filtered, groupSorter) : filtered;
   };
+  const fieldRef = useRef(null);
+  const prevOptionsRef = useRef(options);
+  useEffect(() => {
+    if (prevOptionsRef.current !== options) {
+      prevOptionsRef.current = options;
+      fieldRef.current?.invalidate();
+    }
+  }, [options]);
   return /* @__PURE__ */ jsx(
     SelectField,
     {
+      ref: fieldRef,
       lazy: false,
       loadOptions,
       debounceMs: 0,
@@ -743,4 +760,4 @@ const SelectFieldSync = (props) => {
 };
 export { SelectField as S, SelectFieldSync as a };
-//# sourceMappingURL=SelectFieldSync-BFsJssdD.js.map
+//# sourceMappingURL=SelectFieldSync-CigqXq3T.js.map