@arun-dev/headless 4.12.0 → 4.14.0

package/dist/toast/index.js

@@ -0,0 +1,262 @@
+import {
+  __export,
+  useRender
+} from "../chunk-OQTWWZ4B.js";
+
+// src/toast/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Action: () => ToastAction,
+  Close: () => ToastClose,
+  Description: () => ToastDescription,
+  Provider: () => ToastProvider,
+  Root: () => ToastRoot,
+  Title: () => ToastTitle,
+  Viewport: () => ToastViewport
+});
+
+// src/toast/ToastProvider.tsx
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+
+// src/toast/ToastContext.ts
+import { createContext, useContext } from "react";
+var ToastContext = createContext(null);
+function useToastContext(part) {
+  const context = useContext(ToastContext);
+  if (context === null) {
+    throw new Error(`${part} must be used inside <Toast.Provider>.`);
+  }
+  return context;
+}
+function useToastManager() {
+  const { toasts, add, update, close } = useToastContext("useToastManager()");
+  return { toasts, add, update, close };
+}
+var ToastRootContext = createContext(null);
+function useToastRootContext(part) {
+  const toast = useContext(ToastRootContext);
+  if (toast === null) {
+    throw new Error(`<Toast.${part}> must be rendered inside <Toast.Root>.`);
+  }
+  return toast;
+}
+
+// src/toast/ToastProvider.tsx
+import { jsx } from "react/jsx-runtime";
+function ToastProvider({ limit = 3, timeout = 5e3, children }) {
+  const [all, setAll] = useState([]);
+  const prefix = useId();
+  const counter = useRef(0);
+  const closedRef = useRef(/* @__PURE__ */ new Set());
+  const add = useCallback(
+    (options) => {
+      const id = options.id ?? `${prefix}-${++counter.current}`;
+      const toast = {
+        ...options,
+        id,
+        timeout: options.timeout ?? timeout,
+        priority: options.priority ?? "low"
+      };
+      closedRef.current.delete(id);
+      setAll((current) => [...current.filter((t) => t.id !== id), toast]);
+      return id;
+    },
+    [prefix, timeout]
+  );
+  const update = useCallback((id, patch) => {
+    setAll(
+      (current) => current.map((t) => t.id === id ? { ...t, ...patch, id } : t)
+    );
+  }, []);
+  const close = useCallback((id) => {
+    setAll((current) => {
+      const toast = current.find((t) => t.id === id);
+      if (toast && !closedRef.current.has(id)) {
+        closedRef.current.add(id);
+        queueMicrotask(() => toast.onClose?.());
+      }
+      return current.filter((t) => t.id !== id);
+    });
+  }, []);
+  const [pointerInside, setPointerInside] = useState(false);
+  const [focusInside, setFocusInside] = useState(false);
+  const [pageHidden, setPageHidden] = useState(false);
+  useEffect(() => {
+    const onVisibility = () => setPageHidden(document.visibilityState === "hidden");
+    onVisibility();
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => document.removeEventListener("visibilitychange", onVisibility);
+  }, []);
+  const viewportRef = useRef(null);
+  const toasts = useMemo(() => all.slice(-limit), [all, limit]);
+  const context = useMemo(
+    () => ({
+      toasts,
+      add,
+      update,
+      close,
+      paused: pointerInside || focusInside || pageHidden,
+      setPointerInside,
+      setFocusInside,
+      viewportRef
+    }),
+    [toasts, add, update, close, pointerInside, focusInside, pageHidden]
+  );
+  return /* @__PURE__ */ jsx(ToastContext.Provider, { value: context, children });
+}
+
+// src/toast/ToastViewport.tsx
+import { useLayoutEffect, useRef as useRef2 } from "react";
+function ToastViewport({ className, children, render, ...rest }) {
+  const { toasts, viewportRef, setPointerInside, setFocusInside } = useToastContext("<Toast.Viewport>");
+  const elementRef = useRef2(null);
+  const newest = toasts.at(-1)?.id;
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    viewportRef.current = element;
+    if (!element || typeof element.showPopover !== "function") return;
+    if (element.matches(":popover-open")) element.hidePopover();
+    element.showPopover();
+  }, [newest, viewportRef]);
+  return useRender({
+    render,
+    defaultTagName: "section",
+    props: {
+      popover: "manual",
+      "aria-label": "Notifications",
+      "aria-live": "polite",
+      tabIndex: -1,
+      className,
+      ref: elementRef,
+      children: typeof children === "function" ? children(toasts) : children,
+      onPointerEnter() {
+        setPointerInside(true);
+      },
+      onPointerLeave() {
+        setPointerInside(false);
+      },
+      onFocus() {
+        setFocusInside(true);
+      },
+      onBlur(event) {
+        const next = event.relatedTarget;
+        if (!next || !event.currentTarget.contains(next)) setFocusInside(false);
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/toast/ToastRoot.tsx
+import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ToastRoot({ toast, className, children, render, ...rest }) {
+  const { close, paused, viewportRef } = useToastContext("<Toast.Root>");
+  const elementRef = useRef3(null);
+  const { id, timeout } = toast;
+  const remaining = useRef3(timeout);
+  const lastTimeout = useRef3(timeout);
+  if (lastTimeout.current !== timeout) {
+    lastTimeout.current = timeout;
+    remaining.current = timeout;
+  }
+  useEffect2(() => {
+    if (paused || timeout <= 0) return;
+    const started = Date.now();
+    const timer = setTimeout(() => close(id), remaining.current);
+    return () => {
+      clearTimeout(timer);
+      remaining.current = Math.max(0, remaining.current - (Date.now() - started));
+    };
+  }, [paused, timeout, id, close]);
+  const focusInside = useRef3(false);
+  useEffect2(
+    () => () => {
+      if (focusInside.current) viewportRef.current?.focus();
+    },
+    [viewportRef]
+  );
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      role: toast.priority === "high" ? "alert" : void 0,
+      "aria-atomic": true,
+      "data-type": toast.type,
+      className,
+      children,
+      ref: elementRef,
+      onFocus() {
+        focusInside.current = true;
+      },
+      onBlur(event) {
+        const next = event.relatedTarget;
+        if (!next || !event.currentTarget.contains(next)) focusInside.current = false;
+      },
+      onKeyDown(event) {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          close(id);
+        }
+      }
+    },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ jsx2(ToastRootContext.Provider, { value: toast, children: element });
+}
+
+// src/toast/ToastTitle.tsx
+function ToastTitle({ className, children, render, ...rest }) {
+  const toast = useToastRootContext("Title");
+  return useRender({
+    render,
+    defaultTagName: "p",
+    props: { className, children: children ?? toast.title },
+    consumerProps: rest
+  });
+}
+
+// src/toast/ToastDescription.tsx
+function ToastDescription({ className, children, render, ...rest }) {
+  const toast = useToastRootContext("Description");
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: { className, children: children ?? toast.description },
+    consumerProps: rest
+  });
+}
+
+// src/toast/ToastAction.tsx
+function ToastAction({ className, children, render, ...rest }) {
+  useToastRootContext("Action");
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: { type: "button", className, children },
+    consumerProps: rest
+  });
+}
+
+// src/toast/ToastClose.tsx
+function ToastClose({ className, children, render, ...rest }) {
+  const { close } = useToastContext("<Toast.Close>");
+  const { id } = useToastRootContext("Close");
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      className,
+      children,
+      onClick() {
+        close(id);
+      }
+    },
+    consumerProps: rest
+  });
+}
+export {
+  index_parts_exports as Toast,
+  useToastManager
+};

