@razorpay/blade 11.8.1 → 11.9.0

package/build/lib/web/production/components/Input/BaseInput/BaseInput.js

@@ -1,11 +1,13 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React__default from 'react';
+import styled from 'styled-components';
 import { StyledBaseInput } from './StyledBaseInput.web.js';
 import { BaseInputVisuals } from './BaseInputVisuals.js';
 import { BaseInputWrapper } from './BaseInputWrapper.js';
 import { BaseInputTagSlot } from './BaseInputTagSlot.web.js';
+import { baseInputBorderBackgroundMotion, formHintLeftLabelMarginLeft } from './baseInputTokens.js';
 import '../../Form/index.js';
 import '../../Box/BaseBox/index.js';
 import '../../Box/styledProps/index.js';
@@ -19,14 +21,20 @@ import '../../../utils/makeAccessible/index.js';
 import '../../../utils/logger/index.js';
 import { announce } from '../../LiveAnnouncer/LiveAnnouncer.web.js';
 import '../../../utils/assignWithoutSideEffects/index.js';
+import '../../../utils/getFocusRingStyles/index.js';
+import getIn from '../../../utils/lodashButBetter/get.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { throwBladeError } from '../../../utils/logger/logger.js';
 import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.js';
 import { isReactNative } from '../../../utils/platform/isReactNative.js';
+import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
+import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
+import { getFocusRingStyles } from '../../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
+import { castWebType } from '../../../utils/platform/castUtils.js';
+import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
 import useTheme from '../../BladeProvider/useTheme.js';
 import { useBreakpoint } from '../../../utils/useBreakpoint/useBreakpoint.js';
 import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.web.js';
-import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
 import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
 import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
 import { FormLabel } from '../../Form/FormLabel.js';
@@ -35,7 +43,7 @@ import { makeSize } from '../../../utils/makeSize/makeSize.js';
 import { FormHint } from '../../Form/FormHint.js';
 import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
-var _excluded = ["as", "label", "labelPosition", "placeholder", "type", "defaultValue", "tags", "showAllTags", "activeTagIndex", "setActiveTagIndex", "name", "value", "onFocus", "onChange", "onInput", "onBlur", "onSubmit", "onClick", "onKeyDown", "isDisabled", "necessityIndicator", "validationState", "errorText", "helpText", "successText", "isRequired", "leadingIcon", "prefix", "interactionElement", "suffix", "trailingIcon", "maxCharacters", "textAlign", "autoFocus", "keyboardReturnKeyType", "keyboardType", "autoCompleteSuggestionType", "trailingHeaderSlot", "trailingFooterSlot", "numberOfLines", "id", "componentName", "accessibilityLabel", "labelId", "activeDescendant", "hideLabelText", "hideFormHint", "hasPopup", "popupId", "isPopupExpanded", "maxTagRows", "shouldIgnoreBlurAnimation", "setShouldIgnoreBlurAnimation", "autoCapitalize", "setInputWrapperRef", "testID", "isDropdownTrigger", "isLabelInsideInput"];
+var _excluded = ["as", "label", "labelPosition", "placeholder", "type", "defaultValue", "tags", "showAllTags", "activeTagIndex", "setActiveTagIndex", "name", "value", "onFocus", "onChange", "onInput", "onBlur", "onSubmit", "onClick", "onKeyDown", "isDisabled", "necessityIndicator", "validationState", "errorText", "helpText", "successText", "isRequired", "leadingIcon", "prefix", "interactionElement", "suffix", "trailingIcon", "maxCharacters", "textAlign", "autoFocus", "keyboardReturnKeyType", "keyboardType", "autoCompleteSuggestionType", "trailingHeaderSlot", "trailingFooterSlot", "numberOfLines", "id", "componentName", "accessibilityLabel", "labelId", "activeDescendant", "hideLabelText", "hideFormHint", "hasPopup", "popupId", "isPopupExpanded", "maxTagRows", "shouldIgnoreBlurAnimation", "setShouldIgnoreBlurAnimation", "autoCapitalize", "setInputWrapperRef", "testID", "isDropdownTrigger", "isLabelInsideInput", "size", "trailingButton", "valueComponentType"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var autoCompleteSuggestionTypeValues = ['none', 'on', 'name', 'email', 'username', 'password', 'newPassword', 'oneTimeCode', 'telephone', 'postalCode', 'countryName', 'creditCardNumber', 'creditCardCSC', 'creditCardExpiry', 'creditCardExpiryMonth', 'creditCardExpiryYear'];
@@ -272,71 +280,93 @@ var getDescribedByElementId = function getDescribedByElementId(_ref10) {
   }
   return '';
 };
