@zohodesk/components 1.2.62 → 1.3.0

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

@@ -72,3 +72,393 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`AdvancedMultiSelect rendering the options array with objects and string 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper   effect "
+    data-id="multiSelectComp"
+    data-selector-id="advancedMultiSelect"
+    data-test-id="multiSelectComp"
+  >
+    <div
+      class="container medium  hasBorder borderColor_default flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="multiSelectComp_textBox"
+        data-selector-id="box"
+        data-test-id="multiSelectComp_textBox"
+      >
+        <span
+          class=" custmSpan custmSpanMedium 
+              "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-controls="1"
+              aria-describedby="2"
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-owns="1"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="textBoxIcon"
+              data-selector-id="textBoxIcon"
+              data-test-id="textBoxIcon"
+              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>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-multiselectable="true"
+      class="main container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="multiSelectComp_dropbox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="multiSelectComp_dropbox"
+      dot-ui-element="dropbox"
+      id="1"
+      role="listbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow boxPadding radius bounce defaultPalette"
+        data-id="multiSelectComp_dropbox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="multiSelectComp_dropbox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="box flex cover coldir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="small grow basis shrinkOn scrolly"
+                data-id="CardContent"
+                data-selector-id="cardContent"
+                data-test-id="CardContent"
+              >
+                <div
+                  class="flex coldir"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                  tabindex="0"
+                >
+                  <div
+                    class="shrinkOff"
+                    data-id="multiSelectComp_Options"
+                    data-selector-id="box"
+                    data-test-id="multiSelectComp_Options"
+                  >
+                    <li
+                      aria-label="Apple"
+                      aria-selected="false"
+                      class="list medium  default defaultHover  mediumwithTick  withBorder  flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="true"
+                      data-id="Apple"
+                      data-selector-id="listItem"
+                      data-test-id="Apple"
+                      data-title="Apple"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="value basisAuto shrinkOn"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        Apple
+                      </div>
+                    </li>
+                    <li
+                      aria-label="Orange"
+                      aria-selected="false"
+                      class="list medium  default   mediumwithTick  withBorder  flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="false"
+                      data-id="Orange"
+                      data-selector-id="listItem"
+                      data-test-id="Orange"
+                      data-title="Orange"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="value basisAuto shrinkOn"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        Orange
+                      </div>
+                    </li>
+                    <li
+                      aria-label="string test"
+                      aria-selected="false"
+                      class="list medium  default   mediumwithTick  withBorder  flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="false"
+                      data-id="string test"
+                      data-selector-id="listItem"
+                      data-test-id="string test"
+                      data-title="string test"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="value basisAuto shrinkOn"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        string test
+                      </div>
+                    </li>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AdvancedMultiSelect rendering the options array with only objects using allowValueFallback 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper   effect "
+    data-id="multiSelectComp"
+    data-selector-id="advancedMultiSelect"
+    data-test-id="multiSelectComp"
+  >
+    <div
+      class="container medium  hasBorder borderColor_default flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="multiSelectComp_textBox"
+        data-selector-id="box"
+        data-test-id="multiSelectComp_textBox"
+      >
+        <span
+          class=" custmSpan custmSpanMedium 
+              "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-controls="1"
+              aria-describedby="2"
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-owns="1"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="textBoxIcon"
+              data-selector-id="textBoxIcon"
+              data-test-id="textBoxIcon"
+              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>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-multiselectable="true"
+      class="main container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="multiSelectComp_dropbox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="multiSelectComp_dropbox"
+      dot-ui-element="dropbox"
+      id="1"
+      role="listbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow boxPadding radius bounce defaultPalette"
+        data-id="multiSelectComp_dropbox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="multiSelectComp_dropbox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="box flex cover coldir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="small grow basis shrinkOn scrolly"
+                data-id="CardContent"
+                data-selector-id="cardContent"
+                data-test-id="CardContent"
+              >
+                <div
+                  class="flex coldir"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                  tabindex="0"
+                >
+                  <div
+                    class="shrinkOff"
+                    data-id="multiSelectComp_Options"
+                    data-selector-id="box"
+                    data-test-id="multiSelectComp_Options"
+                  >
+                    <li
+                      aria-label="Apple"
+                      aria-selected="false"
+                      class="list medium  default defaultHover  mediumwithTick  withBorder  flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="true"
+                      data-id="Apple"
+                      data-selector-id="listItem"
+                      data-test-id="Apple"
+                      data-title="Apple"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="value basisAuto shrinkOn"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        Apple
+                      </div>
+                    </li>
+                    <li
+                      aria-label="Orange"
+                      aria-selected="false"
+                      class="list medium  default   mediumwithTick  withBorder  flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="false"
+                      data-id="Orange"
+                      data-selector-id="listItem"
+                      data-test-id="Orange"
+                      data-title="Orange"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="value basisAuto shrinkOn"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        Orange
+                      </div>
+                    </li>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -13,27 +13,48 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
   >
     <div
       aria-hidden="true"
-      class="iconBox shrinkOff"
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
       data-id="MultiSelectHeader_selectAll_Icon"
       data-selector-id="box"
       data-test-id="MultiSelectHeader_selectAll_Icon"
     >
-      <i
-        aria-hidden="true"
-        class="zd_font_icons basic icon-androidd    "
-        data-id="fontIcon"
-        data-selector-id="fontIcon"
-        data-test-id="fontIcon"
-        style="--zd-iconfont-size: var(--zd_font_size15);"
-      />
+      <div
+        class="lhsBox_medium shrinkOff selfStart"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-androidd    "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size15);"
+        />
+      </div>
     </div>
     <div
-      class="value grow basis shrinkOn"
-      data-id="MultiSelectHeader_selectAll_Text"
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
       data-selector-id="box"
-      data-test-id="MultiSelectHeader_selectAll_Text"
+      data-test-id="boxComponent"
     >
-      List
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="MultiSelectHeader_selectAll_Text"
+          data-selector-id="box"
+          data-test-id="MultiSelectHeader_selectAll_Text"
+        >
+          List
+        </div>
+      </div>
     </div>
   </li>
 </DocumentFragment>

package/lib/MultiSelect/props/defaultProps.js

@@ -45,7 +45,8 @@ var AdvancedGroupMultiSelect_defaultProps = {
   needEffect: true,
   palette: 'default',
   isLoading: false,
-  dataSelectorId: 'advancedGroupMultiSelect'
+  dataSelectorId: 'advancedGroupMultiSelect',
+  allowValueFallback: true
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
 var AdvancedMultiSelect_defaultProps = {
@@ -80,7 +81,8 @@ var AdvancedMultiSelect_defaultProps = {
   dataSelectorId: 'advancedMultiSelect',
   customClass: {},
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  allowValueFallback: true
 };
 exports.AdvancedMultiSelect_defaultProps = AdvancedMultiSelect_defaultProps;
 var EmptyState_defaultProps = {
@@ -129,7 +131,8 @@ var MultiSelect_defaultProps = {
   selectedOptionsCount: 0,
   cardHeaderName: '',
   needResponsive: true,
-  customProps: {}
+  customProps: {},
+  allowValueFallback: true
 };
 exports.MultiSelect_defaultProps = MultiSelect_defaultProps;
 var MultiSelectHeader_defaultProps = {
@@ -168,7 +171,8 @@ var MultiSelectWithAvatar_defaultProps = {
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
   customProps: {},
-  needResponsive: true
+  needResponsive: true,
+  allowValueFallback: true
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
 var SelectedOptions_defaultProps = {

package/lib/MultiSelect/props/propTypes.js

@@ -65,6 +65,7 @@ var MultiSelect_propTypes = {
   a11y: _propTypes["default"].shape({
     clearLabel: _propTypes["default"].string
   }),
+  searchFields: _propTypes["default"].arrayOf(_propTypes["default"].string),
   isAnimate: _propTypes["default"].bool,
   isBoxPaddingNeed: _propTypes["default"].bool,
   isDisabled: _propTypes["default"].bool,
@@ -131,7 +132,8 @@ var MultiSelect_propTypes = {
   customProps: _propTypes["default"].shape({
     TextBoxIconProps: _propTypes["default"].object
   }),
-  isFocus: _propTypes["default"].bool
+  isFocus: _propTypes["default"].bool,
+  allowValueFallback: _propTypes["default"].bool
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -152,7 +154,8 @@ var MultiSelectWithAvatar_propTypes = _objectSpread({
   customProps: _propTypes["default"].shape({
     SuggestionsProps: _propTypes["default"].object,
     DropBoxProps: _propTypes["default"].object
-  })
+  }),
+  secondaryField: _propTypes["default"].string
 }, MultiSelect_propTypes);
 
 exports.MultiSelectWithAvatar_propTypes = MultiSelectWithAvatar_propTypes;
@@ -272,7 +275,7 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   needToCloseOnSelect: _propTypes["default"].func,
   searchStr: _propTypes["default"].string,
   children: _propTypes["default"].node
-}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _AdvancedGroupMultiSe);
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _AdvancedGroupMultiSe);
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {
@@ -304,6 +307,7 @@ var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_
   //For grouping multiSelect
   optionType: _propTypes["default"].oneOf(['default', 'avatar', 'icon']),
   needEffect: _propTypes["default"].bool,
+  secondaryField: _propTypes["default"].string,
   animationStyle: _propTypes["default"].string,
   defaultDropBoxPosition: _propTypes["default"].oneOf(['bottom', 'top', 'left', 'right']),
   dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),

package/lib/Radio/props/propTypes.js

@@ -39,7 +39,7 @@ var propTypes = {
     ariaChecked: _propTypes["default"].bool,
     ariaHidden: _propTypes["default"].bool,
     role: _propTypes["default"].string,
-    tabIndex: _propTypes["default"].oneOfType(_propTypes["default"].string, _propTypes["default"].number),
+    tabIndex: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     ariaLabelledby: _propTypes["default"].string,
     ariaLabel: _propTypes["default"].string,
     ariaReadonly: _propTypes["default"].bool

package/lib/Select/GroupSelect.js

@@ -246,9 +246,11 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "handleGetGroupSelectOptions",
     value: function handleGetGroupSelectOptions(props) {
-      var groupedOptions = props.groupedOptions;
+      var groupedOptions = props.groupedOptions,
+          allowValueFallback = props.allowValueFallback;
       return this.getGroupSelectOptions({
-        groupedOptions: groupedOptions
+        groupedOptions: groupedOptions,
+        allowValueFallback: allowValueFallback
       });
     }
   }, {

package/lib/Select/Select.js

@@ -307,6 +307,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       var options = props.options,
           valueField = props.valueField,
           textField = props.textField,
+          allowValueFallback = props.allowValueFallback,
           _props$customProps = props.customProps,
           customProps = _props$customProps === void 0 ? {} : _props$customProps;
       var _customProps$listItem = customProps.listItemProps,
@@ -315,7 +316,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         options: options,
         valueField: valueField,
         textField: textField,
-        listItemProps: listItemProps
+        listItemProps: listItemProps,
+        allowValueFallback: allowValueFallback
       });
     }
   }, {

package/lib/Select/SelectWithAvatar.js

@@ -98,13 +98,15 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
       var options = props.options,
           valueField = props.valueField,
           textField = props.textField,
-          imageField = props.imageField;
+          imageField = props.imageField,
+          allowValueFallback = props.allowValueFallback;
       return this.formatOptions({
         options: options,
         valueField: valueField,
         textField: textField,
         imageField: imageField,
-        optionType: 'avatar'
+        optionType: 'avatar',
+        allowValueFallback: allowValueFallback
       });
     }
   }, {

package/lib/Select/props/defaultProps.js

@@ -45,7 +45,8 @@ var Select_defaultProps = {
   iconOnHover: false,
   customProps: {},
   isLoading: false,
-  isAbsolutePositioningNeeded: true
+  isAbsolutePositioningNeeded: true,
+  allowValueFallback: true
 };
 exports.Select_defaultProps = Select_defaultProps;
 var GroupSelect_defaultProps = {
@@ -83,7 +84,8 @@ var GroupSelect_defaultProps = {
   i18nKeys: {},
   iconOnHover: false,
   isLoading: false,
-  customProps: {}
+  customProps: {},
+  allowValueFallback: true
 };
 exports.GroupSelect_defaultProps = GroupSelect_defaultProps;
 var SelectWithAvatar_defaultProps = {

package/lib/Select/props/propTypes.js

@@ -109,7 +109,8 @@ var Select_propTypes = {
   positionsOffset: _propTypes["default"].object,
   targetOffset: _propTypes["default"].object,
   isRestrictScroll: _propTypes["default"].bool,
-  dropBoxPortalId: _propTypes["default"].string
+  dropBoxPortalId: _propTypes["default"].string,
+  allowValueFallback: _propTypes["default"].bool
 };
 exports.Select_propTypes = Select_propTypes;
 var GroupSelect_propTypes = {
@@ -195,7 +196,8 @@ var GroupSelect_propTypes = {
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object,
     TextBoxIconProps: _propTypes["default"].object
-  })
+  }),
+  allowValueFallback: _propTypes["default"].bool
 };
 exports.GroupSelect_propTypes = GroupSelect_propTypes;
 

package/lib/common/common.module.css

@@ -260,6 +260,12 @@
   justify-content: space-between;
 }
 
+.justifyFstart {
+  -webkit-box-pack: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+}
+
 .justifyFend {
   -webkit-box-pack: flex-end;
   -ms-flex-pack: flex-end;
@@ -493,6 +499,10 @@
   display: -webkit-box;
   overflow: hidden;
 }
+.lineClamp {
+  composes: wbreak clamp;
+  -webkit-line-clamp: var(--line-clamp,2);
+}
 
 .offSelection {
   -webkit-user-select: none;