@alixpartners/ui-components 2.5.2 → 2.5.5

package/dist/index-D_L0ncPJ.js

@@ -0,0 +1,312 @@
+import * as t from "react";
+import { u as H, R as $, I as j, c as T, a as z } from "./index-C8H9A55g.js";
+import { u as W, P as O, d as X, c as g, b as Y } from "./index-z_kiwVc3.js";
+import { u as C } from "./index-C2s_VtSb.js";
+import { R as q, A as J, P as Q, C as Z, I as ee, c as re, G as ae, L as ne, a as oe, b as te, d as ue, e as se, S as ie, f as ce, g as le, h as de } from "./index-Ii4UOx3H.js";
+import { jsx as u } from "react/jsx-runtime";
+var _ = "Menubar", [x, pe, be] = z(_), [D] = Y(_, [
+  be,
+  T
+]), p = re(), G = T(), [fe, A] = D(_), K = t.forwardRef(
+  (e, n) => {
+    const {
+      __scopeMenubar: r,
+      value: a,
+      onValueChange: o,
+      defaultValue: h,
+      loop: b = !0,
+      dir: l,
+      ...i
+    } = e, f = H(l), s = G(r), [M, d] = W({
+      prop: a,
+      onChange: o,
+      defaultProp: h ?? "",
+      caller: _
+    }), [v, c] = t.useState(null);
+    return /* @__PURE__ */ u(
+      fe,
+      {
+        scope: r,
+        value: M,
+        onMenuOpen: t.useCallback(
+          (m) => {
+            d(m), c(m);
+          },
+          [d]
+        ),
+        onMenuClose: t.useCallback(() => d(""), [d]),
+        onMenuToggle: t.useCallback(
+          (m) => {
+            d((N) => N ? "" : m), c(m);
+          },
+          [d]
+        ),
+        dir: f,
+        loop: b,
+        children: /* @__PURE__ */ u(x.Provider, { scope: r, children: /* @__PURE__ */ u(x.Slot, { scope: r, children: /* @__PURE__ */ u(
+          $,
+          {
+            asChild: !0,
+            ...s,
+            orientation: "horizontal",
+            loop: b,
+            dir: f,
+            currentTabStopId: v,
+            onCurrentTabStopIdChange: c,
+            children: /* @__PURE__ */ u(O.div, { role: "menubar", ...i, ref: n })
+          }
+        ) }) })
+      }
+    );
+  }
+);
+K.displayName = _;
+var y = "MenubarMenu", [me, F] = D(y), k = (e) => {
+  const { __scopeMenubar: n, value: r, ...a } = e, o = C(), h = r || o || "LEGACY_REACT_AUTO_VALUE", b = A(y, n), l = p(n), i = t.useRef(null), f = t.useRef(!1), s = b.value === h;
+  return t.useEffect(() => {
+    s || (f.current = !1);
+  }, [s]), /* @__PURE__ */ u(
+    me,
+    {
+      scope: n,
+      value: h,
+      triggerId: C(),
+      triggerRef: i,
+      contentId: C(),
+      wasKeyboardTriggerOpenRef: f,
+      children: /* @__PURE__ */ u(
+        q,
+        {
+          ...l,
+          open: s,
+          onOpenChange: (M) => {
+            M || b.onMenuClose();
+          },
+          modal: !1,
+          dir: b.dir,
+          ...a
+        }
+      )
+    }
+  );
+};
+k.displayName = y;
+var S = "MenubarTrigger", L = t.forwardRef(
+  (e, n) => {
+    const { __scopeMenubar: r, disabled: a = !1, ...o } = e, h = G(r), b = p(r), l = A(S, r), i = F(S, r), f = t.useRef(null), s = X(n, f, i.triggerRef), [M, d] = t.useState(!1), v = l.value === i.value;
+    return /* @__PURE__ */ u(x.ItemSlot, { scope: r, value: i.value, disabled: a, children: /* @__PURE__ */ u(
+      j,
+      {
+        asChild: !0,
+        ...h,
+        focusable: !a,
+        tabStopId: i.value,
+        children: /* @__PURE__ */ u(J, { asChild: !0, ...b, children: /* @__PURE__ */ u(
+          O.button,
+          {
+            type: "button",
+            role: "menuitem",
+            id: i.triggerId,
+            "aria-haspopup": "menu",
+            "aria-expanded": v,
+            "aria-controls": v ? i.contentId : void 0,
+            "data-highlighted": M ? "" : void 0,
+            "data-state": v ? "open" : "closed",
+            "data-disabled": a ? "" : void 0,
+            disabled: a,
+            ...o,
+            ref: s,
+            onPointerDown: g(e.onPointerDown, (c) => {
+              !a && c.button === 0 && c.ctrlKey === !1 && (l.onMenuOpen(i.value), v || c.preventDefault());
+            }),
+            onPointerEnter: g(e.onPointerEnter, () => {
+              var m;
+              !!l.value && !v && (l.onMenuOpen(i.value), (m = f.current) == null || m.focus());
+            }),
+            onKeyDown: g(e.onKeyDown, (c) => {
+              a || (["Enter", " "].includes(c.key) && l.onMenuToggle(i.value), c.key === "ArrowDown" && l.onMenuOpen(i.value), ["Enter", " ", "ArrowDown"].includes(c.key) && (i.wasKeyboardTriggerOpenRef.current = !0, c.preventDefault()));
+            }),
+            onFocus: g(e.onFocus, () => d(!0)),
+            onBlur: g(e.onBlur, () => d(!1))
+          }
+        ) })
+      }
+    ) });
+  }
+);
+L.displayName = S;
+var Me = "MenubarPortal", B = (e) => {
+  const { __scopeMenubar: n, ...r } = e, a = p(n);
+  return /* @__PURE__ */ u(Q, { ...a, ...r });
+};
+B.displayName = Me;
+var w = "MenubarContent", U = t.forwardRef(
+  (e, n) => {
+    const { __scopeMenubar: r, align: a = "start", ...o } = e, h = p(r), b = A(w, r), l = F(w, r), i = pe(r), f = t.useRef(!1);
+    return /* @__PURE__ */ u(
+      Z,
+      {
+        id: l.contentId,
+        "aria-labelledby": l.triggerId,
+        "data-radix-menubar-content": "",
+        ...h,
+        ...o,
+        ref: n,
+        align: a,
+        onCloseAutoFocus: g(e.onCloseAutoFocus, (s) => {
+          var d;
+          !!!b.value && !f.current && ((d = l.triggerRef.current) == null || d.focus()), f.current = !1, s.preventDefault();
+        }),
+        onFocusOutside: g(e.onFocusOutside, (s) => {
+          const M = s.target;
+          i().some((v) => {
+            var c;
+            return (c = v.ref.current) == null ? void 0 : c.contains(M);
+          }) && s.preventDefault();
+        }),
+        onInteractOutside: g(e.onInteractOutside, () => {
+          f.current = !0;
+        }),
+        onEntryFocus: (s) => {
+          l.wasKeyboardTriggerOpenRef.current || s.preventDefault();
+        },
+        onKeyDown: g(
+          e.onKeyDown,
+          (s) => {
+            if (["ArrowRight", "ArrowLeft"].includes(s.key)) {
+              const M = s.target, d = M.hasAttribute("data-radix-menubar-subtrigger"), v = M.closest("[data-radix-menubar-content]") !== s.currentTarget, m = (b.dir === "rtl" ? "ArrowRight" : "ArrowLeft") === s.key;
+              if (!m && d || v && m) return;
+              let R = i().filter((I) => !I.disabled).map((I) => I.value);
+              m && R.reverse();
+              const P = R.indexOf(l.value);
+              R = b.loop ? ke(R, P + 1) : R.slice(P + 1);
+              const [E] = R;
+              E && b.onMenuOpen(E);
+            }
+          },
+          { checkForDefaultPrevented: !1 }
+        ),
+        style: {
+          ...e.style,
+          "--radix-menubar-content-transform-origin": "var(--radix-popper-transform-origin)",
+          "--radix-menubar-content-available-width": "var(--radix-popper-available-width)",
+          "--radix-menubar-content-available-height": "var(--radix-popper-available-height)",
+          "--radix-menubar-trigger-width": "var(--radix-popper-anchor-width)",
+          "--radix-menubar-trigger-height": "var(--radix-popper-anchor-height)"
+        }
+      }
+    );
+  }
+);
+U.displayName = w;
+var ve = "MenubarGroup", ge = t.forwardRef(
+  (e, n) => {
+    const { __scopeMenubar: r, ...a } = e, o = p(r);
+    return /* @__PURE__ */ u(ae, { ...o, ...a, ref: n });
+  }
+);
+ge.displayName = ve;
+var he = "MenubarLabel", Re = t.forwardRef(
+  (e, n) => {
+    const { __scopeMenubar: r, ...a } = e, o = p(r);
+    return /* @__PURE__ */ u(ne, { ...o, ...a, ref: n });
+  }
+);
+Re.displayName = he;
+var _e = "MenubarItem", V = t.forwardRef(
+  (e, n) => {
+    const { __scopeMenubar: r, ...a } = e, o = p(r);
+    return /* @__PURE__ */ u(ee, { ...o, ...a, ref: n });
+  }
+);
+V.displayName = _e;
+var Ie = "MenubarCheckboxItem", Ce = t.forwardRef(
+  (e, n) => {
+    const { __scopeMenubar: r, ...a } = e, o = p(r);
+    return /* @__PURE__ */ u(oe, { ...o, ...a, ref: n });
+  }
+);
+Ce.displayName = Ie;
+var xe = "MenubarRadioGroup", Se = t.forwardRef(
+  (e, n) => {
+    const { __scopeMenubar: r, ...a } = e, o = p(r);
+    return /* @__PURE__ */ u(te, { ...o, ...a, ref: n });
+  }
+);
+Se.displayName = xe;
+var we = "MenubarRadioItem", Ae = t.forwardRef(
+  (e, n) => {
+    const { __scopeMenubar: r, ...a } = e, o = p(r);
+    return /* @__PURE__ */ u(ue, { ...o, ...a, ref: n });
+  }
+);
+Ae.displayName = we;
+var ye = "MenubarItemIndicator", Ne = t.forwardRef((e, n) => {
+  const { __scopeMenubar: r, ...a } = e, o = p(r);
+  return /* @__PURE__ */ u(se, { ...o, ...a, ref: n });
+});
+Ne.displayName = ye;
+var Pe = "MenubarSeparator", Ee = t.forwardRef(
+  (e, n) => {
+    const { __scopeMenubar: r, ...a } = e, o = p(r);
+    return /* @__PURE__ */ u(ie, { ...o, ...a, ref: n });
+  }
+);
+Ee.displayName = Pe;
+var Te = "MenubarArrow", Oe = t.forwardRef(
+  (e, n) => {
+    const { __scopeMenubar: r, ...a } = e, o = p(r);
+    return /* @__PURE__ */ u(ce, { ...o, ...a, ref: n });
+  }
+);
+Oe.displayName = Te;
+var De = "MenubarSubTrigger", Ge = t.forwardRef(
+  (e, n) => {
+    const { __scopeMenubar: r, ...a } = e, o = p(r);
+    return /* @__PURE__ */ u(
+      le,
+      {
+        "data-radix-menubar-subtrigger": "",
+        ...o,
+        ...a,
+        ref: n
+      }
+    );
+  }
+);
+Ge.displayName = De;
+var Ke = "MenubarSubContent", Fe = t.forwardRef(
+  (e, n) => {
+    const { __scopeMenubar: r, ...a } = e, o = p(r);
+    return /* @__PURE__ */ u(
+      de,
+      {
+        ...o,
+        "data-radix-menubar-content": "",
+        ...a,
+        ref: n,
+        style: {
+          ...e.style,
+          "--radix-menubar-content-transform-origin": "var(--radix-popper-transform-origin)",
+          "--radix-menubar-content-available-width": "var(--radix-popper-available-width)",
+          "--radix-menubar-content-available-height": "var(--radix-popper-available-height)",
+          "--radix-menubar-trigger-width": "var(--radix-popper-anchor-width)",
+          "--radix-menubar-trigger-height": "var(--radix-popper-anchor-height)"
+        }
+      }
+    );
+  }
+);
+Fe.displayName = Ke;
+function ke(e, n) {
+  return e.map((r, a) => e[(n + a) % e.length]);
+}
+var je = K, ze = k, We = L, Xe = B, Ye = U, qe = V;
+export {
+  Ye as C,
+  qe as I,
+  ze as M,
+  Xe as P,
+  je as R,
+  We as T
+};

