npm - @cube-dev/ui-kit - Versions diffs - 0.0.0-canary-ac46c4b → 0.0.0-canary-9bde021 - Mend

@cube-dev/ui-kit 0.0.0-canary-ac46c4b → 0.0.0-canary-9bde021

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (621) hide show

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | Cube Dev Team */
 import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { useOptionalTabsContext } from "./TabsContext.js";
 import { c } from "react-compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | Cube Dev Team */
 import { _Item } from "../../content/Item/Item.js";
 import { tasty } from "@tenphi/tasty";
@@ -305,7 +305,7 @@ const TabElement = tasty(_Item, {
 		},
 		outline: "none",
 		placeContent: { "type=radio": "center" },
-		gridTemplate: { "type=radio": "\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content" },
+		gridTemplate: { "type=radio": "\"icon prefix label suffix rightIcon actions\" auto / max-content max-content minmax(0, max-content) max-content max-content max-content" },
 		"$selection-shadow": {
 			"": "inset 0 0 0 0 #primary",
 			"type=file & selected": "inset 0 (-1 * $tab-indicator-size) 0 0 #primary",

package/dist/components/navigation/Tabs/styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","names":["tasty","Item","TabsElement","styles","display","flow","flexShrink","flexGrow","width","height","overflow","Bar","$","placeItems","border","padding","radius","fill","$transition","Prefix","placeContent","placeSelf","gap","Suffix","ScrollWrapper","position","Scroll","scrollbar","margin","fade","transition","TabList","boxSizing","gridAutoColumns","gridAutoRows","$size","Scrollbar","bottom","top","left","right","opacity","pointerEvents","TabElement","as","color","disabled","preset","shadow","editing","outline","gridTemplate","Label","Actions","TabContainer","cursor","draggable","dragging","DropIndicatorElement","zIndex","TabIndicatorElement","TabPanelElement","hide","active"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Item } from '../../content/Item';\n\n// =============================================================================\n// Main Tabs Container — flex wrapper holding the tab Bar and the panels.\n// `placement` mod drives `flex-direction` so DOM order stays \"bar then panels\"\n// and visual order is controlled with `column / column-reverse / row / row-reverse`.\n// =============================================================================\n\nexport const TabsElement = tasty({\n styles: {\n display: 'flex',\n flow: {\n '': 'column',\n 'placement=bottom': 'column-reverse',\n 'placement=left': 'row',\n 'placement=right': 'row-reverse',\n },\n // Participate in parent flex layouts; allow shrinking on both axes so we\n // never force the parent into overflow. The Bar keeps `flex-shrink: 0`,\n // which makes the practical minimum of the wrapper along the main axis\n // equal to the tablist's intrinsic size. When there are no panels the\n // wrapper has only the Bar inside it, so we lock its sizing to the Bar's\n // intrinsic size — matching the pre-wrapper behavior of a panel-less Tabs.\n flexShrink: { '': 0, 'has-panels': 1 },\n flexGrow: { '': 0, 'has-panels': 1 },\n width: 'min 0',\n height: 'min 0',\n overflow: 'visible',\n\n // ============================================\n // Bar — the tab strip (Prefix + ScrollWrapper + Suffix).\n // ============================================\n Bar: {\n $: '>',\n display: 'flex',\n flow: {\n '': 'row',\n 'placement=left \| placement=right': 'column',\n },\n placeItems: {\n '': 'end stretch',\n 'placement=bottom': 'start stretch',\n 'placement=left': 'stretch end',\n 'placement=right': 'stretch start',\n 'type=radio \| type=file': 'stretch',\n },\n overflow: 'visible',\n border: {\n '': 0,\n '(type=default \| type=file \| type=narrow) & has-panels': 'bottom',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=bottom':\n 'top',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=left':\n 'right',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=right':\n 'left',\n },\n // Bar sizing — always follow the outer wrapper along the main axis so\n // `width` / `height` props on `<Tabs>` apply to the strip as they did\n // before the wrapper was introduced.\n // - horizontal placements: main-axis = wrapper width (100%), cross-axis intrinsic (auto)\n // - vertical placements: main-axis = wrapper height (100%), cross-axis intrinsic (auto / max-content for radio)\n width: {\n '': '100%',\n 'placement=left \| placement=right': 'auto',\n 'type=radio & (placement=left \| placement=right)': 'max-content',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': '100%',\n 'type=radio & (placement=left \| placement=right)': 'max-content',\n },\n padding: {\n '': 0,\n 'type=radio': '.5x',\n },\n radius: {\n '': 0,\n 'type=radio': '1cr',\n },\n fill: {\n '': '#clear',\n 'type=radio': '#surface-4',\n },\n // Never let the Bar shrink/grow within the outer wrapper — this is what\n // gives the wrapper its effective \"tablist-size minimum\" on the main axis.\n flexShrink: 0,\n flexGrow: 0,\n\n $transition: '$tab-transition',\n '$tab-indicator-size': {\n '': '2bw',\n 'size=large': '1ow',\n },\n },\n\n // ============================================\n // Prefix — slot before the scroll area.\n // ============================================\n Prefix: {\n $: '> Bar >',\n display: 'flex',\n placeItems: 'center',\n placeContent: 'center',\n flexShrink: 0,\n placeSelf: 'stretch',\n padding: {\n '': 0,\n 'type=default': '.5x 0 .5x 1x',\n 'type=default & (placement=left \| placement=right)': '1x .5x 0 .5x',\n },\n gap: {\n '': 0,\n 'type=default': '.5x',\n },\n border: {\n '': 0,\n 'type=file': 'right',\n 'type=file & (placement=left \| placement=right)': 'bottom',\n },\n },\n\n // ============================================\n // Suffix — slot after the scroll area.\n // ============================================\n Suffix: {\n $: '> Bar >',\n display: 'flex',\n placeItems: 'center',\n placeContent: 'center',\n flexShrink: 0,\n placeSelf: 'stretch',\n padding: {\n '': 0,\n 'type=default': '.5x 1x .5x 0',\n 'type=default & (placement=left \| placement=right)': '0 .5x 1x .5x',\n },\n gap: {\n '': 0,\n 'type=default': '.5x',\n },\n border: {\n '': 0,\n 'type=file': 'left',\n 'type=file & (placement=left \| placement=right)': 'top',\n },\n },\n\n // Wrapper for scroll area and scrollbar (scrollbar is positioned relative to this)\n ScrollWrapper: {\n $: '> Bar >',\n position: 'relative',\n display: 'flex',\n flexGrow: 1,\n flexShrink: 1,\n width: {\n '': 'min 0',\n 'placement=left \| placement=right': 'auto',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': 'min 0',\n },\n overflow: {\n '': 'hidden',\n 'type=radio': 'visible',\n },\n },\n\n Scroll: {\n $: '> Bar > ScrollWrapper >',\n position: 'relative',\n display: 'block',\n overflow: {\n '': 'auto hidden',\n 'placement=left \| placement=right': 'hidden auto',\n 'type=radio': 'visible',\n },\n scrollbar: 'none',\n flexGrow: 1,\n width: '100%',\n // Add padding/margin for radio type to allow shadow to render outside\n padding: {\n '': 0,\n 'type=radio': '.5x',\n },\n margin: {\n '': 0,\n 'type=radio': '-.5x',\n },\n // Multi-group fade with axis-neutral color tokens for smooth transitions.\n // Direction flips based on placement.\n fade: {\n '': '2x left #tabs-fade-start #black, 2x right #tabs-fade-end #black',\n 'placement=left \| placement=right':\n '2x top #tabs-fade-start #black, 2x bottom #tabs-fade-end #black',\n },\n // ##name outputs --name-color (literal CSS property name)\n transition:\n '##tabs-fade-start $tab-transition ease-in, ##tabs-fade-end $tab-transition ease-in',\n\n // Transition transparent color: opaque (no fade) -> transparent (fade visible)\n '#tabs-fade-start': {\n '': '#black',\n 'fade-start': '#black.0',\n },\n '#tabs-fade-end': {\n '': '#black',\n 'fade-end': '#black.0',\n },\n },\n\n TabList: {\n $: '> Bar > ScrollWrapper > Scroll >',\n position: 'relative',\n display: 'grid',\n // `border-box` is required because we set `width: 100%` for vertical\n // placements AND apply padding. With the default `content-box`, the\n // TabList's outer box would be `100% + padding × 2` and overflow Scroll\n // horizontally — and the side selection indicator (positioned at\n // `right: 0` / `left: 0` of TabList) would land in that overflow region\n // and get clipped by Scroll's `overflow-x: hidden`.\n boxSizing: 'border-box',\n flow: {\n '': 'column',\n 'placement=left \| placement=right': 'row',\n },\n gridAutoColumns: {\n '': 'auto',\n 'type=radio': '1fr',\n },\n gridAutoRows: {\n '': 'auto',\n 'type=radio & (placement=left \| placement=right)': '1fr',\n },\n gap: {\n '': 0,\n 'type=default': '1x',\n 'type=narrow': '2x',\n 'type=radio': '.5x',\n // Tabs stack vertically — collapse the gap so the strip reads as a\n // single column. `narrow` is coerced to `default` in vertical, but we\n // keep the rule defensive in case the styled element is consumed\n // directly with a `type=narrow` mod set.\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '1bw',\n },\n placeContent: 'start',\n overflow: 'visible',\n width: {\n '': 'max-content',\n 'type=radio': '100%',\n 'placement=left \| placement=right': '100%',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': 'max-content',\n },\n // For vertical default/narrow we apply `$tablist-padding` on ALL sides\n // (instead of only the parallel axis) so the breathing room around the\n // tabs and the selection indicator can be tuned via the `tabListPadding`\n // prop — the same prop that controls horizontal start/end padding.\n padding: {\n '': '0 $tablist-padding',\n 'placement=left \| placement=right': '$tablist-padding 0',\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '$tablist-padding',\n },\n\n // Default `$tablist-padding` per type. Vertical default/narrow gets the\n // smaller `.5x` default since it applies to all four sides; the\n // `tabListPadding` prop overrides this via inline CSS variable.\n '$tablist-padding': {\n '': '0',\n 'type=default \| type=narrow': '1x',\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '.5x',\n },\n },\n\n // Size variable for actions (if ItemAction is used instead of TabsAction)\n $size: {\n '': '$size-md',\n 'size=xsmall': '$size-xs',\n 'size=small': '$size-sm',\n 'size=medium': '$size-md',\n 'size=large': '$size-lg',\n 'size=xlarge': '$size-xl',\n },\n\n // Custom tiny scrollbar — positioned relative to ScrollWrapper. Switches\n // edges and dimensions based on placement; the driving CSS custom\n // properties come from `useTinyScrollbar.handleHStyle` / `handleVStyle`.\n Scrollbar: {\n $: '> Bar > ScrollWrapper >',\n position: 'absolute',\n bottom: {\n '': '1px',\n 'placement=left \| placement=right': 'auto',\n },\n top: {\n '': 'auto',\n 'placement=left \| placement=right': '$scrollbar-v-top',\n },\n left: {\n '': '$scrollbar-h-left',\n 'placement=left \| placement=right': 'auto',\n },\n right: {\n '': 'auto',\n 'placement=left \| placement=right': '1px',\n },\n height: {\n '': '1ow',\n 'placement=left \| placement=right': '$scrollbar-v-height',\n },\n width: {\n '': '$scrollbar-h-width',\n 'placement=left \| placement=right': '1ow',\n },\n radius: 'round',\n fill: '#dark.35',\n opacity: {\n '': 0,\n 'focused \| scrolling': 1,\n },\n transition: 'opacity 0.15s',\n pointerEvents: 'none',\n },\n },\n});\n\n// =============================================================================\n// Tab Button (extends Item)\n// =============================================================================\n\nexport const TabElement = tasty(Item, {\n as: 'button',\n styles: {\n radius: {\n '': false,\n 'type=radio \| type=default': true,\n 'type=narrow': 'top',\n 'type=narrow & placement=bottom': 'bottom',\n 'type=narrow & placement=left': 'left',\n 'type=narrow & placement=right': 'right',\n },\n color: {\n '': '#dark-02',\n 'type=narrow & (hovered & !selected)': '#primary-text',\n '(type=default \| type=narrow) & selected': '#primary-text',\n disabled: '#disabled-surface-text',\n },\n fill: {\n '': '#clear',\n 'hovered & !type=narrow': '#dark.03',\n 'type=file': '#surface-3',\n 'type=file & hovered': '#surface-3.5',\n 'type=radio & hovered': '#surface.5',\n '(type=file \| type=radio) & selected': '#surface',\n // Spring-load hint: a widget is hovering this tab and it is about to open.\n 'drop-pending': '#primary.10',\n },\n border: {\n '': '#clear',\n 'type=file': '0 #clear',\n },\n preset: {\n '': 't3m',\n 'size=xsmall': 't4',\n },\n shadow: {\n '': '$selection-shadow',\n 'focused & focus-visible':\n 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n editing: 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n 'type=radio & selected': '$item-shadow',\n 'type=radio & selected & focused & focus-visible':\n '$item-shadow, inset 0 0 0 1bw #primary-text',\n },\n outline: 'none',\n placeContent: {\n // extend\n 'type=radio': 'center',\n },\n gridTemplate: {\n // extend\n 'type=radio':\n '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\n },\n // File-type selection indicator: an inset shadow on the edge that faces\n // the panel area. Flips with placement so the highlight always sits on\n // the edge adjacent to the content.\n '$selection-shadow': {\n '': 'inset 0 0 0 0 #primary',\n 'type=file & selected': 'inset 0 (-1 * $tab-indicator-size) 0 0 #primary',\n 'type=file & selected & placement=bottom':\n 'inset 0 $tab-indicator-size 0 0 #primary',\n 'type=file & selected & placement=left':\n 'inset (-1 * $tab-indicator-size) 0 0 0 #primary',\n 'type=file & selected & placement=right':\n 'inset $tab-indicator-size 0 0 0 #primary',\n '!type=file': 'inset 0 0 0 0 #primary.0',\n },\n // Collapse horizontal padding for narrow type\n '$label-padding-left': {\n '': '$inline-padding',\n 'has-start-content': 0,\n 'type=narrow': 0,\n },\n '$label-padding-right': {\n '': '$inline-padding',\n 'has-end-content': 0,\n 'type=narrow': 0,\n },\n Label: {\n placeSelf: {\n '': 'center start',\n 'type=radio': 'center start',\n 'type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon':\n 'center',\n },\n },\n Actions: {\n transition: false,\n },\n },\n});\n\n// =============================================================================\n// Tab Container (wrapper for tab + actions)\n// =============================================================================\n\nexport const TabContainer = tasty({\n styles: {\n position: 'relative',\n display: 'grid',\n margin: {\n '': 0,\n // Horizontal strip: .5x top/bottom creates space between the tab and the\n // bottom-edge indicator (which sits at `bottom: 0` of TabList).\n 'type=default': '.5x 0',\n // Vertical strip: the breathing room around the tabs and the gap from\n // the side indicator is provided by the TabList's own `.5x` padding —\n // don't add per-tab horizontal margin on top of it.\n 'type=default & (placement=left \| placement=right)': 0,\n },\n border: {\n '': 0,\n 'type=file': 'right',\n 'type=file & (placement=left \| placement=right)': 'bottom',\n },\n cursor: {\n '': 'default',\n draggable: 'grab',\n dragging: 'grabbing',\n },\n },\n});\n\n// =============================================================================\n// Drop Indicator for Drag-and-Drop\n// Geometry flips based on placement: a vertical bar between horizontal tabs,\n// a horizontal bar between vertical tabs. `before`/`after` mods come from\n// `TabDropIndicator` and decide which edge inset is applied.\n// =============================================================================\n\nexport const DropIndicatorElement = tasty({\n styles: {\n zIndex: 10,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: {\n '': 0,\n 'drop-target': 1,\n },\n fill: '#primary',\n width: {\n '': '.5x',\n 'placement=left \| placement=right': 'auto',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': '.5x',\n },\n top: {\n '': 0,\n 'placement=left \| placement=right': 'auto',\n '(placement=left \| placement=right) & before': '-2px',\n },\n bottom: {\n '': 0,\n 'placement=left \| placement=right': 'auto',\n '(placement=left \| placement=right) & after': '-2px',\n },\n left: {\n '': 'auto',\n 'before & !(placement=left \| placement=right)': '-2px',\n 'placement=left \| placement=right': 0,\n },\n right: {\n '': 'auto',\n 'after & !(placement=left \| placement=right)': '-2px',\n 'placement=left \| placement=right': 0,\n },\n },\n});\n\n// =============================================================================\n// Tab Selection Indicator (for default/narrow type)\n// Position flips with placement; the dynamic axis dimensions (left/width for\n// horizontal, top/height for vertical) are populated via inline `style` from\n// `useTabIndicator` in `Tabs.tsx`.\n// =============================================================================\n\nexport const TabIndicatorElement = tasty({\n styles: {\n position: 'absolute',\n bottom: {\n '': '0',\n 'placement=bottom \| placement=left \| placement=right': 'auto',\n },\n top: {\n '': 'auto',\n 'placement=bottom': '0',\n },\n left: {\n '': 'auto',\n 'placement=right': '0',\n },\n right: {\n '': 'auto',\n 'placement=left': '0',\n },\n height: {\n '': '$tab-indicator-size',\n 'placement=left \| placement=right': 'auto',\n },\n width: {\n '': 'auto',\n 'placement=left \| placement=right': '$tab-indicator-size',\n },\n fill: '#primary',\n // Transition all four properties unconditionally — only the two relevant\n // ones change per render, the others stay constant.\n transition:\n 'left $tab-transition ease-in-out, width $tab-transition ease-in-out, top $tab-transition ease-in-out, height $tab-transition ease-in-out',\n pointerEvents: 'none',\n },\n});\n\n// =============================================================================\n// Tab Panel\n// =============================================================================\n\nexport const TabPanelElement = tasty({\n as: 'section',\n styles: {\n display: 'contents',\n hide: {\n '': true,\n active: false,\n },\n },\n});\n"],"mappings":"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"}
1	+ {"version":3,"file":"styled.js","names":["tasty","Item","TabsElement","styles","display","flow","flexShrink","flexGrow","width","height","overflow","Bar","$","placeItems","border","padding","radius","fill","$transition","Prefix","placeContent","placeSelf","gap","Suffix","ScrollWrapper","position","Scroll","scrollbar","margin","fade","transition","TabList","boxSizing","gridAutoColumns","gridAutoRows","$size","Scrollbar","bottom","top","left","right","opacity","pointerEvents","TabElement","as","color","disabled","preset","shadow","editing","outline","gridTemplate","Label","Actions","TabContainer","cursor","draggable","dragging","DropIndicatorElement","zIndex","TabIndicatorElement","TabPanelElement","hide","active"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Item } from '../../content/Item';\n\n// =============================================================================\n// Main Tabs Container — flex wrapper holding the tab Bar and the panels.\n// `placement` mod drives `flex-direction` so DOM order stays \"bar then panels\"\n// and visual order is controlled with `column / column-reverse / row / row-reverse`.\n// =============================================================================\n\nexport const TabsElement = tasty({\n styles: {\n display: 'flex',\n flow: {\n '': 'column',\n 'placement=bottom': 'column-reverse',\n 'placement=left': 'row',\n 'placement=right': 'row-reverse',\n },\n // Participate in parent flex layouts; allow shrinking on both axes so we\n // never force the parent into overflow. The Bar keeps `flex-shrink: 0`,\n // which makes the practical minimum of the wrapper along the main axis\n // equal to the tablist's intrinsic size. When there are no panels the\n // wrapper has only the Bar inside it, so we lock its sizing to the Bar's\n // intrinsic size — matching the pre-wrapper behavior of a panel-less Tabs.\n flexShrink: { '': 0, 'has-panels': 1 },\n flexGrow: { '': 0, 'has-panels': 1 },\n width: 'min 0',\n height: 'min 0',\n overflow: 'visible',\n\n // ============================================\n // Bar — the tab strip (Prefix + ScrollWrapper + Suffix).\n // ============================================\n Bar: {\n $: '>',\n display: 'flex',\n flow: {\n '': 'row',\n 'placement=left \| placement=right': 'column',\n },\n placeItems: {\n '': 'end stretch',\n 'placement=bottom': 'start stretch',\n 'placement=left': 'stretch end',\n 'placement=right': 'stretch start',\n 'type=radio \| type=file': 'stretch',\n },\n overflow: 'visible',\n border: {\n '': 0,\n '(type=default \| type=file \| type=narrow) & has-panels': 'bottom',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=bottom':\n 'top',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=left':\n 'right',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=right':\n 'left',\n },\n // Bar sizing — always follow the outer wrapper along the main axis so\n // `width` / `height` props on `<Tabs>` apply to the strip as they did\n // before the wrapper was introduced.\n // - horizontal placements: main-axis = wrapper width (100%), cross-axis intrinsic (auto)\n // - vertical placements: main-axis = wrapper height (100%), cross-axis intrinsic (auto / max-content for radio)\n width: {\n '': '100%',\n 'placement=left \| placement=right': 'auto',\n 'type=radio & (placement=left \| placement=right)': 'max-content',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': '100%',\n 'type=radio & (placement=left \| placement=right)': 'max-content',\n },\n padding: {\n '': 0,\n 'type=radio': '.5x',\n },\n radius: {\n '': 0,\n 'type=radio': '1cr',\n },\n fill: {\n '': '#clear',\n 'type=radio': '#surface-4',\n },\n // Never let the Bar shrink/grow within the outer wrapper — this is what\n // gives the wrapper its effective \"tablist-size minimum\" on the main axis.\n flexShrink: 0,\n flexGrow: 0,\n\n $transition: '$tab-transition',\n '$tab-indicator-size': {\n '': '2bw',\n 'size=large': '1ow',\n },\n },\n\n // ============================================\n // Prefix — slot before the scroll area.\n // ============================================\n Prefix: {\n $: '> Bar >',\n display: 'flex',\n placeItems: 'center',\n placeContent: 'center',\n flexShrink: 0,\n placeSelf: 'stretch',\n padding: {\n '': 0,\n 'type=default': '.5x 0 .5x 1x',\n 'type=default & (placement=left \| placement=right)': '1x .5x 0 .5x',\n },\n gap: {\n '': 0,\n 'type=default': '.5x',\n },\n border: {\n '': 0,\n 'type=file': 'right',\n 'type=file & (placement=left \| placement=right)': 'bottom',\n },\n },\n\n // ============================================\n // Suffix — slot after the scroll area.\n // ============================================\n Suffix: {\n $: '> Bar >',\n display: 'flex',\n placeItems: 'center',\n placeContent: 'center',\n flexShrink: 0,\n placeSelf: 'stretch',\n padding: {\n '': 0,\n 'type=default': '.5x 1x .5x 0',\n 'type=default & (placement=left \| placement=right)': '0 .5x 1x .5x',\n },\n gap: {\n '': 0,\n 'type=default': '.5x',\n },\n border: {\n '': 0,\n 'type=file': 'left',\n 'type=file & (placement=left \| placement=right)': 'top',\n },\n },\n\n // Wrapper for scroll area and scrollbar (scrollbar is positioned relative to this)\n ScrollWrapper: {\n $: '> Bar >',\n position: 'relative',\n display: 'flex',\n flexGrow: 1,\n flexShrink: 1,\n width: {\n '': 'min 0',\n 'placement=left \| placement=right': 'auto',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': 'min 0',\n },\n overflow: {\n '': 'hidden',\n 'type=radio': 'visible',\n },\n },\n\n Scroll: {\n $: '> Bar > ScrollWrapper >',\n position: 'relative',\n display: 'block',\n overflow: {\n '': 'auto hidden',\n 'placement=left \| placement=right': 'hidden auto',\n 'type=radio': 'visible',\n },\n scrollbar: 'none',\n flexGrow: 1,\n width: '100%',\n // Add padding/margin for radio type to allow shadow to render outside\n padding: {\n '': 0,\n 'type=radio': '.5x',\n },\n margin: {\n '': 0,\n 'type=radio': '-.5x',\n },\n // Multi-group fade with axis-neutral color tokens for smooth transitions.\n // Direction flips based on placement.\n fade: {\n '': '2x left #tabs-fade-start #black, 2x right #tabs-fade-end #black',\n 'placement=left \| placement=right':\n '2x top #tabs-fade-start #black, 2x bottom #tabs-fade-end #black',\n },\n // ##name outputs --name-color (literal CSS property name)\n transition:\n '##tabs-fade-start $tab-transition ease-in, ##tabs-fade-end $tab-transition ease-in',\n\n // Transition transparent color: opaque (no fade) -> transparent (fade visible)\n '#tabs-fade-start': {\n '': '#black',\n 'fade-start': '#black.0',\n },\n '#tabs-fade-end': {\n '': '#black',\n 'fade-end': '#black.0',\n },\n },\n\n TabList: {\n $: '> Bar > ScrollWrapper > Scroll >',\n position: 'relative',\n display: 'grid',\n // `border-box` is required because we set `width: 100%` for vertical\n // placements AND apply padding. With the default `content-box`, the\n // TabList's outer box would be `100% + padding × 2` and overflow Scroll\n // horizontally — and the side selection indicator (positioned at\n // `right: 0` / `left: 0` of TabList) would land in that overflow region\n // and get clipped by Scroll's `overflow-x: hidden`.\n boxSizing: 'border-box',\n flow: {\n '': 'column',\n 'placement=left \| placement=right': 'row',\n },\n gridAutoColumns: {\n '': 'auto',\n 'type=radio': '1fr',\n },\n gridAutoRows: {\n '': 'auto',\n 'type=radio & (placement=left \| placement=right)': '1fr',\n },\n gap: {\n '': 0,\n 'type=default': '1x',\n 'type=narrow': '2x',\n 'type=radio': '.5x',\n // Tabs stack vertically — collapse the gap so the strip reads as a\n // single column. `narrow` is coerced to `default` in vertical, but we\n // keep the rule defensive in case the styled element is consumed\n // directly with a `type=narrow` mod set.\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '1bw',\n },\n placeContent: 'start',\n overflow: 'visible',\n width: {\n '': 'max-content',\n 'type=radio': '100%',\n 'placement=left \| placement=right': '100%',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': 'max-content',\n },\n // For vertical default/narrow we apply `$tablist-padding` on ALL sides\n // (instead of only the parallel axis) so the breathing room around the\n // tabs and the selection indicator can be tuned via the `tabListPadding`\n // prop — the same prop that controls horizontal start/end padding.\n padding: {\n '': '0 $tablist-padding',\n 'placement=left \| placement=right': '$tablist-padding 0',\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '$tablist-padding',\n },\n\n // Default `$tablist-padding` per type. Vertical default/narrow gets the\n // smaller `.5x` default since it applies to all four sides; the\n // `tabListPadding` prop overrides this via inline CSS variable.\n '$tablist-padding': {\n '': '0',\n 'type=default \| type=narrow': '1x',\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '.5x',\n },\n },\n\n // Size variable for actions (if ItemAction is used instead of TabsAction)\n $size: {\n '': '$size-md',\n 'size=xsmall': '$size-xs',\n 'size=small': '$size-sm',\n 'size=medium': '$size-md',\n 'size=large': '$size-lg',\n 'size=xlarge': '$size-xl',\n },\n\n // Custom tiny scrollbar — positioned relative to ScrollWrapper. Switches\n // edges and dimensions based on placement; the driving CSS custom\n // properties come from `useTinyScrollbar.handleHStyle` / `handleVStyle`.\n Scrollbar: {\n $: '> Bar > ScrollWrapper >',\n position: 'absolute',\n bottom: {\n '': '1px',\n 'placement=left \| placement=right': 'auto',\n },\n top: {\n '': 'auto',\n 'placement=left \| placement=right': '$scrollbar-v-top',\n },\n left: {\n '': '$scrollbar-h-left',\n 'placement=left \| placement=right': 'auto',\n },\n right: {\n '': 'auto',\n 'placement=left \| placement=right': '1px',\n },\n height: {\n '': '1ow',\n 'placement=left \| placement=right': '$scrollbar-v-height',\n },\n width: {\n '': '$scrollbar-h-width',\n 'placement=left \| placement=right': '1ow',\n },\n radius: 'round',\n fill: '#dark.35',\n opacity: {\n '': 0,\n 'focused \| scrolling': 1,\n },\n transition: 'opacity 0.15s',\n pointerEvents: 'none',\n },\n },\n});\n\n// =============================================================================\n// Tab Button (extends Item)\n// =============================================================================\n\nexport const TabElement = tasty(Item, {\n as: 'button',\n styles: {\n radius: {\n '': false,\n 'type=radio \| type=default': true,\n 'type=narrow': 'top',\n 'type=narrow & placement=bottom': 'bottom',\n 'type=narrow & placement=left': 'left',\n 'type=narrow & placement=right': 'right',\n },\n color: {\n '': '#dark-02',\n 'type=narrow & (hovered & !selected)': '#primary-text',\n '(type=default \| type=narrow) & selected': '#primary-text',\n disabled: '#disabled-surface-text',\n },\n fill: {\n '': '#clear',\n 'hovered & !type=narrow': '#dark.03',\n 'type=file': '#surface-3',\n 'type=file & hovered': '#surface-3.5',\n 'type=radio & hovered': '#surface.5',\n '(type=file \| type=radio) & selected': '#surface',\n // Spring-load hint: a widget is hovering this tab and it is about to open.\n 'drop-pending': '#primary.10',\n },\n border: {\n '': '#clear',\n 'type=file': '0 #clear',\n },\n preset: {\n '': 't3m',\n 'size=xsmall': 't4',\n },\n shadow: {\n '': '$selection-shadow',\n 'focused & focus-visible':\n 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n editing: 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n 'type=radio & selected': '$item-shadow',\n 'type=radio & selected & focused & focus-visible':\n '$item-shadow, inset 0 0 0 1bw #primary-text',\n },\n outline: 'none',\n placeContent: {\n // extend\n 'type=radio': 'center',\n },\n gridTemplate: {\n // extend\n // Sized by content like a radio button, but the label column keeps a\n // zero minimum (as `Item`'s `1sf` does), so a tab given less room than\n // its title truncates it — and gets the auto tooltip — instead of\n // spilling the title out of the tab.\n 'type=radio':\n '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content minmax(0, max-content) max-content max-content max-content',\n },\n // File-type selection indicator: an inset shadow on the edge that faces\n // the panel area. Flips with placement so the highlight always sits on\n // the edge adjacent to the content.\n '$selection-shadow': {\n '': 'inset 0 0 0 0 #primary',\n 'type=file & selected': 'inset 0 (-1 * $tab-indicator-size) 0 0 #primary',\n 'type=file & selected & placement=bottom':\n 'inset 0 $tab-indicator-size 0 0 #primary',\n 'type=file & selected & placement=left':\n 'inset (-1 * $tab-indicator-size) 0 0 0 #primary',\n 'type=file & selected & placement=right':\n 'inset $tab-indicator-size 0 0 0 #primary',\n '!type=file': 'inset 0 0 0 0 #primary.0',\n },\n // Collapse horizontal padding for narrow type\n '$label-padding-left': {\n '': '$inline-padding',\n 'has-start-content': 0,\n 'type=narrow': 0,\n },\n '$label-padding-right': {\n '': '$inline-padding',\n 'has-end-content': 0,\n 'type=narrow': 0,\n },\n Label: {\n placeSelf: {\n '': 'center start',\n 'type=radio': 'center start',\n 'type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon':\n 'center',\n },\n },\n Actions: {\n transition: false,\n },\n },\n});\n\n// =============================================================================\n// Tab Container (wrapper for tab + actions)\n// =============================================================================\n\nexport const TabContainer = tasty({\n styles: {\n position: 'relative',\n display: 'grid',\n margin: {\n '': 0,\n // Horizontal strip: .5x top/bottom creates space between the tab and the\n // bottom-edge indicator (which sits at `bottom: 0` of TabList).\n 'type=default': '.5x 0',\n // Vertical strip: the breathing room around the tabs and the gap from\n // the side indicator is provided by the TabList's own `.5x` padding —\n // don't add per-tab horizontal margin on top of it.\n 'type=default & (placement=left \| placement=right)': 0,\n },\n border: {\n '': 0,\n 'type=file': 'right',\n 'type=file & (placement=left \| placement=right)': 'bottom',\n },\n cursor: {\n '': 'default',\n draggable: 'grab',\n dragging: 'grabbing',\n },\n },\n});\n\n// =============================================================================\n// Drop Indicator for Drag-and-Drop\n// Geometry flips based on placement: a vertical bar between horizontal tabs,\n// a horizontal bar between vertical tabs. `before`/`after` mods come from\n// `TabDropIndicator` and decide which edge inset is applied.\n// =============================================================================\n\nexport const DropIndicatorElement = tasty({\n styles: {\n zIndex: 10,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: {\n '': 0,\n 'drop-target': 1,\n },\n fill: '#primary',\n width: {\n '': '.5x',\n 'placement=left \| placement=right': 'auto',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': '.5x',\n },\n top: {\n '': 0,\n 'placement=left \| placement=right': 'auto',\n '(placement=left \| placement=right) & before': '-2px',\n },\n bottom: {\n '': 0,\n 'placement=left \| placement=right': 'auto',\n '(placement=left \| placement=right) & after': '-2px',\n },\n left: {\n '': 'auto',\n 'before & !(placement=left \| placement=right)': '-2px',\n 'placement=left \| placement=right': 0,\n },\n right: {\n '': 'auto',\n 'after & !(placement=left \| placement=right)': '-2px',\n 'placement=left \| placement=right': 0,\n },\n },\n});\n\n// =============================================================================\n// Tab Selection Indicator (for default/narrow type)\n// Position flips with placement; the dynamic axis dimensions (left/width for\n// horizontal, top/height for vertical) are populated via inline `style` from\n// `useTabIndicator` in `Tabs.tsx`.\n// =============================================================================\n\nexport const TabIndicatorElement = tasty({\n styles: {\n position: 'absolute',\n bottom: {\n '': '0',\n 'placement=bottom \| placement=left \| placement=right': 'auto',\n },\n top: {\n '': 'auto',\n 'placement=bottom': '0',\n },\n left: {\n '': 'auto',\n 'placement=right': '0',\n },\n right: {\n '': 'auto',\n 'placement=left': '0',\n },\n height: {\n '': '$tab-indicator-size',\n 'placement=left \| placement=right': 'auto',\n },\n width: {\n '': 'auto',\n 'placement=left \| placement=right': '$tab-indicator-size',\n },\n fill: '#primary',\n // Transition all four properties unconditionally — only the two relevant\n // ones change per render, the others stay constant.\n transition:\n 'left $tab-transition ease-in-out, width $tab-transition ease-in-out, top $tab-transition ease-in-out, height $tab-transition ease-in-out',\n pointerEvents: 'none',\n },\n});\n\n// =============================================================================\n// Tab Panel\n// =============================================================================\n\nexport const TabPanelElement = tasty({\n as: 'section',\n styles: {\n display: 'contents',\n hide: {\n '': true,\n active: false,\n },\n },\n});\n"],"mappings":";;;;;AAUA,MAAaE,cAAcF,MAAM,EAC/BG,QAAQ;CACNC,SAAS;CACTC,MAAM;EACJ,IAAI;EACJ,oBAAoB;EACpB,kBAAkB;EAClB,mBAAmB;EACpB;CAODC,YAAY;EAAE,IAAI;EAAG,cAAc;EAAG;CACtCC,UAAU;EAAE,IAAI;EAAG,cAAc;EAAG;CACpCC,OAAO;CACPC,QAAQ;CACRC,UAAU;CAKVC,KAAK;EACHC,GAAG;EACHR,SAAS;EACTC,MAAM;GACJ,IAAI;GACJ,oCAAoC;GACrC;EACDQ,YAAY;GACV,IAAI;GACJ,oBAAoB;GACpB,kBAAkB;GAClB,mBAAmB;GACnB,0BAA0B;GAC3B;EACDH,UAAU;EACVI,QAAQ;GACN,IAAI;GACJ,yDAAyD;GACzD,4EACE;GACF,0EACE;GACF,2EACE;GACH;EAMDN,OAAO;GACL,IAAI;GACJ,oCAAoC;GACpC,mDAAmD;GACpD;EACDC,QAAQ;GACN,IAAI;GACJ,oCAAoC;GACpC,mDAAmD;GACpD;EACDM,SAAS;GACP,IAAI;GACJ,cAAc;GACf;EACDC,QAAQ;GACN,IAAI;GACJ,cAAc;GACf;EACDC,MAAM;GACJ,IAAI;GACJ,cAAc;GACf;EAGDX,YAAY;EACZC,UAAU;EAEVW,aAAa;EACb,uBAAuB;GACrB,IAAI;GACJ,cAAc;GAChB;EACD;CAKDC,QAAQ;EACNP,GAAG;EACHR,SAAS;EACTS,YAAY;EACZO,cAAc;EACdd,YAAY;EACZe,WAAW;EACXN,SAAS;GACP,IAAI;GACJ,gBAAgB;GAChB,qDAAqD;GACtD;EACDO,KAAK;GACH,IAAI;GACJ,gBAAgB;GACjB;EACDR,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,kDAAkD;GACpD;EACD;CAKDS,QAAQ;EACNX,GAAG;EACHR,SAAS;EACTS,YAAY;EACZO,cAAc;EACdd,YAAY;EACZe,WAAW;EACXN,SAAS;GACP,IAAI;GACJ,gBAAgB;GAChB,qDAAqD;GACtD;EACDO,KAAK;GACH,IAAI;GACJ,gBAAgB;GACjB;EACDR,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,kDAAkD;GACpD;EACD;CAGDU,eAAe;EACbZ,GAAG;EACHa,UAAU;EACVrB,SAAS;EACTG,UAAU;EACVD,YAAY;EACZE,OAAO;GACL,IAAI;GACJ,oCAAoC;GACrC;EACDC,QAAQ;GACN,IAAI;GACJ,oCAAoC;GACrC;EACDC,UAAU;GACR,IAAI;GACJ,cAAc;GAChB;EACD;CAEDgB,QAAQ;EACNd,GAAG;EACHa,UAAU;EACVrB,SAAS;EACTM,UAAU;GACR,IAAI;GACJ,oCAAoC;GACpC,cAAc;GACf;EACDiB,WAAW;EACXpB,UAAU;EACVC,OAAO;EAEPO,SAAS;GACP,IAAI;GACJ,cAAc;GACf;EACDa,QAAQ;GACN,IAAI;GACJ,cAAc;GACf;EAGDC,MAAM;GACJ,IAAI;GACJ,oCACE;GACH;EAEDC,YACE;EAGF,oBAAoB;GAClB,IAAI;GACJ,cAAc;GACf;EACD,kBAAkB;GAChB,IAAI;GACJ,YAAY;GACd;EACD;CAEDC,SAAS;EACPnB,GAAG;EACHa,UAAU;EACVrB,SAAS;EAOT4B,WAAW;EACX3B,MAAM;GACJ,IAAI;GACJ,oCAAoC;GACrC;EACD4B,iBAAiB;GACf,IAAI;GACJ,cAAc;GACf;EACDC,cAAc;GACZ,IAAI;GACJ,mDAAmD;GACpD;EACDZ,KAAK;GACH,IAAI;GACJ,gBAAgB;GAChB,eAAe;GACf,cAAc;GAKd,qEACE;GACH;EACDF,cAAc;EACdV,UAAU;EACVF,OAAO;GACL,IAAI;GACJ,cAAc;GACd,oCAAoC;GACrC;EACDC,QAAQ;GACN,IAAI;GACJ,oCAAoC;GACrC;EAKDM,SAAS;GACP,IAAI;GACJ,oCAAoC;GACpC,qEACE;GACH;EAKD,oBAAoB;GAClB,IAAI;GACJ,8BAA8B;GAC9B,qEACE;GACJ;EACD;CAGDoB,OAAO;EACL,IAAI;EACJ,eAAe;EACf,cAAc;EACd,eAAe;EACf,cAAc;EACd,eAAe;EAChB;CAKDC,WAAW;EACTxB,GAAG;EACHa,UAAU;EACVY,QAAQ;GACN,IAAI;GACJ,oCAAoC;GACrC;EACDC,KAAK;GACH,IAAI;GACJ,oCAAoC;GACrC;EACDC,MAAM;GACJ,IAAI;GACJ,oCAAoC;GACrC;EACDC,OAAO;GACL,IAAI;GACJ,oCAAoC;GACrC;EACD/B,QAAQ;GACN,IAAI;GACJ,oCAAoC;GACrC;EACDD,OAAO;GACL,IAAI;GACJ,oCAAoC;GACrC;EACDQ,QAAQ;EACRC,MAAM;EACNwB,SAAS;GACP,IAAI;GACJ,uBAAuB;GACxB;EACDX,YAAY;EACZY,eAAe;EACjB;CACF,EACD,CAAC;AAMF,MAAaC,aAAa3C,MAAMC,OAAM;CACpC2C,IAAI;CACJzC,QAAQ;EACNa,QAAQ;GACN,IAAI;GACJ,6BAA6B;GAC7B,eAAe;GACf,kCAAkC;GAClC,gCAAgC;GAChC,iCAAiC;GAClC;EACD6B,OAAO;GACL,IAAI;GACJ,uCAAuC;GACvC,2CAA2C;GAC3CC,UAAU;GACX;EACD7B,MAAM;GACJ,IAAI;GACJ,0BAA0B;GAC1B,aAAa;GACb,uBAAuB;GACvB,wBAAwB;GACxB,uCAAuC;GAEvC,gBAAgB;GACjB;EACDH,QAAQ;GACN,IAAI;GACJ,aAAa;GACd;EACDiC,QAAQ;GACN,IAAI;GACJ,eAAe;GAChB;EACDC,QAAQ;GACN,IAAI;GACJ,2BACE;GACFC,SAAS;GACT,yBAAyB;GACzB,mDACE;GACH;EACDC,SAAS;EACT9B,cAAc,EAEZ,cAAc,UACf;EACD+B,cAAc,EAMZ,cACE,4IACH;EAID,qBAAqB;GACnB,IAAI;GACJ,wBAAwB;GACxB,2CACE;GACF,yCACE;GACF,0CACE;GACF,cAAc;GACf;EAED,uBAAuB;GACrB,IAAI;GACJ,qBAAqB;GACrB,eAAe;GAChB;EACD,wBAAwB;GACtB,IAAI;GACJ,mBAAmB;GACnB,eAAe;GAChB;EACDC,OAAO,EACL/B,WAAW;GACT,IAAI;GACJ,cAAc;GACd,wEACE;GACJ,EACD;EACDgC,SAAS,EACPvB,YAAY,OACd;EACF;CACD,CAAC;AAMF,MAAawB,eAAetD,MAAM,EAChCG,QAAQ;CACNsB,UAAU;CACVrB,SAAS;CACTwB,QAAQ;EACN,IAAI;EAGJ,gBAAgB;EAIhB,qDAAqD;EACtD;CACDd,QAAQ;EACN,IAAI;EACJ,aAAa;EACb,kDAAkD;EACnD;CACDyC,QAAQ;EACN,IAAI;EACJC,WAAW;EACXC,UAAU;EACZ;CACF,EACD,CAAC;AASF,MAAaC,uBAAuB1D,MAAM,EACxCG,QAAQ;CACNwD,QAAQ;CACRlC,UAAU;CACViB,eAAe;CACfD,SAAS;EACP,IAAI;EACJ,eAAe;EAChB;CACDxB,MAAM;CACNT,OAAO;EACL,IAAI;EACJ,oCAAoC;EACrC;CACDC,QAAQ;EACN,IAAI;EACJ,oCAAoC;EACrC;CACD6B,KAAK;EACH,IAAI;EACJ,oCAAoC;EACpC,+CAA+C;EAChD;CACDD,QAAQ;EACN,IAAI;EACJ,oCAAoC;EACpC,8CAA8C;EAC/C;CACDE,MAAM;EACJ,IAAI;EACJ,gDAAgD;EAChD,oCAAoC;EACrC;CACDC,OAAO;EACL,IAAI;EACJ,+CAA+C;EAC/C,oCAAoC;EACtC;CACF,EACD,CAAC;AASF,MAAaoB,sBAAsB5D,MAAM,EACvCG,QAAQ;CACNsB,UAAU;CACVY,QAAQ;EACN,IAAI;EACJ,uDAAuD;EACxD;CACDC,KAAK;EACH,IAAI;EACJ,oBAAoB;EACrB;CACDC,MAAM;EACJ,IAAI;EACJ,mBAAmB;EACpB;CACDC,OAAO;EACL,IAAI;EACJ,kBAAkB;EACnB;CACD/B,QAAQ;EACN,IAAI;EACJ,oCAAoC;EACrC;CACDD,OAAO;EACL,IAAI;EACJ,oCAAoC;EACrC;CACDS,MAAM;CAGNa,YACE;CACFY,eAAe;CACjB,EACD,CAAC;AAMF,MAAamB,kBAAkB7D,MAAM;CACnC4C,IAAI;CACJzC,QAAQ;EACNC,SAAS;EACT0D,MAAM;GACJ,IAAI;GACJC,QAAQ;GACV;EACF;CACD,CAAC"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { useState } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | Cube Dev Team */
 import { chainRaf } from "../../../utils/raf.js";
 import { c } from "react-compiler-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
 import { CalendarPanel } from "./CalendarPanel.js";
 import { c } from "react-compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | Cube Dev Team */
 import { CALENDAR_CELL_STYLES } from "./styled.js";
 import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | Cube Dev Team */
 import { getWeekNumber } from "../../fields/DatePicker/period.js";
 import { CalendarCell } from "./CalendarCell.js";
 import { c } from "react-compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { Space } from "../../layout/Space.js";
 import { RightIcon } from "../../../icons/RightIcon.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
 import { CalendarPanel } from "./CalendarPanel.js";
 import { c } from "react-compiler-runtime";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | Cube Dev Team */
 import { Icon } from "../../../icons/Icon.js";
 import { c } from "react-compiler-runtime";
 import { mergeStyles, tasty } from "@tenphi/tasty";

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

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

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | Cube Dev Team */
 import { AlertDialogZone } from "./AlertDialogZone.js";
 import { c } from "react-compiler-runtime";
 import { createContext, useContext, useRef, useState } from "react";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | 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";
@@ -7,7 +7,6 @@ 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 { useContentOverflow } from "./use-content-overflow.js";
 import { c } from "react-compiler-runtime";
 import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, FLOW_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect } from "react";