-var _BaseInput = function _BaseInput(_ref11, ref) {
-  var _ref11$as = _ref11.as,
-    as = _ref11$as === void 0 ? 'input' : _ref11$as,
-    label = _ref11.label,
-    _ref11$labelPosition = _ref11.labelPosition,
-    labelPosition = _ref11$labelPosition === void 0 ? 'top' : _ref11$labelPosition,
-    placeholder = _ref11.placeholder,
-    _ref11$type = _ref11.type,
-    type = _ref11$type === void 0 ? 'text' : _ref11$type,
-    defaultValue = _ref11.defaultValue,
-    tags = _ref11.tags,
-    _ref11$showAllTags = _ref11.showAllTags,
-    showAllTags = _ref11$showAllTags === void 0 ? false : _ref11$showAllTags,
-    _ref11$activeTagIndex = _ref11.activeTagIndex,
-    activeTagIndex = _ref11$activeTagIndex === void 0 ? -1 : _ref11$activeTagIndex,
-    setActiveTagIndex = _ref11.setActiveTagIndex,
-    name = _ref11.name,
-    value = _ref11.value,
-    onFocus = _ref11.onFocus,
-    onChange = _ref11.onChange,
-    onInput = _ref11.onInput,
-    onBlur = _ref11.onBlur,
-    onSubmit = _ref11.onSubmit,
-    onClick = _ref11.onClick,
-    onKeyDown = _ref11.onKeyDown,
-    isDisabled = _ref11.isDisabled,
-    necessityIndicator = _ref11.necessityIndicator,
-    validationState = _ref11.validationState,
-    errorText = _ref11.errorText,
-    helpText = _ref11.helpText,
-    successText = _ref11.successText,
-    isRequired = _ref11.isRequired,
-    leadingIcon = _ref11.leadingIcon,
-    prefix = _ref11.prefix,
-    interactionElement = _ref11.interactionElement,
-    suffix = _ref11.suffix,
-    trailingIcon = _ref11.trailingIcon,
-    maxCharacters = _ref11.maxCharacters,
-    textAlign = _ref11.textAlign,
-    autoFocus = _ref11.autoFocus,
-    keyboardReturnKeyType = _ref11.keyboardReturnKeyType,
-    keyboardType = _ref11.keyboardType,
-    autoCompleteSuggestionType = _ref11.autoCompleteSuggestionType,
-    trailingHeaderSlot = _ref11.trailingHeaderSlot,
-    trailingFooterSlot = _ref11.trailingFooterSlot,
-    numberOfLines = _ref11.numberOfLines,
-    id = _ref11.id,
-    componentName = _ref11.componentName,
-    accessibilityLabel = _ref11.accessibilityLabel,
-    labelId = _ref11.labelId,
-    activeDescendant = _ref11.activeDescendant,
-    hideLabelText = _ref11.hideLabelText,
-    hideFormHint = _ref11.hideFormHint,
-    hasPopup = _ref11.hasPopup,
-    popupId = _ref11.popupId,
-    isPopupExpanded = _ref11.isPopupExpanded,
-    maxTagRows = _ref11.maxTagRows,
-    shouldIgnoreBlurAnimation = _ref11.shouldIgnoreBlurAnimation,
-    setShouldIgnoreBlurAnimation = _ref11.setShouldIgnoreBlurAnimation,
-    autoCapitalize = _ref11.autoCapitalize,
-    setInputWrapperRef = _ref11.setInputWrapperRef,
-    testID = _ref11.testID,
-    isDropdownTrigger = _ref11.isDropdownTrigger,
-    isLabelInsideInput = _ref11.isLabelInsideInput,
-    styledProps = _objectWithoutProperties(_ref11, _excluded);
+var FocusRingWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "BaseInput__FocusRingWrapper",
+  componentId: "sc-177qd3e-0"
+})(function (_ref11) {
+  var theme = _ref11.theme,
+    currentInteraction = _ref11.currentInteraction;
+  return {
+    borderRadius: makeBorderSize(theme.border.radius.medium),
+    width: '100%',
+    '&:focus-within': _objectSpread(_objectSpread({}, getFocusRingStyles({
+      theme: theme
+    })), {}, {
+      transitionDuration: castWebType(makeMotionTime(getIn(theme.motion.duration, baseInputBorderBackgroundMotion[currentInteraction === 'focus' ? 'enter' : 'exit'].duration))),
+      transitionTimingFunction: castWebType(getIn(theme.motion.easing, baseInputBorderBackgroundMotion[currentInteraction === 'focus' ? 'enter' : 'exit'].easing))
+    })
+  };
+});
+var _BaseInput = function _BaseInput(_ref12, ref) {
+  var _ref12$as = _ref12.as,
+    as = _ref12$as === void 0 ? 'input' : _ref12$as,
+    label = _ref12.label,
+    _ref12$labelPosition = _ref12.labelPosition,
+    labelPosition = _ref12$labelPosition === void 0 ? 'top' : _ref12$labelPosition,
+    placeholder = _ref12.placeholder,
+    _ref12$type = _ref12.type,
+    type = _ref12$type === void 0 ? 'text' : _ref12$type,
+    defaultValue = _ref12.defaultValue,
+    tags = _ref12.tags,
+    _ref12$showAllTags = _ref12.showAllTags,
+    showAllTags = _ref12$showAllTags === void 0 ? false : _ref12$showAllTags,
+    _ref12$activeTagIndex = _ref12.activeTagIndex,
+    activeTagIndex = _ref12$activeTagIndex === void 0 ? -1 : _ref12$activeTagIndex,
+    setActiveTagIndex = _ref12.setActiveTagIndex,
+    name = _ref12.name,
+    value = _ref12.value,
+    onFocus = _ref12.onFocus,
+    onChange = _ref12.onChange,
+    onInput = _ref12.onInput,
+    onBlur = _ref12.onBlur,
+    onSubmit = _ref12.onSubmit,
+    onClick = _ref12.onClick,
+    onKeyDown = _ref12.onKeyDown,
+    isDisabled = _ref12.isDisabled,
+    necessityIndicator = _ref12.necessityIndicator,
+    validationState = _ref12.validationState,
+    errorText = _ref12.errorText,
+    helpText = _ref12.helpText,
+    successText = _ref12.successText,
+    isRequired = _ref12.isRequired,
+    leadingIcon = _ref12.leadingIcon,
+    prefix = _ref12.prefix,
+    interactionElement = _ref12.interactionElement,
+    suffix = _ref12.suffix,
+    trailingIcon = _ref12.trailingIcon,
+    maxCharacters = _ref12.maxCharacters,
+    textAlign = _ref12.textAlign,
+    autoFocus = _ref12.autoFocus,
+    keyboardReturnKeyType = _ref12.keyboardReturnKeyType,
+    keyboardType = _ref12.keyboardType,
+    autoCompleteSuggestionType = _ref12.autoCompleteSuggestionType,
+    trailingHeaderSlot = _ref12.trailingHeaderSlot,
+    trailingFooterSlot = _ref12.trailingFooterSlot,
+    numberOfLines = _ref12.numberOfLines,
+    id = _ref12.id,
+    componentName = _ref12.componentName,
+    accessibilityLabel = _ref12.accessibilityLabel,
+    labelId = _ref12.labelId,
+    activeDescendant = _ref12.activeDescendant,
+    hideLabelText = _ref12.hideLabelText,
+    hideFormHint = _ref12.hideFormHint,
+    hasPopup = _ref12.hasPopup,
+    popupId = _ref12.popupId,
+    isPopupExpanded = _ref12.isPopupExpanded,
+    maxTagRows = _ref12.maxTagRows,
+    shouldIgnoreBlurAnimation = _ref12.shouldIgnoreBlurAnimation,
+    setShouldIgnoreBlurAnimation = _ref12.setShouldIgnoreBlurAnimation,
+    autoCapitalize = _ref12.autoCapitalize,
+    setInputWrapperRef = _ref12.setInputWrapperRef,
+    testID = _ref12.testID,
+    isDropdownTrigger = _ref12.isDropdownTrigger,
+    isLabelInsideInput = _ref12.isLabelInsideInput,
+    _ref12$size = _ref12.size,
+    size = _ref12$size === void 0 ? 'medium' : _ref12$size,
+    trailingButton = _ref12.trailingButton,
+    _ref12$valueComponent = _ref12.valueComponentType,
+    valueComponentType = _ref12$valueComponent === void 0 ? 'text' : _ref12$valueComponent,
+    styledProps = _objectWithoutProperties(_ref12, _excluded);
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var inputWrapperRef = React__default.useRef(null);
@@ -351,8 +381,10 @@ var _BaseInput = function _BaseInput(_ref11, ref) {
   React__default.useEffect(function () {
     if (showAllTags) {
       setShowAllTagsWithAnimation(true);
+    } else if (maxTagRows !== 'expandable') {
+      setShowAllTagsWithAnimation(false);
     }
-  }, [showAllTags]);
+  }, [showAllTags, maxTagRows]);
   var _useInput = useInput({
       defaultValue: defaultValue,
       value: value,
@@ -440,105 +472,117 @@ var _BaseInput = function _BaseInput(_ref11, ref) {
           position: labelPosition,
           id: labelId,
           htmlFor: inputId,
+          size: size,
           children: label
         }), trailingHeaderSlot === null || trailingHeaderSlot === void 0 ? void 0 : trailingHeaderSlot(value !== null && value !== void 0 ? value : inputValue)]
