@dfds-ui/forms 2.0.26-alpha.06ae76d8 → 2.0.26-alpha.a10b16da

package/cjs/index.d.ts

@@ -10,6 +10,7 @@ export * from './password-field/PasswordField';
 export * from './radio';
 export * from './rating';
 export * from './select-field/AsyncSelectField';
+export * from './select-field/CreatableSelectField';
 export * from './select-field/NativeSelectField';
 export * from './select-field/SelectField';
 export * from './switch/index';

package/cjs/index.js

@@ -135,6 +135,17 @@ Object.keys(_AsyncSelectField).forEach(function (key) {
     }
   });
 });
+var _CreatableSelectField = require("./select-field/CreatableSelectField");
+Object.keys(_CreatableSelectField).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CreatableSelectField[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CreatableSelectField[key];
+    }
+  });
+});
 var _NativeSelectField = require("./select-field/NativeSelectField");
 Object.keys(_NativeSelectField).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -1,25 +1,14 @@
 import React from 'react';
-import CreatableSelect from 'react-select/creatable';
+import { CreatableProps } from 'react-select/creatable';
 import { ActionMeta, createFilter, GroupBase, MultiValue, OptionsOrGroups, SingleValue } from 'react-select';
 import { BaseFieldProps } from '../types';
-export declare type BaseReactSelectProps = Omit<React.PropsWithRef<CreatableSelect>, 'size' | 'css'>;
-export declare type Size = 'small' | 'medium' | 'large';
-export declare const ReactSelectWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-} & {
-    error?: boolean | undefined;
-    size?: string | undefined;
-    arrow?: boolean | undefined;
-    selected?: boolean | undefined;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Menu: (props: any) => JSX.Element;
-export declare type SelectFieldProps<T = string> = BaseFieldProps & {
+declare type Size = 'small' | 'medium' | 'large';
+export declare type CreatableSelectFieldProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = BaseFieldProps & CreatableProps<Option, IsMulti, Group> & {
     assistiveText?: string;
     autoFocus?: boolean;
     className?: string;
     components?: any;
-    defaultValue?: SingleValue<T>;
+    defaultValue?: SingleValue<Option>;
     errorMessage?: string;
     /**
      * Configuration object passed to react-select createFilter function to create [custom filter
@@ -42,23 +31,103 @@ export declare type SelectFieldProps<T = string> = BaseFieldProps & {
     menuIsOpen?: boolean;
     menuPlacement?: 'bottom' | 'auto' | 'top';
     onBlur?: (value: any) => void;
-    onChange?: (newValue: SingleValue<T> | MultiValue<T>, actionMeta: ActionMeta<T>) => void;
-    onSelect?: (value: SingleValue<T> | MultiValue<T>) => void;
-    options?: OptionsOrGroups<T, GroupBase<T>>;
+    onChange?: (newValue: SingleValue<Option> | MultiValue<Option>, actionMeta: ActionMeta<Option>) => void;
+    onSelect?: (value: SingleValue<Option> | MultiValue<Option>) => void;
+    options?: OptionsOrGroups<Option, GroupBase<Option>>;
     placeholder?: string;
     prefix?: React.ReactNode;
     styles?: any;
     suffix?: React.ReactNode;
-    value?: SingleValue<T> | MultiValue<T>;
+    value?: SingleValue<Option> | MultiValue<Option>;
     visualSize?: Size;
 };
-declare function CreatableSelectFieldInner<T>({ assistiveText, components, defaultValue, disabled, errorMessage, filterConfig, help, helpPlacement, hideAsterisk, isClearable, isMulti, isSearchable, label, name, onBlur, onChange, onSelect, options, placeholder, required, styles, value, visualSize, ...rest }: SelectFieldProps<T>, ref: React.ForwardedRef<any>): JSX.Element;
-export declare const CreatableSelectField: <T>(props: BaseFieldProps & {
+declare const CreatableSelectFieldInner: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ assistiveText, components, defaultValue, disabled, errorMessage, filterConfig, help, helpPlacement, hideAsterisk, isClearable, isMulti, isSearchable, label, name, onBlur, onChange, onSelect, options, placeholder, required, styles, value, visualSize, ...rest }: CreatableSelectFieldProps<Option, IsMulti, Group>, ref: React.ForwardedRef<any>) => JSX.Element;
+export declare const CreatableSelectField: <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/useCreatable").CreatableAdditionalProps<Option, Group> & {
     assistiveText?: string | undefined;
     autoFocus?: boolean | undefined;
     className?: string | undefined;
     components?: any;
-    defaultValue?: SingleValue<T> | undefined;
+    defaultValue?: SingleValue<Option> | undefined;
     errorMessage?: string | undefined;
     /**
      * Configuration object passed to react-select createFilter function to create [custom filter
@@ -81,14 +150,14 @@ export declare const CreatableSelectField: <T>(props: BaseFieldProps & {
     menuIsOpen?: boolean | undefined;
     menuPlacement?: "auto" | "top" | "bottom" | undefined;
     onBlur?: ((value: any) => void) | undefined;
-    onChange?: ((newValue: SingleValue<T> | MultiValue<T>, actionMeta: ActionMeta<T>) => void) | undefined;
-    onSelect?: ((value: SingleValue<T> | MultiValue<T>) => void) | undefined;
-    options?: OptionsOrGroups<T, GroupBase<T>> | undefined;
+    onChange?: ((newValue: MultiValue<Option> | SingleValue<Option>, actionMeta: ActionMeta<Option>) => void) | undefined;
+    onSelect?: ((value: MultiValue<Option> | SingleValue<Option>) => void) | undefined;
+    options?: OptionsOrGroups<Option, GroupBase<Option>> | undefined;
     placeholder?: string | undefined;
     prefix?: React.ReactNode;
     styles?: any;
     suffix?: React.ReactNode;
-    value?: SingleValue<T> | MultiValue<T> | undefined;
+    value?: MultiValue<Option> | SingleValue<Option> | undefined;
     visualSize?: Size | undefined;
 } & {
     ref?: React.ForwardedRef<any> | undefined;