@zohodesk/components 1.0.0-temp-230.1 → 1.0.0-temp-234

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

@@ -30,10 +30,10 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input iconSelect  flex rowdir"
-            data-id="selectWithIcon_textBox"
+            class="container effect  input iconSelect  flex rowdir"
+            data-id="containerComponent"
             data-selector-id="textBoxIcon"
-            data-test-id="selectWithIcon_textBox"
+            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -96,6 +96,9 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              class="line borderColor_default "
+            />
           </div>
         </div>
       </div>

package/lib/Select/props/defaultProps.js

@@ -18,6 +18,7 @@ var Select_defaultProps = {
   dataId: 'selectComponent',
   dataSelectorId: 'select',
   dropBoxSize: 'small',
+  isVirtualizerEnabled: false,
   isDefaultSelectValue: true,
   isDisabled: false,
   isPopupOpenOnEnter: false,
@@ -111,6 +112,7 @@ var SelectWithAvatar_defaultProps = {
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
   i18nKeys: {},
+  customProps: {},
   needEffect: true,
   isLoading: false
 };

package/lib/Select/props/propTypes.js

@@ -28,6 +28,7 @@ var Select_propTypes = {
   defaultDropBoxPosition: _propTypes["default"].string,
   dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
   emptyMessage: _propTypes["default"].string,
+  isVirtualizerEnabled: _propTypes["default"].bool,
   excludeOptions: _propTypes["default"].array,
   getChildren: _propTypes["default"].func,
   getContainerRef: _propTypes["default"].func,
@@ -79,6 +80,8 @@ var Select_propTypes = {
   searchBoxSize: _propTypes["default"].string,
   searchDebounceTime: _propTypes["default"].number,
   searchEmptyMessage: _propTypes["default"].string,
+  searchFields: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  secondaryField: _propTypes["default"].string,
   selectedValue: _propTypes["default"].oneOfType([_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]), _propTypes["default"].shape({
     id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
@@ -112,8 +115,7 @@ var Select_propTypes = {
   dropBoxPortalId: _propTypes["default"].string,
   allowValueFallback: _propTypes["default"].bool,
   renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
-  renderCustomSearchClearComponent: _propTypes["default"].func,
-  renderCustomSelectedValue: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node])
+  renderCustomSearchClearComponent: _propTypes["default"].func
 };
 exports.Select_propTypes = Select_propTypes;
 var GroupSelect_propTypes = {
@@ -138,6 +140,7 @@ var GroupSelect_propTypes = {
   searchBoxPlaceHolder: _propTypes["default"].string,
   needSearch: _propTypes["default"].bool,
   searchEmptyMessage: _propTypes["default"].string,
+  secondaryField: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   isDisabled: _propTypes["default"].bool,
   isReadOnly: _propTypes["default"].bool,
@@ -303,6 +306,7 @@ var SelectWithIcon_propTypes = {
   removeClose: _propTypes["default"].func,
   searchBoxPlaceHolder: _propTypes["default"].string,
   searchEmptyMessage: _propTypes["default"].string,
+  secondaryValueKey: _propTypes["default"].string,
   selectedId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   selectedValue: _propTypes["default"].string,
   size: _propTypes["default"].oneOf(['small', 'medium']),
@@ -327,6 +331,7 @@ var SelectWithIcon_propTypes = {
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object,
     DropdownSearchTextBoxProps: _propTypes["default"].object,
+    SuggestionsProps: _propTypes["default"].object,
     TextBoxIconProps: _propTypes["default"].object
   })
 };

package/lib/TextBoxIcon/TextBoxIcon.js

@@ -17,8 +17,6 @@ var _TextBox = _interopRequireDefault(require("../TextBox/TextBox"));
 
 var _Layout = require("../Layout");
 
-var _InputFieldLine = _interopRequireDefault(require("../shared/InputFieldLine/InputFieldLine"));
-
 var _icons = require("@zohodesk/icons");
 
 var _semanticButtonModule = _interopRequireDefault(require("../semantic/Button/semanticButton.module.css"));
@@ -168,25 +166,20 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
           _customClass$customTe = customClass.customTextBox,
           customTextBox = _customClass$customTe === void 0 ? '' : _customClass$customTe,
           _customClass$customTB2 = customClass.customTBoxIcon,
-          customTBoxIcon = _customClass$customTB2 === void 0 ? '' : _customClass$customTB2;
+          customTBoxIcon = _customClass$customTB2 === void 0 ? '' : _customClass$customTB2,
+          _customClass$customTB3 = customClass.customTBoxLine,
+          customTBoxLine = _customClass$customTB3 === void 0 ? '' : _customClass$customTB3;
       var _i18nKeys$clearText = i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear' : _i18nKeys$clearText;
       var _customProps$TextBoxP = customProps.TextBoxProps,
           TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP;
-      return /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
-        isActive: isActive || isFocus,
-        border: needBorder ? 'bottom' : 'none',
-        size: size,
-        borderColor: borderColor,
-        hasEffect: needEffect,
-        isDisabled: isDisabled,
-        isReadOnly: isReadOnly && needReadOnlyStyle,
-        customClass: " ".concat(_TextBoxIconModule["default"].container, " ").concat(customTBoxWrap, " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverStyle : ''),
-        title: isDisabled ? title : null,
-        onClick: needInputFocusOnWrapperClick && !isDisabled ? this.handleInputFocusOnClick : null,
-        customProps: {
-          dataSelectorId: dataSelectorId
-        }
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "row",
+        isCover: false,
+        className: "".concat(_TextBoxIconModule["default"].container, " ").concat(isDisabled ? _TextBoxIconModule["default"].disabled : isReadOnly ? needEffect ? _TextBoxIconModule["default"].effect : _TextBoxIconModule["default"].readonly : _TextBoxIconModule["default"].effect, " ").concat(isActive || isFocus ? _TextBoxIconModule["default"].effectFocused : '', " ").concat(customTBoxWrap, " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverStyle : ''),
+        dataSelectorId: dataSelectorId,
+        "data-title": isDisabled ? title : null,
+        onClick: needInputFocusOnWrapperClick && !isDisabled ? this.handleInputFocusOnClick : null
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], _extends({}, this.props, {
@@ -239,7 +232,9 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
         size: "14"
       }))) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_TextBoxIconModule["default"].icon, " ").concat(iconRotated ? _TextBoxIconModule["default"].rotated : '')
-      }, children) : null, renderRightPlaceholderNode ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, renderRightPlaceholderNode) : null)));
+      }, children) : null, renderRightPlaceholderNode ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, renderRightPlaceholderNode) : null)), needBorder && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(_TextBoxIconModule["default"].line, " ").concat(_TextBoxIconModule["default"]["borderColor_".concat(borderColor)], " ").concat(customTBoxLine)
+      }));
     }
   }]);
 

