@servicetitan/anvil2 3.9.0 → 3.10.0

package/dist/{useInfiniteCombobox-COJTJxCZ.js → useInfiniteCombobox-V94SoOiU.js}

@@ -1,13 +1,14 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useContext, useEffect, useMemo, useState, useRef, forwardRef, useId, useLayoutEffect, useDeferredValue, useCallback } from 'react';
 import { P as Popover, u as usePopoverContext } from './Popover-CjsE5FG0.js';
-import { i as isMultiple, b as SELECT_ALL, a as defaultItemToKey, d as defaultItemToString, g as getScrollParent, A as ADD_NEW, S as SelectTriggerBase } from './SelectTriggerBase-1Cc6EUBw.js';
+import { i as isMultiple, b as SELECT_ALL, a as defaultItemToKey, d as defaultItemToString, g as getScrollParent, A as ADD_NEW, S as SelectTriggerBase } from './SelectTriggerBase-rxHXMSb4.js';
 import { c as cx } from './index-De1g9FRV.js';
 import { u as useDownshiftEnvironment, c as useMultipleSelection, b as useSelect, a as useCombobox$1 } from './downshift.esm-xtSnQp44.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';
 import { l as listboxStyles } from './Listbox.module-K85jTwXo.js';
 import { T as Text } from './Text-CIoD_RK4.js';
 import { D as Divider } from './Divider-C7fp5Xb6.js';
+import { C as COMMON_PART, A as ANV_PART_ATTR } from './anvParts-BGg5dgfl.js';
 import { F as Flex } from './Flex-CRF7gj0_.js';
 import { S as Spinner } from './Spinner-B7tTWcP6.js';
 import { s as styles$1 } from './ListView.module-DfqtCL3Q.js';
