@razorpay/blade 12.98.1 → 12.111.0

package/build/lib/web/development/components/Table/TableToolbar.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableToolbar.web.js","sources":["../../../../../../src/components/Table/TableToolbar.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { ComponentIds } from './componentIds';\nimport { tableToolbar } from './tokens';\nimport { useTableContext } from './TableContext';\nimport type { TableToolbarProps, TableToolbarActionsProps } from './types';\nimport { makeMotionTime, makeSize } from '~utils';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { Divider } from '~components/Divider';\nimport { Link } from '~components/Link';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { useTheme } from '~components/BladeProvider';\n\n/**\n * TableToolbarActions is a component that is used to render actions in the TableToolbar.\n * It is a flex container that will render its children in a row on desktop and a column on mobile.\n * @param children - any react element\n * @param styledProps - accepts all of the styled props from Box\n */\nconst _TableToolbarActions = ({\n  children,\n  ...rest\n}: TableToolbarActionsProps): React.ReactElement => {\n  const { platform } = useTheme();\n  const onMobile = platform === 'onMobile';\n  return (\n    <BaseBox\n      display=\"flex\"\n      flex={onMobile ? 1 : 0}\n      justifyContent={onMobile ? 'flex-start' : 'flex-end'}\n      {...getStyledProps(rest)}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst TableToolbarActions = assignWithoutSideEffects(_TableToolbarActions, {\n  componentId: ComponentIds.TableToolbarActions,\n});\n\nconst ToolbarWrapper = styled(BaseBox)(({ theme }) => ({\n  transition: `background-color ${makeMotionTime(\n    getIn(theme.motion, tableToolbar.backgroundColorMotionDuration),\n  )} ${getIn(theme.motion, tableToolbar.backgroundColorMotionEasing)}`,\n}));\n\nconst _TableToolbar = ({\n  children,\n  title,\n  selectedTitle: controlledSelectedTitle,\n}: TableToolbarProps): React.ReactElement => {\n  const {\n    selectionType,\n    selectedRows,\n    deselectAllRows,\n    currentPaginationState,\n    totalItems,\n    tableToolbarPlacement,\n  } = useTableContext();\n  const { platform } = useTheme();\n  const isSelected = selectedRows && selectedRows.length > 0;\n\n  const defaultTitle = currentPaginationState\n    ? `Showing ${currentPaginationState.page * currentPaginationState.size + 1}-${\n        currentPaginationState.page * currentPaginationState.size + currentPaginationState.size\n      } Items`\n    : `Showing 1-${totalItems} Items`;\n  const selectedItemsCount = selectedRows ? selectedRows.length : 0;\n  const selectedTitle = isSelected\n    ? controlledSelectedTitle ??\n      `${selectedRows.length} ${selectedItemsCount === 1 ? 'Item' : 'Items'} Selected`\n    : null;\n\n  const onMobile = platform === 'onMobile';\n\n  const deselectButton = (\n    <Link size=\"small\" marginLeft=\"spacing.3\" variant=\"button\" onClick={() => deselectAllRows()}>\n      Deselect\n    </Link>\n  );\n\n  return (\n    <BaseBox>\n      <ToolbarWrapper\n        display=\"flex\"\n        backgroundColor={tableToolbar.backgroundColor}\n        padding={tableToolbar.padding}\n        flexWrap=\"wrap\"\n        flexDirection={onMobile && tableToolbarPlacement === 'inline' ? 'column' : 'row'}\n        gap=\"spacing.5\"\n        minHeight={makeSize(tableToolbar.minHeight)}\n      >\n        <BaseBox display=\"flex\" alignItems=\"center\" flex={1}>\n          <BaseBox>\n            <Text\n              size=\"small\"\n              weight=\"medium\"\n              color={isSelected ? 'surface.text.gray.normal' : 'surface.text.gray.subtle'}\n            >\n              {selectedTitle ?? title ?? defaultTitle}\n            </Text>\n          </BaseBox>\n\n          {selectionType !== 'none' && (\n            <BaseBox display=\"flex\" marginLeft=\"spacing.3\" height=\"spacing.6\">\n              <Divider orientation=\"vertical\" thickness=\"thick\" />\n              {deselectButton}\n            </BaseBox>\n          )}\n        </BaseBox>\n        {children}\n      </ToolbarWrapper>\n    </BaseBox>\n  );\n};\n\nconst TableToolbar = assignWithoutSideEffects(_TableToolbar, {\n  componentId: ComponentIds.TableToolbar,\n});\n\nexport { TableToolbar, TableToolbarActions };\n"],"names":["_TableToolbarActions","_ref","children","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","platform","onMobile","_jsx","BaseBox","_objectSpread","display","flex","justifyContent","getStyledProps","makeAnalyticsAttribute","TableToolbarActions","assignWithoutSideEffects","componentId","ComponentIds","ToolbarWrapper","styled","withConfig","displayName","_ref2","theme","transition","concat","makeMotionTime","getIn","motion","tableToolbar","backgroundColorMotionDuration","backgroundColorMotionEasing","_TableToolbar","_ref3","_ref4","title","controlledSelectedTitle","selectedTitle","_useTableContext","useTableContext","selectionType","selectedRows","deselectAllRows","currentPaginationState","totalItems","tableToolbarPlacement","_useTheme2","isSelected","length","defaultTitle","page","size","selectedItemsCount","deselectButton","Link","marginLeft","variant","onClick","_jsxs","backgroundColor","padding","flexWrap","flexDirection","gap","minHeight","makeSize","alignItems","Text","weight","color","height","Divider","orientation","thickness","TableToolbar"],"mappings":"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"}
+{"version":3,"file":"TableToolbar.web.js","sources":["../../../../../../src/components/Table/TableToolbar.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { ComponentIds } from './componentIds';\nimport { tableToolbar } from './tokens';\nimport { useTableContext } from './TableContext';\nimport type { TableToolbarProps, TableToolbarActionsProps } from './types';\nimport { makeMotionTime, makeSize } from '~utils';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { Divider } from '~components/Divider';\nimport { Link } from '~components/Link';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { useTheme } from '~components/BladeProvider';\n\n/**\n * TableToolbarActions is a component that is used to render actions in the TableToolbar.\n * It is a flex container that will render its children in a row on desktop and a column on mobile.\n * @param children - any react element\n * @param styledProps - accepts all of the styled props from Box\n */\nconst _TableToolbarActions = ({\n  children,\n  ...rest\n}: TableToolbarActionsProps): React.ReactElement => {\n  const { platform } = useTheme();\n  const onMobile = platform === 'onMobile';\n  return (\n    <BaseBox\n      display=\"flex\"\n      flex={onMobile ? 1 : 0}\n      justifyContent={onMobile ? 'flex-start' : 'flex-end'}\n      {...getStyledProps(rest)}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst TableToolbarActions = assignWithoutSideEffects(_TableToolbarActions, {\n  componentId: ComponentIds.TableToolbarActions,\n});\n\nconst ToolbarWrapper = styled(BaseBox)(({ theme }) => ({\n  transition: `background-color ${makeMotionTime(\n    getIn(theme.motion, tableToolbar.backgroundColorMotionDuration),\n  )} ${getIn(theme.motion, tableToolbar.backgroundColorMotionEasing)}`,\n}));\n\nconst _TableToolbar = ({\n  children,\n  title,\n  selectedTitle: controlledSelectedTitle,\n}: TableToolbarProps): React.ReactElement => {\n  const {\n    selectionType,\n    selectedRows,\n    deselectAllRows,\n    currentPaginationState,\n    totalItems,\n    tableToolbarPlacement,\n  } = useTableContext();\n  const { platform } = useTheme();\n  const isSelected = selectedRows && selectedRows.length > 0;\n\n  const defaultTitle = currentPaginationState\n    ? `Showing ${currentPaginationState.page * currentPaginationState.size + 1}-${\n        currentPaginationState.page * currentPaginationState.size + currentPaginationState.size\n      } Items`\n    : `Showing 1-${totalItems} Items`;\n  const selectedItemsCount = selectedRows ? selectedRows.length : 0;\n  const selectedTitle = isSelected\n    ? controlledSelectedTitle ??\n      `${selectedRows.length} ${selectedItemsCount === 1 ? 'Item' : 'Items'} Selected`\n    : null;\n\n  const onMobile = platform === 'onMobile';\n\n  const deselectButton = (\n    <Link size=\"small\" marginLeft=\"spacing.3\" variant=\"button\" onClick={() => deselectAllRows()}>\n      Deselect\n    </Link>\n  );\n\n  return (\n    <BaseBox>\n      <ToolbarWrapper\n        display=\"flex\"\n        backgroundColor={tableToolbar.backgroundColor}\n        padding={tableToolbar.padding}\n        flexWrap=\"wrap\"\n        flexDirection={onMobile && tableToolbarPlacement === 'inline' ? 'column' : 'row'}\n        gap=\"spacing.5\"\n        minHeight={makeSize(tableToolbar.minHeight)}\n      >\n        <BaseBox display=\"flex\" alignItems=\"center\" flex={1}>\n          <BaseBox>\n            <Text\n              size=\"small\"\n              weight=\"medium\"\n              color={isSelected ? 'surface.text.gray.normal' : 'surface.text.gray.subtle'}\n            >\n              {selectedTitle ?? title ?? defaultTitle}\n            </Text>\n          </BaseBox>\n\n          {selectionType !== 'none' && isSelected && (\n            <BaseBox display=\"flex\" marginLeft=\"spacing.3\" height=\"spacing.6\">\n              <Divider orientation=\"vertical\" thickness=\"thick\" />\n              {deselectButton}\n            </BaseBox>\n          )}\n        </BaseBox>\n        {children}\n      </ToolbarWrapper>\n    </BaseBox>\n  );\n};\n\nconst TableToolbar = assignWithoutSideEffects(_TableToolbar, {\n  componentId: ComponentIds.TableToolbar,\n});\n\nexport { TableToolbar, TableToolbarActions };\n"],"names":["_TableToolbarActions","_ref","children","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","platform","onMobile","_jsx","BaseBox","_objectSpread","display","flex","justifyContent","getStyledProps","makeAnalyticsAttribute","TableToolbarActions","assignWithoutSideEffects","componentId","ComponentIds","ToolbarWrapper","styled","withConfig","displayName","_ref2","theme","transition","concat","makeMotionTime","getIn","motion","tableToolbar","backgroundColorMotionDuration","backgroundColorMotionEasing","_TableToolbar","_ref3","_ref4","title","controlledSelectedTitle","selectedTitle","_useTableContext","useTableContext","selectionType","selectedRows","deselectAllRows","currentPaginationState","totalItems","tableToolbarPlacement","_useTheme2","isSelected","length","defaultTitle","page","size","selectedItemsCount","deselectButton","Link","marginLeft","variant","onClick","_jsxs","backgroundColor","padding","flexWrap","flexDirection","gap","minHeight","makeSize","alignItems","Text","weight","color","height","Divider","orientation","thickness","TableToolbar"],"mappings":"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"}

