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

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

@@ -1,5 +1,90 @@
 // 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-id="multiSelect_textBox"
+          data-selector-id="textBoxIcon"
+          data-test-id="multiSelect_textBox"
+        >
+          <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 +110,10 @@ 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-id="multiSelect_textBox"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
+          data-test-id="multiSelect_textBox"
         >
           <div
             class="grow basis shrinkOff"

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

@@ -25,10 +25,10 @@ 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-id="multiSelectWithAvatar_textBox"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
+          data-test-id="multiSelectWithAvatar_textBox"
         >
           <div
             class="grow basis shrinkOff"

package/lib/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/lib/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/lib/MultiSelect/props/propTypes.js

@@ -135,7 +135,8 @@ var MultiSelect_propTypes = {
   isFocus: _propTypes["default"].bool,
   allowValueFallback: _propTypes["default"].bool,
   renderCustomClearComponent: _propTypes["default"].func,
-  renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node])
+  renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
+  renderCustomSelectedValue: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node])
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -176,7 +177,11 @@ var SelectedOptions_propTypes = {
   })),
   size: _propTypes["default"].oneOf(['medium', 'xmedium']),
   palette: _propTypes["default"].string,
-  dataId: _propTypes["default"].string
+  dataId: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  isPopupReady: _propTypes["default"].bool,
+  isPopupOpen: _propTypes["default"].bool,
+  renderCustomSelectedValue: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node])
 };
 exports.SelectedOptions_propTypes = SelectedOptions_propTypes;
 var Suggestions_propTypes = {
@@ -207,7 +212,8 @@ var Suggestions_propTypes = {
     logo: _propTypes["default"].string,
     optionType: _propTypes["default"].string,
     listItemProps: _propTypes["default"].object
-  }))
+  })),
+  renderBeforeChildren: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node])
 };
 exports.Suggestions_propTypes = Suggestions_propTypes;
 var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {

package/lib/Popup/Popup.js

@@ -279,8 +279,8 @@ var Popup = function Popup(Component) {
         }
       }
     }, {
-      key: "componentWillReceiveProps",
-      value: function componentWillReceiveProps(nextProps) {
+      key: "UNSAFE_componentWillReceiveProps",
+      value: function UNSAFE_componentWillReceiveProps(nextProps) {
         var isPopupOpen = this.state.isPopupOpen;
 
         if (typeof nextProps.isPopupOpen !== 'undefined' && nextProps.isPopupOpen !== isPopupOpen) {
@@ -661,10 +661,10 @@ var Popup = function Popup(Component) {
 
         if (entry.isIntersecting === true) {
           this.isTargetElementVisible = true;
-          dropElement && dropElement.setAttribute('data-visible', 'visible');
+          dropElement.setAttribute('data-visible', 'visible');
         } else if (entry.intersectionRatio === 0 && entry.isIntersecting === false) {
           this.isTargetElementVisible = false;
-          dropElement && dropElement.setAttribute('data-visible', 'hidden');
+          dropElement.setAttribute('data-visible', 'hidden');
         }
       }
     }, {

package/lib/Select/ArrowIcon/ArrowIcon.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Layout = require("../../Layout");
+
+var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));
+
+var _ArrowIconModule = _interopRequireDefault(require("./ArrowIcon.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var ArrowIcon = function ArrowIcon(props) {
+  var dataId = props.dataId,
+      isRotated = props.isRotated,
+      customClass = props.customClass,
+      a11yAttributes = props.a11yAttributes;
+  var _customClass$iconClas = customClass.iconClass,
+      iconClass = _customClass$iconClas === void 0 ? '' : _customClass$iconClas,
+      _customClass$containe = customClass.containerClass,
+      containerClass = _customClass$containe === void 0 ? '' : _customClass$containe;
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
+    isInline: true,
+    isCover: false,
+    align: "both",
+    dataId: "".concat(dataId, "_downIcon"),
+    className: "".concat(_ArrowIconModule["default"].arrowIcon, " ").concat(isRotated ? _ArrowIconModule["default"].rotated : '', " ").concat(containerClass)
+  }, a11yAttributes, {
+    "aria-hidden": true
+  }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    name: "ZD-down",
+    size: "7",
+    iconClass: iconClass
+  }));
+};
+
+ArrowIcon.defaultProps = {
+  dataId: 'arrowIcon',
+  isRotated: false,
+  customClass: {},
+  a11yAttributes: {}
+};
+ArrowIcon.propTypes = {
+  dataId: _propTypes["default"].string,
+  isRotated: _propTypes["default"].bool,
+  customClass: _propTypes["default"].shape({
+    iconClass: _propTypes["default"].string,
+    containerClass: _propTypes["default"].string
+  }),
+  a11yAttributes: _propTypes["default"].object
+};
+var _default = ArrowIcon;
+exports["default"] = _default;

