@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/tooltipState.js

@@ -0,0 +1,48 @@
+let active;
+let lastHidden = -Infinity, keyboard = false, users = 0;
+const dismiss = () => active?.();
+const key = (e) => {
+  keyboard = e.key === "Tab" || e.key.startsWith("Arrow");
+  dismiss();
+};
+const pointer = () => {
+  keyboard = false;
+  dismiss();
+};
+const keyboardTooltip = () => keyboard;
+const tooltipDelay = () => performance.now() - lastHidden < 200 ? 90 : 380;
+function claimTooltip(hide) {
+  if (active !== hide) active?.(true);
+  active = hide;
+}
+function releaseTooltip(hide, visible) {
+  if (active === hide) active = void 0;
+  if (visible) lastHidden = performance.now();
+}
+function retainTooltipEvents() {
+  if (++users === 1) {
+    document.addEventListener("keydown", key, true);
+    document.addEventListener("pointerdown", pointer, true);
+    window.addEventListener("blur", dismiss);
+    window.addEventListener("resize", dismiss);
+    window.addEventListener("scroll", dismiss, true);
+  }
+  return () => {
+    if (--users === 0) {
+      document.removeEventListener("keydown", key, true);
+      document.removeEventListener("pointerdown", pointer, true);
+      window.removeEventListener("blur", dismiss);
+      window.removeEventListener("resize", dismiss);
+      window.removeEventListener("scroll", dismiss, true);
+      active = void 0;
+      keyboard = false;
+    }
+  };
+}
+export {
+  claimTooltip,
+  keyboardTooltip,
+  releaseTooltip,
+  retainTooltipEvents,
+  tooltipDelay
+};

package/components/types.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    icon?: ReactNode;
+    description?: string;
+    shortcut?: string;
+}

package/components/uploadTypes.d.ts

@@ -0,0 +1,21 @@
+export type UploadStatus = "ready" | "uploading" | "success" | "error" | "canceled";
+export type UploadFile = {
+    id: string;
+    name: string;
+    size: number;
+    type?: string;
+    file?: File;
+    status: UploadStatus;
+    progress: number;
+    error?: string;
+    url?: string;
+    response?: unknown;
+};
+export type UploadResult = {
+    url?: string;
+    response?: unknown;
+};
+export type UploadRequest = (file: File, context: {
+    signal: AbortSignal;
+    onProgress(percent: number): void;
+}) => Promise<UploadResult | void>;

package/components/useFormState.d.ts

@@ -0,0 +1,51 @@
+export type FieldRule<V, T> = {
+    label?: string;
+    required?: boolean | string;
+    mustBeTrue?: boolean | string;
+    minLength?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    pattern?: RegExp;
+    disabled?: boolean;
+    validate?(value: V, values: Readonly<T>, signal: AbortSignal): string | undefined | Promise<string | undefined>;
+};
+export type FormRules<T> = {
+    [K in keyof T]?: FieldRule<T[K], T>;
+};
+export declare function useFormState<T extends Record<string, unknown>>({ initialValues, rules, mode, }: {
+    initialValues: T;
+    rules?: FormRules<T>;
+    mode?: "submit" | "blur" | "change";
+}): {
+    values: T;
+    errors: Partial<Record<keyof T, string>>;
+    touched: Partial<Record<keyof T, boolean>>;
+    isSubmitting: boolean;
+    isValidating: boolean;
+    validating: string[];
+    submitError: string;
+    isDirty: boolean;
+    field: <K extends keyof T>(name: K) => {
+        id: string;
+        name: string;
+        required: boolean;
+        disabled: boolean | undefined;
+        error: Partial<Record<keyof T, string>>[K];
+        onBlur: () => void;
+    };
+    setValue: <K extends keyof T>(name: K, value: T[K]) => void;
+    touch: (name: keyof T) => void;
+    validate: () => Promise<{
+        valid: boolean;
+        first: keyof T | undefined;
+    }>;
+    focusField: (name: keyof T) => void;
+    reset: (next?: T) => void;
+    handleSubmit: (onSubmit: (values: T) => void | Promise<void>) => (event?: {
+        preventDefault(): void;
+    }) => Promise<void>;
+    setFieldError: (name: keyof T, error?: string) => void;
+    labels: Record<keyof T, string>;
+};
+export type FormController<T extends Record<string, unknown>> = ReturnType<typeof useFormState<T>>;

