@razorpay/blade 12.49.7 → 12.51.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/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/Charts/CommonChartComponents/CommonChartComponents.native.js +12 -0
- package/build/lib/native/components/Charts/CommonChartComponents/CommonChartComponents.native.js.map +1 -0
- package/build/lib/native/components/Charts/LineChart/LineChart.native.js +12 -0
- package/build/lib/native/components/Charts/LineChart/LineChart.native.js.map +1 -0
- package/build/lib/native/components/index.js +2 -0
- package/build/lib/native/components/index.js.map +1 -1
- package/build/lib/native/tokens/theme/bladeTheme.js +1 -1
- package/build/lib/native/tokens/theme/bladeTheme.js.map +1 -1
- package/build/lib/native/tokens/theme/theme.js.map +1 -1
- package/build/lib/web/development/components/Box/BaseBox/baseBoxStyles.js +5 -1
- 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 +3 -0
- package/build/lib/web/development/components/Box/Box.js.map +1 -1
- package/build/lib/web/development/components/Charts/CommonChartComponents/CommonChartComponents.web.js +285 -0
- package/build/lib/web/development/components/Charts/CommonChartComponents/CommonChartComponents.web.js.map +1 -0
- package/build/lib/web/development/components/Charts/CommonChartComponents/index.js +2 -0
- package/build/lib/web/development/components/Charts/CommonChartComponents/index.js.map +1 -0
- package/build/lib/web/development/components/Charts/CommonChartComponents/tokens.js +15 -0
- package/build/lib/web/development/components/Charts/CommonChartComponents/tokens.js.map +1 -0
- package/build/lib/web/development/components/Charts/CommonChartComponents/utils.js +60 -0
- package/build/lib/web/development/components/Charts/CommonChartComponents/utils.js.map +1 -0
- package/build/lib/web/development/components/Charts/LineChart/LineChart.web.js +107 -0
- package/build/lib/web/development/components/Charts/LineChart/LineChart.web.js.map +1 -0
- package/build/lib/web/development/components/Charts/LineChart/componentIds.js +6 -0
- package/build/lib/web/development/components/Charts/LineChart/componentIds.js.map +1 -0
- package/build/lib/web/development/components/Charts/LineChart/index.js +2 -0
- package/build/lib/web/development/components/Charts/LineChart/index.js.map +1 -0
- package/build/lib/web/development/components/Charts/index.js +5 -0
- package/build/lib/web/development/components/Charts/index.js.map +1 -0
- package/build/lib/web/development/components/Charts/utils/index.js +2 -0
- package/build/lib/web/development/components/Charts/utils/index.js.map +1 -0
- package/build/lib/web/development/components/Charts/utils/useColorTheme.js +19 -0
- package/build/lib/web/development/components/Charts/utils/useColorTheme.js.map +1 -0
- package/build/lib/web/development/components/Input/BaseInput/AnimatedBaseInputWrapper.web.js +5 -5
- package/build/lib/web/development/components/Input/BaseInput/AnimatedBaseInputWrapper.web.js.map +1 -1
- package/build/lib/web/development/components/Tag/AnimatedTag.web.js +4 -4
- package/build/lib/web/development/components/Tag/AnimatedTag.web.js.map +1 -1
- package/build/lib/web/development/components/index.js +3 -0
- package/build/lib/web/development/components/index.js.map +1 -1
- package/build/lib/web/development/tokens/theme/bladeTheme.js +350 -0
- package/build/lib/web/development/tokens/theme/bladeTheme.js.map +1 -1
- package/build/lib/web/development/tokens/theme/theme.js.map +1 -1
- package/build/lib/web/production/components/Box/BaseBox/baseBoxStyles.js +5 -1
- 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 +3 -0
- package/build/lib/web/production/components/Box/Box.js.map +1 -1
- package/build/lib/web/production/components/Charts/CommonChartComponents/CommonChartComponents.web.js +285 -0
- package/build/lib/web/production/components/Charts/CommonChartComponents/CommonChartComponents.web.js.map +1 -0
- package/build/lib/web/production/components/Charts/CommonChartComponents/index.js +2 -0
- package/build/lib/web/production/components/Charts/CommonChartComponents/index.js.map +1 -0
- package/build/lib/web/production/components/Charts/CommonChartComponents/tokens.js +15 -0
- package/build/lib/web/production/components/Charts/CommonChartComponents/tokens.js.map +1 -0
- package/build/lib/web/production/components/Charts/CommonChartComponents/utils.js +60 -0
- package/build/lib/web/production/components/Charts/CommonChartComponents/utils.js.map +1 -0
- package/build/lib/web/production/components/Charts/LineChart/LineChart.web.js +107 -0
- package/build/lib/web/production/components/Charts/LineChart/LineChart.web.js.map +1 -0
- package/build/lib/web/production/components/Charts/LineChart/componentIds.js +6 -0
- package/build/lib/web/production/components/Charts/LineChart/componentIds.js.map +1 -0
- package/build/lib/web/production/components/Charts/LineChart/index.js +2 -0
- package/build/lib/web/production/components/Charts/LineChart/index.js.map +1 -0
- package/build/lib/web/production/components/Charts/index.js +5 -0
- package/build/lib/web/production/components/Charts/index.js.map +1 -0
- package/build/lib/web/production/components/Charts/utils/index.js +2 -0
- package/build/lib/web/production/components/Charts/utils/index.js.map +1 -0
- package/build/lib/web/production/components/Charts/utils/useColorTheme.js +19 -0
- package/build/lib/web/production/components/Charts/utils/useColorTheme.js.map +1 -0
- package/build/lib/web/production/components/Input/BaseInput/AnimatedBaseInputWrapper.web.js +5 -5
- package/build/lib/web/production/components/Input/BaseInput/AnimatedBaseInputWrapper.web.js.map +1 -1
- package/build/lib/web/production/components/Tag/AnimatedTag.web.js +4 -4
- package/build/lib/web/production/components/Tag/AnimatedTag.web.js.map +1 -1
- package/build/lib/web/production/components/index.js +3 -0
- package/build/lib/web/production/components/index.js.map +1 -1
- package/build/lib/web/production/tokens/theme/bladeTheme.js +350 -0
- package/build/lib/web/production/tokens/theme/bladeTheme.js.map +1 -1
- package/build/lib/web/production/tokens/theme/theme.js.map +1 -1
- package/build/types/components/index.d.ts +730 -4423
- package/build/types/components/index.native.d.ts +212 -503
- package/build/types/tokens/index.d.ts +12 -0
- package/build/types/tokens/index.native.d.ts +12 -0
- package/build/types/utils/index.d.ts +31 -0
- package/build/types/utils/index.native.d.ts +31 -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\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
|
+
{"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 backdropFilter: getResponsiveValue(props.backdropFilter, breakpoint),\n transition: getResponsiveValue(props.transition, 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 // Animation\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","backdropFilter","transition","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 { DataAnalyticsAttribute, 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--docs\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:\n | BackgroundColorString<'surface'>\n | BackgroundColorString<'overlay'>\n | BackgroundColorString<'feedback'>\n | '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' | 'flexWrap'> &\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 DataAnalyticsAttribute\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 DataAnalyticsAttribute &\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 { DataAnalyticsAttribute, 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 | 'backdropFilter'\n | 'transition'\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--docs\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:\n | BackgroundColorString<'surface'>\n | BackgroundColorString<'overlay'>\n | BackgroundColorString<'feedback'>\n | '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' | 'flexWrap'> &\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 DataAnalyticsAttribute\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 DataAnalyticsAttribute &\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, GridProps };\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;;;;"}
|
|
@@ -129,6 +129,7 @@ var makeBoxProps = function makeBoxProps(props) {
|
|
|
129
129
|
elevation: props.elevation,
|
|
130
130
|
opacity: props.opacity,
|
|
131
131
|
visibility: props.visibility,
|
|
132
|
+
backdropFilter: props.backdropFilter,
|
|
132
133
|
// Border
|
|
133
134
|
borderWidth: props.borderWidth,
|
|
134
135
|
borderColor: props.borderColor,
|
|
@@ -154,6 +155,8 @@ var makeBoxProps = function makeBoxProps(props) {
|
|
|
154
155
|
transform: props.transform,
|
|
155
156
|
transformOrigin: props.transformOrigin,
|
|
156
157
|
clipPath: props.clipPath,
|
|
158
|
+
// Animation
|
|
159
|
+
transition: props.transition,
|
|
157
160
|
// callbacks
|
|
158
161
|
onMouseEnter: props.onMouseEnter,
|
|
159
162
|
onMouseLeave: props.onMouseLeave,
|
|
@@ -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';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst validateBackgroundString = (stringBackgroundColorValue: string): void => {\n if (__DEV__) {\n if (\n !stringBackgroundColorValue.startsWith('surface.background') &&\n !stringBackgroundColorValue.startsWith('overlay.') &&\n !stringBackgroundColorValue.startsWith('feedback.background') &&\n stringBackgroundColorValue !== 'transparent'\n ) {\n throwBladeError({\n message: `Oops! Currently you can only use \\`transparent\\`, \\`surface.background.*\\`, and \\`overlay.*\\` 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 {...makeAnalyticsAttribute(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","makeAnalyticsAttribute","assignWithoutSideEffects","forwardRef","displayName","componentId"],"mappings":"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"}
|
|
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';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst validateBackgroundString = (stringBackgroundColorValue: string): void => {\n if (__DEV__) {\n if (\n !stringBackgroundColorValue.startsWith('surface.background') &&\n !stringBackgroundColorValue.startsWith('overlay.') &&\n !stringBackgroundColorValue.startsWith('feedback.background') &&\n stringBackgroundColorValue !== 'transparent'\n ) {\n throwBladeError({\n message: `Oops! Currently you can only use \\`transparent\\`, \\`surface.background.*\\`, and \\`overlay.*\\` 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 backdropFilter: props.backdropFilter,\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 // Animation\n transition: props.transition,\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 {...makeAnalyticsAttribute(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","backdropFilter","borderWidth","borderColor","borderStyle","borderTopWidth","borderTopColor","borderTopStyle","borderRightWidth","borderRightColor","borderRightStyle","borderBottomWidth","borderBottomColor","borderBottomStyle","borderLeftWidth","borderLeftColor","borderLeftStyle","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","transform","transformOrigin","clipPath","transition","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","makeAnalyticsAttribute","assignWithoutSideEffects","forwardRef","displayName","componentId"],"mappings":"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"}
|
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
|
+
import 'react';
|
|
3
|
+
import { XAxis, YAxis, CartesianGrid, Tooltip, Legend, ReferenceLine } from 'recharts';
|
|
4
|
+
import { X_OFFSET, Y_OFFSET, X_AXIS_TEXT_BASELINE, TEXT_BASELINE, PADDING_HORIZONTAL, PADDING_VERTICAL, RECT_HEIGHT } from './tokens.js';
|
|
5
|
+
import { calculateTextWidth } from './utils.js';
|
|
6
|
+
import '../../Typography/index.js';
|
|
7
|
+
import '../../Box/index.js';
|
|
8
|
+
import '../../BladeProvider/index.js';
|
|
9
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
10
|
+
import useTheme from '../../BladeProvider/useTheme.js';
|
|
11
|
+
import { Heading } from '../../Typography/Heading/Heading.js';
|
|
12
|
+
import { Box } from '../../Box/Box.js';
|
|
13
|
+
import { Text } from '../../Typography/Text/Text.js';
|
|
14
|
+
|
|
15
|
+
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; }
|
|
16
|
+
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; }
|
|
17
|
+
var ChartXAxis = function ChartXAxis(props) {
|
|
18
|
+
var _useTheme = useTheme(),
|
|
19
|
+
theme = _useTheme.theme;
|
|
20
|
+
return /*#__PURE__*/jsx(XAxis, _objectSpread(_objectSpread({}, props), {}, {
|
|
21
|
+
tick: {
|
|
22
|
+
fill: theme.colors.surface.text.gray.normal,
|
|
23
|
+
fontSize: theme.typography.fonts.size[75],
|
|
24
|
+
fontFamily: theme.typography.fonts.family.text,
|
|
25
|
+
fontWeight: theme.typography.fonts.weight.regular,
|
|
26
|
+
letterSpacing: theme.typography.letterSpacings[100]
|
|
27
|
+
},
|
|
28
|
+
stroke: theme.colors.surface.border.gray.muted,
|
|
29
|
+
label: function label(_ref) {
|
|
30
|
+
var viewBox = _ref.viewBox;
|
|
31
|
+
return /*#__PURE__*/jsx("text", {
|
|
32
|
+
x: viewBox.x + viewBox.width / 2 - X_OFFSET,
|
|
33
|
+
y: viewBox.y + Y_OFFSET + X_AXIS_TEXT_BASELINE,
|
|
34
|
+
textAnchor: "middle",
|
|
35
|
+
fill: theme.colors.surface.text.gray.subtle,
|
|
36
|
+
fontSize: theme.typography.fonts.size[75],
|
|
37
|
+
fontFamily: theme.typography.fonts.family.text,
|
|
38
|
+
fontWeight: theme.typography.fonts.weight.medium,
|
|
39
|
+
letterSpacing: theme.typography.letterSpacings[100],
|
|
40
|
+
children: props === null || props === void 0 ? void 0 : props.label
|
|
41
|
+
});
|
|
42
|
+
},
|
|
43
|
+
dataKey: props === null || props === void 0 ? void 0 : props.dataKey
|
|
44
|
+
}));
|
|
45
|
+
};
|
|
46
|
+
var ChartYAxis = function ChartYAxis(props) {
|
|
47
|
+
var _useTheme2 = useTheme(),
|
|
48
|
+
theme = _useTheme2.theme;
|
|
49
|
+
return /*#__PURE__*/jsx(YAxis, _objectSpread(_objectSpread({}, props), {}, {
|
|
50
|
+
tick: {
|
|
51
|
+
fill: theme.colors.surface.text.gray.normal,
|
|
52
|
+
fontSize: theme.typography.fonts.size[75],
|
|
53
|
+
fontFamily: theme.typography.fonts.family.text,
|
|
54
|
+
fontWeight: theme.typography.fonts.weight.regular,
|
|
55
|
+
letterSpacing: theme.typography.letterSpacings[100]
|
|
56
|
+
},
|
|
57
|
+
stroke: theme.colors.surface.border.gray.muted,
|
|
58
|
+
label: {
|
|
59
|
+
value: props === null || props === void 0 ? void 0 : props.label,
|
|
60
|
+
position: 'insideLeft',
|
|
61
|
+
style: {
|
|
62
|
+
textAnchor: 'middle',
|
|
63
|
+
fill: theme.colors.surface.text.gray.subtle,
|
|
64
|
+
fontSize: theme.typography.fonts.size[75],
|
|
65
|
+
fontWeight: theme.typography.fonts.weight.medium,
|
|
66
|
+
fontFamily: theme.typography.fonts.family.text,
|
|
67
|
+
letterSpacing: theme.typography.letterSpacings[100],
|
|
68
|
+
lineHeight: theme.typography.lineHeights[500]
|
|
69
|
+
},
|
|
70
|
+
angle: -90,
|
|
71
|
+
fill: theme.colors.surface.text.gray.subtle
|
|
72
|
+
},
|
|
73
|
+
dataKey: props === null || props === void 0 ? void 0 : props.dataKey
|
|
74
|
+
}));
|
|
75
|
+
};
|
|
76
|
+
var ChartCartesianGrid = function ChartCartesianGrid(props) {
|
|
77
|
+
var _useTheme3 = useTheme(),
|
|
78
|
+
theme = _useTheme3.theme;
|
|
79
|
+
return /*#__PURE__*/jsx(CartesianGrid, _objectSpread({
|
|
80
|
+
stroke: theme.colors.surface.border.gray.muted,
|
|
81
|
+
vertical: false
|
|
82
|
+
}, props));
|
|
83
|
+
};
|
|
84
|
+
var ChartTooltip = function ChartTooltip(props) {
|
|
85
|
+
var _useTheme4 = useTheme(),
|
|
86
|
+
theme = _useTheme4.theme;
|
|
87
|
+
return /*#__PURE__*/jsx(Tooltip, _objectSpread({
|
|
88
|
+
content: function content(_ref2) {
|
|
89
|
+
var payload = _ref2.payload,
|
|
90
|
+
label = _ref2.label;
|
|
91
|
+
return /*#__PURE__*/jsxs("div", {
|
|
92
|
+
style: {
|
|
93
|
+
backgroundColor: theme.colors.surface.icon.staticBlack.normal,
|
|
94
|
+
borderRadius: theme.border.radius.large,
|
|
95
|
+
border: "1px solid ".concat(theme.colors.surface.border.gray.muted),
|
|
96
|
+
padding: theme.spacing[4]
|
|
97
|
+
},
|
|
98
|
+
children: [/*#__PURE__*/jsx(Heading, {
|
|
99
|
+
size: "small",
|
|
100
|
+
weight: "semibold",
|
|
101
|
+
color: "surface.text.staticWhite.normal",
|
|
102
|
+
children: label
|
|
103
|
+
}), /*#__PURE__*/jsx(Box, {
|
|
104
|
+
paddingTop: "spacing.4",
|
|
105
|
+
children: payload.map(function (item) {
|
|
106
|
+
return /*#__PURE__*/jsxs(Box, {
|
|
107
|
+
display: "flex",
|
|
108
|
+
alignItems: "center",
|
|
109
|
+
justifyContent: "space-between",
|
|
110
|
+
gap: "spacing.4",
|
|
111
|
+
children: [/*#__PURE__*/jsxs(Box, {
|
|
112
|
+
display: "flex",
|
|
113
|
+
gap: "spacing.3",
|
|
114
|
+
alignItems: "center",
|
|
115
|
+
justifyContent: "center",
|
|
116
|
+
children: [/*#__PURE__*/jsx("div", {
|
|
117
|
+
style: {
|
|
118
|
+
width: theme.spacing[4],
|
|
119
|
+
height: theme.spacing[4],
|
|
120
|
+
backgroundColor: item.color,
|
|
121
|
+
borderRadius: theme.border.radius.small
|
|
122
|
+
}
|
|
123
|
+
}), /*#__PURE__*/jsx(Text, {
|
|
124
|
+
size: "small",
|
|
125
|
+
weight: "regular",
|
|
126
|
+
color: "surface.text.staticWhite.normal",
|
|
127
|
+
children: item.name
|
|
128
|
+
})]
|
|
129
|
+
}), /*#__PURE__*/jsx(Text, {
|
|
130
|
+
size: "small",
|
|
131
|
+
weight: "regular",
|
|
132
|
+
color: "surface.text.staticWhite.normal",
|
|
133
|
+
children: item.value
|
|
134
|
+
})]
|
|
135
|
+
}, item.name);
|
|
136
|
+
})
|
|
137
|
+
})]
|
|
138
|
+
});
|
|
139
|
+
},
|
|
140
|
+
cursor: {
|
|
141
|
+
fill: 'rgba(0, 0, 0, 0.1)',
|
|
142
|
+
stroke: theme.colors.surface.border.gray.muted
|
|
143
|
+
}
|
|
144
|
+
}, props));
|
|
145
|
+
};
|
|
146
|
+
var CustomSquareLegend = function CustomSquareLegend(props) {
|
|
147
|
+
var payload = props.payload;
|
|
148
|
+
var _useTheme5 = useTheme(),
|
|
149
|
+
theme = _useTheme5.theme;
|
|
150
|
+
if (!payload || payload.length === 0) {
|
|
151
|
+
return null;
|
|
152
|
+
}
|
|
153
|
+
/*
|
|
154
|
+
This is a custom legend component that is used to display the legend for the chart.
|
|
155
|
+
we need to show the legend only if the legendType is not none. (for example in line chart we don't want to show the legend for the reference line)
|
|
156
|
+
so we are filtering the payload and then mapping over it to display the legend.
|
|
157
|
+
*/
|
|
158
|
+
var filteredPayload = payload.filter(function (entry) {
|
|
159
|
+
var _entry$payload;
|
|
160
|
+
return (entry === null || entry === void 0 || (_entry$payload = entry.payload) === null || _entry$payload === void 0 ? void 0 : _entry$payload.legendType) !== 'none';
|
|
161
|
+
});
|
|
162
|
+
return /*#__PURE__*/jsx(Box, {
|
|
163
|
+
display: "flex",
|
|
164
|
+
justifyContent: "center",
|
|
165
|
+
gap: "spacing.5",
|
|
166
|
+
children: filteredPayload.map(function (entry, index) {
|
|
167
|
+
return /*#__PURE__*/jsx(Box, {
|
|
168
|
+
display: "flex",
|
|
169
|
+
alignItems: "center",
|
|
170
|
+
children: /*#__PURE__*/jsxs(Box, {
|
|
171
|
+
display: "flex",
|
|
172
|
+
gap: "spacing.3",
|
|
173
|
+
justifyContent: "center",
|
|
174
|
+
alignItems: "center",
|
|
175
|
+
children: [/*#__PURE__*/jsx("span", {
|
|
176
|
+
style: {
|
|
177
|
+
backgroundColor: entry.color,
|
|
178
|
+
// Uses the color of the line/bar
|
|
179
|
+
width: theme.spacing[4],
|
|
180
|
+
// Size of the square
|
|
181
|
+
height: theme.spacing[4],
|
|
182
|
+
// Size of the square
|
|
183
|
+
display: 'inline-block',
|
|
184
|
+
borderRadius: theme.border.radius.small
|
|
185
|
+
}
|
|
186
|
+
}), /*#__PURE__*/jsx(Text, {
|
|
187
|
+
size: "medium",
|
|
188
|
+
color: "surface.text.gray.muted",
|
|
189
|
+
children: entry.value
|
|
190
|
+
})]
|
|
191
|
+
})
|
|
192
|
+
}, "item-".concat(index));
|
|
193
|
+
})
|
|
194
|
+
});
|
|
195
|
+
};
|
|
196
|
+
var ChartLegend = function ChartLegend(props) {
|
|
197
|
+
var _useTheme6 = useTheme(),
|
|
198
|
+
theme = _useTheme6.theme;
|
|
199
|
+
return /*#__PURE__*/jsx(Legend, _objectSpread({
|
|
200
|
+
wrapperStyle: {
|
|
201
|
+
fontFamily: theme.typography.fonts.family.text,
|
|
202
|
+
fontSize: theme.typography.fonts.size[100],
|
|
203
|
+
color: theme.colors.surface.text.gray.normal,
|
|
204
|
+
paddingTop: theme.spacing[5]
|
|
205
|
+
},
|
|
206
|
+
align: "center",
|
|
207
|
+
content: /*#__PURE__*/jsx(CustomSquareLegend, {})
|
|
208
|
+
}, props));
|
|
209
|
+
};
|
|
210
|
+
var CustomReferenceLabel = function CustomReferenceLabel(_ref3) {
|
|
211
|
+
var viewBox = _ref3.viewBox,
|
|
212
|
+
value = _ref3.value,
|
|
213
|
+
isVertical = _ref3.isVertical;
|
|
214
|
+
// Extract viewBox coordinates with fallback values to prevent undefined errors.
|
|
215
|
+
// viewBox contains the positioning information for the reference line label from Recharts.
|
|
216
|
+
var _ref4 = viewBox !== null && viewBox !== void 0 ? viewBox : {
|
|
217
|
+
x: 0,
|
|
218
|
+
y: 0,
|
|
219
|
+
width: 0
|
|
220
|
+
},
|
|
221
|
+
x = _ref4.x,
|
|
222
|
+
y = _ref4.y,
|
|
223
|
+
width = _ref4.width;
|
|
224
|
+
var _useTheme7 = useTheme(),
|
|
225
|
+
theme = _useTheme7.theme;
|
|
226
|
+
|
|
227
|
+
// Calculate dynamic text width to ensure the background rectangle fits the text perfectly.
|
|
228
|
+
// This prevents text overflow for long labels and avoids unnecessarily large rectangles for short text.
|
|
229
|
+
// The function also handles text truncation with ellipsis if the text exceeds the maximum width.
|
|
230
|
+
var _ref5 = value ? calculateTextWidth(value, theme) : {
|
|
231
|
+
width: 80,
|
|
232
|
+
displayText: value !== null && value !== void 0 ? value : ''
|
|
233
|
+
},
|
|
234
|
+
RECT_WIDTH = _ref5.width,
|
|
235
|
+
displayText = _ref5.displayText;
|
|
236
|
+
var rect_x = isVertical ? x + width - RECT_WIDTH / 2 : x + width - RECT_WIDTH;
|
|
237
|
+
var rect_y = isVertical ? y : y - TEXT_BASELINE;
|
|
238
|
+
// Text position with padding inside the rectangle
|
|
239
|
+
var text_x = rect_x + PADDING_HORIZONTAL + (RECT_WIDTH - PADDING_HORIZONTAL * 2) / 2;
|
|
240
|
+
var text_y = rect_y + PADDING_VERTICAL + TEXT_BASELINE; // +15 for text baseline
|
|
241
|
+
|
|
242
|
+
return /*#__PURE__*/jsxs("g", {
|
|
243
|
+
children: [/*#__PURE__*/jsx("rect", {
|
|
244
|
+
x: rect_x,
|
|
245
|
+
y: rect_y,
|
|
246
|
+
width: RECT_WIDTH,
|
|
247
|
+
height: RECT_HEIGHT,
|
|
248
|
+
rx: theme.border.radius.medium,
|
|
249
|
+
fill: theme.colors.surface.background.gray.subtle,
|
|
250
|
+
stroke: theme.colors.surface.border.gray.muted,
|
|
251
|
+
strokeWidth: "1"
|
|
252
|
+
}), /*#__PURE__*/jsx("text", {
|
|
253
|
+
x: text_x,
|
|
254
|
+
y: text_y,
|
|
255
|
+
textAnchor: "middle",
|
|
256
|
+
fill: theme.colors.surface.text.gray.normal,
|
|
257
|
+
fontSize: theme.typography.fonts.size[50],
|
|
258
|
+
fontFamily: theme.typography.fonts.family.text,
|
|
259
|
+
fontWeight: theme.typography.fonts.weight.medium,
|
|
260
|
+
letterSpacing: theme.typography.letterSpacings[100],
|
|
261
|
+
children: displayText
|
|
262
|
+
})]
|
|
263
|
+
});
|
|
264
|
+
};
|
|
265
|
+
var ChartReferenceLine = function ChartReferenceLine(_ref6) {
|
|
266
|
+
var label = _ref6.label,
|
|
267
|
+
x = _ref6.x,
|
|
268
|
+
y = _ref6.y;
|
|
269
|
+
var _useTheme8 = useTheme(),
|
|
270
|
+
theme = _useTheme8.theme;
|
|
271
|
+
return /*#__PURE__*/jsx(ReferenceLine, {
|
|
272
|
+
stroke: theme.colors.chart.background.categorical.gray.intense,
|
|
273
|
+
strokeWidth: 2,
|
|
274
|
+
strokeDasharray: "4 4",
|
|
275
|
+
label: /*#__PURE__*/jsx(CustomReferenceLabel, {
|
|
276
|
+
value: label,
|
|
277
|
+
isVertical: Boolean(x)
|
|
278
|
+
}),
|
|
279
|
+
x: x,
|
|
280
|
+
y: y
|
|
281
|
+
});
|
|
282
|
+
};
|
|
283
|
+
|
|
284
|
+
export { ChartCartesianGrid, ChartLegend, ChartReferenceLine, ChartTooltip, ChartXAxis, ChartYAxis };
|
|
285
|
+
//# sourceMappingURL=CommonChartComponents.web.js.map
|