@zohodesk/components 1.4.21 → 1.4.23

package/lib/Select/Select.js

@@ -37,10 +37,14 @@ var _CustomResponsive = require("../Responsive/CustomResponsive");
 
 var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
 
+var _InputFieldLine = _interopRequireDefault(require("../shared/InputFieldLine/InputFieldLine.js"));
+
 var _dropDownUtils = require("../utils/dropDownUtils");
 
 var _Common = require("../utils/Common.js");
 
+var _utils = require("@zohodesk/utils");
+
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -133,6 +137,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
 
     _this.state = {
       selected: selected,
+      selectedValueDetails: selectedValueDetails,
       options: allOptions,
       optionsNormalize: normalizedAllOptions,
       hoverIndex: hoverIndex,
@@ -168,6 +173,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     _this.handleAddNewOption = _this.handleAddNewOption.bind(_assertThisInitialized(_this));
     _this.handleExposePopupHandlers = _this.handleExposePopupHandlers.bind(_assertThisInitialized(_this));
     _this.handleGetAddNewOptionText = _this.handleGetAddNewOptionText.bind(_assertThisInitialized(_this));
+    _this.getInputFieldLineA11y = _this.getInputFieldLineA11y.bind(_assertThisInitialized(_this));
     _this.getVirtualizerPublicMethods = _this.getVirtualizerPublicMethods.bind(_assertThisInitialized(_this));
     _this.scrollToHighlightedIndex = _this.scrollToHighlightedIndex.bind(_assertThisInitialized(_this));
     _this.setSuggestionsVirtualizerContainerRefFunction = _this.setSuggestionsVirtualizerContainerRefFunction.bind(_assertThisInitialized(_this));
@@ -230,6 +236,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         options: allOptions,
         optionsNormalize: normalizedAllOptions,
         selected: selected,
+        selectedValueDetails: selectedValueDetails,
         hoverIndex: oldHoverIndex ? oldHoverIndex : hoverIndex,
         selectedId: selectedId,
         selectedValueIndex: hoverIndex
@@ -759,6 +766,26 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         onAddNewOption: this.handleAddNewOption
       });
     }
+  }, {
+    key: "getInputFieldLineA11y",
+    value: function getInputFieldLineA11y(_ref5) {
+      var setAriaId = _ref5.setAriaId,
+          isReadOnly = _ref5.isReadOnly,
+          isDisabled = _ref5.isDisabled,
+          isPopupOpen = _ref5.isPopupOpen,
+          inputFieldLineA11y = _ref5.inputFieldLineA11y;
+      return _objectSpread(_objectSpread({
+        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
+      });
+    }
   }, {
     key: "getVirtualizerPublicMethods",
     value: function getVirtualizerPublicMethods(methods) {
@@ -829,7 +856,9 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           dropBoxPortalId = _this$props11.dropBoxPortalId,
           isVirtualizerEnabled = _this$props11.isVirtualizerEnabled,
           renderCustomToggleIndicator = _this$props11.renderCustomToggleIndicator,
-          renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent;
+          renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent,
+          renderCustomSelectedValue = _this$props11.renderCustomSelectedValue,
+          inputFieldLineA11y = _this$props11.inputFieldLineA11y;
       var _i18nKeys = i18nKeys,
           TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
           _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -841,6 +870,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,
@@ -856,6 +886,13 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
+      var inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
+        setAriaId: setAriaId,
+        isReadOnly: isReadOnly,
+        isDisabled: isDisabled,
+        isPopupOpen: isPopupOpen,
+        inputFieldLineA11y: inputFieldLineA11y
+      });
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(isParentBased || isReadOnly || isDisabled ? _SelectModule["default"].container : '', " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-title": isDisabled ? title : null,
@@ -866,7 +903,33 @@ 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({
+      }, (0, _utils.isRenderable)(renderCustomSelectedValue) ? /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+        isActive: isPopupReady,
+        border: needBorder ? 'bottom' : 'none',
+        size: size,
+        borderColor: borderColor,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        onKeyDown: this.handleKeyDown,
+        hasPadding: true,
+        a11yAttributes: inputFieldLineA11yAttributes
+      }, (0, _utils.renderNode)(renderCustomSelectedValue, {
+        isDisabled: isDisabled,
+        isPopupOpen: isPopupOpen,
+        isReadOnly: isReadOnly,
+        isActive: isPopupReady,
+        size: size,
+        option: selectedValueDetails[selectedId] || _Common.DUMMY_OBJECT,
+        selectedId: selectedId,
+        placeHolder: placeHolder,
+        htmlId: htmlId,
+        maxLength: maxLength,
+        getRef: this.valueInputRef,
+        onFocus: this.handleSelectFocus,
+        onKeyDown: this.handleKeyDown,
+        onKeyPress: this.handleValueInputChange,
+        ariaControlsId: setAriaId
+      })) : needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         a11y: {
           role: 'Menuitem',
           ariaLabel: TextBox_ally_label,
@@ -970,8 +1033,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"
-      }, function (_ref5) {
-        var tabletMode = _ref5.tabletMode;
+      }, function (_ref6) {
+        var tabletMode = _ref6.tabletMode;
         return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
           animationStyle: animationStyle,
           boxPosition: position || "".concat(defaultDropBoxPosition),

package/lib/Select/__tests__/Select.spec.js

@@ -1393,6 +1393,18 @@ describe('Select dataId snapshot - ', function () {
 
     _userEvent["default"].click(getByRole(selectInputRole));
 
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with renderCustomSelectedValue', function () {
+    var _render75 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      options: options,
+      selectedValue: "Option 2",
+      renderCustomSelectedValue: function renderCustomSelectedValue() {
+        return /*#__PURE__*/_react["default"].createElement("div", null, " Select Custom Option 2");
+      }
+    })),
+        asFragment = _render75.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/lib/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>