se-design 1.0.59 → 1.0.61-dev

package/dist/index47.js.map

@@ -1 +1 @@
-{"version":3,"file":"index47.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 './useTabsA11y';\nimport { getA11yNameAttributes } 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, getPanelId, getTabId } = useTabsA11y({\n    itemIds,\n    orientation,\n    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          id={getPanelId(navigationItem.id)}\n          role=\"tabpanel\"\n          aria-labelledby={getTabId(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, getPanelId, getTabId]);\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        role=\"tablist\"\n        aria-orientation={orientation}\n        {...getA11yNameAttributes({\n          ariaLabel,\n          ariaLabelledBy\n        })}\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                setFocusedTabId(navigationItem.id);\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","getPanelId","getTabId","useTabsA11y","useEffect","handleNavigationItemClick","navigationItem","activateTabById","find","i","renderPanels","isSelected","panelTabIndex","panelHasFocusableContent","undefined","React","createElement","key","role","hidden","tabIndex","className","renderNavigationItemContent","activeNavigationItemData","Fragment","_extends","getA11yNameAttributes","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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"}
+{"version":3,"file":"index47.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};\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}) => {\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      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","initials","split","map","word","join","toUpperCase","slice","getBackgroundColor","Math","floor","random","length","React","createElement","style","width","height","minWidth","minHeight","color","fontSize"],"mappings":"AAYA,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;AACjB,MAAM;AACJ,QAAMC,IAAWN,GACbO,MAAM,GAAG,GACTC,IAAKC,OAASA,EAAK,CAAC,CAAC,GACrBC,KAAK,EAAE,GACPC,eACAC,MAAM,GAAG,CAAC,GAERC,IAAqBA,MACrBX,KAGGL,EAAciB,KAAKC,MAAMD,KAAKE,WAAWnB,EAAcoB,MAAM,CAAC;AAGvE,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEhB,WAAW;AAAA;AAAA;AAAA;AAAA,UAIPC,IAAU,mBAAmB,gBAAgB;AAAA,UAC7CD,CAAS;AAAA;AAAA,IAEbC,SAAAA;AAAAA,IACA,sBAAoBC;AAAAA,IACpBe,OAAO;AAAA,MACLC,OAAOtB;AAAAA,MACPuB,QAAQvB;AAAAA,MACRwB,UAAU;AAAA,MACVC,WAAW;AAAA,MACXtB,iBAAiBW,EAAAA;AAAAA,MACjBY,OAAOxB;AAAAA,MACPyB,UAAU,GAAG3B,IAAO,GAAG;AAAA,IAAA;AAAA,EACzB,GAECO,CACE;AAET;"}

package/dist/index48.js

