@razorpay/blade 11.31.2 → 11.32.0

package/build/lib/native/tokens/global/size.js

@@ -1,4 +1,4 @@
-var size={0:0,1:1,2:2,3:3,4:4,5:5,6:6,7:7,8:8,10:10,12:12,14:14,15:15,16:16,18:18,20:20,24:24,28:28,30:30,32:32,33:33,36:36,40:40,44:44,48:48,52:52,56:56,60:60,64:64,72:72,80:80,100:100,120:120,140:140,160:160,176:176,200:200,240:240,245:245,256:256,264:264,300:300,314:314,360:360,400:400,584:584,640:640,760:760,800:800,1024:1024,1136:1136};
+var size={0:0,1:1,2:2,3:3,4:4,5:5,6:6,7:7,8:8,10:10,12:12,14:14,15:15,16:16,18:18,20:20,24:24,28:28,30:30,32:32,33:33,36:36,40:40,44:44,48:48,52:52,56:56,60:60,64:64,72:72,80:80,100:100,120:120,140:140,160:160,176:176,200:200,208:208,240:240,245:245,256:256,264:264,300:300,314:314,360:360,400:400,584:584,640:640,760:760,800:800,1024:1024,1136:1136};
 
 export { size };
 //# sourceMappingURL=size.js.map

package/build/lib/native/tokens/global/size.js.map

