@servicetitan/anvil2 1.28.0 → 1.29.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @servicetitan/anvil2
 
+## 1.29.0
+
+### Minor Changes
+
+- [#1143](https://github.com/servicetitan/hammer/pull/1143) [`a783c92`](https://github.com/servicetitan/hammer/commit/a783c92caa122b604f20accb599d1ff6625de951) Thanks [@AdamLantz](https://github.com/AdamLantz)! - [Combobox] Add support for grouping Combobox options
+
+- [#1153](https://github.com/servicetitan/hammer/pull/1153) [`326735c`](https://github.com/servicetitan/hammer/commit/326735cd8805190e971d6a88ee33a70df7ec782c) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - [toast] Add `onDismiss` to `toast` methods
+
+### Patch Changes
+
+- [#1125](https://github.com/servicetitan/hammer/pull/1125) [`3570a1c`](https://github.com/servicetitan/hammer/commit/3570a1c63fbfa1509a1a6bd4c67c5bb5848f39e5) Thanks [@pbuckingham-st](https://github.com/pbuckingham-st)! - [DateField] Better handling of inputs and accepting default states
+
+- [#1145](https://github.com/servicetitan/hammer/pull/1145) [`21b1215`](https://github.com/servicetitan/hammer/commit/21b12159e07ef53c47bde1313bc395c6002a54ec) Thanks [@tounsoo](https://github.com/tounsoo)! - [PopoverLegacy] Fix PopoverLegacyButton to handle undefined children
+
+- [#1124](https://github.com/servicetitan/hammer/pull/1124) [`bf2eb9f`](https://github.com/servicetitan/hammer/commit/bf2eb9f7225eb94ff3dad2749b6ada920986e4a3) Thanks [@tounsoo](https://github.com/tounsoo)! - [Dialog, Drawer] Reimplement fix contained scrolling when Dialog or Drawer is open and new `enableScrollChaining` prop is `false` (default)
+
+- [#1145](https://github.com/servicetitan/hammer/pull/1145) [`21b1215`](https://github.com/servicetitan/hammer/commit/21b12159e07ef53c47bde1313bc395c6002a54ec) Thanks [@tounsoo](https://github.com/tounsoo)! - [Menu] Add `root` prop to Menu for fallback usages
+
+- Updated dependencies [[`a783c92`](https://github.com/servicetitan/hammer/commit/a783c92caa122b604f20accb599d1ff6625de951), [`3570a1c`](https://github.com/servicetitan/hammer/commit/3570a1c63fbfa1509a1a6bd4c67c5bb5848f39e5), [`21b1215`](https://github.com/servicetitan/hammer/commit/21b12159e07ef53c47bde1313bc395c6002a54ec), [`326735c`](https://github.com/servicetitan/hammer/commit/326735cd8805190e971d6a88ee33a70df7ec782c), [`bf2eb9f`](https://github.com/servicetitan/hammer/commit/bf2eb9f7225eb94ff3dad2749b6ada920986e4a3), [`21b1215`](https://github.com/servicetitan/hammer/commit/21b12159e07ef53c47bde1313bc395c6002a54ec)]:
+  - @servicetitan/hammer-react@1.30.0
+
 ## 1.28.0
 
 ### Minor Changes
@@ -117,6 +138,15 @@
   - @servicetitan/hammer-react@1.29.0
   - @servicetitan/hammer-token@2.2.0
 
+## 1.26.5
+
+### Patch Changes
+
+- [#1144](https://github.com/servicetitan/hammer/pull/1144) [`6e92522`](https://github.com/servicetitan/hammer/commit/6e925224b4cf56c49ccbb215a28f20ec3156790c) Thanks [@tounsoo](https://github.com/tounsoo)! - [PopoverLegacy] Fix PopoverLegacyButton to handle undefined children
+
+- Updated dependencies [[`6e92522`](https://github.com/servicetitan/hammer/commit/6e925224b4cf56c49ccbb215a28f20ec3156790c)]:
+  - @servicetitan/hammer-react@1.28.5
+
 ## 1.26.4
 
 ### Patch Changes

package/dist/{Combobox-JAm3x-tw.js → Combobox-DCrEfyl2.js}

@@ -3,10 +3,11 @@ import { useTrackingId } from './useTrackingId.js';
 import React__default, { useRef, useCallback, useEffect, useMemo, cloneElement, useLayoutEffect, useReducer, Component, createContext, useState, useId, useContext, useDeferredValue } from 'react';
 import { g as getDefaultExportFromCjs, c as cx } from './index-tZvMCc77.js';
 import { a as _extends, _ as _objectWithoutPropertiesLoose } from './extends-Bg2s_OKl.js';
-import { e as PopoverLegacy, u as usePopoverLegacyContext, d as Popover, f as usePopoverContext } from './Popover-C1B3UJXp-B5obSIvA.js';
+import { e as PopoverLegacy, u as usePopoverLegacyContext, d as Popover, f as usePopoverContext } from './Popover-tu_N1aS6-CSLR1Xzc.js';
+import { s as styles$3 } from './Listbox.module-CJuWm7RR-CJuWm7RR.js';
 import { s as supportsPopover } from './supportsPopover-8aJR37cf-8aJR37cf.js';
 import { F as Flex } from './Flex-pdHNcZrF-CdQdYhOU.js';
-import { L as Label } from './Label-CbYy5kwu-BCTOKxOk.js';
+import { L as Label } from './Label-CUVr-jvI-BXhER5eQ.js';
 import { B as Button } from './Button-Ce--YZ9L-Csh0Zzuf.js';
 import { C as Chip } from './Chip-CAxTyjIZ-DfkCTnYy.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
@@ -14,7 +15,6 @@ import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { H as Helper } from './Helper-Ba5DBS51-DBtASfJG.js';
 import { T as Text } from './Text-C2n3GDdC-rz_AelM0.js';
 import { S as Spinner } from './Spinner-DdirfhPp-c7cDfIit.js';
-import { s as styles$3 } from './Listbox.module-CJuWm7RR-CJuWm7RR.js';
 import { s as styles$2 } from './ListView.module-BqvHsIQ9-BqvHsIQ9.js';
 import { I as Icon$2 } from './Icon-DbHA5GV1-DwO2aGkj.js';
 import { c as checkboxStyles, a as SvgIndeterminateCheckBox, S as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './Checkbox.module-DMrZNVpb-DL8zOKBQ.js';
@@ -8081,54 +8081,57 @@ const ComboboxLegacyEmpty = function({
   return !items.length ? children : null;
 };
 
-const item = "_item_1ued6_5";
-const input = "_input_1ued6_18";
-const prefix = "_prefix_1ued6_46";
-const suffix = "_suffix_1ued6_47";
-const combobox = "_combobox_1ued6_62";
-const select = "_select_1ued6_71";
-const chip = "_chip_1ued6_167";
-const listview = "_listview_1ued6_208";
-const empty = "_empty_1ued6_216";
-const children = "_children_1ued6_244";
-const Icon = "_Icon_1ued6_247";
-const small = "_small_1ued6_252";
-const large = "_large_1ued6_255";
-const error = "_error_1ued6_273";
-const disabled = "_disabled_1ued6_286";
+const item = "_item_pdvrn_5";
+const group = "_group_pdvrn_18";
+const input = "_input_pdvrn_31";
+const prefix = "_prefix_pdvrn_59";
+const suffix = "_suffix_pdvrn_60";
+const combobox = "_combobox_pdvrn_75";
+const select = "_select_pdvrn_84";
+const chip = "_chip_pdvrn_180";
+const listview = "_listview_pdvrn_221";
+const empty = "_empty_pdvrn_229";
+const children = "_children_pdvrn_271";
+const Icon = "_Icon_pdvrn_274";
+const small = "_small_pdvrn_279";
+const large = "_large_pdvrn_282";
+const error = "_error_pdvrn_300";
+const disabled = "_disabled_pdvrn_313";
 const styles = {
-	"buttons-wrapper": "_buttons-wrapper_1ued6_3",
-	"search-field": "_search-field_1ued6_4",
+	"buttons-wrapper": "_buttons-wrapper_pdvrn_3",
+	"search-field": "_search-field_pdvrn_4",
 	item: item,
+	group: group,
 	input: input,
-	"input-wrapper": "_input-wrapper_1ued6_19",
-	"toggle-button-wrapper": "_toggle-button-wrapper_1ued6_32",
-	"close-button-wrapper": "_close-button-wrapper_1ued6_33",
+	"input-wrapper": "_input-wrapper_pdvrn_32",
+	"toggle-button-wrapper": "_toggle-button-wrapper_pdvrn_45",
+	"close-button-wrapper": "_close-button-wrapper_pdvrn_46",
 	prefix: prefix,
 	suffix: suffix,
 	combobox: combobox,
 	select: select,
-	"popover-content": "_popover-content_1ued6_74",
-	"no-clear-button": "_no-clear-button_1ued6_93",
-	"input-flex": "_input-flex_1ued6_96",
-	"fake-placeholder": "_fake-placeholder_1ued6_124",
-	"close-button": "_close-button_1ued6_33",
-	"toggle-button": "_toggle-button_1ued6_32",
-	"rows-wrapper": "_rows-wrapper_1ued6_157",
-	"chip-wrapper": "_chip-wrapper_1ued6_167",
+	"popover-content": "_popover-content_pdvrn_87",
+	"no-clear-button": "_no-clear-button_pdvrn_106",
+	"input-flex": "_input-flex_pdvrn_109",
+	"fake-placeholder": "_fake-placeholder_pdvrn_137",
+	"close-button": "_close-button_pdvrn_46",
+	"toggle-button": "_toggle-button_pdvrn_45",
+	"rows-wrapper": "_rows-wrapper_pdvrn_170",
+	"chip-wrapper": "_chip-wrapper_pdvrn_180",
 	chip: chip,
 	listview: listview,
-	"loading-spinner": "_loading-spinner_1ued6_212",
+	"loading-spinner": "_loading-spinner_pdvrn_225",
 	empty: empty,
+	"group-title": "_group-title_pdvrn_240",
 	children: children,
 	Icon: Icon,
 	small: small,
 	large: large,
 	error: error,
-	"loading-infinite": "_loading-infinite_1ued6_286",
-	"loading-progress": "_loading-progress_1ued6_286",
+	"loading-infinite": "_loading-infinite_pdvrn_313",
+	"loading-progress": "_loading-progress_pdvrn_313",
 	disabled: disabled,
-	"listview-option": "_listview-option_1ued6_304"
+	"listview-option": "_listview-option_pdvrn_331"
 };
 
 const ComboboxTrigger = ({
@@ -8464,6 +8467,9 @@ const ComboboxSelectTrigger$1 = (props) => {
   return /* @__PURE__ */ jsx(ComboboxTrigger, { ...props, variant: "select" });
 };
 
+const ComboboxGroupContext = createContext(null);
+const ComboboxGroupProvider = ComboboxGroupContext.Provider;
+
 const ComboboxContentElement = function({
   children,
   className,
@@ -8482,7 +8488,8 @@ const ComboboxContentElement = function({
     isDisabled,
     isReadOnly,
     contentRef,
-    closeMenu
+    closeMenu,
+    groups
   } = useCombobox();
   const ComboboxPopoverContentClassNames = cx(
     styles["popover-content"],
@@ -8499,6 +8506,37 @@ const ComboboxContentElement = function({
     if (context?.controlled) return;
     context?.popover.close?.(closeMenu);
   };
+  const resolveChildren = (groupItems) => children?.({
+    items: groupItems,
+    inputValue,
+    selectedItem,
+    getMenuProps,
+    getItemProps,
+    listProps: {
+      ...getMenuProps({}, { suppressRefError: true }),
+      style: {
+        display: groupItems.length ? undefined : "none",
+        overflow: "auto"
+      }
+    },
+    options: items.map((item, index) => ({
+      optionProps: {
+        ...getItemProps({
+          item,
+          index
+        }),
+        tabIndex: disablePopover ? -1 : undefined,
+        selected: itemToKey(selectedItem) === itemToKey(item) || selectedItems.some(
+          (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
+        ),
+        disabled: !!isDisabled || !!isReadOnly
+        // also see "isItemDisabled" function
+      },
+      item,
+      index
+    }))
+  });
+  const id = useId();
   return disablePopover ? /* @__PURE__ */ jsx(
     "div",
     {
@@ -8506,35 +8544,27 @@ const ComboboxContentElement = function({
       className: ComboboxPopoverContentClassNames,
       ref: contentRef,
       onBlur: handleBlur,
-      children: children ? children({
-        items,
-        inputValue,
-        selectedItem,
-        getMenuProps,
-        getItemProps,
-        listProps: {
-          ...getMenuProps({}, { suppressRefError: true }),
-          style: {
-            display: items.length ? "" : "none",
-            overflow: "auto"
-          }
-        },
-        options: items.map((item, index) => ({
-          optionProps: {
-            ...getItemProps({
-              item,
-              index
-            }),
-            selected: itemToKey(selectedItem) === itemToKey(item) || selectedItems.some(
-              (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
+      children: groups?.length ? groups.map((group) => /* @__PURE__ */ jsx(ComboboxGroupProvider, { value: group, children: /* @__PURE__ */ jsx(
+        "ul",
+        {
+          "aria-labelledby": `${id}-group-${group.key}`,
+          className: cx(styles["group"], styles$3["listbox"]),
+          "data-anv": "combobox-group",
+          role: "group",
+          children: /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                className: styles["group-title"],
+                id: `${id}-group-${group.key}`,
+                variant: "eyebrow",
+                children: group.label
+              }
             ),
-            disabled: !!isDisabled || !!isReadOnly
-            // also see "isItemDisabled" function
-          },
-          item,
-          index
-        }))
-      }) : null
+            resolveChildren(group.items)
+          ] })
+        }
+      ) }, group.key)) : resolveChildren(items)
     }
   ) : /* @__PURE__ */ jsx(
     Popover.Content,
@@ -8545,36 +8575,27 @@ const ComboboxContentElement = function({
       ref: getMenuProps({ ref: contentRef }, { suppressRefError: true }).ref,
       tabIndex: -1,
       onBlur: handleBlur,
-      children: children ? children({
-        items,
-        inputValue,
-        selectedItem,
-        getMenuProps,
-        getItemProps,
-        listProps: {
-          ...getMenuProps({}, { suppressRefError: true }),
-          style: {
-            display: items.length ? undefined : "none",
-            overflow: "auto"
-          }
-        },
-        options: items.map((item, index) => ({
-          optionProps: {
-            ...getItemProps({
-              item,
-              index
-            }),
-            tabIndex: -1,
-            selected: itemToKey(selectedItem) === itemToKey(item) || selectedItems.some(
-              (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
+      children: groups?.length ? groups.map((group) => /* @__PURE__ */ jsx(ComboboxGroupProvider, { value: group, children: /* @__PURE__ */ jsx(
+        "ul",
+        {
+          "aria-labelledby": `${id}-group-${group.key}`,
+          className: cx(styles["group"], styles$3["listbox"]),
+          "data-anv": "combobox-group",
+          role: "group",
+          children: /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                className: styles["group-title"],
+                id: `${id}-group-${group.key}`,
+                variant: "eyebrow",
+                children: group.label
+              }
             ),
-            disabled: !!isDisabled || !!isReadOnly
-            // also see "isItemDisabled" function
-          },
-          item,
-          index
-        }))
-      }) : null
+            resolveChildren(group.items)
+          ] })
+        }
+      ) }, group.key)) : resolveChildren(items)
     }
   );
 };
@@ -8669,7 +8690,7 @@ const ComboboxItemElement = function({
   children,
   disabled: disabledProp,
   item,
-  index,
+  index: indexProp,
   alignItems,
   justifyItems,
   alignContent,
@@ -8689,8 +8710,11 @@ const ComboboxItemElement = function({
     selectedItems,
     disabledItems,
     setDisabledItems,
-    highlightedIndex
+    highlightedIndex,
+    items,
+    groupBy
   } = useCombobox();
+  const index = groupBy ? items.indexOf(item) : indexProp;
   const disabled = disabledProp || item && item instanceof Object && "disabled" in item && item.disabled;
   useEffect(() => {
     if (disabledProp && !disabledItems.includes(item)) {
@@ -8915,6 +8939,40 @@ const useDownshiftEnvironment = () => {
   return { ref: wrapperDivRef, environment };
 };
 
+function useGroups({
+  items,
+  groupBy,
+  groupToString,
+  groupSorter = (a, b) => `${a}`.localeCompare(`${b}`)
+}) {
+  const { groups, orderedItems } = useMemo(() => {
+    if (!groupBy) return { groups: [], orderedItems: items };
+    const groupsSansItems = [];
+    const groupedItems = {};
+    items.forEach((item) => {
+      const groupKey = item[groupBy];
+      if (!groupedItems[groupKey]) {
+        groupedItems[groupKey] = [];
+      }
+      groupedItems[groupKey].push(item);
+    });
+    Object.keys(groupedItems).forEach((key) => {
+      groupsSansItems.push({ key, label: groupToString?.(key) ?? key });
+    });
+    groupsSansItems.sort((a, b) => groupSorter(a.key, b.key));
+    const orderedItems2 = [];
+    const groups2 = groupsSansItems.map((group) => ({
+      ...group,
+      items: groupedItems[group.key].map((item) => {
+        orderedItems2.push(item);
+        return item;
+      })
+    }));
+    return { groups: groups2, orderedItems: orderedItems2 };
+  }, [groupBy, groupSorter, groupToString, items]);
+  return { groups, orderedItems };
+}
+
 const ADD_NEW = Symbol.for("add-new");
 const ComboboxContext = createContext(null);
 const useCombobox = function() {
@@ -8952,6 +9010,9 @@ const ComboboxSingle = function(props) {
     root,
     onInputValueChange,
     environment: environmentProp,
+    groupBy,
+    groupToString,
+    groupSorter,
     ...rest
   } = componentProps;
   const ComboboxClassNames = cx(styles["combobox"], className);
@@ -8971,10 +9032,22 @@ const ComboboxSingle = function(props) {
     closeMenu();
   };
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const { orderedItems: allItemsOrderedByGroup } = useGroups({
+    items: itemsProp,
+    groupBy,
+    groupToString,
+    groupSorter
+  });
+  const { groups: searchedGroups, orderedItems: searchedItemsOrderedByGroup } = useGroups({
+    items,
+    groupBy,
+    groupToString,
+    groupSorter
+  });
   const showAddNew = hasAddNew && !hasExactMatch;
   const combinedItems = useMemo(
-    () => showAddNew ? [...items, ADD_NEW] : items,
-    [items, showAddNew]
+    () => showAddNew ? [...searchedItemsOrderedByGroup, ADD_NEW] : searchedItemsOrderedByGroup,
+    [searchedItemsOrderedByGroup, showAddNew]
   );
   const itemToString = itemToStringProp ?? defaultItemToString;
   const itemToKey = itemToKeyProp ?? defaultItemToKey;
@@ -9039,18 +9112,20 @@ const ComboboxSingle = function(props) {
       const inputValueMatchesSelectedItem = selectedItem2 != null && inputValue2 === itemToString(selectedItem2);
       const inputValueIsEmpty = inputValue2 == null || inputValue2 === "";
       if (type === useCombobox$1.stateChangeTypes.InputKeyDownEnter || type === useCombobox$1.stateChangeTypes.ItemClick) {
-        setItems(itemsProp);
+        setItems(allItemsOrderedByGroup);
         setHasExactMatch(true);
       } else if (!inputValueMatchesSelectedItem && !inputValueIsEmpty && !disableFilter) {
-        setItems(matchSorter(itemsProp, inputValue2, filterOptions));
+        setItems(
+          matchSorter(allItemsOrderedByGroup, inputValue2, filterOptions)
+        );
         setHasExactMatch(
-          matchSorter(itemsProp, inputValue2, {
+          matchSorter(allItemsOrderedByGroup, inputValue2, {
             ...filterOptions,
             threshold: matchSorter.rankings.EQUAL
           }).length > 0
         );
       } else {
-        setItems(itemsProp);
+        setItems(allItemsOrderedByGroup);
         setHasExactMatch(true);
       }
     }),
@@ -9062,7 +9137,7 @@ const ComboboxSingle = function(props) {
     onIsOpenChange({ isOpen: isOpen2, inputValue: inputValue2, selectedItem: selectedItem2 }) {
       if (isOpen2 === false) {
         setTimeout(() => {
-          setItems(itemsProp);
+          setItems(allItemsOrderedByGroup);
           if (inputValue2 === "") {
             selectItem(null);
           } else {
@@ -9106,25 +9181,25 @@ const ComboboxSingle = function(props) {
     const inputValueMatchesSelectedItem = selectedItem != null && inputValue === itemToString(selectedItem);
     const inputValueIsEmpty = inputValue == null || inputValue === "";
     if (!inputValueMatchesSelectedItem && !inputValueIsEmpty && !disableFilter) {
-      setItems(matchSorter(itemsProp, inputValue, filterOptions));
+      setItems(matchSorter(allItemsOrderedByGroup, inputValue, filterOptions));
       setHasExactMatch(
-        matchSorter(itemsProp, inputValue, {
+        matchSorter(allItemsOrderedByGroup, inputValue, {
           ...filterOptions,
           threshold: matchSorter.rankings.EQUAL
         }).length > 0
       );
     } else {
-      setItems(itemsProp);
+      setItems(allItemsOrderedByGroup);
       setHasExactMatch(true);
     }
-  }, [itemsProp]);
+  }, [allItemsOrderedByGroup]);
   return /* @__PURE__ */ jsx(
     ComboboxContext.Provider,
     {
       value: {
         multiple: false,
         select: false,
-        items,
+        items: searchedItemsOrderedByGroup,
         itemToString,
         itemToKey,
         isOpen,
@@ -9159,7 +9234,10 @@ const ComboboxSingle = function(props) {
         loading,
         referenceRef,
         contentRef,
-        closeMenu
+        closeMenu,
+        groupBy,
+        groupToString,
+        groups: searchedGroups
       },
       children: /* @__PURE__ */ jsx(
         "div",
@@ -9222,6 +9300,8 @@ const ComboboxMultiple = function(props) {
     activeIndex: activeIndexProp,
     selectedItems: selectedItemsProp,
     environment: environmentProp,
+    groupBy,
+    groupToString,
     ...rest
   } = componentProps;
   const ComboboxClassNames = cx(styles["combobox"], className);
@@ -9242,10 +9322,20 @@ const ComboboxMultiple = function(props) {
     closeMenu();
   };
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const { orderedItems: allItemsOrderedByGroup } = useGroups({
+    items: itemsProp,
+    groupBy,
+    groupToString
+  });
+  const { groups: searchedGroups, orderedItems: searchedItemsOrderedByGroup } = useGroups({
+    items,
+    groupBy,
+    groupToString
+  });
   const showAddNew = hasAddNew && !hasExactMatch;
   const combinedItems = useMemo(
-    () => showAddNew ? [...items, ADD_NEW] : items,
-    [items, showAddNew]
+    () => showAddNew ? [...items, ADD_NEW] : searchedItemsOrderedByGroup,
+    [items, searchedItemsOrderedByGroup, showAddNew]
   );
   const itemToString = itemToStringProp ?? defaultItemToString;
   const itemToKey = itemToKeyProp ?? defaultItemToKey;
@@ -9385,18 +9475,20 @@ const ComboboxMultiple = function(props) {
       const inputValueMatchesSelectedItem = selectedItem2 != null && inputValue2 === itemToString(selectedItem2);
       const inputValueIsEmpty = inputValue2 == null || inputValue2 === "";
       if (type === useCombobox$1.stateChangeTypes.InputKeyDownEnter || type === useCombobox$1.stateChangeTypes.ItemClick) {
-        setItems(itemsProp);
+        setItems(allItemsOrderedByGroup);
         setHasExactMatch(true);
       } else if (!inputValueMatchesSelectedItem && !inputValueIsEmpty && !disableFilter) {
-        setItems(matchSorter(itemsProp, inputValue2, filterOptions));
+        setItems(
+          matchSorter(allItemsOrderedByGroup, inputValue2, filterOptions)
+        );
         setHasExactMatch(
-          matchSorter(itemsProp, inputValue2, {
+          matchSorter(allItemsOrderedByGroup, inputValue2, {
             ...filterOptions,
             threshold: matchSorter.rankings.EQUAL
           }).length > 0
         );
       } else {
-        setItems(itemsProp);
+        setItems(allItemsOrderedByGroup);
         setHasExactMatch(true);
       }
     }),
@@ -9404,7 +9496,7 @@ const ComboboxMultiple = function(props) {
       if (isOpen2 === false) {
         setTimeout(() => {
           setInputValue("");
-          setItems(itemsProp);
+          setItems(allItemsOrderedByGroup);
         }, 200);
       }
     },
@@ -9459,7 +9551,7 @@ const ComboboxMultiple = function(props) {
       value: {
         multiple: true,
         select: false,
-        items,
+        items: searchedItemsOrderedByGroup,
         itemToString,
         itemToKey,
         isOpen,
@@ -9498,7 +9590,10 @@ const ComboboxMultiple = function(props) {
         loading,
         referenceRef,
         contentRef,
-        closeMenu
+        closeMenu,
+        groupBy,
+        groupToString,
+        groups: searchedGroups
       },
       children: /* @__PURE__ */ jsx(
         "div",
@@ -9549,6 +9644,8 @@ const SelectSingle = function(props) {
     minPopoverHeight,
     root,
     environment: environmentProp,
+    groupBy,
+    groupToString,
     ...rest
   } = componentProps;
   const ComboboxClassNames = cx(styles["combobox"], className);
@@ -9566,6 +9663,11 @@ const SelectSingle = function(props) {
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
   const itemToString = itemToStringProp ?? defaultItemToString;
   const itemToKey = itemToKeyProp ?? defaultItemToKey;
+  const { groups, orderedItems } = useGroups({
+    items,
+    groupBy,
+    groupToString
+  });
   const {
     isOpen,
     getLabelProps,
@@ -9579,7 +9681,7 @@ const SelectSingle = function(props) {
     closeMenu
   } = useSelect({
     ...rest,
-    items,
+    items: orderedItems,
     itemToString,
     itemToKey,
     isOpen: open,
@@ -9633,7 +9735,7 @@ const SelectSingle = function(props) {
         multiple: false,
         select: true,
         disableClearSelection,
-        items,
+        items: orderedItems,
         itemToString,
         itemToKey,
         isOpen,
@@ -9659,7 +9761,10 @@ const SelectSingle = function(props) {
         loading,
         referenceRef,
         contentRef,
-        closeMenu
+        closeMenu,
+        groups,
+        groupBy,
+        groupToString
       },
       children: /* @__PURE__ */ jsx(
         "div",
@@ -9718,6 +9823,8 @@ const SelectMultiple = function(props) {
     activeIndex: activeIndexProp,
     selectedItems: selectedItemsProp,
     environment: environmentProp,
+    groupBy,
+    groupToString,
     ...rest
   } = componentProps;
   const ComboboxClassNames = cx(styles["combobox"], className);
@@ -9735,6 +9842,7 @@ const SelectMultiple = function(props) {
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
   const itemToString = itemToStringProp ?? defaultItemToString;
   const itemToKey = itemToKeyProp ?? defaultItemToKey;
+  const { groups, orderedItems } = useGroups({ items, groupBy, groupToString });
   const {
     getSelectedItemProps,
     getDropdownProps,
@@ -9787,7 +9895,7 @@ const SelectMultiple = function(props) {
     closeMenu
   } = useSelect({
     ...rest,
-    items,
+    items: orderedItems,
     itemToString,
     itemToKey,
     selectedItem: null,
@@ -9856,7 +9964,7 @@ const SelectMultiple = function(props) {
       value: {
         multiple: true,
         select: true,
-        items,
+        items: orderedItems,
         itemToString,
         itemToKey,
         isOpen,
@@ -9888,7 +9996,10 @@ const SelectMultiple = function(props) {
         loading,
         referenceRef,
         contentRef,
-        closeMenu
+        closeMenu,
+        groupBy,
+        groupToString,
+        groups
       },
       children: /* @__PURE__ */ jsx(
         "div",
@@ -10217,4 +10328,4 @@ const Combobox = Object.assign(ComboboxElement, {
 });
 
 export { Combobox as C, ComboboxElement as a, ComboboxSelect as b, ComboboxSearchField as c, ComboboxSelectTrigger as d, ComboboxContent as e, ComboboxList as f, ComboboxItem as g, ComboboxItemAddNew as h, ComboboxEmpty as i, useInfiniteCombobox as u };
-//# sourceMappingURL=Combobox-JAm3x-tw.js.map
+//# sourceMappingURL=Combobox-DCrEfyl2.js.map