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

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

@@ -0,0 +1,17 @@
+import { ElementType, ReactElement, ReactNode } from 'react';
+import { ButtonRef, IressButtonProps } from '../Button';
+export type IressSkipLinkProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = IressButtonProps<C, THref> & {
+    /**
+     * Description of where the skip link jumps to.
+     * @default 'Skip to content'
+     */
+    children?: ReactNode;
+    /**
+     * Contains a URL or a URL fragment that the skip link points to.
+     * If this property is set, an anchor tag will be rendered.
+     */
+    href?: THref;
+};
+export declare const IressSkipLink: <C extends ElementType | undefined = undefined, THref extends string | undefined = undefined>(props: IressSkipLinkProps<C, THref> & {
+    ref?: ButtonRef<C, THref>;
+}) => ReactElement;

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

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

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

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

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

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

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

@@ -0,0 +1,82 @@
+import { ReactElement, ReactNode, MutableRefObject } from 'react';
+import { OpenChangeReason } from '@floating-ui/react';
+import { FloatingUIContainer, IressStyledProps } from '../../types';
+export interface IressSlideoutProps extends IressStyledProps {
+    /**
+     * Content to be displayed within the slideout.
+     */
+    children?: ReactNode;
+    /**
+     * Screenreader text for close button.
+     * @default 'Close'
+     */
+    closeText?: string;
+    /**
+     * The container element to render the slideout into.
+     * By default, the slideout will render at the end of the document body.
+     */
+    container?: FloatingUIContainer;
+    /**
+     * When set to `true` the slideout will be visible.
+     * Use for uncontrolled slideouts.
+     */
+    defaultShow?: boolean;
+    /**
+     * The element that needs to be pushed relative to the slideout. This can be a string selector to match an existing element in the DOM, a html element, or a React reference.
+     * Will be ignored if `mode` is not set to `push` or if element does not exist.
+     */
+    eleToPush?: string | HTMLElement | MutableRefObject<HTMLElement | null>;
+    /**
+     * Panel to place slideout controls.
+     */
+    footer?: ReactNode;
+    /**
+     * Sets the heading for the slideout.
+     * If passed an element, it will render the element with an id, to ensure its connection to the slideout.
+     */
+    heading?: ReactElement | string;
+    /**
+     * Unique ID for the slideout. Use if you would like to open this slideout from anywhere in your app using the `useSlideout` hook.
+     */
+    id?: string;
+    /**
+     * Sets how the Slideout interacts with the content of the page.
+     * `overlay` overlays the page content, obscuring the content below.
+     * `push` will push the element (specified by `eleToPush`) across the page. `push` will revert back to `overlay` if `eleToPush` is not specified or if the screen size < 1200px.
+     * @default 'overlay'
+     */
+    mode?: 'overlay' | 'push';
+    /**
+     * Emitted when the slideout has opened or closed internally.
+     * Use for controlled slideouts.
+     */
+    onShowChange?: (show: boolean, reason?: OpenChangeReason) => void;
+    /**
+     * Emitted when the slideout has mounted, unmounted, opened or closed. Open and close occur before animation begins.
+     */
+    onStatus?: (status: 'unmounted' | 'initial' | 'open' | 'close') => void;
+    /**
+     * Emitted when the slideout has opened.
+     */
+    onEntered?: () => void;
+    /**
+     * Emitted when the slideout has closed.
+     */
+    onExited?: () => void;
+    /**
+     * Position of the slideout relative to the page. `left` or `right`.
+     * @default 'right'
+     */
+    position?: 'right' | 'left';
+    /**
+     * When set to `true` the slideout will be visible.
+     * Use for controlled slideouts.
+     */
+    show?: boolean;
+    /**
+     * Accepts a single `SlideoutSize`. Slideouts will display at 100% for mobile screens (<576px).
+     * @default 'sm'
+     */
+    size?: 'sm' | 'md';
+}
+export declare const IressSlideout: ({ children, className, closeText, container, "data-testid": dataTestid, defaultShow, eleToPush, footer, heading: headingProp, mode, onEntered, onExited, onShowChange, onStatus, onTransitionEnd, position, show, size, style, ...restProps }: IressSlideoutProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,66 @@
+export declare const slideout: import('../../styled-system/types').SlotRecipeRuntimeFn<"footer" | "content" | "root" | "closeButton", {
+    position: {
+        right: {
+            root: {
+                insetInlineEnd: "spacing.000";
+                borderStartStartRadius: "radius.050";
+                borderEndStartRadius: "radius.050";
+                borderStartEndRadius: "radius.000";
+                borderEndEndRadius: "radius.000";
+                _motionReduce: {
+                    transition: "[none]";
+                };
+            };
+        };
+        left: {
+            root: {
+                insetInlineStart: "spacing.000";
+                borderStartStartRadius: "radius.000";
+                borderEndStartRadius: "radius.000";
+                borderStartEndRadius: "radius.050";
+                borderEndEndRadius: "radius.050";
+                _motionReduce: {
+                    transition: "[none]";
+                };
+            };
+        };
+    };
+    size: {
+        sm: {
+            root: {
+                width: "overlay.sm";
+            };
+        };
+        md: {
+            root: {
+                width: "overlay.md";
+            };
+        };
+    };
+    status: {
+        initial: {
+            root: {};
+        };
+        open: {
+            root: {};
+        };
+        close: {
+            root: {};
+        };
+        unmounted: {
+            root: {
+                display: "none";
+            };
+        };
+    };
+    mode: {
+        overlay: {};
+        push: {
+            root: {
+                xl: {
+                    borderRadius: "radius.000";
+                };
+            };
+        };
+    };
+}>;

package/dist/src/components/Slideout/SlideoutProvider.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+import { FloatingUIContainer } from '../../types';
+export interface IressSlideoutProviderProps extends PropsWithChildren {
+    /**
+     * The container element to render the slideout into.
+     * By default, the slideout will render at the end of the document body.
+     */
+    container?: FloatingUIContainer;
+}
+export declare const IressSlideoutProvider: ({ children, container, }: IressSlideoutProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Slideout/components/SlideoutInner.d.ts

@@ -0,0 +1,10 @@
+import { IressStyledProps } from '../../../types';
+import { ReactNode } from 'react';
+export interface SlideoutInnerProps extends IressStyledProps {
+    closeText?: string;
+    floatingRef?: (node: HTMLElement | null) => void;
+    footer?: ReactNode;
+    heading?: ReactNode;
+    onOpenChange: (show: boolean) => void;
+}
+export declare const SlideoutInner: ({ children, closeText, "data-testid": dataTestid, floatingRef, footer, heading, onOpenChange, className, ...restProps }: SlideoutInnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Slideout/hooks/useProviderSlideout.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This hook is used to control the slideout state through the provider, used for uncontrolled slideouts.
+ * @param id ID of the modal to control.
+ */
+export declare function useProviderSlideout(id?: string): {
+    opened: boolean | "" | undefined;
+    container: import('../../../types').FloatingUIContainer | undefined;
+    show: (open?: boolean) => void | "" | undefined;
+};

package/dist/src/components/Slideout/hooks/usePushElement.d.ts

@@ -0,0 +1,10 @@
+import { IressSlideoutProps } from '../Slideout';
+export declare function usePushElement({ element, isActive, position, size, status, onOpen, onClose, }: {
+    element: HTMLElement | null;
+    isActive: boolean;
+    position: IressSlideoutProps['position'];
+    size: IressSlideoutProps['size'];
+    status: 'initial' | 'open' | 'close' | 'unmounted';
+    onOpen?: () => void;
+    onClose?: () => void;
+}): void;

package/dist/src/components/Slideout/hooks/useSlideout.d.ts

@@ -0,0 +1,10 @@
+import { FloatingUIContainer } from '../../../types';
+export interface SlideoutContextValue {
+    container?: FloatingUIContainer;
+    opened: string[];
+    showSlideout: (id: string, flag?: boolean) => void;
+}
+export declare const SlideoutContext: import('react').Context<SlideoutContextValue | undefined>;
+export declare const useSlideout: () => {
+    showSlideout: (id: string, flag?: boolean) => void;
+};

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

@@ -0,0 +1,5 @@
+export * from './Slideout';
+export * from './Slideout.styles';
+export { IressSlideoutProvider } from './SlideoutProvider';
+export type { IressSlideoutProviderProps } from './SlideoutProvider';
+export * from './hooks/useSlideout';

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

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

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

@@ -0,0 +1,71 @@
+import { ReactNode, ChangeEvent, CSSProperties } from 'react';
+import { SliderTickLabel, SliderTickLabelValue } from './components/SliderTicks';
+import { IressStyledProps, IressUnstyledProps } from '../../types';
+export interface IressSliderProps extends Omit<IressStyledProps<'input'>, 'children' | 'onInput' | 'onChange'> {
+    /**
+     * Initial value of the slider. Used for uncontrolled sliders.
+     */
+    defaultValue?: number;
+    /**
+     * Format the changed value.
+     */
+    formatValue?: (value: number, tick?: SliderTickLabelValue, readOnly?: boolean) => ReactNode;
+    /**
+     * If `true`, the value tooltip will be hidden.
+     */
+    hiddenValueTooltip?: boolean;
+    /**
+     * Set the maximum value for the slider.
+     * @default 10
+     */
+    max?: number;
+    /**
+     * Sets minimum value for the slider.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name?: string;
+    /**
+     * Emitted when the slider value changes.
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>, value?: number) => void;
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    readOnly?: boolean;
+    /**
+     * Sets the step value of the slider.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * List of labels to be displayed.
+     */
+    tickLabels?: SliderTickLabel[] | boolean;
+    /**
+     * Value of the slider. Used for controlled sliders.
+     */
+    value?: number;
+}
+export interface SliderReadonlyProps extends Omit<IressUnstyledProps<'input'>, 'value'> {
+    /**
+     * The label of the value.
+     */
+    label?: ReactNode;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name?: string;
+    /**
+     * The current value of the slider.
+     */
+    value?: number;
+}
+export interface SliderCustomCSSProperties extends CSSProperties {
+    '--iress-thumb-value-offset'?: string;
+    '--iress-tick-label-width'?: string;
+}
+export declare const IressSlider: import('react').ForwardRefExoticComponent<IressSliderProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1 @@
+export declare const slider: import('../../styled-system/types').SlotRecipeRuntimeFn<"root" | "control" | "thumbValue" | "tickMarkList" | "tickMark" | "tickMarkLabel", {}>;

package/dist/src/components/Slider/components/SliderTicks.d.ts

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+import { IressStyledProps, IressUnstyledProps } from '../../../types';
+import { IressTestProps } from '../../../interfaces';
+export interface SliderTicksProps extends IressUnstyledProps<'datalist'> {
+    /**
+     * Set the maximum value for the slider.
+     * @default 10
+     */
+    max?: number;
+    /**
+     * Sets minimum value for the slider.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * List of labels to be displayed.
+     */
+    tickLabels?: SliderTickLabelValue[];
+}
+export interface SliderTickMarkProps extends IressTestProps {
+    /**
+     * List of all tick labels for the slider.
+     * Used to calculate the relative width of each tick mark.
+     */
+    allTickLabels: SliderTickLabelValue[];
+    /**
+     * The index of the tick label in the list.
+     */
+    index: number;
+    /**
+     * The maximum value of the slider.
+     */
+    max: number;
+    /**
+     * The minimum value of the slider.
+     */
+    min: number;
+    /**
+     * The tick label to be displayed.
+     */
+    tickLabel: SliderTickLabelValue;
+}
+export interface SliderTickLabelValue extends Omit<IressStyledProps, 'children'> {
+    /**
+     * The label of the tick mark. If not provided, the value will be displayed.
+     */
+    label?: ReactNode;
+    /**
+     * The value of the tick mark. Will be used as the value of the form control.
+     */
+    value: number;
+}
+/**
+ * Represents a tick label for the slider.
+ * It can either be a number or an object containing a value, optional label as well as optional styling.
+ */
+export type SliderTickLabel = number | SliderTickLabelValue;
+export declare const SliderTicks: ({ max, min, tickLabels, ...restProps }: SliderTicksProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { IressIconProps } from '../Icon';
+export interface IressSpinnerProps extends Omit<IressIconProps, 'name'> {
+    /**
+     * Spin speed of spinner.
+     * @default half
+     **/
+    spin?: IressIconProps['spin'];
+}
+export declare const IressSpinner: ({ className, spin, ...restProps }: IressSpinnerProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { HorizontalAligns, IressStyledProps, ResponsiveProp } from '../../types';
+import { PositiveSpacingToken } from '../../../theme-preset/tokens/spacing';
+export type IressStackProps<E extends keyof React.JSX.IntrinsicElements = 'div'> = IressStyledProps<E> & {
+    /**
+     * Content to be separated by a gutter.
+     */
+    children?: ReactNode;
+    /**
+     * The HTML element that should be rendered.
+     * @default 'div'
+     */
+    element?: E;
+    /**
+     * Sets the gap between direct children.
+     * @see https://developer.mozilla.org/docs/Web/CSS/gap
+     */
+    gap?: ResponsiveProp<PositiveSpacingToken>;
+    /**
+     * Sets the horizontal alignment of the stack content.
+     */
+    horizontalAlign?: HorizontalAligns;
+};
+export declare const IressStack: <E extends keyof React.JSX.IntrinsicElements = "div">({ className, element, ...restProps }: IressStackProps<E>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,13 @@
+export declare const stack: import('../../styled-system/types').RecipeRuntimeFn<{
+    horizontalAlign: {
+        center: {
+            alignItems: "center";
+        };
+        left: {
+            alignItems: "flex-start";
+        };
+        right: {
+            alignItems: "flex-end";
+        };
+    };
+}>;

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

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

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

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

package/dist/src/components/Stack/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/TabSet/Tab/Tab.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode, Ref, ReactElement } from 'react';
+import { FormControlValue, IressStyledProps } from '../../../types';
+import { ButtonElement } from '../../Button';
+export type IressTabProps<THref extends string | undefined = undefined> = Omit<IressStyledProps<ButtonElement<undefined, THref>>, 'value'> & {
+    /**
+     * Sets the active styling of the tab.
+     */
+    active?: boolean;
+    /**
+     * Text to be displayed inside the tab panel.
+     */
+    children?: ReactNode;
+    /**
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     * If this property is set, an anchor tag will be rendered.
+     *
+     * **Note:** This prop should be avoided when using `children`.
+     */
+    href?: THref;
+    /**
+     * The label of this tab.
+     */
+    label: ReactNode;
+    /**
+     * You can provide your own value to allow you to control its active state when used in `IressTabSet`.
+     */
+    value?: FormControlValue;
+};
+export declare const IressTab: <THref extends string | undefined = undefined>(props: IressTabProps<THref> & {
+    ref?: Ref<HTMLElementTagNameMap[ButtonElement<undefined, THref>]>;
+}) => ReactElement;

package/dist/src/components/TabSet/Tab/Tab.styles.d.ts

@@ -0,0 +1,17 @@
+export declare const tab: import('../../../styled-system/types').RecipeRuntimeFn<{
+    active: {
+        true: {
+            borderBottomColor: "colour.primary.text";
+            color: "colour.primary.text";
+            textStyle: "typography.body.md.strong";
+        };
+    };
+    insideTabSet: {
+        true: {
+            borderBottomWidth: "0px";
+            _hover: {
+                bg: "[none]";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,38 @@
+import { TabSetChangedEventDetail } from './TabSetProvider';
+import { ReactNode } from 'react';
+import { FormControlValue, IressStyledProps } from '../../types';
+import { IressCustomiseSlot } from '../../interfaces';
+export interface IressTabSetProps extends Omit<IressStyledProps, 'onChange'> {
+    /**
+     * Content to be displayed inside the IressTabs, usually multiple `IressTab`.
+     */
+    children?: ReactNode;
+    /**
+     * Set the selected tab for uncontrolled tabs.
+     * If the `IressTab` does not have a `value` prop, it will match by index.
+     */
+    defaultSelected?: FormControlValue;
+    /**
+     * Layout options for the positioning of tabs.
+     * @default top-left
+     */
+    layout?: 'top-left' | 'top-center' | 'top-right';
+    /**
+     * Emitted when a tab changes.
+     */
+    onChange?: (event: TabSetChangedEventDetail) => void;
+    /**
+     * Custom style for the panel (the area that contains the tab content).
+     */
+    panelStyle?: IressCustomiseSlot;
+    /**
+     * Set the selected tab for controlled tabs.
+     * If the `IressTab` does not have a `value` prop, it will match by index.
+     */
+    selected?: FormControlValue;
+    /**
+     * Custom style for the tab holder (the area that contains the tabs).
+     */
+    tabHolderStyle?: IressCustomiseSlot;
+}
+export declare const IressTabSet: ({ children, className, defaultSelected, layout, onChange, panelStyle, selected, tabHolderStyle, ...restProps }: IressTabSetProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+export declare const tabSet: import('../../styled-system/types').SlotRecipeRuntimeFn<"list" | "root" | "panel" | "hoverIndicator" | "listHolder" | "activeIndicator", {
+    layout: {
+        'top-left': {
+            list: {
+                justifyContent: "flex-start";
+            };
+        };
+        'top-center': {
+            list: {
+                justifyContent: "center";
+            };
+            activeIndicator: {
+                left: "[50%]";
+            };
+        };
+        'top-right': {
+            list: {
+                justifyContent: "flex-end";
+            };
+            activeIndicator: {
+                left: "[100%]";
+            };
+        };
+    };
+}>;

package/dist/src/components/TabSet/TabSetProvider.d.ts

@@ -0,0 +1,32 @@
+import { MutableRefObject, PropsWithChildren } from 'react';
+import { FormControlValue } from '../../types';
+export interface TabSetContextValue {
+    activate: (node?: HTMLElement | null) => void;
+    active?: HTMLElement;
+    hover?: HTMLElement;
+    isActive: (node?: HTMLElement | null) => boolean;
+    panel: HTMLDivElement | null;
+    register: (node: HTMLElement, value?: FormControlValue) => void;
+    setHover: (node?: HTMLElement) => void;
+    unregister: (node: HTMLElement) => void;
+}
+export interface TabSetProviderProps extends PropsWithChildren {
+    defaultSelected?: FormControlValue;
+    hoverIndicator?: MutableRefObject<HTMLElement | null>;
+    onChange?: (event: TabSetChangedEventDetail) => void;
+    panel: HTMLDivElement | null;
+    selected?: FormControlValue;
+}
+export interface TabSetChangedEventDetail {
+    /**
+     * The index of the tab that was selected.
+     */
+    index: number;
+    /**
+     * The value of the tab that was selected.
+     * If the tab does not have a value, this will be the same as `index`.
+     */
+    value?: FormControlValue;
+}
+export declare const TabSetContext: import('react').Context<TabSetContextValue | undefined>;
+export declare const TabSetProvider: ({ children, defaultSelected, onChange, panel, selected: selectedProp, }: TabSetProviderProps) => import("react/jsx-runtime").JSX.Element;