@iress-oss/ids-components 5.20.2 → 5.20.3

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

@@ -0,0 +1,2 @@
+import { SkeletonWithEnums } from './Skeleton.types';
+export declare const IressSkeleton: SkeletonWithEnums;

package/dist/src/components/Skeleton/Skeleton.types.d.ts

@@ -0,0 +1,36 @@
+import { TextVariant } from '../../enums';
+import { IressHTMLAttributes } from '../../interfaces';
+import { TextVariants } from '../../types';
+export interface IressSkeletonProps extends Omit<IressHTMLAttributes, 'children'> {
+    /**
+     * Sets the height of the skeleton bones. If no unit is specified it will default to pixels. Will be ignored when in `text` mode.
+     */
+    height?: string;
+    /**
+     * Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textVariant`.
+     * @default text
+     */
+    mode?: SkeletonMode | SkeletonModes;
+    /**
+     * Use `textVariant` to specify what the Skeleton should emulate. If set to `h1` a non-break space with the same font-size and line-height of a h1 will be rendered.
+     */
+    textVariant?: TextVariant | TextVariants;
+    /**
+     * Sets the width of the skeleton bones. If no unit is specified it will default to pixels.
+     */
+    width?: string;
+}
+export interface SkeletonWithEnums extends React.FC<IressSkeletonProps> {
+    /** @deprecated IressSkeleton.Mode enum is now deprecated and will be removed in a future version. Please use the SkeletonModes type instead. **/
+    Mode: typeof SkeletonMode;
+    /** @deprecated IressSkeleton.TextVariant enum is now deprecated and will be removed in a future version. Please use the TextVariants type instead. **/
+    TextVariant: typeof TextVariant;
+}
+/** @deprecated SkeletonMode enum is now deprecated and will be removed in a future version. Please use the SkeletonModes type instead. **/
+export declare enum SkeletonMode {
+    Rect = "rect",
+    Circle = "circle",
+    Text = "text"
+}
+export declare const SKELETON_MODES: readonly ["rect", "circle", "text"];
+export type SkeletonModes = (typeof SKELETON_MODES)[number];

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

@@ -0,0 +1,2 @@
+export * from './Skeleton.types';
+export * from './Skeleton';

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

@@ -0,0 +1,2 @@
+import { IressSkipLinkProps } from './SkipLink.types';
+export declare const IressSkipLink: import('react').ForwardRefExoticComponent<IressSkipLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;

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

