@dloizides/ui-forms 1.24.0 → 1.25.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.25.0
+
+INVOICE-3 "Invoice interface over a user-chosen folder": extracted from invoice-web.
+
+- New `SelectField`: `Field` + `SelectControl`, its accessible name carries the selection.
+
 ## 1.24.0
 
 BEAD-3 "Report form: searchable pattern field": review fix.

package/dist/index.d.mts

@@ -501,7 +501,7 @@ interface UseThemedInputOptions {
     onFocus?: (e: FocusEvent) => void;
     /** Consumer blur handler — composed with the internal focus-state toggle. */
     onBlur?: (e: BlurEvent) => void;
-    /** `false` renders the read-only treatment: the recessed ground fill and the secondary ink. */
+    /** `false` renders the read-only treatment: flat surface fill, no input outline, secondary ink. */
     editable?: boolean;
 }
 interface ThemedInput {
@@ -762,6 +762,16 @@ interface SelectControlProps {
 }
 declare function SelectControl({ options, value, onChange, placeholder, accessibilityLabel, accessibilityHint, labelledById, optionHint, style, testID, }: SelectControlProps): React.ReactElement;
 
+interface SelectFieldProps {
+    label: string;
+    accessibilityHint: string;
+    value: string;
+    options: readonly ControlOption[];
+    onChange: (value: string) => void;
+    testID: string;
+}
+declare const SelectField: ({ label, accessibilityHint, value, options, onChange, testID, }: SelectFieldProps) => React.ReactElement;
+
 interface FieldControlWiring {
     id?: string;
     describedById?: string;
@@ -1173,4 +1183,4 @@ interface UploadWithLinkFieldProps {
 /** An image field: preview, an upload control, and a link input revealed on request. */
 declare const UploadWithLinkField: ({ value, onChange, labels, uploadControl, testID, disabled, previewSize, }: UploadWithLinkFieldProps) => React.ReactElement;
 
-export { AlignToControl, type AlignToControlProps, AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuListbox, 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, type Focusable, type FocusableRefs, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormStatusLine, type FormStatusLineProps, FormSwitch, type FormSwitchProps, type GroupSelection, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, type InlineFieldRowLayout, type InlineFieldRowProps, type RecentValues, SelectControl, type SelectControlProps, type StepNeighbours, StepperNav, type StepperNavLabels, type StepperNavProps, type StepperStep, StepperTabs, type StepperTabsProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type TypeaheadSearch, type TypeaheadSearchProps, UploadWithLinkField, type UploadWithLinkFieldProps, type UploadWithLinkLabels, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, resolveStepNeighbours, suggestOptions, toggleGroupSelection, useFocusFirstInvalid, useKeepInView, useRecentValues, useThemedInput };
+export { AlignToControl, type AlignToControlProps, AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuListbox, 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, type Focusable, type FocusableRefs, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormStatusLine, type FormStatusLineProps, FormSwitch, type FormSwitchProps, type GroupSelection, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, type InlineFieldRowLayout, type InlineFieldRowProps, type RecentValues, SelectControl, type SelectControlProps, SelectField, type SelectFieldProps, type StepNeighbours, StepperNav, type StepperNavLabels, type StepperNavProps, type StepperStep, StepperTabs, type StepperTabsProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type TypeaheadSearch, type TypeaheadSearchProps, UploadWithLinkField, type UploadWithLinkFieldProps, type UploadWithLinkLabels, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, resolveStepNeighbours, suggestOptions, toggleGroupSelection, useFocusFirstInvalid, useKeepInView, useRecentValues, useThemedInput };

package/dist/index.d.ts

@@ -501,7 +501,7 @@ interface UseThemedInputOptions {
     onFocus?: (e: FocusEvent) => void;
     /** Consumer blur handler — composed with the internal focus-state toggle. */
     onBlur?: (e: BlurEvent) => void;
-    /** `false` renders the read-only treatment: the recessed ground fill and the secondary ink. */
+    /** `false` renders the read-only treatment: flat surface fill, no input outline, secondary ink. */
     editable?: boolean;
 }
 interface ThemedInput {
@@ -762,6 +762,16 @@ interface SelectControlProps {
 }
 declare function SelectControl({ options, value, onChange, placeholder, accessibilityLabel, accessibilityHint, labelledById, optionHint, style, testID, }: SelectControlProps): React.ReactElement;
 
+interface SelectFieldProps {
+    label: string;
+    accessibilityHint: string;
+    value: string;
+    options: readonly ControlOption[];
+    onChange: (value: string) => void;
+    testID: string;
+}
+declare const SelectField: ({ label, accessibilityHint, value, options, onChange, testID, }: SelectFieldProps) => React.ReactElement;
+
 interface FieldControlWiring {
     id?: string;
     describedById?: string;
@@ -1173,4 +1183,4 @@ interface UploadWithLinkFieldProps {
 /** An image field: preview, an upload control, and a link input revealed on request. */
 declare const UploadWithLinkField: ({ value, onChange, labels, uploadControl, testID, disabled, previewSize, }: UploadWithLinkFieldProps) => React.ReactElement;
 
-export { AlignToControl, type AlignToControlProps, AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuListbox, 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, type Focusable, type FocusableRefs, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormStatusLine, type FormStatusLineProps, FormSwitch, type FormSwitchProps, type GroupSelection, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, type InlineFieldRowLayout, type InlineFieldRowProps, type RecentValues, SelectControl, type SelectControlProps, type StepNeighbours, StepperNav, type StepperNavLabels, type StepperNavProps, type StepperStep, StepperTabs, type StepperTabsProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type TypeaheadSearch, type TypeaheadSearchProps, UploadWithLinkField, type UploadWithLinkFieldProps, type UploadWithLinkLabels, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, resolveStepNeighbours, suggestOptions, toggleGroupSelection, useFocusFirstInvalid, useKeepInView, useRecentValues, useThemedInput };
+export { AlignToControl, type AlignToControlProps, AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuListbox, 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, type Focusable, type FocusableRefs, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormStatusLine, type FormStatusLineProps, FormSwitch, type FormSwitchProps, type GroupSelection, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, type InlineFieldRowLayout, type InlineFieldRowProps, type RecentValues, SelectControl, type SelectControlProps, SelectField, type SelectFieldProps, type StepNeighbours, StepperNav, type StepperNavLabels, type StepperNavProps, type StepperStep, StepperTabs, type StepperTabsProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type TypeaheadSearch, type TypeaheadSearchProps, UploadWithLinkField, type UploadWithLinkFieldProps, type UploadWithLinkLabels, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, resolveStepNeighbours, suggestOptions, toggleGroupSelection, useFocusFirstInvalid, useKeepInView, useRecentValues, useThemedInput };

package/dist/index.js

@@ -862,9 +862,11 @@ function useThemedInput(options = {}) {
   const style = React2.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 editableBorder = isFocused ? focusBorder : isHovered ? withAlpha(colors.text, HOVER_BORDER_ALPHA) : restBorder;
+    const readOnlyBorder = hasError ? errorColor : colors.surface;
+    const borderColor = editable ? editableBorder : readOnlyBorder;
     const editableFill = isFocused ? colors.surface : colors.surfaceElevated;
-    const backgroundColor = editable ? editableFill : colors.background;
+    const backgroundColor = editable ? editableFill : colors.surface;
     const base = { color: editable ? colors.text : colors.textSecondary, borderColor, backgroundColor };
     if (!IS_WEB5) return base;
     const ringColor = hasError ? errorColor : uiButtons.themeFocusRingColor(theme);
@@ -1765,6 +1767,28 @@ function SelectControl({
     ) : null
   ] });
 }
+var SelectField = ({
+  label,
+  accessibilityHint,
+  value,
+  options,
+  onChange,
+  testID
+}) => {
+  const selected = options.find((option) => option.value === value)?.label ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { label, children: ({ labelId }) => /* @__PURE__ */ jsxRuntime.jsx(
+    SelectControl,
+    {
+      accessibilityHint,
+      accessibilityLabel: `${label}: ${selected}`,
+      labelledById: labelId,
+      options,
+      testID,
+      value,
+      onChange
+    }
+  ) });
+};
 var CLOSE_DELAY_MS2 = 140;
 function useDelayedBlurClose(open, close) {
   const timerRef = React2.useRef(null);
@@ -2353,6 +2377,7 @@ exports.FormSwitch = FormSwitch;
 exports.INLINE_FIELD_ROW_MIN_WIDTH = INLINE_FIELD_ROW_MIN_WIDTH;
 exports.InlineFieldRow = InlineFieldRow;
 exports.SelectControl = SelectControl;
+exports.SelectField = SelectField;
 exports.StepperNav = StepperNav;
 exports.StepperTabs = StepperTabs;
 exports.ThemedTextInput = ThemedTextInput;