@iress-oss/ids-components 5.20.2 → 6.0.0-alpha.1

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

@@ -0,0 +1,51 @@
+export declare const radio: import('../../styled-system/types').SlotRecipeRuntimeFn<"input" | "label" | "root" | "checkboxMark" | "radioMark" | "checkedRadioMark", {
+    hiddenControl: {
+        true: {
+            label: {
+                display: "block";
+                borderWidth: "1px";
+                borderStyle: "solid";
+                borderColor: "colour.neutral.40";
+                cursor: "pointer";
+                _hover: {
+                    backgroundColor: "colour.primary.surfaceHover";
+                };
+            };
+            radioMark: {
+                display: "none";
+            };
+        };
+    };
+    touch: {
+        true: {
+            label: {
+                borderWidth: "1px";
+                borderStyle: "solid";
+                borderColor: "colour.neutral.40";
+                borderRadius: "radius.050";
+                padding: "spacing.400";
+            };
+        };
+    };
+    checked: {
+        true: {
+            label: {
+                borderColor: "[currentColor]";
+            };
+            radioMark: {
+                borderColor: "[currentColor]";
+                '& circle': {
+                    fill: "[currentColor]";
+                    display: "block";
+                };
+            };
+        };
+        false: {
+            radioMark: {
+                _hover: {
+                    backgroundColor: "colour.primary.surfaceHover";
+                };
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,2 @@
+export * from './Radio';
+export * from './Radio.styles';

package/dist/src/components/Radio/meta/Thumbnail.d.ts

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

package/dist/src/components/Radio/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/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,56 @@
+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

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

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

@@ -0,0 +1,2 @@
+export * from './RadioGroup';
+export * from './RadioGroup.styles';

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

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

package/dist/src/components/RadioGroup/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/Readonly/Readonly.d.ts

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,106 @@
+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/Readonly/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Readonly';
+export * from './Readonly.styles';

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

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

package/dist/src/components/Readonly/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/RichSelect/RichSelect.d.ts

@@ -0,0 +1,152 @@
+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

@@ -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

@@ -0,0 +1,13 @@
+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/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

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

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

@@ -0,0 +1,4 @@
+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: {};
+        };
+    };
+}>;