@zohodesk/components 1.3.3 → 1.3.4

package/README.md

@@ -2,6 +2,13 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+
+# 1.3.4
+
+- **MultiSelect** -  `renderCustomClearComponent` and `renderCustomToggleIndicator` props supported to customize the clear and toggle indicatior icon.
+- **Select** -  `renderCustomSearchClearComponent` and `renderCustomToggleIndicator` props supported to customize the search input clear and toggle indicatior icon.
+- **TextBoxIcon** -  `renderCustomClearComponent` prop supported to customize the input clear.  
+
 # 1.3.3
 
 - **Stencils**

package/es/MultiSelect/MultiSelect.js

@@ -882,7 +882,10 @@ export class MultiSelectComponent extends React.Component {
       isPopupOpen,
       ariaErrorId,
       customProps,
-      isFocus
+      isFocus,
+      isPopupReady,
+      renderCustomClearComponent,
+      renderCustomToggleIndicator
     } = this.props;
     let {
       isActive,
@@ -964,6 +967,12 @@ export class MultiSelectComponent extends React.Component {
         ariaLabelledby: ariaLabelledby
       },
       autoComplete: autoComplete,
+      renderRightPlaceholderNode: typeof renderCustomToggleIndicator == 'function' ? renderCustomToggleIndicator({
+        togglePopup: this.togglePopup,
+        isPopupOpened: isPopupReady,
+        isReadOnly: isReadOnly,
+        isDisabled: isDisabled
+      }) : renderCustomToggleIndicator,
       ...TextBoxIconProps
     }, /*#__PURE__*/React.createElement(Container, {
       isInline: true,
@@ -971,7 +980,11 @@ export class MultiSelectComponent extends React.Component {
       alignBox: "row",
       align: "vertical",
       className: style.rightPlaceholder
-    }, isShowClearIcon ? /*#__PURE__*/React.createElement(Box, {
+    }, isShowClearIcon ? typeof renderCustomClearComponent === 'function' ? renderCustomClearComponent({
+      clearText,
+      isPopupOpened: isPopupReady,
+      handleClearAll: this.handleDeselectAll
+    }) : /*#__PURE__*/React.createElement(Box, {
       className: `${style.delete} ${style[`${palette}Delete`]}`,
       dataId: `${dataId}_clearIcon`,
       "data-title": clearText,

package/es/MultiSelect/props/propTypes.js

@@ -114,7 +114,9 @@ export const MultiSelect_propTypes = {
     TextBoxIconProps: PropTypes.object
   }),
   isFocus: PropTypes.bool,
-  allowValueFallback: PropTypes.bool
+  allowValueFallback: PropTypes.bool,
+  renderCustomClearComponent: PropTypes.func,
+  renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,

package/es/Select/Select.js

@@ -727,7 +727,9 @@ export class SelectComponent extends Component {
       positionsOffset,
       targetOffset,
       isRestrictScroll,
-      dropBoxPortalId
+      dropBoxPortalId,
+      renderCustomToggleIndicator,
+      renderCustomSearchClearComponent
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -807,14 +809,20 @@ export class SelectComponent extends Component {
           ...TextBoxProps
         }
       },
+      renderRightPlaceholderNode: typeof renderCustomToggleIndicator == 'function' ? renderCustomToggleIndicator({
+        togglePopup: this.togglePopup,
+        isPopupOpened: isPopupReady,
+        isReadOnly: isReadOnly,
+        isDisabled: isDisabled
+      }) : renderCustomToggleIndicator,
       ...TextBoxIconProps
-    }, /*#__PURE__*/React.createElement(Container, {
+    }, !renderCustomToggleIndicator || children ? /*#__PURE__*/React.createElement(Container, {
       isInline: true,
       isCover: false,
       alignBox: "row",
       align: "both",
       className: style.rightPlaceholder
-    }, /*#__PURE__*/React.createElement(Container, {
+    }, !renderCustomToggleIndicator ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       dataId: `${dataId}_downIcon`,
       "aria-hidden": true,
@@ -822,10 +830,10 @@ export class SelectComponent extends Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-down",
       size: "7"
-    })), children ? /*#__PURE__*/React.createElement(Box, {
+    })) : null, children ? /*#__PURE__*/React.createElement(Box, {
       className: isPopupOpen ? style.rotate : '',
       dataId: `${dataId}_children`
-    }, children) : null)) : /*#__PURE__*/React.createElement(Textbox, {
+    }, children) : null) : null) : /*#__PURE__*/React.createElement(Textbox, {
       a11y: {
         role: 'Menuitem',
         ariaLabel: TextBox_ally_label,
@@ -916,7 +924,8 @@ export class SelectComponent extends Component {
         autoComplete: autoComplete,
         customProps: {
           TextBoxProps: DropdownSearchTextBoxProps
-        }
+        },
+        renderCustomClearComponent: renderCustomSearchClearComponent
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',

package/es/Select/props/propTypes.js

@@ -94,7 +94,9 @@ export const Select_propTypes = {
   targetOffset: PropTypes.object,
   isRestrictScroll: PropTypes.bool,
   dropBoxPortalId: PropTypes.string,
-  allowValueFallback: PropTypes.bool
+  allowValueFallback: PropTypes.bool,
+  renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  renderCustomSearchClearComponent: PropTypes.func
 };
 export const GroupSelect_propTypes = {
   groupedOptions: PropTypes.arrayOf(PropTypes.shape({

package/es/TextBoxIcon/TextBoxIcon.js

@@ -109,7 +109,8 @@ export default class TextBoxIcon extends React.Component {
       isScrollPrevent,
       customProps,
       needInputFocusOnWrapperClick,
-      renderRightPlaceholderNode
+      renderRightPlaceholderNode,
+      renderCustomClearComponent
     } = this.props;
     const {
       isActive
@@ -167,7 +168,10 @@ export default class TextBoxIcon extends React.Component {
       className: `${style.iconContainer} ${customTBoxIcon}`
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row"
-    }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? /*#__PURE__*/React.createElement(Box, {
+    }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? typeof renderCustomClearComponent == 'function' ? renderCustomClearComponent({
+      clearText,
+      handleClear: this.handleClear
+    }) : /*#__PURE__*/React.createElement(Box, {
       className: `${btnStyle.buttonReset} ${style.icon}`,
       onClick: this.handleClear,
       dataId: `${dataId}_ClearIcon`,

package/es/TextBoxIcon/props/propTypes.js

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

package/lib/MultiSelect/MultiSelect.js

@@ -963,7 +963,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isPopupOpen = _this$props14.isPopupOpen,
           ariaErrorId = _this$props14.ariaErrorId,
           customProps = _this$props14.customProps,
-          isFocus = _this$props14.isFocus;
+          isFocus = _this$props14.isFocus,
+          isPopupReady = _this$props14.isPopupReady,
+          renderCustomClearComponent = _this$props14.renderCustomClearComponent,
+          renderCustomToggleIndicator = _this$props14.renderCustomToggleIndicator;
       var _this$state8 = this.state,
           isActive = _this$state8.isActive,
           selectedOptions = _this$state8.selectedOptions,
@@ -1039,14 +1042,24 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           ariaDescribedby: ariaErrorId,
           ariaLabelledby: ariaLabelledby
         },
-        autoComplete: autoComplete
+        autoComplete: autoComplete,
+        renderRightPlaceholderNode: typeof renderCustomToggleIndicator == 'function' ? renderCustomToggleIndicator({
+          togglePopup: this.togglePopup,
+          isPopupOpened: isPopupReady,
+          isReadOnly: isReadOnly,
+          isDisabled: isDisabled
+        }) : renderCustomToggleIndicator
       }, TextBoxIconProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isInline: true,
         isCover: false,
         alignBox: "row",
         align: "vertical",
         className: _MultiSelectModule["default"].rightPlaceholder
-      }, isShowClearIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, isShowClearIcon ? typeof renderCustomClearComponent === 'function' ? renderCustomClearComponent({
+        clearText: clearText,
+        isPopupOpened: isPopupReady,
+        handleClearAll: this.handleDeselectAll
+      }) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_MultiSelectModule["default"]["delete"], " ").concat(_MultiSelectModule["default"]["".concat(palette, "Delete")]),
         dataId: "".concat(dataId, "_clearIcon"),
         "data-title": clearText,

package/lib/MultiSelect/props/propTypes.js

@@ -133,7 +133,9 @@ var MultiSelect_propTypes = {
     TextBoxIconProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool,
-  allowValueFallback: _propTypes["default"].bool
+  allowValueFallback: _propTypes["default"].bool,
+  renderCustomClearComponent: _propTypes["default"].func,
+  renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node])
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {

package/lib/Select/Select.js

@@ -776,7 +776,9 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           positionsOffset = _this$props11.positionsOffset,
           targetOffset = _this$props11.targetOffset,
           isRestrictScroll = _this$props11.isRestrictScroll,
-          dropBoxPortalId = _this$props11.dropBoxPortalId;
+          dropBoxPortalId = _this$props11.dropBoxPortalId,
+          renderCustomToggleIndicator = _this$props11.renderCustomToggleIndicator,
+          renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent;
       var _i18nKeys = i18nKeys,
           TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
           _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -854,14 +856,20 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           TextBoxProps: _objectSpread({
             'data-title': title || selected
           }, TextBoxProps)
-        }
-      }, TextBoxIconProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        },
+        renderRightPlaceholderNode: typeof renderCustomToggleIndicator == 'function' ? renderCustomToggleIndicator({
+          togglePopup: this.togglePopup,
+          isPopupOpened: isPopupReady,
+          isReadOnly: isReadOnly,
+          isDisabled: isDisabled
+        }) : renderCustomToggleIndicator
+      }, TextBoxIconProps), !renderCustomToggleIndicator || children ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isInline: true,
         isCover: false,
         alignBox: "row",
         align: "both",
         className: _SelectModule["default"].rightPlaceholder
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }, !renderCustomToggleIndicator ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
         dataId: "".concat(dataId, "_downIcon"),
         "aria-hidden": true,
@@ -869,10 +877,10 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-down",
         size: "7"
-      })), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      })) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: isPopupOpen ? _SelectModule["default"].rotate : '',
         dataId: "".concat(dataId, "_children")
