@servicetitan/anvil2 1.46.10 → 1.47.0

package/dist/providers/AnvilProvider/AnvilProvider.d.ts

@@ -1,33 +1,2 @@
-import { ThemeProviderProps } from '../ThemeProvider';
-import { ComponentPropsWithoutRef, Dispatch, ReactNode, SetStateAction } from 'react';
-import { LayoutUtilProps } from '../../types';
-import { ITranslations } from '../LocalizationProvider/LocalizationProvider';
-import { BreakpointReturnProps } from '../../hooks/useBreakpoint';
-export type AnvilProviderProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps & {
-    children?: ReactNode;
-    themeData?: {
-        theme?: ThemeProviderProps["theme"];
-        mode?: ThemeProviderProps["mode"];
-    };
-    localizationData?: {
-        locale?: ITranslations["locale"];
-        dir?: ITranslations["dir"];
-        translations?: ITranslations["translations"];
-    };
-} & {
-    trackingIdData?: {
-        scope?: string;
-        optOut?: boolean;
-    };
-};
-export type AnvilProviderContextProps = {
-    breakpoint?: BreakpointReturnProps;
-};
-export declare const AnvilProviderContext: import('react').Context<AnvilProviderContextProps>;
-export declare const TooltipLegacyGroupContext: import('react').Context<{
-    disableDelayGroup: Dispatch<SetStateAction<boolean>>;
-} | null>;
-export declare const useTooltipLegacyGroup: () => {
-    disableDelayGroup: Dispatch<SetStateAction<boolean>>;
-};
+import { AnvilProviderProps } from './AnvilProviderContext';
 export declare const AnvilProvider: (props: AnvilProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/providers/AnvilProvider/AnvilProviderContext.d.ts

@@ -0,0 +1,32 @@
+import { ThemeProviderProps } from '../ThemeProvider';
+import { ComponentPropsWithoutRef, Dispatch, ReactNode, SetStateAction } from 'react';
+import { LayoutUtilProps } from '../../types';
+import { ITranslations } from '../LocalizationProvider/LocalizationProvider';
+import { BreakpointReturnProps } from '../../hooks/useBreakpoint';
+export type AnvilProviderProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps & {
+    children?: ReactNode;
+    themeData?: {
+        theme?: ThemeProviderProps["theme"];
+        mode?: ThemeProviderProps["mode"];
+    };
+    localizationData?: {
+        locale?: ITranslations["locale"];
+        dir?: ITranslations["dir"];
+        translations?: ITranslations["translations"];
+    };
+} & {
+    trackingIdData?: {
+        scope?: string;
+        optOut?: boolean;
+    };
+};
+export type AnvilProviderContextProps = {
+    breakpoint?: BreakpointReturnProps;
+};
+export declare const AnvilProviderContext: import('react').Context<AnvilProviderContextProps>;
+export declare const TooltipLegacyGroupContext: import('react').Context<{
+    disableDelayGroup: Dispatch<SetStateAction<boolean>>;
+} | null>;
+export declare const useTooltipLegacyGroup: () => {
+    disableDelayGroup: Dispatch<SetStateAction<boolean>>;
+};

package/dist/providers/AnvilProvider/index.d.ts

@@ -1 +1,2 @@
-export { AnvilProvider, AnvilProviderContext, AnvilProvider as default, type AnvilProviderProps, type AnvilProviderContextProps, } from './AnvilProvider';
+export { AnvilProvider, AnvilProvider as default } from './AnvilProvider';
+export { AnvilProviderContext, type AnvilProviderContextProps, type AnvilProviderProps, } from './AnvilProviderContext';

package/dist/providers/PortalProvider/PortalProvider.d.ts

@@ -1,10 +1,2 @@
-import { ReactNode } from 'react';
-export type PortalProviderContextProps = {
-    root?: HTMLElement | React.MutableRefObject<HTMLElement | null> | null;
-};
-export declare const PortalProviderContext: import('react').Context<PortalProviderContextProps>;
-export type PortalProviderProps = {
-    root?: HTMLElement | React.MutableRefObject<HTMLElement | null> | null;
-    children?: ReactNode;
-};
+import { PortalProviderProps } from './PortalProviderContext';
 export declare const PortalProvider: (props: PortalProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/providers/PortalProvider/PortalProviderContext.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type PortalProviderProps = {
+    root?: HTMLElement | React.MutableRefObject<HTMLElement | null> | null;
+    children?: ReactNode;
+};
+export type PortalProviderContextProps = {
+    root?: HTMLElement | React.MutableRefObject<HTMLElement | null> | null;
+};
+export declare const PortalProviderContext: import('react').Context<PortalProviderContextProps>;

package/dist/providers/PortalProvider/index.d.ts

@@ -1 +1,2 @@
-export { type PortalProviderContextProps, PortalProviderContext, type PortalProviderProps, PortalProvider, } from './PortalProvider';
+export { PortalProvider } from './PortalProvider';
+export { type PortalProviderProps, type PortalProviderContextProps, PortalProviderContext, } from './PortalProviderContext';

package/dist/providers/TrackingProvider/TrackingProvider.d.ts

@@ -1,13 +1,3 @@
-import { ReactNode, FC } from 'react';
-export interface TrackingProviderContextProps {
-    scope: string;
-    getTrackingId: (data: string, component: string) => Promise<string>;
-    optOut: boolean;
-}
-export interface TrackingProviderProps {
-    children: ReactNode;
-    scope: string;
-    optOut?: boolean;
-}
-export declare const TrackingContext: import('react').Context<TrackingProviderContextProps>;
+import { FC } from 'react';
+import { TrackingProviderProps } from './TrackingProviderContext';
 export declare const TrackingProvider: FC<TrackingProviderProps>;

package/dist/providers/TrackingProvider/TrackingProviderContext.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export declare const getTrackingIdHelper: (data: string, component: string, scope: string) => Promise<string>;
+export interface TrackingProviderContextProps {
+    scope: string;
+    getTrackingId: (data: string, component: string) => Promise<string>;
+    optOut: boolean;
+}
+export interface TrackingProviderProps {
+    children: ReactNode;
+    scope: string;
+    optOut?: boolean;
+}
+export declare const TrackingContext: import('react').Context<TrackingProviderContextProps>;

package/dist/providers/TrackingProvider/index.d.ts

@@ -1,2 +1,3 @@
-export { TrackingProvider, TrackingProvider as default, type TrackingProviderProps, type TrackingProviderContextProps, } from './TrackingProvider';
+export { TrackingProvider, TrackingProvider as default, } from './TrackingProvider';
+export { type TrackingProviderProps, type TrackingProviderContextProps, } from './TrackingProviderContext';
 export { useTrackingContext } from './useTrackingContext';

package/dist/providers/TrackingProvider/useTrackingContext.d.ts

@@ -1 +1 @@
-export declare const useTrackingContext: () => import('./TrackingProvider').TrackingProviderContextProps;
+export declare const useTrackingContext: () => import('./TrackingProviderContext').TrackingProviderContextProps;

package/dist/token.js

@@ -1,4 +1,4 @@
-import { p as primitive } from './primitive-BoyEHaOo.js';
+import { p as primitive } from './primitive-BByug0kD.js';
 
 const BackgroundColor = {
   value: "#ffffff",

package/dist/types/props.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties, FC, SVGProps } from 'react';
 import { ButtonProps } from '../components';
+export type { FocusableElement } from 'tabbable';
 export type ButtonAppearance = "primary" | "secondary" | "ghost" | "danger" | "danger-secondary";
 export type OnCloseProps = {
     /**
@@ -63,4 +64,3 @@ export type SemanticColor = "primary" | "secondary" | "critical" | "warning";
 export type Size = "0" | "xsmall" | "small" | "medium" | "large" | "xlarge";
 export type Status = "info" | "success" | "warning" | "danger";
 export type Svg = FC<SVGProps<SVGSVGElement>>;
-export {};

package/dist/useBreakpoint-Pi4OnwVo.js

@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react';
+import { B as BreakpointXxl, a as BreakpointXl, b as BreakpointLg, c as BreakpointMd, d as BreakpointSm } from './primitive-BByug0kD.js';
+
+const breakpoints = {
+  sm: parseInt(BreakpointSm.value),
+  md: parseInt(BreakpointMd.value),
+  lg: parseInt(BreakpointLg.value),
+  xl: parseInt(BreakpointXl.value),
+  xxl: parseInt(BreakpointXxl.value)
+};
+const areBreakpointsDefined = Object.values(breakpoints).every(
+  (breakpoint2) => breakpoint2
+);
+function breakpoint(name, min, max) {
+  if (globalThis.visualViewport == null) {
+    return void 0;
+  }
+  const { width: viewportWidth, height: viewportHeight } = globalThis.visualViewport;
+  if ((min == null || viewportWidth >= min) && (max == null || viewportHeight < max)) {
+    return {
+      name,
+      min,
+      max,
+      orientation: viewportHeight > viewportWidth ? "portrait" : "landscape",
+      innerWidth: viewportWidth,
+      innerHeight: viewportHeight
+    };
+  }
+  return void 0;
+}
+const onResize = () => {
+  if (!areBreakpointsDefined) {
+    return;
+  }
+  const { sm, md, lg, xl, xxl } = breakpoints;
+  return breakpoint("xs", void 0, sm) ?? breakpoint("sm", sm, md) ?? breakpoint("md", md, lg) ?? breakpoint("lg", lg, xl) ?? breakpoint("xl", xl, xxl) ?? breakpoint("xxl", xxl, void 0);
+};
+const useBreakpoint = (props) => {
+  const [size, setSize] = useState(onResize);
+  useEffect(() => {
+    if (!areBreakpointsDefined || props?.disable) return;
+    const updateSize = () => {
+      setSize(onResize());
+    };
+    globalThis.addEventListener("resize", updateSize);
+    return () => {
+      globalThis.removeEventListener("resize", updateSize);
+    };
+  }, [props?.disable]);
+  if (props?.disable) return;
+  return size;
+};
+
+export { useBreakpoint as u };
+//# sourceMappingURL=useBreakpoint-Pi4OnwVo.js.map

package/dist/useBreakpoint-Pi4OnwVo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint-Pi4OnwVo.js","sources":["../src/hooks/useBreakpoint/useBreakpoint.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { core } from \"@servicetitan/hammer-token\";\n\nconst breakpoints = {\n  sm: parseInt(core.primitive?.BreakpointSm.value),\n  md: parseInt(core.primitive?.BreakpointMd.value),\n  lg: parseInt(core.primitive?.BreakpointLg.value),\n  xl: parseInt(core.primitive?.BreakpointXl.value),\n  xxl: parseInt(core.primitive?.BreakpointXxl.value),\n};\n\nconst areBreakpointsDefined = Object.values(breakpoints).every(\n  (breakpoint) => breakpoint,\n);\n\n/**\n * Return type for the useBreakpoint hook\n */\nexport type BreakpointReturnProps = {\n  /**\n   * The breakpoint name\n   */\n  name: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n  /**\n   * Minimum width for this breakpoint\n   */\n  min: number | undefined;\n  /**\n   * Maximum width for this breakpoint\n   */\n  max: number | undefined;\n  /**\n   * Current device orientation\n   */\n  orientation: \"portrait\" | \"landscape\";\n  /**\n   * Current viewport width\n   */\n  innerWidth: number;\n  /**\n   * Current viewport height\n   */\n  innerHeight: number;\n};\n\n/**\n * Determines if the current viewport matches a specific breakpoint\n * @param name - The breakpoint name\n * @param min - Minimum width for this breakpoint\n * @param max - Maximum width for this breakpoint\n * @returns Breakpoint information if matched, undefined otherwise\n */\nfunction breakpoint(\n  name: BreakpointReturnProps[\"name\"],\n  min?: number,\n  max?: number,\n): BreakpointReturnProps | undefined {\n  if (globalThis.visualViewport == null) {\n    return undefined;\n  }\n\n  const { width: viewportWidth, height: viewportHeight } =\n    globalThis.visualViewport;\n\n  if (\n    (min == null || viewportWidth >= min) &&\n    (max == null || viewportHeight < max)\n  ) {\n    return {\n      name,\n      min,\n      max,\n      orientation: viewportHeight > viewportWidth ? \"portrait\" : \"landscape\",\n      innerWidth: viewportWidth,\n      innerHeight: viewportHeight,\n    } as const;\n  }\n\n  return undefined;\n}\n\n/**\n * Determines the current breakpoint based on viewport width and hammer-token breakpoint values.\n *\n * Features:\n * - Validates that all required hammer-token breakpoint values are available\n * - Uses cascade logic to determine the appropriate breakpoint\n * - Returns the first matching breakpoint in order of preference\n * - Handles edge cases where breakpoint values are missing\n * - Uses visualViewport API for accurate viewport measurements\n * - Supports all standard breakpoints (xs, sm, md, lg, xl, xxl)\n *\n * @returns Current breakpoint information or undefined if breakpoint values are unavailable\n */\nconst onResize = () => {\n  if (!areBreakpointsDefined) {\n    return;\n  }\n\n  const { sm, md, lg, xl, xxl } = breakpoints;\n\n  return (\n    breakpoint(\"xs\", undefined, sm) ??\n    breakpoint(\"sm\", sm, md) ??\n    breakpoint(\"md\", md, lg) ??\n    breakpoint(\"lg\", lg, xl) ??\n    breakpoint(\"xl\", xl, xxl) ??\n    breakpoint(\"xxl\", xxl, undefined)\n  );\n};\n\n/**\n * Custom hook for detecting current breakpoint and viewport information.\n *\n * Features:\n * - Detects current breakpoint based on viewport width\n * - Supports all standard breakpoints (xs, sm, md, lg, xl, xxl)\n * - Provides device orientation information\n * - Returns current viewport dimensions\n * - Uses hammer-token breakpoint values for consistency\n * - Listens for window resize events\n * - Supports optional disable functionality\n * - Uses visualViewport API for accurate measurements\n *\n * @param props - Optional configuration object\n * @param props.disable - Whether to disable the hook\n * @returns Current breakpoint information or undefined if disabled\n */\nexport const useBreakpoint = (props?: { disable?: boolean }) => {\n  const [size, setSize] = useState(onResize);\n\n  useEffect(() => {\n    if (!areBreakpointsDefined || props?.disable) return;\n\n    const updateSize = () => {\n      setSize(onResize());\n    };\n\n    globalThis.addEventListener(\"resize\", updateSize);\n\n    return () => {\n      globalThis.removeEventListener(\"resize\", updateSize);\n    };\n  }, [props?.disable]);\n\n  if (props?.disable) return;\n\n  return size;\n};\n"],"names":["core.primitive?.BreakpointSm","core.primitive?.BreakpointMd","core.primitive?.BreakpointLg","core.primitive?.BreakpointXl","core.primitive?.BreakpointXxl","breakpoint"],"mappings":";;;AAGA,MAAM,WAAA,GAAc;AAAA,EAClB,EAAA,EAAI,QAAA,CAASA,aAA6B,KAAK,CAAA;AAAA,EAC/C,EAAA,EAAI,QAAA,CAASC,aAA6B,KAAK,CAAA;AAAA,EAC/C,EAAA,EAAI,QAAA,CAASC,aAA6B,KAAK,CAAA;AAAA,EAC/C,EAAA,EAAI,QAAA,CAASC,aAA6B,KAAK,CAAA;AAAA,EAC/C,GAAA,EAAK,QAAA,CAASC,cAA8B,KAAK;AACnD,CAAA;AAEA,MAAM,qBAAA,GAAwB,MAAA,CAAO,MAAA,CAAO,WAAW,CAAA,CAAE,KAAA;AAAA,EACvD,CAACC,WAAAA,KAAeA;AAClB,CAAA;AAuCA,SAAS,UAAA,CACP,IAAA,EACA,GAAA,EACA,GAAA,EACmC;AACnC,EAAA,IAAI,UAAA,CAAW,kBAAkB,IAAA,EAAM;AACrC,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAE,KAAA,EAAO,aAAA,EAAe,MAAA,EAAQ,cAAA,KACpC,UAAA,CAAW,cAAA;AAEb,EAAA,IAAA,CACG,OAAO,IAAA,IAAQ,aAAA,IAAiB,SAChC,GAAA,IAAO,IAAA,IAAQ,iBAAiB,GAAA,CAAA,EACjC;AACA,IAAA,OAAO;AAAA,MACL,IAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACA,WAAA,EAAa,cAAA,GAAiB,aAAA,GAAgB,UAAA,GAAa,WAAA;AAAA,MAC3D,UAAA,EAAY,aAAA;AAAA,MACZ,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AAEA,EAAA,OAAO,MAAA;AACT;AAeA,MAAM,WAAW,MAAM;AACrB,EAAA,IAAI,CAAC,qBAAA,EAAuB;AAC1B,IAAA;AAAA,EACF;AAEA,EAAA,MAAM,EAAE,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,KAAI,GAAI,WAAA;AAEhC,EAAA,OACE,UAAA,CAAW,IAAA,EAAM,MAAA,EAAW,EAAE,CAAA,IAC9B,UAAA,CAAW,IAAA,EAAM,EAAA,EAAI,EAAE,CAAA,IACvB,UAAA,CAAW,IAAA,EAAM,EAAA,EAAI,EAAE,CAAA,IACvB,UAAA,CAAW,IAAA,EAAM,EAAA,EAAI,EAAE,CAAA,IACvB,UAAA,CAAW,IAAA,EAAM,EAAA,EAAI,GAAG,CAAA,IACxB,UAAA,CAAW,KAAA,EAAO,GAAA,EAAK,MAAS,CAAA;AAEpC,CAAA;AAmBO,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAkC;AAC9D,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,QAAQ,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,qBAAA,IAAyB,KAAA,EAAO,OAAA,EAAS;AAE9C,IAAA,MAAM,aAAa,MAAM;AACvB,MAAA,OAAA,CAAQ,UAAU,CAAA;AAAA,IACpB,CAAA;AAEA,IAAA,UAAA,CAAW,gBAAA,CAAiB,UAAU,UAAU,CAAA;AAEhD,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,mBAAA,CAAoB,UAAU,UAAU,CAAA;AAAA,IACrD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,OAAO,CAAC,CAAA;AAEnB,EAAA,IAAI,OAAO,OAAA,EAAS;AAEpB,EAAA,OAAO,IAAA;AACT;;;;"}

package/dist/useBreakpoint.js

@@ -1,2 +1,2 @@
-export { u as default, u as useBreakpoint } from './useBreakpoint-Cv5fnZxs.js';
+export { u as default, u as useBreakpoint } from './useBreakpoint-Pi4OnwVo.js';
 //# sourceMappingURL=useBreakpoint.js.map

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 = any>({\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,CAA4C;AAAA,EAC1D,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 { 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-WcRgC9p6.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInfiniteCombobox-WcRgC9p6.js","sources":["../src/components/Combobox/useInfiniteCombobox.ts"],"sourcesContent":["import {\n  useState,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useDeferredValue,\n  type UIEvent,\n  useCallback,\n} from \"react\";\nimport { UseInfiniteComboboxProps, type ComboboxProps } from \"./ComboboxTypes\";\n\nconst SCROLL_THRESHOLD = 0.64; // arbitrary number\n\n/**\n * Hook for implementing infinite scroll functionality in combobox components.\n *\n * Features:\n * - Automatic pagination with scroll-based loading\n * - Configurable query triggers (input change, selection change, scroll)\n * - Debounced query execution to prevent excessive API calls\n * - Automatic retry logic with exponential backoff\n * - Support for both single and multiple selection modes\n * - Customizable scroll threshold for triggering new queries\n * - Loading state management with deferred updates\n * - Automatic detection of pagination end\n * - Support for initial items or query-based initialization\n *\n * @param options Configuration options for the infinite combobox\n * @returns Object containing comboboxProps and contentProps for use with Combobox component\n *\n * @example\n * const { comboboxProps, contentProps } = useInfiniteCombobox({\n *   initialItems: [],\n *   initialPage: 0,\n *   initialLoading: true,\n *   query: async ({ page, inputValue, selectedItems }) => {\n *     return await fetchItems({\n *       page,\n *       pageSize: 25,\n *       searchTerm: inputValue,\n *       excludeIds: selectedItems.map(item => item.id),\n *     });\n *   },\n * });\n *\n * return (\n *   <Combobox {...comboboxProps}>\n *     <Combobox.SearchField label=\"Search items\" />\n *     <Combobox.Content {...contentProps}>\n *       {({ items }) => (\n *         <Combobox.List>\n *           {items.map((item, i) => (\n *             <Combobox.Item key={item.id} item={item} index={i}>\n *               {item.name}\n *             </Combobox.Item>\n *           ))}\n *         </Combobox.List>\n *       )}\n *     </Combobox.Content>\n *   </Combobox>\n * );\n */\nexport function useInfiniteCombobox<Item = any>({\n  query,\n  queryInitialItems,\n  initialItems = [],\n  initialPage = 0,\n  initialLoading = false,\n  initialInputValue,\n  defaultInputValue,\n  initialSelectedItem,\n  defaultSelectedItem,\n  initialSelectedItems,\n  defaultSelectedItems,\n  updateOnInputValueChange = true,\n  updateOnSelectedItemChange = true,\n  updateOnSelectedItemsChange = true,\n  queryOnFirstRender = false,\n  shouldTriggerQuery: shouldTriggerQueryProp,\n}: UseInfiniteComboboxProps<Item>) {\n  const [items, setItems] = useState(initialItems);\n  const deferredItems = useDeferredValue(items);\n  const [page, setPage] = useState(initialPage);\n  const [loading, setLoading] = useState(initialLoading);\n  const deferredLoading = useDeferredValue(loading);\n  const [inputValue, setInputValue] = useState(\n    initialInputValue ?? defaultInputValue ?? \"\",\n  );\n  const [selectedItem, setSelectedItem] = useState<Item | null>(\n    initialSelectedItem ?? defaultSelectedItem ?? null,\n  );\n  const [selectedItems, setSelectedItems] = useState<Item[]>(\n    initialSelectedItems ?? defaultSelectedItems ?? [],\n  );\n\n  const scrollerRef = useRef<HTMLDivElement>(null);\n\n  const defaultShouldTriggerQuery = (element: EventTarget & HTMLElement) => {\n    const totalScrollHeight = element.scrollHeight - element.clientHeight;\n    return element.scrollTop / totalScrollHeight > SCROLL_THRESHOLD;\n  };\n\n  // using both state and ref here since the state will be \"behind\" the ref\n  // if another query has been triggered while the current one is in flight\n  const [triggerQueryCount, setTriggerQueryCount] = useState(0);\n  const triggerQueryCountRef = useRef(0);\n  const triggerQuery = () => {\n    setTriggerQueryCount((x) => x + 1);\n    triggerQueryCountRef.current += 1;\n  };\n\n  const [done, setDone] = useState(false);\n\n  const firstRenderRef = useRef(true);\n  const scrollTimeoutRef = useRef(false);\n\n  // using a similar state/ref idea for managing loading as well, since we\n  // need to know immediately if queries are in flight, but state won't be\n  // updated in the onScroll handler fast enough\n  const loadingRef = useRef(false);\n  const setLoadingStateAndRef = (isLoading: boolean) => {\n    setLoading(isLoading);\n    loadingRef.current = isLoading;\n  };\n\n  const queryRetryCountRef = useRef(0);\n\n  useEffect(() => {\n    if (firstRenderRef.current && queryInitialItems) {\n      setItems(queryInitialItems());\n    }\n\n    // don't run on initial render unless we explicitly choose to\n    if (firstRenderRef.current && !queryOnFirstRender) {\n      firstRenderRef.current = false;\n      return;\n    }\n\n    setLoadingStateAndRef(true);\n\n    // using a short debounce delay to batch updates\n    const timeoutID = setTimeout(() => {\n      // if this query is outdated, don't call it\n      if (triggerQueryCount < triggerQueryCountRef.current) return;\n\n      query({\n        page,\n        inputValue,\n        selectedItem,\n        selectedItems,\n      })\n        .then((res) => {\n          queryRetryCountRef.current = 0;\n\n          // if this query is outdated, throw away it's results\n          if (triggerQueryCount < triggerQueryCountRef.current) return;\n\n          setLoadingStateAndRef(false);\n          setPage((x) => x + 1);\n\n          // if the result is nullish or empty\n          // assume we've reached the end of the pagination\n          if (res == null || (page > 0 && res.length === 0)) {\n            setDone(true);\n          } else if (page === 0) {\n            setItems(() => [...res]);\n          } else {\n            setItems((prevItems) => [...prevItems, ...res]);\n          }\n        })\n        .catch(() => {\n          // if we fail, retry up to 8 times with exponential back-off\n          queryRetryCountRef.current += 1;\n\n          if (queryRetryCountRef.current > 7) {\n            queryRetryCountRef.current = 0;\n            return;\n          } else {\n            setTimeout(\n              () => {\n                triggerQuery();\n              },\n              2 ** queryRetryCountRef.current * 160,\n            );\n          }\n        });\n    }, 160);\n\n    return () => {\n      clearTimeout(timeoutID);\n    };\n\n    // only re-query when we manually call triggerQuery\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [triggerQueryCount]);\n\n  // if the popover isn't scrollable, keep firing more queries\n  useLayoutEffect(() => {\n    setTimeout(() => {\n      if (\n        scrollerRef.current &&\n        scrollerRef.current.scrollHeight > 0 &&\n        scrollerRef.current.clientHeight > 0 &&\n        scrollerRef.current.scrollHeight <= scrollerRef.current.clientHeight\n      ) {\n        triggerQuery();\n      }\n    }, 160);\n  }, [items]);\n\n  // making this separate variable to satisfy react hooks deps linter\n  const isEmpty = items.length === 0 && page === 0;\n\n  const onStateChange = useCallback(\n    (changes: Parameters<NonNullable<ComboboxProps[\"onStateChange\"]>>[0]) => {\n      // if the user interacts and we're empty, fire the first query\n      if (isEmpty && \"isOpen\" in changes && changes.isOpen === true) {\n        triggerQuery();\n      }\n\n      // otherwise, if inputValue or selectedItems changes, assume we need an\n      // entirely new list back from the query\n      const inputValueShouldUpdate =\n        updateOnInputValueChange && \"inputValue\" in changes;\n      const selectedItemsShouldUpdate =\n        updateOnSelectedItemsChange &&\n        \"selectedItems\" in changes &&\n        changes.selectedItems;\n      const selectedItemShouldUpdate =\n        updateOnSelectedItemChange &&\n        \"selectedItem\" in changes &&\n        changes.selectedItem !== undefined;\n\n      if (inputValueShouldUpdate) {\n        setInputValue(changes.inputValue ?? \"\");\n      }\n\n      if (selectedItemsShouldUpdate) {\n        setSelectedItems(changes.selectedItems ?? []);\n      }\n\n      if (selectedItemShouldUpdate) {\n        setSelectedItem(changes.selectedItem);\n      }\n\n      if (\n        inputValueShouldUpdate ||\n        selectedItemsShouldUpdate ||\n        selectedItemShouldUpdate\n      ) {\n        setPage(0);\n        setDone(false);\n        triggerQuery();\n      }\n    },\n    [\n      isEmpty,\n      updateOnInputValueChange,\n      updateOnSelectedItemsChange,\n      updateOnSelectedItemChange,\n    ],\n  );\n\n  const onScroll = useCallback(\n    (e: UIEvent<HTMLElement>) => {\n      // React events don't persist, so we need to store the element through the timeout\n      const element = e.currentTarget;\n\n      // using timeoutRef to throttle scroll calls\n      // using loadingRef to not make additional queries if a query is already in flight\n      if (!scrollTimeoutRef.current && !loadingRef.current) {\n        setTimeout(() => {\n          const shouldTriggerQuery =\n            shouldTriggerQueryProp ?? defaultShouldTriggerQuery;\n\n          if (shouldTriggerQuery(element) && !done) {\n            triggerQuery();\n          }\n\n          scrollTimeoutRef.current = false;\n        }, 40);\n\n        scrollTimeoutRef.current = true;\n      }\n    },\n    [done, shouldTriggerQueryProp],\n  );\n\n  return {\n    comboboxProps: {\n      items: deferredItems,\n      loading: deferredLoading,\n      initialInputValue,\n      defaultInputValue,\n      initialSelectedItem,\n      defaultSelectedItem,\n      initialSelectedItems,\n      defaultSelectedItems,\n      disableFilter: true, // assume the query will return a filtered/sorted list\n      onStateChange,\n    },\n    contentProps: {\n      onScroll,\n      scrollerRef,\n    },\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useInfiniteCombobox-WcRgC9p6.js","sources":["../src/components/Combobox/useInfiniteCombobox.ts"],"sourcesContent":["import {\n  useState,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useDeferredValue,\n  type UIEvent,\n  useCallback,\n} from \"react\";\nimport { UseInfiniteComboboxProps, type ComboboxProps } from \"./ComboboxTypes\";\n\nconst SCROLL_THRESHOLD = 0.64; // arbitrary number\n\n/**\n * Hook for implementing infinite scroll functionality in combobox components.\n *\n * Features:\n * - Automatic pagination with scroll-based loading\n * - Configurable query triggers (input change, selection change, scroll)\n * - Debounced query execution to prevent excessive API calls\n * - Automatic retry logic with exponential backoff\n * - Support for both single and multiple selection modes\n * - Customizable scroll threshold for triggering new queries\n * - Loading state management with deferred updates\n * - Automatic detection of pagination end\n * - Support for initial items or query-based initialization\n *\n * @param options Configuration options for the infinite combobox\n * @returns Object containing comboboxProps and contentProps for use with Combobox component\n *\n * @example\n * const { comboboxProps, contentProps } = useInfiniteCombobox({\n *   initialItems: [],\n *   initialPage: 0,\n *   initialLoading: true,\n *   query: async ({ page, inputValue, selectedItems }) => {\n *     return await fetchItems({\n *       page,\n *       pageSize: 25,\n *       searchTerm: inputValue,\n *       excludeIds: selectedItems.map(item => item.id),\n *     });\n *   },\n * });\n *\n * return (\n *   <Combobox {...comboboxProps}>\n *     <Combobox.SearchField label=\"Search items\" />\n *     <Combobox.Content {...contentProps}>\n *       {({ items }) => (\n *         <Combobox.List>\n *           {items.map((item, i) => (\n *             <Combobox.Item key={item.id} item={item} index={i}>\n *               {item.name}\n *             </Combobox.Item>\n *           ))}\n *         </Combobox.List>\n *       )}\n *     </Combobox.Content>\n *   </Combobox>\n * );\n */\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useInfiniteCombobox<Item = any>({\n  query,\n  queryInitialItems,\n  initialItems = [],\n  initialPage = 0,\n  initialLoading = false,\n  initialInputValue,\n  defaultInputValue,\n  initialSelectedItem,\n  defaultSelectedItem,\n  initialSelectedItems,\n  defaultSelectedItems,\n  updateOnInputValueChange = true,\n  updateOnSelectedItemChange = true,\n  updateOnSelectedItemsChange = true,\n  queryOnFirstRender = false,\n  shouldTriggerQuery: shouldTriggerQueryProp,\n}: UseInfiniteComboboxProps<Item>) {\n  const [items, setItems] = useState(initialItems);\n  const deferredItems = useDeferredValue(items);\n  const [page, setPage] = useState(initialPage);\n  const [loading, setLoading] = useState(initialLoading);\n  const deferredLoading = useDeferredValue(loading);\n  const [inputValue, setInputValue] = useState(\n    initialInputValue ?? defaultInputValue ?? \"\",\n  );\n  const [selectedItem, setSelectedItem] = useState<Item | null>(\n    initialSelectedItem ?? defaultSelectedItem ?? null,\n  );\n  const [selectedItems, setSelectedItems] = useState<Item[]>(\n    initialSelectedItems ?? defaultSelectedItems ?? [],\n  );\n\n  const scrollerRef = useRef<HTMLDivElement>(null);\n\n  const defaultShouldTriggerQuery = (element: EventTarget & HTMLElement) => {\n    const totalScrollHeight = element.scrollHeight - element.clientHeight;\n    return element.scrollTop / totalScrollHeight > SCROLL_THRESHOLD;\n  };\n\n  // using both state and ref here since the state will be \"behind\" the ref\n  // if another query has been triggered while the current one is in flight\n  const [triggerQueryCount, setTriggerQueryCount] = useState(0);\n  const triggerQueryCountRef = useRef(0);\n  const triggerQuery = () => {\n    setTriggerQueryCount((x) => x + 1);\n    triggerQueryCountRef.current += 1;\n  };\n\n  const [done, setDone] = useState(false);\n\n  const firstRenderRef = useRef(true);\n  const scrollTimeoutRef = useRef(false);\n\n  // using a similar state/ref idea for managing loading as well, since we\n  // need to know immediately if queries are in flight, but state won't be\n  // updated in the onScroll handler fast enough\n  const loadingRef = useRef(false);\n  const setLoadingStateAndRef = (isLoading: boolean) => {\n    setLoading(isLoading);\n    loadingRef.current = isLoading;\n  };\n\n  const queryRetryCountRef = useRef(0);\n\n  useEffect(() => {\n    if (firstRenderRef.current && queryInitialItems) {\n      setItems(queryInitialItems());\n    }\n\n    // don't run on initial render unless we explicitly choose to\n    if (firstRenderRef.current && !queryOnFirstRender) {\n      firstRenderRef.current = false;\n      return;\n    }\n\n    setLoadingStateAndRef(true);\n\n    // using a short debounce delay to batch updates\n    const timeoutID = setTimeout(() => {\n      // if this query is outdated, don't call it\n      if (triggerQueryCount < triggerQueryCountRef.current) return;\n\n      query({\n        page,\n        inputValue,\n        selectedItem,\n        selectedItems,\n      })\n        .then((res) => {\n          queryRetryCountRef.current = 0;\n\n          // if this query is outdated, throw away it's results\n          if (triggerQueryCount < triggerQueryCountRef.current) return;\n\n          setLoadingStateAndRef(false);\n          setPage((x) => x + 1);\n\n          // if the result is nullish or empty\n          // assume we've reached the end of the pagination\n          if (res == null || (page > 0 && res.length === 0)) {\n            setDone(true);\n          } else if (page === 0) {\n            setItems(() => [...res]);\n          } else {\n            setItems((prevItems) => [...prevItems, ...res]);\n          }\n        })\n        .catch(() => {\n          // if we fail, retry up to 8 times with exponential back-off\n          queryRetryCountRef.current += 1;\n\n          if (queryRetryCountRef.current > 7) {\n            queryRetryCountRef.current = 0;\n            return;\n          } else {\n            setTimeout(\n              () => {\n                triggerQuery();\n              },\n              2 ** queryRetryCountRef.current * 160,\n            );\n          }\n        });\n    }, 160);\n\n    return () => {\n      clearTimeout(timeoutID);\n    };\n\n    // only re-query when we manually call triggerQuery\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [triggerQueryCount]);\n\n  // if the popover isn't scrollable, keep firing more queries\n  useLayoutEffect(() => {\n    setTimeout(() => {\n      if (\n        scrollerRef.current &&\n        scrollerRef.current.scrollHeight > 0 &&\n        scrollerRef.current.clientHeight > 0 &&\n        scrollerRef.current.scrollHeight <= scrollerRef.current.clientHeight\n      ) {\n        triggerQuery();\n      }\n    }, 160);\n  }, [items]);\n\n  // making this separate variable to satisfy react hooks deps linter\n  const isEmpty = items.length === 0 && page === 0;\n\n  const onStateChange = useCallback(\n    (changes: Parameters<NonNullable<ComboboxProps[\"onStateChange\"]>>[0]) => {\n      // if the user interacts and we're empty, fire the first query\n      if (isEmpty && \"isOpen\" in changes && changes.isOpen === true) {\n        triggerQuery();\n      }\n\n      // otherwise, if inputValue or selectedItems changes, assume we need an\n      // entirely new list back from the query\n      const inputValueShouldUpdate =\n        updateOnInputValueChange && \"inputValue\" in changes;\n      const selectedItemsShouldUpdate =\n        updateOnSelectedItemsChange &&\n        \"selectedItems\" in changes &&\n        changes.selectedItems;\n      const selectedItemShouldUpdate =\n        updateOnSelectedItemChange &&\n        \"selectedItem\" in changes &&\n        changes.selectedItem !== undefined;\n\n      if (inputValueShouldUpdate) {\n        setInputValue(changes.inputValue ?? \"\");\n      }\n\n      if (selectedItemsShouldUpdate) {\n        setSelectedItems(changes.selectedItems ?? []);\n      }\n\n      if (selectedItemShouldUpdate) {\n        setSelectedItem(changes.selectedItem);\n      }\n\n      if (\n        inputValueShouldUpdate ||\n        selectedItemsShouldUpdate ||\n        selectedItemShouldUpdate\n      ) {\n        setPage(0);\n        setDone(false);\n        triggerQuery();\n      }\n    },\n    [\n      isEmpty,\n      updateOnInputValueChange,\n      updateOnSelectedItemsChange,\n      updateOnSelectedItemChange,\n    ],\n  );\n\n  const onScroll = useCallback(\n    (e: UIEvent<HTMLElement>) => {\n      // React events don't persist, so we need to store the element through the timeout\n      const element = e.currentTarget;\n\n      // using timeoutRef to throttle scroll calls\n      // using loadingRef to not make additional queries if a query is already in flight\n      if (!scrollTimeoutRef.current && !loadingRef.current) {\n        setTimeout(() => {\n          const shouldTriggerQuery =\n            shouldTriggerQueryProp ?? defaultShouldTriggerQuery;\n\n          if (shouldTriggerQuery(element) && !done) {\n            triggerQuery();\n          }\n\n          scrollTimeoutRef.current = false;\n        }, 40);\n\n        scrollTimeoutRef.current = true;\n      }\n    },\n    [done, shouldTriggerQueryProp],\n  );\n\n  return {\n    comboboxProps: {\n      items: deferredItems,\n      loading: deferredLoading,\n      initialInputValue,\n      defaultInputValue,\n      initialSelectedItem,\n      defaultSelectedItem,\n      initialSelectedItems,\n      defaultSelectedItems,\n      disableFilter: true, // assume the query will return a filtered/sorted list\n      onStateChange,\n    },\n    contentProps: {\n      onScroll,\n      scrollerRef,\n    },\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/{useInitialFocus-CAFMgbJG.js → useInitialFocus-Cl_Txu7W.js}

@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from 'react';
-import { u as useOpenCloseTransitionStates } from './useOnClickOutside-C5AZE_I6.js';
+import { u as useOpenCloseTransitionStates } from './useOnClickOutside-BDzuUjmY.js';
 import { t as tabbable } from './DrawerContext-D4tWTLVf.js';
 
 const ATTRIBUTE_NAME_LIST = "data-anv-dialogs";
@@ -127,4 +127,4 @@ const useInitialFocus = (dialogRef, { computeFocus }) => {
 };
 
 export { useKeyboardFocusables as a, useDialogScrollLock as b, useInitialFocus as c, useDialogTransitionStates as u };
-//# sourceMappingURL=useInitialFocus-CAFMgbJG.js.map
+//# sourceMappingURL=useInitialFocus-Cl_Txu7W.js.map

package/dist/{useInitialFocus-CAFMgbJG.js.map → useInitialFocus-Cl_Txu7W.js.map}

@@ -1 +1 @@
-{"version":3,"file":"useInitialFocus-CAFMgbJG.js","sources":["../src/internal/hooks/useDialogScrollLock/useDialogScrollLock.ts","../src/internal/hooks/useDialogTransitionStates/useDialogTransitionStates.ts","../src/internal/hooks/useKeyboardFocusables/useKeyboardFocusables.ts","../src/components/Dialog/internal/useInitialFocus.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nconst ATTRIBUTE_NAME_LIST = \"data-anv-dialogs\";\nconst ATTRIBUTE_NAME_BOOL = \"data-anv-dialogs-open\";\n\n/**\n * Props for the useDialogScrollLock hook\n * @property {boolean} open - Whether the dialog is open\n * @property {string} id - Unique identifier for the dialog\n * @property {boolean} [enableScrollChaining] - Whether to enable scroll chaining\n * @property {React.RefObject<HTMLElement>} elementRef - Reference to the dialog element\n */\nexport interface UseDialogScrollLockProps {\n  /**\n   * Whether the dialog is open\n   */\n  open: boolean;\n  /**\n   * Unique identifier for the dialog\n   */\n  id: string;\n  /**\n   * Whether to enable scroll chaining\n   */\n  enableScrollChaining?: boolean;\n  /**\n   * Reference to the dialog element\n   */\n  elementRef: React.RefObject<HTMLElement>;\n}\n\n/**\n * Custom hook for managing dialog scroll lock in shadow DOM environments.\n *\n * Features:\n * - Manages scroll lock state for dialogs in shadow DOM\n * - Tracks multiple open dialogs with unique IDs\n * - Prevents scroll chaining when dialogs are open\n * - Automatically cleans up scroll lock on unmount\n * - Supports enabling/disabling scroll chaining\n * - Uses data attributes to track dialog state\n *\n * @param props - Configuration object containing dialog state and element reference\n * @returns void\n */\nexport const useDialogScrollLock = ({\n  open,\n  id,\n  enableScrollChaining,\n  elementRef,\n}: UseDialogScrollLockProps) => {\n  useEffect(() => {\n    if (enableScrollChaining) return () => {};\n    const root = elementRef.current?.getRootNode();\n    if (!(root instanceof ShadowRoot)) return () => {};\n\n    const updateDialogAttributes = (shouldAdd: boolean) => {\n      const currentDialogs =\n        root.host\n          .getAttribute(ATTRIBUTE_NAME_LIST)\n          ?.split(\" \")\n          .filter(Boolean) ?? [];\n\n      const newDialogs = new Set(currentDialogs);\n      if (shouldAdd) {\n        newDialogs.add(id);\n      } else {\n        newDialogs.delete(id);\n      }\n\n      const dialogList = Array.from(newDialogs);\n      root.host.setAttribute(ATTRIBUTE_NAME_LIST, dialogList.join(\" \"));\n\n      if (dialogList.length > 0) {\n        root.host.setAttribute(ATTRIBUTE_NAME_BOOL, \"true\");\n      } else {\n        root.host.removeAttribute(ATTRIBUTE_NAME_BOOL);\n      }\n    };\n\n    updateDialogAttributes(open);\n\n    return () => {\n      updateDialogAttributes(false);\n    };\n  }, [open, id, enableScrollChaining, elementRef]);\n};\n","import { RefObject } from \"react\";\nimport {\n  useOpenCloseTransitionStates,\n  type OpenCloseTransitionStateEffects,\n} from \"../useOpenCloseTransitionStates\";\n\n/**\n * Effects configuration for dialog transition states\n * @property {() => void} [onOpenAnimationStart] - Callback when opening animation starts\n * @property {() => void} [onCloseAnimationStart] - Callback when closing animation starts\n * @property {() => void} [onOpenAnimationComplete] - Callback when opening animation completes\n * @property {() => void} [onCloseAnimationComplete] - Callback when closing animation completes\n */\n\n/**\n * Custom hook for managing dialog transition states and animations.\n *\n * Features:\n * - Manages dialog open/close transition states\n * - Handles animation timing based on CSS animation duration\n * - Provides callbacks for animation lifecycle events\n * - Supports controlled dialog state management\n * - Automatically handles showModal() and close() calls\n * - Provides utility flags for open/closed states\n *\n * @param ref - The ref to the dialog element\n * @param openProp - The open prop controlling dialog visibility\n * @param options - Additional, optional options including callbacks for animation start, complete, and initialization\n * @returns Object containing dialog state, control functions, and utility flags\n */\n\n/**\n * Effects configuration for dialog transition states\n * @param openProp - The open prop controlling dialog visibility\n * @param options - The effects configuration\n * @returns The dialog transition state\n */\nexport const useDialogTransitionStates = (\n  ref: RefObject<HTMLDialogElement>,\n  openProp: boolean | undefined,\n  options: OpenCloseTransitionStateEffects = {},\n) => {\n  const { onOpenAnimationStart, onCloseAnimationComplete } = options;\n  return useOpenCloseTransitionStates(openProp, {\n    ...options,\n    onOpenAnimationStart: () => {\n      if (!ref.current) return;\n      ref.current.showModal();\n      onOpenAnimationStart?.();\n    },\n    onCloseAnimationComplete: () => {\n      if (!ref.current) return;\n      ref.current.close();\n      onCloseAnimationComplete?.();\n    },\n    durationMs: () => {\n      if (!ref.current || !window) return 0;\n      const duration = window.getComputedStyle(ref.current).animationDuration;\n      return parseFloat(duration) * 1000;\n    },\n  });\n};\n","import { RefObject, useEffect, useRef, useState } from \"react\";\nimport { FocusableElement, tabbable } from \"tabbable\";\n\n/**\n * Options for the useKeyboardFocusables hook\n */\ntype OptionProps =\n  | {\n      /**\n       * Disable mutation observer\n       */\n      observeChange: false;\n    }\n  | {\n      /**\n       * Enable mutation observer with optional configuration\n       */\n      observeChange: true;\n      /**\n       * Observe attribute changes\n       */\n      attributes?: boolean;\n      /**\n       * Observe text content changes\n       */\n      characterData?: boolean;\n      /**\n       * Observe child element changes\n       */\n      childList?: boolean;\n      /**\n       * Observe descendant changes\n       */\n      subtree?: boolean;\n    };\n\n/**\n * Custom hook for tracking keyboard focusable elements within a container.\n *\n * Features:\n * - Tracks all keyboard focusable elements within a target container\n * - Supports both ref objects and direct element references\n * - Optional mutation observer for real-time updates\n * - Debounced updates to prevent excessive re-renders\n * - Configurable mutation observer options\n * - Manual update function for immediate refresh\n * - Uses tabbable library for accurate focusable detection\n * - Automatically cleans up mutation observer\n *\n * @param element - Target element or ref to monitor for focusable elements\n * @param options - Configuration options for mutation observer behavior\n * @returns Object containing current focusable elements and update function\n */\nexport const useKeyboardFocusables = (\n  element: RefObject<HTMLElement> | HTMLElement | undefined,\n  options: OptionProps = {\n    observeChange: true,\n    attributes: true,\n    characterData: true,\n    childList: true,\n    subtree: true,\n  },\n) => {\n  const [focusables, setFocusables] = useState<FocusableElement[] | null>(null);\n  const observerRef = useRef<MutationObserver>();\n\n  useEffect(() => {\n    const target = element instanceof HTMLElement ? element : element?.current;\n    if (!target) return;\n    if (!options.observeChange && !focusables) {\n      setFocusables(tabbable(target as Element));\n      return;\n    }\n\n    const mutationCallback = () => {\n      const targetArr = tabbable(target as Element);\n      if (targetArr.length === 0) return;\n      setFocusables(targetArr);\n    };\n\n    const observer = new MutationObserver(mutationCallback);\n    observerRef.current = observer;\n    observer.observe(target, {\n      childList: true, // Observe changes to child elements\n      subtree: true, // Observe changes to descendants of the target\n      attributes: true, // Observe changes to attributes\n      characterData: true, // Observe changes to text content\n    });\n    return () => {\n      observer.disconnect();\n    };\n  }, [element, options, focusables]);\n\n  return { focusables };\n};\n","import { RefObject, useEffect } from \"react\";\nimport { FocusableElement, tabbable } from \"tabbable\";\n\nexport type InitialFocusOptions = {\n  /**\n   * Function to pick the initial focus target, given an array of focusable elements\n   */\n  computeFocus?: (focusables: FocusableElement[]) => FocusableElement;\n};\n\n/**\n * Hook to set initial focus for a dialog (e.g. Dialog, Drawer) when it is opened.\n * @param dialogRef - Ref to the dialog element\n * @param options - Options for the hook\n * @param options.computeFocus - Function to pick the initial focus target, given an array of focusable elements\n */\nexport const useInitialFocus = (\n  /**\n   * Ref to the dialog element\n   */\n  dialogRef: RefObject<HTMLDialogElement>,\n  { computeFocus }: InitialFocusOptions,\n) => {\n  useEffect(() => {\n    if (!dialogRef.current) {\n      return () => {};\n    }\n    // Create a MutationObserver to check if dialogRef.current is open or closed\n    const observer = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        if (\n          mutation.attributeName === \"open\" &&\n          mutation.target === dialogRef.current &&\n          mutation.target instanceof HTMLDialogElement &&\n          mutation.target.open === true\n        ) {\n          const focusables = tabbable(dialogRef.current);\n          const target = computeFocus?.(focusables) || focusables[0];\n          target?.focus();\n        }\n      });\n    });\n    observer.observe(dialogRef.current, {\n      attributes: true,\n      attributeFilter: [\"open\"],\n    });\n    return () => {\n      observer.disconnect();\n    };\n  }, [dialogRef, computeFocus]);\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useInitialFocus-Cl_Txu7W.js","sources":["../src/internal/hooks/useDialogScrollLock/useDialogScrollLock.ts","../src/internal/hooks/useDialogTransitionStates/useDialogTransitionStates.ts","../src/internal/hooks/useKeyboardFocusables/useKeyboardFocusables.ts","../src/components/Dialog/internal/useInitialFocus.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nconst ATTRIBUTE_NAME_LIST = \"data-anv-dialogs\";\nconst ATTRIBUTE_NAME_BOOL = \"data-anv-dialogs-open\";\n\n/**\n * Props for the useDialogScrollLock hook\n * @property {boolean} open - Whether the dialog is open\n * @property {string} id - Unique identifier for the dialog\n * @property {boolean} [enableScrollChaining] - Whether to enable scroll chaining\n * @property {React.RefObject<HTMLElement>} elementRef - Reference to the dialog element\n */\nexport interface UseDialogScrollLockProps {\n  /**\n   * Whether the dialog is open\n   */\n  open: boolean;\n  /**\n   * Unique identifier for the dialog\n   */\n  id: string;\n  /**\n   * Whether to enable scroll chaining\n   */\n  enableScrollChaining?: boolean;\n  /**\n   * Reference to the dialog element\n   */\n  elementRef: React.RefObject<HTMLElement>;\n}\n\n/**\n * Custom hook for managing dialog scroll lock in shadow DOM environments.\n *\n * Features:\n * - Manages scroll lock state for dialogs in shadow DOM\n * - Tracks multiple open dialogs with unique IDs\n * - Prevents scroll chaining when dialogs are open\n * - Automatically cleans up scroll lock on unmount\n * - Supports enabling/disabling scroll chaining\n * - Uses data attributes to track dialog state\n *\n * @param props - Configuration object containing dialog state and element reference\n * @returns void\n */\nexport const useDialogScrollLock = ({\n  open,\n  id,\n  enableScrollChaining,\n  elementRef,\n}: UseDialogScrollLockProps) => {\n  useEffect(() => {\n    if (enableScrollChaining) return () => {};\n    const root = elementRef.current?.getRootNode();\n    if (!(root instanceof ShadowRoot)) return () => {};\n\n    const updateDialogAttributes = (shouldAdd: boolean) => {\n      const currentDialogs =\n        root.host\n          .getAttribute(ATTRIBUTE_NAME_LIST)\n          ?.split(\" \")\n          .filter(Boolean) ?? [];\n\n      const newDialogs = new Set(currentDialogs);\n      if (shouldAdd) {\n        newDialogs.add(id);\n      } else {\n        newDialogs.delete(id);\n      }\n\n      const dialogList = Array.from(newDialogs);\n      root.host.setAttribute(ATTRIBUTE_NAME_LIST, dialogList.join(\" \"));\n\n      if (dialogList.length > 0) {\n        root.host.setAttribute(ATTRIBUTE_NAME_BOOL, \"true\");\n      } else {\n        root.host.removeAttribute(ATTRIBUTE_NAME_BOOL);\n      }\n    };\n\n    updateDialogAttributes(open);\n\n    return () => {\n      updateDialogAttributes(false);\n    };\n  }, [open, id, enableScrollChaining, elementRef]);\n};\n","import { RefObject } from \"react\";\nimport {\n  useOpenCloseTransitionStates,\n  type OpenCloseTransitionStateEffects,\n} from \"../useOpenCloseTransitionStates\";\n\n/**\n * Effects configuration for dialog transition states\n * @property {() => void} [onOpenAnimationStart] - Callback when opening animation starts\n * @property {() => void} [onCloseAnimationStart] - Callback when closing animation starts\n * @property {() => void} [onOpenAnimationComplete] - Callback when opening animation completes\n * @property {() => void} [onCloseAnimationComplete] - Callback when closing animation completes\n */\n\n/**\n * Custom hook for managing dialog transition states and animations.\n *\n * Features:\n * - Manages dialog open/close transition states\n * - Handles animation timing based on CSS animation duration\n * - Provides callbacks for animation lifecycle events\n * - Supports controlled dialog state management\n * - Automatically handles showModal() and close() calls\n * - Provides utility flags for open/closed states\n *\n * @param ref - The ref to the dialog element\n * @param openProp - The open prop controlling dialog visibility\n * @param options - Additional, optional options including callbacks for animation start, complete, and initialization\n * @returns Object containing dialog state, control functions, and utility flags\n */\n\n/**\n * Effects configuration for dialog transition states\n * @param openProp - The open prop controlling dialog visibility\n * @param options - The effects configuration\n * @returns The dialog transition state\n */\nexport const useDialogTransitionStates = (\n  ref: RefObject<HTMLDialogElement>,\n  openProp: boolean | undefined,\n  options: OpenCloseTransitionStateEffects = {},\n) => {\n  const { onOpenAnimationStart, onCloseAnimationComplete } = options;\n  return useOpenCloseTransitionStates(openProp, {\n    ...options,\n    onOpenAnimationStart: () => {\n      if (!ref.current) return;\n      ref.current.showModal();\n      onOpenAnimationStart?.();\n    },\n    onCloseAnimationComplete: () => {\n      if (!ref.current) return;\n      ref.current.close();\n      onCloseAnimationComplete?.();\n    },\n    durationMs: () => {\n      if (!ref.current || !window) return 0;\n      const duration = window.getComputedStyle(ref.current).animationDuration;\n      return parseFloat(duration) * 1000;\n    },\n  });\n};\n","import { RefObject, useEffect, useRef, useState } from \"react\";\nimport { FocusableElement, tabbable } from \"tabbable\";\n\n/**\n * Options for the useKeyboardFocusables hook\n */\ntype OptionProps =\n  | {\n      /**\n       * Disable mutation observer\n       */\n      observeChange: false;\n    }\n  | {\n      /**\n       * Enable mutation observer with optional configuration\n       */\n      observeChange: true;\n      /**\n       * Observe attribute changes\n       */\n      attributes?: boolean;\n      /**\n       * Observe text content changes\n       */\n      characterData?: boolean;\n      /**\n       * Observe child element changes\n       */\n      childList?: boolean;\n      /**\n       * Observe descendant changes\n       */\n      subtree?: boolean;\n    };\n\n/**\n * Custom hook for tracking keyboard focusable elements within a container.\n *\n * Features:\n * - Tracks all keyboard focusable elements within a target container\n * - Supports both ref objects and direct element references\n * - Optional mutation observer for real-time updates\n * - Debounced updates to prevent excessive re-renders\n * - Configurable mutation observer options\n * - Manual update function for immediate refresh\n * - Uses tabbable library for accurate focusable detection\n * - Automatically cleans up mutation observer\n *\n * @param element - Target element or ref to monitor for focusable elements\n * @param options - Configuration options for mutation observer behavior\n * @returns Object containing current focusable elements and update function\n */\nexport const useKeyboardFocusables = (\n  element: RefObject<HTMLElement> | HTMLElement | undefined,\n  options: OptionProps = {\n    observeChange: true,\n    attributes: true,\n    characterData: true,\n    childList: true,\n    subtree: true,\n  },\n) => {\n  const [focusables, setFocusables] = useState<FocusableElement[] | null>(null);\n  const observerRef = useRef<MutationObserver>();\n\n  useEffect(() => {\n    const target = element instanceof HTMLElement ? element : element?.current;\n    if (!target) return;\n    if (!options.observeChange && !focusables) {\n      setFocusables(tabbable(target as Element));\n      return;\n    }\n\n    const mutationCallback = () => {\n      const targetArr = tabbable(target as Element);\n      if (targetArr.length === 0) return;\n      setFocusables(targetArr);\n    };\n\n    const observer = new MutationObserver(mutationCallback);\n    observerRef.current = observer;\n    observer.observe(target, {\n      childList: true, // Observe changes to child elements\n      subtree: true, // Observe changes to descendants of the target\n      attributes: true, // Observe changes to attributes\n      characterData: true, // Observe changes to text content\n    });\n    return () => {\n      observer.disconnect();\n    };\n  }, [element, options, focusables]);\n\n  return { focusables };\n};\n","import { RefObject, useEffect } from \"react\";\nimport { FocusableElement, tabbable } from \"tabbable\";\n\nexport type InitialFocusOptions = {\n  /**\n   * Function to pick the initial focus target, given an array of focusable elements\n   */\n  computeFocus?: (focusables: FocusableElement[]) => FocusableElement;\n};\n\n/**\n * Hook to set initial focus for a dialog (e.g. Dialog, Drawer) when it is opened.\n * @param dialogRef - Ref to the dialog element\n * @param options - Options for the hook\n * @param options.computeFocus - Function to pick the initial focus target, given an array of focusable elements\n */\nexport const useInitialFocus = (\n  /**\n   * Ref to the dialog element\n   */\n  dialogRef: RefObject<HTMLDialogElement>,\n  { computeFocus }: InitialFocusOptions,\n) => {\n  useEffect(() => {\n    if (!dialogRef.current) {\n      return () => {};\n    }\n    // Create a MutationObserver to check if dialogRef.current is open or closed\n    const observer = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        if (\n          mutation.attributeName === \"open\" &&\n          mutation.target === dialogRef.current &&\n          mutation.target instanceof HTMLDialogElement &&\n          mutation.target.open === true\n        ) {\n          const focusables = tabbable(dialogRef.current);\n          const target = computeFocus?.(focusables) || focusables[0];\n          target?.focus();\n        }\n      });\n    });\n    observer.observe(dialogRef.current, {\n      attributes: true,\n      attributeFilter: [\"open\"],\n    });\n    return () => {\n      observer.disconnect();\n    };\n  }, [dialogRef, computeFocus]);\n};\n"],"names":[],"mappings":"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"}

package/dist/{useLayoutPropsUtil-DjD5IMh0.js → useLayoutPropsUtil-DwMwNUhP.js}

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { u as useBreakpoint } from './useBreakpoint-Cv5fnZxs.js';
-import { p as primitive } from './primitive-BoyEHaOo.js';
+import { u as useBreakpoint } from './useBreakpoint-Pi4OnwVo.js';
+import { p as primitive } from './primitive-BByug0kD.js';
 
 const sizeToToken = (value) => {
   if (typeof value === "undefined") return void 0;
@@ -131,4 +131,4 @@ function useLayoutPropsUtil(props) {
 }
 
 export { sizeToToken as s, useLayoutPropsUtil as u };
-//# sourceMappingURL=useLayoutPropsUtil-DjD5IMh0.js.map
+//# sourceMappingURL=useLayoutPropsUtil-DwMwNUhP.js.map

package/dist/{useLayoutPropsUtil-DjD5IMh0.js.map → useLayoutPropsUtil-DwMwNUhP.js.map}

@@ -1 +1 @@
-{"version":3,"file":"useLayoutPropsUtil-DjD5IMh0.js","sources":["../src/internal/functions/sizeToToken.ts","../src/internal/hooks/useLayoutPropsUtil/useLayoutPropsUtil.ts"],"sourcesContent":["import { core } from \"@servicetitan/hammer-token\";\nimport { GapSize } from \"../../types\";\n\ntype PrimitiveSizes =\n  | \"Size0\"\n  | \"SizeHalf\"\n  | \"Size1\"\n  | \"Size2\"\n  | \"Size3\"\n  | \"Size4\"\n  | \"Size5\"\n  | \"Size6\"\n  | \"Size7\"\n  | \"Size8\"\n  | \"Size9\"\n  | \"Size10\"\n  | \"Size11\"\n  | \"Size12\"\n  | \"Size13\"\n  | \"Size14\";\n\nexport const sizeToToken = (value?: GapSize) => {\n  if (typeof value === \"undefined\") return undefined;\n  let gap = value;\n  const stringifiedValue = String(value);\n  if (stringifiedValue === \"half\") {\n    gap =\n      `${stringifiedValue[0].toUpperCase()}${stringifiedValue.slice(1)}` as GapSize;\n  }\n\n  return core.primitive?.[`Size${gap}` as PrimitiveSizes]?.value;\n};\n","import { CSSProperties, useMemo } from \"react\";\nimport { GapSize, LayoutUtilProps } from \"../../../types\";\nimport { useBreakpoint } from \"../../../hooks/useBreakpoint\";\nimport { sizeToToken } from \"../../functions/sizeToToken\";\n\nconst LAYOUT_PROP_ARR = [\n  \"gridTemplateColumns\",\n  \"gridTemplateRows\",\n  \"gridTemplateAreas\",\n  \"gridAutoColumns\",\n  \"gridAutoRows\",\n  \"gridArea\",\n  \"gridColumn\",\n  \"gridRow\",\n  \"gridColumnStart\",\n  \"gridColumnEnd\",\n  \"gridRowStart\",\n  \"gridRowEnd\",\n  \"flex\",\n  \"flexDirection\",\n  \"flexGrow\",\n  \"flexShrink\",\n  \"flexBasis\",\n  \"flexWrap\",\n  \"order\",\n  \"justifySelf\",\n  \"justifyItems\",\n  \"justifyContent\",\n  \"alignSelf\",\n  \"alignItems\",\n  \"alignContent\",\n  \"placeItems\",\n  \"placeContent\",\n  \"placeSelf\",\n  \"wrap\",\n  \"gap\",\n  \"rowGap\",\n  \"columnGap\",\n];\n\nconst RESPONSIVE_SIZES_ARR = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\"];\n\n/**\n * Layout CSS variables type excluding responsive properties\n */\ntype LayoutCSSVariables = Omit<LayoutUtilProps, keyof ResponsiveLayout>;\n\n/**\n * Responsive layout configuration type\n */\ntype ResponsiveLayout = {\n  /**\n   * Base layout properties\n   */\n  base?: LayoutUtilProps;\n  /**\n   * Extra small breakpoint layout properties\n   */\n  xs?: LayoutUtilProps;\n  /**\n   * Small breakpoint layout properties\n   */\n  sm?: LayoutUtilProps;\n  /**\n   * Medium breakpoint layout properties\n   */\n  md?: LayoutUtilProps;\n  /**\n   * Large breakpoint layout properties\n   */\n  lg?: LayoutUtilProps;\n  /**\n   * Extra large breakpoint layout properties\n   */\n  xl?: LayoutUtilProps;\n  /**\n   * Extra extra large breakpoint layout properties\n   */\n  xxl?: LayoutUtilProps;\n};\n\n/**\n * Custom hook for managing responsive layout properties and CSS styles.\n *\n * Features:\n * - Separates layout properties from component properties\n * - Provides responsive breakpoint support for all layout properties\n * - Automatically converts gap sizes to CSS tokens\n * - Uses breakpoint cascade for responsive values\n * - Optimized with useMemo for performance\n * - Supports all CSS Grid and Flexbox properties\n * - Handles responsive size inheritance (larger breakpoints inherit from smaller ones)\n * - Returns both layout styles and filtered component props\n *\n * @param props - Object containing layout and component properties\n * @returns Object containing layout styles and filtered component props\n */\nexport function useLayoutPropsUtil<T extends ResponsiveLayout>(\n  props: T,\n): { layoutStyles?: CSSProperties; componentProps: T } {\n  const baseSizeProps = Object.fromEntries(\n    Object.entries(props).filter(([key, _val]) =>\n      LAYOUT_PROP_ARR.includes(key),\n    ),\n  );\n\n  const responsiveSizeProps = Object.fromEntries(\n    Object.entries(props).filter(([key, _val]) =>\n      RESPONSIVE_SIZES_ARR.includes(key),\n    ),\n  );\n\n  const sizeProps: ResponsiveLayout = useMemo(\n    () => ({\n      ...responsiveSizeProps,\n      base: baseSizeProps,\n    }),\n    [baseSizeProps, responsiveSizeProps],\n  );\n\n  const componentProps = Object.fromEntries(\n    Object.entries(props).filter(\n      ([key, _val]) =>\n        !RESPONSIVE_SIZES_ARR.includes(key) && !LAYOUT_PROP_ARR.includes(key),\n    ),\n  );\n\n  const breakpoint = useBreakpoint();\n\n  const getValue = (style: keyof LayoutCSSVariables) => {\n    if (breakpoint?.name === \"xxl\") {\n      const xxlValue =\n        sizeProps.xxl?.[style] ??\n        sizeProps.xl?.[style] ??\n        sizeProps.lg?.[style] ??\n        sizeProps.md?.[style] ??\n        sizeProps.sm?.[style] ??\n        sizeProps.xs?.[style] ??\n        sizeProps.base?.[style];\n\n      if (style.toLowerCase().endsWith(\"gap\")) {\n        return sizeToToken(xxlValue as GapSize);\n      }\n      return xxlValue;\n    }\n    if (breakpoint?.name === \"xl\") {\n      const xlValue =\n        sizeProps.xl?.[style] ??\n        sizeProps.lg?.[style] ??\n        sizeProps.md?.[style] ??\n        sizeProps.sm?.[style] ??\n        sizeProps.xs?.[style] ??\n        sizeProps.base?.[style];\n      if (style.toLowerCase().endsWith(\"gap\")) {\n        return sizeToToken(xlValue as GapSize);\n      }\n      return xlValue;\n    }\n    if (breakpoint?.name === \"lg\") {\n      const lgValue =\n        sizeProps.lg?.[style] ??\n        sizeProps.md?.[style] ??\n        sizeProps.sm?.[style] ??\n        sizeProps.xs?.[style] ??\n        sizeProps.base?.[style];\n\n      if (style.toLowerCase().endsWith(\"gap\")) {\n        return sizeToToken(lgValue as GapSize);\n      }\n      return lgValue;\n    }\n    if (breakpoint?.name === \"md\") {\n      const mdValue =\n        sizeProps.md?.[style] ??\n        sizeProps.sm?.[style] ??\n        sizeProps.xs?.[style] ??\n        sizeProps.base?.[style];\n      if (style.toLowerCase().endsWith(\"gap\")) {\n        return sizeToToken(mdValue as GapSize);\n      }\n      return mdValue;\n    }\n    if (breakpoint?.name === \"sm\") {\n      const smValue =\n        sizeProps.sm?.[style] ??\n        sizeProps.xs?.[style] ??\n        sizeProps.base?.[style];\n      if (style.toLowerCase().endsWith(\"gap\")) {\n        return sizeToToken(smValue as GapSize);\n      }\n      return smValue;\n    }\n    if (breakpoint?.name === \"xs\") {\n      const xsValue = sizeProps.xs?.[style] ?? sizeProps.base?.[style];\n      if (style.toLowerCase().endsWith(\"gap\")) {\n        return sizeToToken(xsValue as GapSize);\n      }\n      return xsValue;\n    }\n\n    if (style.toLowerCase().endsWith(\"gap\")) {\n      return sizeToToken(sizeProps.base?.[style] as GapSize);\n    }\n    return sizeProps.base?.[style];\n  };\n\n  const layoutStyleObject = LAYOUT_PROP_ARR.reduce((o, key) => {\n    const value = getValue(key as keyof LayoutCSSVariables);\n\n    if (typeof value === \"undefined\") return o;\n    return { ...o, [key]: value };\n  }, {});\n\n  return {\n    layoutStyles: layoutStyleObject,\n    componentProps: componentProps as T,\n  };\n}\n"],"names":["core.primitive"],"mappings":"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"}
+{"version":3,"file":"useLayoutPropsUtil-DwMwNUhP.js","sources":["../src/internal/functions/sizeToToken.ts","../src/internal/hooks/useLayoutPropsUtil/useLayoutPropsUtil.ts"],"sourcesContent":["import { core } from \"@servicetitan/hammer-token\";\nimport { GapSize } from \"../../types\";\n\ntype PrimitiveSizes =\n  | \"Size0\"\n  | \"SizeHalf\"\n  | \"Size1\"\n  | \"Size2\"\n  | \"Size3\"\n  | \"Size4\"\n  | \"Size5\"\n  | \"Size6\"\n  | \"Size7\"\n  | \"Size8\"\n  | \"Size9\"\n  | \"Size10\"\n  | \"Size11\"\n  | \"Size12\"\n  | \"Size13\"\n  | \"Size14\";\n\nexport const sizeToToken = (value?: GapSize) => {\n  if (typeof value === \"undefined\") return undefined;\n  let gap = value;\n  const stringifiedValue = String(value);\n  if (stringifiedValue === \"half\") {\n    gap =\n      `${stringifiedValue[0].toUpperCase()}${stringifiedValue.slice(1)}` as GapSize;\n  }\n\n  return core.primitive?.[`Size${gap}` as PrimitiveSizes]?.value;\n};\n","import { CSSProperties, useMemo } from \"react\";\nimport { GapSize, LayoutUtilProps } from \"../../../types\";\nimport { useBreakpoint } from \"../../../hooks/useBreakpoint\";\nimport { sizeToToken } from \"../../functions/sizeToToken\";\n\nconst LAYOUT_PROP_ARR = [\n  \"gridTemplateColumns\",\n  \"gridTemplateRows\",\n  \"gridTemplateAreas\",\n  \"gridAutoColumns\",\n  \"gridAutoRows\",\n  \"gridArea\",\n  \"gridColumn\",\n  \"gridRow\",\n  \"gridColumnStart\",\n  \"gridColumnEnd\",\n  \"gridRowStart\",\n  \"gridRowEnd\",\n  \"flex\",\n  \"flexDirection\",\n  \"flexGrow\",\n  \"flexShrink\",\n  \"flexBasis\",\n  \"flexWrap\",\n  \"order\",\n  \"justifySelf\",\n  \"justifyItems\",\n  \"justifyContent\",\n  \"alignSelf\",\n  \"alignItems\",\n  \"alignContent\",\n  \"placeItems\",\n  \"placeContent\",\n  \"placeSelf\",\n  \"wrap\",\n  \"gap\",\n  \"rowGap\",\n  \"columnGap\",\n];\n\nconst RESPONSIVE_SIZES_ARR = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\"];\n\n/**\n * Layout CSS variables type excluding responsive properties\n */\ntype LayoutCSSVariables = Omit<LayoutUtilProps, keyof ResponsiveLayout>;\n\n/**\n * Responsive layout configuration type\n */\ntype ResponsiveLayout = {\n  /**\n   * Base layout properties\n   */\n  base?: LayoutUtilProps;\n  /**\n   * Extra small breakpoint layout properties\n   */\n  xs?: LayoutUtilProps;\n  /**\n   * Small breakpoint layout properties\n   */\n  sm?: LayoutUtilProps;\n  /**\n   * Medium breakpoint layout properties\n   */\n  md?: LayoutUtilProps;\n  /**\n   * Large breakpoint layout properties\n   */\n  lg?: LayoutUtilProps;\n  /**\n   * Extra large breakpoint layout properties\n   */\n  xl?: LayoutUtilProps;\n  /**\n   * Extra extra large breakpoint layout properties\n   */\n  xxl?: LayoutUtilProps;\n};\n\n/**\n * Custom hook for managing responsive layout properties and CSS styles.\n *\n * Features:\n * - Separates layout properties from component properties\n * - Provides responsive breakpoint support for all layout properties\n * - Automatically converts gap sizes to CSS tokens\n * - Uses breakpoint cascade for responsive values\n * - Optimized with useMemo for performance\n * - Supports all CSS Grid and Flexbox properties\n * - Handles responsive size inheritance (larger breakpoints inherit from smaller ones)\n * - Returns both layout styles and filtered component props\n *\n * @param props - Object containing layout and component properties\n * @returns Object containing layout styles and filtered component props\n */\nexport function useLayoutPropsUtil<T extends ResponsiveLayout>(\n  props: T,\n): { layoutStyles?: CSSProperties; componentProps: T } {\n  const baseSizeProps = Object.fromEntries(\n    Object.entries(props).filter(([key, _val]) =>\n      LAYOUT_PROP_ARR.includes(key),\n    ),\n  );\n\n  const responsiveSizeProps = Object.fromEntries(\n    Object.entries(props).filter(([key, _val]) =>\n      RESPONSIVE_SIZES_ARR.includes(key),\n    ),\n  );\n\n  const sizeProps: ResponsiveLayout = useMemo(\n    () => ({\n      ...responsiveSizeProps,\n      base: baseSizeProps,\n    }),\n    [baseSizeProps, responsiveSizeProps],\n  );\n\n  const componentProps = Object.fromEntries(\n    Object.entries(props).filter(\n      ([key, _val]) =>\n        !RESPONSIVE_SIZES_ARR.includes(key) && !LAYOUT_PROP_ARR.includes(key),\n    ),\n  );\n\n  const breakpoint = useBreakpoint();\n\n  const getValue = (style: keyof LayoutCSSVariables) => {\n    if (breakpoint?.name === \"xxl\") {\n      const xxlValue =\n        sizeProps.xxl?.[style] ??\n        sizeProps.xl?.[style] ??\n        sizeProps.lg?.[style] ??\n        sizeProps.md?.[style] ??\n        sizeProps.sm?.[style] ??\n        sizeProps.xs?.[style] ??\n        sizeProps.base?.[style];\n\n      if (style.toLowerCase().endsWith(\"gap\")) {\n        return sizeToToken(xxlValue as GapSize);\n      }\n      return xxlValue;\n    }\n    if (breakpoint?.name === \"xl\") {\n      const xlValue =\n        sizeProps.xl?.[style] ??\n        sizeProps.lg?.[style] ??\n        sizeProps.md?.[style] ??\n        sizeProps.sm?.[style] ??\n        sizeProps.xs?.[style] ??\n        sizeProps.base?.[style];\n      if (style.toLowerCase().endsWith(\"gap\")) {\n        return sizeToToken(xlValue as GapSize);\n      }\n      return xlValue;\n    }\n    if (breakpoint?.name === \"lg\") {\n      const lgValue =\n        sizeProps.lg?.[style] ??\n        sizeProps.md?.[style] ??\n        sizeProps.sm?.[style] ??\n        sizeProps.xs?.[style] ??\n        sizeProps.base?.[style];\n\n      if (style.toLowerCase().endsWith(\"gap\")) {\n        return sizeToToken(lgValue as GapSize);\n      }\n      return lgValue;\n    }\n    if (breakpoint?.name === \"md\") {\n      const mdValue =\n        sizeProps.md?.[style] ??\n        sizeProps.sm?.[style] ??\n        sizeProps.xs?.[style] ??\n        sizeProps.base?.[style];\n      if (style.toLowerCase().endsWith(\"gap\")) {\n        return sizeToToken(mdValue as GapSize);\n      }\n      return mdValue;\n    }\n    if (breakpoint?.name === \"sm\") {\n      const smValue =\n        sizeProps.sm?.[style] ??\n        sizeProps.xs?.[style] ??\n        sizeProps.base?.[style];\n      if (style.toLowerCase().endsWith(\"gap\")) {\n        return sizeToToken(smValue as GapSize);\n      }\n      return smValue;\n    }\n    if (breakpoint?.name === \"xs\") {\n      const xsValue = sizeProps.xs?.[style] ?? sizeProps.base?.[style];\n      if (style.toLowerCase().endsWith(\"gap\")) {\n        return sizeToToken(xsValue as GapSize);\n      }\n      return xsValue;\n    }\n\n    if (style.toLowerCase().endsWith(\"gap\")) {\n      return sizeToToken(sizeProps.base?.[style] as GapSize);\n    }\n    return sizeProps.base?.[style];\n  };\n\n  const layoutStyleObject = LAYOUT_PROP_ARR.reduce((o, key) => {\n    const value = getValue(key as keyof LayoutCSSVariables);\n\n    if (typeof value === \"undefined\") return o;\n    return { ...o, [key]: value };\n  }, {});\n\n  return {\n    layoutStyles: layoutStyleObject,\n    componentProps: componentProps as T,\n  };\n}\n"],"names":["core.primitive"],"mappings":";;;;AAqBO,MAAM,WAAA,GAAc,CAAC,KAAA,KAAoB;AAC9C,EAAA,IAAI,OAAO,KAAA,KAAU,WAAA,EAAa,OAAO,MAAA;AACzC,EAAA,IAAI,GAAA,GAAM,KAAA;AACV,EAAA,MAAM,gBAAA,GAAmB,OAAO,KAAK,CAAA;AACrC,EAAA,IAAI,qBAAqB,MAAA,EAAQ;AAC/B,IAAA,GAAA,GACE,CAAA,EAAG,gBAAA,CAAiB,CAAC,CAAA,CAAE,WAAA,EAAa,CAAA,EAAG,gBAAA,CAAiB,KAAA,CAAM,CAAC,CAAC,CAAA,CAAA;AAAA,EACpE;AAEA,EAAA,OAAOA,SAAK,GAAY,CAAA,IAAA,EAAO,GAAG,EAAoB,CAAA,EAAG,KAAA;AAC3D;;AC1BA,MAAM,eAAA,GAAkB;AAAA,EACtB,qBAAA;AAAA,EACA,kBAAA;AAAA,EACA,mBAAA;AAAA,EACA,iBAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,eAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA;AAEA,MAAM,uBAAuB,CAAC,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,KAAK,CAAA;AAyD1D,SAAS,mBACd,KAAA,EACqD;AACrD,EAAA,MAAM,gBAAgB,MAAA,CAAO,WAAA;AAAA,IAC3B,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAA,CAAE,MAAA;AAAA,MAAO,CAAC,CAAC,GAAA,EAAK,IAAI,CAAA,KACtC,eAAA,CAAgB,SAAS,GAAG;AAAA;AAC9B,GACF;AAEA,EAAA,MAAM,sBAAsB,MAAA,CAAO,WAAA;AAAA,IACjC,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAA,CAAE,MAAA;AAAA,MAAO,CAAC,CAAC,GAAA,EAAK,IAAI,CAAA,KACtC,oBAAA,CAAqB,SAAS,GAAG;AAAA;AACnC,GACF;AAEA,EAAA,MAAM,SAAA,GAA8B,OAAA;AAAA,IAClC,OAAO;AAAA,MACL,GAAG,mBAAA;AAAA,MACH,IAAA,EAAM;AAAA,KACR,CAAA;AAAA,IACA,CAAC,eAAe,mBAAmB;AAAA,GACrC;AAEA,EAAA,MAAM,iBAAiB,MAAA,CAAO,WAAA;AAAA,IAC5B,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAA,CAAE,MAAA;AAAA,MACpB,CAAC,CAAC,GAAA,EAAK,IAAI,CAAA,KACT,CAAC,oBAAA,CAAqB,QAAA,CAAS,GAAG,CAAA,IAAK,CAAC,eAAA,CAAgB,SAAS,GAAG;AAAA;AACxE,GACF;AAEA,EAAA,MAAM,aAAa,aAAA,EAAc;AAEjC,EAAA,MAAM,QAAA,GAAW,CAAC,KAAA,KAAoC;AACpD,IAAA,IAAI,UAAA,EAAY,SAAS,KAAA,EAAO;AAC9B,MAAA,MAAM,QAAA,GACJ,SAAA,CAAU,GAAA,GAAM,KAAK,CAAA,IACrB,SAAA,CAAU,EAAA,GAAK,KAAK,CAAA,IACpB,SAAA,CAAU,EAAA,GAAK,KAAK,CAAA,IACpB,SAAA,CAAU,EAAA,GAAK,KAAK,CAAA,IACpB,SAAA,CAAU,EAAA,GAAK,KAAK,CAAA,IACpB,SAAA,CAAU,EAAA,GAAK,KAAK,CAAA,IACpB,SAAA,CAAU,IAAA,GAAO,KAAK,CAAA;AAExB,MAAA,IAAI,KAAA,CAAM,WAAA,EAAY,CAAE,QAAA,CAAS,KAAK,CAAA,EAAG;AACvC,QAAA,OAAO,YAAY,QAAmB,CAAA;AAAA,MACxC;AACA,MAAA,OAAO,QAAA;AAAA,IACT;AACA,IAAA,IAAI,UAAA,EAAY,SAAS,IAAA,EAAM;AAC7B,MAAA,MAAM,OAAA,GACJ,UAAU,EAAA,GAAK,KAAK,KACpB,SAAA,CAAU,EAAA,GAAK,KAAK,CAAA,IACpB,SAAA,CAAU,EAAA,GAAK,KAAK,CAAA,IACpB,SAAA,CAAU,EAAA,GAAK,KAAK,CAAA,IACpB,SAAA,CAAU,KAAK,KAAK,CAAA,IACpB,SAAA,CAAU,IAAA,GAAO,KAAK,CAAA;AACxB,MAAA,IAAI,KAAA,CAAM,WAAA,EAAY,CAAE,QAAA,CAAS,KAAK,CAAA,EAAG;AACvC,QAAA,OAAO,YAAY,OAAkB,CAAA;AAAA,MACvC;AACA,MAAA,OAAO,OAAA;AAAA,IACT;AACA,IAAA,IAAI,UAAA,EAAY,SAAS,IAAA,EAAM;AAC7B,MAAA,MAAM,UACJ,SAAA,CAAU,EAAA,GAAK,KAAK,CAAA,IACpB,SAAA,CAAU,KAAK,KAAK,CAAA,IACpB,UAAU,EAAA,GAAK,KAAK,KACpB,SAAA,CAAU,EAAA,GAAK,KAAK,CAAA,IACpB,SAAA,CAAU,OAAO,KAAK,CAAA;AAExB,MAAA,IAAI,KAAA,CAAM,WAAA,EAAY,CAAE,QAAA,CAAS,KAAK,CAAA,EAAG;AACvC,QAAA,OAAO,YAAY,OAAkB,CAAA;AAAA,MACvC;AACA,MAAA,OAAO,OAAA;AAAA,IACT;AACA,IAAA,IAAI,UAAA,EAAY,SAAS,IAAA,EAAM;AAC7B,MAAA,MAAM,OAAA,GACJ,SAAA,CAAU,EAAA,GAAK,KAAK,KACpB,SAAA,CAAU,EAAA,GAAK,KAAK,CAAA,IACpB,UAAU,EAAA,GAAK,KAAK,CAAA,IACpB,SAAA,CAAU,OAAO,KAAK,CAAA;AACxB,MAAA,IAAI,KAAA,CAAM,WAAA,EAAY,CAAE,QAAA,CAAS,KAAK,CAAA,EAAG;AACvC,QAAA,OAAO,YAAY,OAAkB,CAAA;AAAA,MACvC;AACA,MAAA,OAAO,OAAA;AAAA,IACT;AACA,IAAA,IAAI,UAAA,EAAY,SAAS,IAAA,EAAM;AAC7B,MAAA,MAAM,OAAA,GACJ,SAAA,CAAU,EAAA,GAAK,KAAK,CAAA,IACpB,SAAA,CAAU,EAAA,GAAK,KAAK,CAAA,IACpB,SAAA,CAAU,IAAA,GAAO,KAAK,CAAA;AACxB,MAAA,IAAI,KAAA,CAAM,WAAA,EAAY,CAAE,QAAA,CAAS,KAAK,CAAA,EAAG;AACvC,QAAA,OAAO,YAAY,OAAkB,CAAA;AAAA,MACvC;AACA,MAAA,OAAO,OAAA;AAAA,IACT;AACA,IAAA,IAAI,UAAA,EAAY,SAAS,IAAA,EAAM;AAC7B,MAAA,MAAM,UAAU,SAAA,CAAU,EAAA,GAAK,KAAK,CAAA,IAAK,SAAA,CAAU,OAAO,KAAK,CAAA;AAC/D,MAAA,IAAI,KAAA,CAAM,WAAA,EAAY,CAAE,QAAA,CAAS,KAAK,CAAA,EAAG;AACvC,QAAA,OAAO,YAAY,OAAkB,CAAA;AAAA,MACvC;AACA,MAAA,OAAO,OAAA;AAAA,IACT;AAEA,IAAA,IAAI,KAAA,CAAM,WAAA,EAAY,CAAE,QAAA,CAAS,KAAK,CAAA,EAAG;AACvC,MAAA,OAAO,WAAA,CAAY,SAAA,CAAU,IAAA,GAAO,KAAK,CAAY,CAAA;AAAA,IACvD;AACA,IAAA,OAAO,SAAA,CAAU,OAAO,KAAK,CAAA;AAAA,EAC/B,CAAA;AAEA,EAAA,MAAM,iBAAA,GAAoB,eAAA,CAAgB,MAAA,CAAO,CAAC,GAAG,GAAA,KAAQ;AAC3D,IAAA,MAAM,KAAA,GAAQ,SAAS,GAA+B,CAAA;AAEtD,IAAA,IAAI,OAAO,KAAA,KAAU,WAAA,EAAa,OAAO,CAAA;AACzC,IAAA,OAAO,EAAE,GAAG,CAAA,EAAG,CAAC,GAAG,GAAG,KAAA,EAAM;AAAA,EAC9B,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO;AAAA,IACL,YAAA,EAAc,iBAAA;AAAA,IACd;AAAA,GACF;AACF;;;;"}

package/dist/{useOnClickOutside-C5AZE_I6.js → useOnClickOutside-BDzuUjmY.js}

@@ -64,11 +64,40 @@ const useOpenCloseTransitionStates = (openProp, options = {
   };
 };
 
+const WINDOW_PROPERTY_LAYER_STACK = "__ANVIL_LAYER_MANAGER__";
+const getGlobalLayers = () => {
+  if (typeof window === "undefined") {
+    return [];
+  }
+  if (!window[WINDOW_PROPERTY_LAYER_STACK]) {
+    window[WINDOW_PROPERTY_LAYER_STACK] = [];
+  }
+  return window[WINDOW_PROPERTY_LAYER_STACK];
+};
+const registerLayer = (id) => {
+  const layers = getGlobalLayers();
+  if (!layers.includes(id)) {
+    layers.push(id);
+  }
+};
+const unregisterLayer = (id) => {
+  const layers = getGlobalLayers();
+  const index = layers.indexOf(id);
+  if (index !== -1) {
+    layers.splice(index, 1);
+  }
+};
+const isTopLayer = (id) => {
+  const layers = getGlobalLayers();
+  return layers[layers.length - 1] === id;
+};
+
 const useOnClickOutside = ({
   onOutsidePress,
   targets,
   onClose,
-  disable
+  disable,
+  layerId
 }) => {
   useEffect(() => {
     if (disable || typeof document === "undefined") return;
@@ -83,8 +112,10 @@ const useOnClickOutside = ({
         }
       }
       if (!isTarget) {
-        onOutsidePress?.(e);
-        isClosable = true;
+        if (!layerId || isTopLayer(layerId)) {
+          onOutsidePress?.(e);
+          isClosable = true;
+        }
       }
     };
     const onMouseUpHandler = (e) => {
@@ -98,7 +129,9 @@ const useOnClickOutside = ({
         }
       }
       if (!isTarget) {
-        onClose?.();
+        if (!layerId || isTopLayer(layerId)) {
+          onClose?.();
+        }
       }
     };
     document.addEventListener("mousedown", onMouseDownHandler);
@@ -107,8 +140,8 @@ const useOnClickOutside = ({
       document.removeEventListener("mousedown", onMouseDownHandler);
       document.removeEventListener("mouseup", onMouseUpHandler);
     };
-  }, [onClose, onOutsidePress, targets, disable]);
+  }, [onClose, onOutsidePress, targets, disable, layerId]);
 };
 
-export { useOnClickOutside as a, useOpenCloseTransitionStates as u };
-//# sourceMappingURL=useOnClickOutside-C5AZE_I6.js.map
+export { unregisterLayer as a, useOnClickOutside as b, registerLayer as r, useOpenCloseTransitionStates as u };
+//# sourceMappingURL=useOnClickOutside-BDzuUjmY.js.map

package/dist/useOnClickOutside-BDzuUjmY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnClickOutside-BDzuUjmY.js","sources":["../src/internal/hooks/useOpenCloseTransitionStates/useOpenCloseTransitionStates.ts","../src/internal/utils/layerManager.ts","../src/internal/hooks/useOnClickOutside/useOnClickOutside.ts"],"sourcesContent":["import { useEffect, useState, useRef, useCallback } from \"react\";\n\n/**\n * Possible states for open/close transitions\n */\nexport type OpenCloseTransitionStates =\n  | \"opening\"\n  | \"open\"\n  | \"closing\"\n  | \"closed\";\n\n/**\n * Effects configuration for open/close transition states\n * @property {() => void} [onOpenAnimationStart] - Callback when opening animation starts\n * @property {() => void} [onCloseAnimationStart] - Callback when closing animation starts\n * @property {() => void} [onOpenAnimationComplete] - Callback when opening animation completes\n * @property {() => void} [onCloseAnimationComplete] - Callback when closing animation completes\n * @property {number | (() => number)} [durationMs] - Duration of the animation in milliseconds (or a function that returns the duration)\n */\nexport type OpenCloseTransitionStateEffects = {\n  /**\n   * Callback when opening animation starts\n   */\n  onOpenAnimationStart?: () => void;\n  /**\n   * Callback when closing animation starts\n   */\n  onCloseAnimationStart?: () => void;\n  /**\n   * Callback when opening animation completes\n   */\n  onOpenAnimationComplete?: () => void;\n  /**\n   * Callback when closing animation completes\n   */\n  onCloseAnimationComplete?: () => void;\n};\n\nexport type OpenCloseTransitionState = {\n  state: OpenCloseTransitionStates;\n  beginClosing: () => void;\n  isOpenOrOpening: boolean;\n  isClosedOrClosing: boolean;\n};\n\nexport type OpenCloseTransitionStateOptions = {\n  durationMs: number | (() => number);\n  onOpenAnimationStart?: () => void;\n  onCloseAnimationStart?: () => void;\n  onOpenAnimationComplete?: () => void;\n  onCloseAnimationComplete?: () => void;\n};\n\n/**\n * Custom hook for managing open/close transition states and animations.\n *\n * @param openProp - The open prop controlling visibility\n * @param options - Additional, optional options including callbacks for animation start, complete, and initialization\n * @returns Object containing state, control functions, and utility flags\n */\nexport const useOpenCloseTransitionStates = (\n  openProp: boolean | undefined,\n  options: OpenCloseTransitionStateOptions = {\n    durationMs: 0,\n  },\n): OpenCloseTransitionState => {\n  const {\n    onOpenAnimationStart,\n    onCloseAnimationStart,\n    onOpenAnimationComplete,\n    onCloseAnimationComplete,\n    durationMs,\n  } = options;\n  const prevOpenProp = useRef<boolean | undefined>(openProp);\n  const [state, setState] = useState<OpenCloseTransitionStates>(\n    openProp ? \"open\" : \"closed\",\n  );\n\n  // Handle open/close prop changes\n  useEffect(() => {\n    if (prevOpenProp.current && !openProp) {\n      // previously open, now closed\n      setState(\"closing\");\n    } else if (!prevOpenProp.current && openProp) {\n      // previously closed, now open\n      setState(\"opening\");\n    } else {\n      // Note: Using \"opening\" here catches the case where the element is initially open, allowing callbacks and animations to run.\n      setState(openProp ? \"opening\" : \"closed\");\n    }\n    prevOpenProp.current = openProp;\n  }, [openProp]);\n\n  // Handle opening/closing animations\n  useEffect(() => {\n    if (!durationMs) return;\n    if (state === \"open\" || state === \"closed\") return;\n    if (state === \"opening\") {\n      onOpenAnimationStart?.();\n    } else if (state === \"closing\") {\n      onCloseAnimationStart?.();\n    }\n    const d: number =\n      typeof durationMs === \"function\" ? durationMs() : durationMs;\n    const timeout = setTimeout(() => {\n      if (state === \"opening\") {\n        setState(\"open\");\n        onOpenAnimationComplete?.();\n      } else if (state === \"closing\") {\n        setState(\"closed\");\n        onCloseAnimationComplete?.();\n      }\n    }, d);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [\n    state,\n    onOpenAnimationComplete,\n    onCloseAnimationComplete,\n    onOpenAnimationStart,\n    onCloseAnimationStart,\n    durationMs,\n  ]);\n\n  const beginClosing = useCallback(() => {\n    setState(\"closing\");\n  }, []);\n\n  return {\n    state,\n    beginClosing,\n    isOpenOrOpening: state === \"open\" || state === \"opening\",\n    isClosedOrClosing: state === \"closed\" || state === \"closing\",\n  };\n};\n","/**\n * Global layer manager for tracking overlay component stacking order.\n * Uses window-level state to support cross-bundle communication (e.g., MFEs).\n *\n * When multiple Dialog/Drawer components are open, only the topmost layer\n * should respond to outside click events. This manager tracks the z-order\n * to enable that behavior.\n */\n\nconst WINDOW_PROPERTY_LAYER_STACK = \"__ANVIL_LAYER_MANAGER__\" as const;\n\n// Declare global window property (matches DndSort pattern)\ndeclare global {\n  interface Window {\n    [WINDOW_PROPERTY_LAYER_STACK]?: string[];\n  }\n}\n\n/**\n * Get or initialize the global layer stack on the window object.\n * This ensures all instances of the design system share the same layer stack,\n * even across different bundles (e.g., base app + MFEs).\n *\n * @returns The global layers array\n */\nconst getGlobalLayers = (): string[] => {\n  // SSR safety check (matches usePrefersColorScheme pattern)\n  if (typeof window === \"undefined\") {\n    return [];\n  }\n\n  if (!window[WINDOW_PROPERTY_LAYER_STACK]) {\n    window[WINDOW_PROPERTY_LAYER_STACK] = [];\n  }\n\n  return window[WINDOW_PROPERTY_LAYER_STACK];\n};\n\n/**\n * Register a new layer in the stack.\n * If the layer is already registered, this is a no-op.\n *\n * @param id - Unique identifier for the layer\n */\nexport const registerLayer = (id: string): void => {\n  const layers = getGlobalLayers();\n  if (!layers.includes(id)) {\n    layers.push(id);\n  }\n};\n\n/**\n * Unregister a layer from the stack.\n * If the layer is not found, this is a no-op.\n *\n * @param id - Unique identifier for the layer\n */\nexport const unregisterLayer = (id: string): void => {\n  const layers = getGlobalLayers();\n  const index = layers.indexOf(id);\n  if (index !== -1) {\n    layers.splice(index, 1);\n  }\n};\n\n/**\n * Check if a layer is the topmost layer in the stack.\n *\n * @param id - Unique identifier for the layer\n * @returns True if the layer is on top, false otherwise\n */\nexport const isTopLayer = (id: string): boolean => {\n  const layers = getGlobalLayers();\n  return layers[layers.length - 1] === id;\n};\n\n/**\n * Get all registered layers in order (bottom to top).\n * Returns a readonly copy for debugging purposes.\n *\n * @returns Readonly array of layer IDs\n */\nexport const getLayers = (): readonly string[] => {\n  const layers = getGlobalLayers();\n  return [...layers];\n};\n","import { useEffect } from \"react\";\nimport { isTopLayer } from \"../../utils\";\n\n/**\n * Props for the useOnClickOutside hook\n */\ntype UseOnClickOutsideProps = {\n  /**\n   * Callback when clicking outside targets\n   */\n  onOutsidePress?: (e: globalThis.MouseEvent) => void;\n  /**\n   * Callback when closing (after outside press)\n   */\n  onClose?: () => void;\n  /**\n   * Array of target elements to monitor\n   */\n  targets: (HTMLElement | undefined)[];\n  /**\n   * Whether to disable the useOnClickOutside hook\n   */\n  disable?: boolean;\n  /**\n   * Optional layer ID for stacking management. When provided, callbacks will only\n   * fire if this layer is the topmost layer in the stack.\n   */\n  layerId?: string;\n};\n\n/**\n * Custom hook for detecting clicks outside of specified target elements.\n *\n * Features:\n * - Detects clicks outside of multiple target elements\n * - Supports both mousedown and mouseup event handling\n * - Provides separate callbacks for outside press and close actions\n * - Handles SSR environments gracefully\n * - Automatically cleans up event listeners\n * - Uses composedPath for accurate event target detection\n * - Supports optional callbacks for flexible usage\n *\n * @param props - Configuration object containing targets and optional callbacks\n * @returns void\n */\nexport const useOnClickOutside = ({\n  onOutsidePress,\n  targets,\n  onClose,\n  disable,\n  layerId,\n}: UseOnClickOutsideProps) => {\n  useEffect(() => {\n    if (disable || typeof document === \"undefined\") return;\n\n    let isClosable = false;\n    const onMouseDownHandler = (e: globalThis.MouseEvent) => {\n      let isTarget = false;\n      const path = e.composedPath();\n      for (const el of targets) {\n        if (el && path.includes(el)) {\n          isTarget = true;\n          break;\n        }\n      }\n\n      if (!isTarget) {\n        // Only trigger if no layerId OR if this is the top layer\n        if (!layerId || isTopLayer(layerId)) {\n          onOutsidePress?.(e);\n          isClosable = true;\n        }\n      }\n    };\n    const onMouseUpHandler = (e: globalThis.MouseEvent) => {\n      if (!isClosable) return;\n      let isTarget = false;\n      const path = e.composedPath();\n      for (const el of targets) {\n        if (el && path.includes(el)) {\n          isTarget = true;\n          break;\n        }\n      }\n      if (!isTarget) {\n        // Only close if no layerId OR if this is the top layer\n        if (!layerId || isTopLayer(layerId)) {\n          onClose?.();\n        }\n      }\n    };\n\n    document.addEventListener(\"mousedown\", onMouseDownHandler);\n    document.addEventListener(\"mouseup\", onMouseUpHandler);\n    return () => {\n      document.removeEventListener(\"mousedown\", onMouseDownHandler);\n      document.removeEventListener(\"mouseup\", onMouseUpHandler);\n    };\n  }, [onClose, onOutsidePress, targets, disable, layerId]);\n};\n"],"names":[],"mappings":"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"}