package/lib/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/lib/Select/Select.js

@@ -37,6 +37,8 @@ var _CustomResponsive = require("../Responsive/CustomResponsive");
 
 var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
 
+var _InputFieldLine = _interopRequireDefault(require("../InputFieldLine/InputFieldLine.js"));
+
 var _dropDownUtils = require("../utils/dropDownUtils");
 
 var _Common = require("../utils/Common.js");
@@ -133,6 +135,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
 
     _this.state = {
       selected: selected,
+      selectedValueDetails: selectedValueDetails,
       options: allOptions,
       optionsNormalize: normalizedAllOptions,
       hoverIndex: hoverIndex,
@@ -184,8 +187,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       //   suggestionContainer.addEventListener('scroll', this.handleScroll);
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       var selectedValue = nextProps.selectedValue,
           isDefaultSelectValue = nextProps.isDefaultSelectValue,
           valueField = nextProps.valueField,
@@ -227,6 +230,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         options: allOptions,
         optionsNormalize: normalizedAllOptions,
         selected: selected,
+        selectedValueDetails: selectedValueDetails,
         hoverIndex: oldHoverIndex ? oldHoverIndex : hoverIndex,
         selectedId: selectedId,
         selectedValueIndex: hoverIndex
@@ -778,7 +782,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           isRestrictScroll = _this$props11.isRestrictScroll,
           dropBoxPortalId = _this$props11.dropBoxPortalId,
           renderCustomToggleIndicator = _this$props11.renderCustomToggleIndicator,
-          renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent;
+          renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent,
+          renderCustomSelectedValue = _this$props11.renderCustomSelectedValue;
       var _i18nKeys = i18nKeys,
           TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
           _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -790,6 +795,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       var _this$state4 = this.state,
           hoverIndex = _this$state4.hoverIndex,
           selected = _this$state4.selected,
+          selectedValueDetails = _this$state4.selectedValueDetails,
           searchStr = _this$state4.searchStr,
           isFetchingOptions = _this$state4.isFetchingOptions,
           selectedId = _this$state4.selectedId,
@@ -815,7 +821,31 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         ref: getTargetRef,
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
-      }, needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
+      }, renderCustomSelectedValue ? /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+        isActive: isPopupReady,
+        border: needBorder ? 'bottom' : 'none',
+        size: size,
+        borderColor: borderColor,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        hasPadding: true
+      }, typeof renderCustomSelectedValue == 'function' ? renderCustomSelectedValue({
+        isDisabled: isDisabled,
+        isPopupOpen: isPopupOpen,
+        isReadOnly: isReadOnly,
+        isActive: isPopupReady,
+        size: size,
+        option: selectedValueDetails[selectedId] || {},
+        selectedId: selectedId,
+        placeHolder: placeHolder,
+        htmlId: htmlId,
+        maxLength: maxLength,
+        ref: this.valueInputRef,
+        onFocus: this.handleSelectFocus,
+        onKeyDown: this.handleKeyDown,
+        onKeyPress: this.handleValueInputChange,
+        ariaControlsId: setAriaId
+      }) : renderCustomSelectedValue) : needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         a11y: {
           role: 'Menuitem',
           ariaLabel: TextBox_ally_label,