@servicetitan/anvil2 1.46.1 → 1.46.3

package/dist/{Combobox-B9nesJuc.js → Combobox-DO8cIvRQ.js}

@@ -2,23 +2,24 @@ 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 { 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-r26xMIfm.js';
+import { P as Popover, u as usePopoverLegacyContext, f as usePopoverContext } from './Popover-v8R920kj.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjD5IMh0.js';
-import { s as supportsPopover } from './DrawerContext-DboTgTmo.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-DP9fmRSo.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-C7TLCna1.js';
 import { s as styles$4 } from './Listbox.module-DcBE8Zmo.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-BxFXQ0-n.js';
-import { C as Chip } from './Chip-Bz-vlQ4D.js';
+import { B as Button } from './Button-VNQQgZ45.js';
+import { C as Chip } from './Chip-DLU13qe-.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-BI3Xs75X.js';
+import { T as Tooltip } from './Tooltip-DhtVlhah.js';
 import { I as Icon$2 } from './Icon-D8SPKeO4.js';
 import { H as Helper } from './Helper-BkIDJqgA.js';
-import { A as Avatar } from './Avatar-CyGjhToG.js';
+import { A as Avatar } from './Avatar-3d5Kv2CF.js';
 import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
 import { useTrackingId } from './useTrackingId.js';
 import { s as styles$3 } from './ListView.module-MVsNF0X0.js';
@@ -8203,7 +8204,10 @@ function useGroups({
       groupedItems[groupKey].push(item);
     });
     Object.keys(groupedItems).forEach((key) => {
-      groupsSansItems.push({ key, label: groupToString?.(key) ?? key });
+      groupsSansItems.push({
+        key,
+        label: groupToString ? groupToString?.(key) : key
+      });
     });
     groupsSansItems.sort((a, b) => groupSorter(a.key, b.key));
     const orderedItems2 = [];
@@ -8248,6 +8252,8 @@ const SelectSingle = function(props) {
   const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
   const [hasEmpty, setHasEmpty] = useState(false);
   const [disabledItems, setDisabledItems] = useState([]);
+  const [forceCloseOnSelectItems, setForceCloseOnSelectItems] = useState([]);
+  const [, setForceClearInputValueOnSelectItems] = useState([]);
   const [isReadOnly, setIsReadOnly] = useState(readOnly);
   const [isDisabled, setIsDisabled] = useState(disabled);
   const referenceRef = useRef(null);
@@ -8290,7 +8296,7 @@ const SelectSingle = function(props) {
         case useSelect.stateChangeTypes.ItemClick:
           return {
             ...changes,
-            isOpen: open != null ? open : disableCloseOnSelectItem ? true : changes.isOpen,
+            isOpen: open != null ? open : forceCloseOnSelectItems.includes(changes.selectedItem) ? false : disableCloseOnSelectItem ? true : changes.isOpen,
             highlightedIndex: disableCloseOnSelectItem ? state.highlightedIndex : changes.highlightedIndex
           };
         default:
@@ -8344,6 +8350,8 @@ const SelectSingle = function(props) {
         selectedItems: [],
         disabledItems,
         setDisabledItems,
+        setForceCloseOnSelectItems,
+        setForceClearInputValueOnSelectItems,
         selectItem,
         inputValue,
         isDisabled,
@@ -8427,6 +8435,8 @@ const SelectMultiple = function(props) {
   const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
   const [hasEmpty, setHasEmpty] = useState(false);
   const [disabledItems, setDisabledItems] = useState([]);
+  const [forceCloseOnSelectItems, setForceCloseOnSelectItems] = useState([]);
+  const [, setForceClearInputValueOnSelectItems] = useState([]);
   const [isReadOnly, setIsReadOnly] = useState(readOnly);
   const [isDisabled, setIsDisabled] = useState(disabled);
   const referenceRef = useRef(null);
@@ -8505,7 +8515,7 @@ const SelectMultiple = function(props) {
         case useSelect.stateChangeTypes.ItemClick:
           return {
             ...changes,
-            isOpen: open != null ? open : disableCloseOnSelectItem ? true : changes.isOpen,
+            isOpen: open != null ? open : forceCloseOnSelectItems.includes(changes.selectedItem) ? false : disableCloseOnSelectItem ? true : changes.isOpen,
             highlightedIndex: disableCloseOnSelectItem ? state.highlightedIndex : changes.highlightedIndex
           };
         default:
@@ -8573,6 +8583,8 @@ const SelectMultiple = function(props) {
         selectedItems,
         disabledItems,
         setDisabledItems,
+        setForceCloseOnSelectItems,
+        setForceClearInputValueOnSelectItems,
         getSelectedItemProps,
         getDropdownProps,
         reset,
@@ -8717,7 +8729,7 @@ const ComboboxContentElement = function({
       className: ComboboxPopoverContentClassNames,
       ref: contentRef,
       onBlur: handleBlur,
-      children: groups?.length ? groups.map((group) => /* @__PURE__ */ jsx(ComboboxGroupProvider, { value: group, children: /* @__PURE__ */ jsx(
+      children: groups?.length ? groups.map((group, i) => /* @__PURE__ */ jsx(ComboboxGroupProvider, { value: group, children: /* @__PURE__ */ jsx(
         "ul",
         {
           "aria-labelledby": `${id}-group-${group.key}`,
@@ -8725,7 +8737,7 @@ const ComboboxContentElement = function({
           "data-anv": "combobox-group",
           role: "group",
           children: /* @__PURE__ */ jsxs("li", { children: [
-            /* @__PURE__ */ jsx(
+            group.label != null ? /* @__PURE__ */ jsx(
               Text,
               {
                 className: styles["group-title"],
@@ -8733,7 +8745,7 @@ const ComboboxContentElement = function({
                 variant: "eyebrow",
                 children: group.label
               }
-            ),
+            ) : i !== 0 ? /* @__PURE__ */ jsx(Divider, {}) : null,
             resolveChildren(group.items)
           ] })
         }
@@ -8748,7 +8760,7 @@ const ComboboxContentElement = function({
       ref: getMenuProps({ ref: contentRef }, { suppressRefError: true }).ref,
       tabIndex: -1,
       onBlur: handleBlur,
-      children: groups?.length ? groups.map((group) => /* @__PURE__ */ jsx(ComboboxGroupProvider, { value: group, children: /* @__PURE__ */ jsx(
+      children: groups?.length ? groups.map((group, i) => /* @__PURE__ */ jsx(ComboboxGroupProvider, { value: group, children: /* @__PURE__ */ jsx(
         "ul",
         {
           "aria-labelledby": `${id}-group-${group.key}`,
@@ -8756,7 +8768,7 @@ const ComboboxContentElement = function({
           "data-anv": "combobox-group",
           role: "group",
           children: /* @__PURE__ */ jsxs("li", { children: [
-            /* @__PURE__ */ jsx(
+            group.label != null ? /* @__PURE__ */ jsx(
               Text,
               {
                 className: styles["group-title"],
@@ -8764,7 +8776,7 @@ const ComboboxContentElement = function({
                 variant: "eyebrow",
                 children: group.label
               }
-            ),
+            ) : i !== 0 ? /* @__PURE__ */ jsx(Divider, {}) : null,
             resolveChildren(group.items)
           ] })
         }
@@ -9068,6 +9080,9 @@ const CoreComboboxItemElement = function({
   disabled: disabledProp,
   item,
   index: indexProp,
+  hideCheckbox,
+  forceCloseOnSelect,
+  forceClearInputValueOnSelect,
   alignItems,
   justifyItems,
   alignContent,
@@ -9087,6 +9102,8 @@ const CoreComboboxItemElement = function({
     selectedItems,
     disabledItems,
     setDisabledItems,
+    setForceCloseOnSelectItems,
+    setForceClearInputValueOnSelectItems,
     highlightedIndex,
     items,
     groupBy
@@ -9097,18 +9114,66 @@ const CoreComboboxItemElement = function({
     if (disabledProp && !disabledItems.includes(item)) {
       setDisabledItems([...disabledItems, item]);
     } else if (disabledItems.includes(item)) {
-      setDisabledItems(
-        disabledItems.filter((prevItem) => prevItem === item)
-      );
+      setDisabledItems(disabledItems.filter((prevItem) => prevItem !== item));
     }
     return () => {
       if (disabledItems.includes(item)) {
-        setDisabledItems(
-          disabledItems.filter((prevItem) => prevItem === item)
-        );
+        setDisabledItems(disabledItems.filter((prevItem) => prevItem !== item));
       }
     };
   }, [item, disabledProp, setDisabledItems]);
+  useEffect(() => {
+    if (forceCloseOnSelect) {
+      setForceCloseOnSelectItems((forceCloseOnSelectItems) => {
+        if (forceCloseOnSelectItems.includes(item)) {
+          return forceCloseOnSelectItems;
+        } else {
+          return [...forceCloseOnSelectItems, item];
+        }
+      });
+    }
+    return () => {
+      setForceCloseOnSelectItems((forceCloseOnSelectItems) => {
+        if (forceCloseOnSelectItems.includes(item)) {
+          return forceCloseOnSelectItems.filter(
+            (prevItem) => prevItem !== item
+          );
+        } else {
+          return forceCloseOnSelectItems;
+        }
+      });
+    };
+  }, [item, forceCloseOnSelect, setForceCloseOnSelectItems]);
+  useEffect(() => {
+    if (forceClearInputValueOnSelect) {
+      setForceClearInputValueOnSelectItems(
+        (forceClearInputValueOnSelectItems) => {
+          if (forceClearInputValueOnSelectItems.includes(item)) {
+            return forceClearInputValueOnSelectItems;
+          } else {
+            return [...forceClearInputValueOnSelectItems, item];
+          }
+        }
+      );
+    }
+    return () => {
+      setForceClearInputValueOnSelectItems(
+        (forceClearInputValueOnSelectItems) => {
+          if (forceClearInputValueOnSelectItems.includes(item)) {
+            return forceClearInputValueOnSelectItems.filter(
+              (prevItem) => prevItem !== item
+            );
+          } else {
+            return forceClearInputValueOnSelectItems;
+          }
+        }
+      );
+    };
+  }, [
+    item,
+    forceClearInputValueOnSelect,
+    setForceClearInputValueOnSelectItems
+  ]);
   if (multiple) {
     const checked = selectedItems.some(
       (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
@@ -9128,7 +9193,7 @@ const CoreComboboxItemElement = function({
           styles$3["listview-option"]
         ),
         children: [
-          item !== ADD_NEW$1 ? /* @__PURE__ */ jsx("div", { className: cx(styles["cell"], styles$3["cell"]), children: /* @__PURE__ */ jsx("div", { className: checkboxStyles["wrapper"], children: /* @__PURE__ */ jsxs("div", { className: checkboxStyles["checkbox"], children: [
+          item !== ADD_NEW$1 && !hideCheckbox ? /* @__PURE__ */ jsx("div", { className: cx(styles["cell"], styles$3["cell"]), children: /* @__PURE__ */ jsx("div", { className: checkboxStyles["wrapper"], children: /* @__PURE__ */ jsxs("div", { className: checkboxStyles["checkbox"], children: [
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -9398,6 +9463,8 @@ const ComboboxSingle = function(props) {
   const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
   const [hasEmpty, setHasEmpty] = useState(false);
   const [disabledItems, setDisabledItems] = useState([]);
+  const [forceCloseOnSelectItems, setForceCloseOnSelectItems] = useState([]);
+  const [, setForceClearInputValueOnSelectItems] = useState([]);
   const [isReadOnly, setIsReadOnly] = useState(readOnly);
   const [isDisabled, setIsDisabled] = useState(disabled);
   const referenceRef = useRef(null);
@@ -9470,9 +9537,12 @@ const ComboboxSingle = function(props) {
               inputValue: ""
             };
           } else {
+            const forceClose = forceCloseOnSelectItems.includes(
+              changes.selectedItem
+            );
             return {
               ...changes,
-              isOpen: open != null ? open : disableCloseOnSelectItem ? true : changes.isOpen,
+              isOpen: open != null ? open : forceClose ? false : disableCloseOnSelectItem ? true : changes.isOpen,
               highlightedIndex: disableCloseOnSelectItem ? itemToString(state.selectedItem) === state.inputValue || !state.inputValue ? state.highlightedIndex : 0 : changes.highlightedIndex
             };
           }
@@ -9553,20 +9623,24 @@ const ComboboxSingle = function(props) {
   }, [readOnly]);
   useEffect(() => {
     if (firstRenderRef.current) return;
-    const inputValueMatchesSelectedItem = selectedItem != null && inputValue === itemToString(selectedItem);
-    const inputValueIsEmpty = inputValue == null || inputValue === "";
-    if (!inputValueMatchesSelectedItem && !inputValueIsEmpty && !disableFilter) {
-      setItems(matchSorter(allItemsOrderedByGroup, inputValue, filterOptions));
-      setHasExactMatch(
-        matchSorter(allItemsOrderedByGroup, inputValue, {
-          ...filterOptions,
-          threshold: matchSorter.rankings.EQUAL
-        }).length > 0
-      );
-    } else {
-      setItems(allItemsOrderedByGroup);
-      setHasExactMatch(true);
-    }
+    setTimeout(() => {
+      const inputValueMatchesSelectedItem = selectedItem != null && inputValue === itemToString(selectedItem);
+      const inputValueIsEmpty = inputValue == null || inputValue === "";
+      if (!inputValueMatchesSelectedItem && !inputValueIsEmpty && !disableFilter) {
+        setItems(
+          matchSorter(allItemsOrderedByGroup, inputValue, filterOptions)
+        );
+        setHasExactMatch(
+          matchSorter(allItemsOrderedByGroup, inputValue, {
+            ...filterOptions,
+            threshold: matchSorter.rankings.EQUAL
+          }).length > 0
+        );
+      } else {
+        setItems(allItemsOrderedByGroup);
+        setHasExactMatch(true);
+      }
+    }, 200);
   }, [allItemsOrderedByGroup]);
   return /* @__PURE__ */ jsx(
     ComboboxContext.Provider,
@@ -9588,6 +9662,8 @@ const ComboboxSingle = function(props) {
         selectedItems: [],
         disabledItems,
         setDisabledItems,
+        setForceCloseOnSelectItems,
+        setForceClearInputValueOnSelectItems,
         getSelectedItemProps: void 0,
         getDropdownProps: void 0,
         selectItem,
@@ -9687,6 +9763,11 @@ const ComboboxMultiple = function(props) {
   const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
   const [hasEmpty, setHasEmpty] = useState(false);
   const [disabledItems, setDisabledItems] = useState([]);
+  const [forceCloseOnSelectItems, setForceCloseOnSelectItems] = useState([]);
+  const [
+    forceClearInputValueOnSelectItems,
+    setForceClearInputValueOnSelectItems
+  ] = useState([]);
   const [isReadOnly, setIsReadOnly] = useState(readOnly);
   const [isDisabled, setIsDisabled] = useState(disabled);
   let storedSetInputValue = void 0;
@@ -9808,11 +9889,17 @@ const ComboboxMultiple = function(props) {
               inputValue: ""
             };
           } else {
+            const forceClose = forceCloseOnSelectItems.includes(
+              changes.selectedItem
+            );
+            const forceClearInputValue = forceClearInputValueOnSelectItems.includes(
+              changes.selectedItem
+            );
             return {
               ...changes,
-              isOpen: open != null ? open : disableCloseOnSelectItem ? true : changes.isOpen,
-              highlightedIndex: disableCloseOnSelectItem ? disableClearInputValueOnSelectItem || !state.inputValue ? state.highlightedIndex : 0 : changes.highlightedIndex,
-              inputValue: disableClearInputValueOnSelectItem ? state.inputValue : ""
+              isOpen: open != null ? open : forceClose ? false : disableCloseOnSelectItem ? true : changes.isOpen,
+              highlightedIndex: forceClearInputValue ? 0 : disableCloseOnSelectItem ? disableClearInputValueOnSelectItem || !state.inputValue ? state.highlightedIndex : 0 : changes.highlightedIndex,
+              inputValue: forceClearInputValue ? "" : disableClearInputValueOnSelectItem ? state.inputValue : ""
             };
           }
         // prevent this from closing the popover by default
@@ -9906,19 +9993,21 @@ const ComboboxMultiple = function(props) {
   }, [readOnly]);
   useEffect(() => {
     if (firstRenderRef.current) return;
-    const inputValueIsEmpty = inputValue == null || inputValue === "";
-    if (!inputValueIsEmpty && !disableFilter) {
-      setItems(matchSorter(itemsProp, inputValue, filterOptions));
-      setHasExactMatch(
-        matchSorter(itemsProp, inputValue, {
-          ...filterOptions,
-          threshold: matchSorter.rankings.EQUAL
-        }).length > 0
-      );
-    } else {
-      setItems(itemsProp);
-      setHasExactMatch(true);
-    }
+    setTimeout(() => {
+      const inputValueIsEmpty = inputValue == null || inputValue === "";
+      if (!inputValueIsEmpty && !disableFilter) {
+        setItems(matchSorter(itemsProp, inputValue, filterOptions));
+        setHasExactMatch(
+          matchSorter(itemsProp, inputValue, {
+            ...filterOptions,
+            threshold: matchSorter.rankings.EQUAL
+          }).length > 0
+        );
+      } else {
+        setItems(itemsProp);
+        setHasExactMatch(true);
+      }
+    }, 200);
   }, [itemsProp]);
   return /* @__PURE__ */ jsx(
     ComboboxContext.Provider,
@@ -9940,6 +10029,8 @@ const ComboboxMultiple = function(props) {
         selectedItems,
         disabledItems,
         setDisabledItems,
+        setForceCloseOnSelectItems,
+        setForceClearInputValueOnSelectItems,
         getSelectedItemProps,
         getDropdownProps,
         reset,
@@ -10186,4 +10277,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-B9nesJuc.js.map
+//# sourceMappingURL=Combobox-DO8cIvRQ.js.map