package/components/useFormState.js

@@ -0,0 +1,218 @@
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+function useFormState({
+  initialValues,
+  rules,
+  mode = "submit"
+}) {
+  const id = useId(), defaults = useRef(structuredClone(initialValues)), current = useRef(structuredClone(initialValues)), rulesRef = useRef(rules), version = useRef(0), controllers = useRef(/* @__PURE__ */ new Map()), mounted = useRef(true), locked = useRef(false), attempted = useRef(false), touchedRef = useRef({});
+  rulesRef.current = rules;
+  const [values, setValues] = useState(current.current), [errors, setErrors] = useState({}), [touched, setTouched] = useState(touchedRef.current), [isSubmitting, setSubmitting] = useState(false), [validating, setValidating] = useState([]), [submitError, setSubmitError] = useState("");
+  const errorsRef = useRef(errors);
+  errorsRef.current = errors;
+  const abort = useCallback(() => {
+    controllers.current.forEach((controller) => controller.abort());
+    controllers.current.clear();
+  }, []);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      version.current++;
+      abort();
+    };
+  }, [abort]);
+  const validateField = useCallback(
+    async (name, snapshot = current.current) => {
+      const rule = rulesRef.current?.[name];
+      if (rule?.disabled) {
+        if (mounted.current)
+          setErrors((old) => {
+            const next = { ...old };
+            delete next[name];
+            return next;
+          });
+        return void 0;
+      }
+      controllers.current.get(name)?.abort();
+      const controller = new AbortController();
+      controllers.current.set(name, controller);
+      const revision = version.current, value = snapshot[name], empty = value == null || typeof value === "string" && !value.trim() || Array.isArray(value) && value.every(
+        (item) => item == null || typeof item === "string" && !item.trim()
+      );
+      let error;
+      if (rule?.required && empty)
+        error = typeof rule.required === "string" ? rule.required : "\u8BF7\u586B\u5199" + (rule.label || String(name)) + "\u3002";
+      if (!error && rule?.mustBeTrue && value !== true)
+        error = typeof rule.mustBeTrue === "string" ? rule.mustBeTrue : "\u8BF7\u786E\u8BA4" + (rule.label || String(name)) + "\u3002";
+      if (!error && !empty && rule) {
+        const length = typeof value === "string" || Array.isArray(value) ? value.length : void 0;
+        if (length !== void 0 && rule.minLength !== void 0 && length < rule.minLength)
+          error = Array.isArray(value) ? "\u81F3\u5C11\u9009\u62E9 " + rule.minLength + " \u9879\u3002" : "\u81F3\u5C11\u8F93\u5165 " + rule.minLength + " \u4E2A\u5B57\u7B26\u3002";
+        if (length !== void 0 && rule.maxLength !== void 0 && length > rule.maxLength)
+          error = Array.isArray(value) ? "\u6700\u591A\u9009\u62E9 " + rule.maxLength + " \u9879\u3002" : "\u6700\u591A\u8F93\u5165 " + rule.maxLength + " \u4E2A\u5B57\u7B26\u3002";
+        if (typeof value === "number" && (Number.isNaN(value) || rule.min !== void 0 && value < rule.min || rule.max !== void 0 && value > rule.max))
+          error = "\u8BF7\u8F93\u5165\u6709\u6548\u8303\u56F4\u5185\u7684\u6570\u503C\u3002";
+        if (!error && rule.pattern) {
+          rule.pattern.lastIndex = 0;
+          if (!rule.pattern.test(String(value))) error = "\u683C\u5F0F\u4E0D\u6B63\u786E\u3002";
+        }
+      }
+      try {
+        if (!error && rule?.validate) {
+          setValidating((old) => [.../* @__PURE__ */ new Set([...old, String(name)])]);
+          error = await rule.validate(value, snapshot, controller.signal);
+        }
+      } catch {
+        if (!controller.signal.aborted) error = "\u6821\u9A8C\u672A\u5B8C\u6210\uFF0C\u8BF7\u91CD\u8BD5\u3002";
+      }
+      const valid = mounted.current && !controller.signal.aborted && revision === version.current && controllers.current.get(name) === controller;
+      if (valid) {
+        setErrors((old) => {
+          const next = { ...old };
+          if (error) next[name] = error;
+          else delete next[name];
+          return next;
+        });
+        controllers.current.delete(name);
+        setValidating((old) => old.filter((key) => key !== String(name)));
+      }
+      return valid ? error : void 0;
+    },
+    []
+  );
+  const setValue = useCallback(
+    (name, value) => {
+      if (locked.current) return;
+      version.current++;
+      abort();
+      setValidating([]);
+      const next = { ...current.current, [name]: value };
+      current.current = next;
+      setValues(next);
+      setSubmitError("");
+      const names = Object.keys(next);
+      for (const key of names)
+        if (mode === "change" || attempted.current || mode === "blur" && touchedRef.current[key] || errorsRef.current[key])
+          void validateField(key, next);
+    },
+    [abort, mode, validateField]
+  );
+  const touch = useCallback(
+    (name) => {
+      if (locked.current) return;
+      touchedRef.current = { ...touchedRef.current, [name]: true };
+      setTouched(touchedRef.current);
+      if (mode !== "submit" || attempted.current || errorsRef.current[name])
+        void validateField(name);
+    },
+    [mode, validateField]
+  );
+  const focusField = useCallback(
+    (name) => {
+      const node = document.getElementById(id + "-" + String(name));
+      const target = node instanceof HTMLFieldSetElement ? node.querySelector(
+        "input:not(:disabled),button:not(:disabled),[tabindex='0']"
+      ) : node;
+      target?.focus({ preventScroll: true });
+      target?.scrollIntoView({ block: "nearest", behavior: "instant" });
+    },
+    [id]
+  );
+  const validate = useCallback(async () => {
+    const snapshot = current.current, revision = version.current, names = Object.keys(snapshot);
+    const result = await Promise.all(
+      names.map((name) => validateField(name, snapshot))
+    );
+    const first = result.findIndex(Boolean);
+    return {
+      valid: revision === version.current && first < 0,
+      first: first < 0 ? void 0 : names[first]
+    };
+  }, [validateField]);
+  const reset = useCallback(
+    (next) => {
+      version.current++;
+      abort();
+      locked.current = false;
+      attempted.current = false;
+      if (next) defaults.current = structuredClone(next);
+      current.current = structuredClone(defaults.current);
+      touchedRef.current = {};
+      setValues(current.current);
+      setErrors({});
+      errorsRef.current = {};
+      setTouched({});
+      setValidating([]);
+      setSubmitting(false);
+      setSubmitError("");
+    },
+    [abort]
+  );
+  const handleSubmit = (onSubmit) => async (event) => {
+    event?.preventDefault();
+    if (locked.current) return;
+    locked.current = true;
+    attempted.current = true;
+    setSubmitting(true);
+    setSubmitError("");
+    const revision = version.current;
+    try {
+      const result = await validate();
+      if (!result.valid) {
+        if (result.first)
+          requestAnimationFrame(() => focusField(result.first));
+        return;
+      }
+      if (revision !== version.current) return;
+      await onSubmit(structuredClone(current.current));
+    } catch (error) {
+      if (mounted.current && revision === version.current)
+        setSubmitError(
+          error instanceof Error ? error.message : "\u63D0\u4EA4\u672A\u5B8C\u6210\uFF0C\u8BF7\u91CD\u8BD5\u3002"
+        );
+    } finally {
+      if (mounted.current && revision === version.current) {
+        locked.current = false;
+        setSubmitting(false);
+      }
+    }
+  };
+  const field = (name) => ({
+    id: id + "-" + String(name),
+    name: String(name),
+    required: !!(rules?.[name]?.required || rules?.[name]?.mustBeTrue),
+    disabled: rules?.[name]?.disabled,
+    error: errors[name],
+    onBlur: () => touch(name)
+  });
+  const setFieldError = (name, error) => setErrors((old) => {
+    const next = { ...old };
+    if (error) next[name] = error;
+    else delete next[name];
+    return next;
+  });
+  return {
+    values,
+    errors,
+    touched,
+    isSubmitting,
+    isValidating: validating.length > 0,
+    validating,
+    submitError,
+    isDirty: JSON.stringify(values) !== JSON.stringify(defaults.current),
+    field,
+    setValue,
+    touch,
+    validate,
+    focusField,
+    reset,
+    handleSubmit,
+    setFieldError,
+    labels: Object.fromEntries(
+      Object.keys(values).map((name) => [name, rules?.[name]?.label || name])
+    )
+  };
+}
+export {
+  useFormState
+};

