@zohodesk/components 1.0.0-temp-220.11 → 1.0.0-temp-230

package/es/Select/ArrowIcon/ArrowIcon.module.css

@@ -0,0 +1,22 @@
+.varClass{
+    --local-arrowIcon-color: var(--zdt_textboxicon_default_icon); /* refer the naming doc */
+}
+
+.arrowIcon {
+  color: var(--local-arrowIcon-color);
+  transition: var(--zd_transition3);
+  margin: 0 var(--zd_size5) ;
+}
+
+.rotated,
+.arrowContainer:hover .arrowIcon {
+  --local-arrowIcon-color: var(--zdt_textboxicon_hover_icon);
+}
+
+[dir=ltr] .rotated {
+    transform: rotateZ(-180deg);
+}
+
+[dir=rtl] .rotated {
+  transform: rotateZ(180deg);
+}

package/es/Select/Select.js

@@ -16,10 +16,11 @@ import { Icon } from '@zohodesk/icons';
 import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
 import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
+import InputFieldLine from "../InputFieldLine/InputFieldLine.js";
 /**** Methods ****/
 
 import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetSelectedValueText as makeGetSelectedValue } from "../utils/dropDownUtils";
-import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd, getKeyValue } from "../utils/Common.js";
+import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd, getKeyValue, DUMMY_OBJECT } from "../utils/Common.js";
 /**** CSS ****/
 
 import style from "./Select.module.css";
@@ -71,6 +72,7 @@ export class SelectComponent extends Component {
 
     this.state = {
       selected,
+      selectedValueDetails,
       options: allOptions,
       optionsNormalize: normalizedAllOptions,
       hoverIndex,
@@ -119,7 +121,7 @@ export class SelectComponent extends Component {
     //   suggestionContainer.addEventListener('scroll', this.handleScroll);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     let {
       selectedValue,
       isDefaultSelectValue,
@@ -167,6 +169,7 @@ export class SelectComponent extends Component {
       options: allOptions,
       optionsNormalize: normalizedAllOptions,
       selected,
+      selectedValueDetails,
       hoverIndex: oldHoverIndex ? oldHoverIndex : hoverIndex,
       selectedId,
       selectedValueIndex: hoverIndex
@@ -729,7 +732,8 @@ export class SelectComponent extends Component {
       isRestrictScroll,
       dropBoxPortalId,
       renderCustomToggleIndicator,
-      renderCustomSearchClearComponent
+      renderCustomSearchClearComponent,
+      renderCustomSelectedValue
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -742,6 +746,7 @@ export class SelectComponent extends Component {
     let {
       hoverIndex,
       selected,
+      selectedValueDetails,
       searchStr,
       isFetchingOptions,
       selectedId,
@@ -766,7 +771,31 @@ export class SelectComponent extends Component {
       ref: getTargetRef,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
-    }, needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
+    }, renderCustomSelectedValue ? /*#__PURE__*/React.createElement(InputFieldLine, {
+      isActive: isPopupReady,
+      border: needBorder ? 'bottom' : 'none',
+      size: size,
+      borderColor: borderColor,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      hasPadding: true
+    }, typeof renderCustomSelectedValue == 'function' ? renderCustomSelectedValue({
+      isDisabled,
+      isPopupOpen,
+      isReadOnly,
+      isActive: isPopupReady,
+      size,
+      option: selectedValueDetails[selectedId] || {},
+      selectedId,
+      placeHolder,
+      htmlId,
+      maxLength,
+      ref: this.valueInputRef,
+      onFocus: this.handleSelectFocus,
+      onKeyDown: this.handleKeyDown,
+      onKeyPress: this.handleValueInputChange,
+      ariaControlsId: setAriaId
+    }) : renderCustomSelectedValue) : needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
       a11y: {
         role: 'Menuitem',
         ariaLabel: TextBox_ally_label,

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

@@ -247,6 +247,21 @@ describe('Select -', () => {
     expect(getAllByRole(listItemRole)).toHaveLength(1);
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render the only options matching search value even with additional spaces before and after', () => {
+    const {
+      getByRole,
+      getAllByRole,
+      asFragment,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(Select, {
+      needSearch: true,
+      options: options
+    }));
+    userEvent.click(getByRole(selectInputRole));
+    userEvent.type(within(getByTestId(dropboxTestId)).getByRole('textbox'), '  2  ');
+    expect(getAllByRole(listItemRole)).toHaveLength(1);
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('Should trigger given onSearch, when type on the search input', async () => {
     const mockOnSearch = jest.fn();
     const {
@@ -1135,4 +1150,14 @@ describe('Select dataId snapshot - ', () => {
     userEvent.click(getByRole(selectInputRole));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderCustomSelectedValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Select, {
+      options: options,
+      selectedValue: "Option 2",
+      renderCustomSelectedValue: () => /*#__PURE__*/React.createElement("div", null, " Select Custom Option 2")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -14,10 +14,10 @@ exports[`GroupSelect rendering the defult props 1`] = `
       data-test-id="GroupSelect"
     >
       <div
-        class="container effect    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        data-id="GroupSelect_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="GroupSelect_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -80,9 +80,6 @@ exports[`GroupSelect rendering the defult props 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>