package/build/lib/web/development/components/Tabs/TabIndicator.web.js

@@ -125,19 +125,21 @@ var TabIndicator = function TabIndicator(_ref2) {
     })));
   }
   if (variant === 'filled') {
-    var shouldHaveMediumBorderRadius = size === 'small' && !isVertical;
+    var isSmallHorizontal = size === 'small' && !isVertical;
     return /*#__PURE__*/jsx(StyledTabIndicator, _objectSpread({
       pointerEvents: "none",
       position: "absolute",
       left: "0px",
       top: "0px",
-      borderRadius: shouldHaveMediumBorderRadius ? 'medium' : 'small',
+      borderRadius: isSmallHorizontal ? undefined : 'small',
       backgroundColor: "surface.background.gray.intense",
       style: _objectSpread(_objectSpread({}, transitionProps), {}, {
         width: "".concat(dimensions.width, "px"),
         height: "".concat(dimensions.height, "px"),
         transform: "translate(".concat(dimensions.x, "px, ").concat(dimensions.y, "px)")
-      })
+      }, isSmallHorizontal ? {
+        borderRadius: 6
+      } : {})
     }, metaAttribute({
       name: MetaConstants.TabIndicator
     })));

package/build/lib/web/development/components/Tabs/TabIndicator.web.js.map

