@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

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

@@ -1,56 +0,0 @@
-import { ChangeEvent, Context, ReactElement, Ref, ReactNode } from 'react';
-import { ReactHookFormCompatibleRef } from '../../interfaces';
-import { FormControlValue, IressStyledProps } from '../../types';
-export interface IressRadioGroupProps<T = FormControlValue> extends Omit<IressStyledProps, 'onChange' | 'defaultValue'> {
-    /**
-     * Content of the radio group, usually multiple `IressRadio` components.
-     */
-    children?: ReactNode;
-    /**
-     * Hides the radio control to allow the creation of custom radio buttons.
-     */
-    hiddenRadio?: boolean;
-    /**
-     * Sets which of the block / inline layout options apply.
-     * @default 'stack'
-     */
-    layout?: 'stack' | 'block' | 'inline' | 'inlineFlex' | 'inlineEqualWidth';
-    /**
-     * Name to be applied to all radios in the group.
-     */
-    name?: string;
-    /**
-     * Called when a user selects one of its children radio buttons.
-     * If you pass in a non-string value, you can access it using the second parameter of the function.
-     */
-    onChange?: (e: ChangeEvent<HTMLInputElement>, value?: T) => void;
-    /**
-     * When true, marks the field as required
-     */
-    required?: boolean;
-    /**
-     * Initial value of radio group when in uncontrolled mode.
-     */
-    defaultValue?: T;
-    /**
-     * Renders a readOnly radio group.
-     */
-    readOnly?: boolean;
-    /**
-     * Value of radio group when in controlled mode.
-     */
-    value?: T;
-    /**
-     * Add the button-like border and padding to radio when `touch` is true.
-     */
-    touch?: boolean;
-}
-export type RadioGroupContextValue<T = FormControlValue> = Pick<IressRadioGroupProps<T>, 'name' | 'value' | 'hiddenRadio' | 'required' | 'onChange' | 'readOnly' | 'touch'>;
-export interface RadioGroupRef extends ReactHookFormCompatibleRef<HTMLDivElement> {
-    reset: () => void;
-}
-export declare function getRadioGroupContext<T = FormControlValue>(): Context<RadioGroupContextValue<T> | undefined>;
-export declare const RadioGroupContext: Context<RadioGroupContextValue<FormControlValue> | undefined>;
-export declare const IressRadioGroup: <T = FormControlValue>(props: IressRadioGroupProps<T> & {
-    ref?: Ref<RadioGroupRef>;
-}) => ReactElement;

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

@@ -1,50 +0,0 @@
-export declare const radioGroup: import('../../styled-system/types').RecipeRuntimeFn<{
-    layout: {
-        stack: {
-            display: "inline-flex";
-            flexFlow: "column wrap";
-            rowGap: "spacing.2";
-            '& > *': {
-                flexBasis: "[0]";
-            };
-        };
-        block: {
-            display: "flex";
-            flexFlow: "column wrap";
-            rowGap: "spacing.2";
-            '& label': {
-                flexBasis: "[100%]";
-            };
-        };
-        inline: {
-            display: "flex";
-            flexFlow: "row wrap";
-            width: "[100%]";
-            gap: "spacing.2";
-            '& label': {
-                flexBasis: "[auto]";
-                flexGrow: "[0]";
-            };
-        };
-        inlineFlex: {
-            display: "inline-flex";
-            gap: "spacing.2";
-        };
-        inlineEqualWidth: {
-            display: "flex";
-            width: "[100%]";
-            '& > *': {
-                flex: "[1 1 auto]";
-            };
-        };
-    };
-    hiddenRadio: {
-        true: {
-            '& label': {
-                _hover: {
-                    backgroundColor: "colour.primary.surfaceHover";
-                };
-            };
-        };
-    };
-}>;

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

@@ -1,14 +0,0 @@
-import { ReactElement, ReactNode, RefAttributes } from 'react';
-import { IressInputProps } from '../Input';
-import { FormControlValue } from '../../types';
-export interface IressReadonlyProps<T extends FormControlValue = FormControlValue> extends Omit<IressInputProps<T, undefined>, 'clearable' | 'onClear' | 'onChange' | 'onInput' | 'placeholder' | 'rows' | 'color'> {
-    /**
-     * The formatted value. If not provided, the value will be displayed.
-     */
-    children?: ReactNode;
-    /**
-     * Make prepend/append element closer to the input content.
-     */
-    inline?: boolean;
-}
-export declare const IressReadonly: <T extends FormControlValue = string | number>(props: IressReadonlyProps<T> & RefAttributes<HTMLInputElement | null>) => ReactElement;

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

