@iress-oss/ids-components 5.20.2 → 5.20.3

package/dist/src/components/RichSelect/RichSelect.types.d.ts

@@ -0,0 +1,193 @@
+import { AutocompleteSearchHookProps } from '../Autocomplete';
+import { FloatingUIAligns, FocusableElementRef, FormattedLabelValueMeta, FormElementWidths, IressPopoverProps, LabelValueMeta, PopoverRef, PopoverTypes } from '../../main';
+import { ChangeEvent, ForwardedRef, ReactElement, ReactNode } from 'react';
+export interface IressRichSelectProps extends Omit<AutocompleteSearchHookProps, 'query'>, Omit<IressPopoverProps, 'activator' | 'children' | 'contentClassName' | 'defaultShow' | 'defaultValue' | 'disabledAutoToggle' | 'onChange' | 'show'> {
+    /**
+     * Sets the alignment of the dropdown relative to the activator element.
+     * @default bottom-start
+     */
+    align?: FloatingUIAligns;
+    /**
+     * By default, the RichSelect will automatically highlight the first option in the list when it is opened.
+     * Set this to false to disable that behaviour.
+     * @default true
+     */
+    autoHighlight?: boolean;
+    /**
+     * Value of selected option for uncontrolled select.
+     */
+    defaultValue?: LabelValueMeta | LabelValueMeta[];
+    /**
+     * Set to true if the user can select multiple options.
+     */
+    multiSelect?: boolean;
+    /**
+     * Whether the popover should match the width of the activator element.
+     * When true, the dropdown will have the same width as the select input.
+     * When false, the dropdown will size based on its content.
+     * @default true
+     */
+    matchActivatorWidth?: boolean;
+    /**
+     * Name of the select. Used to pass data when submitted within a form.
+     */
+    name?: string;
+    /**
+     * Callback fired when the user has completely blurred away from the RichSelect. This is to kill the blur event bubbling.
+     * (component is no longer in focus and popover is closed).
+     */
+    onBlur?: (event: Event | React.FocusEvent<HTMLElement>) => void;
+    /**
+     * Emitted when the value changes.
+     */
+    onChange?: (event?: ChangeEvent<HTMLElement> & {
+        currentTarget: {
+            value?: LabelValueMeta | LabelValueMeta[];
+        };
+        target: {
+            value?: LabelValueMeta | LabelValueMeta[];
+        };
+    }, value?: LabelValueMeta | LabelValueMeta[]) => void;
+    /**
+     * The available options that the user can select from.
+     */
+    options: LabelValueMeta[] | ((query: string) => Promise<LabelValueMeta[]>);
+    /**
+     * Placeholder, shown when there is nothing selected.
+     */
+    placeholder?: ReactNode;
+    /**
+     * Renders the select as read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Completely customise the rendering of the hidden input.
+     */
+    renderHiddenInput?: (props: SelectHiddenInputRenderProps) => ReactNode;
+    /**
+     * Completely customise the rendering of the select label.
+     */
+    renderLabel?: (props: SelectLabelRenderProps) => ReactElement;
+    /**
+     * Completely customise the rendering of the select options.
+     */
+    renderOptions?: (props: SelectOptionsRenderProps) => ReactNode;
+    /**
+     * Render a custom footer below the default options display.
+     * If using `renderOptions`, this render prop will not be called.
+     */
+    renderOptionsFooter?: (props: SelectOptionsRenderProps) => ReactNode;
+    /**
+     * Whether its required. Will be passed to the hidden input.
+     */
+    required?: boolean;
+    type?: PopoverTypes;
+    /**
+     * Value of selected option for controlled select.
+     */
+    value?: LabelValueMeta | LabelValueMeta[];
+    /**
+     * The width of the select.
+     * @default 100perc
+     */
+    width?: FormElementWidths;
+    virtualFocus?: boolean;
+    /**
+     * Header showed in option panel when expanded.
+     */
+    header?: ReactNode;
+    /**
+     * Footer showed in option panel when expanded.
+     */
+    footer?: ReactNode;
+}
+export interface IressSelectActivatorProps {
+    /**
+     * Append content.
+     * @default <IressIcon name="chevron-down" size="xs" />
+     */
+    append?: ReactNode;
+    /**
+     * Placeholder, shown when there is nothing selected.
+     */
+    placeholder?: ReactNode;
+    /**
+     * Prepend content.
+     */
+    prepend?: ReactNode;
+    /**
+     * Selected items.
+     */
+    selected?: LabelValueMeta | LabelValueMeta[];
+    /**
+     * Text displayed next to label when two or more options are selected.
+     * @default {{numOptions}} selected
+     */
+    selectedOptionsText?: string;
+}
+export interface SelectHiddenInputRenderProps {
+    /**
+     * Gets the current value as a string, separated by comma. Use this if you are using an uncontrolled select.
+     */
+    getValuesString: () => string;
+    /**
+     * Selected items.
+     */
+    value?: LabelValueMeta | LabelValueMeta[];
+    /**
+     * Set the reference of the hidden input. Required to be set if needed to work with React Hook Forms.
+     */
+    ref?: ForwardedRef<HTMLInputElement>;
+    /**
+     * Whether its required.
+     */
+    required?: boolean;
+}
+export interface SelectLabelRenderProps {
+    /**
+     * Close the popover menu.
+     */
+    close: () => void;
+    /**
+     * Whether the select has errored, use this to show an error state.
+     * Only applies when options are asynchronous.
+     */
+    error: boolean | string;
+    /**
+     * Whether the select is loading, use this to show a loading spinner.
+     */
+    loading: boolean;
+    /**
+     * Sets the value (selected items) of the select. Use this if you are using an uncontrolled select.
+     */
+    setValue: (value?: LabelValueMeta | LabelValueMeta[]) => void;
+    /**
+     * Whether the select dropdown (popover) is showing.
+     */
+    show: boolean;
+    /**
+     * Selected items.
+     */
+    value?: LabelValueMeta | LabelValueMeta[];
+}
+export interface SelectOptionsRenderProps extends SelectLabelRenderProps {
+    /**
+     * The query value that was used to filter the items (may be different from query).
+     */
+    debouncedQuery: string;
+    /**
+     * The query value to filter items by and create search results.
+     */
+    query: string;
+    /**
+     * The results of the search.
+     */
+    results: FormattedLabelValueMeta[];
+    /**
+     * Set the query value to filter the items by.
+     */
+    setQuery: (query: string) => void;
+}
+export interface RichSelectRef extends Partial<PopoverRef>, Partial<FocusableElementRef> {
+    hiddenInput?: HTMLInputElement;
+}

