@razorpay/blade 11.11.1 → 11.13.0

package/build/lib/web/development/components/Input/BaseInput/baseInputStyles.js

@@ -64,7 +64,7 @@ var getInputBackgroundAndBorderStyles = function getInputBackgroundAndBorderStyl
     width: '100%',
     alignItems: isTextArea ? 'flex-start' : undefined,
     position: 'relative',
-    height: isDropdownTrigger ? 'auto' : undefined,
+    height: isDropdownTrigger && !isTextArea ? 'auto' : undefined,
     border: 'none'
   }, getBaseInputBorderStyles({
     theme: theme,
@@ -163,7 +163,7 @@ var getBaseInputStyles = function getBaseInputStyles(_ref5) {
     textAlign: textAlign,
     width: '100%',
     height: isTextArea || isDropdownWithTags ? undefined : makeSpace(baseInputHeight[size]),
-    minHeight: isDropdownWithTags ? undefined : makeSpace(baseInputHeight[size])
+    minHeight: isTextArea || isDropdownWithTags ? undefined : makeSpace(baseInputHeight[size])
   }, isReactNative ? {} : {
     resize: 'none'
   });

package/build/lib/web/development/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","borderColor","baseInputBorderColor","borderWidth","border","width","baseInputBorderWidth","baseInputState","error","success","_objectSpread","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","borderColor","baseInputBorderColor","borderWidth","border","width","baseInputBorderWidth","baseInputState","error","success","_objectSpread","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/web/development/components/Input/BaseInput/useTaggedInput.js

@@ -0,0 +1,172 @@
+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 '../../../utils/index.js';
+import { useControllableState } from '../../../utils/useControllable.js';
+import { isReactNative } from '../../../utils/platform/isReactNative.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 !== void 0 ? 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 || onTagChange === void 0 ? 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 [];
+    }
+
+    // Check if the index is valid
+    if (indexToRemove < 0 || indexToRemove >= currentTags.length) {
+      return currentTags; // Return the original array
+    }
+
+    // Create a new array without the element at the specified index
+    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 || onTagChange === void 0 ? void 0 : onTagChange({
+            tags: getNewTagsArray(tagIndex)
+          });
+        }
+      });
+    };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [activeTagIndex, tags, tagsValue, isDisabled]);
+  var handleTaggedInputChange = function handleTaggedInputChange(_ref4) {
+    var value = _ref4.value;
+    if (!isTaggedInput) {
+      return;
+    }
+    setInputValueUncontrolled(value !== null && value !== void 0 ? value : '');
+  };
+  var handleTagsClear = function handleTagsClear() {
+    if (!isTaggedInput) {
+      return;
+    }
+    if (!isTagsControlled) {
+      setTagsValue(function () {
+        return [];
+      });
+    }
+    onTagChange === null || onTagChange === void 0 ? void 0 : onTagChange({
+      tags: []
+    });
+  };
+  var clearInput = function clearInput() {
+    var isControlledValue = value !== undefined;
+    if (isControlledValue) {
+      // In Controlled component, we don't clear input ourselves. We just call onChange with empty value
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        name: name,
+        value: ''
+      });
+      return;
+    }
+    if (!inputRef.current) {
+      return;
+    }
+    setInputValueUncontrolled('');
+    if (isReactNative()) {
+      setTimeout(function () {
+        var _inputRef$current;
+        // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+        // @ts-ignore: clear does exist in react native
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? 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 || value === void 0 ? void 0 : value.trim() : inputValueUncontrolled.trim();
+    if (e.key === 'Enter' || e.key === ',') {
+      var _e$event$preventDefau, _e$event;
+      (_e$event$preventDefau = (_e$event = e.event).preventDefault) === null || _e$event$preventDefau === void 0 ? void 0 : _e$event$preventDefau.call(_e$event); // we don't want textarea to treat enter as line break in tagged inputs
+      if (inputValue) {
+        if (!isTagsControlled) {
+          setTagsValue(function () {
+            return [].concat(_toConsumableArray(currentTags), [inputValue]);
+          });
+        }
+        onTagChange === null || onTagChange === void 0 ? 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 || onTagChange === void 0 ? 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/web/development/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","_e$event$preventDefau","_e$event","event","preventDefault","call","_toConsumableArray"],"mappings":"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"}

package/build/lib/web/development/components/Input/TextArea/TextArea.js

@@ -3,6 +3,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default from 'react';
 import '../BaseInput/index.js';
+import { useTaggedInput } from '../BaseInput/useTaggedInput.js';
 import isEmpty from '../../../utils/lodashButBetter/isEmpty.js';
 import '../../Icons/index.js';
 import '../../Button/IconButton/index.js';
@@ -23,7 +24,7 @@ import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
 import { CharacterCounter } from '../../Form/CharacterCounter/CharacterCounter.js';
 import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.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 _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"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists
@@ -45,8 +46,8 @@ var _TextArea = function _TextArea(_ref, ref) {
     isRequired = _ref.isRequired,
     name = _ref.name,
     _onChange = _ref.onChange,
-    onFocus = _ref.onFocus,
-    onBlur = _ref.onBlur,
+    _onFocus = _ref.onFocus,
+    _onBlur = _ref.onBlur,
     onSubmit = _ref.onSubmit,
     placeholder = _ref.placeholder,
     value = _ref.value,
@@ -59,13 +60,36 @@ var _TextArea = function _TextArea(_ref, ref) {
     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(false),
+  var _React$useState = React__default.useState(autoFocus !== null && autoFocus !== void 0 ? autoFocus : false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    shouldShowClearButton = _React$useState2[0],
-    setShouldShowClearButton = _React$useState2[1];
+    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 || value === void 0 ? void 0 : value.length) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length))));
   }, [showClearButton, defaultValue, value]);
@@ -89,6 +113,7 @@ var _TextArea = function _TextArea(_ref, ref) {
                 inputRef.current.focus();
               }
             }
