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

package/es/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/es/Select/props/defaultProps.js

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

package/es/Select/props/propTypes.js

@@ -12,6 +12,7 @@ export const Select_propTypes = {
   defaultDropBoxPosition: PropTypes.string,
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
   emptyMessage: PropTypes.string,
+  isVirtualizerEnabled: PropTypes.bool,
   excludeOptions: PropTypes.array,
   getChildren: PropTypes.func,
   getContainerRef: PropTypes.func,
@@ -63,6 +64,8 @@ export const Select_propTypes = {
   searchBoxSize: PropTypes.string,
   searchDebounceTime: PropTypes.number,
   searchEmptyMessage: PropTypes.string,
+  searchFields: PropTypes.arrayOf(PropTypes.string),
+  secondaryField: PropTypes.string,
   selectedValue: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string, PropTypes.number]), PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
@@ -96,8 +99,7 @@ export const Select_propTypes = {
   dropBoxPortalId: PropTypes.string,
   allowValueFallback: PropTypes.bool,
   renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  renderCustomSearchClearComponent: PropTypes.func,
-  renderCustomSelectedValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
+  renderCustomSearchClearComponent: PropTypes.func
 };
 export const GroupSelect_propTypes = {
   groupedOptions: PropTypes.arrayOf(PropTypes.shape({
@@ -121,6 +123,7 @@ export const GroupSelect_propTypes = {
   searchBoxPlaceHolder: PropTypes.string,
   needSearch: PropTypes.bool,
   searchEmptyMessage: PropTypes.string,
+  secondaryField: PropTypes.string,
   getRef: PropTypes.func,
   isDisabled: PropTypes.bool,
   isReadOnly: PropTypes.bool,
@@ -282,6 +285,7 @@ export const SelectWithIcon_propTypes = {
   removeClose: PropTypes.func,
   searchBoxPlaceHolder: PropTypes.string,
   searchEmptyMessage: PropTypes.string,
+  secondaryValueKey: PropTypes.string,
   selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   selectedValue: PropTypes.string,
   size: PropTypes.oneOf(['small', 'medium']),
@@ -306,6 +310,7 @@ export const SelectWithIcon_propTypes = {
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,
+    SuggestionsProps: PropTypes.object,
     TextBoxIconProps: PropTypes.object
   })
 };

package/es/TextBoxIcon/TextBoxIcon.js

@@ -3,7 +3,6 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import TextBox from "../TextBox/TextBox";
 import { Container, Box } from "../Layout";
-import InputFieldLine from "../shared/InputFieldLine/InputFieldLine";
 import { Icon } from '@zohodesk/icons';
 import btnStyle from "../semantic/Button/semanticButton.module.css";
 import style from "./TextBoxIcon.module.css";
@@ -119,7 +118,8 @@ export default class TextBoxIcon extends React.Component {
     const {
       customTBoxWrap = '',
       customTextBox = '',
-      customTBoxIcon = ''
+      customTBoxIcon = '',
+      customTBoxLine = ''
     } = customClass;
     const {
       clearText = 'Clear'
@@ -127,20 +127,13 @@ export default class TextBoxIcon extends React.Component {
     let {
       TextBoxProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement(InputFieldLine, {
-      isActive: isActive || isFocus,
-      border: needBorder ? 'bottom' : 'none',
-      size: size,
-      borderColor: borderColor,
-      hasEffect: needEffect,
-      isDisabled: isDisabled,
-      isReadOnly: isReadOnly && needReadOnlyStyle,
-      customClass: ` ${style.container} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
-      title: isDisabled ? title : null,
-      onClick: needInputFocusOnWrapperClick && !isDisabled ? this.handleInputFocusOnClick : null,
-      customProps: {
-        dataSelectorId: dataSelectorId
-      }
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      isCover: false,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : style.readonly : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
+      dataSelectorId: dataSelectorId,
+      "data-title": isDisabled ? title : null,
+      onClick: needInputFocusOnWrapperClick && !isDisabled ? this.handleInputFocusOnClick : null
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(TextBox, { ...this.props,
@@ -193,7 +186,9 @@ export default class TextBoxIcon extends React.Component {
       size: "14"
     }))) : null, children ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.icon} ${iconRotated ? style.rotated : ''}`
-    }, children) : null, renderRightPlaceholderNode ? /*#__PURE__*/React.createElement(Box, null, renderRightPlaceholderNode) : null)));
+    }, 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/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/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js

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