@kushagradhawan/kookie-ui 0.1.72 → 0.1.74

package/src/components/shell.tsx

@@ -38,6 +38,7 @@ import { Bottom } from './_internal/shell-bottom.js';
 import { Inspector } from './_internal/shell-inspector.js';
 import type { PresentationValue, ResponsivePresentation, PaneMode, SidebarMode, PaneSizePersistence, Breakpoint, PaneTarget, Responsive, PaneBaseProps } from './shell.types.js';
 import { _BREAKPOINTS } from './shell.types.js';
+import { normalizeToPx } from '../helpers/normalize-to-px.js';
 import {
   ShellProvider,
   useShell,
@@ -265,13 +266,57 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
     (el) => React.isValidElement(el) && (el as any).type?.displayName === 'Shell.Inspector' && typeof (el as any).props?.open !== 'undefined' && Boolean((el as any).props?.open),
   );
 
+  // Detect Sidebar initial state from props
+  const getSidebarInitialState = (): SidebarMode => {
+    const sidebarEl = initialChildren.find((el) => React.isValidElement(el) && (el as any).type?.displayName === 'Shell.Sidebar');
+    if (!sidebarEl) return 'expanded';
+    const props = (sidebarEl as any).props;
+    // Check controlled state first
+    if (typeof props?.state !== 'undefined') {
+      if (typeof props.state === 'string') return props.state as SidebarMode;
+      // Responsive object - use 'initial' breakpoint or first defined value
+      if (typeof props.state === 'object') {
+        return (props.state.initial ?? Object.values(props.state)[0] ?? 'expanded') as SidebarMode;
+      }
+    }
+    // Check defaultState
+    if (typeof props?.defaultState !== 'undefined') {
+      if (typeof props.defaultState === 'string') return props.defaultState as SidebarMode;
+      if (typeof props.defaultState === 'object') {
+        return (props.defaultState.initial ?? Object.values(props.defaultState)[0] ?? 'expanded') as SidebarMode;
+      }
+    }
+    return 'expanded';
+  };
+
+  // Detect Bottom initial state from props
+  const getBottomInitialState = (): PaneMode => {
+    const bottomEl = initialChildren.find((el) => React.isValidElement(el) && (el as any).type?.displayName === 'Shell.Bottom');
+    if (!bottomEl) return 'collapsed';
+    const props = (bottomEl as any).props;
+    // Check controlled open first
+    if (typeof props?.open !== 'undefined') {
+      if (typeof props.open === 'boolean') return props.open ? 'expanded' : 'collapsed';
+      // Responsive object - use 'initial' breakpoint or first defined value
+      if (typeof props.open === 'object') {
+        const val = props.open.initial ?? Object.values(props.open)[0];
+        return val ? 'expanded' : 'collapsed';
+      }
+    }
+    // Check defaultOpen
+    if (typeof props?.defaultOpen !== 'undefined') {
+      return props.defaultOpen ? 'expanded' : 'collapsed';
+    }
+    return 'collapsed';
+  };
+
   // Pane state management via reducer
   const [paneState, dispatchPane] = React.useReducer(paneReducer, {
     leftMode: hasPanelDefaultOpen || hasRailDefaultOpen ? 'expanded' : 'collapsed',
     panelMode: hasPanelDefaultOpen ? 'expanded' : 'collapsed',
-    sidebarMode: 'expanded',
+    sidebarMode: getSidebarInitialState(),
     inspectorMode: hasInspectorDefaultOpen || hasInspectorOpenControlled ? 'expanded' : 'collapsed',
-    bottomMode: 'collapsed',
+    bottomMode: getBottomInitialState(),
   });
   const setLeftMode = React.useCallback((mode: PaneMode) => dispatchPane({ type: 'SET_LEFT_MODE', mode }), []);
   const setPanelMode = React.useCallback((mode: PaneMode) => dispatchPane({ type: 'SET_PANEL_MODE', mode }), []);
