@razorpay/blade 11.24.3 → 11.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/lib/native/components/Avatar/TrustedBadgeIcon.native.js +7 -0
- package/build/lib/native/components/Avatar/TrustedBadgeIcon.native.js.map +1 -0
- package/build/lib/native/components/BaseMenu/BaseMenuItem/BaseMenuItem.js +1 -1
- package/build/lib/native/components/BaseMenu/BaseMenuItem/BaseMenuItem.js.map +1 -1
- package/build/lib/native/components/Dropdown/Dropdown.js +1 -1
- package/build/lib/native/components/Dropdown/Dropdown.js.map +1 -1
- package/build/lib/native/components/Indicator/Indicator.js +2 -1
- package/build/lib/native/components/Indicator/Indicator.js.map +1 -1
- package/build/lib/native/components/Input/BaseInput/BaseInput.js +1 -1
- package/build/lib/native/components/Input/BaseInput/BaseInput.js.map +1 -1
- package/build/lib/native/components/Input/BaseInput/BaseInputVisuals.js +1 -1
- package/build/lib/native/components/Input/BaseInput/BaseInputVisuals.js.map +1 -1
- package/build/lib/native/components/Input/BaseInput/baseInputStyles.js +1 -1
- package/build/lib/native/components/Input/BaseInput/baseInputStyles.js.map +1 -1
- package/build/lib/native/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.js +4 -1
- package/build/lib/native/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.js.map +1 -1
- package/build/lib/native/components/Spinner/BaseSpinner/BaseSpinner.js +1 -1
- package/build/lib/native/components/Spinner/BaseSpinner/BaseSpinner.js.map +1 -1
- package/build/lib/native/components/StepGroup/StepItemMarker.js +1 -1
- package/build/lib/native/components/StepGroup/StepItemMarker.js.map +1 -1
- package/build/lib/native/components/Table/TableBody.native.js +2 -2
- package/build/lib/native/components/Table/TableBody.native.js.map +1 -1
- package/build/lib/native/components/Table/TableContext.js +6 -0
- package/build/lib/native/components/Table/TableContext.js.map +1 -0
- package/build/lib/native/components/Table/TableEditableCell.native.js +16 -0
- package/build/lib/native/components/Table/TableEditableCell.native.js.map +1 -0
- package/build/lib/native/components/Table/TableEditableCellContext.js +6 -0
- package/build/lib/native/components/Table/TableEditableCellContext.js.map +1 -0
- package/build/lib/native/components/Table/TablePagination.native.js +2 -2
- package/build/lib/native/components/Table/TablePagination.native.js.map +1 -1
- package/build/lib/native/components/Table/TableToolbar.native.js +2 -2
- package/build/lib/native/components/Table/TableToolbar.native.js.map +1 -1
- package/build/lib/native/components/Table/tokens.js +22 -0
- package/build/lib/native/components/Table/tokens.js.map +1 -0
- package/build/lib/native/components/index.js +5 -3
- package/build/lib/native/components/index.js.map +1 -1
- package/build/lib/native/tokens/theme/createTheme.js +1 -1
- package/build/lib/native/tokens/theme/createTheme.js.map +1 -1
- package/build/lib/web/development/components/Avatar/Avatar.web.js +42 -3
- package/build/lib/web/development/components/Avatar/Avatar.web.js.map +1 -1
- package/build/lib/web/development/components/Avatar/AvatarButton.js +8 -3
- package/build/lib/web/development/components/Avatar/AvatarButton.js.map +1 -1
- package/build/lib/web/development/components/Avatar/StyledAvatar.js +11 -5
- package/build/lib/web/development/components/Avatar/StyledAvatar.js.map +1 -1
- package/build/lib/web/development/components/Avatar/StyledAvatarButton.js +10 -6
- package/build/lib/web/development/components/Avatar/StyledAvatarButton.js.map +1 -1
- package/build/lib/web/development/components/Avatar/TrustedBadgeIcon.web.js +195 -0
- package/build/lib/web/development/components/Avatar/TrustedBadgeIcon.web.js.map +1 -0
- package/build/lib/web/development/components/Avatar/avatarTokens.js +61 -1
- package/build/lib/web/development/components/Avatar/avatarTokens.js.map +1 -1
- package/build/lib/web/development/components/Avatar/index.js +1 -0
- package/build/lib/web/development/components/Avatar/index.js.map +1 -1
- package/build/lib/web/development/components/BaseMenu/BaseMenuItem/BaseMenuItem.js +1 -1
- package/build/lib/web/development/components/BaseMenu/BaseMenuItem/BaseMenuItem.js.map +1 -1
- package/build/lib/web/development/components/Dropdown/Dropdown.js +3 -1
- package/build/lib/web/development/components/Dropdown/Dropdown.js.map +1 -1
- package/build/lib/web/development/components/Indicator/Indicator.js +7 -2
- package/build/lib/web/development/components/Indicator/Indicator.js.map +1 -1
- package/build/lib/web/development/components/Input/BaseInput/AnimatedBaseInputWrapper.web.js +1 -1
- package/build/lib/web/development/components/Input/BaseInput/AnimatedBaseInputWrapper.web.js.map +1 -1
- package/build/lib/web/development/components/Input/BaseInput/BaseInput.js +5 -3
- package/build/lib/web/development/components/Input/BaseInput/BaseInput.js.map +1 -1
- package/build/lib/web/development/components/Input/BaseInput/BaseInputTagSlot.web.js +55 -33
- package/build/lib/web/development/components/Input/BaseInput/BaseInputTagSlot.web.js.map +1 -1
- package/build/lib/web/development/components/Input/BaseInput/BaseInputVisuals.js +4 -4
- package/build/lib/web/development/components/Input/BaseInput/BaseInputVisuals.js.map +1 -1
- package/build/lib/web/development/components/Input/BaseInput/baseInputStyles.js +4 -2
- package/build/lib/web/development/components/Input/BaseInput/baseInputStyles.js.map +1 -1
- package/build/lib/web/development/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.js +22 -4
- package/build/lib/web/development/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.js.map +1 -1
- package/build/lib/web/development/components/Spinner/BaseSpinner/BaseSpinner.js +3 -3
- package/build/lib/web/development/components/Spinner/BaseSpinner/BaseSpinner.js.map +1 -1
- package/build/lib/web/development/components/StepGroup/StepItemMarker.js +0 -1
- package/build/lib/web/development/components/StepGroup/StepItemMarker.js.map +1 -1
- package/build/lib/web/development/components/Table/TableBody.web.js +26 -166
- package/build/lib/web/development/components/Table/TableBody.web.js.map +1 -1
- package/build/lib/web/development/components/Table/TableEditableCell.web.js +194 -0
- package/build/lib/web/development/components/Table/TableEditableCell.web.js.map +1 -0
- package/build/lib/web/development/components/Table/TableEditableCellContext.js +12 -0
- package/build/lib/web/development/components/Table/TableEditableCellContext.js.map +1 -0
- package/build/lib/web/development/components/Table/TablePagination.web.js +3 -2
- package/build/lib/web/development/components/Table/TablePagination.web.js.map +1 -1
- package/build/lib/web/development/components/Table/index.js +2 -2
- package/build/lib/web/development/components/Table/tokens.js +14 -2
- package/build/lib/web/development/components/Table/tokens.js.map +1 -1
- package/build/lib/web/development/components/index.js +3 -1
- package/build/lib/web/development/components/index.js.map +1 -1
- package/build/lib/web/development/tokens/theme/createTheme.js +5 -2
- package/build/lib/web/development/tokens/theme/createTheme.js.map +1 -1
- package/build/lib/web/production/components/Avatar/Avatar.web.js +42 -3
- package/build/lib/web/production/components/Avatar/Avatar.web.js.map +1 -1
- package/build/lib/web/production/components/Avatar/AvatarButton.js +8 -3
- package/build/lib/web/production/components/Avatar/AvatarButton.js.map +1 -1
- package/build/lib/web/production/components/Avatar/StyledAvatar.js +11 -5
- package/build/lib/web/production/components/Avatar/StyledAvatar.js.map +1 -1
- package/build/lib/web/production/components/Avatar/StyledAvatarButton.js +10 -6
- package/build/lib/web/production/components/Avatar/StyledAvatarButton.js.map +1 -1
- package/build/lib/web/production/components/Avatar/TrustedBadgeIcon.web.js +195 -0
- package/build/lib/web/production/components/Avatar/TrustedBadgeIcon.web.js.map +1 -0
- package/build/lib/web/production/components/Avatar/avatarTokens.js +61 -1
- package/build/lib/web/production/components/Avatar/avatarTokens.js.map +1 -1
- package/build/lib/web/production/components/Avatar/index.js +1 -0
- package/build/lib/web/production/components/Avatar/index.js.map +1 -1
- package/build/lib/web/production/components/BaseMenu/BaseMenuItem/BaseMenuItem.js +1 -1
- package/build/lib/web/production/components/BaseMenu/BaseMenuItem/BaseMenuItem.js.map +1 -1
- package/build/lib/web/production/components/Dropdown/Dropdown.js +3 -1
- package/build/lib/web/production/components/Dropdown/Dropdown.js.map +1 -1
- package/build/lib/web/production/components/Indicator/Indicator.js +7 -2
- package/build/lib/web/production/components/Indicator/Indicator.js.map +1 -1
- package/build/lib/web/production/components/Input/BaseInput/AnimatedBaseInputWrapper.web.js +1 -1
- package/build/lib/web/production/components/Input/BaseInput/AnimatedBaseInputWrapper.web.js.map +1 -1
- package/build/lib/web/production/components/Input/BaseInput/BaseInput.js +5 -3
- package/build/lib/web/production/components/Input/BaseInput/BaseInput.js.map +1 -1
- package/build/lib/web/production/components/Input/BaseInput/BaseInputTagSlot.web.js +55 -33
- package/build/lib/web/production/components/Input/BaseInput/BaseInputTagSlot.web.js.map +1 -1
- package/build/lib/web/production/components/Input/BaseInput/BaseInputVisuals.js +4 -4
- package/build/lib/web/production/components/Input/BaseInput/BaseInputVisuals.js.map +1 -1
- package/build/lib/web/production/components/Input/BaseInput/baseInputStyles.js +4 -2
- package/build/lib/web/production/components/Input/BaseInput/baseInputStyles.js.map +1 -1
- package/build/lib/web/production/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.js +22 -4
- package/build/lib/web/production/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.js.map +1 -1
- package/build/lib/web/production/components/Spinner/BaseSpinner/BaseSpinner.js +3 -3
- package/build/lib/web/production/components/Spinner/BaseSpinner/BaseSpinner.js.map +1 -1
- package/build/lib/web/production/components/StepGroup/StepItemMarker.js +0 -1
- package/build/lib/web/production/components/StepGroup/StepItemMarker.js.map +1 -1
- package/build/lib/web/production/components/Table/TableBody.web.js +26 -166
- package/build/lib/web/production/components/Table/TableBody.web.js.map +1 -1
- package/build/lib/web/production/components/Table/TableEditableCell.web.js +194 -0
- package/build/lib/web/production/components/Table/TableEditableCell.web.js.map +1 -0
- package/build/lib/web/production/components/Table/TableEditableCellContext.js +12 -0
- package/build/lib/web/production/components/Table/TableEditableCellContext.js.map +1 -0
- package/build/lib/web/production/components/Table/TablePagination.web.js +3 -2
- package/build/lib/web/production/components/Table/TablePagination.web.js.map +1 -1
- package/build/lib/web/production/components/Table/index.js +2 -2
- package/build/lib/web/production/components/Table/tokens.js +14 -2
- package/build/lib/web/production/components/Table/tokens.js.map +1 -1
- package/build/lib/web/production/components/index.js +3 -1
- package/build/lib/web/production/components/index.js.map +1 -1
- package/build/lib/web/production/tokens/theme/createTheme.js +5 -2
- package/build/lib/web/production/tokens/theme/createTheme.js.map +1 -1
- package/build/types/components/index.d.ts +38 -20
- package/build/types/components/index.native.d.ts +37 -22
- package/build/types/tokens/index.d.ts +6 -3
- package/build/types/tokens/index.native.d.ts +6 -3
- package/package.json +1 -1
- package/build/lib/web/development/components/Table/types.js +0 -2
- package/build/lib/web/development/components/Table/types.js.map +0 -1
- package/build/lib/web/production/components/Table/types.js +0 -2
- package/build/lib/web/production/components/Table/types.js.map +0 -1
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { throwBladeError } from '../../utils/logger/logger.js';
|
|
2
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
var TrustedBadgeIcon=function TrustedBadgeIcon(){throwBladeError({message:'TrustedBadgeIcon is not yet implemented for React Native',moduleName:'TrustedBadgeIcon'});return jsx(Fragment,{});};
|
|
5
|
+
|
|
6
|
+
export { TrustedBadgeIcon };
|
|
7
|
+
//# sourceMappingURL=TrustedBadgeIcon.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TrustedBadgeIcon.native.js","sources":["../../../../../src/components/Avatar/TrustedBadgeIcon.native.tsx"],"sourcesContent":["import { throwBladeError } from '~utils/logger';\n\nimport type { IconComponent } from '~components/Icons';\n\nconst TrustedBadgeIcon: IconComponent = () => {\n throwBladeError({\n message: 'TrustedBadgeIcon is not yet implemented for React Native',\n moduleName: 'TrustedBadgeIcon',\n });\n\n return <></>;\n};\n\nexport { TrustedBadgeIcon };\n"],"names":["TrustedBadgeIcon","throwBladeError","message","moduleName","_jsx","_Fragment"],"mappings":";;;AAIM,IAAAA,gBAA+B,CAAG,SAAlCA,gBAA+BA,EAAS,CAC5CC,eAAe,CAAC,CACdC,OAAO,CAAE,0DAA0D,CACnEC,UAAU,CAAE,kBACd,CAAC,CAAC,CAEF,OAAOC,GAAA,CAAAC,QAAA,CAAA,EAAI,CAAC,CACd;;;;"}
|
|
@@ -17,7 +17,7 @@ import '../../Typography/Code/Code.js';
|
|
|
17
17
|
import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.native.js';
|
|
18
18
|
import { useTruncationTitle } from '../../../utils/useTruncationTitle/useTruncationTitle.native.js';
|
|
19
19
|
|
|
20
|
-
var _excluded=["title","description","as","leading","trailing","titleSuffix","isDisabled","selectionType","isSelected","isVisible","color","role","children"];var menuItemTitleColor={negative:{default:'feedback.text.negative.intense',disabled:'interactive.text.gray.disabled'},normal:{default:'interactive.text.gray.normal',disabled:'interactive.text.gray.disabled'}};var menuItemDescriptionColor={default:'interactive.text.gray.muted',disabled:'interactive.text.gray.disabled'};var itemFirstRowHeight=makeSize(size[20]);var _BaseMenuItem=function _BaseMenuItem(_ref,ref){var title=_ref.title,description=_ref.description,as=_ref.as,leading=_ref.leading,trailing=_ref.trailing,titleSuffix=_ref.titleSuffix,isDisabled=_ref.isDisabled,_ref$selectionType=_ref.selectionType,selectionType=_ref$selectionType===void 0?'single':_ref$selectionType,isSelected=_ref.isSelected,_ref$isVisible=_ref.isVisible,isVisible=_ref$isVisible===void 0?true:_ref$isVisible,color=_ref.color,_ref$role=_ref.role,role=_ref$role===void 0?'menuitem':_ref$role,children=_ref.children,props=_objectWithoutProperties(_ref,_excluded);var _useTruncationTitle=useTruncationTitle({content:title}),containerRef=_useTruncationTitle.containerRef,textRef=_useTruncationTitle.textRef;return jsx(BaseMenuItemContext.Provider,{value:{color:color,isDisabled:isDisabled},children:jsx(StyledMenuItemContainer,Object.assign({ref:ref,as:as,type:"button",disabled:isDisabled},makeAccessible({role:role,current:role==='menuitem'||role==='menuitemcheckbox'?isSelected:undefined,disabled:isDisabled,selected:isSelected}),{color:color,isVisible:isVisible,isSelected:isSelected,isDisabled:isDisabled,selectionType:selectionType},props,{children:children?children:jsxs(Box,{display:"flex",alignItems:"flex-start",width:"100%",justifyContent:"
|
|
20
|
+
var _excluded=["title","description","as","leading","trailing","titleSuffix","isDisabled","selectionType","isSelected","isVisible","color","role","children"];var menuItemTitleColor={negative:{default:'feedback.text.negative.intense',disabled:'interactive.text.gray.disabled'},normal:{default:'interactive.text.gray.normal',disabled:'interactive.text.gray.disabled'}};var menuItemDescriptionColor={default:'interactive.text.gray.muted',disabled:'interactive.text.gray.disabled'};var itemFirstRowHeight=makeSize(size[20]);var _BaseMenuItem=function _BaseMenuItem(_ref,ref){var title=_ref.title,description=_ref.description,as=_ref.as,leading=_ref.leading,trailing=_ref.trailing,titleSuffix=_ref.titleSuffix,isDisabled=_ref.isDisabled,_ref$selectionType=_ref.selectionType,selectionType=_ref$selectionType===void 0?'single':_ref$selectionType,isSelected=_ref.isSelected,_ref$isVisible=_ref.isVisible,isVisible=_ref$isVisible===void 0?true:_ref$isVisible,color=_ref.color,_ref$role=_ref.role,role=_ref$role===void 0?'menuitem':_ref$role,children=_ref.children,props=_objectWithoutProperties(_ref,_excluded);var _useTruncationTitle=useTruncationTitle({content:title}),containerRef=_useTruncationTitle.containerRef,textRef=_useTruncationTitle.textRef;return jsx(BaseMenuItemContext.Provider,{value:{color:color,isDisabled:isDisabled},children:jsx(StyledMenuItemContainer,Object.assign({ref:ref,as:as,type:"button",disabled:isDisabled},makeAccessible({role:role,current:role==='menuitem'||role==='menuitemcheckbox'?isSelected:undefined,disabled:isDisabled,selected:isSelected}),{color:color,isVisible:isVisible,isSelected:isSelected,isDisabled:isDisabled,selectionType:selectionType},props,{children:children?children:jsxs(Box,{display:"flex",alignItems:"flex-start",width:"100%",justifyContent:"flex-start",children:[jsx(Box,{display:"flex",justifyContent:"center",alignItems:"center",height:itemFirstRowHeight,children:leading}),jsxs(Box,{paddingLeft:leading?'spacing.3':'spacing.0',paddingRight:"spacing.3",display:"flex",flexDirection:"column",children:[jsxs(Box,{display:"flex",alignItems:"center",flexDirection:"row",height:itemFirstRowHeight,ref:containerRef,children:[jsx(BaseText,Object.assign({as:"p",ref:textRef,truncateAfterLines:1,wordBreak:"break-all"},getTextProps({size:'medium',color:menuItemTitleColor[color==='negative'?'negative':'normal'][isDisabled?'disabled':'default'],weight:'regular'}),{children:title})),titleSuffix]}),jsx(Box,{children:description?jsx(Text,{color:menuItemDescriptionColor[isDisabled?'disabled':'default'],size:"small",children:description}):null})]}),jsx(Box,{marginLeft:"auto",children:trailing})]})}))});};var BaseMenuItem=React__default.forwardRef(_BaseMenuItem);
|
|
21
21
|
|
|
22
22
|
export { BaseMenuItem };
|
|
23
23
|
//# sourceMappingURL=BaseMenuItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseMenuItem.js","sources":["../../../../../../src/components/BaseMenu/BaseMenuItem/BaseMenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport type { BaseMenuItemProps } from '../types';\nimport { BaseMenuItemContext } from '../BaseMenuContext';\nimport { StyledMenuItemContainer } from './StyledMenuItemContainer';\nimport { Box } from '~components/Box';\nimport { getTextProps, Text } from '~components/Typography';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport type { BladeElementRef } from '~utils/types';\nimport { BaseText } from '~components/Typography/BaseText';\nimport { useTruncationTitle } from '~utils/useTruncationTitle';\n\nconst menuItemTitleColor = {\n negative: {\n default: 'feedback.text.negative.intense',\n disabled: 'interactive.text.gray.disabled',\n },\n normal: { default: 'interactive.text.gray.normal', disabled: 'interactive.text.gray.disabled' },\n} as const;\n\nconst menuItemDescriptionColor = {\n default: 'interactive.text.gray.muted',\n disabled: 'interactive.text.gray.disabled',\n} as const;\n\n// This is the height of item excluding the description to make sure description comes at the bottom and other first row items are center aligned\nconst itemFirstRowHeight = makeSize(size[20]);\n\nconst _BaseMenuItem: React.ForwardRefRenderFunction<BladeElementRef, BaseMenuItemProps> = (\n {\n title,\n description,\n as,\n leading,\n trailing,\n titleSuffix,\n isDisabled,\n selectionType = 'single',\n isSelected,\n isVisible = true,\n color,\n role = 'menuitem',\n children,\n ...props\n },\n ref,\n): React.ReactElement => {\n const { containerRef, textRef } = useTruncationTitle({ content: title });\n return (\n <BaseMenuItemContext.Provider value={{ color, isDisabled }}>\n <StyledMenuItemContainer\n ref={ref as never}\n as={as}\n type=\"button\"\n disabled={isDisabled}\n {...makeAccessible({\n role,\n current: role === 'menuitem' || role === 'menuitemcheckbox' ? isSelected : undefined,\n disabled: isDisabled,\n selected: isSelected,\n })}\n color={color}\n isVisible={isVisible}\n isSelected={isSelected}\n isDisabled={isDisabled}\n selectionType={selectionType}\n {...props}\n >\n {children ? (\n children\n ) : (\n <Box display=\"flex\" alignItems=\"flex-start\" width=\"100%\" justifyContent=\"
|
|
1
|
+
{"version":3,"file":"BaseMenuItem.js","sources":["../../../../../../src/components/BaseMenu/BaseMenuItem/BaseMenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport type { BaseMenuItemProps } from '../types';\nimport { BaseMenuItemContext } from '../BaseMenuContext';\nimport { StyledMenuItemContainer } from './StyledMenuItemContainer';\nimport { Box } from '~components/Box';\nimport { getTextProps, Text } from '~components/Typography';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport type { BladeElementRef } from '~utils/types';\nimport { BaseText } from '~components/Typography/BaseText';\nimport { useTruncationTitle } from '~utils/useTruncationTitle';\n\nconst menuItemTitleColor = {\n negative: {\n default: 'feedback.text.negative.intense',\n disabled: 'interactive.text.gray.disabled',\n },\n normal: { default: 'interactive.text.gray.normal', disabled: 'interactive.text.gray.disabled' },\n} as const;\n\nconst menuItemDescriptionColor = {\n default: 'interactive.text.gray.muted',\n disabled: 'interactive.text.gray.disabled',\n} as const;\n\n// This is the height of item excluding the description to make sure description comes at the bottom and other first row items are center aligned\nconst itemFirstRowHeight = makeSize(size[20]);\n\nconst _BaseMenuItem: React.ForwardRefRenderFunction<BladeElementRef, BaseMenuItemProps> = (\n {\n title,\n description,\n as,\n leading,\n trailing,\n titleSuffix,\n isDisabled,\n selectionType = 'single',\n isSelected,\n isVisible = true,\n color,\n role = 'menuitem',\n children,\n ...props\n },\n ref,\n): React.ReactElement => {\n const { containerRef, textRef } = useTruncationTitle({ content: title });\n return (\n <BaseMenuItemContext.Provider value={{ color, isDisabled }}>\n <StyledMenuItemContainer\n ref={ref as never}\n as={as}\n type=\"button\"\n disabled={isDisabled}\n {...makeAccessible({\n role,\n current: role === 'menuitem' || role === 'menuitemcheckbox' ? isSelected : undefined,\n disabled: isDisabled,\n selected: isSelected,\n })}\n color={color}\n isVisible={isVisible}\n isSelected={isSelected}\n isDisabled={isDisabled}\n selectionType={selectionType}\n {...props}\n >\n {children ? (\n children\n ) : (\n <Box display=\"flex\" alignItems=\"flex-start\" width=\"100%\" justifyContent=\"flex-start\">\n <Box\n display=\"flex\"\n justifyContent=\"center\"\n alignItems=\"center\"\n height={itemFirstRowHeight}\n >\n {leading}\n </Box>\n <Box\n paddingLeft={leading ? 'spacing.3' : 'spacing.0'}\n paddingRight=\"spacing.3\"\n display=\"flex\"\n flexDirection=\"column\"\n >\n <Box\n display=\"flex\"\n alignItems=\"center\"\n flexDirection=\"row\"\n height={itemFirstRowHeight}\n ref={containerRef as never}\n >\n <BaseText\n as=\"p\"\n ref={textRef as never}\n truncateAfterLines={1}\n wordBreak=\"break-all\"\n {...getTextProps({\n size: 'medium',\n color:\n menuItemTitleColor[color === 'negative' ? 'negative' : 'normal'][\n isDisabled ? 'disabled' : 'default'\n ],\n weight: 'regular',\n })}\n >\n {title}\n </BaseText>\n {titleSuffix}\n </Box>\n <Box>\n {description ? (\n <Text\n color={menuItemDescriptionColor[isDisabled ? 'disabled' : 'default']}\n size=\"small\"\n >\n {description}\n </Text>\n ) : null}\n </Box>\n </Box>\n <Box marginLeft=\"auto\">{trailing}</Box>\n </Box>\n )}\n </StyledMenuItemContainer>\n </BaseMenuItemContext.Provider>\n );\n};\n\nconst BaseMenuItem = React.forwardRef(_BaseMenuItem);\n\nexport { BaseMenuItem };\n"],"names":["menuItemTitleColor","negative","default","disabled","normal","menuItemDescriptionColor","itemFirstRowHeight","makeSize","size","_BaseMenuItem","_ref","ref","title","description","as","leading","trailing","titleSuffix","isDisabled","_ref$selectionType","selectionType","isSelected","_ref$isVisible","isVisible","color","_ref$role","role","children","props","_objectWithoutProperties","_excluded","_useTruncationTitle","useTruncationTitle","content","containerRef","textRef","_jsx","BaseMenuItemContext","Provider","value","StyledMenuItemContainer","Object","assign","type","makeAccessible","current","undefined","selected","_jsxs","Box","display","alignItems","width","justifyContent","height","paddingLeft","paddingRight","flexDirection","BaseText","truncateAfterLines","wordBreak","getTextProps","weight","Text","marginLeft","BaseMenuItem","React","forwardRef"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAA,SAAA,CAAA,CAAA,OAAA,CAAA,aAAA,CAAA,IAAA,CAAA,SAAA,CAAA,UAAA,CAAA,aAAA,CAAA,YAAA,CAAA,eAAA,CAAA,YAAA,CAAA,WAAA,CAAA,OAAA,CAAA,MAAA,CAAA,UAAA,CAAA,CAaA,IAAMA,kBAAkB,CAAG,CACzBC,QAAQ,CAAE,CACRC,OAAO,CAAE,gCAAgC,CACzCC,QAAQ,CAAE,gCACZ,CAAC,CACDC,MAAM,CAAE,CAAEF,OAAO,CAAE,8BAA8B,CAAEC,QAAQ,CAAE,gCAAiC,CAChG,CAAU,CAEV,IAAME,wBAAwB,CAAG,CAC/BH,OAAO,CAAE,6BAA6B,CACtCC,QAAQ,CAAE,gCACZ,CAAU,CAGV,IAAMG,kBAAkB,CAAGC,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAC,CAE7C,IAAMC,aAAiF,CAAG,SAApFA,aAAiFA,CAAAC,IAAA,CAiBrFC,GAAG,CACoB,CAhBrB,IAAAC,KAAK,CAAAF,IAAA,CAALE,KAAK,CACLC,WAAW,CAAAH,IAAA,CAAXG,WAAW,CACXC,EAAE,CAAAJ,IAAA,CAAFI,EAAE,CACFC,OAAO,CAAAL,IAAA,CAAPK,OAAO,CACPC,QAAQ,CAAAN,IAAA,CAARM,QAAQ,CACRC,WAAW,CAAAP,IAAA,CAAXO,WAAW,CACXC,UAAU,CAAAR,IAAA,CAAVQ,UAAU,CAAAC,kBAAA,CAAAT,IAAA,CACVU,aAAa,CAAbA,aAAa,CAAAD,kBAAA,GAAA,KAAA,CAAA,CAAG,QAAQ,CAAAA,kBAAA,CACxBE,UAAU,CAAAX,IAAA,CAAVW,UAAU,CAAAC,cAAA,CAAAZ,IAAA,CACVa,SAAS,CAATA,SAAS,CAAAD,cAAA,GAAG,KAAA,CAAA,CAAA,IAAI,CAAAA,cAAA,CAChBE,KAAK,CAAAd,IAAA,CAALc,KAAK,CAAAC,SAAA,CAAAf,IAAA,CACLgB,IAAI,CAAJA,IAAI,CAAAD,SAAA,GAAG,KAAA,CAAA,CAAA,UAAU,CAAAA,SAAA,CACjBE,QAAQ,CAAAjB,IAAA,CAARiB,QAAQ,CACLC,KAAK,CAAAC,wBAAA,CAAAnB,IAAA,CAAAoB,SAAA,CAAA,CAIV,IAAAC,mBAAA,CAAkCC,kBAAkB,CAAC,CAAEC,OAAO,CAAErB,KAAM,CAAC,CAAC,CAAhEsB,YAAY,CAAAH,mBAAA,CAAZG,YAAY,CAAEC,OAAO,CAAAJ,mBAAA,CAAPI,OAAO,CAC7B,OACEC,GAAA,CAACC,mBAAmB,CAACC,QAAQ,CAAA,CAACC,KAAK,CAAE,CAAEf,KAAK,CAALA,KAAK,CAAEN,UAAU,CAAVA,UAAW,CAAE,CAAAS,QAAA,CACzDS,GAAA,CAACI,uBAAuB,CAAAC,MAAA,CAAAC,MAAA,CAAA,CACtB/B,GAAG,CAAEA,GAAa,CAClBG,EAAE,CAAEA,EAAG,CACP6B,IAAI,CAAC,QAAQ,CACbxC,QAAQ,CAAEe,UAAW,CAAA,CACjB0B,cAAc,CAAC,CACjBlB,IAAI,CAAJA,IAAI,CACJmB,OAAO,CAAEnB,IAAI,GAAK,UAAU,EAAIA,IAAI,GAAK,kBAAkB,CAAGL,UAAU,CAAGyB,SAAS,CACpF3C,QAAQ,CAAEe,UAAU,CACpB6B,QAAQ,CAAE1B,UACZ,CAAC,CAAC,CACFG,CAAAA,KAAK,CAAEA,KAAM,CACbD,SAAS,CAAEA,SAAU,CACrBF,UAAU,CAAEA,UAAW,CACvBH,UAAU,CAAEA,UAAW,CACvBE,aAAa,CAAEA,aAAc,CAAA,CACzBQ,KAAK,CAAA,CAAAD,QAAA,CAERA,QAAQ,CACPA,QAAQ,CAERqB,IAAA,CAACC,GAAG,CAACC,CAAAA,OAAO,CAAC,MAAM,CAACC,UAAU,CAAC,YAAY,CAACC,KAAK,CAAC,MAAM,CAACC,cAAc,CAAC,YAAY,CAAA1B,QAAA,CAAA,CAClFS,GAAA,CAACa,GAAG,CACFC,CAAAA,OAAO,CAAC,MAAM,CACdG,cAAc,CAAC,QAAQ,CACvBF,UAAU,CAAC,QAAQ,CACnBG,MAAM,CAAEhD,kBAAmB,CAAAqB,QAAA,CAE1BZ,OAAO,CACL,CAAC,CACNiC,IAAA,CAACC,GAAG,CAAA,CACFM,WAAW,CAAExC,OAAO,CAAG,WAAW,CAAG,WAAY,CACjDyC,YAAY,CAAC,WAAW,CACxBN,OAAO,CAAC,MAAM,CACdO,aAAa,CAAC,QAAQ,CAAA9B,QAAA,CAAA,CAEtBqB,IAAA,CAACC,GAAG,CAAA,CACFC,OAAO,CAAC,MAAM,CACdC,UAAU,CAAC,QAAQ,CACnBM,aAAa,CAAC,KAAK,CACnBH,MAAM,CAAEhD,kBAAmB,CAC3BK,GAAG,CAAEuB,YAAsB,CAAAP,QAAA,EAE3BS,GAAA,CAACsB,QAAQ,CAAAjB,MAAA,CAAAC,MAAA,CAAA,CACP5B,EAAE,CAAC,GAAG,CACNH,GAAG,CAAEwB,OAAiB,CACtBwB,kBAAkB,CAAE,CAAE,CACtBC,SAAS,CAAC,WAAW,CACjBC,CAAAA,YAAY,CAAC,CACfrD,IAAI,CAAE,QAAQ,CACdgB,KAAK,CACHxB,kBAAkB,CAACwB,KAAK,GAAK,UAAU,CAAG,UAAU,CAAG,QAAQ,CAAC,CAC9DN,UAAU,CAAG,UAAU,CAAG,SAAS,CACpC,CACH4C,MAAM,CAAE,SACV,CAAC,CAAC,CAAA,CAAAnC,QAAA,CAEDf,KAAK,CACE,CAAA,CAAC,CACVK,WAAW,EACT,CAAC,CACNmB,GAAA,CAACa,GAAG,CAAA,CAAAtB,QAAA,CACDd,WAAW,CACVuB,GAAA,CAAC2B,IAAI,CACHvC,CAAAA,KAAK,CAAEnB,wBAAwB,CAACa,UAAU,CAAG,UAAU,CAAG,SAAS,CAAE,CACrEV,IAAI,CAAC,OAAO,CAAAmB,QAAA,CAEXd,WAAW,CACR,CAAC,CACL,IAAI,CACL,CAAC,CAAA,CACH,CAAC,CACNuB,GAAA,CAACa,GAAG,CAAA,CAACe,UAAU,CAAC,MAAM,CAAArC,QAAA,CAAEX,QAAQ,CAAM,CAAC,CAAA,CACpC,CACN,CACsB,CAAA,CAAC,CACE,CAAC,CAEnC,CAAC,CAEK,IAAAiD,YAAY,CAAGC,cAAK,CAACC,UAAU,CAAC1D,aAAa;;;;"}
|
|
@@ -20,7 +20,7 @@ import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
|
|
|
20
20
|
import { useControllableState } from '../../utils/useControllable.js';
|
|
21
21
|
import { jsx } from 'react/jsx-runtime';
|
|
22
22
|
|
|
23
|
-
var _excluded=["children","isOpen","onOpenChange","selectionType","testID"];var validDropdownChildren=[dropdownComponentIds.BaseBox,dropdownComponentIds.triggers.SelectInput,dropdownComponentIds.triggers.SearchInput,dropdownComponentIds.triggers.DropdownButton,dropdownComponentIds.triggers.DropdownLink,dropdownComponentIds.DropdownOverlay,dropdownComponentIds.triggers.AutoComplete,ComponentIds.BottomSheet];var _Dropdown=function _Dropdown(_ref){var children=_ref.children,isOpenControlled=_ref.isOpen,onOpenChange=_ref.onOpenChange,_ref$selectionType=_ref.selectionType,selectionType=_ref$selectionType===void 0?'single':_ref$selectionType,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded);var _React$useState=React__default.useState([]),_React$useState2=_slicedToArray(_React$useState,2),options=_React$useState2[0],setOptions=_React$useState2[1];var _React$useState3=React__default.useState([]),_React$useState4=_slicedToArray(_React$useState3,2),filteredValues=_React$useState4[0],setFilteredValues=_React$useState4[1];var _React$useState5=React__default.useState([]),_React$useState6=_slicedToArray(_React$useState5,2),selectedIndices=_React$useState6[0],setSelectedIndices=_React$useState6[1];var _React$useState7=React__default.useState([]),_React$useState8=_slicedToArray(_React$useState7,2),controlledValueIndices=_React$useState8[0],setControlledValueIndices=_React$useState8[1];var _React$useState9=React__default.useState(-1),_React$useState10=_slicedToArray(_React$useState9,2),activeIndex=_React$useState10[0],setActiveIndex=_React$useState10[1];var _React$useState11=React__default.useState(-1),_React$useState12=_slicedToArray(_React$useState11,2),activeTagIndex=_React$useState12[0],setActiveTagIndex=_React$useState12[1];var _React$useState13=React__default.useState(false),_React$useState14=_slicedToArray(_React$useState13,2),shouldIgnoreBlurAnimation=_React$useState14[0],setShouldIgnoreBlurAnimation=_React$useState14[1];var _React$useState15=React__default.useState(false),_React$useState16=_slicedToArray(_React$useState15,2),hasFooterAction=_React$useState16[0],setHasFooterAction=_React$useState16[1];var _React$useState17=React__default.useState(false),_React$useState18=_slicedToArray(_React$useState17,2),hasAutoCompleteInBottomSheetHeader=_React$useState18[0],setHasAutoCompleteInBottomSheetHeader=_React$useState18[1];var _React$useState19=React__default.useState(false),_React$useState20=_slicedToArray(_React$useState19,2),isKeydownPressed=_React$useState20[0],setIsKeydownPressed=_React$useState20[1];var _React$useState21=React__default.useState(0),_React$useState22=_slicedToArray(_React$useState21,2),changeCallbackTriggerer=_React$useState22[0],setChangeCallbackTriggerer=_React$useState22[1];var _React$useState23=React__default.useState(false),_React$useState24=_slicedToArray(_React$useState23,2),isControlled=_React$useState24[0],setIsControlled=_React$useState24[1];var _React$useState25=React__default.useState(false),_React$useState26=_slicedToArray(_React$useState25,2),dropdownHasBottomSheet=_React$useState26[0],setDropdownHasBottomSheet=_React$useState26[1];var triggererWrapperRef=React__default.useRef(null);var triggererRef=React__default.useRef(null);var actionListItemRef=React__default.useRef(null);var dropdownTriggerer=React__default.useRef();var isTagDismissedRef=React__default.useRef({value:false});var visibleTagsCountRef=React__default.useRef({value:0});var dropdownContainerRef=React__default.useRef(null);var dropdownBaseId=useId('dropdown');var isDropdownOpenRef=React__default.useRef(isOpenControlled);var _useControllableState=useControllableState({value:isOpenControlled,defaultValue:false,onChange:function onChange(isOpenControlledValue){isDropdownOpenRef.current=isOpenControlledValue;onOpenChange==null?void 0:onOpenChange(isOpenControlledValue);}}),_useControllableState2=_slicedToArray(_useControllableState,2),isDropdownOpen=_useControllableState2[0],setIsDropdownOpen=_useControllableState2[1];isDropdownOpenRef.current=isDropdownOpen;var setIsOpen=function setIsOpen(isOpenValue){isDropdownOpenRef.current=isOpenValue;setIsDropdownOpen(function(){return isOpenValue;});};var close=React__default.useCallback(function(){setActiveTagIndex(-1);setIsOpen(false);},[]);React__default.Children.map(children,function(child){if(React__default.isValidElement(child)){if(__DEV__){var _getComponentId;if(!validDropdownChildren.includes((_getComponentId=getComponentId(child))!=null?_getComponentId:'')){throwBladeError({message:`Dropdown can only have one of following elements as children - \n\n ${validDropdownChildren.join(', ')} \n\n Check out: https://blade.razorpay.com/?path=/story/components-dropdown`,moduleName:'Dropdown'});}}if(isValidAllowedChildren(child,dropdownComponentIds.triggers.SelectInput)){dropdownTriggerer.current='SelectInput';}if(isValidAllowedChildren(child,dropdownComponentIds.triggers.SearchInput)){dropdownTriggerer.current='SearchInput';}if(isValidAllowedChildren(child,dropdownComponentIds.triggers.DropdownButton)){dropdownTriggerer.current='DropdownButton';}if(isValidAllowedChildren(child,dropdownComponentIds.triggers.AutoComplete)){dropdownTriggerer.current='AutoComplete';}}});var contextValue=React__default.useMemo(function(){return {isOpen:isDropdownOpen,setIsOpen:setIsOpen,close:close,selectedIndices:selectedIndices,setSelectedIndices:setSelectedIndices,controlledValueIndices:controlledValueIndices,setControlledValueIndices:setControlledValueIndices,options:options,setOptions:setOptions,filteredValues:filteredValues,setFilteredValues:setFilteredValues,activeIndex:activeIndex,setActiveIndex:setActiveIndex,activeTagIndex:activeTagIndex,setActiveTagIndex:setActiveTagIndex,visibleTagsCountRef:visibleTagsCountRef,shouldIgnoreBlurAnimation:shouldIgnoreBlurAnimation,setShouldIgnoreBlurAnimation:setShouldIgnoreBlurAnimation,isKeydownPressed:isKeydownPressed,setIsKeydownPressed:setIsKeydownPressed,dropdownBaseId:dropdownBaseId,triggererRef:triggererRef,triggererWrapperRef:triggererWrapperRef,actionListItemRef:actionListItemRef,selectionType:selectionType,hasFooterAction:hasFooterAction,setHasFooterAction:setHasFooterAction,hasAutoCompleteInBottomSheetHeader:hasAutoCompleteInBottomSheetHeader,setHasAutoCompleteInBottomSheetHeader:setHasAutoCompleteInBottomSheetHeader,dropdownTriggerer:dropdownTriggerer.current,changeCallbackTriggerer:changeCallbackTriggerer,setChangeCallbackTriggerer:setChangeCallbackTriggerer,isControlled:isControlled,setIsControlled:setIsControlled,isTagDismissedRef:isTagDismissedRef};},[isDropdownOpen,isOpenControlled,selectedIndices,controlledValueIndices,options,filteredValues,activeIndex,activeTagIndex,shouldIgnoreBlurAnimation,selectionType,hasFooterAction,isKeydownPressed,changeCallbackTriggerer,isControlled]);var BottomSheetAndDropdownGlueContextValue=React__default.useMemo(function(){return {isOpen:isDropdownOpen,dropdownHasBottomSheet:dropdownHasBottomSheet,hasAutoCompleteInBottomSheetHeader:hasAutoCompleteInBottomSheetHeader,setDropdownHasBottomSheet:setDropdownHasBottomSheet,onBottomSheetDismiss:close};},[dropdownHasBottomSheet,hasAutoCompleteInBottomSheetHeader,isDropdownOpen,close]);return jsx(BottomSheetAndDropdownGlueContext.Provider,{value:BottomSheetAndDropdownGlueContextValue,children:jsx(DropdownContext.Provider,{value:contextValue,children:jsx(BaseBox,Object.assign({ref:dropdownContainerRef},metaAttribute({name:MetaConstants.Dropdown,testID:testID}),getStyledProps(styledProps),{children:jsx(BaseBox,{position:"relative",textAlign:'left',children:children})}))})});};var Dropdown=assignWithoutSideEffects(_Dropdown,{componentId:dropdownComponentIds.Dropdown});
|
|
23
|
+
var _excluded=["children","isOpen","onOpenChange","selectionType","testID","_width"];var validDropdownChildren=[dropdownComponentIds.BaseBox,dropdownComponentIds.triggers.SelectInput,dropdownComponentIds.triggers.SearchInput,dropdownComponentIds.triggers.DropdownButton,dropdownComponentIds.triggers.DropdownLink,dropdownComponentIds.DropdownOverlay,dropdownComponentIds.triggers.AutoComplete,ComponentIds.BottomSheet];var _Dropdown=function _Dropdown(_ref){var children=_ref.children,isOpenControlled=_ref.isOpen,onOpenChange=_ref.onOpenChange,_ref$selectionType=_ref.selectionType,selectionType=_ref$selectionType===void 0?'single':_ref$selectionType,testID=_ref.testID,_width=_ref._width,styledProps=_objectWithoutProperties(_ref,_excluded);var _React$useState=React__default.useState([]),_React$useState2=_slicedToArray(_React$useState,2),options=_React$useState2[0],setOptions=_React$useState2[1];var _React$useState3=React__default.useState([]),_React$useState4=_slicedToArray(_React$useState3,2),filteredValues=_React$useState4[0],setFilteredValues=_React$useState4[1];var _React$useState5=React__default.useState([]),_React$useState6=_slicedToArray(_React$useState5,2),selectedIndices=_React$useState6[0],setSelectedIndices=_React$useState6[1];var _React$useState7=React__default.useState([]),_React$useState8=_slicedToArray(_React$useState7,2),controlledValueIndices=_React$useState8[0],setControlledValueIndices=_React$useState8[1];var _React$useState9=React__default.useState(-1),_React$useState10=_slicedToArray(_React$useState9,2),activeIndex=_React$useState10[0],setActiveIndex=_React$useState10[1];var _React$useState11=React__default.useState(-1),_React$useState12=_slicedToArray(_React$useState11,2),activeTagIndex=_React$useState12[0],setActiveTagIndex=_React$useState12[1];var _React$useState13=React__default.useState(false),_React$useState14=_slicedToArray(_React$useState13,2),shouldIgnoreBlurAnimation=_React$useState14[0],setShouldIgnoreBlurAnimation=_React$useState14[1];var _React$useState15=React__default.useState(false),_React$useState16=_slicedToArray(_React$useState15,2),hasFooterAction=_React$useState16[0],setHasFooterAction=_React$useState16[1];var _React$useState17=React__default.useState(false),_React$useState18=_slicedToArray(_React$useState17,2),hasAutoCompleteInBottomSheetHeader=_React$useState18[0],setHasAutoCompleteInBottomSheetHeader=_React$useState18[1];var _React$useState19=React__default.useState(false),_React$useState20=_slicedToArray(_React$useState19,2),isKeydownPressed=_React$useState20[0],setIsKeydownPressed=_React$useState20[1];var _React$useState21=React__default.useState(0),_React$useState22=_slicedToArray(_React$useState21,2),changeCallbackTriggerer=_React$useState22[0],setChangeCallbackTriggerer=_React$useState22[1];var _React$useState23=React__default.useState(false),_React$useState24=_slicedToArray(_React$useState23,2),isControlled=_React$useState24[0],setIsControlled=_React$useState24[1];var _React$useState25=React__default.useState(false),_React$useState26=_slicedToArray(_React$useState25,2),dropdownHasBottomSheet=_React$useState26[0],setDropdownHasBottomSheet=_React$useState26[1];var triggererWrapperRef=React__default.useRef(null);var triggererRef=React__default.useRef(null);var actionListItemRef=React__default.useRef(null);var dropdownTriggerer=React__default.useRef();var isTagDismissedRef=React__default.useRef({value:false});var visibleTagsCountRef=React__default.useRef({value:0});var dropdownContainerRef=React__default.useRef(null);var dropdownBaseId=useId('dropdown');var isDropdownOpenRef=React__default.useRef(isOpenControlled);var _useControllableState=useControllableState({value:isOpenControlled,defaultValue:false,onChange:function onChange(isOpenControlledValue){isDropdownOpenRef.current=isOpenControlledValue;onOpenChange==null?void 0:onOpenChange(isOpenControlledValue);}}),_useControllableState2=_slicedToArray(_useControllableState,2),isDropdownOpen=_useControllableState2[0],setIsDropdownOpen=_useControllableState2[1];isDropdownOpenRef.current=isDropdownOpen;var setIsOpen=function setIsOpen(isOpenValue){isDropdownOpenRef.current=isOpenValue;setIsDropdownOpen(function(){return isOpenValue;});};var close=React__default.useCallback(function(){setActiveTagIndex(-1);setIsOpen(false);},[]);React__default.Children.map(children,function(child){if(React__default.isValidElement(child)){if(__DEV__){var _getComponentId;if(!validDropdownChildren.includes((_getComponentId=getComponentId(child))!=null?_getComponentId:'')){throwBladeError({message:`Dropdown can only have one of following elements as children - \n\n ${validDropdownChildren.join(', ')} \n\n Check out: https://blade.razorpay.com/?path=/story/components-dropdown`,moduleName:'Dropdown'});}}if(isValidAllowedChildren(child,dropdownComponentIds.triggers.SelectInput)){dropdownTriggerer.current='SelectInput';}if(isValidAllowedChildren(child,dropdownComponentIds.triggers.SearchInput)){dropdownTriggerer.current='SearchInput';}if(isValidAllowedChildren(child,dropdownComponentIds.triggers.DropdownButton)){dropdownTriggerer.current='DropdownButton';}if(isValidAllowedChildren(child,dropdownComponentIds.triggers.AutoComplete)){dropdownTriggerer.current='AutoComplete';}}});var contextValue=React__default.useMemo(function(){return {isOpen:isDropdownOpen,setIsOpen:setIsOpen,close:close,selectedIndices:selectedIndices,setSelectedIndices:setSelectedIndices,controlledValueIndices:controlledValueIndices,setControlledValueIndices:setControlledValueIndices,options:options,setOptions:setOptions,filteredValues:filteredValues,setFilteredValues:setFilteredValues,activeIndex:activeIndex,setActiveIndex:setActiveIndex,activeTagIndex:activeTagIndex,setActiveTagIndex:setActiveTagIndex,visibleTagsCountRef:visibleTagsCountRef,shouldIgnoreBlurAnimation:shouldIgnoreBlurAnimation,setShouldIgnoreBlurAnimation:setShouldIgnoreBlurAnimation,isKeydownPressed:isKeydownPressed,setIsKeydownPressed:setIsKeydownPressed,dropdownBaseId:dropdownBaseId,triggererRef:triggererRef,triggererWrapperRef:triggererWrapperRef,actionListItemRef:actionListItemRef,selectionType:selectionType,hasFooterAction:hasFooterAction,setHasFooterAction:setHasFooterAction,hasAutoCompleteInBottomSheetHeader:hasAutoCompleteInBottomSheetHeader,setHasAutoCompleteInBottomSheetHeader:setHasAutoCompleteInBottomSheetHeader,dropdownTriggerer:dropdownTriggerer.current,changeCallbackTriggerer:changeCallbackTriggerer,setChangeCallbackTriggerer:setChangeCallbackTriggerer,isControlled:isControlled,setIsControlled:setIsControlled,isTagDismissedRef:isTagDismissedRef};},[isDropdownOpen,isOpenControlled,selectedIndices,controlledValueIndices,options,filteredValues,activeIndex,activeTagIndex,shouldIgnoreBlurAnimation,selectionType,hasFooterAction,isKeydownPressed,changeCallbackTriggerer,isControlled]);var BottomSheetAndDropdownGlueContextValue=React__default.useMemo(function(){return {isOpen:isDropdownOpen,dropdownHasBottomSheet:dropdownHasBottomSheet,hasAutoCompleteInBottomSheetHeader:hasAutoCompleteInBottomSheetHeader,setDropdownHasBottomSheet:setDropdownHasBottomSheet,onBottomSheetDismiss:close};},[dropdownHasBottomSheet,hasAutoCompleteInBottomSheetHeader,isDropdownOpen,close]);return jsx(BottomSheetAndDropdownGlueContext.Provider,{value:BottomSheetAndDropdownGlueContextValue,children:jsx(DropdownContext.Provider,{value:contextValue,children:jsx(BaseBox,Object.assign({ref:dropdownContainerRef},metaAttribute({name:MetaConstants.Dropdown,testID:testID}),getStyledProps(styledProps),{width:_width,children:jsx(BaseBox,{position:"relative",textAlign:'left',children:children})}))})});};var Dropdown=assignWithoutSideEffects(_Dropdown,{componentId:dropdownComponentIds.Dropdown});
|
|
24
24
|
|
|
25
25
|
export { Dropdown };
|
|
26
26
|
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sources":["../../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React from 'react';\nimport { DropdownContext } from './useDropdown';\nimport type { DropdownContextType } from './useDropdown';\nimport type { DropdownProps } from './types';\nimport { dropdownComponentIds } from './dropdownComponentIds';\nimport { useId } from '~utils/useId';\nimport { ComponentIds as bottomSheetComponentIds } from '~components/BottomSheet/componentIds';\nimport { BottomSheetAndDropdownGlueContext } from '~components/BottomSheet/BottomSheetContext';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport BaseBox from '~components/Box/BaseBox';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { throwBladeError } from '~utils/logger';\nimport type { ContainerElementType } from '~utils/types';\nimport { useControllableState } from '~utils/useControllable';\n\nconst validDropdownChildren = [\n // TODO: Remove Box once CountrySelector's button sizing is fixed\n dropdownComponentIds.BaseBox,\n dropdownComponentIds.triggers.SelectInput,\n dropdownComponentIds.triggers.SearchInput,\n dropdownComponentIds.triggers.DropdownButton,\n dropdownComponentIds.triggers.DropdownLink,\n dropdownComponentIds.DropdownOverlay,\n dropdownComponentIds.triggers.AutoComplete,\n bottomSheetComponentIds.BottomSheet,\n];\n\n/**\n * ### Dropdown component\n *\n * Dropdown component is generic component that controls the dropdown functionality.\n * It can be used with multiple triggers and mostly contains ActionList component inside it\n *\n * ---\n *\n * #### Usage\n *\n * ```jsx\n * <Dropdown selectionType=\"single\">\n * <SelectInput />\n * <DropdownOverlay>\n * <ActionList>\n * <ActionListItem />\n * <ActionListItem />\n * </ActionList>\n * </DropdownOverlay>\n * </Dropdown>\n * ```\n *\n * ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select Dropdown Documentation}\n */\nconst _Dropdown = ({\n children,\n isOpen: isOpenControlled,\n onOpenChange,\n selectionType = 'single',\n testID,\n ...styledProps\n}: DropdownProps): React.ReactElement => {\n const [options, setOptions] = React.useState<DropdownContextType['options']>([]);\n const [filteredValues, setFilteredValues] = React.useState<string[]>([]);\n const [selectedIndices, setSelectedIndices] = React.useState<\n DropdownContextType['selectedIndices']\n >([]);\n const [controlledValueIndices, setControlledValueIndices] = React.useState<\n DropdownContextType['selectedIndices']\n >([]);\n const [activeIndex, setActiveIndex] = React.useState(-1);\n const [activeTagIndex, setActiveTagIndex] = React.useState(-1);\n const [shouldIgnoreBlurAnimation, setShouldIgnoreBlurAnimation] = React.useState(false);\n const [hasFooterAction, setHasFooterAction] = React.useState(false);\n const [\n hasAutoCompleteInBottomSheetHeader,\n setHasAutoCompleteInBottomSheetHeader,\n ] = React.useState(false);\n const [isKeydownPressed, setIsKeydownPressed] = React.useState(false);\n const [changeCallbackTriggerer, setChangeCallbackTriggerer] = React.useState<\n DropdownContextType['changeCallbackTriggerer']\n >(0);\n const [isControlled, setIsControlled] = React.useState(false);\n // keep track if dropdown contains bottomsheet\n const [dropdownHasBottomSheet, setDropdownHasBottomSheet] = React.useState(false);\n\n /**\n * In inputs, actual input is smaller than the visible input wrapper.\n * You can set this reference in such cases so floating ui calculations happen correctly\n * */\n const triggererWrapperRef = React.useRef<ContainerElementType>(null);\n const triggererRef = React.useRef<HTMLButtonElement>(null);\n const actionListItemRef = React.useRef<HTMLDivElement>(null);\n const dropdownTriggerer = React.useRef<DropdownContextType['dropdownTriggerer']>();\n const isTagDismissedRef = React.useRef<{ value: boolean } | null>({ value: false });\n const visibleTagsCountRef = React.useRef<{ value: number }>({ value: 0 });\n const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n\n const dropdownBaseId = useId('dropdown');\n const isDropdownOpenRef = React.useRef(isOpenControlled);\n\n const [isDropdownOpen, setIsDropdownOpen] = useControllableState({\n value: isOpenControlled,\n defaultValue: false,\n onChange: (isOpenControlledValue) => {\n isDropdownOpenRef.current = isOpenControlledValue;\n onOpenChange?.(isOpenControlledValue);\n },\n });\n\n isDropdownOpenRef.current = isDropdownOpen;\n\n const setIsOpen = (isOpenValue: boolean): void => {\n isDropdownOpenRef.current = isOpenValue;\n setIsDropdownOpen(() => isOpenValue);\n };\n\n const close = React.useCallback(() => {\n setActiveTagIndex(-1);\n setIsOpen(false);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n if (__DEV__) {\n if (!validDropdownChildren.includes(getComponentId(child) ?? '')) {\n throwBladeError({\n message: `Dropdown can only have one of following elements as children - \\n\\n ${validDropdownChildren.join(\n ', ',\n )} \\n\\n Check out: https://blade.razorpay.com/?path=/story/components-dropdown`,\n moduleName: 'Dropdown',\n });\n }\n }\n\n if (isValidAllowedChildren(child, dropdownComponentIds.triggers.SelectInput)) {\n dropdownTriggerer.current = 'SelectInput';\n }\n\n if (isValidAllowedChildren(child, dropdownComponentIds.triggers.SearchInput)) {\n dropdownTriggerer.current = 'SearchInput';\n }\n\n if (isValidAllowedChildren(child, dropdownComponentIds.triggers.DropdownButton)) {\n dropdownTriggerer.current = 'DropdownButton';\n }\n\n if (isValidAllowedChildren(child, dropdownComponentIds.triggers.AutoComplete)) {\n dropdownTriggerer.current = 'AutoComplete';\n }\n }\n });\n\n const contextValue = React.useMemo<DropdownContextType>(\n () => ({\n isOpen: isDropdownOpen,\n setIsOpen,\n close,\n selectedIndices,\n setSelectedIndices,\n controlledValueIndices,\n setControlledValueIndices,\n options,\n setOptions,\n filteredValues,\n setFilteredValues,\n activeIndex,\n setActiveIndex,\n activeTagIndex,\n setActiveTagIndex,\n visibleTagsCountRef,\n shouldIgnoreBlurAnimation,\n setShouldIgnoreBlurAnimation,\n isKeydownPressed,\n setIsKeydownPressed,\n dropdownBaseId,\n triggererRef,\n triggererWrapperRef,\n actionListItemRef,\n selectionType,\n hasFooterAction,\n setHasFooterAction,\n hasAutoCompleteInBottomSheetHeader,\n setHasAutoCompleteInBottomSheetHeader,\n dropdownTriggerer: dropdownTriggerer.current,\n changeCallbackTriggerer,\n setChangeCallbackTriggerer,\n isControlled,\n setIsControlled,\n isTagDismissedRef,\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n isDropdownOpen,\n isOpenControlled,\n selectedIndices,\n controlledValueIndices,\n options,\n filteredValues,\n activeIndex,\n activeTagIndex,\n shouldIgnoreBlurAnimation,\n selectionType,\n hasFooterAction,\n isKeydownPressed,\n changeCallbackTriggerer,\n isControlled,\n ],\n );\n\n const BottomSheetAndDropdownGlueContextValue = React.useMemo((): BottomSheetAndDropdownGlueContext => {\n return {\n isOpen: isDropdownOpen,\n dropdownHasBottomSheet,\n hasAutoCompleteInBottomSheetHeader,\n setDropdownHasBottomSheet,\n // This is the dismiss function which will be injected into the BottomSheet\n // Basically <BottomSheet onDismiss={onBottomSheetDismiss} />\n onBottomSheetDismiss: close,\n };\n }, [dropdownHasBottomSheet, hasAutoCompleteInBottomSheetHeader, isDropdownOpen, close]);\n\n return (\n <BottomSheetAndDropdownGlueContext.Provider value={BottomSheetAndDropdownGlueContextValue}>\n <DropdownContext.Provider value={contextValue}>\n <BaseBox\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref={dropdownContainerRef as any}\n {...metaAttribute({ name: MetaConstants.Dropdown, testID })}\n {...getStyledProps(styledProps)}\n >\n <BaseBox position=\"relative\" textAlign={'left' as never}>\n {children}\n </BaseBox>\n </BaseBox>\n </DropdownContext.Provider>\n </BottomSheetAndDropdownGlueContext.Provider>\n );\n};\n\nconst Dropdown = assignWithoutSideEffects(_Dropdown, {\n componentId: dropdownComponentIds.Dropdown,\n});\n\nexport { Dropdown };\n"],"names":["validDropdownChildren","dropdownComponentIds","BaseBox","triggers","SelectInput","SearchInput","DropdownButton","DropdownLink","DropdownOverlay","AutoComplete","bottomSheetComponentIds","BottomSheet","_Dropdown","_ref","children","isOpenControlled","isOpen","onOpenChange","_ref$selectionType","selectionType","testID","styledProps","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","options","setOptions","_React$useState3","_React$useState4","filteredValues","setFilteredValues","_React$useState5","_React$useState6","selectedIndices","setSelectedIndices","_React$useState7","_React$useState8","controlledValueIndices","setControlledValueIndices","_React$useState9","_React$useState10","activeIndex","setActiveIndex","_React$useState11","_React$useState12","activeTagIndex","setActiveTagIndex","_React$useState13","_React$useState14","shouldIgnoreBlurAnimation","setShouldIgnoreBlurAnimation","_React$useState15","_React$useState16","hasFooterAction","setHasFooterAction","_React$useState17","_React$useState18","hasAutoCompleteInBottomSheetHeader","setHasAutoCompleteInBottomSheetHeader","_React$useState19","_React$useState20","isKeydownPressed","setIsKeydownPressed","_React$useState21","_React$useState22","changeCallbackTriggerer","setChangeCallbackTriggerer","_React$useState23","_React$useState24","isControlled","setIsControlled","_React$useState25","_React$useState26","dropdownHasBottomSheet","setDropdownHasBottomSheet","triggererWrapperRef","useRef","triggererRef","actionListItemRef","dropdownTriggerer","isTagDismissedRef","value","visibleTagsCountRef","dropdownContainerRef","dropdownBaseId","useId","isDropdownOpenRef","_useControllableState","useControllableState","defaultValue","onChange","isOpenControlledValue","current","_useControllableState2","isDropdownOpen","setIsDropdownOpen","setIsOpen","isOpenValue","close","useCallback","Children","map","child","isValidElement","__DEV__","_getComponentId","includes","getComponentId","throwBladeError","message","join","moduleName","isValidAllowedChildren","contextValue","useMemo","BottomSheetAndDropdownGlueContextValue","onBottomSheetDismiss","_jsx","BottomSheetAndDropdownGlueContext","Provider","DropdownContext","Object","assign","ref","metaAttribute","name","MetaConstants","Dropdown","getStyledProps","position","textAlign","assignWithoutSideEffects","componentId"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React from 'react';\nimport { DropdownContext } from './useDropdown';\nimport type { DropdownContextType } from './useDropdown';\nimport type { DropdownProps } from './types';\nimport { dropdownComponentIds } from './dropdownComponentIds';\nimport { useId } from '~utils/useId';\nimport { ComponentIds as bottomSheetComponentIds } from '~components/BottomSheet/componentIds';\nimport { BottomSheetAndDropdownGlueContext } from '~components/BottomSheet/BottomSheetContext';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport BaseBox from '~components/Box/BaseBox';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { throwBladeError } from '~utils/logger';\nimport type { ContainerElementType } from '~utils/types';\nimport { useControllableState } from '~utils/useControllable';\n\nconst validDropdownChildren = [\n // TODO: Remove Box once CountrySelector's button sizing is fixed\n dropdownComponentIds.BaseBox,\n dropdownComponentIds.triggers.SelectInput,\n dropdownComponentIds.triggers.SearchInput,\n dropdownComponentIds.triggers.DropdownButton,\n dropdownComponentIds.triggers.DropdownLink,\n dropdownComponentIds.DropdownOverlay,\n dropdownComponentIds.triggers.AutoComplete,\n bottomSheetComponentIds.BottomSheet,\n];\n\n/**\n * ### Dropdown component\n *\n * Dropdown component is generic component that controls the dropdown functionality.\n * It can be used with multiple triggers and mostly contains ActionList component inside it\n *\n * ---\n *\n * #### Usage\n *\n * ```jsx\n * <Dropdown selectionType=\"single\">\n * <SelectInput />\n * <DropdownOverlay>\n * <ActionList>\n * <ActionListItem />\n * <ActionListItem />\n * </ActionList>\n * </DropdownOverlay>\n * </Dropdown>\n * ```\n *\n * ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select Dropdown Documentation}\n */\nconst _Dropdown = ({\n children,\n isOpen: isOpenControlled,\n onOpenChange,\n selectionType = 'single',\n testID,\n _width,\n ...styledProps\n}: DropdownProps): React.ReactElement => {\n const [options, setOptions] = React.useState<DropdownContextType['options']>([]);\n const [filteredValues, setFilteredValues] = React.useState<string[]>([]);\n const [selectedIndices, setSelectedIndices] = React.useState<\n DropdownContextType['selectedIndices']\n >([]);\n const [controlledValueIndices, setControlledValueIndices] = React.useState<\n DropdownContextType['selectedIndices']\n >([]);\n const [activeIndex, setActiveIndex] = React.useState(-1);\n const [activeTagIndex, setActiveTagIndex] = React.useState(-1);\n const [shouldIgnoreBlurAnimation, setShouldIgnoreBlurAnimation] = React.useState(false);\n const [hasFooterAction, setHasFooterAction] = React.useState(false);\n const [\n hasAutoCompleteInBottomSheetHeader,\n setHasAutoCompleteInBottomSheetHeader,\n ] = React.useState(false);\n const [isKeydownPressed, setIsKeydownPressed] = React.useState(false);\n const [changeCallbackTriggerer, setChangeCallbackTriggerer] = React.useState<\n DropdownContextType['changeCallbackTriggerer']\n >(0);\n const [isControlled, setIsControlled] = React.useState(false);\n // keep track if dropdown contains bottomsheet\n const [dropdownHasBottomSheet, setDropdownHasBottomSheet] = React.useState(false);\n\n /**\n * In inputs, actual input is smaller than the visible input wrapper.\n * You can set this reference in such cases so floating ui calculations happen correctly\n * */\n const triggererWrapperRef = React.useRef<ContainerElementType>(null);\n const triggererRef = React.useRef<HTMLButtonElement>(null);\n const actionListItemRef = React.useRef<HTMLDivElement>(null);\n const dropdownTriggerer = React.useRef<DropdownContextType['dropdownTriggerer']>();\n const isTagDismissedRef = React.useRef<{ value: boolean } | null>({ value: false });\n const visibleTagsCountRef = React.useRef<{ value: number }>({ value: 0 });\n const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n\n const dropdownBaseId = useId('dropdown');\n const isDropdownOpenRef = React.useRef(isOpenControlled);\n\n const [isDropdownOpen, setIsDropdownOpen] = useControllableState({\n value: isOpenControlled,\n defaultValue: false,\n onChange: (isOpenControlledValue) => {\n isDropdownOpenRef.current = isOpenControlledValue;\n onOpenChange?.(isOpenControlledValue);\n },\n });\n\n isDropdownOpenRef.current = isDropdownOpen;\n\n const setIsOpen = (isOpenValue: boolean): void => {\n isDropdownOpenRef.current = isOpenValue;\n setIsDropdownOpen(() => isOpenValue);\n };\n\n const close = React.useCallback(() => {\n setActiveTagIndex(-1);\n setIsOpen(false);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n if (__DEV__) {\n if (!validDropdownChildren.includes(getComponentId(child) ?? '')) {\n throwBladeError({\n message: `Dropdown can only have one of following elements as children - \\n\\n ${validDropdownChildren.join(\n ', ',\n )} \\n\\n Check out: https://blade.razorpay.com/?path=/story/components-dropdown`,\n moduleName: 'Dropdown',\n });\n }\n }\n\n if (isValidAllowedChildren(child, dropdownComponentIds.triggers.SelectInput)) {\n dropdownTriggerer.current = 'SelectInput';\n }\n\n if (isValidAllowedChildren(child, dropdownComponentIds.triggers.SearchInput)) {\n dropdownTriggerer.current = 'SearchInput';\n }\n\n if (isValidAllowedChildren(child, dropdownComponentIds.triggers.DropdownButton)) {\n dropdownTriggerer.current = 'DropdownButton';\n }\n\n if (isValidAllowedChildren(child, dropdownComponentIds.triggers.AutoComplete)) {\n dropdownTriggerer.current = 'AutoComplete';\n }\n }\n });\n\n const contextValue = React.useMemo<DropdownContextType>(\n () => ({\n isOpen: isDropdownOpen,\n setIsOpen,\n close,\n selectedIndices,\n setSelectedIndices,\n controlledValueIndices,\n setControlledValueIndices,\n options,\n setOptions,\n filteredValues,\n setFilteredValues,\n activeIndex,\n setActiveIndex,\n activeTagIndex,\n setActiveTagIndex,\n visibleTagsCountRef,\n shouldIgnoreBlurAnimation,\n setShouldIgnoreBlurAnimation,\n isKeydownPressed,\n setIsKeydownPressed,\n dropdownBaseId,\n triggererRef,\n triggererWrapperRef,\n actionListItemRef,\n selectionType,\n hasFooterAction,\n setHasFooterAction,\n hasAutoCompleteInBottomSheetHeader,\n setHasAutoCompleteInBottomSheetHeader,\n dropdownTriggerer: dropdownTriggerer.current,\n changeCallbackTriggerer,\n setChangeCallbackTriggerer,\n isControlled,\n setIsControlled,\n isTagDismissedRef,\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n isDropdownOpen,\n isOpenControlled,\n selectedIndices,\n controlledValueIndices,\n options,\n filteredValues,\n activeIndex,\n activeTagIndex,\n shouldIgnoreBlurAnimation,\n selectionType,\n hasFooterAction,\n isKeydownPressed,\n changeCallbackTriggerer,\n isControlled,\n ],\n );\n\n const BottomSheetAndDropdownGlueContextValue = React.useMemo((): BottomSheetAndDropdownGlueContext => {\n return {\n isOpen: isDropdownOpen,\n dropdownHasBottomSheet,\n hasAutoCompleteInBottomSheetHeader,\n setDropdownHasBottomSheet,\n // This is the dismiss function which will be injected into the BottomSheet\n // Basically <BottomSheet onDismiss={onBottomSheetDismiss} />\n onBottomSheetDismiss: close,\n };\n }, [dropdownHasBottomSheet, hasAutoCompleteInBottomSheetHeader, isDropdownOpen, close]);\n\n return (\n <BottomSheetAndDropdownGlueContext.Provider value={BottomSheetAndDropdownGlueContextValue}>\n <DropdownContext.Provider value={contextValue}>\n <BaseBox\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref={dropdownContainerRef as any}\n {...metaAttribute({ name: MetaConstants.Dropdown, testID })}\n {...getStyledProps(styledProps)}\n width={_width}\n >\n <BaseBox position=\"relative\" textAlign={'left' as never}>\n {children}\n </BaseBox>\n </BaseBox>\n </DropdownContext.Provider>\n </BottomSheetAndDropdownGlueContext.Provider>\n );\n};\n\nconst Dropdown = assignWithoutSideEffects(_Dropdown, {\n componentId: dropdownComponentIds.Dropdown,\n});\n\nexport { Dropdown };\n"],"names":["validDropdownChildren","dropdownComponentIds","BaseBox","triggers","SelectInput","SearchInput","DropdownButton","DropdownLink","DropdownOverlay","AutoComplete","bottomSheetComponentIds","BottomSheet","_Dropdown","_ref","children","isOpenControlled","isOpen","onOpenChange","_ref$selectionType","selectionType","testID","_width","styledProps","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","options","setOptions","_React$useState3","_React$useState4","filteredValues","setFilteredValues","_React$useState5","_React$useState6","selectedIndices","setSelectedIndices","_React$useState7","_React$useState8","controlledValueIndices","setControlledValueIndices","_React$useState9","_React$useState10","activeIndex","setActiveIndex","_React$useState11","_React$useState12","activeTagIndex","setActiveTagIndex","_React$useState13","_React$useState14","shouldIgnoreBlurAnimation","setShouldIgnoreBlurAnimation","_React$useState15","_React$useState16","hasFooterAction","setHasFooterAction","_React$useState17","_React$useState18","hasAutoCompleteInBottomSheetHeader","setHasAutoCompleteInBottomSheetHeader","_React$useState19","_React$useState20","isKeydownPressed","setIsKeydownPressed","_React$useState21","_React$useState22","changeCallbackTriggerer","setChangeCallbackTriggerer","_React$useState23","_React$useState24","isControlled","setIsControlled","_React$useState25","_React$useState26","dropdownHasBottomSheet","setDropdownHasBottomSheet","triggererWrapperRef","useRef","triggererRef","actionListItemRef","dropdownTriggerer","isTagDismissedRef","value","visibleTagsCountRef","dropdownContainerRef","dropdownBaseId","useId","isDropdownOpenRef","_useControllableState","useControllableState","defaultValue","onChange","isOpenControlledValue","current","_useControllableState2","isDropdownOpen","setIsDropdownOpen","setIsOpen","isOpenValue","close","useCallback","Children","map","child","isValidElement","__DEV__","_getComponentId","includes","getComponentId","throwBladeError","message","join","moduleName","isValidAllowedChildren","contextValue","useMemo","BottomSheetAndDropdownGlueContextValue","onBottomSheetDismiss","_jsx","BottomSheetAndDropdownGlueContext","Provider","DropdownContext","Object","assign","ref","metaAttribute","name","MetaConstants","Dropdown","getStyledProps","width","position","textAlign","assignWithoutSideEffects","componentId"],"mappings":"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"}
|
|
@@ -24,8 +24,9 @@ import { Text } from '../Typography/Text/Text.js';
|
|
|
24
24
|
import '../Typography/Code/Code.js';
|
|
25
25
|
import { getStringFromReactText } from '../../utils/getStringChildren/getStringChildren.js';
|
|
26
26
|
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js';
|
|
27
|
+
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
|
|
27
28
|
|
|
28
|
-
var _excluded=["accessibilityLabel","children","size","color","emphasis","testID"];var
|
|
29
|
+
var _excluded=["accessibilityLabel","children","size","color","emphasis","testID"];var _Indicator=function _Indicator(_ref){var accessibilityLabel=_ref.accessibilityLabel,children=_ref.children,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$color=_ref.color,color=_ref$color===void 0?'neutral':_ref$color,_ref$emphasis=_ref.emphasis,emphasis=_ref$emphasis===void 0?'subtle':_ref$emphasis,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var childrenString=getStringFromReactText(children);var isIntense=emphasis==='intense';var isPrimary=color==='primary';var fillColorOuter=isPrimary?theme.colors.surface.background.primary.subtle:theme.colors.feedback.background[color].subtle;var fillColorInner=isPrimary?theme.colors.surface.icon.primary.normal:theme.colors.feedback.icon[color].intense;var isWeb=!isReactNative();var a11yProps=makeAccessible(Object.assign({label:accessibilityLabel!=null?accessibilityLabel:childrenString},isWeb&&{role:'status'}));var svgSize=isIntense?indicatorDotSizes[emphasis][size].outer:indicatorDotSizes[emphasis][size].inner;return jsx(BaseBox,Object.assign({display:isWeb?'inline-flex':'flex'},a11yProps,metaAttribute({name:MetaConstants.Indicator,testID:testID}),getStyledProps(styledProps),{children:jsxs(BaseBox,{display:"flex",flexDirection:"row",alignItems:"center",children:[jsx(Svg,{width:String(svgSize),height:String(svgSize),viewBox:"0 0 10 10",fill:"none",children:isIntense?jsxs(Fragment,{children:[jsx(Circle,{cx:"5",cy:"5",r:"5",fill:fillColorOuter}),jsx(Circle,{cx:"5",cy:"5",r:"2.5",fill:fillColorInner})]}):jsx(Circle,{cx:"5",cy:"5",r:"5",fill:fillColorInner})}),jsx(BaseBox,{marginLeft:childrenString?'spacing.2':'spacing.0',children:jsx(Text,{weight:"medium",color:"surface.text.gray.subtle",textAlign:"left",size:textSizeMapping[size],children:children})})]})}));};var Indicator=assignWithoutSideEffects(_Indicator,{componentId:'Indicator'});
|
|
29
30
|
|
|
30
31
|
export { Indicator };
|
|
31
32
|
//# sourceMappingURL=Indicator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Indicator.js","sources":["../../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { indicatorDotSizes, textSizeMapping } from './indicatorTokens';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport Svg from '~components/Icons/_Svg';\nimport Circle from '~components/Icons/_Svg/Circle';\nimport { Text } from '~components/Typography';\nimport { getStringFromReactText } from '~src/utils/getStringChildren';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype
|
|
1
|
+
{"version":3,"file":"Indicator.js","sources":["../../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { indicatorDotSizes, textSizeMapping } from './indicatorTokens';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport Svg from '~components/Icons/_Svg';\nimport Circle from '~components/Icons/_Svg/Circle';\nimport { Text } from '~components/Typography';\nimport { getStringFromReactText } from '~src/utils/getStringChildren';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\ntype IndicatorProps = {\n /**\n * Sets the color tone\n *\n * @default neutral\n */\n color?: FeedbackColors | 'primary';\n\n /**\n * Sets the emphasis of the indicator\n *\n * If set to intense it will show a background circle\n *\n * @default subtle\n */\n emphasis?: 'subtle' | 'intense';\n\n /**\n * Size of the indicator\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n /**\n * A text label to show alongside the indicator dot\n */\n children?: StringChildrenType;\n /**\n * a11y label for screen readers\n */\n accessibilityLabel?: string;\n} & TestID &\n StyledPropsBlade;\n\nconst _Indicator = ({\n accessibilityLabel,\n children,\n size = 'medium',\n color = 'neutral',\n emphasis = 'subtle',\n testID,\n ...styledProps\n}: IndicatorProps): ReactElement => {\n const { theme } = useTheme();\n const childrenString = getStringFromReactText(children);\n const isIntense = emphasis === 'intense';\n const isPrimary = color === 'primary';\n\n const fillColorOuter = isPrimary\n ? theme.colors.surface.background.primary.subtle\n : theme.colors.feedback.background[color].subtle;\n const fillColorInner = isPrimary\n ? theme.colors.surface.icon.primary.normal\n : theme.colors.feedback.icon[color].intense;\n\n const isWeb = !isReactNative();\n const a11yProps = makeAccessible({\n label: accessibilityLabel ?? childrenString,\n ...(isWeb && { role: 'status' }),\n });\n\n const svgSize = isIntense\n ? indicatorDotSizes[emphasis][size].outer\n : indicatorDotSizes[emphasis][size].inner;\n\n return (\n <BaseBox\n display={(isWeb ? 'inline-flex' : 'flex') as never}\n {...a11yProps}\n {...metaAttribute({ name: MetaConstants.Indicator, testID })}\n {...getStyledProps(styledProps)}\n >\n <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n <Svg width={String(svgSize)} height={String(svgSize)} viewBox=\"0 0 10 10\" fill=\"none\">\n {isIntense ? (\n <>\n <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColorOuter} />\n <Circle cx=\"5\" cy=\"5\" r=\"2.5\" fill={fillColorInner} />\n </>\n ) : (\n <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColorInner} />\n )}\n </Svg>\n <BaseBox marginLeft={childrenString ? 'spacing.2' : 'spacing.0'}>\n <Text\n weight=\"medium\"\n color=\"surface.text.gray.subtle\"\n textAlign=\"left\"\n size={textSizeMapping[size]}\n >\n {children}\n </Text>\n </BaseBox>\n </BaseBox>\n </BaseBox>\n );\n};\n\nconst Indicator = assignWithoutSideEffects(_Indicator, {\n componentId: 'Indicator',\n});\n\nexport type { IndicatorProps };\nexport { Indicator };\n"],"names":["_Indicator","_ref","accessibilityLabel","children","_ref$size","size","_ref$color","color","_ref$emphasis","emphasis","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","childrenString","getStringFromReactText","isIntense","isPrimary","fillColorOuter","colors","surface","background","primary","subtle","feedback","fillColorInner","icon","normal","intense","isWeb","isReactNative","a11yProps","makeAccessible","Object","assign","label","role","svgSize","indicatorDotSizes","outer","inner","_jsx","BaseBox","display","metaAttribute","name","MetaConstants","Indicator","getStyledProps","_jsxs","flexDirection","alignItems","Svg","width","String","height","viewBox","fill","_Fragment","Circle","cx","cy","r","marginLeft","Text","weight","textAlign","textSizeMapping","assignWithoutSideEffects","componentId"],"mappings":"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"}
|
|
@@ -38,7 +38,7 @@ import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffect
|
|
|
38
38
|
import { getFocusRingStyles } from '../../../utils/getFocusRingStyles/getFocusRingStyles.native.js';
|
|
39
39
|
import { useMergeRefs } from '../../../utils/useMergeRefs.js';
|
|
40
40
|
|
|
41
|
-
var _excluded=["as","label","labelPosition","placeholder","type","defaultValue","tags","showAllTags","activeTagIndex","setActiveTagIndex","name","value","onFocus","onChange","onInput","onBlur","onSubmit","onClick","onKeyDown","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","leadingIcon","prefix","trailingInteractionElement","leadingInteractionElement","suffix","trailingIcon","maxCharacters","textAlign","autoFocus","keyboardReturnKeyType","keyboardType","autoCompleteSuggestionType","trailingHeaderSlot","trailingFooterSlot","numberOfLines","id","componentName","accessibilityLabel","labelId","activeDescendant","hideLabelText","hideFormHint","hasPopup","popupId","isPopupExpanded","maxTagRows","shouldIgnoreBlurAnimation","setShouldIgnoreBlurAnimation","autoCapitalize","setInputWrapperRef","testID","isDropdownTrigger","isLabelInsideInput","size","trailingButton","valueComponentType","isTableInputCell"];var autoCompleteSuggestionTypeValues=['none','on','name','email','username','password','newPassword','oneTimeCode','telephone','postalCode','countryName','creditCardNumber','creditCardCSC','creditCardExpiry','creditCardExpiryMonth','creditCardExpiryYear'];var useTags=function useTags(tags,activeTagIndex,setActiveTagIndex){var visibleTagsCountRef=React__default.useRef(0);React__default.useEffect(function(){if(tags&&activeTagIndex>=0&&activeTagIndex<tags.length){var _tags$activeTagIndex,_tags$activeTagIndex$;var tagTitle=(_tags$activeTagIndex=tags[activeTagIndex])==null?void 0:(_tags$activeTagIndex$=_tags$activeTagIndex.props)==null?void 0:_tags$activeTagIndex$.children;if(tagTitle){announce(`Close ${tagTitle} Tag`);}}},[activeTagIndex,tags==null?void 0:tags.length]);var onTagLeft=function onTagLeft(){if(activeTagIndex<0){setActiveTagIndex==null?void 0:setActiveTagIndex(visibleTagsCountRef.current-1);}if(activeTagIndex>0){setActiveTagIndex==null?void 0:setActiveTagIndex(activeTagIndex-1);}};var onTagRight=function onTagRight(){if(activeTagIndex<visibleTagsCountRef.current-1){setActiveTagIndex==null?void 0:setActiveTagIndex(activeTagIndex+1);}};var onTagRemove=function onTagRemove(){if(activeTagIndex>=0&&activeTagIndex<visibleTagsCountRef.current&&tags){tags[activeTagIndex].props.onDismiss({tagIndex:activeTagIndex});}};var onInputKeydownTagHandler=function onInputKeydownTagHandler(key){if(tags&&tags.length>0){if(key==='ArrowRight'){onTagRight();}if(key==='ArrowLeft'){onTagLeft();}if(key==='Backspace'){onTagRemove();}}};return {onInputKeydownTagHandler:onInputKeydownTagHandler,visibleTagsCountRef:visibleTagsCountRef};};var useInput=function useInput(_ref){var value=_ref.value,defaultValue=_ref.defaultValue,onClick=_ref.onClick,onFocus=_ref.onFocus,onChange=_ref.onChange,onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,onInput=_ref.onInput,onKeyDown=_ref.onKeyDown,onInputKeydownTagHandler=_ref.onInputKeydownTagHandler;if(__DEV__){if(value&&defaultValue){throwBladeError({message:`Either 'value' or 'defaultValue' shall be passed. This decides if the input field is controlled or uncontrolled`,moduleName:'Input'});}}var _React$useState=React__default.useState(defaultValue!=null?defaultValue:value),_React$useState2=_slicedToArray(_React$useState,2),inputValue=_React$useState2[0],setInputValue=_React$useState2[1];var handleOnFocus=React__default.useCallback(function(_ref2){var name=_ref2.name,value=_ref2.value;var _value='';if(getPlatformType()==='react-native'&&typeof value==='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value;_value=(_value$target$value=value==null?void 0:value.target.value)!=null?_value$target$value:'';}onFocus==null?void 0:onFocus({name:name,value:_value});},[onFocus]);var handleOnClick=React__default.useCallback(function(_ref3){var name=_ref3.name,value=_ref3.value;var _value='';if(getPlatformType()==='react-native'&&typeof value==='string'){_value=value;}else if(typeof value!=='string'){var _value$currentTarget$;_value=(_value$currentTarget$=value==null?void 0:value.currentTarget.value)!=null?_value$currentTarget$:'';}onClick==null?void 0:onClick({name:name,value:_value});},[onClick]);var handleOnSubmit=React__default.useCallback(function(_ref4){var name=_ref4.name,value=_ref4.value;var _value='';if(getPlatformType()==='react-native'&&typeof value==='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value2;_value=(_value$target$value2=value==null?void 0:value.target.value)!=null?_value$target$value2:'';}if(isReactNative()){onSubmit==null?void 0:onSubmit({name:name,value:_value});}},[onSubmit]);var handleOnBlur=React__default.useCallback(function(_ref5){var name=_ref5.name,value=_ref5.value;var _value='';if(getPlatformType()==='react-native'&&typeof value=='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value3;_value=(_value$target$value3=value==null?void 0:value.target.value)!=null?_value$target$value3:'';}onBlur==null?void 0:onBlur({name:name,value:_value});},[onBlur]);var handleOnChange=React__default.useCallback(function(_ref6){var name=_ref6.name,value=_ref6.value;var _value='';if(getPlatformType()==='react-native'&&typeof value==='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value4;_value=(_value$target$value4=value==null?void 0:value.target.value)!=null?_value$target$value4:'';}onChange==null?void 0:onChange({name:name,value:_value});setInputValue(_value);},[onChange]);var handleOnInput=React__default.useCallback(function(_ref7){var name=_ref7.name,value=_ref7.value;var _value='';if(getPlatformType()==='react-native'&&typeof value=='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value5;_value=(_value$target$value5=value==null?void 0:value.target.value)!=null?_value$target$value5:'';}onInput==null?void 0:onInput({name:name,value:_value});},[onInput]);var handleOnKeyDown=React__default.useCallback(function(_ref8){var name=_ref8.name,key=_ref8.key,code=_ref8.code,event=_ref8.event;onInputKeydownTagHandler(key);onKeyDown==null?void 0:onKeyDown({name:name,key:key,code:code,event:event});},[onKeyDown]);return {handleOnFocus:handleOnFocus,handleOnClick:handleOnClick,handleOnChange:handleOnChange,handleOnBlur:handleOnBlur,handleOnSubmit:handleOnSubmit,handleOnInput:handleOnInput,handleOnKeyDown:handleOnKeyDown,inputValue:inputValue};};var getHintType=function getHintType(_ref9){var validationState=_ref9.validationState,hasHelpText=_ref9.hasHelpText;if(validationState==='error'){return 'error';}if(validationState==='success'){return 'success';}if(hasHelpText){return 'help';}return 'help';};var getDescribedByElementId=function getDescribedByElementId(_ref10){var validationState=_ref10.validationState,hasErrorText=_ref10.hasErrorText,hasSuccessText=_ref10.hasSuccessText,hasHelpText=_ref10.hasHelpText,errorTextId=_ref10.errorTextId,successTextId=_ref10.successTextId,helpTextId=_ref10.helpTextId;if(validationState==='error'&&hasErrorText){return errorTextId;}if(validationState==='success'&&hasSuccessText){return successTextId;}if(hasHelpText){return helpTextId;}return '';};var FocusRingWrapper=styled(BaseBox)(function(_ref11){var theme=_ref11.theme,currentInteraction=_ref11.currentInteraction,isTableInputCell=_ref11.isTableInputCell;return {borderRadius:makeBorderSize(isTableInputCell?theme.border.radius.none:theme.border.radius.medium),width:'100%','&:focus-within':!isTableInputCell?Object.assign({},getFocusRingStyles(),{transitionDuration:castWebType(makeMotionTime(getIn(theme.motion.duration,baseInputBorderBackgroundMotion[currentInteraction==='focus'?'enter':'exit'].duration))),transitionTimingFunction:castWebType(getIn(theme.motion.easing,baseInputBorderBackgroundMotion[currentInteraction==='focus'?'enter':'exit'].easing))}):{}};});var _BaseInput=function _BaseInput(_ref12,ref){var _ref12$as=_ref12.as,as=_ref12$as===void 0?'input':_ref12$as,label=_ref12.label,_ref12$labelPosition=_ref12.labelPosition,labelPosition=_ref12$labelPosition===void 0?'top':_ref12$labelPosition,placeholder=_ref12.placeholder,_ref12$type=_ref12.type,type=_ref12$type===void 0?'text':_ref12$type,defaultValue=_ref12.defaultValue,tags=_ref12.tags,_ref12$showAllTags=_ref12.showAllTags,showAllTags=_ref12$showAllTags===void 0?false:_ref12$showAllTags,_ref12$activeTagIndex=_ref12.activeTagIndex,activeTagIndex=_ref12$activeTagIndex===void 0?-1:_ref12$activeTagIndex,setActiveTagIndex=_ref12.setActiveTagIndex,name=_ref12.name,value=_ref12.value,onFocus=_ref12.onFocus,onChange=_ref12.onChange,onInput=_ref12.onInput,onBlur=_ref12.onBlur,onSubmit=_ref12.onSubmit,onClick=_ref12.onClick,onKeyDown=_ref12.onKeyDown,isDisabled=_ref12.isDisabled,necessityIndicator=_ref12.necessityIndicator,validationState=_ref12.validationState,errorText=_ref12.errorText,helpText=_ref12.helpText,successText=_ref12.successText,isRequired=_ref12.isRequired,leadingIcon=_ref12.leadingIcon,prefix=_ref12.prefix,trailingInteractionElement=_ref12.trailingInteractionElement,leadingInteractionElement=_ref12.leadingInteractionElement,suffix=_ref12.suffix,trailingIcon=_ref12.trailingIcon,maxCharacters=_ref12.maxCharacters,textAlign=_ref12.textAlign,autoFocus=_ref12.autoFocus,keyboardReturnKeyType=_ref12.keyboardReturnKeyType,keyboardType=_ref12.keyboardType,autoCompleteSuggestionType=_ref12.autoCompleteSuggestionType,trailingHeaderSlot=_ref12.trailingHeaderSlot,trailingFooterSlot=_ref12.trailingFooterSlot,numberOfLines=_ref12.numberOfLines,id=_ref12.id,componentName=_ref12.componentName,accessibilityLabel=_ref12.accessibilityLabel,labelId=_ref12.labelId,activeDescendant=_ref12.activeDescendant,hideLabelText=_ref12.hideLabelText,hideFormHint=_ref12.hideFormHint,hasPopup=_ref12.hasPopup,popupId=_ref12.popupId,isPopupExpanded=_ref12.isPopupExpanded,maxTagRows=_ref12.maxTagRows,shouldIgnoreBlurAnimation=_ref12.shouldIgnoreBlurAnimation,setShouldIgnoreBlurAnimation=_ref12.setShouldIgnoreBlurAnimation,autoCapitalize=_ref12.autoCapitalize,setInputWrapperRef=_ref12.setInputWrapperRef,testID=_ref12.testID,isDropdownTrigger=_ref12.isDropdownTrigger,isLabelInsideInput=_ref12.isLabelInsideInput,_ref12$size=_ref12.size,size=_ref12$size===void 0?'medium':_ref12$size,trailingButton=_ref12.trailingButton,_ref12$valueComponent=_ref12.valueComponentType,valueComponentType=_ref12$valueComponent===void 0?'text':_ref12$valueComponent,_ref12$isTableInputCe=_ref12.isTableInputCell,isTableInputCell=_ref12$isTableInputCe===void 0?false:_ref12$isTableInputCe,styledProps=_objectWithoutProperties(_ref12,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var inputRef=React__default.useRef(null);var mergedInputRef=useMergeRefs(ref,inputRef);var inputWrapperRef=React__default.useRef(null);var _useTags=useTags(tags,activeTagIndex,setActiveTagIndex),onInputKeydownTagHandler=_useTags.onInputKeydownTagHandler,visibleTagsCountRef=_useTags.visibleTagsCountRef;var _React$useState3=React__default.useState(false),_React$useState4=_slicedToArray(_React$useState3,2),showAllTagsWithAnimation=_React$useState4[0],setShowAllTagsWithAnimation=_React$useState4[1];var isReactNative=getPlatformType()==='react-native';React__default.useEffect(function(){if(showAllTags){setShowAllTagsWithAnimation(true);}else if(maxTagRows!=='expandable'){setShowAllTagsWithAnimation(false);}},[showAllTags,maxTagRows]);var _useInput=useInput({defaultValue:defaultValue,value:value,onFocus:onFocus,onClick:onClick,onChange:onChange,onBlur:onBlur,onSubmit:onSubmit,onInput:onInput,onKeyDown:onKeyDown,onInputKeydownTagHandler:onInputKeydownTagHandler}),handleOnFocus=_useInput.handleOnFocus,handleOnChange=_useInput.handleOnChange,handleOnClick=_useInput.handleOnClick,handleOnBlur=_useInput.handleOnBlur,handleOnSubmit=_useInput.handleOnSubmit,handleOnInput=_useInput.handleOnInput,handleOnKeyDown=_useInput.handleOnKeyDown,inputValue=_useInput.inputValue;var _useFormId=useFormId(id),inputId=_useFormId.inputId,helpTextId=_useFormId.helpTextId,errorTextId=_useFormId.errorTextId,successTextId=_useFormId.successTextId;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isLabelLeftPositioned=labelPosition==='left'&&matchedDeviceType==='desktop';var _useInteraction=useInteraction(),currentInteraction=_useInteraction.currentInteraction,setCurrentInteraction=_useInteraction.setCurrentInteraction;var _isRequired=isRequired||necessityIndicator==='required';var accessibilityProps=makeAccessible({required:Boolean(_isRequired),disabled:Boolean(isDisabled),invalid:Boolean(validationState==='error'),describedBy:getDescribedByElementId({validationState:validationState,hasErrorText:Boolean(errorText),hasSuccessText:Boolean(successText),hasHelpText:Boolean(helpText),errorTextId:errorTextId,successTextId:successTextId,helpTextId:helpTextId}),label:accessibilityLabel,hasPopup:hasPopup,expanded:hasPopup?isPopupExpanded:undefined,controls:hasPopup?popupId:undefined,role:hasPopup?'combobox':undefined,activeDescendant:activeDescendant});var willRenderHintText=Boolean(helpText)||Boolean(successText)||Boolean(errorText);if(__DEV__){if(autoCompleteSuggestionType&&!autoCompleteSuggestionTypeValues.includes(autoCompleteSuggestionType)){throwBladeError({message:`Expected autoCompleteSuggestionType to be one of ${autoCompleteSuggestionTypeValues.join(', ')} but received ${autoCompleteSuggestionType}`,moduleName:'Input'});}}var isTextArea=as==='textarea';return jsxs(BaseBox,Object.assign({},metaAttribute({name:componentName,testID:testID}),getStyledProps(styledProps),{children:[jsxs(BaseBox,{display:"flex",flexDirection:isLabelLeftPositioned?'row':'column',justifyContent:isLabelLeftPositioned?'center':undefined,alignItems:isLabelLeftPositioned?'center':undefined,position:"relative",width:"100%",children:[!hideLabelText&&!isLabelInsideInput&&label&&jsxs(BaseBox,{display:"flex",flexDirection:isLabelLeftPositioned?'column':'row',justifyContent:"space-between",alignSelf:isTextArea?'flex-start':undefined,marginY:isTextArea&&isLabelLeftPositioned?'spacing.3':'spacing.0',children:[jsx(FormLabel,{as:"label",necessityIndicator:necessityIndicator,position:labelPosition,id:labelId,htmlFor:inputId,size:size,children:label}),trailingHeaderSlot==null?void 0:trailingHeaderSlot(value!=null?value:inputValue)]}),jsx(FocusRingWrapper,{currentInteraction:currentInteraction,isTableInputCell:isTableInputCell,children:jsxs(BaseInputWrapper,{isDropdownTrigger:isDropdownTrigger,isTextArea:isTextArea,isDisabled:isDisabled,validationState:validationState,currentInteraction:currentInteraction,isLabelLeftPositioned:isLabelLeftPositioned,showAllTags:showAllTags,setShowAllTagsWithAnimation:setShowAllTagsWithAnimation,ref:function ref(refNode){if(refNode){setInputWrapperRef==null?void 0:setInputWrapperRef(refNode);inputWrapperRef.current=refNode;}},maxTagRows:maxTagRows,size:size,numberOfLines:numberOfLines,onClick:function onClick(){if(!isReactNative){var _inputRef$current;(_inputRef$current=inputRef.current)==null?void 0:_inputRef$current.focus();}},isTableInputCell:isTableInputCell,children:[jsx(BaseInputVisuals,{size:size,leadingIcon:leadingIcon,prefix:prefix,isDisabled:isDisabled,leadingInteractionElement:leadingInteractionElement}),jsx(BaseInputTagSlot,{renderAs:as,tags:tags,isDisabled:isDisabled,showAllTags:showAllTagsWithAnimation,setFocusOnInput:function setFocusOnInput(){if(ref&&!isReactNative&&'current'in ref){var _ref$current;(_ref$current=ref.current)==null?void 0:_ref$current.focus();}},labelPrefix:isLabelInsideInput?label:undefined,isDropdownTrigger:isDropdownTrigger,visibleTagsCountRef:visibleTagsCountRef,handleOnInputClick:function handleOnInputClick(e){handleOnClick({name:name,value:isReactNative?value:e});},setShouldIgnoreBlurAnimation:setShouldIgnoreBlurAnimation,maxTagRows:maxTagRows,inputWrapperRef:inputWrapperRef,size:size,numberOfLines:numberOfLines,isTextArea:isTextArea,children:jsx(StyledBaseInput,Object.assign({as:as,id:inputId,ref:mergedInputRef,name:name,type:type,defaultValue:defaultValue,value:value,placeholder:placeholder,isDisabled:isDisabled,validationState:validationState,isRequired:_isRequired,handleOnFocus:handleOnFocus,handleOnChange:handleOnChange,handleOnBlur:handleOnBlur,handleOnSubmit:handleOnSubmit,handleOnInput:handleOnInput,handleOnKeyDown:handleOnKeyDown,handleOnClick:handleOnClick,leadingIcon:leadingIcon,prefix:prefix,trailingInteractionElement:trailingInteractionElement,leadingInteractionElement:leadingInteractionElement,suffix:suffix,trailingIcon:trailingIcon,maxCharacters:maxCharacters,textAlign:textAlign,autoFocus:autoFocus,keyboardReturnKeyType:keyboardReturnKeyType,keyboardType:keyboardType,autoCompleteSuggestionType:autoCompleteSuggestionType,accessibilityProps:accessibilityProps,currentInteraction:currentInteraction,setCurrentInteraction:setCurrentInteraction,numberOfLines:numberOfLines,isTextArea:isTextArea||maxTagRows==='multiple'||maxTagRows==='expandable',hasPopup:hasPopup,hasTags:!!(tags&&tags.length>0),shouldIgnoreBlurAnimation:shouldIgnoreBlurAnimation,autoCapitalize:autoCapitalize,isDropdownTrigger:isDropdownTrigger,$size:size,valueComponentType:valueComponentType,isTableInputCell:isTableInputCell},metaAttribute({name:MetaConstants.StyledBaseInput})))}),jsx(BaseInputVisuals,{trailingInteractionElement:trailingInteractionElement,suffix:suffix,trailingIcon:trailingIcon,isDisabled:isDisabled,validationState:validationState,trailingButton:trailingButton,size:size,errorText:errorText,successText:successText,isTableInputCell:isTableInputCell})]})})]}),hideFormHint||isTableInputCell?null:jsx(BaseBox,{marginLeft:makeSize(isLabelLeftPositioned&&!hideLabelText?formHintLeftLabelMarginLeft[size]:0),children:jsxs(BaseBox,{display:"flex",flexDirection:"row",justifyContent:willRenderHintText?'space-between':'flex-end',children:[jsx(FormHint,{type:getHintType({validationState:validationState,hasHelpText:Boolean(helpText)}),helpText:helpText,errorText:errorText,successText:successText,helpTextId:helpTextId,errorTextId:errorTextId,successTextId:successTextId,size:size}),trailingFooterSlot==null?void 0:trailingFooterSlot(value!=null?value:inputValue)]})})]}));};var BaseInputWithRef=React__default.forwardRef(_BaseInput);var BaseInput=assignWithoutSideEffects(BaseInputWithRef,{displayName:'BaseInput'});
|
|
41
|
+
var _excluded=["as","label","labelPosition","placeholder","type","defaultValue","tags","showAllTags","activeTagIndex","setActiveTagIndex","name","value","onFocus","onChange","onInput","onBlur","onSubmit","onClick","onKeyDown","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","leadingIcon","prefix","trailingInteractionElement","leadingInteractionElement","suffix","trailingIcon","maxCharacters","textAlign","autoFocus","keyboardReturnKeyType","keyboardType","autoCompleteSuggestionType","trailingHeaderSlot","trailingFooterSlot","numberOfLines","id","componentName","accessibilityLabel","labelId","activeDescendant","hideLabelText","hideFormHint","hasPopup","popupId","isPopupExpanded","maxTagRows","shouldIgnoreBlurAnimation","setShouldIgnoreBlurAnimation","autoCapitalize","setInputWrapperRef","testID","isDropdownTrigger","isLabelInsideInput","size","trailingButton","valueComponentType","isTableInputCell","showHintsAsTooltip"];var autoCompleteSuggestionTypeValues=['none','on','name','email','username','password','newPassword','oneTimeCode','telephone','postalCode','countryName','creditCardNumber','creditCardCSC','creditCardExpiry','creditCardExpiryMonth','creditCardExpiryYear'];var useTags=function useTags(tags,activeTagIndex,setActiveTagIndex){var visibleTagsCountRef=React__default.useRef(0);React__default.useEffect(function(){if(tags&&activeTagIndex>=0&&activeTagIndex<tags.length){var _tags$activeTagIndex,_tags$activeTagIndex$;var tagTitle=(_tags$activeTagIndex=tags[activeTagIndex])==null?void 0:(_tags$activeTagIndex$=_tags$activeTagIndex.props)==null?void 0:_tags$activeTagIndex$.children;if(tagTitle){announce(`Close ${tagTitle} Tag`);}}},[activeTagIndex,tags==null?void 0:tags.length]);var onTagLeft=function onTagLeft(){if(activeTagIndex<0){setActiveTagIndex==null?void 0:setActiveTagIndex(visibleTagsCountRef.current-1);}if(activeTagIndex>0){setActiveTagIndex==null?void 0:setActiveTagIndex(activeTagIndex-1);}};var onTagRight=function onTagRight(){if(activeTagIndex<visibleTagsCountRef.current-1){setActiveTagIndex==null?void 0:setActiveTagIndex(activeTagIndex+1);}};var onTagRemove=function onTagRemove(){if(activeTagIndex>=0&&activeTagIndex<visibleTagsCountRef.current&&tags){tags[activeTagIndex].props.onDismiss({tagIndex:activeTagIndex});}};var onInputKeydownTagHandler=function onInputKeydownTagHandler(key){if(tags&&tags.length>0){if(key==='ArrowRight'){onTagRight();}if(key==='ArrowLeft'){onTagLeft();}if(key==='Backspace'){onTagRemove();}}};return {onInputKeydownTagHandler:onInputKeydownTagHandler,visibleTagsCountRef:visibleTagsCountRef};};var useInput=function useInput(_ref){var value=_ref.value,defaultValue=_ref.defaultValue,onClick=_ref.onClick,onFocus=_ref.onFocus,onChange=_ref.onChange,onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,onInput=_ref.onInput,onKeyDown=_ref.onKeyDown,onInputKeydownTagHandler=_ref.onInputKeydownTagHandler;if(__DEV__){if(value&&defaultValue){throwBladeError({message:`Either 'value' or 'defaultValue' shall be passed. This decides if the input field is controlled or uncontrolled`,moduleName:'Input'});}}var _React$useState=React__default.useState(defaultValue!=null?defaultValue:value),_React$useState2=_slicedToArray(_React$useState,2),inputValue=_React$useState2[0],setInputValue=_React$useState2[1];var handleOnFocus=React__default.useCallback(function(_ref2){var name=_ref2.name,value=_ref2.value;var _value='';if(getPlatformType()==='react-native'&&typeof value==='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value;_value=(_value$target$value=value==null?void 0:value.target.value)!=null?_value$target$value:'';}onFocus==null?void 0:onFocus({name:name,value:_value});},[onFocus]);var handleOnClick=React__default.useCallback(function(_ref3){var name=_ref3.name,value=_ref3.value;var _value='';if(getPlatformType()==='react-native'&&typeof value==='string'){_value=value;}else if(typeof value!=='string'){var _value$currentTarget$;_value=(_value$currentTarget$=value==null?void 0:value.currentTarget.value)!=null?_value$currentTarget$:'';}onClick==null?void 0:onClick({name:name,value:_value});},[onClick]);var handleOnSubmit=React__default.useCallback(function(_ref4){var name=_ref4.name,value=_ref4.value;var _value='';if(getPlatformType()==='react-native'&&typeof value==='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value2;_value=(_value$target$value2=value==null?void 0:value.target.value)!=null?_value$target$value2:'';}if(isReactNative()){onSubmit==null?void 0:onSubmit({name:name,value:_value});}},[onSubmit]);var handleOnBlur=React__default.useCallback(function(_ref5){var name=_ref5.name,value=_ref5.value;var _value='';if(getPlatformType()==='react-native'&&typeof value=='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value3;_value=(_value$target$value3=value==null?void 0:value.target.value)!=null?_value$target$value3:'';}onBlur==null?void 0:onBlur({name:name,value:_value});},[onBlur]);var handleOnChange=React__default.useCallback(function(_ref6){var name=_ref6.name,value=_ref6.value;var _value='';if(getPlatformType()==='react-native'&&typeof value==='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value4;_value=(_value$target$value4=value==null?void 0:value.target.value)!=null?_value$target$value4:'';}onChange==null?void 0:onChange({name:name,value:_value});setInputValue(_value);},[onChange]);var handleOnInput=React__default.useCallback(function(_ref7){var name=_ref7.name,value=_ref7.value;var _value='';if(getPlatformType()==='react-native'&&typeof value=='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value5;_value=(_value$target$value5=value==null?void 0:value.target.value)!=null?_value$target$value5:'';}onInput==null?void 0:onInput({name:name,value:_value});},[onInput]);var handleOnKeyDown=React__default.useCallback(function(_ref8){var name=_ref8.name,key=_ref8.key,code=_ref8.code,event=_ref8.event;onInputKeydownTagHandler(key);onKeyDown==null?void 0:onKeyDown({name:name,key:key,code:code,event:event});},[onKeyDown]);return {handleOnFocus:handleOnFocus,handleOnClick:handleOnClick,handleOnChange:handleOnChange,handleOnBlur:handleOnBlur,handleOnSubmit:handleOnSubmit,handleOnInput:handleOnInput,handleOnKeyDown:handleOnKeyDown,inputValue:inputValue};};var getHintType=function getHintType(_ref9){var validationState=_ref9.validationState,hasHelpText=_ref9.hasHelpText;if(validationState==='error'){return 'error';}if(validationState==='success'){return 'success';}if(hasHelpText){return 'help';}return 'help';};var getDescribedByElementId=function getDescribedByElementId(_ref10){var validationState=_ref10.validationState,hasErrorText=_ref10.hasErrorText,hasSuccessText=_ref10.hasSuccessText,hasHelpText=_ref10.hasHelpText,errorTextId=_ref10.errorTextId,successTextId=_ref10.successTextId,helpTextId=_ref10.helpTextId;if(validationState==='error'&&hasErrorText){return errorTextId;}if(validationState==='success'&&hasSuccessText){return successTextId;}if(hasHelpText){return helpTextId;}return '';};var FocusRingWrapper=styled(BaseBox)(function(_ref11){var theme=_ref11.theme,currentInteraction=_ref11.currentInteraction,isTableInputCell=_ref11.isTableInputCell;return {borderRadius:makeBorderSize(isTableInputCell?theme.border.radius.none:theme.border.radius.medium),width:'100%','&:focus-within':!isTableInputCell?Object.assign({},getFocusRingStyles(),{transitionDuration:castWebType(makeMotionTime(getIn(theme.motion.duration,baseInputBorderBackgroundMotion[currentInteraction==='focus'?'enter':'exit'].duration))),transitionTimingFunction:castWebType(getIn(theme.motion.easing,baseInputBorderBackgroundMotion[currentInteraction==='focus'?'enter':'exit'].easing))}):{}};});var _BaseInput=function _BaseInput(_ref12,ref){var _ref12$as=_ref12.as,as=_ref12$as===void 0?'input':_ref12$as,label=_ref12.label,_ref12$labelPosition=_ref12.labelPosition,labelPosition=_ref12$labelPosition===void 0?'top':_ref12$labelPosition,placeholder=_ref12.placeholder,_ref12$type=_ref12.type,type=_ref12$type===void 0?'text':_ref12$type,defaultValue=_ref12.defaultValue,tags=_ref12.tags,_ref12$showAllTags=_ref12.showAllTags,showAllTags=_ref12$showAllTags===void 0?false:_ref12$showAllTags,_ref12$activeTagIndex=_ref12.activeTagIndex,activeTagIndex=_ref12$activeTagIndex===void 0?-1:_ref12$activeTagIndex,setActiveTagIndex=_ref12.setActiveTagIndex,name=_ref12.name,value=_ref12.value,onFocus=_ref12.onFocus,onChange=_ref12.onChange,onInput=_ref12.onInput,onBlur=_ref12.onBlur,onSubmit=_ref12.onSubmit,onClick=_ref12.onClick,onKeyDown=_ref12.onKeyDown,isDisabled=_ref12.isDisabled,necessityIndicator=_ref12.necessityIndicator,validationState=_ref12.validationState,errorText=_ref12.errorText,helpText=_ref12.helpText,successText=_ref12.successText,isRequired=_ref12.isRequired,leadingIcon=_ref12.leadingIcon,prefix=_ref12.prefix,trailingInteractionElement=_ref12.trailingInteractionElement,leadingInteractionElement=_ref12.leadingInteractionElement,suffix=_ref12.suffix,trailingIcon=_ref12.trailingIcon,maxCharacters=_ref12.maxCharacters,textAlign=_ref12.textAlign,autoFocus=_ref12.autoFocus,keyboardReturnKeyType=_ref12.keyboardReturnKeyType,keyboardType=_ref12.keyboardType,autoCompleteSuggestionType=_ref12.autoCompleteSuggestionType,trailingHeaderSlot=_ref12.trailingHeaderSlot,trailingFooterSlot=_ref12.trailingFooterSlot,numberOfLines=_ref12.numberOfLines,id=_ref12.id,componentName=_ref12.componentName,accessibilityLabel=_ref12.accessibilityLabel,labelId=_ref12.labelId,activeDescendant=_ref12.activeDescendant,hideLabelText=_ref12.hideLabelText,hideFormHint=_ref12.hideFormHint,hasPopup=_ref12.hasPopup,popupId=_ref12.popupId,isPopupExpanded=_ref12.isPopupExpanded,maxTagRows=_ref12.maxTagRows,shouldIgnoreBlurAnimation=_ref12.shouldIgnoreBlurAnimation,setShouldIgnoreBlurAnimation=_ref12.setShouldIgnoreBlurAnimation,autoCapitalize=_ref12.autoCapitalize,setInputWrapperRef=_ref12.setInputWrapperRef,testID=_ref12.testID,isDropdownTrigger=_ref12.isDropdownTrigger,isLabelInsideInput=_ref12.isLabelInsideInput,_ref12$size=_ref12.size,size=_ref12$size===void 0?'medium':_ref12$size,trailingButton=_ref12.trailingButton,_ref12$valueComponent=_ref12.valueComponentType,valueComponentType=_ref12$valueComponent===void 0?'text':_ref12$valueComponent,_ref12$isTableInputCe=_ref12.isTableInputCell,isTableInputCell=_ref12$isTableInputCe===void 0?false:_ref12$isTableInputCe,_ref12$showHintsAsToo=_ref12.showHintsAsTooltip,showHintsAsTooltip=_ref12$showHintsAsToo===void 0?false:_ref12$showHintsAsToo,styledProps=_objectWithoutProperties(_ref12,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var inputRef=React__default.useRef(null);var mergedInputRef=useMergeRefs(ref,inputRef);var inputWrapperRef=React__default.useRef(null);var _useTags=useTags(tags,activeTagIndex,setActiveTagIndex),onInputKeydownTagHandler=_useTags.onInputKeydownTagHandler,visibleTagsCountRef=_useTags.visibleTagsCountRef;var _React$useState3=React__default.useState(false),_React$useState4=_slicedToArray(_React$useState3,2),showAllTagsWithAnimation=_React$useState4[0],setShowAllTagsWithAnimation=_React$useState4[1];var isReactNative=getPlatformType()==='react-native';React__default.useEffect(function(){if(showAllTags){setShowAllTagsWithAnimation(true);}else if(maxTagRows!=='expandable'){setShowAllTagsWithAnimation(false);}},[showAllTags,maxTagRows]);var _useInput=useInput({defaultValue:defaultValue,value:value,onFocus:onFocus,onClick:onClick,onChange:onChange,onBlur:onBlur,onSubmit:onSubmit,onInput:onInput,onKeyDown:onKeyDown,onInputKeydownTagHandler:onInputKeydownTagHandler}),handleOnFocus=_useInput.handleOnFocus,handleOnChange=_useInput.handleOnChange,handleOnClick=_useInput.handleOnClick,handleOnBlur=_useInput.handleOnBlur,handleOnSubmit=_useInput.handleOnSubmit,handleOnInput=_useInput.handleOnInput,handleOnKeyDown=_useInput.handleOnKeyDown,inputValue=_useInput.inputValue;var _useFormId=useFormId(id),inputId=_useFormId.inputId,helpTextId=_useFormId.helpTextId,errorTextId=_useFormId.errorTextId,successTextId=_useFormId.successTextId;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isLabelLeftPositioned=labelPosition==='left'&&matchedDeviceType==='desktop';var _useInteraction=useInteraction(),currentInteraction=_useInteraction.currentInteraction,setCurrentInteraction=_useInteraction.setCurrentInteraction;var _isRequired=isRequired||necessityIndicator==='required';var accessibilityProps=makeAccessible({required:Boolean(_isRequired),disabled:Boolean(isDisabled),invalid:Boolean(validationState==='error'),describedBy:getDescribedByElementId({validationState:validationState,hasErrorText:Boolean(errorText),hasSuccessText:Boolean(successText),hasHelpText:Boolean(helpText),errorTextId:errorTextId,successTextId:successTextId,helpTextId:helpTextId}),label:accessibilityLabel,hasPopup:hasPopup,expanded:hasPopup?isPopupExpanded:undefined,controls:hasPopup?popupId:undefined,role:hasPopup?'combobox':undefined,activeDescendant:activeDescendant});var willRenderHintText=Boolean(helpText)||Boolean(successText)||Boolean(errorText);if(__DEV__){if(autoCompleteSuggestionType&&!autoCompleteSuggestionTypeValues.includes(autoCompleteSuggestionType)){throwBladeError({message:`Expected autoCompleteSuggestionType to be one of ${autoCompleteSuggestionTypeValues.join(', ')} but received ${autoCompleteSuggestionType}`,moduleName:'Input'});}}var isTextArea=as==='textarea';return jsxs(BaseBox,Object.assign({},metaAttribute({name:componentName,testID:testID}),getStyledProps(styledProps),{children:[jsxs(BaseBox,{display:"flex",flexDirection:isLabelLeftPositioned?'row':'column',justifyContent:isLabelLeftPositioned?'center':undefined,alignItems:isLabelLeftPositioned?'center':undefined,position:"relative",width:"100%",children:[!hideLabelText&&!isLabelInsideInput&&label&&jsxs(BaseBox,{display:"flex",flexDirection:isLabelLeftPositioned?'column':'row',justifyContent:"space-between",alignSelf:isTextArea?'flex-start':undefined,marginY:isTextArea&&isLabelLeftPositioned?'spacing.3':'spacing.0',children:[jsx(FormLabel,{as:"label",necessityIndicator:necessityIndicator,position:labelPosition,id:labelId,htmlFor:inputId,size:size,children:label}),trailingHeaderSlot==null?void 0:trailingHeaderSlot(value!=null?value:inputValue)]}),jsx(FocusRingWrapper,{currentInteraction:currentInteraction,isTableInputCell:isTableInputCell,children:jsxs(BaseInputWrapper,{isDropdownTrigger:isDropdownTrigger,isTextArea:isTextArea,isDisabled:isDisabled,validationState:validationState,currentInteraction:currentInteraction,isLabelLeftPositioned:isLabelLeftPositioned,showAllTags:showAllTags,setShowAllTagsWithAnimation:setShowAllTagsWithAnimation,ref:function ref(refNode){if(refNode){setInputWrapperRef==null?void 0:setInputWrapperRef(refNode);inputWrapperRef.current=refNode;}},maxTagRows:maxTagRows,size:size,numberOfLines:numberOfLines,onClick:function onClick(){if(!isReactNative){var _inputRef$current;(_inputRef$current=inputRef.current)==null?void 0:_inputRef$current.focus();}},isTableInputCell:isTableInputCell,children:[jsx(BaseInputVisuals,{size:size,leadingIcon:leadingIcon,prefix:prefix,isDisabled:isDisabled,leadingInteractionElement:leadingInteractionElement}),jsx(BaseInputTagSlot,{renderAs:as,tags:tags,isDisabled:isDisabled,showAllTags:showAllTagsWithAnimation,setFocusOnInput:function setFocusOnInput(){if(ref&&!isReactNative&&'current'in ref){var _ref$current;(_ref$current=ref.current)==null?void 0:_ref$current.focus();}},labelPrefix:isLabelInsideInput?label:undefined,isDropdownTrigger:isDropdownTrigger,visibleTagsCountRef:visibleTagsCountRef,handleOnInputClick:function handleOnInputClick(e){handleOnClick({name:name,value:isReactNative?value:e});},setShouldIgnoreBlurAnimation:setShouldIgnoreBlurAnimation,maxTagRows:maxTagRows,inputWrapperRef:inputWrapperRef,size:size,numberOfLines:numberOfLines,isTextArea:isTextArea,children:jsx(StyledBaseInput,Object.assign({as:as,id:inputId,ref:mergedInputRef,name:name,type:type,defaultValue:defaultValue,value:value,placeholder:placeholder,isDisabled:isDisabled,validationState:validationState,isRequired:_isRequired,handleOnFocus:handleOnFocus,handleOnChange:handleOnChange,handleOnBlur:handleOnBlur,handleOnSubmit:handleOnSubmit,handleOnInput:handleOnInput,handleOnKeyDown:handleOnKeyDown,handleOnClick:handleOnClick,leadingIcon:leadingIcon,prefix:prefix,trailingInteractionElement:trailingInteractionElement,leadingInteractionElement:leadingInteractionElement,suffix:suffix,trailingIcon:trailingIcon,maxCharacters:maxCharacters,textAlign:textAlign,autoFocus:autoFocus,keyboardReturnKeyType:keyboardReturnKeyType,keyboardType:keyboardType,autoCompleteSuggestionType:autoCompleteSuggestionType,accessibilityProps:accessibilityProps,currentInteraction:currentInteraction,setCurrentInteraction:setCurrentInteraction,numberOfLines:numberOfLines,isTextArea:isTextArea||maxTagRows==='multiple'||maxTagRows==='expandable',hasPopup:hasPopup,hasTags:!!(tags&&tags.length>0),shouldIgnoreBlurAnimation:shouldIgnoreBlurAnimation,autoCapitalize:autoCapitalize,isDropdownTrigger:isDropdownTrigger,$size:size,valueComponentType:valueComponentType,isTableInputCell:isTableInputCell},metaAttribute({name:MetaConstants.StyledBaseInput})))}),jsx(BaseInputVisuals,{trailingInteractionElement:trailingInteractionElement,suffix:suffix,trailingIcon:trailingIcon,isDisabled:isDisabled,validationState:validationState,trailingButton:trailingButton,size:size,errorText:errorText,successText:successText,showHintsAsTooltip:showHintsAsTooltip})]})})]}),hideFormHint||showHintsAsTooltip?null:jsx(BaseBox,{marginLeft:makeSize(isLabelLeftPositioned&&!hideLabelText?formHintLeftLabelMarginLeft[size]:0),children:jsxs(BaseBox,{display:"flex",flexDirection:"row",justifyContent:willRenderHintText?'space-between':'flex-end',children:[jsx(FormHint,{type:getHintType({validationState:validationState,hasHelpText:Boolean(helpText)}),helpText:helpText,errorText:errorText,successText:successText,helpTextId:helpTextId,errorTextId:errorTextId,successTextId:successTextId,size:size}),trailingFooterSlot==null?void 0:trailingFooterSlot(value!=null?value:inputValue)]})})]}));};var BaseInputWithRef=React__default.forwardRef(_BaseInput);var BaseInput=assignWithoutSideEffects(BaseInputWithRef,{displayName:'BaseInput'});
|
|
42
42
|
|
|
43
43
|
export { BaseInput, getHintType };
|
|
44
44
|
//# sourceMappingURL=BaseInput.js.map
|