@realiizlabs/admin 0.11.0 → 0.11.2

package/dist/forms-ui/index.d.cts

@@ -189,6 +189,22 @@ interface ImageInputProps {
 }
 declare function ImageInput(p: ImageInputProps): react.JSX.Element;
 
+interface SelectInputProps {
+    id: string;
+    name: string;
+    value: string;
+    options: string[];
+    /** Optional display names, keyed by value. */
+    labels?: Record<string, string>;
+    /** Adds a "—" choice at the top that sets the value to "". */
+    allowEmpty?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    onChange: (v: string) => void;
+    onBlur?: () => void;
+}
+declare function SelectInput(p: SelectInputProps): react.JSX.Element;
+
 /**
  * ChipsInput — tags as chips. Enter or comma adds, × or Backspace-on-empty
  * removes. The value is a string[]; the schema's length/regex rules still run
@@ -206,4 +222,4 @@ declare function ChipsInput({ id, name, value, onChange, onBlur, placeholder, in
     max?: number;
 }): react.JSX.Element;
 
-export { ChipsInput, ContentForm, type ContentFormProps, type ContentFormSubmission, IMAGE_HINT, ImageInput, type ImageInputProps, type LabelRenderer, LengthGauge, MarkdownEditor, type MarkdownEditorProps, type PickImage, type PickResult, type PickedImage, type SubmittedImages, TOOLS, slugify };
+export { ChipsInput, ContentForm, type ContentFormProps, type ContentFormSubmission, IMAGE_HINT, ImageInput, type ImageInputProps, type LabelRenderer, LengthGauge, MarkdownEditor, type MarkdownEditorProps, type PickImage, type PickResult, type PickedImage, SelectInput, type SelectInputProps, type SubmittedImages, TOOLS, slugify };

package/dist/forms-ui/index.d.ts

@@ -189,6 +189,22 @@ interface ImageInputProps {
 }
 declare function ImageInput(p: ImageInputProps): react.JSX.Element;
 
+interface SelectInputProps {
+    id: string;
+    name: string;
+    value: string;
+    options: string[];
+    /** Optional display names, keyed by value. */
+    labels?: Record<string, string>;
+    /** Adds a "—" choice at the top that sets the value to "". */
+    allowEmpty?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    onChange: (v: string) => void;
+    onBlur?: () => void;
+}
+declare function SelectInput(p: SelectInputProps): react.JSX.Element;
+
 /**
  * ChipsInput — tags as chips. Enter or comma adds, × or Backspace-on-empty
  * removes. The value is a string[]; the schema's length/regex rules still run
@@ -206,4 +222,4 @@ declare function ChipsInput({ id, name, value, onChange, onBlur, placeholder, in
     max?: number;
 }): react.JSX.Element;
 
-export { ChipsInput, ContentForm, type ContentFormProps, type ContentFormSubmission, IMAGE_HINT, ImageInput, type ImageInputProps, type LabelRenderer, LengthGauge, MarkdownEditor, type MarkdownEditorProps, type PickImage, type PickResult, type PickedImage, type SubmittedImages, TOOLS, slugify };
+export { ChipsInput, ContentForm, type ContentFormProps, type ContentFormSubmission, IMAGE_HINT, ImageInput, type ImageInputProps, type LabelRenderer, LengthGauge, MarkdownEditor, type MarkdownEditorProps, type PickImage, type PickResult, type PickedImage, SelectInput, type SelectInputProps, type SubmittedImages, TOOLS, slugify };

package/dist/forms-ui/index.js

@@ -1,7 +1,7 @@
 "use client";
-import { walkSchema } from '../chunk-JLR5K6RP.js';
-import { FORM_CSS } from '../chunk-FTD4WE3V.js';
-import { useState, useRef, useCallback, useEffect, useId, useMemo } from 'react';
+import { walkSchema, titlecase } from '../chunk-JLR5K6RP.js';
+import { FORM_CSS } from '../chunk-2GSYBARR.js';
+import { useState, useRef, useId, useEffect, useCallback, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function ChipsInput({ id, name, value, onChange, onBlur, placeholder, invalid, max }) {
@@ -48,6 +48,128 @@ function ChipsInput({ id, name, value, onChange, onBlur, placeholder, invalid, m
     ] })
   ] });
 }
+function labelFor(value, labels) {
+  if (labels?.[value]) return labels[value];
+  return value ? titlecase(value) : "\u2014";
+}
+function SelectInput(p) {
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(0);
+  const wrap = useRef(null);
+  const list = useRef(null);
+  const listId = useId();
+  const choices = p.allowEmpty ? ["", ...p.options] : p.options;
+  const latest = useRef({ choices, value: p.value });
+  latest.current = { choices, value: p.value };
+  useEffect(() => {
+    if (!open) return;
+    setActive(Math.max(0, latest.current.choices.indexOf(latest.current.value)));
+    const onDoc = (e) => {
+      if (!wrap.current?.contains(e.target)) close();
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    list.current?.querySelectorAll("[role=option]")[active]?.scrollIntoView?.({ block: "nearest" });
+  }, [open, active]);
+  const close = () => {
+    setOpen(false);
+    p.onBlur?.();
+  };
+  const pick = (v) => {
+    if (v !== p.value) p.onChange(v);
+    close();
+  };
+  const onKey = (e) => {
+    if (!open) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        setOpen(true);
+      }
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActive((i) => Math.min(choices.length - 1, i + 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActive((i) => Math.max(0, i - 1));
+        break;
+      case "Home":
+        e.preventDefault();
+        setActive(0);
+        break;
+      case "End":
+        e.preventDefault();
+        setActive(choices.length - 1);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        pick(choices[active] ?? "");
+        break;
+      case "Escape":
+        e.preventDefault();
+        close();
+        break;
+      case "Tab":
+        close();
+        break;
+      default: {
+        if (e.key.length === 1 && /\S/.test(e.key)) {
+          const k = e.key.toLowerCase();
+          const idx = choices.findIndex((c) => labelFor(c, p.labels).toLowerCase().startsWith(k));
+          if (idx >= 0) setActive(idx);
+        }
+      }
+    }
+  };
+  const cls = ["realiiz-form__control", "realiiz-select__btn", p.invalid && "realiiz-form__control--invalid", open && "realiiz-select__btn--open"].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { ref: wrap, className: "realiiz-select", onKeyDown: onKey, children: [
+    /* @__PURE__ */ jsx("input", { type: "hidden", name: p.name, value: p.value, readOnly: true }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        id: p.id,
+        className: cls,
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": listId,
+        "aria-invalid": p.invalid || void 0,
+        "aria-describedby": p.invalid ? `${p.id}-error` : void 0,
+        disabled: p.disabled,
+        onClick: () => open ? close() : setOpen(true),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: p.value ? void 0 : "realiiz-select__placeholder", children: labelFor(p.value, p.labels) }),
+          /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" }) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("ul", { ref: list, id: listId, className: "realiiz-select__menu", role: "listbox", "aria-labelledby": p.id, tabIndex: -1, children: choices.map((c, i) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        role: "option",
+        "aria-selected": c === p.value,
+        "data-value": c,
+        className: ["realiiz-select__item", i === active && "realiiz-select__item--active", c === p.value && "realiiz-select__item--selected"].filter(Boolean).join(" "),
+        onMouseEnter: () => setActive(i),
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => pick(c),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "realiiz-select__check", "aria-hidden": "true", children: c === p.value ? "\u2713" : "" }),
+          /* @__PURE__ */ jsx("span", { children: labelFor(c, p.labels) })
+        ]
+      },
+      c || "__empty"
+    )) })
+  ] });
+}
 function Control(p) {
   const cls = ["realiiz-form__control", p.invalid && "realiiz-form__control--invalid"].filter(Boolean).join(" ");
   const common = {
@@ -62,10 +184,19 @@ function Control(p) {
     return /* @__PURE__ */ jsx("div", { className: cls, "aria-busy": "true", style: { color: "var(--_muted)" }, children: "Loading options\u2026" });
   }
   if (p.options || p.spec.input === "select") {
-    return /* @__PURE__ */ jsxs("select", { ...common, className: cls, value: str, onChange: (e) => p.onChange(e.target.value), children: [
-      !p.spec.required && /* @__PURE__ */ jsx("option", { value: "", children: "\u2014" }),
-      (p.options ?? []).map((o) => /* @__PURE__ */ jsx("option", { value: o, children: o }, o))
-    ] });
+    return /* @__PURE__ */ jsx(
+      SelectInput,
+      {
+        id: p.id,
+        name: p.spec.name,
+        value: str,
+        options: p.options ?? [],
+        allowEmpty: !p.spec.required,
+        invalid: p.invalid,
+        onChange: p.onChange,
+        onBlur: p.onBlur
+      }
+    );
   }
   switch (p.spec.input) {
     case "textarea":
@@ -1173,6 +1304,6 @@ function sameValue(a, b) {
   return a === b;
 }
 
-export { ChipsInput, ContentForm, IMAGE_HINT, ImageInput, LengthGauge, MarkdownEditor, TOOLS, slugify };
+export { ChipsInput, ContentForm, IMAGE_HINT, ImageInput, LengthGauge, MarkdownEditor, SelectInput, TOOLS, slugify };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map