@womp/kookie-ui 0.36.0 → 0.37.1

package/schemas/shell-rail.json

@@ -111,44 +111,8 @@
         },
         "children": {},
         "open": {
-          "description": "The open state, when controlled. A responsive object is deprecated.",
-          "anyOf": [
-            {
-              "type": "boolean"
-            },
-            {
-              "anyOf": [
-                {
-                  "type": "boolean"
-                },
-                {
-                  "type": "object",
-                  "properties": {
-                    "initial": {
-                      "type": "boolean"
-                    },
-                    "xs": {
-                      "type": "boolean"
-                    },
-                    "sm": {
-                      "type": "boolean"
-                    },
-                    "md": {
-                      "type": "boolean"
-                    },
-                    "lg": {
-                      "type": "boolean"
-                    },
-                    "xl": {
-                      "type": "boolean"
-                    }
-                  },
-                  "additionalProperties": false
-                }
-              ],
-              "description": "Responsive open state"
-            }
-          ]
+          "description": "The open state, when controlled",
+          "type": "boolean"
         },
         "defaultOpen": {
           "description": "The starting state. A responsive object leaves the pane untouched, with that object as the answer at each breakpoint.",

package/schemas/shell-sidebar.json

@@ -158,109 +158,12 @@
         "sizeUpdateMs": {
           "type": "number"
         },
-        "snapPoints": {
-          "description": "Deprecated, removed in 1.0",
-          "type": "array",
-          "items": {
-            "type": "number"
-          }
-        },
-        "snapTolerance": {
-          "description": "Deprecated, removed in 1.0",
-          "type": "number"
-        },
-        "collapseThreshold": {
-          "description": "Deprecated, removed in 1.0",
-          "type": "number"
-        },
-        "paneId": {
-          "description": "Deprecated, removed in 1.0",
-          "type": "string"
-        },
-        "persistence": {
-          "type": "object",
-          "properties": {},
-          "description": "Deprecated, removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`.",
-          "additionalProperties": false
-        },
         "state": {
-          "description": "The state, when controlled. A responsive object is deprecated.",
-          "anyOf": [
-            {
-              "type": "string",
-              "enum": [
-                "collapsed",
-                "expanded"
-              ],
-              "description": "Sidebar state"
-            },
-            {
-              "anyOf": [
-                {
-                  "type": "string",
-                  "enum": [
-                    "collapsed",
-                    "expanded"
-                  ],
-                  "description": "Sidebar state"
-                },
-                {
-                  "type": "object",
-                  "properties": {
-                    "initial": {
-                      "type": "string",
-                      "enum": [
-                        "collapsed",
-                        "expanded"
-                      ],
-                      "description": "Sidebar state"
-                    },
-                    "xs": {
-                      "type": "string",
-                      "enum": [
-                        "collapsed",
-                        "expanded"
-                      ],
-                      "description": "Sidebar state"
-                    },
-                    "sm": {
-                      "type": "string",
-                      "enum": [
-                        "collapsed",
-                        "expanded"
-                      ],
-                      "description": "Sidebar state"
-                    },
-                    "md": {
-                      "type": "string",
-                      "enum": [
-                        "collapsed",
-                        "expanded"
-                      ],
-                      "description": "Sidebar state"
-                    },
-                    "lg": {
-                      "type": "string",
-                      "enum": [
-                        "collapsed",
-                        "expanded"
-                      ],
-                      "description": "Sidebar state"
-                    },
-                    "xl": {
-                      "type": "string",
-                      "enum": [
-                        "collapsed",
-                        "expanded"
-                      ],
-                      "description": "Sidebar state"
-                    }
-                  },
-                  "additionalProperties": false
-                }
-              ],
-              "description": "Responsive sidebar state"
-            }
+          "description": "The state, when controlled",
+          "type": "string",
+          "enum": [
+            "collapsed",
+            "expanded"
           ]
         },
         "defaultState": {

package/schemas/shell-trigger.json

@@ -7,7 +7,6 @@
         "target": {
           "type": "string",
           "enum": [
-            "left",
             "rail",
             "panel",
             "sidebar",
@@ -26,11 +25,6 @@
             "collapse"
           ]
         },
-        "peekOnHover": {
-          "default": false,
-          "description": "Deprecated, removed in 1.0. Shows a preview of a closed pane on hover.",
-          "type": "boolean"
-        },
         "type": {
           "default": "button",
           "description": "The button type",

package/src/components/_internal/shell-bottom.tsx

@@ -7,14 +7,14 @@ import { PaneResizeContext } from './shell-resize.js';
 import { BottomHandle, PaneHandle } from './shell-handles.js';
 import { usePane, paneAttributes, usePresentationTable } from './shell-pane.js';
 import { splitHandles, useInitialPaneSize, useResizablePane, type SizeChangeMeta } from './shell-resizable.js';
-import { useFrameRegistration, warnOnce } from './shell-store.js';
-import { bottomAnchoredGrowth, detailRest, toPaneValue, withoutRemovedPaneProps } from './shell-rest.js';
+import { useFrameRegistration } from './shell-store.js';
+import { bottomAnchoredGrowth, detailRest, toPaneValue } from './shell-rest.js';
 import { PageScope } from './page-scope.js';
 import { readBreakpoint } from '../../hooks/use-breakpoint.js';
-import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps } from '../shell.types.js';
+import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, PaneOpenChangeReason } from '../shell.types.js';
 
-type BottomOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' | 'dismiss' };
-type BottomControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; defaultOpen?: never };
+type BottomOpenChangeMeta = { reason: PaneOpenChangeReason };
+type BottomControlledProps = { open: boolean; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; defaultOpen?: never };
 /** Since 0.8.0 `defaultOpen` takes a responsive object here too, as the docs already said it did. */
 type BottomUncontrolledProps = { defaultOpen?: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; open?: never };
 type BottomSizeControlledProps = { size: number | string; defaultSize?: never };
@@ -50,16 +50,9 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((props
     maxSize = 400,
     resizable = false,
     collapsible = true,
-    onExpand,
-    onCollapse,
     onResize,
     onResizeStart,
     onResizeEnd,
-    snapPoints,
-    snapTolerance,
-    collapseThreshold,
-    paneId,
-    persistence,
     children,
     style,
     size,
@@ -83,17 +76,10 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((props
     presentationTable: table,
     builtIn: detailRest,
     onChange: (value, reason) => onOpenChange?.(value !== 'closed', { reason }),
-    onExpand,
-    onCollapse,
     size: expandedSize,
   });
   useFrameRegistration('bottom', flush);
 
-  React.useEffect(() => {
-    if (snapPoints !== undefined || collapseThreshold !== undefined || paneId !== undefined || persistence !== undefined) {
-      warnOnce('Shell.Bottom: `snapPoints`, `collapseThreshold`, `paneId` and `persistence` are deprecated and are removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`.');
-    }
-  }, [snapPoints, collapseThreshold, paneId, persistence]);
 
   const elementRef = React.useRef<HTMLElement | null>(null);
   const composedRef = useComposedRefs(ref, pane.setElement, elementRef);
@@ -119,14 +105,8 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((props
     onResize,
     onResizeStart,
     onResizeEnd,
-    snapPoints,
-    snapTolerance,
-    collapseThreshold,
-    paneId,
-    persistence,
     overlaying: pane.overlaying,
     overlayingNow: () => table[readBreakpoint()] === 'overlay',
-    requestCollapse: () => pane.setValue('closed', 'toggle'),
     requestToggle: () => pane.toggle('toggle'),
   });
 
@@ -137,7 +117,7 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((props
 
   return (
     <div
-      {...withoutRemovedPaneProps(domProps)}
+      {...domProps}
       id={pane.id}
       ref={composedRef}
       className={classNames('kui-ShellPane', 'kui-ShellBottom', className)}

package/src/components/_internal/shell-handles.tsx

@@ -27,12 +27,8 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
     onResize,
     onResizeStart,
     onResizeEnd,
-    snapPoints,
-    snapTolerance,
-    collapseThreshold,
     collapsible,
     target,
-    requestCollapse,
     requestToggle,
   } = usePaneResize();
 
@@ -158,9 +154,6 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
         onResizeStart?.(startSize);
 
         let current = startSize;
-        // The unclamped size, so `collapseThreshold` is compared before the
-        // clamp: a threshold below `minSize` can then still collapse the pane.
-        let raw = startSize;
         let frame = 0;
         let pending: number | null = null;
         const flush = () => {
@@ -189,8 +182,7 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
           if (ev === lastHandledMove) return;
           lastHandledMove = ev;
           const client = orientation === 'vertical' ? ev.clientX : ev.clientY;
-          raw = startSize + (client - startClient) * sign;
-          current = clamp(raw);
+          current = clamp(startSize + (client - startClient) * sign);
           write(container, current);
           pending = current;
           if (!frame) frame = requestAnimationFrame(flush);
@@ -232,29 +224,7 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
           if (frame) cancelAnimationFrame(frame);
           flush();
 
-          if (collapsible && typeof collapseThreshold === 'number' && raw <= collapseThreshold) {
-            // A drag past the threshold closes the pane and keeps no size: the
-            // pane opens again at the size it had before the drag. The drag
-            // still ends, at that size, so a consumer that started something
-            // in onResizeStart can stop it.
-            write(container, startSize);
-            onResize?.(startSize);
-            cleanup();
-            requestCollapse?.();
-            onResizeEnd?.(startSize);
-            return;
-          }
-
-          let settled = current;
-          if (snapPoints && snapPoints.length) {
-            const nearest = snapPoints.reduce((acc, p) => (Math.abs(p - current) < Math.abs(acc - current) ? p : acc), snapPoints[0]);
-            if (Math.abs(nearest - current) <= snapTolerance) {
-              settled = clamp(nearest);
-              write(container, settled);
-              onResize?.(settled);
-            }
-          }
-          onResizeEnd?.(settled);
+          onResizeEnd?.(current);
           cleanup();
         };
 

package/src/components/_internal/shell-inspector.tsx

@@ -7,14 +7,14 @@ import { PaneResizeContext } from './shell-resize.js';
 import { InspectorHandle, PaneHandle } from './shell-handles.js';
 import { usePane, paneAttributes, usePresentationTable } from './shell-pane.js';
 import { splitHandles, useInitialPaneSize, useResizablePane, type SizeChangeMeta } from './shell-resizable.js';
-import { useFrameRegistration, warnOnce } from './shell-store.js';
-import { detailRest, endAnchoredGrowth, toPaneValue, withoutRemovedPaneProps } from './shell-rest.js';
+import { useFrameRegistration } from './shell-store.js';
+import { detailRest, endAnchoredGrowth, toPaneValue } from './shell-rest.js';
 import { PageScope } from './page-scope.js';
 import { readBreakpoint } from '../../hooks/use-breakpoint.js';
-import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps } from '../shell.types.js';
+import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, PaneOpenChangeReason } from '../shell.types.js';
 
-type InspectorOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' | 'dismiss' };
-type InspectorControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: InspectorOpenChangeMeta) => void; defaultOpen?: never };
+type InspectorOpenChangeMeta = { reason: PaneOpenChangeReason };
+type InspectorControlledProps = { open: boolean; onOpenChange?: (open: boolean, meta: InspectorOpenChangeMeta) => void; defaultOpen?: never };
 type InspectorUncontrolledProps = { defaultOpen?: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: InspectorOpenChangeMeta) => void; open?: never };
 type InspectorSizeControlledProps = { size: number | string; defaultSize?: never };
 type InspectorSizeUncontrolledProps = { defaultSize?: number | string; size?: never };
