@axenstudio/axen-form 0.1.1

package/dist/fields/AutocompletePredictField/AutocompletePredictField.cjs

@@ -0,0 +1,289 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const AutocompleteField_module = require("../AutocompleteField/AutocompleteField.module.css.cjs");
+const fieldBase_module = require("../fieldBase.module.css.cjs");
+const fieldUtils = require("../fieldUtils.cjs");
+const DEBOUNCE_MS = 400;
+function AutocompletePredictField({
+  name,
+  value,
+  onChange: _onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  placeholder,
+  disabled,
+  readOnly,
+  required,
+  options: staticOptions,
+  fetchOptions,
+  optionLabel,
+  form
+}) {
+  const [inputText, setInputText] = react.useState("");
+  const [filteredOptions, setFilteredOptions] = react.useState([]);
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [activeIndex, setActiveIndex] = react.useState(-1);
+  const [loading, setLoading] = react.useState(false);
+  const [ghostText, setGhostText] = react.useState("");
+  const abortRef = react.useRef(null);
+  const debounceRef = react.useRef(void 0);
+  const wrapperRef = react.useRef(null);
+  const measureRef = react.useRef(null);
+  const getOptionLabel = react.useCallback(
+    (opt) => {
+      if (optionLabel) {
+        const val = opt[optionLabel];
+        return typeof val === "string" || typeof val === "number" ? String(val) : opt.label;
+      }
+      return opt.label;
+    },
+    [optionLabel]
+  );
+  react.useEffect(() => {
+    if (value != null && value !== "") {
+      const allOpts = staticOptions ?? filteredOptions;
+      const match = allOpts.find((o) => o.value === value);
+      if (match) {
+        setInputText(getOptionLabel(match));
+        setGhostText("");
+      }
+    } else {
+      setInputText("");
+    }
+  }, [value]);
+  const updateGhost = react.useCallback(
+    (query, opts) => {
+      if (!query || opts.length === 0) {
+        setGhostText("");
+        return;
+      }
+      const firstLabel = getOptionLabel(opts[0]);
+      if (firstLabel.toLowerCase().startsWith(query.toLowerCase())) {
+        setGhostText(query + firstLabel.slice(query.length));
+      } else {
+        setGhostText("");
+      }
+    },
+    [getOptionLabel]
+  );
+  const doSearch = react.useCallback(
+    (query) => {
+      var _a;
+      if (fetchOptions) {
+        (_a = abortRef.current) == null ? void 0 : _a.abort();
+        const controller = new AbortController();
+        abortRef.current = controller;
+        setLoading(true);
+        fetchOptions(query, controller.signal).then((results) => {
+          if (!controller.signal.aborted) {
+            setFilteredOptions(results);
+            updateGhost(query, results);
+            setLoading(false);
+          }
+        }).catch((err) => {
+          if (!controller.signal.aborted && err.name !== "AbortError") {
+            setFilteredOptions([]);
+            setGhostText("");
+            setLoading(false);
+          }
+        });
+      } else {
+        const q = query.toLowerCase();
+        const filtered = (staticOptions ?? []).filter(
+          (opt) => getOptionLabel(opt).toLowerCase().includes(q)
+        );
+        setFilteredOptions(filtered);
+        updateGhost(query, filtered);
+      }
+    },
+    [fetchOptions, staticOptions, getOptionLabel, updateGhost]
+  );
+  const handleInputChange = react.useCallback(
+    (e) => {
+      const query = e.target.value;
+      setInputText(query);
+      setIsOpen(true);
+      setActiveIndex(-1);
+      form.setFieldValue(name, "");
+      clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => doSearch(query), DEBOUNCE_MS);
+    },
+    [form, name, doSearch]
+  );
+  const selectOption = react.useCallback(
+    (opt) => {
+      form.setFieldValue(name, opt.value);
+      setInputText(getOptionLabel(opt));
+      setGhostText("");
+      setIsOpen(false);
+      setActiveIndex(-1);
+    },
+    [form, name, getOptionLabel]
+  );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Tab" && ghostText && ghostText !== inputText) {
+        e.preventDefault();
+        setInputText(ghostText);
+        const match = filteredOptions.find(
+          (o) => getOptionLabel(o).toLowerCase() === ghostText.toLowerCase()
+        );
+        if (match) {
+          form.setFieldValue(name, match.value);
+        }
+        setGhostText("");
+        setIsOpen(false);
+        return;
+      }
+      if (!isOpen) {
+        if (e.key === "ArrowDown") {
+          setIsOpen(true);
+          doSearch(inputText);
+        }
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setActiveIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setActiveIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (activeIndex >= 0 && filteredOptions[activeIndex]) {
+            selectOption(filteredOptions[activeIndex]);
+          }
+          break;
+        case "Escape":
+          setIsOpen(false);
+          setGhostText("");
+          setActiveIndex(-1);
+          break;
+      }
+    },
+    [
+      isOpen,
+      activeIndex,
+      filteredOptions,
+      inputText,
+      ghostText,
+      selectOption,
+      doSearch,
+      form,
+      name,
+      getOptionLabel
+    ]
+  );
+  const handleBlur = react.useCallback(
+    (e) => {
+      setTimeout(() => {
+        var _a;
+        if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
+          setIsOpen(false);
+          onBlur(e);
+        }
+      }, 150);
+    },
+    [onBlur]
+  );
+  react.useEffect(() => {
+    return () => {
+      var _a;
+      (_a = abortRef.current) == null ? void 0 : _a.abort();
+      clearTimeout(debounceRef.current);
+    };
+  }, []);
+  const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
+  const listboxId = `${name}-listbox`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, ref: wrapperRef, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        id: fieldUtils.labelId(name),
+        htmlFor: name,
+        className: fieldUtils.cx(fieldBase_module.default.label, required && fieldBase_module.default.labelRequired),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AutocompleteField_module.default.predictWrap, children: [
+      ghostText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: AutocompleteField_module.default.ghostText, "aria-hidden": "true", children: ghostText }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { ref: measureRef, className: AutocompleteField_module.default.ghostHidden, "aria-hidden": "true", children: inputText }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ...aria,
+          type: "text",
+          name,
+          value: inputText,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          onBlur: handleBlur,
+          onFocus: () => {
+            if (inputText) {
+              doSearch(inputText);
+            }
+            setIsOpen(true);
+          },
+          placeholder,
+          disabled,
+          readOnly,
+          role: "combobox",
+          "aria-expanded": isOpen,
+          "aria-controls": listboxId,
+          "aria-activedescendant": activeIndex >= 0 ? `${name}-opt-${activeIndex}` : void 0,
+          "aria-autocomplete": "both",
+          autoComplete: "off",
+          className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError),
+          style: { background: "transparent", position: "relative", zIndex: 1 }
+        }
+      ),
+      loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: AutocompleteField_module.default.spinner, "aria-hidden": "true" })
+    ] }),
+    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id: listboxId,
+        role: "listbox",
+        className: AutocompleteField_module.default.dropdown,
+        children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            id: `${name}-opt-${i}`,
+            role: "option",
+            tabIndex: -1,
+            "aria-selected": i === activeIndex,
+            "aria-disabled": opt.disabled,
+            className: fieldUtils.cx(
+              AutocompleteField_module.default.option,
+              i === activeIndex && AutocompleteField_module.default.optionActive,
+              opt.disabled && AutocompleteField_module.default.optionDisabled
+            ),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              if (!opt.disabled) selectOption(opt);
+            },
+            children: getOptionLabel(opt)
+          },
+          opt.value
+        ))
+      }
+    ),
+    helperText && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        id: fieldUtils.helperId(name),
+        className: fieldUtils.cx(fieldBase_module.default.helperText, error && fieldBase_module.default.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+exports.AutocompletePredictField = AutocompletePredictField;

package/dist/fields/AutocompletePredictField/AutocompletePredictField.d.ts

@@ -0,0 +1,10 @@
+import { AutocompleteOption, FieldComponentProps } from '../../types';
+/**
+ * Autocomplete with predictive ghost text.
+ * Shows a faded suggestion that can be accepted with Tab.
+ */
+export declare function AutocompletePredictField({ name, value, onChange: _onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, options: staticOptions, fetchOptions, optionLabel, form, }: FieldComponentProps & {
+    fetchOptions?: (query: string, signal?: AbortSignal) => Promise<AutocompleteOption[]>;
+    optionLabel?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AutocompletePredictField.d.ts.map

package/dist/fields/AutocompletePredictField/AutocompletePredictField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompletePredictField.d.ts","sourceRoot":"","sources":["../../../src/fields/AutocompletePredictField/AutocompletePredictField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAO3E;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,WAAW,EACX,IAAI,GACL,EAAE,mBAAmB,GAAG;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CAiSA"}

package/dist/fields/AutocompletePredictField/AutocompletePredictField.js

@@ -0,0 +1,289 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import localStyles from "../AutocompleteField/AutocompleteField.module.css.js";
+import styles from "../fieldBase.module.css.js";
+import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+const DEBOUNCE_MS = 400;
+function AutocompletePredictField({
+  name,
+  value,
+  onChange: _onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  placeholder,
+  disabled,
+  readOnly,
+  required,
+  options: staticOptions,
+  fetchOptions,
+  optionLabel,
+  form
+}) {
+  const [inputText, setInputText] = useState("");
+  const [filteredOptions, setFilteredOptions] = useState([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [loading, setLoading] = useState(false);
+  const [ghostText, setGhostText] = useState("");
+  const abortRef = useRef(null);
+  const debounceRef = useRef(void 0);
+  const wrapperRef = useRef(null);
+  const measureRef = useRef(null);
+  const getOptionLabel = useCallback(
+    (opt) => {
+      if (optionLabel) {
+        const val = opt[optionLabel];
+        return typeof val === "string" || typeof val === "number" ? String(val) : opt.label;
+      }
+      return opt.label;
+    },
+    [optionLabel]
+  );
+  useEffect(() => {
+    if (value != null && value !== "") {
+      const allOpts = staticOptions ?? filteredOptions;
+      const match = allOpts.find((o) => o.value === value);
+      if (match) {
+        setInputText(getOptionLabel(match));
+        setGhostText("");
+      }
+    } else {
+      setInputText("");
+    }
+  }, [value]);
+  const updateGhost = useCallback(
+    (query, opts) => {
+      if (!query || opts.length === 0) {
+        setGhostText("");
+        return;
+      }
+      const firstLabel = getOptionLabel(opts[0]);
+      if (firstLabel.toLowerCase().startsWith(query.toLowerCase())) {
+        setGhostText(query + firstLabel.slice(query.length));
+      } else {
+        setGhostText("");
+      }
+    },
+    [getOptionLabel]
+  );
+  const doSearch = useCallback(
+    (query) => {
+      var _a;
+      if (fetchOptions) {
+        (_a = abortRef.current) == null ? void 0 : _a.abort();
+        const controller = new AbortController();
+        abortRef.current = controller;
+        setLoading(true);
+        fetchOptions(query, controller.signal).then((results) => {
+          if (!controller.signal.aborted) {
+            setFilteredOptions(results);
+            updateGhost(query, results);
+            setLoading(false);
+          }
+        }).catch((err) => {
+          if (!controller.signal.aborted && err.name !== "AbortError") {
+            setFilteredOptions([]);
+            setGhostText("");
+            setLoading(false);
+          }
+        });
+      } else {
+        const q = query.toLowerCase();
+        const filtered = (staticOptions ?? []).filter(
+          (opt) => getOptionLabel(opt).toLowerCase().includes(q)
+        );
+        setFilteredOptions(filtered);
+        updateGhost(query, filtered);
+      }
+    },
+    [fetchOptions, staticOptions, getOptionLabel, updateGhost]
+  );
+  const handleInputChange = useCallback(
+    (e) => {
+      const query = e.target.value;
+      setInputText(query);
+      setIsOpen(true);
+      setActiveIndex(-1);
+      form.setFieldValue(name, "");
+      clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => doSearch(query), DEBOUNCE_MS);
+    },
+    [form, name, doSearch]
+  );
+  const selectOption = useCallback(
+    (opt) => {
+      form.setFieldValue(name, opt.value);
+      setInputText(getOptionLabel(opt));
+      setGhostText("");
+      setIsOpen(false);
+      setActiveIndex(-1);
+    },
+    [form, name, getOptionLabel]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Tab" && ghostText && ghostText !== inputText) {
+        e.preventDefault();
+        setInputText(ghostText);
+        const match = filteredOptions.find(
+          (o) => getOptionLabel(o).toLowerCase() === ghostText.toLowerCase()
+        );
+        if (match) {
+          form.setFieldValue(name, match.value);
+        }
+        setGhostText("");
+        setIsOpen(false);
+        return;
+      }
+      if (!isOpen) {
+        if (e.key === "ArrowDown") {
+          setIsOpen(true);
+          doSearch(inputText);
+        }
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setActiveIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setActiveIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (activeIndex >= 0 && filteredOptions[activeIndex]) {
+            selectOption(filteredOptions[activeIndex]);
+          }
+          break;
+        case "Escape":
+          setIsOpen(false);
+          setGhostText("");
+          setActiveIndex(-1);
+          break;
+      }
+    },
+    [
+      isOpen,
+      activeIndex,
+      filteredOptions,
+      inputText,
+      ghostText,
+      selectOption,
+      doSearch,
+      form,
+      name,
+      getOptionLabel
+    ]
+  );
+  const handleBlur = useCallback(
+    (e) => {
+      setTimeout(() => {
+        var _a;
+        if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
+          setIsOpen(false);
+          onBlur(e);
+        }
+      }, 150);
+    },
+    [onBlur]
+  );
+  useEffect(() => {
+    return () => {
+      var _a;
+      (_a = abortRef.current) == null ? void 0 : _a.abort();
+      clearTimeout(debounceRef.current);
+    };
+  }, []);
+  const aria = ariaProps(name, { error, helperText, required, label });
+  const listboxId = `${name}-listbox`;
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, ref: wrapperRef, children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        id: labelId(name),
+        htmlFor: name,
+        className: cx(styles.label, required && styles.labelRequired),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: localStyles.predictWrap, children: [
+      ghostText && /* @__PURE__ */ jsx("span", { className: localStyles.ghostText, "aria-hidden": "true", children: ghostText }),
+      /* @__PURE__ */ jsx("span", { ref: measureRef, className: localStyles.ghostHidden, "aria-hidden": "true", children: inputText }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...aria,
+          type: "text",
+          name,
+          value: inputText,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          onBlur: handleBlur,
+          onFocus: () => {
+            if (inputText) {
+              doSearch(inputText);
+            }
+            setIsOpen(true);
+          },
+          placeholder,
+          disabled,
+          readOnly,
+          role: "combobox",
+          "aria-expanded": isOpen,
+          "aria-controls": listboxId,
+          "aria-activedescendant": activeIndex >= 0 ? `${name}-opt-${activeIndex}` : void 0,
+          "aria-autocomplete": "both",
+          autoComplete: "off",
+          className: cx(styles.input, error && styles.inputError),
+          style: { background: "transparent", position: "relative", zIndex: 1 }
+        }
+      ),
+      loading && /* @__PURE__ */ jsx("span", { className: localStyles.spinner, "aria-hidden": "true" })
+    ] }),
+    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: listboxId,
+        role: "listbox",
+        className: localStyles.dropdown,
+        children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: `${name}-opt-${i}`,
+            role: "option",
+            tabIndex: -1,
+            "aria-selected": i === activeIndex,
+            "aria-disabled": opt.disabled,
+            className: cx(
+              localStyles.option,
+              i === activeIndex && localStyles.optionActive,
+              opt.disabled && localStyles.optionDisabled
+            ),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              if (!opt.disabled) selectOption(opt);
+            },
+            children: getOptionLabel(opt)
+          },
+          opt.value
+        ))
+      }
+    ),
+    helperText && /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: helperId(name),
+        className: cx(styles.helperText, error && styles.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+export {
+  AutocompletePredictField
+};

package/dist/fields/CheckboxField/CheckboxField.cjs

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const fieldBase_module = require("../fieldBase.module.css.cjs");
+const fieldUtils = require("../fieldUtils.cjs");
+const CheckboxField_module = require("./CheckboxField.module.css.cjs");
+function CheckboxField({
+  name,
+  value,
+  onChange: _onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  disabled,
+  readOnly,
+  required,
+  form
+}) {
+  const checked = Boolean(value);
+  const handleChange = react.useCallback(
+    (e) => {
+      if (readOnly) return;
+      form.setFieldValue(name, e.target.checked);
+    },
+    [form, name, readOnly]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: fieldUtils.cx(fieldBase_module.default.inlineWrapper, CheckboxField_module.default.checkboxLabel), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          id: name,
+          name,
+          checked,
+          onChange: handleChange,
+          onBlur,
+          disabled,
+          "aria-invalid": error || void 0,
+          "aria-describedby": helperText ? fieldUtils.helperId(name) : void 0,
+          "aria-required": required || void 0,
+          className: CheckboxField_module.default.checkbox
+        }
+      ),
+      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.inlineLabel, children: label })
+    ] }),
+    helperText && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        id: fieldUtils.helperId(name),
+        className: fieldUtils.cx(fieldBase_module.default.helperText, error && fieldBase_module.default.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+exports.CheckboxField = CheckboxField;

package/dist/fields/CheckboxField/CheckboxField.d.ts

@@ -0,0 +1,3 @@
+import { FieldComponentProps } from '../../types';
+export declare function CheckboxField({ name, value, onChange: _onChange, onBlur, error, helperText, label, disabled, readOnly, required, form, }: Readonly<FieldComponentProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CheckboxField.d.ts.map

package/dist/fields/CheckboxField/CheckboxField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.d.ts","sourceRoot":"","sources":["../../../src/fields/CheckboxField/CheckboxField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAKvD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,GACL,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAwC/B"}