@axenstudio/axen-form 0.1.1

package/dist/fields/AutocompleteField/AutocompleteField.module.css.js

@@ -0,0 +1,44 @@
+const inputWrap = "_inputWrap_1hzxx_1";
+const spinner = "_spinner_1hzxx_7";
+const dropdown = "_dropdown_1hzxx_32";
+const option = "_option_1hzxx_48";
+const optionActive = "_optionActive_1hzxx_63";
+const optionDisabled = "_optionDisabled_1hzxx_67";
+const noResults = "_noResults_1hzxx_72";
+const chipWrap = "_chipWrap_1hzxx_83";
+const chip = "_chip_1hzxx_83";
+const chipRemove = "_chipRemove_1hzxx_105";
+const predictWrap = "_predictWrap_1hzxx_131";
+const ghostText = "_ghostText_1hzxx_137";
+const ghostHidden = "_ghostHidden_1hzxx_150";
+const localStyles = {
+  inputWrap,
+  spinner,
+  dropdown,
+  option,
+  optionActive,
+  optionDisabled,
+  noResults,
+  chipWrap,
+  chip,
+  chipRemove,
+  predictWrap,
+  ghostText,
+  ghostHidden
+};
+export {
+  chip,
+  chipRemove,
+  chipWrap,
+  localStyles as default,
+  dropdown,
+  ghostHidden,
+  ghostText,
+  inputWrap,
+  noResults,
+  option,
+  optionActive,
+  optionDisabled,
+  predictWrap,
+  spinner
+};

package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.cjs