@@ -52,16 +52,9 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
     maxSize = 500,
     resizable = false,
     collapsible = true,
-    onExpand,
-    onCollapse,
     onResize,
     onResizeStart,
     onResizeEnd,
-    snapPoints,
-    snapTolerance,
-    collapseThreshold,
-    paneId,
-    persistence,
     children,
     style,
     onSizeChange,
@@ -85,17 +78,10 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
     presentationTable: table,
     builtIn: detailRest,
     onChange: (value, reason) => onOpenChange?.(value !== 'closed', { reason }),
-    onExpand,
-    onCollapse,
     size: expandedSize,
   });
   useFrameRegistration('inspector', flush);
 
-  React.useEffect(() => {
-    if (snapPoints !== undefined || collapseThreshold !== undefined || paneId !== undefined || persistence !== undefined) {
-      warnOnce('Shell.Inspector: `snapPoints`, `collapseThreshold`, `paneId` and `persistence` are deprecated and are removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`.');
-    }
-  }, [snapPoints, collapseThreshold, paneId, persistence]);
 
   const elementRef = React.useRef<HTMLElement | null>(null);
   const composedRef = useComposedRefs(ref, pane.setElement, elementRef);
@@ -121,14 +107,8 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
     onResize,
     onResizeStart,
     onResizeEnd,
