@dloizides/ui-forms 1.7.0 → 1.8.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
 import { StyleSheet, Platform, TextInput, View, Text, Switch, Pressable, TouchableOpacity } from 'react-native';
 import { useUi } from '@dloizides/ui-feedback';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -713,7 +713,406 @@ var FormCheckbox = ({
     }
   );
 };
+var FIELD_GAP = 4;
+var LABEL_FONT = 11;
+var LABEL_LETTER_SPACING = 0.4;
+var INPUT_RADIUS = 8;
+var INPUT_PAD_H = 12;
+var INPUT_PAD_V = 10;
+var INPUT_FONT = 14;
+var INPUT_BORDER = 1;
+var DATE_ROW_GAP = 8;
+var CHEVRON_FONT = 10;
+var MENU_TOP_GAP = 4;
+var MENU_RADIUS = 8;
+var MENU_PAD_V = 4;
+var MENU_OPT_PAD_H = 12;
+var MENU_OPT_PAD_V = 8;
+var MENU_MIN_WIDTH = 160;
+var MENU_MAX_HEIGHT = 260;
+var MENU_Z = 1e3;
+var MENU_ELEVATION = 8;
+var MENU_BOX_SHADOW = "0px 2px 8px rgba(0, 0, 0, 0.15)";
+var OPTION_FONT = 14;
+var ERROR_FONT = 12;
+var ERROR_GAP = 3;
+var controlStyles = StyleSheet.create({
+  /** The shared bordered box every dense text control renders in. */
+  input: {
+    borderWidth: INPUT_BORDER,
+    borderRadius: INPUT_RADIUS,
+    paddingHorizontal: INPUT_PAD_H,
+    paddingVertical: INPUT_PAD_V,
+    fontSize: INPUT_FONT
+  },
+  /** The select trigger: a bordered field box matching the text inputs + a chevron. */
+  selectTrigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: DATE_ROW_GAP,
+    borderWidth: INPUT_BORDER,
+    borderRadius: INPUT_RADIUS,
+    paddingHorizontal: INPUT_PAD_H,
+    paddingVertical: INPUT_PAD_V
+  },
+  selectTriggerText: { fontSize: INPUT_FONT, flexShrink: 1 },
+  chevron: { fontSize: CHEVRON_FONT },
+  dateRow: { flexDirection: "row", gap: DATE_ROW_GAP },
+  dateCol: { gap: FIELD_GAP, flex: 1 },
+  /**
+   * The micro-caption above a sub-control (a date range's From/To) and beside a switch. Note it
+   * is deliberately NOT the `control` label voice: it carries no `700`/uppercase, because it
+   * names a HALF of a control that already has a `control`-voice label above it. Uppercasing it
+   * too would make one field shout twice.
+   */
+  subLabel: { fontSize: LABEL_FONT, letterSpacing: LABEL_LETTER_SPACING },
+  /** Positioning context for a floating `AnchoredMenu` (`position:absolute; top:100%`). */
+  anchor: { position: "relative" },
+  menu: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    marginTop: MENU_TOP_GAP,
+    minWidth: MENU_MIN_WIDTH,
+    maxHeight: MENU_MAX_HEIGHT,
+    borderWidth: INPUT_BORDER,
+    borderRadius: MENU_RADIUS,
+    paddingVertical: MENU_PAD_V,
+    zIndex: MENU_Z,
+    boxShadow: MENU_BOX_SHADOW,
+    elevation: MENU_ELEVATION,
+    overflow: "hidden"
+  },
+  option: { paddingHorizontal: MENU_OPT_PAD_H, paddingVertical: MENU_OPT_PAD_V },
+  optionText: { fontSize: OPTION_FONT },
+  error: { fontSize: ERROR_FONT, marginTop: ERROR_GAP }
+});
+var IS_WEB4 = typeof document !== "undefined";
+var ESCAPE_KEY = "Escape";
+var ACTIVE_WEIGHT = "700";
+var IDLE_WEIGHT = "400";
+function useDismiss(anchorRef, menuRef, onDismiss) {
+  useEffect(() => {
+    if (!IS_WEB4) return void 0;
+    const onMouseDown = (event) => {
+      const anchorNode = anchorRef.current;
+      const menuNode = menuRef.current;
+      const target = event.target instanceof Node ? event.target : null;
+      const insideAnchor = anchorNode !== null && target !== null && anchorNode.contains(target);
+      const insideMenu = menuNode !== null && target !== null && menuNode.contains(target);
+      if (!insideAnchor && !insideMenu) onDismiss();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === ESCAPE_KEY) onDismiss();
+    };
+    document.addEventListener("mousedown", onMouseDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onMouseDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [anchorRef, menuRef, onDismiss]);
+}
+function AnchoredMenu({
+  options,
+  selectedValue,
+  onSelect,
+  onDismiss,
+  colors,
+  optionHint,
+  testID,
+  anchorRef
+}) {
+  const menuRef = React.useRef(null);
+  useDismiss(anchorRef, menuRef, onDismiss);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ref: menuRef,
+      accessibilityRole: "menu",
+      style: [controlStyles.menu, { borderColor: colors.border, backgroundColor: colors.surface }],
+      testID: `${testID}-menu`,
+      children: options.map((opt) => {
+        const active = opt.value === selectedValue;
+        return /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "menuitem",
+            accessibilityLabel: opt.label,
+            accessibilityHint: optionHint,
+            accessibilityState: { selected: active },
+            "aria-selected": active,
+            onPress: () => onSelect(opt.value),
+            style: controlStyles.option,
+            testID: `${testID}-option-${opt.value}`,
+            children: /* @__PURE__ */ jsx(Text, { style: [controlStyles.optionText, { color: active ? colors.brand : colors.text, fontWeight: active ? ACTIVE_WEIGHT : IDLE_WEIGHT }], children: opt.label })
+          },
+          opt.value
+        );
+      })
+    }
+  );
+}
+var CHEVRON_DOWN = "\u25BE";
+var CHEVRON_UP = "\u25B4";
+function SelectControl({
+  options,
+  value,
+  onChange,
+  placeholder = "",
+  accessibilityLabel,
+  accessibilityHint,
+  optionHint = "",
+  style,
+  testID
+}) {
+  const { theme } = useUi();
+  const { colors, palette } = theme;
+  const anchorRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const selectedLabel = useMemo(() => {
+    const found = options.find((o) => o.value === value);
+    return found?.label ?? placeholder;
+  }, [options, placeholder, value]);
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const toggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+  const select = useCallback(
+    (next) => {
+      onChange(next);
+      setIsOpen(false);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs(View, { ref: anchorRef, style: [controlStyles.anchor, style], children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel,
+        accessibilityHint,
+        accessibilityState: { expanded: isOpen },
+        "aria-expanded": isOpen,
+        onPress: toggle,
+        style: [controlStyles.selectTrigger, { borderColor: colors.border, backgroundColor: colors.surface }],
+        testID: `${testID}-trigger`,
+        children: [
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [controlStyles.selectTriggerText, { color: value === "" ? colors.textSecondary : colors.text }], children: selectedLabel }),
+          /* @__PURE__ */ jsx(Text, { "aria-hidden": true, style: [controlStyles.chevron, { color: colors.textSecondary }], children: isOpen ? CHEVRON_UP : CHEVRON_DOWN })
+        ]
+      }
+    ),
+    isOpen ? /* @__PURE__ */ jsx(
+      AnchoredMenu,
+      {
+        options,
+        selectedValue: value,
+        onSelect: select,
+        onDismiss: close,
+        colors: { text: colors.text, border: colors.border, surface: colors.surface, brand: palette.primary["500"] },
+        optionHint,
+        testID,
+        anchorRef
+      }
+    ) : null
+  ] });
+}
+
+// src/controls/suggestOptions.ts
+var RANK_VALUE_EXACT = 0;
+var RANK_VALUE_PREFIX = 1;
+var RANK_LABEL_PREFIX = 2;
+var RANK_LABEL_CONTAINS = 3;
+var NO_MATCH = -1;
+function rankOf(option, needle) {
+  const value = option.value.toLowerCase();
+  const label = option.label.toLowerCase();
+  if (value === needle) return RANK_VALUE_EXACT;
+  if (value.startsWith(needle)) return RANK_VALUE_PREFIX;
+  if (label.startsWith(needle)) return RANK_LABEL_PREFIX;
+  if (label.includes(needle)) return RANK_LABEL_CONTAINS;
+  return NO_MATCH;
+}
+function suggestOptions(options, query, minChars, limit) {
+  const needle = query.trim().toLowerCase();
+  if (needle.length < minChars) return [];
+  const scored = [];
+  for (const option of options) {
+    const rank = rankOf(option, needle);
+    if (rank !== NO_MATCH) scored.push({ option, rank });
+  }
+  scored.sort((a, b) => a.rank !== b.rank ? a.rank - b.rank : a.option.label.localeCompare(b.option.label));
+  return scored.slice(0, limit).map((entry) => entry.option);
+}
+function isUnmatched(options, text) {
+  const needle = text.trim().toLowerCase();
+  if (needle === "") return false;
+  return !options.some((o) => o.value.toLowerCase() === needle || o.label.toLowerCase() === needle);
+}
+var CLOSE_DELAY_MS = 140;
+var DEFAULT_TYPEAHEAD_MIN_CHARS = 1;
+var DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS = 8;
+function TypeaheadControl({
+  options,
+  value,
+  onChange,
+  onSubmit,
+  placeholder,
+  accessibilityLabel,
+  accessibilityHint,
+  optionHint = "",
+  error,
+  minChars = DEFAULT_TYPEAHEAD_MIN_CHARS,
+  maxSuggestions = DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS,
+  style,
+  testID
+}) {
+  const { theme } = useUi();
+  const { colors, palette, semantic } = theme;
+  const anchorRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const exactPick = useMemo(() => options.some((o) => o.label === value), [options, value]);
+  const suggestions = useMemo(
+    () => exactPick ? [] : suggestOptions(options, value, minChars, maxSuggestions),
+    [exactPick, options, value, minChars, maxSuggestions]
+  );
+  const showMenu = isOpen && suggestions.length > 0;
+  const handleChange = useCallback(
+    (next) => {
+      onChange(next);
+      setIsOpen(true);
+    },
+    [onChange]
+  );
+  const pick = useCallback(
+    (optionValue) => {
+      const opt = options.find((o) => o.value === optionValue);
+      onChange(opt?.label ?? optionValue);
+      setIsOpen(false);
+    },
+    [options, onChange]
+  );
+  const handleBlur = useCallback(() => {
+    setTimeout(() => setIsOpen(false), CLOSE_DELAY_MS);
+  }, []);
+  const handleSubmit = useCallback(() => {
+    setIsOpen(false);
+    onSubmit?.();
+  }, [onSubmit]);
+  const hasError = error !== void 0 && error !== "";
+  return /* @__PURE__ */ jsxs(View, { ref: anchorRef, style: [controlStyles.anchor, style], children: [
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        accessibilityLabel,
+        accessibilityHint,
+        autoCapitalize: "none",
+        autoCorrect: false,
+        placeholder,
+        placeholderTextColor: colors.textSecondary,
+        spellCheck: false,
+        value,
+        onChangeText: handleChange,
+        onFocus: () => setIsOpen(true),
+        onBlur: handleBlur,
+        onSubmitEditing: handleSubmit,
+        style: [controlStyles.input, { borderColor: hasError ? semantic.error["500"] : colors.border, backgroundColor: colors.surface, color: colors.text }],
+        testID: `${testID}-input`
+      }
+    ),
+    showMenu ? /* @__PURE__ */ jsx(
+      AnchoredMenu,
+      {
+        options: suggestions,
+        selectedValue: value,
+        onSelect: pick,
+        onDismiss: () => setIsOpen(false),
+        colors: { text: colors.text, border: colors.border, surface: colors.surface, brand: palette.primary["500"] },
+        optionHint,
+        testID,
+        anchorRef
+      }
+    ) : null,
+    hasError ? /* @__PURE__ */ jsx(Text, { role: "alert", style: [controlStyles.error, { color: semantic.error["500"] }], testID: `${testID}-error`, children: error }) : null
+  ] });
+}
+var WEB_DATE_PROPS = typeof document !== "undefined" ? { type: "date" } : {};
+function DateInput(p) {
+  return /* @__PURE__ */ jsxs(View, { style: controlStyles.dateCol, children: [
+    /* @__PURE__ */ jsx(Text, { style: [controlStyles.subLabel, { color: p.muted }], children: p.label }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        accessibilityLabel: p.label,
+        accessibilityHint: p.hint,
+        placeholder: p.placeholder,
+        placeholderTextColor: p.muted,
+        value: p.value,
+        onChangeText: p.onChangeText,
+        onSubmitEditing: p.onSubmit,
+        style: [controlStyles.input, { borderColor: p.border, backgroundColor: p.surface, color: p.color }],
+        testID: `${p.testID}-${p.side}`,
+        ...WEB_DATE_PROPS
+      }
+    )
+  ] });
+}
+function DateRangeControl({
+  value,
+  onChange,
+  onSubmit,
+  fromLabel,
+  toLabel,
+  fromPlaceholder,
+  toPlaceholder,
+  accessibilityHint,
+  style,
+  testID
+}) {
+  const { theme } = useUi();
+  const { colors } = theme;
+  return /* @__PURE__ */ jsxs(View, { style: [controlStyles.dateRow, style], testID: `${testID}-range`, children: [
+    /* @__PURE__ */ jsx(
+      DateInput,
+      {
+        side: "from",
+        label: fromLabel,
+        placeholder: fromPlaceholder,
+        value: value.from,
+        color: colors.text,
+        border: colors.border,
+        surface: colors.surface,
+        muted: colors.textSecondary,
+        hint: accessibilityHint,
+        testID,
+        onChangeText: (from) => onChange({ from, to: value.to }),
+        onSubmit
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DateInput,
+      {
+        side: "to",
+        label: toLabel,
+        placeholder: toPlaceholder,
+        value: value.to,
+        color: colors.text,
+        border: colors.border,
+        surface: colors.surface,
+        muted: colors.textSecondary,
+        hint: accessibilityHint,
+        testID,
+        onChangeText: (to) => onChange({ from: value.from, to }),
+        onSubmit
+      }
+    )
+  ] });
+}
 
-export { ChipSelector, DEFAULT_OPTIONAL_LABEL, Field, FormActions, FormCheckbox, FormField, FormSwitch, ThemedTextInput, useThemedInput };
+export { AnchoredMenu, ChipSelector, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, Field, FormActions, FormCheckbox, FormField, FormSwitch, SelectControl, ThemedTextInput, TypeaheadControl, controlStyles, isUnmatched, suggestOptions, useThemedInput };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map