-      }, children) : null)) : /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
+      }, children) : null) : null) : /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
         a11y: {
           role: 'Menuitem',
           ariaLabel: TextBox_ally_label,
@@ -960,7 +968,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           autoComplete: autoComplete,
           customProps: {
             TextBoxProps: DropdownSearchTextBoxProps
-          }
+          },
+          renderCustomClearComponent: renderCustomSearchClearComponent
         }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
           customClass: !tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',

package/lib/Select/props/propTypes.js

@@ -110,7 +110,9 @@ var Select_propTypes = {
   targetOffset: _propTypes["default"].object,
   isRestrictScroll: _propTypes["default"].bool,
   dropBoxPortalId: _propTypes["default"].string,
-  allowValueFallback: _propTypes["default"].bool
+  allowValueFallback: _propTypes["default"].bool,
+  renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
+  renderCustomSearchClearComponent: _propTypes["default"].func
 };
 exports.Select_propTypes = Select_propTypes;
 var GroupSelect_propTypes = {

package/lib/TextBoxIcon/TextBoxIcon.js

@@ -158,7 +158,8 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
           isScrollPrevent = _this$props2.isScrollPrevent,
           customProps = _this$props2.customProps,
           needInputFocusOnWrapperClick = _this$props2.needInputFocusOnWrapperClick,
-          renderRightPlaceholderNode = _this$props2.renderRightPlaceholderNode;
+          renderRightPlaceholderNode = _this$props2.renderRightPlaceholderNode,
+          renderCustomClearComponent = _this$props2.renderCustomClearComponent;
       var isActive = this.state.isActive;
       var _customClass$customTB = customClass.customTBoxWrap,
           customTBoxWrap = _customClass$customTB === void 0 ? '' : _customClass$customTB,
@@ -213,7 +214,10 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_TextBoxIconModule["default"].iconContainer, " ").concat(customTBoxIcon)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row"
-      }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? typeof renderCustomClearComponent == 'function' ? renderCustomClearComponent({
+        clearText: clearText,
+        handleClear: this.handleClear
+      }) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_TextBoxIconModule["default"].icon),
         onClick: this.handleClear,
         dataId: "".concat(dataId, "_ClearIcon"),

package/lib/TextBoxIcon/props/propTypes.js

@@ -67,7 +67,8 @@ var propTypes = _objectSpread(_objectSpread({}, _propTypes2.propTypes), {}, {
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object
   }),
-  renderRightPlaceholderNode: _propTypes["default"].node
+  renderRightPlaceholderNode: _propTypes["default"].node,
+  renderCustomClearComponent: _propTypes["default"].func
 });
 
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,