@zohodesk/components 1.4.8 → 1.4.10-exp-0

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

@@ -1926,6 +1926,287 @@ exports[`Select - Should render the only options matching search value 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Select - Should render the only options matching search value even with additional spaces before and after 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=""
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        class="container effect effectFocused input  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-activedescendant="1"
+            aria-controls="1"
+            aria-expanded="true"
+            aria-haspopup="true"
+            aria-label="click to select options"
+            aria-owns="1"
+            aria-readonly="true"
+            autocomplete="off"
+            class=" pointer container medium  default  effect focus borderColor_default inputDotted "
+            data-id="selectComponent_textBox"
+            data-selector-id="textBoxIcon"
+            data-test-id="selectComponent_textBox"
+            data-title="Option 1"
+            maxlength="250"
+            placeholder=""
+            readonly=""
+            role="Menuitem"
+            type="text"
+            value="Option 1"
+          />
+        </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 rotated shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="rightPlaceholder inflex rowdir both"
+                data-id="containerComponent"
+                data-selector-id="container"
+                data-test-id="containerComponent"
+              >
+                <div
+                  aria-hidden="true"
+                  class="arrowIcon flex cover coldir both"
+                  data-id="selectComponent_downIcon"
+                  data-selector-id="container"
+                  data-test-id="selectComponent_downIcon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="zd_font_icons basic icon-down    "
+                    data-id="fontIcon"
+                    data-selector-id="fontIcon"
+                    data-test-id="fontIcon"
+                    style="--zd-iconfont-size: var(--zd_font_size7);"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="line borderColor_default "
+        />
+      </div>
+    </div>
+    <div
+      class="main container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="selectComponent_suggestions"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="selectComponent_suggestions"
+      dot-ui-element="dropbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow radius bounce defaultPalette"
+        data-id="selectComponent_suggestions_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="selectComponent_suggestions_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="flex cover coldir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="notScroll  shrinkOff"
+                data-id="CardHeader"
+                data-selector-id="cardHeader"
+                data-test-id="CardHeader"
+              >
+                <div
+                  class="search medium"
+                >
+                  <div
+                    class="container effect effectFocused   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-autocomplete="list"
+                        aria-controls="1"
+                        aria-describedby="2"
+                        autocomplete="off"
+                        class="  container small  default  effect  borderColor_default  "
+                        data-id="selectComponent_search"
+                        data-selector-id="textBoxIcon"
+                        data-test-id="selectComponent_search"
+                        maxlength="250"
+                        placeholder="Search"
+                        type="text"
+                        value="  2  "
+                      />
+                    </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"
+                      >
+                        <button
+                          class="buttonReset icon shrinkOff"
+                          data-id="selectComponent_search_ClearIcon"
+                          data-selector-id="box"
+                          data-test-id="selectComponent_search_ClearIcon"
+                          data-title="Clear"
+                        >
+                          <div
+                            aria-hidden="true"
+                            class="flex cover coldir both"
+                            data-id="containerComponent"
+                            data-selector-id="container"
+                            data-test-id="containerComponent"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="zd_font_icons basic icon-delete    rtl "
+                              data-id="fontIcon"
+                              data-selector-id="fontIcon"
+                              data-test-id="fontIcon"
+                              style="--zd-iconfont-size: var(--zd_font_size14);"
+                            />
+                          </div>
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      class="line borderColor_default "
+                    />
+                  </div>
+                </div>
+              </div>
+              <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"
+                  id="1"
+                  role="listbox"
+                  tabindex="0"
+                >
+                  <div
+                    class="listItemContainer shrinkOff"
+                    data-id="selectComponent_Options"
+                    data-selector-id="box"
+                    data-test-id="selectComponent_Options"
+                  >
+                    <li
+                      aria-label="Option 2"
+                      aria-selected="false"
+                      ariaparentrole="listbox"
+                      class="list medium  default defaultHover  mediumwithTick    flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="true"
+                      data-id="Option 2"
+                      data-selector-id="listItem"
+                      data-test-id="Option 2"
+                      data-title="Option 2"
+                      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="value basisAuto shrinkOn"
+                            data-id="boxComponent"
+                            data-selector-id="box"
+                            data-test-id="boxComponent"
+                          >
+                            Option 2
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Select - Should render the placeholder when there is no default value 1`] = `
 <DocumentFragment>
   <div

package/lib/Select/props/defaultProps.js

@@ -18,6 +18,7 @@ var Select_defaultProps = {
   dataId: 'selectComponent',
   dataSelectorId: 'select',
   dropBoxSize: 'small',
+  isVirtualizerEnabled: false,
   isDefaultSelectValue: true,
   isDisabled: false,
   isPopupOpenOnEnter: false,

package/lib/Select/props/propTypes.js

@@ -28,6 +28,7 @@ var Select_propTypes = {
   defaultDropBoxPosition: _propTypes["default"].string,
   dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
   emptyMessage: _propTypes["default"].string,
+  isVirtualizerEnabled: _propTypes["default"].bool,
   excludeOptions: _propTypes["default"].array,
   getChildren: _propTypes["default"].func,
   getContainerRef: _propTypes["default"].func,

package/lib/utils/Common.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DUMMY_OBJECT = void 0;
+exports.DUMMY_OBJECT = exports.DUMMY_ARRAY = void 0;
 exports.bind = bind;
 exports.bytesToSize = bytesToSize;
 exports.cancelBubblingEffect = cancelBubblingEffect;
@@ -475,7 +475,7 @@ function getElementSpace(elementRef) {
 
 function getSearchString() {
   var charachers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return (charachers || '').toString().toLowerCase(); //.replace(/\s+/g, '');
+  return (charachers || '').toString().toLowerCase().trim(); //.replace(/\s+/g, '');
 }
 
 function findScrollEnd(element) {
@@ -516,4 +516,6 @@ function isTextSelected() {
 }
 
 var DUMMY_OBJECT = {};
-exports.DUMMY_OBJECT = DUMMY_OBJECT;
+exports.DUMMY_OBJECT = DUMMY_OBJECT;
+var DUMMY_ARRAY = [];
+exports.DUMMY_ARRAY = DUMMY_ARRAY;

package/lib/utils/dropDownUtils.js

@@ -52,6 +52,10 @@ var getOptionsOrder = function getOptionsOrder(props) {
   return props.optionsOrder || dummyArray;
 };
 
+var getLimit = function getLimit(props) {
+  return props.limit || 0;
+};
+
 var getSelectedOptionsSel = function getSelectedOptionsSel(props) {
   return props.selectedOptions || dummyArray;
 };
@@ -148,8 +152,10 @@ var getListItemProps = function getListItemProps(props) {
   return props.listItemProps || '';
 };
 
+var defaultSearchFields = ['value'];
+
 var getSearchFields = function getSearchFields(props) {
-  return props.searchFields || ['value'];
+  return props.searchFields || defaultSearchFields;
 }; // const isObjectContainsSearchString = (searchFields = [], searchStr = '', obj) => {
 //   const matchedFields = searchFields.filter(element => {
 //     return getSearchString(obj[element]).indexOf(searchStr) !== -1
@@ -339,7 +345,7 @@ var makeFormatOptions = function makeFormatOptions() {
 exports.makeFormatOptions = makeFormatOptions;
 
 var makeGetMultiSelectSelectedOptions = function makeGetMultiSelectSelectedOptions() {
-  return (0, _reselect.createSelector)([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength, getAllowValueFallback], function (selectedOptions, normalizedFormatOptions, selectedOptionsLength, allowValueFallback) {
+  return (0, _reselect.createSelector)([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength, getAllowValueFallback, getLimit], function (selectedOptions, normalizedFormatOptions, selectedOptionsLength, allowValueFallback, limit) {
     var output = [];
     var revampSelectedOptions = [];
     var normalizedSelectedOptions = {};
@@ -367,6 +373,12 @@ var makeGetMultiSelectSelectedOptions = function makeGetMultiSelectSelectedOptio
       }
     }
 
+    if (limit && limit > 0) {
+      output = output.slice(0, limit);
+      revampSelectedOptions = revampSelectedOptions.slice(0, limit);
+      normalizedSelectedOptions = Object.fromEntries(Object.entries(normalizedSelectedOptions).slice(0, limit));
+    }
+
     return {
       formatSelectedOptions: output,
       normalizedSelectedOptions: normalizedSelectedOptions,
@@ -593,7 +605,8 @@ var filterSelectedOptions = function filterSelectedOptions() {
       _ref4$propSelectedOpt = _ref4.propSelectedOptions,
       propSelectedOptions = _ref4$propSelectedOpt === void 0 ? dummyArray : _ref4$propSelectedOpt,
       _ref4$disabledOptions = _ref4.disabledOptions,
-      disabledOptions = _ref4$disabledOptions === void 0 ? dummyArray : _ref4$disabledOptions;
+      disabledOptions = _ref4$disabledOptions === void 0 ? dummyArray : _ref4$disabledOptions,
+      limit = _ref4.limit;
 
   // eslint-disable-next-line no-param-reassign
   selectedOptions = selectedOptions || dummyArray; // eslint-disable-next-line no-param-reassign
@@ -617,8 +630,18 @@ var filterSelectedOptions = function filterSelectedOptions() {
 
     return true;
   });
+  var totalSelectedOptions = [].concat(_toConsumableArray(oldValidSelectedOptions), _toConsumableArray(newlyAddedOptions));
+
+  if (limit && limit > 0) {
+    if (totalSelectedOptions.length > limit) {
+      return {
+        newSelectedOptions: totalSelectedOptions.slice(0, limit)
+      };
+    }
+  }
+
   return {
-    newSelectedOptions: [].concat(_toConsumableArray(oldValidSelectedOptions), _toConsumableArray(newlyAddedOptions))
+    newSelectedOptions: totalSelectedOptions
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.4.8",
+  "version": "1.4.10-exp-0",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -39,7 +39,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node prePublish.js && npm run test-clean && npm run customTest && npm run download && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node prePublish.js && npm run test-clean && npm run download && npm run css:review && npm run review:props ",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -48,7 +48,7 @@
     "snap-update": "npm run test-clean && npm run test -- -u",
     "sstest": "npm run init && react-cli sstest",
     "build:external": "npm run clean &&  npm run init  && npm run docsjs:build && npm run build:externalDocCopy && react-cli build:component:umd && npm run externalDocHTMLChange",
-    "download": "react-cli clean ./node_modules ./package-lock.json && npm install && cd ../ && npm run download",
+    "download": "react-cli clean ./node_modules ./package-lock.json && npm install ",
     "expublish": "npm publish --tag experimental-version",
     "css:lineheight:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/lineheight_automation/lineHeightErrorCheck.js ./src/",
     "cssVariableConvert": "react-cli variableConverter ./lib ./lib && react-cli variableConverter ./es ./es",
@@ -77,18 +77,19 @@
     "@zohodesk-private/css-variable-migrator": "1.0.9",
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
-    "@zohodesk/a11y": "2.3.6",
+    "@zohodesk/a11y": "2.3.7",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.3",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/icons": "1.1.0",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/svg": "1.2.1",
+    "@zohodesk/svg": "1.2.2",
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.1.0",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3",
-    "velocity-react": "1.4.3"
+    "velocity-react": "1.4.3",
+    "@zohodesk/react-cli": "1.1.27"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -99,13 +100,13 @@
   "peerDependencies": {
     "@zohodesk/icons": "1.1.0",
     "@zohodesk/variables": "1.1.0",
-    "@zohodesk/svg": "1.2.1",
+    "@zohodesk/svg": "1.2.2",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/utils": "1.3.14",
-    "@zohodesk/a11y": "2.3.6",
+    "@zohodesk/a11y": "2.3.7",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/dotkit": "1.0.3"
   }