@@ -1 +1 @@
-{"version":3,"file":"size.js","sources":["../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n  /** 0 px */\n  0: 0,\n  /** 1 px */\n  1: 1,\n  /** 2 px */\n  2: 2,\n  /** 3 px */\n  3: 3,\n  /** 4 px */\n  4: 4,\n  /** 5 px */\n  5: 5,\n  /** 6 px */\n  6: 6,\n  /** 7 px */\n  7: 7,\n  /** 8 px */\n  8: 8,\n  /** 10 px */\n  10: 10,\n  /** 12 px */\n  12: 12,\n  /** 14 px */\n  14: 14,\n  /** 15 px */\n  15: 15,\n  /** 16 px */\n  16: 16,\n  /** 18 px */\n  18: 18,\n  /** 20 px */\n  20: 20,\n  /** 24 px */\n  24: 24,\n  /** 28 px */\n  28: 28,\n  /** 32 px */\n  30: 30,\n  /** 32 px */\n  32: 32,\n  /** 33 px */\n  33: 33,\n  /** 36 px */\n  36: 36,\n  /** 40 px */\n  40: 40,\n  /** 44 px */\n  44: 44,\n  /** 48 px */\n  48: 48,\n  /** 52 px */\n  52: 52,\n  /** 56 px */\n  56: 56,\n  /** 60 px */\n  60: 60,\n  /** 64 px */\n  64: 64,\n  /** 72 px */\n  72: 72,\n  /** 80 px */\n  80: 80,\n  /** 100 px */\n  100: 100,\n  /** 120 px */\n  120: 120,\n  /** 140 px */\n  140: 140,\n  /** 160 px */\n  160: 160,\n  /** 176 px */\n  176: 176,\n  /** 200 px */\n  200: 200,\n  /** 240 px */\n  240: 240,\n  /** 245 px */\n  245: 245,\n  /** 256 px */\n  256: 256,\n  /** 264 px */\n  264: 264,\n  /** 300 px */\n  300: 300,\n  /** 314 px */\n  314: 314,\n  /** 360 px */\n  360: 360,\n  /** 400 px */\n  400: 400,\n  /** 584 px */\n  584: 584,\n  /** 640 px */\n  640: 640,\n  /** 760 px */\n  760: 760,\n  /** 800 px */\n  800: 800,\n  /** 1024 px */\n  1024: 1024,\n  /** 1136 px */\n  1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAGa,IAAAA,IAAI,CAAG,CAElB,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,IAAI,CAAE,IAAI,CAEV,IAAI,CAAE,IACR;;;;"}
+{"version":3,"file":"size.js","sources":["../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n  /** 0 px */\n  0: 0,\n  /** 1 px */\n  1: 1,\n  /** 2 px */\n  2: 2,\n  /** 3 px */\n  3: 3,\n  /** 4 px */\n  4: 4,\n  /** 5 px */\n  5: 5,\n  /** 6 px */\n  6: 6,\n  /** 7 px */\n  7: 7,\n  /** 8 px */\n  8: 8,\n  /** 10 px */\n  10: 10,\n  /** 12 px */\n  12: 12,\n  /** 14 px */\n  14: 14,\n  /** 15 px */\n  15: 15,\n  /** 16 px */\n  16: 16,\n  /** 18 px */\n  18: 18,\n  /** 20 px */\n  20: 20,\n  /** 24 px */\n  24: 24,\n  /** 28 px */\n  28: 28,\n  /** 32 px */\n  30: 30,\n  /** 32 px */\n  32: 32,\n  /** 33 px */\n  33: 33,\n  /** 36 px */\n  36: 36,\n  /** 40 px */\n  40: 40,\n  /** 44 px */\n  44: 44,\n  /** 48 px */\n  48: 48,\n  /** 52 px */\n  52: 52,\n  /** 56 px */\n  56: 56,\n  /** 60 px */\n  60: 60,\n  /** 64 px */\n  64: 64,\n  /** 72 px */\n  72: 72,\n  /** 80 px */\n  80: 80,\n  /** 100 px */\n  100: 100,\n  /** 120 px */\n  120: 120,\n  /** 140 px */\n  140: 140,\n  /** 160 px */\n  160: 160,\n  /** 176 px */\n  176: 176,\n  /** 200 px */\n  200: 200,\n  /** 208 px */\n  208: 208,\n  /** 240 px */\n  240: 240,\n  /** 245 px */\n  245: 245,\n  /** 256 px */\n  256: 256,\n  /** 264 px */\n  264: 264,\n  /** 300 px */\n  300: 300,\n  /** 314 px */\n  314: 314,\n  /** 360 px */\n  360: 360,\n  /** 400 px */\n  400: 400,\n  /** 584 px */\n  584: 584,\n  /** 640 px */\n  640: 640,\n  /** 760 px */\n  760: 760,\n  /** 800 px */\n  800: 800,\n  /** 1024 px */\n  1024: 1024,\n  /** 1136 px */\n  1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAGa,IAAAA,IAAI,CAAG,CAElB,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,IAAI,CAAE,IAAI,CAEV,IAAI,CAAE,IACR;;;;"}

package/build/lib/native/utils/componentZIndices.js

@@ -1,4 +1,4 @@
-var componentZIndices={bottomSheet:100,modal:1000,drawer:1001,dropdownOverlay:1002,tourMask:1100,popover:1100,tooltip:1100};
+var componentZIndices={bottomSheet:100,modal:1000,drawer:1001,dropdownOverlay:1002,tourMask:1100,popover:1100,tooltip:1100,topnav:100};
 
 export { componentZIndices };
 //# sourceMappingURL=componentZIndices.js.map

package/build/lib/native/utils/componentZIndices.js.map

@@ -1 +1 @@
-{"version":3,"file":"componentZIndices.js","sources":["../../../../src/utils/componentZIndices.ts"],"sourcesContent":["// TODO: Move these properly to tokens at some point\nexport const componentZIndices = {\n  bottomSheet: 100,\n  modal: 1000,\n  drawer: 1001,\n  dropdownOverlay: 1002,\n  tourMask: 1100,\n  popover: 1100,\n  tooltip: 1100,\n};\n"],"names":["componentZIndices","bottomSheet","modal","drawer","dropdownOverlay","tourMask","popover","tooltip"],"mappings":"AACa,IAAAA,iBAAiB,CAAG,CAC/BC,WAAW,CAAE,GAAG,CAChBC,KAAK,CAAE,IAAI,CACXC,MAAM,CAAE,IAAI,CACZC,eAAe,CAAE,IAAI,CACrBC,QAAQ,CAAE,IAAI,CACdC,OAAO,CAAE,IAAI,CACbC,OAAO,CAAE,IACX;;;;"}
+{"version":3,"file":"componentZIndices.js","sources":["../../../../src/utils/componentZIndices.ts"],"sourcesContent":["// TODO: Move these properly to tokens at some point\nexport const componentZIndices = {\n  bottomSheet: 100,\n  modal: 1000,\n  drawer: 1001,\n  dropdownOverlay: 1002,\n  tourMask: 1100,\n  popover: 1100,\n  tooltip: 1100,\n  topnav: 100,\n};\n"],"names":["componentZIndices","bottomSheet","modal","drawer","dropdownOverlay","tourMask","popover","tooltip","topnav"],"mappings":"AACa,IAAAA,iBAAiB,CAAG,CAC/BC,WAAW,CAAE,GAAG,CAChBC,KAAK,CAAE,IAAI,CACXC,MAAM,CAAE,IAAI,CACZC,eAAe,CAAE,IAAI,CACrBC,QAAQ,CAAE,IAAI,CACdC,OAAO,CAAE,IAAI,CACbC,OAAO,CAAE,IAAI,CACbC,MAAM,CAAE,GACV;;;;"}

package/build/lib/web/development/components/Menu/VisualSubComponents/MenuHeaderFooter.web.js

@@ -6,9 +6,9 @@ import { BaseHeader } from '../../BaseHeaderFooter/BaseHeader.js';
 import '../../../utils/assignWithoutSideEffects/index.js';
 import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
 import '../../Box/index.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Box } from '../../Box/Box.js';
+import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 var _MenuHeader = function _MenuHeader(_ref) {
@@ -18,7 +18,8 @@ var _MenuHeader = function _MenuHeader(_ref) {
     titleSuffix = _ref.titleSuffix,
     trailing = _ref.trailing,
     testID = _ref.testID;
-  return /*#__PURE__*/jsxs(Fragment, {
+  return /*#__PURE__*/jsxs(Box, {
+    marginBottom: "spacing.3",
     children: [/*#__PURE__*/jsx(BaseHeader, {
       title: title,
       subtitle: subtitle,
@@ -47,7 +48,7 @@ var _MenuFooter = function _MenuFooter(_ref2) {
   var children = _ref2.children,
     testID = _ref2.testID;
   return /*#__PURE__*/jsxs(Box, {
-    marginTop: "spacing.2",
+    marginTop: "spacing.3",
     children: [/*#__PURE__*/jsx(MenuDivider, {}), /*#__PURE__*/jsx(BaseFooter, {
       metaComponentName: MetaConstants.MenuFooter,
       showDivider: false,

package/build/lib/web/development/components/Menu/VisualSubComponents/MenuHeaderFooter.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuHeaderFooter.web.js","sources":["../../../../../../../src/components/Menu/VisualSubComponents/MenuHeaderFooter.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport React from 'react';\nimport { footerPaddingTop, headerMarginBottom, overlayPaddingX } from '../tokens';\nimport type { MenuFooterProps, MenuHeaderProps } from '../types';\nimport { MenuDivider } from './MenuDivider';\nimport { BaseFooter } from '~components/BaseHeaderFooter/BaseFooter';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { MetaConstants } from '~utils/metaAttribute/metaConstants';\nimport { Box } from '~components/Box';\n\nconst _MenuHeader = ({\n  title,\n  subtitle,\n  leading,\n  titleSuffix,\n  trailing,\n  testID,\n}: MenuHeaderProps): React.ReactElement => {\n  return (\n    <>\n      <BaseHeader\n        title={title}\n        subtitle={subtitle}\n        leading={leading}\n        trailing={trailing}\n        titleSuffix={titleSuffix}\n        metaComponentName={MetaConstants.MenuHeader}\n        testID={testID}\n        // back button\n        showBackButton={false}\n        // close button\n        showCloseButton={false}\n        paddingX={overlayPaddingX}\n        marginTop=\"spacing.0\"\n        marginBottom={headerMarginBottom}\n        showDivider={false}\n      />\n      <MenuDivider />\n    </>\n  );\n};\n\nconst MenuHeader = assignWithoutSideEffects(_MenuHeader, {\n  componentId: 'MenuHeader',\n});\n\nconst _MenuFooter = ({ children, testID }: MenuFooterProps): React.ReactElement => {\n  return (\n    <Box marginTop=\"spacing.2\">\n      <MenuDivider />\n      <BaseFooter\n        metaComponentName={MetaConstants.MenuFooter}\n        showDivider={false}\n        padding={[footerPaddingTop, overlayPaddingX, 'spacing.0', overlayPaddingX]}\n        testID={testID}\n      >\n        {children}\n      </BaseFooter>\n    </Box>\n  );\n};\n\nconst MenuFooter = assignWithoutSideEffects(_MenuFooter, {\n  componentId: 'MenuFooter',\n});\n\nexport { MenuHeader, MenuFooter };\n"],"names":["_MenuHeader","_ref","title","subtitle","leading","titleSuffix","trailing","testID","_jsxs","_Fragment","children","_jsx","BaseHeader","metaComponentName","MetaConstants","MenuHeader","showBackButton","showCloseButton","paddingX","overlayPaddingX","marginTop","marginBottom","headerMarginBottom","showDivider","MenuDivider","assignWithoutSideEffects","componentId","_MenuFooter","_ref2","Box","BaseFooter","MenuFooter","padding","footerPaddingTop"],"mappings":";;;;;;;;;;;;AAAA;AAWA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAO0B;AAAA,EAAA,IANzCC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,MAAM,GAAAN,IAAA,CAANM,MAAM,CAAA;EAEN,oBACEC,IAAA,CAAAC,QAAA,EAAA;IAAAC,QAAA,EAAA,cACEC,GAAA,CAACC,UAAU,EAAA;AACTV,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,OAAO,EAAEA,OAAQ;AACjBE,MAAAA,QAAQ,EAAEA,QAAS;AACnBD,MAAAA,WAAW,EAAEA,WAAY;MACzBQ,iBAAiB,EAAEC,aAAa,CAACC,UAAW;AAC5CR,MAAAA,MAAM,EAAEA,MAAAA;AACR;AAAA;AACAS,MAAAA,cAAc,EAAE,KAAA;AAChB;AAAA;AACAC,MAAAA,eAAe,EAAE,KAAM;AACvBC,MAAAA,QAAQ,EAAEC,eAAgB;AAC1BC,MAAAA,SAAS,EAAC,WAAW;AACrBC,MAAAA,YAAY,EAAEC,kBAAmB;AACjCC,MAAAA,WAAW,EAAE,KAAA;AAAM,KACpB,CAAC,eACFZ,GAAA,CAACa,WAAW,IAAE,CAAC,CAAA;AAAA,GACf,CAAC,CAAA;AAEP,CAAC,CAAA;AAED,IAAMT,UAAU,gBAAGU,wBAAwB,CAACzB,WAAW,EAAE;AACvD0B,EAAAA,WAAW,EAAE,YAAA;AACf,CAAC,EAAC;AAEF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAAC,KAAA,EAAkE;AAAA,EAAA,IAA5DlB,QAAQ,GAAAkB,KAAA,CAARlB,QAAQ;IAAEH,MAAM,GAAAqB,KAAA,CAANrB,MAAM,CAAA;EACrC,oBACEC,IAAA,CAACqB,GAAG,EAAA;AAACT,IAAAA,SAAS,EAAC,WAAW;IAAAV,QAAA,EAAA,cACxBC,GAAA,CAACa,WAAW,IAAE,CAAC,eACfb,GAAA,CAACmB,UAAU,EAAA;MACTjB,iBAAiB,EAAEC,aAAa,CAACiB,UAAW;AAC5CR,MAAAA,WAAW,EAAE,KAAM;MACnBS,OAAO,EAAE,CAACC,gBAAgB,EAAEd,eAAe,EAAE,WAAW,EAAEA,eAAe,CAAE;AAC3EZ,MAAAA,MAAM,EAAEA,MAAO;AAAAG,MAAAA,QAAA,EAEdA,QAAAA;AAAQ,KACC,CAAC,CAAA;AAAA,GACV,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMqB,UAAU,gBAAGN,wBAAwB,CAACE,WAAW,EAAE;AACvDD,EAAAA,WAAW,EAAE,YAAA;AACf,CAAC;;;;"}
+{"version":3,"file":"MenuHeaderFooter.web.js","sources":["../../../../../../../src/components/Menu/VisualSubComponents/MenuHeaderFooter.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport React from 'react';\nimport { footerPaddingTop, headerMarginBottom, overlayPaddingX } from '../tokens';\nimport type { MenuFooterProps, MenuHeaderProps } from '../types';\nimport { MenuDivider } from './MenuDivider';\nimport { BaseFooter } from '~components/BaseHeaderFooter/BaseFooter';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { MetaConstants } from '~utils/metaAttribute/metaConstants';\nimport { Box } from '~components/Box';\n\nconst _MenuHeader = ({\n  title,\n  subtitle,\n  leading,\n  titleSuffix,\n  trailing,\n  testID,\n}: MenuHeaderProps): React.ReactElement => {\n  return (\n    <Box marginBottom=\"spacing.3\">\n      <BaseHeader\n        title={title}\n        subtitle={subtitle}\n        leading={leading}\n        trailing={trailing}\n        titleSuffix={titleSuffix}\n        metaComponentName={MetaConstants.MenuHeader}\n        testID={testID}\n        // back button\n        showBackButton={false}\n        // close button\n        showCloseButton={false}\n        paddingX={overlayPaddingX}\n        marginTop=\"spacing.0\"\n        marginBottom={headerMarginBottom}\n        showDivider={false}\n      />\n      <MenuDivider />\n    </Box>\n  );\n};\n\nconst MenuHeader = assignWithoutSideEffects(_MenuHeader, {\n  componentId: 'MenuHeader',\n});\n\nconst _MenuFooter = ({ children, testID }: MenuFooterProps): React.ReactElement => {\n  return (\n    <Box marginTop=\"spacing.3\">\n      <MenuDivider />\n      <BaseFooter\n        metaComponentName={MetaConstants.MenuFooter}\n        showDivider={false}\n        padding={[footerPaddingTop, overlayPaddingX, 'spacing.0', overlayPaddingX]}\n        testID={testID}\n      >\n        {children}\n      </BaseFooter>\n    </Box>\n  );\n};\n\nconst MenuFooter = assignWithoutSideEffects(_MenuFooter, {\n  componentId: 'MenuFooter',\n});\n\nexport { MenuHeader, MenuFooter };\n"],"names":["_MenuHeader","_ref","title","subtitle","leading","titleSuffix","trailing","testID","_jsxs","Box","marginBottom","children","_jsx","BaseHeader","metaComponentName","MetaConstants","MenuHeader","showBackButton","showCloseButton","paddingX","overlayPaddingX","marginTop","headerMarginBottom","showDivider","MenuDivider","assignWithoutSideEffects","componentId","_MenuFooter","_ref2","BaseFooter","MenuFooter","padding","footerPaddingTop"],"mappings":";;;;;;;;;;;;AAAA;AAWA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAO0B;AAAA,EAAA,IANzCC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,MAAM,GAAAN,IAAA,CAANM,MAAM,CAAA;EAEN,oBACEC,IAAA,CAACC,GAAG,EAAA;AAACC,IAAAA,YAAY,EAAC,WAAW;IAAAC,QAAA,EAAA,cAC3BC,GAAA,CAACC,UAAU,EAAA;AACTX,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,OAAO,EAAEA,OAAQ;AACjBE,MAAAA,QAAQ,EAAEA,QAAS;AACnBD,MAAAA,WAAW,EAAEA,WAAY;MACzBS,iBAAiB,EAAEC,aAAa,CAACC,UAAW;AAC5CT,MAAAA,MAAM,EAAEA,MAAAA;AACR;AAAA;AACAU,MAAAA,cAAc,EAAE,KAAA;AAChB;AAAA;AACAC,MAAAA,eAAe,EAAE,KAAM;AACvBC,MAAAA,QAAQ,EAAEC,eAAgB;AAC1BC,MAAAA,SAAS,EAAC,WAAW;AACrBX,MAAAA,YAAY,EAAEY,kBAAmB;AACjCC,MAAAA,WAAW,EAAE,KAAA;AAAM,KACpB,CAAC,eACFX,GAAA,CAACY,WAAW,IAAE,CAAC,CAAA;AAAA,GACZ,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMR,UAAU,gBAAGS,wBAAwB,CAACzB,WAAW,EAAE;AACvD0B,EAAAA,WAAW,EAAE,YAAA;AACf,CAAC,EAAC;AAEF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAAC,KAAA,EAAkE;AAAA,EAAA,IAA5DjB,QAAQ,GAAAiB,KAAA,CAARjB,QAAQ;IAAEJ,MAAM,GAAAqB,KAAA,CAANrB,MAAM,CAAA;EACrC,oBACEC,IAAA,CAACC,GAAG,EAAA;AAACY,IAAAA,SAAS,EAAC,WAAW;IAAAV,QAAA,EAAA,cACxBC,GAAA,CAACY,WAAW,IAAE,CAAC,eACfZ,GAAA,CAACiB,UAAU,EAAA;MACTf,iBAAiB,EAAEC,aAAa,CAACe,UAAW;AAC5CP,MAAAA,WAAW,EAAE,KAAM;MACnBQ,OAAO,EAAE,CAACC,gBAAgB,EAAEZ,eAAe,EAAE,WAAW,EAAEA,eAAe,CAAE;AAC3Eb,MAAAA,MAAM,EAAEA,MAAO;AAAAI,MAAAA,QAAA,EAEdA,QAAAA;AAAQ,KACC,CAAC,CAAA;AAAA,GACV,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMmB,UAAU,gBAAGL,wBAAwB,CAACE,WAAW,EAAE;AACvDD,EAAAA,WAAW,EAAE,YAAA;AACf,CAAC;;;;"}

package/build/lib/web/development/components/TopNav/TabNav/TabNav.web.js

@@ -1,172 +1,151 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default from 'react';
-import styled from 'styled-components';
-import { useTopNavContext } from '../TopNavContext.js';
-import { MIXED_BG_COLOR, useHasOverflow, approximatelyEqual } from './utils.js';
+import ReactDOM from 'react-dom';
 import { TabNavContext } from './TabNavContext.js';
+import { useResize } from './utils.js';
 import '../../Box/BaseBox/index.js';
 import '../../Box/styledProps/index.js';
-import '../../Button/index.js';
 import '../../Divider/index.js';
-import '../../Icons/index.js';
 import '../../../utils/index.js';
 import '../../../tokens/global/index.js';
-import getIn from '../../../utils/lodashButBetter/get.js';
 import '../../../utils/metaAttribute/index.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
-import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
+import '../../Box/index.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Box } from '../../Box/Box.js';
+import { Divider } from '../../Divider/Divider.js';
 import { makeSize } from '../../../utils/makeSize/makeSize.js';
+import { size } from '../../../tokens/global/size.js';
+import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
 import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
 import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
-import Button from '../../Button/Button/Button.js';
-import ChevronLeftIcon from '../../Icons/ChevronLeftIcon/ChevronLeftIcon.js';
-import { Divider } from '../../Divider/Divider.js';
-import { size } from '../../../tokens/global/size.js';
-import ChevronRightIcon from '../../Icons/ChevronRightIcon/ChevronRightIcon.js';
 
-var _excluded = ["children"];
+var _excluded = ["children"],
+  _excluded2 = ["children", "items"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var GRADIENT_WIDTH = 54;
-var GRADIENT_OFFSET = -8;
-var OFFSET_BOTTOM = -12;
-var SCROLL_AMOUNT = 200;
-var ScrollableArea = /*#__PURE__*/styled(BaseBox).withConfig({
-  displayName: "TabNavweb__ScrollableArea",
-  componentId: "sc-1ww6x3k-0"
-})(function () {
-  return {
-    '&::-webkit-scrollbar': {
-      display: 'none'
-    }
-  };
-});
-var GradientOverlay = /*#__PURE__*/styled(BaseBox).withConfig({
-  displayName: "TabNavweb__GradientOverlay",
-  componentId: "sc-1ww6x3k-1"
-})(function (_ref) {
-  var theme = _ref.theme,
-    shouldShow = _ref.shouldShow,
-    variant = _ref.variant,
-    $color = _ref.$color;
-  var color = getIn(theme.colors, $color, MIXED_BG_COLOR);
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    position: 'absolute'
-  }, variant, 0), "pointerEvents", shouldShow ? 'auto' : 'none'), "transform", shouldShow ? 'scale(1)' : 'scale(0.5)'), "opacity", shouldShow ? 1 : 0), "transitionTimingFunction", "".concat(theme.motion.easing.standard.revealing)), "transitionDuration", "".concat(makeMotionTime(theme.motion.duration.xquick))), "transitionProperty", 'opacity, transform'), "zIndex", 1), ':before', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    content: "''",
-    pointerEvents: 'none',
-    position: 'absolute'
-  }, variant, 0), "top", makeSize(GRADIENT_OFFSET)), "bottom", makeSize(GRADIENT_OFFSET)), "width", makeSize(GRADIENT_WIDTH)), "background", "linear-gradient(to ".concat(variant, ", transparent 0%, ").concat(color, " 30%, ").concat(color, " 100%);")));
-});
-var TabNav = function TabNav(_ref3) {
-  var children = _ref3.children,
-    styledProps = _objectWithoutProperties(_ref3, _excluded);
+var TabNavItems = function TabNavItems(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread({}, props), {}, {
+    display: "flex",
+    width: "100%",
+    gap: "spacing.0",
+    position: "relative",
+    left: "-1px",
+    children: [React__default.Children.map(children, function (child, index) {
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [index > 0 ? /*#__PURE__*/jsx(Divider, {
+          margin: "auto",
+          variant: "muted",
+          orientation: "vertical",
+          height: makeSize(size[16])
+        }) : null, /*#__PURE__*/React__default.cloneElement(child, {
+          __isInsideTabNavItems: true,
+          __index: index
+        })]
+      });
+    }), /*#__PURE__*/jsx(Divider, {
+      margin: "auto",
+      variant: "muted",
+      orientation: "vertical",
+      height: makeSize(size[16])
+    })]
+  }));
+};
+var TabNav = function TabNav(_ref2) {
+  var children = _ref2.children,
+    items = _ref2.items,
+    styledProps = _objectWithoutProperties(_ref2, _excluded2);
   var ref = React__default.useRef(null);
-  var hasOverflow = useHasOverflow(ref);
-  var _React$useState = React__default.useState('start'),
+  var _React$useState = React__default.useState(items),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    scrollStatus = _React$useState2[0],
-    setScrollStatus = _React$useState2[1];
-  var _useTopNavContext = useTopNavContext(),
-    backgroundColor = _useTopNavContext.backgroundColor;
+    controlledItems = _React$useState2[0],
+    setControlledItems = _React$useState2[1];
+  var overflowingItems = controlledItems.filter(function (item) {
+    var _item$isAlwaysOverflo;
+    return (_item$isAlwaysOverflo = item.isAlwaysOverflowing) !== null && _item$isAlwaysOverflo !== void 0 ? _item$isAlwaysOverflo : item.isOverflowing;
+  });
+  var _items = controlledItems.filter(function (item) {
+    return !item.isAlwaysOverflowing && !item.isOverflowing;
+  });
 
-  // Check if the scroll is at start, end or middle
-  var handleScrollStatus = React__default.useCallback(function (e) {
-    var target = e.target;
-    var isAtStart = target.scrollLeft === 0;
-    var isAtEnd = approximatelyEqual(target.scrollLeft, target.scrollWidth - target.offsetWidth);
-    if (isAtStart) {
-      setScrollStatus('start');
-    } else if (isAtEnd) {
-      setScrollStatus('end');
+  // We need to memoize this callback otherwise it will cause infinite re-renders
+  // Because the ResizeObserver callback will be a new reference on every render
+  // and it will trigger a re-render
+  var resizeCallback = React__default.useCallback(function (resizeInfo) {
+    var target = resizeInfo.target;
+    var updateItems = function updateItems() {
+      setControlledItems(function (items) {
+        return items.map(function (item, index) {
+          // never overflow the first item
+          if (index === 0) return _objectSpread(_objectSpread({}, item), {}, {
+            isOverflowing: false
+          });
+          // add padding to the offsetX to account the "More" menu's width changing due to the selection state (eg: More:ProdctName)
+          // Currently, hardcoding this to 150, we can make this dynamic too but that's causing layout thrashing
+          // because first we need to calculate the width of the "More" menu and then update the items
+          var padding = 150;
+          var offset = item.offsetX + padding - target.getBoundingClientRect().left;
+          if (offset > target.offsetWidth) {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              isOverflowing: true
+            });
+          } else {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              isOverflowing: false
+            });
+          }
+        });
+      });
+    };
+    // https://github.com/webpack/webpack/issues/14814
+    var flushSync = ReactDOM['flushSync'.toString()];
+    // Using flushSync to avoid layout thrashing,
+    // this will force React to flush all pending updates and only then update the DOM
+    if (flushSync !== undefined) {
+      flushSync(updateItems);
     } else {
-      setScrollStatus('middle');
+      updateItems();
     }
   }, []);
-  var scrollRight = function scrollRight() {
-    if (!ref.current) return;
-    ref.current.scrollBy({
-      behavior: 'smooth',
-      left: SCROLL_AMOUNT
-    });
-  };
-  var scrollLeft = function scrollLeft() {
-    if (!ref.current) return;
-    ref.current.scrollBy({
-      behavior: 'smooth',
-      left: -SCROLL_AMOUNT
-    });
-  };
+  useResize(ref, resizeCallback);
   return /*#__PURE__*/jsx(TabNavContext.Provider, {
     value: {
       containerRef: ref,
-      hasOverflow: hasOverflow
+      controlledItems: controlledItems,
+      setControlledItems: setControlledItems
     },
-    children: /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({
+    children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
       as: "nav",
       display: "flex",
       width: "100%",
       alignItems: "center",
-      position: "relative",
-      marginBottom: makeSize(OFFSET_BOTTOM)
+      alignSelf: "end",
+      position: "relative"
     }, getStyledProps(styledProps)), metaAttribute({
       name: MetaConstants.TabNav
     })), {}, {
-      children: [/*#__PURE__*/jsx(GradientOverlay, {
-        variant: "left",
-        $color: backgroundColor,
-        shouldShow: hasOverflow && scrollStatus !== 'start',
-        children: /*#__PURE__*/jsx(Button, {
-          size: "xsmall",
-          variant: "tertiary",
-          icon: ChevronLeftIcon,
-          accessibilityLabel: "Scroll Left",
-          onClick: scrollLeft
-        })
-      }), /*#__PURE__*/jsx(ScrollableArea, {
-        ref: ref,
-        onScroll: handleScrollStatus,
+      ref: ref,
+      children: /*#__PURE__*/jsx(BaseBox, {
         display: "flex",
         width: "100%",
         position: "relative",
-        whiteSpace: "nowrap",
-        gap: "spacing.0",
-        overflowY: "hidden",
-        overflowX: "auto",
         children: /*#__PURE__*/jsx(BaseBox, {
           display: "flex",
           flexDirection: "row",
           width: "max-content",
-          children: React__default.Children.map(children, function (child, index) {
-            return /*#__PURE__*/jsxs(Fragment, {
-              children: [index > 0 ? /*#__PURE__*/jsx(Divider, {
-                margin: "auto",
-                variant: "muted",
-                orientation: "vertical",
-                height: makeSize(size[16])
-              }) : null, child]
-            });
+          children: children({
+            items: _items,
+            overflowingItems: overflowingItems
           })
         })
-      }), /*#__PURE__*/jsx(GradientOverlay, {
-        variant: "right",
-        $color: backgroundColor,
-        shouldShow: hasOverflow && scrollStatus !== 'end',
-        children: /*#__PURE__*/jsx(Button, {
-          size: "xsmall",
-          variant: "tertiary",
-          icon: ChevronRightIcon,
-          accessibilityLabel: "Scroll Right",
-          onClick: scrollRight
-        })
-      })]
+      })
     }))
   });
 };
 
