npm - @razorpay/blade - Versions diffs - 12.68.0 → 12.89.1 - Mend

@razorpay/blade 12.68.0 → 12.89.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 (4004) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TabIndicator.web.js","sources":["../../../../../../src/components/Tabs/TabIndicator.web.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps /\n/ eslint-disable @typescript-eslint/explicit-function-return-type /\n/ eslint-disable consistent-return /\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useTabsContext } from './TabsContext';\nimport { useTheme } from '~components/BladeProvider';\nimport { castWebType, makeMotionTime } from '~utils';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst StyledTabIndicator = styled(BaseBox)(({ theme }) => {\n return {\n cursor: 'pointer',\n '&:hover': {\n backgroundColor: theme.colors.interactive.background.primary.fadedHighlighted,\n },\n };\n});\n\nconst TabIndicator = ({\n tabListContainerRef,\n}: {\n tabListContainerRef: React.RefObject<HTMLElement \| null>;\n}): React.ReactElement => {\n const { theme } = useTheme();\n const { selectedValue, baseId, variant } = useTabsContext();\n const [hasMeasured, setHasMeasured] = React.useState(false);\n const [activeElementDimensions, setActiveElementDimensions] = React.useState({\n width: 0,\n height: 0,\n x: 0,\n y: 0,\n });\n\n // Update the dimensions of the active element\n const updateDimensions = React.useCallback(() => {\n const tabItemId = `${baseId}-${selectedValue}-tabitem`;\n const activeTabItem = document.getElementById(tabItemId);\n if (!activeTabItem) return;\n\n setActiveElementDimensions({\n width: activeTabItem.offsetWidth,\n height: activeTabItem.offsetHeight,\n x: activeTabItem.offsetLeft,\n y:\n variant === 'filled'\n ? // on filled variant the indicator is positioned on top of the tab item\n // so no need to add offsetHeight\n activeTabItem.offsetTop\n : activeTabItem.offsetTop + activeTabItem.offsetHeight - 1.5,\n });\n }, [baseId, selectedValue, tabListContainerRef, variant]);\n\n // Update the dimensions when the selected value changes\n useIsomorphicLayoutEffect(() => {\n if (!selectedValue) return;\n\n updateDimensions();\n\n const id = requestAnimationFrame(() => {\n setHasMeasured(true);\n });\n\n return () => {\n if (id) {\n cancelAnimationFrame(id);\n }\n };\n }, [baseId, selectedValue]);\n\n // Update the dimensions when the window resizes or when the font loads\n React.useEffect(() => {\n if (!tabListContainerRef.current) return;\n\n // check for FontFace API support\n // FontFaceAPI is widely supported but better to be safe than sorry\n if ('fonts' in document) {\n try {\n // wait for fonts to be loaded and then recalculate the dimensions\n void document.fonts.ready.then(() => {\n updateDimensions();\n });\n } catch (err: unknown) {\n / empty */\n }\n }\n\n window.addEventListener('resize', updateDimensions);\n\n return () => {\n if (!tabListContainerRef.current) return;\n window.removeEventListener('resize', updateDimensions);\n };\n }, [tabListContainerRef, updateDimensions]);\n\n const transitionProps = {\n transitionProperty: 'transform, width, background-color',\n transitionDuration: hasMeasured\n ? castWebType(makeMotionTime(theme.motion.duration.gentle))\n : '0ms',\n transitionTimingFunction: castWebType(theme.motion.easing.standard),\n };\n\n if (variant === 'filled') {\n return (\n <StyledTabIndicator\n pointerEvents=\"none\"\n position=\"absolute\"\n left=\"0px\"\n top=\"0px\"\n borderRadius=\"small\"\n backgroundColor=\"interactive.background.primary.faded\"\n style={{\n ...transitionProps,\n width: `${activeElementDimensions.width}px`,\n height: `${activeElementDimensions.height}px`,\n transform: `translate(${activeElementDimensions.x}px, ${activeElementDimensions.y}px)`,\n }}\n {...metaAttribute({ name: MetaConstants.TabIndicator })}\n />\n );\n }\n\n return (\n <StyledTabIndicator\n pointerEvents=\"none\"\n position=\"absolute\"\n left=\"0%\"\n top=\"-0.5px\"\n height=\"2px\"\n backgroundColor=\"interactive.background.primary.default\"\n style={{\n ...transitionProps,\n width: `${activeElementDimensions.width}px`,\n transform: `translate(${activeElementDimensions.x}px, ${activeElementDimensions.y}px)`,\n }}\n {...metaAttribute({ name: MetaConstants.TabIndicator })}\n />\n );\n};\n\nexport { TabIndicator };\n"],"names":["StyledTabIndicator","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","cursor","backgroundColor","colors","interactive","background","primary","fadedHighlighted","TabIndicator","_ref2","tabListContainerRef","_useTheme","useTheme","_useTabsContext","useTabsContext","selectedValue","baseId","variant","_React$useState","React","useState","_React$useState2","_slicedToArray","hasMeasured","setHasMeasured","_React$useState3","width","height","x","y","_React$useState4","activeElementDimensions","setActiveElementDimensions","updateDimensions","useCallback","tabItemId","concat","activeTabItem","document","getElementById","offsetWidth","offsetHeight","offsetLeft","offsetTop","useIsomorphicLayoutEffect","id","requestAnimationFrame","cancelAnimationFrame","useEffect","current","fonts","ready","then","err","window","addEventListener","removeEventListener","transitionProps","transitionProperty","transitionDuration","castWebType","makeMotionTime","motion","duration","gentle","transitionTimingFunction","easing","standard","_jsx","_objectSpread","pointerEvents","position","left","top","borderRadius","style","transform","metaAttribute","name","MetaConstants"],"mappings":"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"}
1	+ {"version":3,"file":"TabIndicator.web.js","sources":["../../../../../../src/components/Tabs/TabIndicator.web.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps /\n/ eslint-disable @typescript-eslint/explicit-function-return-type /\n/ eslint-disable consistent-return /\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useTabsContext } from './TabsContext';\nimport { castWebType, makeMotionTime } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { useTheme } from '~components/BladeProvider';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport { useResize } from '~utils/useResize';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst StyledTabIndicator = styled(BaseBox)(({ theme }) => {\n return {\n cursor: 'pointer',\n '&:hover': {\n backgroundColor: theme.colors.interactive.background.primary.fadedHighlighted,\n },\n };\n});\n\nconst TabIndicator = ({\n tabListContainerRef,\n}: {\n tabListContainerRef: React.RefObject<HTMLElement \| null>;\n}): React.ReactElement => {\n const { theme } = useTheme();\n const { selectedValue, baseId, variant, isVertical, size } = useTabsContext();\n const [shouldAnimate, setShouldAnimate] = React.useState(false);\n const [dimensions, setDimensions] = React.useState({ width: 0, height: 0, x: 0, y: 0 });\n\n const updateDimensions = React.useCallback(() => {\n const activeTabItem = document.getElementById(`${baseId}-${selectedValue}-tabitem`);\n // Skip if element not found or not visible (width 0 means container is hidden)\n if (!activeTabItem \|\| activeTabItem.offsetWidth === 0) return;\n\n setDimensions({\n width: activeTabItem.offsetWidth,\n height: activeTabItem.offsetHeight,\n x: activeTabItem.offsetLeft,\n y:\n variant === 'filled' \|\| isVertical\n ? // on filled variant or vertical layout the indicator is positioned on top of the tab item\n activeTabItem.offsetTop\n : activeTabItem.offsetTop + activeTabItem.offsetHeight - 1.5,\n });\n\n // Enable animations after first valid measurement renders\n setShouldAnimate((prev) => {\n if (!prev) requestAnimationFrame(() => setShouldAnimate(true));\n return prev;\n });\n }, [baseId, selectedValue, variant, isVertical]);\n\n // Update the dimensions when the selected value changes\n useIsomorphicLayoutEffect(() => {\n if (!selectedValue) return;\n updateDimensions();\n }, [baseId, selectedValue, updateDimensions]);\n\n // Update the dimensions when fonts load\n React.useEffect(() => {\n // check for FontFace API support\n // FontFaceAPI is widely supported but better to be safe than sorry\n if ('fonts' in document) {\n try {\n // wait for fonts to be loaded and then recalculate the dimensions\n void document.fonts.ready.then(() => {\n updateDimensions();\n });\n } catch (err: unknown) {\n / empty */\n }\n }\n }, [updateDimensions]);\n\n // Update the dimensions when the container resizes (covers window resize,\n // sidebar toggles, lazy-loaded content, and containers becoming visible)\n useResize(tabListContainerRef, updateDimensions);\n\n const transitionProps = {\n transitionProperty: 'transform, width, height, background-color',\n transitionDuration: shouldAnimate\n ? castWebType(makeMotionTime(theme.motion.duration.moderate))\n : '0ms',\n transitionTimingFunction: castWebType(theme.motion.easing.standard),\n };\n\n // Vertical bordered: 1.5px-wide line on the left side that slides vertically\n if (isVertical && variant !== 'filled') {\n return (\n <StyledTabIndicator\n pointerEvents=\"none\"\n position=\"absolute\"\n left=\"1.75px\"\n top=\"0px\"\n width=\"1.5px\"\n backgroundColor=\"interactive.border.neutral.highlighted\"\n style={{\n ...transitionProps,\n height: `${dimensions.height}px`,\n transform: `translateY(${dimensions.y}px)`,\n }}\n {...metaAttribute({ name: MetaConstants.TabIndicator })}\n />\n );\n }\n\n if (variant === 'filled') {\n const shouldHaveMediumBorderRadius = size === 'small' && !isVertical;\n return (\n <StyledTabIndicator\n pointerEvents=\"none\"\n position=\"absolute\"\n left=\"0px\"\n top=\"0px\"\n borderRadius={shouldHaveMediumBorderRadius ? 'medium' : 'small'}\n backgroundColor=\"surface.background.gray.intense\"\n style={{\n ...transitionProps,\n width: `${dimensions.width}px`,\n height: `${dimensions.height}px`,\n transform: `translate(${dimensions.x}px, ${dimensions.y}px)`,\n }}\n {...metaAttribute({ name: MetaConstants.TabIndicator })}\n />\n );\n }\n\n return (\n <StyledTabIndicator\n pointerEvents=\"none\"\n position=\"absolute\"\n left=\"0%\"\n top=\"-0.5px\"\n height=\"2px\"\n backgroundColor=\"interactive.border.neutral.highlighted\"\n style={{\n ...transitionProps,\n width: `${dimensions.width}px`,\n transform: `translate(${dimensions.x}px, ${dimensions.y}px)`,\n }}\n {...metaAttribute({ name: MetaConstants.TabIndicator })}\n />\n );\n};\n\nexport { TabIndicator };\n"],"names":["StyledTabIndicator","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","cursor","backgroundColor","colors","interactive","background","primary","fadedHighlighted","TabIndicator","_ref2","tabListContainerRef","_useTheme","useTheme","_useTabsContext","useTabsContext","selectedValue","baseId","variant","isVertical","size","_React$useState","React","useState","_React$useState2","_slicedToArray","shouldAnimate","setShouldAnimate","_React$useState3","width","height","x","y","_React$useState4","dimensions","setDimensions","updateDimensions","useCallback","activeTabItem","document","getElementById","concat","offsetWidth","offsetHeight","offsetLeft","offsetTop","prev","requestAnimationFrame","useIsomorphicLayoutEffect","useEffect","fonts","ready","then","err","useResize","transitionProps","transitionProperty","transitionDuration","castWebType","makeMotionTime","motion","duration","moderate","transitionTimingFunction","easing","standard","_jsx","_objectSpread","pointerEvents","position","left","top","style","transform","metaAttribute","name","MetaConstants","shouldHaveMediumBorderRadius","borderRadius"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import 'react';
 import { CompositeItem } from '@floating-ui/react';
 import { useTabsContext } from './TabsContext.js';
-import { backgroundColor, paddingTop, paddingBottom, paddingX, iconColor, textColor, textSizeMap } from './tabTokens.js';
+import { backgroundColor, borderColor, borderWidth, borderRadius, focusBorderRadius, paddingTop, paddingBottom, paddingX, needsStackingContext, iconColor, textColor, textSizeMap } from './tabTokens.js';
 import { useTabsItemPropRestriction, iconSizeMap } from './utils.js';
 import '../Typography/index.js';
 import '../../utils/index.js';
@@ -38,13 +38,16 @@ var StyledTabButton = /*#__PURE__*/styled.button.withConfig({
     variant = _ref.variant,
     isFullWidthTabItem = _ref.isFullWidthTabItem,
     isVertical = _ref.isVertical;
-  var isFilled = variant === 'filled';
   var orientation = isVertical ? 'vertical' : 'horizontal';
   var border = isVertical ? 'borderLeft' : 'borderBottom';
   var selectedState = isSelected ? 'selected' : 'unselected';
   var _variant = variant === 'borderless' ? 'bordered' : variant;
-  var background = backgroundColor[selectedState][_variant];
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  var background = backgroundColor[selectedState][_variant][orientation];
+  var borderColor$1 = borderColor[selectedState][_variant][orientation];
+  var borderWidth$1 = borderWidth[_variant][orientation];
+  var borderRadius$1 = borderRadius[_variant][orientation][size];
+  var focusBorderRadius$1 = focusBorderRadius[_variant][orientation][size];
+  return _objectSpread(_objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     appearance: 'none',
     textDecoration: 'none',
     border: 'none',
@@ -60,35 +63,40 @@ var StyledTabButton = /*#__PURE__*/styled.button.withConfig({
     paddingBottom: makeSpace(getIn(theme, paddingBottom[_variant][orientation][size])),
     paddingLeft: makeSpace(getIn(theme, paddingX[_variant][orientation][size])),
     paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation][size])),
-    // colors
-    backgroundColor: isSelected && isFilled && !isVertical ? 'transparent' : getIn(theme, background["default"]),
-    borderRadius: isFilled && !isVertical ? theme.border.radius.small : 0
-  }, "".concat(border, "Style"), 'solid'), "".concat(border, "Width"), isFilled ? 0 : makeBorderSize(isVertical ? theme.border.width.thick : theme.border.width.thin)), "".concat(border, "Color"), isVertical && isSelected ? theme.colors.interactive.border.primary["default"] : 'transparent'), '&:hover', _defineProperty(_defineProperty({}, "".concat(border, "Color"), isVertical && isSelected ? theme.colors.interactive.border.primary["default"] : theme.colors.interactive.border.gray.highlighted), "backgroundColor",
-  // Don't want to show hover state on filled tabs when vertical because
-  // The hover color needs to be on the TabIndicator instead.
-  isSelected && isFilled && !isVertical ? 'transparent' : getIn(theme, background.highlighted))), '&:disabled', {
+    // Colors & border
+    backgroundColor: getIn(theme, background["default"]),
+    borderRadius: borderRadius$1 === 'none' ? 0 : theme.border.radius[borderRadius$1]
+  }, "".concat(border, "Style"), 'solid'), "".concat(border, "Width"), borderWidth$1 === 'none' ? 0 : makeBorderSize(theme.border.width[borderWidth$1])), "".concat(border, "Color"), isVertical && _variant === 'bordered' ? 'transparent' : getIn(theme, borderColor$1["default"])), '&:hover', _defineProperty(_defineProperty({}, "".concat(border, "Color"), isVertical && _variant === 'bordered' ? 'transparent' : getIn(theme, borderColor$1.highlighted)), "backgroundColor", getIn(theme, background.highlighted))), '&:focus-visible', _defineProperty({
+    borderRadius: makeSpace(theme.border.radius[focusBorderRadius$1]),
+    boxShadow: "inset 0px 0px 0px 4px ".concat(theme.colors.surface.border.primary.muted),
+    backgroundColor: isSelected ? getIn(theme, background["default"]) : theme.colors.interactive.background.gray["default"]
+  }, "".concat(border, "Color"), 'transparent')), '&:disabled', _defineProperty({
     cursor: 'not-allowed',
     backgroundColor: getIn(theme, background.disabled)
-  }), '&:focus-visible', {
-    borderRadius: makeSpace(theme.border.radius.medium),
-    boxShadow: "0px 0px 0px 4px ".concat(theme.colors.surface.border.primary.muted),
-    backgroundColor: getIn(theme, background.highlighted)
-  }), "transitionProperty", 'all'), "transitionTimingFunction", castWebType(theme.motion.easing.standard)), "transitionDuration", castWebType(makeMotionTime(theme.motion.duration.gentle))), '*', {
-    transitionProperty: 'color, fill',
+  }, "".concat(border, "Color"), 'transparent')), '&:disabled:hover', _defineProperty(_defineProperty({}, "".concat(border, "Color"), 'transparent'), "backgroundColor", getIn(theme, background.disabled))), needsStackingContext[_variant][orientation] ? {
+    position: 'relative',
+    zIndex: 1
+  } : {}), {}, {
+    transitionProperty: 'all',
     transitionTimingFunction: castWebType(theme.motion.easing.standard),
-    transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick))
+    transitionDuration: castWebType(makeMotionTime(theme.motion.duration.gentle)),
+    '*': {
+      transitionProperty: 'color, fill',
+      transitionTimingFunction: castWebType(theme.motion.easing.standard),
+      transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick))
+    }
   });
 });
