@rmwc/base - npm Package Compare versions

Comparing version 8.0.8 to 14.0.0-alpha.0

dist/component.d.ts

@@ -8,3 +8,3 @@ import * as RMWC from '@rmwc/types';
 }>;
-export declare const Tag: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<any>>;
+export declare const Tag: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
 export declare const useClassNames: <Props extends {
@@ -15,10 +15,10 @@ [key: string]: any;
 export declare const handleRef: <T extends unknown>(ref: React.Ref<T> | undefined, value: T) => void;
-export declare function createComponent<P extends {}, ElementP extends {} = React.HTMLProps<HTMLElement>>(Component: React.RefForwardingComponent<any, P & ElementP>): {
-    <Tag extends React.ElementType<any> = "div">(props: RMWC.ComponentProps<P, ElementP, Tag>, ref: any): JSX.Element;
+export declare function createComponent<P extends {}, ElementP extends {} = React.HTMLProps<HTMLElement>>(Component: React.ForwardRefRenderFunction<any, P & ElementP>): {
+    <Tag extends React.ElementType<any> = "div">(props: RMWC.ComponentProps<P, ElementP, Tag>, ref: any): React.JSX.Element;
     displayName: string;
 };
-export declare function createMemoComponent<P extends {}, ElementP extends {} = React.HTMLProps<HTMLDivElement>>(Component: React.RefForwardingComponent<any, P & ElementP>): {
-    <Tag extends React.ElementType<any> = "div">(props: RMWC.ComponentProps<P, ElementP, Tag>, ref: any): JSX.Element;
+export declare function createMemoComponent<P extends {}, ElementP extends {} = React.HTMLProps<HTMLDivElement>>(Component: React.ForwardRefRenderFunction<any, P & ElementP>): {
+    <Tag extends React.ElementType<any> = "div">(props: RMWC.ComponentProps<P, ElementP, Tag>, ref: any): React.JSX.Element;
     displayName: string;
 };
 export {};

dist/component.js

@@ -11,3 +11,3 @@ "use strict";
     var finalProps = element ? element.props(rest) : rest;
-    var finalRef = element ? exports.mergeRefs(ref, element.setRef) : ref;
+    var finalRef = element ? exports.mergeRefs(ref, element.reactRef) : ref;
     return react_1.default.createElement(TagEl, tslib_1.__assign({}, finalProps, { ref: finalRef }));
@@ -14,0 +14,0 @@ });

dist/foundation-component.d.ts

@@ -9,3 +9,2 @@ import { SpecificEventListener } from '@material/base/types';
     private _props;
-    private _ref;
     _onChange: (() => void) | null;
@@ -42,3 +41,3 @@ constructor(onChange: () => void);
      **************************************************/
-    setRef(el: any): void;
+    readonly reactRef: React.RefObject<ElementType>;
     get ref(): ElementType | null;
@@ -57,3 +56,3 @@ }
         getProps: () => Props;
-        emit: (evtType: string, evtData: any, shouldBubble?: boolean | undefined) => CustomEvent<any>;
+        emit: <T>(evtType: string, evtData: T, shouldBubble?: boolean | undefined) => CustomEvent<any>;
     }) => Foundation;
@@ -60,0 +59,0 @@ props: Props;

dist/foundation-component.js

@@ -5,3 +5,3 @@ "use strict";
 var tslib_1 = require("tslib");
-var react_1 = require("react");
+var react_1 = tslib_1.__importStar(require("react"));
 var classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -20,4 +20,7 @@ var events_map_1 = require("./utils/events-map");
         this._props = {};
-        this._ref = null;
         this._onChange = null;
+        /**************************************************
+         * Refs
+         **************************************************/
+        this.reactRef = react_1.default.createRef();
         this._onChange = onChange;
@@ -34,3 +37,2 @@ this.onChange = this.onChange.bind(this);
         this.removeEventListener = this.removeEventListener.bind(this);
-        this.setRef = this.setRef.bind(this);
     }
