se-design 1.0.90-dev.0 → 1.0.90

package/dist/index49.js

@@ -1,152 +1,39 @@
-import t, { useState as C, useMemo as f, useEffect as D } from "react";
-import "./index3.js";
-import "./index4.js";
-import { Icon as w } from "./index6.js";
-import "./index72.js";
-import { useTabsA11y as O } from "./index73.js";
-import { MenuList as _ } from "./index18.js";
-import "./index9.js";
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-import "react-dom";
-import "./index17.js";
-import { Popover as $ } from "./index19.js";
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-import { TabButton as j } from "./index236.js";
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-import "./index60.js";
-/* empty css         */
-/* empty css         */
-import "./index64.js";
-/* empty css         */
-function c() {
-  return c = Object.assign ? Object.assign.bind() : function(i) {
-    for (var o = 1; o < arguments.length; o++) {
-      var n = arguments[o];
-      for (var s in n) ({}).hasOwnProperty.call(n, s) && (i[s] = n[s]);
-    }
-    return i;
-  }, c.apply(null, arguments);
-}
-const Se = ({
-  defaultActiveNavigationItem: i,
-  navigationItems: o,
-  onNavigationItemChange: n,
-  isCompactView: s = !1,
-  keyboardActivationMode: x = "automatic",
-  orientation: y = "horizontal",
-  ariaLabel: E = "Sections",
-  ariaLabelledBy: P,
-  idBase: h = ""
+import m from "react";
+const a = ["var(--color-green-500)", "var(--color-blue-500)", "var(--color-purple-600)", "var(--color-red-400)", "var(--color-yellow-600)"], h = ({
+  size: r = 40,
+  text: l,
+  textColor: i = "var(--color-white)",
+  backgroundColor: t = "",
+  className: n = "",
+  onClick: e,
+  automationId: c = "",
+  ariaLabel: o
 }) => {
-  const N = i || o[0]?.id || "", [l, m] = C(N), v = f(() => o.filter((e) => !e.disabled).map((e) => e.id), [o]), {
-    getTabProps: T,
-    setFocusedTabId: d,
-    handleKeyDown: k,
-    getPanelProps: b,
-    getTabListProps: F
-  } = O({
-    itemIds: v,
-    orientation: y,
-    activeItem: l,
-    idBase: h
-  });
-  D(() => {
-    i && (m(i), d(i));
-  }, [i, d]);
-  const u = (e) => {
-    e?.disabled || (m(e?.id), n?.(e?.id));
-  }, S = (e) => {
-    const r = o.find((a) => a.id === e);
-    !r || r.disabled || (m(e), n?.(e));
-  }, g = f(() => o.map((e) => {
-    const r = e.id === l, a = r && e.panelHasFocusableContent === !1 ? 0 : void 0;
-    return /* @__PURE__ */ t.createElement("div", c({
-      key: e.id
-    }, b(e.id), {
-      hidden: !r,
-      tabIndex: a,
-      className: `navigation-item-content ${r ? "block" : "hidden"}`
-    }), r && e?.renderNavigationItemContent?.(e));
-  }), [o, l, b]), B = o.find((e) => e.id === l);
-  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", c({
-    className: "se-design-navigation-bar flex items-center gap-4",
-    "data-automation-id": "navigation-bar-container"
-  }, F({
-    ariaLabel: E,
-    ariaLabelledBy: P
-  })), !s && o.map((e) => {
-    const r = l === e.id, a = e.disabled, p = T(e.id);
-    return /* @__PURE__ */ t.createElement(j, {
-      key: e.id,
-      ref: p.ref,
-      tabIndex: p.tabIndex,
-      id: p.id,
-      label: e.label,
-      isSelected: r,
-      isDisabled: a,
-      panelId: p["aria-controls"],
-      onClick: () => u(e),
-      onFocus: () => {
-        p.onFocus(), x === "automatic" && !a && S(e.id);
-      },
-      onKeyDown: k,
-      className: `text-base ${a ? "text-[var(--color-gray-400)] cursor-not-allowed" : r ? "text-[var(--color-gray-900)] font-bold hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer"} focus-outline rounded-[6px]`,
-      automationId: `navigation-item-${e.id}`
-    });
-  }), s && /* @__PURE__ */ t.createElement($, {
-    className: "navigation-bar-popover",
-    position: "bottom-left",
-    noBorder: !0,
-    renderPopoverSrcElement: ({
-      displayPopover: e
-    }) => /* @__PURE__ */ t.createElement("div", {
-      className: "navigation-bar-popover-src-element flex items-center gap-1 cursor-pointer"
-    }, /* @__PURE__ */ t.createElement("label", {
-      className: "font-semibold cursor-pointer"
-    }, B?.label), /* @__PURE__ */ t.createElement(w, {
-      name: "chevron",
-      rotation: e ? "180" : "0"
-    })),
-    renderPopoverContents: ({
-      closePopoverCb: e
-    }) => /* @__PURE__ */ t.createElement(_, {
-      items: o.map((r) => ({
-        id: r.id,
-        label: r.label,
-        onClick: () => {
-          u(r), e();
-        }
-      }))
-    })
-  })), /* @__PURE__ */ t.createElement("div", {
-    className: "se-design-navigation-bar-content"
-  }, g));
+  const d = l?.split(" ")?.map((s) => s[0])?.join("")?.toUpperCase()?.slice(0, 2), u = () => t || a[Math.floor(Math.random() * a.length)];
+  return /* @__PURE__ */ m.createElement("div", {
+    className: `
+        se-design-avatar 
+        flex items-center justify-center 
+        rounded-full font-medium
+        ${e ? "cursor-pointer" : "cursor-default"}
+        ${n}
+      `,
+    onClick: e,
+    "data-automation-id": c,
+    "aria-hidden": o ? void 0 : !0,
+    "aria-label": o,
+    style: {
+      width: r,
+      height: r,
+      minWidth: 20,
+      minHeight: 20,
+      backgroundColor: u(),
+      color: i,
+      fontSize: `${r * 0.4}px`
+    }
+  }, d);
 };
 export {
-  Se as NavigationBar
+  h as Avatar
 };
 //# sourceMappingURL=index49.js.map

package/dist/index49.js.map