-var TabItem = function TabItem(_ref3) {
-  var children = _ref3.children,
-    value = _ref3.value,
-    Leading = _ref3.leading,
-    trailing = _ref3.trailing,
-    _ref3$isDisabled = _ref3.isDisabled,
-    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
-    href = _ref3.href,
-    _onClick = _ref3.onClick,
-    rest = _objectWithoutProperties(_ref3, _excluded);
+var TabItem = function TabItem(_ref2) {
+  var children = _ref2.children,
+    value = _ref2.value,
+    Leading = _ref2.leading,
+    trailing = _ref2.trailing,
+    _ref2$isDisabled = _ref2.isDisabled,
+    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+    href = _ref2.href,
+    _onClick = _ref2.onClick,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var _useTabsContext = useTabsContext(),
     size = _useTabsContext.size,
     isFullWidthTabItem = _useTabsContext.isFullWidthTabItem,
@@ -145,7 +153,7 @@ var TabItem = function TabItem(_ref3) {
       }) : null, children ? /*#__PURE__*/jsx(Text, {
         color: textColor[selectedState][interaction],
         size: textSizeMap[size],
-        weight: "semibold",
+        weight: "medium",
         children: children
       }) : null, validatedTrailingComponent]
     }))

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 {\n backgroundColor,\n paddingTop,\n paddingBottom,\n paddingX,\n textColor,\n iconColor,\n textSizeMap,\n} from './tabTokens';\nimport { iconSizeMap, useTabsItemPropRestriction } from './utils';\nimport { Text } from '~components/Typography';\nimport { castWebType, makeBorderSize, makeMotionTime, makeSpace } from '~utils';\nimport useInteraction from '~utils/useInteraction';\nimport { makeAccessible } from '~utils/makeAccessible';\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, paddingTop[_variant][orientation][size!])),\n paddingBottom: makeSpace(getIn(theme, paddingBottom[_variant][orientation][size!])),\n paddingLeft: makeSpace(getIn(theme, paddingX[_variant][orientation][size!])),\n paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation][size!])),\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={textSizeMap[size!]}\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","theme","isSelected","size","variant","isFullWidthTabItem","isVertical","isFilled","orientation","border","selectedState","_variant","background","backgroundColor","_defineProperty","appearance","textDecoration","outline","cursor","display","alignItems","justifyContent","gap","makeSpace","spacing","width","undefined","paddingTop","getIn","paddingBottom","paddingLeft","paddingX","paddingRight","borderRadius","radius","small","concat","makeBorderSize","thick","thin","colors","interactive","primary","gray","highlighted","disabled","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","textSizeMap","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 {\n backgroundColor,\n paddingTop,\n paddingBottom,\n paddingX,\n textColor,\n iconColor,\n textSizeMap,\n borderWidth as borderWidthToken,\n borderRadius as borderRadiusToken,\n focusBorderRadius as focusBorderRadiusToken,\n borderColor as borderColorToken,\n needsStackingContext,\n} from './tabTokens';\nimport { iconSizeMap, useTabsItemPropRestriction } from './utils';\nimport { Text } from '~components/Typography';\nimport { castWebType, makeBorderSize, makeMotionTime, makeSpace } from '~utils';\nimport useInteraction from '~utils/useInteraction';\nimport { makeAccessible } from '~utils/makeAccessible';\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 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\n const background = backgroundColor[selectedState][_variant][orientation];\n const borderColor = borderColorToken[selectedState][_variant][orientation];\n const borderWidth = borderWidthToken[_variant][orientation];\n const borderRadius = borderRadiusToken[_variant][orientation][size!];\n const focusBorderRadius = focusBorderRadiusToken[_variant][orientation][size!];\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, paddingTop[_variant][orientation][size!])),\n paddingBottom: makeSpace(getIn(theme, paddingBottom[_variant][orientation][size!])),\n paddingLeft: makeSpace(getIn(theme, paddingX[_variant][orientation][size!])),\n paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation][size!])),\n\n // Colors & border\n backgroundColor: getIn(theme, background.default),\n borderRadius: borderRadius === 'none' ? 0 : theme.border.radius[borderRadius],\n [`${border}Style`]: 'solid',\n [`${border}Width`]:\n borderWidth === 'none' ? 0 : makeBorderSize(theme.border.width[borderWidth]),\n // For vertical bordered, borderLeft is transparent because the TabIndicator component\n // handles the selected indicator (avoids border curving with focus border-radius)\n [`${border}Color`]:\n isVertical && _variant === 'bordered' ? 'transparent' : getIn(theme, borderColor.default),\n\n // States\n '&:hover': {\n [`${border}Color`]:\n isVertical && _variant === 'bordered'\n ? 'transparent'\n : getIn(theme, borderColor.highlighted),\n backgroundColor: getIn(theme, background.highlighted),\n },\n '&:focus-visible': {\n borderRadius: makeSpace(theme.border.radius[focusBorderRadius]),\n boxShadow: `inset 0px 0px 0px 4px ${theme.colors.surface.border.primary.muted}`,\n backgroundColor: isSelected\n ? getIn(theme, background.default)\n : theme.colors.interactive.background.gray.default,\n [`${border}Color`]: 'transparent',\n },\n '&:disabled': {\n cursor: 'not-allowed',\n backgroundColor: getIn(theme, background.disabled),\n [`${border}Color`]: 'transparent',\n },\n '&:disabled:hover': {\n [`${border}Color`]: 'transparent',\n backgroundColor: getIn(theme, background.disabled),\n },\n\n ...(needsStackingContext[_variant][orientation]\n ? { position: 'relative' as const, zIndex: 1 }\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={textSizeMap[size!]}\n weight=\"medium\"\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","theme","isSelected","size","variant","isFullWidthTabItem","isVertical","orientation","border","selectedState","_variant","background","backgroundColor","borderColor","borderColorToken","borderWidth","borderWidthToken","borderRadius","borderRadiusToken","focusBorderRadius","focusBorderRadiusToken","_objectSpread","_defineProperty","appearance","textDecoration","outline","cursor","display","alignItems","justifyContent","gap","makeSpace","spacing","width","undefined","paddingTop","getIn","paddingBottom","paddingLeft","paddingX","paddingRight","radius","concat","makeBorderSize","highlighted","boxShadow","colors","surface","primary","muted","interactive","gray","disabled","needsStackingContext","position","zIndex","transitionProperty","transitionTimingFunction","castWebType","motion","easing","standard","transitionDuration","makeMotionTime","duration","gentle","xquick","TabItem","_ref2","children","value","Leading","leading","trailing","_ref2$isDisabled","isDisabled","href","onClick","rest","_objectWithoutProperties","_excluded","_useTabsContext","useTabsContext","selectedValue","setSelectedValue","baseId","_useInteraction","useInteraction","currentInteraction","interactionProps","_excluded2","validatedTrailingComponent","useTabsItemPropRestriction","panelId","tabItemId","isFilled","interactionMap","hover","focus","interaction","_jsx","CompositeItem","render","_jsxs","type","as","id","e","makeAccessible","role","selected","controls","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","iconSizeMap","color","iconColor","Text","textColor","textSizeMap","weight"],"mappings":"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"}

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