package/lib/TextBoxIcon/TextBoxIcon.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* textboxicon default variables */
-  --textboxicon_line_height: 1px;
+  --textboxicon_line_height: var(--zd_size1);
   --textboxicon_line_color: var(--zdt_textboxicon_default_line_bg);
 
   /* textboxicon icon default variables */
@@ -11,12 +11,13 @@
 .container {
   composes: varClass;
   position: relative;
-  --local_inputFieldLine_border_width: var(--textboxicon_line_height);
-  --local_inputFieldLine_border_color: var(--textboxicon_line_color);
 }
 .disabled,.readonly {
   --textboxicon_icon_cursor: not-allowed;
 }
+.disabled, .readonly {
+  cursor: not-allowed;
+}
 .icon {
   composes: offSelection from '../common/common.module.css';
   margin: var(--textboxicon_icon_margin);
@@ -32,6 +33,40 @@
 .rotated {
   transform: rotateX(180deg);
 }
+.line {
+  position: absolute;
+  bottom: 0 ;
+  /*  Variable:Ignore  */
+  min-height: 1px;
+  transition: var(--zd_transition2);
+  height: var(--textboxicon_line_height);
+  transform: perspective(1px);
+}
+[dir=ltr] .line {
+  left: 0 ;
+  right: 0 ;
+}
+[dir=rtl] .line {
+  right: 0 ;
+  left: 0 ;
+}
+.line, .borderColor_default {
+  background-color: var(--textboxicon_line_color);
+}
+.borderColor_transparent {
+  --textboxicon_line_color: var(--zdt_textboxicon_transparent_line_bg);
+}
+.effect:hover .line {
+  --textboxicon_line_color: var(--zdt_textboxicon_hover_line_bg);
+}
+.effectFocused .line,
+.effectFocused:hover .line {
+  --textboxicon_line_color: var(--zdt_textboxicon_focus_line_bg);
+}
+.borderColor_error,
+.effect:hover .borderColor_error {
+  --textboxicon_line_color: var(--zdt_textboxicon_error_line_bg);
+}
 .iconOnHoverStyle .icon,
 .iconOnHoverReadonly .icon,
 .iconOnHoverReadonly:hover .icon {

package/lib/TextBoxIcon/__tests__/TextBoxIcon.spec.js

@@ -240,7 +240,8 @@ describe('TextBoxIcon component', function () {
       customClass: {
         customTBoxWrap: 'customTBoxWrapTextBoxIcon',
         customTextBox: 'customTextBoxTextBoxIcon',
-        customTBoxIcon: 'customTBoxIconTextBox'
+        customTBoxIcon: 'customTBoxIconTextBox',
+        customTBoxLine: 'customTBoxLineTextBox'
       }
     })),
         asFragment = _render27.asFragment;