npm - @razorpay/blade - Versions diffs - 12.12.0 → 12.12.1 - Mend

@razorpay/blade 12.12.0 → 12.12.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 (43) hide show

package/build/lib/web/production/components/Tabs/TabItem.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabItem.web.js","sources":["../../../../../../src/components/Tabs/TabItem.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion /\n/ eslint-disable @typescript-eslint/prefer-nullish-coalescing /\nimport styled from 'styled-components';\nimport React from 'react';\nimport { CompositeItem } from '@floating-ui/react';\nimport type { TabItemProps, TabsProps } from './types';\nimport { useTabsContext } from './TabsContext';\nimport { backgroundColor, paddingY, paddingX, textColor, iconColor } from './tabTokens';\nimport { iconSizeMap, useTabsItemPropRestriction } from './utils';\nimport { Text } from '~components/Typography';\nimport { castWebType, getMediaQuery, makeBorderSize, makeMotionTime, makeSpace } from '~utils';\nimport useInteraction from '~utils/useInteraction';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { breakpoints } from '~tokens/global';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst StyledTabButton = styled.button<{\n size: TabsProps['size'];\n isFullWidthTabItem?: TabsProps['isFullWidthTabItem'];\n variant: NonNullable<TabsProps['variant']>;\n isVertical: boolean;\n isSelected: boolean;\n}>(({ theme, isSelected, size, variant, isFullWidthTabItem, isVertical }) => {\n const isFilled = variant === 'filled';\n const orientation = isVertical ? 'vertical' : 'horizontal';\n const border = isVertical ? 'borderLeft' : 'borderBottom';\n const selectedState: 'selected' \| 'unselected' = isSelected ? 'selected' : 'unselected';\n const _variant = variant === 'borderless' ? 'bordered' : variant;\n const background = backgroundColor[selectedState][_variant];\n\n return {\n appearance: 'none',\n textDecoration: 'none',\n border: 'none',\n outline: 'none',\n cursor: 'pointer',\n display: 'flex',\n alignItems: 'center',\n justifyContent: isVertical ? 'left' : 'center',\n gap: makeSpace(theme.spacing[3]),\n width: isFullWidthTabItem ? '100%' : undefined,\n\n // Padding\n paddingTop: makeSpace(getIn(theme, paddingY[_variant][orientation].desktop[size!])),\n paddingBottom: makeSpace(getIn(theme, paddingY[_variant][orientation].desktop[size!])),\n paddingLeft: makeSpace(getIn(theme, paddingX[_variant][orientation].desktop[size!])),\n paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation].desktop[size!])),\n\n [`@media ${getMediaQuery({ min: breakpoints.base, max: breakpoints.m })}`]: {\n paddingTop: makeSpace(getIn(theme, paddingY[_variant][orientation].mobile[size!])),\n paddingBottom: makeSpace(getIn(theme, paddingY[_variant][orientation].mobile[size!])),\n paddingLeft: makeSpace(getIn(theme, paddingX[_variant][orientation].mobile[size!])),\n paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation].mobile[size!])),\n },\n\n // colors\n backgroundColor:\n isSelected && isFilled && !isVertical ? 'transparent' : getIn(theme, background.default),\n borderRadius: isFilled && !isVertical ? theme.border.radius.small : 0,\n [`${border}Style`]: 'solid',\n [`${border}Width`]: isFilled\n ? 0\n : makeBorderSize(isVertical ? theme.border.width.thick : theme.border.width.thin),\n [`${border}Color`]:\n isVertical && isSelected ? theme.colors.interactive.border.primary.default : 'transparent',\n\n // states\n '&:hover': {\n [`${border}Color`]:\n isVertical && isSelected\n ? theme.colors.interactive.border.primary.default\n : theme.colors.interactive.border.gray.highlighted,\n backgroundColor:\n // Don't want to show hover state on filled tabs when vertical because\n // The hover color needs to be on the TabIndicator instead.\n isSelected && isFilled && !isVertical\n ? 'transparent'\n : getIn(theme, background.highlighted),\n },\n '&:disabled': {\n cursor: 'not-allowed',\n backgroundColor: getIn(theme, background.disabled),\n },\n '&:focus-visible': {\n borderRadius: makeSpace(theme.border.radius.medium),\n boxShadow: `0px 0px 0px 4px ${theme.colors.surface.border.primary.muted}`,\n backgroundColor: getIn(theme, background.highlighted),\n },\n\n transitionProperty: 'all',\n transitionTimingFunction: castWebType(theme.motion.easing.standard),\n transitionDuration: castWebType(makeMotionTime(theme.motion.duration.gentle)),\n '': {\n transitionProperty: 'color, fill',\n transitionTimingFunction: castWebType(theme.motion.easing.standard),\n transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),\n },\n };\n});\n\nconst TabItem = ({\n children,\n value,\n leading: Leading,\n trailing,\n isDisabled = false,\n href,\n onClick,\n ...rest\n}: TabItemProps): React.ReactElement => {\n const {\n size,\n isFullWidthTabItem,\n selectedValue,\n setSelectedValue,\n baseId,\n variant,\n isVertical,\n } = useTabsContext();\n const { currentInteraction, ...interactionProps } = useInteraction();\n const validatedTrailingComponent = useTabsItemPropRestriction(trailing, size!);\n const isSelected = selectedValue === value;\n const selectedState = isSelected ? 'selected' : 'unselected';\n const panelId = `${baseId}-${value}-tabpanel`;\n const tabItemId = `${baseId}-${value}-tabitem`;\n const isFilled = variant === 'filled';\n\n const interactionMap = {\n default: 'default',\n hover: 'highlighted',\n focus: 'highlighted',\n disabled: 'disabled',\n } as const;\n const interaction = isDisabled ? 'disabled' : interactionMap[currentInteraction];\n\n return (\n <CompositeItem\n render={\n <StyledTabButton\n type=\"button\"\n as={href ? 'a' : 'button'}\n href={href}\n isVertical={isVertical}\n isSelected={isSelected}\n variant={variant!}\n isFullWidthTabItem={isFullWidthTabItem \|\| isFilled}\n id={tabItemId}\n size={size}\n disabled={isDisabled}\n {...interactionProps}\n onClick={(e: React.MouseEvent) => {\n setSelectedValue?.(() => value);\n onClick?.(e);\n }}\n {...makeAccessible({\n role: 'tab',\n selected: isSelected,\n controls: panelId,\n })}\n {...metaAttribute({ name: MetaConstants.TabItem })}\n {...makeAnalyticsAttribute(rest)}\n >\n {Leading ? (\n <Leading size={iconSizeMap[size!]} color={iconColor[selectedState][interaction]} />\n ) : null}\n <Text\n color={textColor[selectedState][interaction]}\n size={size === 'medium' ? 'medium' : 'large'}\n weight=\"semibold\"\n >\n {children}\n </Text>\n {validatedTrailingComponent}\n </StyledTabButton>\n }\n />\n );\n};\n\nexport { TabItem };\n"],"names":["StyledTabButton","styled","button","withConfig","displayName","componentId","_ref","_ref2","theme","isSelected","size","variant","isFullWidthTabItem","isVertical","isFilled","orientation","border","selectedState","_variant","background","backgroundColor","appearance","textDecoration","outline","cursor","display","alignItems","justifyContent","gap","makeSpace","spacing","width","undefined","paddingTop","getIn","paddingY","desktop","paddingBottom","paddingLeft","paddingX","paddingRight","_defineProperty","concat","getMediaQuery","min","breakpoints","base","max","m","mobile","radius","small","makeBorderSize","thick","thin","colors","interactive","primary","gray","highlighted","disabled","borderRadius","medium","boxShadow","surface","muted","castWebType","motion","easing","standard","makeMotionTime","duration","gentle","transitionProperty","transitionTimingFunction","transitionDuration","xquick","TabItem","_ref3","children","value","Leading","leading","trailing","_ref3$isDisabled","isDisabled","href","onClick","rest","_objectWithoutProperties","_excluded","_useTabsContext","useTabsContext","selectedValue","setSelectedValue","baseId","_useInteraction","useInteraction","currentInteraction","interactionProps","_excluded2","validatedTrailingComponent","useTabsItemPropRestriction","panelId","tabItemId","interactionMap","hover","focus","interaction","_jsx","CompositeItem","render","_jsxs","_objectSpread","type","as","id","e","makeAccessible","role","selected","controls","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","iconSizeMap","color","iconColor","Text","textColor","weight"],"mappings":"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"}
1	+ {"version":3,"file":"TabItem.web.js","sources":["../../../../../../src/components/Tabs/TabItem.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion /\n/ eslint-disable @typescript-eslint/prefer-nullish-coalescing /\nimport styled from 'styled-components';\nimport React from 'react';\nimport { CompositeItem } from '@floating-ui/react';\nimport type { TabItemProps, TabsProps } from './types';\nimport { useTabsContext } from './TabsContext';\nimport { backgroundColor, paddingY, paddingX, textColor, iconColor } from './tabTokens';\nimport { iconSizeMap, useTabsItemPropRestriction } from './utils';\nimport { Text } from '~components/Typography';\nimport { castWebType, getMediaQuery, makeBorderSize, makeMotionTime, makeSpace } from '~utils';\nimport useInteraction from '~utils/useInteraction';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { breakpoints } from '~tokens/global';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst StyledTabButton = styled.button<{\n size: TabsProps['size'];\n isFullWidthTabItem?: TabsProps['isFullWidthTabItem'];\n variant: NonNullable<TabsProps['variant']>;\n isVertical: boolean;\n isSelected: boolean;\n}>(({ theme, isSelected, size, variant, isFullWidthTabItem, isVertical }) => {\n const isFilled = variant === 'filled';\n const orientation = isVertical ? 'vertical' : 'horizontal';\n const border = isVertical ? 'borderLeft' : 'borderBottom';\n const selectedState: 'selected' \| 'unselected' = isSelected ? 'selected' : 'unselected';\n const _variant = variant === 'borderless' ? 'bordered' : variant;\n const background = backgroundColor[selectedState][_variant];\n\n return {\n appearance: 'none',\n textDecoration: 'none',\n border: 'none',\n outline: 'none',\n cursor: 'pointer',\n display: 'flex',\n alignItems: 'center',\n justifyContent: isVertical ? 'left' : 'center',\n gap: makeSpace(theme.spacing[3]),\n width: isFullWidthTabItem ? '100%' : undefined,\n\n // Padding\n paddingTop: makeSpace(getIn(theme, paddingY[_variant][orientation].desktop[size!])),\n paddingBottom: makeSpace(getIn(theme, paddingY[_variant][orientation].desktop[size!])),\n paddingLeft: makeSpace(getIn(theme, paddingX[_variant][orientation].desktop[size!])),\n paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation].desktop[size!])),\n\n [`@media ${getMediaQuery({ min: breakpoints.base, max: breakpoints.m })}`]: {\n paddingTop: makeSpace(getIn(theme, paddingY[_variant][orientation].mobile[size!])),\n paddingBottom: makeSpace(getIn(theme, paddingY[_variant][orientation].mobile[size!])),\n paddingLeft: makeSpace(getIn(theme, paddingX[_variant][orientation].mobile[size!])),\n paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation].mobile[size!])),\n },\n\n // colors\n backgroundColor:\n isSelected && isFilled && !isVertical ? 'transparent' : getIn(theme, background.default),\n borderRadius: isFilled && !isVertical ? theme.border.radius.small : 0,\n [`${border}Style`]: 'solid',\n [`${border}Width`]: isFilled\n ? 0\n : makeBorderSize(isVertical ? theme.border.width.thick : theme.border.width.thin),\n [`${border}Color`]:\n isVertical && isSelected ? theme.colors.interactive.border.primary.default : 'transparent',\n\n // states\n '&:hover': {\n [`${border}Color`]:\n isVertical && isSelected\n ? theme.colors.interactive.border.primary.default\n : theme.colors.interactive.border.gray.highlighted,\n backgroundColor:\n // Don't want to show hover state on filled tabs when vertical because\n // The hover color needs to be on the TabIndicator instead.\n isSelected && isFilled && !isVertical\n ? 'transparent'\n : getIn(theme, background.highlighted),\n },\n '&:disabled': {\n cursor: 'not-allowed',\n backgroundColor: getIn(theme, background.disabled),\n },\n '&:focus-visible': {\n borderRadius: makeSpace(theme.border.radius.medium),\n boxShadow: `0px 0px 0px 4px ${theme.colors.surface.border.primary.muted}`,\n backgroundColor: getIn(theme, background.highlighted),\n },\n\n transitionProperty: 'all',\n transitionTimingFunction: castWebType(theme.motion.easing.standard),\n transitionDuration: castWebType(makeMotionTime(theme.motion.duration.gentle)),\n '': {\n transitionProperty: 'color, fill',\n transitionTimingFunction: castWebType(theme.motion.easing.standard),\n transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),\n },\n };\n});\n\nconst TabItem = ({\n children,\n value,\n leading: Leading,\n trailing,\n isDisabled = false,\n href,\n onClick,\n ...rest\n}: TabItemProps): React.ReactElement => {\n const {\n size,\n isFullWidthTabItem,\n selectedValue,\n setSelectedValue,\n baseId,\n variant,\n isVertical,\n } = useTabsContext();\n const { currentInteraction, ...interactionProps } = useInteraction();\n const validatedTrailingComponent = useTabsItemPropRestriction(trailing, size!);\n const isSelected = selectedValue === value;\n const selectedState = isSelected ? 'selected' : 'unselected';\n const panelId = `${baseId}-${value}-tabpanel`;\n const tabItemId = `${baseId}-${value}-tabitem`;\n const isFilled = variant === 'filled';\n\n const interactionMap = {\n default: 'default',\n hover: 'highlighted',\n focus: 'highlighted',\n disabled: 'disabled',\n } as const;\n const interaction = isDisabled ? 'disabled' : interactionMap[currentInteraction];\n\n return (\n <CompositeItem\n render={\n <StyledTabButton\n type=\"button\"\n as={href ? 'a' : 'button'}\n href={href}\n isVertical={isVertical}\n isSelected={isSelected}\n variant={variant!}\n isFullWidthTabItem={isFullWidthTabItem \|\| isFilled}\n id={tabItemId}\n size={size}\n disabled={isDisabled}\n {...interactionProps}\n onClick={(e: React.MouseEvent) => {\n setSelectedValue?.(() => value);\n onClick?.(e);\n }}\n {...makeAccessible({\n role: 'tab',\n selected: isSelected,\n controls: panelId,\n })}\n {...metaAttribute({ name: MetaConstants.TabItem })}\n {...makeAnalyticsAttribute(rest)}\n >\n {Leading ? (\n <Leading size={iconSizeMap[size!]} color={iconColor[selectedState][interaction]} />\n ) : null}\n\n {children ? (\n <Text\n color={textColor[selectedState][interaction]}\n size={size === 'medium' ? 'medium' : 'large'}\n weight=\"semibold\"\n >\n {children}\n </Text>\n ) : null}\n\n {validatedTrailingComponent}\n </StyledTabButton>\n }\n />\n );\n};\n\nexport { TabItem };\n"],"names":["StyledTabButton","styled","button","withConfig","displayName","componentId","_ref","_ref2","theme","isSelected","size","variant","isFullWidthTabItem","isVertical","isFilled","orientation","border","selectedState","_variant","background","backgroundColor","appearance","textDecoration","outline","cursor","display","alignItems","justifyContent","gap","makeSpace","spacing","width","undefined","paddingTop","getIn","paddingY","desktop","paddingBottom","paddingLeft","paddingX","paddingRight","_defineProperty","concat","getMediaQuery","min","breakpoints","base","max","m","mobile","radius","small","makeBorderSize","thick","thin","colors","interactive","primary","gray","highlighted","disabled","borderRadius","medium","boxShadow","surface","muted","castWebType","motion","easing","standard","makeMotionTime","duration","gentle","transitionProperty","transitionTimingFunction","transitionDuration","xquick","TabItem","_ref3","children","value","Leading","leading","trailing","_ref3$isDisabled","isDisabled","href","onClick","rest","_objectWithoutProperties","_excluded","_useTabsContext","useTabsContext","selectedValue","setSelectedValue","baseId","_useInteraction","useInteraction","currentInteraction","interactionProps","_excluded2","validatedTrailingComponent","useTabsItemPropRestriction","panelId","tabItemId","interactionMap","hover","focus","interaction","_jsx","CompositeItem","render","_jsxs","_objectSpread","type","as","id","e","makeAccessible","role","selected","controls","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","iconSizeMap","color","iconColor","Text","textColor","weight"],"mappings":"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"}

package/build/lib/web/production/components/Tabs/TabList.web.js CHANGED Viewed

@@ -8,19 +8,17 @@ import { TabIndicator } from './TabIndicator.web.js';
 import { trackColor } from './tabTokens.js';
 import '../Box/BaseBox/index.js';
 import { useIsomorphicLayoutEffect } from '../../utils/useIsomorphicLayoutEffect.js';
-import '../Divider/index.js';
 import '../Box/index.js';
 import '../Box/styledProps/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { Box } from '../Box/Box.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
-import { Divider } from '../Divider/Divider.js';
 var _excluded = ["children"];
 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; }
@@ -95,9 +93,9 @@ var TabList = function TabList(_ref) {
               alignItems: isVertical ? 'start' : 'center',
               overflow: isVertical ? 'hidden' : undefined
             }, isFilled ? {
-              borderRadius: 'small',
+              borderRadius: 'medium',
               borderWidth: 'thin',
-              borderColor: 'interactive.border.gray.faded',
+              borderColor: 'interactive.border.gray.default',
               padding: 'spacing.2',
               gap: isVertical ? 'spacing.0' : 'spacing.1',
               backgroundColor: 'surface.background.gray.intense'
@@ -108,16 +106,7 @@ var TabList = function TabList(_ref) {
                 m: 'spacing.8'
               }
             }), {}, {
-              children: variant === 'filled' && !isVertical ? React__default.Children.map(children, function (child, index) {
-                return /*#__PURE__*/jsxs(Fragment, {
-                  children: [index > 0 ? /*#__PURE__*/jsx(Divider, {
-                    margin: "auto",
-                    height: "20px",
-                    variant: "subtle",
-                    orientation: "vertical"
-                  }) : null, child]
-                });
-              }) : children
+              children: children
             }))]
           });
         }

