@cube-dev/ui-kit 0.182.0 → 0.183.0

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutContext.js","names":[],"sources":["../../../../src/components/content/Layout/LayoutContext.tsx"],"sourcesContent":["import {\n  createContext,\n  MutableRefObject,\n  ReactNode,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\n\nexport type Side = 'left' | 'top' | 'right' | 'bottom';\n\n/**\n * Refs context - stable refs that don't change and don't trigger re-renders.\n * Provides portal container ref for panels to render into.\n */\nexport interface LayoutRefsContextValue {\n  /** Container element ref for panels to portal into */\n  panelContainerRef: MutableRefObject<HTMLDivElement | null>;\n  /** Whether the panel container is mounted and ready for portals */\n  isPanelContainerReady: boolean;\n  /** Callback ref to set on the panel container element */\n  setPanelContainer: (element: HTMLDivElement | null) => void;\n}\n\nexport const LayoutRefsContext = createContext<LayoutRefsContextValue | null>(\n  null,\n);\n\nexport function useLayoutRefsContext(): LayoutRefsContextValue | null {\n  return useContext(LayoutRefsContext);\n}\n\n/** Callback to dismiss an overlay panel */\nexport type OverlayDismissCallback = () => void;\n\n/**\n * Actions context - stable functions and configuration that don't change.\n * Separating these from state prevents unnecessary re-renders when only state changes.\n */\nexport interface LayoutActionsContextValue {\n  /** Register a panel on a specific side with initial size */\n  registerPanel: (side: Side, size: number) => void;\n  /** Unregister a panel from a specific side */\n  unregisterPanel: (side: Side) => void;\n  /** Update the size of a registered panel */\n  updatePanelSize: (side: Side, size: number) => void;\n  /** Set global dragging state (when any panel is being resized) */\n  setDragging: (isDragging: boolean) => void;\n  /** Mark the layout as ready (after initial mount) */\n  markReady: () => void;\n  /** Update the container dimensions (called from ResizeObserver) */\n  updateContainerSize: (width: number, height: number) => void;\n  /** Register an overlay panel's dismiss callback. Returns unregister function. */\n  registerOverlayPanel: (dismiss: OverlayDismissCallback) => () => void;\n  /** Dismiss all overlay panels */\n  dismissOverlayPanels: () => void;\n  /** Whether transitions are enabled for panels (stable config value) */\n  hasTransition: boolean;\n  /** Minimum size reserved for the content area between panels */\n  minContentSize: number;\n}\n\n/** State context - reactive state that triggers re-renders */\nexport interface LayoutStateContextValue {\n  panelSizes: Record<Side, number>;\n  isDragging: boolean;\n  isReady: boolean;\n  hasOverlayPanels: boolean;\n  containerWidth: number;\n  containerHeight: number;\n}\n\nexport const LayoutActionsContext =\n  createContext<LayoutActionsContextValue | null>(null);\nexport const LayoutStateContext = createContext<LayoutStateContextValue | null>(\n  null,\n);\n\nexport function useLayoutActionsContext(): LayoutActionsContextValue | null {\n  return useContext(LayoutActionsContext);\n}\n\nexport function useLayoutStateContext(): LayoutStateContextValue | null {\n  return useContext(LayoutStateContext);\n}\n\n/** Combined layout context value for convenience */\nexport interface LayoutContextValue\n  extends LayoutActionsContextValue,\n    LayoutStateContextValue,\n    LayoutRefsContextValue {}\n\n/**\n * Combined hook that returns all layout context values.\n * Convenience wrapper around the individual context hooks.\n * Returns null if used outside of a Layout component.\n */\nexport function useLayoutContext(): LayoutContextValue | null {\n  const actions = useLayoutActionsContext();\n  const state = useLayoutStateContext();\n  const refs = useLayoutRefsContext();\n\n  if (!actions || !state || !refs) {\n    return null;\n  }\n\n  return { ...actions, ...state, ...refs };\n}\n\nexport interface LayoutProviderProps {\n  children: ReactNode;\n  /** Whether transitions are enabled for panels */\n  hasTransition?: boolean;\n  /** Minimum size reserved for the content area between panels. Default: 320 */\n  minContentSize?: number;\n}\n\nexport function LayoutProvider({\n  children,\n  hasTransition = false,\n  minContentSize = 320,\n}: LayoutProviderProps) {\n  const registeredPanels = useRef<Set<Side>>(new Set());\n  const overlayPanelCallbacks = useRef<Set<OverlayDismissCallback>>(new Set());\n  const panelContainerRef = useRef<HTMLDivElement | null>(null);\n  const [isPanelContainerReady, setIsPanelContainerReady] = useState(false);\n\n  // Callback ref for panel container - triggers re-render when container mounts\n  const setPanelContainer = useEvent((element: HTMLDivElement | null) => {\n    panelContainerRef.current = element;\n    setIsPanelContainerReady(element !== null);\n  });\n\n  const [panelSizes, setPanelSizes] = useState<Record<Side, number>>({\n    left: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n  });\n  const [isDragging, setIsDragging] = useState(false);\n  const [isReady, setIsReady] = useState(false);\n  const [hasOverlayPanels, setHasOverlayPanels] = useState(false);\n  const [containerWidth, setContainerWidth] = useState(0);\n  const [containerHeight, setContainerHeight] = useState(0);\n\n  const updatePanelSize = useEvent((side: Side, size: number) => {\n    setPanelSizes((prev) => {\n      if (prev[side] === size) return prev;\n      return { ...prev, [side]: size };\n    });\n  });\n\n  const registerPanel = useEvent((side: Side, size: number) => {\n    if (registeredPanels.current.has(side)) {\n      throw new Error(\n        `Layout: Only one panel per side is allowed. ` +\n          `A panel is already registered on the \"${side}\" side.`,\n      );\n    }\n\n    // Check for axis conflict\n    const isHorizontal = side === 'left' || side === 'right';\n    const conflictingSides: Side[] = isHorizontal\n      ? ['top', 'bottom']\n      : ['left', 'right'];\n\n    for (const conflictSide of conflictingSides) {\n      if (registeredPanels.current.has(conflictSide)) {\n        throw new Error(\n          `Layout: Panels from different axes cannot be combined. ` +\n            `Cannot register \"${side}\" panel when \"${conflictSide}\" panel exists. ` +\n            `Use either horizontal (left/right) or vertical (top/bottom) panels.`,\n        );\n      }\n    }\n\n    registeredPanels.current.add(side);\n    updatePanelSize(side, size);\n  });\n\n  const unregisterPanel = useEvent((side: Side) => {\n    registeredPanels.current.delete(side);\n    updatePanelSize(side, 0);\n  });\n\n  const setDragging = useEvent((dragging: boolean) => {\n    setIsDragging(dragging);\n  });\n\n  const markReady = useEvent(() => {\n    setIsReady(true);\n  });\n\n  const registerOverlayPanel = useEvent((dismiss: OverlayDismissCallback) => {\n    overlayPanelCallbacks.current.add(dismiss);\n    setHasOverlayPanels(true);\n\n    // Return unregister function\n    return () => {\n      overlayPanelCallbacks.current.delete(dismiss);\n      setHasOverlayPanels(overlayPanelCallbacks.current.size > 0);\n    };\n  });\n\n  const dismissOverlayPanels = useEvent(() => {\n    overlayPanelCallbacks.current.forEach((dismiss) => dismiss());\n  });\n\n  const updateContainerSize = useEvent((width: number, height: number) => {\n    setContainerWidth((prev) => (prev === width ? prev : width));\n    setContainerHeight((prev) => (prev === height ? prev : height));\n  });\n\n  // Actions context - stable because all callbacks use useEvent\n  const actionsValue = useMemo(\n    () => ({\n      registerPanel,\n      unregisterPanel,\n      updatePanelSize,\n      setDragging,\n      markReady,\n      updateContainerSize,\n      hasTransition,\n      minContentSize,\n      registerOverlayPanel,\n      dismissOverlayPanels,\n    }),\n    // Only hasTransition and minContentSize can change - all other values are stable useEvent callbacks\n    [hasTransition, minContentSize],\n  );\n\n  // State context - changes when state updates\n  const stateValue = useMemo(\n    () => ({\n      panelSizes,\n      isDragging,\n      isReady,\n      hasOverlayPanels,\n      containerWidth,\n      containerHeight,\n    }),\n    [\n      panelSizes,\n      isDragging,\n      isReady,\n      hasOverlayPanels,\n      containerWidth,\n      containerHeight,\n    ],\n  );\n\n  // Refs context - includes container ready state\n  const refsValue = useMemo(\n    () => ({\n      panelContainerRef,\n      isPanelContainerReady,\n      setPanelContainer,\n    }),\n    [isPanelContainerReady],\n  );\n\n  return (\n    <LayoutRefsContext.Provider value={refsValue}>\n      <LayoutActionsContext.Provider value={actionsValue}>\n        <LayoutStateContext.Provider value={stateValue}>\n          {children}\n        </LayoutStateContext.Provider>\n      </LayoutActionsContext.Provider>\n    </LayoutRefsContext.Provider>\n  );\n}\n\n/**\n * Provider that resets the layout context for sub-components.\n * Used to prevent panels in nested Layouts from affecting parent layouts.\n */\nexport function LayoutContextReset({ children }: { children: ReactNode }) {\n  return (\n    <LayoutRefsContext.Provider value={null}>\n      <LayoutActionsContext.Provider value={null}>\n        <LayoutStateContext.Provider value={null}>\n          {children}\n        </LayoutStateContext.Provider>\n      </LayoutActionsContext.Provider>\n    </LayoutRefsContext.Provider>\n  );\n}\n\n// Panel context - provides panel-level callbacks to child components\nexport interface LayoutPanelContextValue {\n  /** Callback to change the panel's open state */\n  onOpenChange: (isOpen: boolean) => void;\n  /** Current open state of the panel */\n  isOpen: boolean;\n}\n\nexport const LayoutPanelContext = createContext<LayoutPanelContextValue | null>(\n  null,\n);\n\nexport function useLayoutPanelContext(): LayoutPanelContextValue | null {\n  return useContext(LayoutPanelContext);\n}\n"],"mappings":";;;;;;AA2BA,MAAa,oBAAoB,cAC/B,KACD;AAED,SAAgB,uBAAsD;AACpE,QAAO,WAAW,kBAAkB;;AA2CtC,MAAa,uBACX,cAAgD,KAAK;AACvD,MAAa,qBAAqB,cAChC,KACD;AAED,SAAgB,0BAA4D;AAC1E,QAAO,WAAW,qBAAqB;;AAGzC,SAAgB,wBAAwD;AACtE,QAAO,WAAW,mBAAmB;;AAkCvC,SAAgB,eAAe,EAC7B,UACA,gBAAgB,OAChB,iBAAiB,OACK;CACtB,MAAM,mBAAmB,uBAAkB,IAAI,KAAK,CAAC;CACrD,MAAM,wBAAwB,uBAAoC,IAAI,KAAK,CAAC;CAC5E,MAAM,oBAAoB,OAA8B,KAAK;CAC7D,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,MAAM;CAGzE,MAAM,oBAAoB,UAAU,YAAmC;AACrE,oBAAkB,UAAU;AAC5B,2BAAyB,YAAY,KAAK;GAC1C;CAEF,MAAM,CAAC,YAAY,iBAAiB,SAA+B;EACjE,MAAM;EACN,KAAK;EACL,OAAO;EACP,QAAQ;EACT,CAAC;CACF,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,MAAM;CAC/D,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,EAAE;CACvD,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,EAAE;CAEzD,MAAM,kBAAkB,UAAU,MAAY,SAAiB;AAC7D,iBAAe,SAAS;AACtB,OAAI,KAAK,UAAU,KAAM,QAAO;AAChC,UAAO;IAAE,GAAG;KAAO,OAAO;IAAM;IAChC;GACF;CAEF,MAAM,gBAAgB,UAAU,MAAY,SAAiB;AAC3D,MAAI,iBAAiB,QAAQ,IAAI,KAAK,CACpC,OAAM,IAAI,MACR,qFAC2C,KAAK,SACjD;EAKH,MAAM,mBADe,SAAS,UAAU,SAAS,UAE7C,CAAC,OAAO,SAAS,GACjB,CAAC,QAAQ,QAAQ;AAErB,OAAK,MAAM,gBAAgB,iBACzB,KAAI,iBAAiB,QAAQ,IAAI,aAAa,CAC5C,OAAM,IAAI,MACR,2EACsB,KAAK,gBAAgB,aAAa,qFAEzD;AAIL,mBAAiB,QAAQ,IAAI,KAAK;AAClC,kBAAgB,MAAM,KAAK;GAC3B;CAEF,MAAM,kBAAkB,UAAU,SAAe;AAC/C,mBAAiB,QAAQ,OAAO,KAAK;AACrC,kBAAgB,MAAM,EAAE;GACxB;CAEF,MAAM,cAAc,UAAU,aAAsB;AAClD,gBAAc,SAAS;GACvB;CAEF,MAAM,YAAY,eAAe;AAC/B,aAAW,KAAK;GAChB;CAEF,MAAM,uBAAuB,UAAU,YAAoC;AACzE,wBAAsB,QAAQ,IAAI,QAAQ;AAC1C,sBAAoB,KAAK;AAGzB,eAAa;AACX,yBAAsB,QAAQ,OAAO,QAAQ;AAC7C,uBAAoB,sBAAsB,QAAQ,OAAO,EAAE;;GAE7D;CAEF,MAAM,uBAAuB,eAAe;AAC1C,wBAAsB,QAAQ,SAAS,YAAY,SAAS,CAAC;GAC7D;CAEF,MAAM,sBAAsB,UAAU,OAAe,WAAmB;AACtE,qBAAmB,SAAU,SAAS,QAAQ,OAAO,MAAO;AAC5D,sBAAoB,SAAU,SAAS,SAAS,OAAO,OAAQ;GAC/D;CAGF,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GAED,CAAC,eAAe,eAAe,CAChC;CAGD,MAAM,aAAa,eACV;EACL;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,YAAY,eACT;EACL;EACA;EACA;EACD,GACD,CAAC,sBAAsB,CACxB;AAED,QACE,oBAAC,kBAAkB;EAAS,OAAO;YACjC,oBAAC,qBAAqB;GAAS,OAAO;aACpC,oBAAC,mBAAmB;IAAS,OAAO;IACjC;KAC2B;IACA;GACL;;;;;;AAQjC,SAAgB,mBAAmB,EAAE,YAAqC;AACxE,QACE,oBAAC,kBAAkB;EAAS,OAAO;YACjC,oBAAC,qBAAqB;GAAS,OAAO;aACpC,oBAAC,mBAAmB;IAAS,OAAO;IACjC;KAC2B;IACA;GACL;;AAYjC,MAAa,qBAAqB,cAChC,KACD;AAED,SAAgB,wBAAwD;AACtE,QAAO,WAAW,mBAAmB"}
+{"version":3,"file":"LayoutContext.js","names":["createContext","MutableRefObject","ReactNode","useContext","useMemo","useRef","useState","useEvent","Side","LayoutRefsContextValue","panelContainerRef","HTMLDivElement","isPanelContainerReady","setPanelContainer","element","LayoutRefsContext","useLayoutRefsContext","OverlayDismissCallback","LayoutActionsContextValue","registerPanel","side","size","unregisterPanel","updatePanelSize","setDragging","isDragging","markReady","updateContainerSize","width","height","registerOverlayPanel","dismiss","dismissOverlayPanels","hasTransition","minContentSize","LayoutStateContextValue","panelSizes","Record","isReady","hasOverlayPanels","containerWidth","containerHeight","LayoutActionsContext","LayoutStateContext","useLayoutActionsContext","useLayoutStateContext","LayoutContextValue","useLayoutContext","$","_c","actions","state","refs","t0","LayoutProviderProps","children","LayoutProvider","registeredPanels","Set","overlayPanelCallbacks","setIsPanelContainerReady","current","setPanelSizes","left","top","right","bottom","setIsDragging","setIsReady","setHasOverlayPanels","setContainerWidth","setContainerHeight","prev","has","Error","isHorizontal","conflictingSides","conflictSide","add","delete","dragging","forEach","actionsValue","stateValue","refsValue","LayoutContextReset","t1","LayoutPanelContextValue","onOpenChange","isOpen","LayoutPanelContext","useLayoutPanelContext"],"sources":["../../../../src/components/content/Layout/LayoutContext.tsx"],"sourcesContent":["import {\n  createContext,\n  MutableRefObject,\n  ReactNode,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\n\nexport type Side = 'left' | 'top' | 'right' | 'bottom';\n\n/**\n * Refs context - stable refs that don't change and don't trigger re-renders.\n * Provides portal container ref for panels to render into.\n */\nexport interface LayoutRefsContextValue {\n  /** Container element ref for panels to portal into */\n  panelContainerRef: MutableRefObject<HTMLDivElement | null>;\n  /** Whether the panel container is mounted and ready for portals */\n  isPanelContainerReady: boolean;\n  /** Callback ref to set on the panel container element */\n  setPanelContainer: (element: HTMLDivElement | null) => void;\n}\n\nexport const LayoutRefsContext = createContext<LayoutRefsContextValue | null>(\n  null,\n);\n\nexport function useLayoutRefsContext(): LayoutRefsContextValue | null {\n  return useContext(LayoutRefsContext);\n}\n\n/** Callback to dismiss an overlay panel */\nexport type OverlayDismissCallback = () => void;\n\n/**\n * Actions context - stable functions and configuration that don't change.\n * Separating these from state prevents unnecessary re-renders when only state changes.\n */\nexport interface LayoutActionsContextValue {\n  /** Register a panel on a specific side with initial size */\n  registerPanel: (side: Side, size: number) => void;\n  /** Unregister a panel from a specific side */\n  unregisterPanel: (side: Side) => void;\n  /** Update the size of a registered panel */\n  updatePanelSize: (side: Side, size: number) => void;\n  /** Set global dragging state (when any panel is being resized) */\n  setDragging: (isDragging: boolean) => void;\n  /** Mark the layout as ready (after initial mount) */\n  markReady: () => void;\n  /** Update the container dimensions (called from ResizeObserver) */\n  updateContainerSize: (width: number, height: number) => void;\n  /** Register an overlay panel's dismiss callback. Returns unregister function. */\n  registerOverlayPanel: (dismiss: OverlayDismissCallback) => () => void;\n  /** Dismiss all overlay panels */\n  dismissOverlayPanels: () => void;\n  /** Whether transitions are enabled for panels (stable config value) */\n  hasTransition: boolean;\n  /** Minimum size reserved for the content area between panels */\n  minContentSize: number;\n}\n\n/** State context - reactive state that triggers re-renders */\nexport interface LayoutStateContextValue {\n  panelSizes: Record<Side, number>;\n  isDragging: boolean;\n  isReady: boolean;\n  hasOverlayPanels: boolean;\n  containerWidth: number;\n  containerHeight: number;\n}\n\nexport const LayoutActionsContext =\n  createContext<LayoutActionsContextValue | null>(null);\nexport const LayoutStateContext = createContext<LayoutStateContextValue | null>(\n  null,\n);\n\nexport function useLayoutActionsContext(): LayoutActionsContextValue | null {\n  return useContext(LayoutActionsContext);\n}\n\nexport function useLayoutStateContext(): LayoutStateContextValue | null {\n  return useContext(LayoutStateContext);\n}\n\n/** Combined layout context value for convenience */\nexport interface LayoutContextValue\n  extends LayoutActionsContextValue,\n    LayoutStateContextValue,\n    LayoutRefsContextValue {}\n\n/**\n * Combined hook that returns all layout context values.\n * Convenience wrapper around the individual context hooks.\n * Returns null if used outside of a Layout component.\n */\nexport function useLayoutContext(): LayoutContextValue | null {\n  const actions = useLayoutActionsContext();\n  const state = useLayoutStateContext();\n  const refs = useLayoutRefsContext();\n\n  if (!actions || !state || !refs) {\n    return null;\n  }\n\n  return { ...actions, ...state, ...refs };\n}\n\nexport interface LayoutProviderProps {\n  children: ReactNode;\n  /** Whether transitions are enabled for panels */\n  hasTransition?: boolean;\n  /** Minimum size reserved for the content area between panels. Default: 320 */\n  minContentSize?: number;\n}\n\nexport function LayoutProvider({\n  children,\n  hasTransition = false,\n  minContentSize = 320,\n}: LayoutProviderProps) {\n  const registeredPanels = useRef<Set<Side>>(new Set());\n  const overlayPanelCallbacks = useRef<Set<OverlayDismissCallback>>(new Set());\n  const panelContainerRef = useRef<HTMLDivElement | null>(null);\n  const [isPanelContainerReady, setIsPanelContainerReady] = useState(false);\n\n  // Callback ref for panel container - triggers re-render when container mounts\n  const setPanelContainer = useEvent((element: HTMLDivElement | null) => {\n    panelContainerRef.current = element;\n    setIsPanelContainerReady(element !== null);\n  });\n\n  const [panelSizes, setPanelSizes] = useState<Record<Side, number>>({\n    left: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n  });\n  const [isDragging, setIsDragging] = useState(false);\n  const [isReady, setIsReady] = useState(false);\n  const [hasOverlayPanels, setHasOverlayPanels] = useState(false);\n  const [containerWidth, setContainerWidth] = useState(0);\n  const [containerHeight, setContainerHeight] = useState(0);\n\n  const updatePanelSize = useEvent((side: Side, size: number) => {\n    setPanelSizes((prev) => {\n      if (prev[side] === size) return prev;\n      return { ...prev, [side]: size };\n    });\n  });\n\n  const registerPanel = useEvent((side: Side, size: number) => {\n    if (registeredPanels.current.has(side)) {\n      throw new Error(\n        `Layout: Only one panel per side is allowed. ` +\n          `A panel is already registered on the \"${side}\" side.`,\n      );\n    }\n\n    // Check for axis conflict\n    const isHorizontal = side === 'left' || side === 'right';\n    const conflictingSides: Side[] = isHorizontal\n      ? ['top', 'bottom']\n      : ['left', 'right'];\n\n    for (const conflictSide of conflictingSides) {\n      if (registeredPanels.current.has(conflictSide)) {\n        throw new Error(\n          `Layout: Panels from different axes cannot be combined. ` +\n            `Cannot register \"${side}\" panel when \"${conflictSide}\" panel exists. ` +\n            `Use either horizontal (left/right) or vertical (top/bottom) panels.`,\n        );\n      }\n    }\n\n    registeredPanels.current.add(side);\n    updatePanelSize(side, size);\n  });\n\n  const unregisterPanel = useEvent((side: Side) => {\n    registeredPanels.current.delete(side);\n    updatePanelSize(side, 0);\n  });\n\n  const setDragging = useEvent((dragging: boolean) => {\n    setIsDragging(dragging);\n  });\n\n  const markReady = useEvent(() => {\n    setIsReady(true);\n  });\n\n  const registerOverlayPanel = useEvent((dismiss: OverlayDismissCallback) => {\n    overlayPanelCallbacks.current.add(dismiss);\n    setHasOverlayPanels(true);\n\n    // Return unregister function\n    return () => {\n      overlayPanelCallbacks.current.delete(dismiss);\n      setHasOverlayPanels(overlayPanelCallbacks.current.size > 0);\n    };\n  });\n\n  const dismissOverlayPanels = useEvent(() => {\n    overlayPanelCallbacks.current.forEach((dismiss) => dismiss());\n  });\n\n  const updateContainerSize = useEvent((width: number, height: number) => {\n    setContainerWidth((prev) => (prev === width ? prev : width));\n    setContainerHeight((prev) => (prev === height ? prev : height));\n  });\n\n  // Actions context - stable because all callbacks use useEvent\n  const actionsValue = useMemo(\n    () => ({\n      registerPanel,\n      unregisterPanel,\n      updatePanelSize,\n      setDragging,\n      markReady,\n      updateContainerSize,\n      hasTransition,\n      minContentSize,\n      registerOverlayPanel,\n      dismissOverlayPanels,\n    }),\n    // Only hasTransition and minContentSize can change - all other values are stable useEvent callbacks\n    [hasTransition, minContentSize],\n  );\n\n  // State context - changes when state updates\n  const stateValue = useMemo(\n    () => ({\n      panelSizes,\n      isDragging,\n      isReady,\n      hasOverlayPanels,\n      containerWidth,\n      containerHeight,\n    }),\n    [\n      panelSizes,\n      isDragging,\n      isReady,\n      hasOverlayPanels,\n      containerWidth,\n      containerHeight,\n    ],\n  );\n\n  // Refs context - includes container ready state\n  const refsValue = useMemo(\n    () => ({\n      panelContainerRef,\n      isPanelContainerReady,\n      setPanelContainer,\n    }),\n    [isPanelContainerReady],\n  );\n\n  return (\n    <LayoutRefsContext.Provider value={refsValue}>\n      <LayoutActionsContext.Provider value={actionsValue}>\n        <LayoutStateContext.Provider value={stateValue}>\n          {children}\n        </LayoutStateContext.Provider>\n      </LayoutActionsContext.Provider>\n    </LayoutRefsContext.Provider>\n  );\n}\n\n/**\n * Provider that resets the layout context for sub-components.\n * Used to prevent panels in nested Layouts from affecting parent layouts.\n */\nexport function LayoutContextReset({ children }: { children: ReactNode }) {\n  return (\n    <LayoutRefsContext.Provider value={null}>\n      <LayoutActionsContext.Provider value={null}>\n        <LayoutStateContext.Provider value={null}>\n          {children}\n        </LayoutStateContext.Provider>\n      </LayoutActionsContext.Provider>\n    </LayoutRefsContext.Provider>\n  );\n}\n\n// Panel context - provides panel-level callbacks to child components\nexport interface LayoutPanelContextValue {\n  /** Callback to change the panel's open state */\n  onOpenChange: (isOpen: boolean) => void;\n  /** Current open state of the panel */\n  isOpen: boolean;\n}\n\nexport const LayoutPanelContext = createContext<LayoutPanelContextValue | null>(\n  null,\n);\n\nexport function useLayoutPanelContext(): LayoutPanelContextValue | null {\n  return useContext(LayoutPanelContext);\n}\n"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -19,13 +20,37 @@ const FlexElement = tasty(_LayoutContent, {
 	}
 });
 function LayoutFlex(props, ref) {
-	const { children, scrollbar = "tiny", ...otherProps } = props;
-	return /* @__PURE__ */ jsx(FlexElement, {
-		...otherProps,
-		ref,
-		scrollbar,
-		children
-	});
+	const $ = c(9);
+	let children;
+	let otherProps;
+	let t0;
+	if ($[0] !== props) {
+		({children, scrollbar: t0, ...otherProps} = props);
+		$[0] = props;
+		$[1] = children;
+		$[2] = otherProps;
+		$[3] = t0;
+	} else {
+		children = $[1];
+		otherProps = $[2];
+		t0 = $[3];
+	}
+	const scrollbar = t0 === void 0 ? "tiny" : t0;
+	let t1;
+	if ($[4] !== children || $[5] !== otherProps || $[6] !== ref || $[7] !== scrollbar) {
+		t1 = /* @__PURE__ */ jsx(FlexElement, {
+			...otherProps,
+			ref,
+			scrollbar,
+			children
+		});
+		$[4] = children;
+		$[5] = otherProps;
+		$[6] = ref;
+		$[7] = scrollbar;
+		$[8] = t1;
+	} else t1 = $[8];
+	return t1;
 }
 const _LayoutFlex = forwardRef(LayoutFlex);
 _LayoutFlex.displayName = "Layout.Flex";

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutFlex.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutFlex.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef } from 'react';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst FlexElement = tasty(LayoutContent, {\n  qa: 'LayoutFlex',\n  styles: {\n    container: 'none',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      display: 'flex',\n      flow: 'row',\n      padding: 0,\n    },\n  },\n});\n\nexport interface CubeLayoutFlexProps extends CubeLayoutContentProps {}\n\nfunction LayoutFlex(\n  props: CubeLayoutFlexProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { children, scrollbar = 'tiny', ...otherProps } = props;\n\n  return (\n    <FlexElement {...otherProps} ref={ref} scrollbar={scrollbar}>\n      {children}\n    </FlexElement>\n  );\n}\n\nconst _LayoutFlex = forwardRef(LayoutFlex);\n\n_LayoutFlex.displayName = 'Layout.Flex';\n\nexport { _LayoutFlex as LayoutFlex };\n"],"mappings":";;;;;;;AAKA,MAAM,cAAc,MAAMA,gBAAe;CACvC,IAAI;CACJ,QAAQ;EACN,WAAW;EACX,YAAY;EACZ,UAAU;EAEV,OAAO;GACL,SAAS;GACT,MAAM;GACN,SAAS;GACV;EACF;CACF,CAAC;AAIF,SAAS,WACP,OACA,KACA;CACA,MAAM,EAAE,UAAU,YAAY,QAAQ,GAAG,eAAe;AAExD,QACE,oBAAC;EAAY,GAAI;EAAiB;EAAgB;EAC/C;GACW;;AAIlB,MAAM,cAAc,WAAW,WAAW;AAE1C,YAAY,cAAc"}
+{"version":3,"file":"LayoutFlex.js","names":["tasty","ForwardedRef","forwardRef","CubeLayoutContentProps","LayoutContent","FlexElement","qa","styles","container","flexShrink","flexGrow","Inner","display","flow","padding","CubeLayoutFlexProps","LayoutFlex","props","ref","$","_c","children","otherProps","t0","scrollbar","undefined","t1","_LayoutFlex","displayName"],"sources":["../../../../src/components/content/Layout/LayoutFlex.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef } from 'react';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst FlexElement = tasty(LayoutContent, {\n  qa: 'LayoutFlex',\n  styles: {\n    container: 'none',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      display: 'flex',\n      flow: 'row',\n      padding: 0,\n    },\n  },\n});\n\nexport interface CubeLayoutFlexProps extends CubeLayoutContentProps {}\n\nfunction LayoutFlex(\n  props: CubeLayoutFlexProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { children, scrollbar = 'tiny', ...otherProps } = props;\n\n  return (\n    <FlexElement {...otherProps} ref={ref} scrollbar={scrollbar}>\n      {children}\n    </FlexElement>\n  );\n}\n\nconst _LayoutFlex = forwardRef(LayoutFlex);\n\n_LayoutFlex.displayName = 'Layout.Flex';\n\nexport { _LayoutFlex as LayoutFlex };\n"],"mappings":";;;;;;;;AAKA,MAAMK,cAAcL,MAAMI,gBAAe;CACvCE,IAAI;CACJC,QAAQ;EACNC,WAAW;EACXC,YAAY;EACZC,UAAU;EAEVC,OAAO;GACLC,SAAS;GACTC,MAAM;GACNC,SAAS;GACX;EACF;CACD,CAAC;AAIF,SAAAE,WAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;AAAA,KAAAJ,EAAA,OAAAF,OAAA;AAIE,GAAA,CAAAI,UAAAG,WAAAD,OAAAD,cAAwDL;AAAME,IAAA,KAAAF;AAAAE,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAI;QAAA;AAAAF,aAAAF,EAAA;AAAAG,eAAAH,EAAA;AAAAI,OAAAJ,EAAA;;CAA5C,MAAAK,YAAAD,OAAAE,SAAA,SAAAF;CAAkB,IAAAG;AAAA,KAAAP,EAAA,OAAAE,YAAAF,EAAA,OAAAG,cAAAH,EAAA,OAAAD,OAAAC,EAAA,OAAAK,WAAA;AAGlCE,OAAA,oBAAC;GAAW,GAAKJ;GAAiBJ;GAAgBM;GAC/CH;IACW;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAD;AAAAC,IAAA,KAAAK;AAAAL,IAAA,KAAAO;OAAAA,MAAAP,EAAA;AAAA,QAFdO;;AAMJ,MAAMC,cAAczB,WAAWc,WAAW;AAE1CW,YAAYC,cAAc"}

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

@@ -1,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
-import { forwardRef, useMemo } from "react";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/content/Layout/LayoutFooter.tsx
@@ -32,18 +33,56 @@ const FooterElement = tasty(_LayoutContent, {
 	}
 });
 function LayoutFooter(props, ref) {
-	const { children, invertOrder, scrollbar = "tiny", mods, ...otherProps } = props;
-	const finalMods = useMemo(() => ({
-		inverted: invertOrder,
-		...mods
-	}), [invertOrder, mods]);
-	return /* @__PURE__ */ jsx(FooterElement, {
-		...otherProps,
-		ref,
-		mods: finalMods,
-		scrollbar,
-		children
-	});
+	const $ = c(15);
+	let children;
+	let invertOrder;
+	let mods;
+	let otherProps;
+	let t0;
+	if ($[0] !== props) {
+		({children, invertOrder, scrollbar: t0, mods, ...otherProps} = props);
+		$[0] = props;
+		$[1] = children;
+		$[2] = invertOrder;
+		$[3] = mods;
+		$[4] = otherProps;
+		$[5] = t0;
+	} else {
+		children = $[1];
+		invertOrder = $[2];
+		mods = $[3];
+		otherProps = $[4];
+		t0 = $[5];
+	}
+	const scrollbar = t0 === void 0 ? "tiny" : t0;
+	let t1;
+	if ($[6] !== invertOrder || $[7] !== mods) {
+		t1 = {
+			inverted: invertOrder,
+			...mods
+		};
+		$[6] = invertOrder;
+		$[7] = mods;
+		$[8] = t1;
+	} else t1 = $[8];
+	const finalMods = t1;
+	let t2;
+	if ($[9] !== children || $[10] !== finalMods || $[11] !== otherProps || $[12] !== ref || $[13] !== scrollbar) {
+		t2 = /* @__PURE__ */ jsx(FooterElement, {
+			...otherProps,
+			ref,
+			mods: finalMods,
+			scrollbar,
+			children
+		});
+		$[9] = children;
+		$[10] = finalMods;
+		$[11] = otherProps;
+		$[12] = ref;
+		$[13] = scrollbar;
+		$[14] = t2;
+	} else t2 = $[14];
+	return t2;
 }
 const _LayoutFooter = forwardRef(LayoutFooter);
 _LayoutFooter.displayName = "Layout.Footer";

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutFooter.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutFooter.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, useMemo } from 'react';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst FooterElement = tasty(LayoutContent, {\n  as: 'footer',\n  qa: 'LayoutFooter',\n  role: 'contentinfo',\n  styles: {\n    container: 'none',\n    // Footer inherits auto-border from LayoutContent\n    // (no border when last-child, which is typical for footers)\n    height: 'min 5x',\n    flexShrink: 0,\n    flexGrow: 0,\n    whiteSpace: 'nowrap',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      display: 'flex',\n      flow: {\n        '': 'row nowrap',\n        inverted: 'row-reverse nowrap',\n      },\n      placeContent: 'center space-between',\n      placeItems: 'center stretch',\n      gap: '1x',\n    },\n  },\n});\n\nexport interface CubeLayoutFooterProps extends CubeLayoutContentProps {\n  /** Inverts the order of children (primary action on right) */\n  invertOrder?: boolean;\n}\n\nfunction LayoutFooter(\n  props: CubeLayoutFooterProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    invertOrder,\n    scrollbar = 'tiny',\n    mods,\n    ...otherProps\n  } = props;\n\n  const finalMods = useMemo(\n    () => ({\n      inverted: invertOrder,\n      ...mods,\n    }),\n    [invertOrder, mods],\n  );\n\n  return (\n    <FooterElement\n      {...otherProps}\n      ref={ref}\n      mods={finalMods}\n      scrollbar={scrollbar}\n    >\n      {children}\n    </FooterElement>\n  );\n}\n\nconst _LayoutFooter = forwardRef(LayoutFooter);\n\n_LayoutFooter.displayName = 'Layout.Footer';\n\nexport { _LayoutFooter as LayoutFooter };\n"],"mappings":";;;;;;;AAKA,MAAM,gBAAgB,MAAMA,gBAAe;CACzC,IAAI;CACJ,IAAI;CACJ,MAAM;CACN,QAAQ;EACN,WAAW;EAGX,QAAQ;EACR,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,QAAQ;GACN,IAAI;GACJ,gBAAgB;GACjB;EAED,OAAO;GACL,SAAS;GACT,MAAM;IACJ,IAAI;IACJ,UAAU;IACX;GACD,cAAc;GACd,YAAY;GACZ,KAAK;GACN;EACF;CACF,CAAC;AAOF,SAAS,aACP,OACA,KACA;CACA,MAAM,EACJ,UACA,aACA,YAAY,QACZ,MACA,GAAG,eACD;CAEJ,MAAM,YAAY,eACT;EACL,UAAU;EACV,GAAG;EACJ,GACD,CAAC,aAAa,KAAK,CACpB;AAED,QACE,oBAAC;EACC,GAAI;EACC;EACL,MAAM;EACK;EAEV;GACa;;AAIpB,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}
+{"version":3,"file":"LayoutFooter.js","names":["tasty","ForwardedRef","forwardRef","useMemo","CubeLayoutContentProps","LayoutContent","FooterElement","as","qa","role","styles","container","height","flexShrink","flexGrow","whiteSpace","border","Inner","display","flow","inverted","placeContent","placeItems","gap","CubeLayoutFooterProps","invertOrder","LayoutFooter","props","ref","$","_c","children","mods","otherProps","t0","scrollbar","undefined","t1","finalMods","t2","_LayoutFooter","displayName"],"sources":["../../../../src/components/content/Layout/LayoutFooter.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, useMemo } from 'react';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst FooterElement = tasty(LayoutContent, {\n  as: 'footer',\n  qa: 'LayoutFooter',\n  role: 'contentinfo',\n  styles: {\n    container: 'none',\n    // Footer inherits auto-border from LayoutContent\n    // (no border when last-child, which is typical for footers)\n    height: 'min 5x',\n    flexShrink: 0,\n    flexGrow: 0,\n    whiteSpace: 'nowrap',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      display: 'flex',\n      flow: {\n        '': 'row nowrap',\n        inverted: 'row-reverse nowrap',\n      },\n      placeContent: 'center space-between',\n      placeItems: 'center stretch',\n      gap: '1x',\n    },\n  },\n});\n\nexport interface CubeLayoutFooterProps extends CubeLayoutContentProps {\n  /** Inverts the order of children (primary action on right) */\n  invertOrder?: boolean;\n}\n\nfunction LayoutFooter(\n  props: CubeLayoutFooterProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    invertOrder,\n    scrollbar = 'tiny',\n    mods,\n    ...otherProps\n  } = props;\n\n  const finalMods = useMemo(\n    () => ({\n      inverted: invertOrder,\n      ...mods,\n    }),\n    [invertOrder, mods],\n  );\n\n  return (\n    <FooterElement\n      {...otherProps}\n      ref={ref}\n      mods={finalMods}\n      scrollbar={scrollbar}\n    >\n      {children}\n    </FooterElement>\n  );\n}\n\nconst _LayoutFooter = forwardRef(LayoutFooter);\n\n_LayoutFooter.displayName = 'Layout.Footer';\n\nexport { _LayoutFooter as LayoutFooter };\n"],"mappings":";;;;;;;;AAKA,MAAMM,gBAAgBN,MAAMK,gBAAe;CACzCE,IAAI;CACJC,IAAI;CACJC,MAAM;CACNC,QAAQ;EACNC,WAAW;EAGXC,QAAQ;EACRC,YAAY;EACZC,UAAU;EACVC,YAAY;EACZC,QAAQ;GACN,IAAI;GACJ,gBAAgB;GACjB;EAEDC,OAAO;GACLC,SAAS;GACTC,MAAM;IACJ,IAAI;IACJC,UAAU;IACX;GACDC,cAAc;GACdC,YAAY;GACZC,KAAK;GACP;EACF;CACD,CAAC;AAOF,SAAAG,aAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;CAAA,IAAAN;CAAA,IAAAO;CAAA,IAAAC;CAAA,IAAAC;AAAA,KAAAL,EAAA,OAAAF,OAAA;AAIE,GAAA,CAAAI,UAAAN,aAAAU,WAAAD,IAAAF,SAAAC,cAMIN;AAAME,IAAA,KAAAF;AAAAE,IAAA,KAAAE;AAAAF,IAAA,KAAAJ;AAAAI,IAAA,KAAAG;AAAAH,IAAA,KAAAI;AAAAJ,IAAA,KAAAK;QAAA;AAAAH,aAAAF,EAAA;AAAAJ,gBAAAI,EAAA;AAAAG,SAAAH,EAAA;AAAAI,eAAAJ,EAAA;AAAAK,OAAAL,EAAA;;CAHR,MAAAM,YAAAD,OAAAE,SAAA,SAAAF;CAAkB,IAAAG;AAAA,KAAAR,EAAA,OAAAJ,eAAAI,EAAA,OAAAG,MAAA;AAMXK,OAAA;GAAAjB,UACKK;GAAW,GAClBO;GACJ;AAAAH,IAAA,KAAAJ;AAAAI,IAAA,KAAAG;AAAAH,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAJH,MAAAS,YACSD;CAKP,IAAAE;AAAA,KAAAV,EAAA,OAAAE,YAAAF,EAAA,QAAAS,aAAAT,EAAA,QAAAI,cAAAJ,EAAA,QAAAD,OAAAC,EAAA,QAAAM,WAAA;AAGAI,OAAA,oBAAC;GAAa,GACRN;GACCL;GACCU,MAAAA;GACKH;GAEVJ;IACa;AAAAF,IAAA,KAAAE;AAAAF,IAAA,MAAAS;AAAAT,IAAA,MAAAI;AAAAJ,IAAA,MAAAD;AAAAC,IAAA,MAAAM;AAAAN,IAAA,MAAAU;OAAAA,MAAAV,EAAA;AAAA,QAPhBU;;AAWJ,MAAMC,gBAAgBtC,WAAWwB,aAAa;AAE9Cc,cAAcC,cAAc"}

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

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -19,16 +20,52 @@ const GridElement = tasty(_LayoutContent, {
 	}
 });
 function LayoutGrid(props, ref) {
-	const { children, scrollbar = "tiny", columns, rows, template, ...otherProps } = props;
-	return /* @__PURE__ */ jsx(GridElement, {
-		...otherProps,
-		ref,
-		scrollbar,
-		gridColumns: columns,
-		gridRows: rows,
-		gridTemplate: template,
-		children
-	});
+	const $ = c(15);
+	let children;
+	let columns;
+	let otherProps;
+	let rows;
+	let t0;
+	let template;
+	if ($[0] !== props) {
+		({children, scrollbar: t0, columns, rows, template, ...otherProps} = props);
+		$[0] = props;
+		$[1] = children;
+		$[2] = columns;
+		$[3] = otherProps;
+		$[4] = rows;
+		$[5] = t0;
+		$[6] = template;
+	} else {
+		children = $[1];
+		columns = $[2];
+		otherProps = $[3];
+		rows = $[4];
+		t0 = $[5];
+		template = $[6];
+	}
+	const scrollbar = t0 === void 0 ? "tiny" : t0;
+	let t1;
+	if ($[7] !== children || $[8] !== columns || $[9] !== otherProps || $[10] !== ref || $[11] !== rows || $[12] !== scrollbar || $[13] !== template) {
+		t1 = /* @__PURE__ */ jsx(GridElement, {
+			...otherProps,
+			ref,
+			scrollbar,
+			gridColumns: columns,
+			gridRows: rows,
+			gridTemplate: template,
+			children
+		});
+		$[7] = children;
+		$[8] = columns;
+		$[9] = otherProps;
+		$[10] = ref;
+		$[11] = rows;
+		$[12] = scrollbar;
+		$[13] = template;
+		$[14] = t1;
+	} else t1 = $[14];
+	return t1;
 }
 const _LayoutGrid = forwardRef(LayoutGrid);
 _LayoutGrid.displayName = "Layout.Grid";

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutGrid.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutGrid.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef } from 'react';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst GridElement = tasty(LayoutContent, {\n  qa: 'LayoutGrid',\n  styles: {\n    container: 'none',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      display: 'grid',\n      flow: 'row',\n      padding: 0,\n    },\n  },\n});\n\nexport interface CubeLayoutGridProps extends CubeLayoutContentProps {\n  /** Grid template columns */\n  columns?: Styles['gridColumns'];\n  /** Grid template rows */\n  rows?: Styles['gridRows'];\n  /** Grid template shorthand */\n  template?: Styles['gridTemplate'];\n}\n\nfunction LayoutGrid(\n  props: CubeLayoutGridProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    scrollbar = 'tiny',\n    columns,\n    rows,\n    template,\n    ...otherProps\n  } = props;\n\n  return (\n    <GridElement\n      {...otherProps}\n      ref={ref}\n      scrollbar={scrollbar}\n      gridColumns={columns}\n      gridRows={rows}\n      gridTemplate={template}\n    >\n      {children}\n    </GridElement>\n  );\n}\n\nconst _LayoutGrid = forwardRef(LayoutGrid);\n\n_LayoutGrid.displayName = 'Layout.Grid';\n\nexport { _LayoutGrid as LayoutGrid };\n"],"mappings":";;;;;;;AAKA,MAAM,cAAc,MAAMA,gBAAe;CACvC,IAAI;CACJ,QAAQ;EACN,WAAW;EACX,YAAY;EACZ,UAAU;EAEV,OAAO;GACL,SAAS;GACT,MAAM;GACN,SAAS;GACV;EACF;CACF,CAAC;AAWF,SAAS,WACP,OACA,KACA;CACA,MAAM,EACJ,UACA,YAAY,QACZ,SACA,MACA,UACA,GAAG,eACD;AAEJ,QACE,oBAAC;EACC,GAAI;EACC;EACM;EACX,aAAa;EACb,UAAU;EACV,cAAc;EAEb;GACW;;AAIlB,MAAM,cAAc,WAAW,WAAW;AAE1C,YAAY,cAAc"}
+{"version":3,"file":"LayoutGrid.js","names":["Styles","tasty","ForwardedRef","forwardRef","CubeLayoutContentProps","LayoutContent","GridElement","qa","styles","container","flexShrink","flexGrow","Inner","display","flow","padding","CubeLayoutGridProps","columns","rows","template","LayoutGrid","props","ref","$","_c","children","otherProps","t0","scrollbar","undefined","t1","_LayoutGrid","displayName"],"sources":["../../../../src/components/content/Layout/LayoutGrid.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef } from 'react';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst GridElement = tasty(LayoutContent, {\n  qa: 'LayoutGrid',\n  styles: {\n    container: 'none',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      display: 'grid',\n      flow: 'row',\n      padding: 0,\n    },\n  },\n});\n\nexport interface CubeLayoutGridProps extends CubeLayoutContentProps {\n  /** Grid template columns */\n  columns?: Styles['gridColumns'];\n  /** Grid template rows */\n  rows?: Styles['gridRows'];\n  /** Grid template shorthand */\n  template?: Styles['gridTemplate'];\n}\n\nfunction LayoutGrid(\n  props: CubeLayoutGridProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    scrollbar = 'tiny',\n    columns,\n    rows,\n    template,\n    ...otherProps\n  } = props;\n\n  return (\n    <GridElement\n      {...otherProps}\n      ref={ref}\n      scrollbar={scrollbar}\n      gridColumns={columns}\n      gridRows={rows}\n      gridTemplate={template}\n    >\n      {children}\n    </GridElement>\n  );\n}\n\nconst _LayoutGrid = forwardRef(LayoutGrid);\n\n_LayoutGrid.displayName = 'Layout.Grid';\n\nexport { _LayoutGrid as LayoutGrid };\n"],"mappings":";;;;;;;;AAKA,MAAMM,cAAcL,MAAMI,gBAAe;CACvCE,IAAI;CACJC,QAAQ;EACNC,WAAW;EACXC,YAAY;EACZC,UAAU;EAEVC,OAAO;GACLC,SAAS;GACTC,MAAM;GACNC,SAAS;GACX;EACF;CACD,CAAC;AAWF,SAAAK,WAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;CAAA,IAAAR;CAAA,IAAAS;CAAA,IAAAR;CAAA,IAAAS;CAAA,IAAAR;AAAA,KAAAI,EAAA,OAAAF,OAAA;AAIE,GAAA,CAAAI,UAAAG,WAAAD,IAAAV,SAAAC,MAAAC,aAAAO,cAOIL;AAAME,IAAA,KAAAF;AAAAE,IAAA,KAAAE;AAAAF,IAAA,KAAAN;AAAAM,IAAA,KAAAG;AAAAH,IAAA,KAAAL;AAAAK,IAAA,KAAAI;AAAAJ,IAAA,KAAAJ;QAAA;AAAAM,aAAAF,EAAA;AAAAN,YAAAM,EAAA;AAAAG,eAAAH,EAAA;AAAAL,SAAAK,EAAA;AAAAI,OAAAJ,EAAA;AAAAJ,aAAAI,EAAA;;CALR,MAAAK,YAAAD,OAAAE,SAAA,SAAAF;CAAkB,IAAAG;AAAA,KAAAP,EAAA,OAAAE,YAAAF,EAAA,OAAAN,WAAAM,EAAA,OAAAG,cAAAH,EAAA,QAAAD,OAAAC,EAAA,QAAAL,QAAAK,EAAA,QAAAK,aAAAL,EAAA,QAAAJ,UAAA;AAQlBW,OAAA,oBAAC;GAAW,GACNJ;GACCJ;GACMM;GACEX,aAAAA;GACHC,UAAAA;GACIC,cAAAA;GAEbM;IACW;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAN;AAAAM,IAAA,KAAAG;AAAAH,IAAA,MAAAD;AAAAC,IAAA,MAAAL;AAAAK,IAAA,MAAAK;AAAAL,IAAA,MAAAJ;AAAAI,IAAA,MAAAO;OAAAA,MAAAP,EAAA;AAAA,QATdO;;AAaJ,MAAMC,cAAc5B,WAAWiB,WAAW;AAE1CW,YAAYC,cAAc"}

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