@@ -0,0 +1,22 @@
+import { IressAnchorHTMLAttributes } from '../../interfaces';
+import { ReactNode } from 'react';
+export interface IressSkipLinkProps extends IressAnchorHTMLAttributes {
+    /**
+     * Description of where the skip link jumps to.
+     * @default Skip to content
+     */
+    children?: ReactNode;
+    /**
+     * The target of the skip link.
+     */
+    href?: string;
+    /**
+     * Unique identifier for the skip link.
+     */
+    id?: string;
+    /**
+     * The target ID of the element that the link will skip to. If not provided, will fall back to the `href` property.
+     * @deprecated Use `href` with a `#` instead (eg. #main).
+     */
+    targetId?: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+import { SlideoutWithEnums } from './Slideout.types';
+export declare const IressSlideout: SlideoutWithEnums;

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

@@ -0,0 +1,150 @@
+import { PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { IressHTMLAttributes } from '../../interfaces';
+import { PaddingSize } from '../../enums';
+import { FloatingUIContainer, PaddingSizes } from '../../types';
+import { OpenChangeReason } from '@floating-ui/react';
+export interface IressSlideoutProps extends IressHTMLAttributes {
+    /**
+     * When set to `true` a backdrop will be displayed to cover the contents of the page.
+     * The slideout will then become the only element that can be interacted with.
+     */
+    backdrop?: boolean;
+    /**
+     * 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 | React.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?: SlideoutMode | SlideoutModes;
+    /**
+     * 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;
+    /**
+     * Sets the padding of the wrapping panel component.
+     * @default 'md'
+     */
+    padding?: PaddingSize | PaddingSizes;
+    /**
+     * Position of the slideout relative to the page. `left` or `right`.
+     * @default 'right'
+     */
+    position?: SlideoutPosition | SlideoutPositions;
+    /**
+     * 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?: SlideoutSize | SlideoutSizes;
+}
+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;
+    /**
+     * If you are rendering a slideout inside a micro-frontend, using `push` mode and `eleToPush` is targetting an element in the parent app, you will need to set this to `true` to ensure the styles are injected into the parent app.
+     * This will ensure the slideout is positioned correctly and the element is pushed correctly.
+     */
+    injectPushStyles?: boolean | string;
+}
+export interface IressSlideoutContextValue {
+    container?: FloatingUIContainer;
+    opened: string[];
+    showSlideout: (id: string, flag?: boolean) => void;
+}
+export interface SlideoutInnerProps extends IressHTMLAttributes {
+    closeText?: string;
+    floatingRef?: (node: HTMLElement | null) => void;
+    footer?: ReactNode;
+    heading?: ReactNode;
+    onOpenChange: (show: boolean) => void;
+    padding?: PaddingSize | PaddingSizes;
+}
+export interface SlideoutWithEnums extends React.FC<IressSlideoutProps> {
+    /** @deprecated IressSlideout.Mode will be removed in future versions of IDS. Please use the value directly. */
+    Mode: typeof SlideoutMode;
+    /** @deprecated IressSlideout.Padding will be removed in future versions of IDS. Please use the value directly. */
+    Padding: typeof PaddingSize;
+    /** @deprecated IressSlideout.Position will be removed in future versions of IDS. Please use the value directly. */
+    Position: typeof SlideoutPosition;
+    /** @deprecated IressSlideout.Size will be removed in future versions of IDS. Please use the value directly. */
+    Size: typeof SlideoutSize;
+}
+/** @deprecated IressSlideout.Mode enum is now deprecated and will be removed in a future version. Please use the value directly instead. **/
+export declare enum SlideoutMode {
+    Overlay = "overlay",
+    Push = "push"
+}
+export declare const SLIDEOUT_MODES: readonly ["overlay", "push"];
+export type SlideoutModes = (typeof SLIDEOUT_MODES)[number];
+/** @deprecated IressSlideout.Position enum is now deprecated and will be removed in a future version. Please use the value directly instead. **/
+export declare enum SlideoutPosition {
+    Right = "right",
+    Left = "left"
+}
+export declare const SLIDEOUT_POSITIONS: readonly ["right", "left"];
+export type SlideoutPositions = (typeof SLIDEOUT_POSITIONS)[number];
+/** @deprecated IressSlideout.Size enum is now deprecated and will be removed in a future version. Please use the value directly instead. **/
+export declare enum SlideoutSize {
+    Sm = "sm",
+    Md = "md",
+    Lg = "lg"
+}
+export declare const SLIDEOUT_SIZES: readonly ["sm", "md", "lg"];
+export type SlideoutSizes = (typeof SLIDEOUT_SIZES)[number];

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

@@ -0,0 +1,3 @@
+import { IressSlideoutContextValue, IressSlideoutProviderProps } from './Slideout.types';
+export declare const IressSlideoutContext: import('react').Context<IressSlideoutContextValue | undefined>;
+export declare const IressSlideoutProvider: ({ children, container, injectPushStyles, }: IressSlideoutProviderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import { SlideoutInnerProps } from '../Slideout.types';
+export declare const SlideoutInner: ({ children, closeText, "data-testid": dataTestid, floatingRef, footer, heading, onOpenChange, padding, ...restProps }: SlideoutInnerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export declare function useIDSProvidedSlideout(id?: string): {
+    container: import('../../../types').FloatingUIContainer | undefined;
+    opened: boolean | "" | undefined;
+    show: (open?: boolean) => void | "" | undefined;
+};

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

@@ -0,0 +1,3 @@
+export declare const useSlideout: () => {
+    showSlideout: (id: string, flag?: boolean) => void;
+};

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

@@ -0,0 +1,4 @@
+export * from './Slideout.types';
+export * from './Slideout';
+export * from './SlideoutProvider';
+export * from './hooks/useSlideout';

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

@@ -0,0 +1,2 @@
+import { IressSliderProps } from './Slider.types';
+export declare const IressSlider: import('react').ForwardRefExoticComponent<IressSliderProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,94 @@
+import { ReactNode } from 'react';
+import { IressHTMLAttributes, ResponsiveSizing } from '../../interfaces';
+export interface IressSliderProps extends Omit<IressHTMLAttributes<HTMLInputElement>, 'children' | 'onInput' | 'onChange'> {
+    /**
+     * Initial value of the slider. Used for uncontrolled sliders.
+     */
+    defaultValue?: number;
+    /**
+     * Format the changed value.
+     */
+    formatValue?: (value: number, tick?: SliderTickLabelValueWithClassName, 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: React.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 SliderTicksProps extends IressHTMLAttributes<HTMLDataListElement> {
+    /**
+     * 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 SliderReadonlyProps extends Omit<IressHTMLAttributes<HTMLInputElement>, '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 type SliderTickLabel = number | SliderTickLabelValue;
+export interface SliderTickLabelValue {
+    value: number;
+    label?: ReactNode;
+    hiddenOn?: ResponsiveSizing<boolean>;
+}
+export type SliderTickLabelValueWithClassName = SliderTickLabelValue & {
+    className?: Record<string, boolean>;
+};
+export type SliderCustomCSSProperties = React.CSSProperties & {
+    '--iress-thumb-value-offset'?: string;
+    '--iress-tick-label-width'?: string;
+};

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

@@ -0,0 +1,2 @@
+import { SliderTicksProps } from '../Slider.types';
+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.types';
+export * from './Slider';

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

@@ -0,0 +1,2 @@
+import { IressSpinnerProps } from './Spinner.types';
+export declare const IressSpinner: ({ className, name, spin, ...restProps }: IressSpinnerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,13 @@
+import { IressIconProps } from '../Icon';
+export interface IressSpinnerProps extends Omit<IressIconProps, 'name'> {
+    /**
+     * Name of spinner icon.
+     * @default spinner-third
+     **/
+    name?: IressIconProps['name'];
+    /**
+     * Spin speed of spinner.
+     * @default half
+     **/
+    spin?: IressIconProps['spin'];
+}

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

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

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

@@ -0,0 +1,2 @@
+import { StackWithEnums } from './Stack.types';
+export declare const IressStack: StackWithEnums;

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

@@ -0,0 +1,22 @@
+import { IressHTMLAttributes, ResponsiveSizing } from '../../interfaces';
+import { GutterSize } from '../../enums';
+import { GutterSizes } from '../../types';
+import { ReactNode } from 'react';
+export interface IressStackProps extends IressHTMLAttributes {
+    /**
+     * Content to be separated by a gutter.
+     */
+    children?: ReactNode;
+    /**
+     * Sets the gutter size of the stack.
+     */
+    gutter?: GutterSize | GutterSizes | ResponsiveSizing<GutterSize | GutterSizes>;
+}
+export declare enum StackCssClass {
+    Base = "iress-u-stack",
+    Gutter = "iress--gutter"
+}
+export interface StackWithEnums extends React.FC<IressStackProps> {
+    /** @deprecated IressStack.Gutter is now deprecated and will be removed in a future version. Please use the GutterSizes type instead. */
+    Gutter: typeof GutterSize;
+}

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

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

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

@@ -0,0 +1,2 @@
+import { IressTabProps } from './Tab.types';
+export declare const IressTab: import('react').ForwardRefExoticComponent<IressTabProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { IressButtonHTMLAttributes } from '../../../interfaces';
+import { FormControlValue } from '../../../types';
+export interface IressTabProps extends Omit<IressButtonHTMLAttributes, 'children' | 'value'> {
+    /**
+     * Sets the active styling of the tab.
+     */
+    active?: boolean;
+    /**
+     * Text to be displayed inside the tab panel.
+     */
+    children?: ReactNode;
+    /**
+     * 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;
+}

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

@@ -0,0 +1,2 @@
+import { TabSetWithEnums } from './TabSet.types';
+export declare const IressTabSet: TabSetWithEnums;

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

@@ -0,0 +1,84 @@
+import { PropsWithChildren, ReactNode, default as React } from 'react';
+import { IressHTMLAttributes } from '../../interfaces';
+import { FormControlValue } from '../../types';
+export interface IressTabSetProps extends Omit<IressHTMLAttributes, '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?: TabSetLayout | TabSetLayouts;
+    /**
+     * Emitted when a tab changes.
+     */
+    onChange?: (event: TabSetChangedEventDetail) => void;
+    /**
+     * Set the selected tab for controlled tabs.
+     * If the `IressTab` does not have a `value` prop, it will match by index.
+     */
+    selected?: FormControlValue;
+}
+export interface TabSetProviderProps extends PropsWithChildren {
+    defaultSelected?: FormControlValue;
+    onChange?: (event: TabSetChangedEventDetail) => void;
+    panel: HTMLDivElement | null;
+    selected?: FormControlValue;
+}
+export interface TabSetContextValue {
+    items: TabSetItem[];
+    active?: TabSetItem;
+    panel: HTMLDivElement | null;
+    register: (item: TabSetRegisterItem) => void;
+    indexOf: (id: string, value?: FormControlValue) => number;
+    isActive: (id: string, value?: FormControlValue) => boolean;
+    activate: (index: number, value?: FormControlValue) => void;
+}
+export interface TabSetChangedEventDetail {
+    value?: FormControlValue;
+    index: number;
+}
+export interface TabSetWithEnums extends React.FC<IressTabSetProps> {
+    /** @deprecated IressTabSet.Layout enum is now deprecated and will be removed in a future version. Please use the value directly instead. **/
+    Layout: typeof TabSetLayout;
+}
+export interface TabSetItemProps extends IressHTMLAttributes {
+    handleSelection: (index: number, value?: FormControlValue) => void;
+    index: number;
+    selected?: boolean;
+    value?: FormControlValue;
+}
+export interface TabSetItemRenderProps extends React.HTMLAttributes<HTMLElement> {
+    ref?: (instance: HTMLElement | null) => void;
+}
+export interface TabSetRegisterItem {
+    id: string;
+    value?: FormControlValue;
+}
+export interface TabSetItem extends TabSetRegisterItem {
+    index: number;
+}
+/** @deprecated IressTabs.Layout enum is now deprecated and will be removed in a future version. Please use the values directly instead. **/
+export declare enum TabSetLayout {
+    TopLeft = "top-left",
+    TopCenter = "top-center",
+    TopRight = "top-right"
+}
+export declare const TAB_SET_LAYOUTS: readonly ["top-left", "top-center", "top-right"];
+export type TabSetLayouts = (typeof TAB_SET_LAYOUTS)[number];
+export interface Tab {
+    tabName: string;
+    active: boolean;
+    tabButtonText: ReactNode;
+    tabPanelContent: ReactNode;
+    tabButtonTestId?: string;
+    tabPanelTestId?: string;
+    tabButtonOnClick?: React.MouseEventHandler<HTMLButtonElement>;
+}

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

@@ -0,0 +1,3 @@
+import { TabSetContextValue, TabSetProviderProps } from './TabSet.types';
+export declare const TabSetItemsContext: import('react').Context<TabSetContextValue | undefined>;
+export declare const TabSetProvider: ({ children, onChange, defaultSelected, panel, selected: selectedProp, }: TabSetProviderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import { TabSetItemProps } from '../TabSet.types';
+export declare const TabSetItem: ({ children, handleSelection, index, selected, value, ...restProps }: TabSetItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { Tab } from '../TabSet.types';
+export declare const mapTabs: (tabs: Tab[]) => React.JSX.Element[] | null;

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

@@ -0,0 +1 @@
+export declare const useTabSetItems: () => import('..').TabSetContextValue | undefined;

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

@@ -0,0 +1,5 @@
+export * from './Tab/Tab.types';
+export * from './Tab/Tab';
+export * from './TabSet.types';
+export * from './TabSet';
+export * from './helpers/mapTabs';

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

@@ -0,0 +1,7 @@
+import { IressTableProps, TableEnums, TableExports, TableRef } from './Table.types';
+import { ReactElement, Ref } from 'react';
+declare const ForwardedTable: <TRow extends object = never, TVal = never>(props: IressTableProps<TRow, TVal> & {
+    ref?: Ref<TableRef<TRow>>;
+}) => ReactElement;
+export declare const IressTable: typeof ForwardedTable & TableEnums & TableExports;
+export {};