@capillarytech/blaze-ui 6.1.5 → 6.1.6-beta.1

package/CapNavigationSPA/CapNavigationSPASidebar/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * CapNavigationSPASidebar – Left sidebar matching New navigation Figma design.
+ * 240px width, Capillary logo at top, nav items (icon + label), L2 flyout for items with children, divider, Settings at bottom.
+ */
+import React from 'react';
+import type { CapNavigationSPASidebarProps } from './types';
+declare const CapNavigationSPASidebar: React.FC<CapNavigationSPASidebarProps>;
+export default CapNavigationSPASidebar;
+export type { CapNavigationSPASidebarProps, CapNavigationSPASidebarItem } from './types';
+//# sourceMappingURL=index.d.ts.map

package/CapNavigationSPA/CapNavigationSPASidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/CapNavigationSPA/CapNavigationSPASidebar/index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAwC,MAAM,OAAO,CAAC;AAK7D,OAAO,KAAK,EAA+B,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAoBzF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAgZnE,CAAC;AAEF,eAAe,uBAAuB,CAAC;AACvC,YAAY,EAAE,4BAA4B,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC"}

package/CapNavigationSPA/CapNavigationSPASidebar/index.js

@@ -0,0 +1,373 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useRef, useState, useCallback } from "react";
+import CapIcon from "../../CapIcon/index.js";
+import styles from "./styles.module.scss.js";
+const SIDEBAR_DIVIDER_BEFORE_KEY = "data-management";
+const DEFAULT_ICON_MAP = {
+  loyalty: "loyalty-tag",
+  // Figma 583:6938 – heart inside tag
+  engage: "engage-nav",
+  // Figma 646-59790 – megaphone with settings
+  rewards: "rewards-outline",
+  insights: "insights-nav",
+  // Figma 646-59984 – bar chart in frame
+  aira: "aira-nav",
+  // Figma 646-59790 – three sparkles, stroke icon
+  members: "members",
+  audiences: "groups",
+  creatives: "creatives-nav",
+  // Figma 646-59984 – document with pen
+  "data-management": "data-management",
+  extensions: "code",
+  settings: "settings"
+};
+const CapNavigationSPASidebar = ({
+  items,
+  selectedKey = "",
+  onItemClick,
+  settingsLabel = "Settings",
+  logo,
+  className,
+  collapsed = false,
+  onCollapseExpand,
+  navigateToLink = true
+}) => {
+  const wrapperRef = useRef(null);
+  const [hoverExpandedKey, setHoverExpandedKey] = useState(null);
+  const [clickExpandedKey, setClickExpandedKey] = useState(null);
+  const [hoverL1TooltipKey, setHoverL1TooltipKey] = useState(null);
+  const expandedParentKey = clickExpandedKey ?? hoverExpandedKey;
+  const closeFlyout = useCallback(() => {
+    setHoverExpandedKey(null);
+    setClickExpandedKey(null);
+    setHoverL1TooltipKey(null);
+  }, []);
+  const handleClick = useCallback(
+    (item) => {
+      if (navigateToLink && item.link && item.link !== window.location.pathname) {
+        window.location.pathname = item.link;
+      }
+      onItemClick == null ? void 0 : onItemClick(item);
+    },
+    [navigateToLink, onItemClick]
+  );
+  const toggleParentExpanded = useCallback(
+    (parentKey) => {
+      if (expandedParentKey === parentKey) {
+        closeFlyout();
+      } else {
+        setHoverExpandedKey(null);
+        setClickExpandedKey(parentKey);
+      }
+    },
+    [expandedParentKey, closeFlyout]
+  );
+  const handleItemClick = useCallback(
+    (item) => {
+      var _a, _b;
+      if (collapsed) {
+        if (onCollapseExpand) {
+          onCollapseExpand();
+        }
+        if ((_a = item.children) == null ? void 0 : _a.length) {
+          setHoverExpandedKey(null);
+          setClickExpandedKey(item.key);
+        } else {
+          closeFlyout();
+          handleClick(item);
+        }
+        return;
+      }
+      if ((_b = item.children) == null ? void 0 : _b.length) {
+        toggleParentExpanded(item.key);
+      } else {
+        closeFlyout();
+        handleClick(item);
+      }
+    },
+    [collapsed, onCollapseExpand, toggleParentExpanded, closeFlyout, handleClick]
+  );
+  const getIconType = (item) => item.iconType ?? DEFAULT_ICON_MAP[item.key] ?? void 0;
+  const handleWrapperMouseLeave = useCallback(() => {
+    setHoverExpandedKey(null);
+    setHoverL1TooltipKey(null);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: wrapperRef,
+      className: styles["cap-navigation-spa-sidebar__wrapper"],
+      onMouseLeave: handleWrapperMouseLeave,
+      children: /* @__PURE__ */ jsxs(
+        "aside",
+        {
+          className: classNames(
+            styles["cap-navigation-spa-sidebar"],
+            collapsed && styles["cap-navigation-spa-sidebar--collapsed"],
+            className
+          ),
+          "data-testid": "cap-navigation-spa-sidebar",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__logo"], children: logo !== void 0 ? logo : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                CapIcon,
+                {
+                  type: "capillary",
+                  size: "s",
+                  className: styles["cap-navigation-spa-sidebar__logo-icon"]
+                }
+              ),
+              !collapsed && /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__logo-text"], children: "capillary" })
+            ] }) }),
+            /* @__PURE__ */ jsx("nav", { className: styles["cap-navigation-spa-sidebar__nav"], children: items.flatMap((item) => {
+              var _a, _b, _c, _d;
+              const isExpandedWithChildren = !collapsed && ((_a = item.children) == null ? void 0 : _a.length) && expandedParentKey === item.key;
+              const parentButton = /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: classNames(
+                    styles["cap-navigation-spa-sidebar__item"],
+                    expandedParentKey === item.key && styles["cap-navigation-spa-sidebar__item--expanded"],
+                    expandedParentKey === item.key && item.key === "loyalty" && styles["cap-navigation-spa-sidebar__item--expanded-loyalty"],
+                    expandedParentKey === item.key && item.key === "engage" && styles["cap-navigation-spa-sidebar__item--expanded-engage"],
+                    expandedParentKey === item.key && item.key === "insights" && styles["cap-navigation-spa-sidebar__item--expanded-insights"],
+                    expandedParentKey === item.key && item.key === "members" && styles["cap-navigation-spa-sidebar__item--expanded-members"],
+                    expandedParentKey === item.key && item.key === "rewards" && styles["cap-navigation-spa-sidebar__item--expanded-rewards"],
+                    expandedParentKey === item.key && item.key === "audiences" && styles["cap-navigation-spa-sidebar__item--expanded-audiences"],
+                    expandedParentKey === item.key && item.key === "data-management" && styles["cap-navigation-spa-sidebar__item--expanded-data-management"],
+                    expandedParentKey === item.key && item.key === "extensions" && styles["cap-navigation-spa-sidebar__item--expanded-extensions"],
+                    expandedParentKey === item.key && item.key === "settings" && styles["cap-navigation-spa-sidebar__item--expanded-settings"]
+                  ),
+                  onClick: () => handleItemClick(item),
+                  onMouseEnter: () => {
+                    var _a2;
+                    if ((_a2 = item.children) == null ? void 0 : _a2.length) {
+                      if (collapsed) {
+                        setHoverExpandedKey(item.key);
+                      }
+                      setHoverL1TooltipKey(null);
+                    } else if (collapsed) {
+                      setHoverL1TooltipKey(item.key);
+                    }
+                  },
+                  "data-testid": `cap-navigation-spa-sidebar-item-${item.key}`,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-icon"], children: getIconType(item) ? /* @__PURE__ */ jsx(CapIcon, { type: getIconType(item), size: "s" }) : /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-dot"] }) }),
+                    !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-label"], children: item.title }),
+                      ((_b = item.children) == null ? void 0 : _b.length) ? /* @__PURE__ */ jsx(
+                        CapIcon,
+                        {
+                          type: expandedParentKey === item.key ? "chevron-down" : "chevron-right",
+                          size: "s",
+                          className: styles["cap-navigation-spa-sidebar__item-chevron"]
+                        }
+                      ) : null
+                    ] })
+                  ]
+                },
+                item.key
+              );
+              const showCollapsedFlyout = collapsed && ((_c = item.children) == null ? void 0 : _c.length) && expandedParentKey === item.key;
+              const showL1TooltipFlyout = collapsed && !((_d = item.children) == null ? void 0 : _d.length) && hoverL1TooltipKey === item.key;
+              const l2Inline = isExpandedWithChildren ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: styles["cap-navigation-spa-sidebar__l2-wrapper"],
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l2-divider"], "aria-hidden": true }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: styles["cap-navigation-spa-sidebar__l2-inline"],
+                        onMouseEnter: () => setHoverExpandedKey(item.key),
+                        "data-testid": `cap-navigation-spa-sidebar-l2-${item.key}`,
+                        children: item.children.map((child) => /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: classNames(
+                              styles["cap-navigation-spa-sidebar__l2-inline-item"],
+                              selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected"],
+                              item.key === "loyalty" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-loyalty"],
+                              item.key === "engage" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-engage"],
+                              item.key === "insights" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-insights"],
+                              item.key === "members" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-members"],
+                              item.key === "rewards" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-rewards"],
+                              item.key === "audiences" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-audiences"],
+                              item.key === "data-management" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-data-management"],
+                              item.key === "extensions" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-extensions"],
+                              item.key === "settings" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-settings"]
+                            ),
+                            onClick: () => {
+                              handleClick(child);
+                            },
+                            "data-testid": `cap-navigation-spa-sidebar-l2-item-${child.key}`,
+                            children: child.title
+                          },
+                          child.key
+                        ))
+                      },
+                      `${item.key}-l2`
+                    )
+                  ]
+                },
+                `${item.key}-l2-wrapper`
+              ) : null;
+              const collapsedFlyout = showCollapsedFlyout ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: styles["cap-navigation-spa-sidebar__l2-flyout"],
+                  onMouseEnter: () => setHoverExpandedKey(item.key),
+                  "data-testid": `cap-navigation-spa-sidebar-l2-flyout-${item.key}`,
+                  role: "menu",
+                  "aria-label": item.title,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: styles["cap-navigation-spa-sidebar__l2-flyout-arrow"],
+                        "aria-hidden": true
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: styles["cap-navigation-spa-sidebar__l2-flyout-card"], children: [
+                      /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l2-flyout-parent"], children: item.title }),
+                      item.children.map((child) => /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: classNames(
+                            styles["cap-navigation-spa-sidebar__l2-flyout-item"],
+                            selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-flyout-item--selected"]
+                          ),
+                          onClick: () => {
+                            setClickExpandedKey(item.key);
+                            if (collapsed && onCollapseExpand) {
+                              onCollapseExpand();
+                            }
+                            handleClick(child);
+                          },
+                          "data-testid": `cap-navigation-spa-sidebar-l2-flyout-item-${child.key}`,
+                          role: "menuitem",
+                          children: child.title
+                        },
+                        child.key
+                      ))
+                    ] })
+                  ]
+                },
+                `${item.key}-l2-flyout`
+              ) : null;
+              const l1TooltipFlyout = showL1TooltipFlyout ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: styles["cap-navigation-spa-sidebar__l1-tooltip-flyout"],
+                  onMouseEnter: () => setHoverL1TooltipKey(item.key),
+                  "data-testid": `cap-navigation-spa-sidebar-l1-tooltip-${item.key}`,
+                  role: "tooltip",
+                  "aria-label": item.title,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: styles["cap-navigation-spa-sidebar__l2-flyout-arrow"],
+                        "aria-hidden": true
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l1-tooltip-card"], children: /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l1-tooltip-label"], children: item.title }) })
+                  ]
+                },
+                `${item.key}-l1-tooltip`
+              ) : null;
+              const wrapForCollapsedFlyout = collapsed;
+              const renderedButton = wrapForCollapsedFlyout ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: styles["cap-navigation-spa-sidebar__item-flyout-wrap"],
+                  onMouseLeave: closeFlyout,
+                  children: [
+                    parentButton,
+                    collapsedFlyout,
+                    l1TooltipFlyout
+                  ]
+                },
+                `${item.key}-flyout-wrap`
+              ) : parentButton;
+              if (item.key === SIDEBAR_DIVIDER_BEFORE_KEY) {
+                return [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: styles["cap-navigation-spa-sidebar__divider"],
+                      "aria-hidden": true
+                    },
+                    `divider-${item.key}`
+                  ),
+                  renderedButton,
+                  ...l2Inline ? [l2Inline] : []
+                ];
+              }
+              if (item.key === "settings") {
+                return [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: styles["cap-navigation-spa-sidebar__divider"],
+                      "aria-hidden": true
+                    },
+                    "divider-settings"
+                  ),
+                  renderedButton,
+                  ...l2Inline ? [l2Inline] : []
+                ];
+              }
+              return [renderedButton, ...l2Inline ? [l2Inline] : []];
+            }) }),
+            /* @__PURE__ */ jsxs("div", { className: styles["cap-navigation-spa-sidebar__footer"], children: [
+              !items.some((i) => i.key === "settings") && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: styles["cap-navigation-spa-sidebar__item"],
+                  onClick: () => {
+                    closeFlyout();
+                    const settingsItem = { key: "settings", title: settingsLabel, link: "/settings" };
+                    handleClick(settingsItem);
+                  },
+                  "data-testid": "cap-navigation-spa-sidebar-settings",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-icon"], children: /* @__PURE__ */ jsx(CapIcon, { type: "settings", size: "s" }) }),
+                    !collapsed && /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-label"], children: settingsLabel })
+                  ]
+                }
+              ),
+              onCollapseExpand && /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__collapse-wrap"], children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: styles["cap-navigation-spa-sidebar__collapse-btn"],
+                  onClick: onCollapseExpand,
+                  "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+                  "data-testid": "cap-navigation-spa-sidebar-collapse-toggle",
+                  children: /* @__PURE__ */ jsx(
+                    CapIcon,
+                    {
+                      type: collapsed ? "sidebar-expand" : "sidebar-collapse",
+                      size: "s",
+                      className: styles["cap-navigation-spa-sidebar__collapse-btn-icon"]
+                    }
+                  )
+                }
+              ) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  CapNavigationSPASidebar as default
+};