package/components/useHierarchy.d.ts

@@ -0,0 +1,8 @@
+import { type HierarchyOption, type HierarchyLoader } from "./hierarchy";
+export declare function useHierarchy(options: HierarchyOption[], loader?: HierarchyLoader): {
+    entries: Map<string, import("./hierarchy").HierarchyEntry>;
+    children: (node: HierarchyOption) => HierarchyOption[] | undefined;
+    load: (node: HierarchyOption) => Promise<boolean>;
+    loading: Set<string>;
+    error: (node: HierarchyOption) => string | undefined;
+};

package/components/useHierarchy.js

@@ -0,0 +1,80 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  indexHierarchy
+} from "./hierarchy.js";
+function useHierarchy(options, loader) {
+  const [cache, setCache] = useState(/* @__PURE__ */ new Map()), [loading, setLoading] = useState(/* @__PURE__ */ new Set()), [errors, setErrors] = useState(
+    /* @__PURE__ */ new Map()
+  );
+  const requests = useRef(
+    /* @__PURE__ */ new Map()
+  ), alive = useRef(true);
+  const children = (node) => node.children ?? (cache.get(node.value)?.source === node ? cache.get(node.value).children : void 0);
+  const entries = useMemo(
+    () => indexHierarchy(options, children, !!loader),
+    [options, cache, !!loader]
+  );
+  const current = useRef(entries);
+  current.current = entries;
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+      requests.current.forEach((request) => request.controller.abort());
+      requests.current.clear();
+    };
+  }, []);
+  const load = (node) => {
+    if (children(node) !== void 0 || !loader || node.isLeaf !== false)
+      return Promise.resolve(true);
+    const existing = requests.current.get(node.value);
+    if (existing?.source === node) return existing.promise;
+    existing?.controller.abort();
+    const controller = new AbortController();
+    setLoading((old) => new Set(old).add(node.value));
+    setErrors((old) => {
+      const next = new Map(old);
+      next.delete(node.value);
+      return next;
+    });
+    const promise = Promise.resolve().then(() => loader(node, controller.signal)).then((result) => {
+      if (!Array.isArray(result)) throw new Error("\u52A0\u8F7D\u7ED3\u679C\u65E0\u6548");
+      if (controller.signal.aborted || !alive.current || current.current.get(node.value)?.node !== node)
+        return false;
+      setCache(
+        (old) => new Map(old).set(node.value, { source: node, children: result })
+      );
+      return true;
+    }).catch((error) => {
+      if (!controller.signal.aborted && alive.current && current.current.get(node.value)?.node === node)
+        setErrors(
+          (old) => new Map(old).set(node.value, {
+            source: node,
+            message: error instanceof Error ? error.message : "\u52A0\u8F7D\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5"
+          })
+        );
+      return false;
+    }).finally(() => {
+      if (requests.current.get(node.value)?.controller !== controller) return;
+      requests.current.delete(node.value);
+      if (alive.current)
+        setLoading((old) => {
+          const next = new Set(old);
+          next.delete(node.value);
+          return next;
+        });
+    });
+    requests.current.set(node.value, { controller, source: node, promise });
+    return promise;
+  };
+  return {
+    entries,
+    children,
+    load,
+    loading,
+    error: (node) => errors.get(node.value)?.source === node ? errors.get(node.value)?.message : void 0
+  };
+}
+export {
+  useHierarchy
+};

