@ui-sdk/react 0.0.0-stage → 0.1.0-beta.1

package/dist/popover.js

@@ -0,0 +1,151 @@
+"use client";
+// src/popover.tsx
+import {
+  popover
+} from "@ui-sdk/core/popover";
+import * as React from "react";
+import {
+  Connected,
+  renderPopup,
+  sheetViewport,
+  useOwnContainer,
+  usePopupContainer,
+  useControllerEntry
+} from "./popup.js";
+import {
+  createParts,
+  HandleScope,
+  renderElement,
+  useHandle,
+  useNearest,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { createPopoverController } from "@ui-sdk/core/popover";
+import { jsx } from "react/jsx-runtime";
+var parts = createParts(popover, {
+  trigger: "button",
+  title: "h2",
+  description: "p",
+  close: "button",
+  arrow: "div"
+});
+var ContainerContext = React.createContext(void 0);
+var TriggerContext = React.createContext(null);
+function Popover({ children, container, ...options }) {
+  const handle = usePrimitive(popover, options);
+  useControllerEntry(options.controller, handle);
+  return /* @__PURE__ */ jsx(HandleScope, { handle, children: /* @__PURE__ */ jsx(ContainerContext.Provider, { value: container, children }) });
+}
+function PopoverTrigger({
+  controller,
+  ...props
+}) {
+  const {
+    disabled,
+    focusableWhenDisabled,
+    payload: _,
+    shortcut,
+    render,
+    ...rest
+  } = props;
+  const unconnected = () => renderElement(
+    "button",
+    {
+      type: "button",
+      disabled: disabled && !focusableWhenDisabled,
+      "aria-disabled": disabled && focusableWhenDisabled || void 0,
+      ...rest
+    },
+    render,
+    {
+      open: false,
+      disabled: !!disabled
+    }
+  );
+  return /* @__PURE__ */ jsx(TriggerContext.Provider, { value: { shortcut }, children: /* @__PURE__ */ jsx(
+    Connected,
+    {
+      primitive: popover,
+      controller,
+      fallback: unconnected,
+      children: /* @__PURE__ */ jsx(parts.Trigger, { ...props })
+    }
+  ) });
+}
+function PopoverContent({
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  collisionPadding,
+  arrowPadding,
+  anchor,
+  initialFocus,
+  finalFocus,
+  keepMounted,
+  container,
+  render,
+  ...props
+}) {
+  const target = usePopupContainer(useOwnContainer(container, ContainerContext));
+  const content = {
+    side,
+    align,
+    sideOffset,
+    alignOffset,
+    collisionPadding,
+    arrowPadding,
+    anchor,
+    initialFocus,
+    finalFocus,
+    keepMounted
+  };
+  const handle = useHandle(popover);
+  const partProps = {
+    ...props,
+    render: sheetViewport(handle, render)
+  };
+  const element = usePart(handle, "content", content, partProps);
+  return element && renderPopup(element, target);
+}
+var PopoverTitle = parts.Title;
+var PopoverDescription = parts.Description;
+var PopoverClose = parts.Close;
+var PopoverArrow = parts.Arrow;
+function PopoverShortcut(props) {
+  const trigger = React.useContext(TriggerContext);
+  if (useNearest(popover)) {
+    return /* @__PURE__ */ jsx(ShortcutPart, { inherited: trigger?.shortcut, ...props });
+  }
+  if (trigger) {
+    return null;
+  }
+  throw new Error("Popover parts must be used inside <Popover>.");
+}
+var text = (state) => state.text;
+function ShortcutPart({
+  inherited,
+  shortcut,
+  children = text,
+  ...props
+}) {
+  return usePart(
+    popover,
+    "shortcut",
+    { shortcut: shortcut ?? inherited },
+    { ...props, children },
+    "span"
+  );
+}
+export {
+  Popover,
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverShortcut,
+  PopoverTitle,
+  PopoverTrigger,
+  createPopoverController
+};

package/dist/popup.d.ts

@@ -0,0 +1,41 @@
+import type { Primitive } from "@ui-sdk/core";
+import * as React from "react";
+import { type PrimitiveHandle, type RenderProp } from "./use-primitive.js";
+type PopupContainer = Element | DocumentFragment | null | undefined;
+declare function usePopupContainer(own: PopupContainer): PopupContainer;
+declare function useOwnContainer(own: PopupContainer, root: React.Context<PopupContainer>): PopupContainer;
+declare function renderPopup(element: React.ReactElement, container: PopupContainer): React.JSX.Element;
+/**
+ * A popup content's `render`: the content, inside the full-screen viewport a
+ * sheet sits in while its `viewport` slot is present: always for a drawer,
+ * and for a popup while it presents as a sheet. The viewport is what goes
+ * into the top layer. Its attributes are a subset of the content's, so the
+ * content's render keeps it current.
+ */
+declare function sheetViewport<State>(popup: PrimitiveHandle<Primitive>, render?: RenderProp<State>): (props: Record<string, any>, state: State) => React.JSX.Element;
+/**
+ * Where an input renders while its popup presents as a sheet: in a header the
+ * content renders at its top. The root keeps the header element, the content
+ * renders it with `sheetHeader`, and the input renders into it with
+ * `inSheetHeader`, so there's one input at a time.
+ */
+declare const SheetHeaderContext: React.Context<[HTMLElement | null, (header: HTMLElement | null) => void]>;
+/** The header at the top of a sheet's content, while the popup's `header` slot is present. */
+declare function sheetHeader(popup: PrimitiveHandle<Primitive>, setHeader: (header: HTMLElement | null) => void): React.JSX.Element | null;
+/** Renders an input into the sheet's header while there is one. */
+declare function inSheetHeader(element: React.ReactElement, header: HTMLElement | null): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/**
+ * A part that can sit outside its component, like a trigger in a table row:
+ * its children render with the instance `controller` connects them to, once
+ * that one mounts, or else with the nearest instance of `primitive`, and
+ * `fallback` renders until there is one. `fallback` is a function, so a
+ * connected part never builds it.
+ */
+declare function Connected({ primitive, controller, fallback, children, }: {
+    primitive: Primitive;
+    controller: object | undefined;
+    fallback: () => React.ReactNode;
+    children: React.ReactNode;
+}): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+export { useControllerEntry, useControllerTarget } from "./controller-target.js";
+export { Connected, inSheetHeader, type PopupContainer, renderPopup, sheetHeader, SheetHeaderContext, sheetViewport, useOwnContainer, usePopupContainer, };

package/dist/popup.js

@@ -0,0 +1,180 @@
+"use client";
+// src/popup.tsx
+import { portalTarget } from "@ui-sdk/core/renderer";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { useControllerTarget } from "./controller-target.js";
+import { mergeRefs } from "./render-element.js";
+import {
+  HandleScope,
+  presentIn,
+  renderElement,
+  slotIn,
+  useNearest
+} from "./use-primitive.js";
+import { useControllerEntry, useControllerTarget as useControllerTarget2 } from "./controller-target.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var InheritedContainer = React.createContext(void 0);
+function usePopupContainer(own) {
+  const inherited = React.useContext(InheritedContainer);
+  return own ?? inherited;
+}
+function useOwnContainer(own, root) {
+  const fromRoot = React.useContext(root);
+  return own ?? fromRoot;
+}
+function renderPopup(element, container) {
+  return /* @__PURE__ */ jsx(Popup, { element, container });
+}
+function Popup({
+  element,
+  container
+}) {
+  const target = portalTarget(container);
+  const [tree] = React.useState(followTree);
+  React.useInsertionEffect(() => {
+    if (target) {
+      tree.placed(target);
+    }
+  }, [tree, target]);
+  const part = element;
+  const tracked = React.cloneElement(part, {
+    ref: mergeRefs(part.props.ref ?? null, tree.track)
+  });
+  const content = container ? /* @__PURE__ */ jsx(InheritedContainer.Provider, { value: container, children: tracked }) : tracked;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TreeEffect, { tree, target }),
+    target ? createPortal(content, target) : content
+  ] });
+}
+function followTree() {
+  let els = [];
+  let isShown = false;
+  let show;
+  let lastBefore = null;
+  const hideLater = () => queueMicrotask(() => {
+    if (isShown || show) {
+      return;
+    }
+    const shows = els.filter((el) => el.isConnected).map(hide);
+    if (shows.length) {
+      show = () => shows.forEach((run) => run());
+    }
+  });
+  const track = (next) => {
+    if (next instanceof HTMLElement && !els.includes(next)) {
+      els = [...els.filter((el) => el.isConnected), next];
+    }
+  };
+  return {
+    // The ref for the popup's element. React lets go of it while the tree is hidden, so it's kept.
+    track,
+    // Notes the container's last node before the portal appends the popup to it.
+    placing(target) {
+      lastBefore = target.lastChild;
+    },
+    // The nodes the portal appended after that one, if the popup rendered
+    // any. A render that waits a commit to render an element adds none, and
+    // the last node then belongs to someone else. They hide unless the tree shows.
+    placed(target) {
+      if (target.lastChild === lastBefore) {
+        return;
+      }
+      const first = !lastBefore ? target.firstChild : lastBefore.parentNode === target ? lastBefore.nextSibling : target.lastChild;
+      for (let node = first; node; node = node.nextSibling) {
+        track(node);
+      }
+      if (!isShown) {
+        hideLater();
+      }
+    },
+    shown() {
+      isShown = true;
+      show?.();
+      show = void 0;
+    },
+    hidden() {
+      isShown = false;
+      hideLater();
+    }
+  };
+}
+function TreeEffect({
+  tree,
+  target
+}) {
+  React.useInsertionEffect(() => {
+    if (target) {
+      tree.placing(target);
+    }
+  }, [tree, target]);
+  React.useLayoutEffect(() => {
+    tree.shown();
+    return tree.hidden;
+  }, [tree]);
+  return null;
+}
+function hide(el) {
+  const doc = el.ownerDocument;
+  if (el.contains(doc.activeElement)) {
+    ;
+    doc.activeElement.blur();
+  }
+  for (const popover of [
+    el,
+    ...el.querySelectorAll("[popover]")
+  ]) {
+    try {
+      popover.hidePopover();
+    } catch {
+    }
+  }
+  const { style } = el;
+  if (style.display === "none") {
+    return () => {
+    };
+  }
+  const value = style.getPropertyValue("display");
+  const priority = style.getPropertyPriority("display");
+  style.setProperty("display", "none", "important");
+  return () => style.setProperty("display", value, priority);
+}
+function sheetViewport(popup, render) {
+  return (props, state) => {
+    const element = renderElement("div", props, render, state);
+    return presentIn(popup, "viewport") ? /* @__PURE__ */ jsx("div", { ...slotIn(popup, "viewport", {}), children: element }) : element;
+  };
+}
+var SheetHeaderContext = /* @__PURE__ */ React.createContext([null, () => {
+}]);
+function sheetHeader(popup, setHeader) {
+  return presentIn(popup, "header") ? /* @__PURE__ */ jsx("div", { ...slotIn(popup, "header", {}, { ref: setHeader }) }) : null;
+}
+function inSheetHeader(element, header) {
+  return header ? createPortal(element, header) : element;
+}
+function Connected({
+  primitive,
+  controller,
+  fallback,
+  children
+}) {
+  const nearest = useNearest(primitive);
+  const handle = useControllerTarget(controller, nearest);
+  if (!handle) {
+    return fallback();
+  }
+  return controller ? /* @__PURE__ */ jsx(HandleScope, { handle, children }) : children;
+}
+export {
+  Connected,
+  SheetHeaderContext,
+  inSheetHeader,
+  renderPopup,
+  sheetHeader,
+  sheetViewport,
+  useControllerEntry,
+  useControllerTarget2 as useControllerTarget,
+  useOwnContainer,
+  usePopupContainer
+};