-export { TabNav };
+export { TabNav, TabNavItems };
 //# sourceMappingURL=TabNav.web.js.map

package/build/lib/web/development/components/TopNav/TabNav/TabNav.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNav.web.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNav.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { useTopNavContext } from '../TopNavContext';\nimport { approximatelyEqual, MIXED_BG_COLOR, useHasOverflow } from './utils';\nimport { TabNavContext } from './TabNavContext';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { Button } from '~components/Button';\nimport { Divider } from '~components/Divider';\nimport { ChevronLeftIcon, ChevronRightIcon } from '~components/Icons';\nimport { makeMotionTime, makeSize } from '~utils';\nimport { size } from '~tokens/global';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { BoxProps } from '~components/Box';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst GRADIENT_WIDTH = 54 as const;\nconst GRADIENT_OFFSET = -8 as const;\nconst OFFSET_BOTTOM = -12 as const;\nconst SCROLL_AMOUNT = 200;\n\ntype TabNavProps = {\n  children: React.ReactNode;\n};\n\nconst ScrollableArea = styled(BaseBox)(() => {\n  return {\n    '&::-webkit-scrollbar': { display: 'none' },\n  };\n});\n\nconst GradientOverlay = styled(BaseBox)<{\n  shouldShow?: boolean;\n  variant: 'left' | 'right';\n  $color: BoxProps['backgroundColor'];\n}>(({ theme, shouldShow, variant, $color }) => {\n  const color = getIn(theme.colors, $color as never, MIXED_BG_COLOR);\n\n  return {\n    position: 'absolute',\n    [variant]: 0,\n    pointerEvents: shouldShow ? 'auto' : 'none',\n    transform: shouldShow ? 'scale(1)' : 'scale(0.5)',\n    opacity: shouldShow ? 1 : 0,\n    transitionTimingFunction: `${theme.motion.easing.standard.revealing}`,\n    transitionDuration: `${makeMotionTime(theme.motion.duration.xquick)}`,\n    transitionProperty: 'opacity, transform',\n    zIndex: 1,\n    ':before': {\n      content: \"''\",\n      pointerEvents: 'none',\n      position: 'absolute',\n      [variant]: 0,\n      top: makeSize(GRADIENT_OFFSET),\n      bottom: makeSize(GRADIENT_OFFSET),\n      width: makeSize(GRADIENT_WIDTH),\n      background: `linear-gradient(to ${variant}, transparent 0%, ${color} 30%, ${color} 100%);`,\n    },\n  };\n});\n\nconst TabNav = ({\n  children,\n  ...styledProps\n}: TabNavProps & StyledPropsBlade): React.ReactElement => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const hasOverflow = useHasOverflow(ref);\n  const [scrollStatus, setScrollStatus] = React.useState<'start' | 'end' | 'middle'>('start');\n  const { backgroundColor } = useTopNavContext();\n\n  // Check if the scroll is at start, end or middle\n  const handleScrollStatus = React.useCallback(\n    (e: React.UIEvent<HTMLDivElement, UIEvent>): void => {\n      const target = e.target as HTMLDivElement;\n      const isAtStart = target.scrollLeft === 0;\n      const isAtEnd = approximatelyEqual(\n        target.scrollLeft,\n        target.scrollWidth - target.offsetWidth,\n      );\n\n      if (isAtStart) {\n        setScrollStatus('start');\n      } else if (isAtEnd) {\n        setScrollStatus('end');\n      } else {\n        setScrollStatus('middle');\n      }\n    },\n    [],\n  );\n\n  const scrollRight = (): void => {\n    if (!ref.current) return;\n    ref.current.scrollBy({\n      behavior: 'smooth',\n      left: SCROLL_AMOUNT,\n    });\n  };\n\n  const scrollLeft = (): void => {\n    if (!ref.current) return;\n    ref.current.scrollBy({\n      behavior: 'smooth',\n      left: -SCROLL_AMOUNT,\n    });\n  };\n\n  return (\n    <TabNavContext.Provider value={{ containerRef: ref, hasOverflow }}>\n      <BaseBox\n        as=\"nav\"\n        display=\"flex\"\n        width=\"100%\"\n        alignItems=\"center\"\n        position=\"relative\"\n        marginBottom={makeSize(OFFSET_BOTTOM)}\n        {...getStyledProps(styledProps)}\n        {...metaAttribute({ name: MetaConstants.TabNav })}\n      >\n        <GradientOverlay\n          variant=\"left\"\n          $color={backgroundColor}\n          shouldShow={hasOverflow && scrollStatus !== 'start'}\n        >\n          <Button\n            size=\"xsmall\"\n            variant=\"tertiary\"\n            icon={ChevronLeftIcon}\n            accessibilityLabel=\"Scroll Left\"\n            onClick={scrollLeft}\n          />\n        </GradientOverlay>\n        <ScrollableArea\n          ref={ref}\n          onScroll={handleScrollStatus}\n          display=\"flex\"\n          width=\"100%\"\n          position=\"relative\"\n          whiteSpace=\"nowrap\"\n          gap=\"spacing.0\"\n          overflowY=\"hidden\"\n          overflowX=\"auto\"\n        >\n          <BaseBox display=\"flex\" flexDirection=\"row\" width=\"max-content\">\n            {React.Children.map(children, (child, index) => {\n              return (\n                <>\n                  {index > 0 ? (\n                    <Divider\n                      margin=\"auto\"\n                      variant=\"muted\"\n                      orientation=\"vertical\"\n                      height={makeSize(size[16])}\n                    />\n                  ) : null}\n                  {child}\n                </>\n              );\n            })}\n          </BaseBox>\n        </ScrollableArea>\n        <GradientOverlay\n          variant=\"right\"\n          $color={backgroundColor}\n          shouldShow={hasOverflow && scrollStatus !== 'end'}\n        >\n          <Button\n            size=\"xsmall\"\n            variant=\"tertiary\"\n            icon={ChevronRightIcon}\n            accessibilityLabel=\"Scroll Right\"\n            onClick={scrollRight}\n          />\n        </GradientOverlay>\n      </BaseBox>\n    </TabNavContext.Provider>\n  );\n};\n\nexport { TabNav };\n"],"names":["GRADIENT_WIDTH","GRADIENT_OFFSET","OFFSET_BOTTOM","SCROLL_AMOUNT","ScrollableArea","styled","BaseBox","withConfig","displayName","componentId","display","GradientOverlay","_ref","theme","shouldShow","variant","$color","color","getIn","colors","MIXED_BG_COLOR","_defineProperty","position","concat","motion","easing","standard","revealing","makeMotionTime","duration","xquick","content","pointerEvents","makeSize","TabNav","_ref3","children","styledProps","_objectWithoutProperties","_excluded","ref","React","useRef","hasOverflow","useHasOverflow","_React$useState","useState","_React$useState2","_slicedToArray","scrollStatus","setScrollStatus","_useTopNavContext","useTopNavContext","backgroundColor","handleScrollStatus","useCallback","e","target","isAtStart","scrollLeft","isAtEnd","approximatelyEqual","scrollWidth","offsetWidth","scrollRight","current","scrollBy","behavior","left","_jsx","TabNavContext","Provider","value","containerRef","_jsxs","_objectSpread","as","width","alignItems","marginBottom","getStyledProps","metaAttribute","name","MetaConstants","Button","size","icon","ChevronLeftIcon","accessibilityLabel","onClick","onScroll","whiteSpace","gap","overflowY","overflowX","flexDirection","Children","map","child","index","_Fragment","Divider","margin","orientation","height","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAMA,cAAc,GAAG,EAAW,CAAA;AAClC,IAAMC,eAAe,GAAG,CAAC,CAAU,CAAA;AACnC,IAAMC,aAAa,GAAG,CAAC,EAAW,CAAA;AAClC,IAAMC,aAAa,GAAG,GAAG,CAAA;AAMzB,IAAMC,cAAc,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,2BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAC,YAAM;EAC3C,OAAO;AACL,IAAA,sBAAsB,EAAE;AAAEC,MAAAA,OAAO,EAAE,MAAA;AAAO,KAAA;GAC3C,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAMC,eAAe,gBAAGN,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,4BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAIpC,CAAA,CAAA,UAAAG,IAAA,EAA4C;AAAA,EAAA,IAAzCC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAEC,MAAM,GAAAJ,IAAA,CAANI,MAAM,CAAA;EACtC,IAAMC,KAAK,GAAGC,KAAK,CAACL,KAAK,CAACM,MAAM,EAAEH,MAAM,EAAWI,cAAc,CAAC,CAAA;AAElE,EAAA,OAAAC,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAA;AACEC,IAAAA,QAAQ,EAAE,UAAA;AAAU,GAAA,EACnBP,OAAO,EAAG,CAAC,CAAA,EAAA,eAAA,EACGD,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA,EAAA,WAAA,EAChCA,UAAU,GAAG,UAAU,GAAG,YAAY,CAAA,EAAA,SAAA,EACxCA,UAAU,GAAG,CAAC,GAAG,CAAC,CAAA,EAAA,0BAAA,EAAA,EAAA,CAAAS,MAAA,CACEV,KAAK,CAACW,MAAM,CAACC,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAA,CAAA,EAAA,oBAAA,EAAA,EAAA,CAAAJ,MAAA,CAC5CK,cAAc,CAACf,KAAK,CAACW,MAAM,CAACK,QAAQ,CAACC,MAAM,CAAC,CAC/C,CAAA,EAAA,oBAAA,EAAA,oBAAoB,CAChC,EAAA,QAAA,EAAA,CAAC,CACT,EAAA,SAAS,EAAAT,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAA;AACPU,IAAAA,OAAO,EAAE,IAAI;AACbC,IAAAA,aAAa,EAAE,MAAM;AACrBV,IAAAA,QAAQ,EAAE,UAAA;AAAU,GAAA,EACnBP,OAAO,EAAG,CAAC,CAAA,EAAA,KAAA,EACPkB,QAAQ,CAAChC,eAAe,CAAC,CACtBgC,EAAAA,QAAAA,EAAAA,QAAQ,CAAChC,eAAe,CAAC,CAAA,EAAA,OAAA,EAC1BgC,QAAQ,CAACjC,cAAc,CAAC,CAAAuB,EAAAA,YAAAA,EAAAA,qBAAAA,CAAAA,MAAA,CACGR,OAAO,EAAAQ,oBAAAA,CAAAA,CAAAA,MAAA,CAAqBN,KAAK,EAAAM,QAAAA,CAAAA,CAAAA,MAAA,CAASN,KAAK,EAAA,SAAA,CAAA,CAAA,CAAA,CAAA;AAGvF,CAAC,CAAC,CAAA;AAEF,IAAMiB,MAAM,GAAG,SAATA,MAAMA,CAAAC,KAAA,EAG8C;AAAA,EAAA,IAFxDC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;AACLC,IAAAA,WAAW,GAAAC,wBAAA,CAAAH,KAAA,EAAAI,SAAA,CAAA,CAAA;AAEd,EAAA,IAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAiB,IAAI,CAAC,CAAA;AAC9C,EAAA,IAAMC,WAAW,GAAGC,cAAc,CAACJ,GAAG,CAAC,CAAA;AACvC,EAAA,IAAAK,eAAA,GAAwCJ,cAAK,CAACK,QAAQ,CAA6B,OAAO,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA,EAAA,CAAA,CAAA;AAApFI,IAAAA,YAAY,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,eAAe,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;AACpC,EAAA,IAAAI,iBAAA,GAA4BC,gBAAgB,EAAE;IAAtCC,eAAe,GAAAF,iBAAA,CAAfE,eAAe,CAAA;;AAEvB;EACA,IAAMC,kBAAkB,GAAGb,cAAK,CAACc,WAAW,CAC1C,UAACC,CAAyC,EAAW;AACnD,IAAA,IAAMC,MAAM,GAAGD,CAAC,CAACC,MAAwB,CAAA;AACzC,IAAA,IAAMC,SAAS,GAAGD,MAAM,CAACE,UAAU,KAAK,CAAC,CAAA;AACzC,IAAA,IAAMC,OAAO,GAAGC,kBAAkB,CAChCJ,MAAM,CAACE,UAAU,EACjBF,MAAM,CAACK,WAAW,GAAGL,MAAM,CAACM,WAC9B,CAAC,CAAA;AAED,IAAA,IAAIL,SAAS,EAAE;MACbR,eAAe,CAAC,OAAO,CAAC,CAAA;KACzB,MAAM,IAAIU,OAAO,EAAE;MAClBV,eAAe,CAAC,KAAK,CAAC,CAAA;AACxB,KAAC,MAAM;MACLA,eAAe,CAAC,QAAQ,CAAC,CAAA;AAC3B,KAAA;GACD,EACD,EACF,CAAC,CAAA;AAED,EAAA,IAAMc,WAAW,GAAG,SAAdA,WAAWA,GAAe;AAC9B,IAAA,IAAI,CAACxB,GAAG,CAACyB,OAAO,EAAE,OAAA;AAClBzB,IAAAA,GAAG,CAACyB,OAAO,CAACC,QAAQ,CAAC;AACnBC,MAAAA,QAAQ,EAAE,QAAQ;AAClBC,MAAAA,IAAI,EAAEjE,aAAAA;AACR,KAAC,CAAC,CAAA;GACH,CAAA;AAED,EAAA,IAAMwD,UAAU,GAAG,SAAbA,UAAUA,GAAe;AAC7B,IAAA,IAAI,CAACnB,GAAG,CAACyB,OAAO,EAAE,OAAA;AAClBzB,IAAAA,GAAG,CAACyB,OAAO,CAACC,QAAQ,CAAC;AACnBC,MAAAA,QAAQ,EAAE,QAAQ;AAClBC,MAAAA,IAAI,EAAE,CAACjE,aAAAA;AACT,KAAC,CAAC,CAAA;GACH,CAAA;AAED,EAAA,oBACEkE,GAAA,CAACC,aAAa,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,YAAY,EAAEjC,GAAG;AAAEG,MAAAA,WAAW,EAAXA,WAAAA;KAAc;IAAAP,QAAA,eAChEsC,IAAA,CAACpE,OAAO,EAAAqE,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACNC,MAAAA,EAAE,EAAC,KAAK;AACRlE,MAAAA,OAAO,EAAC,MAAM;AACdmE,MAAAA,KAAK,EAAC,MAAM;AACZC,MAAAA,UAAU,EAAC,QAAQ;AACnBxD,MAAAA,QAAQ,EAAC,UAAU;MACnByD,YAAY,EAAE9C,QAAQ,CAAC/B,aAAa,CAAA;AAAE,KAAA,EAClC8E,cAAc,CAAC3C,WAAW,CAAC,CAAA,EAC3B4C,aAAa,CAAC;MAAEC,IAAI,EAAEC,aAAa,CAACjD,MAAAA;AAAO,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;MAAAE,QAAA,EAAA,cAEjDiC,GAAA,CAAC1D,eAAe,EAAA;AACdI,QAAAA,OAAO,EAAC,MAAM;AACdC,QAAAA,MAAM,EAAEqC,eAAgB;AACxBvC,QAAAA,UAAU,EAAE6B,WAAW,IAAIM,YAAY,KAAK,OAAQ;QAAAb,QAAA,eAEpDiC,GAAA,CAACe,MAAM,EAAA;AACLC,UAAAA,IAAI,EAAC,QAAQ;AACbtE,UAAAA,OAAO,EAAC,UAAU;AAClBuE,UAAAA,IAAI,EAAEC,eAAgB;AACtBC,UAAAA,kBAAkB,EAAC,aAAa;AAChCC,UAAAA,OAAO,EAAE9B,UAAAA;SACV,CAAA;AAAC,OACa,CAAC,eAClBU,GAAA,CAACjE,cAAc,EAAA;AACboC,QAAAA,GAAG,EAAEA,GAAI;AACTkD,QAAAA,QAAQ,EAAEpC,kBAAmB;AAC7B5C,QAAAA,OAAO,EAAC,MAAM;AACdmE,QAAAA,KAAK,EAAC,MAAM;AACZvD,QAAAA,QAAQ,EAAC,UAAU;AACnBqE,QAAAA,UAAU,EAAC,QAAQ;AACnBC,QAAAA,GAAG,EAAC,WAAW;AACfC,QAAAA,SAAS,EAAC,QAAQ;AAClBC,QAAAA,SAAS,EAAC,MAAM;QAAA1D,QAAA,eAEhBiC,GAAA,CAAC/D,OAAO,EAAA;AAACI,UAAAA,OAAO,EAAC,MAAM;AAACqF,UAAAA,aAAa,EAAC,KAAK;AAAClB,UAAAA,KAAK,EAAC,aAAa;AAAAzC,UAAAA,QAAA,EAC5DK,cAAK,CAACuD,QAAQ,CAACC,GAAG,CAAC7D,QAAQ,EAAE,UAAC8D,KAAK,EAAEC,KAAK,EAAK;YAC9C,oBACEzB,IAAA,CAAA0B,QAAA,EAAA;AAAAhE,cAAAA,QAAA,GACG+D,KAAK,GAAG,CAAC,gBACR9B,GAAA,CAACgC,OAAO,EAAA;AACNC,gBAAAA,MAAM,EAAC,MAAM;AACbvF,gBAAAA,OAAO,EAAC,OAAO;AACfwF,gBAAAA,WAAW,EAAC,UAAU;AACtBC,gBAAAA,MAAM,EAAEvE,QAAQ,CAACoD,IAAI,CAAC,EAAE,CAAC,CAAA;AAAE,eAC5B,CAAC,GACA,IAAI,EACPa,KAAK,CAAA;AAAA,aACN,CAAC,CAAA;WAEN,CAAA;SACM,CAAA;AAAC,OACI,CAAC,eACjB7B,GAAA,CAAC1D,eAAe,EAAA;AACdI,QAAAA,OAAO,EAAC,OAAO;AACfC,QAAAA,MAAM,EAAEqC,eAAgB;AACxBvC,QAAAA,UAAU,EAAE6B,WAAW,IAAIM,YAAY,KAAK,KAAM;QAAAb,QAAA,eAElDiC,GAAA,CAACe,MAAM,EAAA;AACLC,UAAAA,IAAI,EAAC,QAAQ;AACbtE,UAAAA,OAAO,EAAC,UAAU;AAClBuE,UAAAA,IAAI,EAAEmB,gBAAiB;AACvBjB,UAAAA,kBAAkB,EAAC,cAAc;AACjCC,UAAAA,OAAO,EAAEzB,WAAAA;SACV,CAAA;AAAC,OACa,CAAC,CAAA;KACX,CAAA,CAAA;AAAC,GACY,CAAC,CAAA;AAE7B;;;;"}
+{"version":3,"file":"TabNav.web.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNav.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable consistent-return */\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TabNavContext } from './TabNavContext';\nimport { useResize } from './utils';\nimport type { TabNavItemData, TabNavProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { Divider } from '~components/Divider';\nimport { makeSize } from '~utils';\nimport { size } from '~tokens/global';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\n\nconst TabNavItems = ({ children, ...props }: BoxProps): React.ReactElement => {\n  return (\n    <Box {...props} display=\"flex\" width=\"100%\" gap=\"spacing.0\" position=\"relative\" left=\"-1px\">\n      {React.Children.map(children, (child, index) => {\n        return (\n          <>\n            {index > 0 ? (\n              <Divider\n                margin=\"auto\"\n                variant=\"muted\"\n                orientation=\"vertical\"\n                height={makeSize(size[16])}\n              />\n            ) : null}\n            {React.cloneElement(child as React.ReactElement, {\n              __isInsideTabNavItems: true,\n              __index: index,\n            })}\n          </>\n        );\n      })}\n      <Divider margin=\"auto\" variant=\"muted\" orientation=\"vertical\" height={makeSize(size[16])} />\n    </Box>\n  );\n};\n\nconst TabNav = ({\n  children,\n  items,\n  ...styledProps\n}: TabNavProps & StyledPropsBlade): React.ReactElement => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const [controlledItems, setControlledItems] = React.useState<TabNavItemData[]>(items);\n\n  const overflowingItems = controlledItems.filter(\n    (item) => item.isAlwaysOverflowing ?? item.isOverflowing,\n  );\n  const _items = controlledItems.filter((item) => !item.isAlwaysOverflowing && !item.isOverflowing);\n\n  // We need to memoize this callback otherwise it will cause infinite re-renders\n  // Because the ResizeObserver callback will be a new reference on every render\n  // and it will trigger a re-render\n  const resizeCallback = React.useCallback((resizeInfo: ResizeObserverEntry): void => {\n    const target = resizeInfo.target as HTMLElement;\n    const updateItems = (): void => {\n      setControlledItems((items) => {\n        return items.map((item, index) => {\n          // never overflow the first item\n          if (index === 0) return { ...item, isOverflowing: false };\n          // add padding to the offsetX to account the \"More\" menu's width changing due to the selection state (eg: More:ProdctName)\n          // Currently, hardcoding this to 150, we can make this dynamic too but that's causing layout thrashing\n          // because first we need to calculate the width of the \"More\" menu and then update the items\n          const padding = 150;\n          const offset = (item.offsetX! + padding)! - target.getBoundingClientRect().left;\n          if (offset > target.offsetWidth) {\n            return { ...item, isOverflowing: true };\n          } else {\n            return { ...item, isOverflowing: false };\n          }\n        });\n      });\n    };\n    // https://github.com/webpack/webpack/issues/14814\n    const flushSync = (ReactDOM as any)['flushSync'.toString()];\n    // Using flushSync to avoid layout thrashing,\n    // this will force React to flush all pending updates and only then update the DOM\n    if (flushSync !== undefined) {\n      flushSync(updateItems);\n    } else {\n      updateItems();\n    }\n  }, []);\n\n  useResize(ref, resizeCallback);\n\n  return (\n    <TabNavContext.Provider value={{ containerRef: ref, controlledItems, setControlledItems }}>\n      <BaseBox\n        as=\"nav\"\n        display=\"flex\"\n        width=\"100%\"\n        alignItems=\"center\"\n        alignSelf=\"end\"\n        position=\"relative\"\n        {...getStyledProps(styledProps)}\n        {...metaAttribute({ name: MetaConstants.TabNav })}\n        ref={ref}\n      >\n        <BaseBox display=\"flex\" width=\"100%\" position=\"relative\">\n          <BaseBox display=\"flex\" flexDirection=\"row\" width=\"max-content\">\n            {children({ items: _items, overflowingItems })}\n          </BaseBox>\n        </BaseBox>\n      </BaseBox>\n    </TabNavContext.Provider>\n  );\n};\n\nexport { TabNav, TabNavItems };\n"],"names":["TabNavItems","_ref","children","props","_objectWithoutProperties","_excluded","_jsxs","Box","_objectSpread","display","width","gap","position","left","React","Children","map","child","index","_Fragment","_jsx","Divider","margin","variant","orientation","height","makeSize","size","cloneElement","__isInsideTabNavItems","__index","TabNav","_ref2","items","styledProps","_excluded2","ref","useRef","_React$useState","useState","_React$useState2","_slicedToArray","controlledItems","setControlledItems","overflowingItems","filter","item","_item$isAlwaysOverflo","isAlwaysOverflowing","isOverflowing","_items","resizeCallback","useCallback","resizeInfo","target","updateItems","padding","offset","offsetX","getBoundingClientRect","offsetWidth","flushSync","ReactDOM","toString","undefined","useResize","TabNavContext","Provider","value","containerRef","BaseBox","as","alignItems","alignSelf","getStyledProps","metaAttribute","name","MetaConstants","flexDirection"],"mappings":"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"}

package/build/lib/web/development/components/TopNav/TabNav/TabNavContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNavContext.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNavContext.tsx"],"sourcesContent":["import React from 'react';\nimport { throwBladeError } from '~utils/logger';\n\ntype TabNavContextProps = {\n  containerRef: React.RefObject<HTMLDivElement>;\n  hasOverflow: boolean;\n};\nconst TabNavContext = React.createContext<TabNavContextProps | null>(null);\n\nconst useTabNavContext = (): TabNavContextProps => {\n  const context = React.useContext(TabNavContext);\n  if (!context) {\n    throwBladeError({\n      message: 'useTabNavContext must be used within a TabNavProvider',\n      moduleName: 'TabNav',\n    });\n  }\n  return context!;\n};\n\nexport { TabNavContext, useTabNavContext };\n"],"names":["TabNavContext","React","createContext","useTabNavContext","context","useContext","throwBladeError","message","moduleName"],"mappings":";;;;AAOA,IAAMA,aAAa,gBAAGC,cAAK,CAACC,aAAa,CAA4B,IAAI,EAAC;AAE1E,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,GAA6B;AACjD,EAAA,IAAMC,OAAO,GAAGH,cAAK,CAACI,UAAU,CAACL,aAAa,CAAC,CAAA;EAC/C,IAAI,CAACI,OAAO,EAAE;AACZE,IAAAA,eAAe,CAAC;AACdC,MAAAA,OAAO,EAAE,uDAAuD;AAChEC,MAAAA,UAAU,EAAE,QAAA;AACd,KAAC,CAAC,CAAA;AACJ,GAAA;AACA,EAAA,OAAOJ,OAAO,CAAA;AAChB;;;;"}
+{"version":3,"file":"TabNavContext.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNavContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { TabNavItemData } from './types';\nimport { throwBladeError } from '~utils/logger';\n\ntype TabNavContextProps = {\n  containerRef: React.RefObject<HTMLDivElement>;\n  controlledItems: TabNavItemData[];\n  setControlledItems: React.Dispatch<React.SetStateAction<TabNavItemData[]>>;\n};\nconst TabNavContext = React.createContext<TabNavContextProps | null>(null);\n\nconst useTabNavContext = (): TabNavContextProps => {\n  const context = React.useContext(TabNavContext);\n  if (!context) {\n    throwBladeError({\n      message: 'useTabNavContext must be used within a TabNavProvider',\n      moduleName: 'TabNav',\n    });\n  }\n  return context!;\n};\n\nexport { TabNavContext, useTabNavContext };\n"],"names":["TabNavContext","React","createContext","useTabNavContext","context","useContext","throwBladeError","message","moduleName"],"mappings":";;;;AASA,IAAMA,aAAa,gBAAGC,cAAK,CAACC,aAAa,CAA4B,IAAI,EAAC;AAE1E,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,GAA6B;AACjD,EAAA,IAAMC,OAAO,GAAGH,cAAK,CAACI,UAAU,CAACL,aAAa,CAAC,CAAA;EAC/C,IAAI,CAACI,OAAO,EAAE;AACZE,IAAAA,eAAe,CAAC;AACdC,MAAAA,OAAO,EAAE,uDAAuD;AAChEC,MAAAA,UAAU,EAAE,QAAA;AACd,KAAC,CAAC,CAAA;AACJ,GAAA;AACA,EAAA,OAAOJ,OAAO,CAAA;AAChB;;;;"}

package/build/lib/web/development/components/TopNav/TabNav/TabNavItem.web.js

@@ -2,7 +2,6 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
 import styled from 'styled-components';
-import { useTopNavContext } from '../TopNavContext.js';
 import { useTabNavContext } from './TabNavContext.js';
 import { MIXED_BG_COLOR } from './utils.js';
 import '../../Box/BaseBox/index.js';
@@ -11,10 +10,8 @@ import '../../../utils/index.js';
 import '../../../utils/assignWithoutSideEffects/index.js';
 import '../../../utils/makeAccessible/index.js';
 import '../../../tokens/global/index.js';
-import { useIsomorphicLayoutEffect } from '../../../utils/useIsomorphicLayoutEffect.js';
-import { mergeRefs } from '../../../utils/useMergeRefs.js';
-import getIn from '../../../utils/lodashButBetter/get.js';
 import '../../../utils/metaAttribute/index.js';
+import { useIsomorphicLayoutEffect } from '../../../utils/useIsomorphicLayoutEffect.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
 import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
@@ -27,7 +24,7 @@ import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
 import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.web.js';
 import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
-var _excluded = ["as", "children", "isActive", "icon", "trailing", "accessibilityLabel", "href", "target"];
+var _excluded = ["as", "title", "isActive", "icon", "trailing", "accessibilityLabel", "href", "target", "__isInsideTabNavItems", "__index"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var StyledTabNavItem = /*#__PURE__*/styled.a.withConfig({
@@ -55,6 +52,12 @@ var StyledTabNavItem = /*#__PURE__*/styled.a.withConfig({
     paddingLeft: makeSpace(theme.spacing[4]),
     paddingRight: makeSpace(theme.spacing[4]),
     borderRadius: makeBorderSize(theme.border.radius.medium),
+    // reset button styles
+    border: 'none',
+    background: 'none',
+    '&[aria-expanded="true"]': $isActive ? {} : {
+      backgroundColor: theme.colors.interactive.background.gray["default"]
+    },
     '&:hover': $isActive ? {} : {
       backgroundColor: theme.colors.interactive.background.gray["default"]
     }
@@ -65,16 +68,15 @@ var StyledTabNavItemWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
   componentId: "sc-1eiaez7-1"
 })(function (_ref2) {
   var theme = _ref2.theme,
-    isActive = _ref2.isActive,
-    dividerHiderColor = _ref2.dividerHiderColor;
+    isActive = _ref2.isActive;
   var dividerHiderStyle = {
     content: '""',
     position: 'absolute',
     top: '50%',
     transform: 'translateY(-50%)',
     width: makeSize(size[1]),
-    height: '50%',
-    backgroundColor: getIn(theme.colors, dividerHiderColor, MIXED_BG_COLOR)
+    height: makeSize(size[16]),
+    backgroundColor: MIXED_BG_COLOR
   };
   return _objectSpread({
     position: 'relative',
@@ -83,14 +85,12 @@ var StyledTabNavItemWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
     backgroundColor: isActive ? theme.colors.surface.background.gray.intense : 'transparent',
     borderColor: isActive ? theme.colors.surface.border.gray.muted : 'transparent',
     borderStyle: 'solid',
-    borderBottomWidth: 0,
     borderWidth: makeBorderSize(theme.border.width.thin),
+    borderBottomWidth: 0,
     borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),
     borderTopRightRadius: makeBorderSize(theme.border.radius.medium),
-    // Animation
-    transform: isActive ? "translateY(".concat(makeSize(size[2]), ")") : 'none',
     transition: "".concat(makeMotionTime(theme.motion.duration.moderate), " ").concat(theme.motion.easing.standard.effective),
-    transitionProperty: 'background, transform'
+    transitionProperty: 'background'
   }, isActive ? {
     ':before, :after': dividerHiderStyle,
     ':before': {
@@ -125,56 +125,49 @@ var SelectedBar = /*#__PURE__*/styled(BaseBox).withConfig({
 });
 var _TabNavItem = function _TabNavItem(_ref4, ref) {
   var as = _ref4.as,
-    children = _ref4.children,
+    title = _ref4.title,
     isActive = _ref4.isActive,
     Icon = _ref4.icon,
     trailing = _ref4.trailing,
     accessibilityLabel = _ref4.accessibilityLabel,
     href = _ref4.href,
     target = _ref4.target,
+    __isInsideTabNavItems = _ref4.__isInsideTabNavItems,
+    __index = _ref4.__index,
     props = _objectWithoutProperties(_ref4, _excluded);
   var _useTabNavContext = useTabNavContext(),
-    containerRef = _useTabNavContext.containerRef,
-    hasOverflow = _useTabNavContext.hasOverflow;
-  var _useTopNavContext = useTopNavContext(),
-    backgroundColor = _useTopNavContext.backgroundColor;
-  var linkRef = React__default.useRef(null);
+    setControlledItems = _useTabNavContext.setControlledItems;
+  var bodyRef = React__default.useRef(null);
 
-  // Scroll the active tab into view
-  // Only if the tab is very close to the edge
-  // Or if the tab is out of view
+  // Update the controlledItems with the tabWidth and offsetX
   useIsomorphicLayoutEffect(function () {
-    if (!isActive || !hasOverflow) return;
-    if (!('requestAnimationFrame' in window)) return;
-    window.requestAnimationFrame(function () {
-      if (!linkRef.current || !containerRef.current) return;
-      var buffer = 100;
-      var container = containerRef.current;
-      var linkElement = linkRef.current;
-      var containerRect = container.getBoundingClientRect();
-      var linkRect = linkElement.getBoundingClientRect();
-      var isCloseToStart = linkRect.left < containerRect.left + buffer;
-      var isCloseToEnd = linkRect.right > containerRect.right - buffer;
-      if (isCloseToStart || isCloseToEnd) {
-        linkElement.scrollIntoView({
-          behavior: 'smooth',
-          inline: 'center',
-          block: 'nearest'
+    if (!bodyRef.current) return;
+    if (!__isInsideTabNavItems) return;
+    setControlledItems(function (prev) {
+      return prev.map(function (item, index) {
+        var _bodyRef$current;
+        if (index !== __index) return item;
+        var bounds = bodyRef === null || bodyRef === void 0 ? void 0 : (_bodyRef$current = bodyRef.current) === null || _bodyRef$current === void 0 ? void 0 : _bodyRef$current.getBoundingClientRect();
+        var tabWidth = bounds.width;
+        var offsetX = bounds.right;
+        return _objectSpread(_objectSpread({}, item), {}, {
+          tabWidth: tabWidth,
+          offsetX: offsetX
         });
-      }
+      });
     });
-  }, [hasOverflow, isActive]);
+  }, [__isInsideTabNavItems, __index, setControlledItems]);
   return /*#__PURE__*/jsxs(StyledTabNavItemWrapper, _objectSpread(_objectSpread({
-    isActive: isActive,
-    dividerHiderColor: backgroundColor
+    ref: bodyRef,
+    isActive: isActive
   }, metaAttribute({
     name: MetaConstants.TabNavItem
   })), {}, {
     children: [/*#__PURE__*/jsx(SelectedBar, {
       isActive: isActive
     }), /*#__PURE__*/jsxs(StyledTabNavItem, _objectSpread(_objectSpread(_objectSpread({
-      ref: mergeRefs(ref, linkRef),
-      as: as !== null && as !== void 0 ? as : 'a',
+      ref: ref,
+      as: as !== null && as !== void 0 ? as : href ? 'a' : 'button',
       to: href,
       href: as ? undefined : href,
       target: target,
@@ -186,7 +179,7 @@ var _TabNavItem = function _TabNavItem(_ref4, ref) {
       children: [Icon ? /*#__PURE__*/jsx(Icon, {
         size: "large",
         color: isActive ? 'interactive.icon.gray.normal' : 'surface.icon.gray.subtle'
-      }) : null, children, trailing ? trailing : null]
+      }) : null, title, trailing ? trailing : null]
     }))]
   }));
 };