@kushagradhawan/kookie-ui 0.3.21 → 0.3.23

package/src/helpers/extract-props.ts

@@ -1,18 +1,41 @@
 import classNames from 'classnames';
 
+import { getCompiledPropDefs } from './compile-prop-defs.js';
 import { getResponsiveClassNames, getResponsiveStyles } from './get-responsive-styles.js';
 import { isResponsiveObject } from './is-responsive-object.js';
 import { mergeStyles } from './merge-styles.js';
 
+import type { CompiledPropDef } from './compile-prop-defs.js';
 import type * as React from 'react';
 import type { PropDef } from '../props/prop-def.js';
 
-type PropDefsWithClassName<T> = T extends Record<string, PropDef>
-  ? { [K in keyof T]: T[K] extends { className: string } ? K : never }[keyof T]
-  : never;
+type PropDefsWithClassName<T> = T extends Record<string, PropDef> ? { [K in keyof T]: T[K] extends { className: string } ? K : never }[keyof T] : never;
 
-function mergePropDefs<T extends Record<string, PropDef>[]>(...args: T): Record<string, PropDef> {
-  return Object.assign({}, ...args);
+type ResponsiveValue = Record<string, string | undefined>;
+
+/**
+ * Fills in the `initial` breakpoint of a responsive value from the prop def's
+ * default, and coerces an invalid `initial` enum value back to that default.
+ *
+ * Returns the value untouched when nothing needs changing, and a copy otherwise
+ * — callers routinely hoist responsive objects to module scope, so mutating the
+ * caller's object would corrupt it for every later render.
+ */
+function normalizeResponsiveValue(value: ResponsiveValue, propDef: CompiledPropDef) {
+  let initial = value.initial;
+  let changed = false;
+
+  if (propDef.hasDefault && initial === undefined) {
+    initial = propDef.default as string | undefined;
+    changed = true;
+  }
+
+  if (propDef.enumValueSet !== undefined && !propDef.enumValueSet.has(initial)) {
+    initial = propDef.default as string | undefined;
+    changed = true;
+  }
+
+  return changed ? { ...value, initial } : value;
 }
 
 /**
@@ -21,104 +44,102 @@ function mergePropDefs<T extends Record<string, PropDef>[]>(...args: T): Record<
  * the corresponding prop defs that were used to formulate the new `className`
  * and `style` values. Also applies prop def defaults to every prop.
  */
-function extractProps<
-  P extends { className?: string; style?: React.CSSProperties; [key: string]: any },
-  T extends Record<string, PropDef>[]
->(
+function extractProps<P extends { className?: string; style?: React.CSSProperties; [key: string]: any }, T extends Record<string, PropDef>[]>(
   props: P,
   ...propDefs: T
 ): Omit<P & { className?: string; style?: React.CSSProperties }, PropDefsWithClassName<T[number]>> {
-  let className: string | undefined;
+  const { styling, passthrough, stylingKeys } = getCompiledPropDefs(propDefs);
+
+  // Copy the props that survive to the element rather than spreading and then
+  // deleting the styling keys. Deleting off a spread demotes the object to
+  // dictionary mode in V8, and this object is on the render path of every
+  // component in the library.
+  const extractedProps: Record<string, any> = {};
+  for (const key in props) {
+    if (stylingKeys.has(key)) continue;
+    extractedProps[key] = props[key];
+  }
+
+  for (let i = 0; i < passthrough.length; i++) {
+    const propDef = passthrough[i];
+    const value = extractedProps[propDef.key];
+
+    if (value === undefined) {
+      if (propDef.hasDefault) extractedProps[propDef.key] = propDef.default;
+      continue;
+    }
+
+    // Fall back to the default when the value is not a valid enum value
+    if (propDef.enumValueSet !== undefined && !propDef.enumValueSet.has(value) && !isResponsiveObject(value)) {
+      extractedProps[propDef.key] = propDef.default;
+    }
+  }
+
   let style: ReturnType<typeof mergeStyles>;
-  const extractedProps = { ...props };
-  const allPropDefs = mergePropDefs(...propDefs);
+  const classes: string[] = [];
 
-  for (const key in allPropDefs) {
-    let value = extractedProps[key];
-    const propDef = allPropDefs[key];
+  for (let i = 0; i < styling.length; i++) {
+    const propDef = styling[i];
+    let value = props[propDef.key];
 
     // Apply prop def defaults
-    if (propDef.default !== undefined && value === undefined) {
+    if (value === undefined && propDef.hasDefault) {
       value = propDef.default;
     }
 
     // Apply the default value if the value is not a valid enum value
-    if (propDef.type === 'enum') {
-      const values = [propDef.default, ...propDef.values];
+    if (propDef.enumValueSet !== undefined && !propDef.enumValueSet.has(value) && !isResponsiveObject(value)) {
+      value = propDef.default;
+    }
 
-      if (!values.includes(value) && !isResponsiveObject(value)) {
-        value = propDef.default;
-      }
+    if (!value) continue;
+
+    if (isResponsiveObject(value)) {
+      // Make sure we are not threading through responsive values for non-responsive prop defs
+      if (!propDef.responsive) continue;
+      value = normalizeResponsiveValue(value, propDef);
     }
 
-    // Apply the value with defaults
-    (extractedProps as Record<string, any>)[key] = value;
+    if (propDef.type === 'enum') {
+      const propClassName = getResponsiveClassNames({
+        allowArbitraryValues: false,
+        value,
+        className: propDef.className!,
+        propValues: propDef.values,
+        propValueSet: propDef.valueSet,
+        parseValue: propDef.parseValue,
+      });
+
+      if (propClassName) classes.push(propClassName);
+      continue;
+    }
 
-    if ('className' in propDef && propDef.className) {
-      delete extractedProps[key];
+    if (propDef.type === 'string' || propDef.type === 'enum | string') {
+      const [propClassNames, propCustomProperties] = getResponsiveStyles({
+        className: propDef.className!,
+        customProperties: propDef.customProperties!,
+        // `string` prop defs have no enum values, so every value is arbitrary
+        propValues: propDef.type === 'string' ? [] : propDef.values,
+        propValueSet: propDef.type === 'string' ? undefined : propDef.valueSet,
+        parseValue: propDef.parseValue,
+        value,
+      });
+
+      if (propCustomProperties) style = mergeStyles(style, propCustomProperties);
+      if (propClassNames) classes.push(propClassNames);
+      continue;
+    }
 
-      const isResponsivePropDef = 'responsive' in propDef;
-      // Make sure we are not threading through responsive values for non-responsive prop defs
-      if (!value || (isResponsiveObject(value) && !isResponsivePropDef)) {
-        continue;
-      }
-
-      if (isResponsiveObject(value)) {
-        // Apply prop def defaults to the `initial` breakpoint
-        if (propDef.default !== undefined && value.initial === undefined) {
-          value.initial = propDef.default;
-        }
-
-        // Apply the default value to the `initial` breakpoint when it is not a valid enum value
-        if (propDef.type === 'enum') {
-          const values = [propDef.default, ...propDef.values];
-
-          if (!values.includes(value.initial)) {
-            value.initial = propDef.default;
-          }
-        }
-      }
-
-      if (propDef.type === 'enum') {
-        const propClassName = getResponsiveClassNames({
-          allowArbitraryValues: false,
-          value,
-          className: propDef.className,
-          propValues: propDef.values,
-          parseValue: propDef.parseValue,
-        });
-
-        className = classNames(className, propClassName);
-        continue;
-      }
-
-      if (propDef.type === 'string' || propDef.type === 'enum | string') {
-        const propDefValues = propDef.type === 'string' ? [] : propDef.values;
-
-        const [propClassNames, propCustomProperties] = getResponsiveStyles({
-          className: propDef.className,
-          customProperties: propDef.customProperties,
-          propValues: propDefValues,
-          parseValue: propDef.parseValue,
-          value,
-        });
-
-        style = mergeStyles(style, propCustomProperties);
-        className = classNames(className, propClassNames);
-        continue;
-      }
-
-      if (propDef.type === 'boolean' && value) {
-        // TODO handle responsive boolean props
-        className = classNames(className, propDef.className);
-        continue;
-      }
+    if (propDef.type === 'boolean') {
+      // TODO handle responsive boolean props
+      classes.push(propDef.className!);
+      continue;
     }
   }
 
-  extractedProps.className = classNames(className, props.className);
+  extractedProps.className = classNames(classes.length > 0 ? classes.join(' ') : undefined, props.className);
   extractedProps.style = mergeStyles(style, props.style);
-  return extractedProps;
+  return extractedProps as ReturnType<typeof extractProps<P, T>>;
 }
 
 export { extractProps };

package/src/helpers/get-margin-styles.ts

@@ -1,5 +1,3 @@
-import classNames from 'classnames';
-
 import { getResponsiveStyles } from './get-responsive-styles.js';
 import { mergeStyles } from './merge-styles.js';
 import { marginPropDefs } from '../props/margin.props.js';
@@ -7,75 +5,44 @@ import { marginPropDefs } from '../props/margin.props.js';
 import type { MarginProps } from '../props/margin.props.js';
 
 const marginValues = marginPropDefs.m.values;
+const marginValueSet: ReadonlySet<string> = new Set(marginValues);
+
+// Static table so the common case — a component with no margin props at all —
+// is seven property reads and nothing else.
+const MARGIN_PROPS: ReadonlyArray<{
+  key: keyof MarginProps;
+  className: string;
+  customProperties: `--${string}`[];
+}> = [
+  { key: 'm', className: 'rt-r-m', customProperties: ['--margin'] },
+  { key: 'mx', className: 'rt-r-mx', customProperties: ['--margin-left', '--margin-right'] },
+  { key: 'my', className: 'rt-r-my', customProperties: ['--margin-top', '--margin-bottom'] },
+  { key: 'mt', className: 'rt-r-mt', customProperties: ['--margin-top'] },
+  { key: 'mr', className: 'rt-r-mr', customProperties: ['--margin-right'] },
+  { key: 'mb', className: 'rt-r-mb', customProperties: ['--margin-bottom'] },
+  { key: 'ml', className: 'rt-r-ml', customProperties: ['--margin-left'] },
+];
 
 export function getMarginStyles(props: MarginProps) {
-  const [mClassNames, mCustomProperties] = getResponsiveStyles({
-    className: 'rt-r-m',
-    customProperties: ['--margin'],
-    propValues: marginValues,
-    value: props.m,
-  });
-
-  const [mxClassNames, mxCustomProperties] = getResponsiveStyles({
-    className: 'rt-r-mx',
-    customProperties: ['--margin-left', '--margin-right'],
-    propValues: marginValues,
-    value: props.mx,
-  });
-
-  const [myClassNames, myCustomProperties] = getResponsiveStyles({
-    className: 'rt-r-my',
-    customProperties: ['--margin-top', '--margin-bottom'],
-    propValues: marginValues,
-    value: props.my,
-  });
-
-  const [mtClassNames, mtCustomProperties] = getResponsiveStyles({
-    className: 'rt-r-mt',
-    customProperties: ['--margin-top'],
-    propValues: marginValues,
-    value: props.mt,
-  });
-
-  const [mrClassNames, mrCustomProperties] = getResponsiveStyles({
-    className: 'rt-r-mr',
-    customProperties: ['--margin-right'],
-    propValues: marginValues,
-    value: props.mr,
-  });
-
-  const [mbClassNames, mbCustomProperties] = getResponsiveStyles({
-    className: 'rt-r-mb',
-    customProperties: ['--margin-bottom'],
-    propValues: marginValues,
-    value: props.mb,
-  });
-
-  const [mlClassNames, mlCustomProperties] = getResponsiveStyles({
-    className: 'rt-r-ml',
-    customProperties: ['--margin-left'],
-    propValues: marginValues,
-    value: props.ml,
-  });
-
-  return [
-    classNames(
-      mClassNames,
-      mxClassNames,
-      myClassNames,
-      mtClassNames,
-      mrClassNames,
-      mbClassNames,
-      mlClassNames
-    ),
-    mergeStyles(
-      mCustomProperties,
-      mxCustomProperties,
-      myCustomProperties,
-      mtCustomProperties,
-      mrCustomProperties,
-      mbCustomProperties,
-      mlCustomProperties
-    ),
-  ] as const;
+  let classes: string[] | undefined;
+  let style: ReturnType<typeof mergeStyles>;
+
+  for (let i = 0; i < MARGIN_PROPS.length; i++) {
+    const { key, className, customProperties } = MARGIN_PROPS[i];
+    const value = props[key];
+    if (value === undefined) continue;
+
+    const [propClassNames, propCustomProperties] = getResponsiveStyles({
+      className,
+      customProperties,
+      propValues: marginValues,
+      propValueSet: marginValueSet,
+      value,
+    });
+
+    if (propClassNames) (classes ??= []).push(propClassNames);
+    if (propCustomProperties) style = mergeStyles(style, propCustomProperties);
+  }
+
+  return [classes !== undefined ? classes.join(' ') : '', style] as const;
 }

package/src/helpers/get-responsive-styles.ts

@@ -4,11 +4,21 @@ import { isResponsiveObject } from './is-responsive-object.js';
 
 import type { Responsive, Union } from '../props/prop-def.js';
 
+/**
+ * Membership test against a prop def's enum values. Callers that already hold a
+ * compiled prop def pass `propValueSet` for an O(1) lookup; the handful of call
+ * sites that build options inline fall back to scanning the array.
+ */
+function includesValue(propValues: string[] | readonly string[], propValueSet: ReadonlySet<string> | undefined, value: string): boolean {
+  return propValueSet !== undefined ? propValueSet.has(value) : propValues.includes(value);
+}
+
 interface GetResponsiveStylesOptions {
   className: string;
   customProperties: `--${string}`[];
   value: Responsive<Union> | Responsive<string> | undefined;
   propValues: string[] | readonly string[];
+  propValueSet?: ReadonlySet<string>;
   parseValue?: (value: string) => string | undefined;
 }
 
@@ -28,28 +38,25 @@ interface GetResponsiveClassNamesOptions {
   className: string;
   value: Responsive<Union> | Responsive<string> | undefined;
   propValues: string[] | readonly string[];
+  propValueSet?: ReadonlySet<string>;
   parseValue?: (value: string) => string | undefined;
 }
 
-function getResponsiveClassNames({
-  allowArbitraryValues,
-  value,
-  className,
-  propValues,
-  parseValue = (value) => value,
-}: GetResponsiveClassNamesOptions): string | undefined {
-  const classNames: string[] = [];
-
+function getResponsiveClassNames({ allowArbitraryValues, value, className, propValues, propValueSet, parseValue = (value) => value }: GetResponsiveClassNamesOptions): string | undefined {
   if (!value) {
     return undefined;
   }
 
-  if (typeof value === 'string' && propValues.includes(value)) {
-    return getBaseClassName(className, value, parseValue);
+  if (typeof value === 'string') {
+    if (includesValue(propValues, propValueSet, value)) {
+      return getBaseClassName(className, value, parseValue);
+    }
+    return allowArbitraryValues ? className : undefined;
   }
 
   if (isResponsiveObject(value)) {
     const object = value;
+    const classNames: string[] = [];
 
     for (const bp in object) {
       // Make sure we are not iterating over keys that aren't breakpoints
@@ -60,7 +67,7 @@ function getResponsiveClassNames({
       const value = object[bp];
 
       if (value !== undefined) {
-        if (propValues.includes(value)) {
+        if (includesValue(propValues, propValueSet, value)) {
           const baseClassName = getBaseClassName(className, value, parseValue);
           const bpClassName = bp === 'initial' ? baseClassName : `${bp}:${baseClassName}`;
           classNames.push(bpClassName);
@@ -71,7 +78,7 @@ function getResponsiveClassNames({
       }
     }
 
-    return classNames.join(' ');
+    return classNames.length > 0 ? classNames.join(' ') : '';
   }
 
   if (allowArbitraryValues) {
@@ -79,11 +86,7 @@ function getResponsiveClassNames({
   }
 }
 
-function getBaseClassName(
-  className: string,
-  value: string,
-  parseValue: (value: string) => string | undefined
-): string {
+function getBaseClassName(className: string, value: string, parseValue: (value: string) => string | undefined): string {
   const delimiter = className ? '-' : '';
   const matchedValue = parseValue(value);
   const isNegative = matchedValue?.startsWith('-');
@@ -96,24 +99,25 @@ interface GetResponsiveCustomPropertiesOptions {
   customProperties: `--${string}`[];
   value: Responsive<Union> | Responsive<string> | undefined;
   propValues: string[] | readonly string[];
+  propValueSet?: ReadonlySet<string>;
   parseValue?: (value: string) => string | undefined;
 }
 
-function getResponsiveCustomProperties({
-  customProperties,
-  value,
-  propValues,
-  parseValue = (value) => value,
-}: GetResponsiveCustomPropertiesOptions) {
-  let styles: Record<string, string | undefined> = {};
-
+function getResponsiveCustomProperties({ customProperties, value, propValues, propValueSet, parseValue = (value) => value }: GetResponsiveCustomPropertiesOptions) {
   // Don't generate custom properties if the value is not arbitrary
-  if (!value || (typeof value === 'string' && propValues.includes(value))) {
+  if (!value || (typeof value === 'string' && includesValue(propValues, propValueSet, value))) {
     return undefined;
   }
 
+  let styles: Record<string, string | undefined> | undefined;
+
   if (typeof value === 'string') {
-    styles = Object.fromEntries(customProperties.map((prop) => [prop, value]));
+    const parsed = parseValue(value);
+    styles = {};
+    for (const customProperty of customProperties) {
+      styles[customProperty] = parsed;
+    }
+    return styles;
   }
 
   if (isResponsiveObject(value)) {
@@ -128,25 +132,20 @@ function getResponsiveCustomProperties({
       const value = object[bp];
 
       // Don't generate a custom property if the value is not arbitrary
-      if (propValues.includes(value)) {
+      if (value === undefined || includesValue(propValues, propValueSet, value)) {
         continue;
       }
 
+      const parsed = parseValue(value);
+      styles ??= {};
       for (const customProperty of customProperties) {
         const bpProperty = bp === 'initial' ? customProperty : `${customProperty}-${bp}`;
-        styles[bpProperty] = value;
+        styles[bpProperty] = parsed;
       }
     }
   }
 
-  for (const key in styles) {
-    const value = styles[key];
-    if (value !== undefined) {
-      styles[key] = parseValue(value);
-    }
-  }
-
-  return styles;
+  return styles ?? {};
 }
 
 export { getResponsiveStyles, getResponsiveCustomProperties, getResponsiveClassNames };

package/src/helpers/use-deprecation-warning.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+const PANEL_BACKGROUND_MESSAGE = 'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.';
+
+const warned = new Set<string>();
+
+function warnOnce(message: string) {
+  if (warned.has(message)) return;
+  warned.add(message);
+  console.warn(message);
+}
+
+/**
+ * Warns, in development only, that `panelBackground` is deprecated.
+ *
+ * The `process.env.NODE_ENV` check is a compile-time constant, so a production
+ * bundle minifies the effect body away to an empty function instead of reading
+ * props and formatting a message per mounted component. The message is also
+ * logged once per session rather than once per component instance.
+ */
+export function useDeprecatedPanelBackgroundWarning(panelBackground: unknown) {
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === 'production') return;
+    if (panelBackground !== undefined) warnOnce(PANEL_BACKGROUND_MESSAGE);
+  }, [panelBackground]);
+}

package/src/hooks/use-body-pointer-events-cleanup.ts

@@ -16,6 +16,20 @@ export function useBodyPointerEventsCleanup() {
 
     cleanupInstalled = true;
 
+    // Deferred cleanups are tracked so unmount can cancel the ones still
+    // queued. A timer that outlives the document reaches for `document.body`
+    // after it is gone; under jsdom that surfaces as an unhandled
+    // ReferenceError attributed to whichever test happened to be running.
+    const pending = new Set<ReturnType<typeof setTimeout>>();
+
+    const defer = (fn: () => void, delay: number) => {
+      const id = setTimeout(() => {
+        pending.delete(id);
+        fn();
+      }, delay);
+      pending.add(id);
+    };
+
     const hasOpenModal = (): boolean => {
       // Check for open dialogs/alertdialogs
       const hasDialogs = Boolean(
@@ -64,20 +78,20 @@ export function useBodyPointerEventsCleanup() {
         )
       ) {
         // Clicked outside any modal - force cleanup after a short delay
-        setTimeout(forceCleanup, 100);
+        defer(forceCleanup, 100);
       }
     };
 
     // Force cleanup on ESC key
     const onEscapeKey = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
-        setTimeout(forceCleanup, 200);
+        defer(forceCleanup, 200);
       }
     };
 
     // Safe cleanup on other interactions
     const onInteraction = () => {
-      setTimeout(safeCleanup, 50);
+      defer(safeCleanup, 50);
     };
 
     // Install global listeners
@@ -89,7 +103,7 @@ export function useBodyPointerEventsCleanup() {
 
     // Watch for DOM changes that might indicate overlay removal
     const observer = new MutationObserver(() => {
-      setTimeout(safeCleanup, 0);
+      defer(safeCleanup, 0);
     });
     observer.observe(document.body, { childList: true, subtree: true, attributes: true });
 
@@ -102,11 +116,27 @@ export function useBodyPointerEventsCleanup() {
     }, 1000);
 
     // Initial cleanup
-    setTimeout(safeCleanup, 100);
+    defer(safeCleanup, 100);
 
-    // Cleanup function (keep listeners for app lifetime)
+    // Tear everything down together. The observer is the important one: it
+    // fires while React unmounts the tree, so leaving it connected keeps
+    // queueing work against a document that is about to go away. Releasing the
+    // latch lets a later mount reinstall.
     return () => {
       clearInterval(intervalId);
+
+      pending.forEach(clearTimeout);
+      pending.clear();
+
+      observer.disconnect();
+
+      document.removeEventListener('click', onDocumentClick, true);
+      document.removeEventListener('keydown', onEscapeKey, true);
+      document.removeEventListener('pointerup', onInteraction, true);
+      document.removeEventListener('transitionend', onInteraction, true);
+      document.removeEventListener('animationend', onInteraction, true);
+
+      cleanupInstalled = false;
     };
   }, []);
 }