@servicetitan/anvil2 3.8.0 → 3.10.0

package/dist/useFocusWithin-hi77jsrB.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusWithin-hi77jsrB.js","sources":["../src/internal/hooks/useFocusWithin/useFocusWithin.ts"],"sourcesContent":["import { FocusEventHandler, useRef } from \"react\";\nexport interface UseFocusWithinOptions {\n  onFocus?: (event: React.FocusEvent) => void;\n  onBlur?: (event: React.FocusEvent) => void;\n  otherRelatedElements?: HTMLElement[];\n}\n\nexport interface UseFocusWithinReturnValue<\n  T extends HTMLElement = HTMLElement,\n> {\n  props: {\n    onFocus: FocusEventHandler<T>;\n    onBlur: FocusEventHandler<T>;\n  };\n}\n\n/**\n * Custom hook for tracking focus state within a DOM element.\n *\n * @param options Configuration options for the hook\n * @param options.onFocus Optional callback when focus enters the element\n * @param options.onBlur Optional callback when focus leaves the element\n * @returns Object containing props for the element\n *\n * @example\n * const { props } = useFocusWithin({\n *   onFocus: () => console.log('Focus entered'),\n *   onBlur: () => console.log('Focus left')\n * });\n *\n * return <div {...props}>Content</div>;\n */\nexport function useFocusWithin<T extends HTMLElement>({\n  onBlur,\n  onFocus,\n  otherRelatedElements,\n}: UseFocusWithinOptions = {}): UseFocusWithinReturnValue<T> {\n  const isFocusedRef = useRef(false);\n\n  const handleFocus: FocusEventHandler<T> = (event) => {\n    if (!isFocusedRef.current) {\n      isFocusedRef.current = true;\n      onFocus?.(event);\n    }\n  };\n\n  const handleBlur: FocusEventHandler<T> = (event) => {\n    if (\n      isFocusedRef.current &&\n      !containsRelatedTarget(event) &&\n      !otherRelatedElements?.some((element) =>\n        element.contains(event.relatedTarget),\n      )\n    ) {\n      isFocusedRef.current = false;\n      onBlur?.(event);\n    }\n  };\n\n  return {\n    props: { onFocus: handleFocus, onBlur: handleBlur },\n  };\n}\n\nfunction containsRelatedTarget(event: React.FocusEvent) {\n  if (\n    event.currentTarget instanceof HTMLElement &&\n    event.relatedTarget instanceof HTMLElement\n  ) {\n    return event.currentTarget.contains(event.relatedTarget);\n  }\n\n  return false;\n}\n"],"names":[],"mappings":";;AAgCO,SAAS,cAAA,CAAsC;AAAA,EACpD,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,GAA2B,EAAC,EAAiC;AAC3D,EAAA,MAAM,YAAA,GAAe,OAAO,KAAK,CAAA;AAEjC,EAAA,MAAM,WAAA,GAAoC,CAAC,KAAA,KAAU;AACnD,IAAA,IAAI,CAAC,aAAa,OAAA,EAAS;AACzB,MAAA,YAAA,CAAa,OAAA,GAAU,IAAA;AACvB,MAAA,OAAA,GAAU,KAAK,CAAA;AAAA,IACjB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,UAAA,GAAmC,CAAC,KAAA,KAAU;AAClD,IAAA,IACE,aAAa,OAAA,IACb,CAAC,sBAAsB,KAAK,CAAA,IAC5B,CAAC,oBAAA,EAAsB,IAAA;AAAA,MAAK,CAAC,OAAA,KAC3B,OAAA,CAAQ,QAAA,CAAS,MAAM,aAAa;AAAA,KACtC,EACA;AACA,MAAA,YAAA,CAAa,OAAA,GAAU,KAAA;AACvB,MAAA,MAAA,GAAS,KAAK,CAAA;AAAA,IAChB;AAAA,EACF,CAAA;AAEA,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,EAAE,OAAA,EAAS,WAAA,EAAa,QAAQ,UAAA;AAAW,GACpD;AACF;AAEA,SAAS,sBAAsB,KAAA,EAAyB;AACtD,EAAA,IACE,KAAA,CAAM,aAAA,YAAyB,WAAA,IAC/B,KAAA,CAAM,yBAAyB,WAAA,EAC/B;AACA,IAAA,OAAO,KAAA,CAAM,aAAA,CAAc,QAAA,CAAS,KAAA,CAAM,aAAa,CAAA;AAAA,EACzD;AAEA,EAAA,OAAO,KAAA;AACT;;;;"}
+{"version":3,"file":"useFocusWithin-hi77jsrB.js","sources":["../src/internal/hooks/useFocusWithin/useFocusWithin.ts"],"sourcesContent":["import { type FocusEventHandler, useRef } from \"react\";\nexport interface UseFocusWithinOptions {\n  onFocus?: (event: React.FocusEvent) => void;\n  onBlur?: (event: React.FocusEvent) => void;\n  otherRelatedElements?: HTMLElement[];\n}\n\nexport interface UseFocusWithinReturnValue<\n  T extends HTMLElement = HTMLElement,\n> {\n  props: {\n    onFocus: FocusEventHandler<T>;\n    onBlur: FocusEventHandler<T>;\n  };\n}\n\n/**\n * Custom hook for tracking focus state within a DOM element.\n *\n * @param options Configuration options for the hook\n * @param options.onFocus Optional callback when focus enters the element\n * @param options.onBlur Optional callback when focus leaves the element\n * @returns Object containing props for the element\n *\n * @example\n * const { props } = useFocusWithin({\n *   onFocus: () => console.log('Focus entered'),\n *   onBlur: () => console.log('Focus left')\n * });\n *\n * return <div {...props}>Content</div>;\n */\nexport function useFocusWithin<T extends HTMLElement>({\n  onBlur,\n  onFocus,\n  otherRelatedElements,\n}: UseFocusWithinOptions = {}): UseFocusWithinReturnValue<T> {\n  const isFocusedRef = useRef(false);\n\n  const handleFocus: FocusEventHandler<T> = (event) => {\n    if (!isFocusedRef.current) {\n      isFocusedRef.current = true;\n      onFocus?.(event);\n    }\n  };\n\n  const handleBlur: FocusEventHandler<T> = (event) => {\n    if (\n      isFocusedRef.current &&\n      !containsRelatedTarget(event) &&\n      !otherRelatedElements?.some((element) =>\n        element.contains(event.relatedTarget),\n      )\n    ) {\n      isFocusedRef.current = false;\n      onBlur?.(event);\n    }\n  };\n\n  return {\n    props: { onFocus: handleFocus, onBlur: handleBlur },\n  };\n}\n\nfunction containsRelatedTarget(event: React.FocusEvent) {\n  if (\n    event.currentTarget instanceof HTMLElement &&\n    event.relatedTarget instanceof HTMLElement\n  ) {\n    return event.currentTarget.contains(event.relatedTarget);\n  }\n\n  return false;\n}\n"],"names":[],"mappings":";;AAgCO,SAAS,cAAA,CAAsC;AAAA,EACpD,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,GAA2B,EAAC,EAAiC;AAC3D,EAAA,MAAM,YAAA,GAAe,OAAO,KAAK,CAAA;AAEjC,EAAA,MAAM,WAAA,GAAoC,CAAC,KAAA,KAAU;AACnD,IAAA,IAAI,CAAC,aAAa,OAAA,EAAS;AACzB,MAAA,YAAA,CAAa,OAAA,GAAU,IAAA;AACvB,MAAA,OAAA,GAAU,KAAK,CAAA;AAAA,IACjB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,UAAA,GAAmC,CAAC,KAAA,KAAU;AAClD,IAAA,IACE,aAAa,OAAA,IACb,CAAC,sBAAsB,KAAK,CAAA,IAC5B,CAAC,oBAAA,EAAsB,IAAA;AAAA,MAAK,CAAC,OAAA,KAC3B,OAAA,CAAQ,QAAA,CAAS,MAAM,aAAa;AAAA,KACtC,EACA;AACA,MAAA,YAAA,CAAa,OAAA,GAAU,KAAA;AACvB,MAAA,MAAA,GAAS,KAAK,CAAA;AAAA,IAChB;AAAA,EACF,CAAA;AAEA,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,EAAE,OAAA,EAAS,WAAA,EAAa,QAAQ,UAAA;AAAW,GACpD;AACF;AAEA,SAAS,sBAAsB,KAAA,EAAyB;AACtD,EAAA,IACE,KAAA,CAAM,aAAA,YAAyB,WAAA,IAC/B,KAAA,CAAM,yBAAyB,WAAA,EAC/B;AACA,IAAA,OAAO,KAAA,CAAM,aAAA,CAAc,QAAA,CAAS,KAAA,CAAM,aAAa,CAAA;AAAA,EACzD;AAEA,EAAA,OAAO,KAAA;AACT;;;;"}

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

