@razorpay/blade 11.11.1 → 11.13.0

package/build/lib/native/components/Input/BaseInput/baseInputStyles.js

@@ -12,7 +12,7 @@ import '../../BladeProvider/useTheme.js';
 import getIn from '../../../utils/lodashButBetter/get.js';
 import getHeadingStyles from '../../Typography/Heading/getHeadingStyles.js';
 
-var getBaseInputState=function getBaseInputState(_ref){var isFocused=_ref.isFocused,isHovered=_ref.isHovered,isDisabled=_ref.isDisabled;if(isDisabled){return 'disabled';}else if(isFocused){return 'focused';}else if(isHovered){return 'hovered';}else {return 'default';}};var getInputBackgroundAndBorderStyles=function getInputBackgroundAndBorderStyles(_ref2){var theme=_ref2.theme,isHovered=_ref2.isHovered,isFocused=_ref2.isFocused,isDisabled=_ref2.isDisabled,validationState=_ref2.validationState,isTextArea=_ref2.isTextArea,isDropdownTrigger=_ref2.isDropdownTrigger;var backgroundColor=getIn(theme.colors,baseInputBackgroundColor.default);var borderColor=getIn(theme.colors,baseInputBorderColor.default);var borderWidth=getIn(theme.border.width,baseInputBorderWidth.default);var baseInputState=getBaseInputState({isFocused:isFocused,isHovered:isHovered,isDisabled:isDisabled});backgroundColor=getIn(theme.colors,baseInputBackgroundColor[baseInputState]);borderColor=getIn(theme.colors,baseInputBorderColor[baseInputState]);borderWidth=getIn(theme.border.width,baseInputBorderWidth[baseInputState]);if(validationState==='error'){borderColor=getIn(theme.colors,baseInputBorderColor.error);borderWidth=getIn(theme.border.width,baseInputBorderWidth.error);}else if(validationState==='success'){borderColor=getIn(theme.colors,baseInputBorderColor.success);borderWidth=getIn(theme.border.width,baseInputBorderWidth.success);}return Object.assign({backgroundColor:backgroundColor,borderRadius:makeBorderSize(theme.border.radius.medium),borderStyle:'solid',display:'flex',flexDirection:'row',width:'100%',alignItems:isTextArea?'flex-start':undefined,position:'relative',height:isDropdownTrigger?'auto':undefined,border:'none'},getBaseInputBorderStyles({theme:theme,borderColor:borderColor,borderWidth:borderWidth,isFocused:isFocused}));};var getLeftPadding=function getLeftPadding(_ref3){var theme=_ref3.theme,isDropdownTrigger=_ref3.isDropdownTrigger,hasLeadingIcon=_ref3.hasLeadingIcon,hasPrefix=_ref3.hasPrefix,size=_ref3.size;if(isDropdownTrigger){return theme.spacing[0];}if(hasLeadingIcon||hasPrefix){return theme.spacing[3];}return theme.spacing[baseInputPaddingTokens.left[size]];};var getRightPadding=function getRightPadding(_ref4){var theme=_ref4.theme,hasTrailingInteractionElement=_ref4.hasTrailingInteractionElement,hasSuffix=_ref4.hasSuffix,hasTrailingIcon=_ref4.hasTrailingIcon,size=_ref4.size;if(hasTrailingInteractionElement||hasSuffix||hasTrailingIcon){return theme.spacing[3];}return theme.spacing[baseInputPaddingTokens.right[size]];};var getBaseInputStyles=function getBaseInputStyles(_ref5){var theme=_ref5.theme,isDisabled=_ref5.isDisabled,leadingIcon=_ref5.leadingIcon,prefix=_ref5.prefix,trailingInteractionElement=_ref5.trailingInteractionElement,leadingInteractionElement=_ref5.leadingInteractionElement,suffix=_ref5.suffix,trailingIcon=_ref5.trailingIcon,textAlign=_ref5.textAlign,isTextArea=_ref5.isTextArea,hasTags=_ref5.hasTags,isDropdownTrigger=_ref5.isDropdownTrigger,size=_ref5.size,valueComponentType=_ref5.valueComponentType;var _getInputVisualsToBeR=getInputVisualsToBeRendered({leadingIcon:leadingIcon,prefix:prefix,trailingInteractionElement:trailingInteractionElement,leadingInteractionElement:leadingInteractionElement,suffix:suffix,trailingIcon:trailingIcon,size:size}),hasLeadingIcon=_getInputVisualsToBeR.hasLeadingIcon,hasPrefix=_getInputVisualsToBeR.hasPrefix,hasTrailingInteractionElement=_getInputVisualsToBeR.hasTrailingInteractionElement,hasSuffix=_getInputVisualsToBeR.hasSuffix,hasTrailingIcon=_getInputVisualsToBeR.hasTrailingIcon;var isDropdownWithTags=isDropdownTrigger&&hasTags;var isReactNative=getPlatformType()==='react-native';return Object.assign({},valueComponentType==='heading'?getHeadingStyles({size:size,weight:'regular',color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.subtle',theme:theme}):getTextStyles({size:size,variant:'body',weight:'regular',color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.subtle',theme:theme}),{flex:1,backgroundColor:'transparent',paddingTop:makeSpace(theme.spacing[baseInputPaddingTokens.top[size]]),paddingBottom:makeSpace(theme.spacing[baseInputPaddingTokens.bottom[size]]),paddingLeft:makeSpace(getLeftPadding({theme:theme,isDropdownTrigger:isDropdownTrigger,hasLeadingIcon:hasLeadingIcon,hasPrefix:hasPrefix,size:size})),paddingRight:getRightPadding({theme:theme,hasTrailingInteractionElement:hasTrailingInteractionElement,hasSuffix:hasSuffix,hasTrailingIcon:hasTrailingIcon,size:size}),textAlign:textAlign,width:'100%',height:isTextArea||isDropdownWithTags?undefined:makeSpace(baseInputHeight[size]),minHeight:isDropdownWithTags?undefined:makeSpace(baseInputHeight[size])},isReactNative?{}:{resize:'none'});};var getAnimatedBaseInputWrapperMaxHeight=function getAnimatedBaseInputWrapperMaxHeight(_ref6){var maxTagRows=_ref6.maxTagRows,showAllTags=_ref6.showAllTags,size=_ref6.size;if(maxTagRows==='single'){return baseInputHeight[size];}if(maxTagRows==='multiple'){return baseInputWrapperMaxHeight[size];}return showAllTags?baseInputWrapperMaxHeight[size]:baseInputHeight[size];};
+var getBaseInputState=function getBaseInputState(_ref){var isFocused=_ref.isFocused,isHovered=_ref.isHovered,isDisabled=_ref.isDisabled;if(isDisabled){return 'disabled';}else if(isFocused){return 'focused';}else if(isHovered){return 'hovered';}else {return 'default';}};var getInputBackgroundAndBorderStyles=function getInputBackgroundAndBorderStyles(_ref2){var theme=_ref2.theme,isHovered=_ref2.isHovered,isFocused=_ref2.isFocused,isDisabled=_ref2.isDisabled,validationState=_ref2.validationState,isTextArea=_ref2.isTextArea,isDropdownTrigger=_ref2.isDropdownTrigger;var backgroundColor=getIn(theme.colors,baseInputBackgroundColor.default);var borderColor=getIn(theme.colors,baseInputBorderColor.default);var borderWidth=getIn(theme.border.width,baseInputBorderWidth.default);var baseInputState=getBaseInputState({isFocused:isFocused,isHovered:isHovered,isDisabled:isDisabled});backgroundColor=getIn(theme.colors,baseInputBackgroundColor[baseInputState]);borderColor=getIn(theme.colors,baseInputBorderColor[baseInputState]);borderWidth=getIn(theme.border.width,baseInputBorderWidth[baseInputState]);if(validationState==='error'){borderColor=getIn(theme.colors,baseInputBorderColor.error);borderWidth=getIn(theme.border.width,baseInputBorderWidth.error);}else if(validationState==='success'){borderColor=getIn(theme.colors,baseInputBorderColor.success);borderWidth=getIn(theme.border.width,baseInputBorderWidth.success);}return Object.assign({backgroundColor:backgroundColor,borderRadius:makeBorderSize(theme.border.radius.medium),borderStyle:'solid',display:'flex',flexDirection:'row',width:'100%',alignItems:isTextArea?'flex-start':undefined,position:'relative',height:isDropdownTrigger&&!isTextArea?'auto':undefined,border:'none'},getBaseInputBorderStyles({theme:theme,borderColor:borderColor,borderWidth:borderWidth,isFocused:isFocused}));};var getLeftPadding=function getLeftPadding(_ref3){var theme=_ref3.theme,isDropdownTrigger=_ref3.isDropdownTrigger,hasLeadingIcon=_ref3.hasLeadingIcon,hasPrefix=_ref3.hasPrefix,size=_ref3.size;if(isDropdownTrigger){return theme.spacing[0];}if(hasLeadingIcon||hasPrefix){return theme.spacing[3];}return theme.spacing[baseInputPaddingTokens.left[size]];};var getRightPadding=function getRightPadding(_ref4){var theme=_ref4.theme,hasTrailingInteractionElement=_ref4.hasTrailingInteractionElement,hasSuffix=_ref4.hasSuffix,hasTrailingIcon=_ref4.hasTrailingIcon,size=_ref4.size;if(hasTrailingInteractionElement||hasSuffix||hasTrailingIcon){return theme.spacing[3];}return theme.spacing[baseInputPaddingTokens.right[size]];};var getBaseInputStyles=function getBaseInputStyles(_ref5){var theme=_ref5.theme,isDisabled=_ref5.isDisabled,leadingIcon=_ref5.leadingIcon,prefix=_ref5.prefix,trailingInteractionElement=_ref5.trailingInteractionElement,leadingInteractionElement=_ref5.leadingInteractionElement,suffix=_ref5.suffix,trailingIcon=_ref5.trailingIcon,textAlign=_ref5.textAlign,isTextArea=_ref5.isTextArea,hasTags=_ref5.hasTags,isDropdownTrigger=_ref5.isDropdownTrigger,size=_ref5.size,valueComponentType=_ref5.valueComponentType;var _getInputVisualsToBeR=getInputVisualsToBeRendered({leadingIcon:leadingIcon,prefix:prefix,trailingInteractionElement:trailingInteractionElement,leadingInteractionElement:leadingInteractionElement,suffix:suffix,trailingIcon:trailingIcon,size:size}),hasLeadingIcon=_getInputVisualsToBeR.hasLeadingIcon,hasPrefix=_getInputVisualsToBeR.hasPrefix,hasTrailingInteractionElement=_getInputVisualsToBeR.hasTrailingInteractionElement,hasSuffix=_getInputVisualsToBeR.hasSuffix,hasTrailingIcon=_getInputVisualsToBeR.hasTrailingIcon;var isDropdownWithTags=isDropdownTrigger&&hasTags;var isReactNative=getPlatformType()==='react-native';return Object.assign({},valueComponentType==='heading'?getHeadingStyles({size:size,weight:'regular',color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.subtle',theme:theme}):getTextStyles({size:size,variant:'body',weight:'regular',color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.subtle',theme:theme}),{flex:1,backgroundColor:'transparent',paddingTop:makeSpace(theme.spacing[baseInputPaddingTokens.top[size]]),paddingBottom:makeSpace(theme.spacing[baseInputPaddingTokens.bottom[size]]),paddingLeft:makeSpace(getLeftPadding({theme:theme,isDropdownTrigger:isDropdownTrigger,hasLeadingIcon:hasLeadingIcon,hasPrefix:hasPrefix,size:size})),paddingRight:getRightPadding({theme:theme,hasTrailingInteractionElement:hasTrailingInteractionElement,hasSuffix:hasSuffix,hasTrailingIcon:hasTrailingIcon,size:size}),textAlign:textAlign,width:'100%',height:isTextArea||isDropdownWithTags?undefined:makeSpace(baseInputHeight[size]),minHeight:isTextArea||isDropdownWithTags?undefined:makeSpace(baseInputHeight[size])},isReactNative?{}:{resize:'none'});};var getAnimatedBaseInputWrapperMaxHeight=function getAnimatedBaseInputWrapperMaxHeight(_ref6){var maxTagRows=_ref6.maxTagRows,showAllTags=_ref6.showAllTags,size=_ref6.size;if(maxTagRows==='single'){return baseInputHeight[size];}if(maxTagRows==='multiple'){return baseInputWrapperMaxHeight[size];}return showAllTags?baseInputWrapperMaxHeight[size]:baseInputHeight[size];};
 
 export { getAnimatedBaseInputWrapperMaxHeight, getBaseInputState, getBaseInputStyles, getInputBackgroundAndBorderStyles };
 //# sourceMappingURL=baseInputStyles.js.map

