@cube-dev/ui-kit 0.116.3 → 0.117.0

package/dist/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @cube-dev/ui-kit
 
+## 0.117.0
+
+### Minor Changes
+
+- [#1054](https://github.com/cube-js/cube-ui-kit/pull/1054) [`9bbc6de2`](https://github.com/cube-js/cube-ui-kit/commit/9bbc6de27b95f5f7d45503370a8fecf4c83aa1bb) Thanks [@tenphi](https://github.com/tenphi)! - Added `onBack` prop to `Layout.Header` component. When provided, a back button with arrow icon is rendered to the left of the title, allowing users to navigate back from the current page.
+
+- [#1053](https://github.com/cube-js/cube-ui-kit/pull/1053) [`9b68b794`](https://github.com/cube-js/cube-ui-kit/commit/9b68b794ed9924cb5a9eec3b1eb5ba13956ec8a0) Thanks [@tenphi](https://github.com/tenphi)! - Added support for CSS string values (like percentages) for `maxSize` prop in Layout.Panel, added `minContentSize` prop to Layout component to control minimum content area between panels, and implemented natural boundaries logic so panels on opposite sides automatically prevent overlap and maintain minimum content space.
+
 ## 0.116.3
 
 ### Patch Changes

package/dist/_internal/hooks/use-chained-callback.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { useEvent } from "./use-event.js";
 
 //#region src/_internal/hooks/use-chained-callback.ts

package/dist/_internal/hooks/use-debounced-value.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { useEffect, useRef, useState } from "react";
 
 //#region src/_internal/hooks/use-debounced-value.ts

package/dist/_internal/hooks/use-deprecation-warning.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { deprecationWarning } from "../../utils/warnings.js";
 import React, { useEffect } from "react";
 

package/dist/_internal/hooks/use-event.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { useSyncRef } from "./use-sync-ref.js";
 import { useCallback } from "react";
 

package/dist/_internal/hooks/use-is-first-render.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { useRef } from "react";
 
 //#region src/_internal/hooks/use-is-first-render.ts

package/dist/_internal/hooks/use-sync-ref.js

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

package/dist/_internal/hooks/use-timer/timer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 //#region src/_internal/hooks/use-timer/timer.ts
 var Timer = class {
 	callback;

package/dist/_internal/hooks/use-timer/use-timer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { useEvent } from "../use-event.js";
 import { Timer } from "./timer.js";
 import { useEffect, useState } from "react";

package/dist/_internal/hooks/use-warn.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { useEvent } from "./use-event.js";
 import { warn } from "../../utils/warnings.js";
 import { useRef } from "react";

package/dist/_virtual/_rolldown/runtime.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { createRequire } from "node:module";
 
 //#region \0rolldown/runtime.js

package/dist/chunks/cacheKey.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractLocalPredefinedStates, extractPredefinedStateRefs } from "../states/index.js";
 
 //#region src/tasty/chunks/cacheKey.ts

package/dist/chunks/definitions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { isSelector } from "../pipeline/index.js";
 
 //#region src/tasty/chunks/definitions.ts

package/dist/chunks/renderChunk.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractLocalPredefinedStates } from "../states/index.js";
 import { renderStyles } from "../pipeline/index.js";
 import { CHUNK_NAMES } from "./definitions.js";

package/dist/components/Block.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../tasty/utils/styles.js";
 import { CONTAINER_STYLES } from "../tasty/styles/list.js";
 import { tasty } from "../tasty/tasty.js";

package/dist/components/CollectionItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { ItemAction } from "./actions/ItemAction/ItemAction.js";
 import { ItemBadge } from "./content/ItemBadge/ItemBadge.js";
 import { Item } from "react-stately";

package/dist/components/GlobalStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { useGlobalStyles } from "../tasty/hooks/useGlobalStyles.js";
 import { useRawCSS } from "../tasty/hooks/useRawCSS.js";
 import { TOKENS } from "../tokens/index.js";

package/dist/components/GridProvider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { tasty } from "../tasty/tasty.js";
 import { filterBaseProps } from "../tasty/utils/filter-base-props.js";
 import { useCombinedRefs } from "../utils/react/useCombinedRefs.js";

package/dist/components/HiddenInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { tasty } from "../tasty/tasty.js";
 
 //#region src/components/HiddenInput.tsx

package/dist/components/Root.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../tasty/utils/styles.js";
 import { configure } from "../tasty/config.js";
 import { BASE_STYLES, BLOCK_STYLES } from "../tasty/styles/list.js";

package/dist/components/actions/Action/Action.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { CONTAINER_STYLES, TEXT_STYLES } from "../../../tasty/styles/list.js";
 import { tasty } from "../../../tasty/tasty.js";

package/dist/components/actions/Banner/Banner.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Item } from "../../content/Item/Item.js";

package/dist/components/actions/Button/Button.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { CONTAINER_STYLES, TEXT_STYLES } from "../../../tasty/styles/list.js";
 import { tasty } from "../../../tasty/tasty.js";

package/dist/components/actions/ButtonGroup/ButtonGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { useSlotProps } from "../../../utils/react/Slots.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/actions/CommandMenu/CommandMenu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
 import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";