package/dist/preferences.d.ts

@@ -0,0 +1,35 @@
+import { type PreferenceLike } from "@ui-sdk/core";
+import * as React from "react";
+/**
+ * Props of `Preferences`.
+ * @experimental
+ */
+type PreferencesProps = Omit<React.ComponentProps<"div">, "children"> & {
+    /** The preferences to show, from `createPreference` or `createColorScheme`. */
+    preferences: readonly PreferenceLike[];
+    /** The nonce your Content Security Policy gives inline scripts. */
+    nonce?: string;
+    children?: React.ReactNode;
+};
+/**
+ * Shows preferences on `data-*` attributes, so CSS styles by them from the
+ * first paint: global ones on `<html>`, the rest on its own element, which
+ * has `display: contents`. On the server it renders one inline script as its
+ * first child, which puts every saved value on its attribute as the page
+ * loads, before hydration. Content that reads a preference, through
+ * `usePreference`, catches up after hydration.
+ * @experimental
+ */
+declare function Preferences({ preferences, nonce, children, style, ref, ...props }: PreferencesProps): React.JSX.Element;
+/**
+ * A preference's state, like `{ value: "dark" }`, or a color scheme's. It's
+ * the server's while hydrating, so the page hydrates without a mismatch, and
+ * the saved value right after.
+ * @experimental
+ */
+declare function usePreference<State>(preference: {
+    get: () => State;
+    initialState: State;
+    subscribe: (listener: () => void) => () => void;
+}): State;
+export { Preferences, type PreferencesProps, usePreference };

