@ultraviolet/ui 2.0.0-beta.8 → 2.0.0

package/dist/components/SelectInput/index.d.ts

@@ -1,75 +1,131 @@
-import type { CSSObject, Theme } from '@emotion/react';
-import { css } from '@emotion/react';
-import type { ComponentProps, ForwardRefExoticComponent, ForwardedRef, JSX, ReactNode } from 'react';
-import type { CommonProps, GroupBase, OptionProps, Props } from 'react-select';
-import Select from 'react-select';
-export type SelectOption = {
-    value: string;
-    label: ReactNode;
-    disabled?: boolean;
-    description?: string;
-    inlineDescription?: string;
-};
-type SelectStyleProps = {
-    error?: string;
-    /**
-     * Custom styles of the SelectInput. See [React select documentation](https://react-select.com/styles)
-     */
-    customStyle: (state: SelectProps & WithSelectProps) => Record<string, CSSObject>;
-    animation?: string;
-    /**
-     * Time of the animation
-     */
-    animationDuration: number;
-    /**
-     * Show/hide the label inside the component
-     */
-    noTopLabel?: boolean;
-    theme: Theme;
-};
-type WithSelectProps = {
-    selectProps: SelectProps;
-};
-type SelectProps = StyledContainerProps & Omit<Props<SelectOption>, 'value'> & CommonProps<SelectOption, boolean, GroupBase<SelectOption>> & {
-    value?: string | SelectOption;
-    checked?: boolean;
-    error?: string;
-    labelId?: string;
-    required?: boolean;
-    time?: boolean;
-};
-type StyledContainerProps = {
-    isDisabled?: boolean;
-    additionalStyles?: Parameters<typeof css>[0];
-};
-type StateManagedSelect = typeof Select;
-type SelectInputProps = SelectProps & SelectStyleProps & {
+import type { ComponentProps, HTMLAttributes, ReactNode } from 'react';
+import type { Popup } from '../Popup';
+import type { DataType } from './types';
+type SelectInputProps<IsMulti extends undefined | boolean = false> = {
+    /**
+     * Input name
+     */
+    name?: string;
+    /**
+     * Place holder when no value defined
+     */
+    placeholder?: string;
+    /**
+     * When searchable, placeholder when no value is searched
+     */
+    placeholderSearch?: string;
+    /**
+     * Label of the component
+     */
+    label?: string;
+    /**
+     * Helper text to give more information to the user
+     */
+    helper?: string;
+    /**
+     * Selectable options
+     */
+    options: DataType;
     /**
-     * Name of the animation
+     * Message to show when no option available
      */
-    animation?: string;
+    emptyState?: ReactNode;
     /**
-     * Play the animation when the value change
+     * Whether it is possible to search through the input
+     */
+    searchable?: boolean;
+    /**
+     * Whether the component in disabled
      */
-    animationOnChange?: boolean;
     disabled?: boolean;
+    /**
+     * Whether the component in readOnly
+     */
     readOnly?: boolean;
-    innerRef?: ForwardedRef<StateManagedSelect>;
     /**
-     * Custom components of the SelectInput. See [React select documentation](https://react-select.com/components)
+     * Whether it is possible to clear the search input
+     */
+    clearable?: boolean;
+    /**
+     * Size of the input
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether field is required
+     */
+    required?: boolean;
+    /**
+     * More information regarding/description ofs the selectInput
+     */
+    labelDescription?: ReactNode;
+    /**
+     * Whether option description is on the right of the option or under it
      */
-    customComponents?: SelectProps['components'];
-    children: ReactNode;
-    emptyState?: ComponentProps<Select>['noOptionsMessage'];
+    descriptionDirection?: 'row' | 'column';
+    /**
+     * Where to place the additional info prop
+     */
+    optionalInfoPlacement?: 'left' | 'right';
+    /**
+     * To add custom fixed elements at the bottom of the dropdown
+     */
+    footer?: ((closeDropdown: () => void) => ReactNode) | ReactNode;
+    /**
+     * Display an error message under the select bar
+     */
+    error?: string | boolean;
+    /**
+     * Display a success message under the select bar
+     */
+    success?: string;
+    /**
+     * Load more button to implement lazy loading
+     */
+    loadMore?: ReactNode;
+    /**
+     * When the options are loading, display a skeleton
+     */
+    isLoading?: boolean;
+    /**
+     * Add a tooltip around the select bar
+     */
+    tooltip?: string;
+    /**
+     * Adds an option to select every selectable options
+     */
+    selectAll?: {
+        label: ReactNode;
+        description?: string;
+    };
+    /**
+     * When options are group, define a option to select every selectable options of a group
+     */
+    selectAllGroup?: boolean;
+    dropdownAlign?: ComponentProps<typeof Popup>['align'];
+    autofocus?: boolean;
+    /**
+     * Whether it is possible to select multiple options
+     */
+    multiselect?: IsMulti;
+    /**
+     * Default value, must be one of the options
+     */
+    value?: IsMulti extends true ? string[] : string;
+    onChange?: IsMulti extends true ? (value: string[]) => void : (value: string) => void;
     'data-testid'?: string;
-};
-type OptionComponent = (props: Partial<OptionProps<SelectOption> & SelectOption>) => JSX.Element;
+    /**
+     * In some cases, when the space is limited, you will need to change the `portalTarget` of the dropdown for a higher parent element.
+     * If you don't know which element to target, you can use `document.body`.
+     */
+    portalTarget?: ComponentProps<typeof Popup>['portalTarget'];
+    /**
+     * Allow to specify a callback called when option dropdown is open
+     * Please wrap that definition in useCallback
+     */
+    onOpen?: () => void;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'onBlur' | 'onFocus' | 'aria-label' | 'className'>;
 /**
- * SelectInput component is a wrapper around [react-select](https://react-select.com) component.
- * It provides a styled select input with a label and an error message.
- * @deprecated use SelectInputV2 component instead
+ * SelectInput component is used to select one or many elements from a selection.
  */
-export declare const SelectInput: ForwardRefExoticComponent<Partial<SelectInputProps>> & {
-    Option: OptionComponent;
-};
+export declare const SelectInput: <IsMulti extends undefined | boolean>({ name, id, onBlur, onFocus, onChange, "aria-label": ariaLabel, value, label, helper, options, size, emptyState, descriptionDirection, success, error, "data-testid": dataTestId, className, tooltip, footer, placeholderSearch, placeholder, searchable, disabled, readOnly, clearable, multiselect, required, labelDescription, autofocus, loadMore, optionalInfoPlacement, isLoading, selectAll, selectAllGroup, dropdownAlign, portalTarget, onOpen, }: SelectInputProps<IsMulti>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};