npm - @razorpay/blade - Versions diffs - 12.20.1 → 12.21.1 - Mend

@razorpay/blade 12.20.1 → 12.21.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (134) hide show

package/build/lib/web/production/components/ListView/ListViewFilters.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListViewFilters.web.js","sources":["../../../../../../src/components/ListView/ListViewFilters.web.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { AnimatePresence, m } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { ListViewFilterProps, ListViewSelectedFiltersType } from './types';\nimport { ListViewFiltersProvider } from './ListViewFiltersContext.web';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { FilterIcon } from '~components/Icons';\nimport { Button } from '~components/Button';\nimport { Counter } from '~components/Counter';\nimport { Box } from '~components/Box';\nimport { SearchInput } from '~components/Input/SearchInput';\nimport { useId } from '~utils/useId';\nimport { useControllableState } from '~utils/useControllable';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { msToSeconds } from '~utils/msToSeconds';\nimport { useTheme } from '~components/BladeProvider';\nimport { cssBezierToArray } from '~utils/cssBezierToArray';\nimport { castWebType } from '~utils';\nimport { Divider } from '~components/Divider';\n\nconst gradientOverlyContainerWidth = '21px'; // 20px + 1px divider width\nconst gradientOverlyContainerHeight = '38px';\n\nconst StyledQuickFilterContainer = styled(BaseBox)({\n /* For Webkit (Chrome, Safari) /\n '::-webkit-scrollbar': {\n display: 'none',\n },\n / For Firefox /\n scrollbarWidth: 'none',\n / For Edge */\n msOverflowStyle: 'none',\n});\n\nconst GradientOverlay = styled.div<{\n gradientColorLeft: string;\n dividerColor: string;\n gradientColorRight: string;\n}>`\n height: 100%;\n width: 20px;\n background: linear-gradient(\n 270deg,\n ${({ gradientColorRight }) => gradientColorRight} 0%,\n ${({ gradientColorLeft }) => gradientColorLeft} 100%\n );\n pointer-events: none;\n &::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: 1px;\n background-color: ${({ dividerColor }) => dividerColor};\n }\n`;\n\nconst ListViewFilters = ({\n testID,\n children,\n quickFilters,\n onSearchChange,\n searchValue,\n searchValuePlaceholder,\n searchName,\n showQuickFilters,\n onShowQuickFiltersChange,\n onSearchClear,\n selectedFiltersCount = 0,\n ...rest\n}: ListViewFilterProps): React.ReactElement => {\n const [shouldShowDecorationInQuickFilters, setShouldShowDecorationInQuickFilters] = useState(\n false,\n );\n const [showFilters, setShowFilters] = useControllableState({\n defaultValue: showQuickFilters,\n value: showQuickFilters,\n onChange: onShowQuickFiltersChange,\n });\n const [\n listViewSelectedFilters,\n setListViewSelectedFilters,\n ] = useState<ListViewSelectedFiltersType>({});\n const searchId = useId('search-input');\n const searchNameValue = searchName \|\| searchId;\n const isMobile = useIsMobile();\n const { theme } = useTheme();\n\n return (\n <ListViewFiltersProvider\n value={{\n listViewSelectedFilters,\n setListViewSelectedFilters,\n selectedFiltersCount,\n }}\n >\n {isMobile && (\n <SearchInput\n label=\"\"\n value={searchValue}\n placeholder={searchValuePlaceholder}\n name={searchNameValue \|\| searchId}\n onChange={({ name, value }) => onSearchChange?.({ name, value })}\n onClearButtonClick={onSearchClear}\n />\n )}\n <BaseBox>\n <BaseBox\n {...metaAttribute({ name: MetaConstants.ListViewFilter, testID })}\n {...makeAnalyticsAttribute(rest)}\n display=\"flex\"\n justifyContent=\"space-between\"\n >\n <Box\n position=\"relative\"\n display=\"flex\"\n flexDirection=\"column\"\n width={isMobile ? '88%' : 'auto'}\n marginRight={isMobile ? 'spacing.2' : 'spacing.0'}\n >\n <StyledQuickFilterContainer\n overflow={isMobile ? 'scroll' : 'visible'}\n width={isMobile ? '100%' : 'auto'}\n ref={(node) => {\n if (node instanceof HTMLElement && quickFilters) {\n setShouldShowDecorationInQuickFilters(node.scrollWidth > node.offsetWidth);\n }\n }}\n paddingY=\"spacing.4\"\n paddingLeft={isMobile ? 'spacing.2' : 'spacing.0'}\n >\n {quickFilters}\n </StyledQuickFilterContainer>\n {isMobile && shouldShowDecorationInQuickFilters ? (\n <Box\n position=\"absolute\"\n right=\"-1px\"\n top=\"spacing.4\"\n width={gradientOverlyContainerWidth}\n height={gradientOverlyContainerHeight}\n >\n <GradientOverlay\n gradientColorLeft={theme.colors.transparent}\n gradientColorRight={theme.colors.surface.background.gray.intense}\n dividerColor={theme.colors.surface.border.gray.normal}\n />\n <Divider orientation=\"vertical\" />\n </Box>\n ) : null}\n </Box>\n\n <BaseBox display=\"flex\" gap=\"spacing.4\" alignItems=\"center\">\n <Box position=\"relative\" display=\"inline-block\">\n <Button\n variant=\"tertiary\"\n size=\"medium\"\n color=\"primary\"\n onClick={() => {\n setShowFilters((prev) => !prev);\n }}\n icon={FilterIcon}\n />\n <Box\n position=\"absolute\"\n right=\"spacing.0\"\n top=\"spacing.0\"\n transform=\"translate(50%, -50%)\"\n >\n <Counter\n value={selectedFiltersCount \|\| Object.keys(listViewSelectedFilters).length}\n color=\"primary\"\n emphasis=\"intense\"\n size=\"small\"\n />\n </Box>\n </Box>\n {!isMobile && (\n <Box width=\"256px\">\n <SearchInput\n label=\"\"\n value={searchValue}\n placeholder={searchValuePlaceholder}\n name={searchNameValue \|\| searchId}\n onChange={({ name, value }) => onSearchChange?.({ name, value })}\n onClearButtonClick={onSearchClear}\n size=\"medium\"\n />\n </Box>\n )}\n </BaseBox>\n </BaseBox>\n <AnimatePresence>\n {showFilters && (\n <m.div\n initial={{ height: 0 }}\n animate={{ height: showFilters ? 'auto' : 0 }}\n transition={{\n duration: msToSeconds(theme.motion.duration.moderate),\n ease: cssBezierToArray(castWebType(theme.motion.easing.standard)),\n }}\n exit={{ height: 0 }}\n >\n <BaseBox\n display=\"flex\"\n backgroundColor={\n isMobile ? 'surface.background.white' : 'surface.background.gray.moderate'\n }\n borderTop={!isMobile ? '1ps solid' : undefined}\n borderTopColor={!isMobile ? 'surface.border.gray.muted' : undefined}\n >\n {children}\n </BaseBox>\n </m.div>\n )}\n </AnimatePresence>\n </BaseBox>\n </ListViewFiltersProvider>\n );\n};\n\nexport { ListViewFilters };\n"],"names":["gradientOverlyContainerWidth","gradientOverlyContainerHeight","StyledQuickFilterContainer","styled","BaseBox","withConfig","displayName","componentId","display","scrollbarWidth","msOverflowStyle","GradientOverlay","div","_ref","gradientColorRight","_ref2","gradientColorLeft","_ref3","dividerColor","ListViewFilters","_ref4","testID","children","quickFilters","onSearchChange","searchValue","searchValuePlaceholder","searchName","showQuickFilters","onShowQuickFiltersChange","onSearchClear","_ref4$selectedFilters","selectedFiltersCount","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","shouldShowDecorationInQuickFilters","setShouldShowDecorationInQuickFilters","_useControllableState","useControllableState","defaultValue","value","onChange","_useControllableState2","showFilters","setShowFilters","_useState3","_useState4","listViewSelectedFilters","setListViewSelectedFilters","searchId","useId","searchNameValue","isMobile","useIsMobile","_useTheme","useTheme","theme","_jsxs","ListViewFiltersProvider","_jsx","SearchInput","label","placeholder","name","_ref5","onClearButtonClick","_objectSpread","metaAttribute","MetaConstants","ListViewFilter","makeAnalyticsAttribute","justifyContent","Box","position","flexDirection","width","marginRight","overflow","ref","node","HTMLElement","scrollWidth","offsetWidth","paddingY","paddingLeft","right","top","height","colors","transparent","surface","background","gray","intense","border","normal","Divider","orientation","gap","alignItems","Button","variant","size","color","onClick","prev","icon","FilterIcon","transform","Counter","Object","keys","length","emphasis","_ref6","AnimatePresence","m","initial","animate","transition","duration","msToSeconds","motion","moderate","ease","cssBezierToArray","castWebType","easing","standard","exit","backgroundColor","borderTop","undefined","borderTopColor"],"mappings":"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"}
1	+ {"version":3,"file":"ListViewFilters.web.js","sources":["../../../../../../src/components/ListView/ListViewFilters.web.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { AnimatePresence, m } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { ListViewFilterProps, ListViewSelectedFiltersType } from './types';\nimport { ListViewFiltersProvider } from './ListViewFiltersContext.web';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { FilterIcon } from '~components/Icons';\nimport { Button } from '~components/Button';\nimport { Counter } from '~components/Counter';\nimport { Box } from '~components/Box';\nimport { SearchInput } from '~components/Input/SearchInput';\nimport { useId } from '~utils/useId';\nimport { useControllableState } from '~utils/useControllable';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { msToSeconds } from '~utils/msToSeconds';\nimport { useTheme } from '~components/BladeProvider';\nimport { cssBezierToArray } from '~utils/cssBezierToArray';\nimport { castWebType } from '~utils';\nimport { Divider } from '~components/Divider';\n\nconst gradientOverlyContainerWidth = '21px'; // 20px + 1px divider width\nconst gradientOverlyContainerHeight = '38px';\n\nconst StyledQuickFilterContainer = styled(BaseBox)({\n /* For Webkit (Chrome, Safari) /\n '::-webkit-scrollbar': {\n display: 'none',\n },\n / For Firefox /\n scrollbarWidth: 'none',\n / For Edge */\n msOverflowStyle: 'none',\n});\n\nconst GradientOverlay = styled.div<{\n gradientColorLeft: string;\n dividerColor: string;\n gradientColorRight: string;\n}>`\n height: 100%;\n width: 20px;\n background: linear-gradient(\n 270deg,\n ${({ gradientColorRight }) => gradientColorRight} 0%,\n ${({ gradientColorLeft }) => gradientColorLeft} 100%\n );\n pointer-events: none;\n &::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: 1px;\n background-color: ${({ dividerColor }) => dividerColor};\n }\n`;\n\nconst ListViewFilters = ({\n testID,\n children,\n quickFilters,\n onSearchChange,\n searchValue,\n searchValuePlaceholder,\n searchName,\n showQuickFilters,\n onShowQuickFiltersChange,\n onSearchClear,\n selectedFiltersCount = 0,\n ...rest\n}: ListViewFilterProps): React.ReactElement => {\n const [shouldShowDecorationInQuickFilters, setShouldShowDecorationInQuickFilters] = useState(\n false,\n );\n const [showFilters, setShowFilters] = useControllableState({\n defaultValue: showQuickFilters,\n value: showQuickFilters,\n onChange: onShowQuickFiltersChange,\n });\n const [\n listViewSelectedFilters,\n setListViewSelectedFilters,\n ] = useState<ListViewSelectedFiltersType>({});\n const searchId = useId('search-input');\n const searchNameValue = searchName \|\| searchId;\n const isMobile = useIsMobile();\n const { theme } = useTheme();\n const showSearchInput = onSearchChange \|\| onSearchClear \|\| searchValuePlaceholder \|\| searchName;\n\n return (\n <ListViewFiltersProvider\n value={{\n listViewSelectedFilters,\n setListViewSelectedFilters,\n selectedFiltersCount,\n }}\n >\n {isMobile && showSearchInput && (\n <SearchInput\n label=\"\"\n value={searchValue}\n placeholder={searchValuePlaceholder}\n name={searchNameValue \|\| searchId}\n onChange={({ name, value }) => onSearchChange?.({ name, value })}\n onClearButtonClick={onSearchClear}\n />\n )}\n <BaseBox>\n <BaseBox\n {...metaAttribute({ name: MetaConstants.ListViewFilter, testID })}\n {...makeAnalyticsAttribute(rest)}\n display=\"flex\"\n justifyContent=\"space-between\"\n >\n <Box\n position=\"relative\"\n display=\"flex\"\n flexDirection=\"column\"\n width={isMobile ? '88%' : 'auto'}\n marginRight={isMobile ? 'spacing.2' : 'spacing.0'}\n >\n <StyledQuickFilterContainer\n overflow={isMobile ? 'scroll' : 'visible'}\n width={isMobile ? '100%' : 'auto'}\n ref={(node) => {\n if (node instanceof HTMLElement && quickFilters) {\n setShouldShowDecorationInQuickFilters(node.scrollWidth > node.offsetWidth);\n }\n }}\n paddingY=\"spacing.4\"\n paddingLeft={isMobile ? 'spacing.2' : 'spacing.0'}\n >\n {quickFilters}\n </StyledQuickFilterContainer>\n {isMobile && shouldShowDecorationInQuickFilters ? (\n <Box\n position=\"absolute\"\n right=\"-1px\"\n top=\"spacing.4\"\n width={gradientOverlyContainerWidth}\n height={gradientOverlyContainerHeight}\n >\n <GradientOverlay\n gradientColorLeft={theme.colors.transparent}\n gradientColorRight={theme.colors.surface.background.gray.intense}\n dividerColor={theme.colors.surface.border.gray.normal}\n />\n <Divider orientation=\"vertical\" />\n </Box>\n ) : null}\n </Box>\n\n <BaseBox display=\"flex\" gap=\"spacing.4\" alignItems=\"center\">\n <Box position=\"relative\" display=\"inline-block\">\n <Button\n variant=\"tertiary\"\n size=\"medium\"\n color=\"primary\"\n onClick={() => {\n setShowFilters((prev) => !prev);\n }}\n icon={FilterIcon}\n />\n <Box\n position=\"absolute\"\n right=\"spacing.0\"\n top=\"spacing.0\"\n transform=\"translate(50%, -50%)\"\n >\n <Counter\n value={selectedFiltersCount \|\| Object.keys(listViewSelectedFilters).length}\n color=\"primary\"\n emphasis=\"intense\"\n size=\"small\"\n />\n </Box>\n </Box>\n {!isMobile && showSearchInput && (\n <Box width=\"256px\">\n <SearchInput\n label=\"\"\n value={searchValue}\n placeholder={searchValuePlaceholder}\n name={searchNameValue \|\| searchId}\n onChange={({ name, value }) => onSearchChange?.({ name, value })}\n onClearButtonClick={onSearchClear}\n size=\"medium\"\n />\n </Box>\n )}\n </BaseBox>\n </BaseBox>\n <AnimatePresence>\n {showFilters && (\n <m.div\n initial={{ height: 0 }}\n animate={{ height: showFilters ? 'auto' : 0 }}\n transition={{\n duration: msToSeconds(theme.motion.duration.moderate),\n ease: cssBezierToArray(castWebType(theme.motion.easing.standard)),\n }}\n exit={{ height: 0 }}\n >\n <BaseBox\n display=\"flex\"\n backgroundColor={\n isMobile ? 'surface.background.white' : 'surface.background.gray.moderate'\n }\n borderTop={!isMobile ? '1ps solid' : undefined}\n borderTopColor={!isMobile ? 'surface.border.gray.muted' : undefined}\n >\n {children}\n </BaseBox>\n </m.div>\n )}\n </AnimatePresence>\n </BaseBox>\n </ListViewFiltersProvider>\n );\n};\n\nexport { ListViewFilters };\n"],"names":["gradientOverlyContainerWidth","gradientOverlyContainerHeight","StyledQuickFilterContainer","styled","BaseBox","withConfig","displayName","componentId","display","scrollbarWidth","msOverflowStyle","GradientOverlay","div","_ref","gradientColorRight","_ref2","gradientColorLeft","_ref3","dividerColor","ListViewFilters","_ref4","testID","children","quickFilters","onSearchChange","searchValue","searchValuePlaceholder","searchName","showQuickFilters","onShowQuickFiltersChange","onSearchClear","_ref4$selectedFilters","selectedFiltersCount","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","shouldShowDecorationInQuickFilters","setShouldShowDecorationInQuickFilters","_useControllableState","useControllableState","defaultValue","value","onChange","_useControllableState2","showFilters","setShowFilters","_useState3","_useState4","listViewSelectedFilters","setListViewSelectedFilters","searchId","useId","searchNameValue","isMobile","useIsMobile","_useTheme","useTheme","theme","showSearchInput","_jsxs","ListViewFiltersProvider","_jsx","SearchInput","label","placeholder","name","_ref5","onClearButtonClick","_objectSpread","metaAttribute","MetaConstants","ListViewFilter","makeAnalyticsAttribute","justifyContent","Box","position","flexDirection","width","marginRight","overflow","ref","node","HTMLElement","scrollWidth","offsetWidth","paddingY","paddingLeft","right","top","height","colors","transparent","surface","background","gray","intense","border","normal","Divider","orientation","gap","alignItems","Button","variant","size","color","onClick","prev","icon","FilterIcon","transform","Counter","Object","keys","length","emphasis","_ref6","AnimatePresence","m","initial","animate","transition","duration","msToSeconds","motion","moderate","ease","cssBezierToArray","castWebType","easing","standard","exit","backgroundColor","borderTop","undefined","borderTopColor"],"mappings":"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"}