@@ -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 { 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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"}
+{"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 isSmallHorizontal = size === 'small' && !isVertical;\n    return (\n      <StyledTabIndicator\n        pointerEvents=\"none\"\n        position=\"absolute\"\n        left=\"0px\"\n        top=\"0px\"\n        borderRadius={isSmallHorizontal ? undefined : '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          // 6px for small — deliberate: between xsmall(4px) and small(8px) for visual proportion, mirrors SegmentedControl indicator radius\n          ...(isSmallHorizontal ? { borderRadius: 6 } : {}),\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","isSmallHorizontal","borderRadius","undefined"],"mappings":"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"}

package/build/lib/web/development/components/Tabs/TabItem.web.js

@@ -65,7 +65,8 @@ var StyledTabButton = /*#__PURE__*/styled.button.withConfig({
     paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation][size])),
     // Colors & border
     backgroundColor: getIn(theme, background["default"]),
-    borderRadius: borderRadius$1 === 'none' ? 0 : theme.border.radius[borderRadius$1]
+    // 6px for small filled horizontal — deliberate: between xsmall(4px) and small(8px) for visual proportion, mirrors SegmentedControl item radius
+    borderRadius: borderRadius$1 === 'none' ? 0 : variant === 'filled' && !isVertical && size === 'small' ? 6 : 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),

package/build/lib/web/development/components/Tabs/TabItem.web.js.map