@@ -0,0 +1,286 @@
+"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 AutocompleteMultiField({
+  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 abortRef = react.useRef(null);
+  const debounceRef = react.useRef(void 0);
+  const knownPoolRef = react.useRef(staticOptions ?? []);
+  const wrapperRef = react.useRef(null);
+  const selectedValues = Array.isArray(value) ? value : [];
+  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]
+  );
+  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) {
+            for (const r of results) {
+              if (!knownPoolRef.current.some((k) => k.value === r.value)) {
+                knownPoolRef.current.push(r);
+              }
+            }
+            setFilteredOptions(results.filter((o) => !selectedValues.includes(o.value)));
+            setLoading(false);
+          }
+        }).catch((err) => {
+          if (!controller.signal.aborted && err.name !== "AbortError") {
+            setFilteredOptions([]);
+            setLoading(false);
+          }
+        });
+      } else {
+        const q = query.toLowerCase();
+        const opts = (staticOptions ?? []).filter(
+          (opt) => getOptionLabel(opt).toLowerCase().includes(q) && !selectedValues.includes(opt.value)
+        );
+        setFilteredOptions(opts);
+      }
+    },
+    [fetchOptions, staticOptions, selectedValues, getOptionLabel]
+  );
+  const handleInputChange = react.useCallback(
+    (e) => {
+      const query = e.target.value;
+      setInputText(query);
+      setIsOpen(true);
+      setActiveIndex(-1);
+      clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => doSearch(query), DEBOUNCE_MS);
+    },
+    [doSearch]
+  );
+  const selectOption = react.useCallback(
+    (opt) => {
+      form.setFieldValue(name, [...selectedValues, opt.value]);
+      setInputText("");
+      setIsOpen(false);
+      setActiveIndex(-1);
+    },
+    [form, name, selectedValues]
+  );
+  const removeValue = react.useCallback(
+    (val) => {
+      form.setFieldValue(
+        name,
+        selectedValues.filter((v) => v !== val)
+      );
+    },
+    [form, name, selectedValues]
+  );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Backspace" && inputText === "" && selectedValues.length > 0) {
+        removeValue(selectedValues.at(-1));
+        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);
+          setActiveIndex(-1);
+          break;
+      }
+    },
+    [
+      isOpen,
+      activeIndex,
+      filteredOptions,
+      inputText,
+      selectedValues,
+      selectOption,
+      removeValue,
+      doSearch
+    ]
+  );
+  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`;
+  const allPool = staticOptions ?? knownPoolRef.current;
+  const resolveLabel = (val) => {
+    const opt = allPool.find((o) => o.value === val);
+    return opt ? getOptionLabel(opt) : String(val);
+  };
+  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.jsx(
+      "div",
+      {
+        className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError),
+        style: { height: "auto", padding: 0 },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AutocompleteField_module.default.chipWrap, children: [
+          selectedValues.map((val) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: AutocompleteField_module.default.chip, children: [
+            resolveLabel(val),
+            !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: AutocompleteField_module.default.chipRemove,
+                onClick: () => removeValue(val),
+                "aria-label": `Remove ${resolveLabel(val)}`,
+                children: "×"
+              }
+            )
+          ] }, val)),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ...aria,
+              type: "text",
+              value: inputText,
+              onChange: handleInputChange,
+              onKeyDown: handleKeyDown,
+              onBlur: handleBlur,
+              onFocus: () => {
+                doSearch(inputText);
+                setIsOpen(true);
+              },
+              placeholder: selectedValues.length === 0 ? placeholder : "",
+              disabled,
+              readOnly,
+              role: "combobox",
+              "aria-expanded": isOpen,
+              "aria-controls": listboxId,
+              "aria-activedescendant": activeIndex >= 0 ? `${name}-opt-${activeIndex}` : void 0,
+              "aria-autocomplete": "list",
+              autoComplete: "off",
+              style: {
+                border: "none",
+                outline: "none",
+                flex: 1,
+                minWidth: "60px",
+                padding: "var(--axen-space-xs)",
+                background: "transparent"
+              }
+            }
+          ),
+          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,
+        "aria-multiselectable": "true",
+        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.AutocompleteMultiField = AutocompleteMultiField;

package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.d.ts

@@ -0,0 +1,6 @@
+import { AutocompleteOption, FieldComponentProps } from '../../types';
+export declare function AutocompleteMultiField({ 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=AutocompleteMultiField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteMultiField.d.ts","sourceRoot":"","sources":["../../../src/fields/AutocompleteMultiField/AutocompleteMultiField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAO3E,wBAAgB,sBAAsB,CAAC,EACrC,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,2CAsRA"}

package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.js

@@ -0,0 +1,286 @@
+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 AutocompleteMultiField({
+  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 abortRef = useRef(null);
+  const debounceRef = useRef(void 0);
+  const knownPoolRef = useRef(staticOptions ?? []);
+  const wrapperRef = useRef(null);
+  const selectedValues = Array.isArray(value) ? value : [];
+  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]
+  );
+  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) {
+            for (const r of results) {
+              if (!knownPoolRef.current.some((k) => k.value === r.value)) {
+                knownPoolRef.current.push(r);
+              }
+            }
+            setFilteredOptions(results.filter((o) => !selectedValues.includes(o.value)));
+            setLoading(false);
+          }
+        }).catch((err) => {
+          if (!controller.signal.aborted && err.name !== "AbortError") {
+            setFilteredOptions([]);
+            setLoading(false);
+          }
+        });
+      } else {
+        const q = query.toLowerCase();
+        const opts = (staticOptions ?? []).filter(
+          (opt) => getOptionLabel(opt).toLowerCase().includes(q) && !selectedValues.includes(opt.value)
+        );
+        setFilteredOptions(opts);
+      }
+    },
+    [fetchOptions, staticOptions, selectedValues, getOptionLabel]
+  );
+  const handleInputChange = useCallback(
+    (e) => {
+      const query = e.target.value;
+      setInputText(query);
+      setIsOpen(true);
+      setActiveIndex(-1);
+      clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => doSearch(query), DEBOUNCE_MS);
+    },
+    [doSearch]
+  );
+  const selectOption = useCallback(
+    (opt) => {
+      form.setFieldValue(name, [...selectedValues, opt.value]);
+      setInputText("");
+      setIsOpen(false);
+      setActiveIndex(-1);
+    },
+    [form, name, selectedValues]
+  );
+  const removeValue = useCallback(
+    (val) => {
+      form.setFieldValue(
+        name,
+        selectedValues.filter((v) => v !== val)
+      );
+    },
+    [form, name, selectedValues]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Backspace" && inputText === "" && selectedValues.length > 0) {
+        removeValue(selectedValues.at(-1));
+        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);
+          setActiveIndex(-1);
+          break;
+      }
+    },
+    [
+      isOpen,
+      activeIndex,
+      filteredOptions,
+      inputText,
+      selectedValues,
+      selectOption,
+      removeValue,
+      doSearch
+    ]
+  );
+  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`;
+  const allPool = staticOptions ?? knownPoolRef.current;
+  const resolveLabel = (val) => {
+    const opt = allPool.find((o) => o.value === val);
+    return opt ? getOptionLabel(opt) : String(val);
+  };
+  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__ */ jsx(
+      "div",
+      {
+        className: cx(styles.input, error && styles.inputError),
+        style: { height: "auto", padding: 0 },
+        children: /* @__PURE__ */ jsxs("div", { className: localStyles.chipWrap, children: [
+          selectedValues.map((val) => /* @__PURE__ */ jsxs("span", { className: localStyles.chip, children: [
+            resolveLabel(val),
+            !disabled && !readOnly && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: localStyles.chipRemove,
+                onClick: () => removeValue(val),
+                "aria-label": `Remove ${resolveLabel(val)}`,
+                children: "×"
+              }
+            )
+          ] }, val)),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...aria,
+              type: "text",
+              value: inputText,
+              onChange: handleInputChange,
+              onKeyDown: handleKeyDown,
+              onBlur: handleBlur,
+              onFocus: () => {
+                doSearch(inputText);
+                setIsOpen(true);
+              },
+              placeholder: selectedValues.length === 0 ? placeholder : "",
+              disabled,
+              readOnly,
+              role: "combobox",
+              "aria-expanded": isOpen,
+              "aria-controls": listboxId,
+              "aria-activedescendant": activeIndex >= 0 ? `${name}-opt-${activeIndex}` : void 0,
+              "aria-autocomplete": "list",
+              autoComplete: "off",
+              style: {
+                border: "none",
+                outline: "none",
+                flex: 1,
+                minWidth: "60px",
+                padding: "var(--axen-space-xs)",
+                background: "transparent"
+              }
+            }
+          ),
+          loading && /* @__PURE__ */ jsx("span", { className: localStyles.spinner, "aria-hidden": "true" })
+        ] })
+      }
+    ),
+    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: listboxId,
+        role: "listbox",
+        className: localStyles.dropdown,
+        "aria-multiselectable": "true",
+        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 {
+  AutocompleteMultiField
+};