@cube-dev/ui-kit 0.161.0 → 0.163.0

package/dist/components/other/Calendar/RangeCalendar.js

@@ -1,30 +1,14 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
-import { _Title } from "../../content/Title.js";
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
-import { Space } from "../../layout/Space.js";
-import { LeftIcon } from "../../../icons/LeftIcon.js";
-import { RightIcon } from "../../../icons/RightIcon.js";
-import { Button } from "../../actions/index.js";
-import { CalendarGrid } from "./CalendarGrid.js";
-import { tasty } from "@tenphi/tasty";
+import { CalendarPanel } from "./CalendarPanel.js";
 import { forwardRef, useImperativeHandle, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useLocale, useRangeCalendar } from "react-aria";
 import { createDOMRef } from "@react-spectrum/utils";
 import { useRangeCalendarState } from "react-stately";
 import { createCalendar } from "@internationalized/date";
 
 //#region src/components/other/Calendar/RangeCalendar.tsx
-const CalendarElement = tasty({ styles: {
-	padding: "1x",
-	gap: "1x"
-} });
-const CalendarHeaderElement = tasty({ styles: {
-	display: "flex",
-	placeContent: "center space-between",
-	placeItems: "center",
-	gap: "1.5x"
-} });
 function RangeCalendar(props, ref) {
 	props = useProviderProps(props);
 	let { locale } = useLocale();
@@ -41,27 +25,14 @@ function RangeCalendar(props, ref) {
 		}
 	}));
 	let { calendarProps, prevButtonProps, nextButtonProps, title } = useRangeCalendar(props, state, domRef);
