@servicetitan/anvil2 1.45.2 → 1.46.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/{Calendar-BK861SAW.js → Calendar-BQ5F2ENO.js} +2 -2
  3. package/dist/{Calendar-BK861SAW.js.map → Calendar-BQ5F2ENO.js.map} +1 -1
  4. package/dist/Calendar.js +1 -1
  5. package/dist/{Checkbox-ZphVb1l0.js → Checkbox-DDrmVC-u.js} +2 -2
  6. package/dist/{Checkbox-ZphVb1l0.js.map → Checkbox-DDrmVC-u.js.map} +1 -1
  7. package/dist/{Checkbox-CYNjFdtO.js → Checkbox-Dl4KTwEJ.js} +2 -2
  8. package/dist/{Checkbox-CYNjFdtO.js.map → Checkbox-Dl4KTwEJ.js.map} +1 -1
  9. package/dist/Checkbox.js +2 -2
  10. package/dist/{useInfiniteCombobox-BaYWUxjg.js → Combobox-B9nesJuc.js} +18 -185
  11. package/dist/Combobox-B9nesJuc.js.map +1 -0
  12. package/dist/Combobox.js +2 -1
  13. package/dist/Combobox.js.map +1 -1
  14. package/dist/{DateField-DnasO2rB.js → DateField-DXxPsRtf.js} +2 -2
  15. package/dist/{DateField-DnasO2rB.js.map → DateField-DXxPsRtf.js.map} +1 -1
  16. package/dist/DateField.js +1 -1
  17. package/dist/{DateFieldRange-Ba-8T-Nz.js → DateFieldRange-Xauviu1w.js} +6 -6
  18. package/dist/DateFieldRange-Xauviu1w.js.map +1 -0
  19. package/dist/DateFieldRange.js +1 -1
  20. package/dist/{DateFieldSingle-BBu5Hi9c.js → DateFieldSingle-yLnwpVzd.js} +4 -4
  21. package/dist/{DateFieldSingle-BBu5Hi9c.js.map → DateFieldSingle-yLnwpVzd.js.map} +1 -1
  22. package/dist/DateFieldSingle.js +1 -1
  23. package/dist/Dnd.js +1 -1
  24. package/dist/DndSort.js +1 -1
  25. package/dist/{ListView-DEAMQopB.js → ListView-pb3rIcze.js} +2 -2
  26. package/dist/{ListView-DEAMQopB.js.map → ListView-pb3rIcze.js.map} +1 -1
  27. package/dist/ListView.js +1 -1
  28. package/dist/{Menu-C8we5CHP.js → Menu-DEVZz9xZ.js} +8 -3
  29. package/dist/Menu-DEVZz9xZ.js.map +1 -0
  30. package/dist/Menu.js +1 -1
  31. package/dist/{Page-cKXkjMmd.js → Page-BMDkbDcU.js} +2 -2
  32. package/dist/{Page-cKXkjMmd.js.map → Page-BMDkbDcU.js.map} +1 -1
  33. package/dist/Page.js +1 -1
  34. package/dist/{Pagination-ta8a2cJN.js → Pagination-BJsCppgW.js} +2 -2
  35. package/dist/{Pagination-ta8a2cJN.js.map → Pagination-BJsCppgW.js.map} +1 -1
  36. package/dist/Pagination.js +1 -1
  37. package/dist/{SearchField-BKXkoWPs.js → SearchField-Bb0uObwG.js} +2 -2
  38. package/dist/{SearchField-BKXkoWPs.js.map → SearchField-Bb0uObwG.js.map} +1 -1
  39. package/dist/SearchField.js +1 -1
  40. package/dist/{SelectCard-BWh8Yp7T.js → SelectCard-BTYZg9TG.js} +2 -2
  41. package/dist/{SelectCard-BWh8Yp7T.js.map → SelectCard-BTYZg9TG.js.map} +1 -1
  42. package/dist/SelectCard.js +1 -1
  43. package/dist/Toolbar-D4zuUFhb.js +2077 -0
  44. package/dist/Toolbar-D4zuUFhb.js.map +1 -0
  45. package/dist/Toolbar.css +139 -28
  46. package/dist/Toolbar.d.ts +3 -3
  47. package/dist/Toolbar.js +1 -1
  48. package/dist/assets/icons/st/gnav_legacy_search_filled.svg +1 -1
  49. package/dist/assets/icons/st/gnav_legacy_search_outline.svg +1 -1
  50. package/dist/beta/components/Toolbar/Filters/FilterButton.d.ts +30 -0
  51. package/dist/beta/components/Toolbar/Filters/FilterDateRange.d.ts +37 -0
  52. package/dist/beta/components/Toolbar/Filters/FilterDateSingle.d.ts +30 -0
  53. package/dist/beta/components/Toolbar/Filters/FilterDrawer.d.ts +15 -0
  54. package/dist/beta/components/Toolbar/Filters/FilterGroup.d.ts +25 -0
  55. package/dist/beta/components/Toolbar/Filters/FilterItemWrapper.d.ts +24 -0
  56. package/dist/beta/components/Toolbar/Filters/FilterSelect.d.ts +29 -0
  57. package/dist/beta/components/Toolbar/Filters/FilterToggleButton.d.ts +24 -0
  58. package/dist/beta/components/Toolbar/Filters/internal/FilterGroupContext.d.ts +40 -0
  59. package/dist/beta/components/Toolbar/Filters/internal/types.d.ts +130 -0
  60. package/dist/beta/components/Toolbar/Filters/internal/utils/filter-state.d.ts +40 -0
  61. package/dist/beta/components/Toolbar/Filters/internal/utils/test.d.ts +57 -0
  62. package/dist/beta/components/Toolbar/Toolbar.d.ts +302 -0
  63. package/dist/beta/components/Toolbar/ToolbarButton.d.ts +41 -0
  64. package/dist/beta/components/Toolbar/ToolbarButtonLink.d.ts +43 -0
  65. package/dist/beta/components/Toolbar/ToolbarButtonToggle.d.ts +42 -0
  66. package/dist/beta/components/Toolbar/ToolbarControlGroup.d.ts +20 -0
  67. package/dist/beta/components/Toolbar/ToolbarSearchField.d.ts +20 -0
  68. package/dist/beta/components/Toolbar/ToolbarSelect.d.ts +108 -0
  69. package/dist/beta/components/Toolbar/index.d.ts +9 -0
  70. package/dist/beta/components/Toolbar/internal/ToolbarItemOverflowContext.d.ts +19 -0
  71. package/dist/beta/components/Toolbar/internal/ToolbarItemWrapper.d.ts +40 -0
  72. package/dist/beta/components/Toolbar/internal/ToolbarOverflowContext.d.ts +35 -0
  73. package/dist/beta/components/Toolbar/internal/ToolbarOverflowMenu.d.ts +29 -0
  74. package/dist/beta/components/Toolbar/internal/utils/accessibility.d.ts +26 -0
  75. package/dist/beta/components/Toolbar/internal/utils/test.d.ts +29 -0
  76. package/dist/beta/components/Toolbar/types.d.ts +50 -0
  77. package/dist/beta/components/index.d.ts +1 -0
  78. package/dist/beta/index.d.ts +1 -0
  79. package/dist/beta.d.ts +2 -0
  80. package/dist/beta.js +2 -0
  81. package/dist/beta.js.map +1 -0
  82. package/dist/components/Combobox/ComboboxTypes.d.ts +8 -0
  83. package/dist/components/DateFieldRange/internal/DateFieldRangeCalendar.d.ts +1 -1
  84. package/dist/components/Dialog/index.d.ts +1 -1
  85. package/dist/{indeterminate_check_box-Bg24oeHy.js → indeterminate_check_box-RY9zr3xS.js} +17 -17
  86. package/dist/{indeterminate_check_box-Bg24oeHy.js.map → indeterminate_check_box-RY9zr3xS.js.map} +1 -1
  87. package/dist/indeterminate_check_box.css +72 -66
  88. package/dist/{index-CqdP5W00.js → index-V5Ez2gq_.js} +2 -2
  89. package/dist/{index-CqdP5W00.js.map → index-V5Ez2gq_.js.map} +1 -1
  90. package/dist/index.css +125 -26
  91. package/dist/index.js +759 -27
  92. package/dist/index.js.map +1 -1
  93. package/dist/index2.css +88 -105
  94. package/dist/internal/hooks/index.d.ts +1 -0
  95. package/dist/internal/hooks/useContainerQuery/index.d.ts +1 -0
  96. package/dist/internal/hooks/useContainerQuery/useContainerQuery.d.ts +46 -0
  97. package/dist/{useDateFieldOrchestration-DPLftOxu.js → useDateFieldOrchestration-BNJCsRkS.js} +2 -2
  98. package/dist/{useDateFieldOrchestration-DPLftOxu.js.map → useDateFieldOrchestration-BNJCsRkS.js.map} +1 -1
  99. package/dist/useInfiniteCombobox-WcRgC9p6.js +179 -0
  100. package/dist/useInfiniteCombobox-WcRgC9p6.js.map +1 -0
  101. package/dist/useIntersectionObserver-BEmMDO3P.js +70 -0
  102. package/dist/useIntersectionObserver-BEmMDO3P.js.map +1 -0
  103. package/package.json +2 -1
  104. package/dist/DateFieldRange-Ba-8T-Nz.js.map +0 -1
  105. package/dist/Menu-C8we5CHP.js.map +0 -1
  106. package/dist/Toolbar-DK7tXy_W.js +0 -807
  107. package/dist/Toolbar-DK7tXy_W.js.map +0 -1
  108. package/dist/useInfiniteCombobox-BaYWUxjg.js.map +0 -1
  109. /package/dist/{useInfiniteCombobox.css → Combobox.css} +0 -0
