@7shifts/sous-chef 2.17.2 → 2.19.0

package/dist/src/forms/AsyncSelectField/index.d.ts

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

package/dist/src/forms/AsyncSelectField/types.d.ts

@@ -0,0 +1,5 @@
+import { SelectOptions } from '../SelectField/types';
+export declare type AsyncSelectOptions<T> = {
+    options: SelectOptions<T>;
+    hasMore: boolean;
+};

package/dist/src/forms/Caption/Caption.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = {
+    fieldId?: string;
+    children: React.ReactNode;
+};
+declare const Caption: React.FC<Props>;
+export default Caption;

package/dist/src/forms/Caption/index.d.ts

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

package/dist/src/forms/CheckboxField/CheckboxField.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+declare type Props = {
+    name: string;
+    /** If not provided it will generate a random id so the label links properly with the text input */
+    id?: string;
+    checked?: boolean;
+    onChange?: (e: boolean) => void;
+    onBlur?: (e: boolean) => void;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    error?: React.ReactNode;
+    disabled?: boolean;
+    /** This is used for setting the data-testid */
+    testId?: string;
+};
+/** CheckboxField form element. */
+declare const CheckboxField: React.FC<Props>;
+export default CheckboxField;

package/dist/src/forms/CheckboxField/index.d.ts

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

package/dist/src/forms/CurrencyField/CurrencyField.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { Props as TextFieldProps } from '../TextField/TextField';
+/**
+ * `CurrencyField` is like `TextField` but it auto-format the value when the user leaves the field.
+ *
+ * At the end, it is just a string formatted nicely. **You are in charge of validating the value and parsing it back to a value that you can use on your application**.
+ */
+declare const CurrencyField: React.ForwardRefExoticComponent<TextFieldProps & {
+    currencySymbol: string;
+} & Pick<TextFieldProps, "testId" | "id" | "name" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "disabled" | "caption" | "label" | "value" | "placeholder" | "error" | "autoFocus" | "defaultValue" | "autoComplete" | "maxLength"> & React.RefAttributes<HTMLInputElement>>;
+export default CurrencyField;

package/dist/src/forms/CurrencyField/index.d.ts

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

package/dist/src/forms/DateField/DateField.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+declare type Props = {
+    name: string;
+    /** If not provided it will generate a random id so the label links properly with the text input */
+    id?: string;
+    value?: Date;
+    disabledDays?: (day: Date) => boolean;
+    /** Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format */
+    format?: string;
+    initialMonth?: Date;
+    onChange?: (e: Date) => void;
+    onBlur?: () => void;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    error?: React.ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    defaultValue?: Date;
+    readOnly?: boolean;
+    onMonthChange?: (month: Date) => void;
+    testId?: string;
+};
+/** DateField form element. */
+declare const DateField: React.FC<Props>;
+export default DateField;

package/dist/src/forms/DateField/index.d.ts

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

package/dist/src/forms/DatePickerCalendar/DatePickerCalendar.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './date-picker-calendar.scss';
+declare type Props = {
+    classNames: typeof styles;
+    inputNode: HTMLElement;
+    onBlur: () => void;
+    onFocus: () => void;
+    tabIndex: number;
+    children: React.ReactNode;
+    showCalendar: boolean;
+    onClickOutside: () => void;
+    testId?: string;
+};
+declare const DatePickerCalendar: React.FC<Props>;
+export default DatePickerCalendar;

package/dist/src/forms/DatePickerCalendar/index.d.ts

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

package/dist/src/forms/DateRangeField/DateRangeField.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { WeekStart, DateRange, BlockedDays } from '../../utils/date';
+declare type Props = {
+    name: string;
+    /** If not provided it will generate a random id so the label links properly with the text input */
+    id?: string;
+    value?: DateRange;
+    /** It disable some dates so the user can't click on them. Refer to this [doc](https://react-day-picker.js.org/api/types/matcher) to see what values you can use. */
+    disabledDays?: BlockedDays;
+    /** Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format */
+    format?: string;
+    onChange?: (e: DateRange) => void;
+    onBlur?: () => void;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    error?: React.ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    weekStart?: WeekStart;
+    testId?: string;
+};
+/** DateRangeField form element. */
+declare const DateRangeField: React.FC<Props>;
+export default DateRangeField;

