@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/TreeSelect.js

@@ -0,0 +1,309 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useRef, useState } from "react";
+import { ChevronDown, Minus } from "lucide-react";
+import { SelectTrigger } from "./SelectTrigger.js";
+import { Popover } from "./Popover.js";
+import { MenuItem } from "./MenuItem.js";
+import { SearchField } from "./SearchField.js";
+import { Spinner } from "./Spinner.js";
+import { Button } from "./Button.js";
+import { usePopover } from "./usePopover.js";
+import { fieldTriggerProps, useFieldControl } from "./field.js";
+import { useHierarchy } from "./useHierarchy.js";
+import {
+  hierarchyMatches
+} from "./hierarchy.js";
+import s from "./HierarchyPicker.module.css";
+function TreeSelect(props) {
+  const {
+    options,
+    label,
+    searchable = true,
+    clearable = true,
+    placeholder = "\u8BF7\u9009\u62E9",
+    loadChildren,
+    defaultExpanded = []
+  } = props;
+  const field = useFieldControl(props), pop = usePopover(field.disabled || field.readOnly), id = useId(), list = useRef(null), [query, setQuery] = useState(""), [expanded, setExpanded] = useState(new Set(defaultExpanded)), [focused, setFocused] = useState("");
+  const data = useHierarchy(options, loadChildren), selected = props.multiple ? props.value : props.value ? [props.value] : [];
+  const rows = useMemo(() => {
+    const matches = query.trim() ? new Set(
+      [...data.entries.values()].filter((entry) => hierarchyMatches(entry, query)).flatMap((entry) => entry.path.map((node) => node.value))
+    ) : null;
+    return [...data.entries.values()].filter(
+      (entry) => (!matches || matches.has(entry.node.value)) && (query.trim() || entry.path.slice(0, -1).every((node) => expanded.has(node.value)))
+    );
+  }, [data.entries, query, expanded]);
+  const close = pop.closeAndFocus;
+  const show = () => {
+    if (field.disabled || field.readOnly) return;
+    if (pop.open) {
+      pop.close();
+      return;
+    }
+    setQuery("");
+    setExpanded(
+      (old) => /* @__PURE__ */ new Set([
+        ...old,
+        ...selected.flatMap(
+          (value) => data.entries.get(value)?.path.slice(0, -1).map((n) => n.value) || []
+        )
+      ])
+    );
+    pop.show();
+  };
+  const focus = (value) => {
+    setFocused(value);
+    list.current?.querySelectorAll('[role="treeitem"]').forEach((n) => {
+      if (n.dataset.value === value) n.focus({ preventScroll: true });
+    });
+  };
+  const toggleExpand = (entry) => {
+    if (entry.disabled || !entry.branch) return;
+    setExpanded((old) => {
+      const next = new Set(old);
+      next.has(entry.node.value) ? next.delete(entry.node.value) : next.add(entry.node.value);
+      return next;
+    });
+    if (!expanded.has(entry.node.value)) void data.load(entry.node);
+  };
+  const selectedSet = new Set(selected);
+  const leafMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const entry of data.entries.values())
+      if (!entry.disabled && !entry.branch && entry.node.selectable !== false)
+        for (const node of entry.path) {
+          const values = map.get(node.value) || [];
+          values.push(entry.node.value);
+          map.set(node.value, values);
+        }
+    return map;
+  }, [data.entries]);
+  const selection = (entry) => {
+    if (!props.multiple) return selectedSet.has(entry.node.value);
+    if (entry.disabled) return selectedSet.has(entry.node.value);
+    if (props.checkStrictly) return selectedSet.has(entry.node.value);
+    const leaves = leafMap.get(entry.node.value) || [], count = leaves.filter((value) => selectedSet.has(value)).length;
+    return count && count < leaves.length ? "mixed" : !!leaves.length && count === leaves.length;
+  };
+  const choose = (entry) => {
+    if (field.disabled || field.readOnly || entry.disabled) return;
+    if (entry.node.selectable === false || props.multiple && !props.checkStrictly && entry.branch && data.children(entry.node) === void 0) {
+      toggleExpand(entry);
+      return;
+    }
+    if (!props.multiple) {
+      props.onChange(entry.node.value);
+      close();
+      return;
+    }
+    const targets = props.checkStrictly ? [entry.node.value] : leafMap.get(entry.node.value) || [];
+    if (!targets.length) return;
+    const remove = targets.every((value) => selectedSet.has(value));
+    props.onChange(
+      remove ? selected.filter((value) => !targets.includes(value)) : [.../* @__PURE__ */ new Set([...selected, ...targets])]
+    );
+  };
+  const first = rows.find((entry) => !entry.disabled)?.node.value;
+  const active = rows.some(
+    (entry) => entry.node.value === focused && !entry.disabled
+  ) ? focused : first;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        ...fieldTriggerProps(field),
+        ref: pop.anchor,
+        expanded: pop.open,
+        className: s.trigger,
+        "aria-haspopup": "dialog",
+        "aria-controls": id,
+        onClick: show,
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" && !pop.open) {
+            event.preventDefault();
+            show();
+          }
+        },
+        children: selected.length ? props.multiple ? `\u5DF2\u9009\u62E9 ${selected.length} \u9879` : data.entries.get(selected[0])?.path.map((n) => n.label).join(" / ") || selected[0] : placeholder
+      }
+    ),
+    field.name && (props.multiple ? selected.map((value) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        name: field.name,
+        value,
+        disabled: field.disabled
+      },
+      value
+    )) : /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        name: field.name,
+        value: props.value,
+        disabled: field.disabled
+      }
+    )),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        anchor: pop.anchor,
+        open: pop.open,
+        onClose: pop.close,
+        label,
+        id,
+        width: 340,
+        children: [
+          searchable && /* @__PURE__ */ jsx("div", { className: s.search, children: /* @__PURE__ */ jsx(
+            SearchField,
+            {
+              label: `\u641C\u7D22${label}`,
+              placeholder: "\u641C\u7D22\u540D\u79F0\u6216\u8DEF\u5F84",
+              value: query,
+              onChange: setQuery,
+              onKeyDown: (event) => {
+                if (event.key === "ArrowDown") {
+                  event.preventDefault();
+                  if (first) focus(first);
+                }
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: list,
+              role: "tree",
+              "aria-label": `${label}\u9009\u9879`,
+              "aria-multiselectable": props.multiple || void 0,
+              className: s.tree,
+              onKeyDown: (event) => {
+                if (event.target instanceof HTMLButtonElement) return;
+                const available = rows.filter((entry2) => !entry2.disabled), current = available.findIndex(
+                  (entry2) => entry2.node.value === focused
+                ), entry = available[current];
+                let next;
+                if (event.key === "ArrowDown")
+                  next = available[Math.min(available.length - 1, current + 1)];
+                else if (event.key === "ArrowUp")
+                  next = available[Math.max(0, current - 1)];
+                else if (event.key === "Home") next = available[0];
+                else if (event.key === "End") next = available.at(-1);
+                else if (entry && event.key === "ArrowRight") {
+                  if (entry.branch && !expanded.has(entry.node.value))
+                    toggleExpand(entry);
+                  else
+                    next = available.find(
+                      (item) => item.parent === entry.node.value
+                    );
+                } else if (entry && event.key === "ArrowLeft") {
+                  if (expanded.has(entry.node.value)) toggleExpand(entry);
+                  else
+                    next = available.find(
+                      (item) => item.node.value === entry.parent
+                    );
+                } else if (entry && (event.key === "Enter" || event.key === " "))
+                  choose(entry);
+                else return;
+                event.preventDefault();
+                event.stopPropagation();
+                if (next) focus(next.node.value);
+              },
+              children: [
+                !rows.length && /* @__PURE__ */ jsx("div", { role: "status", className: s.empty, children: "\u6CA1\u6709\u5339\u914D\u9009\u9879" }),
+                rows.map((entry) => {
+                  const state = selection(entry), isExpanded = !!query.trim() || expanded.has(entry.node.value), error = data.error(entry.node);
+                  return /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      MenuItem,
+                      {
+                        as: "div",
+                        role: "treeitem",
+                        "aria-label": entry.node.label,
+                        "aria-level": entry.path.length,
+                        "aria-expanded": entry.branch ? isExpanded : void 0,
+                        "aria-checked": props.multiple ? state : void 0,
+                        "aria-selected": !props.multiple && !!state,
+                        "aria-disabled": entry.disabled || void 0,
+                        tabIndex: entry.node.value === active ? 0 : -1,
+                        "data-value": entry.node.value,
+                        className: `${s.row} ${s.treeRow}`,
+                        style: { "--level": entry.path.length - 1 },
+                        label: entry.node.label,
+                        description: query.trim() ? entry.path.slice(0, -1).map((n) => n.label).join(" / ") : void 0,
+                        icon: entry.node.icon,
+                        selected: state === true,
+                        selection: props.multiple ? "checkbox" : "check",
+                        disabled: entry.disabled,
+                        trailing: state === "mixed" ? /* @__PURE__ */ jsx("span", { className: s.mixed, children: /* @__PURE__ */ jsx(Minus, {}) }) : void 0,
+                        onFocus: () => setFocused(entry.node.value),
+                        onClick: () => {
+                          if (entry.disabled) return;
+                          focus(entry.node.value);
+                          choose(entry);
+                        },
+                        prefix: entry.branch ? /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            tabIndex: -1,
+                            className: s.expander,
+                            "data-expanded": isExpanded,
+                            "aria-label": `${isExpanded ? "\u6298\u53E0" : "\u5C55\u5F00"} ${entry.node.label}`,
+                            disabled: entry.disabled || data.loading.has(entry.node.value),
+                            onClick: (event) => {
+                              event.stopPropagation();
+                              focus(entry.node.value);
+                              toggleExpand(entry);
+                            },
+                            children: data.loading.has(entry.node.value) ? /* @__PURE__ */ jsx(Spinner, { size: 12, decorative: true }) : /* @__PURE__ */ jsx(ChevronDown, {})
+                          }
+                        ) : /* @__PURE__ */ jsx("span", { className: s.spacer })
+                      }
+                    ),
+                    isExpanded && error && /* @__PURE__ */ jsxs("div", { role: "alert", className: s.error, children: [
+                      /* @__PURE__ */ jsx("span", { children: error }),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          size: "small",
+                          variant: "ghost",
+                          onClick: () => void data.load(entry.node),
+                          children: "\u91CD\u8BD5"
+                        }
+                      )
+                    ] })
+                  ] }, entry.node.value);
+                })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: s.footer, children: [
+            /* @__PURE__ */ jsx("span", { children: props.multiple ? `${selected.length} \u9879\u5DF2\u9009` : "" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              clearable && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "ghost",
+                  disabled: !selected.length,
+                  onClick: () => {
+                    if (props.multiple) props.onChange([]);
+                    else props.onChange("");
+                  },
+                  children: "\u6E05\u7A7A"
+                }
+              ),
+              props.multiple && /* @__PURE__ */ jsx(Button, { size: "small", onClick: close, children: "\u5B8C\u6210" })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  TreeSelect
+};