@@ -40,10 +40,12 @@ var TabList = function TabList(_ref) {
     setSelectedValue = _useTabsContext.setSelectedValue,
     selectedValue = _useTabsContext.selectedValue,
     variant = _useTabsContext.variant,
-    isVertical = _useTabsContext.isVertical;
+    isVertical = _useTabsContext.isVertical,
+    size = _useTabsContext.size;
   var tabListContainerRef = React__default.useRef(null);
   var isBordered = variant === 'bordered';
   var isFilled = variant === 'filled';
+  var isCompact = size === 'small' && !isVertical;
   // Set the first child as the selected value
   useIsomorphicLayoutEffect(function () {
@@ -93,12 +95,12 @@ var TabList = function TabList(_ref) {
               alignItems: isVertical ? 'start' : 'center',
               overflow: isVertical ? 'hidden' : undefined
             }, isFilled ? {
-              borderRadius: 'medium',
-              borderWidth: 'thin',
+              borderRadius: isCompact ? 'large' : 'medium',
+              borderWidth: 'none',
               borderColor: 'interactive.border.gray.default',
-              padding: 'spacing.2',
+              padding: isCompact ? 'spacing.1' : 'spacing.2',
               gap: isVertical ? 'spacing.0' : 'spacing.1',
-              backgroundColor: 'surface.background.gray.intense'
+              backgroundColor: 'interactive.background.gray.faded'
             } : {
               padding: 'spacing.0',
               gap: isVertical ? 'spacing.0' : {
@@ -110,7 +112,7 @@ var TabList = function TabList(_ref) {
             }))]
           });
         }
