@razorpay/blade 11.37.0 → 11.38.1

package/build/lib/web/production/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 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 { makeMotionTime } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport getIn from '~utils/lodashButBetter/get';\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  ...styledProps\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(styledProps)}\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    selectedRows,\n    deselectAllRows,\n    currentPaginationState,\n    totalItems,\n    backgroundColor,\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 marginLeft=\"spacing.5\" variant=\"button\" onClick={() => deselectAllRows()}>\n      Deselect\n    </Link>\n  );\n\n  return (\n    <BaseBox backgroundColor={backgroundColor}>\n      <ToolbarWrapper\n        display=\"flex\"\n        backgroundColor={\n          isSelected ? tableToolbar.backgroundColorSelected : tableToolbar.backgroundColor\n        }\n        padding=\"spacing.4\"\n        flexWrap=\"wrap\"\n        flexDirection={onMobile ? 'column' : 'row'}\n        gap=\"spacing.5\"\n      >\n        <BaseBox display=\"flex\" alignItems=\"center\" flex={1}>\n          <BaseBox>\n            <Text\n              size=\"medium\"\n              weight=\"medium\"\n              color={isSelected ? 'surface.text.gray.normal' : 'surface.text.gray.subtle'}\n            >\n              {selectedTitle ?? title ?? defaultTitle}\n            </Text>\n          </BaseBox>\n          {isSelected && !onMobile && (\n            <BaseBox display=\"flex\" marginLeft=\"spacing.5\" height=\"100%\">\n              <Divider orientation=\"vertical\" thickness=\"thick\" />\n              {deselectButton}\n            </BaseBox>\n          )}\n          {isSelected && onMobile && (\n            <BaseBox display=\"flex\" flex={1} justifyContent=\"flex-end\">\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","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","platform","onMobile","_jsx","BaseBox","_objectSpread","display","flex","justifyContent","getStyledProps","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","selectedRows","deselectAllRows","currentPaginationState","totalItems","backgroundColor","_useTheme2","isSelected","length","defaultTitle","page","size","selectedItemsCount","deselectButton","Link","marginLeft","variant","onClick","_jsxs","backgroundColorSelected","padding","flexWrap","flexDirection","gap","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 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 { makeMotionTime } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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  ...rest\n}: TableToolbarProps): React.ReactElement => {\n  const {\n    selectedRows,\n    deselectAllRows,\n    currentPaginationState,\n    totalItems,\n    backgroundColor,\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 marginLeft=\"spacing.5\" variant=\"button\" onClick={() => deselectAllRows()}>\n      Deselect\n    </Link>\n  );\n\n  return (\n    <BaseBox backgroundColor={backgroundColor} {...makeAnalyticsAttribute(rest)}>\n      <ToolbarWrapper\n        display=\"flex\"\n        backgroundColor={\n          isSelected ? tableToolbar.backgroundColorSelected : tableToolbar.backgroundColor\n        }\n        padding=\"spacing.4\"\n        flexWrap=\"wrap\"\n        flexDirection={onMobile ? 'column' : 'row'}\n        gap=\"spacing.5\"\n      >\n        <BaseBox display=\"flex\" alignItems=\"center\" flex={1}>\n          <BaseBox>\n            <Text\n              size=\"medium\"\n              weight=\"medium\"\n              color={isSelected ? 'surface.text.gray.normal' : 'surface.text.gray.subtle'}\n            >\n              {selectedTitle ?? title ?? defaultTitle}\n            </Text>\n          </BaseBox>\n          {isSelected && !onMobile && (\n            <BaseBox display=\"flex\" marginLeft=\"spacing.5\" height=\"100%\">\n              <Divider orientation=\"vertical\" thickness=\"thick\" />\n              {deselectButton}\n            </BaseBox>\n          )}\n          {isSelected && onMobile && (\n            <BaseBox display=\"flex\" flex={1} justifyContent=\"flex-end\">\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","_excluded2","_useTableContext","useTableContext","selectedRows","deselectAllRows","currentPaginationState","totalItems","backgroundColor","_useTheme2","isSelected","length","defaultTitle","page","size","selectedItemsCount","deselectButton","Link","marginLeft","variant","onClick","_jsxs","backgroundColorSelected","padding","flexWrap","flexDirection","gap","alignItems","Text","weight","color","height","Divider","orientation","thickness","TableToolbar"],"mappings":"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"}

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

@@ -13,6 +13,7 @@ import '../../utils/makeAccessible/index.js';
 import '../../tokens/global/index.js';
 import '../../utils/metaAttribute/index.js';
 import getIn from '../../utils/lodashButBetter/get.js';
+import '../../utils/makeAnalyticsAttribute/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
 import { getMediaQuery } from '../../utils/getMediaQuery/getMediaQuery.js';
@@ -23,9 +24,11 @@ import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { Text } from '../Typography/Text/Text.js';
 
