@zohodesk/components 1.2.52 → 1.2.53

package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap

@@ -21,7 +21,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
         aria-checked="false"
         aria-hidden="true"
         class="container pointer primary 
-          inflex rowdir vCenter"
+           inflex rowdir vCenter"
         data-id="checkBox"
         data-selector-id="container"
         data-test-id="checkBox"
@@ -29,7 +29,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
         tabindex="-1"
       >
         <div
-          class="boxContainer medium  filled shrinkOff"
+          class="boxContainer medium  filled  shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap

@@ -30,7 +30,7 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
       >
         <div
           class="radio  
-            hoverprimary medium filled centerPathprimary  shrinkOff"
+            hoverprimary medium filled centerPathprimary   shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -965,7 +965,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           palette = _this$props8.palette,
           needEffect = _this$props8.needEffect,
           autoComplete = _this$props8.autoComplete,
-          getTargetRef = _this$props8.getTargetRef;
+          getTargetRef = _this$props8.getTargetRef,
+          isFocus = _this$props8.isFocus;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -993,6 +994,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
       var isShowClearIcon = !isReadOnly && !isDisabled && selectedGroupOptions.length > 1;
+      var isEditable = !(isReadOnly || isDisabled);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -1009,7 +1011,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       }, children) : /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(isActive && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(_MultiSelectModule["default"]["borderColor_".concat(borderColor)], " ").concat(customClass),
+        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(isActive && needBorder || isEditable && isFocus && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(_MultiSelectModule["default"]["borderColor_".concat(borderColor)], " ").concat(customClass),
         eleRef: this.selectedOptionContainerRef,
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -440,7 +440,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           isAbsolutePositioningNeeded = _this$props5.isAbsolutePositioningNeeded,
           positionsOffset = _this$props5.positionsOffset,
           targetOffset = _this$props5.targetOffset,
-          isRestrictScroll = _this$props5.isRestrictScroll;
+          isRestrictScroll = _this$props5.isRestrictScroll,
+          isFocus = _this$props5.isFocus;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$DropBoxP = customProps.DropBoxProps,
@@ -479,6 +480,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           isShowClear = _this$getIsShowClearI.isShowClearIcon;
 
       var isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
+      var isEditable = !(isReadOnly || isDisabled);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(containerClass),
         "data-id": dataIdMultiSelectComp,
@@ -489,7 +491,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(isActive && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(needBorder ? !isDisabled ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : ''),
+        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(isActive && needBorder || isEditable && isFocus && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(needBorder ? !isDisabled ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : ''),
         eleRef: this.selectedOptionContainerRef,
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {

package/lib/MultiSelect/MultiSelect.js

@@ -960,7 +960,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           setAriaId = _this$props14.setAriaId,
           isPopupOpen = _this$props14.isPopupOpen,
           ariaErrorId = _this$props14.ariaErrorId,
-          customProps = _this$props14.customProps;
+          customProps = _this$props14.customProps,
+          isFocus = _this$props14.isFocus;
       var _this$state8 = this.state,
           isActive = _this$state8.isActive,
           selectedOptions = _this$state8.selectedOptions,
@@ -979,12 +980,13 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isShowClear = _this$getIsShowClearI.isShowClearIcon;
 
       var isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
+      var isEditable = !(isReadOnly || isDisabled || disableAction);
       var _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(needBorder ? !disableAction ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : '', " ").concat(isActive && needBorder || isResponsive ? _MultiSelectModule["default"].active : '', " ").concat(textBoxClass, " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : ''),
+        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(needBorder ? !disableAction ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : '', " ").concat(isActive && needBorder || isResponsive || isEditable && isFocus && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(textBoxClass, " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : ''),
         eleRef: this.selectedOptionContainerRef,
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {

package/lib/MultiSelect/props/propTypes.js

@@ -7,6 +7,8 @@ exports.Suggestions_propTypes = exports.SelectedOptions_propTypes = exports.Mult
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _AdvancedGroupMultiSe;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -128,7 +130,8 @@ var MultiSelect_propTypes = {
   ariaErrorId: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     TextBoxIconProps: _propTypes["default"].object
-  })
+  }),
+  isFocus: _propTypes["default"].bool
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -201,8 +204,7 @@ var Suggestions_propTypes = {
   }))
 };
 exports.Suggestions_propTypes = Suggestions_propTypes;
-
-var AdvancedGroupMultiSelect_propTypes = _defineProperty({
+var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   animationStyle: _propTypes["default"].string,
   autoComplete: _propTypes["default"].bool,
   borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
@@ -270,8 +272,7 @@ var AdvancedGroupMultiSelect_propTypes = _defineProperty({
   needToCloseOnSelect: _propTypes["default"].func,
   searchStr: _propTypes["default"].string,
   children: _propTypes["default"].node
-}, "dataSelectorId", _propTypes["default"].string);
-
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _AdvancedGroupMultiSe);
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {
@@ -347,7 +348,8 @@ var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_
   }),
   isLoading: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
-  customClass: _propTypes["default"].object
+  customClass: _propTypes["default"].object,
+  isFocus: _propTypes["default"].bool
 });
 
 exports.AdvancedMultiSelect_propTypes = AdvancedMultiSelect_propTypes;

package/lib/Radio/Radio.js

@@ -17,6 +17,8 @@ var _Label = _interopRequireDefault(require("../Label/Label"));
 
 var _Layout = require("../Layout");
 
+var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
+
 var _RadioModule = _interopRequireDefault(require("./Radio.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -106,8 +108,9 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           customRadio = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2,
           _customClass$customLa = customClass.customLabel,
           customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
-      var accessMode = isReadOnly ? _RadioModule["default"].readonly : disabled ? _RadioModule["default"].disabled : _RadioModule["default"].pointer;
+      var accessMode = isReadOnly ? _RadioModule["default"].readonly : disabled ? (0, _CssProvider["default"])('isDisabled') : _RadioModule["default"].pointer;
       var toolTip = disabled ? disabledTitle : title ? title : null;
+      var isEditable = !(isReadOnly || disabled);
       var ariaHidden = a11y.ariaHidden,
           _a11y$role = a11y.role,
           role = _a11y$role === void 0 ? 'radio' : _a11y$role,
@@ -117,7 +120,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           ariaLabel = a11y.ariaLabel,
           ariaLabelledby = a11y.ariaLabelledby,
           _a11y$ariaReadonly = a11y.ariaReadonly,
-          ariaReadonly = _a11y$ariaReadonly === void 0 ? isReadOnly || disabled ? true : false : _a11y$ariaReadonly;
+          ariaReadonly = _a11y$ariaReadonly === void 0 ? !isEditable ? true : false : _a11y$ariaReadonly;
       var _customProps$Containe = customProps.ContainerProps,
           ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
           _customProps$LabelPro = customProps.LabelProps,
@@ -128,11 +131,11 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         isInline: text ? false : true,
         alignBox: "row",
         align: "both",
-        className: "".concat(_RadioModule["default"].container, " ").concat(active && !disabled ? _RadioModule["default"].active : '', " ").concat(accessMode, " ").concat(isReadOnly || disabled ? '' : _RadioModule["default"].hoverEfffect, " ").concat(checked ? _RadioModule["default"].checked : '', " ").concat(customRadioWrap),
+        className: "".concat(_RadioModule["default"].container, " ").concat(active && !disabled ? _RadioModule["default"].active : '', " ").concat(accessMode, " ").concat(!isEditable ? '' : _RadioModule["default"].hoverEfffect, " ").concat(checked ? _RadioModule["default"].checked : '', " ").concat(customRadioWrap),
         "data-title": toolTip,
         onClick: !isReadOnly && !disabled ? this.onChange : '',
         "aria-checked": ariaChecked,
-        tabindex: isReadOnly || disabled || ariaHidden ? '-1' : tabIndex || '0',
+        tabindex: !isEditable || ariaHidden ? '-1' : tabIndex || '0',
         eleRef: this.handleGetRef,
         role: role,
         "aria-Hidden": ariaHidden,
@@ -140,7 +143,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         "aria-labelledby": ariaLabelledby,
         "aria-readonly": ariaReadonly
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', " \n            ").concat(isReadOnly || disabled ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(customRadio)
+        className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', " \n            ").concat(!isEditable ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(customRadio, " ").concat(!isEditable ? "".concat(_RadioModule["default"].disabled) : '')
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "hidden",
         id: id,
@@ -163,7 +166,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_RadioModule["default"].centerPath)
       }) : null))), text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _RadioModule["default"].text
+        className: "".concat(_RadioModule["default"].text, " ").concat(disabled ? "".concat(_RadioModule["default"].disabled) : '')
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,
         palette: labelPalette,
@@ -173,7 +176,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         dataId: "".concat(text, "_label"),
         variant: variant,
         title: toolTip ? toolTip : text,
-        customClass: "".concat(checked && active ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " \n              ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(accessMode, " ").concat(customLabel)
+        customClass: "".concat(checked && active ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " \n              ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(isEditable ? _RadioModule["default"].pointer : '', " ").concat(isReadOnly ? _RadioModule["default"].readonly : '', "  ").concat(customLabel)
       }, LabelProps))), children, renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
     }
   }]);

package/lib/Radio/Radio.module.css

@@ -19,7 +19,7 @@
   cursor: pointer;
 }
 .readonly, .disabled {
-  cursor: not-allowed;
+  cursor: default;
 }
 .disabled {
   opacity: 0.7