package/build/lib/native/components/Input/BaseInput/baseInputStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"baseInputStyles.js","sources":["../../../../../../src/components/Input/BaseInput/baseInputStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport type { BaseInputProps } from './BaseInput';\nimport { getBaseInputBorderStyles } from './getBaseInputBorderStyles';\nimport {\n  baseInputBackgroundColor,\n  baseInputBorderColor,\n  baseInputBorderWidth,\n  baseInputHeight,\n  baseInputPaddingTokens,\n  baseInputWrapperMaxHeight,\n} from './baseInputTokens';\nimport { getInputVisualsToBeRendered } from './BaseInputVisuals';\nimport type { BaseInputWrapperProps } from './types';\nimport type { Theme } from '~components/BladeProvider';\nimport getTextStyles from '~components/Typography/Text/getTextStyles';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeBorderSize } from '~utils/makeBorderSize';\nimport { getPlatformType } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport getHeadingStyles from '~components/Typography/Heading/getHeadingStyles';\n\ntype GetInputStyles = Pick<\n  BaseInputProps,\n  | 'isDisabled'\n  | 'validationState'\n  | 'leadingIcon'\n  | 'prefix'\n  | 'trailingInteractionElement'\n  | 'leadingInteractionElement'\n  | 'suffix'\n  | 'trailingIcon'\n  | 'textAlign'\n  | 'isDropdownTrigger'\n  | 'valueComponentType'\n> & {\n  isHovered?: boolean;\n  isFocused?: boolean;\n  isTextArea?: boolean;\n  hasTags?: boolean;\n  theme: Theme;\n  size: NonNullable<BaseInputProps['size']>;\n};\n\nexport const getBaseInputState = ({\n  isFocused,\n  isHovered,\n  isDisabled,\n}: {\n  isFocused?: boolean;\n  isHovered?: boolean;\n  isDisabled?: boolean;\n}): 'focused' | 'hovered' | 'disabled' | 'default' => {\n  if (isDisabled) {\n    return 'disabled';\n  } else if (isFocused) {\n    return 'focused';\n  } else if (isHovered) {\n    return 'hovered';\n  } else {\n    return 'default';\n  }\n};\n\nexport const getInputBackgroundAndBorderStyles = ({\n  theme,\n  isHovered,\n  isFocused,\n  isDisabled,\n  validationState,\n  isTextArea,\n  isDropdownTrigger,\n}: Pick<\n  GetInputStyles,\n  | 'theme'\n  | 'isFocused'\n  | 'isDisabled'\n  | 'validationState'\n  | 'isHovered'\n  | 'isTextArea'\n  | 'isDropdownTrigger'\n>): CSSObject => {\n  // normal state\n  let backgroundColor = getIn(theme.colors, baseInputBackgroundColor.default);\n  let borderColor = getIn(theme.colors, baseInputBorderColor.default);\n  let borderWidth = getIn(theme.border.width, baseInputBorderWidth.default);\n\n  const baseInputState = getBaseInputState({ isFocused, isHovered, isDisabled });\n\n  backgroundColor = getIn(theme.colors, baseInputBackgroundColor[baseInputState]);\n  borderColor = getIn(theme.colors, baseInputBorderColor[baseInputState]);\n  borderWidth = getIn(theme.border.width, baseInputBorderWidth[baseInputState]);\n\n  if (validationState === 'error') {\n    borderColor = getIn(theme.colors, baseInputBorderColor.error);\n    borderWidth = getIn(theme.border.width, baseInputBorderWidth.error);\n  } else if (validationState === 'success') {\n    borderColor = getIn(theme.colors, baseInputBorderColor.success);\n    borderWidth = getIn(theme.border.width, baseInputBorderWidth.success);\n  }\n\n  return {\n    backgroundColor,\n    borderRadius: makeBorderSize(theme.border.radius.medium),\n    borderStyle: 'solid',\n    display: 'flex',\n    flexDirection: 'row',\n    width: '100%',\n    alignItems: isTextArea ? 'flex-start' : undefined,\n    position: 'relative',\n    height: isDropdownTrigger ? 'auto' : undefined,\n    border: 'none',\n    ...getBaseInputBorderStyles({ theme, borderColor, borderWidth, isFocused }),\n  };\n};\n\nconst getLeftPadding = ({\n  theme,\n  isDropdownTrigger,\n  hasLeadingIcon,\n  hasPrefix,\n  size,\n}: {\n  theme: Theme;\n  hasLeadingIcon: boolean;\n  hasPrefix: boolean;\n  isDropdownTrigger: GetInputStyles['isDropdownTrigger'];\n  size: GetInputStyles['size'];\n}): number => {\n  if (isDropdownTrigger) {\n    return theme.spacing[0];\n  }\n\n  if (hasLeadingIcon || hasPrefix) {\n    return theme.spacing[3];\n  }\n\n  return theme.spacing[baseInputPaddingTokens.left[size]];\n};\n\nconst getRightPadding = ({\n  theme,\n  hasTrailingInteractionElement,\n  hasSuffix,\n  hasTrailingIcon,\n  size,\n}: {\n  theme: Theme;\n  hasTrailingInteractionElement: boolean;\n  hasSuffix: boolean;\n  hasTrailingIcon: boolean;\n  size: GetInputStyles['size'];\n}): number => {\n  if (hasTrailingInteractionElement || hasSuffix || hasTrailingIcon) {\n    return theme.spacing[3];\n  }\n  return theme.spacing[baseInputPaddingTokens.right[size]];\n};\n\nexport const getBaseInputStyles = ({\n  theme,\n  isDisabled,\n  leadingIcon,\n  prefix,\n  trailingInteractionElement,\n  leadingInteractionElement,\n  suffix,\n  trailingIcon,\n  textAlign,\n  isTextArea,\n  hasTags,\n  isDropdownTrigger,\n  size,\n  valueComponentType,\n}: GetInputStyles): CSSObject => {\n  const {\n    hasLeadingIcon,\n    hasPrefix,\n    hasTrailingInteractionElement,\n    hasSuffix,\n    hasTrailingIcon,\n  } = getInputVisualsToBeRendered({\n    leadingIcon,\n    prefix,\n    trailingInteractionElement,\n    leadingInteractionElement,\n    suffix,\n    trailingIcon,\n    size,\n  });\n\n  const isDropdownWithTags = isDropdownTrigger && hasTags;\n  const isReactNative = getPlatformType() === 'react-native';\n\n  return {\n    ...(valueComponentType === 'heading'\n      ? getHeadingStyles({\n          size,\n          weight: 'regular',\n          color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle',\n          theme,\n        })\n      : getTextStyles({\n          size,\n          variant: 'body',\n          weight: 'regular',\n          color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle',\n          theme,\n        })),\n\n    // take the full available width of parent container for input field\n    flex: 1,\n    backgroundColor: 'transparent',\n\n    paddingTop: makeSpace(theme.spacing[baseInputPaddingTokens.top[size]]),\n    paddingBottom: makeSpace(theme.spacing[baseInputPaddingTokens.bottom[size]]),\n    paddingLeft: makeSpace(\n      getLeftPadding({ theme, isDropdownTrigger, hasLeadingIcon, hasPrefix, size }),\n    ),\n    paddingRight: getRightPadding({\n      theme,\n      hasTrailingInteractionElement,\n      hasSuffix,\n      hasTrailingIcon,\n      size,\n    }),\n\n    textAlign,\n    width: '100%',\n    height: isTextArea || isDropdownWithTags ? undefined : makeSpace(baseInputHeight[size]),\n    minHeight: isDropdownWithTags ? undefined : makeSpace(baseInputHeight[size]),\n    ...(isReactNative ? {} : { resize: 'none' }),\n  };\n};\n\nexport const getAnimatedBaseInputWrapperMaxHeight = ({\n  maxTagRows,\n  showAllTags,\n  size,\n}: Pick<BaseInputWrapperProps, 'maxTagRows' | 'showAllTags' | 'size'>): number => {\n  if (maxTagRows === 'single') {\n    return baseInputHeight[size];\n  }\n\n  if (maxTagRows === 'multiple') {\n    return baseInputWrapperMaxHeight[size];\n  }\n\n  // In expandable, max-height depends on the state\n  return showAllTags ? baseInputWrapperMaxHeight[size] : baseInputHeight[size];\n};\n"],"names":["getBaseInputState","_ref","isFocused","isHovered","isDisabled","getInputBackgroundAndBorderStyles","_ref2","theme","validationState","isTextArea","isDropdownTrigger","backgroundColor","getIn","colors","baseInputBackgroundColor","default","borderColor","baseInputBorderColor","borderWidth","border","width","baseInputBorderWidth","baseInputState","error","success","Object","assign","borderRadius","makeBorderSize","radius","medium","borderStyle","display","flexDirection","alignItems","undefined","position","height","getBaseInputBorderStyles","getLeftPadding","_ref3","hasLeadingIcon","hasPrefix","size","spacing","baseInputPaddingTokens","left","getRightPadding","_ref4","hasTrailingInteractionElement","hasSuffix","hasTrailingIcon","right","getBaseInputStyles","_ref5","leadingIcon","prefix","trailingInteractionElement","leadingInteractionElement","suffix","trailingIcon","textAlign","hasTags","valueComponentType","_getInputVisualsToBeR","getInputVisualsToBeRendered","isDropdownWithTags","isReactNative","getPlatformType","getHeadingStyles","weight","color","getTextStyles","variant","flex","paddingTop","makeSpace","top","paddingBottom","bottom","paddingLeft","paddingRight","baseInputHeight","minHeight","resize","getAnimatedBaseInputWrapperMaxHeight","_ref6","maxTagRows","showAllTags","baseInputWrapperMaxHeight"],"mappings":"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"}
+{"version":3,"file":"baseInputStyles.js","sources":["../../../../../../src/components/Input/BaseInput/baseInputStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport type { BaseInputProps } from './BaseInput';\nimport { getBaseInputBorderStyles } from './getBaseInputBorderStyles';\nimport {\n  baseInputBackgroundColor,\n  baseInputBorderColor,\n  baseInputBorderWidth,\n  baseInputHeight,\n  baseInputPaddingTokens,\n  baseInputWrapperMaxHeight,\n} from './baseInputTokens';\nimport { getInputVisualsToBeRendered } from './BaseInputVisuals';\nimport type { BaseInputWrapperProps } from './types';\nimport type { Theme } from '~components/BladeProvider';\nimport getTextStyles from '~components/Typography/Text/getTextStyles';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeBorderSize } from '~utils/makeBorderSize';\nimport { getPlatformType } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport getHeadingStyles from '~components/Typography/Heading/getHeadingStyles';\n\ntype GetInputStyles = Pick<\n  BaseInputProps,\n  | 'isDisabled'\n  | 'validationState'\n  | 'leadingIcon'\n  | 'prefix'\n  | 'trailingInteractionElement'\n  | 'leadingInteractionElement'\n  | 'suffix'\n  | 'trailingIcon'\n  | 'textAlign'\n  | 'isDropdownTrigger'\n  | 'valueComponentType'\n> & {\n  isHovered?: boolean;\n  isFocused?: boolean;\n  isTextArea?: boolean;\n  hasTags?: boolean;\n  theme: Theme;\n  size: NonNullable<BaseInputProps['size']>;\n};\n\nexport const getBaseInputState = ({\n  isFocused,\n  isHovered,\n  isDisabled,\n}: {\n  isFocused?: boolean;\n  isHovered?: boolean;\n  isDisabled?: boolean;\n}): 'focused' | 'hovered' | 'disabled' | 'default' => {\n  if (isDisabled) {\n    return 'disabled';\n  } else if (isFocused) {\n    return 'focused';\n  } else if (isHovered) {\n    return 'hovered';\n  } else {\n    return 'default';\n  }\n};\n\nexport const getInputBackgroundAndBorderStyles = ({\n  theme,\n  isHovered,\n  isFocused,\n  isDisabled,\n  validationState,\n  isTextArea,\n  isDropdownTrigger,\n}: Pick<\n  GetInputStyles,\n  | 'theme'\n  | 'isFocused'\n  | 'isDisabled'\n  | 'validationState'\n  | 'isHovered'\n  | 'isTextArea'\n  | 'isDropdownTrigger'\n>): CSSObject => {\n  // normal state\n  let backgroundColor = getIn(theme.colors, baseInputBackgroundColor.default);\n  let borderColor = getIn(theme.colors, baseInputBorderColor.default);\n  let borderWidth = getIn(theme.border.width, baseInputBorderWidth.default);\n\n  const baseInputState = getBaseInputState({ isFocused, isHovered, isDisabled });\n\n  backgroundColor = getIn(theme.colors, baseInputBackgroundColor[baseInputState]);\n  borderColor = getIn(theme.colors, baseInputBorderColor[baseInputState]);\n  borderWidth = getIn(theme.border.width, baseInputBorderWidth[baseInputState]);\n\n  if (validationState === 'error') {\n    borderColor = getIn(theme.colors, baseInputBorderColor.error);\n    borderWidth = getIn(theme.border.width, baseInputBorderWidth.error);\n  } else if (validationState === 'success') {\n    borderColor = getIn(theme.colors, baseInputBorderColor.success);\n    borderWidth = getIn(theme.border.width, baseInputBorderWidth.success);\n  }\n\n  return {\n    backgroundColor,\n    borderRadius: makeBorderSize(theme.border.radius.medium),\n    borderStyle: 'solid',\n    display: 'flex',\n    flexDirection: 'row',\n    width: '100%',\n    alignItems: isTextArea ? 'flex-start' : undefined,\n    position: 'relative',\n    height: isDropdownTrigger && !isTextArea ? 'auto' : undefined,\n    border: 'none',\n    ...getBaseInputBorderStyles({ theme, borderColor, borderWidth, isFocused }),\n  };\n};\n\nconst getLeftPadding = ({\n  theme,\n  isDropdownTrigger,\n  hasLeadingIcon,\n  hasPrefix,\n  size,\n}: {\n  theme: Theme;\n  hasLeadingIcon: boolean;\n  hasPrefix: boolean;\n  isDropdownTrigger: GetInputStyles['isDropdownTrigger'];\n  size: GetInputStyles['size'];\n}): number => {\n  if (isDropdownTrigger) {\n    return theme.spacing[0];\n  }\n\n  if (hasLeadingIcon || hasPrefix) {\n    return theme.spacing[3];\n  }\n\n  return theme.spacing[baseInputPaddingTokens.left[size]];\n};\n\nconst getRightPadding = ({\n  theme,\n  hasTrailingInteractionElement,\n  hasSuffix,\n  hasTrailingIcon,\n  size,\n}: {\n  theme: Theme;\n  hasTrailingInteractionElement: boolean;\n  hasSuffix: boolean;\n  hasTrailingIcon: boolean;\n  size: GetInputStyles['size'];\n}): number => {\n  if (hasTrailingInteractionElement || hasSuffix || hasTrailingIcon) {\n    return theme.spacing[3];\n  }\n  return theme.spacing[baseInputPaddingTokens.right[size]];\n};\n\nexport const getBaseInputStyles = ({\n  theme,\n  isDisabled,\n  leadingIcon,\n  prefix,\n  trailingInteractionElement,\n  leadingInteractionElement,\n  suffix,\n  trailingIcon,\n  textAlign,\n  isTextArea,\n  hasTags,\n  isDropdownTrigger,\n  size,\n  valueComponentType,\n}: GetInputStyles): CSSObject => {\n  const {\n    hasLeadingIcon,\n    hasPrefix,\n    hasTrailingInteractionElement,\n    hasSuffix,\n    hasTrailingIcon,\n  } = getInputVisualsToBeRendered({\n    leadingIcon,\n    prefix,\n    trailingInteractionElement,\n    leadingInteractionElement,\n    suffix,\n    trailingIcon,\n    size,\n  });\n\n  const isDropdownWithTags = isDropdownTrigger && hasTags;\n  const isReactNative = getPlatformType() === 'react-native';\n\n  return {\n    ...(valueComponentType === 'heading'\n      ? getHeadingStyles({\n          size,\n          weight: 'regular',\n          color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle',\n          theme,\n        })\n      : getTextStyles({\n          size,\n          variant: 'body',\n          weight: 'regular',\n          color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle',\n          theme,\n        })),\n\n    // take the full available width of parent container for input field\n    flex: 1,\n    backgroundColor: 'transparent',\n\n    paddingTop: makeSpace(theme.spacing[baseInputPaddingTokens.top[size]]),\n    paddingBottom: makeSpace(theme.spacing[baseInputPaddingTokens.bottom[size]]),\n    paddingLeft: makeSpace(\n      getLeftPadding({ theme, isDropdownTrigger, hasLeadingIcon, hasPrefix, size }),\n    ),\n    paddingRight: getRightPadding({\n      theme,\n      hasTrailingInteractionElement,\n      hasSuffix,\n      hasTrailingIcon,\n      size,\n    }),\n\n    textAlign,\n    width: '100%',\n    height: isTextArea || isDropdownWithTags ? undefined : makeSpace(baseInputHeight[size]),\n    minHeight: isTextArea || isDropdownWithTags ? undefined : makeSpace(baseInputHeight[size]),\n    ...(isReactNative ? {} : { resize: 'none' }),\n  };\n};\n\nexport const getAnimatedBaseInputWrapperMaxHeight = ({\n  maxTagRows,\n  showAllTags,\n  size,\n}: Pick<BaseInputWrapperProps, 'maxTagRows' | 'showAllTags' | 'size'>): number => {\n  if (maxTagRows === 'single') {\n    return baseInputHeight[size];\n  }\n\n  if (maxTagRows === 'multiple') {\n    return baseInputWrapperMaxHeight[size];\n  }\n\n  // In expandable, max-height depends on the state\n  return showAllTags ? baseInputWrapperMaxHeight[size] : baseInputHeight[size];\n};\n"],"names":["getBaseInputState","_ref","isFocused","isHovered","isDisabled","getInputBackgroundAndBorderStyles","_ref2","theme","validationState","isTextArea","isDropdownTrigger","backgroundColor","getIn","colors","baseInputBackgroundColor","default","borderColor","baseInputBorderColor","borderWidth","border","width","baseInputBorderWidth","baseInputState","error","success","Object","assign","borderRadius","makeBorderSize","radius","medium","borderStyle","display","flexDirection","alignItems","undefined","position","height","getBaseInputBorderStyles","getLeftPadding","_ref3","hasLeadingIcon","hasPrefix","size","spacing","baseInputPaddingTokens","left","getRightPadding","_ref4","hasTrailingInteractionElement","hasSuffix","hasTrailingIcon","right","getBaseInputStyles","_ref5","leadingIcon","prefix","trailingInteractionElement","leadingInteractionElement","suffix","trailingIcon","textAlign","hasTags","valueComponentType","_getInputVisualsToBeR","getInputVisualsToBeRendered","isDropdownWithTags","isReactNative","getPlatformType","getHeadingStyles","weight","color","getTextStyles","variant","flex","paddingTop","makeSpace","top","paddingBottom","bottom","paddingLeft","paddingRight","baseInputHeight","minHeight","resize","getAnimatedBaseInputWrapperMaxHeight","_ref6","maxTagRows","showAllTags","baseInputWrapperMaxHeight"],"mappings":"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"}