-var _excluded = ["currentInteraction"];
+var _excluded = ["children", "value", "leading", "trailing", "isDisabled", "href", "onClick"],
+  _excluded2 = ["currentInteraction"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var StyledTabButton = /*#__PURE__*/styled.button.withConfig({
@@ -93,7 +96,8 @@ var TabItem = function TabItem(_ref3) {
     _ref3$isDisabled = _ref3.isDisabled,
     isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
     href = _ref3.href,
-    _onClick = _ref3.onClick;
+    _onClick = _ref3.onClick,
+    rest = _objectWithoutProperties(_ref3, _excluded);
   var _useTabsContext = useTabsContext(),
     size = _useTabsContext.size,
     isFullWidthTabItem = _useTabsContext.isFullWidthTabItem,
@@ -104,7 +108,7 @@ var TabItem = function TabItem(_ref3) {
     isVertical = _useTabsContext.isVertical;
   var _useInteraction = useInteraction(),
     currentInteraction = _useInteraction.currentInteraction,
-    interactionProps = _objectWithoutProperties(_useInteraction, _excluded);
+    interactionProps = _objectWithoutProperties(_useInteraction, _excluded2);
   var validatedTrailingComponent = useTabsItemPropRestriction(trailing, size);
   var isSelected = selectedValue === value;
   var selectedState = isSelected ? 'selected' : 'unselected';
@@ -119,7 +123,7 @@ var TabItem = function TabItem(_ref3) {
   };
   var interaction = isDisabled ? 'disabled' : interactionMap[currentInteraction];
   return /*#__PURE__*/jsx(CompositeItem, {
-    render: /*#__PURE__*/jsxs(StyledTabButton, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    render: /*#__PURE__*/jsxs(StyledTabButton, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
       type: "button",
       as: href ? 'a' : 'button',
       href: href,
@@ -143,7 +147,7 @@ var TabItem = function TabItem(_ref3) {
       controls: panelId
     })), metaAttribute({
       name: MetaConstants.TabItem
-    })), {}, {
+    })), makeAnalyticsAttribute(rest)), {}, {
       children: [Leading ? /*#__PURE__*/jsx(Leading, {
         size: iconSizeMap[size],
         color: iconColor[selectedState][interaction]

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

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

@@ -12,12 +12,14 @@ import '../Divider/index.js';
 import '../Box/index.js';
 import '../Box/styledProps/index.js';
 import '../../utils/metaAttribute/index.js';
+import '../../utils/makeAnalyticsAttribute/index.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { Box } from '../Box/Box.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { Divider } from '../Divider/Divider.js';
 
 var _excluded = ["children"];
@@ -35,7 +37,7 @@ var ScrollableArea = /*#__PURE__*/styled(BaseBox).withConfig({
 });
 var TabList = function TabList(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useTabsContext = useTabsContext(),
     setSelectedValue = _useTabsContext.setSelectedValue,
     selectedValue = _useTabsContext.selectedValue,
@@ -56,9 +58,9 @@ var TabList = function TabList(_ref) {
       }, true);
     }
   }, [children, selectedValue, setSelectedValue]);
-  return /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread(_objectSpread({}, getStyledProps(props)), metaAttribute({
+  return /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyledProps(rest)), metaAttribute({
     name: MetaConstants.TabList
-  })), {}, {
+  })), makeAnalyticsAttribute(rest)), {}, {
     display: isVertical ? 'flex' : 'block',
     flexShrink: 0,
     overflow: "hidden",

package/build/lib/web/production/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 { Divider } from '~components/Divider';\nimport { Box } from '~components/Box';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst ScrollableArea = styled(BaseBox)(() => {\n  return {\n    '&::-webkit-scrollbar': { display: 'none' },\n  };\n});\n\nconst TabList = ({\n  children,\n  ...props\n}: { children: React.ReactNode } & StyledPropsBlade): React.ReactElement => {\n  const { setSelectedValue, selectedValue, variant, isVertical } = useTabsContext();\n  const tabListContainerRef = React.useRef<HTMLDivElement>(null);\n  const isBordered = variant === 'bordered';\n  const isFilled = variant === 'filled';\n\n  // Set the first child as the selected value\n  useIsomorphicLayoutEffect(() => {\n    if (selectedValue) return;\n    const first = React.Children.toArray(children)[0];\n    if (React.isValidElement(first)) {\n      // We need to skip calling onChange on the first render when we set the initial value\n      setSelectedValue?.(() => first.props.value, true);\n    }\n  }, [children, selectedValue, setSelectedValue]);\n\n  return (\n    <Box\n      {...getStyledProps(props)}\n      {...metaAttribute({ name: MetaConstants.TabList })}\n      display={isVertical ? 'flex' : 'block'}\n      flexShrink={0}\n      overflow=\"hidden\"\n    >\n      <ScrollableArea\n        position=\"relative\"\n        whiteSpace=\"nowrap\"\n        flex=\"1 1 auto\"\n        width=\"100%\"\n        overflow=\"auto hidden\"\n      >\n        <Composite\n          render={(htmlProps) => {\n            return (\n              <BaseBox flexDirection=\"row\" display=\"flex\">\n                {isVertical && isBordered ? (\n                  <BaseBox\n                    width=\"0px\"\n                    height=\"auto\"\n                    flexGrow={1}\n                    flexShrink={0}\n                    borderColor={trackColor}\n                    borderWidth=\"thin\"\n                    style={{ transform: 'translateX(1.5px)' }}\n                  />\n                ) : null}\n                {/* @ts-expect-error spreading composite props */}\n                <BaseBox\n                  {...htmlProps}\n                  flexGrow={1}\n                  ref={tabListContainerRef}\n                  role=\"tablist\"\n                  width=\"100%\"\n                  display=\"flex\"\n                  flexDirection={isVertical ? 'column' : 'row'}\n                  alignItems={isVertical ? 'start' : 'center'}\n                  overflow={isVertical ? 'hidden' : undefined}\n                  {...(isFilled\n                    ? {\n                        borderRadius: 'small',\n                        borderWidth: 'thin',\n                        borderColor: 'interactive.border.gray.faded',\n                        padding: 'spacing.2',\n                        gap: isVertical ? 'spacing.0' : 'spacing.1',\n                        backgroundColor: 'surface.background.gray.intense',\n                      }\n                    : {\n                        padding: 'spacing.0',\n                        gap: isVertical ? 'spacing.0' : { base: 'spacing.7', m: 'spacing.8' },\n                      })}\n                >\n                  {variant === 'filled' && !isVertical\n                    ? React.Children.map(children, (child, index) => {\n                        return (\n                          <>\n                            {index > 0 ? (\n                              <Divider\n                                margin=\"auto\"\n                                height=\"20px\"\n                                variant=\"subtle\"\n                                orientation=\"vertical\"\n                              />\n                            ) : null}\n                            {child}\n                          </>\n                        );\n                      })\n                    : children}\n                </BaseBox>\n              </BaseBox>\n            );\n          }}\n        />\n        {!isVertical ? <TabIndicator tabListContainerRef={tabListContainerRef} /> : null}\n      </ScrollableArea>\n      {/*\n        Adding border bottom with an div element, we can't put it on the outer Box of tablist because \n        it's not possible to offset or translate a border \n      */}\n      {!isVertical && isBordered ? (\n        <BaseBox\n          style={{ transform: 'translateY(-1px)' }}\n          borderBottomColor={trackColor}\n          borderBottomWidth=\"thin\"\n        />\n      ) : null}\n    </Box>\n  );\n};\n\nexport { TabList };\n"],"names":["ScrollableArea","styled","BaseBox","withConfig","displayName","componentId","display","TabList","_ref","children","props","_objectWithoutProperties","_excluded","_useTabsContext","useTabsContext","setSelectedValue","selectedValue","variant","isVertical","tabListContainerRef","React","useRef","isBordered","isFilled","useIsomorphicLayoutEffect","first","Children","toArray","isValidElement","value","_jsxs","Box","_objectSpread","getStyledProps","metaAttribute","name","MetaConstants","flexShrink","overflow","position","whiteSpace","flex","width","_jsx","Composite","render","htmlProps","flexDirection","height","flexGrow","borderColor","trackColor","borderWidth","style","transform","ref","role","alignItems","undefined","borderRadius","padding","gap","backgroundColor","base","m","map","child","index","_Fragment","Divider","margin","orientation","TabIndicator","borderBottomColor","borderBottomWidth"],"mappings":"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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 { Divider } from '~components/Divider';\nimport { Box } from '~components/Box';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport type { DataAnalyticsAttribute } from '~utils/types';\n\nconst ScrollableArea = styled(BaseBox)(() => {\n  return {\n    '&::-webkit-scrollbar': { display: 'none' },\n  };\n});\n\nconst TabList = ({\n  children,\n  ...rest\n}: { children: React.ReactNode } & StyledPropsBlade &\n  DataAnalyticsAttribute): React.ReactElement => {\n  const { setSelectedValue, selectedValue, variant, isVertical } = useTabsContext();\n  const tabListContainerRef = React.useRef<HTMLDivElement>(null);\n  const isBordered = variant === 'bordered';\n  const isFilled = variant === 'filled';\n\n  // Set the first child as the selected value\n  useIsomorphicLayoutEffect(() => {\n    if (selectedValue) return;\n    const first = React.Children.toArray(children)[0];\n    if (React.isValidElement(first)) {\n      // We need to skip calling onChange on the first render when we set the initial value\n      setSelectedValue?.(() => first.props.value, true);\n    }\n  }, [children, selectedValue, setSelectedValue]);\n\n  return (\n    <Box\n      {...getStyledProps(rest)}\n      {...metaAttribute({ name: MetaConstants.TabList })}\n      {...makeAnalyticsAttribute(rest)}\n      display={isVertical ? 'flex' : 'block'}\n      flexShrink={0}\n      overflow=\"hidden\"\n    >\n      <ScrollableArea\n        position=\"relative\"\n        whiteSpace=\"nowrap\"\n        flex=\"1 1 auto\"\n        width=\"100%\"\n        overflow=\"auto hidden\"\n      >\n        <Composite\n          render={(htmlProps) => {\n            return (\n              <BaseBox flexDirection=\"row\" display=\"flex\">\n                {isVertical && isBordered ? (\n                  <BaseBox\n                    width=\"0px\"\n                    height=\"auto\"\n                    flexGrow={1}\n                    flexShrink={0}\n                    borderColor={trackColor}\n                    borderWidth=\"thin\"\n                    style={{ transform: 'translateX(1.5px)' }}\n                  />\n                ) : null}\n                {/* @ts-expect-error spreading composite props */}\n                <BaseBox\n                  {...htmlProps}\n                  flexGrow={1}\n                  ref={tabListContainerRef}\n                  role=\"tablist\"\n                  width=\"100%\"\n                  display=\"flex\"\n                  flexDirection={isVertical ? 'column' : 'row'}\n                  alignItems={isVertical ? 'start' : 'center'}\n                  overflow={isVertical ? 'hidden' : undefined}\n                  {...(isFilled\n                    ? {\n                        borderRadius: 'small',\n                        borderWidth: 'thin',\n                        borderColor: 'interactive.border.gray.faded',\n                        padding: 'spacing.2',\n                        gap: isVertical ? 'spacing.0' : 'spacing.1',\n                        backgroundColor: 'surface.background.gray.intense',\n                      }\n                    : {\n                        padding: 'spacing.0',\n                        gap: isVertical ? 'spacing.0' : { base: 'spacing.7', m: 'spacing.8' },\n                      })}\n                >\n                  {variant === 'filled' && !isVertical\n                    ? React.Children.map(children, (child, index) => {\n                        return (\n                          <>\n                            {index > 0 ? (\n                              <Divider\n                                margin=\"auto\"\n                                height=\"20px\"\n                                variant=\"subtle\"\n                                orientation=\"vertical\"\n                              />\n                            ) : null}\n                            {child}\n                          </>\n                        );\n                      })\n                    : children}\n                </BaseBox>\n              </BaseBox>\n            );\n          }}\n        />\n        {!isVertical ? <TabIndicator tabListContainerRef={tabListContainerRef} /> : null}\n      </ScrollableArea>\n      {/*\n        Adding border bottom with an div element, we can't put it on the outer Box of tablist because \n        it's not possible to offset or translate a border \n      */}\n      {!isVertical && isBordered ? (\n        <BaseBox\n          style={{ transform: 'translateY(-1px)' }}\n          borderBottomColor={trackColor}\n          borderBottomWidth=\"thin\"\n        />\n      ) : null}\n    </Box>\n  );\n};\n\nexport { TabList };\n"],"names":["ScrollableArea","styled","BaseBox","withConfig","displayName","componentId","display","TabList","_ref","children","rest","_objectWithoutProperties","_excluded","_useTabsContext","useTabsContext","setSelectedValue","selectedValue","variant","isVertical","tabListContainerRef","React","useRef","isBordered","isFilled","useIsomorphicLayoutEffect","first","Children","toArray","isValidElement","props","value","_jsxs","Box","_objectSpread","getStyledProps","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","flexShrink","overflow","position","whiteSpace","flex","width","_jsx","Composite","render","htmlProps","flexDirection","height","flexGrow","borderColor","trackColor","borderWidth","style","transform","ref","role","alignItems","undefined","borderRadius","padding","gap","backgroundColor","base","m","map","child","index","_Fragment","Divider","margin","orientation","TabIndicator","borderBottomColor","borderBottomWidth"],"mappings":"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"}

package/build/lib/web/production/components/Tabs/TabPanel.web.js

@@ -1,20 +1,25 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import 'react';
 import { useTabsContext } from './TabsContext.js';
 import '../../utils/makeAccessible/index.js';
 import '../Box/BaseBox/index.js';
 import '../../utils/metaAttribute/index.js';
+import '../../utils/makeAnalyticsAttribute/index.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
+import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 
+var _excluded = ["children", "value"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TabPanel = function TabPanel(_ref) {
   var children = _ref.children,
-    value = _ref.value;
+    value = _ref.value,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useTabsContext = useTabsContext(),
     selectedValue = _useTabsContext.selectedValue,
     baseId = _useTabsContext.baseId,
@@ -24,7 +29,7 @@ var TabPanel = function TabPanel(_ref) {
   var tabItemId = "".concat(baseId, "-").concat(value, "-tabitem");
   if (isLazy) {
     return /*#__PURE__*/jsx(Fragment, {
-      children: isSelected ? /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
+      children: isSelected ? /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
         id: panelId,
         tabIndex: 0
       }, metaAttribute({
@@ -32,12 +37,12 @@ var TabPanel = function TabPanel(_ref) {
       })), makeAccessible({
         role: 'tabpanel',
         labelledBy: tabItemId
-      })), {}, {
+      })), makeAnalyticsAttribute(rest)), {}, {
         children: children
       })) : null
     });
   }
