@uniflowed/ui 0.0.0-alpha.9 → 0.2.0

package/collapsible.js

@@ -23,25 +23,43 @@
 // `internal/disclosure.js` explains what is done instead, and why React needs a
 // hook to say it.
 //
-// # No height, yet
+// # The height, for a stylesheet that animates it
 //
-// A collapsible that animates open needs the height its content *would* have,
-// which a stylesheet cannot compute — the obvious `useElementSize` from
-// `@uniflowed/hooks/dom` measures the element while it is hidden and reports
-// zero, which is exactly the moment the number is wanted. Getting it right
-// means a measuring pass with the panel briefly laid out and not painted, and
-// that is a piece of work of its own rather than a line to be added here — #330.
-// This component ships without it rather than with a custom property that reads
-// `0px`.
+// `measure` puts the height the content *would* have on
+// `Collapsible.Content` as `--uf-collapsible-height`, correct while the panel
+// is still closed — which is the only moment it is any use, because
+// `height: 0 → var(--uf-collapsible-height)` is a transition that has to know
+// its destination before it starts. `internal/disclosure.js` holds the
+// measuring pass and says why the obvious ways of asking all answer zero, and
+// why the prop is opt-in rather than always on.
+//
+//   [data-collapsible-content] {
+//     overflow: hidden;
+//     transition: height 150ms;
+//     height: 0;
+//   }
+//   [data-collapsible-content]:not([hidden]) {
+//     height: var(--uf-collapsible-height);
+//   }
+//
+// The selector is the caller's — a class, a `data-*` of their own, whatever
+// they already style with. This package emits the number and no styles at all,
+// which is the same division `internal/anchor.js` keeps for a popover: a
+// stylesheet can say *how* to move, and only the component can say how far.
 
 "use client";
 
 import * as React from "@uniflowed/react";
 import { createContext, useContext, useId, useMemo, useRef, useState } from "@uniflowed/react";
 
-import type { Rest } from "./internal/merge-props.js";
-import { composeHandlers, composeRefs, withoutComposed } from "./internal/merge-props.js";
-import { usePresence, useUntilFound } from "./internal/disclosure.js";
+import type { RenderProp, Rest } from "./internal/merge-props.js";
+import {
+  composeHandlers,
+  composeRefs,
+  withProps,
+  withoutComposed,
+} from "./internal/merge-props.js";
+import { useMeasuredHeight, usePresence, useUntilFound } from "./internal/disclosure.js";
 import { useControlled } from "./internal/controlled-state.js";
 
 type CollapsibleState = {|
@@ -51,6 +69,8 @@ type CollapsibleState = {|
   /** Whether a `Collapsible.Content` is rendered, so the trigger names one that exists. */
   readonly present: boolean,
   readonly registerContent: (present: boolean) => void,
+  /** Whether the content carries its measured height; see the module header. */
+  readonly measure: boolean,
 |};
 
 const CollapsibleContext: React.Context<CollapsibleState | null> = createContext(null);
@@ -76,47 +96,47 @@ export component CollapsibleRoot(
   defaultOpen?: boolean = false,
   open?: boolean,
   onOpenChange?: (open: boolean) => void,
+  measure?: boolean = false,
 ) {
   const contentId = `${useId()}-content`;
   const [isOpen, setOpen] = useControlled(open, defaultOpen, onOpenChange);
   const [present, setPresent] = useState(false);
 
   const state = useMemo(
-    () => ({ contentId, open: isOpen, setOpen, present, registerContent: setPresent }),
-    [contentId, isOpen, setOpen, present],
+    () => ({ contentId, open: isOpen, setOpen, present, registerContent: setPresent, measure }),
+    [contentId, isOpen, setOpen, present, measure],
   );
 
   return <CollapsibleContext.Provider value={state}>{children}</CollapsibleContext.Provider>;
 }
 
-/** The button that shows and hides the content. */
+/** The control that shows and hides the content. */
 export component CollapsibleTrigger(
   children: React.Node,
   disabled?: boolean = false,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   const collapsible = useCollapsible("Collapsible.Trigger");
-  const passed = withoutComposed(rest, ["onClick"]);
+  const props = withProps(withoutComposed(rest, ["onClick"]), {
+    // Named only while the content is in the document. A caller who renders
+    // the content conditionally — or not at all until data arrives — would
+    // otherwise have this trigger pointing at nothing.
+    "aria-controls": collapsible.present ? collapsible.contentId : undefined,
+    "aria-expanded": collapsible.open ? "true" : "false",
+    children,
+    disabled,
+    onClick: composeHandlers(rest.onClick, () => {
+      if (!disabled) {
+        collapsible.setOpen(!collapsible.open);
+      }
+    }),
+  });
 
-  return (
-    <button
-      {...passed}
-      // Named only while the content is in the document. A caller who renders
-      // the content conditionally — or not at all until data arrives — would
-      // otherwise have this button pointing at nothing.
-      aria-controls={collapsible.present ? collapsible.contentId : undefined}
-      aria-expanded={collapsible.open ? "true" : "false"}
-      disabled={disabled}
-      onClick={composeHandlers(rest.onClick, () => {
-        if (!disabled) {
-          collapsible.setOpen(!collapsible.open);
-        }
-      })}
-      type="button"
-    >
-      {children}
-    </button>
-  );
+  if (render != null) {
+    return render(props);
+  }
+  return <button {...props} type="button" />;
 }
 
 /**
@@ -126,22 +146,26 @@ export component CollapsibleTrigger(
  * the module header, and `internal/disclosure.js` for what `hidden` is upgraded
  * to and why that takes an effect.
  */
-export component CollapsibleContent(children: React.Node, ...rest: Rest) {
+export component CollapsibleContent(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const collapsible = useCollapsible("Collapsible.Content");
   const contentRef = useRef<HTMLElement | null>(null);
   usePresence(collapsible.registerContent);
   useUntilFound(contentRef, collapsible.open);
+  useMeasuredHeight(contentRef, collapsible.measure);
 
-  return (
-    <div
-      {...withoutComposed(rest, ["ref"])}
-      hidden={!collapsible.open}
-      id={collapsible.contentId}
-      ref={composeRefs(rest.ref, (element) => {
-        contentRef.current = element;
-      })}
-    >
-      {children}
-    </div>
-  );
+  const props = withProps(withoutComposed(rest, ["ref"]), {
+    children,
+    hidden: !collapsible.open,
+    id: collapsible.contentId,
+    // React calls callback refs during commit; this node is only read by effects.
+    // uf-lint-disable-next-line react-compiler/refs
+    ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
+      contentRef.current = element;
+    }),
+  });
+
+  if (render != null) {
+    return render(props);
+  }
+  return <div {...props} />;
 }