package/components/UIProvider.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+export type UIConfig = {
+    toastPosition: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+    tooltipPlacement: "top" | "bottom" | "left" | "right";
+    requiredIndicator: "asterisk" | "text" | "none";
+};
+export declare function UIProvider({ children, ...config }: Partial<UIConfig> & {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare const useUIConfig: () => UIConfig;

package/components/UIProvider.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const defaults = {
+  toastPosition: "bottom-right",
+  tooltipPlacement: "top",
+  requiredIndicator: "none"
+};
+const Context = createContext(defaults);
+function UIProvider({
+  children,
+  ...config
+}) {
+  const parent = useContext(Context);
+  return /* @__PURE__ */ jsx(Context, { value: { ...parent, ...config }, children });
+}
+const useUIConfig = () => useContext(Context);
+export {
+  UIProvider,
+  useUIConfig
+};

package/components/UnderlinedTab.d.ts

@@ -0,0 +1,2 @@
+import { type TabListProps } from "./TabList";
+export declare function UnderlinedTab<T extends string>(props: Omit<TabListProps<T>, "orientation">): import("react").JSX.Element;

package/components/UnderlinedTab.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { TabList } from "./TabList.js";
+function UnderlinedTab(props) {
+  return /* @__PURE__ */ jsx(TabList, { ...props, variant: "underlined" });
+}
+export {
+  UnderlinedTab
+};

package/components/Upload.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+import { type FieldOptions } from "./field";
+import { type FileConstraints, type FileRejection, type FileSelectionResult } from "./fileSelection";
+import type { UploadFile, UploadRequest, UploadResult } from "./uploadTypes";
+export type UploadProps = Omit<FieldOptions, "name"> & Omit<FileConstraints, "selectedCount"> & {
+    label: string;
+    value?: UploadFile[];
+    defaultValue?: UploadFile[];
+    onChange?(files: UploadFile[]): void;
+    request?: UploadRequest;
+    autoUpload?: boolean;
+    concurrency?: number;
+    draggable?: boolean;
+    showThumbnails?: boolean;
+    description?: ReactNode;
+    onReject?(rejections: FileRejection[]): void;
+    onValidation?(result: FileSelectionResult): void;
+    onSuccess?(file: UploadFile, result: UploadResult | void): void;
+    onError?(file: UploadFile, error: unknown): void;
+    onPreview?(file: UploadFile, source?: string): void;
+};
+export declare function Upload({ label, value, defaultValue, onChange, request, autoUpload, concurrency, draggable, showThumbnails, description, onReject, onValidation, onSuccess, onError, onPreview, accept, maxSize, maxFiles, multiple, ...options }: UploadProps): import("react").JSX.Element;

package/components/Upload.js

@@ -0,0 +1,165 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { FilePicker } from "./FilePicker.js";
+import { FileDropZone } from "./FileDropZone.js";
+import { FileSelectionFeedback } from "./FileSelectionFeedback.js";
+import { UploadList } from "./UploadList.js";
+import { Button } from "./Button.js";
+import { Dialog } from "./Dialog.js";
+import { useFieldControl } from "./field.js";
+import { useUploadQueue } from "./useUploadQueue.js";
+import {
+  validateFiles
+} from "./fileSelection.js";
+import s from "./Upload.module.css";
+function Upload({
+  label,
+  value,
+  defaultValue,
+  onChange,
+  request,
+  autoUpload = true,
+  concurrency = 3,
+  draggable = true,
+  showThumbnails = true,
+  description,
+  onReject,
+  onValidation,
+  onSuccess,
+  onError,
+  onPreview,
+  accept,
+  maxSize,
+  maxFiles,
+  multiple,
+  ...options
+}) {
+  const field = useFieldControl({ ...options, label }), blocked = field.disabled || field.readOnly, queue = useUploadQueue({
+    value,
+    defaultValue,
+    onChange,
+    request,
+    autoUpload,
+    concurrency,
+    disabled: blocked,
+    onSuccess,
+    onError
+  }), [rejected, setRejected] = useState([]), [preview, setPreview] = useState(), root = useRef(null);
+  const receive = (result) => {
+    if (blocked) return;
+    const checked = validateFiles(result.accepted, {
+      accept,
+      maxSize,
+      maxFiles,
+      multiple,
+      selectedCount: queue.current.current.length
+    }), combined = {
+      accepted: checked.accepted,
+      rejected: [...result.rejected, ...checked.rejected]
+    };
+    setRejected(combined.rejected);
+    onValidation?.(combined);
+    if (combined.rejected.length) onReject?.(combined.rejected);
+    if (checked.accepted.length) queue.add(checked.accepted);
+  };
+  const constraints = {
+    accept,
+    maxSize,
+    maxFiles,
+    multiple,
+    selectedCount: queue.files.length
+  }, picker = /* @__PURE__ */ jsx(
+    FilePicker,
+    {
+      ...constraints,
+      label: `\u9009\u62E9${label}`,
+      disabled: blocked,
+      showErrors: false,
+      onFiles: () => {
+      },
+      onValidation: receive
+    }
+  );
+  useEffect(() => {
+    if (!queue.files.length) setRejected((old) => old.length ? [] : old);
+    if (preview && !queue.files.some((file) => file.id === preview.id))
+      setPreview(void 0);
+  }, [queue.files, preview]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: field.id,
+      role: "group",
+      "aria-label": label,
+      "aria-invalid": field.invalid,
+      "aria-describedby": field.descriptionId,
+      className: s.upload,
+      ref: root,
+      tabIndex: -1,
+      onFocus: (event) => {
+        if (event.target === root.current)
+          root.current.querySelector("button:not(:disabled)")?.focus();
+      },
+      children: [
+        draggable ? /* @__PURE__ */ jsx(
+          FileDropZone,
+          {
+            ...constraints,
+            label: `${label}\u62D6\u62FD\u533A\u57DF`,
+            title: "\u6DFB\u52A0\u5230\u4E0A\u4F20\u5217\u8868",
+            disabled: blocked,
+            onFiles: () => {
+            },
+            onValidation: receive,
+            showErrors: false,
+            children: /* @__PURE__ */ jsxs("div", { className: s.drop, children: [
+              picker,
+              description && /* @__PURE__ */ jsx("div", { className: s.description, children: description })
+            ] })
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: s.row, children: [
+          picker,
+          description && /* @__PURE__ */ jsx("div", { className: s.description, children: description })
+        ] }),
+        /* @__PURE__ */ jsx(FileSelectionFeedback, { rejections: rejected }),
+        !autoUpload && request && queue.files.some((file) => file.status === "ready") && /* @__PURE__ */ jsx("div", { className: s.row, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            disabled: blocked,
+            onClick: () => queue.files.filter((file) => file.status === "ready").forEach((file) => queue.start(file.id)),
+            children: "\u5F00\u59CB\u5168\u90E8\u4E0A\u4F20"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          UploadList,
+          {
+            files: queue.files,
+            label: `${label}\u5217\u8868`,
+            disabled: blocked,
+            showThumbnails,
+            onStart: request ? queue.start : void 0,
+            onCancel: queue.cancel,
+            onRetry: request ? queue.retry : void 0,
+            onRemove: queue.remove,
+            onPreview: onPreview || ((file, source) => {
+              if (source) setPreview({ id: file.id, name: file.name, source });
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Dialog,
+          {
+            open: !!preview,
+            onClose: () => setPreview(void 0),
+            title: preview?.name || "\u6587\u4EF6\u9884\u89C8",
+            children: preview && /* @__PURE__ */ jsx("img", { className: s.preview, src: preview.source, alt: preview.name })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Upload
+};

package/components/Upload.module.css

@@ -0,0 +1,36 @@
+.upload {
+  min-width: 0;
+  outline: none;
+}
+.drop {
+  border: 1px dashed color-mix(in srgb, var(--fg) 20%, var(--surface));
+  border-radius: var(--radius);
+  background: var(--canvas);
+  min-height: 132px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 20px;
+}
+.description {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin: 8px 0;
+}
+.preview {
+  display: block;
+  max-width: 100%;
+  max-height: 65vh;
+  object-fit: contain;
+  margin: auto;
+}

package/components/UploadList.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import { type UploadItemActions } from "./UploadListItem";
+import type { UploadFile } from "./uploadTypes";
+export type UploadListProps = UploadItemActions & {
+    files: UploadFile[];
+    label?: string;
+    emptyText?: ReactNode;
+};
+export declare function UploadList({ files, label, emptyText, ...actions }: UploadListProps): import("react").JSX.Element;

package/components/UploadList.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { UploadListItem } from "./UploadListItem.js";
+import s from "./UploadList.module.css";
+function UploadList({
+  files,
+  label = "\u4E0A\u4F20\u6587\u4EF6\u5217\u8868",
+  emptyText = "\u5C1A\u672A\u6DFB\u52A0\u6587\u4EF6",
+  ...actions
+}) {
+  return /* @__PURE__ */ jsx("div", { className: s.root, children: files.length ? /* @__PURE__ */ jsx("ul", { className: s.list, "aria-label": label, children: files.map((file) => /* @__PURE__ */ jsx(UploadListItem, { file, ...actions }, file.id)) }) : /* @__PURE__ */ jsx("div", { role: "status", className: s.empty, children: emptyText }) });
+}
+export {
+  UploadList
+};