@@ -1,106 +0,0 @@
-export declare const readonly: import('../../styled-system/types').SlotRecipeRuntimeFn<"wrapper" | "root" | "addon" | "internal" | "formControl", {
-    inline: {
-        true: {
-            root: {
-                display: "inline-flex";
-            };
-        };
-    };
-    width: {
-        '2': {
-            root: {
-                maxWidth: "[fit-content]";
-            };
-            formControl: {
-                width: "input.2";
-            };
-        };
-        '4': {
-            root: {
-                maxWidth: "[fit-content]";
-            };
-            formControl: {
-                width: "input.4";
-            };
-        };
-        '6': {
-            root: {
-                maxWidth: "[fit-content]";
-            };
-            formControl: {
-                width: "input.6";
-            };
-        };
-        '8': {
-            root: {
-                maxWidth: "[fit-content]";
-            };
-            formControl: {
-                width: "input.8";
-            };
-        };
-        '10': {
-            root: {
-                maxWidth: "[fit-content]";
-            };
-            formControl: {
-                width: "input.10";
-            };
-        };
-        '12': {
-            root: {
-                maxWidth: "[fit-content]";
-            };
-            formControl: {
-                width: "input.12";
-            };
-        };
-        '16': {
-            root: {
-                maxWidth: "[fit-content]";
-            };
-            formControl: {
-                width: "input.16";
-            };
-        };
-        '25perc': {
-            root: {
-                width: "input.25perc";
-            };
-            formControl: {
-                width: "[100%]";
-            };
-        };
-        '50perc': {
-            root: {
-                width: "input.50perc";
-            };
-            formControl: {
-                width: "[100%]";
-            };
-        };
-        '75perc': {
-            root: {
-                width: "input.75perc";
-            };
-            formControl: {
-                width: "[100%]";
-            };
-        };
-        '100perc': {
-            root: {
-                width: "input.100perc";
-            };
-            formControl: {
-                width: "[100%]";
-            };
-        };
-    };
-    alignRight: {
-        true: {
-            formControl: {
-                justifyContent: "flex-end";
-            };
-        };
-    };
-}>;

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

@@ -1,152 +0,0 @@
-import { ForwardedRef, ReactElement, ChangeEvent, ReactNode } from 'react';
-import { AutocompleteSearchHookProps } from '../Autocomplete';
-import { IressSelectActivatorProps } from './components/SelectActivator';
-import { SelectHiddenInputRenderProps } from './components/SelectHiddenInput';
-import { IressInputProps } from '../Input';
-import { ControlledValue } from '../../hooks';
-import { FormattedLabelValueMeta, LabelValueMeta, ReactHookFormCompatibleRef } from '../../interfaces';
-import { FloatingUIAligns } from '../../types';
-import { IressPopoverProps, PopoverRef } from '../Popover';
-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'];
-    /**
-     * 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;
-}
-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

@@ -1,59 +0,0 @@
-export declare const richSelect: import('../../styled-system/types').SlotRecipeRuntimeFn<"wrapper" | "popoverContent" | "richSelect" | "dropdownSelectedHeading" | "dropdownClear", {
-    width: {
-        '2': {
-            richSelect: {
-                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]";
-            };
-        };
-        '4': {
-            richSelect: {
-                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]";
-            };
-        };
-        '6': {
-            richSelect: {
-                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]";
-            };
-        };
-        '8': {
-            richSelect: {
-                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]";
-            };
-        };
-        '10': {
-            richSelect: {
-                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]";
-            };
-        };
-        '12': {
-            richSelect: {
-                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]";
-            };
-        };
-        '16': {
-            richSelect: {
-                width: "[calc({spacing.spacing.2} + 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,13 +0,0 @@
-import { ReactNode } from 'react';
-import { IressTextProps } from '../../Text';
-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/SelectCreate/SelectCreate.d.ts

@@ -1,29 +0,0 @@
-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,17 +0,0 @@
-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,4 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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,52 +0,0 @@
-import { IressMenuItemProps, IressMenuProps } from '../../Menu';
-import { ReactNode } from 'react';
-import { ControlledValue } from '../../../hooks';
-import { FormattedLabelValueMeta, LabelValueMeta } from '../../../interfaces';
-import { FormControlValue } from '../../../types';
-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/SelectMenuItem.d.ts

@@ -1,2 +0,0 @@
-import { IressSelectMenuItemProps } from './SelectMenu';
-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

@@ -1,3 +0,0 @@
-import { IressInputPopoverProps } from '../../Popover';
-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/SelectTags/SelectTags.d.ts

@@ -1,32 +0,0 @@
-import { ReactNode } from 'react';
-import { IressTextProps } from '../../Text';
-import { IressSelectActivatorProps } from '../components/SelectActivator';
-import { LabelValueMeta } from '../../../interfaces';
-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

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