package/dist/components/actions/CommandMenu/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 
 //#region src/components/actions/CommandMenu/styled.tsx

package/dist/components/actions/ItemAction/ItemAction.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";

package/dist/components/actions/ItemActionContext.js

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

package/dist/components/actions/ItemButton/ItemButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";

package/dist/components/actions/Link/Link.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { Button } from "../Button/Button.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/actions/Menu/Menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
 import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";

package/dist/components/actions/Menu/MenuItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { filterCollectionItemProps } from "../../CollectionItem.js";
 import { _Item } from "../../content/Item/Item.js";

package/dist/components/actions/Menu/MenuSection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
 import { MenuItem } from "./MenuItem.js";
 import { StyledMenu, StyledSection, StyledSectionHeading } from "./styled.js";

package/dist/components/actions/Menu/MenuTrigger.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { SlotProvider } from "../../../utils/react/Slots.js";
 import { useEventBus } from "../../../utils/react/useEventBus.js";
 import { MenuContext } from "./context.js";

package/dist/components/actions/Menu/SubMenuTrigger.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { useEventBus } from "../../../utils/react/useEventBus.js";
 import { MenuContext, useMenuContext } from "./context.js";
 import { SubmenuTriggerContext } from "./SubmenuTriggerContext.js";

package/dist/components/actions/Menu/SubmenuTriggerContext.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import React from "react";
 
 //#region src/components/actions/Menu/SubmenuTriggerContext.tsx

package/dist/components/actions/Menu/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import React, { useContext } from "react";
 
 //#region src/components/actions/Menu/context.ts

package/dist/components/actions/Menu/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { DEFAULT_NEUTRAL_STYLES } from "../../../data/item-themes.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/actions/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { ItemActionProvider, useItemActionContext } from "./ItemActionContext.js";
 import { openLink, parseTo, performClickHandler, useAction } from "./use-action.js";
 import { ItemAction } from "./ItemAction/ItemAction.js";

package/dist/components/actions/use-action.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
 import { mergeProps as mergeProps$1 } from "../../utils/react/mergeProps.js";
 import { useEvent } from "../../_internal/hooks/use-event.js";

package/dist/components/actions/use-anchored-menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../utils/react/mergeProps.js";
 import { useEventBus } from "../../utils/react/useEventBus.js";
 import { useEvent } from "../../_internal/hooks/use-event.js";

package/dist/components/actions/use-context-menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../utils/react/mergeProps.js";
 import { useEventBus } from "../../utils/react/useEventBus.js";
 import { useEvent } from "../../_internal/hooks/use-event.js";

package/dist/components/content/ActiveZone/ActiveZone.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { CONTAINER_STYLES, TEXT_STYLES } from "../../../tasty/styles/list.js";
 import { Element } from "../../../tasty/tasty.js";

package/dist/components/content/Alert/Alert.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import themes_default from "../../../data/themes.js";
 import { useAlert } from "./use-alert.js";

package/dist/components/content/Alert/use-alert.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { CONTAINER_STYLES, TEXT_STYLES } from "../../../tasty/styles/list.js";
 import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";

package/dist/components/content/Avatar/Avatar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
 import { Element } from "../../../tasty/tasty.js";

package/dist/components/content/Badge/Badge.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { _Item } from "../Item/Item.js";
 import themes_default from "../../../data/themes.js";

package/dist/components/content/Card/Card.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
 import { tasty } from "../../../tasty/tasty.js";

package/dist/components/content/Content.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../../tasty/utils/styles.js";
 import { CONTAINER_STYLES, TEXT_STYLES } from "../../tasty/styles/list.js";
 import { tasty } from "../../tasty/tasty.js";

package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { POSITION_STYLES } from "../../../tasty/styles/list.js";
 import { tasty } from "../../../tasty/tasty.js";

package/dist/components/content/CopySnippet/CopySnippet.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { _Tooltip } from "../../overlays/Tooltip/Tooltip.js";
 import { TooltipTrigger } from "../../overlays/Tooltip/TooltipTrigger.js";

package/dist/components/content/Disclosure/Disclosure.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { OUTER_STYLES } from "../../../tasty/styles/list.js";
 import { tasty } from "../../../tasty/tasty.js";

package/dist/components/content/Divider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES } from "../../tasty/styles/list.js";
 import { tasty } from "../../tasty/tasty.js";
 import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";

package/dist/components/content/Footer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../../tasty/utils/styles.js";
 import { CONTAINER_STYLES, TEXT_STYLES } from "../../tasty/styles/list.js";
 import { tasty } from "../../tasty/tasty.js";

package/dist/components/content/Header.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../../tasty/utils/styles.js";
 import { CONTAINER_STYLES, TEXT_STYLES } from "../../tasty/styles/list.js";
 import { tasty } from "../../tasty/tasty.js";

package/dist/components/content/HotKeys/HotKeys.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
 import { tasty } from "../../../tasty/tasty.js";

package/dist/components/content/Item/Item.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
 import { tasty } from "../../../tasty/tasty.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { _Layout } from "./Layout.js";
 import { _LayoutContent } from "./LayoutContent.js";

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

