@bulmil/react - npm Package Compare versions

Comparing version 0.17.1 to 0.18.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.18.0](https://github.com/gomah/bulmil/compare/v0.17.1...v0.18.0) (2021-09-01)
+
+
+### Features
+
+* **react:** bump @stencil/react-output-target ([9a67ec6](https://github.com/gomah/bulmil/commit/9a67ec62042ffc6954adec40d31d20de11f95bce))
+
+
+
+
+
 ## [0.17.1](https://github.com/gomah/bulmil/compare/v0.17.0...v0.17.1) (2021-08-25)
@@ -8,0 +19,0 @@

dist/cjs/react-component-lib/createComponent.js

@@ -40,3 +40,3 @@ "use strict";
                     const eventName = name.substring(2).toLowerCase();
-                    if (typeof document !== 'undefined' && utils_1.isCoveredByReact(eventName, document)) {
+                    if (typeof document !== 'undefined' && utils_1.isCoveredByReact(eventName)) {
                         acc[name] = cProps[name];
@@ -53,3 +53,3 @@ }
             }
-            let newProps = Object.assign(Object.assign({}, propsToPass), { ref: utils_1.mergeRefs(forwardedRef, this.setComponentElRef), style });
+            const newProps = Object.assign(Object.assign({}, propsToPass), { ref: utils_1.mergeRefs(forwardedRef, this.setComponentElRef), style });
             return react_1.default.createElement(tagName, newProps, children);
@@ -56,0 +56,0 @@ }

dist/cjs/react-component-lib/createOverlayComponent.js

@@ -35,6 +35,9 @@ "use strict";
     const willPresentEventName = `on${displayName}WillPresent`;
+    let isDismissing = false;
     class Overlay extends react_1.default.Component {
         constructor(props) {
             super(props);
-            this.el = document.createElement('div');
+            if (typeof document !== 'undefined') {
+                this.el = document.createElement('div');
+            }
             this.handleDismiss = this.handleDismiss.bind(this);
@@ -59,5 +62,10 @@ }
             }
-            if (this.props.forwardedRef) {
-                this.props.forwardedRef.current = undefined;
+            utils_1.setRef(this.props.forwardedRef, null);
+        }
+        shouldComponentUpdate(nextProps) {
+            // Check if the overlay component is about to dismiss
+            if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
+                isDismissing = true;
             }
+            return true;
         }
@@ -74,2 +82,9 @@ componentDidUpdate(prevProps) {
                     yield this.overlay.dismiss();
+                    isDismissing = false;
+                    /**
+                     * Now that the overlay is dismissed
+                     * we need to render again so that any
+                     * inner components will be unmounted
+                     */
+                    this.forceUpdate();
                 }
@@ -83,5 +98,3 @@ });
                 this.overlay = yield controller.create(Object.assign(Object.assign({}, elementProps), { component: this.el, componentProps: {} }));
-                if (this.props.forwardedRef) {
-                    this.props.forwardedRef.current = this.overlay;
-                }
+                utils_1.setRef(this.props.forwardedRef, this.overlay);
                 utils_1.attachProps(this.overlay, elementProps, prevProps);
@@ -92,3 +105,8 @@ yield this.overlay.present();
         render() {
-            return react_dom_1.default.createPortal(this.props.isOpen ? this.props.children : null, this.el);
+            /**
+             * Continue to render the component even when
+             * overlay is dismissing otherwise component
+             * will be hidden before animation is done.
+             */
+            return react_dom_1.default.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
         }
@@ -95,0 +113,0 @@ }

dist/cjs/react-component-lib/utils/attachProps.js

@@ -25,3 +25,3 @@ "use strict";
                 const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
-                if (typeof document !== 'undefined' && !exports.isCoveredByReact(eventNameLc, document)) {
+                if (!exports.isCoveredByReact(eventNameLc)) {
                     exports.syncEvent(node, eventNameLc, newProps[name]);
@@ -36,5 +36,2 @@ }
                 }
-                else {
-                    node[name] = newProps[name];
-                }
             }
@@ -74,11 +71,16 @@ });
  */
