@razorpay/blade 12.25.0 → 12.25.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +5 -5
  2. package/build/lib/web/development/components/TopNav/TabNav/TabNav.web.js +3 -3
  3. package/build/lib/web/development/components/TopNav/TabNav/TabNav.web.js.map +1 -1
  4. package/build/lib/web/production/components/TopNav/TabNav/TabNav.web.js +3 -3
  5. package/build/lib/web/production/components/TopNav/TabNav/TabNav.web.js.map +1 -1
  6. package/build/types/components/index.d.ts +1 -1
  7. package/package.json +1 -3
package/README.md CHANGED
@@ -1,9 +1,9 @@
1
1
  <br/>
2
2
  <p align="center">
3
3
  <picture>
4
- <source media="(prefers-color-scheme: dark)" srcset="./branding/blade-original-dark-mode.min.svg">
5
- <source media="(prefers-color-scheme: light)" srcset="./branding/blade-original.min.svg">
6
- <img width="450px" alt="Blade Design System Logo" src="./branding/blade-original.min.svg">
4
+ <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/razorpay/blade/refs/heads/master/branding/blade-original-dark-mode.min.svg">
5
+ <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/razorpay/blade/refs/heads/master/branding/blade-original.min.svg">
6
+ <img width="450px" alt="Blade Design System Logo" src="https://raw.githubusercontent.com/razorpay/blade/refs/heads/master/branding/blade-original.min.svg">
7
7
  </picture>
8
8
  </p>
9
9
 
@@ -16,7 +16,7 @@
16
16
 
17
17
  <br/>
18
18
 
