@servicetitan/anvil2 3.8.0 → 3.9.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-COJTJxCZ.js}

@@ -1,17 +1,17 @@
 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-1Cc6EUBw.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 { 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 +22,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 +55,7 @@ const styles = {
 	scrolled: scrolled
 };
 
-const ComboboxEmptyElement = function({
-  children
-}) {
+const ComboboxEmptyElement = ({ children }) => {
   const { items, setHasEmpty } = useCombobox();
   useEffect(() => {
     setHasEmpty?.(true);
@@ -67,11 +65,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 +104,7 @@ function useGroups({
   return { groups, orderedItems };
 }
 
-const SelectSingle = function(props) {
+const SelectSingle = (props) => {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const {
     className,
@@ -220,6 +214,11 @@ const SelectSingle = function(props) {
   useEffect(() => {
     setIsReadOnly(readOnly);
   }, [readOnly]);
+  useEffect(() => {
+    if (disabled || readOnly) {
+      closeMenu();
+    }
+  }, [disabled, readOnly, closeMenu]);
   return /* @__PURE__ */ jsx(
     ComboboxContext.Provider,
     {
@@ -289,7 +288,7 @@ const SelectSingle = function(props) {
     }
   );
 };
-const SelectMultiple = function(props) {
+const SelectMultiple = (props) => {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const {
     className,
@@ -486,6 +485,11 @@ const SelectMultiple = function(props) {
   useEffect(() => {
     setIsReadOnly(readOnly);
   }, [readOnly]);
+  useEffect(() => {
+    if (disabled || readOnly) {
+      closeMenu();
+    }
+  }, [disabled, readOnly, closeMenu]);
   return /* @__PURE__ */ jsx(
     ComboboxContext.Provider,
     {
@@ -561,7 +565,7 @@ const SelectMultiple = function(props) {
     }
   );
 };
-const ComboboxSelect = function(props) {
+const ComboboxSelect = (props) => {
   if (isMultiple(props)) {
     return /* @__PURE__ */ jsx(SelectMultiple, { ...props });
   } else {
@@ -629,7 +633,7 @@ const ComboboxItemVisual = forwardRef(
 );
 ComboboxItemVisual.displayName = "ComboboxItemVisual";
 
-const ComboboxSelectAll = function({ className }) {
+const ComboboxSelectAll = ({ className }) => {
   const {
     getItemProps,
     setForceCloseOnSelectItems,
@@ -675,10 +679,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 +767,12 @@ const ComboboxGroupList = function({
 
 const ComboboxGroupProvider = ComboboxGroupContext.Provider;
 
-const ComboboxContentElement = function({
+const ComboboxContentElement = ({
   children,
   className,
   disablePopover = false,
   ...rest
-}) {
+}) => {
   const {
     items,
     itemToKey,
@@ -899,24 +903,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",
@@ -1096,16 +1098,14 @@ const ComboboxTrigger = function(props) {
     }
   );
 };
-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 +1136,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 +1172,7 @@ const ComboboxSelectTrigger = function({
   );
 };
 
-const CoreComboboxItemElement = function({
+const CoreComboboxItemElement = ({
   children,
   disabled: disabledProp,
   item,
@@ -1192,7 +1190,7 @@ const CoreComboboxItemElement = function({
   rowGap,
   columnGap,
   ...rest
-}) {
+}) => {
   const {
     itemToKey,
     getItemProps,
@@ -1344,10 +1342,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 +1354,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 +1380,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 +1393,10 @@ const ComboboxItemAddNew = function(props) {
   return /* @__PURE__ */ jsx(ComboboxItemAddNewElement, { "data-tracking-id": trackingId, ...props });
 };
 
-const ComboboxListElement = function({
+const ComboboxListElement = ({
   children,
   ...rest
-}) {
+}) => {
   const {
     getMenuProps,
     multiple,
@@ -1481,16 +1475,14 @@ const ComboboxListElement = function({
     ] });
   }
 };
-const ComboboxList = function({
+const ComboboxList = ({
   children,
   className,
   ...rest
-}) {
-  return /* @__PURE__ */ jsx(ComboboxListElement, { className, ...rest, children });
-};
+}) => /* @__PURE__ */ jsx(ComboboxListElement, { className, ...rest, children });
 
 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,
@@ -1688,6 +1680,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);
@@ -1837,7 +1834,7 @@ const ComboboxSingle = function(props) {
     }
   ) });
 };
-const ComboboxMultiple = function(props) {
+const ComboboxMultiple = (props) => {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const {
     className,
@@ -1891,7 +1888,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);
@@ -2145,6 +2142,11 @@ const ComboboxMultiple = function(props) {
   useEffect(() => {
     setIsReadOnly(readOnly);
   }, [readOnly]);
+  useEffect(() => {
+    if (disabled || readOnly) {
+      closeMenu();
+    }
+  }, [disabled, readOnly, closeMenu]);
   useEffect(() => {
     if (firstRenderRef.current) return;
     setTimeout(() => {
@@ -2654,4 +2656,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-COJTJxCZ.js.map