package/components/useMenuLayers.d.ts

@@ -0,0 +1,17 @@
+import type { ContextMenuItem } from "./menuTypes";
+export type MenuLayer = {
+    key: string;
+    level: number;
+    items: ContextMenuItem[];
+    anchor?: HTMLElement;
+    point: {
+        x: number;
+        y: number;
+    };
+    activeId?: string;
+    open: boolean;
+};
+export declare function useMenuLayers(desired: Omit<MenuLayer, "open">[]): {
+    layers: MenuLayer[];
+    exited: (key: string) => void;
+};

package/components/useMenuLayers.js

@@ -0,0 +1,23 @@
+import { useCallback, useLayoutEffect, useState } from "react";
+function useMenuLayers(desired) {
+  const [layers, setLayers] = useState([]);
+  useLayoutEffect(() => {
+    setLayers((previous) => {
+      const keys = new Set(desired.map((layer) => layer.key));
+      return [
+        ...desired.map((layer) => ({ ...layer, open: true })),
+        ...previous.filter((layer) => !keys.has(layer.key)).map((layer) => ({ ...layer, open: false }))
+      ];
+    });
+  }, [desired]);
+  const exited = useCallback(
+    (key) => setLayers(
+      (previous) => previous.filter((layer) => layer.key !== key || layer.open)
+    ),
+    []
+  );
+  return { layers, exited };
+}
+export {
+  useMenuLayers
+};

