@razorpay/blade 11.17.1 → 11.18.1
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/ActionList/ActionListItem.js +2 -1
- package/build/lib/native/components/ActionList/ActionListItem.js.map +1 -1
- package/build/lib/native/components/Avatar/Avatar.native.js +7 -0
- package/build/lib/native/components/Avatar/Avatar.native.js.map +1 -0
- package/build/lib/native/components/Avatar/AvatarGroup.native.js +7 -0
- package/build/lib/native/components/Avatar/AvatarGroup.native.js.map +1 -0
- package/build/lib/native/components/Button/BaseButton/BaseButton.js +1 -1
- package/build/lib/native/components/Button/BaseButton/BaseButton.js.map +1 -1
- package/build/lib/native/components/Dropdown/Dropdown.js +1 -1
- package/build/lib/native/components/Dropdown/Dropdown.js.map +1 -1
- package/build/lib/native/components/Dropdown/DropdownHeaderFooter.js +1 -1
- package/build/lib/native/components/Dropdown/DropdownHeaderFooter.js.map +1 -1
- package/build/lib/native/components/Dropdown/dropdownComponentIds.js +1 -1
- package/build/lib/native/components/Dropdown/dropdownComponentIds.js.map +1 -1
- package/build/lib/native/components/Dropdown/dropdownUtils.js +1 -1
- package/build/lib/native/components/Dropdown/dropdownUtils.js.map +1 -1
- package/build/lib/native/components/Dropdown/useDropdown.js.map +1 -1
- package/build/lib/native/components/Input/BaseInput/BaseInputVisuals.js +1 -1
- package/build/lib/native/components/Input/BaseInput/BaseInputVisuals.js.map +1 -1
- package/build/lib/native/components/Input/SearchInput/SearchInput.js +34 -0
- package/build/lib/native/components/Input/SearchInput/SearchInput.js.map +1 -0
- package/build/lib/native/components/ProgressBar/ProgressBar.js +1 -1
- package/build/lib/native/components/ProgressBar/ProgressBar.js.map +1 -1
- package/build/lib/native/components/index.js +3 -0
- package/build/lib/native/components/index.js.map +1 -1
- package/build/lib/native/tokens/global/size.js +1 -1
- package/build/lib/native/tokens/global/size.js.map +1 -1
- package/build/lib/native/tokens/theme/bladeTheme.js +1 -1
- package/build/lib/native/tokens/theme/bladeTheme.js.map +1 -1
- package/build/lib/native/utils/metaAttribute/metaConstants.js +1 -1
- package/build/lib/native/utils/metaAttribute/metaConstants.js.map +1 -1
- package/build/lib/web/development/components/ActionList/ActionListItem.js +3 -1
- package/build/lib/web/development/components/ActionList/ActionListItem.js.map +1 -1
- package/build/lib/web/development/components/Avatar/Avatar.web.js +125 -0
- package/build/lib/web/development/components/Avatar/Avatar.web.js.map +1 -0
- package/build/lib/web/development/components/Avatar/AvatarButton.js +86 -0
- package/build/lib/web/development/components/Avatar/AvatarButton.js.map +1 -0
- package/build/lib/web/development/components/Avatar/AvatarGroup.web.js +114 -0
- package/build/lib/web/development/components/Avatar/AvatarGroup.web.js.map +1 -0
- package/build/lib/web/development/components/Avatar/AvatarGroupContext.js +11 -0
- package/build/lib/web/development/components/Avatar/AvatarGroupContext.js.map +1 -0
- package/build/lib/web/development/components/Avatar/StyledAvatar.js +30 -0
- package/build/lib/web/development/components/Avatar/StyledAvatar.js.map +1 -0
- package/build/lib/web/development/components/Avatar/StyledAvatarButton.js +48 -0
- package/build/lib/web/development/components/Avatar/StyledAvatarButton.js.map +1 -0
- package/build/lib/web/development/components/Avatar/StyledAvatarGroup.js +24 -0
- package/build/lib/web/development/components/Avatar/StyledAvatarGroup.js.map +1 -0
- package/build/lib/web/development/components/Avatar/avatarTokens.js +49 -0
- package/build/lib/web/development/components/Avatar/avatarTokens.js.map +1 -0
- package/build/lib/web/development/components/Avatar/index.js +3 -0
- package/build/lib/web/development/components/Avatar/index.js.map +1 -0
- package/build/lib/web/development/components/Button/BaseButton/BaseButton.js +1 -1
- package/build/lib/web/development/components/Button/BaseButton/BaseButton.js.map +1 -1
- package/build/lib/web/development/components/Dropdown/Dropdown.js +4 -1
- package/build/lib/web/development/components/Dropdown/Dropdown.js.map +1 -1
- package/build/lib/web/development/components/Dropdown/DropdownHeaderFooter.js +2 -16
- package/build/lib/web/development/components/Dropdown/DropdownHeaderFooter.js.map +1 -1
- package/build/lib/web/development/components/Dropdown/DropdownOverlay.web.js +1 -1
- package/build/lib/web/development/components/Dropdown/DropdownOverlay.web.js.map +1 -1
- package/build/lib/web/development/components/Dropdown/dropdownComponentIds.js +2 -1
- package/build/lib/web/development/components/Dropdown/dropdownComponentIds.js.map +1 -1
- package/build/lib/web/development/components/Dropdown/dropdownUtils.js +1 -1
- package/build/lib/web/development/components/Dropdown/dropdownUtils.js.map +1 -1
- package/build/lib/web/development/components/Dropdown/useDropdown.js.map +1 -1
- package/build/lib/web/development/components/Input/BaseInput/BaseInputVisuals.js +1 -1
- package/build/lib/web/development/components/Input/BaseInput/BaseInputVisuals.js.map +1 -1
- package/build/lib/web/development/components/Input/SearchInput/SearchInput.js +180 -0
- package/build/lib/web/development/components/Input/SearchInput/SearchInput.js.map +1 -0
- package/build/lib/web/development/components/Input/SearchInput/index.js +2 -0
- package/build/lib/web/development/components/Input/SearchInput/index.js.map +1 -0
- package/build/lib/web/development/components/ProgressBar/CircularProgressBar.web.js +5 -3
- package/build/lib/web/development/components/ProgressBar/CircularProgressBar.web.js.map +1 -1
- package/build/lib/web/development/components/ProgressBar/ProgressBar.js +1 -1
- package/build/lib/web/development/components/ProgressBar/ProgressBar.js.map +1 -1
- package/build/lib/web/development/components/index.js +5 -0
- package/build/lib/web/development/components/index.js.map +1 -1
- package/build/lib/web/development/tokens/global/size.js +2 -0
- package/build/lib/web/development/tokens/global/size.js.map +1 -1
- package/build/lib/web/development/tokens/theme/bladeTheme.js +6 -6
- package/build/lib/web/development/tokens/theme/bladeTheme.js.map +1 -1
- package/build/lib/web/development/utils/metaAttribute/metaConstants.js +3 -0
- package/build/lib/web/development/utils/metaAttribute/metaConstants.js.map +1 -1
- package/build/lib/web/production/components/ActionList/ActionListItem.js +3 -1
- package/build/lib/web/production/components/ActionList/ActionListItem.js.map +1 -1
- package/build/lib/web/production/components/Avatar/Avatar.web.js +125 -0
- package/build/lib/web/production/components/Avatar/Avatar.web.js.map +1 -0
- package/build/lib/web/production/components/Avatar/AvatarButton.js +86 -0
- package/build/lib/web/production/components/Avatar/AvatarButton.js.map +1 -0
- package/build/lib/web/production/components/Avatar/AvatarGroup.web.js +114 -0
- package/build/lib/web/production/components/Avatar/AvatarGroup.web.js.map +1 -0
- package/build/lib/web/production/components/Avatar/AvatarGroupContext.js +11 -0
- package/build/lib/web/production/components/Avatar/AvatarGroupContext.js.map +1 -0
- package/build/lib/web/production/components/Avatar/StyledAvatar.js +30 -0
- package/build/lib/web/production/components/Avatar/StyledAvatar.js.map +1 -0
- package/build/lib/web/production/components/Avatar/StyledAvatarButton.js +48 -0
- package/build/lib/web/production/components/Avatar/StyledAvatarButton.js.map +1 -0
- package/build/lib/web/production/components/Avatar/StyledAvatarGroup.js +24 -0
- package/build/lib/web/production/components/Avatar/StyledAvatarGroup.js.map +1 -0
- package/build/lib/web/production/components/Avatar/avatarTokens.js +49 -0
- package/build/lib/web/production/components/Avatar/avatarTokens.js.map +1 -0
- package/build/lib/web/production/components/Avatar/index.js +3 -0
- package/build/lib/web/production/components/Avatar/index.js.map +1 -0
- package/build/lib/web/production/components/Button/BaseButton/BaseButton.js +1 -1
- package/build/lib/web/production/components/Button/BaseButton/BaseButton.js.map +1 -1
- package/build/lib/web/production/components/Dropdown/Dropdown.js +4 -1
- package/build/lib/web/production/components/Dropdown/Dropdown.js.map +1 -1
- package/build/lib/web/production/components/Dropdown/DropdownHeaderFooter.js +2 -16
- package/build/lib/web/production/components/Dropdown/DropdownHeaderFooter.js.map +1 -1
- package/build/lib/web/production/components/Dropdown/DropdownOverlay.web.js +1 -1
- package/build/lib/web/production/components/Dropdown/DropdownOverlay.web.js.map +1 -1
- package/build/lib/web/production/components/Dropdown/dropdownComponentIds.js +2 -1
- package/build/lib/web/production/components/Dropdown/dropdownComponentIds.js.map +1 -1
- package/build/lib/web/production/components/Dropdown/dropdownUtils.js +1 -1
- package/build/lib/web/production/components/Dropdown/dropdownUtils.js.map +1 -1
- package/build/lib/web/production/components/Dropdown/useDropdown.js.map +1 -1
- package/build/lib/web/production/components/Input/BaseInput/BaseInputVisuals.js +1 -1
- package/build/lib/web/production/components/Input/BaseInput/BaseInputVisuals.js.map +1 -1
- package/build/lib/web/production/components/Input/SearchInput/SearchInput.js +180 -0
- package/build/lib/web/production/components/Input/SearchInput/SearchInput.js.map +1 -0
- package/build/lib/web/production/components/Input/SearchInput/index.js +2 -0
- package/build/lib/web/production/components/Input/SearchInput/index.js.map +1 -0
- package/build/lib/web/production/components/ProgressBar/CircularProgressBar.web.js +5 -3
- package/build/lib/web/production/components/ProgressBar/CircularProgressBar.web.js.map +1 -1
- package/build/lib/web/production/components/ProgressBar/ProgressBar.js +1 -1
- package/build/lib/web/production/components/ProgressBar/ProgressBar.js.map +1 -1
- package/build/lib/web/production/components/index.js +5 -0
- package/build/lib/web/production/components/index.js.map +1 -1
- package/build/lib/web/production/tokens/global/size.js +2 -0
- package/build/lib/web/production/tokens/global/size.js.map +1 -1
- package/build/lib/web/production/tokens/theme/bladeTheme.js +6 -6
- package/build/lib/web/production/tokens/theme/bladeTheme.js.map +1 -1
- package/build/lib/web/production/utils/metaAttribute/metaConstants.js +3 -0
- package/build/lib/web/production/utils/metaAttribute/metaConstants.js.map +1 -1
- package/build/types/components/index.d.ts +328 -147
- package/build/types/components/index.native.d.ts +282 -147
- package/build/types/tokens/index.d.ts +2 -0
- package/build/types/tokens/index.native.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionListItem.js","sources":["../../../../../../src/components/ActionList/ActionListItem.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { StyledActionListItem } from './styles/StyledActionListItem';\nimport { componentIds } from './componentIds';\nimport type { StyledActionListItemProps } from './styles/getBaseActionListItemStyles';\nimport { validateActionListItemProps, getNormalTextColor } from './actionListUtils';\nimport { getActionListItemRole, getActionListSectionRole, isRoleMenu } from './getA11yRoles';\nimport { Divider } from '~components/Divider';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { Text } from '~components/Typography';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { Checkbox } from '~components/Checkbox';\nimport { size } from '~tokens/global';\nimport type { DropdownProps } from '~components/Dropdown';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport { useTheme } from '~components/BladeProvider';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeSize } from '~utils/makeSize';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { throwBladeError } from '~utils/logger';\nimport type { BadgeProps } from '~components/Badge';\nimport { Badge } from '~components/Badge';\nimport { Box } from '~components/Box';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\n\ntype ActionListItemProps = {\n title: string;\n description?: string;\n onClick?: (clickProps: { name: string; value?: boolean }) => void;\n /**\n * value that you get from `onChange` event on SelectInput or in form submissions.\n */\n value: string;\n /**\n * Link to open when item is clicked.\n */\n href?: string;\n /**\n * HTML target of the link\n */\n target?: string;\n /**\n * Item that goes on left-side of item.\n *\n * Valid elements - `<ActionListItemIcon />`, `<ActionListItemAsset />`\n *\n * Will be overriden in multiselect\n */\n leading?: React.ReactNode;\n /**\n * Item that goes on right-side of item.\n *\n * Valid elements - `<ActionListItemText />`, `<ActionListItemIcon />`\n */\n trailing?: React.ReactNode;\n /**\n * Item that goes immediately next to the title.\n *\n * Valid elements - `<ActionListItemBadge />`, `<ActionListItemBadgeGroup />`\n *\n */\n titleSuffix?: React.ReactElement;\n isDisabled?: boolean;\n intent?: Extract<FeedbackColors, 'negative'>;\n /**\n * Can be used in combination of `onClick` to highlight item as selected in Button Triggers.\n *\n * When trigger is SelectInput, Use `value` prop on SelectInput instead to make dropdown controlled.\n */\n isSelected?: boolean;\n /**\n * Internally passed from ActionList. No need to pass it explicitly\n *\n * @private\n */\n _index?: number;\n} & TestID;\n\nconst ActionListItemContext = React.createContext<{\n intent?: ActionListItemProps['intent'];\n isDisabled?: ActionListItemProps['isDisabled'];\n}>({});\n\nconst StyledActionListSectionTitle = styled(BaseBox)((props) => ({\n // @TODO: replace this styled-component with new layout box when we have padding shorthand\n padding: makeSize(props.theme.spacing[3]),\n}));\n\ntype ActionListSectionProps = {\n title: string;\n children: React.ReactNode[] | React.ReactNode;\n /**\n * Internally used to hide the divider on final item in React Native.\n *\n * Should not be used by consumers (also won't work on web)\n *\n * @private\n */\n _hideDivider?: boolean;\n /**\n * Internally used to hide / show section in AutoComplete\n *\n * @private\n */\n _sectionChildValues?: string[];\n} & TestID;\nconst _ActionListSection = ({\n title,\n children,\n testID,\n _hideDivider,\n _sectionChildValues,\n}: ActionListSectionProps): React.ReactElement => {\n const { hasAutoCompleteInBottomSheetHeader, dropdownTriggerer, filteredValues } = useDropdown();\n const hasAutoComplete =\n hasAutoCompleteInBottomSheetHeader ||\n dropdownTriggerer === dropdownComponentIds.triggers.AutoComplete;\n\n const isSectionVisible = React.useMemo(() => {\n if (hasAutoComplete) {\n const visibleActionListItemInSection = _sectionChildValues?.find((actionItemValue) =>\n filteredValues.includes(actionItemValue),\n );\n\n return Boolean(visibleActionListItemInSection);\n }\n\n return true;\n }, [_sectionChildValues, hasAutoComplete, filteredValues]);\n\n const showDividerInRN = !(_hideDivider && isReactNative());\n const showDividerInAutoComplete = hasAutoComplete\n ? isSectionVisible && filteredValues.length > 1\n : true;\n\n return (\n <BaseBox\n {...makeAccessible({\n role: getActionListSectionRole(),\n label: title,\n })}\n {...metaAttribute({ name: MetaConstants.ActionListSection, testID })}\n >\n {/* We're announcing title as group label so we can hide this */}\n {isSectionVisible ? (\n <StyledActionListSectionTitle {...makeAccessible({ hidden: true })}>\n <Text color=\"surface.text.gray.muted\" size=\"small\" weight=\"semibold\">\n {title}\n </Text>\n </StyledActionListSectionTitle>\n ) : null}\n <BaseBox\n {...makeAccessible({\n // On web, we just wrap it in another listbox to announce item count properly for particular group.\n // On React Native, we ignore it since `menu` + `group` role will take care of accessibility\n role: isReactNative() ? undefined : 'listbox',\n })}\n >\n {children}\n </BaseBox>\n {showDividerInAutoComplete && showDividerInRN ? (\n <Divider marginX=\"spacing.3\" marginY=\"spacing.1\" />\n ) : null}\n </BaseBox>\n );\n};\n\nconst ActionListSection = assignWithoutSideEffects(_ActionListSection, {\n componentId: componentIds.ActionListSection,\n});\n\nconst _ActionListItemIcon = ({ icon }: { icon: IconComponent }): React.ReactElement => {\n const Icon = icon;\n const { intent, isDisabled } = React.useContext(ActionListItemContext);\n const iconState = isDisabled ? 'disabled' : 'muted';\n return (\n <Icon\n color={\n intent === 'negative'\n ? 'feedback.icon.negative.intense'\n : `interactive.icon.gray.${iconState}`\n }\n size=\"medium\"\n />\n );\n};\n\nconst ActionListItemIcon = assignWithoutSideEffects(_ActionListItemIcon, {\n componentId: componentIds.ActionListItemIcon,\n});\n\nconst _ActionListItemBadgeGroup = ({\n children,\n}: {\n children: React.ReactElement[] | React.ReactElement;\n}): React.ReactElement => {\n return (\n <Box display=\"flex\" alignItems=\"center\" flexDirection=\"row\">\n {children}\n </Box>\n );\n};\n\nconst ActionListItemBadgeGroup = assignWithoutSideEffects(_ActionListItemBadgeGroup, {\n componentId: componentIds.ActionListItemBadgeGroup,\n});\n\nconst _ActionListItemBadge = (props: BadgeProps): React.ReactElement => {\n return <Badge size=\"medium\" marginLeft=\"spacing.3\" {...props} />;\n};\n\nconst ActionListItemBadge = assignWithoutSideEffects(_ActionListItemBadge, {\n componentId: componentIds.ActionListItemBadge,\n});\n\nconst _ActionListItemText = ({\n children,\n}: {\n children: StringChildrenType;\n}): React.ReactElement => {\n const { isDisabled } = React.useContext(ActionListItemContext);\n\n return (\n <Text variant=\"caption\" color={getNormalTextColor(isDisabled, { isMuted: true })}>\n {children}\n </Text>\n );\n};\n\nconst ActionListItemText = assignWithoutSideEffects(_ActionListItemText, {\n componentId: componentIds.ActionListItemText,\n});\n\ntype ClickHandlerType = (e: React.MouseEvent<HTMLButtonElement>) => void;\n\nconst makeActionListItemClickable = (\n clickHandler: ClickHandlerType,\n): { onPress?: StyledActionListItemProps['onPress']; onClick?: ClickHandlerType } => {\n if (isReactNative()) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error\n // @ts-ignore: ignoring ReactNative press type for the peace of mind\n return { onPress: clickHandler };\n }\n\n return {\n onClick: clickHandler,\n };\n};\n\nconst _ActionListItemBody = ({\n selectionType,\n intent,\n description,\n isDisabled,\n leading,\n trailing,\n title,\n titleSuffix,\n isSelected,\n}: Pick<\n ActionListItemProps,\n 'intent' | 'isDisabled' | 'description' | 'trailing' | 'leading' | 'title' | 'titleSuffix'\n> & {\n selectionType: DropdownProps['selectionType'];\n isSelected?: boolean;\n}): React.ReactElement => {\n return (\n <>\n <BaseBox\n display=\"flex\"\n justifyContent=\"center\"\n flexDirection=\"row\"\n alignItems=\"center\"\n maxHeight={isReactNative() ? undefined : makeSize(size[20])}\n >\n <BaseBox display=\"flex\" justifyContent=\"center\" alignItems=\"center\">\n {selectionType === 'multiple' ? (\n // Adding aria-hidden because the listbox item in multiselect in itself explains the behaviour so announcing checkbox is unneccesary and just a nice UI tweak for us\n <BaseBox\n pointerEvents=\"none\"\n paddingRight=\"spacing.2\"\n {...makeAccessible({\n hidden: true,\n })}\n >\n <Checkbox isChecked={isSelected} tabIndex={-1} isDisabled={isDisabled}>\n {/* \n Checkbox requires children. Didn't want to make it optional because its helpful for consumers\n But for this case in particular, we just want to use Text separately so that we can control spacing and color and keep it consistent with non-multiselect dropdowns\n */}\n {null}\n </Checkbox>\n </BaseBox>\n ) : (\n leading\n )}\n </BaseBox>\n <BaseBox\n paddingLeft={selectionType === 'multiple' || !leading ? 'spacing.0' : 'spacing.3'}\n paddingRight=\"spacing.3\"\n display=\"flex\"\n alignItems=\"center\"\n flexDirection=\"row\"\n >\n <Text\n truncateAfterLines={1}\n color={\n intent === 'negative'\n ? 'feedback.text.negative.intense'\n : getNormalTextColor(isDisabled)\n }\n >\n {title}\n </Text>\n {titleSuffix}\n </BaseBox>\n <BaseBox marginLeft=\"auto\">{trailing}</BaseBox>\n </BaseBox>\n <BaseBox paddingLeft={leading || selectionType === 'multiple' ? 'spacing.7' : undefined}>\n {description ? (\n <Text color={getNormalTextColor(isDisabled, { isMuted: true })} size=\"small\">\n {description}\n </Text>\n ) : null}\n </BaseBox>\n </>\n );\n};\n\nconst ActionListItemBody = React.memo(_ActionListItemBody);\n\n/**\n * ### ActionListItem\n *\n * Creates option inside `ActionList`.\n *\n * #### Usage\n *\n * ```jsx\n * <ActionList>\n * <ActionListItem\n * title=\"Home\"\n * value=\"home\"\n * leading={<ActionListItemIcon icon={HomeIcon} />}\n * trailing={<ActionListItemText>⌘ + S</ActionListItemText>}\n * />\n * </ActionList>\n * ```\n */\nconst _ActionListItem = (props: ActionListItemProps): React.ReactElement => {\n const {\n activeIndex,\n dropdownBaseId,\n onOptionClick,\n selectedIndices,\n setShouldIgnoreBlurAnimation,\n selectionType,\n dropdownTriggerer,\n isKeydownPressed,\n filteredValues,\n hasAutoCompleteInBottomSheetHeader,\n } = useDropdown();\n\n const { platform } = useTheme();\n const isMobile = platform === 'onMobile';\n const hasAutoComplete =\n hasAutoCompleteInBottomSheetHeader ||\n dropdownTriggerer === dropdownComponentIds.triggers.AutoComplete;\n\n const renderOnWebAs = props.href ? 'a' : 'button';\n\n /**\n * In SelectInput, returns the isSelected according to selected indexes in the state\n *\n * In Other Triggers (Menu Usecase), returns `props.isSelected` since passing the\n * isSelected prop explicitly is the only way to select item in menu\n */\n const getIsSelected = (): boolean | undefined => {\n if (dropdownTriggerer === dropdownComponentIds.triggers.SelectInput || hasAutoComplete) {\n if (typeof props._index === 'number') {\n return selectedIndices.includes(props._index);\n }\n\n return undefined;\n }\n\n return props.isSelected;\n };\n\n const isSelected = getIsSelected();\n\n React.useEffect(() => {\n validateActionListItemProps({\n leading: props.leading,\n trailing: props.trailing,\n titleSuffix: props.titleSuffix,\n });\n }, [props.leading, props.trailing, props.titleSuffix]);\n\n React.useEffect(() => {\n if (__DEV__) {\n if (\n dropdownTriggerer === dropdownComponentIds.triggers.SelectInput &&\n props.intent === 'negative'\n ) {\n throwBladeError({\n message:\n 'negative intent ActionListItem cannot be used inside Dropdown with SelectInput trigger',\n moduleName: 'ActionListItem',\n });\n }\n }\n }, [props.intent, dropdownTriggerer]);\n\n return (\n <ActionListItemContext.Provider value={{ intent: props.intent, isDisabled: props.isDisabled }}>\n <StyledActionListItem\n isVisible={hasAutoComplete && filteredValues ? filteredValues.includes(props.value) : true}\n as={!isReactNative() ? renderOnWebAs : undefined}\n id={`${dropdownBaseId}-${props._index}`}\n type=\"button\"\n tabIndex={-1}\n href={props.href}\n target={props.target}\n className={activeIndex === props._index ? 'active-focus' : ''}\n {...makeAccessible({\n selected: isSelected,\n current: isRoleMenu(dropdownTriggerer) ? isSelected : undefined,\n role: getActionListItemRole(dropdownTriggerer, props.href),\n disabled: props.isDisabled,\n })}\n {...makeActionListItemClickable((e: React.MouseEvent<HTMLButtonElement>): void => {\n if (typeof props._index === 'number') {\n onOptionClick(e, props._index);\n props.onClick?.({ name: props.value, value: isSelected });\n }\n })}\n {...metaAttribute({ name: MetaConstants.ActionListItem, testID: props.testID })}\n onMouseDown={() => {\n // We want to keep focus on Dropdown's trigger while option is being clicked\n // So We set this flag that ignores the blur animation to avoid the flicker between focus out + focus in\n setShouldIgnoreBlurAnimation(true);\n }}\n onMouseUp={() => {\n // (Contd from above comment...) We set this flag back to false since blur of SelectInput is done calling by this time\n setShouldIgnoreBlurAnimation(false);\n }}\n data-value={props.value}\n data-index={props._index}\n // Custom props for changes in styles\n selectionType={selectionType}\n hasDescription={Boolean(props.description)}\n intent={props.intent}\n isSelected={isSelected}\n isKeydownPressed={isKeydownPressed}\n isMobile={isMobile}\n >\n <ActionListItemBody\n selectionType={selectionType}\n intent={props.intent}\n description={props.description}\n isDisabled={props.isDisabled}\n leading={props.leading}\n trailing={props.trailing}\n title={props.title}\n titleSuffix={props.titleSuffix}\n isSelected={isSelected}\n />\n </StyledActionListItem>\n </ActionListItemContext.Provider>\n );\n};\n\nconst ActionListItem = assignWithoutSideEffects(React.memo(_ActionListItem), {\n componentId: componentIds.ActionListItem,\n displayName: componentIds.ActionListItem,\n});\n\nexport type { ActionListItemProps, ActionListSectionProps };\nexport {\n ActionListItem,\n ActionListItemIcon,\n ActionListItemText,\n ActionListItemBadge,\n ActionListItemBadgeGroup,\n ActionListSection,\n};\n"],"names":["ActionListItemContext","React","createContext","StyledActionListSectionTitle","styled","BaseBox","withConfig","displayName","componentId","props","padding","makeSize","theme","spacing","_ActionListSection","_ref","title","children","testID","_hideDivider","_sectionChildValues","_useDropdown","useDropdown","hasAutoCompleteInBottomSheetHeader","dropdownTriggerer","filteredValues","hasAutoComplete","dropdownComponentIds","triggers","AutoComplete","isSectionVisible","useMemo","visibleActionListItemInSection","find","actionItemValue","includes","Boolean","showDividerInRN","isReactNative","showDividerInAutoComplete","length","_jsxs","_objectSpread","makeAccessible","role","getActionListSectionRole","label","metaAttribute","name","MetaConstants","ActionListSection","_jsx","hidden","Text","color","size","weight","undefined","Divider","marginX","marginY","assignWithoutSideEffects","componentIds","_ActionListItemIcon","_ref2","icon","Icon","_React$useContext","useContext","intent","isDisabled","iconState","concat","ActionListItemIcon","_ActionListItemBadgeGroup","_ref3","Box","display","alignItems","flexDirection","ActionListItemBadgeGroup","_ActionListItemBadge","Badge","marginLeft","ActionListItemBadge","_ActionListItemText","_ref4","_React$useContext2","variant","getNormalTextColor","isMuted","ActionListItemText","makeActionListItemClickable","clickHandler","onPress","onClick","_ActionListItemBody","_ref5","selectionType","description","leading","trailing","titleSuffix","isSelected","_Fragment","justifyContent","maxHeight","pointerEvents","paddingRight","Checkbox","isChecked","tabIndex","paddingLeft","truncateAfterLines","ActionListItemBody","memo","_ActionListItem","_useDropdown2","activeIndex","dropdownBaseId","onOptionClick","selectedIndices","setShouldIgnoreBlurAnimation","isKeydownPressed","_useTheme","useTheme","platform","isMobile","renderOnWebAs","href","getIsSelected","SelectInput","_index","useEffect","validateActionListItemProps","throwBladeError","message","moduleName","Provider","value","StyledActionListItem","isVisible","as","id","type","target","className","selected","current","isRoleMenu","getActionListItemRole","disabled","e","_props$onClick","call","ActionListItem","onMouseDown","onMouseUp","hasDescription"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ActionListItem.js","sources":["../../../../../../src/components/ActionList/ActionListItem.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport React from 'react';\nimport styled from 'styled-components';\nimport type { TouchableOpacity } from 'react-native';\nimport { StyledActionListItem } from './styles/StyledActionListItem';\nimport { componentIds } from './componentIds';\nimport type { StyledActionListItemProps } from './styles/getBaseActionListItemStyles';\nimport { validateActionListItemProps, getNormalTextColor } from './actionListUtils';\nimport { getActionListItemRole, getActionListSectionRole, isRoleMenu } from './getA11yRoles';\nimport { Divider } from '~components/Divider';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { Text } from '~components/Typography';\nimport type { Platform } from '~utils';\nimport { castWebType, isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { Checkbox } from '~components/Checkbox';\nimport { size } from '~tokens/global';\nimport type { DropdownProps } from '~components/Dropdown';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport { useTheme } from '~components/BladeProvider';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeSize } from '~utils/makeSize';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { throwBladeError } from '~utils/logger';\nimport type { BadgeProps } from '~components/Badge';\nimport { Badge } from '~components/Badge';\nimport { Box } from '~components/Box';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\n\ntype ActionListItemProps = {\n title: string;\n description?: string;\n onClick?: (clickProps: {\n name: string;\n value?: boolean;\n event: Platform.Select<{\n web: React.MouseEvent;\n native: React.TouchEvent<TouchableOpacity>;\n }>;\n }) => void;\n /**\n * value that you get from `onChange` event on SelectInput or in form submissions.\n */\n value: string;\n /**\n * Link to open when item is clicked.\n */\n href?: string;\n /**\n * HTML target of the link\n */\n target?: string;\n /**\n * Item that goes on left-side of item.\n *\n * Valid elements - `<ActionListItemIcon />`, `<ActionListItemAsset />`\n *\n * Will be overriden in multiselect\n */\n leading?: React.ReactNode;\n /**\n * Item that goes on right-side of item.\n *\n * Valid elements - `<ActionListItemText />`, `<ActionListItemIcon />`\n */\n trailing?: React.ReactNode;\n /**\n * Item that goes immediately next to the title.\n *\n * Valid elements - `<ActionListItemBadge />`, `<ActionListItemBadgeGroup />`\n *\n */\n titleSuffix?: React.ReactElement;\n isDisabled?: boolean;\n intent?: Extract<FeedbackColors, 'negative'>;\n /**\n * Can be used in combination of `onClick` to highlight item as selected in Button Triggers.\n *\n * When trigger is SelectInput, Use `value` prop on SelectInput instead to make dropdown controlled.\n */\n isSelected?: boolean;\n /**\n * Internally passed from ActionList. No need to pass it explicitly\n *\n * @private\n */\n _index?: number;\n} & TestID;\n\nconst ActionListItemContext = React.createContext<{\n intent?: ActionListItemProps['intent'];\n isDisabled?: ActionListItemProps['isDisabled'];\n}>({});\n\nconst StyledActionListSectionTitle = styled(BaseBox)((props) => ({\n // @TODO: replace this styled-component with new layout box when we have padding shorthand\n padding: makeSize(props.theme.spacing[3]),\n}));\n\ntype ActionListSectionProps = {\n title: string;\n children: React.ReactNode[] | React.ReactNode;\n /**\n * Internally used to hide the divider on final item in React Native.\n *\n * Should not be used by consumers (also won't work on web)\n *\n * @private\n */\n _hideDivider?: boolean;\n /**\n * Internally used to hide / show section in AutoComplete\n *\n * @private\n */\n _sectionChildValues?: string[];\n} & TestID;\nconst _ActionListSection = ({\n title,\n children,\n testID,\n _hideDivider,\n _sectionChildValues,\n}: ActionListSectionProps): React.ReactElement => {\n const { hasAutoCompleteInBottomSheetHeader, dropdownTriggerer, filteredValues } = useDropdown();\n const hasAutoComplete =\n hasAutoCompleteInBottomSheetHeader ||\n dropdownTriggerer === dropdownComponentIds.triggers.AutoComplete;\n\n const isSectionVisible = React.useMemo(() => {\n if (hasAutoComplete) {\n const visibleActionListItemInSection = _sectionChildValues?.find((actionItemValue) =>\n filteredValues.includes(actionItemValue),\n );\n\n return Boolean(visibleActionListItemInSection);\n }\n\n return true;\n }, [_sectionChildValues, hasAutoComplete, filteredValues]);\n\n const showDividerInRN = !(_hideDivider && isReactNative());\n const showDividerInAutoComplete = hasAutoComplete\n ? isSectionVisible && filteredValues.length > 1\n : true;\n\n return (\n <BaseBox\n {...makeAccessible({\n role: getActionListSectionRole(),\n label: title,\n })}\n {...metaAttribute({ name: MetaConstants.ActionListSection, testID })}\n >\n {/* We're announcing title as group label so we can hide this */}\n {isSectionVisible ? (\n <StyledActionListSectionTitle {...makeAccessible({ hidden: true })}>\n <Text color=\"surface.text.gray.muted\" size=\"small\" weight=\"semibold\">\n {title}\n </Text>\n </StyledActionListSectionTitle>\n ) : null}\n <BaseBox\n {...makeAccessible({\n // On web, we just wrap it in another listbox to announce item count properly for particular group.\n // On React Native, we ignore it since `menu` + `group` role will take care of accessibility\n role: isReactNative() ? undefined : 'listbox',\n })}\n >\n {children}\n </BaseBox>\n {showDividerInAutoComplete && showDividerInRN ? (\n <Divider marginX=\"spacing.3\" marginY=\"spacing.1\" />\n ) : null}\n </BaseBox>\n );\n};\n\nconst ActionListSection = assignWithoutSideEffects(_ActionListSection, {\n componentId: componentIds.ActionListSection,\n});\n\nconst _ActionListItemIcon = ({ icon }: { icon: IconComponent }): React.ReactElement => {\n const Icon = icon;\n const { intent, isDisabled } = React.useContext(ActionListItemContext);\n const iconState = isDisabled ? 'disabled' : 'muted';\n return (\n <Icon\n color={\n intent === 'negative'\n ? 'feedback.icon.negative.intense'\n : `interactive.icon.gray.${iconState}`\n }\n size=\"medium\"\n />\n );\n};\n\nconst ActionListItemIcon = assignWithoutSideEffects(_ActionListItemIcon, {\n componentId: componentIds.ActionListItemIcon,\n});\n\nconst _ActionListItemBadgeGroup = ({\n children,\n}: {\n children: React.ReactElement[] | React.ReactElement;\n}): React.ReactElement => {\n return (\n <Box display=\"flex\" alignItems=\"center\" flexDirection=\"row\">\n {children}\n </Box>\n );\n};\n\nconst ActionListItemBadgeGroup = assignWithoutSideEffects(_ActionListItemBadgeGroup, {\n componentId: componentIds.ActionListItemBadgeGroup,\n});\n\nconst _ActionListItemBadge = (props: BadgeProps): React.ReactElement => {\n return <Badge size=\"medium\" marginLeft=\"spacing.3\" {...props} />;\n};\n\nconst ActionListItemBadge = assignWithoutSideEffects(_ActionListItemBadge, {\n componentId: componentIds.ActionListItemBadge,\n});\n\nconst _ActionListItemText = ({\n children,\n}: {\n children: StringChildrenType;\n}): React.ReactElement => {\n const { isDisabled } = React.useContext(ActionListItemContext);\n\n return (\n <Text variant=\"caption\" color={getNormalTextColor(isDisabled, { isMuted: true })}>\n {children}\n </Text>\n );\n};\n\nconst ActionListItemText = assignWithoutSideEffects(_ActionListItemText, {\n componentId: componentIds.ActionListItemText,\n});\n\ntype ClickHandlerType = (e: React.MouseEvent<HTMLButtonElement>) => void;\n\nconst makeActionListItemClickable = (\n clickHandler: ClickHandlerType,\n): { onPress?: StyledActionListItemProps['onPress']; onClick?: ClickHandlerType } => {\n if (isReactNative()) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error\n // @ts-ignore: ignoring ReactNative press type for the peace of mind\n return { onPress: clickHandler };\n }\n\n return {\n onClick: clickHandler,\n };\n};\n\nconst _ActionListItemBody = ({\n selectionType,\n intent,\n description,\n isDisabled,\n leading,\n trailing,\n title,\n titleSuffix,\n isSelected,\n}: Pick<\n ActionListItemProps,\n 'intent' | 'isDisabled' | 'description' | 'trailing' | 'leading' | 'title' | 'titleSuffix'\n> & {\n selectionType: DropdownProps['selectionType'];\n isSelected?: boolean;\n}): React.ReactElement => {\n return (\n <>\n <BaseBox\n display=\"flex\"\n justifyContent=\"center\"\n flexDirection=\"row\"\n alignItems=\"center\"\n maxHeight={isReactNative() ? undefined : makeSize(size[20])}\n >\n <BaseBox display=\"flex\" justifyContent=\"center\" alignItems=\"center\">\n {selectionType === 'multiple' ? (\n // Adding aria-hidden because the listbox item in multiselect in itself explains the behaviour so announcing checkbox is unneccesary and just a nice UI tweak for us\n <BaseBox\n pointerEvents=\"none\"\n paddingRight=\"spacing.2\"\n {...makeAccessible({\n hidden: true,\n })}\n >\n <Checkbox isChecked={isSelected} tabIndex={-1} isDisabled={isDisabled}>\n {/* \n Checkbox requires children. Didn't want to make it optional because its helpful for consumers\n But for this case in particular, we just want to use Text separately so that we can control spacing and color and keep it consistent with non-multiselect dropdowns\n */}\n {null}\n </Checkbox>\n </BaseBox>\n ) : (\n leading\n )}\n </BaseBox>\n <BaseBox\n paddingLeft={selectionType === 'multiple' || !leading ? 'spacing.0' : 'spacing.3'}\n paddingRight=\"spacing.3\"\n display=\"flex\"\n alignItems=\"center\"\n flexDirection=\"row\"\n >\n <Text\n truncateAfterLines={1}\n color={\n intent === 'negative'\n ? 'feedback.text.negative.intense'\n : getNormalTextColor(isDisabled)\n }\n >\n {title}\n </Text>\n {titleSuffix}\n </BaseBox>\n <BaseBox marginLeft=\"auto\">{trailing}</BaseBox>\n </BaseBox>\n <BaseBox paddingLeft={leading || selectionType === 'multiple' ? 'spacing.7' : undefined}>\n {description ? (\n <Text color={getNormalTextColor(isDisabled, { isMuted: true })} size=\"small\">\n {description}\n </Text>\n ) : null}\n </BaseBox>\n </>\n );\n};\n\nconst ActionListItemBody = React.memo(_ActionListItemBody);\n\n/**\n * ### ActionListItem\n *\n * Creates option inside `ActionList`.\n *\n * #### Usage\n *\n * ```jsx\n * <ActionList>\n * <ActionListItem\n * title=\"Home\"\n * value=\"home\"\n * leading={<ActionListItemIcon icon={HomeIcon} />}\n * trailing={<ActionListItemText>⌘ + S</ActionListItemText>}\n * />\n * </ActionList>\n * ```\n */\nconst _ActionListItem = (props: ActionListItemProps): React.ReactElement => {\n const {\n activeIndex,\n dropdownBaseId,\n onOptionClick,\n selectedIndices,\n setShouldIgnoreBlurAnimation,\n selectionType,\n dropdownTriggerer,\n isKeydownPressed,\n filteredValues,\n hasAutoCompleteInBottomSheetHeader,\n } = useDropdown();\n\n const { platform } = useTheme();\n const isMobile = platform === 'onMobile';\n const hasAutoComplete =\n hasAutoCompleteInBottomSheetHeader ||\n dropdownTriggerer === dropdownComponentIds.triggers.AutoComplete;\n\n const renderOnWebAs = props.href ? 'a' : 'button';\n\n /**\n * In SelectInput, returns the isSelected according to selected indexes in the state\n *\n * In Other Triggers (Menu Usecase), returns `props.isSelected` since passing the\n * isSelected prop explicitly is the only way to select item in menu\n */\n const getIsSelected = (): boolean | undefined => {\n if (dropdownTriggerer === dropdownComponentIds.triggers.SelectInput || hasAutoComplete) {\n if (typeof props._index === 'number') {\n return selectedIndices.includes(props._index);\n }\n\n return undefined;\n }\n\n return props.isSelected;\n };\n\n const isSelected = getIsSelected();\n\n React.useEffect(() => {\n validateActionListItemProps({\n leading: props.leading,\n trailing: props.trailing,\n titleSuffix: props.titleSuffix,\n });\n }, [props.leading, props.trailing, props.titleSuffix]);\n\n React.useEffect(() => {\n if (__DEV__) {\n if (\n dropdownTriggerer === dropdownComponentIds.triggers.SelectInput &&\n props.intent === 'negative'\n ) {\n throwBladeError({\n message:\n 'negative intent ActionListItem cannot be used inside Dropdown with SelectInput trigger',\n moduleName: 'ActionListItem',\n });\n }\n }\n }, [props.intent, dropdownTriggerer]);\n\n return (\n <ActionListItemContext.Provider value={{ intent: props.intent, isDisabled: props.isDisabled }}>\n <StyledActionListItem\n isVisible={hasAutoComplete && filteredValues ? filteredValues.includes(props.value) : true}\n as={!isReactNative() ? renderOnWebAs : undefined}\n id={`${dropdownBaseId}-${props._index}`}\n type=\"button\"\n tabIndex={-1}\n href={props.href}\n target={props.target}\n className={activeIndex === props._index ? 'active-focus' : ''}\n {...makeAccessible({\n selected: isSelected,\n current: isRoleMenu(dropdownTriggerer) ? isSelected : undefined,\n role: getActionListItemRole(dropdownTriggerer, props.href),\n disabled: props.isDisabled,\n })}\n {...makeActionListItemClickable((e: React.MouseEvent<HTMLButtonElement>): void => {\n if (typeof props._index === 'number') {\n onOptionClick(e, props._index);\n props.onClick?.({ name: props.value, value: isSelected, event: castWebType(e) });\n }\n })}\n {...metaAttribute({ name: MetaConstants.ActionListItem, testID: props.testID })}\n onMouseDown={() => {\n // We want to keep focus on Dropdown's trigger while option is being clicked\n // So We set this flag that ignores the blur animation to avoid the flicker between focus out + focus in\n setShouldIgnoreBlurAnimation(true);\n }}\n onMouseUp={() => {\n // (Contd from above comment...) We set this flag back to false since blur of SelectInput is done calling by this time\n setShouldIgnoreBlurAnimation(false);\n }}\n data-value={props.value}\n data-index={props._index}\n // Custom props for changes in styles\n selectionType={selectionType}\n hasDescription={Boolean(props.description)}\n intent={props.intent}\n isSelected={isSelected}\n isKeydownPressed={isKeydownPressed}\n isMobile={isMobile}\n >\n <ActionListItemBody\n selectionType={selectionType}\n intent={props.intent}\n description={props.description}\n isDisabled={props.isDisabled}\n leading={props.leading}\n trailing={props.trailing}\n title={props.title}\n titleSuffix={props.titleSuffix}\n isSelected={isSelected}\n />\n </StyledActionListItem>\n </ActionListItemContext.Provider>\n );\n};\n\nconst ActionListItem = assignWithoutSideEffects(React.memo(_ActionListItem), {\n componentId: componentIds.ActionListItem,\n displayName: componentIds.ActionListItem,\n});\n\nexport type { ActionListItemProps, ActionListSectionProps };\nexport {\n ActionListItem,\n ActionListItemIcon,\n ActionListItemText,\n ActionListItemBadge,\n ActionListItemBadgeGroup,\n ActionListSection,\n};\n"],"names":["ActionListItemContext","React","createContext","StyledActionListSectionTitle","styled","BaseBox","withConfig","displayName","componentId","props","padding","makeSize","theme","spacing","_ActionListSection","_ref","title","children","testID","_hideDivider","_sectionChildValues","_useDropdown","useDropdown","hasAutoCompleteInBottomSheetHeader","dropdownTriggerer","filteredValues","hasAutoComplete","dropdownComponentIds","triggers","AutoComplete","isSectionVisible","useMemo","visibleActionListItemInSection","find","actionItemValue","includes","Boolean","showDividerInRN","isReactNative","showDividerInAutoComplete","length","_jsxs","_objectSpread","makeAccessible","role","getActionListSectionRole","label","metaAttribute","name","MetaConstants","ActionListSection","_jsx","hidden","Text","color","size","weight","undefined","Divider","marginX","marginY","assignWithoutSideEffects","componentIds","_ActionListItemIcon","_ref2","icon","Icon","_React$useContext","useContext","intent","isDisabled","iconState","concat","ActionListItemIcon","_ActionListItemBadgeGroup","_ref3","Box","display","alignItems","flexDirection","ActionListItemBadgeGroup","_ActionListItemBadge","Badge","marginLeft","ActionListItemBadge","_ActionListItemText","_ref4","_React$useContext2","variant","getNormalTextColor","isMuted","ActionListItemText","makeActionListItemClickable","clickHandler","onPress","onClick","_ActionListItemBody","_ref5","selectionType","description","leading","trailing","titleSuffix","isSelected","_Fragment","justifyContent","maxHeight","pointerEvents","paddingRight","Checkbox","isChecked","tabIndex","paddingLeft","truncateAfterLines","ActionListItemBody","memo","_ActionListItem","_useDropdown2","activeIndex","dropdownBaseId","onOptionClick","selectedIndices","setShouldIgnoreBlurAnimation","isKeydownPressed","_useTheme","useTheme","platform","isMobile","renderOnWebAs","href","getIsSelected","SelectInput","_index","useEffect","validateActionListItemProps","throwBladeError","message","moduleName","Provider","value","StyledActionListItem","isVisible","as","id","type","target","className","selected","current","isRoleMenu","getActionListItemRole","disabled","e","_props$onClick","call","event","castWebType","ActionListItem","onMouseDown","onMouseUp","hasDescription"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4FA,IAAMA,qBAAqB,gBAAGC,cAAK,CAACC,aAAa,CAG9C,EAAE,CAAC,CAAA;AAEN,IAAMC,4BAA4B,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,8CAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAAA,CAAA,CAAC,UAACC,KAAK,EAAA;EAAA,OAAM;AAC/D;IACAC,OAAO,EAAEC,QAAQ,CAACF,KAAK,CAACG,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC,CAAA;GACzC,CAAA;AAAA,CAAC,CAAC,CAAA;AAoBH,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAAC,IAAA,EAM0B;AAAA,EAAA,IALhDC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,MAAM,GAAAH,IAAA,CAANG,MAAM;IACNC,YAAY,GAAAJ,IAAA,CAAZI,YAAY;IACZC,mBAAmB,GAAAL,IAAA,CAAnBK,mBAAmB,CAAA;AAEnB,EAAA,IAAAC,YAAA,GAAkFC,WAAW,EAAE;IAAvFC,kCAAkC,GAAAF,YAAA,CAAlCE,kCAAkC;IAAEC,iBAAiB,GAAAH,YAAA,CAAjBG,iBAAiB;IAAEC,cAAc,GAAAJ,YAAA,CAAdI,cAAc,CAAA;EAC7E,IAAMC,eAAe,GACnBH,kCAAkC,IAClCC,iBAAiB,KAAKG,oBAAoB,CAACC,QAAQ,CAACC,YAAY,CAAA;AAElE,EAAA,IAAMC,gBAAgB,GAAG7B,cAAK,CAAC8B,OAAO,CAAC,YAAM;AAC3C,IAAA,IAAIL,eAAe,EAAE;MACnB,IAAMM,8BAA8B,GAAGZ,mBAAmB,KAAnBA,IAAAA,IAAAA,mBAAmB,KAAnBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,mBAAmB,CAAEa,IAAI,CAAC,UAACC,eAAe,EAAA;AAAA,QAAA,OAC/ET,cAAc,CAACU,QAAQ,CAACD,eAAe,CAAC,CAAA;AAAA,OAC1C,CAAC,CAAA;MAED,OAAOE,OAAO,CAACJ,8BAA8B,CAAC,CAAA;AAChD,KAAA;AAEA,IAAA,OAAO,IAAI,CAAA;GACZ,EAAE,CAACZ,mBAAmB,EAAEM,eAAe,EAAED,cAAc,CAAC,CAAC,CAAA;EAE1D,IAAMY,eAAe,GAAG,EAAElB,YAAY,IAAImB,aAAa,EAAE,CAAC,CAAA;AAC1D,EAAA,IAAMC,yBAAyB,GAAGb,eAAe,GAC7CI,gBAAgB,IAAIL,cAAc,CAACe,MAAM,GAAG,CAAC,GAC7C,IAAI,CAAA;EAER,oBACEC,IAAA,CAACpC,OAAO,EAAAqC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CACFC,EAAAA,EAAAA,cAAc,CAAC;IACjBC,IAAI,EAAEC,wBAAwB,EAAE;AAChCC,IAAAA,KAAK,EAAE9B,KAAAA;GACR,CAAC,CACE+B,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,iBAAiB;AAAEhC,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAD,IAAAA,QAAA,EAGnEa,CAAAA,gBAAgB,gBACfqB,GAAA,CAAChD,4BAA4B,EAAAuC,aAAA,CAAAA,aAAA,CAAKC,EAAAA,EAAAA,cAAc,CAAC;AAAES,MAAAA,MAAM,EAAE,IAAA;AAAK,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;MAAAnC,QAAA,eAChEkC,GAAA,CAACE,IAAI,EAAA;AAACC,QAAAA,KAAK,EAAC,yBAAyB;AAACC,QAAAA,IAAI,EAAC,OAAO;AAACC,QAAAA,MAAM,EAAC,UAAU;AAAAvC,QAAAA,QAAA,EACjED,KAAAA;OACG,CAAA;AAAC,KAAA,CACqB,CAAC,GAC7B,IAAI,eACRmC,GAAA,CAAC9C,OAAO,EAAAqC,aAAA,CAAAA,aAAA,CAAA,EAAA,EACFC,cAAc,CAAC;AACjB;AACA;AACAC,MAAAA,IAAI,EAAEN,aAAa,EAAE,GAAGmB,SAAS,GAAG,SAAA;AACtC,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAxC,MAAAA,QAAA,EAEDA,QAAAA;KACM,CAAA,CAAC,EACTsB,yBAAyB,IAAIF,eAAe,gBAC3Cc,GAAA,CAACO,OAAO,EAAA;AAACC,MAAAA,OAAO,EAAC,WAAW;AAACC,MAAAA,OAAO,EAAC,WAAA;KAAa,CAAC,GACjD,IAAI,CAAA;AAAA,GAAA,CACD,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAMV,iBAAiB,gBAAGW,wBAAwB,CAAC/C,kBAAkB,EAAE;EACrEN,WAAW,EAAEsD,YAAY,CAACZ,iBAAAA;AAC5B,CAAC,EAAC;AAEF,IAAMa,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,KAAA,EAA8D;AAAA,EAAA,IAAxDC,IAAI,GAAAD,KAAA,CAAJC,IAAI,CAAA;EACjC,IAAMC,IAAI,GAAGD,IAAI,CAAA;AACjB,EAAA,IAAAE,iBAAA,GAA+BlE,cAAK,CAACmE,UAAU,CAACpE,qBAAqB,CAAC;IAA9DqE,MAAM,GAAAF,iBAAA,CAANE,MAAM;IAAEC,UAAU,GAAAH,iBAAA,CAAVG,UAAU,CAAA;AAC1B,EAAA,IAAMC,SAAS,GAAGD,UAAU,GAAG,UAAU,GAAG,OAAO,CAAA;EACnD,oBACEnB,GAAA,CAACe,IAAI,EAAA;IACHZ,KAAK,EACHe,MAAM,KAAK,UAAU,GACjB,gCAAgC,GAAAG,wBAAAA,CAAAA,MAAA,CACPD,SAAS,CACvC;AACDhB,IAAAA,IAAI,EAAC,QAAA;AAAQ,GACd,CAAC,CAAA;AAEN,CAAC,CAAA;AAED,IAAMkB,kBAAkB,gBAAGZ,wBAAwB,CAACE,mBAAmB,EAAE;EACvEvD,WAAW,EAAEsD,YAAY,CAACW,kBAAAA;AAC5B,CAAC,EAAC;AAEF,IAAMC,yBAAyB,GAAG,SAA5BA,yBAAyBA,CAAAC,KAAA,EAIL;AAAA,EAAA,IAHxB1D,QAAQ,GAAA0D,KAAA,CAAR1D,QAAQ,CAAA;EAIR,oBACEkC,GAAA,CAACyB,GAAG,EAAA;AAACC,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,UAAU,EAAC,QAAQ;AAACC,IAAAA,aAAa,EAAC,KAAK;AAAA9D,IAAAA,QAAA,EACxDA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAM+D,wBAAwB,gBAAGnB,wBAAwB,CAACa,yBAAyB,EAAE;EACnFlE,WAAW,EAAEsD,YAAY,CAACkB,wBAAAA;AAC5B,CAAC,EAAC;AAEF,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIxE,KAAiB,EAAyB;AACtE,EAAA,oBAAO0C,GAAA,CAAC+B,KAAK,EAAAxC,aAAA,CAAA;AAACa,IAAAA,IAAI,EAAC,QAAQ;AAAC4B,IAAAA,UAAU,EAAC,WAAA;GAAgB1E,EAAAA,KAAK,CAAG,CAAC,CAAA;AAClE,CAAC,CAAA;AAED,IAAM2E,mBAAmB,gBAAGvB,wBAAwB,CAACoB,oBAAoB,EAAE;EACzEzE,WAAW,EAAEsD,YAAY,CAACsB,mBAAAA;AAC5B,CAAC,EAAC;AAEF,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,KAAA,EAIC;AAAA,EAAA,IAHxBrE,QAAQ,GAAAqE,KAAA,CAARrE,QAAQ,CAAA;AAIR,EAAA,IAAAsE,kBAAA,GAAuBtF,cAAK,CAACmE,UAAU,CAACpE,qBAAqB,CAAC;IAAtDsE,UAAU,GAAAiB,kBAAA,CAAVjB,UAAU,CAAA;EAElB,oBACEnB,GAAA,CAACE,IAAI,EAAA;AAACmC,IAAAA,OAAO,EAAC,SAAS;AAAClC,IAAAA,KAAK,EAAEmC,kBAAkB,CAACnB,UAAU,EAAE;AAAEoB,MAAAA,OAAO,EAAE,IAAA;AAAK,KAAC,CAAE;AAAAzE,IAAAA,QAAA,EAC9EA,QAAAA;AAAQ,GACL,CAAC,CAAA;AAEX,CAAC,CAAA;AAED,IAAM0E,kBAAkB,gBAAG9B,wBAAwB,CAACwB,mBAAmB,EAAE;EACvE7E,WAAW,EAAEsD,YAAY,CAAC6B,kBAAAA;AAC5B,CAAC,EAAC;AAIF,IAAMC,2BAA2B,GAAG,SAA9BA,2BAA2BA,CAC/BC,YAA8B,EACqD;EACnF,IAAIvD,aAAa,EAAE,EAAE;AACnB;AACA;IACA,OAAO;AAAEwD,MAAAA,OAAO,EAAED,YAAAA;KAAc,CAAA;AAClC,GAAA;EAEA,OAAO;AACLE,IAAAA,OAAO,EAAEF,YAAAA;GACV,CAAA;AACH,CAAC,CAAA;AAED,IAAMG,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,KAAA,EAgBC;AAAA,EAAA,IAfxBC,aAAa,GAAAD,KAAA,CAAbC,aAAa;IACb7B,MAAM,GAAA4B,KAAA,CAAN5B,MAAM;IACN8B,WAAW,GAAAF,KAAA,CAAXE,WAAW;IACX7B,UAAU,GAAA2B,KAAA,CAAV3B,UAAU;IACV8B,OAAO,GAAAH,KAAA,CAAPG,OAAO;IACPC,QAAQ,GAAAJ,KAAA,CAARI,QAAQ;IACRrF,KAAK,GAAAiF,KAAA,CAALjF,KAAK;IACLsF,WAAW,GAAAL,KAAA,CAAXK,WAAW;IACXC,UAAU,GAAAN,KAAA,CAAVM,UAAU,CAAA;EAQV,oBACE9D,IAAA,CAAA+D,QAAA,EAAA;IAAAvF,QAAA,EAAA,cACEwB,IAAA,CAACpC,OAAO,EAAA;AACNwE,MAAAA,OAAO,EAAC,MAAM;AACd4B,MAAAA,cAAc,EAAC,QAAQ;AACvB1B,MAAAA,aAAa,EAAC,KAAK;AACnBD,MAAAA,UAAU,EAAC,QAAQ;AACnB4B,MAAAA,SAAS,EAAEpE,aAAa,EAAE,GAAGmB,SAAS,GAAG9C,QAAQ,CAAC4C,IAAI,CAAC,EAAE,CAAC,CAAE;MAAAtC,QAAA,EAAA,cAE5DkC,GAAA,CAAC9C,OAAO,EAAA;AAACwE,QAAAA,OAAO,EAAC,MAAM;AAAC4B,QAAAA,cAAc,EAAC,QAAQ;AAAC3B,QAAAA,UAAU,EAAC,QAAQ;QAAA7D,QAAA,EAChEiF,aAAa,KAAK,UAAU;AAAA;AAC3B;AACA/C,QAAAA,GAAA,CAAC9C,OAAO,EAAAqC,aAAA,CAAAA,aAAA,CAAA;AACNiE,UAAAA,aAAa,EAAC,MAAM;AACpBC,UAAAA,YAAY,EAAC,WAAA;AAAW,SAAA,EACpBjE,cAAc,CAAC;AACjBS,UAAAA,MAAM,EAAE,IAAA;AACV,SAAC,CAAC,CAAA,EAAA,EAAA,EAAA;UAAAnC,QAAA,eAEFkC,GAAA,CAAC0D,QAAQ,EAAA;AAACC,YAAAA,SAAS,EAAEP,UAAW;YAACQ,QAAQ,EAAE,CAAC,CAAE;AAACzC,YAAAA,UAAU,EAAEA,UAAW;AAAArD,YAAAA,QAAA,EAKnE,IAAA;WACO,CAAA;AAAC,SAAA,CACJ,CAAC,GAEVmF,OAAAA;AACD,OACM,CAAC,eACV3D,IAAA,CAACpC,OAAO,EAAA;QACN2G,WAAW,EAAEd,aAAa,KAAK,UAAU,IAAI,CAACE,OAAO,GAAG,WAAW,GAAG,WAAY;AAClFQ,QAAAA,YAAY,EAAC,WAAW;AACxB/B,QAAAA,OAAO,EAAC,MAAM;AACdC,QAAAA,UAAU,EAAC,QAAQ;AACnBC,QAAAA,aAAa,EAAC,KAAK;QAAA9D,QAAA,EAAA,cAEnBkC,GAAA,CAACE,IAAI,EAAA;AACH4D,UAAAA,kBAAkB,EAAE,CAAE;UACtB3D,KAAK,EACHe,MAAM,KAAK,UAAU,GACjB,gCAAgC,GAChCoB,kBAAkB,CAACnB,UAAU,CAClC;AAAArD,UAAAA,QAAA,EAEAD,KAAAA;SACG,CAAC,EACNsF,WAAW,CAAA;AAAA,OACL,CAAC,eACVnD,GAAA,CAAC9C,OAAO,EAAA;AAAC8E,QAAAA,UAAU,EAAC,MAAM;AAAAlE,QAAAA,QAAA,EAAEoF,QAAAA;AAAQ,OAAU,CAAC,CAAA;AAAA,KACxC,CAAC,eACVlD,GAAA,CAAC9C,OAAO,EAAA;MAAC2G,WAAW,EAAEZ,OAAO,IAAIF,aAAa,KAAK,UAAU,GAAG,WAAW,GAAGzC,SAAU;AAAAxC,MAAAA,QAAA,EACrFkF,WAAW,gBACVhD,GAAA,CAACE,IAAI,EAAA;AAACC,QAAAA,KAAK,EAAEmC,kBAAkB,CAACnB,UAAU,EAAE;AAAEoB,UAAAA,OAAO,EAAE,IAAA;AAAK,SAAC,CAAE;AAACnC,QAAAA,IAAI,EAAC,OAAO;AAAAtC,QAAAA,QAAA,EACzEkF,WAAAA;AAAW,OACR,CAAC,GACL,IAAA;AAAI,KACD,CAAC,CAAA;AAAA,GACV,CAAC,CAAA;AAEP,CAAC,CAAA;AAED,IAAMe,kBAAkB,gBAAGjH,cAAK,CAACkH,IAAI,CAACnB,mBAAmB,CAAC,CAAA;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMoB,eAAe,GAAG,SAAlBA,eAAeA,CAAI3G,KAA0B,EAAyB;AAC1E,EAAA,IAAA4G,aAAA,GAWI/F,WAAW,EAAE;IAVfgG,WAAW,GAAAD,aAAA,CAAXC,WAAW;IACXC,cAAc,GAAAF,aAAA,CAAdE,cAAc;IACdC,aAAa,GAAAH,aAAA,CAAbG,aAAa;IACbC,eAAe,GAAAJ,aAAA,CAAfI,eAAe;IACfC,4BAA4B,GAAAL,aAAA,CAA5BK,4BAA4B;IAC5BxB,aAAa,GAAAmB,aAAA,CAAbnB,aAAa;IACb1E,iBAAiB,GAAA6F,aAAA,CAAjB7F,iBAAiB;IACjBmG,gBAAgB,GAAAN,aAAA,CAAhBM,gBAAgB;IAChBlG,cAAc,GAAA4F,aAAA,CAAd5F,cAAc;IACdF,kCAAkC,GAAA8F,aAAA,CAAlC9F,kCAAkC,CAAA;AAGpC,EAAA,IAAAqG,SAAA,GAAqBC,QAAQ,EAAE;IAAvBC,QAAQ,GAAAF,SAAA,CAARE,QAAQ,CAAA;AAChB,EAAA,IAAMC,QAAQ,GAAGD,QAAQ,KAAK,UAAU,CAAA;EACxC,IAAMpG,eAAe,GACnBH,kCAAkC,IAClCC,iBAAiB,KAAKG,oBAAoB,CAACC,QAAQ,CAACC,YAAY,CAAA;EAElE,IAAMmG,aAAa,GAAGvH,KAAK,CAACwH,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAA;;AAEjD;AACF;AACA;AACA;AACA;AACA;AACE,EAAA,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,GAA8B;IAC/C,IAAI1G,iBAAiB,KAAKG,oBAAoB,CAACC,QAAQ,CAACuG,WAAW,IAAIzG,eAAe,EAAE;AACtF,MAAA,IAAI,OAAOjB,KAAK,CAAC2H,MAAM,KAAK,QAAQ,EAAE;AACpC,QAAA,OAAOX,eAAe,CAACtF,QAAQ,CAAC1B,KAAK,CAAC2H,MAAM,CAAC,CAAA;AAC/C,OAAA;AAEA,MAAA,OAAO3E,SAAS,CAAA;AAClB,KAAA;IAEA,OAAOhD,KAAK,CAAC8F,UAAU,CAAA;GACxB,CAAA;AAED,EAAA,IAAMA,UAAU,GAAG2B,aAAa,EAAE,CAAA;EAElCjI,cAAK,CAACoI,SAAS,CAAC,YAAM;AACpBC,IAAAA,2BAA2B,CAAC;MAC1BlC,OAAO,EAAE3F,KAAK,CAAC2F,OAAO;MACtBC,QAAQ,EAAE5F,KAAK,CAAC4F,QAAQ;MACxBC,WAAW,EAAE7F,KAAK,CAAC6F,WAAAA;AACrB,KAAC,CAAC,CAAA;AACJ,GAAC,EAAE,CAAC7F,KAAK,CAAC2F,OAAO,EAAE3F,KAAK,CAAC4F,QAAQ,EAAE5F,KAAK,CAAC6F,WAAW,CAAC,CAAC,CAAA;EAEtDrG,cAAK,CAACoI,SAAS,CAAC,YAAM;AACpB,IAAA,IAAI,KAAO,EAAE;AACX,MAAA,IACE7G,iBAAiB,KAAKG,oBAAoB,CAACC,QAAQ,CAACuG,WAAW,IAC/D1H,KAAK,CAAC4D,MAAM,KAAK,UAAU,EAC3B;AACAkE,QAAAA,eAAe,CAAC;AACdC,UAAAA,OAAO,EACL,wFAAwF;AAC1FC,UAAAA,UAAU,EAAE,gBAAA;AACd,SAAC,CAAC,CAAA;AACJ,OAAA;AACF,KAAA;GACD,EAAE,CAAChI,KAAK,CAAC4D,MAAM,EAAE7C,iBAAiB,CAAC,CAAC,CAAA;AAErC,EAAA,oBACE2B,GAAA,CAACnD,qBAAqB,CAAC0I,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAE;MAAEtE,MAAM,EAAE5D,KAAK,CAAC4D,MAAM;MAAEC,UAAU,EAAE7D,KAAK,CAAC6D,UAAAA;KAAa;IAAArD,QAAA,eAC5FkC,GAAA,CAACyF,oBAAoB,EAAAlG,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACnBmG,MAAAA,SAAS,EAAEnH,eAAe,IAAID,cAAc,GAAGA,cAAc,CAACU,QAAQ,CAAC1B,KAAK,CAACkI,KAAK,CAAC,GAAG,IAAK;MAC3FG,EAAE,EAAE,CAACxG,aAAa,EAAE,GAAG0F,aAAa,GAAGvE,SAAU;MACjDsF,EAAE,EAAA,EAAA,CAAAvE,MAAA,CAAK+C,cAAc,EAAA,GAAA,CAAA,CAAA/C,MAAA,CAAI/D,KAAK,CAAC2H,MAAM,CAAG;AACxCY,MAAAA,IAAI,EAAC,QAAQ;MACbjC,QAAQ,EAAE,CAAC,CAAE;MACbkB,IAAI,EAAExH,KAAK,CAACwH,IAAK;MACjBgB,MAAM,EAAExI,KAAK,CAACwI,MAAO;MACrBC,SAAS,EAAE5B,WAAW,KAAK7G,KAAK,CAAC2H,MAAM,GAAG,cAAc,GAAG,EAAA;AAAG,KAAA,EAC1DzF,cAAc,CAAC;AACjBwG,MAAAA,QAAQ,EAAE5C,UAAU;MACpB6C,OAAO,EAAEC,UAAU,CAAC7H,iBAAiB,CAAC,GAAG+E,UAAU,GAAG9C,SAAS;MAC/Db,IAAI,EAAE0G,qBAAqB,CAAC9H,iBAAiB,EAAEf,KAAK,CAACwH,IAAI,CAAC;MAC1DsB,QAAQ,EAAE9I,KAAK,CAAC6D,UAAAA;AAClB,KAAC,CAAC,CACEsB,EAAAA,2BAA2B,CAAC,UAAC4D,CAAsC,EAAW;AAChF,MAAA,IAAI,OAAO/I,KAAK,CAAC2H,MAAM,KAAK,QAAQ,EAAE;AAAA,QAAA,IAAAqB,cAAA,CAAA;AACpCjC,QAAAA,aAAa,CAACgC,CAAC,EAAE/I,KAAK,CAAC2H,MAAM,CAAC,CAAA;AAC9B,QAAA,CAAAqB,cAAA,GAAAhJ,KAAK,CAACsF,OAAO,MAAA,IAAA,IAAA0D,cAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAbA,cAAA,CAAAC,IAAA,CAAAjJ,KAAK,EAAW;UAAEuC,IAAI,EAAEvC,KAAK,CAACkI,KAAK;AAAEA,UAAAA,KAAK,EAAEpC,UAAU;UAAEoD,KAAK,EAAEC,WAAW,CAACJ,CAAC,CAAA;AAAE,SAAC,CAAC,CAAA;AAClF,OAAA;KACD,CAAC,CACEzG,EAAAA,aAAa,CAAC;MAAEC,IAAI,EAAEC,aAAa,CAAC4G,cAAc;MAAE3I,MAAM,EAAET,KAAK,CAACS,MAAAA;AAAO,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;MAC/E4I,WAAW,EAAE,SAAAA,WAAAA,GAAM;AACjB;AACA;QACApC,4BAA4B,CAAC,IAAI,CAAC,CAAA;OAClC;MACFqC,SAAS,EAAE,SAAAA,SAAAA,GAAM;AACf;QACArC,4BAA4B,CAAC,KAAK,CAAC,CAAA;OACnC;MACF,YAAYjH,EAAAA,KAAK,CAACkI,KAAM;AACxB,MAAA,YAAA,EAAYlI,KAAK,CAAC2H,MAAAA;AAClB;AAAA;AACAlC,MAAAA,aAAa,EAAEA,aAAc;AAC7B8D,MAAAA,cAAc,EAAE5H,OAAO,CAAC3B,KAAK,CAAC0F,WAAW,CAAE;MAC3C9B,MAAM,EAAE5D,KAAK,CAAC4D,MAAO;AACrBkC,MAAAA,UAAU,EAAEA,UAAW;AACvBoB,MAAAA,gBAAgB,EAAEA,gBAAiB;AACnCI,MAAAA,QAAQ,EAAEA,QAAS;MAAA9G,QAAA,eAEnBkC,GAAA,CAAC+D,kBAAkB,EAAA;AACjBhB,QAAAA,aAAa,EAAEA,aAAc;QAC7B7B,MAAM,EAAE5D,KAAK,CAAC4D,MAAO;QACrB8B,WAAW,EAAE1F,KAAK,CAAC0F,WAAY;QAC/B7B,UAAU,EAAE7D,KAAK,CAAC6D,UAAW;QAC7B8B,OAAO,EAAE3F,KAAK,CAAC2F,OAAQ;QACvBC,QAAQ,EAAE5F,KAAK,CAAC4F,QAAS;QACzBrF,KAAK,EAAEP,KAAK,CAACO,KAAM;QACnBsF,WAAW,EAAE7F,KAAK,CAAC6F,WAAY;AAC/BC,QAAAA,UAAU,EAAEA,UAAAA;OACb,CAAA;KACmB,CAAA,CAAA;AAAC,GACO,CAAC,CAAA;AAErC,CAAC,CAAA;AAEKsD,IAAAA,cAAc,gBAAGhG,wBAAwB,eAAC5D,cAAK,CAACkH,IAAI,CAACC,eAAe,CAAC,EAAE;EAC3E5G,WAAW,EAAEsD,YAAY,CAAC+F,cAAc;EACxCtJ,WAAW,EAAEuD,YAAY,CAAC+F,cAAAA;AAC5B,CAAC;;;;"}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
3
|
+
import 'react';
|
|
4
|
+
import { StyledAvatar } from './StyledAvatar.js';
|
|
5
|
+
import { useAvatarGroupContext } from './AvatarGroupContext.js';
|
|
6
|
+
import { AvatarButton } from './AvatarButton.js';
|
|
7
|
+
import '../Box/styledProps/index.js';
|
|
8
|
+
import '../../utils/metaAttribute/index.js';
|
|
9
|
+
import '../../utils/assignWithoutSideEffects/index.js';
|
|
10
|
+
import '../../utils/logger/index.js';
|
|
11
|
+
import '../Icons/index.js';
|
|
12
|
+
import { jsx } from 'react/jsx-runtime';
|
|
13
|
+
import { throwBladeError } from '../../utils/logger/logger.js';
|
|
14
|
+
import UserIcon from '../Icons/UserIcon/UserIcon.js';
|
|
15
|
+
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
|
|
16
|
+
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
|
|
17
|
+
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
|
|
18
|
+
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
|
|
19
|
+
|
|
20
|
+
var _excluded = ["name", "color", "size", "variant", "icon", "href", "target", "rel", "src", "alt", "srcSet", "crossOrigin", "referrerPolicy", "testID"];
|
|
21
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
22
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
23
|
+
var getInitials = function getInitials(name) {
|
|
24
|
+
// Combine first and last name initials
|
|
25
|
+
var names = name.trim().toUpperCase().split(' ');
|
|
26
|
+
if (names.length === 1) {
|
|
27
|
+
return names[0].substring(0, 2);
|
|
28
|
+
}
|
|
29
|
+
return names[0][0] + names[names.length - 1][0];
|
|
30
|
+
};
|
|
31
|
+
var _Avatar = function _Avatar(_ref) {
|
|
32
|
+
var _groupProps$size;
|
|
33
|
+
var name = _ref.name,
|
|
34
|
+
_ref$color = _ref.color,
|
|
35
|
+
color = _ref$color === void 0 ? 'neutral' : _ref$color,
|
|
36
|
+
_ref$size = _ref.size,
|
|
37
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
38
|
+
_ref$variant = _ref.variant,
|
|
39
|
+
variant = _ref$variant === void 0 ? 'circle' : _ref$variant,
|
|
40
|
+
icon = _ref.icon,
|
|
41
|
+
href = _ref.href,
|
|
42
|
+
target = _ref.target,
|
|
43
|
+
rel = _ref.rel,
|
|
44
|
+
src = _ref.src,
|
|
45
|
+
alt = _ref.alt,
|
|
46
|
+
srcSet = _ref.srcSet,
|
|
47
|
+
crossOrigin = _ref.crossOrigin,
|
|
48
|
+
referrerPolicy = _ref.referrerPolicy,
|
|
49
|
+
testID = _ref.testID,
|
|
50
|
+
styledProps = _objectWithoutProperties(_ref, _excluded);
|
|
51
|
+
if (false) {
|
|
52
|
+
if (src && !alt && !name) {
|
|
53
|
+
throwBladeError({
|
|
54
|
+
moduleName: 'Avatar',
|
|
55
|
+
message: '"alt" or "name" prop is required when the "src" prop is provided.'
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
var groupProps = useAvatarGroupContext();
|
|
60
|
+
var avatarSize = (_groupProps$size = groupProps === null || groupProps === void 0 ? void 0 : groupProps.size) !== null && _groupProps$size !== void 0 ? _groupProps$size : size;
|
|
61
|
+
var commonButtonProps = {
|
|
62
|
+
variant: variant,
|
|
63
|
+
color: color,
|
|
64
|
+
size: avatarSize,
|
|
65
|
+
href: href,
|
|
66
|
+
target: target,
|
|
67
|
+
rel: rel
|
|
68
|
+
};
|
|
69
|
+
var getChildrenToRender = function getChildrenToRender() {
|
|
70
|
+
if (src) {
|
|
71
|
+
return /*#__PURE__*/jsx(AvatarButton, _objectSpread(_objectSpread({}, commonButtonProps), {}, {
|
|
72
|
+
imgProps: {
|
|
73
|
+
src: src,
|
|
74
|
+
alt: alt !== null && alt !== void 0 ? alt : name,
|
|
75
|
+
srcSet: srcSet,
|
|
76
|
+
crossOrigin: crossOrigin,
|
|
77
|
+
referrerPolicy: referrerPolicy
|
|
78
|
+
}
|
|
79
|
+
}));
|
|
80
|
+
}
|
|
81
|
+
if (name && !src) {
|
|
82
|
+
return /*#__PURE__*/jsx(AvatarButton, _objectSpread(_objectSpread({}, commonButtonProps), {}, {
|
|
83
|
+
children: getInitials(name)
|
|
84
|
+
}));
|
|
85
|
+
}
|
|
86
|
+
return /*#__PURE__*/jsx(AvatarButton, _objectSpread(_objectSpread({}, commonButtonProps), {}, {
|
|
87
|
+
icon: icon !== null && icon !== void 0 ? icon : UserIcon
|
|
88
|
+
}));
|
|
89
|
+
};
|
|
90
|
+
return /*#__PURE__*/jsx(StyledAvatar, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
|
|
91
|
+
name: MetaConstants.Avatar,
|
|
92
|
+
testID: testID
|
|
93
|
+
})), getStyledProps(styledProps)), {}, {
|
|
94
|
+
backgroundColor: "surface.background.gray.intense",
|
|
95
|
+
variant: variant,
|
|
96
|
+
size: avatarSize,
|
|
97
|
+
children: getChildrenToRender()
|
|
98
|
+
}));
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
/**
|
|
102
|
+
* ### Avatar Component
|
|
103
|
+
*
|
|
104
|
+
* An avatar component is a standardized visual representation of a user or entity.
|
|
105
|
+
*
|
|
106
|
+
* ---
|
|
107
|
+
*
|
|
108
|
+
* #### Usage
|
|
109
|
+
*
|
|
110
|
+
* ```jsx
|
|
111
|
+
<Avatar name="Nitin Kumar" src="https://avatars.githubusercontent.com/u/46647141?v=4" />
|
|
112
|
+
* ```
|
|
113
|
+
*
|
|
114
|
+
* ---
|
|
115
|
+
*
|
|
116
|
+
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-avatar-avatar Avatar Documentation}
|
|
117
|
+
*
|
|
118
|
+
*/
|
|
119
|
+
var Avatar = /*#__PURE__*/assignWithoutSideEffects(_Avatar, {
|
|
120
|
+
displayName: 'Avatar',
|
|
121
|
+
componentId: 'Avatar'
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
export { Avatar };
|
|
125
|
+
//# sourceMappingURL=Avatar.web.js.map
|
|
@@ -0,0 +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';\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 = ({\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 ...styledProps\n}: AvatarProps): 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 };\n\n const getChildrenToRender = (): React.ReactElement => {\n if (src) {\n return (\n <AvatarButton\n {...commonButtonProps}\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 <AvatarButton {...commonButtonProps}>{getInitials(name)}</AvatarButton>;\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(_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","_groupProps$size","_ref$color","color","_ref$size","size","_ref$variant","variant","icon","href","target","rel","src","alt","srcSet","crossOrigin","referrerPolicy","testID","styledProps","_objectWithoutProperties","_excluded","throwBladeError","moduleName","message","groupProps","useAvatarGroupContext","avatarSize","commonButtonProps","getChildrenToRender","_jsx","AvatarButton","_objectSpread","imgProps","children","UserIcon","StyledAvatar","metaAttribute","MetaConstants","Avatar","getStyledProps","backgroundColor","assignWithoutSideEffects","displayName","componentId"],"mappings":"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"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
|
+
import 'react';
|
|
3
|
+
import { StyledAvatarButton } from './StyledAvatarButton.js';
|
|
4
|
+
import { avatarIconSizeTokens, avatarTextSizeMapping } from './avatarTokens.js';
|
|
5
|
+
import '../Box/BaseBox/index.js';
|
|
6
|
+
import '../../utils/makeAccessible/index.js';
|
|
7
|
+
import '../Typography/index.js';
|
|
8
|
+
import { getTextColorToken } from '../Button/BaseButton/BaseButton.js';
|
|
9
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
10
|
+
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
|
|
11
|
+
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
|
|
12
|
+
import { Heading } from '../Typography/Heading/Heading.js';
|
|
13
|
+
import { Text } from '../Typography/Text/Text.js';
|
|
14
|
+
|
|
15
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
16
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
17
|
+
var AvatarButton = function AvatarButton(_ref) {
|
|
18
|
+
var href = _ref.href,
|
|
19
|
+
target = _ref.target,
|
|
20
|
+
rel = _ref.rel,
|
|
21
|
+
_ref$variant = _ref.variant,
|
|
22
|
+
variant = _ref$variant === void 0 ? 'circle' : _ref$variant,
|
|
23
|
+
_ref$color = _ref.color,
|
|
24
|
+
color = _ref$color === void 0 ? 'neutral' : _ref$color,
|
|
25
|
+
_ref$size = _ref.size,
|
|
26
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
27
|
+
Icon = _ref.icon,
|
|
28
|
+
imgProps = _ref.imgProps,
|
|
29
|
+
children = _ref.children;
|
|
30
|
+
var isLink = Boolean(href);
|
|
31
|
+
var defaultRel = target === '_blank' ? 'noreferrer noopener' : undefined;
|
|
32
|
+
var iconColor = getTextColorToken({
|
|
33
|
+
property: 'icon',
|
|
34
|
+
variant: 'secondary',
|
|
35
|
+
color: color,
|
|
36
|
+
state: 'default'
|
|
37
|
+
});
|
|
38
|
+
var textColor = getTextColorToken({
|
|
39
|
+
property: 'text',
|
|
40
|
+
variant: 'secondary',
|
|
41
|
+
color: color,
|
|
42
|
+
state: 'default'
|
|
43
|
+
});
|
|
44
|
+
return /*#__PURE__*/jsx(StyledAvatarButton, {
|
|
45
|
+
as: href ? 'a' : 'button',
|
|
46
|
+
size: size,
|
|
47
|
+
color: color,
|
|
48
|
+
href: href,
|
|
49
|
+
variant: variant,
|
|
50
|
+
target: target,
|
|
51
|
+
rel: rel !== null && rel !== void 0 ? rel : defaultRel,
|
|
52
|
+
accessibilityProps: _objectSpread({}, makeAccessible({
|
|
53
|
+
role: isLink ? 'link' : 'button'
|
|
54
|
+
})),
|
|
55
|
+
children: /*#__PURE__*/jsxs(BaseBox, {
|
|
56
|
+
display: "flex",
|
|
57
|
+
flexDirection: "row",
|
|
58
|
+
alignItems: "center",
|
|
59
|
+
justifyContent: "center",
|
|
60
|
+
zIndex: 1,
|
|
61
|
+
height: "100%",
|
|
62
|
+
children: [Icon ? /*#__PURE__*/jsx(BaseBox, {
|
|
63
|
+
display: "flex",
|
|
64
|
+
justifyContent: "center",
|
|
65
|
+
alignItems: "center",
|
|
66
|
+
children: /*#__PURE__*/jsx(Icon, {
|
|
67
|
+
size: avatarIconSizeTokens[size],
|
|
68
|
+
color: iconColor
|
|
69
|
+
})
|
|
70
|
+
}) : null, imgProps !== null && imgProps !== void 0 && imgProps.src ? /*#__PURE__*/jsx("img", _objectSpread({}, imgProps)) : null, size === 'xlarge' ? /*#__PURE__*/jsx(Heading, {
|
|
71
|
+
size: avatarTextSizeMapping[size],
|
|
72
|
+
weight: "semibold",
|
|
73
|
+
color: textColor,
|
|
74
|
+
children: children
|
|
75
|
+
}) : /*#__PURE__*/jsx(Text, {
|
|
76
|
+
size: avatarTextSizeMapping[size],
|
|
77
|
+
weight: "semibold",
|
|
78
|
+
color: textColor,
|
|
79
|
+
children: children
|
|
80
|
+
})]
|
|
81
|
+
})
|
|
82
|
+
});
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
export { AvatarButton };
|
|
86
|
+
//# sourceMappingURL=AvatarButton.js.map
|
|
@@ -0,0 +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';\n\nconst AvatarButton = ({\n href,\n target,\n rel,\n variant = 'circle',\n color = 'neutral',\n size = 'medium',\n icon: Icon,\n imgProps,\n children,\n}: AvatarButtonProps): 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 as={href ? 'a' : 'button'}\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: isLink ? 'link' : 'button',\n }),\n }}\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\nexport { AvatarButton };\n"],"names":["AvatarButton","_ref","href","target","rel","_ref$variant","variant","_ref$color","color","_ref$size","size","Icon","icon","imgProps","children","isLink","Boolean","defaultRel","undefined","iconColor","getTextColorToken","property","state","textColor","_jsx","StyledAvatarButton","as","accessibilityProps","_objectSpread","makeAccessible","role","_jsxs","BaseBox","display","flexDirection","alignItems","justifyContent","zIndex","height","avatarIconSizeTokens","src","Heading","avatarTextSizeMapping","weight","Text"],"mappings":"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"}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
3
|
+
import React__default from 'react';
|
|
4
|
+
import { StyledAvatarGroup } from './StyledAvatarGroup.js';
|
|
5
|
+
import { StyledAvatar } from './StyledAvatar.js';
|
|
6
|
+
import { AvatarGroupProvider } from './AvatarGroupContext.js';
|
|
7
|
+
import { AvatarButton } from './AvatarButton.js';
|
|
8
|
+
import '../Box/styledProps/index.js';
|
|
9
|
+
import '../../utils/metaAttribute/index.js';
|
|
10
|
+
import '../../utils/assignWithoutSideEffects/index.js';
|
|
11
|
+
import '../../utils/logger/index.js';
|
|
12
|
+
import '../../utils/isValidAllowedChildren/index.js';
|
|
13
|
+
import { jsx } from 'react/jsx-runtime';
|
|
14
|
+
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
|
|
15
|
+
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
|
|
16
|
+
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
|
|
17
|
+
import { isValidAllowedChildren } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
|
|
18
|
+
import { throwBladeError } from '../../utils/logger/logger.js';
|
|
19
|
+
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
|
|
20
|
+
|
|
21
|
+
var _excluded = ["children", "size", "maxCount", "testID"];
|
|
22
|
+
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; }
|
|
23
|
+
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; }
|
|
24
|
+
var _AvatarGroup = function _AvatarGroup(_ref) {
|
|
25
|
+
var children = _ref.children,
|
|
26
|
+
_ref$size = _ref.size,
|
|
27
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
28
|
+
maxCount = _ref.maxCount,
|
|
29
|
+
testID = _ref.testID,
|
|
30
|
+
styledProps = _objectWithoutProperties(_ref, _excluded);
|
|
31
|
+
var contextValue = {
|
|
32
|
+
size: size
|
|
33
|
+
};
|
|
34
|
+
var childrenCount = React__default.Children.count(children);
|
|
35
|
+
return /*#__PURE__*/jsx(AvatarGroupProvider, {
|
|
36
|
+
value: contextValue,
|
|
37
|
+
children: /*#__PURE__*/jsx(StyledAvatarGroup, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
|
|
38
|
+
name: MetaConstants.AvatarGroup,
|
|
39
|
+
testID: testID
|
|
40
|
+
})), getStyledProps(styledProps)), {}, {
|
|
41
|
+
role: "group",
|
|
42
|
+
size: size,
|
|
43
|
+
children: React__default.Children.map(children, function (child, index) {
|
|
44
|
+
if (false) {
|
|
45
|
+
// throw error if child is not an Avatar
|
|
46
|
+
if (!isValidAllowedChildren(child, 'Avatar')) {
|
|
47
|
+
throwBladeError({
|
|
48
|
+
moduleName: 'AvatarGroup',
|
|
49
|
+
message: "Only \"Avatar\" component is allowed as a children."
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
if (maxCount && maxCount <= childrenCount) {
|
|
54
|
+
if (index === maxCount) {
|
|
55
|
+
return /*#__PURE__*/jsx(StyledAvatar, _objectSpread(_objectSpread({}, metaAttribute({
|
|
56
|
+
name: MetaConstants.Avatar,
|
|
57
|
+
testID: testID
|
|
58
|
+
})), {}, {
|
|
59
|
+
backgroundColor: "surface.background.gray.intense",
|
|
60
|
+
size: size,
|
|
61
|
+
variant: "circle",
|
|
62
|
+
children: /*#__PURE__*/jsx(AvatarButton, {
|
|
63
|
+
variant: "circle",
|
|
64
|
+
color: "neutral",
|
|
65
|
+
size: size,
|
|
66
|
+
children: "+".concat(String(childrenCount - maxCount))
|
|
67
|
+
})
|
|
68
|
+
}));
|
|
69
|
+
}
|
|
70
|
+
if (index > maxCount) {
|
|
71
|
+
return null;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
return child;
|
|
75
|
+
})
|
|
76
|
+
}))
|
|
77
|
+
});
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
/**
|
|
81
|
+
* ### AvatarGroup Component
|
|
82
|
+
*
|
|
83
|
+
* The AvatarGroup component is used to group Avatars together.
|
|
84
|
+
*
|
|
85
|
+
* ---
|
|
86
|
+
*
|
|
87
|
+
* #### Usage
|
|
88
|
+
*
|
|
89
|
+
* ```jsx
|
|
90
|
+
const App = () => {
|
|
91
|
+
return (
|
|
92
|
+
<AvatarGroup>
|
|
93
|
+
<Avatar name="Kamlesh Chandnani" />
|
|
94
|
+
<Avatar name="Rama Krushna Behera" />
|
|
95
|
+
<Avatar name="Chaitanya Vikas Deorukhkar" />
|
|
96
|
+
<Avatar name="Anurag Hazra" />
|
|
97
|
+
<Avatar name="Nitin Kumar" />
|
|
98
|
+
</AvatarGroup>
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
* ```
|
|
102
|
+
*
|
|
103
|
+
* ---
|
|
104
|
+
*
|
|
105
|
+
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-avatar-avatargroup AvatarGroup Documentation}
|
|
106
|
+
*
|
|
107
|
+
*/
|
|
108
|
+
var AvatarGroup = /*#__PURE__*/assignWithoutSideEffects(_AvatarGroup, {
|
|
109
|
+
displayName: 'AvatarGroup',
|
|
110
|
+
componentId: 'AvatarGroup'
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
export { AvatarGroup };
|
|
114
|
+
//# sourceMappingURL=AvatarGroup.web.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarGroup.web.js","sources":["../../../../../../src/components/Avatar/AvatarGroup.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { AvatarGroupProps, AvatarGroupContextType } from './types';\nimport { StyledAvatarGroup } from './StyledAvatarGroup';\nimport { StyledAvatar } from './StyledAvatar';\nimport { AvatarGroupProvider } 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 { isValidAllowedChildren } from '~utils/isValidAllowedChildren';\n\nconst _AvatarGroup = ({\n children,\n size = 'medium',\n maxCount,\n testID,\n ...styledProps\n}: AvatarGroupProps): React.ReactElement => {\n const contextValue: AvatarGroupContextType = {\n size,\n };\n const childrenCount = React.Children.count(children);\n\n return (\n <AvatarGroupProvider value={contextValue}>\n <StyledAvatarGroup\n {...metaAttribute({ name: MetaConstants.AvatarGroup, testID })}\n {...getStyledProps(styledProps)}\n role=\"group\"\n size={size}\n >\n {React.Children.map(children, (child, index) => {\n if (__DEV__) {\n // throw error if child is not an Avatar\n if (!isValidAllowedChildren(child, 'Avatar')) {\n throwBladeError({\n moduleName: 'AvatarGroup',\n message: `Only \"Avatar\" component is allowed as a children.`,\n });\n }\n }\n\n if (maxCount && maxCount <= childrenCount) {\n if (index === maxCount) {\n return (\n <StyledAvatar\n {...metaAttribute({ name: MetaConstants.Avatar, testID })}\n backgroundColor=\"surface.background.gray.intense\"\n size={size}\n variant=\"circle\"\n >\n <AvatarButton variant=\"circle\" color=\"neutral\" size={size}>\n {`+${String(childrenCount - maxCount)}`}\n </AvatarButton>\n </StyledAvatar>\n );\n }\n\n if (index > maxCount) {\n return null;\n }\n }\n\n return child;\n })}\n </StyledAvatarGroup>\n </AvatarGroupProvider>\n );\n};\n\n/**\n * ### AvatarGroup Component\n * \n * The AvatarGroup component is used to group Avatars together.\n * \n * ---\n * \n * #### Usage\n * \n * ```jsx\n const App = () => {\n return (\n <AvatarGroup>\n <Avatar name=\"Kamlesh Chandnani\" />\n <Avatar name=\"Rama Krushna Behera\" />\n <Avatar name=\"Chaitanya Vikas Deorukhkar\" />\n <Avatar name=\"Anurag Hazra\" />\n <Avatar name=\"Nitin Kumar\" />\n </AvatarGroup>\n );\n }\n * ```\n *\n * ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-avatar-avatargroup AvatarGroup Documentation}\n * \n */\nconst AvatarGroup = assignWithoutSideEffects(_AvatarGroup, {\n displayName: 'AvatarGroup',\n componentId: 'AvatarGroup',\n});\n\nexport { AvatarGroup };\nexport type { AvatarGroupProps };\n"],"names":["_AvatarGroup","_ref","children","_ref$size","size","maxCount","testID","styledProps","_objectWithoutProperties","_excluded","contextValue","childrenCount","React","Children","count","_jsx","AvatarGroupProvider","value","StyledAvatarGroup","_objectSpread","metaAttribute","name","MetaConstants","AvatarGroup","getStyledProps","role","map","child","index","isValidAllowedChildren","throwBladeError","moduleName","message","StyledAvatar","Avatar","backgroundColor","variant","AvatarButton","color","concat","String","assignWithoutSideEffects","displayName","componentId"],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
|
|
3
|
+
var AvatarGroupContext = /*#__PURE__*/React__default.createContext({});
|
|
4
|
+
var AvatarGroupProvider = AvatarGroupContext.Provider;
|
|
5
|
+
var useAvatarGroupContext = function useAvatarGroupContext() {
|
|
6
|
+
var context = React__default.useContext(AvatarGroupContext);
|
|
7
|
+
return context;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export { AvatarGroupProvider, useAvatarGroupContext };
|
|
11
|
+
//# sourceMappingURL=AvatarGroupContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarGroupContext.js","sources":["../../../../../../src/components/Avatar/AvatarGroupContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { AvatarGroupContextType } from './types';\n\nconst AvatarGroupContext = React.createContext<AvatarGroupContextType>({});\nconst AvatarGroupProvider = AvatarGroupContext.Provider;\n\nconst useAvatarGroupContext = (): AvatarGroupContextType => {\n const context = React.useContext(AvatarGroupContext);\n return context;\n};\n\nexport { useAvatarGroupContext, AvatarGroupProvider };\n"],"names":["AvatarGroupContext","React","createContext","AvatarGroupProvider","Provider","useAvatarGroupContext","context","useContext"],"mappings":";;AAGA,IAAMA,kBAAkB,gBAAGC,cAAK,CAACC,aAAa,CAAyB,EAAE,CAAC,CAAA;AAC1E,IAAMC,mBAAmB,GAAGH,kBAAkB,CAACI,SAAQ;AAEvD,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqBA,GAAiC;AAC1D,EAAA,IAAMC,OAAO,GAAGL,cAAK,CAACM,UAAU,CAACP,kBAAkB,CAAC,CAAA;AACpD,EAAA,OAAOM,OAAO,CAAA;AAChB;;;;"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
import { avatarSizeTokens, avatarBorderRadiusTokens } from './avatarTokens.js';
|
|
3
|
+
import '../Box/BaseBox/index.js';
|
|
4
|
+
import '../../utils/index.js';
|
|
5
|
+
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
|
|
6
|
+
import { makeSize } from '../../utils/makeSize/makeSize.js';
|
|
7
|
+
import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
|
|
8
|
+
|
|
9
|
+
var StyledAvatar = /*#__PURE__*/styled(BaseBox).withConfig({
|
|
10
|
+
displayName: "StyledAvatar",
|
|
11
|
+
componentId: "sc-127ewkg-0"
|
|
12
|
+
})(function (_ref) {
|
|
13
|
+
var theme = _ref.theme,
|
|
14
|
+
variant = _ref.variant,
|
|
15
|
+
size = _ref.size;
|
|
16
|
+
return {
|
|
17
|
+
display: 'flex',
|
|
18
|
+
width: makeSize(avatarSizeTokens[size]),
|
|
19
|
+
height: makeSize(avatarSizeTokens[size]),
|
|
20
|
+
borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),
|
|
21
|
+
outline: "".concat(makeBorderSize(theme.border.width.thinner), " solid ").concat(theme.colors.surface.border.gray.subtle),
|
|
22
|
+
'&:hover': {
|
|
23
|
+
outline: "".concat(makeBorderSize(theme.border.width.thick), " solid ").concat(theme.colors.surface.border.gray.muted),
|
|
24
|
+
borderColor: theme.colors.surface.border.gray.muted
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
export { StyledAvatar };
|
|
30
|
+
//# sourceMappingURL=StyledAvatar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StyledAvatar.js","sources":["../../../../../../src/components/Avatar/StyledAvatar.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { StyledAvatarProps } from './types';\nimport { avatarSizeTokens, avatarBorderRadiusTokens } from './avatarTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeBorderSize, makeSize } from '~utils';\n\nconst StyledAvatar = styled(BaseBox)<StyledAvatarProps>(({ theme, variant, size }) => {\n return {\n display: 'flex',\n width: makeSize(avatarSizeTokens[size]),\n height: makeSize(avatarSizeTokens[size]),\n borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),\n outline: `${makeBorderSize(theme.border.width.thinner)} solid ${\n theme.colors.surface.border.gray.subtle\n }`,\n\n '&:hover': {\n outline: `${makeBorderSize(theme.border.width.thick)} solid ${\n theme.colors.surface.border.gray.muted\n }`,\n borderColor: theme.colors.surface.border.gray.muted,\n },\n };\n});\n\nexport { StyledAvatar };\n"],"names":["StyledAvatar","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","variant","size","display","width","makeSize","avatarSizeTokens","height","borderRadius","makeBorderSize","border","radius","avatarBorderRadiusTokens","outline","concat","thinner","colors","surface","gray","subtle","thick","muted","borderColor"],"mappings":";;;;;;;;AAMA,IAAMA,YAAY,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,cAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAoB,CAAA,CAAA,UAAAC,IAAA,EAA8B;AAAA,EAAA,IAA3BC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI,CAAA;EAC7E,OAAO;AACLC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,KAAK,EAAEC,QAAQ,CAACC,gBAAgB,CAACJ,IAAI,CAAC,CAAC;AACvCK,IAAAA,MAAM,EAAEF,QAAQ,CAACC,gBAAgB,CAACJ,IAAI,CAAC,CAAC;AACxCM,IAAAA,YAAY,EAAEC,cAAc,CAACT,KAAK,CAACU,MAAM,CAACC,MAAM,CAACC,wBAAwB,CAACX,OAAO,CAAC,CAAC,CAAC;IACpFY,OAAO,EAAA,EAAA,CAAAC,MAAA,CAAKL,cAAc,CAACT,KAAK,CAACU,MAAM,CAACN,KAAK,CAACW,OAAO,CAAC,EAAAD,SAAAA,CAAAA,CAAAA,MAAA,CACpDd,KAAK,CAACgB,MAAM,CAACC,OAAO,CAACP,MAAM,CAACQ,IAAI,CAACC,MAAM,CACvC;AAEF,IAAA,SAAS,EAAE;MACTN,OAAO,EAAA,EAAA,CAAAC,MAAA,CAAKL,cAAc,CAACT,KAAK,CAACU,MAAM,CAACN,KAAK,CAACgB,KAAK,CAAC,EAAAN,SAAAA,CAAAA,CAAAA,MAAA,CAClDd,KAAK,CAACgB,MAAM,CAACC,OAAO,CAACP,MAAM,CAACQ,IAAI,CAACG,KAAK,CACtC;MACFC,WAAW,EAAEtB,KAAK,CAACgB,MAAM,CAACC,OAAO,CAACP,MAAM,CAACQ,IAAI,CAACG,KAAAA;AAChD,KAAA;GACD,CAAA;AACH,CAAC;;;;"}
|