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

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/common/basic.module.css

@@ -1,5 +1,3 @@
-@charset 'utf-8';
-
 @font-face {
   font-family: Regular;
   src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');

package/lib/components_layer.module.css

@@ -0,0 +1 @@
+@layer dot-components, dot-components.theme, dot-components.core, dot-components.reset, dot-components.base, dot-components.animation, dot-components.transition, dot-components.utility, dot-components.layout, dot-components.semantic, dot-components.atom, dot-components.molecule, dot-components.organism, dot-components.page, dot-components.effect;

package/lib/v1/Popup/Popup.js

@@ -186,8 +186,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) {

package/lib/v1/Select/Select.js

@@ -185,8 +185,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-220.11",
+  "version": "1.0.0-temp-231",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -18,9 +18,10 @@
   ],
   "scripts": {
     "build:docs": "react-cli build:docs",
-    "lint": "react-cli lint",
+    "_lint": "react-cli lint",
     "lintAll": "react-cli lint ./src",
     "lintAllFix": "npm run lintAll --eslint:fix=true",
+    "lint": "npx eslint ./src",
     "clean": "react-cli clean build unittest coverage es lib assets && mkdir assets",
     "dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder  node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es",
     "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components && npm run build:variables",
@@ -37,16 +38,17 @@
     "rtl:watch": "react-cli rtl ./src ./es -w",
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
-    "prepare": "npm run init &&  npm run build && npm run rtl && npm run cssVariableConvert ",
+    "prepare": "npm run init &&  npm run css:build ",
     "prepublishOnly": "node prePublish.js && npm run download && npm run css:review && npm run review:props ",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
+    "customTest": "node ./__testUtils__/runTest.js",
     "test-clean": "react-cli clean ./coverage && react-cli clean ./unittest react-cli clean ./es && react-cli clean ./lib &&  react-cli clean ./package-lock.json &&  react-cli clean ./result.json ",
     "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",
+    "download": "react-cli clean ./node_modules ./package-lock.json && npm install --legacy-peer-deps && cd ../ && npm run download",
     "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",
@@ -54,10 +56,17 @@
     "variable:convert": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
     "variable:check": "node  ./node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json",
     "css:review": " npm run dubCheck && npm run css:lineheight:validate && npm run theme:validate ",
-    "theme:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation validate ./src ./.cli ./.cli/stringContains.js",
-    "theme:addignore": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation addignore ./src ./.cli ./.cli/stringContains.js",
+    "theme:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation validate ./src ./.cli ./.cli/themeValidate/stringContains.js",
+    "theme:addignore": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation addignore ./src ./.cli ./.cli/themeValidate/stringContains.js",
     "theme:removeignore": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation removeignore ./src ./.cli",
-    "review:props": "node ./node_modules/@zohodesk-private/react-prop-validator/es/propValidation.js propValidationArg.json "
+    "review:props": "node ./node_modules/@zohodesk-private/react-prop-validator/es/propValidation.js propValidationArg.json ",
+    "css:layer_config_generate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/scan_css_generate_json.js ./src ./assets css_layer_config.json",
+    "css:layer_wrap_es": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/write_layer_in_css.js ./es ./assets css_layer_config.json --rewrite=src=es --rewrite=assets=assets --skip-existing-layer",
+    "css:layer_wrap_lib": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/write_layer_in_css.js ./lib ./assets css_layer_config.json --rewrite=src=lib  --rewrite=assets=assets --skip-existing-layer",
+    "css:layer_generate_order": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/generate_layer_order.js  css_layer_config.json ./src/components_layer.module.css",
+    "css:layer_config_validate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/validate.js  css_layer_config.json ./src/ ./assets",
+    "css:build": "npm run css:layer_config_validate && npm run css:layer_generate_order && npm run build && npm run rtl && npm run cssVariableConvert  ",
+    "css:layer_remove": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/remove_layer.js ./es ./assets css_layer_config.json --rewrite=src=es  --rewrite=assets=assets"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.9",
@@ -65,16 +74,16 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
     "@zohodesk-private/color-variable-preprocessor": "1.2.0",
-    "@zohodesk-private/css-variable-migrator": "^1.0.8",
-    "@zohodesk-private/node-plugins": "1.1.8",
+    "@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.5",
+    "@zohodesk/a11y": "2.3.6",
     "@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.0",
+    "@zohodesk/svg": "1.2.1",
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.1.0",
     "@zohodesk/virtualizer": "1.0.3",
@@ -82,6 +91,7 @@
     "velocity-react": "1.4.3"
   },
   "dependencies": {
+    "@zohodesk/react-cli": "^1.1.27",
     "hoist-non-react-statics": "3.0.1",
     "react-transition-group": "2.5.0",
     "reselect": "4.0.0",
@@ -90,14 +100,18 @@
   "peerDependencies": {
     "@zohodesk/icons": "1.1.0",
     "@zohodesk/variables": "1.1.0",
-    "@zohodesk/svg": "1.2.0",
+    "@zohodesk/svg": "1.2.1",
     "@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.5",
+    "@zohodesk/a11y": "2.3.6",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/dotkit": "1.0.3"
+  },
+  "volta": {
+    "node": "16.16.0",
+    "npm": "6.14.18"
   }
 }