-  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     id: panelId,
     tabIndex: 0,
     display: isSelected ? 'block' : 'none'
@@ -47,7 +52,7 @@ var TabPanel = function TabPanel(_ref) {
     role: 'tabpanel',
     labelledBy: tabItemId,
     hidden: !isSelected
-  })), {}, {
+  })), makeAnalyticsAttribute(rest)), {}, {
     children: children
   }));
 };

package/build/lib/web/production/components/Tabs/TabPanel.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.web.js","sources":["../../../../../../src/components/Tabs/TabPanel.web.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-useless-fragment */\nimport React from 'react';\nimport type { TabPanelProps } from './types';\nimport { useTabsContext } from './TabsContext';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst TabPanel = ({ children, value }: TabPanelProps): React.ReactElement => {\n  const { selectedValue, baseId, isLazy } = useTabsContext();\n  const isSelected = selectedValue === value;\n  const panelId = `${baseId}-${value}-tabpanel`;\n  const tabItemId = `${baseId}-${value}-tabitem`;\n\n  if (isLazy) {\n    return (\n      <>\n        {isSelected ? (\n          <BaseBox\n            id={panelId}\n            tabIndex={0}\n            {...metaAttribute({ name: MetaConstants.TabPanel })}\n            {...makeAccessible({ role: 'tabpanel', labelledBy: tabItemId })}\n          >\n            {children}\n          </BaseBox>\n        ) : null}\n      </>\n    );\n  }\n\n  return (\n    <BaseBox\n      id={panelId}\n      tabIndex={0}\n      display={isSelected ? 'block' : 'none'}\n      {...metaAttribute({ name: MetaConstants.TabPanel })}\n      {...makeAccessible({ role: 'tabpanel', labelledBy: tabItemId, hidden: !isSelected })}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nexport { TabPanel };\n"],"names":["TabPanel","_ref","children","value","_useTabsContext","useTabsContext","selectedValue","baseId","isLazy","isSelected","panelId","concat","tabItemId","_jsx","_Fragment","BaseBox","_objectSpread","id","tabIndex","metaAttribute","name","MetaConstants","makeAccessible","role","labelledBy","display","hidden"],"mappings":";;;;;;;;;;;;;;AAQA,IAAMA,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAA+D;AAAA,EAAA,IAAzDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK,CAAA;AACjC,EAAA,IAAAC,eAAA,GAA0CC,cAAc,EAAE;IAAlDC,aAAa,GAAAF,eAAA,CAAbE,aAAa;IAAEC,MAAM,GAAAH,eAAA,CAANG,MAAM;IAAEC,MAAM,GAAAJ,eAAA,CAANI,MAAM,CAAA;AACrC,EAAA,IAAMC,UAAU,GAAGH,aAAa,KAAKH,KAAK,CAAA;EAC1C,IAAMO,OAAO,MAAAC,MAAA,CAAMJ,MAAM,EAAAI,GAAAA,CAAAA,CAAAA,MAAA,CAAIR,KAAK,EAAW,WAAA,CAAA,CAAA;EAC7C,IAAMS,SAAS,MAAAD,MAAA,CAAMJ,MAAM,EAAAI,GAAAA,CAAAA,CAAAA,MAAA,CAAIR,KAAK,EAAU,UAAA,CAAA,CAAA;AAE9C,EAAA,IAAIK,MAAM,EAAE;IACV,oBACEK,GAAA,CAAAC,QAAA,EAAA;MAAAZ,QAAA,EACGO,UAAU,gBACTI,GAAA,CAACE,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACNC,QAAAA,EAAE,EAAEP,OAAQ;AACZQ,QAAAA,QAAQ,EAAE,CAAA;AAAE,OAAA,EACRC,aAAa,CAAC;QAAEC,IAAI,EAAEC,aAAa,CAACrB,QAAAA;OAAU,CAAC,CAC/CsB,EAAAA,cAAc,CAAC;AAAEC,QAAAA,IAAI,EAAE,UAAU;AAAEC,QAAAA,UAAU,EAAEZ,SAAAA;AAAU,OAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAV,QAAAA,QAAA,EAE9DA,QAAAA;AAAQ,OAAA,CACF,CAAC,GACR,IAAA;AAAI,KACR,CAAC,CAAA;AAEP,GAAA;EAEA,oBACEW,GAAA,CAACE,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACNC,IAAAA,EAAE,EAAEP,OAAQ;AACZQ,IAAAA,QAAQ,EAAE,CAAE;AACZO,IAAAA,OAAO,EAAEhB,UAAU,GAAG,OAAO,GAAG,MAAA;AAAO,GAAA,EACnCU,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACrB,QAAAA;GAAU,CAAC,CAC/CsB,EAAAA,cAAc,CAAC;AAAEC,IAAAA,IAAI,EAAE,UAAU;AAAEC,IAAAA,UAAU,EAAEZ,SAAS;AAAEc,IAAAA,MAAM,EAAE,CAACjB,UAAAA;AAAW,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAP,IAAAA,QAAA,EAEnFA,QAAAA;AAAQ,GAAA,CACF,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"TabPanel.web.js","sources":["../../../../../../src/components/Tabs/TabPanel.web.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-useless-fragment */\nimport React from 'react';\nimport type { TabPanelProps } from './types';\nimport { useTabsContext } from './TabsContext';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst TabPanel = ({ children, value, ...rest }: TabPanelProps): React.ReactElement => {\n  const { selectedValue, baseId, isLazy } = useTabsContext();\n  const isSelected = selectedValue === value;\n  const panelId = `${baseId}-${value}-tabpanel`;\n  const tabItemId = `${baseId}-${value}-tabitem`;\n\n  if (isLazy) {\n    return (\n      <>\n        {isSelected ? (\n          <BaseBox\n            id={panelId}\n            tabIndex={0}\n            {...metaAttribute({ name: MetaConstants.TabPanel })}\n            {...makeAccessible({ role: 'tabpanel', labelledBy: tabItemId })}\n            {...makeAnalyticsAttribute(rest)}\n          >\n            {children}\n          </BaseBox>\n        ) : null}\n      </>\n    );\n  }\n\n  return (\n    <BaseBox\n      id={panelId}\n      tabIndex={0}\n      display={isSelected ? 'block' : 'none'}\n      {...metaAttribute({ name: MetaConstants.TabPanel })}\n      {...makeAccessible({ role: 'tabpanel', labelledBy: tabItemId, hidden: !isSelected })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nexport { TabPanel };\n"],"names":["TabPanel","_ref","children","value","rest","_objectWithoutProperties","_excluded","_useTabsContext","useTabsContext","selectedValue","baseId","isLazy","isSelected","panelId","concat","tabItemId","_jsx","_Fragment","BaseBox","_objectSpread","id","tabIndex","metaAttribute","name","MetaConstants","makeAccessible","role","labelledBy","makeAnalyticsAttribute","display","hidden"],"mappings":";;;;;;;;;;;;;;;;;;AASA,IAAMA,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAAwE;AAAA,EAAA,IAAlEC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA,CAAA;AAC1C,EAAA,IAAAC,eAAA,GAA0CC,cAAc,EAAE;IAAlDC,aAAa,GAAAF,eAAA,CAAbE,aAAa;IAAEC,MAAM,GAAAH,eAAA,CAANG,MAAM;IAAEC,MAAM,GAAAJ,eAAA,CAANI,MAAM,CAAA;AACrC,EAAA,IAAMC,UAAU,GAAGH,aAAa,KAAKN,KAAK,CAAA;EAC1C,IAAMU,OAAO,MAAAC,MAAA,CAAMJ,MAAM,EAAAI,GAAAA,CAAAA,CAAAA,MAAA,CAAIX,KAAK,EAAW,WAAA,CAAA,CAAA;EAC7C,IAAMY,SAAS,MAAAD,MAAA,CAAMJ,MAAM,EAAAI,GAAAA,CAAAA,CAAAA,MAAA,CAAIX,KAAK,EAAU,UAAA,CAAA,CAAA;AAE9C,EAAA,IAAIQ,MAAM,EAAE;IACV,oBACEK,GAAA,CAAAC,QAAA,EAAA;AAAAf,MAAAA,QAAA,EACGU,UAAU,gBACTI,GAAA,CAACE,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACNC,QAAAA,EAAE,EAAEP,OAAQ;AACZQ,QAAAA,QAAQ,EAAE,CAAA;AAAE,OAAA,EACRC,aAAa,CAAC;QAAEC,IAAI,EAAEC,aAAa,CAACxB,QAAAA;OAAU,CAAC,CAC/CyB,EAAAA,cAAc,CAAC;AAAEC,QAAAA,IAAI,EAAE,UAAU;AAAEC,QAAAA,UAAU,EAAEZ,SAAAA;AAAU,OAAC,CAAC,CAAA,EAC3Da,sBAAsB,CAACxB,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAF,QAAAA,QAAA,EAE/BA,QAAAA;AAAQ,OAAA,CACF,CAAC,GACR,IAAA;AAAI,KACR,CAAC,CAAA;AAEP,GAAA;EAEA,oBACEc,GAAA,CAACE,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACNC,IAAAA,EAAE,EAAEP,OAAQ;AACZQ,IAAAA,QAAQ,EAAE,CAAE;AACZQ,IAAAA,OAAO,EAAEjB,UAAU,GAAG,OAAO,GAAG,MAAA;AAAO,GAAA,EACnCU,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACxB,QAAAA;GAAU,CAAC,CAC/CyB,EAAAA,cAAc,CAAC;AAAEC,IAAAA,IAAI,EAAE,UAAU;AAAEC,IAAAA,UAAU,EAAEZ,SAAS;AAAEe,IAAAA,MAAM,EAAE,CAAClB,UAAAA;AAAW,GAAC,CAAC,CAAA,EAChFgB,sBAAsB,CAACxB,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAF,IAAAA,QAAA,EAE/BA,QAAAA;AAAQ,GAAA,CACF,CAAC,CAAA;AAEd;;;;"}

package/build/lib/web/production/components/Tabs/Tabs.web.js

@@ -1,16 +1,20 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default from 'react';
 import { TabsContext } from './TabsContext.js';
 import { useControllableState } from '../../utils/useControllable.js';
 import { useId } from '../../utils/useId.js';
 import '../Box/BaseBox/index.js';
 import '../../utils/metaAttribute/index.js';
+import '../../utils/makeAnalyticsAttribute/index.js';
 import { jsx } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 
+var _excluded = ["children", "defaultValue", "value", "onChange", "orientation", "size", "variant", "isFullWidthTabItem", "isLazy"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Tabs = function Tabs(_ref) {
@@ -27,7 +31,8 @@ var Tabs = function Tabs(_ref) {
     _ref$isFullWidthTabIt = _ref.isFullWidthTabItem,
     isFullWidthTabItem = _ref$isFullWidthTabIt === void 0 ? false : _ref$isFullWidthTabIt,
     _ref$isLazy = _ref.isLazy,
-    isLazy = _ref$isLazy === void 0 ? false : _ref$isLazy;
+    isLazy = _ref$isLazy === void 0 ? false : _ref$isLazy,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var baseId = useId('tabs');
   var _useControllableState = useControllableState({
       defaultValue: defaultValue,
@@ -54,12 +59,12 @@ var Tabs = function Tabs(_ref) {
   }, [isFullWidthTabItem, baseId, isVertical, selectedValue, setSelectedValue, size, variant, isLazy]);
   return /*#__PURE__*/jsx(TabsContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
+    children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
       display: "flex",
       flexDirection: isVertical ? 'row' : 'column'
     }, metaAttribute({
       name: MetaConstants.Tabs
-    })), {}, {
+    })), makeAnalyticsAttribute(rest)), {}, {
       children: children
     }))
   });