package/dist/src/forms/DateRangeField/FromDate/FromDate.d.ts

@@ -0,0 +1,17 @@
+import { WeekStart, BlockedDays } from '../../../utils/date';
+declare type Props = {
+    name: string;
+    id: string;
+    format: string;
+    disabledDays?: BlockedDays;
+    start?: Date;
+    end?: Date;
+    placeholder: string;
+    weekStart: WeekStart;
+    disabled?: boolean;
+    readOnly: boolean;
+    onChange: (e: Date) => void;
+    onDayClick: () => void;
+};
+declare const FromDate: ({ name, id, format, disabledDays, start, end, placeholder, weekStart, disabled, readOnly, onChange, onDayClick }: Props) => JSX.Element;
+export default FromDate;

package/dist/src/forms/DateRangeField/FromDate/index.d.ts

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

package/dist/src/forms/DateRangeField/ToDate/ToDate.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { WeekStart, BlockedDays } from '../../../utils/date';
+declare type Props = {
+    name: string;
+    format: string;
+    disabledDays?: BlockedDays;
+    start?: Date;
+    end?: Date;
+    placeholder: string;
+    weekStart: WeekStart;
+    disabled?: boolean;
+    readOnly: boolean;
+    onChange: (e: Date) => void;
+    onBlur: () => void;
+};
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/dist/src/forms/DateRangeField/ToDate/index.d.ts

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

package/dist/src/forms/DateRangeField/index.d.ts

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

package/dist/src/forms/ErrorMessage/ErrorMessage.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare type Props = {
+    fieldId?: string;
+    children: React.ReactNode;
+    testId?: string;
+};
+declare const ErrorMessage: React.FC<Props>;
+export default ErrorMessage;

package/dist/src/forms/ErrorMessage/index.d.ts

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

package/dist/src/forms/Field/Field.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare type Props = {
+    id: string;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    error?: React.ReactNode;
+    children: React.ReactNode;
+    testId?: string;
+};
+declare const Field: React.FC<Props>;
+export default Field;

package/dist/src/forms/Field/index.d.ts

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

package/dist/src/forms/Form/Form.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FormikType } from './types';
+declare type Props = {
+    children: React.ReactNode;
+    onSubmit?: (e: Object) => void;
+    /** By default forms are `500px`. If you want the form to use all the space you can turn this ON. */
+    wide?: boolean;
+    /** If set it will controll the state of the form using `Formik` */
+    formik?: FormikType;
+    stackContent?: boolean;
+    testId?: string;
+};
+declare const Form: React.FC<Props>;
+export default Form;

package/dist/src/forms/Form/FormContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FormikType } from './types';
+export declare type FormContextType = {
+    formik?: FormikType;
+};
+declare const Context: React.Context<FormContextType>;
+export declare const useFormContext: () => FormContextType;
+export default Context;

package/dist/src/forms/Form/index.d.ts

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

package/dist/src/forms/Form/types.d.ts

@@ -0,0 +1,3 @@
+import { FormikState, FormikHelpers, FormikHandlers } from 'formik';
+/** The FormValues are `any` here as in Sous Chef we don't care about the shape of the form. We just need to link form fields with the formik state */
+export declare type FormikType = FormikState<any> & FormikHelpers<any> & FormikHandlers;

package/dist/src/forms/FormFeedback/FormFeedback.d.ts

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

package/dist/src/forms/FormFeedback/index.d.ts

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

package/dist/src/forms/FormRow/FormRow.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+declare type Size25Percent = '25%';
+export declare const SIZE_25_PERCENT: Size25Percent;
+declare type Size33Percent = '33.333%';
+export declare const SIZE_33_PERCENT: Size33Percent;
+declare type Size50Percent = '50%';
+export declare const SIZE_50_PERCENT: Size50Percent;
+declare type Size66Percent = '66.666%';
+export declare const SIZE_66_PERCENT: Size66Percent;
+declare type Size75Percent = '75%';
+export declare const SIZE_75_PERCENT: Size75Percent;
+declare type Size = Size25Percent | Size33Percent | Size50Percent | Size66Percent | Size75Percent;
+declare type Props = {
+    children: React.ReactNode;
+    columns?: number;
+    sizes?: Size[];
+    testId?: string;
+};
+/** Easily add form fields side by side with equal size. */
+declare const FormRow: React.FC<Props>;
+export default FormRow;

