@servicetitan/anvil2 1.46.11 → 1.47.1

package/dist/{Combobox-C9-VQHxv.js → Combobox-BWGxdcGI.js}

@@ -1,31 +1,31 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { forwardRef, useState, useEffect, createContext, useContext, useRef, useMemo, useCallback, useLayoutEffect, useReducer, cloneElement, Component, useId } from 'react';
+import { s as supportsPopover } from './DrawerContext-D4tWTLVf.js';
+import { P as Popover, u as usePopoverLegacyContext, f as usePopoverContext } from './Popover-CSj2mv66.js';
 import { c as cx, g as getDefaultExportFromCjs } from './index-tZvMCc77.js';
 import { a as _extends, _ as _objectWithoutPropertiesLoose } from './extends-Bg2s_OKl.js';
-import { P as Popover, u as usePopoverLegacyContext, f as usePopoverContext } from './Popover-BuhxFt5z.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjD5IMh0.js';
-import { s as supportsPopover } from './DrawerContext-D4tWTLVf.js';
-import { i as isMultiple, u as useDownshiftEnvironment$1, a as defaultItemToKey$1, d as defaultItemToString$1, S as SelectTriggerBase, A as ADD_NEW$1 } from './SelectTriggerBase-I4Qo37zM.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DLrhehwU.js';
+import { i as isMultiple, u as useDownshiftEnvironment$1, b as SELECT_ALL, a as defaultItemToKey$1, d as defaultItemToString$1, g as getScrollParent, A as ADD_NEW$1, S as SelectTriggerBase } from './SelectTriggerBase-DtLWrsm7.js';
 import { l as listboxStyles } from './Listbox.module-XuKszT3X.js';
-import { T as Text } from './Text-BqvcbXyp.js';
-import { D as Divider } from './Divider-DJe8kLf2.js';
-import { F as Flex } from './Flex-BdQMekvA.js';
-import { B as Button } from './Button-VNQQgZ45.js';
-import { C as Chip } from './Chip-DLU13qe-.js';
+import { T as Text } from './Text-Bbi-LKog.js';
+import { D as Divider } from './Divider-Dx2AV2jM.js';
+import { F as Flex } from './Flex-DdOpCJf2.js';
+import { S as Spinner } from './Spinner-xEFwsq8_.js';
+import { l as listViewStyles } from './ListView.module-BilDg12y.js';
+import { I as Icon$2 } from './Icon-CB-34pME.js';
+import { c as checkboxStyles, S as SvgIndeterminateCheckBox, a as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './indeterminate_check_box-RY9zr3xS.js';
+import { B as Button } from './Button-Bm-YMdkp.js';
+import { C as Chip } from './Chip-DRw9cu1_.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { S as SvgInfo } from './info-CYpG6tcI.js';
 import { S as SrOnly } from './SrOnly-CTsYSuby.js';
-import { T as Tooltip } from './Tooltip-Dp9gWa2P.js';
-import { I as Icon$2 } from './Icon-D8SPKeO4.js';
-import { H as Helper } from './Helper-BkIDJqgA.js';
-import { A as Avatar } from './Avatar-3d5Kv2CF.js';
+import { T as Tooltip } from './Tooltip-CmsYVHVU.js';
+import { H as Helper } from './Helper-BTXu4PCQ.js';
+import { A as Avatar } from './Avatar-BWw31pcL.js';
 import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
 import { useTrackingId } from './useTrackingId.js';
-import { l as listViewStyles } from './ListView.module-BilDg12y.js';
-import { c as checkboxStyles, S as SvgIndeterminateCheckBox, a as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './indeterminate_check_box-RY9zr3xS.js';
 import { S as SvgCheck } from './check-Cf67OWrZ.js';
-import { S as Spinner } from './Spinner-wmO8Epw0.js';
 
 import './Combobox.css';const label = "_label_jfzvd_2";
 const required = "_required_jfzvd_46";
@@ -6354,12 +6354,14 @@ function getKeyAttributes(key) {
   };
 }
 
+const ADD_NEW = Symbol.for("add-new");
 const defaultItemToString = function(item) {
   return item != null ? String(item) : "";
 };
 const defaultItemToKey = function(item) {
   return item;
 };
+const ComboboxLegacyContext = createContext(null);
 const useDownshiftEnvironment = () => {
   const wrapperDivRef = useRef(null);
   const shadowRoot = wrapperDivRef.current ? wrapperDivRef.current.getRootNode() : null;
@@ -6372,6 +6374,15 @@ const useDownshiftEnvironment = () => {
   } : void 0;
   return { ref: wrapperDivRef, environment };
 };
+const useComboboxLegacy = function() {
+  const context = useContext(
+    ComboboxLegacyContext
+  );
+  if (context == null) {
+    throw new Error("useComboboxLegacy must be wrapped in <ComboboxLegacy />");
+  }
+  return context;
+};
 
 const item$1 = "_item_rxmcz_5";
 const input = "_input_rxmcz_18";
@@ -6408,7 +6419,6 @@ const styles$1 = {
 	"chip-wrapper": "_chip-wrapper_rxmcz_167",
 	chip: chip,
 	listview: listview$1,
-	"loading-spinner": "_loading-spinner_rxmcz_212",
 	empty: empty$1,
 	Icon: Icon$1,
 	small: small,
@@ -6417,17 +6427,6 @@ const styles$1 = {
 	"listview-option": "_listview-option_rxmcz_304"
 };
 
-const ADD_NEW = Symbol.for("add-new");
-const ComboboxLegacyContext = createContext(null);
-const useComboboxLegacy = function() {
-  const context = useContext(
-    ComboboxLegacyContext
-  );
-  if (context == null) {
-    throw new Error("useComboboxLegacy must be wrapped in <ComboboxLegacy />");
-  }
-  return context;
-};
 const ComboboxLegacySingle = function(props) {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const {
@@ -7903,7 +7902,7 @@ const ComboboxLegacyList = function({
           },
           children: [
             children,
-            loading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { className: styles$1["loading-spinner"] }) }) : null
+            loading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }) : null
           ]
         }
       ),
