@dloizides/ui-forms 1.9.1 → 1.11.1

package/dist/index.d.mts

@@ -94,6 +94,21 @@ interface FieldChildContext {
      */
     describedById?: string;
     hasError: boolean;
+    /**
+     * `id` this field's `<label for>` points at. Assign it to the control (RN `id` → DOM `id`) and
+     * clicking the label text focuses the control — a free doubling of the hit area that every
+     * field was throwing away.
+     *
+     * A plain-node child gets this injected automatically (see below); a render-function child has
+     * to place it, because only the caller knows which element inside is the actual control.
+     */
+    controlId: string;
+    /**
+     * `id` OF the label element. For a control that `<label for>` cannot address — anything that is
+     * not a native form element, e.g. the `<div role="button">` a `SelectControl` trigger renders —
+     * point `aria-labelledby` here instead.
+     */
+    labelId: string;
 }
 type FieldChildren = React.ReactNode | ((context: FieldChildContext) => React.ReactNode);
 interface FieldProps {
@@ -356,6 +371,13 @@ declare const FormActions: ({ onSave, onCancel, saveLabel, cancelLabel, saveHint
  * soft ring) for free, driven by the active theme.
  */
 
+/**
+ * The private `styles.input` that used to live here — padding 10/12, radius 8, border 1 — was a
+ * verbatim duplicate of `controlStyles.input`, and `ThemedTextInput` now applies that itself. The
+ * duplication is what hid the real defect: because `FormField` supplied metrics, inputs reached
+ * through it looked correct, while every DIRECT `ThemedTextInput` caller got an unstyled 19px box
+ * and nobody could see the difference from in here.
+ */
 interface FormFieldProps extends Omit<TextInputProps, 'style'> {
     label: string;
     required?: boolean;
@@ -373,6 +395,20 @@ declare const FormField: ({ label, required, error, containerStyle, ...textInput
  * It is the ONE source of truth for the input look: `FormField` renders it, and raw filter inputs
  * (search / country / year / date fallbacks) use it directly instead of forking the styles.
  *
+ * ## The box metrics are applied HERE, and that is new
+ *
+ * This component claimed to be the source of truth for the input look while shipping only
+ * COLOURS — no border, no radius, no padding, no height. `FormField` happened to pass its own
+ * private copy of those metrics, so every input reached through `FormField` looked right and the
+ * gap stayed invisible. Any caller that used `ThemedTextInput` directly — the documented, blessed
+ * way to use it — got a raw browser input: **19px tall**, measured in production on an admin CMS
+ * where all 10 inputs failed the hit-target floor.
+ *
+ * So `controlStyles.input` is now the component's own base, ahead of the caller's `style` in the
+ * cascade. Callers that already passed the same metrics (`FormField`) are unaffected — the values
+ * are identical, which is precisely why the duplication was invisible — and callers that pass
+ * their own overrides still win, because their `style` merges after the base.
+ *
  * Every existing `TextInputProps` (value, placeholder, onChangeText, testID, accessibility…) is
  * forwarded untouched; `onFocus`/`onBlur` you pass are composed with the internal focus state.
  */
@@ -387,6 +423,16 @@ interface ThemedTextInputProps extends TextInputProps {
     describedById?: string;
     /** Marks the field required for assistive tech (`aria-required` on web). No-op on native. */
     requiredField?: boolean;
+    /**
+     * Opt OUT of the shared box metrics (border, radius, padding, the kit's min-height floor) and
+     * render colours only — the pre-1.11 behaviour.
+     *
+     * For the rare control that supplies its own complete box, e.g. an input embedded inside an
+     * already-bordered composite where a second border would double up. It is a prop rather than
+     * the default because the default has to be the accessible one: the previous default shipped
+     * 19px inputs to production precisely because "no metrics" was the silent fallback.
+     */
+    unstyledBox?: boolean;
 }
 declare const ThemedTextInput: React.ForwardRefExoticComponent<ThemedTextInputProps & React.RefAttributes<TextInput>>;
 
@@ -576,6 +622,17 @@ interface SelectControlProps {
      */
     accessibilityLabel: string;
     accessibilityHint?: string;
+    /**
+     * `id` of the `Field` label naming this control — take it from the render-child context's
+     * `labelId`. The trigger is a `<div role="button">`, which `<label for>` cannot address (that
+     * only works for native form elements), so the association runs the other way: the trigger
+     * points AT the label.
+     *
+     * `accessibilityLabel` still wins for the accessible NAME, deliberately — it is the only one of
+     * the two that carries the current selection ("Status: Active"). This adds the structural link
+     * without changing a single announcement.
+     */
+    labelledById?: string;
     /** PRE-LOCALIZED accessibility hint applied to every option in the menu. */
     optionHint?: string;
     /** Merged LAST onto the anchor wrapper — the consumer always wins over the shared style. */
@@ -583,7 +640,7 @@ interface SelectControlProps {
     /** Trigger is `${testID}-trigger`, menu `${testID}-menu`, options `${testID}-option-${value}`. */
     testID: string;
 }
-declare function SelectControl({ options, value, onChange, placeholder, accessibilityLabel, accessibilityHint, optionHint, style, testID, }: SelectControlProps): React.ReactElement;
+declare function SelectControl({ options, value, onChange, placeholder, accessibilityLabel, accessibilityHint, labelledById, optionHint, style, testID, }: SelectControlProps): React.ReactElement;
 
 /**
  * `TypeaheadControl` — a search-as-you-type combobox (aml-v2's CountryPicker, generalized). A
@@ -702,16 +759,24 @@ interface AnchoredMenuProps {
 declare function AnchoredMenu({ options, selectedValue, onSelect, onDismiss, colors, optionHint, testID, anchorRef, }: AnchoredMenuProps): React.ReactElement;
 
 declare const controlStyles: {
-    /** The shared bordered box every dense text control renders in. */
+    /**
+     * The shared bordered box every dense text control renders in.
+     *
+     * `minHeight` is the kit floor: padding alone produced a ~38px box, and a bare input with no
+     * box style at all measured **19px** in production. Height is a hit-target guarantee, so it
+     * is stated rather than left to emerge from font size + padding.
+     */
     input: {
         borderWidth: number;
         borderRadius: number;
         paddingHorizontal: number;
         paddingVertical: number;
         fontSize: number;
+        minHeight: number;
     };
     /** The select trigger: a bordered field box matching the text inputs + a chevron. */
     selectTrigger: {
+        minHeight: number;
         flexDirection: "row";
         alignItems: "center";
         justifyContent: "space-between";

package/dist/index.d.ts

@@ -94,6 +94,21 @@ interface FieldChildContext {
      */
     describedById?: string;
     hasError: boolean;
+    /**
+     * `id` this field's `<label for>` points at. Assign it to the control (RN `id` → DOM `id`) and
+     * clicking the label text focuses the control — a free doubling of the hit area that every
+     * field was throwing away.
+     *
+     * A plain-node child gets this injected automatically (see below); a render-function child has
+     * to place it, because only the caller knows which element inside is the actual control.
+     */
+    controlId: string;
+    /**
+     * `id` OF the label element. For a control that `<label for>` cannot address — anything that is
+     * not a native form element, e.g. the `<div role="button">` a `SelectControl` trigger renders —
+     * point `aria-labelledby` here instead.
+     */
+    labelId: string;
 }
 type FieldChildren = React.ReactNode | ((context: FieldChildContext) => React.ReactNode);
 interface FieldProps {
@@ -356,6 +371,13 @@ declare const FormActions: ({ onSave, onCancel, saveLabel, cancelLabel, saveHint
  * soft ring) for free, driven by the active theme.
  */
 
+/**
+ * The private `styles.input` that used to live here — padding 10/12, radius 8, border 1 — was a
+ * verbatim duplicate of `controlStyles.input`, and `ThemedTextInput` now applies that itself. The
+ * duplication is what hid the real defect: because `FormField` supplied metrics, inputs reached
+ * through it looked correct, while every DIRECT `ThemedTextInput` caller got an unstyled 19px box
+ * and nobody could see the difference from in here.
+ */
 interface FormFieldProps extends Omit<TextInputProps, 'style'> {
     label: string;
     required?: boolean;
@@ -373,6 +395,20 @@ declare const FormField: ({ label, required, error, containerStyle, ...textInput
  * It is the ONE source of truth for the input look: `FormField` renders it, and raw filter inputs
  * (search / country / year / date fallbacks) use it directly instead of forking the styles.
  *
+ * ## The box metrics are applied HERE, and that is new
+ *
+ * This component claimed to be the source of truth for the input look while shipping only
+ * COLOURS — no border, no radius, no padding, no height. `FormField` happened to pass its own
+ * private copy of those metrics, so every input reached through `FormField` looked right and the
+ * gap stayed invisible. Any caller that used `ThemedTextInput` directly — the documented, blessed
+ * way to use it — got a raw browser input: **19px tall**, measured in production on an admin CMS
+ * where all 10 inputs failed the hit-target floor.
+ *
+ * So `controlStyles.input` is now the component's own base, ahead of the caller's `style` in the
+ * cascade. Callers that already passed the same metrics (`FormField`) are unaffected — the values
+ * are identical, which is precisely why the duplication was invisible — and callers that pass
+ * their own overrides still win, because their `style` merges after the base.
+ *
  * Every existing `TextInputProps` (value, placeholder, onChangeText, testID, accessibility…) is
  * forwarded untouched; `onFocus`/`onBlur` you pass are composed with the internal focus state.
  */
@@ -387,6 +423,16 @@ interface ThemedTextInputProps extends TextInputProps {
     describedById?: string;
     /** Marks the field required for assistive tech (`aria-required` on web). No-op on native. */
     requiredField?: boolean;
+    /**
+     * Opt OUT of the shared box metrics (border, radius, padding, the kit's min-height floor) and
+     * render colours only — the pre-1.11 behaviour.
+     *
+     * For the rare control that supplies its own complete box, e.g. an input embedded inside an
+     * already-bordered composite where a second border would double up. It is a prop rather than
+     * the default because the default has to be the accessible one: the previous default shipped
+     * 19px inputs to production precisely because "no metrics" was the silent fallback.
+     */
+    unstyledBox?: boolean;
 }
 declare const ThemedTextInput: React.ForwardRefExoticComponent<ThemedTextInputProps & React.RefAttributes<TextInput>>;
 
@@ -576,6 +622,17 @@ interface SelectControlProps {
      */
     accessibilityLabel: string;
     accessibilityHint?: string;
+    /**
+     * `id` of the `Field` label naming this control — take it from the render-child context's
+     * `labelId`. The trigger is a `<div role="button">`, which `<label for>` cannot address (that
+     * only works for native form elements), so the association runs the other way: the trigger
+     * points AT the label.
+     *
+     * `accessibilityLabel` still wins for the accessible NAME, deliberately — it is the only one of
+     * the two that carries the current selection ("Status: Active"). This adds the structural link
+     * without changing a single announcement.
+     */
+    labelledById?: string;
     /** PRE-LOCALIZED accessibility hint applied to every option in the menu. */
     optionHint?: string;
     /** Merged LAST onto the anchor wrapper — the consumer always wins over the shared style. */
@@ -583,7 +640,7 @@ interface SelectControlProps {
     /** Trigger is `${testID}-trigger`, menu `${testID}-menu`, options `${testID}-option-${value}`. */
     testID: string;
 }
-declare function SelectControl({ options, value, onChange, placeholder, accessibilityLabel, accessibilityHint, optionHint, style, testID, }: SelectControlProps): React.ReactElement;
+declare function SelectControl({ options, value, onChange, placeholder, accessibilityLabel, accessibilityHint, labelledById, optionHint, style, testID, }: SelectControlProps): React.ReactElement;
 
 /**
  * `TypeaheadControl` — a search-as-you-type combobox (aml-v2's CountryPicker, generalized). A
@@ -702,16 +759,24 @@ interface AnchoredMenuProps {
 declare function AnchoredMenu({ options, selectedValue, onSelect, onDismiss, colors, optionHint, testID, anchorRef, }: AnchoredMenuProps): React.ReactElement;
 
 declare const controlStyles: {
-    /** The shared bordered box every dense text control renders in. */
+    /**
+     * The shared bordered box every dense text control renders in.
+     *
+     * `minHeight` is the kit floor: padding alone produced a ~38px box, and a bare input with no
+     * box style at all measured **19px** in production. Height is a hit-target guarantee, so it
+     * is stated rather than left to emerge from font size + padding.
+     */
     input: {
         borderWidth: number;
         borderRadius: number;
         paddingHorizontal: number;
         paddingVertical: number;
         fontSize: number;
+        minHeight: number;
     };
     /** The select trigger: a bordered field box matching the text inputs + a chevron. */
     selectTrigger: {
+        minHeight: number;
         flexDirection: "row";
         alignItems: "center";
         justifyContent: "space-between";