@@ -168,7 +167,6 @@ const DialogContent = forwardRef(function DialogContent(props, ref) {
 			}
 		});
 	}, [contextProps.isOpen]);
-	const contentOverflows = useContentOverflow(domRef);
 	let slots = {
 		title: {
 			level: 2,
@@ -196,21 +194,14 @@ const DialogContent = forwardRef(function DialogContent(props, ref) {
 				border: "bottom"
 			}
 		},
-		footer: {
-			mods: { "content-overflow": contentOverflows },
-			styles: {
-				display: "flex",
-				gap: "1x",
-				flow: "row-reverse",
-				placeItems: "baseline stretch",
-				placeContent: "space-between",
-				padding: "$dialog-footer-v $dialog-padding-h",
-				border: {
-					"": false,
-					"content-overflow": "top"
-				}
-			}
-		},
+		footer: { styles: {
+			display: "flex",
+			gap: "1x",
+			flow: "row-reverse",
+			placeItems: "baseline stretch",
+			placeContent: "space-between",
+			padding: "$dialog-footer-v $dialog-padding-h"
+		} },
 		buttonGroup: { styles: { flow: "row-reverse" } }
 	};
 	return /* @__PURE__ */ jsxs(DialogElement, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.js","names":["createFocusManager","useObjectRef","BASE_STYLES","BaseProps","BaseStyleProps","BLOCK_STYLES","BlockStyleProps","DIMENSION_STYLES","DimensionStyleProps","FLOW_STYLES","Styles","tasty","forwardRef","ReactElement","Ref","useEffect","useMemo","AriaDialogProps","DismissButton","FocusScope","useDialog","useI18n","CloseIcon","mergeProps","SlotProvider","extractStyles","ItemButton","useOpenTransitionContext","useDialogContext","useContentOverflow","STYLES_LIST","DialogElement","as","styles","display","flow","fill","pointerEvents","outline","position","width","height","gap","border","radius","shadow","top","CloseButton","qa","type","right","sizeMap","S","M","L","sizePxMap","small","medium","large","CubeDialogProps","Omit","size","isDismissable","onDismiss","arg","closeIcon","closeButtonStyles","role","Dialog","props","ref","$","_c","transitionContext","isEntered","transitionState","context","t0","content","shouldContainFocus","isOpen","t1","shouldRestoreFocus","t2","DialogContent","HTMLDivElement","contextProps","children","onClose","style","otherProps","toUpperCase","t","domRef","dialogProps","titleProps","dismissButton","setTimeout","current","activeElement","document","isFocusOutsideDialog","contains","isFocusOnDialogShell","priorityElement","querySelector","HTMLElement","focus","focusManager","focusFirst","tabbable","contentOverflows","slots","title","level","preset","flexGrow","padding","header","ellipsis","placeItems","placeContent","footer","mods","buttonGroup","dismissable"],"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';\nimport { useContentOverflow } from './use-content-overflow';\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 // A `Form` placed directly here (`Dialog > Form > Content + Footer`) lays\n // itself out as this flex column — see `FormElement`. It is the form's own\n // state rather than a rule here, so the form's `styles` still win.\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 const contentOverflows = useContentOverflow(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 mods: { 'content-overflow': contentOverflows },\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 // A line only while the body scrolls: the footer then sits over\n // content that carries on beneath it, and the line is what says so.\n // Under a body that fits, the actions simply end it and a rule there\n // reads as clutter.\n border: {\n '': false,\n 'content-overflow': 'top',\n },\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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"}
1	+ {"version":3,"file":"Dialog.js","names":["createFocusManager","useObjectRef","BASE_STYLES","BaseProps","BaseStyleProps","BLOCK_STYLES","BlockStyleProps","DIMENSION_STYLES","DimensionStyleProps","FLOW_STYLES","Styles","tasty","forwardRef","ReactElement","Ref","useEffect","useMemo","AriaDialogProps","DismissButton","FocusScope","useDialog","useI18n","CloseIcon","mergeProps","SlotProvider","extractStyles","ItemButton","useOpenTransitionContext","useDialogContext","STYLES_LIST","DialogElement","as","styles","display","flow","fill","pointerEvents","outline","position","width","height","gap","border","radius","shadow","top","CloseButton","qa","type","right","sizeMap","S","M","L","sizePxMap","small","medium","large","CubeDialogProps","Omit","size","isDismissable","onDismiss","arg","closeIcon","closeButtonStyles","role","Dialog","props","ref","$","_c","transitionContext","isEntered","transitionState","context","t0","content","shouldContainFocus","isOpen","t1","shouldRestoreFocus","t2","DialogContent","HTMLDivElement","contextProps","children","onClose","style","otherProps","toUpperCase","t","domRef","dialogProps","titleProps","dismissButton","setTimeout","current","activeElement","document","isFocusOutsideDialog","contains","isFocusOnDialogShell","priorityElement","querySelector","HTMLElement","focus","focusManager","focusFirst","tabbable","slots","title","level","preset","flexGrow","padding","header","ellipsis","placeItems","placeContent","footer","buttonGroup","dismissable"],"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":";;;;;;;;;;;;;;;;;;AA+BA,MAAM6B,cAAc;CAClB,GAAG3B;CACH,GAAGK;CACH,GAAGF;CACH,GAAGI;CACJ;AAED,MAAMqB,gBAAgBnB,MAAM;CAC1BoB,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,MAAM;EACNC,eAAe;EACfC,SAAS;EACTC,UAAU;GACR,IAAI;GACJ,cAAc;GACf;EACDC,OAAO;GACL,IAAI;GACJ,mBAAmB;GACnB,2BAA2B;GAC3B,cAAc;GACf;EACDC,QAAQ;GACN,IAAI;GACJ,mBAAmB;GACnB,wCAAwC;GACxC,gBAAgB;GACjB;EACDC,KAAK;EACLC,QAAQ;GACN,IAAI;GACJ,gBAAgB;GACjB;EACDC,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,2BAA2B;GAC5B;EACDC,QAAQ;GACN,IAAI;GACJ,6BAA6B;GAC9B;EACDC,KAAK;GACH,IAAI;GACJ,cAAc;GACd,cAAc;GACf;EACD,2BAA2B;GACzB,IAAI;GACJ,gBAAgB;GACjB;EACD,6BAA6B;GAC3B,IAAI;GACJ,gBAAgB;GACjB;EACD,qBAAqB;GACnB,IAAI;GACJ,gBAAgB;GACjB;EACD,oBAAoB;GAClB,IAAI;GACJ,gBAAgB;GACjB;EACD,uBAAuB;GACrB,IAAI;GACJ,gBAAgB;GAClB;EACF;CACD,CAAC;AAEF,MAAMC,cAAcnC,MAAMe,aAAY;CACpCqB,IAAI;CACJC,MAAM;CACNhB,QAAQ;EACNM,UAAU;EACVO,KAAK;EACLI,OAAO;EACT;CACD,CAAC;AAEF,MAAMC,UAAU;CACdC,GAAG;CACHC,GAAG;CACHC,GAAG;CACJ;AACD,MAAMC,YAAY;CAChBC,OAAO;CACPC,QAAQ;CACRC,OAAO;CACR;;;;;AAwBD,MAAaU,SAASvD,WAAW,SAAAuD,OAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAM/B,MAAAE,YAF0B9C,0BAA0B,EAEjB+C,oBAAsB;CAEzD,MAAAC,UAAgB/C,kBAAkB;CAAC,IAAAgD;AAAA,KAAAN,EAAA,OAAAF,SAAAE,EAAA,OAAAD,KAAA;AAG1BO,OAAA,oBAAC;GAA2B,GAAKR;GAAYC;KAA1B,UAAiC;AAAAC,IAAA,KAAAF;AAAAE,IAAA,KAAAD;AAAAC,IAAA,KAAAM;OAAAA,MAAAN,EAAA;CAD7D,MAAAO,UACED;CAGF,MAAAE,qBACEL,aAAA,CAAc,CAACE,QAAOI,UAAWJ,QAAO3B,SAAU;CAQlC,MAAAgC,KAAAL,QAAOM,sBAAP;CAAkC,IAAAC;AAAA,KAAAZ,EAAA,OAAAO,WAAAP,EAAA,OAAAQ,sBAAAR,EAAA,OAAAU,IAAA;AADlDE,OAAA,oBAAC;GACe,cAAAF;GACLF,SAAAA;aAERD;IACU;AAAAP,IAAA,KAAAO;AAAAP,IAAA,KAAAQ;AAAAR,IAAA,KAAAU;AAAAV,IAAA,KAAAY;OAAAA,MAAAZ,EAAA;AAAA,QALbY;EAOF;AAEF,MAAMC,gBAAgBvE,WAAW,SAASuE,cACxCf,OACAC,KACA;CACA,IAAI,EAAErB,OAAO,SAAS,GAAGqC,iBAAiBzD,kBAAkB;CAE5D,IAAI,EACFmB,IACAuC,UACA1B,OAAO,KACPC,gBAAgBwB,aAAaxB,eAC7BC,YAAYuB,aAAaE,SACzBvB,WACAC,mBACAuB,OACA,GAAGC,eACDrB;AAEJR,QAAOV,QAAQU,KAAK8B,aAAa,KAAK9B;CAEtC,MAAM5B,SAAiBP,cAAcgE,YAAY5D,YAAY;CAE7D,MAAM,EAAE8D,MAAMtE,SAAS;CAEvB,IAAIuE,SAAS3F,aAAaoE,IAAI;CAC9B,IAAI,EAAEwB,aAAaC,eAAe1E,UAChCG,aAAW8D,cAAcjB,MAAM,EAC/BwB,OACD;CAID,IAAIG;AACJ,KAAI/C,SAAS,aAAaA,SAAS,OACjC+C,iBAAgB,oBAAC,iBAAyBjC,YAAa;AAczD/C,iBAAgB;AACd,MAAIsE,aAAaN,OACfiB,kBAAiB;AACf,OAAI,CAACJ,OAAOK,QAAS;GAErB,MAAMC,gBAAgBC,SAASD;GAC/B,MAAME,uBAAuB,CAACR,OAAOK,QAAQI,SAASH,cAAc;GACpE,MAAMI,uBAAuBJ,kBAAkBN,OAAOK;GAGtD,MAAMM,kBAAkBX,OAAOK,QAAQO,cACrC,gFACD;AAED,OAAID,oBAAoBH,wBAAwBE,uBAAuB;AACrEC,oBAAgBG,OAAO;AACvB;;AAGF,OAAIN,sBAIF;QAAI,CAFiBpG,mBAAmB4F,OAAO,CAE7BgB,WAAW,EAAEC,UAAU,MAAM,CAAC,CAC9CjB,QAAOK,QAAQS,OAAO;;IAG1B;IAEH,CAACrB,aAAaN,OAAO,CAAC;CAKzB,IAAI+B,QAAQ;EACVC,OAAO;GACLC,OAAO;GACPC,QAAQ;GACR,GAAGnB;GACJ;EACDjB,SAAS,EACP7C,QAAQ;GACNkF,UAAU;GACVC,SAAS;GACT1E,KAAK;GACLD,QAAQ;IACN,IAAI;IACJ,eAAe;IACjB;GACF,EACD;EACD4E,QAAQ;GACNC,UAAU;GACVrF,QAAQ;IACNC,SAAS;IACTC,MAAM;IACNO,KAAK;IACL6E,YAAY;IACZC,cAAc;IACdJ,SAAS,2BACPtD,gBAAgB,6BAA6B,oBAAmB;IAElEnB,QAAQ;IACV;GACD;EACD8E,QAAQ,EACNxF,QAAQ;GACNC,SAAS;GACTQ,KAAK;GACLP,MAAM;GACNoF,YAAY;GACZC,cAAc;GACdJ,SAAS;GACX,EACD;EACDM,aAAa,EACXzF,QAAQ,EACNE,MAAM,eACR,EACF;EACD;AAED,QACE,qBAAC;EACC,KAAK0D;EACL,WAAQ;EACR,WAAS7C,MAAM;EACPf;EACR,IAAG;EACH,GAAI6D;EACJ,MAAM,EAAE6B,aAAa7D,eAAe;EACpC,OAAO;GACL,iBAAiB,GAAGP,UAAUM,SAASN,UAAUC,MAAK;GACtD,GAAGiC;GACJ;EACD,aAAWxC;EACX,aAAWY;aAEVmC,eAED,qBAAC;GAAoBe;cAClBjD,iBACC,oBAAC;IACC,MAAMG,aAAa,oBAAC,aAAU,MAAM,KAAM;IAC1C,OAAO2B,EAAE,kBAAkB,UAAU;IACrC,eAAe7B,aAAaA,WAAW;KAE1C,EACAwB;IACW;GACA;EAElB"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | 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 CHANGED Viewed

@@ -1,11 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Button } from "../../actions/Button/Button.js";
 import { ButtonGroup } from "../../actions/ButtonGroup/ButtonGroup.js";
 import { useDialogContext } from "./context.js";
 import { Content } from "../../content/Content.js";
-import { Footer } from "../../content/Footer.js";
 import { Header } from "../../content/Header.js";
 import { Dialog } from "./Dialog.js";
 import { isModernFormController } from "../../form/Form/backend.js";
@@ -48,7 +47,7 @@ function LegacyDialogForm(props) {
 		children: [/* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(_Title, {
 			ellipsis: true,
 			children: title
-		}) }), /* @__PURE__ */ jsxs(_Form, {
+		}) }), /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(_Form, {
 			qa: qa || "DialogForm",
 			form,
 			name,
@@ -70,7 +69,7 @@ function LegacyDialogForm(props) {
 			},
 			onSubmitFailed,
 			onValuesChange,
-			children: [/* @__PURE__ */ jsx(Content, { children: typeof children === "function" ? children(onLocalDismiss) : children }), !noActions ? /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [/* @__PURE__ */ jsx(_SubmitButton, {
+			children: [typeof children === "function" ? children(onLocalDismiss) : children, !noActions ? /* @__PURE__ */ jsxs(ButtonGroup, { children: [/* @__PURE__ */ jsx(_SubmitButton, {
 				qa: `${qa || ""}SubmitButton`,
 				theme: danger ? "danger" : void 0,
 				label: t("dialogForm.submit", "Submit"),
@@ -80,8 +79,8 @@ function LegacyDialogForm(props) {
 				label: t("dialogForm.cancel", "Cancel"),
 				onPress: onLocalDismiss,
 				...cancelProps || {}
-			})] }) }) : void 0]
-		})]
+			})] }) : void 0]
+		}) })]
 	});
 }

