@cube-dev/ui-kit 0.168.1 → 0.169.1

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["CollectionItem","mergeProps"],"sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import { mergeStyles, OUTER_STYLES } from '@tenphi/tasty';\nimport {\n  Children,\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { AriaTabListProps, useTabList } from 'react-aria';\nimport {\n  Item as CollectionItem,\n  DraggableCollectionState,\n  DroppableCollectionState,\n  useTabListState,\n} from 'react-stately';\n\nimport { useEvent, useWarn } from '../../../_internal/hooks';\nimport { DirectionIcon } from '../../../icons';\nimport { mergeProps, useMergeStyles } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useTinyScrollbar } from '../../content/Layout/hooks/useTinyScrollbar';\nimport { useBoardDragActive } from '../../layout/Board/board-context';\n\nimport { DraggableTabList } from './DraggableTabList';\nimport { TabIndicatorElement, TabsElement } from './styled';\nimport { TabButton } from './TabButton';\nimport { CachedPanelRenderer, TabPanelRenderer } from './TabPanel';\nimport { TabPicker } from './TabPicker';\nimport { TabsAction } from './TabsAction';\nimport { TabsContextValue, TabsProvider } from './TabsContext';\nimport { useTabEditing } from './use-tab-editing';\nimport { useTabIndicator } from './use-tab-indicator';\n\nimport type { Key } from '@react-types/shared';\nimport type {\n  CubeTabListProps,\n  CubeTabPanelProps,\n  CubeTabProps,\n  CubeTabsProps,\n  ParsedPanel,\n  ParsedTab,\n} from './types';\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Generic helper to check if a child is a specific component by displayName.\n */\nfunction isComponentElement<T>(\n  child: ReactNode,\n  displayName: string,\n): child is ReactElement<T> {\n  return (\n    isValidElement(child) &&\n    typeof child.type === 'function' &&\n    (child.type as any).displayName === displayName\n  );\n}\n\n/** Checks if a child is a Tab component. */\nconst isTabElement = (child: ReactNode): child is ReactElement<CubeTabProps> =>\n  isComponentElement<CubeTabProps>(child, 'CubeTab');\n\n/** Checks if a child is a TabPanel component. */\nconst isTabPanelElement = (\n  child: ReactNode,\n): child is ReactElement<CubeTabPanelProps> =>\n  isComponentElement<CubeTabPanelProps>(child, 'CubeTabPanel');\n\n/** Checks if a child is a TabList component. */\nconst isTabListElement = (\n  child: ReactNode,\n): child is ReactElement<CubeTabListProps> =>\n  isComponentElement<CubeTabListProps>(child, 'CubeTabList');\n\n/**\n * Extracts the raw key from a React element, stripping the \".$\" prefix\n * that React adds via Children.map/toArray.\n */\nfunction getRawKey(element: ReactElement): string | null {\n  if (element.key == null) return null;\n  const keyStr = String(element.key);\n  return keyStr.startsWith('.$') ? keyStr.slice(2) : keyStr;\n}\n\n// =============================================================================\n// Tab Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction Tab(_props: CubeTabProps): ReactElement | null {\n  return null;\n}\n\nTab.displayName = 'CubeTab';\n\n// =============================================================================\n// TabPanel Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabPanel(_props: CubeTabPanelProps): ReactElement | null {\n  return null;\n}\n\nTabPanel.displayName = 'CubeTabPanel';\n\n// =============================================================================\n// TabList Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabList(_props: CubeTabListProps): ReactElement | null {\n  return null;\n}\n\nTabList.displayName = 'CubeTabList';\n\n// =============================================================================\n// Main Tabs Component\n// =============================================================================\n\nfunction TabsComponent(\n  props: CubeTabsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    label = 'Tabs',\n    defaultActiveKey,\n    activeKey,\n    size,\n    type = 'default',\n    placement = 'top',\n    onChange,\n    onDelete,\n    onTitleChange,\n    autoHideActions,\n    isEditable: parentIsEditable,\n    menu: parentMenu,\n    menuTriggerProps: parentMenuTriggerProps,\n    menuProps: parentMenuProps,\n    contextMenu: parentContextMenu,\n    onAction: parentOnAction,\n    children,\n    prefix,\n    suffix,\n    prerender = false,\n    keepMounted = false,\n    qa = 'Tabs',\n    renderPanel,\n    panelCacheKeys,\n    isReorderable = false,\n    keyOrder,\n    onReorder,\n    showTabPicker = false,\n    showScrollArrows = false,\n    tabPickerPosition = 'suffix',\n    scrollArrowsPosition = 'suffix',\n    hideTabListScroll = false,\n    tabListPadding,\n    barStyles,\n    tabListStyles,\n    prefixStyles,\n    suffixStyles,\n    ...otherProps\n  } = props;\n\n  // Derive orientation from placement\n  const orientation: 'horizontal' | 'vertical' =\n    placement === 'left' || placement === 'right' ? 'vertical' : 'horizontal';\n\n  // `narrow` only makes sense for a horizontal strip — its whole point is\n  // collapsed horizontal padding for a denser row of tabs. Force `default`\n  // when the strip is vertical.\n  const effectiveType =\n    orientation === 'vertical' && type === 'narrow' ? 'default' : type;\n\n  // Extract outer styles (these go on the new outer wrapper)\n  const baseStyles = extractStyles(otherProps, OUTER_STYLES);\n\n  // Build TabList padding style (memoized)\n  const tabListPaddingStyles = useMemo(\n    () =>\n      tabListPadding ? { '$tablist-padding': `${tabListPadding}` } : undefined,\n    [tabListPadding],\n  );\n\n  // Merge tabListPaddingStyles with tabListStyles (memoized)\n  const mergedTabListStyles = useMemo(\n    () => mergeStyles(tabListPaddingStyles, tabListStyles),\n    [tabListPaddingStyles, tabListStyles],\n  );\n\n  // Merge all sub-element styles into baseStyles. The outer `TabsElement`\n  // exposes `Bar`, `Prefix`, `Suffix`, `TabList`, `ScrollWrapper`, `Scroll`,\n  // and `Scrollbar` sub-elements (defined in styled.ts).\n  const combinedStyles = useMergeStyles(baseStyles, {\n    Bar: barStyles,\n    TabList: mergedTabListStyles,\n    Prefix: prefixStyles,\n    Suffix: suffixStyles,\n  });\n\n  // DOM element refs\n  const listRef = useRef<HTMLDivElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  // Track visited tabs for keepMounted functionality\n  const visitedKeysRef = useRef<Set<string>>(new Set());\n\n  // While a Board widget is being dragged (this Tabs sits inside a Board),\n  // force panels to stay mounted so a tab a widget is dragged out of - and its\n  // board owning the in-flight drag gesture - is not unmounted when the user\n  // spring-loads a different tab by hovering it. Always `false` outside a Board.\n  const isBoardDragActive = useBoardDragActive();\n  const effectiveKeepMounted = keepMounted || isBoardDragActive;\n\n  // =========================================================================\n  // Tab Title Editing Hook\n  // =========================================================================\n  const onTitleChangeRaf = useEvent((key: string, newTitle: string) => {\n    requestAnimationFrame(() => {\n      onTitleChange?.(key, newTitle);\n    });\n  });\n\n  const { editingKey, startEditing, cancelEditing, submitEditing } =\n    useTabEditing({\n      onChange,\n      onTitleChange: onTitleChange ? onTitleChangeRaf : undefined,\n    });\n\n  // =========================================================================\n  // Parse children to extract tabs and explicit panels\n  // =========================================================================\n  const { parsedTabs, explicitPanels, hasAnyContent } = useMemo(() => {\n    const childArray = Children.toArray(children);\n    const tabs: ParsedTab[] = [];\n    const panels = new Map<string, ParsedPanel>();\n    let hasExplicitList = false;\n    let tabChildren: ReactNode[] = [];\n\n    // Check for explicit Tabs.List / Tabs.Panel structure\n    for (const child of childArray) {\n      if (isTabListElement(child)) {\n        hasExplicitList = true;\n        tabChildren = Children.toArray(child.props.children);\n      } else if (isTabPanelElement(child)) {\n        const key = getRawKey(child as ReactElement);\n\n        if (key != null) {\n          panels.set(key, {\n            key,\n            content: child.props.children,\n            prerender: child.props.prerender,\n            keepMounted: child.props.keepMounted,\n            styles: child.props.styles,\n            qa: child.props.qa,\n            qaVal: child.props.qaVal,\n          });\n        }\n      }\n    }\n\n    // If no explicit list, use direct Tab children\n    if (!hasExplicitList) {\n      tabChildren = childArray;\n    }\n\n    // Parse Tab elements\n    let hasContent = panels.size > 0;\n\n    for (const child of tabChildren) {\n      if (isTabElement(child)) {\n        const key = getRawKey(child) ?? child.props.id;\n\n        if (key != null) {\n          const { id: _id, children: tabContent, ...tabProps } = child.props;\n\n          tabs.push({\n            ...tabProps,\n            key,\n            content: tabContent,\n          });\n\n          if (tabContent != null) {\n            hasContent = true;\n          }\n        }\n      }\n    }\n\n    return {\n      parsedTabs: tabs,\n      explicitPanels: panels,\n      hasAnyContent: hasContent,\n    };\n  }, [children]);\n\n  // Clean up visitedKeys when tabs are removed\n  const currentTabKeysSet = useMemo(\n    () => new Set(parsedTabs.map((t) => t.key)),\n    [parsedTabs],\n  );\n\n  useEffect(() => {\n    for (const key of visitedKeysRef.current) {\n      if (!currentTabKeysSet.has(key)) {\n        visitedKeysRef.current.delete(key);\n      }\n    }\n  }, [currentTabKeysSet]);\n\n  // =========================================================================\n  // Order tabs according to keyOrder\n  // =========================================================================\n  const orderedParsedTabs = useMemo(() => {\n    if (!keyOrder || keyOrder.length === 0) {\n      return parsedTabs;\n    }\n\n    const tabMap = new Map<string, ParsedTab>();\n    for (const tab of parsedTabs) {\n      tabMap.set(tab.key, tab);\n    }\n\n    const ordered: ParsedTab[] = [];\n    for (const key of keyOrder) {\n      const tab = tabMap.get(String(key));\n      if (tab) {\n        ordered.push(tab);\n        tabMap.delete(String(key));\n      }\n    }\n\n    // Append any tabs not in keyOrder\n    for (const tab of parsedTabs) {\n      if (tabMap.has(tab.key)) {\n        ordered.push(tab);\n      }\n    }\n\n    return ordered;\n  }, [parsedTabs, keyOrder]);\n\n  // Create collection items for React Stately\n  const collectionItems = useMemo(() => {\n    return orderedParsedTabs.map((tab) => (\n      <CollectionItem\n        key={tab.key}\n        textValue={typeof tab.title === 'string' ? tab.title : String(tab.key)}\n      >\n        {tab.title}\n      </CollectionItem>\n    ));\n  }, [orderedParsedTabs]);\n\n  // Determine disabled keys\n  const disabledKeys = useMemo(() => {\n    return new Set(\n      parsedTabs.filter((tab) => tab.isDisabled).map((tab) => tab.key),\n    );\n  }, [parsedTabs]);\n\n  // Handle selection change (converts React Aria's Key to string for our API)\n  const handleSelectionChange = useEvent((key: Key) => {\n    const keyStr = String(key);\n    visitedKeysRef.current.add(keyStr);\n    onChange?.(keyStr);\n  });\n\n  // Convert keys to strings for React Aria compatibility\n  const selectedKey = activeKey != null ? String(activeKey) : undefined;\n  const defaultSelectedKey =\n    defaultActiveKey != null ? String(defaultActiveKey) : undefined;\n\n  // Create aria props for useTabListState\n  const ariaProps: AriaTabListProps<object> = useMemo(\n    () => ({\n      selectedKey,\n      defaultSelectedKey,\n      onSelectionChange: handleSelectionChange,\n      disabledKeys,\n      children: collectionItems,\n      'aria-label': label,\n      orientation,\n    }),\n    [\n      selectedKey,\n      defaultSelectedKey,\n      handleSelectionChange,\n      disabledKeys,\n      collectionItems,\n      label,\n      orientation,\n    ],\n  );\n\n  // Create state using useTabListState\n  const state = useTabListState(ariaProps);\n\n  // Track initial selected key for visited tabs\n  useEffect(() => {\n    if (state.selectedKey != null) {\n      visitedKeysRef.current.add(String(state.selectedKey));\n    }\n  }, [state.selectedKey]);\n\n  // Get tablist props from react-aria\n  const { tabListProps } = useTabList(ariaProps, state, listRef);\n\n  // Handle selection from TabPicker (needs to update internal state in uncontrolled mode)\n  const handleTabPickerSelect = useEvent((key: string) => {\n    // Update internal state (for uncontrolled mode)\n    state.setSelectedKey(key);\n    // Also call the external onChange handler\n    handleSelectionChange(key);\n  });\n\n  // =========================================================================\n  // Tab Indicator (for default type)\n  // =========================================================================\n  // Create order token that changes when tab order changes (for indicator recalculation)\n  const orderToken = useMemo(\n    () => orderedParsedTabs.map((t) => t.key).join(','),\n    [orderedParsedTabs],\n  );\n\n  const indicatorStyle = useTabIndicator(\n    listRef,\n    state.selectedKey,\n    effectiveType === 'default' || effectiveType === 'narrow',\n    orientation,\n    orderToken,\n  );\n\n  // =========================================================================\n  // Tiny Scrollbar (not for radio type)\n  // =========================================================================\n  const isTinyScrollbar = effectiveType !== 'radio';\n  const {\n    handleHStyle,\n    handleVStyle,\n    hasOverflowX,\n    hasOverflowY,\n    isScrolling,\n    isAtStartX,\n    isAtEndX,\n    isAtStartY,\n    isAtEndY,\n  } = useTinyScrollbar(scrollRef, isTinyScrollbar);\n  const showTinyScrollbar = isTinyScrollbar && !hideTabListScroll;\n\n  // Active-axis aggregates (used everywhere downstream so we don't sprinkle\n  // orientation checks around).\n  const hasOverflow = orientation === 'vertical' ? hasOverflowY : hasOverflowX;\n  const isAtStart = orientation === 'vertical' ? isAtStartY : isAtStartX;\n  const isAtEnd = orientation === 'vertical' ? isAtEndY : isAtEndX;\n\n  const hasPanels = hasAnyContent || !!renderPanel;\n\n  // =========================================================================\n  // Tab Picker visibility\n  // =========================================================================\n  useWarn(showTabPicker && effectiveType === 'radio', {\n    key: ['tabs-tabpicker-radio-unsupported'],\n    args: [\n      'Tabs:',\n      '`showTabPicker` is not supported when `type=\"radio\"`. The TabPicker will not be rendered.',\n    ],\n  });\n\n  const shouldShowTabPicker =\n    effectiveType !== 'radio' &&\n    (showTabPicker === true || (showTabPicker === 'auto' && hasOverflow));\n\n  // =========================================================================\n  // Scroll Arrows visibility and handlers\n  // =========================================================================\n  useWarn(showScrollArrows && effectiveType === 'radio', {\n    key: ['tabs-scrollarrows-radio-unsupported'],\n    args: [\n      'Tabs:',\n      '`showScrollArrows` is not supported when `type=\"radio\"`. The scroll arrows will not be rendered.',\n    ],\n  });\n\n  const shouldShowScrollArrows =\n    effectiveType !== 'radio' &&\n    (showScrollArrows === true || (showScrollArrows === 'auto' && hasOverflow));\n\n  const handleScrollStart = useEvent(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    if (orientation === 'vertical') {\n      el.scrollTo({\n        top: el.scrollTop - el.clientHeight,\n        behavior: 'smooth',\n      });\n    } else {\n      el.scrollTo({\n        left: el.scrollLeft - el.clientWidth,\n        behavior: 'smooth',\n      });\n    }\n  });\n\n  const handleScrollEnd = useEvent(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    if (orientation === 'vertical') {\n      el.scrollTo({\n        top: el.scrollTop + el.clientHeight,\n        behavior: 'smooth',\n      });\n    } else {\n      el.scrollTo({\n        left: el.scrollLeft + el.clientWidth,\n        behavior: 'smooth',\n      });\n    }\n  });\n\n  // =========================================================================\n  // Base Context Value (without drag/drop states)\n  // =========================================================================\n  const baseContextValue = useMemo(\n    () => ({\n      state,\n      type: effectiveType,\n      size,\n      placement,\n      autoHideActions,\n      isEditable: parentIsEditable,\n      menu: parentMenu,\n      menuTriggerProps: parentMenuTriggerProps,\n      menuProps: parentMenuProps,\n      contextMenu: parentContextMenu,\n      onDelete,\n      onAction: parentOnAction,\n      editingKey,\n      startEditing,\n      submitEditing,\n      cancelEditing,\n    }),\n    [\n      state,\n      effectiveType,\n      size,\n      placement,\n      autoHideActions,\n      parentIsEditable,\n      parentMenu,\n      parentMenuTriggerProps,\n      parentMenuProps,\n      parentContextMenu,\n      onDelete,\n      parentOnAction,\n      editingKey,\n      startEditing,\n      submitEditing,\n      cancelEditing,\n    ],\n  );\n\n  // Helper to create full context value with optional drag/drop states\n  const createContextValue = (\n    dragState?: DraggableCollectionState,\n    dropState?: DroppableCollectionState,\n  ): TabsContextValue => ({\n    ...baseContextValue,\n    dragState,\n    dropState,\n  });\n\n  // =========================================================================\n  // Tab List Content Renderer\n  // =========================================================================\n  const renderTabListContent = (\n    contextValue: TabsContextValue,\n    collectionProps: Record<string, unknown> = {},\n  ) => (\n    <div\n      {...mergeProps(tabListProps, collectionProps)}\n      ref={listRef}\n      data-element=\"TabList\"\n    >\n      <TabsProvider value={contextValue}>\n        {orderedParsedTabs.map((tab, index) => {\n          const item = state.collection.getItem(tab.key);\n          if (!item) return null;\n\n          return (\n            <TabButton\n              key={item.key}\n              item={item}\n              tabData={tab}\n              isLastTab={index === orderedParsedTabs.length - 1}\n            />\n          );\n        })}\n      </TabsProvider>\n      {indicatorStyle && (\n        <TabIndicatorElement\n          mods={{ placement }}\n          style={\n            orientation === 'vertical'\n              ? {\n                  top: indicatorStyle.start,\n                  height: indicatorStyle.size,\n                }\n              : {\n                  left: indicatorStyle.start,\n                  width: indicatorStyle.size,\n                }\n          }\n        />\n      )}\n    </div>\n  );\n\n  // =========================================================================\n  // Mods for styling\n  // =========================================================================\n  const mods = useMemo(\n    () => ({\n      type: effectiveType,\n      size,\n      placement,\n      deletable: !!onDelete,\n      scrolling: showTinyScrollbar && isScrolling,\n      'fade-start': !isAtStart,\n      'fade-end': !isAtEnd,\n      'has-panels': hasPanels,\n    }),\n    [\n      effectiveType,\n      size,\n      placement,\n      onDelete,\n      showTinyScrollbar,\n      isScrolling,\n      isAtStart,\n      isAtEnd,\n      hasPanels,\n    ],\n  );\n\n  // =========================================================================\n  // Action Elements (TabPicker and Scroll Arrows)\n  // =========================================================================\n  const scrollArrowsElement = shouldShowScrollArrows ? (\n    <>\n      <TabsAction\n        icon={\n          <DirectionIcon to={orientation === 'vertical' ? 'top' : 'left'} />\n        }\n        aria-label={\n          orientation === 'vertical' ? 'Scroll tabs up' : 'Scroll tabs left'\n        }\n        isDisabled={isAtStart}\n        onPress={handleScrollStart}\n      />\n      <TabsAction\n        icon={\n          <DirectionIcon to={orientation === 'vertical' ? 'bottom' : 'right'} />\n        }\n        aria-label={\n          orientation === 'vertical' ? 'Scroll tabs down' : 'Scroll tabs right'\n        }\n        isDisabled={isAtEnd}\n        onPress={handleScrollEnd}\n      />\n    </>\n  ) : null;\n\n  const tabPickerElement = shouldShowTabPicker ? (\n    <TabPicker\n      tabs={orderedParsedTabs}\n      selectedKey={state.selectedKey}\n      size={size}\n      type={effectiveType}\n      placement={placement}\n      isReorderable={isReorderable}\n      onSelect={handleTabPickerSelect}\n      onDelete={onDelete}\n      onReorder={onReorder}\n    />\n  ) : null;\n\n  // Determine which actions go in prefix/suffix\n  // In prefix: TabPicker first (left), then scroll arrows (right)\n  // In suffix: scroll arrows first (left), then TabPicker (right)\n  const prefixHasActions =\n    (shouldShowTabPicker && tabPickerPosition === 'prefix') ||\n    (shouldShowScrollArrows && scrollArrowsPosition === 'prefix');\n\n  const suffixHasActions =\n    (shouldShowTabPicker && tabPickerPosition === 'suffix') ||\n    (shouldShowScrollArrows && scrollArrowsPosition === 'suffix');\n\n  // Apply the active-axis scrollbar handle vars to the outer wrapper so the\n  // `Scrollbar` sub-element can read them via CSS variables.\n  const handleStyle = showTinyScrollbar\n    ? orientation === 'vertical'\n      ? handleVStyle\n      : handleHStyle\n    : undefined;\n\n  // Wrap with TabsProvider so prefix/suffix can access context (size, type, placement).\n  // The inner TabsProvider in renderTabListContent will override for tab buttons.\n  return (\n    <TabsProvider value={baseContextValue}>\n      <TabsElement\n        ref={ref}\n        qa={qa}\n        mods={mods}\n        styles={combinedStyles}\n        style={handleStyle}\n        data-size={size}\n      >\n        <div data-element=\"Bar\">\n          {prefix || prefixHasActions ? (\n            <div data-element=\"Prefix\">\n              {tabPickerPosition === 'prefix' && tabPickerElement}\n              {scrollArrowsPosition === 'prefix' && scrollArrowsElement}\n              {prefix}\n            </div>\n          ) : null}\n          <div data-element=\"ScrollWrapper\">\n            <div ref={scrollRef} data-element=\"Scroll\">\n              {isReorderable ? (\n                <DraggableTabList\n                  state={state}\n                  listRef={listRef}\n                  orderedKeys={orderedParsedTabs.map((t) => t.key)}\n                  orientation={orientation}\n                  onReorder={onReorder}\n                >\n                  {(dragState, dropState, collectionProps) =>\n                    renderTabListContent(\n                      createContextValue(dragState, dropState),\n                      collectionProps,\n                    )\n                  }\n                </DraggableTabList>\n              ) : (\n                renderTabListContent(createContextValue())\n              )}\n            </div>\n            {showTinyScrollbar && hasOverflow && (\n              <div data-element=\"Scrollbar\" />\n            )}\n          </div>\n          {suffix || suffixHasActions ? (\n            <div data-element=\"Suffix\">\n              {scrollArrowsPosition === 'suffix' && scrollArrowsElement}\n              {tabPickerPosition === 'suffix' && tabPickerElement}\n              {suffix}\n            </div>\n          ) : null}\n        </div>\n\n        {/* Functional panel rendering with content caching */}\n        {renderPanel && (\n          <CachedPanelRenderer\n            parsedTabs={parsedTabs}\n            explicitPanels={explicitPanels}\n            state={state}\n            renderPanel={renderPanel}\n            panelCacheKeys={panelCacheKeys}\n            prerender={prerender}\n            keepMounted={effectiveKeepMounted}\n            visitedKeys={visitedKeysRef.current}\n          />\n        )}\n\n        {/* Static panel rendering (traditional children-based approach) */}\n        {!renderPanel &&\n          hasAnyContent &&\n          parsedTabs.map((tab) => {\n            const explicitPanel = explicitPanels.get(tab.key);\n            const content = explicitPanel?.content ?? tab.content;\n\n            if (content == null) return null;\n\n            return (\n              <TabPanelRenderer\n                key={tab.key}\n                tabKey={tab.key}\n                state={state}\n                content={content}\n                prerender={prerender}\n                keepMounted={effectiveKeepMounted}\n                tabPrerender={explicitPanel?.prerender ?? tab.prerender}\n                tabKeepMounted={explicitPanel?.keepMounted ?? tab.keepMounted}\n                visitedKeys={visitedKeysRef.current}\n                panelStyles={explicitPanel?.styles}\n                qa={explicitPanel?.qa}\n                qaVal={explicitPanel?.qaVal}\n              />\n            );\n          })}\n      </TabsElement>\n    </TabsProvider>\n  );\n}\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nconst _Tabs = forwardRef(TabsComponent);\n\n/**\n * Tabs component for organizing content into multiple panels.\n * Built with React Aria for full accessibility support.\n *\n * **Note:** Tab keys are internally converted to strings for React Aria compatibility.\n *\n * @example\n * // Simple usage\n * <Tabs defaultActiveKey=\"tab1\">\n *   <Tab key=\"tab1\" title=\"Tab 1\">Content 1</Tab>\n *   <Tab key=\"tab2\" title=\"Tab 2\">Content 2</Tab>\n * </Tabs>\n *\n * @example\n * // Tabs-only (no panels)\n * <Tabs activeKey={activeTab} onChange={setActiveTab}>\n *   <Tab key=\"overview\" title=\"Overview\" />\n *   <Tab key=\"settings\" title=\"Settings\" />\n * </Tabs>\n *\n * @example\n * // Explicit panels\n * <Tabs defaultActiveKey=\"tab1\">\n *   <Tabs.List>\n *     <Tab key=\"tab1\" title=\"Tab 1\" />\n *     <Tab key=\"tab2\" title=\"Tab 2\" />\n *   </Tabs.List>\n *   <Tabs.Panel key=\"tab1\">Content 1</Tabs.Panel>\n *   <Tabs.Panel key=\"tab2\">Content 2</Tabs.Panel>\n * </Tabs>\n */\nexport const Tabs = Object.assign(_Tabs, {\n  Tab,\n  List: TabList,\n  Panel: TabPanel,\n  Action: TabsAction,\n});\n\nexport { Tab, TabList, TabPanel, TabsAction };\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":["CollectionItem","mergeProps"],"sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import { mergeStyles, OUTER_STYLES } from '@tenphi/tasty';\nimport {\n  Children,\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { AriaTabListProps, useTabList } from 'react-aria';\nimport {\n  Item as CollectionItem,\n  DraggableCollectionState,\n  DroppableCollectionState,\n  useTabListState,\n} from 'react-stately';\n\nimport { useEvent, useWarn } from '../../../_internal/hooks';\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { mergeProps, useMergeStyles } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useTinyScrollbar } from '../../content/Layout/hooks/useTinyScrollbar';\nimport { useBoardDragActive } from '../../layout/Board/board-context';\n\nimport { DraggableTabList } from './DraggableTabList';\nimport { TabIndicatorElement, TabsElement } from './styled';\nimport { TabButton } from './TabButton';\nimport { CachedPanelRenderer, TabPanelRenderer } from './TabPanel';\nimport { TabPicker } from './TabPicker';\nimport { TabsAction } from './TabsAction';\nimport { TabsContextValue, TabsProvider } from './TabsContext';\nimport { useTabEditing } from './use-tab-editing';\nimport { useTabIndicator } from './use-tab-indicator';\n\nimport type { Key } from '@react-types/shared';\nimport type {\n  CubeTabListProps,\n  CubeTabPanelProps,\n  CubeTabProps,\n  CubeTabsProps,\n  ParsedPanel,\n  ParsedTab,\n} from './types';\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Generic helper to check if a child is a specific component by displayName.\n */\nfunction isComponentElement<T>(\n  child: ReactNode,\n  displayName: string,\n): child is ReactElement<T> {\n  return (\n    isValidElement(child) &&\n    typeof child.type === 'function' &&\n    (child.type as any).displayName === displayName\n  );\n}\n\n/** Checks if a child is a Tab component. */\nconst isTabElement = (child: ReactNode): child is ReactElement<CubeTabProps> =>\n  isComponentElement<CubeTabProps>(child, 'CubeTab');\n\n/** Checks if a child is a TabPanel component. */\nconst isTabPanelElement = (\n  child: ReactNode,\n): child is ReactElement<CubeTabPanelProps> =>\n  isComponentElement<CubeTabPanelProps>(child, 'CubeTabPanel');\n\n/** Checks if a child is a TabList component. */\nconst isTabListElement = (\n  child: ReactNode,\n): child is ReactElement<CubeTabListProps> =>\n  isComponentElement<CubeTabListProps>(child, 'CubeTabList');\n\n/**\n * Extracts the raw key from a React element, stripping the \".$\" prefix\n * that React adds via Children.map/toArray.\n */\nfunction getRawKey(element: ReactElement): string | null {\n  if (element.key == null) return null;\n  const keyStr = String(element.key);\n  return keyStr.startsWith('.$') ? keyStr.slice(2) : keyStr;\n}\n\n// =============================================================================\n// Tab Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction Tab(_props: CubeTabProps): ReactElement | null {\n  return null;\n}\n\nTab.displayName = 'CubeTab';\n\n// =============================================================================\n// TabPanel Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabPanel(_props: CubeTabPanelProps): ReactElement | null {\n  return null;\n}\n\nTabPanel.displayName = 'CubeTabPanel';\n\n// =============================================================================\n// TabList Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabList(_props: CubeTabListProps): ReactElement | null {\n  return null;\n}\n\nTabList.displayName = 'CubeTabList';\n\n// =============================================================================\n// Main Tabs Component\n// =============================================================================\n\nfunction TabsComponent(\n  props: CubeTabsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    label = 'Tabs',\n    defaultActiveKey,\n    activeKey,\n    size,\n    type = 'default',\n    placement = 'top',\n    onChange,\n    onDelete,\n    onTitleChange,\n    autoHideActions,\n    isEditable: parentIsEditable,\n    menu: parentMenu,\n    menuTriggerProps: parentMenuTriggerProps,\n    menuProps: parentMenuProps,\n    contextMenu: parentContextMenu,\n    onAction: parentOnAction,\n    children,\n    prefix,\n    suffix,\n    prerender = false,\n    keepMounted = false,\n    qa = 'Tabs',\n    renderPanel,\n    panelCacheKeys,\n    isReorderable = false,\n    keyOrder,\n    onReorder,\n    showTabPicker = false,\n    showScrollArrows = false,\n    tabPickerPosition = 'suffix',\n    scrollArrowsPosition = 'suffix',\n    hideTabListScroll = false,\n    tabListPadding,\n    barStyles,\n    tabListStyles,\n    prefixStyles,\n    suffixStyles,\n    ...otherProps\n  } = props;\n\n  // Derive orientation from placement\n  const orientation: 'horizontal' | 'vertical' =\n    placement === 'left' || placement === 'right' ? 'vertical' : 'horizontal';\n\n  // `narrow` only makes sense for a horizontal strip — its whole point is\n  // collapsed horizontal padding for a denser row of tabs. Force `default`\n  // when the strip is vertical.\n  const effectiveType =\n    orientation === 'vertical' && type === 'narrow' ? 'default' : type;\n\n  // Extract outer styles (these go on the new outer wrapper)\n  const baseStyles = extractStyles(otherProps, OUTER_STYLES);\n\n  // Build TabList padding style (memoized)\n  const tabListPaddingStyles = useMemo(\n    () =>\n      tabListPadding ? { '$tablist-padding': `${tabListPadding}` } : undefined,\n    [tabListPadding],\n  );\n\n  // Merge tabListPaddingStyles with tabListStyles (memoized)\n  const mergedTabListStyles = useMemo(\n    () => mergeStyles(tabListPaddingStyles, tabListStyles),\n    [tabListPaddingStyles, tabListStyles],\n  );\n\n  // Merge all sub-element styles into baseStyles. The outer `TabsElement`\n  // exposes `Bar`, `Prefix`, `Suffix`, `TabList`, `ScrollWrapper`, `Scroll`,\n  // and `Scrollbar` sub-elements (defined in styled.ts).\n  const combinedStyles = useMergeStyles(baseStyles, {\n    Bar: barStyles,\n    TabList: mergedTabListStyles,\n    Prefix: prefixStyles,\n    Suffix: suffixStyles,\n  });\n\n  // DOM element refs\n  const listRef = useRef<HTMLDivElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  // Track visited tabs for keepMounted functionality\n  const visitedKeysRef = useRef<Set<string>>(new Set());\n\n  // While a Board widget is being dragged (this Tabs sits inside a Board),\n  // force panels to stay mounted so a tab a widget is dragged out of - and its\n  // board owning the in-flight drag gesture - is not unmounted when the user\n  // spring-loads a different tab by hovering it. Always `false` outside a Board.\n  const isBoardDragActive = useBoardDragActive();\n  const effectiveKeepMounted = keepMounted || isBoardDragActive;\n\n  // =========================================================================\n  // Tab Title Editing Hook\n  // =========================================================================\n  const onTitleChangeRaf = useEvent((key: string, newTitle: string) => {\n    requestAnimationFrame(() => {\n      onTitleChange?.(key, newTitle);\n    });\n  });\n\n  const { editingKey, startEditing, cancelEditing, submitEditing } =\n    useTabEditing({\n      onChange,\n      onTitleChange: onTitleChange ? onTitleChangeRaf : undefined,\n    });\n\n  // =========================================================================\n  // Parse children to extract tabs and explicit panels\n  // =========================================================================\n  const { parsedTabs, explicitPanels, hasAnyContent } = useMemo(() => {\n    const childArray = Children.toArray(children);\n    const tabs: ParsedTab[] = [];\n    const panels = new Map<string, ParsedPanel>();\n    let hasExplicitList = false;\n    let tabChildren: ReactNode[] = [];\n\n    // Check for explicit Tabs.List / Tabs.Panel structure\n    for (const child of childArray) {\n      if (isTabListElement(child)) {\n        hasExplicitList = true;\n        tabChildren = Children.toArray(child.props.children);\n      } else if (isTabPanelElement(child)) {\n        const key = getRawKey(child as ReactElement);\n\n        if (key != null) {\n          panels.set(key, {\n            key,\n            content: child.props.children,\n            prerender: child.props.prerender,\n            keepMounted: child.props.keepMounted,\n            styles: child.props.styles,\n            qa: child.props.qa,\n            qaVal: child.props.qaVal,\n          });\n        }\n      }\n    }\n\n    // If no explicit list, use direct Tab children\n    if (!hasExplicitList) {\n      tabChildren = childArray;\n    }\n\n    // Parse Tab elements\n    let hasContent = panels.size > 0;\n\n    for (const child of tabChildren) {\n      if (isTabElement(child)) {\n        const key = getRawKey(child) ?? child.props.id;\n\n        if (key != null) {\n          const { id: _id, children: tabContent, ...tabProps } = child.props;\n\n          tabs.push({\n            ...tabProps,\n            key,\n            content: tabContent,\n          });\n\n          if (tabContent != null) {\n            hasContent = true;\n          }\n        }\n      }\n    }\n\n    return {\n      parsedTabs: tabs,\n      explicitPanels: panels,\n      hasAnyContent: hasContent,\n    };\n  }, [children]);\n\n  // Clean up visitedKeys when tabs are removed\n  const currentTabKeysSet = useMemo(\n    () => new Set(parsedTabs.map((t) => t.key)),\n    [parsedTabs],\n  );\n\n  useEffect(() => {\n    for (const key of visitedKeysRef.current) {\n      if (!currentTabKeysSet.has(key)) {\n        visitedKeysRef.current.delete(key);\n      }\n    }\n  }, [currentTabKeysSet]);\n\n  // =========================================================================\n  // Order tabs according to keyOrder\n  // =========================================================================\n  const orderedParsedTabs = useMemo(() => {\n    if (!keyOrder || keyOrder.length === 0) {\n      return parsedTabs;\n    }\n\n    const tabMap = new Map<string, ParsedTab>();\n    for (const tab of parsedTabs) {\n      tabMap.set(tab.key, tab);\n    }\n\n    const ordered: ParsedTab[] = [];\n    for (const key of keyOrder) {\n      const tab = tabMap.get(String(key));\n      if (tab) {\n        ordered.push(tab);\n        tabMap.delete(String(key));\n      }\n    }\n\n    // Append any tabs not in keyOrder\n    for (const tab of parsedTabs) {\n      if (tabMap.has(tab.key)) {\n        ordered.push(tab);\n      }\n    }\n\n    return ordered;\n  }, [parsedTabs, keyOrder]);\n\n  // Create collection items for React Stately\n  const collectionItems = useMemo(() => {\n    return orderedParsedTabs.map((tab) => (\n      <CollectionItem\n        key={tab.key}\n        textValue={typeof tab.title === 'string' ? tab.title : String(tab.key)}\n      >\n        {tab.title}\n      </CollectionItem>\n    ));\n  }, [orderedParsedTabs]);\n\n  // Determine disabled keys\n  const disabledKeys = useMemo(() => {\n    return new Set(\n      parsedTabs.filter((tab) => tab.isDisabled).map((tab) => tab.key),\n    );\n  }, [parsedTabs]);\n\n  // Handle selection change (converts React Aria's Key to string for our API)\n  const handleSelectionChange = useEvent((key: Key) => {\n    const keyStr = String(key);\n    visitedKeysRef.current.add(keyStr);\n    onChange?.(keyStr);\n  });\n\n  // Convert keys to strings for React Aria compatibility\n  const selectedKey = activeKey != null ? String(activeKey) : undefined;\n  const defaultSelectedKey =\n    defaultActiveKey != null ? String(defaultActiveKey) : undefined;\n\n  // Create aria props for useTabListState\n  const ariaProps: AriaTabListProps<object> = useMemo(\n    () => ({\n      selectedKey,\n      defaultSelectedKey,\n      onSelectionChange: handleSelectionChange,\n      disabledKeys,\n      children: collectionItems,\n      'aria-label': label,\n      orientation,\n    }),\n    [\n      selectedKey,\n      defaultSelectedKey,\n      handleSelectionChange,\n      disabledKeys,\n      collectionItems,\n      label,\n      orientation,\n    ],\n  );\n\n  // Create state using useTabListState\n  const state = useTabListState(ariaProps);\n\n  // Track initial selected key for visited tabs\n  useEffect(() => {\n    if (state.selectedKey != null) {\n      visitedKeysRef.current.add(String(state.selectedKey));\n    }\n  }, [state.selectedKey]);\n\n  // Get tablist props from react-aria\n  const { tabListProps } = useTabList(ariaProps, state, listRef);\n\n  // Handle selection from TabPicker (needs to update internal state in uncontrolled mode)\n  const handleTabPickerSelect = useEvent((key: string) => {\n    // Update internal state (for uncontrolled mode)\n    state.setSelectedKey(key);\n    // Also call the external onChange handler\n    handleSelectionChange(key);\n  });\n\n  // =========================================================================\n  // Tab Indicator (for default type)\n  // =========================================================================\n  // Create order token that changes when tab order changes (for indicator recalculation)\n  const orderToken = useMemo(\n    () => orderedParsedTabs.map((t) => t.key).join(','),\n    [orderedParsedTabs],\n  );\n\n  const indicatorStyle = useTabIndicator(\n    listRef,\n    state.selectedKey,\n    effectiveType === 'default' || effectiveType === 'narrow',\n    orientation,\n    orderToken,\n  );\n\n  // =========================================================================\n  // Tiny Scrollbar (not for radio type)\n  // =========================================================================\n  const isTinyScrollbar = effectiveType !== 'radio';\n  const {\n    handleHStyle,\n    handleVStyle,\n    hasOverflowX,\n    hasOverflowY,\n    isScrolling,\n    isAtStartX,\n    isAtEndX,\n    isAtStartY,\n    isAtEndY,\n  } = useTinyScrollbar(scrollRef, isTinyScrollbar);\n  const showTinyScrollbar = isTinyScrollbar && !hideTabListScroll;\n\n  // Active-axis aggregates (used everywhere downstream so we don't sprinkle\n  // orientation checks around).\n  const hasOverflow = orientation === 'vertical' ? hasOverflowY : hasOverflowX;\n  const isAtStart = orientation === 'vertical' ? isAtStartY : isAtStartX;\n  const isAtEnd = orientation === 'vertical' ? isAtEndY : isAtEndX;\n\n  const hasPanels = hasAnyContent || !!renderPanel;\n\n  // =========================================================================\n  // Tab Picker visibility\n  // =========================================================================\n  useWarn(showTabPicker && effectiveType === 'radio', {\n    key: ['tabs-tabpicker-radio-unsupported'],\n    args: [\n      'Tabs:',\n      '`showTabPicker` is not supported when `type=\"radio\"`. The TabPicker will not be rendered.',\n    ],\n  });\n\n  const shouldShowTabPicker =\n    effectiveType !== 'radio' &&\n    (showTabPicker === true || (showTabPicker === 'auto' && hasOverflow));\n\n  // =========================================================================\n  // Scroll Arrows visibility and handlers\n  // =========================================================================\n  useWarn(showScrollArrows && effectiveType === 'radio', {\n    key: ['tabs-scrollarrows-radio-unsupported'],\n    args: [\n      'Tabs:',\n      '`showScrollArrows` is not supported when `type=\"radio\"`. The scroll arrows will not be rendered.',\n    ],\n  });\n\n  const shouldShowScrollArrows =\n    effectiveType !== 'radio' &&\n    (showScrollArrows === true || (showScrollArrows === 'auto' && hasOverflow));\n\n  const handleScrollStart = useEvent(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    if (orientation === 'vertical') {\n      el.scrollTo({\n        top: el.scrollTop - el.clientHeight,\n        behavior: 'smooth',\n      });\n    } else {\n      el.scrollTo({\n        left: el.scrollLeft - el.clientWidth,\n        behavior: 'smooth',\n      });\n    }\n  });\n\n  const handleScrollEnd = useEvent(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    if (orientation === 'vertical') {\n      el.scrollTo({\n        top: el.scrollTop + el.clientHeight,\n        behavior: 'smooth',\n      });\n    } else {\n      el.scrollTo({\n        left: el.scrollLeft + el.clientWidth,\n        behavior: 'smooth',\n      });\n    }\n  });\n\n  // =========================================================================\n  // Base Context Value (without drag/drop states)\n  // =========================================================================\n  const baseContextValue = useMemo(\n    () => ({\n      state,\n      type: effectiveType,\n      size,\n      placement,\n      autoHideActions,\n      isEditable: parentIsEditable,\n      menu: parentMenu,\n      menuTriggerProps: parentMenuTriggerProps,\n      menuProps: parentMenuProps,\n      contextMenu: parentContextMenu,\n      onDelete,\n      onAction: parentOnAction,\n      editingKey,\n      startEditing,\n      submitEditing,\n      cancelEditing,\n    }),\n    [\n      state,\n      effectiveType,\n      size,\n      placement,\n      autoHideActions,\n      parentIsEditable,\n      parentMenu,\n      parentMenuTriggerProps,\n      parentMenuProps,\n      parentContextMenu,\n      onDelete,\n      parentOnAction,\n      editingKey,\n      startEditing,\n      submitEditing,\n      cancelEditing,\n    ],\n  );\n\n  // Helper to create full context value with optional drag/drop states\n  const createContextValue = (\n    dragState?: DraggableCollectionState,\n    dropState?: DroppableCollectionState,\n  ): TabsContextValue => ({\n    ...baseContextValue,\n    dragState,\n    dropState,\n  });\n\n  // =========================================================================\n  // Tab List Content Renderer\n  // =========================================================================\n  const renderTabListContent = (\n    contextValue: TabsContextValue,\n    collectionProps: Record<string, unknown> = {},\n  ) => (\n    <div\n      {...mergeProps(tabListProps, collectionProps)}\n      ref={listRef}\n      data-element=\"TabList\"\n    >\n      <TabsProvider value={contextValue}>\n        {orderedParsedTabs.map((tab, index) => {\n          const item = state.collection.getItem(tab.key);\n          if (!item) return null;\n\n          return (\n            <TabButton\n              key={item.key}\n              item={item}\n              tabData={tab}\n              isLastTab={index === orderedParsedTabs.length - 1}\n            />\n          );\n        })}\n      </TabsProvider>\n      {indicatorStyle && (\n        <TabIndicatorElement\n          mods={{ placement }}\n          style={\n            orientation === 'vertical'\n              ? {\n                  top: indicatorStyle.start,\n                  height: indicatorStyle.size,\n                }\n              : {\n                  left: indicatorStyle.start,\n                  width: indicatorStyle.size,\n                }\n          }\n        />\n      )}\n    </div>\n  );\n\n  // =========================================================================\n  // Mods for styling\n  // =========================================================================\n  const mods = useMemo(\n    () => ({\n      type: effectiveType,\n      size,\n      placement,\n      deletable: !!onDelete,\n      scrolling: showTinyScrollbar && isScrolling,\n      'fade-start': !isAtStart,\n      'fade-end': !isAtEnd,\n      'has-panels': hasPanels,\n    }),\n    [\n      effectiveType,\n      size,\n      placement,\n      onDelete,\n      showTinyScrollbar,\n      isScrolling,\n      isAtStart,\n      isAtEnd,\n      hasPanels,\n    ],\n  );\n\n  // =========================================================================\n  // Action Elements (TabPicker and Scroll Arrows)\n  // =========================================================================\n  const scrollArrowsElement = shouldShowScrollArrows ? (\n    <>\n      <TabsAction\n        icon={\n          <DirectionIcon to={orientation === 'vertical' ? 'top' : 'left'} />\n        }\n        aria-label={\n          orientation === 'vertical' ? 'Scroll tabs up' : 'Scroll tabs left'\n        }\n        isDisabled={isAtStart}\n        onPress={handleScrollStart}\n      />\n      <TabsAction\n        icon={\n          <DirectionIcon to={orientation === 'vertical' ? 'bottom' : 'right'} />\n        }\n        aria-label={\n          orientation === 'vertical' ? 'Scroll tabs down' : 'Scroll tabs right'\n        }\n        isDisabled={isAtEnd}\n        onPress={handleScrollEnd}\n      />\n    </>\n  ) : null;\n\n  const tabPickerElement = shouldShowTabPicker ? (\n    <TabPicker\n      tabs={orderedParsedTabs}\n      selectedKey={state.selectedKey}\n      size={size}\n      type={effectiveType}\n      placement={placement}\n      isReorderable={isReorderable}\n      onSelect={handleTabPickerSelect}\n      onDelete={onDelete}\n      onReorder={onReorder}\n    />\n  ) : null;\n\n  // Determine which actions go in prefix/suffix\n  // In prefix: TabPicker first (left), then scroll arrows (right)\n  // In suffix: scroll arrows first (left), then TabPicker (right)\n  const prefixHasActions =\n    (shouldShowTabPicker && tabPickerPosition === 'prefix') ||\n    (shouldShowScrollArrows && scrollArrowsPosition === 'prefix');\n\n  const suffixHasActions =\n    (shouldShowTabPicker && tabPickerPosition === 'suffix') ||\n    (shouldShowScrollArrows && scrollArrowsPosition === 'suffix');\n\n  // Apply the active-axis scrollbar handle vars to the outer wrapper so the\n  // `Scrollbar` sub-element can read them via CSS variables.\n  const handleStyle = showTinyScrollbar\n    ? orientation === 'vertical'\n      ? handleVStyle\n      : handleHStyle\n    : undefined;\n\n  // Wrap with TabsProvider so prefix/suffix can access context (size, type, placement).\n  // The inner TabsProvider in renderTabListContent will override for tab buttons.\n  return (\n    <TabsProvider value={baseContextValue}>\n      <TabsElement\n        ref={ref}\n        qa={qa}\n        mods={mods}\n        styles={combinedStyles}\n        style={handleStyle}\n        data-size={size}\n      >\n        <div data-element=\"Bar\">\n          {prefix || prefixHasActions ? (\n            <div data-element=\"Prefix\">\n              {tabPickerPosition === 'prefix' && tabPickerElement}\n              {scrollArrowsPosition === 'prefix' && scrollArrowsElement}\n              {prefix}\n            </div>\n          ) : null}\n          <div data-element=\"ScrollWrapper\">\n            <div ref={scrollRef} data-element=\"Scroll\">\n              {isReorderable ? (\n                <DraggableTabList\n                  state={state}\n                  listRef={listRef}\n                  orderedKeys={orderedParsedTabs.map((t) => t.key)}\n                  orientation={orientation}\n                  onReorder={onReorder}\n                >\n                  {(dragState, dropState, collectionProps) =>\n                    renderTabListContent(\n                      createContextValue(dragState, dropState),\n                      collectionProps,\n                    )\n                  }\n                </DraggableTabList>\n              ) : (\n                renderTabListContent(createContextValue())\n              )}\n            </div>\n            {showTinyScrollbar && hasOverflow && (\n              <div data-element=\"Scrollbar\" />\n            )}\n          </div>\n          {suffix || suffixHasActions ? (\n            <div data-element=\"Suffix\">\n              {scrollArrowsPosition === 'suffix' && scrollArrowsElement}\n              {tabPickerPosition === 'suffix' && tabPickerElement}\n              {suffix}\n            </div>\n          ) : null}\n        </div>\n\n        {/* Functional panel rendering with content caching */}\n        {renderPanel && (\n          <CachedPanelRenderer\n            parsedTabs={parsedTabs}\n            explicitPanels={explicitPanels}\n            state={state}\n            renderPanel={renderPanel}\n            panelCacheKeys={panelCacheKeys}\n            prerender={prerender}\n            keepMounted={effectiveKeepMounted}\n            visitedKeys={visitedKeysRef.current}\n          />\n        )}\n\n        {/* Static panel rendering (traditional children-based approach) */}\n        {!renderPanel &&\n          hasAnyContent &&\n          parsedTabs.map((tab) => {\n            const explicitPanel = explicitPanels.get(tab.key);\n            const content = explicitPanel?.content ?? tab.content;\n\n            if (content == null) return null;\n\n            return (\n              <TabPanelRenderer\n                key={tab.key}\n                tabKey={tab.key}\n                state={state}\n                content={content}\n                prerender={prerender}\n                keepMounted={effectiveKeepMounted}\n                tabPrerender={explicitPanel?.prerender ?? tab.prerender}\n                tabKeepMounted={explicitPanel?.keepMounted ?? tab.keepMounted}\n                visitedKeys={visitedKeysRef.current}\n                panelStyles={explicitPanel?.styles}\n                qa={explicitPanel?.qa}\n                qaVal={explicitPanel?.qaVal}\n              />\n            );\n          })}\n      </TabsElement>\n    </TabsProvider>\n  );\n}\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nconst _Tabs = forwardRef(TabsComponent);\n\n/**\n * Tabs component for organizing content into multiple panels.\n * Built with React Aria for full accessibility support.\n *\n * **Note:** Tab keys are internally converted to strings for React Aria compatibility.\n *\n * @example\n * // Simple usage\n * <Tabs defaultActiveKey=\"tab1\">\n *   <Tab key=\"tab1\" title=\"Tab 1\">Content 1</Tab>\n *   <Tab key=\"tab2\" title=\"Tab 2\">Content 2</Tab>\n * </Tabs>\n *\n * @example\n * // Tabs-only (no panels)\n * <Tabs activeKey={activeTab} onChange={setActiveTab}>\n *   <Tab key=\"overview\" title=\"Overview\" />\n *   <Tab key=\"settings\" title=\"Settings\" />\n * </Tabs>\n *\n * @example\n * // Explicit panels\n * <Tabs defaultActiveKey=\"tab1\">\n *   <Tabs.List>\n *     <Tab key=\"tab1\" title=\"Tab 1\" />\n *     <Tab key=\"tab2\" title=\"Tab 2\" />\n *   </Tabs.List>\n *   <Tabs.Panel key=\"tab1\">Content 1</Tabs.Panel>\n *   <Tabs.Panel key=\"tab2\">Content 2</Tabs.Panel>\n * </Tabs>\n */\nexport const Tabs = Object.assign(_Tabs, {\n  Tab,\n  List: TabList,\n  Panel: TabPanel,\n  Action: TabsAction,\n});\n\nexport { Tab, TabList, TabPanel, TabsAction };\n"],"mappings":"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"}