package/dist/src/components/RichSelect/SelectBody/SelectBody.d.ts

@@ -0,0 +1,2 @@
+import { IressSelectBodyProps } from './SelectBody.types';
+export declare const IressSelectBody: ({ children, className, footer, header, ...restProps }: IressSelectBodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/RichSelect/SelectBody/SelectBody.types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { IressTextProps } from '../../../main';
+export interface IressSelectBodyProps extends IressTextProps {
+    /**
+     * Footer of the select, it will render as fixed (pinned).
+     */
+    footer?: ReactNode;
+    /**
+     * Header of the select, it will render as fixed (pinned).
+     */
+    header?: ReactNode;
+}

package/dist/src/components/RichSelect/SelectCreate/SelectCreate.d.ts

@@ -0,0 +1,2 @@
+import { IressSelectCreateProps } from './SelectCreate.types';
+export declare const IressSelectCreate: ({ fluid, heading, label, loading, onCreate, prepend, ...restProps }: IressSelectCreateProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/RichSelect/SelectCreate/SelectCreate.types.d.ts

@@ -0,0 +1,29 @@
+import { MouseEvent, ReactNode } from 'react';
+import { IressMenuItemProps, IressMenuProps } from '../../Menu';
+import { ButtonRef } from '../../Button';
+export interface IressSelectCreateProps extends Omit<IressMenuProps, 'changeOnBlur' | 'children' | 'defaultSelected' | 'multiSelect' | 'onChange' | 'role' | 'selected' | 'type'>, Pick<IressMenuItemProps, 'loading'> {
+    /**
+     * If set to true, menu will fill the width of its container.
+     * @default true
+     */
+    fluid?: boolean;
+    /**
+     * Heading slot. Often used for a title or description.
+     * If a string, will automatically provide an id for aria-labelledby.
+     */
+    heading?: ReactNode;
+    /**
+     * Label that will be displayed on the add button.
+     * @default 'New option'
+     */
+    label?: ReactNode;
+    /**
+     * Emitted when the user clicks the add button.
+     */
+    onCreate?: (e: MouseEvent<ButtonRef>) => void;
+    /**
+     * Prepends an element to the add button.
+     * @default <IressIcon name="plus" screenreaderText="Add" />
+     */
+    prepend?: ReactNode;
+}

package/dist/src/components/RichSelect/SelectHeading/SelectHeading.d.ts

@@ -0,0 +1,2 @@
+import { IressSelectHeadingProps } from './SelectHeading.types';
+export declare const IressSelectHeading: ({ children, className, clearAll, onClearAll, role, ...restProps }: IressSelectHeadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/RichSelect/SelectHeading/SelectHeading.types.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode, UIEvent } from 'react';
+import { IressMenuTextProps } from '../../Menu';
+import { ButtonRef } from '../../Button';
+export interface IressSelectHeadingProps extends IressMenuTextProps {
+    /**
+     * The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+     */
+    children: ReactNode;
+    /**
+     * Adds a clear all button to the heading.
+     */
+    clearAll?: string | boolean;
+    /**
+     * Emitted when the user clicks the clear button, or triggers it using a keyboard.
+     */
+    onClearAll?: (e: UIEvent<ButtonRef>) => void;
+}

package/dist/src/components/RichSelect/SelectLabel/SelectLabel.d.ts

@@ -0,0 +1,2 @@
+import { IressSelectLabelProps } from './SelectLabel.types';
+export declare const IressSelectLabel: ({ append, className, placeholder, prepend, selected, selectedOptionsText, ...restProps }: IressSelectLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/RichSelect/SelectLabel/SelectLabel.types.d.ts

@@ -0,0 +1,3 @@
+import { IressHTMLAttributes } from '../../../interfaces';
+import { IressSelectActivatorProps } from '../RichSelect.types';
+export type IressSelectLabelProps = Omit<IressHTMLAttributes<HTMLButtonElement>, 'children'> & IressSelectActivatorProps;

package/dist/src/components/RichSelect/SelectMenu/SelectMenu.d.ts

@@ -0,0 +1,2 @@
+import { IressSelectMenuProps } from './SelectMenu.types';
+export declare const IressSelectMenu: ({ heading, hideSelectedItems, items, limitDesktop, limitMobile, multiSelect, noResults, onChange, selected, selectedFirst, ...restProps }: IressSelectMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/RichSelect/SelectMenu/SelectMenu.types.d.ts

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+import { IressMenuItemProps, IressMenuProps } from '../../Menu';
+import { FormattedLabelValueMeta, LabelValueMeta } from '../../../interfaces';
+export interface IressSelectMenuProps extends Omit<IressMenuProps, 'children' | 'onChange' | 'role' | 'selected' | 'type'> {
+    /**
+     * Heading slot. Often used for a title or description.
+     * If a string, will automatically provide an id for aria-labelledby.
+     */
+    heading?: ReactNode;
+    /**
+     * Hide selected items from menu.
+     * Useful for autocomplete scenarios.
+     */
+    hideSelectedItems?: boolean;
+    /**
+     * Items to be displayed in the menu, array of FormattedLabelValueMeta.
+     */
+    items?: FormattedLabelValueMeta[];
+    /**
+     * Maximum number of results displayed on mobile screen sizes (< 768).
+     */
+    limitMobile?: number;
+    /**
+     * Maximum number of results displayed on larger screen sizes (>= 768).
+     */
+    limitDesktop?: number;
+    /**
+     * No results text to display when no items are found.
+     */
+    noResults?: ReactNode;
+    /**
+     * Emitted when the value changes when item is selected from the menu
+     */
+    onChange?: (selected?: LabelValueMeta | LabelValueMeta[]) => void;
+    /**
+     * Selected items.
+     */
+    selected?: LabelValueMeta | LabelValueMeta[];
+    /**
+     * Set whether to display selected items first in the menu.
+     */
+    selectedFirst?: boolean;
+}
+export interface IressSelectMenuItemProps extends Omit<IressMenuItemProps, 'value'>, FormattedLabelValueMeta {
+    /**
+     * Set whether this item is hidden on mobile
+     */
+    hiddenOnMobile?: boolean;
+}

package/dist/src/components/RichSelect/SelectMenu/SelectMenuItem.d.ts

@@ -0,0 +1,2 @@
+import { IressSelectMenuItemProps } from './SelectMenu.types';
+export declare const IressSelectMenuItem: ({ className, divider, formattedLabel, formattedMeta, hiddenOnMobile, label, meta, value, append, canToggle, onClick, onKeyDown, prepend, role, selected, "data-testid": dataTestId, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id, }: IressSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/RichSelect/SelectSearch/SelectSearch.d.ts

@@ -0,0 +1,2 @@
+import { IressSelectSearchProps } from './SelectSearch.types';
+export declare const IressSelectSearch: ({ className, contentClassName, onKeyDown, ...restProps }: IressSelectSearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/RichSelect/SelectSearch/SelectSearch.types.d.ts

@@ -0,0 +1,2 @@
+import { IressInputPopoverProps } from '../../../main';
+export type IressSelectSearchProps = Omit<IressInputPopoverProps, 'disabledAutoToggle' | 'displayMode' | 'show' | 'width'>;

package/dist/src/components/RichSelect/SelectSearchInput/SelectSearchInput.d.ts

@@ -0,0 +1,3 @@
+import { IressSelectSearchInputProps } from './SelectSearchInput.types';
+import { InputRef } from '../../Input';
+export declare const IressSelectSearchInput: import('react').ForwardRefExoticComponent<IressSelectSearchInputProps & import('react').RefAttributes<InputRef>>;

package/dist/src/components/RichSelect/SelectSearchInput/SelectSearchInput.types.d.ts

@@ -0,0 +1,18 @@
+import { IressInputProps } from '../../../main';
+export interface IressSelectSearchInputProps extends Omit<IressInputProps, 'rows' | 'width'> {
+    /**
+     * Content to place inside the input when it has no value.
+     * @default Search
+     **/
+    placeholder?: string;
+    /**
+     * Content to prepended to the input field, usually an icon.
+     * @default <IressIcon name="search" />
+     **/
+    prepend?: React.ReactNode;
+    /**
+     * When set to `true` add ons will render with a different style. Will be ignored if `prepend` or `append` props are not being used.
+     * @default true
+     */
+    watermark?: boolean;
+}

package/dist/src/components/RichSelect/SelectTags/SelectTags.d.ts

@@ -0,0 +1,2 @@
+import { IressSelectTagsProps } from './SelectTags.types';
+export declare const IressSelectTags: ({ append, className, "data-testid": dataTestId, limit, onDelete, onDeleteAll, onToggleActions, placeholder, prepend, selected, selectedOptionsText, ...restProps }: IressSelectTagsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/RichSelect/SelectTags/SelectTags.types.d.ts

@@ -0,0 +1,27 @@
+import { ButtonRef, IressHTMLAttributes, LabelValueMeta } from '../../../main';
+import { IressSelectActivatorProps } from '../RichSelect.types';
+import { ReactNode } from 'react';
+export interface IressSelectTagsProps extends IressSelectActivatorProps, Omit<IressHTMLAttributes, 'children'> {
+    /**
+     * Append content.
+     * @default <IressButton mode="tertiary" role="combobox" aria-label="Select"><IressIcon name="chevron-down" /></IressButton>
+     */
+    append?: ReactNode;
+    /**
+     * Emitted when a tag is deleted.
+     */
+    onDelete?: (item?: LabelValueMeta, e?: React.SyntheticEvent<ButtonRef>) => void;
+    /**
+     * Emitted when the combined tag delete button is clicked.
+     */
+    onDeleteAll?: (e: React.SyntheticEvent<ButtonRef>) => void;
+    /**
+     * Emitted when actions are toggled.
+     */
+    onToggleActions?: (open?: boolean) => void;
+    /**
+     * Limit of tags to display before shortening to `selectedOptionsText`
+     * @default 5
+     */
+    limit?: number;
+}

package/dist/src/components/RichSelect/components/SelectActivator.d.ts

@@ -0,0 +1,7 @@
+import { IressRichSelectProps, SelectLabelRenderProps } from '../RichSelect.types';
+interface SelectActivatorProps extends Pick<IressRichSelectProps, 'id' | 'multiSelect' | 'onChange' | 'placeholder' | 'renderLabel' | 'value'>, Omit<SelectLabelRenderProps, 'close'> {
+    async?: boolean;
+    setShow: (show: boolean) => void;
+}
+export declare const SelectActivator: ({ async, id, error, loading, multiSelect, onChange, placeholder, renderLabel, setShow, setValue, show, value, }: SelectActivatorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/RichSelect/components/SelectHiddenInput.d.ts

@@ -0,0 +1,4 @@
+import { IressRichSelectProps, SelectHiddenInputRenderProps } from '../RichSelect.types';
+type SelectHiddenInputProps = Pick<IressRichSelectProps, 'data-testid' | 'name' | 'renderHiddenInput' | 'value'> & SelectHiddenInputRenderProps;
+export declare const SelectHiddenInput: import('react').ForwardRefExoticComponent<Omit<SelectHiddenInputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+export {};

package/dist/src/components/RichSelect/components/SelectOptions.d.ts

@@ -0,0 +1,8 @@
+import { IressRichSelectProps, SelectOptionsRenderProps } from '../RichSelect.types';
+interface SelectOptionsProps extends Pick<IressRichSelectProps, 'autoHighlight' | 'minSearchLength' | 'multiSelect' | 'onChange' | 'options' | 'renderOptions' | 'renderOptionsFooter' | 'value' | 'initialOptions'>, Omit<SelectOptionsRenderProps, 'close'> {
+    setShow: (show: boolean) => void;
+    shouldShowInstructions?: boolean;
+    shouldShowNoResults?: boolean;
+}
+export declare const SelectOptions: ({ autoHighlight, debouncedQuery, error, initialOptions: initialOptionsProp, loading, minSearchLength, multiSelect, onChange, options, query, renderOptions, renderOptionsFooter, results, setQuery, setShow, setValue, show, value, shouldShowInstructions, shouldShowNoResults, }: SelectOptionsProps) => string | number | boolean | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/src/components/RichSelect/hooks/useRichSelectState.d.ts

@@ -0,0 +1,17 @@
+import { ControlledStateHook, ControlledStateProps } from '../../../hooks/useControlledState';
+import { IressSelectMenuProps } from '../SelectMenu/SelectMenu.types';
+export interface RichSelectStateHookReturn extends ControlledStateHook<IressSelectMenuProps['selected']> {
+    getLabelsArray: () => string[];
+    getLabelsString: (separator?: string) => string;
+    getValuesArray: () => string[];
+    getValuesString: () => string;
+}
+/**
+ * This is a wrapper around useControlledState that provides additional helper functions for working with rich select state.
+ * - getLabelsArray: Returns an array of the labels of the selected items, used to create tags.
+ * - getLabelsString: Returns a string of the labels of the selected items, separated by the provided separator. Used for displaying in inputs.
+ * - getValuesArray: Returns an array of the values of the selected items. Used to compare current and previous values.
+ * - getValuesString: Returns a string of the values of the selected items, separated by commas. Used for submitting form data.
+ *
+ */
+export declare const useRichSelectState: (props: ControlledStateProps<IressSelectMenuProps["selected"]>) => RichSelectStateHookReturn;

package/dist/src/components/RichSelect/index.d.ts

@@ -0,0 +1,19 @@
+export * from './hooks/useRichSelectState';
+export * from './RichSelect.types';
+export * from './RichSelect';
+export * from './SelectBody/SelectBody.types';
+export * from './SelectBody/SelectBody';
+export * from './SelectCreate/SelectCreate.types';
+export * from './SelectCreate/SelectCreate';
+export * from './SelectHeading/SelectHeading.types';
+export * from './SelectHeading/SelectHeading';
+export * from './SelectLabel/SelectLabel.types';
+export * from './SelectLabel/SelectLabel';
+export * from './SelectMenu/SelectMenu.types';
+export * from './SelectMenu/SelectMenu';
+export * from './SelectSearch/SelectSearch.types';
+export * from './SelectSearch/SelectSearch';
+export * from './SelectSearchInput/SelectSearchInput.types';
+export * from './SelectSearchInput/SelectSearchInput';
+export * from './SelectTags/SelectTags.types';
+export * from './SelectTags/SelectTags';

package/dist/src/components/Row/Row.d.ts

@@ -0,0 +1,2 @@
+import { RowWithEnums } from './Row.types';
+export declare const IressRow: RowWithEnums;

package/dist/src/components/Row/Row.types.d.ts

@@ -0,0 +1,42 @@
+import { GutterSize, GutterSizes, HorizontalAlign, HorizontalAligns, VerticalAlign, VerticalAligns } from '../../main';
+import { IressHTMLAttributes, ResponsiveSizing } from '../../interfaces';
+export interface IressRowProps extends IressHTMLAttributes<HTMLDivElement> {
+    /**
+     * Any content you would like to be contained. Best used with `IressCol`.
+     */
+    children?: React.ReactNode;
+    /**
+     * The amount of space between columns. If a single value is provided, this will be applied to all viewport sizes. If multiple values are provided, the first will apply to the small viewport upwards, the second to the medium viewport upwards, the third (if set) to the large viewport upwards, and the fourth (if set) to the extra large viewport.
+     */
+    gutter?: GutterSize | GutterSizes | ResponsiveSizing<GutterSize | GutterSizes>;
+    /**
+     * Horizontal alignment, follows flexbox justify-content
+     * @default left
+     */
+    horizontalAlign?: HorizontalAlign | HorizontalAligns;
+    /**
+     * Remove negative gutter and uses column gap. This is useful for cases where you are not using `IressCol`.
+     * @default false
+     */
+    useColGap?: boolean;
+    /**
+     * Vertical alignment, follows flexbox align-items
+     * @default top
+     */
+    verticalAlign?: VerticalAlign | VerticalAligns;
+}
+export interface RowWithEnums extends React.FC<IressRowProps> {
+    /** @deprecated IressRow.Gutter enum is now deprecated and will be removed in a future version. Please use the value directly instead. */
+    Gutter: typeof GutterSize;
+    /** @deprecated IressRow.HorizontalAlign enum is now deprecated and will be removed in a future version. Please use the value directly instead. */
+    HorizontalAlign: typeof HorizontalAlign;
+    /** @deprecated IressRow.VerticalAlign enum is now deprecated and will be removed in a future version. Please use the value directly instead. */
+    VerticalAlign: typeof VerticalAlign;
+}
+export declare enum RowCssClass {
+    Base = "iress-u-row",
+    Gutter = "iress--gutter",
+    HorizontalAlign = "iress--h-align",
+    VerticalAlign = "iress--v-align",
+    UseColGap = "iress--use-col-gap"
+}

package/dist/src/components/Row/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Row.types';
+export * from './Row';

package/dist/src/components/Select/Select.d.ts

@@ -0,0 +1,2 @@
+import { SelectWithEnums } from './Select.types';
+export declare const IressSelect: SelectWithEnums;

package/dist/src/components/Select/Select.types.d.ts

@@ -0,0 +1,89 @@
+import { ReactNode } from 'react';
+import { FormElementWidth } from '../../enums';
+import { IressHTMLAttributes, WithDataAttributes } from '../../interfaces';
+import { FormControlValue, FormElementWidths } from '../../types';
+import { IressReadonlyProps } from '../Readonly';
+export interface IressSelectProps<T = HTMLSelectElement> extends Omit<IressSelectHTMLAttributes<T>, 'defaultValue' | 'value' | 'onChange'> {
+    /**
+     * The `option` and `optgroup` elements to render within the select.
+     */
+    children?: ReactNode | string;
+    /**
+     * Value of selected option for uncontrolled select.
+     */
+    defaultValue?: FormControlValue;
+    /**
+     * Identifier for select.
+     */
+    name?: string;
+    /**
+     * Handles the onChange event of the select input.
+     * If you pass in a non-string value, you can access it using the second parameter of the function.
+     */
+    onChange?: (e: React.ChangeEvent<HTMLSelectElement>, value?: FormControlValue) => void;
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    readonly?: boolean;
+    /**
+     * Mark the select as a required field.
+     */
+    required?: boolean;
+    /**
+     * Value of selected option for controlled select.
+     */
+    value?: FormControlValue;
+    /**
+     * Adds an `option` as the first element with the placeholder text and no value.
+     */
+    placeholder?: string;
+    /**
+     * The width of the select.
+     */
+    width?: FormElementWidth | FormElementWidths;
+}
+export interface IressSelectOptionProps extends Omit<IressHTMLAttributes<HTMLOptionElement>, 'value'> {
+    /**
+     * Value of selected option.
+     * It will be converted to a string and used to match with the value of IressSelect during the onChange event.
+     */
+    value?: FormControlValue;
+}
+type IressSelectHTMLAttributes<T = HTMLSelectElement> = WithDataAttributes<React.SelectHTMLAttributes<T>>;
+export interface SelectControlProps extends Omit<IressSelectHTMLAttributes<HTMLSelectElement>, 'defaultValue' | 'value'> {
+    /**
+     * Value of selected option for uncontrolled select.
+     */
+    defaultValue?: FormControlValue;
+    /**
+     * Adds an `option` as the first element with the placeholder text and no value.
+     */
+    placeholder?: string;
+    /**
+     * Value of the select.
+     */
+    value?: FormControlValue;
+}
+export interface SelectReadonlyProps extends Omit<IressReadonlyProps, 'value'> {
+    /**
+     * The options of the select, used to locate the label of the selected value.
+     */
+    children?: React.ReactNode;
+    /**
+     * The value of the select.
+     */
+    value?: FormControlValue;
+}
+export interface SelectOption {
+    children?: SelectOption[];
+    label: string;
+    onClick?: React.MouseEventHandler;
+    testId?: string;
+    value?: FormControlValue;
+}
+export type SelectRef = HTMLSelectElement | HTMLInputElement | null;
+export type SelectWithEnums = React.ForwardRefExoticComponent<IressSelectProps & React.RefAttributes<SelectRef>> & {
+    /** @deprecated IressSelect.Width will be removed in future versions of IDS. Please use the value directly. */
+    Width: typeof FormElementWidth;
+};
+export {};

package/dist/src/components/Select/SelectOption/SelectOption.d.ts

@@ -0,0 +1,2 @@
+import { IressSelectOptionProps } from '../Select.types';
+export declare const IressSelectOption: ({ value, ...restProps }: IressSelectOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Select/components/SelectControl.d.ts

@@ -0,0 +1,2 @@
+import { SelectControlProps } from '../Select.types';
+export declare const SelectControl: import('react').ForwardRefExoticComponent<SelectControlProps & import('react').RefAttributes<HTMLSelectElement>>;

package/dist/src/components/Select/components/SelectReadonly.d.ts

@@ -0,0 +1,2 @@
+import { SelectReadonlyProps } from '../Select.types';
+export declare const SelectReadonly: import('react').ForwardRefExoticComponent<SelectReadonlyProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/src/components/Select/helpers/mapSelectOptions.d.ts

@@ -0,0 +1,3 @@
+import { SelectOption } from '..';
+export declare const mapSelectOptions: (items: SelectOption[]) => JSX.Element[] | null;
+export declare const renderOptionOrOptGroup: ({ children, label, onClick, testId, value }: SelectOption, key?: number) => JSX.Element;

package/dist/src/components/Select/helpers/nodesToSelectOptions.d.ts

@@ -0,0 +1,11 @@
+import { FormControlValue } from '../../../types';
+import { IressSelectOptionProps, SelectOption } from '../Select.types';
+import { IressSelectOption } from '..';
+type NodeProps = IressSelectOptionProps & {
+    label: string;
+};
+type NodeType = typeof IressSelectOption | 'optgroup' | 'option';
+type Node = React.ReactElement<NodeProps, NodeType>;
+export declare const mapNodesToSelectOptions: (nodes: Node[] | Node) => SelectOption[];
+export declare const findValueFromStringInSelectOptions: (value: string, options?: SelectOption[]) => FormControlValue | undefined;
+export {};

package/dist/src/components/Select/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Select.types';
+export * from './Select';
+export * from './SelectOption/SelectOption';
+export * from './helpers/mapSelectOptions';