package/dist/preferences.js

@@ -0,0 +1,93 @@
+"use client";
+// src/preferences.tsx
+import { preferencesScript } from "@ui-sdk/core";
+import * as React from "react";
+import { mergeRefs } from "./render-element.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var noSubscribe = () => () => {
+};
+function useStable(preferences) {
+  const ref = React.useRef(preferences);
+  const same = ref.current.length === preferences.length && ref.current.every((preference, index) => preference === preferences[index]);
+  if (!same) {
+    ref.current = preferences;
+  }
+  return ref.current;
+}
+function Preferences({
+  preferences,
+  nonce,
+  children,
+  style,
+  ref,
+  ...props
+}) {
+  const list = useStable(preferences);
+  const element = React.useRef(null);
+  const fromServer = React.useSyncExternalStore(
+    noSubscribe,
+    () => false,
+    () => true
+  );
+  const subscribe = React.useCallback(
+    (listener) => {
+      const stops = list.map((preference) => preference.subscribe(listener));
+      return () => stops.forEach((stop) => stop());
+    },
+    [list]
+  );
+  const values = React.useSyncExternalStore(
+    subscribe,
+    () => JSON.stringify(list.map((preference) => preference.get().value)),
+    () => JSON.stringify(list.map((preference) => preference.initialState.value))
+  );
+  React.useEffect(() => {
+    for (const preference of list) {
+      ;
+      (preference.global ? document.documentElement : element.current)?.setAttribute(preference.attribute, preference.get().value);
+    }
+  }, [list, values]);
+  const shown = JSON.parse(values);
+  const attributes = {};
+  list.forEach((preference, index) => {
+    if (!preference.global) {
+      attributes[preference.attribute] = shown[index];
+    }
+  });
+  return (
+    // The script changes these attributes before hydration, so they may differ from the server's HTML.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "preferences",
+        ...attributes,
+        ...props,
+        ref: mergeRefs(element, ref ?? null),
+        style: { display: "contents", ...style },
+        suppressHydrationWarning: true,
+        children: [
+          fromServer ? /* @__PURE__ */ jsx(
+            "script",
+            {
+              nonce,
+              suppressHydrationWarning: true,
+              dangerouslySetInnerHTML: { __html: preferencesScript(list) }
+            }
+          ) : null,
+          children
+        ]
+      }
+    )
+  );
+}
+function usePreference(preference) {
+  return React.useSyncExternalStore(
+    preference.subscribe,
+    preference.get,
+    () => preference.initialState
+  );
+}
+export {
+  Preferences,
+  usePreference
+};

package/dist/primitive.d.ts

@@ -0,0 +1,2 @@
+export { mergeProps, renderElement, type RenderProp } from "./render-element.js";
+export { createParts, type GenericPartComponent, type PartComponent, usePart, usePrimitive, type PartProps, type Parts, type PrimitiveHandle, } from "./use-primitive.js";

package/dist/primitive.js

@@ -0,0 +1,14 @@
+// src/primitive.ts
+import { mergeProps, renderElement } from "./render-element.js";
+import {
+  createParts,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+export {
+  createParts,
+  mergeProps,
+  renderElement,
+  usePart,
+  usePrimitive
+};