@commercelayer/app-elements 0.0.80 → 0.1.0

package/dist/ui/forms/InputCurrency/InputCurrency.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import { type InputWrapperBaseProps } from '../../internals/InputWrapper';
+import { type CurrencyInputProps as ReactCurrencyInputFieldProps } from 'react-currency-input-field';
+import { type CurrencyCode } from './currencies';
+export interface InputCurrencyProps extends InputWrapperBaseProps, Pick<ReactCurrencyInputFieldProps, 'onBlur' | 'onClick' | 'disabled'> {
+    /**
+     * HTML input id
+     */
+    id?: string;
+    /**
+     * Field name
+     */
+    name?: string;
+    /**
+     * Input placeholder
+     */
+    placeholder?: string;
+    /**
+     * optional css class names used for the input element
+     */
+    className?: string;
+    /**
+     * Valid 3-digit iso currency code (eg: EUR, USD, GBP)
+     */
+    currencyCode: Uppercase<CurrencyCode>;
+    /**
+     * Value in cents
+     */
+    cents?: number | null;
+    /**
+     * onChange callback triggered when during typing
+     */
+    onChange: (cents: number | null, formatted: string) => void;
+    /**
+     * hide currency symbol but keep the currency formatting
+     */
+    hideCurrencySymbol?: boolean;
+    /**
+     * Allow user to enter negative value
+     * @default false
+     */
+    allowNegativeValue?: boolean;
+    /**
+     * show (X) button to clear the input
+     */
+    isClearable?: boolean;
+}
+export declare const InputCurrency: import("react").ForwardRefExoticComponent<InputCurrencyProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/ui/forms/InputCurrency/index.d.ts

@@ -1,58 +1,3 @@
-/// <reference types="react" />
-import { type InputWrapperBaseProps } from '../../internals/InputWrapper';
-import { type CurrencyInputProps } from 'react-currency-input-field';
-import { type CurrencyCode } from './currencies';
-export interface InputCurrencyProps extends InputWrapperBaseProps, Pick<CurrencyInputProps, 'onBlur' | 'onClick' | 'disabled'> {
-    /**
-     * HTML input id
-     */
-    id?: string;
-    /**
-     * Field name
-     */
-    name?: string;
-    /**
-     * Input placeholder
-     */
-    placeholder?: string;
-    /**
-     * optional css class names used for the input element
-     */
-    className?: string;
-    /**
-     * Valid 3-digit iso currency code (eg: EUR, USD, GBP)
-     */
-    currencyCode: Uppercase<CurrencyCode>;
-    /**
-     * Value in cents
-     */
-    cents?: number | null;
-    /**
-     * onChange callback triggered when during typing
-     */
-    onChange: (cents: number | null, formatted: string) => void;
-    /**
-     * hide currency symbol but keep the currency formatting
-     */
-    hideCurrencySymbol?: boolean;
-    /**
-     * Allow user to enter negative value
-     * @default false
-     */
-    allowNegativeValue?: boolean;
-    /**
-     * show (X) button to clear the input
-     */
-    isClearable?: boolean;
-}
-declare const InputCurrency: import("react").ForwardRefExoticComponent<InputCurrencyProps & import("react").RefAttributes<HTMLInputElement>>;
-/**
- * Format cents to currency.
- * Useful to display the returned value from `<InputCurrency>` component.
- *
- * Example: formatCentsToCurrency(100, 'EUR') -> €1,00
- * Example: formatCentsToCurrency(100000, 'USD') -> $1,000.00
- * Example: formatCentsToCurrency(100, 'JPY') -> ¥100
- **/
-declare function formatCentsToCurrency(cents: number, currencyCode: Uppercase<CurrencyCode>, stripZeroDecimals?: boolean): string;
-export { InputCurrency, formatCentsToCurrency };
+export { HookedInputCurrency } from './HookedInputCurrency';
+export { InputCurrency, type InputCurrencyProps } from './InputCurrency';
+export { formatCentsToCurrency } from './utils';

package/dist/ui/forms/InputCurrency/utils.d.ts