package/build/lib/web/production/components/Tabs/TabList.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabList.web.js","sources":["../../../../../../src/components/Tabs/TabList.web.tsx"],"sourcesContent":["import React from 'react';\nimport { Composite } from '@floating-ui/react';\nimport styled from 'styled-components';\nimport { useTabsContext } from './TabsContext';\nimport { TabIndicator } from './TabIndicator';\nimport { trackColor } from './tabTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport { Divider } from '~components/Divider';\nimport { Box } from '~components/Box';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport type { DataAnalyticsAttribute } from '~utils/types';\n\nconst ScrollableArea = styled(BaseBox)(() => {\n return {\n '&::-webkit-scrollbar': { display: 'none' },\n };\n});\n\nconst TabList = ({\n children,\n ...rest\n}: { children: React.ReactNode } & StyledPropsBlade &\n DataAnalyticsAttribute): React.ReactElement => {\n const { setSelectedValue, selectedValue, variant, isVertical } = useTabsContext();\n const tabListContainerRef = React.useRef<HTMLDivElement>(null);\n const isBordered = variant === 'bordered';\n const isFilled = variant === 'filled';\n\n // Set the first child as the selected value\n useIsomorphicLayoutEffect(() => {\n if (selectedValue) return;\n const first = React.Children.toArray(children)[0];\n if (React.isValidElement(first)) {\n // We need to skip calling onChange on the first render when we set the initial value\n setSelectedValue?.(() => first.props.value, true);\n }\n }, [children, selectedValue, setSelectedValue]);\n\n return (\n <Box\n {...getStyledProps(rest)}\n {...metaAttribute({ name: MetaConstants.TabList })}\n {...makeAnalyticsAttribute(rest)}\n display={isVertical ? 'flex' : 'block'}\n flexShrink={0}\n overflow=\"hidden\"\n >\n <ScrollableArea\n position=\"relative\"\n whiteSpace=\"nowrap\"\n flex=\"1 1 auto\"\n width=\"100%\"\n overflow=\"auto hidden\"\n >\n <Composite\n render={(htmlProps) => {\n return (\n <BaseBox flexDirection=\"row\" display=\"flex\">\n {isVertical && isBordered ? (\n <BaseBox\n width=\"0px\"\n height=\"auto\"\n flexGrow={1}\n flexShrink={0}\n borderColor={trackColor}\n borderWidth=\"thin\"\n style={{ transform: 'translateX(1.5px)' }}\n />\n ) : null}\n {/* @ts-expect-error spreading composite props /}\n <BaseBox\n {...htmlProps}\n flexGrow={1}\n ref={tabListContainerRef}\n role=\"tablist\"\n width=\"100%\"\n display=\"flex\"\n flexDirection={isVertical ? 'column' : 'row'}\n alignItems={isVertical ? 'start' : 'center'}\n overflow={isVertical ? 'hidden' : undefined}\n {...(isFilled\n ? {\n borderRadius: 'small',\n borderWidth: 'thin',\n borderColor: 'interactive.border.gray.faded',\n padding: 'spacing.2',\n gap: isVertical ? 'spacing.0' : 'spacing.1',\n backgroundColor: 'surface.background.gray.intense',\n }\n : {\n padding: 'spacing.0',\n gap: isVertical ? 'spacing.0' : { base: 'spacing.7', m: 'spacing.8' },\n })}\n >\n {variant === 'filled' && !isVertical\n ? React.Children.map(children, (child, index) => {\n return (\n <>\n {index > 0 ? (\n <Divider\n margin=\"auto\"\n height=\"20px\"\n variant=\"subtle\"\n orientation=\"vertical\"\n />\n ) : null}\n {child}\n </>\n );\n })\n : children}\n </BaseBox>\n </BaseBox>\n );\n }}\n />\n {!isVertical ? <TabIndicator tabListContainerRef={tabListContainerRef} /> : null}\n </ScrollableArea>\n {/\n Adding border bottom with an div element, we can't put it on the outer Box of tablist because \n it's not possible to offset or translate a border \n */}\n {!isVertical && isBordered ? (\n <BaseBox\n style={{ transform: 'translateY(-1px)' }}\n borderBottomColor={trackColor}\n borderBottomWidth=\"thin\"\n />\n ) : null}\n </Box>\n );\n};\n\nexport { TabList };\n"],"names":["ScrollableArea","styled","BaseBox","withConfig","displayName","componentId","display","TabList","_ref","children","rest","_objectWithoutProperties","_excluded","_useTabsContext","useTabsContext","setSelectedValue","selectedValue","variant","isVertical","tabListContainerRef","React","useRef","isBordered","isFilled","useIsomorphicLayoutEffect","first","Children","toArray","isValidElement","props","value","_jsxs","Box","_objectSpread","getStyledProps","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","flexShrink","overflow","position","whiteSpace","flex","width","_jsx","Composite","render","htmlProps","flexDirection","height","flexGrow","borderColor","trackColor","borderWidth","style","transform","ref","role","alignItems","undefined","borderRadius","padding","gap","backgroundColor","base","m","map","child","index","_Fragment","Divider","margin","orientation","TabIndicator","borderBottomColor","borderBottomWidth"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,IAAMA,cAAc,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,4BAAA;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,OAAO,GAAG,SAAVA,OAAOA,CAAAC,IAAA,EAIoC;AAAA,EAAA,IAH/CC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;AACLC,IAAAA,IAAI,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;AAGP,EAAA,IAAAC,eAAA,GAAiEC,cAAc,EAAE;IAAzEC,gBAAgB,GAAAF,eAAA,CAAhBE,gBAAgB;IAAEC,aAAa,GAAAH,eAAA,CAAbG,aAAa;IAAEC,OAAO,GAAAJ,eAAA,CAAPI,OAAO;IAAEC,UAAU,GAAAL,eAAA,CAAVK,UAAU,CAAA;AAC5D,EAAA,IAAMC,mBAAmB,GAAGC,cAAK,CAACC,MAAM,CAAiB,IAAI,CAAC,CAAA;AAC9D,EAAA,IAAMC,UAAU,GAAGL,OAAO,KAAK,UAAU,CAAA;AACzC,EAAA,IAAMM,QAAQ,GAAGN,OAAO,KAAK,QAAQ,CAAA;;AAErC;AACAO,EAAAA,yBAAyB,CAAC,YAAM;AAC9B,IAAA,IAAIR,aAAa,EAAE,OAAA;AACnB,IAAA,IAAMS,KAAK,GAAGL,cAAK,CAACM,QAAQ,CAACC,OAAO,CAAClB,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;AACjD,IAAA,kBAAIW,cAAK,CAACQ,cAAc,CAACH,KAAK,CAAC,EAAE;AAC/B;AACAV,MAAAA,gBAAgB,KAAhBA,IAAAA,IAAAA,gBAAgB,KAAhBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,gBAAgB,CAAG,YAAA;AAAA,QAAA,OAAMU,KAAK,CAACI,KAAK,CAACC,KAAK,CAAA;AAAA,OAAA,EAAE,IAAI,CAAC,CAAA;AACnD,KAAA;GACD,EAAE,CAACrB,QAAQ,EAAEO,aAAa,EAAED,gBAAgB,CAAC,CAAC,CAAA;AAE/C,EAAA,oBACEgB,IAAA,CAACC,GAAG,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACEC,cAAc,CAACxB,IAAI,CAAC,CAAA,EACpByB,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAAC9B,OAAAA;AAAQ,GAAC,CAAC,CAAA,EAC9C+B,sBAAsB,CAAC5B,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AAChCJ,IAAAA,OAAO,EAAEY,UAAU,GAAG,MAAM,GAAG,OAAQ;AACvCqB,IAAAA,UAAU,EAAE,CAAE;AACdC,IAAAA,QAAQ,EAAC,QAAQ;IAAA/B,QAAA,EAAA,cAEjBsB,IAAA,CAAC/B,cAAc,EAAA;AACbyC,MAAAA,QAAQ,EAAC,UAAU;AACnBC,MAAAA,UAAU,EAAC,QAAQ;AACnBC,MAAAA,IAAI,EAAC,UAAU;AACfC,MAAAA,KAAK,EAAC,MAAM;AACZJ,MAAAA,QAAQ,EAAC,aAAa;MAAA/B,QAAA,EAAA,cAEtBoC,GAAA,CAACC,SAAS,EAAA;AACRC,QAAAA,MAAM,EAAE,SAAAA,MAACC,CAAAA,SAAS,EAAK;UACrB,oBACEjB,IAAA,CAAC7B,OAAO,EAAA;AAAC+C,YAAAA,aAAa,EAAC,KAAK;AAAC3C,YAAAA,OAAO,EAAC,MAAM;AAAAG,YAAAA,QAAA,GACxCS,UAAU,IAAII,UAAU,gBACvBuB,GAAA,CAAC3C,OAAO,EAAA;AACN0C,cAAAA,KAAK,EAAC,KAAK;AACXM,cAAAA,MAAM,EAAC,MAAM;AACbC,cAAAA,QAAQ,EAAE,CAAE;AACZZ,cAAAA,UAAU,EAAE,CAAE;AACda,cAAAA,WAAW,EAAEC,UAAW;AACxBC,cAAAA,WAAW,EAAC,MAAM;AAClBC,cAAAA,KAAK,EAAE;AAAEC,gBAAAA,SAAS,EAAE,mBAAA;AAAoB,eAAA;AAAE,aAC3C,CAAC,GACA,IAAI,eAERX,GAAA,CAAC3C,OAAO,EAAA+B,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACFe,SAAS,CAAA,EAAA,EAAA,EAAA;AACbG,cAAAA,QAAQ,EAAE,CAAE;AACZM,cAAAA,GAAG,EAAEtC,mBAAoB;AACzBuC,cAAAA,IAAI,EAAC,SAAS;AACdd,cAAAA,KAAK,EAAC,MAAM;AACZtC,cAAAA,OAAO,EAAC,MAAM;AACd2C,cAAAA,aAAa,EAAE/B,UAAU,GAAG,QAAQ,GAAG,KAAM;AAC7CyC,cAAAA,UAAU,EAAEzC,UAAU,GAAG,OAAO,GAAG,QAAS;AAC5CsB,cAAAA,QAAQ,EAAEtB,UAAU,GAAG,QAAQ,GAAG0C,SAAAA;AAAU,aAAA,EACvCrC,QAAQ,GACT;AACEsC,cAAAA,YAAY,EAAE,OAAO;AACrBP,cAAAA,WAAW,EAAE,MAAM;AACnBF,cAAAA,WAAW,EAAE,+BAA+B;AAC5CU,cAAAA,OAAO,EAAE,WAAW;AACpBC,cAAAA,GAAG,EAAE7C,UAAU,GAAG,WAAW,GAAG,WAAW;AAC3C8C,cAAAA,eAAe,EAAE,iCAAA;AACnB,aAAC,GACD;AACEF,cAAAA,OAAO,EAAE,WAAW;AACpBC,cAAAA,GAAG,EAAE7C,UAAU,GAAG,WAAW,GAAG;AAAE+C,gBAAAA,IAAI,EAAE,WAAW;AAAEC,gBAAAA,CAAC,EAAE,WAAA;AAAY,eAAA;aACrE,CAAA,EAAA,EAAA,EAAA;cAAAzD,QAAA,EAEJQ,OAAO,KAAK,QAAQ,IAAI,CAACC,UAAU,GAChCE,cAAK,CAACM,QAAQ,CAACyC,GAAG,CAAC1D,QAAQ,EAAE,UAAC2D,KAAK,EAAEC,KAAK,EAAK;gBAC7C,oBACEtC,IAAA,CAAAuC,QAAA,EAAA;AAAA7D,kBAAAA,QAAA,GACG4D,KAAK,GAAG,CAAC,gBACRxB,GAAA,CAAC0B,OAAO,EAAA;AACNC,oBAAAA,MAAM,EAAC,MAAM;AACbtB,oBAAAA,MAAM,EAAC,MAAM;AACbjC,oBAAAA,OAAO,EAAC,QAAQ;AAChBwD,oBAAAA,WAAW,EAAC,UAAA;AAAU,mBACvB,CAAC,GACA,IAAI,EACPL,KAAK,CAAA;AAAA,iBACN,CAAC,CAAA;AAEP,eAAC,CAAC,GACF3D,QAAAA;AAAQ,aAAA,CACL,CAAC,CAAA;AAAA,WACH,CAAC,CAAA;AAEd,SAAA;AAAE,OACH,CAAC,EACD,CAACS,UAAU,gBAAG2B,GAAA,CAAC6B,YAAY,EAAA;AAACvD,QAAAA,mBAAmB,EAAEA,mBAAAA;OAAsB,CAAC,GAAG,IAAI,CAAA;KAClE,CAAC,EAKhB,CAACD,UAAU,IAAII,UAAU,gBACxBuB,GAAA,CAAC3C,OAAO,EAAA;AACNqD,MAAAA,KAAK,EAAE;AAAEC,QAAAA,SAAS,EAAE,kBAAA;OAAqB;AACzCmB,MAAAA,iBAAiB,EAAEtB,UAAW;AAC9BuB,MAAAA,iBAAiB,EAAC,MAAA;KACnB,CAAC,GACA,IAAI,CAAA;AAAA,GAAA,CACL,CAAC,CAAA;AAEV;;;;"}
1	+ {"version":3,"file":"TabList.web.js","sources":["../../../../../../src/components/Tabs/TabList.web.tsx"],"sourcesContent":["import React from 'react';\nimport { Composite } from '@floating-ui/react';\nimport styled from 'styled-components';\nimport { useTabsContext } from './TabsContext';\nimport { TabIndicator } from './TabIndicator';\nimport { trackColor } from './tabTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport { Box } from '~components/Box';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport type { DataAnalyticsAttribute } from '~utils/types';\n\nconst ScrollableArea = styled(BaseBox)(() => {\n return {\n '&::-webkit-scrollbar': { display: 'none' },\n };\n});\n\nconst TabList = ({\n children,\n ...rest\n}: { children: React.ReactNode } & StyledPropsBlade &\n DataAnalyticsAttribute): React.ReactElement => {\n const { setSelectedValue, selectedValue, variant, isVertical } = useTabsContext();\n const tabListContainerRef = React.useRef<HTMLDivElement>(null);\n const isBordered = variant === 'bordered';\n const isFilled = variant === 'filled';\n\n // Set the first child as the selected value\n useIsomorphicLayoutEffect(() => {\n if (selectedValue) return;\n const first = React.Children.toArray(children)[0];\n if (React.isValidElement(first)) {\n // We need to skip calling onChange on the first render when we set the initial value\n setSelectedValue?.(() => first.props.value, true);\n }\n }, [children, selectedValue, setSelectedValue]);\n\n return (\n <Box\n {...getStyledProps(rest)}\n {...metaAttribute({ name: MetaConstants.TabList })}\n {...makeAnalyticsAttribute(rest)}\n display={isVertical ? 'flex' : 'block'}\n flexShrink={0}\n overflow=\"hidden\"\n >\n <ScrollableArea\n position=\"relative\"\n whiteSpace=\"nowrap\"\n flex=\"1 1 auto\"\n width=\"100%\"\n overflow=\"auto hidden\"\n >\n <Composite\n render={(htmlProps) => {\n return (\n <BaseBox flexDirection=\"row\" display=\"flex\">\n {isVertical && isBordered ? (\n <BaseBox\n width=\"0px\"\n height=\"auto\"\n flexGrow={1}\n flexShrink={0}\n borderColor={trackColor}\n borderWidth=\"thin\"\n style={{ transform: 'translateX(1.5px)' }}\n />\n ) : null}\n {/* @ts-expect-error spreading composite props /}\n <BaseBox\n {...htmlProps}\n flexGrow={1}\n ref={tabListContainerRef}\n role=\"tablist\"\n width=\"100%\"\n display=\"flex\"\n flexDirection={isVertical ? 'column' : 'row'}\n alignItems={isVertical ? 'start' : 'center'}\n overflow={isVertical ? 'hidden' : undefined}\n {...(isFilled\n ? {\n borderRadius: 'medium',\n borderWidth: 'thin',\n borderColor: 'interactive.border.gray.default',\n padding: 'spacing.2',\n gap: isVertical ? 'spacing.0' : 'spacing.1',\n backgroundColor: 'surface.background.gray.intense',\n }\n : {\n padding: 'spacing.0',\n gap: isVertical ? 'spacing.0' : { base: 'spacing.7', m: 'spacing.8' },\n })}\n >\n {children}\n </BaseBox>\n </BaseBox>\n );\n }}\n />\n {!isVertical ? <TabIndicator tabListContainerRef={tabListContainerRef} /> : null}\n </ScrollableArea>\n {/\n Adding border bottom with an div element, we can't put it on the outer Box of tablist because \n it's not possible to offset or translate a border \n */}\n {!isVertical && isBordered ? (\n <BaseBox\n style={{ transform: 'translateY(-1px)' }}\n borderBottomColor={trackColor}\n borderBottomWidth=\"thin\"\n />\n ) : null}\n </Box>\n );\n};\n\nexport { TabList };\n"],"names":["ScrollableArea","styled","BaseBox","withConfig","displayName","componentId","display","TabList","_ref","children","rest","_objectWithoutProperties","_excluded","_useTabsContext","useTabsContext","setSelectedValue","selectedValue","variant","isVertical","tabListContainerRef","React","useRef","isBordered","isFilled","useIsomorphicLayoutEffect","first","Children","toArray","isValidElement","props","value","_jsxs","Box","_objectSpread","getStyledProps","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","flexShrink","overflow","position","whiteSpace","flex","width","_jsx","Composite","render","htmlProps","flexDirection","height","flexGrow","borderColor","trackColor","borderWidth","style","transform","ref","role","alignItems","undefined","borderRadius","padding","gap","backgroundColor","base","m","TabIndicator","borderBottomColor","borderBottomWidth"],"mappings":"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"}