@@ -1 +1 @@
-{"version":3,"file":"index49.js","sources":["../src/components/NavigationBar/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState,useMemo, useEffect } from 'react';\nimport { Popover, MenuList, Icon } from 'src/components';\nimport { TabButton } from './TabButton';\nimport { useTabsA11y } from '../../utils/a11y';\n\nexport interface NavigationItemProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  panelHasFocusableContent?: boolean; // If false, the panel itself will be tabbable when active\n  renderNavigationItemContent?: (navigationItem: NavigationItemProps) => ReactNode;\n}\n\ninterface NavigationBarProps {\n  defaultActiveNavigationItem?: string;\n  navigationItems: NavigationItemProps[];\n  isCompactView?: boolean;\n  onNavigationItemChange?: (navigationItemId: string) => void;\n  keyboardActivationMode?: 'automatic' | 'manual'; //manual: arrow keys move focus only; Enter/Space activates the focused tab\n  orientation?: 'horizontal' | 'vertical'; // required for aria and arrow shortcuts\n  ariaLabel?: string; // Used when ariaLabelledBy is not provided\n  ariaLabelledBy?: string; // ID of element that labels this tablist (preferred over ariaLabel when visible label exists)\n  idBase?: string; //optional ID namespace to avoid collisions\n}\n\nexport const NavigationBar: FC<NavigationBarProps> = ({\n  defaultActiveNavigationItem,\n  navigationItems,\n  onNavigationItemChange,\n  isCompactView = false,\n  keyboardActivationMode = 'automatic',\n  orientation = 'horizontal',\n  ariaLabel = 'Sections',\n  ariaLabelledBy,\n  idBase = ''\n}) => {\n  const defaultNavigationItemId = defaultActiveNavigationItem || navigationItems[0]?.id || '';\n  const [activeNavigationItem, setActiveNavigationItem] = useState<string>(defaultNavigationItemId);\n\n  // Exclude disabled tabs from roving focus (keeps native disabled buttons, avoids focus-on-disabled).\n  const itemIds = useMemo(\n    () => navigationItems.filter((item) => !item.disabled).map((item) => item.id),\n    [navigationItems]\n  );\n\n  // Hook for managing Tabs (NavigationBar) focus and ARIA props.\n  const { getTabProps, setFocusedTabId, handleKeyDown, getPanelProps, getTabListProps } = useTabsA11y({\n    itemIds,\n    orientation,\n    activeItem: activeNavigationItem,\n    idBase\n  });\n\n  useEffect(() => {\n    if (defaultActiveNavigationItem) {\n      setActiveNavigationItem(defaultActiveNavigationItem);\n      setFocusedTabId(defaultActiveNavigationItem);\n    }\n  }, [defaultActiveNavigationItem, setFocusedTabId]);\n\n  const handleNavigationItemClick = (navigationItem: NavigationItemProps) => {\n    if (navigationItem?.disabled) return;\n    setActiveNavigationItem(navigationItem?.id);\n    onNavigationItemChange?.(navigationItem?.id);\n  };\n\n  const activateTabById = (id: string) => {\n    const item = navigationItems.find((i) => i.id === id);\n    if (!item || item.disabled) return;\n    setActiveNavigationItem(id);\n    onNavigationItemChange?.(id);\n  };\n\n  const renderPanels = useMemo(() => {\n    return navigationItems.map((navigationItem) => {\n      const isSelected = navigationItem.id === activeNavigationItem;\n      const panelTabIndex = isSelected && navigationItem.panelHasFocusableContent === false ? 0 : undefined;\n\n      return (\n        <div\n          key={navigationItem.id}\n          {...getPanelProps(navigationItem.id)}\n          hidden={!isSelected}\n          tabIndex={panelTabIndex}\n          className={`navigation-item-content ${isSelected ? 'block' : 'hidden'}`}\n        >\n          {isSelected && navigationItem?.renderNavigationItemContent?.(navigationItem)}\n        </div>\n      );\n    });\n  }, [navigationItems, activeNavigationItem, getPanelProps]);\n\n  const activeNavigationItemData = navigationItems.find((item) => item.id === activeNavigationItem);\n\n  return (\n    <>\n      <div\n        className=\"se-design-navigation-bar flex items-center gap-4\"\n        data-automation-id=\"navigation-bar-container\"\n        {...getTabListProps({ ariaLabel, ariaLabelledBy })}\n      >\n        {!isCompactView && navigationItems.map((navigationItem) => {\n          const isSelected = activeNavigationItem === navigationItem.id;\n          const isDisabled = navigationItem.disabled;\n\n          const tabProps = getTabProps(navigationItem.id);\n\n          return (\n            <TabButton\n              key={navigationItem.id}\n              ref={tabProps.ref as (el: HTMLButtonElement | null) => void}\n              tabIndex={tabProps.tabIndex}\n              id={tabProps.id}\n              label={navigationItem.label}\n              isSelected={isSelected}\n              isDisabled={isDisabled}\n              panelId={tabProps['aria-controls']}\n              onClick={() => handleNavigationItemClick(navigationItem)}\n              onFocus={() => {\n                tabProps.onFocus();\n                if (keyboardActivationMode === 'automatic' && !isDisabled) {\n                  activateTabById(navigationItem.id);\n                }\n              }}\n              onKeyDown={handleKeyDown}\n              className={`text-base ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isSelected\n                  ? 'text-[var(--color-gray-900)] font-bold hover:cursor-pointer'\n                  : 'text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer'\n              } focus-outline rounded-[6px]`}\n              automationId={`navigation-item-${navigationItem.id}`}\n            />\n          );\n        })}\n        {isCompactView && (\n          <Popover\n            className=\"navigation-bar-popover\"\n            position=\"bottom-left\"\n            noBorder\n            renderPopoverSrcElement={({ displayPopover }) => (\n              <div className=\"navigation-bar-popover-src-element flex items-center gap-1 cursor-pointer\">\n                <label className=\"font-semibold cursor-pointer\">{activeNavigationItemData?.label}</label>\n                <Icon name=\"chevron\" rotation={displayPopover ? '180' : '0'} />\n              </div>\n            )}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <MenuList items={navigationItems.map((item) => ({\n                id: item.id,\n                label: item.label,\n                onClick: () => {\n                  handleNavigationItemClick(item);\n                  closePopoverCb();\n                }\n              }))}\n              />\n            )}\n          />\n        )}\n      </div>\n\n      <div className=\"se-design-navigation-bar-content\">\n        {renderPanels}\n      </div>\n    </>\n  );\n};\n"],"names":["NavigationBar","defaultActiveNavigationItem","navigationItems","onNavigationItemChange","isCompactView","keyboardActivationMode","orientation","ariaLabel","ariaLabelledBy","idBase","defaultNavigationItemId","id","activeNavigationItem","setActiveNavigationItem","useState","itemIds","useMemo","filter","item","disabled","map","getTabProps","setFocusedTabId","handleKeyDown","getPanelProps","getTabListProps","useTabsA11y","activeItem","useEffect","handleNavigationItemClick","navigationItem","activateTabById","find","i","renderPanels","isSelected","panelTabIndex","panelHasFocusableContent","undefined","React","createElement","_extends","key","hidden","tabIndex","className","renderNavigationItemContent","activeNavigationItemData","Fragment","isDisabled","tabProps","TabButton","ref","label","panelId","onClick","onFocus","onKeyDown","automationId","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","Icon","name","rotation","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,MAAMA,KAAwCA,CAAC;AAAA,EACpDC,6BAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,wBAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,wBAAAA,IAAyB;AAAA,EACzBC,aAAAA,IAAc;AAAA,EACdC,WAAAA,IAAY;AAAA,EACZC,gBAAAA;AAAAA,EACAC,QAAAA,IAAS;AACX,MAAM;AACJ,QAAMC,IAA0BT,KAA+BC,EAAgB,CAAC,GAAGS,MAAM,IACnF,CAACC,GAAsBC,CAAuB,IAAIC,EAAiBJ,CAAuB,GAG1FK,IAAUC,EACd,MAAMd,EAAgBe,OAAQC,OAAS,CAACA,EAAKC,QAAQ,EAAEC,IAAKF,CAAAA,MAASA,EAAKP,EAAE,GAC5E,CAACT,CAAe,CAClB,GAGM;AAAA,IAAEmB,aAAAA;AAAAA,IAAaC,iBAAAA;AAAAA,IAAiBC,eAAAA;AAAAA,IAAeC,eAAAA;AAAAA,IAAeC,iBAAAA;AAAAA,EAAAA,IAAoBC,EAAY;AAAA,IAClGX,SAAAA;AAAAA,IACAT,aAAAA;AAAAA,IACAqB,YAAYf;AAAAA,IACZH,QAAAA;AAAAA,EAAAA,CACD;AAEDmB,EAAAA,EAAU,MAAM;AACd,IAAI3B,MACFY,EAAwBZ,CAA2B,GACnDqB,EAAgBrB,CAA2B;AAAA,EAE/C,GAAG,CAACA,GAA6BqB,CAAe,CAAC;AAEjD,QAAMO,IAA4BA,CAACC,MAAwC;AACzE,IAAIA,GAAgBX,aACpBN,EAAwBiB,GAAgBnB,EAAE,GAC1CR,IAAyB2B,GAAgBnB,EAAE;AAAA,EAC7C,GAEMoB,IAAkBA,CAACpB,MAAe;AACtC,UAAMO,IAAOhB,EAAgB8B,KAAMC,CAAAA,MAAMA,EAAEtB,OAAOA,CAAE;AACpD,IAAI,CAACO,KAAQA,EAAKC,aAClBN,EAAwBF,CAAE,GAC1BR,IAAyBQ,CAAE;AAAA,EAC7B,GAEMuB,IAAelB,EAAQ,MACpBd,EAAgBkB,IAAKU,CAAAA,MAAmB;AAC7C,UAAMK,IAAaL,EAAenB,OAAOC,GACnCwB,IAAgBD,KAAcL,EAAeO,6BAA6B,KAAQ,IAAIC;AAE5F,WACEC,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,MACEC,KAAKZ,EAAenB;AAAAA,IAAAA,GAChBa,EAAcM,EAAenB,EAAE,GAAC;AAAA,MACpCgC,QAAQ,CAACR;AAAAA,MACTS,UAAUR;AAAAA,MACVS,WAAW,2BAA2BV,IAAa,UAAU,QAAQ;AAAA,IAAA,CAAG,GAEvEA,KAAcL,GAAgBgB,8BAA8BhB,CAAc,CACxE;AAAA,EAET,CAAC,GACA,CAAC5B,GAAiBU,GAAsBY,CAAa,CAAC,GAEnDuB,IAA2B7C,EAAgB8B,KAAMd,CAAAA,MAASA,EAAKP,OAAOC,CAAoB;AAEhG,SACE2B,gBAAAA,EAAAC,cAAAD,EAAAS,UAAA,MACET,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACEI,WAAU;AAAA,IACV,sBAAmB;AAAA,EAAA,GACfpB,EAAgB;AAAA,IAAElB,WAAAA;AAAAA,IAAWC,gBAAAA;AAAAA,EAAAA,CAAgB,CAAC,GAEjD,CAACJ,KAAiBF,EAAgBkB,IAAKU,CAAAA,MAAmB;AACzD,UAAMK,IAAavB,MAAyBkB,EAAenB,IACrDsC,IAAanB,EAAeX,UAE5B+B,IAAW7B,EAAYS,EAAenB,EAAE;AAE9C,WACE4B,gBAAAA,EAAAC,cAACW,GAAS;AAAA,MACRT,KAAKZ,EAAenB;AAAAA,MACpByC,KAAKF,EAASE;AAAAA,MACdR,UAAUM,EAASN;AAAAA,MACnBjC,IAAIuC,EAASvC;AAAAA,MACb0C,OAAOvB,EAAeuB;AAAAA,MACtBlB,YAAAA;AAAAA,MACAc,YAAAA;AAAAA,MACAK,SAASJ,EAAS,eAAe;AAAA,MACjCK,SAASA,MAAM1B,EAA0BC,CAAc;AAAA,MACvD0B,SAASA,MAAM;AACbN,QAAAA,EAASM,QAAAA,GACLnD,MAA2B,eAAe,CAAC4C,KAC7ClB,EAAgBD,EAAenB,EAAE;AAAA,MAErC;AAAA,MACA8C,WAAWlC;AAAAA,MACXsB,WAAW,aACTI,IACI,oDACAd,IACA,gEACA,4FAA4F;AAAA,MAElGuB,cAAc,mBAAmB5B,EAAenB,EAAE;AAAA,IAAA,CACnD;AAAA,EAEL,CAAC,GACAP,KACCmC,gBAAAA,EAAAC,cAACmB,GAAO;AAAA,IACNd,WAAU;AAAA,IACVe,UAAS;AAAA,IACTC,UAAQ;AAAA,IACRC,yBAAyBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MAC1BxB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MAAKK,WAAU;AAAA,IAAA,GACbN,gBAAAA,EAAAC,cAAA,SAAA;AAAA,MAAOK,WAAU;AAAA,IAAA,GAAgCE,GAA0BM,KAAa,GACxFd,gBAAAA,EAAAC,cAACwB,GAAI;AAAA,MAACC,MAAK;AAAA,MAAUC,UAAUH,IAAiB,QAAQ;AAAA,IAAA,CAAM,CAC3D;AAAA,IAEPI,uBAAuBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MACxB7B,gBAAAA,EAAAC,cAAC6B,GAAQ;AAAA,MAACC,OAAOpE,EAAgBkB,IAAKF,CAAAA,OAAU;AAAA,QAC9CP,IAAIO,EAAKP;AAAAA,QACT0C,OAAOnC,EAAKmC;AAAAA,QACZE,SAASA,MAAM;AACb1B,UAAAA,EAA0BX,CAAI,GAC9BkD,EAAAA;AAAAA,QACF;AAAA,MAAA,EACA;AAAA,IAAA,CACD;AAAA,EAAA,CAEJ,CAEA,GAEL7B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKK,WAAU;AAAA,EAAA,GACZX,CACE,CACL;AAEN;"}
+{"version":3,"file":"index49.js","sources":["../src/components/Avatar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nexport type AvatarProps = {\n  size?: number;\n  text: string;\n  textColor?: string;\n  backgroundColor?: string;\n  className?: string;\n  onClick?: () => void;\n  automationId?: string;\n  ariaLabel?: string;\n};\n\nconst AVATAR_COLORS = [\n  'var(--color-green-500)',\n  'var(--color-blue-500)',\n  'var(--color-purple-600)',\n  'var(--color-red-400)',\n  'var(--color-yellow-600)'\n];\n\nexport const Avatar: FC<AvatarProps> = ({\n  size = 40,\n  text,\n  textColor = 'var(--color-white)',\n  backgroundColor = '',\n  className = '',\n  onClick,\n  automationId = '',\n  ariaLabel\n}) => {\n  const initials = text\n    ?.split(' ')\n    ?.map((word) => word[0])\n    ?.join('')\n    ?.toUpperCase()\n    ?.slice(0, 2);\n\n  const getBackgroundColor = () => {\n    if (backgroundColor) {\n      return backgroundColor;\n    }\n    return AVATAR_COLORS[Math.floor(Math.random() * AVATAR_COLORS.length)];\n  };\n\n  return (\n    <div\n      className={`\n        se-design-avatar \n        flex items-center justify-center \n        rounded-full font-medium\n        ${onClick ? 'cursor-pointer' : 'cursor-default'}\n        ${className}\n      `}\n      onClick={onClick}\n      data-automation-id={automationId}\n      aria-hidden={ariaLabel ? undefined : true}\n      aria-label={ariaLabel}\n      style={{\n        width: size,\n        height: size,\n        minWidth: 20,\n        minHeight: 20,\n        backgroundColor: getBackgroundColor(),\n        color: textColor,\n        fontSize: `${size * 0.4}px`\n      }}\n    >\n      {initials}\n    </div>\n  );\n};\n"],"names":["React__default","AVATAR_COLORS","Avatar","size","text","textColor","backgroundColor","className","onClick","automationId","ariaLabel","initials","split","map","word","join","toUpperCase","slice","getBackgroundColor","Math","floor","random","length","React","createElement","undefined","style","width","height","minWidth","minHeight","color","fontSize"],"mappings":"AAaA,OAAAA,OAAA;AAAA,MAAMC,IAAgB,CACpB,0BACA,yBACA,2BACA,wBACA,yBAAyB,GAGdC,IAA0BA,CAAC;AAAA,EACtCC,MAAAA,IAAO;AAAA,EACPC,MAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,iBAAAA,IAAkB;AAAA,EAClBC,WAAAA,IAAY;AAAA,EACZC,SAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,WAAAA;AACF,MAAM;AACJ,QAAMC,IAAWP,GACbQ,MAAM,GAAG,GACTC,IAAKC,OAASA,EAAK,CAAC,CAAC,GACrBC,KAAK,EAAE,GACPC,eACAC,MAAM,GAAG,CAAC,GAERC,IAAqBA,MACrBZ,KAGGL,EAAckB,KAAKC,MAAMD,KAAKE,WAAWpB,EAAcqB,MAAM,CAAC;AAGvE,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEjB,WAAW;AAAA;AAAA;AAAA;AAAA,UAIPC,IAAU,mBAAmB,gBAAgB;AAAA,UAC7CD,CAAS;AAAA;AAAA,IAEbC,SAAAA;AAAAA,IACA,sBAAoBC;AAAAA,IACpB,eAAaC,IAAYe,SAAY;AAAA,IACrC,cAAYf;AAAAA,IACZgB,OAAO;AAAA,MACLC,OAAOxB;AAAAA,MACPyB,QAAQzB;AAAAA,MACR0B,UAAU;AAAA,MACVC,WAAW;AAAA,MACXxB,iBAAiBY,EAAAA;AAAAA,MACjBa,OAAO1B;AAAAA,MACP2B,UAAU,GAAG7B,IAAO,GAAG;AAAA,IAAA;AAAA,EACzB,GAECQ,CACE;AAET;"}

package/dist/index50.js

@@ -1,89 +1,152 @@
-import t from "react";
-import { Icon as u } from "./index6.js";
-import { Popover as v } from "./index19.js";
-import { MenuList as E } from "./index18.js";
+import t, { useState as C, useMemo as f, useEffect as D } from "react";
+import "./index3.js";
+import "./index4.js";
+import { Icon as w } from "./index6.js";
+import "./index73.js";
+import { useTabsA11y as O } from "./index74.js";
+import { MenuList as _ } from "./index18.js";
+import "./index9.js";
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+import "react-dom";
+import "./index17.js";
+import { Popover as $ } from "./index19.js";
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+import { TabButton as j } from "./index237.js";
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+import "./index61.js";
+/* empty css         */
+/* empty css         */
+import "./index65.js";
 /* empty css         */
 function c() {
-  return c = Object.assign ? Object.assign.bind() : function(a) {
-    for (var n = 1; n < arguments.length; n++) {
-      var i = arguments[n];
-      for (var o in i) ({}).hasOwnProperty.call(i, o) && (a[o] = i[o]);
+  return c = Object.assign ? Object.assign.bind() : function(i) {
+    for (var o = 1; o < arguments.length; o++) {
+      var n = arguments[o];
+      for (var s in n) ({}).hasOwnProperty.call(n, s) && (i[s] = n[s]);
     }
-    return a;
+    return i;
   }, c.apply(null, arguments);
 }
-const s = {
-  container: "se-design-breadcrumbs flex items-center",
-  itemLabel: "se-design-breadcrumbs-item-label inline-flex items-center w-fit"
-}, P = ({
-  crumbs: a,
-  onCrumbClick: n,
-  className: i = "",
-  ariaLabel: o = "Breadcrumb",
-  headingLevel: g = 1
+const Se = ({
+  defaultActiveNavigationItem: i,
+  navigationItems: o,
+  onNavigationItemChange: n,
+  isCompactView: s = !1,
+  keyboardActivationMode: x = "automatic",
+  orientation: y = "horizontal",
+  ariaLabel: E = "Sections",
+  ariaLabelledBy: P,
+  idBase: h = ""
 }) => {
-  if (a?.length === 1) {
-    const e = `h${g}`;
-    return /* @__PURE__ */ t.createElement("div", {
-      className: `${s.container} ${i}`,
-      "data-automation-id": "breadcrumbs-container"
-    }, /* @__PURE__ */ t.createElement(e, {
-      className: `${s.itemLabel} single-crumb`
-    }, a[0].label));
-  }
-  const m = a?.length > 3, d = m ? a?.slice(-2) : a, b = m ? a?.slice(0, -2) : [], l = (e) => e === d?.length - 1, f = (e) => l(e) ? `${s.itemLabel} highlighted-crumb` : `${s.itemLabel} unhighlighted-crumb`;
-  return /* @__PURE__ */ t.createElement("nav", {
-    className: `${s.container} ${i}`,
-    "aria-label": o,
-    "data-automation-id": "breadcrumbs-container"
-  }, b?.length > 0 && /* @__PURE__ */ t.createElement(v, {
-    className: "se-design-overflow-breadcrumbs",
+  const N = i || o[0]?.id || "", [l, m] = C(N), v = f(() => o.filter((e) => !e.disabled).map((e) => e.id), [o]), {
+    getTabProps: T,
+    setFocusedTabId: d,
+    handleKeyDown: k,
+    getPanelProps: b,
+    getTabListProps: F
+  } = O({
+    itemIds: v,
+    orientation: y,
+    activeItem: l,
+    idBase: h
+  });
+  D(() => {
+    i && (m(i), d(i));
+  }, [i, d]);
+  const u = (e) => {
+    e?.disabled || (m(e?.id), n?.(e?.id));
+  }, S = (e) => {
+    const r = o.find((a) => a.id === e);
+    !r || r.disabled || (m(e), n?.(e));
+  }, g = f(() => o.map((e) => {
+    const r = e.id === l, a = r && e.panelHasFocusableContent === !1 ? 0 : void 0;
+    return /* @__PURE__ */ t.createElement("div", c({
+      key: e.id
+    }, b(e.id), {
+      hidden: !r,
+      tabIndex: a,
+      className: `navigation-item-content ${r ? "block" : "hidden"}`
+    }), r && e?.renderNavigationItemContent?.(e));
+  }), [o, l, b]), B = o.find((e) => e.id === l);
+  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", c({
+    className: "se-design-navigation-bar flex items-center gap-4",
+    "data-automation-id": "navigation-bar-container"
+  }, F({
+    ariaLabel: E,
+    ariaLabelledBy: P
+  })), !s && o.map((e) => {
+    const r = l === e.id, a = e.disabled, p = T(e.id);
+    return /* @__PURE__ */ t.createElement(j, {
+      key: e.id,
+      ref: p.ref,
+      tabIndex: p.tabIndex,
+      id: p.id,
+      label: e.label,
+      isSelected: r,
+      isDisabled: a,
+      panelId: p["aria-controls"],
+      onClick: () => u(e),
+      onFocus: () => {
+        p.onFocus(), x === "automatic" && !a && S(e.id);
+      },
+      onKeyDown: k,
+      className: `text-base ${a ? "text-[var(--color-gray-400)] cursor-not-allowed" : r ? "text-[var(--color-gray-900)] font-bold hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer"} focus-outline rounded-[6px]`,
+      automationId: `navigation-item-${e.id}`
+    });
+  }), s && /* @__PURE__ */ t.createElement($, {
+    className: "navigation-bar-popover",
     position: "bottom-left",
     noBorder: !0,
-    ariaLabel: "Show more breadcrumbs",
     renderPopoverSrcElement: ({
       displayPopover: e
     }) => /* @__PURE__ */ t.createElement("div", {
-      className: `overflow-breadcrumbs-src-element px-1.5 py-1.5 rounded-md hover:cursor-pointer ${e ? "bg-[var(--color-blue-200)]" : ""}`,
-      "data-automation-id": "breadcrumbs-kebab-menu"
-    }, /* @__PURE__ */ t.createElement(u, {
-      name: "kebab-menu"
+      className: "navigation-bar-popover-src-element flex items-center gap-1 cursor-pointer"
+    }, /* @__PURE__ */ t.createElement("label", {
+      className: "font-semibold cursor-pointer"
+    }, B?.label), /* @__PURE__ */ t.createElement(w, {
+      name: "chevron",
+      rotation: e ? "180" : "0"
     })),
     renderPopoverContents: ({
       closePopoverCb: e
-    }) => /* @__PURE__ */ t.createElement(E, {
-      items: b.map((r) => ({
-        id: String(r?.id),
-        label: r?.label,
+    }) => /* @__PURE__ */ t.createElement(_, {
+      items: o.map((r) => ({
+        id: r.id,
+        label: r.label,
         onClick: () => {
-          n?.(r), e();
+          u(r), e();
         }
       }))
     })
-  }), /* @__PURE__ */ t.createElement("ol", {
-    className: "se-design-breadcrumbs-list inline-flex items-center"
-  }, d?.map((e, r) => {
-    const p = l(r) ? "span" : "a";
-    return /* @__PURE__ */ t.createElement("li", {
-      key: e?.id,
-      className: "se-design-breadcrumbs-item inline-flex items-center w-fit text-xl"
-    }, (r > 0 || m) && /* @__PURE__ */ t.createElement(u, {
-      name: "chevron",
-      rotation: "270"
-    }), /* @__PURE__ */ t.createElement(p, c({}, l(r) ? {
-      "aria-current": "page"
-    } : {
-      href: e.href ?? "#",
-      onClick: (h) => {
-        e.href || h.preventDefault(), n?.(e);
-      }
-    }, {
-      className: `${f(r)}${l(r) ? "" : " cursor-pointer focus-outline"}`,
-      "data-automation-id": e?.automationId || `breadcrumbs-item-${r}`
-    }), e?.label));
-  })));
+  })), /* @__PURE__ */ t.createElement("div", {
+    className: "se-design-navigation-bar-content"
+  }, g));
 };
 export {
-  P as BreadCrumbs
+  Se as NavigationBar
 };
 //# sourceMappingURL=index50.js.map

package/dist/index50.js.map

@@ -1 +1 @@
-{"version":3,"file":"index50.js","sources":["../src/components/BreadCrumbs/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../Icon';\nimport { Popover } from '../Popover';\nimport { MenuList } from '../MenuList';\n\nimport './style.scss';\n\ninterface Crumb {\n  id: string | number;\n  label: string;\n  href?: string;\n  automationId?: string;\n}\n\nconst breadCrumbsClassNames = {\n  container: 'se-design-breadcrumbs flex items-center',\n  itemLabel: 'se-design-breadcrumbs-item-label inline-flex items-center w-fit',\n};\n\ninterface BreadCrumbsProps {\n  crumbs: Crumb[];\n  onCrumbClick?: (crumb: Crumb) => void;\n  className?: any;\n  /** Accessible name for the breadcrumb navigation landmark. Defaults to \"Breadcrumb\".  */\n  ariaLabel?: string;\n  /** Heading level to use when only a single crumb is provided. Defaults to 1. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ crumbs, onCrumbClick, className = '', ariaLabel = 'Breadcrumb', headingLevel = 1 }) => {\n  const isSingleCrumb = crumbs?.length === 1;\n\n  if (isSingleCrumb) {\n    const HeadingTag = `h${headingLevel}` as React.ElementType;\n    return (\n      <div className={`${breadCrumbsClassNames.container} ${className}`} data-automation-id=\"breadcrumbs-container\">\n        <HeadingTag className={`${breadCrumbsClassNames.itemLabel} single-crumb`}>\n          {crumbs[0].label}\n        </HeadingTag>\n      </div>\n    );\n  }\n\n  const shouldShowDropdown = crumbs?.length > 3;\n  const visibleCrumbs = shouldShowDropdown ? crumbs?.slice(-2) : crumbs;\n  const dropdownCrumbs = shouldShowDropdown ? crumbs?.slice(0, -2) : [];\n\n  const isCurrentPage = (index: number) => index === visibleCrumbs?.length - 1;\n\n  const getLabelClassNames = (index: number) => {\n    if (isCurrentPage(index)) {\n      return `${breadCrumbsClassNames.itemLabel} highlighted-crumb`;\n    }\n    return `${breadCrumbsClassNames.itemLabel} unhighlighted-crumb`;\n  };\n\n  return (\n    <nav className={`${breadCrumbsClassNames.container} ${className}`} aria-label={ariaLabel} data-automation-id=\"breadcrumbs-container\">\n      {dropdownCrumbs?.length > 0 && (\n        <Popover\n          className=\"se-design-overflow-breadcrumbs\"\n          position=\"bottom-left\"\n          noBorder\n          ariaLabel=\"Show more breadcrumbs\"\n          renderPopoverSrcElement={({ displayPopover }) => {\n            return (\n              <div\n                className={`overflow-breadcrumbs-src-element px-1.5 py-1.5 rounded-md hover:cursor-pointer ${\n                  displayPopover ? 'bg-[var(--color-blue-200)]' : ''\n                }`}\n                data-automation-id=\"breadcrumbs-kebab-menu\"\n              >\n                <Icon name=\"kebab-menu\" />\n              </div>\n            );\n          }}\n          renderPopoverContents={({ closePopoverCb }) => (\n            <MenuList\n              items={dropdownCrumbs.map((crumb) => ({\n                id: String(crumb?.id),\n                label: crumb?.label,\n                onClick: () => {\n                  onCrumbClick?.(crumb);\n                  closePopoverCb();\n                }\n              }))}\n            />\n          )}\n        />\n      )}\n      <ol className=\"se-design-breadcrumbs-list inline-flex items-center\">\n        {visibleCrumbs?.map((crumb, index) => {\n          const Tag = isCurrentPage(index) ? 'span' : 'a';// current page should not be clickable\n          return (\n            <li key={crumb?.id} className=\"se-design-breadcrumbs-item inline-flex items-center w-fit text-xl\">\n              {(index > 0 || shouldShowDropdown) && <Icon name=\"chevron\" rotation={'270'} />}\n              <Tag\n                {...(isCurrentPage(index)\n                  ? { 'aria-current': 'page' as const }\n                  : {\n                      href: crumb.href ?? '#',\n                      onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {\n                        if (!crumb.href) e.preventDefault();\n                        onCrumbClick?.(crumb);\n                      }\n                    })}\n                className={`${getLabelClassNames(index)}${!isCurrentPage(index) ? ' cursor-pointer focus-outline' : ''}`}\n                data-automation-id={crumb?.automationId || `breadcrumbs-item-${index}`}\n              >\n                {crumb?.label}\n              </Tag>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":["breadCrumbsClassNames","container","itemLabel","BreadCrumbs","crumbs","onCrumbClick","className","ariaLabel","headingLevel","length","HeadingTag","React","createElement","label","shouldShowDropdown","visibleCrumbs","slice","dropdownCrumbs","isCurrentPage","index","getLabelClassNames","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","Icon","name","renderPopoverContents","closePopoverCb","MenuList","items","map","crumb","id","String","onClick","Tag","key","rotation","_extends","href","e","preventDefault","automationId"],"mappings":";;;;;;;;;;;;;;AAcA,MAAMA,IAAwB;AAAA,EAC5BC,WAAW;AAAA,EACXC,WAAW;AACb,GAYaC,IAA0CA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,cAAAA;AAAAA,EAAcC,WAAAA,IAAY;AAAA,EAAIC,WAAAA,IAAY;AAAA,EAAcC,cAAAA,IAAe;AAAE,MAAM;AAG/I,MAFsBJ,GAAQK,WAAW,GAEtB;AACjB,UAAMC,IAAa,IAAIF,CAAY;AACnC,WACEG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MAAKN,WAAW,GAAGN,EAAsBC,SAAS,IAAIK,CAAS;AAAA,MAAI,sBAAmB;AAAA,IAAA,GACpFK,gBAAAA,EAAAC,cAACF,GAAU;AAAA,MAACJ,WAAW,GAAGN,EAAsBE,SAAS;AAAA,IAAA,GACtDE,EAAO,CAAC,EAAES,KACD,CACT;AAAA,EAET;AAEA,QAAMC,IAAqBV,GAAQK,SAAS,GACtCM,IAAgBD,IAAqBV,GAAQY,MAAM,EAAE,IAAIZ,GACzDa,IAAiBH,IAAqBV,GAAQY,MAAM,GAAG,EAAE,IAAI,CAAA,GAE7DE,IAAgBA,CAACC,MAAkBA,MAAUJ,GAAeN,SAAS,GAErEW,IAAqBA,CAACD,MACtBD,EAAcC,CAAK,IACd,GAAGnB,EAAsBE,SAAS,uBAEpC,GAAGF,EAAsBE,SAAS;AAG3C,SACES,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKN,WAAW,GAAGN,EAAsBC,SAAS,IAAIK,CAAS;AAAA,IAAI,cAAYC;AAAAA,IAAW,sBAAmB;AAAA,EAAA,GAC1GU,GAAgBR,SAAS,KACxBE,gBAAAA,EAAAC,cAACS,GAAO;AAAA,IACNf,WAAU;AAAA,IACVgB,UAAS;AAAA,IACTC,UAAQ;AAAA,IACRhB,WAAU;AAAA,IACViB,yBAAyBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MAExBd,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACEN,WAAW,kFACTmB,IAAiB,+BAA+B,EAAE;AAAA,MAEpD,sBAAmB;AAAA,IAAA,GAEnBd,gBAAAA,EAAAC,cAACc,GAAI;AAAA,MAACC,MAAK;AAAA,IAAA,CAAc,CACtB;AAAA,IAGTC,uBAAuBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MACxBlB,gBAAAA,EAAAC,cAACkB,GAAQ;AAAA,MACPC,OAAOd,EAAee,IAAKC,CAAAA,OAAW;AAAA,QACpCC,IAAIC,OAAOF,GAAOC,EAAE;AAAA,QACpBrB,OAAOoB,GAAOpB;AAAAA,QACduB,SAASA,MAAM;AACb/B,UAAAA,IAAe4B,CAAK,GACpBJ,EAAAA;AAAAA,QACF;AAAA,MAAA,EACA;AAAA,IAAA,CACH;AAAA,EAAA,CAEJ,GAEHlB,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAIN,WAAU;AAAA,EAAA,GACXS,GAAeiB,IAAI,CAACC,GAAOd,MAAU;AACpC,UAAMkB,IAAMnB,EAAcC,CAAK,IAAI,SAAS;AAC5C,WACER,gBAAAA,EAAAC,cAAA,MAAA;AAAA,MAAI0B,KAAKL,GAAOC;AAAAA,MAAI5B,WAAU;AAAA,IAAA,IAC1Ba,IAAQ,KAAKL,MAAuBH,gBAAAA,EAAAC,cAACc,GAAI;AAAA,MAACC,MAAK;AAAA,MAAUY,UAAU;AAAA,IAAA,CAAQ,GAC7E5B,gBAAAA,EAAAC,cAACyB,GAAGG,EAAA,IACGtB,EAAcC,CAAK,IACpB;AAAA,MAAE,gBAAgB;AAAA,IAAA,IAClB;AAAA,MACEsB,MAAMR,EAAMQ,QAAQ;AAAA,MACpBL,SAASA,CAACM,MAA2C;AACnD,QAAKT,EAAMQ,QAAMC,EAAEC,eAAAA,GACnBtC,IAAe4B,CAAK;AAAA,MACtB;AAAA,IAAA,GACD;AAAA,MACL3B,WAAW,GAAGc,EAAmBD,CAAK,CAAC,GAAID,EAAcC,CAAK,IAAsC,KAAlC,+BAAoC;AAAA,MACtG,sBAAoBc,GAAOW,gBAAgB,oBAAoBzB,CAAK;AAAA,IAAA,CAAG,GAEtEc,GAAOpB,KACL,CACH;AAAA,EAER,CAAC,CACC,CACD;AAET;"}
+{"version":3,"file":"index50.js","sources":["../src/components/NavigationBar/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState,useMemo, useEffect } from 'react';\nimport { Popover, MenuList, Icon } from 'src/components';\nimport { TabButton } from './TabButton';\nimport { useTabsA11y } from '../../utils/a11y';\n\nexport interface NavigationItemProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  panelHasFocusableContent?: boolean; // If false, the panel itself will be tabbable when active\n  renderNavigationItemContent?: (navigationItem: NavigationItemProps) => ReactNode;\n}\n\ninterface NavigationBarProps {\n  defaultActiveNavigationItem?: string;\n  navigationItems: NavigationItemProps[];\n  isCompactView?: boolean;\n  onNavigationItemChange?: (navigationItemId: string) => void;\n  keyboardActivationMode?: 'automatic' | 'manual'; //manual: arrow keys move focus only; Enter/Space activates the focused tab\n  orientation?: 'horizontal' | 'vertical'; // required for aria and arrow shortcuts\n  ariaLabel?: string; // Used when ariaLabelledBy is not provided\n  ariaLabelledBy?: string; // ID of element that labels this tablist (preferred over ariaLabel when visible label exists)\n  idBase?: string; //optional ID namespace to avoid collisions\n}\n\nexport const NavigationBar: FC<NavigationBarProps> = ({\n  defaultActiveNavigationItem,\n  navigationItems,\n  onNavigationItemChange,\n  isCompactView = false,\n  keyboardActivationMode = 'automatic',\n  orientation = 'horizontal',\n  ariaLabel = 'Sections',\n  ariaLabelledBy,\n  idBase = ''\n}) => {\n  const defaultNavigationItemId = defaultActiveNavigationItem || navigationItems[0]?.id || '';\n  const [activeNavigationItem, setActiveNavigationItem] = useState<string>(defaultNavigationItemId);\n\n  // Exclude disabled tabs from roving focus (keeps native disabled buttons, avoids focus-on-disabled).\n  const itemIds = useMemo(\n    () => navigationItems.filter((item) => !item.disabled).map((item) => item.id),\n    [navigationItems]\n  );\n\n  // Hook for managing Tabs (NavigationBar) focus and ARIA props.\n  const { getTabProps, setFocusedTabId, handleKeyDown, getPanelProps, getTabListProps } = useTabsA11y({\n    itemIds,\n    orientation,\n    activeItem: activeNavigationItem,\n    idBase\n  });\n\n  useEffect(() => {\n    if (defaultActiveNavigationItem) {\n      setActiveNavigationItem(defaultActiveNavigationItem);\n      setFocusedTabId(defaultActiveNavigationItem);\n    }\n  }, [defaultActiveNavigationItem, setFocusedTabId]);\n\n  const handleNavigationItemClick = (navigationItem: NavigationItemProps) => {\n    if (navigationItem?.disabled) return;\n    setActiveNavigationItem(navigationItem?.id);\n    onNavigationItemChange?.(navigationItem?.id);\n  };\n\n  const activateTabById = (id: string) => {\n    const item = navigationItems.find((i) => i.id === id);\n    if (!item || item.disabled) return;\n    setActiveNavigationItem(id);\n    onNavigationItemChange?.(id);\n  };\n\n  const renderPanels = useMemo(() => {\n    return navigationItems.map((navigationItem) => {\n      const isSelected = navigationItem.id === activeNavigationItem;\n      const panelTabIndex = isSelected && navigationItem.panelHasFocusableContent === false ? 0 : undefined;\n\n      return (\n        <div\n          key={navigationItem.id}\n          {...getPanelProps(navigationItem.id)}\n          hidden={!isSelected}\n          tabIndex={panelTabIndex}\n          className={`navigation-item-content ${isSelected ? 'block' : 'hidden'}`}\n        >\n          {isSelected && navigationItem?.renderNavigationItemContent?.(navigationItem)}\n        </div>\n      );\n    });\n  }, [navigationItems, activeNavigationItem, getPanelProps]);\n\n  const activeNavigationItemData = navigationItems.find((item) => item.id === activeNavigationItem);\n\n  return (\n    <>\n      <div\n        className=\"se-design-navigation-bar flex items-center gap-4\"\n        data-automation-id=\"navigation-bar-container\"\n        {...getTabListProps({ ariaLabel, ariaLabelledBy })}\n      >\n        {!isCompactView && navigationItems.map((navigationItem) => {\n          const isSelected = activeNavigationItem === navigationItem.id;\n          const isDisabled = navigationItem.disabled;\n\n          const tabProps = getTabProps(navigationItem.id);\n\n          return (\n            <TabButton\n              key={navigationItem.id}\n              ref={tabProps.ref as (el: HTMLButtonElement | null) => void}\n              tabIndex={tabProps.tabIndex}\n              id={tabProps.id}\n              label={navigationItem.label}\n              isSelected={isSelected}\n              isDisabled={isDisabled}\n              panelId={tabProps['aria-controls']}\n              onClick={() => handleNavigationItemClick(navigationItem)}\n              onFocus={() => {\n                tabProps.onFocus();\n                if (keyboardActivationMode === 'automatic' && !isDisabled) {\n                  activateTabById(navigationItem.id);\n                }\n              }}\n              onKeyDown={handleKeyDown}\n              className={`text-base ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isSelected\n                  ? 'text-[var(--color-gray-900)] font-bold hover:cursor-pointer'\n                  : 'text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer'\n              } focus-outline rounded-[6px]`}\n              automationId={`navigation-item-${navigationItem.id}`}\n            />\n          );\n        })}\n        {isCompactView && (\n          <Popover\n            className=\"navigation-bar-popover\"\n            position=\"bottom-left\"\n            noBorder\n            renderPopoverSrcElement={({ displayPopover }) => (\n              <div className=\"navigation-bar-popover-src-element flex items-center gap-1 cursor-pointer\">\n                <label className=\"font-semibold cursor-pointer\">{activeNavigationItemData?.label}</label>\n                <Icon name=\"chevron\" rotation={displayPopover ? '180' : '0'} />\n              </div>\n            )}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <MenuList items={navigationItems.map((item) => ({\n                id: item.id,\n                label: item.label,\n                onClick: () => {\n                  handleNavigationItemClick(item);\n                  closePopoverCb();\n                }\n              }))}\n              />\n            )}\n          />\n        )}\n      </div>\n\n      <div className=\"se-design-navigation-bar-content\">\n        {renderPanels}\n      </div>\n    </>\n  );\n};\n"],"names":["NavigationBar","defaultActiveNavigationItem","navigationItems","onNavigationItemChange","isCompactView","keyboardActivationMode","orientation","ariaLabel","ariaLabelledBy","idBase","defaultNavigationItemId","id","activeNavigationItem","setActiveNavigationItem","useState","itemIds","useMemo","filter","item","disabled","map","getTabProps","setFocusedTabId","handleKeyDown","getPanelProps","getTabListProps","useTabsA11y","activeItem","useEffect","handleNavigationItemClick","navigationItem","activateTabById","find","i","renderPanels","isSelected","panelTabIndex","panelHasFocusableContent","undefined","React","createElement","_extends","key","hidden","tabIndex","className","renderNavigationItemContent","activeNavigationItemData","Fragment","isDisabled","tabProps","TabButton","ref","label","panelId","onClick","onFocus","onKeyDown","automationId","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","Icon","name","rotation","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":"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"}