package/components/useModalScrollLock.d.ts

@@ -0,0 +1 @@
+export declare function useModalScrollLock(active: boolean): void;

package/components/useModalScrollLock.js

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+let locks = 0;
+let previous = "";
+function useModalScrollLock(active) {
+  useEffect(() => {
+    if (!active) return;
+    if (locks++ === 0) {
+      previous = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      if (--locks === 0) document.body.style.overflow = previous;
+    };
+  }, [active]);
+}
+export {
+  useModalScrollLock
+};

package/components/usePopover.d.ts

@@ -0,0 +1,8 @@
+export declare function usePopover<T extends HTMLElement = HTMLButtonElement>(blocked?: boolean): {
+    anchor: import("react").RefObject<T | null>;
+    open: boolean;
+    close: () => void;
+    closeAndFocus: () => void;
+    show: () => void;
+    toggle: () => void;
+};

package/components/usePopover.js

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+function usePopover(blocked = false) {
+  const anchor = useRef(null), [open, setOpen] = useState(false);
+  const close = useCallback(() => setOpen(false), []);
+  const closeAndFocus = useCallback(() => {
+    close();
+    anchor.current?.focus({ preventScroll: true });
+  }, [close]);
+  const show = useCallback(() => {
+    if (!blocked) setOpen(true);
+  }, [blocked]);
+  const toggle = useCallback(() => {
+    if (!blocked) setOpen((value) => !value);
+  }, [blocked]);
+  useEffect(() => {
+    if (blocked) close();
+  }, [blocked, close]);
+  return { anchor, open: open && !blocked, close, closeAndFocus, show, toggle };
+}
+export {
+  usePopover
+};

package/components/useTabIndicator.d.ts

@@ -0,0 +1,12 @@
+import { type KeyboardEvent } from "react";
+export type TabOption<T extends string> = {
+    value: T;
+    label: React.ReactNode;
+    disabled?: boolean;
+    id?: string;
+    panelId?: string;
+};
+export declare function useTabIndicator<T extends string>(value: T, options: TabOption<T>[], onChange: (value: T) => void, orientation: "horizontal" | "vertical"): {
+    root: import("react").RefObject<HTMLDivElement | null>;
+    onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+};