@@ -1,59 +1,152 @@
-import r from "react";
-import { Icon as s } from "./index5.js";
-import { Popover as d } from "./index17.js";
-import { MenuList as b } from "./index16.js";
-/* empty css         */
-const v = ({
-  crumbs: a,
-  onCrumbClick: o,
-  className: m
+import o, { useState as F, useMemo as y, useEffect as g } from "react";
+import "./index3.js";
+import { Icon as w } from "./index5.js";
+import { getA11yNameAttributes as O } from "./index69.js";
+import { MenuList as _ } from "./index17.js";
+/* empty css         */
+/* empty css         */
+import "react-dom";
+import "./index16.js";
+import { Popover as $ } from "./index18.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         */
+import { TabButton as j } from "./index211.js";
+import { useTabsA11y as K } from "./index212.js";
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+import "./index59.js";
+/* empty css         */
+/* empty css         */
+import "./index63.js";
+/* empty css         */
+function m() {
+  return m = Object.assign ? Object.assign.bind() : function(a) {
+    for (var t = 1; t < arguments.length; t++) {
+      var n = arguments[t];
+      for (var l in n) ({}).hasOwnProperty.call(n, l) && (a[l] = n[l]);
+    }
+    return a;
+  }, m.apply(null, arguments);
+}
+const ke = ({
+  defaultActiveNavigationItem: a,
+  navigationItems: t,
+  onNavigationItemChange: n,
+  isCompactView: l = !1,
+  keyboardActivationMode: E = "automatic",
+  orientation: b = "horizontal",
+  ariaLabel: N = "Sections",
+  ariaLabelledBy: h,
+  idBase: P = ""
 }) => {
-  const n = a?.length > 3, i = n ? a?.slice(-2) : a, l = n ? a?.slice(0, -2) : [], c = (t) => {
-    let e = "se-design-breadcrumbs-item-label inline-flex items-center w-fit";
-    return i?.length === 1 ? `${e} single-crumb` : t === i?.length - 1 ? `${e} highlighted-crumb` : `${e} cursor-pointer unhighlighted-crumb`;
-  };
-  return /* @__PURE__ */ r.createElement("div", {
-    className: `se-design-breadcrumbs flex items-center ${m}`,
-    "aria-label": "Breadcrumb",
-    "data-automation-id": "breadcrumbs-container"
-  }, l?.length > 0 && /* @__PURE__ */ r.createElement(d, {
-    className: "se-design-overflow-breadcrumbs",
+  const T = a || t[0]?.id || "", [s, c] = F(T), k = y(() => t.filter((e) => !e.disabled).map((e) => e.id), [t]), {
+    getTabProps: v,
+    setFocusedTabId: p,
+    handleKeyDown: S,
+    getPanelId: u,
+    getTabId: f
+  } = K({
+    itemIds: k,
+    orientation: b,
+    activeNavigationItem: s,
+    idBase: P
+  });
+  g(() => {
+    a && (c(a), p(a));
+  }, [a, p]);
+  const x = (e) => {
+    e?.disabled || (c(e?.id), n?.(e?.id));
+  }, B = (e) => {
+    const r = t.find((i) => i.id === e);
+    !r || r.disabled || (c(e), n?.(e));
+  }, C = y(() => t.map((e) => {
+    const r = e.id === s, i = r && e.panelHasFocusableContent === !1 ? 0 : void 0;
+    return /* @__PURE__ */ o.createElement("div", {
+      key: e.id,
+      id: u(e.id),
+      role: "tabpanel",
+      "aria-labelledby": f(e.id),
+      hidden: !r,
+      tabIndex: i,
+      className: `navigation-item-content ${r ? "block" : "hidden"}`
+    }, r && e?.renderNavigationItemContent?.(e));
+  }), [t, s, u, f]), D = t.find((e) => e.id === s);
+  return /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", m({
+    className: "se-design-navigation-bar flex items-center gap-4",
+    "data-automation-id": "navigation-bar-container",
+    role: "tablist",
+    "aria-orientation": b
+  }, O({
+    ariaLabel: N,
+    ariaLabelledBy: h
+  })), !l && t.map((e) => {
+    const r = s === e.id, i = e.disabled, d = v(e.id);
+    return /* @__PURE__ */ o.createElement(j, {
+      key: e.id,
+      ref: d.ref,
+      tabIndex: d.tabIndex,
+      id: d.id,
+      label: e.label,
+      isSelected: r,
+      isDisabled: i,
+      panelId: d["aria-controls"],
+      onClick: () => x(e),
+      onFocus: () => {
+        p(e.id), E === "automatic" && !i && B(e.id);
+      },
+      onKeyDown: S,
+      className: `text-base ${i ? "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}`
+    });
+  }), l && /* @__PURE__ */ o.createElement($, {
+    className: "navigation-bar-popover",
     position: "bottom-left",
     noBorder: !0,
     renderPopoverSrcElement: ({
-      displayPopover: t
-    }) => /* @__PURE__ */ r.createElement("div", {
-      className: `overflow-breadcrumbs-src-element px-1.5 py-1.5 rounded-md hover:cursor-pointer ${t ? "bg-[var(--color-blue-200)]" : ""}`,
-      "data-automation-id": "breadcrumbs-kebab-menu"
-    }, /* @__PURE__ */ r.createElement(s, {
-      name: "kebab-menu"
+      displayPopover: e
+    }) => /* @__PURE__ */ o.createElement("div", {
+      className: "navigation-bar-popover-src-element flex items-center gap-1 cursor-pointer"
+    }, /* @__PURE__ */ o.createElement("label", {
+      className: "font-semibold cursor-pointer"
+    }, D?.label), /* @__PURE__ */ o.createElement(w, {
+      name: "chevron",
+      rotation: e ? "180" : "0"
     })),
     renderPopoverContents: ({
-      closePopoverCb: t
-    }) => /* @__PURE__ */ r.createElement(b, {
-      items: l.map((e) => ({
-        id: String(e?.id),
-        label: e?.label,
+      closePopoverCb: e
+    }) => /* @__PURE__ */ o.createElement(_, {
+      items: t.map((r) => ({
+        id: r.id,
+        label: r.label,
         onClick: () => {
-          o?.(e), t();
+          x(r), e();
         }
       }))
     })
-  }), /* @__PURE__ */ r.createElement("div", {
-    className: "se-design-breadcrumbs-list inline-flex items-center"
-  }, i?.map((t, e) => /* @__PURE__ */ r.createElement("div", {
-    key: t?.id,
-    className: "se-design-breadcrumbs-item inline-flex items-center w-fit text-xl"
-  }, (e > 0 || n) && /* @__PURE__ */ r.createElement(s, {
-    name: "chevron",
-    rotation: "270"
-  }), /* @__PURE__ */ r.createElement("p", {
-    onClick: () => o?.(t),
-    className: c(e),
-    "data-automation-id": t?.automationId || `breadcrumbs-item-${e}`
-  }, t?.label)))));
+  })), /* @__PURE__ */ o.createElement("div", {
+    className: "se-design-navigation-bar-content"
+  }, C));
 };
 export {
-  v as BreadCrumbs
+  ke as NavigationBar
 };
 //# sourceMappingURL=index48.js.map

package/dist/index48.js.map

@@ -1 +1 @@
-{"version":3,"file":"index48.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  automationId?: string;\n}\n\ninterface BreadCrumbsProps {\n  crumbs: Crumb[];\n  onCrumbClick?: (crumb: Crumb) => void;\n  className?: any;\n}\n\nexport const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ crumbs, onCrumbClick, className }) => {\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 getLabelClassNames = (index: number) => {\n    let className = 'se-design-breadcrumbs-item-label inline-flex items-center w-fit';\n    if (visibleCrumbs?.length === 1) {\n      return `${className} single-crumb`;\n    }\n\n    if (index === visibleCrumbs?.length - 1) {\n      return `${className} highlighted-crumb`;\n    }\n\n    return `${className} cursor-pointer unhighlighted-crumb`;\n  };\n\n  return (\n    <div className={`se-design-breadcrumbs flex items-center ${className}`} aria-label=\"Breadcrumb\" data-automation-id=\"breadcrumbs-container\">\n      {dropdownCrumbs?.length > 0 && (\n        <Popover\n          className=\"se-design-overflow-breadcrumbs\"\n          position=\"bottom-left\"\n          noBorder\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      <div className=\"se-design-breadcrumbs-list inline-flex items-center\">\n        {visibleCrumbs?.map((crumb, index) => (\n          <div 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            <p onClick={() => onCrumbClick?.(crumb)} className={getLabelClassNames(index)} data-automation-id={crumb?.automationId || `breadcrumbs-item-${index}`}>\n              {crumb?.label}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["BreadCrumbs","crumbs","onCrumbClick","className","shouldShowDropdown","length","visibleCrumbs","slice","dropdownCrumbs","getLabelClassNames","index","React","createElement","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","Icon","name","renderPopoverContents","closePopoverCb","MenuList","items","map","crumb","id","String","label","onClick","key","rotation","automationId"],"mappings":";;;;;AAmBO,MAAMA,IAA0CA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,cAAAA;AAAAA,EAAcC,WAAAA;AAAU,MAAM;AAC9F,QAAMC,IAAqBH,GAAQI,SAAS,GACtCC,IAAgBF,IAAqBH,GAAQM,MAAM,EAAE,IAAIN,GACzDO,IAAiBJ,IAAqBH,GAAQM,MAAM,GAAG,EAAE,IAAI,CAAA,GAE7DE,IAAqBA,CAACC,MAAkB;AAC5C,QAAIP,IAAY;AAChB,WAAIG,GAAeD,WAAW,IACrB,GAAGF,CAAS,kBAGjBO,MAAUJ,GAAeD,SAAS,IAC7B,GAAGF,CAAS,uBAGd,GAAGA,CAAS;AAAA,EACrB;AAEA,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAW,2CAA2CA,CAAS;AAAA,IAAI,cAAW;AAAA,IAAa,sBAAmB;AAAA,EAAA,GAChHK,GAAgBH,SAAS,KACxBM,gBAAAA,EAAAC,cAACC,GAAO;AAAA,IACNV,WAAU;AAAA,IACVW,UAAS;AAAA,IACTC,UAAQ;AAAA,IACRC,yBAAyBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MAExBN,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACET,WAAW,kFACTc,IAAiB,+BAA+B,EAAE;AAAA,MAEpD,sBAAmB;AAAA,IAAA,GAEnBN,gBAAAA,EAAAC,cAACM,GAAI;AAAA,MAACC,MAAK;AAAA,IAAA,CAAc,CACtB;AAAA,IAGTC,uBAAuBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MACxBV,gBAAAA,EAAAC,cAACU,GAAQ;AAAA,MACPC,OAAOf,EAAegB,IAAKC,CAAAA,OAAW;AAAA,QACpCC,IAAIC,OAAOF,GAAOC,EAAE;AAAA,QACpBE,OAAOH,GAAOG;AAAAA,QACdC,SAASA,MAAM;AACb3B,UAAAA,IAAeuB,CAAK,GACpBJ,EAAAA;AAAAA,QACF;AAAA,MAAA,EACA;AAAA,IAAA,CACH;AAAA,EAAA,CAEJ,GAEHV,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAU;AAAA,EAAA,GACZG,GAAekB,IAAI,CAACC,GAAOf,MAC1BC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKkB,KAAKL,GAAOC;AAAAA,IAAIvB,WAAU;AAAA,EAAA,IAC3BO,IAAQ,KAAKN,MAAuBO,gBAAAA,EAAAC,cAACM,GAAI;AAAA,IAACC,MAAK;AAAA,IAAUY,UAAU;AAAA,EAAA,CAAQ,GAC7EpB,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IAAGiB,SAASA,MAAM3B,IAAeuB,CAAK;AAAA,IAAGtB,WAAWM,EAAmBC,CAAK;AAAA,IAAG,sBAAoBe,GAAOO,gBAAgB,oBAAoBtB,CAAK;AAAA,EAAA,GAChJe,GAAOG,KACP,CACA,CACN,CACE,CACF;AAET;"}
+{"version":3,"file":"index48.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 './useTabsA11y';\nimport { getA11yNameAttributes } 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, getPanelId, getTabId } = useTabsA11y({\n    itemIds,\n    orientation,\n    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          id={getPanelId(navigationItem.id)}\n          role=\"tabpanel\"\n          aria-labelledby={getTabId(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, getPanelId, getTabId]);\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        role=\"tablist\"\n        aria-orientation={orientation}\n        {...getA11yNameAttributes({\n          ariaLabel,\n          ariaLabelledBy\n        })}\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                setFocusedTabId(navigationItem.id);\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","getPanelId","getTabId","useTabsA11y","useEffect","handleNavigationItemClick","navigationItem","activateTabById","find","i","renderPanels","isSelected","panelTabIndex","panelHasFocusableContent","undefined","React","createElement","key","role","hidden","tabIndex","className","renderNavigationItemContent","activeNavigationItemData","Fragment","_extends","getA11yNameAttributes","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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"}