se-design 1.0.77 → 1.0.78-dev1

package/dist/index259.js

@@ -1,5 +1,55 @@
-var e = {};
+import { __require as E } from "./index257.js";
+import { __require as _ } from "./index258.js";
+var f, v;
+function P() {
+  if (v) return f;
+  v = 1;
+  var o = function() {
+  };
+  if (process.env.NODE_ENV !== "production") {
+    var y = E(), t = {}, d = _();
+    o = function(n) {
+      var a = "Warning: " + n;
+      typeof console < "u" && console.error(a);
+      try {
+        throw new Error(a);
+      } catch {
+      }
+    };
+  }
+  function u(n, a, i, s, c) {
+    if (process.env.NODE_ENV !== "production") {
+      for (var e in n)
+        if (d(n, e)) {
+          var r;
+          try {
+            if (typeof n[e] != "function") {
+              var h = Error(
+                (s || "React class") + ": " + i + " type `" + e + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof n[e] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
+              );
+              throw h.name = "Invariant Violation", h;
+            }
+            r = n[e](a, e, s, i, null, y);
+          } catch (l) {
+            r = l;
+          }
+          if (r && !(r instanceof Error) && o(
+            (s || "React class") + ": type specification of " + i + " `" + e + "` is invalid; the type checker function must return `null` or an `Error` but returned a " + typeof r + ". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."
+          ), r instanceof Error && !(r.message in t)) {
+            t[r.message] = !0;
+            var p = c ? c() : "";
+            o(
+              "Failed " + i + " type: " + r.message + (p ?? "")
+            );
+          }
+        }
+    }
+  }
+  return u.resetWarningCache = function() {
+    process.env.NODE_ENV !== "production" && (t = {});
+  }, f = u, f;
+}
 export {
-  e as __exports
+  P as __require
 };
 //# sourceMappingURL=index259.js.map

package/dist/index259.js.map

