@cube-dev/ui-kit 0.140.1 → 0.142.0

package/dist/components/navigation/Tabs/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/navigation/Tabs/types.ts"],"sourcesContent":["import type { BaseProps, OuterStyleProps, Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { CubeItemProps } from '../../content/Item';\n\n// =============================================================================\n// Core Types\n// =============================================================================\n\n/** Visual appearance type for tabs */\nexport type TabType = 'default' | 'narrow' | 'file' | 'radio';\n\n/**\n * Where the tab bar sits relative to its panels.\n * - `'top'` / `'bottom'` keep the bar horizontal.\n * - `'left'` / `'right'` switch it to a vertical strip.\n */\nexport type TabPlacement = 'top' | 'bottom' | 'left' | 'right';\n\n/** Position for TabPicker and scroll arrows */\nexport type TabsActionPosition = 'prefix' | 'suffix';\n\n/**\n * Tab size options.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n */\nexport type TabSize = 'xsmall' | 'small' | 'medium' | 'large';\n\n/**\n * Size mapping for radio type tabs.\n * API sizes mapped to Item button sizes:\n * medium (default) -> xsmall (32px total), large -> medium (40px total).\n */\nexport const RADIO_SIZE_MAP: Record<'medium' | 'large', TabSize> = {\n  medium: 'xsmall',\n  large: 'medium',\n};\n\n/** How the tab `menu` is exposed alongside or instead of the overflow trigger. */\nexport type TabContextMenu = boolean | 'context-only';\n\n// =============================================================================\n// Shared Props Interfaces\n// =============================================================================\n\n/** Common props for panel rendering behavior */\nexport interface PanelBehaviorProps {\n  /** If true, panel is rendered but hidden when not active. */\n  prerender?: boolean;\n  /** If true, once visited the panel stays in DOM. */\n  keepMounted?: boolean;\n}\n\n/** Common props for QA attributes */\nexport interface QAProps {\n  /** QA selector attribute. */\n  qa?: string;\n  /** Additional QA value attribute. */\n  qaVal?: string;\n}\n\n// =============================================================================\n// Tab Style Props\n// =============================================================================\n\n/** Props from CubeItemProps that don't apply to Tab */\ntype OmittedItemProps =\n  | 'id' // Tab has its own id as Key type\n  | 'type' // Type is decided at the Tabs level, never per-tab\n  | 'size' // Tab has its own TabSize\n  | 'theme' // Tabs have internal theming\n  | 'shape' // Tabs have internal shape logic\n  | 'description' // Tabs don't have descriptions\n  | 'descriptionPlacement'\n  | 'descriptionProps'\n  | 'hotkeys' // Tabs have their own keyboard navigation\n  | 'keyboardShortcutProps'\n  | 'labelProps' // Tabs use title prop instead\n  | 'labelRef'\n  | 'level' // Tabs don't use heading levels\n  | 'highlight' // Tabs don't use highlighting\n  | 'highlightCaseSensitive'\n  | 'highlightStyles'\n  | 'variant' // Tabs have internal variant logic\n  | 'htmlType' // Tab is always a button\n  | 'isSelected' // Handled internally by state\n  | 'preserveActionsSpace' // Set internally in TabButton\n  | 'disableActionsFocus' // Not used in Tab\n  | 'actions' // Tab has its own actions definition\n  | 'autoHideActions' // Tab has its own autoHideActions\n  | 'insideWrapper' // Internal Item wrapper prop\n  | 'showActions'; // Internal Item wrapper prop\n\n/** Common styling props for tabs - inherits style props from CubeItemProps */\nexport interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   */\n  size?: TabSize;\n  /** Whether to show actions only on hover. */\n  autoHideActions?: boolean;\n}\n\n// =============================================================================\n// Component Props\n// =============================================================================\n\n/** Cache key type - primitives only for reliable comparison */\nexport type CacheKeyValue = string | number | boolean | null | undefined;\n\nexport interface CubeTabsProps\n  extends BaseProps,\n    OuterStyleProps,\n    PanelBehaviorProps {\n  /** Controlled active tab key. When provided, component is controlled. */\n  activeKey?: string;\n  /** Initial active tab key for uncontrolled mode. */\n  defaultActiveKey?: string;\n  /**\n   * Visual appearance type for tabs.\n   * - `default` - Standard tabs with selection indicator below (default)\n   * - `narrow` - Same as default but with collapsed vertical padding on labels\n   * - `file` - File-style tabs with border bottom highlight on selection, delimiter between tabs\n   * - `radio` - Radio button style for tab selection\n   * @default 'default'\n   */\n  type?: TabType;\n  /**\n   * Where the tab bar sits relative to its panels.\n   * `'top'` / `'bottom'` keep the bar horizontal; `'left'` / `'right'`\n   * switch it to a vertical strip. The selection indicator, scroll behavior,\n   * fades, and per-type visuals all adapt automatically.\n   * @default 'top'\n   */\n  placement?: TabPlacement;\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   * @default 'medium'\n   */\n  size?: TabSize;\n  /** Accessible label for the tab list. */\n  label?: string;\n  /** Content rendered before the tab list. */\n  prefix?: ReactNode;\n  /** Content rendered after the tab list. */\n  suffix?: ReactNode;\n  /** Callback when active tab changes. */\n  onChange?: (key: string) => void;\n  /** Callback when tab delete button is clicked. Presence enables delete buttons. */\n  onDelete?: (key: string) => void;\n  /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */\n  onTitleChange?: (key: string, newTitle: string) => void;\n  /** Whether to show tab actions only on hover. Can be overridden per-tab. */\n  autoHideActions?: boolean;\n  /**\n   * Whether tabs are editable by default.\n   * Can be overridden per-tab via Tab's isEditable prop.\n   * @default false\n   */\n  isEditable?: boolean;\n  /**\n   * Default menu items for all tabs.\n   * Can be overridden per-tab via Tab's menu prop.\n   * Set to `null` on individual Tab to disable menu for that tab.\n   */\n  menu?: ReactNode;\n  /**\n   * Default props for the menu trigger button.\n   * Can be overridden per-tab via Tab's menuTriggerProps prop.\n   * @default { icon: <MoreIcon /> }\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Default props passed to the Menu component.\n   * Can be overridden per-tab via Tab's menuProps prop.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior for tab `menu` items.\n   * - `false` (default) — overflow trigger only; no right-click menu\n   * - `true` — overflow trigger and right-click menu\n   * - `'context-only'` — right-click menu only; no overflow trigger. Inline close\n   *   (`onDelete`) shows even when `menu` is non-empty, like tabs without a menu.\n   * Can be overridden per-tab via Tab's contextMenu prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered on any tab.\n   * Called with the action key and the tab key.\n   * Tab-level onAction is called first, then this.\n   */\n  onAction?: (action: string, tabKey: string) => void;\n  /** Custom tasty styles for the tab bar container. */\n  styles?: Styles;\n  /** QA selector attribute. */\n  qa?: string;\n  /** Tab components or Tabs.List with Tabs.Panel. */\n  children?: ReactNode;\n  /**\n   * Functional content renderer for optimized lazy evaluation.\n   * When provided, panel content is only evaluated for the active tab,\n   * while inactive tabs use cached content.\n   */\n  renderPanel?: (key: string) => ReactNode;\n  /**\n   * Cache keys for individual panels. Enables caching for specified panels.\n   */\n  panelCacheKeys?: Record<string | number, CacheKeyValue>;\n  /**\n   * Enable drag-and-drop tab reordering.\n   * When a tab picker is shown (`showTabPicker`), reordering is automatically\n   * enabled in the picker dropdown as well.\n   * @default false\n   */\n  isReorderable?: boolean;\n  /**\n   * Controlled order of tab keys.\n   * When provided, tabs are displayed in this order.\n   */\n  keyOrder?: string[];\n  /**\n   * Callback when tabs are reordered via drag-and-drop.\n   */\n  onReorder?: (newOrder: string[]) => void;\n  /**\n   * Whether to show a tab picker dropdown in the suffix area.\n   * - `true` - always show the tab picker\n   * - `false` - never show the tab picker (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showTabPicker?: boolean | 'auto';\n  /**\n   * Whether to show scroll arrow buttons in the suffix area.\n   * - `true` - always show scroll arrows\n   * - `false` - never show scroll arrows (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showScrollArrows?: boolean | 'auto';\n  /**\n   * Position of the tab picker dropdown.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  tabPickerPosition?: TabsActionPosition;\n  /**\n   * Position of the scroll arrow buttons.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  scrollArrowsPosition?: TabsActionPosition;\n  /**\n   * Visually hide the custom horizontal scrollbar in the tab list\n   * and skip its tracking logic. Does not affect tab picker, scroll arrows,\n   * or fade indicators — only the tiny scrollbar visual.\n   * @default false\n   */\n  hideTabListScroll?: boolean;\n  /**\n   * Inline padding for the tab list container.\n   * Sets horizontal padding only (e.g., \"2x\" → padding: \"0 2x\").\n   */\n  tabListPadding?: string;\n  /** Custom tasty styles for the tab bar (Bar sub-element). */\n  barStyles?: Styles;\n  /** Custom tasty styles for the TabList sub-element. */\n  tabListStyles?: Styles;\n  /** Custom tasty styles for the Prefix sub-element. */\n  prefixStyles?: Styles;\n  /** Custom tasty styles for the Suffix sub-element. */\n  suffixStyles?: Styles;\n}\n\nexport interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {\n  /**\n   * Unique identifier for the tab.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Content displayed in the tab button. */\n  title: ReactNode;\n  /** Panel content rendered when tab is active. */\n  children?: ReactNode;\n  /** Disables the tab (cannot be selected). */\n  isDisabled?: boolean;\n  /** Actions to render in the tab. Rendered before menu trigger if tab has menu. */\n  actions?: ReactNode;\n  /** Whether the tab title can be edited. Overrides the Tabs-level isEditable default. */\n  isEditable?: boolean;\n  /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */\n  onTitleChange?: (newTitle: string) => void;\n  /**\n   * Menu items to display in a dropdown menu on the tab.\n   * Pass Menu.Item elements directly - they will be wrapped in a Menu internally.\n   * Overrides the Tabs-level menu default. Set to `null` to disable menu.\n   */\n  menu?: ReactNode | null;\n  /**\n   * Props to customize the menu trigger button.\n   * Overrides the Tabs-level menuTriggerProps default.\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Props passed to the Menu component.\n   * Overrides the Tabs-level menuProps default.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior. Same values as Tabs `contextMenu`.\n   * Uses the same menu items as `menu` prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered.\n   * Called with the action key from Menu.Item.\n   */\n  onAction?: (action: string) => void;\n}\n\nexport interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {\n  /**\n   * Panel identifier. Must match a Tab's id.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Panel content. */\n  children?: ReactNode;\n  /** Custom tasty styles for the panel container. */\n  styles?: Styles;\n}\n\nexport interface CubeTabListProps {\n  /** Tab components. */\n  children?: ReactNode;\n}\n\n// =============================================================================\n// Internal Types\n// =============================================================================\n\n/**\n * Internal representation of a parsed Tab.\n * Uses `content` instead of `children` to distinguish panel content.\n */\nexport interface ParsedTab extends Omit<CubeTabProps, 'id' | 'children'> {\n  /** Tab key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from Tab's children prop */\n  content: ReactNode;\n}\n\n/**\n * Internal representation of a parsed TabPanel.\n */\nexport interface ParsedPanel\n  extends Omit<CubeTabPanelProps, 'id' | 'children'> {\n  /** Panel key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from TabPanel's children prop */\n  content: ReactNode;\n}\n"],"mappings":";;;;;;;AAkCA,MAAa,iBAAsD;CACjE,QAAQ;CACR,OAAO;CACR"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/navigation/Tabs/types.ts"],"sourcesContent":["import type { BaseProps, OuterStyleProps, Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { CubeItemProps } from '../../content/Item';\n\n// =============================================================================\n// Core Types\n// =============================================================================\n\n/** Visual appearance type for tabs */\nexport type TabType = 'default' | 'narrow' | 'file' | 'radio';\n\n/**\n * Where the tab bar sits relative to its panels.\n * - `'top'` / `'bottom'` keep the bar horizontal.\n * - `'left'` / `'right'` switch it to a vertical strip.\n */\nexport type TabPlacement = 'top' | 'bottom' | 'left' | 'right';\n\n/** Position for TabPicker and scroll arrows */\nexport type TabsActionPosition = 'prefix' | 'suffix';\n\n/**\n * Tab size options.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n */\nexport type TabSize = 'xsmall' | 'small' | 'medium' | 'large';\n\n/**\n * Size mapping for radio type tabs.\n * API sizes mapped to Item button sizes:\n * medium (default) -> xsmall (32px total), large -> medium (40px total).\n */\nexport const RADIO_SIZE_MAP: Record<'medium' | 'large', TabSize> = {\n  medium: 'xsmall',\n  large: 'medium',\n};\n\n/** How the tab `menu` is exposed alongside or instead of the overflow trigger. */\nexport type TabContextMenu = boolean | 'context-only';\n\n// =============================================================================\n// Shared Props Interfaces\n// =============================================================================\n\n/** Common props for panel rendering behavior */\nexport interface PanelBehaviorProps {\n  /** If true, panel is rendered but hidden when not active. */\n  prerender?: boolean;\n  /** If true, once visited the panel stays in DOM. */\n  keepMounted?: boolean;\n}\n\n/** Common props for QA attributes */\nexport interface QAProps {\n  /** QA selector attribute. */\n  qa?: string;\n  /** Additional QA value attribute. */\n  qaVal?: string;\n}\n\n// =============================================================================\n// Tab Style Props\n// =============================================================================\n\n/** Props from CubeItemProps that don't apply to Tab */\ntype OmittedItemProps =\n  | 'id' // Tab has its own id as Key type\n  | 'type' // Type is decided at the Tabs level, never per-tab\n  | 'size' // Tab has its own TabSize\n  | 'theme' // Tabs have internal theming\n  | 'shape' // Tabs have internal shape logic\n  | 'description' // Tabs don't have descriptions\n  | 'descriptionPlacement'\n  | 'descriptionProps'\n  | 'hotkeys' // Tabs have their own keyboard navigation\n  | 'keyboardShortcutProps'\n  | 'labelProps' // Tabs use title prop instead\n  | 'labelRef'\n  | 'level' // Tabs don't use heading levels\n  | 'highlight' // Tabs don't use highlighting\n  | 'highlightCaseSensitive'\n  | 'highlightStyles'\n  | 'variant' // Tabs have internal variant logic\n  | 'htmlType' // Tab is always a button\n  | 'isSelected' // Handled internally by state\n  | 'preserveActionsSpace' // Set internally in TabButton\n  | 'disableActionsFocus' // Not used in Tab\n  | 'actions' // Tab has its own actions definition\n  | 'autoHideActions' // Tab has its own autoHideActions\n  | 'insideWrapper' // Internal Item wrapper prop\n  | 'showActions'; // Internal Item wrapper prop\n\n/** Common styling props for tabs - inherits style props from CubeItemProps */\nexport interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   */\n  size?: TabSize;\n  /** Whether to show actions only on hover. */\n  autoHideActions?: boolean;\n}\n\n// =============================================================================\n// Component Props\n// =============================================================================\n\n/** Cache key type - primitives only for reliable comparison */\nexport type CacheKeyValue = string | number | boolean | null | undefined;\n\nexport interface CubeTabsProps\n  extends BaseProps,\n    OuterStyleProps,\n    PanelBehaviorProps {\n  /** Controlled active tab key. When provided, component is controlled. */\n  activeKey?: string;\n  /** Initial active tab key for uncontrolled mode. */\n  defaultActiveKey?: string;\n  /**\n   * Visual appearance type for tabs.\n   * - `default` - Standard tabs with selection indicator below (default)\n   * - `narrow` - Same as default but with collapsed vertical padding on labels\n   * - `file` - File-style tabs with border bottom highlight on selection, delimiter between tabs\n   * - `radio` - Radio button style for tab selection\n   * @default 'default'\n   */\n  type?: TabType;\n  /**\n   * Where the tab bar sits relative to its panels.\n   * `'top'` / `'bottom'` keep the bar horizontal; `'left'` / `'right'`\n   * switch it to a vertical strip. The selection indicator, scroll behavior,\n   * fades, and per-type visuals all adapt automatically.\n   * @default 'top'\n   */\n  placement?: TabPlacement;\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   * @default 'medium'\n   */\n  size?: TabSize;\n  /** Accessible label for the tab list. */\n  label?: string;\n  /** Content rendered before the tab list. */\n  prefix?: ReactNode;\n  /** Content rendered after the tab list. */\n  suffix?: ReactNode;\n  /** Callback when active tab changes. */\n  onChange?: (key: string) => void;\n  /** Callback when tab delete button is clicked. Presence enables delete buttons. */\n  onDelete?: (key: string) => void;\n  /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */\n  onTitleChange?: (key: string, newTitle: string) => void;\n  /** Whether to show tab actions only on hover. Can be overridden per-tab. */\n  autoHideActions?: boolean;\n  /**\n   * Whether tabs are editable by default.\n   * Can be overridden per-tab via Tab's isEditable prop.\n   * @default false\n   */\n  isEditable?: boolean;\n  /**\n   * Default menu items for all tabs.\n   * Can be overridden per-tab via Tab's menu prop.\n   * Set to `null` on individual Tab to disable menu for that tab.\n   */\n  menu?: ReactNode;\n  /**\n   * Default props for the menu trigger button.\n   * Can be overridden per-tab via Tab's menuTriggerProps prop.\n   * @default { icon: <MoreIcon /> }\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Default props passed to the Menu component.\n   * Can be overridden per-tab via Tab's menuProps prop.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior for tab `menu` items.\n   * - `false` (default) — overflow trigger only; no right-click menu\n   * - `true` — overflow trigger and right-click menu\n   * - `'context-only'` — right-click menu only; no overflow trigger. Inline close\n   *   (`onDelete`) shows even when `menu` is non-empty, like tabs without a menu.\n   * Can be overridden per-tab via Tab's contextMenu prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered on any tab.\n   * Called with the action key and the tab key.\n   * Tab-level onAction is called first, then this.\n   */\n  onAction?: (action: string, tabKey: string) => void;\n  /** Custom tasty styles for the tab bar container. */\n  styles?: Styles;\n  /** QA selector attribute. */\n  qa?: string;\n  /** Tab components or Tabs.List with Tabs.Panel. */\n  children?: ReactNode;\n  /**\n   * Functional content renderer for optimized lazy evaluation.\n   * When provided, panel content is only evaluated for the active tab,\n   * while inactive tabs use cached content.\n   */\n  renderPanel?: (key: string) => ReactNode;\n  /**\n   * Cache keys for individual panels. Enables caching for specified panels.\n   */\n  panelCacheKeys?: Record<string | number, CacheKeyValue>;\n  /**\n   * Enable drag-and-drop tab reordering.\n   * When a tab picker is shown (`showTabPicker`), reordering is automatically\n   * enabled in the picker dropdown as well.\n   * @default false\n   */\n  isReorderable?: boolean;\n  /**\n   * Controlled order of tab keys.\n   * When provided, tabs are displayed in this order.\n   */\n  keyOrder?: string[];\n  /**\n   * Callback when tabs are reordered via drag-and-drop.\n   */\n  onReorder?: (newOrder: string[]) => void;\n  /**\n   * Whether to show a tab picker dropdown in the suffix area.\n   * - `true` - always show the tab picker\n   * - `false` - never show the tab picker (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showTabPicker?: boolean | 'auto';\n  /**\n   * Whether to show scroll arrow buttons in the suffix area.\n   * - `true` - always show scroll arrows\n   * - `false` - never show scroll arrows (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showScrollArrows?: boolean | 'auto';\n  /**\n   * Position of the tab picker dropdown.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  tabPickerPosition?: TabsActionPosition;\n  /**\n   * Position of the scroll arrow buttons.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  scrollArrowsPosition?: TabsActionPosition;\n  /**\n   * Visually hide the custom horizontal scrollbar in the tab list\n   * and skip its tracking logic. Does not affect tab picker, scroll arrows,\n   * or fade indicators — only the tiny scrollbar visual.\n   * @default false\n   */\n  hideTabListScroll?: boolean;\n  /**\n   * Inline padding for the tab list container.\n   * Sets horizontal padding only (e.g., \"2x\" → padding: \"0 2x\").\n   */\n  tabListPadding?: string;\n  /** Custom tasty styles for the tab bar (Bar sub-element). */\n  barStyles?: Styles;\n  /** Custom tasty styles for the TabList sub-element. */\n  tabListStyles?: Styles;\n  /** Custom tasty styles for the Prefix sub-element. */\n  prefixStyles?: Styles;\n  /** Custom tasty styles for the Suffix sub-element. */\n  suffixStyles?: Styles;\n}\n\nexport interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {\n  /**\n   * Unique identifier for the tab.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /**\n   * Content displayed in the tab button. Optional for icon-only tabs\n   * (`icon` / `rightIcon`). When omitted, provide an `aria-label` (and\n   * typically a `tooltip`) so the tab has an accessible name.\n   */\n  title?: ReactNode;\n  /** Panel content rendered when tab is active. */\n  children?: ReactNode;\n  /** Disables the tab (cannot be selected). */\n  isDisabled?: boolean;\n  /** Actions to render in the tab. Rendered before menu trigger if tab has menu. */\n  actions?: ReactNode;\n  /** Whether the tab title can be edited. Overrides the Tabs-level isEditable default. */\n  isEditable?: boolean;\n  /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */\n  onTitleChange?: (newTitle: string) => void;\n  /**\n   * Menu items to display in a dropdown menu on the tab.\n   * Pass Menu.Item elements directly - they will be wrapped in a Menu internally.\n   * Overrides the Tabs-level menu default. Set to `null` to disable menu.\n   */\n  menu?: ReactNode | null;\n  /**\n   * Props to customize the menu trigger button.\n   * Overrides the Tabs-level menuTriggerProps default.\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Props passed to the Menu component.\n   * Overrides the Tabs-level menuProps default.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior. Same values as Tabs `contextMenu`.\n   * Uses the same menu items as `menu` prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered.\n   * Called with the action key from Menu.Item.\n   */\n  onAction?: (action: string) => void;\n}\n\nexport interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {\n  /**\n   * Panel identifier. Must match a Tab's id.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Panel content. */\n  children?: ReactNode;\n  /** Custom tasty styles for the panel container. */\n  styles?: Styles;\n}\n\nexport interface CubeTabListProps {\n  /** Tab components. */\n  children?: ReactNode;\n}\n\n// =============================================================================\n// Internal Types\n// =============================================================================\n\n/**\n * Internal representation of a parsed Tab.\n * Uses `content` instead of `children` to distinguish panel content.\n */\nexport interface ParsedTab extends Omit<CubeTabProps, 'id' | 'children'> {\n  /** Tab key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from Tab's children prop */\n  content: ReactNode;\n}\n\n/**\n * Internal representation of a parsed TabPanel.\n */\nexport interface ParsedPanel\n  extends Omit<CubeTabPanelProps, 'id' | 'children'> {\n  /** Panel key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from TabPanel's children prop */\n  content: ReactNode;\n}\n"],"mappings":";;;;;;;AAkCA,MAAa,iBAAsD;CACjE,QAAQ;CACR,OAAO;CACR"}

package/dist/components/navigation/Tabs/use-tab-editing.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.0 | Cube Dev Team */
 import { useCallback, useState } from "react";
 
 //#region src/components/navigation/Tabs/use-tab-editing.ts

package/dist/components/navigation/Tabs/use-tab-indicator.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.0 | Cube Dev Team */
 import { chainRaf } from "../../../utils/raf.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 

package/dist/components/organisms/FileTabs/FileTabs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { Block } from "../../Block.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/organisms/StatsCard/StatsCard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.0 | Cube Dev Team */
 import { _Text } from "../../content/Text.js";
 import { _Title } from "../../content/Title.js";
 import { Card } from "../../content/Card/Card.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.0 | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { useProviderProps } from "../../../provider.js";
 import { Space } from "../../layout/Space.js";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.0 | Cube Dev Team */
 import { CalendarCell } from "./CalendarCell.js";
 import { tasty } from "@tenphi/tasty";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.0 | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { useProviderProps } from "../../../provider.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/other/CloudLogo/CloudLogo.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.0 | Cube Dev Team */
 import { Button } from "../../actions/index.js";
 import { 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.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.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.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.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.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.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.d.ts

@@ -3,7 +3,6 @@ import { BaseProps, BaseStyleProps, BlockStyleProps, DimensionStyleProps, Styles
 import * as react from "react";
 import { ReactElement } from "react";
 import { AriaDialogProps } from "react-aria";
-import * as _react_types_shared0 from "@react-types/shared";
 
 //#region src/components/overlays/Dialog/Dialog.d.ts
 interface CubeDialogProps extends Omit<BaseProps, 'role'>, AriaDialogProps, BaseStyleProps, BlockStyleProps, DimensionStyleProps {
@@ -22,7 +21,7 @@ interface CubeDialogProps extends Omit<BaseProps, 'role'>, AriaDialogProps, Base
  * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
  * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
  */
-declare const Dialog: react.ForwardRefExoticComponent<CubeDialogProps & react.RefAttributes<_react_types_shared0.DOMRefValue<HTMLDivElement>>>;
+declare const Dialog: react.ForwardRefExoticComponent<CubeDialogProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { CubeDialogProps, Dialog };
 //# sourceMappingURL=Dialog.d.ts.map

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.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";
@@ -10,8 +10,8 @@ import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, FLOW_STYLES, tasty } from
 import { forwardRef, useEffect, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DismissButton, FocusScope, useDialog, useMessageFormatter } from "react-aria";
-import { useDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";
+import { useObjectRef } from "@react-aria/utils";
 
 //#region src/components/overlays/Dialog/Dialog.tsx
 const STYLES_LIST = [
@@ -133,7 +133,7 @@ const DialogContent = forwardRef(function DialogContent(props, ref) {
 	size = sizeMap[size.toUpperCase()] || size;
 	const styles = extractStyles(otherProps, STYLES_LIST);
 	let formatMessage = useMessageFormatter(intlMessages);
-	let domRef = useDOMRef(ref);
+	let domRef = useObjectRef(ref);
 	let { dialogProps, titleProps } = useDialog(mergeProps$1(contextProps, props), domRef);
 	let dismissButton;
 	if (type === "popover" || type === "tray") dismissButton = /* @__PURE__ */ jsx(DismissButton, { onDismiss });

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["ItemButton","mergeProps"],"sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import { createFocusManager } from '@react-aria/focus';\nimport { useDOMRef } from '@react-spectrum/utils';\nimport { DOMRef } from '@react-types/shared';\nimport {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  DIMENSION_STYLES,\n  DimensionStyleProps,\n  FLOW_STYLES,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, ReactElement, useEffect, useMemo } from 'react';\nimport {\n  AriaDialogProps,\n  DismissButton,\n  FocusScope,\n  useDialog,\n  useMessageFormatter,\n} from 'react-aria';\n\nimport { CloseIcon } from '../../../icons';\nimport { mergeProps, SlotProvider } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { useOpenTransitionContext } from '../Modal/OpenTransitionContext';\n\nimport { useDialogContext } from './context';\n\nconst STYLES_LIST = [\n  ...BASE_STYLES,\n  ...DIMENSION_STYLES,\n  ...BLOCK_STYLES,\n  ...FLOW_STYLES,\n];\n\nconst DialogElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    fill: '#surface',\n    pointerEvents: 'auto',\n    outline: 0,\n    position: {\n      '': 'relative',\n      'type=panel': 'absolute',\n    },\n    width: {\n      '': '$min-dialog-size $dialog-size (100dvw - 8x)',\n      'type=fullscreen': '(100dvw - 8x) (100dvw - 8x)',\n      'type=fullscreenTakeover': '100dvw 100dvw',\n      'type=panel': 'auto',\n    },\n    height: {\n      '': 'auto (100dvh - 8x)',\n      'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n      'type=fullscreenTakeover | type=panel': '100dvh 100dvh',\n      'type=popover': 'initial initial (50dvh - 5x)',\n    },\n    gap: 0,\n    border: {\n      '': false,\n      'type=popover': true,\n    },\n    radius: {\n      '': '1cr',\n      'type=tray': '1cr top',\n      'type=fullscreenTakeover': '0r',\n    },\n    shadow: {\n      '': '$dialog-shadow',\n      'type=popover | type=panel': '$shadow',\n    },\n    top: {\n      '': false,\n      'type=modal': '((50vh - 50%) / -3)',\n      'type=panel': 'auto',\n    },\n    '$dialog-title-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-padding-h': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-footer-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-gap': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n  },\n});\n\nconst CloseButton = tasty(ItemButton, {\n  qa: 'ModalCloseButton',\n  type: 'clear',\n  styles: {\n    position: 'absolute',\n    top: '1x',\n    right: '1x',\n  },\n});\n\nconst sizeMap = {\n  S: 'small',\n  M: 'medium',\n  L: 'large',\n};\nconst sizePxMap = {\n  small: 360,\n  medium: 479,\n  large: 798,\n};\n\nconst intlMessages = {\n  'en-US': {\n    dismiss: 'Dismiss',\n    alert: 'Alert',\n  },\n};\n\nexport interface CubeDialogProps\n  extends Omit<BaseProps, 'role'>,\n    AriaDialogProps,\n    BaseStyleProps,\n    BlockStyleProps,\n    DimensionStyleProps {\n  /** The size of the dialog */\n  size?: 'S' | 'M' | 'L' | 'small' | 'medium' | 'large';\n  /** Whether the dialog is dismissable */\n  isDismissable?: boolean;\n  /** Trigger when the dialog is dismissed */\n  onDismiss?: (arg?: any) => void;\n  /** That you can replace the close icon with */\n  closeIcon?: ReactElement;\n  closeButtonStyles?: Styles;\n  role?: 'dialog' | 'alertdialog';\n}\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(\n  props: CubeDialogProps,\n  ref: DOMRef<HTMLDivElement>,\n) {\n  const transitionContext = useOpenTransitionContext();\n\n  const isEntered = transitionContext?.transitionState === 'entered';\n\n  const context = useDialogContext();\n\n  const content = useMemo(() => {\n    return <DialogContent key=\"content\" {...props} ref={ref} />;\n  }, [props, ref]);\n\n  const shouldContainFocus =\n    isEntered && !!context.isOpen && context.type !== 'panel';\n\n  return (\n    // This component traps the focus inside the dialog and restores it on close.\n    <FocusScope restoreFocus contain={shouldContainFocus}>\n      {content}\n    </FocusScope>\n  );\n});\n\nconst DialogContent = forwardRef(function DialogContent(\n  props: CubeDialogProps,\n  ref: DOMRef<HTMLDivElement>,\n) {\n  let { type = 'modal', ...contextProps } = useDialogContext();\n\n  let {\n    qa,\n    children,\n    size = 'M',\n    isDismissable = contextProps.isDismissable,\n    onDismiss = contextProps.onClose,\n    closeIcon,\n    closeButtonStyles,\n    style,\n    ...otherProps\n  } = props;\n\n  size = sizeMap[size.toUpperCase()] || size;\n\n  const styles: Styles = extractStyles(otherProps, STYLES_LIST);\n\n  let formatMessage = useMessageFormatter(intlMessages);\n\n  let domRef = useDOMRef(ref);\n  let { dialogProps, titleProps } = useDialog(\n    mergeProps(contextProps, props),\n    domRef,\n  );\n\n  // If rendered in a popover or tray there won't be a visible dismiss button,\n  // so we render a hidden one for screen readers.\n  let dismissButton;\n  if (type === 'popover' || type === 'tray') {\n    dismissButton = <DismissButton onDismiss={onDismiss} />;\n  }\n\n  // Focus the first focusable element in the dialog when it opens.\n  //\n  // We also re-run the priority focus logic when the dialog <section>\n  // itself is the active element. This recovers from a race that occurs\n  // when a popover-based component (FilterPicker, Picker, Select, …) opens\n  // inside another contained Dialog: React's native `autoFocus` on the\n  // inner control fires during the mutation phase, before the popover's\n  // FocusScope registers in react-aria's focus-scope tree, so the outer\n  // FocusScope yanks focus back. useDialog then defaults focus to the\n  // dialog <section>; without re-promoting it here, the priority element\n  // (e.g. the search input) is never focused.\n  useEffect(() => {\n    if (contextProps.isOpen) {\n      setTimeout(() => {\n        if (!domRef.current) return;\n\n        const activeElement = document.activeElement;\n        const isFocusOutsideDialog = !domRef.current.contains(activeElement);\n        const isFocusOnDialogShell = activeElement === domRef.current;\n\n        // Priority 1: autofocus input or primary button\n        const priorityElement = domRef.current.querySelector(\n          'input[data-autofocus], button[type=\"submit\"], button[data-type=\"primary\"]',\n        ) as HTMLElement | null;\n\n        if (priorityElement && (isFocusOutsideDialog || isFocusOnDialogShell)) {\n          priorityElement.focus();\n          return;\n        }\n\n        if (isFocusOutsideDialog) {\n          // Fallback: focus first tabbable element, or dialog itself\n          const focusManager = createFocusManager(domRef);\n\n          if (!focusManager.focusFirst({ tabbable: true })) {\n            domRef.current.focus();\n          }\n        }\n      });\n    }\n  }, [contextProps.isOpen]);\n\n  // let hasHeader = useHasChild('[data-id=\"Header\"]', domRef);\n  // let hasFooter = useHasChild('[data-id=\"Footer\"]', domRef);\n\n  let slots = {\n    title: {\n      level: 2,\n      preset: 'h4',\n      ...titleProps,\n    },\n    content: {\n      styles: {\n        flexGrow: 1,\n        padding: '$dialog-content-padding-v $dialog-padding-h',\n        gap: '$dialog-content-gap',\n        height: {\n          '': 'max (100% - (2 * $dialog-content-padding-v))',\n          ':last-child': 'max (100% - $dialog-content-padding-v)',\n        },\n      },\n    },\n    header: {\n      ellipsis: true,\n      styles: {\n        display: 'flex',\n        flow: 'row',\n        gap: '1x',\n        placeItems: 'center stretch',\n        placeContent: 'space-between',\n        padding: `$dialog-title-padding-v ${\n          isDismissable ? '($dialog-padding-h + 4x)' : '$dialog-padding-h'\n        } $dialog-title-padding-v $dialog-padding-h`,\n        border: 'bottom',\n      },\n    },\n    footer: {\n      styles: {\n        display: 'flex',\n        gap: '1x',\n        flow: 'row-reverse',\n        placeItems: 'baseline stretch',\n        placeContent: 'space-between',\n        padding: '$dialog-footer-v $dialog-padding-h',\n      },\n    },\n    buttonGroup: {\n      styles: {\n        flow: 'row-reverse',\n      },\n    },\n  };\n\n  return (\n    <DialogElement\n      ref={domRef}\n      data-id=\"Dialog\"\n      data-qa={qa || 'Dialog'}\n      styles={styles}\n      as=\"section\"\n      {...dialogProps}\n      mods={{ dismissable: isDismissable }}\n      style={{\n        '--dialog-size': `${sizePxMap[size] || sizePxMap.small}px`,\n        ...style,\n      }}\n      data-type={type}\n      data-size={size}\n    >\n      {dismissButton}\n\n      <SlotProvider slots={slots}>\n        {isDismissable && (\n          <CloseButton\n            icon={closeIcon || <CloseIcon size={20} />}\n            label={formatMessage('dismiss')}\n            onPress={() => onDismiss && onDismiss()}\n          />\n        )}\n        {children}\n      </SlotProvider>\n    </DialogElement>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","names":["ItemButton","mergeProps"],"sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import { createFocusManager } from '@react-aria/focus';\nimport { useObjectRef } from '@react-aria/utils';\nimport {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  DIMENSION_STYLES,\n  DimensionStyleProps,\n  FLOW_STYLES,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, ReactElement, Ref, useEffect, useMemo } from 'react';\nimport {\n  AriaDialogProps,\n  DismissButton,\n  FocusScope,\n  useDialog,\n  useMessageFormatter,\n} from 'react-aria';\n\nimport { CloseIcon } from '../../../icons';\nimport { mergeProps, SlotProvider } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { useOpenTransitionContext } from '../Modal/OpenTransitionContext';\n\nimport { useDialogContext } from './context';\n\nconst STYLES_LIST = [\n  ...BASE_STYLES,\n  ...DIMENSION_STYLES,\n  ...BLOCK_STYLES,\n  ...FLOW_STYLES,\n];\n\nconst DialogElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    fill: '#surface',\n    pointerEvents: 'auto',\n    outline: 0,\n    position: {\n      '': 'relative',\n      'type=panel': 'absolute',\n    },\n    width: {\n      '': '$min-dialog-size $dialog-size (100dvw - 8x)',\n      'type=fullscreen': '(100dvw - 8x) (100dvw - 8x)',\n      'type=fullscreenTakeover': '100dvw 100dvw',\n      'type=panel': 'auto',\n    },\n    height: {\n      '': 'auto (100dvh - 8x)',\n      'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n      'type=fullscreenTakeover | type=panel': '100dvh 100dvh',\n      'type=popover': 'initial initial (50dvh - 5x)',\n    },\n    gap: 0,\n    border: {\n      '': false,\n      'type=popover': true,\n    },\n    radius: {\n      '': '1cr',\n      'type=tray': '1cr top',\n      'type=fullscreenTakeover': '0r',\n    },\n    shadow: {\n      '': '$dialog-shadow',\n      'type=popover | type=panel': '$shadow',\n    },\n    top: {\n      '': false,\n      'type=modal': '((50vh - 50%) / -3)',\n      'type=panel': 'auto',\n    },\n    '$dialog-title-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-padding-h': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-footer-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-gap': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n  },\n});\n\nconst CloseButton = tasty(ItemButton, {\n  qa: 'ModalCloseButton',\n  type: 'clear',\n  styles: {\n    position: 'absolute',\n    top: '1x',\n    right: '1x',\n  },\n});\n\nconst sizeMap = {\n  S: 'small',\n  M: 'medium',\n  L: 'large',\n};\nconst sizePxMap = {\n  small: 360,\n  medium: 479,\n  large: 798,\n};\n\nconst intlMessages = {\n  'en-US': {\n    dismiss: 'Dismiss',\n    alert: 'Alert',\n  },\n};\n\nexport interface CubeDialogProps\n  extends Omit<BaseProps, 'role'>,\n    AriaDialogProps,\n    BaseStyleProps,\n    BlockStyleProps,\n    DimensionStyleProps {\n  /** The size of the dialog */\n  size?: 'S' | 'M' | 'L' | 'small' | 'medium' | 'large';\n  /** Whether the dialog is dismissable */\n  isDismissable?: boolean;\n  /** Trigger when the dialog is dismissed */\n  onDismiss?: (arg?: any) => void;\n  /** That you can replace the close icon with */\n  closeIcon?: ReactElement;\n  closeButtonStyles?: Styles;\n  role?: 'dialog' | 'alertdialog';\n}\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(\n  props: CubeDialogProps,\n  ref: Ref<HTMLDivElement>,\n) {\n  const transitionContext = useOpenTransitionContext();\n\n  const isEntered = transitionContext?.transitionState === 'entered';\n\n  const context = useDialogContext();\n\n  const content = useMemo(() => {\n    return <DialogContent key=\"content\" {...props} ref={ref} />;\n  }, [props, ref]);\n\n  const shouldContainFocus =\n    isEntered && !!context.isOpen && context.type !== 'panel';\n\n  return (\n    // This component traps the focus inside the dialog and restores it on close.\n    <FocusScope restoreFocus contain={shouldContainFocus}>\n      {content}\n    </FocusScope>\n  );\n});\n\nconst DialogContent = forwardRef(function DialogContent(\n  props: CubeDialogProps,\n  ref: Ref<HTMLDivElement>,\n) {\n  let { type = 'modal', ...contextProps } = useDialogContext();\n\n  let {\n    qa,\n    children,\n    size = 'M',\n    isDismissable = contextProps.isDismissable,\n    onDismiss = contextProps.onClose,\n    closeIcon,\n    closeButtonStyles,\n    style,\n    ...otherProps\n  } = props;\n\n  size = sizeMap[size.toUpperCase()] || size;\n\n  const styles: Styles = extractStyles(otherProps, STYLES_LIST);\n\n  let formatMessage = useMessageFormatter(intlMessages);\n\n  let domRef = useObjectRef(ref);\n  let { dialogProps, titleProps } = useDialog(\n    mergeProps(contextProps, props),\n    domRef,\n  );\n\n  // If rendered in a popover or tray there won't be a visible dismiss button,\n  // so we render a hidden one for screen readers.\n  let dismissButton;\n  if (type === 'popover' || type === 'tray') {\n    dismissButton = <DismissButton onDismiss={onDismiss} />;\n  }\n\n  // Focus the first focusable element in the dialog when it opens.\n  //\n  // We also re-run the priority focus logic when the dialog <section>\n  // itself is the active element. This recovers from a race that occurs\n  // when a popover-based component (FilterPicker, Picker, Select, …) opens\n  // inside another contained Dialog: React's native `autoFocus` on the\n  // inner control fires during the mutation phase, before the popover's\n  // FocusScope registers in react-aria's focus-scope tree, so the outer\n  // FocusScope yanks focus back. useDialog then defaults focus to the\n  // dialog <section>; without re-promoting it here, the priority element\n  // (e.g. the search input) is never focused.\n  useEffect(() => {\n    if (contextProps.isOpen) {\n      setTimeout(() => {\n        if (!domRef.current) return;\n\n        const activeElement = document.activeElement;\n        const isFocusOutsideDialog = !domRef.current.contains(activeElement);\n        const isFocusOnDialogShell = activeElement === domRef.current;\n\n        // Priority 1: autofocus input or primary button\n        const priorityElement = domRef.current.querySelector(\n          'input[data-autofocus], button[type=\"submit\"], button[data-type=\"primary\"]',\n        ) as HTMLElement | null;\n\n        if (priorityElement && (isFocusOutsideDialog || isFocusOnDialogShell)) {\n          priorityElement.focus();\n          return;\n        }\n\n        if (isFocusOutsideDialog) {\n          // Fallback: focus first tabbable element, or dialog itself\n          const focusManager = createFocusManager(domRef);\n\n          if (!focusManager.focusFirst({ tabbable: true })) {\n            domRef.current.focus();\n          }\n        }\n      });\n    }\n  }, [contextProps.isOpen]);\n\n  // let hasHeader = useHasChild('[data-id=\"Header\"]', domRef);\n  // let hasFooter = useHasChild('[data-id=\"Footer\"]', domRef);\n\n  let slots = {\n    title: {\n      level: 2,\n      preset: 'h4',\n      ...titleProps,\n    },\n    content: {\n      styles: {\n        flexGrow: 1,\n        padding: '$dialog-content-padding-v $dialog-padding-h',\n        gap: '$dialog-content-gap',\n        height: {\n          '': 'max (100% - (2 * $dialog-content-padding-v))',\n          ':last-child': 'max (100% - $dialog-content-padding-v)',\n        },\n      },\n    },\n    header: {\n      ellipsis: true,\n      styles: {\n        display: 'flex',\n        flow: 'row',\n        gap: '1x',\n        placeItems: 'center stretch',\n        placeContent: 'space-between',\n        padding: `$dialog-title-padding-v ${\n          isDismissable ? '($dialog-padding-h + 4x)' : '$dialog-padding-h'\n        } $dialog-title-padding-v $dialog-padding-h`,\n        border: 'bottom',\n      },\n    },\n    footer: {\n      styles: {\n        display: 'flex',\n        gap: '1x',\n        flow: 'row-reverse',\n        placeItems: 'baseline stretch',\n        placeContent: 'space-between',\n        padding: '$dialog-footer-v $dialog-padding-h',\n      },\n    },\n    buttonGroup: {\n      styles: {\n        flow: 'row-reverse',\n      },\n    },\n  };\n\n  return (\n    <DialogElement\n      ref={domRef}\n      data-id=\"Dialog\"\n      data-qa={qa || 'Dialog'}\n      styles={styles}\n      as=\"section\"\n      {...dialogProps}\n      mods={{ dismissable: isDismissable }}\n      style={{\n        '--dialog-size': `${sizePxMap[size] || sizePxMap.small}px`,\n        ...style,\n      }}\n      data-type={type}\n      data-size={size}\n    >\n      {dismissButton}\n\n      <SlotProvider slots={slots}>\n        {isDismissable && (\n          <CloseButton\n            icon={closeIcon || <CloseIcon size={20} />}\n            label={formatMessage('dismiss')}\n            onPress={() => onDismiss && onDismiss()}\n          />\n        )}\n        {children}\n      </SlotProvider>\n    </DialogElement>\n  );\n});\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.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.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.0 | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { ButtonGroup } from "../../actions/ButtonGroup/ButtonGroup.js";
 import { Button } from "../../actions/index.js";

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

@@ -1,10 +1,13 @@
-/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.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";
+import { generateRandomId } from "../../../utils/random.js";
 import { _Modal } from "../Modal/Modal.js";
 import { _Tray } from "../Modal/Tray.js";
 import { _Popover } from "../Modal/Popover.js";
 import { DialogContext } from "./context.js";
-import { Fragment, useEffect, useRef } from "react";
+import { Fragment, useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useOverlayPosition, useOverlayTrigger } from "react-aria";
 import { useMediaQuery } from "@react-spectrum/utils";
@@ -32,6 +35,19 @@ function DialogTrigger(props) {
 	let onExiting = () => isExiting.current = true;
 	let onExited = () => isExiting.current = false;
 	wasOpen.current = state.isOpen;
+	const dialogSyncId = useMemo(() => generateRandomId(), []);
+	const syncTriggerRef = useRef(null);
+	const syncOverlayRef = useRef(null);
+	const isPopoverFlavored = type === "popover";
+	usePopoverSync({
+		menuId: dialogSyncId,
+		isOpen: state.isOpen,
+		onClose: () => state.close(),
+		triggerRef: syncTriggerRef,
+		containerRef: syncOverlayRef,
+		dismissOnInnerButtonPress: isPopoverFlavored,
+		closeOnPeerOpen: isPopoverFlavored
+	});
 	useEffect(() => {
 		return () => {
 			if ((wasOpen.current || isExiting.current) && type !== "popover" && type !== "tray") console.warn("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.");
@@ -54,6 +70,9 @@ function DialogTrigger(props) {
 		isKeyboardDismissDisabled,
 		hideArrow,
 		shouldCloseOnInteractOutside,
+		syncTriggerRef,
+		syncOverlayRef,
+		triggerType: type,
 		onClose
 	});
 	let renderOverlay = () => {
@@ -62,6 +81,7 @@ function DialogTrigger(props) {
 			case "fullscreen":
 			case "fullscreenTakeover":
 			case "modal": return /* @__PURE__ */ jsx(_Modal, {
+				ref: syncOverlayRef,
 				hideOnClose,
 				isOpen: state.isOpen,
 				isDismissable,
@@ -75,6 +95,7 @@ function DialogTrigger(props) {
 				children: typeof content === "function" ? content(state.close) : content
 			});
 			case "tray": return /* @__PURE__ */ jsx(_Tray, {
+				ref: syncOverlayRef,
 				hideOnClose,
 				isOpen: state.isOpen,
 				isKeyboardDismissDisabled,
@@ -91,13 +112,18 @@ function DialogTrigger(props) {
 		trigger,
 		overlay: renderOverlay(),
 		hideOnClose,
+		syncTriggerRef,
 		onClose
 	});
 }
 function PopoverTrigger(allProps) {
-	let { state, styles, targetRef, trigger, content, hideArrow, onClose, isKeyboardDismissDisabled, hideOnClose, shouldCloseOnInteractOutside, keepOpenOnScroll, ...props } = allProps;
+	let { state, styles, targetRef, trigger, content, hideArrow, onClose, isKeyboardDismissDisabled, hideOnClose, shouldCloseOnInteractOutside, keepOpenOnScroll, syncTriggerRef, syncOverlayRef, triggerType, ...props } = allProps;
 	let triggerRef = useRef(null);
 	let overlayRef = useRef(null);
+	useLayoutEffect$1(() => {
+		if (syncTriggerRef) syncTriggerRef.current = targetRef?.current ?? triggerRef.current ?? null;
+		if (syncOverlayRef) syncOverlayRef.current = overlayRef.current ?? null;
+	});
 	let { overlayProps: popoverProps, placement, arrowProps, updatePosition } = useOverlayPosition({
 		targetRef: targetRef || triggerRef,
 		overlayRef,
@@ -144,6 +170,9 @@ function PopoverTrigger(allProps) {
 function DialogTriggerBase(props) {
 	const ref = useCombinedRefs(props.ref);
 	const wasOpenRef = useRef(false);
+	useLayoutEffect$1(() => {
+		if (props.syncTriggerRef) props.syncTriggerRef.current = ref.current ?? null;
+	});
 	let { type, state, onClose, isDismissable, dialogProps = {}, triggerProps = {}, overlay, trigger } = props;
 	let context = {
 		type,
@@ -158,9 +187,11 @@ function DialogTriggerBase(props) {
 			ref.current?.focus();
 		} else if (state.isOpen) wasOpenRef.current = true;
 	}, [state.isOpen]);
+	const triggerExtraProps = type === "popover" ? { "data-popover-trigger": "" } : {};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PressResponder, {
 		ref,
 		...triggerProps,
+		...triggerExtraProps,
 		isPressed: state.isOpen && type !== "modal" && type !== "fullscreen" && type !== "fullscreenTakeover",
 		onPress: state.toggle,
 		children: trigger

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 { Fragment, ReactElement, RefObject, useEffect, useRef } 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 { useCombinedRefs } from '../../../utils/react/index';\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 === 'popover' ? 'modal' : 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  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        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            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            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      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    ...props\n  } = allProps;\n\n  let triggerRef = useRef<HTMLButtonElement>(null);\n  let overlayRef = useRef<HTMLDivElement>(null);\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  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={shouldCloseOnInteractOutside}\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  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  return (\n    <Fragment>\n      <PressResponder\n        ref={ref}\n        {...triggerProps}\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 { 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 === 'popover' ? 'modal' : 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  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={shouldCloseOnInteractOutside}\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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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.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.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.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.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Overlay } from "./Overlay.js";
 import { _Underlay } from "./Underlay.js";
@@ -6,7 +6,7 @@ import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useModal, useOverlay, usePreventScroll } from "react-aria";
-import { useDOMRef } from "@react-spectrum/utils";
+import { useObjectRef } from "@react-aria/utils";
 
 //#region src/components/overlays/Modal/Modal.tsx
 const OVERLAY_WRAPPER_STYLES = {
@@ -65,7 +65,7 @@ const ModalElement = tasty({ styles: {
 } });
 function Modal(props, ref) {
 	let { qa, children, onClose, type, styles, ...otherProps } = props;
-	let domRef = useDOMRef(ref);
+	let domRef = useObjectRef(ref);
 	let { overlayProps, underlayProps } = useOverlay({ ...props }, domRef);
 	return /* @__PURE__ */ jsxs(_Overlay, {
 		...otherProps,

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Overlay","Underlay","mergeProps"],"sources":["../../../../src/components/overlays/Modal/Modal.tsx"],"sourcesContent":["import { useDOMRef } from '@react-spectrum/utils';\nimport { BaseProps, Props, Styles, tasty } from '@tenphi/tasty';\nimport { forwardRef, ReactNode } from 'react';\nimport { useModal, useOverlay, usePreventScroll } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\n\nimport { Overlay } from './Overlay';\nimport { ModalProps, TransitionState, WithCloseBehavior } from './types';\nimport { Underlay } from './Underlay';\n\nexport const OVERLAY_WRAPPER_STYLES: Styles = {\n  position: 'fixed',\n  display: 'grid',\n  left: 0,\n  top: 0,\n  placeItems: {\n    '': 'center',\n    'type=fullscreen': 'center',\n    'type=fullscreenTakeover | type=panel': 'stretch',\n  },\n  boxSizing: 'border-box',\n  width: '100vw',\n  height: '100dvh',\n  pointerEvents: 'none',\n  zIndex: 10,\n  transition: {\n    '': 'visibility .5s steps(2, start)',\n    open: 'visibility 0s linear',\n  },\n};\n\nconst ModalWrapperElement = tasty({\n  qa: 'ModalWrapper',\n  styles: OVERLAY_WRAPPER_STYLES,\n});\n\nconst ModalElement = tasty({\n  styles: {\n    display: {\n      '': 'none',\n      'enter | entered': 'grid',\n      exit: 'grid',\n      unmounted: 'none',\n    },\n    zIndex: 10,\n    height: {\n      '': 'max 90dvh',\n      'type=fullscreenTakeover | type=panel': '100dvh 100dvh',\n      'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n      'type=panel': 'auto',\n    },\n    width: {\n      '': '$min-dialog-size (100dvw - 8x)',\n      'type=panel': 'auto',\n    },\n    pointerEvents: 'none',\n    transition: 'opacity .25s linear, transform .25s ease-in-out',\n    transform: {\n      '': 'initial',\n      'type=modal & !open': 'translate(0, -3x) scale(1, 1)',\n      '(type^=fullscreen | type=panel) & !open':\n        'translate(0, 0) scale(1.02, 1.02)',\n    },\n    opacity: {\n      '': 0,\n      open: 0.9999,\n    },\n  },\n});\n\nexport interface CubeModalProps\n  extends Omit<ModalProps, 'container' | 'type' | 'nodeRef'>,\n    WithCloseBehavior {\n  container?: HTMLElement;\n  qa?: BaseProps['qa'];\n  onClose?: (action?: string) => void;\n  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';\n  styles?: Styles;\n  shouldCloseOnInteractOutside?: (element: Element) => boolean;\n}\n\nfunction Modal(props: CubeModalProps, ref) {\n  let { qa, children, onClose, type, styles, ...otherProps } = props;\n  let domRef = useDOMRef(ref);\n\n  let { overlayProps, underlayProps } = useOverlay({ ...props }, domRef);\n\n  return (\n    <Overlay {...otherProps}>\n      {type !== 'fullscreenTakeover' && type !== 'panel' && (\n        <Underlay {...underlayProps} />\n      )}\n      <ModalWrapper\n        ref={domRef}\n        qa={qa}\n        type={type}\n        overlayProps={overlayProps}\n        styles={styles}\n        onClose={onClose}\n      >\n        {children}\n      </ModalWrapper>\n    </Overlay>\n  );\n}\n\ninterface ModalWrapperProps extends TransitionState {\n  children?: ReactNode;\n  qa?: BaseProps['qa'];\n  isOpen?: boolean;\n  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';\n  placement?: 'top' | 'bottom';\n  styles?: Styles;\n  overlayProps?: Props;\n  onClose?: () => void;\n}\n\nlet ModalWrapper = forwardRef(function ModalWrapper(\n  props: ModalWrapperProps,\n  ref,\n) {\n  let {\n    qa,\n    children,\n    isOpen,\n    type,\n    placement,\n    styles,\n    overlayProps,\n    transitionState,\n    ...otherProps\n  } = props;\n\n  usePreventScroll({ isDisabled: transitionState !== 'entered' });\n\n  let { modalProps } = useModal({ isDisabled: transitionState !== 'entered' });\n\n  return (\n    <ModalWrapperElement data-type={type} data-placement={placement}>\n      <ModalElement\n        qa={qa || 'Modal'}\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-type={type}\n        data-placement={placement}\n        {...mergeProps(otherProps, overlayProps, modalProps)}\n        ref={ref}\n      >\n        {children}\n      </ModalElement>\n    </ModalWrapperElement>\n  );\n});\n\nlet _Modal = forwardRef(Modal);\n\n_Modal.displayName = 'Modal';\n\nexport { _Modal as Modal };\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,yBAAiC;CAC5C,UAAU;CACV,SAAS;CACT,MAAM;CACN,KAAK;CACL,YAAY;EACV,IAAI;EACJ,mBAAmB;EACnB,wCAAwC;EACzC;CACD,WAAW;CACX,OAAO;CACP,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;EACV,IAAI;EACJ,MAAM;EACP;CACF;AAED,MAAM,sBAAsB,MAAM;CAChC,IAAI;CACJ,QAAQ;CACT,CAAC;AAEF,MAAM,eAAe,MAAM,EACzB,QAAQ;CACN,SAAS;EACP,IAAI;EACJ,mBAAmB;EACnB,MAAM;EACN,WAAW;EACZ;CACD,QAAQ;CACR,QAAQ;EACN,IAAI;EACJ,wCAAwC;EACxC,mBAAmB;EACnB,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,cAAc;EACf;CACD,eAAe;CACf,YAAY;CACZ,WAAW;EACT,IAAI;EACJ,sBAAsB;EACtB,2CACE;EACH;CACD,SAAS;EACP,IAAI;EACJ,MAAM;EACP;CACF,EACF,CAAC;AAaF,SAAS,MAAM,OAAuB,KAAK;CACzC,IAAI,EAAE,IAAI,UAAU,SAAS,MAAM,QAAQ,GAAG,eAAe;CAC7D,IAAI,SAAS,UAAU,IAAI;CAE3B,IAAI,EAAE,cAAc,kBAAkB,WAAW,EAAE,GAAG,OAAO,EAAE,OAAO;AAEtE,QACE,qBAACA;EAAQ,GAAI;aACV,SAAS,wBAAwB,SAAS,WACzC,oBAACC,aAAS,GAAI,gBAAiB,EAEjC,oBAAC;GACC,KAAK;GACD;GACE;GACQ;GACN;GACC;GAER;IACY;GACP;;AAed,IAAI,eAAe,WAAW,SAAS,aACrC,OACA,KACA;CACA,IAAI,EACF,IACA,UACA,QACA,MACA,WACA,QACA,cACA,iBACA,GAAG,eACD;AAEJ,kBAAiB,EAAE,YAAY,oBAAoB,WAAW,CAAC;CAE/D,IAAI,EAAE,eAAe,SAAS,EAAE,YAAY,oBAAoB,WAAW,CAAC;AAE5E,QACE,oBAAC;EAAoB,aAAW;EAAM,kBAAgB;YACpD,oBAAC;GACC,IAAI,MAAM;GACF;GACR,MAAM;IACJ,MAAM;IACN,OAAO,oBAAoB;IAC3B,MAAM,oBAAoB;IAC1B,WAAW,oBAAoB;IAC/B,SAAS,oBAAoB;IAC9B;GACD,aAAW;GACX,kBAAgB;GAChB,GAAIC,aAAW,YAAY,cAAc,WAAW;GAC/C;GAEJ;IACY;GACK;EAExB;AAEF,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}
+{"version":3,"file":"Modal.js","names":["Overlay","Underlay","mergeProps"],"sources":["../../../../src/components/overlays/Modal/Modal.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport { BaseProps, Props, Styles, tasty } from '@tenphi/tasty';\nimport { forwardRef, ReactNode } from 'react';\nimport { useModal, useOverlay, usePreventScroll } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\n\nimport { Overlay } from './Overlay';\nimport { ModalProps, TransitionState, WithCloseBehavior } from './types';\nimport { Underlay } from './Underlay';\n\nexport const OVERLAY_WRAPPER_STYLES: Styles = {\n  position: 'fixed',\n  display: 'grid',\n  left: 0,\n  top: 0,\n  placeItems: {\n    '': 'center',\n    'type=fullscreen': 'center',\n    'type=fullscreenTakeover | type=panel': 'stretch',\n  },\n  boxSizing: 'border-box',\n  width: '100vw',\n  height: '100dvh',\n  pointerEvents: 'none',\n  zIndex: 10,\n  transition: {\n    '': 'visibility .5s steps(2, start)',\n    open: 'visibility 0s linear',\n  },\n};\n\nconst ModalWrapperElement = tasty({\n  qa: 'ModalWrapper',\n  styles: OVERLAY_WRAPPER_STYLES,\n});\n\nconst ModalElement = tasty({\n  styles: {\n    display: {\n      '': 'none',\n      'enter | entered': 'grid',\n      exit: 'grid',\n      unmounted: 'none',\n    },\n    zIndex: 10,\n    height: {\n      '': 'max 90dvh',\n      'type=fullscreenTakeover | type=panel': '100dvh 100dvh',\n      'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n      'type=panel': 'auto',\n    },\n    width: {\n      '': '$min-dialog-size (100dvw - 8x)',\n      'type=panel': 'auto',\n    },\n    pointerEvents: 'none',\n    transition: 'opacity .25s linear, transform .25s ease-in-out',\n    transform: {\n      '': 'initial',\n      'type=modal & !open': 'translate(0, -3x) scale(1, 1)',\n      '(type^=fullscreen | type=panel) & !open':\n        'translate(0, 0) scale(1.02, 1.02)',\n    },\n    opacity: {\n      '': 0,\n      open: 0.9999,\n    },\n  },\n});\n\nexport interface CubeModalProps\n  extends Omit<ModalProps, 'container' | 'type' | 'nodeRef'>,\n    WithCloseBehavior {\n  container?: HTMLElement;\n  qa?: BaseProps['qa'];\n  onClose?: (action?: string) => void;\n  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';\n  styles?: Styles;\n  shouldCloseOnInteractOutside?: (element: Element) => boolean;\n}\n\nfunction Modal(props: CubeModalProps, ref) {\n  let { qa, children, onClose, type, styles, ...otherProps } = props;\n  let domRef = useObjectRef(ref);\n\n  let { overlayProps, underlayProps } = useOverlay({ ...props }, domRef);\n\n  return (\n    <Overlay {...otherProps}>\n      {type !== 'fullscreenTakeover' && type !== 'panel' && (\n        <Underlay {...underlayProps} />\n      )}\n      <ModalWrapper\n        ref={domRef}\n        qa={qa}\n        type={type}\n        overlayProps={overlayProps}\n        styles={styles}\n        onClose={onClose}\n      >\n        {children}\n      </ModalWrapper>\n    </Overlay>\n  );\n}\n\ninterface ModalWrapperProps extends TransitionState {\n  children?: ReactNode;\n  qa?: BaseProps['qa'];\n  isOpen?: boolean;\n  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';\n  placement?: 'top' | 'bottom';\n  styles?: Styles;\n  overlayProps?: Props;\n  onClose?: () => void;\n}\n\nlet ModalWrapper = forwardRef(function ModalWrapper(\n  props: ModalWrapperProps,\n  ref,\n) {\n  let {\n    qa,\n    children,\n    isOpen,\n    type,\n    placement,\n    styles,\n    overlayProps,\n    transitionState,\n    ...otherProps\n  } = props;\n\n  usePreventScroll({ isDisabled: transitionState !== 'entered' });\n\n  let { modalProps } = useModal({ isDisabled: transitionState !== 'entered' });\n\n  return (\n    <ModalWrapperElement data-type={type} data-placement={placement}>\n      <ModalElement\n        qa={qa || 'Modal'}\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-type={type}\n        data-placement={placement}\n        {...mergeProps(otherProps, overlayProps, modalProps)}\n        ref={ref}\n      >\n        {children}\n      </ModalElement>\n    </ModalWrapperElement>\n  );\n});\n\nlet _Modal = forwardRef(Modal);\n\n_Modal.displayName = 'Modal';\n\nexport { _Modal as Modal };\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,yBAAiC;CAC5C,UAAU;CACV,SAAS;CACT,MAAM;CACN,KAAK;CACL,YAAY;EACV,IAAI;EACJ,mBAAmB;EACnB,wCAAwC;EACzC;CACD,WAAW;CACX,OAAO;CACP,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;EACV,IAAI;EACJ,MAAM;EACP;CACF;AAED,MAAM,sBAAsB,MAAM;CAChC,IAAI;CACJ,QAAQ;CACT,CAAC;AAEF,MAAM,eAAe,MAAM,EACzB,QAAQ;CACN,SAAS;EACP,IAAI;EACJ,mBAAmB;EACnB,MAAM;EACN,WAAW;EACZ;CACD,QAAQ;CACR,QAAQ;EACN,IAAI;EACJ,wCAAwC;EACxC,mBAAmB;EACnB,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,cAAc;EACf;CACD,eAAe;CACf,YAAY;CACZ,WAAW;EACT,IAAI;EACJ,sBAAsB;EACtB,2CACE;EACH;CACD,SAAS;EACP,IAAI;EACJ,MAAM;EACP;CACF,EACF,CAAC;AAaF,SAAS,MAAM,OAAuB,KAAK;CACzC,IAAI,EAAE,IAAI,UAAU,SAAS,MAAM,QAAQ,GAAG,eAAe;CAC7D,IAAI,SAAS,aAAa,IAAI;CAE9B,IAAI,EAAE,cAAc,kBAAkB,WAAW,EAAE,GAAG,OAAO,EAAE,OAAO;AAEtE,QACE,qBAACA;EAAQ,GAAI;aACV,SAAS,wBAAwB,SAAS,WACzC,oBAACC,aAAS,GAAI,gBAAiB,EAEjC,oBAAC;GACC,KAAK;GACD;GACE;GACQ;GACN;GACC;GAER;IACY;GACP;;AAed,IAAI,eAAe,WAAW,SAAS,aACrC,OACA,KACA;CACA,IAAI,EACF,IACA,UACA,QACA,MACA,WACA,QACA,cACA,iBACA,GAAG,eACD;AAEJ,kBAAiB,EAAE,YAAY,oBAAoB,WAAW,CAAC;CAE/D,IAAI,EAAE,eAAe,SAAS,EAAE,YAAY,oBAAoB,WAAW,CAAC;AAE5E,QACE,oBAAC;EAAoB,aAAW;EAAM,kBAAgB;YACpD,oBAAC;GACC,IAAI,MAAM;GACF;GACR,MAAM;IACJ,MAAM;IACN,OAAO,oBAAoB;IAC3B,MAAM,oBAAoB;IAC1B,WAAW,oBAAoB;IAC/B,SAAS,oBAAoB;IAC9B;GACD,aAAW;GACX,kBAAgB;GAChB,GAAIC,aAAW,YAAY,cAAc,WAAW;GAC/C;GAEJ;IACY;GACK;EAExB;AAEF,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.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.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.0 | Cube Dev Team */
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
 import { Provider, useProviderProps } from "../../../provider.js";
 import { OpenTransitionContext } from "./OpenTransitionContext.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.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.140.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Overlay } from "./Overlay.js";
 import { _Underlay } from "./Underlay.js";
@@ -7,7 +7,7 @@ import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useModal, useOverlay, usePreventScroll } from "react-aria";
-import { useDOMRef } from "@react-spectrum/utils";
+import { useObjectRef } from "@react-aria/utils";
 
 //#region src/components/overlays/Modal/Tray.tsx
 const TrayWrapperElement = tasty({
@@ -37,7 +37,7 @@ const TrayElement = tasty({ styles: {
 } });
 function Tray(props, ref) {
 	let { qa, children, onClose, isFixedHeight, isNonModal, styles, shouldCloseOnInteractOutside, ...otherProps } = props;
-	let domRef = useDOMRef(ref);
+	let domRef = useObjectRef(ref);
 	let { overlayProps, underlayProps } = useOverlay({
 		...props,
 		isDismissable: true,