@dfds-ui/forms 2.0.20-alpha.4a92bbb9 → 2.0.20-alpha.7dd0f764

package/cjs/assistive-text/AssistiveText.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare type AssistiveTextProps = {
+    id?: string;
+    disabled?: boolean;
+    children: React.ReactNode;
+    className?: string;
+};
+export declare const AssistiveText: ({ id, disabled, className, children }: AssistiveTextProps) => JSX.Element;
+export default AssistiveText;

package/cjs/asterisk/Asterisk.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare type AsteriskProps = {
+    /**
+     * Class name to be assigned to the component
+     */
+    className?: string;
+};
+export declare const Asterisk: ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;
+export default Asterisk;

package/cjs/checkbox/Checkbox.d.ts

@@ -0,0 +1,65 @@
+import React, { ReactNode } from 'react';
+declare type CheckboxSize = 'medium' | 'small';
+export declare type CheckboxProps = {
+    /**
+     * Field name.
+     */
+    name: string;
+    /**
+     * Indicate that the checkbox is checked.
+     *
+     * Setting to either true or false will make this a controlled component.
+     */
+    checked?: boolean;
+    /**
+     * Indicate that the checkbox is defaultChecked.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Class name to be assigned to the component.
+     */
+    className?: string;
+    /**
+     * Field label.
+     */
+    value?: string;
+    /**
+     * Indicates that the radio button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Indicates an error in the field.
+     */
+    error?: boolean;
+    /**
+     * Additional help.
+     *
+     * **This is an experimental prop and the behavior might change.**
+     */
+    help?: string;
+    /**
+     * If true the checkbox will be rendered in indeterminate state (visual only).
+     */
+    indeterminate?: boolean;
+    /**
+     * Size variant.
+     */
+    visualSize?: CheckboxSize;
+    /**
+     * Controls the vertical alignment of the checkbox in relation to the label.
+     */
+    inputVerticalAlignment?: 'center' | 'top';
+    /**
+     * Callback when the checkbox is checked or unchecked.
+     */
+    onChange?: JSX.IntrinsicElements['input']['onChange'];
+    /**
+     * Callback when the label (or checkbox control) is clicked.
+     */
+    onLabelClick?: JSX.IntrinsicElements['label']['onClick'];
+    children?: ReactNode;
+};
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+/** @deprecated Use Checkbox */
+export declare const CheckboxField: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/cjs/checkbox/CheckboxContext.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CheckboxProps } from './Checkbox';
+declare type CheckboxContextProps = {
+    children?: React.ReactNode;
+    visualSize: NonNullable<CheckboxProps['visualSize']>;
+    error: CheckboxProps['error'];
+};
+export declare const CheckboxContext: React.Context<CheckboxContextProps | undefined>;
+export declare const CheckboxContextProvider: React.FC<{
+    value: CheckboxContextProps;
+}>;
+declare const useCheckboxContext: () => CheckboxContextProps | undefined;
+export default useCheckboxContext;

package/cjs/checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { BaseFieldProps } from '../types';
+import { CheckboxProps } from './Checkbox';
+export declare type CheckboxGroupProps = Pick<BaseFieldProps, 'help' | 'label' | 'required' | 'hideAsterisk' | 'disabled' | 'errorMessage' | 'assistiveText'> & Pick<CheckboxProps, 'visualSize'> & {
+    children: ReactNode;
+    /**
+     * Indicates that the CheckboxGroup has an error.
+     *
+     * You can also set the `errorMessage` prop to indicate an error but setting `error` will trigger
+     * the visual indication regardless of the value of `errorMessage`. Setting `errorMessage` and setting
+     * `error` to `false` will however still render the visual indication.
+     */
+    error?: boolean;
+    /**
+     * Class name to be assigned to the component
+     */
+    className?: string;
+    column?: boolean;
+};
+export declare const CheckboxGroup: ({ visualSize, help, label, children, column, assistiveText, errorMessage, error, required, className, disabled, ...rest }: CheckboxGroupProps) => JSX.Element;

package/cjs/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Checkbox';
+export * from './CheckboxGroup';

package/cjs/counter/Counter.d.ts

