@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/dist/patterns/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,47 @@
+import { ElementType, ReactNode } from 'react';
+import { IressLinkProps } from '../../components/Link';
+import { IressStyledProps } from '../../types';
+import { IressPopoverProps } from '../../components/Popover';
+export type BreadcrumbItem<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = Omit<IressLinkProps<C, THref>, 'children' | 'value'> & {
+    /**
+     * The page or level name to display for this breadcrumb item.
+     */
+    label: ReactNode;
+};
+export interface IressBreadcrumbsProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> extends IressStyledProps<'nav'> {
+    /**
+     * Array of breadcrumb items defining the navigation path, in hierarchical order.
+     * The last item is automatically treated as the current page.
+     */
+    items: BreadcrumbItem<C, THref>[];
+    /**
+     * Maximum number of items to show before collapsing with overflow.
+     * Set to 0 to show all items without overflow.
+     * @default 5
+     */
+    limit?: number;
+    /**
+     * Additional props to pass to the overflow popover, such as `aria-label` for accessibility.
+     * This is only applicable when `limit` is set to a value less than the number of items.
+     */
+    overflowProps?: Omit<IressPopoverProps, 'activator'>;
+}
+/**
+ * Breadcrumbs provides secondary navigation, helping users understand
+ * their current location within the site hierarchy and navigate back to parent levels.
+ *
+ * @example
+ * ```tsx
+ * <IressBreadcrumbs
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Products', href: '/products' },
+ *     { label: 'Product Details' }, // Current page
+ *   ]}
+ * />
+ * ```
+ */
+export declare const IressBreadcrumbs: {
+    <C extends ElementType | undefined = undefined, THref extends string | undefined = undefined>({ children, className, "data-testid": dataTestId, items, limit, overflowProps, ...restProps }: IressBreadcrumbsProps<C, THref>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/patterns/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,130 @@
+import { jsxs as N, jsx as t } from "react/jsx-runtime";
+import { c as g } from "../../cx-DN21T1EH.js";
+import { s as k } from "../../factory-CcYfm2kB.js";
+import { breadcrumbs as y } from "./Breadcrumbs.styles.js";
+import { GlobalCSSClass as C } from "../../enums.js";
+import { propagateTestid as o } from "../../helpers/utility/propagateTestid.js";
+import { IressLink as B } from "../../components/Link/Link.js";
+import "../../components/Link/Link.styles.js";
+import { IressText as M } from "../../components/Text/Text.js";
+import { IressPopover as w } from "../../components/Popover/Popover.js";
+import "../../components/Popover/Popover.styles.js";
+import "../../components/Popover/InputPopover/InputPopover.js";
+import "react";
+import "../../components/Popover/hooks/useFloatingPopover.js";
+import { IressMenu as O } from "../../components/Menu/Menu.js";
+import "../../components/Menu/Menu.styles.js";
+import "../../components/Menu/MenuItem/MenuItem.styles.js";
+import "../../components/Menu/MenuGroup/MenuGroup.styles.js";
+import "../../components/Menu/MenuDivider/MenuDivider.js";
+import "../../components/Menu/MenuGroup/MenuGroup.js";
+import { IressMenuItem as j } from "../../components/Menu/MenuItem/MenuItem.js";
+import "../../components/Menu/MenuText/MenuText.js";
+const h = ({
+  className: i,
+  "data-testid": m,
+  isCurrent: e = !1,
+  label: s,
+  ...a
+}) => e ? /* @__PURE__ */ t(
+  M,
+  {
+    className: i,
+    "data-testid": m,
+    "aria-current": "page",
+    children: s
+  }
+) : /* @__PURE__ */ t(B, { ...a, className: i, children: s });
+h.displayName = "Breadcrumb";
+const v = ({
+  "aria-label": i = "More pages",
+  className: m,
+  "data-testid": e,
+  items: s = [],
+  ...a
+}) => /* @__PURE__ */ t(
+  w,
+  {
+    align: "bottom",
+    ...a,
+    activator: /* @__PURE__ */ t(B, { "aria-label": i, className: m, children: "..." }),
+    "data-testid": e,
+    children: /* @__PURE__ */ t(O, { "data-testid": o(e, "menu"), children: s.map(({ key: l, label: d, ...c }, r) => /* @__PURE__ */ t(j, { ...c, children: d }, l ?? r)) })
+  }
+);
+v.displayName = "BreadcrumbOverflow";
+const x = ({
+  children: i,
+  className: m,
+  "data-testid": e,
+  items: s,
+  limit: a = 5,
+  overflowProps: l,
+  ...d
+}) => {
+  const c = a - 1, r = y(), p = s[0], u = s.slice(-(c - 1)).filter((f) => f !== p), b = a === 0 ? [] : s.slice(1, -(c - 1));
+  return /* @__PURE__ */ N(
+    k.nav,
+    {
+      className: g(m, r.root, C.Breadcrumbs),
+      "data-testid": e,
+      ...d,
+      children: [
+        i,
+        /* @__PURE__ */ N("ol", { className: r.list, children: [
+          p && /* @__PURE__ */ t(
+            "li",
+            {
+              className: r.item,
+              "data-testid": o(e, "item-0"),
+              children: /* @__PURE__ */ t(
+                h,
+                {
+                  isCurrent: s.length === 1,
+                  ...p,
+                  className: s.length === 1 ? r.current : r.link
+                }
+              )
+            }
+          ),
+          b.length > 0 && /* @__PURE__ */ t(
+            "li",
+            {
+              className: r.item,
+              "data-testid": o(e, "item-overflow"),
+              children: /* @__PURE__ */ t(
+                v,
+                {
+                  ...l,
+                  className: g(r.link, l?.className),
+                  "data-testid": o(e, "overflow"),
+                  items: b
+                }
+              )
+            }
+          ),
+          u.map(({ key: f, ...I }, n) => /* @__PURE__ */ t(
+            "li",
+            {
+              className: r.item,
+              "data-testid": o(e, `item-${n + 1}`),
+              children: /* @__PURE__ */ t(
+                h,
+                {
+                  isCurrent: n === u.length - 1,
+                  ...I,
+                  className: n === u.length - 1 ? r.current : r.link
+                }
+              )
+            },
+            f ?? n
+          ))
+        ] })
+      ]
+    }
+  );
+};
+x.displayName = "IressBreadcrumb";
+export {
+  x as IressBreadcrumbs
+};

package/dist/patterns/Breadcrumbs/Breadcrumbs.styles.d.ts

@@ -0,0 +1 @@
+export declare const breadcrumbs: import('../../styled-system/types').SlotRecipeRuntimeFn<"link" | "current" | "list" | "root" | "item", import('../../styled-system/types').SlotRecipeVariantRecord<"link" | "current" | "list" | "root" | "item">>;

package/dist/patterns/Breadcrumbs/Breadcrumbs.styles.js

@@ -0,0 +1,57 @@
+import { s as e } from "../../sva-CsHRIRDW.js";
+const o = e({
+  slots: ["root", "list", "item", "link", "current"],
+  base: {
+    root: {
+      // Performance: CSS containment
+      contain: "layout style",
+      display: "block"
+    },
+    list: {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      gap: "spacing.2",
+      // 4px
+      listStyle: "none",
+      margin: "spacing.0",
+      padding: "spacing.0"
+    },
+    item: {
+      display: "flex",
+      alignItems: "center",
+      gap: "spacing.2",
+      // 4px
+      "&:not(:last-child):after": {
+        content: "''",
+        display: "inline-block",
+        mask: `no-repeat center / contain url('data:image/svg+xml,<svg width="5" height="9" viewBox="0 0 5 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5L4.5 4.5L0.5 8.5" stroke="%23000" stroke-linecap="round" stroke-linejoin="round"/></svg>')`,
+        bg: "colour.neutral.70",
+        width: "chevron.select",
+        height: "chevron.select"
+      }
+    },
+    link: {
+      "&&": {
+        color: "colour.neutral.70",
+        textStyle: "typography.body.sm.medium",
+        textDecoration: "none",
+        borderRadius: "radius.1",
+        "& > span": {
+          textDecoration: "none"
+        },
+        '&:hover, &[aria-expanded="true"]': {
+          color: "colour.neutral.80",
+          textDecoration: "underline"
+        }
+      }
+    },
+    current: {
+      color: "colour.neutral.90",
+      textStyle: "typography.body.sm.strong"
+    }
+  }
+});
+export {
+  o as breadcrumbs
+};

package/dist/patterns/Breadcrumbs/index.d.ts

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

package/dist/patterns/Breadcrumbs/index.js

@@ -0,0 +1,6 @@
+import { breadcrumbs as m } from "./Breadcrumbs.styles.js";
+import { IressBreadcrumbs as s } from "./Breadcrumbs.js";
+export {
+  s as IressBreadcrumbs,
+  m as breadcrumbs
+};

package/dist/patterns/ContextualMenu/ContextualMenu.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+import { IressMenuItemProps } from '../../components/Menu/MenuItem/MenuItem';
+import { IressPopoverProps } from '../../components/Popover';
+import { MaterialSymbol } from 'material-symbols';
+export interface ContextualMenuItem extends Omit<IressMenuItemProps, 'canToggle' | 'label' | 'selected' | 'value' | 'children' | 'href' | 'component'> {
+    /**
+     * Unique identifier for the menu item, used by React as a key and passed in the onAction callback.
+     */
+    key: string;
+    /**
+     * The content of the menu item.
+     */
+    label: ReactNode;
+    /**
+     * Icon to display alongside the menu item label.
+     */
+    icon?: MaterialSymbol;
+}
+export interface IressContextualMenuProps extends Omit<IressPopoverProps, 'activator' | 'type'> {
+    /**
+     * The items rendered in the contextual menu.
+     */
+    items?: ContextualMenuItem[];
+    /**
+     * Size for the menu trigger.
+     * @default small
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Adds a border around the trigger.
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Visual theme for the trigger treatment.
+     * @default light
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * Accessible label for the menu trigger button.
+     * @default More options
+     */
+    ariaLabel?: string;
+    /**
+     * Emitted when a menu item is clicked.
+     * Receives the clicked item as an argument.
+     */
+    onAction?: (item: ContextualMenuItem) => void;
+}
+export declare const IressContextualMenu: ({ ariaLabel, align, bordered, children, className, "data-testid": dataTestId, items, offset, onAction, size, theme, ...restProps }: IressContextualMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/patterns/ContextualMenu/ContextualMenu.js

@@ -0,0 +1,99 @@
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { useMemo as h, createElement as N } from "react";
+import { c as b } from "../../css-DVJ-ALYD.js";
+import { c as l } from "../../cx-DN21T1EH.js";
+import { s as k } from "../../factory-CcYfm2kB.js";
+import { s as S } from "../../is-valid-prop-C5D641yn.js";
+import { I as P } from "../../Button-C0p8bEXn.js";
+import "../../components/Button/CloseButton/CloseButton.js";
+import { IressMenu as j } from "../../components/Menu/Menu.js";
+import "../../components/Menu/Menu.styles.js";
+import "../../components/Menu/MenuItem/MenuItem.styles.js";
+import "../../components/Menu/MenuGroup/MenuGroup.styles.js";
+import "../../components/Menu/MenuDivider/MenuDivider.js";
+import "../../components/Menu/MenuGroup/MenuGroup.js";
+import { IressMenuItem as A } from "../../components/Menu/MenuItem/MenuItem.js";
+import "../../components/Menu/MenuText/MenuText.js";
+import { IressPopover as q } from "../../components/Popover/Popover.js";
+import "../../components/Popover/Popover.styles.js";
+import "../../components/Popover/InputPopover/InputPopover.js";
+import "../../components/Popover/hooks/useFloatingPopover.js";
+import { GlobalCSSClass as B } from "../../enums.js";
+import { propagateTestid as m } from "../../helpers/utility/propagateTestid.js";
+import { contextualMenu as E } from "./ContextualMenu.styles.js";
+import { IressIcon as G } from "../../components/Icon/Icon.js";
+import "../../components/Icon/Icon.styles.js";
+import "../../components/Icon/IconProvider.js";
+const ao = ({
+  ariaLabel: c = "More options",
+  align: d = "bottom-end",
+  bordered: f = !1,
+  children: u,
+  className: x,
+  "data-testid": r,
+  items: a,
+  offset: y = { mainAxis: -6, crossAxis: 0 },
+  onAction: C,
+  size: p = "small",
+  theme: i = "light",
+  ...n
+}) => {
+  const [M, v] = h(
+    () => S(n),
+    [n]
+  ), t = E({ bordered: f, size: p, theme: i });
+  return /* @__PURE__ */ e(
+    k.div,
+    {
+      className: l(
+        b(M),
+        x,
+        t.root,
+        B.ContextualMenu
+      ),
+      "data-size": p,
+      "data-theme": i,
+      "data-testid": r,
+      children: /* @__PURE__ */ g(
+        q,
+        {
+          ...v,
+          align: d,
+          activator: /* @__PURE__ */ e(
+            P,
+            {
+              "aria-label": c,
+              className: t.trigger,
+              "data-testid": m(r, "activator"),
+              mode: "quaternary",
+              icon: "more_vert"
+            }
+          ),
+          contentStyle: { className: t.menu },
+          "data-testid": m(r, "popover"),
+          offset: y,
+          type: "menu",
+          children: [
+            !!a?.length && /* @__PURE__ */ e(j, { "data-testid": m(r, "menu"), children: a.map(({ icon: s, ...o }) => /* @__PURE__ */ N(
+              A,
+              {
+                ...o,
+                className: l(t.item, o.className),
+                key: o.key,
+                onClick: (I) => {
+                  C?.({ icon: s, ...o }), o.onClick?.(I);
+                },
+                prepend: s ? /* @__PURE__ */ e(G, { name: s }) : o.prepend
+              },
+              o.label
+            )) }),
+            u
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  ao as IressContextualMenu
+};

package/dist/patterns/ContextualMenu/ContextualMenu.styles.d.ts

@@ -0,0 +1,59 @@
+export declare const contextualMenu: import('../../styled-system/types').SlotRecipeRuntimeFn<"menu" | "root" | "item" | "trigger", {
+    size: {
+        small: {
+            trigger: {
+                textStyle: "typography.body.sm.medium";
+                minWidth: "input.height.sm";
+                minHeight: "input.height.sm";
+                px: "spacing.1";
+            };
+        };
+        medium: {
+            trigger: {
+                textStyle: "typography.body.md.medium";
+            };
+        };
+    };
+    bordered: {
+        true: {
+            trigger: {
+                border: "table";
+                '&[aria-expanded="true"]': {
+                    bg: "colour.neutral.30";
+                    borderColor: "colour.neutral.40";
+                    _hover: {
+                        borderColor: "colour.neutral.40";
+                    };
+                };
+            };
+        };
+        false: {
+            trigger: {
+                border: "transparent";
+                '&[aria-expanded="true"]': {
+                    bg: "colour.neutral.30";
+                    borderColor: "colour.neutral.30";
+                    _hover: {
+                        borderColor: "colour.neutral.20";
+                    };
+                };
+            };
+        };
+    };
+    theme: {
+        light: {
+            trigger: {
+                _hover: {
+                    bg: "colour.neutral.20";
+                };
+            };
+        };
+        dark: {
+            trigger: {
+                _hover: {
+                    bg: "colour.neutral.10";
+                };
+            };
+        };
+    };
+}>;

package/dist/patterns/ContextualMenu/ContextualMenu.styles.js

@@ -0,0 +1,100 @@
+import { s as r } from "../../sva-CsHRIRDW.js";
+const o = r({
+  slots: ["root", "trigger", "menu", "item"],
+  base: {
+    root: {
+      display: "inline-flex",
+      position: "relative"
+    },
+    trigger: {
+      color: "colour.neutral.90",
+      transition: "all"
+    },
+    menu: {
+      "&&": {
+        border: "table",
+        borderRadius: "radius.3"
+      }
+    },
+    item: {
+      color: "colour.neutral.70",
+      "&&": {
+        px: "spacing.3",
+        py: "spacing.1",
+        gap: "spacing.2",
+        textStyle: "typography.body.sm"
+      },
+      "&:first-child": {
+        borderTopRadius: "radius.3"
+      },
+      "&:last-child": {
+        borderBottomRadius: "radius.3"
+      },
+      "& .ids-icon": {
+        scale: "[1.25]"
+      }
+    }
+  },
+  variants: {
+    size: {
+      small: {
+        trigger: {
+          textStyle: "typography.body.sm.medium",
+          minWidth: "input.height.sm",
+          minHeight: "input.height.sm",
+          px: "spacing.1"
+        }
+      },
+      medium: {
+        trigger: {
+          textStyle: "typography.body.md.medium"
+        }
+      }
+    },
+    bordered: {
+      true: {
+        trigger: {
+          border: "table",
+          '&[aria-expanded="true"]': {
+            bg: "colour.neutral.30",
+            borderColor: "colour.neutral.40",
+            _hover: {
+              borderColor: "colour.neutral.40"
+            }
+          }
+        }
+      },
+      false: {
+        trigger: {
+          border: "transparent",
+          '&[aria-expanded="true"]': {
+            bg: "colour.neutral.30",
+            borderColor: "colour.neutral.30",
+            _hover: {
+              borderColor: "colour.neutral.20"
+            }
+          }
+        }
+      }
+    },
+    theme: {
+      light: {
+        trigger: {
+          _hover: {
+            bg: "colour.neutral.20"
+          }
+        }
+      },
+      dark: {
+        trigger: {
+          _hover: {
+            bg: "colour.neutral.10"
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  o as contextualMenu
+};

package/dist/patterns/ContextualMenu/index.d.ts

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

package/dist/patterns/ContextualMenu/index.js

@@ -0,0 +1,6 @@
+import { IressContextualMenu as t } from "./ContextualMenu.js";
+import { contextualMenu as n } from "./ContextualMenu.styles.js";
+export {
+  t as IressContextualMenu,
+  n as contextualMenu
+};

package/dist/patterns/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,76 @@
+import { ReactElement, ReactNode, ForwardedRef } from 'react';
+import { ControlledValue } from '../../hooks/useControlledState';
+import { FormattedLabelValueMeta, LabelValueMeta } from '../../interfaces';
+import { AutocompleteSearchHookProps } from '../../components/Autocomplete';
+import { IressSelectMenuProps } from '../../components/Select/SelectMenu/SelectMenu';
+import { IressInputProps } from '../../components/Input';
+import { PopoverRef, IressPopoverProps } from '../../components/Popover';
+export interface IressDropdownMenuProps<TMultiple extends boolean = false> extends Omit<IressPopoverProps, 'activator' | 'children' | 'contentClassName' | 'defaultShow' | 'defaultValue' | 'onChange' | 'show'>, Omit<AutocompleteSearchHookProps, 'query'>, Pick<IressSelectMenuProps, 'limitMobile' | 'limitDesktop'> {
+    /**
+     * The current value of the dropdown menu. Use this in uncontrolled mode when you want to set an initial value that can be changed internally by the component. For a controlled dropdown menu, use the `selected` prop instead.
+     */
+    defaultSelected?: ControlledValue<FormattedLabelValueMeta, TMultiple>;
+    /**
+     * Footer showed in option panel when expanded.
+     */
+    footer?: ReactNode;
+    /**
+     * Header showed in option panel when expanded.
+     */
+    header?: ReactNode;
+    /**
+     * Customise the searchable `IressInput` props for your needs.
+     * @default { clearable: true, prepend: <IressIcon name="search" /> }
+     */
+    inputProps?: Pick<IressInputProps, 'append' | 'clearable' | 'placeholder' | 'prepend'>;
+    /**
+     * The label is a description of the dropdown menu's purpose.
+     */
+    label: ReactNode;
+    /**
+     * Multi-select mode. When `true`, multiple options can be selected.
+     */
+    multiSelect?: TMultiple;
+    /**
+     * Emitted when the value changes.
+     */
+    onChange?: (selected: ControlledValue<LabelValueMeta, TMultiple>) => void;
+    /**
+     * Emitted when the value is reset.
+     */
+    onReset?: () => void;
+    /**
+     * When `true` a search field is shown to search for specific filter option(s).
+     */
+    searchable?: boolean;
+    /**
+     * Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+     */
+    searchNoResultsText?: ReactNode;
+    /**
+     * The current value of the dropdown menu. Use this in controlled mode when you want to manage the selected value from a parent component. For an uncontrolled dropdown menu, use the `defaultSelected` prop instead.
+     */
+    selected?: ControlledValue<FormattedLabelValueMeta, TMultiple>;
+    /**
+     * Text displayed next to label when two or more options are selected.
+     * It supports `{{numOptions}}` as a placeholder for the number of options selected.
+     * @default {{numOptions}} selected
+     */
+    selectedOptionsText?: string;
+    /**
+     * When `true`, a reset button will be shown above the options.
+     * If provided a string, it will be used as the reset button label.
+     */
+    visibleResetButton?: boolean | string;
+}
+export interface DropdownMenuRef extends PopoverRef {
+    /**
+     * Clears the search input value. This is useful to reset the search state when the dropdown menu is closed or when a selection is made. It can be called imperatively by parent components that hold a ref to the dropdown menu.
+     */
+    clearSearch: () => void;
+}
+export declare const IressDropdownMenu: (<TMultiple extends boolean = false>(props: IressDropdownMenuProps<TMultiple> & {
+    ref?: ForwardedRef<DropdownMenuRef>;
+}) => ReactElement) & {
+    displayName: "IressDropdownMenu";
+};