@fortawesome/fa-icon-chooser-react - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0-rc1

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<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & import("./interfaces").StyleReactProps> & React.RefAttributes<ElementType>>;
 export {};

dist/react-component-lib/createComponent.js

@@ -12,5 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
-import React from 'react';
+import React, { createElement } from 'react';
 import { attachProps, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs, } from './utils';
-export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction) => {
+export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
     const displayName = dashToPascalCase(tagName);
@@ -35,3 +38,3 @@ const ReactComponent = class extends React.Component {
                     const eventName = name.substring(2).toLowerCase();
-                    if (typeof document !== 'undefined' && isCoveredByReact(eventName, document)) {
+                    if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
                         acc[name] = cProps[name];
@@ -48,4 +51,11 @@ }
             }
-            let newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
-            return React.createElement(tagName, newProps, children);
+            const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
+            /**
+             * 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);
         }
@@ -52,0 +62,0 @@ static get displayName() {

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

@@ -23,4 +23,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import ReactDOM from 'react-dom';
-import { attachProps } from './utils';
-export const createOverlayComponent = (displayName, controller) => {
+import { attachProps, dashToPascalCase, defineCustomElement, setRef, } from './utils';
+export const createOverlayComponent = (tagName, controller, customElement) => {
+    defineCustomElement(tagName, customElement);
+    const displayName = dashToPascalCase(tagName);
     const didDismissEventName = `on${displayName}DidDismiss`;
@@ -30,6 +32,9 @@ const didPresentEventName = `on${displayName}DidPresent`;
     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 +59,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 +79,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 +95,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 +102,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 +110,0 @@ }

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

@@ -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/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 declare const defineCustomElement: (tagName: string, customElement: any) => void;
 export * from './attachProps';
 export * from './case';

dist/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) => {
@@ -20,4 +26,11 @@ const forwardRef = (props, ref) => {
 };
+export const defineCustomElement = (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": "@fortawesome/fa-icon-chooser-react",
   "sideEffects": false,
-  "version": "0.2.1",
+  "version": "0.3.0-rc1",
+  "license": "MIT",
   "private": false,
@@ -28,28 +29,17 @@ "description": "React specific wrapper for @fortawesome/fa-icon-chooser",
   "devDependencies": {
-    "@types/jest": "23.3.9",
     "@types/node": "^14",
-    "@types/react": "^16",
-    "@types/react-dom": "^16",
-    "jest": "^23.0.0",
-    "jest-dom": "^3.0.2",
+    "@types/react": "^17",
+    "@types/react-dom": "^17",
     "np": "^3.1.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^16 || ^17",
+    "react-dom": "^16 || ^17",
     "typescript": "^4.3.2"
   },
   "dependencies": {
-    "@fortawesome/fa-icon-chooser": "0.2.1"
+    "@fortawesome/fa-icon-chooser": "0.3.0-rc1"
   },
   "peerDependencies": {
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0"
-  },
-  "jest": {
-    "preset": "ts-jest",
-    "setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js",
-    "testPathIgnorePatterns": [
-      "node_modules",
-      "dist"
-    ]
+    "react": "^16 || ^17",
+    "react-dom": "^16 || ^17"
   }
 }

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

35888

increased by8.16%

Dev dependency count

7

decreased by-30%

Lines of code

434

increased by13.02%

Dependency changes

• + Added@fortawesome/fa-icon-chooser@0.3.0-rc1(transitive)

• + Addedreact@17.0.2(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedscheduler@0.20.2(transitive)

• - Removed@fortawesome/fa-icon-chooser@0.2.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedscheduler@0.19.1(transitive)

• Updated@fortawesome/fa-icon-chooser@0.3.0-rc1