@@ -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  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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"}
+{"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    // 6px for small filled horizontal — deliberate: between xsmall(4px) and small(8px) for visual proportion, mirrors SegmentedControl item radius\n    borderRadius:\n      borderRadius === 'none'\n        ? 0\n        : variant === 'filled' && !isVertical && size === 'small'\n        ? 6\n        : 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/development/components/Tabs/TabList.web.js

@@ -95,7 +95,7 @@ var TabList = function TabList(_ref) {
               alignItems: isVertical ? 'start' : 'center',
               overflow: isVertical ? 'hidden' : undefined
             }, isFilled ? {
-              borderRadius: isCompact ? 'large' : 'medium',
+              borderRadius: isCompact ? 'small' : 'medium',
               borderWidth: 'none',
               borderColor: 'interactive.border.gray.default',
               padding: isCompact ? 'spacing.1' : 'spacing.2',

package/build/lib/web/development/components/Tabs/TabList.web.js.map

@@ -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, 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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"}
+{"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 ? 'small' : '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/development/components/Tabs/tabTokens.js

@@ -187,7 +187,7 @@ var borderRadius = {
   },
   filled: {
     horizontal: {
-      small: 'medium',
+      small: 'small',
       medium: 'small',
       large: 'small'
     },
@@ -213,7 +213,7 @@ var focusBorderRadius = {
   },
   filled: {
     horizontal: {
-      small: 'medium',
+      small: 'small',
       medium: 'small',
       large: 'small'
     },

package/build/lib/web/development/components/Tabs/tabTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabTokens.js","sources":["../../../../../../src/components/Tabs/tabTokens.ts"],"sourcesContent":["import type { TabsProps } from './types';\nimport type { DotNotationSpacingStringToken } from '~utils/types';\n\ntype TabSizes = NonNullable<TabsProps['size']>;\ntype TabVariants = Exclude<NonNullable<TabsProps['variant']>, 'borderless'>;\ntype TabOrientation = 'horizontal' | 'vertical';\n\ntype TabItemPadding = Record<\n  TabVariants,\n  Record<TabOrientation, Record<TabSizes, DotNotationSpacingStringToken>>\n>;\n\nconst paddingTop: TabItemPadding = {\n  bordered: {\n    horizontal: {\n      small: 'spacing.0',\n      medium: 'spacing.2',\n      large: 'spacing.4',\n    },\n    vertical: {\n      small: 'spacing.1',\n      medium: 'spacing.2',\n      large: 'spacing.3',\n    },\n  },\n  filled: {\n    horizontal: {\n      small: 'spacing.1',\n      medium: 'spacing.2',\n      large: 'spacing.3',\n    },\n    vertical: {\n      small: 'spacing.3',\n      medium: 'spacing.4',\n      large: 'spacing.4',\n    },\n  },\n};\n\nconst paddingBottom: TabItemPadding = {\n  bordered: {\n    horizontal: {\n      small: 'spacing.3',\n      medium: 'spacing.4',\n      large: 'spacing.4',\n    },\n    vertical: {\n      small: 'spacing.1',\n      medium: 'spacing.2',\n      large: 'spacing.3',\n    },\n  },\n  filled: {\n    horizontal: {\n      small: 'spacing.1',\n      medium: 'spacing.2',\n      large: 'spacing.3',\n    },\n    vertical: {\n      small: 'spacing.3',\n      medium: 'spacing.4',\n      large: 'spacing.4',\n    },\n  },\n};\n\nconst paddingX: TabItemPadding = {\n  bordered: {\n    horizontal: {\n      small: 'spacing.0',\n      medium: 'spacing.0',\n      large: 'spacing.0',\n    },\n    vertical: {\n      small: 'spacing.4',\n      medium: 'spacing.4',\n      large: 'spacing.4',\n    },\n  },\n  filled: {\n    horizontal: {\n      small: 'spacing.3',\n      medium: 'spacing.3',\n      large: 'spacing.3',\n    },\n    vertical: {\n      small: 'spacing.4',\n      medium: 'spacing.4',\n      large: 'spacing.4',\n    },\n  },\n};\n\nconst trackColor = 'surface.border.gray.muted';\nconst textColor = {\n  selected: {\n    default: 'interactive.text.gray.normal',\n    highlighted: 'interactive.text.gray.normal',\n    disabled: 'interactive.text.gray.disabled',\n  },\n  unselected: {\n    default: 'interactive.text.gray.muted',\n    highlighted: 'interactive.text.gray.subtle',\n    disabled: 'interactive.text.gray.disabled',\n  },\n} as const;\n\nconst backgroundColor = {\n  selected: {\n    bordered: {\n      horizontal: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n      vertical: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n    },\n    filled: {\n      // Horizontal filled selected tabs use 'transparent' because\n      // the TabIndicator (white pill) handles the selected background\n      horizontal: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n      vertical: {\n        default: 'colors.surface.background.gray.intense',\n        highlighted: 'colors.surface.background.gray.intense',\n        disabled: 'colors.transparent',\n      },\n    },\n  },\n  unselected: {\n    bordered: {\n      horizontal: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n      vertical: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n    },\n    filled: {\n      horizontal: {\n        default: 'colors.transparent',\n        highlighted: 'colors.interactive.background.gray.default',\n        disabled: 'colors.transparent',\n      },\n      vertical: {\n        default: 'colors.transparent',\n        highlighted: 'colors.interactive.background.gray.default',\n        disabled: 'colors.transparent',\n      },\n    },\n  },\n} as const;\n\nconst iconColor = {\n  unselected: {\n    default: 'interactive.icon.gray.muted',\n    highlighted: 'interactive.icon.gray.subtle',\n    disabled: 'interactive.icon.gray.disabled',\n  },\n  selected: {\n    default: 'interactive.icon.gray.normal',\n    highlighted: 'interactive.icon.gray.normal',\n    disabled: 'interactive.icon.gray.disabled',\n  },\n} as const;\n\nconst textSizeMap = {\n  small: 'medium',\n  medium: 'medium',\n  large: 'large',\n} as const;\n\ntype BorderWidthValue = 'none' | 'thick' | 'thicker';\n\nconst borderWidth: Record<TabVariants, Record<TabOrientation, BorderWidthValue>> = {\n  bordered: {\n    horizontal: 'thicker',\n    vertical: 'thick',\n  },\n  filled: {\n    horizontal: 'none',\n    vertical: 'none',\n  },\n};\n\ntype BorderRadiusToken = 'none' | 'small' | 'medium';\n\nconst borderRadius: Record<\n  TabVariants,\n  Record<TabOrientation, Record<TabSizes, BorderRadiusToken>>\n> = {\n  bordered: {\n    horizontal: { small: 'none', medium: 'none', large: 'none' },\n    vertical: { small: 'none', medium: 'none', large: 'none' },\n  },\n  filled: {\n    horizontal: { small: 'medium', medium: 'small', large: 'small' },\n    vertical: { small: 'small', medium: 'small', large: 'small' },\n  },\n};\n\nconst focusBorderRadius: Record<\n  TabVariants,\n  Record<TabOrientation, Record<TabSizes, Exclude<BorderRadiusToken, 'none'>>>\n> = {\n  bordered: {\n    horizontal: { small: 'medium', medium: 'medium', large: 'medium' },\n    vertical: { small: 'medium', medium: 'medium', large: 'medium' },\n  },\n  filled: {\n    horizontal: { small: 'medium', medium: 'small', large: 'small' },\n    vertical: { small: 'small', medium: 'small', large: 'small' },\n  },\n};\n\nconst borderColor = {\n  selected: {\n    bordered: {\n      horizontal: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n      vertical: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n    },\n    filled: {\n      horizontal: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n      vertical: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n    },\n  },\n  unselected: {\n    bordered: {\n      horizontal: {\n        default: 'colors.transparent',\n        highlighted: 'colors.interactive.border.gray.highlighted',\n        disabled: 'colors.transparent',\n      },\n      vertical: {\n        default: 'colors.transparent',\n        highlighted: 'colors.interactive.border.gray.highlighted',\n        disabled: 'colors.transparent',\n      },\n    },\n    filled: {\n      horizontal: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n      vertical: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n    },\n  },\n} as const;\n\n/**\n * In horizontal filled tabs, the TabIndicator (white pill) is rendered\n * as an absolutely positioned sibling element AFTER the tab items in the DOM.\n * The tab button needs `position: relative` + `zIndex: 1` so its content\n * renders above the indicator.\n */\nconst needsStackingContext: Record<TabVariants, Record<TabOrientation, boolean>> = {\n  bordered: {\n    horizontal: false,\n    vertical: false,\n  },\n  filled: {\n    horizontal: true,\n    vertical: false,\n  },\n};\n\nexport {\n  backgroundColor,\n  textColor,\n  iconColor,\n  trackColor,\n  paddingTop,\n  paddingBottom,\n  paddingX,\n  textSizeMap,\n  borderWidth,\n  borderRadius,\n  focusBorderRadius,\n  borderColor,\n  needsStackingContext,\n};\n\nexport type { BorderRadiusToken, BorderWidthValue };\n"],"names":["paddingTop","bordered","horizontal","small","medium","large","vertical","filled","paddingBottom","paddingX","trackColor","textColor","selected","highlighted","disabled","unselected","backgroundColor","iconColor","textSizeMap","borderWidth","borderRadius","focusBorderRadius","borderColor","needsStackingContext"],"mappings":"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"}
+{"version":3,"file":"tabTokens.js","sources":["../../../../../../src/components/Tabs/tabTokens.ts"],"sourcesContent":["import type { TabsProps } from './types';\nimport type { DotNotationSpacingStringToken } from '~utils/types';\n\ntype TabSizes = NonNullable<TabsProps['size']>;\ntype TabVariants = Exclude<NonNullable<TabsProps['variant']>, 'borderless'>;\ntype TabOrientation = 'horizontal' | 'vertical';\n\ntype TabItemPadding = Record<\n  TabVariants,\n  Record<TabOrientation, Record<TabSizes, DotNotationSpacingStringToken>>\n>;\n\nconst paddingTop: TabItemPadding = {\n  bordered: {\n    horizontal: {\n      small: 'spacing.0',\n      medium: 'spacing.2',\n      large: 'spacing.4',\n    },\n    vertical: {\n      small: 'spacing.1',\n      medium: 'spacing.2',\n      large: 'spacing.3',\n    },\n  },\n  filled: {\n    horizontal: {\n      small: 'spacing.1',\n      medium: 'spacing.2',\n      large: 'spacing.3',\n    },\n    vertical: {\n      small: 'spacing.3',\n      medium: 'spacing.4',\n      large: 'spacing.4',\n    },\n  },\n};\n\nconst paddingBottom: TabItemPadding = {\n  bordered: {\n    horizontal: {\n      small: 'spacing.3',\n      medium: 'spacing.4',\n      large: 'spacing.4',\n    },\n    vertical: {\n      small: 'spacing.1',\n      medium: 'spacing.2',\n      large: 'spacing.3',\n    },\n  },\n  filled: {\n    horizontal: {\n      small: 'spacing.1',\n      medium: 'spacing.2',\n      large: 'spacing.3',\n    },\n    vertical: {\n      small: 'spacing.3',\n      medium: 'spacing.4',\n      large: 'spacing.4',\n    },\n  },\n};\n\nconst paddingX: TabItemPadding = {\n  bordered: {\n    horizontal: {\n      small: 'spacing.0',\n      medium: 'spacing.0',\n      large: 'spacing.0',\n    },\n    vertical: {\n      small: 'spacing.4',\n      medium: 'spacing.4',\n      large: 'spacing.4',\n    },\n  },\n  filled: {\n    horizontal: {\n      small: 'spacing.3',\n      medium: 'spacing.3',\n      large: 'spacing.3',\n    },\n    vertical: {\n      small: 'spacing.4',\n      medium: 'spacing.4',\n      large: 'spacing.4',\n    },\n  },\n};\n\nconst trackColor = 'surface.border.gray.muted';\nconst textColor = {\n  selected: {\n    default: 'interactive.text.gray.normal',\n    highlighted: 'interactive.text.gray.normal',\n    disabled: 'interactive.text.gray.disabled',\n  },\n  unselected: {\n    default: 'interactive.text.gray.muted',\n    highlighted: 'interactive.text.gray.subtle',\n    disabled: 'interactive.text.gray.disabled',\n  },\n} as const;\n\nconst backgroundColor = {\n  selected: {\n    bordered: {\n      horizontal: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n      vertical: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n    },\n    filled: {\n      // Horizontal filled selected tabs use 'transparent' because\n      // the TabIndicator (white pill) handles the selected background\n      horizontal: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n      vertical: {\n        default: 'colors.surface.background.gray.intense',\n        highlighted: 'colors.surface.background.gray.intense',\n        disabled: 'colors.transparent',\n      },\n    },\n  },\n  unselected: {\n    bordered: {\n      horizontal: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n      vertical: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n    },\n    filled: {\n      horizontal: {\n        default: 'colors.transparent',\n        highlighted: 'colors.interactive.background.gray.default',\n        disabled: 'colors.transparent',\n      },\n      vertical: {\n        default: 'colors.transparent',\n        highlighted: 'colors.interactive.background.gray.default',\n        disabled: 'colors.transparent',\n      },\n    },\n  },\n} as const;\n\nconst iconColor = {\n  unselected: {\n    default: 'interactive.icon.gray.muted',\n    highlighted: 'interactive.icon.gray.subtle',\n    disabled: 'interactive.icon.gray.disabled',\n  },\n  selected: {\n    default: 'interactive.icon.gray.normal',\n    highlighted: 'interactive.icon.gray.normal',\n    disabled: 'interactive.icon.gray.disabled',\n  },\n} as const;\n\nconst textSizeMap = {\n  small: 'medium',\n  medium: 'medium',\n  large: 'large',\n} as const;\n\ntype BorderWidthValue = 'none' | 'thick' | 'thicker';\n\nconst borderWidth: Record<TabVariants, Record<TabOrientation, BorderWidthValue>> = {\n  bordered: {\n    horizontal: 'thicker',\n    vertical: 'thick',\n  },\n  filled: {\n    horizontal: 'none',\n    vertical: 'none',\n  },\n};\n\ntype BorderRadiusToken = 'none' | 'small' | 'medium';\n\nconst borderRadius: Record<\n  TabVariants,\n  Record<TabOrientation, Record<TabSizes, BorderRadiusToken>>\n> = {\n  bordered: {\n    horizontal: { small: 'none', medium: 'none', large: 'none' },\n    vertical: { small: 'none', medium: 'none', large: 'none' },\n  },\n  filled: {\n    horizontal: { small: 'small', medium: 'small', large: 'small' },\n    vertical: { small: 'small', medium: 'small', large: 'small' },\n  },\n};\n\nconst focusBorderRadius: Record<\n  TabVariants,\n  Record<TabOrientation, Record<TabSizes, Exclude<BorderRadiusToken, 'none'>>>\n> = {\n  bordered: {\n    horizontal: { small: 'medium', medium: 'medium', large: 'medium' },\n    vertical: { small: 'medium', medium: 'medium', large: 'medium' },\n  },\n  filled: {\n    horizontal: { small: 'small', medium: 'small', large: 'small' },\n    vertical: { small: 'small', medium: 'small', large: 'small' },\n  },\n};\n\nconst borderColor = {\n  selected: {\n    bordered: {\n      horizontal: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n      vertical: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n    },\n    filled: {\n      horizontal: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n      vertical: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n    },\n  },\n  unselected: {\n    bordered: {\n      horizontal: {\n        default: 'colors.transparent',\n        highlighted: 'colors.interactive.border.gray.highlighted',\n        disabled: 'colors.transparent',\n      },\n      vertical: {\n        default: 'colors.transparent',\n        highlighted: 'colors.interactive.border.gray.highlighted',\n        disabled: 'colors.transparent',\n      },\n    },\n    filled: {\n      horizontal: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n      vertical: {\n        default: 'colors.transparent',\n        highlighted: 'colors.transparent',\n        disabled: 'colors.transparent',\n      },\n    },\n  },\n} as const;\n\n/**\n * In horizontal filled tabs, the TabIndicator (white pill) is rendered\n * as an absolutely positioned sibling element AFTER the tab items in the DOM.\n * The tab button needs `position: relative` + `zIndex: 1` so its content\n * renders above the indicator.\n */\nconst needsStackingContext: Record<TabVariants, Record<TabOrientation, boolean>> = {\n  bordered: {\n    horizontal: false,\n    vertical: false,\n  },\n  filled: {\n    horizontal: true,\n    vertical: false,\n  },\n};\n\nexport {\n  backgroundColor,\n  textColor,\n  iconColor,\n  trackColor,\n  paddingTop,\n  paddingBottom,\n  paddingX,\n  textSizeMap,\n  borderWidth,\n  borderRadius,\n  focusBorderRadius,\n  borderColor,\n  needsStackingContext,\n};\n\nexport type { BorderRadiusToken, BorderWidthValue };\n"],"names":["paddingTop","bordered","horizontal","small","medium","large","vertical","filled","paddingBottom","paddingX","trackColor","textColor","selected","highlighted","disabled","unselected","backgroundColor","iconColor","textSizeMap","borderWidth","borderRadius","focusBorderRadius","borderColor","needsStackingContext"],"mappings":"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"}

package/build/lib/web/development/components/Tag/Tag.js

@@ -13,11 +13,13 @@ import '../../tokens/global/index.js';
 import '../Box/BaseBox/index.js';
 import { useIsMobile } from '../../utils/useIsMobile.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
+import '../../utils/useTruncationTitle/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { isReactNative } from '../../utils/platform/isReactNative.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { size } from '../../tokens/global/size.js';
+import { useTruncationTitle } from '../../utils/useTruncationTitle/useTruncationTitle.web.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
@@ -54,6 +56,11 @@ var _Tag = function _Tag(_ref, ref) {
     _isTagInsideInput = _ref._isTagInsideInput,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isMobile = useIsMobile();
+  var _useTruncationTitle = useTruncationTitle({
+      content: typeof children === 'string' ? children : undefined
+    }),
+    containerRef = _useTruncationTitle.containerRef,
+    textRef = _useTruncationTitle.textRef;
   var textColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.subtle';
   var iconColor = isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted';
   var backgroundColor = isDisabled ? 'interactive.background.gray.disabled' : 'interactive.background.gray.default';
@@ -98,9 +105,11 @@ var _Tag = function _Tag(_ref, ref) {
           marginRight: "spacing.2"
         })
       }) : null, /*#__PURE__*/jsx(Box, {
+        ref: containerRef,
         display: "flex",
         flexDirection: "row",
         children: /*#__PURE__*/jsx(Text, {
+          ref: textRef,
           textAlign: "center",
           truncateAfterLines: 1,
           marginRight: "spacing.2",

package/build/lib/web/development/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { TagProps } from './types';\nimport { Box } from '~components/Box';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { isReactNative, makeSize } from '~utils';\nimport { size as globalSizeTokens } from '~tokens/global';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { PaddingProps } from '~components/Box/BaseBox/types/spacingTypes';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst FocussableTag = styled(BaseBox)<{ _isVirtuallyFocused: TagProps['_isVirtuallyFocused'] }>(\n  (props) => {\n    if (props._isVirtuallyFocused && !isReactNative()) {\n      return {\n        outline: `${makeSize(globalSizeTokens['1'])} solid ${\n          props.theme.colors.surface.background.gray.subtle\n        }`,\n        boxShadow: `0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`,\n      };\n    }\n\n    return {};\n  },\n);\n\nconst _Tag = (\n  {\n    size = 'medium',\n    icon: Icon,\n    onDismiss,\n    children,\n    isDisabled,\n    testID,\n    _isVirtuallyFocused,\n    _isTagInsideInput,\n    ...rest\n  }: TagProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement | null => {\n  const isMobile = useIsMobile();\n\n  const textColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.subtle';\n  const iconColor = isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted';\n  const backgroundColor = isDisabled\n    ? 'interactive.background.gray.disabled'\n    : 'interactive.background.gray.default';\n\n  const mediumPadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.1', 'spacing.2', 'spacing.1', 'spacing.3'],\n  };\n\n  const largePadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n  };\n\n  const assetSize = React.useMemo((): 'small' | 'medium' => {\n    if (isMobile && size === 'large') {\n      return 'medium';\n    }\n\n    return 'small';\n  }, [isMobile, size]);\n\n  return (\n    <BaseBox\n      ref={ref as never}\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...getStyledProps(rest)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      <FocussableTag\n        display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n        alignSelf={isReactNative() ? 'center' : undefined}\n        flexDirection=\"row\"\n        flexWrap=\"nowrap\"\n        flexShrink={0}\n        backgroundColor={backgroundColor}\n        borderRadius=\"max\"\n        padding={size === 'medium' ? mediumPadding : largePadding}\n        _isVirtuallyFocused={_isVirtuallyFocused}\n      >\n        {/* Leading Icon */}\n        {Icon ? (\n          <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n            <Icon color={iconColor} size={assetSize} marginRight=\"spacing.2\" />\n          </Box>\n        ) : null}\n\n        {/* Tag Text */}\n        <Box display=\"flex\" flexDirection=\"row\">\n          <Text\n            textAlign=\"center\"\n            truncateAfterLines={1}\n            marginRight=\"spacing.2\"\n            color={textColor}\n            size=\"small\"\n          >\n            {children}\n          </Text>\n        </Box>\n\n        {/* Dismiss Icon */}\n        <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <IconButton\n            size={assetSize}\n            icon={CloseIcon}\n            accessibilityLabel={`Close ${children} tag`}\n            isDisabled={isDisabled}\n            _tabIndex={_isTagInsideInput ? -1 : undefined}\n            onClick={(e) => {\n              // Inside tag input, we stop propagation to avoid opening dropdown on click of close on tag\n              if (_isTagInsideInput) {\n                e.stopPropagation();\n              }\n              onDismiss();\n            }}\n          />\n        </Box>\n      </FocussableTag>\n    </BaseBox>\n  );\n};\n\n/**\n * ## Tags\n *\n * Tag component can be used to display selected items on UI.\n *\n * ### Usage\n *\n * ***Note:*** _Make sure to handle state when using Tag_\n *\n * ```jsx\n * const [showTag, setShowTag] = React.useState(true);\n *\n * // ...\n *\n * {showTag && (\n *  <Tag\n *    icon={CheckIcon}\n *    onDismiss={() => setShowTag(false)}\n *  >\n *    Transactions\n *  </Tag>\n * )}\n * ```\n *\n * Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.\n *\n */\nconst Tag = React.forwardRef(_Tag);\n\nexport { Tag };\n"],"names":["FocussableTag","styled","BaseBox","withConfig","displayName","componentId","props","_isVirtuallyFocused","isReactNative","outline","concat","makeSize","globalSizeTokens","theme","colors","surface","background","gray","subtle","boxShadow","interactive","primary","faded","_Tag","_ref","ref","_ref$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","rest","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","_objectSpread","display","getStyledProps","metaAttribute","name","MetaConstants","Tag","makeAnalyticsAttribute","_jsxs","alignSelf","undefined","flexDirection","flexWrap","flexShrink","borderRadius","padding","Box","alignItems","color","marginRight","Text","textAlign","truncateAfterLines","justifyContent","IconButton","CloseIcon","accessibilityLabel","_tabIndex","onClick","e","stopPropagation","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { TagProps } from './types';\nimport { Box } from '~components/Box';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { isReactNative, makeSize } from '~utils';\nimport { size as globalSizeTokens } from '~tokens/global';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { PaddingProps } from '~components/Box/BaseBox/types/spacingTypes';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { useTruncationTitle } from '~utils/useTruncationTitle';\n\nconst FocussableTag = styled(BaseBox)<{ _isVirtuallyFocused: TagProps['_isVirtuallyFocused'] }>(\n  (props) => {\n    if (props._isVirtuallyFocused && !isReactNative()) {\n      return {\n        outline: `${makeSize(globalSizeTokens['1'])} solid ${\n          props.theme.colors.surface.background.gray.subtle\n        }`,\n        boxShadow: `0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`,\n      };\n    }\n\n    return {};\n  },\n);\n\nconst _Tag = (\n  {\n    size = 'medium',\n    icon: Icon,\n    onDismiss,\n    children,\n    isDisabled,\n    testID,\n    _isVirtuallyFocused,\n    _isTagInsideInput,\n    ...rest\n  }: TagProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement | null => {\n  const isMobile = useIsMobile();\n\n  const { containerRef, textRef } = useTruncationTitle({\n    content: typeof children === 'string' ? children : undefined,\n  });\n\n  const textColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.subtle';\n  const iconColor = isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted';\n  const backgroundColor = isDisabled\n    ? 'interactive.background.gray.disabled'\n    : 'interactive.background.gray.default';\n\n  const mediumPadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.1', 'spacing.2', 'spacing.1', 'spacing.3'],\n  };\n\n  const largePadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n  };\n\n  const assetSize = React.useMemo((): 'small' | 'medium' => {\n    if (isMobile && size === 'large') {\n      return 'medium';\n    }\n\n    return 'small';\n  }, [isMobile, size]);\n\n  return (\n    <BaseBox\n      ref={ref as never}\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...getStyledProps(rest)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      <FocussableTag\n        display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n        alignSelf={isReactNative() ? 'center' : undefined}\n        flexDirection=\"row\"\n        flexWrap=\"nowrap\"\n        flexShrink={0}\n        backgroundColor={backgroundColor}\n        borderRadius=\"max\"\n        padding={size === 'medium' ? mediumPadding : largePadding}\n        _isVirtuallyFocused={_isVirtuallyFocused}\n      >\n        {/* Leading Icon */}\n        {Icon ? (\n          <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n            <Icon color={iconColor} size={assetSize} marginRight=\"spacing.2\" />\n          </Box>\n        ) : null}\n\n        {/* Tag Text */}\n        <Box ref={containerRef as never} display=\"flex\" flexDirection=\"row\">\n          <Text\n            ref={textRef as never}\n            textAlign=\"center\"\n            truncateAfterLines={1}\n            marginRight=\"spacing.2\"\n            color={textColor}\n            size=\"small\"\n          >\n            {children}\n          </Text>\n        </Box>\n\n        {/* Dismiss Icon */}\n        <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <IconButton\n            size={assetSize}\n            icon={CloseIcon}\n            accessibilityLabel={`Close ${children} tag`}\n            isDisabled={isDisabled}\n            _tabIndex={_isTagInsideInput ? -1 : undefined}\n            onClick={(e) => {\n              // Inside tag input, we stop propagation to avoid opening dropdown on click of close on tag\n              if (_isTagInsideInput) {\n                e.stopPropagation();\n              }\n              onDismiss();\n            }}\n          />\n        </Box>\n      </FocussableTag>\n    </BaseBox>\n  );\n};\n\n/**\n * ## Tags\n *\n * Tag component can be used to display selected items on UI.\n *\n * ### Usage\n *\n * ***Note:*** _Make sure to handle state when using Tag_\n *\n * ```jsx\n * const [showTag, setShowTag] = React.useState(true);\n *\n * // ...\n *\n * {showTag && (\n *  <Tag\n *    icon={CheckIcon}\n *    onDismiss={() => setShowTag(false)}\n *  >\n *    Transactions\n *  </Tag>\n * )}\n * ```\n *\n * Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.\n *\n */\nconst Tag = React.forwardRef(_Tag);\n\nexport { Tag };\n"],"names":["FocussableTag","styled","BaseBox","withConfig","displayName","componentId","props","_isVirtuallyFocused","isReactNative","outline","concat","makeSize","globalSizeTokens","theme","colors","surface","background","gray","subtle","boxShadow","interactive","primary","faded","_Tag","_ref","ref","_ref$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","rest","_objectWithoutProperties","_excluded","isMobile","useIsMobile","_useTruncationTitle","useTruncationTitle","content","undefined","containerRef","textRef","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","_objectSpread","display","getStyledProps","metaAttribute","name","MetaConstants","Tag","makeAnalyticsAttribute","_jsxs","alignSelf","flexDirection","flexWrap","flexShrink","borderRadius","padding","Box","alignItems","color","marginRight","Text","textAlign","truncateAfterLines","justifyContent","IconButton","CloseIcon","accessibilityLabel","_tabIndex","onClick","e","stopPropagation","forwardRef"],"mappings":"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"}

package/build/lib/web/development/components/TimePicker/useTimePickerState.js

@@ -67,26 +67,25 @@ var useTimePickerState = function useTimePickerState(_ref) {
   var _useControllableState3 = useControllableState({
       value: isOpen,
       defaultValue: defaultIsOpen,
-      onChange: function onChange(isOpen) {
+      onChange: function onChange(open) {
         onOpenChange === null || onOpenChange === void 0 || onOpenChange({
-          isOpen: isOpen
+          isOpen: open
         });
-        // Update old value every time timepicker is opened or closed
-        setOldTimeValue(internalTimeValue);
+        // Snapshot the value when opening so Cancel can restore the pre-edit state.
+        if (open) {
+          setOldTimeValue(internalTimeValue);
+        }
       }
     }),
     _useControllableState4 = _slicedToArray(_useControllableState3, 2),
     controllableIsOpen = _useControllableState4[0],
     setControllableIsOpen = _useControllableState4[1];
   var handleApply = React__default.useCallback(function () {
+    _onChange === null || _onChange === void 0 || _onChange({
+      value: timeValue
+    });
+    setOldTimeValue(internalTimeValue);
     if (showFooterActions) {
-      // Call onChange with current timeValue
-      _onChange === null || _onChange === void 0 || _onChange({
-        value: timeValue
-      });
-      // Update oldTimeValue to current value
-      setOldTimeValue(internalTimeValue);
-      // Call onApply callback
       onApply === null || onApply === void 0 || onApply({
         value: timeValue
       });