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

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

@@ -0,0 +1,110 @@
+import { Context, ReactNode } from 'react';
+import { ControlledValue } from '../../hooks';
+import { FormControlValue, IressStyledProps } from '../../types';
+export interface IressMenuProps<T = FormControlValue, TMultiple extends boolean = false> extends Omit<IressStyledProps, 'defaultValue' | 'onChange' | 'value'> {
+    /**
+     * If set to true, change event will be fired with the correctly selected value.
+     */
+    changeOnBlur?: boolean;
+    /**
+     * Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
+     */
+    children?: ReactNode;
+    /**
+     * Initially selected values of menu when `role` is listbox.
+     * Used for uncontrolled menus.
+     */
+    defaultSelected?: ControlledValue<T, TMultiple>;
+    /**
+     * If set to true, menu will fill the width of its container.
+     */
+    fluid?: boolean;
+    /**
+     * Unique ID of the menu. If not provided, will be automatically generated.
+     * Used to add aria attributes for accessibility.
+     */
+    id?: string;
+    /**
+     * Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
+     * @default stack
+     */
+    layout?: 'stack' | 'inline' | 'inline-equal-width';
+    /**
+     * If set to true, menu items will contain checkboxes.
+     */
+    multiSelect?: TMultiple;
+    /**
+     * If set to true, menu items will not wrap onto a separate line when space is exceeded.
+     */
+    noWrap?: boolean;
+    /**
+     * Emitted when the menu value changes
+     */
+    onChange?: (value?: ControlledValue<T, TMultiple> | null) => void;
+    /**
+     * Selected values of menu when `role` is listbox.
+     * Used for controlled menus.
+     */
+    selected?: ControlledValue<T, TMultiple>;
+    /**
+     * Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles).
+     * Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
+     */
+    role?: 'menu' | 'list' | 'listbox';
+}
+export interface MenuContextValue<T = FormControlValue, TMultiple extends boolean = false> {
+    /**
+     * Whether the menu should change the selected value on blur.
+     * This is used by components such as `IressMenuItem` to determine if it should change the selected value on blur.
+     */
+    changeOnBlur?: boolean;
+    /**
+     * Whether the menu supports arrow key navigation.
+     * This is used by components such as `IressMenuItem` to determine if it should react to arrow key navigation.
+     */
+    hasArrowKeyNav?: boolean;
+    /**
+     * Whether the menu is considered composite by Floating UI.
+     * This is used by components such as `IressMenuItem` to determine whether it needs to be wrapped in a CompositeItem component.
+     */
+    isComposite: boolean;
+    /**
+     * Checks if the provided value is selected in the menu.
+     * This is used by components such as `IressMenuItem` to determine if it should be displayed as selected.
+     */
+    isSelected: (value?: T) => boolean;
+    /**
+     * Layout of the menu.
+     * This is used by components such as `IressMenuDivider` to determine how to display itself inside certain layouts.
+     */
+    layout: IressMenuProps<T, TMultiple>['layout'];
+    /**
+     * Whether the menu supports multiple selection.
+     * This is used by components such as `IressMenuItem` to determine if it should display a checkbox.
+     */
+    multiSelect?: boolean;
+    /**
+     * Whether the menu items should not wrap onto a separate line when space is exceeded.
+     * This is used by components such as `IressMenuItem` to avoid wrapping.
+     */
+    noWrap?: boolean;
+    /**
+     * The role of the menu. This is used by components such as `IressMenuItem` to determine which role to use.
+     * - `menu` means that sub-items should be `menuitem`
+     * - `list` means that sub-items should be `listitem`
+     * - `listbox` means that sub-items should be `option`
+     */
+    role?: IressMenuProps<T, TMultiple>['role'];
+    /**
+     * Whether the menu supports selection.
+     * This is used by components such as `IressMenuItem` to determine how it should behave.
+     */
+    supportsSelection: boolean;
+    /**
+     * Toggles the selected value of the menu.
+     * This is used by components such as `IressMenuItem` to change the selected value.
+     */
+    toggle: (value?: T, flag?: boolean) => void;
+}
+export declare const MenuContext: Context<MenuContextValue<FormControlValue, false> | undefined>;
+export declare const IressMenu: <T = FormControlValue, TMultiple extends boolean = false>({ changeOnBlur, className, defaultSelected, fluid, id: idProp, layout, multiSelect, noWrap, onChange, role: roleProp, selected: selectedProp, ...restProps }: IressMenuProps<T, TMultiple>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,121 @@
+export declare const menu: import('../../styled-system/types').SlotRecipeRuntimeFn<"text" | "contents" | "root" | "append" | "item" | "checkboxMark", {
+    fluid: {
+        true: {
+            root: {
+                width: "[100%]";
+            };
+        };
+    };
+    hasAppendOrPrepend: {
+        true: {
+            item: {
+                display: "flex";
+                alignItems: "center";
+                gap: "sm";
+            };
+            text: {
+                display: "flex";
+                alignItems: "center";
+                gap: "sm";
+            };
+        };
+    };
+    heading: {
+        true: {
+            text: {
+                pb: "xs";
+                '&:not(:first-child)': {
+                    pt: "md";
+                };
+            };
+        };
+    };
+    insidePopover: {
+        true: {
+            root: {
+                my: "spacing.200";
+                px: "spacing.200";
+            };
+        };
+    };
+    isActiveInPopover: {
+        true: {
+            item: {
+                bg: "colour.primary.surface";
+                color: "colour.primary.text";
+            };
+        };
+    };
+    layout: {
+        stack: {
+            root: {
+                display: "inline-flex";
+                flexWrap: "wrap";
+                flexDirection: "column";
+                rowGap: "spacing.100";
+            };
+        };
+        inline: {
+            root: {
+                display: "inline-flex";
+                columnGap: "spacing.100";
+                flexWrap: "wrap";
+            };
+            item: {
+                alignItems: "center";
+                justifyContent: "center";
+                height: "[100%]";
+            };
+        };
+        'inline-equal-width': {
+            root: {
+                display: "flex";
+                flexDirection: "row";
+                columnGap: "spacing.100";
+                '& > :not(hr)': {
+                    flex: "1";
+                    textAlign: "center";
+                };
+            };
+            item: {
+                alignItems: "center";
+                justifyContent: "center";
+                height: "[100%]";
+                textAlign: "center";
+            };
+            contents: {
+                flex: "1";
+            };
+        };
+    };
+    multiSelect: {
+        true: {};
+    };
+    noWrap: {
+        true: {
+            root: {
+                '& > *': {
+                    maxWidth: "[100%]";
+                };
+            };
+            item: {
+                overflow: "hidden";
+            };
+            text: {
+                overflow: "hidden";
+            };
+            contents: {
+                whiteSpace: "nowrap";
+            };
+        };
+    };
+    selected: {
+        true: {
+            item: {
+                bg: "colour.neutral.20";
+                color: "colour.primary.text";
+                position: "relative";
+            };
+        };
+    };
+}>;

package/dist/src/components/Menu/MenuDivider/MenuDivider.d.ts

@@ -0,0 +1,3 @@
+import { IressDividerProps } from '../../Divider';
+export type IressMenuDividerProps = Omit<IressDividerProps, 'vertical' | 'role'>;
+export declare const IressMenuDivider: ({ className, ...restProps }: IressMenuDividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Menu/MenuItem/MenuItem.d.ts

@@ -0,0 +1,99 @@
+import { ReactNode, MouseEventHandler, KeyboardEventHandler, HTMLAttributes, ReactElement, FocusEventHandler, ElementType, ComponentPropsWithoutRef } from 'react';
+import { ButtonElement, ButtonInstance, ButtonRef } from '../../Button';
+import { FormControlValue } from '../../../types';
+import { PopoverItemHookReturn } from '../../Popover';
+import { IressCSSProps, IressTestProps } from '../../../interfaces';
+export interface MenuItemRenderProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> extends Pick<Partial<PopoverItemHookReturn>, 'id' | 'ref' | 'tabIndex'> {
+    /**
+     * If the item is inside a menu with the role of `listbox` and is selected, this will be set to `true`.
+     */
+    'aria-current'?: HTMLAttributes<ButtonRef<C, THref>>['aria-current'];
+    /**
+     * If the item is inside a menu with the role of `menu` or `listbox` and is selected, this will be set to `true`.
+     */
+    'aria-selected'?: HTMLAttributes<ButtonRef<C, THref>>['aria-selected'];
+    /**
+     * The children to be rendered inside the menu item.
+     */
+    children?: ReactNode;
+    /**
+     * The classes to be applied to the menu item, styled appropriately based on the menu it is inside.
+     */
+    className?: string;
+    /**
+     * Handles the selection of the menu item.
+     */
+    onClick?: MouseEventHandler<ButtonInstance<C, THref>>;
+    /**
+     * Handles the selection of the menu item via keyboard.
+     */
+    onKeyDown?: KeyboardEventHandler<ButtonInstance<C, THref>>;
+    /**
+     * The role of the menu item based on the menu it is inside.
+     */
+    role?: HTMLAttributes<ButtonInstance<C, THref>>['role'];
+}
+export type IressMenuItemProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = IressCSSProps & IressTestProps & Omit<ComponentPropsWithoutRef<ButtonElement<C, THref>>, 'element' | 'value'> & {
+    /**
+     * Section after menu item content.
+     */
+    append?: ReactNode;
+    /**
+     * When true, the item can be toggled even in single-select mode.
+     */
+    canToggle?: boolean;
+    /**
+     * The children to be rendered inside the menu item, describing the action.
+     */
+    children?: ReactNode;
+    /**
+     * The class name to be applied to the menu item.
+     */
+    className?: string;
+    /**
+     * Adds a divider after any content.
+     * If you would like to add content before the menu item, use a `<hr />` instead.
+     */
+    divider?: boolean;
+    /**
+     * Change the component that will be rendered as the menu item, used for third-party libraries that require a specific element type.
+     * By default, it will render a button or an anchor tag based on the `href` prop.
+     */
+    element?: C;
+    /**
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     * If this property is set and no `element` was set, an anchor tag will be rendered. Otherwise, a button will be rendered.
+     */
+    href?: THref;
+    /**
+     * Emitted when the menu item is blurred.
+     */
+    onBlur?: FocusEventHandler<ButtonInstance<C, THref>>;
+    /**
+     * Emitted when the menu item is clicked.
+     */
+    onClick?: MouseEventHandler<ButtonInstance<C, THref>>;
+    /**
+     * Emitted when a key is pressed while focused on the menu item.
+     */
+    onKeyDown?: KeyboardEventHandler<ButtonInstance<C, THref>>;
+    /**
+     * When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+     */
+    loading?: boolean | string;
+    /**
+     * Section before menu item content.
+     */
+    prepend?: ReactNode;
+    /**
+     * When true, shows the item in selected state.
+     */
+    selected?: boolean;
+    /**
+     * To be used when menu type is listbox.
+     */
+    value?: FormControlValue;
+};
+export declare const IressMenuItem: <C extends ElementType | undefined = undefined, THref extends string | undefined = undefined>(props: IressMenuItemProps<C, THref> & {
+    ref?: ButtonRef<C, THref>;
+}) => ReactElement;

package/dist/src/components/Menu/MenuItem/hooks/useMenuItemRole.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Calculate the role of the menu item. It will change depending on its context (if its inside a menu or popover, and based on their role/type).
+ */
+export declare const useMenuItemRole: () => "listitem" | "menuitem" | "option" | undefined;

package/dist/src/components/Menu/MenuText/MenuText.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { IressTextProps, TextElements } from '../../Text';
+export type IressMenuTextProps<E extends TextElements = 'div'> = IressTextProps<E> & {
+    /**
+     * Section after menu item content.
+     */
+    append?: ReactNode;
+    /**
+     * Adds a divider after any content.
+     * If you would like to add content before the menu item, use a `<hr />` instead.
+     */
+    divider?: boolean;
+    /**
+     * 	Section before menu item content.
+     */
+    prepend?: ReactNode;
+};
+export declare const IressMenuText: <E extends TextElements = "div">({ append, children, className, "data-testid": dataTestid, divider, element, prepend, role, textStyle, ...restProps }: IressMenuTextProps<E>) => import("react/jsx-runtime").JSX.Element;
+export declare const IressMenuHeading: <E extends TextElements = "h2">({ className, element, textStyle, ...restProps }: IressMenuTextProps<E>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+export { IressMenu } from './Menu';
+export type * from './Menu';
+export * from './Menu.styles';
+export * from './MenuDivider/MenuDivider';
+export * from './MenuItem/MenuItem';
+export * from './MenuText/MenuText';

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

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

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

@@ -0,0 +1,74 @@
+import { ReactElement, ReactNode } from 'react';
+import { FloatingUIContainer, IressStyledProps } from '../../types';
+export interface IressModalProps extends IressStyledProps {
+    /**
+     * Text to be displayed inside the modal.
+     */
+    children?: ReactNode;
+    /**
+     * Screenreader text for close button.
+     * @default Close
+     */
+    closeText?: string;
+    /**
+     * The container element to render the modal into.
+     * By default, the modal will render at the end of the document body.
+     */
+    container?: FloatingUIContainer;
+    /**
+     * When set to `true` the modal will be visible by default. Use for uncontrolled modals.
+     */
+    defaultShow?: boolean;
+    /**
+     * When set to `true`, users cannot exit the modal by clicking the backdrop or using the escape key.
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * When set to `true` the modal's footer will always be visible and fixed to the bottom of the modal.
+     */
+    fixedFooter?: boolean;
+    /**
+     * Panel to place modal controls.
+     */
+    footer?: ReactNode;
+    /**
+     * Sets the heading for the modal.
+     * If passed an element, it will render the element with an id, to ensure its connection to the modal.
+     */
+    heading?: ReactElement | string;
+    /**
+     * Unique ID for the modal. Use if you would like to open this modal from anywhere in your app using the `useModal` hook.
+     */
+    id?: string;
+    /**
+     * When set to `true`, no close button will be rendered. You must add your own closing mechanism to ensure accessibility.
+     */
+    noCloseButton?: boolean;
+    /**
+     * Emitted when the modal has opened or closed internally. Use for controlled modals.
+     */
+    onShowChange?: (show: boolean) => void;
+    /**
+     * Emitted when the modal has mounted, unmounted, opened or closed. Open and close occur before animation begins.
+     */
+    onStatus?: (status: 'unmounted' | 'initial' | 'open' | 'close') => void;
+    /**
+     * Emitted when the modal has opened.
+     */
+    onEntered?: () => void;
+    /**
+     * Emitted when the modal has closed.
+     */
+    onExited?: () => void;
+    /**
+     * When set to `true` the modal will be visible. Use for controlled modals.
+     */
+    show?: boolean;
+    /**
+     * When set to `true`, the modal will act like a static element when open.
+     * This means it will not lock scroll or focus within the modal.
+     * Note: This is used internally to display modals in Styler. It is not recommended to use this prop in your own applications.
+     */
+    static?: boolean;
+}
+export declare const IressModal: ({ children, className, closeText, container, "data-testid": dataTestid, defaultShow, disableBackdropClick, fixedFooter, footer, heading: headingProp, noCloseButton, onEntered, onExited, onShowChange, onStatus, onTransitionEnd, show, static: isStatic, style, ...restProps }: IressModalProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,87 @@
+/**
+ * The atomic recipe is a function that takes a variant and returns a class name object. It can be used to create a component without JSX (eg. as a utility class).
+ *
+ * [Learn more](https://panda-css.com/docs/concepts/recipes#atomic-recipe-or-cva)
+ */
+export declare const modal: import('../../styled-system/types').SlotRecipeRuntimeFn<"footer" | "header" | "content" | "modal" | "backdrop" | "closeButton" | "pushElement", {
+    /**
+     * When set to `true` the modal's footer will always be visible and fixed to the bottom of the modal.
+     */
+    fixedFooter: {
+        true: {
+            modal: {
+                display: "flex";
+                flexDirection: "column";
+                maxHeight: "[calc(100vh - ({spacing.spacing.700} * 2))]";
+                '@media (min-height: 600px)': {
+                    maxHeight: "[calc(100vh - (100px * 2))]";
+                };
+                overflow: "clip";
+            };
+            content: {
+                flex: "[1]";
+                overflowX: "hidden";
+                overflowY: "auto";
+                maxHeight: "[calc(100vh - ({spacing.spacing.700} * 2))]";
+                '@media (min-height: 600px)': {
+                    maxHeight: "[calc(100vh - (100px * 2))]";
+                };
+            };
+            footer: {
+                flex: "[0]";
+            };
+        };
+    };
+    /**
+     * The state of the modal.
+     */
+    status: {
+        initial: {
+            backdrop: {
+                bg: "transparent";
+            };
+            modal: {
+                opacity: number;
+            };
+        };
+        close: {
+            backdrop: {
+                bg: "transparent";
+            };
+            modal: {
+                opacity: number;
+            };
+        };
+        open: {
+            backdrop: {
+                bg: "colour.system.backdrop.fill";
+            };
+            modal: {
+                opacity: number;
+            };
+        };
+        unmounted: {
+            backdrop: {
+                display: "none";
+            };
+            modal: {
+                display: "none";
+            };
+        };
+    };
+    /**
+     * When set to `true`, the modal will act like a static element when open.
+     * This means it will not lock scroll or focus within the modal.
+     * Note: This is used internally to display modals in Styler. It is not recommended to use this prop in your own applications.
+     */
+    static: {
+        true: {
+            backdrop: {
+                position: "static !important";
+            };
+            modal: {
+                position: "relative";
+            };
+        };
+    };
+}>;

package/dist/src/components/Modal/ModalProvider.d.ts

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

package/dist/src/components/Modal/hooks/useModal.d.ts

@@ -0,0 +1,20 @@
+import { FloatingUIContainer } from '../../../types';
+export interface ModalContextValue {
+    /**
+     * An array of modal IDs that are currently open.
+     */
+    opened: string[];
+    /**
+     * The container element to render the modal into.
+     * By default, the modal will render at the end of the document body.
+     */
+    container?: FloatingUIContainer;
+    /**
+     * Show or hide a modal by ID.
+     */
+    showModal: (id: string, flag?: boolean) => void;
+}
+export declare const ModalContext: import('react').Context<ModalContextValue | undefined>;
+export declare const useModal: () => {
+    showModal: (id: string, flag?: boolean) => void;
+};

package/dist/src/components/Modal/hooks/useProviderModal.d.ts

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

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

@@ -0,0 +1,5 @@
+export * from './Modal.styles';
+export * from './Modal';
+export { IressModalProvider } from './ModalProvider';
+export type { IressModalProviderProps } from './ModalProvider';
+export * from './hooks/useModal';

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

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

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

@@ -0,0 +1,15 @@
+import { IressStyledProps } from '../../types';
+import { ReactNode } from 'react';
+export interface IressPanelProps extends IressStyledProps {
+    /**
+     * Content to be grouped using a panel.
+     */
+    children?: ReactNode;
+    /**
+     * Setting to true will ignore the border radius set in the theme and set it to zero.
+     *
+     * @deprecated Use `borderRadius="none"` instead.
+     */
+    noBorderRadius?: boolean;
+}
+export declare const IressPanel: ({ className, ...restProps }: IressPanelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+export declare const panel: import('../../styled-system/types').RecipeRuntimeFn<{
+    noBorderRadius: {
+        true: {
+            borderRadius: "radius.000";
+        };
+    };
+}>;

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { IressStyledProps } from '../../types';
+import { ReactNode } from 'react';
+export interface IressPlaceholderProps extends Omit<IressStyledProps, 'width'> {
+    /**
+     * Description of the placeholder's envisioned contents.
+     */
+    children?: ReactNode;
+    /**
+     * Sets the height of the placeholder.
+     */
+    height?: string | number;
+    /**
+     * Sets the placeholder to be full width if true.
+     */
+    stretch?: boolean;
+    /**
+     * Sets the width of the placeholder.
+     */
+    width?: string | number;
+}
+export declare const IressPlaceholder: ({ children, className, height, stretch, style, width, ...restProps }: IressPlaceholderProps) => import("react/jsx-runtime").JSX.Element;