@razorpay/blade 11.11.1 → 11.12.0

package/build/lib/web/production/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/production/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,

package/build/lib/web/production/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","_objectSpread","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","_objectSpread","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/web/production/components/Tag/AnimatedTag.web.js

@@ -7,18 +7,17 @@ import '../Box/BaseBox/index.js';
 import '../BladeProvider/index.js';
 import '../../utils/index.js';
 import { jsx } from 'react/jsx-runtime';
-import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import useTheme from '../BladeProvider/useTheme.js';
 import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
 
-var tagDissappearKeyframe = /*#__PURE__*/keyframes(["0%{opacity:", ";max-width:", ";}100%{opacity:", ";max-width:", ";}"], TAG_OPACITY_START, makeSize(TAG_MAX_WIDTH_START), TAG_OPACITY_END, makeSize(TAG_MAX_WIDTH_END));
+var tagDissappearKeyframe = /*#__PURE__*/keyframes(["0%{opacity:", ";max-width:", "}100%{opacity:", ";max-width:", ";}"], TAG_OPACITY_START, TAG_MAX_WIDTH_START, TAG_OPACITY_END, TAG_MAX_WIDTH_END);
 var tagShowKeyframe = /*#__PURE__*/keyframes(["0%{opacity:", ";}100%{opacity:", ";}"], TAG_OPACITY_END, TAG_OPACITY_START);
 var AnimatedTagContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "AnimatedTagweb__AnimatedTagContainer",
   componentId: "sc-1ypkpkt-0"
 })(function (props) {
-  return css(["", ";display:inline-block;opacity:", ";max-width:", ";flex-shrink:0;"], props.transition, props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END, makeSize(props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END));
+  return css(["", ";display:inline-block;opacity:", ";max-width:", ";flex-shrink:0;"], props.transition, props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END, props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END);
 });
 var AnimatedTag = function AnimatedTag(_ref) {
   var children = _ref.children,

package/build/lib/web/production/components/Tag/AnimatedTag.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedTag.web.js","sources":["../../../../../../src/components/Tag/AnimatedTag.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport { Tag } from './Tag';\nimport type { AnimatedTagProps } from './types';\nimport {\n  TAG_MAX_WIDTH_END,\n  TAG_MAX_WIDTH_START,\n  TAG_OPACITY_END,\n  TAG_OPACITY_START,\n} from './tagAnimationConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeMotionTime, makeSize } from '~utils';\n\nconst tagDissappearKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_START};\n    max-width: ${makeSize(TAG_MAX_WIDTH_START)};\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_END};\n    max-width: ${makeSize(TAG_MAX_WIDTH_END)};\n  }\n`;\n\nconst tagShowKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_END};\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_START};\n  }\n`;\n\nconst AnimatedTagContainer = styled(BaseBox)<{\n  transition: FlattenSimpleInterpolation;\n  isVisible: boolean;\n}>(\n  (props) => css`\n    ${props.transition};\n    display: inline-block;\n    opacity: ${props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END};\n    max-width: ${makeSize(props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END)};\n    flex-shrink: 0;\n  `,\n);\n\nconst AnimatedTag = ({\n  children,\n  currentTagIndex,\n  isDisabled,\n  activeTagIndex,\n  onDismiss,\n  size = 'medium',\n}: AnimatedTagProps): React.ReactElement => {\n  const [isTagVisible, setIsTagVisible] = React.useState(true);\n  const { theme } = useTheme();\n\n  const hideTagTransition = css`\n    animation: ${tagDissappearKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.exit.effective)};\n  `;\n\n  const showTagTransition = css`\n    animation: ${tagShowKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.entrance.effective)};\n  `;\n\n  return (\n    <AnimatedTagContainer\n      isVisible={isTagVisible}\n      onAnimationEnd={() => {\n        if (!isTagVisible) {\n          onDismiss({ tagIndex: currentTagIndex, tagName: children });\n        }\n      }}\n      transition={isTagVisible ? showTagTransition : hideTagTransition}\n    >\n      <Tag\n        _isVirtuallyFocused={currentTagIndex === activeTagIndex}\n        _isTagInsideInput={true}\n        onDismiss={() => {\n          setIsTagVisible(false);\n        }}\n        marginRight=\"spacing.3\"\n        marginY=\"spacing.2\"\n        isDisabled={isDisabled}\n        size={size}\n      >\n        {children}\n      </Tag>\n    </AnimatedTagContainer>\n  );\n};\n\nexport { AnimatedTag };\n"],"names":["tagDissappearKeyframe","keyframes","TAG_OPACITY_START","makeSize","TAG_MAX_WIDTH_START","TAG_OPACITY_END","TAG_MAX_WIDTH_END","tagShowKeyframe","AnimatedTagContainer","styled","BaseBox","withConfig","displayName","componentId","props","css","transition","isVisible","AnimatedTag","_ref","children","currentTagIndex","isDisabled","activeTagIndex","onDismiss","_ref$size","size","_React$useState","React","useState","_React$useState2","_slicedToArray","isTagVisible","setIsTagVisible","_useTheme","useTheme","theme","hideTagTransition","makeMotionTime","motion","duration","xquick","String","easing","exit","effective","showTagTransition","entrance","_jsx","onAnimationEnd","tagIndex","tagName","Tag","_isVirtuallyFocused","_isTagInsideInput","marginRight","marginY"],"mappings":"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"}
+{"version":3,"file":"AnimatedTag.web.js","sources":["../../../../../../src/components/Tag/AnimatedTag.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport { Tag } from './Tag';\nimport type { AnimatedTagProps } from './types';\nimport {\n  TAG_MAX_WIDTH_END,\n  TAG_MAX_WIDTH_START,\n  TAG_OPACITY_END,\n  TAG_OPACITY_START,\n} from './tagAnimationConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeMotionTime } from '~utils';\n\nconst tagDissappearKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_START};\n    max-width: ${TAG_MAX_WIDTH_START}\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_END};\n    max-width: ${TAG_MAX_WIDTH_END};\n  }\n`;\n\nconst tagShowKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_END};\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_START};\n  }\n`;\n\nconst AnimatedTagContainer = styled(BaseBox)<{\n  transition: FlattenSimpleInterpolation;\n  isVisible: boolean;\n}>(\n  (props) => css`\n    ${props.transition};\n    display: inline-block;\n    opacity: ${props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END};\n    max-width: ${props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END};\n    flex-shrink: 0;\n  `,\n);\n\nconst AnimatedTag = ({\n  children,\n  currentTagIndex,\n  isDisabled,\n  activeTagIndex,\n  onDismiss,\n  size = 'medium',\n}: AnimatedTagProps): React.ReactElement => {\n  const [isTagVisible, setIsTagVisible] = React.useState(true);\n  const { theme } = useTheme();\n\n  const hideTagTransition = css`\n    animation: ${tagDissappearKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.exit.effective)};\n  `;\n\n  const showTagTransition = css`\n    animation: ${tagShowKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.entrance.effective)};\n  `;\n\n  return (\n    <AnimatedTagContainer\n      isVisible={isTagVisible}\n      onAnimationEnd={() => {\n        if (!isTagVisible) {\n          onDismiss({ tagIndex: currentTagIndex, tagName: children });\n        }\n      }}\n      transition={isTagVisible ? showTagTransition : hideTagTransition}\n    >\n      <Tag\n        _isVirtuallyFocused={currentTagIndex === activeTagIndex}\n        _isTagInsideInput={true}\n        onDismiss={() => {\n          setIsTagVisible(false);\n        }}\n        marginRight=\"spacing.3\"\n        marginY=\"spacing.2\"\n        isDisabled={isDisabled}\n        size={size}\n      >\n        {children}\n      </Tag>\n    </AnimatedTagContainer>\n  );\n};\n\nexport { AnimatedTag };\n"],"names":["tagDissappearKeyframe","keyframes","TAG_OPACITY_START","TAG_MAX_WIDTH_START","TAG_OPACITY_END","TAG_MAX_WIDTH_END","tagShowKeyframe","AnimatedTagContainer","styled","BaseBox","withConfig","displayName","componentId","props","css","transition","isVisible","AnimatedTag","_ref","children","currentTagIndex","isDisabled","activeTagIndex","onDismiss","_ref$size","size","_React$useState","React","useState","_React$useState2","_slicedToArray","isTagVisible","setIsTagVisible","_useTheme","useTheme","theme","hideTagTransition","makeMotionTime","motion","duration","xquick","String","easing","exit","effective","showTagTransition","entrance","_jsx","onAnimationEnd","tagIndex","tagName","Tag","_isVirtuallyFocused","_isTagInsideInput","marginRight","marginY"],"mappings":"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"}

package/build/lib/web/production/components/Tag/Tag.js

@@ -70,7 +70,7 @@ var FocussableTag = /*#__PURE__*/styled(BaseBox).withConfig({
  */
 var Tag = function Tag(_ref) {
   var _ref$size = _ref.size,
-    size$1 = _ref$size === void 0 ? 'medium' : _ref$size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
     Icon = _ref.icon,
     onDismiss = _ref.onDismiss,
     children = _ref.children,
@@ -92,11 +92,11 @@ var Tag = function Tag(_ref) {
     m: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4']
   };
   var assetSize = React__default.useMemo(function () {
-    if (isMobile && size$1 === 'large') {
+    if (isMobile && size === 'large') {
       return 'medium';
     }
     return 'small';
-  }, [isMobile, size$1]);
+  }, [isMobile, size]);
   return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
     display: isReactNative() ? 'flex' : 'inline-flex'
   }, getStyledProps(styledProps)), metaAttribute({
@@ -111,7 +111,7 @@ var Tag = function Tag(_ref) {
       flexShrink: 0,
       backgroundColor: backgroundColor,
       borderRadius: "max",
-      padding: size$1 === 'medium' ? mediumPadding : largePadding,
+      padding: size === 'medium' ? mediumPadding : largePadding,
       _isVirtuallyFocused: _isVirtuallyFocused,
       children: [Icon ? /*#__PURE__*/jsx(Box, {
         display: "flex",
@@ -125,13 +125,12 @@ var Tag = function Tag(_ref) {
       }) : null, /*#__PURE__*/jsx(Box, {
         display: "flex",
         flexDirection: "row",
-        maxWidth: makeSize(size['100']),
         children: /*#__PURE__*/jsx(Text, {
           textAlign: "center",
           truncateAfterLines: 1,
           marginRight: "spacing.2",
           color: textColor,
-          size: 'small',
+          size: "small",
           children: children
         })
       }), /*#__PURE__*/jsx(Box, {

package/build/lib/web/production/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { TagProps } from './types';\nimport { Box } from '~components/Box';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { isReactNative, makeSize } from '~utils';\nimport { size as globalSizeTokens } from '~tokens/global';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { PaddingProps } from '~components/Box/BaseBox/types/spacingTypes';\nimport { useIsMobile } from '~utils/useIsMobile';\n\nconst FocussableTag = styled(BaseBox)<{ _isVirtuallyFocused: TagProps['_isVirtuallyFocused'] }>(\n  (props) => {\n    if (props._isVirtuallyFocused && !isReactNative()) {\n      return {\n        outline: `${makeSize(globalSizeTokens['1'])} solid ${\n          props.theme.colors.surface.background.gray.subtle\n        }`,\n        boxShadow: `0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`,\n      };\n    }\n\n    return {};\n  },\n);\n\n/**\n * ## Tags\n *\n * Tag component can be used to display selected items on UI.\n *\n * ### Usage\n *\n * ***Note:*** _Make sure to handle state when using Tag_\n *\n * ```jsx\n * const [showTag, setShowTag] = React.useState(true);\n *\n * // ...\n *\n * {showTag && (\n *  <Tag\n *    icon={CheckIcon}\n *    onDismiss={() => setShowTag(false)}\n *  >\n *    Transactions\n *  </Tag>\n * )}\n * ```\n *\n * Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.\n *\n */\nconst Tag = ({\n  size = 'medium',\n  icon: Icon,\n  onDismiss,\n  children,\n  isDisabled,\n  testID,\n  _isVirtuallyFocused,\n  _isTagInsideInput,\n  ...styledProps\n}: TagProps): React.ReactElement | null => {\n  const isMobile = useIsMobile();\n\n  const textColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.subtle';\n  const iconColor = isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted';\n  const backgroundColor = isDisabled\n    ? 'interactive.background.gray.disabled'\n    : 'interactive.background.gray.default';\n\n  const mediumPadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.1', 'spacing.2', 'spacing.1', 'spacing.3'],\n  };\n\n  const largePadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n  };\n\n  const assetSize = React.useMemo((): 'small' | 'medium' => {\n    if (isMobile && size === 'large') {\n      return 'medium';\n    }\n\n    return 'small';\n  }, [isMobile, size]);\n\n  return (\n    <BaseBox\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...getStyledProps(styledProps)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\n    >\n      <FocussableTag\n        display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n        alignSelf={isReactNative() ? 'center' : undefined}\n        flexDirection=\"row\"\n        flexWrap=\"nowrap\"\n        flexShrink={0}\n        backgroundColor={backgroundColor}\n        borderRadius=\"max\"\n        padding={size === 'medium' ? mediumPadding : largePadding}\n        _isVirtuallyFocused={_isVirtuallyFocused}\n      >\n        {/* Leading Icon */}\n        {Icon ? (\n          <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n            <Icon color={iconColor} size={assetSize} marginRight=\"spacing.2\" />\n          </Box>\n        ) : null}\n\n        {/* Tag Text */}\n        <Box display=\"flex\" flexDirection=\"row\" maxWidth={makeSize(globalSizeTokens['100'])}>\n          <Text\n            textAlign=\"center\"\n            truncateAfterLines={1}\n            marginRight=\"spacing.2\"\n            color={textColor}\n            size={'small'}\n          >\n            {children}\n          </Text>\n        </Box>\n\n        {/* Dismiss Icon */}\n        <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <IconButton\n            size={assetSize}\n            icon={CloseIcon}\n            accessibilityLabel={`Close ${children} tag`}\n            isDisabled={isDisabled}\n            _tabIndex={_isTagInsideInput ? -1 : undefined}\n            onClick={(e) => {\n              // Inside tag input, we stop propagation to avoid opening dropdown on click of close on tag\n              if (_isTagInsideInput) {\n                e.stopPropagation();\n              }\n              onDismiss();\n            }}\n          />\n        </Box>\n      </FocussableTag>\n    </BaseBox>\n  );\n};\n\nexport { Tag };\n"],"names":["FocussableTag","styled","BaseBox","withConfig","displayName","componentId","props","_isVirtuallyFocused","isReactNative","outline","concat","makeSize","globalSizeTokens","theme","colors","surface","background","gray","subtle","boxShadow","interactive","primary","faded","Tag","_ref","_ref$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","styledProps","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","_objectSpread","display","getStyledProps","metaAttribute","name","MetaConstants","_jsxs","alignSelf","undefined","flexDirection","flexWrap","flexShrink","borderRadius","padding","Box","alignItems","color","marginRight","maxWidth","Text","textAlign","truncateAfterLines","justifyContent","IconButton","CloseIcon","accessibilityLabel","_tabIndex","onClick","e","stopPropagation"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { TagProps } from './types';\nimport { Box } from '~components/Box';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { isReactNative, makeSize } from '~utils';\nimport { size as globalSizeTokens } from '~tokens/global';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { PaddingProps } from '~components/Box/BaseBox/types/spacingTypes';\nimport { useIsMobile } from '~utils/useIsMobile';\n\nconst FocussableTag = styled(BaseBox)<{ _isVirtuallyFocused: TagProps['_isVirtuallyFocused'] }>(\n  (props) => {\n    if (props._isVirtuallyFocused && !isReactNative()) {\n      return {\n        outline: `${makeSize(globalSizeTokens['1'])} solid ${\n          props.theme.colors.surface.background.gray.subtle\n        }`,\n        boxShadow: `0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`,\n      };\n    }\n\n    return {};\n  },\n);\n\n/**\n * ## Tags\n *\n * Tag component can be used to display selected items on UI.\n *\n * ### Usage\n *\n * ***Note:*** _Make sure to handle state when using Tag_\n *\n * ```jsx\n * const [showTag, setShowTag] = React.useState(true);\n *\n * // ...\n *\n * {showTag && (\n *  <Tag\n *    icon={CheckIcon}\n *    onDismiss={() => setShowTag(false)}\n *  >\n *    Transactions\n *  </Tag>\n * )}\n * ```\n *\n * Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.\n *\n */\nconst Tag = ({\n  size = 'medium',\n  icon: Icon,\n  onDismiss,\n  children,\n  isDisabled,\n  testID,\n  _isVirtuallyFocused,\n  _isTagInsideInput,\n  ...styledProps\n}: TagProps): React.ReactElement | null => {\n  const isMobile = useIsMobile();\n\n  const textColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.subtle';\n  const iconColor = isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted';\n  const backgroundColor = isDisabled\n    ? 'interactive.background.gray.disabled'\n    : 'interactive.background.gray.default';\n\n  const mediumPadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.1', 'spacing.2', 'spacing.1', 'spacing.3'],\n  };\n\n  const largePadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n  };\n\n  const assetSize = React.useMemo((): 'small' | 'medium' => {\n    if (isMobile && size === 'large') {\n      return 'medium';\n    }\n\n    return 'small';\n  }, [isMobile, size]);\n\n  return (\n    <BaseBox\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...getStyledProps(styledProps)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\n    >\n      <FocussableTag\n        display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n        alignSelf={isReactNative() ? 'center' : undefined}\n        flexDirection=\"row\"\n        flexWrap=\"nowrap\"\n        flexShrink={0}\n        backgroundColor={backgroundColor}\n        borderRadius=\"max\"\n        padding={size === 'medium' ? mediumPadding : largePadding}\n        _isVirtuallyFocused={_isVirtuallyFocused}\n      >\n        {/* Leading Icon */}\n        {Icon ? (\n          <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n            <Icon color={iconColor} size={assetSize} marginRight=\"spacing.2\" />\n          </Box>\n        ) : null}\n\n        {/* Tag Text */}\n        <Box display=\"flex\" flexDirection=\"row\">\n          <Text\n            textAlign=\"center\"\n            truncateAfterLines={1}\n            marginRight=\"spacing.2\"\n            color={textColor}\n            size=\"small\"\n          >\n            {children}\n          </Text>\n        </Box>\n\n        {/* Dismiss Icon */}\n        <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <IconButton\n            size={assetSize}\n            icon={CloseIcon}\n            accessibilityLabel={`Close ${children} tag`}\n            isDisabled={isDisabled}\n            _tabIndex={_isTagInsideInput ? -1 : undefined}\n            onClick={(e) => {\n              // Inside tag input, we stop propagation to avoid opening dropdown on click of close on tag\n              if (_isTagInsideInput) {\n                e.stopPropagation();\n              }\n              onDismiss();\n            }}\n          />\n        </Box>\n      </FocussableTag>\n    </BaseBox>\n  );\n};\n\nexport { Tag };\n"],"names":["FocussableTag","styled","BaseBox","withConfig","displayName","componentId","props","_isVirtuallyFocused","isReactNative","outline","concat","makeSize","globalSizeTokens","theme","colors","surface","background","gray","subtle","boxShadow","interactive","primary","faded","Tag","_ref","_ref$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","styledProps","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","_objectSpread","display","getStyledProps","metaAttribute","name","MetaConstants","_jsxs","alignSelf","undefined","flexDirection","flexWrap","flexShrink","borderRadius","padding","Box","alignItems","color","marginRight","Text","textAlign","truncateAfterLines","justifyContent","IconButton","CloseIcon","accessibilityLabel","_tabIndex","onClick","e","stopPropagation"],"mappings":"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"}

package/build/lib/web/production/components/Tag/getTagsGroup.js

@@ -18,7 +18,7 @@ var getTagsGroup = function getTagsGroup(_ref) {
       isDisabled: isDisabled,
       size: size,
       children: tagName
-    }, tagName);
+    }, "".concat(tagName, "-").concat(tagIndex));
   });
 };
 