@@ -1 +1 @@
-{"version":3,"file":"index259.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index259.js","sources":["../node_modules/prop-types/checkPropTypes.js"],"sourcesContent":["/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nvar printWarning = function() {};\n\nif (process.env.NODE_ENV !== 'production') {\n  var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');\n  var loggedTypeFailures = {};\n  var has = require('./lib/has');\n\n  printWarning = function(text) {\n    var message = 'Warning: ' + text;\n    if (typeof console !== 'undefined') {\n      console.error(message);\n    }\n    try {\n      // --- Welcome to debugging React ---\n      // This error was thrown as a convenience so that you can use this stack\n      // to find the callsite that caused this warning to fire.\n      throw new Error(message);\n    } catch (x) { /**/ }\n  };\n}\n\n/**\n * Assert that the values match with the type specs.\n * Error messages are memorized and will only be shown once.\n *\n * @param {object} typeSpecs Map of name to a ReactPropType\n * @param {object} values Runtime values that need to be type-checked\n * @param {string} location e.g. \"prop\", \"context\", \"child context\"\n * @param {string} componentName Name of the component for error messages.\n * @param {?Function} getStack Returns the component stack.\n * @private\n */\nfunction checkPropTypes(typeSpecs, values, location, componentName, getStack) {\n  if (process.env.NODE_ENV !== 'production') {\n    for (var typeSpecName in typeSpecs) {\n      if (has(typeSpecs, typeSpecName)) {\n        var error;\n        // Prop type validation may throw. In case they do, we don't want to\n        // fail the render phase where it didn't fail before. So we log it.\n        // After these have been cleaned up, we'll let them throw.\n        try {\n          // This is intentionally an invariant that gets caught. It's the same\n          // behavior as without this statement except with a better message.\n          if (typeof typeSpecs[typeSpecName] !== 'function') {\n            var err = Error(\n              (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +\n              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +\n              'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'\n            );\n            err.name = 'Invariant Violation';\n            throw err;\n          }\n          error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);\n        } catch (ex) {\n          error = ex;\n        }\n        if (error && !(error instanceof Error)) {\n          printWarning(\n            (componentName || 'React class') + ': type specification of ' +\n            location + ' `' + typeSpecName + '` is invalid; the type checker ' +\n            'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +\n            'You may have forgotten to pass an argument to the type checker ' +\n            'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +\n            'shape all require an argument).'\n          );\n        }\n        if (error instanceof Error && !(error.message in loggedTypeFailures)) {\n          // Only monitor this failure once because there tends to be a lot of the\n          // same error.\n          loggedTypeFailures[error.message] = true;\n\n          var stack = getStack ? getStack() : '';\n\n          printWarning(\n            'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')\n          );\n        }\n      }\n    }\n  }\n}\n\n/**\n * Resets warning cache when testing.\n *\n * @private\n */\ncheckPropTypes.resetWarningCache = function() {\n  if (process.env.NODE_ENV !== 'production') {\n    loggedTypeFailures = {};\n  }\n}\n\nmodule.exports = checkPropTypes;\n"],"names":["printWarning","ReactPropTypesSecret","require$$0","loggedTypeFailures","has","require$$1","text","message","checkPropTypes","typeSpecs","values","location","componentName","getStack","typeSpecName","error","err","ex","stack","checkPropTypes_1"],"mappings":";;;;;;AASA,MAAIA,IAAe,WAAW;AAAA,EAAA;AAE9B,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAIC,IAAuBC,EAAA,GACvBC,IAAqB,CAAA,GACrBC,IAAMC,EAAA;AAEV,IAAAL,IAAe,SAASM,GAAM;AAC5B,UAAIC,IAAU,cAAcD;AAC5B,MAAI,OAAO,UAAY,OACrB,QAAQ,MAAMC,CAAO;AAEvB,UAAI;AAIF,cAAM,IAAI,MAAMA,CAAO;AAAA,MAC7B,QAAgB;AAAA,MAAA;AAAA,IAChB;AAAA,EACA;AAaA,WAASC,EAAeC,GAAWC,GAAQC,GAAUC,GAAeC,GAAU;AAC5E,QAAI,QAAQ,IAAI,aAAa;AAC3B,eAASC,KAAgBL;AACvB,YAAIL,EAAIK,GAAWK,CAAY,GAAG;AAChC,cAAIC;AAIJ,cAAI;AAGF,gBAAI,OAAON,EAAUK,CAAY,KAAM,YAAY;AACjD,kBAAIE,IAAM;AAAA,iBACPJ,KAAiB,iBAAiB,OAAOD,IAAW,YAAYG,IAAe,+FACC,OAAOL,EAAUK,CAAY,IAAI;AAAA,cAEhI;AACY,oBAAAE,EAAI,OAAO,uBACLA;AAAA,YAClB;AACU,YAAAD,IAAQN,EAAUK,CAAY,EAAEJ,GAAQI,GAAcF,GAAeD,GAAU,MAAMV,CAAoB;AAAA,UACnH,SAAiBgB,GAAI;AACX,YAAAF,IAAQE;AAAA,UAClB;AAWQ,cAVIF,KAAS,EAAEA,aAAiB,UAC9Bf;AAAA,aACGY,KAAiB,iBAAiB,6BACnCD,IAAW,OAAOG,IAAe,6FAC6B,OAAOC,IAAQ;AAAA,UAIzF,GAEYA,aAAiB,SAAS,EAAEA,EAAM,WAAWZ,IAAqB;AAGpE,YAAAA,EAAmBY,EAAM,OAAO,IAAI;AAEpC,gBAAIG,IAAQL,IAAWA,EAAQ,IAAK;AAEpC,YAAAb;AAAA,cACE,YAAYW,IAAW,YAAYI,EAAM,WAAWG,KAAwB;AAAA,YACxF;AAAA,UACA;AAAA,QACA;AAAA;AAAA,EAGA;AAOA,SAAAV,EAAe,oBAAoB,WAAW;AAC5C,IAAI,QAAQ,IAAI,aAAa,iBAC3BL,IAAqB,CAAA;AAAA,EAEzB,GAEAgB,IAAiBX;;","x_google_ignoreList":[0]}