package/build/lib/web/production/components/StepGroup/StepGroup.web.js CHANGED Viewed

@@ -9,8 +9,11 @@ import '../../utils/isValidAllowedChildren/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
+import { componentIds as componentIds$1 } from '../Collapsible/componentIds.js';
+import '../../utils/logger/index.js';
 import { jsx } from 'react/jsx-runtime';
 import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
+import { throwBladeError } from '../../utils/logger/logger.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
@@ -31,7 +34,7 @@ var useChildrenWithIndexes = function useChildrenWithIndexes(_ref) {
   var totalIndex = 0;
   var traverseGroupAndAddIndex = function traverseGroupAndAddIndex(groupChildrenProp) {
     var nestingLevelOfGroup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    var stepItemIndex = 0;
+    var stepItemIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
     return React__default.Children.map(groupChildrenProp, function (child, index) {
       var componentId = getComponentId(child);
       if (componentId === componentIds.StepItem) {
@@ -42,6 +45,25 @@ var useChildrenWithIndexes = function useChildrenWithIndexes(_ref) {
           key: index
         });
       }
+      if (componentId === componentIds$1.Collapsible) {
+        if (parentStepGroupProps.orientation !== 'vertical' && false) {
+          throwBladeError({
+            message: 'Collapsible is not supported in horizontal orientation',
+            moduleName: 'StepGroup'
+          });
+        }
+        return /*#__PURE__*/React__default.cloneElement(child, {
+          children: React__default.Children.map(child.props.children, function (nestedChild) {
+            if ( /*#__PURE__*/React__default.isValidElement(nestedChild) && getComponentId(nestedChild) === componentIds$1.CollapsibleBody) {
+              return /*#__PURE__*/React__default.cloneElement(nestedChild, {
+                children: traverseGroupAndAddIndex(nestedChild.props.children, nestingLevelOfGroup, stepItemIndex),
+                key: totalIndex
+              });
+            }
+            return nestedChild;
+          })
+        });
+      }
       if (componentId === componentIds.StepGroup && nestingLevelOfGroup < 3) {
         return /*#__PURE__*/React__default.cloneElement(child, _objectSpread(_objectSpread({}, parentStepGroupProps), {}, {
           children: traverseGroupAndAddIndex(child.props.children, nestingLevelOfGroup + 1),
@@ -103,9 +125,9 @@ var _StepGroup = function _StepGroup(_ref2, ref) {
       maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : '100%',
       minWidth: minWidth,
       width: width !== null && width !== void 0 ? width : defaultWidth,
-      padding: _nestingLevel === 0 ? 'spacing.4' : undefined,
-      overflowX: orientation === 'horizontal' ? 'auto' : undefined,
-      flexDirection: orientation === 'vertical' ? 'column' : 'row'
+      paddingY: _nestingLevel === 0 ? 'spacing.4' : undefined,
+      overflowX: isHorizontal ? 'auto' : undefined,
+      flexDirection: isHorizontal ? 'row' : 'column'
     }, metaAttribute({
       name: MetaConstants.StepGroup,
       testID: testID

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StepGroup.web.js","sources":["../../../../../../src/components/StepGroup/StepGroup.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { StepGroupContextType, StepGroupProps } from './types';\nimport { StepGroupContext, useStepGroup } from './StepGroupContext';\nimport { componentIds } from './componentIds';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst useChildrenWithIndexes = ({\n _nestingLevel,\n children,\n ...parentStepGroupProps\n}: Pick<StepGroupProps, 'children' \| '_nestingLevel' \| 'size' \| 'orientation'>): {\n childrenWithIndex: React.ReactNode;\n totalItemsInParentGroupCount: number;\n} => {\n const { totalItemsInParentGroupCount: totalItemsFromPreviousParent } = useStepGroup();\n\n let totalIndex = 0;\n const traverseGroupAndAddIndex = (\n groupChildrenProp: StepGroupProps['children'],\n nestingLevelOfGroup = 0,\n ): React.ReactNode => {\n let stepItemIndex = 0;\n return React.Children.map(groupChildrenProp, (child, index) => {\n const componentId = getComponentId(child);\n if (componentId === componentIds.StepItem) {\n return React.cloneElement(child, {\n _index: stepItemIndex++,\n _totalIndex: totalIndex++,\n _nestingLevel: nestingLevelOfGroup,\n key: index,\n });\n }\n\n if (componentId === componentIds.StepGroup && nestingLevelOfGroup < 3) {\n return React.cloneElement(child, {\n ...parentStepGroupProps,\n children: traverseGroupAndAddIndex(child.props.children, nestingLevelOfGroup + 1),\n _nestingLevel: nestingLevelOfGroup + 1,\n });\n }\n\n return child;\n });\n };\n\n const childrenWithIndex: React.ReactNode = React.useMemo(\n () => (_nestingLevel === 0 ? traverseGroupAndAddIndex(children) : children),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [children, _nestingLevel],\n );\n\n const totalItemsInParentGroupCount =\n _nestingLevel === 0 ? totalIndex : totalItemsFromPreviousParent;\n\n return { childrenWithIndex, totalItemsInParentGroupCount };\n};\n\nconst _StepGroup = (\n {\n size = 'medium',\n orientation = 'vertical',\n children,\n testID,\n _nestingLevel = 0,\n width,\n minWidth,\n maxWidth,\n ...rest\n }: StepGroupProps,\n ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n const itemsInGroupCount = React.Children.count(children);\n const { childrenWithIndex, totalItemsInParentGroupCount } = useChildrenWithIndexes({\n children,\n size,\n orientation,\n _nestingLevel,\n });\n const contextValue = React.useMemo<StepGroupContextType>(\n () => ({\n size,\n orientation,\n itemsInGroupCount,\n totalItemsInParentGroupCount,\n }),\n [size, orientation, itemsInGroupCount, totalItemsInParentGroupCount],\n );\n\n const isHorizontal = orientation === 'horizontal';\n const defaultWidth = isHorizontal ? '100%' : undefined;\n\n return (\n <StepGroupContext.Provider value={contextValue}>\n <BaseBox\n ref={ref as never}\n {...getStyledProps(rest)}\n display=\"inline-flex\"\n maxWidth={maxWidth ?? '100%'}\n minWidth={minWidth}\n width={width ?? defaultWidth}\n padding={_nestingLevel === 0 ? 'spacing.4' : undefined}\n overflowX={orientation === 'horizontal' ? 'auto' : undefined}\n flexDirection={orientation === 'vertical' ? 'column' : 'row'}\n {...metaAttribute({ name: MetaConstants.StepGroup, testID })}\n {...makeAnalyticsAttribute(rest)}\n >\n {childrenWithIndex}\n </BaseBox>\n </StepGroupContext.Provider>\n );\n};\n\n/*\n ## StepGroup\n \n Step Group visualises sequential processes with a consistent structure. It can be interactive, guiding users through steps, or function as a timeline for reference.\n \n ### Usage\n \n ```jsx\n * <StepGroup orientation=\"vertical\" size=\"medium\">\n * <StepItem title=\"Personal Details\" />\n * <StepItem title=\"Business Details\" />\n * </StepGroup>\n * ```\n \n ---\n \n Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}\n */\nconst StepGroup = assignWithoutSideEffects(React.forwardRef(_StepGroup), {\n componentId: componentIds.StepGroup,\n displayName: componentIds.StepGroup,\n});\n\nexport { StepGroup };\n"],"names":["useChildrenWithIndexes","_ref","_nestingLevel","children","parentStepGroupProps","_objectWithoutProperties","_excluded","_useStepGroup","useStepGroup","totalItemsFromPreviousParent","totalItemsInParentGroupCount","totalIndex","traverseGroupAndAddIndex","groupChildrenProp","nestingLevelOfGroup","arguments","length","undefined","stepItemIndex","React","Children","map","child","index","componentId","getComponentId","componentIds","StepItem","cloneElement","_index","_totalIndex","key","StepGroup","_objectSpread","props","childrenWithIndex","useMemo","_StepGroup","_ref2","ref","_ref2$size","size","_ref2$orientation","orientation","testID","_ref2$_nestingLevel","width","minWidth","maxWidth","rest","_excluded2","itemsInGroupCount","count","_useChildrenWithIndex","contextValue","isHorizontal","defaultWidth","_jsx","StepGroupContext","Provider","value","BaseBox","getStyledProps","display","padding","overflowX","flexDirection","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"StepGroup.web.js","sources":["../../../../../../src/components/StepGroup/StepGroup.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { StepGroupContextType, StepGroupProps } from './types';\nimport { StepGroupContext, useStepGroup } from './StepGroupContext';\nimport { componentIds } from './componentIds';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { componentIds as collapsibleComponentIds } from '~components/Collapsible/componentIds';\nimport { throwBladeError } from '~utils/logger';\n\nconst useChildrenWithIndexes = ({\n _nestingLevel,\n children,\n ...parentStepGroupProps\n}: Pick<StepGroupProps, 'children' \| '_nestingLevel' \| 'size' \| 'orientation'>): {\n childrenWithIndex: React.ReactNode;\n totalItemsInParentGroupCount: number;\n} => {\n const { totalItemsInParentGroupCount: totalItemsFromPreviousParent } = useStepGroup();\n\n let totalIndex = 0;\n const traverseGroupAndAddIndex = (\n groupChildrenProp: StepGroupProps['children'],\n nestingLevelOfGroup = 0,\n stepItemIndex = 0,\n ): React.ReactNode => {\n return React.Children.map(groupChildrenProp, (child, index) => {\n const componentId = getComponentId(child);\n if (componentId === componentIds.StepItem) {\n return React.cloneElement(child, {\n _index: stepItemIndex++,\n _totalIndex: totalIndex++,\n _nestingLevel: nestingLevelOfGroup,\n key: index,\n });\n }\n\n if (componentId === collapsibleComponentIds.Collapsible) {\n if (parentStepGroupProps.orientation !== 'vertical' && __DEV__) {\n throwBladeError({\n message: 'Collapsible is not supported in horizontal orientation',\n moduleName: 'StepGroup',\n });\n }\n\n return React.cloneElement(child, {\n children: React.Children.map(child.props.children, (nestedChild) => {\n if (\n React.isValidElement(nestedChild) &&\n getComponentId(nestedChild) === collapsibleComponentIds.CollapsibleBody\n ) {\n return React.cloneElement(nestedChild as React.ReactElement, {\n children: traverseGroupAndAddIndex(\n (nestedChild.props as { children: React.ReactElement }).children,\n nestingLevelOfGroup,\n stepItemIndex,\n ),\n key: totalIndex,\n });\n }\n return nestedChild;\n }),\n });\n }\n\n if (componentId === componentIds.StepGroup && nestingLevelOfGroup < 3) {\n return React.cloneElement(child, {\n ...parentStepGroupProps,\n children: traverseGroupAndAddIndex(child.props.children, nestingLevelOfGroup + 1),\n _nestingLevel: nestingLevelOfGroup + 1,\n });\n }\n\n return child;\n });\n };\n\n const childrenWithIndex: React.ReactNode = React.useMemo(\n () => (_nestingLevel === 0 ? traverseGroupAndAddIndex(children) : children),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [children, _nestingLevel],\n );\n\n const totalItemsInParentGroupCount =\n _nestingLevel === 0 ? totalIndex : totalItemsFromPreviousParent;\n\n return { childrenWithIndex, totalItemsInParentGroupCount };\n};\n\nconst _StepGroup = (\n {\n size = 'medium',\n orientation = 'vertical',\n children,\n testID,\n _nestingLevel = 0,\n width,\n minWidth,\n maxWidth,\n ...rest\n }: StepGroupProps,\n ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n const itemsInGroupCount = React.Children.count(children);\n const { childrenWithIndex, totalItemsInParentGroupCount } = useChildrenWithIndexes({\n children,\n size,\n orientation,\n _nestingLevel,\n });\n const contextValue = React.useMemo<StepGroupContextType>(\n () => ({\n size,\n orientation,\n itemsInGroupCount,\n totalItemsInParentGroupCount,\n }),\n [size, orientation, itemsInGroupCount, totalItemsInParentGroupCount],\n );\n\n const isHorizontal = orientation === 'horizontal';\n const defaultWidth = isHorizontal ? '100%' : undefined;\n\n return (\n <StepGroupContext.Provider value={contextValue}>\n <BaseBox\n ref={ref as never}\n {...getStyledProps(rest)}\n display=\"inline-flex\"\n maxWidth={maxWidth ?? '100%'}\n minWidth={minWidth}\n width={width ?? defaultWidth}\n paddingY={_nestingLevel === 0 ? 'spacing.4' : undefined}\n overflowX={isHorizontal ? 'auto' : undefined}\n flexDirection={isHorizontal ? 'row' : 'column'}\n {...metaAttribute({ name: MetaConstants.StepGroup, testID })}\n {...makeAnalyticsAttribute(rest)}\n >\n {childrenWithIndex}\n </BaseBox>\n </StepGroupContext.Provider>\n );\n};\n\n/*\n ## StepGroup\n \n Step Group visualises sequential processes with a consistent structure. It can be interactive, guiding users through steps, or function as a timeline for reference.\n \n ### Usage\n \n ```jsx\n * <StepGroup orientation=\"vertical\" size=\"medium\">\n * <StepItem title=\"Personal Details\" />\n * <StepItem title=\"Business Details\" />\n * </StepGroup>\n * ```\n \n ---\n \n Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}\n */\nconst StepGroup = assignWithoutSideEffects(React.forwardRef(_StepGroup), {\n componentId: componentIds.StepGroup,\n displayName: componentIds.StepGroup,\n});\n\nexport { StepGroup };\n"],"names":["useChildrenWithIndexes","_ref","_nestingLevel","children","parentStepGroupProps","_objectWithoutProperties","_excluded","_useStepGroup","useStepGroup","totalItemsFromPreviousParent","totalItemsInParentGroupCount","totalIndex","traverseGroupAndAddIndex","groupChildrenProp","nestingLevelOfGroup","arguments","length","undefined","stepItemIndex","React","Children","map","child","index","componentId","getComponentId","componentIds","StepItem","cloneElement","_index","_totalIndex","key","collapsibleComponentIds","Collapsible","orientation","throwBladeError","message","moduleName","props","nestedChild","isValidElement","CollapsibleBody","StepGroup","_objectSpread","childrenWithIndex","useMemo","_StepGroup","_ref2","ref","_ref2$size","size","_ref2$orientation","testID","_ref2$_nestingLevel","width","minWidth","maxWidth","rest","_excluded2","itemsInGroupCount","count","_useChildrenWithIndex","contextValue","isHorizontal","defaultWidth","_jsx","StepGroupContext","Provider","value","BaseBox","getStyledProps","display","paddingY","overflowX","flexDirection","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}

package/build/lib/web/production/components/StepGroup/StepItem.web.js CHANGED Viewed

@@ -171,7 +171,8 @@ var _StepItem = function _StepItem(_ref2) {
     alignItems: isVertical ? undefined : 'center',
     minWidth: isVertical ? undefined : "min(".concat(makeSize(size['120']), ", 100%)"),
     width: isVertical ? '100%' : undefined,
-    flex: isVertical ? undefined : '1'
+    flex: isVertical ? undefined : '1',
+    marginX: isVertical ? 'spacing.4' : 'spacing.0'
   }, metaAttribute({
     name: MetaConstants.StepItem
   })), makeAnalyticsAttribute(rest)), {}, {

package/build/lib/web/production/components/StepGroup/StepItem.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepItem.web.js","sources":["../../../../../../src/components/StepGroup/StepItem.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { StepLine } from './StepLine';\nimport type { StepLineProps } from './StepLine';\nimport { useStepGroup } from './StepGroupContext';\nimport type {\n InteractiveItemHeaderProps,\n StepGroupContextType,\n StepGroupProps,\n StepItemProps,\n} from './types';\nimport { componentIds } from './componentIds';\nimport { itemLineGap, stepItemHeaderTokens } from './tokens';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeSize, makeSpace } from '~utils';\nimport { size as sizeTokens } from '~tokens/global';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport getIn from '~utils/lodashButBetter/get';\nimport { throwBladeError } from '~utils/logger';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype GetStepTypeFromIndexProps = {\n _index: StepItemProps['_index'];\n _nestingLevel: StepGroupProps['_nestingLevel'];\n itemsCount: StepGroupContextType['itemsInGroupCount'];\n};\n\nconst InteractiveItemHeaderBox = styled.button<InteractiveItemHeaderProps>((props) => {\n return {\n padding: `${makeSpace(getIn(props.theme, props.paddingY))} ${makeSpace(\n getIn(props.theme, props.paddingX),\n )}`,\n cursor: 'pointer',\n display: 'inline-block',\n textDecoration: 'none',\n border: 'none',\n textAlign: 'inherit',\n backgroundColor: props.isSelected\n ? props.theme.colors.interactive.background.primary.faded\n : props.theme.colors.transparent,\n borderRadius: props.theme.border.radius.medium,\n width: '100%',\n transition: `background-color ${props.theme.motion.duration.xquick} ${props.theme.motion.easing.standard}`,\n ':not([disabled]):hover': {\n backgroundColor: props.isSelected\n ? props.theme.colors.interactive.background.primary.fadedHighlighted\n : props.theme.colors.interactive.background.gray.fadedHighlighted,\n },\n ':not([disabled]):focus-visible': {\n ...getFocusRingStyles({ theme: props.theme }),\n },\n '&[disabled]': {\n cursor: 'not-allowed',\n },\n };\n});\n\nconst getStepTypeFromIndex = ({\n _index,\n _nestingLevel,\n itemsCount,\n}: GetStepTypeFromIndexProps): StepLineProps['stepType'] => {\n if (_nestingLevel === 0) {\n return 'default';\n }\n\n if (itemsCount === 1) {\n return 'single-item';\n }\n\n if (_index === 0) {\n return 'start';\n }\n\n if (_index === itemsCount - 1) {\n return 'end';\n }\n\n return 'middle';\n};\n\nconst _StepItem = ({\n title,\n titleColor,\n timestamp,\n description,\n stepProgress = 'none',\n marker,\n trailing,\n isSelected,\n isDisabled,\n href,\n target,\n onClick,\n children,\n _index = 0,\n _totalIndex = 0,\n _nestingLevel = 0,\n ...rest\n}: StepItemProps): React.ReactElement => {\n const {\n itemsInGroupCount: itemsCount,\n totalItemsInParentGroupCount,\n orientation,\n size,\n } = useStepGroup();\n const stepType = React.useMemo(\n () => getStepTypeFromIndex({ _index, _nestingLevel, itemsCount }),\n [_index, _nestingLevel, itemsCount],\n );\n\n const itemRef = React.useRef<HTMLDivElement>(null);\n\n const isFirstItem = _totalIndex === 0;\n const isLastItem = _totalIndex === totalItemsInParentGroupCount - 1;\n const isInteractive = Boolean(href) \|\| Boolean(onClick);\n const isVertical = orientation === 'vertical';\n const isNested = _nestingLevel > 0;\n\n if (__DEV__) {\n if (trailing && orientation === 'horizontal') {\n throwBladeError({\n message: 'trailing is not allowed in horizontal StepGroup',\n moduleName: 'StepItem',\n });\n }\n\n if (_nestingLevel >= 1 && orientation === 'horizontal') {\n throwBladeError({\n message: 'Nested StepGroup components are not allowed in horizontal orientation',\n moduleName: 'StepItem',\n });\n }\n }\n\n const stepItemHeaderJSX = (\n <Box display=\"flex\" flexDirection=\"row\" justifyContent=\"space-between\" gap=\"spacing.4\">\n <Box>\n <Text\n size={stepItemHeaderTokens[size].title}\n color={\n isDisabled ? 'surface.text.gray.disabled' : titleColor ?? 'surface.text.gray.subtle'\n }\n weight={isNested ? 'regular' : 'semibold'}\n >\n {title}\n </Text>\n <Text\n size={stepItemHeaderTokens[size].timestamp}\n marginY=\"spacing.2\"\n color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.muted'}\n variant=\"caption\"\n >\n {timestamp}\n </Text>\n <Text\n size={stepItemHeaderTokens[size].description}\n color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.muted'}\n >\n {description}\n </Text>\n </Box>\n <Box>{trailing}</Box>\n </Box>\n );\n\n const stepItemHeaderPaddings: Omit<InteractiveItemHeaderProps, 'isSelected'> = {\n paddingY: 'spacing.3',\n paddingX: 'spacing.4',\n } as const;\n\n return (\n <BaseBox\n display=\"flex\"\n flexDirection={isVertical ? 'row' : 'column'}\n gap={itemLineGap[size]}\n className={`step-item step-index-${_index} step-nesting-level-${_nestingLevel}`}\n textAlign={isVertical ? 'left' : 'center'}\n alignItems={isVertical ? undefined : 'center'}\n minWidth={isVertical ? undefined : `min(${makeSize(sizeTokens['120'])}, 100%)`}\n width={isVertical ? '100%' : undefined}\n flex={isVertical ? undefined : '1'}\n {...metaAttribute({ name: MetaConstants.StepItem })}\n {...makeAnalyticsAttribute(rest)}\n ref={itemRef}\n >\n <StepLine\n shouldShowStartBranch={!isFirstItem}\n shouldShowEndBranch={!isLastItem}\n stepType={stepType}\n marker={marker}\n stepProgress={stepProgress}\n />\n <Box flex=\"1\" marginRight={isVertical ? undefined : undefined}>\n {isInteractive ? (\n <InteractiveItemHeaderBox\n {...stepItemHeaderPaddings}\n as={href ? 'a' : 'button'}\n href={href}\n target={target}\n isSelected={isSelected}\n onClick={onClick}\n disabled={isDisabled}\n >\n {stepItemHeaderJSX}\n </InteractiveItemHeaderBox>\n ) : (\n <Box {...stepItemHeaderPaddings}>{stepItemHeaderJSX}</Box>\n )}\n {children ? (\n <Box paddingX=\"spacing.4\" paddingBottom=\"spacing.3\">\n {children}\n </Box>\n ) : null}\n </Box>\n </BaseBox>\n );\n};\n\n/*\n ## StepItem\n \n Component meant to be used inside the StepGroup parent component\n \n ### Usage\n \n ```jsx\n * <StepGroup orientation=\"vertical\" size=\"medium\">\n * <StepItem\n * title=\"Personal Details\"\n * timestamp=\"Thu 15th Oct'23 \| 12:00pm\"\n * description=\"Fill your personal details here\"\n * marker={<StepItemIndicator color=\"negative\" />}\n * />\n * </StepGroup>\n * ```\n \n ---\n \n Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}\n */\nconst StepItem = assignWithoutSideEffects(_StepItem, {\n componentId: componentIds.StepItem,\n displayName: componentIds.StepItem,\n});\n\nexport { StepLine, StepItem };\n"],"names":["InteractiveItemHeaderBox","styled","button","withConfig","displayName","componentId","props","padding","concat","makeSpace","getIn","theme","paddingY","paddingX","cursor","display","textDecoration","border","textAlign","backgroundColor","isSelected","colors","interactive","background","primary","faded","transparent","borderRadius","radius","medium","width","transition","motion","duration","xquick","easing","standard","fadedHighlighted","gray","_objectSpread","getFocusRingStyles","getStepTypeFromIndex","_ref","_index","_nestingLevel","itemsCount","_StepItem","_ref2","title","titleColor","timestamp","description","_ref2$stepProgress","stepProgress","marker","trailing","isDisabled","href","target","onClick","children","_ref2$_index","_ref2$_totalIndex","_totalIndex","_ref2$_nestingLevel","rest","_objectWithoutProperties","_excluded","_useStepGroup","useStepGroup","itemsInGroupCount","totalItemsInParentGroupCount","orientation","size","stepType","React","useMemo","itemRef","useRef","isFirstItem","isLastItem","isInteractive","Boolean","isVertical","isNested","throwBladeError","message","moduleName","stepItemHeaderJSX","_jsxs","Box","flexDirection","justifyContent","gap","_jsx","Text","stepItemHeaderTokens","color","weight","marginY","variant","stepItemHeaderPaddings","BaseBox","itemLineGap","className","alignItems","undefined","minWidth","makeSize","sizeTokens","flex","metaAttribute","name","MetaConstants","StepItem","makeAnalyticsAttribute","ref","StepLine","shouldShowStartBranch","shouldShowEndBranch","marginRight","as","disabled","paddingBottom","assignWithoutSideEffects","componentIds"],"mappings":"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"}
1	+ {"version":3,"file":"StepItem.web.js","sources":["../../../../../../src/components/StepGroup/StepItem.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { StepLine } from './StepLine';\nimport type { StepLineProps } from './StepLine';\nimport { useStepGroup } from './StepGroupContext';\nimport type {\n InteractiveItemHeaderProps,\n StepGroupContextType,\n StepGroupProps,\n StepItemProps,\n} from './types';\nimport { componentIds } from './componentIds';\nimport { itemLineGap, stepItemHeaderTokens } from './tokens';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeSize, makeSpace } from '~utils';\nimport { size as sizeTokens } from '~tokens/global';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport getIn from '~utils/lodashButBetter/get';\nimport { throwBladeError } from '~utils/logger';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype GetStepTypeFromIndexProps = {\n _index: StepItemProps['_index'];\n _nestingLevel: StepGroupProps['_nestingLevel'];\n itemsCount: StepGroupContextType['itemsInGroupCount'];\n};\n\nconst InteractiveItemHeaderBox = styled.button<InteractiveItemHeaderProps>((props) => {\n return {\n padding: `${makeSpace(getIn(props.theme, props.paddingY))} ${makeSpace(\n getIn(props.theme, props.paddingX),\n )}`,\n cursor: 'pointer',\n display: 'inline-block',\n textDecoration: 'none',\n border: 'none',\n textAlign: 'inherit',\n backgroundColor: props.isSelected\n ? props.theme.colors.interactive.background.primary.faded\n : props.theme.colors.transparent,\n borderRadius: props.theme.border.radius.medium,\n width: '100%',\n transition: `background-color ${props.theme.motion.duration.xquick} ${props.theme.motion.easing.standard}`,\n ':not([disabled]):hover': {\n backgroundColor: props.isSelected\n ? props.theme.colors.interactive.background.primary.fadedHighlighted\n : props.theme.colors.interactive.background.gray.fadedHighlighted,\n },\n ':not([disabled]):focus-visible': {\n ...getFocusRingStyles({ theme: props.theme }),\n },\n '&[disabled]': {\n cursor: 'not-allowed',\n },\n };\n});\n\nconst getStepTypeFromIndex = ({\n _index,\n _nestingLevel,\n itemsCount,\n}: GetStepTypeFromIndexProps): StepLineProps['stepType'] => {\n if (_nestingLevel === 0) {\n return 'default';\n }\n\n if (itemsCount === 1) {\n return 'single-item';\n }\n\n if (_index === 0) {\n return 'start';\n }\n\n if (_index === itemsCount - 1) {\n return 'end';\n }\n\n return 'middle';\n};\n\nconst _StepItem = ({\n title,\n titleColor,\n timestamp,\n description,\n stepProgress = 'none',\n marker,\n trailing,\n isSelected,\n isDisabled,\n href,\n target,\n onClick,\n children,\n _index = 0,\n _totalIndex = 0,\n _nestingLevel = 0,\n ...rest\n}: StepItemProps): React.ReactElement => {\n const {\n itemsInGroupCount: itemsCount,\n totalItemsInParentGroupCount,\n orientation,\n size,\n } = useStepGroup();\n const stepType = React.useMemo(\n () => getStepTypeFromIndex({ _index, _nestingLevel, itemsCount }),\n [_index, _nestingLevel, itemsCount],\n );\n\n const itemRef = React.useRef<HTMLDivElement>(null);\n\n const isFirstItem = _totalIndex === 0;\n const isLastItem = _totalIndex === totalItemsInParentGroupCount - 1;\n const isInteractive = Boolean(href) \|\| Boolean(onClick);\n const isVertical = orientation === 'vertical';\n const isNested = _nestingLevel > 0;\n\n if (__DEV__) {\n if (trailing && orientation === 'horizontal') {\n throwBladeError({\n message: 'trailing is not allowed in horizontal StepGroup',\n moduleName: 'StepItem',\n });\n }\n\n if (_nestingLevel >= 1 && orientation === 'horizontal') {\n throwBladeError({\n message: 'Nested StepGroup components are not allowed in horizontal orientation',\n moduleName: 'StepItem',\n });\n }\n }\n\n const stepItemHeaderJSX = (\n <Box display=\"flex\" flexDirection=\"row\" justifyContent=\"space-between\" gap=\"spacing.4\">\n <Box>\n <Text\n size={stepItemHeaderTokens[size].title}\n color={\n isDisabled ? 'surface.text.gray.disabled' : titleColor ?? 'surface.text.gray.subtle'\n }\n weight={isNested ? 'regular' : 'semibold'}\n >\n {title}\n </Text>\n <Text\n size={stepItemHeaderTokens[size].timestamp}\n marginY=\"spacing.2\"\n color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.muted'}\n variant=\"caption\"\n >\n {timestamp}\n </Text>\n <Text\n size={stepItemHeaderTokens[size].description}\n color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.muted'}\n >\n {description}\n </Text>\n </Box>\n <Box>{trailing}</Box>\n </Box>\n );\n\n const stepItemHeaderPaddings: Omit<InteractiveItemHeaderProps, 'isSelected'> = {\n paddingY: 'spacing.3',\n paddingX: 'spacing.4',\n } as const;\n\n return (\n <BaseBox\n display=\"flex\"\n flexDirection={isVertical ? 'row' : 'column'}\n gap={itemLineGap[size]}\n className={`step-item step-index-${_index} step-nesting-level-${_nestingLevel}`}\n textAlign={isVertical ? 'left' : 'center'}\n alignItems={isVertical ? undefined : 'center'}\n minWidth={isVertical ? undefined : `min(${makeSize(sizeTokens['120'])}, 100%)`}\n width={isVertical ? '100%' : undefined}\n flex={isVertical ? undefined : '1'}\n marginX={isVertical ? 'spacing.4' : 'spacing.0'}\n {...metaAttribute({ name: MetaConstants.StepItem })}\n {...makeAnalyticsAttribute(rest)}\n ref={itemRef}\n >\n <StepLine\n shouldShowStartBranch={!isFirstItem}\n shouldShowEndBranch={!isLastItem}\n stepType={stepType}\n marker={marker}\n stepProgress={stepProgress}\n />\n <Box flex=\"1\" marginRight={isVertical ? undefined : undefined}>\n {isInteractive ? (\n <InteractiveItemHeaderBox\n {...stepItemHeaderPaddings}\n as={href ? 'a' : 'button'}\n href={href}\n target={target}\n isSelected={isSelected}\n onClick={onClick}\n disabled={isDisabled}\n >\n {stepItemHeaderJSX}\n </InteractiveItemHeaderBox>\n ) : (\n <Box {...stepItemHeaderPaddings}>{stepItemHeaderJSX}</Box>\n )}\n {children ? (\n <Box paddingX=\"spacing.4\" paddingBottom=\"spacing.3\">\n {children}\n </Box>\n ) : null}\n </Box>\n </BaseBox>\n );\n};\n\n/*\n ## StepItem\n \n Component meant to be used inside the StepGroup parent component\n \n ### Usage\n \n ```jsx\n * <StepGroup orientation=\"vertical\" size=\"medium\">\n * <StepItem\n * title=\"Personal Details\"\n * timestamp=\"Thu 15th Oct'23 \| 12:00pm\"\n * description=\"Fill your personal details here\"\n * marker={<StepItemIndicator color=\"negative\" />}\n * />\n * </StepGroup>\n * ```\n \n ---\n \n Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}\n */\nconst StepItem = assignWithoutSideEffects(_StepItem, {\n componentId: componentIds.StepItem,\n displayName: componentIds.StepItem,\n});\n\nexport { StepLine, StepItem };\n"],"names":["InteractiveItemHeaderBox","styled","button","withConfig","displayName","componentId","props","padding","concat","makeSpace","getIn","theme","paddingY","paddingX","cursor","display","textDecoration","border","textAlign","backgroundColor","isSelected","colors","interactive","background","primary","faded","transparent","borderRadius","radius","medium","width","transition","motion","duration","xquick","easing","standard","fadedHighlighted","gray","_objectSpread","getFocusRingStyles","getStepTypeFromIndex","_ref","_index","_nestingLevel","itemsCount","_StepItem","_ref2","title","titleColor","timestamp","description","_ref2$stepProgress","stepProgress","marker","trailing","isDisabled","href","target","onClick","children","_ref2$_index","_ref2$_totalIndex","_totalIndex","_ref2$_nestingLevel","rest","_objectWithoutProperties","_excluded","_useStepGroup","useStepGroup","itemsInGroupCount","totalItemsInParentGroupCount","orientation","size","stepType","React","useMemo","itemRef","useRef","isFirstItem","isLastItem","isInteractive","Boolean","isVertical","isNested","throwBladeError","message","moduleName","stepItemHeaderJSX","_jsxs","Box","flexDirection","justifyContent","gap","_jsx","Text","stepItemHeaderTokens","color","weight","marginY","variant","stepItemHeaderPaddings","BaseBox","itemLineGap","className","alignItems","undefined","minWidth","makeSize","sizeTokens","flex","marginX","metaAttribute","name","MetaConstants","StepItem","makeAnalyticsAttribute","ref","StepLine","shouldShowStartBranch","shouldShowEndBranch","marginRight","as","disabled","paddingBottom","assignWithoutSideEffects","componentIds"],"mappings":"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"}

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

@@ -14971,7 +14971,7 @@ type DrawerProps = {
      *
      * Supports DrawerHeader and DrawerBody
      */
-    children: React.ReactNode;
+    children: React__default.ReactNode;
     /**
      * zIndex property of drawer
      *
@@ -14985,7 +14985,7 @@ type DrawerProps = {
     /**
      * Ref to the element that should receive focus when opening the drawer.
      */
-    initialFocusRef?: React.MutableRefObject<any>;
+    initialFocusRef?: React__default.MutableRefObject<any>;
     /**
      * If `true`, the DrawerBody will be rendered only when it becomes active.
      * Set to `false` to keep DrawerBody in DOM
@@ -14998,7 +14998,7 @@ type DrawerHeaderProps = {
     /**
      * Title of the Drawer
      */
-    title: string;
+    title?: string;
     /**
      * Subtitle of the Drawer
      */
@@ -15008,19 +15008,23 @@ type DrawerHeaderProps = {
      *
      * DrawerHeaderIcon or DrawerHeaderAsset
      */
-    leading?: React.ReactNode;
+    leading?: React__default.ReactNode;
     /**
      * Title suffix element
      *
      * DrawerHeaderBadge
      */
-    titleSuffix?: React.ReactNode;
+    titleSuffix?: React__default.ReactNode;
     /**
      * Trailing element
      *
      * Link, Button[]
      */
-    trailing?: React.ReactNode;
+    trailing?: React__default.ReactNode;
+    /**
+     * Children elements to be rendered inside the header
+     */
+    children?: React__default.ReactElement | React__default.ReactElement[];
 } & DataAnalyticsAttribute;
 /**
@@ -15037,7 +15041,7 @@ type DrawerHeaderProps = {
  * ```
  *
  */
-declare const DrawerHeader: ({ title, subtitle, leading, trailing, titleSuffix, ...rest }: DrawerHeaderProps) => React__default.ReactElement;
+declare const DrawerHeader: ({ title, subtitle, leading, trailing, titleSuffix, children, ...rest }: DrawerHeaderProps) => React__default.ReactElement;
 declare const drawerPadding = "spacing.6";
 declare const DrawerBody: ({ children }: {
     children: React__default.ReactNode;
@@ -15355,6 +15359,13 @@ type BaseInputCommonProps = FormInputLabelProps & DataAnalyticsAttribute & FormI
      * Hides the form hints and shows them as tooltip of trailing
      */
     showHintsAsTooltip?: boolean;
+    role?: AriaAttributes['role'];
+    /**
+     * Tab Index of the input field
+     *
+     * @default undefined
+     */
+    tabIndex?: number;
 } & TestID & Platform.Select<{
     native: {
         /**
@@ -16333,8 +16344,8 @@ type DropdownIconButtonProps = Omit<IconButtonProps, 'onClick'> & {
 };
 declare const DropdownIconButton: ({ icon, isDisabled, onClick, onBlur, onKeyDown, size, accessibilityLabel, emphasis, ...rest }: DropdownIconButtonProps) => React__default.ReactElement;
-type DropdownHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix' | 'testID' | keyof DataAnalyticsAttribute>;
-declare const DropdownHeader: ({ title, subtitle, leading, titleSuffix, trailing, testID, ...rest }: DropdownHeaderProps) => React__default.ReactElement;
+type DropdownHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix' | 'testID' | 'children' | keyof DataAnalyticsAttribute>;
+declare const DropdownHeader: ({ title, subtitle, leading, titleSuffix, trailing, testID, children, ...rest }: DropdownHeaderProps) => React__default.ReactElement;
 type DropdownFooter = Pick<BaseFooterProps, 'children' | 'testID'>;
 declare const DropdownFooter: ({ children, testID }: DropdownFooter) => React__default.ReactElement;

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

@@ -9737,7 +9737,7 @@ type DrawerProps = {
      *
      * Supports DrawerHeader and DrawerBody
      */
-    children: React.ReactNode;
+    children: React__default.ReactNode;
     /**
      * zIndex property of drawer
      *
@@ -9751,7 +9751,7 @@ type DrawerProps = {
     /**
      * Ref to the element that should receive focus when opening the drawer.
      */
-    initialFocusRef?: React.MutableRefObject<any>;
+    initialFocusRef?: React__default.MutableRefObject<any>;
     /**
      * If `true`, the DrawerBody will be rendered only when it becomes active.
      * Set to `false` to keep DrawerBody in DOM
@@ -9764,7 +9764,7 @@ type DrawerHeaderProps = {
     /**
      * Title of the Drawer
      */
-    title: string;
+    title?: string;
     /**
      * Subtitle of the Drawer
      */
@@ -9774,19 +9774,23 @@ type DrawerHeaderProps = {
      *
      * DrawerHeaderIcon or DrawerHeaderAsset
      */
-    leading?: React.ReactNode;
+    leading?: React__default.ReactNode;
     /**
      * Title suffix element
      *
      * DrawerHeaderBadge
      */
-    titleSuffix?: React.ReactNode;
+    titleSuffix?: React__default.ReactNode;
     /**
      * Trailing element
      *
      * Link, Button[]
      */
-    trailing?: React.ReactNode;
+    trailing?: React__default.ReactNode;
+    /**
+     * Children elements to be rendered inside the header
+     */
+    children?: React__default.ReactElement | React__default.ReactElement[];
 } & DataAnalyticsAttribute;
 declare const Drawer: (_props: DrawerProps) => React.ReactElement;
@@ -10112,6 +10116,13 @@ type BaseInputCommonProps = FormInputLabelProps & DataAnalyticsAttribute & FormI
      * Hides the form hints and shows them as tooltip of trailing
      */
     showHintsAsTooltip?: boolean;
+    role?: AriaAttributes['role'];
+    /**
+     * Tab Index of the input field
+     *
+     * @default undefined
+     */
+    tabIndex?: number;
 } & TestID & Platform.Select<{
     native: {
         /**
@@ -10858,8 +10869,8 @@ type DropdownIconButtonProps = Omit<IconButtonProps, 'onClick'> & {
 };
 declare const DropdownIconButton: ({ icon, isDisabled, onClick, onBlur, onKeyDown, size, accessibilityLabel, emphasis, ...rest }: DropdownIconButtonProps) => React__default.ReactElement;
-type DropdownHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix' | 'testID' | keyof DataAnalyticsAttribute>;
-declare const DropdownHeader: ({ title, subtitle, leading, titleSuffix, trailing, testID, ...rest }: DropdownHeaderProps) => React__default.ReactElement;
+type DropdownHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix' | 'testID' | 'children' | keyof DataAnalyticsAttribute>;
+declare const DropdownHeader: ({ title, subtitle, leading, titleSuffix, trailing, testID, children, ...rest }: DropdownHeaderProps) => React__default.ReactElement;
 type DropdownFooter = Pick<BaseFooterProps, 'children' | 'testID'>;
 declare const DropdownFooter: ({ children, testID }: DropdownFooter) => React__default.ReactElement;

package/package.json CHANGED Viewed

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