package/build/lib/web/production/components/Tag/getTagsGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"getTagsGroup.js","sources":["../../../../../../src/components/Tag/getTagsGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { AnimatedTag } from './AnimatedTag';\nimport type { TagsGroupProps } from './types';\n\nconst getTagsGroup = ({\n  tags,\n  activeTagIndex,\n  isDisabled,\n  onDismiss,\n  size = 'medium',\n}: TagsGroupProps): React.ReactElement[] => {\n  return tags.map((tagName, tagIndex) => (\n    <AnimatedTag\n      key={tagName}\n      activeTagIndex={activeTagIndex}\n      onDismiss={onDismiss}\n      currentTagIndex={tagIndex}\n      tagsLength={tags.length}\n      isDisabled={isDisabled}\n      size={size}\n    >\n      {tagName}\n    </AnimatedTag>\n  ));\n};\n\nexport { getTagsGroup };\n"],"names":["getTagsGroup","_ref","tags","activeTagIndex","isDisabled","onDismiss","_ref$size","size","map","tagName","tagIndex","_jsx","AnimatedTag","currentTagIndex","tagsLength","length","children"],"mappings":";;;;AAIA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAAC,IAAA,EAM0B;AAAA,EAAA,IAL1CC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,cAAc,GAAAF,IAAA,CAAdE,cAAc;IACdC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IAAAC,SAAA,GAAAL,IAAA,CACTM,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA,CAAA;AAEf,EAAA,OAAOJ,IAAI,CAACM,GAAG,CAAC,UAACC,OAAO,EAAEC,QAAQ,EAAA;IAAA,oBAChCC,GAAA,CAACC,WAAW,EAAA;AAEVT,MAAAA,cAAc,EAAEA,cAAe;AAC/BE,MAAAA,SAAS,EAAEA,SAAU;AACrBQ,MAAAA,eAAe,EAAEH,QAAS;MAC1BI,UAAU,EAAEZ,IAAI,CAACa,MAAO;AACxBX,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,IAAI,EAAEA,IAAK;AAAAS,MAAAA,QAAA,EAEVP,OAAAA;AAAO,KAAA,EARHA,OASM,CAAC,CAAA;AAAA,GACf,CAAC,CAAA;AACJ;;;;"}
+{"version":3,"file":"getTagsGroup.js","sources":["../../../../../../src/components/Tag/getTagsGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { AnimatedTag } from './AnimatedTag';\nimport type { TagsGroupProps } from './types';\n\nconst getTagsGroup = ({\n  tags,\n  activeTagIndex,\n  isDisabled,\n  onDismiss,\n  size = 'medium',\n}: TagsGroupProps): React.ReactElement[] => {\n  return tags.map((tagName, tagIndex) => (\n    <AnimatedTag\n      key={`${tagName}-${tagIndex}`}\n      activeTagIndex={activeTagIndex}\n      onDismiss={onDismiss}\n      currentTagIndex={tagIndex}\n      tagsLength={tags.length}\n      isDisabled={isDisabled}\n      size={size}\n    >\n      {tagName}\n    </AnimatedTag>\n  ));\n};\n\nexport { getTagsGroup };\n"],"names":["getTagsGroup","_ref","tags","activeTagIndex","isDisabled","onDismiss","_ref$size","size","map","tagName","tagIndex","_jsx","AnimatedTag","currentTagIndex","tagsLength","length","children","concat"],"mappings":";;;;AAIA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAAC,IAAA,EAM0B;AAAA,EAAA,IAL1CC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,cAAc,GAAAF,IAAA,CAAdE,cAAc;IACdC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IAAAC,SAAA,GAAAL,IAAA,CACTM,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA,CAAA;AAEf,EAAA,OAAOJ,IAAI,CAACM,GAAG,CAAC,UAACC,OAAO,EAAEC,QAAQ,EAAA;IAAA,oBAChCC,GAAA,CAACC,WAAW,EAAA;AAEVT,MAAAA,cAAc,EAAEA,cAAe;AAC/BE,MAAAA,SAAS,EAAEA,SAAU;AACrBQ,MAAAA,eAAe,EAAEH,QAAS;MAC1BI,UAAU,EAAEZ,IAAI,CAACa,MAAO;AACxBX,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,IAAI,EAAEA,IAAK;AAAAS,MAAAA,QAAA,EAEVP,OAAAA;KAAOQ,EAAAA,EAAAA,CAAAA,MAAA,CARAR,OAAO,EAAA,GAAA,CAAA,CAAAQ,MAAA,CAAIP,QAAQ,CAShB,CAAC,CAAA;AAAA,GACf,CAAC,CAAA;AACJ;;;;"}