@@ -41,3 +43,2 @@ FoundationElement.prototype.onChange = function () {
     FoundationElement.prototype.destroy = function () {
-        var _this = this;
         this._onChange = null;
@@ -48,5 +49,2 @@ this._events = {};
         this._classes = new Set();
-        setTimeout(function () {
-            _this._ref = null;
-        });
     };
@@ -144,13 +142,5 @@ /**************************************************
     };
-    /**************************************************
-     * Refs
-     **************************************************/
-    FoundationElement.prototype.setRef = function (el) {
-        if (el) {
-            this._ref = el;
-        }
-    };
     Object.defineProperty(FoundationElement.prototype, "ref", {
         get: function () {
-            return this._ref;
+            return this.reactRef.current;
         },
@@ -163,26 +153,28 @@ enumerable: false,
 exports.FoundationElement = FoundationElement;
-var emitFactory = function (props) { return function (evtType, evtData, shouldBubble) {
-    if (shouldBubble === void 0) { shouldBubble = false; }
-    var evt;
-    evt = new CustomEvent(evtType, {
-        detail: evtData,
-        bubbles: shouldBubble
-    });
-    // bugfix for events coming from form elements
-    // and also fits with reacts form pattern better...
-    // This should always otherwise be null since there is no target
-    // for Custom Events
-    Object.defineProperty(evt, 'target', {
-        value: evtData,
-        writable: false
-    });
-    Object.defineProperty(evt, 'currentTarget', {
-        value: evtData,
-        writable: false
-    });
-    // Custom handling for React
-    var propName = evtType;
-    props[propName] && props[propName](evt);
-    return evt;
-}; };
+var emitFactory = function (props) {
+    return function (evtType, evtData, shouldBubble) {
+        if (shouldBubble === void 0) { shouldBubble = false; }
+        var evt;
+        evt = new CustomEvent(evtType, {
+            detail: evtData,
+            bubbles: shouldBubble
+        });
+        // bugfix for events coming from form elements
+        // and also fits with reacts form pattern better...
+        // This should always otherwise be null since there is no target
+        // for Custom Events
+        Object.defineProperty(evt, 'target', {
+            value: evtData,
+            writable: false
+        });
+        Object.defineProperty(evt, 'currentTarget', {
+            value: evtData,
+            writable: false
+        });
+        // Custom handling for React
+        var propName = evtType;
+        props[propName] && props[propName](evt);
+        return evt;
+    };
+};
 var useFoundation = function (_a) {
@@ -189,0 +181,0 @@ var foundationFactory = _a.foundation, inputProps = _a.props, elementsInput = _a.elements, api = _a.api;

dist/portal.d.ts

@@ -11,2 +11,2 @@ import React, { MutableRefObject } from 'react';
     menuSurfaceDomPositionRef?: MutableRefObject<HTMLDivElement | null>;
-}): JSX.Element | null;
+}): React.JSX.Element | null;

dist/PortalContext.d.ts

@@ -1,2 +0,2 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 export interface PortalContextData {
@@ -11,2 +11,2 @@ portalElement: HTMLDivElement | null;
 export declare const PortalContext: React.Context<PortalContextData>;
-export declare const PortalProvider: React.FC<ReactNode>;
+export declare const PortalProvider: React.FC<React.PropsWithChildren>;

dist/readme.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
-export default function Readme(): JSX.Element;
+import React from 'react';
+export default function Readme(): React.JSX.Element;

dist/utils/empty-client-rect.d.ts

@@ -1,1 +0,1 @@
-export declare const emptyClientRect: ClientRect;
+export declare const emptyClientRect: any;

dist/utils/empty-client-rect.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.emptyClientRect = void 0;
+// as of mcw 14, mcw themselves has typed it as any
 exports.emptyClientRect = {
@@ -5,0 +6,0 @@ bottom: 0,

next/component.d.ts

@@ -8,3 +8,3 @@ import * as RMWC from '@rmwc/types';
 }>;
-export declare const Tag: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<any>>;
+export declare const Tag: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
 export declare const useClassNames: <Props extends {
@@ -15,10 +15,10 @@ [key: string]: any;
 export declare const handleRef: <T extends unknown>(ref: React.Ref<T> | undefined, value: T) => void;
-export declare function createComponent<P extends {}, ElementP extends {} = React.HTMLProps<HTMLElement>>(Component: React.RefForwardingComponent<any, P & ElementP>): {
-    <Tag extends React.ElementType<any> = "div">(props: RMWC.ComponentProps<P, ElementP, Tag>, ref: any): JSX.Element;
+export declare function createComponent<P extends {}, ElementP extends {} = React.HTMLProps<HTMLElement>>(Component: React.ForwardRefRenderFunction<any, P & ElementP>): {
+    <Tag extends React.ElementType<any> = "div">(props: RMWC.ComponentProps<P, ElementP, Tag>, ref: any): React.JSX.Element;
     displayName: string;
 };
-export declare function createMemoComponent<P extends {}, ElementP extends {} = React.HTMLProps<HTMLDivElement>>(Component: React.RefForwardingComponent<any, P & ElementP>): {
-    <Tag extends React.ElementType<any> = "div">(props: RMWC.ComponentProps<P, ElementP, Tag>, ref: any): JSX.Element;
+export declare function createMemoComponent<P extends {}, ElementP extends {} = React.HTMLProps<HTMLDivElement>>(Component: React.ForwardRefRenderFunction<any, P & ElementP>): {
+    <Tag extends React.ElementType<any> = "div">(props: RMWC.ComponentProps<P, ElementP, Tag>, ref: any): React.JSX.Element;
     displayName: string;
 };
 export {};

next/component.js

@@ -8,3 +8,3 @@ import { __assign, __read, __rest, __spreadArray, __values } from "tslib";
     var finalProps = element ? element.props(rest) : rest;
-    var finalRef = element ? mergeRefs(ref, element.setRef) : ref;
+    var finalRef = element ? mergeRefs(ref, element.reactRef) : ref;
     return React.createElement(TagEl, __assign({}, finalProps, { ref: finalRef }));
@@ -11,0 +11,0 @@ });

next/foundation-component.d.ts

@@ -9,3 +9,2 @@ import { SpecificEventListener } from '@material/base/types';
     private _props;
-    private _ref;
     _onChange: (() => void) | null;
@@ -42,3 +41,3 @@ constructor(onChange: () => void);
      **************************************************/
-    setRef(el: any): void;
+    readonly reactRef: React.RefObject<ElementType>;
     get ref(): ElementType | null;
@@ -57,3 +56,3 @@ }
         getProps: () => Props;
-        emit: (evtType: string, evtData: any, shouldBubble?: boolean | undefined) => CustomEvent<any>;
+        emit: <T>(evtType: string, evtData: T, shouldBubble?: boolean | undefined) => CustomEvent<any>;
     }) => Foundation;