package/dist/toggle/index.cjs

@@ -0,0 +1,232 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/toggle/index.ts
+var toggle_exports = {};
+__export(toggle_exports, {
+  Toggle: () => Toggle
+});
+module.exports = __toCommonJS(toggle_exports);
+
+// src/toggle/Toggle.tsx
+var import_react5 = require("react");
+
+// src/core/useRender.ts
+var import_react = require("react");
+
+// src/core/mergeProps.ts
+function isEventHandler(key) {
+  return key.length > 2 && key.startsWith("on") && key[2] === key[2]?.toUpperCase();
+}
+function mergeRefs(...refs) {
+  return (node) => {
+    const cleanups = refs.map((ref) => {
+      if (typeof ref === "function") {
+        const result = ref(node);
+        return typeof result === "function" ? result : () => ref(null);
+      }
+      if (ref && typeof ref === "object") {
+        ref.current = node;
+        return () => {
+          ref.current = null;
+        };
+      }
+      return void 0;
+    });
+    return () => {
+      cleanups.forEach((cleanup) => {
+        if (typeof cleanup === "function") cleanup();
+      });
+    };
+  };
+}
+function isSyntheticEvent(event) {
+  return typeof event === "object" && event !== null && "nativeEvent" in event;
+}
+function makeEventPreventable(event) {
+  if (Object.prototype.hasOwnProperty.call(event, "preventComponentHandler")) return;
+  const target = event;
+  target.preventComponentHandler = () => {
+    target.componentHandlerPrevented = true;
+  };
+}
+function isComponentHandlerPrevented(event) {
+  return typeof event === "object" && event !== null && event.componentHandlerPrevented === true;
+}
+function chainHandlers(earlier, value) {
+  return (...args) => {
+    const event = args[0];
+    if (isSyntheticEvent(event)) makeEventPreventable(event);
+    value(...args);
+    if (isComponentHandlerPrevented(event)) return;
+    earlier(...args);
+  };
+}
+function mergeProps(...objects) {
+  const merged = {};
+  for (const props of objects) {
+    if (!props) continue;
+    for (const key of Object.keys(props)) {
+      const value = props[key];
+      if (value === void 0) continue;
+      if (isEventHandler(key) && typeof value === "function") {
+        const earlier = merged[key];
+        merged[key] = typeof earlier === "function" ? chainHandlers(earlier, value) : value;
+      } else if (key === "className") {
+        merged.className = merged.className ? `${String(merged.className)} ${String(value)}` : value;
+      } else if (key === "style") {
+        merged.style = { ...merged.style, ...value };
+      } else if (key === "ref") {
+        merged.ref = merged.ref ? mergeRefs(merged.ref, value) : value;
+      } else {
+        merged[key] = value;
+      }
+    }
+  }
+  return merged;
+}
+
+// src/core/useRender.ts
+function useRender({
+  render,
+  defaultTagName,
+  props,
+  consumerProps
+}) {
+  const merged = mergeProps(props, consumerProps);
+  if ((0, import_react.isValidElement)(render)) {
+    return (0, import_react.cloneElement)(render, mergeProps(merged, render.props));
+  }
+  return (0, import_react.createElement)(defaultTagName, merged);
+}
+
+// src/core/useControlled.ts
+var import_react2 = require("react");
+function useControlled({
+  controlled,
+  default: defaultValue,
+  name = "Component",
+  state = "value"
+}) {
+  const { current: isControlled } = (0, import_react2.useRef)(controlled !== void 0);
+  const [uncontrolled, setUncontrolled] = (0, import_react2.useState)(defaultValue);
+  const defaultRef = (0, import_react2.useRef)(defaultValue);
+  const value = isControlled ? controlled : uncontrolled;
+  if (process.env.NODE_ENV !== "production") {
+    if (isControlled !== (controlled !== void 0)) {
+      console.error(
+        `${name}: cannot switch between controlled and uncontrolled \`${state}\`. Decide which one this component is for the whole of its life.`
+      );
+    }
+    if (!isControlled && defaultRef.current !== defaultValue) {
+      console.error(
+        `${name}: cannot change the default \`${state}\` after mount. It is only read once, so later changes are silently ignored.`
+      );
+    }
+  }
+  const setValue = (0, import_react2.useCallback)(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+}
+
+// src/core/rovingGroup.ts
+var import_react3 = require("react");
+var RovingGroupContext = (0, import_react3.createContext)(null);
+function useRovingGroupContext() {
+  return (0, import_react3.useContext)(RovingGroupContext);
+}
+function useRovingItem(ref, disabled, selected = false) {
+  const group = useRovingGroupContext();
+  const item = (0, import_react3.useMemo)(() => ({ ref, disabled, selected }), [ref, disabled, selected]);
+  const register = group?.register;
+  (0, import_react3.useLayoutEffect)(() => register?.(item), [register, item]);
+  if (!group) return { tabIndex: void 0, onFocus: void 0 };
+  return {
+    tabIndex: group.tabStop?.ref === ref ? 0 : -1,
+    onFocus() {
+      group.setTabStop(item);
+    }
+  };
+}
+
+// src/toggle-group/ToggleGroupContext.ts
+var import_react4 = require("react");
+var ToggleGroupContext = (0, import_react4.createContext)(null);
+function useToggleGroupContext() {
+  return (0, import_react4.useContext)(ToggleGroupContext);
+}
+
+// src/toggle/Toggle.tsx
+function Toggle({
+  pressed: pressedProp,
+  defaultPressed,
+  onPressedChange,
+  value,
+  disabled: disabledProp = false,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const group = useToggleGroupContext();
+  const [ownPressed, setOwnPressed] = useControlled({
+    controlled: group ? void 0 : pressedProp,
+    default: defaultPressed ?? false,
+    name: "Toggle",
+    state: "pressed"
+  });
+  const pressed = group && value !== void 0 ? group.value.includes(value) : ownPressed;
+  const disabled = disabledProp || (group?.disabled ?? false);
+  const elementRef = (0, import_react5.useRef)(null);
+  const roving = useRovingItem(elementRef, disabled, pressed);
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      "aria-pressed": pressed,
+      disabled: disabled || void 0,
+      "data-pressed": pressed ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      tabIndex: roving.tabIndex,
+      className,
+      children,
+      ref: elementRef,
+      onFocus: roving.onFocus,
+      onClick(event) {
+        if (disabled || event.defaultPrevented) return;
+        if (group && value !== void 0) {
+          group.toggle(value);
+          return;
+        }
+        setOwnPressed(!pressed);
+        onPressedChange?.(!pressed);
+      }
+    },
+    consumerProps: rest
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Toggle
+});