@@ -24,3 +24,13 @@ export declare function addCurrencySymbol({ formattedValue, currency }: {
  * Example: CLF -> 0,0000
  */
 export declare function makePlaceholder(currency: Currency): string;
+/**
+ * Format cents to currency.
+ * Useful to display the returned value from `<InputCurrency>` component.
+ *
+ * @example
+ * formatCentsToCurrency(100, 'EUR') //= €1,00
+ * formatCentsToCurrency(100000, 'USD') //= $1,000.00
+ * formatCentsToCurrency(100, 'JPY') //= ¥100
+ **/
+export declare function formatCentsToCurrency(cents: number, currencyCode: Uppercase<CurrencyCode>, stripZeroDecimals?: boolean): string;

package/dist/ui/forms/InputCurrencyRange.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
+import { type InputCurrencyProps } from '../forms/InputCurrency';
 import { type CurrencyCode } from '../forms/InputCurrency/currencies';
-import { type InputCurrencyProps } from '../forms/InputCurrency/index';
 import { type InputWrapperBaseProps } from '../internals/InputWrapper';
 type Cents = InputCurrencyProps['cents'];
 export interface InputCurrencyRangeProps extends InputWrapperBaseProps {
@@ -14,12 +14,15 @@ export interface InputCurrencyRangeProps extends InputWrapperBaseProps {
         formatted: string;
     }, currency: Uppercase<CurrencyCode>) => void;
     placeholders?: [string, string];
-    currencyList: Array<Uppercase<CurrencyCode>>;
+    currencyList: readonly [
+        Uppercase<CurrencyCode>,
+        ...Array<Uppercase<CurrencyCode>>
+    ];
     defaultCurrency?: Uppercase<CurrencyCode>;
     className?: string;
 }
-declare function InputCurrencyRange({ fromCents, toCents, placeholders, onChange, label, hint, currencyList, defaultCurrency, className, feedback }: InputCurrencyRangeProps): JSX.Element;
-declare namespace InputCurrencyRange {
+export declare function InputCurrencyRange({ fromCents, toCents, placeholders, onChange, label, hint, currencyList, defaultCurrency, className, feedback }: InputCurrencyRangeProps): JSX.Element;
+export declare namespace InputCurrencyRange {
     var displayName: string;
 }
-export { InputCurrencyRange };
+export {};

package/dist/ui/{hook-form → forms/InputDate}/HookedInputDate.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type InputDateProps } from '../forms/InputDate/InputDateComponent';
+import { type InputDateProps } from './InputDateComponent';
 interface Props extends Omit<InputDateProps, 'onChange'> {
     /**
      * field name to match hook-form state
@@ -11,8 +11,8 @@ interface Props extends Omit<InputDateProps, 'onChange'> {
  * Value is stored in form state as iso date string (example: `"2023-08-01T22:00:00.000Z"` ).
  * @see InputDate
  */
-declare function HookedInputDate({ name, ...props }: Props): JSX.Element;
-declare namespace HookedInputDate {
+export declare function HookedInputDate({ name, ...props }: Props): JSX.Element;
+export declare namespace HookedInputDate {
     var displayName: string;
 }
-export { HookedInputDate };
+export {};

package/dist/ui/forms/InputDate/InputDate.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type DatePicker from 'react-datepicker';
+import { type InputDateProps } from './InputDateComponent';
+export declare const InputDate: import("react").ForwardRefExoticComponent<InputDateProps & import("react").RefAttributes<DatePicker<never, undefined>>>;

package/dist/ui/forms/InputDate/InputDateComponent.d.ts

@@ -47,5 +47,4 @@ export interface InputDateProps extends InputWrapperBaseProps {
      */
     preventOpenOnFocus?: boolean;
 }
-declare const InputDateComponent: import("react").ForwardRefExoticComponent<InputDateProps & import("react").RefAttributes<DatePicker<never, undefined>>>;
-export { InputDateComponent };
+export declare const InputDateComponent: import("react").ForwardRefExoticComponent<InputDateProps & import("react").RefAttributes<DatePicker<never, undefined>>>;

package/dist/ui/forms/InputDate/index.d.ts

@@ -1,5 +1,2 @@
-/// <reference types="react" />
-import { type InputDateProps } from './InputDateComponent';
-import type DatePicker from 'react-datepicker';
-declare const InputDate: import("react").ForwardRefExoticComponent<InputDateProps & import("react").RefAttributes<DatePicker<never, undefined>>>;
-export { InputDate };
+export { HookedInputDate } from './HookedInputDate';
+export { InputDate } from './InputDate';

package/dist/ui/{hook-form → forms/InputDateRange}/HookedInputDateRange.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type InputDateRangeProps } from '../forms/InputDateRange';
+import { type InputDateRangeProps } from './InputDateRange';
 interface Props extends Omit<InputDateRangeProps, 'onChange' | 'value'> {
     /**
      * field name to match hook-form state
@@ -12,8 +12,8 @@ interface Props extends Omit<InputDateRangeProps, 'onChange' | 'value'> {
  * (example: `["2023-08-01T22:00:00.000Z", "2023-08-14T22:00:00.000Z"]` ).
  * @see InputDateRange
  */
-declare function HookedInputDateRange({ name, ...props }: Props): JSX.Element;
-declare namespace HookedInputDateRange {
+export declare function HookedInputDateRange({ name, ...props }: Props): JSX.Element;
+export declare namespace HookedInputDateRange {
     var displayName: string;
 }
-export { HookedInputDateRange };
+export {};

package/dist/ui/forms/{InputDateRange.d.ts → InputDateRange/InputDateRange.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { type InputWrapperBaseProps } from '../internals/InputWrapper';
-import { type InputDateProps, type MaybeDate } from './InputDate/InputDateComponent';
+import { type InputWrapperBaseProps } from '../../internals/InputWrapper';
+import { type InputDateProps, type MaybeDate } from '../InputDate/InputDateComponent';
 export interface InputDateRangeProps extends Pick<InputDateProps, 'isClearable' | 'format' | 'autoPlaceholder'>, InputWrapperBaseProps {
     /**
      * a tuple that represents the [from, to] dates
@@ -19,5 +19,4 @@ export interface InputDateRangeProps extends Pick<InputDateProps, 'isClearable'
      */
     toPlaceholder?: string;
 }
-declare const InputDateRange: import("react").ForwardRefExoticComponent<InputDateRangeProps & import("react").RefAttributes<HTMLDivElement>>;
-export { InputDateRange };
+export declare const InputDateRange: import("react").ForwardRefExoticComponent<InputDateRangeProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ui/forms/InputDateRange/index.d.ts

@@ -0,0 +1,2 @@
+export { HookedInputDateRange } from './HookedInputDateRange';
+export { InputDateRange } from './InputDateRange';

package/dist/ui/forms/InputFeedback.d.ts

@@ -5,8 +5,7 @@ export interface InputFeedbackProps {
     variant?: FeedbackVariant;
     className?: string;
 }
-declare function InputFeedback({ className, message, variant, ...rest }: InputFeedbackProps): JSX.Element;
-declare namespace InputFeedback {
+export declare function InputFeedback({ className, message, variant, ...rest }: InputFeedbackProps): JSX.Element;
+export declare namespace InputFeedback {
     var displayName: string;
 }
-export { InputFeedback };

package/dist/ui/forms/InputFile.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import { type InputWrapperBaseProps } from '../internals/InputWrapper';
 interface InputFileProps extends InputWrapperBaseProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * The title is shown within the input.
+     */
+    title: string;
     /**
      * If defined, it shows a progress bar at the bottom. It must be between 0 and 100.
      */
     progress?: number;
 }
-declare const InputFile: import("react").ForwardRefExoticComponent<InputFileProps & import("react").RefAttributes<HTMLInputElement>>;
-export { InputFile };
+export declare const InputFile: import("react").ForwardRefExoticComponent<InputFileProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/ui/forms/InputJson.d.ts

@@ -8,8 +8,7 @@ export interface InputJsonProps<JsonType> extends InputWrapperBaseProps {
     errorMessageText?: string;
     className?: string;
 }
-declare function InputJson<JsonType extends object>({ placeholder, validateFn, onDataReady, onDataResetRequest, errorMessageText, className, label, feedback, hint, ...rest }: InputJsonProps<JsonType>): JSX.Element;
-declare namespace InputJson {
+export declare function InputJson<JsonType extends object>({ placeholder, validateFn, onDataReady, onDataResetRequest, errorMessageText, className, label, feedback, hint, ...rest }: InputJsonProps<JsonType>): JSX.Element;
+export declare namespace InputJson {
     var displayName: string;
 }
-export { InputJson };

package/dist/ui/{hook-form → forms/InputMetadata}/HookedInputMetadata.d.ts

@@ -12,8 +12,8 @@ interface Props {
  * in the form state.
  * @see InputMetadata
  */
-declare function HookedInputMetadata({ name }: Props): JSX.Element;
-declare namespace HookedInputMetadata {
+export declare function HookedInputMetadata({ name }: Props): JSX.Element;
+export declare namespace HookedInputMetadata {
     var displayName: string;
 }
-export { HookedInputMetadata };
+export {};

package/dist/ui/forms/InputMetadata/index.d.ts

@@ -0,0 +1 @@
+export { HookedInputMetadata } from './HookedInputMetadata';

package/dist/ui/forms/InputRadioGroup.d.ts

@@ -10,6 +10,10 @@ export interface OptionItem {
     content: ReactNode;
 }
 export interface InputRadioGroupProps {
+    /**
+     * Text to be displayed on top of the list
+     */
+    title?: string;
     /**
      * Input name, will be used to set the html name for all radios
      */
@@ -31,18 +35,19 @@ export interface InputRadioGroupProps {
      */
     showInput?: boolean;
     /**
-     * Define the `flex-direction`
-     * @default 'column'
+     * Define how the item options are rendered
+     * @default list
      */
-    direction?: 'column' | 'row';
+    viewMode?: 'list' | 'inline';
 }
 export declare const InputRadioGroup: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    title?: string | undefined;
     name: string;
     options: OptionItem[];
     defaultValue?: string | undefined;
     onChange?: ((selected: string | undefined) => void) | undefined;
     showInput?: boolean | undefined;
-    direction?: "row" | "column" | undefined;
+    viewMode?: "list" | "inline" | undefined;
     delayMs?: number | undefined;
     isLoading?: boolean | undefined;
 }>;

package/dist/ui/forms/InputReadonly.d.ts

@@ -18,8 +18,8 @@ interface InputReadonlyProps extends InputWrapperBaseProps {
      */
     showCopyAction?: boolean;
 }
-declare function InputReadonly({ value, wrapperClassName, inputClassName, showCopyAction, label, hint, feedback, ...rest }: InputReadonlyProps): JSX.Element;
-declare namespace InputReadonly {
+export declare function InputReadonly({ value, wrapperClassName, inputClassName, showCopyAction, label, hint, feedback, ...rest }: InputReadonlyProps): JSX.Element;
+export declare namespace InputReadonly {
     var displayName: string;
 }
-export { InputReadonly };
+export {};

package/dist/ui/{resources/RelationshipSelector → forms/InputResourceGroup}/Checkbox.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type InputCheckboxProps } from '../../forms/InputCheckbox';
+import { type InputCheckboxProps } from '../../forms/InputCheckbox/InputCheckbox';
 import { type CommerceLayerClient } from '@commercelayer/sdk';
 import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
 export interface CheckboxItem {

package/dist/ui/forms/InputResourceGroup/HookedInputResourceGroup.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { type InputResourceGroupProps } from './InputResourceGroup';
+interface Props extends Omit<InputResourceGroupProps, 'onChange' | 'defaultValues'> {
+    /**
+     * field name to match hook-form state
+     */
+    name: string;
+}
+/**
+ * `InputResourceGroup` component ready to be used with the `react-hook-form` context.
+ * Since it will perform api requests to fetch list of options, it also needs to access `CoreSdkProvider` context.
+ * @see InputResourceGroup
+ */
+export declare const HookedInputResourceGroup: React.FC<Props>;
+export {};

package/dist/ui/forms/InputResourceGroup/InputResourceGroup.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { type QueryFilter } from '@commercelayer/sdk/lib/cjs/query';
+import { type FullListProps } from './FullList';
+export interface InputResourceGroupProps extends Omit<FullListProps, 'totalCount'> {
+    /**
+     * Number of item to be shown in the preview list
+     * @default 5
+     */
+    previewLimit?: number;
+    /**
+     * SDK filter query to be applied when fetching the list of resources
+     */
+    filters?: QueryFilter;
+    /**
+     * Hide the component when there is only one item.
+     */
+    hideWhenSingleItem?: boolean;
+    /**
+     * Show icon in checkbox selectors
+     */
+    showCheckboxIcon?: boolean;
+}
+/**
+ * Input component that allows to select multiple resources. The list of options is automatically fetched from the API using the configuration provided as props.
+ * When number of fetched options is greater than `previewLimit` provided, a button will be shown to open an overlay with the full list of resources (infinite scrolling) and a search box on top.
+ * <blockquote type='info'>It's possible to mount the component with some `defaultValues` that will be always shown checked on top of the preview list, to ensure that user will always see the already checked options.</blockquote>
+ */
+export declare const InputResourceGroup: React.FC<InputResourceGroupProps>;

package/dist/ui/forms/InputResourceGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { HookedInputResourceGroup } from './HookedInputResourceGroup';
+export { InputResourceGroup, type InputResourceGroupProps } from './InputResourceGroup';

package/dist/ui/forms/InputSelect/Async.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { type StylesConfig } from 'react-select';
 import { type SetRequired } from 'type-fest';
-import { type InputSelectProps, type SelectValue } from './';
+import { type InputSelectProps, type SelectValue } from './InputSelect';
 interface AsyncSelectComponentProps extends Omit<SetRequired<InputSelectProps, 'loadAsyncValues'>, 'label' | 'hint'> {
     styles: StylesConfig<SelectValue>;
 }

package/dist/ui/{hook-form → forms/InputSelect}/HookedInputSelect.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type InputSelectProps } from '../forms/InputSelect';
+import { type InputSelectProps } from './InputSelect';
 interface Props extends Omit<InputSelectProps, 'onSelect' | 'defaultValue'> {
     /**
      * field name to match hook-form state
@@ -27,8 +27,8 @@ interface Props extends Omit<InputSelectProps, 'onSelect' | 'defaultValue'> {
  * Value to be stored in the field can be controlled from the `pathToValue` prop.
  * @see InputSelect
  */
-declare function HookedInputSelect({ name, pathToValue, ...props }: Props): JSX.Element;
-declare namespace HookedInputSelect {
+export declare function HookedInputSelect({ name, pathToValue, ...props }: Props): JSX.Element;
+export declare namespace HookedInputSelect {
     var displayName: string;
 }
-export { HookedInputSelect };
+export {};

package/dist/ui/forms/InputSelect/InputSelect.d.ts

@@ -0,0 +1,91 @@
+import { type InputWrapperBaseProps } from '../../internals/InputWrapper';
+import { type FocusEventHandler } from 'react';
+import { type MultiValue, type SingleValue } from 'react-select';
+export type GroupedSelectValues = Array<{
+    label: string;
+    options: SelectValue[];
+}>;
+export interface SelectValue {
+    value: string | number;
+    label: string;
+    meta?: Record<string, any>;
+}
+export type PossibleSelectValue = MultiValue<SelectValue> | SingleValue<SelectValue>;
+export interface InputSelectProps extends InputWrapperBaseProps {
+    initialValues: GroupedSelectValues | SelectValue[];
+    defaultValue?: SelectValue | SelectValue[];
+    placeholder?: string;
+    isLoading?: boolean;
+    loadingText?: string;
+    isClearable?: boolean;
+    isDisabled?: boolean;
+    isSearchable?: boolean;
+    isMulti?: boolean;
+    isOptionDisabled?: () => boolean;
+    onSelect: (value: PossibleSelectValue) => void;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    name?: string;
+    menuIsOpen?: boolean;
+    noOptionsMessage?: string;
+    className?: string;
+    /**
+     * Function to load async values on search
+     */
+    loadAsyncValues?: (inputValue: string) => Promise<GroupedSelectValues | SelectValue[]>;
+    /**
+     * Debounce time in milliseconds for async search
+     * Only works when `loadAsyncValues` is provided
+     */
+    debounceMs?: number;
+}
+export declare function InputSelect({ label, hint, feedback, menuIsOpen, initialValues, defaultValue, isClearable, isLoading, loadingText, placeholder, isDisabled, isOptionDisabled, isSearchable, onSelect, isMulti, onBlur, name, className, loadAsyncValues, debounceMs, noOptionsMessage, ...rest }: InputSelectProps): JSX.Element;
+export declare namespace InputSelect {
+    var displayName: string;
+}
+/**
+ * Helper function to understand and refine type of a single selected value
+ * @param selectedValue possible value returned from select component
+ * @returns true if selected value is single, from this point TypeScript will treat this as `SelectValue` type
+ */
+export declare function isSingleValueSelected(selectedValue: PossibleSelectValue): selectedValue is SelectValue;
+/**
+ * Helper function to understand and refine type of a set of selected values
+ * @param selectedValue possible value returned from select component
+ * @returns true if selected value is an array of selected values, from this point TypeScript will treat this as `SelectValue[]` type
+ */
+export declare function isMultiValueSelected(selectedValue: PossibleSelectValue): selectedValue is SelectValue[];
+/**
+ * Type-guard to check if prop `initialValues` is a GroupedSelectValues or SelectValue
+ */
+export declare function isGroupedSelectValues(initialValues?: GroupedSelectValues | SelectValue[]): initialValues is GroupedSelectValues;
+/**
+ * Helper function to extract only a specific property from the `SelectValue`
+ * @param selectedValue possible value returned from select component
+ * @param pathToValue optional path.to.property. Default is `value`
+ * @returns a string or an array of strings.
+ * Examples:
+ * ```
+ * flatSelectValues({value: 'ABCD', label: 'T-Shirt XL'})
+ * // returns 'ABCD'
+ *
+ * flatSelectValues([
+ *   {value: 'ABCD', label: 'T-Shirt M'},
+ *   {value: '1234', label: 'T-Shirt XL'},
+ * ], 'label')
+ * // returns ['T-Shirt M', 'T-Shirt XL']
+ * ```
+ */
+export declare function flatSelectValues(selectedValue: PossibleSelectValue, pathToValue?: string): null | string | Array<string | number>;
+/**
+ * To be used when storing the flatten value and there is the need
+ * to retrieve the `defaultValue` to pass as <InputSelect> prop
+ * @param currentValue the current value that is being stored in app state
+ * @param initialValues the array of SelectValue objects that should contain the `currentValue`
+ * @param pathToValue optional path.to.property. Default is `value`
+ * @returns the matched value or values, otherwise undefined.
+ */
+export declare function getDefaultValueFromFlatten({ currentValue, initialValues, pathToValue }: {
+    currentValue?: string | Array<string | number> | null;
+    initialValues?: GroupedSelectValues | SelectValue[];
+    pathToValue?: string;
+}): SelectValue | SelectValue[] | undefined;

package/dist/ui/forms/InputSelect/Select.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type StylesConfig } from 'react-select';
-import { type InputSelectProps, type SelectValue } from './';
+import { type InputSelectProps, type SelectValue } from './InputSelect';
 interface SelectComponentProps extends Omit<InputSelectProps, 'loadAsyncValues' | 'label' | 'hint'> {
     styles: StylesConfig<SelectValue>;
 }

package/dist/ui/forms/InputSelect/index.d.ts

@@ -1,91 +1,2 @@
-import { type InputWrapperBaseProps } from '../../internals/InputWrapper';
-import { type FocusEventHandler } from 'react';
-import { type MultiValue, type SingleValue } from 'react-select';
-export type GroupedSelectValues = Array<{
-    label: string;
-    options: SelectValue[];
-}>;
-export interface SelectValue {
-    value: string | number;
-    label: string;
-    meta?: Record<string, any>;
-}
-export type PossibleSelectValue = MultiValue<SelectValue> | SingleValue<SelectValue>;
-export interface InputSelectProps extends InputWrapperBaseProps {
-    initialValues: GroupedSelectValues | SelectValue[];
-    defaultValue?: SelectValue | SelectValue[];
-    placeholder?: string;
-    isLoading?: boolean;
-    loadingText?: string;
-    isClearable?: boolean;
-    isDisabled?: boolean;
-    isSearchable?: boolean;
-    isMulti?: boolean;
-    isOptionDisabled?: () => boolean;
-    onSelect: (value: PossibleSelectValue) => void;
-    onBlur?: FocusEventHandler<HTMLInputElement>;
-    name?: string;
-    menuIsOpen?: boolean;
-    noOptionsMessage?: string;
-    className?: string;
-    /**
-     * Function to load async values on search
-     */
-    loadAsyncValues?: (inputValue: string) => Promise<GroupedSelectValues | SelectValue[]>;
-    /**
-     * Debounce time in milliseconds for async search
-     * Only works when `loadAsyncValues` is provided
-     */
-    debounceMs?: number;
-}
-export declare function InputSelect({ label, hint, feedback, menuIsOpen, initialValues, defaultValue, isClearable, isLoading, loadingText, placeholder, isDisabled, isOptionDisabled, isSearchable, onSelect, isMulti, onBlur, name, className, loadAsyncValues, debounceMs, noOptionsMessage, ...rest }: InputSelectProps): JSX.Element;
-export declare namespace InputSelect {
-    var displayName: string;
-}
-/**
- * Helper function to understand and refine type of a single selected value
- * @param selectedValue possible value returned from select component
- * @returns true if selected value is single, from this point TypeScript will treat this as `SelectValue` type
- */
-export declare function isSingleValueSelected(selectedValue: PossibleSelectValue): selectedValue is SelectValue;
-/**
- * Helper function to understand and refine type of a set of selected values
- * @param selectedValue possible value returned from select component
- * @returns true if selected value is an array of selected values, from this point TypeScript will treat this as `SelectValue[]` type
- */
-export declare function isMultiValueSelected(selectedValue: PossibleSelectValue): selectedValue is SelectValue[];
-/**
- * Type-guard to check if prop `initialValues` is a GroupedSelectValues or SelectValue
- */
-export declare function isGroupedSelectValues(initialValues?: GroupedSelectValues | SelectValue[]): initialValues is GroupedSelectValues;
-/**
- * Helper function to extract only a specific property from the `SelectValue`
- * @param selectedValue possible value returned from select component
- * @param pathToValue optional path.to.property. Default is `value`
- * @returns a string or an array of strings.
- * Examples:
- * ```
- * flatSelectValues({value: 'ABCD', label: 'T-Shirt XL'})
- * // returns 'ABCD'
- *
- * flatSelectValues([
- *   {value: 'ABCD', label: 'T-Shirt M'},
- *   {value: '1234', label: 'T-Shirt XL'},
- * ], 'label')
- * // returns ['T-Shirt M', 'T-Shirt XL']
- * ```
- */
-export declare function flatSelectValues(selectedValue: PossibleSelectValue, pathToValue?: string): null | string | Array<string | number>;
-/**
- * To be used when storing the flatten value and there is the need
- * to retrieve the `defaultValue` to pass as <InputSelect> prop
- * @param currentValue the current value that is being stored in app state
- * @param initialValues the array of SelectValue objects that should contain the `currentValue`
- * @param pathToValue optional path.to.property. Default is `value`
- * @returns the matched value or values, otherwise undefined.
- */
-export declare function getDefaultValueFromFlatten({ currentValue, initialValues, pathToValue }: {
-    currentValue?: string | Array<string | number> | null;
-    initialValues?: GroupedSelectValues | SelectValue[];
-    pathToValue?: string;
-}): SelectValue | SelectValue[] | undefined;
+export { HookedInputSelect } from './HookedInputSelect';
+export { InputSelect, flatSelectValues, getDefaultValueFromFlatten, isGroupedSelectValues, isMultiValueSelected, isSingleValueSelected, type InputSelectProps, type SelectValue } from './InputSelect';

package/dist/ui/forms/InputSimpleSelect/HookedInputSimpleSelect.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { type InputSimpleSelectProps } from './InputSimpleSelect';
+interface Props extends InputSimpleSelectProps {
+    /**
+     * field name to match hook-form state
+     */
+    name: string;
+    /**
+     * show validation error message underneath
+     */
+    showValidation?: boolean;
+}
+/**
+ * `InputToggleListBox` component ready to be used with the `react-hook-form` context.
+ * @see InputSimpleSelect
+ */
+export declare function HookedInputSimpleSelect({ name, showValidation, ...props }: Props): JSX.Element;
+export declare namespace HookedInputSimpleSelect {
+    var displayName: string;
+}
+export {};