@razorpay/blade 11.24.2 → 11.25.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/Avatar/TrustedBadgeIcon.native.js +7 -0
- package/build/lib/native/components/Avatar/TrustedBadgeIcon.native.js.map +1 -0
- package/build/lib/native/components/BaseMenu/BaseMenuItem/BaseMenuItem.js +5 -4
- package/build/lib/native/components/BaseMenu/BaseMenuItem/BaseMenuItem.js.map +1 -1
- package/build/lib/native/components/Indicator/Indicator.js +2 -1
- package/build/lib/native/components/Indicator/Indicator.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/components/Typography/BaseText/BaseText.native.js +2 -1
- package/build/lib/native/components/Typography/BaseText/BaseText.native.js.map +1 -1
- package/build/lib/native/components/index.js +1 -0
- package/build/lib/native/components/index.js.map +1 -1
- package/build/lib/native/utils/useTruncationTitle/useTruncationTitle.native.js +4 -0
- package/build/lib/native/utils/useTruncationTitle/useTruncationTitle.native.js.map +1 -0
- package/build/lib/web/development/components/Avatar/Avatar.web.js +42 -3
- package/build/lib/web/development/components/Avatar/Avatar.web.js.map +1 -1
- package/build/lib/web/development/components/Avatar/AvatarButton.js +8 -3
- package/build/lib/web/development/components/Avatar/AvatarButton.js.map +1 -1
- package/build/lib/web/development/components/Avatar/StyledAvatar.js +11 -5
- package/build/lib/web/development/components/Avatar/StyledAvatar.js.map +1 -1
- package/build/lib/web/development/components/Avatar/StyledAvatarButton.js +10 -6
- package/build/lib/web/development/components/Avatar/StyledAvatarButton.js.map +1 -1
- package/build/lib/web/development/components/Avatar/TrustedBadgeIcon.web.js +195 -0
- package/build/lib/web/development/components/Avatar/TrustedBadgeIcon.web.js.map +1 -0
- package/build/lib/web/development/components/Avatar/avatarTokens.js +61 -1
- package/build/lib/web/development/components/Avatar/avatarTokens.js.map +1 -1
- package/build/lib/web/development/components/Avatar/index.js +1 -0
- package/build/lib/web/development/components/Avatar/index.js.map +1 -1
- package/build/lib/web/development/components/BaseMenu/BaseMenuItem/BaseMenuItem.js +49 -34
- package/build/lib/web/development/components/BaseMenu/BaseMenuItem/BaseMenuItem.js.map +1 -1
- package/build/lib/web/development/components/Indicator/Indicator.js +7 -2
- package/build/lib/web/development/components/Indicator/Indicator.js.map +1 -1
- package/build/lib/web/development/components/StepGroup/StepItemMarker.js +0 -1
- package/build/lib/web/development/components/StepGroup/StepItemMarker.js.map +1 -1
- package/build/lib/web/development/components/Typography/BaseText/BaseText.web.js +6 -3
- package/build/lib/web/development/components/Typography/BaseText/BaseText.web.js.map +1 -1
- package/build/lib/web/development/components/index.js +1 -0
- package/build/lib/web/development/components/index.js.map +1 -1
- package/build/lib/web/development/utils/useTruncationTitle/index.js +2 -0
- package/build/lib/web/development/utils/useTruncationTitle/index.js.map +1 -0
- package/build/lib/web/development/utils/useTruncationTitle/useTruncationTitle.web.js +37 -0
- package/build/lib/web/development/utils/useTruncationTitle/useTruncationTitle.web.js.map +1 -0
- package/build/lib/web/production/components/Avatar/Avatar.web.js +42 -3
- package/build/lib/web/production/components/Avatar/Avatar.web.js.map +1 -1
- package/build/lib/web/production/components/Avatar/AvatarButton.js +8 -3
- package/build/lib/web/production/components/Avatar/AvatarButton.js.map +1 -1
- package/build/lib/web/production/components/Avatar/StyledAvatar.js +11 -5
- package/build/lib/web/production/components/Avatar/StyledAvatar.js.map +1 -1
- package/build/lib/web/production/components/Avatar/StyledAvatarButton.js +10 -6
- package/build/lib/web/production/components/Avatar/StyledAvatarButton.js.map +1 -1
- package/build/lib/web/production/components/Avatar/TrustedBadgeIcon.web.js +195 -0
- package/build/lib/web/production/components/Avatar/TrustedBadgeIcon.web.js.map +1 -0
- package/build/lib/web/production/components/Avatar/avatarTokens.js +61 -1
- package/build/lib/web/production/components/Avatar/avatarTokens.js.map +1 -1
- package/build/lib/web/production/components/Avatar/index.js +1 -0
- package/build/lib/web/production/components/Avatar/index.js.map +1 -1
- package/build/lib/web/production/components/BaseMenu/BaseMenuItem/BaseMenuItem.js +49 -34
- package/build/lib/web/production/components/BaseMenu/BaseMenuItem/BaseMenuItem.js.map +1 -1
- package/build/lib/web/production/components/Indicator/Indicator.js +7 -2
- package/build/lib/web/production/components/Indicator/Indicator.js.map +1 -1
- package/build/lib/web/production/components/StepGroup/StepItemMarker.js +0 -1
- package/build/lib/web/production/components/StepGroup/StepItemMarker.js.map +1 -1
- package/build/lib/web/production/components/Typography/BaseText/BaseText.web.js +6 -3
- package/build/lib/web/production/components/Typography/BaseText/BaseText.web.js.map +1 -1
- package/build/lib/web/production/components/index.js +1 -0
- package/build/lib/web/production/components/index.js.map +1 -1
- package/build/lib/web/production/utils/useTruncationTitle/index.js +2 -0
- package/build/lib/web/production/utils/useTruncationTitle/index.js.map +1 -0
- package/build/lib/web/production/utils/useTruncationTitle/useTruncationTitle.web.js +37 -0
- package/build/lib/web/production/utils/useTruncationTitle/useTruncationTitle.web.js.map +1 -0
- package/build/types/components/index.d.ts +23 -17
- package/build/types/components/index.native.d.ts +20 -17
- package/package.json +1 -1
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { throwBladeError } from '../../utils/logger/logger.js';
|
|
2
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
var TrustedBadgeIcon=function TrustedBadgeIcon(){throwBladeError({message:'TrustedBadgeIcon is not yet implemented for React Native',moduleName:'TrustedBadgeIcon'});return jsx(Fragment,{});};
|
|
5
|
+
|
|
6
|
+
export { TrustedBadgeIcon };
|
|
7
|
+
//# sourceMappingURL=TrustedBadgeIcon.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TrustedBadgeIcon.native.js","sources":["../../../../../src/components/Avatar/TrustedBadgeIcon.native.tsx"],"sourcesContent":["import { throwBladeError } from '~utils/logger';\n\nimport type { IconComponent } from '~components/Icons';\n\nconst TrustedBadgeIcon: IconComponent = () => {\n throwBladeError({\n message: 'TrustedBadgeIcon is not yet implemented for React Native',\n moduleName: 'TrustedBadgeIcon',\n });\n\n return <></>;\n};\n\nexport { TrustedBadgeIcon };\n"],"names":["TrustedBadgeIcon","throwBladeError","message","moduleName","_jsx","_Fragment"],"mappings":";;;AAIM,IAAAA,gBAA+B,CAAG,SAAlCA,gBAA+BA,EAAS,CAC5CC,eAAe,CAAC,CACdC,OAAO,CAAE,0DAA0D,CACnEC,UAAU,CAAE,kBACd,CAAC,CAAC,CAEF,OAAOC,GAAA,CAAAC,QAAA,CAAA,EAAI,CAAC,CACd;;;;"}
|
|
@@ -3,7 +3,7 @@ import React__default from 'react';
|
|
|
3
3
|
import { BaseMenuItemContext } from '../BaseMenuContext.js';
|
|
4
4
|
import { StyledMenuItemContainer } from './StyledMenuItemContainer.native.js';
|
|
5
5
|
import { Box } from '../../Box/Box.js';
|
|
6
|
-
import '../../Typography/BaseText/BaseText.native.js';
|
|
6
|
+
import { BaseText } from '../../Typography/BaseText/BaseText.native.js';
|
|
7
7
|
import '@babel/runtime/helpers/slicedToArray';
|
|
8
8
|
import 'react-native';
|
|
9
9
|
import '../../../tokens/global/typography.js';
|
|
@@ -11,12 +11,13 @@ import '../../../tokens/global/motion.js';
|
|
|
11
11
|
import { size } from '../../../tokens/global/size.js';
|
|
12
12
|
import { makeSize } from '../../../utils/makeSize/makeSize.js';
|
|
13
13
|
import '../../BladeProvider/useTheme.js';
|
|
14
|
-
import { jsx,
|
|
15
|
-
import { Text } from '../../Typography/Text/Text.js';
|
|
14
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
15
|
+
import { getTextProps, Text } from '../../Typography/Text/Text.js';
|
|
16
16
|
import '../../Typography/Code/Code.js';
|
|
17
17
|
import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.native.js';
|
|
18
|
+
import { useTruncationTitle } from '../../../utils/useTruncationTitle/useTruncationTitle.native.js';
|
|
18
19
|
|
|
19
|
-
var _excluded=["title","description","as","leading","trailing","titleSuffix","isDisabled","selectionType","isSelected","isVisible","color","role","children"];var menuItemTitleColor={negative:{default:'feedback.text.negative.intense',disabled:'interactive.text.gray.disabled'},normal:{default:'interactive.text.gray.normal',disabled:'interactive.text.gray.disabled'}};var menuItemDescriptionColor={default:'interactive.text.gray.muted',disabled:'interactive.text.gray.disabled'};var itemFirstRowHeight=makeSize(size[20]);var _BaseMenuItem=function _BaseMenuItem(_ref,ref){var title=_ref.title,description=_ref.description,as=_ref.as,leading=_ref.leading,trailing=_ref.trailing,titleSuffix=_ref.titleSuffix,isDisabled=_ref.isDisabled,_ref$selectionType=_ref.selectionType,selectionType=_ref$selectionType===void 0?'single':_ref$selectionType,isSelected=_ref.isSelected,_ref$isVisible=_ref.isVisible,isVisible=_ref$isVisible===void 0?true:_ref$isVisible,color=_ref.color,_ref$role=_ref.role,role=_ref$role===void 0?'menuitem':_ref$role,children=_ref.children,props=_objectWithoutProperties(_ref,_excluded);return jsx(BaseMenuItemContext.Provider,{value:{color:color,isDisabled:isDisabled},children:jsx(StyledMenuItemContainer,Object.assign({ref:ref,as:as,type:"button",disabled:isDisabled},makeAccessible({role:role,current:role==='menuitem'||role==='menuitemcheckbox'?isSelected:undefined,disabled:isDisabled,selected:isSelected}),{color:color,isVisible:isVisible,isSelected:isSelected,isDisabled:isDisabled,selectionType:selectionType},props,{children:children?children:
|
|
20
|
+
var _excluded=["title","description","as","leading","trailing","titleSuffix","isDisabled","selectionType","isSelected","isVisible","color","role","children"];var menuItemTitleColor={negative:{default:'feedback.text.negative.intense',disabled:'interactive.text.gray.disabled'},normal:{default:'interactive.text.gray.normal',disabled:'interactive.text.gray.disabled'}};var menuItemDescriptionColor={default:'interactive.text.gray.muted',disabled:'interactive.text.gray.disabled'};var itemFirstRowHeight=makeSize(size[20]);var _BaseMenuItem=function _BaseMenuItem(_ref,ref){var title=_ref.title,description=_ref.description,as=_ref.as,leading=_ref.leading,trailing=_ref.trailing,titleSuffix=_ref.titleSuffix,isDisabled=_ref.isDisabled,_ref$selectionType=_ref.selectionType,selectionType=_ref$selectionType===void 0?'single':_ref$selectionType,isSelected=_ref.isSelected,_ref$isVisible=_ref.isVisible,isVisible=_ref$isVisible===void 0?true:_ref$isVisible,color=_ref.color,_ref$role=_ref.role,role=_ref$role===void 0?'menuitem':_ref$role,children=_ref.children,props=_objectWithoutProperties(_ref,_excluded);var _useTruncationTitle=useTruncationTitle({content:title}),containerRef=_useTruncationTitle.containerRef,textRef=_useTruncationTitle.textRef;return jsx(BaseMenuItemContext.Provider,{value:{color:color,isDisabled:isDisabled},children:jsx(StyledMenuItemContainer,Object.assign({ref:ref,as:as,type:"button",disabled:isDisabled},makeAccessible({role:role,current:role==='menuitem'||role==='menuitemcheckbox'?isSelected:undefined,disabled:isDisabled,selected:isSelected}),{color:color,isVisible:isVisible,isSelected:isSelected,isDisabled:isDisabled,selectionType:selectionType},props,{children:children?children:jsxs(Box,{display:"flex",alignItems:"flex-start",width:"100%",justifyContent:"center",children:[jsx(Box,{display:"flex",justifyContent:"center",alignItems:"center",height:itemFirstRowHeight,children:leading}),jsxs(Box,{paddingLeft:leading?'spacing.3':'spacing.0',paddingRight:"spacing.3",display:"flex",flexDirection:"column",children:[jsxs(Box,{display:"flex",alignItems:"center",flexDirection:"row",height:itemFirstRowHeight,ref:containerRef,children:[jsx(BaseText,Object.assign({as:"p",ref:textRef,truncateAfterLines:1,wordBreak:"break-all"},getTextProps({size:'medium',color:menuItemTitleColor[color==='negative'?'negative':'normal'][isDisabled?'disabled':'default'],weight:'regular'}),{children:title})),titleSuffix]}),jsx(Box,{children:description?jsx(Text,{color:menuItemDescriptionColor[isDisabled?'disabled':'default'],size:"small",children:description}):null})]}),jsx(Box,{marginLeft:"auto",children:trailing})]})}))});};var BaseMenuItem=React__default.forwardRef(_BaseMenuItem);
|
|
20
21
|
|
|
21
22
|
export { BaseMenuItem };
|
|
22
23
|
//# sourceMappingURL=BaseMenuItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseMenuItem.js","sources":["../../../../../../src/components/BaseMenu/BaseMenuItem/BaseMenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport type { BaseMenuItemProps } from '../types';\nimport { BaseMenuItemContext } from '../BaseMenuContext';\nimport { StyledMenuItemContainer } from './StyledMenuItemContainer';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport type { BladeElementRef } from '~utils/types';\n\nconst menuItemTitleColor = {\n negative: {\n default: 'feedback.text.negative.intense',\n disabled: 'interactive.text.gray.disabled',\n },\n normal: { default: 'interactive.text.gray.normal', disabled: 'interactive.text.gray.disabled' },\n} as const;\n\nconst menuItemDescriptionColor = {\n default: 'interactive.text.gray.muted',\n disabled: 'interactive.text.gray.disabled',\n} as const;\n\n// This is the height of item excluding the description to make sure description comes at the bottom and other first row items are center aligned\nconst itemFirstRowHeight = makeSize(size[20]);\n\nconst _BaseMenuItem: React.ForwardRefRenderFunction<BladeElementRef, BaseMenuItemProps> = (\n {\n title,\n description,\n as,\n leading,\n trailing,\n titleSuffix,\n isDisabled,\n selectionType = 'single',\n isSelected,\n isVisible = true,\n color,\n role = 'menuitem',\n children,\n ...props\n },\n ref,\n): React.ReactElement => {\n return (\n <BaseMenuItemContext.Provider value={{ color, isDisabled }}>\n <StyledMenuItemContainer\n ref={ref as never}\n as={as}\n type=\"button\"\n disabled={isDisabled}\n {...makeAccessible({\n role,\n current: role === 'menuitem' || role === 'menuitemcheckbox' ? isSelected : undefined,\n disabled: isDisabled,\n selected: isSelected,\n })}\n color={color}\n isVisible={isVisible}\n isSelected={isSelected}\n isDisabled={isDisabled}\n selectionType={selectionType}\n {...props}\n >\n {children ? (\n children\n ) : (\n
|
|
1
|
+
{"version":3,"file":"BaseMenuItem.js","sources":["../../../../../../src/components/BaseMenu/BaseMenuItem/BaseMenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport type { BaseMenuItemProps } from '../types';\nimport { BaseMenuItemContext } from '../BaseMenuContext';\nimport { StyledMenuItemContainer } from './StyledMenuItemContainer';\nimport { Box } from '~components/Box';\nimport { getTextProps, Text } from '~components/Typography';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport type { BladeElementRef } from '~utils/types';\nimport { BaseText } from '~components/Typography/BaseText';\nimport { useTruncationTitle } from '~utils/useTruncationTitle';\n\nconst menuItemTitleColor = {\n negative: {\n default: 'feedback.text.negative.intense',\n disabled: 'interactive.text.gray.disabled',\n },\n normal: { default: 'interactive.text.gray.normal', disabled: 'interactive.text.gray.disabled' },\n} as const;\n\nconst menuItemDescriptionColor = {\n default: 'interactive.text.gray.muted',\n disabled: 'interactive.text.gray.disabled',\n} as const;\n\n// This is the height of item excluding the description to make sure description comes at the bottom and other first row items are center aligned\nconst itemFirstRowHeight = makeSize(size[20]);\n\nconst _BaseMenuItem: React.ForwardRefRenderFunction<BladeElementRef, BaseMenuItemProps> = (\n {\n title,\n description,\n as,\n leading,\n trailing,\n titleSuffix,\n isDisabled,\n selectionType = 'single',\n isSelected,\n isVisible = true,\n color,\n role = 'menuitem',\n children,\n ...props\n },\n ref,\n): React.ReactElement => {\n const { containerRef, textRef } = useTruncationTitle({ content: title });\n return (\n <BaseMenuItemContext.Provider value={{ color, isDisabled }}>\n <StyledMenuItemContainer\n ref={ref as never}\n as={as}\n type=\"button\"\n disabled={isDisabled}\n {...makeAccessible({\n role,\n current: role === 'menuitem' || role === 'menuitemcheckbox' ? isSelected : undefined,\n disabled: isDisabled,\n selected: isSelected,\n })}\n color={color}\n isVisible={isVisible}\n isSelected={isSelected}\n isDisabled={isDisabled}\n selectionType={selectionType}\n {...props}\n >\n {children ? (\n children\n ) : (\n <Box display=\"flex\" alignItems=\"flex-start\" width=\"100%\" justifyContent=\"center\">\n <Box\n display=\"flex\"\n justifyContent=\"center\"\n alignItems=\"center\"\n height={itemFirstRowHeight}\n >\n {leading}\n </Box>\n <Box\n paddingLeft={leading ? 'spacing.3' : 'spacing.0'}\n paddingRight=\"spacing.3\"\n display=\"flex\"\n flexDirection=\"column\"\n >\n <Box\n display=\"flex\"\n alignItems=\"center\"\n flexDirection=\"row\"\n height={itemFirstRowHeight}\n ref={containerRef as never}\n >\n <BaseText\n as=\"p\"\n ref={textRef as never}\n truncateAfterLines={1}\n wordBreak=\"break-all\"\n {...getTextProps({\n size: 'medium',\n color:\n menuItemTitleColor[color === 'negative' ? 'negative' : 'normal'][\n isDisabled ? 'disabled' : 'default'\n ],\n weight: 'regular',\n })}\n >\n {title}\n </BaseText>\n {titleSuffix}\n </Box>\n <Box>\n {description ? (\n <Text\n color={menuItemDescriptionColor[isDisabled ? 'disabled' : 'default']}\n size=\"small\"\n >\n {description}\n </Text>\n ) : null}\n </Box>\n </Box>\n <Box marginLeft=\"auto\">{trailing}</Box>\n </Box>\n )}\n </StyledMenuItemContainer>\n </BaseMenuItemContext.Provider>\n );\n};\n\nconst BaseMenuItem = React.forwardRef(_BaseMenuItem);\n\nexport { BaseMenuItem };\n"],"names":["menuItemTitleColor","negative","default","disabled","normal","menuItemDescriptionColor","itemFirstRowHeight","makeSize","size","_BaseMenuItem","_ref","ref","title","description","as","leading","trailing","titleSuffix","isDisabled","_ref$selectionType","selectionType","isSelected","_ref$isVisible","isVisible","color","_ref$role","role","children","props","_objectWithoutProperties","_excluded","_useTruncationTitle","useTruncationTitle","content","containerRef","textRef","_jsx","BaseMenuItemContext","Provider","value","StyledMenuItemContainer","Object","assign","type","makeAccessible","current","undefined","selected","_jsxs","Box","display","alignItems","width","justifyContent","height","paddingLeft","paddingRight","flexDirection","BaseText","truncateAfterLines","wordBreak","getTextProps","weight","Text","marginLeft","BaseMenuItem","React","forwardRef"],"mappings":"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"}
|
|
@@ -24,8 +24,9 @@ import { Text } from '../Typography/Text/Text.js';
|
|
|
24
24
|
import '../Typography/Code/Code.js';
|
|
25
25
|
import { getStringFromReactText } from '../../utils/getStringChildren/getStringChildren.js';
|
|
26
26
|
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js';
|
|
27
|
+
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
|
|
27
28
|
|
|
28
|
-
var _excluded=["accessibilityLabel","children","size","color","emphasis","testID"];var
|
|
29
|
+
var _excluded=["accessibilityLabel","children","size","color","emphasis","testID"];var _Indicator=function _Indicator(_ref){var accessibilityLabel=_ref.accessibilityLabel,children=_ref.children,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$color=_ref.color,color=_ref$color===void 0?'neutral':_ref$color,_ref$emphasis=_ref.emphasis,emphasis=_ref$emphasis===void 0?'subtle':_ref$emphasis,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var childrenString=getStringFromReactText(children);var isIntense=emphasis==='intense';var isPrimary=color==='primary';var fillColorOuter=isPrimary?theme.colors.surface.background.primary.subtle:theme.colors.feedback.background[color].subtle;var fillColorInner=isPrimary?theme.colors.surface.icon.primary.normal:theme.colors.feedback.icon[color].intense;var isWeb=!isReactNative();var a11yProps=makeAccessible(Object.assign({label:accessibilityLabel!=null?accessibilityLabel:childrenString},isWeb&&{role:'status'}));var svgSize=isIntense?indicatorDotSizes[emphasis][size].outer:indicatorDotSizes[emphasis][size].inner;return jsx(BaseBox,Object.assign({display:isWeb?'inline-flex':'flex'},a11yProps,metaAttribute({name:MetaConstants.Indicator,testID:testID}),getStyledProps(styledProps),{children:jsxs(BaseBox,{display:"flex",flexDirection:"row",alignItems:"center",children:[jsx(Svg,{width:String(svgSize),height:String(svgSize),viewBox:"0 0 10 10",fill:"none",children:isIntense?jsxs(Fragment,{children:[jsx(Circle,{cx:"5",cy:"5",r:"5",fill:fillColorOuter}),jsx(Circle,{cx:"5",cy:"5",r:"2.5",fill:fillColorInner})]}):jsx(Circle,{cx:"5",cy:"5",r:"5",fill:fillColorInner})}),jsx(BaseBox,{marginLeft:childrenString?'spacing.2':'spacing.0',children:jsx(Text,{weight:"medium",color:"surface.text.gray.subtle",textAlign:"left",size:textSizeMapping[size],children:children})})]})}));};var Indicator=assignWithoutSideEffects(_Indicator,{componentId:'Indicator'});
|
|
29
30
|
|
|
30
31
|
export { Indicator };
|
|
31
32
|
//# sourceMappingURL=Indicator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Indicator.js","sources":["../../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { indicatorDotSizes, textSizeMapping } from './indicatorTokens';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport Svg from '~components/Icons/_Svg';\nimport Circle from '~components/Icons/_Svg/Circle';\nimport { Text } from '~components/Typography';\nimport { getStringFromReactText } from '~src/utils/getStringChildren';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype
|
|
1
|
+
{"version":3,"file":"Indicator.js","sources":["../../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { indicatorDotSizes, textSizeMapping } from './indicatorTokens';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport Svg from '~components/Icons/_Svg';\nimport Circle from '~components/Icons/_Svg/Circle';\nimport { Text } from '~components/Typography';\nimport { getStringFromReactText } from '~src/utils/getStringChildren';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\ntype IndicatorProps = {\n /**\n * Sets the color tone\n *\n * @default neutral\n */\n color?: FeedbackColors | 'primary';\n\n /**\n * Sets the emphasis of the indicator\n *\n * If set to intense it will show a background circle\n *\n * @default subtle\n */\n emphasis?: 'subtle' | 'intense';\n\n /**\n * Size of the indicator\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n /**\n * A text label to show alongside the indicator dot\n */\n children?: StringChildrenType;\n /**\n * a11y label for screen readers\n */\n accessibilityLabel?: string;\n} & TestID &\n StyledPropsBlade;\n\nconst _Indicator = ({\n accessibilityLabel,\n children,\n size = 'medium',\n color = 'neutral',\n emphasis = 'subtle',\n testID,\n ...styledProps\n}: IndicatorProps): ReactElement => {\n const { theme } = useTheme();\n const childrenString = getStringFromReactText(children);\n const isIntense = emphasis === 'intense';\n const isPrimary = color === 'primary';\n\n const fillColorOuter = isPrimary\n ? theme.colors.surface.background.primary.subtle\n : theme.colors.feedback.background[color].subtle;\n const fillColorInner = isPrimary\n ? theme.colors.surface.icon.primary.normal\n : theme.colors.feedback.icon[color].intense;\n\n const isWeb = !isReactNative();\n const a11yProps = makeAccessible({\n label: accessibilityLabel ?? childrenString,\n ...(isWeb && { role: 'status' }),\n });\n\n const svgSize = isIntense\n ? indicatorDotSizes[emphasis][size].outer\n : indicatorDotSizes[emphasis][size].inner;\n\n return (\n <BaseBox\n display={(isWeb ? 'inline-flex' : 'flex') as never}\n {...a11yProps}\n {...metaAttribute({ name: MetaConstants.Indicator, testID })}\n {...getStyledProps(styledProps)}\n >\n <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n <Svg width={String(svgSize)} height={String(svgSize)} viewBox=\"0 0 10 10\" fill=\"none\">\n {isIntense ? (\n <>\n <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColorOuter} />\n <Circle cx=\"5\" cy=\"5\" r=\"2.5\" fill={fillColorInner} />\n </>\n ) : (\n <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColorInner} />\n )}\n </Svg>\n <BaseBox marginLeft={childrenString ? 'spacing.2' : 'spacing.0'}>\n <Text\n weight=\"medium\"\n color=\"surface.text.gray.subtle\"\n textAlign=\"left\"\n size={textSizeMapping[size]}\n >\n {children}\n </Text>\n </BaseBox>\n </BaseBox>\n </BaseBox>\n );\n};\n\nconst Indicator = assignWithoutSideEffects(_Indicator, {\n componentId: 'Indicator',\n});\n\nexport type { IndicatorProps };\nexport { Indicator };\n"],"names":["_Indicator","_ref","accessibilityLabel","children","_ref$size","size","_ref$color","color","_ref$emphasis","emphasis","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","childrenString","getStringFromReactText","isIntense","isPrimary","fillColorOuter","colors","surface","background","primary","subtle","feedback","fillColorInner","icon","normal","intense","isWeb","isReactNative","a11yProps","makeAccessible","Object","assign","label","role","svgSize","indicatorDotSizes","outer","inner","_jsx","BaseBox","display","metaAttribute","name","MetaConstants","Indicator","getStyledProps","_jsxs","flexDirection","alignItems","Svg","width","String","height","viewBox","fill","_Fragment","Circle","cx","cy","r","marginLeft","Text","weight","textAlign","textSizeMapping","assignWithoutSideEffects","componentId"],"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",
|
|
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`})});};
|
|
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
|
|
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 = ({ icon: Icon, color = 'neutral' }: 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 color === 'primary' ? 'surface.icon.primary.normal' : `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","_useStepGroup2","iconSizeTokens"],"mappings":";;;;;;;;;;;AAgBA,IAAMA,sBAAsB,CAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,CAK2B,CAAA,IAJrDC,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,CAAA,CACNC,eAAe,CACbN,KAAK,GAAK,SAAS,CACf,mCAAmC,CAClC,CAAsBA,oBAAAA,EAAAA,KAAM,SAClC,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,CAAA,IAApEd,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,EACrBE,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,EACRC,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,EAOM,IAAAyB,YAAY,CAAG,SAAfA,YAAYA,CAAAC,KAAA,CAAiF,CAAA,IAArEC,IAAI,CAAAD,KAAA,CAAVE,IAAI,CAAAC,WAAA,CAAAH,KAAA,CAAQ1B,KAAK,CAALA,KAAK,CAAA6B,WAAA,GAAG,KAAA,CAAA,CAAA,SAAS,CAAAA,WAAA,CACnD,IAAAC,cAAA,CAAiBd,YAAY,EAAE,CAAvBf,IAAI,CAAA6B,cAAA,CAAJ7B,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,CAACuB,IAAI,CAAA,CACH1B,IAAI,CAAE8B,cAAc,CAAC9B,IAAI,CAAE,CAC3BD,KAAK,CACHA,KAAK,GAAK,SAAS,CAAG,6BAA6B,CAAI,CAAA,cAAA,EAAgBA,KAAM,CAC9E,QAAA,CAAA,CACF,CAAC,CACoB,CAAC,CAE7B;;;;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
2
|
+
import React__default from 'react';
|
|
2
3
|
import styled from 'styled-components/native';
|
|
3
4
|
import getBaseTextStyles from './getBaseTextStyles.js';
|
|
4
5
|
import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.native.js';
|
|
@@ -8,7 +9,7 @@ import { useStyledProps } from '../../Box/styledProps/useStyledProps.js';
|
|
|
8
9
|
import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.native.js';
|
|
9
10
|
import { jsx } from 'react/jsx-runtime';
|
|
10
11
|
|
|
11
|
-
var _excluded=["color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","numberOfLines","lineHeight","letterSpacing","textAlign","as","opacity"],_excluded2=["id","color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","lineHeight","textAlign","children","truncateAfterLines","opacity","className","style","accessibilityProps","componentName","testID"];var StyledBaseText=styled.Text(function(_ref){var color=_ref.color,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize,fontWeight=_ref.fontWeight,fontStyle=_ref.fontStyle,textDecorationLine=_ref.textDecorationLine,numberOfLines=_ref.numberOfLines,lineHeight=_ref.lineHeight,letterSpacing=_ref.letterSpacing,textAlign=_ref.textAlign;_ref.as;var opacity=_ref.opacity,props=_objectWithoutProperties(_ref,_excluded);var styledPropsCSSObject=useStyledProps(props);return Object.assign({},getBaseTextStyles({color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,numberOfLines:numberOfLines,lineHeight:lineHeight,letterSpacing:letterSpacing,textAlign:textAlign,opacity:opacity,theme:props.theme}),styledPropsCSSObject);});var
|
|
12
|
+
var _excluded=["color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","numberOfLines","lineHeight","letterSpacing","textAlign","as","opacity"],_excluded2=["id","color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","lineHeight","textAlign","children","truncateAfterLines","opacity","className","style","accessibilityProps","componentName","testID"];var StyledBaseText=styled.Text(function(_ref){var color=_ref.color,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize,fontWeight=_ref.fontWeight,fontStyle=_ref.fontStyle,textDecorationLine=_ref.textDecorationLine,numberOfLines=_ref.numberOfLines,lineHeight=_ref.lineHeight,letterSpacing=_ref.letterSpacing,textAlign=_ref.textAlign;_ref.as;var opacity=_ref.opacity,props=_objectWithoutProperties(_ref,_excluded);var styledPropsCSSObject=useStyledProps(props);return Object.assign({},getBaseTextStyles({color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,numberOfLines:numberOfLines,lineHeight:lineHeight,letterSpacing:letterSpacing,textAlign:textAlign,opacity:opacity,theme:props.theme}),styledPropsCSSObject);});var _BaseText=function _BaseText(_ref2,ref){var id=_ref2.id,color=_ref2.color,fontFamily=_ref2.fontFamily,fontSize=_ref2.fontSize,fontWeight=_ref2.fontWeight,fontStyle=_ref2.fontStyle,textDecorationLine=_ref2.textDecorationLine,lineHeight=_ref2.lineHeight,textAlign=_ref2.textAlign,children=_ref2.children,truncateAfterLines=_ref2.truncateAfterLines,opacity=_ref2.opacity,className=_ref2.className,style=_ref2.style,_ref2$accessibilityPr=_ref2.accessibilityProps,accessibilityProps=_ref2$accessibilityPr===void 0?{}:_ref2$accessibilityPr,_ref2$componentName=_ref2.componentName,componentName=_ref2$componentName===void 0?MetaConstants.BaseText:_ref2$componentName,testID=_ref2.testID,styledProps=_objectWithoutProperties(_ref2,_excluded2);return jsx(StyledBaseText,Object.assign({ref:ref},getStyledProps(styledProps),{color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,as:undefined,textAlign:textAlign,numberOfLines:truncateAfterLines,opacity:opacity,className:className,style:style,id:id},makeAccessible(accessibilityProps),metaAttribute({name:componentName,testID:testID}),{children:children}));};var BaseText=React__default.forwardRef(_BaseText);
|
|
12
13
|
|
|
13
14
|
export { BaseText };
|
|
14
15
|
//# sourceMappingURL=BaseText.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseText.native.js","sources":["../../../../../../src/components/Typography/BaseText/BaseText.native.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport styled from 'styled-components/native';\nimport getBaseTextStyles from './getBaseTextStyles';\nimport type { BaseTextProps, StyledBaseTextProps } from './types';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps, useStyledProps } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\n\nconst StyledBaseText = styled.Text<StyledBaseTextProps>(\n ({\n color,\n fontFamily,\n fontSize,\n fontWeight,\n fontStyle,\n textDecorationLine,\n numberOfLines,\n lineHeight,\n letterSpacing,\n textAlign,\n as,\n opacity,\n ...props\n }) => {\n const styledPropsCSSObject = useStyledProps(props);\n\n return {\n ...getBaseTextStyles({\n color,\n fontFamily,\n fontSize,\n fontWeight,\n fontStyle,\n textDecorationLine,\n numberOfLines,\n lineHeight,\n letterSpacing,\n textAlign,\n opacity,\n theme: props.theme,\n }),\n ...styledPropsCSSObject,\n };\n },\n);\n\
|
|
1
|
+
{"version":3,"file":"BaseText.native.js","sources":["../../../../../../src/components/Typography/BaseText/BaseText.native.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactElement } from 'react';\nimport styled from 'styled-components/native';\nimport getBaseTextStyles from './getBaseTextStyles';\nimport type { BaseTextProps, StyledBaseTextProps } from './types';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps, useStyledProps } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport type { BladeElementRef } from '~utils/types';\n\nconst StyledBaseText = styled.Text<StyledBaseTextProps>(\n ({\n color,\n fontFamily,\n fontSize,\n fontWeight,\n fontStyle,\n textDecorationLine,\n numberOfLines,\n lineHeight,\n letterSpacing,\n textAlign,\n as,\n opacity,\n ...props\n }) => {\n const styledPropsCSSObject = useStyledProps(props);\n\n return {\n ...getBaseTextStyles({\n color,\n fontFamily,\n fontSize,\n fontWeight,\n fontStyle,\n textDecorationLine,\n numberOfLines,\n lineHeight,\n letterSpacing,\n textAlign,\n opacity,\n theme: props.theme,\n }),\n ...styledPropsCSSObject,\n };\n },\n);\n\nconst _BaseText: React.ForwardRefRenderFunction<BladeElementRef, BaseTextProps> = (\n {\n id,\n color,\n fontFamily,\n fontSize,\n fontWeight,\n fontStyle,\n textDecorationLine,\n lineHeight,\n textAlign,\n children,\n truncateAfterLines,\n opacity,\n className,\n style,\n accessibilityProps = {},\n componentName = MetaConstants.BaseText,\n testID,\n ...styledProps\n },\n ref,\n): ReactElement => {\n return (\n <StyledBaseText\n ref={ref}\n {...getStyledProps(styledProps)}\n color={color}\n fontFamily={fontFamily}\n fontSize={fontSize}\n fontWeight={fontWeight}\n fontStyle={fontStyle}\n textDecorationLine={textDecorationLine}\n lineHeight={lineHeight}\n as={undefined}\n textAlign={textAlign}\n numberOfLines={truncateAfterLines}\n opacity={opacity}\n className={className}\n style={style}\n id={id}\n {...makeAccessible(accessibilityProps)}\n {...metaAttribute({ name: componentName, testID })}\n >\n {children}\n </StyledBaseText>\n );\n};\n\nconst BaseText = React.forwardRef(_BaseText);\n\nexport { BaseText };\n"],"names":["StyledBaseText","styled","Text","_ref","color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","numberOfLines","lineHeight","letterSpacing","textAlign","as","opacity","props","_objectWithoutProperties","_excluded","styledPropsCSSObject","useStyledProps","Object","assign","getBaseTextStyles","theme","_BaseText","_ref2","ref","id","children","truncateAfterLines","className","style","_ref2$accessibilityPr","accessibilityProps","_ref2$componentName","componentName","MetaConstants","BaseText","testID","styledProps","_excluded2","_jsx","getStyledProps","undefined","makeAccessible","metaAttribute","name","React","forwardRef"],"mappings":"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"}
|
|
@@ -9,6 +9,7 @@ export { Alert } from './Alert/Alert.js';
|
|
|
9
9
|
export { Amount } from './Amount/Amount.js';
|
|
10
10
|
export { Avatar } from './Avatar/Avatar.native.js';
|
|
11
11
|
export { AvatarGroup } from './Avatar/AvatarGroup.native.js';
|
|
12
|
+
export { TrustedBadgeIcon } from './Avatar/TrustedBadgeIcon.native.js';
|
|
12
13
|
export { Badge } from './Badge/Badge.js';
|
|
13
14
|
export { BladeProvider } from './BladeProvider/BladeProvider.native.js';
|
|
14
15
|
export { default as useTheme } from './BladeProvider/useTheme.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTruncationTitle.native.js","sources":["../../../../../src/utils/useTruncationTitle/useTruncationTitle.native.tsx"],"sourcesContent":["const useTruncationTitle = ({\n content: _,\n}: {\n content?: string;\n}): {\n containerRef: { current: null };\n textRef: { current: null };\n} => {\n return {\n containerRef: { current: null },\n textRef: { current: null },\n };\n};\n\nexport { useTruncationTitle };\n"],"names":["useTruncationTitle","_ref","content","containerRef","current","textRef"],"mappings":"AAAM,IAAAA,kBAAkB,CAAG,SAArBA,kBAAkBA,CAAAC,IAAA,CAOnB,CANOA,IAAA,CAAVC,QAOA,OAAO,CACLC,YAAY,CAAE,CAAEC,OAAO,CAAE,IAAK,CAAC,CAC/BC,OAAO,CAAE,CAAED,OAAO,CAAE,IAAK,CAC3B,CAAC,CACH;;;;"}
|
|
@@ -4,20 +4,25 @@ import React__default from 'react';
|
|
|
4
4
|
import { StyledAvatar } from './StyledAvatar.js';
|
|
5
5
|
import { useAvatarGroupContext } from './AvatarGroupContext.js';
|
|
6
6
|
import { AvatarButton } from './AvatarButton.js';
|
|
7
|
+
import { avatarTopAddonOffsets, avatarToIndicatorSize, avatarToBottomAddonSize } from './avatarTokens.js';
|
|
7
8
|
import '../Box/styledProps/index.js';
|
|
8
9
|
import '../../utils/metaAttribute/index.js';
|
|
9
10
|
import '../../utils/assignWithoutSideEffects/index.js';
|
|
10
11
|
import '../../utils/logger/index.js';
|
|
11
12
|
import '../Icons/index.js';
|
|
12
|
-
import
|
|
13
|
+
import '../Box/BaseBox/index.js';
|
|
14
|
+
import '../../utils/isValidAllowedChildren/index.js';
|
|
15
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
13
16
|
import { throwBladeError } from '../../utils/logger/logger.js';
|
|
17
|
+
import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
|
|
14
18
|
import UserIcon from '../Icons/UserIcon/UserIcon.js';
|
|
15
19
|
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
|
|
16
20
|
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
|
|
17
21
|
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
|
|
22
|
+
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
|
|
18
23
|
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
|
|
19
24
|
|
|
20
|
-
var _excluded = ["name", "color", "size", "variant", "icon", "href", "target", "rel", "src", "alt", "srcSet", "crossOrigin", "referrerPolicy", "testID", "onBlur", "onFocus", "onClick", "onMouseLeave", "onMouseMove", "onMouseDown", "onPointerDown", "onPointerEnter", "onTouchStart", "onTouchEnd"];
|
|
25
|
+
var _excluded = ["name", "color", "size", "variant", "icon", "href", "target", "rel", "isSelected", "bottomAddon", "topAddon", "src", "alt", "srcSet", "crossOrigin", "referrerPolicy", "testID", "onBlur", "onFocus", "onClick", "onMouseLeave", "onMouseMove", "onMouseDown", "onPointerDown", "onPointerEnter", "onTouchStart", "onTouchEnd"];
|
|
21
26
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
22
27
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
23
28
|
var getInitials = function getInitials(name) {
|
|
@@ -41,6 +46,9 @@ var _Avatar = function _Avatar(_ref, ref) {
|
|
|
41
46
|
href = _ref.href,
|
|
42
47
|
target = _ref.target,
|
|
43
48
|
rel = _ref.rel,
|
|
49
|
+
isSelected = _ref.isSelected,
|
|
50
|
+
BottomAddon = _ref.bottomAddon,
|
|
51
|
+
topAddon = _ref.topAddon,
|
|
44
52
|
src = _ref.src,
|
|
45
53
|
alt = _ref.alt,
|
|
46
54
|
srcSet = _ref.srcSet,
|
|
@@ -65,9 +73,16 @@ var _Avatar = function _Avatar(_ref, ref) {
|
|
|
65
73
|
message: '"alt" or "name" prop is required when the "src" prop is provided.'
|
|
66
74
|
});
|
|
67
75
|
}
|
|
76
|
+
if (topAddon && getComponentId(topAddon) !== 'Indicator') {
|
|
77
|
+
throwBladeError({
|
|
78
|
+
moduleName: 'Avatar',
|
|
79
|
+
message: 'TopAddon only accepts `Indicator` component.'
|
|
80
|
+
});
|
|
81
|
+
}
|
|
68
82
|
}
|
|
69
83
|
var groupProps = useAvatarGroupContext();
|
|
70
84
|
var avatarSize = (_groupProps$size = groupProps === null || groupProps === void 0 ? void 0 : groupProps.size) !== null && _groupProps$size !== void 0 ? _groupProps$size : size;
|
|
85
|
+
var isInteractive = Boolean(onClick || href);
|
|
71
86
|
var commonButtonProps = {
|
|
72
87
|
variant: variant,
|
|
73
88
|
color: color,
|
|
@@ -77,6 +92,7 @@ var _Avatar = function _Avatar(_ref, ref) {
|
|
|
77
92
|
rel: rel,
|
|
78
93
|
onBlur: onBlur,
|
|
79
94
|
onFocus: onFocus,
|
|
95
|
+
isSelected: isSelected,
|
|
80
96
|
onClick: onClick,
|
|
81
97
|
onMouseLeave: onMouseLeave,
|
|
82
98
|
onMouseMove: onMouseMove,
|
|
@@ -110,6 +126,7 @@ var _Avatar = function _Avatar(_ref, ref) {
|
|
|
110
126
|
icon: icon !== null && icon !== void 0 ? icon : UserIcon
|
|
111
127
|
}));
|
|
112
128
|
};
|
|
129
|
+
var isSquare = variant === 'square';
|
|
113
130
|
return /*#__PURE__*/jsx(StyledAvatar, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
|
|
114
131
|
name: MetaConstants.Avatar,
|
|
115
132
|
testID: testID
|
|
@@ -117,7 +134,29 @@ var _Avatar = function _Avatar(_ref, ref) {
|
|
|
117
134
|
backgroundColor: "surface.background.gray.intense",
|
|
118
135
|
variant: variant,
|
|
119
136
|
size: avatarSize,
|
|
120
|
-
|
|
137
|
+
isInteractive: isInteractive,
|
|
138
|
+
children: /*#__PURE__*/jsxs(BaseBox, {
|
|
139
|
+
width: "100%",
|
|
140
|
+
height: "100%",
|
|
141
|
+
position: "relative",
|
|
142
|
+
children: [topAddon ? /*#__PURE__*/jsx(BaseBox, {
|
|
143
|
+
position: "absolute",
|
|
144
|
+
top: avatarTopAddonOffsets[variant][size].top,
|
|
145
|
+
right: avatarTopAddonOffsets[variant][size].right,
|
|
146
|
+
children: /*#__PURE__*/React__default.cloneElement(topAddon, {
|
|
147
|
+
size: avatarToIndicatorSize[size],
|
|
148
|
+
display: 'block'
|
|
149
|
+
})
|
|
150
|
+
}) : null, getChildrenToRender(), BottomAddon ? /*#__PURE__*/jsx(BaseBox, {
|
|
151
|
+
position: "absolute",
|
|
152
|
+
bottom: isSquare ? '-10%' : '0%',
|
|
153
|
+
right: isSquare ? '-10%' : '0%',
|
|
154
|
+
children: /*#__PURE__*/jsx(BottomAddon, {
|
|
155
|
+
display: "block",
|
|
156
|
+
size: avatarToBottomAddonSize[size]
|
|
157
|
+
})
|
|
158
|
+
}) : null]
|
|
159
|
+
})
|
|
121
160
|
}));
|
|
122
161
|
};
|
|
123
162
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.web.js","sources":["../../../../../../src/components/Avatar/Avatar.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React from 'react';\nimport type { AvatarProps } from './types';\nimport { StyledAvatar } from './StyledAvatar';\nimport { useAvatarGroupContext } from './AvatarGroupContext';\nimport { AvatarButton } from './AvatarButton';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { UserIcon } from '~components/Icons';\nimport type { BladeElementRef } from '~utils/types';\n\nconst getInitials = (name: string): string => {\n // Combine first and last name initials\n const names = name.trim().toUpperCase().split(' ');\n\n if (names.length === 1) {\n return names[0].substring(0, 2);\n }\n return names[0][0] + names[names.length - 1][0];\n};\n\nconst _Avatar: React.ForwardRefRenderFunction<BladeElementRef, AvatarProps> = (\n {\n name,\n color = 'neutral',\n size = 'medium',\n variant = 'circle',\n icon,\n href,\n target,\n rel,\n // Image Props\n src,\n alt,\n srcSet,\n crossOrigin,\n referrerPolicy,\n testID,\n // interaction props\n onBlur,\n onFocus,\n onClick,\n onMouseLeave,\n onMouseMove,\n onMouseDown,\n onPointerDown,\n onPointerEnter,\n onTouchStart,\n onTouchEnd,\n ...styledProps\n },\n ref,\n): ReactElement => {\n if (__DEV__) {\n if (src && !alt && !name) {\n throwBladeError({\n moduleName: 'Avatar',\n message: '\"alt\" or \"name\" prop is required when the \"src\" prop is provided.',\n });\n }\n }\n\n const groupProps = useAvatarGroupContext();\n const avatarSize = groupProps?.size ?? size;\n\n const commonButtonProps = {\n variant,\n color,\n size: avatarSize,\n href,\n target,\n rel,\n onBlur,\n onFocus,\n onClick,\n onMouseLeave,\n onMouseMove,\n onMouseDown,\n onPointerDown,\n onPointerEnter,\n onTouchStart,\n onTouchEnd,\n };\n\n const getChildrenToRender = (): React.ReactElement => {\n if (src) {\n return (\n <AvatarButton\n {...commonButtonProps}\n ref={ref as never}\n imgProps={{\n src,\n alt: alt ?? name,\n srcSet,\n crossOrigin,\n referrerPolicy,\n }}\n />\n );\n }\n\n if (name && !src) {\n return (\n <AvatarButton ref={ref as never} {...commonButtonProps}>\n {getInitials(name)}\n </AvatarButton>\n );\n }\n\n return <AvatarButton {...commonButtonProps} icon={icon ?? UserIcon} />;\n };\n\n return (\n <StyledAvatar\n {...metaAttribute({ name: MetaConstants.Avatar, testID })}\n {...getStyledProps(styledProps)}\n backgroundColor=\"surface.background.gray.intense\"\n variant={variant}\n size={avatarSize}\n >\n {getChildrenToRender()}\n </StyledAvatar>\n );\n};\n\n/**\n * ### Avatar Component\n * \n * An avatar component is a standardized visual representation of a user or entity.\n * \n * ---\n * \n * #### Usage\n * \n * ```jsx\n <Avatar name=\"Nitin Kumar\" src=\"https://avatars.githubusercontent.com/u/46647141?v=4\" /> \n * ```\n *\n * ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-avatar-avatar Avatar Documentation}\n * \n */\nconst Avatar = assignWithoutSideEffects(React.forwardRef(_Avatar), {\n displayName: 'Avatar',\n componentId: 'Avatar',\n});\n\nexport { Avatar };\nexport type { AvatarProps };\n"],"names":["getInitials","name","names","trim","toUpperCase","split","length","substring","_Avatar","_ref","ref","_groupProps$size","_ref$color","color","_ref$size","size","_ref$variant","variant","icon","href","target","rel","src","alt","srcSet","crossOrigin","referrerPolicy","testID","onBlur","onFocus","onClick","onMouseLeave","onMouseMove","onMouseDown","onPointerDown","onPointerEnter","onTouchStart","onTouchEnd","styledProps","_objectWithoutProperties","_excluded","throwBladeError","moduleName","message","groupProps","useAvatarGroupContext","avatarSize","commonButtonProps","getChildrenToRender","_jsx","AvatarButton","_objectSpread","imgProps","children","UserIcon","StyledAvatar","metaAttribute","MetaConstants","Avatar","getStyledProps","backgroundColor","assignWithoutSideEffects","React","forwardRef","displayName","componentId"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Avatar.web.js","sources":["../../../../../../src/components/Avatar/Avatar.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { AvatarProps } from './types';\nimport { StyledAvatar } from './StyledAvatar';\nimport { useAvatarGroupContext } from './AvatarGroupContext';\nimport { AvatarButton } from './AvatarButton';\nimport {\n avatarToBottomAddonSize,\n avatarToIndicatorSize,\n avatarTopAddonOffsets,\n} from './avatarTokens';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { UserIcon } from '~components/Icons';\nimport type { BladeElementRef } from '~utils/types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\n\nconst getInitials = (name: string): string => {\n // Combine first and last name initials\n const names = name.trim().toUpperCase().split(' ');\n\n if (names.length === 1) {\n return names[0].substring(0, 2);\n }\n return names[0][0] + names[names.length - 1][0];\n};\n\nconst _Avatar: React.ForwardRefRenderFunction<BladeElementRef, AvatarProps> = (\n {\n name,\n color = 'neutral',\n size = 'medium',\n variant = 'circle',\n icon,\n href,\n target,\n rel,\n isSelected,\n bottomAddon: BottomAddon,\n topAddon,\n // Image Props\n src,\n alt,\n srcSet,\n crossOrigin,\n referrerPolicy,\n testID,\n // interaction props\n onBlur,\n onFocus,\n onClick,\n onMouseLeave,\n onMouseMove,\n onMouseDown,\n onPointerDown,\n onPointerEnter,\n onTouchStart,\n onTouchEnd,\n ...styledProps\n },\n ref,\n) => {\n if (__DEV__) {\n if (src && !alt && !name) {\n throwBladeError({\n moduleName: 'Avatar',\n message: '\"alt\" or \"name\" prop is required when the \"src\" prop is provided.',\n });\n }\n if (topAddon && getComponentId(topAddon) !== 'Indicator') {\n throwBladeError({\n moduleName: 'Avatar',\n message: 'TopAddon only accepts `Indicator` component.',\n });\n }\n }\n\n const groupProps = useAvatarGroupContext();\n const avatarSize = groupProps?.size ?? size;\n const isInteractive = Boolean(onClick || href);\n\n const commonButtonProps = {\n variant,\n color,\n size: avatarSize,\n href,\n target,\n rel,\n onBlur,\n onFocus,\n isSelected,\n onClick,\n onMouseLeave,\n onMouseMove,\n onMouseDown,\n onPointerDown,\n onPointerEnter,\n onTouchStart,\n onTouchEnd,\n };\n\n const getChildrenToRender = (): React.ReactElement => {\n if (src) {\n return (\n <AvatarButton\n {...commonButtonProps}\n ref={ref as never}\n imgProps={{\n src,\n alt: alt ?? name,\n srcSet,\n crossOrigin,\n referrerPolicy,\n }}\n />\n );\n }\n\n if (name && !src) {\n return (\n <AvatarButton ref={ref as never} {...commonButtonProps}>\n {getInitials(name)}\n </AvatarButton>\n );\n }\n\n return <AvatarButton {...commonButtonProps} icon={icon ?? UserIcon} />;\n };\n\n const isSquare = variant === 'square';\n return (\n <StyledAvatar\n {...metaAttribute({ name: MetaConstants.Avatar, testID })}\n {...getStyledProps(styledProps)}\n backgroundColor=\"surface.background.gray.intense\"\n variant={variant}\n size={avatarSize}\n isInteractive={isInteractive}\n >\n <BaseBox width=\"100%\" height=\"100%\" position=\"relative\">\n {topAddon ? (\n <BaseBox\n position=\"absolute\"\n top={avatarTopAddonOffsets[variant][size].top}\n right={avatarTopAddonOffsets[variant][size].right}\n >\n {React.cloneElement(topAddon, { size: avatarToIndicatorSize[size], display: 'block' })}\n </BaseBox>\n ) : null}\n {getChildrenToRender()}\n {BottomAddon ? (\n <BaseBox\n position=\"absolute\"\n bottom={isSquare ? '-10%' : '0%'}\n right={isSquare ? '-10%' : '0%'}\n >\n <BottomAddon display=\"block\" size={avatarToBottomAddonSize[size]} />\n </BaseBox>\n ) : null}\n </BaseBox>\n </StyledAvatar>\n );\n};\n\n/**\n * ### Avatar Component\n * \n * An avatar component is a standardized visual representation of a user or entity.\n * \n * ---\n * \n * #### Usage\n * \n * ```jsx\n <Avatar name=\"Nitin Kumar\" src=\"https://avatars.githubusercontent.com/u/46647141?v=4\" /> \n * ```\n *\n * ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-avatar-avatar Avatar Documentation}\n * \n */\nconst Avatar = assignWithoutSideEffects(React.forwardRef(_Avatar), {\n displayName: 'Avatar',\n componentId: 'Avatar',\n});\n\nexport { Avatar };\nexport type { AvatarProps };\n"],"names":["getInitials","name","names","trim","toUpperCase","split","length","substring","_Avatar","_ref","ref","_groupProps$size","_ref$color","color","_ref$size","size","_ref$variant","variant","icon","href","target","rel","isSelected","BottomAddon","bottomAddon","topAddon","src","alt","srcSet","crossOrigin","referrerPolicy","testID","onBlur","onFocus","onClick","onMouseLeave","onMouseMove","onMouseDown","onPointerDown","onPointerEnter","onTouchStart","onTouchEnd","styledProps","_objectWithoutProperties","_excluded","throwBladeError","moduleName","message","getComponentId","groupProps","useAvatarGroupContext","avatarSize","isInteractive","Boolean","commonButtonProps","getChildrenToRender","_jsx","AvatarButton","_objectSpread","imgProps","children","UserIcon","isSquare","StyledAvatar","metaAttribute","MetaConstants","Avatar","getStyledProps","backgroundColor","_jsxs","BaseBox","width","height","position","top","avatarTopAddonOffsets","right","React","cloneElement","avatarToIndicatorSize","display","bottom","avatarToBottomAddonSize","assignWithoutSideEffects","forwardRef","displayName","componentId"],"mappings":"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"}
|
|
@@ -36,8 +36,11 @@ var _AvatarButton = function _AvatarButton(_ref, ref) {
|
|
|
36
36
|
onPointerDown = _ref.onPointerDown,
|
|
37
37
|
onPointerEnter = _ref.onPointerEnter,
|
|
38
38
|
onTouchStart = _ref.onTouchStart,
|
|
39
|
-
onTouchEnd = _ref.onTouchEnd
|
|
39
|
+
onTouchEnd = _ref.onTouchEnd,
|
|
40
|
+
isSelected = _ref.isSelected;
|
|
40
41
|
var isLink = Boolean(href);
|
|
42
|
+
var isInteractive = Boolean(onClick || isLink);
|
|
43
|
+
var as = isInteractive ? href ? 'a' : 'button' : 'div';
|
|
41
44
|
var defaultRel = target === '_blank' ? 'noreferrer noopener' : undefined;
|
|
42
45
|
var iconColor = getTextColorToken({
|
|
43
46
|
property: 'icon',
|
|
@@ -53,7 +56,9 @@ var _AvatarButton = function _AvatarButton(_ref, ref) {
|
|
|
53
56
|
});
|
|
54
57
|
return /*#__PURE__*/jsx(StyledAvatarButton, {
|
|
55
58
|
ref: ref,
|
|
56
|
-
as:
|
|
59
|
+
as: as,
|
|
60
|
+
isInteractive: isInteractive,
|
|
61
|
+
isSelected: isSelected,
|
|
57
62
|
size: size,
|
|
58
63
|
color: color,
|
|
59
64
|
href: href,
|
|
@@ -61,7 +66,7 @@ var _AvatarButton = function _AvatarButton(_ref, ref) {
|
|
|
61
66
|
target: target,
|
|
62
67
|
rel: rel !== null && rel !== void 0 ? rel : defaultRel,
|
|
63
68
|
accessibilityProps: _objectSpread({}, makeAccessible({
|
|
64
|
-
role: isLink ? 'link' : 'button'
|
|
69
|
+
role: isInteractive ? isLink ? 'link' : 'button' : 'presentation'
|
|
65
70
|
})),
|
|
66
71
|
onBlur: onBlur,
|
|
67
72
|
onFocus: onFocus,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarButton.js","sources":["../../../../../../src/components/Avatar/AvatarButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledAvatarButton } from './StyledAvatarButton';\nimport type { AvatarButtonProps } from './types';\nimport { avatarTextSizeMapping, avatarIconSizeTokens } from './avatarTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { Heading, Text } from '~components/Typography';\nimport { getTextColorToken } from '~components/Button/BaseButton/BaseButton';\nimport type { IconColor } from '~components/Button/BaseButton/types';\nimport type { BaseTextProps } from '~components/Typography/BaseText/types';\nimport type { BladeElementRef } from '~utils/types';\n\nconst _AvatarButton: React.ForwardRefRenderFunction<BladeElementRef, AvatarButtonProps> = (\n {\n href,\n target,\n rel,\n variant = 'circle',\n color = 'neutral',\n size = 'medium',\n icon: Icon,\n imgProps,\n children,\n onBlur,\n onFocus,\n onClick,\n onMouseLeave,\n onMouseMove,\n onMouseDown,\n onPointerDown,\n onPointerEnter,\n onTouchStart,\n onTouchEnd,\n },\n ref,\n): React.ReactElement => {\n const isLink = Boolean(href);\n const defaultRel = target === '_blank' ? 'noreferrer noopener' : undefined;\n const iconColor = getTextColorToken({\n property: 'icon',\n variant: 'secondary',\n color,\n state: 'default',\n }) as IconColor;\n const textColor = getTextColorToken({\n property: 'text',\n variant: 'secondary',\n color,\n state: 'default',\n }) as BaseTextProps['color'];\n\n return (\n <StyledAvatarButton\n ref={ref as never}\n as={
|
|
1
|
+
{"version":3,"file":"AvatarButton.js","sources":["../../../../../../src/components/Avatar/AvatarButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledAvatarButton } from './StyledAvatarButton';\nimport type { AvatarButtonProps } from './types';\nimport { avatarTextSizeMapping, avatarIconSizeTokens } from './avatarTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { Heading, Text } from '~components/Typography';\nimport { getTextColorToken } from '~components/Button/BaseButton/BaseButton';\nimport type { IconColor } from '~components/Button/BaseButton/types';\nimport type { BaseTextProps } from '~components/Typography/BaseText/types';\nimport type { BladeElementRef } from '~utils/types';\n\nconst _AvatarButton: React.ForwardRefRenderFunction<BladeElementRef, AvatarButtonProps> = (\n {\n href,\n target,\n rel,\n variant = 'circle',\n color = 'neutral',\n size = 'medium',\n icon: Icon,\n imgProps,\n children,\n onBlur,\n onFocus,\n onClick,\n onMouseLeave,\n onMouseMove,\n onMouseDown,\n onPointerDown,\n onPointerEnter,\n onTouchStart,\n onTouchEnd,\n isSelected,\n },\n ref,\n): React.ReactElement => {\n const isLink = Boolean(href);\n const isInteractive = Boolean(onClick || isLink);\n const as = isInteractive ? (href ? 'a' : 'button') : 'div';\n\n const defaultRel = target === '_blank' ? 'noreferrer noopener' : undefined;\n const iconColor = getTextColorToken({\n property: 'icon',\n variant: 'secondary',\n color,\n state: 'default',\n }) as IconColor;\n const textColor = getTextColorToken({\n property: 'text',\n variant: 'secondary',\n color,\n state: 'default',\n }) as BaseTextProps['color'];\n\n return (\n <StyledAvatarButton\n ref={ref as never}\n as={as as never}\n isInteractive={isInteractive}\n isSelected={isSelected}\n size={size}\n color={color}\n href={href}\n variant={variant}\n target={target}\n rel={rel ?? defaultRel}\n accessibilityProps={{\n ...makeAccessible({\n role: isInteractive ? (isLink ? 'link' : 'button') : 'presentation',\n }),\n }}\n onBlur={onBlur}\n onFocus={onFocus}\n onClick={onClick}\n onMouseLeave={onMouseLeave}\n onMouseMove={onMouseMove}\n onMouseDown={onMouseDown}\n onPointerDown={onPointerDown}\n onPointerEnter={onPointerEnter}\n onTouchStart={onTouchStart}\n onTouchEnd={onTouchEnd}\n >\n <BaseBox\n display=\"flex\"\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n zIndex={1}\n height=\"100%\"\n >\n {Icon ? (\n <BaseBox display=\"flex\" justifyContent=\"center\" alignItems=\"center\">\n <Icon size={avatarIconSizeTokens[size]} color={iconColor} />\n </BaseBox>\n ) : null}\n\n {/* eslint-disable-next-line jsx-a11y/alt-text -- alt text is provided in imgProps */}\n {imgProps?.src ? <img {...imgProps} /> : null}\n\n {size === 'xlarge' ? (\n <Heading size={avatarTextSizeMapping[size]} weight=\"semibold\" color={textColor}>\n {children}\n </Heading>\n ) : (\n <Text size={avatarTextSizeMapping[size]} weight=\"semibold\" color={textColor}>\n {children}\n </Text>\n )}\n </BaseBox>\n </StyledAvatarButton>\n );\n};\n\nconst AvatarButton = React.forwardRef(_AvatarButton);\n\nexport { AvatarButton };\n"],"names":["_AvatarButton","_ref","ref","href","target","rel","_ref$variant","variant","_ref$color","color","_ref$size","size","Icon","icon","imgProps","children","onBlur","onFocus","onClick","onMouseLeave","onMouseMove","onMouseDown","onPointerDown","onPointerEnter","onTouchStart","onTouchEnd","isSelected","isLink","Boolean","isInteractive","as","defaultRel","undefined","iconColor","getTextColorToken","property","state","textColor","_jsx","StyledAvatarButton","accessibilityProps","_objectSpread","makeAccessible","role","_jsxs","BaseBox","display","flexDirection","alignItems","justifyContent","zIndex","height","avatarIconSizeTokens","src","Heading","avatarTextSizeMapping","weight","Text","AvatarButton","React","forwardRef"],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
1
2
|
import styled from 'styled-components';
|
|
2
3
|
import { avatarSizeTokens, avatarBorderRadiusTokens } from './avatarTokens.js';
|
|
3
4
|
import '../Box/BaseBox/index.js';
|
|
@@ -6,24 +7,29 @@ import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
|
|
|
6
7
|
import { makeSize } from '../../utils/makeSize/makeSize.js';
|
|
7
8
|
import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
|
|
8
9
|
|
|
10
|
+
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; }
|
|
11
|
+
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; }
|
|
9
12
|
var StyledAvatar = /*#__PURE__*/styled(BaseBox).withConfig({
|
|
10
13
|
displayName: "StyledAvatar",
|
|
11
14
|
componentId: "sc-127ewkg-0"
|
|
12
15
|
})(function (_ref) {
|
|
13
16
|
var theme = _ref.theme,
|
|
14
17
|
variant = _ref.variant,
|
|
15
|
-
size = _ref.size
|
|
16
|
-
|
|
18
|
+
size = _ref.size,
|
|
19
|
+
isInteractive = _ref.isInteractive;
|
|
20
|
+
return _objectSpread({
|
|
17
21
|
display: 'flex',
|
|
18
22
|
width: makeSize(avatarSizeTokens[size]),
|
|
19
23
|
height: makeSize(avatarSizeTokens[size]),
|
|
20
24
|
borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),
|
|
21
|
-
outline: "".concat(makeBorderSize(theme.border.width.thinner), " solid ").concat(theme.colors.surface.border.gray.subtle)
|
|
25
|
+
outline: "".concat(makeBorderSize(theme.border.width.thinner), " solid ").concat(theme.colors.surface.border.gray.subtle)
|
|
26
|
+
}, isInteractive ? {
|
|
22
27
|
'&:hover': {
|
|
23
28
|
outline: "".concat(makeBorderSize(theme.border.width.thick), " solid ").concat(theme.colors.surface.border.gray.muted),
|
|
24
|
-
borderColor: theme.colors.surface.border.gray.muted
|
|
29
|
+
borderColor: theme.colors.surface.border.gray.muted,
|
|
30
|
+
backgroundColor: theme.colors.surface.background.gray.moderate
|
|
25
31
|
}
|
|
26
|
-
};
|
|
32
|
+
} : {});
|
|
27
33
|
});
|
|
28
34
|
|
|
29
35
|
export { StyledAvatar };
|