package/dist/toggle/index.d.cts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
+
+type ToggleOwnProps = {
+    /** Controlled state. Provide `onPressedChange` alongside it. Ignored inside a ToggleGroup. */
+    pressed?: boolean;
+    /** Initial state when uncontrolled. Read once, at mount. */
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    /** Its value in a ToggleGroup: pressed while the group's `value` holds it. */
+    value?: string;
+    disabled?: boolean;
+    /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToggleProps = ToggleOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof ToggleOwnProps>;
+/**
+ * A button that stays pressed: `<button aria-pressed>` (decision 17), as APG's toggle button.
+ * Inside a ToggleGroup its state is the group's, by `value`; inside a Toolbar or a ToggleGroup it
+ * is one of the arrow-key items. `data-pressed` while pressed.
+ */
+declare function Toggle({ pressed: pressedProp, defaultPressed, onPressedChange, value, disabled: disabledProp, className, children, render, ...rest }: ToggleProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+export { Toggle, type ToggleProps };

package/dist/toggle/index.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
+
+type ToggleOwnProps = {
+    /** Controlled state. Provide `onPressedChange` alongside it. Ignored inside a ToggleGroup. */
+    pressed?: boolean;
+    /** Initial state when uncontrolled. Read once, at mount. */
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    /** Its value in a ToggleGroup: pressed while the group's `value` holds it. */
+    value?: string;
+    disabled?: boolean;
+    /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToggleProps = ToggleOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof ToggleOwnProps>;
+/**
+ * A button that stays pressed: `<button aria-pressed>` (decision 17), as APG's toggle button.
+ * Inside a ToggleGroup its state is the group's, by `value`; inside a Toolbar or a ToggleGroup it
+ * is one of the arrow-key items. `data-pressed` while pressed.
+ */
+declare function Toggle({ pressed: pressedProp, defaultPressed, onPressedChange, value, disabled: disabledProp, className, children, render, ...rest }: ToggleProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+export { Toggle, type ToggleProps };

package/dist/toggle/index.js

@@ -0,0 +1,68 @@
+import {
+  useToggleGroupContext
+} from "../chunk-E4JBFRMM.js";
+import {
+  useRovingItem
+} from "../chunk-36N5DD5K.js";
+import "../chunk-2S4XG4VD.js";
+import {
+  useControlled
+} from "../chunk-UEIB3I3T.js";
+import {
+  useRender
+} from "../chunk-OQTWWZ4B.js";
+
+// src/toggle/Toggle.tsx
+import { useRef } from "react";
+function Toggle({
+  pressed: pressedProp,
+  defaultPressed,
+  onPressedChange,
+  value,
+  disabled: disabledProp = false,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const group = useToggleGroupContext();
+  const [ownPressed, setOwnPressed] = useControlled({
+    controlled: group ? void 0 : pressedProp,
+    default: defaultPressed ?? false,
+    name: "Toggle",
+    state: "pressed"
+  });
+  const pressed = group && value !== void 0 ? group.value.includes(value) : ownPressed;
+  const disabled = disabledProp || (group?.disabled ?? false);
+  const elementRef = useRef(null);
+  const roving = useRovingItem(elementRef, disabled, pressed);
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      "aria-pressed": pressed,
+      disabled: disabled || void 0,
+      "data-pressed": pressed ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      tabIndex: roving.tabIndex,
+      className,
+      children,
+      ref: elementRef,
+      onFocus: roving.onFocus,
+      onClick(event) {
+        if (disabled || event.defaultPrevented) return;
+        if (group && value !== void 0) {
+          group.toggle(value);
+          return;
+        }
+        setOwnPressed(!pressed);
+        onPressedChange?.(!pressed);
+      }
+    },
+    consumerProps: rest
+  });
+}
+export {
+  Toggle
+};