package/css_error.log

@@ -1 +0,0 @@
-Component Package error log:

package/install.md

@@ -1,10 +0,0 @@
-- For New :
-
-# npm i
-# npm run common_package_build
-
-For Update:
-
-# npm run download
-# npm run common_package_build
-

package/postPublish.js

@@ -1,8 +0,0 @@
-const { execSync } = require('child_process');
-const { version, name } = require('./package.json');
-const tagName = `${name}@${version}`;
-// const tagName = `${name.replace(/^@/g, "").replace(/\//g, "-")}-v-${version}}@${version}`;
-console.log(`going to add git tag...  ${tagName}`);
-
-execSync(`git tag -a ${tagName} -m ${tagName}`, { stdio: 'inherit' });
-execSync(`git push origin ${tagName}`, { stdio: 'inherit' });

package/prePublish.js

@@ -1,70 +0,0 @@
-const readline = require('readline');
-const { exec } = require('child_process');
-
-const rl = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout
-});
-
-console.log('\nNode.js version:', process.version);
-
-function runConsole(command, callback) {
-  exec(command, (error, stdout, stderr) => {
-    if (error) {
-      console.error('Error:', error.message);
-      return;
-    }
-
-    if (stderr) {
-      console.error('Error:', stderr);
-      return;
-    }
-
-    const npmVersion = stdout.trim();
-    console.log('\n' + command, npmVersion);
-    callback && callback();
-  });
-}
-
-function askQuestion1() {
-  rl.question('\nHave you updated the changelog in README.md? (yes/no): ', (answer) => {
-    if (answer.toLowerCase() === 'yes') {
-      console.log('\nGreat! Proceeding...');
-      askQuestion2();
-      // rl.close();
-      // Call the function or code to proceed further here.
-    } else if (answer.toLowerCase() === 'no') {
-      rl.close();
-      console.log('\nPlease Update the ChangeLog in README.md, then try again');
-      //throw new Error('\nPlease Update the ChangeLog in README.md, then try again');
-      process.exitCode = 1; // Exit the Node.js process with a success code.
-    } else {
-      console.log('\nInvalid answer. Please enter "yes" or "no".');
-      askQuestion1(); // Ask the question again if the input is not "yes" or "no".
-    }
-  });
-}
-
-function askQuestion2() {
-  rl.question('\nHave you verified the test snapshot? (yes/no): ', (answer) => {
-    if (answer.toLowerCase() === 'yes') {
-      console.log('\nGreat! Proceeding...');
-      rl.close();
-      // Call the function or code to proceed further here.
-    } else if (answer.toLowerCase() === 'no') {
-      rl.close();
-      //throw new Error('\nPlease Verify the snapshot results, then try again');
-      console.log('\nPlease Verify the snapshot results, then try again');
-      process.exitCode = 1; // Exit the Node.js process with a success code.
-    } else {
-      console.log('\nInvalid answer. Please enter "yes" or "no".');
-      askQuestion2(); // Ask the question again if the input is not "yes" or "no".
-    }
-  });
-}
-
-function getReactCliVersion() {
-  runConsole('react-cli --version', askQuestion1);
-}
-
-runConsole('npm --version', getReactCliVersion);

package/react-cli.config.js

@@ -1,24 +0,0 @@
-exports.config = {
-  "preprocess": {
-    "runner": "./preprocess/index.js"
-  },
-  "css": {
-    "plugins": {
-      "hasRTL": true,
-      "cssVariableReplacement": true
-    },
-    "patterns": {
-      "cssVariableReplacement": [
-        "**/src/**",
-        "**/lib/**",
-        "**/es/**",
-        "!**/node_modules/**"
-      ],
-      "hasRTL": [
-        "**/src/**",
-        "!**/node_modules/**"
-      ]
-    },
-    "cssVariableReplacementConfig": "./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
-  }
-}