@aloudata/aloudata-design 3.1.2 → 3.1.3

package/dist/Tooltip/index.js

@@ -1,5 +1,5 @@
 import { cn } from "../lib/utils.js";
-import { useFloatingPopupZIndex } from "../_utils/floatingLayer.js";
+import { useFloatingTooltipZIndex } from "../_utils/floatingLayer.js";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
@@ -105,7 +105,7 @@ function ClickTooltip({ children, title, open, onOpenChange, placement = "top",
 function Tooltip(props) {
 	const { children, title, content, open, onOpenChange, placement = "top", mouseEnterDelay = 0, mouseLeaveDelay = 0, overlayClassName, trigger, getPopupContainer, getTooltipContainer, zIndex } = props;
 	const { triggerRef, container } = usePortalContainer(getPopupContainer, getTooltipContainer);
-	const resolvedZIndex = useFloatingPopupZIndex(zIndex);
+	const resolvedZIndex = useFloatingTooltipZIndex(zIndex);
 	const tooltipIdBase = React.useId().replace(/:/g, "");
 	const mergedTitle = title ?? content;
 	if (!mergedTitle && mergedTitle !== 0) return /* @__PURE__ */ jsx(Fragment, { children });

package/dist/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport React from 'react';\nimport { useFloatingPopupZIndex } from '../_utils/floatingLayer';\nimport { cn } from '../lib/utils';\n\nexport type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';\n\nexport interface ITooltipProps {\n  title?: React.ReactNode;\n  /** Alias for title, for Popover-style usage */\n  content?: React.ReactNode;\n  destroyTooltipOnHide?: boolean;\n  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;\n  mouseEnterDelay?: number;\n  mouseLeaveDelay?: number;\n  placement?:\n    | 'top'\n    | 'left'\n    | 'right'\n    | 'bottom'\n    | 'topLeft'\n    | 'topRight'\n    | 'bottomLeft'\n    | 'bottomRight'\n    | 'leftTop'\n    | 'leftBottom'\n    | 'rightTop'\n    | 'rightBottom';\n  trigger?: ActionType | ActionType[];\n  zIndex?: number;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  overlayClassName?: string;\n  /** Custom class for the root element */\n  rootClassName?: string;\n  getTooltipContainer?: (node: HTMLElement) => HTMLElement;\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst sideMap: Record<string, 'top' | 'bottom' | 'left' | 'right'> = {\n  top: 'top',\n  bottom: 'bottom',\n  left: 'left',\n  right: 'right',\n  topLeft: 'top',\n  topRight: 'top',\n  bottomLeft: 'bottom',\n  bottomRight: 'bottom',\n  leftTop: 'left',\n  leftBottom: 'left',\n  rightTop: 'right',\n  rightBottom: 'right',\n};\n\nconst alignMap: Record<string, 'start' | 'end' | 'center'> = {\n  topLeft: 'start',\n  topRight: 'end',\n  bottomLeft: 'start',\n  bottomRight: 'end',\n  leftTop: 'start',\n  leftBottom: 'end',\n  rightTop: 'start',\n  rightBottom: 'end',\n};\n\nfunction isClickTrigger(trigger?: ActionType | ActionType[]): boolean {\n  if (!trigger) return false;\n  if (Array.isArray(trigger)) return trigger.includes('click');\n  return trigger === 'click';\n}\n\nfunction isTriggerDisabled(trigger?: ActionType | ActionType[]): boolean {\n  return Array.isArray(trigger) && trigger.length === 0;\n}\n\nconst contentClasses =\n  'ald-tooltip-overlay tw-z-50 tw-min-h-[28px] tw-rounded-r-50 tw-px-2 tw-py-1.5 tw-text-xs tw-leading-4 tw-bg-[var(--background-inverted)] tw-text-[var(--content-inverted-primary)] tw-animate-in tw-fade-in-0 tw-zoom-in-95';\n\nfunction usePortalContainer(\n  getPopupContainer?: (node: HTMLElement) => HTMLElement,\n  getTooltipContainer?: (node: HTMLElement) => HTMLElement,\n) {\n  const triggerRef = React.useRef<HTMLElement | null>(null);\n  const [container, setContainer] = React.useState<HTMLElement | undefined>(\n    undefined,\n  );\n\n  React.useEffect(() => {\n    const getter = getPopupContainer || getTooltipContainer;\n    if (getter && triggerRef.current) {\n      setContainer(getter(triggerRef.current));\n    }\n  }, [getPopupContainer, getTooltipContainer]);\n\n  return { triggerRef, container };\n}\n\nfunction ClickTooltip({\n  children,\n  title,\n  open,\n  onOpenChange,\n  placement = 'top',\n  overlayClassName,\n  zIndex,\n  container,\n  triggerRef,\n}: Pick<\n  ITooltipProps,\n  | 'children'\n  | 'title'\n  | 'open'\n  | 'onOpenChange'\n  | 'placement'\n  | 'overlayClassName'\n  | 'zIndex'\n> & {\n  container?: HTMLElement;\n  triggerRef: React.RefObject<HTMLElement | null>;\n}) {\n  const side = sideMap[placement] || 'top';\n  const align = alignMap[placement] || 'center';\n  const idBase = React.useId().replace(/:/g, '');\n  const contentId = `ald-popover-tooltip-${idBase}`;\n  const titleId = `ald-popover-tooltip-title-${idBase}`;\n  const contentRef = React.useRef<HTMLDivElement>(null);\n\n  const trigger = React.isValidElement(children) ? (\n    React.cloneElement(children as React.ReactElement, {\n      ref: triggerRef,\n      'aria-controls': contentId,\n      'aria-haspopup': false,\n    })\n  ) : (\n    <span\n      ref={triggerRef as React.RefObject<HTMLSpanElement>}\n      aria-controls={contentId}\n      aria-haspopup={false}\n    >\n      {children}\n    </span>\n  );\n\n  return (\n    <PopoverPrimitive.Root\n      open={open}\n      onOpenChange={onOpenChange}\n      modal={false}\n    >\n      <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>\n      <PopoverPrimitive.Portal container={container}>\n        <PopoverPrimitive.Content\n          id={contentId}\n          ref={contentRef}\n          role=\"region\"\n          aria-labelledby={title ? titleId : undefined}\n          side={side}\n          align={align}\n          sideOffset={4}\n          className={cn(contentClasses, overlayClassName)}\n          style={{ zIndex }}\n          onOpenAutoFocus={(event) => {\n            event.preventDefault();\n            contentRef.current\n              ?.querySelector<HTMLElement>(\n                'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])',\n              )\n              ?.focus();\n          }}\n          onCloseAutoFocus={(event) => {\n            event.preventDefault();\n            if (triggerRef.current?.isConnected) {\n              triggerRef.current.focus();\n            }\n          }}\n        >\n          {title && <div id={titleId}>{title}</div>}\n          <PopoverPrimitive.Arrow className=\"tw-fill-[var(--background-inverted)]\" />\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    </PopoverPrimitive.Root>\n  );\n}\n\nexport default function Tooltip(props: ITooltipProps) {\n  const {\n    children,\n    title,\n    content,\n    open,\n    onOpenChange,\n    placement = 'top',\n    mouseEnterDelay = 0,\n    mouseLeaveDelay = 0,\n    overlayClassName,\n    trigger,\n    getPopupContainer,\n    getTooltipContainer,\n    zIndex,\n  } = props;\n\n  const { triggerRef, container } = usePortalContainer(\n    getPopupContainer,\n    getTooltipContainer,\n  );\n  const resolvedZIndex = useFloatingPopupZIndex(zIndex);\n  const tooltipIdBase = React.useId().replace(/:/g, '');\n  const mergedTitle = title ?? content;\n\n  if (!mergedTitle && mergedTitle !== 0) {\n    return <>{children}</>;\n  }\n\n  if (isTriggerDisabled(trigger)) {\n    return <>{children}</>;\n  }\n\n  if (isClickTrigger(trigger)) {\n    return (\n      <ClickTooltip\n        title={mergedTitle}\n        open={open}\n        onOpenChange={onOpenChange}\n        placement={placement}\n        overlayClassName={overlayClassName}\n        zIndex={resolvedZIndex}\n        container={container}\n        triggerRef={triggerRef}\n      >\n        {children}\n      </ClickTooltip>\n    );\n  }\n\n  const side = sideMap[placement] || 'top';\n  const align = alignMap[placement] || 'center';\n\n  return (\n    <TooltipPrimitive.Provider\n      delayDuration={mouseEnterDelay * 1000}\n      skipDelayDuration={mouseLeaveDelay * 1000}\n    >\n      <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange}>\n        <TooltipPrimitive.Trigger asChild>\n          {React.isValidElement(children) ? (\n            React.cloneElement(children as React.ReactElement, {\n              ref: triggerRef,\n            })\n          ) : (\n            <span ref={triggerRef as React.RefObject<HTMLSpanElement>}>\n              {children}\n            </span>\n          )}\n        </TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={container}>\n          <TooltipPrimitive.Content\n            id={`ald-tooltip-${tooltipIdBase}`}\n            side={side}\n            align={align}\n            sideOffset={4}\n            className={cn(contentClasses, overlayClassName)}\n            style={{ zIndex: resolvedZIndex }}\n          >\n            {mergedTitle}\n            <TooltipPrimitive.Arrow className=\"tw-fill-[var(--background-inverted)]\" />\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport React from 'react';\nimport { useFloatingTooltipZIndex } from '../_utils/floatingLayer';\nimport { cn } from '../lib/utils';\n\nexport type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';\n\nexport interface ITooltipProps {\n  title?: React.ReactNode;\n  /** Alias for title, for Popover-style usage */\n  content?: React.ReactNode;\n  destroyTooltipOnHide?: boolean;\n  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;\n  mouseEnterDelay?: number;\n  mouseLeaveDelay?: number;\n  placement?:\n    | 'top'\n    | 'left'\n    | 'right'\n    | 'bottom'\n    | 'topLeft'\n    | 'topRight'\n    | 'bottomLeft'\n    | 'bottomRight'\n    | 'leftTop'\n    | 'leftBottom'\n    | 'rightTop'\n    | 'rightBottom';\n  trigger?: ActionType | ActionType[];\n  zIndex?: number;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  overlayClassName?: string;\n  /** Custom class for the root element */\n  rootClassName?: string;\n  getTooltipContainer?: (node: HTMLElement) => HTMLElement;\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst sideMap: Record<string, 'top' | 'bottom' | 'left' | 'right'> = {\n  top: 'top',\n  bottom: 'bottom',\n  left: 'left',\n  right: 'right',\n  topLeft: 'top',\n  topRight: 'top',\n  bottomLeft: 'bottom',\n  bottomRight: 'bottom',\n  leftTop: 'left',\n  leftBottom: 'left',\n  rightTop: 'right',\n  rightBottom: 'right',\n};\n\nconst alignMap: Record<string, 'start' | 'end' | 'center'> = {\n  topLeft: 'start',\n  topRight: 'end',\n  bottomLeft: 'start',\n  bottomRight: 'end',\n  leftTop: 'start',\n  leftBottom: 'end',\n  rightTop: 'start',\n  rightBottom: 'end',\n};\n\nfunction isClickTrigger(trigger?: ActionType | ActionType[]): boolean {\n  if (!trigger) return false;\n  if (Array.isArray(trigger)) return trigger.includes('click');\n  return trigger === 'click';\n}\n\nfunction isTriggerDisabled(trigger?: ActionType | ActionType[]): boolean {\n  return Array.isArray(trigger) && trigger.length === 0;\n}\n\nconst contentClasses =\n  'ald-tooltip-overlay tw-z-50 tw-min-h-[28px] tw-rounded-r-50 tw-px-2 tw-py-1.5 tw-text-xs tw-leading-4 tw-bg-[var(--background-inverted)] tw-text-[var(--content-inverted-primary)] tw-animate-in tw-fade-in-0 tw-zoom-in-95';\n\nfunction usePortalContainer(\n  getPopupContainer?: (node: HTMLElement) => HTMLElement,\n  getTooltipContainer?: (node: HTMLElement) => HTMLElement,\n) {\n  const triggerRef = React.useRef<HTMLElement | null>(null);\n  const [container, setContainer] = React.useState<HTMLElement | undefined>(\n    undefined,\n  );\n\n  React.useEffect(() => {\n    const getter = getPopupContainer || getTooltipContainer;\n    if (getter && triggerRef.current) {\n      setContainer(getter(triggerRef.current));\n    }\n  }, [getPopupContainer, getTooltipContainer]);\n\n  return { triggerRef, container };\n}\n\nfunction ClickTooltip({\n  children,\n  title,\n  open,\n  onOpenChange,\n  placement = 'top',\n  overlayClassName,\n  zIndex,\n  container,\n  triggerRef,\n}: Pick<\n  ITooltipProps,\n  | 'children'\n  | 'title'\n  | 'open'\n  | 'onOpenChange'\n  | 'placement'\n  | 'overlayClassName'\n  | 'zIndex'\n> & {\n  container?: HTMLElement;\n  triggerRef: React.RefObject<HTMLElement | null>;\n}) {\n  const side = sideMap[placement] || 'top';\n  const align = alignMap[placement] || 'center';\n  const idBase = React.useId().replace(/:/g, '');\n  const contentId = `ald-popover-tooltip-${idBase}`;\n  const titleId = `ald-popover-tooltip-title-${idBase}`;\n  const contentRef = React.useRef<HTMLDivElement>(null);\n\n  const trigger = React.isValidElement(children) ? (\n    React.cloneElement(children as React.ReactElement, {\n      ref: triggerRef,\n      'aria-controls': contentId,\n      'aria-haspopup': false,\n    })\n  ) : (\n    <span\n      ref={triggerRef as React.RefObject<HTMLSpanElement>}\n      aria-controls={contentId}\n      aria-haspopup={false}\n    >\n      {children}\n    </span>\n  );\n\n  return (\n    <PopoverPrimitive.Root\n      open={open}\n      onOpenChange={onOpenChange}\n      modal={false}\n    >\n      <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>\n      <PopoverPrimitive.Portal container={container}>\n        <PopoverPrimitive.Content\n          id={contentId}\n          ref={contentRef}\n          role=\"region\"\n          aria-labelledby={title ? titleId : undefined}\n          side={side}\n          align={align}\n          sideOffset={4}\n          className={cn(contentClasses, overlayClassName)}\n          style={{ zIndex }}\n          onOpenAutoFocus={(event) => {\n            event.preventDefault();\n            contentRef.current\n              ?.querySelector<HTMLElement>(\n                'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])',\n              )\n              ?.focus();\n          }}\n          onCloseAutoFocus={(event) => {\n            event.preventDefault();\n            if (triggerRef.current?.isConnected) {\n              triggerRef.current.focus();\n            }\n          }}\n        >\n          {title && <div id={titleId}>{title}</div>}\n          <PopoverPrimitive.Arrow className=\"tw-fill-[var(--background-inverted)]\" />\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    </PopoverPrimitive.Root>\n  );\n}\n\nexport default function Tooltip(props: ITooltipProps) {\n  const {\n    children,\n    title,\n    content,\n    open,\n    onOpenChange,\n    placement = 'top',\n    mouseEnterDelay = 0,\n    mouseLeaveDelay = 0,\n    overlayClassName,\n    trigger,\n    getPopupContainer,\n    getTooltipContainer,\n    zIndex,\n  } = props;\n\n  const { triggerRef, container } = usePortalContainer(\n    getPopupContainer,\n    getTooltipContainer,\n  );\n  const resolvedZIndex = useFloatingTooltipZIndex(zIndex);\n  const tooltipIdBase = React.useId().replace(/:/g, '');\n  const mergedTitle = title ?? content;\n\n  if (!mergedTitle && mergedTitle !== 0) {\n    return <>{children}</>;\n  }\n\n  if (isTriggerDisabled(trigger)) {\n    return <>{children}</>;\n  }\n\n  if (isClickTrigger(trigger)) {\n    return (\n      <ClickTooltip\n        title={mergedTitle}\n        open={open}\n        onOpenChange={onOpenChange}\n        placement={placement}\n        overlayClassName={overlayClassName}\n        zIndex={resolvedZIndex}\n        container={container}\n        triggerRef={triggerRef}\n      >\n        {children}\n      </ClickTooltip>\n    );\n  }\n\n  const side = sideMap[placement] || 'top';\n  const align = alignMap[placement] || 'center';\n\n  return (\n    <TooltipPrimitive.Provider\n      delayDuration={mouseEnterDelay * 1000}\n      skipDelayDuration={mouseLeaveDelay * 1000}\n    >\n      <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange}>\n        <TooltipPrimitive.Trigger asChild>\n          {React.isValidElement(children) ? (\n            React.cloneElement(children as React.ReactElement, {\n              ref: triggerRef,\n            })\n          ) : (\n            <span ref={triggerRef as React.RefObject<HTMLSpanElement>}>\n              {children}\n            </span>\n          )}\n        </TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={container}>\n          <TooltipPrimitive.Content\n            id={`ald-tooltip-${tooltipIdBase}`}\n            side={side}\n            align={align}\n            sideOffset={4}\n            className={cn(contentClasses, overlayClassName)}\n            style={{ zIndex: resolvedZIndex }}\n          >\n            {mergedTitle}\n            <TooltipPrimitive.Arrow className=\"tw-fill-[var(--background-inverted)]\" />\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n"],"mappings":"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"}

package/dist/_utils/floatingLayer.d.ts

@@ -6,9 +6,11 @@ export declare function useFloatingLayer(baseZIndex?: number): {
     maskZIndex: number;
     contentZIndex: number;
     popupZIndex: number;
+    tooltipZIndex: number;
     nextLevel: number;
 };
 export declare function useFloatingPopupZIndex(zIndex?: number): number;
+export declare function useFloatingTooltipZIndex(zIndex?: number): number;
 export declare function FloatingLayerProvider({ children, value, }: {
     children: React.ReactNode;
     value: number;

package/dist/_utils/floatingLayer.js

@@ -11,6 +11,7 @@ function useFloatingLayer(baseZIndex = FLOATING_LAYER_BASE_Z_INDEX) {
 		maskZIndex,
 		contentZIndex: maskZIndex + 1,
 		popupZIndex: maskZIndex + 2,
+		tooltipZIndex: maskZIndex + 3,
 		nextLevel: level + 1
 	};
 }
@@ -18,6 +19,10 @@ function useFloatingPopupZIndex(zIndex) {
 	const { popupZIndex } = useFloatingLayer();
 	return zIndex ?? popupZIndex;
 }
+function useFloatingTooltipZIndex(zIndex) {
+	const { tooltipZIndex } = useFloatingLayer();
+	return zIndex ?? tooltipZIndex;
+}
 function FloatingLayerProvider({ children, value }) {
 	return /* @__PURE__ */ jsx(FloatingLayerContext.Provider, {
 		value,
@@ -25,6 +30,6 @@ function FloatingLayerProvider({ children, value }) {
 	});
 }
 //#endregion
-export { FLOATING_LAYER_BASE_Z_INDEX, FloatingLayerProvider, useFloatingLayer, useFloatingPopupZIndex };
+export { FLOATING_LAYER_BASE_Z_INDEX, FloatingLayerProvider, useFloatingLayer, useFloatingPopupZIndex, useFloatingTooltipZIndex };
 
 //# sourceMappingURL=floatingLayer.js.map

package/dist/_utils/floatingLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"floatingLayer.js","names":[],"sources":["../../src/_utils/floatingLayer.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\n\nexport const FLOATING_LAYER_BASE_Z_INDEX = 1000;\nexport const FLOATING_LAYER_STEP = 10;\n\nconst FloatingLayerContext = createContext(0);\n\nexport function useFloatingLayer(baseZIndex = FLOATING_LAYER_BASE_Z_INDEX) {\n  const level = useContext(FloatingLayerContext);\n  const maskZIndex = baseZIndex + level * FLOATING_LAYER_STEP;\n\n  return {\n    level,\n    maskZIndex,\n    contentZIndex: maskZIndex + 1,\n    popupZIndex: maskZIndex + 2,\n    nextLevel: level + 1,\n  };\n}\n\nexport function useFloatingPopupZIndex(zIndex?: number) {\n  const { popupZIndex } = useFloatingLayer();\n  return zIndex ?? popupZIndex;\n}\n\nexport function FloatingLayerProvider({\n  children,\n  value,\n}: {\n  children: React.ReactNode;\n  value: number;\n}) {\n  return (\n    <FloatingLayerContext.Provider value={value}>\n      {children}\n    </FloatingLayerContext.Provider>\n  );\n}\n"],"mappings":";;;AAEA,IAAa,8BAA8B;AAG3C,IAAM,uBAAuB,cAAc,EAAE;AAE7C,SAAgB,iBAAiB,aAAa,6BAA6B;CACzE,MAAM,QAAQ,WAAW,qBAAqB;CAC9C,MAAM,aAAa,aAAa,QAAA;AAEhC,QAAO;EACL;EACA;EACA,eAAe,aAAa;EAC5B,aAAa,aAAa;EAC1B,WAAW,QAAQ;EACpB;;AAGH,SAAgB,uBAAuB,QAAiB;CACtD,MAAM,EAAE,gBAAgB,kBAAkB;AAC1C,QAAO,UAAU;;AAGnB,SAAgB,sBAAsB,EACpC,UACA,SAIC;AACD,QACE,oBAAC,qBAAqB,UAAtB;EAAsC;EACnC;EAC6B,CAAA"}
+{"version":3,"file":"floatingLayer.js","names":[],"sources":["../../src/_utils/floatingLayer.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\n\nexport const FLOATING_LAYER_BASE_Z_INDEX = 1000;\nexport const FLOATING_LAYER_STEP = 10;\n\nconst FloatingLayerContext = createContext(0);\n\nexport function useFloatingLayer(baseZIndex = FLOATING_LAYER_BASE_Z_INDEX) {\n  const level = useContext(FloatingLayerContext);\n  const maskZIndex = baseZIndex + level * FLOATING_LAYER_STEP;\n\n  return {\n    level,\n    maskZIndex,\n    contentZIndex: maskZIndex + 1,\n    popupZIndex: maskZIndex + 2,\n    tooltipZIndex: maskZIndex + 3,\n    nextLevel: level + 1,\n  };\n}\n\nexport function useFloatingPopupZIndex(zIndex?: number) {\n  const { popupZIndex } = useFloatingLayer();\n  return zIndex ?? popupZIndex;\n}\n\nexport function useFloatingTooltipZIndex(zIndex?: number) {\n  const { tooltipZIndex } = useFloatingLayer();\n  return zIndex ?? tooltipZIndex;\n}\n\nexport function FloatingLayerProvider({\n  children,\n  value,\n}: {\n  children: React.ReactNode;\n  value: number;\n}) {\n  return (\n    <FloatingLayerContext.Provider value={value}>\n      {children}\n    </FloatingLayerContext.Provider>\n  );\n}\n"],"mappings":";;;AAEA,IAAa,8BAA8B;AAG3C,IAAM,uBAAuB,cAAc,EAAE;AAE7C,SAAgB,iBAAiB,aAAa,6BAA6B;CACzE,MAAM,QAAQ,WAAW,qBAAqB;CAC9C,MAAM,aAAa,aAAa,QAAA;AAEhC,QAAO;EACL;EACA;EACA,eAAe,aAAa;EAC5B,aAAa,aAAa;EAC1B,eAAe,aAAa;EAC5B,WAAW,QAAQ;EACpB;;AAGH,SAAgB,uBAAuB,QAAiB;CACtD,MAAM,EAAE,gBAAgB,kBAAkB;AAC1C,QAAO,UAAU;;AAGnB,SAAgB,yBAAyB,QAAiB;CACxD,MAAM,EAAE,kBAAkB,kBAAkB;AAC5C,QAAO,UAAU;;AAGnB,SAAgB,sBAAsB,EACpC,UACA,SAIC;AACD,QACE,oBAAC,qBAAqB,UAAtB;EAAsC;EACnC;EAC6B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "",
   "license": "MIT",
   "sideEffects": [