@razorpay/blade 12.0.1 → 12.0.3
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 +1 -0
- package/build/lib/native/components/ActionList/ActionListItem.js.map +1 -1
- package/build/lib/native/components/Card/Card.js +1 -1
- package/build/lib/native/components/Card/Card.js.map +1 -1
- package/build/lib/native/utils/useCallbackRef.js +3 -2
- package/build/lib/native/utils/useCallbackRef.js.map +1 -1
- package/build/lib/web/development/components/Card/Card.js +1 -1
- package/build/lib/web/development/components/Card/Card.js.map +1 -1
- package/build/lib/web/development/utils/useCallbackRef.js +11 -5
- package/build/lib/web/development/utils/useCallbackRef.js.map +1 -1
- package/build/lib/web/production/components/Card/Card.js +1 -1
- package/build/lib/web/production/components/Card/Card.js.map +1 -1
- package/build/lib/web/production/utils/useCallbackRef.js +11 -5
- package/build/lib/web/production/utils/useCallbackRef.js.map +1 -1
- package/package.json +1 -1
|
@@ -31,6 +31,7 @@ import { Checkbox } from '../Checkbox/Checkbox.js';
|
|
|
31
31
|
import '../../tokens/global/typography.js';
|
|
32
32
|
import '../../tokens/global/motion.js';
|
|
33
33
|
import '../Checkbox/CheckboxGroup/CheckboxGroupContext.js';
|
|
34
|
+
import '../../utils/useCallbackRef.js';
|
|
34
35
|
import '@gorhom/portal';
|
|
35
36
|
import 'react-native-gesture-handler';
|
|
36
37
|
import '../BottomSheet/BottomSheetStack.js';
|
|
@@ -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 type { TouchableOpacity } from 'react-native';\nimport { componentIds } from './componentIds';\nimport { validateActionListItemProps, getNormalTextColor } from './actionListUtils';\nimport { getActionListItemRole, getActionListSectionRole } 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 type { DataAnalyticsAttribute, StringChildrenType, TestID } from '~utils/types';\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';\nimport { BaseMenuItem, useBaseMenuItem } from '~components/BaseMenu';\nimport { Checkbox } from '~components/Checkbox';\nimport type { AvatarProps } from '~components/Avatar/types';\nimport { Avatar } from '~components/Avatar';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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 DataAnalyticsAttribute;\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 &\n DataAnalyticsAttribute;\nconst _ActionListSection = ({\n title,\n children,\n testID,\n _hideDivider,\n _sectionChildValues,\n ...rest\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 {...makeAnalyticsAttribute(rest as Record<string, unknown>)}\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 { color, isDisabled } = useBaseMenuItem();\n const iconState = isDisabled ? 'disabled' : 'muted';\n return (\n <Icon\n color={\n color === '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 _ActionListItemAvatar = (avatarProps: Omit<AvatarProps, 'size' | ''>): React.ReactElement => {\n return <Avatar size=\"xsmall\" {...avatarProps} />;\n};\n\nconst ActionListItemAvatar = assignWithoutSideEffects(_ActionListItemAvatar, {\n componentId: componentIds.ActionListItemAvatar,\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 } = useBaseMenuItem();\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?: (e: React.TouchEvent<TouchableOpacity>) => void; 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\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 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 // We use this context to change the color of subcomponents like ActionListItemIcon, ActionListItemText, etc\n <BaseMenuItem\n isVisible={hasAutoComplete && filteredValues ? filteredValues.includes(props.value) : true}\n as={!isReactNative() ? renderOnWebAs : undefined}\n id={`${dropdownBaseId}-${props._index}`}\n tabIndex={-1}\n title={props.title}\n description={props.description}\n leading={\n selectionType === 'multiple' ? (\n <BaseBox\n pointerEvents=\"none\"\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 {...makeAccessible({\n hidden: true,\n })}\n >\n <Checkbox isChecked={isSelected} tabIndex={-1} isDisabled={props.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 props.leading\n )\n }\n trailing={props.trailing}\n titleSuffix={props.titleSuffix}\n href={props.href}\n target={props.target}\n className={activeIndex === props._index ? 'active-focus' : ''}\n isSelected={isSelected}\n isDisabled={props.isDisabled}\n role={getActionListItemRole(dropdownTriggerer, props.href)}\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 {...makeAnalyticsAttribute({ ...props })}\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 selectionType={selectionType}\n color={props.intent}\n isKeydownPressed={isKeydownPressed}\n />\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 ActionListItemAvatar,\n ActionListItemBadge,\n ActionListItemBadgeGroup,\n ActionListSection,\n};\n"],"names":["StyledActionListSectionTitle","styled","BaseBox","props","padding","makeSize","theme","spacing","_ActionListSection","_ref","title","children","testID","_hideDivider","_sectionChildValues","rest","_objectWithoutProperties","_excluded","_useDropdown","useDropdown","hasAutoCompleteInBottomSheetHeader","dropdownTriggerer","filteredValues","hasAutoComplete","dropdownComponentIds","triggers","AutoComplete","isSectionVisible","React","useMemo","visibleActionListItemInSection","find","actionItemValue","includes","Boolean","showDividerInRN","isReactNative","showDividerInAutoComplete","length","_jsxs","Object","assign","makeAccessible","role","getActionListSectionRole","label","metaAttribute","name","MetaConstants","ActionListSection","makeAnalyticsAttribute","_jsx","hidden","Text","color","size","weight","undefined","Divider","marginX","marginY","assignWithoutSideEffects","componentId","componentIds","_ActionListItemIcon","_ref2","icon","Icon","_useBaseMenuItem","useBaseMenuItem","isDisabled","iconState","ActionListItemIcon","_ActionListItemBadgeGroup","_ref3","Box","display","alignItems","flexDirection","ActionListItemBadgeGroup","_ActionListItemAvatar","avatarProps","Avatar","ActionListItemAvatar","_ActionListItemBadge","Badge","marginLeft","ActionListItemBadge","_ActionListItemText","_ref4","_useBaseMenuItem2","variant","getNormalTextColor","isMuted","ActionListItemText","makeActionListItemClickable","clickHandler","onPress","onClick","_ActionListItem","_useDropdown2","activeIndex","dropdownBaseId","onOptionClick","selectedIndices","setShouldIgnoreBlurAnimation","selectionType","isKeydownPressed","renderOnWebAs","href","getIsSelected","SelectInput","_index","isSelected","useEffect","validateActionListItemProps","leading","trailing","titleSuffix","__DEV__","intent","throwBladeError","message","moduleName","BaseMenuItem","isVisible","value","as","id","tabIndex","description","pointerEvents","Checkbox","isChecked","target","className","getActionListItemRole","e","event","castWebType","ActionListItem","onMouseDown","onMouseUp","memo","displayName"],"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 { componentIds } from './componentIds';\nimport { validateActionListItemProps, getNormalTextColor } from './actionListUtils';\nimport { getActionListItemRole, getActionListSectionRole } 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 type { DataAnalyticsAttribute, StringChildrenType, TestID } from '~utils/types';\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';\nimport { BaseMenuItem, useBaseMenuItem } from '~components/BaseMenu';\nimport { Checkbox } from '~components/Checkbox';\nimport type { AvatarProps } from '~components/Avatar/types';\nimport { Avatar } from '~components/Avatar';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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 DataAnalyticsAttribute;\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 &\n DataAnalyticsAttribute;\nconst _ActionListSection = ({\n title,\n children,\n testID,\n _hideDivider,\n _sectionChildValues,\n ...rest\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 {...makeAnalyticsAttribute(rest as Record<string, unknown>)}\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 { color, isDisabled } = useBaseMenuItem();\n const iconState = isDisabled ? 'disabled' : 'muted';\n return (\n <Icon\n color={\n color === '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 _ActionListItemAvatar = (avatarProps: Omit<AvatarProps, 'size' | ''>): React.ReactElement => {\n return <Avatar size=\"xsmall\" {...avatarProps} />;\n};\n\nconst ActionListItemAvatar = assignWithoutSideEffects(_ActionListItemAvatar, {\n componentId: componentIds.ActionListItemAvatar,\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 } = useBaseMenuItem();\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?: (e: React.TouchEvent<TouchableOpacity>) => void; 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\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 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 // We use this context to change the color of subcomponents like ActionListItemIcon, ActionListItemText, etc\n <BaseMenuItem\n isVisible={hasAutoComplete && filteredValues ? filteredValues.includes(props.value) : true}\n as={!isReactNative() ? renderOnWebAs : undefined}\n id={`${dropdownBaseId}-${props._index}`}\n tabIndex={-1}\n title={props.title}\n description={props.description}\n leading={\n selectionType === 'multiple' ? (\n <BaseBox\n pointerEvents=\"none\"\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 {...makeAccessible({\n hidden: true,\n })}\n >\n <Checkbox isChecked={isSelected} tabIndex={-1} isDisabled={props.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 props.leading\n )\n }\n trailing={props.trailing}\n titleSuffix={props.titleSuffix}\n href={props.href}\n target={props.target}\n className={activeIndex === props._index ? 'active-focus' : ''}\n isSelected={isSelected}\n isDisabled={props.isDisabled}\n role={getActionListItemRole(dropdownTriggerer, props.href)}\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 {...makeAnalyticsAttribute({ ...props })}\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 selectionType={selectionType}\n color={props.intent}\n isKeydownPressed={isKeydownPressed}\n />\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 ActionListItemAvatar,\n ActionListItemBadge,\n ActionListItemBadgeGroup,\n ActionListSection,\n};\n"],"names":["StyledActionListSectionTitle","styled","BaseBox","props","padding","makeSize","theme","spacing","_ActionListSection","_ref","title","children","testID","_hideDivider","_sectionChildValues","rest","_objectWithoutProperties","_excluded","_useDropdown","useDropdown","hasAutoCompleteInBottomSheetHeader","dropdownTriggerer","filteredValues","hasAutoComplete","dropdownComponentIds","triggers","AutoComplete","isSectionVisible","React","useMemo","visibleActionListItemInSection","find","actionItemValue","includes","Boolean","showDividerInRN","isReactNative","showDividerInAutoComplete","length","_jsxs","Object","assign","makeAccessible","role","getActionListSectionRole","label","metaAttribute","name","MetaConstants","ActionListSection","makeAnalyticsAttribute","_jsx","hidden","Text","color","size","weight","undefined","Divider","marginX","marginY","assignWithoutSideEffects","componentId","componentIds","_ActionListItemIcon","_ref2","icon","Icon","_useBaseMenuItem","useBaseMenuItem","isDisabled","iconState","ActionListItemIcon","_ActionListItemBadgeGroup","_ref3","Box","display","alignItems","flexDirection","ActionListItemBadgeGroup","_ActionListItemAvatar","avatarProps","Avatar","ActionListItemAvatar","_ActionListItemBadge","Badge","marginLeft","ActionListItemBadge","_ActionListItemText","_ref4","_useBaseMenuItem2","variant","getNormalTextColor","isMuted","ActionListItemText","makeActionListItemClickable","clickHandler","onPress","onClick","_ActionListItem","_useDropdown2","activeIndex","dropdownBaseId","onOptionClick","selectedIndices","setShouldIgnoreBlurAnimation","selectionType","isKeydownPressed","renderOnWebAs","href","getIsSelected","SelectInput","_index","isSelected","useEffect","validateActionListItemProps","leading","trailing","titleSuffix","__DEV__","intent","throwBladeError","message","moduleName","BaseMenuItem","isVisible","value","as","id","tabIndex","description","pointerEvents","Checkbox","isChecked","target","className","getActionListItemRole","e","event","castWebType","ActionListItem","onMouseDown","onMouseUp","memo","displayName"],"mappings":"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"}
|
|
@@ -21,7 +21,7 @@ import { useVerifyAllowedChildren } from '../../utils/useVerifyAllowedChildren/u
|
|
|
21
21
|
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
22
22
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
23
23
|
|
|
24
|
-
var _excluded=["children","backgroundColor","borderRadius","elevation","testID","padding","width","height","minHeight","minWidth","onClick","isSelected","accessibilityLabel","shouldScaleOnHover","onHover","href","target","rel","as"],_excluded2=["height","children","testID"];var ComponentIds={CardHeader:'CardHeader',CardHeaderTrailing:'CardHeaderTrailing',CardHeaderLeading:'CardHeaderLeading',CardFooter:'CardFooter',CardFooterTrailing:'CardFooterTrailing',CardFooterLeading:'CardFooterLeading',CardBody:'CardBody',CardHeaderIcon:'CardHeaderIcon',CardHeaderCounter:'CardHeaderCounter',CardHeaderBadge:'CardHeaderBadge',CardHeaderAmount:'CardHeaderAmount',CardHeaderText:'CardHeaderText',CardHeaderLink:'CardHeaderLink',CardHeaderIconButton:'CardHeaderIconButton'};var _Card=function _Card(_ref,ref){var children=_ref.children,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=_ref$backgroundColor===void 0?'surface.background.gray.intense':_ref$backgroundColor,_ref$borderRadius=_ref.borderRadius,borderRadius=_ref$borderRadius===void 0?'medium':_ref$borderRadius,_ref$elevation=_ref.elevation,elevation=_ref$elevation===void 0?'lowRaised':_ref$elevation,testID=_ref.testID,_ref$padding=_ref.padding,padding=_ref$padding===void 0?'spacing.7':_ref$padding,width=_ref.width,height=_ref.height,minHeight=_ref.minHeight,minWidth=_ref.minWidth,onClick=_ref.onClick,_ref$isSelected=_ref.isSelected,isSelected=_ref$isSelected===void 0?false:_ref$isSelected,accessibilityLabel=_ref.accessibilityLabel,_ref$shouldScaleOnHov=_ref.shouldScaleOnHover,shouldScaleOnHover=_ref$shouldScaleOnHov===void 0?false:_ref$shouldScaleOnHov,onHover=_ref.onHover,href=_ref.href,target=_ref.target,rel=_ref.rel,as=_ref.as,rest=_objectWithoutProperties(_ref,_excluded);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isFocused=_React$useState2[0],setIsFocused=_React$useState2[1];useVerifyAllowedChildren({children:children,componentName:'Card',allowedComponents:[ComponentIds.CardHeader,ComponentIds.CardBody,ComponentIds.CardFooter]});var linkOverlayProps=Object.assign({},metaAttribute({name:CARD_LINK_OVERLAY_ID}),makeAccessible({label:accessibilityLabel,pressed:isSelected}),{onFocus:function onFocus(){setIsFocused(true);},onBlur:function onBlur(){setIsFocused(false);}});var defaultRel=target&&target==='_blank'?'noreferrer noopener':undefined;return jsx(CardProvider,{children:jsx(CardRoot,Object.assign({as:as,ref:ref,display:'block',borderRadius:
|
|
24
|
+
var _excluded=["children","backgroundColor","borderRadius","elevation","testID","padding","width","height","minHeight","minWidth","onClick","isSelected","accessibilityLabel","shouldScaleOnHover","onHover","href","target","rel","as"],_excluded2=["height","children","testID"];var ComponentIds={CardHeader:'CardHeader',CardHeaderTrailing:'CardHeaderTrailing',CardHeaderLeading:'CardHeaderLeading',CardFooter:'CardFooter',CardFooterTrailing:'CardFooterTrailing',CardFooterLeading:'CardFooterLeading',CardBody:'CardBody',CardHeaderIcon:'CardHeaderIcon',CardHeaderCounter:'CardHeaderCounter',CardHeaderBadge:'CardHeaderBadge',CardHeaderAmount:'CardHeaderAmount',CardHeaderText:'CardHeaderText',CardHeaderLink:'CardHeaderLink',CardHeaderIconButton:'CardHeaderIconButton'};var _Card=function _Card(_ref,ref){var children=_ref.children,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=_ref$backgroundColor===void 0?'surface.background.gray.intense':_ref$backgroundColor,_ref$borderRadius=_ref.borderRadius,borderRadius=_ref$borderRadius===void 0?'medium':_ref$borderRadius,_ref$elevation=_ref.elevation,elevation=_ref$elevation===void 0?'lowRaised':_ref$elevation,testID=_ref.testID,_ref$padding=_ref.padding,padding=_ref$padding===void 0?'spacing.7':_ref$padding,width=_ref.width,height=_ref.height,minHeight=_ref.minHeight,minWidth=_ref.minWidth,onClick=_ref.onClick,_ref$isSelected=_ref.isSelected,isSelected=_ref$isSelected===void 0?false:_ref$isSelected,accessibilityLabel=_ref.accessibilityLabel,_ref$shouldScaleOnHov=_ref.shouldScaleOnHover,shouldScaleOnHover=_ref$shouldScaleOnHov===void 0?false:_ref$shouldScaleOnHov,onHover=_ref.onHover,href=_ref.href,target=_ref.target,rel=_ref.rel,as=_ref.as,rest=_objectWithoutProperties(_ref,_excluded);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isFocused=_React$useState2[0],setIsFocused=_React$useState2[1];useVerifyAllowedChildren({children:children,componentName:'Card',allowedComponents:[ComponentIds.CardHeader,ComponentIds.CardBody,ComponentIds.CardFooter]});var linkOverlayProps=Object.assign({},metaAttribute({name:CARD_LINK_OVERLAY_ID}),makeAccessible({label:accessibilityLabel,pressed:isSelected}),{onFocus:function onFocus(){setIsFocused(true);},onBlur:function onBlur(){setIsFocused(false);}});var defaultRel=target&&target==='_blank'?'noreferrer noopener':undefined;return jsx(CardProvider,{children:jsx(CardRoot,Object.assign({as:as,ref:ref,display:'block',borderRadius:borderRadius,onMouseEnter:onHover,shouldScaleOnHover:shouldScaleOnHover,isSelected:isSelected,isFocused:isFocused,onClick:isReactNative()?onClick:undefined,width:width,height:height,minHeight:minHeight,minWidth:minWidth,href:href,accessibilityLabel:accessibilityLabel},metaAttribute({name:MetaConstants.Card,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsxs(CardSurface,{height:height,minHeight:minHeight,padding:padding,borderRadius:borderRadius,elevation:elevation,textAlign:'left',backgroundColor:backgroundColor,children:[href?jsx(LinkOverlay,Object.assign({onClick:onClick,href:href,target:target,rel:rel!=null?rel:defaultRel},linkOverlayProps)):null,!href&&onClick?jsx(LinkOverlay,Object.assign({as:"button",onClick:onClick},linkOverlayProps)):null,children]})}))});};var _CardBody=function _CardBody(_ref2){var height=_ref2.height,children=_ref2.children,testID=_ref2.testID,rest=_objectWithoutProperties(_ref2,_excluded2);useVerifyInsideCard('CardBody');return jsx(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.CardBody,testID:testID}),makeAnalyticsAttribute(rest),{height:height,children:children}));};var Card=React__default.forwardRef(_Card);var CardBody=assignWithoutSideEffects(_CardBody,{componentId:ComponentIds.CardBody});
|
|
25
25
|
|
|
26
26
|
export { Card, CardBody, ComponentIds };
|
|
27
27
|
//# sourceMappingURL=Card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { CardSurface } from './CardSurface';\nimport { CardProvider, useVerifyInsideCard } from './CardContext';\nimport { LinkOverlay } from './LinkOverlay';\nimport { CardRoot } from './CardRoot';\nimport type { CardSpacingValueType, LinkOverlayProps } from './types';\nimport { CARD_LINK_OVERLAY_ID } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { Elevation } from '~tokens/global';\nimport type { BoxProps } from '~components/Box';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { Platform } from '~utils';\nimport { isReactNative } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nexport const ComponentIds = {\n CardHeader: 'CardHeader',\n CardHeaderTrailing: 'CardHeaderTrailing',\n CardHeaderLeading: 'CardHeaderLeading',\n CardFooter: 'CardFooter',\n CardFooterTrailing: 'CardFooterTrailing',\n CardFooterLeading: 'CardFooterLeading',\n CardBody: 'CardBody',\n CardHeaderIcon: 'CardHeaderIcon',\n CardHeaderCounter: 'CardHeaderCounter',\n CardHeaderBadge: 'CardHeaderBadge',\n CardHeaderAmount: 'CardHeaderAmount',\n CardHeaderText: 'CardHeaderText',\n CardHeaderLink: 'CardHeaderLink',\n CardHeaderIconButton: 'CardHeaderIconButton',\n};\n\ntype CardSurfaceBackgroundColors = `surface.background.gray.${DotNotationToken<\n Theme['colors']['surface']['background']['gray']\n>}`;\n\nexport type CardProps = {\n /**\n * Card contents\n */\n children: React.ReactNode;\n /**\n * Sets the background color of the Card\n *\n * @default `surface.background.gray.intense`\n */\n backgroundColor?: CardSurfaceBackgroundColors;\n /**\n * Sets the border radius of the Card\n *\n * @default `medium`\n */\n borderRadius?: Extract<BoxProps['borderRadius'], 'medium' | 'large' | 'xlarge'>;\n /**\n * Sets the elevation for Cards\n *\n * eg: `theme.elevation.midRaised`\n *\n * @default `theme.elevation.lowRaised`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs\n */\n elevation?: keyof Elevation;\n /**\n * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n * @default `spacing.7`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--docs\n */\n padding?: CardSpacingValueType;\n /**\n * Sets the width of the card\n */\n width?: BoxProps['width'];\n /**\n * Sets the height of the card\n */\n height?: BoxProps['height'];\n /**\n * Sets minimum height of the card\n */\n minHeight?: BoxProps['minHeight'];\n /**\n * Sets minimum width of the card\n */\n minWidth?: BoxProps['minWidth'];\n /**\n * If `true`, the card will be in selected state\n * Card will have a primary color border around it.\n *\n * @default false\n */\n\n isSelected?: boolean;\n /**\n * Makes the Card linkable by setting the `href` prop\n *\n * @default undefined\n */\n href?: string;\n /**\n * Sets the `target` attribute for the linkable card\n */\n target?: string;\n /**\n * Sets the `rel` attribute for the linkable card\n */\n rel?: string;\n /**\n * Sets the accessibility label for the card\n * This is useful when the card has an `href` or `onClick` prop\n * Setting this will announce the label when the card is focused\n */\n accessibilityLabel?: string;\n /**\n * If `true`, the card will scale up on hover\n *\n * On mobile devices it will scale down on press\n *\n * **This prop is deprecated in favour of motion presets released in v12**\n *\n * ### Migration\n *\n * ```diff\n * - <Card\n * - shouldScaleOnHover\n * - />\n *\n * + <Scale motionTriggers={['hover']}>\n * + <Card />\n * + </Scale>\n * ```\n *\n * @default false\n *\n * @deprecated This prop is deprecated in favour of motion presets released in v12\n */\n shouldScaleOnHover?: boolean;\n /**\n * Callback triggered when the card is hovered\n */\n onHover?: () => void;\n /**\n * Callback triggered when the card is clicked\n */\n onClick?: (\n event: Platform.Select<{\n web: React.MouseEvent;\n native: GestureResponderEvent;\n }>,\n ) => void;\n /**\n * Sets the HTML element for the Card\n *\n * When `as` is set to `label`, the card will be rendered as a label element\n * This can be used to create a custom checkbox or radio button using the card\n *\n * @default undefined\n */\n as?: 'label';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n {\n children,\n backgroundColor = 'surface.background.gray.intense',\n borderRadius = 'medium',\n elevation = 'lowRaised',\n testID,\n padding = 'spacing.7',\n width,\n height,\n minHeight,\n minWidth,\n onClick,\n isSelected = false,\n accessibilityLabel,\n shouldScaleOnHover = false,\n onHover,\n href,\n target,\n rel,\n as,\n ...rest\n },\n ref,\n): React.ReactElement => {\n const [isFocused, setIsFocused] = React.useState(false);\n\n useVerifyAllowedChildren({\n children,\n componentName: 'Card',\n allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter],\n });\n\n const linkOverlayProps: LinkOverlayProps = {\n ...metaAttribute({ name: CARD_LINK_OVERLAY_ID }),\n ...makeAccessible({ label: accessibilityLabel, pressed: isSelected }),\n onFocus: () => {\n setIsFocused(true);\n },\n onBlur: () => {\n setIsFocused(false);\n },\n };\n const defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;\n\n return (\n <CardProvider>\n <CardRoot\n as={as}\n ref={ref as never}\n display={'block' as never}\n borderRadius=\"medium\"\n onMouseEnter={onHover as never}\n shouldScaleOnHover={shouldScaleOnHover}\n isSelected={isSelected}\n isFocused={isFocused}\n // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN\n onClick={isReactNative() ? onClick : undefined}\n width={width}\n height={height}\n minHeight={minHeight}\n minWidth={minWidth}\n href={href}\n accessibilityLabel={accessibilityLabel}\n {...metaAttribute({ name: MetaConstants.Card, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <CardSurface\n height={height}\n minHeight={minHeight}\n padding={padding}\n borderRadius={borderRadius}\n elevation={elevation}\n textAlign={'left' as never}\n backgroundColor={backgroundColor}\n >\n {href ? (\n <LinkOverlay\n onClick={onClick}\n href={href}\n target={target}\n rel={rel ?? defaultRel}\n {...linkOverlayProps}\n />\n ) : null}\n {!href && onClick ? (\n <LinkOverlay as=\"button\" onClick={onClick} {...linkOverlayProps} />\n ) : null}\n {children}\n </CardSurface>\n </CardRoot>\n </CardProvider>\n );\n};\n\ntype CardBodyProps = {\n children: React.ReactNode;\n height?: BoxProps['height'];\n} & TestID &\n DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n useVerifyInsideCard('CardBody');\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n {...makeAnalyticsAttribute(rest)}\n height={height}\n >\n {children}\n </BaseBox>\n );\n};\n\nconst Card = React.forwardRef(_Card);\nconst CardBody = assignWithoutSideEffects(_CardBody, { componentId: ComponentIds.CardBody });\n\nexport { Card, CardBody };\n"],"names":["ComponentIds","CardHeader","CardHeaderTrailing","CardHeaderLeading","CardFooter","CardFooterTrailing","CardFooterLeading","CardBody","CardHeaderIcon","CardHeaderCounter","CardHeaderBadge","CardHeaderAmount","CardHeaderText","CardHeaderLink","CardHeaderIconButton","_Card","_ref","ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","Object","assign","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","onFocus","onBlur","defaultRel","undefined","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { CardSurface } from './CardSurface';\nimport { CardProvider, useVerifyInsideCard } from './CardContext';\nimport { LinkOverlay } from './LinkOverlay';\nimport { CardRoot } from './CardRoot';\nimport type { CardSpacingValueType, LinkOverlayProps } from './types';\nimport { CARD_LINK_OVERLAY_ID } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { Elevation } from '~tokens/global';\nimport type { BoxProps } from '~components/Box';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { Platform } from '~utils';\nimport { isReactNative } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nexport const ComponentIds = {\n CardHeader: 'CardHeader',\n CardHeaderTrailing: 'CardHeaderTrailing',\n CardHeaderLeading: 'CardHeaderLeading',\n CardFooter: 'CardFooter',\n CardFooterTrailing: 'CardFooterTrailing',\n CardFooterLeading: 'CardFooterLeading',\n CardBody: 'CardBody',\n CardHeaderIcon: 'CardHeaderIcon',\n CardHeaderCounter: 'CardHeaderCounter',\n CardHeaderBadge: 'CardHeaderBadge',\n CardHeaderAmount: 'CardHeaderAmount',\n CardHeaderText: 'CardHeaderText',\n CardHeaderLink: 'CardHeaderLink',\n CardHeaderIconButton: 'CardHeaderIconButton',\n};\n\ntype CardSurfaceBackgroundColors = `surface.background.gray.${DotNotationToken<\n Theme['colors']['surface']['background']['gray']\n>}`;\n\nexport type CardProps = {\n /**\n * Card contents\n */\n children: React.ReactNode;\n /**\n * Sets the background color of the Card\n *\n * @default `surface.background.gray.intense`\n */\n backgroundColor?: CardSurfaceBackgroundColors;\n /**\n * Sets the border radius of the Card\n *\n * @default `medium`\n */\n borderRadius?: Extract<BoxProps['borderRadius'], 'medium' | 'large' | 'xlarge'>;\n /**\n * Sets the elevation for Cards\n *\n * eg: `theme.elevation.midRaised`\n *\n * @default `theme.elevation.lowRaised`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs\n */\n elevation?: keyof Elevation;\n /**\n * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n * @default `spacing.7`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--docs\n */\n padding?: CardSpacingValueType;\n /**\n * Sets the width of the card\n */\n width?: BoxProps['width'];\n /**\n * Sets the height of the card\n */\n height?: BoxProps['height'];\n /**\n * Sets minimum height of the card\n */\n minHeight?: BoxProps['minHeight'];\n /**\n * Sets minimum width of the card\n */\n minWidth?: BoxProps['minWidth'];\n /**\n * If `true`, the card will be in selected state\n * Card will have a primary color border around it.\n *\n * @default false\n */\n\n isSelected?: boolean;\n /**\n * Makes the Card linkable by setting the `href` prop\n *\n * @default undefined\n */\n href?: string;\n /**\n * Sets the `target` attribute for the linkable card\n */\n target?: string;\n /**\n * Sets the `rel` attribute for the linkable card\n */\n rel?: string;\n /**\n * Sets the accessibility label for the card\n * This is useful when the card has an `href` or `onClick` prop\n * Setting this will announce the label when the card is focused\n */\n accessibilityLabel?: string;\n /**\n * If `true`, the card will scale up on hover\n *\n * On mobile devices it will scale down on press\n *\n * **This prop is deprecated in favour of motion presets released in v12**\n *\n * ### Migration\n *\n * ```diff\n * - <Card\n * - shouldScaleOnHover\n * - />\n *\n * + <Scale motionTriggers={['hover']}>\n * + <Card />\n * + </Scale>\n * ```\n *\n * @default false\n *\n * @deprecated This prop is deprecated in favour of motion presets released in v12\n */\n shouldScaleOnHover?: boolean;\n /**\n * Callback triggered when the card is hovered\n */\n onHover?: () => void;\n /**\n * Callback triggered when the card is clicked\n */\n onClick?: (\n event: Platform.Select<{\n web: React.MouseEvent;\n native: GestureResponderEvent;\n }>,\n ) => void;\n /**\n * Sets the HTML element for the Card\n *\n * When `as` is set to `label`, the card will be rendered as a label element\n * This can be used to create a custom checkbox or radio button using the card\n *\n * @default undefined\n */\n as?: 'label';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n {\n children,\n backgroundColor = 'surface.background.gray.intense',\n borderRadius = 'medium',\n elevation = 'lowRaised',\n testID,\n padding = 'spacing.7',\n width,\n height,\n minHeight,\n minWidth,\n onClick,\n isSelected = false,\n accessibilityLabel,\n shouldScaleOnHover = false,\n onHover,\n href,\n target,\n rel,\n as,\n ...rest\n },\n ref,\n): React.ReactElement => {\n const [isFocused, setIsFocused] = React.useState(false);\n\n useVerifyAllowedChildren({\n children,\n componentName: 'Card',\n allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter],\n });\n\n const linkOverlayProps: LinkOverlayProps = {\n ...metaAttribute({ name: CARD_LINK_OVERLAY_ID }),\n ...makeAccessible({ label: accessibilityLabel, pressed: isSelected }),\n onFocus: () => {\n setIsFocused(true);\n },\n onBlur: () => {\n setIsFocused(false);\n },\n };\n const defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;\n\n return (\n <CardProvider>\n <CardRoot\n as={as}\n ref={ref as never}\n display={'block' as never}\n borderRadius={borderRadius}\n onMouseEnter={onHover as never}\n shouldScaleOnHover={shouldScaleOnHover}\n isSelected={isSelected}\n isFocused={isFocused}\n // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN\n onClick={isReactNative() ? onClick : undefined}\n width={width}\n height={height}\n minHeight={minHeight}\n minWidth={minWidth}\n href={href}\n accessibilityLabel={accessibilityLabel}\n {...metaAttribute({ name: MetaConstants.Card, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <CardSurface\n height={height}\n minHeight={minHeight}\n padding={padding}\n borderRadius={borderRadius}\n elevation={elevation}\n textAlign={'left' as never}\n backgroundColor={backgroundColor}\n >\n {href ? (\n <LinkOverlay\n onClick={onClick}\n href={href}\n target={target}\n rel={rel ?? defaultRel}\n {...linkOverlayProps}\n />\n ) : null}\n {!href && onClick ? (\n <LinkOverlay as=\"button\" onClick={onClick} {...linkOverlayProps} />\n ) : null}\n {children}\n </CardSurface>\n </CardRoot>\n </CardProvider>\n );\n};\n\ntype CardBodyProps = {\n children: React.ReactNode;\n height?: BoxProps['height'];\n} & TestID &\n DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n useVerifyInsideCard('CardBody');\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n {...makeAnalyticsAttribute(rest)}\n height={height}\n >\n {children}\n </BaseBox>\n );\n};\n\nconst Card = React.forwardRef(_Card);\nconst CardBody = assignWithoutSideEffects(_CardBody, { componentId: ComponentIds.CardBody });\n\nexport { Card, CardBody };\n"],"names":["ComponentIds","CardHeader","CardHeaderTrailing","CardHeaderLeading","CardFooter","CardFooterTrailing","CardFooterLeading","CardBody","CardHeaderIcon","CardHeaderCounter","CardHeaderBadge","CardHeaderAmount","CardHeaderText","CardHeaderLink","CardHeaderIconButton","_Card","_ref","ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","Object","assign","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","onFocus","onBlur","defaultRel","undefined","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { useRef,
|
|
1
|
+
import React__default, { useRef, useCallback } from 'react';
|
|
2
|
+
import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
|
|
2
3
|
|
|
3
|
-
function useCallbackRef(callback){var deps=arguments.length>1&&arguments[1]!==undefined?arguments[1]:[];var callbackRef=useRef(
|
|
4
|
+
var useReactInsertionEffect=React__default[' useInsertionEffect '.trim().toString()];var useInsertionEffectFallback=useReactInsertionEffect||useIsomorphicLayoutEffect;function useCallbackRef(callback){var deps=arguments.length>1&&arguments[1]!==undefined?arguments[1]:[];var callbackRef=useRef(callback);useInsertionEffectFallback(function(){callbackRef.current=callback;});return useCallback(function(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}return callbackRef.current==null?void 0:callbackRef.current.apply(callbackRef,args);},deps);}
|
|
4
5
|
|
|
5
6
|
export { useCallbackRef };
|
|
6
7
|
//# sourceMappingURL=useCallbackRef.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCallbackRef.js","sources":["../../../../src/utils/useCallbackRef.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { useCallback,
|
|
1
|
+
{"version":3,"file":"useCallbackRef.js","sources":["../../../../src/utils/useCallbackRef.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport React, { useCallback, useRef } from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\n// Prevent webpack from importing this:\n// https://github.com/webpack/webpack/issues/14814#issuecomment-1536757985\n// https://github.com/radix-ui/primitives/issues/2796\nconst useReactInsertionEffect = (React as any)[' useInsertionEffect '.trim().toString()];\nconst useInsertionEffectFallback = useReactInsertionEffect || useIsomorphicLayoutEffect;\n\n/**\n * This hook is user-land implementation of the experimental `useEffectEvent` hook.\n * React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event\n *\n * This hook is useful when you want to use a callback function inside a useEffect while keeping it \"fresh\" but you don't want to add it to the dependency array.\n */\nfunction useCallbackRef<Args extends unknown[], Return>(\n callback: ((...args: Args) => Return) | undefined,\n deps: React.DependencyList = [],\n) {\n const callbackRef = useRef<typeof callback>(callback);\n\n useInsertionEffectFallback(() => {\n callbackRef.current = callback;\n });\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return useCallback((...args: Args) => callbackRef.current?.(...args), deps);\n}\n\nexport { useCallbackRef };\n"],"names":["useReactInsertionEffect","React","trim","toString","useInsertionEffectFallback","useIsomorphicLayoutEffect","useCallbackRef","callback","deps","arguments","length","undefined","callbackRef","useRef","current","useCallback","_len","args","Array","_key","apply"],"mappings":";;;AAQA,IAAMA,uBAAuB,CAAIC,cAAK,CAAS,sBAAsB,CAACC,IAAI,EAAE,CAACC,QAAQ,EAAE,CAAC,CACxF,IAAMC,0BAA0B,CAAGJ,uBAAuB,EAAIK,yBAAyB,CAQvF,SAASC,cAAcA,CACrBC,QAAiD,CAEjD,CAAA,IADAC,IAA0B,CAAAC,SAAA,CAAAC,MAAA,CAAA,CAAA,EAAAD,SAAA,CAAA,CAAA,CAAA,GAAAE,SAAA,CAAAF,SAAA,CAAG,CAAA,CAAA,CAAA,EAAE,CAE/B,IAAMG,WAAW,CAAGC,MAAM,CAAkBN,QAAQ,CAAC,CAErDH,0BAA0B,CAAC,UAAM,CAC/BQ,WAAW,CAACE,OAAO,CAAGP,QAAQ,CAChC,CAAC,CAAC,CAGF,OAAOQ,WAAW,CAAC,UAAA,CAAA,IAAA,IAAAC,IAAA,CAAAP,SAAA,CAAAC,MAAA,CAAIO,IAAI,CAAAC,IAAAA,KAAA,CAAAF,IAAA,CAAAG,CAAAA,IAAA,GAAAA,IAAA,CAAAH,IAAA,CAAAG,IAAA,EAAA,CAAA,CAAJF,IAAI,CAAAE,IAAA,CAAA,CAAAV,SAAA,CAAAU,IAAA,CAAA,CAAA,CAAA,OAAWP,WAAW,CAACE,OAAO,EAAA,IAAA,CAAA,KAAA,CAAA,CAAnBF,WAAW,CAACE,OAAO,CAAAM,KAAA,CAAnBR,WAAW,CAAcK,IAAI,CAAC,CAAA,CAAA,CAAET,IAAI,CAAC,CAC7E;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { CardSurface } from './CardSurface';\nimport { CardProvider, useVerifyInsideCard } from './CardContext';\nimport { LinkOverlay } from './LinkOverlay';\nimport { CardRoot } from './CardRoot';\nimport type { CardSpacingValueType, LinkOverlayProps } from './types';\nimport { CARD_LINK_OVERLAY_ID } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { Elevation } from '~tokens/global';\nimport type { BoxProps } from '~components/Box';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { Platform } from '~utils';\nimport { isReactNative } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nexport const ComponentIds = {\n CardHeader: 'CardHeader',\n CardHeaderTrailing: 'CardHeaderTrailing',\n CardHeaderLeading: 'CardHeaderLeading',\n CardFooter: 'CardFooter',\n CardFooterTrailing: 'CardFooterTrailing',\n CardFooterLeading: 'CardFooterLeading',\n CardBody: 'CardBody',\n CardHeaderIcon: 'CardHeaderIcon',\n CardHeaderCounter: 'CardHeaderCounter',\n CardHeaderBadge: 'CardHeaderBadge',\n CardHeaderAmount: 'CardHeaderAmount',\n CardHeaderText: 'CardHeaderText',\n CardHeaderLink: 'CardHeaderLink',\n CardHeaderIconButton: 'CardHeaderIconButton',\n};\n\ntype CardSurfaceBackgroundColors = `surface.background.gray.${DotNotationToken<\n Theme['colors']['surface']['background']['gray']\n>}`;\n\nexport type CardProps = {\n /**\n * Card contents\n */\n children: React.ReactNode;\n /**\n * Sets the background color of the Card\n *\n * @default `surface.background.gray.intense`\n */\n backgroundColor?: CardSurfaceBackgroundColors;\n /**\n * Sets the border radius of the Card\n *\n * @default `medium`\n */\n borderRadius?: Extract<BoxProps['borderRadius'], 'medium' | 'large' | 'xlarge'>;\n /**\n * Sets the elevation for Cards\n *\n * eg: `theme.elevation.midRaised`\n *\n * @default `theme.elevation.lowRaised`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs\n */\n elevation?: keyof Elevation;\n /**\n * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n * @default `spacing.7`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--docs\n */\n padding?: CardSpacingValueType;\n /**\n * Sets the width of the card\n */\n width?: BoxProps['width'];\n /**\n * Sets the height of the card\n */\n height?: BoxProps['height'];\n /**\n * Sets minimum height of the card\n */\n minHeight?: BoxProps['minHeight'];\n /**\n * Sets minimum width of the card\n */\n minWidth?: BoxProps['minWidth'];\n /**\n * If `true`, the card will be in selected state\n * Card will have a primary color border around it.\n *\n * @default false\n */\n\n isSelected?: boolean;\n /**\n * Makes the Card linkable by setting the `href` prop\n *\n * @default undefined\n */\n href?: string;\n /**\n * Sets the `target` attribute for the linkable card\n */\n target?: string;\n /**\n * Sets the `rel` attribute for the linkable card\n */\n rel?: string;\n /**\n * Sets the accessibility label for the card\n * This is useful when the card has an `href` or `onClick` prop\n * Setting this will announce the label when the card is focused\n */\n accessibilityLabel?: string;\n /**\n * If `true`, the card will scale up on hover\n *\n * On mobile devices it will scale down on press\n *\n * **This prop is deprecated in favour of motion presets released in v12**\n *\n * ### Migration\n *\n * ```diff\n * - <Card\n * - shouldScaleOnHover\n * - />\n *\n * + <Scale motionTriggers={['hover']}>\n * + <Card />\n * + </Scale>\n * ```\n *\n * @default false\n *\n * @deprecated This prop is deprecated in favour of motion presets released in v12\n */\n shouldScaleOnHover?: boolean;\n /**\n * Callback triggered when the card is hovered\n */\n onHover?: () => void;\n /**\n * Callback triggered when the card is clicked\n */\n onClick?: (\n event: Platform.Select<{\n web: React.MouseEvent;\n native: GestureResponderEvent;\n }>,\n ) => void;\n /**\n * Sets the HTML element for the Card\n *\n * When `as` is set to `label`, the card will be rendered as a label element\n * This can be used to create a custom checkbox or radio button using the card\n *\n * @default undefined\n */\n as?: 'label';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n {\n children,\n backgroundColor = 'surface.background.gray.intense',\n borderRadius = 'medium',\n elevation = 'lowRaised',\n testID,\n padding = 'spacing.7',\n width,\n height,\n minHeight,\n minWidth,\n onClick,\n isSelected = false,\n accessibilityLabel,\n shouldScaleOnHover = false,\n onHover,\n href,\n target,\n rel,\n as,\n ...rest\n },\n ref,\n): React.ReactElement => {\n const [isFocused, setIsFocused] = React.useState(false);\n\n useVerifyAllowedChildren({\n children,\n componentName: 'Card',\n allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter],\n });\n\n const linkOverlayProps: LinkOverlayProps = {\n ...metaAttribute({ name: CARD_LINK_OVERLAY_ID }),\n ...makeAccessible({ label: accessibilityLabel, pressed: isSelected }),\n onFocus: () => {\n setIsFocused(true);\n },\n onBlur: () => {\n setIsFocused(false);\n },\n };\n const defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;\n\n return (\n <CardProvider>\n <CardRoot\n as={as}\n ref={ref as never}\n display={'block' as never}\n borderRadius=\"medium\"\n onMouseEnter={onHover as never}\n shouldScaleOnHover={shouldScaleOnHover}\n isSelected={isSelected}\n isFocused={isFocused}\n // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN\n onClick={isReactNative() ? onClick : undefined}\n width={width}\n height={height}\n minHeight={minHeight}\n minWidth={minWidth}\n href={href}\n accessibilityLabel={accessibilityLabel}\n {...metaAttribute({ name: MetaConstants.Card, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <CardSurface\n height={height}\n minHeight={minHeight}\n padding={padding}\n borderRadius={borderRadius}\n elevation={elevation}\n textAlign={'left' as never}\n backgroundColor={backgroundColor}\n >\n {href ? (\n <LinkOverlay\n onClick={onClick}\n href={href}\n target={target}\n rel={rel ?? defaultRel}\n {...linkOverlayProps}\n />\n ) : null}\n {!href && onClick ? (\n <LinkOverlay as=\"button\" onClick={onClick} {...linkOverlayProps} />\n ) : null}\n {children}\n </CardSurface>\n </CardRoot>\n </CardProvider>\n );\n};\n\ntype CardBodyProps = {\n children: React.ReactNode;\n height?: BoxProps['height'];\n} & TestID &\n DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n useVerifyInsideCard('CardBody');\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n {...makeAnalyticsAttribute(rest)}\n height={height}\n >\n {children}\n </BaseBox>\n );\n};\n\nconst Card = React.forwardRef(_Card);\nconst CardBody = assignWithoutSideEffects(_CardBody, { componentId: ComponentIds.CardBody });\n\nexport { Card, CardBody };\n"],"names":["ComponentIds","CardHeader","CardHeaderTrailing","CardHeaderLeading","CardFooter","CardFooterTrailing","CardFooterLeading","CardBody","CardHeaderIcon","CardHeaderCounter","CardHeaderBadge","CardHeaderAmount","CardHeaderText","CardHeaderLink","CardHeaderIconButton","_Card","_ref","ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","_objectSpread","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","onFocus","onBlur","defaultRel","undefined","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { CardSurface } from './CardSurface';\nimport { CardProvider, useVerifyInsideCard } from './CardContext';\nimport { LinkOverlay } from './LinkOverlay';\nimport { CardRoot } from './CardRoot';\nimport type { CardSpacingValueType, LinkOverlayProps } from './types';\nimport { CARD_LINK_OVERLAY_ID } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { Elevation } from '~tokens/global';\nimport type { BoxProps } from '~components/Box';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { Platform } from '~utils';\nimport { isReactNative } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nexport const ComponentIds = {\n CardHeader: 'CardHeader',\n CardHeaderTrailing: 'CardHeaderTrailing',\n CardHeaderLeading: 'CardHeaderLeading',\n CardFooter: 'CardFooter',\n CardFooterTrailing: 'CardFooterTrailing',\n CardFooterLeading: 'CardFooterLeading',\n CardBody: 'CardBody',\n CardHeaderIcon: 'CardHeaderIcon',\n CardHeaderCounter: 'CardHeaderCounter',\n CardHeaderBadge: 'CardHeaderBadge',\n CardHeaderAmount: 'CardHeaderAmount',\n CardHeaderText: 'CardHeaderText',\n CardHeaderLink: 'CardHeaderLink',\n CardHeaderIconButton: 'CardHeaderIconButton',\n};\n\ntype CardSurfaceBackgroundColors = `surface.background.gray.${DotNotationToken<\n Theme['colors']['surface']['background']['gray']\n>}`;\n\nexport type CardProps = {\n /**\n * Card contents\n */\n children: React.ReactNode;\n /**\n * Sets the background color of the Card\n *\n * @default `surface.background.gray.intense`\n */\n backgroundColor?: CardSurfaceBackgroundColors;\n /**\n * Sets the border radius of the Card\n *\n * @default `medium`\n */\n borderRadius?: Extract<BoxProps['borderRadius'], 'medium' | 'large' | 'xlarge'>;\n /**\n * Sets the elevation for Cards\n *\n * eg: `theme.elevation.midRaised`\n *\n * @default `theme.elevation.lowRaised`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs\n */\n elevation?: keyof Elevation;\n /**\n * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n * @default `spacing.7`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--docs\n */\n padding?: CardSpacingValueType;\n /**\n * Sets the width of the card\n */\n width?: BoxProps['width'];\n /**\n * Sets the height of the card\n */\n height?: BoxProps['height'];\n /**\n * Sets minimum height of the card\n */\n minHeight?: BoxProps['minHeight'];\n /**\n * Sets minimum width of the card\n */\n minWidth?: BoxProps['minWidth'];\n /**\n * If `true`, the card will be in selected state\n * Card will have a primary color border around it.\n *\n * @default false\n */\n\n isSelected?: boolean;\n /**\n * Makes the Card linkable by setting the `href` prop\n *\n * @default undefined\n */\n href?: string;\n /**\n * Sets the `target` attribute for the linkable card\n */\n target?: string;\n /**\n * Sets the `rel` attribute for the linkable card\n */\n rel?: string;\n /**\n * Sets the accessibility label for the card\n * This is useful when the card has an `href` or `onClick` prop\n * Setting this will announce the label when the card is focused\n */\n accessibilityLabel?: string;\n /**\n * If `true`, the card will scale up on hover\n *\n * On mobile devices it will scale down on press\n *\n * **This prop is deprecated in favour of motion presets released in v12**\n *\n * ### Migration\n *\n * ```diff\n * - <Card\n * - shouldScaleOnHover\n * - />\n *\n * + <Scale motionTriggers={['hover']}>\n * + <Card />\n * + </Scale>\n * ```\n *\n * @default false\n *\n * @deprecated This prop is deprecated in favour of motion presets released in v12\n */\n shouldScaleOnHover?: boolean;\n /**\n * Callback triggered when the card is hovered\n */\n onHover?: () => void;\n /**\n * Callback triggered when the card is clicked\n */\n onClick?: (\n event: Platform.Select<{\n web: React.MouseEvent;\n native: GestureResponderEvent;\n }>,\n ) => void;\n /**\n * Sets the HTML element for the Card\n *\n * When `as` is set to `label`, the card will be rendered as a label element\n * This can be used to create a custom checkbox or radio button using the card\n *\n * @default undefined\n */\n as?: 'label';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n {\n children,\n backgroundColor = 'surface.background.gray.intense',\n borderRadius = 'medium',\n elevation = 'lowRaised',\n testID,\n padding = 'spacing.7',\n width,\n height,\n minHeight,\n minWidth,\n onClick,\n isSelected = false,\n accessibilityLabel,\n shouldScaleOnHover = false,\n onHover,\n href,\n target,\n rel,\n as,\n ...rest\n },\n ref,\n): React.ReactElement => {\n const [isFocused, setIsFocused] = React.useState(false);\n\n useVerifyAllowedChildren({\n children,\n componentName: 'Card',\n allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter],\n });\n\n const linkOverlayProps: LinkOverlayProps = {\n ...metaAttribute({ name: CARD_LINK_OVERLAY_ID }),\n ...makeAccessible({ label: accessibilityLabel, pressed: isSelected }),\n onFocus: () => {\n setIsFocused(true);\n },\n onBlur: () => {\n setIsFocused(false);\n },\n };\n const defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;\n\n return (\n <CardProvider>\n <CardRoot\n as={as}\n ref={ref as never}\n display={'block' as never}\n borderRadius={borderRadius}\n onMouseEnter={onHover as never}\n shouldScaleOnHover={shouldScaleOnHover}\n isSelected={isSelected}\n isFocused={isFocused}\n // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN\n onClick={isReactNative() ? onClick : undefined}\n width={width}\n height={height}\n minHeight={minHeight}\n minWidth={minWidth}\n href={href}\n accessibilityLabel={accessibilityLabel}\n {...metaAttribute({ name: MetaConstants.Card, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <CardSurface\n height={height}\n minHeight={minHeight}\n padding={padding}\n borderRadius={borderRadius}\n elevation={elevation}\n textAlign={'left' as never}\n backgroundColor={backgroundColor}\n >\n {href ? (\n <LinkOverlay\n onClick={onClick}\n href={href}\n target={target}\n rel={rel ?? defaultRel}\n {...linkOverlayProps}\n />\n ) : null}\n {!href && onClick ? (\n <LinkOverlay as=\"button\" onClick={onClick} {...linkOverlayProps} />\n ) : null}\n {children}\n </CardSurface>\n </CardRoot>\n </CardProvider>\n );\n};\n\ntype CardBodyProps = {\n children: React.ReactNode;\n height?: BoxProps['height'];\n} & TestID &\n DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n useVerifyInsideCard('CardBody');\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n {...makeAnalyticsAttribute(rest)}\n height={height}\n >\n {children}\n </BaseBox>\n );\n};\n\nconst Card = React.forwardRef(_Card);\nconst CardBody = assignWithoutSideEffects(_CardBody, { componentId: ComponentIds.CardBody });\n\nexport { Card, CardBody };\n"],"names":["ComponentIds","CardHeader","CardHeaderTrailing","CardHeaderLeading","CardFooter","CardFooterTrailing","CardFooterLeading","CardBody","CardHeaderIcon","CardHeaderCounter","CardHeaderBadge","CardHeaderAmount","CardHeaderText","CardHeaderLink","CardHeaderIconButton","_Card","_ref","ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","_objectSpread","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","onFocus","onBlur","defaultRel","undefined","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":"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"}
|
|
@@ -1,7 +1,15 @@
|
|
|
1
|
-
import { useRef,
|
|
1
|
+
import React__default, { useRef, useCallback } from 'react';
|
|
2
|
+
import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
|
|
2
3
|
|
|
4
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
3
5
|
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
|
4
6
|
|
|
7
|
+
// Prevent webpack from importing this:
|
|
8
|
+
// https://github.com/webpack/webpack/issues/14814#issuecomment-1536757985
|
|
9
|
+
// https://github.com/radix-ui/primitives/issues/2796
|
|
10
|
+
var useReactInsertionEffect = React__default[' useInsertionEffect '.trim().toString()];
|
|
11
|
+
var useInsertionEffectFallback = useReactInsertionEffect || useIsomorphicLayoutEffect;
|
|
12
|
+
|
|
5
13
|
/**
|
|
6
14
|
* This hook is user-land implementation of the experimental `useEffectEvent` hook.
|
|
7
15
|
* React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
|
|
@@ -10,10 +18,8 @@ import { useRef, useInsertionEffect, useCallback } from 'react';
|
|
|
10
18
|
*/
|
|
11
19
|
function useCallbackRef(callback) {
|
|
12
20
|
var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
13
|
-
var callbackRef = useRef(
|
|
14
|
-
|
|
15
|
-
});
|
|
16
|
-
useInsertionEffect(function () {
|
|
21
|
+
var callbackRef = useRef(callback);
|
|
22
|
+
useInsertionEffectFallback(function () {
|
|
17
23
|
callbackRef.current = callback;
|
|
18
24
|
});
|
|
19
25
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCallbackRef.js","sources":["../../../../../src/utils/useCallbackRef.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { useCallback,
|
|
1
|
+
{"version":3,"file":"useCallbackRef.js","sources":["../../../../../src/utils/useCallbackRef.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport React, { useCallback, useRef } from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\n// Prevent webpack from importing this:\n// https://github.com/webpack/webpack/issues/14814#issuecomment-1536757985\n// https://github.com/radix-ui/primitives/issues/2796\nconst useReactInsertionEffect = (React as any)[' useInsertionEffect '.trim().toString()];\nconst useInsertionEffectFallback = useReactInsertionEffect || useIsomorphicLayoutEffect;\n\n/**\n * This hook is user-land implementation of the experimental `useEffectEvent` hook.\n * React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event\n *\n * This hook is useful when you want to use a callback function inside a useEffect while keeping it \"fresh\" but you don't want to add it to the dependency array.\n */\nfunction useCallbackRef<Args extends unknown[], Return>(\n callback: ((...args: Args) => Return) | undefined,\n deps: React.DependencyList = [],\n) {\n const callbackRef = useRef<typeof callback>(callback);\n\n useInsertionEffectFallback(() => {\n callbackRef.current = callback;\n });\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return useCallback((...args: Args) => callbackRef.current?.(...args), deps);\n}\n\nexport { useCallbackRef };\n"],"names":["useReactInsertionEffect","React","trim","toString","useInsertionEffectFallback","useIsomorphicLayoutEffect","useCallbackRef","callback","deps","arguments","length","undefined","callbackRef","useRef","current","useCallback","_callbackRef$current","_len","args","Array","_key","call","apply","concat"],"mappings":";;;AAAA;AACA;;AAIA;AACA;AACA;AACA,IAAMA,uBAAuB,GAAIC,cAAK,CAAS,sBAAsB,CAACC,IAAI,EAAE,CAACC,QAAQ,EAAE,CAAC,CAAA;AACxF,IAAMC,0BAA0B,GAAGJ,uBAAuB,IAAIK,yBAAyB,CAAA;;AAEvF;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,cAAcA,CACrBC,QAAiD,EAEjD;AAAA,EAAA,IADAC,IAA0B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,EAAE,CAAA;AAE/B,EAAA,IAAMG,WAAW,GAAGC,MAAM,CAAkBN,QAAQ,CAAC,CAAA;AAErDH,EAAAA,0BAA0B,CAAC,YAAM;IAC/BQ,WAAW,CAACE,OAAO,GAAGP,QAAQ,CAAA;AAChC,GAAC,CAAC,CAAA;;AAEF;AACA,EAAA,OAAOQ,WAAW,CAAC,YAAA;AAAA,IAAA,IAAAC,oBAAA,CAAA;AAAA,IAAA,KAAA,IAAAC,IAAA,GAAAR,SAAA,CAAAC,MAAA,EAAIQ,IAAI,GAAAC,IAAAA,KAAA,CAAAF,IAAA,GAAAG,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAH,IAAA,EAAAG,IAAA,EAAA,EAAA;AAAJF,MAAAA,IAAI,CAAAE,IAAA,CAAAX,GAAAA,SAAA,CAAAW,IAAA,CAAA,CAAA;AAAA,KAAA;IAAA,OAAAJ,CAAAA,oBAAA,GAAWJ,WAAW,CAACE,OAAO,MAAAE,IAAAA,IAAAA,oBAAA,uBAAnBA,oBAAA,CAAAK,IAAA,CAAAC,KAAA,CAAAN,oBAAA,EAAA,CAAAJ,WAAW,CAAAW,CAAAA,MAAA,CAAcL,IAAI,CAAC,CAAA,CAAA;AAAA,GAAA,EAAEV,IAAI,CAAC,CAAA;AAC7E;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { CardSurface } from './CardSurface';\nimport { CardProvider, useVerifyInsideCard } from './CardContext';\nimport { LinkOverlay } from './LinkOverlay';\nimport { CardRoot } from './CardRoot';\nimport type { CardSpacingValueType, LinkOverlayProps } from './types';\nimport { CARD_LINK_OVERLAY_ID } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { Elevation } from '~tokens/global';\nimport type { BoxProps } from '~components/Box';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { Platform } from '~utils';\nimport { isReactNative } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nexport const ComponentIds = {\n CardHeader: 'CardHeader',\n CardHeaderTrailing: 'CardHeaderTrailing',\n CardHeaderLeading: 'CardHeaderLeading',\n CardFooter: 'CardFooter',\n CardFooterTrailing: 'CardFooterTrailing',\n CardFooterLeading: 'CardFooterLeading',\n CardBody: 'CardBody',\n CardHeaderIcon: 'CardHeaderIcon',\n CardHeaderCounter: 'CardHeaderCounter',\n CardHeaderBadge: 'CardHeaderBadge',\n CardHeaderAmount: 'CardHeaderAmount',\n CardHeaderText: 'CardHeaderText',\n CardHeaderLink: 'CardHeaderLink',\n CardHeaderIconButton: 'CardHeaderIconButton',\n};\n\ntype CardSurfaceBackgroundColors = `surface.background.gray.${DotNotationToken<\n Theme['colors']['surface']['background']['gray']\n>}`;\n\nexport type CardProps = {\n /**\n * Card contents\n */\n children: React.ReactNode;\n /**\n * Sets the background color of the Card\n *\n * @default `surface.background.gray.intense`\n */\n backgroundColor?: CardSurfaceBackgroundColors;\n /**\n * Sets the border radius of the Card\n *\n * @default `medium`\n */\n borderRadius?: Extract<BoxProps['borderRadius'], 'medium' | 'large' | 'xlarge'>;\n /**\n * Sets the elevation for Cards\n *\n * eg: `theme.elevation.midRaised`\n *\n * @default `theme.elevation.lowRaised`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs\n */\n elevation?: keyof Elevation;\n /**\n * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n * @default `spacing.7`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--docs\n */\n padding?: CardSpacingValueType;\n /**\n * Sets the width of the card\n */\n width?: BoxProps['width'];\n /**\n * Sets the height of the card\n */\n height?: BoxProps['height'];\n /**\n * Sets minimum height of the card\n */\n minHeight?: BoxProps['minHeight'];\n /**\n * Sets minimum width of the card\n */\n minWidth?: BoxProps['minWidth'];\n /**\n * If `true`, the card will be in selected state\n * Card will have a primary color border around it.\n *\n * @default false\n */\n\n isSelected?: boolean;\n /**\n * Makes the Card linkable by setting the `href` prop\n *\n * @default undefined\n */\n href?: string;\n /**\n * Sets the `target` attribute for the linkable card\n */\n target?: string;\n /**\n * Sets the `rel` attribute for the linkable card\n */\n rel?: string;\n /**\n * Sets the accessibility label for the card\n * This is useful when the card has an `href` or `onClick` prop\n * Setting this will announce the label when the card is focused\n */\n accessibilityLabel?: string;\n /**\n * If `true`, the card will scale up on hover\n *\n * On mobile devices it will scale down on press\n *\n * **This prop is deprecated in favour of motion presets released in v12**\n *\n * ### Migration\n *\n * ```diff\n * - <Card\n * - shouldScaleOnHover\n * - />\n *\n * + <Scale motionTriggers={['hover']}>\n * + <Card />\n * + </Scale>\n * ```\n *\n * @default false\n *\n * @deprecated This prop is deprecated in favour of motion presets released in v12\n */\n shouldScaleOnHover?: boolean;\n /**\n * Callback triggered when the card is hovered\n */\n onHover?: () => void;\n /**\n * Callback triggered when the card is clicked\n */\n onClick?: (\n event: Platform.Select<{\n web: React.MouseEvent;\n native: GestureResponderEvent;\n }>,\n ) => void;\n /**\n * Sets the HTML element for the Card\n *\n * When `as` is set to `label`, the card will be rendered as a label element\n * This can be used to create a custom checkbox or radio button using the card\n *\n * @default undefined\n */\n as?: 'label';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n {\n children,\n backgroundColor = 'surface.background.gray.intense',\n borderRadius = 'medium',\n elevation = 'lowRaised',\n testID,\n padding = 'spacing.7',\n width,\n height,\n minHeight,\n minWidth,\n onClick,\n isSelected = false,\n accessibilityLabel,\n shouldScaleOnHover = false,\n onHover,\n href,\n target,\n rel,\n as,\n ...rest\n },\n ref,\n): React.ReactElement => {\n const [isFocused, setIsFocused] = React.useState(false);\n\n useVerifyAllowedChildren({\n children,\n componentName: 'Card',\n allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter],\n });\n\n const linkOverlayProps: LinkOverlayProps = {\n ...metaAttribute({ name: CARD_LINK_OVERLAY_ID }),\n ...makeAccessible({ label: accessibilityLabel, pressed: isSelected }),\n onFocus: () => {\n setIsFocused(true);\n },\n onBlur: () => {\n setIsFocused(false);\n },\n };\n const defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;\n\n return (\n <CardProvider>\n <CardRoot\n as={as}\n ref={ref as never}\n display={'block' as never}\n borderRadius=\"medium\"\n onMouseEnter={onHover as never}\n shouldScaleOnHover={shouldScaleOnHover}\n isSelected={isSelected}\n isFocused={isFocused}\n // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN\n onClick={isReactNative() ? onClick : undefined}\n width={width}\n height={height}\n minHeight={minHeight}\n minWidth={minWidth}\n href={href}\n accessibilityLabel={accessibilityLabel}\n {...metaAttribute({ name: MetaConstants.Card, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <CardSurface\n height={height}\n minHeight={minHeight}\n padding={padding}\n borderRadius={borderRadius}\n elevation={elevation}\n textAlign={'left' as never}\n backgroundColor={backgroundColor}\n >\n {href ? (\n <LinkOverlay\n onClick={onClick}\n href={href}\n target={target}\n rel={rel ?? defaultRel}\n {...linkOverlayProps}\n />\n ) : null}\n {!href && onClick ? (\n <LinkOverlay as=\"button\" onClick={onClick} {...linkOverlayProps} />\n ) : null}\n {children}\n </CardSurface>\n </CardRoot>\n </CardProvider>\n );\n};\n\ntype CardBodyProps = {\n children: React.ReactNode;\n height?: BoxProps['height'];\n} & TestID &\n DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n useVerifyInsideCard('CardBody');\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n {...makeAnalyticsAttribute(rest)}\n height={height}\n >\n {children}\n </BaseBox>\n );\n};\n\nconst Card = React.forwardRef(_Card);\nconst CardBody = assignWithoutSideEffects(_CardBody, { componentId: ComponentIds.CardBody });\n\nexport { Card, CardBody };\n"],"names":["ComponentIds","CardHeader","CardHeaderTrailing","CardHeaderLeading","CardFooter","CardFooterTrailing","CardFooterLeading","CardBody","CardHeaderIcon","CardHeaderCounter","CardHeaderBadge","CardHeaderAmount","CardHeaderText","CardHeaderLink","CardHeaderIconButton","_Card","_ref","ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","_objectSpread","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","onFocus","onBlur","defaultRel","undefined","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { CardSurface } from './CardSurface';\nimport { CardProvider, useVerifyInsideCard } from './CardContext';\nimport { LinkOverlay } from './LinkOverlay';\nimport { CardRoot } from './CardRoot';\nimport type { CardSpacingValueType, LinkOverlayProps } from './types';\nimport { CARD_LINK_OVERLAY_ID } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { Elevation } from '~tokens/global';\nimport type { BoxProps } from '~components/Box';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { Platform } from '~utils';\nimport { isReactNative } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nexport const ComponentIds = {\n CardHeader: 'CardHeader',\n CardHeaderTrailing: 'CardHeaderTrailing',\n CardHeaderLeading: 'CardHeaderLeading',\n CardFooter: 'CardFooter',\n CardFooterTrailing: 'CardFooterTrailing',\n CardFooterLeading: 'CardFooterLeading',\n CardBody: 'CardBody',\n CardHeaderIcon: 'CardHeaderIcon',\n CardHeaderCounter: 'CardHeaderCounter',\n CardHeaderBadge: 'CardHeaderBadge',\n CardHeaderAmount: 'CardHeaderAmount',\n CardHeaderText: 'CardHeaderText',\n CardHeaderLink: 'CardHeaderLink',\n CardHeaderIconButton: 'CardHeaderIconButton',\n};\n\ntype CardSurfaceBackgroundColors = `surface.background.gray.${DotNotationToken<\n Theme['colors']['surface']['background']['gray']\n>}`;\n\nexport type CardProps = {\n /**\n * Card contents\n */\n children: React.ReactNode;\n /**\n * Sets the background color of the Card\n *\n * @default `surface.background.gray.intense`\n */\n backgroundColor?: CardSurfaceBackgroundColors;\n /**\n * Sets the border radius of the Card\n *\n * @default `medium`\n */\n borderRadius?: Extract<BoxProps['borderRadius'], 'medium' | 'large' | 'xlarge'>;\n /**\n * Sets the elevation for Cards\n *\n * eg: `theme.elevation.midRaised`\n *\n * @default `theme.elevation.lowRaised`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs\n */\n elevation?: keyof Elevation;\n /**\n * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n * @default `spacing.7`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--docs\n */\n padding?: CardSpacingValueType;\n /**\n * Sets the width of the card\n */\n width?: BoxProps['width'];\n /**\n * Sets the height of the card\n */\n height?: BoxProps['height'];\n /**\n * Sets minimum height of the card\n */\n minHeight?: BoxProps['minHeight'];\n /**\n * Sets minimum width of the card\n */\n minWidth?: BoxProps['minWidth'];\n /**\n * If `true`, the card will be in selected state\n * Card will have a primary color border around it.\n *\n * @default false\n */\n\n isSelected?: boolean;\n /**\n * Makes the Card linkable by setting the `href` prop\n *\n * @default undefined\n */\n href?: string;\n /**\n * Sets the `target` attribute for the linkable card\n */\n target?: string;\n /**\n * Sets the `rel` attribute for the linkable card\n */\n rel?: string;\n /**\n * Sets the accessibility label for the card\n * This is useful when the card has an `href` or `onClick` prop\n * Setting this will announce the label when the card is focused\n */\n accessibilityLabel?: string;\n /**\n * If `true`, the card will scale up on hover\n *\n * On mobile devices it will scale down on press\n *\n * **This prop is deprecated in favour of motion presets released in v12**\n *\n * ### Migration\n *\n * ```diff\n * - <Card\n * - shouldScaleOnHover\n * - />\n *\n * + <Scale motionTriggers={['hover']}>\n * + <Card />\n * + </Scale>\n * ```\n *\n * @default false\n *\n * @deprecated This prop is deprecated in favour of motion presets released in v12\n */\n shouldScaleOnHover?: boolean;\n /**\n * Callback triggered when the card is hovered\n */\n onHover?: () => void;\n /**\n * Callback triggered when the card is clicked\n */\n onClick?: (\n event: Platform.Select<{\n web: React.MouseEvent;\n native: GestureResponderEvent;\n }>,\n ) => void;\n /**\n * Sets the HTML element for the Card\n *\n * When `as` is set to `label`, the card will be rendered as a label element\n * This can be used to create a custom checkbox or radio button using the card\n *\n * @default undefined\n */\n as?: 'label';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n {\n children,\n backgroundColor = 'surface.background.gray.intense',\n borderRadius = 'medium',\n elevation = 'lowRaised',\n testID,\n padding = 'spacing.7',\n width,\n height,\n minHeight,\n minWidth,\n onClick,\n isSelected = false,\n accessibilityLabel,\n shouldScaleOnHover = false,\n onHover,\n href,\n target,\n rel,\n as,\n ...rest\n },\n ref,\n): React.ReactElement => {\n const [isFocused, setIsFocused] = React.useState(false);\n\n useVerifyAllowedChildren({\n children,\n componentName: 'Card',\n allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter],\n });\n\n const linkOverlayProps: LinkOverlayProps = {\n ...metaAttribute({ name: CARD_LINK_OVERLAY_ID }),\n ...makeAccessible({ label: accessibilityLabel, pressed: isSelected }),\n onFocus: () => {\n setIsFocused(true);\n },\n onBlur: () => {\n setIsFocused(false);\n },\n };\n const defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;\n\n return (\n <CardProvider>\n <CardRoot\n as={as}\n ref={ref as never}\n display={'block' as never}\n borderRadius={borderRadius}\n onMouseEnter={onHover as never}\n shouldScaleOnHover={shouldScaleOnHover}\n isSelected={isSelected}\n isFocused={isFocused}\n // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN\n onClick={isReactNative() ? onClick : undefined}\n width={width}\n height={height}\n minHeight={minHeight}\n minWidth={minWidth}\n href={href}\n accessibilityLabel={accessibilityLabel}\n {...metaAttribute({ name: MetaConstants.Card, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <CardSurface\n height={height}\n minHeight={minHeight}\n padding={padding}\n borderRadius={borderRadius}\n elevation={elevation}\n textAlign={'left' as never}\n backgroundColor={backgroundColor}\n >\n {href ? (\n <LinkOverlay\n onClick={onClick}\n href={href}\n target={target}\n rel={rel ?? defaultRel}\n {...linkOverlayProps}\n />\n ) : null}\n {!href && onClick ? (\n <LinkOverlay as=\"button\" onClick={onClick} {...linkOverlayProps} />\n ) : null}\n {children}\n </CardSurface>\n </CardRoot>\n </CardProvider>\n );\n};\n\ntype CardBodyProps = {\n children: React.ReactNode;\n height?: BoxProps['height'];\n} & TestID &\n DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n useVerifyInsideCard('CardBody');\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n {...makeAnalyticsAttribute(rest)}\n height={height}\n >\n {children}\n </BaseBox>\n );\n};\n\nconst Card = React.forwardRef(_Card);\nconst CardBody = assignWithoutSideEffects(_CardBody, { componentId: ComponentIds.CardBody });\n\nexport { Card, CardBody };\n"],"names":["ComponentIds","CardHeader","CardHeaderTrailing","CardHeaderLeading","CardFooter","CardFooterTrailing","CardFooterLeading","CardBody","CardHeaderIcon","CardHeaderCounter","CardHeaderBadge","CardHeaderAmount","CardHeaderText","CardHeaderLink","CardHeaderIconButton","_Card","_ref","ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","_objectSpread","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","onFocus","onBlur","defaultRel","undefined","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":"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"}
|
|
@@ -1,7 +1,15 @@
|
|
|
1
|
-
import { useRef,
|
|
1
|
+
import React__default, { useRef, useCallback } from 'react';
|
|
2
|
+
import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
|
|
2
3
|
|
|
4
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
3
5
|
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
|
4
6
|
|
|
7
|
+
// Prevent webpack from importing this:
|
|
8
|
+
// https://github.com/webpack/webpack/issues/14814#issuecomment-1536757985
|
|
9
|
+
// https://github.com/radix-ui/primitives/issues/2796
|
|
10
|
+
var useReactInsertionEffect = React__default[' useInsertionEffect '.trim().toString()];
|
|
11
|
+
var useInsertionEffectFallback = useReactInsertionEffect || useIsomorphicLayoutEffect;
|
|
12
|
+
|
|
5
13
|
/**
|
|
6
14
|
* This hook is user-land implementation of the experimental `useEffectEvent` hook.
|
|
7
15
|
* React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
|
|
@@ -10,10 +18,8 @@ import { useRef, useInsertionEffect, useCallback } from 'react';
|
|
|
10
18
|
*/
|
|
11
19
|
function useCallbackRef(callback) {
|
|
12
20
|
var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
13
|
-
var callbackRef = useRef(
|
|
14
|
-
|
|
15
|
-
});
|
|
16
|
-
useInsertionEffect(function () {
|
|
21
|
+
var callbackRef = useRef(callback);
|
|
22
|
+
useInsertionEffectFallback(function () {
|
|
17
23
|
callbackRef.current = callback;
|
|
18
24
|
});
|
|
19
25
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCallbackRef.js","sources":["../../../../../src/utils/useCallbackRef.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { useCallback,
|
|
1
|
+
{"version":3,"file":"useCallbackRef.js","sources":["../../../../../src/utils/useCallbackRef.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport React, { useCallback, useRef } from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\n// Prevent webpack from importing this:\n// https://github.com/webpack/webpack/issues/14814#issuecomment-1536757985\n// https://github.com/radix-ui/primitives/issues/2796\nconst useReactInsertionEffect = (React as any)[' useInsertionEffect '.trim().toString()];\nconst useInsertionEffectFallback = useReactInsertionEffect || useIsomorphicLayoutEffect;\n\n/**\n * This hook is user-land implementation of the experimental `useEffectEvent` hook.\n * React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event\n *\n * This hook is useful when you want to use a callback function inside a useEffect while keeping it \"fresh\" but you don't want to add it to the dependency array.\n */\nfunction useCallbackRef<Args extends unknown[], Return>(\n callback: ((...args: Args) => Return) | undefined,\n deps: React.DependencyList = [],\n) {\n const callbackRef = useRef<typeof callback>(callback);\n\n useInsertionEffectFallback(() => {\n callbackRef.current = callback;\n });\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return useCallback((...args: Args) => callbackRef.current?.(...args), deps);\n}\n\nexport { useCallbackRef };\n"],"names":["useReactInsertionEffect","React","trim","toString","useInsertionEffectFallback","useIsomorphicLayoutEffect","useCallbackRef","callback","deps","arguments","length","undefined","callbackRef","useRef","current","useCallback","_callbackRef$current","_len","args","Array","_key","call","apply","concat"],"mappings":";;;AAAA;AACA;;AAIA;AACA;AACA;AACA,IAAMA,uBAAuB,GAAIC,cAAK,CAAS,sBAAsB,CAACC,IAAI,EAAE,CAACC,QAAQ,EAAE,CAAC,CAAA;AACxF,IAAMC,0BAA0B,GAAGJ,uBAAuB,IAAIK,yBAAyB,CAAA;;AAEvF;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,cAAcA,CACrBC,QAAiD,EAEjD;AAAA,EAAA,IADAC,IAA0B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,EAAE,CAAA;AAE/B,EAAA,IAAMG,WAAW,GAAGC,MAAM,CAAkBN,QAAQ,CAAC,CAAA;AAErDH,EAAAA,0BAA0B,CAAC,YAAM;IAC/BQ,WAAW,CAACE,OAAO,GAAGP,QAAQ,CAAA;AAChC,GAAC,CAAC,CAAA;;AAEF;AACA,EAAA,OAAOQ,WAAW,CAAC,YAAA;AAAA,IAAA,IAAAC,oBAAA,CAAA;AAAA,IAAA,KAAA,IAAAC,IAAA,GAAAR,SAAA,CAAAC,MAAA,EAAIQ,IAAI,GAAAC,IAAAA,KAAA,CAAAF,IAAA,GAAAG,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAH,IAAA,EAAAG,IAAA,EAAA,EAAA;AAAJF,MAAAA,IAAI,CAAAE,IAAA,CAAAX,GAAAA,SAAA,CAAAW,IAAA,CAAA,CAAA;AAAA,KAAA;IAAA,OAAAJ,CAAAA,oBAAA,GAAWJ,WAAW,CAACE,OAAO,MAAAE,IAAAA,IAAAA,oBAAA,uBAAnBA,oBAAA,CAAAK,IAAA,CAAAC,KAAA,CAAAN,oBAAA,EAAA,CAAAJ,WAAW,CAAAW,CAAAA,MAAA,CAAcL,IAAI,CAAC,CAAA,CAAA;AAAA,GAAA,EAAEV,IAAI,CAAC,CAAA;AAC7E;;;;"}
|