package/dist/src/forms/FormRow/index.d.ts

@@ -0,0 +1 @@
+export { default, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT } from './FormRow';

package/dist/src/forms/Label/Label.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare type Props = {
+    htmlFor: string;
+    children: React.ReactNode;
+    truncate?: boolean;
+};
+declare const Label: React.FC<Props>;
+export default Label;

package/dist/src/forms/Label/domain.d.ts

@@ -0,0 +1 @@
+export declare const isEllipsisActive: (e: HTMLElement) => boolean;

package/dist/src/forms/Label/index.d.ts

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

package/dist/src/forms/Label/useLabelTooltip.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type UseLabelTooltip = {
+    showTooltip: boolean;
+    shouldTruncate: boolean;
+};
+export declare const useLabelTooltip: (labelId: string, tooltipContent: React.ReactNode, truncate: boolean) => UseLabelTooltip;
+export {};

package/dist/src/forms/MultiSelectField/MultiSelectField.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { SelectOption, SelectOptions } from '../SelectField/types';
+declare type NoOptionsMessageFunction = (input: {
+    inputValue: string;
+}) => string | null;
+declare type Props<T> = {
+    name: string;
+    /** If not provided it will generate a random id so the label links properly with the text input */
+    id?: string;
+    value?: SelectOption<T>[];
+    options: SelectOptions<T>;
+    onChange?: (e: SelectOption<T>[]) => void;
+    onBlur?: (e: SelectOption<T>[]) => void;
+    CustomOption?: React.ElementType;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    error?: React.ReactNode;
+    placeholder?: string;
+    noOptionsMessage?: string | NoOptionsMessageFunction;
+    disabled?: boolean;
+    closeOnSelect?: boolean;
+    /** When the user opens the menu, if this prop is `true`, it will scroll the page into to the menu view (if its content falls under a scroll). It is recomended to disable this behaviour when using the `MultiSelectField` inside a modal. */
+    menuShouldScrollIntoView?: boolean;
+    testId?: string;
+};
+/** Component to make possible choose from a predefined options. */
+declare const MultiSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, label, caption, error, placeholder, noOptionsMessage, disabled, closeOnSelect, menuShouldScrollIntoView, testId }: Props<T>) => JSX.Element;
+export default MultiSelectField;

package/dist/src/forms/MultiSelectField/index.d.ts

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

package/dist/src/forms/PasswordCriteria/PasswordCriteria.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = {
+    met: boolean;
+    children: React.ReactNode;
+};
+declare const PasswordCriteria: React.FC<Props>;
+export default PasswordCriteria;

package/dist/src/forms/PasswordCriteria/index.d.ts

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

package/dist/src/forms/PasswordField/PasswordField.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { PasswordCriteria } from './types';
+declare type Props = {
+    name: string;
+    /** If not provided it will generate a random id so the label links properly with the text input */
+    id?: string;
+    value?: string;
+    onChange?: (e: string) => void;
+    onBlur?: (e: string) => void;
+    label?: React.ReactNode;
+    error?: React.ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    defaultValue?: string;
+    criterias?: PasswordCriteria[];
+    testId?: string;
+};
+/** It allows show and hide the password as well as displaying the criteria. */
+declare const PasswordField: React.FC<Props>;
+export default PasswordField;

package/dist/src/forms/PasswordField/index.d.ts

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

package/dist/src/forms/PasswordField/types.d.ts

@@ -0,0 +1,5 @@
+export declare type PasswordCriteria = {
+    key?: string;
+    label: string;
+    met: boolean;
+};

package/dist/src/forms/PercentageField/PercentageField.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Props as TextFieldProps } from '../TextField/TextField';
+/**
+ * `PercentageField` is an extended `TextField` input with validation and formatting in place to properly display percentage values.
+ * In its default state it only allows integers between 0 and 100, but it can be configured to allow decimals and negative values.
+ */
+declare const PercentageField: React.ForwardRefExoticComponent<{
+    max?: number | undefined;
+    min?: number | undefined;
+    precision?: number | undefined;
+    stepSize?: number | undefined;
+} & Pick<TextFieldProps, "testId" | "id" | "name" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "disabled" | "caption" | "label" | "value" | "placeholder" | "prefix" | "error" | "autoFocus" | "defaultValue" | "autoComplete"> & React.RefAttributes<HTMLInputElement>>;
+export default PercentageField;