-      }), /*#__PURE__*/jsxs(BaseInputWrapper, {
-        isDropdownTrigger: isDropdownTrigger,
-        isTextArea: isTextArea,
-        isDisabled: isDisabled,
-        validationState: validationState,
+      }), /*#__PURE__*/jsx(FocusRingWrapper, {
         currentInteraction: currentInteraction,
-        isLabelLeftPositioned: isLabelLeftPositioned,
-        showAllTags: showAllTags,
-        setShowAllTagsWithAnimation: setShowAllTagsWithAnimation,
-        ref: function ref(refNode) {
-          if (refNode) {
-            setInputWrapperRef === null || setInputWrapperRef === void 0 ? void 0 : setInputWrapperRef(refNode);
-            inputWrapperRef.current = refNode;
-          }
-        },
-        maxTagRows: maxTagRows,
-        children: [/*#__PURE__*/jsx(BaseInputVisuals, {
-          leadingIcon: leadingIcon,
-          prefix: prefix,
-          isDisabled: isDisabled
-        }), /*#__PURE__*/jsx(BaseInputTagSlot, {
-          renderAs: as,
-          tags: tags,
+        children: /*#__PURE__*/jsxs(BaseInputWrapper, {
+          isDropdownTrigger: isDropdownTrigger,
+          isTextArea: isTextArea,
           isDisabled: isDisabled,
-          showAllTags: showAllTagsWithAnimation,
-          setFocusOnInput: function setFocusOnInput() {
-            if (ref && !isReactNative && 'current' in ref) {
-              var _ref$current;
-              (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+          validationState: validationState,
+          currentInteraction: currentInteraction,
+          isLabelLeftPositioned: isLabelLeftPositioned,
+          showAllTags: showAllTags,
+          setShowAllTagsWithAnimation: setShowAllTagsWithAnimation,
+          ref: function ref(refNode) {
+            if (refNode) {
+              setInputWrapperRef === null || setInputWrapperRef === void 0 ? void 0 : setInputWrapperRef(refNode);
+              inputWrapperRef.current = refNode;
             }
           },
-          labelPrefix: isLabelInsideInput ? label : undefined,
-          isDropdownTrigger: isDropdownTrigger,
-          visibleTagsCountRef: visibleTagsCountRef,
-          handleOnInputClick: function handleOnInputClick(e) {
-            handleOnClick({
-              name: name,
-              value: isReactNative ? value : e
-            });
-          },
-          setShouldIgnoreBlurAnimation: setShouldIgnoreBlurAnimation,
           maxTagRows: maxTagRows,
-          inputWrapperRef: inputWrapperRef,
-          children: /*#__PURE__*/jsx(StyledBaseInput, _objectSpread({
-            as: as,
-            id: inputId,
-            ref: ref,
-            name: name,
-            type: type,
-            defaultValue: defaultValue,
-            value: value,
-            placeholder: placeholder,
-            isDisabled: isDisabled,
-            validationState: validationState,
-            isRequired: _isRequired,
-            handleOnFocus: handleOnFocus,
-            handleOnChange: handleOnChange,
-            handleOnBlur: handleOnBlur,
-            handleOnSubmit: handleOnSubmit,
-            handleOnInput: handleOnInput,
-            handleOnKeyDown: handleOnKeyDown,
-            handleOnClick: handleOnClick,
+          size: size,
+          children: [/*#__PURE__*/jsx(BaseInputVisuals, {
+            size: size,
             leadingIcon: leadingIcon,
             prefix: prefix,
+            isDisabled: isDisabled
+          }), /*#__PURE__*/jsx(BaseInputTagSlot, {
+            renderAs: as,
+            tags: tags,
+            isDisabled: isDisabled,
+            showAllTags: showAllTagsWithAnimation,
+            setFocusOnInput: function setFocusOnInput() {
+              if (ref && !isReactNative && 'current' in ref) {
+                var _ref$current;
+                (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+              }
+            },
+            labelPrefix: isLabelInsideInput ? label : undefined,
+            isDropdownTrigger: isDropdownTrigger,
+            visibleTagsCountRef: visibleTagsCountRef,
+            handleOnInputClick: function handleOnInputClick(e) {
+              handleOnClick({
+                name: name,
+                value: isReactNative ? value : e
+              });
+            },
+            setShouldIgnoreBlurAnimation: setShouldIgnoreBlurAnimation,
+            maxTagRows: maxTagRows,
+            inputWrapperRef: inputWrapperRef,
+            size: size,
+            children: /*#__PURE__*/jsx(StyledBaseInput, _objectSpread({
+              as: as,
+              id: inputId,
+              ref: ref,
+              name: name,
+              type: type,
+              defaultValue: defaultValue,
+              value: value,
+              placeholder: placeholder,
+              isDisabled: isDisabled,
+              validationState: validationState,
+              isRequired: _isRequired,
+              handleOnFocus: handleOnFocus,
+              handleOnChange: handleOnChange,
+              handleOnBlur: handleOnBlur,
+              handleOnSubmit: handleOnSubmit,
+              handleOnInput: handleOnInput,
+              handleOnKeyDown: handleOnKeyDown,
+              handleOnClick: handleOnClick,
+              leadingIcon: leadingIcon,
+              prefix: prefix,
+              interactionElement: interactionElement,
+              suffix: suffix,
+              trailingIcon: trailingIcon,
+              maxCharacters: maxCharacters,
+              textAlign: textAlign
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              ,
+              autoFocus: autoFocus,
+              keyboardReturnKeyType: keyboardReturnKeyType,
+              keyboardType: keyboardType,
+              autoCompleteSuggestionType: autoCompleteSuggestionType,
+              accessibilityProps: accessibilityProps,
+              currentInteraction: currentInteraction,
+              setCurrentInteraction: setCurrentInteraction,
+              numberOfLines: numberOfLines,
+              isTextArea: isTextArea || maxTagRows === 'multiple' || maxTagRows === 'expandable',
+              hasPopup: hasPopup,
+              hasTags: !!(tags && tags.length > 0),
+              shouldIgnoreBlurAnimation: shouldIgnoreBlurAnimation,
+              autoCapitalize: autoCapitalize,
+              isDropdownTrigger: isDropdownTrigger,
+              $size: size,
+              valueComponentType: valueComponentType
+            }, metaAttribute({
+              name: MetaConstants.StyledBaseInput
+            })))
+          }), /*#__PURE__*/jsx(BaseInputVisuals, {
             interactionElement: interactionElement,
             suffix: suffix,
             trailingIcon: trailingIcon,
-            maxCharacters: maxCharacters,
-            textAlign: textAlign
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            ,
-            autoFocus: autoFocus,
-            keyboardReturnKeyType: keyboardReturnKeyType,
-            keyboardType: keyboardType,
-            autoCompleteSuggestionType: autoCompleteSuggestionType,
-            accessibilityProps: accessibilityProps,
-            currentInteraction: currentInteraction,
-            setCurrentInteraction: setCurrentInteraction,
-            numberOfLines: numberOfLines,
-            isTextArea: isTextArea || maxTagRows === 'multiple' || maxTagRows === 'expandable',
-            hasPopup: hasPopup,
-            hasTags: !!(tags && tags.length > 0),
-            shouldIgnoreBlurAnimation: shouldIgnoreBlurAnimation,
-            autoCapitalize: autoCapitalize,
-            isDropdownTrigger: isDropdownTrigger
-          }, metaAttribute({
-            name: MetaConstants.StyledBaseInput
-          })))
-        }), /*#__PURE__*/jsx(BaseInputVisuals, {
-          interactionElement: interactionElement,
-          suffix: suffix,
-          trailingIcon: trailingIcon,
-          isDisabled: isDisabled
-        })]
+            isDisabled: isDisabled,
+            validationState: validationState,
+            trailingButton: trailingButton,
+            size: size
+          })]
+        })
       })]
     }), !hideFormHint && /*#__PURE__*/jsx(BaseBox, {
-      marginLeft: makeSize(isLabelLeftPositioned && !hideLabelText ? 136 : 0),
+      marginLeft: makeSize(isLabelLeftPositioned && !hideLabelText ? formHintLeftLabelMarginLeft[size] : 0),
       children: /*#__PURE__*/jsxs(BaseBox, {
         display: "flex",
         flexDirection: "row",
@@ -553,7 +597,8 @@ var _BaseInput = function _BaseInput(_ref11, ref) {
           successText: successText,
           helpTextId: helpTextId,
           errorTextId: errorTextId,
-          successTextId: successTextId
+          successTextId: successTextId,
+          size: size
         }), trailingFooterSlot === null || trailingFooterSlot === void 0 ? void 0 : trailingFooterSlot(value !== null && value !== void 0 ? value : inputValue)]
       })
     })]