@@ -1,10 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { useAutoTooltip } from "../use-auto-tooltip.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Button } from "../../actions/Button/Button.js";
 import { Link } from "../../actions/Link/Link.js";
 import { _LayoutContent } from "./LayoutContent.js";
 import { SlashIcon } from "../../../icons/SlashIcon.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { Fragment, forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -95,47 +96,116 @@ const HeaderElement = tasty(_LayoutContent, {
 	}
 });
 function LayoutHeader(props, ref) {
+	const $ = c(63);
 	const { t } = useI18n();
-	const { title, level = 3, suffix, extra, subtitle, breadcrumbs, onBack, scrollbar = "tiny", children, mods, ...otherProps } = props;
-	const { labelRef, renderWithTooltip } = useAutoTooltip({
-		tooltip: true,
-		children: typeof title === "string" ? title : void 0
-	});
+	let breadcrumbs;
+	let children;
+	let extra;
+	let mods;
+	let onBack;
+	let otherProps;
+	let subtitle;
+	let suffix;
+	let t0;
+	let t1;
+	let title;
+	if ($[0] !== props) {
+		({title, level: t0, suffix, extra, subtitle, breadcrumbs, onBack, scrollbar: t1, children, mods, ...otherProps} = props);
+		$[0] = props;
+		$[1] = breadcrumbs;
+		$[2] = children;
+		$[3] = extra;
+		$[4] = mods;
+		$[5] = onBack;
+		$[6] = otherProps;
+		$[7] = subtitle;
+		$[8] = suffix;
+		$[9] = t0;
+		$[10] = t1;
+		$[11] = title;
+	} else {
+		breadcrumbs = $[1];
+		children = $[2];
+		extra = $[3];
+		mods = $[4];
+		onBack = $[5];
+		otherProps = $[6];
+		subtitle = $[7];
+		suffix = $[8];
+		t0 = $[9];
+		t1 = $[10];
+		title = $[11];
+	}
+	const level = t0 === void 0 ? 3 : t0;
+	const scrollbar = t1 === void 0 ? "tiny" : t1;
+	const t2 = typeof title === "string" ? title : void 0;
+	let t3;
+	if ($[12] !== t2) {
+		t3 = {
+			tooltip: true,
+			children: t2
+		};
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	const { labelRef, renderWithTooltip } = useAutoTooltip(t3);
 	const hasBreadcrumbs = breadcrumbs && breadcrumbs.length > 0;
-	const renderBreadcrumbs = () => {
-		if (!hasBreadcrumbs) return null;
-		return /* @__PURE__ */ jsx("div", {
-			"data-element": "Breadcrumbs",
-			children: breadcrumbs.map(([label, href], index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Link, {
-				to: href,
-				children: label
-			}), /* @__PURE__ */ jsx(SlashIcon, {})] }, href))
-		});
-	};
-	const renderTitle = (tooltipProps, tooltipRef) => {
-		if (!title) return null;
-		return /* @__PURE__ */ jsx(`h${level}`, {
-			ref: tooltipRef,
-			"data-element": "Title",
-			"data-level": level,
-			...tooltipProps,
-			children: /* @__PURE__ */ jsx("span", {
-				ref: labelRef,
-				children: title
-			})
-		});
-	};
-	return /* @__PURE__ */ jsxs(HeaderElement, {
-		...otherProps,
-		ref,
-		mods: {
-			...mods,
-			level
-		},
-		scrollbar,
-		children: [
-			renderBreadcrumbs(),
-			onBack && /* @__PURE__ */ jsx("div", {
+	let t4;
+	if ($[14] !== breadcrumbs || $[15] !== hasBreadcrumbs) {
+		t4 = () => {
+			if (!hasBreadcrumbs) return null;
+			return /* @__PURE__ */ jsx("div", {
+				"data-element": "Breadcrumbs",
+				children: breadcrumbs.map(_temp)
+			});
+		};
+		$[14] = breadcrumbs;
+		$[15] = hasBreadcrumbs;
+		$[16] = t4;
+	} else t4 = $[16];
+	const renderBreadcrumbs = t4;
+	let T0;
+	let t10;
+	let t11;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[17] !== labelRef || $[18] !== level || $[19] !== mods || $[20] !== onBack || $[21] !== otherProps || $[22] !== ref || $[23] !== renderBreadcrumbs || $[24] !== renderWithTooltip || $[25] !== scrollbar || $[26] !== t || $[27] !== title) {
+		const renderTitle = (tooltipProps, tooltipRef) => {
+			if (!title) return null;
+			return /* @__PURE__ */ jsx(`h${level}`, {
+				ref: tooltipRef,
+				"data-element": "Title",
+				"data-level": level,
+				...tooltipProps,
+				children: /* @__PURE__ */ jsx("span", {
+					ref: labelRef,
+					children: title
+				})
+			});
+		};
+		T0 = HeaderElement;
+		t5 = otherProps;
+		t6 = ref;
+		if ($[36] !== level || $[37] !== mods) {
+			t7 = {
+				...mods,
+				level
+			};
+			$[36] = level;
+			$[37] = mods;
+			$[38] = t7;
+		} else t7 = $[38];
+		t8 = scrollbar;
+		if ($[39] !== renderBreadcrumbs) {
+			t9 = renderBreadcrumbs();
+			$[39] = renderBreadcrumbs;
+			$[40] = t9;
+		} else t9 = $[40];
+		if ($[41] !== onBack || $[42] !== t) {
+			t10 = onBack && /* @__PURE__ */ jsx("div", {
 				"data-element": "Back",
 				children: /* @__PURE__ */ jsx(Button, {
 					type: "clear",
@@ -143,23 +213,107 @@ function LayoutHeader(props, ref) {
 					"aria-label": t("layout.goBack", "Go back"),
 					onPress: onBack
 				})
-			}),
-			renderWithTooltip(renderTitle, "bottom"),
-			suffix && /* @__PURE__ */ jsx("div", {
-				"data-element": "Suffix",
-				children: suffix
-			}),
-			extra && /* @__PURE__ */ jsx("div", {
-				"data-element": "Extra",
-				children: extra
-			}),
-			subtitle && /* @__PURE__ */ jsx("div", {
-				"data-element": "Subtitle",
-				children: subtitle
-			}),
-			children
-		]
-	});
+			});
+			$[41] = onBack;
+			$[42] = t;
+			$[43] = t10;
+		} else t10 = $[43];
+		t11 = renderWithTooltip(renderTitle, "bottom");
+		$[17] = labelRef;
+		$[18] = level;
+		$[19] = mods;
+		$[20] = onBack;
+		$[21] = otherProps;
+		$[22] = ref;
+		$[23] = renderBreadcrumbs;
+		$[24] = renderWithTooltip;
+		$[25] = scrollbar;
+		$[26] = t;
+		$[27] = title;
+		$[28] = T0;
+		$[29] = t10;
+		$[30] = t11;
+		$[31] = t5;
+		$[32] = t6;
+		$[33] = t7;
+		$[34] = t8;
+		$[35] = t9;
+	} else {
+		T0 = $[28];
+		t10 = $[29];
+		t11 = $[30];
+		t5 = $[31];
+		t6 = $[32];
+		t7 = $[33];
+		t8 = $[34];
+		t9 = $[35];
+	}
+	let t12;
+	if ($[44] !== suffix) {
+		t12 = suffix && /* @__PURE__ */ jsx("div", {
+			"data-element": "Suffix",
+			children: suffix
+		});
+		$[44] = suffix;
+		$[45] = t12;
+	} else t12 = $[45];
+	let t13;
+	if ($[46] !== extra) {
+		t13 = extra && /* @__PURE__ */ jsx("div", {
+			"data-element": "Extra",
+			children: extra
+		});
+		$[46] = extra;
+		$[47] = t13;
+	} else t13 = $[47];
+	let t14;
+	if ($[48] !== subtitle) {
+		t14 = subtitle && /* @__PURE__ */ jsx("div", {
+			"data-element": "Subtitle",
+			children: subtitle
+		});
+		$[48] = subtitle;
+		$[49] = t14;
+	} else t14 = $[49];
+	let t15;
+	if ($[50] !== T0 || $[51] !== children || $[52] !== t10 || $[53] !== t11 || $[54] !== t12 || $[55] !== t13 || $[56] !== t14 || $[57] !== t5 || $[58] !== t6 || $[59] !== t7 || $[60] !== t8 || $[61] !== t9) {
+		t15 = /* @__PURE__ */ jsxs(T0, {
+			...t5,
+			ref: t6,
+			mods: t7,
+			scrollbar: t8,
+			children: [
+				t9,
+				t10,
+				t11,
+				t12,
+				t13,
+				t14,
+				children
+			]
+		});
+		$[50] = T0;
+		$[51] = children;
+		$[52] = t10;
+		$[53] = t11;
+		$[54] = t12;
+		$[55] = t13;
+		$[56] = t14;
+		$[57] = t5;
+		$[58] = t6;
+		$[59] = t7;
+		$[60] = t8;
+		$[61] = t9;
+		$[62] = t15;
+	} else t15 = $[62];
+	return t15;
+}
+function _temp(t0, index) {
+	const [label, href] = t0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Link, {
+		to: href,
+		children: label
+	}), /* @__PURE__ */ jsx(SlashIcon, {})] }, href);
 }
 const _LayoutHeader = forwardRef(LayoutHeader);
 _LayoutHeader.displayName = "Layout.Header";