@@ -60,0 +59,0 @@ props: Props;

next/foundation-component.js

 import { __assign, __read, __spreadArray } from "tslib";
-import { useEffect, useState, useRef, useMemo } from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import classNames from 'classnames';
@@ -16,4 +16,7 @@ import { eventsMap } from './utils/events-map';
         this._props = {};
-        this._ref = null;
         this._onChange = null;
+        /**************************************************
+         * Refs
+         **************************************************/
+        this.reactRef = React.createRef();
         this._onChange = onChange;
@@ -30,3 +33,2 @@ this.onChange = this.onChange.bind(this);
         this.removeEventListener = this.removeEventListener.bind(this);
-        this.setRef = this.setRef.bind(this);
     }
@@ -37,3 +39,2 @@ FoundationElement.prototype.onChange = function () {
     FoundationElement.prototype.destroy = function () {
-        var _this = this;
         this._onChange = null;
@@ -44,5 +45,2 @@ this._events = {};
         this._classes = new Set();
-        setTimeout(function () {
-            _this._ref = null;
-        });
     };
@@ -140,13 +138,5 @@ /**************************************************
     };
-    /**************************************************
-     * Refs
-     **************************************************/
-    FoundationElement.prototype.setRef = function (el) {
-        if (el) {
-            this._ref = el;
-        }
-    };
     Object.defineProperty(FoundationElement.prototype, "ref", {
         get: function () {
-            return this._ref;
+            return this.reactRef.current;
         },
@@ -159,26 +149,28 @@ enumerable: false,
 export { FoundationElement };
-var emitFactory = function (props) { return function (evtType, evtData, shouldBubble) {
-    if (shouldBubble === void 0) { shouldBubble = false; }
-    var evt;
-    evt = new CustomEvent(evtType, {
-        detail: evtData,
-        bubbles: shouldBubble
-    });
-    // bugfix for events coming from form elements
-    // and also fits with reacts form pattern better...
-    // This should always otherwise be null since there is no target
-    // for Custom Events
-    Object.defineProperty(evt, 'target', {
-        value: evtData,
-        writable: false
-    });
-    Object.defineProperty(evt, 'currentTarget', {
-        value: evtData,
-        writable: false
-    });
-    // Custom handling for React
-    var propName = evtType;
-    props[propName] && props[propName](evt);
-    return evt;
-}; };
+var emitFactory = function (props) {
+    return function (evtType, evtData, shouldBubble) {
+        if (shouldBubble === void 0) { shouldBubble = false; }
+        var evt;
+        evt = new CustomEvent(evtType, {
+            detail: evtData,
+            bubbles: shouldBubble
+        });
+        // bugfix for events coming from form elements
+        // and also fits with reacts form pattern better...
+        // This should always otherwise be null since there is no target
+        // for Custom Events
+        Object.defineProperty(evt, 'target', {
+            value: evtData,
+            writable: false
+        });
+        Object.defineProperty(evt, 'currentTarget', {
+            value: evtData,
+            writable: false
+        });
+        // Custom handling for React
+        var propName = evtType;
+        props[propName] && props[propName](evt);
+        return evt;
+    };
+};
 export var useFoundation = function (_a) {
@@ -185,0 +177,0 @@ var foundationFactory = _a.foundation, inputProps = _a.props, elementsInput = _a.elements, api = _a.api;

next/portal.d.ts

@@ -11,2 +11,2 @@ import React, { MutableRefObject } from 'react';
     menuSurfaceDomPositionRef?: MutableRefObject<HTMLDivElement | null>;
-}): JSX.Element | null;
+}): React.JSX.Element | null;

