@dloizides/ui-forms 1.18.7 → 1.20.0

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import React2, { useState, useCallback, useMemo, useEffect, useRef, useLayoutEffect } from 'react';
-import { Platform, StyleSheet, TextInput, View, Text, ScrollView, Pressable, Switch, TouchableOpacity } from 'react-native';
+import { Platform, StyleSheet, TextInput, View, Text, useWindowDimensions, ScrollView, Pressable, Switch, TouchableOpacity } from 'react-native';
 import { useUi } from '@dloizides/ui-feedback';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Z_INDEX, focusRingOutline, readableScaleInk } from '@dloizides/design-tokens';
 import { themeFocusRingColor, Button } from '@dloizides/ui-buttons';
 import { createPortal } from 'react-dom';
 import { MIN_TOUCH_TARGET_PX } from '@dloizides/a11y';
-import { Z_INDEX, focusRingOutline } from '@dloizides/design-tokens';
 
 // src/Field/Field.tsx
 function attachControlId(child, candidateId, describedById) {
@@ -140,6 +140,11 @@ function useFormGridMetrics() {
 function useIsGapOwned() {
   return React2.useContext(GapOwnedContext);
 }
+var ERROR_LIGHT_STEPS = ["500", "600", "700"];
+var ERROR_DARK_STEPS = ["300", "200", "400", "100", "500"];
+function fieldErrorInk(theme) {
+  return readableScaleInk({ ...theme.semantic.error }, theme.colors.surface, ERROR_LIGHT_STEPS, ERROR_DARK_STEPS);
+}
 var ERROR_FONT_SIZE = 12;
 var HINT_FONT_SIZE = 12;
 var OPTIONAL_MARK_FONT_WEIGHT = "400";
@@ -195,8 +200,8 @@ var Field = ({
   const { theme } = useUi();
   const gapOwned = useIsGapOwned();
   const spacingStyles = fieldSpacingStyleSet(resolveFieldSpacing(spacing, gapOwned));
-  const { colors, semantic } = theme;
-  const errorColor = semantic.error["500"];
+  const { colors } = theme;
+  const errorColor = fieldErrorInk(theme);
   const hasError = hasFieldError(error);
   const hasHint = isPresent(hint);
   const labelText = label ?? "";
@@ -242,6 +247,7 @@ var FORM_GRID_DEFAULT_MIN_WIDTH = 220;
 var FORM_GRID_DEFAULT_BASIS = 260;
 var styles2 = StyleSheet.create({
   grid: {
+    alignItems: "flex-start",
     flexDirection: "row",
     flexWrap: "wrap"
   }
@@ -257,6 +263,36 @@ var FormGrid = ({
   const metrics = React2.useMemo(() => ({ minWidth, basis }), [minWidth, basis]);
   return /* @__PURE__ */ jsx(FormGridProvider, { value: metrics, children: /* @__PURE__ */ jsx(GapOwnedProvider, { value: true, children: /* @__PURE__ */ jsx(View, { style: [styles2.grid, { gap }, style], testID, children }) }) });
 };
+var LABEL_LINE_PLACEHOLDER = "\xA0";
+var styles3 = StyleSheet.create({
+  labelLine: {
+    userSelect: "none"
+  }
+});
+var AlignToControl = ({
+  children,
+  labelVariant,
+  spacing,
+  style,
+  testID
+}) => {
+  const spacingStyles = fieldSpacingStyleSet(resolveFieldSpacing(spacing, useIsGapOwned()));
+  const labelLineTestID = testID !== void 0 ? `${testID}-label-line` : void 0;
+  return /* @__PURE__ */ jsxs(View, { style: [spacingStyles.container, style], testID, children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        accessibilityElementsHidden: true,
+        "aria-hidden": true,
+        importantForAccessibility: "no",
+        style: [spacingStyles.label, resolveLabelVariantStyle(labelVariant), styles3.labelLine],
+        testID: labelLineTestID,
+        children: LABEL_LINE_PLACEHOLDER
+      }
+    ),
+    children
+  ] });
+};
 var GROW = 1;
 var NO_GROW = 0;
 var FormCell = ({
@@ -264,6 +300,7 @@ var FormCell = ({
   minWidth,
   basis,
   grow = true,
+  alignToControl = false,
   style,
   testID
 }) => {
@@ -275,11 +312,54 @@ var FormCell = ({
     flexBasis: resolvedBasis,
     flexGrow: grow ? GROW : NO_GROW
   };
-  return /* @__PURE__ */ jsx(View, { style: [cellStyle, style], testID, children });
+  return /* @__PURE__ */ jsx(View, { style: [cellStyle, style], testID, children: alignToControl ? /* @__PURE__ */ jsx(AlignToControl, { children }) : children });
+};
+
+// src/InlineFieldRow/inlineFieldRowLayout.ts
+var INLINE_FIELD_ROW_MIN_WIDTH = 1024;
+function inlineFieldRowLayout(windowWidth, fieldMaxWidth, inlineMinWidth = INLINE_FIELD_ROW_MIN_WIDTH) {
+  const inline = windowWidth >= inlineMinWidth;
+  return { inline, fieldMaxWidth: inline ? fieldMaxWidth : void 0 };
+}
+var styles4 = StyleSheet.create({
+  action: {
+    flexShrink: 0
+  },
+  field: {
+    flexBasis: 0,
+    flexGrow: 1,
+    flexShrink: 1
+  },
+  row: {
+    alignItems: "flex-start",
+    flexDirection: "row"
+  }
+});
+var InlineFieldRow = ({
+  field,
+  action,
+  fieldMaxWidth,
+  inlineMinWidth,
+  gap = FORM_GRID_DEFAULT_GAP,
+  testID
+}) => {
+  const { width } = useWindowDimensions();
+  const layout = inlineFieldRowLayout(width, fieldMaxWidth, inlineMinWidth);
+  const rowStyle = useMemo(() => [styles4.row, { gap }], [gap]);
+  const fieldStyle = useMemo(() => [styles4.field, { maxWidth: layout.fieldMaxWidth }], [layout.fieldMaxWidth]);
+  if (!layout.inline)
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      field,
+      action
+    ] });
+  return /* @__PURE__ */ jsxs(View, { style: rowStyle, testID, children: [
+    /* @__PURE__ */ jsx(View, { style: fieldStyle, children: field }),
+    /* @__PURE__ */ jsx(AlignToControl, { style: styles4.action, children: action })
+  ] });
 };
 var SECTION_GAP = 10;
 var DESCRIPTION_FONT_SIZE = 12;
-var styles3 = StyleSheet.create({
+var styles5 = StyleSheet.create({
   section: {
     gap: SECTION_GAP
   },
@@ -314,7 +394,7 @@ var FormSection = ({
     // The section spaces its children with `gap`, so it owns their vertical rhythm exactly as a
     // `FormGrid` owns a row's — without this a `Field` placed directly in a section would stack its
     // 16px margin on the section's gap and recreate the F3 bug one level up.
-    /* @__PURE__ */ jsx(GapOwnedProvider, { value: true, children: /* @__PURE__ */ jsxs(View, { role: "group", style: [styles3.section, style], testID, ...a11y, children: [
+    /* @__PURE__ */ jsx(GapOwnedProvider, { value: true, children: /* @__PURE__ */ jsxs(View, { role: "group", style: [styles5.section, style], testID, ...a11y, children: [
       hasTitle ? /* @__PURE__ */ jsx(
         Text,
         {
@@ -323,13 +403,13 @@ var FormSection = ({
           children: title
         }
       ) : null,
-      hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles3.description, { color: colors.textSecondary }], children: description }) : null,
+      hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles5.description, { color: colors.textSecondary }], children: description }) : null,
       children
     ] }) })
   );
 };
 var ACTIONS_GAP = 12;
-var styles4 = StyleSheet.create({
+var styles6 = StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "flex-end",
@@ -349,7 +429,7 @@ var FormActions = ({
   saveTestID = "save-button",
   cancelTestID = "cancel-button",
   testID
-}) => /* @__PURE__ */ jsxs(View, { style: [styles4.container, containerStyle], testID, children: [
+}) => /* @__PURE__ */ jsxs(View, { style: [styles6.container, containerStyle], testID, children: [
   typeof onCancel === "function" ? /* @__PURE__ */ jsx(
     Button,
     {
@@ -629,9 +709,9 @@ function withAlpha(color, alpha) {
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
 function useThemedInput(options = {}) {
-  const { hasError = false, onFocus, onBlur } = options;
+  const { hasError = false, onFocus, onBlur, editable = true } = options;
   const { theme } = useUi();
-  const { colors, palette, semantic } = theme;
+  const { colors, palette } = theme;
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const handleFocus = useCallback(
@@ -651,13 +731,14 @@ function useThemedInput(options = {}) {
   const handleHoverIn = useCallback(() => setIsHovered(true), []);
   const handleHoverOut = useCallback(() => setIsHovered(false), []);
   const primary = palette.primary["500"];
-  const errorColor = semantic.error["500"];
+  const errorColor = fieldErrorInk(theme);
   const style = useMemo(() => {
     const restBorder = hasError ? errorColor : colors.border;
     const focusBorder = hasError ? errorColor : primary;
     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 };
+    const editableFill = isFocused ? colors.surface : colors.surfaceElevated;
+    const backgroundColor = editable ? editableFill : colors.background;
+    const base = { color: editable ? colors.text : colors.textSecondary, borderColor, backgroundColor };
     if (!IS_WEB5) return base;
     const ringColor = hasError ? errorColor : themeFocusRingColor(theme);
     const ring = isFocused ? focusRingOutline(ringColor) : NO_RING;
@@ -677,6 +758,9 @@ function useThemedInput(options = {}) {
     colors.border,
     colors.surface,
     colors.surfaceElevated,
+    colors.background,
+    colors.textSecondary,
+    editable,
     primary,
     errorColor,
     theme
@@ -729,7 +813,7 @@ var ThemedTextInput = React2.forwardRef(function ThemedTextInput2({
     placeholderTextColor: themedPlaceholder,
     focusBind,
     hoverBind
-  } = useThemedInput({ hasError, onFocus, onBlur });
+  } = useThemedInput({ hasError, onFocus, onBlur, editable: rest.editable });
   const webA11y = webFieldA11y({ describedById, hasError, required: requiredField });
   const boxStyle = unstyledBox ? null : controlStyles.input;
   const multilineStyle = rest.multiline === true && !unstyledBox ? boxStyles.multiline : null;
@@ -1165,7 +1249,7 @@ function chipIdentity(option, selected, config) {
     ariaChecked: isRadio ? selected : void 0
   };
 }
-var styles5 = StyleSheet.create({
+var styles7 = StyleSheet.create({
   chipContainer: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -1251,7 +1335,7 @@ var ChipSelector = ({
         View,
         {
           accessibilityRole: isRadioGroup ? "radiogroup" : void 0,
-          style: styles5.chipContainer,
+          style: styles7.chipContainer,
           ...webFieldA11y({ describedById, hasError }),
           ...radio.groupProps,
           children: options.map(renderChip)
@@ -1261,7 +1345,7 @@ var ChipSelector = ({
   );
 };
 var DESCRIPTION_FONT_SIZE2 = 12;
-var styles6 = StyleSheet.create({
+var styles8 = StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -1322,15 +1406,15 @@ var FormSwitch = ({
         accessible: false,
         disabled,
         onPress: toggle,
-        style: [styles6.container, containerStyle],
+        style: [styles8.container, containerStyle],
         tabIndex: -1,
         testID: `${testID}-row`,
         children: [
-          /* @__PURE__ */ jsxs(View, { style: styles6.textColumn, children: [
-            /* @__PURE__ */ jsx(Text, { style: [styles6.label, themeStyles.label], children: label }),
-            hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles6.description, themeStyles.description], children: description }) : null
+          /* @__PURE__ */ jsxs(View, { style: styles8.textColumn, children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles8.label, themeStyles.label], children: label }),
+            hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles8.description, themeStyles.description], children: description }) : null
           ] }),
-          /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles6.switchSlot, testID: `${testID}-hitbox`, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles8.switchSlot, testID: `${testID}-hitbox`, children: /* @__PURE__ */ jsx(
             Switch,
             {
               accessibilityHint: accessibilityHint ?? label,
@@ -1353,7 +1437,7 @@ var BOX_SIZE = 20;
 var BOX_RADIUS = 5;
 var CHECK_FONT_SIZE = 14;
 var DISABLED_OPACITY = 0.5;
-var styles7 = StyleSheet.create({
+var styles9 = StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -1445,18 +1529,18 @@ var FormCheckbox = ({
       onPress: toggle,
       role: "checkbox",
       style: [
-        styles7.container,
-        hasHint ? null : styles7.centered,
+        styles9.container,
+        hasHint ? null : styles9.centered,
         containerStyle,
         disabled ? { opacity: DISABLED_OPACITY } : null
       ],
       testID,
       ...keyboardProps,
       children: [
-        /* @__PURE__ */ jsx(View, { style: [styles7.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsx(Text, { style: [styles7.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
-        /* @__PURE__ */ jsxs(View, { style: styles7.textColumn, children: [
-          /* @__PURE__ */ jsx(Text, { style: [styles7.label, themeStyles.label], children: label }),
-          hasHint ? /* @__PURE__ */ jsx(Text, { nativeID: hintId, style: [styles7.hint, themeStyles.hint], children: hintText }) : null
+        /* @__PURE__ */ jsx(View, { style: [styles9.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsx(Text, { style: [styles9.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
+        /* @__PURE__ */ jsxs(View, { style: styles9.textColumn, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles9.label, themeStyles.label], children: label }),
+          hasHint ? /* @__PURE__ */ jsx(Text, { nativeID: hintId, style: [styles9.hint, themeStyles.hint], children: hintText }) : null
         ] })
       ]
     }
@@ -1582,7 +1666,7 @@ function TypeaheadControl({
   testID
 }) {
   const { theme } = useUi();
-  const { colors, palette, semantic } = theme;
+  const { colors, palette } = theme;
   const anchorRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const exactPick = useMemo(() => options.some((o) => o.label === value), [options, value]);
@@ -1630,7 +1714,7 @@ function TypeaheadControl({
         onFocus: () => setIsOpen(true),
         onBlur: handleBlur,
         onSubmitEditing: handleSubmit,
-        style: [controlStyles.input, { borderColor: hasError ? semantic.error["500"] : colors.border, backgroundColor: colors.surface, color: colors.text }],
+        style: [controlStyles.input, { borderColor: hasError ? fieldErrorInk(theme) : colors.border, backgroundColor: colors.surface, color: colors.text }],
         testID: `${testID}-input`
       }
     ),
@@ -1648,7 +1732,7 @@ function TypeaheadControl({
         usePortal: true
       }
     ) : null,
-    hasError ? /* @__PURE__ */ jsx(Text, { role: "alert", style: [controlStyles.error, { color: semantic.error["500"] }], testID: `${testID}-error`, children: error }) : null
+    hasError ? /* @__PURE__ */ jsx(Text, { role: "alert", style: [controlStyles.error, { color: fieldErrorInk(theme) }], testID: `${testID}-error`, children: error }) : null
   ] });
 }
 var WEB_DATE_PROPS = typeof document !== "undefined" ? { type: "date" } : {};
@@ -1748,6 +1832,6 @@ function toggleGroupSelection(selected, groupKeys, order) {
   return order === void 0 ? merged : order.filter((key) => merged.includes(key));
 }
 
-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, groupAriaChecked, isUnmatched, resolveGroupSelection, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };
+export { AlignToControl, 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, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, SelectControl, ThemedTextInput, TypeaheadControl, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map