@prof-dev/improved-select - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

lib/ImprovedSelect.d.ts

 import { EventEmitter } from "@prof-dev/event-emitter";
-declare type ImprovedSelectInfo = {
+type ImprovedSelectInfo = {
     isActive: boolean;
@@ -9,4 +9,6 @@ isSearchActive: boolean;
 };
-declare type ImprovedSelectEventType = "open" | "close" | "toggle" | "change";
-export declare class ImprovedSelect extends EventEmitter<ImprovedSelectEventType, ImprovedSelect> {
+type SelectEventType = "open" | "close" | "toggle" | "change";
+declare class Select extends EventEmitter<SelectEventType, ImprovedSelect> {
+}
+export declare class ImprovedSelect extends Select {
     private element;
@@ -17,2 +19,3 @@ private isActive;
     private toggleElements;
+    private activeToggleElement?;
     private closeElements;
@@ -27,2 +30,3 @@ private select;
     private isHtmlValue;
+    private cleanup?;
     constructor(element: HTMLElement);
@@ -39,4 +43,4 @@ private initChangeStateBehavior;
     private resetSearchState;
-    private fixBodyVisibility;
     info(): ImprovedSelectInfo;
+    private update;
     toggle(force?: boolean): void;
@@ -43,0 +47,0 @@ open(): void;

lib/ImprovedSelect.js

@@ -17,2 +17,38 @@ "use strict";
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __values = (this && this.__values) || function(o) {
@@ -48,9 +84,18 @@ var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
 var event_emitter_1 = require("@prof-dev/event-emitter");
+var dom_1 = require("@floating-ui/dom");
 var utils_1 = require("./utils");
 var improvedSelectElementsMap = new Map();
+var Select = /** @class */ (function (_super) {
+    __extends(Select, _super);
+    function Select() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return Select;
+}(event_emitter_1.EventEmitter));
 var ImprovedSelect = /** @class */ (function (_super) {
     __extends(ImprovedSelect, _super);
     function ImprovedSelect(element) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this) || this;
+        _this = _super.call(this) || this;
         _this.element = element;
@@ -67,2 +112,23 @@ _this.isActive = false;
         _this.isHtmlValue = false;
+        _this.update = function () { return __awaiter(_this, void 0, void 0, function () {
+            var _a, x, y;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!(this.activeToggleElement !== undefined && this.selectBody !== null)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, (0, dom_1.computePosition)(this.activeToggleElement, this.selectBody, {
+                                placement: "bottom",
+                                middleware: [(0, dom_1.offset)(8), (0, dom_1.flip)(), (0, dom_1.shift)({ padding: 12 })],
+                            })];
+                    case 1:
+                        _a = _b.sent(), x = _a.x, y = _a.y;
+                        Object.assign(this.selectBody.style, {
+                            left: "".concat(x, "px"),
+                            top: "".concat(y, "px"),
+                        });
+                        _b.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        }); };
         _this.reset = function () {
@@ -77,4 +143,5 @@ var e_1, _a;
                         var index = _c.value;
-                        if (_this.select.options[index] !== undefined) {
-                            _this.select.options[index].selected = true;
+                        var option = _this.select.options[index];
+                        if (option !== undefined) {
+                            option.selected = true;
                         }
@@ -157,3 +224,4 @@ }
             toggleElement.addEventListener("click", function () {
-                if (_this.isActive) {
+                _this.activeToggleElement = toggleElement;
+                if (_this.isActive === true) {
                     _this.close();
@@ -166,7 +234,2 @@ }
         });
-        if (this.element.hasAttribute("data-improved-select-modal") === false) {
-            this.on("toggle", function () {
-                _this.fixBodyVisibility();
-            });
-        }
     };
@@ -185,10 +248,12 @@ ImprovedSelect.prototype.initCloseBehavior = function () {
             linkedOption.addEventListener("click", function () {
-                if (_this.select && _this.select.options[index]) {
+                if (_this.select !== null && _this.select.options[index] !== undefined) {
                     var option = _this.select.options[index];
-                    if (_this.select.multiple) {
-                        option.selected = !option.selected;
+                    if (option !== undefined) {
+                        if (_this.select.multiple) {
+                            option.selected = !option.selected;
+                        }
+                        else {
+                            option.selected = true;
+                        }
                     }
-                    else {
-                        option.selected = true;
-                    }
                     _this.select.dispatchEvent(new Event("change", {
@@ -251,3 +316,3 @@ bubbles: true,
             });
-            this.element.classList.toggle("is-changed", utils_1.arrayEqual(this.defaultSelection, selectedOptions_1.map(function (option) { return option.index; })) === false);
+            this.element.classList.toggle("is-changed", (0, utils_1.arrayEqual)(this.defaultSelection, selectedOptions_1.map(function (option) { return option.index; })) === false);
         }
@@ -262,3 +327,4 @@ };
                 Array.from(this.select.options).forEach(function (option, index) {
-                    if (_this.linkedOptions[index]) {
+                    var linkedOption = _this.linkedOptions[index];
+                    if (linkedOption !== undefined) {
                         var valueMatch = searchValue_1.length > 0
@@ -270,3 +336,3 @@ ? _this.searchInString(option.value, searchValue_1)
                             : false;
-                        _this.linkedOptions[index].classList.toggle("is-hidden", searchValue_1.length > 0 &&
+                        linkedOption.classList.toggle("is-hidden", searchValue_1.length > 0 &&
                             valueMatch !== true &&
@@ -290,15 +356,2 @@ textMatch !== true);
     };
-    ImprovedSelect.prototype.fixBodyVisibility = function () {
-        if (this.selectBody) {
-            if (this.isActive) {
-                var _a = this.selectBody.getBoundingClientRect(), left = _a.left, width = _a.width;
-                var scrollBarWidth = window.innerWidth - document.body.clientWidth;
-                var offset = window.innerWidth - (left + width + 16 + scrollBarWidth);
-                this.selectBody.style.transform = "translate(" + Math.min(offset, 0) + "px, 0)";
-            }
-            else {
-                this.selectBody.removeAttribute("style");
-            }
-        }
-    };
     ImprovedSelect.prototype.info = function () {
@@ -314,5 +367,9 @@ return {
     ImprovedSelect.prototype.toggle = function (force) {
+        var _a;
+        (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
         this.isActive = this.element.classList.toggle("is-active", force);
-        if (this.element.hasAttribute("data-improved-select-modal")) {
-            document.body.classList.toggle("no-scroll", this.isActive);
+        if (this.isActive === true &&
+            this.activeToggleElement !== undefined &&
+            this.selectBody !== null) {
+            this.cleanup = (0, dom_1.autoUpdate)(this.activeToggleElement, this.selectBody, this.update);
         }
@@ -328,3 +385,3 @@ this.dispatch("toggle", this);
     ImprovedSelect.prototype.close = function () {
-        if (this.isActive) {
+        if (this.isActive === true) {
             this.toggle(false);
@@ -395,3 +452,3 @@ this.dispatch("close", this);
     return ImprovedSelect;
-}(event_emitter_1.EventEmitter));
+}(Select));
 exports.ImprovedSelect = ImprovedSelect;
@@ -398,0 +455,0 @@ document.addEventListener("mousedown", function (event) {

package.json

 {
   "name": "@prof-dev/improved-select",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Helper for live clicks events management",
@@ -9,4 +9,5 @@ "main": "lib/ImprovedSelect.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsc",
-    "clean": "tsc --build --clean"
+    "sass": "sass src/improved-select.scss lib/improved-select.css",
+    "build": "npm run clean && tsc && npm run sass",
+    "clean": "rimraf lib/*"
   },
@@ -27,15 +28,10 @@ "publishConfig": {
   "devDependencies": {
-    "clean-webpack-plugin": "*",
-    "css-loader": "^6.2.0",
-    "mini-css-extract-plugin": "^2.2.0",
-    "sass": "^1.37.5",
-    "sass-loader": "^12.1.0",
-    "ts-loader": "^9.2.5",
-    "typescript": "^4.3.5",
-    "webpack": "^5.48.0",
-    "webpack-cli": "^4.7.2"
+    "rimraf": "^3.0.2",
+    "sass": "^1.57.1",
+    "typescript": "^4.9.4"
   },
   "dependencies": {
-    "@prof-dev/event-emitter": "^1.0.3"
+    "@floating-ui/dom": "^1.1.0",
+    "@prof-dev/event-emitter": "^1.0.9"
   }
 }

src/ImprovedSelect.ts

 import { EventEmitter } from "@prof-dev/event-emitter";
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+} from "@floating-ui/dom";
 import { arrayEqual } from "./utils";
@@ -11,10 +18,9 @@
 };
-type ImprovedSelectEventType = "open" | "close" | "toggle" | "change";
+type SelectEventType = "open" | "close" | "toggle" | "change";
 
 const improvedSelectElementsMap = new Map<HTMLElement, ImprovedSelect>();
 
-export class ImprovedSelect extends EventEmitter<
-  ImprovedSelectEventType,
-  ImprovedSelect
-> {
+class Select extends EventEmitter<SelectEventType, ImprovedSelect> {}
+
+export class ImprovedSelect extends Select {
   private isActive = false;
@@ -24,6 +30,7 @@ private isSearchActive = false;
   private toggleElements: HTMLElement[] = [];
+  private activeToggleElement?: HTMLElement;
   private closeElements: HTMLElement[] = [];
   private select: HTMLSelectElement | null;
-  private selectBody: HTMLSelectElement | null;
-  private searchInput: HTMLSelectElement | null;
+  private selectBody: HTMLElement | null;
+  private searchInput: HTMLInputElement | null;
   private linkedOptions: HTMLElement[] = [];
@@ -34,2 +41,3 @@ private selectedValueElements: HTMLElement[] = [];
   private isHtmlValue: boolean = false;
+  private cleanup?: () => void;
 
@@ -94,3 +102,5 @@ constructor(private element: HTMLElement) {
       toggleElement.addEventListener("click", () => {
-        if (this.isActive) {
+        this.activeToggleElement = toggleElement;
+
+        if (this.isActive === true) {
           this.close();
@@ -102,8 +112,2 @@ } else {
     });
-
-    if (this.element.hasAttribute("data-improved-select-modal") === false) {
-      this.on("toggle", () => {
-        this.fixBodyVisibility();
-      });
-    }
   }
@@ -122,9 +126,11 @@
       linkedOption.addEventListener("click", () => {
-        if (this.select && this.select.options[index]) {
+        if (this.select !== null && this.select.options[index] !== undefined) {
           const option = this.select.options[index];
 
-          if (this.select.multiple) {
-            option.selected = !option.selected;
-          } else {
-            option.selected = true;
+          if (option !== undefined) {
+            if (this.select.multiple) {
+              option.selected = !option.selected;
+            } else {
+              option.selected = true;
+            }
           }
@@ -231,3 +237,5 @@
         Array.from(this.select.options).forEach((option, index) => {
-          if (this.linkedOptions[index]) {
+          const linkedOption = this.linkedOptions[index];
+
+          if (linkedOption !== undefined) {
             const valueMatch =
@@ -243,3 +251,3 @@ searchValue.length > 0
 
-            this.linkedOptions[index].classList.toggle(
+            linkedOption.classList.toggle(
               "is-hidden",
@@ -270,19 +278,2 @@ searchValue.length > 0 &&
 
-  private fixBodyVisibility() {
-    if (this.selectBody) {
-      if (this.isActive) {
-        const { left, width } = this.selectBody.getBoundingClientRect();
-        const scrollBarWidth = window.innerWidth - document.body.clientWidth;
-        const offset = window.innerWidth - (left + width + 16 + scrollBarWidth);
-
-        this.selectBody.style.transform = `translate(${Math.min(
-          offset,
-          0,
-        )}px, 0)`;
-      } else {
-        this.selectBody.removeAttribute("style");
-      }
-    }
-  }
-
   info(): ImprovedSelectInfo {
@@ -298,7 +289,36 @@ return {
 
+  private update = async () => {
+    if (this.activeToggleElement !== undefined && this.selectBody !== null) {
+      const { x, y } = await computePosition(
+        this.activeToggleElement,
+        this.selectBody,
+        {
+          placement: "bottom",
+          middleware: [offset(8), flip(), shift({ padding: 12 })],
+        },
+      );
+
+      Object.assign(this.selectBody.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    }
+  };
+
   toggle(force?: boolean) {
+    this.cleanup?.();
     this.isActive = this.element.classList.toggle("is-active", force);
-    if (this.element.hasAttribute("data-improved-select-modal")) {
-      document.body.classList.toggle("no-scroll", this.isActive);
+
+    if (
+      this.isActive === true &&
+      this.activeToggleElement !== undefined &&
+      this.selectBody !== null
+    ) {
+      this.cleanup = autoUpdate(
+        this.activeToggleElement,
+        this.selectBody,
+        this.update,
+      );
     }
+
     this.dispatch("toggle", this);
@@ -315,3 +335,3 @@ }
   close() {
-    if (this.isActive) {
+    if (this.isActive === true) {
       this.toggle(false);
@@ -343,4 +363,6 @@ this.dispatch("close", this);
       for (const index of this.defaultSelection) {
-        if (this.select.options[index] !== undefined) {
-          this.select.options[index].selected = true;
+        const option = this.select.options[index];
+
+        if (option !== undefined) {
+          option.selected = true;
         }
@@ -347,0 +369,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

83586

increased by9.1%

Dev dependency count

3

decreased by-66.67%

Lines of code

1461

increased by50.77%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Added@floating-ui/dom@^1.1.0

• + Added@floating-ui/core@1.6.8(transitive)

• + Added@floating-ui/dom@1.6.12(transitive)

• + Added@floating-ui/utils@0.2.8(transitive)

• Updated@prof-dev/event-emitter@^1.0.9