package/color-picker.js

@@ -0,0 +1,172 @@
+// @flow
+"use client";
+import * as React from "@uniflowed/react";
+import { createContext, useContext, useState } from "@uniflowed/react";
+import { useControlled } from "./internal/controlled-state.js";
+import type { RenderProp, Rest } from "./internal/merge-props.js";
+import { composeHandlers, withProps } from "./internal/merge-props.js";
+import { directionOf } from "./internal/roving-focus.js";
+
+/** Canonical #rrggbb or #rrggbbaa, with CSS's short hex forms accepted at the boundary. */
+export function parseColor(value: string): string | null {
+  let hex = value.trim().toLowerCase();
+  if (!/^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(hex)) return null;
+  if (hex.length <= 5)
+    hex =
+      "#" +
+      Array.from(hex.slice(1))
+        .map((char) => char + char)
+        .join("");
+  return hex;
+}
+type ColorState = { value: string, disabled: boolean, set: (value: string) => void };
+const ColorContext: React.Context<ColorState | null> = createContext(null);
+hook useColor(): ColorState {
+  const color = useContext(ColorContext);
+  if (color == null) throw new Error("ColorPicker parts must be inside ColorPicker.Root");
+  return color;
+}
+export component ColorPickerRoot(
+  children: React.Node,
+  value?: string,
+  defaultValue?: string = "#000000",
+  onValueChange?: (value: string) => void,
+  disabled?: boolean = false,
+  render?: RenderProp,
+  ...rest: Rest
+) {
+  const [current, setCurrent] = useControlled(value, defaultValue, onValueChange);
+  const normalized = parseColor(current);
+  if (normalized == null) throw new RangeError("ColorPicker value must be a CSS hex color");
+  const state = {
+    value: normalized,
+    disabled,
+    set: (next: string) => {
+      const color = parseColor(next);
+      if (!disabled && color != null) setCurrent(color);
+    },
+  };
+  const props = withProps(rest, { children });
+  return (
+    <ColorContext.Provider value={state}>
+      {render != null ? render(props) : <div {...props} />}
+    </ColorContext.Provider>
+  );
+}
+export component ColorPickerInput(render?: RenderProp, ...rest: Rest) {
+  const color = useColor();
+  const props = withProps(rest, {
+    type: "color",
+    value: color.value.slice(0, 7),
+    disabled: color.disabled,
+    onChange: composeHandlers(rest.onChange, (event: $FlowFixMe) =>
+      color.set(event.currentTarget.value + color.value.slice(7)),
+    ),
+  });
+  return render != null ? render(props) : <input {...props} />;
+}
+export component ColorPickerField(render?: RenderProp, ...rest: Rest) {
+  const color = useColor();
+  const [draft, setDraft] = useState<string | null>(null);
+  const text = draft ?? color.value;
+  const invalid = parseColor(text) == null;
+  const commit = () => {
+    if (!invalid) {
+      color.set(text);
+      setDraft(null);
+    }
+  };
+  const props = withProps(rest, {
+    type: "text",
+    value: text,
+    disabled: color.disabled,
+    "aria-invalid": invalid ? "true" : rest["aria-invalid"],
+    onChange: composeHandlers(rest.onChange, (event: $FlowFixMe) =>
+      setDraft(event.currentTarget.value),
+    ),
+    onBlur: composeHandlers(rest.onBlur, commit),
+    onKeyDown: composeHandlers(rest.onKeyDown, (event: $FlowFixMe) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        commit();
+      }
+    }),
+  });
+  return render != null ? render(props) : <input {...props} />;
+}
+export component ColorPickerChannel(
+  channel: "red" | "green" | "blue" | "alpha",
+  render?: RenderProp,
+  ...rest: Rest
+) {
+  const color = useColor();
+  const at = ["red", "green", "blue", "alpha"].indexOf(channel);
+  const value = parseInt(
+    (color.value + (color.value.length === 7 ? "ff" : "")).slice(1 + at * 2, 3 + at * 2),
+    16,
+  );
+  const change = (next: number) => {
+    const hex = color.value.slice(1).padEnd(8, "f");
+    const byte = Math.max(0, Math.min(255, Math.round(next)))
+      .toString(16)
+      .padStart(2, "0");
+    const full = hex.slice(0, at * 2) + byte + hex.slice(at * 2 + 2);
+    color.set("#" + (at === 3 || color.value.length === 9 ? full : full.slice(0, 6)));
+  };
+  const props = withProps(rest, {
+    type: "range",
+    min: 0,
+    max: 255,
+    step: 1,
+    value,
+    disabled: color.disabled,
+    "aria-label": rest["aria-label"] ?? channel,
+    "aria-valuetext": channel === "alpha" ? `${Math.round((value / 255) * 100)}%` : String(value),
+    onChange: composeHandlers(rest.onChange, (event: $FlowFixMe) =>
+      change(Number(event.currentTarget.value)),
+    ),
+    onKeyDown: composeHandlers(rest.onKeyDown, (event: $FlowFixMe) => {
+      if (color.disabled) return;
+      const key = event.key;
+      if (
+        ![
+          "ArrowLeft",
+          "ArrowRight",
+          "ArrowUp",
+          "ArrowDown",
+          "PageUp",
+          "PageDown",
+          "Home",
+          "End",
+        ].includes(key)
+      )
+        return;
+      event.preventDefault();
+      const rtl = directionOf(event.currentTarget) === "rtl";
+      change(
+        key === "Home"
+          ? 0
+          : key === "End"
+            ? 255
+            : value +
+              (key === "PageUp"
+                ? 10
+                : key === "PageDown"
+                  ? -10
+                  : key === "ArrowUp" || key === (rtl ? "ArrowLeft" : "ArrowRight")
+                    ? 1
+                    : -1),
+      );
+    }),
+  });
+  return render != null ? render(props) : <input {...props} />;
+}
+export component ColorPickerSwatch(render?: RenderProp, ...rest: Rest) {
+  const color = useColor();
+  const props = withProps(rest, {
+    "aria-hidden": "true",
+    "data-color": color.value,
+    style: { ...(rest.style as $FlowFixMe), backgroundColor: color.value },
+  });
+  return render != null ? render(props) : <span {...props} />;
+}