@dloizides/ui-forms 1.19.0 → 1.20.0

package/dist/index.d.mts

@@ -264,10 +264,41 @@ interface FormCellProps {
     basis?: number;
     /** `false` pins the cell to its basis instead of letting it absorb the row's slack. */
     grow?: boolean;
+    /** Puts an unlabelled control (a button) on the input line of the labelled cells beside it. */
+    alignToControl?: boolean;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }
-declare const FormCell: ({ children, minWidth, basis, grow, style, testID, }: FormCellProps) => React.ReactElement;
+declare const FormCell: ({ children, minWidth, basis, grow, alignToControl, style, testID, }: FormCellProps) => React.ReactElement;
+
+interface AlignToControlProps {
+    children: React.ReactNode;
+    labelVariant?: FieldLabelVariant;
+    spacing?: FieldSpacing;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/** Puts a button or other unlabelled control on the input line of the labelled `Field`s beside it. */
+declare const AlignToControl: ({ children, labelVariant, spacing, style, testID, }: AlignToControlProps) => React.ReactElement;
+
+interface InlineFieldRowProps {
+    field: React.ReactNode;
+    action: React.ReactNode;
+    fieldMaxWidth: number;
+    inlineMinWidth?: number;
+    gap?: number;
+    testID?: string;
+}
+/** A labelled field and its action: stacked on phones, one row on desktop with the action on the input line. */
+declare const InlineFieldRow: ({ field, action, fieldMaxWidth, inlineMinWidth, gap, testID, }: InlineFieldRowProps) => React.ReactElement;
+
+declare const INLINE_FIELD_ROW_MIN_WIDTH = 1024;
+interface InlineFieldRowLayout {
+    inline: boolean;
+    fieldMaxWidth: number | undefined;
+}
+/** Field and action share one row only at `inlineMinWidth` and wider; below it they stack. */
+declare function inlineFieldRowLayout(windowWidth: number, fieldMaxWidth: number, inlineMinWidth?: number): InlineFieldRowLayout;
 
 /**
  * `FormSection` — a titled group of fields. The React answer to v1's `<fieldset>` / `<legend>`.
@@ -1031,4 +1062,4 @@ declare function groupAriaChecked(state: GroupSelection): boolean | 'mixed';
  */
 declare function toggleGroupSelection<T>(selected: readonly T[], groupKeys: readonly T[], order?: readonly T[]): T[];
 
-export { AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuProps, type ChipOption, ChipSelector, type ChipSelectorProps, type ChipSingleSelectRole, type ChipVariant, type ControlOption, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, type DateRangeControlProps, type DateRangeValue, Field, type FieldChildContext, type FieldChildren, type FieldLabelVariant, type FieldMarker, type FieldProps, type FieldSpacing, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormSwitch, type FormSwitchProps, type GroupSelection, type RecentValues, SelectControl, type SelectControlProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type UseThemedInputOptions, controlStyles, groupAriaChecked, isUnmatched, resolveGroupSelection, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };
+export { AlignToControl, type AlignToControlProps, AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuProps, type ChipOption, ChipSelector, type ChipSelectorProps, type ChipSingleSelectRole, type ChipVariant, type ControlOption, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, type DateRangeControlProps, type DateRangeValue, Field, type FieldChildContext, type FieldChildren, type FieldLabelVariant, type FieldMarker, type FieldProps, type FieldSpacing, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormSwitch, type FormSwitchProps, type GroupSelection, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, type InlineFieldRowLayout, type InlineFieldRowProps, type RecentValues, SelectControl, type SelectControlProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };

package/dist/index.d.ts

@@ -264,10 +264,41 @@ interface FormCellProps {
     basis?: number;
     /** `false` pins the cell to its basis instead of letting it absorb the row's slack. */
     grow?: boolean;
+    /** Puts an unlabelled control (a button) on the input line of the labelled cells beside it. */
+    alignToControl?: boolean;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }
-declare const FormCell: ({ children, minWidth, basis, grow, style, testID, }: FormCellProps) => React.ReactElement;
+declare const FormCell: ({ children, minWidth, basis, grow, alignToControl, style, testID, }: FormCellProps) => React.ReactElement;
+
+interface AlignToControlProps {
+    children: React.ReactNode;
+    labelVariant?: FieldLabelVariant;
+    spacing?: FieldSpacing;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/** Puts a button or other unlabelled control on the input line of the labelled `Field`s beside it. */
+declare const AlignToControl: ({ children, labelVariant, spacing, style, testID, }: AlignToControlProps) => React.ReactElement;
+
+interface InlineFieldRowProps {
+    field: React.ReactNode;
+    action: React.ReactNode;
+    fieldMaxWidth: number;
+    inlineMinWidth?: number;
+    gap?: number;
+    testID?: string;
+}
+/** A labelled field and its action: stacked on phones, one row on desktop with the action on the input line. */
+declare const InlineFieldRow: ({ field, action, fieldMaxWidth, inlineMinWidth, gap, testID, }: InlineFieldRowProps) => React.ReactElement;
+
+declare const INLINE_FIELD_ROW_MIN_WIDTH = 1024;
+interface InlineFieldRowLayout {
+    inline: boolean;
+    fieldMaxWidth: number | undefined;
+}
+/** Field and action share one row only at `inlineMinWidth` and wider; below it they stack. */
+declare function inlineFieldRowLayout(windowWidth: number, fieldMaxWidth: number, inlineMinWidth?: number): InlineFieldRowLayout;
 
 /**
  * `FormSection` — a titled group of fields. The React answer to v1's `<fieldset>` / `<legend>`.
@@ -1031,4 +1062,4 @@ declare function groupAriaChecked(state: GroupSelection): boolean | 'mixed';
  */
 declare function toggleGroupSelection<T>(selected: readonly T[], groupKeys: readonly T[], order?: readonly T[]): T[];
 
-export { AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuProps, type ChipOption, ChipSelector, type ChipSelectorProps, type ChipSingleSelectRole, type ChipVariant, type ControlOption, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, type DateRangeControlProps, type DateRangeValue, Field, type FieldChildContext, type FieldChildren, type FieldLabelVariant, type FieldMarker, type FieldProps, type FieldSpacing, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormSwitch, type FormSwitchProps, type GroupSelection, type RecentValues, SelectControl, type SelectControlProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type UseThemedInputOptions, controlStyles, groupAriaChecked, isUnmatched, resolveGroupSelection, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };
+export { AlignToControl, type AlignToControlProps, AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuProps, type ChipOption, ChipSelector, type ChipSelectorProps, type ChipSingleSelectRole, type ChipVariant, type ControlOption, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, type DateRangeControlProps, type DateRangeValue, Field, type FieldChildContext, type FieldChildren, type FieldLabelVariant, type FieldMarker, type FieldProps, type FieldSpacing, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormSwitch, type FormSwitchProps, type GroupSelection, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, type InlineFieldRowLayout, type InlineFieldRowProps, type RecentValues, SelectControl, type SelectControlProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };

package/dist/index.js

@@ -253,6 +253,7 @@ var FORM_GRID_DEFAULT_MIN_WIDTH = 220;
 var FORM_GRID_DEFAULT_BASIS = 260;
 var styles2 = reactNative.StyleSheet.create({
   grid: {
+    alignItems: "flex-start",
     flexDirection: "row",
     flexWrap: "wrap"
   }
@@ -268,6 +269,36 @@ var FormGrid = ({
   const metrics = React2__default.default.useMemo(() => ({ minWidth, basis }), [minWidth, basis]);
   return /* @__PURE__ */ jsxRuntime.jsx(FormGridProvider, { value: metrics, children: /* @__PURE__ */ jsxRuntime.jsx(GapOwnedProvider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.grid, { gap }, style], testID, children }) }) });
 };
+var LABEL_LINE_PLACEHOLDER = "\xA0";
+var styles3 = reactNative.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__ */ jsxRuntime.jsxs(reactNative.View, { style: [spacingStyles.container, style], testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.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 = ({
@@ -275,6 +306,7 @@ var FormCell = ({
   minWidth,
   basis,
   grow = true,
+  alignToControl = false,
   style,
   testID
 }) => {
@@ -286,11 +318,54 @@ var FormCell = ({
     flexBasis: resolvedBasis,
     flexGrow: grow ? GROW : NO_GROW
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [cellStyle, style], testID, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [cellStyle, style], testID, children: alignToControl ? /* @__PURE__ */ jsxRuntime.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 = reactNative.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 } = reactNative.useWindowDimensions();
+  const layout = inlineFieldRowLayout(width, fieldMaxWidth, inlineMinWidth);
+  const rowStyle = React2.useMemo(() => [styles4.row, { gap }], [gap]);
+  const fieldStyle = React2.useMemo(() => [styles4.field, { maxWidth: layout.fieldMaxWidth }], [layout.fieldMaxWidth]);
+  if (!layout.inline)
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      field,
+      action
+    ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: rowStyle, testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: fieldStyle, children: field }),
+    /* @__PURE__ */ jsxRuntime.jsx(AlignToControl, { style: styles4.action, children: action })
+  ] });
 };
 var SECTION_GAP = 10;
 var DESCRIPTION_FONT_SIZE = 12;
-var styles3 = reactNative.StyleSheet.create({
+var styles5 = reactNative.StyleSheet.create({
   section: {
     gap: SECTION_GAP
   },
@@ -325,7 +400,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__ */ jsxRuntime.jsx(GapOwnedProvider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { role: "group", style: [styles3.section, style], testID, ...a11y, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GapOwnedProvider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { role: "group", style: [styles5.section, style], testID, ...a11y, children: [
       hasTitle ? /* @__PURE__ */ jsxRuntime.jsx(
         reactNative.Text,
         {
@@ -334,13 +409,13 @@ var FormSection = ({
           children: title
         }
       ) : null,
-      hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.description, { color: colors.textSecondary }], children: description }) : null,
+      hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.description, { color: colors.textSecondary }], children: description }) : null,
       children
     ] }) })
   );
 };
 var ACTIONS_GAP = 12;
