@iress-oss/ids-components 5.16.0 → 6.0.0-alpha.0

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

@@ -1,2 +1,142 @@
-import { IressRichSelectProps, RichSelectRef } from './RichSelect.types';
-export declare const IressRichSelect: import('react').ForwardRefExoticComponent<IressRichSelectProps & import('react').RefAttributes<RichSelectRef>>;
+import { ForwardedRef, ReactElement, ChangeEvent, ReactNode } from 'react';
+import { AutocompleteSearchHookProps } from '../Autocomplete';
+import { IressSelectActivatorProps } from './components/SelectActivator';
+import { SelectHiddenInputRenderProps } from './components/SelectHiddenInput';
+import { ControlledValue, FloatingUIAligns, FormattedLabelValueMeta, IressPopoverProps, LabelValueMeta, PopoverRef, ReactHookFormCompatibleRef } from '../../main';
+import { IressInputProps } from '../Input';
+export interface IressRichSelectProps<TMultiple extends boolean = false> extends Omit<AutocompleteSearchHookProps, 'query'>, Omit<IressPopoverProps, 'activator' | 'children' | 'contentClassName' | 'defaultShow' | 'defaultValue' | 'disabledAutoToggle' | 'onChange' | 'matchActivatorWidth' | 'show' | 'width'>, Pick<IressSelectActivatorProps, 'append' | 'prepend' | 'selectedOptionsText'> {
+    /**
+     * 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?: ControlledValue<LabelValueMeta, TMultiple>;
+    /**
+     * Set to true if the user can select multiple options.
+     */
+    multiSelect?: TMultiple;
+    /**
+     * 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?: ControlledValue<LabelValueMeta, TMultiple>;
+        };
+        target: {
+            value?: ControlledValue<LabelValueMeta, TMultiple>;
+        };
+    }, value?: ControlledValue<LabelValueMeta, TMultiple>) => 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<TMultiple>) => ReactNode;
+    /**
+     * Completely customise the rendering of the select label.
+     */
+    renderLabel?: (props: SelectLabelRenderProps<TMultiple>) => ReactElement;
+    /**
+     * Completely customise the rendering of the select options.
+     */
+    renderOptions?: (props: SelectOptionsRenderProps<TMultiple>) => ReactNode;
+    /**
+     * Whether its required. Will be passed to the hidden input.
+     */
+    required?: boolean;
+    type?: IressPopoverProps['type'];
+    /**
+     * Value of selected option for controlled select.
+     */
+    value?: ControlledValue<LabelValueMeta, TMultiple>;
+    virtualFocus?: boolean;
+    /**
+     * Header showed in option panel when expanded.
+     */
+    header?: ReactNode;
+    /**
+     * Footer showed in option panel when expanded.
+     */
+    footer?: ReactNode;
+    /**
+     * The width of the select.
+     */
+    width?: IressInputProps['width'];
+}
+export interface SelectLabelRenderProps<TMultiple extends boolean = false> {
+    /**
+     * 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?: ControlledValue<LabelValueMeta, TMultiple>) => void;
+    /**
+     * Whether the select dropdown (popover) is showing.
+     */
+    show: boolean;
+    /**
+     * Selected items.
+     */
+    value?: ControlledValue<LabelValueMeta, TMultiple>;
+}
+export interface SelectOptionsRenderProps<TMultiple extends boolean = false> extends SelectLabelRenderProps<TMultiple> {
+    /**
+     * 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 type RichSelectRef = Partial<PopoverRef> & ReactHookFormCompatibleRef;
+export declare const IressRichSelect: <TMultiple extends boolean = false>(props: IressRichSelectProps<TMultiple> & {
+    ref?: ForwardedRef<RichSelectRef>;
+}) => ReactElement;

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

@@ -0,0 +1,59 @@
+export declare const richSelect: import('../../styled-system/types').SlotRecipeRuntimeFn<"wrapper" | "popoverContent" | "richSelect" | "dropdownSelectedHeading" | "dropdownClear", {
+    width: {
+        '2': {
+            richSelect: {
+                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]";
+            };
+        };
+        '4': {
+            richSelect: {
+                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]";
+            };
+        };
+        '6': {
+            richSelect: {
+                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]";
+            };
+        };
+        '8': {
+            richSelect: {
+                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]";
+            };
+        };
+        '10': {
+            richSelect: {
+                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]";
+            };
+        };
+        '12': {
+            richSelect: {
+                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]";
+            };
+        };
+        '16': {
+            richSelect: {
+                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]";
+            };
+        };
+        '25perc': {
+            richSelect: {
+                width: "input.25perc";
+            };
+        };
+        '50perc': {
+            richSelect: {
+                width: "input.50perc";
+            };
+        };
+        '75perc': {
+            richSelect: {
+                width: "input.75perc";
+            };
+        };
+        '100perc': {
+            richSelect: {
+                width: "input.100perc";
+            };
+        };
+    };
+}>;

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

@@ -1,2 +1,13 @@
-import { IressSelectBodyProps } from './SelectBody.types';
+import { IressTextProps } from '../../../main';
+import { ReactNode } from 'react';
+export interface IressSelectBodyProps extends Omit<IressTextProps, 'element'> {
+    /**
+     * Footer of the select, it will render as fixed (pinned).
+     */
+    footer?: ReactNode;
+    /**
+     * Header of the select, it will render as fixed (pinned).
+     */
+    header?: ReactNode;
+}
 export declare const IressSelectBody: ({ children, className, footer, header, ...restProps }: IressSelectBodyProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const selectBody: import('../../../styled-system/types').SlotRecipeRuntimeFn<"children" | "selectBody", import('../../../styled-system/types').SlotRecipeVariantRecord<"children" | "selectBody">>;

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

@@ -1,2 +1,29 @@
-import { IressSelectCreateProps } from './SelectCreate.types';
+import { MouseEvent, ReactNode } from 'react';
+import { IressMenuItemProps, IressMenuProps } from '../../Menu';
+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<HTMLButtonElement>) => void;
+    /**
+     * Prepends an element to the add button.
+     * @default <IressIcon name="plus" screenreaderText="Add" />
+     */
+    prepend?: ReactNode;
+}
 export declare const IressSelectCreate: ({ fluid, heading, label, loading, onCreate, prepend, ...restProps }: IressSelectCreateProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,17 @@
-import { IressSelectHeadingProps } from './SelectHeading.types';
-export declare const IressSelectHeading: ({ children, className, clearAll, onClearAll, role, ...restProps }: IressSelectHeadingProps) => import("react/jsx-runtime").JSX.Element;
+import { ReactNode, UIEvent } from 'react';
+import { IressMenuTextProps } from '../../Menu';
+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<HTMLButtonElement>) => void;
+}
+export declare const IressSelectHeading: ({ children, className, clearAll, onClearAll, ...restProps }: IressSelectHeadingProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,4 @@
-import { IressSelectLabelProps } from './SelectLabel.types';
+import { IressHTMLAttributes } from '../../../interfaces';
+import { IressSelectActivatorProps } from '../components/SelectActivator';
+export type IressSelectLabelProps = Omit<IressHTMLAttributes<HTMLButtonElement>, 'children'> & IressSelectActivatorProps;
 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.styles.d.ts

@@ -0,0 +1,15 @@
+export declare const selectLabel: import('../../../styled-system/types').SlotRecipeRuntimeFn<"placeholder" | "contents" | "append" | "prepend" | "selectLabel", {
+    showDefaultChevron: {
+        true: {
+            selectLabel: {
+                position: "relative";
+            };
+            append: {
+                selectChevron: true;
+            };
+        };
+        false: {
+            append: {};
+        };
+    };
+}>;

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

@@ -1,2 +1,52 @@
-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;
+import { IressMenuItemProps, IressMenuProps } from '../../Menu';
+import { ReactNode } from 'react';
+import { FormControlValue, LabelValueMeta } from '../../../main';
+import { ControlledValue } from '../../../hooks';
+import { FormattedLabelValueMeta } from '../../../interfaces';
+export interface IressSelectMenuProps<TMultiple extends boolean = false> extends Omit<IressMenuProps<FormControlValue, TMultiple>, 'children' | 'onChange' | '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?: ControlledValue<LabelValueMeta, TMultiple>) => void;
+    /**
+     * Selected items.
+     */
+    selected?: ControlledValue<LabelValueMeta, TMultiple>;
+    /**
+     * Set whether to display selected items first in the menu.
+     */
+    selectedFirst?: boolean;
+}
+export interface IressSelectMenuItemProps extends Omit<IressMenuItemProps<'button'>, 'value'>, FormattedLabelValueMeta {
+    /**
+     * Set whether this item is hidden on mobile
+     */
+    hiddenOnMobile?: boolean;
+}
+export declare const IressSelectMenu: <TMultiple extends boolean = false>({ heading, hideSelectedItems, items, limitDesktop, limitMobile, multiSelect, noResults, onChange, role, selected, selectedFirst, ...restProps }: IressSelectMenuProps<TMultiple>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const selectMenu: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root", {}>;

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

@@ -1,2 +1,2 @@
-import { IressSelectMenuItemProps } from './SelectMenu.types';
+import { IressSelectMenuItemProps } from './SelectMenu';
 export declare const IressSelectMenuItem: ({ className, divider, formattedLabel, 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

@@ -1,2 +1,3 @@
-import { IressSelectSearchProps } from './SelectSearch.types';
-export declare const IressSelectSearch: ({ className, contentClassName, onKeyDown, ...restProps }: IressSelectSearchProps) => import("react/jsx-runtime").JSX.Element;
+import { IressInputPopoverProps } from '../../../main';
+export type IressSelectSearchProps = Omit<IressInputPopoverProps, 'disabledAutoToggle' | 'displayMode' | 'show' | 'width'>;
+export declare const IressSelectSearch: ({ className, contentClassName, contentStyle, onKeyDown, ...restProps }: IressSelectSearchProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const selectSearch: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "root", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "root">>;

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

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

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

@@ -0,0 +1 @@
+export declare const selectSearchInput: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root", {}>;

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

@@ -1,2 +1,32 @@
-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;
+import { LabelValueMeta } from '../../../main';
+import { ReactNode } from 'react';
+import { IressTextProps } from '../../Text';
+import { IressSelectActivatorProps } from '../components/SelectActivator';
+export interface IressSelectTagsProps extends Omit<IressSelectActivatorProps, 'width'>, Omit<IressTextProps, 'element' | 'width'> {
+    /**
+     * Append content.
+     */
+    append?: ReactNode;
+    /**
+     * The id of the select element.
+     */
+    id?: string;
+    /**
+     * Emitted when a tag is deleted.
+     */
+    onDelete?: (item?: LabelValueMeta, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
+    /**
+     * Emitted when the combined tag delete button is clicked.
+     */
+    onDeleteAll?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    /**
+     * Emitted when actions are toggled.
+     */
+    onToggleActions?: (open?: boolean) => void;
+    /**
+     * Limit of tags to display before shortening to `selectedOptionsText`
+     * @default 5
+     */
+    limit?: number;
+}
+export declare const IressSelectTags: ({ append, className, "data-testid": dataTestId, id, limit, onDelete, onDeleteAll, onToggleActions, placeholder, prepend, selected, selectedOptionsText, ...restProps }: IressSelectTagsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+export declare const selectTags: import('../../../styled-system/types').SlotRecipeRuntimeFn<"tag" | "placeholder" | "root" | "append" | "prepend" | "tagsList", {
+    showDefaultChevron: {
+        true: {
+            root: {
+                alignSelf: "center";
+                position: "relative";
+            };
+            append: {
+                selectChevron: true;
+            };
+        };
+        false: {
+            append: {};
+        };
+    };
+}>;

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

@@ -1,7 +1,38 @@
-import { IressRichSelectProps, SelectLabelRenderProps } from '../RichSelect.types';
-interface SelectActivatorProps extends Pick<IressRichSelectProps, 'id' | 'multiSelect' | 'onChange' | 'placeholder' | 'renderLabel' | 'value'>, Omit<SelectLabelRenderProps, 'close'> {
+import { IressRichSelectProps, SelectLabelRenderProps } from '../RichSelect';
+import { LabelValueMeta } from '../../../interfaces';
+import { ReactNode } from 'react';
+import { IressInputProps } from '../../Input';
+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;
+    /**
+     * The width of the select.
+     */
+    width?: IressInputProps['width'];
+}
+interface SelectActivatorProps<TMultiple extends boolean = false> extends Pick<IressRichSelectProps<TMultiple>, 'id' | 'multiSelect' | 'onChange' | 'placeholder' | 'renderLabel' | 'value' | 'append' | 'prepend' | 'selectedOptionsText'>, Omit<SelectLabelRenderProps<TMultiple>, '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 declare const SelectActivator: <TMultiple extends boolean = false>({ append, async, id, error, loading, multiSelect, onChange, placeholder, prepend, renderLabel, selectedOptionsText, setShow, setValue, show, value, }: SelectActivatorProps<TMultiple>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,27 @@
-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>>;
+import { IressRichSelectProps } from '../RichSelect';
+import { ControlledValue } from '../../../hooks/useControlledState';
+import { LabelValueMeta } from '../../../interfaces';
+import { ForwardedRef, ReactElement } from 'react';
+export interface SelectHiddenInputRenderProps<TMultiple extends boolean = false> {
+    /**
+     * Gets the current value as a string, separated by comma. Use this if you are using an uncontrolled select.
+     */
+    getValuesString: () => string;
+    /**
+     * Selected items.
+     */
+    value?: ControlledValue<LabelValueMeta, TMultiple>;
+    /**
+     * 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;
+}
+type SelectHiddenInputProps<TMultiple extends boolean = false> = Pick<IressRichSelectProps<TMultiple>, 'data-testid' | 'name' | 'renderHiddenInput' | 'value' | 'required'> & SelectHiddenInputRenderProps<TMultiple>;
+export declare const SelectHiddenInput: <TMultiple extends boolean>(props: SelectHiddenInputProps<TMultiple> & {
+    ref?: ForwardedRef<HTMLInputElement>;
+}) => ReactElement;
 export {};

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

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

@@ -1,6 +1,6 @@
 import { ControlledStateHook, ControlledStateProps } from '../../../hooks/useControlledState';
-import { IressSelectMenuProps } from '../SelectMenu/SelectMenu.types';
-export interface RichSelectStateHookReturn extends ControlledStateHook<IressSelectMenuProps['selected']> {
+import { LabelValueMeta } from '../../../interfaces';
+export interface RichSelectStateHookReturn<T extends LabelValueMeta = LabelValueMeta, TMultiple extends boolean = false> extends ControlledStateHook<T, TMultiple> {
     getLabelsArray: () => string[];
     getLabelsString: (separator?: string) => string;
     getValuesArray: () => string[];
@@ -14,4 +14,4 @@ export interface RichSelectStateHookReturn extends ControlledStateHook<IressSele
  * - 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;
+export declare const useRichSelectState: <T extends LabelValueMeta = LabelValueMeta, TMultiple extends boolean = false>(props: ControlledStateProps<T, TMultiple>) => RichSelectStateHookReturn<T, TMultiple>;

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

@@ -1,19 +1,10 @@
 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/RichSelect/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

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

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

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

@@ -1,2 +1,29 @@
-import { RowWithEnums } from './Row.types';
-export declare const IressRow: RowWithEnums;
+import { HorizontalAligns, IressStyledProps, ResponsiveProp, VerticalAligns } from '../../types';
+import { ReactNode } from 'react';
+import { PositiveSpacingToken } from '../../../theme-preset/tokens/spacing';
+export interface IressRowProps extends IressStyledProps {
+    /**
+     * Any content you would like to be contained. Best used with `IressCol`.
+     */
+    children?: ReactNode;
+    /**
+     * Sets the gap between the children `<IressCol />` components.
+     */
+    gutter?: ResponsiveProp<PositiveSpacingToken>;
+    /**
+     * Horizontal alignment, follows flexbox justify-content
+     * @default left
+     */
+    horizontalAlign?: HorizontalAligns;
+    /**
+     * Sets the size of the top and bottom gap between direct children when they begin to wrap.
+     * @see https://developer.mozilla.org/docs/Web/CSS/row-gap
+     */
+    rowGap?: ResponsiveProp<PositiveSpacingToken>;
+    /**
+     * Vertical alignment, follows flexbox align-items
+     * @default top
+     */
+    verticalAlign?: VerticalAligns;
+}
+export declare const IressRow: ({ className, ...restProps }: IressRowProps) => import("react/jsx-runtime").JSX.Element;