package/dist/index260.js

@@ -0,0 +1,5 @@
+var r = {};
+export {
+  r as __exports
+};
+//# sourceMappingURL=index260.js.map

package/dist/index260.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index260.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index261.js

@@ -0,0 +1,5 @@
+var e = {};
+export {
+  e as __exports
+};
+//# sourceMappingURL=index261.js.map

package/dist/index261.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index261.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index28.js

@@ -2,8 +2,8 @@ import i, { useMemo as D, useRef as j, useEffect as m } from "react";
 import { Icon as M } from "./index6.js";
 import { getA11yNameAttributes as $ } from "./index78.js";
 import { useFocusTrap as k } from "./index72.js";
-import { useDismissOnEscape as z } from "./index206.js";
-import { useFocusSentinel as T } from "./index207.js";
+import { useDismissOnEscape as z } from "./index208.js";
+import { useFocusSentinel as T } from "./index209.js";
 /* empty css         */
 function u() {
   return u = Object.assign ? Object.assign.bind() : function(s) {

package/dist/index40.js

@@ -1,7 +1,7 @@
 import a, { useState as d, useRef as $, useEffect as r, useMemo as D } from "react";
 import { Icon as g } from "./index6.js";
 import { LabelChip as F } from "./index11.js";
-import { debounce as L } from "./index215.js";
+import { debounce as L } from "./index217.js";
 /* empty css         */
 function z(p) {
   const {

package/dist/index46.js

@@ -1,6 +1,6 @@
 import t, { useState as h, useRef as f, useCallback as g, useEffect as _ } from "react";
 /* empty css         */
-import C from "./index223.js";
+import C from "./index225.js";
 import { Icon as M } from "./index6.js";
 import { useStableId as v } from "./index199.js";
 import { getA11yNameAttributes as T } from "./index78.js";

package/dist/index49.js

@@ -8,6 +8,8 @@ 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";
@@ -29,7 +31,7 @@ import { Popover as $ } from "./index19.js";
 /* empty css         */
 /* empty css         */
 /* empty css         */
-import { TabButton as j } from "./index226.js";
+import { TabButton as j } from "./index228.js";
 /* empty css         */
 /* empty css         */
 /* empty css         */
@@ -40,16 +42,16 @@ import "./index60.js";
 /* empty css         */
 import "./index64.js";
 /* empty css         */
-function p() {
-  return p = Object.assign ? Object.assign.bind() : function(i) {
+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;
-  }, p.apply(null, arguments);
+  }, c.apply(null, arguments);
 }
-const ke = ({
+const Se = ({
   defaultActiveNavigationItem: i,
   navigationItems: o,
   onNavigationItemChange: n,
@@ -82,7 +84,7 @@ const ke = ({
     !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", p({
+    return /* @__PURE__ */ t.createElement("div", c({
       key: e.id
     }, b(e.id), {
       hidden: !r,
@@ -90,26 +92,26 @@ const ke = ({
       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", p({
+  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, c = T(e.id);
+    const r = l === e.id, a = e.disabled, p = T(e.id);
     return /* @__PURE__ */ t.createElement(j, {
       key: e.id,
-      ref: c.ref,
-      tabIndex: c.tabIndex,
-      id: c.id,
+      ref: p.ref,
+      tabIndex: p.tabIndex,
+      id: p.id,
       label: e.label,
       isSelected: r,
       isDisabled: a,
-      panelId: c["aria-controls"],
+      panelId: p["aria-controls"],
       onClick: () => u(e),
       onFocus: () => {
-        c.onFocus(), x === "automatic" && !a && S(e.id);
+        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]`,
@@ -145,6 +147,6 @@ const ke = ({
   }, g));
 };
 export {
-  ke as NavigationBar
+  Se as NavigationBar
 };
 //# 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":"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"}
+{"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":"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"}

package/dist/index51.js

@@ -2,7 +2,7 @@ import r, { useState as T } from "react";
 import { Button as z } from "./index4.js";
 import { Icon as _ } from "./index6.js";
 import { Dropdown as te } from "./index25.js";
-import { useDatePickerA11y as He, formatDateId as Le, getCellAriaLabel as Pe } from "./index235.js";
+import { useDatePickerA11y as He, formatDateId as Le, getCellAriaLabel as Pe } from "./index237.js";
 /* empty css         */
 function O() {
   return O = Object.assign ? Object.assign.bind() : function(h) {
@@ -88,7 +88,7 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
   }, le = () => {
     const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
     return t.setDate(1), e.setDate(1), p || e.setMonth(e.getMonth() - 1), t.setHours(0, 0, 0, 0), e.setHours(0, 0, 0, 0), [e, t];
-  }, [c, N] = T(se), [Q] = T(le), [k, W] = T(() => Q[0]), [L, G] = T(() => Q[1]), V = (t, e) => t.getTime() > e.getTime() ? [e, t] : [t, e], x = (t, e) => {
+  }, [c, x] = T(se), [Q] = T(le), [k, W] = T(() => Q[0]), [L, G] = T(() => Q[1]), V = (t, e) => t.getTime() > e.getTime() ? [e, t] : [t, e], N = (t, e) => {
     if (p) {
       W(t);
       return;
@@ -109,7 +109,7 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
     rightMonth: L,
     showSingleMonth: p,
     selectedRange: c,
-    onMonthChange: x
+    onMonthChange: N
   }), de = (t, e) => {
     const a = Se(t, e), n = Re(t, e), g = [];
     for (let s = 0; s < n; s++)
@@ -146,7 +146,7 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
     if (I(t)) return;
     const e = new Date(t);
     if (e.setHours(12, 0, 0, 0), H) {
-      N({
+      x({
         startDate: e,
         endDate: e
       }), S({
@@ -156,7 +156,7 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
       return;
     }
     if (!c.startDate || c.endDate)
-      N({
+      x({
         startDate: e,
         endDate: null
       });
@@ -164,7 +164,7 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
       const a = new Date(c.startDate);
       a.setHours(12, 0, 0, 0);
       const n = e > a ? e : a, g = e > a ? a : e;
-      N({
+      x({
         startDate: g,
         endDate: n
       });
@@ -201,7 +201,7 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
     });
   }, ve = () => {
     const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
-    e.setHours(0, 0, 0, 0), t.setHours(23, 59, 59, 999), N({
+    e.setHours(0, 0, 0, 0), t.setHours(23, 59, 59, 999), x({
       startDate: e,
       endDate: t
     });
@@ -236,7 +236,7 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
         a = M(new Date(e.getFullYear(), e.getMonth() - 1, 1)), n = E(new Date(e.getFullYear(), e.getMonth(), 0));
         break;
     }
-    N({
+    x({
       startDate: a,
       endDate: n
     });
@@ -274,7 +274,7 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
     const e = t.getFullYear(), a = t.getMonth(), n = de(e, a), g = (/* @__PURE__ */ new Date()).getFullYear(), s = t.getTime() === k.getTime(), u = be(g, e), b = new Date(e, a, 1).toLocaleString("en-US", {
       month: "long",
       year: "numeric"
-    }), Me = s ? ie : ue, X = `calendar-instructions-${s ? "left" : "right"}`, Ee = H ? "Press Enter or Space to select a date. Use arrow keys to navigate days, Page Up and Page Down to change months." : "Press Enter or Space to select a start date, then again to select an end date. Use arrow keys to navigate days, Page Up and Page Down to change months.", Ne = ce({
+    }), Me = s ? ie : ue, X = `calendar-instructions-${s ? "left" : "right"}`, Ee = H ? "Press Enter or Space to select a date. Use arrow keys to navigate days, Page Up and Page Down to change months." : "Press Enter or Space to select a start date, then again to select an end date. Use arrow keys to navigate days, Page Up and Page Down to change months.", xe = ce({
       isLeftCalendar: s,
       isDateDisabled: I,
       handleDateClick: me
@@ -284,7 +284,7 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
       for (; l.length < 7; ) l.push(null);
       Z.push(l);
     }
-    const C = /* @__PURE__ */ new Date(), xe = j && t.getMonth() === C.getMonth() && t.getFullYear() === C.getFullYear(), Ce = !F && a === C.getMonth() && e === C.getFullYear() || d !== void 0 && (() => {
+    const C = /* @__PURE__ */ new Date(), Ne = j && t.getMonth() === C.getMonth() && t.getFullYear() === C.getFullYear(), Ce = !F && a === C.getMonth() && e === C.getFullYear() || d !== void 0 && (() => {
       const o = new Date(C);
       return o.setDate(o.getDate() + d), t.getMonth() === o.getMonth() && t.getFullYear() === o.getFullYear();
     })();
@@ -296,7 +296,7 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
       name: "chevron",
       rotation: "90",
       size: 16,
-      disabled: xe,
+      disabled: Ne,
       onClick: () => {
         const o = K(t, !1);
         if (j) {
@@ -304,7 +304,7 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
           if (l.setHours(0, 0, 0, 0), o < l && o.getMonth() !== l.getMonth())
             return;
         }
-        x(o, s);
+        N(o, s);
       },
       automationId: `${y}-previous-month`,
       ariaLabel: p ? "Previous month" : s ? "Previous month of starting date" : "Previous month of end date"
@@ -321,7 +321,7 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
       ariaLabel: p ? "Month" : s ? "Month of starting date" : "Month of end date",
       onOptionClick: (o) => {
         const l = new Date(t);
-        l.setMonth(q.findIndex((i) => i.value === o.value)), x(l, s);
+        l.setMonth(q.findIndex((i) => i.value === o.value)), N(l, s);
       },
       className: "w-[124px] dropdown-option-container"
     }), /* @__PURE__ */ r.createElement(te, {
@@ -334,7 +334,7 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
       ariaLabel: p ? "Year" : s ? "Year of starting date" : "Year of end date",
       onOptionClick: (o) => {
         const l = new Date(t);
-        l.setFullYear(o.value), x(l, s);
+        l.setFullYear(o.value), N(l, s);
       },
       className: "w-[104px] dropdown-option-container"
     })), /* @__PURE__ */ r.createElement(_, {
@@ -349,7 +349,7 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
           if (i.setDate(i.getDate() + d), o > i)
             return;
         }
-        x(o, s);
+        N(o, s);
       },
       automationId: `${y}-next-month`,
       ariaLabel: p ? "Next month" : s ? "Next month of starting date" : "Next month of end date"
@@ -385,7 +385,7 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
       const ee = Le(i), D = fe(i), f = he(i), Y = pe(i), U = !D && !f && ge(i), B = De(i), $ = I(i), {
         ref: $e,
         ...Fe
-      } = Ne({
+      } = xe({
         cellId: ee,
         cellDate: i,
         disabled: $,
@@ -417,7 +417,7 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
     })))));
   };
   return /* @__PURE__ */ r.createElement("div", {
-    className: `se-design-datepicker-container flex flex-col bg-[var(--color-white)] rounded-md shadow-md w-max ${oe}`
+    className: `se-design-datepicker-container flex flex-col bg-[var(--color-white)] rounded-md shadow-md w-max max-w-full ${oe}`
   }, m && /* @__PURE__ */ r.createElement("div", {
     className: "se-design-datepicker-header flex justify-between items-center border-b border-[var(--color-gray-200)] p-4"
   }, /* @__PURE__ */ r.createElement("h2", {