@watermarkinsights/ripple-react - npm Package Compare versions

Comparing version 3.9.2-0 to 3.10.0

dist/react-component-lib/createComponent.d.ts

@@ -9,3 +9,3 @@ import React from 'react';
 }
-export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & import("./interfaces").StyleReactProps> & React.RefAttributes<ElementType>>;
+export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes, defineCustomElement?: () => void) => React.ForwardRefExoticComponent<React.PropsWithoutRef<import("./utils").StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
 export {};

dist/react-component-lib/createComponent.js

@@ -5,8 +5,6 @@ var __extends = (this && this.__extends) || (function () {
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
@@ -39,5 +37,8 @@ function __() { this.constructor = d; }
 };
-import React from 'react';
-import { attachProps, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs, } from './utils';
-export var createReactComponent = function (tagName, ReactComponentContext, manipulatePropsFunction) {
+import React, { createElement } from 'react';
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs, } from './utils';
+export var createReactComponent = function (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) {
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
     var displayName = dashToPascalCase(tagName);
@@ -62,10 +63,16 @@ var ReactComponent = /** @class */ (function (_super) {
             var propsToPass = Object.keys(cProps).reduce(function (acc, name) {
+                var value = cProps[name];
                 if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
                     var eventName = name.substring(2).toLowerCase();
-                    if (typeof document !== 'undefined' && isCoveredByReact(eventName, document)) {
-                        acc[name] = cProps[name];
+                    if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
+                        acc[name] = value;
                     }
                 }
                 else {
-                    acc[name] = cProps[name];
+                    // we should only render strings, booleans, and numbers as attrs in html.
+                    // objects, functions, arrays etc get synced via properties on mount.
+                    var type = typeof value;
+                    if (type === 'string' || type === 'boolean' || type === 'number') {
+                        acc[camelToDashCase(name)] = value;
+                    }
                 }
@@ -78,3 +85,10 @@ return acc;
             var newProps = __assign(__assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style: style });
-            return React.createElement(tagName, newProps, children);
+            /**
+             * We use createElement here instead of
+             * React.createElement to work around a
+             * bug in Vite (https://github.com/vitejs/vite/issues/6104).
+             * React.createElement causes all elements to be rendered
+             * as <tagname> instead of the actual Web Component.
+             */
+            return createElement(tagName, newProps, children);
         };
@@ -81,0 +95,0 @@ Object.defineProperty(class_1, "displayName", {

dist/react-component-lib/createControllerComponent.d.ts

@@ -21,6 +21,6 @@ import React from 'react';
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<OptionsType & ReactControllerProps<OverlayEventDetail>>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
-        forceUpdate(callBack?: () => void): void;
-        readonly props: Readonly<{
+        forceUpdate(callback?: () => void): void;
+        readonly props: Readonly<OptionsType & ReactControllerProps<OverlayEventDetail>> & Readonly<{
             children?: React.ReactNode;
-        }> & Readonly<OptionsType & ReactControllerProps<OverlayEventDetail>>;
+        }>;
         state: Readonly<{}>;
@@ -27,0 +27,0 @@ refs: {

dist/react-component-lib/createControllerComponent.js

@@ -5,8 +5,6 @@ var __extends = (this && this.__extends) || (function () {
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
@@ -13,0 +11,0 @@ function __() { this.constructor = d; }

dist/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 {
@@ -15,7 +16,7 @@ present: () => Promise<void>;
 }
-export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(displayName: string, controller: {
+export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
     create: (options: any) => Promise<OverlayType>;
-}) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
-    forwardedRef?: React.RefObject<OverlayType>;
+}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
+    forwardedRef?: StencilReactForwardedRef<OverlayType>;
 }> & React.RefAttributes<OverlayType>>;
 export {};

dist/react-component-lib/createOverlayComponent.js

@@ -5,8 +5,6 @@ var __extends = (this && this.__extends) || (function () {
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
@@ -77,4 +75,6 @@ function __() { this.constructor = d; }
 import ReactDOM from 'react-dom';
-import { attachProps } from './utils';
-export var createOverlayComponent = function (displayName, controller) {
+import { attachProps, dashToPascalCase, defineCustomElement, setRef, } from './utils';
+export var createOverlayComponent = function (tagName, controller, customElement) {
+    defineCustomElement(tagName, customElement);
+    var displayName = dashToPascalCase(tagName);
     var didDismissEventName = "on" + displayName + "DidDismiss";
@@ -84,2 +84,3 @@ var didPresentEventName = "on" + displayName + "DidPresent";
     var willPresentEventName = "on" + displayName + "WillPresent";
+    var isDismissing = false;
     var Overlay = /** @class */ (function (_super) {
@@ -89,3 +90,5 @@ __extends(Overlay, _super);
             var _this = _super.call(this, props) || this;
-            _this.el = document.createElement('div');
+            if (typeof document !== 'undefined') {
+                _this.el = document.createElement('div');
+            }
             _this.handleDismiss = _this.handleDismiss.bind(_this);
@@ -115,5 +118,10 @@ return _this;
             }
-            if (this.props.forwardedRef) {
-                this.props.forwardedRef.current = undefined;
+            setRef(this.props.forwardedRef, null);
+        };
+        Overlay.prototype.shouldComponentUpdate = function (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;
         };
@@ -135,2 +143,9 @@ Overlay.prototype.componentDidUpdate = function (prevProps) {
                             _a.sent();
+                            isDismissing = false;
+                            /**
+                             * Now that the overlay is dismissed
+                             * we need to render again so that any
+                             * inner components will be unmounted
+                             */
+                            this.forceUpdate();
                             _a.label = 2;
@@ -162,5 +177,3 @@ case 2: return [2 /*return*/];
                             _b.overlay = _d.sent();
-                            if (this.props.forwardedRef) {
-                                this.props.forwardedRef.current = this.overlay;
-                            }
+                            setRef(this.props.forwardedRef, this.overlay);
                             attachProps(this.overlay, elementProps, prevProps);
@@ -176,3 +189,8 @@ return [4 /*yield*/, this.overlay.present()];
         Overlay.prototype.render = function () {
-            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);
         };
@@ -179,0 +197,0 @@ return Overlay;

dist/react-component-lib/interfaces.js

@@ -1,2 +0,1 @@
-export {};
 //# sourceMappingURL=interfaces.js.map

dist/react-component-lib/ReactProps.js

@@ -1,2 +0,1 @@
-export {};
 //# sourceMappingURL=ReactProps.js.map

dist/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/react-component-lib/utils/attachProps.js

@@ -23,3 +23,3 @@ import { camelToDashCase } from './case';
                 var eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
-                if (typeof document !== 'undefined' && !isCoveredByReact(eventNameLc, document)) {
+                if (!isCoveredByReact(eventNameLc)) {
                     syncEvent(node, eventNameLc, newProps[name]);
@@ -34,5 +34,2 @@ }
                 }
-                else {
-                    node[name] = newProps[name];
-                }
             }
@@ -70,11 +67,16 @@ });
  */
-export var isCoveredByReact = function (eventNameSuffix, doc) {
-    var eventName = 'on' + eventNameSuffix;
-    var isSupported = eventName in doc;
-    if (!isSupported) {
-        var element = doc.createElement('div');
-        element.setAttribute(eventName, 'return;');
-        isSupported = typeof element[eventName] === 'function';
+export var isCoveredByReact = function (eventNameSuffix) {
+    if (typeof document === 'undefined') {
+        return true;
     }
-    return isSupported;
+    else {
+        var eventName = 'on' + eventNameSuffix;
+        var isSupported = eventName in document;
+        if (!isSupported) {
+            var element = document.createElement('div');
+            element.setAttribute(eventName, 'return;');
+            isSupported = typeof element[eventName] === 'function';
+        }
+        return isSupported;
+    }
 };
@@ -81,0 +83,0 @@ export var syncEvent = function (node, eventName, newEventHandler) {

dist/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 const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & StyleReactProps> & React.RefAttributes<ElementType>>;
+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<StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
+export declare const defineCustomElement: (tagName: string, customElement: any) => void;
 export * from './attachProps';
 export * from './case';

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

@@ -13,3 +13,11 @@ var __assign = (this && this.__assign) || function () {
 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 var setRef = function (ref, value) {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref != null) {
+        // Cast as a MutableRef so we can assign current
+        ref.current = value;
+    }
+};
 export var mergeRefs = function () {
@@ -21,10 +29,4 @@ var refs = [];
     return function (value) {
-        return refs.forEach(function (ref) {
-            if (typeof ref === 'function') {
-                ref(value);
-            }
-            else if (ref != null) {
-                // This is typed as readonly so we need to allow for override
-                ref.current = value;
-            }
+        refs.forEach(function (ref) {
+            setRef(ref, value);
         });
@@ -40,4 +42,11 @@ };
 };
+export var defineCustomElement = function (tagName, customElement) {
+    if (customElement !== undefined &&
+        typeof customElements !== 'undefined' &&
+        !customElements.get(tagName)) {
+        customElements.define(tagName, customElement);
+    }
+};
 export * from './attachProps';
 export * from './case';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@watermarkinsights/ripple-react",
-  "sideEffects": [
-    "dist/index.js"
-  ],
-  "version": "3.9.2-0",
+  "version": "3.10.0",
   "description": "React specific wrappers for Ripple component library",
@@ -19,2 +16,5 @@ "scripts": {
   ],
+  "sideEffects": [
+    "dist/index.js"
+  ],
   "devDependencies": {
@@ -25,5 +25,5 @@ "@types/jest": "23.3.9",
     "@types/react-dom": "^17.0.11",
-    "jest": "^23.0.0",
+    "jest": "^28.0.2",
     "jest-dom": "^3.0.2",
-    "np": "^3.1.0",
+    "np": "^7.6.1",
     "react": "^17.0.2",
@@ -46,4 +46,4 @@ "react-dom": "^17.0.2",
   "dependencies": {
-    "@watermarkinsights/ripple": "3.9.1"
+    "@watermarkinsights/ripple": "3.10.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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

237941

increased by216.66%

Lines of code

1513

increased by61.99%

Number of low quality alerts

1

decreased by-50%

Dependency changes

• + Added@formatjs/ecma402-abstract@2.0.0(transitive)

• + Added@formatjs/fast-memoize@2.2.0(transitive)

• + Added@formatjs/icu-messageformat-parser@2.7.8(transitive)

• + Added@formatjs/icu-skeleton-parser@1.8.2(transitive)

• + Added@formatjs/intl@2.10.5(transitive)

• + Added@formatjs/intl-displaynames@6.6.8(transitive)

• + Added@formatjs/intl-listformat@7.5.7(transitive)

• + Added@formatjs/intl-localematcher@0.5.4(transitive)

• + Added@watermarkinsights/ripple@3.10.0(transitive)

• + Addedintl-messageformat@10.5.14(transitive)

• - Removed@formatjs/ecma402-abstract@1.11.3(transitive)

• - Removed@formatjs/fast-memoize@1.2.1(transitive)

• - Removed@formatjs/icu-messageformat-parser@2.0.18(transitive)

• - Removed@formatjs/icu-skeleton-parser@1.3.5(transitive)

• - Removed@formatjs/intl@1.18.5(transitive)

• - Removed@formatjs/intl-displaynames@5.4.2(transitive)

• - Removed@formatjs/intl-listformat@6.5.2(transitive)

• - Removed@formatjs/intl-localematcher@0.2.24(transitive)

• - Removed@watermarkinsights/ripple@3.9.1(transitive)

• - Removedintl-messageformat@9.11.4(transitive)

• Updated@watermarkinsights/ripple@3.10.0