@sendgrid/ui-components - npm Package Compare versions

Comparing version 1.44.14 to 1.44.15

dropdown-button.d.ts

@@ -16,5 +16,7 @@ import React from 'react';
     static defaultProps: Partial<ButtonProps & React.HTMLAttributes<HTMLButtonElement> & React.InputHTMLAttributes<HTMLButtonElement>>;
+    containerRef: React.MutableRefObject<HTMLDivElement>;
     state: {
         active: boolean;
     };
+    componentDidMount(): void;
     componentWillUnmount(): void;
@@ -21,0 +23,0 @@ render(): JSX.Element;

dropdown-button.js

@@ -22,2 +22,3 @@ var __rest = (this && this.__rest) || function (s, e) {
         super(...arguments);
+        this.containerRef = React.createRef();
         this.state = {
@@ -28,18 +29,17 @@ active: false,
             this.props.onClick(event);
-            const { active: isActive } = this.state;
-            return this.setState({ active: !isActive }, () => {
-                if (this.state.active) {
-                    document.addEventListener('click', this.dismissDropdown, {
-                        capture: true,
-                    });
-                }
-            });
+            this.setState(({ active: currentActive }) => ({ active: !currentActive }));
         };
-        this.dismissDropdown = () => {
-            this.setState({ active: false });
-            document.removeEventListener('click', this.dismissDropdown, {
-                capture: true,
-            });
+        this.dismissDropdown = (e) => {
+            const remainOpen = this.containerRef.current &&
+                this.containerRef.current.contains(e.target);
+            if (!remainOpen) {
+                this.setState({ active: false });
+            }
         };
     }
+    componentDidMount() {
+        document.addEventListener('click', this.dismissDropdown, {
+            capture: true,
+        });
+    }
     componentWillUnmount() {
@@ -65,3 +65,3 @@ document.removeEventListener('click', this.dismissDropdown, {
         });
-        return (React.createElement("div", { className: cn('btn-list', btnStyles['btn-list']) },
+        return (React.createElement("div", { className: cn('btn-list', btnStyles['btn-list']), ref: this.containerRef },
             React.createElement("div", Object.assign({ className: cn('btn', btnStyles.btn, btnStyles['btn-dropdown'], 'btn-dropdown', 'dropdown', Styles.dropdown, {
@@ -68,0 +68,0 @@ [`btn-${buttonType}`]: !gear,

dropdown.d.ts

@@ -19,10 +19,12 @@ import React from 'react';
     };
+    containerRef: React.MutableRefObject<HTMLDivElement>;
     state: {
         active: boolean;
     };
+    componentDidMount(): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
-    protected toggleDropdown: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    private toggleDropdown;
     private dismissDropdown;
 }
 export {};

dropdown.js

@@ -20,23 +20,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         super(...arguments);
+        this.containerRef = React.createRef();
         this.state = {
             active: this.props.initialOpen,
         };
-        this.toggleDropdown = (event) => {
-            return this.setState(state => {
-                const active = !state.active;
-                if (active) {
-                    document.addEventListener('click', this.dismissDropdown, {
-                        capture: true,
-                    });
-                }
-                return { active };
-            });
+        this.toggleDropdown = () => {
+            this.setState(({ active: currentActive }) => ({ active: !currentActive }));
         };
-        this.dismissDropdown = () => {
-            this.setState({ active: false });
-            document.removeEventListener('click', this.dismissDropdown, {
-                capture: true,
-            });
+        this.dismissDropdown = (e) => {
+            const remainOpen = this.containerRef.current &&
+                this.containerRef.current.contains(e.target);
+            if (!remainOpen) {
+                this.setState({ active: false });
+            }
         };
     }
+    componentDidMount() {
+        document.addEventListener('click', this.dismissDropdown, {
+            capture: true,
+        });
+    }
     componentWillUnmount() {
@@ -56,3 +55,3 @@ document.removeEventListener('click', this.dismissDropdown, {
                 [Styles['is-active']]: isActive,
-            }, className), onClick: this.toggleDropdown }, (noKeyboardNavigation ? {} : keyboardNavigationProps), attributes),
+            }, className), onClick: this.toggleDropdown }, (noKeyboardNavigation ? {} : keyboardNavigationProps), attributes, { ref: this.containerRef }),
             React.createElement("div", { tabIndex: -1, className: cn('dropdown-content', Styles['dropdown-content']) }, children)));
@@ -59,0 +58,0 @@ }

package.json

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

select/SearchableSelect.d.ts

@@ -14,2 +14,3 @@ import React, { Component } from 'react';
     onDocClick: (e: MouseEvent) => void;
+    closeMenuIfClickedInside: React.MouseEventHandler<HTMLDivElement>;
     toggleOpen: () => void;
@@ -16,0 +17,0 @@ onSelectChange(selectedOption: any): void;

select/SearchableSelect.js

@@ -27,9 +27,9 @@ var __rest = (this && this.__rest) || function (s, e) {
             const { isOpen } = this.state;
-            if (!isOpen || !this.containerRef.current) {
+            if (!isOpen) {
                 return;
             }
-            const remainOpen = this.containerRef.current.contains(e.target);
+            const remainOpen = this.containerRef.current &&
+                this.containerRef.current.contains(e.target);
             if (!remainOpen) {
                 this.setState({
-                    isCloseable: false,
                     isOpen: false,
@@ -39,2 +39,14 @@ });
         };
+        this.closeMenuIfClickedInside = e => {
+            const { isOpen } = this.state;
+            if (!isOpen) {
+                return;
+            }
+            const menu = document.querySelector('.input-search-wrap .search__menu');
+            if (menu && menu.contains(e.target)) {
+                this.setState({
+                    isOpen: false,
+                });
+            }
+        };
         this.toggleOpen = () => {
@@ -70,3 +82,3 @@ this.setState((state) => (Object.assign({ isOpen: !state.isOpen }, (!state.isOpen ? { isCloseable: false } : {}))));
         const { isOpen } = this.state;
-        return (React.createElement("div", { style: { position: 'relative' }, ref: this.containerRef },
+        return (React.createElement("div", { style: { position: 'relative' }, ref: this.containerRef, onClick: this.closeMenuIfClickedInside },
             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 })),
@@ -73,0 +85,0 @@ isOpen && (React.createElement("div", { className: cn('input-search-wrap', Styles['input-search-wrap']) },

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

979554

increased by0.06%

Lines of code

9381

increased by0.17%

No dependency changes