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

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

@@ -1,2 +1,2 @@
-export * from './Label.types';
 export * from './Label';
+export * from './Label.styles';

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

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

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

@@ -0,0 +1,42 @@
+import { ReactElement, ReactNode, ElementType, ComponentPropsWithoutRef, MouseEventHandler } from 'react';
+import { ButtonElement, ButtonInstance, ButtonRef } from '../Button';
+import { IressCSSProps, IressTestProps } from '../../interfaces';
+export type IressLinkProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = IressCSSProps & IressTestProps & Omit<ComponentPropsWithoutRef<ButtonElement<C, THref>>, 'element'> & {
+    /**
+     * Sets the active state of the link, usually used to indicate the link has activated a modal, popover or slideout.
+     */
+    active?: boolean;
+    /**
+     * Content for the append slot.
+     */
+    append?: ReactNode;
+    /**
+     * Content is placed between prepend and append if provided. Used to describe the expected intention of this link.
+     */
+    children?: ReactNode;
+    /**
+     * Change the component that will be rendered as the link, 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, an anchor tag will be rendered.
+     */
+    href?: 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;
+    /**
+     * Emitted when the menu item is clicked.
+     */
+    onClick?: MouseEventHandler<ButtonInstance<C, THref>>;
+    /**
+     * Content for the prepend slot.
+     */
+    prepend?: ReactNode;
+};
+export declare const IressLink: <C extends ElementType | undefined = undefined, THref extends string | undefined = undefined>(props: IressLinkProps<C, THref> & {
+    ref?: ButtonRef<C, THref>;
+}) => ReactElement;

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

@@ -0,0 +1,29 @@
+/**
+ * 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 link: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "spinner" | "root" | "append" | "prepend", {
+    active: {
+        true: {
+            root: {
+                borderBottom: "[1px dashed currentColor]";
+            };
+        };
+    };
+    loading: {
+        true: {
+            content: {
+                _groupHover: {
+                    textDecoration: "underline";
+                };
+            };
+            root: {
+                cursor: "not-allowed";
+                filter: "[saturate(0.25)]";
+                opacity: number;
+                boxShadow: "none";
+            };
+        };
+    };
+}>;

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

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

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

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

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

@@ -1,2 +1,110 @@
-import { MenuWithEnums } from './Menu.types';
-export declare const IressMenu: MenuWithEnums;
+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

@@ -1,2 +1,3 @@
-import { IressDividerProps } from '../../../main';
-export declare const IressMenuDivider: (props: IressDividerProps) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1,2 +1,99 @@
-import { IressMenuItemProps } from './MenuItem.types';
-export declare const IressMenuItem: import('react').ForwardRefExoticComponent<IressMenuItemProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+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

@@ -1,9 +1,4 @@
-import { MenuItemRoles } from '../MenuItem.types';
 /**
  * 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).
- *
- * TODO: Change to a helper and pass menu and popover as arguments
- *
- * @returns {MenuItemRoles | undefined} final role of the menu item, based on its context.
  */
-export declare const useMenuItemRole: () => MenuItemRoles | undefined;
+export declare const useMenuItemRole: () => "listitem" | "menuitem" | "option" | undefined;

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

@@ -1,2 +1,19 @@
-import { IressMenuTextProps } from '../MenuItem/MenuItem.types';
-export declare const IressMenuText: ({ append, children, className, divider, prepend, role, ...restProps }: IressMenuTextProps) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1,13 +1,6 @@
-export * from './Menu';
-export * from './Menu.types';
+export { IressMenu } from './Menu';
+export type * from './Menu';
+export * from './Menu.styles';
 export * from './MenuDivider/MenuDivider';
-export * from './MenuHeading/MenuHeading';
-export * from './MenuText/MenuText';
 export * from './MenuItem/MenuItem';
-export * from './MenuItem/MenuItem.types';
-export * from './MenuItem/hooks/useMenuItemAria';
-export * from './MenuItem/hooks/useMenuItemButtonProps';
-export * from './MenuItem/hooks/useMenuItemComposite';
-export * from './MenuItem/hooks/useMenuItemInteractions';
-export * from './MenuItem/hooks/useMenuItemRole';
-export * from './helpers/mapMenuItems';
+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

@@ -1,2 +1,74 @@
-import { ModalWithEnums } from './Modal.types';
-export declare const IressModal: ModalWithEnums;
+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;