@multiplatform.one/forms 7.4.1 → 7.5.0

package/dist/cjs/fields/Icon/index.cjs

@@ -0,0 +1,380 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Icon_exports = {};
+__export(Icon_exports, {
+  DRAWN_ICON_NAMES: () => import_drawnSet2.DRAWN_ICON_NAMES,
+  DrawnIcon: () => import_drawnSet2.DrawnIcon,
+  Icon: () => Icon,
+  filterDrawnIcons: () => import_drawnSet2.filterDrawnIcons,
+  isDrawnIconName: () => import_drawnSet2.isDrawnIconName,
+  parseIconOptions: () => import_drawnSet2.parseIconOptions,
+  resolveIconCatalog: () => import_drawnSet2.resolveIconCatalog
+});
+module.exports = __toCommonJS(Icon_exports);
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_fieldLayout = require("../../fieldLayout.cjs");
+var import_InputParts = require("../../InputParts/index.cjs");
+var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
+var import_Skeleton = require("../../Skeleton/index.cjs");
+var import_colorRamps = require("../../shared/colorRamps.cjs");
+var import_tableCellContext = require("../../shared/tableCellContext.cjs");
+var import_utils = require("../../shared/utils.cjs");
+var import_t = require("../../shared/t.cjs");
+var import_drawnSet = require("./drawnSet.cjs");
+var import_drawnSet2 = require("./drawnSet.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const adornmentRing = (0, import_theme.ensureFocusVisibleRing)({
+  outlineOffset: -2
+});
+const NESTED_GLYPH_WELL = 32;
+function EmptyGlyphWell() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    testID: "icon-empty-well",
+    width: 16,
+    height: 16,
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderColor: "$borderColor",
+    borderRadius: 3
+  });
+}
+function IconControl({
+  value,
+  placeholder,
+  disabled,
+  readOnly,
+  hasError,
+  required,
+  id,
+  hasLabel,
+  a11yLabel,
+  helperText,
+  catalog,
+  onValueChange,
+  onBlurControl
+}) {
+  const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [query, setQuery] = (0, import_react.useState)("");
+  const drawn = (0, import_drawnSet.isDrawnIconName)(value) ? value : void 0;
+  const matches = (0, import_react.useMemo)(() => (0, import_drawnSet.filterDrawnIcons)(catalog, query), [catalog, query]);
+  const closePanel = (0, import_react.useCallback)(() => {
+    setOpen(false);
+    setQuery("");
+    onBlurControl?.();
+  }, [onBlurControl]);
+  const handlePick = (0, import_react.useCallback)(name => {
+    onValueChange(name);
+    closePanel();
+  }, [closePanel, onValueChange]);
+  const handleClear = (0, import_react.useCallback)(() => {
+    onValueChange("");
+    setQuery("");
+  }, [onValueChange]);
+  const handleOpenChange = (0, import_react.useCallback)(next => {
+    if (disabled || readOnly) return;
+    if (next) {
+      setOpen(true);
+      return;
+    }
+    closePanel();
+  }, [closePanel, disabled, readOnly]);
+  if (readOnly) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      testID: "icon-field-readonly",
+      width: NESTED_GLYPH_WELL,
+      height: NESTED_GLYPH_WELL,
+      alignItems: "center",
+      justifyContent: "center",
+      children: drawn ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_drawnSet.DrawnIcon, {
+        name: drawn,
+        size: 16
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(EmptyGlyphWell, {})
+    });
+  }
+  const displayValue = open ? query : drawn ? drawn : value;
+  const showClear = Boolean(value) && !disabled;
+  const trigger = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+      cursor: "pointer",
+      onPress: import_tamagui.isWeb && !disabled ? () => setOpen(true) : void 0,
+      size: knobProps.sizeToken,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+        testID: "icon-field",
+        theme: hasError ? "red" : void 0,
+        disabled,
+        ...(disabled ? {
+          opacity: 0.5,
+          pointerEvents: "none"
+        } : void 0),
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+          adornment: "leading",
+          children: drawn ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_drawnSet.DrawnIcon, {
+            name: drawn,
+            size: 16
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(EmptyGlyphWell, {})
+        }), !inTableCell && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+          id,
+          value: displayValue,
+          placeholder,
+          fontFamily: "$mono",
+          readOnly: !open,
+          disabled,
+          "aria-expanded": open,
+          "aria-haspopup": "listbox",
+          "aria-controls": open ? `${id ?? "icon"}-listbox` : void 0,
+          "aria-label": hasLabel ? void 0 : (0, import_t.t)("Icon"),
+          "aria-required": required || void 0,
+          "aria-invalid": hasError || void 0,
+          autoComplete: "off",
+          autoCapitalize: "none",
+          spellCheck: false,
+          onChangeText: open ? setQuery : void 0,
+          onFocus: () => {
+            if (!disabled) setOpen(true);
+          }
+        }), showClear ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
+          tabIndex: 0,
+          "aria-label": (0, import_t.t)("Clear icon"),
+          disabled,
+          focusVisibleStyle: adornmentRing,
+          onPress: e => {
+            e.stopPropagation();
+            handleClear();
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_drawnSet.DrawnIcon, {
+              name: "x",
+              size: 16
+            })
+          })
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+          adornment: "trailing",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_drawnSet.DrawnIcon, {
+            name: "chev-d",
+            size: 16
+          })
+        })]
+      })
+    })
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
+    open,
+    onOpenChange: handleOpenChange,
+    trigger,
+    disabled,
+    scrollable: true,
+    sizing: "fill",
+    triggerA11y: {
+      label: a11yLabel || (0, import_t.t)("Icon"),
+      value: value || placeholder,
+      hint: helperText
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      testID: "icon-panel",
+      id: `${id ?? "icon"}-listbox`,
+      ...{
+        role: "listbox"
+      },
+      "aria-label": (0, import_t.t)("Icons"),
+      padding: "$2",
+      children: matches.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        testID: "icon-no-results",
+        color: import_colorRamps.formCommonColors.muted,
+        fontSize: "$3",
+        textAlign: "center",
+        padding: "$4",
+        children: (0, import_t.t)('No icon matches "{{query}}"', {
+          query
+        })
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        flexWrap: "wrap",
+        children: matches.map(name => {
+          const selected = name === value;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            role: "option",
+            "aria-selected": selected,
+            testID: `icon-option-${name}`,
+            width: "33.333%",
+            padding: "$1",
+            cursor: "pointer",
+            onPress: () => handlePick(name),
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+              height: 60,
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "$1",
+              borderRadius: "$3",
+              backgroundColor: selected ? "$color3" : "transparent",
+              hoverStyle: {
+                backgroundColor: "$color3"
+              },
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_drawnSet.DrawnIcon, {
+                name,
+                size: 16
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontFamily: "$mono",
+                fontSize: 11,
+                color: "$color10",
+                numberOfLines: 1,
+                children: name
+              })]
+            })
+          }, name);
+        })
+      })
+    })
+  });
+}
+function Icon(props) {
+  const {
+    defaultValue,
+    form,
+    placeholder = (0, import_t.t)("Choose an icon"),
+    mode,
+    name,
+    preserveValue,
+    validators,
+    disabled,
+    readOnly,
+    label,
+    labelProps,
+    error: errorProp,
+    helperText,
+    required,
+    size,
+    onBlur,
+    value: controlledValue,
+    onChange,
+    onValueChange,
+    skeleton,
+    compact,
+    id: idProp,
+    icons,
+    options
+  } = (0, import_tamagui.useProps)(props);
+  const catalog = (0, import_react.useMemo)(() => (0, import_drawnSet.resolveIconCatalog)(icons ?? (0, import_drawnSet.parseIconOptions)(options)), [icons, options]);
+  const emitValueChange = (0, import_react.useCallback)(newValue => {
+    onChange?.(newValue);
+    onValueChange?.(newValue);
+  }, [onChange, onValueChange]);
+  const {
+    resolvedForm,
+    knobProps,
+    id
+  } = (0, import_utils.useFormField)({
+    form,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  const [standaloneValue, setStandaloneValue] = (0, import_react.useState)(() => (controlledValue ?? defaultValue) || "");
+  (0, import_react.useEffect)(() => {
+    if (controlledValue !== void 0) {
+      setStandaloneValue(controlledValue);
+    }
+  }, [controlledValue]);
+  const handleStandaloneChange = (0, import_react.useCallback)(newValue => {
+    setStandaloneValue(newValue);
+    emitValueChange(newValue);
+  }, [emitValueChange]);
+  if (skeleton) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input, {
+      size: size || knobProps.sizeToken,
+      children: [label ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "text",
+        width: 96,
+        height: 14
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "rounded",
+        width: 320,
+        height: knobProps.control.height,
+        borderRadius: knobProps.borderRadius.borderRadius
+      })]
+    });
+  }
+  const control = (fieldValue, onValue, error) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconControl, {
+    value: fieldValue,
+    placeholder,
+    disabled,
+    readOnly,
+    hasError: !!error,
+    required,
+    id,
+    hasLabel: Boolean(label),
+    a11yLabel: typeof label === "string" ? label : void 0,
+    helperText,
+    catalog,
+    onValueChange: onValue,
+    onBlurControl: () => onBlur?.(void 0)
+  });
+  if (!resolvedForm || !name) {
+    const effectiveValue = controlledValue ?? standaloneValue;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error: errorProp,
+      helperText,
+      required,
+      size,
+      knobProps,
+      onBlur,
+      disabled,
+      children: control(effectiveValue, handleStandaloneChange, errorProp)
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
+    defaultValue,
+    form: resolvedForm,
+    mode,
+    name,
+    preserveValue,
+    validators: resolvedValidators,
+    children: field => {
+      const resolvedError = (0, import_utils.getFieldError)(field, errorProp);
+      const fieldValue = field.state.value || "";
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        helperText,
+        required,
+        size,
+        knobProps,
+        onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
+        disabled,
+        children: control(fieldValue, newValue => {
+          field.handleChange(newValue);
+          emitValueChange(newValue);
+        }, resolvedError)
+      });
+    }
+  });
+}