@multiplatform.one/forms 7.4.1 → 7.5.0

package/dist/esm/fields/Icon/drawnSet.native.js

@@ -0,0 +1,365 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Circle, Line, Path, Polyline, Rect, Svg } from "react-native-svg";
+var DRAWN_ICON_NAMES = ["chev-d", "chev-r", "chev-l", "x", "check", "warn", "arr-d", "copy", "disk", "grip", "chev-u", "arr-u", "arr-r", "upload", "mail", "menu"];
+var DRAWN_ICON_NAME_SET = new Set(DRAWN_ICON_NAMES);
+function isDrawnIconName(value) {
+  return DRAWN_ICON_NAME_SET.has(value);
+}
+var STROKE = 2;
+var STROKE_CHECK = 2.5;
+var GEOM = {
+  "chev-d": {
+    strokeWidth: STROKE,
+    fillStroke: true,
+    shapes: [{
+      kind: "polyline",
+      points: "6 9 12 15 18 9"
+    }]
+  },
+  "chev-r": {
+    strokeWidth: STROKE,
+    fillStroke: true,
+    shapes: [{
+      kind: "polyline",
+      points: "9 6 15 12 9 18"
+    }]
+  },
+  "chev-l": {
+    strokeWidth: STROKE,
+    fillStroke: true,
+    shapes: [{
+      kind: "polyline",
+      points: "15 6 9 12 15 18"
+    }]
+  },
+  x: {
+    strokeWidth: STROKE,
+    fillStroke: true,
+    shapes: [{
+      kind: "line",
+      x1: 18,
+      y1: 6,
+      x2: 6,
+      y2: 18
+    }, {
+      kind: "line",
+      x1: 6,
+      y1: 6,
+      x2: 18,
+      y2: 18
+    }]
+  },
+  check: {
+    strokeWidth: STROKE_CHECK,
+    fillStroke: true,
+    shapes: [{
+      kind: "polyline",
+      points: "5 12 10 17 19 8"
+    }]
+  },
+  warn: {
+    strokeWidth: STROKE,
+    fillStroke: true,
+    shapes: [{
+      kind: "path",
+      d: "M12 3 2 20h20z"
+    }, {
+      kind: "line",
+      x1: 12,
+      y1: 10,
+      x2: 12,
+      y2: 14
+    }, {
+      kind: "circle",
+      cx: 12,
+      cy: 17,
+      r: 0.8,
+      filled: true
+    }]
+  },
+  "arr-d": {
+    strokeWidth: STROKE,
+    fillStroke: true,
+    shapes: [{
+      kind: "line",
+      x1: 12,
+      y1: 4,
+      x2: 12,
+      y2: 18
+    }, {
+      kind: "polyline",
+      points: "6 12 12 18 18 12"
+    }]
+  },
+  copy: {
+    strokeWidth: STROKE,
+    fillStroke: true,
+    shapes: [{
+      kind: "rect",
+      x: 9,
+      y: 9,
+      width: 12,
+      height: 12,
+      rx: 2
+    }, {
+      kind: "path",
+      d: "M5 15V5a2 2 0 0 1 2-2h10"
+    }]
+  },
+  disk: {
+    strokeWidth: STROKE,
+    fillStroke: true,
+    shapes: [{
+      kind: "rect",
+      x: 3,
+      y: 4,
+      width: 18,
+      height: 16,
+      rx: 2
+    }, {
+      kind: "line",
+      x1: 3,
+      y1: 14,
+      x2: 21,
+      y2: 14
+    }, {
+      kind: "circle",
+      cx: 7,
+      cy: 17,
+      r: 1,
+      filled: true
+    }]
+  },
+  grip: {
+    strokeWidth: 0,
+    fillStroke: false,
+    shapes: [{
+      kind: "circle",
+      cx: 9,
+      cy: 6,
+      r: 1.5,
+      filled: true
+    }, {
+      kind: "circle",
+      cx: 15,
+      cy: 6,
+      r: 1.5,
+      filled: true
+    }, {
+      kind: "circle",
+      cx: 9,
+      cy: 12,
+      r: 1.5,
+      filled: true
+    }, {
+      kind: "circle",
+      cx: 15,
+      cy: 12,
+      r: 1.5,
+      filled: true
+    }, {
+      kind: "circle",
+      cx: 9,
+      cy: 18,
+      r: 1.5,
+      filled: true
+    }, {
+      kind: "circle",
+      cx: 15,
+      cy: 18,
+      r: 1.5,
+      filled: true
+    }]
+  },
+  "chev-u": {
+    strokeWidth: STROKE,
+    fillStroke: true,
+    shapes: [{
+      kind: "polyline",
+      points: "6 15 12 9 18 15"
+    }]
+  },
+  "arr-u": {
+    strokeWidth: STROKE,
+    fillStroke: true,
+    shapes: [{
+      kind: "line",
+      x1: 12,
+      y1: 20,
+      x2: 12,
+      y2: 6
+    }, {
+      kind: "polyline",
+      points: "6 12 12 6 18 12"
+    }]
+  },
+  "arr-r": {
+    strokeWidth: STROKE,
+    fillStroke: true,
+    shapes: [{
+      kind: "line",
+      x1: 4,
+      y1: 12,
+      x2: 18,
+      y2: 12
+    }, {
+      kind: "polyline",
+      points: "12 6 18 12 12 18"
+    }]
+  },
+  upload: {
+    strokeWidth: STROKE,
+    fillStroke: true,
+    shapes: [{
+      kind: "line",
+      x1: 12,
+      y1: 17,
+      x2: 12,
+      y2: 5
+    }, {
+      kind: "polyline",
+      points: "6 11 12 5 18 11"
+    }, {
+      kind: "line",
+      x1: 4,
+      y1: 20,
+      x2: 20,
+      y2: 20
+    }]
+  },
+  mail: {
+    strokeWidth: STROKE,
+    fillStroke: true,
+    shapes: [{
+      kind: "rect",
+      x: 3,
+      y: 5,
+      width: 18,
+      height: 14,
+      rx: 2
+    }, {
+      kind: "path",
+      d: "m3 8 9 6 9-6"
+    }]
+  },
+  menu: {
+    strokeWidth: STROKE,
+    fillStroke: true,
+    shapes: [{
+      kind: "line",
+      x1: 4,
+      y1: 6,
+      x2: 20,
+      y2: 6
+    }, {
+      kind: "line",
+      x1: 4,
+      y1: 12,
+      x2: 20,
+      y2: 12
+    }, {
+      kind: "line",
+      x1: 4,
+      y1: 18,
+      x2: 20,
+      y2: 18
+    }]
+  }
+};
+function resolveIconCatalog(options) {
+  if (!(options === null || options === void 0 ? void 0 : options.length)) return [...DRAWN_ICON_NAMES];
+  var allowed = new Set(options);
+  return DRAWN_ICON_NAMES.filter(function (name) {
+    return allowed.has(name);
+  });
+}
+function parseIconOptions(options) {
+  if (!options || typeof options !== "string") return void 0;
+  var names = options.split("\n").map(function (line) {
+    return line.trim();
+  }).filter(isDrawnIconName);
+  return names.length ? names : void 0;
+}
+function filterDrawnIcons(catalog, query) {
+  var needle = query.trim().toLowerCase();
+  if (!needle) return [...catalog];
+  return catalog.filter(function (name) {
+    return name.toLowerCase().includes(needle);
+  });
+}
+function DrawnIcon(param) {
+  var {
+    name,
+    size = 16,
+    color = "currentColor"
+  } = param;
+  var geom = GEOM[name];
+  var stroke = geom.fillStroke ? color : "none";
+  return /* @__PURE__ */_jsx(Svg, {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    pointerEvents: "none",
+    "aria-hidden": true,
+    children: geom.shapes.map(function (shape, index) {
+      var key = `${name}-${index}`;
+      if (shape.kind === "polyline") {
+        return /* @__PURE__ */_jsx(Polyline, {
+          points: shape.points,
+          fill: "none",
+          stroke,
+          strokeWidth: geom.strokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }, key);
+      }
+      if (shape.kind === "line") {
+        return /* @__PURE__ */_jsx(Line, {
+          x1: shape.x1,
+          y1: shape.y1,
+          x2: shape.x2,
+          y2: shape.y2,
+          fill: "none",
+          stroke,
+          strokeWidth: geom.strokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }, key);
+      }
+      if (shape.kind === "path") {
+        return /* @__PURE__ */_jsx(Path, {
+          d: shape.d,
+          fill: "none",
+          stroke,
+          strokeWidth: geom.strokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }, key);
+      }
+      if (shape.kind === "rect") {
+        return /* @__PURE__ */_jsx(Rect, {
+          x: shape.x,
+          y: shape.y,
+          width: shape.width,
+          height: shape.height,
+          rx: shape.rx,
+          fill: "none",
+          stroke,
+          strokeWidth: geom.strokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }, key);
+      }
+      return /* @__PURE__ */_jsx(Circle, {
+        cx: shape.cx,
+        cy: shape.cy,
+        r: shape.r,
+        fill: shape.filled ? color : "none",
+        stroke: shape.filled ? "none" : stroke,
+        strokeWidth: shape.filled ? 0 : geom.strokeWidth
+      }, key);
+    })
+  });
+}
+export { DRAWN_ICON_NAMES, DrawnIcon, filterDrawnIcons, isDrawnIconName, parseIconOptions, resolveIconCatalog };
+//# sourceMappingURL=drawnSet.native.js.map