package/build/lib/native/components/Input/BaseInput/useTaggedInput.js

@@ -0,0 +1,13 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default from 'react';
+import { getTagsGroup } from '../../Tag/getTagsGroup.js';
+import 'react-native';
+import { isReactNative } from '../../../utils/platform/isReactNative.js';
+import '../../BladeProvider/useTheme.js';
+import { useControllableState } from '../../../utils/useControllable.js';
+
+var useTaggedInput=function useTaggedInput(_ref){var tags=_ref.tags,isDisabled=_ref.isDisabled,onTagChange=_ref.onTagChange,isTaggedInput=_ref.isTaggedInput,inputRef=_ref.inputRef,onChange=_ref.onChange,name=_ref.name,value=_ref.value,defaultValue=_ref.defaultValue;var _React$useState=React__default.useState(-1),_React$useState2=_slicedToArray(_React$useState,2),activeTagIndex=_React$useState2[0],setActiveTagIndex=_React$useState2[1];var _React$useState3=React__default.useState(defaultValue!=null?defaultValue:''),_React$useState4=_slicedToArray(_React$useState3,2),inputValueUncontrolled=_React$useState4[0],setInputValueUncontrolled=_React$useState4[1];var _useControllableState=useControllableState({value:tags,defaultValue:[],onChange:function onChange(tags){onTagChange==null?void 0:onTagChange({tags:tags});}}),_useControllableState2=_slicedToArray(_useControllableState,2),tagsValue=_useControllableState2[0],setTagsValue=_useControllableState2[1];var isTagsControlled=Boolean(tags);var getNewTagsArray=function getNewTagsArray(indexToRemove){var currentTags=tagsValue;if(!currentTags){return [];}if(indexToRemove<0||indexToRemove>=currentTags.length){return currentTags;}var newArray=currentTags.slice(0,indexToRemove).concat(currentTags.slice(indexToRemove+1));return newArray;};var getTags=React__default.useMemo(function(){return function(_ref2){var size=_ref2.size;return getTagsGroup({size:size,tags:tagsValue,activeTagIndex:activeTagIndex,isDisabled:isDisabled,onDismiss:function onDismiss(_ref3){var tagIndex=_ref3.tagIndex;console.log('dismiss',{tagIndex:tagIndex});if(!isTagsControlled){setTagsValue(function(){return getNewTagsArray(tagIndex);});}onTagChange==null?void 0:onTagChange({tags:getNewTagsArray(tagIndex)});}});};},[activeTagIndex,tags,tagsValue,isDisabled]);var handleTaggedInputChange=function handleTaggedInputChange(_ref4){var value=_ref4.value;if(!isTaggedInput){return;}setInputValueUncontrolled(value!=null?value:'');};var handleTagsClear=function handleTagsClear(){if(!isTaggedInput){return;}if(!isTagsControlled){setTagsValue(function(){return [];});}onTagChange==null?void 0:onTagChange({tags:[]});};var clearInput=function clearInput(){var isControlledValue=value!==undefined;if(isControlledValue){onChange==null?void 0:onChange({name:name,value:''});return;}if(!inputRef.current){return;}setInputValueUncontrolled('');if(isReactNative()){setTimeout(function(){var _inputRef$current;(_inputRef$current=inputRef.current)==null?void 0:_inputRef$current.clear();},10);return;}inputRef.current.value='';};var handleTaggedInputKeydown=function handleTaggedInputKeydown(e){if(!isTaggedInput){return;}var currentTags=tagsValue;var isControlledValue=value!==undefined;var inputValue=isControlledValue?value==null?void 0:value.trim():inputValueUncontrolled.trim();if(e.key==='Enter'||e.key===','){e.event.preventDefault==null?void 0:e.event.preventDefault();if(inputValue){if(!isTagsControlled){setTagsValue(function(){return [].concat(_toConsumableArray(currentTags),[inputValue]);});}onTagChange==null?void 0:onTagChange({tags:[].concat(_toConsumableArray(currentTags),[inputValue])});clearInput();setActiveTagIndex(-1);}}if(e.key==='Backspace'&&!inputValue&&activeTagIndex<0&&currentTags.length>0){if(!isTagsControlled){setTagsValue(function(){return currentTags.slice(0,-1);});}onTagChange==null?void 0:onTagChange({tags:currentTags.slice(0,-1)});}};return {activeTagIndex:activeTagIndex,setActiveTagIndex:setActiveTagIndex,getTags:getTags,handleTaggedInputKeydown:handleTaggedInputKeydown,handleTaggedInputChange:handleTaggedInputChange,handleTagsClear:handleTagsClear};};
+
+export { useTaggedInput };
+//# sourceMappingURL=useTaggedInput.js.map

package/build/lib/native/components/Input/BaseInput/useTaggedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTaggedInput.js","sources":["../../../../../../src/components/Input/BaseInput/useTaggedInput.ts"],"sourcesContent":["import React from 'react';\nimport type { BaseInputProps } from './BaseInput';\nimport type { BladeElementRefWithValue } from '~utils/types';\nimport type { FormInputOnEvent, FormInputOnKeyDownEvent } from '~components/Form/FormTypes';\n// import { isReactNative } from '~utils';\nimport { getTagsGroup } from '~components/Tag/getTagsGroup';\nimport { isReactNative } from '~utils';\nimport { useControllableState } from '~utils/useControllable';\n\ntype TaggedInputProps = {\n  isTaggedInput?: boolean;\n  tags?: string[];\n  onTagChange?: ({ tags }: { tags: string[] }) => void;\n};\n\ntype UseTaggedInputProps = TaggedInputProps &\n  Pick<BaseInputProps, 'isDisabled' | 'onChange' | 'name' | 'value' | 'defaultValue'> & {\n    inputRef: React.RefObject<BladeElementRefWithValue | null>;\n  };\n\ntype UseTaggedInputReturn = {\n  activeTagIndex: number;\n  setActiveTagIndex: (activeTagIndex: number) => void;\n  getTags: ({ size }: { size: NonNullable<BaseInputProps['size']> }) => React.ReactElement[];\n  handleTaggedInputKeydown: (e: FormInputOnKeyDownEvent) => void;\n  handleTaggedInputChange: FormInputOnEvent;\n  handleTagsClear: () => void;\n};\n\nconst useTaggedInput = ({\n  tags,\n  isDisabled,\n  onTagChange,\n  isTaggedInput,\n  inputRef,\n  onChange,\n  name,\n  value,\n  defaultValue,\n}: UseTaggedInputProps): UseTaggedInputReturn => {\n  const [activeTagIndex, setActiveTagIndex] = React.useState(-1);\n  const [inputValueUncontrolled, setInputValueUncontrolled] = React.useState(defaultValue ?? '');\n  const [tagsValue, setTagsValue] = useControllableState({\n    value: tags,\n    defaultValue: [],\n    onChange: (tags) => {\n      onTagChange?.({ tags });\n    },\n  });\n\n  const isTagsControlled = Boolean(tags);\n\n  const getNewTagsArray = (indexToRemove: number): string[] => {\n    const currentTags = tagsValue;\n\n    if (!currentTags) {\n      return [];\n    }\n\n    // Check if the index is valid\n    if (indexToRemove < 0 || indexToRemove >= currentTags.length) {\n      return currentTags; // Return the original array\n    }\n\n    // Create a new array without the element at the specified index\n    const newArray = currentTags\n      .slice(0, indexToRemove)\n      .concat(currentTags.slice(indexToRemove + 1));\n\n    return newArray;\n  };\n\n  const getTags = React.useMemo(\n    () => ({ size }: { size: NonNullable<BaseInputProps['size']> }): React.ReactElement[] => {\n      return getTagsGroup({\n        size,\n        tags: tagsValue,\n        activeTagIndex,\n        isDisabled,\n        onDismiss: ({ tagIndex }) => {\n          console.log('dismiss', { tagIndex });\n          if (!isTagsControlled) {\n            setTagsValue(() => getNewTagsArray(tagIndex));\n          }\n          onTagChange?.({ tags: getNewTagsArray(tagIndex) });\n        },\n      });\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [activeTagIndex, tags, tagsValue, isDisabled],\n  );\n\n  const handleTaggedInputChange: FormInputOnEvent = ({ value }) => {\n    if (!isTaggedInput) {\n      return;\n    }\n    setInputValueUncontrolled(value ?? '');\n  };\n\n  const handleTagsClear = (): void => {\n    if (!isTaggedInput) {\n      return;\n    }\n\n    if (!isTagsControlled) {\n      setTagsValue(() => []);\n    }\n\n    onTagChange?.({ tags: [] });\n  };\n\n  const clearInput = (): void => {\n    const isControlledValue = value !== undefined;\n\n    if (isControlledValue) {\n      // In Controlled component, we don't clear input ourselves. We just call onChange with empty value\n      onChange?.({ name, value: '' });\n      return;\n    }\n\n    if (!inputRef.current) {\n      return;\n    }\n\n    setInputValueUncontrolled('');\n\n    if (isReactNative()) {\n      setTimeout(() => {\n        // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error\n        // @ts-ignore: clear does exist in react native\n        inputRef.current?.clear();\n      }, 10);\n      return;\n    }\n\n    inputRef.current.value = '';\n  };\n\n  const handleTaggedInputKeydown = (e: FormInputOnKeyDownEvent): void => {\n    if (!isTaggedInput) {\n      return;\n    }\n\n    const currentTags = tagsValue;\n    const isControlledValue = value !== undefined;\n    const inputValue = isControlledValue ? value?.trim() : inputValueUncontrolled.trim();\n    if (e.key === 'Enter' || e.key === ',') {\n      e.event.preventDefault?.(); // we don't want textarea to treat enter as line break in tagged inputs\n      if (inputValue) {\n        if (!isTagsControlled) {\n          setTagsValue(() => [...currentTags, inputValue]);\n        }\n        onTagChange?.({ tags: [...currentTags, inputValue] });\n        clearInput();\n        setActiveTagIndex(-1);\n      }\n    }\n    if (e.key === 'Backspace' && !inputValue && activeTagIndex < 0 && currentTags.length > 0) {\n      if (!isTagsControlled) {\n        setTagsValue(() => currentTags.slice(0, -1));\n      }\n      onTagChange?.({ tags: currentTags.slice(0, -1) });\n    }\n  };\n\n  return {\n    activeTagIndex,\n    setActiveTagIndex,\n    getTags,\n    handleTaggedInputKeydown,\n    handleTaggedInputChange,\n    handleTagsClear,\n  };\n};\n\nexport type { TaggedInputProps };\nexport { useTaggedInput };\n"],"names":["useTaggedInput","_ref","tags","isDisabled","onTagChange","isTaggedInput","inputRef","onChange","name","value","defaultValue","_React$useState","React","useState","_React$useState2","_slicedToArray","activeTagIndex","setActiveTagIndex","_React$useState3","_React$useState4","inputValueUncontrolled","setInputValueUncontrolled","_useControllableState","useControllableState","_useControllableState2","tagsValue","setTagsValue","isTagsControlled","Boolean","getNewTagsArray","indexToRemove","currentTags","length","newArray","slice","concat","getTags","useMemo","_ref2","size","getTagsGroup","onDismiss","_ref3","tagIndex","console","log","handleTaggedInputChange","_ref4","handleTagsClear","clearInput","isControlledValue","undefined","current","isReactNative","setTimeout","_inputRef$current","clear","handleTaggedInputKeydown","e","inputValue","trim","key","event","preventDefault","_toConsumableArray"],"mappings":"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"}

package/build/lib/native/components/Input/TextArea/TextArea.js

@@ -2,6 +2,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default from 'react';
 import { BaseInput } from '../BaseInput/BaseInput.js';
+import { useTaggedInput } from '../BaseInput/useTaggedInput.js';
 import isEmpty from '../../../utils/lodashButBetter/isEmpty.js';
 import 'react-native-svg';
 import '@babel/runtime/helpers/defineProperty';
@@ -25,7 +26,7 @@ import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffect
 import { useMergeRefs } from '../../../utils/useMergeRefs.js';
 import { hintMarginTop } from '../../Form/formTokens.js';
 