@@ -7923,7 +7922,7 @@ const ComboboxLegacyList = function({
           },
           children: [
             children,
-            loading ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { className: styles$1["loading-spinner"] }) }) }) : null
+            loading ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }) }) : null
           ]
         }
       ),
@@ -8167,23 +8166,27 @@ const ComboboxEmpty = function({
   return /* @__PURE__ */ jsx(ComboboxEmptyElement, { children });
 };
 
-const item = "_item_156am_18";
-const group = "_group_156am_31";
-const combobox = "_combobox_156am_46";
-const listview = "_listview_156am_55";
-const empty = "_empty_156am_63";
-const Icon = "_Icon_156am_108";
+const item = "_item_11q9l_22";
+const group = "_group_11q9l_35";
+const combobox = "_combobox_11q9l_50";
+const listview = "_listview_11q9l_59";
+const empty = "_empty_11q9l_63";
+const Icon = "_Icon_11q9l_117";
+const scrolled = "_scrolled_11q9l_165";
 const styles = {
 	item: item,
 	group: group,
 	combobox: combobox,
-	"popover-content": "_popover-content_156am_50",
+	"popover-content": "_popover-content_11q9l_54",
 	listview: listview,
-	"loading-spinner": "_loading-spinner_156am_59",
 	empty: empty,
-	"group-title": "_group-title_156am_74",
+	"group-title": "_group-title_11q9l_75",
+	"group-list": "_group-list_11q9l_81",
 	Icon: Icon,
-	"listview-option": "_listview-option_156am_113"
+	"scroll-sentinel": "_scroll-sentinel_11q9l_120",
+	"listview-option": "_listview-option_11q9l_129",
+	"select-all": "_select-all_11q9l_159",
+	scrolled: scrolled
 };
 
 function useGroups({
@@ -8258,6 +8261,7 @@ const SelectSingle = function(props) {
   const [isDisabled, setIsDisabled] = useState(disabled);
   const referenceRef = useRef(null);
   const contentRef = useRef(null);
+  const listRef = useRef(null);
   const handleOutsidePress = (_e) => {
     if (disableCloseOnClickOutside) return;
     closeMenu();
@@ -8368,7 +8372,8 @@ const SelectSingle = function(props) {
         closeMenu,
         groups,
         groupBy,
-        groupToString
+        groupToString,
+        listRef
       },
       children: /* @__PURE__ */ jsx(
         "div",
@@ -8429,6 +8434,7 @@ const SelectMultiple = function(props) {
     environment: environmentProp,
     groupBy,
     groupToString,
+    selectAll,
     ...rest
   } = componentProps;
   const ComboboxClassNames = cx(styles["combobox"], className);
@@ -8441,6 +8447,7 @@ const SelectMultiple = function(props) {
   const [isDisabled, setIsDisabled] = useState(disabled);
   const referenceRef = useRef(null);
   const contentRef = useRef(null);
+  const listRef = useRef(null);
   const handleOutsidePress = (_e) => {
     if (disableCloseOnClickOutside) return;
     closeMenu();
@@ -8448,7 +8455,12 @@ const SelectMultiple = function(props) {
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
   const itemToString = itemToStringProp ?? defaultItemToString$1;
   const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
-  const { groups, orderedItems } = useGroups({ items, groupBy, groupToString });
+  const { groups, orderedItems: orderedItemsBase } = useGroups({
+    items,
+    groupBy,
+    groupToString
+  });
+  const orderedItems = selectAll ? [SELECT_ALL, ...orderedItemsBase] : orderedItemsBase;
   const {
     getSelectedItemProps,
     getDropdownProps,
@@ -8528,6 +8540,13 @@ const SelectMultiple = function(props) {
         case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
         case useSelect.stateChangeTypes.ItemClick:
         case useSelect.stateChangeTypes.ToggleButtonBlur:
+          if (changes.selectedItem === SELECT_ALL) {
+            selectAll?.onSelection();
+            return {
+              ...changes,
+              selectedItem: null
+            };
+          }
           if (newSelectedItem != null) {
             const itemAlreadySelected = selectedItems.some(
               (item) => itemToKey(item) === itemToKey(newSelectedItem)
@@ -8556,6 +8575,21 @@ const SelectMultiple = function(props) {
         return true;
       }
       return false;
+    },
+    onHighlightedIndexChange(changes) {
+      if (selectAll && changes.highlightedIndex === 0 && [
+        useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown,
+        useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp,
+        useSelect.stateChangeTypes.ToggleButtonKeyDownPageDown,
+        useSelect.stateChangeTypes.ToggleButtonKeyDownPageUp,
+        useSelect.stateChangeTypes.ToggleButtonKeyDownHome,
+        useSelect.stateChangeTypes.ToggleButtonKeyDownEnd
+      ].includes(changes.type) && listRef.current) {
+        const scrollParent = getScrollParent(listRef.current);
+        if (scrollParent) {
+          scrollParent.scrollTop = 0;
+        }
+      }
     }
   });
   useEffect(() => {
@@ -8607,7 +8641,9 @@ const SelectMultiple = function(props) {
         closeMenu,
         groupBy,
         groupToString,
-        groups
+        groups,
+        listRef,
+        selectAll
       },
       children: /* @__PURE__ */ jsx(
         "div",
@@ -8652,7 +8688,210 @@ const ComboboxSelect = function(props) {
   }
 };
 
+const ComboboxItemVisual = forwardRef(
+  ({
+    children,
+    disabled,
+    checked,
+    hideCheckbox,
+    rootDivProps,
+    flexProps
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-anv": "combobox-item",
+        ...rootDivProps,
+        className: cx(
+          styles["listview-option"],
+          listViewStyles["listview-option"],
+          rootDivProps.className
+        ),
+        children: [
+          !hideCheckbox ? /* @__PURE__ */ jsx("div", { className: cx(styles["cell"], listViewStyles["cell"]), children: /* @__PURE__ */ jsx("div", { className: checkboxStyles["wrapper"], children: /* @__PURE__ */ jsxs("div", { className: checkboxStyles["checkbox"], children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked,
+                "aria-checked": checked,
+                "aria-label": "Select",
+                readOnly: true,
+                tabIndex: -1,
+                ...disabled ? { disabled: true } : {}
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: checkboxStyles["icon-wrapper"], "aria-hidden": true, children: [
+              /* @__PURE__ */ jsx(
+                Icon$2,
+                {
+                  size: "large",
+                  svg: SvgIndeterminateCheckBox,
+                  className: checkboxStyles["icon-indeterminate"]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Icon$2,
+                {
+                  size: "large",
+                  svg: SvgCheckBox,
+                  className: checkboxStyles["icon-checked"]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Icon$2,
+                {
+                  size: "large",
+                  svg: SvgCheckBoxOutlineBlank,
+                  className: checkboxStyles["icon-unchecked"]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true })
+          ] }) }) }) : null,
+          /* @__PURE__ */ jsx(Flex, { grow: 1, shrink: 1, ...flexProps, children })
+        ]
+      }
+    );
+  }
+);
+ComboboxItemVisual.displayName = "ComboboxItemVisual";
+
+const ComboboxSelectAll = function({ className }) {
+  const {
+    getItemProps,
+    setForceCloseOnSelectItems,
+    highlightedIndex,
+    items,
+    selectAll
+  } = useCombobox$1();
+  const item = SELECT_ALL;
+  const index = items.indexOf(item);
+  const ref = useRef(null);
+  useEffect(() => {
+    return () => {
+      setForceCloseOnSelectItems((forceCloseOnSelectItems) => {
+        if (forceCloseOnSelectItems.includes(item)) {
+          return forceCloseOnSelectItems.filter(
+            (prevItem) => prevItem !== item
+          );
+        } else {
+          return forceCloseOnSelectItems;
+        }
+      });
+    };
+  }, [item, setForceCloseOnSelectItems]);
+  return /* @__PURE__ */ jsx(
+    ComboboxItemVisual,
+    {
+      ref,
+      rootDivProps: getItemProps({
+        item: SELECT_ALL,
+        index,
+        "aria-selected": highlightedIndex === index,
+        className: cx(styles["select-all"], className)
+      }),
+      hideCheckbox: false,
+      disabled: false,
+      checked: !!selectAll?.isChecked,
+      children: selectAll?.label
+    },
+    "select-all"
+  );
+};
+
 const ComboboxGroupContext = createContext(null);
+const useComboboxGroupContext = () => useContext(ComboboxGroupContext);
+
+const ComboboxGroupList = function({
+  children,
+  ...rest
+}) {
+  const {
+    getMenuProps,
+    multiple,
+    items,
+    hasAddNew = false,
+    hasEmpty,
+    loading,
+    selectAll,
+    listRef
+  } = useCombobox$1();
+  const scrollSentinelRef = useRef(null);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const { key: groupKey } = useComboboxGroupContext() ?? {};
+  const isAGroup = !!groupKey;
+  useEffect(() => {
+    if (!scrollSentinelRef.current) return;
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) {
+            setIsScrolled(true);
+          } else {
+            setIsScrolled(false);
+          }
+        });
+      },
+      { threshold: 0 }
+    );
+    intersectionObserver.observe(scrollSentinelRef.current);
+    return () => {
+      intersectionObserver.disconnect();
+    };
+  }, [scrollSentinelRef, setIsScrolled]);
+  if (!supportsPopover())
+    return /* @__PURE__ */ jsx(ComboboxLegacyList, { ...rest, children });
+  if (isAGroup) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (multiple) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "ul",
+        {
+          ...getMenuProps(rest),
+          ref: listRef,
+          "data-anv": "combobox-list",
+          className: cx(styles["listview"], listViewStyles["listview"], {
+            [styles.scrolled]: isScrolled
+          }),
+          style: {
+            display: items.length || hasAddNew ? void 0 : "none"
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { ref: scrollSentinelRef, className: styles["scroll-sentinel"] }),
+            !loading && selectAll && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(ComboboxSelectAll, {}),
+              /* @__PURE__ */ jsx(Divider, {})
+            ] }),
+            children
+          ]
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }) }) : !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+    ] });
+  } else {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          ...getMenuProps(rest),
+          ref: listRef,
+          "data-anv": "combobox-list",
+          className: listboxStyles["listbox"],
+          style: {
+            display: items.length || hasAddNew ? void 0 : "none"
+          },
+          children
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }) }) : !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+    ] });
+  }
+};
+
 const ComboboxGroupProvider = ComboboxGroupContext.Provider;
 
 const ComboboxContentElement = function({
@@ -8704,7 +8943,7 @@ const ComboboxContentElement = function({
         overflow: "auto"
       }
     },
-    options: items.map((item, index) => ({
+    options: groupItems.map((item, index) => ({
       optionProps: {
         ...getItemProps({
           item,
@@ -8722,6 +8961,9 @@ const ComboboxContentElement = function({
     }))
   });
   const id = useId();
+  const filterAlreadyRenderedItems = (items2) => {
+    return items2.filter((item) => item !== ADD_NEW$1 && item !== SELECT_ALL);
+  };
   return disablePopover ? /* @__PURE__ */ jsx(
     "div",
     {
@@ -8729,27 +8971,30 @@ const ComboboxContentElement = function({
       className: ComboboxPopoverContentClassNames,
       ref: contentRef,
       onBlur: handleBlur,
-      children: groups?.length ? groups.map((group, i) => /* @__PURE__ */ jsx(ComboboxGroupProvider, { value: group, children: /* @__PURE__ */ jsx(
-        "ul",
-        {
-          "aria-labelledby": `${id}-group-${group.key}`,
-          className: cx(styles["group"], listboxStyles["listbox"]),
-          "data-anv": "combobox-group",
-          role: "group",
-          children: /* @__PURE__ */ jsxs("li", { children: [
-            group.label != null ? /* @__PURE__ */ jsx(
-              Text,
-              {
-                className: styles["group-title"],
-                id: `${id}-group-${group.key}`,
-                variant: "eyebrow",
-                children: group.label
-              }
-            ) : i !== 0 ? /* @__PURE__ */ jsx(Divider, {}) : null,
-            resolveChildren(group.items)
-          ] })
-        }
-      ) }, group.key)) : resolveChildren(items)
+      children: groups?.length ? /* @__PURE__ */ jsx(ComboboxGroupList, { children: groups.map((group, i) => /* @__PURE__ */ jsxs(ComboboxGroupProvider, { value: group, children: [
+        i !== 0 && /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "aria-labelledby": `${id}-group-${group.key}`,
+            className: cx(styles["group"], listboxStyles["listbox"]),
+            "data-anv": "combobox-group",
+            role: "group",
+            children: [
+              group.label != null ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  className: styles["group-title"],
+                  id: `${id}-group-${group.key}`,
+                  variant: "eyebrow",
+                  children: group.label
+                }
+              ) : null,
+              /* @__PURE__ */ jsx("ul", { className: styles["group-list"], children: resolveChildren(filterAlreadyRenderedItems(group.items)) })
+            ]
+          }
+        )
+      ] }, group.key)) }) : resolveChildren(filterAlreadyRenderedItems(items))
     }
   ) : /* @__PURE__ */ jsx(
     Popover.Content,
@@ -8760,27 +9005,30 @@ const ComboboxContentElement = function({
       ref: getMenuProps({ ref: contentRef }, { suppressRefError: true }).ref,
       tabIndex: -1,
       onBlur: handleBlur,
-      children: groups?.length ? groups.map((group, i) => /* @__PURE__ */ jsx(ComboboxGroupProvider, { value: group, children: /* @__PURE__ */ jsx(
-        "ul",
-        {
-          "aria-labelledby": `${id}-group-${group.key}`,
-          className: cx(styles["group"], listboxStyles["listbox"]),
-          "data-anv": "combobox-group",
-          role: "group",
-          children: /* @__PURE__ */ jsxs("li", { children: [
-            group.label != null ? /* @__PURE__ */ jsx(
-              Text,
-              {
-                className: styles["group-title"],
-                id: `${id}-group-${group.key}`,
-                variant: "eyebrow",
-                children: group.label
-              }
-            ) : i !== 0 ? /* @__PURE__ */ jsx(Divider, {}) : null,
-            resolveChildren(group.items)
-          ] })
-        }
-      ) }, group.key)) : resolveChildren(items)
+      children: groups?.length ? /* @__PURE__ */ jsx(ComboboxGroupList, { children: groups.map((group, i) => /* @__PURE__ */ jsxs(ComboboxGroupProvider, { value: group, children: [
+        i !== 0 && /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "aria-labelledby": `${id}-group-${group.key}`,
+            className: cx(styles["group"], listboxStyles["listbox"]),
+            "data-anv": "combobox-group",
+            role: "group",
+            children: [
+              group.label != null ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  className: styles["group-title"],
+                  id: `${id}-group-${group.key}`,
+                  variant: "eyebrow",
+                  children: group.label
+                }
+              ) : null,
+              /* @__PURE__ */ jsx("ul", { className: styles["group-list"], children: resolveChildren(filterAlreadyRenderedItems(group.items)) })
+            ]
+          }
+        )
+      ] }, group.key)) }) : resolveChildren(filterAlreadyRenderedItems(items))
     }
   );
 };
@@ -9079,7 +9327,7 @@ const CoreComboboxItemElement = function({
   children,
   disabled: disabledProp,
   item,
-  index: indexProp,
+  index: _indexProp,
   hideCheckbox,
   forceCloseOnSelect,
   forceClearInputValueOnSelect,
@@ -9105,10 +9353,9 @@ const CoreComboboxItemElement = function({
     setForceCloseOnSelectItems,
     setForceClearInputValueOnSelectItems,
     highlightedIndex,
-    items,
-    groupBy
+    items
   } = useCombobox$1();
-  const index = groupBy ? items.indexOf(item) : indexProp;
+  const index = items.indexOf(item);
   const disabled = disabledProp || item && item instanceof Object && "disabled" in item && item.disabled;
   useEffect(() => {
     if (disabledProp && !disabledItems.includes(item)) {
@@ -9174,84 +9421,35 @@ const CoreComboboxItemElement = function({
     forceClearInputValueOnSelect,
     setForceClearInputValueOnSelectItems
   ]);
+  const flexProps = {
+    alignItems,
+    justifyItems,
+    alignContent,
+    justifyContent,
+    placeItems,
+    placeContent,
+    gap,
+    rowGap,
+    columnGap
+  };
   if (multiple) {
     const checked = selectedItems.some(
       (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
     );
-    return /* @__PURE__ */ jsxs(
-      "div",
+    return /* @__PURE__ */ jsx(
+      ComboboxItemVisual,
       {
-        "data-anv": "combobox-item",
-        ...getItemProps({
+        rootDivProps: getItemProps({
           item,
           index,
           "aria-selected": highlightedIndex === index,
           ...rest
         }),
-        className: cx(
-          styles["listview-option"],
-          listViewStyles["listview-option"]
-        ),
-        children: [
-          item !== ADD_NEW$1 && !hideCheckbox ? /* @__PURE__ */ jsx("div", { className: cx(styles["cell"], listViewStyles["cell"]), children: /* @__PURE__ */ jsx("div", { className: checkboxStyles["wrapper"], children: /* @__PURE__ */ jsxs("div", { className: checkboxStyles["checkbox"], children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "checkbox",
-                checked,
-                "aria-checked": checked,
-                "aria-label": "Select",
-                readOnly: true,
-                tabIndex: -1,
-                ...disabled ? { disabled: true } : {}
-              }
-            ),
-            /* @__PURE__ */ jsxs("span", { className: checkboxStyles["icon-wrapper"], "aria-hidden": true, children: [
-              /* @__PURE__ */ jsx(
-                Icon$2,
-                {
-                  size: "large",
-                  svg: SvgIndeterminateCheckBox,
-                  className: checkboxStyles["icon-indeterminate"]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Icon$2,
-                {
-                  size: "large",
-                  svg: SvgCheckBox,
-                  className: checkboxStyles["icon-checked"]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Icon$2,
-                {
-                  size: "large",
-                  svg: SvgCheckBoxOutlineBlank,
-                  className: checkboxStyles["icon-unchecked"]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("span", { "aria-hidden": true })
-          ] }) }) }) : null,
-          /* @__PURE__ */ jsx(
-            Flex,
-            {
-              grow: 1,
-              shrink: 1,
-              alignItems,
-              justifyItems,
-              alignContent,
-              justifyContent,
-              placeItems,
-              placeContent,
-              gap,
-              rowGap,
-              columnGap,
-              children
-            }
-          )
-        ]
+        disabled,
+        checked,
+        hideCheckbox: hideCheckbox || item === ADD_NEW$1,
+        flexProps,
+        children
       }
     );
   } else {
@@ -9275,15 +9473,7 @@ const CoreComboboxItemElement = function({
               className: listboxStyles["children"],
               grow: 1,
               shrink: 1,
-              alignItems,
-              justifyItems,
-              alignContent,
-              justifyContent,
-              placeItems,
-              placeContent,
-              gap,
-              rowGap,
-              columnGap,
+              ...flexProps,
               children
             }
           ),
@@ -9377,26 +9567,60 @@ const ComboboxListElement = function({
     items,
     hasAddNew = false,
     hasEmpty,
-    loading
+    loading,
+    selectAll,
+    listRef
   } = useCombobox$1();
+  const scrollSentinelRef = useRef(null);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const { key: groupKey } = useComboboxGroupContext() ?? {};
+  const isAGroup = !!groupKey;
+  useEffect(() => {
+    if (!scrollSentinelRef.current) return;
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) {
+            setIsScrolled(true);
+          } else {
+            setIsScrolled(false);
+          }
+        });
+      },
+      { threshold: 0 }
+    );
+    intersectionObserver.observe(scrollSentinelRef.current);
+    return () => {
+      intersectionObserver.disconnect();
+    };
+  }, [scrollSentinelRef, setIsScrolled]);
   if (!supportsPopover())
     return /* @__PURE__ */ jsx(ComboboxLegacyList, { ...rest, children });
+  if (isAGroup) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
   if (multiple) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "div",
+      /* @__PURE__ */ jsxs(
+        "ul",
         {
           ...getMenuProps(rest),
+          ref: listRef,
           "data-anv": "combobox-list",
-          className: cx(styles["listview"], listViewStyles["listview"]),
+          className: cx(styles["listview"], listViewStyles["listview"], {
+            [styles.scrolled]: isScrolled
+          }),
           style: {
-            display: items.length || hasAddNew ? void 0 : "none",
-            overflow: "auto"
+            display: items.length || hasAddNew ? void 0 : "none"
           },
-          children
+          children: [
+            /* @__PURE__ */ jsx("div", { ref: scrollSentinelRef, className: styles["scroll-sentinel"] }),
+            !loading && selectAll && /* @__PURE__ */ jsx(ComboboxSelectAll, {}),
+            children
+          ]
         }
       ),
-      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { className: styles["loading-spinner"] }) }) }) : !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }) }) : !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
     ] });
   } else {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -9404,16 +9628,16 @@ const ComboboxListElement = function({
         "ul",
         {
           ...getMenuProps(rest),
+          ref: listRef,
           "data-anv": "combobox-list",
           className: listboxStyles["listbox"],
           style: {
-            display: items.length || hasAddNew ? void 0 : "none",
-            overflow: "auto"
+            display: items.length || hasAddNew ? void 0 : "none"
           },
           children
         }
       ),
-      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { className: styles["loading-spinner"] }) }) }) : !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }) }) : !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
     ] });
   }
 };