-    snapPoints,
-    snapTolerance,
-    collapseThreshold,
-    paneId,
-    persistence,
     overlaying: pane.overlaying,
     overlayingNow: () => table[readBreakpoint()] === 'overlay',
-    requestCollapse: () => pane.setValue('closed', 'toggle'),
     requestToggle: () => pane.toggle('toggle'),
   });
 
@@ -138,7 +118,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
   const initialSize = useInitialPaneSize(size, defaultSize, minSize, maxSize);
   return (
     <div
-      {...withoutRemovedPaneProps(domProps)}
+      {...domProps}
       role={domProps.role ?? 'complementary'}
       id={pane.id}
       ref={composedRef}

package/src/components/_internal/shell-pane.tsx

@@ -9,10 +9,8 @@ import {
   notifyShellStore,
   tableAttributes,
   tableOf,
-  usePeeking,
   useShellStore,
   useStableKey,
-  warnOnce,
   type OpenChangeReason,
   type PaneEntry,
   type PaneValue,
@@ -28,8 +26,8 @@ export type UsePaneOptions = {
   /** The prop names a warning should use: `open`/`defaultOpen`, or `state`/`defaultState`. */
   propNames: { controlled: string; default: string };
   id: string | undefined;
-  /** The controlled value. A responsive object is deprecated: it is resolved against the current breakpoint. */
-  controlled: ResponsiveValue | undefined;
+  /** The controlled value. */
+  controlled: PaneValue | undefined;
   /**
    * The uncontrolled default. A single value fixes where the pane starts. A
    * responsive object leaves the pane untouched (`auto`), with that object as
@@ -44,8 +42,6 @@ export type UsePaneOptions = {
   onChange: ((value: PaneValue, reason: OpenChangeReason) => void) | undefined;
   /** The value a toggle moves to. Defaults to open and closed in turn. */
   toggleNext?: (current: PaneValue, defaultHere: PaneValue | undefined) => PaneValue;
-  onExpand: (() => void) | undefined;
-  onCollapse: (() => void) | undefined;
   /** The pane's designed open width, published for the panes beside it. */
   size: number;
 };
@@ -54,15 +50,6 @@ export type PaneController = ReturnType<typeof usePane>;
 
 const isMap = (value: ResponsiveValue | undefined): value is Partial<Record<Breakpoint, PaneValue>> => typeof value === 'object' && value !== null;
 
-/** The first value a responsive object states, smallest breakpoint first. */
-function firstStated(map: Partial<Record<Breakpoint, PaneValue>>): PaneValue {
-  for (const bp of ['initial', 'xs', 'sm', 'md', 'lg', 'xl'] as const) {
-    const value = map[bp];
-    if (value !== undefined) return value;
-  }
-  return 'closed';
-}
-
 /** Everything the togglable panes share: their state, their registry entry and their callbacks. */
 export function usePane(options: UsePaneOptions) {
   const { name, label, propNames, presentationTable, builtIn } = options;
@@ -71,34 +58,21 @@ export function usePane(options: UsePaneOptions) {
   const id = options.id ?? `shell-${name}${generatedId}`;
 
   const controlled = options.controlled !== undefined;
-  const controlledIsMap = isMap(options.controlled);
-  if (controlledIsMap) {
-    warnOnce(
-      `Shell.${label}: a responsive \`${propNames.controlled}\` is deprecated and is removed in 1.0. ` +
-        `Pass a boolean and decide it from your own state, or use \`${propNames.default}\` with a responsive object.`,
-    );
-  }
-
-  // A responsive controlled value is resolved the way a responsive default
-  // is: it becomes the table an untouched pane follows, so the stylesheet
-  // answers it at each breakpoint (right in the server HTML, with no
-  // callback on a crossing) and the app's prop is still the only writer.
-  const controlledMap = controlledIsMap ? (options.controlled as Partial<Record<Breakpoint, PaneValue>>) : undefined;
-  const autoSource = controlledMap ?? (isMap(options.defaultValue) ? options.defaultValue : undefined);
+  const autoSource = isMap(options.defaultValue) ? options.defaultValue : undefined;
   const autoKey = useStableKey(autoSource);
   const [inner, setInner] = React.useState<'auto' | PaneValue>(() => (typeof options.defaultValue === 'string' ? options.defaultValue : 'auto'));
 
   // What an untouched pane shows at each breakpoint: a responsive default
   // where it states one, the pane's own default where it does not.
   const autoTable = React.useMemo(
-    () => (controlledMap ? tableOf<PaneValue>(controlledMap, () => firstStated(controlledMap)) : tableOf<PaneValue>(autoSource, (bp) => builtIn(presentationTable[bp]))),
+    () => tableOf<PaneValue>(autoSource, (bp) => builtIn(presentationTable[bp])),
     // `autoKey` stands for the responsive object, which is usually a new literal each render.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [autoKey, controlledIsMap, presentationTable, builtIn],
+    [autoKey, presentationTable, builtIn],
   );
 
   let state: 'auto' | PaneValue = inner;
-  if (controlled) state = controlledMap ? 'auto' : (options.controlled as PaneValue);
+  if (options.controlled !== undefined) state = options.controlled;
 
   // Only a pane whose answer depends on the window subscribes to it, so a
   // pane with one presentation and one default never re-renders on a resize.
@@ -194,23 +168,6 @@ export function usePane(options: UsePaneOptions) {
     };
   }, [store, name, id, value, presentation, presentationTable, overlayLive, options.size, setValue, toggle]);
 
-  // onExpand/onCollapse fire when the pane's state changes and that changes
-  // whether it is shown: a user's toggle, or a controlled prop. Never on
-  // mount, and never because the window crossed a breakpoint.
-  const callbacks = React.useRef({ onExpand: options.onExpand, onCollapse: options.onCollapse });
-  useLayoutEffect(() => {
-    callbacks.current = { onExpand: options.onExpand, onCollapse: options.onCollapse };
-  });
-  const previous = React.useRef({ state, shown });
-  React.useEffect(() => {
-    const before = previous.current;
-    if (before.state !== state && before.shown !== undefined && shown !== undefined && before.shown !== shown) {
-      if (shown) callbacks.current.onExpand?.();
-      else callbacks.current.onCollapse?.();
-    }
-    previous.current = { state, shown };
-  }, [state, shown]);
-
   // Development guards. Once per mount, not once per render.
   useLayoutEffect(() => {
     if (process.env.NODE_ENV === 'production') return;
@@ -229,8 +186,6 @@ export function usePane(options: UsePaneOptions) {
     }
   }, [controlled, label, propNames.controlled]);
 
-  const peeking = usePeeking(store, name) && shown === false && !overlaying;
-
   return {
     store,
     id,
@@ -240,7 +195,6 @@ export function usePane(options: UsePaneOptions) {
     presentation,
     overlaying,
     overlayLive,
-    peeking,
     ready,
     breakpoint,
     autoTable,
@@ -253,16 +207,13 @@ export function usePane(options: UsePaneOptions) {
 
 /** The data attributes every togglable pane renders. */
 export function paneAttributes(pane: PaneController, presentationAttributes: Record<string, string>) {
-  const { state, value, presentation, shown } = pane;
+  const { state, value, presentation } = pane;
   return {
     ...presentationAttributes,
     'data-state': state,
     ...(state === 'auto' ? tableAttributes('auto', pane.autoTable) : {}),
     'data-presentation': presentation,
     'data-mode': value === undefined ? undefined : value === 'closed' ? 'collapsed' : 'expanded',
-    // Kept for stylesheets written against 0.7: set while a stacked pane is open.
-    'data-open': presentation === 'stacked' && shown ? '' : undefined,
-    'data-peek': pane.peeking ? '' : undefined,
   } as const;
 }