@zohodesk/components 1.2.37 → 1.2.38

package/README.md

@@ -32,6 +32,20 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.38
+
+- **renderRightPlaceholderNode**
+- renderRightPlaceholderNode support given for `CheckBox` `Textarea` `Select` `MultiSelect`  `TextBoxIcon`.
+- Json File Import Changed to JS modules in `Popup/PositionMapping` `DropBox/DropBoxPositionMapping`. 
+- **DateWidget** 
+- TextBoxIconProps key supported in customProps prop
+- **MultiSelect**
+- customProps prop added and TextBoxIconProps customization given (Prop Spreaded).
+- **Select**
+- TextBoxIconProps key supported in customProps prop
+- **SelectWithIcon**
+- customProps prop added and tooltip supported for dotted case
+
 # 1.2.37
 
 - **Tabs** 

package/es/CheckBox/CheckBox.js

@@ -52,7 +52,8 @@ export default class CheckBox extends React.Component {
       a11y,
       customClass,
       customProps,
-      dataSelectorId
+      dataSelectorId,
+      renderRightPlaceholderNode
     } = this.props;
     let {
       CheckBoxProps = {},
@@ -157,7 +158,7 @@ export default class CheckBox extends React.Component {
                             ${accessMode} ${customLabel}`,
       title: toolTip ? toolTip : text,
       ...LabelProps
-    })));
+    })), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
   }
 
 }

package/es/CheckBox/props/propTypes.js

@@ -37,5 +37,6 @@ export const propTypes = {
   customProps: PropTypes.shape({
     CheckBoxProps: PropTypes.object,
     LabelProps: PropTypes.object
-  })
+  }),
+  renderRightPlaceholderNode: PropTypes.node
 };

package/es/DateTime/DateWidget.js

@@ -1008,7 +1008,8 @@ class DateWidgetComponent extends React.Component {
     } = this.props;
     const {
       DateTimeProps = {},
-      TextBoxProps = {}
+      TextBoxProps = {},
+      TextBoxIconProps = {}
     } = customProps;
     const {
       selected: value = '',
@@ -1062,11 +1063,15 @@ class DateWidgetComponent extends React.Component {
       isFocus: isPopupReady,
       autoComplete: false,
       a11y: a11y,
-      customProps: TextBoxProps
+      customProps: TextBoxProps,
+      ...TextBoxIconProps
     }, /*#__PURE__*/React.createElement(Container, {
+      isInline: true,
       align: "both",
+      isCover: false,
       onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick,
-      dataId: `${dataId}_datePicker`
+      dataId: `${dataId}_datePicker`,
+      className: style.datePickIcon
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-datepicker",
       size: "12"

package/es/DateTime/DateWidget.module.css

@@ -3,6 +3,7 @@
   position: relative;
   composes: offSelection from '../common/common.module.css';
 }
+.datePickIcon{height:100% }
 .readOnly, .readOnly > input, .disabled {
   cursor: not-allowed;
 }

package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap

@@ -670,7 +670,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="flex cover rowdir both"
+                          class="rightPlaceholder inflex rowdir both"
                           data-id="containerComponent"
                           data-selector-id="container"
                           data-test-id="containerComponent"
@@ -770,7 +770,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="flex cover rowdir both"
+                          class="rightPlaceholder inflex rowdir both"
                           data-id="containerComponent"
                           data-selector-id="container"
                           data-test-id="containerComponent"
@@ -870,7 +870,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="flex cover rowdir both"
+                          class="rightPlaceholder inflex rowdir both"
                           data-id="containerComponent"
                           data-selector-id="container"
                           data-test-id="containerComponent"

package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -52,7 +52,7 @@ exports[`DateWidget rendering the defult props 1`] = `
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover coldir both"
+                class="datePickIcon inflex coldir both"
                 data-id="dateWidget_datePicker"
                 data-selector-id="container"
                 data-test-id="dateWidget_datePicker"

package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -77,7 +77,7 @@ exports[`Time rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
@@ -175,7 +175,7 @@ exports[`Time rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
@@ -273,7 +273,7 @@ exports[`Time rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import useDropboxPosCalc from "./useDropboxPosCalc";
 import cssJSLogic from "./css/cssJSLogic";
-import { positionMapping } from "../DropBoxPositionMapping.json";
+import { positionMapping } from "../DropBoxPositionMapping.js";
 import { DropBoxElementDefaultProps } from "./props/defaultProps";
 import { DropBoxElementPropTypes } from "./props/propTypes";
 import { mergeStyle } from '@zohodesk/utils';

package/es/DropBox/DropBoxPositionMapping.js

@@ -0,0 +1,142 @@
+export const positionMapping = {
+  "bottomCenter": {
+    "direction": "bottom",
+    "arrowPosition": "mid",
+    "positionStyle": "bottomMid"
+  },
+  "bottomLeftToRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomCenterToRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomRightToLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "bottomCenterToLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "topCenter": {
+    "direction": "top",
+    "arrowPosition": "mid",
+    "positionStyle": "topMid"
+  },
+  "topLeftToRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topCenterToRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topRightToLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "topCenterToLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "rightCenter": {
+    "direction": "right",
+    "arrowPosition": "mid",
+    "positionStyle": "rightMid"
+  },
+  "rightTopToBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightCenterToBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightBottomToTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "rightCenterToTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "leftCenter": {
+    "direction": "left",
+    "arrowPosition": "mid",
+    "positionStyle": "leftMid"
+  },
+  "leftTopToBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftCenterToBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftBottomToTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  },
+  "leftCenterToTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  },
+  "bottomRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "topRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "rightBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "leftBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  }
+};

package/es/MultiSelect/MultiSelect.js

@@ -864,7 +864,8 @@ export class MultiSelectComponent extends React.Component {
       dataId,
       setAriaId,
       isPopupOpen,
-      ariaErrorId
+      ariaErrorId,
+      customProps
     } = this.props;
     let {
       isActive,
@@ -886,6 +887,9 @@ export class MultiSelectComponent extends React.Component {
       disabledOptions
     });
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
+    let {
+      TextBoxIconProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
@@ -941,10 +945,14 @@ export class MultiSelectComponent extends React.Component {
         ariaDescribedby: ariaErrorId,
         ariaLabelledby: ariaLabelledby
       },
-      autoComplete: autoComplete
+      autoComplete: autoComplete,
+      ...TextBoxIconProps
     }, /*#__PURE__*/React.createElement(Container, {
+      isInline: true,
+      isCover: false,
       alignBox: "row",
-      align: "vertical"
+      align: "vertical",
+      className: style.rightPlaceholder
     }, isShowClearIcon ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.delete} ${style[`${palette}Delete`]}`,
       dataId: `${dataId}_clearIcon`,

package/es/MultiSelect/MultiSelect.module.css

@@ -202,3 +202,7 @@
   background-color: var(--zdt_multiselect_delete_bg);
   border: 0;
 }
+
+.rightPlaceholder{
+  height: 100% ;
+}

package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap

@@ -70,7 +70,7 @@ exports[`MultiSelect rendering the defult props 1`] = `
                 data-test-id="boxComponent"
               >
                 <div
-                  class="flex cover rowdir vCenter"
+                  class="rightPlaceholder inflex rowdir vCenter"
                   data-id="containerComponent"
                   data-selector-id="container"
                   data-test-id="containerComponent"

package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap

@@ -69,7 +69,7 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
                 data-test-id="boxComponent"
               >
                 <div
-                  class="flex cover rowdir vCenter"
+                  class="rightPlaceholder inflex rowdir vCenter"
                   data-id="containerComponent"
                   data-selector-id="container"
                   data-test-id="containerComponent"

package/es/MultiSelect/props/defaultProps.js

@@ -111,7 +111,8 @@ export const MultiSelect_defaultProps = {
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
   cardHeaderName: '',
-  needResponsive: true
+  needResponsive: true,
+  customProps: {}
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'

package/es/MultiSelect/props/propTypes.js

@@ -104,7 +104,10 @@ export const MultiSelect_propTypes = {
   needSelectAll: PropTypes.bool,
   selectAllText: PropTypes.string,
   setAriaId: PropTypes.string,
-  ariaErrorId: PropTypes.string
+  ariaErrorId: PropTypes.string,
+  customProps: PropTypes.shape({
+    TextBoxIconProps: PropTypes.object
+  })
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,

package/es/Popup/Popup.js

@@ -6,7 +6,7 @@ import hoistStatics from 'hoist-non-react-statics';
 
 import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from "../utils/Common.js";
 import viewPort from "./viewPort";
-import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from "./PositionMapping.json";
+import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from "./PositionMapping.js";
 import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
 let lastOpenedGroup = [];
 let popups = {};

package/es/Popup/PositionMapping.js

@@ -0,0 +1,72 @@
+export const absolutePositionMapping = {
+  "bottomCenter": "bottomCenter",
+  "bottomRight": "bottomLeftToRight",
+  "bottomLeft": "bottomRightToLeft",
+  "topCenter": "topCenter",
+  "topRight": "topLeftToRight",
+  "topLeft": "topRightToLeft",
+  "rightCenter": "rightCenter",
+  "rightBottom": "rightTopToBottom",
+  "rightTop": "rightBottomToTop",
+  "leftCenter": "leftCenter",
+  "leftBottom": "leftTopToBottom",
+  "leftTop": "leftBottomToTop",
+  "bottomLeftToRight": "bottomLeftToRight",
+  "bottomRightToLeft": "bottomRightToLeft",
+  "topLeftToRight": "topLeftToRight",
+  "topRightToLeft": "topRightToLeft",
+  "rightTopToBottom": "rightTopToBottom",
+  "rightBottomToTop": "rightBottomToTop",
+  "leftTopToBottom": "leftTopToBottom"
+};
+export const rtlAbsolutePositionMapping = {
+  "bottomCenter": "bottomCenter",
+  "bottomRight": "bottomRightToLeft",
+  "bottomLeft": "bottomLeftToRight",
+  "topCenter": "topCenter",
+  "topRight": "topRightToLeft",
+  "topLeft": "topLeftToRight",
+  "rightCenter": "leftCenter",
+  "rightBottom": "leftTopToBottom",
+  "rightTop": "leftBottomToTop",
+  "leftCenter": "rightCenter",
+  "leftBottom": "rightTopToBottom",
+  "leftTop": "rightBottomToTop",
+  "bottomLeftToRight": "bottomLeftToRight",
+  "bottomRightToLeft": "bottomRightToLeft",
+  "topLeftToRight": "topLeftToRight",
+  "topRightToLeft": "topRightToLeft",
+  "rightTopToBottom": "rightTopToBottom",
+  "rightBottomToTop": "rightBottomToTop",
+  "leftTopToBottom": "leftTopToBottom"
+};
+export const rtlFixedPositionMapping = {
+  "bottomCenter": "bottomCenter",
+  "bottomLeftToRight": "bottomRightToLeft",
+  "bottomCenterToRight": "bottomCenterToLeft",
+  "bottomRightToLeft": "bottomLeftToRight",
+  "bottomCenterToLeft": "bottomCenterToRight",
+  "topCenter": "topCenter",
+  "topLeftToRight": "topRightToLeft",
+  "topCenterToRight": "topCenterToLeft",
+  "topRightToLeft": "topLeftToRight",
+  "topCenterToLeft": "topCenterToRight",
+  "rightTopToBottom": "leftTopToBottom",
+  "rightCenterToBottom": "leftCenterToBottom",
+  "rightCenter": "leftCenter",
+  "rightBottomToTop": "leftBottomToTop",
+  "rightCenterToTop": "leftCenterToTop",
+  "leftTopToBottom": "rightTopToBottom",
+  "leftCenterToBottom": "rightCenterToBottom",
+  "leftCenter": "rightCenter",
+  "leftBottomToTop": "rightBottomToTop",
+  "leftCenterToTop": "rightCenterToTop",
+  "bottomRight": "bottomLeft",
+  "bottomLeft": "bottomRight",
+  "topRight": "topLeft",
+  "topLeft": "topRight",
+  "rightBottom": "leftBottom",
+  "rightTop": "leftTop",
+  "leftBottom": "rightBottom",
+  "leftTop": "rightTop"
+};

package/es/Select/Select.js

@@ -749,7 +749,8 @@ export class SelectComponent extends Component {
     let {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
-      SuggestionsProps = {}
+      SuggestionsProps = {},
+      TextBoxIconProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${isParentBased || isReadOnly || isDisabled ? style.container : ''} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
@@ -803,14 +804,15 @@ export class SelectComponent extends Component {
           'data-title': title || selected,
           ...TextBoxProps
         }
-      }
+      },
+      ...TextBoxIconProps
     }, /*#__PURE__*/React.createElement(Container, {
+      isInline: true,
+      isCover: false,
       alignBox: "row",
-      align: "both"
-    }, children ? /*#__PURE__*/React.createElement(Box, {
-      className: isPopupOpen ? style.rotate : '',
-      dataId: `${dataId}_children`
-    }, children) : null, /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: style.rightPlaceholder
+    }, /*#__PURE__*/React.createElement(Container, {
       align: "both",
       dataId: `${dataId}_downIcon`,
       "aria-hidden": true,
@@ -818,7 +820,10 @@ export class SelectComponent extends Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-down",
       size: "7"
-    })))) : /*#__PURE__*/React.createElement(Textbox, {
+    })), children ? /*#__PURE__*/React.createElement(Box, {
+      className: isPopupOpen ? style.rotate : '',
+      dataId: `${dataId}_children`
+    }, children) : null)) : /*#__PURE__*/React.createElement(Textbox, {
       a11y: {
         role: 'Menuitem',
         ariaLabel: TextBox_ally_label,

package/es/Select/Select.module.css

@@ -117,6 +117,9 @@
 .rotate {
   transform: rotateX(180deg);
 }
+.rightPlaceholder{
+  height: 100% ;
+}
 
 .iconOnHoverStyle .arrowIcon,
 .iconOnHoverReadonly .arrowIcon,

package/es/Select/SelectWithIcon.js

@@ -345,7 +345,8 @@ class SelectWithIcon extends Component {
       i18nKeys,
       htmlId,
       isLoading,
-      dataSelectorId
+      dataSelectorId,
+      customProps
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -359,6 +360,11 @@ class SelectWithIcon extends Component {
     } = this.state;
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
+    let {
+      TextBoxProps = {},
+      DropdownSearchTextBoxProps = {},
+      TextBoxIconProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
       "data-title": isDisabled ? title : null,
@@ -413,10 +419,21 @@ class SelectWithIcon extends Component {
       needEffect: isReadOnly || isDisabled ? false : true,
       borderColor: borderColor,
       autoComplete: false,
-      isFocus: isPopupReady
+      isFocus: isPopupReady,
+      customProps: {
+        TextBoxProps: {
+          'data-title': title || selectedValue,
+          ...TextBoxProps
+        }
+      },
+      ...TextBoxIconProps
     }, /*#__PURE__*/React.createElement(Container, {
+      isInline: true,
+      isCover: false,
       align: "both",
-      dataId: `${dataId}_downIcon`
+      dataId: `${dataId}_downIcon`,
+      alignBox: "both",
+      className: style.rightPlaceholder
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-down",
       size: "7"
@@ -467,7 +484,10 @@ class SelectWithIcon extends Component {
         a11y: {
           ariaDescribedby: ariaErrorId
         },
-        autoComplete: false
+        autoComplete: false,
+        customProps: {
+          TextBoxProps: DropdownSearchTextBoxProps
+        }
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         customClass: `${tabletMode ? style.responsivedropBoxList : style.dropBoxList} ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''}`,
         shrink: true,

package/es/Select/__tests__/__snapshots__/Select.spec.js.snap

@@ -62,7 +62,7 @@ exports[`Select rendering the defult props 1`] = `
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir both"
+                class="rightPlaceholder inflex rowdir both"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"

package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap

@@ -79,7 +79,7 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover coldir both"
+                    class="rightPlaceholder inflex both"
                     data-id="selectWithIcon_downIcon"
                     data-selector-id="container"
                     data-test-id="selectWithIcon_downIcon"

package/es/Select/props/defaultProps.js

@@ -116,5 +116,6 @@ export const SelectWithIcon_defaultProps = {
   needIcon: true,
   iconSize: '14',
   i18nKeys: {},
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };

package/es/Select/props/propTypes.js

@@ -284,5 +284,10 @@ export const SelectWithIcon_propTypes = {
   searchBoxSize: PropTypes.string,
   needResponsive: PropTypes.bool,
   boxSize: PropTypes.string,
-  emptyMessage: PropTypes.string
+  emptyMessage: PropTypes.string,
+  customProps: PropTypes.shape({
+    TextBoxProps: PropTypes.object,
+    DropdownSearchTextBoxProps: PropTypes.object,
+    TextBoxIconProps: PropTypes.object
+  })
 };

package/es/TextBoxIcon/TextBoxIcon.js

@@ -100,7 +100,8 @@ export default class TextBoxIcon extends React.Component {
       isFocus,
       onClearMouseDown,
       isScrollPrevent,
-      customProps
+      customProps,
+      renderRightPlaceholderNode
     } = this.props;
     const {
       isActive
@@ -172,7 +173,7 @@ export default class TextBoxIcon extends React.Component {
       size: "14"
     }))) : null, children ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.icon} ${iconRotated ? style.rotated : ''}`
-    }, children) : null)), needBorder && /*#__PURE__*/React.createElement("div", {
+    }, children) : null, renderRightPlaceholderNode ? /*#__PURE__*/React.createElement(Box, null, renderRightPlaceholderNode) : null)), needBorder && /*#__PURE__*/React.createElement("div", {
       className: `${style.line} ${style[`borderColor_${borderColor}`]} ${customTBoxLine}`
     }));
   }

package/es/TextBoxIcon/props/propTypes.js

@@ -48,5 +48,6 @@ export const propTypes = { ...TextBox_propTypes,
   isScrollPrevent: PropTypes.bool,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object
-  })
+  }),
+  renderRightPlaceholderNode: PropTypes.node
 };