19
- Blade is the Design System that powers [Razorpay](https://razorpay.com/).
19
+ Blade is the Design System that powers [Razorpay](https://razorpay.com/).
20
20
 
21
21
  ## 🔗 Links
22
22
 
@@ -25,6 +25,7 @@ Blade is the Design System that powers [Razorpay](https://razorpay.com/).
25
25
  - [@razorpay/blade-old](https://github.com/razorpay/blade-old) (Deprecated, Private)
26
26
 
27
27
  ## ✨ Features
28
+
28
29
  - Cross-Platform (Works Natively on [React Web and React Native](https://blade.razorpay.com/?path=/docs/guides-installation--docs))
29
30
  - [White Labelling](https://blade.razorpay.com/?path=/docs/guides-theming-theme-playground--docs)
30
31
  - [Accessible](https://github.com/razorpay/blade/blob/master/rfcs/2022-04-09-accessibility.md#manual-testing)
@@ -37,4 +38,3 @@ Licensed under the [MIT License](https://github.com/razorpay/blade/blob/master/L
37
38
  <h1 aria-hidden="true"></h1>
38
39
 
39
40
  <p align="center">Interested in working with us? Checkout our <a href="https://razorpay.com/jobs">Jobs Page</a> for open roles 🤗</p>
40
-
package/build/lib/web/development/components/TopNav/TabNav/TabNav.web.js CHANGED
@@ -61,7 +61,7 @@ var TabNavItems = function TabNavItems(_ref) {
61
61
  var TabNav = function TabNav(_ref2) {
62
62
  var children = _ref2.children,
63
63
  items = _ref2.items,
64
- styledProps = _objectWithoutProperties(_ref2, _excluded2);
64
+ rest = _objectWithoutProperties(_ref2, _excluded2);
65
65
  var ref = React__default.useRef(null);
66
66
  var _React$useState = React__default.useState(items),
67
67
  _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -121,14 +121,14 @@ var TabNav = function TabNav(_ref2) {
121
121
  controlledItems: controlledItems,
122
122
  setControlledItems: setControlledItems
123
123
  },
124
- children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
124
+ children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
125
125
  as: "nav",
126
126
  display: "flex",
127
127
  width: "100%",
128
128
  alignItems: "center",
129
129
  alignSelf: "end",
130
130
  position: "relative"
131
- }, getStyledProps(styledProps)), metaAttribute({
131
+ }, getStyledProps(rest)), makeAnalyticsAttribute(rest)), metaAttribute({
132
132
  name: MetaConstants.TabNav
133
133
  })), {}, {
134
134
  ref: ref,
package/build/lib/web/development/components/TopNav/TabNav/TabNav.web.js.map CHANGED
@@ -1 +1 @@
1
- {"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 { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst TabNavItems = ({ children, ...rest }: BoxProps): React.ReactElement => {\n return (\n <BaseBox\n {...rest}\n display=\"flex\"\n width=\"100%\"\n gap=\"spacing.0\"\n position=\"relative\"\n left=\"-1px\"\n {...metaAttribute({ name: MetaConstants.TabNavItems })}\n {...makeAnalyticsAttribute(rest)}\n >\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 </BaseBox>\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","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","_objectSpread","display","width","gap","position","left","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","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","as","alignItems","alignSelf","getStyledProps","flexDirection"],"mappings":"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"}
1
+ {"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 { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport type { DataAnalyticsAttribute } from '~utils/types';\n\nconst TabNavItems = ({ children, ...rest }: BoxProps): React.ReactElement => {\n return (\n <BaseBox\n {...rest}\n display=\"flex\"\n width=\"100%\"\n gap=\"spacing.0\"\n position=\"relative\"\n left=\"-1px\"\n {...metaAttribute({ name: MetaConstants.TabNavItems })}\n {...makeAnalyticsAttribute(rest)}\n >\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 </BaseBox>\n );\n};\n\nconst TabNav = ({\n children,\n items,\n ...rest\n}: TabNavProps & StyledPropsBlade & DataAnalyticsAttribute): 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(rest)}\n {...makeAnalyticsAttribute(rest)}\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","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","_objectSpread","display","width","gap","position","left","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","React","Children","map","child","index","_Fragment","_jsx","Divider","margin","variant","orientation","height","makeSize","size","cloneElement","__isInsideTabNavItems","__index","TabNav","_ref2","items","_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","as","alignItems","alignSelf","getStyledProps","flexDirection"],"mappings":"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"}
package/build/lib/web/production/components/TopNav/TabNav/TabNav.web.js CHANGED
@@ -61,7 +61,7 @@ var TabNavItems = function TabNavItems(_ref) {
61
61
  var TabNav = function TabNav(_ref2) {
62
62
  var children = _ref2.children,
63
63
  items = _ref2.items,
64
- styledProps = _objectWithoutProperties(_ref2, _excluded2);
64
+ rest = _objectWithoutProperties(_ref2, _excluded2);
65
65
  var ref = React__default.useRef(null);
66
66
  var _React$useState = React__default.useState(items),
67
67
  _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -121,14 +121,14 @@ var TabNav = function TabNav(_ref2) {
121
121
  controlledItems: controlledItems,
122
122
  setControlledItems: setControlledItems
123
123
  },
124
- children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
124
+ children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
125
125
  as: "nav",
126
126
  display: "flex",
127
127
  width: "100%",
128
128
  alignItems: "center",
129
129
  alignSelf: "end",
130
130
  position: "relative"
131
- }, getStyledProps(styledProps)), metaAttribute({
131
+ }, getStyledProps(rest)), makeAnalyticsAttribute(rest)), metaAttribute({
132
132
  name: MetaConstants.TabNav
133
133
  })), {}, {
134
134
  ref: ref,
package/build/lib/web/production/components/TopNav/TabNav/TabNav.web.js.map CHANGED
@@ -1 +1 @@
1
- {"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 { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst TabNavItems = ({ children, ...rest }: BoxProps): React.ReactElement => {\n return (\n <BaseBox\n {...rest}\n display=\"flex\"\n width=\"100%\"\n gap=\"spacing.0\"\n position=\"relative\"\n left=\"-1px\"\n {...metaAttribute({ name: MetaConstants.TabNavItems })}\n {...makeAnalyticsAttribute(rest)}\n >\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 </BaseBox>\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","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","_objectSpread","display","width","gap","position","left","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","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","as","alignItems","alignSelf","getStyledProps","flexDirection"],"mappings":"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"}
1
+ {"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 { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport type { DataAnalyticsAttribute } from '~utils/types';\n\nconst TabNavItems = ({ children, ...rest }: BoxProps): React.ReactElement => {\n return (\n <BaseBox\n {...rest}\n display=\"flex\"\n width=\"100%\"\n gap=\"spacing.0\"\n position=\"relative\"\n left=\"-1px\"\n {...metaAttribute({ name: MetaConstants.TabNavItems })}\n {...makeAnalyticsAttribute(rest)}\n >\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 </BaseBox>\n );\n};\n\nconst TabNav = ({\n children,\n items,\n ...rest\n}: TabNavProps & StyledPropsBlade & DataAnalyticsAttribute): 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(rest)}\n {...makeAnalyticsAttribute(rest)}\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","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","_objectSpread","display","width","gap","position","left","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","React","Children","map","child","index","_Fragment","_jsx","Divider","margin","variant","orientation","height","makeSize","size","cloneElement","__isInsideTabNavItems","__index","TabNav","_ref2","items","_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","as","alignItems","alignSelf","getStyledProps","flexDirection"],"mappings":"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"}
package/build/types/components/index.d.ts CHANGED
@@ -25270,7 +25270,7 @@ type TabNavProps = {
25270
25270
  };
25271
25271
 
25272
25272
  declare const TabNavItems: ({ children, ...rest }: BoxProps) => React__default.ReactElement;
25273
- declare const TabNav: ({ children, items, ...styledProps }: TabNavProps & StyledPropsBlade) => React__default.ReactElement;
25273
+ declare const TabNav: ({ children, items, ...rest }: TabNavProps & StyledPropsBlade & DataAnalyticsAttribute) => React__default.ReactElement;
25274
25274
 
25275
25275
  declare const TabNavItem: React__default.ForwardRefExoticComponent<{
25276
25276
  href?: string | undefined;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@razorpay/blade",
3
3
  "description": "The Design System that powers Razorpay",
4
- "version": "12.25.0",
4
+ "version": "12.25.1",
5
5
  "license": "MIT",
6
6
  "engines": {
7
7
  "node": ">=18.12.1"
@@ -127,10 +127,8 @@
127
127
  "watch:test:react": "yarn test:react --watch --onlyChanged",
128
128
  "watch:test:react-native": "yarn test:react-native --watch --onlyChanged",
129
129
  "chromatic": "npx chromatic",
130
- "publish-npm": "node ./scripts/publishToNpm.js",
131
130
  "pregenerate-bundle-size-info": "yarn run-s build:clean build:generate-types build:react-prod",
132
131
  "generate-bundle-size-info": "node ./scripts/generateBundleSizeInfo.js",
133
- "generate-github-npmrc": "node ./scripts/generateGitHubRegistryNpmrc.js",
134
132
  "generate-docs-lockfile": "node ./scripts/generateDocsLockFile.mjs",
135
133
  "generate-icons": "node ./scripts/generateIcons.mjs"
136
134
  },