package/dist/src/forms/PercentageField/index.d.ts

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

package/dist/src/forms/PillSelectField/PillSelectField.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { SelectOption } from '../SelectField/types';
+declare type Props<T> = {
+    name: string;
+    /** If not provided it will generate a random id so the label links properly with the pill select input */
+    id?: string;
+    value?: SelectOption<T>[];
+    options: SelectOption<T>[];
+    onChange?: (e: SelectOption<T>[]) => void;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    error?: React.ReactNode;
+    disabled?: boolean;
+    /** This is used for setting the data-testid */
+    testId?: string;
+};
+/** PillSelectField form element. */
+declare const PillSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, label, caption, error, disabled, testId }: Props<T>) => JSX.Element;
+export default PillSelectField;

package/dist/src/forms/PillSelectField/index.d.ts

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

package/dist/src/forms/RadioGroupBoxOption/RadioGroupBoxOption.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare type Props = {
+    value: string | number;
+    id?: string;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    children?: React.ReactNode;
+    testId?: string;
+};
+declare const RadioGroupBoxOption: ({ value, id: inputId, label, caption, testId, children }: Props) => JSX.Element;
+export default RadioGroupBoxOption;

package/dist/src/forms/RadioGroupBoxOption/index.d.ts

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

package/dist/src/forms/RadioGroupField/BoxOptions/BoxOptions.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare type Props = {
+    children: React.ReactNode;
+    columns?: 2 | 3 | 4;
+    testId?: string;
+};
+declare const BoxOptions: ({ children, columns, testId }: Props) => JSX.Element;
+export default BoxOptions;

package/dist/src/forms/RadioGroupField/BoxOptions/index.d.ts

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

package/dist/src/forms/RadioGroupField/RadioGroupField.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import RadioGroupOption from '../RadioGroupOption';
+import RadioGroupBoxOption from '../RadioGroupBoxOption';
+declare type Props = {
+    name: string;
+    value?: string | number;
+    onChange?: (e: string | number) => void;
+    label?: React.ReactNode;
+    error?: React.ReactNode;
+    /**
+     * **DEPRECATED** *Use the `columns` prop instead.*<br/><br/>When true it will place the options on the same line up to 4 options per line. It only applies when using `RadioGroupOption` as children
+     *
+     * @deprecated use the `columns` prop to tell how many inline columns you want. This will signal you want inline radio options
+     */
+    inline?: boolean;
+    disabled?: boolean;
+    children: React.ReactElement<typeof RadioGroupOption> | React.ReactElement<typeof RadioGroupOption>[] | React.ReactElement<typeof RadioGroupBoxOption> | React.ReactElement<typeof RadioGroupBoxOption>[];
+    /** This is used for setting the data-testid */
+    testId?: string;
+    /** It states the radio options will be inline and defines how many columns it will have */
+    columns?: 2 | 3 | 4;
+};
+/** RadioGroupField form element. */
+declare const RadioGroupField: ({ name, value, onChange, label, error, inline, disabled, children, testId, columns }: Props) => JSX.Element;
+export default RadioGroupField;