next/PortalContext.d.ts

@@ -1,2 +0,2 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 export interface PortalContextData {
@@ -11,2 +11,2 @@ portalElement: HTMLDivElement | null;
 export declare const PortalContext: React.Context<PortalContextData>;
-export declare const PortalProvider: React.FC<ReactNode>;
+export declare const PortalProvider: React.FC<React.PropsWithChildren>;

next/readme.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
-export default function Readme(): JSX.Element;
+import React from 'react';
+export default function Readme(): React.JSX.Element;

next/utils/empty-client-rect.d.ts

@@ -1,1 +0,1 @@
-export declare const emptyClientRect: ClientRect;
+export declare const emptyClientRect: any;

next/utils/empty-client-rect.js

@@ -0,1 +1,2 @@
+// as of mcw 14, mcw themselves has typed it as any
 export var emptyClientRect = {
@@ -2,0 +3,0 @@ bottom: 0,

package.json

 {
   "name": "@rmwc/base",
-  "version": "8.0.8",
+  "version": "14.0.0-alpha.0",
   "description": "RMWC base module",
@@ -39,4 +39,4 @@ "main": "dist/index.js",
   "dependencies": {
-    "@material/dom": "^8.0.0",
-    "@rmwc/types": "^8.0.8",
+    "@material/dom": "^14.0.0",
+    "@rmwc/types": "^14.0.0-alpha.0",
     "@types/classnames": "^2.3.1",
@@ -46,5 +46,5 @@ "classnames": "^2.3.1",
     "mutation-observer": "^1.0.3",
-    "tslib": "^2.3.0"
+    "tslib": "^2.4.0"
   },
   "gitHead": "bf098adc2571ee1641ef20d79f38fb64e9ff186e"
 }

README.md

@@ -7,3 +7,2 @@ # Portal
 
-
 ## Portal
@@ -22,12 +21,14 @@
 ```jsx
-function App() {
-  return (
-    <PortalProvider>
-      <div>
-        {/* Other components here */}
-        <Portal />
-      </div>
-    </PortalProvider>
-  );
-}
+<>
+  {function App() {
+    return (
+      <PortalProvider>
+        <div>
+          {/* Other components here */}
+          <Portal />
+        </div>
+      </PortalProvider>
+    );
+  }}
+</>
 ```
@@ -46,2 +47,1 @@
 Unlike ThemeProvider or TypographyProvider, the PortalProvider component should only be used once in your application or component tree. (If you include multiple instances of PortalProvider, the context will only grab the context values from the first PortalProvider parent and the solution will break.)
-

New alerts

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

107236

increased by2.48%

Number of package files

109

increased by1.87%

Worsened metrics

Lines of code

2496

decreased by-0.6%

Number of low quality alerts

3

increased by50%

Dependency changes

• + Added@material/dom@14.0.0(transitive)

• + Added@material/feature-targeting@14.0.0(transitive)

• + Added@rmwc/types@14.2.9(transitive)

• - Removed@material/dom@8.0.0(transitive)

• - Removed@material/feature-targeting@8.0.0(transitive)

• - Removed@rmwc/types@8.0.8(transitive)

• - Removedtslib@1.14.1(transitive)

• Updated@material/dom@^14.0.0

• Updated@rmwc/types@^14.0.0-alpha.0

• Updatedtslib@^2.4.0