@@ -1,17 +1,18 @@
 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-CdRuNv3C.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-lYieONTb.js';
+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-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-mDcQHC2U.js';
+import { T as Text } from './Text-CIoD_RK4.js';
 import { D as Divider } from './Divider-C7fp5Xb6.js';
-import { F as Flex } from './Flex-Bb3iHExM.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';
-import { I as Icon } from './Icon-B4uCvMU9.js';
+import { I as Icon } from './Icon-B5zwN7GD.js';
 import { c as checkboxStyles } from './Checkbox.module-CURNX27M.js';
 import { S as SvgCheckBox, a as SvgCheckBoxOutlineBlank } from './check_box-0U1tbEAd.js';
 import { A as Avatar } from './Avatar-DX96Mxe7.js';
@@ -22,7 +23,7 @@ import { m as matchSorter } from './match-sorter.esm-CGAauEiU.js';
 import { w as warnOnce } from './warnOnce-Y9PRHcU4.js';
 
 import './useInfiniteCombobox.css';const ComboboxContext = createContext(null);
-const useCombobox = function() {
+const useCombobox = () => {
   const context = useContext(
     ComboboxContext
   );
@@ -55,9 +56,7 @@ const styles = {
 	scrolled: scrolled
 };
 
-const ComboboxEmptyElement = function({
-  children
-}) {
+const ComboboxEmptyElement = ({ children }) => {
   const { items, setHasEmpty } = useCombobox();
   useEffect(() => {
     setHasEmpty?.(true);
@@ -67,11 +66,7 @@ const ComboboxEmptyElement = function({
   });
   return !items.length ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children }) : null;
 };
-const ComboboxEmpty = function({
-  children
-}) {
-  return /* @__PURE__ */ jsx(ComboboxEmptyElement, { children });
-};
+const ComboboxEmpty = ({ children }) => /* @__PURE__ */ jsx(ComboboxEmptyElement, { children });
 
 function useGroups({
   items,
@@ -110,7 +105,16 @@ function useGroups({
   return { groups, orderedItems };
 }
 
-const SelectSingle = function(props) {
+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 {
     className,
@@ -136,6 +140,7 @@ const SelectSingle = function(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);
@@ -172,7 +177,7 @@ const SelectSingle = function(props) {
     inputValue,
     closeMenu
   } = useSelect({
-    ...rest,
+    ...restWithoutData,
     items: orderedItems,
     itemToString,
     itemToKey,
@@ -264,6 +269,7 @@ const SelectSingle = function(props) {
       children: /* @__PURE__ */ jsx(
         "div",
         {
+          ...dataAttributes,
           className: ComboboxClassNames,
           "data-anv": "combobox",
           style: { ...style, ...layoutStyles },
@@ -289,7 +295,7 @@ const SelectSingle = function(props) {
     }
   );
 };
-const SelectMultiple = function(props) {
+const SelectMultiple = (props) => {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const {
     className,
@@ -324,6 +330,7 @@ const SelectMultiple = function(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);
@@ -400,7 +407,7 @@ const SelectMultiple = function(props) {
     inputValue,
     closeMenu
   } = useSelect({
-    ...rest,
+    ...restWithoutData,
     items: orderedItems,
     itemToString,
     itemToKey,
@@ -536,6 +543,7 @@ const SelectMultiple = function(props) {
       children: /* @__PURE__ */ jsx(
         "div",
         {
+          ...dataAttributes,
           className: ComboboxClassNames,
           "data-anv": "combobox",
           style: { ...style, ...layoutStyles },
@@ -561,7 +569,7 @@ const SelectMultiple = function(props) {
     }
   );
 };
-const ComboboxSelect = function(props) {
+const ComboboxSelect = (props) => {
   if (isMultiple(props)) {
     return /* @__PURE__ */ jsx(SelectMultiple, { ...props });
   } else {
@@ -629,7 +637,7 @@ const ComboboxItemVisual = forwardRef(
 );
 ComboboxItemVisual.displayName = "ComboboxItemVisual";
 
-const ComboboxSelectAll = function({ className }) {
+const ComboboxSelectAll = ({ className }) => {
   const {
     getItemProps,
     setForceCloseOnSelectItems,
@@ -675,10 +683,10 @@ const ComboboxSelectAll = function({ className }) {
 const ComboboxGroupContext = createContext(null);
 const useComboboxGroupContext = () => useContext(ComboboxGroupContext);
 
-const ComboboxGroupList = function({
+const ComboboxGroupList = ({
   children,
   ...rest
-}) {
+}) => {
   const {
     getMenuProps,
     multiple,
@@ -763,12 +771,23 @@ const ComboboxGroupList = function({
 
 const ComboboxGroupProvider = ComboboxGroupContext.Provider;
 
-const ComboboxContentElement = function({
+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,
   disablePopover = false,
   ...rest
-}) {
+}) => {
   const {
     items,
     itemToKey,
@@ -868,6 +887,7 @@ const ComboboxContentElement = function({
     {
       "data-anv": "combobox-content",
       ...rest,
+      ...{ [ANV_PART_ATTR]: PARTS.popover },
       className: popoverContentClassNames,
       ref: getMenuProps({ ref: contentRef }, { suppressRefError: true }).ref,
       tabIndex: -1,
@@ -899,24 +919,22 @@ const ComboboxContentElement = function({
     }
   );
 };
-const ComboboxContent = function({
+const ComboboxContent = ({
   children,
   className,
   disablePopover = false,
   ...rest
-}) {
-  return /* @__PURE__ */ jsx(
-    ComboboxContentElement,
-    {
-      className,
-      disablePopover,
-      ...rest,
-      children
-    }
-  );
-};
+}) => /* @__PURE__ */ jsx(
+  ComboboxContentElement,
+  {
+    className,
+    disablePopover,
+    ...rest,
+    children
+  }
+);
 
-const ComboboxTrigger = function(props) {
+const ComboboxTrigger = (props) => {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const {
     // variant: variantProp = "combobox",
@@ -999,7 +1017,10 @@ const ComboboxTrigger = function(props) {
       ref: context?.invoker.ref
     }
   };
-  const toggleButtonProps = select ? {} : getToggleButtonProps();
+  const toggleButtonProps = select ? {} : {
+    ...getToggleButtonProps(),
+    [ANV_PART_ATTR]: PARTS.toggleButton
+  };
   const handleClearButtonClick = (_e) => {
     if (onClear) {
       onClear();
@@ -1034,6 +1055,7 @@ const ComboboxTrigger = function(props) {
       labelProps,
       inputWrapperProps,
       toggleButtonProps,
+      clearButtonProps: { [ANV_PART_ATTR]: PARTS.clearButton },
       itemToString,
       removeSelectedItem,
       variant: select ? "select" : "combobox",
@@ -1053,9 +1075,12 @@ const ComboboxTrigger = function(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({
@@ -1066,7 +1091,8 @@ const ComboboxTrigger = function(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,
@@ -1091,21 +1117,20 @@ const ComboboxTrigger = function(props) {
           autoComplete: "off",
           id,
           ref: inputRef
-        }) : {}
+        }) : {},
+        [ANV_PART_ATTR]: PARTS.input
       }
     }
   );
 };
-const ComboboxSearchFieldElement = function({
+const ComboboxSearchFieldElement = ({
   onClear,
   ...props
-}) {
-  return /* @__PURE__ */ jsx(ComboboxTrigger, { onClear, ...props, variant: "combobox" });
-};
-const ComboboxSearchField = function({
+}) => /* @__PURE__ */ jsx(ComboboxTrigger, { onClear, ...props, variant: "combobox" });
+const ComboboxSearchField = ({
   prefix: prefixProp,
   ...props
-}) {
+}) => {
   const data = {
     label: childrenToString(props.label),
     size: props.size,
@@ -1136,13 +1161,11 @@ const ComboboxSearchField = function({
     }
   );
 };
-const ComboboxSelectTriggerElement = function(props) {
-  return /* @__PURE__ */ jsx(ComboboxTrigger, { ...props, variant: "select" });
-};
-const ComboboxSelectTrigger = function({
+const ComboboxSelectTriggerElement = (props) => /* @__PURE__ */ jsx(ComboboxTrigger, { ...props, variant: "select" });
+const ComboboxSelectTrigger = ({
   prefix: prefixProp,
   ...props
-}) {
+}) => {
   const data = {
     label: childrenToString(props.label),
     size: props.size,
@@ -1174,7 +1197,10 @@ const ComboboxSelectTrigger = function({
   );
 };
 
-const CoreComboboxItemElement = function({
+function optionDataId(key) {
+  return typeof key === "string" || typeof key === "number" ? { "data-id": String(key) } : {};
+}
+const CoreComboboxItemElement = ({
   children,
   disabled: disabledProp,
   item,
@@ -1192,7 +1218,7 @@ const CoreComboboxItemElement = function({
   rowGap,
   columnGap,
   ...rest
-}) {
+}) => {
   const {
     itemToKey,
     getItemProps,
@@ -1294,7 +1320,9 @@ const CoreComboboxItemElement = function({
           item,
           index,
           "aria-selected": highlightedIndex === index,
-          ...rest
+          ...rest,
+          [ANV_PART_ATTR]: PARTS.option,
+          ...optionDataId(itemToKey(item))
         }),
         disabled,
         checked,
@@ -1311,7 +1339,9 @@ const CoreComboboxItemElement = function({
           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),
@@ -1344,10 +1374,8 @@ const CoreComboboxItemElement = function({
     );
   }
 };
-const ComboboxItemElement = function(props) {
-  return /* @__PURE__ */ jsx(CoreComboboxItemElement, { ...props });
-};
-const ComboboxItem = function(props) {
+const ComboboxItemElement = (props) => /* @__PURE__ */ jsx(CoreComboboxItemElement, { ...props });
+const ComboboxItem = (props) => {
   const data = {
     item: props.item
   };
@@ -1358,10 +1386,10 @@ const ComboboxItem = function(props) {
   });
   return /* @__PURE__ */ jsx(ComboboxItemElement, { "data-tracking-id": trackingId, ...props });
 };
-const CoreComboboxItemAddNewElement = function({
+const CoreComboboxItemAddNewElement = ({
   onSelection,
   ...props
-}) {
+}) => {
   const { items, setHasAddNew, hasExactMatch, setOnSelectItemAddNew } = useCombobox();
   useEffect(() => {
     setHasAddNew?.(true);
@@ -1384,10 +1412,8 @@ const CoreComboboxItemAddNewElement = function({
     }
   ) : null;
 };
-const ComboboxItemAddNewElement = function(props) {
-  return /* @__PURE__ */ jsx(CoreComboboxItemAddNewElement, { ...props });
-};
-const ComboboxItemAddNew = function(props) {
+const ComboboxItemAddNewElement = (props) => /* @__PURE__ */ jsx(CoreComboboxItemAddNewElement, { ...props });
+const ComboboxItemAddNew = (props) => {
   const data = {
     item: "add-new"
   };
@@ -1399,10 +1425,10 @@ const ComboboxItemAddNew = function(props) {
   return /* @__PURE__ */ jsx(ComboboxItemAddNewElement, { "data-tracking-id": trackingId, ...props });
 };
 
-const ComboboxListElement = function({
+const ComboboxListElement = ({
   children,
   ...rest
-}) {
+}) => {
   const {
     getMenuProps,
     multiple,
@@ -1447,6 +1473,7 @@ const ComboboxListElement = function({
           ...getMenuProps(rest),
           ref: listRef,
           "data-anv": "combobox-list",
+          ...{ [ANV_PART_ATTR]: PARTS.menu },
           className: cx(styles["listview"], styles$1["listview"], {
             [styles.scrolled]: isScrolled
           }),
@@ -1470,6 +1497,7 @@ const ComboboxListElement = function({
           ...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,16 +1509,23 @@ const ComboboxListElement = function({
     ] });
   }
 };
-const ComboboxList = function({
+const ComboboxList = ({
   children,
   className,
   ...rest
-}) {
-  return /* @__PURE__ */ jsx(ComboboxListElement, { className, ...rest, children });
-};
+}) => /* @__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 = function(props) {
+const ComboboxSingle = (props) => {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const {
     className,
@@ -1518,6 +1553,7 @@ const ComboboxSingle = function(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);
@@ -1571,7 +1607,7 @@ const ComboboxSingle = function(props) {
     inputValue,
     closeMenu
   } = useCombobox$1({
-    ...rest,
+    ...restWithoutData,
     items: combinedItems,
     itemToString,
     itemToKey,
@@ -1688,6 +1724,11 @@ const ComboboxSingle = function(props) {
   useEffect(() => {
     setIsReadOnly(readOnly);
   }, [readOnly]);
+  useEffect(() => {
+    if (disabled || readOnly) {
+      closeMenu();
+    }
+  }, [disabled, readOnly, closeMenu]);
   useEffect(() => {
     if (firstRenderRef.current) return;
     const inputValueMatchesSelectedItem = selectedItem != null && inputValue === itemToString(selectedItem);
@@ -1814,6 +1855,7 @@ const ComboboxSingle = function(props) {
   return /* @__PURE__ */ jsx(ComboboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
     {
+      ...dataAttributes,
       className: ComboboxClassNames,
       "data-anv": "combobox",
       style: { ...style, ...layoutStyles },
@@ -1837,7 +1879,7 @@ const ComboboxSingle = function(props) {
     }
   ) });
 };
-const ComboboxMultiple = function(props) {
+const ComboboxMultiple = (props) => {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const {
     className,
@@ -1876,6 +1918,7 @@ const ComboboxMultiple = function(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);
@@ -1891,7 +1934,7 @@ const ComboboxMultiple = function(props) {
   ] = useState([]);
   const [isReadOnly, setIsReadOnly] = useState(readOnly);
   const [isDisabled, setIsDisabled] = useState(disabled);
-  let storedSetInputValue = void 0;
+  let storedSetInputValue;
   const referenceRef = useRef(null);
   const contentRef = useRef(null);
   const listRef = useRef(null);
@@ -1986,7 +2029,7 @@ const ComboboxMultiple = function(props) {
     inputValue,
     closeMenu
   } = useCombobox$1({
-    ...rest,
+    ...restWithoutData,
     items: combinedItems,
     itemToString,
     itemToKey,
@@ -2145,6 +2188,11 @@ const ComboboxMultiple = function(props) {
   useEffect(() => {
     setIsReadOnly(readOnly);
   }, [readOnly]);
+  useEffect(() => {
+    if (disabled || readOnly) {
+      closeMenu();
+    }
+  }, [disabled, readOnly, closeMenu]);
   useEffect(() => {
     if (firstRenderRef.current) return;
     setTimeout(() => {
@@ -2269,6 +2317,7 @@ const ComboboxMultiple = function(props) {
   return /* @__PURE__ */ jsx(ComboboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
     {
+      ...dataAttributes,
       className: ComboboxClassNames,
       "data-anv": "combobox",
       style: { ...style, ...layoutStyles },
@@ -2654,4 +2703,4 @@ function useInfiniteCombobox({
 }
 
 export { Combobox as C, ComboboxElement as a, ComboboxSelect as b, ComboboxList as c, useInfiniteCombobox as u };
-//# sourceMappingURL=useInfiniteCombobox-C78WQZx4.js.map
+//# sourceMappingURL=useInfiniteCombobox-V94SoOiU.js.map