package/build/lib/web/production/components/Tag/tagAnimationConfig.js

@@ -1,8 +1,10 @@
 import '../../tokens/global/index.js';
 import { size } from '../../tokens/global/size.js';
 
-var TAG_MAX_WIDTH_START = size['140'];
-var TAG_MAX_WIDTH_END = size['0'];
+// we have to set some max-width for width animations to work correctly while tags are disappearing
+// https://stackoverflow.com/a/38643863
+var TAG_MAX_WIDTH_START = '100%';
+var TAG_MAX_WIDTH_END = '0%';
 var TAG_MAX_HEIGHT_END = size['0'];
 var TAG_OPACITY_START = 1;
 var TAG_OPACITY_END = 0;

package/build/lib/web/production/components/Tag/tagAnimationConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"tagAnimationConfig.js","sources":["../../../../../../src/components/Tag/tagAnimationConfig.ts"],"sourcesContent":["import { size } from '~tokens/global';\n\nexport const TAG_MAX_WIDTH_START: number = size['140'];\nexport const TAG_MAX_WIDTH_END: number = size['0'];\nexport const TAG_MAX_HEIGHT_END: number = size['0'];\nexport const TAG_OPACITY_START = 1;\nexport const TAG_OPACITY_END = 0;\n"],"names":["TAG_MAX_WIDTH_START","size","TAG_MAX_WIDTH_END","TAG_MAX_HEIGHT_END","TAG_OPACITY_START","TAG_OPACITY_END"],"mappings":";;;IAEaA,mBAA2B,GAAGC,IAAI,CAAC,KAAK,EAAC;IACzCC,iBAAyB,GAAGD,IAAI,CAAC,GAAG,EAAC;IACrCE,kBAA0B,GAAGF,IAAI,CAAC,GAAG,EAAC;AAC5C,IAAMG,iBAAiB,GAAG,EAAC;AAC3B,IAAMC,eAAe,GAAG;;;;"}
+{"version":3,"file":"tagAnimationConfig.js","sources":["../../../../../../src/components/Tag/tagAnimationConfig.ts"],"sourcesContent":["import { size } from '~tokens/global';\n\n// we have to set some max-width for width animations to work correctly while tags are disappearing\n// https://stackoverflow.com/a/38643863\nexport const TAG_MAX_WIDTH_START: `${number}%` = '100%';\nexport const TAG_MAX_WIDTH_END: `${number}%` = '0%';\nexport const TAG_MAX_HEIGHT_END: number = size['0'];\nexport const TAG_OPACITY_START = 1;\nexport const TAG_OPACITY_END = 0;\n"],"names":["TAG_MAX_WIDTH_START","TAG_MAX_WIDTH_END","TAG_MAX_HEIGHT_END","size","TAG_OPACITY_START","TAG_OPACITY_END"],"mappings":";;;AAEA;AACA;AACO,IAAMA,mBAAiC,GAAG,OAAM;AAChD,IAAMC,iBAA+B,GAAG,KAAI;IACtCC,kBAA0B,GAAGC,IAAI,CAAC,GAAG,EAAC;AAC5C,IAAMC,iBAAiB,GAAG,EAAC;AAC3B,IAAMC,eAAe,GAAG;;;;"}