-const isCoveredByReact = (eventNameSuffix, doc) => {
-    const eventName = 'on' + eventNameSuffix;
-    let isSupported = eventName in doc;
-    if (!isSupported) {
-        const element = doc.createElement('div');
-        element.setAttribute(eventName, 'return;');
-        isSupported = typeof element[eventName] === 'function';
+const isCoveredByReact = (eventNameSuffix) => {
+    if (typeof document === 'undefined') {
+        return true;
     }
-    return isSupported;
+    else {
+        const eventName = 'on' + eventNameSuffix;
+        let isSupported = eventName in document;
+        if (!isSupported) {
+            const element = document.createElement('div');
+            element.setAttribute(eventName, 'return;');
+            isSupported = typeof element[eventName] === 'function';
+        }
+        return isSupported;
+    }
 };
@@ -85,0 +87,0 @@ exports.isCoveredByReact = isCoveredByReact;

dist/cjs/react-component-lib/utils/index.js

@@ -16,6 +16,5 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createForwardRef = exports.mergeRefs = void 0;
+exports.createForwardRef = exports.mergeRefs = exports.setRef = void 0;
 const react_1 = __importDefault(require("react"));
-// The comma in the type is to trick typescript because it things a single generic in a tsx file is jsx
-const mergeRefs = (...refs) => (value) => refs.forEach((ref) => {
+const setRef = (ref, value) => {
     if (typeof ref === 'function') {
@@ -25,6 +24,14 @@ ref(value);
     else if (ref != null) {
-        // This is typed as readonly so we need to allow for override
+        // Cast as a MutableRef so we can assign current
         ref.current = value;
     }
-});
+};
+exports.setRef = setRef;
+const mergeRefs = (...refs) => {
+    return (value) => {
+        refs.forEach(ref => {
+            exports.setRef(ref, value);
+        });
+    };
+};
 exports.mergeRefs = mergeRefs;
@@ -31,0 +38,0 @@ const createForwardRef = (ReactComponent, displayName) => {

dist/esm/react-component-lib/createComponent.js

@@ -34,3 +34,3 @@ var __rest = (this && this.__rest) || function (s, e) {
                     const eventName = name.substring(2).toLowerCase();
-                    if (typeof document !== 'undefined' && isCoveredByReact(eventName, document)) {
+                    if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
                         acc[name] = cProps[name];
@@ -47,3 +47,3 @@ }
             }
-            let newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
+            const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
             return React.createElement(tagName, newProps, children);
@@ -50,0 +50,0 @@ }

dist/esm/react-component-lib/createOverlayComponent.js

@@ -23,3 +23,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import ReactDOM from 'react-dom';
-import { attachProps } from './utils';
+import { attachProps, setRef } from './utils';
 export const createOverlayComponent = (displayName, controller) => {
@@ -30,6 +30,9 @@ const didDismissEventName = `on${displayName}DidDismiss`;
     const willPresentEventName = `on${displayName}WillPresent`;
+    let isDismissing = false;
     class Overlay extends React.Component {
         constructor(props) {
             super(props);
-            this.el = document.createElement('div');
+            if (typeof document !== 'undefined') {
+                this.el = document.createElement('div');
+            }
             this.handleDismiss = this.handleDismiss.bind(this);
@@ -54,5 +57,10 @@ }
             }
-            if (this.props.forwardedRef) {
-                this.props.forwardedRef.current = undefined;
+            setRef(this.props.forwardedRef, null);
+        }
+        shouldComponentUpdate(nextProps) {
+            // Check if the overlay component is about to dismiss
+            if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
+                isDismissing = true;
             }
+            return true;
         }
@@ -69,2 +77,9 @@ componentDidUpdate(prevProps) {
                     yield this.overlay.dismiss();
+                    isDismissing = false;
+                    /**
+                     * Now that the overlay is dismissed
+                     * we need to render again so that any
+                     * inner components will be unmounted
+                     */
+                    this.forceUpdate();
                 }
@@ -78,5 +93,3 @@ });
                 this.overlay = yield controller.create(Object.assign(Object.assign({}, elementProps), { component: this.el, componentProps: {} }));
-                if (this.props.forwardedRef) {
-                    this.props.forwardedRef.current = this.overlay;
-                }
+                setRef(this.props.forwardedRef, this.overlay);
                 attachProps(this.overlay, elementProps, prevProps);
@@ -87,3 +100,8 @@ yield this.overlay.present();
         render() {
-            return ReactDOM.createPortal(this.props.isOpen ? this.props.children : null, this.el);
+            /**
+             * Continue to render the component even when
+             * overlay is dismissing otherwise component
+             * will be hidden before animation is done.
+             */
+            return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
         }
@@ -90,0 +108,0 @@ }

dist/esm/react-component-lib/utils/attachProps.js

@@ -22,3 +22,3 @@ import { camelToDashCase } from './case';
                 const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
