@servicetitan/anvil2 1.50.1 → 1.50.2

package/dist/useOnClickOutside-BDzuUjmY.js.map

@@ -1 +0,0 @@
-{"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":";;AA4DO,MAAM,4BAAA,GAA+B,CAC1C,QAAA,EACA,OAAA,GAA2C;AAAA,EACzC,UAAA,EAAY;AACd,CAAA,KAC6B;AAC7B,EAAA,MAAM;AAAA,IACJ,oBAAA;AAAA,IACA,qBAAA;AAAA,IACA,uBAAA;AAAA,IACA,wBAAA;AAAA,IACA;AAAA,GACF,GAAI,OAAA;AACJ,EAAA,MAAM,YAAA,GAAe,OAA4B,QAAQ,CAAA;AACzD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAA;AAAA,IACxB,WAAW,MAAA,GAAS;AAAA,GACtB;AAGA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAA,CAAa,OAAA,IAAW,CAAC,QAAA,EAAU;AAErC,MAAA,QAAA,CAAS,SAAS,CAAA;AAAA,IACpB,CAAA,MAAA,IAAW,CAAC,YAAA,CAAa,OAAA,IAAW,QAAA,EAAU;AAE5C,MAAA,QAAA,CAAS,SAAS,CAAA;AAAA,IACpB,CAAA,MAAO;AAEL,MAAA,QAAA,CAAS,QAAA,GAAW,YAAY,QAAQ,CAAA;AAAA,IAC1C;AACA,IAAA,YAAA,CAAa,OAAA,GAAU,QAAA;AAAA,EACzB,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAGb,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,UAAA,EAAY;AACjB,IAAA,IAAI,KAAA,KAAU,MAAA,IAAU,KAAA,KAAU,QAAA,EAAU;AAC5C,IAAA,IAAI,UAAU,SAAA,EAAW;AACvB,MAAA,oBAAA,IAAuB;AAAA,IACzB,CAAA,MAAA,IAAW,UAAU,SAAA,EAAW;AAC9B,MAAA,qBAAA,IAAwB;AAAA,IAC1B;AACA,IAAA,MAAM,CAAA,GACJ,OAAO,UAAA,KAAe,UAAA,GAAa,YAAW,GAAI,UAAA;AACpD,IAAA,MAAM,OAAA,GAAU,WAAW,MAAM;AAC/B,MAAA,IAAI,UAAU,SAAA,EAAW;AACvB,QAAA,QAAA,CAAS,MAAM,CAAA;AACf,QAAA,uBAAA,IAA0B;AAAA,MAC5B,CAAA,MAAA,IAAW,UAAU,SAAA,EAAW;AAC9B,QAAA,QAAA,CAAS,QAAQ,CAAA;AACjB,QAAA,wBAAA,IAA2B;AAAA,MAC7B;AAAA,IACF,GAAG,CAAC,CAAA;AAEJ,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,OAAO,CAAA;AAAA,IACtB,CAAA;AAAA,EACF,CAAA,EAAG;AAAA,IACD,KAAA;AAAA,IACA,uBAAA;AAAA,IACA,wBAAA;AAAA,IACA,oBAAA;AAAA,IACA,qBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YAAA,GAAe,YAAY,MAAM;AACrC,IAAA,QAAA,CAAS,SAAS,CAAA;AAAA,EACpB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO;AAAA,IACL,KAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA,EAAiB,KAAA,KAAU,MAAA,IAAU,KAAA,KAAU,SAAA;AAAA,IAC/C,iBAAA,EAAmB,KAAA,KAAU,QAAA,IAAY,KAAA,KAAU;AAAA,GACrD;AACF;;AC/HA,MAAM,2BAAA,GAA8B,yBAAA;AAgBpC,MAAM,kBAAkB,MAAgB;AAEtC,EAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,IAAA,OAAO,EAAC;AAAA,EACV;AAEA,EAAA,IAAI,CAAC,MAAA,CAAO,2BAA2B,CAAA,EAAG;AACxC,IAAA,MAAA,CAAO,2BAA2B,IAAI,EAAC;AAAA,EACzC;AAEA,EAAA,OAAO,OAAO,2BAA2B,CAAA;AAC3C,CAAA;AAQO,MAAM,aAAA,GAAgB,CAAC,EAAA,KAAqB;AACjD,EAAA,MAAM,SAAS,eAAA,EAAgB;AAC/B,EAAA,IAAI,CAAC,MAAA,CAAO,QAAA,CAAS,EAAE,CAAA,EAAG;AACxB,IAAA,MAAA,CAAO,KAAK,EAAE,CAAA;AAAA,EAChB;AACF;AAQO,MAAM,eAAA,GAAkB,CAAC,EAAA,KAAqB;AACnD,EAAA,MAAM,SAAS,eAAA,EAAgB;AAC/B,EAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,OAAA,CAAQ,EAAE,CAAA;AAC/B,EAAA,IAAI,UAAU,EAAA,EAAI;AAChB,IAAA,MAAA,CAAO,MAAA,CAAO,OAAO,CAAC,CAAA;AAAA,EACxB;AACF;AAQO,MAAM,UAAA,GAAa,CAAC,EAAA,KAAwB;AACjD,EAAA,MAAM,SAAS,eAAA,EAAgB;AAC/B,EAAA,OAAO,MAAA,CAAO,MAAA,CAAO,MAAA,GAAS,CAAC,CAAA,KAAM,EAAA;AACvC,CAAA;;AC7BO,MAAM,oBAAoB,CAAC;AAAA,EAChC,cAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAA8B;AAC5B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,OAAA,IAAW,OAAO,QAAA,KAAa,WAAA,EAAa;AAEhD,IAAA,IAAI,UAAA,GAAa,KAAA;AACjB,IAAA,MAAM,kBAAA,GAAqB,CAAC,CAAA,KAA6B;AACvD,MAAA,IAAI,QAAA,GAAW,KAAA;AACf,MAAA,MAAM,IAAA,GAAO,EAAE,YAAA,EAAa;AAC5B,MAAA,KAAA,MAAW,MAAM,OAAA,EAAS;AACxB,QAAA,IAAI,EAAA,IAAM,IAAA,CAAK,QAAA,CAAS,EAAE,CAAA,EAAG;AAC3B,UAAA,QAAA,GAAW,IAAA;AACX,UAAA;AAAA,QACF;AAAA,MACF;AAEA,MAAA,IAAI,CAAC,QAAA,EAAU;AAEb,QAAA,IAAI,CAAC,OAAA,IAAW,UAAA,CAAW,OAAO,CAAA,EAAG;AACnC,UAAA,cAAA,GAAiB,CAAC,CAAA;AAClB,UAAA,UAAA,GAAa,IAAA;AAAA,QACf;AAAA,MACF;AAAA,IACF,CAAA;AACA,IAAA,MAAM,gBAAA,GAAmB,CAAC,CAAA,KAA6B;AACrD,MAAA,IAAI,CAAC,UAAA,EAAY;AACjB,MAAA,IAAI,QAAA,GAAW,KAAA;AACf,MAAA,MAAM,IAAA,GAAO,EAAE,YAAA,EAAa;AAC5B,MAAA,KAAA,MAAW,MAAM,OAAA,EAAS;AACxB,QAAA,IAAI,EAAA,IAAM,IAAA,CAAK,QAAA,CAAS,EAAE,CAAA,EAAG;AAC3B,UAAA,QAAA,GAAW,IAAA;AACX,UAAA;AAAA,QACF;AAAA,MACF;AACA,MAAA,IAAI,CAAC,QAAA,EAAU;AAEb,QAAA,IAAI,CAAC,OAAA,IAAW,UAAA,CAAW,OAAO,CAAA,EAAG;AACnC,UAAA,OAAA,IAAU;AAAA,QACZ;AAAA,MACF;AAAA,IACF,CAAA;AAEA,IAAA,QAAA,CAAS,gBAAA,CAAiB,aAAa,kBAAkB,CAAA;AACzD,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,gBAAgB,CAAA;AACrD,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,aAAa,kBAAkB,CAAA;AAC5D,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,gBAAgB,CAAA;AAAA,IAC1D,CAAA;AAAA,EACF,GAAG,CAAC,OAAA,EAAS,gBAAgB,OAAA,EAAS,OAAA,EAAS,OAAO,CAAC,CAAA;AACzD;;;;"}