@zohodesk/components 1.4.21 → 1.4.23

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

@@ -1,6 +1,35 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import MultiSelect from "../MultiSelect";
+const options = [{
+  id: 1,
+  text: 'custom 1',
+  optionType: 'custom'
+}, {
+  id: 2,
+  text: 'custom 2',
+  optionType: 'custom'
+}, {
+  id: 3,
+  text: 'custom 3',
+  optionType: 'custom'
+}, {
+  id: 4,
+  text: 'custom 4',
+  optionType: 'custom'
+}, {
+  id: 5,
+  text: 'custom 5',
+  optionType: 'custom'
+}, {
+  id: 6,
+  text: 'custom 6',
+  optionType: 'custom'
+}, {
+  id: 7,
+  text: 'custom 7',
+  optionType: 'custom'
+}];
 const testData = ['text1', 'text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9', 'text10'];
 const testSelectedData = ['text1', 'text2', 'text3'];
 describe('MultiSelect', () => {
@@ -10,6 +39,15 @@ describe('MultiSelect', () => {
     } = render( /*#__PURE__*/React.createElement(MultiSelect, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderCustomSelectedValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, {
+      options: options,
+      renderCustomSelectedValue: () => /*#__PURE__*/React.createElement("span", null, "MultiSelect Custom Value")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('rendering with limit feature', () => {
     const {
       asFragment

package/es/MultiSelect/__tests__/SelectedOptions.spec.js

@@ -25,4 +25,17 @@ describe('SelectedOptions', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderCustomSelectedValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        value: 'SelectedObject1',
+        optionType: 'custom'
+      }],
+      renderCustomSelectedValue: () => /*#__PURE__*/React.createElement("span", null, " SelectedOptions Custom Value")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/MultiSelect/__tests__/Suggestions.spec.js

@@ -57,6 +57,18 @@ describe('Suggestions', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderBeforeChildren', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: [{
+        value: 'Suggestions Option 1',
+        id: '1'
+      }],
+      renderBeforeChildren: () => /*#__PURE__*/React.createElement("span", null, "Suggestions Before Children")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('rendering with limit props', () => {
     const {
       asFragment

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

@@ -25,10 +25,8 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"

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

@@ -25,10 +25,8 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"
@@ -98,10 +96,8 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
               "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"
@@ -346,10 +342,8 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
               "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"

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

@@ -1,5 +1,88 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper     effect"
+    data-id="multiSelect"
+    data-selector-id="multiSelect"
+    data-test-id="multiSelect"
+  >
+    <div
+      class="container medium borderColor_default   hasBorder flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span
+          class=" custmSpan custmSpanMedium 
+          "
+        />
+        <div
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          data-selector-id="textBoxIcon"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-required="true"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="multiSelect_textBox"
+              data-selector-id="textBoxIcon"
+              data-test-id="multiSelect_textBox"
+              maxlength="250"
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="icon  shrinkOff"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+              >
+                <div
+                  class="rightPlaceholder inflex rowdir vCenter"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`MultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -25,10 +108,8 @@ exports[`MultiSelect rendering the defult props 1`] = `
           "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"
@@ -106,7 +187,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
         data-test-id="multiSelect_selectedOptions"
       >
         <div
-          aria-labelledby="5"
+          aria-labelledby="7"
           class="container effect    medium lgRadius danger  pointer "
           data-id="tag_Tag"
           data-selector-id="tag"
@@ -117,7 +198,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           <div
             aria-hidden="true"
             class="text mediumtext"
-            id="5"
+            id="7"
           >
             text1
           </div>
@@ -156,7 +237,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
         data-test-id="multiSelect_selectedOptions"
       >
         <div
-          aria-labelledby="6"
+          aria-labelledby="8"
           class="container effect    medium lgRadius danger  pointer "
           data-id="tag_Tag"
           data-selector-id="tag"
@@ -167,7 +248,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           <div
             aria-hidden="true"
             class="text mediumtext"
-            id="6"
+            id="8"
           >
             text2
           </div>
@@ -206,7 +287,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
         data-test-id="multiSelect_selectedOptions"
       >
         <div
-          aria-labelledby="7"
+          aria-labelledby="9"
           class="container effect    medium lgRadius danger  pointer "
           data-id="tag_Tag"
           data-selector-id="tag"
@@ -217,7 +298,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           <div
             aria-hidden="true"
             class="text mediumtext"
-            id="7"
+            id="9"
           >
             text3
           </div>
@@ -260,10 +341,8 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"

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

@@ -25,10 +25,8 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
           "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"

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

@@ -1,5 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SelectedOptions Should render with renderCustomSelectedValue 1`] = `
+<DocumentFragment>
+  <div
+    class="tag medium shrinkOff"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <span>
+       SelectedOptions Custom Value
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`SelectedOptions rendering the basic select options 1`] = `
 <DocumentFragment>
   <div

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

@@ -1,5 +1,71 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Suggestions Should render with renderBeforeChildren 1`] = `
+<DocumentFragment>
+  <div
+    class="flex coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="shrinkOff"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Suggestions Option 1"
+        aria-selected="false"
+        class="list medium  default     withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Suggestions Option 1"
+        data-selector-id="listItem"
+        data-test-id="Suggestions Option 1"
+        data-title="Suggestions Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="beforeChild basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <span>
+                Suggestions Before Children
+              </span>
+            </div>
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Suggestions Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Suggestions rendering the defult props 1`] = `
 <DocumentFragment>
   <div

package/es/MultiSelect/props/propTypes.js

@@ -120,6 +120,7 @@ export const MultiSelect_propTypes = {
   allowValueFallback: PropTypes.bool,
   renderCustomClearComponent: PropTypes.func,
   renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  renderCustomSelectedValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   limit: PropTypes.number,
   secondaryField: PropTypes.string
 };
@@ -158,6 +159,10 @@ export const SelectedOptions_propTypes = {
   size: PropTypes.oneOf(['medium', 'xmedium']),
   palette: PropTypes.string,
   dataId: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  renderCustomSelectedValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   limit: PropTypes.number
 };
 export const Suggestions_propTypes = {
@@ -192,6 +197,7 @@ export const Suggestions_propTypes = {
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
   })),
+  renderBeforeChildren: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   limit: PropTypes.number,
   limitReachedMessage: PropTypes.string
 };

package/es/Select/Select.js

@@ -16,10 +16,12 @@ 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 "../shared/InputFieldLine/InputFieldLine.js";
 /**** Methods ****/
 
 import { dummyObj, 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";
+import { isRenderable, renderNode } from '@zohodesk/utils';
 /**** CSS ****/
 
 import style from "./Select.module.css";
@@ -71,6 +73,7 @@ export class SelectComponent extends Component {
 
     this.state = {
       selected,
+      selectedValueDetails,
       options: allOptions,
       optionsNormalize: normalizedAllOptions,
       hoverIndex,
@@ -106,6 +109,7 @@ export class SelectComponent extends Component {
     this.handleAddNewOption = this.handleAddNewOption.bind(this);
     this.handleExposePopupHandlers = this.handleExposePopupHandlers.bind(this);
     this.handleGetAddNewOptionText = this.handleGetAddNewOptionText.bind(this);
+    this.getInputFieldLineA11y = this.getInputFieldLineA11y.bind(this);
     this.getVirtualizerPublicMethods = this.getVirtualizerPublicMethods.bind(this);
     this.scrollToHighlightedIndex = this.scrollToHighlightedIndex.bind(this);
     this.setSuggestionsVirtualizerContainerRefFunction = this.setSuggestionsVirtualizerContainerRefFunction.bind(this);
@@ -170,6 +174,7 @@ export class SelectComponent extends Component {
       options: allOptions,
       optionsNormalize: normalizedAllOptions,
       selected,
+      selectedValueDetails,
       hoverIndex: oldHoverIndex ? oldHoverIndex : hoverIndex,
       selectedId,
       selectedValueIndex: hoverIndex
@@ -717,6 +722,27 @@ export class SelectComponent extends Component {
     });
   }
 
+  getInputFieldLineA11y(_ref2) {
+    let {
+      setAriaId,
+      isReadOnly,
+      isDisabled,
+      isPopupOpen,
+      inputFieldLineA11y
+    } = _ref2;
+    return {
+      tabIndex: 0,
+      role: 'button',
+      'aria-haspopup': 'listbox',
+      ...inputFieldLineA11y,
+      'aria-controls': setAriaId,
+      'aria-owns': setAriaId,
+      'aria-expanded': !isReadOnly && !isDisabled && isPopupOpen,
+      'aria-disabled': isDisabled,
+      'aria-readonly': isReadOnly
+    };
+  }
+
   getVirtualizerPublicMethods(methods) {
     this.virtualizerMethods = methods;
   }
@@ -781,7 +807,9 @@ export class SelectComponent extends Component {
       dropBoxPortalId,
       isVirtualizerEnabled,
       renderCustomToggleIndicator,
-      renderCustomSearchClearComponent
+      renderCustomSearchClearComponent,
+      renderCustomSelectedValue,
+      inputFieldLineA11y
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -794,6 +822,7 @@ export class SelectComponent extends Component {
     let {
       hoverIndex,
       selected,
+      selectedValueDetails,
       searchStr,
       isFetchingOptions,
       selectedId,
@@ -808,6 +837,13 @@ export class SelectComponent extends Component {
       SuggestionsProps = {},
       TextBoxIconProps = {}
     } = customProps;
+    const inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
+      setAriaId,
+      isReadOnly,
+      isDisabled,
+      isPopupOpen,
+      inputFieldLineA11y
+    });
     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 : ''}`,
       "data-title": isDisabled ? title : null,
@@ -818,7 +854,33 @@ 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, {
+    }, isRenderable(renderCustomSelectedValue) ? /*#__PURE__*/React.createElement(InputFieldLine, {
+      isActive: isPopupReady,
+      border: needBorder ? 'bottom' : 'none',
+      size: size,
+      borderColor: borderColor,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      onKeyDown: this.handleKeyDown,
+      hasPadding: true,
+      a11yAttributes: inputFieldLineA11yAttributes
+    }, renderNode(renderCustomSelectedValue, {
+      isDisabled,
+      isPopupOpen,
+      isReadOnly,
+      isActive: isPopupReady,
+      size,
+      option: selectedValueDetails[selectedId] || DUMMY_OBJECT,
+      selectedId,
+      placeHolder,
+      htmlId,
+      maxLength,
+      getRef: this.valueInputRef,
+      onFocus: this.handleSelectFocus,
+      onKeyDown: this.handleKeyDown,
+      onKeyPress: this.handleValueInputChange,
+      ariaControlsId: setAriaId
+    })) : needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
       a11y: {
         role: 'Menuitem',
         ariaLabel: TextBox_ally_label,
@@ -925,10 +987,10 @@ export class SelectComponent extends Component {
     })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref2 => {
+    }, _ref3 => {
       let {
         tabletMode
-      } = _ref2;
+      } = _ref3;
       return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         animationStyle: animationStyle,
         boxPosition: position || `${defaultDropBoxPosition}`,

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

@@ -1150,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,8 @@ 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-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -80,9 +78,6 @@ exports[`GroupSelect rendering the defult props 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>