package/dist/components/navigation/Tabs/TabsAction.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { useOptionalTabsContext } from "./TabsContext.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/navigation/Tabs/TabsContext.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/navigation/Tabs/popover-placement.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 //#region src/components/navigation/Tabs/popover-placement.ts
 /**
 * Maps the parent Tabs `placement` to the popover placement for menus and

package/dist/components/navigation/Tabs/styled.js

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 //#region src/components/navigation/Tabs/types.ts
 /**
 * Size mapping for radio type tabs.

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | 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.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 import { chainRaf } from "../../../utils/raf.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | 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.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
 import { CalendarPanel } from "./CalendarPanel.js";
 import { forwardRef, useImperativeHandle, useRef } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 import { CALENDAR_CELL_STYLES } from "./styled.js";
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 import { getWeekNumber } from "../../fields/DatePicker/period.js";
 import { CalendarCell } from "./CalendarCell.js";
 import { tasty } from "@tenphi/tasty";

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

@@ -1,9 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { Space } from "../../layout/Space.js";
-import { LeftIcon } from "../../../icons/LeftIcon.js";
 import { RightIcon } from "../../../icons/RightIcon.js";
 import { Button } from "../../actions/index.js";
+import { LeftIcon } from "../../../icons/LeftIcon.js";
 import { CalendarHeaderElement } from "./styled.js";
 import { tasty } from "@tenphi/tasty";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.js","names":["Title"],"sources":["../../../../src/components/other/Calendar/CalendarHeader.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nimport { LeftIcon, RightIcon } from '../../../icons';\nimport { Button } from '../../actions';\nimport { Title } from '../../content/Title';\nimport { Space } from '../../layout/Space';\n\nimport { CalendarHeaderElement } from './styled';\n\nimport type { Props } from '../../../props';\n\n/**\n * A heading that holds the view switcher. Its own preset matches the type scale\n * of an `xsmall` button so the plain-title fallback (a decade range, or a\n * calendar with navigation turned off) doesn't outweigh the interactive one.\n */\nconst CalendarTitleElement = tasty(Title, {\n  level: 6,\n  preset: 't4',\n  styles: {\n    display: 'flex',\n    placeItems: 'center',\n    gap: '.25x',\n    // Line the plain title up with the label inside a button.\n    padding: {\n      '': '0 (1x - 1bw)',\n      interactive: 0,\n    },\n  },\n});\n\nconst CalendarTitleButton = tasty(Button, {\n  'data-popover-keep': true,\n  type: 'clear',\n  size: 'xsmall',\n});\n\nexport interface CubeCalendarHeaderSegment {\n  key: string;\n  label: string;\n  onPress: () => void;\n  isDisabled?: boolean;\n}\n\nexport interface CubeCalendarHeaderProps {\n  /**\n   * Interactive title segments (month / year). When omitted the header falls\n   * back to a plain `title` — e.g. for a multi-month range.\n   */\n  segments?: CubeCalendarHeaderSegment[];\n  title?: ReactNode;\n  prevButtonProps?: Props;\n  nextButtonProps?: Props;\n}\n\nexport function CalendarHeader(props: CubeCalendarHeaderProps) {\n  let { segments, title, prevButtonProps, nextButtonProps } = props;\n\n  return (\n    <CalendarHeaderElement>\n      <CalendarTitleElement mods={{ interactive: !!segments?.length }}>\n        {segments?.length\n          ? segments.map(({ key, label, onPress, isDisabled }) => (\n              <CalendarTitleButton\n                key={key}\n                isDisabled={isDisabled}\n                onPress={onPress}\n              >\n                {label}\n              </CalendarTitleButton>\n            ))\n          : title}\n      </CalendarTitleElement>\n      <Space gap=\".5x\">\n        <Button\n          data-popover-keep\n          size=\"xsmall\"\n          {...prevButtonProps}\n          icon={<LeftIcon />}\n        />\n        <Button\n          data-popover-keep\n          size=\"xsmall\"\n          {...nextButtonProps}\n          icon={<RightIcon />}\n        />\n      </Space>\n    </CalendarHeaderElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,uBAAuB,MAAMA,QAAO;CACxC,OAAO;CACP,QAAQ;CACR,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,KAAK;EAEL,SAAS;GACP,IAAI;GACJ,aAAa;GACd;EACF;CACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,QAAQ;CACxC,qBAAqB;CACrB,MAAM;CACN,MAAM;CACP,CAAC;AAoBF,SAAgB,eAAe,OAAgC;CAC7D,IAAI,EAAE,UAAU,OAAO,iBAAiB,oBAAoB;AAE5D,QACE,qBAAC,oCACC,oBAAC;EAAqB,MAAM,EAAE,aAAa,CAAC,CAAC,UAAU,QAAQ;YAC5D,UAAU,SACP,SAAS,KAAK,EAAE,KAAK,OAAO,SAAS,iBACnC,oBAAC;GAEa;GACH;aAER;KAJI,IAKe,CACtB,GACF;GACiB,EACvB,qBAAC;EAAM,KAAI;aACT,oBAAC;GACC;GACA,MAAK;GACL,GAAI;GACJ,MAAM,oBAAC,aAAW;IAClB,EACF,oBAAC;GACC;GACA,MAAK;GACL,GAAI;GACJ,MAAM,oBAAC,cAAY;IACnB;GACI,IACc"}
+{"version":3,"file":"CalendarHeader.js","names":["Title"],"sources":["../../../../src/components/other/Calendar/CalendarHeader.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nimport { LeftIcon } from '../../../icons/LeftIcon';\nimport { RightIcon } from '../../../icons/RightIcon';\nimport { Button } from '../../actions';\nimport { Title } from '../../content/Title';\nimport { Space } from '../../layout/Space';\n\nimport { CalendarHeaderElement } from './styled';\n\nimport type { Props } from '../../../props';\n\n/**\n * A heading that holds the view switcher. Its own preset matches the type scale\n * of an `xsmall` button so the plain-title fallback (a decade range, or a\n * calendar with navigation turned off) doesn't outweigh the interactive one.\n */\nconst CalendarTitleElement = tasty(Title, {\n  level: 6,\n  preset: 't4',\n  styles: {\n    display: 'flex',\n    placeItems: 'center',\n    gap: '.25x',\n    // Line the plain title up with the label inside a button.\n    padding: {\n      '': '0 (1x - 1bw)',\n      interactive: 0,\n    },\n  },\n});\n\nconst CalendarTitleButton = tasty(Button, {\n  'data-popover-keep': true,\n  type: 'clear',\n  size: 'xsmall',\n});\n\nexport interface CubeCalendarHeaderSegment {\n  key: string;\n  label: string;\n  onPress: () => void;\n  isDisabled?: boolean;\n}\n\nexport interface CubeCalendarHeaderProps {\n  /**\n   * Interactive title segments (month / year). When omitted the header falls\n   * back to a plain `title` — e.g. for a multi-month range.\n   */\n  segments?: CubeCalendarHeaderSegment[];\n  title?: ReactNode;\n  prevButtonProps?: Props;\n  nextButtonProps?: Props;\n}\n\nexport function CalendarHeader(props: CubeCalendarHeaderProps) {\n  let { segments, title, prevButtonProps, nextButtonProps } = props;\n\n  return (\n    <CalendarHeaderElement>\n      <CalendarTitleElement mods={{ interactive: !!segments?.length }}>\n        {segments?.length\n          ? segments.map(({ key, label, onPress, isDisabled }) => (\n              <CalendarTitleButton\n                key={key}\n                isDisabled={isDisabled}\n                onPress={onPress}\n              >\n                {label}\n              </CalendarTitleButton>\n            ))\n          : title}\n      </CalendarTitleElement>\n      <Space gap=\".5x\">\n        <Button\n          data-popover-keep\n          size=\"xsmall\"\n          {...prevButtonProps}\n          icon={<LeftIcon />}\n        />\n        <Button\n          data-popover-keep\n          size=\"xsmall\"\n          {...nextButtonProps}\n          icon={<RightIcon />}\n        />\n      </Space>\n    </CalendarHeaderElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,uBAAuB,MAAMA,QAAO;CACxC,OAAO;CACP,QAAQ;CACR,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,KAAK;EAEL,SAAS;GACP,IAAI;GACJ,aAAa;GACd;EACF;CACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,QAAQ;CACxC,qBAAqB;CACrB,MAAM;CACN,MAAM;CACP,CAAC;AAoBF,SAAgB,eAAe,OAAgC;CAC7D,IAAI,EAAE,UAAU,OAAO,iBAAiB,oBAAoB;AAE5D,QACE,qBAAC,oCACC,oBAAC;EAAqB,MAAM,EAAE,aAAa,CAAC,CAAC,UAAU,QAAQ;YAC5D,UAAU,SACP,SAAS,KAAK,EAAE,KAAK,OAAO,SAAS,iBACnC,oBAAC;GAEa;GACH;aAER;KAJI,IAKe,CACtB,GACF;GACiB,EACvB,qBAAC;EAAM,KAAI;aACT,oBAAC;GACC;GACA,MAAK;GACL,GAAI;GACJ,MAAM,oBAAC,aAAW;IAClB,EACF,oBAAC;GACC;GACA,MAAK;GACL,GAAI;GACJ,MAAM,oBAAC,cAAY;IACnB;GACI,IACc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { CalendarElement } from "./styled.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { getQuarter } from "../../fields/DatePicker/period.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 import { CALENDAR_CELL_STYLES } from "./styled.js";
 import { tasty } from "@tenphi/tasty";
 import { useLayoutEffect, useRef } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
 import { CalendarPanel } from "./CalendarPanel.js";
 import { forwardRef, useImperativeHandle, useRef } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 
 //#region src/components/other/Calendar/styled.tsx

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

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

package/dist/components/other/NoDataIcon/NoDataIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 import { wrapIcon } from "../../../icons/wrap-icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 

package/dist/components/overlays/AlertDialog/AlertDialog.d.ts

@@ -1,7 +1,6 @@
 
 import { CubeButtonProps } from "../../actions/Button/Button.js";
 import { CubeDialogProps } from "../Dialog/Dialog.js";
-import "../Dialog/index.js";
 import * as react from "react";
 import { ReactNode } from "react";
 

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { Paragraph } from "../../content/Paragraph.js";
 import { _Title } from "../../content/Title.js";
@@ -7,9 +7,9 @@ import { Button } from "../../actions/Button/Button.js";
 import { ButtonGroup } from "../../actions/ButtonGroup/ButtonGroup.js";
 import { useDialogContext } from "../Dialog/context.js";
 import { Content } from "../../content/Content.js";
+import { Footer } from "../../content/Footer.js";
 import { Header } from "../../content/Header.js";
 import { Dialog } from "../Dialog/Dialog.js";
-import { Footer } from "../../content/Footer.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 

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

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.js","names":["Title"],"sources":["../../../../src/components/overlays/AlertDialog/AlertDialog.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { chain } from '../../../utils/react';\nimport { Button } from '../../actions/Button/Button';\nimport { ButtonGroup } from '../../actions/ButtonGroup/ButtonGroup';\nimport { Content } from '../../content/Content';\nimport { Footer } from '../../content/Footer';\nimport { Header } from '../../content/Header';\nimport { Paragraph } from '../../content/Paragraph';\nimport { Title } from '../../content/Title';\nimport { CubeDialogProps, Dialog } from '../Dialog';\nimport { useDialogContext } from '../Dialog/context';\n\nimport type { CubeButtonProps } from '../../actions/Button/Button';\n\nexport interface CubeAlertDialogActionsProps {\n  confirm?: CubeButtonProps | boolean;\n  secondary?: CubeButtonProps;\n  cancel?: CubeButtonProps | boolean;\n}\n\nexport interface CubeAlertDialogProps\n  extends Omit<CubeDialogProps, 'children'> {\n  content?: ReactNode;\n  /** Whether the dialog is an important prompt */\n  danger?: boolean;\n  actions?: CubeAlertDialogActionsProps;\n  title?: string;\n  noActions?: boolean;\n}\n\n/**\n * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.\n */\nfunction AlertDialog(props: CubeAlertDialogProps, ref) {\n  const { onClose } = useDialogContext();\n  const { t } = useI18n();\n\n  const DEFAULT_CONFIRM_PROPS: CubeButtonProps = {\n    label: t('alertDialog.confirm', 'Ok'),\n    type: 'primary',\n  };\n  const DEFAULT_CANCEL_PROPS: CubeButtonProps = {\n    label: t('alertDialog.cancel', 'Cancel'),\n  };\n\n  const { danger, actions, title, styles, noActions, content, ...otherProps } =\n    props;\n\n  let {\n    confirm: confirmProps,\n    secondary: secondaryProps,\n    cancel: cancelProps,\n  } = actions ?? {};\n\n  // the confirm button is present by default\n  confirmProps =\n    confirmProps !== false\n      ? {\n          ...DEFAULT_CONFIRM_PROPS,\n          ...(typeof confirmProps === 'object' ? confirmProps : null),\n        }\n      : undefined;\n\n  // the cancel button is hidden by default\n  cancelProps = cancelProps\n    ? {\n        ...DEFAULT_CANCEL_PROPS,\n        ...(typeof cancelProps === 'object' ? cancelProps : null),\n      }\n    : undefined;\n\n  return (\n    <Dialog ref={ref} role=\"alertdialog\" isDismissable={false} {...otherProps}>\n      {title ? (\n        <Header>\n          <Title>{title}</Title>\n        </Header>\n      ) : null}\n      {content ? (\n        <Content>\n          {typeof content === 'string' ? (\n            <Paragraph>{content}</Paragraph>\n          ) : (\n            content\n          )}\n        </Content>\n      ) : null}\n      {!noActions && (confirmProps || secondaryProps || cancelProps) ? (\n        <Footer>\n          <ButtonGroup>\n            {confirmProps && (\n              <Button\n                autoFocus\n                theme={danger ? 'danger' : undefined}\n                {...confirmProps}\n                onPress={(e) =>\n                  chain(\n                    (confirmProps as CubeButtonProps)?.onPress?.(e),\n                    onClose?.('confirm'),\n                  )\n                }\n              />\n            )}\n            {secondaryProps && (\n              <Button\n                {...secondaryProps}\n                onPress={(e) =>\n                  chain(secondaryProps?.onPress?.(e), onClose?.('secondary'))\n                }\n              />\n            )}\n            {cancelProps && (\n              <Button\n                {...cancelProps}\n                onPress={(e) =>\n                  chain(\n                    (cancelProps as CubeButtonProps)?.onPress?.(e),\n                    onClose?.('cancel'),\n                  )\n                }\n              />\n            )}\n          </ButtonGroup>\n        </Footer>\n      ) : null}\n    </Dialog>\n  );\n}\n\n/**\n * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.\n */\nconst _AlertDialog = forwardRef(AlertDialog);\n\n_AlertDialog.displayName = 'AlertDialog';\n\nexport { _AlertDialog as AlertDialog };\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmCA,SAAS,YAAY,OAA6B,KAAK;CACrD,MAAM,EAAE,YAAY,kBAAkB;CACtC,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,wBAAyC;EAC7C,OAAO,EAAE,uBAAuB,KAAK;EACrC,MAAM;EACP;CACD,MAAM,uBAAwC,EAC5C,OAAO,EAAE,sBAAsB,SAAS,EACzC;CAED,MAAM,EAAE,QAAQ,SAAS,OAAO,QAAQ,WAAW,SAAS,GAAG,eAC7D;CAEF,IAAI,EACF,SAAS,cACT,WAAW,gBACX,QAAQ,gBACN,WAAW,EAAE;AAGjB,gBACE,iBAAiB,QACb;EACE,GAAG;EACH,GAAI,OAAO,iBAAiB,WAAW,eAAe;EACvD,GACD;AAGN,eAAc,cACV;EACE,GAAG;EACH,GAAI,OAAO,gBAAgB,WAAW,cAAc;EACrD,GACD;AAEJ,QACE,qBAAC;EAAY;EAAK,MAAK;EAAc,eAAe;EAAO,GAAI;;GAC5D,QACC,oBAAC,oBACC,oBAACA,oBAAO,QAAc,GACf,GACP;GACH,UACC,oBAAC,qBACE,OAAO,YAAY,WAClB,oBAAC,uBAAW,UAAoB,GAEhC,UAEM,GACR;GACH,CAAC,cAAc,gBAAgB,kBAAkB,eAChD,oBAAC,oBACC,qBAAC;IACE,gBACC,oBAAC;KACC;KACA,OAAO,SAAS,WAAW;KAC3B,GAAI;KACJ,UAAU,MACR,MACG,cAAkC,UAAU,EAAE,EAC/C,UAAU,UAAU,CACrB;MAEH;IAEH,kBACC,oBAAC;KACC,GAAI;KACJ,UAAU,MACR,MAAM,gBAAgB,UAAU,EAAE,EAAE,UAAU,YAAY,CAAC;MAE7D;IAEH,eACC,oBAAC;KACC,GAAI;KACJ,UAAU,MACR,MACG,aAAiC,UAAU,EAAE,EAC9C,UAAU,SAAS,CACpB;MAEH;OAEQ,GACP,GACP;;GACG;;;;;AAOb,MAAM,eAAe,WAAW,YAAY;AAE5C,aAAa,cAAc"}
+{"version":3,"file":"AlertDialog.js","names":["Title"],"sources":["../../../../src/components/overlays/AlertDialog/AlertDialog.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { chain } from '../../../utils/react';\nimport { Button } from '../../actions/Button/Button';\nimport { ButtonGroup } from '../../actions/ButtonGroup/ButtonGroup';\nimport { Content } from '../../content/Content';\nimport { Footer } from '../../content/Footer';\nimport { Header } from '../../content/Header';\nimport { Paragraph } from '../../content/Paragraph';\nimport { Title } from '../../content/Title';\nimport { useDialogContext } from '../Dialog/context';\nimport { CubeDialogProps, Dialog } from '../Dialog/Dialog';\n\nimport type { CubeButtonProps } from '../../actions/Button/Button';\n\nexport interface CubeAlertDialogActionsProps {\n  confirm?: CubeButtonProps | boolean;\n  secondary?: CubeButtonProps;\n  cancel?: CubeButtonProps | boolean;\n}\n\nexport interface CubeAlertDialogProps\n  extends Omit<CubeDialogProps, 'children'> {\n  content?: ReactNode;\n  /** Whether the dialog is an important prompt */\n  danger?: boolean;\n  actions?: CubeAlertDialogActionsProps;\n  title?: string;\n  noActions?: boolean;\n}\n\n/**\n * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.\n */\nfunction AlertDialog(props: CubeAlertDialogProps, ref) {\n  const { onClose } = useDialogContext();\n  const { t } = useI18n();\n\n  const DEFAULT_CONFIRM_PROPS: CubeButtonProps = {\n    label: t('alertDialog.confirm', 'Ok'),\n    type: 'primary',\n  };\n  const DEFAULT_CANCEL_PROPS: CubeButtonProps = {\n    label: t('alertDialog.cancel', 'Cancel'),\n  };\n\n  const { danger, actions, title, styles, noActions, content, ...otherProps } =\n    props;\n\n  let {\n    confirm: confirmProps,\n    secondary: secondaryProps,\n    cancel: cancelProps,\n  } = actions ?? {};\n\n  // the confirm button is present by default\n  confirmProps =\n    confirmProps !== false\n      ? {\n          ...DEFAULT_CONFIRM_PROPS,\n          ...(typeof confirmProps === 'object' ? confirmProps : null),\n        }\n      : undefined;\n\n  // the cancel button is hidden by default\n  cancelProps = cancelProps\n    ? {\n        ...DEFAULT_CANCEL_PROPS,\n        ...(typeof cancelProps === 'object' ? cancelProps : null),\n      }\n    : undefined;\n\n  return (\n    <Dialog ref={ref} role=\"alertdialog\" isDismissable={false} {...otherProps}>\n      {title ? (\n        <Header>\n          <Title>{title}</Title>\n        </Header>\n      ) : null}\n      {content ? (\n        <Content>\n          {typeof content === 'string' ? (\n            <Paragraph>{content}</Paragraph>\n          ) : (\n            content\n          )}\n        </Content>\n      ) : null}\n      {!noActions && (confirmProps || secondaryProps || cancelProps) ? (\n        <Footer>\n          <ButtonGroup>\n            {confirmProps && (\n              <Button\n                autoFocus\n                theme={danger ? 'danger' : undefined}\n                {...confirmProps}\n                onPress={(e) =>\n                  chain(\n                    (confirmProps as CubeButtonProps)?.onPress?.(e),\n                    onClose?.('confirm'),\n                  )\n                }\n              />\n            )}\n            {secondaryProps && (\n              <Button\n                {...secondaryProps}\n                onPress={(e) =>\n                  chain(secondaryProps?.onPress?.(e), onClose?.('secondary'))\n                }\n              />\n            )}\n            {cancelProps && (\n              <Button\n                {...cancelProps}\n                onPress={(e) =>\n                  chain(\n                    (cancelProps as CubeButtonProps)?.onPress?.(e),\n                    onClose?.('cancel'),\n                  )\n                }\n              />\n            )}\n          </ButtonGroup>\n        </Footer>\n      ) : null}\n    </Dialog>\n  );\n}\n\n/**\n * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.\n */\nconst _AlertDialog = forwardRef(AlertDialog);\n\n_AlertDialog.displayName = 'AlertDialog';\n\nexport { _AlertDialog as AlertDialog };\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmCA,SAAS,YAAY,OAA6B,KAAK;CACrD,MAAM,EAAE,YAAY,kBAAkB;CACtC,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,wBAAyC;EAC7C,OAAO,EAAE,uBAAuB,KAAK;EACrC,MAAM;EACP;CACD,MAAM,uBAAwC,EAC5C,OAAO,EAAE,sBAAsB,SAAS,EACzC;CAED,MAAM,EAAE,QAAQ,SAAS,OAAO,QAAQ,WAAW,SAAS,GAAG,eAC7D;CAEF,IAAI,EACF,SAAS,cACT,WAAW,gBACX,QAAQ,gBACN,WAAW,EAAE;AAGjB,gBACE,iBAAiB,QACb;EACE,GAAG;EACH,GAAI,OAAO,iBAAiB,WAAW,eAAe;EACvD,GACD;AAGN,eAAc,cACV;EACE,GAAG;EACH,GAAI,OAAO,gBAAgB,WAAW,cAAc;EACrD,GACD;AAEJ,QACE,qBAAC;EAAY;EAAK,MAAK;EAAc,eAAe;EAAO,GAAI;;GAC5D,QACC,oBAAC,oBACC,oBAACA,oBAAO,QAAc,GACf,GACP;GACH,UACC,oBAAC,qBACE,OAAO,YAAY,WAClB,oBAAC,uBAAW,UAAoB,GAEhC,UAEM,GACR;GACH,CAAC,cAAc,gBAAgB,kBAAkB,eAChD,oBAAC,oBACC,qBAAC;IACE,gBACC,oBAAC;KACC;KACA,OAAO,SAAS,WAAW;KAC3B,GAAI;KACJ,UAAU,MACR,MACG,cAAkC,UAAU,EAAE,EAC/C,UAAU,UAAU,CACrB;MAEH;IAEH,kBACC,oBAAC;KACC,GAAI;KACJ,UAAU,MACR,MAAM,gBAAgB,UAAU,EAAE,EAAE,UAAU,YAAY,CAAC;MAE7D;IAEH,eACC,oBAAC;KACC,GAAI;KACJ,UAAU,MACR,MACG,aAAiC,UAAU,EAAE,EAC9C,UAAU,SAAS,CACpB;MAEH;OAEQ,GACP,GACP;;GACG;;;;;AAOb,MAAM,eAAe,WAAW,YAAY;AAE5C,aAAa,cAAc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | 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.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 import { Portal } from "../../portal/Portal.js";
 import { DialogContainer } from "../Dialog/DialogContainer.js";
 import { _AlertDialog } from "./AlertDialog.js";

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

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogZone.js","names":["AlertDialog"],"sources":["../../../../src/components/overlays/AlertDialog/AlertDialogZone.tsx"],"sourcesContent":["import { Portal } from '../../portal';\nimport { DialogContainer } from '../Dialog';\n\nimport { AlertDialog, CubeAlertDialogActionsProps } from './AlertDialog';\nimport { AlertDialogResolveStatus, Dialog } from './types';\n\nimport type { CubeButtonProps } from '../../actions/Button/Button';\n\nexport interface DialogZoneProps {\n  openedDialog: Dialog | null;\n}\n\nconst PORTAL_KEY = 'AlertDialogZone';\n\n/**\n * @internal Do not use it\n */\nexport function AlertDialogZone(props: DialogZoneProps) {\n  const { openedDialog } = props;\n\n  if (openedDialog === null) return <Portal key={PORTAL_KEY} />;\n\n  const {\n    type,\n    isDismissable = true,\n    actions,\n    onDismiss,\n    content,\n    ...options\n  } = openedDialog.props;\n  const { resolve, reject, isVisible, dialogType } = openedDialog.meta;\n\n  const _actions: CubeAlertDialogActionsProps = (() => {\n    const mergeActionProps = <\n      T extends\n        | CubeAlertDialogActionsProps['confirm']\n        | CubeAlertDialogActionsProps['secondary'],\n    >(\n      action: T,\n      status: AlertDialogResolveStatus,\n    ): T => {\n      if (typeof action === 'undefined') {\n        return undefined as unknown as T;\n      }\n\n      if (typeof action === 'boolean') {\n        return (action\n          ? { onPress: () => resolve(status) }\n          : false) as unknown as T;\n      }\n\n      const onPress = action.onPress;\n\n      return {\n        ...(action as CubeButtonProps),\n        onPress: (e) => {\n          onPress?.(e);\n          resolve(status);\n        },\n      } as unknown as T;\n    };\n\n    if (typeof actions === 'undefined') return {};\n\n    return {\n      confirm: mergeActionProps(actions.confirm, 'confirm'),\n      secondary: mergeActionProps(actions.secondary, 'secondary'),\n      cancel:\n        typeof actions.cancel === 'undefined'\n          ? undefined\n          : typeof actions.cancel === 'boolean'\n            ? actions.cancel\n              ? { onPress: () => reject(undefined) }\n              : false\n            : {\n                ...(actions.cancel as CubeButtonProps),\n                onPress: (e) => {\n                  (actions.cancel as CubeButtonProps).onPress?.(e);\n                  reject(undefined);\n                },\n              },\n    };\n  })();\n\n  return (\n    <Portal key={PORTAL_KEY}>\n      <DialogContainer\n        isOpen={isVisible}\n        isDismissable={isDismissable}\n        type={type}\n        onDismiss={onDismiss}\n      >\n        <AlertDialog\n          noActions={dialogType === 'form'}\n          actions={_actions}\n          isHidden={!isVisible}\n          content={\n            typeof content === 'function'\n              ? content({ resolve, reject })\n              : content\n          }\n          {...options}\n        />\n      </DialogContainer>\n    </Portal>\n  );\n}\n"],"mappings":";;;;;;;AAYA,MAAM,aAAa;;;;AAKnB,SAAgB,gBAAgB,OAAwB;CACtD,MAAM,EAAE,iBAAiB;AAEzB,KAAI,iBAAiB,KAAM,QAAO,oBAAC,YAAY,WAAc;CAE7D,MAAM,EACJ,MACA,gBAAgB,MAChB,SACA,WACA,SACA,GAAG,YACD,aAAa;CACjB,MAAM,EAAE,SAAS,QAAQ,WAAW,eAAe,aAAa;CAEhE,MAAM,kBAA+C;EACnD,MAAM,oBAKJ,QACA,WACM;AACN,OAAI,OAAO,WAAW,YACpB;AAGF,OAAI,OAAO,WAAW,UACpB,QAAQ,SACJ,EAAE,eAAe,QAAQ,OAAO,EAAE,GAClC;GAGN,MAAM,UAAU,OAAO;AAEvB,UAAO;IACL,GAAI;IACJ,UAAU,MAAM;AACd,eAAU,EAAE;AACZ,aAAQ,OAAO;;IAElB;;AAGH,MAAI,OAAO,YAAY,YAAa,QAAO,EAAE;AAE7C,SAAO;GACL,SAAS,iBAAiB,QAAQ,SAAS,UAAU;GACrD,WAAW,iBAAiB,QAAQ,WAAW,YAAY;GAC3D,QACE,OAAO,QAAQ,WAAW,cACtB,SACA,OAAO,QAAQ,WAAW,YACxB,QAAQ,SACN,EAAE,eAAe,OAAO,OAAU,EAAE,GACpC,QACF;IACE,GAAI,QAAQ;IACZ,UAAU,MAAM;AACd,KAAC,QAAQ,OAA2B,UAAU,EAAE;AAChD,YAAO,OAAU;;IAEpB;GACV;KACC;AAEJ,QACE,oBAAC,oBACC,oBAAC;EACC,QAAQ;EACO;EACT;EACK;YAEX,oBAACA;GACC,WAAW,eAAe;GAC1B,SAAS;GACT,UAAU,CAAC;GACX,SACE,OAAO,YAAY,aACf,QAAQ;IAAE;IAAS;IAAQ,CAAC,GAC5B;GAEN,GAAI;IACJ;GACc,IAlBP,WAmBJ"}
+{"version":3,"file":"AlertDialogZone.js","names":["AlertDialog"],"sources":["../../../../src/components/overlays/AlertDialog/AlertDialogZone.tsx"],"sourcesContent":["import { Portal } from '../../portal';\nimport { DialogContainer } from '../Dialog/DialogContainer';\n\nimport { AlertDialog, CubeAlertDialogActionsProps } from './AlertDialog';\nimport { AlertDialogResolveStatus, Dialog } from './types';\n\nimport type { CubeButtonProps } from '../../actions/Button/Button';\n\nexport interface DialogZoneProps {\n  openedDialog: Dialog | null;\n}\n\nconst PORTAL_KEY = 'AlertDialogZone';\n\n/**\n * @internal Do not use it\n */\nexport function AlertDialogZone(props: DialogZoneProps) {\n  const { openedDialog } = props;\n\n  if (openedDialog === null) return <Portal key={PORTAL_KEY} />;\n\n  const {\n    type,\n    isDismissable = true,\n    actions,\n    onDismiss,\n    content,\n    ...options\n  } = openedDialog.props;\n  const { resolve, reject, isVisible, dialogType } = openedDialog.meta;\n\n  const _actions: CubeAlertDialogActionsProps = (() => {\n    const mergeActionProps = <\n      T extends\n        | CubeAlertDialogActionsProps['confirm']\n        | CubeAlertDialogActionsProps['secondary'],\n    >(\n      action: T,\n      status: AlertDialogResolveStatus,\n    ): T => {\n      if (typeof action === 'undefined') {\n        return undefined as unknown as T;\n      }\n\n      if (typeof action === 'boolean') {\n        return (action\n          ? { onPress: () => resolve(status) }\n          : false) as unknown as T;\n      }\n\n      const onPress = action.onPress;\n\n      return {\n        ...(action as CubeButtonProps),\n        onPress: (e) => {\n          onPress?.(e);\n          resolve(status);\n        },\n      } as unknown as T;\n    };\n\n    if (typeof actions === 'undefined') return {};\n\n    return {\n      confirm: mergeActionProps(actions.confirm, 'confirm'),\n      secondary: mergeActionProps(actions.secondary, 'secondary'),\n      cancel:\n        typeof actions.cancel === 'undefined'\n          ? undefined\n          : typeof actions.cancel === 'boolean'\n            ? actions.cancel\n              ? { onPress: () => reject(undefined) }\n              : false\n            : {\n                ...(actions.cancel as CubeButtonProps),\n                onPress: (e) => {\n                  (actions.cancel as CubeButtonProps).onPress?.(e);\n                  reject(undefined);\n                },\n              },\n    };\n  })();\n\n  return (\n    <Portal key={PORTAL_KEY}>\n      <DialogContainer\n        isOpen={isVisible}\n        isDismissable={isDismissable}\n        type={type}\n        onDismiss={onDismiss}\n      >\n        <AlertDialog\n          noActions={dialogType === 'form'}\n          actions={_actions}\n          isHidden={!isVisible}\n          content={\n            typeof content === 'function'\n              ? content({ resolve, reject })\n              : content\n          }\n          {...options}\n        />\n      </DialogContainer>\n    </Portal>\n  );\n}\n"],"mappings":";;;;;;;AAYA,MAAM,aAAa;;;;AAKnB,SAAgB,gBAAgB,OAAwB;CACtD,MAAM,EAAE,iBAAiB;AAEzB,KAAI,iBAAiB,KAAM,QAAO,oBAAC,YAAY,WAAc;CAE7D,MAAM,EACJ,MACA,gBAAgB,MAChB,SACA,WACA,SACA,GAAG,YACD,aAAa;CACjB,MAAM,EAAE,SAAS,QAAQ,WAAW,eAAe,aAAa;CAEhE,MAAM,kBAA+C;EACnD,MAAM,oBAKJ,QACA,WACM;AACN,OAAI,OAAO,WAAW,YACpB;AAGF,OAAI,OAAO,WAAW,UACpB,QAAQ,SACJ,EAAE,eAAe,QAAQ,OAAO,EAAE,GAClC;GAGN,MAAM,UAAU,OAAO;AAEvB,UAAO;IACL,GAAI;IACJ,UAAU,MAAM;AACd,eAAU,EAAE;AACZ,aAAQ,OAAO;;IAElB;;AAGH,MAAI,OAAO,YAAY,YAAa,QAAO,EAAE;AAE7C,SAAO;GACL,SAAS,iBAAiB,QAAQ,SAAS,UAAU;GACrD,WAAW,iBAAiB,QAAQ,WAAW,YAAY;GAC3D,QACE,OAAO,QAAQ,WAAW,cACtB,SACA,OAAO,QAAQ,WAAW,YACxB,QAAQ,SACN,EAAE,eAAe,OAAO,OAAU,EAAE,GACpC,QACF;IACE,GAAI,QAAQ;IACZ,UAAU,MAAM;AACd,KAAC,QAAQ,OAA2B,UAAU,EAAE;AAChD,YAAO,OAAU;;IAEpB;GACV;KACC;AAEJ,QACE,oBAAC,oBACC,oBAAC;EACC,QAAQ;EACO;EACT;EACK;YAEX,oBAACA;GACC,WAAW,eAAe;GAC1B,SAAS;GACT,UAAU,CAAC;GACX,SACE,OAAO,YAAY,aACf,QAAQ;IAAE;IAAS;IAAQ,CAAC,GAC5B;GAEN,GAAI;IACJ;GACc,IAlBP,WAmBJ"}

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

@@ -1,12 +1,12 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | 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";
 import { useI18n } from "../../../i18n/useI18n.js";
-import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { useOpenTransitionContext } from "../Modal/OpenTransitionContext.js";
 import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { useDialogContext } from "./context.js";
+import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, FLOW_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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 { 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} from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\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\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\n    // close. The restore is the one that matters for popover-type dialogs —\n    // `DialogTrigger`'s own restore is a no-op there — so `shouldRestoreFocus`\n    // has to reach it. Containment is unaffected either way.\n    <FocusScope\n      restoreFocus={context.shouldRestoreFocus ?? true}\n      contain={shouldContainFocus}\n    >\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  const { t } = useI18n();\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={t('dialog.dismiss', '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} from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { mergeProps, SlotProvider } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions/ItemButton/ItemButton';\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\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\n    // close. The restore is the one that matters for popover-type dialogs —\n    // `DialogTrigger`'s own restore is a no-op there — so `shouldRestoreFocus`\n    // has to reach it. Containment is unaffected either way.\n    <FocusScope\n      restoreFocus={context.shouldRestoreFocus ?? true}\n      contain={shouldContainFocus}\n    >\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  const { t } = useI18n();\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={t('dialog.dismiss', '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.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | 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.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { ButtonGroup } from "../../actions/ButtonGroup/ButtonGroup.js";
@@ -6,10 +6,10 @@ import { Button } from "../../actions/index.js";
 import { useDialogContext } from "./context.js";
 import { Content } from "../../content/Content.js";
 import { Header } from "../../content/Header.js";
+import { Dialog } from "./Dialog.js";
 import { useForm } from "../../form/Form/use-form.js";
 import { _SubmitButton } from "../../form/Form/SubmitButton/SubmitButton.js";
 import { Form } from "../../form/Form/index.js";
-import { Dialog } from "./Dialog.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/overlays/Dialog/DialogForm.tsx

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.1 | 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";
@@ -152,12 +152,13 @@ function PopoverTrigger(allProps) {
 	const resolveShouldCloseOnInteractOutside = useEvent((el) => {
 		const popoverTriggerEl = el.closest("[data-popover-trigger]");
 		if (!popoverTriggerEl) {
+			if (shouldCloseOnInteractOutside && !shouldCloseOnInteractOutside(el)) return false;
 			if (el.closest("[data-popover-keep]")) return false;
 			if (el.closest("[data-popover-dismiss]")) {
 				setTimeout(() => state.close(), 0);
 				return false;
 			}
-			return shouldCloseOnInteractOutside ? shouldCloseOnInteractOutside(el) : true;
+			return true;
 		}
 		const ownTrigger = targetRef?.current ?? triggerRef.current;
 		if (popoverTriggerEl === ownTrigger || ownTrigger?.contains(el)) return true;