@sendgrid/ui-components - npm Package Compare versions

Comparing version 1.44.13 to 1.44.14

dropdown-button.js

@@ -30,3 +30,5 @@ var __rest = (this && this.__rest) || function (s, e) {
                 if (this.state.active) {
-                    document.addEventListener('click', this.dismissDropdown);
+                    document.addEventListener('click', this.dismissDropdown, {
+                        capture: true,
+                    });
                 }
@@ -37,7 +39,11 @@ });
             this.setState({ active: false });
-            document.removeEventListener('click', this.dismissDropdown);
+            document.removeEventListener('click', this.dismissDropdown, {
+                capture: true,
+            });
         };
     }
     componentWillUnmount() {
-        document.removeEventListener('click', this.dismissDropdown);
+        document.removeEventListener('click', this.dismissDropdown, {
+            capture: true,
+        });
     }
@@ -44,0 +50,0 @@ render() {

dropdown.js

@@ -27,3 +27,5 @@ var __rest = (this && this.__rest) || function (s, e) {
                 if (active) {
-                    document.addEventListener('click', this.dismissDropdown);
+                    document.addEventListener('click', this.dismissDropdown, {
+                        capture: true,
+                    });
                 }
@@ -35,7 +37,11 @@ return { active };
             this.setState({ active: false });
-            document.removeEventListener('click', this.dismissDropdown);
+            document.removeEventListener('click', this.dismissDropdown, {
+                capture: true,
+            });
         };
     }
     componentWillUnmount() {
-        document.removeEventListener('click', this.dismissDropdown);
+        document.removeEventListener('click', this.dismissDropdown, {
+            capture: true,
+        });
     }