package/build/lib/web/production/components/Tabs/Tabs.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.web.js","sources":["../../../../../../src/components/Tabs/Tabs.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { TabsProps } from './types';\nimport { TabsContext } from './TabsContext';\nimport { useControllableState } from '~utils/useControllable';\nimport { useId } from '~utils/useId';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\n/**\n * ### Tabs\n *\n * Check out the [Tab Stories & Examples](https://blade.razorpay.com/?path=/docs/components-tabs--default)\n *\n * ----\n * ### Basic Usage\n *\n * ```jsx\n * import { Tabs, TabList, TabItem, TabPanel } from '@razorpay/blade/components';\n *\n * <Tabs variant=\"bordered\" orientation=\"horizontal\">\n *   <TabList>\n *     <TabItem value=\"subscriptions\">Subscription</TabItem>\n *     <TabItem value=\"plans\">Plans</TabItem>\n *     <TabItem value=\"settings\">Settings</TabItem>\n *   </TabList>\n *\n *   <TabPanel value=\"subscriptions\">\n *     <Text>Subscriptions Panel</Text>\n *   </TabPanel>\n *   <TabPanel value=\"plans\">\n *     <Text>Plans Panel</Text>\n *   </TabPanel>\n *   <TabPanel value=\"settings\">\n *     <Text>Settings Panel</Text>\n *   </TabPanel>\n * </Tabs>\n * ```\n */\nconst Tabs = ({\n  children,\n  defaultValue,\n  value,\n  onChange,\n  orientation = 'horizontal',\n  size = 'medium',\n  variant = 'bordered',\n  isFullWidthTabItem = false,\n  isLazy = false,\n}: TabsProps): React.ReactElement => {\n  const baseId = useId('tabs');\n  const [selectedValue, setSelectedValue] = useControllableState({\n    defaultValue,\n    value,\n    onChange: (value) => {\n      onChange?.(value);\n    },\n  });\n\n  const isVertical = orientation === 'vertical';\n  const contextValue = React.useMemo(\n    () => ({\n      baseId,\n      selectedValue,\n      isVertical,\n      size,\n      variant,\n      isFullWidthTabItem,\n      setSelectedValue,\n      isLazy,\n    }),\n    [\n      isFullWidthTabItem,\n      baseId,\n      isVertical,\n      selectedValue,\n      setSelectedValue,\n      size,\n      variant,\n      isLazy,\n    ],\n  );\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <BaseBox\n        display=\"flex\"\n        flexDirection={isVertical ? 'row' : 'column'}\n        {...metaAttribute({ name: MetaConstants.Tabs })}\n      >\n        {children}\n      </BaseBox>\n    </TabsContext.Provider>\n  );\n};\n\nexport { Tabs };\n"],"names":["Tabs","_ref","children","defaultValue","value","onChange","_ref$orientation","orientation","_ref$size","size","_ref$variant","variant","_ref$isFullWidthTabIt","isFullWidthTabItem","_ref$isLazy","isLazy","baseId","useId","_useControllableState","useControllableState","_useControllableState2","_slicedToArray","selectedValue","setSelectedValue","isVertical","contextValue","React","useMemo","_jsx","TabsContext","Provider","BaseBox","_objectSpread","display","flexDirection","metaAttribute","name","MetaConstants"],"mappings":";;;;;;;;;;;;;;;AAsCA,IAAMA,IAAI,GAAG,SAAPA,IAAIA,CAAAC,IAAA,EAU2B;AAAA,EAAA,IATnCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,YAAY,GAAAF,IAAA,CAAZE,YAAY;IACZC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,SAAQ,GAAAJ,IAAA,CAARI,QAAQ;IAAAC,gBAAA,GAAAL,IAAA,CACRM,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAG,KAAA,CAAA,GAAA,YAAY,GAAAA,gBAAA;IAAAE,SAAA,GAAAP,IAAA,CAC1BQ,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IAAAE,YAAA,GAAAT,IAAA,CACfU,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,UAAU,GAAAA,YAAA;IAAAE,qBAAA,GAAAX,IAAA,CACpBY,kBAAkB;AAAlBA,IAAAA,kBAAkB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,qBAAA;IAAAE,WAAA,GAAAb,IAAA,CAC1Bc,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,WAAA,CAAA;AAEd,EAAA,IAAME,MAAM,GAAGC,KAAK,CAAC,MAAM,CAAC,CAAA;EAC5B,IAAAC,qBAAA,GAA0CC,oBAAoB,CAAC;AAC7DhB,MAAAA,YAAY,EAAZA,YAAY;AACZC,MAAAA,KAAK,EAALA,KAAK;AACLC,MAAAA,QAAQ,EAAE,SAAAA,QAACD,CAAAA,KAAK,EAAK;AACnBC,QAAAA,SAAQ,aAARA,SAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAARA,SAAQ,CAAGD,KAAK,CAAC,CAAA;AACnB,OAAA;AACF,KAAC,CAAC;IAAAgB,sBAAA,GAAAC,cAAA,CAAAH,qBAAA,EAAA,CAAA,CAAA;AANKI,IAAAA,aAAa,GAAAF,sBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,gBAAgB,GAAAH,sBAAA,CAAA,CAAA,CAAA,CAAA;AAQtC,EAAA,IAAMI,UAAU,GAAGjB,WAAW,KAAK,UAAU,CAAA;AAC7C,EAAA,IAAMkB,YAAY,GAAGC,cAAK,CAACC,OAAO,CAChC,YAAA;IAAA,OAAO;AACLX,MAAAA,MAAM,EAANA,MAAM;AACNM,MAAAA,aAAa,EAAbA,aAAa;AACbE,MAAAA,UAAU,EAAVA,UAAU;AACVf,MAAAA,IAAI,EAAJA,IAAI;AACJE,MAAAA,OAAO,EAAPA,OAAO;AACPE,MAAAA,kBAAkB,EAAlBA,kBAAkB;AAClBU,MAAAA,gBAAgB,EAAhBA,gBAAgB;AAChBR,MAAAA,MAAM,EAANA,MAAAA;KACD,CAAA;AAAA,GAAC,EACF,CACEF,kBAAkB,EAClBG,MAAM,EACNQ,UAAU,EACVF,aAAa,EACbC,gBAAgB,EAChBd,IAAI,EACJE,OAAO,EACPI,MAAM,CAEV,CAAC,CAAA;AAED,EAAA,oBACEa,GAAA,CAACC,WAAW,CAACC,QAAQ,EAAA;AAAC1B,IAAAA,KAAK,EAAEqB,YAAa;AAAAvB,IAAAA,QAAA,eACxC0B,GAAA,CAACG,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACNC,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,aAAa,EAAEV,UAAU,GAAG,KAAK,GAAG,QAAA;AAAS,KAAA,EACzCW,aAAa,CAAC;MAAEC,IAAI,EAAEC,aAAa,CAACrC,IAAAA;AAAK,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAE,MAAAA,QAAA,EAE9CA,QAAAA;KACM,CAAA,CAAA;AAAC,GACU,CAAC,CAAA;AAE3B;;;;"}
+{"version":3,"file":"Tabs.web.js","sources":["../../../../../../src/components/Tabs/Tabs.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { TabsProps } from './types';\nimport { TabsContext } from './TabsContext';\nimport { useControllableState } from '~utils/useControllable';\nimport { useId } from '~utils/useId';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\n/**\n * ### Tabs\n *\n * Check out the [Tab Stories & Examples](https://blade.razorpay.com/?path=/docs/components-tabs--default)\n *\n * ----\n * ### Basic Usage\n *\n * ```jsx\n * import { Tabs, TabList, TabItem, TabPanel } from '@razorpay/blade/components';\n *\n * <Tabs variant=\"bordered\" orientation=\"horizontal\">\n *   <TabList>\n *     <TabItem value=\"subscriptions\">Subscription</TabItem>\n *     <TabItem value=\"plans\">Plans</TabItem>\n *     <TabItem value=\"settings\">Settings</TabItem>\n *   </TabList>\n *\n *   <TabPanel value=\"subscriptions\">\n *     <Text>Subscriptions Panel</Text>\n *   </TabPanel>\n *   <TabPanel value=\"plans\">\n *     <Text>Plans Panel</Text>\n *   </TabPanel>\n *   <TabPanel value=\"settings\">\n *     <Text>Settings Panel</Text>\n *   </TabPanel>\n * </Tabs>\n * ```\n */\nconst Tabs = ({\n  children,\n  defaultValue,\n  value,\n  onChange,\n  orientation = 'horizontal',\n  size = 'medium',\n  variant = 'bordered',\n  isFullWidthTabItem = false,\n  isLazy = false,\n  ...rest\n}: TabsProps): React.ReactElement => {\n  const baseId = useId('tabs');\n  const [selectedValue, setSelectedValue] = useControllableState({\n    defaultValue,\n    value,\n    onChange: (value) => {\n      onChange?.(value);\n    },\n  });\n\n  const isVertical = orientation === 'vertical';\n  const contextValue = React.useMemo(\n    () => ({\n      baseId,\n      selectedValue,\n      isVertical,\n      size,\n      variant,\n      isFullWidthTabItem,\n      setSelectedValue,\n      isLazy,\n    }),\n    [\n      isFullWidthTabItem,\n      baseId,\n      isVertical,\n      selectedValue,\n      setSelectedValue,\n      size,\n      variant,\n      isLazy,\n    ],\n  );\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <BaseBox\n        display=\"flex\"\n        flexDirection={isVertical ? 'row' : 'column'}\n        {...metaAttribute({ name: MetaConstants.Tabs })}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        {children}\n      </BaseBox>\n    </TabsContext.Provider>\n  );\n};\n\nexport { Tabs };\n"],"names":["Tabs","_ref","children","defaultValue","value","onChange","_ref$orientation","orientation","_ref$size","size","_ref$variant","variant","_ref$isFullWidthTabIt","isFullWidthTabItem","_ref$isLazy","isLazy","rest","_objectWithoutProperties","_excluded","baseId","useId","_useControllableState","useControllableState","_useControllableState2","_slicedToArray","selectedValue","setSelectedValue","isVertical","contextValue","React","useMemo","_jsx","TabsContext","Provider","BaseBox","_objectSpread","display","flexDirection","metaAttribute","name","MetaConstants","makeAnalyticsAttribute"],"mappings":"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"}

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

