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

package/dist/components/Label/LabelBase/LabelBase.js

@@ -1,70 +1,54 @@
-import { jsxs as m, jsx as e, Fragment as S } from "react/jsx-runtime";
-import { c as t } from "../../../index-2QXL0WYc.js";
-import { GlobalCSSClass as l } from "../../../enums.js";
-import { propagateTestid as x } from "../../../helpers/utility/propagateTestid.js";
-import { useState as y } from "react";
-const q = "ids-label-v5170", R = "ids-label--hidden-v5170", g = "ids-label--has-append-v5170", A = "ids-label--required-v5170", C = "ids-label--optional-v5170", a = {
-  label: q,
-  hidden: R,
-  hasAppend: g,
-  required: A,
-  optional: C
-}, G = ({
-  append: i,
-  as: h = "label",
-  children: u,
-  className: b,
-  "data-testid": d,
+import { jsxs as l, jsx as o, Fragment as b } from "react/jsx-runtime";
+import { GlobalCSSClass as g } from "../../../enums.js";
+import { propagateTestid as y } from "../../../helpers/utility/propagateTestid.js";
+import { useState as C, useMemo as S } from "react";
+import { s as e } from "../../../factory-DHLOr79I.js";
+import { label as j } from "../Label.styles.js";
+import { c as q } from "../../../cx-DN21T1EH.js";
+const R = ({
+  append: m,
+  children: p,
+  className: d,
+  "data-testid": i,
+  element: c,
   hiddenLabel: s = !1,
-  optional: r,
-  required: p,
-  ...f
+  required: f,
+  ...u
 }) => {
-  const [c, N] = y(), v = (n) => {
-    const o = n == null ? void 0 : n.textContent;
-    o && o !== c && N(o);
-  };
-  return /* @__PURE__ */ m(
+  const [n, x] = C(), a = j({ hasAppend: !!m, hiddenLabel: s }), N = (t) => {
+    const r = t == null ? void 0 : t.textContent;
+    r && r !== n && x(r);
+  }, h = S(
+    () => e(c ?? "label"),
+    [c]
+  );
+  return /* @__PURE__ */ l(
     h,
     {
-      className: t(b, l.FormLabel, {
-        [a.label]: !0,
-        [a.hidden]: s,
-        [a.hasAppend]: i
-      }),
-      ...f,
-      "data-name": c,
-      "data-testid": d,
+      className: q(d, g.FormLabel, a.root),
+      "data-testid": i,
+      ...u,
+      "data-name": n,
       children: [
-        p && /* @__PURE__ */ m(S, { children: [
-          !s && /* @__PURE__ */ e("span", { className: t(a.required), "aria-hidden": "true", children: "*" }),
-          /* @__PURE__ */ e("span", { className: l.SROnly, children: "Required " })
+        f && /* @__PURE__ */ l(b, { children: [
+          !s && /* @__PURE__ */ o("span", { className: a.required, "aria-hidden": !0, children: "*" }),
+          /* @__PURE__ */ o(e.span, { srOnly: !0, children: "Required" })
         ] }),
-        /* @__PURE__ */ e(
-          "span",
-          {
-            className: t({
-              [l.SROnly]: s === !0
-            }) || void 0,
-            "data-testid": x(d, "text"),
-            ref: v,
-            children: u
-          }
-        ),
-        !p && r && /* @__PURE__ */ e(
-          "span",
+        /* @__PURE__ */ o(
+          e.span,
           {
-            className: t(a.optional, {
-              [l.SROnly]: s === !0
-            }),
-            children: typeof r == "string" ? r : "(optional)"
+            className: a.text,
+            "data-testid": y(i, "text"),
+            ref: N,
+            srOnly: s,
+            children: p
           }
         ),
-        i
+        m
       ]
     }
   );
 };
 export {
-  G as LabelBase
+  R as LabelBase
 };

package/dist/components/Label/index.js

@@ -1,4 +1,6 @@
 import { IressLabel as o } from "./Label.js";
+import { label as a } from "./Label.styles.js";
 export {
-  o as IressLabel
+  o as IressLabel,
+  a as label
 };

package/dist/components/Link/Link.js

@@ -0,0 +1,89 @@
+import { jsxs as N, Fragment as S, jsx as e } from "react/jsx-runtime";
+import { forwardRef as P, useId as j, useMemo as i, useCallback as k } from "react";
+import { IressSpinner as v } from "../Spinner/Spinner.js";
+import "../Spinner/Spinner.styles.js";
+import { s as C } from "../../is-valid-prop-DFFvE05x.js";
+import { c as G } from "../../cva-B2x59Dph.js";
+import { c as w } from "../../cx-DN21T1EH.js";
+import { link as F } from "./Link.styles.js";
+import { GlobalCSSClass as b } from "../../enums.js";
+const M = ({
+  active: l,
+  append: n,
+  children: p,
+  className: f,
+  element: m,
+  loading: r = !1,
+  onClick: t,
+  prepend: a,
+  ...u
+}, x) => {
+  const c = j(), s = F({
+    active: l,
+    loading: !!r
+  }), [d, o] = i(
+    () => C(u),
+    [u]
+  ), h = k(
+    (L) => {
+      r || t == null || t(L);
+    },
+    [r, t]
+  ), y = i(
+    () => ({
+      children: /* @__PURE__ */ N(S, { children: [
+        a && !r && /* @__PURE__ */ e("span", { className: s.prepend, children: a }),
+        !!r && /* @__PURE__ */ e(
+          v,
+          {
+            className: s.spinner,
+            fixedWidth: !0,
+            id: c,
+            screenreaderText: r === !0 ? "Loading" : r
+          }
+        ),
+        p && /* @__PURE__ */ e("span", { className: s.content, children: p }),
+        n && /* @__PURE__ */ e("span", { className: s.append, children: n })
+      ] }),
+      className: w(
+        f,
+        G(d),
+        s.root,
+        b.Group,
+        b.Link
+      ),
+      onClick: h
+    }),
+    [
+      n,
+      p,
+      f,
+      h,
+      r,
+      a,
+      c,
+      d,
+      s.append,
+      s.content,
+      s.prepend,
+      s.root,
+      s.spinner
+    ]
+  ), I = i(
+    () => m ?? (o.href ? "a" : "button"),
+    [m, o.href]
+  );
+  return /* @__PURE__ */ e(
+    I,
+    {
+      "aria-describedby": r ? c : void 0,
+      type: m || !o.href ? "button" : void 0,
+      ...y,
+      ...o,
+      ref: x
+    }
+  );
+}, H = P(M);
+export {
+  H as IressLink
+};

package/dist/components/Link/Link.styles.js

@@ -0,0 +1,65 @@
+import { s as o } from "../../sva-TRyehFkb.js";
+const e = ["root", "content", "prepend", "append", "spinner"], n = o({
+  slots: e,
+  base: {
+    append: {
+      display: "contents"
+    },
+    content: {
+      textDecoration: "underline",
+      _groupHover: {
+        textDecoration: "none"
+      }
+    },
+    root: {
+      alignItems: "baseline",
+      alignSelf: "flex-start",
+      cursor: "pointer",
+      display: "inline-flex",
+      fontKerning: "none",
+      gap: "spacing.100",
+      pointerEvents: "auto",
+      textStyle: "typography.body.md",
+      whiteSpace: "normal",
+      width: "auto",
+      color: "colour.primary.text",
+      borderRadius: "radius.025",
+      _focus: {
+        outline: "[none]"
+      },
+      _focusVisible: {
+        layerStyle: "elevation.focus"
+      }
+    },
+    prepend: {
+      display: "contents"
+    }
+  },
+  variants: {
+    active: {
+      true: {
+        root: {
+          borderBottom: "[1px dashed currentColor]"
+        }
+      }
+    },
+    loading: {
+      true: {
+        content: {
+          _groupHover: {
+            textDecoration: "underline"
+          }
+        },
+        root: {
+          cursor: "not-allowed",
+          filter: "[saturate(0.25)]",
+          opacity: 0.5,
+          boxShadow: "none"
+        }
+      }
+    }
+  }
+});
+export {
+  n as link
+};

package/dist/components/Link/index.js

@@ -0,0 +1,6 @@
+import { IressLink as e } from "./Link.js";
+import { link as i } from "./Link.styles.js";
+export {
+  e as IressLink,
+  i as link
+};

package/dist/components/Menu/Menu.js

@@ -1,64 +1,95 @@
-import { jsx as e } from "react/jsx-runtime";
-import { MenuLayout as g, MenuType as x } from "./Menu.types.js";
-import { MenuProvider as P } from "./MenuProvider.js";
-import "react";
-import { idsLogger as j } from "../../helpers/utility/idsLogger.js";
-import { useIdIfNeeded as k } from "../../hooks/useIdIfNeeded.js";
-import { C as A } from "../../floating-ui.react-nmA48tb2.js";
-import { useMenuAria as N } from "./hooks/useMenuAria.js";
-import { useMenuComposite as O } from "./hooks/useMenuComposite.js";
-import { useMenuStyles as R } from "./hooks/useMenuStyles.js";
-import { useMenuRole as b } from "./hooks/useMenuRole.js";
-const m = ({
-  changeOnBlur: d,
-  children: u,
-  className: f,
-  defaultSelected: a,
-  fluid: c,
-  id: M,
-  layout: r = "stack",
-  multiSelect: s,
-  noWrap: v,
-  onChange: l,
-  role: y,
-  selected: C,
-  type: t,
-  ...I
+import { jsx as u } from "react/jsx-runtime";
+import { useContext as w, useMemo as s, useCallback as z, useEffect as E, createContext as G } from "react";
+import { useControlledState as H } from "../../hooks/useControlledState.js";
+import { useIdIfNeeded as K } from "../../hooks/useIdIfNeeded.js";
+import { C as R } from "../../floating-ui.react-CPN4oQCc.js";
+import { s as b } from "../../factory-DHLOr79I.js";
+import { toArray as q } from "../../helpers/formatting/toArray.js";
+import { menu as B } from "./Menu.styles.js";
+import { c as D } from "../../cx-DN21T1EH.js";
+import { PopoverContext as F } from "../Popover/hooks/usePopover.js";
+import { GlobalCSSClass as J } from "../../enums.js";
+function L() {
+  return G(void 0);
+}
+function O() {
+  return Q;
+}
+const Q = L(), et = ({
+  changeOnBlur: m,
+  className: M,
+  defaultSelected: A,
+  fluid: v,
+  id: I,
+  layout: n = "stack",
+  multiSelect: e,
+  noWrap: l,
+  onChange: N,
+  role: C = "list",
+  selected: h,
+  ...k
 }) => {
-  const i = k({ id: M }), p = y ?? t, o = b(s, p), T = N({
-    id: i,
-    layout: r,
-    multiSelect: s,
-    role: o
-  }), h = R({ className: f, fluid: c, layout: r, role: p }), L = O(o), n = {
-    ...I,
-    ...h,
-    ...T,
-    role: o,
-    id: i,
-    children: u
-  };
-  return t !== void 0 && j(
-    "IressMenu: The type prop is deprecated. Please use the role prop instead."
-  ), /* @__PURE__ */ e(
-    P,
-    {
-      changeOnBlur: d,
-      defaultSelected: a,
-      id: i,
-      layout: r,
-      multiSelect: s,
-      nav: p === "nav",
-      noWrap: v,
-      onChange: l,
+  const r = K({ id: I }), t = w(F), o = s(() => (t == null ? void 0 : t.type) === "listbox" || (t == null ? void 0 : t.type) === "menu" ? (t.setHasInnerRole(!0), t.type) : e ? "listbox" : C, [e, t, C]), P = s(() => ({
+    "aria-multiselectable": o === "listbox" && e ? !0 : void 0,
+    "aria-orientation": o === "menu" ? n === "stack" ? "vertical" : "horizontal" : void 0
+  }), [n, e, o]), i = s(
+    () => o && ["menu", "listbox"].includes(o),
+    [o]
+  ), d = s(
+    () => !t && i,
+    [t, i]
+  ), a = s(
+    () => o === "listbox" || !!e,
+    [o, e]
+  ), { toggleValue: x, value: f } = H({
+    component: "IressMenu",
+    defaultValue: A,
+    multiple: e,
+    onChange: N,
+    propName: "selected",
+    value: h
+  }), g = z(
+    (c) => !a || c === void 0 ? !1 : e ? q(f).includes(c) : f === c,
+    [e, f, a]
+  ), y = s(
+    () => ({
+      changeOnBlur: m && o === "listbox",
+      hasArrowKeyNav: i,
+      isComposite: d,
+      isSelected: g,
+      layout: n,
+      multiSelect: e,
+      noWrap: l,
       role: o,
-      selected: C,
-      children: L ? /* @__PURE__ */ e(A, { loop: o === "menu", render: /* @__PURE__ */ e("div", { ...n }) }) : /* @__PURE__ */ e("div", { ...n })
-    }
+      supportsSelection: a,
+      toggle: x
+    }),
+    [
+      m,
+      i,
+      d,
+      g,
+      n,
+      e,
+      l,
+      o,
+      a,
+      x
+    ]
   );
+  E(() => (t != null && t.toggleAriaControls && r && t.toggleAriaControls(r, !0), () => {
+    t != null && t.toggleAriaControls && r && t.toggleAriaControls(r, !1);
+  }), [r, t]);
+  const V = B({ fluid: v, layout: n, noWrap: l, insidePopover: !!t }), p = {
+    ...k,
+    ...P,
+    className: D(M, V.root, J.Menu),
+    id: r,
+    role: o
+  }, { Provider: j } = O();
+  return /* @__PURE__ */ u(j, { value: y, children: d ? /* @__PURE__ */ u(R, { loop: o === "menu", render: /* @__PURE__ */ u(b.div, { ...p }) }) : /* @__PURE__ */ u(b.div, { ...p }) });
 };
-m.Layout = g;
-m.Type = x;
 export {
-  m as IressMenu
+  et as IressMenu,
+  Q as MenuContext
 };

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

@@ -0,0 +1,231 @@
+import { s as e } from "../../sva-TRyehFkb.js";
+const o = e({
+  slots: ["root", "item", "checkboxMark", "append", "contents", "text"],
+  base: {
+    root: {
+      maxWidth: "[100%]"
+    },
+    contents: {
+      m: "none"
+    },
+    item: {
+      borderRadius: "radius.system.badge",
+      color: "colour.neutral.80",
+      cursor: "pointer",
+      display: "flex",
+      width: "[100%]",
+      px: "md",
+      py: "sm",
+      textAlign: "left",
+      textDecoration: "none",
+      textStyle: "typography.body.md",
+      transition: "[0.2s all ease-in-out]",
+      _focus: {
+        outline: "[none]",
+        bg: "colour.primary.surface",
+        color: "colour.primary.text"
+      },
+      _focusVisible: {
+        layerStyle: "elevation.focus",
+        zIndex: "[1]"
+      },
+      _hover: {
+        bg: "colour.primary.surface",
+        color: "colour.primary.text"
+      }
+    },
+    text: {
+      px: "md",
+      py: "sm"
+    },
+    append: {
+      marginInlineStart: "auto"
+    }
+  },
+  variants: {
+    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"
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      layout: "stack",
+      multiSelect: !1,
+      selected: !0,
+      css: {
+        item: {
+          _after: {
+            content: '""',
+            position: "absolute",
+            top: "spacing.000",
+            left: "spacing.000",
+            bottom: "spacing.000",
+            width: "[{radii.radius.025}]",
+            bg: "colour.primary.fill",
+            borderRadius: "radius.system.badge"
+          }
+        }
+      }
+    },
+    {
+      layout: ["inline", "inline-equal-width"],
+      multiSelect: !1,
+      selected: !0,
+      css: {
+        item: {
+          _after: {
+            content: '""',
+            position: "absolute",
+            left: "spacing.000",
+            right: "spacing.000",
+            bottom: "spacing.000",
+            height: "[{radii.radius.025}]",
+            bg: "colour.primary.fill",
+            borderRadius: "radius.system.badge"
+          }
+        }
+      }
+    },
+    {
+      layout: "stack",
+      insidePopover: !0,
+      css: {
+        root: {
+          display: "flex",
+          flexDirection: "column"
+        }
+      }
+    },
+    {
+      selected: !0,
+      isActiveInPopover: !0,
+      css: {
+        item: {
+          bg: "colour.primary.surfaceHover"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    layout: "stack"
+  }
+});
+export {
+  o as menu
+};