-var styles4 = reactNative.StyleSheet.create({
+var styles6 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "flex-end",
@@ -360,7 +435,7 @@ var FormActions = ({
   saveTestID = "save-button",
   cancelTestID = "cancel-button",
   testID
-}) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles4.container, containerStyle], testID, children: [
+}) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles6.container, containerStyle], testID, children: [
   typeof onCancel === "function" ? /* @__PURE__ */ jsxRuntime.jsx(
     uiButtons.Button,
     {
@@ -1180,7 +1255,7 @@ function chipIdentity(option, selected, config) {
     ariaChecked: isRadio ? selected : void 0
   };
 }
-var styles5 = reactNative.StyleSheet.create({
+var styles7 = reactNative.StyleSheet.create({
   chipContainer: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -1266,7 +1341,7 @@ var ChipSelector = ({
         reactNative.View,
         {
           accessibilityRole: isRadioGroup ? "radiogroup" : void 0,
-          style: styles5.chipContainer,
+          style: styles7.chipContainer,
           ...webFieldA11y({ describedById, hasError }),
           ...radio.groupProps,
           children: options.map(renderChip)
@@ -1276,7 +1351,7 @@ var ChipSelector = ({
   );
 };
 var DESCRIPTION_FONT_SIZE2 = 12;
-var styles6 = reactNative.StyleSheet.create({
+var styles8 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -1337,15 +1412,15 @@ var FormSwitch = ({
         accessible: false,
         disabled,
         onPress: toggle,
-        style: [styles6.container, containerStyle],
+        style: [styles8.container, containerStyle],
         tabIndex: -1,
         testID: `${testID}-row`,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.textColumn, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.label, themeStyles.label], children: label }),
-            hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.description, themeStyles.description], children: description }) : null
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.textColumn, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.label, themeStyles.label], children: label }),
+            hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.description, themeStyles.description], children: description }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles6.switchSlot, testID: `${testID}-hitbox`, children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles8.switchSlot, testID: `${testID}-hitbox`, children: /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Switch,
             {
               accessibilityHint: accessibilityHint ?? label,
@@ -1368,7 +1443,7 @@ var BOX_SIZE = 20;
 var BOX_RADIUS = 5;
 var CHECK_FONT_SIZE = 14;
 var DISABLED_OPACITY = 0.5;
-var styles7 = reactNative.StyleSheet.create({
+var styles9 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -1460,18 +1535,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__ */ jsxRuntime.jsx(reactNative.View, { style: [styles7.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.textColumn, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.label, themeStyles.label], children: label }),
-          hasHint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: hintId, style: [styles7.hint, themeStyles.hint], children: hintText }) : null
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles9.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles9.textColumn, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.label, themeStyles.label], children: label }),
+          hasHint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: hintId, style: [styles9.hint, themeStyles.hint], children: hintText }) : null
         ] })
       ]
     }