package/build/lib/web/production/components/Typography/BaseText/getBaseTextStyles.js

@@ -48,7 +48,8 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
         display: '-webkit-box',
         'line-clamp': "".concat(numberOfLines),
         '-webkit-line-clamp': "".concat(numberOfLines),
-        '-webkit-box-orient': 'vertical'
+        '-webkit-box-orient': 'vertical',
+        overflowWrap: 'break-word'
       };
     }
   }

package/build/lib/web/production/components/Typography/BaseText/getBaseTextStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"getBaseTextStyles.js","sources":["../../../../../../../src/components/Typography/BaseText/getBaseTextStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport type { StyledBaseTextProps } from './types';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeTypographySize } from '~utils/makeTypographySize';\nimport { isReactNative } from '~utils';\nimport { makeLetterSpacing } from '~utils/makeLetterSpacing';\n\nconst getBaseTextStyles = ({\n  color = 'surface.text.gray.normal',\n  fontFamily = 'text',\n  fontSize = 200,\n  fontWeight = 'regular',\n  fontStyle = 'normal',\n  textDecorationLine = 'none',\n  numberOfLines,\n  wordBreak,\n  lineHeight = 100,\n  letterSpacing = 100,\n  textAlign,\n  opacity,\n  theme,\n}: StyledBaseTextProps): CSSObject => {\n  const textColor = getIn(theme.colors, color);\n  const themeFontFamily = theme.typography.fonts.family[fontFamily];\n  const themeFontSize = makeTypographySize(theme.typography.fonts.size[fontSize]);\n  const themeFontWeight = theme.typography.fonts.weight[fontWeight];\n  const themeLineHeight = makeTypographySize(theme.typography.lineHeights[lineHeight]);\n  const themeLetterSpacing = makeLetterSpacing(\n    theme.typography.letterSpacings[letterSpacing],\n    theme.typography.fonts.size[fontSize],\n  );\n  let truncateStyles: CSSObject = {};\n  let wordBreakStyles: CSSObject = {};\n  if (numberOfLines !== undefined) {\n    if (isReactNative()) {\n      truncateStyles = {};\n    } else {\n      truncateStyles = {\n        overflow: 'hidden',\n        display: '-webkit-box',\n        'line-clamp': `${numberOfLines}`,\n        '-webkit-line-clamp': `${numberOfLines}`,\n        '-webkit-box-orient': 'vertical',\n      };\n    }\n  }\n  if (wordBreak !== undefined) {\n    if (isReactNative()) {\n      wordBreakStyles = {};\n    } else {\n      wordBreakStyles = {\n        wordBreak,\n      };\n    }\n  }\n\n  return {\n    color: textColor,\n    fontFamily: themeFontFamily,\n    fontSize: themeFontSize,\n    fontWeight: themeFontWeight,\n    fontStyle,\n    textDecorationLine,\n    ...(textDecorationLine !== 'none' && {\n      textDecorationColor: textColor,\n    }),\n    lineHeight: themeLineHeight,\n    letterSpacing: themeLetterSpacing,\n    textAlign,\n    margin: 0,\n    padding: 0,\n    opacity,\n    ...truncateStyles,\n    ...wordBreakStyles,\n  };\n};\n\nexport default getBaseTextStyles;\n"],"names":["getBaseTextStyles","_ref","_ref$color","color","_ref$fontFamily","fontFamily","_ref$fontSize","fontSize","_ref$fontWeight","fontWeight","_ref$fontStyle","fontStyle","_ref$textDecorationLi","textDecorationLine","numberOfLines","wordBreak","_ref$lineHeight","lineHeight","_ref$letterSpacing","letterSpacing","textAlign","opacity","theme","textColor","getIn","colors","themeFontFamily","typography","fonts","family","themeFontSize","makeTypographySize","size","themeFontWeight","weight","themeLineHeight","lineHeights","themeLetterSpacing","makeLetterSpacing","letterSpacings","truncateStyles","wordBreakStyles","undefined","isReactNative","overflow","display","concat","_objectSpread","textDecorationColor","margin","padding"],"mappings":"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"}
+{"version":3,"file":"getBaseTextStyles.js","sources":["../../../../../../../src/components/Typography/BaseText/getBaseTextStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport type { StyledBaseTextProps } from './types';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeTypographySize } from '~utils/makeTypographySize';\nimport { isReactNative } from '~utils';\nimport { makeLetterSpacing } from '~utils/makeLetterSpacing';\n\nconst getBaseTextStyles = ({\n  color = 'surface.text.gray.normal',\n  fontFamily = 'text',\n  fontSize = 200,\n  fontWeight = 'regular',\n  fontStyle = 'normal',\n  textDecorationLine = 'none',\n  numberOfLines,\n  wordBreak,\n  lineHeight = 100,\n  letterSpacing = 100,\n  textAlign,\n  opacity,\n  theme,\n}: StyledBaseTextProps): CSSObject => {\n  const textColor = getIn(theme.colors, color);\n  const themeFontFamily = theme.typography.fonts.family[fontFamily];\n  const themeFontSize = makeTypographySize(theme.typography.fonts.size[fontSize]);\n  const themeFontWeight = theme.typography.fonts.weight[fontWeight];\n  const themeLineHeight = makeTypographySize(theme.typography.lineHeights[lineHeight]);\n  const themeLetterSpacing = makeLetterSpacing(\n    theme.typography.letterSpacings[letterSpacing],\n    theme.typography.fonts.size[fontSize],\n  );\n  let truncateStyles: CSSObject = {};\n  let wordBreakStyles: CSSObject = {};\n  if (numberOfLines !== undefined) {\n    if (isReactNative()) {\n      truncateStyles = {};\n    } else {\n      truncateStyles = {\n        overflow: 'hidden',\n        display: '-webkit-box',\n        'line-clamp': `${numberOfLines}`,\n        '-webkit-line-clamp': `${numberOfLines}`,\n        '-webkit-box-orient': 'vertical',\n        overflowWrap: 'break-word',\n      };\n    }\n  }\n  if (wordBreak !== undefined) {\n    if (isReactNative()) {\n      wordBreakStyles = {};\n    } else {\n      wordBreakStyles = {\n        wordBreak,\n      };\n    }\n  }\n\n  return {\n    color: textColor,\n    fontFamily: themeFontFamily,\n    fontSize: themeFontSize,\n    fontWeight: themeFontWeight,\n    fontStyle,\n    textDecorationLine,\n    ...(textDecorationLine !== 'none' && {\n      textDecorationColor: textColor,\n    }),\n    lineHeight: themeLineHeight,\n    letterSpacing: themeLetterSpacing,\n    textAlign,\n    margin: 0,\n    padding: 0,\n    opacity,\n    ...truncateStyles,\n    ...wordBreakStyles,\n  };\n};\n\nexport default getBaseTextStyles;\n"],"names":["getBaseTextStyles","_ref","_ref$color","color","_ref$fontFamily","fontFamily","_ref$fontSize","fontSize","_ref$fontWeight","fontWeight","_ref$fontStyle","fontStyle","_ref$textDecorationLi","textDecorationLine","numberOfLines","wordBreak","_ref$lineHeight","lineHeight","_ref$letterSpacing","letterSpacing","textAlign","opacity","theme","textColor","getIn","colors","themeFontFamily","typography","fonts","family","themeFontSize","makeTypographySize","size","themeFontWeight","weight","themeLineHeight","lineHeights","themeLetterSpacing","makeLetterSpacing","letterSpacings","truncateStyles","wordBreakStyles","undefined","isReactNative","overflow","display","concat","overflowWrap","_objectSpread","textDecorationColor","margin","padding"],"mappings":"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"}