package/dist/esm/fields/Icon/drawnSet.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","Circle","Line","Path","Polyline","Rect","Svg","DRAWN_ICON_NAMES","DRAWN_ICON_NAME_SET","Set","isDrawnIconName","value","has","STROKE","STROKE_CHECK","GEOM","strokeWidth","fillStroke","shapes","kind","points","x","x1","y1","x2","y2","check","warn","d","cx","cy","r","filled","copy","y","width","height","rx","disk","grip"],"sources":["../../../../src/fields/Icon/drawnSet.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/fields/Icon/index.mjs

@@ -0,0 +1,349 @@
+import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Text, View, XStack, YStack, isWeb, useProps } from "tamagui";
+import { Field, FieldLayout } from "../../fieldLayout.mjs";
+import { Input as InputParts } from "../../InputParts/index.mjs";
+import { FloatingPanel } from "../../FloatingPanel/index.mjs";
+import { Skeleton } from "../../Skeleton/index.mjs";
+import { formCommonColors } from "../../shared/colorRamps.mjs";
+import { useIsInTableCell } from "../../shared/tableCellContext.mjs";
+import { getFieldError, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
+import { t } from "../../shared/t.mjs";
+import { DrawnIcon, filterDrawnIcons, isDrawnIconName, parseIconOptions, resolveIconCatalog } from "./drawnSet.mjs";
+import { DRAWN_ICON_NAMES as DRAWN_ICON_NAMES2, DrawnIcon as DrawnIcon2, filterDrawnIcons as filterDrawnIcons2, isDrawnIconName as isDrawnIconName2, parseIconOptions as parseIconOptions2, resolveIconCatalog as resolveIconCatalog2 } from "./drawnSet.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const adornmentRing = ensureFocusVisibleRing({
+  outlineOffset: -2
+});
+const NESTED_GLYPH_WELL = 32;
+function EmptyGlyphWell() {
+  return /* @__PURE__ */jsx(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 = useIsInTableCell();
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const drawn = isDrawnIconName(value) ? value : void 0;
+  const matches = useMemo(() => filterDrawnIcons(catalog, query), [catalog, query]);
+  const closePanel = useCallback(() => {
+    setOpen(false);
+    setQuery("");
+    onBlurControl?.();
+  }, [onBlurControl]);
+  const handlePick = useCallback(name => {
+    onValueChange(name);
+    closePanel();
+  }, [closePanel, onValueChange]);
+  const handleClear = useCallback(() => {
+    onValueChange("");
+    setQuery("");
+  }, [onValueChange]);
+  const handleOpenChange = useCallback(next => {
+    if (disabled || readOnly) return;
+    if (next) {
+      setOpen(true);
+      return;
+    }
+    closePanel();
+  }, [closePanel, disabled, readOnly]);
+  if (readOnly) {
+    return /* @__PURE__ */jsx(View, {
+      testID: "icon-field-readonly",
+      width: NESTED_GLYPH_WELL,
+      height: NESTED_GLYPH_WELL,
+      alignItems: "center",
+      justifyContent: "center",
+      children: drawn ? /* @__PURE__ */jsx(DrawnIcon, {
+        name: drawn,
+        size: 16
+      }) : /* @__PURE__ */jsx(EmptyGlyphWell, {})
+    });
+  }
+  const displayValue = open ? query : drawn ? drawn : value;
+  const showClear = Boolean(value) && !disabled;
+  const trigger = /* @__PURE__ */jsx(View, {
+    children: /* @__PURE__ */jsx(InputParts, {
+      cursor: "pointer",
+      onPress: isWeb && !disabled ? () => setOpen(true) : void 0,
+      size: knobProps.sizeToken,
+      children: /* @__PURE__ */jsxs(InputParts.Box, {
+        testID: "icon-field",
+        theme: hasError ? "red" : void 0,
+        disabled,
+        ...(disabled ? {
+          opacity: 0.5,
+          pointerEvents: "none"
+        } : void 0),
+        children: [/* @__PURE__ */jsx(InputParts.Icon, {
+          adornment: "leading",
+          children: drawn ? /* @__PURE__ */jsx(DrawnIcon, {
+            name: drawn,
+            size: 16
+          }) : /* @__PURE__ */jsx(EmptyGlyphWell, {})
+        }), !inTableCell && /* @__PURE__ */jsx(InputParts.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 : 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__ */jsx(InputParts.Button, {
+          tabIndex: 0,
+          "aria-label": t("Clear icon"),
+          disabled,
+          focusVisibleStyle: adornmentRing,
+          onPress: e => {
+            e.stopPropagation();
+            handleClear();
+          },
+          children: /* @__PURE__ */jsx(InputParts.Icon, {
+            children: /* @__PURE__ */jsx(DrawnIcon, {
+              name: "x",
+              size: 16
+            })
+          })
+        }) : /* @__PURE__ */jsx(InputParts.Icon, {
+          adornment: "trailing",
+          children: /* @__PURE__ */jsx(DrawnIcon, {
+            name: "chev-d",
+            size: 16
+          })
+        })]
+      })
+    })
+  });
+  return /* @__PURE__ */jsx(FloatingPanel, {
+    open,
+    onOpenChange: handleOpenChange,
+    trigger,
+    disabled,
+    scrollable: true,
+    sizing: "fill",
+    triggerA11y: {
+      label: a11yLabel || t("Icon"),
+      value: value || placeholder,
+      hint: helperText
+    },
+    children: /* @__PURE__ */jsx(YStack, {
+      testID: "icon-panel",
+      id: `${id ?? "icon"}-listbox`,
+      ...{
+        role: "listbox"
+      },
+      "aria-label": t("Icons"),
+      padding: "$2",
+      children: matches.length === 0 ? /* @__PURE__ */jsx(Text, {
+        testID: "icon-no-results",
+        color: formCommonColors.muted,
+        fontSize: "$3",
+        textAlign: "center",
+        padding: "$4",
+        children: t('No icon matches "{{query}}"', {
+          query
+        })
+      }) : /* @__PURE__ */jsx(XStack, {
+        flexWrap: "wrap",
+        children: matches.map(name => {
+          const selected = name === value;
+          return /* @__PURE__ */jsx(View, {
+            role: "option",
+            "aria-selected": selected,
+            testID: `icon-option-${name}`,
+            width: "33.333%",
+            padding: "$1",
+            cursor: "pointer",
+            onPress: () => handlePick(name),
+            children: /* @__PURE__ */jsxs(YStack, {
+              height: 60,
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "$1",
+              borderRadius: "$3",
+              backgroundColor: selected ? "$color3" : "transparent",
+              hoverStyle: {
+                backgroundColor: "$color3"
+              },
+              children: [/* @__PURE__ */jsx(DrawnIcon, {
+                name,
+                size: 16
+              }), /* @__PURE__ */jsx(Text, {
+                fontFamily: "$mono",
+                fontSize: 11,
+                color: "$color10",
+                numberOfLines: 1,
+                children: name
+              })]
+            })
+          }, name);
+        })
+      })
+    })
+  });
+}
+function Icon(props) {
+  const {
+    defaultValue,
+    form,
+    placeholder = 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
+  } = useProps(props);
+  const catalog = useMemo(() => resolveIconCatalog(icons ?? parseIconOptions(options)), [icons, options]);
+  const emitValueChange = useCallback(newValue => {
+    onChange?.(newValue);
+    onValueChange?.(newValue);
+  }, [onChange, onValueChange]);
+  const {
+    resolvedForm,
+    knobProps,
+    id
+  } = useFormField({
+    form,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const [standaloneValue, setStandaloneValue] = useState(() => (controlledValue ?? defaultValue) || "");
+  useEffect(() => {
+    if (controlledValue !== void 0) {
+      setStandaloneValue(controlledValue);
+    }
+  }, [controlledValue]);
+  const handleStandaloneChange = useCallback(newValue => {
+    setStandaloneValue(newValue);
+    emitValueChange(newValue);
+  }, [emitValueChange]);
+  if (skeleton) {
+    return /* @__PURE__ */jsxs(InputParts, {
+      size: size || knobProps.sizeToken,
+      children: [label ? /* @__PURE__ */jsx(Skeleton, {
+        variant: "text",
+        width: 96,
+        height: 14
+      }) : null, /* @__PURE__ */jsx(Skeleton, {
+        variant: "rounded",
+        width: 320,
+        height: knobProps.control.height,
+        borderRadius: knobProps.borderRadius.borderRadius
+      })]
+    });
+  }
+  const control = (fieldValue, onValue, error) => /* @__PURE__ */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__ */jsx(FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error: errorProp,
+      helperText,
+      required,
+      size,
+      knobProps,
+      onBlur,
+      disabled,
+      children: control(effectiveValue, handleStandaloneChange, errorProp)
+    });
+  }
+  return /* @__PURE__ */jsx(Field, {
+    defaultValue,
+    form: resolvedForm,
+    mode,
+    name,
+    preserveValue,
+    validators: resolvedValidators,
+    children: field => {
+      const resolvedError = getFieldError(field, errorProp);
+      const fieldValue = field.state.value || "";
+      return /* @__PURE__ */jsx(FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        helperText,
+        required,
+        size,
+        knobProps,
+        onBlur: mergeFieldHandler(field, "handleBlur", onBlur),
+        disabled,
+        children: control(fieldValue, newValue => {
+          field.handleChange(newValue);
+          emitValueChange(newValue);
+        }, resolvedError)
+      });
+    }
+  });
+}
+export { DRAWN_ICON_NAMES2 as DRAWN_ICON_NAMES, DrawnIcon2 as DrawnIcon, Icon, filterDrawnIcons2 as filterDrawnIcons, isDrawnIconName2 as isDrawnIconName, parseIconOptions2 as parseIconOptions, resolveIconCatalog2 as resolveIconCatalog };
+//# sourceMappingURL=index.mjs.map