Pull in main repo

2022-12-27 20:09:25 +03:00 · 2022-12-27 20:09:25 +03:00 · 03269cc99f
commit 03269cc99f
parent d8993da744 521bf00615
21 changed files with 161 additions and 230 deletions
--- a/README.md
+++ b/README.md
@ -86,6 +86,13 @@ const dropdown = new DropDown({
 4. Push to the branch: `git push origin my-new-feature`
 5. Submit a pull request :D

+## Compatibility
+
+Совместимость с приложениями |  JS  |  React  | Angular |  Vue |
+| -------------------------- | :--: | :-----: | :-----: | :--: |
+| CG-SELECT                  | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |  ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |  ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png)|
+| Комментарий                | Протестирован в Js приложениях и работает успешно.|Работает только с костылем в виде `setTimeout()` | тесты не проведены| тесты не проведены |
+
 ## History

 16.12.2022 - релиз версии 0.1.0!
--- a/documentation/cg-dropdown.js.html
+++ b/documentation/cg-dropdown.js.html
@ -25,14 +25,14 @@
            getFormatItem,
            getSelectText,
            customStylesFormat,
-            nativOptionMultiple,
-            nativOptionOrdinary,
+            nativeOptionMultiple,
+            nativeOptionOrdinary,
            clearSelect,
          } from './components/utils';
          import {
            createBreadcrumb,
            createInputSearch,
-            createNativSelectOption,
+            createNativeSelectOption,
            createNativeSelect,
          } from './components/create-element';
          import { ru, en } from './language/language';
@ -416,19 +416,19 @@
              }
          
              const ulList = document.createElement('ul');
-              const nativSelect = createNativeSelect();
+              const nativeSelect = createNativeSelect();
          
-              let intputSearch = '';
+              let inputSearch = '';
              this.random = random;
          
              if (searchMode) {
                if (lenguage === 'ru') {
-                  intputSearch = createInputSearch(random, ru.placeholder);
+                  inputSearch = createInputSearch(random, ru.placeholder);
                } else {
-                  intputSearch = createInputSearch(random, en.placeholder);
+                  inputSearch = createInputSearch(random, en.placeholder);
                }
          
-                ulList.appendChild(intputSearch);
+                ulList.appendChild(inputSearch);
              }
          
              ulList.classList.add('list');
@ -441,10 +441,10 @@
              this.#element.appendChild(ulList);
          
              this.#items.forEach((dataItem) => {
-                this.#element.appendChild(nativSelect);
+                this.#element.appendChild(nativeSelect);
          
                const liItem = document.createElement('li');
-                const nativOption = createNativSelectOption();
+                const nativeOption = createNativeSelectOption();
                const strongItem = document.createElement('strong');
          
                liItem.classList.add('list__item');
@ -460,17 +460,17 @@
                    checkBox.classList.add('displayHide');
                  }
          
-                  nativSelect.setAttribute('multiple', 'multiple');
+                  nativeSelect.setAttribute('multiple', 'multiple');
                }
          
                let textNode = '';
          
                if (dataItem.title) {
-                  nativOption.text = dataItem.title;
-                  nativOption.value = dataItem.title;
+                  nativeOption.text = dataItem.title;
+                  nativeOption.value = dataItem.title;
                  textNode = document.createTextNode(dataItem.title);
          
-                  nativSelect.appendChild(nativOption);
+                  nativeSelect.appendChild(nativeOption);
                  liItem.appendChild(textNode);
                  ulList.appendChild(liItem);
                } else {
@ -546,7 +546,7 @@
              const response = await fetch(url);
              const dataUrl = await response.json();
          
-              const nativSelect = createNativeSelect();
+              const nativeSelect = createNativeSelect();
          
              dataUrl.forEach((dataItem, index) => {
                const item = {
@ -556,7 +556,7 @@
                };
                const ulUrl = this.#element.querySelector('.list');
          
-                const nativOption = createNativSelectOption();
+                const nativeOption = createNativeSelectOption();
                const liUrl = document.createElement('li');
                const textUrl = document.createTextNode(item.title);
          
@ -568,23 +568,23 @@
                  }
          
                  checkBox.setAttribute('id', `chbox-${item.id}`);
-                  nativSelect.setAttribute('multiple', 'multiple');
+                  nativeSelect.setAttribute('multiple', 'multiple');
          
                  liUrl.appendChild(checkBox);
                }
          
                liUrl.classList.add('list__item');
-                nativOption.value = item.title;
-                nativOption.text = item.title;
+                nativeOption.value = item.title;
+                nativeOption.text = item.title;
          
-                nativSelect.appendChild(nativOption);
+                nativeSelect.appendChild(nativeOption);
                liUrl.appendChild(textUrl);
                ulUrl.appendChild(liUrl);
          
                this.#items.push(item);
              });
          