package/dist/Calendar.js CHANGED
@@ -1,2 +1,2 @@
1
- export { C as Calendar, f as CalendarMonth, e as CalendarMonthButton, d as CalendarNext, a as CalendarNow, c as CalendarPrev, b as CalendarYearButton, C as default } from './Calendar-BK861SAW.js';
1
+ export { C as Calendar, f as CalendarMonth, e as CalendarMonthButton, d as CalendarNext, a as CalendarNow, c as CalendarPrev, b as CalendarYearButton, C as default } from './Calendar-BQ5F2ENO.js';
2
2
  //# sourceMappingURL=Calendar.js.map
@@ -1,6 +1,6 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { forwardRef } from 'react';
3
- import { C as CheckboxGroup, a as Checkbox$1 } from './Checkbox-CYNjFdtO.js';
3
+ import { C as CheckboxGroup, a as Checkbox$1 } from './Checkbox-Dl4KTwEJ.js';
4
4
  import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
5
5
  import { useTrackingId } from './useTrackingId.js';
6
6
 
@@ -47,4 +47,4 @@ const Checkbox = Object.assign(CheckboxElement, {
47
47
  });
48
48
 
49
49
  export { Checkbox as C };
50
- //# sourceMappingURL=Checkbox-ZphVb1l0.js.map
50
+ //# sourceMappingURL=Checkbox-DDrmVC-u.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox-ZphVb1l0.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { forwardRef, Ref } from \"react\";\nimport {\n CheckboxProps as CoreCheckboxProps,\n Checkbox as CoreCheckbox,\n} from \"./internal/Checkbox\";\nimport { CheckboxGroup } from \"./CheckboxGroup\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DataTrackingId } from \"../../types\";\nimport { childrenToString } from \"../../internal/functions\";\n\n/**\n * Props for the Checkbox component\n * @property {boolean} [checked] - Controlled state\n * @property {boolean} [defaultChecked] - Uncontrolled state\n * @property {boolean} [indeterminate] - Indeterminate state of the checkbox\n * @property {boolean} [error] - Error state for the checkbox\n * @property {string | ReactElement} [label] - Label for checkbox\n * @property {string} [description] - Helper text description\n * @property {Object} [icons] - Icon overrides for different states\n * @property {(e?: ChangeEvent<HTMLInputElement>, state?: CheckboxState) => void} [onChange] - Change callback\n * @property {(e?: MouseEvent<HTMLInputElement>, state?: CheckboxState) => void} [onClick] - Click callback\n * @extends Omit<CoreCheckboxProps, \"hideCheckbox\">\n * @extends DataTrackingId\n */\nexport type CheckboxProps = Omit<CoreCheckboxProps, \"hideCheckbox\"> &\n DataTrackingId;\n\nconst CheckboxElement = forwardRef(\n (props: CheckboxProps, ref: Ref<HTMLInputElement>) => {\n const data = {\n label: childrenToString(props.label),\n ariaLabel: props[\"aria-label\"],\n ariaLabelledBy: props[\"aria-labelledby\"],\n value: props.value,\n };\n\n const trackingId = useTrackingId({\n name: \"Checkbox\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n return <CoreCheckbox ref={ref} data-tracking-id={trackingId} {...props} />;\n },\n);\nCheckboxElement.displayName = CoreCheckbox.displayName;\n\n/**\n * Checkbox component for selecting one or more options from a list.\n *\n * Features:\n * - Controlled and uncontrolled state management\n * - Indeterminate state for partial selections\n * - Customizable icons for different states\n * - Error state with accessibility support\n * - Optional helper text and descriptions\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support\n * - Layout utility props for positioning and spacing\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Checkbox\n * label=\"Accept terms and conditions\"\n * onChange={(e, state) => console.log('Checked:', state.checked)}\n * required\n * />\n */\nexport const Checkbox = Object.assign(CheckboxElement, {\n /**\n * CheckboxGroup component for grouping related checkboxes together.\n *\n * Features:\n * - Groups multiple checkboxes with a common legend\n * - Supports required field indication\n * - Optional helper text and descriptions\n * - Full accessibility support with fieldset/legend\n * - Focus management for keyboard navigation\n * - Layout utility props for positioning and spacing\n * - Flexible layout direction (row/column)\n * - Screen reader support with hidden labels\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <CheckboxGroup legend=\"Select your interests\" required>\n * <Checkbox label=\"Technology\" />\n * <Checkbox label=\"Sports\" />\n * <Checkbox label=\"Music\" />\n * </CheckboxGroup>\n */\n Group: CheckboxGroup,\n});\n"],"names":["CoreCheckbox"],"mappings":";;;;;;AA2BA,MAAM,eAAkB,GAAA,UAAA;AAAA,EACtB,CAAC,OAAsB,GAA+B,KAAA;AACpD,IAAA,MAAM,IAAO,GAAA;AAAA,MACX,KAAA,EAAO,gBAAiB,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MACnC,SAAA,EAAW,MAAM,YAAY,CAAA;AAAA,MAC7B,cAAA,EAAgB,MAAM,iBAAiB,CAAA;AAAA,MACvC,OAAO,KAAM,CAAA;AAAA,KACf;AAEA,IAAA,MAAM,aAAa,aAAc,CAAA;AAAA,MAC/B,IAAM,EAAA,UAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAa,EAAA,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AACD,IAAA,2BAAQA,UAAa,EAAA,EAAA,GAAA,EAAU,kBAAkB,EAAA,UAAA,EAAa,GAAG,KAAO,EAAA,CAAA;AAAA;AAE5E,CAAA;AACA,eAAA,CAAgB,cAAcA,UAAa,CAAA,WAAA;AAuB9B,MAAA,QAAA,GAAW,MAAO,CAAA,MAAA,CAAO,eAAiB,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBrD,KAAO,EAAA;AACT,CAAC;;;;"}
1
+ {"version":3,"file":"Checkbox-DDrmVC-u.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { forwardRef, Ref } from \"react\";\nimport {\n CheckboxProps as CoreCheckboxProps,\n Checkbox as CoreCheckbox,\n} from \"./internal/Checkbox\";\nimport { CheckboxGroup } from \"./CheckboxGroup\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DataTrackingId } from \"../../types\";\nimport { childrenToString } from \"../../internal/functions\";\n\n/**\n * Props for the Checkbox component\n * @property {boolean} [checked] - Controlled state\n * @property {boolean} [defaultChecked] - Uncontrolled state\n * @property {boolean} [indeterminate] - Indeterminate state of the checkbox\n * @property {boolean} [error] - Error state for the checkbox\n * @property {string | ReactElement} [label] - Label for checkbox\n * @property {string} [description] - Helper text description\n * @property {Object} [icons] - Icon overrides for different states\n * @property {(e?: ChangeEvent<HTMLInputElement>, state?: CheckboxState) => void} [onChange] - Change callback\n * @property {(e?: MouseEvent<HTMLInputElement>, state?: CheckboxState) => void} [onClick] - Click callback\n * @extends Omit<CoreCheckboxProps, \"hideCheckbox\">\n * @extends DataTrackingId\n */\nexport type CheckboxProps = Omit<CoreCheckboxProps, \"hideCheckbox\"> &\n DataTrackingId;\n\nconst CheckboxElement = forwardRef(\n (props: CheckboxProps, ref: Ref<HTMLInputElement>) => {\n const data = {\n label: childrenToString(props.label),\n ariaLabel: props[\"aria-label\"],\n ariaLabelledBy: props[\"aria-labelledby\"],\n value: props.value,\n };\n\n const trackingId = useTrackingId({\n name: \"Checkbox\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n return <CoreCheckbox ref={ref} data-tracking-id={trackingId} {...props} />;\n },\n);\nCheckboxElement.displayName = CoreCheckbox.displayName;\n\n/**\n * Checkbox component for selecting one or more options from a list.\n *\n * Features:\n * - Controlled and uncontrolled state management\n * - Indeterminate state for partial selections\n * - Customizable icons for different states\n * - Error state with accessibility support\n * - Optional helper text and descriptions\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support\n * - Layout utility props for positioning and spacing\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Checkbox\n * label=\"Accept terms and conditions\"\n * onChange={(e, state) => console.log('Checked:', state.checked)}\n * required\n * />\n */\nexport const Checkbox = Object.assign(CheckboxElement, {\n /**\n * CheckboxGroup component for grouping related checkboxes together.\n *\n * Features:\n * - Groups multiple checkboxes with a common legend\n * - Supports required field indication\n * - Optional helper text and descriptions\n * - Full accessibility support with fieldset/legend\n * - Focus management for keyboard navigation\n * - Layout utility props for positioning and spacing\n * - Flexible layout direction (row/column)\n * - Screen reader support with hidden labels\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <CheckboxGroup legend=\"Select your interests\" required>\n * <Checkbox label=\"Technology\" />\n * <Checkbox label=\"Sports\" />\n * <Checkbox label=\"Music\" />\n * </CheckboxGroup>\n */\n Group: CheckboxGroup,\n});\n"],"names":["CoreCheckbox"],"mappings":";;;;;;AA2BA,MAAM,eAAkB,GAAA,UAAA;AAAA,EACtB,CAAC,OAAsB,GAA+B,KAAA;AACpD,IAAA,MAAM,IAAO,GAAA;AAAA,MACX,KAAA,EAAO,gBAAiB,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MACnC,SAAA,EAAW,MAAM,YAAY,CAAA;AAAA,MAC7B,cAAA,EAAgB,MAAM,iBAAiB,CAAA;AAAA,MACvC,OAAO,KAAM,CAAA;AAAA,KACf;AAEA,IAAA,MAAM,aAAa,aAAc,CAAA;AAAA,MAC/B,IAAM,EAAA,UAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAa,EAAA,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AACD,IAAA,2BAAQA,UAAa,EAAA,EAAA,GAAA,EAAU,kBAAkB,EAAA,UAAA,EAAa,GAAG,KAAO,EAAA,CAAA;AAAA;AAE5E,CAAA;AACA,eAAA,CAAgB,cAAcA,UAAa,CAAA,WAAA;AAuB9B,MAAA,QAAA,GAAW,MAAO,CAAA,MAAA,CAAO,eAAiB,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBrD,KAAO,EAAA;AACT,CAAC;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { forwardRef, useState, useId } from 'react';
3
- import { c as checkboxStyles, S as SvgIndeterminateCheckBox, a as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './indeterminate_check_box-Bg24oeHy.js';
3
+ import { c as checkboxStyles, S as SvgIndeterminateCheckBox, a as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './indeterminate_check_box-RY9zr3xS.js';
4
4
  import { c as cx } from './index-tZvMCc77.js';
5
5
  import { F as FieldLabel } from './FieldLabel-BsbTTyom.js';
6
6
  import { S as SrOnly } from './SrOnly-CTsYSuby.js';
@@ -208,4 +208,4 @@ CheckboxElement.displayName = "Checkbox";
208
208
  const Checkbox = CheckboxElement;
209
209
 
210
210
  export { CheckboxGroup as C, Checkbox as a };
211
- //# sourceMappingURL=Checkbox-CYNjFdtO.js.map
211
+ //# sourceMappingURL=Checkbox-Dl4KTwEJ.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox-CYNjFdtO.js","sources":["../src/components/Checkbox/CheckboxGroup.tsx","../src/components/Checkbox/internal/Checkbox.tsx"],"sourcesContent":["import {\n forwardRef,\n ComponentPropsWithoutRef,\n ReactElement,\n FocusEventHandler,\n useState,\n} from \"react\";\nimport styles from \"./Checkbox.module.scss\";\nimport cx from \"classnames\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { FieldLabel } from \"../FieldLabel\";\nimport { SrOnly } from \"../SrOnly\";\nimport { FieldLabelProps } from \"../../internal/types\";\n\n/**\n * Props for the CheckboxGroup component\n * @extends ComponentPropsWithoutRef<\"fieldset\">\n * @extends LayoutUtilProps\n * @extends Omit<FieldLabelProps, \"labelProps\">\n */\nexport type CheckboxGroupProps = ComponentPropsWithoutRef<\"fieldset\"> &\n LayoutUtilProps &\n Omit<FieldLabelProps, \"labelProps\"> & {\n /**\n * required flag for label\n * @accessibility This does not enforce error when nothing is selected.\n * @default false\n */\n required?: boolean;\n\n /**\n * legend for the fieldset\n */\n legend: string | ReactElement;\n };\n\n/**\n * CheckboxGroup component for grouping related checkboxes together.\n *\n * Features:\n * - Groups multiple checkboxes with a common legend\n * - Supports required field indication\n * - Optional helper text and descriptions\n * - Full accessibility support with fieldset/legend\n * - Focus management for keyboard navigation\n * - Layout utility props for positioning and spacing\n * - Flexible layout direction (row/column)\n * - Screen reader support with hidden labels\n *\n * @example\n * <CheckboxGroup legend=\"Select your interests\" required>\n * <Checkbox label=\"Technology\" />\n * <Checkbox label=\"Sports\" />\n * <Checkbox label=\"Music\" />\n * </CheckboxGroup>\n */\nexport const CheckboxGroup = forwardRef<\n HTMLFieldSetElement,\n CheckboxGroupProps\n>((props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n\n const {\n className,\n children,\n legend,\n moreInfo,\n onBlur,\n onFocus,\n required,\n style,\n ...rest\n } = componentProps;\n\n const checkboxGroupClassNames = cx(styles[\"checkbox-group\"], className);\n const [openInfo, setOpenInfo] = useState<boolean>(false);\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n alignItems:\n layoutStyles?.alignItems ??\n (layoutStyles?.flexDirection === \"row\" ? \"flex-start\" : 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 const labelClassNames = cx(styles[\"label\"], {\n [styles[\"direction-row\"]]: layoutStyles?.flexDirection === \"row\",\n });\n\n return (\n <fieldset\n role=\"group\"\n data-anv=\"checkbox-group\"\n className={checkboxGroupClassNames}\n ref={ref}\n style={styleCombined}\n onFocus={focusHandler}\n onBlur={blurHandler}\n {...rest}\n >\n <legend className={styles[\"legend\"]}>\n {legend}\n {required && \", required\"}\n {moreInfo && <SrOnly>{moreInfo}</SrOnly>}\n </legend>\n <FieldLabel\n aria-hidden\n moreInfo={moreInfo}\n required={required}\n openMoreInfo={openInfo}\n className={labelClassNames}\n >\n {legend}\n </FieldLabel>\n <div\n className={styles[\"children\"]}\n style={{\n flexDirection: layoutStyles?.flexDirection,\n gap: layoutStyles?.gap,\n }}\n >\n {children}\n </div>\n </fieldset>\n );\n});\n\nCheckboxGroup.displayName = \"CheckboxGroup\";\n","import {\n forwardRef,\n ChangeEvent,\n ComponentPropsWithoutRef,\n ReactElement,\n MouseEvent,\n useId,\n} from \"react\";\nimport cx from \"classnames\";\nimport { Icon } from \"../../Icon\";\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 CheckboxIndeterminate from \"@servicetitan/hammer-icon/mdi/round/indeterminate_check_box.svg\";\n\nimport styles from \"../Checkbox.module.scss\";\nimport { Svg, LayoutUtilProps } from \"../../../types\";\nimport { useLayoutPropsUtil } from \"../../../internal/hooks\";\nimport { Helper, HelperProps } from \"../../../internal/components\";\nimport { CheckboxState } from \"../types\";\n\nexport type { CheckboxState };\n\n/**\n * Props for the Checkbox component\n * @extends LayoutUtilProps\n * @extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\" | \"onClick\" | \"indeterminate\">\n */\nexport type CheckboxProps = LayoutUtilProps &\n Omit<\n ComponentPropsWithoutRef<\"input\">,\n \"onChange\" | \"onClick\" | \"indeterminate\"\n > & {\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 * Indeterminate state of the checkbox\n * @accessibility Applies aria-checked=\"mixed\"\n * @default false\n */\n indeterminate?: boolean;\n\n /**\n * Callback when checkbox is changed\n */\n onChange?: (\n e?: ChangeEvent<HTMLInputElement>,\n state?: CheckboxState,\n ) => void;\n\n /**\n * Callback when checkbox is clicked\n */\n onClick?: (e?: MouseEvent<HTMLInputElement>, state?: CheckboxState) => void;\n\n /**\n * label for checkbox\n * @accessibility This should either be a string or have text content inside for accessibility\n */\n label?: string | ReactElement;\n\n /**\n * Error state for the checkbox\n * @accessibility Applies aria-invalid=\"true\"\n * @default false\n */\n error?: boolean;\n\n /**\n * Icon overrides\n */\n icons?: {\n checked?: Svg;\n indeterminate?: Svg;\n unchecked?: Svg;\n };\n\n description?: HelperProps[\"description\"];\n\n /**\n * When `true`, hides the checkbox for visual users.\n * @default false\n */\n hideCheckbox?: boolean;\n };\n\nconst CheckboxElement = forwardRef<HTMLInputElement, CheckboxProps>(\n (props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n indeterminate,\n onChange,\n onClick,\n value,\n className,\n disabled,\n error,\n icons,\n checked: checkedProp,\n defaultChecked,\n label,\n style,\n required,\n description,\n hideCheckbox = false,\n ...rest\n } = componentProps;\n const {\n checked: checkedIcon = CheckboxChecked,\n indeterminate: indeterminateIcon = CheckboxIndeterminate,\n unchecked: uncheckedIcon = CheckboxOutline,\n } = { ...icons };\n\n const isControlled = typeof checkedProp !== \"undefined\";\n\n const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(e, { value, checked: checkedProp ?? e.target.checked });\n };\n\n const onClickHandler = (e: MouseEvent<HTMLInputElement>) => {\n onClick?.(e, {\n value,\n checked: checkedProp ?? (e.target as HTMLInputElement).checked,\n });\n };\n\n const helperUid = useId();\n\n const wrapperClassNames = cx(\n styles[\"wrapper\"],\n { [styles[\"focus\"]]: hideCheckbox },\n className,\n );\n\n const checkboxClassNames = cx(styles[\"checkbox\"], {\n [styles[\"error\"]]: error,\n });\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n return (\n <div\n className={wrapperClassNames}\n style={styleCombined}\n data-anv=\"checkbox\"\n >\n <label className={checkboxClassNames}>\n <input\n type=\"checkbox\"\n disabled={disabled}\n value={value}\n onChange={onChangeHandler}\n onClick={onClickHandler}\n aria-checked={\n indeterminate ? \"mixed\" : (checkedProp ?? defaultChecked)\n }\n checked={isControlled ? checkedProp : undefined}\n defaultChecked={defaultChecked}\n aria-invalid={error}\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\"]]: hideCheckbox,\n })}\n aria-hidden\n >\n <Icon\n size=\"large\"\n svg={indeterminateIcon}\n className={styles[\"icon-indeterminate\"]}\n />\n\n <Icon\n size=\"large\"\n svg={checkedIcon}\n className={styles[\"icon-checked\"]}\n />\n\n <Icon\n size=\"large\"\n svg={uncheckedIcon}\n className={styles[\"icon-unchecked\"]}\n />\n </span>\n\n <span className={cx({ [styles[\"focus-label\"]]: hideCheckbox })}>\n {label}\n\n {required && (\n <span aria-hidden className={styles[\"required-asterisk\"]}>\n *\n </span>\n )}\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);\n\nCheckboxElement.displayName = \"Checkbox\";\n\n/**\n * Checkbox component for selecting one or more options from a list.\n *\n * Features:\n * - Controlled and uncontrolled state management\n * - Indeterminate state for partial selections\n * - Customizable icons for different states\n * - Error state with accessibility support\n * - Optional helper text and descriptions\n * - Hide checkbox option for visual-only interactions\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support\n * - Layout utility props for positioning and spacing\n *\n * @example\n * <Checkbox\n * label=\"Accept terms and conditions\"\n * onChange={(e, state) => console.log('Checked:', state.checked)}\n * required\n * />\n */\nexport const Checkbox = CheckboxElement;\n"],"names":["styles","CheckboxChecked","CheckboxIndeterminate","CheckboxOutline"],"mappings":"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"}
1
+ {"version":3,"file":"Checkbox-Dl4KTwEJ.js","sources":["../src/components/Checkbox/CheckboxGroup.tsx","../src/components/Checkbox/internal/Checkbox.tsx"],"sourcesContent":["import {\n forwardRef,\n ComponentPropsWithoutRef,\n ReactElement,\n FocusEventHandler,\n useState,\n} from \"react\";\nimport styles from \"./Checkbox.module.scss\";\nimport cx from \"classnames\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { FieldLabel } from \"../FieldLabel\";\nimport { SrOnly } from \"../SrOnly\";\nimport { FieldLabelProps } from \"../../internal/types\";\n\n/**\n * Props for the CheckboxGroup component\n * @extends ComponentPropsWithoutRef<\"fieldset\">\n * @extends LayoutUtilProps\n * @extends Omit<FieldLabelProps, \"labelProps\">\n */\nexport type CheckboxGroupProps = ComponentPropsWithoutRef<\"fieldset\"> &\n LayoutUtilProps &\n Omit<FieldLabelProps, \"labelProps\"> & {\n /**\n * required flag for label\n * @accessibility This does not enforce error when nothing is selected.\n * @default false\n */\n required?: boolean;\n\n /**\n * legend for the fieldset\n */\n legend: string | ReactElement;\n };\n\n/**\n * CheckboxGroup component for grouping related checkboxes together.\n *\n * Features:\n * - Groups multiple checkboxes with a common legend\n * - Supports required field indication\n * - Optional helper text and descriptions\n * - Full accessibility support with fieldset/legend\n * - Focus management for keyboard navigation\n * - Layout utility props for positioning and spacing\n * - Flexible layout direction (row/column)\n * - Screen reader support with hidden labels\n *\n * @example\n * <CheckboxGroup legend=\"Select your interests\" required>\n * <Checkbox label=\"Technology\" />\n * <Checkbox label=\"Sports\" />\n * <Checkbox label=\"Music\" />\n * </CheckboxGroup>\n */\nexport const CheckboxGroup = forwardRef<\n HTMLFieldSetElement,\n CheckboxGroupProps\n>((props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n\n const {\n className,\n children,\n legend,\n moreInfo,\n onBlur,\n onFocus,\n required,\n style,\n ...rest\n } = componentProps;\n\n const checkboxGroupClassNames = cx(styles[\"checkbox-group\"], className);\n const [openInfo, setOpenInfo] = useState<boolean>(false);\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n alignItems:\n layoutStyles?.alignItems ??\n (layoutStyles?.flexDirection === \"row\" ? \"flex-start\" : 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 const labelClassNames = cx(styles[\"label\"], {\n [styles[\"direction-row\"]]: layoutStyles?.flexDirection === \"row\",\n });\n\n return (\n <fieldset\n role=\"group\"\n data-anv=\"checkbox-group\"\n className={checkboxGroupClassNames}\n ref={ref}\n style={styleCombined}\n onFocus={focusHandler}\n onBlur={blurHandler}\n {...rest}\n >\n <legend className={styles[\"legend\"]}>\n {legend}\n {required && \", required\"}\n {moreInfo && <SrOnly>{moreInfo}</SrOnly>}\n </legend>\n <FieldLabel\n aria-hidden\n moreInfo={moreInfo}\n required={required}\n openMoreInfo={openInfo}\n className={labelClassNames}\n >\n {legend}\n </FieldLabel>\n <div\n className={styles[\"children\"]}\n style={{\n flexDirection: layoutStyles?.flexDirection,\n gap: layoutStyles?.gap,\n }}\n >\n {children}\n </div>\n </fieldset>\n );\n});\n\nCheckboxGroup.displayName = \"CheckboxGroup\";\n","import {\n forwardRef,\n ChangeEvent,\n ComponentPropsWithoutRef,\n ReactElement,\n MouseEvent,\n useId,\n} from \"react\";\nimport cx from \"classnames\";\nimport { Icon } from \"../../Icon\";\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 CheckboxIndeterminate from \"@servicetitan/hammer-icon/mdi/round/indeterminate_check_box.svg\";\n\nimport styles from \"../Checkbox.module.scss\";\nimport { Svg, LayoutUtilProps } from \"../../../types\";\nimport { useLayoutPropsUtil } from \"../../../internal/hooks\";\nimport { Helper, HelperProps } from \"../../../internal/components\";\nimport { CheckboxState } from \"../types\";\n\nexport type { CheckboxState };\n\n/**\n * Props for the Checkbox component\n * @extends LayoutUtilProps\n * @extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\" | \"onClick\" | \"indeterminate\">\n */\nexport type CheckboxProps = LayoutUtilProps &\n Omit<\n ComponentPropsWithoutRef<\"input\">,\n \"onChange\" | \"onClick\" | \"indeterminate\"\n > & {\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 * Indeterminate state of the checkbox\n * @accessibility Applies aria-checked=\"mixed\"\n * @default false\n */\n indeterminate?: boolean;\n\n /**\n * Callback when checkbox is changed\n */\n onChange?: (\n e?: ChangeEvent<HTMLInputElement>,\n state?: CheckboxState,\n ) => void;\n\n /**\n * Callback when checkbox is clicked\n */\n onClick?: (e?: MouseEvent<HTMLInputElement>, state?: CheckboxState) => void;\n\n /**\n * label for checkbox\n * @accessibility This should either be a string or have text content inside for accessibility\n */\n label?: string | ReactElement;\n\n /**\n * Error state for the checkbox\n * @accessibility Applies aria-invalid=\"true\"\n * @default false\n */\n error?: boolean;\n\n /**\n * Icon overrides\n */\n icons?: {\n checked?: Svg;\n indeterminate?: Svg;\n unchecked?: Svg;\n };\n\n description?: HelperProps[\"description\"];\n\n /**\n * When `true`, hides the checkbox for visual users.\n * @default false\n */\n hideCheckbox?: boolean;\n };\n\nconst CheckboxElement = forwardRef<HTMLInputElement, CheckboxProps>(\n (props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n indeterminate,\n onChange,\n onClick,\n value,\n className,\n disabled,\n error,\n icons,\n checked: checkedProp,\n defaultChecked,\n label,\n style,\n required,\n description,\n hideCheckbox = false,\n ...rest\n } = componentProps;\n const {\n checked: checkedIcon = CheckboxChecked,\n indeterminate: indeterminateIcon = CheckboxIndeterminate,\n unchecked: uncheckedIcon = CheckboxOutline,\n } = { ...icons };\n\n const isControlled = typeof checkedProp !== \"undefined\";\n\n const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(e, { value, checked: checkedProp ?? e.target.checked });\n };\n\n const onClickHandler = (e: MouseEvent<HTMLInputElement>) => {\n onClick?.(e, {\n value,\n checked: checkedProp ?? (e.target as HTMLInputElement).checked,\n });\n };\n\n const helperUid = useId();\n\n const wrapperClassNames = cx(\n styles[\"wrapper\"],\n { [styles[\"focus\"]]: hideCheckbox },\n className,\n );\n\n const checkboxClassNames = cx(styles[\"checkbox\"], {\n [styles[\"error\"]]: error,\n });\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n return (\n <div\n className={wrapperClassNames}\n style={styleCombined}\n data-anv=\"checkbox\"\n >\n <label className={checkboxClassNames}>\n <input\n type=\"checkbox\"\n disabled={disabled}\n value={value}\n onChange={onChangeHandler}\n onClick={onClickHandler}\n aria-checked={\n indeterminate ? \"mixed\" : (checkedProp ?? defaultChecked)\n }\n checked={isControlled ? checkedProp : undefined}\n defaultChecked={defaultChecked}\n aria-invalid={error}\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\"]]: hideCheckbox,\n })}\n aria-hidden\n >\n <Icon\n size=\"large\"\n svg={indeterminateIcon}\n className={styles[\"icon-indeterminate\"]}\n />\n\n <Icon\n size=\"large\"\n svg={checkedIcon}\n className={styles[\"icon-checked\"]}\n />\n\n <Icon\n size=\"large\"\n svg={uncheckedIcon}\n className={styles[\"icon-unchecked\"]}\n />\n </span>\n\n <span className={cx({ [styles[\"focus-label\"]]: hideCheckbox })}>\n {label}\n\n {required && (\n <span aria-hidden className={styles[\"required-asterisk\"]}>\n *\n </span>\n )}\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);\n\nCheckboxElement.displayName = \"Checkbox\";\n\n/**\n * Checkbox component for selecting one or more options from a list.\n *\n * Features:\n * - Controlled and uncontrolled state management\n * - Indeterminate state for partial selections\n * - Customizable icons for different states\n * - Error state with accessibility support\n * - Optional helper text and descriptions\n * - Hide checkbox option for visual-only interactions\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support\n * - Layout utility props for positioning and spacing\n *\n * @example\n * <Checkbox\n * label=\"Accept terms and conditions\"\n * onChange={(e, state) => console.log('Checked:', state.checked)}\n * required\n * />\n */\nexport const Checkbox = CheckboxElement;\n"],"names":["styles","CheckboxChecked","CheckboxIndeterminate","CheckboxOutline"],"mappings":"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"}
package/dist/Checkbox.js CHANGED
@@ -1,3 +1,3 @@
1
- export { C as Checkbox, C as default } from './Checkbox-ZphVb1l0.js';
2
- export { C as CheckboxGroup } from './Checkbox-CYNjFdtO.js';
1
+ export { C as Checkbox, C as default } from './Checkbox-DDrmVC-u.js';
2
+ export { C as CheckboxGroup } from './Checkbox-Dl4KTwEJ.js';
3
3
  //# sourceMappingURL=Checkbox.js.map
@@ -1,5 +1,5 @@
1
1
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
- import React__default, { forwardRef, useState, useEffect, createContext, useContext, useRef, useMemo, useCallback, useLayoutEffect, useReducer, cloneElement, Component, useId, useDeferredValue } from 'react';
2
+ import React__default, { forwardRef, useState, useEffect, createContext, useContext, useRef, useMemo, useCallback, useLayoutEffect, useReducer, cloneElement, Component, useId } from 'react';
3
3
  import { c as cx, g as getDefaultExportFromCjs } from './index-tZvMCc77.js';
4
4
  import { a as _extends, _ as _objectWithoutPropertiesLoose } from './extends-Bg2s_OKl.js';
5
5
  import { P as Popover, u as usePopoverLegacyContext, f as usePopoverContext } from './Popover-r26xMIfm.js';
@@ -22,11 +22,11 @@ import { A as Avatar } from './Avatar-CyGjhToG.js';
22
22
  import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
23
23
  import { useTrackingId } from './useTrackingId.js';
24
24
  import { s as styles$3 } from './ListView.module-MVsNF0X0.js';
25
- import { c as checkboxStyles, S as SvgIndeterminateCheckBox, a as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './indeterminate_check_box-Bg24oeHy.js';
25
+ import { c as checkboxStyles, S as SvgIndeterminateCheckBox, a as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './indeterminate_check_box-RY9zr3xS.js';
26
26
  import { S as SvgCheck } from './check-Cf67OWrZ.js';
27
27
  import { S as Spinner } from './Spinner-wmO8Epw0.js';
28
28
 
29
- import './useInfiniteCombobox.css';const label = "_label_jfzvd_2";
29
+ import './Combobox.css';const label = "_label_jfzvd_2";
30
30
  const required = "_required_jfzvd_46";
31
31
  const styles$2 = {
32
32
  label: label,
@@ -8821,6 +8821,7 @@ const ComboboxTrigger = function(props) {
8821
8821
  placeholder,
8822
8822
  disabled,
8823
8823
  readOnly,
8824
+ onClear,
8824
8825
  ...rest
8825
8826
  } = componentProps;
8826
8827
  const {
@@ -8884,10 +8885,14 @@ const ComboboxTrigger = function(props) {
8884
8885
  };
8885
8886
  const toggleButtonProps = select ? {} : getToggleButtonProps();
8886
8887
  const handleClearButtonClick = (_e) => {
8887
- if (reset != null) {
8888
- reset();
8888
+ if (onClear) {
8889
+ onClear();
8889
8890
  } else {
8890
- selectItem(null);
8891
+ if (reset != null) {
8892
+ reset();
8893
+ } else {
8894
+ selectItem(null);
8895
+ }
8891
8896
  }
8892
8897
  };
8893
8898
  const styleCombined = {
@@ -8974,10 +8979,13 @@ const ComboboxTrigger = function(props) {
8974
8979
  }
8975
8980
  );
8976
8981
  };
8977
- const ComboboxSearchFieldElement = function(props) {
8982
+ const ComboboxSearchFieldElement = function({
8983
+ onClear,
8984
+ ...props
8985
+ }) {
8978
8986
  if (!supportsPopover())
8979
8987
  return /* @__PURE__ */ jsx(ComboboxLegacyTrigger, { ...props, variant: "combobox" });
8980
- return /* @__PURE__ */ jsx(ComboboxTrigger, { ...props, variant: "combobox" });
8988
+ return /* @__PURE__ */ jsx(ComboboxTrigger, { onClear, ...props, variant: "combobox" });
8981
8989
  };
8982
8990
  const ComboboxSearchField = function({
8983
8991
  prefix: prefixProp,
@@ -10177,180 +10185,5 @@ const Combobox = Object.assign(ComboboxElement, {
10177
10185
  Empty: ComboboxEmpty
10178
10186
  });
10179
10187
 
10180
- const SCROLL_THRESHOLD = 0.64;
10181
- function useInfiniteCombobox({
10182
- query,
10183
- queryInitialItems,
10184
- initialItems = [],
10185
- initialPage = 0,
10186
- initialLoading = false,
10187
- initialInputValue,
10188
- defaultInputValue,
10189
- initialSelectedItem,
10190
- defaultSelectedItem,
10191
- initialSelectedItems,
10192
- defaultSelectedItems,
10193
- updateOnInputValueChange = true,
10194
- updateOnSelectedItemChange = true,
10195
- updateOnSelectedItemsChange = true,
10196
- queryOnFirstRender = false,
10197
- shouldTriggerQuery: shouldTriggerQueryProp
10198
- }) {
10199
- const [items, setItems] = useState(initialItems);
10200
- const deferredItems = useDeferredValue(items);
10201
- const [page, setPage] = useState(initialPage);
10202
- const [loading, setLoading] = useState(initialLoading);
10203
- const deferredLoading = useDeferredValue(loading);
10204
- const [inputValue, setInputValue] = useState(
10205
- initialInputValue ?? defaultInputValue ?? ""
10206
- );
10207
- const [selectedItem, setSelectedItem] = useState(
10208
- initialSelectedItem ?? defaultSelectedItem ?? null
10209
- );
10210
- const [selectedItems, setSelectedItems] = useState(
10211
- initialSelectedItems ?? defaultSelectedItems ?? []
10212
- );
10213
- const scrollerRef = useRef(null);
10214
- const defaultShouldTriggerQuery = (element) => {
10215
- const totalScrollHeight = element.scrollHeight - element.clientHeight;
10216
- return element.scrollTop / totalScrollHeight > SCROLL_THRESHOLD;
10217
- };
10218
- const [triggerQueryCount, setTriggerQueryCount] = useState(0);
10219
- const triggerQueryCountRef = useRef(0);
10220
- const triggerQuery = () => {
10221
- setTriggerQueryCount((x) => x + 1);
10222
- triggerQueryCountRef.current += 1;
10223
- };
10224
- const [done, setDone] = useState(false);
10225
- const firstRenderRef = useRef(true);
10226
- const scrollTimeoutRef = useRef(false);
10227
- const loadingRef = useRef(false);
10228
- const setLoadingStateAndRef = (isLoading) => {
10229
- setLoading(isLoading);
10230
- loadingRef.current = isLoading;
10231
- };
10232
- const queryRetryCountRef = useRef(0);
10233
- useEffect(() => {
10234
- if (firstRenderRef.current && queryInitialItems) {
10235
- setItems(queryInitialItems());
10236
- }
10237
- if (firstRenderRef.current && !queryOnFirstRender) {
10238
- firstRenderRef.current = false;
10239
- return;
10240
- }
10241
- setLoadingStateAndRef(true);
10242
- const timeoutID = setTimeout(() => {
10243
- if (triggerQueryCount < triggerQueryCountRef.current) return;
10244
- query({
10245
- page,
10246
- inputValue,
10247
- selectedItem,
10248
- selectedItems
10249
- }).then((res) => {
10250
- queryRetryCountRef.current = 0;
10251
- if (triggerQueryCount < triggerQueryCountRef.current) return;
10252
- setLoadingStateAndRef(false);
10253
- setPage((x) => x + 1);
10254
- if (res == null || page > 0 && res.length === 0) {
10255
- setDone(true);
10256
- } else if (page === 0) {
10257
- setItems(() => [...res]);
10258
- } else {
10259
- setItems((prevItems) => [...prevItems, ...res]);
10260
- }
10261
- }).catch(() => {
10262
- queryRetryCountRef.current += 1;
10263
- if (queryRetryCountRef.current > 7) {
10264
- queryRetryCountRef.current = 0;
10265
- return;
10266
- } else {
10267
- setTimeout(
10268
- () => {
10269
- triggerQuery();
10270
- },
10271
- 2 ** queryRetryCountRef.current * 160
10272
- );
10273
- }
10274
- });
10275
- }, 160);
10276
- return () => {
10277
- clearTimeout(timeoutID);
10278
- };
10279
- }, [triggerQueryCount]);
10280
- useLayoutEffect(() => {
10281
- setTimeout(() => {
10282
- if (scrollerRef.current && scrollerRef.current.scrollHeight > 0 && scrollerRef.current.clientHeight > 0 && scrollerRef.current.scrollHeight <= scrollerRef.current.clientHeight) {
10283
- triggerQuery();
10284
- }
10285
- }, 160);
10286
- }, [items]);
10287
- const isEmpty = items.length === 0 && page === 0;
10288
- const onStateChange = useCallback(
10289
- (changes) => {
10290
- if (isEmpty && "isOpen" in changes && changes.isOpen === true) {
10291
- triggerQuery();
10292
- }
10293
- const inputValueShouldUpdate = updateOnInputValueChange && "inputValue" in changes;
10294
- const selectedItemsShouldUpdate = updateOnSelectedItemsChange && "selectedItems" in changes && changes.selectedItems;
10295
- const selectedItemShouldUpdate = updateOnSelectedItemChange && "selectedItem" in changes && changes.selectedItem !== void 0;
10296
- if (inputValueShouldUpdate) {
10297
- setInputValue(changes.inputValue ?? "");
10298
- }
10299
- if (selectedItemsShouldUpdate) {
10300
- setSelectedItems(changes.selectedItems ?? []);
10301
- }
10302
- if (selectedItemShouldUpdate) {
10303
- setSelectedItem(changes.selectedItem);
10304
- }
10305
- if (inputValueShouldUpdate || selectedItemsShouldUpdate || selectedItemShouldUpdate) {
10306
- setPage(0);
10307
- setDone(false);
10308
- triggerQuery();
10309
- }
10310
- },
10311
- [
10312
- isEmpty,
10313
- updateOnInputValueChange,
10314
- updateOnSelectedItemsChange,
10315
- updateOnSelectedItemChange
10316
- ]
10317
- );
10318
- const onScroll = useCallback(
10319
- (e) => {
10320
- const element = e.currentTarget;
10321
- if (!scrollTimeoutRef.current && !loadingRef.current) {
10322
- setTimeout(() => {
10323
- const shouldTriggerQuery = shouldTriggerQueryProp ?? defaultShouldTriggerQuery;
10324
- if (shouldTriggerQuery(element) && !done) {
10325
- triggerQuery();
10326
- }
10327
- scrollTimeoutRef.current = false;
10328
- }, 40);
10329
- scrollTimeoutRef.current = true;
10330
- }
10331
- },
10332
- [done, shouldTriggerQueryProp]
10333
- );
10334
- return {
10335
- comboboxProps: {
10336
- items: deferredItems,
10337
- loading: deferredLoading,
10338
- initialInputValue,
10339
- defaultInputValue,
10340
- initialSelectedItem,
10341
- defaultSelectedItem,
10342
- initialSelectedItems,
10343
- defaultSelectedItems,
10344
- disableFilter: true,
10345
- // assume the query will return a filtered/sorted list
10346
- onStateChange
10347
- },
10348
- contentProps: {
10349
- onScroll,
10350
- scrollerRef
10351
- }
10352
- };
10353
- }
10354
-
10355
- export { Combobox as C, ComboboxElement as a, ComboboxSelect as b, ComboboxContent as c, ComboboxList as d, ComboboxItem as e, ComboboxItemAddNew as f, ComboboxSearchField as g, ComboboxSelectTrigger as h, ComboboxEmpty as i, useInfiniteCombobox as u };
10356
- //# sourceMappingURL=useInfiniteCombobox-BaYWUxjg.js.map
10188
+ export { Combobox as C, ComboboxElement as a, ComboboxSelect as b, ComboboxContent as c, ComboboxList as d, ComboboxItem as e, ComboboxItemAddNew as f, ComboboxSearchField as g, ComboboxSelectTrigger as h, ComboboxEmpty as i };
10189
+ //# sourceMappingURL=Combobox-B9nesJuc.js.map