@@ -42,0 +48,0 @@ render() {

package.json

 {
   "name": "@sendgrid/ui-components",
-  "version": "1.44.13",
+  "version": "1.44.14",
   "description": "Reusable UI components for Sendgrid's applications.",
@@ -5,0 +5,0 @@ "main": "index.js",

segment-term/index.js

@@ -32,3 +32,3 @@ var __rest = (this && this.__rest) || function (s, e) {
     render() {
-        const _a = this.props, { hasAddButton, hasQueryToggle, queryToggleKey, hasSeparator, editable, editing, label, onAddButtonClick, onQueryToggle, queryName, queryToggle, radios, renderAlert, renderInputs, title, onDelete, onConfirm, showConfirm, className } = _a, attributes = __rest(_a, ["hasAddButton", "hasQueryToggle", "queryToggleKey", "hasSeparator", "editable", "editing", "label", "onAddButtonClick", "onQueryToggle", "queryName", "queryToggle", "radios", "renderAlert", "renderInputs", "title", "onDelete", "onConfirm", "showConfirm", "className"]);
+        const _a = this.props, { hasAddButton, hasQueryToggle, queryToggleKey, hasSeparator, editable, editing, label, onAddButtonClick, onQueryToggle, queryName, queryToggle, radios, renderAlert, renderInputs, title, onDelete, onConfirm, showConfirm, className, onEdit } = _a, attributes = __rest(_a, ["hasAddButton", "hasQueryToggle", "queryToggleKey", "hasSeparator", "editable", "editing", "label", "onAddButtonClick", "onQueryToggle", "queryName", "queryToggle", "radios", "renderAlert", "renderInputs", "title", "onDelete", "onConfirm", "showConfirm", "className", "onEdit"]);
         const queryToggleAnd = queryToggle === 'and';
@@ -35,0 +35,0 @@ return (React.createElement("div", Object.assign({ className: cn('segment-term-wrap', Styles['segment-term-wrap'], className, {

segment-term/segmentWrapper.js

@@ -12,3 +12,3 @@ import React from 'react';
                 if (editing) {
-                    document.addEventListener('click', this.submit);
+                    document.addEventListener('click', this.submit, { capture: true });
                 }
@@ -23,3 +23,3 @@ return { editing };
                 this.setState({ editing: false });
-                document.removeEventListener('click', this.submit);
+                document.removeEventListener('click', this.submit, { capture: true });
             };
@@ -43,7 +43,7 @@ if (allowSubmit(segmentTerm, target, Array.from(document.querySelectorAll(`.${PREVENT_SEGMENT_WRAPPER_SUBMIT_CLASS}`)))) {
     componentWillUnmount() {
-        document.removeEventListener('click', this.submit);
+        document.removeEventListener('click', this.submit, { capture: true });
     }
     componentDidMount() {
         if (this.props.editing) {
-            document.addEventListener('click', this.submit);
+            document.addEventListener('click', this.submit, { capture: true });
         }
@@ -50,0 +50,0 @@ }

select/SearchableSelect.d.ts

@@ -7,6 +7,5 @@ import React, { Component } from 'react';
     state: {
-        isCloseable: boolean;
         isOpen: boolean;
     };
-    searchMenuRef: React.RefObject<HTMLDivElement>;
+    containerRef: React.RefObject<HTMLDivElement>;
     componentDidMount(): void;
@@ -13,0 +12,0 @@ componentWillUnmount(): void;

select/SearchableSelect.js

@@ -18,25 +18,2 @@ var __rest = (this && this.__rest) || function (s, e) {
 import Styles from './select.module.scss';
-// The select needs to find a *partial* subtree of elements that are valid to close the menu on click.
-// Deeper elements should close the menu and elements above the target should also close the menu.
-const collectElements = (parent, collectElement) => {
-    if (!parent) {
-        return [];
-    }
-    const result = [];
-    const queue = [parent];
-    // just do a plain ole BFS
-    while (queue.length > 0) {
-        const currentParent = queue.shift();
-        // tslint says to use a for of loop, but it also complains that children has no iterator if i try that...
-        // tslint:disable-next-line
-        for (let i = 0; i < currentParent.children.length; i++) {
-            const child = currentParent.children[i];
-            if (collectElement(child)) {
-                result.push(child);
-                queue.push(child);
-            }
-        }
-    }
-    return result;
-};
 class SearchableSelect extends Component {
@@ -46,28 +23,11 @@ constructor() {
         this.state = {
-            isCloseable: false,
             isOpen: false,
         };
-        this.searchMenuRef = React.createRef();
-        // There is an extreme peculiarity in how the event handling and menu opening works.
-        // The menu opens on mouseDown, and then this click event fires on the mouseUp that opened the menu.
-        // I've added the extra state of "isCloseable" to help make sure this click only fires after
-        // the menu is "finished" opening.
+        this.containerRef = React.createRef();
         this.onDocClick = (e) => {
-            const { isOpen, isCloseable } = this.state;
-            if (!isOpen || !this.searchMenuRef.current) {
+            const { isOpen } = this.state;
+            if (!isOpen || !this.containerRef.current) {
                 return;
             }
-            if (!isCloseable) {
-                this.setState({ isCloseable: true });
-                return;
-            }
-            // e.composedPath() is not supported in Edge, or else that would have been a better choice.
-            // The "needle" we are looking for is any element in the haystack of the search input wrap,
-            // except the search__menu or any of its descendants.
-            const remainOpenElements = collectElements(this.searchMenuRef.current, needle => {
-                return needle.className
-                    .split(' ')
-                    .every(className => className !== 'search__menu');
-            });
-            const remainOpen = remainOpenElements.some(openElem => openElem === e.target);
+            const remainOpen = this.containerRef.current.contains(e.target);
             if (!remainOpen) {
@@ -85,6 +45,6 @@ this.setState({
     componentDidMount() {
-        document.addEventListener('click', this.onDocClick);
+        document.addEventListener('click', this.onDocClick, { capture: true });
     }
     componentWillUnmount() {
-        document.removeEventListener('click', this.onDocClick);
+        document.removeEventListener('click', this.onDocClick, { capture: true });
     }
@@ -111,5 +71,5 @@ componentDidUpdate(prevProps) {
         const { isOpen } = this.state;
-        return (React.createElement("div", { style: { position: 'relative' } },
+        return (React.createElement("div", { style: { position: 'relative' }, ref: this.containerRef },
             React.createElement(ReactSelect, Object.assign({}, restProps, { components: this.props.components || { DropdownIndicator }, placeholder: this.props.placeholder, menuIsOpen: false, onMenuOpen: () => this.toggleOpen(), styles: Object.assign({}, applyStyles(Object.assign({}, SelectStyles), propsStyles)), isDisabled: this.props.disabled })),
-            isOpen && (React.createElement("div", { className: cn('input-search-wrap', Styles['input-search-wrap']), ref: this.searchMenuRef },
+            isOpen && (React.createElement("div", { className: cn('input-search-wrap', Styles['input-search-wrap']) },
                 React.createElement(ReactSelect, Object.assign({}, restProps, { autoFocus: true, backspaceRemovesValue: false, components: {
@@ -116,0 +76,0 @@ DropdownIndicator: SearchIcon,

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

Worsened metrics

Total package byte prevSize

978922

decreased by-0.16%

Lines of code

9365

decreased by-0.3%

No dependency changes