@cube-dev/ui-kit 0.162.0 → 0.164.0

package/dist/components/overlays/Dialog/DialogTrigger.d.ts

@@ -43,6 +43,19 @@ interface CubeDialogTriggerProps extends OverlayTriggerProps, PositionProps, Wit
   shouldUpdatePosition?: boolean;
   /** Minimum padding in pixels between the popover and viewport edges */
   containerPadding?: number;
+  /**
+   * Whether focus returns to the trigger when the dialog closes. Defaults to
+   * `true`.
+   *
+   * The restore is skipped automatically whenever the action that closed the
+   * dialog has already moved focus somewhere else, so an action that opens a
+   * panel/dialog/inline editor and focuses it needs nothing here. Pass `false`
+   * for the remaining case: a surface that claims focus *later* than the
+   * dialog's own restore (after an async load, an entry animation, or a
+   * `requestAnimationFrame`), where the trigger would otherwise take focus
+   * first and produce a visible flash.
+   */
+  shouldRestoreFocus?: boolean;
 }
 /**
  * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's

package/dist/components/overlays/Dialog/DialogTrigger.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
@@ -22,7 +22,7 @@ import { PressResponder } from "@react-aria/interactions";
 * positioning of the Dialog.
 */
 function DialogTrigger(props) {
-	let { children, type = "modal", mobileType = type, hideArrow, targetRef, onDismiss, isDismissable = true, isKeyboardDismissDisabled, styles, mobileViewport = 700, hideOnClose, shouldCloseOnInteractOutside, ...positionProps } = props;
+	let { children, type = "modal", mobileType = type, hideArrow, targetRef, onDismiss, isDismissable = true, isKeyboardDismissDisabled, styles, mobileViewport = 700, hideOnClose, shouldCloseOnInteractOutside, shouldRestoreFocus = true, ...positionProps } = props;
 	if (!Array.isArray(children) || children.length > 2) throw new Error("DialogTrigger must have exactly 2 children");
 	let [trigger, content] = children;
 	if (useMediaQuery(`(max-width: ${mobileViewport}px)`)) {
@@ -71,6 +71,7 @@ function DialogTrigger(props) {
 		isKeyboardDismissDisabled,
 		hideArrow,
 		shouldCloseOnInteractOutside,
+		shouldRestoreFocus,
 		syncTriggerRef,
 		syncOverlayRef,
 		triggerType: type,
@@ -114,11 +115,13 @@ function DialogTrigger(props) {
 		overlay: renderOverlay(),
 		hideOnClose,
 		syncTriggerRef,
+		overlayRef: syncOverlayRef,
+		shouldRestoreFocus,
 		onClose
 	});
 }
 function PopoverTrigger(allProps) {
-	let { state, styles, targetRef, trigger, content, hideArrow, onClose, isKeyboardDismissDisabled, hideOnClose, shouldCloseOnInteractOutside, keepOpenOnScroll, syncTriggerRef, syncOverlayRef, triggerType, ...props } = allProps;
+	let { state, styles, targetRef, trigger, content, hideArrow, onClose, isKeyboardDismissDisabled, hideOnClose, shouldCloseOnInteractOutside, shouldRestoreFocus, keepOpenOnScroll, syncTriggerRef, syncOverlayRef, triggerType, ...props } = allProps;
 	let triggerRef = useRef(null);
 	let overlayRef = useRef(null);
 	useLayoutEffect$1(() => {
@@ -180,29 +183,45 @@ function PopoverTrigger(allProps) {
 			onClose,
 			children: typeof content === "function" ? content(state.close) : content
 		}),
+		overlayRef,
+		shouldRestoreFocus,
 		onClose
 	});
 }
 function DialogTriggerBase(props) {
 	const ref = useCombinedRefs(props.ref);
 	const wasOpenRef = useRef(false);
+	const overlayRef = props.overlayRef;
 	useLayoutEffect$1(() => {
 		if (props.syncTriggerRef) props.syncTriggerRef.current = ref.current ?? null;
 	});
-	let { type, state, onClose, isDismissable, dialogProps = {}, triggerProps = {}, overlay, trigger } = props;
+	let { type, state, onClose, isDismissable, dialogProps = {}, triggerProps = {}, overlay, trigger, shouldRestoreFocus = true } = props;
 	let context = {
 		type,
 		onClose,
 		isDismissable,
 		isOpen: state.isOpen,
+		shouldRestoreFocus,
 		...dialogProps
 	};
+	const hasFocusMovedOutsideDialog = useEvent(() => {
+		const activeElement = document.activeElement;
+		if (!activeElement || activeElement === document.body) return false;
+		if (!activeElement.isConnected) return false;
+		return !(overlayRef?.current?.contains(activeElement) || ref.current?.contains(activeElement));
+	});
 	useEffect(() => {
 		if (!state.isOpen && wasOpenRef.current) {
 			wasOpenRef.current = false;
+			if (!shouldRestoreFocus) return;
+			if (hasFocusMovedOutsideDialog()) return;
 			ref.current?.focus();
 		} else if (state.isOpen) wasOpenRef.current = true;
-	}, [state.isOpen]);
+	}, [
+		state.isOpen,
+		shouldRestoreFocus,
+		hasFocusMovedOutsideDialog
+	]);
 	const triggerExtraProps = type === "popover" ? { "data-popover-trigger": "" } : {};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PressResponder, {
 		ref,

package/dist/components/overlays/Dialog/DialogTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogTrigger.js","names":["Modal","Tray","Popover"],"sources":["../../../../src/components/overlays/Dialog/DialogTrigger.tsx"],"sourcesContent":["import { PressResponder } from '@react-aria/interactions';\nimport { useMediaQuery } from '@react-spectrum/utils';\nimport { Styles } from '@tenphi/tasty';\nimport {\n  Fragment,\n  ReactElement,\n  RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  OverlayTriggerProps,\n  Placement,\n  PositionProps,\n  useOverlayPosition,\n  useOverlayTrigger,\n} from 'react-aria';\nimport { OverlayTriggerState, useOverlayTriggerState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { generateRandomId } from '../../../utils/random';\nimport { useCombinedRefs, useLayoutEffect } from '../../../utils/react/index';\nimport { usePopoverSync } from '../../../utils/react/usePopoverSync';\nimport { Modal, Popover, Tray, WithCloseBehavior } from '../Modal';\n\nimport { DialogContext } from './context';\n\nexport type CubeDialogClose = (close: () => void) => ReactElement;\n\nexport interface CubeDialogTriggerProps\n  extends OverlayTriggerProps,\n    PositionProps,\n    WithCloseBehavior {\n  /** The Dialog and its trigger element. See the DialogTrigger [Content section](#content) for more information on what to provide as children. */\n  children: [\n    ReactElement | ((state: OverlayTriggerState) => ReactElement),\n    CubeDialogClose | ReactElement,\n  ];\n  /**\n   * The type of Dialog that should be rendered. See the DialogTrigger [types section](#dialog-types) for an explanation on each.\n   * @default 'modal'\n   */\n  type?:\n    | 'modal'\n    | 'popover'\n    | 'tray'\n    | 'fullscreen'\n    | 'fullscreenTakeover'\n    | 'panel';\n  /** The type of Dialog that should be rendered when on a mobile device. See DialogTrigger [types section](#dialog-types) for an explanation on each. */\n  mobileType?:\n    | 'modal'\n    | 'tray'\n    | 'fullscreen'\n    | 'fullscreenTakeover'\n    | 'panel'\n    | 'popover';\n  placement?: Placement;\n  /**\n   * Whether a popover type Dialog's arrow should be hidden.\n   */\n  hideArrow?: boolean;\n  /** The ref of the element the Dialog should visually attach itself to. Defaults to the trigger button if not defined. */\n  targetRef?: RefObject<HTMLElement | null>;\n  /** Whether a modal type Dialog should be dismissable. */\n  isDismissable?: boolean;\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean;\n  /** The screen breakpoint for the mobile type */\n  mobileViewport?: number;\n  /** The style map for the overlay **/\n  styles?: Styles;\n  shouldCloseOnInteractOutside?: (element: Element) => boolean;\n  onDismiss?: (action?: string) => void;\n  isOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  defaultOpen?: boolean;\n  shouldFlip?: boolean;\n  shouldUpdatePosition?: boolean;\n  /** Minimum padding in pixels between the popover and viewport edges */\n  containerPadding?: number;\n}\n\n/**\n * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's\n * open state with the trigger's press state. Additionally, it allows you to customize the type and\n * positioning of the Dialog.\n */\nexport function DialogTrigger(props: CubeDialogTriggerProps) {\n  let {\n    children,\n    type = 'modal',\n    mobileType = type,\n    hideArrow,\n    targetRef,\n    onDismiss,\n    isDismissable = true,\n    isKeyboardDismissDisabled,\n    styles,\n    mobileViewport = 700,\n    hideOnClose,\n    shouldCloseOnInteractOutside,\n    ...positionProps\n  } = props;\n\n  if (!Array.isArray(children) || children.length > 2) {\n    throw new Error('DialogTrigger must have exactly 2 children');\n  }\n  // if a function is passed as the second child, it won't appear in toArray\n  let [trigger, content] = children;\n\n  // On small devices, show a modal or tray instead of a popover.\n  let isMobile = useMediaQuery(`(max-width: ${mobileViewport}px)`);\n  if (isMobile) {\n    // handle cases where desktop popovers need a close button for the mobile modal view\n    if (type !== 'modal' && mobileType === 'modal') {\n      isDismissable = true;\n    }\n\n    type = mobileType;\n  }\n\n  let state = useOverlayTriggerState(props);\n\n  if (typeof trigger === 'function') {\n    trigger = trigger(state);\n  }\n\n  let wasOpen = useRef(false);\n  let isExiting = useRef(false);\n  let onExiting = () => (isExiting.current = true);\n  let onExited = () => (isExiting.current = false);\n\n  wasOpen.current = state.isOpen;\n\n  // Shared identity + refs for `usePopoverSync`. Allocating here (rather than\n  // inside the branch-specific sub-trees) keeps a single sync registration for\n  // the lifetime of the trigger, even when `type` flips between popover and\n  // modal at the mobile breakpoint. The refs are then threaded into the\n  // appropriate branch so existing positioning / useOverlayTrigger hooks keep\n  // their original ref targets and `usePopoverSync`'s `contains()` check has a\n  // real DOM node to query.\n  const dialogSyncId = useMemo(() => generateRandomId(), []);\n  const syncTriggerRef = useRef<HTMLElement | null>(null);\n  const syncOverlayRef = useRef<HTMLElement | null>(null);\n\n  // Only popover-type Dialogs participate in the \"press inside dismisses\n  // me\" / \"peer popover opening dismisses me\" behaviours: modals, trays,\n  // fullscreen and panel Dialogs are persistent workspaces and must not be\n  // yanked closed via the EventBus (which would bypass `isDismissable` and\n  // call `state.close()` directly). Non-popover types DO still EMIT\n  // `popover:open`, so opening a modal correctly dismisses peer popovers.\n  const isPopoverFlavored = type === 'popover';\n  usePopoverSync({\n    menuId: dialogSyncId,\n    isOpen: state.isOpen,\n    onClose: () => state.close(),\n    triggerRef: syncTriggerRef,\n    containerRef: syncOverlayRef,\n    dismissOnInnerButtonPress: isPopoverFlavored,\n    closeOnPeerOpen: isPopoverFlavored,\n  });\n\n  useEffect(() => {\n    return () => {\n      if (\n        (wasOpen.current || isExiting.current) &&\n        type !== 'popover' &&\n        type !== 'tray'\n      ) {\n        console.warn(\n          'CubeUIKit: A DialogTrigger unmounted while open. This is likely due to being placed within a trigger that unmounts or inside a conditional. Consider using a DialogContainer instead.',\n        );\n      }\n    };\n  }, []);\n\n  function onClose(action) {\n    if (isDismissable) {\n      onDismiss && onDismiss(action);\n      state.close();\n    }\n  }\n\n  if (type === 'popover') {\n    return (\n      <PopoverTrigger\n        {...positionProps}\n        hideOnClose={hideOnClose}\n        state={state}\n        styles={styles}\n        targetRef={targetRef}\n        trigger={trigger}\n        content={content}\n        isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n        hideArrow={hideArrow}\n        shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n        syncTriggerRef={syncTriggerRef}\n        syncOverlayRef={syncOverlayRef}\n        triggerType={type}\n        onClose={onClose}\n      />\n    );\n  }\n\n  let renderOverlay = () => {\n    switch (type) {\n      case 'panel':\n      case 'fullscreen':\n      case 'fullscreenTakeover':\n      case 'modal':\n        return (\n          <Modal\n            ref={syncOverlayRef}\n            hideOnClose={hideOnClose}\n            isOpen={state.isOpen}\n            isDismissable={isDismissable}\n            type={type}\n            isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n            styles={styles}\n            shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n            onClose={onClose}\n            onExiting={onExiting}\n            onExited={onExited}\n          >\n            {typeof content === 'function' ? content(state.close) : content}\n          </Modal>\n        );\n      case 'tray':\n        return (\n          <Tray\n            ref={syncOverlayRef}\n            hideOnClose={hideOnClose}\n            isOpen={state.isOpen}\n            isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n            styles={styles}\n            onClose={onClose}\n          >\n            {typeof content === 'function' ? content(state.close) : content}\n          </Tray>\n        );\n    }\n  };\n\n  return (\n    <DialogTriggerBase\n      type={type}\n      state={state}\n      isDismissable={isDismissable}\n      trigger={trigger}\n      overlay={renderOverlay()}\n      hideOnClose={hideOnClose}\n      syncTriggerRef={syncTriggerRef}\n      onClose={onClose}\n    />\n  );\n}\n\nfunction PopoverTrigger(allProps) {\n  let {\n    state,\n    styles,\n    targetRef,\n    trigger,\n    content,\n    hideArrow,\n    onClose,\n    isKeyboardDismissDisabled,\n    hideOnClose,\n    shouldCloseOnInteractOutside,\n    keepOpenOnScroll,\n    syncTriggerRef,\n    syncOverlayRef,\n    triggerType,\n    ...props\n  } = allProps;\n\n  let triggerRef = useRef<HTMLButtonElement>(null);\n  let overlayRef = useRef<HTMLDivElement>(null);\n\n  // Mirror the trigger/overlay DOM nodes into the parent-owned sync refs.\n  //\n  // We deliberately do NOT use `useCombinedRefs` here: that hook returns a\n  // brand new internal ref and propagates to the passed refs via a regular\n  // `useEffect` (post-commit). `useOverlayPosition` below reads\n  // `triggerRef.current` in its own layout effect during the SAME commit, so\n  // if `triggerRef` only receives the DOM node via a delayed effect, the\n  // first measurement sees `null` and the popover positions at the document\n  // origin until something forces a re-measure.\n  //\n  // Keeping `triggerRef`/`overlayRef` as the direct React refs preserves\n  // synchronous assignment for `useOverlayPosition`. The sync refs are only\n  // ever read inside `popover:open` handlers, which fire via setTimeout(0),\n  // so a layout-effect mirror is more than fast enough.\n  useLayoutEffect(() => {\n    if (syncTriggerRef) {\n      syncTriggerRef.current = targetRef?.current ?? triggerRef.current ?? null;\n    }\n    if (syncOverlayRef) {\n      syncOverlayRef.current = overlayRef.current ?? null;\n    }\n  });\n\n  let {\n    overlayProps: popoverProps,\n    placement,\n    arrowProps,\n    updatePosition,\n  } = useOverlayPosition({\n    targetRef: targetRef || triggerRef,\n    overlayRef: overlayRef,\n    placement: props.placement,\n    containerPadding: props.containerPadding,\n    offset: props.offset || 8,\n    crossOffset: props.crossOffset,\n    shouldFlip: props.shouldFlip,\n    shouldUpdatePosition: props.shouldUpdatePosition,\n    isOpen: state.isOpen,\n  });\n\n  let overlayTriggerState = state;\n\n  if (keepOpenOnScroll) {\n    overlayTriggerState = { ...state, close: updatePosition };\n  }\n\n  let { triggerProps, overlayProps } = useOverlayTrigger(\n    { type: 'dialog' },\n    overlayTriggerState,\n    triggerRef,\n  );\n\n  let triggerPropsWithRef = {\n    ...triggerProps,\n    ref: targetRef ? undefined : triggerRef,\n  };\n\n  // Mirror the Select/ComboBox/MenuTrigger pattern: when an outside click lands\n  // on ANOTHER popover trigger, return `false` so react-aria's `useOverlay`\n  // does NOT `stopPropagation()` the click. The click then reaches that trigger,\n  // its popover opens, and `usePopoverSync` closes this one via the EventBus.\n  // Without this, react-aria swallows every outside click and a single click on\n  // a sibling trigger can't open it while this popover is open.\n  const resolveShouldCloseOnInteractOutside = useEvent(\n    (el: Element): boolean => {\n      const popoverTriggerEl = el.closest('[data-popover-trigger]');\n      if (!popoverTriggerEl) {\n        if (el.closest('[data-popover-keep]')) return false;\n        // Plain interactive controls (Button, ItemButton) opt in via\n        // `data-popover-dismiss`. Schedule the close after the click finishes so\n        // the control's `onPress` runs first instead of losing the click to\n        // useOverlay's stopPropagation.\n        if (el.closest('[data-popover-dismiss]')) {\n          setTimeout(() => state.close(), 0);\n          return false;\n        }\n        return shouldCloseOnInteractOutside\n          ? shouldCloseOnInteractOutside(el)\n          : true;\n      }\n      // Clicking our own trigger again should dismiss us.\n      const ownTrigger = targetRef?.current ?? triggerRef.current;\n      if (popoverTriggerEl === ownTrigger || ownTrigger?.contains(el))\n        return true;\n      // Another popover's trigger: let the click through so it can open.\n      return false;\n    },\n  );\n\n  let overlay = (\n    <Popover\n      ref={overlayRef}\n      styles={styles}\n      hideOnClose={hideOnClose}\n      isOpen={state.isOpen}\n      style={popoverProps.style}\n      placement={placement}\n      arrowProps={arrowProps}\n      isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n      hideArrow={hideArrow}\n      shouldCloseOnInteractOutside={resolveShouldCloseOnInteractOutside}\n      onClose={onClose}\n    >\n      {typeof content === 'function' ? content(state.close) : content}\n    </Popover>\n  );\n\n  return (\n    <DialogTriggerBase\n      type=\"popover\"\n      state={state}\n      triggerProps={triggerPropsWithRef}\n      dialogProps={overlayProps}\n      trigger={trigger}\n      overlay={overlay}\n      onClose={onClose}\n    />\n  );\n}\n\nfunction DialogTriggerBase(props: any) {\n  const ref = useCombinedRefs<HTMLElement>(props.ref);\n  const wasOpenRef = useRef(false);\n\n  // Mirror the press-responder DOM node into the parent's sync trigger ref.\n  // Done via `useLayoutEffect` rather than threading through `useCombinedRefs`\n  // for consistency with `PopoverTrigger` (see comment there) — keeps the\n  // sync-ref population deterministic regardless of branch.\n  useLayoutEffect(() => {\n    if (props.syncTriggerRef) {\n      props.syncTriggerRef.current = ref.current ?? null;\n    }\n  });\n\n  let {\n    type,\n    state,\n    onClose,\n    isDismissable,\n    dialogProps = {},\n    triggerProps = {},\n    overlay,\n    trigger,\n  } = props;\n\n  let context = {\n    type,\n    onClose,\n    isDismissable,\n    isOpen: state.isOpen,\n    ...dialogProps,\n  };\n\n  // Restore focus manually when the dialog closes\n  useEffect(() => {\n    if (!state.isOpen && wasOpenRef.current) {\n      wasOpenRef.current = false;\n      ref.current?.focus();\n    } else if (state.isOpen) {\n      wasOpenRef.current = true;\n    }\n  }, [state.isOpen]);\n\n  // Mark popover-type DialogTrigger children with `data-popover-trigger` so\n  // `Button` / `ItemButton`'s default dismiss-on-press behaviour treats them\n  // as popover triggers (skips the dismiss). Modal/tray/fullscreen children\n  // intentionally stay UNMARKED — when a modal-type DialogTrigger lives\n  // inside a popover footer, pressing it should dismiss the parent popover\n  // (matching the \"modal takes over\" native UX).\n  const triggerExtraProps =\n    type === 'popover' ? { 'data-popover-trigger': '' } : {};\n\n  return (\n    <Fragment>\n      <PressResponder\n        ref={ref}\n        {...triggerProps}\n        {...triggerExtraProps}\n        isPressed={\n          state.isOpen &&\n          type !== 'modal' &&\n          type !== 'fullscreen' &&\n          type !== 'fullscreenTakeover'\n        }\n        onPress={state.toggle}\n      >\n        {trigger}\n      </PressResponder>\n      <DialogContext.Provider value={context}>{overlay}</DialogContext.Provider>\n    </Fragment>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"DialogTrigger.js","names":["Modal","Tray","Popover"],"sources":["../../../../src/components/overlays/Dialog/DialogTrigger.tsx"],"sourcesContent":["import { PressResponder } from '@react-aria/interactions';\nimport { useMediaQuery } from '@react-spectrum/utils';\nimport { Styles } from '@tenphi/tasty';\nimport {\n  Fragment,\n  ReactElement,\n  RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  OverlayTriggerProps,\n  Placement,\n  PositionProps,\n  useOverlayPosition,\n  useOverlayTrigger,\n} from 'react-aria';\nimport { OverlayTriggerState, useOverlayTriggerState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { generateRandomId } from '../../../utils/random';\nimport { useCombinedRefs, useLayoutEffect } from '../../../utils/react/index';\nimport { usePopoverSync } from '../../../utils/react/usePopoverSync';\nimport { Modal, Popover, Tray, WithCloseBehavior } from '../Modal';\n\nimport { DialogContext } from './context';\n\nexport type CubeDialogClose = (close: () => void) => ReactElement;\n\nexport interface CubeDialogTriggerProps\n  extends OverlayTriggerProps,\n    PositionProps,\n    WithCloseBehavior {\n  /** The Dialog and its trigger element. See the DialogTrigger [Content section](#content) for more information on what to provide as children. */\n  children: [\n    ReactElement | ((state: OverlayTriggerState) => ReactElement),\n    CubeDialogClose | ReactElement,\n  ];\n  /**\n   * The type of Dialog that should be rendered. See the DialogTrigger [types section](#dialog-types) for an explanation on each.\n   * @default 'modal'\n   */\n  type?:\n    | 'modal'\n    | 'popover'\n    | 'tray'\n    | 'fullscreen'\n    | 'fullscreenTakeover'\n    | 'panel';\n  /** The type of Dialog that should be rendered when on a mobile device. See DialogTrigger [types section](#dialog-types) for an explanation on each. */\n  mobileType?:\n    | 'modal'\n    | 'tray'\n    | 'fullscreen'\n    | 'fullscreenTakeover'\n    | 'panel'\n    | 'popover';\n  placement?: Placement;\n  /**\n   * Whether a popover type Dialog's arrow should be hidden.\n   */\n  hideArrow?: boolean;\n  /** The ref of the element the Dialog should visually attach itself to. Defaults to the trigger button if not defined. */\n  targetRef?: RefObject<HTMLElement | null>;\n  /** Whether a modal type Dialog should be dismissable. */\n  isDismissable?: boolean;\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean;\n  /** The screen breakpoint for the mobile type */\n  mobileViewport?: number;\n  /** The style map for the overlay **/\n  styles?: Styles;\n  shouldCloseOnInteractOutside?: (element: Element) => boolean;\n  onDismiss?: (action?: string) => void;\n  isOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  defaultOpen?: boolean;\n  shouldFlip?: boolean;\n  shouldUpdatePosition?: boolean;\n  /** Minimum padding in pixels between the popover and viewport edges */\n  containerPadding?: number;\n  /**\n   * Whether focus returns to the trigger when the dialog closes. Defaults to\n   * `true`.\n   *\n   * The restore is skipped automatically whenever the action that closed the\n   * dialog has already moved focus somewhere else, so an action that opens a\n   * panel/dialog/inline editor and focuses it needs nothing here. Pass `false`\n   * for the remaining case: a surface that claims focus *later* than the\n   * dialog's own restore (after an async load, an entry animation, or a\n   * `requestAnimationFrame`), where the trigger would otherwise take focus\n   * first and produce a visible flash.\n   */\n  shouldRestoreFocus?: boolean;\n}\n\n/**\n * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's\n * open state with the trigger's press state. Additionally, it allows you to customize the type and\n * positioning of the Dialog.\n */\nexport function DialogTrigger(props: CubeDialogTriggerProps) {\n  let {\n    children,\n    type = 'modal',\n    mobileType = type,\n    hideArrow,\n    targetRef,\n    onDismiss,\n    isDismissable = true,\n    isKeyboardDismissDisabled,\n    styles,\n    mobileViewport = 700,\n    hideOnClose,\n    shouldCloseOnInteractOutside,\n    shouldRestoreFocus = true,\n    ...positionProps\n  } = props;\n\n  if (!Array.isArray(children) || children.length > 2) {\n    throw new Error('DialogTrigger must have exactly 2 children');\n  }\n  // if a function is passed as the second child, it won't appear in toArray\n  let [trigger, content] = children;\n\n  // On small devices, show a modal or tray instead of a popover.\n  let isMobile = useMediaQuery(`(max-width: ${mobileViewport}px)`);\n  if (isMobile) {\n    // handle cases where desktop popovers need a close button for the mobile modal view\n    if (type !== 'modal' && mobileType === 'modal') {\n      isDismissable = true;\n    }\n\n    type = mobileType;\n  }\n\n  let state = useOverlayTriggerState(props);\n\n  if (typeof trigger === 'function') {\n    trigger = trigger(state);\n  }\n\n  let wasOpen = useRef(false);\n  let isExiting = useRef(false);\n  let onExiting = () => (isExiting.current = true);\n  let onExited = () => (isExiting.current = false);\n\n  wasOpen.current = state.isOpen;\n\n  // Shared identity + refs for `usePopoverSync`. Allocating here (rather than\n  // inside the branch-specific sub-trees) keeps a single sync registration for\n  // the lifetime of the trigger, even when `type` flips between popover and\n  // modal at the mobile breakpoint. The refs are then threaded into the\n  // appropriate branch so existing positioning / useOverlayTrigger hooks keep\n  // their original ref targets and `usePopoverSync`'s `contains()` check has a\n  // real DOM node to query.\n  const dialogSyncId = useMemo(() => generateRandomId(), []);\n  const syncTriggerRef = useRef<HTMLElement | null>(null);\n  const syncOverlayRef = useRef<HTMLElement | null>(null);\n\n  // Only popover-type Dialogs participate in the \"press inside dismisses\n  // me\" / \"peer popover opening dismisses me\" behaviours: modals, trays,\n  // fullscreen and panel Dialogs are persistent workspaces and must not be\n  // yanked closed via the EventBus (which would bypass `isDismissable` and\n  // call `state.close()` directly). Non-popover types DO still EMIT\n  // `popover:open`, so opening a modal correctly dismisses peer popovers.\n  const isPopoverFlavored = type === 'popover';\n  usePopoverSync({\n    menuId: dialogSyncId,\n    isOpen: state.isOpen,\n    onClose: () => state.close(),\n    triggerRef: syncTriggerRef,\n    containerRef: syncOverlayRef,\n    dismissOnInnerButtonPress: isPopoverFlavored,\n    closeOnPeerOpen: isPopoverFlavored,\n  });\n\n  useEffect(() => {\n    return () => {\n      if (\n        (wasOpen.current || isExiting.current) &&\n        type !== 'popover' &&\n        type !== 'tray'\n      ) {\n        console.warn(\n          'CubeUIKit: A DialogTrigger unmounted while open. This is likely due to being placed within a trigger that unmounts or inside a conditional. Consider using a DialogContainer instead.',\n        );\n      }\n    };\n  }, []);\n\n  function onClose(action) {\n    if (isDismissable) {\n      onDismiss && onDismiss(action);\n      state.close();\n    }\n  }\n\n  if (type === 'popover') {\n    return (\n      <PopoverTrigger\n        {...positionProps}\n        hideOnClose={hideOnClose}\n        state={state}\n        styles={styles}\n        targetRef={targetRef}\n        trigger={trigger}\n        content={content}\n        isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n        hideArrow={hideArrow}\n        shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n        shouldRestoreFocus={shouldRestoreFocus}\n        syncTriggerRef={syncTriggerRef}\n        syncOverlayRef={syncOverlayRef}\n        triggerType={type}\n        onClose={onClose}\n      />\n    );\n  }\n\n  let renderOverlay = () => {\n    switch (type) {\n      case 'panel':\n      case 'fullscreen':\n      case 'fullscreenTakeover':\n      case 'modal':\n        return (\n          <Modal\n            ref={syncOverlayRef}\n            hideOnClose={hideOnClose}\n            isOpen={state.isOpen}\n            isDismissable={isDismissable}\n            type={type}\n            isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n            styles={styles}\n            shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n            onClose={onClose}\n            onExiting={onExiting}\n            onExited={onExited}\n          >\n            {typeof content === 'function' ? content(state.close) : content}\n          </Modal>\n        );\n      case 'tray':\n        return (\n          <Tray\n            ref={syncOverlayRef}\n            hideOnClose={hideOnClose}\n            isOpen={state.isOpen}\n            isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n            styles={styles}\n            onClose={onClose}\n          >\n            {typeof content === 'function' ? content(state.close) : content}\n          </Tray>\n        );\n    }\n  };\n\n  return (\n    <DialogTriggerBase\n      type={type}\n      state={state}\n      isDismissable={isDismissable}\n      trigger={trigger}\n      overlay={renderOverlay()}\n      hideOnClose={hideOnClose}\n      syncTriggerRef={syncTriggerRef}\n      overlayRef={syncOverlayRef}\n      shouldRestoreFocus={shouldRestoreFocus}\n      onClose={onClose}\n    />\n  );\n}\n\nfunction PopoverTrigger(allProps) {\n  let {\n    state,\n    styles,\n    targetRef,\n    trigger,\n    content,\n    hideArrow,\n    onClose,\n    isKeyboardDismissDisabled,\n    hideOnClose,\n    shouldCloseOnInteractOutside,\n    shouldRestoreFocus,\n    keepOpenOnScroll,\n    syncTriggerRef,\n    syncOverlayRef,\n    triggerType,\n    ...props\n  } = allProps;\n\n  let triggerRef = useRef<HTMLButtonElement>(null);\n  let overlayRef = useRef<HTMLDivElement>(null);\n\n  // Mirror the trigger/overlay DOM nodes into the parent-owned sync refs.\n  //\n  // We deliberately do NOT use `useCombinedRefs` here: that hook returns a\n  // brand new internal ref and propagates to the passed refs via a regular\n  // `useEffect` (post-commit). `useOverlayPosition` below reads\n  // `triggerRef.current` in its own layout effect during the SAME commit, so\n  // if `triggerRef` only receives the DOM node via a delayed effect, the\n  // first measurement sees `null` and the popover positions at the document\n  // origin until something forces a re-measure.\n  //\n  // Keeping `triggerRef`/`overlayRef` as the direct React refs preserves\n  // synchronous assignment for `useOverlayPosition`. The sync refs are only\n  // ever read inside `popover:open` handlers, which fire via setTimeout(0),\n  // so a layout-effect mirror is more than fast enough.\n  useLayoutEffect(() => {\n    if (syncTriggerRef) {\n      syncTriggerRef.current = targetRef?.current ?? triggerRef.current ?? null;\n    }\n    if (syncOverlayRef) {\n      syncOverlayRef.current = overlayRef.current ?? null;\n    }\n  });\n\n  let {\n    overlayProps: popoverProps,\n    placement,\n    arrowProps,\n    updatePosition,\n  } = useOverlayPosition({\n    targetRef: targetRef || triggerRef,\n    overlayRef: overlayRef,\n    placement: props.placement,\n    containerPadding: props.containerPadding,\n    offset: props.offset || 8,\n    crossOffset: props.crossOffset,\n    shouldFlip: props.shouldFlip,\n    shouldUpdatePosition: props.shouldUpdatePosition,\n    isOpen: state.isOpen,\n  });\n\n  let overlayTriggerState = state;\n\n  if (keepOpenOnScroll) {\n    overlayTriggerState = { ...state, close: updatePosition };\n  }\n\n  let { triggerProps, overlayProps } = useOverlayTrigger(\n    { type: 'dialog' },\n    overlayTriggerState,\n    triggerRef,\n  );\n\n  let triggerPropsWithRef = {\n    ...triggerProps,\n    ref: targetRef ? undefined : triggerRef,\n  };\n\n  // Mirror the Select/ComboBox/MenuTrigger pattern: when an outside click lands\n  // on ANOTHER popover trigger, return `false` so react-aria's `useOverlay`\n  // does NOT `stopPropagation()` the click. The click then reaches that trigger,\n  // its popover opens, and `usePopoverSync` closes this one via the EventBus.\n  // Without this, react-aria swallows every outside click and a single click on\n  // a sibling trigger can't open it while this popover is open.\n  const resolveShouldCloseOnInteractOutside = useEvent(\n    (el: Element): boolean => {\n      const popoverTriggerEl = el.closest('[data-popover-trigger]');\n      if (!popoverTriggerEl) {\n        if (el.closest('[data-popover-keep]')) return false;\n        // Plain interactive controls (Button, ItemButton) opt in via\n        // `data-popover-dismiss`. Schedule the close after the click finishes so\n        // the control's `onPress` runs first instead of losing the click to\n        // useOverlay's stopPropagation.\n        if (el.closest('[data-popover-dismiss]')) {\n          setTimeout(() => state.close(), 0);\n          return false;\n        }\n        return shouldCloseOnInteractOutside\n          ? shouldCloseOnInteractOutside(el)\n          : true;\n      }\n      // Clicking our own trigger again should dismiss us.\n      const ownTrigger = targetRef?.current ?? triggerRef.current;\n      if (popoverTriggerEl === ownTrigger || ownTrigger?.contains(el))\n        return true;\n      // Another popover's trigger: let the click through so it can open.\n      return false;\n    },\n  );\n\n  let overlay = (\n    <Popover\n      ref={overlayRef}\n      styles={styles}\n      hideOnClose={hideOnClose}\n      isOpen={state.isOpen}\n      style={popoverProps.style}\n      placement={placement}\n      arrowProps={arrowProps}\n      isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n      hideArrow={hideArrow}\n      shouldCloseOnInteractOutside={resolveShouldCloseOnInteractOutside}\n      onClose={onClose}\n    >\n      {typeof content === 'function' ? content(state.close) : content}\n    </Popover>\n  );\n\n  return (\n    <DialogTriggerBase\n      type=\"popover\"\n      state={state}\n      triggerProps={triggerPropsWithRef}\n      dialogProps={overlayProps}\n      trigger={trigger}\n      overlay={overlay}\n      overlayRef={overlayRef}\n      shouldRestoreFocus={shouldRestoreFocus}\n      onClose={onClose}\n    />\n  );\n}\n\nfunction DialogTriggerBase(props: any) {\n  const ref = useCombinedRefs<HTMLElement>(props.ref);\n  const wasOpenRef = useRef(false);\n  const overlayRef: RefObject<HTMLElement | null> | undefined =\n    props.overlayRef;\n\n  // Mirror the press-responder DOM node into the parent's sync trigger ref.\n  // Done via `useLayoutEffect` rather than threading through `useCombinedRefs`\n  // for consistency with `PopoverTrigger` (see comment there) — keeps the\n  // sync-ref population deterministic regardless of branch.\n  useLayoutEffect(() => {\n    if (props.syncTriggerRef) {\n      props.syncTriggerRef.current = ref.current ?? null;\n    }\n  });\n\n  let {\n    type,\n    state,\n    onClose,\n    isDismissable,\n    dialogProps = {},\n    triggerProps = {},\n    overlay,\n    trigger,\n    shouldRestoreFocus = true,\n  } = props;\n\n  let context = {\n    type,\n    onClose,\n    isDismissable,\n    isOpen: state.isOpen,\n    // Reaches `Dialog`'s `FocusScope`, which owns the restore for\n    // popover-type dialogs. `useDialog` filters it out of the DOM props.\n    shouldRestoreFocus,\n    ...dialogProps,\n  };\n\n  // Whether focus has been claimed by something outside the closing dialog —\n  // the signal that an action handed focus off and the trigger must not take\n  // it back. Same rule as `MenuTrigger` (see CUB-3962): an action that opens\n  // a panel, another dialog or an inline editor focuses that surface, and\n  // restoring here would undo the hand-off.\n  //\n  // Focus still inside the overlay means nobody claimed it (the pressed\n  // control keeps focus while the overlay plays its ~350ms exit animation),\n  // and focus on `<body>` or on a detached node means the focused element\n  // went away with the dialog. Both belong back on the trigger.\n  const hasFocusMovedOutsideDialog = useEvent(() => {\n    const activeElement = document.activeElement;\n\n    if (!activeElement || activeElement === document.body) return false;\n    if (!activeElement.isConnected) return false;\n\n    return !(\n      overlayRef?.current?.contains(activeElement) ||\n      ref.current?.contains(activeElement)\n    );\n  });\n\n  // Restore focus manually when the dialog closes.\n  //\n  // Live for modal/tray/fullscreen/panel types only: in the popover branch\n  // `triggerProps` carries its own `ref`, which overrides the `ref={ref}` on\n  // `PressResponder` below, so `ref.current` stays null and this is a no-op.\n  // Popovers get their restore from `Dialog`'s own `<FocusScope restoreFocus>`\n  // instead, which already declines to restore when focus moved elsewhere.\n  useEffect(() => {\n    if (!state.isOpen && wasOpenRef.current) {\n      wasOpenRef.current = false;\n      if (!shouldRestoreFocus) return;\n      if (hasFocusMovedOutsideDialog()) return;\n      ref.current?.focus();\n    } else if (state.isOpen) {\n      wasOpenRef.current = true;\n    }\n  }, [state.isOpen, shouldRestoreFocus, hasFocusMovedOutsideDialog]);\n\n  // Mark popover-type DialogTrigger children with `data-popover-trigger` so\n  // `Button` / `ItemButton`'s default dismiss-on-press behaviour treats them\n  // as popover triggers (skips the dismiss). Modal/tray/fullscreen children\n  // intentionally stay UNMARKED — when a modal-type DialogTrigger lives\n  // inside a popover footer, pressing it should dismiss the parent popover\n  // (matching the \"modal takes over\" native UX).\n  const triggerExtraProps =\n    type === 'popover' ? { 'data-popover-trigger': '' } : {};\n\n  return (\n    <Fragment>\n      <PressResponder\n        ref={ref}\n        {...triggerProps}\n        {...triggerExtraProps}\n        isPressed={\n          state.isOpen &&\n          type !== 'modal' &&\n          type !== 'fullscreen' &&\n          type !== 'fullscreenTakeover'\n        }\n        onPress={state.toggle}\n      >\n        {trigger}\n      </PressResponder>\n      <DialogContext.Provider value={context}>{overlay}</DialogContext.Provider>\n    </Fragment>\n  );\n}\n"],"mappings":"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"}

package/dist/components/overlays/Dialog/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 import invariant from "tiny-invariant";
 

package/dist/components/overlays/Dialog/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/components/overlays/Dialog/context.tsx"],"sourcesContent":["import { createContext, HTMLAttributes, useContext } from 'react';\nimport invariant from 'tiny-invariant';\n\nexport interface DialogContextValue extends HTMLAttributes<HTMLElement> {\n  type?:\n    | 'modal'\n    | 'popover'\n    | 'tray'\n    | 'fullscreen'\n    | 'fullscreenTakeover'\n    | 'panel';\n  isDismissable?: boolean;\n  onClose?: (arg?: string) => void;\n  isOpen?: boolean;\n}\n\nexport const DialogContext = createContext<DialogContextValue | null>({});\n\nexport function useDialogContext() {\n  const dialogContext = useContext(DialogContext);\n\n  invariant(dialogContext !== null, '');\n\n  return dialogContext;\n}\n"],"mappings":";;;;;AAgBA,MAAa,gBAAgB,cAAyC,EAAE,CAAC;AAEzE,SAAgB,mBAAmB;CACjC,MAAM,gBAAgB,WAAW,cAAc;AAE/C,WAAU,kBAAkB,MAAM,GAAG;AAErC,QAAO"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/components/overlays/Dialog/context.tsx"],"sourcesContent":["import { createContext, HTMLAttributes, useContext } from 'react';\nimport invariant from 'tiny-invariant';\n\nexport interface DialogContextValue extends HTMLAttributes<HTMLElement> {\n  type?:\n    | 'modal'\n    | 'popover'\n    | 'tray'\n    | 'fullscreen'\n    | 'fullscreenTakeover'\n    | 'panel';\n  isDismissable?: boolean;\n  onClose?: (arg?: string) => void;\n  isOpen?: boolean;\n  /**\n   * Whether closing the dialog restores focus to its trigger. Set by\n   * `DialogTrigger`'s `shouldRestoreFocus` prop; consumed by `Dialog`'s\n   * `FocusScope` (which owns the restore for popover-type dialogs). Defaults\n   * to `true` when absent, so a `Dialog` rendered outside a trigger keeps\n   * restoring focus.\n   */\n  shouldRestoreFocus?: boolean;\n}\n\nexport const DialogContext = createContext<DialogContextValue | null>({});\n\nexport function useDialogContext() {\n  const dialogContext = useContext(DialogContext);\n\n  invariant(dialogContext !== null, '');\n\n  return dialogContext;\n}\n"],"mappings":";;;;;AAwBA,MAAa,gBAAgB,cAAyC,EAAE,CAAC;AAEzE,SAAgB,mBAAmB;CACjC,MAAM,gBAAgB,WAAW,cAAc;AAE/C,WAAU,kBAAkB,MAAM,GAAG;AAErC,QAAO"}

package/dist/components/overlays/Dialog/use-dialog-container.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { DialogContainer } from "./DialogContainer.js";

package/dist/components/overlays/Modal/Modal.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Overlay } from "./Overlay.js";
 import { _Underlay } from "./Underlay.js";