@@ -9469,6 +9693,7 @@ const ComboboxSingle = function(props) {
   const [isDisabled, setIsDisabled] = useState(disabled);
   const referenceRef = useRef(null);
   const contentRef = useRef(null);
+  const listRef = useRef(null);
   const handleOutsidePress = (_e) => {
     if (disableCloseOnClickOutside) return;
     closeMenu();
@@ -9685,6 +9910,7 @@ const ComboboxSingle = function(props) {
         loading,
         referenceRef,
         contentRef,
+        listRef,
         closeMenu,
         groupBy,
         groupToString,
@@ -9751,6 +9977,7 @@ const ComboboxMultiple = function(props) {
     activeIndex: activeIndexProp,
     selectedItems: selectedItemsProp,
     environment: environmentProp,
+    selectAll,
     groupBy,
     groupToString,
     ...rest
@@ -9773,6 +10000,7 @@ const ComboboxMultiple = function(props) {
   let storedSetInputValue = void 0;
   const referenceRef = useRef(null);
   const contentRef = useRef(null);
+  const listRef = useRef(null);
   const handleOutsidePress = (_e) => {
     if (disableCloseOnClickOutside) return;
     closeMenu();
@@ -9789,10 +10017,16 @@ const ComboboxMultiple = function(props) {
     groupToString
   });
   const showAddNew = hasAddNew && !hasExactMatch;
-  const combinedItems = useMemo(
-    () => showAddNew ? [...items, ADD_NEW$1] : searchedItemsOrderedByGroup,
-    [items, searchedItemsOrderedByGroup, showAddNew]
-  );
+  const combinedItems = useMemo(() => {
+    let items2 = searchedItemsOrderedByGroup;
+    if (showAddNew) {
+      items2 = [...items2, ADD_NEW$1];
+    }
+    if (selectAll) {
+      items2 = [SELECT_ALL, ...items2];
+    }
+    return items2;
+  }, [searchedItemsOrderedByGroup, showAddNew, selectAll]);
   const itemToString = itemToStringProp ?? defaultItemToString$1;
   const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
   const {
@@ -9888,6 +10122,12 @@ const ComboboxMultiple = function(props) {
               selectedItem: state.selectedItem,
               inputValue: ""
             };
+          } else if (changes.selectedItem === SELECT_ALL) {
+            selectAll?.onSelection();
+            return {
+              ...changes,
+              selectedItem: null
+            };
           } else {
             const forceClose = forceCloseOnSelectItems.includes(
               changes.selectedItem
@@ -9976,6 +10216,21 @@ const ComboboxMultiple = function(props) {
         return true;
       }
       return false;
+    },
+    onHighlightedIndexChange(changes) {
+      if (selectAll && changes.highlightedIndex === 0 && [
+        useCombobox.stateChangeTypes.InputKeyDownHome,
+        useCombobox.stateChangeTypes.InputKeyDownEnd,
+        useCombobox.stateChangeTypes.InputKeyDownArrowDown,
+        useCombobox.stateChangeTypes.InputKeyDownArrowUp,
+        useCombobox.stateChangeTypes.InputKeyDownPageDown,
+        useCombobox.stateChangeTypes.InputKeyDownPageUp
+      ].includes(changes.type) && listRef.current) {
+        const scrollParent = getScrollParent(listRef.current);
+        if (scrollParent) {
+          scrollParent.scrollTop = 0;
+        }
+      }
     }
   });
   storedSetInputValue = setInputValue;
@@ -10015,7 +10270,7 @@ const ComboboxMultiple = function(props) {
       value: {
         multiple: true,
         select: false,
-        items: searchedItemsOrderedByGroup,
+        items: combinedItems,
         itemToString,
         itemToKey,
         isOpen,
@@ -10056,10 +10311,12 @@ const ComboboxMultiple = function(props) {
         loading,
         referenceRef,
         contentRef,
+        listRef,
         closeMenu,
         groupBy,
         groupToString,
-        groups: searchedGroups
+        groups: searchedGroups,
+        selectAll
       },
       children: /* @__PURE__ */ jsx(
         "div",
@@ -10277,4 +10534,4 @@ const Combobox = Object.assign(ComboboxElement, {
 });
 
 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 };
-//# sourceMappingURL=Combobox-C9-VQHxv.js.map
+//# sourceMappingURL=Combobox-BWGxdcGI.js.map