-      }), !isVertical ? /*#__PURE__*/jsx(TabIndicator, {
+      }), !(isVertical && isFilled) ? /*#__PURE__*/jsx(TabIndicator, {
         tabListContainerRef: tabListContainerRef
       }) : null]
     }), !isVertical && isBordered ? /*#__PURE__*/jsx(BaseBox, {

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 { 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":";;;;;;;;;;;;;;;;;;;;;;;;;AAeA,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,~~iBAAIW~~,cAAK,~~CAACQ~~,cAAc,CAACH,KAAK,CAAC,EAAE;AAC/B;~~AACAV~~,MAAAA,gBAAgB,KAAhBA,IAAAA,IAAAA,gBAAgB,KAAhBA,KAAAA,CAAAA,IAAAA,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,SAARA,MAAMA,CAAGC,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~~,QAAQ;~~AACtBP~~,cAAAA,WAAW,EAAE,MAAM;AACnBF,cAAAA,WAAW,EAAE,iCAAiC;AAC9CU,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;~~AAAAzD~~,cAAAA,QAAA,EAEJA,QAAAA;AAAQ,aAAA,CACF,CAAC,CAAA;AAAA,WACH,CAAC,CAAA;AAEd,SAAA;~~AAAE~~,~~OACH,~~CAAC,EACD,~~CAACS~~,UAAU,~~gBAAG2B~~,GAAA,CAACsB,YAAY,EAAA;~~AAAChD~~,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;AACzCY,MAAAA,iBAAiB,EAAEf,UAAW;AAC9BgB,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, size } = useTabsContext();\n const tabListContainerRef = React.useRef<HTMLDivElement>(null);\n const isBordered = variant === 'bordered';\n const isFilled = variant === 'filled';\n const isCompact = size === 'small' && !isVertical;\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: isCompact ? 'large' : 'medium',\n borderWidth: 'none',\n borderColor: 'interactive.border.gray.default',\n padding: isCompact ? 'spacing.1' : 'spacing.2',\n gap: isVertical ? 'spacing.0' : 'spacing.1',\n backgroundColor: 'interactive.background.gray.faded',\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 && isFilled) ? (\n <TabIndicator tabListContainerRef={tabListContainerRef} />\n ) : 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","size","tabListContainerRef","React","useRef","isBordered","isFilled","isCompact","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/lib/web/production/components/Tabs/tabTokens.js CHANGED Viewed

@@ -79,9 +79,9 @@ var paddingX = {
 var trackColor = 'surface.border.gray.muted';
 var textColor = {
   selected: {
-    "default": 'interactive.text.primary.subtle',
-    highlighted: 'interactive.text.primary.normal',
-    disabled: 'interactive.text.primary.normal'
+    "default": 'interactive.text.gray.normal',
+    highlighted: 'interactive.text.gray.normal',
+    disabled: 'interactive.text.gray.disabled'
   },
   unselected: {
     "default": 'interactive.text.gray.muted',
@@ -90,38 +90,58 @@ var textColor = {
   }
 };
 var backgroundColor = {
-  unselected: {
+  selected: {
     bordered: {
-      "default": 'colors.transparent',
-      highlighted: 'colors.transparent',
-      disabled: 'colors.transparent'
-    },
-    borderless: {
-      "default": 'colors.transparent',
-      highlighted: 'colors.transparent',
-      disabled: 'colors.transparent'
+      horizontal: {
+        "default": 'colors.transparent',
+        highlighted: 'colors.transparent',
+        disabled: 'colors.transparent'
+      },
+      vertical: {
+        "default": 'colors.transparent',
+        highlighted: 'colors.transparent',
+        disabled: 'colors.transparent'
+      }
     },
     filled: {
-      "default": 'colors.transparent',
-      highlighted: 'colors.interactive.background.gray.default',
-      disabled: 'colors.transparent'
+      // Horizontal filled selected tabs use 'transparent' because
+      // the TabIndicator (white pill) handles the selected background
+      horizontal: {
+        "default": 'colors.transparent',
+        highlighted: 'colors.transparent',
+        disabled: 'colors.transparent'
+      },
+      vertical: {
+        "default": 'colors.surface.background.gray.intense',
+        highlighted: 'colors.surface.background.gray.intense',
+        disabled: 'colors.transparent'
+      }
     }
   },
-  selected: {
+  unselected: {
     bordered: {
-      "default": 'colors.transparent',
-      highlighted: 'colors.transparent',
-      disabled: 'colors.transparent'
-    },
-    borderless: {
-      "default": 'colors.transparent',
-      highlighted: 'colors.transparent',
-      disabled: 'colors.transparent'
+      horizontal: {
+        "default": 'colors.transparent',
+        highlighted: 'colors.transparent',
+        disabled: 'colors.transparent'
+      },
+      vertical: {
+        "default": 'colors.transparent',
+        highlighted: 'colors.transparent',
+        disabled: 'colors.transparent'
+      }
     },
     filled: {
-      "default": 'colors.interactive.background.primary.faded',
-      highlighted: 'colors.interactive.background.primary.faded',
-      disabled: 'colors.transparent'
+      horizontal: {
+        "default": 'colors.transparent',
+        highlighted: 'colors.interactive.background.gray.default',
+        disabled: 'colors.transparent'
+      },
+      vertical: {
+        "default": 'colors.transparent',
+        highlighted: 'colors.interactive.background.gray.default',
+        disabled: 'colors.transparent'
+      }
     }
   }
 };
@@ -132,9 +152,9 @@ var iconColor = {
     disabled: 'interactive.icon.gray.disabled'
   },
   selected: {
-    "default": 'interactive.icon.primary.subtle',
-    highlighted: 'interactive.icon.primary.normal',
-    disabled: 'interactive.icon.primary.disabled'
+    "default": 'interactive.icon.gray.normal',
+    highlighted: 'interactive.icon.gray.normal',
+    disabled: 'interactive.icon.gray.disabled'
   }
 };
 var textSizeMap = {
@@ -142,6 +162,139 @@ var textSizeMap = {
   medium: 'medium',
   large: 'large'
 };
+var borderWidth = {
+  bordered: {
+    horizontal: 'thicker',
+    vertical: 'thick'
+  },
+  filled: {
+    horizontal: 'none',
+    vertical: 'none'
+  }
+};
+var borderRadius = {
+  bordered: {
+    horizontal: {
+      small: 'none',
+      medium: 'none',
+      large: 'none'
+    },
+    vertical: {
+      small: 'none',
+      medium: 'none',
+      large: 'none'
+    }
+  },
+  filled: {
+    horizontal: {
+      small: 'medium',
+      medium: 'small',
+      large: 'small'
+    },
+    vertical: {
+      small: 'small',
+      medium: 'small',
+      large: 'small'
+    }
+  }
+};
+var focusBorderRadius = {
+  bordered: {
+    horizontal: {
+      small: 'medium',
+      medium: 'medium',
+      large: 'medium'
+    },
+    vertical: {
+      small: 'medium',
+      medium: 'medium',
+      large: 'medium'
+    }
+  },
+  filled: {
+    horizontal: {
+      small: 'medium',
+      medium: 'small',
+      large: 'small'
+    },
+    vertical: {
+      small: 'small',
+      medium: 'small',
+      large: 'small'
+    }
+  }
+};
+var borderColor = {
+  selected: {
+    bordered: {
+      horizontal: {
+        "default": 'colors.transparent',
+        highlighted: 'colors.transparent',
+        disabled: 'colors.transparent'
+      },
+      vertical: {
+        "default": 'colors.transparent',
+        highlighted: 'colors.transparent',
+        disabled: 'colors.transparent'
+      }
+    },
+    filled: {
+      horizontal: {
+        "default": 'colors.transparent',
+        highlighted: 'colors.transparent',
+        disabled: 'colors.transparent'
+      },
+      vertical: {
+        "default": 'colors.transparent',
+        highlighted: 'colors.transparent',
+        disabled: 'colors.transparent'
+      }
+    }
+  },
+  unselected: {
+    bordered: {
+      horizontal: {
+        "default": 'colors.transparent',
+        highlighted: 'colors.interactive.border.gray.highlighted',
+        disabled: 'colors.transparent'
+      },
+      vertical: {
+        "default": 'colors.transparent',
+        highlighted: 'colors.interactive.border.gray.highlighted',
+        disabled: 'colors.transparent'
+      }
+    },
+    filled: {
+      horizontal: {
+        "default": 'colors.transparent',
+        highlighted: 'colors.transparent',
+        disabled: 'colors.transparent'
+      },
+      vertical: {
+        "default": 'colors.transparent',
+        highlighted: 'colors.transparent',
+        disabled: 'colors.transparent'
+      }
+    }
+  }
+};
+/**
+ * In horizontal filled tabs, the TabIndicator (white pill) is rendered
+ * as an absolutely positioned sibling element AFTER the tab items in the DOM.
+ * The tab button needs `position: relative` + `zIndex: 1` so its content
+ * renders above the indicator.
+ */
+var needsStackingContext = {
+  bordered: {
+    horizontal: false,
+    vertical: false
+  },
+  filled: {
+    horizontal: true,
+    vertical: false
+  }
+};
-export { backgroundColor, iconColor, paddingBottom, paddingTop, paddingX, textColor, textSizeMap, trackColor };
+export { backgroundColor, borderColor, borderRadius, borderWidth, focusBorderRadius, iconColor, needsStackingContext, paddingBottom, paddingTop, paddingX, textColor, textSizeMap, trackColor };
 //# sourceMappingURL=tabTokens.js.map