@razorpay/blade 12.26.0 → 12.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/lib/native/components/Amount/Amount.js +1 -1
- package/build/lib/native/components/Amount/Amount.js.map +1 -1
- package/build/lib/native/components/Input/BaseInput/useTaggedInput.js +1 -1
- package/build/lib/native/components/Input/BaseInput/useTaggedInput.js.map +1 -1
- package/build/lib/native/components/StepGroup/StepItemMarker.js +1 -1
- package/build/lib/native/components/StepGroup/StepItemMarker.js.map +1 -1
- package/build/lib/native/tokens/theme/createTheme.js +1 -1
- package/build/lib/native/tokens/theme/createTheme.js.map +1 -1
- package/build/lib/web/development/components/Amount/Amount.js +10 -5
- package/build/lib/web/development/components/Amount/Amount.js.map +1 -1
- package/build/lib/web/development/components/Input/BaseInput/useTaggedInput.js +8 -32
- package/build/lib/web/development/components/Input/BaseInput/useTaggedInput.js.map +1 -1
- package/build/lib/web/development/components/StepGroup/StepItem.web.js +9 -5
- package/build/lib/web/development/components/StepGroup/StepItem.web.js.map +1 -1
- package/build/lib/web/development/components/StepGroup/StepItemMarker.js +4 -2
- package/build/lib/web/development/components/StepGroup/StepItemMarker.js.map +1 -1
- package/build/lib/web/development/components/StepGroup/StepLine.web.js +2 -10
- package/build/lib/web/development/components/StepGroup/StepLine.web.js.map +1 -1
- package/build/lib/web/development/tokens/theme/createTheme.js +4 -4
- package/build/lib/web/development/tokens/theme/createTheme.js.map +1 -1
- package/build/lib/web/production/components/Amount/Amount.js +10 -5
- package/build/lib/web/production/components/Amount/Amount.js.map +1 -1
- package/build/lib/web/production/components/Input/BaseInput/useTaggedInput.js +8 -32
- package/build/lib/web/production/components/Input/BaseInput/useTaggedInput.js.map +1 -1
- package/build/lib/web/production/components/StepGroup/StepItem.web.js +9 -5
- package/build/lib/web/production/components/StepGroup/StepItem.web.js.map +1 -1
- package/build/lib/web/production/components/StepGroup/StepItemMarker.js +4 -2
- package/build/lib/web/production/components/StepGroup/StepItemMarker.js.map +1 -1
- package/build/lib/web/production/components/StepGroup/StepLine.web.js +2 -10
- package/build/lib/web/production/components/StepGroup/StepLine.web.js.map +1 -1
- package/build/lib/web/production/tokens/theme/createTheme.js +4 -4
- package/build/lib/web/production/tokens/theme/createTheme.js.map +1 -1
- package/build/types/components/index.d.ts +8 -1
- package/build/types/components/index.native.d.ts +8 -1
- package/package.json +1 -1
|
@@ -24,7 +24,7 @@ import '../Typography/Display/Display.js';
|
|
|
24
24
|
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
25
25
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
26
26
|
|
|
27
|
-
var _excluded=["value","suffix","type","size","weight","isAffixSubtle","isStrikethrough","color","currencyIndicator","currency","testID"];var stripTrailingZerosFromParts=function stripTrailingZerosFromParts(parts){var decimalPart=parts.rawParts.filter(function(_ref){var type=_ref.type;return type==='fraction';}).map(function(_ref2){var value=_ref2.value;return value;}).join('');var hasFraction=parts.rawParts.some(function(_ref3){var type=_ref3.type;return type==='fraction';});if(hasFraction&&/^0+$/.test(decimalPart)){delete parts.decimal;delete parts.fraction;parts.rawParts=parts.rawParts.filter(function(_ref4){var type=_ref4.type;return type!=='decimal'&&type!=='fraction';});}return parts;};var pollyfilledFormatNumberByParts=function pollyfilledFormatNumberByParts(value,options){var _options$intlOptions;var parts=formatNumberByParts(value,options);if((options==null?void 0:(_options$intlOptions=options.intlOptions)==null?void 0:_options$intlOptions.trailingZeroDisplay)==='stripIfInteger'){return stripTrailingZerosFromParts(parts);}return parts;};var getTextColorProps=function getTextColorProps(_ref5){var color=_ref5.color;var props={amountValueColor:'surface.text.gray.normal'};if(!color)return props;props.amountValueColor=color;return props;};var AmountValue=function AmountValue(_ref6){var amount=_ref6.amount,_ref6$size=_ref6.size,size=_ref6$size===void 0?'medium':_ref6$size,_ref6$type=_ref6.type,type=_ref6$type===void 0?'body':_ref6$type,_ref6$weight=_ref6.weight,weight=_ref6$weight===void 0?'regular':_ref6$weight,amountValueColor=_ref6.amountValueColor,isAffixSubtle=_ref6.isAffixSubtle,suffix=_ref6.suffix;var isReactNative=getPlatformType()==='react-native';var affixFontSize=isAffixSubtle?subtleFontSizes[type][size]:normalAmountSizes[type][size];var numberFontFamily=type==='body'?'text':'heading';if(suffix==='decimals'&&isAffixSubtle){var AmountWrapper=isReactNative?Text:React__default.Fragment;return jsxs(AmountWrapper,{children:[jsx(BaseText,{fontSize:normalAmountSizes[type][size],fontWeight:weight,lineHeight:amountLineHeights[type][size],color:amountValueColor,fontFamily:numberFontFamily,as:isReactNative?undefined:'span',children:amount.integer}),jsxs(BaseText,{fontWeight:weight,fontSize:affixFontSize,fontFamily:numberFontFamily,color:amountValueColor,as:isReactNative?undefined:'span',opacity:isAffixSubtle?opacity[800]:1,children:[amount.decimal,amount.fraction]})]});}return jsxs(BaseText,{fontSize:normalAmountSizes[type][size],fontWeight:weight,fontFamily:numberFontFamily,color:amountValueColor,lineHeight:amountLineHeights[type][size],children:[amount.integer,amount.decimal,amount.fraction,amount.compact]});};var getAmountByParts=function getAmountByParts(_ref7){var suffix=_ref7.suffix,value=_ref7.value,currency=_ref7.currency;try{switch(suffix){case'decimals':{var options={intlOptions:{maximumFractionDigits:
|
|
27
|
+
var _excluded=["value","suffix","type","size","weight","isAffixSubtle","isStrikethrough","color","currencyIndicator","currency","fractionDigits","testID"];var stripTrailingZerosFromParts=function stripTrailingZerosFromParts(parts){var decimalPart=parts.rawParts.filter(function(_ref){var type=_ref.type;return type==='fraction';}).map(function(_ref2){var value=_ref2.value;return value;}).join('');var hasFraction=parts.rawParts.some(function(_ref3){var type=_ref3.type;return type==='fraction';});if(hasFraction&&/^0+$/.test(decimalPart)){delete parts.decimal;delete parts.fraction;parts.rawParts=parts.rawParts.filter(function(_ref4){var type=_ref4.type;return type!=='decimal'&&type!=='fraction';});}return parts;};var pollyfilledFormatNumberByParts=function pollyfilledFormatNumberByParts(value,options){var _options$intlOptions;var parts=formatNumberByParts(value,options);if((options==null?void 0:(_options$intlOptions=options.intlOptions)==null?void 0:_options$intlOptions.trailingZeroDisplay)==='stripIfInteger'){return stripTrailingZerosFromParts(parts);}return parts;};var getTextColorProps=function getTextColorProps(_ref5){var color=_ref5.color;var props={amountValueColor:'surface.text.gray.normal'};if(!color)return props;props.amountValueColor=color;return props;};var AmountValue=function AmountValue(_ref6){var amount=_ref6.amount,_ref6$size=_ref6.size,size=_ref6$size===void 0?'medium':_ref6$size,_ref6$type=_ref6.type,type=_ref6$type===void 0?'body':_ref6$type,_ref6$weight=_ref6.weight,weight=_ref6$weight===void 0?'regular':_ref6$weight,amountValueColor=_ref6.amountValueColor,isAffixSubtle=_ref6.isAffixSubtle,suffix=_ref6.suffix;var isReactNative=getPlatformType()==='react-native';var affixFontSize=isAffixSubtle?subtleFontSizes[type][size]:normalAmountSizes[type][size];var numberFontFamily=type==='body'?'text':'heading';if(suffix==='decimals'&&isAffixSubtle){var AmountWrapper=isReactNative?Text:React__default.Fragment;return jsxs(AmountWrapper,{children:[jsx(BaseText,{fontSize:normalAmountSizes[type][size],fontWeight:weight,lineHeight:amountLineHeights[type][size],color:amountValueColor,fontFamily:numberFontFamily,as:isReactNative?undefined:'span',children:amount.integer}),jsxs(BaseText,{fontWeight:weight,fontSize:affixFontSize,fontFamily:numberFontFamily,color:amountValueColor,as:isReactNative?undefined:'span',opacity:isAffixSubtle?opacity[800]:1,children:[amount.decimal,amount.fraction]})]});}return jsxs(BaseText,{fontSize:normalAmountSizes[type][size],fontWeight:weight,fontFamily:numberFontFamily,color:amountValueColor,lineHeight:amountLineHeights[type][size],children:[amount.integer,amount.decimal,amount.fraction,amount.compact]});};var getAmountByParts=function getAmountByParts(_ref7){var suffix=_ref7.suffix,value=_ref7.value,currency=_ref7.currency,_ref7$fractionDigits=_ref7.fractionDigits,fractionDigits=_ref7$fractionDigits===void 0?2:_ref7$fractionDigits;try{switch(suffix){case'decimals':{var options={intlOptions:{maximumFractionDigits:fractionDigits,minimumFractionDigits:fractionDigits},currency:currency};return pollyfilledFormatNumberByParts(value,options);}case'humanize':{var _options={intlOptions:{notation:'compact',maximumFractionDigits:2,trailingZeroDisplay:'stripIfInteger'},currency:currency};return pollyfilledFormatNumberByParts(value,_options);}default:{var _options2={intlOptions:{maximumFractionDigits:0,roundingMode:'floor'},currency:currency};return pollyfilledFormatNumberByParts(value,_options2);}}}catch(err){return {integer:`${value}`,currency:currency};}};var _Amount=function _Amount(_ref8,ref){var _renderedValue$isPref,_renderedValue$curren;var value=_ref8.value,_ref8$suffix=_ref8.suffix,suffix=_ref8$suffix===void 0?'decimals':_ref8$suffix,_ref8$type=_ref8.type,type=_ref8$type===void 0?'body':_ref8$type,_ref8$size=_ref8.size,size=_ref8$size===void 0?'medium':_ref8$size,_ref8$weight=_ref8.weight,weight=_ref8$weight===void 0?'regular':_ref8$weight,_ref8$isAffixSubtle=_ref8.isAffixSubtle,isAffixSubtle=_ref8$isAffixSubtle===void 0?true:_ref8$isAffixSubtle,_ref8$isStrikethrough=_ref8.isStrikethrough,isStrikethrough=_ref8$isStrikethrough===void 0?false:_ref8$isStrikethrough,color=_ref8.color,_ref8$currencyIndicat=_ref8.currencyIndicator,currencyIndicator=_ref8$currencyIndicat===void 0?'currency-symbol':_ref8$currencyIndicat,_ref8$currency=_ref8.currency,currency=_ref8$currency===void 0?'INR':_ref8$currency,_ref8$fractionDigits=_ref8.fractionDigits,fractionDigits=_ref8$fractionDigits===void 0?2:_ref8$fractionDigits,testID=_ref8.testID,rest=_objectWithoutProperties(_ref8,_excluded);if(__DEV__){if(typeof value!=='number'){throwBladeError({message:'`value` prop must be of type `number` for Amount.',moduleName:'Amount'});}if(color==='neutral'){throwBladeError({message:'`neutral` color is not supported.',moduleName:'Amount'});}var bodySizes=objectKeysWithType(normalAmountSizes.body);if((type==='body'||!type)&&!bodySizes.includes(size)){throwBladeError({message:`size="${size}" is not allowed with type="body"`,moduleName:'Amount'});}var displaySizes=objectKeysWithType(normalAmountSizes.display);if(type==='display'&&!displaySizes.includes(size)){throwBladeError({message:`size="${size}" is not allowed with type="display"`,moduleName:'Amount'});}var headingSizes=objectKeysWithType(normalAmountSizes.heading);if(type==='heading'&&!headingSizes.includes(size)){throwBladeError({message:`size="${size}" is not allowed with type="heading"`,moduleName:'Amount'});}}var _getTextColorProps=getTextColorProps({color:color}),amountValueColor=_getTextColorProps.amountValueColor;var renderedValue=getAmountByParts({suffix:suffix,value:value,currency:currency,fractionDigits:fractionDigits});var isPrefixSymbol=(_renderedValue$isPref=renderedValue.isPrefixSymbol)!=null?_renderedValue$isPref:true;var currencySymbol=(_renderedValue$curren=renderedValue.currency)!=null?_renderedValue$curren:currency;var currencyPosition=isPrefixSymbol?'left':'right';var currencySymbolOrCode=currencyIndicator==='currency-symbol'?currencySymbol:currency;var currencyFontSize=isAffixSubtle?subtleFontSizes[type][size]:normalAmountSizes[type][size];var isReactNative=getPlatformType()==='react-native';return jsx(BaseBox,Object.assign({ref:ref,display:isReactNative?'flex':'inline-flex',flexDirection:"row"},metaAttribute({name:MetaConstants.Amount,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsxs(BaseBox,{display:isReactNative?'flex':'inline-flex',alignItems:"baseline",flexDirection:"row",position:"relative",children:[renderedValue.minusSign?jsx(BaseText,{fontSize:normalAmountSizes[type][size],fontWeight:weight,lineHeight:amountLineHeights[type][size],color:amountValueColor,as:isReactNative?undefined:'span',marginX:"spacing.2",children:renderedValue.minusSign}):null,currencyPosition==='left'&&jsx(BaseText,{marginRight:"spacing.1",fontWeight:weight,fontSize:currencyFontSize,color:amountValueColor,as:isReactNative?undefined:'span',opacity:isAffixSubtle?opacity[800]:1,children:currencySymbolOrCode}),jsx(AmountValue,{amount:renderedValue,amountValueColor:amountValueColor,type:type,weight:weight,size:size,isAffixSubtle:isAffixSubtle,suffix:suffix,currency:currency}),currencyPosition==='right'&&jsx(BaseText,{marginLeft:"spacing.1",fontWeight:weight,fontSize:currencyFontSize,color:amountValueColor,as:isReactNative?undefined:'span',opacity:isAffixSubtle?opacity[800]:1,children:currencySymbolOrCode}),isStrikethrough&&jsx(BaseBox,{borderBottomColor:amountValueColor,borderBottomWidth:type==='body'?'thin':'thicker',borderBottomStyle:"solid",position:"absolute",width:"100%",top:"50%"})]})}));};var Amount=assignWithoutSideEffects(React__default.forwardRef(_Amount),{displayName:'Amount',componentId:'Amount'});
|
|
28
28
|
|
|
29
29
|
export { Amount, getAmountByParts };
|
|
30
30
|
//# sourceMappingURL=Amount.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Amount.js","sources":["../../../../../src/components/Amount/Amount.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React from 'react';\nimport type { CurrencyCodeType } from '@razorpay/i18nify-js/currency';\nimport { formatNumberByParts } from '@razorpay/i18nify-js/currency';\nimport type { AmountTypeProps } from './amountTokens';\nimport { normalAmountSizes, subtleFontSizes, amountLineHeights } from './amountTokens';\nimport type { BaseTextProps } from '~components/Typography/BaseText/types';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { getPlatformType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { objectKeysWithType } from '~utils/objectKeysWithType';\nimport { BaseText } from '~components/Typography/BaseText';\nimport { Text } from '~components/Typography';\nimport { opacity } from '~tokens/global';\nimport type { FontFamily } from '~tokens/global';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\n/**\n * Pollyfill function to get around the node 18 error\n *\n * This function is maintained by i18nify team. Reach out to them for any change regarding this.\n */\nconst stripTrailingZerosFromParts = (\n parts: ReturnType<typeof formatNumberByParts>,\n): ReturnType<typeof formatNumberByParts> => {\n const decimalPart = parts.rawParts\n .filter(({ type }) => type === 'fraction')\n .map(({ value }) => value)\n .join('');\n\n const hasFraction = parts.rawParts.some(({ type }) => type === 'fraction');\n\n if (hasFraction && /^0+$/.test(decimalPart)) {\n delete parts.decimal;\n delete parts.fraction;\n parts.rawParts = parts.rawParts.filter(({ type }) => type !== 'decimal' && type !== 'fraction');\n }\n\n return parts;\n};\n\n/**\n * Wrapper that uses pollyfill of i18nify team\n */\nconst pollyfilledFormatNumberByParts: typeof formatNumberByParts = (value, options) => {\n const parts = formatNumberByParts(value, options);\n\n if (options?.intlOptions?.trailingZeroDisplay === 'stripIfInteger') {\n return stripTrailingZerosFromParts(parts);\n }\n\n return parts;\n};\n\ntype AmountCommonProps = {\n /**\n * The value to be rendered within the component.\n *\n */\n value: number;\n /**\n * Sets the color of the amount.\n *\n * @default undefined\n */\n color?: BaseTextProps['color'];\n /**\n * Indicates what the suffix of amount should be\n *\n * @default 'decimals'\n */\n suffix?: 'decimals' | 'none' | 'humanize';\n /**\n * Makes the currency indicator(currency symbol/code) and decimal digits small and faded\n *\n * @default true\n */\n isAffixSubtle?: true | false;\n /**\n * Determines the visual representation of the currency, choose between displaying the currency symbol or code.\n *\n * Note: Currency symbol and code is determined by the locale set in user's browser or set via @razorpay/i18nify-react library.\n *\n * @default 'currency-symbol'\n */\n currencyIndicator?: 'currency-symbol' | 'currency-code';\n /**\n * The currency of the amount. Note that this component\n * only displays the provided value in the specified currency, it does not perform any currency conversion.\n *\n * @default 'INR'\n * */\n currency?: CurrencyCodeType;\n /**\n * If true, the amount text will have a line through it.\n *\n * @default false\n */\n isStrikethrough?: boolean;\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\ntype ColorProps = {\n amountValueColor: BaseTextProps['color'];\n};\n\ntype AmountProps = AmountTypeProps & AmountCommonProps;\n\nconst getTextColorProps = ({ color }: { color: AmountProps['color'] }): ColorProps => {\n const props: ColorProps = {\n amountValueColor: 'surface.text.gray.normal',\n };\n if (!color) return props;\n props.amountValueColor = color;\n return props;\n};\n\ntype AmountType = Partial<ReturnType<typeof formatNumberByParts>>;\n\ninterface AmountValue extends Omit<AmountProps, 'value'> {\n amountValueColor: BaseTextProps['color'];\n amount: AmountType;\n size: Exclude<AmountProps['size'], undefined>;\n}\n\nconst AmountValue = ({\n amount,\n size = 'medium',\n type = 'body',\n weight = 'regular',\n amountValueColor,\n isAffixSubtle,\n suffix,\n}: AmountValue): ReactElement => {\n const isReactNative = getPlatformType() === 'react-native';\n const affixFontSize = isAffixSubtle ? subtleFontSizes[type][size] : normalAmountSizes[type][size];\n const numberFontFamily: keyof FontFamily = type === 'body' ? 'text' : 'heading';\n if (suffix === 'decimals' && isAffixSubtle) {\n // Native does not support alignItems of Text inside a div, instead we need to wrap is in a Text\n const AmountWrapper = isReactNative ? Text : React.Fragment;\n\n return (\n <AmountWrapper>\n <BaseText\n fontSize={normalAmountSizes[type][size]}\n fontWeight={weight}\n lineHeight={amountLineHeights[type][size]}\n color={amountValueColor}\n fontFamily={numberFontFamily}\n as={isReactNative ? undefined : 'span'}\n >\n {amount.integer}\n </BaseText>\n <BaseText\n fontWeight={weight}\n fontSize={affixFontSize}\n fontFamily={numberFontFamily}\n color={amountValueColor}\n as={isReactNative ? undefined : 'span'}\n opacity={isAffixSubtle ? opacity[800] : 1}\n >\n {amount.decimal}\n {amount.fraction}\n </BaseText>\n </AmountWrapper>\n );\n }\n\n return (\n <BaseText\n fontSize={normalAmountSizes[type][size]}\n fontWeight={weight}\n fontFamily={numberFontFamily}\n color={amountValueColor}\n lineHeight={amountLineHeights[type][size]}\n >\n {amount.integer}\n {amount.decimal}\n {amount.fraction}\n {amount.compact}\n </BaseText>\n );\n};\n\ntype FormatAmountWithSuffixType = {\n suffix: AmountProps['suffix'];\n value: number;\n currency: AmountProps['currency'];\n};\n\n/**\n * Returns a parsed object based on the suffix passed in parameters\n * === Logic ===\n * value = 12500.45 \n * if suffix === 'decimals' => {\n \"integer\": \"12,500\",\n \"decimal\": \".\",\n \"fraction\": \"45\",\n \"compact\": \"K\",\n \"isPrefixSymbol\": false,\n \"rawParts\": [{\"type\": \"integer\",\"value\": \"12\"},{\"type\": \"group\",\"value\": \",\"},{\"type\": \"integer\",\"value\": \"500\"},{\"type\": \"decimal\",\"value\": \".\"},{\"type\": \"fraction\",\"value\": \"45\"}]\n}\n * @returns {AmountType}\n */\nexport const getAmountByParts = ({\n suffix,\n value,\n currency,\n}: FormatAmountWithSuffixType): AmountType => {\n try {\n switch (suffix) {\n case 'decimals': {\n const options = {\n intlOptions: {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n },\n currency,\n } as const;\n return pollyfilledFormatNumberByParts(value, options);\n }\n case 'humanize': {\n const options = {\n intlOptions: {\n notation: 'compact',\n maximumFractionDigits: 2,\n trailingZeroDisplay: 'stripIfInteger',\n },\n currency,\n } as const;\n return pollyfilledFormatNumberByParts(value, options);\n }\n\n default: {\n const options = {\n intlOptions: {\n maximumFractionDigits: 0,\n roundingMode: 'floor',\n },\n currency,\n } as const;\n return pollyfilledFormatNumberByParts(value, options);\n }\n }\n } catch (err: unknown) {\n return {\n integer: `${value}`,\n currency,\n };\n }\n};\n\nconst _Amount = (\n {\n value,\n suffix = 'decimals',\n type = 'body',\n size = 'medium',\n weight = 'regular',\n isAffixSubtle = true,\n isStrikethrough = false,\n color,\n currencyIndicator = 'currency-symbol',\n currency = 'INR',\n testID,\n ...rest\n }: AmountProps,\n ref: React.Ref<BladeElementRef>,\n): ReactElement => {\n if (__DEV__) {\n if (typeof value !== 'number') {\n throwBladeError({\n message: '`value` prop must be of type `number` for Amount.',\n moduleName: 'Amount',\n });\n }\n // @ts-expect-error neutral color should throw error\n if (color === 'neutral') {\n throwBladeError({\n message: '`neutral` color is not supported.',\n moduleName: 'Amount',\n });\n }\n\n const bodySizes = objectKeysWithType(normalAmountSizes.body);\n if ((type === 'body' || !type) && !bodySizes.includes(size)) {\n throwBladeError({\n message: `size=\"${size}\" is not allowed with type=\"body\"`,\n moduleName: 'Amount',\n });\n }\n\n const displaySizes = objectKeysWithType(normalAmountSizes.display);\n if (type === 'display' && !displaySizes.includes(size)) {\n throwBladeError({\n message: `size=\"${size}\" is not allowed with type=\"display\"`,\n moduleName: 'Amount',\n });\n }\n\n const headingSizes = objectKeysWithType(normalAmountSizes.heading);\n if (type === 'heading' && !headingSizes.includes(size)) {\n throwBladeError({\n message: `size=\"${size}\" is not allowed with type=\"heading\"`,\n moduleName: 'Amount',\n });\n }\n }\n\n const { amountValueColor } = getTextColorProps({\n color,\n });\n\n const renderedValue = getAmountByParts({ suffix, value, currency });\n const isPrefixSymbol = renderedValue.isPrefixSymbol ?? true;\n const currencySymbol = renderedValue.currency ?? currency;\n\n const currencyPosition = isPrefixSymbol ? 'left' : 'right';\n const currencySymbolOrCode = currencyIndicator === 'currency-symbol' ? currencySymbol : currency;\n\n const currencyFontSize = isAffixSubtle\n ? subtleFontSizes[type][size]\n : normalAmountSizes[type][size];\n const isReactNative = getPlatformType() === 'react-native';\n\n return (\n <BaseBox\n ref={ref as never}\n display={(isReactNative ? 'flex' : 'inline-flex') as never}\n flexDirection=\"row\"\n {...metaAttribute({ name: MetaConstants.Amount, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <BaseBox\n display={(isReactNative ? 'flex' : 'inline-flex') as never}\n alignItems=\"baseline\"\n flexDirection=\"row\"\n position=\"relative\"\n >\n {renderedValue.minusSign ? (\n <BaseText\n fontSize={normalAmountSizes[type][size]}\n fontWeight={weight}\n lineHeight={amountLineHeights[type][size]}\n color={amountValueColor}\n as={isReactNative ? undefined : 'span'}\n marginX=\"spacing.2\"\n >\n {renderedValue.minusSign}\n </BaseText>\n ) : null}\n {currencyPosition === 'left' && (\n <BaseText\n marginRight=\"spacing.1\"\n fontWeight={weight}\n fontSize={currencyFontSize}\n color={amountValueColor}\n as={isReactNative ? undefined : 'span'}\n opacity={isAffixSubtle ? opacity[800] : 1}\n >\n {currencySymbolOrCode}\n </BaseText>\n )}\n <AmountValue\n amount={renderedValue}\n amountValueColor={amountValueColor}\n type={type}\n weight={weight}\n size={size}\n isAffixSubtle={isAffixSubtle}\n suffix={suffix}\n currency={currency}\n />\n {currencyPosition === 'right' && (\n <BaseText\n marginLeft=\"spacing.1\"\n fontWeight={weight}\n fontSize={currencyFontSize}\n color={amountValueColor}\n as={isReactNative ? undefined : 'span'}\n opacity={isAffixSubtle ? opacity[800] : 1}\n >\n {currencySymbolOrCode}\n </BaseText>\n )}\n {isStrikethrough && (\n // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error\n // @ts-ignore: the borderBottomColor error below is thrown here as well\n <BaseBox\n // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error\n // @ts-ignore- intentionally setting the border color to the color prop for this hacky strikethrough\n borderBottomColor={amountValueColor}\n borderBottomWidth={type === 'body' ? 'thin' : 'thicker'}\n borderBottomStyle=\"solid\"\n position=\"absolute\"\n width=\"100%\"\n top=\"50%\"\n />\n )}\n </BaseBox>\n </BaseBox>\n );\n};\n\nconst Amount = assignWithoutSideEffects(React.forwardRef(_Amount), {\n displayName: 'Amount',\n componentId: 'Amount',\n});\n\nexport type { AmountProps };\nexport { Amount };\n"],"names":["stripTrailingZerosFromParts","parts","decimalPart","rawParts","filter","_ref","type","map","_ref2","value","join","hasFraction","some","_ref3","test","decimal","fraction","_ref4","pollyfilledFormatNumberByParts","options","_options$intlOptions","formatNumberByParts","intlOptions","trailingZeroDisplay","getTextColorProps","_ref5","color","props","amountValueColor","AmountValue","_ref6","amount","_ref6$size","size","_ref6$type","_ref6$weight","weight","isAffixSubtle","suffix","isReactNative","getPlatformType","affixFontSize","subtleFontSizes","normalAmountSizes","numberFontFamily","AmountWrapper","Text","React","Fragment","_jsxs","children","_jsx","BaseText","fontSize","fontWeight","lineHeight","amountLineHeights","fontFamily","as","undefined","integer","opacity","compact","getAmountByParts","_ref7","currency","maximumFractionDigits","minimumFractionDigits","notation","roundingMode","err","_Amount","_ref8","ref","_renderedValue$isPref","_renderedValue$curren","_ref8$suffix","_ref8$type","_ref8$size","_ref8$weight","_ref8$isAffixSubtle","_ref8$isStrikethrough","isStrikethrough","_ref8$currencyIndicat","currencyIndicator","_ref8$currency","testID","rest","_objectWithoutProperties","_excluded","__DEV__","throwBladeError","message","moduleName","bodySizes","objectKeysWithType","body","includes","displaySizes","display","headingSizes","heading","_getTextColorProps","renderedValue","isPrefixSymbol","currencySymbol","currencyPosition","currencySymbolOrCode","currencyFontSize","BaseBox","Object","assign","flexDirection","metaAttribute","name","MetaConstants","Amount","getStyledProps","makeAnalyticsAttribute","alignItems","position","minusSign","marginX","marginRight","marginLeft","borderBottomColor","borderBottomWidth","borderBottomStyle","width","top","assignWithoutSideEffects","forwardRef","displayName","componentId"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Amount.js","sources":["../../../../../src/components/Amount/Amount.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React from 'react';\nimport type { CurrencyCodeType } from '@razorpay/i18nify-js/currency';\nimport { formatNumberByParts } from '@razorpay/i18nify-js/currency';\nimport type { AmountTypeProps } from './amountTokens';\nimport { normalAmountSizes, subtleFontSizes, amountLineHeights } from './amountTokens';\nimport type { BaseTextProps } from '~components/Typography/BaseText/types';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { getPlatformType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { objectKeysWithType } from '~utils/objectKeysWithType';\nimport { BaseText } from '~components/Typography/BaseText';\nimport { Text } from '~components/Typography';\nimport { opacity } from '~tokens/global';\nimport type { FontFamily } from '~tokens/global';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\n/**\n * Pollyfill function to get around the node 18 error\n *\n * This function is maintained by i18nify team. Reach out to them for any change regarding this.\n */\nconst stripTrailingZerosFromParts = (\n parts: ReturnType<typeof formatNumberByParts>,\n): ReturnType<typeof formatNumberByParts> => {\n const decimalPart = parts.rawParts\n .filter(({ type }) => type === 'fraction')\n .map(({ value }) => value)\n .join('');\n\n const hasFraction = parts.rawParts.some(({ type }) => type === 'fraction');\n\n if (hasFraction && /^0+$/.test(decimalPart)) {\n delete parts.decimal;\n delete parts.fraction;\n parts.rawParts = parts.rawParts.filter(({ type }) => type !== 'decimal' && type !== 'fraction');\n }\n\n return parts;\n};\n\n/**\n * Wrapper that uses pollyfill of i18nify team\n */\nconst pollyfilledFormatNumberByParts: typeof formatNumberByParts = (value, options) => {\n const parts = formatNumberByParts(value, options);\n\n if (options?.intlOptions?.trailingZeroDisplay === 'stripIfInteger') {\n return stripTrailingZerosFromParts(parts);\n }\n\n return parts;\n};\n\ntype AmountCommonProps = {\n /**\n * The value to be rendered within the component.\n *\n */\n value: number;\n /**\n * Sets the color of the amount.\n *\n * @default undefined\n */\n color?: BaseTextProps['color'];\n /**\n * Indicates what the suffix of amount should be\n *\n * @default 'decimals'\n */\n suffix?: 'decimals' | 'none' | 'humanize';\n /**\n * Makes the currency indicator(currency symbol/code) and decimal digits small and faded\n *\n * @default true\n */\n isAffixSubtle?: true | false;\n /**\n * Determines the visual representation of the currency, choose between displaying the currency symbol or code.\n *\n * Note: Currency symbol and code is determined by the locale set in user's browser or set via @razorpay/i18nify-react library.\n *\n * @default 'currency-symbol'\n */\n currencyIndicator?: 'currency-symbol' | 'currency-code';\n /**\n * The currency of the amount. Note that this component\n * only displays the provided value in the specified currency, it does not perform any currency conversion.\n *\n * @default 'INR'\n * */\n currency?: CurrencyCodeType;\n /**\n * If true, the amount text will have a line through it.\n *\n * @default false\n */\n isStrikethrough?: boolean;\n /**\n * Controls the number of decimal places to display when suffix is 'decimals'.\n *\n * @default 2\n */\n fractionDigits?: number;\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\ntype ColorProps = {\n amountValueColor: BaseTextProps['color'];\n};\n\ntype AmountProps = AmountTypeProps & AmountCommonProps;\n\nconst getTextColorProps = ({ color }: { color: AmountProps['color'] }): ColorProps => {\n const props: ColorProps = {\n amountValueColor: 'surface.text.gray.normal',\n };\n if (!color) return props;\n props.amountValueColor = color;\n return props;\n};\n\ntype AmountType = Partial<ReturnType<typeof formatNumberByParts>>;\n\ninterface AmountValue extends Omit<AmountProps, 'value'> {\n amountValueColor: BaseTextProps['color'];\n amount: AmountType;\n size: Exclude<AmountProps['size'], undefined>;\n}\n\nconst AmountValue = ({\n amount,\n size = 'medium',\n type = 'body',\n weight = 'regular',\n amountValueColor,\n isAffixSubtle,\n suffix,\n}: AmountValue): ReactElement => {\n const isReactNative = getPlatformType() === 'react-native';\n const affixFontSize = isAffixSubtle ? subtleFontSizes[type][size] : normalAmountSizes[type][size];\n const numberFontFamily: keyof FontFamily = type === 'body' ? 'text' : 'heading';\n if (suffix === 'decimals' && isAffixSubtle) {\n // Native does not support alignItems of Text inside a div, instead we need to wrap is in a Text\n const AmountWrapper = isReactNative ? Text : React.Fragment;\n\n return (\n <AmountWrapper>\n <BaseText\n fontSize={normalAmountSizes[type][size]}\n fontWeight={weight}\n lineHeight={amountLineHeights[type][size]}\n color={amountValueColor}\n fontFamily={numberFontFamily}\n as={isReactNative ? undefined : 'span'}\n >\n {amount.integer}\n </BaseText>\n <BaseText\n fontWeight={weight}\n fontSize={affixFontSize}\n fontFamily={numberFontFamily}\n color={amountValueColor}\n as={isReactNative ? undefined : 'span'}\n opacity={isAffixSubtle ? opacity[800] : 1}\n >\n {amount.decimal}\n {amount.fraction}\n </BaseText>\n </AmountWrapper>\n );\n }\n\n return (\n <BaseText\n fontSize={normalAmountSizes[type][size]}\n fontWeight={weight}\n fontFamily={numberFontFamily}\n color={amountValueColor}\n lineHeight={amountLineHeights[type][size]}\n >\n {amount.integer}\n {amount.decimal}\n {amount.fraction}\n {amount.compact}\n </BaseText>\n );\n};\n\ntype FormatAmountWithSuffixType = {\n suffix: AmountProps['suffix'];\n value: number;\n currency: AmountProps['currency'];\n fractionDigits?: number;\n};\n\n/**\n * Returns a parsed object based on the suffix passed in parameters\n * === Logic ===\n * value = 12500.45 \n * if suffix === 'decimals' => {\n \"integer\": \"12,500\",\n \"decimal\": \".\",\n \"fraction\": \"45\",\n \"compact\": \"K\",\n \"isPrefixSymbol\": false,\n \"rawParts\": [{\"type\": \"integer\",\"value\": \"12\"},{\"type\": \"group\",\"value\": \",\"},{\"type\": \"integer\",\"value\": \"500\"},{\"type\": \"decimal\",\"value\": \".\"},{\"type\": \"fraction\",\"value\": \"45\"}]\n}\n * @returns {AmountType}\n */\nexport const getAmountByParts = ({\n suffix,\n value,\n currency,\n fractionDigits = 2,\n}: FormatAmountWithSuffixType): AmountType => {\n try {\n switch (suffix) {\n case 'decimals': {\n const options = {\n intlOptions: {\n maximumFractionDigits: fractionDigits,\n minimumFractionDigits: fractionDigits,\n },\n currency,\n } as const;\n return pollyfilledFormatNumberByParts(value, options);\n }\n case 'humanize': {\n const options = {\n intlOptions: {\n notation: 'compact',\n maximumFractionDigits: 2,\n trailingZeroDisplay: 'stripIfInteger',\n },\n currency,\n } as const;\n return pollyfilledFormatNumberByParts(value, options);\n }\n\n default: {\n const options = {\n intlOptions: {\n maximumFractionDigits: 0,\n roundingMode: 'floor',\n },\n currency,\n } as const;\n return pollyfilledFormatNumberByParts(value, options);\n }\n }\n } catch (err: unknown) {\n return {\n integer: `${value}`,\n currency,\n };\n }\n};\n\nconst _Amount = (\n {\n value,\n suffix = 'decimals',\n type = 'body',\n size = 'medium',\n weight = 'regular',\n isAffixSubtle = true,\n isStrikethrough = false,\n color,\n currencyIndicator = 'currency-symbol',\n currency = 'INR',\n fractionDigits = 2,\n testID,\n ...rest\n }: AmountProps,\n ref: React.Ref<BladeElementRef>,\n): ReactElement => {\n if (__DEV__) {\n if (typeof value !== 'number') {\n throwBladeError({\n message: '`value` prop must be of type `number` for Amount.',\n moduleName: 'Amount',\n });\n }\n // @ts-expect-error neutral color should throw error\n if (color === 'neutral') {\n throwBladeError({\n message: '`neutral` color is not supported.',\n moduleName: 'Amount',\n });\n }\n\n const bodySizes = objectKeysWithType(normalAmountSizes.body);\n if ((type === 'body' || !type) && !bodySizes.includes(size)) {\n throwBladeError({\n message: `size=\"${size}\" is not allowed with type=\"body\"`,\n moduleName: 'Amount',\n });\n }\n\n const displaySizes = objectKeysWithType(normalAmountSizes.display);\n if (type === 'display' && !displaySizes.includes(size)) {\n throwBladeError({\n message: `size=\"${size}\" is not allowed with type=\"display\"`,\n moduleName: 'Amount',\n });\n }\n\n const headingSizes = objectKeysWithType(normalAmountSizes.heading);\n if (type === 'heading' && !headingSizes.includes(size)) {\n throwBladeError({\n message: `size=\"${size}\" is not allowed with type=\"heading\"`,\n moduleName: 'Amount',\n });\n }\n }\n\n const { amountValueColor } = getTextColorProps({\n color,\n });\n\n const renderedValue = getAmountByParts({ suffix, value, currency, fractionDigits });\n const isPrefixSymbol = renderedValue.isPrefixSymbol ?? true;\n const currencySymbol = renderedValue.currency ?? currency;\n\n const currencyPosition = isPrefixSymbol ? 'left' : 'right';\n const currencySymbolOrCode = currencyIndicator === 'currency-symbol' ? currencySymbol : currency;\n\n const currencyFontSize = isAffixSubtle\n ? subtleFontSizes[type][size]\n : normalAmountSizes[type][size];\n const isReactNative = getPlatformType() === 'react-native';\n\n return (\n <BaseBox\n ref={ref as never}\n display={(isReactNative ? 'flex' : 'inline-flex') as never}\n flexDirection=\"row\"\n {...metaAttribute({ name: MetaConstants.Amount, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <BaseBox\n display={(isReactNative ? 'flex' : 'inline-flex') as never}\n alignItems=\"baseline\"\n flexDirection=\"row\"\n position=\"relative\"\n >\n {renderedValue.minusSign ? (\n <BaseText\n fontSize={normalAmountSizes[type][size]}\n fontWeight={weight}\n lineHeight={amountLineHeights[type][size]}\n color={amountValueColor}\n as={isReactNative ? undefined : 'span'}\n marginX=\"spacing.2\"\n >\n {renderedValue.minusSign}\n </BaseText>\n ) : null}\n {currencyPosition === 'left' && (\n <BaseText\n marginRight=\"spacing.1\"\n fontWeight={weight}\n fontSize={currencyFontSize}\n color={amountValueColor}\n as={isReactNative ? undefined : 'span'}\n opacity={isAffixSubtle ? opacity[800] : 1}\n >\n {currencySymbolOrCode}\n </BaseText>\n )}\n <AmountValue\n amount={renderedValue}\n amountValueColor={amountValueColor}\n type={type}\n weight={weight}\n size={size}\n isAffixSubtle={isAffixSubtle}\n suffix={suffix}\n currency={currency}\n />\n {currencyPosition === 'right' && (\n <BaseText\n marginLeft=\"spacing.1\"\n fontWeight={weight}\n fontSize={currencyFontSize}\n color={amountValueColor}\n as={isReactNative ? undefined : 'span'}\n opacity={isAffixSubtle ? opacity[800] : 1}\n >\n {currencySymbolOrCode}\n </BaseText>\n )}\n {isStrikethrough && (\n // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error\n // @ts-ignore: the borderBottomColor error below is thrown here as well\n <BaseBox\n // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error\n // @ts-ignore- intentionally setting the border color to the color prop for this hacky strikethrough\n borderBottomColor={amountValueColor}\n borderBottomWidth={type === 'body' ? 'thin' : 'thicker'}\n borderBottomStyle=\"solid\"\n position=\"absolute\"\n width=\"100%\"\n top=\"50%\"\n />\n )}\n </BaseBox>\n </BaseBox>\n );\n};\n\nconst Amount = assignWithoutSideEffects(React.forwardRef(_Amount), {\n displayName: 'Amount',\n componentId: 'Amount',\n});\n\nexport type { AmountProps };\nexport { Amount };\n"],"names":["stripTrailingZerosFromParts","parts","decimalPart","rawParts","filter","_ref","type","map","_ref2","value","join","hasFraction","some","_ref3","test","decimal","fraction","_ref4","pollyfilledFormatNumberByParts","options","_options$intlOptions","formatNumberByParts","intlOptions","trailingZeroDisplay","getTextColorProps","_ref5","color","props","amountValueColor","AmountValue","_ref6","amount","_ref6$size","size","_ref6$type","_ref6$weight","weight","isAffixSubtle","suffix","isReactNative","getPlatformType","affixFontSize","subtleFontSizes","normalAmountSizes","numberFontFamily","AmountWrapper","Text","React","Fragment","_jsxs","children","_jsx","BaseText","fontSize","fontWeight","lineHeight","amountLineHeights","fontFamily","as","undefined","integer","opacity","compact","getAmountByParts","_ref7","currency","_ref7$fractionDigits","fractionDigits","maximumFractionDigits","minimumFractionDigits","notation","roundingMode","err","_Amount","_ref8","ref","_renderedValue$isPref","_renderedValue$curren","_ref8$suffix","_ref8$type","_ref8$size","_ref8$weight","_ref8$isAffixSubtle","_ref8$isStrikethrough","isStrikethrough","_ref8$currencyIndicat","currencyIndicator","_ref8$currency","_ref8$fractionDigits","testID","rest","_objectWithoutProperties","_excluded","__DEV__","throwBladeError","message","moduleName","bodySizes","objectKeysWithType","body","includes","displaySizes","display","headingSizes","heading","_getTextColorProps","renderedValue","isPrefixSymbol","currencySymbol","currencyPosition","currencySymbolOrCode","currencyFontSize","BaseBox","Object","assign","flexDirection","metaAttribute","name","MetaConstants","Amount","getStyledProps","makeAnalyticsAttribute","alignItems","position","minusSign","marginX","marginRight","marginLeft","borderBottomColor","borderBottomWidth","borderBottomStyle","width","top","assignWithoutSideEffects","forwardRef","displayName","componentId"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ import { isReactNative } from '../../../utils/platform/isReactNative.js';
|
|
|
7
7
|
import '../../BladeProvider/useTheme.js';
|
|
8
8
|
import { useControllableState } from '../../../utils/useControllable.js';
|
|
9
9
|
|
|
10
|
-
var useTaggedInput=function useTaggedInput(_ref){var tags=_ref.tags,isDisabled=_ref.isDisabled,onTagChange=_ref.onTagChange,isTaggedInput=_ref.isTaggedInput,inputRef=_ref.inputRef,onChange=_ref.onChange,name=_ref.name,value=_ref.value,defaultValue=_ref.defaultValue;var _React$useState=React__default.useState(-1),_React$useState2=_slicedToArray(_React$useState,2),activeTagIndex=_React$useState2[0],setActiveTagIndex=_React$useState2[1];var _React$useState3=React__default.useState(defaultValue!=null?defaultValue:''),_React$useState4=_slicedToArray(_React$useState3,2),inputValueUncontrolled=_React$useState4[0],setInputValueUncontrolled=_React$useState4[1];var _useControllableState=useControllableState({value:tags,defaultValue:[],onChange:function onChange(tags){onTagChange==null?void 0:onTagChange({tags:tags});}}),_useControllableState2=_slicedToArray(_useControllableState,2),tagsValue=_useControllableState2[0],setTagsValue=_useControllableState2[1];var
|
|
10
|
+
var useTaggedInput=function useTaggedInput(_ref){var tags=_ref.tags,isDisabled=_ref.isDisabled,onTagChange=_ref.onTagChange,isTaggedInput=_ref.isTaggedInput,inputRef=_ref.inputRef,onChange=_ref.onChange,name=_ref.name,value=_ref.value,defaultValue=_ref.defaultValue;var _React$useState=React__default.useState(-1),_React$useState2=_slicedToArray(_React$useState,2),activeTagIndex=_React$useState2[0],setActiveTagIndex=_React$useState2[1];var _React$useState3=React__default.useState(defaultValue!=null?defaultValue:''),_React$useState4=_slicedToArray(_React$useState3,2),inputValueUncontrolled=_React$useState4[0],setInputValueUncontrolled=_React$useState4[1];var _useControllableState=useControllableState({value:tags,defaultValue:[],onChange:function onChange(tags){onTagChange==null?void 0:onTagChange({tags:tags});}}),_useControllableState2=_slicedToArray(_useControllableState,2),tagsValue=_useControllableState2[0],setTagsValue=_useControllableState2[1];var getNewTagsArray=function getNewTagsArray(indexToRemove){var currentTags=tagsValue;if(!currentTags){return [];}if(indexToRemove<0||indexToRemove>=currentTags.length){return currentTags;}var newArray=currentTags.slice(0,indexToRemove).concat(currentTags.slice(indexToRemove+1));return newArray;};var getTags=React__default.useMemo(function(){return function(_ref2){var size=_ref2.size;return getTagsGroup({size:size,tags:tagsValue,activeTagIndex:activeTagIndex,isDisabled:isDisabled,onDismiss:function onDismiss(_ref3){var tagIndex=_ref3.tagIndex;setTagsValue(function(){return getNewTagsArray(tagIndex);});}});};},[activeTagIndex,tags,tagsValue,isDisabled]);var handleTaggedInputChange=function handleTaggedInputChange(_ref4){var value=_ref4.value;if(!isTaggedInput){return;}setInputValueUncontrolled(value!=null?value:'');};var handleTagsClear=function handleTagsClear(){if(!isTaggedInput){return;}setTagsValue(function(){return [];});};var clearInput=function clearInput(){var isControlledValue=value!==undefined;if(isControlledValue){onChange==null?void 0:onChange({name:name,value:''});return;}if(!inputRef.current){return;}setInputValueUncontrolled('');if(isReactNative()){setTimeout(function(){var _inputRef$current;(_inputRef$current=inputRef.current)==null?void 0:_inputRef$current.clear();},10);return;}inputRef.current.value='';};var handleTaggedInputKeydown=function handleTaggedInputKeydown(e){if(!isTaggedInput){return;}var currentTags=tagsValue;var isControlledValue=value!==undefined;var inputValue=isControlledValue?value==null?void 0:value.trim():inputValueUncontrolled.trim();if(e.key==='Enter'||e.key===','){e.event.preventDefault==null?void 0:e.event.preventDefault();if(inputValue){setTagsValue(function(){return [].concat(_toConsumableArray(currentTags),[inputValue]);});clearInput();setActiveTagIndex(-1);}}if(e.key==='Backspace'&&!inputValue&&activeTagIndex<0&¤tTags.length>0){setTagsValue(function(){return currentTags.slice(0,-1);});}};return {activeTagIndex:activeTagIndex,setActiveTagIndex:setActiveTagIndex,getTags:getTags,handleTaggedInputKeydown:handleTaggedInputKeydown,handleTaggedInputChange:handleTaggedInputChange,handleTagsClear:handleTagsClear};};
|
|
11
11
|
|
|
12
12
|
export { useTaggedInput };
|
|
13
13
|
//# sourceMappingURL=useTaggedInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTaggedInput.js","sources":["../../../../../../src/components/Input/BaseInput/useTaggedInput.ts"],"sourcesContent":["import React from 'react';\nimport type { BaseInputProps } from './BaseInput';\nimport type { BladeElementRefWithValue } from '~utils/types';\nimport type { FormInputOnEvent, FormInputOnKeyDownEvent } from '~components/Form/FormTypes';\n// import { isReactNative } from '~utils';\nimport { getTagsGroup } from '~components/Tag/getTagsGroup';\nimport { isReactNative } from '~utils';\nimport { useControllableState } from '~utils/useControllable';\n\ntype TaggedInputProps = {\n isTaggedInput?: boolean;\n tags?: string[];\n onTagChange?: ({ tags }: { tags: string[] }) => void;\n};\n\ntype UseTaggedInputProps = TaggedInputProps &\n Pick<BaseInputProps, 'isDisabled' | 'onChange' | 'name' | 'value' | 'defaultValue'> & {\n inputRef: React.RefObject<BladeElementRefWithValue | null>;\n };\n\ntype UseTaggedInputReturn = {\n activeTagIndex: number;\n setActiveTagIndex: (activeTagIndex: number) => void;\n getTags: ({ size }: { size: NonNullable<BaseInputProps['size']> }) => React.ReactElement[];\n handleTaggedInputKeydown: (e: FormInputOnKeyDownEvent) => void;\n handleTaggedInputChange: FormInputOnEvent;\n handleTagsClear: () => void;\n};\n\nconst useTaggedInput = ({\n tags,\n isDisabled,\n onTagChange,\n isTaggedInput,\n inputRef,\n onChange,\n name,\n value,\n defaultValue,\n}: UseTaggedInputProps): UseTaggedInputReturn => {\n const [activeTagIndex, setActiveTagIndex] = React.useState(-1);\n const [inputValueUncontrolled, setInputValueUncontrolled] = React.useState(defaultValue ?? '');\n const [tagsValue, setTagsValue] = useControllableState({\n value: tags,\n defaultValue: [],\n onChange: (tags) => {\n onTagChange?.({ tags });\n },\n });\n\n const isTagsControlled = Boolean(tags);\n\n const getNewTagsArray = (indexToRemove: number): string[] => {\n const currentTags = tagsValue;\n\n if (!currentTags) {\n return [];\n }\n\n // Check if the index is valid\n if (indexToRemove < 0 || indexToRemove >= currentTags.length) {\n return currentTags; // Return the original array\n }\n\n // Create a new array without the element at the specified index\n const newArray = currentTags\n .slice(0, indexToRemove)\n .concat(currentTags.slice(indexToRemove + 1));\n\n return newArray;\n };\n\n const getTags = React.useMemo(\n () => ({ size }: { size: NonNullable<BaseInputProps['size']> }): React.ReactElement[] => {\n return getTagsGroup({\n size,\n tags: tagsValue,\n activeTagIndex,\n isDisabled,\n onDismiss: ({ tagIndex }) => {\n console.log('dismiss', { tagIndex });\n if (!isTagsControlled) {\n setTagsValue(() => getNewTagsArray(tagIndex));\n }\n onTagChange?.({ tags: getNewTagsArray(tagIndex) });\n },\n });\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [activeTagIndex, tags, tagsValue, isDisabled],\n );\n\n const handleTaggedInputChange: FormInputOnEvent = ({ value }) => {\n if (!isTaggedInput) {\n return;\n }\n setInputValueUncontrolled(value ?? '');\n };\n\n const handleTagsClear = (): void => {\n if (!isTaggedInput) {\n return;\n }\n\n if (!isTagsControlled) {\n setTagsValue(() => []);\n }\n\n onTagChange?.({ tags: [] });\n };\n\n const clearInput = (): void => {\n const isControlledValue = value !== undefined;\n\n if (isControlledValue) {\n // In Controlled component, we don't clear input ourselves. We just call onChange with empty value\n onChange?.({ name, value: '' });\n return;\n }\n\n if (!inputRef.current) {\n return;\n }\n\n setInputValueUncontrolled('');\n\n if (isReactNative()) {\n setTimeout(() => {\n // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error\n // @ts-ignore: clear does exist in react native\n inputRef.current?.clear();\n }, 10);\n return;\n }\n\n inputRef.current.value = '';\n };\n\n const handleTaggedInputKeydown = (e: FormInputOnKeyDownEvent): void => {\n if (!isTaggedInput) {\n return;\n }\n\n const currentTags = tagsValue;\n const isControlledValue = value !== undefined;\n const inputValue = isControlledValue ? value?.trim() : inputValueUncontrolled.trim();\n if (e.key === 'Enter' || e.key === ',') {\n e.event.preventDefault?.(); // we don't want textarea to treat enter as line break in tagged inputs\n if (inputValue) {\n if (!isTagsControlled) {\n setTagsValue(() => [...currentTags, inputValue]);\n }\n onTagChange?.({ tags: [...currentTags, inputValue] });\n clearInput();\n setActiveTagIndex(-1);\n }\n }\n if (e.key === 'Backspace' && !inputValue && activeTagIndex < 0 && currentTags.length > 0) {\n if (!isTagsControlled) {\n setTagsValue(() => currentTags.slice(0, -1));\n }\n onTagChange?.({ tags: currentTags.slice(0, -1) });\n }\n };\n\n return {\n activeTagIndex,\n setActiveTagIndex,\n getTags,\n handleTaggedInputKeydown,\n handleTaggedInputChange,\n handleTagsClear,\n };\n};\n\nexport type { TaggedInputProps };\nexport { useTaggedInput };\n"],"names":["useTaggedInput","_ref","tags","isDisabled","onTagChange","isTaggedInput","inputRef","onChange","name","value","defaultValue","_React$useState","React","useState","_React$useState2","_slicedToArray","activeTagIndex","setActiveTagIndex","_React$useState3","_React$useState4","inputValueUncontrolled","setInputValueUncontrolled","_useControllableState","useControllableState","_useControllableState2","tagsValue","setTagsValue","isTagsControlled","Boolean","getNewTagsArray","indexToRemove","currentTags","length","newArray","slice","concat","getTags","useMemo","_ref2","size","getTagsGroup","onDismiss","_ref3","tagIndex","console","log","handleTaggedInputChange","_ref4","handleTagsClear","clearInput","isControlledValue","undefined","current","isReactNative","setTimeout","_inputRef$current","clear","handleTaggedInputKeydown","e","inputValue","trim","key","event","preventDefault","_toConsumableArray"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useTaggedInput.js","sources":["../../../../../../src/components/Input/BaseInput/useTaggedInput.ts"],"sourcesContent":["import React from 'react';\nimport type { BaseInputProps } from './BaseInput';\nimport type { BladeElementRefWithValue } from '~utils/types';\nimport type { FormInputOnEvent, FormInputOnKeyDownEvent } from '~components/Form/FormTypes';\nimport { getTagsGroup } from '~components/Tag/getTagsGroup';\nimport { isReactNative } from '~utils';\nimport { useControllableState } from '~utils/useControllable';\n\ntype TaggedInputProps = {\n isTaggedInput?: boolean;\n tags?: string[];\n onTagChange?: ({ tags }: { tags: string[] }) => void;\n};\n\ntype UseTaggedInputProps = TaggedInputProps &\n Pick<BaseInputProps, 'isDisabled' | 'onChange' | 'name' | 'value' | 'defaultValue'> & {\n inputRef: React.RefObject<BladeElementRefWithValue | null>;\n };\n\ntype UseTaggedInputReturn = {\n activeTagIndex: number;\n setActiveTagIndex: (activeTagIndex: number) => void;\n getTags: ({ size }: { size: NonNullable<BaseInputProps['size']> }) => React.ReactElement[];\n handleTaggedInputKeydown: (e: FormInputOnKeyDownEvent) => void;\n handleTaggedInputChange: FormInputOnEvent;\n handleTagsClear: () => void;\n};\n\nconst useTaggedInput = ({\n tags,\n isDisabled,\n onTagChange,\n isTaggedInput,\n inputRef,\n onChange,\n name,\n value,\n defaultValue,\n}: UseTaggedInputProps): UseTaggedInputReturn => {\n const [activeTagIndex, setActiveTagIndex] = React.useState(-1);\n const [inputValueUncontrolled, setInputValueUncontrolled] = React.useState(defaultValue ?? '');\n const [tagsValue, setTagsValue] = useControllableState({\n value: tags,\n defaultValue: [],\n onChange: (tags) => {\n onTagChange?.({ tags });\n },\n });\n\n const getNewTagsArray = (indexToRemove: number): string[] => {\n const currentTags = tagsValue;\n\n if (!currentTags) {\n return [];\n }\n\n // Check if the index is valid\n if (indexToRemove < 0 || indexToRemove >= currentTags.length) {\n return currentTags; // Return the original array\n }\n\n // Create a new array without the element at the specified index\n const newArray = currentTags\n .slice(0, indexToRemove)\n .concat(currentTags.slice(indexToRemove + 1));\n\n return newArray;\n };\n\n const getTags = React.useMemo(\n () => ({ size }: { size: NonNullable<BaseInputProps['size']> }): React.ReactElement[] => {\n return getTagsGroup({\n size,\n tags: tagsValue,\n activeTagIndex,\n isDisabled,\n onDismiss: ({ tagIndex }) => {\n setTagsValue(() => getNewTagsArray(tagIndex));\n },\n });\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [activeTagIndex, tags, tagsValue, isDisabled],\n );\n\n const handleTaggedInputChange: FormInputOnEvent = ({ value }) => {\n if (!isTaggedInput) {\n return;\n }\n setInputValueUncontrolled(value ?? '');\n };\n\n const handleTagsClear = (): void => {\n if (!isTaggedInput) {\n return;\n }\n\n setTagsValue(() => []);\n };\n\n const clearInput = (): void => {\n const isControlledValue = value !== undefined;\n\n if (isControlledValue) {\n // In Controlled component, we don't clear input ourselves. We just call onChange with empty value\n onChange?.({ name, value: '' });\n return;\n }\n\n if (!inputRef.current) {\n return;\n }\n\n setInputValueUncontrolled('');\n\n if (isReactNative()) {\n setTimeout(() => {\n // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error\n // @ts-ignore: clear does exist in react native\n inputRef.current?.clear();\n }, 10);\n return;\n }\n\n inputRef.current.value = '';\n };\n\n const handleTaggedInputKeydown = (e: FormInputOnKeyDownEvent): void => {\n if (!isTaggedInput) {\n return;\n }\n\n const currentTags = tagsValue;\n const isControlledValue = value !== undefined;\n const inputValue = isControlledValue ? value?.trim() : inputValueUncontrolled.trim();\n if (e.key === 'Enter' || e.key === ',') {\n e.event.preventDefault?.(); // we don't want textarea to treat enter as line break in tagged inputs\n if (inputValue) {\n setTagsValue(() => [...currentTags, inputValue]);\n clearInput();\n setActiveTagIndex(-1);\n }\n }\n if (e.key === 'Backspace' && !inputValue && activeTagIndex < 0 && currentTags.length > 0) {\n setTagsValue(() => currentTags.slice(0, -1));\n }\n };\n\n return {\n activeTagIndex,\n setActiveTagIndex,\n getTags,\n handleTaggedInputKeydown,\n handleTaggedInputChange,\n handleTagsClear,\n };\n};\n\nexport type { TaggedInputProps };\nexport { useTaggedInput };\n"],"names":["useTaggedInput","_ref","tags","isDisabled","onTagChange","isTaggedInput","inputRef","onChange","name","value","defaultValue","_React$useState","React","useState","_React$useState2","_slicedToArray","activeTagIndex","setActiveTagIndex","_React$useState3","_React$useState4","inputValueUncontrolled","setInputValueUncontrolled","_useControllableState","useControllableState","_useControllableState2","tagsValue","setTagsValue","getNewTagsArray","indexToRemove","currentTags","length","newArray","slice","concat","getTags","useMemo","_ref2","size","getTagsGroup","onDismiss","_ref3","tagIndex","handleTaggedInputChange","_ref4","handleTagsClear","clearInput","isControlledValue","undefined","current","isReactNative","setTimeout","_inputRef$current","clear","handleTaggedInputKeydown","e","inputValue","trim","key","event","preventDefault","_toConsumableArray"],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ import { makeSize } from '../../utils/makeSize/makeSize.js';
|
|
|
9
9
|
import '../BladeProvider/useTheme.js';
|
|
10
10
|
import { jsx } from 'react/jsx-runtime';
|
|
11
11
|
|
|
12
|
-
var MarkerBackgroundCircle=function MarkerBackgroundCircle(_ref){var color=_ref.color,size=_ref.size,margin=_ref.margin,children=_ref.children;return jsx(BaseBox,{backgroundColor:color==='primary'?'surface.background.primary.subtle':`feedback.background.${color}.subtle`,display:"flex",alignItems:"center",justifyContent:"center",height:size,width:size,borderRadius:"round",margin:margin,children:children});};var StepItemIndicator=function StepItemIndicator(_ref2){var color=_ref2.color;var _useStepGroup=useStepGroup(),size=_useStepGroup.size;var spacingTokens=getMarkerLineSpacings(size);return jsx(MarkerBackgroundCircle,{color:color,size:makeSize(spacingTokens.markerBackgroundSize),margin:makeSize(spacingTokens.markerMargin),children:jsx(Indicator,{position:"relative",color:color,size:size,accessibilityLabel:`${color} indicator`})});};var StepItemIcon=function StepItemIcon(_ref3){var Icon=_ref3.icon,_ref3$color=_ref3.color,color=_ref3$color===void 0?'neutral':_ref3$color;var _useStepGroup2=useStepGroup(),size=_useStepGroup2.size;var spacingTokens=getMarkerLineSpacings(size);return jsx(MarkerBackgroundCircle,{color:color,size:makeSize(spacingTokens.markerBackgroundSize),margin:makeSize(spacingTokens.markerMargin),children:jsx(Icon,{size:iconSizeTokens[size],color:color==='primary'?'surface.icon.primary.normal':`feedback.icon.${color}.intense`})});};
|
|
12
|
+
var MarkerBackgroundCircle=function MarkerBackgroundCircle(_ref){var color=_ref.color,size=_ref.size,margin=_ref.margin,children=_ref.children;return jsx(BaseBox,{backgroundColor:color==='primary'?'surface.background.primary.subtle':`feedback.background.${color}.subtle`,display:"flex",alignItems:"center",justifyContent:"center",height:size,width:size,borderRadius:"round",margin:margin,children:children});};var StepItemIndicator=function StepItemIndicator(_ref2){var color=_ref2.color;var _useStepGroup=useStepGroup(),size=_useStepGroup.size;var spacingTokens=getMarkerLineSpacings(size);return jsx(MarkerBackgroundCircle,{color:color,size:makeSize(spacingTokens.markerBackgroundSize),margin:makeSize(spacingTokens.markerMargin),children:jsx(Indicator,{position:"relative",color:color,size:size,accessibilityLabel:`${color} indicator`})});};var StepItemIcon=function StepItemIcon(_ref3){var Icon=_ref3.icon,_ref3$color=_ref3.color,color=_ref3$color===void 0?'neutral':_ref3$color,_ref3$isDisabled=_ref3.isDisabled,isDisabled=_ref3$isDisabled===void 0?false:_ref3$isDisabled;var _useStepGroup2=useStepGroup(),size=_useStepGroup2.size;var spacingTokens=getMarkerLineSpacings(size);return jsx(MarkerBackgroundCircle,{color:color,size:makeSize(spacingTokens.markerBackgroundSize),margin:makeSize(spacingTokens.markerMargin),children:jsx(Icon,{size:iconSizeTokens[size],color:isDisabled?'surface.icon.gray.disabled':color==='primary'?'surface.icon.primary.normal':`feedback.icon.${color}.intense`})});};
|
|
13
13
|
|
|
14
14
|
export { StepItemIcon, StepItemIndicator };
|
|
15
15
|
//# sourceMappingURL=StepItemMarker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepItemMarker.js","sources":["../../../../../src/components/StepGroup/StepItemMarker.tsx"],"sourcesContent":["import { useStepGroup } from './StepGroupContext';\nimport { getMarkerLineSpacings, iconSizeTokens } from './tokens';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport type { IndicatorProps } from '~components/Indicator';\nimport { Indicator } from '~components/Indicator';\nimport { makeSize } from '~utils';\n\ntype MarkerBackgroundCircleProps = {\n color: IndicatorProps['color'];\n size: BaseBoxProps['width'];\n margin: BaseBoxProps['margin'];\n children: BaseBoxProps['children'];\n};\n\nconst MarkerBackgroundCircle = ({\n color,\n size,\n margin,\n children,\n}: MarkerBackgroundCircleProps): React.ReactElement => {\n return (\n <BaseBox\n backgroundColor={\n color === 'primary'\n ? 'surface.background.primary.subtle'\n : `feedback.background.${color}.subtle`\n }\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n height={size}\n width={size}\n borderRadius=\"round\"\n margin={margin}\n >\n {children}\n </BaseBox>\n );\n};\n\nconst StepItemIndicator = ({ color }: { color: IndicatorProps['color'] }): React.ReactElement => {\n const { size } = useStepGroup();\n const spacingTokens = getMarkerLineSpacings(size);\n\n return (\n <MarkerBackgroundCircle\n color={color}\n size={makeSize(spacingTokens.markerBackgroundSize)}\n margin={makeSize(spacingTokens.markerMargin)}\n >\n <Indicator\n position=\"relative\"\n color={color}\n size={size}\n accessibilityLabel={`${color} indicator`}\n />\n </MarkerBackgroundCircle>\n );\n};\n\ntype StepItemIconProps = {\n icon: IconComponent;\n color: IndicatorProps['color'];\n};\n\nconst StepItemIcon = ({
|
|
1
|
+
{"version":3,"file":"StepItemMarker.js","sources":["../../../../../src/components/StepGroup/StepItemMarker.tsx"],"sourcesContent":["import { useStepGroup } from './StepGroupContext';\nimport { getMarkerLineSpacings, iconSizeTokens } from './tokens';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport type { IndicatorProps } from '~components/Indicator';\nimport { Indicator } from '~components/Indicator';\nimport { makeSize } from '~utils';\n\ntype MarkerBackgroundCircleProps = {\n color: IndicatorProps['color'];\n size: BaseBoxProps['width'];\n margin: BaseBoxProps['margin'];\n children: BaseBoxProps['children'];\n};\n\nconst MarkerBackgroundCircle = ({\n color,\n size,\n margin,\n children,\n}: MarkerBackgroundCircleProps): React.ReactElement => {\n return (\n <BaseBox\n backgroundColor={\n color === 'primary'\n ? 'surface.background.primary.subtle'\n : `feedback.background.${color}.subtle`\n }\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n height={size}\n width={size}\n borderRadius=\"round\"\n margin={margin}\n >\n {children}\n </BaseBox>\n );\n};\n\nconst StepItemIndicator = ({ color }: { color: IndicatorProps['color'] }): React.ReactElement => {\n const { size } = useStepGroup();\n const spacingTokens = getMarkerLineSpacings(size);\n\n return (\n <MarkerBackgroundCircle\n color={color}\n size={makeSize(spacingTokens.markerBackgroundSize)}\n margin={makeSize(spacingTokens.markerMargin)}\n >\n <Indicator\n position=\"relative\"\n color={color}\n size={size}\n accessibilityLabel={`${color} indicator`}\n />\n </MarkerBackgroundCircle>\n );\n};\n\ntype StepItemIconProps = {\n icon: IconComponent;\n color: IndicatorProps['color'];\n isDisabled?: boolean;\n};\n\nconst StepItemIcon = ({\n icon: Icon,\n color = 'neutral',\n isDisabled = false,\n}: StepItemIconProps): React.ReactElement => {\n const { size } = useStepGroup();\n const spacingTokens = getMarkerLineSpacings(size);\n\n return (\n <MarkerBackgroundCircle\n color={color}\n size={makeSize(spacingTokens.markerBackgroundSize)}\n margin={makeSize(spacingTokens.markerMargin)}\n >\n <Icon\n size={iconSizeTokens[size]}\n color={\n isDisabled\n ? 'surface.icon.gray.disabled'\n : color === 'primary'\n ? 'surface.icon.primary.normal'\n : `feedback.icon.${color}.intense`\n }\n />\n </MarkerBackgroundCircle>\n );\n};\n\nexport { StepItemIndicator, StepItemIcon };\n"],"names":["MarkerBackgroundCircle","_ref","color","size","margin","children","_jsx","BaseBox","backgroundColor","display","alignItems","justifyContent","height","width","borderRadius","StepItemIndicator","_ref2","_useStepGroup","useStepGroup","spacingTokens","getMarkerLineSpacings","makeSize","markerBackgroundSize","markerMargin","Indicator","position","accessibilityLabel","StepItemIcon","_ref3","Icon","icon","_ref3$color","_ref3$isDisabled","isDisabled","_useStepGroup2","iconSizeTokens"],"mappings":";;;;;;;;;;;AAgBA,IAAMA,sBAAsB,CAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,CAK2B,KAJrDC,KAAK,CAAAD,IAAA,CAALC,KAAK,CACLC,IAAI,CAAAF,IAAA,CAAJE,IAAI,CACJC,MAAM,CAAAH,IAAA,CAANG,MAAM,CACNC,QAAQ,CAAAJ,IAAA,CAARI,QAAQ,CAER,OACEC,GAAA,CAACC,OAAO,CACNC,CAAAA,eAAe,CACbN,KAAK,GAAK,SAAS,CACf,mCAAmC,CAClC,CAAsBA,oBAAAA,EAAAA,KAAM,CAClC,OAAA,CAAA,CACDO,OAAO,CAAC,MAAM,CACdC,UAAU,CAAC,QAAQ,CACnBC,cAAc,CAAC,QAAQ,CACvBC,MAAM,CAAET,IAAK,CACbU,KAAK,CAAEV,IAAK,CACZW,YAAY,CAAC,OAAO,CACpBV,MAAM,CAAEA,MAAO,CAAAC,QAAA,CAEdA,QAAQ,CACF,CAAC,CAEd,CAAC,CAEK,IAAAU,iBAAiB,CAAG,SAApBA,iBAAiBA,CAAAC,KAAA,CAA0E,KAApEd,KAAK,CAAAc,KAAA,CAALd,KAAK,CAChC,IAAAe,aAAA,CAAiBC,YAAY,EAAE,CAAvBf,IAAI,CAAAc,aAAA,CAAJd,IAAI,CACZ,IAAMgB,aAAa,CAAGC,qBAAqB,CAACjB,IAAI,CAAC,CAEjD,OACEG,GAAA,CAACN,sBAAsB,CAAA,CACrBE,KAAK,CAAEA,KAAM,CACbC,IAAI,CAAEkB,QAAQ,CAACF,aAAa,CAACG,oBAAoB,CAAE,CACnDlB,MAAM,CAAEiB,QAAQ,CAACF,aAAa,CAACI,YAAY,CAAE,CAAAlB,QAAA,CAE7CC,GAAA,CAACkB,SAAS,CACRC,CAAAA,QAAQ,CAAC,UAAU,CACnBvB,KAAK,CAAEA,KAAM,CACbC,IAAI,CAAEA,IAAK,CACXuB,kBAAkB,CAAG,CAAA,EAAExB,KAAM,CAAY,UAAA,CAAA,CAC1C,CAAC,CACoB,CAAC,CAE7B,EAQM,IAAAyB,YAAY,CAAG,SAAfA,YAAYA,CAAAC,KAAA,CAI2B,KAHrCC,IAAI,CAAAD,KAAA,CAAVE,IAAI,CAAAC,WAAA,CAAAH,KAAA,CACJ1B,KAAK,CAALA,KAAK,CAAA6B,WAAA,GAAG,KAAA,CAAA,CAAA,SAAS,CAAAA,WAAA,CAAAC,gBAAA,CAAAJ,KAAA,CACjBK,UAAU,CAAVA,UAAU,CAAAD,gBAAA,GAAG,KAAA,CAAA,CAAA,KAAK,CAAAA,gBAAA,CAElB,IAAAE,cAAA,CAAiBhB,YAAY,EAAE,CAAvBf,IAAI,CAAA+B,cAAA,CAAJ/B,IAAI,CACZ,IAAMgB,aAAa,CAAGC,qBAAqB,CAACjB,IAAI,CAAC,CAEjD,OACEG,GAAA,CAACN,sBAAsB,CACrBE,CAAAA,KAAK,CAAEA,KAAM,CACbC,IAAI,CAAEkB,QAAQ,CAACF,aAAa,CAACG,oBAAoB,CAAE,CACnDlB,MAAM,CAAEiB,QAAQ,CAACF,aAAa,CAACI,YAAY,CAAE,CAAAlB,QAAA,CAE7CC,GAAA,CAACuB,IAAI,CACH1B,CAAAA,IAAI,CAAEgC,cAAc,CAAChC,IAAI,CAAE,CAC3BD,KAAK,CACH+B,UAAU,CACN,4BAA4B,CAC5B/B,KAAK,GAAK,SAAS,CACnB,6BAA6B,CAC5B,CAAA,cAAA,EAAgBA,KAAM,CAC5B,QAAA,CAAA,CACF,CAAC,CACoB,CAAC,CAE7B;;;;"}
|
|
@@ -7,7 +7,7 @@ import '../global/typography.js';
|
|
|
7
7
|
import '../global/motion.js';
|
|
8
8
|
import { throwBladeError } from '../../utils/logger/logger.js';
|
|
9
9
|
|
|
10
|
-
var WCAG2ContrastOptions={level:'AAA',size:'large'};var getColorWithOpacity=function getColorWithOpacity(color,opacity){return tinycolor(color).setAlpha(opacity).toHslString();};var generateChromaticBrandColors=function generateChromaticBrandColors(baseColorInput){var baseColor=tinycolor(baseColorInput);var baseColorHslString=baseColor.toHslString();if(__DEV__){if(!baseColor.isValid()){throwBladeError({message:'Invalid brandColor passed',moduleName:'createTheme'});}}var palette=[baseColorHslString];var brightness=tinycolor(baseColor).getBrightness();var lightnessFactor=brightness>150?3:6;var darknessFactor=brightness<50?3:5;var currentColor=baseColor;for(var lightShadeIndex=0;lightShadeIndex<6;lightShadeIndex++){currentColor=currentColor.brighten(lightnessFactor);palette.push(currentColor.toHslString());}currentColor=tinycolor(baseColorHslString);for(var darkShadeIndex=0;darkShadeIndex<4;darkShadeIndex++){currentColor=currentColor.darken(darknessFactor);palette.unshift(currentColor.toHslString());}var colorPalette=palette.reverse();var brandPrimaryColor=colorPalette[6];var brandColors={'50':colorPalette[0],'100':colorPalette[1],'200':colorPalette[2],'300':colorPalette[3],'400':colorPalette[4],'500':colorPalette[5],'600':brandPrimaryColor,'700':colorPalette[7],'800':colorPalette[8],'900':colorPalette[9],'1000':colorPalette[10],a50:getColorWithOpacity(brandPrimaryColor,opacity[100]),a150:getColorWithOpacity(brandPrimaryColor,opacity[100]),a100:getColorWithOpacity(brandPrimaryColor,opacity[200]),a200:getColorWithOpacity(brandPrimaryColor,opacity[300]),a400:getColorWithOpacity(brandPrimaryColor,opacity[400])};return brandColors;};var getOnLightOverrides=function getOnLightOverrides(brandColors){var foregroundOnSurface=tinycolor.isReadable(colors.neutral.blueGrayLight[50],brandColors[600],WCAG2ContrastOptions)?brandColors[600]:colors.neutral.blueGrayLight[1100];var foregroundOnBrand=tinycolor.mostReadable(brandColors[900],[colors.neutral.white[500],colors.neutral.black[500]],WCAG2ContrastOptions).toHslString();var lightThemeOverrides={interactive:{background:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100,fadedHighlighted:brandColors.a150}},border:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100}},text:{primary:{normal:foregroundOnSurface,disabled:
|
|
10
|
+
var WCAG2ContrastOptions={level:'AAA',size:'large'};var getColorWithOpacity=function getColorWithOpacity(color,opacity){return tinycolor(color).setAlpha(opacity).toHslString();};var generateChromaticBrandColors=function generateChromaticBrandColors(baseColorInput){var baseColor=tinycolor(baseColorInput);var baseColorHslString=baseColor.toHslString();if(__DEV__){if(!baseColor.isValid()){throwBladeError({message:'Invalid brandColor passed',moduleName:'createTheme'});}}var palette=[baseColorHslString];var brightness=tinycolor(baseColor).getBrightness();var lightnessFactor=brightness>150?3:6;var darknessFactor=brightness<50?3:5;var currentColor=baseColor;for(var lightShadeIndex=0;lightShadeIndex<6;lightShadeIndex++){currentColor=currentColor.brighten(lightnessFactor);palette.push(currentColor.toHslString());}currentColor=tinycolor(baseColorHslString);for(var darkShadeIndex=0;darkShadeIndex<4;darkShadeIndex++){currentColor=currentColor.darken(darknessFactor);palette.unshift(currentColor.toHslString());}var colorPalette=palette.reverse();var brandPrimaryColor=colorPalette[6];var brandColors={'50':colorPalette[0],'100':colorPalette[1],'200':colorPalette[2],'300':colorPalette[3],'400':colorPalette[4],'500':colorPalette[5],'600':brandPrimaryColor,'700':colorPalette[7],'800':colorPalette[8],'900':colorPalette[9],'1000':colorPalette[10],a50:getColorWithOpacity(brandPrimaryColor,opacity[100]),a150:getColorWithOpacity(brandPrimaryColor,opacity[100]),a100:getColorWithOpacity(brandPrimaryColor,opacity[200]),a200:getColorWithOpacity(brandPrimaryColor,opacity[300]),a400:getColorWithOpacity(brandPrimaryColor,opacity[400])};return brandColors;};var getOnLightOverrides=function getOnLightOverrides(brandColors){var foregroundOnSurface=tinycolor.isReadable(colors.neutral.blueGrayLight[50],brandColors[600],WCAG2ContrastOptions)?brandColors[600]:colors.neutral.blueGrayLight[1100];var foregroundOnBrand=tinycolor.mostReadable(brandColors[900],[colors.neutral.white[500],colors.neutral.black[500]],WCAG2ContrastOptions).toHslString();var lightThemeOverrides={interactive:{background:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100,fadedHighlighted:brandColors.a150}},border:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100}},text:{primary:{normal:foregroundOnSurface,disabled:brandColors.a200,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}},icon:{primary:{normal:foregroundOnSurface,disabled:brandColors.a200,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}}},surface:{background:{primary:{intense:brandColors[600],subtle:brandColors[200]}},icon:{primary:{normal:brandColors[600]}},text:{primary:{normal:brandColors[600]}}}};return lightThemeOverrides;};var getOnDarkOverrides=function getOnDarkOverrides(brandColors){var foregroundOnSurface=tinycolor.isReadable(colors.neutral.blueGrayDark[1100],brandColors[400],WCAG2ContrastOptions)?brandColors[400]:colors.neutral.blueGrayDark[0];var foregroundOnBrand=tinycolor.mostReadable(brandColors[900],[colors.neutral.white[500],colors.neutral.black[500]],WCAG2ContrastOptions).toHslString();var darkThemeOverrides={interactive:{background:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100,fadedHighlighted:brandColors.a150}},border:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100}},text:{primary:{normal:foregroundOnSurface,disabled:brandColors.a400,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}},icon:{primary:{normal:foregroundOnSurface,disabled:brandColors.a400,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}}},surface:{background:{primary:{intense:brandColors[600],subtle:brandColors[200]}},icon:{primary:{normal:brandColors[600]}}}};return darkThemeOverrides;};var createTheme=function createTheme(_ref){var brandColor=_ref.brandColor;var chromaticBrandColors=generateChromaticBrandColors(brandColor);var brandedLightTheme=getOnLightOverrides(chromaticBrandColors);var brandedDarkTheme=getOnDarkOverrides(chromaticBrandColors);var brandedThemeTokens=overrideTheme({baseThemeTokens:bladeTheme,overrides:{name:`custom-${tinycolor(brandColor).toHex()}`,colors:{onLight:Object.assign({},brandedLightTheme),onDark:Object.assign({},brandedDarkTheme)}}});return {theme:brandedThemeTokens,brandColors:chromaticBrandColors};};
|
|
11
11
|
|
|
12
12
|
export { createTheme };
|
|
13
13
|
//# sourceMappingURL=createTheme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.js","sources":["../../../../../src/tokens/theme/createTheme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport type { WCAG2Options, ColorInput } from 'tinycolor2';\nimport type { ThemeTokens } from './theme';\nimport overrideTheme from './overrideTheme';\nimport bladeTheme from './bladeTheme';\nimport { colors as globalColors, opacity } from '~tokens/global';\nimport type { ColorChromaticScale } from '~tokens/global/colors';\nimport { throwBladeError } from '~utils/logger';\nimport type { DeepPartial } from '~utils/isPartialMatchObjectKeys';\n\n// WCAG2ContrastOptions are the options used to determine if a color is readable\nconst WCAG2ContrastOptions: WCAG2Options = {\n level: 'AAA',\n size: 'large',\n};\n\n/**\n * getColorWithOpacity\n * @param color - The color to add opacity to\n * @param opacity - The opacity to add to the color\n * @returns The color with the opacity added\n * @example\n * getColorWithOpacity('#fff', 0.5) // returns 'hsla(0, 0%, 100%, 0.5)'\n *\n **/\nconst getColorWithOpacity = (color: ColorInput, opacity: number): string => {\n return tinycolor(color).setAlpha(opacity).toHslString();\n};\n\n/**\n *\n * @description\n * Generates a chromatic color palette based on the base color passed in.\n * The base color is used to generate a palette of 11 colors, 5 shades lighter and 5 shades darker than the base color.\n * @param baseColorInput - The base color to generate the chromatic color palette from in hex, rgb, or hsl format\n * @returns Array of chromatic color palette\n */\nconst generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromaticScale => {\n const baseColor = tinycolor(baseColorInput);\n const baseColorHslString = baseColor.toHslString();\n if (__DEV__) {\n if (!baseColor.isValid()) {\n throwBladeError({\n message: 'Invalid brandColor passed',\n moduleName: 'createTheme',\n });\n }\n }\n\n const palette = [baseColorHslString]; // Include the original color\n const brightness = tinycolor(baseColor).getBrightness();\n // Determine how much to lighten or darken the colors depending on the brightness of the base color\n const lightnessFactor = brightness > 150 ? 3 : 6;\n const darknessFactor = brightness < 50 ? 3 : 5;\n\n let currentColor = baseColor;\n\n // Generate shades lighter\n for (let lightShadeIndex = 0; lightShadeIndex < 6; lightShadeIndex++) {\n currentColor = currentColor.brighten(lightnessFactor);\n palette.push(currentColor.toHslString());\n }\n\n currentColor = tinycolor(baseColorHslString); // Reset to the base color\n\n // Generate shades darker\n for (let darkShadeIndex = 0; darkShadeIndex < 4; darkShadeIndex++) {\n currentColor = currentColor.darken(darknessFactor);\n palette.unshift(currentColor.toHslString()); // Add shades at the beginning of the palette\n }\n\n const colorPalette = palette.reverse();\n const brandPrimaryColor = colorPalette[6];\n\n const brandColors: ColorChromaticScale = {\n '50': colorPalette[0],\n '100': colorPalette[1],\n '200': colorPalette[2],\n '300': colorPalette[3],\n '400': colorPalette[4],\n '500': colorPalette[5],\n '600': brandPrimaryColor,\n '700': colorPalette[7],\n '800': colorPalette[8],\n '900': colorPalette[9],\n '1000': colorPalette[10],\n a50: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a150: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a100: getColorWithOpacity(brandPrimaryColor, opacity[200]),\n a200: getColorWithOpacity(brandPrimaryColor, opacity[300]),\n a400: getColorWithOpacity(brandPrimaryColor, opacity[400]),\n };\n\n return brandColors;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the light theme\n * @description Returns overrides for the light theme with the brand colors passed in\n * @returns Overrides for the light theme with the custom brand colors\n */\nconst getOnLightOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onLight']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayLight[50],\n brandColors[600],\n WCAG2ContrastOptions,\n )\n ? brandColors[600]\n : globalColors.neutral.blueGrayLight[1100];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the light theme with the brand colors passed in\n const lightThemeOverrides: DeepPartial<ThemeTokens['colors']['onLight']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: foregroundOnSurface,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: foregroundOnSurface,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n text: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return lightThemeOverrides;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the dark theme\n * @description Returns overrides for the dark theme with the brand colors passed in\n * @returns Overrides for the dark theme with the custom brand colors\n */\nconst getOnDarkOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onDark']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayDark[1100],\n brandColors[400],\n WCAG2ContrastOptions,\n )\n ? brandColors[400]\n : globalColors.neutral.blueGrayDark[0];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the dark theme with the brand colors passed in\n const darkThemeOverrides: DeepPartial<ThemeTokens['colors']['onDark']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: foregroundOnSurface,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: foregroundOnSurface,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return darkThemeOverrides;\n};\n\n/**\n * @param {Object} themeConfig - The brand color and overrides to apply to the theme\n * @param {string} themeConfig.brandColor - The brand color to use to generate the theme. Can be in hex, rgb, or hsl format.\n * @description\n * Creates a Blade Theme based on the custom brand color\n * @returns The Theme Tokens with the custom brand colors\n * @example\n * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'})\n **/\nexport const createTheme = ({\n brandColor,\n}: {\n brandColor: ColorInput;\n}): { theme: ThemeTokens; brandColors: ColorChromaticScale } => {\n const chromaticBrandColors = generateChromaticBrandColors(brandColor);\n // Get onLight overrides\n const brandedLightTheme = getOnLightOverrides(chromaticBrandColors);\n // Get onDark overrides\n const brandedDarkTheme = getOnDarkOverrides(chromaticBrandColors);\n // Override the payment theme with the brand colors\n const brandedThemeTokens = overrideTheme({\n baseThemeTokens: bladeTheme,\n overrides: {\n name: `custom-${tinycolor(brandColor).toHex()}`,\n colors: {\n onLight: {\n ...brandedLightTheme,\n },\n onDark: {\n ...brandedDarkTheme,\n },\n },\n },\n });\n\n return { theme: brandedThemeTokens, brandColors: chromaticBrandColors };\n};\n"],"names":["WCAG2ContrastOptions","level","size","getColorWithOpacity","color","opacity","tinycolor","setAlpha","toHslString","generateChromaticBrandColors","baseColorInput","baseColor","baseColorHslString","__DEV__","isValid","throwBladeError","message","moduleName","palette","brightness","getBrightness","lightnessFactor","darknessFactor","currentColor","lightShadeIndex","brighten","push","darkShadeIndex","darken","unshift","colorPalette","reverse","brandPrimaryColor","brandColors","a50","a150","a100","a200","a400","getOnLightOverrides","foregroundOnSurface","isReadable","globalColors","neutral","blueGrayLight","foregroundOnBrand","mostReadable","white","black","lightThemeOverrides","interactive","background","primary","default","highlighted","disabled","faded","fadedHighlighted","border","text","normal","muted","subtle","onPrimary","icon","surface","intense","getOnDarkOverrides","blueGrayDark","darkThemeOverrides","createTheme","_ref","brandColor","chromaticBrandColors","brandedLightTheme","brandedDarkTheme","brandedThemeTokens","overrideTheme","baseThemeTokens","bladeTheme","overrides","name","toHex","colors","onLight","Object","assign","onDark","theme"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"createTheme.js","sources":["../../../../../src/tokens/theme/createTheme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport type { WCAG2Options, ColorInput } from 'tinycolor2';\nimport type { ThemeTokens } from './theme';\nimport overrideTheme from './overrideTheme';\nimport bladeTheme from './bladeTheme';\nimport { colors as globalColors, opacity } from '~tokens/global';\nimport type { ColorChromaticScale } from '~tokens/global/colors';\nimport { throwBladeError } from '~utils/logger';\nimport type { DeepPartial } from '~utils/isPartialMatchObjectKeys';\n\n// WCAG2ContrastOptions are the options used to determine if a color is readable\nconst WCAG2ContrastOptions: WCAG2Options = {\n level: 'AAA',\n size: 'large',\n};\n\n/**\n * getColorWithOpacity\n * @param color - The color to add opacity to\n * @param opacity - The opacity to add to the color\n * @returns The color with the opacity added\n * @example\n * getColorWithOpacity('#fff', 0.5) // returns 'hsla(0, 0%, 100%, 0.5)'\n *\n **/\nconst getColorWithOpacity = (color: ColorInput, opacity: number): string => {\n return tinycolor(color).setAlpha(opacity).toHslString();\n};\n\n/**\n *\n * @description\n * Generates a chromatic color palette based on the base color passed in.\n * The base color is used to generate a palette of 11 colors, 5 shades lighter and 5 shades darker than the base color.\n * @param baseColorInput - The base color to generate the chromatic color palette from in hex, rgb, or hsl format\n * @returns Array of chromatic color palette\n */\nconst generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromaticScale => {\n const baseColor = tinycolor(baseColorInput);\n const baseColorHslString = baseColor.toHslString();\n if (__DEV__) {\n if (!baseColor.isValid()) {\n throwBladeError({\n message: 'Invalid brandColor passed',\n moduleName: 'createTheme',\n });\n }\n }\n\n const palette = [baseColorHslString]; // Include the original color\n const brightness = tinycolor(baseColor).getBrightness();\n // Determine how much to lighten or darken the colors depending on the brightness of the base color\n const lightnessFactor = brightness > 150 ? 3 : 6;\n const darknessFactor = brightness < 50 ? 3 : 5;\n\n let currentColor = baseColor;\n\n // Generate shades lighter\n for (let lightShadeIndex = 0; lightShadeIndex < 6; lightShadeIndex++) {\n currentColor = currentColor.brighten(lightnessFactor);\n palette.push(currentColor.toHslString());\n }\n\n currentColor = tinycolor(baseColorHslString); // Reset to the base color\n\n // Generate shades darker\n for (let darkShadeIndex = 0; darkShadeIndex < 4; darkShadeIndex++) {\n currentColor = currentColor.darken(darknessFactor);\n palette.unshift(currentColor.toHslString()); // Add shades at the beginning of the palette\n }\n\n const colorPalette = palette.reverse();\n const brandPrimaryColor = colorPalette[6];\n\n const brandColors: ColorChromaticScale = {\n '50': colorPalette[0],\n '100': colorPalette[1],\n '200': colorPalette[2],\n '300': colorPalette[3],\n '400': colorPalette[4],\n '500': colorPalette[5],\n '600': brandPrimaryColor,\n '700': colorPalette[7],\n '800': colorPalette[8],\n '900': colorPalette[9],\n '1000': colorPalette[10],\n a50: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a150: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a100: getColorWithOpacity(brandPrimaryColor, opacity[200]),\n a200: getColorWithOpacity(brandPrimaryColor, opacity[300]),\n a400: getColorWithOpacity(brandPrimaryColor, opacity[400]),\n };\n\n return brandColors;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the light theme\n * @description Returns overrides for the light theme with the brand colors passed in\n * @returns Overrides for the light theme with the custom brand colors\n */\nconst getOnLightOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onLight']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayLight[50],\n brandColors[600],\n WCAG2ContrastOptions,\n )\n ? brandColors[600]\n : globalColors.neutral.blueGrayLight[1100];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the light theme with the brand colors passed in\n const lightThemeOverrides: DeepPartial<ThemeTokens['colors']['onLight']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a200,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a200,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n text: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return lightThemeOverrides;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the dark theme\n * @description Returns overrides for the dark theme with the brand colors passed in\n * @returns Overrides for the dark theme with the custom brand colors\n */\nconst getOnDarkOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onDark']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayDark[1100],\n brandColors[400],\n WCAG2ContrastOptions,\n )\n ? brandColors[400]\n : globalColors.neutral.blueGrayDark[0];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the dark theme with the brand colors passed in\n const darkThemeOverrides: DeepPartial<ThemeTokens['colors']['onDark']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a400,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a400,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return darkThemeOverrides;\n};\n\n/**\n * @param {Object} themeConfig - The brand color and overrides to apply to the theme\n * @param {string} themeConfig.brandColor - The brand color to use to generate the theme. Can be in hex, rgb, or hsl format.\n * @description\n * Creates a Blade Theme based on the custom brand color\n * @returns The Theme Tokens with the custom brand colors\n * @example\n * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'})\n **/\nexport const createTheme = ({\n brandColor,\n}: {\n brandColor: ColorInput;\n}): { theme: ThemeTokens; brandColors: ColorChromaticScale } => {\n const chromaticBrandColors = generateChromaticBrandColors(brandColor);\n // Get onLight overrides\n const brandedLightTheme = getOnLightOverrides(chromaticBrandColors);\n // Get onDark overrides\n const brandedDarkTheme = getOnDarkOverrides(chromaticBrandColors);\n // Override the payment theme with the brand colors\n const brandedThemeTokens = overrideTheme({\n baseThemeTokens: bladeTheme,\n overrides: {\n name: `custom-${tinycolor(brandColor).toHex()}`,\n colors: {\n onLight: {\n ...brandedLightTheme,\n },\n onDark: {\n ...brandedDarkTheme,\n },\n },\n },\n });\n\n return { theme: brandedThemeTokens, brandColors: chromaticBrandColors };\n};\n"],"names":["WCAG2ContrastOptions","level","size","getColorWithOpacity","color","opacity","tinycolor","setAlpha","toHslString","generateChromaticBrandColors","baseColorInput","baseColor","baseColorHslString","__DEV__","isValid","throwBladeError","message","moduleName","palette","brightness","getBrightness","lightnessFactor","darknessFactor","currentColor","lightShadeIndex","brighten","push","darkShadeIndex","darken","unshift","colorPalette","reverse","brandPrimaryColor","brandColors","a50","a150","a100","a200","a400","getOnLightOverrides","foregroundOnSurface","isReadable","globalColors","neutral","blueGrayLight","foregroundOnBrand","mostReadable","white","black","lightThemeOverrides","interactive","background","primary","default","highlighted","disabled","faded","fadedHighlighted","border","text","normal","muted","subtle","onPrimary","icon","surface","intense","getOnDarkOverrides","blueGrayDark","darkThemeOverrides","createTheme","_ref","brandColor","chromaticBrandColors","brandedLightTheme","brandedDarkTheme","brandedThemeTokens","overrideTheme","baseThemeTokens","bladeTheme","overrides","name","toHex","colors","onLight","Object","assign","onDark","theme"],"mappings":"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"}
|
|
@@ -27,7 +27,7 @@ import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
|
|
|
27
27
|
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
28
28
|
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
|
|
29
29
|
|
|
30
|
-
var _excluded = ["value", "suffix", "type", "size", "weight", "isAffixSubtle", "isStrikethrough", "color", "currencyIndicator", "currency", "testID"];
|
|
30
|
+
var _excluded = ["value", "suffix", "type", "size", "weight", "isAffixSubtle", "isStrikethrough", "color", "currencyIndicator", "currency", "fractionDigits", "testID"];
|
|
31
31
|
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; }
|
|
32
32
|
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; }
|
|
33
33
|
var stripTrailingZerosFromParts = function stripTrailingZerosFromParts(parts) {
|
|
@@ -136,15 +136,17 @@ var AmountValue = function AmountValue(_ref6) {
|
|
|
136
136
|
var getAmountByParts = function getAmountByParts(_ref7) {
|
|
137
137
|
var suffix = _ref7.suffix,
|
|
138
138
|
value = _ref7.value,
|
|
139
|
-
currency = _ref7.currency
|
|
139
|
+
currency = _ref7.currency,
|
|
140
|
+
_ref7$fractionDigits = _ref7.fractionDigits,
|
|
141
|
+
fractionDigits = _ref7$fractionDigits === void 0 ? 2 : _ref7$fractionDigits;
|
|
140
142
|
try {
|
|
141
143
|
switch (suffix) {
|
|
142
144
|
case 'decimals':
|
|
143
145
|
{
|
|
144
146
|
var options = {
|
|
145
147
|
intlOptions: {
|
|
146
|
-
maximumFractionDigits:
|
|
147
|
-
minimumFractionDigits:
|
|
148
|
+
maximumFractionDigits: fractionDigits,
|
|
149
|
+
minimumFractionDigits: fractionDigits
|
|
148
150
|
},
|
|
149
151
|
currency: currency
|
|
150
152
|
};
|
|
@@ -201,6 +203,8 @@ var _Amount = function _Amount(_ref8, ref) {
|
|
|
201
203
|
currencyIndicator = _ref8$currencyIndicat === void 0 ? 'currency-symbol' : _ref8$currencyIndicat,
|
|
202
204
|
_ref8$currency = _ref8.currency,
|
|
203
205
|
currency = _ref8$currency === void 0 ? 'INR' : _ref8$currency,
|
|
206
|
+
_ref8$fractionDigits = _ref8.fractionDigits,
|
|
207
|
+
fractionDigits = _ref8$fractionDigits === void 0 ? 2 : _ref8$fractionDigits,
|
|
204
208
|
testID = _ref8.testID,
|
|
205
209
|
rest = _objectWithoutProperties(_ref8, _excluded);
|
|
206
210
|
if (true) {
|
|
@@ -246,7 +250,8 @@ var _Amount = function _Amount(_ref8, ref) {
|
|
|
246
250
|
var renderedValue = getAmountByParts({
|
|
247
251
|
suffix: suffix,
|
|
248
252
|
value: value,
|
|
249
|
-
currency: currency
|
|
253
|
+
currency: currency,
|
|
254
|
+
fractionDigits: fractionDigits
|
|
250
255
|
});
|
|
251
256
|
var isPrefixSymbol = (_renderedValue$isPref = renderedValue.isPrefixSymbol) !== null && _renderedValue$isPref !== void 0 ? _renderedValue$isPref : true;
|
|
252
257
|
var currencySymbol = (_renderedValue$curren = renderedValue.currency) !== null && _renderedValue$curren !== void 0 ? _renderedValue$curren : currency;
|