package/dist/components/overlays/Modal/OpenTransitionContext.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/overlays/Modal/OpenTransitionContext.tsx

package/dist/components/overlays/Modal/Overlay.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
 import { Provider, useProviderProps } from "../../../provider.js";
 import { OpenTransitionContext } from "./OpenTransitionContext.js";
@@ -46,7 +46,6 @@ function Overlay(props, ref) {
 	return createPortal(/* @__PURE__ */ jsx(Provider, {
 		ref,
 		children: /* @__PURE__ */ jsx(DisplayTransition, {
-			animateOnMount: true,
 			isShown: !!isOpen,
 			exposeUnmounted: hideOnClose,
 			duration: EXIT_DURATION,

package/dist/components/overlays/Modal/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","names":[],"sources":["../../../../src/components/overlays/Modal/Overlay.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Provider, useProviderProps } from '../../../provider';\nimport { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';\n\nimport { OpenTransitionContext } from './OpenTransitionContext';\nimport { WithCloseBehavior } from './types';\n\nimport type { OverlayProps } from 'react-aria';\nimport type { Props } from '../../../props';\nimport type { ReportedPhase } from '../../helpers/DisplayTransition/DisplayTransition';\n\nexport interface CubeOverlayProps\n  extends Omit<OverlayProps, 'container' | 'nodeRef'>,\n    WithCloseBehavior {\n  container?: HTMLElement | null;\n}\n\nconst EXIT_DURATION = 350;\n\nfunction Overlay(props: CubeOverlayProps, ref) {\n  let {\n    children,\n    isOpen,\n    container = null,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n    hideOnClose = false,\n  } = props;\n  let [exited, setExited] = useState(!isOpen);\n\n  if (isOpen && exited) {\n    setExited(false);\n  }\n\n  let { root } = useProviderProps({} as Props);\n\n  let handlePhaseChange = useCallback(\n    (phase: ReportedPhase) => {\n      switch (phase) {\n        case 'enter':\n          setExited(false);\n          onEnter?.();\n          onEntering?.();\n          break;\n        case 'entered':\n          onEntered?.();\n          break;\n        case 'exit':\n          onExit?.();\n          onExiting?.();\n          break;\n        case 'unmounted':\n          setExited(true);\n          onExited?.();\n          break;\n      }\n    },\n    [onEnter, onEntering, onEntered, onExit, onExiting, onExited],\n  );\n\n  let mountOverlay = isOpen || !exited;\n\n  if (!mountOverlay) {\n    if (!hideOnClose) {\n      return null;\n    }\n  }\n\n  let contents = (\n    <Provider ref={ref}>\n      <DisplayTransition\n        animateOnMount\n        isShown={!!isOpen}\n        exposeUnmounted={hideOnClose}\n        duration={EXIT_DURATION}\n        onPhaseChange={handlePhaseChange}\n      >\n        {({ phase, isShown }) => {\n          return (\n            <OpenTransitionContext.Provider\n              value={{ transitionState: phase as ReportedPhase }}\n            >\n              {Children.map(\n                children,\n                (child) =>\n                  child &&\n                  cloneElement(\n                    child as ReactElement,\n                    {\n                      isOpen: isShown,\n                      transitionState: phase,\n                    } as any,\n                  ),\n              )}\n            </OpenTransitionContext.Provider>\n          );\n        }}\n      </DisplayTransition>\n    </Provider>\n  );\n\n  return createPortal(contents, container || root || document.body);\n}\n\nlet _Overlay = forwardRef(Overlay);\n\n_Overlay.displayName = 'Overlay';\n\nexport { _Overlay as Overlay };\n"],"mappings":";;;;;;;;;AA0BA,MAAM,gBAAgB;AAEtB,SAAS,QAAQ,OAAyB,KAAK;CAC7C,IAAI,EACF,UACA,QACA,YAAY,MACZ,SACA,YACA,WACA,QACA,WACA,UACA,cAAc,UACZ;CACJ,IAAI,CAAC,QAAQ,aAAa,SAAS,CAAC,OAAO;AAE3C,KAAI,UAAU,OACZ,WAAU,MAAM;CAGlB,IAAI,EAAE,SAAS,iBAAiB,EAAE,CAAU;CAE5C,IAAI,oBAAoB,aACrB,UAAyB;AACxB,UAAQ,OAAR;GACE,KAAK;AACH,cAAU,MAAM;AAChB,eAAW;AACX,kBAAc;AACd;GACF,KAAK;AACH,iBAAa;AACb;GACF,KAAK;AACH,cAAU;AACV,iBAAa;AACb;GACF,KAAK;AACH,cAAU,KAAK;AACf,gBAAY;AACZ;;IAGN;EAAC;EAAS;EAAY;EAAW;EAAQ;EAAW;EAAS,CAC9D;AAID,KAAI,EAFe,UAAU,CAAC,SAG5B;MAAI,CAAC,YACH,QAAO;;AAqCX,QAAO,aAhCL,oBAAC;EAAc;YACb,oBAAC;GACC;GACA,SAAS,CAAC,CAAC;GACX,iBAAiB;GACjB,UAAU;GACV,eAAe;cAEb,EAAE,OAAO,cAAc;AACvB,WACE,oBAAC,sBAAsB;KACrB,OAAO,EAAE,iBAAiB,OAAwB;eAEjD,SAAS,IACR,WACC,UACC,SACA,aACE,OACA;MACE,QAAQ;MACR,iBAAiB;MAClB,CACF,CACJ;MAC8B;;IAGnB;GACX,EAGiB,aAAa,QAAQ,SAAS,KAAK;;AAGnE,IAAI,WAAW,WAAW,QAAQ;AAElC,SAAS,cAAc"}
+{"version":3,"file":"Overlay.js","names":[],"sources":["../../../../src/components/overlays/Modal/Overlay.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Provider, useProviderProps } from '../../../provider';\nimport { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';\n\nimport { OpenTransitionContext } from './OpenTransitionContext';\nimport { WithCloseBehavior } from './types';\n\nimport type { OverlayProps } from 'react-aria';\nimport type { Props } from '../../../props';\nimport type { ReportedPhase } from '../../helpers/DisplayTransition/DisplayTransition';\n\nexport interface CubeOverlayProps\n  extends Omit<OverlayProps, 'container' | 'nodeRef'>,\n    WithCloseBehavior {\n  container?: HTMLElement | null;\n}\n\nconst EXIT_DURATION = 350;\n\nfunction Overlay(props: CubeOverlayProps, ref) {\n  let {\n    children,\n    isOpen,\n    container = null,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n    hideOnClose = false,\n  } = props;\n  let [exited, setExited] = useState(!isOpen);\n\n  if (isOpen && exited) {\n    setExited(false);\n  }\n\n  let { root } = useProviderProps({} as Props);\n\n  let handlePhaseChange = useCallback(\n    (phase: ReportedPhase) => {\n      switch (phase) {\n        case 'enter':\n          setExited(false);\n          onEnter?.();\n          onEntering?.();\n          break;\n        case 'entered':\n          onEntered?.();\n          break;\n        case 'exit':\n          onExit?.();\n          onExiting?.();\n          break;\n        case 'unmounted':\n          setExited(true);\n          onExited?.();\n          break;\n      }\n    },\n    [onEnter, onEntering, onEntered, onExit, onExiting, onExited],\n  );\n\n  let mountOverlay = isOpen || !exited;\n\n  if (!mountOverlay) {\n    if (!hideOnClose) {\n      return null;\n    }\n  }\n\n  let contents = (\n    <Provider ref={ref}>\n      <DisplayTransition\n        isShown={!!isOpen}\n        exposeUnmounted={hideOnClose}\n        duration={EXIT_DURATION}\n        onPhaseChange={handlePhaseChange}\n      >\n        {({ phase, isShown }) => {\n          return (\n            <OpenTransitionContext.Provider\n              value={{ transitionState: phase as ReportedPhase }}\n            >\n              {Children.map(\n                children,\n                (child) =>\n                  child &&\n                  cloneElement(\n                    child as ReactElement,\n                    {\n                      isOpen: isShown,\n                      transitionState: phase,\n                    } as any,\n                  ),\n              )}\n            </OpenTransitionContext.Provider>\n          );\n        }}\n      </DisplayTransition>\n    </Provider>\n  );\n\n  return createPortal(contents, container || root || document.body);\n}\n\nlet _Overlay = forwardRef(Overlay);\n\n_Overlay.displayName = 'Overlay';\n\nexport { _Overlay as Overlay };\n"],"mappings":";;;;;;;;;AA0BA,MAAM,gBAAgB;AAEtB,SAAS,QAAQ,OAAyB,KAAK;CAC7C,IAAI,EACF,UACA,QACA,YAAY,MACZ,SACA,YACA,WACA,QACA,WACA,UACA,cAAc,UACZ;CACJ,IAAI,CAAC,QAAQ,aAAa,SAAS,CAAC,OAAO;AAE3C,KAAI,UAAU,OACZ,WAAU,MAAM;CAGlB,IAAI,EAAE,SAAS,iBAAiB,EAAE,CAAU;CAE5C,IAAI,oBAAoB,aACrB,UAAyB;AACxB,UAAQ,OAAR;GACE,KAAK;AACH,cAAU,MAAM;AAChB,eAAW;AACX,kBAAc;AACd;GACF,KAAK;AACH,iBAAa;AACb;GACF,KAAK;AACH,cAAU;AACV,iBAAa;AACb;GACF,KAAK;AACH,cAAU,KAAK;AACf,gBAAY;AACZ;;IAGN;EAAC;EAAS;EAAY;EAAW;EAAQ;EAAW;EAAS,CAC9D;AAID,KAAI,EAFe,UAAU,CAAC,SAG5B;MAAI,CAAC,YACH,QAAO;;AAoCX,QAAO,aA/BL,oBAAC;EAAc;YACb,oBAAC;GACC,SAAS,CAAC,CAAC;GACX,iBAAiB;GACjB,UAAU;GACV,eAAe;cAEb,EAAE,OAAO,cAAc;AACvB,WACE,oBAAC,sBAAsB;KACrB,OAAO,EAAE,iBAAiB,OAAwB;eAEjD,SAAS,IACR,WACC,UACC,SACA,aACE,OACA;MACE,QAAQ;MACR,iBAAiB;MAClB,CACF,CACJ;MAC8B;;IAGnB;GACX,EAGiB,aAAa,QAAQ,SAAS,KAAK;;AAGnE,IAAI,WAAW,WAAW,QAAQ;AAElC,SAAS,cAAc"}

package/dist/components/overlays/Modal/Popover.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Overlay } from "./Overlay.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/overlays/Modal/Tray.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Overlay } from "./Overlay.js";
 import { _Underlay } from "./Underlay.js";

package/dist/components/overlays/Modal/Underlay.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/overlays/Notifications/Notification.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { useNotificationContext } from "./NotificationContext.js";
 import { useEffect, useRef } from "react";
 

package/dist/components/overlays/Notifications/NotificationAction.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { createContext, useContext, useMemo } from "react";

package/dist/components/overlays/Notifications/NotificationCard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { Block } from "../../Block.js";
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/overlays/Notifications/NotificationContext.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/overlays/Notifications/NotificationContext.ts

package/dist/components/overlays/Notifications/NotificationItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { NotificationCard } from "./NotificationCard.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/overlays/Notifications/OverlayContainer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
@@ -271,7 +271,6 @@ function OverlayContainer({ toasts, notifications, onToastExitComplete, onNotifi
 			const itemId = getItemId(item);
 			const visibleIndex = visibleIndexMap.get(itemId) ?? 0;
 			return /* @__PURE__ */ jsx(DisplayTransition, {
-				animateOnMount: true,
 				isShown: !isItemExiting(item),
 				onRest: (transition) => {
 					if (transition === "exit") handleExitComplete(item);

package/dist/components/overlays/Notifications/OverlayContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayContainer.js","names":[],"sources":["../../../../src/components/overlays/Notifications/OverlayContainer.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport {\n  FocusEvent,\n  Key,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\nimport { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';\nimport { Portal } from '../../portal';\nimport { ToastItem } from '../Toast/ToastItem';\n\nimport { NotificationItem } from './NotificationItem';\n\nimport type { InternalToast } from '../Toast/types';\nimport type { DismissReason, InternalNotification } from './types';\n\n// ─── Constants ───────────────────────────────────────────────────────\n\nconst COLLAPSE_VISIBLE_HEIGHT = 10;\nconst CONTAINER_OFFSET = 16;\nconst ITEM_GAP = 8;\nconst DEFAULT_ITEM_HEIGHT = 56;\n\n// ─── Styled Elements ─────────────────────────────────────────────────\n\nconst OverlayContainerElement = tasty({\n  styles: {\n    position: 'fixed',\n    top: '2x',\n    left: '50%',\n    transform: 'translateX(-50%)',\n    zIndex: 100,\n    padding: '1x',\n    height: '0',\n    pointerEvents: 'none',\n  },\n});\n\nconst OverlayItemWrapper = tasty({\n  styles: {\n    position: 'absolute',\n    top: '0',\n    left: '50%',\n    transform: {\n      '': 'translateX(-50%) translateY(-50%)',\n      'isMeasured & isShown': 'translateX(-50%) translateY(0)',\n    },\n    width: 'max-content 50x',\n    pointerEvents: 'auto',\n    transition: {\n      '': 'opacity $transition ease-in, transform $transition ease-in',\n      isMeasured:\n        'top $transition ease-in, opacity $transition ease-in, transform $transition ease-in',\n    },\n    opacity: {\n      '': 0,\n      isShown: 1,\n    },\n  },\n});\n\n// ─── Unified Item Type ───────────────────────────────────────────────\n\ntype OverlayItem =\n  | { kind: 'toast'; data: InternalToast }\n  | { kind: 'notification'; data: InternalNotification };\n\nfunction getItemId(item: OverlayItem): string {\n  return item.data.internalId;\n}\n\nfunction isItemExiting(item: OverlayItem): boolean {\n  return item.data.isExiting === true;\n}\n\nfunction getItemCreatedAt(item: OverlayItem): number {\n  return item.data.createdAt;\n}\n\n// ─── useItemPositions Hook ───────────────────────────────────────────\n\ninterface ItemPositionsResult {\n  heights: Record<string, number>;\n  /** Set of item IDs that have been measured AND painted at their correct position. */\n  settledIds: Set<string>;\n  positions: Map<string, number>;\n  lastPositionsRef: ReturnType<typeof useRef<Map<string, number>>>;\n  itemRefs: ReturnType<typeof useRef<Map<string, HTMLDivElement>>>;\n  createRefCallback: (\n    itemId: string,\n    displayRef: (el: HTMLElement | null) => void,\n  ) => (el: HTMLDivElement | null) => void;\n}\n\n/**\n * Manages height measurement, position calculation, and ref tracking\n * for overlay items. Extracted from OverlayContainer for readability.\n */\nfunction useItemPositions(visibleItems: OverlayItem[]): ItemPositionsResult {\n  const [heights, setHeights] = useState<Record<string, number>>({});\n  const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const lastPositionsRef = useRef<Map<string, number>>(new Map());\n\n  // Items that have been measured AND painted at their correct position.\n  // Lags one frame behind `heights` so the browser paints the item at\n  // its final `top` before the CSS `top` transition is enabled.\n  const [settledIds, setSettledIds] = useState<Set<string>>(new Set());\n  const rafRef = useRef<number | null>(null);\n\n  // Measure heights using layout effect to avoid visible layout shifts.\n  // Runs every render but bails early if nothing changed.\n  useLayoutEffect(() => {\n    const newHeights: Record<string, number> = {};\n    let hasChanges = false;\n\n    itemRefs.current.forEach((el, id) => {\n      const height = el.offsetHeight || DEFAULT_ITEM_HEIGHT;\n      newHeights[id] = height;\n\n      if (heights[id] !== height) {\n        hasChanges = true;\n      }\n    });\n\n    for (const id of Object.keys(heights)) {\n      if (!itemRefs.current.has(id)) {\n        hasChanges = true;\n      }\n    }\n\n    if (hasChanges) {\n      setHeights(newHeights);\n    }\n  });\n\n  // After heights change, schedule settledIds update for the next frame.\n  // This ensures the item is painted at its correct position (with no top\n  // transition) before we enable the transition.\n  useEffect(() => {\n    const heightKeys = Object.keys(heights);\n    const newIds = heightKeys.filter((id) => !settledIds.has(id));\n    const hasStaleIds =\n      settledIds.size > 0 && [...settledIds].some((id) => !(id in heights));\n\n    if (newIds.length === 0 && !hasStaleIds) return;\n\n    if (rafRef.current != null) {\n      cancelAnimationFrame(rafRef.current);\n    }\n\n    // For pruning-only updates (no new items), apply synchronously since\n    // there's no need to wait for a paint frame.\n    if (newIds.length === 0 && hasStaleIds) {\n      setSettledIds((prev) => new Set(heightKeys.filter((id) => prev.has(id))));\n      return;\n    }\n\n    rafRef.current = requestAnimationFrame(() => {\n      rafRef.current = null;\n      setSettledIds((prev) => {\n        const next = new Set<string>();\n\n        // Only keep IDs that still exist in heights (prune removed items)\n        for (const id of heightKeys) {\n          if (prev.has(id)) {\n            next.add(id);\n          }\n        }\n\n        for (const id of newIds) {\n          next.add(id);\n        }\n\n        return next;\n      });\n    });\n\n    return () => {\n      if (rafRef.current != null) {\n        cancelAnimationFrame(rafRef.current);\n        rafRef.current = null;\n      }\n    };\n  }, [heights]);\n\n  const createRefCallback = useCallback(\n    (itemId: string, displayRef: (el: HTMLElement | null) => void) =>\n      (el: HTMLDivElement | null) => {\n        displayRef(el);\n\n        if (el) {\n          itemRefs.current.set(itemId, el);\n        } else {\n          itemRefs.current.delete(itemId);\n        }\n      },\n    [],\n  );\n\n  const positions = useMemo(() => {\n    const posMap = new Map<string, number>();\n    let currentTop = 0;\n\n    for (const item of visibleItems) {\n      const id = getItemId(item);\n      posMap.set(id, currentTop);\n      const height = heights[id] ?? DEFAULT_ITEM_HEIGHT;\n      currentTop += height + ITEM_GAP;\n    }\n\n    return posMap;\n  }, [visibleItems, heights]);\n\n  useEffect(() => {\n    positions.forEach((pos, id) => {\n      lastPositionsRef.current.set(id, pos);\n    });\n  }, [positions]);\n\n  return {\n    heights,\n    settledIds,\n    positions,\n    lastPositionsRef,\n    itemRefs,\n    createRefCallback,\n  };\n}\n\n// ─── useCollapseState Hook ───────────────────────────────────────────\n\ninterface CollapseStateResult {\n  isCollapsed: boolean;\n  handleMouseEnter: () => void;\n  handleMouseLeave: () => void;\n  handleFocus: () => void;\n  handleBlur: (e: FocusEvent) => void;\n  containerRef: RefObject<HTMLDivElement | null>;\n}\n\n/**\n * Manages collapse/expand behavior and pause state for the overlay container.\n * Extracted from OverlayContainer for readability.\n */\nfunction useCollapseState(\n  canCollapse: boolean,\n  allItems: OverlayItem[],\n  itemRefs: ReturnType<typeof useRef<Map<string, HTMLDivElement>>>,\n  onPauseChange: (paused: boolean) => void,\n): CollapseStateResult {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const boundsRef = useRef<DOMRect | null>(null);\n\n  const updateBounds = useCallback(() => {\n    const refs = itemRefs.current;\n\n    if (!refs || refs.size === 0) {\n      boundsRef.current = null;\n      return;\n    }\n\n    let minX = Infinity,\n      minY = Infinity,\n      maxX = -Infinity,\n      maxY = -Infinity;\n\n    refs.forEach((el) => {\n      const rect = el.getBoundingClientRect();\n      minX = Math.min(minX, rect.left);\n      minY = Math.min(minY, rect.top);\n      maxX = Math.max(maxX, rect.right);\n      maxY = Math.max(maxY, rect.bottom);\n    });\n\n    if (typeof DOMRect !== 'undefined') {\n      boundsRef.current = new DOMRect(minX, minY, maxX - minX, maxY - minY);\n    } else {\n      boundsRef.current = {\n        x: minX,\n        y: minY,\n        width: maxX - minX,\n        height: maxY - minY,\n        top: minY,\n        right: maxX,\n        bottom: maxY,\n        left: minX,\n        toJSON: () => ({}),\n      } as DOMRect;\n    }\n  }, [itemRefs]);\n\n  // Track mouse for collapse — expand when mouse leaves bounds\n  useEffect(() => {\n    if (!isCollapsed) return;\n\n    const handleMouseMove = (e: MouseEvent) => {\n      const bounds = boundsRef.current;\n\n      if (!bounds) {\n        setIsCollapsed(false);\n        onPauseChange(false);\n        return;\n      }\n\n      const padding = 20;\n      const isInBounds =\n        e.clientX >= bounds.left - padding &&\n        e.clientX <= bounds.right + padding &&\n        e.clientY >= bounds.top - padding &&\n        e.clientY <= bounds.bottom + padding;\n\n      if (!isInBounds) {\n        setIsCollapsed(false);\n        onPauseChange(false);\n      }\n    };\n\n    window.addEventListener('mousemove', handleMouseMove);\n    return () => window.removeEventListener('mousemove', handleMouseMove);\n  }, [isCollapsed, onPauseChange]);\n\n  // Update bounds when items change\n  useEffect(() => {\n    updateBounds();\n  }, [allItems, updateBounds]);\n\n  const handleMouseEnter = useCallback(() => {\n    updateBounds();\n    onPauseChange(true);\n\n    if (canCollapse) {\n      setIsCollapsed(true);\n    }\n  }, [updateBounds, canCollapse, onPauseChange]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (!isCollapsed) {\n      onPauseChange(false);\n    }\n  }, [isCollapsed, onPauseChange]);\n\n  const handleFocus = useCallback(() => {\n    onPauseChange(true);\n  }, [onPauseChange]);\n\n  const handleBlur = useCallback(\n    (e: FocusEvent) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(e.relatedTarget as Node)\n      ) {\n        onPauseChange(false);\n      }\n    },\n    [onPauseChange],\n  );\n\n  return {\n    isCollapsed,\n    handleMouseEnter,\n    handleMouseLeave,\n    handleFocus,\n    handleBlur,\n    containerRef,\n  };\n}\n\n// ─── Overlay Container ───────────────────────────────────────────────\n//\n// INTENTIONAL: Position calculations are done manually (absolute positioning + JS\n// height tracking) rather than relying on CSS flexbox/grid layout. This is\n// deliberate — the container mixes enter/exit animations, collapse behavior, and\n// heterogeneous item sizes (toasts vs notifications) which require per-item\n// position control. CSS-only solutions (e.g., flex column with gap) break when\n// items exit asynchronously or when collapse transforms need to be computed per-item.\n\nexport interface OverlayContainerProps {\n  toasts: InternalToast[];\n  notifications: InternalNotification[];\n  onToastExitComplete: (internalId: string) => void;\n  onNotificationExitComplete: (internalId: string) => void;\n  onNotificationDismiss: (id: Key, reason: DismissReason) => void;\n  onNotificationRestore: (id: Key) => void;\n  onPauseChange: (paused: boolean) => void;\n}\n\nexport function OverlayContainer({\n  toasts,\n  notifications,\n  onToastExitComplete,\n  onNotificationExitComplete,\n  onNotificationDismiss,\n  onNotificationRestore,\n  onPauseChange,\n}: OverlayContainerProps) {\n  // Merge toasts and notifications into a single ordered list\n  const allItems: OverlayItem[] = useMemo(() => {\n    const items: OverlayItem[] = [\n      ...toasts.map((t): OverlayItem => ({ kind: 'toast', data: t })),\n      ...notifications.map(\n        (n): OverlayItem => ({ kind: 'notification', data: n }),\n      ),\n    ];\n\n    // Sort by createdAt ascending (oldest first = bottom of stack, newest last = top)\n    items.sort((a, b) => getItemCreatedAt(a) - getItemCreatedAt(b));\n\n    return items;\n  }, [toasts, notifications]);\n\n  const visibleItems = useMemo(\n    () => allItems.filter((item) => !isItemExiting(item)),\n    [allItems],\n  );\n  const hasNotifications = notifications.some((n) => !n.isExiting);\n  const hasActionableToasts = toasts.some((t) => !t.isExiting && t.actions);\n  const canCollapse = !hasNotifications && !hasActionableToasts;\n\n  const {\n    heights,\n    settledIds,\n    positions,\n    lastPositionsRef,\n    itemRefs,\n    createRefCallback,\n  } = useItemPositions(visibleItems);\n\n  const {\n    isCollapsed,\n    handleMouseEnter,\n    handleMouseLeave,\n    handleFocus,\n    handleBlur,\n    containerRef,\n  } = useCollapseState(canCollapse, allItems, itemRefs, onPauseChange);\n\n  // ─── Callbacks ─────────────────────────────────────────────────────\n\n  // When the user dismisses a notification they were hovering, the element\n  // is removed from the DOM so mouseLeave never fires. Explicitly unpause\n  // so remaining notifications' timers resume.\n  const handleNotificationDismiss = useEvent(\n    (id: Key, reason: DismissReason) => {\n      onNotificationDismiss(id, reason);\n      onPauseChange(false);\n    },\n  );\n\n  const handleExitComplete = useEvent((item: OverlayItem) => {\n    const id = getItemId(item);\n    lastPositionsRef.current?.delete(id);\n\n    if (item.kind === 'toast') {\n      onToastExitComplete(item.data.internalId);\n    } else {\n      onNotificationExitComplete(item.data.internalId);\n    }\n  });\n\n  // useCallback (not useEvent) because this is called during render.\n  // useEvent defers the ref update to useLayoutEffect, so during render\n  // it would still read the previous closure's positions/heights.\n  const getItemStyle = useCallback(\n    (item: OverlayItem, index: number, total: number) => {\n      const id = getItemId(item);\n      const baseTop =\n        positions.get(id) ?? lastPositionsRef.current?.get(id) ?? 0;\n      const height = heights[id] ?? DEFAULT_ITEM_HEIGHT;\n\n      if (!isCollapsed || !canCollapse) {\n        return { top: `${baseTop}px` };\n      }\n\n      const isNewest = index === total - 1;\n      const collapsedTop = COLLAPSE_VISIBLE_HEIGHT - CONTAINER_OFFSET - height;\n\n      return {\n        top: `${collapsedTop}px`,\n        zIndex: index,\n        opacity: isNewest ? 1 : 0,\n        pointerEvents: 'none' as const,\n      };\n    },\n    [isCollapsed, canCollapse, positions, heights, lastPositionsRef],\n  );\n\n  // Build a visibleIndex lookup map to avoid O(n²) findIndex inside render loop\n  const visibleIndexMap = useMemo(() => {\n    const map = new Map<string, number>();\n\n    visibleItems.forEach((item, index) => {\n      map.set(getItemId(item), index);\n    });\n\n    return map;\n  }, [visibleItems]);\n\n  if (allItems.length === 0) return null;\n\n  return (\n    <Portal>\n      <OverlayContainerElement\n        ref={containerRef}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      >\n        {allItems.map((item) => {\n          const itemId = getItemId(item);\n          const visibleIndex = visibleIndexMap.get(itemId) ?? 0;\n          const isExiting = isItemExiting(item);\n\n          return (\n            <DisplayTransition\n              key={itemId}\n              animateOnMount\n              isShown={!isExiting}\n              onRest={(transition) => {\n                if (transition === 'exit') {\n                  handleExitComplete(item);\n                }\n              }}\n            >\n              {({ isShown, ref }) => (\n                <OverlayItemWrapper\n                  ref={createRefCallback(itemId, ref)}\n                  mods={{ isShown, isMeasured: settledIds.has(itemId) }}\n                  style={getItemStyle(item, visibleIndex, visibleItems.length)}\n                  onMouseEnter={handleMouseEnter}\n                  onMouseLeave={handleMouseLeave}\n                >\n                  {item.kind === 'toast' ? (\n                    <ToastItem\n                      {...item.data.itemProps}\n                      title={item.data.title}\n                      description={item.data.description}\n                      theme={item.data.theme}\n                      icon={item.data.icon}\n                      isLoading={item.data.isLoading}\n                      actions={item.data.actions}\n                    />\n                  ) : (\n                    <NotificationItem\n                      notification={item.data}\n                      onDismiss={handleNotificationDismiss}\n                      onRestore={onNotificationRestore}\n                    />\n                  )}\n                </OverlayItemWrapper>\n              )}\n            </DisplayTransition>\n          );\n        })}\n      </OverlayContainerElement>\n    </Portal>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"OverlayContainer.js","names":[],"sources":["../../../../src/components/overlays/Notifications/OverlayContainer.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport {\n  FocusEvent,\n  Key,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\nimport { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';\nimport { Portal } from '../../portal';\nimport { ToastItem } from '../Toast/ToastItem';\n\nimport { NotificationItem } from './NotificationItem';\n\nimport type { InternalToast } from '../Toast/types';\nimport type { DismissReason, InternalNotification } from './types';\n\n// ─── Constants ───────────────────────────────────────────────────────\n\nconst COLLAPSE_VISIBLE_HEIGHT = 10;\nconst CONTAINER_OFFSET = 16;\nconst ITEM_GAP = 8;\nconst DEFAULT_ITEM_HEIGHT = 56;\n\n// ─── Styled Elements ─────────────────────────────────────────────────\n\nconst OverlayContainerElement = tasty({\n  styles: {\n    position: 'fixed',\n    top: '2x',\n    left: '50%',\n    transform: 'translateX(-50%)',\n    zIndex: 100,\n    padding: '1x',\n    height: '0',\n    pointerEvents: 'none',\n  },\n});\n\nconst OverlayItemWrapper = tasty({\n  styles: {\n    position: 'absolute',\n    top: '0',\n    left: '50%',\n    transform: {\n      '': 'translateX(-50%) translateY(-50%)',\n      'isMeasured & isShown': 'translateX(-50%) translateY(0)',\n    },\n    width: 'max-content 50x',\n    pointerEvents: 'auto',\n    transition: {\n      '': 'opacity $transition ease-in, transform $transition ease-in',\n      isMeasured:\n        'top $transition ease-in, opacity $transition ease-in, transform $transition ease-in',\n    },\n    opacity: {\n      '': 0,\n      isShown: 1,\n    },\n  },\n});\n\n// ─── Unified Item Type ───────────────────────────────────────────────\n\ntype OverlayItem =\n  | { kind: 'toast'; data: InternalToast }\n  | { kind: 'notification'; data: InternalNotification };\n\nfunction getItemId(item: OverlayItem): string {\n  return item.data.internalId;\n}\n\nfunction isItemExiting(item: OverlayItem): boolean {\n  return item.data.isExiting === true;\n}\n\nfunction getItemCreatedAt(item: OverlayItem): number {\n  return item.data.createdAt;\n}\n\n// ─── useItemPositions Hook ───────────────────────────────────────────\n\ninterface ItemPositionsResult {\n  heights: Record<string, number>;\n  /** Set of item IDs that have been measured AND painted at their correct position. */\n  settledIds: Set<string>;\n  positions: Map<string, number>;\n  lastPositionsRef: ReturnType<typeof useRef<Map<string, number>>>;\n  itemRefs: ReturnType<typeof useRef<Map<string, HTMLDivElement>>>;\n  createRefCallback: (\n    itemId: string,\n    displayRef: (el: HTMLElement | null) => void,\n  ) => (el: HTMLDivElement | null) => void;\n}\n\n/**\n * Manages height measurement, position calculation, and ref tracking\n * for overlay items. Extracted from OverlayContainer for readability.\n */\nfunction useItemPositions(visibleItems: OverlayItem[]): ItemPositionsResult {\n  const [heights, setHeights] = useState<Record<string, number>>({});\n  const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const lastPositionsRef = useRef<Map<string, number>>(new Map());\n\n  // Items that have been measured AND painted at their correct position.\n  // Lags one frame behind `heights` so the browser paints the item at\n  // its final `top` before the CSS `top` transition is enabled.\n  const [settledIds, setSettledIds] = useState<Set<string>>(new Set());\n  const rafRef = useRef<number | null>(null);\n\n  // Measure heights using layout effect to avoid visible layout shifts.\n  // Runs every render but bails early if nothing changed.\n  useLayoutEffect(() => {\n    const newHeights: Record<string, number> = {};\n    let hasChanges = false;\n\n    itemRefs.current.forEach((el, id) => {\n      const height = el.offsetHeight || DEFAULT_ITEM_HEIGHT;\n      newHeights[id] = height;\n\n      if (heights[id] !== height) {\n        hasChanges = true;\n      }\n    });\n\n    for (const id of Object.keys(heights)) {\n      if (!itemRefs.current.has(id)) {\n        hasChanges = true;\n      }\n    }\n\n    if (hasChanges) {\n      setHeights(newHeights);\n    }\n  });\n\n  // After heights change, schedule settledIds update for the next frame.\n  // This ensures the item is painted at its correct position (with no top\n  // transition) before we enable the transition.\n  useEffect(() => {\n    const heightKeys = Object.keys(heights);\n    const newIds = heightKeys.filter((id) => !settledIds.has(id));\n    const hasStaleIds =\n      settledIds.size > 0 && [...settledIds].some((id) => !(id in heights));\n\n    if (newIds.length === 0 && !hasStaleIds) return;\n\n    if (rafRef.current != null) {\n      cancelAnimationFrame(rafRef.current);\n    }\n\n    // For pruning-only updates (no new items), apply synchronously since\n    // there's no need to wait for a paint frame.\n    if (newIds.length === 0 && hasStaleIds) {\n      setSettledIds((prev) => new Set(heightKeys.filter((id) => prev.has(id))));\n      return;\n    }\n\n    rafRef.current = requestAnimationFrame(() => {\n      rafRef.current = null;\n      setSettledIds((prev) => {\n        const next = new Set<string>();\n\n        // Only keep IDs that still exist in heights (prune removed items)\n        for (const id of heightKeys) {\n          if (prev.has(id)) {\n            next.add(id);\n          }\n        }\n\n        for (const id of newIds) {\n          next.add(id);\n        }\n\n        return next;\n      });\n    });\n\n    return () => {\n      if (rafRef.current != null) {\n        cancelAnimationFrame(rafRef.current);\n        rafRef.current = null;\n      }\n    };\n  }, [heights]);\n\n  const createRefCallback = useCallback(\n    (itemId: string, displayRef: (el: HTMLElement | null) => void) =>\n      (el: HTMLDivElement | null) => {\n        displayRef(el);\n\n        if (el) {\n          itemRefs.current.set(itemId, el);\n        } else {\n          itemRefs.current.delete(itemId);\n        }\n      },\n    [],\n  );\n\n  const positions = useMemo(() => {\n    const posMap = new Map<string, number>();\n    let currentTop = 0;\n\n    for (const item of visibleItems) {\n      const id = getItemId(item);\n      posMap.set(id, currentTop);\n      const height = heights[id] ?? DEFAULT_ITEM_HEIGHT;\n      currentTop += height + ITEM_GAP;\n    }\n\n    return posMap;\n  }, [visibleItems, heights]);\n\n  useEffect(() => {\n    positions.forEach((pos, id) => {\n      lastPositionsRef.current.set(id, pos);\n    });\n  }, [positions]);\n\n  return {\n    heights,\n    settledIds,\n    positions,\n    lastPositionsRef,\n    itemRefs,\n    createRefCallback,\n  };\n}\n\n// ─── useCollapseState Hook ───────────────────────────────────────────\n\ninterface CollapseStateResult {\n  isCollapsed: boolean;\n  handleMouseEnter: () => void;\n  handleMouseLeave: () => void;\n  handleFocus: () => void;\n  handleBlur: (e: FocusEvent) => void;\n  containerRef: RefObject<HTMLDivElement | null>;\n}\n\n/**\n * Manages collapse/expand behavior and pause state for the overlay container.\n * Extracted from OverlayContainer for readability.\n */\nfunction useCollapseState(\n  canCollapse: boolean,\n  allItems: OverlayItem[],\n  itemRefs: ReturnType<typeof useRef<Map<string, HTMLDivElement>>>,\n  onPauseChange: (paused: boolean) => void,\n): CollapseStateResult {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const boundsRef = useRef<DOMRect | null>(null);\n\n  const updateBounds = useCallback(() => {\n    const refs = itemRefs.current;\n\n    if (!refs || refs.size === 0) {\n      boundsRef.current = null;\n      return;\n    }\n\n    let minX = Infinity,\n      minY = Infinity,\n      maxX = -Infinity,\n      maxY = -Infinity;\n\n    refs.forEach((el) => {\n      const rect = el.getBoundingClientRect();\n      minX = Math.min(minX, rect.left);\n      minY = Math.min(minY, rect.top);\n      maxX = Math.max(maxX, rect.right);\n      maxY = Math.max(maxY, rect.bottom);\n    });\n\n    if (typeof DOMRect !== 'undefined') {\n      boundsRef.current = new DOMRect(minX, minY, maxX - minX, maxY - minY);\n    } else {\n      boundsRef.current = {\n        x: minX,\n        y: minY,\n        width: maxX - minX,\n        height: maxY - minY,\n        top: minY,\n        right: maxX,\n        bottom: maxY,\n        left: minX,\n        toJSON: () => ({}),\n      } as DOMRect;\n    }\n  }, [itemRefs]);\n\n  // Track mouse for collapse — expand when mouse leaves bounds\n  useEffect(() => {\n    if (!isCollapsed) return;\n\n    const handleMouseMove = (e: MouseEvent) => {\n      const bounds = boundsRef.current;\n\n      if (!bounds) {\n        setIsCollapsed(false);\n        onPauseChange(false);\n        return;\n      }\n\n      const padding = 20;\n      const isInBounds =\n        e.clientX >= bounds.left - padding &&\n        e.clientX <= bounds.right + padding &&\n        e.clientY >= bounds.top - padding &&\n        e.clientY <= bounds.bottom + padding;\n\n      if (!isInBounds) {\n        setIsCollapsed(false);\n        onPauseChange(false);\n      }\n    };\n\n    window.addEventListener('mousemove', handleMouseMove);\n    return () => window.removeEventListener('mousemove', handleMouseMove);\n  }, [isCollapsed, onPauseChange]);\n\n  // Update bounds when items change\n  useEffect(() => {\n    updateBounds();\n  }, [allItems, updateBounds]);\n\n  const handleMouseEnter = useCallback(() => {\n    updateBounds();\n    onPauseChange(true);\n\n    if (canCollapse) {\n      setIsCollapsed(true);\n    }\n  }, [updateBounds, canCollapse, onPauseChange]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (!isCollapsed) {\n      onPauseChange(false);\n    }\n  }, [isCollapsed, onPauseChange]);\n\n  const handleFocus = useCallback(() => {\n    onPauseChange(true);\n  }, [onPauseChange]);\n\n  const handleBlur = useCallback(\n    (e: FocusEvent) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(e.relatedTarget as Node)\n      ) {\n        onPauseChange(false);\n      }\n    },\n    [onPauseChange],\n  );\n\n  return {\n    isCollapsed,\n    handleMouseEnter,\n    handleMouseLeave,\n    handleFocus,\n    handleBlur,\n    containerRef,\n  };\n}\n\n// ─── Overlay Container ───────────────────────────────────────────────\n//\n// INTENTIONAL: Position calculations are done manually (absolute positioning + JS\n// height tracking) rather than relying on CSS flexbox/grid layout. This is\n// deliberate — the container mixes enter/exit animations, collapse behavior, and\n// heterogeneous item sizes (toasts vs notifications) which require per-item\n// position control. CSS-only solutions (e.g., flex column with gap) break when\n// items exit asynchronously or when collapse transforms need to be computed per-item.\n\nexport interface OverlayContainerProps {\n  toasts: InternalToast[];\n  notifications: InternalNotification[];\n  onToastExitComplete: (internalId: string) => void;\n  onNotificationExitComplete: (internalId: string) => void;\n  onNotificationDismiss: (id: Key, reason: DismissReason) => void;\n  onNotificationRestore: (id: Key) => void;\n  onPauseChange: (paused: boolean) => void;\n}\n\nexport function OverlayContainer({\n  toasts,\n  notifications,\n  onToastExitComplete,\n  onNotificationExitComplete,\n  onNotificationDismiss,\n  onNotificationRestore,\n  onPauseChange,\n}: OverlayContainerProps) {\n  // Merge toasts and notifications into a single ordered list\n  const allItems: OverlayItem[] = useMemo(() => {\n    const items: OverlayItem[] = [\n      ...toasts.map((t): OverlayItem => ({ kind: 'toast', data: t })),\n      ...notifications.map(\n        (n): OverlayItem => ({ kind: 'notification', data: n }),\n      ),\n    ];\n\n    // Sort by createdAt ascending (oldest first = bottom of stack, newest last = top)\n    items.sort((a, b) => getItemCreatedAt(a) - getItemCreatedAt(b));\n\n    return items;\n  }, [toasts, notifications]);\n\n  const visibleItems = useMemo(\n    () => allItems.filter((item) => !isItemExiting(item)),\n    [allItems],\n  );\n  const hasNotifications = notifications.some((n) => !n.isExiting);\n  const hasActionableToasts = toasts.some((t) => !t.isExiting && t.actions);\n  const canCollapse = !hasNotifications && !hasActionableToasts;\n\n  const {\n    heights,\n    settledIds,\n    positions,\n    lastPositionsRef,\n    itemRefs,\n    createRefCallback,\n  } = useItemPositions(visibleItems);\n\n  const {\n    isCollapsed,\n    handleMouseEnter,\n    handleMouseLeave,\n    handleFocus,\n    handleBlur,\n    containerRef,\n  } = useCollapseState(canCollapse, allItems, itemRefs, onPauseChange);\n\n  // ─── Callbacks ─────────────────────────────────────────────────────\n\n  // When the user dismisses a notification they were hovering, the element\n  // is removed from the DOM so mouseLeave never fires. Explicitly unpause\n  // so remaining notifications' timers resume.\n  const handleNotificationDismiss = useEvent(\n    (id: Key, reason: DismissReason) => {\n      onNotificationDismiss(id, reason);\n      onPauseChange(false);\n    },\n  );\n\n  const handleExitComplete = useEvent((item: OverlayItem) => {\n    const id = getItemId(item);\n    lastPositionsRef.current?.delete(id);\n\n    if (item.kind === 'toast') {\n      onToastExitComplete(item.data.internalId);\n    } else {\n      onNotificationExitComplete(item.data.internalId);\n    }\n  });\n\n  // useCallback (not useEvent) because this is called during render.\n  // useEvent defers the ref update to useLayoutEffect, so during render\n  // it would still read the previous closure's positions/heights.\n  const getItemStyle = useCallback(\n    (item: OverlayItem, index: number, total: number) => {\n      const id = getItemId(item);\n      const baseTop =\n        positions.get(id) ?? lastPositionsRef.current?.get(id) ?? 0;\n      const height = heights[id] ?? DEFAULT_ITEM_HEIGHT;\n\n      if (!isCollapsed || !canCollapse) {\n        return { top: `${baseTop}px` };\n      }\n\n      const isNewest = index === total - 1;\n      const collapsedTop = COLLAPSE_VISIBLE_HEIGHT - CONTAINER_OFFSET - height;\n\n      return {\n        top: `${collapsedTop}px`,\n        zIndex: index,\n        opacity: isNewest ? 1 : 0,\n        pointerEvents: 'none' as const,\n      };\n    },\n    [isCollapsed, canCollapse, positions, heights, lastPositionsRef],\n  );\n\n  // Build a visibleIndex lookup map to avoid O(n²) findIndex inside render loop\n  const visibleIndexMap = useMemo(() => {\n    const map = new Map<string, number>();\n\n    visibleItems.forEach((item, index) => {\n      map.set(getItemId(item), index);\n    });\n\n    return map;\n  }, [visibleItems]);\n\n  if (allItems.length === 0) return null;\n\n  return (\n    <Portal>\n      <OverlayContainerElement\n        ref={containerRef}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      >\n        {allItems.map((item) => {\n          const itemId = getItemId(item);\n          const visibleIndex = visibleIndexMap.get(itemId) ?? 0;\n          const isExiting = isItemExiting(item);\n\n          return (\n            <DisplayTransition\n              key={itemId}\n              isShown={!isExiting}\n              onRest={(transition) => {\n                if (transition === 'exit') {\n                  handleExitComplete(item);\n                }\n              }}\n            >\n              {({ isShown, ref }) => (\n                <OverlayItemWrapper\n                  ref={createRefCallback(itemId, ref)}\n                  mods={{ isShown, isMeasured: settledIds.has(itemId) }}\n                  style={getItemStyle(item, visibleIndex, visibleItems.length)}\n                  onMouseEnter={handleMouseEnter}\n                  onMouseLeave={handleMouseLeave}\n                >\n                  {item.kind === 'toast' ? (\n                    <ToastItem\n                      {...item.data.itemProps}\n                      title={item.data.title}\n                      description={item.data.description}\n                      theme={item.data.theme}\n                      icon={item.data.icon}\n                      isLoading={item.data.isLoading}\n                      actions={item.data.actions}\n                    />\n                  ) : (\n                    <NotificationItem\n                      notification={item.data}\n                      onDismiss={handleNotificationDismiss}\n                      onRestore={onNotificationRestore}\n                    />\n                  )}\n                </OverlayItemWrapper>\n              )}\n            </DisplayTransition>\n          );\n        })}\n      </OverlayContainerElement>\n    </Portal>\n  );\n}\n"],"mappings":"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"}

package/dist/components/overlays/Notifications/OverlayProvider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { NotificationContext, PersistentNotificationsContext, ToastContext, useNotificationContext, useToastContext } from "./NotificationContext.js";
 import { OverlayContainer } from "./OverlayContainer.js";
 import { useNotificationState } from "./use-notification-state.js";

package/dist/components/overlays/Notifications/PersistentNotificationsList.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/overlays/Notifications/dismissed-storage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 //#region src/components/overlays/Notifications/dismissed-storage.ts
 const STORAGE_KEY = "cube-ui-dismissed-notifications";
 const TTL_MS = 864e5;

package/dist/components/overlays/Notifications/format-relative-time.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 //#region src/components/overlays/Notifications/format-relative-time.ts
 /**
 * Lightweight relative time formatter.

package/dist/components/overlays/Notifications/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { useToastContext } from "./NotificationContext.js";
 import { NotificationAction } from "./NotificationAction.js";
 import { NotificationCard } from "./NotificationCard.js";

package/dist/components/overlays/Notifications/use-notification-state.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useRef, useState } from "react";
 

package/dist/components/overlays/Notifications/use-notifications.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { useNotificationContext } from "./NotificationContext.js";

package/dist/components/overlays/Notifications/use-overlay-timers.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useEffect, useRef } from "react";
 

package/dist/components/overlays/Notifications/use-persistent-notifications.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { usePersistentNotificationsContext } from "./NotificationContext.js";
 import { useMemo } from "react";
 

package/dist/components/overlays/Notifications/use-persistent-state.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { cleanupAndGetValidIds, saveDismissedId } from "./dismissed-storage.js";
 import { useRef, useState } from "react";

package/dist/components/overlays/Notifications/use-toast-state.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useRef, useState } from "react";
 

package/dist/components/overlays/Toast/ToastItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { _Item } from "../../content/Item/Item.js";
 import { getThemeIcon } from "./useToast.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/overlays/Toast/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { useToastContext } from "../Notifications/NotificationContext.js";
 import { useProgressToast } from "./useProgressToast.js";
 import { getThemeIcon, useToast } from "./useToast.js";

package/dist/components/overlays/Toast/useProgressToast.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/overlays/Toast/useToast.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { CheckIcon } from "../../../icons/CheckIcon.js";
 import { DangerIcon } from "../../../icons/DangerIcon.js";
 import { InfoCircleIcon } from "../../../icons/InfoCircleIcon.js";

package/dist/components/overlays/Tooltip/Tooltip.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";