package/dist/components/overlays/Dialog/DialogForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DialogForm.js","names":["useI18n","Button","ButtonGroup","Content","~~Footer","~~Header","Title","isModernFormController","Form","SubmitButton","useForm","useDialogContext","CubeDialogProps","Dialog","ModernDialogForm","ReactElement","CubeButtonProps","CubeFormProps","ModernFormProps","CubeSubmitButtonProps","FieldTypes","CubeDialogFormProps","Omit","T","danger","submitProps","cancelProps","preserve","noActions","title","children","onLocalDismiss","CubeDialogFormRef","open","close","ModernDialogFormProps","DialogForm","props","$","_c","t0","form","LegacyDialogForm","qa","name","defaultValues","onDismiss","onSubmit","onSubmitFailed","onValuesChange","labelStyles","labelPosition","requiredMark","necessityIndicator","isReadOnly","isInvalid","isValid","validateTrigger","size","closeIcon","dialogProps","t","onClose","setTimeout","resetFields","data","undefined"],"sources":["../../../../src/components/overlays/Dialog/DialogForm.tsx"],"sourcesContent":["import { useI18n } from '../../../i18n';\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 { Title } from '../../content/Title';\nimport { isModernFormController } from '../../form/Form/backend';\nimport { Form } from '../../form/Form/Form';\nimport { SubmitButton } from '../../form/Form/SubmitButton/SubmitButton';\nimport { useForm } from '../../form/Form/use-form';\n\nimport { useDialogContext } from './context';\nimport { CubeDialogProps, Dialog } from './Dialog';\nimport { ModernDialogForm } from './ModernDialogForm';\n\nimport type { ReactElement } from 'react';\nimport type { CubeButtonProps } from '../../actions/Button/Button';\nimport type { CubeFormProps } from '../../form/Form/Form';\nimport type { ModernFormProps } from '../../form/Form/ModernFormRoot';\nimport type { CubeSubmitButtonProps } from '../../form/Form/SubmitButton/SubmitButton';\nimport type { FieldTypes } from '../../form/Form/types';\n\nexport interface CubeDialogFormProps<T extends FieldTypes = FieldTypes>\n extends Omit<CubeDialogProps, 'children'>,\n Omit<CubeFormProps<T>, 'role' \| 'children'> {\n /** Whether the submit button has a `danger` theme /\n danger?: boolean;\n /* Properties for submit button. Use `label` to change text. /\n submitProps?: CubeButtonProps;\n /* Properties for cancel button. Use `label` to change text. /\n cancelProps?: CubeButtonProps;\n /* Preserve form values after submission or dismissal. /\n preserve?: boolean;\n /* Whether to hide action button so developer can manually specify them /\n noActions?: boolean;\n /* The title of the dialog /\n title?: string;\n /* Children nodes or render function /\n children?:\n \| CubeFormProps['children']\n \| ((onLocalDismiss: () => void) => CubeFormProps['children']);\n}\n\nexport interface CubeDialogFormRef {\n open: () => void;\n close: () => void;\n}\n\n/\n DialogForms are a specific type of Dialog. They contain forms to fill.\n /\nexport interface ModernDialogFormProps<T extends FieldTypes = FieldTypes>\n extends Omit<CubeDialogFormProps<T>, keyof CubeFormProps<T> \| 'submitProps'>,\n Omit<ModernFormProps<T>, 'role' \| 'children'> {\n children?: CubeDialogFormProps<T>['children'];\n submitProps?: Omit<CubeSubmitButtonProps<T>, 'form'>;\n}\n\nexport function DialogForm<T extends FieldTypes = FieldTypes>(\n props: CubeDialogFormProps<T>,\n): ReactElement;\nexport function DialogForm<T extends FieldTypes = FieldTypes>(\n props: ModernDialogFormProps<T>,\n): ReactElement;\nexport function DialogForm<T extends FieldTypes = FieldTypes>(\n props: CubeDialogFormProps<T> \| ModernDialogFormProps<T>,\n): ReactElement {\n return isModernFormController(props.form) ? (\n <ModernDialogForm {...(props as ModernDialogFormProps<T>)} />\n ) : (\n <LegacyDialogForm {...(props as CubeDialogFormProps<T>)} />\n );\n}\n\nfunction LegacyDialogForm<T extends FieldTypes>(props: CubeDialogFormProps<T>) {\n 'use no memo';\n // Legacy form state is mutable; preserve its render-time reads until migration.\n\n let {\n qa,\n name,\n form,\n defaultValues,\n onDismiss,\n onSubmit,\n onSubmitFailed,\n onValuesChange,\n labelStyles,\n labelPosition,\n requiredMark,\n necessityIndicator,\n isReadOnly,\n isInvalid,\n isValid,\n validateTrigger,\n children,\n danger,\n noActions,\n submitProps,\n cancelProps,\n preserve,\n title,\n size,\n closeIcon,\n ...dialogProps\n } = props;\n\n [form] = useForm(form);\n\n const { t } = useI18n();\n const { onClose } = useDialogContext();\n\n function onLocalDismiss() {\n onClose?.();\n onDismiss?.();\n\n if (!preserve) {\n // let animations finish before resetting the form\n setTimeout(() => {\n form?.resetFields();\n }, 250);\n }\n }\n\n return (\n <Dialog\n qa={`${qa \|\| ''}Dialog`}\n size={size}\n closeIcon={closeIcon}\n {...dialogProps}\n >\n <Header>\n <Title ellipsis>{title}</Title>\n </Header>\n ~~{/\n The form wraps BOTH slots rather than sitting inside `~~Content~~`, so the\~~n actions can live in a pinned `Footer` while the body scrolls. They still\n have to be inside the `<form>` for submit to work, which is why the form\n is the outer one of the two (CUB-4920). A form placed directly in a\n `Dialog` lays itself out as the dialog's column (see `FormElement`).\n */}\n <Form<T>\n qa={qa \|\| 'DialogForm'}\n form={form}\n name={name}\n defaultValues={defaultValues}\n labelStyles={labelStyles}\n labelPosition={labelPosition}\n requiredMark={requiredMark}\n necessityIndicator={necessityIndicator}\n isReadOnly={isReadOnly}\n isInvalid={isInvalid}\n isValid={isValid}\n validateTrigger={validateTrigger}\n onSubmit={async (data) => {\n await onSubmit?.(data);\n\n onClose?.();\n\n if (!preserve) {\n // let animations finish before resetting the form\n setTimeout(() => {\n form.resetFields();\n }, 250);\n }\n }}\n onSubmitFailed={onSubmitFailed}\n onValuesChange={onValuesChange}\n ~~>\n~~ ~~<Content~~>\n {typeof children === 'function' ? children(onLocalDismiss) : children}\n ~~</Content>\n~~\n {!noActions ? (\n ~~<Footer>\n~~ <ButtonGroup>\n <SubmitButton\n qa={`${qa \|\| ''}SubmitButton`}\n theme={danger ? 'danger' : undefined}\n label={t('dialogForm.submit', 'Submit')}\n {...(submitProps \|\| {})}\n />\n <Button\n qa={`${qa \|\| ''}CancelButton`}\n label={t('dialogForm.cancel', 'Cancel')}\n onPress={onLocalDismiss}\n {...(cancelProps \|\| {})}\n />\n </ButtonGroup>\n ~~</Footer>\n~~ ) : undefined}\n </Form>\n </Dialog>\n );\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;AAiEA~~,~~SAAOoC~~,WAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAD,OAAA;AAGEG,OAAAjC,uBAAuB8B,MAAKI,KAIlC,GAHC,oBAAC,oBAAgB,GAAMJ,QAGxB,GADC,oBAAC,oBAAgB,GAAMA,QACxB;AAAAC,IAAA,KAAAD;AAAAC,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AAAA,QAJME;;AAOT,SAASE,iBAAuCL,OAA+B;AAC7E;CAGA,IAAI,EACFM,IACAC,MACAH,MACAI,eACAC,WACAC,UACAC,gBACAC,gBACAC,aACAC,eACAC,cACAC,oBACAC,YACAC,WACAC,SACAC,iBACA3B,UACAN,QACAI,WACAH,aACAC,aACAC,UACAE,OACA6B,MACAC,WACA,GAAGC,gBACDvB;AAEJ,EAACI,QAAQ/B,QAAQ+B,KAAK;CAEtB,MAAM,EAAEoB,~~MAAM7D~~,SAAS;CACvB,MAAM,~~EAAE8D~~,YAAYnD,kBAAkB;CAEtC,SAASoB,iBAAiB;AACxB+B,aAAW;AACXhB,eAAa;AAEb,MAAI,CAACnB,SAEHoC,kBAAiB;AACftB,SAAMuB,aAAa;KAClB,IAAI;;AAIX,QACE,qBAAC;EACC,IAAI,GAAGrB,MAAM,GAAE;EACTe;EACKC;EACX,GAAIC;aAEJ,oBAAC,oBACC,oBAAC;GAAM;aAAU/B;IAAa,GACxB,~~EAQR~~,qBAAC;GACC,IAAIc,MAAM;GACJF;GACAG;GACSC;GACFK;GACEC;GACDC;GACMC;GACRC;GACDC;GACFC;GACQC;GACjB,UAAU,OAAOQ,SAAS;AACxB,UAAMlB,WAAWkB,KAAK;AAEtBH,eAAW;AAEX,QAAI,CAACnC,SAEHoC,kBAAiB;AACftB,UAAKuB,aAAa;OACjB,IAAI;;GAGKhB;GACAC;~~cAEhB~~,~~oBAAC,qBACE,~~OAAOnB,aAAa,aAAaA,SAASC,eAAe,GAAGD,~~WACtD~~,~~EAER,~~CAACF,YACA,~~oBAAC,oBACC,~~qBAAC,0BACC,oBAAC;IACC,IAAI,GAAGe,MAAM,GAAE;IACf,OAAOnB,SAAS,WAAW0C;IAC3B,OAAOL,EAAE,qBAAqB,SAAS;IACvC,GAAKpC,eAAe,EAAG;KAAC,EAE1B,oBAAC;IACC,IAAI,GAAGkB,MAAM,GAAE;IACf,OAAOkB,EAAE,qBAAqB,SAAS;IACvC,SAAS9B;IACT,GAAKL,eAAe,EAAG;KAAC,~~IAEf~~,~~GACN,GACPwC~~;IACA;~~GACC~~"}
1	+ {"version":3,"file":"DialogForm.js","names":["useI18n","Button","ButtonGroup","Content","Header","Title","isModernFormController","Form","SubmitButton","useForm","useDialogContext","CubeDialogProps","Dialog","ModernDialogForm","ReactElement","CubeButtonProps","CubeFormProps","ModernFormProps","CubeSubmitButtonProps","FieldTypes","CubeDialogFormProps","Omit","T","danger","submitProps","cancelProps","preserve","noActions","title","children","onLocalDismiss","CubeDialogFormRef","open","close","ModernDialogFormProps","DialogForm","props","$","_c","t0","form","LegacyDialogForm","qa","name","defaultValues","onDismiss","onSubmit","onSubmitFailed","onValuesChange","labelStyles","labelPosition","requiredMark","necessityIndicator","isReadOnly","isInvalid","isValid","validateTrigger","size","closeIcon","dialogProps","t","onClose","setTimeout","resetFields","data","undefined"],"sources":["../../../../src/components/overlays/Dialog/DialogForm.tsx"],"sourcesContent":["import { useI18n } from '../../../i18n';\nimport { Button } from '../../actions/Button/Button';\nimport { ButtonGroup } from '../../actions/ButtonGroup/ButtonGroup';\nimport { Content } from '../../content/Content';\nimport { Header } from '../../content/Header';\nimport { Title } from '../../content/Title';\nimport { isModernFormController } from '../../form/Form/backend';\nimport { Form } from '../../form/Form/Form';\nimport { SubmitButton } from '../../form/Form/SubmitButton/SubmitButton';\nimport { useForm } from '../../form/Form/use-form';\n\nimport { useDialogContext } from './context';\nimport { CubeDialogProps, Dialog } from './Dialog';\nimport { ModernDialogForm } from './ModernDialogForm';\n\nimport type { ReactElement } from 'react';\nimport type { CubeButtonProps } from '../../actions/Button/Button';\nimport type { CubeFormProps } from '../../form/Form/Form';\nimport type { ModernFormProps } from '../../form/Form/ModernFormRoot';\nimport type { CubeSubmitButtonProps } from '../../form/Form/SubmitButton/SubmitButton';\nimport type { FieldTypes } from '../../form/Form/types';\n\nexport interface CubeDialogFormProps<T extends FieldTypes = FieldTypes>\n extends Omit<CubeDialogProps, 'children'>,\n Omit<CubeFormProps<T>, 'role' \| 'children'> {\n /** Whether the submit button has a `danger` theme /\n danger?: boolean;\n /* Properties for submit button. Use `label` to change text. /\n submitProps?: CubeButtonProps;\n /* Properties for cancel button. Use `label` to change text. /\n cancelProps?: CubeButtonProps;\n /* Preserve form values after submission or dismissal. /\n preserve?: boolean;\n /* Whether to hide action button so developer can manually specify them /\n noActions?: boolean;\n /* The title of the dialog /\n title?: string;\n /* Children nodes or render function /\n children?:\n \| CubeFormProps['children']\n \| ((onLocalDismiss: () => void) => CubeFormProps['children']);\n}\n\nexport interface CubeDialogFormRef {\n open: () => void;\n close: () => void;\n}\n\n/\n DialogForms are a specific type of Dialog. They contain forms to fill.\n */\nexport interface ModernDialogFormProps<T extends FieldTypes = FieldTypes>\n extends Omit<CubeDialogFormProps<T>, keyof CubeFormProps<T> \| 'submitProps'>,\n Omit<ModernFormProps<T>, 'role' \| 'children'> {\n children?: CubeDialogFormProps<T>['children'];\n submitProps?: Omit<CubeSubmitButtonProps<T>, 'form'>;\n}\n\nexport function DialogForm<T extends FieldTypes = FieldTypes>(\n props: CubeDialogFormProps<T>,\n): ReactElement;\nexport function DialogForm<T extends FieldTypes = FieldTypes>(\n props: ModernDialogFormProps<T>,\n): ReactElement;\nexport function DialogForm<T extends FieldTypes = FieldTypes>(\n props: CubeDialogFormProps<T> \| ModernDialogFormProps<T>,\n): ReactElement {\n return isModernFormController(props.form) ? (\n <ModernDialogForm {...(props as ModernDialogFormProps<T>)} />\n ) : (\n <LegacyDialogForm {...(props as CubeDialogFormProps<T>)} />\n );\n}\n\nfunction LegacyDialogForm<T extends FieldTypes>(props: CubeDialogFormProps<T>) {\n 'use no memo';\n // Legacy form state is mutable; preserve its render-time reads until migration.\n\n let {\n qa,\n name,\n form,\n defaultValues,\n onDismiss,\n onSubmit,\n onSubmitFailed,\n onValuesChange,\n labelStyles,\n labelPosition,\n requiredMark,\n necessityIndicator,\n isReadOnly,\n isInvalid,\n isValid,\n validateTrigger,\n children,\n danger,\n noActions,\n submitProps,\n cancelProps,\n preserve,\n title,\n size,\n closeIcon,\n ...dialogProps\n } = props;\n\n [form] = useForm(form);\n\n const { t } = useI18n();\n const { onClose } = useDialogContext();\n\n function onLocalDismiss() {\n onClose?.();\n onDismiss?.();\n\n if (!preserve) {\n // let animations finish before resetting the form\n setTimeout(() => {\n form?.resetFields();\n }, 250);\n }\n }\n\n return (\n <Dialog\n qa={`${qa \|\| ''}Dialog`}\n size={size}\n closeIcon={closeIcon}\n {...dialogProps}\n >\n <Header>\n <Title ellipsis>{title}</Title>\n </Header>\n <Content>\n <Form<T>\n qa={qa \|\| 'DialogForm'}\n form={form}\n name={name}\n defaultValues={defaultValues}\n labelStyles={labelStyles}\n labelPosition={labelPosition}\n requiredMark={requiredMark}\n necessityIndicator={necessityIndicator}\n isReadOnly={isReadOnly}\n isInvalid={isInvalid}\n isValid={isValid}\n validateTrigger={validateTrigger}\n onSubmit={async (data) => {\n await onSubmit?.(data);\n\n onClose?.();\n\n if (!preserve) {\n // let animations finish before resetting the form\n setTimeout(() => {\n form.resetFields();\n }, 250);\n }\n }}\n onSubmitFailed={onSubmitFailed}\n onValuesChange={onValuesChange}\n >\n {typeof children === 'function' ? children(onLocalDismiss) : children}\n\n {!noActions ? (\n <ButtonGroup>\n <SubmitButton\n qa={`${qa \|\| ''}SubmitButton`}\n theme={danger ? 'danger' : undefined}\n label={t('dialogForm.submit', 'Submit')}\n {...(submitProps \|\| {})}\n />\n <Button\n qa={`${qa \|\| ''}CancelButton`}\n label={t('dialogForm.cancel', 'Cancel')}\n onPress={onLocalDismiss}\n {...(cancelProps \|\| {})}\n />\n </ButtonGroup>\n ) : undefined}\n </Form>\n </Content>\n </Dialog>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgEA,SAAOmC,WAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAD,OAAA;AAGEG,OAAAjC,uBAAuB8B,MAAKI,KAIlC,GAHC,oBAAC,oBAAgB,GAAMJ,QAGxB,GADC,oBAAC,oBAAgB,GAAMA,QACxB;AAAAC,IAAA,KAAAD;AAAAC,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AAAA,QAJME;;AAOT,SAASE,iBAAuCL,OAA+B;AAC7E;CAGA,IAAI,EACFM,IACAC,MACAH,MACAI,eACAC,WACAC,UACAC,gBACAC,gBACAC,aACAC,eACAC,cACAC,oBACAC,YACAC,WACAC,SACAC,iBACA3B,UACAN,QACAI,WACAH,aACAC,aACAC,UACAE,OACA6B,MACAC,WACA,GAAGC,gBACDvB;AAEJ,EAACI,QAAQ/B,QAAQ+B,KAAK;CAEtB,MAAM,EAAEoB,MAAM5D,SAAS;CACvB,MAAM,EAAE6D,YAAYnD,kBAAkB;CAEtC,SAASoB,iBAAiB;AACxB+B,aAAW;AACXhB,eAAa;AAEb,MAAI,CAACnB,SAEHoC,kBAAiB;AACftB,SAAMuB,aAAa;KAClB,IAAI;;AAIX,QACE,qBAAC;EACC,IAAI,GAAGrB,MAAM,GAAE;EACTe;EACKC;EACX,GAAIC;aAEJ,oBAAC,oBACC,oBAAC;GAAM;aAAU/B;IAAa,GACxB,EACR,oBAAC,qBACC,qBAAC;GACC,IAAIc,MAAM;GACJF;GACAG;GACSC;GACFK;GACEC;GACDC;GACMC;GACRC;GACDC;GACFC;GACQC;GACjB,UAAU,OAAOQ,SAAS;AACxB,UAAMlB,WAAWkB,KAAK;AAEtBH,eAAW;AAEX,QAAI,CAACnC,SAEHoC,kBAAiB;AACftB,UAAKuB,aAAa;OACjB,IAAI;;GAGKhB;GACAC;cAEf,OAAOnB,aAAa,aAAaA,SAASC,eAAe,GAAGD,UAE5D,CAACF,YACA,qBAAC,0BACC,oBAAC;IACC,IAAI,GAAGe,MAAM,GAAE;IACf,OAAOnB,SAAS,WAAW0C;IAC3B,OAAOL,EAAE,qBAAqB,SAAS;IACvC,GAAKpC,eAAe,EAAG;KAAC,EAE1B,oBAAC;IACC,IAAI,GAAGkB,MAAM,GAAE;IACf,OAAOkB,EAAE,qBAAqB,SAAS;IACvC,SAAS9B;IACT,GAAKL,eAAe,EAAG;KAAC,IAEd,GACZwC;IACA,GACC;GACF"}

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

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