se-design 1.0.68-devnav → 1.0.69-dev

package/dist/index48.js

@@ -1,8 +1,9 @@
-import o, { useState as F, useMemo as y, useEffect as g } from "react";
+import o, { useState as C, useMemo as y, useEffect as D } from "react";
 import "./index3.js";
 import { Icon as w } from "./index5.js";
 import { getA11yNameAttributes as O } from "./index70.js";
 import { MenuList as _ } from "./index17.js";
+import "./index8.js";
 /* empty css         */
 /* empty css         */
 import "react-dom";
@@ -38,47 +39,47 @@ import "./index59.js";
 /* empty css         */
 import "./index63.js";
 /* empty css         */
-function m() {
-  return m = Object.assign ? Object.assign.bind() : function(a) {
+function p() {
+  return p = 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);
+  }, p.apply(null, arguments);
 }
-const ke = ({
+const ve = ({
   defaultActiveNavigationItem: a,
   navigationItems: t,
   onNavigationItemChange: n,
   isCompactView: l = !1,
   keyboardActivationMode: E = "automatic",
-  orientation: b = "horizontal",
+  orientation: m = "horizontal",
   ariaLabel: N = "Sections",
   ariaLabelledBy: h,
   idBase: P = ""
 }) => {
-  const T = a || t[0]?.id || "", [s, c] = F(T), k = y(() => t.filter((e) => !e.disabled).map((e) => e.id), [t]), {
+  const T = a || t[0]?.id || "", [s, d] = C(T), k = y(() => t.filter((e) => !e.disabled).map((e) => e.id), [t]), {
     getTabProps: v,
-    setFocusedTabId: p,
-    handleKeyDown: S,
+    setFocusedTabId: b,
+    handleKeyDown: F,
     getPanelId: u,
     getTabId: f
   } = K({
     itemIds: k,
-    orientation: b,
+    orientation: m,
     activeNavigationItem: s,
     idBase: P
   });
-  g(() => {
-    a && (c(a), p(a));
-  }, [a, p]);
+  D(() => {
+    a && (d(a), b(a));
+  }, [a, b]);
   const x = (e) => {
-    e?.disabled || (c(e?.id), n?.(e?.id));
-  }, B = (e) => {
+    e?.disabled || (d(e?.id), n?.(e?.id));
+  }, S = (e) => {
     const r = t.find((i) => i.id === e);
-    !r || r.disabled || (c(e), n?.(e));
-  }, C = y(() => t.map((e) => {
+    !r || r.disabled || (d(e), n?.(e));
+  }, g = 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,
@@ -89,31 +90,31 @@ const ke = ({
       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({
+  }), [t, s, u, f]), B = t.find((e) => e.id === s);
+  return /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", p({
     className: "se-design-navigation-bar flex items-center gap-4",
     "data-automation-id": "navigation-bar-container",
     role: "tablist",
-    "aria-orientation": b
+    "aria-orientation": m
   }, O({
     ariaLabel: N,
     ariaLabelledBy: h
   })), !l && t.map((e) => {
-    const r = s === e.id, i = e.disabled, d = v(e.id);
+    const r = s === e.id, i = e.disabled, c = v(e.id);
     return /* @__PURE__ */ o.createElement(j, {
       key: e.id,
-      ref: d.ref,
-      tabIndex: d.tabIndex,
-      id: d.id,
+      ref: c.ref,
+      tabIndex: c.tabIndex,
+      id: c.id,
       label: e.label,
       isSelected: r,
       isDisabled: i,
-      panelId: d["aria-controls"],
+      panelId: c["aria-controls"],
       onClick: () => x(e),
       onFocus: () => {
-        p(e.id), E === "automatic" && !i && B(e.id);
+        c.onFocus(), E === "automatic" && !i && S(e.id);
       },
-      onKeyDown: S,
+      onKeyDown: F,
       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}`
     });
@@ -127,7 +128,7 @@ const ke = ({
       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, {
+    }, B?.label), /* @__PURE__ */ o.createElement(w, {
       name: "chevron",
       rotation: e ? "180" : "0"
     })),
@@ -144,9 +145,9 @@ const ke = ({
     })
   })), /* @__PURE__ */ o.createElement("div", {
     className: "se-design-navigation-bar-content"
-  }, C));
+  }, g));
 };
 export {
-  ke as NavigationBar
+  ve as NavigationBar
 };
 //# sourceMappingURL=index48.js.map

package/dist/index48.js.map

@@ -1 +1 @@
-{"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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"}
+{"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                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","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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"}