@@ -867,15 +912,26 @@ const Panel = assignShellSlot(
       sizeUpdateMs = 50,
     } = initialProps;
     const panelDomProps = extractPaneDomProps(initialProps, PANEL_DOM_PROP_KEYS);
+    // Ref for debounce cleanup
+    const debounceTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+    // Cleanup debounce timeout on unmount or when dependencies change
+    React.useEffect(() => {
+      return () => {
+        if (debounceTimeoutRef.current) {
+          clearTimeout(debounceTimeoutRef.current);
+          debounceTimeoutRef.current = null;
+        }
+      };
+    }, [onSizeChange, sizeUpdate, sizeUpdateMs]);
     // Throttled/debounced emitter for onSizeChange
     const emitSizeChange = React.useMemo(() => {
       if (!onSizeChange) return () => {};
       if (sizeUpdate === 'debounce') {
-        let t: any = null;
         const fn = (s: number, meta: PanelSizeChangeMeta) => {
-          if (t) clearTimeout(t);
-          t = setTimeout(() => {
+          if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
+          debounceTimeoutRef.current = setTimeout(() => {
             onSizeChange?.(s, meta);
+            debounceTimeoutRef.current = null;
           }, sizeUpdateMs);
         };
         return fn;
@@ -934,12 +990,16 @@ const Panel = assignShellSlot(
     }, [shell, open]);
 
     // Dev-only warning if switching controlled/uncontrolled between renders
+    const wasControlledRef = React.useRef<boolean | null>(null);
     React.useEffect(() => {
       const isControlled = typeof open !== 'undefined';
-      (Panel as any)._wasControlled = (Panel as any)._wasControlled ?? isControlled;
-      if ((Panel as any)._wasControlled !== isControlled) {
+      if (wasControlledRef.current === null) {
+        wasControlledRef.current = isControlled;
+        return;
+      }
+      if (wasControlledRef.current !== isControlled) {
         console.warn('Shell.Panel: Switching between controlled and uncontrolled `open` is not supported.');
-        (Panel as any)._wasControlled = isControlled;
+        wasControlledRef.current = isControlled;
       }
     }, [open]);
 
@@ -971,26 +1031,8 @@ const Panel = assignShellSlot(
 
     const isOverlay = shell.leftResolvedPresentation === 'overlay';
 
-    // Normalize CSS lengths to px
-    const normalizeToPx = React.useCallback((value: number | string | undefined): number | undefined => {
-      if (value == null) return undefined;
-      if (typeof value === 'number' && Number.isFinite(value)) return value;
-      const str = String(value).trim();
-      if (!str) return undefined;
-      if (str.endsWith('px')) return Number.parseFloat(str);
-      if (str.endsWith('rem')) {
-        const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16') || 16;
-        return Number.parseFloat(str) * rem;
-      }
-      if (str.endsWith('%')) {
-        const pct = Number.parseFloat(str);
-        const base = document.documentElement.clientWidth || window.innerWidth || 0;
-        return (pct / 100) * base;
-      }
-      // Bare number-like string
-      const n = Number.parseFloat(str);
-      return Number.isFinite(n) ? n : undefined;
-    }, []);
+    // Normalize CSS lengths to px helper
+    const normalizeSizeToPx = React.useCallback((value: number | string | undefined) => normalizeToPx(value, 'horizontal'), []);
 
     // Derive a default persistence adapter from paneId if none provided
     const persistenceAdapter = React.useMemo(() => {
@@ -1038,7 +1080,7 @@ const Panel = assignShellSlot(
     React.useEffect(() => {
       if (!localRef.current) return;
       if (typeof size === 'undefined' && typeof defaultSize !== 'undefined') {
-        const px = normalizeToPx(defaultSize);
+        const px = normalizeSizeToPx(defaultSize);
         if (typeof px === 'number' && Number.isFinite(px)) {
           // Clamp to min/max if provided
           const minPx = typeof minSize === 'number' ? minSize : undefined;
@@ -1055,7 +1097,7 @@ const Panel = assignShellSlot(
     React.useEffect(() => {
       if (!localRef.current) return;
       if (typeof size === 'undefined') return;
-      const px = normalizeToPx(size);
+      const px = normalizeSizeToPx(size);
       if (typeof px === 'number' && Number.isFinite(px)) {
         const minPx = typeof minSize === 'number' ? minSize : undefined;
         const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -1063,7 +1105,7 @@ const Panel = assignShellSlot(
         localRef.current.style.setProperty('--panel-size', `${clamped}px`);
         emitSizeChange(clamped, { reason: 'controlled' });
       }
-    }, [size, minSize, maxSize, normalizeToPx, emitSizeChange]);
+    }, [size, minSize, maxSize, normalizeSizeToPx, emitSizeChange]);
 
     // Ensure Left container width is auto whenever Panel is expanded in fixed presentation
     React.useEffect(() => {
@@ -1258,7 +1300,16 @@ const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ target, act
   );
 
   return (
-    <button {...props} ref={ref} onClick={handleClick} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} data-shell-trigger={target} data-shell-action={action}>
+    <button
+      {...props}
+      ref={ref}
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      data-shell-trigger={target}
+      data-shell-action={action}
+      aria-expanded={!isCollapsed}
+    >
       {children}
     </button>
   );

package/src/helpers/index.ts

@@ -11,4 +11,5 @@ export * from './input-attributes.js';
 export * from './is-responsive-object.js';
 export * from './map-prop-values.js';
 export * from './merge-styles.js';
+export * from './normalize-to-px.js';
 export * from './require-react-element.js';

package/src/helpers/normalize-to-px.ts

@@ -0,0 +1,42 @@
+/**
+ * Normalize CSS length values to pixels.
+ * Supports: px, rem, %, and bare numbers.
+ *
+ * @param value - The value to normalize (number, string, or undefined)
+ * @param orientation - 'horizontal' for width-based % or 'vertical' for height-based %
+ * @returns The value in pixels, or undefined if invalid
+ */
+export function normalizeToPx(
+  value: number | string | undefined,
+  orientation: 'horizontal' | 'vertical' = 'horizontal',
+): number | undefined {
+  if (value == null) return undefined;
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+
+  const str = String(value).trim();
+  if (!str) return undefined;
+
+  // px: direct parse
+  if (str.endsWith('px')) return Number.parseFloat(str);
+
+  // rem: multiply by root font size
+  if (str.endsWith('rem')) {
+    const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16') || 16;
+    return Number.parseFloat(str) * rem;
+  }
+
+  // %: calculate based on viewport dimension
+  if (str.endsWith('%')) {
+    const pct = Number.parseFloat(str);
+    const base =
+      orientation === 'horizontal'
+        ? document.documentElement.clientWidth || window.innerWidth || 0
+        : document.documentElement.clientHeight || window.innerHeight || 0;
+    return (pct / 100) * base;
+  }
+
+  // Bare number-like string
+  const n = Number.parseFloat(str);
+  return Number.isFinite(n) ? n : undefined;
+}
+

package/styles.css

@@ -22091,10 +22091,12 @@
 }
 .rt-ShellSidebar[data-mode='collapsed']{
   width: 0px;
-  transition-delay: var(--motion-duration-small);
   position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
+  flex-shrink: 0;
+  flex-basis: 0;
+  transition-delay: var(--motion-duration-small);
 }
 .rt-ShellSidebarContent{
   display: flex;
@@ -22162,10 +22164,12 @@
 }
 .rt-ShellInspector[data-mode='collapsed']{
   width: 0px;
-  transition-delay: var(--motion-duration-small);
   position: absolute;
   inset-block: 0;
   inset-inline-end: 0;
+  flex-shrink: 0;
+  flex-basis: 0;
+  transition-delay: var(--motion-duration-small);
 }
 .rt-ShellInspectorContent{
   display: flex;