@@ -12,6 +12,7 @@ import '../../utils/index.js';
 import '../../tokens/global/index.js';
 import '../Box/BaseBox/index.js';
 import { useIsMobile } from '../../utils/useIsMobile.js';
+import '../../utils/makeAnalyticsAttribute/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { isReactNative } from '../../utils/platform/isReactNative.js';
@@ -20,6 +21,7 @@ import { size } from '../../tokens/global/size.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { Box } from '../Box/Box.js';
 import { Text } from '../Typography/Text/Text.js';
 import { IconButton } from '../Button/IconButton/IconButton.js';
@@ -78,7 +80,7 @@ var Tag = function Tag(_ref) {
     testID = _ref.testID,
     _isVirtuallyFocused = _ref._isVirtuallyFocused,
     _isTagInsideInput = _ref._isTagInsideInput,
-    styledProps = _objectWithoutProperties(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded);
   var isMobile = useIsMobile();
   var textColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.subtle';
   var iconColor = isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted';
@@ -97,12 +99,12 @@ var Tag = function Tag(_ref) {
     }
     return 'small';
   }, [isMobile, size]);
-  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     display: isReactNative() ? 'flex' : 'inline-flex'
-  }, getStyledProps(styledProps)), metaAttribute({
+  }, getStyledProps(rest)), metaAttribute({
     name: MetaConstants.Tag,
     testID: testID
-  })), {}, {
+  })), makeAnalyticsAttribute(rest)), {}, {
     children: /*#__PURE__*/jsxs(FocussableTag, {
       display: isReactNative() ? 'flex' : 'inline-flex',
       alignSelf: isReactNative() ? 'center' : undefined,

package/build/lib/web/production/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';\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\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 = ({\n  size = 'medium',\n  icon: Icon,\n  onDismiss,\n  children,\n  isDisabled,\n  testID,\n  _isVirtuallyFocused,\n  _isTagInsideInput,\n  ...styledProps\n}: TagProps): 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      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...getStyledProps(styledProps)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\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\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$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","styledProps","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","_objectSpread","display","getStyledProps","metaAttribute","name","MetaConstants","_jsxs","alignSelf","undefined","flexDirection","flexWrap","flexShrink","borderRadius","padding","Box","alignItems","color","marginRight","Text","textAlign","truncateAfterLines","justifyContent","IconButton","CloseIcon","accessibilityLabel","_tabIndex","onClick","e","stopPropagation"],"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 { 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\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 = ({\n  size = 'medium',\n  icon: Icon,\n  onDismiss,\n  children,\n  isDisabled,\n  testID,\n  _isVirtuallyFocused,\n  _isTagInsideInput,\n  ...rest\n}: TagProps): 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      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\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$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","makeAnalyticsAttribute","_jsxs","alignSelf","undefined","flexDirection","flexWrap","flexShrink","borderRadius","padding","Box","alignItems","color","marginRight","Text","textAlign","truncateAfterLines","justifyContent","IconButton","CloseIcon","accessibilityLabel","_tabIndex","onClick","e","stopPropagation"],"mappings":"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"}