package/dist/{index-DgdVwltD.js → index-Ii4UOx3H.js}

@@ -1,11 +1,11 @@
 import * as r from "react";
-import { d as N, c as v, b as je, P as F, e as He, f as We, a as ze } from "./index-DM51yNMI.js";
-import { u as Ze, c as pe, a as $e, I as qe, R as Je } from "./index-DEphED6n.js";
-import { P as Qe, D as et } from "./index-DrR82jOT.js";
-import { h as tt, u as nt, R as ot, F as rt } from "./index-Chv2KjIL.js";
-import { R as ct, A as at, c as ve, C as st, a as ut } from "./index-D34Qo5Qx.js";
-import { P as H } from "./index-BymOxiM6.js";
-import { a as Me } from "./index-7CBv-Jx6.js";
+import { d as N, c as v, b as je, P as F, i as He, e as We, a as ze } from "./index-z_kiwVc3.js";
+import { u as Ze, c as pe, a as $e, I as qe, R as Je } from "./index-C8H9A55g.js";
+import { P as Qe, D as et } from "./index-CmGGeUr0.js";
+import { h as tt, u as nt, R as ot, F as rt } from "./index-CFqDEbIR.js";
+import { R as ct, A as at, c as ve, C as st, a as ut } from "./index-ChQc_Cm6.js";
+import { P as H } from "./index-CfIcUHKK.js";
+import { a as Me } from "./index-C2s_VtSb.js";
 import { jsx as u } from "react/jsx-runtime";
 var Q = ["Enter", " "], it = ["ArrowDown", "PageUp", "Home"], he = ["ArrowUp", "PageDown", "End"], lt = [...it, ...he], dt = {
   ltr: [...Q, "ArrowRight"],

package/dist/index-Nyh2Wa71.js

@@ -0,0 +1,27 @@
+import * as u from "react";
+import { h as z } from "./index-z_kiwVc3.js";
+function n(r) {
+  const [d, e] = u.useState(void 0);
+  return z(() => {
+    if (r) {
+      e({ width: r.offsetWidth, height: r.offsetHeight });
+      const f = new ResizeObserver((i) => {
+        if (!Array.isArray(i) || !i.length)
+          return;
+        const b = i[0];
+        let o, t;
+        if ("borderBoxSize" in b) {
+          const s = b.borderBoxSize, h = Array.isArray(s) ? s[0] : s;
+          o = h.inlineSize, t = h.blockSize;
+        } else
+          o = r.offsetWidth, t = r.offsetHeight;
+        e({ width: o, height: t });
+      });
+      return f.observe(r, { box: "border-box" }), () => f.unobserve(r);
+    } else
+      e(void 0);
+  }, [r]), d;
+}
+export {
+  n as u
+};

package/dist/{index-DM51yNMI.js → index-z_kiwVc3.js}

@@ -228,10 +228,10 @@ export {
   B as b,
   U as c,
   A as d,
-  T as e,
-  R as f,
-  k as g,
-  F as h,
-  D as i,
+  R as e,
+  k as f,
+  F as g,
+  D as h,
+  T as i,
   Z as u
 };

package/dist/main.d.ts

@@ -26,6 +26,7 @@ export { default as TabNavigation } from './components/TabNavigation/TabNavigati
 export { default as Dialog } from './components/Dialog/Dialog.tsx';
 export { default as TagsFields } from './components/TagsFields/TagsFields.tsx';
 export { default as NavBar, type MenuItem, type Notifications, type UserProfile, } from './components/NavBar/NavBar.tsx';
+export { default as CorusHeader, type CorusHeaderMenuItem, type CorusHeaderNavGroup, type CorusHeaderNavItem, type CorusHeaderProps, } from './components/CorusHeader/CorusHeader.tsx';
 export { default as Tag, type TagColors } from './components/Tag/Tag.tsx';
 export { default as Tooltip, type TooltipProps } from './components/Tooltip/Tooltip.tsx';
 export { default as Spinner } from './components/Spinner/Spinner.tsx';

package/dist/main.js

@@ -1,5 +1,5 @@
 import { default as r } from "./components/Button/Button.js";
-import { default as e } from "./components/Checkbox/Checkbox.js";
+import { default as t } from "./components/Checkbox/Checkbox.js";
 import { default as s } from "./components/Icon/Icon.js";
 import { default as l } from "./components/Input/Input.js";
 import { default as u } from "./components/Radio/Radio.js";
@@ -9,15 +9,15 @@ import { default as c } from "./components/Toggle/Toggle.js";
 import { default as D } from "./components/Banner/Banner.js";
 import { default as h } from "./components/Ghost/Ghost.js";
 import { default as B } from "./components/Dropdown/Dropdown.js";
-import { default as v, useFilePickerContext as C } from "./components/FilePicker/FilePicker.js";
+import { default as R, useFilePickerContext as v } from "./components/FilePicker/FilePicker.js";
 import { default as I } from "./components/Search/Search.js";
 import { default as S } from "./components/Datepicker/Datepicker.js";
-import { R as N } from "./RichTextEditor-CHGQT1Qj.js";
+import { R as N } from "./RichTextEditor-cvtLFe4t.js";
 import { default as w } from "./components/Toast/Toast.js";
 import { T as E } from "./ToastProvider-D5LImZ-Q.js";
-import { u as j } from "./useToast-Cz5MGKnw.js";
-import { default as y } from "./components/Creatable/Creatable.js";
-import { default as H } from "./components/SplitButton/SplitButton.js";
+import { u as L } from "./useToast-Cz5MGKnw.js";
+import { default as q } from "./components/Creatable/Creatable.js";
+import { default as z } from "./components/SplitButton/SplitButton.js";
 import { default as K } from "./components/DragAndDrop/DragAndDrop.js";
 import { c as O, d as Q } from "./DragAndDrop.utils-D3xTV9EK.js";
 import { default as W } from "./components/Tab/Tab.js";
@@ -25,44 +25,46 @@ import { default as Y } from "./components/TabNavigation/TabNavigation.js";
 import { default as _ } from "./components/Dialog/Dialog.js";
 import { default as oo } from "./components/TagsFields/TagsFields.js";
 import { default as ro } from "./components/NavBar/NavBar.js";
-import { default as eo } from "./components/Tag/Tag.js";
-import { default as so } from "./components/Tooltip/Tooltip.js";
-import { default as lo } from "./components/Spinner/Spinner.js";
-import { default as xo } from "./components/Illustration/Illustration.js";
-import { a as io } from "./ap-logos-CwA4O8B7.js";
+import { default as to } from "./components/CorusHeader/CorusHeader.js";
+import { default as so } from "./components/Tag/Tag.js";
+import { default as lo } from "./components/Tooltip/Tooltip.js";
+import { default as xo } from "./components/Spinner/Spinner.js";
+import { default as io } from "./components/Illustration/Illustration.js";
+import { a as To } from "./ap-logos-2dYMA1l5.js";
 import './assets/main.css';export {
   D as Banner,
   r as Button,
-  e as Checkbox,
-  y as Creatable,
+  t as Checkbox,
+  to as CorusHeader,
+  q as Creatable,
   S as Datepicker,
   _ as Dialog,
   K as DragAndDrop,
   B as Dropdown,
-  v as FilePicker,
+  R as FilePicker,
   h as Ghost,
   s as Icon,
-  xo as Illustration,
+  io as Illustration,
   l as Input,
   ro as NavBar,
   u as Radio,
   m as RadioGroup,
   N as RichTextEditor,
   I as Search,
-  lo as Spinner,
-  H as SplitButton,
+  xo as Spinner,
+  z as SplitButton,
   W as Tab,
   Y as TabNavigation,
-  eo as Tag,
+  so as Tag,
   oo as TagsFields,
   n as Textarea,
   w as Toast,
   E as ToastProvider,
   c as Toggle,
-  so as Tooltip,
-  io as apLogos,
+  lo as Tooltip,
+  To as apLogos,
   O as composeValidators,
   Q as defaultValidator,
-  C as useFilePickerContext,
-  j as useToast
+  v as useFilePickerContext,
+  L as useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alixpartners/ui-components",
-  "version": "2.5.2",
+  "version": "2.5.5",
   "type": "module",
   "files": [
     "dist"
@@ -25,24 +25,32 @@
     "test:unit": "vitest --project unit",
     "test:storybook": "vitest --project storybook",
     "test:ui": "vitest --ui",
+    "test:playwright": "playwright test",
+    "test:playwright:chromium": "playwright test --project=chromium",
+    "test:playwright:firefox": "playwright test --project=firefox",
+    "test:playwright:webkit": "playwright test --project=webkit",
     "coverage": "vitest run --coverage",
     "generate-icons": "node ./src/assets/generateIconsHelperFiles.js",
-    "generate-illustrations": "node ./src/assets/generateIllustrationsHelperFiles.js"
+    "generate-illustrations": "node ./src/assets/generateIllustrationsHelperFiles.js",
+    "generate-e2e-code": "npx playwright codegen"
   },
   "dependencies": {
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "notistack": "^3.0.1",
     "radix-ui": "^1.4.2",
-    "notistack": "^3.0.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.1",
     "@eslint/js": "^9.25.0",
+    "@playwright/test": "^1.60.0",
     "@storybook/addon-designs": "^10.0.2",
+    "@storybook/addon-docs": "^9.0.18",
     "@storybook/addon-onboarding": "^9.0.18",
+    "@storybook/addon-vitest": "9.0.18",
     "@storybook/react-vite": "^9.0.18",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^22.15.21",
@@ -58,11 +66,12 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "eslint-plugin-storybook": "^9.0.18",
+    "glob": "^11.0.2",
     "globals": "^16.0.0",
     "happy-dom": "^15.11.6",
     "jsdom": "^26.1.0",
     "notistack": "^3.0.1",
-    "playwright": "^1.52.0",
+    "playwright": "^1.60.0",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.5.3",
     "sass": "^1.89.0",
@@ -75,10 +84,7 @@
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "^3.1.4",
-    "@storybook/addon-vitest": "9.0.18",
-    "@storybook/addon-docs": "^9.0.18",
-    "glob": "^11.0.2"
+    "vitest": "^3.1.4"
   },
   "eslintConfig": {
     "extends": [