@tap-payments/os-micro-frontend-shared 0.3.45 → 0.3.47

package/build/components/_v2/composites/Autocomplete/type.d.ts

@@ -0,0 +1,81 @@
+import type { ReactNode } from 'react';
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { InputFeedbackProps } from '../../primitives/InputFeedback/type';
+export interface AutocompleteOption {
+    label?: string;
+    value?: string | number;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+/**
+ * Props for Autocomplete — a single-select field with autocomplete/typing support.
+ * Similar to FormSelect's searchable prop but styled to match Select composite.
+ * Users can type to search and filter options from a dropdown menu.
+ *
+ * **Value handling:** `value` and `onChange` work with primitive identifiers (strings),
+ * not full option objects. This provides better integration with form libraries.
+ */
+export interface AutocompleteProps<T = AutocompleteOption> {
+    /** Visible label rendered above the input */
+    label?: string;
+    /** Plain helper text shown below when no feedback is supplied */
+    helperText?: ReactNode;
+    /**
+     * Rich feedback panel rendered flush below the input.
+     * Adjusts the input border colour and radius to connect visually.
+     * Takes priority over `helperText` when both are supplied.
+     */
+    feedback?: InputFeedbackProps | null;
+    /** Marks the input border as error state */
+    error?: boolean;
+    /** Styling for the field root wrapper */
+    sx?: SxProps<Theme>;
+    /** List of options to populate the dropdown */
+    options?: T[];
+    /** Currently selected value — a primitive identifier string (not the full option object) */
+    value?: string | null;
+    /** Called with the selected value as a primitive identifier string (or `null` when cleared) */
+    onChange?: (value: string | null) => void;
+    /** Returns the display string for an option row */
+    getOptionLabel?: (option: T) => string;
+    /** Extracts the primitive identifier (value) from an option. Defaults to `option.value` then `option.id` */
+    getOptionValue?: (option: T) => string;
+    /** Custom renderer for each option row in the dropdown */
+    renderOption?: (option: T) => ReactNode;
+    /** Custom equality check: compares option's value with current selected value */
+    isOptionEqualToValue?: (option: T, value: string) => boolean;
+    /** When it returns `true` the option is rendered but not selectable */
+    getOptionDisabled?: (option: T) => boolean;
+    /** Placeholder text shown when no option is selected */
+    placeholder?: string | null;
+    /** When true, shows a ✕ to clear the selection */
+    clearable?: boolean;
+    /** Called when the ✕ is clicked */
+    onClear?: () => void;
+    /** When true, shows a skeleton loader inside the dropdown */
+    loading?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Stretches the input to 100% of its container */
+    fullWidth?: boolean;
+    /** Callback when the search input value changes */
+    onSearchInputChange?: (value: string) => void;
+    /** Text shown when no options match the search */
+    noOptionsText?: string;
+    /** Text shown while options are loading */
+    loadingText?: string;
+    /** Delay (ms) before triggering search - useful for API calls */
+    searchDebounceMs?: number;
+    /**
+     * Custom search icon component. Renders in the end adornment (right side of input) when user types and loading is false.
+     * Always visible, not clickable, purely decorative.
+     * @default SearchIcon
+     */
+    searchIcon?: ReactNode;
+    /**
+     * Custom loading icon component. Renders in the end adornment (right side of input) when loading is true.
+     * Always visible, not clickable, purely decorative.
+     * @default LoadingIcon (animated spinner)
+     */
+    loadingIcon?: ReactNode;
+}

package/build/components/_v2/composites/GroupedSelect/type.d.ts

@@ -17,10 +17,10 @@ export interface OptionGroup {
 }
 /** Props for the bare GroupedSelect trigger control (internal use only). */
 export interface GroupedSelectTriggerProps {
-    /** Currently selected option. */
-    value?: GroupedOption | null;
-    /** Called when the user picks an option. */
-    onChange?: (option: GroupedOption) => void;
+    /** Currently selected value — a primitive identifier string (not the full option object), or null when empty */
+    value?: string | null;
+    /** Called when the user picks an option, passing the selected value as a primitive identifier string */
+    onChange?: (value: string) => void;
     /** Grouped option data rendered as accordion sections. */
     groups: OptionGroup[];
     /** Placeholder text shown when no option is selected. */
@@ -44,10 +44,10 @@ export interface GroupedSelectTriggerProps {
      */
     renderOption?: (option: GroupedOption, isSelected: boolean) => ReactNode;
     /**
-     * Custom equality check between option and current value.
-     * Defaults to `option.value === value.value`.
+     * Custom equality check: compares option's value with the current selected value string.
+     * Defaults to `option.value === value`.
      */
-    isOptionEqualToValue?: (option: GroupedOption, value: GroupedOption) => boolean;
+    isOptionEqualToValue?: (option: GroupedOption, value: string) => boolean;
     /** Index of the accordion group that starts expanded. Defaults to 0. */
     defaultExpandedGroup?: number | null;
     sx?: SxProps<Theme>;

package/build/components/_v2/composites/NestedMultiSelect/type.d.ts

@@ -41,10 +41,10 @@ export interface NestedMultiSelectProps<T extends NestedOption = NestedOption> {
      * Branch nodes (with `children`) open fly-out menus; leaf nodes (with `value`) are selectable.
      */
     nodes?: TreeNode<T>[];
-    /** Currently selected options (controlled). */
-    value?: T[];
-    /** Called with the updated selection whenever an option is toggled. */
-    onChange?: (selected: T[]) => void;
+    /** Currently selected option values (controlled) — array of primitive identifiers (strings), not full option objects. */
+    value?: string[];
+    /** Called with the updated selection of primitive identifiers whenever an option is toggled. */
+    onChange?: (selected: string[]) => void;
     /** Returns the display string for an option. Defaults to `option.label`. */
     getOptionLabel?: (option: T) => string;
     /** Returns the unique key for an option. Defaults to `option.value`. */

package/build/components/_v2/composites/index.d.ts

@@ -8,6 +8,8 @@ export { default as PhoneInput } from './PhoneInput';
 export type { PhoneInputProps } from './PhoneInput';
 export { default as Select } from './Select';
 export type { SelectProps } from './Select';
+export { default as Autocomplete } from './Autocomplete';
+export type { AutocompleteProps, AutocompleteOption } from './Autocomplete';
 export { default as MultiSelect } from './MultiSelect';
 export type { MultiSelectProps } from './MultiSelect';
 export { default as GroupedSelect } from './GroupedSelect';

package/build/components/_v2/forms/RHFAutocomplete/RHFAutocomplete.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { RegisterOptions } from 'react-hook-form';
+import type { AutocompleteProps, AutocompleteOption } from '../../composites/Autocomplete';
+export interface RHFAutocompleteProps<T = AutocompleteOption> extends Omit<AutocompleteProps<T>, 'name'> {
+    /** RHF field name — must match the key in your form schema */
+    name: string;
+    /** RHF validation rules forwarded to `Controller` */
+    rules?: RegisterOptions;
+}
+/**
+ * React Hook Form adapter for `Autocomplete`.
+ *
+ * - Reads `control` from the nearest `<FormProvider>`.
+ * - Maps `fieldState.error.message` to the `helperText` prop.
+ * - Generic over option type `T` — inferred automatically from `options` prop.
+ * - Stores the selected value as a primitive identifier string (not the full option object).
+ */
+declare function RHFAutocomplete<T = AutocompleteOption>({ name, rules, ...props }: Readonly<RHFAutocompleteProps<T>>): import("react").JSX.Element;
+declare namespace RHFAutocomplete {
+    var displayName: string;
+}
+declare const _default: typeof RHFAutocomplete;
+export default _default;

package/build/components/_v2/forms/RHFAutocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RHFAutocomplete } from './RHFAutocomplete';
+export type { RHFAutocompleteProps } from './RHFAutocomplete';

package/build/components/_v2/forms/RHFMultiSelect/RHFMultiSelect.d.ts

@@ -12,7 +12,7 @@ export interface RHFMultiSelectProps<T = SelectOption> extends Omit<MultiSelectP
  * React Hook Form adapter for `MultiSelect`.
  *
  * - Reads `control` from the nearest `<FormProvider>`.
- * - Stores an array of full option objects (or IDs when `getOptionValue` is provided).
+ * - Stores an array of primitive value identifiers (strings).
  * - Maps `fieldState.error.message` to the `feedback` prop.
  * - A caller-supplied `feedback` prop takes priority over the field error.
  * - Generic over option type `T` — inferred automatically from `options` prop.

package/build/components/_v2/forms/index.d.ts

@@ -4,6 +4,8 @@ export { RHFNumberInput } from './RHFNumberInput';
 export type { RHFNumberInputProps } from './RHFNumberInput';
 export { RHFSelect } from './RHFSelect';
 export type { RHFSelectProps } from './RHFSelect';
+export { RHFAutocomplete } from './RHFAutocomplete';
+export type { RHFAutocompleteProps } from './RHFAutocomplete';
 export { RHFMultiSelect } from './RHFMultiSelect';
 export type { RHFMultiSelectProps } from './RHFMultiSelect';
 export { RHFPhoneInput } from './RHFPhoneInput';