@dloizides/ui-forms 1.19.0 → 1.20.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 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';
@@ -247,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"
   }
@@ -262,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 = ({
@@ -269,6 +300,7 @@ var FormCell = ({
   minWidth,
   basis,
   grow = true,
+  alignToControl = false,
   style,
   testID
 }) => {
@@ -280,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
   },
@@ -319,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,
         {
@@ -328,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",
@@ -354,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,
     {
@@ -1174,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",
@@ -1260,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)
@@ -1270,7 +1345,7 @@ var ChipSelector = ({
   );
 };
 var DESCRIPTION_FONT_SIZE2 = 12;
-var styles6 = StyleSheet.create({
+var styles8 = StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -1331,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,
@@ -1362,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",
@@ -1454,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
         ] })
       ]
     }
@@ -1757,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