-              this.#element.appendChild(nativSelect);
+              this.#element.appendChild(nativeSelect);
          
              this.#items.filter((item, index) => {
                if (typeof item !== 'object') {
@ -643,7 +643,7 @@
          
              const options = this.#element.querySelectorAll('.list__item');
              const select = this.#element.querySelector('.selected');
-              const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
+              const nativeOption = this.#element.querySelectorAll('.nativeSelect__nativeOption');
          
              const ulMultipul = document.createElement('ul');
          
@ -686,7 +686,7 @@
                      }
          
                      if (checkIndex === -1) {
-                        nativOptionMultiple(nativOption, item.title, true);
+                        nativeOptionMultiple(nativeOption, item.title, true);
                        this.#indexes.push(index);
                        select.innerText = '';
          
@ -714,7 +714,7 @@
          
                        this.#indexes.splice(checkIndex, 1);
                        this.#selectedItems.splice(checkIndex, 1);
-                        nativOptionMultiple(nativOption, item.title, false);
+                        nativeOptionMultiple(nativeOption, item.title, false);
                      }
          
                      if (!this.#selectedItems.length) {
@ -731,7 +731,7 @@
                    select.innerText = item.title;
                    this.#selectedItems = item;
          
-                    nativOptionOrdinary(nativOption, item.title);
+                    nativeOptionOrdinary(nativeOption, item.title);
          
                    options.forEach((option) => {
                      option.classList.remove('active');
--- a/documentation/create-element.js.html
+++ b/documentation/create-element.js.html
@ -21,7 +21,7 @@
        <article>
          <pre
            class="prettyprint source linenums"
-          ><code>import { customStylesFormat, nativOptionMultiple } from './utils';
+          ><code>import { customStylesFormat, nativeOptionMultiple } from './utils';
            /**
             * @module createBreadcrumb
             */
@ -39,7 +39,7 @@
              const { placeholder, styles } = option;
            
              const selected = element.querySelector('.selected');
-              const nativOption = element.querySelectorAll('.nativSelect__nativOption');
+              const nativeOption = element.querySelectorAll('.nativeSelect__nativeOption');
            
              const liChip = document.createElement('li');
              const textNode = document.createTextNode(title);
@ -67,7 +67,7 @@
              svgIcon.addEventListener('click', (event) => {
                event.preventDefault();
                event.stopPropagation();
-                nativOptionMultiple(nativOption, title, false);
+                nativeOptionMultiple(nativeOption, title, false);
            
                const deleteIcon = indexes.indexOf(index);
                let checkBox = '';
@ -99,22 +99,22 @@
             * @returns {HTMLSelectElement} Возвращает созданный нативный селект
             */
            export function createNativeSelect() {
-              const nativSelect = document.createElement('select');
+              const nativeSelect = document.createElement('select');
            
-              nativSelect.setAttribute('name', 'dataSelect');
-              nativSelect.classList.add('nativSelect');
-              return nativSelect;
+              nativeSelect.setAttribute('name', 'dataSelect');
+              nativeSelect.classList.add('nativeSelect');
+              return nativeSelect;
            }
            
            /**
             * Метод который создает Options для нативного селекта
             * @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
             */
-            export function createNativSelectOption() {
-              const nativOption = document.createElement('option');
+            export function createNativeSelectOption() {
+              const nativeOption = document.createElement('option');
            
-              nativOption.classList.add('nativSelect__nativOption');
-              return nativOption;
+              nativeOption.classList.add('nativeSelect__nativeOption');
+              return nativeOption;
            }
            
            /**
@ -124,23 +124,23 @@
             * @returns {HTMLInputElement} Возвращает сформированный input елемент.
             */
            export function createInputSearch(random, lenguage) {
-              const intputSearch = document.createElement('input');
+              const inputSearch = document.createElement('input');
            
-              intputSearch.type = 'text';
-              intputSearch.classList.add('inputSearch');
-              intputSearch.setAttribute('id', `searchSelect-${random}`);
+              inputSearch.type = 'text';
+              inputSearch.classList.add('inputSearch');
+              inputSearch.setAttribute('id', `searchSelect-${random}`);
            
              if (lenguage) {
-                intputSearch.setAttribute('placeholder', `${lenguage}`);
+                inputSearch.setAttribute('placeholder', `${lenguage}`);
              } else {
-                intputSearch.setAttribute('placeholder', 'Search...');
+                inputSearch.setAttribute('placeholder', 'Search...');
              }
            
-              intputSearch.addEventListener('click', (e) => {
+              inputSearch.addEventListener('click', (e) => {
                e.preventDefault();
              });
            
-              return intputSearch;
+              return inputSearch;
            }
 </code></pre>
        </article>
--- a/documentation/module-Utils.html
+++ b/documentation/module-Utils.html
@ -483,8 +483,8 @@
            </dd>
          </dl>

-          <h4 class="name" id=".nativOptionMultiple">
-            <span class="type-signature">(static) </span>nativOptionMultiple<span class="signature"
+          <h4 class="name" id=".nativeOptionMultiple">
+            <span class="type-signature">(static) </span>nativeOptionMultiple<span class="signature"
              >(element, item, condition)</span
            ><span class="type-signature"></span>
          </h4>
@ -552,8 +552,8 @@
            </dd>
          </dl>

-          <h4 class="name" id=".nativOptionOrdinary">
-            <span class="type-signature">(static) </span>nativOptionOrdinary<span class="signature"
+          <h4 class="name" id=".nativeOptionOrdinary">
+            <span class="type-signature">(static) </span>nativeOptionOrdinary<span class="signature"
              >(element, item)</span
            ><span class="type-signature"></span>
          </h4>
--- a/documentation/module-createElementChips.html
+++ b/documentation/module-createElementChips.html
@ -219,8 +219,8 @@
            </dd>
          </dl>

-          <h4 class="name" id=".createNativSelectOption">
-            <span class="type-signature">(static) </span>createNativSelectOption<span
+          <h4 class="name" id=".createNativeSelectOption">
+            <span class="type-signature">(static) </span>createNativeSelectOption<span
              class="signature"
              >()</span
            ><span class="type-signature"> &rarr; {HTMLOptionElement}</span>
--- a/documentation/utils.js.html
+++ b/documentation/utils.js.html
@ -155,7 +155,7 @@
            * @param {NodeList} element NodeList нативного селекта
            * @param {object} item выбранный элемент в кастомном селекте
            */
-           export function nativOptionOrdinary(element, item) {
+           export function nativeOptionOrdinary(element, item) {
             element.forEach((option) => {
               option.removeAttribute('selected');
               if (option.textContent === item) {
@ -170,7 +170,7 @@
            * @param {object} item выбранный элемент в кастомном селекте
            * @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
            */
-           export function nativOptionMultiple(element, item, condition) {
+           export function nativeOptionMultiple(element, item, condition) {
             element.forEach((option) => {
               if (condition == true) {
                 if (option.textContent === item) {
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
-  "name": "dropdown-list",
-  "version": "0.0.1",
+  "name": "cg-select",
+  "version": "0.1.14",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
-      "name": "dropdown-list",
-      "version": "0.0.1",
+      "name": "cg-select",
+      "version": "0.1.14",
      "license": "ISC",
      "dependencies": {
        "@parcel/optimizer-css": "^2.8.0",
@ -774,45 +774,6 @@
        "url": "https://opencollective.com/parcel"
      }
    },
-    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.8.0.tgz",
-      "integrity": "sha512-udzbe3jjbpfKlRE9pdlROAa+lvAjS1L/AzN6r2j1y/Fsn7ze/NfvnCFw6o2YNIrXg002aQ7M1St/x1fdGfmVKA==",
-      "peer": true,
-      "dependencies": {
-        "@mischnic/json-sourcemap": "^0.1.0",
-        "@parcel/cache": "2.8.0",
-        "@parcel/diagnostic": "2.8.0",
-        "@parcel/events": "2.8.0",
-        "@parcel/fs": "2.8.0",
-        "@parcel/graph": "2.8.0",
-        "@parcel/hash": "2.8.0",
-        "@parcel/logger": "2.8.0",
-        "@parcel/package-manager": "2.8.0",
-        "@parcel/plugin": "2.8.0",
-        "@parcel/source-map": "^2.1.1",
-        "@parcel/types": "2.8.0",
-        "@parcel/utils": "2.8.0",
-        "@parcel/workers": "2.8.0",
-        "abortcontroller-polyfill": "^1.1.9",
-        "base-x": "^3.0.8",
-        "browserslist": "^4.6.6",
-        "clone": "^2.1.1",
-        "dotenv": "^7.0.0",
-        "dotenv-expand": "^5.1.0",
-        "json5": "^2.2.0",
-        "msgpackr": "^1.5.4",
-        "nullthrows": "^1.1.1",
-        "semver": "^5.7.1"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
    "node_modules/@parcel/optimizer-css/node_modules/@parcel/diagnostic": {
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.0.tgz",
@ -878,23 +839,6 @@
        "url": "https://opencollective.com/parcel"
      }
    },
-    "node_modules/@parcel/optimizer-css/node_modules/@parcel/graph": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/@parcel/graph/-/graph-2.8.0.tgz",
-      "integrity": "sha512-JvAyvBpGmhZ30bi+hStQr52eu+InfJBoiN9Z/32byIWhXEl02EAOwfsPqAe+FGCsdgXnnCGg5F9ZCqwzZ9dwbw==",
-      "peer": true,
-      "dependencies": {
-        "@parcel/utils": "2.8.0",
-        "nullthrows": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
    "node_modules/@parcel/optimizer-css/node_modules/@parcel/hash": {
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.0.tgz",
@ -1778,7 +1722,8 @@
    "node_modules/abortcontroller-polyfill": {
      "version": "1.7.3",
      "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz",
-      "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q=="
+      "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==",
+      "dev": true
    },
    "node_modules/acorn": {
      "version": "8.8.0",
@ -1855,6 +1800,7 @@
      "version": "3.0.9",
      "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
      "integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
+      "dev": true,
      "dependencies": {
        "safe-buffer": "^5.0.1"
      }
@ -2006,6 +1952,7 @@
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "dev": true,
      "engines": {
        "node": ">=0.8"
      }
@ -2193,6 +2140,7 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-7.0.0.tgz",
      "integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==",
+      "dev": true,
      "engines": {
        "node": ">=6"
      }
@ -2200,7 +2148,8 @@
    "node_modules/dotenv-expand": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
-      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
+      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
+      "dev": true
    },
    "node_modules/electron-to-chromium": {
      "version": "1.4.251",
@ -3302,6 +3251,7 @@
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
      "funding": [
        {
          "type": "github",
@ -4070,38 +4020,6 @@
            "chalk": "^4.1.0"
          }
        },
-        "@parcel/core": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.8.0.tgz",
-          "integrity": "sha512-udzbe3jjbpfKlRE9pdlROAa+lvAjS1L/AzN6r2j1y/Fsn7ze/NfvnCFw6o2YNIrXg002aQ7M1St/x1fdGfmVKA==",
-          "peer": true,
-          "requires": {
-            "@mischnic/json-sourcemap": "^0.1.0",
-            "@parcel/cache": "2.8.0",
-            "@parcel/diagnostic": "2.8.0",
-            "@parcel/events": "2.8.0",
-            "@parcel/fs": "2.8.0",
-            "@parcel/graph": "2.8.0",
-            "@parcel/hash": "2.8.0",
-            "@parcel/logger": "2.8.0",
-            "@parcel/package-manager": "2.8.0",
-            "@parcel/plugin": "2.8.0",
-            "@parcel/source-map": "^2.1.1",
-            "@parcel/types": "2.8.0",
-            "@parcel/utils": "2.8.0",
-            "@parcel/workers": "2.8.0",
-            "abortcontroller-polyfill": "^1.1.9",
-            "base-x": "^3.0.8",
-            "browserslist": "^4.6.6",
-            "clone": "^2.1.1",
-            "dotenv": "^7.0.0",
-            "dotenv-expand": "^5.1.0",
-            "json5": "^2.2.0",
-            "msgpackr": "^1.5.4",
-            "nullthrows": "^1.1.1",
-            "semver": "^5.7.1"
-          }
-        },
        "@parcel/diagnostic": {
          "version": "2.8.0",
          "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.0.tgz",
@ -4136,16 +4054,6 @@
            "detect-libc": "^1.0.3"
          }
        },
-        "@parcel/graph": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/@parcel/graph/-/graph-2.8.0.tgz",
-          "integrity": "sha512-JvAyvBpGmhZ30bi+hStQr52eu+InfJBoiN9Z/32byIWhXEl02EAOwfsPqAe+FGCsdgXnnCGg5F9ZCqwzZ9dwbw==",
-          "peer": true,
-          "requires": {
-            "@parcel/utils": "2.8.0",
-            "nullthrows": "^1.1.1"
-          }
-        },
        "@parcel/hash": {
          "version": "2.8.0",
          "resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.0.tgz",
@ -4702,7 +4610,8 @@
    "abortcontroller-polyfill": {
      "version": "1.7.3",
      "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz",
-      "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q=="
+      "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==",
+      "dev": true
    },
    "acorn": {
      "version": "8.8.0",
@ -4758,6 +4667,7 @@
      "version": "3.0.9",
      "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
      "integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
+      "dev": true,
      "requires": {
        "safe-buffer": "^5.0.1"
      }
@ -4853,7 +4763,8 @@
    "clone": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
-      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "dev": true
    },
    "color-convert": {
      "version": "2.0.1",
@ -4988,12 +4899,14 @@
    "dotenv": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-7.0.0.tgz",
-      "integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g=="
+      "integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==",
+      "dev": true
    },
    "dotenv-expand": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
-      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
+      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
+      "dev": true
    },
    "electron-to-chromium": {
      "version": "1.4.251",
@ -5717,7 +5630,8 @@
    "safe-buffer": {
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true
    },
    "sass": {
      "version": "1.54.9",
--- a/package.json
+++ b/package.json
@ -1,8 +1,12 @@
 {
  "name": "cg-select",
-  "version": "0.1.14",
-  "description": "Select control created with JS for use in JS/React",
-  "author": "MaxOvs19",
+  "version": "0.1.15",
+  "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
+  "author": {
+    "name": "CraftGroup",
+    "url": "https://github.com/apuc/"
+  },
+  "homepage": "https://cg-select.itguild.info",
  "scripts": {
    "start": "parcel src/page/index.html -p 4500 --open ",
    "build": "parcel build ./src/page/index.html",
@ -11,14 +15,12 @@
  },
  "repository": {
    "type": "git",
-    "url": "git+https://github.com/MaxOvs19/cg-select.git"
+    "url": "git+https://github.com/apuc/cg-select.git"
  },
-
  "license": "ISC",
  "bugs": {
-    "url": "https://github.com/MaxOvs19/cg-select/issues"
+    "url": "https://github.com/apuc/cg-select/issues"
  },
-  "homepage": "https://cg-select.itguild.info",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.7.0",
    "parcel": "^2.7.0",
@ -27,5 +29,12 @@
  "dependencies": {
    "@parcel/optimizer-css": "^2.8.0",
    "gh-pages": "^4.0.0"
-  }
+  },
+  "keywords": [
+    "select",
+    "autocomplete",
+    "dropdown",
+    "multiselect",
+    "tag"
+  ]
 }
--- a/src/cg-select.js
+++ b/src/cg-select.js
@ -4,24 +4,22 @@ import {
  getFormatItem,
  getSelectText,
  customStylesFormat,
-  nativOptionMultiple,
-  nativOptionOrdinary,
+  nativeOptionMultiple,
+  nativeOptionOrdinary,
  clearSelect,
 } from './components/utils';
 import {
  createBreadcrumb,
  createInputSearch,
-  createNativSelectOption,
+  createNativeSelectOption,
  createNativeSelect,
 } from './components/create-element';
 import { ru, en } from './language/language';

-
-
 /**
 * @class Описание класса DropDown
 * @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
- *@author Овсяников Максим
+ * @author Овсяников Максим
 */
 export class DropDown {
  /**
@ -219,14 +217,14 @@ export class DropDown {
    }

    const select = this.#element.querySelector('.cg-select');
-    const nativSelect = this.#element.querySelector('.nativSelect');
+    const nativeSelect = this.#element.querySelector('.nativeSelect');
    if (value === true) {
      this.#element.setAttribute('disabled', true);
-      nativSelect.setAttribute('disabled', true);
+      nativeSelect.setAttribute('disabled', true);
      select.classList.add('disabled');
    } else {
      this.#element.removeAttribute('disabled');
-      nativSelect.removeAttribute('disabled');
+      nativeSelect.removeAttribute('disabled');
      select.classList.remove('disabled');
    }
  }
@ -409,20 +407,20 @@ export class DropDown {
    }

    const ulList = document.createElement('ul');
-    const nativSelect = createNativeSelect();
+    const nativeSelect = createNativeSelect();

-    let intputSearch = '';
+    let inputSearch = '';
    this.random = random;

    if (searchMode) {
      if (language === 'ru') {
-        intputSearch = createInputSearch(random, ru.placeholder);
+        inputSearch = createInputSearch(random, ru.placeholder);
      } else {
-        intputSearch = createInputSearch(random, en.placeholder);
+        inputSearch = createInputSearch(random, en.placeholder);
      }
      const { search } = styles;
-      customStylesFormat(search, intputSearch);
-      ulList.appendChild(intputSearch);
+      customStylesFormat(search, inputSearch);
+      ulList.appendChild(inputSearch);
    }

    ulList.classList.add('list');
@ -435,10 +433,10 @@ export class DropDown {
    this.#element.appendChild(ulList);

    this.#items.forEach((dataItem) => {
-      this.#element.appendChild(nativSelect);
+      this.#element.appendChild(nativeSelect);

      const liItem = document.createElement('li');
-      const nativOption = createNativSelectOption();
+      const nativeOption = createNativeSelectOption();
      const strongItem = document.createElement('strong');

      liItem.classList.add('list__item');
@ -454,17 +452,17 @@ export class DropDown {
          checkBox.classList.add('displayHide');
        }

-        nativSelect.setAttribute('multiple', 'multiple');
+        nativeSelect.setAttribute('multiple', 'multiple');
      }

      let textNode = '';

      if (dataItem.title) {
-        nativOption.text = dataItem.title;
-        nativOption.value = dataItem.title;
+        nativeOption.text = dataItem.title;
+        nativeOption.value = dataItem.title;
        textNode = document.createTextNode(dataItem.title);

-        nativSelect.appendChild(nativOption);
+        nativeSelect.appendChild(nativeOption);
        liItem.appendChild(textNode);
        ulList.appendChild(liItem);
      } else {
@ -540,7 +538,7 @@ export class DropDown {
    const response = await fetch(url);
    const dataUrl = await response.json();

-    const nativSelect = createNativeSelect();
+    const nativeSelect = createNativeSelect();

    dataUrl.forEach((dataItem, index) => {
      const item = {
@ -550,7 +548,7 @@ export class DropDown {
      };
      const ulUrl = this.#element.querySelector('.list');

-      const nativOption = createNativSelectOption();
+      const nativeOption = createNativeSelectOption();
      const liUrl = document.createElement('li');
      const textUrl = document.createTextNode(item.title);

@ -562,23 +560,23 @@ export class DropDown {
        }

        checkBox.setAttribute('id', `chbox-${item.id}`);
-        nativSelect.setAttribute('multiple', 'multiple');
+        nativeSelect.setAttribute('multiple', 'multiple');

        liUrl.appendChild(checkBox);
      }

      liUrl.classList.add('list__item');
-      nativOption.value = item.title;
-      nativOption.text = item.title;
+      nativeOption.value = item.title;
+      nativeOption.text = item.title;

-      nativSelect.appendChild(nativOption);
+      nativeSelect.appendChild(nativeOption);
      liUrl.appendChild(textUrl);
      ulUrl.appendChild(liUrl);

      this.#items.push(item);
    });

-    this.#element.appendChild(nativSelect);
+    this.#element.appendChild(nativeSelect);

    this.#items.filter((item, index) => {
      if (typeof item !== 'object') {
@ -637,7 +635,7 @@ export class DropDown {

    const options = this.#element.querySelectorAll('.list__item');
    const select = this.#element.querySelector('.selected');
-    const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
+    const nativeOption = this.#element.querySelectorAll('.nativeSelect__nativeOption');

    const ulMultipul = document.createElement('ul');

@ -680,7 +678,7 @@ export class DropDown {
            }

            if (checkIndex === -1) {
-              nativOptionMultiple(nativOption, item.title, true);
+              nativeOptionMultiple(nativeOption, item.title, true);
              this.#indexes.push(index);
              select.innerText = '';

@ -708,7 +706,7 @@ export class DropDown {

              this.#indexes.splice(checkIndex, 1);
              this.#selectedItems.splice(checkIndex, 1);
-              nativOptionMultiple(nativOption, item.title, false);
+              nativeOptionMultiple(nativeOption, item.title, false);
            }

            if (!this.#selectedItems.length) {
@ -725,7 +723,7 @@ export class DropDown {
          select.innerText = item.title;
          this.#selectedItems = item;

-          nativOptionOrdinary(nativOption, item.title);
+          nativeOptionOrdinary(nativeOption, item.title);

          options.forEach((option) => {
            option.classList.remove('active');
--- a/src/components/create-element.js
+++ b/src/components/create-element.js
@ -1,4 +1,4 @@
-import { customStylesFormat, nativOptionMultiple } from './utils';
+import { customStylesFormat, nativeOptionMultiple } from './utils';
 /**
 * @module createBreadcrumb
 */
@ -16,7 +16,7 @@ export function createBreadcrumb(data, title, index, id) {
  const { placeholder, styles } = option;

  const selected = element.querySelector('.selected');
-  const nativOption = element.querySelectorAll('.nativSelect__nativOption');
+  const nativeOption = element.querySelectorAll('.nativeSelect__nativeOption');

  const liChip = document.createElement('li');
  const textNode = document.createTextNode(title);
@ -44,7 +44,7 @@ export function createBreadcrumb(data, title, index, id) {
  svgIcon.addEventListener('click', (event) => {
    event.preventDefault();
    event.stopPropagation();
-    nativOptionMultiple(nativOption, title, false);
+    nativeOptionMultiple(nativeOption, title, false);

    const deleteIcon = indexes.indexOf(index);
    let checkBox = '';
@ -76,22 +76,22 @@ export function createBreadcrumb(data, title, index, id) {
 * @returns {HTMLSelectElement} Возвращает созданный нативный селект
 */
 export function createNativeSelect() {
-  const nativSelect = document.createElement('select');
+  const nativeSelect = document.createElement('select');

-  nativSelect.setAttribute('name', 'dataSelect');
-  nativSelect.classList.add('nativSelect');
-  return nativSelect;
+  nativeSelect.setAttribute('name', 'dataSelect');
+  nativeSelect.classList.add('nativeSelect');
+  return nativeSelect;
 }

 /**
 * Метод который создает Options для нативного селекта
 * @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
 */
-export function createNativSelectOption() {
-  const nativOption = document.createElement('option');
+export function createNativeSelectOption() {
+  const nativeOption = document.createElement('option');

-  nativOption.classList.add('nativSelect__nativOption');
-  return nativOption;
+  nativeOption.classList.add('nativeSelect__nativeOption');
+  return nativeOption;
 }

 /**
@ -101,21 +101,21 @@ export function createNativSelectOption() {
 * @returns {HTMLInputElement} Возвращает сформированный input елемент.
 */
 export function createInputSearch(random, lenguage) {
-  const intputSearch = document.createElement('input');
+  const inputSearch = document.createElement('input');

-  intputSearch.type = 'text';
-  intputSearch.classList.add('inputSearch');
-  intputSearch.setAttribute('id', `searchSelect-${random}`);
+  inputSearch.type = 'text';
+  inputSearch.classList.add('inputSearch');
+  inputSearch.setAttribute('id', `searchSelect-${random}`);

  if (lenguage) {
-    intputSearch.setAttribute('placeholder', `${lenguage}`);
+    inputSearch.setAttribute('placeholder', `${lenguage}`);
  } else {
-    intputSearch.setAttribute('placeholder', 'Search...');
+    inputSearch.setAttribute('placeholder', 'Search...');
  }

-  intputSearch.addEventListener('click', (e) => {
+  inputSearch.addEventListener('click', (e) => {
    e.preventDefault();
  });

-  return intputSearch;
+  return inputSearch;
 }
--- a/src/components/utils.js
+++ b/src/components/utils.js
@ -134,7 +134,7 @@ export function getFormatItem(dataItem, index) {
 * @param {NodeList} element NodeList нативного селекта
 * @param {object} item выбранный элемент в кастомном селекте
 */
-export function nativOptionOrdinary(element, item) {
+export function nativeOptionOrdinary(element, item) {
  element.forEach((option) => {
    option.removeAttribute('selected');
    if (option.textContent === item) {
@ -149,7 +149,7 @@ export function nativOptionOrdinary(element, item) {
 * @param {object} item выбранный элемент в кастомном селекте
 * @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
 */
-export function nativOptionMultiple(element, item, condition) {
+export function nativeOptionMultiple(element, item, condition) {
  element.forEach((option) => {
    if (condition == true) {
      if (option.textContent === item) {
--- a/src/images/no.png
+++ b/src/images/no.png
--- a/src/images/yes.png
+++ b/src/images/yes.png
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,3 @@
+import { DropDown } from './cg-select';
+
+export default DropDown;
--- a/src/language/language.js
+++ b/src/language/language.js
@ -5,7 +5,7 @@ export const ru = {
 };

 export const en = {
-  selectPlaceholder: 'Select...',
+  selectPlaceholder: 'Select element...',
  placeholder: 'Search...',
  textInListSearch: 'No matches...',
 };
--- a/src/main.scss
+++ b/src/main.scss
@ -1,5 +1,5 @@
-@import './style/nativSelect.scss';
-@import './style/scrolbar.scss';
+@import './style/nativeSelect.scss';
+@import './style/scrollbar.scss';
@import './style/svgStyle.scss';
@import './style/whiteTheme.scss';

--- a/src/page/ExemplePage.scss
+++ b/src/page/ExemplePage.scss
--- a/src/page/index.html
+++ b/src/page/index.html
@ -5,7 +5,7 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cg-Select</title>
-    <link href="/src/page/ExemplePage.scss" rel="stylesheet" />
+    <link href="/src/page/example.scss" rel="stylesheet" />
  </head>
  <body class="body-example">
    <div class="container">
--- a/src/page/index.js
+++ b/src/page/index.js
@ -1,4 +1,4 @@
-import { DropDown } from '../cg-select';
+import DropDown from '../index';
 import './example';

 // ------------------------------Обычный селект--------------------
--- a/src/style/nativeSelect.scss
+++ b/src/style/nativeSelect.scss
@ -1,4 +1,4 @@
-.nativSelect {
+.nativeSelect {
  border: none;
  cursor: pointer;
  display: none;
@ -13,13 +13,13 @@
  -o-border-radius: 5px;
  margin: 0;

-  &__nativOption {
+  &__nativeOption {
    border: 1px #0a0b0e solid;
  }
 }

 // @media (max-width: 576px) {
-//   .nativSelect {
+//   .nativeSelect {
 //     display: block;
 //     min-width: 235px;
 //     height: 50px;
--- a/src/style/scrollbar.scss
+++ b/src/style/scrollbar.scss