-var _excluded=["label","accessibilityLabel","labelPosition","necessityIndicator","errorText","helpText","successText","validationState","defaultValue","isDisabled","isRequired","name","onChange","onFocus","onBlur","onSubmit","placeholder","value","maxCharacters","showClearButton","onClearButtonClick","autoFocus","numberOfLines","testID","size"];var isReactNative=function isReactNative(_textInputRef){return getPlatformType()==='react-native';};var _TextArea=function _TextArea(_ref,ref){var label=_ref.label,accessibilityLabel=_ref.accessibilityLabel,labelPosition=_ref.labelPosition,necessityIndicator=_ref.necessityIndicator,errorText=_ref.errorText,helpText=_ref.helpText,successText=_ref.successText,validationState=_ref.validationState,defaultValue=_ref.defaultValue,isDisabled=_ref.isDisabled,isRequired=_ref.isRequired,name=_ref.name,_onChange=_ref.onChange,onFocus=_ref.onFocus,onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,placeholder=_ref.placeholder,value=_ref.value,maxCharacters=_ref.maxCharacters,showClearButton=_ref.showClearButton,onClearButtonClick=_ref.onClearButtonClick,autoFocus=_ref.autoFocus,_ref$numberOfLines=_ref.numberOfLines,numberOfLines=_ref$numberOfLines===void 0?2:_ref$numberOfLines,testID=_ref.testID,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,styledProps=_objectWithoutProperties(_ref,_excluded);var inputRef=React__default.useRef(null);var mergedRef=useMergeRefs(ref,inputRef);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),shouldShowClearButton=_React$useState2[0],setShouldShowClearButton=_React$useState2[1];React__default.useEffect(function(){setShouldShowClearButton(Boolean(showClearButton&&((value==null?void 0:value.length)||(defaultValue==null?void 0:defaultValue.length))));},[showClearButton,defaultValue,value]);var renderInteractionElement=function renderInteractionElement(){if(shouldShowClearButton){return jsx(BaseBox,{paddingTop:"spacing.3",marginTop:"spacing.1",children:jsx(IconButton,{icon:CloseIcon,accessibilityLabel:"Clear textarea content",onClick:function onClick(){var _inputRef$current;if(isEmpty(value)&&inputRef.current){if(isReactNative(inputRef.current)){inputRef.current.clear();inputRef.current.focus();}else if(inputRef.current instanceof HTMLTextAreaElement){inputRef.current.value='';inputRef.current.focus();}}onClearButtonClick==null?void 0:onClearButtonClick();inputRef==null?void 0:(_inputRef$current=inputRef.current)==null?void 0:_inputRef$current.focus();setShouldShowClearButton(false);}})});}return null;};return jsx(BaseInput,Object.assign({as:"textarea",id:"textarea",componentName:MetaConstants.TextArea,autoFocus:autoFocus,ref:mergedRef,label:label,accessibilityLabel:accessibilityLabel,hideLabelText:!Boolean(label),labelPosition:labelPosition,necessityIndicator:necessityIndicator,errorText:errorText,helpText:helpText,successText:successText,validationState:validationState,isDisabled:isDisabled,isRequired:isRequired,name:name,maxCharacters:maxCharacters,placeholder:placeholder,trailingInteractionElement:renderInteractionElement(),defaultValue:defaultValue,value:value,numberOfLines:numberOfLines,onChange:function onChange(_ref2){var name=_ref2.name,value=_ref2.value;if(showClearButton&&value!=null&&value.length){setShouldShowClearButton(true);}if(shouldShowClearButton&&!(value!=null&&value.length)){setShouldShowClearButton(false);}_onChange==null?void 0:_onChange({name:name,value:value});},onFocus:onFocus,onBlur:onBlur,onSubmit:onSubmit,trailingFooterSlot:function trailingFooterSlot(value){var _value$length;return maxCharacters?jsx(BaseBox,{marginTop:hintMarginTop[size],marginRight:"spacing.1",children:jsx(CharacterCounter,{currentCount:(_value$length=value==null?void 0:value.length)!=null?_value$length:0,maxCount:maxCharacters})}):null;},testID:testID,size:size},styledProps));};var TextArea=assignWithoutSideEffects(React__default.forwardRef(_TextArea),{displayName:'TextArea'});
+var _excluded=["label","accessibilityLabel","labelPosition","necessityIndicator","errorText","helpText","successText","validationState","defaultValue","isDisabled","isRequired","name","onChange","onFocus","onBlur","onSubmit","placeholder","value","maxCharacters","showClearButton","onClearButtonClick","autoFocus","numberOfLines","testID","size","isTaggedInput","tags","onTagChange"];var isReactNative=function isReactNative(_textInputRef){return getPlatformType()==='react-native';};var _TextArea=function _TextArea(_ref,ref){var label=_ref.label,accessibilityLabel=_ref.accessibilityLabel,labelPosition=_ref.labelPosition,necessityIndicator=_ref.necessityIndicator,errorText=_ref.errorText,helpText=_ref.helpText,successText=_ref.successText,validationState=_ref.validationState,defaultValue=_ref.defaultValue,isDisabled=_ref.isDisabled,isRequired=_ref.isRequired,name=_ref.name,_onChange=_ref.onChange,_onFocus=_ref.onFocus,_onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,placeholder=_ref.placeholder,value=_ref.value,maxCharacters=_ref.maxCharacters,showClearButton=_ref.showClearButton,onClearButtonClick=_ref.onClearButtonClick,autoFocus=_ref.autoFocus,_ref$numberOfLines=_ref.numberOfLines,numberOfLines=_ref$numberOfLines===void 0?2:_ref$numberOfLines,testID=_ref.testID,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,isTaggedInput=_ref.isTaggedInput,tags=_ref.tags,onTagChange=_ref.onTagChange,styledProps=_objectWithoutProperties(_ref,_excluded);var inputRef=React__default.useRef(null);var mergedRef=useMergeRefs(ref,inputRef);var _React$useState=React__default.useState(autoFocus!=null?autoFocus:false),_React$useState2=_slicedToArray(_React$useState,2),isInputFocussed=_React$useState2[0],setIsInputFocussed=_React$useState2[1];var _useTaggedInput=useTaggedInput({tags:tags,onTagChange:onTagChange,isDisabled:isDisabled,inputRef:inputRef,isTaggedInput:isTaggedInput,name:name,value:value,onChange:_onChange}),activeTagIndex=_useTaggedInput.activeTagIndex,setActiveTagIndex=_useTaggedInput.setActiveTagIndex,getTags=_useTaggedInput.getTags,handleTaggedInputKeydown=_useTaggedInput.handleTaggedInputKeydown,handleTaggedInputChange=_useTaggedInput.handleTaggedInputChange,handleTagsClear=_useTaggedInput.handleTagsClear;var _React$useState3=React__default.useState(false),_React$useState4=_slicedToArray(_React$useState3,2),shouldShowClearButton=_React$useState4[0],setShouldShowClearButton=_React$useState4[1];React__default.useEffect(function(){setShouldShowClearButton(Boolean(showClearButton&&((value==null?void 0:value.length)||(defaultValue==null?void 0:defaultValue.length))));},[showClearButton,defaultValue,value]);var renderInteractionElement=function renderInteractionElement(){if(shouldShowClearButton){return jsx(BaseBox,{paddingTop:"spacing.3",marginTop:"spacing.1",children:jsx(IconButton,{icon:CloseIcon,accessibilityLabel:"Clear textarea content",onClick:function onClick(){var _inputRef$current;if(isEmpty(value)&&inputRef.current){if(isReactNative(inputRef.current)){inputRef.current.clear();inputRef.current.focus();}else if(inputRef.current instanceof HTMLTextAreaElement){inputRef.current.value='';inputRef.current.focus();}}handleTagsClear();onClearButtonClick==null?void 0:onClearButtonClick();inputRef==null?void 0:(_inputRef$current=inputRef.current)==null?void 0:_inputRef$current.focus();setShouldShowClearButton(false);}})});}return null;};return jsx(BaseInput,Object.assign({as:"textarea",id:"textarea",maxTagRows:"multiple",componentName:MetaConstants.TextArea,autoFocus:autoFocus,ref:mergedRef,label:label,tags:isTaggedInput?getTags({size:size}):undefined,activeTagIndex:activeTagIndex,setActiveTagIndex:setActiveTagIndex,isDropdownTrigger:isTaggedInput,showAllTags:isInputFocussed,accessibilityLabel:accessibilityLabel,hideLabelText:!Boolean(label),labelPosition:labelPosition,necessityIndicator:necessityIndicator,errorText:errorText,helpText:helpText,successText:successText,validationState:validationState,isDisabled:isDisabled,isRequired:isRequired,name:name,maxCharacters:maxCharacters,placeholder:placeholder,trailingInteractionElement:renderInteractionElement(),defaultValue:defaultValue,value:value,numberOfLines:numberOfLines,onChange:function onChange(_ref2){var name=_ref2.name,value=_ref2.value;if(showClearButton&&value!=null&&value.length){setShouldShowClearButton(true);}if(shouldShowClearButton&&!(value!=null&&value.length)){setShouldShowClearButton(false);}handleTaggedInputChange({name:name,value:value});_onChange==null?void 0:_onChange({name:name,value:value});},onFocus:function onFocus(e){setIsInputFocussed(true);_onFocus==null?void 0:_onFocus(e);},onBlur:function onBlur(e){setIsInputFocussed(false);_onBlur==null?void 0:_onBlur(e);},onKeyDown:function onKeyDown(e){handleTaggedInputKeydown(e);},onSubmit:onSubmit,trailingFooterSlot:function trailingFooterSlot(value){var _value$length;return maxCharacters?jsx(BaseBox,{marginTop:hintMarginTop[size],marginRight:"spacing.1",children:jsx(CharacterCounter,{currentCount:(_value$length=value==null?void 0:value.length)!=null?_value$length:0,maxCount:maxCharacters})}):null;},testID:testID,size:size},styledProps));};var TextArea=assignWithoutSideEffects(React__default.forwardRef(_TextArea),{displayName:'TextArea'});
 
 export { TextArea };
 //# sourceMappingURL=TextArea.js.map