-                if (typeof document !== 'undefined' && !isCoveredByReact(eventNameLc, document)) {
+                if (!isCoveredByReact(eventNameLc)) {
                     syncEvent(node, eventNameLc, newProps[name]);
@@ -33,5 +33,2 @@ }
                 }
-                else {
-                    node[name] = newProps[name];
-                }
             }
@@ -69,11 +66,16 @@ });
  */
-export const isCoveredByReact = (eventNameSuffix, doc) => {
-    const eventName = 'on' + eventNameSuffix;
-    let isSupported = eventName in doc;
-    if (!isSupported) {
-        const element = doc.createElement('div');
-        element.setAttribute(eventName, 'return;');
-        isSupported = typeof element[eventName] === 'function';
+export const isCoveredByReact = (eventNameSuffix) => {
+    if (typeof document === 'undefined') {
+        return true;
     }
-    return isSupported;
+    else {
+        const eventName = 'on' + eventNameSuffix;
+        let isSupported = eventName in document;
+        if (!isSupported) {
+            const element = document.createElement('div');
+            element.setAttribute(eventName, 'return;');
+            isSupported = typeof element[eventName] === 'function';
+        }
+        return isSupported;
+    }
 };
@@ -80,0 +82,0 @@ export const syncEvent = (node, eventName, newEventHandler) => {

dist/esm/react-component-lib/utils/index.js

 import React from 'react';
-// The comma in the type is to trick typescript because it things a single generic in a tsx file is jsx
-export const mergeRefs = (...refs) => (value) => refs.forEach((ref) => {
+export const setRef = (ref, value) => {
     if (typeof ref === 'function') {
@@ -8,6 +7,13 @@ ref(value);
     else if (ref != null) {
-        // This is typed as readonly so we need to allow for override
+        // Cast as a MutableRef so we can assign current
         ref.current = value;
     }
-});
+};
+export const mergeRefs = (...refs) => {
+    return (value) => {
+        refs.forEach(ref => {
+            setRef(ref, value);
+        });
+    };
+};
 export const createForwardRef = (ReactComponent, displayName) => {
@@ -14,0 +20,0 @@ const forwardRef = (props, ref) => {

dist/types/react-component-lib/createOverlayComponent.d.ts

@@ -0,3 +1,4 @@
+import React from 'react';
 import { OverlayEventDetail } from './interfaces';
-import React from 'react';
+import { StencilReactForwardedRef } from './utils';
 interface OverlayElement extends HTMLElement {
@@ -18,4 +19,4 @@ present: () => Promise<void>;
 }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
-    forwardedRef?: React.RefObject<OverlayType>;
+    forwardedRef?: StencilReactForwardedRef<OverlayType>;
 }> & React.RefAttributes<OverlayType>>;
 export {};

dist/types/react-component-lib/utils/attachProps.d.ts

@@ -7,3 +7,3 @@ export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
  */
-export declare const isCoveredByReact: (eventNameSuffix: string, doc: Document) => boolean;
+export declare const isCoveredByReact: (eventNameSuffix: string) => boolean;
 export declare const syncEvent: (node: Element & {
@@ -10,0 +10,0 @@ __events?: {

dist/types/react-component-lib/utils/index.d.ts

 import React from 'react';
 import type { StyleReactProps } from '../interfaces';
 export declare type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
-export declare const mergeRefs: <ElementType>(...refs: React.Ref<ElementType>[]) => (value: ElementType) => void;
+export declare type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
+export declare const setRef: (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => void;
+export declare const mergeRefs: (...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]) => React.RefCallback<any>;
 export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & StyleReactProps> & React.RefAttributes<ElementType>>;
 export * from './attachProps';
 export * from './case';

package.json

 {
   "name": "@bulmil/react",
   "sideEffects": false,
-  "version": "0.17.1",
+  "version": "0.18.0",
   "author": "Gomah",
@@ -44,3 +44,3 @@ "license": "MIT",
   "dependencies": {
-    "@bulmil/core": "0.17.1"
+    "@bulmil/core": "0.18.0"
   },
@@ -51,3 +51,3 @@ "peerDependencies": {
   },
-  "gitHead": "1707bec18bcc865bd5b658822f8a7f926483ffc6"
+  "gitHead": "2815157803b80fea0a0423ef7a67607c3edb7173"
 }

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

120925

increased by2.47%

Lines of code

1292

increased by4.53%

Dependency changes

• + Added@bulmil/core@0.18.0(transitive)

• - Removed@bulmil/core@0.17.1(transitive)

• Updated@bulmil/core@0.18.0