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

package/dist/components/Menu/MenuItem/MenuItem.styles.js

@@ -0,0 +1,286 @@
+import { s as o } from "../../../sva-CsHRIRDW.js";
+const e = o({
+  slots: ["root", "checkboxMark", "append", "contents"],
+  base: {
+    root: {
+      color: "colour.neutral.70",
+      cursor: "pointer",
+      display: "flex",
+      width: "[100%]",
+      px: "spacing.3",
+      py: "spacing.2",
+      textAlign: "left",
+      textDecoration: "none",
+      textStyle: "typography.body.md",
+      transition: "[0.2s all ease-in-out]",
+      _hover: {
+        bg: "colour.neutral.20"
+      },
+      "&:active": {
+        bg: "colour.neutral.30",
+        color: "colour.neutral.90"
+      }
+    },
+    contents: {
+      m: "none"
+    },
+    append: {
+      marginInlineStart: "auto"
+    }
+  },
+  variants: {
+    active: {
+      true: {
+        root: {
+          bg: "colour.neutral.20"
+        }
+      }
+    },
+    hasAppendOrPrepend: {
+      true: {
+        root: {
+          display: "flex",
+          alignItems: "center",
+          gap: "spacing.2"
+        }
+      }
+    },
+    insidePopover: {
+      true: {
+        root: {}
+      }
+    },
+    isActiveInPopover: {
+      true: {
+        root: {
+          bg: "colour.neutral.20"
+        }
+      }
+    },
+    isHeading: {
+      true: {
+        root: {
+          pb: "spacing.1",
+          "&:not(:first-child)": {
+            pt: "spacing.4"
+          }
+        }
+      }
+    },
+    layout: {
+      stack: {},
+      inline: {
+        root: {
+          alignItems: "center",
+          justifyContent: "center",
+          height: "[100%]",
+          py: "spacing.4"
+        }
+      },
+      "inline-equal-width": {
+        root: {
+          alignItems: "center",
+          justifyContent: "center",
+          height: "[100%]",
+          textAlign: "center",
+          py: "spacing.4"
+        },
+        contents: {
+          flex: "1"
+        }
+      }
+    },
+    multiSelect: {
+      true: {}
+    },
+    numbered: {
+      true: {
+        root: {
+          _before: {
+            content: "counter(menu-step, decimal-leading-zero)",
+            aspectRatio: "1",
+            borderRadius: "50%",
+            border: "[2px solid currentColor]",
+            width: "[2em]",
+            height: "[2em]",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: "[0]"
+          },
+          "&:not(.ids-menu__group-activator, .ids-menu__group *)": {
+            counterIncrement: "menu-step"
+          },
+          ".ids-menu__group &": {
+            _before: {
+              display: "none"
+            }
+          }
+        }
+      }
+    },
+    noWrap: {
+      true: {
+        root: {
+          overflow: "hidden"
+        },
+        contents: {
+          whiteSpace: "nowrap"
+        }
+      }
+    },
+    role: {
+      listitem: {
+        root: {
+          focusable: "inset"
+        }
+      },
+      menuitem: {
+        root: {
+          focusable: "inset"
+        }
+      },
+      option: {
+        root: {
+          _focusVisible: {
+            bg: "colour.neutral.30",
+            color: "colour.neutral.90",
+            outline: "[0]"
+          }
+        }
+      }
+    },
+    selected: {
+      true: {
+        root: {
+          color: "colour.neutral.90",
+          position: "relative",
+          _after: {
+            content: '""',
+            position: "absolute",
+            top: "spacing.0",
+            left: "spacing.0",
+            bottom: "spacing.0",
+            width: "[2px]",
+            bg: "colour.primary.fill"
+          }
+        }
+      }
+    },
+    variant: {
+      side: {
+        root: {
+          color: "colour.neutral.70",
+          textStyle: "typography.heading.4",
+          px: "spacing.4",
+          borderTop: "table",
+          _hover: {
+            bg: "colour.neutral.30",
+            color: "colour.primary.text"
+          },
+          ".ids-menu__group &": {
+            textStyle: "typography.body.md.regular",
+            borderTop: "[none]"
+          }
+        }
+      },
+      rail: {
+        root: {
+          color: "colour.primary.onFill",
+          borderRadius: "radius.system.button",
+          _hover: {
+            bg: "colour.primary.surface",
+            color: "colour.primary.text"
+          }
+        }
+      },
+      radio: {},
+      subdraw: {}
+    }
+  },
+  compoundVariants: [
+    {
+      layout: "stack",
+      multiSelect: !1,
+      selected: !0,
+      css: {
+        root: {
+          _after: {
+            content: '""',
+            position: "absolute",
+            top: "spacing.0",
+            left: "spacing.0",
+            bottom: "spacing.0",
+            width: "[2px]",
+            bg: "colour.primary.fill",
+            borderRadius: "radius.system.button"
+          }
+        }
+      }
+    },
+    {
+      layout: ["inline", "inline-equal-width"],
+      multiSelect: !1,
+      selected: !0,
+      css: {
+        root: {
+          _after: {
+            position: "absolute",
+            left: "spacing.0",
+            right: "spacing.0",
+            bottom: "spacing.0",
+            top: "[auto]",
+            width: "auto",
+            height: "[2px]"
+          }
+        }
+      }
+    },
+    {
+      selected: !0,
+      isActiveInPopover: !0,
+      css: {
+        root: {
+          bg: "colour.neutral.30"
+        }
+      }
+    },
+    {
+      role: "menuitem",
+      isActiveInPopover: !0,
+      css: {
+        root: {
+          bg: "colour.neutral.10"
+        }
+      }
+    },
+    {
+      variant: "rail",
+      selected: !0,
+      css: {
+        root: {
+          color: "colour.primary.fill",
+          bg: "colour.primary.onFill",
+          _after: {
+            display: "none"
+          }
+        }
+      }
+    },
+    {
+      variant: "rail",
+      role: ["listitem", "menuitem", "option"],
+      css: {
+        root: {
+          focusable: "colour.primary.onFill"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    layout: "stack"
+  }
+});
+export {
+  e as menuItem
+};

package/dist/components/Menu/MenuItem/hooks/useMenuItemRole.js

@@ -1,10 +1,14 @@
-import { useContext as t } from "react";
-import { MenuContext as n } from "../../Menu.js";
-import { PopoverContext as i } from "../../../Popover/hooks/usePopover.js";
-const s = () => {
-  const e = t(n), r = t(i), o = e?.role ?? r?.type;
+import { useContext as r } from "react";
+import { MenuContext as i } from "../../Menu.js";
+import "../../../Popover/Popover.js";
+import "../../../Popover/Popover.styles.js";
+import "../../../Popover/InputPopover/InputPopover.js";
+import { usePopover as m } from "../../../Popover/hooks/usePopover.js";
+import "../../../Popover/hooks/useFloatingPopover.js";
+const x = () => {
+  const t = r(i), e = m(), o = t?.role ?? e?.type;
   return o === "listbox" ? "option" : o === "menu" ? "menuitem" : o === "list" ? "listitem" : void 0;
 };
 export {
-  s as useMenuItemRole
+  x as useMenuItemRole
 };

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

@@ -0,0 +1,25 @@
+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;
+    displayName: string;
+};
+export declare const IressMenuHeading: {
+    <E extends TextElements = "h2">({ className, element, textStyle, ...restProps }: IressMenuTextProps<E>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Menu/MenuText/MenuText.js

@@ -1,81 +1,84 @@
-import { jsx as r, jsxs as h, Fragment as I } from "react/jsx-runtime";
+import { jsxs as p, Fragment as N, jsx as o } from "react/jsx-runtime";
 import { useMenuItemRole as C } from "../MenuItem/hooks/useMenuItemRole.js";
-import { useContext as v } from "react";
-import { MenuContext as N } from "../Menu.js";
+import { useContext as H } from "react";
+import { MenuContext as v } from "../Menu.js";
 import { IressText as P } from "../../Text/Text.js";
-import { menu as H } from "../Menu.styles.js";
-import { c as i } from "../../../css-fGu_jDvv.js";
+import { menuItem as T } from "../MenuItem/MenuItem.styles.js";
+import { c as i } from "../../../css-DVJ-ALYD.js";
 import { c } from "../../../cx-DN21T1EH.js";
-import { IressMenuDivider as T } from "../MenuDivider/MenuDivider.js";
-import { GlobalCSSClass as d } from "../../../enums.js";
-import { s as j } from "../../../is-valid-prop-Ce0wiweq.js";
-const R = (s, o) => (s && ["h1", "h2", "h3", "h4", "h5", "h6"].includes(s)) ?? (o && [
+import { IressMenuDivider as b } from "../MenuDivider/MenuDivider.js";
+import { GlobalCSSClass as h } from "../../../enums.js";
+import { s as j } from "../../../is-valid-prop-C5D641yn.js";
+const R = (s, e) => (s && ["h1", "h2", "h3", "h4", "h5", "h6"].includes(s)) ?? (e && [
   "typography.heading.1",
   "typography.heading.2",
   "typography.heading.3",
   "typography.heading.4",
   "typography.heading.5"
-].includes(o)), b = ({
+].includes(e)), u = ({
   append: s,
-  children: o,
-  className: e,
+  children: e,
+  className: r,
   "data-testid": t,
-  divider: g,
+  divider: l,
   element: m,
-  prepend: n,
-  role: l,
-  textStyle: p,
-  ...u
+  prepend: a,
+  role: g,
+  textStyle: d,
+  ...y
 }) => {
-  const y = v(N), f = C() ?? l, a = H.raw({
-    layout: y?.layout,
-    heading: R(m, p),
-    hasAppendOrPrepend: !!(s ?? n)
-  }), [x, M] = j(u);
-  return /* @__PURE__ */ h(I, { children: [
-    /* @__PURE__ */ h(
+  const f = H(v), I = C() ?? g, n = T.raw({
+    layout: f?.layout,
+    isHeading: R(m, d),
+    hasAppendOrPrepend: !!(s ?? a)
+  }), [M, x] = j(y);
+  return /* @__PURE__ */ p(N, { children: [
+    /* @__PURE__ */ p(
       "div",
       {
         className: c(
-          e,
-          i(a.text, x),
-          d.MenuText
+          r,
+          i(n.root, M),
+          h.MenuText
         ),
         "data-testid": t,
-        role: f,
+        role: I,
         children: [
-          n && /* @__PURE__ */ r("div", { children: n }),
-          /* @__PURE__ */ r(
+          a && /* @__PURE__ */ o("div", { children: a }),
+          /* @__PURE__ */ o(
             P,
             {
-              ...M,
-              className: i(a.contents),
+              ...x,
+              className: i(n.contents),
               element: m,
-              textStyle: p,
-              children: o
+              textStyle: d,
+              children: e
             }
           ),
-          s && /* @__PURE__ */ r("div", { className: i(a.append), children: s })
+          s && /* @__PURE__ */ o("div", { className: i(n.append), children: s })
         ]
       }
     ),
-    g && /* @__PURE__ */ r(T, { mt: "spacing.1" })
+    l && /* @__PURE__ */ o(b, { mt: "spacing.1" })
   ] });
-}, B = ({
+};
+u.displayName = "IressMenuText";
+const w = ({
   className: s,
-  element: o = "h2",
-  textStyle: e = "typography.heading.4",
+  element: e = "h2",
+  textStyle: r = "typography.body.md.medium",
   ...t
-}) => /* @__PURE__ */ r(
-  b,
+}) => /* @__PURE__ */ o(
+  u,
   {
-    element: o,
-    textStyle: e,
+    element: e,
+    textStyle: r,
     ...t,
-    className: c(s, d.MenuHeading)
+    className: c(s, h.MenuHeading)
   }
 );
+w.displayName = "IressMenuHeading";
 export {
-  B as IressMenuHeading,
-  b as IressMenuText
+  w as IressMenuHeading,
+  u as IressMenuText
 };

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

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

package/dist/components/Menu/index.js

@@ -1,13 +1,19 @@
 import { IressMenu as o } from "./Menu.js";
-import { menu as m } from "./Menu.styles.js";
-import { IressMenuDivider as t } from "./MenuDivider/MenuDivider.js";
-import { IressMenuItem as x } from "./MenuItem/MenuItem.js";
-import { IressMenuHeading as f, IressMenuText as p } from "./MenuText/MenuText.js";
+import { menu as s } from "./Menu.styles.js";
+import { menuItem as u } from "./MenuItem/MenuItem.styles.js";
+import { menuGroup as p } from "./MenuGroup/MenuGroup.styles.js";
+import { IressMenuDivider as f } from "./MenuDivider/MenuDivider.js";
+import { IressMenuGroup as M } from "./MenuGroup/MenuGroup.js";
+import { IressMenuItem as d } from "./MenuItem/MenuItem.js";
+import { IressMenuHeading as a, IressMenuText as g } from "./MenuText/MenuText.js";
 export {
   o as IressMenu,
-  t as IressMenuDivider,
-  f as IressMenuHeading,
-  x as IressMenuItem,
-  p as IressMenuText,
-  m as menu
+  f as IressMenuDivider,
+  M as IressMenuGroup,
+  a as IressMenuHeading,
+  d as IressMenuItem,
+  g as IressMenuText,
+  s as menu,
+  p as menuGroup,
+  u as menuItem
 };

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

@@ -0,0 +1,84 @@
+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;
+    /**
+     * Size of the modal
+     * - `sm`: Small modals communicate the outcome of an irreversible action. They should be concise and straightforward, containing a single action and, in some cases, a single input field.
+     * - `md`: Medium modals provide optional supporting information to help users understand the context of a word or screen. They may contain a single action and, in some cases, a larger input such as a textarea.
+     * - `lg`: Large modals are used for more complex tasks that require multiple steps or a lot of information as well as media such as video and PDF documents. They can contain multiple actions, inputs, and supporting information.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * 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, size, static: isStatic, style, ...restProps }: IressModalProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};