@razorpay/blade 11.14.0 → 11.15.0
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/native/components/Amount/Amount.js.map +1 -1
- package/build/lib/native/components/Box/BaseBox/baseBoxStyles.js +1 -1
- package/build/lib/native/components/Box/BaseBox/baseBoxStyles.js.map +1 -1
- package/build/lib/native/components/Box/BaseBox/types/propsTypes.js.map +1 -1
- package/build/lib/native/components/Box/Box.js +1 -1
- package/build/lib/native/components/Box/Box.js.map +1 -1
- package/build/lib/native/components/Box/styledProps/getStyledProps.js +1 -1
- package/build/lib/native/components/Box/styledProps/getStyledProps.js.map +1 -1
- package/build/lib/native/components/Indicator/Indicator.js +1 -1
- package/build/lib/native/components/Indicator/Indicator.js.map +1 -1
- package/build/lib/native/components/StepGroup/StepGroup.native.js +17 -0
- package/build/lib/native/components/StepGroup/StepGroup.native.js.map +1 -0
- package/build/lib/native/components/StepGroup/StepGroupContext.js +6 -0
- package/build/lib/native/components/StepGroup/StepGroupContext.js.map +1 -0
- package/build/lib/native/components/StepGroup/StepItem.native.js +17 -0
- package/build/lib/native/components/StepGroup/StepItem.native.js.map +1 -0
- package/build/lib/native/components/StepGroup/StepItemMarker.js +15 -0
- package/build/lib/native/components/StepGroup/StepItemMarker.js.map +1 -0
- package/build/lib/native/components/StepGroup/tokens.js +8 -0
- package/build/lib/native/components/StepGroup/tokens.js.map +1 -0
- package/build/lib/native/components/index.js +3 -0
- package/build/lib/native/components/index.js.map +1 -1
- package/build/lib/native/tokens/global/size.js +1 -1
- package/build/lib/native/tokens/global/size.js.map +1 -1
- package/build/lib/native/utils/metaAttribute/metaConstants.js +1 -1
- package/build/lib/native/utils/metaAttribute/metaConstants.js.map +1 -1
- package/build/lib/web/development/components/Amount/Amount.js +7 -2
- package/build/lib/web/development/components/Amount/Amount.js.map +1 -1
- package/build/lib/web/development/components/Box/BaseBox/baseBoxStyles.js +17 -5
- package/build/lib/web/development/components/Box/BaseBox/baseBoxStyles.js.map +1 -1
- package/build/lib/web/development/components/Box/BaseBox/types/propsTypes.js.map +1 -1
- package/build/lib/web/development/components/Box/Box.js +5 -0
- package/build/lib/web/development/components/Box/Box.js.map +1 -1
- package/build/lib/web/development/components/Box/styledProps/getStyledProps.js +2 -1
- package/build/lib/web/development/components/Box/styledProps/getStyledProps.js.map +1 -1
- package/build/lib/web/development/components/Indicator/Indicator.js +1 -1
- package/build/lib/web/development/components/Indicator/Indicator.js.map +1 -1
- package/build/lib/web/development/components/StepGroup/StepGroup.web.js +138 -0
- package/build/lib/web/development/components/StepGroup/StepGroup.web.js.map +1 -0
- package/build/lib/web/development/components/StepGroup/StepGroupContext.js +15 -0
- package/build/lib/web/development/components/StepGroup/StepGroupContext.js.map +1 -0
- package/build/lib/web/development/components/StepGroup/StepItem.web.js +224 -0
- package/build/lib/web/development/components/StepGroup/StepItem.web.js.map +1 -0
- package/build/lib/web/development/components/StepGroup/StepItemMarker.js +65 -0
- package/build/lib/web/development/components/StepGroup/StepItemMarker.js.map +1 -0
- package/build/lib/web/development/components/StepGroup/StepLine.web.js +336 -0
- package/build/lib/web/development/components/StepGroup/StepLine.web.js.map +1 -0
- package/build/lib/web/development/components/StepGroup/componentIds.js +7 -0
- package/build/lib/web/development/components/StepGroup/componentIds.js.map +1 -0
- package/build/lib/web/development/components/StepGroup/index.js +4 -0
- package/build/lib/web/development/components/StepGroup/index.js.map +1 -0
- package/build/lib/web/development/components/StepGroup/tokens.js +62 -0
- package/build/lib/web/development/components/StepGroup/tokens.js.map +1 -0
- package/build/lib/web/development/components/index.js +4 -0
- package/build/lib/web/development/components/index.js.map +1 -1
- package/build/lib/web/development/tokens/global/size.js +4 -0
- package/build/lib/web/development/tokens/global/size.js.map +1 -1
- package/build/lib/web/development/utils/metaAttribute/metaConstants.js +3 -1
- package/build/lib/web/development/utils/metaAttribute/metaConstants.js.map +1 -1
- package/build/lib/web/development/utils/omitPropsFromHTML/index.js +1 -1
- package/build/lib/web/development/utils/omitPropsFromHTML/index.js.map +1 -1
- package/build/lib/web/production/components/Amount/Amount.js +7 -2
- package/build/lib/web/production/components/Amount/Amount.js.map +1 -1
- package/build/lib/web/production/components/Box/BaseBox/baseBoxStyles.js +17 -5
- package/build/lib/web/production/components/Box/BaseBox/baseBoxStyles.js.map +1 -1
- package/build/lib/web/production/components/Box/BaseBox/types/propsTypes.js.map +1 -1
- package/build/lib/web/production/components/Box/Box.js +5 -0
- package/build/lib/web/production/components/Box/Box.js.map +1 -1
- package/build/lib/web/production/components/Box/styledProps/getStyledProps.js +2 -1
- package/build/lib/web/production/components/Box/styledProps/getStyledProps.js.map +1 -1
- package/build/lib/web/production/components/Indicator/Indicator.js +1 -1
- package/build/lib/web/production/components/Indicator/Indicator.js.map +1 -1
- package/build/lib/web/production/components/StepGroup/StepGroup.web.js +138 -0
- package/build/lib/web/production/components/StepGroup/StepGroup.web.js.map +1 -0
- package/build/lib/web/production/components/StepGroup/StepGroupContext.js +15 -0
- package/build/lib/web/production/components/StepGroup/StepGroupContext.js.map +1 -0
- package/build/lib/web/production/components/StepGroup/StepItem.web.js +224 -0
- package/build/lib/web/production/components/StepGroup/StepItem.web.js.map +1 -0
- package/build/lib/web/production/components/StepGroup/StepItemMarker.js +65 -0
- package/build/lib/web/production/components/StepGroup/StepItemMarker.js.map +1 -0
- package/build/lib/web/production/components/StepGroup/StepLine.web.js +336 -0
- package/build/lib/web/production/components/StepGroup/StepLine.web.js.map +1 -0
- package/build/lib/web/production/components/StepGroup/componentIds.js +7 -0
- package/build/lib/web/production/components/StepGroup/componentIds.js.map +1 -0
- package/build/lib/web/production/components/StepGroup/index.js +4 -0
- package/build/lib/web/production/components/StepGroup/index.js.map +1 -0
- package/build/lib/web/production/components/StepGroup/tokens.js +62 -0
- package/build/lib/web/production/components/StepGroup/tokens.js.map +1 -0
- package/build/lib/web/production/components/index.js +4 -0
- package/build/lib/web/production/components/index.js.map +1 -1
- package/build/lib/web/production/tokens/global/size.js +4 -0
- package/build/lib/web/production/tokens/global/size.js.map +1 -1
- package/build/lib/web/production/utils/metaAttribute/metaConstants.js +3 -1
- package/build/lib/web/production/utils/metaAttribute/metaConstants.js.map +1 -1
- package/build/lib/web/production/utils/omitPropsFromHTML/index.js +1 -1
- package/build/lib/web/production/utils/omitPropsFromHTML/index.js.map +1 -1
- package/build/types/components/index.d.ts +1905 -81
- package/build/types/components/index.native.d.ts +944 -94
- package/build/types/tokens/index.d.ts +4 -0
- package/build/types/tokens/index.native.d.ts +4 -0
- package/package.json +3 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"baseBoxStyles.js","sources":["../../../../../../../src/components/Box/BaseBox/baseBoxStyles.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-ts-expect-error */\n/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport type { CSSObject } from 'styled-components';\nimport type {\n BaseBoxProps,\n MakeValueResponsive,\n SpacingValueType,\n ArrayOfMaxLength4,\n} from './types';\nimport { getResponsiveValue } from './getResponsiveValue';\nimport getIn from '~utils/lodashButBetter/get';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { Breakpoints } from '~tokens/global';\nimport { breakpoints } from '~tokens/global';\nimport { isReactNative, getMediaQuery } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeBorderSize } from '~utils/makeBorderSize';\nimport type { DotNotationSpacingStringToken } from '~utils/types';\n\nconst isSpacingToken = (value: string): value is DotNotationSpacingStringToken => {\n return typeof value === 'string' && value.startsWith('spacing.');\n};\n\nconst getSpacingValue = (\n spacingValue:\n | MakeValueResponsive<SpacingValueType | ArrayOfMaxLength4<SpacingValueType>>\n | undefined,\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string | undefined => {\n if (isEmpty(spacingValue)) {\n return undefined;\n }\n\n const responsiveSpacingValue = getResponsiveValue(\n spacingValue as MakeValueResponsive<SpacingValueType | SpacingValueType[]>,\n breakpoint,\n );\n\n if (isEmpty(responsiveSpacingValue)) {\n return undefined;\n }\n\n if (responsiveSpacingValue === 'auto') {\n return responsiveSpacingValue;\n }\n\n if (Array.isArray(responsiveSpacingValue)) {\n return responsiveSpacingValue.map((value) => getSpacingValue(value, theme)).join(' ');\n }\n\n if (isSpacingToken(responsiveSpacingValue)) {\n const spacingReturnValue = getIn(theme, responsiveSpacingValue);\n return isEmpty(spacingReturnValue) ? makeSpace(spacingReturnValue!) : undefined;\n }\n\n // pixel or with unit values\n return responsiveSpacingValue;\n};\n\nconst getColorValue = (\n color: BaseBoxProps['backgroundColor'] | BaseBoxProps['borderColor'],\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string => {\n const responsiveBackgroundValue = getResponsiveValue(color, breakpoint);\n // @ts-expect-error: We always return any from getResponsiveValue so value can't be inferred here\n const tokenValue = getIn(theme, `colors.${responsiveBackgroundValue}`);\n return tokenValue ?? responsiveBackgroundValue;\n};\n\nconst getBorderRadiusValue = (\n borderRadius: BaseBoxProps['borderRadius'],\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string | undefined => {\n const responsiveBorderRadiusValue = getResponsiveValue(borderRadius, breakpoint);\n return isEmpty(responsiveBorderRadiusValue)\n ? undefined\n : // @ts-ignore: intentionally set to any since figuring out types of responsive props is complex\n makeBorderSize(getIn(theme, `border.radius.${responsiveBorderRadiusValue}`));\n};\n\nconst getBorderWidthValue = (\n borderWidth: BaseBoxProps['borderWidth'],\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string | undefined => {\n const responsiveBorderWidthValue = getResponsiveValue(borderWidth, breakpoint);\n return isEmpty(responsiveBorderWidthValue)\n ? undefined\n : // @ts-ignore: intentionally set to any since figuring out types of responsive props is complex\n makeBorderSize(getIn(theme, `border.width.${responsiveBorderWidthValue}`));\n};\n\nexport const getElevationValue = (\n elevation: BaseBoxProps['elevation'],\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string | undefined => {\n const responsiveElevationValue = getResponsiveValue(elevation, breakpoint);\n return isEmpty(responsiveElevationValue)\n ? undefined\n : // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n // @ts-ignore: intentionally set to any since figuring out types of responsive props is complex\n getIn(theme, `elevation.${responsiveElevationValue!}`);\n};\n\nconst getAllProps = (\n props: BaseBoxProps & { theme: Theme },\n breakpoint?: keyof Breakpoints,\n): CSSObject => {\n const hasBorder = props.borderWidth || props.borderColor;\n const hasBorderRight = props.borderRight || props.borderRightColor || props.borderRightWidth;\n const hasBorderLeft = props.borderLeft || props.borderLeftColor || props.borderLeftWidth;\n const hasBorderTop = props.borderTop || props.borderTopColor || props.borderTopWidth;\n const hasBorderBottom = props.borderBottom || props.borderBottomColor || props.borderBottomWidth;\n\n return {\n display: getResponsiveValue(props.display, breakpoint),\n overflow: getResponsiveValue(props.overflow, breakpoint),\n overflowX: getResponsiveValue(props.overflowX, breakpoint),\n overflowY: getResponsiveValue(props.overflowY, breakpoint),\n textAlign: getResponsiveValue(props.textAlign, breakpoint),\n whiteSpace: getResponsiveValue(props.whiteSpace, breakpoint),\n\n // Flex\n flex: getResponsiveValue(props.flex, breakpoint),\n flexWrap: getResponsiveValue(props.flexWrap, breakpoint),\n flexDirection: getResponsiveValue(props.flexDirection, breakpoint),\n flexGrow: getResponsiveValue(props.flexGrow, breakpoint),\n flexShrink: getResponsiveValue(props.flexShrink, breakpoint),\n flexBasis: getResponsiveValue(props.flexBasis, breakpoint),\n alignItems: getResponsiveValue(props.alignItems, breakpoint),\n alignContent: getResponsiveValue(props.alignContent, breakpoint),\n alignSelf: getResponsiveValue(props.alignSelf, breakpoint),\n justifyItems: getResponsiveValue(props.justifyItems, breakpoint),\n justifyContent: getResponsiveValue(props.justifyContent, breakpoint),\n justifySelf: getResponsiveValue(props.justifySelf, breakpoint),\n placeSelf: getResponsiveValue(props.placeSelf, breakpoint),\n placeItems: getResponsiveValue(props.placeItems, breakpoint),\n order: getResponsiveValue(props.order, breakpoint),\n position: getResponsiveValue(props.position, breakpoint),\n zIndex: getResponsiveValue(props.zIndex, breakpoint),\n\n // Grid\n grid: getResponsiveValue(props.grid, breakpoint),\n gridColumn: getResponsiveValue(props.gridColumn, breakpoint),\n gridRow: getResponsiveValue(props.gridRow, breakpoint),\n gridRowStart: getResponsiveValue(props.gridRowStart, breakpoint),\n gridRowEnd: getResponsiveValue(props.gridRowEnd, breakpoint),\n gridArea: getResponsiveValue(props.gridArea, breakpoint),\n gridAutoFlow: getResponsiveValue(props.gridAutoFlow, breakpoint),\n gridAutoRows: getResponsiveValue(props.gridAutoRows, breakpoint),\n gridAutoColumns: getResponsiveValue(props.gridAutoColumns, breakpoint),\n gridTemplate: getResponsiveValue(props.gridTemplate, breakpoint),\n gridTemplateAreas: getResponsiveValue(props.gridTemplateAreas, breakpoint),\n gridTemplateColumns: getResponsiveValue(props.gridTemplateColumns, breakpoint),\n gridTemplateRows: getResponsiveValue(props.gridTemplateRows, breakpoint),\n\n // Spacing Props\n padding: getSpacingValue(props.padding, props.theme, breakpoint),\n paddingTop: getSpacingValue(props.paddingTop ?? props.paddingY, props.theme, breakpoint),\n paddingBottom: getSpacingValue(props.paddingBottom ?? props.paddingY, props.theme, breakpoint),\n paddingRight: getSpacingValue(props.paddingRight ?? props.paddingX, props.theme, breakpoint),\n paddingLeft: getSpacingValue(props.paddingLeft ?? props.paddingX, props.theme, breakpoint),\n margin: getSpacingValue(props.margin, props.theme, breakpoint),\n marginBottom: getSpacingValue(props.marginBottom ?? props.marginY, props.theme, breakpoint),\n marginTop: getSpacingValue(props.marginTop ?? props.marginY, props.theme, breakpoint),\n marginRight: getSpacingValue(props.marginRight ?? props.marginX, props.theme, breakpoint),\n marginLeft: getSpacingValue(props.marginLeft ?? props.marginX, props.theme, breakpoint),\n height: getSpacingValue(props.height, props.theme, breakpoint),\n minHeight: getSpacingValue(props.minHeight, props.theme, breakpoint),\n maxHeight: getSpacingValue(props.maxHeight, props.theme, breakpoint),\n width: getSpacingValue(props.width, props.theme, breakpoint),\n minWidth: getSpacingValue(props.minWidth, props.theme, breakpoint),\n maxWidth: getSpacingValue(props.maxWidth, props.theme, breakpoint),\n gap: getSpacingValue(props.gap, props.theme, breakpoint),\n rowGap: getSpacingValue(props.rowGap, props.theme, breakpoint),\n columnGap: getSpacingValue(props.columnGap, props.theme, breakpoint),\n top: getSpacingValue(props.top, props.theme, breakpoint),\n right: getSpacingValue(props.right, props.theme, breakpoint),\n bottom: getSpacingValue(props.bottom, props.theme, breakpoint),\n left: getSpacingValue(props.left, props.theme, breakpoint),\n\n // Visual props\n backgroundColor: getColorValue(props.backgroundColor, props.theme, breakpoint),\n backgroundImage: getResponsiveValue(props.backgroundImage, breakpoint),\n backgroundSize: getResponsiveValue(props.backgroundSize, breakpoint),\n backgroundPosition: getResponsiveValue(props.backgroundPosition, breakpoint),\n backgroundOrigin: getResponsiveValue(props.backgroundOrigin, breakpoint),\n backgroundRepeat: getResponsiveValue(props.backgroundRepeat, breakpoint),\n borderRadius: getBorderRadiusValue(props.borderRadius, props.theme, breakpoint),\n lineHeight: getSpacingValue(props.lineHeight, props.theme, breakpoint),\n border: getResponsiveValue(props.border, breakpoint),\n borderTop: getResponsiveValue(props.borderTop, breakpoint),\n borderRight: getResponsiveValue(props.borderRight, breakpoint),\n borderBottom: getResponsiveValue(props.borderBottom, breakpoint),\n borderLeft: getResponsiveValue(props.borderLeft, breakpoint),\n borderWidth: getBorderWidthValue(props.borderWidth, props.theme, breakpoint),\n borderColor: getColorValue(props.borderColor, props.theme, breakpoint),\n borderTopWidth: getBorderWidthValue(props.borderTopWidth, props.theme, breakpoint),\n borderTopColor: getColorValue(props.borderTopColor, props.theme, breakpoint),\n borderRightWidth: getBorderWidthValue(props.borderRightWidth, props.theme, breakpoint),\n borderRightColor: getColorValue(props.borderRightColor, props.theme, breakpoint),\n borderBottomWidth: getBorderWidthValue(props.borderBottomWidth, props.theme, breakpoint),\n borderBottomColor: getColorValue(props.borderBottomColor, props.theme, breakpoint),\n borderLeftWidth: getBorderWidthValue(props.borderLeftWidth, props.theme, breakpoint),\n borderLeftColor: getColorValue(props.borderLeftColor, props.theme, breakpoint),\n borderTopLeftRadius: getBorderRadiusValue(props.borderTopLeftRadius, props.theme, breakpoint),\n borderTopRightRadius: getBorderRadiusValue(props.borderTopRightRadius, props.theme, breakpoint),\n borderBottomRightRadius: getBorderRadiusValue(\n props.borderBottomRightRadius,\n props.theme,\n breakpoint,\n ),\n borderBottomLeftRadius: getBorderRadiusValue(\n props.borderBottomLeftRadius,\n props.theme,\n breakpoint,\n ),\n borderStyle: hasBorder ? 'solid' : undefined,\n cursor: getResponsiveValue(props.cursor, breakpoint),\n // Since we only allow 'solid', we can use the same value for all borders if hasBorder is true\n // If hasBorder is false, we need to check each border individually\n ...(!hasBorder && {\n borderTopStyle: hasBorderTop ? 'solid' : undefined,\n borderBottomStyle: hasBorderBottom ? 'solid' : undefined,\n borderLeftStyle: hasBorderLeft ? 'solid' : undefined,\n borderRightStyle: hasBorderRight ? 'solid' : undefined,\n }),\n\n touchAction: getResponsiveValue(props.touchAction, breakpoint),\n userSelect: getResponsiveValue(props.userSelect, breakpoint),\n pointerEvents: getResponsiveValue(props.pointerEvents),\n opacity: getResponsiveValue(props.opacity, breakpoint),\n visibility: getResponsiveValue(props.visibility, breakpoint),\n ...(!isReactNative() && {\n boxShadow: getElevationValue(props.elevation, props.theme, breakpoint),\n }),\n\n // Polygon support\n transform: getResponsiveValue(props.transform as string, breakpoint),\n transformOrigin: getResponsiveValue(props.transformOrigin, breakpoint),\n clipPath: getResponsiveValue(props.clipPath, breakpoint),\n };\n};\n\n/** We only add breakpoint if at least one of the value is defined */\nconst shouldAddBreakpoint = (cssProps: CSSObject): boolean => {\n const firstDefinedValue = Object.values(cssProps).find(\n (cssValue) => cssValue !== undefined && cssValue !== null,\n );\n\n return firstDefinedValue !== undefined;\n};\n\nconst getAllMediaQueries = (props: BaseBoxProps & { theme: Theme }): CSSObject => {\n if (isReactNative()) {\n return {};\n }\n\n const { base, ...breakpointsWithoutBase } = breakpoints;\n\n return Object.fromEntries(\n Object.entries(breakpointsWithoutBase).map(([breakpointKey, breakpointValue]) => {\n const cssPropsForCurrentBreakpoint = getAllProps(props, breakpointKey as keyof Breakpoints);\n if (!shouldAddBreakpoint(cssPropsForCurrentBreakpoint)) {\n return [];\n }\n\n const mediaQuery = `@media ${getMediaQuery({ min: breakpointValue })}`;\n return [mediaQuery, cssPropsForCurrentBreakpoint];\n }),\n );\n};\n\nconst getBaseBoxStyles = (props: BaseBoxProps & { theme: Theme }): CSSObject => {\n return {\n ...getAllProps(props),\n ...getAllMediaQueries(props),\n };\n};\n\nexport {\n getBaseBoxStyles,\n getSpacingValue,\n getColorValue,\n getBorderRadiusValue,\n shouldAddBreakpoint,\n getAllMediaQueries,\n getAllProps,\n};\n"],"names":["isSpacingToken","value","startsWith","getSpacingValue","spacingValue","theme","breakpoint","isEmpty","undefined","responsiveSpacingValue","getResponsiveValue","Array","isArray","map","join","spacingReturnValue","getIn","makeSpace","getColorValue","color","responsiveBackgroundValue","tokenValue","concat","getBorderRadiusValue","borderRadius","responsiveBorderRadiusValue","makeBorderSize","getBorderWidthValue","borderWidth","responsiveBorderWidthValue","getElevationValue","elevation","responsiveElevationValue","getAllProps","props","_props$paddingTop","_props$paddingBottom","_props$paddingRight","_props$paddingLeft","_props$marginBottom","_props$marginTop","_props$marginRight","_props$marginLeft","hasBorder","borderColor","hasBorderRight","borderRight","borderRightColor","borderRightWidth","hasBorderLeft","borderLeft","borderLeftColor","borderLeftWidth","hasBorderTop","borderTop","borderTopColor","borderTopWidth","hasBorderBottom","borderBottom","borderBottomColor","borderBottomWidth","_objectSpread","display","overflow","overflowX","overflowY","textAlign","whiteSpace","flex","flexWrap","flexDirection","flexGrow","flexShrink","flexBasis","alignItems","alignContent","alignSelf","justifyItems","justifyContent","justifySelf","placeSelf","placeItems","order","position","zIndex","grid","gridColumn","gridRow","gridRowStart","gridRowEnd","gridArea","gridAutoFlow","gridAutoRows","gridAutoColumns","gridTemplate","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","padding","paddingTop","paddingY","paddingBottom","paddingRight","paddingX","paddingLeft","margin","marginBottom","marginY","marginTop","marginRight","marginX","marginLeft","height","minHeight","maxHeight","width","minWidth","maxWidth","gap","rowGap","columnGap","top","right","bottom","left","backgroundColor","backgroundImage","backgroundSize","backgroundPosition","backgroundOrigin","backgroundRepeat","lineHeight","border","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","borderStyle","cursor","borderTopStyle","borderBottomStyle","borderLeftStyle","borderRightStyle","touchAction","userSelect","pointerEvents","opacity","visibility","isReactNative","boxShadow","transform","transformOrigin","clipPath","shouldAddBreakpoint","cssProps","firstDefinedValue","Object","values","find","cssValue","getAllMediaQueries","base","breakpoints","breakpointsWithoutBase","_objectWithoutProperties","_excluded","fromEntries","entries","_ref","_ref2","_slicedToArray","breakpointKey","breakpointValue","cssPropsForCurrentBreakpoint","mediaQuery","getMediaQuery","min","getBaseBoxStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"baseBoxStyles.js","sources":["../../../../../../../src/components/Box/BaseBox/baseBoxStyles.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-ts-expect-error */\n/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport type { CSSObject } from 'styled-components';\nimport type {\n BaseBoxProps,\n MakeValueResponsive,\n SpacingValueType,\n ArrayOfMaxLength4,\n} from './types';\nimport { getResponsiveValue } from './getResponsiveValue';\nimport getIn from '~utils/lodashButBetter/get';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { Breakpoints } from '~tokens/global';\nimport { breakpoints } from '~tokens/global';\nimport { isReactNative, getMediaQuery } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeBorderSize } from '~utils/makeBorderSize';\nimport type { DotNotationSpacingStringToken } from '~utils/types';\n\nconst isSpacingToken = (value: string): value is DotNotationSpacingStringToken => {\n return typeof value === 'string' && value.startsWith('spacing.');\n};\n\nconst getSpacingValue = (\n spacingValue:\n | MakeValueResponsive<SpacingValueType | ArrayOfMaxLength4<SpacingValueType>>\n | undefined,\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string | undefined => {\n if (isEmpty(spacingValue)) {\n return undefined;\n }\n\n const responsiveSpacingValue = getResponsiveValue(\n spacingValue as MakeValueResponsive<SpacingValueType | SpacingValueType[]>,\n breakpoint,\n );\n\n if (isEmpty(responsiveSpacingValue)) {\n return undefined;\n }\n\n if (responsiveSpacingValue === 'auto') {\n return responsiveSpacingValue;\n }\n\n if (Array.isArray(responsiveSpacingValue)) {\n return responsiveSpacingValue.map((value) => getSpacingValue(value, theme)).join(' ');\n }\n\n if (isSpacingToken(responsiveSpacingValue)) {\n const spacingReturnValue = getIn(theme, responsiveSpacingValue);\n return isEmpty(spacingReturnValue) ? makeSpace(spacingReturnValue!) : undefined;\n }\n\n // pixel or with unit values\n return responsiveSpacingValue;\n};\n\nconst getColorValue = (\n color: BaseBoxProps['backgroundColor'] | BaseBoxProps['borderColor'],\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string => {\n const responsiveBackgroundValue = getResponsiveValue(color, breakpoint);\n // @ts-expect-error: We always return any from getResponsiveValue so value can't be inferred here\n const tokenValue = getIn(theme, `colors.${responsiveBackgroundValue}`);\n return tokenValue ?? responsiveBackgroundValue;\n};\n\nconst getBorderRadiusValue = (\n borderRadius: BaseBoxProps['borderRadius'],\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string | undefined => {\n const responsiveBorderRadiusValue = getResponsiveValue(borderRadius, breakpoint);\n return isEmpty(responsiveBorderRadiusValue)\n ? undefined\n : // @ts-ignore: intentionally set to any since figuring out types of responsive props is complex\n makeBorderSize(getIn(theme, `border.radius.${responsiveBorderRadiusValue}`));\n};\n\nconst getBorderWidthValue = (\n borderWidth: BaseBoxProps['borderWidth'],\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string | undefined => {\n const responsiveBorderWidthValue = getResponsiveValue(borderWidth, breakpoint);\n return isEmpty(responsiveBorderWidthValue)\n ? undefined\n : // @ts-ignore: intentionally set to any since figuring out types of responsive props is complex\n makeBorderSize(getIn(theme, `border.width.${responsiveBorderWidthValue}`));\n};\n\nexport const getElevationValue = (\n elevation: BaseBoxProps['elevation'],\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string | undefined => {\n const responsiveElevationValue = getResponsiveValue(elevation, breakpoint);\n return isEmpty(responsiveElevationValue)\n ? undefined\n : // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n // @ts-ignore: intentionally set to any since figuring out types of responsive props is complex\n getIn(theme, `elevation.${responsiveElevationValue!}`);\n};\n\ntype GetBorderStyleValueReturnType =\n | CSSObject['borderStyle']\n | CSSObject['borderTopStyle']\n | CSSObject['borderBottomStyle']\n | CSSObject['borderLeftStyle']\n | CSSObject['borderRightStyle'];\nconst getBorderStyleValue = (\n borderStyle: BaseBoxProps['borderStyle'],\n breakpoint?: keyof Breakpoints,\n hasBorder?: boolean,\n // Using any as return type because borderStyle's type is incompatible with borderBottomStyle. There are ways to fix it but anyway since its internal function. Taking an easy way out\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): GetBorderStyleValueReturnType => {\n if (borderStyle) {\n return getResponsiveValue(borderStyle, breakpoint);\n }\n\n if (hasBorder) {\n return 'solid';\n }\n\n return undefined;\n};\n\nconst getAllProps = (\n props: BaseBoxProps & { theme: Theme },\n breakpoint?: keyof Breakpoints,\n): CSSObject => {\n const hasBorder = props.borderWidth || props.borderColor;\n const hasBorderRight = props.borderRight || props.borderRightColor || props.borderRightWidth;\n const hasBorderLeft = props.borderLeft || props.borderLeftColor || props.borderLeftWidth;\n const hasBorderTop = props.borderTop || props.borderTopColor || props.borderTopWidth;\n const hasBorderBottom = props.borderBottom || props.borderBottomColor || props.borderBottomWidth;\n\n return {\n display: getResponsiveValue(props.display, breakpoint),\n overflow: getResponsiveValue(props.overflow, breakpoint),\n overflowX: getResponsiveValue(props.overflowX, breakpoint),\n overflowY: getResponsiveValue(props.overflowY, breakpoint),\n textAlign: getResponsiveValue(props.textAlign, breakpoint),\n whiteSpace: getResponsiveValue(props.whiteSpace, breakpoint),\n\n // Flex\n flex: getResponsiveValue(props.flex, breakpoint),\n flexWrap: getResponsiveValue(props.flexWrap, breakpoint),\n flexDirection: getResponsiveValue(props.flexDirection, breakpoint),\n flexGrow: getResponsiveValue(props.flexGrow, breakpoint),\n flexShrink: getResponsiveValue(props.flexShrink, breakpoint),\n flexBasis: getResponsiveValue(props.flexBasis, breakpoint),\n alignItems: getResponsiveValue(props.alignItems, breakpoint),\n alignContent: getResponsiveValue(props.alignContent, breakpoint),\n alignSelf: getResponsiveValue(props.alignSelf, breakpoint),\n justifyItems: getResponsiveValue(props.justifyItems, breakpoint),\n justifyContent: getResponsiveValue(props.justifyContent, breakpoint),\n justifySelf: getResponsiveValue(props.justifySelf, breakpoint),\n placeSelf: getResponsiveValue(props.placeSelf, breakpoint),\n placeItems: getResponsiveValue(props.placeItems, breakpoint),\n order: getResponsiveValue(props.order, breakpoint),\n position: getResponsiveValue(props.position, breakpoint),\n zIndex: getResponsiveValue(props.zIndex, breakpoint),\n\n // Grid\n grid: getResponsiveValue(props.grid, breakpoint),\n gridColumn: getResponsiveValue(props.gridColumn, breakpoint),\n gridRow: getResponsiveValue(props.gridRow, breakpoint),\n gridRowStart: getResponsiveValue(props.gridRowStart, breakpoint),\n gridRowEnd: getResponsiveValue(props.gridRowEnd, breakpoint),\n gridArea: getResponsiveValue(props.gridArea, breakpoint),\n gridAutoFlow: getResponsiveValue(props.gridAutoFlow, breakpoint),\n gridAutoRows: getResponsiveValue(props.gridAutoRows, breakpoint),\n gridAutoColumns: getResponsiveValue(props.gridAutoColumns, breakpoint),\n gridTemplate: getResponsiveValue(props.gridTemplate, breakpoint),\n gridTemplateAreas: getResponsiveValue(props.gridTemplateAreas, breakpoint),\n gridTemplateColumns: getResponsiveValue(props.gridTemplateColumns, breakpoint),\n gridTemplateRows: getResponsiveValue(props.gridTemplateRows, breakpoint),\n\n // Spacing Props\n padding: getSpacingValue(props.padding, props.theme, breakpoint),\n paddingTop: getSpacingValue(props.paddingTop ?? props.paddingY, props.theme, breakpoint),\n paddingBottom: getSpacingValue(props.paddingBottom ?? props.paddingY, props.theme, breakpoint),\n paddingRight: getSpacingValue(props.paddingRight ?? props.paddingX, props.theme, breakpoint),\n paddingLeft: getSpacingValue(props.paddingLeft ?? props.paddingX, props.theme, breakpoint),\n margin: getSpacingValue(props.margin, props.theme, breakpoint),\n marginBottom: getSpacingValue(props.marginBottom ?? props.marginY, props.theme, breakpoint),\n marginTop: getSpacingValue(props.marginTop ?? props.marginY, props.theme, breakpoint),\n marginRight: getSpacingValue(props.marginRight ?? props.marginX, props.theme, breakpoint),\n marginLeft: getSpacingValue(props.marginLeft ?? props.marginX, props.theme, breakpoint),\n height: getSpacingValue(props.height, props.theme, breakpoint),\n minHeight: getSpacingValue(props.minHeight, props.theme, breakpoint),\n maxHeight: getSpacingValue(props.maxHeight, props.theme, breakpoint),\n width: getSpacingValue(props.width, props.theme, breakpoint),\n minWidth: getSpacingValue(props.minWidth, props.theme, breakpoint),\n maxWidth: getSpacingValue(props.maxWidth, props.theme, breakpoint),\n gap: getSpacingValue(props.gap, props.theme, breakpoint),\n rowGap: getSpacingValue(props.rowGap, props.theme, breakpoint),\n columnGap: getSpacingValue(props.columnGap, props.theme, breakpoint),\n top: getSpacingValue(props.top, props.theme, breakpoint),\n right: getSpacingValue(props.right, props.theme, breakpoint),\n bottom: getSpacingValue(props.bottom, props.theme, breakpoint),\n left: getSpacingValue(props.left, props.theme, breakpoint),\n\n // Visual props\n backgroundColor: getColorValue(props.backgroundColor, props.theme, breakpoint),\n backgroundImage: getResponsiveValue(props.backgroundImage, breakpoint),\n backgroundSize: getResponsiveValue(props.backgroundSize, breakpoint),\n backgroundPosition: getResponsiveValue(props.backgroundPosition, breakpoint),\n backgroundOrigin: getResponsiveValue(props.backgroundOrigin, breakpoint),\n backgroundRepeat: getResponsiveValue(props.backgroundRepeat, breakpoint),\n borderRadius: getBorderRadiusValue(props.borderRadius, props.theme, breakpoint),\n lineHeight: getSpacingValue(props.lineHeight, props.theme, breakpoint),\n border: getResponsiveValue(props.border, breakpoint),\n borderTop: getResponsiveValue(props.borderTop, breakpoint),\n borderRight: getResponsiveValue(props.borderRight, breakpoint),\n borderBottom: getResponsiveValue(props.borderBottom, breakpoint),\n borderLeft: getResponsiveValue(props.borderLeft, breakpoint),\n borderWidth: getBorderWidthValue(props.borderWidth, props.theme, breakpoint),\n borderColor: getColorValue(props.borderColor, props.theme, breakpoint),\n borderTopWidth: getBorderWidthValue(props.borderTopWidth, props.theme, breakpoint),\n borderTopColor: getColorValue(props.borderTopColor, props.theme, breakpoint),\n borderRightWidth: getBorderWidthValue(props.borderRightWidth, props.theme, breakpoint),\n borderRightColor: getColorValue(props.borderRightColor, props.theme, breakpoint),\n borderBottomWidth: getBorderWidthValue(props.borderBottomWidth, props.theme, breakpoint),\n borderBottomColor: getColorValue(props.borderBottomColor, props.theme, breakpoint),\n borderLeftWidth: getBorderWidthValue(props.borderLeftWidth, props.theme, breakpoint),\n borderLeftColor: getColorValue(props.borderLeftColor, props.theme, breakpoint),\n borderTopLeftRadius: getBorderRadiusValue(props.borderTopLeftRadius, props.theme, breakpoint),\n borderTopRightRadius: getBorderRadiusValue(props.borderTopRightRadius, props.theme, breakpoint),\n borderBottomRightRadius: getBorderRadiusValue(\n props.borderBottomRightRadius,\n props.theme,\n breakpoint,\n ),\n borderBottomLeftRadius: getBorderRadiusValue(\n props.borderBottomLeftRadius,\n props.theme,\n breakpoint,\n ),\n borderStyle: getBorderStyleValue(\n props.borderStyle,\n breakpoint,\n Boolean(hasBorder),\n ) as CSSObject['borderStyle'],\n cursor: getResponsiveValue(props.cursor, breakpoint),\n // Since we only allow 'solid', we can use the same value for all borders if hasBorder is true\n // If hasBorder is false, we need to check each border individually\n ...(!hasBorder && {\n borderTopStyle: getBorderStyleValue(\n props.borderTopStyle,\n breakpoint,\n Boolean(hasBorderTop),\n ) as CSSObject['borderTopStyle'],\n borderBottomStyle: getBorderStyleValue(\n props.borderBottomStyle,\n breakpoint,\n Boolean(hasBorderBottom),\n ) as CSSObject['borderBottomStyle'],\n borderLeftStyle: getBorderStyleValue(\n props.borderLeftStyle,\n breakpoint,\n Boolean(hasBorderLeft),\n ) as CSSObject['borderLeftStyle'],\n borderRightStyle: getBorderStyleValue(\n props.borderRightStyle,\n breakpoint,\n Boolean(hasBorderRight),\n ) as CSSObject['borderRightStyle'],\n }),\n touchAction: getResponsiveValue(props.touchAction, breakpoint),\n userSelect: getResponsiveValue(props.userSelect, breakpoint),\n pointerEvents: getResponsiveValue(props.pointerEvents),\n opacity: getResponsiveValue(props.opacity, breakpoint),\n visibility: getResponsiveValue(props.visibility, breakpoint),\n ...(!isReactNative() && {\n boxShadow: getElevationValue(props.elevation, props.theme, breakpoint),\n }),\n\n // Polygon support\n transform: getResponsiveValue(props.transform as string, breakpoint),\n transformOrigin: getResponsiveValue(props.transformOrigin, breakpoint),\n clipPath: getResponsiveValue(props.clipPath, breakpoint),\n };\n};\n\n/** We only add breakpoint if at least one of the value is defined */\nconst shouldAddBreakpoint = (cssProps: CSSObject): boolean => {\n const firstDefinedValue = Object.values(cssProps).find(\n (cssValue) => cssValue !== undefined && cssValue !== null,\n );\n\n return firstDefinedValue !== undefined;\n};\n\nconst getAllMediaQueries = (props: BaseBoxProps & { theme: Theme }): CSSObject => {\n if (isReactNative()) {\n return {};\n }\n\n const { base, ...breakpointsWithoutBase } = breakpoints;\n\n return Object.fromEntries(\n Object.entries(breakpointsWithoutBase).map(([breakpointKey, breakpointValue]) => {\n const cssPropsForCurrentBreakpoint = getAllProps(props, breakpointKey as keyof Breakpoints);\n if (!shouldAddBreakpoint(cssPropsForCurrentBreakpoint)) {\n return [];\n }\n\n const mediaQuery = `@media ${getMediaQuery({ min: breakpointValue })}`;\n return [mediaQuery, cssPropsForCurrentBreakpoint];\n }),\n );\n};\n\nconst getBaseBoxStyles = (props: BaseBoxProps & { theme: Theme }): CSSObject => {\n return {\n ...getAllProps(props),\n ...getAllMediaQueries(props),\n };\n};\n\nexport {\n getBaseBoxStyles,\n getSpacingValue,\n getColorValue,\n getBorderRadiusValue,\n shouldAddBreakpoint,\n getAllMediaQueries,\n getAllProps,\n};\n"],"names":["isSpacingToken","value","startsWith","getSpacingValue","spacingValue","theme","breakpoint","isEmpty","undefined","responsiveSpacingValue","getResponsiveValue","Array","isArray","map","join","spacingReturnValue","getIn","makeSpace","getColorValue","color","responsiveBackgroundValue","tokenValue","concat","getBorderRadiusValue","borderRadius","responsiveBorderRadiusValue","makeBorderSize","getBorderWidthValue","borderWidth","responsiveBorderWidthValue","getElevationValue","elevation","responsiveElevationValue","getBorderStyleValue","borderStyle","hasBorder","getAllProps","props","_props$paddingTop","_props$paddingBottom","_props$paddingRight","_props$paddingLeft","_props$marginBottom","_props$marginTop","_props$marginRight","_props$marginLeft","borderColor","hasBorderRight","borderRight","borderRightColor","borderRightWidth","hasBorderLeft","borderLeft","borderLeftColor","borderLeftWidth","hasBorderTop","borderTop","borderTopColor","borderTopWidth","hasBorderBottom","borderBottom","borderBottomColor","borderBottomWidth","_objectSpread","display","overflow","overflowX","overflowY","textAlign","whiteSpace","flex","flexWrap","flexDirection","flexGrow","flexShrink","flexBasis","alignItems","alignContent","alignSelf","justifyItems","justifyContent","justifySelf","placeSelf","placeItems","order","position","zIndex","grid","gridColumn","gridRow","gridRowStart","gridRowEnd","gridArea","gridAutoFlow","gridAutoRows","gridAutoColumns","gridTemplate","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","padding","paddingTop","paddingY","paddingBottom","paddingRight","paddingX","paddingLeft","margin","marginBottom","marginY","marginTop","marginRight","marginX","marginLeft","height","minHeight","maxHeight","width","minWidth","maxWidth","gap","rowGap","columnGap","top","right","bottom","left","backgroundColor","backgroundImage","backgroundSize","backgroundPosition","backgroundOrigin","backgroundRepeat","lineHeight","border","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","Boolean","cursor","borderTopStyle","borderBottomStyle","borderLeftStyle","borderRightStyle","touchAction","userSelect","pointerEvents","opacity","visibility","isReactNative","boxShadow","transform","transformOrigin","clipPath","shouldAddBreakpoint","cssProps","firstDefinedValue","Object","values","find","cssValue","getAllMediaQueries","base","breakpoints","breakpointsWithoutBase","_objectWithoutProperties","_excluded","fromEntries","entries","_ref","_ref2","_slicedToArray","breakpointKey","breakpointValue","cssPropsForCurrentBreakpoint","mediaQuery","getMediaQuery","min","getBaseBoxStyles"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"propsTypes.js","sources":["../../../../../../../../src/components/Box/BaseBox/types/propsTypes.ts"],"sourcesContent":["import type { View } from 'react-native';\nimport type { CSSObject } from 'styled-components';\nimport type { MarginProps, PaddingProps, SpacingValueType } from './spacingTypes';\nimport type { MakeObjectResponsive } from './responsiveTypes';\nimport type { Theme } from '~components/BladeProvider';\nimport type { Border, Elevation } from '~tokens/global';\nimport type { PickCSSByPlatform, TestID } from '~utils/types';\nimport type { Platform } from '~utils';\nimport type { BladeCommonEvents } from '~components/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\n\ntype LayoutProps = MakeObjectResponsive<\n {\n height: SpacingValueType;\n minHeight: SpacingValueType;\n maxHeight: SpacingValueType;\n width: SpacingValueType;\n minWidth: SpacingValueType;\n maxWidth: SpacingValueType;\n } & PickCSSByPlatform<\n 'display' | 'overflow' | 'overflowX' | 'overflowY' | 'textAlign' | 'whiteSpace'\n >\n>;\n\ntype FlexboxProps = MakeObjectResponsive<\n {\n /**\n * This uses the native gap property which might not work on older browsers.\n * If you want to support older browsers, you might want to use `margin` instead.\n *\n * @see https://caniuse.com/?search=gap\n */\n gap: SpacingValueType;\n /**\n * This uses the native row-gap property which might not work on older browsers.\n * If you want to support older browsers, you might want to use `margin` instead.\n *\n * @see https://caniuse.com/?search=row-gap\n */\n rowGap: SpacingValueType;\n /**\n * This uses the native column-gap property which might not work on older browsers.\n * If you want to support older browsers, you might want to use `margin` instead.\n *\n * @see https://caniuse.com/?search=column-gap\n */\n columnGap: SpacingValueType;\n /**\n * The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n *\n * @see https://developer.mozilla.org/docs/Web/CSS/flex\n */\n flex: string | number;\n } & PickCSSByPlatform<\n | 'flexWrap'\n | 'flexDirection'\n | 'flexGrow'\n | 'flexShrink'\n | 'flexBasis'\n | 'alignItems'\n | 'alignContent'\n | 'alignSelf'\n | 'justifyItems'\n | 'justifyContent'\n | 'justifySelf'\n | 'placeSelf'\n | 'placeItems'\n | 'order'\n >\n>;\n\ntype PositionProps = MakeObjectResponsive<\n {\n top: SpacingValueType;\n right: SpacingValueType;\n bottom: SpacingValueType;\n left: SpacingValueType;\n } & PickCSSByPlatform<'position' | 'zIndex'>\n>;\n\ntype GridProps = MakeObjectResponsive<\n PickCSSByPlatform<\n | 'grid'\n | 'gridColumn'\n | 'gridRow'\n | 'gridRowStart'\n | 'gridRowEnd'\n | 'gridColumnStart'\n | 'gridColumnEnd'\n | 'gridArea'\n | 'gridAutoFlow'\n | 'gridAutoRows'\n | 'gridAutoColumns'\n | 'gridTemplate'\n | 'gridTemplateAreas'\n | 'gridTemplateColumns'\n | 'gridTemplateRows'\n >\n>;\n\ntype ColorObjects = 'feedback' | 'surface' | 'interactive';\ntype BackgroundOnlyColorObjects = 'popup' | 'overlay';\ntype BackgroundColorString<\n T extends ColorObjects | BackgroundOnlyColorObjects\n> = `${T}.background.${DotNotationToken<Theme['colors'][T]['background']>}`;\ntype BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationToken<\n Theme['colors'][T]['border']\n>}`;\n\n// Created this as an array so I can reuse it for runtime validation\nconst validBoxAsValues = [\n 'div',\n 'section',\n 'footer',\n 'header',\n 'main',\n 'aside',\n 'nav',\n 'span',\n 'label',\n] as const;\n\ntype BoxAsType = typeof validBoxAsValues[number];\n\n// Visual props that are common for both Box and BaseBox\ntype CommonBoxVisualProps = MakeObjectResponsive<\n {\n borderRadius: keyof Border['radius'];\n borderWidth: keyof Border['width'];\n borderColor: BorderColorString<'surface'>;\n borderTopWidth: keyof Border['width'];\n borderTopColor: BorderColorString<'surface'>;\n borderRightWidth: keyof Border['width'];\n borderRightColor: BorderColorString<'surface'>;\n borderBottomWidth: keyof Border['width'];\n borderBottomColor: BorderColorString<'surface'>;\n borderLeftWidth: keyof Border['width'];\n borderLeftColor: BorderColorString<'surface'>;\n borderTopLeftRadius: keyof Border['radius'];\n borderTopRightRadius: keyof Border['radius'];\n borderBottomRightRadius: keyof Border['radius'];\n borderBottomLeftRadius: keyof Border['radius'];\n } & PickCSSByPlatform<\n | 'backgroundImage'\n | 'backgroundSize'\n | 'backgroundPosition'\n | 'backgroundOrigin'\n | 'backgroundRepeat'\n | 'pointerEvents'\n | 'opacity'\n | 'visibility'\n | 'transform'\n | 'transformOrigin'\n | 'clipPath'\n > & {\n /**\n * Sets the elevation for Box\n *\n * eg: `theme.elevation.midRaised`\n *\n * @default `theme.elevation.lowRaised`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--page\n */\n elevation?: keyof Elevation;\n }\n>;\n\n// Visual props that are specific BaseBox\n// This is used to ensure some of the more flexible BaseBox props are not passed to Box\ntype BaseBoxVisualProps = MakeObjectResponsive<\n {\n backgroundColor:\n | BackgroundColorString<'feedback'>\n | BackgroundColorString<'surface'>\n | BackgroundColorString<'interactive'>\n | BackgroundColorString<'overlay'>\n | BackgroundColorString<'popup'>\n | 'transparent'\n | (string & Record<never, never>);\n lineHeight: SpacingValueType;\n touchAction: CSSObject['touchAction'];\n userSelect: CSSObject['userSelect'];\n } & PickCSSByPlatform<\n | 'border'\n | 'borderLeft'\n | 'borderRight'\n | 'borderTop'\n | 'borderBottom'\n | 'opacity'\n | 'pointerEvents'\n | 'cursor'\n >\n>;\n\n// Visual props that are specific to Box\ntype BoxVisualProps = MakeObjectResponsive<{\n backgroundColor: BackgroundColorString<'surface'> | 'transparent';\n}> & {\n // Intentionally keeping this outside of MakeObjectResponsive since we only want as to be string and not responsive object\n // styled-components do not support passing `as` prop as an object\n as: BoxAsType;\n};\n\ntype StyledPropsBlade = Partial<\n Omit<\n MarginProps &\n Pick<FlexboxProps, 'alignSelf' | 'justifySelf' | 'placeSelf' | 'order'> &\n PositionProps &\n Pick<\n GridProps,\n | 'gridColumn'\n | 'gridRow'\n | 'gridRowStart'\n | 'gridRowEnd'\n | 'gridColumnStart'\n | 'gridColumnEnd'\n | 'gridArea'\n > &\n Pick<LayoutProps, 'display'>,\n '__brand__'\n >\n>;\n\ntype BoxCallbackProps = Omit<\n Platform.Select<{\n web: {\n /**\n * **Warning**\n *\n * Make sure to not use Box when you want to create a trigger that performs action on hover.\n * You would probably want to render it as `button` using `styled.button` instead.\n *\n * Use this for hoverable containers in cases like custom menus.\n */\n onMouseOver: React.MouseEventHandler<HTMLElement>;\n /**\n * **Warning**\n *\n * Make sure to not use Box when you want to create a trigger that performs action on hover.\n * You would probably want to render it as `button` using `styled.button` instead.\n *\n * Use this for hoverable containers in cases like custom menus.\n */\n onMouseEnter: React.MouseEventHandler<HTMLElement>;\n /**\n * **Warning**\n *\n * Make sure to not use Box when you want to create a trigger that performs action on hover.\n * You would probably want to render it as `button` using `styled.button` instead.\n *\n * Use this for hoverable containers in cases like custom menus.\n */\n onMouseLeave: React.MouseEventHandler<HTMLElement>;\n onScroll: React.UIEventHandler<HTMLElement>;\n };\n native: Record<'onMouseOver' | 'onMouseEnter' | 'onMouseLeave' | 'onScroll', undefined>;\n }>,\n '__brand__'\n>;\n\ntype BoxDragAndDropProps = Omit<\n Platform.Select<{\n web: {\n draggable: boolean;\n onDragStart: React.DragEventHandler<HTMLElement>;\n onDragEnter: React.DragEventHandler<HTMLElement>;\n onDragLeave: React.DragEventHandler<HTMLElement>;\n onDragOver: React.DragEventHandler<HTMLElement>;\n onDragEnd: React.DragEventHandler<HTMLElement>;\n onDrop: React.DragEventHandler<HTMLElement>;\n };\n native: Record<\n | 'draggable'\n | 'onDragStart'\n | 'onDragEnter'\n | 'onDragLeave'\n | 'onDragOver'\n | 'onDragEnd'\n | 'onDrop',\n undefined\n >;\n }>,\n '__brand__'\n>;\n\ntype BoxProps = Partial<\n PaddingProps &\n MarginProps &\n LayoutProps &\n FlexboxProps &\n PositionProps &\n GridProps &\n BoxCallbackProps &\n BoxDragAndDropProps &\n CommonBoxVisualProps &\n BoxVisualProps & {\n children?: React.ReactNode | React.ReactNode[];\n tabIndex?: number;\n id?: string;\n } & TestID\n>;\n\n// Visual props have different types for BaseBox and Box. BaseBox has more flexible types and more props exposed.\n// So first we Omit Visual props of Box\n// Then we append BaseBoxVisualProps and some other props for styled-components like class and id\ntype BaseBoxProps = Omit<BoxProps, keyof BoxVisualProps> &\n Partial<\n BaseBoxVisualProps & {\n className?: string;\n id?: string;\n tabIndex?: number;\n }\n > &\n BladeCommonEvents;\n\n// ref prop type\ntype BoxRefType = Platform.Select<{\n web: Omit<HTMLElement, 'style'>;\n native: View;\n}>;\n\nexport type { BaseBoxProps, BoxProps, BoxRefType, StyledPropsBlade, FlexboxProps };\nexport { validBoxAsValues };\n"],"names":["validBoxAsValues"],"mappings":"AA6GA;AACMA,IAAAA,gBAAgB,GAAG,CACvB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO;;;;"}
|
|
1
|
+
{"version":3,"file":"propsTypes.js","sources":["../../../../../../../../src/components/Box/BaseBox/types/propsTypes.ts"],"sourcesContent":["import type { View } from 'react-native';\nimport type { CSSObject } from 'styled-components';\nimport type { MarginProps, PaddingProps, SpacingValueType } from './spacingTypes';\nimport type { MakeObjectResponsive } from './responsiveTypes';\nimport type { Theme } from '~components/BladeProvider';\nimport type { Border, Elevation } from '~tokens/global';\nimport type { PickCSSByPlatform, TestID } from '~utils/types';\nimport type { Platform } from '~utils';\nimport type { BladeCommonEvents } from '~components/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\n\ntype LayoutProps = MakeObjectResponsive<\n {\n height: SpacingValueType;\n minHeight: SpacingValueType;\n maxHeight: SpacingValueType;\n width: SpacingValueType;\n minWidth: SpacingValueType;\n maxWidth: SpacingValueType;\n } & PickCSSByPlatform<\n 'display' | 'overflow' | 'overflowX' | 'overflowY' | 'textAlign' | 'whiteSpace'\n >\n>;\n\ntype FlexboxProps = MakeObjectResponsive<\n {\n /**\n * This uses the native gap property which might not work on older browsers.\n * If you want to support older browsers, you might want to use `margin` instead.\n *\n * @see https://caniuse.com/?search=gap\n */\n gap: SpacingValueType;\n /**\n * This uses the native row-gap property which might not work on older browsers.\n * If you want to support older browsers, you might want to use `margin` instead.\n *\n * @see https://caniuse.com/?search=row-gap\n */\n rowGap: SpacingValueType;\n /**\n * This uses the native column-gap property which might not work on older browsers.\n * If you want to support older browsers, you might want to use `margin` instead.\n *\n * @see https://caniuse.com/?search=column-gap\n */\n columnGap: SpacingValueType;\n /**\n * The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n *\n * @see https://developer.mozilla.org/docs/Web/CSS/flex\n */\n flex: string | number;\n } & PickCSSByPlatform<\n | 'flexWrap'\n | 'flexDirection'\n | 'flexGrow'\n | 'flexShrink'\n | 'flexBasis'\n | 'alignItems'\n | 'alignContent'\n | 'alignSelf'\n | 'justifyItems'\n | 'justifyContent'\n | 'justifySelf'\n | 'placeSelf'\n | 'placeItems'\n | 'order'\n >\n>;\n\ntype PositionProps = MakeObjectResponsive<\n {\n top: SpacingValueType;\n right: SpacingValueType;\n bottom: SpacingValueType;\n left: SpacingValueType;\n } & PickCSSByPlatform<'position' | 'zIndex'>\n>;\n\ntype GridProps = MakeObjectResponsive<\n PickCSSByPlatform<\n | 'grid'\n | 'gridColumn'\n | 'gridRow'\n | 'gridRowStart'\n | 'gridRowEnd'\n | 'gridColumnStart'\n | 'gridColumnEnd'\n | 'gridArea'\n | 'gridAutoFlow'\n | 'gridAutoRows'\n | 'gridAutoColumns'\n | 'gridTemplate'\n | 'gridTemplateAreas'\n | 'gridTemplateColumns'\n | 'gridTemplateRows'\n >\n>;\n\ntype ColorObjects = 'feedback' | 'surface' | 'interactive';\ntype BackgroundOnlyColorObjects = 'popup' | 'overlay';\ntype BackgroundColorString<\n T extends ColorObjects | BackgroundOnlyColorObjects\n> = `${T}.background.${DotNotationToken<Theme['colors'][T]['background']>}`;\ntype BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationToken<\n Theme['colors'][T]['border']\n>}`;\n\n// Created this as an array so I can reuse it for runtime validation\nconst validBoxAsValues = [\n 'div',\n 'section',\n 'footer',\n 'header',\n 'main',\n 'aside',\n 'nav',\n 'span',\n 'label',\n] as const;\n\ntype BoxAsType = typeof validBoxAsValues[number];\n\n// Visual props that are common for both Box and BaseBox\ntype CommonBoxVisualProps = MakeObjectResponsive<\n {\n borderRadius: keyof Border['radius'];\n borderWidth: keyof Border['width'];\n borderColor: BorderColorString<'surface'>;\n borderTopWidth: keyof Border['width'];\n borderTopColor: BorderColorString<'surface'>;\n borderRightWidth: keyof Border['width'];\n borderRightColor: BorderColorString<'surface'>;\n borderBottomWidth: keyof Border['width'];\n borderBottomColor: BorderColorString<'surface'>;\n borderLeftWidth: keyof Border['width'];\n borderLeftColor: BorderColorString<'surface'>;\n borderTopLeftRadius: keyof Border['radius'];\n borderTopRightRadius: keyof Border['radius'];\n borderBottomRightRadius: keyof Border['radius'];\n borderBottomLeftRadius: keyof Border['radius'];\n } & PickCSSByPlatform<\n | 'backgroundImage'\n | 'backgroundSize'\n | 'backgroundPosition'\n | 'backgroundOrigin'\n | 'backgroundRepeat'\n | 'pointerEvents'\n | 'opacity'\n | 'visibility'\n | 'transform'\n | 'transformOrigin'\n | 'clipPath'\n | 'borderStyle'\n | 'borderTopStyle'\n | 'borderBottomStyle'\n | 'borderLeftStyle'\n | 'borderRightStyle'\n > & {\n /**\n * Sets the elevation for Box\n *\n * eg: `theme.elevation.midRaised`\n *\n * @default `theme.elevation.lowRaised`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--page\n */\n elevation?: keyof Elevation;\n }\n>;\n\n// Visual props that are specific BaseBox\n// This is used to ensure some of the more flexible BaseBox props are not passed to Box\ntype BaseBoxVisualProps = MakeObjectResponsive<\n {\n backgroundColor:\n | BackgroundColorString<'feedback'>\n | BackgroundColorString<'surface'>\n | BackgroundColorString<'interactive'>\n | BackgroundColorString<'overlay'>\n | BackgroundColorString<'popup'>\n | 'transparent'\n | (string & Record<never, never>);\n lineHeight: SpacingValueType;\n touchAction: CSSObject['touchAction'];\n userSelect: CSSObject['userSelect'];\n } & PickCSSByPlatform<\n | 'border'\n | 'borderLeft'\n | 'borderRight'\n | 'borderTop'\n | 'borderBottom'\n | 'opacity'\n | 'pointerEvents'\n | 'cursor'\n >\n>;\n\n// Visual props that are specific to Box\ntype BoxVisualProps = MakeObjectResponsive<{\n backgroundColor: BackgroundColorString<'surface'> | 'transparent';\n}> & {\n // Intentionally keeping this outside of MakeObjectResponsive since we only want as to be string and not responsive object\n // styled-components do not support passing `as` prop as an object\n as: BoxAsType;\n};\n\ntype StyledPropsBlade = Partial<\n Omit<\n MarginProps &\n Pick<FlexboxProps, 'alignSelf' | 'justifySelf' | 'placeSelf' | 'order'> &\n PositionProps &\n Pick<\n GridProps,\n | 'gridColumn'\n | 'gridRow'\n | 'gridRowStart'\n | 'gridRowEnd'\n | 'gridColumnStart'\n | 'gridColumnEnd'\n | 'gridArea'\n > &\n Pick<LayoutProps, 'display'> &\n Pick<CommonBoxVisualProps, 'visibility'>,\n '__brand__'\n >\n>;\n\ntype BoxCallbackProps = Omit<\n Platform.Select<{\n web: {\n /**\n * **Warning**\n *\n * Make sure to not use Box when you want to create a trigger that performs action on hover.\n * You would probably want to render it as `button` using `styled.button` instead.\n *\n * Use this for hoverable containers in cases like custom menus.\n */\n onMouseOver: React.MouseEventHandler<HTMLElement>;\n /**\n * **Warning**\n *\n * Make sure to not use Box when you want to create a trigger that performs action on hover.\n * You would probably want to render it as `button` using `styled.button` instead.\n *\n * Use this for hoverable containers in cases like custom menus.\n */\n onMouseEnter: React.MouseEventHandler<HTMLElement>;\n /**\n * **Warning**\n *\n * Make sure to not use Box when you want to create a trigger that performs action on hover.\n * You would probably want to render it as `button` using `styled.button` instead.\n *\n * Use this for hoverable containers in cases like custom menus.\n */\n onMouseLeave: React.MouseEventHandler<HTMLElement>;\n onScroll: React.UIEventHandler<HTMLElement>;\n };\n native: Record<'onMouseOver' | 'onMouseEnter' | 'onMouseLeave' | 'onScroll', undefined>;\n }>,\n '__brand__'\n>;\n\ntype BoxDragAndDropProps = Omit<\n Platform.Select<{\n web: {\n draggable: boolean;\n onDragStart: React.DragEventHandler<HTMLElement>;\n onDragEnter: React.DragEventHandler<HTMLElement>;\n onDragLeave: React.DragEventHandler<HTMLElement>;\n onDragOver: React.DragEventHandler<HTMLElement>;\n onDragEnd: React.DragEventHandler<HTMLElement>;\n onDrop: React.DragEventHandler<HTMLElement>;\n };\n native: Record<\n | 'draggable'\n | 'onDragStart'\n | 'onDragEnter'\n | 'onDragLeave'\n | 'onDragOver'\n | 'onDragEnd'\n | 'onDrop',\n undefined\n >;\n }>,\n '__brand__'\n>;\n\ntype BoxProps = Partial<\n PaddingProps &\n MarginProps &\n LayoutProps &\n FlexboxProps &\n PositionProps &\n GridProps &\n BoxCallbackProps &\n BoxDragAndDropProps &\n CommonBoxVisualProps &\n BoxVisualProps & {\n children?: React.ReactNode | React.ReactNode[];\n tabIndex?: number;\n id?: string;\n } & TestID\n>;\n\n// Visual props have different types for BaseBox and Box. BaseBox has more flexible types and more props exposed.\n// So first we Omit Visual props of Box\n// Then we append BaseBoxVisualProps and some other props for styled-components like class and id\ntype BaseBoxProps = Omit<BoxProps, keyof BoxVisualProps> &\n Partial<\n BaseBoxVisualProps & {\n className?: string;\n id?: string;\n tabIndex?: number;\n }\n > &\n BladeCommonEvents;\n\n// ref prop type\ntype BoxRefType = Platform.Select<{\n web: Omit<HTMLElement, 'style'>;\n native: View;\n}>;\n\nexport type { BaseBoxProps, BoxProps, BoxRefType, StyledPropsBlade, FlexboxProps };\nexport { validBoxAsValues };\n"],"names":["validBoxAsValues"],"mappings":"AA6GA;AACMA,IAAAA,gBAAgB,GAAG,CACvB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO;;;;"}
|
|
@@ -130,14 +130,19 @@ var makeBoxProps = function makeBoxProps(props) {
|
|
|
130
130
|
// Border
|
|
131
131
|
borderWidth: props.borderWidth,
|
|
132
132
|
borderColor: props.borderColor,
|
|
133
|
+
borderStyle: props.borderStyle,
|
|
133
134
|
borderTopWidth: props.borderTopWidth,
|
|
134
135
|
borderTopColor: props.borderTopColor,
|
|
136
|
+
borderTopStyle: props.borderTopStyle,
|
|
135
137
|
borderRightWidth: props.borderRightWidth,
|
|
136
138
|
borderRightColor: props.borderRightColor,
|
|
139
|
+
borderRightStyle: props.borderRightStyle,
|
|
137
140
|
borderBottomWidth: props.borderBottomWidth,
|
|
138
141
|
borderBottomColor: props.borderBottomColor,
|
|
142
|
+
borderBottomStyle: props.borderBottomStyle,
|
|
139
143
|
borderLeftWidth: props.borderLeftWidth,
|
|
140
144
|
borderLeftColor: props.borderLeftColor,
|
|
145
|
+
borderLeftStyle: props.borderLeftStyle,
|
|
141
146
|
borderRadius: props.borderRadius,
|
|
142
147
|
borderTopLeftRadius: props.borderTopLeftRadius,
|
|
143
148
|
borderTopRightRadius: props.borderTopRightRadius,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.js","sources":["../../../../../../src/components/Box/Box.tsx"],"sourcesContent":["import React from 'react';\nimport BaseBox from './BaseBox';\nimport type { BoxProps, BoxRefType, MakeValueResponsive } from './BaseBox/types';\nimport { validBoxAsValues } from './BaseBox/types/propsTypes';\nimport type { KeysRequired } from '~utils/types';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\n\nconst validateBackgroundString = (stringBackgroundColorValue: string): void => {\n if (__DEV__) {\n if (\n !stringBackgroundColorValue.startsWith('surface.background') &&\n !stringBackgroundColorValue.startsWith('brand.') &&\n stringBackgroundColorValue !== 'transparent'\n ) {\n throwBladeError({\n message: `Oops! Currently you can only use \\`transparent\\`, \\`surface.background.*\\`, and \\`brand.*\\` tokens with backgroundColor property but we received \\`${stringBackgroundColorValue}\\` instead.\\n\\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss ✨`,\n moduleName: 'Box',\n });\n }\n }\n};\n\nconst validateBackgroundProp = (\n responsiveBackgroundColor: MakeValueResponsive<string | undefined>,\n): void => {\n if (__DEV__) {\n if (responsiveBackgroundColor) {\n if (typeof responsiveBackgroundColor === 'string') {\n validateBackgroundString(responsiveBackgroundColor);\n return;\n }\n\n Object.values(responsiveBackgroundColor).forEach((backgroundColor) => {\n if (typeof backgroundColor === 'string') {\n validateBackgroundString(backgroundColor);\n }\n });\n }\n }\n};\n\n/**\n * This function is to filter out any unexpected props passed by the user\n */\nconst makeBoxProps = (\n props: BoxProps,\n): KeysRequired<Omit<BoxProps, 'testID' | 'id' | '__brand__'>> => {\n return {\n // Layout\n display: props.display,\n overflow: props.overflow,\n overflowX: props.overflowX,\n overflowY: props.overflowY,\n whiteSpace: props.whiteSpace,\n height: props.height,\n minHeight: props.minHeight,\n maxHeight: props.maxHeight,\n width: props.width,\n minWidth: props.minWidth,\n maxWidth: props.maxWidth,\n textAlign: props.textAlign,\n\n // Flex\n flex: props.flex,\n flexWrap: props.flexWrap,\n flexDirection: props.flexDirection,\n flexGrow: props.flexGrow,\n flexShrink: props.flexShrink,\n flexBasis: props.flexBasis,\n alignItems: props.alignItems,\n alignContent: props.alignContent,\n alignSelf: props.alignSelf,\n justifyItems: props.justifyItems,\n justifyContent: props.justifyContent,\n justifySelf: props.justifySelf,\n placeSelf: props.placeSelf,\n placeItems: props.placeItems,\n order: props.order,\n\n // Grid\n grid: props.grid,\n gridColumn: props.gridColumn,\n gridRow: props.gridRow,\n gridRowStart: props.gridRowStart,\n gridRowEnd: props.gridRowEnd,\n gridColumnStart: props.gridColumnStart,\n gridColumnEnd: props.gridColumnEnd,\n gridArea: props.gridArea,\n gridAutoFlow: props.gridAutoFlow,\n gridAutoRows: props.gridAutoRows,\n gridAutoColumns: props.gridAutoColumns,\n gridTemplate: props.gridTemplate,\n gridTemplateAreas: props.gridTemplateAreas,\n gridTemplateColumns: props.gridTemplateColumns,\n gridTemplateRows: props.gridTemplateRows,\n\n // Spacing\n padding: props.padding,\n paddingTop: props.paddingTop,\n paddingBottom: props.paddingBottom,\n paddingRight: props.paddingRight,\n paddingLeft: props.paddingLeft,\n paddingX: props.paddingX,\n paddingY: props.paddingY,\n margin: props.margin,\n marginBottom: props.marginBottom,\n marginTop: props.marginTop,\n marginRight: props.marginRight,\n marginLeft: props.marginLeft,\n marginX: props.marginX,\n marginY: props.marginY,\n gap: props.gap,\n rowGap: props.rowGap,\n columnGap: props.columnGap,\n\n // Position\n position: props.position,\n zIndex: props.zIndex,\n top: props.top,\n right: props.right,\n bottom: props.bottom,\n left: props.left,\n\n // Visual\n backgroundColor: props.backgroundColor,\n backgroundImage: props.backgroundImage,\n backgroundSize: props.backgroundSize,\n backgroundPosition: props.backgroundPosition,\n backgroundOrigin: props.backgroundOrigin,\n backgroundRepeat: props.backgroundRepeat,\n elevation: props.elevation,\n opacity: props.opacity,\n visibility: props.visibility,\n\n // Border\n borderWidth: props.borderWidth,\n borderColor: props.borderColor,\n borderTopWidth: props.borderTopWidth,\n borderTopColor: props.borderTopColor,\n borderRightWidth: props.borderRightWidth,\n borderRightColor: props.borderRightColor,\n borderBottomWidth: props.borderBottomWidth,\n borderBottomColor: props.borderBottomColor,\n borderLeftWidth: props.borderLeftWidth,\n borderLeftColor: props.borderLeftColor,\n borderRadius: props.borderRadius,\n borderTopLeftRadius: props.borderTopLeftRadius,\n borderTopRightRadius: props.borderTopRightRadius,\n borderBottomRightRadius: props.borderBottomRightRadius,\n borderBottomLeftRadius: props.borderBottomLeftRadius,\n\n // Polygon Support\n transform: props.transform,\n transformOrigin: props.transformOrigin,\n clipPath: props.clipPath,\n\n // callbacks\n onMouseEnter: props.onMouseEnter,\n onMouseLeave: props.onMouseLeave,\n onMouseOver: props.onMouseOver,\n onScroll: props.onScroll,\n\n // Drag and Drop\n draggable: props.draggable,\n onDragStart: props.onDragStart,\n onDragEnd: props.onDragEnd,\n onDragEnter: props.onDragEnter,\n onDragLeave: props.onDragLeave,\n onDragOver: props.onDragOver,\n onDrop: props.onDrop,\n\n pointerEvents: props.pointerEvents,\n children: props.children,\n tabIndex: props.tabIndex,\n as: isReactNative() ? undefined : props.as, // as is not supported on react-native\n };\n};\n\n/**\n * ## Box\n * \n * Box is the basic Layout component.\n *\n *\n * Box components supports most spacing CSS properties like `display`, `padding*`, `flex*`, `height`, `width`, etc.\n *\n * Check out {@linkcode BoxProps BoxPropsType} for complete list of props and [Layout RFC](https://github.com/razorpay/blade/blob/master/rfcs/2023-01-06-layout.md) for more details on API decision.\n * \n * ----\n * \n * ### Usage\n * \n * ```jsx\n * <Box display=\"flex\">\n * ```\n\n * #### Responsive Props\n *\n * ```jsx\n * <Box padding={{ base: 'spacing.3', m: 'spacing.10' }} />\n * ```\n * \n * #### Margin and Padding Shorthands\n * \n * ```jsx\n * <Box padding={[\"spacing.3\", \"spacing.10\"]} />\n * ```\n *\n * ---\n * \n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-box Box Documentation}\n * \n */\nconst _Box: React.ForwardRefRenderFunction<BoxRefType, BoxProps> = (props, ref) => {\n React.useEffect(() => {\n if (__DEV__) {\n validateBackgroundProp(props.backgroundColor);\n }\n }, [props.backgroundColor]);\n\n React.useEffect(() => {\n if (__DEV__) {\n if (props.as) {\n if (isReactNative()) {\n throwBladeError({\n message: '`as` prop is not supported on React Native',\n moduleName: 'Box',\n });\n }\n\n if (!validBoxAsValues.includes(props.as)) {\n throwBladeError({\n message: `Invalid \\`as\\` prop value - ${props.as}. Only ${validBoxAsValues.join(\n ', ',\n )} are valid values`,\n moduleName: 'Box',\n });\n }\n }\n }\n }, [props.as]);\n\n return (\n <BaseBox\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref={ref as any}\n id={props.id}\n {...metaAttribute({ name: MetaConstants.Box, testID: props.testID })}\n {...makeBoxProps(props)}\n />\n );\n};\n\nconst Box = assignWithoutSideEffects(React.forwardRef(_Box), {\n displayName: 'Box',\n componentId: 'Box',\n});\n\nexport { Box, makeBoxProps };\n"],"names":["validateBackgroundString","stringBackgroundColorValue","startsWith","throwBladeError","message","concat","moduleName","validateBackgroundProp","responsiveBackgroundColor","Object","values","forEach","backgroundColor","makeBoxProps","props","display","overflow","overflowX","overflowY","whiteSpace","height","minHeight","maxHeight","width","minWidth","maxWidth","textAlign","flex","flexWrap","flexDirection","flexGrow","flexShrink","flexBasis","alignItems","alignContent","alignSelf","justifyItems","justifyContent","justifySelf","placeSelf","placeItems","order","grid","gridColumn","gridRow","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","gridArea","gridAutoFlow","gridAutoRows","gridAutoColumns","gridTemplate","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","padding","paddingTop","paddingBottom","paddingRight","paddingLeft","paddingX","paddingY","margin","marginBottom","marginTop","marginRight","marginLeft","marginX","marginY","gap","rowGap","columnGap","position","zIndex","top","right","bottom","left","backgroundImage","backgroundSize","backgroundPosition","backgroundOrigin","backgroundRepeat","elevation","opacity","visibility","borderWidth","borderColor","borderTopWidth","borderTopColor","borderRightWidth","borderRightColor","borderBottomWidth","borderBottomColor","borderLeftWidth","borderLeftColor","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","transform","transformOrigin","clipPath","onMouseEnter","onMouseLeave","onMouseOver","onScroll","draggable","onDragStart","onDragEnd","onDragEnter","onDragLeave","onDragOver","onDrop","pointerEvents","children","tabIndex","as","isReactNative","undefined","_Box","ref","React","useEffect","validBoxAsValues","includes","join","_jsx","BaseBox","_objectSpread","id","metaAttribute","name","MetaConstants","Box","testID","assignWithoutSideEffects","forwardRef","displayName","componentId"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,IAAMA,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAIC,0BAAkC,EAAW;AAC7E,EAAA,IAAI,IAAO,EAAE;AACX,IAAA,IACE,CAACA,0BAA0B,CAACC,UAAU,CAAC,oBAAoB,CAAC,IAC5D,CAACD,0BAA0B,CAACC,UAAU,CAAC,QAAQ,CAAC,IAChDD,0BAA0B,KAAK,aAAa,EAC5C;AACAE,MAAAA,eAAe,CAAC;AACdC,QAAAA,OAAO,EAAAC,8IAAAA,CAAAA,MAAA,CAAwJJ,0BAA0B,EAA4J,gKAAA,CAAA;AACrVK,QAAAA,UAAU,EAAE,KAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAA;AACF,CAAC,CAAA;AAED,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAC1BC,yBAAkE,EACzD;AACT,EAAA,IAAI,IAAO,EAAE;AACX,IAAA,IAAIA,yBAAyB,EAAE;AAC7B,MAAA,IAAI,OAAOA,yBAAyB,KAAK,QAAQ,EAAE;QACjDR,wBAAwB,CAACQ,yBAAyB,CAAC,CAAA;AACnD,QAAA,OAAA;AACF,OAAA;MAEAC,MAAM,CAACC,MAAM,CAACF,yBAAyB,CAAC,CAACG,OAAO,CAAC,UAACC,eAAe,EAAK;AACpE,QAAA,IAAI,OAAOA,eAAe,KAAK,QAAQ,EAAE;UACvCZ,wBAAwB,CAACY,eAAe,CAAC,CAAA;AAC3C,SAAA;AACF,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAA;AACF,CAAC,CAAA;;AAED;AACA;AACA;AACA,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAChBC,KAAe,EACiD;EAChE,OAAO;AACL;IACAC,OAAO,EAAED,KAAK,CAACC,OAAO;IACtBC,QAAQ,EAAEF,KAAK,CAACE,QAAQ;IACxBC,SAAS,EAAEH,KAAK,CAACG,SAAS;IAC1BC,SAAS,EAAEJ,KAAK,CAACI,SAAS;IAC1BC,UAAU,EAAEL,KAAK,CAACK,UAAU;IAC5BC,MAAM,EAAEN,KAAK,CAACM,MAAM;IACpBC,SAAS,EAAEP,KAAK,CAACO,SAAS;IAC1BC,SAAS,EAAER,KAAK,CAACQ,SAAS;IAC1BC,KAAK,EAAET,KAAK,CAACS,KAAK;IAClBC,QAAQ,EAAEV,KAAK,CAACU,QAAQ;IACxBC,QAAQ,EAAEX,KAAK,CAACW,QAAQ;IACxBC,SAAS,EAAEZ,KAAK,CAACY,SAAS;AAE1B;IACAC,IAAI,EAAEb,KAAK,CAACa,IAAI;IAChBC,QAAQ,EAAEd,KAAK,CAACc,QAAQ;IACxBC,aAAa,EAAEf,KAAK,CAACe,aAAa;IAClCC,QAAQ,EAAEhB,KAAK,CAACgB,QAAQ;IACxBC,UAAU,EAAEjB,KAAK,CAACiB,UAAU;IAC5BC,SAAS,EAAElB,KAAK,CAACkB,SAAS;IAC1BC,UAAU,EAAEnB,KAAK,CAACmB,UAAU;IAC5BC,YAAY,EAAEpB,KAAK,CAACoB,YAAY;IAChCC,SAAS,EAAErB,KAAK,CAACqB,SAAS;IAC1BC,YAAY,EAAEtB,KAAK,CAACsB,YAAY;IAChCC,cAAc,EAAEvB,KAAK,CAACuB,cAAc;IACpCC,WAAW,EAAExB,KAAK,CAACwB,WAAW;IAC9BC,SAAS,EAAEzB,KAAK,CAACyB,SAAS;IAC1BC,UAAU,EAAE1B,KAAK,CAAC0B,UAAU;IAC5BC,KAAK,EAAE3B,KAAK,CAAC2B,KAAK;AAElB;IACAC,IAAI,EAAE5B,KAAK,CAAC4B,IAAI;IAChBC,UAAU,EAAE7B,KAAK,CAAC6B,UAAU;IAC5BC,OAAO,EAAE9B,KAAK,CAAC8B,OAAO;IACtBC,YAAY,EAAE/B,KAAK,CAAC+B,YAAY;IAChCC,UAAU,EAAEhC,KAAK,CAACgC,UAAU;IAC5BC,eAAe,EAAEjC,KAAK,CAACiC,eAAe;IACtCC,aAAa,EAAElC,KAAK,CAACkC,aAAa;IAClCC,QAAQ,EAAEnC,KAAK,CAACmC,QAAQ;IACxBC,YAAY,EAAEpC,KAAK,CAACoC,YAAY;IAChCC,YAAY,EAAErC,KAAK,CAACqC,YAAY;IAChCC,eAAe,EAAEtC,KAAK,CAACsC,eAAe;IACtCC,YAAY,EAAEvC,KAAK,CAACuC,YAAY;IAChCC,iBAAiB,EAAExC,KAAK,CAACwC,iBAAiB;IAC1CC,mBAAmB,EAAEzC,KAAK,CAACyC,mBAAmB;IAC9CC,gBAAgB,EAAE1C,KAAK,CAAC0C,gBAAgB;AAExC;IACAC,OAAO,EAAE3C,KAAK,CAAC2C,OAAO;IACtBC,UAAU,EAAE5C,KAAK,CAAC4C,UAAU;IAC5BC,aAAa,EAAE7C,KAAK,CAAC6C,aAAa;IAClCC,YAAY,EAAE9C,KAAK,CAAC8C,YAAY;IAChCC,WAAW,EAAE/C,KAAK,CAAC+C,WAAW;IAC9BC,QAAQ,EAAEhD,KAAK,CAACgD,QAAQ;IACxBC,QAAQ,EAAEjD,KAAK,CAACiD,QAAQ;IACxBC,MAAM,EAAElD,KAAK,CAACkD,MAAM;IACpBC,YAAY,EAAEnD,KAAK,CAACmD,YAAY;IAChCC,SAAS,EAAEpD,KAAK,CAACoD,SAAS;IAC1BC,WAAW,EAAErD,KAAK,CAACqD,WAAW;IAC9BC,UAAU,EAAEtD,KAAK,CAACsD,UAAU;IAC5BC,OAAO,EAAEvD,KAAK,CAACuD,OAAO;IACtBC,OAAO,EAAExD,KAAK,CAACwD,OAAO;IACtBC,GAAG,EAAEzD,KAAK,CAACyD,GAAG;IACdC,MAAM,EAAE1D,KAAK,CAAC0D,MAAM;IACpBC,SAAS,EAAE3D,KAAK,CAAC2D,SAAS;AAE1B;IACAC,QAAQ,EAAE5D,KAAK,CAAC4D,QAAQ;IACxBC,MAAM,EAAE7D,KAAK,CAAC6D,MAAM;IACpBC,GAAG,EAAE9D,KAAK,CAAC8D,GAAG;IACdC,KAAK,EAAE/D,KAAK,CAAC+D,KAAK;IAClBC,MAAM,EAAEhE,KAAK,CAACgE,MAAM;IACpBC,IAAI,EAAEjE,KAAK,CAACiE,IAAI;AAEhB;IACAnE,eAAe,EAAEE,KAAK,CAACF,eAAe;IACtCoE,eAAe,EAAElE,KAAK,CAACkE,eAAe;IACtCC,cAAc,EAAEnE,KAAK,CAACmE,cAAc;IACpCC,kBAAkB,EAAEpE,KAAK,CAACoE,kBAAkB;IAC5CC,gBAAgB,EAAErE,KAAK,CAACqE,gBAAgB;IACxCC,gBAAgB,EAAEtE,KAAK,CAACsE,gBAAgB;IACxCC,SAAS,EAAEvE,KAAK,CAACuE,SAAS;IAC1BC,OAAO,EAAExE,KAAK,CAACwE,OAAO;IACtBC,UAAU,EAAEzE,KAAK,CAACyE,UAAU;AAE5B;IACAC,WAAW,EAAE1E,KAAK,CAAC0E,WAAW;IAC9BC,WAAW,EAAE3E,KAAK,CAAC2E,WAAW;IAC9BC,cAAc,EAAE5E,KAAK,CAAC4E,cAAc;IACpCC,cAAc,EAAE7E,KAAK,CAAC6E,cAAc;IACpCC,gBAAgB,EAAE9E,KAAK,CAAC8E,gBAAgB;IACxCC,gBAAgB,EAAE/E,KAAK,CAAC+E,gBAAgB;IACxCC,iBAAiB,EAAEhF,KAAK,CAACgF,iBAAiB;IAC1CC,iBAAiB,EAAEjF,KAAK,CAACiF,iBAAiB;IAC1CC,eAAe,EAAElF,KAAK,CAACkF,eAAe;IACtCC,eAAe,EAAEnF,KAAK,CAACmF,eAAe;IACtCC,YAAY,EAAEpF,KAAK,CAACoF,YAAY;IAChCC,mBAAmB,EAAErF,KAAK,CAACqF,mBAAmB;IAC9CC,oBAAoB,EAAEtF,KAAK,CAACsF,oBAAoB;IAChDC,uBAAuB,EAAEvF,KAAK,CAACuF,uBAAuB;IACtDC,sBAAsB,EAAExF,KAAK,CAACwF,sBAAsB;AAEpD;IACAC,SAAS,EAAEzF,KAAK,CAACyF,SAAS;IAC1BC,eAAe,EAAE1F,KAAK,CAAC0F,eAAe;IACtCC,QAAQ,EAAE3F,KAAK,CAAC2F,QAAQ;AAExB;IACAC,YAAY,EAAE5F,KAAK,CAAC4F,YAAY;IAChCC,YAAY,EAAE7F,KAAK,CAAC6F,YAAY;IAChCC,WAAW,EAAE9F,KAAK,CAAC8F,WAAW;IAC9BC,QAAQ,EAAE/F,KAAK,CAAC+F,QAAQ;AAExB;IACAC,SAAS,EAAEhG,KAAK,CAACgG,SAAS;IAC1BC,WAAW,EAAEjG,KAAK,CAACiG,WAAW;IAC9BC,SAAS,EAAElG,KAAK,CAACkG,SAAS;IAC1BC,WAAW,EAAEnG,KAAK,CAACmG,WAAW;IAC9BC,WAAW,EAAEpG,KAAK,CAACoG,WAAW;IAC9BC,UAAU,EAAErG,KAAK,CAACqG,UAAU;IAC5BC,MAAM,EAAEtG,KAAK,CAACsG,MAAM;IAEpBC,aAAa,EAAEvG,KAAK,CAACuG,aAAa;IAClCC,QAAQ,EAAExG,KAAK,CAACwG,QAAQ;IACxBC,QAAQ,EAAEzG,KAAK,CAACyG,QAAQ;IACxBC,EAAE,EAAEC,aAAa,EAAE,GAAGC,SAAS,GAAG5G,KAAK,CAAC0G,EAAE;GAC3C,CAAA;AACH,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMG,IAA0D,GAAG,SAA7DA,IAA0DA,CAAI7G,KAAK,EAAE8G,GAAG,EAAK;EACjFC,cAAK,CAACC,SAAS,CAAC,YAAM;AACpB,IAAA,IAAI,IAAO,EAAE;AACXvH,MAAAA,sBAAsB,CAACO,KAAK,CAACF,eAAe,CAAC,CAAA;AAC/C,KAAA;AACF,GAAC,EAAE,CAACE,KAAK,CAACF,eAAe,CAAC,CAAC,CAAA;EAE3BiH,cAAK,CAACC,SAAS,CAAC,YAAM;AACpB,IAAA,IAAI,IAAO,EAAE;MACX,IAAIhH,KAAK,CAAC0G,EAAE,EAAE;QACZ,IAAIC,aAAa,EAAE,EAAE;AACnBtH,UAAAA,eAAe,CAAC;AACdC,YAAAA,OAAO,EAAE,4CAA4C;AACrDE,YAAAA,UAAU,EAAE,KAAA;AACd,WAAC,CAAC,CAAA;AACJ,SAAA;QAEA,IAAI,CAACyH,gBAAgB,CAACC,QAAQ,CAAClH,KAAK,CAAC0G,EAAE,CAAC,EAAE;AACxCrH,UAAAA,eAAe,CAAC;AACdC,YAAAA,OAAO,EAAAC,4BAAAA,CAAAA,MAAA,CAAiCS,KAAK,CAAC0G,EAAE,EAAA,SAAA,CAAA,CAAAnH,MAAA,CAAU0H,gBAAgB,CAACE,IAAI,CAC7E,IACF,CAAC,EAAmB,mBAAA,CAAA;AACpB3H,YAAAA,UAAU,EAAE,KAAA;AACd,WAAC,CAAC,CAAA;AACJ,SAAA;AACF,OAAA;AACF,KAAA;AACF,GAAC,EAAE,CAACQ,KAAK,CAAC0G,EAAE,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEU,GAAA,CAACC,OAAAA;AACC;IAAAC,aAAA,CAAAA,aAAA,CAAA;AACAR,IAAAA,GAAG,EAAEA,GAAW;IAChBS,EAAE,EAAEvH,KAAK,CAACuH,EAAAA;AAAG,GAAA,EACTC,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,GAAG;IAAEC,MAAM,EAAE5H,KAAK,CAAC4H,MAAAA;AAAO,GAAC,CAAC,CAChE7H,EAAAA,YAAY,CAACC,KAAK,CAAC,CACxB,CAAC,CAAA;AAEN,CAAC,CAAA;AAEK2H,IAAAA,GAAG,gBAAGE,wBAAwB,eAACd,cAAK,CAACe,UAAU,CAACjB,IAAI,CAAC,EAAE;AAC3DkB,EAAAA,WAAW,EAAE,KAAK;AAClBC,EAAAA,WAAW,EAAE,KAAA;AACf,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"Box.js","sources":["../../../../../../src/components/Box/Box.tsx"],"sourcesContent":["import React from 'react';\nimport BaseBox from './BaseBox';\nimport type { BoxProps, BoxRefType, MakeValueResponsive } from './BaseBox/types';\nimport { validBoxAsValues } from './BaseBox/types/propsTypes';\nimport type { KeysRequired } from '~utils/types';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\n\nconst validateBackgroundString = (stringBackgroundColorValue: string): void => {\n if (__DEV__) {\n if (\n !stringBackgroundColorValue.startsWith('surface.background') &&\n !stringBackgroundColorValue.startsWith('brand.') &&\n stringBackgroundColorValue !== 'transparent'\n ) {\n throwBladeError({\n message: `Oops! Currently you can only use \\`transparent\\`, \\`surface.background.*\\`, and \\`brand.*\\` tokens with backgroundColor property but we received \\`${stringBackgroundColorValue}\\` instead.\\n\\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss ✨`,\n moduleName: 'Box',\n });\n }\n }\n};\n\nconst validateBackgroundProp = (\n responsiveBackgroundColor: MakeValueResponsive<string | undefined>,\n): void => {\n if (__DEV__) {\n if (responsiveBackgroundColor) {\n if (typeof responsiveBackgroundColor === 'string') {\n validateBackgroundString(responsiveBackgroundColor);\n return;\n }\n\n Object.values(responsiveBackgroundColor).forEach((backgroundColor) => {\n if (typeof backgroundColor === 'string') {\n validateBackgroundString(backgroundColor);\n }\n });\n }\n }\n};\n\n/**\n * This function is to filter out any unexpected props passed by the user\n */\nconst makeBoxProps = (\n props: BoxProps,\n): KeysRequired<Omit<BoxProps, 'testID' | 'id' | '__brand__'>> => {\n return {\n // Layout\n display: props.display,\n overflow: props.overflow,\n overflowX: props.overflowX,\n overflowY: props.overflowY,\n whiteSpace: props.whiteSpace,\n height: props.height,\n minHeight: props.minHeight,\n maxHeight: props.maxHeight,\n width: props.width,\n minWidth: props.minWidth,\n maxWidth: props.maxWidth,\n textAlign: props.textAlign,\n\n // Flex\n flex: props.flex,\n flexWrap: props.flexWrap,\n flexDirection: props.flexDirection,\n flexGrow: props.flexGrow,\n flexShrink: props.flexShrink,\n flexBasis: props.flexBasis,\n alignItems: props.alignItems,\n alignContent: props.alignContent,\n alignSelf: props.alignSelf,\n justifyItems: props.justifyItems,\n justifyContent: props.justifyContent,\n justifySelf: props.justifySelf,\n placeSelf: props.placeSelf,\n placeItems: props.placeItems,\n order: props.order,\n\n // Grid\n grid: props.grid,\n gridColumn: props.gridColumn,\n gridRow: props.gridRow,\n gridRowStart: props.gridRowStart,\n gridRowEnd: props.gridRowEnd,\n gridColumnStart: props.gridColumnStart,\n gridColumnEnd: props.gridColumnEnd,\n gridArea: props.gridArea,\n gridAutoFlow: props.gridAutoFlow,\n gridAutoRows: props.gridAutoRows,\n gridAutoColumns: props.gridAutoColumns,\n gridTemplate: props.gridTemplate,\n gridTemplateAreas: props.gridTemplateAreas,\n gridTemplateColumns: props.gridTemplateColumns,\n gridTemplateRows: props.gridTemplateRows,\n\n // Spacing\n padding: props.padding,\n paddingTop: props.paddingTop,\n paddingBottom: props.paddingBottom,\n paddingRight: props.paddingRight,\n paddingLeft: props.paddingLeft,\n paddingX: props.paddingX,\n paddingY: props.paddingY,\n margin: props.margin,\n marginBottom: props.marginBottom,\n marginTop: props.marginTop,\n marginRight: props.marginRight,\n marginLeft: props.marginLeft,\n marginX: props.marginX,\n marginY: props.marginY,\n gap: props.gap,\n rowGap: props.rowGap,\n columnGap: props.columnGap,\n\n // Position\n position: props.position,\n zIndex: props.zIndex,\n top: props.top,\n right: props.right,\n bottom: props.bottom,\n left: props.left,\n\n // Visual\n backgroundColor: props.backgroundColor,\n backgroundImage: props.backgroundImage,\n backgroundSize: props.backgroundSize,\n backgroundPosition: props.backgroundPosition,\n backgroundOrigin: props.backgroundOrigin,\n backgroundRepeat: props.backgroundRepeat,\n elevation: props.elevation,\n opacity: props.opacity,\n visibility: props.visibility,\n\n // Border\n borderWidth: props.borderWidth,\n borderColor: props.borderColor,\n borderStyle: props.borderStyle,\n borderTopWidth: props.borderTopWidth,\n borderTopColor: props.borderTopColor,\n borderTopStyle: props.borderTopStyle,\n borderRightWidth: props.borderRightWidth,\n borderRightColor: props.borderRightColor,\n borderRightStyle: props.borderRightStyle,\n borderBottomWidth: props.borderBottomWidth,\n borderBottomColor: props.borderBottomColor,\n borderBottomStyle: props.borderBottomStyle,\n borderLeftWidth: props.borderLeftWidth,\n borderLeftColor: props.borderLeftColor,\n borderLeftStyle: props.borderLeftStyle,\n borderRadius: props.borderRadius,\n borderTopLeftRadius: props.borderTopLeftRadius,\n borderTopRightRadius: props.borderTopRightRadius,\n borderBottomRightRadius: props.borderBottomRightRadius,\n borderBottomLeftRadius: props.borderBottomLeftRadius,\n\n // Polygon Support\n transform: props.transform,\n transformOrigin: props.transformOrigin,\n clipPath: props.clipPath,\n\n // callbacks\n onMouseEnter: props.onMouseEnter,\n onMouseLeave: props.onMouseLeave,\n onMouseOver: props.onMouseOver,\n onScroll: props.onScroll,\n\n // Drag and Drop\n draggable: props.draggable,\n onDragStart: props.onDragStart,\n onDragEnd: props.onDragEnd,\n onDragEnter: props.onDragEnter,\n onDragLeave: props.onDragLeave,\n onDragOver: props.onDragOver,\n onDrop: props.onDrop,\n\n pointerEvents: props.pointerEvents,\n children: props.children,\n tabIndex: props.tabIndex,\n as: isReactNative() ? undefined : props.as, // as is not supported on react-native\n };\n};\n\n/**\n * ## Box\n * \n * Box is the basic Layout component.\n *\n *\n * Box components supports most spacing CSS properties like `display`, `padding*`, `flex*`, `height`, `width`, etc.\n *\n * Check out {@linkcode BoxProps BoxPropsType} for complete list of props and [Layout RFC](https://github.com/razorpay/blade/blob/master/rfcs/2023-01-06-layout.md) for more details on API decision.\n * \n * ----\n * \n * ### Usage\n * \n * ```jsx\n * <Box display=\"flex\">\n * ```\n\n * #### Responsive Props\n *\n * ```jsx\n * <Box padding={{ base: 'spacing.3', m: 'spacing.10' }} />\n * ```\n * \n * #### Margin and Padding Shorthands\n * \n * ```jsx\n * <Box padding={[\"spacing.3\", \"spacing.10\"]} />\n * ```\n *\n * ---\n * \n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-box Box Documentation}\n * \n */\nconst _Box: React.ForwardRefRenderFunction<BoxRefType, BoxProps> = (props, ref) => {\n React.useEffect(() => {\n if (__DEV__) {\n validateBackgroundProp(props.backgroundColor);\n }\n }, [props.backgroundColor]);\n\n React.useEffect(() => {\n if (__DEV__) {\n if (props.as) {\n if (isReactNative()) {\n throwBladeError({\n message: '`as` prop is not supported on React Native',\n moduleName: 'Box',\n });\n }\n\n if (!validBoxAsValues.includes(props.as)) {\n throwBladeError({\n message: `Invalid \\`as\\` prop value - ${props.as}. Only ${validBoxAsValues.join(\n ', ',\n )} are valid values`,\n moduleName: 'Box',\n });\n }\n }\n }\n }, [props.as]);\n\n return (\n <BaseBox\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref={ref as any}\n id={props.id}\n {...metaAttribute({ name: MetaConstants.Box, testID: props.testID })}\n {...makeBoxProps(props)}\n />\n );\n};\n\nconst Box = assignWithoutSideEffects(React.forwardRef(_Box), {\n displayName: 'Box',\n componentId: 'Box',\n});\n\nexport { Box, makeBoxProps };\n"],"names":["validateBackgroundString","stringBackgroundColorValue","startsWith","throwBladeError","message","concat","moduleName","validateBackgroundProp","responsiveBackgroundColor","Object","values","forEach","backgroundColor","makeBoxProps","props","display","overflow","overflowX","overflowY","whiteSpace","height","minHeight","maxHeight","width","minWidth","maxWidth","textAlign","flex","flexWrap","flexDirection","flexGrow","flexShrink","flexBasis","alignItems","alignContent","alignSelf","justifyItems","justifyContent","justifySelf","placeSelf","placeItems","order","grid","gridColumn","gridRow","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","gridArea","gridAutoFlow","gridAutoRows","gridAutoColumns","gridTemplate","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","padding","paddingTop","paddingBottom","paddingRight","paddingLeft","paddingX","paddingY","margin","marginBottom","marginTop","marginRight","marginLeft","marginX","marginY","gap","rowGap","columnGap","position","zIndex","top","right","bottom","left","backgroundImage","backgroundSize","backgroundPosition","backgroundOrigin","backgroundRepeat","elevation","opacity","visibility","borderWidth","borderColor","borderStyle","borderTopWidth","borderTopColor","borderTopStyle","borderRightWidth","borderRightColor","borderRightStyle","borderBottomWidth","borderBottomColor","borderBottomStyle","borderLeftWidth","borderLeftColor","borderLeftStyle","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","transform","transformOrigin","clipPath","onMouseEnter","onMouseLeave","onMouseOver","onScroll","draggable","onDragStart","onDragEnd","onDragEnter","onDragLeave","onDragOver","onDrop","pointerEvents","children","tabIndex","as","isReactNative","undefined","_Box","ref","React","useEffect","validBoxAsValues","includes","join","_jsx","BaseBox","_objectSpread","id","metaAttribute","name","MetaConstants","Box","testID","assignWithoutSideEffects","forwardRef","displayName","componentId"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getStyledProps.js","sources":["../../../../../../../src/components/Box/styledProps/getStyledProps.ts"],"sourcesContent":["import type { StyledPropsBlade } from '../BaseBox/types';\nimport type { KeysRequired } from '~utils/types';\n\n/**\n * The input type to these styledProps utilities can be anything as we can just pass all the props and then get the filtered styledProps out of it\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype StyledPropsInputType = Record<string, any>;\n\n/**\n * Removing undefined styledProps because when used with spread operator, undefined can override the earlier defined values.\n\n * Example: the following code will print display: undefined since it is given priority in spread.\n * \n * ```ts\n * const styledProps = {\n * display: undefined,\n * }\n *\n * const buttonProps = {\n * display: 'block',\n * }\n *\n * const styles = {\n * ...buttonProps,\n * ...styledProps,\n * } // -> Prints { display: undefined }\n * ```\n */\nconst removeUndefinedStyledProps = (obj: StyledPropsInputType): StyledPropsInputType => {\n const onlyDefinedStyledProps: StyledPropsBlade = {};\n for (const key in obj) {\n if (obj[key] !== undefined) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error\n // @ts-ignore: complex type error\n onlyDefinedStyledProps[key] = obj[key];\n }\n }\n return onlyDefinedStyledProps;\n};\n\n/**\n * - Removes the props that are not styledProps\n * - Returns all the styled props along with undefined values.\n *\n * Can be used in generating storybook docs and testing the possible props.\n *\n *\n * **Use `getStyledProps` instead if you're using this for adding styledProps!**\n */\nconst makeStyledProps = (props: StyledPropsInputType): KeysRequired<StyledPropsBlade> => {\n return {\n alignSelf: props.alignSelf,\n display: props.display,\n justifySelf: props.justifySelf,\n placeSelf: props.placeSelf,\n order: props.order,\n position: props.position,\n zIndex: props.zIndex,\n gridColumn: props.gridColumn,\n gridColumnStart: props.gridColumnStart,\n gridColumnEnd: props.gridColumnEnd,\n gridRow: props.gridRow,\n gridRowStart: props.gridRowStart,\n gridRowEnd: props.gridRowEnd,\n gridArea: props.gridArea,\n margin: props.margin,\n marginX: props.marginX,\n marginY: props.marginY,\n marginBottom: props.marginBottom,\n marginTop: props.marginTop,\n marginRight: props.marginRight,\n marginLeft: props.marginLeft,\n top: props.top,\n right: props.right,\n bottom: props.bottom,\n left: props.left,\n };\n};\n\n/**\n *\n * ## How to add Styled Props to components?\n *\n * There are 2 ways\n * - Using `getStyledProps` + BaseBox wrapper\n * - Using `useStyledProps`\n *\n * You can use `getStyledProps` method if you're fine adding or already have BaseBox wrapper around your component\n * And use `useStyledProps` when adding BaseBox wrapper can cause styling issues or is unneccessary and you want to prevent unnecessary renders\n *\n * ### Usage\n *\n * #### `getStyledProps` + BaseBox wrapper\n *\n * ```tsx\n * import type { StyledPropsBlade } from '~src/components/Box/styledProps';\n * import { getStyledProps } from '~src/components/Box/styledProps';\n *\n * type MyComponentProps = {\n * // ... Your Props\n * } & StyledPropsBlade;\n *\n * const MyComponent = (props: MyComponentProps): React.ReactElement => {\n * return (\n * // Make sure styledProps come last so they take priority in stylings in-case of overrides\n * <BaseBox someOtherProp={someValue} {...getStyledProps(props)}>\n * // Your component code\n * </BaseBox>\n * )\n * }\n * ```\n *\n * #### `useStyledProps`\n *\n *\n * ```tsx\n * import type { StyledPropsBlade } from '~src/components/Box/styledProps';\n * import { useStyledProps } from '~src/components/Box/styledProps';\n *\n * type MyTextComponentProps = {\n * // ... Your Props\n * } & StyledPropsBlade;\n *\n *\n * const TextComponentWithStyledProps = styled.p<MyTextComponentProps>((props) => {\n * const styledPropsCSSObject = useStyledProps(props);\n *\n * return {\n * // ...your other CSS,\n * ...styledPropsCSSObject, // Make sure styledProps come last so they take priority in styles\n * }\n * })\n * ```\n *\n * Checkout implementation in `BaseText` components for example of `useStyledProps`\n *\n * - Web: [`BaseText.web.tsx`](../../components/Typography/BaseText/BaseText.web.tsx)\n * - Native: [`BaseText.native.tsx`](../../components/Typography/BaseText/BaseText.native.tsx)\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst getStyledProps = (props: Record<string, any>): StyledPropsBlade => {\n return removeUndefinedStyledProps(makeStyledProps(props));\n};\n\nexport type { StyledPropsBlade };\nexport { getStyledProps, makeStyledProps, removeUndefinedStyledProps };\n"],"names":["removeUndefinedStyledProps","obj","onlyDefinedStyledProps","key","undefined","makeStyledProps","props","alignSelf","display","justifySelf","placeSelf","order","position","zIndex","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","gridArea","margin","marginX","marginY","marginBottom","marginTop","marginRight","marginLeft","top","right","bottom","left","getStyledProps"],"mappings":"AAGA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAAIC,GAAyB,EAA2B;EACtF,IAAMC,sBAAwC,GAAG,EAAE,CAAA;AACnD,EAAA,KAAK,IAAMC,GAAG,IAAIF,GAAG,EAAE;AACrB,IAAA,IAAIA,GAAG,CAACE,GAAG,CAAC,KAAKC,SAAS,EAAE;AAC1B;AACA;AACAF,MAAAA,sBAAsB,CAACC,GAAG,CAAC,GAAGF,GAAG,CAACE,GAAG,CAAC,CAAA;AACxC,KAAA;AACF,GAAA;AACA,EAAA,OAAOD,sBAAsB,CAAA;AAC/B,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMG,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAA2B,EAAqC;EACvF,OAAO;IACLC,SAAS,EAAED,KAAK,CAACC,SAAS;IAC1BC,OAAO,EAAEF,KAAK,CAACE,OAAO;IACtBC,WAAW,EAAEH,KAAK,CAACG,WAAW;IAC9BC,SAAS,EAAEJ,KAAK,CAACI,SAAS;IAC1BC,KAAK,EAAEL,KAAK,CAACK,KAAK;IAClBC,QAAQ,EAAEN,KAAK,CAACM,QAAQ;IACxBC,MAAM,EAAEP,KAAK,CAACO,MAAM;IACpBC,UAAU,EAAER,KAAK,CAACQ,UAAU;IAC5BC,eAAe,EAAET,KAAK,CAACS,eAAe;IACtCC,aAAa,EAAEV,KAAK,CAACU,aAAa;IAClCC,OAAO,EAAEX,KAAK,CAACW,OAAO;IACtBC,YAAY,EAAEZ,KAAK,CAACY,YAAY;IAChCC,UAAU,EAAEb,KAAK,CAACa,UAAU;IAC5BC,QAAQ,EAAEd,KAAK,CAACc,QAAQ;IACxBC,MAAM,EAAEf,KAAK,CAACe,MAAM;IACpBC,OAAO,EAAEhB,KAAK,CAACgB,OAAO;IACtBC,OAAO,EAAEjB,KAAK,CAACiB,OAAO;IACtBC,YAAY,EAAElB,KAAK,CAACkB,YAAY;IAChCC,SAAS,EAAEnB,KAAK,CAACmB,SAAS;IAC1BC,WAAW,EAAEpB,KAAK,CAACoB,WAAW;IAC9BC,UAAU,EAAErB,KAAK,CAACqB,UAAU;IAC5BC,GAAG,EAAEtB,KAAK,CAACsB,GAAG;IACdC,KAAK,EAAEvB,KAAK,CAACuB,KAAK;IAClBC,MAAM,EAAExB,KAAK,CAACwB,MAAM;IACpBC,IAAI,EAAEzB,KAAK,CAACyB,
|
|
1
|
+
{"version":3,"file":"getStyledProps.js","sources":["../../../../../../../src/components/Box/styledProps/getStyledProps.ts"],"sourcesContent":["import type { StyledPropsBlade } from '../BaseBox/types';\nimport type { KeysRequired } from '~utils/types';\n\n/**\n * The input type to these styledProps utilities can be anything as we can just pass all the props and then get the filtered styledProps out of it\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype StyledPropsInputType = Record<string, any>;\n\n/**\n * Removing undefined styledProps because when used with spread operator, undefined can override the earlier defined values.\n\n * Example: the following code will print display: undefined since it is given priority in spread.\n * \n * ```ts\n * const styledProps = {\n * display: undefined,\n * }\n *\n * const buttonProps = {\n * display: 'block',\n * }\n *\n * const styles = {\n * ...buttonProps,\n * ...styledProps,\n * } // -> Prints { display: undefined }\n * ```\n */\nconst removeUndefinedStyledProps = (obj: StyledPropsInputType): StyledPropsInputType => {\n const onlyDefinedStyledProps: StyledPropsBlade = {};\n for (const key in obj) {\n if (obj[key] !== undefined) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error\n // @ts-ignore: complex type error\n onlyDefinedStyledProps[key] = obj[key];\n }\n }\n return onlyDefinedStyledProps;\n};\n\n/**\n * - Removes the props that are not styledProps\n * - Returns all the styled props along with undefined values.\n *\n * Can be used in generating storybook docs and testing the possible props.\n *\n *\n * **Use `getStyledProps` instead if you're using this for adding styledProps!**\n */\nconst makeStyledProps = (props: StyledPropsInputType): KeysRequired<StyledPropsBlade> => {\n return {\n alignSelf: props.alignSelf,\n display: props.display,\n justifySelf: props.justifySelf,\n placeSelf: props.placeSelf,\n order: props.order,\n position: props.position,\n zIndex: props.zIndex,\n gridColumn: props.gridColumn,\n gridColumnStart: props.gridColumnStart,\n gridColumnEnd: props.gridColumnEnd,\n gridRow: props.gridRow,\n gridRowStart: props.gridRowStart,\n gridRowEnd: props.gridRowEnd,\n gridArea: props.gridArea,\n margin: props.margin,\n marginX: props.marginX,\n marginY: props.marginY,\n marginBottom: props.marginBottom,\n marginTop: props.marginTop,\n marginRight: props.marginRight,\n marginLeft: props.marginLeft,\n top: props.top,\n right: props.right,\n bottom: props.bottom,\n left: props.left,\n visibility: props.visibility,\n };\n};\n\n/**\n *\n * ## How to add Styled Props to components?\n *\n * There are 2 ways\n * - Using `getStyledProps` + BaseBox wrapper\n * - Using `useStyledProps`\n *\n * You can use `getStyledProps` method if you're fine adding or already have BaseBox wrapper around your component\n * And use `useStyledProps` when adding BaseBox wrapper can cause styling issues or is unneccessary and you want to prevent unnecessary renders\n *\n * ### Usage\n *\n * #### `getStyledProps` + BaseBox wrapper\n *\n * ```tsx\n * import type { StyledPropsBlade } from '~src/components/Box/styledProps';\n * import { getStyledProps } from '~src/components/Box/styledProps';\n *\n * type MyComponentProps = {\n * // ... Your Props\n * } & StyledPropsBlade;\n *\n * const MyComponent = (props: MyComponentProps): React.ReactElement => {\n * return (\n * // Make sure styledProps come last so they take priority in stylings in-case of overrides\n * <BaseBox someOtherProp={someValue} {...getStyledProps(props)}>\n * // Your component code\n * </BaseBox>\n * )\n * }\n * ```\n *\n * #### `useStyledProps`\n *\n *\n * ```tsx\n * import type { StyledPropsBlade } from '~src/components/Box/styledProps';\n * import { useStyledProps } from '~src/components/Box/styledProps';\n *\n * type MyTextComponentProps = {\n * // ... Your Props\n * } & StyledPropsBlade;\n *\n *\n * const TextComponentWithStyledProps = styled.p<MyTextComponentProps>((props) => {\n * const styledPropsCSSObject = useStyledProps(props);\n *\n * return {\n * // ...your other CSS,\n * ...styledPropsCSSObject, // Make sure styledProps come last so they take priority in styles\n * }\n * })\n * ```\n *\n * Checkout implementation in `BaseText` components for example of `useStyledProps`\n *\n * - Web: [`BaseText.web.tsx`](../../components/Typography/BaseText/BaseText.web.tsx)\n * - Native: [`BaseText.native.tsx`](../../components/Typography/BaseText/BaseText.native.tsx)\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst getStyledProps = (props: Record<string, any>): StyledPropsBlade => {\n return removeUndefinedStyledProps(makeStyledProps(props));\n};\n\nexport type { StyledPropsBlade };\nexport { getStyledProps, makeStyledProps, removeUndefinedStyledProps };\n"],"names":["removeUndefinedStyledProps","obj","onlyDefinedStyledProps","key","undefined","makeStyledProps","props","alignSelf","display","justifySelf","placeSelf","order","position","zIndex","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","gridArea","margin","marginX","marginY","marginBottom","marginTop","marginRight","marginLeft","top","right","bottom","left","visibility","getStyledProps"],"mappings":"AAGA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAAIC,GAAyB,EAA2B;EACtF,IAAMC,sBAAwC,GAAG,EAAE,CAAA;AACnD,EAAA,KAAK,IAAMC,GAAG,IAAIF,GAAG,EAAE;AACrB,IAAA,IAAIA,GAAG,CAACE,GAAG,CAAC,KAAKC,SAAS,EAAE;AAC1B;AACA;AACAF,MAAAA,sBAAsB,CAACC,GAAG,CAAC,GAAGF,GAAG,CAACE,GAAG,CAAC,CAAA;AACxC,KAAA;AACF,GAAA;AACA,EAAA,OAAOD,sBAAsB,CAAA;AAC/B,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMG,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAA2B,EAAqC;EACvF,OAAO;IACLC,SAAS,EAAED,KAAK,CAACC,SAAS;IAC1BC,OAAO,EAAEF,KAAK,CAACE,OAAO;IACtBC,WAAW,EAAEH,KAAK,CAACG,WAAW;IAC9BC,SAAS,EAAEJ,KAAK,CAACI,SAAS;IAC1BC,KAAK,EAAEL,KAAK,CAACK,KAAK;IAClBC,QAAQ,EAAEN,KAAK,CAACM,QAAQ;IACxBC,MAAM,EAAEP,KAAK,CAACO,MAAM;IACpBC,UAAU,EAAER,KAAK,CAACQ,UAAU;IAC5BC,eAAe,EAAET,KAAK,CAACS,eAAe;IACtCC,aAAa,EAAEV,KAAK,CAACU,aAAa;IAClCC,OAAO,EAAEX,KAAK,CAACW,OAAO;IACtBC,YAAY,EAAEZ,KAAK,CAACY,YAAY;IAChCC,UAAU,EAAEb,KAAK,CAACa,UAAU;IAC5BC,QAAQ,EAAEd,KAAK,CAACc,QAAQ;IACxBC,MAAM,EAAEf,KAAK,CAACe,MAAM;IACpBC,OAAO,EAAEhB,KAAK,CAACgB,OAAO;IACtBC,OAAO,EAAEjB,KAAK,CAACiB,OAAO;IACtBC,YAAY,EAAElB,KAAK,CAACkB,YAAY;IAChCC,SAAS,EAAEnB,KAAK,CAACmB,SAAS;IAC1BC,WAAW,EAAEpB,KAAK,CAACoB,WAAW;IAC9BC,UAAU,EAAErB,KAAK,CAACqB,UAAU;IAC5BC,GAAG,EAAEtB,KAAK,CAACsB,GAAG;IACdC,KAAK,EAAEvB,KAAK,CAACuB,KAAK;IAClBC,MAAM,EAAExB,KAAK,CAACwB,MAAM;IACpBC,IAAI,EAAEzB,KAAK,CAACyB,IAAI;IAChBC,UAAU,EAAE1B,KAAK,CAAC0B,UAAAA;GACnB,CAAA;AACH,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAI3B,KAA0B,EAAuB;AACvE,EAAA,OAAON,0BAA0B,CAACK,eAAe,CAACC,KAAK,CAAC,CAAC,CAAA;AAC3D;;;;"}
|
|
@@ -41,7 +41,7 @@ var Indicator = function Indicator(_ref) {
|
|
|
41
41
|
var _useTheme = useTheme(),
|
|
42
42
|
theme = _useTheme.theme;
|
|
43
43
|
var childrenString = getStringFromReactText(children);
|
|
44
|
-
var fillColor = theme.colors.feedback.background[color].intense;
|
|
44
|
+
var fillColor = color === 'primary' ? theme.colors.surface.background.primary.intense : theme.colors.feedback.background[color].intense;
|
|
45
45
|
var getDimension = useCallback(function () {
|
|
46
46
|
switch (size$1) {
|
|
47
47
|
case 'small':
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Indicator.js","sources":["../../../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useCallback } from 'react';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport Svg from '~components/Icons/_Svg';\nimport Circle from '~components/Icons/_Svg/Circle';\nimport { Text } from '~components/Typography';\nimport { size as sizeToken } from '~tokens/global';\nimport { getStringFromReactText } from '~src/utils/getStringChildren';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype IndicatorCommonProps = {\n /**\n * Sets the color tone\n *\n * @default neutral\n */\n color?: FeedbackColors;\n\n /**\n * Size of the indicator\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n} & TestID &\n StyledPropsBlade;\n\ntype IndicatorWithoutA11yLabel = {\n /**\n * A text label to show alongside the indicator dot\n */\n children: StringChildrenType;\n\n /**\n * a11y label for screen readers\n */\n accessibilityLabel?: string;\n};\n\ntype IndicatorWithA11yLabel = {\n /**\n * a11y label for screen readers\n */\n accessibilityLabel: string;\n\n /**\n * A text label to show alongside the indicator dot\n */\n children?: StringChildrenType;\n};\n\ntype IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);\n\ntype Dimensions = {\n svgSize: number;\n textSize: 'small' | 'medium';\n};\n\nconst Indicator = ({\n accessibilityLabel,\n children,\n size = 'medium',\n color = 'neutral',\n testID,\n ...styledProps\n}: IndicatorProps): ReactElement => {\n const { theme } = useTheme();\n const childrenString = getStringFromReactText(children);\n\n const fillColor
|
|
1
|
+
{"version":3,"file":"Indicator.js","sources":["../../../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useCallback } from 'react';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport Svg from '~components/Icons/_Svg';\nimport Circle from '~components/Icons/_Svg/Circle';\nimport { Text } from '~components/Typography';\nimport { size as sizeToken } from '~tokens/global';\nimport { getStringFromReactText } from '~src/utils/getStringChildren';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype IndicatorCommonProps = {\n /**\n * Sets the color tone\n *\n * @default neutral\n */\n color?: FeedbackColors | 'primary';\n\n /**\n * Size of the indicator\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n} & TestID &\n StyledPropsBlade;\n\ntype IndicatorWithoutA11yLabel = {\n /**\n * A text label to show alongside the indicator dot\n */\n children: StringChildrenType;\n\n /**\n * a11y label for screen readers\n */\n accessibilityLabel?: string;\n};\n\ntype IndicatorWithA11yLabel = {\n /**\n * a11y label for screen readers\n */\n accessibilityLabel: string;\n\n /**\n * A text label to show alongside the indicator dot\n */\n children?: StringChildrenType;\n};\n\ntype IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);\n\ntype Dimensions = {\n svgSize: number;\n textSize: 'small' | 'medium';\n};\n\nconst Indicator = ({\n accessibilityLabel,\n children,\n size = 'medium',\n color = 'neutral',\n testID,\n ...styledProps\n}: IndicatorProps): ReactElement => {\n const { theme } = useTheme();\n const childrenString = getStringFromReactText(children);\n\n const fillColor =\n color === 'primary'\n ? theme.colors.surface.background.primary.intense\n : theme.colors.feedback.background[color].intense;\n const getDimension = useCallback((): Dimensions => {\n switch (size) {\n case 'small':\n return { svgSize: sizeToken[6], textSize: 'small' };\n case 'large':\n return { svgSize: sizeToken[10], textSize: 'medium' };\n default:\n return { svgSize: sizeToken[8], textSize: 'medium' };\n }\n }, [size]);\n const dimensions = getDimension();\n\n const isWeb = !isReactNative();\n const a11yProps = makeAccessible({\n label: accessibilityLabel ?? childrenString,\n ...(isWeb && { role: 'status' }),\n });\n\n return (\n <BaseBox\n display={(isWeb ? 'inline-flex' : 'flex') as never}\n {...a11yProps}\n {...metaAttribute({ name: MetaConstants.Indicator, testID })}\n {...getStyledProps(styledProps)}\n >\n <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n <Svg\n width={String(dimensions.svgSize)}\n height={String(dimensions.svgSize)}\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n >\n <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColor} />\n </Svg>\n <BaseBox marginLeft=\"spacing.2\">\n <Text\n weight=\"medium\"\n color=\"surface.text.gray.subtle\"\n textAlign=\"left\"\n size={dimensions.textSize}\n >\n {children}\n </Text>\n </BaseBox>\n </BaseBox>\n </BaseBox>\n );\n};\n\nexport type { IndicatorProps };\nexport { Indicator };\n"],"names":["Indicator","_ref","accessibilityLabel","children","_ref$size","size","_ref$color","color","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","childrenString","getStringFromReactText","fillColor","colors","surface","background","primary","intense","feedback","getDimension","useCallback","svgSize","sizeToken","textSize","dimensions","isWeb","isReactNative","a11yProps","makeAccessible","_objectSpread","label","role","_jsx","BaseBox","display","metaAttribute","name","MetaConstants","getStyledProps","_jsxs","flexDirection","alignItems","Svg","width","String","height","viewBox","fill","Circle","cx","cy","r","marginLeft","Text","weight","textAlign"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,IAAMA,SAAS,GAAG,SAAZA,SAASA,CAAAC,IAAA,EAOqB;AAAA,EAAA,IANlCC,kBAAkB,GAAAD,IAAA,CAAlBC,kBAAkB;IAClBC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,SAAA,GAAAH,IAAA,CACRI,IAAI;AAAJA,IAAAA,MAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IAAAE,UAAA,GAAAL,IAAA,CACfM,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,UAAA;IACjBE,MAAM,GAAAP,IAAA,CAANO,MAAM;AACHC,IAAAA,WAAW,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA,CAAA;AAEd,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;AACb,EAAA,IAAMC,cAAc,GAAGC,sBAAsB,CAACb,QAAQ,CAAC,CAAA;AAEvD,EAAA,IAAMc,SAAS,GACbV,KAAK,KAAK,SAAS,GACfO,KAAK,CAACI,MAAM,CAACC,OAAO,CAACC,UAAU,CAACC,OAAO,CAACC,OAAO,GAC/CR,KAAK,CAACI,MAAM,CAACK,QAAQ,CAACH,UAAU,CAACb,KAAK,CAAC,CAACe,OAAO,CAAA;AACrD,EAAA,IAAME,YAAY,GAAGC,WAAW,CAAC,YAAkB;AACjD,IAAA,QAAQpB,MAAI;AACV,MAAA,KAAK,OAAO;QACV,OAAO;AAAEqB,UAAAA,OAAO,EAAEC,IAAS,CAAC,CAAC,CAAC;AAAEC,UAAAA,QAAQ,EAAE,OAAA;SAAS,CAAA;AACrD,MAAA,KAAK,OAAO;QACV,OAAO;AAAEF,UAAAA,OAAO,EAAEC,IAAS,CAAC,EAAE,CAAC;AAAEC,UAAAA,QAAQ,EAAE,QAAA;SAAU,CAAA;AACvD,MAAA;QACE,OAAO;AAAEF,UAAAA,OAAO,EAAEC,IAAS,CAAC,CAAC,CAAC;AAAEC,UAAAA,QAAQ,EAAE,QAAA;SAAU,CAAA;AACxD,KAAA;AACF,GAAC,EAAE,CAACvB,MAAI,CAAC,CAAC,CAAA;AACV,EAAA,IAAMwB,UAAU,GAAGL,YAAY,EAAE,CAAA;AAEjC,EAAA,IAAMM,KAAK,GAAG,CAACC,aAAa,EAAE,CAAA;AAC9B,EAAA,IAAMC,SAAS,GAAGC,cAAc,CAAAC,aAAA,CAAA;AAC9BC,IAAAA,KAAK,EAAEjC,kBAAkB,KAAA,IAAA,IAAlBA,kBAAkB,KAAA,KAAA,CAAA,GAAlBA,kBAAkB,GAAIa,cAAAA;AAAc,GAAA,EACvCe,KAAK,IAAI;AAAEM,IAAAA,IAAI,EAAE,QAAA;AAAS,GAAC,CAChC,CAAC,CAAA;EAEF,oBACEC,GAAA,CAACC,OAAO,EAAAJ,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACNK,IAAAA,OAAO,EAAGT,KAAK,GAAG,aAAa,GAAG,MAAA;GAC9BE,EAAAA,SAAS,CACTQ,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAAC1C,SAAS;AAAEQ,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EACxDmC,cAAc,CAAClC,WAAW,CAAC,CAAA,EAAA,EAAA,EAAA;IAAAN,QAAA,eAE/ByC,IAAA,CAACN,OAAO,EAAA;AAACC,MAAAA,OAAO,EAAC,MAAM;AAACM,MAAAA,aAAa,EAAC,KAAK;AAACC,MAAAA,UAAU,EAAC,QAAQ;MAAA3C,QAAA,EAAA,cAC7DkC,GAAA,CAACU,GAAG,EAAA;AACFC,QAAAA,KAAK,EAAEC,MAAM,CAACpB,UAAU,CAACH,OAAO,CAAE;AAClCwB,QAAAA,MAAM,EAAED,MAAM,CAACpB,UAAU,CAACH,OAAO,CAAE;AACnCyB,QAAAA,OAAO,EAAC,WAAW;AACnBC,QAAAA,IAAI,EAAC,MAAM;QAAAjD,QAAA,eAEXkC,GAAA,CAACgB,MAAM,EAAA;AAACC,UAAAA,EAAE,EAAC,GAAG;AAACC,UAAAA,EAAE,EAAC,GAAG;AAACC,UAAAA,CAAC,EAAC,GAAG;AAACJ,UAAAA,IAAI,EAAEnC,SAAAA;SAAY,CAAA;AAAC,OAC5C,CAAC,eACNoB,GAAA,CAACC,OAAO,EAAA;AAACmB,QAAAA,UAAU,EAAC,WAAW;QAAAtD,QAAA,eAC7BkC,GAAA,CAACqB,IAAI,EAAA;AACHC,UAAAA,MAAM,EAAC,QAAQ;AACfpD,UAAAA,KAAK,EAAC,0BAA0B;AAChCqD,UAAAA,SAAS,EAAC,MAAM;UAChBvD,IAAI,EAAEwB,UAAU,CAACD,QAAS;AAAAzB,UAAAA,QAAA,EAEzBA,QAAAA;SACG,CAAA;AAAC,OACA,CAAC,CAAA;KACH,CAAA;AAAC,GAAA,CACH,CAAC,CAAA;AAEd;;;;"}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
3
|
+
import React__default from 'react';
|
|
4
|
+
import { useStepGroup, StepGroupContext } from './StepGroupContext.js';
|
|
5
|
+
import { componentIds } from './componentIds.js';
|
|
6
|
+
import '../Box/BaseBox/index.js';
|
|
7
|
+
import '../Box/styledProps/index.js';
|
|
8
|
+
import '../../utils/isValidAllowedChildren/index.js';
|
|
9
|
+
import '../../utils/assignWithoutSideEffects/index.js';
|
|
10
|
+
import '../../utils/metaAttribute/index.js';
|
|
11
|
+
import { jsx } from 'react/jsx-runtime';
|
|
12
|
+
import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
|
|
13
|
+
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
|
|
14
|
+
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
|
|
15
|
+
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
|
|
16
|
+
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
|
|
17
|
+
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
|
|
18
|
+
|
|
19
|
+
var _excluded = ["_nestingLevel", "children"],
|
|
20
|
+
_excluded2 = ["size", "orientation", "children", "testID", "_nestingLevel", "width", "minWidth", "maxWidth"];
|
|
21
|
+
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; }
|
|
22
|
+
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; }
|
|
23
|
+
var useChildrenWithIndexes = function useChildrenWithIndexes(_ref) {
|
|
24
|
+
var _nestingLevel = _ref._nestingLevel,
|
|
25
|
+
children = _ref.children,
|
|
26
|
+
parentStepGroupProps = _objectWithoutProperties(_ref, _excluded);
|
|
27
|
+
var _useStepGroup = useStepGroup(),
|
|
28
|
+
totalItemsFromPreviousParent = _useStepGroup.totalItemsInParentGroupCount;
|
|
29
|
+
var totalIndex = 0;
|
|
30
|
+
var traverseGroupAndAddIndex = function traverseGroupAndAddIndex(groupChildrenProp) {
|
|
31
|
+
var nestingLevelOfGroup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
32
|
+
var stepItemIndex = 0;
|
|
33
|
+
return React__default.Children.map(groupChildrenProp, function (child, index) {
|
|
34
|
+
var componentId = getComponentId(child);
|
|
35
|
+
if (componentId === componentIds.StepItem) {
|
|
36
|
+
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
37
|
+
_index: stepItemIndex++,
|
|
38
|
+
_totalIndex: totalIndex++,
|
|
39
|
+
_nestingLevel: nestingLevelOfGroup,
|
|
40
|
+
key: index
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
if (componentId === componentIds.StepGroup && nestingLevelOfGroup < 3) {
|
|
44
|
+
return /*#__PURE__*/React__default.cloneElement(child, _objectSpread(_objectSpread({}, parentStepGroupProps), {}, {
|
|
45
|
+
children: traverseGroupAndAddIndex(child.props.children, nestingLevelOfGroup + 1),
|
|
46
|
+
_nestingLevel: nestingLevelOfGroup + 1
|
|
47
|
+
}));
|
|
48
|
+
}
|
|
49
|
+
return child;
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
var childrenWithIndex = React__default.useMemo(function () {
|
|
53
|
+
return _nestingLevel === 0 ? traverseGroupAndAddIndex(children) : children;
|
|
54
|
+
},
|
|
55
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
56
|
+
[children, _nestingLevel]);
|
|
57
|
+
var totalItemsInParentGroupCount = _nestingLevel === 0 ? totalIndex : totalItemsFromPreviousParent;
|
|
58
|
+
return {
|
|
59
|
+
childrenWithIndex: childrenWithIndex,
|
|
60
|
+
totalItemsInParentGroupCount: totalItemsInParentGroupCount
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
var _StepGroup = function _StepGroup(_ref2) {
|
|
64
|
+
var _ref2$size = _ref2.size,
|
|
65
|
+
size = _ref2$size === void 0 ? 'medium' : _ref2$size,
|
|
66
|
+
_ref2$orientation = _ref2.orientation,
|
|
67
|
+
orientation = _ref2$orientation === void 0 ? 'vertical' : _ref2$orientation,
|
|
68
|
+
children = _ref2.children,
|
|
69
|
+
testID = _ref2.testID,
|
|
70
|
+
_ref2$_nestingLevel = _ref2._nestingLevel,
|
|
71
|
+
_nestingLevel = _ref2$_nestingLevel === void 0 ? 0 : _ref2$_nestingLevel,
|
|
72
|
+
width = _ref2.width,
|
|
73
|
+
minWidth = _ref2.minWidth,
|
|
74
|
+
maxWidth = _ref2.maxWidth,
|
|
75
|
+
styledProps = _objectWithoutProperties(_ref2, _excluded2);
|
|
76
|
+
var itemsInGroupCount = React__default.Children.count(children);
|
|
77
|
+
var _useChildrenWithIndex = useChildrenWithIndexes({
|
|
78
|
+
children: children,
|
|
79
|
+
size: size,
|
|
80
|
+
orientation: orientation,
|
|
81
|
+
_nestingLevel: _nestingLevel
|
|
82
|
+
}),
|
|
83
|
+
childrenWithIndex = _useChildrenWithIndex.childrenWithIndex,
|
|
84
|
+
totalItemsInParentGroupCount = _useChildrenWithIndex.totalItemsInParentGroupCount;
|
|
85
|
+
var contextValue = React__default.useMemo(function () {
|
|
86
|
+
return {
|
|
87
|
+
size: size,
|
|
88
|
+
orientation: orientation,
|
|
89
|
+
itemsInGroupCount: itemsInGroupCount,
|
|
90
|
+
totalItemsInParentGroupCount: totalItemsInParentGroupCount
|
|
91
|
+
};
|
|
92
|
+
}, [size, orientation, itemsInGroupCount, totalItemsInParentGroupCount]);
|
|
93
|
+
var isHorizontal = orientation === 'horizontal';
|
|
94
|
+
var defaultWidth = isHorizontal ? '100%' : undefined;
|
|
95
|
+
return /*#__PURE__*/jsx(StepGroupContext.Provider, {
|
|
96
|
+
value: contextValue,
|
|
97
|
+
children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({}, getStyledProps(styledProps)), {}, {
|
|
98
|
+
display: "inline-flex",
|
|
99
|
+
maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : '100%',
|
|
100
|
+
minWidth: minWidth,
|
|
101
|
+
width: width !== null && width !== void 0 ? width : defaultWidth,
|
|
102
|
+
padding: _nestingLevel === 0 ? 'spacing.4' : undefined,
|
|
103
|
+
overflowX: orientation === 'horizontal' ? 'auto' : undefined,
|
|
104
|
+
flexDirection: orientation === 'vertical' ? 'column' : 'row'
|
|
105
|
+
}, metaAttribute({
|
|
106
|
+
name: MetaConstants.StepGroup,
|
|
107
|
+
testID: testID
|
|
108
|
+
})), {}, {
|
|
109
|
+
children: childrenWithIndex
|
|
110
|
+
}))
|
|
111
|
+
});
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* ## StepGroup
|
|
116
|
+
*
|
|
117
|
+
* Step Group visualises sequential processes with a consistent structure. It can be interactive, guiding users through steps, or function as a timeline for reference.
|
|
118
|
+
*
|
|
119
|
+
* ### Usage
|
|
120
|
+
*
|
|
121
|
+
* ```jsx
|
|
122
|
+
* <StepGroup orientation="vertical" size="medium">
|
|
123
|
+
* <StepItem title="Personal Details" />
|
|
124
|
+
* <StepItem title="Business Details" />
|
|
125
|
+
* </StepGroup>
|
|
126
|
+
* ```
|
|
127
|
+
*
|
|
128
|
+
* ---
|
|
129
|
+
*
|
|
130
|
+
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}
|
|
131
|
+
*/
|
|
132
|
+
var StepGroup = /*#__PURE__*/assignWithoutSideEffects(_StepGroup, {
|
|
133
|
+
componentId: componentIds.StepGroup,
|
|
134
|
+
displayName: componentIds.StepGroup
|
|
135
|
+
});
|
|
136
|
+
|
|
137
|
+
export { StepGroup };
|
|
138
|
+
//# sourceMappingURL=StepGroup.web.js.map
|
|
@@ -0,0 +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';\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 size = 'medium',\n orientation = 'vertical',\n children,\n testID,\n _nestingLevel = 0,\n width,\n minWidth,\n maxWidth,\n ...styledProps\n}: StepGroupProps): 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 {...getStyledProps(styledProps)}\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 >\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(_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","_ref2$size","size","_ref2$orientation","orientation","testID","_ref2$_nestingLevel","width","minWidth","maxWidth","styledProps","_excluded2","itemsInGroupCount","count","_useChildrenWithIndex","contextValue","isHorizontal","defaultWidth","_jsx","StepGroupContext","Provider","value","BaseBox","getStyledProps","display","padding","overflowX","flexDirection","metaAttribute","name","MetaConstants","assignWithoutSideEffects","displayName"],"mappings":"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"}
|