@razorpay/blade 12.31.3 → 12.31.5
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.
- package/build/lib/web/development/components/StepGroup/StepItem.web.js +3 -2
- package/build/lib/web/development/components/StepGroup/StepItem.web.js.map +1 -1
- package/build/lib/web/production/components/StepGroup/StepItem.web.js +3 -2
- package/build/lib/web/production/components/StepGroup/StepItem.web.js.map +1 -1
- package/build/types/components/index.d.ts +6 -2
- package/build/types/components/index.native.d.ts +5 -1
- package/package.json +1 -1
|
@@ -31,7 +31,7 @@ import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
|
|
|
31
31
|
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
32
32
|
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
|
|
33
33
|
|
|
34
|
-
var _excluded = ["title", "titleColor", "timestamp", "description", "stepProgress", "marker", "trailing", "isSelected", "isDisabled", "href", "target", "onClick", "children", "_index", "_totalIndex", "_nestingLevel"];
|
|
34
|
+
var _excluded = ["title", "titleColor", "timestamp", "description", "stepProgress", "marker", "trailing", "isSelected", "isDisabled", "href", "target", "onClick", "children", "_index", "_totalIndex", "_nestingLevel", "minWidth"];
|
|
35
35
|
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; }
|
|
36
36
|
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; }
|
|
37
37
|
var InteractiveItemHeaderBox = /*#__PURE__*/styled.button.withConfig({
|
|
@@ -100,6 +100,7 @@ var _StepItem = function _StepItem(_ref2) {
|
|
|
100
100
|
_totalIndex = _ref2$_totalIndex === void 0 ? 0 : _ref2$_totalIndex,
|
|
101
101
|
_ref2$_nestingLevel = _ref2._nestingLevel,
|
|
102
102
|
_nestingLevel = _ref2$_nestingLevel === void 0 ? 0 : _ref2$_nestingLevel,
|
|
103
|
+
minWidth = _ref2.minWidth,
|
|
103
104
|
rest = _objectWithoutProperties(_ref2, _excluded);
|
|
104
105
|
var _useStepGroup = useStepGroup(),
|
|
105
106
|
itemsCount = _useStepGroup.itemsInGroupCount,
|
|
@@ -173,7 +174,7 @@ var _StepItem = function _StepItem(_ref2) {
|
|
|
173
174
|
className: "step-item step-index-".concat(_index, " step-nesting-level-").concat(_nestingLevel),
|
|
174
175
|
textAlign: isVertical ? 'left' : 'center',
|
|
175
176
|
alignItems: isVertical ? undefined : 'center',
|
|
176
|
-
minWidth: isVertical ? undefined : "min(".concat(makeSize(size['120']), ", 100%)"),
|
|
177
|
+
minWidth: isVertical ? undefined : minWidth !== null && minWidth !== void 0 ? minWidth : "min(".concat(makeSize(size['120']), ", 100%)"),
|
|
177
178
|
width: isVertical ? '100%' : undefined,
|
|
178
179
|
flex: isVertical ? undefined : '1',
|
|
179
180
|
marginX: isVertical ? 'spacing.4' : 'spacing.0'
|
|
@@ -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.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.faded\n : props.theme.colors.interactive.background.gray.default,\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\n ? 'surface.text.gray.disabled'\n : isSelected\n ? 'surface.text.primary.normal'\n : titleColor ?? 'surface.text.gray.subtle'\n }\n weight={isNested ? 'regular' : 'medium'}\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 {trailing ? <Box>{trailing}</Box> : null}\n </Box>\n );\n\n const stepItemHeaderPaddings: Omit<InteractiveItemHeaderProps, 'isSelected'> = {\n paddingY: 'spacing.3',\n paddingX: 'spacing.4',\n } as const;\n\n const enhancedMarker = marker\n ? React.cloneElement(marker, {\n isDisabled: isDisabled ?? marker?.props?.isDisabled,\n })\n : undefined;\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={enhancedMarker}\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","colors","transparent","borderRadius","radius","medium","width","transition","motion","duration","xquick","easing","standard","isSelected","interactive","background","primary","faded","gray","_objectSpread","getFocusRingStyles","getStepTypeFromIndex","_ref","_index","_nestingLevel","itemsCount","_StepItem","_ref2","_marker$props","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","enhancedMarker","cloneElement","undefined","BaseBox","itemLineGap","className","alignItems","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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"}
|
|
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.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.faded\n : props.theme.colors.interactive.background.gray.default,\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 minWidth,\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\n ? 'surface.text.gray.disabled'\n : isSelected\n ? 'surface.text.primary.normal'\n : titleColor ?? 'surface.text.gray.subtle'\n }\n weight={isNested ? 'regular' : 'medium'}\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 {trailing ? <Box>{trailing}</Box> : null}\n </Box>\n );\n\n const stepItemHeaderPaddings: Omit<InteractiveItemHeaderProps, 'isSelected'> = {\n paddingY: 'spacing.3',\n paddingX: 'spacing.4',\n } as const;\n\n const enhancedMarker = marker\n ? React.cloneElement(marker, {\n isDisabled: isDisabled ?? marker?.props?.isDisabled,\n })\n : undefined;\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 : minWidth ?? `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={enhancedMarker}\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","colors","transparent","borderRadius","radius","medium","width","transition","motion","duration","xquick","easing","standard","isSelected","interactive","background","primary","faded","gray","_objectSpread","getFocusRingStyles","getStepTypeFromIndex","_ref","_index","_nestingLevel","itemsCount","_StepItem","_ref2","_marker$props","title","titleColor","timestamp","description","_ref2$stepProgress","stepProgress","marker","trailing","isDisabled","href","target","onClick","children","_ref2$_index","_ref2$_totalIndex","_totalIndex","_ref2$_nestingLevel","minWidth","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","enhancedMarker","cloneElement","undefined","BaseBox","itemLineGap","className","alignItems","makeSize","sizeTokens","flex","marginX","metaAttribute","name","MetaConstants","StepItem","makeAnalyticsAttribute","ref","StepLine","shouldShowStartBranch","shouldShowEndBranch","marginRight","as","disabled","paddingBottom","assignWithoutSideEffects","componentIds"],"mappings":"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"}
|
|
@@ -31,7 +31,7 @@ import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
|
|
|
31
31
|
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
32
32
|
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
|
|
33
33
|
|
|
34
|
-
var _excluded = ["title", "titleColor", "timestamp", "description", "stepProgress", "marker", "trailing", "isSelected", "isDisabled", "href", "target", "onClick", "children", "_index", "_totalIndex", "_nestingLevel"];
|
|
34
|
+
var _excluded = ["title", "titleColor", "timestamp", "description", "stepProgress", "marker", "trailing", "isSelected", "isDisabled", "href", "target", "onClick", "children", "_index", "_totalIndex", "_nestingLevel", "minWidth"];
|
|
35
35
|
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; }
|
|
36
36
|
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; }
|
|
37
37
|
var InteractiveItemHeaderBox = /*#__PURE__*/styled.button.withConfig({
|
|
@@ -100,6 +100,7 @@ var _StepItem = function _StepItem(_ref2) {
|
|
|
100
100
|
_totalIndex = _ref2$_totalIndex === void 0 ? 0 : _ref2$_totalIndex,
|
|
101
101
|
_ref2$_nestingLevel = _ref2._nestingLevel,
|
|
102
102
|
_nestingLevel = _ref2$_nestingLevel === void 0 ? 0 : _ref2$_nestingLevel,
|
|
103
|
+
minWidth = _ref2.minWidth,
|
|
103
104
|
rest = _objectWithoutProperties(_ref2, _excluded);
|
|
104
105
|
var _useStepGroup = useStepGroup(),
|
|
105
106
|
itemsCount = _useStepGroup.itemsInGroupCount,
|
|
@@ -173,7 +174,7 @@ var _StepItem = function _StepItem(_ref2) {
|
|
|
173
174
|
className: "step-item step-index-".concat(_index, " step-nesting-level-").concat(_nestingLevel),
|
|
174
175
|
textAlign: isVertical ? 'left' : 'center',
|
|
175
176
|
alignItems: isVertical ? undefined : 'center',
|
|
176
|
-
minWidth: isVertical ? undefined : "min(".concat(makeSize(size['120']), ", 100%)"),
|
|
177
|
+
minWidth: isVertical ? undefined : minWidth !== null && minWidth !== void 0 ? minWidth : "min(".concat(makeSize(size['120']), ", 100%)"),
|
|
177
178
|
width: isVertical ? '100%' : undefined,
|
|
178
179
|
flex: isVertical ? undefined : '1',
|
|
179
180
|
marginX: isVertical ? 'spacing.4' : 'spacing.0'
|
|
@@ -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.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.faded\n : props.theme.colors.interactive.background.gray.default,\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\n ? 'surface.text.gray.disabled'\n : isSelected\n ? 'surface.text.primary.normal'\n : titleColor ?? 'surface.text.gray.subtle'\n }\n weight={isNested ? 'regular' : 'medium'}\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 {trailing ? <Box>{trailing}</Box> : null}\n </Box>\n );\n\n const stepItemHeaderPaddings: Omit<InteractiveItemHeaderProps, 'isSelected'> = {\n paddingY: 'spacing.3',\n paddingX: 'spacing.4',\n } as const;\n\n const enhancedMarker = marker\n ? React.cloneElement(marker, {\n isDisabled: isDisabled ?? marker?.props?.isDisabled,\n })\n : undefined;\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={enhancedMarker}\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","colors","transparent","borderRadius","radius","medium","width","transition","motion","duration","xquick","easing","standard","isSelected","interactive","background","primary","faded","gray","_objectSpread","getFocusRingStyles","getStepTypeFromIndex","_ref","_index","_nestingLevel","itemsCount","_StepItem","_ref2","_marker$props","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","enhancedMarker","cloneElement","undefined","BaseBox","itemLineGap","className","alignItems","minWidth","makeSize","sizeTokens","flex","marginX","metaAttribute","name","MetaConstants","StepItem","makeAnalyticsAttribute","ref","StepLine","shouldShowStartBranch","shouldShowEndBranch","marginRight","as","disabled","paddingBottom","assignWithoutSideEffects","componentIds"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,IAAMA,wBAAwB,gBAAGC,MAAM,CAACC,MAAM,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,uCAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAA6B,CAAA,CAAA,UAACC,KAAK,EAAK;EACpF,OAAO;AACLC,IAAAA,OAAO,EAAAC,EAAAA,CAAAA,MAAA,CAAKC,SAAS,CAACC,KAAK,CAACJ,KAAK,CAACK,KAAK,EAAEL,KAAK,CAACM,QAAQ,CAAC,CAAC,EAAAJ,GAAAA,CAAAA,CAAAA,MAAA,CAAIC,SAAS,CACpEC,KAAK,CAACJ,KAAK,CAACK,KAAK,EAAEL,KAAK,CAACO,QAAQ,CACnC,CAAC,CAAE;AACHC,IAAAA,MAAM,EAAE,SAAS;AACjBC,IAAAA,OAAO,EAAE,cAAc;AACvBC,IAAAA,cAAc,EAAE,MAAM;AACtBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,SAAS,EAAE,SAAS;AACpBC,IAAAA,eAAe,EAAEb,KAAK,CAACK,KAAK,CAACS,MAAM,CAACC,WAAW;IAC/CC,YAAY,EAAEhB,KAAK,CAACK,KAAK,CAACM,MAAM,CAACM,MAAM,CAACC,MAAM;AAC9CC,IAAAA,KAAK,EAAE,MAAM;IACbC,UAAU,EAAA,mBAAA,CAAAlB,MAAA,CAAsBF,KAAK,CAACK,KAAK,CAACgB,MAAM,CAACC,QAAQ,CAACC,MAAM,OAAArB,MAAA,CAAIF,KAAK,CAACK,KAAK,CAACgB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAE;AAC1G,IAAA,wBAAwB,EAAE;AACxBZ,MAAAA,eAAe,EAAEb,KAAK,CAAC0B,UAAU,GAC7B1B,KAAK,CAACK,KAAK,CAACS,MAAM,CAACa,WAAW,CAACC,UAAU,CAACC,OAAO,CAACC,KAAK,GACvD9B,KAAK,CAACK,KAAK,CAACS,MAAM,CAACa,WAAW,CAACC,UAAU,CAACG,IAAI,CAAA,SAAA,CAAA;KACnD;AACD,IAAA,gCAAgC,EAAAC,aAAA,CAC3BC,EAAAA,EAAAA,kBAAkB,CAAC;MAAE5B,KAAK,EAAEL,KAAK,CAACK,KAAAA;AAAM,KAAC,CAAC,CAC9C;AACD,IAAA,aAAa,EAAE;AACbG,MAAAA,MAAM,EAAE,aAAA;AACV,KAAA;GACD,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAM0B,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAAC,IAAA,EAIkC;AAAA,EAAA,IAH1DC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,aAAa,GAAAF,IAAA,CAAbE,aAAa;IACbC,UAAU,GAAAH,IAAA,CAAVG,UAAU,CAAA;EAEV,IAAID,aAAa,KAAK,CAAC,EAAE;AACvB,IAAA,OAAO,SAAS,CAAA;AAClB,GAAA;EAEA,IAAIC,UAAU,KAAK,CAAC,EAAE;AACpB,IAAA,OAAO,aAAa,CAAA;AACtB,GAAA;EAEA,IAAIF,MAAM,KAAK,CAAC,EAAE;AAChB,IAAA,OAAO,OAAO,CAAA;AAChB,GAAA;AAEA,EAAA,IAAIA,MAAM,KAAKE,UAAU,GAAG,CAAC,EAAE;AAC7B,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA;AAED,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAAC,KAAA,EAkB0B;AAAA,EAAA,IAAAC,aAAA,CAAA;AAAA,EAAA,IAjBvCC,KAAK,GAAAF,KAAA,CAALE,KAAK;IACLC,UAAU,GAAAH,KAAA,CAAVG,UAAU;IACVC,SAAS,GAAAJ,KAAA,CAATI,SAAS;IACTC,WAAW,GAAAL,KAAA,CAAXK,WAAW;IAAAC,kBAAA,GAAAN,KAAA,CACXO,YAAY;AAAZA,IAAAA,YAAY,GAAAD,kBAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,kBAAA;IACrBE,MAAM,GAAAR,KAAA,CAANQ,MAAM;IACNC,QAAQ,GAAAT,KAAA,CAARS,QAAQ;IACRvB,UAAU,GAAAc,KAAA,CAAVd,UAAU;IACVwB,UAAU,GAAAV,KAAA,CAAVU,UAAU;IACVC,IAAI,GAAAX,KAAA,CAAJW,IAAI;IACJC,MAAM,GAAAZ,KAAA,CAANY,MAAM;IACNC,OAAO,GAAAb,KAAA,CAAPa,OAAO;IACPC,QAAQ,GAAAd,KAAA,CAARc,QAAQ;IAAAC,YAAA,GAAAf,KAAA,CACRJ,MAAM;AAANA,IAAAA,MAAM,GAAAmB,YAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,YAAA;IAAAC,iBAAA,GAAAhB,KAAA,CACViB,WAAW;AAAXA,IAAAA,WAAW,GAAAD,iBAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,iBAAA;IAAAE,mBAAA,GAAAlB,KAAA,CACfH,aAAa;AAAbA,IAAAA,aAAa,GAAAqB,mBAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,mBAAA;AACdC,IAAAA,IAAI,GAAAC,wBAAA,CAAApB,KAAA,EAAAqB,SAAA,CAAA,CAAA;AAEP,EAAA,IAAAC,aAAA,GAKIC,YAAY,EAAE;IAJGzB,UAAU,GAAAwB,aAAA,CAA7BE,iBAAiB;IACjBC,4BAA4B,GAAAH,aAAA,CAA5BG,4BAA4B;IAC5BC,WAAW,GAAAJ,aAAA,CAAXI,WAAW;IACXC,MAAI,GAAAL,aAAA,CAAJK,IAAI,CAAA;AAEN,EAAA,IAAMC,QAAQ,GAAGC,cAAK,CAACC,OAAO,CAC5B,YAAA;AAAA,IAAA,OAAMpC,oBAAoB,CAAC;AAAEE,MAAAA,MAAM,EAANA,MAAM;AAAEC,MAAAA,aAAa,EAAbA,aAAa;AAAEC,MAAAA,UAAU,EAAVA,UAAAA;AAAW,KAAC,CAAC,CAAA;AAAA,GAAA,EACjE,CAACF,MAAM,EAAEC,aAAa,EAAEC,UAAU,CACpC,CAAC,CAAA;AAED,EAAA,IAAMiC,OAAO,GAAGF,cAAK,CAACG,MAAM,CAAiB,IAAI,CAAC,CAAA;AAElD,EAAA,IAAMC,WAAW,GAAGhB,WAAW,KAAK,CAAC,CAAA;AACrC,EAAA,IAAMiB,UAAU,GAAGjB,WAAW,KAAKQ,4BAA4B,GAAG,CAAC,CAAA;EACnE,IAAMU,aAAa,GAAGC,OAAO,CAACzB,IAAI,CAAC,IAAIyB,OAAO,CAACvB,OAAO,CAAC,CAAA;AACvD,EAAA,IAAMwB,UAAU,GAAGX,WAAW,KAAK,UAAU,CAAA;AAC7C,EAAA,IAAMY,QAAQ,GAAGzC,aAAa,GAAG,CAAC,CAAA;AAElC,EAAA,IAAI,KAAO,EAAE;AACX,IAAA,IAAIY,QAAQ,IAAIiB,WAAW,KAAK,YAAY,EAAE;AAC5Ca,MAAAA,eAAe,CAAC;AACdC,QAAAA,OAAO,EAAE,iDAAiD;AAC1DC,QAAAA,UAAU,EAAE,UAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;AAEA,IAAA,IAAI5C,aAAa,IAAI,CAAC,IAAI6B,WAAW,KAAK,YAAY,EAAE;AACtDa,MAAAA,eAAe,CAAC;AACdC,QAAAA,OAAO,EAAE,uEAAuE;AAChFC,QAAAA,UAAU,EAAE,UAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAA;AAEA,EAAA,IAAMC,iBAAiB,gBACrBC,IAAA,CAACC,GAAG,EAAA;AAAC3E,IAAAA,OAAO,EAAC,MAAM;AAAC4E,IAAAA,aAAa,EAAC,KAAK;AAACC,IAAAA,cAAc,EAAC,eAAe;AAACC,IAAAA,GAAG,EAAC,WAAW;IAAAjC,QAAA,EAAA,cACpF6B,IAAA,CAACC,GAAG,EAAA;MAAA9B,QAAA,EAAA,cACFkC,GAAA,CAACC,IAAI,EAAA;AACHtB,QAAAA,IAAI,EAAEuB,oBAAoB,CAACvB,MAAI,CAAC,CAACzB,KAAM;AACvCiD,QAAAA,KAAK,EACHzC,UAAU,GACN,4BAA4B,GAC5BxB,UAAU,GACV,6BAA6B,GAC7BiB,UAAU,KAAVA,IAAAA,IAAAA,UAAU,KAAVA,KAAAA,CAAAA,GAAAA,UAAU,GAAI,0BACnB;AACDiD,QAAAA,MAAM,EAAEd,QAAQ,GAAG,SAAS,GAAG,QAAS;AAAAxB,QAAAA,QAAA,EAEvCZ,KAAAA;AAAK,OACF,CAAC,eACP8C,GAAA,CAACC,IAAI,EAAA;AACHtB,QAAAA,IAAI,EAAEuB,oBAAoB,CAACvB,MAAI,CAAC,CAACvB,SAAU;AAC3CiD,QAAAA,OAAO,EAAC,WAAW;AACnBF,QAAAA,KAAK,EAAEzC,UAAU,GAAG,4BAA4B,GAAG,yBAA0B;AAC7E4C,QAAAA,OAAO,EAAC,SAAS;AAAAxC,QAAAA,QAAA,EAEhBV,SAAAA;AAAS,OACN,CAAC,eACP4C,GAAA,CAACC,IAAI,EAAA;AACHtB,QAAAA,IAAI,EAAEuB,oBAAoB,CAACvB,MAAI,CAAC,CAACtB,WAAY;AAC7C8C,QAAAA,KAAK,EAAEzC,UAAU,GAAG,4BAA4B,GAAG,yBAA0B;AAAAI,QAAAA,QAAA,EAE5ET,WAAAA;AAAW,OACR,CAAC,CAAA;AAAA,KACJ,CAAC,EACLI,QAAQ,gBAAGuC,GAAA,CAACJ,GAAG,EAAA;AAAA9B,MAAAA,QAAA,EAAEL,QAAAA;KAAc,CAAC,GAAG,IAAI,CAAA;AAAA,GACrC,CACN,CAAA;AAED,EAAA,IAAM8C,sBAAsE,GAAG;AAC7EzF,IAAAA,QAAQ,EAAE,WAAW;AACrBC,IAAAA,QAAQ,EAAE,WAAA;GACF,CAAA;EAEV,IAAMyF,cAAc,GAAGhD,MAAM,gBACzBqB,cAAK,CAAC4B,YAAY,CAACjD,MAAM,EAAE;IACzBE,UAAU,EAAEA,UAAU,KAAVA,IAAAA,IAAAA,UAAU,cAAVA,UAAU,GAAIF,MAAM,KAANA,IAAAA,IAAAA,MAAM,wBAAAP,aAAA,GAANO,MAAM,CAAEhD,KAAK,cAAAyC,aAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAbA,aAAA,CAAeS,UAAAA;GAC1C,CAAC,GACFgD,SAAS,CAAA;EAEb,oBACEf,IAAA,CAACgB,OAAO,EAAAnE,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACNvB,IAAAA,OAAO,EAAC,MAAM;AACd4E,IAAAA,aAAa,EAAER,UAAU,GAAG,KAAK,GAAG,QAAS;AAC7CU,IAAAA,GAAG,EAAEa,WAAW,CAACjC,MAAI,CAAE;IACvBkC,SAAS,EAAA,uBAAA,CAAAnG,MAAA,CAA0BkC,MAAM,0BAAAlC,MAAA,CAAuBmC,aAAa,CAAG;AAChFzB,IAAAA,SAAS,EAAEiE,UAAU,GAAG,MAAM,GAAG,QAAS;AAC1CyB,IAAAA,UAAU,EAAEzB,UAAU,GAAGqB,SAAS,GAAG,QAAS;AAC9CK,IAAAA,QAAQ,EAAE1B,UAAU,GAAGqB,SAAS,UAAAhG,MAAA,CAAUsG,QAAQ,CAACC,IAAU,CAAC,KAAK,CAAC,CAAC,EAAU,SAAA,CAAA;AAC/EtF,IAAAA,KAAK,EAAE0D,UAAU,GAAG,MAAM,GAAGqB,SAAU;AACvCQ,IAAAA,IAAI,EAAE7B,UAAU,GAAGqB,SAAS,GAAG,GAAI;AACnCS,IAAAA,OAAO,EAAE9B,UAAU,GAAG,WAAW,GAAG,WAAA;AAAY,GAAA,EAC5C+B,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,QAAAA;AAAS,GAAC,CAAC,CAAA,EAC/CC,sBAAsB,CAACrD,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AAChCsD,IAAAA,GAAG,EAAE1C,OAAQ;IAAAjB,QAAA,EAAA,cAEbkC,GAAA,CAAC0B,QAAQ,EAAA;MACPC,qBAAqB,EAAE,CAAC1C,WAAY;MACpC2C,mBAAmB,EAAE,CAAC1C,UAAW;AACjCN,MAAAA,QAAQ,EAAEA,QAAS;AACnBpB,MAAAA,MAAM,EAAEgD,cAAe;AACvBjD,MAAAA,YAAY,EAAEA,YAAAA;AAAa,KAC5B,CAAC,eACFoC,IAAA,CAACC,GAAG,EAAA;AAACsB,MAAAA,IAAI,EAAC,GAAG;AAACW,MAAAA,WAAW,EAAExC,UAAU,GAAGqB,SAAS,GAAGA,SAAU;MAAA5C,QAAA,EAAA,CAC3DqB,aAAa,gBACZa,GAAA,CAAC9F,wBAAwB,EAAAsC,aAAA,CAAAA,aAAA,CAAA,EAAA,EACnB+D,sBAAsB,CAAA,EAAA,EAAA,EAAA;AAC1BuB,QAAAA,EAAE,EAAEnE,IAAI,GAAG,GAAG,GAAG,QAAS;AAC1BA,QAAAA,IAAI,EAAEA,IAAK;AACXC,QAAAA,MAAM,EAAEA,MAAO;AACf1B,QAAAA,UAAU,EAAEA,UAAW;AACvB2B,QAAAA,OAAO,EAAEA,OAAQ;AACjBkE,QAAAA,QAAQ,EAAErE,UAAW;AAAAI,QAAAA,QAAA,EAEpB4B,iBAAAA;OACuB,CAAA,CAAC,gBAE3BM,GAAA,CAACJ,GAAG,EAAApD,aAAA,CAAAA,aAAA,CAAA,EAAA,EAAK+D,sBAAsB,CAAA,EAAA,EAAA,EAAA;AAAAzC,QAAAA,QAAA,EAAG4B,iBAAAA;AAAiB,OAAA,CAAM,CAC1D,EACA5B,QAAQ,gBACPkC,GAAA,CAACJ,GAAG,EAAA;AAAC7E,QAAAA,QAAQ,EAAC,WAAW;AAACiH,QAAAA,aAAa,EAAC,WAAW;AAAAlE,QAAAA,QAAA,EAChDA,QAAAA;OACE,CAAC,GACJ,IAAI,CAAA;AAAA,KACL,CAAC,CAAA;AAAA,GAAA,CACC,CAAC,CAAA;AAEd,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMyD,QAAQ,gBAAGU,wBAAwB,CAAClF,SAAS,EAAE;EACnDxC,WAAW,EAAE2H,YAAY,CAACX,QAAQ;EAClCjH,WAAW,EAAE4H,YAAY,CAACX,QAAAA;AAC5B,CAAC;;;;"}
|
|
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.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.faded\n : props.theme.colors.interactive.background.gray.default,\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 minWidth,\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\n ? 'surface.text.gray.disabled'\n : isSelected\n ? 'surface.text.primary.normal'\n : titleColor ?? 'surface.text.gray.subtle'\n }\n weight={isNested ? 'regular' : 'medium'}\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 {trailing ? <Box>{trailing}</Box> : null}\n </Box>\n );\n\n const stepItemHeaderPaddings: Omit<InteractiveItemHeaderProps, 'isSelected'> = {\n paddingY: 'spacing.3',\n paddingX: 'spacing.4',\n } as const;\n\n const enhancedMarker = marker\n ? React.cloneElement(marker, {\n isDisabled: isDisabled ?? marker?.props?.isDisabled,\n })\n : undefined;\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 : minWidth ?? `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={enhancedMarker}\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","colors","transparent","borderRadius","radius","medium","width","transition","motion","duration","xquick","easing","standard","isSelected","interactive","background","primary","faded","gray","_objectSpread","getFocusRingStyles","getStepTypeFromIndex","_ref","_index","_nestingLevel","itemsCount","_StepItem","_ref2","_marker$props","title","titleColor","timestamp","description","_ref2$stepProgress","stepProgress","marker","trailing","isDisabled","href","target","onClick","children","_ref2$_index","_ref2$_totalIndex","_totalIndex","_ref2$_nestingLevel","minWidth","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","enhancedMarker","cloneElement","undefined","BaseBox","itemLineGap","className","alignItems","makeSize","sizeTokens","flex","marginX","metaAttribute","name","MetaConstants","StepItem","makeAnalyticsAttribute","ref","StepLine","shouldShowStartBranch","shouldShowEndBranch","marginRight","as","disabled","paddingBottom","assignWithoutSideEffects","componentIds"],"mappings":"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"}
|
|
@@ -22598,6 +22598,10 @@ type StepItemProps = {
|
|
|
22598
22598
|
* Description of StepItem
|
|
22599
22599
|
*/
|
|
22600
22600
|
description?: string;
|
|
22601
|
+
/**
|
|
22602
|
+
* minWidth prop of StepItem
|
|
22603
|
+
*/
|
|
22604
|
+
minWidth?: BoxProps['minWidth'];
|
|
22601
22605
|
/**
|
|
22602
22606
|
* Progress line of step. When its start only starting part is highlighted and rest is kept dotted
|
|
22603
22607
|
*
|
|
@@ -22665,7 +22669,7 @@ type StepItemProps = {
|
|
|
22665
22669
|
*
|
|
22666
22670
|
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}
|
|
22667
22671
|
*/
|
|
22668
|
-
declare const StepItem: ({ title, titleColor, timestamp, description, stepProgress, marker, trailing, isSelected, isDisabled, href, target, onClick, children, _index, _totalIndex, _nestingLevel, ...rest }: StepItemProps) => React__default.ReactElement;
|
|
22672
|
+
declare const StepItem: ({ title, titleColor, timestamp, description, stepProgress, marker, trailing, isSelected, isDisabled, href, target, onClick, children, _index, _totalIndex, _nestingLevel, minWidth, ...rest }: StepItemProps) => React__default.ReactElement;
|
|
22669
22673
|
|
|
22670
22674
|
declare const StepItemIndicator: ({ color }: {
|
|
22671
22675
|
color: IndicatorProps['color'];
|
|
@@ -26560,7 +26564,7 @@ type ListViewFilterProps = {
|
|
|
26560
26564
|
* you only need this if quick filters are controlled.
|
|
26561
26565
|
*/
|
|
26562
26566
|
selectedFiltersCount?: number;
|
|
26563
|
-
} & TestID & DataAnalyticsAttribute
|
|
26567
|
+
} & TestID & DataAnalyticsAttribute;
|
|
26564
26568
|
|
|
26565
26569
|
declare const ListView: ({ testID, children, ...rest }: ListViewProps) => React.ReactElement;
|
|
26566
26570
|
|
|
@@ -14133,6 +14133,10 @@ type StepItemProps = {
|
|
|
14133
14133
|
* Description of StepItem
|
|
14134
14134
|
*/
|
|
14135
14135
|
description?: string;
|
|
14136
|
+
/**
|
|
14137
|
+
* minWidth prop of StepItem
|
|
14138
|
+
*/
|
|
14139
|
+
minWidth?: BoxProps['minWidth'];
|
|
14136
14140
|
/**
|
|
14137
14141
|
* Progress line of step. When its start only starting part is highlighted and rest is kept dotted
|
|
14138
14142
|
*
|
|
@@ -15853,7 +15857,7 @@ type ListViewFilterProps = {
|
|
|
15853
15857
|
* you only need this if quick filters are controlled.
|
|
15854
15858
|
*/
|
|
15855
15859
|
selectedFiltersCount?: number;
|
|
15856
|
-
} & TestID & DataAnalyticsAttribute
|
|
15860
|
+
} & TestID & DataAnalyticsAttribute;
|
|
15857
15861
|
|
|
15858
15862
|
declare const ListView: (_prop: ListViewProps) => React__default.ReactElement;
|
|
15859
15863
|
|