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

package/dist/src/components/Popover/hooks/usePopoverItem.d.ts

@@ -1,4 +1,31 @@
-import { PopoverItemHookReturn, PopoverVirtualNode } from '../Popover.types';
+import { KeyboardEventHandler } from 'react';
+export interface PopoverItemHookReturn {
+    /**
+     * The id to be passed to the item.
+     * It is used to set the aria-activedescendant on virtually focused popovers, allowing screen readers to announce the active item.
+     */
+    id: string;
+    /**
+     * Whether the item is active in the popover.
+     * This is used to set the style of the item when it is active, whether virtual or not.
+     */
+    isActiveInPopover?: boolean;
+    /**
+     * The ref to be passed to the item.
+     * This is used to register the item within Floating UI, allowing it to be focused and managed by the popover.
+     */
+    ref?: (node: HTMLElement | null) => void;
+    /**
+     * The tabIndex to be passed to the item.
+     * - In virtual focus mode, this is always -1, as the item is not focusable.
+     * - In non-virtual focus mode, this is 0 if the item is active, and -1 otherwise.
+     */
+    tabIndex?: number;
+}
+export interface PopoverVirtualNode<T extends HTMLElement = HTMLElement> {
+    onBlur?: KeyboardEventHandler<T>;
+    onKeyDown?: KeyboardEventHandler<T>;
+}
 /**
  * This is a wrapper around the useListItem hook from Floating UI, which is used to manage the focus state of the popover items.
  * It provides the necessary props to the popover items to manage their focus state, and sets virtual focus if required.
@@ -9,4 +36,4 @@ import { PopoverItemHookReturn, PopoverVirtualNode } from '../Popover.types';
  * @param {PopoverVirtualNode | null} virtualNode the virtual node to use when the item is focused. This contains some interactions to emulate keydown and blur on the popover item.
  * @returns {IressHTMLAttributes} the props to be passed to the floating content
  */
-export declare const usePopoverItem: (typeAheadLabel?: string, virtualNode?: PopoverVirtualNode | null) => PopoverItemHookReturn;
+export declare const usePopoverItem: <T extends HTMLElement = HTMLElement>(typeAheadLabel?: string, virtualNode?: PopoverVirtualNode<T> | null) => PopoverItemHookReturn;

package/dist/src/components/Popover/hooks/usePopoverNavigation.d.ts

@@ -1,5 +1,5 @@
 import { FloatingContext, UseListNavigationProps, VirtualElement } from '@floating-ui/react';
-import { PopoverNavigationHookReturn, PopoverTypes } from '../Popover.types';
+import { IressPopoverProps } from '../Popover';
 /**
  * This is a wrapper around the useListNavigation hook from Floating UI, which is used to manage the keyboard navigation of popover items.
  * It stores the active index of the popover items, and provides the necessary props to the popover context to manage the focus state of the popover items.
@@ -7,10 +7,14 @@ import { PopoverNavigationHookReturn, PopoverTypes } from '../Popover.types';
  * See: https://floating-ui.com/docs/useListNavigation
  *
  * @param {FloatingContext<RT>} context the popover context
- * @param {PopoverTypes} type the type of popover, whether it is a menu, listbox, etc.
+ * @param {IressPopoverProps['type']} type the type of popover, whether it is a menu, listbox, etc.
  * @param {Partial<UseListNavigationProps>} props props that are passed to the useListNavigation hook
  * @param {(activeIndex: number | null) => void} onNavigate called when the useListNavigation onNavigate is called
  * @param {number} startIndex Which index to start the focus on when the popover is opened. The index must exist in the list of items, otherwise it will not work.
- * @returns {PopoverNavigationHookReturn} activeIndex setters, and the list and listProps passed to other Floating UI hooks
  */