package/dist/src/forms/RadioGroupField/RadioGroupFieldContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare type RadioGroupFieldContextType = {
+    name: string;
+    value?: string | number;
+    disabled: boolean;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+declare const RadioGroupFieldContext: React.Context<RadioGroupFieldContextType | null>;
+export declare const useRadioGroupFieldContext: () => RadioGroupFieldContextType;
+export default RadioGroupFieldContext;

package/dist/src/forms/RadioGroupField/RadioOptions/RadioOptions.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare type Props = {
+    children: React.ReactNode;
+    inline: boolean;
+    columns?: 2 | 3 | 4;
+    testId?: string;
+};
+declare const RadioOptions: ({ children, inline, columns, testId }: Props) => JSX.Element;
+export default RadioOptions;

package/dist/src/forms/RadioGroupField/RadioOptions/index.d.ts

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

package/dist/src/forms/RadioGroupField/domain.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const OPTION_TYPES: {
+    BOX: "BOX";
+    RADIO: "RADIO";
+};
+export declare const getOptionsType: (children: React.ReactNode) => keyof typeof OPTION_TYPES;

package/dist/src/forms/RadioGroupField/index.d.ts

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

package/dist/src/forms/RadioGroupOption/RadioGroupOption.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare type Props = {
+    value: string | number;
+    id?: string;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    testId?: string;
+};
+/** RadioGroupField form element. */
+declare const RadioGroupOption: React.FC<Props>;
+export default RadioGroupOption;

package/dist/src/forms/RadioGroupOption/index.d.ts

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

package/dist/src/forms/SelectField/CustomContainer/CustomContainer.d.ts

@@ -0,0 +1,2 @@
+declare const _default: typeof import("react-select/src/components/containers").SelectContainer;
+export default _default;

package/dist/src/forms/SelectField/CustomContainer/index.d.ts

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

package/dist/src/forms/SelectField/CustomControl/CustomControl.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+import { components } from 'react-select';
+declare type Props = ComponentProps<typeof components.Control>;
+declare function CustomControl({ children, ...props }: Props): JSX.Element;
+export default CustomControl;

package/dist/src/forms/SelectField/CustomControl/index.d.ts

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

package/dist/src/forms/SelectField/CustomMenu/CustomMenu.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+import { components } from 'react-select';
+declare type Props = ComponentProps<typeof components.Menu>;
+declare function CustomMenu({ children, ...props }: Props): JSX.Element;
+export default CustomMenu;

package/dist/src/forms/SelectField/CustomMenu/index.d.ts

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

package/dist/src/forms/SelectField/CustomOption/CustomOption.d.ts

@@ -0,0 +1,2 @@
+declare const _default: typeof import("react-select/src/components/Option").default;
+export default _default;

package/dist/src/forms/SelectField/SelectField.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { SelectOption, SelectOptions } from './types';
+declare type NoOptionsMessageFunction = (input: {
+    inputValue: string;
+}) => string | null;
+export declare type Props<T> = {
+    asToolbarFilter?: boolean;
+    caption?: React.ReactNode;
+    disabled?: boolean;
+    error?: React.ReactNode;
+    /** If not provided it will generate a random id so the l¡abel links properly with the text input */
+    id?: string;
+    isClearable?: boolean;
+    label?: React.ReactNode;
+    /** When the user opens the menu, if this prop is `true`, it will scroll the page into to the menu view (if its content falls under a scroll). It is recommended to disable this behaviour when using the `SelectField` inside a modal. */
+    menuShouldScrollIntoView?: boolean;
+    name: string;
+    noOptionsMessage?: string | NoOptionsMessageFunction;
+    onChange?: (e: SelectOption<T>) => void;
+    onBlur?: (e: SelectOption<T>) => void;
+    options: SelectOptions<T>;
+    placeholder?: string;
+    /** Use a prefix for things like currency symbols (“$”, “¥”, “£”) or icons. */
+    prefix?: React.ReactNode;
+    value?: SelectOption<T>;
+    defaultValue?: SelectOption<T>;
+    CustomOption?: React.ElementType;
+    SelectedOptionPrefix?: React.ElementType;
+    /** This is used for setting the data-testid */
+    testId?: string;
+    creatableButton?: React.ReactNode;
+    onCreate?: (option: string) => void;
+};
+/** Component to make possible choose from a predefined options. */
+declare const SelectField: <T extends unknown>(props: Props<T>) => JSX.Element;
+export default SelectField;

package/dist/src/forms/SelectField/SelectField.styles.d.ts

@@ -0,0 +1,7 @@
+declare type GetSelectStylesControls = {
+    isInvalid: boolean;
+    asToolbarFilter?: boolean;
+    wrapToNextLine?: boolean;
+};
+export declare const getSelectStyles: ({ isInvalid, asToolbarFilter, wrapToNextLine }: GetSelectStylesControls) => Object;
+export {};

package/dist/src/forms/SelectField/domain.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This helper method helps to check if the user is scrolling inside the select options so,
+ * it does not close the menu when using the prop menuShouldScrollIntoView
+ **/
+export declare const isScrollingTheSelectMenu: (element: HTMLElement) => boolean;