@dloizides/ui-forms 1.13.4 → 1.14.0

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import React2, { useState, useCallback, useMemo, useRef, useEffect, useLayoutEffect } from 'react';
-import { Platform, StyleSheet, TextInput, View, Text, Switch, Pressable, ScrollView, TouchableOpacity } from 'react-native';
+import React2, { useState, useCallback, useMemo, useEffect, useRef, useLayoutEffect } from 'react';
+import { Platform, StyleSheet, TextInput, View, Text, ScrollView, Pressable, Switch, TouchableOpacity } from 'react-native';
 import { useUi } from '@dloizides/ui-feedback';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from '@dloizides/ui-buttons';
-import { MIN_TOUCH_TARGET_PX } from '@dloizides/a11y';
 import { createPortal } from 'react-dom';
+import { MIN_TOUCH_TARGET_PX } from '@dloizides/a11y';
 
 // src/Field/Field.tsx
 function attachControlId(child, candidateId, describedById) {
@@ -459,6 +459,142 @@ var controlStyles = StyleSheet.create({
   error: { fontSize: ERROR_FONT, marginTop: ERROR_GAP }
 });
 var IS_WEB3 = Platform.OS === "web";
+var MENU_PORTAL_Z_INDEX = 1e3;
+var MENU_TOP_GAP2 = 4;
+function toDomNode(ref) {
+  const node = ref.current;
+  if (node === null || typeof node.getBoundingClientRect !== "function") return null;
+  return node;
+}
+function readAnchorRect(ref) {
+  if (!IS_WEB3) return null;
+  const node = toDomNode(ref);
+  if (node === null) return null;
+  const r = node.getBoundingClientRect();
+  return { top: r.top, left: r.left, width: r.width, bottom: r.bottom };
+}
+function buildPortalPopoverStyle(rect) {
+  return {
+    // RN's ViewStyle union omits 'fixed', but react-native-web honours it at runtime.
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- web-only position value
+    position: "fixed",
+    top: rect.bottom + MENU_TOP_GAP2,
+    left: rect.left,
+    width: rect.width,
+    zIndex: MENU_PORTAL_Z_INDEX
+  };
+}
+function useAnchorRect(ref, enabled) {
+  const [rect, setRect] = useState(null);
+  useLayoutEffect(() => {
+    if (!IS_WEB3 || !enabled) {
+      setRect(null);
+      return void 0;
+    }
+    let frame = null;
+    let disposed = false;
+    const apply = () => {
+      frame = null;
+      if (disposed) return;
+      setRect(readAnchorRect(ref));
+    };
+    const schedule = () => {
+      if (frame !== null) return;
+      frame = window.requestAnimationFrame(apply);
+    };
+    apply();
+    document.addEventListener("scroll", schedule, true);
+    window.addEventListener("resize", schedule);
+    const node = toDomNode(ref);
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(schedule) : null;
+    if (observer !== null) {
+      if (node !== null) observer.observe(node);
+      observer.observe(document.body);
+    }
+    return () => {
+      disposed = true;
+      if (frame !== null) window.cancelAnimationFrame(frame);
+      document.removeEventListener("scroll", schedule, true);
+      window.removeEventListener("resize", schedule);
+      if (observer !== null) observer.disconnect();
+    };
+  }, [ref, enabled]);
+  return IS_WEB3 && enabled ? rect : null;
+}
+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,
+  accessibilityLabel,
+  testID,
+  anchorRef,
+  usePortal = true
+}) {
+  const menuRef = React2.useRef(null);
+  useDismiss(anchorRef, menuRef, onDismiss);
+  const rect = useAnchorRect(anchorRef, usePortal);
+  const portalStyle = rect !== null ? buildPortalPopoverStyle(rect) : null;
+  const menu = /* @__PURE__ */ jsx(
+    View,
+    {
+      ref: menuRef,
+      accessibilityLabel,
+      accessibilityRole: "menu",
+      style: [controlStyles.menu, { borderColor: colors.border, backgroundColor: colors.surface }, portalStyle],
+      testID: `${testID}-menu`,
+      children: /* @__PURE__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", nestedScrollEnabled: true, 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
+        );
+      }) })
+    }
+  );
+  if (usePortal && IS_WEB4) return createPortal(menu, document.body);
+  return menu;
+}
+var IS_WEB5 = Platform.OS === "web";
 var TRANSITION_PROPERTY = "border-color, background-color, box-shadow";
 var TRANSITION_DURATION = "0.14s";
 var TRANSITION_TIMING = "ease";
@@ -474,7 +610,7 @@ var GREEN_START = 3;
 var BLUE_START = 5;
 var CHANNEL_END_OFFSET = 2;
 function prefersReducedMotion() {
-  if (!IS_WEB3 || typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  if (!IS_WEB5 || typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 function withAlpha(color, alpha) {
@@ -517,7 +653,7 @@ function useThemedInput(options = {}) {
     const borderColor = isFocused ? focusBorder : isHovered ? withAlpha(colors.text, HOVER_BORDER_ALPHA) : restBorder;
     const backgroundColor = isFocused ? colors.surface : colors.surfaceElevated;
     const base = { color: colors.text, borderColor, backgroundColor };
-    if (!IS_WEB3) return base;
+    if (!IS_WEB5) return base;
     const ringColor = hasError ? errorColor : primary;
     const ring = isFocused ? `0 0 0 ${FOCUS_RING_WIDTH}px ${withAlpha(ringColor, FOCUS_RING_ALPHA)}` : "none";
     const webStyle = {
@@ -542,7 +678,7 @@ function useThemedInput(options = {}) {
   ]);
   const focusBind = useMemo(() => ({ onFocus: handleFocus, onBlur: handleBlur }), [handleFocus, handleBlur]);
   const hoverBind = useMemo(
-    () => IS_WEB3 ? { onMouseEnter: handleHoverIn, onMouseLeave: handleHoverOut } : {},
+    () => IS_WEB5 ? { onMouseEnter: handleHoverIn, onMouseLeave: handleHoverOut } : {},
     [handleHoverIn, handleHoverOut]
   );
   return {
@@ -554,9 +690,9 @@ function useThemedInput(options = {}) {
     hoverBind
   };
 }
-var IS_WEB4 = Platform.OS === "web";
+var IS_WEB6 = Platform.OS === "web";
 function webFieldA11y({ describedById, hasError = false, required = false }) {
-  if (!IS_WEB4) {
+  if (!IS_WEB6) {
     return {};
   }
   return {
@@ -606,12 +742,187 @@ var ThemedTextInput = React2.forwardRef(function ThemedTextInput2({
     }
   );
 });
+
+// src/useRecentValues/recentValuesCore.ts
+var STORAGE_PREFIX = "@dloizides/ui-forms:recent:";
+var DEFAULT_MAX_RECENTS = 10;
+function recentStorageKey(key) {
+  return `${STORAGE_PREFIX}${key}`;
+}
+function getStorage() {
+  try {
+    if (typeof window === "undefined") return null;
+    const storage = window.localStorage;
+    return storage !== null && storage !== void 0 ? storage : null;
+  } catch {
+    return null;
+  }
+}
+function readRecents(key) {
+  const storage = getStorage();
+  if (storage === null) return [];
+  try {
+    const raw = storage.getItem(recentStorageKey(key));
+    if (raw === null) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((entry) => typeof entry === "string");
+  } catch {
+    return [];
+  }
+}
+function writeRecents(key, values) {
+  const storage = getStorage();
+  if (storage === null) return;
+  try {
+    storage.setItem(recentStorageKey(key), JSON.stringify(values));
+  } catch {
+  }
+}
+function clearRecents(key) {
+  const storage = getStorage();
+  if (storage === null) return;
+  try {
+    storage.removeItem(recentStorageKey(key));
+  } catch {
+  }
+}
+function computeNextRecents(current, value, max) {
+  const trimmed = value.trim();
+  if (trimmed === "") return [...current];
+  const lower = trimmed.toLowerCase();
+  const withoutMatch = current.filter((entry) => entry.toLowerCase() !== lower);
+  const promoted = [trimmed, ...withoutMatch];
+  const cap = max > 0 ? max : 0;
+  return promoted.slice(0, cap);
+}
+function recentsEqual(a, b) {
+  if (a.length !== b.length) return false;
+  return a.every((entry, index) => entry === b[index]);
+}
+
+// src/useRecentValues/useRecentValues.ts
+function useRecentValues(key, max = DEFAULT_MAX_RECENTS) {
+  const [recents, setRecents] = useState(() => readRecents(key).slice(0, max));
+  useEffect(() => {
+    setRecents(readRecents(key).slice(0, max));
+  }, [key, max]);
+  const remember = useCallback(
+    (value) => {
+      setRecents((current) => {
+        const next = computeNextRecents(current, value, max);
+        if (recentsEqual(next, current)) return current;
+        writeRecents(key, next);
+        return next;
+      });
+    },
+    [key, max]
+  );
+  const clear = useCallback(() => {
+    clearRecents(key);
+    setRecents([]);
+  }, [key]);
+  return { recents, remember, clear };
+}
+var CLOSE_DELAY_MS = 140;
+function RecentInputField({
+  recentKey,
+  recentMax,
+  label,
+  value,
+  testID,
+  onChangeText,
+  onSubmitEditing,
+  onFocus,
+  onBlur,
+  ...rest
+}) {
+  const { theme } = useUi();
+  const { colors, palette } = theme;
+  const { recents, remember } = useRecentValues(recentKey, recentMax);
+  const anchorRef = useRef(null);
+  const latestText = useRef(typeof value === "string" ? value : "");
+  const [isOpen, setIsOpen] = useState(false);
+  const handleChange = useCallback(
+    (text) => {
+      latestText.current = text;
+      onChangeText?.(text);
+    },
+    [onChangeText]
+  );
+  const handleFocus = useCallback(
+    (event) => {
+      setIsOpen(true);
+      onFocus?.(event);
+    },
+    [onFocus]
+  );
+  const handleBlur = useCallback(
+    (event) => {
+      if (latestText.current.trim() !== "") remember(latestText.current);
+      setTimeout(() => setIsOpen(false), CLOSE_DELAY_MS);
+      onBlur?.(event);
+    },
+    [remember, onBlur]
+  );
+  const handleSubmit = useCallback(
+    (event) => {
+      remember(latestText.current);
+      setIsOpen(false);
+      onSubmitEditing?.(event);
+    },
+    [remember, onSubmitEditing]
+  );
+  const pick = useCallback(
+    (picked) => {
+      latestText.current = picked;
+      onChangeText?.(picked);
+      remember(picked);
+      setIsOpen(false);
+    },
+    [onChangeText, remember]
+  );
+  const options = recents.map((entry) => ({ label: entry, value: entry }));
+  const showMenu = isOpen && options.length > 0;
+  const recentTestID = testID !== void 0 ? `${testID}-recent` : "form-field-recent";
+  return /* @__PURE__ */ jsxs(View, { ref: anchorRef, style: controlStyles.anchor, children: [
+    /* @__PURE__ */ jsx(
+      ThemedTextInput,
+      {
+        ...rest,
+        testID,
+        value,
+        onChangeText: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onSubmitEditing: handleSubmit
+      }
+    ),
+    showMenu ? /* @__PURE__ */ jsx(
+      AnchoredMenu,
+      {
+        accessibilityLabel: `Recent ${label} values`,
+        anchorRef,
+        colors: { text: colors.text, border: colors.border, surface: colors.surface, brand: palette.primary["500"] },
+        onDismiss: () => setIsOpen(false),
+        onSelect: pick,
+        optionHint: `Fill ${label} with this recent value`,
+        options,
+        selectedValue: typeof value === "string" ? value : "",
+        testID: recentTestID,
+        usePortal: true
+      }
+    ) : null
+  ] });
+}
 var FormField = ({
   label,
   labelHidden = false,
   required = false,
   error,
   containerStyle,
+  recentKey,
+  recentMax,
   ...textInputProps
 }) => /* @__PURE__ */ jsx(
   Field,
@@ -620,9 +931,8 @@ var FormField = ({
     error,
     label: labelHidden ? void 0 : label,
     required,
-    children: ({ describedById, hasError, controlId }) => /* @__PURE__ */ jsx(
-      ThemedTextInput,
-      {
+    children: ({ describedById, hasError, controlId }) => {
+      const inputProps = {
         accessibilityHint: `Enter ${label}`,
         accessibilityLabel: label,
         describedById,
@@ -631,8 +941,9 @@ var FormField = ({
         requiredField: required,
         testID: "form-field-input",
         ...textInputProps
-      }
-    )
+      };
+      return recentKey !== void 0 && recentKey !== "" ? /* @__PURE__ */ jsx(RecentInputField, { label, recentKey, recentMax, ...inputProps }) : /* @__PURE__ */ jsx(ThemedTextInput, { ...inputProps });
+    }
   }
 );
 var TRANSPARENT_COLOR = "transparent";
@@ -1003,140 +1314,6 @@ var FormCheckbox = ({
     }
   );
 };
-var IS_WEB5 = Platform.OS === "web";
-var MENU_PORTAL_Z_INDEX = 1e3;
-var MENU_TOP_GAP2 = 4;
-function toDomNode(ref) {
-  const node = ref.current;
-  if (node === null || typeof node.getBoundingClientRect !== "function") return null;
-  return node;
-}
-function readAnchorRect(ref) {
-  if (!IS_WEB5) return null;
-  const node = toDomNode(ref);
-  if (node === null) return null;
-  const r = node.getBoundingClientRect();
-  return { top: r.top, left: r.left, width: r.width, bottom: r.bottom };
-}
-function buildPortalPopoverStyle(rect) {
-  return {
-    // RN's ViewStyle union omits 'fixed', but react-native-web honours it at runtime.
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- web-only position value
-    position: "fixed",
-    top: rect.bottom + MENU_TOP_GAP2,
-    left: rect.left,
-    width: rect.width,
-    zIndex: MENU_PORTAL_Z_INDEX
-  };
-}
-function useAnchorRect(ref, enabled) {
-  const [rect, setRect] = useState(null);
-  useLayoutEffect(() => {
-    if (!IS_WEB5 || !enabled) {
-      setRect(null);
-      return void 0;
-    }
-    let frame = null;
-    let disposed = false;
-    const apply = () => {
-      frame = null;
-      if (disposed) return;
-      setRect(readAnchorRect(ref));
-    };
-    const schedule = () => {
-      if (frame !== null) return;
-      frame = window.requestAnimationFrame(apply);
-    };
-    apply();
-    document.addEventListener("scroll", schedule, true);
-    window.addEventListener("resize", schedule);
-    const node = toDomNode(ref);
-    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(schedule) : null;
-    if (observer !== null) {
-      if (node !== null) observer.observe(node);
-      observer.observe(document.body);
-    }
-    return () => {
-      disposed = true;
-      if (frame !== null) window.cancelAnimationFrame(frame);
-      document.removeEventListener("scroll", schedule, true);
-      window.removeEventListener("resize", schedule);
-      if (observer !== null) observer.disconnect();
-    };
-  }, [ref, enabled]);
-  return IS_WEB5 && enabled ? rect : null;
-}
-var IS_WEB6 = typeof document !== "undefined";
-var ESCAPE_KEY = "Escape";
-var ACTIVE_WEIGHT = "700";
-var IDLE_WEIGHT = "400";
-function useDismiss(anchorRef, menuRef, onDismiss) {
-  useEffect(() => {
-    if (!IS_WEB6) 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,
-  usePortal = true
-}) {
-  const menuRef = React2.useRef(null);
-  useDismiss(anchorRef, menuRef, onDismiss);
-  const rect = useAnchorRect(anchorRef, usePortal);
-  const portalStyle = rect !== null ? buildPortalPopoverStyle(rect) : null;
-  const menu = /* @__PURE__ */ jsx(
-    View,
-    {
-      ref: menuRef,
-      accessibilityRole: "menu",
-      style: [controlStyles.menu, { borderColor: colors.border, backgroundColor: colors.surface }, portalStyle],
-      testID: `${testID}-menu`,
-      children: /* @__PURE__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", nestedScrollEnabled: true, 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
-        );
-      }) })
-    }
-  );
-  if (usePortal && IS_WEB6) return createPortal(menu, document.body);
-  return menu;
-}
 var CHEVRON_DOWN = "\u25BE";
 var CHEVRON_UP = "\u25B4";
 function SelectControl({
@@ -1238,7 +1415,7 @@ function isUnmatched(options, text) {
   if (needle === "") return false;
   return !options.some((o) => o.value.toLowerCase() === needle || o.label.toLowerCase() === needle);
 }
-var CLOSE_DELAY_MS = 140;
+var CLOSE_DELAY_MS2 = 140;
 var DEFAULT_TYPEAHEAD_MIN_CHARS = 1;
 var DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS = 8;
 function TypeaheadControl({
@@ -1282,7 +1459,7 @@ function TypeaheadControl({
     [options, onChange]
   );
   const handleBlur = useCallback(() => {
-    setTimeout(() => setIsOpen(false), CLOSE_DELAY_MS);
+    setTimeout(() => setIsOpen(false), CLOSE_DELAY_MS2);
   }, []);
   const handleSubmit = useCallback(() => {
     setIsOpen(false);
@@ -1399,6 +1576,6 @@ function DateRangeControl({
   ] });
 }
 
-export { AnchoredMenu, ChipSelector, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, Field, FormActions, FormCell, FormCheckbox, FormField, FormGrid, FormSection, FormSwitch, SelectControl, ThemedTextInput, TypeaheadControl, controlStyles, isUnmatched, suggestOptions, useThemedInput };
+export { AnchoredMenu, ChipSelector, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, Field, FormActions, FormCell, FormCheckbox, FormField, FormGrid, FormSection, FormSwitch, SelectControl, ThemedTextInput, TypeaheadControl, controlStyles, isUnmatched, suggestOptions, useRecentValues, useThemedInput };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map