package/build/types/components/index.d.ts CHANGED Viewed

@@ -13448,6 +13448,18 @@ type ChipCommonProps = {
      * Use `onChange` to update its value
      */
     value?: string;
+    /**
+     * width prop sets the width of the Chip
+     */
+    width?: BoxProps['width'];
+    /**
+     * maxWidth prop sets the maxWidth of the Chip
+     */
+    maxWidth?: BoxProps['maxWidth'];
+    /**
+     * min prop sets the minWidth of the Chip
+     */
+    minWidth?: BoxProps['minWidth'];
 } & TestID & DataAnalyticsAttribute & StyledPropsBlade & MotionMetaProp;
 type ChipWithoutIconProps = ChipCommonProps & {
     icon?: undefined;
@@ -24215,20 +24227,11 @@ type TabsProps = {
      */
     isLazy?: boolean;
 } & DataAnalyticsAttribute;
-type TabItemProps = {
-    /**
-     * The label of the tab item.
-     */
-    children: React__default.ReactNode;
+type TabItemCommonProps = {
     /**
      * The value of the tab item.
      */
     value: string;
-    /**
-     * Leading element of the tab item.
-     * Can be used to render an Icon.
-     */
-    leading?: IconComponent;
     /**
      * Trailing element of the tab item.
      * Can be used to render a Badge/Counter component.
@@ -24253,6 +24256,29 @@ type TabItemProps = {
      */
     onClick?: (event: React__default.MouseEvent) => void;
 };
+type TabItemWithoutLeadingProps = TabItemCommonProps & {
+    /**
+     * The content of the tab item.
+     */
+    children: React__default.ReactNode;
+    /**
+     * Leading element of the tab item.
+     * Can be used to render an Icon.
+     */
+    leading?: undefined;
+};
+type TabItemWithOutChildrenProps = TabItemCommonProps & {
+    /**
+     * Leading element of the tab item.
+     * Can be used to render an Icon.
+     */
+    leading: IconComponent;
+    /**
+     * The content of the tab item.
+     */
+    children?: React__default.ReactNode;
+};
+type TabItemProps = TabItemWithoutLeadingProps | TabItemWithOutChildrenProps;
 type TabPanelProps = {
     /**
      * The value of the tab panel. This will be used to match the selected tab.

package/build/types/components/index.native.d.ts CHANGED Viewed

@@ -8695,6 +8695,18 @@ type ChipCommonProps = {
      * Use `onChange` to update its value
      */
     value?: string;
+    /**
+     * width prop sets the width of the Chip
+     */
+    width?: BoxProps['width'];
+    /**
+     * maxWidth prop sets the maxWidth of the Chip
+     */
+    maxWidth?: BoxProps['maxWidth'];
+    /**
+     * min prop sets the minWidth of the Chip
+     */
+    minWidth?: BoxProps['minWidth'];
 } & TestID & DataAnalyticsAttribute & StyledPropsBlade & MotionMetaProp;
 type ChipWithoutIconProps = ChipCommonProps & {
     icon?: undefined;
@@ -14934,20 +14946,11 @@ type TabsProps = {
      */
     isLazy?: boolean;
 } & DataAnalyticsAttribute;
-type TabItemProps = {
-    /**
-     * The label of the tab item.
-     */
-    children: React__default.ReactNode;
+type TabItemCommonProps = {
     /**
      * The value of the tab item.
      */
     value: string;
-    /**
-     * Leading element of the tab item.
-     * Can be used to render an Icon.
-     */
-    leading?: IconComponent;
     /**
      * Trailing element of the tab item.
      * Can be used to render a Badge/Counter component.
@@ -14972,6 +14975,29 @@ type TabItemProps = {
      */
     onClick?: (event: React__default.MouseEvent) => void;
 };
+type TabItemWithoutLeadingProps = TabItemCommonProps & {
+    /**
+     * The content of the tab item.
+     */
+    children: React__default.ReactNode;
+    /**
+     * Leading element of the tab item.
+     * Can be used to render an Icon.
+     */
+    leading?: undefined;
+};
+type TabItemWithOutChildrenProps = TabItemCommonProps & {
+    /**
+     * Leading element of the tab item.
+     * Can be used to render an Icon.
+     */
+    leading: IconComponent;
+    /**
+     * The content of the tab item.
+     */
+    children?: React__default.ReactNode;
+};
+type TabItemProps = TabItemWithoutLeadingProps | TabItemWithOutChildrenProps;
 type TabPanelProps = {
     /**
      * The value of the tab panel. This will be used to match the selected tab.

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "12.12.0",
+  "version": "12.12.1",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"