-export declare const usePopoverNavigation: <RT extends VirtualElement = HTMLButtonElement>(context: FloatingContext<RT>, type?: PopoverTypes, props?: Partial<UseListNavigationProps>, onNavigate?: (activeIndex: number | null) => void, startIndex?: number) => PopoverNavigationHookReturn;
+export declare const usePopoverNavigation: <RT extends VirtualElement = HTMLButtonElement>(context: FloatingContext<RT>, type?: IressPopoverProps["type"], props?: Partial<UseListNavigationProps>, onNavigate?: (activeIndex: number | null) => void, startIndex?: number) => {
+    activeIndex: number | null;
+    list: import('react').MutableRefObject<(HTMLElement | null)[]>;
+    listNav: import('@floating-ui/react').ElementProps;
+    setActiveIndex: import('react').Dispatch<import('react').SetStateAction<number | null>>;
+};

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

@@ -1,5 +1,5 @@
-export * from './Popover.types';
 export * from './Popover';
-export * from './hooks/usePopoverItem';
-export * from './InputPopover/InputPopover.types';
+export * from './Popover.styles';
 export * from './InputPopover/InputPopover';
+export * from './hooks/usePopoverItem';
+export type * from './hooks/usePopoverImperativeHandle';

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

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

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

@@ -1,2 +1,44 @@
-import { IressProgressProps } from './Progress.types';
-export declare const IressProgress: ({ className, max, min, sectionTitle, value, "data-testid": dataTestId, ...restProps }: IressProgressProps) => import("react/jsx-runtime").JSX.Element;
+import { CSSProperties } from 'react';
+import { IressStyledProps } from '../../types';
+import { UtilityValues } from '../../styled-system/types/prop-type';
+type ProgressElement<TMin extends number | undefined = undefined> = TMin extends number ? 'meter' : 'progress';
+/**
+ * The component will render as a `<progress>` element by default, but if the `min` prop is set, it will render as a `<meter>` element instead. This is useful for indicating a measurement that is not necessarily a progress bar.
+ * If you are using `IressProgressProps` in your own components, make sure to set the correct generic type for `TMin` to ensure that the correct element attributes are used.
+ *
+ * Examples:
+ * - `IressProgressProps<undefined>` will use the attributes of a `<progress />` element.
+ * - `IressProgressProps<0>` will use the attributes of a `<meter />` element.
+ */
+export type IressProgressProps<TMin extends number | undefined = undefined> = Omit<IressStyledProps<ProgressElement<TMin>>, 'borderRadius' | 'value'> & {
+    /**
+     * The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
+     * @see https://developer.mozilla.org/docs/Web/CSS/border-radius
+     */
+    borderRadius?: UtilityValues['borderRadius'];
+    /**
+     * The maximum value of the progress indicator.
+     * @default 100
+     **/
+    max?: number;
+    /**
+     * The minimum value of the progress indicator. If `min` is set, the progress indicator will render as a `<meter />` element instead of a `<progress />` element, thereby changing its role to `meter` instead of `progressbar`.
+     * @default 0
+     **/
+    min?: TMin;
+    /**
+     * The text that is announced by the screen reader. Should contain a description of the section the progress is being measured for. You can use {{current}} and {{max}} as string replacers for the current value and maximum value respectively.
+     * @default "Progress is {{current}} of {{max}}"
+     */
+    sectionTitle?: string;
+    /**
+     * The current value of the progress indicator.
+     * @default 0
+     **/
+    value?: number;
+};
+export interface ProgressCustomCSSProperties extends CSSProperties {
+    '--iress-border-radius'?: string;
+}
+export declare const IressProgress: <TMin extends number | undefined = undefined>({ borderRadius, className: classNameProp, max, min, sectionTitle, style: styleProp, value, ...restProps }: IressProgressProps<TMin>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export declare const progress: import('../../styled-system/types').RecipeRuntimeFn<import('../../styled-system/types').RecipeVariantRecord>;

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

@@ -1 +1,2 @@
-export { IressProgress } from './Progress';
+export * from './Progress';
+export * from './Progress.styles';

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

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

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

@@ -2,7 +2,7 @@ import { FloatingUIContainer } from '../../types';
 import { ReactNode } from 'react';
 import { IressToasterProviderProps } from '../Toaster';
 import { IressSlideoutProviderProps } from '../Slideout';
-export interface IressProviderProps extends Pick<IressSlideoutProviderProps, 'injectPushStyles'>, Pick<IressToasterProviderProps, 'position'> {
+export interface IressProviderProps extends IressSlideoutProviderProps, Pick<IressToasterProviderProps, 'position'> {
     /**
      * The contents of your application, and/or the components which will be calling slideouts, modals and toasts.
      */
@@ -12,9 +12,13 @@ export interface IressProviderProps extends Pick<IressSlideoutProviderProps, 'in
      * If not provided, will render into the body of the document.
      */
     container?: FloatingUIContainer;
+    /**
+     * If you don't want to load the default Iress font from the CDN, set this to true.
+     */
+    noDefaultFont?: boolean;
     /**
      * If you don't want to load the Iress Icon CSS from the CDN, set this to true.
      */
     noIcons?: boolean;
 }
-export declare const IressProvider: ({ children, container, injectPushStyles, noIcons, position, ...restProps }: IressProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IressProvider: ({ children, container, noDefaultFont, noIcons, position, ...restProps }: IressProviderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,47 @@
-import { IressRadioProps } from './Radio.types';
-export declare const IressRadio: import('react').ForwardRefExoticComponent<IressRadioProps & import('react').RefAttributes<HTMLInputElement>>;
+import { ReactNode, Ref, ReactElement, ChangeEvent } from 'react';
+import { FormControlValue, IressStyledProps } from '../../types';
+export interface IressRadioProps<T = FormControlValue> extends Omit<IressStyledProps<'input'>, 'defaultValue' | 'value'> {
+    /**
+     * Sets the checked state of the radio.
+     * If it is within a radio group, it will be overridden by the radio group's value
+     * and whether it matches this radio's value.
+     */
+    checked?: boolean;
+    /**
+     * Label of the radio
+     */
+    children?: ReactNode;
+    /**
+     * Sets whether the control is hidden. If it is within a radio group,
+     * it will be overridden with the radio group's hiddenControl setting.
+     */
+    hiddenControl?: boolean;
+    /**
+     * Sets the name attribute on the radio input. If it is within a radio group,
+     * it will be overridden with the radio group's name.
+     */
+    name?: string;
+    /**
+     * Handles the onChange event of the radio input.
+     * 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;
+    /**
+     * If `true`, the radio is a required field and will be validated as such.
+     * If it is within a radio group, it will be overridden with the radio group's
+     * required state.
+     */
+    required?: boolean;
+    /**
+     * The value which is submitted with the form data when this radio button is checked.
+     * To set this radio as checked by default, use the `checked` property.
+     */
+    value?: T;
+    /**
+     * Add the button-like border and padding to radio when `touch` is true.
+     */
+    touch?: boolean;
+}
+export declare const IressRadio: <T = FormControlValue>(props: IressRadioProps<T> & {
+    ref?: Ref<HTMLInputElement>;
+}) => ReactElement;

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

@@ -1,2 +1,2 @@
-export * from './Radio.types';
 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

@@ -1,2 +1,56 @@
-import { RadioGroupWithEnums } from './RadioGroup.types';
-export declare const IressRadioGroup: RadioGroupWithEnums;
+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

@@ -1,2 +1,2 @@
-export * from './RadioGroup.types';
 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

@@ -1,3 +1,14 @@
-import { IressReadonlyProps } from './Readonly.types';
-import { FormControlValue } from '../../main';
-export declare const IressReadonly: <T extends FormControlValue>(props: IressReadonlyProps<T> & React.RefAttributes<HTMLInputElement | null>) => React.ReactElement;
+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" | "readonly", {
+    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

@@ -1,2 +1,2 @@
 export * from './Readonly';
-export * from './Readonly.types';
+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;