+            handleTagsClear();
             // if the input field is controlled just call the click handler and the value change shall be left upto the consumer
             onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick();
             inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
@@ -102,10 +127,18 @@ var _TextArea = function _TextArea(_ref, ref) {
   return /*#__PURE__*/jsx(BaseInput, _objectSpread({
     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,
@@ -134,13 +167,26 @@ var _TextArea = function _TextArea(_ref, ref) {
         // hide the clear button when the input field is empty
         setShouldShowClearButton(false);
       }
+      handleTaggedInputChange({
+        name: name,
+        value: value
+      });
       _onChange === null || _onChange === void 0 ? void 0 : _onChange({
         name: name,
         value: value
       });
     },
-    onFocus: onFocus,
-    onBlur: onBlur,
+    onFocus: function onFocus(e) {
+      setIsInputFocussed(true);
+      _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(e);
+    },
+    onBlur: function onBlur(e) {
+      setIsInputFocussed(false);
+      _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
+    },
+    onKeyDown: function onKeyDown(e) {
+      handleTaggedInputKeydown(e);
+    },
     onSubmit: onSubmit,
     trailingFooterSlot: function trailingFooterSlot(value) {
       var _value$length;

package/build/lib/web/development/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","_objectSpread","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","_objectSpread","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/web/development/components/Input/TextInput/TextInput.js

@@ -4,6 +4,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import React__default, { useState } from 'react';
 import '../BaseInput/index.js';
 import { getKeyboardAndAutocompleteProps } from '../BaseInput/utils.js';
+import { useTaggedInput } from '../BaseInput/useTaggedInput.js';
 import isEmpty from '../../../utils/lodashButBetter/isEmpty.js';
 import '../../Icons/index.js';
 import '../../Button/IconButton/index.js';
@@ -26,7 +27,7 @@ import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
 import { CharacterCounter } from '../../Form/CharacterCounter/CharacterCounter.js';
 import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.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 _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"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists
@@ -48,8 +49,8 @@ var _TextInput = function _TextInput(_ref, ref) {
     maxCharacters = _ref.maxCharacters,
     _onChange = _ref.onChange,
     onClick = _ref.onClick,
-    onFocus = _ref.onFocus,
-    onBlur = _ref.onBlur,
+    _onFocus = _ref.onFocus,
+    _onBlur = _ref.onBlur,
     onSubmit = _ref.onSubmit,
     isDisabled = _ref.isDisabled,
     necessityIndicator = _ref.necessityIndicator,
@@ -73,6 +74,9 @@ var _TextInput = function _TextInput(_ref, ref) {
     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);
@@ -80,6 +84,26 @@ var _TextInput = function _TextInput(_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     shouldShowClearButton = _useState2[0],
     setShouldShowClearButton = _useState2[1];
+  var _useState3 = useState(autoFocus !== null && autoFocus !== void 0 ? 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 !== void 0 ? defaultValue : value)));
   }, [showClearButton, defaultValue, value]);
@@ -106,6 +130,7 @@ var _TextInput = function _TextInput(_ref, ref) {
               textInputRef.current.focus();
             }
           }
+          handleTagsClear();
           // if the input field is controlled just call the click handler and the value change shall be left upto the consumer
           onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick();
           textInputRef === null || textInputRef === void 0 ? void 0 : (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.focus();
@@ -130,6 +155,14 @@ var _TextInput = function _TextInput(_ref, ref) {
     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;
@@ -141,14 +174,27 @@ var _TextInput = function _TextInput(_ref, ref) {
         // hide the clear button when the input field is empty
         setShouldShowClearButton(false);
       }
+      handleTaggedInputChange({
+        name: name,
+        value: value
+      });
       _onChange === null || _onChange === void 0 ? void 0 : _onChange({
         name: name,
         value: value
       });
     },
     onClick: onClick,
-    onFocus: onFocus,
-    onBlur: onBlur,
+    onFocus: function onFocus(e) {
+      setIsInputFocussed(true);
+      _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(e);
+    },
+    onBlur: function onBlur(e) {
+      setIsInputFocussed(false);
+      _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
+    },
+    onKeyDown: function onKeyDown(e) {
+      handleTaggedInputKeydown(e);
+    },
     onSubmit: onSubmit,
     isDisabled: isDisabled,
     necessityIndicator: necessityIndicator,