@@ -0,0 +1,66 @@
+import React, { ReactNode } from 'react';
+declare type Size = 's' | 'm';
+export declare type CounterProps = {
+    /**
+     * Minimum value
+     */
+    minValue: number;
+    /**
+     * Maximum value
+     */
+    maxValue: number;
+    /**
+     * Disables the minus button
+     */
+    disableMin?: boolean;
+    /**
+     * Disables the plus button
+     */
+    disableMax?: boolean;
+    /**
+     * Class name
+     */
+    className?: string;
+    /**
+     * Disables input of counter
+     */
+    disableInput?: boolean;
+    /**
+     * Name of the input element
+     */
+    name?: string;
+    /**
+     * Initial value of the counter, if not specified it's set to `minValue`
+     */
+    value?: number;
+    /**
+     * Sets default value
+     */
+    defaultValue?: number;
+    /**
+     * Set aria label on plus/increase
+     */
+    increaseAriaLabel?: string;
+    /**
+     * Set aria label on minus/decrease
+     */
+    decreaseAriaLabel?: string;
+    /**
+     * Disable tool tips
+     */
+    disableToolTips?: boolean;
+    /**
+     * Callback when value changes
+     */
+    onChange?: (arg: number, event: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Label to display instead of the input element, see example below
+     */
+    text?: ReactNode;
+    /**
+     * Size of counter
+     */
+    size?: Size;
+};
+export declare const Counter: React.ForwardRefExoticComponent<CounterProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/cjs/counter/index.d.ts

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

package/cjs/enhanced/EnhancedField.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+declare type ReactInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export declare type EnhancedInputProps<TValue> = Omit<EnhancedFieldProps, 'value'> & {
+    value?: TValue;
+};
+export declare type EnhancedFieldProps = Omit<ReactInputProps, 'size' | 'css'> & {
+    name?: string;
+    /**
+     * Label to be displayed
+     */
+    label?: React.ReactNode;
+    /**
+     * Icon to be displayed
+     */
+    icon?: React.ElementType;
+    className?: string;
+    onClick?: (e: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+};
+export declare const EnhancedField: React.ForwardRefExoticComponent<Pick<EnhancedFieldProps, "max" | "required" | "type" | "key" | "id" | "height" | "width" | "name" | "color" | "translate" | "value" | "hidden" | "form" | "label" | "slot" | "style" | "title" | "dir" | "pattern" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "enterKeyHint" | "inputMode" | "tabIndex" | "disabled" | "multiple" | "icon" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "maxLength" | "min" | "minLength" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "readOnly" | "src" | "step" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLInputElement>>;
+export default EnhancedField;

package/cjs/enhanced/index.d.ts

@@ -0,0 +1 @@
+export * from './EnhancedField';

package/cjs/error-text/ErrorText.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type ErrorTextProps = {
+    id?: string;
+    children: React.ReactNode;
+    className?: string;
+};
+export declare const ErrorText: ({ id, className, children }: ErrorTextProps) => JSX.Element;
+export default ErrorText;

package/cjs/field-wrap/FieldWrap.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { BaseFieldProps, Size } from '../types';
+export declare type FieldWrapProps = BaseFieldProps & {
+    size: Size;
+    extraAssistiveText?: string;
+    disabled?: boolean;
+    className?: string;
+    children?: ReactNode;
+};
+export declare const FieldWrap: ({ name, assistiveText, errorMessage, size, required, hideAsterisk, label, help, extraAssistiveText, disabled, className, children, }: FieldWrapProps) => JSX.Element;

package/cjs/field-wrap/index.d.ts

@@ -0,0 +1 @@
+export * from './FieldWrap';

package/cjs/help-icon/HelpIcon.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type HelpIconProps = {
+    content: string;
+    className?: string;
+    disabled?: boolean;
+};
+export declare const HelpIcon: ({ content, className, disabled }: HelpIconProps) => JSX.Element;
+export default HelpIcon;

package/cjs/index.d.ts

@@ -0,0 +1,18 @@
+export * from './assistive-text/AssistiveText';
+export * from './checkbox';
+export * from './counter/Counter';
+export * from './enhanced';
+export * from './error-text/ErrorText';
+export * from './field-wrap';
+export * from './help-icon/HelpIcon';
+export * from './label/Label';
+export * from './password-field/PasswordField';
+export * from './radio';
+export * from './rating';
+export * from './select-field/AsyncSelectField';
+export * from './select-field/NativeSelectField';
+export * from './select-field/SelectField';
+export * from './switch/index';
+export * from './tel-field/TelField';
+export * from './text-field/TextField';
+export * from './textarea-field/TextareaField';

package/cjs/label/Label.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import { Size } from '../types';
+export declare type LabelProps = {
+    children: ReactNode;
+    className?: string;
+    hideAsterisk?: boolean;
+    required?: boolean;
+    visualSize?: Size;
+    disabled?: boolean;
+} & React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+export declare const Label: ({ visualSize, required, hideAsterisk, disabled, className, children, ...rest }: LabelProps) => JSX.Element;

package/cjs/password-field/PasswordField.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TextFieldProps } from '../text-field/TextField';
+export declare type PasswordFieldProps = Omit<TextFieldProps, 'icon' | 'inputType'>;
+export declare const PasswordField: React.ForwardRefExoticComponent<PasswordFieldProps & React.RefAttributes<HTMLInputElement>>;

package/cjs/radio/Radio.d.ts

@@ -0,0 +1,51 @@
+import React, { ReactNode } from 'react';
+declare type RadioSize = 'medium' | 'small';
+export declare type RadioStyleState = 'checked';
+export declare type RadioProps = {
+    /**
+     * Field name.
+     */
+    name: string;
+    /**
+     * Indicate that the radio button is checked
+     */
+    checked?: boolean;
+    /**
+     *
+     */
+    defaultChecked?: boolean;
+    /**
+     * Field label.
+     */
+    label?: ReactNode;
+    /**
+     * Class name to be assigned to the component
+     */
+    className?: string;
+    /**
+     * Field label.
+     */
+    value?: string;
+    /**
+     * Indicates that the radio button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Indicates an error in the field.
+     */
+    error?: boolean;
+    /**
+     * Size variant.
+     */
+    visualSize?: RadioSize;
+    /**
+     * Callback when the radio button is checked or unchecked
+     */
+    onChange?: JSX.IntrinsicElements['input']['onChange'];
+    Icon?: React.ComponentType;
+    styledAs?: RadioStyleState;
+};
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+/** @deprecated Use Radio */
+export declare const RadioField: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/cjs/radio/RadioContext.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { RadioProps } from './Radio';
+declare type RadioContextProps = {
+    children?: React.ReactNode;
+    visualSize: NonNullable<RadioProps['visualSize']>;
+    error: RadioProps['error'];
+};
+export declare const RadioContext: React.Context<RadioContextProps | undefined>;
+export declare const RadioContextProvider: React.FC<{
+    value: RadioContextProps;
+}>;
+declare const useRadioContext: () => RadioContextProps | undefined;
+export default useRadioContext;

package/cjs/radio/RadioGroup.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { BaseFieldProps } from '../types';
+import { RadioProps } from './Radio';
+export declare type RadioGroupProps = Pick<BaseFieldProps, 'help' | 'label' | 'required' | 'hideAsterisk' | 'disabled' | 'errorMessage'> & Pick<RadioProps, 'visualSize'> & {
+    children: ReactNode;
+    /**
+     * Class name to be assigned to the component
+     */
+    className?: string;
+    column?: boolean;
+};
+export declare const RadioGroup: ({ visualSize, label, children, column, errorMessage, help, required, hideAsterisk, className, disabled, }: RadioGroupProps) => JSX.Element;

package/cjs/radio/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Radio';
+export * from './RadioGroup';

package/cjs/rating/Rating.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { FieldWrapProps } from '../field-wrap/FieldWrap';
+import { Size } from '../types';
+export declare type RatingProps = {
+    /**
+     * Amount of related checkboxes
+     */
+    rangeCardinality: number;
+    /**
+     * Name for the checkbox group
+     */
+    name: string;
+    /**
+     * Hint text on the left
+     */
+    leadingHint?: string;
+    /**
+     * Hint text on the right
+     */
+    trailingHint?: string;
+    /**
+     * Labels on top of the radio selectors, a string returning function called with the selector's index
+     */
+    scaleLabels?: (index: number) => string;
+    /**
+     * If used as a controlled component, this value sets the selected radio
+     */
+    value?: number;
+    /**
+     * Initial selected value
+     */
+    defaultValue?: number;
+    /**
+     * Callback when the user changes the selected value
+     */
+    onChange?: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    showScaleLabels?: boolean;
+    /**
+     * When this property is `true`, it styles the radios to the left of the selected as `checked`
+     */
+    cumulative?: boolean;
+    Icon?: (index: number) => React.ComponentType;
+};
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLInputElement>>;
+export declare type RatingFieldProps = RatingProps & Omit<FieldWrapProps, 'size' | 'placeholder' | 'helpPlacement' | 'children'> & {
+    size: Exclude<Size, 'large'>;
+};
+/**
+ * The `RatingField` component will allow the user to provide feedback by ranking things on a specified scale.
+ */
+export declare const RatingField: React.ForwardRefExoticComponent<RatingProps & Omit<FieldWrapProps, "children" | "size" | "placeholder" | "helpPlacement"> & {
+    size: Exclude<Size, 'large'>;
+} & React.RefAttributes<HTMLInputElement>>;
+export default RatingField;

package/cjs/rating/index.d.ts

@@ -0,0 +1 @@
+export * from './Rating';

package/cjs/select-field/AsyncSelectField.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+import { GroupBase } from 'react-select';
+import { AsyncProps } from 'react-select/async';
+import { BaseFieldProps } from '../types';
+declare type Size = 'small' | 'medium' | 'large';
+export declare type AsyncSelectFieldProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = BaseFieldProps & AsyncProps<Option, IsMulti, Group> & {
+    isClearable?: boolean;
+    value?: any;
+    visualSize?: Size;
+};
+declare const AsyncSelectFieldInner: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ assistiveText, components, disabled, errorMessage, help, helpPlacement, hideAsterisk, isClearable, label, name, onBlur, onChange, required, visualSize, ...rest }: AsyncSelectFieldProps<Option, IsMulti, Group>, ref: React.ForwardedRef<any>) => JSX.Element;
+export declare const AsyncSelectField: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: BaseFieldProps & Omit<Pick<import("react-select/dist/declarations/src/Select").Props<Option, IsMulti, Group>, "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<Option, IsMulti, Group>, "tabIndex" | "options" | "placeholder" | "aria-live" | "components" | "isOptionDisabled" | "isRtl" | "styles" | "isDisabled" | "isMulti" | "controlShouldRenderValue" | "menuPlacement" | "menuPosition" | "loadingMessage" | "noOptionsMessage" | "backspaceRemovesValue" | "blurInputOnSelect" | "captureMenuScroll" | "closeMenuOnSelect" | "closeMenuOnScroll" | "escapeClearsValue" | "filterOption" | "formatGroupLabel" | "getOptionLabel" | "getOptionValue" | "isLoading" | "isSearchable" | "minMenuHeight" | "maxMenuHeight" | "menuIsOpen" | "menuShouldBlockScroll" | "menuShouldScrollIntoView" | "openMenuOnFocus" | "openMenuOnClick" | "pageSize" | "screenReaderStatus" | "tabSelectsValue">> & Partial<Pick<{
+    'aria-live': string;
+    backspaceRemovesValue: boolean;
+    blurInputOnSelect: boolean;
+    captureMenuScroll: boolean;
+    closeMenuOnSelect: boolean;
+    closeMenuOnScroll: boolean;
+    components: {};
+    controlShouldRenderValue: boolean;
+    escapeClearsValue: boolean;
+    filterOption: (option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, rawInput: string) => boolean;
+    formatGroupLabel: <Option_1, Group_1 extends GroupBase<Option_1>>(group: Group_1) => string;
+    getOptionLabel: <Option_2>(option: Option_2) => string;
+    getOptionValue: <Option_3>(option: Option_3) => string;
+    isDisabled: boolean;
+    isLoading: boolean;
+    isMulti: boolean;
+    isRtl: boolean;
+    isSearchable: boolean;
+    isOptionDisabled: <Option_4>(option: Option_4) => boolean;
+    loadingMessage: () => string;
+    maxMenuHeight: number;
+    minMenuHeight: number;
+    menuIsOpen: boolean;
+    menuPlacement: string;
+    menuPosition: string;
+    menuShouldBlockScroll: boolean;
+    menuShouldScrollIntoView: boolean;
+    noOptionsMessage: () => string;
+    openMenuOnFocus: boolean;
+    openMenuOnClick: boolean;
+    options: never[];
+    pageSize: number;
+    placeholder: string;
+    screenReaderStatus: ({ count }: {
+        count: number;
+    }) => string;
+    styles: {};
+    tabIndex: number;
+    tabSelectsValue: boolean;
+}, never>>, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<Option, IsMulti, Group>, "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<Option, IsMulti, Group>, "tabIndex" | "options" | "placeholder" | "aria-live" | "components" | "isOptionDisabled" | "isRtl" | "styles" | "isDisabled" | "isMulti" | "controlShouldRenderValue" | "menuPlacement" | "menuPosition" | "loadingMessage" | "noOptionsMessage" | "backspaceRemovesValue" | "blurInputOnSelect" | "captureMenuScroll" | "closeMenuOnSelect" | "closeMenuOnScroll" | "escapeClearsValue" | "filterOption" | "formatGroupLabel" | "getOptionLabel" | "getOptionValue" | "isLoading" | "isSearchable" | "minMenuHeight" | "maxMenuHeight" | "menuIsOpen" | "menuShouldBlockScroll" | "menuShouldScrollIntoView" | "openMenuOnFocus" | "openMenuOnClick" | "pageSize" | "screenReaderStatus" | "tabSelectsValue">> & Partial<Pick<{
+    'aria-live': string;
+    backspaceRemovesValue: boolean;
+    blurInputOnSelect: boolean;
+    captureMenuScroll: boolean;
+    closeMenuOnSelect: boolean;
+    closeMenuOnScroll: boolean;
+    components: {};
+    controlShouldRenderValue: boolean;
+    escapeClearsValue: boolean;
+    filterOption: (option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, rawInput: string) => boolean;
+    formatGroupLabel: <Option_1, Group_1 extends GroupBase<Option_1>>(group: Group_1) => string;
+    getOptionLabel: <Option_2>(option: Option_2) => string;
+    getOptionValue: <Option_3>(option: Option_3) => string;
+    isDisabled: boolean;
+    isLoading: boolean;
+    isMulti: boolean;
+    isRtl: boolean;
+    isSearchable: boolean;
+    isOptionDisabled: <Option_4>(option: Option_4) => boolean;
+    loadingMessage: () => string;
+    maxMenuHeight: number;
+    minMenuHeight: number;
+    menuIsOpen: boolean;
+    menuPlacement: string;
+    menuPosition: string;
+    menuShouldBlockScroll: boolean;
+    menuShouldScrollIntoView: boolean;
+    noOptionsMessage: () => string;
+    openMenuOnFocus: boolean;
+    openMenuOnClick: boolean;
+    options: never[];
+    pageSize: number;
+    placeholder: string;
+    screenReaderStatus: ({ count }: {
+        count: number;
+    }) => string;
+    styles: {};
+    tabIndex: number;
+    tabSelectsValue: boolean;
+}, never>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<Option> & import("react-select/dist/declarations/src/useAsync").AsyncAdditionalProps<Option, Group> & {
+    isClearable?: boolean | undefined;
+    value?: any;
+    visualSize?: Size | undefined;
+} & {
+    ref?: React.ForwardedRef<any> | undefined;
+}) => ReturnType<typeof AsyncSelectFieldInner>;
+export default AsyncSelectField;

package/cjs/select-field/NativeSelectField.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BaseFieldProps, Size } from '../types';
+export declare type NativeSelectFieldProps = BaseFieldProps & React.ComponentPropsWithRef<'select'> & {
+    className?: string;
+    visualSize?: Size;
+};
+export declare const NativeSelectField: React.ForwardRefExoticComponent<Pick<NativeSelectFieldProps, "required" | "key" | "id" | "name" | "color" | "translate" | "value" | "hidden" | "form" | "label" | "slot" | "style" | "title" | "dir" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "disabled" | "multiple" | "size" | "help" | "autoComplete" | "autoFocus" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "hideAsterisk" | "assistiveText" | "errorMessage" | "visualSize" | "helpPlacement"> & React.RefAttributes<HTMLSelectElement>>;
+export default NativeSelectField;