@@ -1763,6 +1838,7 @@ function toggleGroupSelection(selected, groupKeys, order) {
   return order === void 0 ? merged : order.filter((key) => merged.includes(key));
 }
 
+exports.AlignToControl = AlignToControl;
 exports.AnchoredMenu = AnchoredMenu;
 exports.ChipSelector = ChipSelector;
 exports.DEFAULT_MAX_RECENTS = DEFAULT_MAX_RECENTS;
@@ -1778,11 +1854,14 @@ exports.FormField = FormField;
 exports.FormGrid = FormGrid;
 exports.FormSection = FormSection;
 exports.FormSwitch = FormSwitch;
+exports.INLINE_FIELD_ROW_MIN_WIDTH = INLINE_FIELD_ROW_MIN_WIDTH;
+exports.InlineFieldRow = InlineFieldRow;
 exports.SelectControl = SelectControl;
 exports.ThemedTextInput = ThemedTextInput;
 exports.TypeaheadControl = TypeaheadControl;
 exports.controlStyles = controlStyles;
 exports.groupAriaChecked = groupAriaChecked;
+exports.inlineFieldRowLayout = inlineFieldRowLayout;
 exports.isUnmatched = isUnmatched;
 exports.resolveGroupSelection = resolveGroupSelection;
 exports.suggestOptions = suggestOptions;