@womp/kookie-ui 0.3.25 → 0.4.0

package/src/components/theme.tsx

@@ -3,8 +3,11 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Direction, Slot, Tooltip as TooltipPrimitive } from 'radix-ui';
+import { useComposedRefs, useLayoutEffect } from 'radix-ui/internal';
 
 import { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';
+import { usePropSyncedState } from '../hooks/use-prop-synced-state.js';
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import { themePropDefs } from './theme.props.js';
 
 import type { ThemeOwnProps } from './theme.props.js';
@@ -20,6 +23,9 @@ type ThemePanelBackground = (typeof themePropDefs.panelBackground.values)[number
 type ThemeRadius = (typeof themePropDefs.radius.values)[number];
 type ThemeScaling = (typeof themePropDefs.scaling.values)[number];
 type ThemeFontFamily = (typeof themePropDefs.fontFamily.values)[number];
+// Headings follow the body font until something sets this, so `undefined` is a
+// meaningful value here rather than a missing one.
+type ThemeHeadingFontFamily = ThemeFontFamily | undefined;
 
 interface ThemeChangeHandlers {
   onAppearanceChange: (appearance: ThemeAppearance) => void;
@@ -30,6 +36,7 @@ interface ThemeChangeHandlers {
   onRadiusChange: (radius: ThemeRadius) => void;
   onScalingChange: (scaling: ThemeScaling) => void;
   onFontFamilyChange: (fontFamily: ThemeFontFamily) => void;
+  onHeadingFontFamilyChange: (headingFontFamily: ThemeHeadingFontFamily) => void;
 }
 
 interface ThemeContextValue extends ThemeChangeHandlers {
@@ -42,6 +49,7 @@ interface ThemeContextValue extends ThemeChangeHandlers {
   radius: ThemeRadius;
   scaling: ThemeScaling;
   fontFamily: ThemeFontFamily;
+  headingFontFamily: ThemeHeadingFontFamily;
 }
 // Default theme values used when components render outside a Theme provider
 const defaultThemeContext: ThemeContextValue = {
@@ -54,6 +62,7 @@ const defaultThemeContext: ThemeContextValue = {
   radius: themePropDefs.radius.default,
   scaling: themePropDefs.scaling.default,
   fontFamily: themePropDefs.fontFamily.default,
+  headingFontFamily: undefined,
   onAppearanceChange: noop,
   onAccentColorChange: noop,
   onGrayColorChange: noop,
@@ -62,6 +71,7 @@ const defaultThemeContext: ThemeContextValue = {
   onRadiusChange: noop,
   onScalingChange: noop,
   onFontFamilyChange: noop,
+  onHeadingFontFamilyChange: noop,
 };
 
 const ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);
@@ -100,46 +110,33 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
       radius: radiusProp = themePropDefs.radius.default,
       scaling: scalingProp = themePropDefs.scaling.default,
       fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,
+      headingFontFamily: headingFontFamilyProp,
       hasBackground = themePropDefs.hasBackground.default,
       ...rootProps
     } = props;
 
-    // Show deprecation warning for panelBackground when used
-    React.useEffect(() => {
-      if (props.panelBackground !== undefined) {
-        console.warn(
-          'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',
-        );
-      }
-    }, [props.panelBackground]);
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
-    const [appearance, setAppearance] = React.useState(appearanceProp);
-    React.useEffect(() => setAppearance(appearanceProp), [appearanceProp]);
-
-    const [accentColor, setAccentColor] = React.useState(accentColorProp);
-    React.useEffect(() => setAccentColor(accentColorProp), [accentColorProp]);
-
-    const [grayColor, setGrayColor] = React.useState(grayColorProp);
-    React.useEffect(() => setGrayColor(grayColorProp), [grayColorProp]);
+    // Each of these follows its prop but stays independently settable, so
+    // `ThemePanel` can change the theme at runtime. Syncing during render
+    // rather than in an effect matters here: an effect would commit the old
+    // theme first and re-render every consumer of the context a second time.
+    const [appearance, setAppearance] = usePropSyncedState(appearanceProp);
+    const [accentColor, setAccentColor] = usePropSyncedState(accentColorProp);
+    const [grayColor, setGrayColor] = usePropSyncedState(grayColorProp);
 
     // Material takes precedence over panelBackground
     const effectiveMaterial =
       materialProp !== themePropDefs.material.default ? materialProp : panelBackgroundProp;
-    const [material, setMaterial] = React.useState(effectiveMaterial);
-    React.useEffect(() => setMaterial(effectiveMaterial), [effectiveMaterial]);
+    const [material, setMaterial] = usePropSyncedState(effectiveMaterial);
 
     // Keep panelBackground in sync with material for backward compatibility
-    const [panelBackground, setPanelBackground] = React.useState(panelBackgroundProp);
-    React.useEffect(() => setPanelBackground(material), [material]);
-
-    const [radius, setRadius] = React.useState(radiusProp);
-    React.useEffect(() => setRadius(radiusProp), [radiusProp]);
-
-    const [scaling, setScaling] = React.useState(scalingProp);
-    React.useEffect(() => setScaling(scalingProp), [scalingProp]);
+    const [panelBackground, setPanelBackground] = usePropSyncedState(material);
 
-    const [fontFamily, setFontFamily] = React.useState(fontFamilyProp);
-    React.useEffect(() => setFontFamily(fontFamilyProp), [fontFamilyProp]);
+    const [radius, setRadius] = usePropSyncedState(radiusProp);
+    const [scaling, setScaling] = usePropSyncedState(scalingProp);
+    const [fontFamily, setFontFamily] = usePropSyncedState(fontFamilyProp);
+    const [headingFontFamily, setHeadingFontFamily] = usePropSyncedState(headingFontFamilyProp);
 
     return (
       <ThemeImpl
@@ -156,6 +153,7 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
         radius={radius}
         scaling={scaling}
         fontFamily={fontFamily}
+        headingFontFamily={headingFontFamily}
         //
         onAppearanceChange={setAppearance}
         onAccentColorChange={setAccentColor}
@@ -165,6 +163,7 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
         onRadiusChange={setRadius}
         onScalingChange={setScaling}
         onFontFamilyChange={setFontFamily}
+        onHeadingFontFamilyChange={setHeadingFontFamily}
       />
     );
   },
@@ -205,6 +204,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
     radius = props.radius ?? context?.radius ?? themePropDefs.radius.default,
     scaling = props.scaling ?? context?.scaling ?? themePropDefs.scaling.default,
     fontFamily = props.fontFamily ?? context?.fontFamily ?? themePropDefs.fontFamily.default,
+    headingFontFamily = props.headingFontFamily ?? context?.headingFontFamily,
     //
     onAppearanceChange = noop,
     onAccentColorChange = noop,
@@ -214,6 +214,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
     onRadiusChange = noop,
     onScalingChange = noop,
     onFontFamilyChange = noop,
+    onHeadingFontFamilyChange = noop,
     //
     ...themeProps
   } = props;
@@ -223,10 +224,24 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
   const hasBackground =
     hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;
 
-  const [clientOS, setClientOS] = React.useState<ReturnType<typeof getClientOS>>(undefined);
-  React.useEffect(() => {
-    if (isRoot) setClientOS(getClientOS());
-  }, [isRoot]);
+  // `data-os` can only be resolved on the client. Writing it straight to the
+  // DOM keeps it out of the server markup — so hydration still matches — without
+  // spending a render pass, and a state update here would re-render the whole
+  // application on mount.
+  const rootRef = React.useRef<ThemeImplElement>(null);
+  const composedRef = useComposedRefs(forwardedRef, rootRef);
+  const hasExplicitOS = 'data-os' in themeProps;
+
+  useLayoutEffect(() => {
+    if (!isRoot || hasExplicitOS) return;
+    const node = rootRef.current;
+    if (!node) return;
+
+    const os = getClientOS();
+    if (!os) return;
+    node.setAttribute('data-os', os);
+    return () => node.removeAttribute('data-os');
+  }, [isRoot, hasExplicitOS]);
 
   return (
     <ThemeContext.Provider
@@ -241,6 +256,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           radius,
           scaling,
           fontFamily,
+          headingFontFamily,
           //
           onAppearanceChange,
           onAccentColorChange,
@@ -250,6 +266,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           onRadiusChange,
           onScalingChange,
           onFontFamilyChange,
+          onHeadingFontFamilyChange,
         }),
         [
           appearance,
@@ -261,6 +278,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           radius,
           scaling,
           fontFamily,
+          headingFontFamily,
           //
           onAppearanceChange,
           onAccentColorChange,
@@ -270,6 +288,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           onRadiusChange,
           onScalingChange,
           onFontFamilyChange,
+          onHeadingFontFamilyChange,
         ],
       )}
     >
