@alixpartners/ui-components 2.0.0-beta.17 → 2.0.0-beta.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/assets/NavBar.css +1 -1
  2. package/dist/components/Dialog/Dialog.d.ts +5 -3
  3. package/dist/components/Dialog/Dialog.js +49 -43
  4. package/dist/components/NavBar/NavBar.d.ts +4 -3
  5. package/dist/components/NavBar/NavBar.js +31 -31
  6. package/package.json +1 -1
package/dist/assets/NavBar.css CHANGED
@@ -1 +1 @@
1
- .NavBar-module__navbar-wrapper___e-f8y{background-color:#333;width:100%;height:48px;padding:0 20px;box-sizing:border-box}.NavBar-module__navbar-container___KnbUz{display:flex;align-items:center;justify-content:space-between;margin-left:auto;margin-right:auto}.NavBar-module__navbar-logo-container___VXWAo{display:flex;align-items:center;gap:12px}.NavBar-module__navbar-logo-link___r8CV2{display:flex;align-items:center}.NavBar-module__navbar-project-name-separator___SmBBN{width:2px;min-height:24px;align-self:stretch;background-color:#5cb335}.NavBar-module__navbar-project-name___zQY4u{font-size:18px;font-weight:500;letter-spacing:1px;color:#fff}.NavBar-module__navbar-menu___QDrB4{display:flex;align-items:center;gap:20px}.NavBar-module__navbar-menu-list___xZE02{display:flex;align-items:center;gap:20px;padding:0;margin:0}.NavBar-module__navbar-menu-list___xZE02 button{all:unset}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK{cursor:pointer;text-decoration:none;color:#fff;line-height:1}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-trigger-container___OsXar,.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-action___MPFZz{display:flex;align-items:center;gap:4px;box-sizing:border-box;padding-top:16px;padding-bottom:16px;font-size:15px;font-weight:500}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK:hover .NavBar-module__navbar-menu-list-item-trigger-container___OsXar,.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK:hover .NavBar-module__navbar-menu-list-item-action___MPFZz{box-shadow:inset 0 -3px #878787}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-action-active___J7eRN{box-shadow:inset 0 -3px #5cb335}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK[data-state=open] .NavBar-module__navbar-menu-list-item-arrow___QoJsh{transform:rotate(180deg)}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK a{text-decoration:none;color:#fff}.NavBar-module__navbar-menu-list-item-arrow___QoJsh{color:#fff;font-size:16px;width:16px;height:16px;transition:transform .2s ease}.NavBar-module__navbar-menu-list-item-submenu___goVcf{margin-top:10px;background-color:#fff;border:1px solid #e0e0e0;border-radius:4px;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column;width:fit-content;box-sizing:border-box;box-shadow:0 0 4px #00000029;padding:4px 0}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du{width:100%;padding:8px 12px;border:none;background:none;cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease;text-align:left;font-size:14px;color:#333;min-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du:hover{background-color:#dff0db}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du:focus{outline:none}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du a{text-decoration:none;color:inherit;width:100%}.NavBar-module__navbar-menu-additional-separator___F7jfY{width:2px;height:26px;align-self:center;background-color:#5cb335;margin-left:12px;margin-right:12px}.NavBar-module__navbar-menu-additional___B8kH-{display:flex;align-items:center;gap:24px}.NavBar-module__navbar-menu-additional-trigger___IpMHL{all:unset;cursor:pointer;padding:8px;height:47px;box-sizing:border-box;transition:background-color .2s ease}.NavBar-module__navbar-menu-additional-trigger___IpMHL:hover{box-shadow:inset 0 -3px #878787}.NavBar-module__navbar-menu-additional-icon___jhULk{color:#fff;font-size:24px!important;width:24px;height:24px}.NavBar-module__navbar-menu-additional-user-profile___ujsEv{color:#fff;font-size:14px;width:28px;height:28px;border-radius:50%;background-color:#5cb335;display:flex;align-items:center;justify-content:center}.NavBar-module__navbar-notification-container___K2YeD{position:relative;display:inline-block}.NavBar-module__navbar-notification-badge___vp5bK{position:absolute;top:-6px;right:-6px;background-color:#5cb335;color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;line-height:1;padding:0 4px;box-sizing:border-box;border:2px solid #333333}
1
+ .NavBar-module__navbar-wrapper___e-f8y{background-color:#333;width:100%;height:48px;padding:0 20px;box-sizing:border-box}.NavBar-module__navbar-container___KnbUz{display:flex;align-items:center;justify-content:space-between;margin-left:auto;margin-right:auto}.NavBar-module__navbar-logo-container___VXWAo{display:flex;align-items:center;gap:12px}.NavBar-module__navbar-logo-link___r8CV2{display:flex;align-items:center;cursor:pointer}.NavBar-module__navbar-project-name-separator___SmBBN{width:2px;min-height:24px;align-self:stretch;background-color:#5cb335}.NavBar-module__navbar-project-name___zQY4u{font-size:18px;font-weight:500;letter-spacing:1px;color:#fff}.NavBar-module__navbar-menu___QDrB4{display:flex;align-items:center;gap:20px}.NavBar-module__navbar-menu-list___xZE02{display:flex;align-items:center;gap:20px;padding:0;margin:0}.NavBar-module__navbar-menu-list___xZE02 button{all:unset}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK{cursor:pointer;text-decoration:none;color:#fff;line-height:1}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-trigger-container___OsXar,.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-action___MPFZz{display:flex;align-items:center;gap:4px;box-sizing:border-box;padding-top:16px;padding-bottom:16px;font-size:15px;font-weight:500}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK:hover .NavBar-module__navbar-menu-list-item-trigger-container___OsXar,.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK:hover .NavBar-module__navbar-menu-list-item-action___MPFZz{box-shadow:inset 0 -3px #878787}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-action-active___J7eRN{box-shadow:inset 0 -3px #5cb335}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK[data-state=open] .NavBar-module__navbar-menu-list-item-arrow___QoJsh{transform:rotate(180deg)}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK a{text-decoration:none;color:#fff}.NavBar-module__navbar-menu-list-item-arrow___QoJsh{color:#fff;font-size:16px;width:16px;height:16px;transition:transform .2s ease}.NavBar-module__navbar-menu-list-item-submenu___goVcf{margin-top:10px;background-color:#fff;border:1px solid #e0e0e0;border-radius:4px;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column;width:fit-content;box-sizing:border-box;box-shadow:0 0 4px #00000029;padding:4px 0}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du{width:100%;padding:8px 12px;border:none;background:none;cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease;text-align:left;font-size:14px;color:#333;min-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du:hover{background-color:#dff0db}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du:focus{outline:none}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du a{text-decoration:none;color:inherit;width:100%}.NavBar-module__navbar-menu-additional-separator___F7jfY{width:2px;height:26px;align-self:center;background-color:#5cb335;margin-left:12px;margin-right:12px}.NavBar-module__navbar-menu-additional___B8kH-{display:flex;align-items:center;gap:24px}.NavBar-module__navbar-menu-additional-trigger___IpMHL{all:unset;cursor:pointer;padding:8px;height:47px;box-sizing:border-box;transition:background-color .2s ease}.NavBar-module__navbar-menu-additional-trigger___IpMHL:hover{box-shadow:inset 0 -3px #878787}.NavBar-module__navbar-menu-additional-icon___jhULk{color:#fff;font-size:24px!important;width:24px;height:24px}.NavBar-module__navbar-menu-additional-user-profile___ujsEv{color:#fff;font-size:14px;width:28px;height:28px;border-radius:50%;background-color:#5cb335;display:flex;align-items:center;justify-content:center}.NavBar-module__navbar-notification-container___K2YeD{position:relative;display:inline-block}.NavBar-module__navbar-notification-badge___vp5bK{position:absolute;top:-6px;right:-6px;background-color:#5cb335;color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;line-height:1;padding:0 4px;box-sizing:border-box;border:2px solid #333333}
package/dist/components/Dialog/Dialog.d.ts CHANGED
@@ -5,7 +5,8 @@ import { ApIcon } from '../../assets/ap-icons-types';
5
5
  * Provides a native HTML dialog element with backdrop support, confirmation/cancellation actions, and accessibility features.
6
6
  *
7
7
  * @param {object} props - Dialog component props
8
- * @param {React.ReactNode} props.children - The trigger element that opens the dialog when clicked
8
+ * @param {React.ReactNode} [props.children] - The trigger element that opens the dialog when clicked (optional when using isOpen prop)
9
+ * @param {boolean} [props.isOpen] - Controls whether the dialog is displayed. When provided, the dialog becomes controlled and children trigger is optional
9
10
  * @param {() => void} [props.onClose] - Callback fired when the dialog is closed (shows close button when provided)
10
11
  * @param {string} props.title - The title text displayed at the top of the dialog
11
12
  * @param {string} props.description - The description text displayed below the title
@@ -18,7 +19,8 @@ import { ApIcon } from '../../assets/ap-icons-types';
18
19
  */
19
20
  type DialogProps = {
20
21
  className?: string;
21
- children: React.ReactNode;
22
+ children?: React.ReactNode;
23
+ isOpen?: boolean;
22
24
  onClose?: () => void;
23
25
  title: string;
24
26
  description: React.ReactNode;
@@ -36,5 +38,5 @@ type DialogProps = {
36
38
  onConfirm?: () => void;
37
39
  onCancel?: () => void;
38
40
  } & DataAttributes;
39
- export default function Dialog({ children, onClose, title, description, illustrationSrc, confirmButtonText, cancelButtonText, confirmButtonType, cancelButtonType, confirmButtonVariant, cancelButtonVariant, confirmButtonSize, cancelButtonSize, confirmButtonIcon, cancelButtonIcon, onConfirm, onCancel, className, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
41
+ export default function Dialog({ children, isOpen, onClose, title, description, illustrationSrc, confirmButtonText, cancelButtonText, confirmButtonType, cancelButtonType, confirmButtonVariant, cancelButtonVariant, confirmButtonSize, cancelButtonSize, confirmButtonIcon, cancelButtonIcon, onConfirm, onCancel, className, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
40
42
  export {};
package/dist/components/Dialog/Dialog.js CHANGED
@@ -1,8 +1,8 @@
1
- import { jsxs as e, jsx as l } from "react/jsx-runtime";
2
- import { useRef as _ } from "react";
3
- import r from "../Button/Button.js";
4
- import '../../assets/Dialog.css';const G = "Dialog-module__dialog___r4ljx", a = {
5
- dialog: G,
1
+ import { jsxs as c, jsx as a } from "react/jsx-runtime";
2
+ import { useRef as f, useEffect as H } from "react";
3
+ import g from "../Button/Button.js";
4
+ import '../../assets/Dialog.css';const I = "Dialog-module__dialog___r4ljx", t = {
5
+ dialog: I,
6
6
  "dialog-illustration": "Dialog-module__dialog-illustration___IHiQl",
7
7
  "dialog-content": "Dialog-module__dialog-content___3hOGc",
8
8
  "dialog-close-button-container": "Dialog-module__dialog-close-button-container___35uPS",
@@ -10,56 +10,62 @@ import '../../assets/Dialog.css';const G = "Dialog-module__dialog___r4ljx", a =
10
10
  "dialog-description": "Dialog-module__dialog-description___hL8fm",
11
11
  "dialog-buttons": "Dialog-module__dialog-buttons___x-v2M"
12
12
  };
13
- function K({
14
- children: u,
15
- onClose: o,
16
- title: m,
17
- description: h,
18
- illustrationSrc: s,
13
+ function P({
14
+ children: s,
15
+ isOpen: o,
16
+ onClose: l,
17
+ title: v,
18
+ description: D,
19
+ illustrationSrc: _,
19
20
  confirmButtonText: n,
20
- cancelButtonText: g,
21
+ cancelButtonText: u,
21
22
  confirmButtonType: p = "primary",
22
- cancelButtonType: v = "primary",
23
- confirmButtonVariant: D = "default",
24
- cancelButtonVariant: f = "cancel",
25
- confirmButtonSize: N = "md",
26
- cancelButtonSize: b = "md",
27
- confirmButtonIcon: y,
28
- cancelButtonIcon: k,
29
- onConfirm: d,
30
- onCancel: c,
31
- className: j,
32
- ...x
23
+ cancelButtonType: N = "primary",
24
+ confirmButtonVariant: b = "default",
25
+ cancelButtonVariant: y = "cancel",
26
+ confirmButtonSize: k = "md",
27
+ cancelButtonSize: j = "md",
28
+ confirmButtonIcon: x,
29
+ cancelButtonIcon: z,
30
+ onConfirm: e,
31
+ onCancel: r,
32
+ className: M,
33
+ ...R
33
34
  }) {
34
- const z = _(null), t = _(null), R = () => {
35
+ const w = f(null), d = f(null);
36
+ H(() => {
37
+ var i, h;
38
+ o !== void 0 && (o ? (i = d.current) == null || i.showModal() : (h = d.current) == null || h.close());
39
+ }, [o]);
40
+ const A = () => {
35
41
  var i;
36
- (i = t.current) == null || i.showModal();
37
- }, A = () => {
42
+ (i = d.current) == null || i.showModal();
43
+ }, m = () => {
38
44
  var i;
39
- (i = t.current) == null || i.close(), o == null || o();
40
- }, M = () => {
45
+ l == null || l(), o === void 0 && ((i = d.current) == null || i.close());
46
+ }, E = () => {
41
47
  var i;
42
- (i = t.current) == null || i.close(), d == null || d();
43
- }, w = () => {
48
+ e == null || e(), l == null || l(), o === void 0 && ((i = d.current) == null || i.close());
49
+ }, G = () => {
44
50
  var i;
45
- (i = t.current) == null || i.close(), c == null || c();
51
+ r == null || r(), l == null || l(), o === void 0 && ((i = d.current) == null || i.close());
46
52
  };
47
- return /* @__PURE__ */ e("div", { className: j, ...x, children: [
48
- /* @__PURE__ */ l("div", { ref: z, onClick: R, children: u }),
49
- /* @__PURE__ */ e("dialog", { className: a.dialog, ref: t, onClose: o, children: [
50
- /* @__PURE__ */ l("div", { className: a["dialog-close-button-container"], children: o && /* @__PURE__ */ l(r, { className: a["dialog-close-button"], type: "tertiary", variant: "cancel", size: "md", onClick: A, icon: "ap-icon-close" }) }),
51
- s && /* @__PURE__ */ l("div", { className: a["dialog-illustration"], children: /* @__PURE__ */ l("img", { src: s, alt: "Dialog illustration" }) }),
52
- /* @__PURE__ */ e("div", { className: a["dialog-content"], children: [
53
- /* @__PURE__ */ l("h2", { className: a["dialog-title"], children: m }),
54
- /* @__PURE__ */ l("div", { className: a["dialog-description"], children: h })
53
+ return /* @__PURE__ */ c("div", { className: M, ...R, children: [
54
+ s && /* @__PURE__ */ a("div", { ref: w, onClick: A, children: s }),
55
+ /* @__PURE__ */ c("dialog", { className: t.dialog, ref: d, onClose: m, children: [
56
+ /* @__PURE__ */ a("div", { className: t["dialog-close-button-container"], children: l && /* @__PURE__ */ a(g, { className: t["dialog-close-button"], type: "tertiary", variant: "cancel", size: "md", onClick: m, icon: "ap-icon-close" }) }),
57
+ _ && /* @__PURE__ */ a("div", { className: t["dialog-illustration"], children: /* @__PURE__ */ a("img", { src: _, alt: "Dialog illustration" }) }),
58
+ /* @__PURE__ */ c("div", { className: t["dialog-content"], children: [
59
+ /* @__PURE__ */ a("h2", { className: t["dialog-title"], children: v }),
60
+ /* @__PURE__ */ a("div", { className: t["dialog-description"], children: D })
55
61
  ] }),
56
- /* @__PURE__ */ e("div", { className: a["dialog-buttons"], children: [
57
- g && /* @__PURE__ */ l(r, { type: v, variant: f, size: b, onClick: w, icon: k, children: g }),
58
- n && /* @__PURE__ */ l(r, { type: p, variant: D, size: N, onClick: M, icon: y, children: n })
62
+ /* @__PURE__ */ c("div", { className: t["dialog-buttons"], children: [
63
+ u && /* @__PURE__ */ a(g, { type: N, variant: y, size: j, onClick: G, icon: z, children: u }),
64
+ n && /* @__PURE__ */ a(g, { type: p, variant: b, size: k, onClick: E, icon: x, children: n })
59
65
  ] })
60
66
  ] })
61
67
  ] });
62
68
  }
63
69
  export {
64
- K as default
70
+ P as default
65
71
  };
package/dist/components/NavBar/NavBar.d.ts CHANGED
@@ -5,6 +5,7 @@ export type MenuItem = {
5
5
  label: string;
6
6
  href?: string;
7
7
  menuItems?: MenuItem[];
8
+ onClick?: () => void;
8
9
  };
9
10
  export type Notifications = {
10
11
  count: number;
@@ -20,7 +21,7 @@ export type NavBarProps = {
20
21
  projectName: string;
21
22
  projectLogoIcon: ApLogo;
22
23
  projectLogoIconColor: 'black' | 'white' | 'gray' | 'green';
23
- projectLogoLink?: string;
24
+ projectLogoOnClick?: () => void;
24
25
  projectTag?: string;
25
26
  menuButton?: React.ReactElement<ButtonProps, typeof Button>;
26
27
  menuItems?: MenuItem[];
@@ -37,7 +38,7 @@ export type NavBarProps = {
37
38
  * @param {object} props - NavBar component props
38
39
  * @param {string} props.projectName - The name of the project to display in the navbar
39
40
  * @param {string} props.projectLogoIcon - The source URL for the project logo image
40
- * @param {string} [props.projectLogoLink] - The link to the project logo
41
+ * @param {() => void} [props.projectLogoOnClick] - The function to call when the project logo is clicked
41
42
  * @param {string} [props.projectTag] - Optional project tag to display next to the project name
42
43
  * @param {React.ReactElement<ButtonProps, typeof Button>} [props.menuButton] - Optional Button component to display before the menu items
43
44
  * @param {MenuItem[]} [props.menuItems] - Array of menu items to display in the navigation
@@ -47,4 +48,4 @@ export type NavBarProps = {
47
48
  * @param {UserProfile} [props.additionalItems.userProfile] - User profile configuration with initials and dropdown content
48
49
  * @returns {JSX.Element} The rendered NavBar component
49
50
  */
50
- export default function NavBar({ activeMenuItemHref, projectName, projectLogoIcon, projectLogoIconColor, projectLogoLink, projectTag, menuItems, menuButton, additionalItems, className, maxWidth, }: NavBarProps): import("react/jsx-runtime").JSX.Element;
51
+ export default function NavBar({ activeMenuItemHref, projectName, projectLogoIcon, projectLogoIconColor, projectLogoOnClick, projectTag, menuItems, menuButton, additionalItems, className, maxWidth, }: NavBarProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/NavBar/NavBar.js CHANGED
@@ -7,11 +7,11 @@ import * as c from "react";
7
7
  import { u as ae, c as U, a as re, R as ne, I as oe } from "../../index-CjQV7MmW.js";
8
8
  import { u as te, c as ie, P as V, d as ue, a as N } from "../../index-DWydnyjJ.js";
9
9
  import { u as O } from "../../index-2H7slGYV.js";
10
- import { c as se, R as ce, A as le, P as me, C as de, I as be, G as ve, L as pe, a as _e, b as fe, d as ge, e as he, S as Me, f as Ne, g as Re, h as we } from "../../index-CVWHq7Pr.js";
11
- import '../../assets/NavBar.css';var w = "Menubar", [I, xe, Ce] = re(w), [z, ua] = ie(w, [
12
- Ce,
10
+ import { c as se, R as ce, A as le, P as me, C as de, I as be, G as ve, L as pe, a as _e, b as fe, d as ge, e as he, S as Me, f as Ne, g as Re, h as Ce } from "../../index-CVWHq7Pr.js";
11
+ import '../../assets/NavBar.css';var C = "Menubar", [I, we, xe] = re(C), [z, ua] = ie(C, [
12
+ xe,
13
13
  U
14
- ]), p = se(), H = U(), [Se, K] = z(w), Y = c.forwardRef(
14
+ ]), p = se(), H = U(), [Se, G] = z(C), Y = c.forwardRef(
15
15
  (a, o) => {
16
16
  const {
17
17
  __scopeMenubar: r,
@@ -25,7 +25,7 @@ import '../../assets/NavBar.css';var w = "Menubar", [I, xe, Ce] = re(w), [z, ua]
25
25
  prop: n,
26
26
  onChange: i,
27
27
  defaultProp: h ?? "",
28
- caller: w
28
+ caller: C
29
29
  }), [v, b] = c.useState(null);
30
30
  return /* @__PURE__ */ e(
31
31
  Se,
@@ -64,9 +64,9 @@ import '../../assets/NavBar.css';var w = "Menubar", [I, xe, Ce] = re(w), [z, ua]
64
64
  );
65
65
  }
66
66
  );
67
- Y.displayName = w;
68
- var k = "MenubarMenu", [Ae, Q] = z(k), X = (a) => {
69
- const { __scopeMenubar: o, value: r, ...n } = a, i = O(), h = r || i || "LEGACY_REACT_AUTO_VALUE", d = K(k, o), m = p(o), t = c.useRef(null), _ = c.useRef(!1), l = d.value === h;
67
+ Y.displayName = C;
68
+ var K = "MenubarMenu", [Ae, Q] = z(K), X = (a) => {
69
+ const { __scopeMenubar: o, value: r, ...n } = a, i = O(), h = r || i || "LEGACY_REACT_AUTO_VALUE", d = G(K, o), m = p(o), t = c.useRef(null), _ = c.useRef(!1), l = d.value === h;
70
70
  return c.useEffect(() => {
71
71
  l || (_.current = !1);
72
72
  }, [l]), /* @__PURE__ */ e(
@@ -94,10 +94,10 @@ var k = "MenubarMenu", [Ae, Q] = z(k), X = (a) => {
94
94
  }
95
95
  );
96
96
  };
97
- X.displayName = k;
98
- var D = "MenubarTrigger", J = c.forwardRef(
97
+ X.displayName = K;
98
+ var k = "MenubarTrigger", J = c.forwardRef(
99
99
  (a, o) => {
100
- const { __scopeMenubar: r, disabled: n = !1, ...i } = a, h = H(r), d = p(r), m = K(D, r), t = Q(D, r), _ = c.useRef(null), l = ue(o, _, t.triggerRef), [f, s] = c.useState(!1), v = m.value === t.value;
100
+ const { __scopeMenubar: r, disabled: n = !1, ...i } = a, h = H(r), d = p(r), m = G(k, r), t = Q(k, r), _ = c.useRef(null), l = ue(o, _, t.triggerRef), [f, s] = c.useState(!1), v = m.value === t.value;
101
101
  return /* @__PURE__ */ e(I.ItemSlot, { scope: r, value: t.value, disabled: n, children: /* @__PURE__ */ e(
102
102
  oe,
103
103
  {
@@ -138,15 +138,15 @@ var D = "MenubarTrigger", J = c.forwardRef(
138
138
  ) });
139
139
  }
140
140
  );
141
- J.displayName = D;
141
+ J.displayName = k;
142
142
  var ye = "MenubarPortal", W = (a) => {
143
143
  const { __scopeMenubar: o, ...r } = a, n = p(o);
144
144
  return /* @__PURE__ */ e(me, { ...n, ...r });
145
145
  };
146
146
  W.displayName = ye;
147
- var G = "MenubarContent", Z = c.forwardRef(
147
+ var D = "MenubarContent", Z = c.forwardRef(
148
148
  (a, o) => {
149
- const { __scopeMenubar: r, align: n = "start", ...i } = a, h = p(r), d = K(G, r), m = Q(G, r), t = xe(r), _ = c.useRef(!1);
149
+ const { __scopeMenubar: r, align: n = "start", ...i } = a, h = p(r), d = G(D, r), m = Q(D, r), t = we(r), _ = c.useRef(!1);
150
150
  return /* @__PURE__ */ e(
151
151
  de,
152
152
  {
@@ -202,7 +202,7 @@ var G = "MenubarContent", Z = c.forwardRef(
202
202
  );
203
203
  }
204
204
  );
205
- Z.displayName = G;
205
+ Z.displayName = D;
206
206
  var Pe = "MenubarGroup", Ee = c.forwardRef(
207
207
  (a, o) => {
208
208
  const { __scopeMenubar: r, ...n } = a, i = p(r);
@@ -224,27 +224,27 @@ var Oe = "MenubarItem", $ = c.forwardRef(
224
224
  }
225
225
  );
226
226
  $.displayName = Oe;
227
- var Ie = "MenubarCheckboxItem", De = c.forwardRef(
227
+ var Ie = "MenubarCheckboxItem", ke = c.forwardRef(
228
228
  (a, o) => {
229
229
  const { __scopeMenubar: r, ...n } = a, i = p(r);
230
230
  return /* @__PURE__ */ e(_e, { ...i, ...n, ref: o });
231
231
  }
232
232
  );
233
- De.displayName = Ie;
234
- var Ge = "MenubarRadioGroup", Ke = c.forwardRef(
233
+ ke.displayName = Ie;
234
+ var De = "MenubarRadioGroup", Ge = c.forwardRef(
235
235
  (a, o) => {
236
236
  const { __scopeMenubar: r, ...n } = a, i = p(r);
237
237
  return /* @__PURE__ */ e(fe, { ...i, ...n, ref: o });
238
238
  }
239
239
  );
240
- Ke.displayName = Ge;
241
- var ke = "MenubarRadioItem", Fe = c.forwardRef(
240
+ Ge.displayName = De;
241
+ var Ke = "MenubarRadioItem", Fe = c.forwardRef(
242
242
  (a, o) => {
243
243
  const { __scopeMenubar: r, ...n } = a, i = p(r);
244
244
  return /* @__PURE__ */ e(ge, { ...i, ...n, ref: o });
245
245
  }
246
246
  );
247
- Fe.displayName = ke;
247
+ Fe.displayName = Ke;
248
248
  var Le = "MenubarItemIndicator", je = c.forwardRef((a, o) => {
249
249
  const { __scopeMenubar: r, ...n } = a, i = p(r);
250
250
  return /* @__PURE__ */ e(he, { ...i, ...n, ref: o });
@@ -283,7 +283,7 @@ var Xe = "MenubarSubContent", Je = c.forwardRef(
283
283
  (a, o) => {
284
284
  const { __scopeMenubar: r, ...n } = a, i = p(r);
285
285
  return /* @__PURE__ */ e(
286
- we,
286
+ Ce,
287
287
  {
288
288
  ...i,
289
289
  "data-radix-menubar-content": "",
@@ -305,7 +305,7 @@ Je.displayName = Xe;
305
305
  function We(a, o) {
306
306
  return a.map((r, n) => a[(o + n) % a.length]);
307
307
  }
308
- var x = Y, C = X, S = J, A = W, y = Z, P = $;
308
+ var w = Y, x = X, S = J, A = W, y = Z, P = $;
309
309
  const u = {
310
310
  "navbar-wrapper": "NavBar-module__navbar-wrapper___e-f8y",
311
311
  "navbar-container": "NavBar-module__navbar-container___KnbUz",
@@ -335,7 +335,7 @@ function sa({
335
335
  projectName: o,
336
336
  projectLogoIcon: r,
337
337
  projectLogoIconColor: n,
338
- projectLogoLink: i,
338
+ projectLogoOnClick: i,
339
339
  projectTag: h,
340
340
  menuItems: d,
341
341
  menuButton: m,
@@ -348,34 +348,34 @@ function sa({
348
348
  maxWidth: l
349
349
  }, children: [
350
350
  /* @__PURE__ */ M("div", { className: u["navbar-logo-container"], children: [
351
- /* @__PURE__ */ e("a", { href: i, className: u["navbar-logo-link"], children: /* @__PURE__ */ e(ee, { logo: r, color: n }) }),
351
+ /* @__PURE__ */ e("a", { onClick: i, className: u["navbar-logo-link"], children: /* @__PURE__ */ e(ee, { logo: r, color: n }) }),
352
352
  /* @__PURE__ */ e("span", { className: u["navbar-project-name-separator"] }),
353
353
  /* @__PURE__ */ e("span", { className: u["navbar-project-name"], children: o }),
354
354
  h && /* @__PURE__ */ e(q, { type: "basic", color: "green", size: "md", structure: "border", label: h })
355
355
  ] }),
356
356
  /* @__PURE__ */ M("div", { className: u["navbar-menu"], children: [
357
357
  m,
358
- /* @__PURE__ */ e(x, { className: u["navbar-menu-list"], children: d == null ? void 0 : d.map((s) => /* @__PURE__ */ M(C, { children: [
358
+ /* @__PURE__ */ e(w, { className: u["navbar-menu-list"], children: d == null ? void 0 : d.map((s) => /* @__PURE__ */ M(x, { children: [
359
359
  /* @__PURE__ */ e(S, { className: u["navbar-menu-list-item"], children: s.menuItems ? /* @__PURE__ */ M("span", { className: u["navbar-menu-list-item-trigger-container"], children: [
360
360
  /* @__PURE__ */ e("span", { children: s.label }),
361
361
  /* @__PURE__ */ e(B, { icon: "ap-icon-expand-more", className: T(u["navbar-menu-list-item-arrow"]) })
362
- ] }) : /* @__PURE__ */ e("a", { className: T(u["navbar-menu-list-item-action"], f(s.href) && u["navbar-menu-list-item-action-active"]), href: s.href, children: s.label }) }),
363
- s.menuItems && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { className: u["navbar-menu-list-item-submenu"], children: s.menuItems.map((v) => /* @__PURE__ */ e(P, { className: u["navbar-menu-list-item-submenu-item"], children: /* @__PURE__ */ e("a", { href: v.href, children: v.label }) }, v.label)) }) })
362
+ ] }) : /* @__PURE__ */ e("a", { className: T(u["navbar-menu-list-item-action"], f(s.href) && u["navbar-menu-list-item-action-active"]), onClick: s.onClick, children: s.label }) }),
363
+ s.menuItems && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { className: u["navbar-menu-list-item-submenu"], children: s.menuItems.map((v) => /* @__PURE__ */ e(P, { className: u["navbar-menu-list-item-submenu-item"], children: /* @__PURE__ */ e("a", { onClick: v.onClick, children: v.label }) }, v.label)) }) })
364
364
  ] }, s.label)) }),
365
365
  t && /* @__PURE__ */ e("span", { className: u["navbar-menu-additional-separator"] }),
366
366
  /* @__PURE__ */ M("div", { className: u["navbar-menu-additional"], children: [
367
- (t == null ? void 0 : t.notifications) && /* @__PURE__ */ e(x, { children: /* @__PURE__ */ M(C, { children: [
367
+ (t == null ? void 0 : t.notifications) && /* @__PURE__ */ e(w, { children: /* @__PURE__ */ M(x, { children: [
368
368
  /* @__PURE__ */ e(S, { className: u["navbar-menu-additional-trigger"], children: /* @__PURE__ */ M("div", { className: u["navbar-notification-container"], children: [
369
369
  /* @__PURE__ */ e(B, { icon: "ap-icon-notification-filled", className: u["navbar-menu-additional-icon"] }),
370
370
  t.notifications.count > 0 && /* @__PURE__ */ e("span", { className: u["navbar-notification-badge"], children: t.notifications.count > 99 ? "99+" : t.notifications.count })
371
371
  ] }) }),
372
372
  /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { align: "end", className: u["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(P, { className: u["navbar-menu-list-item-submenu-item"], children: t.notifications.content }) }) })
373
373
  ] }) }),
374
- (t == null ? void 0 : t.help) && /* @__PURE__ */ e(x, { children: /* @__PURE__ */ M(C, { children: [
374
+ (t == null ? void 0 : t.help) && /* @__PURE__ */ e(w, { children: /* @__PURE__ */ M(x, { children: [
375
375
  /* @__PURE__ */ e(S, { className: u["navbar-menu-additional-trigger"], children: /* @__PURE__ */ e(B, { icon: "ap-icon-help-filled", className: u["navbar-menu-additional-icon"] }) }),
376
376
  /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { align: "end", className: u["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(P, { className: u["navbar-menu-list-item-submenu-item"], children: t.help }) }) })
377
377
  ] }) }),
378
- (t == null ? void 0 : t.userProfile) && /* @__PURE__ */ e(x, { children: /* @__PURE__ */ M(C, { children: [
378
+ (t == null ? void 0 : t.userProfile) && /* @__PURE__ */ e(w, { children: /* @__PURE__ */ M(x, { children: [
379
379
  /* @__PURE__ */ e(S, { className: u["navbar-menu-additional-trigger"], children: /* @__PURE__ */ e("span", { className: u["navbar-menu-additional-user-profile"], children: t.userProfile.initials }) }),
380
380
  /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { align: "end", className: u["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(P, { className: u["navbar-menu-list-item-submenu-item"], children: t.userProfile.content }) }) })
381
381
  ] }) })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alixpartners/ui-components",
3
- "version": "2.0.0-beta.17",
3
+ "version": "2.0.0-beta.18",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"