-	return /* @__PURE__ */ jsxs(CalendarElement, {
-		ref: domRef,
-		...calendarProps,
-		children: [/* @__PURE__ */ jsxs(CalendarHeaderElement, { children: [/* @__PURE__ */ jsx(_Title, {
-			level: 6,
-			preset: "h6",
-			children: title
-		}), /* @__PURE__ */ jsxs(Space, {
-			gap: ".5x",
-			children: [/* @__PURE__ */ jsx(Button, {
-				"data-popover-keep": true,
-				size: "small",
-				...prevButtonProps,
-				icon: /* @__PURE__ */ jsx(LeftIcon, {})
-			}), /* @__PURE__ */ jsx(Button, {
-				"data-popover-keep": true,
-				size: "small",
-				...nextButtonProps,
-				icon: /* @__PURE__ */ jsx(RightIcon, {})
-			})]
-		})] }), /* @__PURE__ */ jsx(CalendarGrid, { state })]
+	return /* @__PURE__ */ jsx(CalendarPanel, {
+		elementRef: domRef,
+		state,
+		title,
+		calendarProps,
+		prevButtonProps,
+		nextButtonProps,
+		hasMonthYearNavigation: props.hasMonthYearNavigation
 	});
 }
 const _RangeCalendar = forwardRef(RangeCalendar);

package/dist/components/other/Calendar/RangeCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeCalendar.js","names":["Title"],"sources":["../../../../src/components/other/Calendar/RangeCalendar.tsx"],"sourcesContent":["import { createCalendar } from '@internationalized/date';\nimport { createDOMRef } from '@react-spectrum/utils';\nimport { FocusableRef } from '@react-types/shared';\nimport { tasty } from '@tenphi/tasty';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport {\n  AriaRangeCalendarProps,\n  DateValue,\n  useLocale,\n  useRangeCalendar,\n} from 'react-aria';\nimport { useRangeCalendarState } from 'react-stately';\n\nimport { LeftIcon, RightIcon } from '../../../icons';\nimport { useProviderProps } from '../../../provider';\nimport { Button } from '../../actions';\nimport { Title } from '../../content/Title';\nimport { Space } from '../../layout/Space';\n\nimport { CalendarGrid } from './CalendarGrid';\n\nconst CalendarElement = tasty({\n  styles: {\n    padding: '1x',\n    gap: '1x',\n  },\n});\n\nconst CalendarHeaderElement = tasty({\n  styles: {\n    display: 'flex',\n    placeContent: 'center space-between',\n    placeItems: 'center',\n    gap: '1.5x',\n  },\n});\n\nfunction RangeCalendar<T extends DateValue>(\n  props: AriaRangeCalendarProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n\n  let { locale } = useLocale();\n  let state = useRangeCalendarState({\n    ...props,\n    locale,\n    createCalendar,\n  });\n\n  let domRef = useRef(null);\n  useImperativeHandle(ref, () => ({\n    ...createDOMRef(domRef),\n    focus() {\n      state.setFocused(true);\n    },\n  }));\n\n  let { calendarProps, prevButtonProps, nextButtonProps, title } =\n    useRangeCalendar(props, state, domRef);\n\n  return (\n    <CalendarElement ref={domRef} {...calendarProps}>\n      <CalendarHeaderElement>\n        <Title level={6} preset=\"h6\">\n          {title}\n        </Title>\n        <Space gap=\".5x\">\n          <Button\n            data-popover-keep\n            size=\"small\"\n            {...prevButtonProps}\n            icon={<LeftIcon />}\n          />\n          <Button\n            data-popover-keep\n            size=\"small\"\n            {...nextButtonProps}\n            icon={<RightIcon />}\n          />\n        </Space>\n      </CalendarHeaderElement>\n      <CalendarGrid state={state} />\n    </CalendarElement>\n  );\n}\n\nconst _RangeCalendar = forwardRef(RangeCalendar);\n\n_RangeCalendar.displayName = 'RangeCalendar';\n\nexport { _RangeCalendar as RangeCalendar };\n\nexport type { AriaRangeCalendarProps as CubeRangeCalendarProps };\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAM,kBAAkB,MAAM,EAC5B,QAAQ;CACN,SAAS;CACT,KAAK;CACN,EACF,CAAC;AAEF,MAAM,wBAAwB,MAAM,EAClC,QAAQ;CACN,SAAS;CACT,cAAc;CACd,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,SAAS,cACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;CAE/B,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,sBAAsB;EAChC,GAAG;EACH;EACA;EACD,CAAC;CAEF,IAAI,SAAS,OAAO,KAAK;AACzB,qBAAoB,YAAY;EAC9B,GAAG,aAAa,OAAO;EACvB,QAAQ;AACN,SAAM,WAAW,KAAK;;EAEzB,EAAE;CAEH,IAAI,EAAE,eAAe,iBAAiB,iBAAiB,UACrD,iBAAiB,OAAO,OAAO,OAAO;AAExC,QACE,qBAAC;EAAgB,KAAK;EAAQ,GAAI;aAChC,qBAAC,oCACC,oBAACA;GAAM,OAAO;GAAG,QAAO;aACrB;IACK,EACR,qBAAC;GAAM,KAAI;cACT,oBAAC;IACC;IACA,MAAK;IACL,GAAI;IACJ,MAAM,oBAAC,aAAW;KAClB,EACF,oBAAC;IACC;IACA,MAAK;IACL,GAAI;IACJ,MAAM,oBAAC,cAAY;KACnB;IACI,IACc,EACxB,oBAAC,gBAAoB,QAAS;GACd;;AAItB,MAAM,iBAAiB,WAAW,cAAc;AAEhD,eAAe,cAAc"}
+{"version":3,"file":"RangeCalendar.js","names":[],"sources":["../../../../src/components/other/Calendar/RangeCalendar.tsx"],"sourcesContent":["import { createCalendar } from '@internationalized/date';\nimport { createDOMRef } from '@react-spectrum/utils';\nimport { FocusableRef } from '@react-types/shared';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport {\n  AriaRangeCalendarProps,\n  DateValue,\n  useLocale,\n  useRangeCalendar,\n} from 'react-aria';\nimport { useRangeCalendarState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\n\nimport { CalendarPanel } from './CalendarPanel';\nimport { CalendarCoreProps, RangeCalendarValueProps } from './types';\n\nexport interface CubeRangeCalendarProps<T extends DateValue = DateValue>\n  extends AriaRangeCalendarProps<T>,\n    CalendarCoreProps,\n    RangeCalendarValueProps {}\n\nfunction RangeCalendar<T extends DateValue>(\n  props: CubeRangeCalendarProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n\n  let { locale } = useLocale();\n  let state = useRangeCalendarState({\n    ...props,\n    locale,\n    createCalendar,\n  });\n\n  let domRef = useRef(null);\n  useImperativeHandle(ref, () => ({\n    ...createDOMRef(domRef),\n    focus() {\n      state.setFocused(true);\n    },\n  }));\n\n  let { calendarProps, prevButtonProps, nextButtonProps, title } =\n    useRangeCalendar(props, state, domRef);\n\n  return (\n    <CalendarPanel\n      elementRef={domRef}\n      state={state}\n      title={title}\n      calendarProps={calendarProps}\n      prevButtonProps={prevButtonProps}\n      nextButtonProps={nextButtonProps}\n      hasMonthYearNavigation={props.hasMonthYearNavigation}\n    />\n  );\n}\n\nconst _RangeCalendar = forwardRef(RangeCalendar);\n\n_RangeCalendar.displayName = 'RangeCalendar';\n\nexport { _RangeCalendar as RangeCalendar };\n"],"mappings":";;;;;;;;;;;AAsBA,SAAS,cACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;CAE/B,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,sBAAsB;EAChC,GAAG;EACH;EACA;EACD,CAAC;CAEF,IAAI,SAAS,OAAO,KAAK;AACzB,qBAAoB,YAAY;EAC9B,GAAG,aAAa,OAAO;EACvB,QAAQ;AACN,SAAM,WAAW,KAAK;;EAEzB,EAAE;CAEH,IAAI,EAAE,eAAe,iBAAiB,iBAAiB,UACrD,iBAAiB,OAAO,OAAO,OAAO;AAExC,QACE,oBAAC;EACC,YAAY;EACL;EACA;EACQ;EACE;EACA;EACjB,wBAAwB,MAAM;GAC9B;;AAIN,MAAM,iBAAiB,WAAW,cAAc;AAEhD,eAAe,cAAc"}

package/dist/components/other/Calendar/styled.js

@@ -0,0 +1,64 @@
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+import { tasty } from "@tenphi/tasty";
+
+//#region src/components/other/Calendar/styled.tsx
+/**
+* Every calendar flavour (day, range, period) shares the same shell so the
+* popover keeps a stable size and rhythm when the user switches between the
+* day grid and the month / year panels.
+*/
+const CalendarElement = tasty({ styles: {
+	display: "grid",
+	width: "max-content",
+	padding: "1x",
+	gap: "1x"
+} });
+const CalendarHeaderElement = tasty({ styles: {
+	display: "flex",
+	placeContent: "center space-between",
+	placeItems: "center",
+	gap: "1.5x"
+} });
+/**
+* The interactive states shared by day cells and period (month / quarter /
+* year) cells. Kept in one place so a day and a month never drift apart.
+*/
+const CALENDAR_CELL_STYLES = {
+	preset: "t3m",
+	display: "grid",
+	placeItems: "center",
+	border: 0,
+	fill: {
+		"": "#primary.0",
+		":hover": "#primary.16",
+		rangeHover: "#primary.16",
+		pressed: "#primary.10",
+		selected: "#primary",
+		"selected & :hover": "#primary-text",
+		"selected & pressed": "#primary",
+		"disabled | unavailable": "#primary.0",
+		"selected & (disabled | unavailable)": "#primary.30"
+	},
+	color: {
+		"": "#dark",
+		outside: "#dark.30",
+		"current & !selected": "#primary-text",
+		selected: "#white",
+		"disabled | unavailable": "#dark.30",
+		"selected & (disabled | unavailable)": "#white"
+	},
+	outline: {
+		"": "1bw #primary-text.0",
+		focused: "1bw #primary-text"
+	},
+	outlineOffset: .5,
+	radius: true,
+	cursor: {
+		"": "$pointer",
+		"disabled | unavailable": "default"
+	}
+};
+
+//#endregion
+export { CALENDAR_CELL_STYLES, CalendarElement, CalendarHeaderElement };
+//# sourceMappingURL=styled.js.map

package/dist/components/other/Calendar/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","names":[],"sources":["../../../../src/components/other/Calendar/styled.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\n\n/**\n * Every calendar flavour (day, range, period) shares the same shell so the\n * popover keeps a stable size and rhythm when the user switches between the\n * day grid and the month / year panels.\n */\nexport const CalendarElement = tasty({\n  styles: {\n    display: 'grid',\n    // Shrink-wrap the grid so a standalone calendar doesn't stretch its cells\n    // across whatever container it lands in.\n    width: 'max-content',\n    padding: '1x',\n    gap: '1x',\n  },\n});\n\nexport const CalendarHeaderElement = tasty({\n  styles: {\n    display: 'flex',\n    placeContent: 'center space-between',\n    placeItems: 'center',\n    gap: '1.5x',\n  },\n});\n\n/**\n * The interactive states shared by day cells and period (month / quarter /\n * year) cells. Kept in one place so a day and a month never drift apart.\n */\nexport const CALENDAR_CELL_STYLES: Styles = {\n  preset: 't3m',\n  display: 'grid',\n  placeItems: 'center',\n  border: 0,\n  fill: {\n    '': '#primary.0',\n    ':hover': '#primary.16',\n    rangeHover: '#primary.16',\n    pressed: '#primary.10',\n\n    selected: '#primary',\n    'selected & :hover': '#primary-text',\n    'selected & pressed': '#primary',\n\n    'disabled | unavailable': '#primary.0',\n    // A disabled calendar still has to show what is selected.\n    'selected & (disabled | unavailable)': '#primary.30',\n  },\n  color: {\n    '': '#dark',\n    outside: '#dark.30',\n    // The cell that contains today — a hint, not a selection.\n    'current & !selected': '#primary-text',\n    selected: '#white',\n    'disabled | unavailable': '#dark.30',\n    'selected & (disabled | unavailable)': '#white',\n  },\n  outline: {\n    '': '1bw #primary-text.0',\n    focused: '1bw #primary-text',\n  },\n  outlineOffset: 0.5,\n  radius: true,\n  cursor: {\n    '': '$pointer',\n    'disabled | unavailable': 'default',\n  },\n};\n"],"mappings":";;;;;;;;;AAOA,MAAa,kBAAkB,MAAM,EACnC,QAAQ;CACN,SAAS;CAGT,OAAO;CACP,SAAS;CACT,KAAK;CACN,EACF,CAAC;AAEF,MAAa,wBAAwB,MAAM,EACzC,QAAQ;CACN,SAAS;CACT,cAAc;CACd,YAAY;CACZ,KAAK;CACN,EACF,CAAC;;;;;AAMF,MAAa,uBAA+B;CAC1C,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,QAAQ;CACR,MAAM;EACJ,IAAI;EACJ,UAAU;EACV,YAAY;EACZ,SAAS;EAET,UAAU;EACV,qBAAqB;EACrB,sBAAsB;EAEtB,0BAA0B;EAE1B,uCAAuC;EACxC;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EAET,uBAAuB;EACvB,UAAU;EACV,0BAA0B;EAC1B,uCAAuC;EACxC;CACD,SAAS;EACP,IAAI;EACJ,SAAS;EACV;CACD,eAAe;CACf,QAAQ;CACR,QAAQ;EACN,IAAI;EACJ,0BAA0B;EAC3B;CACF"}

package/dist/components/other/CubeLogo/CubeLogo.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { Icon } from "../../../icons/Icon.js";
 import { mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/overlays/AlertDialog/AlertDialog.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { Paragraph } from "../../content/Paragraph.js";
 import { _Title } from "../../content/Title.js";

package/dist/components/overlays/AlertDialog/AlertDialogApiProvider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { AlertDialogZone } from "./AlertDialogZone.js";
 import { createContext, useContext, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/overlays/AlertDialog/AlertDialogZone.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { Portal } from "../../portal/Portal.js";
 import { DialogContainer } from "../Dialog/DialogContainer.js";
 import { _AlertDialog } from "./AlertDialog.js";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { _Modal } from "../Modal/Modal.js";
 import { DialogContext } from "./context.js";
 import { Children, isValidElement, useRef } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { ButtonGroup } from "../../actions/ButtonGroup/ButtonGroup.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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,10 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Overlay } from "./Overlay.js";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useModal, useOverlay } from "react-aria";
+import { useObjectRef } from "@react-aria/utils";
 
 //#region src/components/overlays/Modal/Popover.tsx
 const PopoverElement = tasty({
@@ -35,32 +36,29 @@ const PopoverElement = tasty({
 	}
 });
 function Popover(props, ref) {
-	let { qa, style, styles, children, placement, arrowProps, onClose, shouldCloseOnBlur, isKeyboardDismissDisabled, isNonModal, isDismissable = true, shouldCloseOnInteractOutside, ...otherProps } = props;
+	let { qa, style, styles, children, placement, arrowProps, isNonModal, isDismissable = true, ...otherProps } = props;
+	let domRef = useObjectRef(ref);
+	let { overlayProps } = useOverlay({
+		...props,
+		isDismissable: isDismissable && props.isOpen
+	}, domRef);
 	return /* @__PURE__ */ jsx(_Overlay, {
 		...otherProps,
 		children: /* @__PURE__ */ jsx(PopoverWrapper, {
-			ref,
+			ref: domRef,
 			qa,
 			style,
 			styles,
 			placement,
 			arrowProps,
-			shouldCloseOnBlur,
-			isKeyboardDismissDisabled,
 			isNonModal,
-			isDismissable,
-			shouldCloseOnInteractOutside,
-			onClose,
+			overlayProps,
 			children
 		})
 	});
 }
 const PopoverWrapper = forwardRef(function PopoverWrapper(props, ref) {
-	let { qa, children, placement = "bottom", arrowProps, isOpen, style, styles, shouldCloseOnBlur, isKeyboardDismissDisabled, isNonModal, isDismissable, transitionState, shouldCloseOnInteractOutside, ...otherProps } = props;
-	let { overlayProps } = useOverlay({
-		...props,
-		isDismissable: isDismissable && isOpen
-	}, ref);
+	let { qa, children, placement = "bottom", arrowProps, isOpen, style, styles, isNonModal, transitionState, overlayProps, ...otherProps } = props;
 	let { modalProps } = useModal({ isDisabled: isNonModal });
 	return /* @__PURE__ */ jsx(PopoverElement, {
 		qa: qa || "Popover",

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["Overlay","mergeProps"],"sources":["../../../../src/components/overlays/Modal/Popover.tsx"],"sourcesContent":["import { BaseProps, tasty } from '@tenphi/tasty';\nimport { forwardRef, HTMLAttributes } from 'react';\nimport { OverlayProps, useModal, useOverlay } from 'react-aria';\n\nimport { PlacementAxis } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\n\nimport { Overlay } from './Overlay';\nimport { TransitionState, WithCloseBehavior } from './types';\n\nconst PopoverElement = tasty({\n  role: 'presentation',\n  styles: {\n    display: 'initial',\n    hide: {\n      '': true,\n      'enter | entered': false,\n      exit: false,\n      unmounted: true,\n    },\n    pointerEvents: 'auto',\n    position: 'absolute',\n    transition:\n      'opacity .120s linear, visibility 0ms linear, transform .120s ease-in-out',\n    transform: {\n      '': 'scale(1, .9)',\n      open: 'initial',\n    },\n    opacity: {\n      '': 0,\n      open: '.9999',\n    },\n    transformOrigin: {\n      '': 'top center',\n      '[data-placement=\"top\"]': 'bottom center',\n    },\n  },\n});\n\nexport interface CubePopoverProps\n  extends BaseProps,\n    Omit<OverlayProps, 'children' | 'nodeRef'>,\n    WithCloseBehavior,\n    TransitionState {\n  container?: HTMLElement;\n  placement?: PlacementAxis;\n  arrowProps?: HTMLAttributes<HTMLElement>;\n  hideArrow?: boolean;\n  isOpen?: boolean;\n  onClose?: () => void;\n  shouldCloseOnBlur?: boolean;\n  isNonModal?: boolean;\n  isDismissable?: boolean;\n  shouldCloseOnInteractOutside?: (element: Element) => boolean;\n}\n\nfunction Popover(props: CubePopoverProps, ref) {\n  let {\n    qa,\n    style,\n    styles,\n    children,\n    placement,\n    arrowProps,\n    onClose,\n    shouldCloseOnBlur,\n    isKeyboardDismissDisabled,\n    isNonModal,\n    isDismissable = true,\n    shouldCloseOnInteractOutside,\n    ...otherProps\n  } = props;\n\n  return (\n    <Overlay {...otherProps}>\n      <PopoverWrapper\n        ref={ref}\n        qa={qa}\n        style={style}\n        styles={styles}\n        placement={placement}\n        arrowProps={arrowProps}\n        shouldCloseOnBlur={shouldCloseOnBlur}\n        isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n        isNonModal={isNonModal}\n        isDismissable={isDismissable}\n        shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n        onClose={onClose}\n      >\n        {children}\n      </PopoverWrapper>\n    </Overlay>\n  );\n}\n\nconst PopoverWrapper = forwardRef(function PopoverWrapper(\n  props: CubePopoverProps,\n  ref,\n) {\n  let {\n    qa,\n    children,\n    placement = 'bottom',\n    arrowProps,\n    isOpen,\n    style,\n    styles,\n    shouldCloseOnBlur,\n    isKeyboardDismissDisabled,\n    isNonModal,\n    isDismissable,\n    transitionState,\n    shouldCloseOnInteractOutside,\n    ...otherProps\n  } = props;\n  let { overlayProps } = useOverlay(\n    { ...props, isDismissable: isDismissable && isOpen },\n    // @ts-ignore\n    ref,\n  );\n  let { modalProps } = useModal({\n    isDisabled: isNonModal,\n  });\n\n  return (\n    <PopoverElement\n      qa={qa || 'Popover'}\n      {...mergeProps(otherProps, overlayProps, modalProps)}\n      ref={ref}\n      styles={styles}\n      mods={{\n        open: isOpen,\n        enter: transitionState === 'enter',\n        exit: transitionState === 'exit',\n        unmounted: transitionState === 'unmounted',\n        entered: transitionState === 'entered',\n      }}\n      data-placement={placement}\n      style={style}\n    >\n      {children}\n    </PopoverElement>\n  );\n});\n\nconst _Popover = forwardRef(Popover);\n\n_Popover.displayName = 'Popover';\n\nexport { _Popover as Popover };\n"],"mappings":";;;;;;;;;AAUA,MAAM,iBAAiB,MAAM;CAC3B,MAAM;CACN,QAAQ;EACN,SAAS;EACT,MAAM;GACJ,IAAI;GACJ,mBAAmB;GACnB,MAAM;GACN,WAAW;GACZ;EACD,eAAe;EACf,UAAU;EACV,YACE;EACF,WAAW;GACT,IAAI;GACJ,MAAM;GACP;EACD,SAAS;GACP,IAAI;GACJ,MAAM;GACP;EACD,iBAAiB;GACf,IAAI;GACJ,4BAA0B;GAC3B;EACF;CACF,CAAC;AAmBF,SAAS,QAAQ,OAAyB,KAAK;CAC7C,IAAI,EACF,IACA,OACA,QACA,UACA,WACA,YACA,SACA,mBACA,2BACA,YACA,gBAAgB,MAChB,8BACA,GAAG,eACD;AAEJ,QACE,oBAACA;EAAQ,GAAI;YACX,oBAAC;GACM;GACD;GACG;GACC;GACG;GACC;GACO;GACQ;GACf;GACG;GACe;GACrB;GAER;IACc;GACT;;AAId,MAAM,iBAAiB,WAAW,SAAS,eACzC,OACA,KACA;CACA,IAAI,EACF,IACA,UACA,YAAY,UACZ,YACA,QACA,OACA,QACA,mBACA,2BACA,YACA,eACA,iBACA,8BACA,GAAG,eACD;CACJ,IAAI,EAAE,iBAAiB,WACrB;EAAE,GAAG;EAAO,eAAe,iBAAiB;EAAQ,EAEpD,IACD;CACD,IAAI,EAAE,eAAe,SAAS,EAC5B,YAAY,YACb,CAAC;AAEF,QACE,oBAAC;EACC,IAAI,MAAM;EACV,GAAIC,aAAW,YAAY,cAAc,WAAW;EAC/C;EACG;EACR,MAAM;GACJ,MAAM;GACN,OAAO,oBAAoB;GAC3B,MAAM,oBAAoB;GAC1B,WAAW,oBAAoB;GAC/B,SAAS,oBAAoB;GAC9B;EACD,kBAAgB;EACT;EAEN;GACc;EAEnB;AAEF,MAAM,WAAW,WAAW,QAAQ;AAEpC,SAAS,cAAc"}
+{"version":3,"file":"Popover.js","names":["Overlay","mergeProps"],"sources":["../../../../src/components/overlays/Modal/Popover.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport { BaseProps, tasty } from '@tenphi/tasty';\nimport { forwardRef, HTMLAttributes } from 'react';\nimport { OverlayProps, useModal, useOverlay } from 'react-aria';\n\nimport { PlacementAxis } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\n\nimport { Overlay } from './Overlay';\nimport { TransitionState, WithCloseBehavior } from './types';\n\nimport type { Props } from '../../../props';\n\nconst PopoverElement = tasty({\n  role: 'presentation',\n  styles: {\n    display: 'initial',\n    hide: {\n      '': true,\n      'enter | entered': false,\n      exit: false,\n      unmounted: true,\n    },\n    pointerEvents: 'auto',\n    position: 'absolute',\n    transition:\n      'opacity .120s linear, visibility 0ms linear, transform .120s ease-in-out',\n    transform: {\n      '': 'scale(1, .9)',\n      open: 'initial',\n    },\n    opacity: {\n      '': 0,\n      open: '.9999',\n    },\n    transformOrigin: {\n      '': 'top center',\n      '[data-placement=\"top\"]': 'bottom center',\n    },\n  },\n});\n\nexport interface CubePopoverProps\n  extends BaseProps,\n    Omit<OverlayProps, 'children' | 'nodeRef'>,\n    WithCloseBehavior,\n    TransitionState {\n  container?: HTMLElement;\n  placement?: PlacementAxis;\n  arrowProps?: HTMLAttributes<HTMLElement>;\n  hideArrow?: boolean;\n  isOpen?: boolean;\n  onClose?: () => void;\n  shouldCloseOnBlur?: boolean;\n  isNonModal?: boolean;\n  isDismissable?: boolean;\n  shouldCloseOnInteractOutside?: (element: Element) => boolean;\n}\n\nfunction Popover(props: CubePopoverProps, ref) {\n  let {\n    qa,\n    style,\n    styles,\n    children,\n    placement,\n    arrowProps,\n    isNonModal,\n    isDismissable = true,\n    ...otherProps\n  } = props;\n\n  let domRef = useObjectRef(ref);\n\n  // `useOverlay` has to run here rather than inside `PopoverWrapper`, on the\n  // *logical* open state — `Overlay` hands its child an `isOpen` that only\n  // turns true once the enter animation has settled. Registering the overlay\n  // that late leaves it out of React Aria's visible-overlay stack for the first\n  // frames, and `Escape` silently does nothing until the popover finishes\n  // animating in. `Modal` and `Tray` call it from the same place for the same\n  // reason.\n  let { overlayProps } = useOverlay(\n    { ...props, isDismissable: isDismissable && props.isOpen },\n    domRef,\n  );\n\n  return (\n    <Overlay {...otherProps}>\n      <PopoverWrapper\n        ref={domRef}\n        qa={qa}\n        style={style}\n        styles={styles}\n        placement={placement}\n        arrowProps={arrowProps}\n        isNonModal={isNonModal}\n        overlayProps={overlayProps}\n      >\n        {children}\n      </PopoverWrapper>\n    </Overlay>\n  );\n}\n\ninterface PopoverWrapperProps\n  extends Omit<CubePopoverProps, 'isDismissable'>,\n    TransitionState {\n  overlayProps?: Props;\n}\n\nconst PopoverWrapper = forwardRef(function PopoverWrapper(\n  props: PopoverWrapperProps,\n  ref,\n) {\n  let {\n    qa,\n    children,\n    placement = 'bottom',\n    arrowProps,\n    // `isOpen` here is the transition's settled state, not the trigger's — it\n    // drives the enter/exit styles only.\n    isOpen,\n    style,\n    styles,\n    isNonModal,\n    transitionState,\n    overlayProps,\n    ...otherProps\n  } = props;\n  let { modalProps } = useModal({\n    isDisabled: isNonModal,\n  });\n\n  return (\n    <PopoverElement\n      qa={qa || 'Popover'}\n      {...mergeProps(otherProps, overlayProps, modalProps)}\n      ref={ref}\n      styles={styles}\n      mods={{\n        open: isOpen,\n        enter: transitionState === 'enter',\n        exit: transitionState === 'exit',\n        unmounted: transitionState === 'unmounted',\n        entered: transitionState === 'entered',\n      }}\n      data-placement={placement}\n      style={style}\n    >\n      {children}\n    </PopoverElement>\n  );\n});\n\nconst _Popover = forwardRef(Popover);\n\n_Popover.displayName = 'Popover';\n\nexport { _Popover as Popover };\n"],"mappings":";;;;;;;;;;AAaA,MAAM,iBAAiB,MAAM;CAC3B,MAAM;CACN,QAAQ;EACN,SAAS;EACT,MAAM;GACJ,IAAI;GACJ,mBAAmB;GACnB,MAAM;GACN,WAAW;GACZ;EACD,eAAe;EACf,UAAU;EACV,YACE;EACF,WAAW;GACT,IAAI;GACJ,MAAM;GACP;EACD,SAAS;GACP,IAAI;GACJ,MAAM;GACP;EACD,iBAAiB;GACf,IAAI;GACJ,4BAA0B;GAC3B;EACF;CACF,CAAC;AAmBF,SAAS,QAAQ,OAAyB,KAAK;CAC7C,IAAI,EACF,IACA,OACA,QACA,UACA,WACA,YACA,YACA,gBAAgB,MAChB,GAAG,eACD;CAEJ,IAAI,SAAS,aAAa,IAAI;CAS9B,IAAI,EAAE,iBAAiB,WACrB;EAAE,GAAG;EAAO,eAAe,iBAAiB,MAAM;EAAQ,EAC1D,OACD;AAED,QACE,oBAACA;EAAQ,GAAI;YACX,oBAAC;GACC,KAAK;GACD;GACG;GACC;GACG;GACC;GACA;GACE;GAEb;IACc;GACT;;AAUd,MAAM,iBAAiB,WAAW,SAAS,eACzC,OACA,KACA;CACA,IAAI,EACF,IACA,UACA,YAAY,UACZ,YAGA,QACA,OACA,QACA,YACA,iBACA,cACA,GAAG,eACD;CACJ,IAAI,EAAE,eAAe,SAAS,EAC5B,YAAY,YACb,CAAC;AAEF,QACE,oBAAC;EACC,IAAI,MAAM;EACV,GAAIC,aAAW,YAAY,cAAc,WAAW;EAC/C;EACG;EACR,MAAM;GACJ,MAAM;GACN,OAAO,oBAAoB;GAC3B,MAAM,oBAAoB;GAC1B,WAAW,oBAAoB;GAC/B,SAAS,oBAAoB;GAC9B;EACD,kBAAgB;EACT;EAEN;GACc;EAEnB;AAEF,MAAM,WAAW,WAAW,QAAQ;AAEpC,SAAS,cAAc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.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.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useRef, useState } from "react";