@@ -18,6 +18,8 @@ interface CubeLayoutProps extends BaseProps, OuterStyleProps, BlockStyleProps, C
   contentPadding?: Styles['padding'];
   /** Enable transition animation for Inner content when panels open/close */
   hasTransition?: boolean;
+  /** Minimum size reserved for the content area between panels. Default: 320 */
+  minContentSize?: number;
   /** Styles for wrapper and Inner sub-element */
   styles?: Styles;
   children?: ReactNode;

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { isDevEnv } from "../../../tasty/utils/is-dev-env.js";
 import { mergeStyles } from "../../../tasty/utils/merge-styles.js";
@@ -10,6 +10,7 @@ import { Alert } from "../Alert/Alert.js";
 import { LayoutProvider, useLayoutActionsContext, useLayoutRefsContext, useLayoutStateContext } from "./LayoutContext.js";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useResizeObserver } from "@react-aria/utils";
 
 //#region src/components/content/Layout/Layout.tsx
 const LayoutElement = tasty({
@@ -58,8 +59,15 @@ function LayoutInner(props) {
 	const localRef = useRef(null);
 	const [isAutoHeight, setIsAutoHeight] = useState(false);
 	const [isCollapsed, setIsCollapsed] = useState(false);
-	const { isGrid, columns, rows, template, contentPadding, hasTransition = false, styles, children, style, forwardedRef, innerRef: innerRefProp, innerProps, _forceShowDevWarning, doNotOverflow, ...otherProps } = props;
+	const { isGrid, columns, rows, template, contentPadding, hasTransition = false, minContentSize, styles, children, style, forwardedRef, innerRef: innerRefProp, innerProps, _forceShowDevWarning, doNotOverflow, ...otherProps } = props;
 	const combinedInnerRef = useCombinedRefs(innerRefProp);
+	const updateContainerSize = layoutActions?.updateContainerSize;
+	useResizeObserver({
+		ref: localRef,
+		onResize: useCallback(() => {
+			if (localRef.current) updateContainerSize?.(localRef.current.offsetWidth, localRef.current.offsetHeight);
+		}, [updateContainerSize])
+	});
 	const outerStyles = extractStyles(otherProps, OUTER_STYLES);
 	const innerStyles = extractStyles(otherProps, INNER_STYLES);
 	const isVertical = useMemo(() => {
@@ -201,9 +209,10 @@ function LayoutInner(props) {
 * Uses a two-element architecture (wrapper + content) to ensure content never overflows.
 */
 function Layout(props, ref) {
-	const { hasTransition } = props;
+	const { hasTransition, minContentSize } = props;
 	return /* @__PURE__ */ jsx(LayoutProvider, {
 		hasTransition,
+		minContentSize,
 		children: /* @__PURE__ */ jsx(LayoutInner, {
 			...props,
 			forwardedRef: ref

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

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","names":[],"sources":["../../../../src/components/content/Layout/Layout.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  BaseProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  extractStyles,\n  filterBaseProps,\n  FlowStyleProps,\n  INNER_STYLES,\n  mergeStyles,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { isDevEnv } from '../../../tasty/utils/is-dev-env';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { Alert } from '../Alert';\n\nimport {\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\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  /** 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    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\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\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  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      // Check if focus is coming from outside the Inner element\n      const inner = e.currentTarget;\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={insetStyle}\n      onKeyDown={hasOverlayPanels ? handleKeyDown : undefined}\n    >\n      {showDevWarning ? (\n        <Alert theme=\"danger\">\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      ) : (\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\n            ref={layoutRefs?.setPanelContainer}\n            data-element=\"PanelContainer\"\n          />\n        </>\n      )}\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 } = props;\n\n  return (\n    <LayoutProvider hasTransition={hasTransition}>\n      <LayoutInner {...props} forwardedRef={ref} />\n    </LayoutProvider>\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":[],"sources":["../../../../src/components/content/Layout/Layout.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport {\n  CSSProperties,\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  BaseProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  extractStyles,\n  filterBaseProps,\n  FlowStyleProps,\n  INNER_STYLES,\n  mergeStyles,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { isDevEnv } from '../../../tasty/utils/is-dev-env';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { Alert } from '../Alert';\n\nimport {\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\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    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\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  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      // Check if focus is coming from outside the Inner element\n      const inner = e.currentTarget;\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={insetStyle}\n      onKeyDown={hasOverlayPanels ? handleKeyDown : undefined}\n    >\n      {showDevWarning ? (\n        <Alert theme=\"danger\">\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      ) : (\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\n            ref={layoutRefs?.setPanelContainer}\n            data-element=\"PanelContainer\"\n          />\n        </>\n      )}\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\n  return (\n    <LayoutProvider\n      hasTransition={hasTransition}\n      minContentSize={minContentSize}\n    >\n      <LayoutInner {...props} forwardedRef={ref} />\n    </LayoutProvider>\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.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { _LayoutContent } from "./LayoutContent.js";
 import { forwardRef } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { _LayoutContainer } from "./LayoutContainer.js";
 import { forwardRef } from "react";