@@ -104,6 +105,15 @@ function useGroups({
   return { groups, orderedItems };
 }
 
+function splitDataAttributes$1(rest) {
+  const dataAttributes = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key.startsWith("data-"))
+  );
+  const restWithoutData = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => !key.startsWith("data-"))
+  );
+  return { dataAttributes, restWithoutData };
+}
 const SelectSingle = (props) => {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const {
@@ -130,6 +140,7 @@ const SelectSingle = (props) => {
     groupSorter,
     ...rest
   } = componentProps;
+  const { dataAttributes, restWithoutData } = splitDataAttributes$1(rest);
   const ComboboxClassNames = cx(styles["combobox"], className);
   const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
   const [hasEmpty, setHasEmpty] = useState(false);
@@ -166,7 +177,7 @@ const SelectSingle = (props) => {
     inputValue,
     closeMenu
   } = useSelect({
-    ...rest,
+    ...restWithoutData,
     items: orderedItems,
     itemToString,
     itemToKey,
@@ -214,11 +225,6 @@ const SelectSingle = (props) => {
   useEffect(() => {
     setIsReadOnly(readOnly);
   }, [readOnly]);
-  useEffect(() => {
-    if (disabled || readOnly) {
-      closeMenu();
-    }
-  }, [disabled, readOnly, closeMenu]);
   return /* @__PURE__ */ jsx(
     ComboboxContext.Provider,
     {
@@ -263,6 +269,7 @@ const SelectSingle = (props) => {
       children: /* @__PURE__ */ jsx(
         "div",
         {
+          ...dataAttributes,
           className: ComboboxClassNames,
           "data-anv": "combobox",
           style: { ...style, ...layoutStyles },
@@ -323,6 +330,7 @@ const SelectMultiple = (props) => {
     selectAll,
     ...rest
   } = componentProps;
+  const { dataAttributes, restWithoutData } = splitDataAttributes$1(rest);
   const ComboboxClassNames = cx(styles["combobox"], className);
   const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
   const [hasEmpty, setHasEmpty] = useState(false);
@@ -399,7 +407,7 @@ const SelectMultiple = (props) => {
     inputValue,
     closeMenu
   } = useSelect({
-    ...rest,
+    ...restWithoutData,
     items: orderedItems,
     itemToString,
     itemToKey,
@@ -485,11 +493,6 @@ const SelectMultiple = (props) => {
   useEffect(() => {
     setIsReadOnly(readOnly);
   }, [readOnly]);
-  useEffect(() => {
-    if (disabled || readOnly) {
-      closeMenu();
-    }
-  }, [disabled, readOnly, closeMenu]);
   return /* @__PURE__ */ jsx(
     ComboboxContext.Provider,
     {
@@ -540,6 +543,7 @@ const SelectMultiple = (props) => {
       children: /* @__PURE__ */ jsx(
         "div",
         {
+          ...dataAttributes,
           className: ComboboxClassNames,
           "data-anv": "combobox",
           style: { ...style, ...layoutStyles },
@@ -767,6 +771,17 @@ const ComboboxGroupList = ({
 
 const ComboboxGroupProvider = ComboboxGroupContext.Provider;
 
+const PARTS = {
+  input: COMMON_PART.input,
+  trigger: COMMON_PART.trigger,
+  clearButton: COMMON_PART.clearButton,
+  toggleButton: COMMON_PART.toggleButton,
+  chip: COMMON_PART.chip,
+  menu: COMMON_PART.menu,
+  option: COMMON_PART.option,
+  popover: COMMON_PART.popover
+};
+
 const ComboboxContentElement = ({
   children,
   className,
@@ -872,6 +887,7 @@ const ComboboxContentElement = ({
     {
       "data-anv": "combobox-content",
       ...rest,
+      ...{ [ANV_PART_ATTR]: PARTS.popover },
       className: popoverContentClassNames,
       ref: getMenuProps({ ref: contentRef }, { suppressRefError: true }).ref,
       tabIndex: -1,
@@ -1001,7 +1017,10 @@ const ComboboxTrigger = (props) => {
       ref: context?.invoker.ref
     }
   };
-  const toggleButtonProps = select ? {} : getToggleButtonProps();
+  const toggleButtonProps = select ? {} : {
+    ...getToggleButtonProps(),
+    [ANV_PART_ATTR]: PARTS.toggleButton
+  };
   const handleClearButtonClick = (_e) => {
     if (onClear) {
       onClear();
@@ -1036,6 +1055,7 @@ const ComboboxTrigger = (props) => {
       labelProps,
       inputWrapperProps,
       toggleButtonProps,
+      clearButtonProps: { [ANV_PART_ATTR]: PARTS.clearButton },
       itemToString,
       removeSelectedItem,
       variant: select ? "select" : "combobox",
@@ -1055,9 +1075,12 @@ const ComboboxTrigger = (props) => {
             selectedItem: item,
             index
           });
-          return chipProps;
+          return {
+            ...chipProps,
+            [ANV_PART_ATTR]: PARTS.chip
+          };
         }
-        return {};
+        return { [ANV_PART_ATTR]: PARTS.chip };
       },
       inputProps: select ? {
         ...getDropdownProps != null ? getDropdownProps({
@@ -1068,7 +1091,8 @@ const ComboboxTrigger = (props) => {
         },
         ["aria-expanded"]: context?.invoker["aria-expanded"],
         ["aria-details"]: getMenuProps().id,
-        ["aria-haspopup"]: context?.invoker["aria-haspopup"]
+        ["aria-haspopup"]: context?.invoker["aria-haspopup"],
+        [ANV_PART_ATTR]: PARTS.trigger
       } : {
         ["aria-expanded"]: context?.invoker["aria-expanded"],
         ["aria-details"]: getMenuProps().id,
@@ -1093,7 +1117,8 @@ const ComboboxTrigger = (props) => {
           autoComplete: "off",
           id,
           ref: inputRef
-        }) : {}
+        }) : {},
+        [ANV_PART_ATTR]: PARTS.input
       }
     }
   );
@@ -1172,6 +1197,9 @@ const ComboboxSelectTrigger = ({
   );
 };
 
+function optionDataId(key) {
+  return typeof key === "string" || typeof key === "number" ? { "data-id": String(key) } : {};
+}
 const CoreComboboxItemElement = ({
   children,
   disabled: disabledProp,
@@ -1292,7 +1320,9 @@ const CoreComboboxItemElement = ({
           item,
           index,
           "aria-selected": highlightedIndex === index,
-          ...rest
+          ...rest,
+          [ANV_PART_ATTR]: PARTS.option,
+          ...optionDataId(itemToKey(item))
         }),
         disabled,
         checked,
@@ -1309,7 +1339,9 @@ const CoreComboboxItemElement = ({
           item,
           index,
           "aria-selected": highlightedIndex === index,
-          ...rest
+          ...rest,
+          [ANV_PART_ATTR]: PARTS.option,
+          ...optionDataId(itemToKey(item))
         }),
         "data-anv": "combobox-item",
         "data-checked": itemToKey(selectedItem) === itemToKey(item),
@@ -1441,6 +1473,7 @@ const ComboboxListElement = ({
           ...getMenuProps(rest),
           ref: listRef,
           "data-anv": "combobox-list",
+          ...{ [ANV_PART_ATTR]: PARTS.menu },
           className: cx(styles["listview"], styles$1["listview"], {
             [styles.scrolled]: isScrolled
           }),
@@ -1464,6 +1497,7 @@ const ComboboxListElement = ({
           ...getMenuProps(rest),
           ref: listRef,
           "data-anv": "combobox-list",
+          ...{ [ANV_PART_ATTR]: PARTS.menu },
           className: listboxStyles["listbox"],
           style: {
             display: items.length || hasAddNew ? void 0 : "none"
@@ -1481,6 +1515,15 @@ const ComboboxList = ({
   ...rest
 }) => /* @__PURE__ */ jsx(ComboboxListElement, { className, ...rest, children });
 
+function splitDataAttributes(rest) {
+  const dataAttributes = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key.startsWith("data-"))
+  );
+  const restWithoutData = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => !key.startsWith("data-"))
+  );
+  return { dataAttributes, restWithoutData };
+}
 const COMBOBOX_DEPRECATION_MESSAGE = "[Anvil2] Combobox is deprecated. Use SelectField or MultiSelectField instead. Combobox will be removed in Anvil2 5.0.";
 const ComboboxSingle = (props) => {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
@@ -1510,6 +1553,7 @@ const ComboboxSingle = (props) => {
     groupSorter,
     ...rest
   } = componentProps;
+  const { dataAttributes, restWithoutData } = splitDataAttributes(rest);
   const ComboboxClassNames = cx(styles["combobox"], className);
   const [items, setItems] = useState(itemsProp);
   const [hasAddNew, setHasAddNew] = useState(false);
@@ -1563,7 +1607,7 @@ const ComboboxSingle = (props) => {
     inputValue,
     closeMenu
   } = useCombobox$1({
-    ...rest,
+    ...restWithoutData,
     items: combinedItems,
     itemToString,
     itemToKey,
@@ -1811,6 +1855,7 @@ const ComboboxSingle = (props) => {
   return /* @__PURE__ */ jsx(ComboboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
     {
+      ...dataAttributes,
       className: ComboboxClassNames,
       "data-anv": "combobox",
       style: { ...style, ...layoutStyles },
@@ -1873,6 +1918,7 @@ const ComboboxMultiple = (props) => {
     groupSorter,
     ...rest
   } = componentProps;
+  const { dataAttributes, restWithoutData } = splitDataAttributes(rest);
   const ComboboxClassNames = cx(styles["combobox"], className);
   const [items, setItems] = useState(itemsProp);
   const [hasAddNew, setHasAddNew] = useState(false);
@@ -1983,7 +2029,7 @@ const ComboboxMultiple = (props) => {
     inputValue,
     closeMenu
   } = useCombobox$1({
-    ...rest,
+    ...restWithoutData,
     items: combinedItems,
     itemToString,
     itemToKey,
@@ -2271,6 +2317,7 @@ const ComboboxMultiple = (props) => {
   return /* @__PURE__ */ jsx(ComboboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
     {
+      ...dataAttributes,
       className: ComboboxClassNames,
       "data-anv": "combobox",
       style: { ...style, ...layoutStyles },
@@ -2656,4 +2703,4 @@ function useInfiniteCombobox({
 }
 
 export { Combobox as C, ComboboxElement as a, ComboboxSelect as b, ComboboxList as c, useInfiniteCombobox as u };
-//# sourceMappingURL=useInfiniteCombobox-COJTJxCZ.js.map
+//# sourceMappingURL=useInfiniteCombobox-V94SoOiU.js.map