@cube-dev/ui-kit 0.0.0-canary-05c61de → 0.0.0-canary-5b75dce

package/dist/components/content/ItemBadge/ItemBadge.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
 import { CURRENT_CLEAR_STYLES, CURRENT_OUTLINE_STYLES, CURRENT_PRIMARY_STYLES, DANGER_CLEAR_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, ITEM_ACTION_BASE_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES } from "../../../data/item-themes.js";
 import { CheckIcon } from "../../../icons/CheckIcon.js";

package/dist/components/content/ItemCard/ItemCard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { _Item } from "../Item/Item.js";
 import { c } from "react/compiler-runtime";

package/dist/components/content/Layout/GridLayout.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { _Layout } from "./Layout.js";
 import { _LayoutContent } from "./LayoutContent.js";
 import { _LayoutBlock } from "./LayoutBlock.js";

package/dist/components/content/Layout/Layout.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { isDevEnv } from "../../../utils/is-dev-env.js";
@@ -116,17 +116,26 @@ function LayoutInner(props) {
 		});
 		return () => cancelAnimationFrame(frameId);
 	}, [markReady]);
+	const hasBox = (layoutState?.containerWidth ?? 0) > 0 || (layoutState?.containerHeight ?? 0) > 0;
+	const isHeightCheckedRef = useRef(false);
+	const isCollapseCheckedRef = useRef(false);
 	useEffect(() => {
-		if (isReady && localRef.current && localRef.current.offsetHeight === 0) setIsAutoHeight(true);
-	}, [isReady]);
+		const element = localRef.current;
+		if (!isReady || !element || isHeightCheckedRef.current) return;
+		if (!isShown(element)) return;
+		isHeightCheckedRef.current = true;
+		if (element.offsetHeight === 0) setIsAutoHeight(true);
+	}, [isReady, hasBox]);
 	useEffect(() => {
-		if (isAutoHeight && localRef.current) {
-			const frameId_0 = requestAnimationFrame(() => {
-				if (localRef.current && localRef.current.offsetHeight === 0) setIsCollapsed(true);
-			});
-			return () => cancelAnimationFrame(frameId_0);
-		}
-	}, [isAutoHeight]);
+		if (!isAutoHeight || isCollapseCheckedRef.current) return;
+		const frameId_0 = requestAnimationFrame(() => {
+			const element_0 = localRef.current;
+			if (!element_0 || !isShown(element_0)) return;
+			isCollapseCheckedRef.current = true;
+			if (element_0.offsetHeight === 0) setIsCollapsed(true);
+		});
+		return () => cancelAnimationFrame(frameId_0);
+	}, [isAutoHeight, hasBox]);
 	const transitionStyle = { ...useMemo(() => {
 		const baseStyle = {
 			"--inset-top": `${panelSizes.top}px`,
@@ -165,10 +174,10 @@ function LayoutInner(props) {
 		isVertical,
 		doNotOverflow
 	]);
-	const setRefs = (element) => {
-		localRef.current = element;
-		if (typeof forwardedRef === "function") forwardedRef(element);
-		else if (forwardedRef) forwardedRef.current = element;
+	const setRefs = (element_1) => {
+		localRef.current = element_1;
+		if (typeof forwardedRef === "function") forwardedRef(element_1);
+		else if (forwardedRef) forwardedRef.current = element_1;
 	};
 	const showDevWarning = isCollapsed && (_forceShowDevWarning || isDevEnv());
 	const handleInnerFocus = useCallback((e) => {
@@ -224,6 +233,9 @@ function LayoutInner(props) {
 		]
 	});
 }
+function isShown(element) {
+	return element.checkVisibility?.() ?? true;
+}
 /**
 * Layout component provides a vertical flex layout with overflow-safe content.
 * Uses a two-element architecture (wrapper + content) to ensure content never overflows.

package/dist/components/content/Layout/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","names":["useResizeObserver","BaseProps","BlockStyleProps","ColorStyleProps","filterBaseProps","FlowStyleProps","INNER_STYLES","mergeStyles","OUTER_STYLES","OuterStyleProps","Styles","tasty","CSSProperties","FocusEvent","ForwardedRef","forwardRef","HTMLAttributes","KeyboardEvent","ReactNode","useCallback","useContext","useEffect","useMemo","useRef","useState","isDevEnv","useCombinedRefs","extractStyles","Alert","LayoutNestedContext","LayoutPanelTransitionContext","LayoutProvider","useLayoutActionsContext","useLayoutRefsContext","useLayoutStateContext","LayoutElement","as","qa","styles","position","display","overflow","flexGrow","placeSelf","height","collapsed","vertical","Inner","$","container","inset","flow","placeContent","placeItems","transition","DEV_WARNING_STYLES","zIndex","CubeLayoutProps","isGrid","columns","rows","template","contentPadding","hasTransition","minContentSize","children","innerRef","HTMLDivElement","innerProps","_forceShowDevWarning","doNotOverflow","LayoutInner","props","forwardedRef","layoutActions","layoutState","layoutRefs","localRef","isAutoHeight","setIsAutoHeight","isCollapsed","setIsCollapsed","style","innerRefProp","otherProps","combinedInnerRef","updateContainerSize","ref","box","onResize","current","offsetWidth","offsetHeight","outerStyles","innerStyles","isVertical","flowFromProp","flowFromStyles","Record","flowValue","startsWith","finalStyles","gridStyles","gridColumns","gridRows","gridTemplate","panelSizes","left","top","right","bottom","isDragging","isReady","markReady","dismissOverlayPanels","hasOverlayPanels","isClippingPanels","frameId","requestAnimationFrame","cancelAnimationFrame","insetStyle","baseStyle","transitionStyle","overflowX","overflowY","overflowInline","overflowBlock","overflowClipMargin","mods","dragging","setRefs","element","showDevWarning","handleInnerFocus","e","inner","currentTarget","contains","target","Node","relatedTarget","handleKeyDown","key","preventDefault","stopPropagation","eventProps","undefined","setPanelContainer","Layout","_c","isInRegion","isInLayout","t0","t1","t2","t3","_Layout","displayName"],"sources":["../../../../src/components/content/Layout/Layout.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport {\n  BaseProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  filterBaseProps,\n  FlowStyleProps,\n  INNER_STYLES,\n  mergeStyles,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  CSSProperties,\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { isDevEnv } from '../../../utils/is-dev-env';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Alert } from '../Alert';\n\nimport {\n  LayoutNestedContext,\n  LayoutPanelTransitionContext,\n  LayoutProvider,\n  useLayoutActionsContext,\n  useLayoutRefsContext,\n  useLayoutStateContext,\n} from './LayoutContext';\n\nconst LayoutElement = tasty({\n  as: 'div',\n  qa: 'Layout',\n  styles: {\n    position: 'relative',\n    display: 'block',\n    overflow: {\n      '': 'visible',\n      'do-not-overflow': 'hidden',\n    },\n    flexGrow: 1,\n    placeSelf: 'stretch',\n    height: {\n      '': 'auto',\n      'auto-height': 'fixed 100%',\n      collapsed: '6x',\n    },\n\n    '$content-padding': '1x',\n    // Auto-border size for sub-components (set when layout is vertical)\n    '$layout-border-size': {\n      '': '0',\n      vertical: '1bw',\n    },\n\n    Inner: {\n      // .base-class[data-hover] > [data-element=\"Inner\"] { ...}\n      // Direct child selector required for nested layouts\n      $: '>',\n      container: 'layout / inline-size',\n      position: 'absolute',\n      inset: '$inset-top $inset-right $inset-bottom $inset-left',\n      display: 'flex',\n      flow: 'column',\n      placeContent: 'stretch',\n      placeItems: 'stretch',\n      // Disable transition during panel resize for snappy feedback\n      // Also disable transition when not ready to prevent initial animation\n      // Only animate when has-transition is enabled (and not dragging/not-ready)\n      transition: {\n        '': 'none',\n        'has-transition': 'inset $transition ease-out',\n        'dragging | not-ready': 'none',\n      },\n    },\n  },\n});\n\n// The collapse warning sits on top of `Inner` rather than in place of it.\n// `Inner` is absolutely positioned, so an in-flow sibling would paint beneath\n// it; match its box and take the layer above.\nconst DEV_WARNING_STYLES: Styles = {\n  position: 'absolute',\n  inset: '0',\n  zIndex: 1,\n  overflow: 'auto',\n};\n\nexport interface CubeLayoutProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    ColorStyleProps,\n    FlowStyleProps {\n  /** Switch to grid display mode */\n  isGrid?: boolean;\n  /** Grid template columns (when isGrid=true) */\n  columns?: Styles['gridColumns'];\n  /** Grid template rows (when isGrid=true) */\n  rows?: Styles['gridRows'];\n  /** Grid template shorthand */\n  template?: Styles['gridTemplate'];\n  /** Padding for content areas (Layout.Content components). Default: '1x' */\n  contentPadding?: Styles['padding'];\n  /** Enable transition animation for Inner content when panels open/close */\n  hasTransition?: boolean;\n  /** Minimum size reserved for the content area between panels. Default: 320 */\n  minContentSize?: number;\n  /** Styles for wrapper and Inner sub-element */\n  styles?: Styles;\n  children?: ReactNode;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * @internal Force show dev warning even in production (for storybook testing)\n   */\n  _forceShowDevWarning?: boolean;\n  /**\n   * When true, applies overflow: hidden to the root element.\n   * By default, overflow is visible.\n   */\n  doNotOverflow?: boolean;\n}\n\nfunction LayoutInner(\n  props: CubeLayoutProps & { forwardedRef?: ForwardedRef<HTMLDivElement> },\n) {\n  const layoutActions = useLayoutActionsContext();\n  const layoutState = useLayoutStateContext();\n  const layoutRefs = useLayoutRefsContext();\n  const localRef = useRef<HTMLDivElement>(null);\n  const [isAutoHeight, setIsAutoHeight] = useState(false);\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const {\n    isGrid,\n    columns,\n    rows,\n    template,\n    contentPadding,\n    hasTransition = false,\n    minContentSize,\n    styles,\n    children,\n    style,\n    forwardedRef,\n    innerRef: innerRefProp,\n    innerProps,\n    _forceShowDevWarning,\n    doNotOverflow,\n    ...otherProps\n  } = props;\n\n  const combinedInnerRef = useCombinedRefs(innerRefProp);\n  const updateContainerSize = layoutActions?.updateContainerSize;\n\n  useResizeObserver({\n    ref: localRef,\n    box: 'border-box',\n    onResize: useCallback(() => {\n      if (localRef.current) {\n        updateContainerSize?.(\n          localRef.current.offsetWidth,\n          localRef.current.offsetHeight,\n        );\n      }\n    }, [updateContainerSize]),\n  });\n\n  // Extract outer wrapper styles and inner content styles\n  const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n  const innerStyles = extractStyles(otherProps, INNER_STYLES);\n\n  // Calculate if the layout flow is vertical (for auto-border feature)\n  // Default flow is 'column' (vertical), only horizontal when explicitly set to 'row'\n  const isVertical = useMemo(() => {\n    const flowFromProp = innerStyles?.flow;\n    const flowFromStyles = (styles?.Inner as Record<string, unknown>)?.flow;\n    const flowValue = flowFromProp ?? flowFromStyles;\n\n    return typeof flowValue !== 'string' || !flowValue.startsWith('row');\n  }, [innerStyles?.flow, styles?.Inner]);\n\n  // Merge styles using the same pattern as LayoutPane\n  const finalStyles = useMemo(() => {\n    // Handle grid mode and grid properties\n    const gridStyles: Styles = {};\n\n    if (isGrid) {\n      gridStyles.display = 'grid';\n    }\n\n    if (columns) {\n      gridStyles.gridColumns = columns;\n    }\n\n    if (rows) {\n      gridStyles.gridRows = rows;\n    }\n\n    if (template) {\n      gridStyles.gridTemplate = template;\n    }\n\n    return mergeStyles(\n      outerStyles,\n      contentPadding != null ? { '$content-padding': contentPadding } : null,\n      styles,\n      { Inner: mergeStyles(innerStyles, gridStyles, styles?.Inner as Styles) },\n    );\n  }, [\n    outerStyles,\n    innerStyles,\n    contentPadding,\n    styles,\n    isGrid,\n    columns,\n    rows,\n    template,\n  ]);\n\n  // Calculate inset values from panel sizes\n  const panelSizes = layoutState?.panelSizes ?? {\n    left: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n  };\n\n  const isDragging = layoutState?.isDragging ?? false;\n  const isReady = layoutState?.isReady ?? true;\n  const markReady = layoutActions?.markReady;\n  const dismissOverlayPanels = layoutActions?.dismissOverlayPanels;\n  const hasOverlayPanels = layoutState?.hasOverlayPanels ?? false;\n  const isClippingPanels =\n    useContext(LayoutPanelTransitionContext)?.isClippingPanels ?? false;\n\n  // Mark layout as ready after first paint\n  // Using useEffect + requestAnimationFrame ensures:\n  // 1. Panels register in useLayoutEffect → correct insets before first paint\n  // 2. First paint with not-ready=true (transition disabled)\n  // 3. After paint completes → enables transitions for subsequent changes\n  useEffect(() => {\n    const frameId = requestAnimationFrame(() => {\n      markReady?.();\n    });\n\n    return () => cancelAnimationFrame(frameId);\n  }, [markReady]);\n\n  // Auto-height detection: if layout collapses to 0 height after initialization,\n  // automatically set height to 100% to prevent invisible layout\n  useEffect(() => {\n    if (isReady && localRef.current && localRef.current.offsetHeight === 0) {\n      setIsAutoHeight(true);\n    }\n  }, [isReady]);\n\n  // Second check: if still 0 height after auto-height was applied,\n  // show collapsed state with warning\n  useEffect(() => {\n    if (isAutoHeight && localRef.current) {\n      // Use requestAnimationFrame to check after styles have been applied\n      const frameId = requestAnimationFrame(() => {\n        if (localRef.current && localRef.current.offsetHeight === 0) {\n          setIsCollapsed(true);\n        }\n      });\n\n      return () => cancelAnimationFrame(frameId);\n    }\n  }, [isAutoHeight]);\n\n  const insetStyle = useMemo(() => {\n    const baseStyle: Record<string, string> = {\n      '--inset-top': `${panelSizes.top}px`,\n      '--inset-right': `${panelSizes.right}px`,\n      '--inset-bottom': `${panelSizes.bottom}px`,\n      '--inset-left': `${panelSizes.left}px`,\n    };\n\n    if (style) {\n      return { ...baseStyle, ...style } as CSSProperties;\n    }\n\n    return baseStyle as CSSProperties;\n  }, [panelSizes, style]);\n\n  // Remove consumer longhands while clipping so they cannot override the shorthand.\n  // Restoring the original style object also restores the latest consumer values.\n  const transitionStyle = { ...insetStyle };\n  if (isClippingPanels) {\n    delete transitionStyle.overflowX;\n    delete transitionStyle.overflowY;\n    delete transitionStyle.overflowInline;\n    delete transitionStyle.overflowBlock;\n    transitionStyle.overflow = 'clip';\n    transitionStyle.overflowClipMargin = '0px';\n  }\n\n  const mods = useMemo(\n    () => ({\n      dragging: isDragging,\n      'not-ready': !isReady,\n      'has-transition': hasTransition,\n      'auto-height': isAutoHeight && !isCollapsed,\n      collapsed: isCollapsed,\n      vertical: isVertical,\n      'do-not-overflow': doNotOverflow,\n    }),\n    [\n      isDragging,\n      isReady,\n      hasTransition,\n      isAutoHeight,\n      isCollapsed,\n      isVertical,\n      doNotOverflow,\n    ],\n  );\n\n  // Combine local ref with forwarded ref\n  const setRefs = (element: HTMLDivElement | null) => {\n    localRef.current = element;\n\n    if (typeof forwardedRef === 'function') {\n      forwardedRef(element);\n    } else if (forwardedRef) {\n      forwardedRef.current = element;\n    }\n  };\n\n  // Show dev warning when collapsed and in dev mode (or forced for stories)\n  const showDevWarning = isCollapsed && (_forceShowDevWarning || isDevEnv());\n\n  // Handle focus entering the Inner element - dismiss overlay panels\n  const handleInnerFocus = useCallback(\n    (e: FocusEvent<HTMLDivElement>) => {\n      // Only dismiss if there are overlay panels\n      if (!hasOverlayPanels) return;\n\n      const inner = e.currentTarget;\n\n      // Panels portal out of Inner but stay its React children, so focus inside\n      // a panel (or a popover opened from it) bubbles here too. Only focus that\n      // lands in Inner's own DOM, the main content, can dismiss.\n      if (!inner.contains(e.target as Node)) return;\n\n      // Check if focus is coming from outside the Inner element\n      const relatedTarget = e.relatedTarget as Node | null;\n\n      // If relatedTarget is null or not inside the Inner element,\n      // focus is entering from outside - dismiss overlay panels\n      if (!relatedTarget || !inner.contains(relatedTarget)) {\n        dismissOverlayPanels?.();\n      }\n    },\n    [hasOverlayPanels, dismissOverlayPanels],\n  );\n\n  // Handle Escape key anywhere in the Layout - dismiss overlay panels\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (hasOverlayPanels && e.key === 'Escape') {\n        e.preventDefault();\n        e.stopPropagation();\n        dismissOverlayPanels?.();\n      }\n    },\n    [hasOverlayPanels, dismissOverlayPanels],\n  );\n\n  return (\n    <LayoutElement\n      ref={setRefs}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      mods={mods}\n      styles={finalStyles}\n      style={transitionStyle}\n      onKeyDown={hasOverlayPanels ? handleKeyDown : undefined}\n    >\n      {/* All children go inside the Inner element - panels will portal themselves out */}\n      <div\n        ref={combinedInnerRef}\n        data-element=\"Inner\"\n        onFocus={handleInnerFocus}\n        {...innerProps}\n      >\n        {children}\n      </div>\n      {/* Container for panels to portal into - rendered after Inner so panels paint on top via DOM order */}\n      <div ref={layoutRefs?.setPanelContainer} data-element=\"PanelContainer\" />\n      {/* Overlaid, never substituted for `children`. A zero-height measurement is\n          not proof of a mistake - a hidden tab, a collapsed accordion and a\n          container mid-animation all measure zero - so unmounting the subtree\n          would turn a wrong guess into an outage, and remounting it on the way\n          back would drop whatever state it held. */}\n      {showDevWarning ? (\n        <Alert theme=\"danger\" styles={DEV_WARNING_STYLES}>\n          <b>UIKit:</b> <b>&lt;Layout/&gt;</b> has collapsed to <b>0</b> height.\n          Ensure the parent container has a defined height or use the{' '}\n          <b>height</b> prop on <b>&lt;Layout/&gt;</b>.\n        </Alert>\n      ) : null}\n    </LayoutElement>\n  );\n}\n\n/**\n * Layout component provides a vertical flex layout with overflow-safe content.\n * Uses a two-element architecture (wrapper + content) to ensure content never overflows.\n */\nfunction Layout(props: CubeLayoutProps, ref: ForwardedRef<HTMLDivElement>) {\n  const { hasTransition, minContentSize } = props;\n  // Nested inside one of another Layout's regions, or placed straight inside\n  // another Layout: either way its footer is not the page's.\n  const isInRegion = useContext(LayoutNestedContext);\n  const isInLayout = useLayoutStateContext() != null;\n\n  return (\n    <LayoutNestedContext.Provider value={isInRegion || isInLayout}>\n      <LayoutProvider\n        hasTransition={hasTransition}\n        minContentSize={minContentSize}\n      >\n        <LayoutInner {...props} forwardedRef={ref} />\n      </LayoutProvider>\n    </LayoutNestedContext.Provider>\n  );\n}\n\nconst _Layout = forwardRef(Layout);\n\n_Layout.displayName = 'Layout';\n\nexport { _Layout as Layout };\n"],"mappings":"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"}
+{"version":3,"file":"Layout.js","names":["useResizeObserver","BaseProps","BlockStyleProps","ColorStyleProps","filterBaseProps","FlowStyleProps","INNER_STYLES","mergeStyles","OUTER_STYLES","OuterStyleProps","Styles","tasty","CSSProperties","FocusEvent","ForwardedRef","forwardRef","HTMLAttributes","KeyboardEvent","ReactNode","useCallback","useContext","useEffect","useMemo","useRef","useState","isDevEnv","useCombinedRefs","extractStyles","Alert","LayoutNestedContext","LayoutPanelTransitionContext","LayoutProvider","useLayoutActionsContext","useLayoutRefsContext","useLayoutStateContext","LayoutElement","as","qa","styles","position","display","overflow","flexGrow","placeSelf","height","collapsed","vertical","Inner","$","container","inset","flow","placeContent","placeItems","transition","DEV_WARNING_STYLES","zIndex","CubeLayoutProps","isGrid","columns","rows","template","contentPadding","hasTransition","minContentSize","children","innerRef","HTMLDivElement","innerProps","_forceShowDevWarning","doNotOverflow","LayoutInner","props","forwardedRef","layoutActions","layoutState","layoutRefs","localRef","isAutoHeight","setIsAutoHeight","isCollapsed","setIsCollapsed","style","innerRefProp","otherProps","combinedInnerRef","updateContainerSize","ref","box","onResize","current","offsetWidth","offsetHeight","outerStyles","innerStyles","isVertical","flowFromProp","flowFromStyles","Record","flowValue","startsWith","finalStyles","gridStyles","gridColumns","gridRows","gridTemplate","panelSizes","left","top","right","bottom","isDragging","isReady","markReady","dismissOverlayPanels","hasOverlayPanels","isClippingPanels","frameId","requestAnimationFrame","cancelAnimationFrame","hasBox","containerWidth","containerHeight","isHeightCheckedRef","isCollapseCheckedRef","element","isShown","insetStyle","baseStyle","transitionStyle","overflowX","overflowY","overflowInline","overflowBlock","overflowClipMargin","mods","dragging","setRefs","showDevWarning","handleInnerFocus","e","inner","currentTarget","contains","target","Node","relatedTarget","handleKeyDown","key","preventDefault","stopPropagation","eventProps","undefined","setPanelContainer","HTMLElement","checkVisibility","Layout","_c","isInRegion","isInLayout","t0","t1","t2","t3","_Layout","displayName"],"sources":["../../../../src/components/content/Layout/Layout.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport {\n  BaseProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  filterBaseProps,\n  FlowStyleProps,\n  INNER_STYLES,\n  mergeStyles,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  CSSProperties,\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { isDevEnv } from '../../../utils/is-dev-env';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Alert } from '../Alert';\n\nimport {\n  LayoutNestedContext,\n  LayoutPanelTransitionContext,\n  LayoutProvider,\n  useLayoutActionsContext,\n  useLayoutRefsContext,\n  useLayoutStateContext,\n} from './LayoutContext';\n\nconst LayoutElement = tasty({\n  as: 'div',\n  qa: 'Layout',\n  styles: {\n    position: 'relative',\n    display: 'block',\n    overflow: {\n      '': 'visible',\n      'do-not-overflow': 'hidden',\n    },\n    flexGrow: 1,\n    placeSelf: 'stretch',\n    height: {\n      '': 'auto',\n      'auto-height': 'fixed 100%',\n      collapsed: '6x',\n    },\n\n    '$content-padding': '1x',\n    // Auto-border size for sub-components (set when layout is vertical)\n    '$layout-border-size': {\n      '': '0',\n      vertical: '1bw',\n    },\n\n    Inner: {\n      // .base-class[data-hover] > [data-element=\"Inner\"] { ...}\n      // Direct child selector required for nested layouts\n      $: '>',\n      container: 'layout / inline-size',\n      position: 'absolute',\n      inset: '$inset-top $inset-right $inset-bottom $inset-left',\n      display: 'flex',\n      flow: 'column',\n      placeContent: 'stretch',\n      placeItems: 'stretch',\n      // Disable transition during panel resize for snappy feedback\n      // Also disable transition when not ready to prevent initial animation\n      // Only animate when has-transition is enabled (and not dragging/not-ready)\n      transition: {\n        '': 'none',\n        'has-transition': 'inset $transition ease-out',\n        'dragging | not-ready': 'none',\n      },\n    },\n  },\n});\n\n// The collapse warning sits on top of `Inner` rather than in place of it.\n// `Inner` is absolutely positioned, so an in-flow sibling would paint beneath\n// it; match its box and take the layer above.\nconst DEV_WARNING_STYLES: Styles = {\n  position: 'absolute',\n  inset: '0',\n  zIndex: 1,\n  overflow: 'auto',\n};\n\nexport interface CubeLayoutProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    ColorStyleProps,\n    FlowStyleProps {\n  /** Switch to grid display mode */\n  isGrid?: boolean;\n  /** Grid template columns (when isGrid=true) */\n  columns?: Styles['gridColumns'];\n  /** Grid template rows (when isGrid=true) */\n  rows?: Styles['gridRows'];\n  /** Grid template shorthand */\n  template?: Styles['gridTemplate'];\n  /** Padding for content areas (Layout.Content components). Default: '1x' */\n  contentPadding?: Styles['padding'];\n  /** Enable transition animation for Inner content when panels open/close */\n  hasTransition?: boolean;\n  /** Minimum size reserved for the content area between panels. Default: 320 */\n  minContentSize?: number;\n  /** Styles for wrapper and Inner sub-element */\n  styles?: Styles;\n  children?: ReactNode;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * @internal Force show dev warning even in production (for storybook testing)\n   */\n  _forceShowDevWarning?: boolean;\n  /**\n   * When true, applies overflow: hidden to the root element.\n   * By default, overflow is visible.\n   */\n  doNotOverflow?: boolean;\n}\n\nfunction LayoutInner(\n  props: CubeLayoutProps & { forwardedRef?: ForwardedRef<HTMLDivElement> },\n) {\n  const layoutActions = useLayoutActionsContext();\n  const layoutState = useLayoutStateContext();\n  const layoutRefs = useLayoutRefsContext();\n  const localRef = useRef<HTMLDivElement>(null);\n  const [isAutoHeight, setIsAutoHeight] = useState(false);\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const {\n    isGrid,\n    columns,\n    rows,\n    template,\n    contentPadding,\n    hasTransition = false,\n    minContentSize,\n    styles,\n    children,\n    style,\n    forwardedRef,\n    innerRef: innerRefProp,\n    innerProps,\n    _forceShowDevWarning,\n    doNotOverflow,\n    ...otherProps\n  } = props;\n\n  const combinedInnerRef = useCombinedRefs(innerRefProp);\n  const updateContainerSize = layoutActions?.updateContainerSize;\n\n  useResizeObserver({\n    ref: localRef,\n    box: 'border-box',\n    onResize: useCallback(() => {\n      if (localRef.current) {\n        updateContainerSize?.(\n          localRef.current.offsetWidth,\n          localRef.current.offsetHeight,\n        );\n      }\n    }, [updateContainerSize]),\n  });\n\n  // Extract outer wrapper styles and inner content styles\n  const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n  const innerStyles = extractStyles(otherProps, INNER_STYLES);\n\n  // Calculate if the layout flow is vertical (for auto-border feature)\n  // Default flow is 'column' (vertical), only horizontal when explicitly set to 'row'\n  const isVertical = useMemo(() => {\n    const flowFromProp = innerStyles?.flow;\n    const flowFromStyles = (styles?.Inner as Record<string, unknown>)?.flow;\n    const flowValue = flowFromProp ?? flowFromStyles;\n\n    return typeof flowValue !== 'string' || !flowValue.startsWith('row');\n  }, [innerStyles?.flow, styles?.Inner]);\n\n  // Merge styles using the same pattern as LayoutPane\n  const finalStyles = useMemo(() => {\n    // Handle grid mode and grid properties\n    const gridStyles: Styles = {};\n\n    if (isGrid) {\n      gridStyles.display = 'grid';\n    }\n\n    if (columns) {\n      gridStyles.gridColumns = columns;\n    }\n\n    if (rows) {\n      gridStyles.gridRows = rows;\n    }\n\n    if (template) {\n      gridStyles.gridTemplate = template;\n    }\n\n    return mergeStyles(\n      outerStyles,\n      contentPadding != null ? { '$content-padding': contentPadding } : null,\n      styles,\n      { Inner: mergeStyles(innerStyles, gridStyles, styles?.Inner as Styles) },\n    );\n  }, [\n    outerStyles,\n    innerStyles,\n    contentPadding,\n    styles,\n    isGrid,\n    columns,\n    rows,\n    template,\n  ]);\n\n  // Calculate inset values from panel sizes\n  const panelSizes = layoutState?.panelSizes ?? {\n    left: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n  };\n\n  const isDragging = layoutState?.isDragging ?? false;\n  const isReady = layoutState?.isReady ?? true;\n  const markReady = layoutActions?.markReady;\n  const dismissOverlayPanels = layoutActions?.dismissOverlayPanels;\n  const hasOverlayPanels = layoutState?.hasOverlayPanels ?? false;\n  const isClippingPanels =\n    useContext(LayoutPanelTransitionContext)?.isClippingPanels ?? false;\n\n  // Mark layout as ready after first paint\n  // Using useEffect + requestAnimationFrame ensures:\n  // 1. Panels register in useLayoutEffect → correct insets before first paint\n  // 2. First paint with not-ready=true (transition disabled)\n  // 3. After paint completes → enables transitions for subsequent changes\n  useEffect(() => {\n    const frameId = requestAnimationFrame(() => {\n      markReady?.();\n    });\n\n    return () => cancelAnimationFrame(frameId);\n  }, [markReady]);\n\n  // A Layout under a `display: none` ancestor, such as a closed `hideOnClose`\n  // panel, has no height to judge yet. Each check waits until the Layout is\n  // shown, then runs once. Gaining a box re-runs a pending check, so one first\n  // shown at 0×0 is never judged.\n  const hasBox =\n    (layoutState?.containerWidth ?? 0) > 0 ||\n    (layoutState?.containerHeight ?? 0) > 0;\n  const isHeightCheckedRef = useRef(false);\n  const isCollapseCheckedRef = useRef(false);\n\n  // Auto-height detection: if layout collapses to 0 height after initialization,\n  // automatically set height to 100% to prevent invisible layout\n  useEffect(() => {\n    const element = localRef.current;\n\n    if (!isReady || !element || isHeightCheckedRef.current) return;\n    if (!isShown(element)) return;\n\n    isHeightCheckedRef.current = true;\n\n    if (element.offsetHeight === 0) {\n      setIsAutoHeight(true);\n    }\n  }, [isReady, hasBox]);\n\n  // Second check: if still 0 height after auto-height was applied,\n  // show collapsed state with warning\n  useEffect(() => {\n    if (!isAutoHeight || isCollapseCheckedRef.current) return;\n\n    // Use requestAnimationFrame to check after styles have been applied\n    const frameId = requestAnimationFrame(() => {\n      const element = localRef.current;\n\n      if (!element || !isShown(element)) return;\n\n      isCollapseCheckedRef.current = true;\n\n      if (element.offsetHeight === 0) {\n        setIsCollapsed(true);\n      }\n    });\n\n    return () => cancelAnimationFrame(frameId);\n  }, [isAutoHeight, hasBox]);\n\n  const insetStyle = useMemo(() => {\n    const baseStyle: Record<string, string> = {\n      '--inset-top': `${panelSizes.top}px`,\n      '--inset-right': `${panelSizes.right}px`,\n      '--inset-bottom': `${panelSizes.bottom}px`,\n      '--inset-left': `${panelSizes.left}px`,\n    };\n\n    if (style) {\n      return { ...baseStyle, ...style } as CSSProperties;\n    }\n\n    return baseStyle as CSSProperties;\n  }, [panelSizes, style]);\n\n  // Remove consumer longhands while clipping so they cannot override the shorthand.\n  // Restoring the original style object also restores the latest consumer values.\n  const transitionStyle = { ...insetStyle };\n  if (isClippingPanels) {\n    delete transitionStyle.overflowX;\n    delete transitionStyle.overflowY;\n    delete transitionStyle.overflowInline;\n    delete transitionStyle.overflowBlock;\n    transitionStyle.overflow = 'clip';\n    transitionStyle.overflowClipMargin = '0px';\n  }\n\n  const mods = useMemo(\n    () => ({\n      dragging: isDragging,\n      'not-ready': !isReady,\n      'has-transition': hasTransition,\n      'auto-height': isAutoHeight && !isCollapsed,\n      collapsed: isCollapsed,\n      vertical: isVertical,\n      'do-not-overflow': doNotOverflow,\n    }),\n    [\n      isDragging,\n      isReady,\n      hasTransition,\n      isAutoHeight,\n      isCollapsed,\n      isVertical,\n      doNotOverflow,\n    ],\n  );\n\n  // Combine local ref with forwarded ref\n  const setRefs = (element: HTMLDivElement | null) => {\n    localRef.current = element;\n\n    if (typeof forwardedRef === 'function') {\n      forwardedRef(element);\n    } else if (forwardedRef) {\n      forwardedRef.current = element;\n    }\n  };\n\n  // Show dev warning when collapsed and in dev mode (or forced for stories)\n  const showDevWarning = isCollapsed && (_forceShowDevWarning || isDevEnv());\n\n  // Handle focus entering the Inner element - dismiss overlay panels\n  const handleInnerFocus = useCallback(\n    (e: FocusEvent<HTMLDivElement>) => {\n      // Only dismiss if there are overlay panels\n      if (!hasOverlayPanels) return;\n\n      const inner = e.currentTarget;\n\n      // Panels portal out of Inner but stay its React children, so focus inside\n      // a panel (or a popover opened from it) bubbles here too. Only focus that\n      // lands in Inner's own DOM, the main content, can dismiss.\n      if (!inner.contains(e.target as Node)) return;\n\n      // Check if focus is coming from outside the Inner element\n      const relatedTarget = e.relatedTarget as Node | null;\n\n      // If relatedTarget is null or not inside the Inner element,\n      // focus is entering from outside - dismiss overlay panels\n      if (!relatedTarget || !inner.contains(relatedTarget)) {\n        dismissOverlayPanels?.();\n      }\n    },\n    [hasOverlayPanels, dismissOverlayPanels],\n  );\n\n  // Handle Escape key anywhere in the Layout - dismiss overlay panels\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (hasOverlayPanels && e.key === 'Escape') {\n        e.preventDefault();\n        e.stopPropagation();\n        dismissOverlayPanels?.();\n      }\n    },\n    [hasOverlayPanels, dismissOverlayPanels],\n  );\n\n  return (\n    <LayoutElement\n      ref={setRefs}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      mods={mods}\n      styles={finalStyles}\n      style={transitionStyle}\n      onKeyDown={hasOverlayPanels ? handleKeyDown : undefined}\n    >\n      {/* All children go inside the Inner element - panels will portal themselves out */}\n      <div\n        ref={combinedInnerRef}\n        data-element=\"Inner\"\n        onFocus={handleInnerFocus}\n        {...innerProps}\n      >\n        {children}\n      </div>\n      {/* Container for panels to portal into - rendered after Inner so panels paint on top via DOM order */}\n      <div ref={layoutRefs?.setPanelContainer} data-element=\"PanelContainer\" />\n      {/* Overlaid, never substituted for `children`. A zero-height measurement is\n          not proof of a mistake - a collapsed accordion and a container\n          mid-animation both measure zero - so unmounting the subtree\n          would turn a wrong guess into an outage, and remounting it on the way\n          back would drop whatever state it held. */}\n      {showDevWarning ? (\n        <Alert theme=\"danger\" styles={DEV_WARNING_STYLES}>\n          <b>UIKit:</b> <b>&lt;Layout/&gt;</b> has collapsed to <b>0</b> height.\n          Ensure the parent container has a defined height or use the{' '}\n          <b>height</b> prop on <b>&lt;Layout/&gt;</b>.\n        </Alert>\n      ) : null}\n    </LayoutElement>\n  );\n}\n\n// False under a `display: none` ancestor. jsdom has no `checkVisibility`, so\n// there every Layout counts as shown.\nfunction isShown(element: HTMLElement) {\n  return element.checkVisibility?.() ?? true;\n}\n\n/**\n * Layout component provides a vertical flex layout with overflow-safe content.\n * Uses a two-element architecture (wrapper + content) to ensure content never overflows.\n */\nfunction Layout(props: CubeLayoutProps, ref: ForwardedRef<HTMLDivElement>) {\n  const { hasTransition, minContentSize } = props;\n  // Nested inside one of another Layout's regions, or placed straight inside\n  // another Layout: either way its footer is not the page's.\n  const isInRegion = useContext(LayoutNestedContext);\n  const isInLayout = useLayoutStateContext() != null;\n\n  return (\n    <LayoutNestedContext.Provider value={isInRegion || isInLayout}>\n      <LayoutProvider\n        hasTransition={hasTransition}\n        minContentSize={minContentSize}\n      >\n        <LayoutInner {...props} forwardedRef={ref} />\n      </LayoutProvider>\n    </LayoutNestedContext.Provider>\n  );\n}\n\nconst _Layout = forwardRef(Layout);\n\n_Layout.displayName = 'Layout';\n\nexport { _Layout as Layout };\n"],"mappings":"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"}

package/dist/components/content/Layout/LayoutBlock.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Layout/LayoutCenter.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { _LayoutContainer } from "./LayoutContainer.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Layout/LayoutContainer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { LayoutContextReset } from "./LayoutContext.js";

package/dist/components/content/Layout/LayoutContent.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { LayoutContextReset } from "./LayoutContext.js";

package/dist/components/content/Layout/LayoutContext.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext, useRef, useState } from "react";

package/dist/components/content/Layout/LayoutFlex.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Layout/LayoutFooter.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { LayoutNestedContext } from "./LayoutContext.js";
 import { _LayoutContent } from "./LayoutContent.js";
 import { c } from "react/compiler-runtime";

package/dist/components/content/Layout/LayoutGrid.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Layout/LayoutHeader.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { useAutoTooltip } from "../use-auto-tooltip.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Button } from "../../actions/Button/Button.js";

package/dist/components/content/Layout/LayoutPane.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/content/Layout/LayoutPanel.d.ts

@@ -40,6 +40,17 @@ interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {
   onOpenChange?: (isOpen: boolean) => void;
   /** Enable slide transition on open/close */
   hasTransition?: boolean;
+  /**
+   * Hide the closed panel instead of unmounting its content, so the content
+   * keeps its state (an unsent draft, scroll position, a request in flight)
+   * until the panel reopens. A hidden panel takes no space and no focus.
+   * The content mounts once, even while the panel starts closed, so mount
+   * effects and a native `autoFocus` do not run again on reopen. Content that
+   * mounts while closed is hidden: `autoFocus` does nothing and measurements
+   * read zero until the panel opens. Not used in dialog mode.
+   * Default: false
+   */
+  hideOnClose?: boolean;
   /**
    * Whether the panel can be dismissed by clicking the overlay (overlay mode), pressing Escape,
    * or, in overlay mode, moving focus into the main content.

package/dist/components/content/Layout/LayoutPanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -31,6 +31,10 @@ const PanelElement = tasty({
 		container: "panel / inline-size",
 		position: "absolute",
 		display: "flex",
+		hide: {
+			"": false,
+			hidden: true
+		},
 		flow: "column",
 		overflow: "hidden",
 		boxSizing: "border-box",
@@ -308,7 +312,7 @@ function LayoutPanel(props, ref) {
 	const layoutState = useLayoutStateContext();
 	const layoutRefs = useLayoutRefsContext();
 	if (!layoutActions || !layoutState || !layoutRefs) throw new Error("Layout.Panel must be used within a Layout component. Ensure your panel is rendered inside a <Layout> parent.");
-	const { side = "left", mode: modeProp, size: providedSize, defaultSize = 280, minSize = 200, maxSize, isResizable = false, onSizeChange, isOpen: providedIsOpen, defaultIsOpen = true, onOpenChange, hasTransition: hasTransitionProp, isDismissable = true, overlayStyles, isDialog = false, isDialogOpen: providedIsDialogOpen, defaultIsDialogOpen = false, onDialogOpenChange, dialogProps, dialogStyles, contentPadding, sizeStorageKey, children, styles, mods, ...otherProps } = props;
+	const { side = "left", mode: modeProp, size: providedSize, defaultSize = 280, minSize = 200, maxSize, isResizable = false, onSizeChange, isOpen: providedIsOpen, defaultIsOpen = true, onOpenChange, hasTransition: hasTransitionProp, hideOnClose = false, isDismissable = true, overlayStyles, isDialog = false, isDialogOpen: providedIsDialogOpen, defaultIsDialogOpen = false, onDialogOpenChange, dialogProps, dialogStyles, contentPadding, sizeStorageKey, children, styles, mods, ...otherProps } = props;
 	const mode = modeProp ?? (isDialog ? "dialog" : "default");
 	const isDialogMode = mode === "dialog";
 	const isOverlayMode = mode === "overlay";
@@ -585,10 +589,10 @@ function LayoutPanel(props, ref) {
 		onSizeChange,
 		setStoredSize
 	]);
-	const renderPanelContent = (offscreen = false, transitionRef_0) => {
+	const renderPanelContent = (offscreen = false, transitionRef_0, isHidden = !isOpen) => {
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			isOverlayMode && /* @__PURE__ */ jsx(OpenerProbe, { focusRef: mountFocusRef }),
-			isOverlayMode && /* @__PURE__ */ jsx(OverlayBackdrop, {
+			isOverlayMode && !isHidden && /* @__PURE__ */ jsx(OpenerProbe, { focusRef: mountFocusRef }),
+			isOverlayMode && !isHidden && /* @__PURE__ */ jsx(OverlayBackdrop, {
 				mods: { visible: isOverlayMode && !offscreen },
 				styles: overlayStyles,
 				"aria-hidden": "true",
@@ -602,7 +606,8 @@ function LayoutPanel(props, ref) {
 				...filterBaseProps(otherProps, { eventProps: true }),
 				mods: {
 					...panelMods,
-					offscreen
+					offscreen,
+					hidden: isHidden
 				},
 				styles: finalStyles,
 				style: panelStyle,
@@ -612,7 +617,7 @@ function LayoutPanel(props, ref) {
 					children: /* @__PURE__ */ jsx(LayoutContextReset, { children })
 				})
 			}),
-			isResizable && /* @__PURE__ */ jsx(ResizeHandler, {
+			isResizable && !isHidden && /* @__PURE__ */ jsx(ResizeHandler, {
 				side,
 				isDisabled: !isResizable,
 				mods: {
@@ -645,17 +650,22 @@ function LayoutPanel(props, ref) {
 	if (hasTransition) return createPortal(/* @__PURE__ */ jsx(DisplayTransition, {
 		isShown: isOpen,
 		animateOnMount: false,
+		exposeUnmounted: hideOnClose,
 		onToggle: (isShown) => setVisualState({
 			isShown,
 			isTransitionActive
 		}),
-		children: ({ isShown: isShown_0, isExiting, ref: transitionRef_1 }) => /* @__PURE__ */ jsx(LayoutPanelTransition, {
-			isShown: isShown_0,
-			isExiting,
-			children: renderPanelContent(!isShown_0, transitionRef_1)
-		})
+		children: ({ phase, isShown: isShown_0, isExiting, ref: transitionRef_1 }) => {
+			const isHidden_0 = phase === "unmounted";
+			return /* @__PURE__ */ jsx(LayoutPanelTransition, {
+				isShown: isShown_0,
+				isExiting,
+				isHidden: isHidden_0,
+				children: renderPanelContent(!isShown_0, transitionRef_1, isHidden_0)
+			});
+		}
 	}), portalContainer);
-	if (!isOpen) return null;
+	if (!isOpen && !hideOnClose) return null;
 	return createPortal(renderPanelContent(false), portalContainer);
 }
 let lastReturnedFocus = null;