@@ -284,8 +303,8 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
         data-radius={radius}
         data-scaling={scaling}
         data-font-family={fontFamily}
-        data-os={isRoot ? clientOS : undefined}
-        ref={forwardedRef}
+        data-heading-font-family={headingFontFamily}
+        ref={composedRef}
         {...themeProps}
         className={classNames(
           'radix-themes',

package/src/helpers/compile-prop-defs.ts

@@ -0,0 +1,121 @@
+import type { PropDef } from '../props/prop-def.js';
+
+/**
+ * A prop def pre-processed into the exact shape `extractProps` needs at render
+ * time. Everything that can be derived from the static prop def — enum
+ * membership sets, whether the def is responsive, whether it carries a default
+ * — is computed once here instead of on every render.
+ */
+interface CompiledPropDef {
+  key: string;
+  type: PropDef['type'];
+  default: unknown;
+  hasDefault: boolean;
+  responsive: boolean;
+  className?: string;
+  customProperties?: `--${string}`[];
+  parseValue?: (value: string) => string | undefined;
+  /** The prop def's own enum values, kept for the responsive class name helpers. */
+  values: readonly string[];
+  /** O(1) membership for `values`. */
+  valueSet: ReadonlySet<string>;
+  /**
+   * `values` plus the default, used to coerce invalid enum values back to the
+   * default. Only present for `type: 'enum'` — `'enum | string'` props accept
+   * arbitrary strings and must not be coerced.
+   */
+  enumValueSet?: ReadonlySet<unknown>;
+}
+
+interface CompiledPropDefs {
+  /** Defs that contribute a class name and/or custom properties. */
+  styling: CompiledPropDef[];
+  /**
+   * Defs that pass through to the element but still need a default applied or
+   * an invalid enum value coerced. Defs that can do neither are omitted
+   * entirely — they are already correct as passed.
+   */
+  passthrough: CompiledPropDef[];
+  /** Keys consumed by `styling`, so they can be skipped when copying props. */
+  stylingKeys: ReadonlySet<string>;
+}
+
+const EMPTY_VALUES: readonly string[] = [];
+const EMPTY_SET: ReadonlySet<string> = new Set();
+
+function compile(propDefs: readonly Record<string, PropDef>[]): CompiledPropDefs {
+  const merged: Record<string, PropDef> = Object.assign({}, ...propDefs);
+  const styling: CompiledPropDef[] = [];
+  const passthrough: CompiledPropDef[] = [];
+  const stylingKeys = new Set<string>();
+
+  for (const key in merged) {
+    // The PropDef union is narrowed per-field below; reading the optional
+    // members off the union directly is what the runtime actually needs.
+    const def = merged[key] as PropDef & {
+      default?: unknown;
+      values?: readonly string[];
+      className?: string;
+      customProperties?: `--${string}`[];
+      parseValue?: (value: string) => string | undefined;
+      responsive?: true;
+    };
+
+    const values = def.values ?? EMPTY_VALUES;
+    const compiled: CompiledPropDef = {
+      key,
+      type: def.type,
+      default: def.default,
+      hasDefault: def.default !== undefined,
+      responsive: 'responsive' in def,
+      className: def.className,
+      customProperties: def.customProperties,
+      parseValue: def.parseValue,
+      values,
+      valueSet: values.length > 0 ? new Set(values) : EMPTY_SET,
+      enumValueSet: def.type === 'enum' ? new Set<unknown>([def.default, ...values]) : undefined,
+    };
+
+    if (def.className) {
+      styling.push(compiled);
+      stylingKeys.add(key);
+    } else if (compiled.hasDefault || def.type === 'enum') {
+      // Anything else is copied through untouched, so there is nothing to do.
+      passthrough.push(compiled);
+    }
+  }
+
+  return { styling, passthrough, stylingKeys };
+}
+
+interface CacheNode {
+  children: WeakMap<object, CacheNode>;
+  compiled?: CompiledPropDefs;
+}
+
+const cacheRoot: CacheNode = { children: new WeakMap() };
+
+/**
+ * Compiles a set of prop defs, memoized on the identity of the prop def objects
+ * themselves. Components always pass the same module-level constants, so after
+ * the first render of a given component this is a couple of WeakMap lookups
+ * instead of merging 50-odd prop defs into a fresh object.
+ */
+function getCompiledPropDefs(propDefs: readonly Record<string, PropDef>[]): CompiledPropDefs {
+  let node = cacheRoot;
+
+  for (let i = 0; i < propDefs.length; i++) {
+    const propDef = propDefs[i];
+    let child = node.children.get(propDef);
+    if (child === undefined) {
+      child = { children: new WeakMap() };
+      node.children.set(propDef, child);
+    }
+    node = child;
+  }
+
+  return (node.compiled ??= compile(propDefs));
+}
+
+export { getCompiledPropDefs };
+export type { CompiledPropDef, CompiledPropDefs };

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 };