package/components/useTabIndicator.js

@@ -0,0 +1,63 @@
+import { useLayoutEffect, useRef } from "react";
+function useTabIndicator(value, options, onChange, orientation) {
+  const root = useRef(null);
+  useLayoutEffect(() => {
+    const node = root.current;
+    const measure = () => {
+      const current = [
+        ...node.querySelectorAll('[role="tab"]')
+      ].find((el) => el.dataset.value === value);
+      if (!current) {
+        node.style.setProperty("--tab-opacity", "0");
+        return;
+      }
+      if (orientation === "vertical") {
+        const viewport = node.parentElement;
+        if (current.offsetTop < viewport.scrollTop)
+          viewport.scrollTop = current.offsetTop;
+        else if (current.offsetTop + current.offsetHeight > viewport.scrollTop + viewport.clientHeight)
+          viewport.scrollTop = current.offsetTop + current.offsetHeight - viewport.clientHeight;
+      }
+      if (orientation === "horizontal") {
+        const viewport = node.parentElement;
+        if (current.offsetLeft < viewport.scrollLeft)
+          viewport.scrollLeft = current.offsetLeft;
+        else if (current.offsetLeft + current.offsetWidth > viewport.scrollLeft + viewport.clientWidth)
+          viewport.scrollLeft = current.offsetLeft + current.offsetWidth - viewport.clientWidth;
+      }
+      node.style.setProperty("--tab-opacity", "1");
+      node.style.setProperty("--tab-x", current.offsetLeft + "px");
+      node.style.setProperty("--tab-y", current.offsetTop + "px");
+      node.style.setProperty("--tab-width", current.offsetWidth + "px");
+      node.style.setProperty("--tab-height", current.offsetHeight + "px");
+      if (!node.dataset.ready) {
+        node.getBoundingClientRect();
+        node.dataset.ready = "true";
+      }
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    node.querySelectorAll('[role="tab"]').forEach((el) => observer.observe(el));
+    return () => observer.disconnect();
+  }, [value, options, orientation]);
+  const onKeyDown = (event) => {
+    const enabled = options.filter((x) => !x.disabled), index = enabled.findIndex((x) => x.value === value);
+    let next = index;
+    if (event.key === (orientation === "vertical" ? "ArrowDown" : "ArrowRight"))
+      next = (index + 1) % enabled.length;
+    else if (event.key === (orientation === "vertical" ? "ArrowUp" : "ArrowLeft"))
+      next = (index - 1 + enabled.length) % enabled.length;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = enabled.length - 1;
+    else return;
+    if (!enabled[next]) return;
+    event.preventDefault();
+    onChange(enabled[next].value);
+    [...root.current.querySelectorAll('[role="tab"]')].find((el) => el.dataset.value === enabled[next].value)?.focus();
+  };
+  return { root, onKeyDown };
+}
+export {
+  useTabIndicator
+};

package/components/useUploadQueue.d.ts

@@ -0,0 +1,20 @@
+import type { UploadFile, UploadRequest, UploadResult } from "./uploadTypes";
+export declare function useUploadQueue({ value, defaultValue, onChange, request, autoUpload, concurrency, disabled, onSuccess, onError, }: {
+    value?: UploadFile[];
+    defaultValue?: UploadFile[];
+    onChange?(files: UploadFile[]): void;
+    request?: UploadRequest;
+    autoUpload?: boolean;
+    concurrency?: number;
+    disabled?: boolean;
+    onSuccess?(file: UploadFile, result: UploadResult | void): void;
+    onError?(file: UploadFile, error: unknown): void;
+}): {
+    files: UploadFile[];
+    current: import("react").RefObject<UploadFile[]>;
+    add: (batch: File[]) => void;
+    start: (id: string) => void;
+    cancel: (id: string) => void;
+    remove: (id: string) => void;
+    retry: (id: string) => void;
+};