package/build/lib/native/components/Input/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../../../../src/components/Input/TextArea/TextArea.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\nimport React from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { CloseIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { CharacterCounter } from '~components/Form/CharacterCounter';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type { BladeElementRef } from '~utils/types';\nimport { hintMarginTop } from '~components/Form/formTokens';\n\ntype TextAreaCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'necessityIndicator'\n  | 'validationState'\n  | 'helpText'\n  | 'errorText'\n  | 'successText'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'name'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onSubmit'\n  | 'value'\n  | 'isDisabled'\n  | 'isRequired'\n  | 'maxCharacters'\n  | 'autoFocus'\n  | 'numberOfLines'\n  | 'testID'\n  | 'size'\n> & {\n  /**\n   * Decides whether to render a clear icon button\n   */\n  showClearButton?: boolean;\n  /**\n   * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`\n   */\n  onClearButtonClick?: () => void;\n} & StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype TextAreaPropsWithA11yLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: undefined;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel: string;\n};\n\n/*\n  Optional accessibilityLabel prop when label is provided\n*/\ntype TextAreaPropsWithLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label: string;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel?: string;\n};\n\ntype TextAreaProps = (TextAreaPropsWithA11yLabel | TextAreaPropsWithLabel) & TextAreaCommonProps;\n\n// need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isReactNative = (_textInputRef: any): _textInputRef is TextInputReactNative => {\n  return getPlatformType() === 'react-native';\n};\n\nconst _TextArea: React.ForwardRefRenderFunction<BladeElementRef, TextAreaProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition,\n    necessityIndicator,\n    errorText,\n    helpText,\n    successText,\n    validationState,\n    defaultValue,\n    isDisabled,\n    isRequired,\n    name,\n    onChange,\n    onFocus,\n    onBlur,\n    onSubmit,\n    placeholder,\n    value,\n    maxCharacters,\n    showClearButton,\n    onClearButtonClick,\n    autoFocus,\n    numberOfLines = 2,\n    testID,\n    size = 'medium',\n    ...styledProps\n  },\n  ref,\n) => {\n  const inputRef = React.useRef<BladeElementRef>(null);\n  const mergedRef = useMergeRefs(ref, inputRef);\n\n  const [shouldShowClearButton, setShouldShowClearButton] = React.useState(false);\n\n  React.useEffect(() => {\n    setShouldShowClearButton(Boolean(showClearButton && (value?.length || defaultValue?.length)));\n  }, [showClearButton, defaultValue, value]);\n\n  const renderInteractionElement = (): React.ReactNode => {\n    if (shouldShowClearButton) {\n      return (\n        <BaseBox paddingTop=\"spacing.3\" marginTop=\"spacing.1\">\n          <IconButton\n            icon={CloseIcon}\n            accessibilityLabel=\"Clear textarea content\"\n            onClick={() => {\n              if (isEmpty(value) && inputRef.current) {\n                // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n                if (isReactNative(inputRef.current)) {\n                  inputRef.current.clear();\n                  inputRef.current.focus();\n                } else if (inputRef.current instanceof HTMLTextAreaElement) {\n                  inputRef.current.value = '';\n                  inputRef.current.focus();\n                }\n              }\n              // if the input field is controlled just call the click handler and the value change shall be left upto the consumer\n              onClearButtonClick?.();\n              inputRef?.current?.focus();\n              setShouldShowClearButton(false);\n            }}\n          />\n        </BaseBox>\n      );\n    }\n\n    return null;\n  };\n\n  return (\n    <BaseInput\n      as=\"textarea\"\n      id=\"textarea\"\n      componentName={MetaConstants.TextArea}\n      autoFocus={autoFocus}\n      ref={mergedRef}\n      label={label as string}\n      accessibilityLabel={accessibilityLabel}\n      hideLabelText={!Boolean(label)}\n      labelPosition={labelPosition}\n      necessityIndicator={necessityIndicator}\n      errorText={errorText}\n      helpText={helpText}\n      successText={successText}\n      validationState={validationState}\n      isDisabled={isDisabled}\n      isRequired={isRequired}\n      name={name}\n      maxCharacters={maxCharacters}\n      placeholder={placeholder}\n      trailingInteractionElement={renderInteractionElement()}\n      defaultValue={defaultValue}\n      value={value}\n      numberOfLines={numberOfLines}\n      onChange={({ name, value }) => {\n        if (showClearButton && value?.length) {\n          // show the clear button when the user starts typing in\n          setShouldShowClearButton(true);\n        }\n\n        if (shouldShowClearButton && !value?.length) {\n          // hide the clear button when the input field is empty\n          setShouldShowClearButton(false);\n        }\n\n        onChange?.({ name, value });\n      }}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onSubmit={onSubmit}\n      trailingFooterSlot={(value) => {\n        return maxCharacters ? (\n          <BaseBox marginTop={hintMarginTop[size]} marginRight=\"spacing.1\">\n            <CharacterCounter currentCount={value?.length ?? 0} maxCount={maxCharacters} />\n          </BaseBox>\n        ) : null;\n      }}\n      testID={testID}\n      size={size}\n      {...styledProps}\n    />\n  );\n};\n\nconst TextArea = assignWithoutSideEffects(React.forwardRef(_TextArea), {\n  displayName: 'TextArea',\n});\n\nexport type { TextAreaProps };\nexport { TextArea };\n"],"names":["isReactNative","_textInputRef","getPlatformType","_TextArea","_ref","ref","label","accessibilityLabel","labelPosition","necessityIndicator","errorText","helpText","successText","validationState","defaultValue","isDisabled","isRequired","name","onChange","onFocus","onBlur","onSubmit","placeholder","value","maxCharacters","showClearButton","onClearButtonClick","autoFocus","_ref$numberOfLines","numberOfLines","testID","_ref$size","size","styledProps","_objectWithoutProperties","_excluded","inputRef","React","useRef","mergedRef","useMergeRefs","_React$useState","useState","_React$useState2","_slicedToArray","shouldShowClearButton","setShouldShowClearButton","useEffect","Boolean","length","renderInteractionElement","_jsx","BaseBox","paddingTop","marginTop","children","IconButton","icon","CloseIcon","onClick","_inputRef$current","isEmpty","current","clear","focus","HTMLTextAreaElement","BaseInput","Object","assign","as","id","componentName","MetaConstants","TextArea","hideLabelText","trailingInteractionElement","_ref2","trailingFooterSlot","_value$length","hintMarginTop","marginRight","CharacterCounter","currentCount","maxCount","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}
+{"version":3,"file":"TextArea.js","sources":["../../../../../../src/components/Input/TextArea/TextArea.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\nimport React from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport type { TaggedInputProps } from '../BaseInput/useTaggedInput';\nimport { useTaggedInput } from '../BaseInput/useTaggedInput';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { CloseIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { CharacterCounter } from '~components/Form/CharacterCounter';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type { BladeElementRef, BladeElementRefWithValue } from '~utils/types';\nimport { hintMarginTop } from '~components/Form/formTokens';\n\ntype TextAreaCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'necessityIndicator'\n  | 'validationState'\n  | 'helpText'\n  | 'errorText'\n  | 'successText'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'name'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onSubmit'\n  | 'value'\n  | 'isDisabled'\n  | 'isRequired'\n  | 'maxCharacters'\n  | 'autoFocus'\n  | 'numberOfLines'\n  | 'testID'\n  | 'size'\n> & {\n  /**\n   * Decides whether to render a clear icon button\n   */\n  showClearButton?: boolean;\n  /**\n   * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`\n   */\n  onClearButtonClick?: () => void;\n} & TaggedInputProps &\n  StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype TextAreaPropsWithA11yLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: undefined;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel: string;\n};\n\n/*\n  Optional accessibilityLabel prop when label is provided\n*/\ntype TextAreaPropsWithLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label: string;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel?: string;\n};\n\ntype TextAreaProps = (TextAreaPropsWithA11yLabel | TextAreaPropsWithLabel) & TextAreaCommonProps;\n\n// need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isReactNative = (_textInputRef: any): _textInputRef is TextInputReactNative => {\n  return getPlatformType() === 'react-native';\n};\n\nconst _TextArea: React.ForwardRefRenderFunction<BladeElementRef, TextAreaProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition,\n    necessityIndicator,\n    errorText,\n    helpText,\n    successText,\n    validationState,\n    defaultValue,\n    isDisabled,\n    isRequired,\n    name,\n    onChange,\n    onFocus,\n    onBlur,\n    onSubmit,\n    placeholder,\n    value,\n    maxCharacters,\n    showClearButton,\n    onClearButtonClick,\n    autoFocus,\n    numberOfLines = 2,\n    testID,\n    size = 'medium',\n    isTaggedInput,\n    tags,\n    onTagChange,\n    ...styledProps\n  },\n  ref,\n) => {\n  const inputRef = React.useRef<BladeElementRefWithValue>(null);\n  const mergedRef = useMergeRefs(ref, inputRef);\n  const [isInputFocussed, setIsInputFocussed] = React.useState(autoFocus ?? false);\n  const {\n    activeTagIndex,\n    setActiveTagIndex,\n    getTags,\n    handleTaggedInputKeydown,\n    handleTaggedInputChange,\n    handleTagsClear,\n  } = useTaggedInput({\n    tags,\n    onTagChange,\n    isDisabled,\n    inputRef,\n    isTaggedInput,\n    name,\n    value,\n    onChange,\n  });\n\n  const [shouldShowClearButton, setShouldShowClearButton] = React.useState(false);\n\n  React.useEffect(() => {\n    setShouldShowClearButton(Boolean(showClearButton && (value?.length || defaultValue?.length)));\n  }, [showClearButton, defaultValue, value]);\n\n  const renderInteractionElement = (): React.ReactNode => {\n    if (shouldShowClearButton) {\n      return (\n        <BaseBox paddingTop=\"spacing.3\" marginTop=\"spacing.1\">\n          <IconButton\n            icon={CloseIcon}\n            accessibilityLabel=\"Clear textarea content\"\n            onClick={() => {\n              if (isEmpty(value) && inputRef.current) {\n                // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n                if (isReactNative(inputRef.current)) {\n                  inputRef.current.clear();\n                  inputRef.current.focus();\n                } else if (inputRef.current instanceof HTMLTextAreaElement) {\n                  inputRef.current.value = '';\n                  inputRef.current.focus();\n                }\n              }\n              handleTagsClear();\n              // if the input field is controlled just call the click handler and the value change shall be left upto the consumer\n              onClearButtonClick?.();\n              inputRef?.current?.focus();\n              setShouldShowClearButton(false);\n            }}\n          />\n        </BaseBox>\n      );\n    }\n\n    return null;\n  };\n\n  return (\n    <BaseInput\n      as=\"textarea\"\n      id=\"textarea\"\n      maxTagRows=\"multiple\"\n      componentName={MetaConstants.TextArea}\n      autoFocus={autoFocus}\n      ref={mergedRef}\n      label={label as string}\n      tags={isTaggedInput ? getTags({ size }) : undefined}\n      activeTagIndex={activeTagIndex}\n      setActiveTagIndex={setActiveTagIndex}\n      isDropdownTrigger={isTaggedInput}\n      showAllTags={isInputFocussed}\n      accessibilityLabel={accessibilityLabel}\n      hideLabelText={!Boolean(label)}\n      labelPosition={labelPosition}\n      necessityIndicator={necessityIndicator}\n      errorText={errorText}\n      helpText={helpText}\n      successText={successText}\n      validationState={validationState}\n      isDisabled={isDisabled}\n      isRequired={isRequired}\n      name={name}\n      maxCharacters={maxCharacters}\n      placeholder={placeholder}\n      trailingInteractionElement={renderInteractionElement()}\n      defaultValue={defaultValue}\n      value={value}\n      numberOfLines={numberOfLines}\n      onChange={({ name, value }) => {\n        if (showClearButton && value?.length) {\n          // show the clear button when the user starts typing in\n          setShouldShowClearButton(true);\n        }\n\n        if (shouldShowClearButton && !value?.length) {\n          // hide the clear button when the input field is empty\n          setShouldShowClearButton(false);\n        }\n\n        handleTaggedInputChange({ name, value });\n        onChange?.({ name, value });\n      }}\n      onFocus={(e) => {\n        setIsInputFocussed(true);\n        onFocus?.(e);\n      }}\n      onBlur={(e) => {\n        setIsInputFocussed(false);\n        onBlur?.(e);\n      }}\n      onKeyDown={(e) => {\n        handleTaggedInputKeydown(e);\n      }}\n      onSubmit={onSubmit}\n      trailingFooterSlot={(value) => {\n        return maxCharacters ? (\n          <BaseBox marginTop={hintMarginTop[size]} marginRight=\"spacing.1\">\n            <CharacterCounter currentCount={value?.length ?? 0} maxCount={maxCharacters} />\n          </BaseBox>\n        ) : null;\n      }}\n      testID={testID}\n      size={size}\n      {...styledProps}\n    />\n  );\n};\n\nconst TextArea = assignWithoutSideEffects(React.forwardRef(_TextArea), {\n  displayName: 'TextArea',\n});\n\nexport type { TextAreaProps };\nexport { TextArea };\n"],"names":["isReactNative","_textInputRef","getPlatformType","_TextArea","_ref","ref","label","accessibilityLabel","labelPosition","necessityIndicator","errorText","helpText","successText","validationState","defaultValue","isDisabled","isRequired","name","onChange","onFocus","onBlur","onSubmit","placeholder","value","maxCharacters","showClearButton","onClearButtonClick","autoFocus","_ref$numberOfLines","numberOfLines","testID","_ref$size","size","isTaggedInput","tags","onTagChange","styledProps","_objectWithoutProperties","_excluded","inputRef","React","useRef","mergedRef","useMergeRefs","_React$useState","useState","_React$useState2","_slicedToArray","isInputFocussed","setIsInputFocussed","_useTaggedInput","useTaggedInput","activeTagIndex","setActiveTagIndex","getTags","handleTaggedInputKeydown","handleTaggedInputChange","handleTagsClear","_React$useState3","_React$useState4","shouldShowClearButton","setShouldShowClearButton","useEffect","Boolean","length","renderInteractionElement","_jsx","BaseBox","paddingTop","marginTop","children","IconButton","icon","CloseIcon","onClick","_inputRef$current","isEmpty","current","clear","focus","HTMLTextAreaElement","BaseInput","Object","assign","as","id","maxTagRows","componentName","MetaConstants","TextArea","undefined","isDropdownTrigger","showAllTags","hideLabelText","trailingInteractionElement","_ref2","e","onKeyDown","trailingFooterSlot","_value$length","hintMarginTop","marginRight","CharacterCounter","currentCount","maxCount","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}

package/build/lib/native/components/Input/TextInput/TextInput.js

@@ -3,6 +3,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import React__default, { useState } from 'react';
 import { BaseInput } from '../BaseInput/BaseInput.js';
 import { getKeyboardAndAutocompleteProps } from '../BaseInput/utils.js';
+import { useTaggedInput } from '../BaseInput/useTaggedInput.js';
 import isEmpty from '../../../utils/lodashButBetter/isEmpty.js';
 import 'react-native-svg';
 import '@babel/runtime/helpers/defineProperty';
@@ -27,7 +28,7 @@ import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffect
 import { useMergeRefs } from '../../../utils/useMergeRefs.js';
 import { hintMarginTop } from '../../Form/formTokens.js';
 
-var _excluded=["label","accessibilityLabel","labelPosition","placeholder","type","defaultValue","name","value","maxCharacters","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","icon","prefix","showClearButton","onClearButtonClick","isLoading","suffix","autoFocus","keyboardReturnKeyType","autoCompleteSuggestionType","autoCapitalize","testID","size","leadingIcon","trailingIcon"];var isReactNative=function isReactNative(_textInputRef){return getPlatformType()==='react-native';};var _TextInput=function _TextInput(_ref,ref){var label=_ref.label,accessibilityLabel=_ref.accessibilityLabel,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,placeholder=_ref.placeholder,_ref$type=_ref.type,type=_ref$type===void 0?'text':_ref$type,defaultValue=_ref.defaultValue,name=_ref.name,value=_ref.value,maxCharacters=_ref.maxCharacters,_onChange=_ref.onChange,onClick=_ref.onClick,onFocus=_ref.onFocus,onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,isDisabled=_ref.isDisabled,necessityIndicator=_ref.necessityIndicator,validationState=_ref.validationState,errorText=_ref.errorText,helpText=_ref.helpText,successText=_ref.successText,isRequired=_ref.isRequired,icon=_ref.icon,prefix=_ref.prefix,showClearButton=_ref.showClearButton,onClearButtonClick=_ref.onClearButtonClick,isLoading=_ref.isLoading,suffix=_ref.suffix,autoFocus=_ref.autoFocus,keyboardReturnKeyType=_ref.keyboardReturnKeyType,autoCompleteSuggestionType=_ref.autoCompleteSuggestionType,autoCapitalize=_ref.autoCapitalize,testID=_ref.testID,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,leadingIcon=_ref.leadingIcon,trailingIcon=_ref.trailingIcon,styledProps=_objectWithoutProperties(_ref,_excluded);var textInputRef=React__default.useRef(null);var mergedRef=useMergeRefs(ref,textInputRef);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldShowClearButton=_useState2[0],setShouldShowClearButton=_useState2[1];React__default.useEffect(function(){setShouldShowClearButton(Boolean(showClearButton&&(defaultValue!=null?defaultValue:value)));},[showClearButton,defaultValue,value]);var renderInteractionElement=function renderInteractionElement(){if(isLoading){return jsx(Spinner,{accessibilityLabel:"Loading Content",color:"primary"});}if(shouldShowClearButton){return jsx(IconButton,{size:"medium",icon:CloseIcon,onClick:function onClick(){var _textInputRef$current;if(isEmpty(value)&&textInputRef.current){if(isReactNative(textInputRef.current)){textInputRef.current.clear();textInputRef.current.focus();}else if(textInputRef.current instanceof HTMLInputElement){textInputRef.current.value='';textInputRef.current.focus();}}onClearButtonClick==null?void 0:onClearButtonClick();textInputRef==null?void 0:(_textInputRef$current=textInputRef.current)==null?void 0:_textInputRef$current.focus();setShouldShowClearButton(false);},isDisabled:isDisabled,accessibilityLabel:"Clear Input Content"});}return null;};return jsx(BaseInput,Object.assign({id:"textinput",componentName:MetaConstants.TextInput,ref:mergedRef,label:label,accessibilityLabel:accessibilityLabel,hideLabelText:!Boolean(label),labelPosition:labelPosition,placeholder:placeholder,defaultValue:defaultValue,value:value,name:name,maxCharacters:maxCharacters,onChange:function onChange(_ref2){var name=_ref2.name,value=_ref2.value;if(showClearButton&&value!=null&&value.length){setShouldShowClearButton(true);}if(shouldShowClearButton&&!(value!=null&&value.length)){setShouldShowClearButton(false);}_onChange==null?void 0:_onChange({name:name,value:value});},onClick:onClick,onFocus:onFocus,onBlur:onBlur,onSubmit:onSubmit,isDisabled:isDisabled,necessityIndicator:necessityIndicator,isRequired:isRequired,leadingIcon:leadingIcon!=null?leadingIcon:icon,prefix:prefix,trailingInteractionElement:renderInteractionElement(),trailingIcon:trailingIcon,suffix:suffix,validationState:validationState,errorText:errorText,helpText:helpText,successText:successText,trailingFooterSlot:function trailingFooterSlot(value){var _value$length;return maxCharacters?jsx(BaseBox,{marginTop:hintMarginTop[size],marginRight:"spacing.1",children:jsx(CharacterCounter,{currentCount:(_value$length=value==null?void 0:value.length)!=null?_value$length:0,maxCount:maxCharacters,size:size})}):null;},autoFocus:autoFocus,testID:testID},getKeyboardAndAutocompleteProps({type:type,keyboardReturnKeyType:keyboardReturnKeyType,autoCompleteSuggestionType:autoCompleteSuggestionType,autoCapitalize:autoCapitalize}),{size:size},styledProps));};var TextInput=assignWithoutSideEffects(React__default.forwardRef(_TextInput),{displayName:'TextInput'});
+var _excluded=["label","accessibilityLabel","labelPosition","placeholder","type","defaultValue","name","value","maxCharacters","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","icon","prefix","showClearButton","onClearButtonClick","isLoading","suffix","autoFocus","keyboardReturnKeyType","autoCompleteSuggestionType","autoCapitalize","testID","size","leadingIcon","trailingIcon","isTaggedInput","tags","onTagChange"];var isReactNative=function isReactNative(_textInputRef){return getPlatformType()==='react-native';};var _TextInput=function _TextInput(_ref,ref){var label=_ref.label,accessibilityLabel=_ref.accessibilityLabel,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,placeholder=_ref.placeholder,_ref$type=_ref.type,type=_ref$type===void 0?'text':_ref$type,defaultValue=_ref.defaultValue,name=_ref.name,value=_ref.value,maxCharacters=_ref.maxCharacters,_onChange=_ref.onChange,onClick=_ref.onClick,_onFocus=_ref.onFocus,_onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,isDisabled=_ref.isDisabled,necessityIndicator=_ref.necessityIndicator,validationState=_ref.validationState,errorText=_ref.errorText,helpText=_ref.helpText,successText=_ref.successText,isRequired=_ref.isRequired,icon=_ref.icon,prefix=_ref.prefix,showClearButton=_ref.showClearButton,onClearButtonClick=_ref.onClearButtonClick,isLoading=_ref.isLoading,suffix=_ref.suffix,autoFocus=_ref.autoFocus,keyboardReturnKeyType=_ref.keyboardReturnKeyType,autoCompleteSuggestionType=_ref.autoCompleteSuggestionType,autoCapitalize=_ref.autoCapitalize,testID=_ref.testID,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,leadingIcon=_ref.leadingIcon,trailingIcon=_ref.trailingIcon,isTaggedInput=_ref.isTaggedInput,tags=_ref.tags,onTagChange=_ref.onTagChange,styledProps=_objectWithoutProperties(_ref,_excluded);var textInputRef=React__default.useRef(null);var mergedRef=useMergeRefs(ref,textInputRef);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldShowClearButton=_useState2[0],setShouldShowClearButton=_useState2[1];var _useState3=useState(autoFocus!=null?autoFocus:false),_useState4=_slicedToArray(_useState3,2),isInputFocussed=_useState4[0],setIsInputFocussed=_useState4[1];var _useTaggedInput=useTaggedInput({isTaggedInput:isTaggedInput,tags:tags,onTagChange:onTagChange,isDisabled:isDisabled,onChange:_onChange,name:name,value:value,inputRef:textInputRef}),activeTagIndex=_useTaggedInput.activeTagIndex,setActiveTagIndex=_useTaggedInput.setActiveTagIndex,getTags=_useTaggedInput.getTags,handleTaggedInputKeydown=_useTaggedInput.handleTaggedInputKeydown,handleTaggedInputChange=_useTaggedInput.handleTaggedInputChange,handleTagsClear=_useTaggedInput.handleTagsClear;React__default.useEffect(function(){setShouldShowClearButton(Boolean(showClearButton&&(defaultValue!=null?defaultValue:value)));},[showClearButton,defaultValue,value]);var renderInteractionElement=function renderInteractionElement(){if(isLoading){return jsx(Spinner,{accessibilityLabel:"Loading Content",color:"primary"});}if(shouldShowClearButton){return jsx(IconButton,{size:"medium",icon:CloseIcon,onClick:function onClick(){var _textInputRef$current;if(isEmpty(value)&&textInputRef.current){if(isReactNative(textInputRef.current)){textInputRef.current.clear();textInputRef.current.focus();}else if(textInputRef.current instanceof HTMLInputElement){textInputRef.current.value='';textInputRef.current.focus();}}handleTagsClear();onClearButtonClick==null?void 0:onClearButtonClick();textInputRef==null?void 0:(_textInputRef$current=textInputRef.current)==null?void 0:_textInputRef$current.focus();setShouldShowClearButton(false);},isDisabled:isDisabled,accessibilityLabel:"Clear Input Content"});}return null;};return jsx(BaseInput,Object.assign({id:"textinput",componentName:MetaConstants.TextInput,ref:mergedRef,label:label,accessibilityLabel:accessibilityLabel,hideLabelText:!Boolean(label),labelPosition:labelPosition,placeholder:placeholder,defaultValue:defaultValue,value:value,name:name,maxCharacters:maxCharacters,isDropdownTrigger:isTaggedInput,tags:isTaggedInput?getTags({size:size}):undefined,showAllTags:isInputFocussed,maxTagRows:"single",activeTagIndex:activeTagIndex,setActiveTagIndex:setActiveTagIndex,onChange:function onChange(_ref2){var name=_ref2.name,value=_ref2.value;if(showClearButton&&value!=null&&value.length){setShouldShowClearButton(true);}if(shouldShowClearButton&&!(value!=null&&value.length)){setShouldShowClearButton(false);}handleTaggedInputChange({name:name,value:value});_onChange==null?void 0:_onChange({name:name,value:value});},onClick:onClick,onFocus:function onFocus(e){setIsInputFocussed(true);_onFocus==null?void 0:_onFocus(e);},onBlur:function onBlur(e){setIsInputFocussed(false);_onBlur==null?void 0:_onBlur(e);},onKeyDown:function onKeyDown(e){handleTaggedInputKeydown(e);},onSubmit:onSubmit,isDisabled:isDisabled,necessityIndicator:necessityIndicator,isRequired:isRequired,leadingIcon:leadingIcon!=null?leadingIcon:icon,prefix:prefix,trailingInteractionElement:renderInteractionElement(),trailingIcon:trailingIcon,suffix:suffix,validationState:validationState,errorText:errorText,helpText:helpText,successText:successText,trailingFooterSlot:function trailingFooterSlot(value){var _value$length;return maxCharacters?jsx(BaseBox,{marginTop:hintMarginTop[size],marginRight:"spacing.1",children:jsx(CharacterCounter,{currentCount:(_value$length=value==null?void 0:value.length)!=null?_value$length:0,maxCount:maxCharacters,size:size})}):null;},autoFocus:autoFocus,testID:testID},getKeyboardAndAutocompleteProps({type:type,keyboardReturnKeyType:keyboardReturnKeyType,autoCompleteSuggestionType:autoCompleteSuggestionType,autoCapitalize:autoCapitalize}),{size:size},styledProps));};var TextInput=assignWithoutSideEffects(React__default.forwardRef(_TextInput),{displayName:'TextInput'});
 
 export { TextInput };
 //# sourceMappingURL=TextInput.js.map

package/build/lib/native/components/Input/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sources":["../../../../../../src/components/Input/TextInput/TextInput.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport { getKeyboardAndAutocompleteProps } from '../BaseInput/utils';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { IconComponent } from '~components/Icons';\nimport { CloseIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { CharacterCounter } from '~components/Form/CharacterCounter';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Spinner } from '~components/Spinner';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type { BladeElementRef } from '~utils/types';\nimport { hintMarginTop } from '~components/Form/formTokens';\n\n// Users should use PasswordInput for input type password\ntype Type = Exclude<BaseInputProps['type'], 'password'>;\n\ntype TextInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'necessityIndicator'\n  | 'validationState'\n  | 'helpText'\n  | 'errorText'\n  | 'successText'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'name'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'value'\n  | 'isDisabled'\n  | 'isRequired'\n  | 'prefix'\n  | 'suffix'\n  | 'maxCharacters'\n  | 'autoFocus'\n  | 'keyboardReturnKeyType'\n  | 'autoCompleteSuggestionType'\n  | 'onSubmit'\n  | 'autoCapitalize'\n  | 'testID'\n  | 'onClick'\n  | 'size'\n  | 'leadingIcon'\n  | 'trailingButton'\n  | 'trailingIcon'\n> & {\n  /**\n   * Decides whether to render a clear icon button\n   */\n  showClearButton?: boolean;\n\n  /**\n   * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`\n   */\n  onClearButtonClick?: () => void;\n\n  /**\n   * Decides whether to show a loading spinner for the input field.\n   */\n  isLoading?: boolean;\n\n  /**\n   * Icon that will be rendered at the beginning of the input field\n   * @deprecated Use `leadingIcon` instead. This prop will be removed in the next major version.\n   */\n  icon?: IconComponent;\n  /**\n   * Type of Input Field to be rendered. Use `PasswordInput` for type `password`\n   *\n   *\n   * **Note on number type**\n   *\n   * `type=\"number\"` internally uses `inputMode=\"numeric\"` instead of HTML's `type=\"number\"` which also allows text characters.\n   * If you have a usecase where you only want to support number input, you can handle it on validations end.\n   *\n   * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning\n   *\n   * @default text\n   */\n  type?: Type;\n} & StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype TextInputPropsWithA11yLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: undefined;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel: string;\n};\n\n/*\n  Optional accessibilityLabel prop when label is provided\n*/\ntype TextInputPropsWithLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label: string;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel?: string;\n};\n\ntype TextInputProps = (TextInputPropsWithA11yLabel | TextInputPropsWithLabel) &\n  TextInputCommonProps;\n\n// need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isReactNative = (_textInputRef: any): _textInputRef is TextInputReactNative => {\n  return getPlatformType() === 'react-native';\n};\n\nconst _TextInput: React.ForwardRefRenderFunction<BladeElementRef, TextInputProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition = 'top',\n    placeholder,\n    type = 'text',\n    defaultValue,\n    name,\n    value,\n    maxCharacters,\n    onChange,\n    onClick,\n    onFocus,\n    onBlur,\n    onSubmit,\n    isDisabled,\n    necessityIndicator,\n    validationState,\n    errorText,\n    helpText,\n    successText,\n    isRequired,\n    icon,\n    prefix,\n    showClearButton,\n    onClearButtonClick,\n    isLoading,\n    suffix,\n    autoFocus,\n    keyboardReturnKeyType,\n    autoCompleteSuggestionType,\n    autoCapitalize,\n    testID,\n    size = 'medium',\n    leadingIcon,\n    trailingIcon,\n    ...styledProps\n  },\n  ref,\n): ReactElement => {\n  const textInputRef = React.useRef<BladeElementRef>(null);\n  const mergedRef = useMergeRefs(ref, textInputRef);\n  const [shouldShowClearButton, setShouldShowClearButton] = useState(false);\n\n  React.useEffect(() => {\n    setShouldShowClearButton(Boolean(showClearButton && (defaultValue ?? value)));\n  }, [showClearButton, defaultValue, value]);\n\n  const renderInteractionElement = (): ReactNode => {\n    if (isLoading) {\n      return <Spinner accessibilityLabel=\"Loading Content\" color=\"primary\" />;\n    }\n\n    if (shouldShowClearButton) {\n      return (\n        <IconButton\n          size=\"medium\"\n          icon={CloseIcon}\n          onClick={() => {\n            if (isEmpty(value) && textInputRef.current) {\n              // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n              if (isReactNative(textInputRef.current)) {\n                textInputRef.current.clear();\n                textInputRef.current.focus();\n              } else if (textInputRef.current instanceof HTMLInputElement) {\n                textInputRef.current.value = '';\n                textInputRef.current.focus();\n              }\n            }\n            // if the input field is controlled just call the click handler and the value change shall be left upto the consumer\n            onClearButtonClick?.();\n            textInputRef?.current?.focus();\n            setShouldShowClearButton(false);\n          }}\n          isDisabled={isDisabled}\n          accessibilityLabel=\"Clear Input Content\"\n        />\n      );\n    }\n\n    return null;\n  };\n\n  return (\n    <BaseInput\n      id=\"textinput\"\n      componentName={MetaConstants.TextInput}\n      ref={mergedRef}\n      label={label as string}\n      accessibilityLabel={accessibilityLabel}\n      hideLabelText={!Boolean(label)}\n      labelPosition={labelPosition}\n      placeholder={placeholder}\n      defaultValue={defaultValue}\n      value={value}\n      name={name}\n      maxCharacters={maxCharacters}\n      onChange={({ name, value }) => {\n        if (showClearButton && value?.length) {\n          // show the clear button when the user starts typing in\n          setShouldShowClearButton(true);\n        }\n\n        if (shouldShowClearButton && !value?.length) {\n          // hide the clear button when the input field is empty\n          setShouldShowClearButton(false);\n        }\n\n        onChange?.({ name, value });\n      }}\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onSubmit={onSubmit}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isRequired={isRequired}\n      leadingIcon={leadingIcon ?? icon}\n      prefix={prefix}\n      trailingInteractionElement={renderInteractionElement()}\n      trailingIcon={trailingIcon}\n      suffix={suffix}\n      validationState={validationState}\n      errorText={errorText}\n      helpText={helpText}\n      successText={successText}\n      trailingFooterSlot={(value) => {\n        return maxCharacters ? (\n          <BaseBox marginTop={hintMarginTop[size]} marginRight=\"spacing.1\">\n            <CharacterCounter\n              currentCount={value?.length ?? 0}\n              maxCount={maxCharacters}\n              size={size}\n            />\n          </BaseBox>\n        ) : null;\n      }}\n      // eslint-disable-next-line jsx-a11y/no-autofocus\n      autoFocus={autoFocus}\n      testID={testID}\n      {...getKeyboardAndAutocompleteProps({\n        type,\n        keyboardReturnKeyType,\n        autoCompleteSuggestionType,\n        autoCapitalize,\n      })}\n      size={size}\n      {...styledProps}\n    />\n  );\n};\n\nconst TextInput = assignWithoutSideEffects(React.forwardRef(_TextInput), {\n  displayName: 'TextInput',\n});\n\nexport type { TextInputProps };\nexport { TextInput };\n"],"names":["isReactNative","_textInputRef","getPlatformType","_TextInput","_ref","ref","label","accessibilityLabel","_ref$labelPosition","labelPosition","placeholder","_ref$type","type","defaultValue","name","value","maxCharacters","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","icon","prefix","showClearButton","onClearButtonClick","isLoading","suffix","autoFocus","keyboardReturnKeyType","autoCompleteSuggestionType","autoCapitalize","testID","_ref$size","size","leadingIcon","trailingIcon","styledProps","_objectWithoutProperties","_excluded","textInputRef","React","useRef","mergedRef","useMergeRefs","_useState","useState","_useState2","_slicedToArray","shouldShowClearButton","setShouldShowClearButton","useEffect","Boolean","renderInteractionElement","_jsx","Spinner","color","IconButton","CloseIcon","_textInputRef$current","isEmpty","current","clear","focus","HTMLInputElement","BaseInput","Object","assign","id","componentName","MetaConstants","TextInput","hideLabelText","_ref2","length","trailingInteractionElement","trailingFooterSlot","_value$length","BaseBox","marginTop","hintMarginTop","marginRight","children","CharacterCounter","currentCount","maxCount","getKeyboardAndAutocompleteProps","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}
+{"version":3,"file":"TextInput.js","sources":["../../../../../../src/components/Input/TextInput/TextInput.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport { getKeyboardAndAutocompleteProps } from '../BaseInput/utils';\nimport type { TaggedInputProps } from '../BaseInput/useTaggedInput';\nimport { useTaggedInput } from '../BaseInput/useTaggedInput';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { IconComponent } from '~components/Icons';\nimport { CloseIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { CharacterCounter } from '~components/Form/CharacterCounter';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Spinner } from '~components/Spinner';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type { BladeElementRef, BladeElementRefWithValue } from '~utils/types';\nimport { hintMarginTop } from '~components/Form/formTokens';\n\n// Users should use PasswordInput for input type password\ntype Type = Exclude<BaseInputProps['type'], 'password'>;\n\ntype TextInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'necessityIndicator'\n  | 'validationState'\n  | 'helpText'\n  | 'errorText'\n  | 'successText'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'name'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'value'\n  | 'isDisabled'\n  | 'isRequired'\n  | 'prefix'\n  | 'suffix'\n  | 'maxCharacters'\n  | 'autoFocus'\n  | 'keyboardReturnKeyType'\n  | 'autoCompleteSuggestionType'\n  | 'onSubmit'\n  | 'autoCapitalize'\n  | 'testID'\n  | 'onClick'\n  | 'size'\n  | 'leadingIcon'\n  | 'trailingButton'\n  | 'trailingIcon'\n> & {\n  /**\n   * Decides whether to render a clear icon button\n   */\n  showClearButton?: boolean;\n\n  /**\n   * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`\n   */\n  onClearButtonClick?: () => void;\n\n  /**\n   * Decides whether to show a loading spinner for the input field.\n   */\n  isLoading?: boolean;\n\n  /**\n   * Icon that will be rendered at the beginning of the input field\n   * @deprecated Use `leadingIcon` instead. This prop will be removed in the next major version.\n   */\n  icon?: IconComponent;\n  /**\n   * Type of Input Field to be rendered. Use `PasswordInput` for type `password`\n   *\n   *\n   * **Note on number type**\n   *\n   * `type=\"number\"` internally uses `inputMode=\"numeric\"` instead of HTML's `type=\"number\"` which also allows text characters.\n   * If you have a usecase where you only want to support number input, you can handle it on validations end.\n   *\n   * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning\n   *\n   * @default text\n   */\n  type?: Type;\n} & TaggedInputProps &\n  StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype TextInputPropsWithA11yLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: undefined;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel: string;\n};\n\n/*\n  Optional accessibilityLabel prop when label is provided\n*/\ntype TextInputPropsWithLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label: string;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel?: string;\n};\n\ntype TextInputProps = (TextInputPropsWithA11yLabel | TextInputPropsWithLabel) &\n  TextInputCommonProps;\n\n// need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isReactNative = (_textInputRef: any): _textInputRef is TextInputReactNative => {\n  return getPlatformType() === 'react-native';\n};\n\nconst _TextInput: React.ForwardRefRenderFunction<BladeElementRef, TextInputProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition = 'top',\n    placeholder,\n    type = 'text',\n    defaultValue,\n    name,\n    value,\n    maxCharacters,\n    onChange,\n    onClick,\n    onFocus,\n    onBlur,\n    onSubmit,\n    isDisabled,\n    necessityIndicator,\n    validationState,\n    errorText,\n    helpText,\n    successText,\n    isRequired,\n    icon,\n    prefix,\n    showClearButton,\n    onClearButtonClick,\n    isLoading,\n    suffix,\n    autoFocus,\n    keyboardReturnKeyType,\n    autoCompleteSuggestionType,\n    autoCapitalize,\n    testID,\n    size = 'medium',\n    leadingIcon,\n    trailingIcon,\n    isTaggedInput,\n    tags,\n    onTagChange,\n    ...styledProps\n  },\n  ref,\n): ReactElement => {\n  const textInputRef = React.useRef<BladeElementRefWithValue>(null);\n  const mergedRef = useMergeRefs(ref, textInputRef);\n  const [shouldShowClearButton, setShouldShowClearButton] = useState(false);\n  const [isInputFocussed, setIsInputFocussed] = useState(autoFocus ?? false);\n  const {\n    activeTagIndex,\n    setActiveTagIndex,\n    getTags,\n    handleTaggedInputKeydown,\n    handleTaggedInputChange,\n    handleTagsClear,\n  } = useTaggedInput({\n    isTaggedInput,\n    tags,\n    onTagChange,\n    isDisabled,\n    onChange,\n    name,\n    value,\n    inputRef: textInputRef,\n  });\n\n  React.useEffect(() => {\n    setShouldShowClearButton(Boolean(showClearButton && (defaultValue ?? value)));\n  }, [showClearButton, defaultValue, value]);\n\n  const renderInteractionElement = (): ReactNode => {\n    if (isLoading) {\n      return <Spinner accessibilityLabel=\"Loading Content\" color=\"primary\" />;\n    }\n\n    if (shouldShowClearButton) {\n      return (\n        <IconButton\n          size=\"medium\"\n          icon={CloseIcon}\n          onClick={() => {\n            if (isEmpty(value) && textInputRef.current) {\n              // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n              if (isReactNative(textInputRef.current)) {\n                textInputRef.current.clear();\n                textInputRef.current.focus();\n              } else if (textInputRef.current instanceof HTMLInputElement) {\n                textInputRef.current.value = '';\n                textInputRef.current.focus();\n              }\n            }\n            handleTagsClear();\n            // if the input field is controlled just call the click handler and the value change shall be left upto the consumer\n            onClearButtonClick?.();\n            textInputRef?.current?.focus();\n            setShouldShowClearButton(false);\n          }}\n          isDisabled={isDisabled}\n          accessibilityLabel=\"Clear Input Content\"\n        />\n      );\n    }\n\n    return null;\n  };\n\n  return (\n    <BaseInput\n      id=\"textinput\"\n      componentName={MetaConstants.TextInput}\n      ref={mergedRef}\n      label={label as string}\n      accessibilityLabel={accessibilityLabel}\n      hideLabelText={!Boolean(label)}\n      labelPosition={labelPosition}\n      placeholder={placeholder}\n      defaultValue={defaultValue}\n      value={value}\n      name={name}\n      maxCharacters={maxCharacters}\n      isDropdownTrigger={isTaggedInput}\n      tags={isTaggedInput ? getTags({ size }) : undefined}\n      showAllTags={isInputFocussed}\n      maxTagRows=\"single\"\n      activeTagIndex={activeTagIndex}\n      setActiveTagIndex={setActiveTagIndex}\n      onChange={({ name, value }) => {\n        if (showClearButton && value?.length) {\n          // show the clear button when the user starts typing in\n          setShouldShowClearButton(true);\n        }\n\n        if (shouldShowClearButton && !value?.length) {\n          // hide the clear button when the input field is empty\n          setShouldShowClearButton(false);\n        }\n\n        handleTaggedInputChange({ name, value });\n        onChange?.({ name, value });\n      }}\n      onClick={onClick}\n      onFocus={(e) => {\n        setIsInputFocussed(true);\n        onFocus?.(e);\n      }}\n      onBlur={(e) => {\n        setIsInputFocussed(false);\n        onBlur?.(e);\n      }}\n      onKeyDown={(e) => {\n        handleTaggedInputKeydown(e);\n      }}\n      onSubmit={onSubmit}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isRequired={isRequired}\n      leadingIcon={leadingIcon ?? icon}\n      prefix={prefix}\n      trailingInteractionElement={renderInteractionElement()}\n      trailingIcon={trailingIcon}\n      suffix={suffix}\n      validationState={validationState}\n      errorText={errorText}\n      helpText={helpText}\n      successText={successText}\n      trailingFooterSlot={(value) => {\n        return maxCharacters ? (\n          <BaseBox marginTop={hintMarginTop[size]} marginRight=\"spacing.1\">\n            <CharacterCounter\n              currentCount={value?.length ?? 0}\n              maxCount={maxCharacters}\n              size={size}\n            />\n          </BaseBox>\n        ) : null;\n      }}\n      // eslint-disable-next-line jsx-a11y/no-autofocus\n      autoFocus={autoFocus}\n      testID={testID}\n      {...getKeyboardAndAutocompleteProps({\n        type,\n        keyboardReturnKeyType,\n        autoCompleteSuggestionType,\n        autoCapitalize,\n      })}\n      size={size}\n      {...styledProps}\n    />\n  );\n};\n\nconst TextInput = assignWithoutSideEffects(React.forwardRef(_TextInput), {\n  displayName: 'TextInput',\n});\n\nexport type { TextInputProps };\nexport { TextInput };\n"],"names":["isReactNative","_textInputRef","getPlatformType","_TextInput","_ref","ref","label","accessibilityLabel","_ref$labelPosition","labelPosition","placeholder","_ref$type","type","defaultValue","name","value","maxCharacters","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","icon","prefix","showClearButton","onClearButtonClick","isLoading","suffix","autoFocus","keyboardReturnKeyType","autoCompleteSuggestionType","autoCapitalize","testID","_ref$size","size","leadingIcon","trailingIcon","isTaggedInput","tags","onTagChange","styledProps","_objectWithoutProperties","_excluded","textInputRef","React","useRef","mergedRef","useMergeRefs","_useState","useState","_useState2","_slicedToArray","shouldShowClearButton","setShouldShowClearButton","_useState3","_useState4","isInputFocussed","setIsInputFocussed","_useTaggedInput","useTaggedInput","inputRef","activeTagIndex","setActiveTagIndex","getTags","handleTaggedInputKeydown","handleTaggedInputChange","handleTagsClear","useEffect","Boolean","renderInteractionElement","_jsx","Spinner","color","IconButton","CloseIcon","_textInputRef$current","isEmpty","current","clear","focus","HTMLInputElement","BaseInput","Object","assign","id","componentName","MetaConstants","TextInput","hideLabelText","isDropdownTrigger","undefined","showAllTags","maxTagRows","_ref2","length","e","onKeyDown","trailingInteractionElement","trailingFooterSlot","_value$length","BaseBox","marginTop","hintMarginTop","marginRight","children","CharacterCounter","currentCount","maxCount","getKeyboardAndAutocompleteProps","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}

package/build/lib/native/components/ProgressBar/CircularProgressBar.native.js

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import styled from 'styled-components/native';
+import Animated, { useSharedValue, withTiming, cancelAnimation, withDelay, withRepeat, withSequence, useAnimatedStyle } from 'react-native-reanimated';
+import { Text, Circle } from 'react-native-svg';
+import { getCircularProgressSVGTokens, circularProgressSizeTokens } from './progressBarTokens.js';
+import { CircularProgressLabel } from './CircularProgressLabel.js';
+import getIn from '../../utils/lodashButBetter/get.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
+import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.native.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '../Typography/BaseText/BaseText.native.js';
+import '@babel/runtime/helpers/slicedToArray';
+import 'react-native';
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
+import { castNativeType } from '../../utils/platform/castUtils.js';
+import useTheme from '../BladeProvider/useTheme.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getTextProps } from '../Typography/Text/Text.js';
+import '../Typography/Code/Code.js';
+import '@gorhom/portal';
+import 'react-native-gesture-handler';
+import '../BottomSheet/BottomSheetStack.js';
+import '@babel/runtime/helpers/defineProperty';
+import Svg from '../Icons/_Svg/Svg/Svg.native.js';
+import getBaseTextStyles from '../Typography/BaseText/getBaseTextStyles.js';
+
+var pulseAnimation={opacityInitial:1,opacityMid:0.65,opacityFinal:1};var StyledSVGText=styled(Text)(function(_ref){var theme=_ref.theme,size=_ref.size,weight=_ref.weight;var textProps=getTextProps({variant:'body',size:size,weight:weight});return Object.assign({},getBaseTextStyles(Object.assign({theme:theme},textProps)),{strokeWidth:0,fill:getIn(theme.colors,textProps.color)});});var CircularProgressBarFilled=function CircularProgressBarFilled(_ref2){var progressPercent=_ref2.progressPercent,fillColor=_ref2.fillColor,backgroundColor=_ref2.backgroundColor,_ref2$size=_ref2.size,size=_ref2$size===void 0?'small':_ref2$size,label=_ref2.label,_ref2$showPercentage=_ref2.showPercentage,showPercentage=_ref2$showPercentage===void 0?true:_ref2$showPercentage,isMeter=_ref2.isMeter,motionEasing=_ref2.motionEasing,pulseMotionDuration=_ref2.pulseMotionDuration,pulseMotionDelay=_ref2.pulseMotionDelay,fillMotionDuration=_ref2.fillMotionDuration;var _getCircularProgressS=getCircularProgressSVGTokens({size:size,progressPercent:progressPercent}),sqSize=_getCircularProgressS.sqSize,strokeWidth=_getCircularProgressS.strokeWidth,radius=_getCircularProgressS.radius,viewBox=_getCircularProgressS.viewBox,dashArray=_getCircularProgressS.dashArray,dashOffset=_getCircularProgressS.dashOffset;var AnimatedCircle=Animated.createAnimatedComponent(Circle);var animatedOpacity=useSharedValue(pulseAnimation.opacityInitial);var animatedStrokeDashoffset=useSharedValue(dashOffset);var _useTheme=useTheme(),theme=_useTheme.theme;var fillAndPulseEasing=getIn(theme.motion,motionEasing);var pulseDuration=castNativeType(makeMotionTime(getIn(theme.motion,pulseMotionDuration)))/2;useEffect(function(){var fillDuration=castNativeType(makeMotionTime(getIn(theme.motion,fillMotionDuration)));animatedStrokeDashoffset.value=withTiming(dashOffset,{duration:fillDuration,easing:fillAndPulseEasing});return function(){cancelAnimation(animatedStrokeDashoffset);};},[dashOffset,animatedStrokeDashoffset,fillMotionDuration,theme,fillAndPulseEasing]);useEffect(function(){var pulsatingAnimationTimingConfig={duration:pulseDuration,easing:fillAndPulseEasing};if(!isMeter){animatedOpacity.value=withDelay(castNativeType(makeMotionTime(getIn(theme.motion,pulseMotionDelay))),withRepeat(withSequence(withTiming(pulseAnimation.opacityMid,pulsatingAnimationTimingConfig),withTiming(pulseAnimation.opacityFinal,pulsatingAnimationTimingConfig)),-1));}return function(){cancelAnimation(animatedOpacity);};},[animatedOpacity,fillAndPulseEasing,pulseDuration,pulseMotionDelay,theme,isMeter]);var firstIndicatorStyles=useAnimatedStyle(function(){return {strokeDashoffset:animatedStrokeDashoffset.value,opacity:progressPercent<100?animatedOpacity.value:1};});return jsxs(BaseBox,{display:"flex",width:"fit-content",alignItems:"center",children:[jsxs(Svg,{width:String(sqSize),height:String(sqSize),viewBox:viewBox,children:[jsx(Circle,{fill:"none",stroke:backgroundColor,cx:String(sqSize/2),cy:String(sqSize/2),r:String(radius),strokeWidth:`${strokeWidth}px`}),jsx(AnimatedCircle,{fill:"none",stroke:fillColor,cx:sqSize/2,cy:sqSize/2,r:radius,strokeWidth:`${strokeWidth}px`,transform:`rotate(-90 ${sqSize/2} ${sqSize/2})`,strokeDasharray:dashArray,strokeDashoffset:dashOffset,style:firstIndicatorStyles}),showPercentage&&size!=='small'&&jsx(StyledSVGText,{size:circularProgressSizeTokens[size].percentTextSize,weight:"semibold",x:"50%",y:"50%",textAnchor:"middle",dy:".5em",children:`${progressPercent}%`})]}),jsx(CircularProgressLabel,{progressPercent:progressPercent,size:size,label:label,showPercentage:showPercentage})]});};
+
+export { CircularProgressBarFilled };
+//# sourceMappingURL=CircularProgressBar.native.js.map

package/build/lib/native/components/ProgressBar/CircularProgressBar.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressBar.native.js","sources":["../../../../../src/components/ProgressBar/CircularProgressBar.native.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport styled from 'styled-components/native';\nimport Animated, {\n  cancelAnimation,\n  useAnimatedStyle,\n  useSharedValue,\n  withDelay,\n  withRepeat,\n  withSequence,\n  withTiming,\n} from 'react-native-reanimated';\nimport { Text as SVGText, Circle } from 'react-native-svg';\nimport type { CircularProgressBarFilledProps } from './types';\nimport { circularProgressSizeTokens, getCircularProgressSVGTokens } from './progressBarTokens';\nimport { CircularProgressLabel } from './CircularProgressLabel';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport type { TextProps } from '~components/Typography';\nimport { getTextProps } from '~components/Typography';\nimport { useTheme } from '~components/BladeProvider';\nimport { castNativeType } from '~utils';\nimport { Svg } from '~components/Icons/_Svg';\nimport getBaseTextStyles from '~components/Typography/BaseText/getBaseTextStyles';\n\nconst pulseAnimation = {\n  opacityInitial: 1,\n  opacityMid: 0.65,\n  opacityFinal: 1,\n};\n\nconst StyledSVGText = styled(SVGText)<Pick<TextProps<{ variant: 'body' }>, 'size' | 'weight'>>(\n  ({ theme, size, weight }) => {\n    const textProps = getTextProps({ variant: 'body', size, weight });\n\n    return {\n      ...getBaseTextStyles({ theme, ...textProps }),\n      strokeWidth: 0,\n      fill: getIn(theme.colors, textProps.color!),\n    };\n  },\n);\n\nconst CircularProgressBarFilled = ({\n  progressPercent,\n  fillColor,\n  backgroundColor,\n  size = 'small',\n  label,\n  showPercentage = true,\n  isMeter,\n  motionEasing,\n  pulseMotionDuration,\n  pulseMotionDelay,\n  fillMotionDuration,\n}: CircularProgressBarFilledProps): React.ReactElement => {\n  const {\n    sqSize,\n    strokeWidth,\n    radius,\n    viewBox,\n    dashArray,\n    dashOffset,\n  } = getCircularProgressSVGTokens({ size, progressPercent });\n\n  const AnimatedCircle = Animated.createAnimatedComponent(Circle);\n  const animatedOpacity = useSharedValue(pulseAnimation.opacityInitial);\n  const animatedStrokeDashoffset = useSharedValue(dashOffset);\n  const { theme } = useTheme();\n  const fillAndPulseEasing = getIn(theme.motion, motionEasing);\n  const pulseDuration =\n    castNativeType(makeMotionTime(getIn(theme.motion, pulseMotionDuration))) / 2;\n\n  // Trigger animation for progress fill\n  useEffect(() => {\n    const fillDuration = castNativeType(makeMotionTime(getIn(theme.motion, fillMotionDuration)));\n    animatedStrokeDashoffset.value = withTiming(dashOffset, {\n      duration: fillDuration,\n      easing: fillAndPulseEasing,\n    });\n    return () => {\n      cancelAnimation(animatedStrokeDashoffset);\n    };\n  }, [dashOffset, animatedStrokeDashoffset, fillMotionDuration, theme, fillAndPulseEasing]);\n\n  // Trigger pulsating animation\n  useEffect(() => {\n    const pulsatingAnimationTimingConfig = {\n      duration: pulseDuration,\n      easing: fillAndPulseEasing,\n    };\n    if (!isMeter) {\n      animatedOpacity.value = withDelay(\n        castNativeType(makeMotionTime(getIn(theme.motion, pulseMotionDelay))),\n        withRepeat(\n          withSequence(\n            withTiming(pulseAnimation.opacityMid, pulsatingAnimationTimingConfig),\n            withTiming(pulseAnimation.opacityFinal, pulsatingAnimationTimingConfig),\n          ),\n          -1,\n        ),\n      );\n    }\n\n    return () => {\n      cancelAnimation(animatedOpacity);\n    };\n  }, [animatedOpacity, fillAndPulseEasing, pulseDuration, pulseMotionDelay, theme, isMeter]);\n\n  const firstIndicatorStyles = useAnimatedStyle(() => {\n    return {\n      strokeDashoffset: animatedStrokeDashoffset.value,\n      opacity: progressPercent < 100 ? animatedOpacity.value : 1,\n    };\n  });\n\n  return (\n    <BaseBox display=\"flex\" width=\"fit-content\" alignItems=\"center\">\n      <Svg width={String(sqSize)} height={String(sqSize)} viewBox={viewBox}>\n        <Circle\n          fill=\"none\"\n          stroke={backgroundColor}\n          cx={String(sqSize / 2)}\n          cy={String(sqSize / 2)}\n          r={String(radius)}\n          strokeWidth={`${strokeWidth}px`}\n        />\n\n        <AnimatedCircle\n          fill=\"none\"\n          stroke={fillColor}\n          cx={sqSize / 2}\n          cy={sqSize / 2}\n          r={radius}\n          strokeWidth={`${strokeWidth}px`}\n          // Start progress marker at 12 O'Clock\n          transform={`rotate(-90 ${sqSize / 2} ${sqSize / 2})`}\n          strokeDasharray={dashArray}\n          strokeDashoffset={dashOffset}\n          style={firstIndicatorStyles}\n        />\n\n        {showPercentage && size !== 'small' && (\n          <StyledSVGText\n            size={circularProgressSizeTokens[size].percentTextSize}\n            weight=\"semibold\"\n            x=\"50%\"\n            y=\"50%\"\n            textAnchor=\"middle\"\n            dy=\".5em\"\n          >\n            {`${progressPercent}%`}\n          </StyledSVGText>\n        )}\n      </Svg>\n\n      <CircularProgressLabel\n        progressPercent={progressPercent}\n        size={size}\n        label={label}\n        showPercentage={showPercentage}\n      />\n    </BaseBox>\n  );\n};\n\nexport { CircularProgressBarFilled };\n"],"names":["pulseAnimation","opacityInitial","opacityMid","opacityFinal","StyledSVGText","styled","SVGText","_ref","theme","size","weight","textProps","getTextProps","variant","Object","assign","getBaseTextStyles","strokeWidth","fill","getIn","colors","color","CircularProgressBarFilled","_ref2","progressPercent","fillColor","backgroundColor","_ref2$size","label","_ref2$showPercentage","showPercentage","isMeter","motionEasing","pulseMotionDuration","pulseMotionDelay","fillMotionDuration","_getCircularProgressS","getCircularProgressSVGTokens","sqSize","radius","viewBox","dashArray","dashOffset","AnimatedCircle","Animated","createAnimatedComponent","Circle","animatedOpacity","useSharedValue","animatedStrokeDashoffset","_useTheme","useTheme","fillAndPulseEasing","motion","pulseDuration","castNativeType","makeMotionTime","useEffect","fillDuration","value","withTiming","duration","easing","cancelAnimation","pulsatingAnimationTimingConfig","withDelay","withRepeat","withSequence","firstIndicatorStyles","useAnimatedStyle","strokeDashoffset","opacity","_jsxs","BaseBox","display","width","alignItems","children","Svg","String","height","_jsx","stroke","cx","cy","r","transform","strokeDasharray","style","circularProgressSizeTokens","percentTextSize","x","y","textAnchor","dy","CircularProgressLabel"],"mappings":"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"}

package/build/lib/native/components/ProgressBar/CircularProgressLabel.js

@@ -0,0 +1,17 @@
+import 'react';
+import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '../Typography/BaseText/BaseText.native.js';
+import '@babel/runtime/helpers/slicedToArray';
+import 'react-native';
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
+import '../BladeProvider/useTheme.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Text } from '../Typography/Text/Text.js';
+import '../Typography/Code/Code.js';
+
+var CircularProgressLabel=function CircularProgressLabel(_ref){var _label$trim;var progressPercent=_ref.progressPercent,_ref$size=_ref.size,size=_ref$size===void 0?'small':_ref$size,label=_ref.label,_ref$showPercentage=_ref.showPercentage,showPercentage=_ref$showPercentage===void 0?true:_ref$showPercentage;var hasLabel=label&&((_label$trim=label.trim())==null?void 0:_label$trim.length)>0;return jsxs(BaseBox,{display:"flex",flexDirection:"column",alignItems:"center",children:[hasLabel&&jsx(Text,{marginTop:"spacing.3",variant:"body",weight:"regular",size:"small",children:label}),showPercentage&&size==='small'&&jsxs(Text,{marginTop:hasLabel?'spacing.0':'spacing.3',variant:"body",weight:"semibold",size:"small",children:[progressPercent,"%"]})]});};
+
+export { CircularProgressLabel };
+//# sourceMappingURL=CircularProgressLabel.js.map

package/build/lib/native/components/ProgressBar/CircularProgressLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressLabel.js","sources":["../../../../../src/components/ProgressBar/CircularProgressLabel.tsx"],"sourcesContent":["import React from 'react';\nimport type { CircularProgressBarFilledProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\n\nconst CircularProgressLabel = ({\n  progressPercent,\n  size = 'small',\n  label,\n  showPercentage = true,\n}: Pick<\n  CircularProgressBarFilledProps,\n  'progressPercent' | 'size' | 'label' | 'showPercentage'\n>): React.ReactElement => {\n  const hasLabel = label && label.trim()?.length > 0;\n\n  return (\n    <BaseBox display=\"flex\" flexDirection=\"column\" alignItems=\"center\">\n      {hasLabel && (\n        <Text marginTop=\"spacing.3\" variant=\"body\" weight=\"regular\" size=\"small\">\n          {label}\n        </Text>\n      )}\n\n      {showPercentage && size === 'small' && (\n        <Text\n          marginTop={hasLabel ? 'spacing.0' : 'spacing.3'}\n          variant=\"body\"\n          weight=\"semibold\"\n          size=\"small\"\n        >\n          {progressPercent}%\n        </Text>\n      )}\n    </BaseBox>\n  );\n};\n\nexport { CircularProgressLabel };\n"],"names":["CircularProgressLabel","_ref","_label$trim","progressPercent","_ref$size","size","label","_ref$showPercentage","showPercentage","hasLabel","trim","length","_jsxs","BaseBox","display","flexDirection","alignItems","children","_jsx","Text","marginTop","variant","weight"],"mappings":";;;;;;;;;;;;;AAKM,IAAAA,qBAAqB,CAAG,SAAxBA,qBAAqBA,CAAAC,IAAA,CAQD,CAAAC,IAAAA,WAAA,KAPxBC,eAAe,CAAAF,IAAA,CAAfE,eAAe,CAAAC,SAAA,CAAAH,IAAA,CACfI,IAAI,CAAJA,IAAI,CAAAD,SAAA,GAAA,KAAA,CAAA,CAAG,OAAO,CAAAA,SAAA,CACdE,KAAK,CAAAL,IAAA,CAALK,KAAK,CAAAC,mBAAA,CAAAN,IAAA,CACLO,cAAc,CAAdA,cAAc,CAAAD,mBAAA,GAAG,KAAA,CAAA,CAAA,IAAI,CAAAA,mBAAA,CAKrB,IAAME,QAAQ,CAAGH,KAAK,EAAI,EAAAJ,WAAA,CAAAI,KAAK,CAACI,IAAI,EAAE,GAAA,IAAA,CAAA,KAAA,CAAA,CAAZR,WAAA,CAAcS,MAAM,EAAG,CAAC,CAElD,OACEC,IAAA,CAACC,OAAO,CAAA,CAACC,OAAO,CAAC,MAAM,CAACC,aAAa,CAAC,QAAQ,CAACC,UAAU,CAAC,QAAQ,CAAAC,QAAA,CAC/DR,CAAAA,QAAQ,EACPS,GAAA,CAACC,IAAI,CAACC,CAAAA,SAAS,CAAC,WAAW,CAACC,OAAO,CAAC,MAAM,CAACC,MAAM,CAAC,SAAS,CAACjB,IAAI,CAAC,OAAO,CAAAY,QAAA,CACrEX,KAAK,CACF,CACP,CAEAE,cAAc,EAAIH,IAAI,GAAK,OAAO,EACjCO,IAAA,CAACO,IAAI,EACHC,SAAS,CAAEX,QAAQ,CAAG,WAAW,CAAG,WAAY,CAChDY,OAAO,CAAC,MAAM,CACdC,MAAM,CAAC,UAAU,CACjBjB,IAAI,CAAC,OAAO,CAAAY,QAAA,CAEXd,CAAAA,eAAe,CAAC,GACnB,CAAA,CAAM,CACP,CACM,CAAA,CAAC,CAEd;;;;"}

package/build/lib/native/components/ProgressBar/ProgressBar.js

@@ -1,5 +1,6 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { ProgressBarFilled } from './ProgressBarFilled.native.js';
+import { CircularProgressBarFilled } from './CircularProgressBar.native.js';
 import clamp from '../../utils/lodashButBetter/clamp.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
@@ -23,7 +24,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js';
 
-var _excluded=["accessibilityLabel","color","isIndeterminate","label","showPercentage","size","value","variant","min","max","testID"];var progressBarHeight={small:size[2],medium:size[4]};var ProgressBar=function ProgressBar(_ref){var _label$trim;var accessibilityLabel=_ref.accessibilityLabel,color=_ref.color,_ref$isIndeterminate=_ref.isIndeterminate,isIndeterminate=_ref$isIndeterminate===void 0?false:_ref$isIndeterminate,label=_ref.label,_ref$showPercentage=_ref.showPercentage,showPercentage=_ref$showPercentage===void 0?true:_ref$showPercentage,_ref$size=_ref.size,size=_ref$size===void 0?'small':_ref$size,_ref$value=_ref.value,value=_ref$value===void 0?0:_ref$value,_ref$variant=_ref.variant,variant=_ref$variant===void 0?'progress':_ref$variant,_ref$min=_ref.min,min=_ref$min===void 0?0:_ref$min,_ref$max=_ref.max,max=_ref$max===void 0?100:_ref$max,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var id=useId(variant);if(__DEV__){if(variant==='meter'&&isIndeterminate){throwBladeError({moduleName:'ProgressBar',message:`Cannot set 'isIndeterminate' when 'variant' is 'meter'.`});}}var unfilledBackgroundColor=theme.colors.feedback.background.neutral.subtle;var filledBackgroundColor=color?theme.colors.feedback.background[color].intense:theme.colors.surface.background.primary.intense;var hasLabel=label&&((_label$trim=label.trim())==null?void 0:_label$trim.length)>0;var isMeter=variant==='meter';var progressValue=clamp(value,min,max);var percentageProgressValue=Math.floor((progressValue-min)*100/(max-min));var shouldShowPercentage=showPercentage&&!isMeter&&!isIndeterminate;var accessibilityProps={role:'progressbar',label:accessibilityLabel!=null?accessibilityLabel:label,valueNow:percentageProgressValue,valueText:`${percentageProgressValue}%`,valueMin:min,valueMax:max};if(isMeter){accessibilityProps.role='meter';accessibilityProps.valueNow=progressValue;accessibilityProps.valueText=`${progressValue}`;}if(isIndeterminate){accessibilityProps.valueNow=undefined;accessibilityProps.valueMin=undefined;accessibilityProps.valueMax=undefined;accessibilityProps.valueText=undefined;}return jsx(BaseBox,Object.assign({},getStyledProps(styledProps),metaAttribute({name:MetaConstants.ProgressBar,testID:testID}),{children:jsxs(BaseBox,{display:"flex",flexDirection:"column",width:"100%",children:[jsxs(BaseBox,{display:"flex",flexDirection:"row",justifyContent:hasLabel?'space-between':'flex-end',children:[hasLabel?jsx(Text,{as:"label",variant:"body",size:"small",color:"surface.text.gray.subtle",children:label}):null,shouldShowPercentage?jsx(BaseBox,{marginBottom:"spacing.2",children:jsx(Text,{variant:"body",size:"small",color:"surface.text.gray.subtle",children:`${percentageProgressValue}%`})}):null]}),jsx(BaseBox,Object.assign({id:id},makeAccessible({role:accessibilityProps.role,label:accessibilityProps.label,valueNow:accessibilityProps.valueNow,valueText:accessibilityProps.valueText,valueMin:accessibilityProps.valueMin,valueMax:accessibilityProps.valueMax}),{children:jsx(BaseBox,{backgroundColor:unfilledBackgroundColor,height:makeSize(progressBarHeight[size]),overflow:"hidden",position:"relative",children:jsx(ProgressBarFilled,{backgroundColor:filledBackgroundColor,progress:percentageProgressValue,fillMotionDuration:"duration.2xgentle",pulseMotionDuration:"duration.2xgentle",indeterminateMotionDuration:"duration.2xgentle",pulseMotionDelay:"delay.long",motionEasing:"easing.standard.revealing",variant:variant,isIndeterminate:isIndeterminate})})}))]})}));};
+var _excluded=["accessibilityLabel","color","type","isIndeterminate","label","showPercentage","size","value","variant","min","max","testID"];var progressBarHeight={small:size[2],medium:size[4],large:size[0]};var ProgressBar=function ProgressBar(_ref){var _label$trim;var accessibilityLabel=_ref.accessibilityLabel,color=_ref.color,type=_ref.type,_ref$isIndeterminate=_ref.isIndeterminate,isIndeterminate=_ref$isIndeterminate===void 0?false:_ref$isIndeterminate,label=_ref.label,_ref$showPercentage=_ref.showPercentage,showPercentage=_ref$showPercentage===void 0?true:_ref$showPercentage,_ref$size=_ref.size,size=_ref$size===void 0?'small':_ref$size,_ref$value=_ref.value,value=_ref$value===void 0?0:_ref$value,_ref$variant=_ref.variant,variant=_ref$variant===void 0?'progress':_ref$variant,_ref$min=_ref.min,min=_ref$min===void 0?0:_ref$min,_ref$max=_ref.max,max=_ref$max===void 0?100:_ref$max,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var progressType=!type&&(variant==='meter'||variant==='progress')?variant:type;var progressVariant=variant==='meter'||variant==='progress'?'linear':variant;var id=useId(`${progressType}-${progressVariant}`);if(__DEV__){if(progressType==='meter'&&isIndeterminate){throwBladeError({moduleName:'ProgressBar',message:`Cannot set 'isIndeterminate' when 'type' or 'variant' is 'meter'.`});}if(progressVariant==='circular'&&isIndeterminate){throwBladeError({moduleName:'ProgressBar',message:`Cannot set 'isIndeterminate' when 'variant' is 'circular'.`});}if(progressVariant==='linear'&&size==='large'){throwBladeError({moduleName:'ProgressBar',message:`Large size isn't available when 'variant' is 'linear'.`});}if(type&&(variant==='progress'||variant==='meter')){throwBladeError({moduleName:'ProgressBar',message:`variant can only be 'linear' or 'circular' when 'type=${type}'.`});}}var unfilledBackgroundColor=theme.colors.feedback.background.neutral.subtle;var filledBackgroundColor=color?theme.colors.feedback.background[color].intense:theme.colors.surface.background.primary.intense;var hasLabel=label&&((_label$trim=label.trim())==null?void 0:_label$trim.length)>0;var isMeter=progressType==='meter';var isCircular=progressVariant==='circular';var progressValue=clamp(value,min,max);var percentageProgressValue=Math.floor((progressValue-min)*100/(max-min));var shouldShowPercentage=showPercentage&&!isMeter&&!isIndeterminate;var accessibilityProps={role:'progressbar',label:accessibilityLabel!=null?accessibilityLabel:label,valueNow:percentageProgressValue,valueText:`${percentageProgressValue}%`,valueMin:min,valueMax:max};if(isMeter){accessibilityProps.role='meter';accessibilityProps.valueNow=progressValue;accessibilityProps.valueText=`${progressValue}`;}if(isIndeterminate){accessibilityProps.valueNow=undefined;accessibilityProps.valueMin=undefined;accessibilityProps.valueMax=undefined;accessibilityProps.valueText=undefined;}return jsx(BaseBox,Object.assign({},getStyledProps(styledProps),metaAttribute({name:MetaConstants.ProgressBar,testID:testID}),{children:jsxs(BaseBox,{display:"flex",flexDirection:"column",width:"100%",children:[!isCircular?jsxs(BaseBox,{display:"flex",flexDirection:"row",justifyContent:hasLabel?'space-between':'flex-end',children:[hasLabel?jsx(Text,{as:"label",variant:"body",size:"small",color:"surface.text.gray.subtle",children:label}):null,shouldShowPercentage?jsx(BaseBox,{marginBottom:"spacing.2",children:jsx(Text,{variant:"body",size:"small",color:"surface.text.gray.subtle",children:`${percentageProgressValue}%`})}):null]}):null,jsx(BaseBox,Object.assign({id:id},makeAccessible({role:accessibilityProps.role,label:accessibilityProps.label,valueNow:accessibilityProps.valueNow,valueText:accessibilityProps.valueText,valueMin:accessibilityProps.valueMin,valueMax:accessibilityProps.valueMax}),{children:isCircular?jsx(CircularProgressBarFilled,{size:size,label:label,progressPercent:percentageProgressValue,isMeter:isMeter,showPercentage:shouldShowPercentage,backgroundColor:unfilledBackgroundColor,fillColor:filledBackgroundColor,pulseMotionDuration:"duration.2xgentle",fillMotionDuration:"duration.2xgentle",pulseMotionDelay:"delay.long",motionEasing:"easing.standard.revealing"}):jsx(BaseBox,{backgroundColor:unfilledBackgroundColor,height:makeSize(progressBarHeight[size]),overflow:"hidden",position:"relative",children:jsx(ProgressBarFilled,{backgroundColor:filledBackgroundColor,progress:percentageProgressValue,fillMotionDuration:"duration.2xgentle",pulseMotionDuration:"duration.2xgentle",indeterminateMotionDuration:"duration.2xgentle",pulseMotionDelay:"delay.long",motionEasing:"easing.standard.revealing",type:progressType,isIndeterminate:isIndeterminate})})}))]})}));};
 
 export { ProgressBar };
 //# sourceMappingURL=ProgressBar.js.map