@rmwc/base - npm Package Compare versions

Comparing version 5.0.2-alpha.0 to 5.0.3-alpha.0

dist/component.d.ts

@@ -13,6 +13,6 @@ import * as RMWC from '@rmwc/types';
     consumeProps?: string[];
-    defaultProps?: any & Partial<RMWC.ComponentProps<any> & Props>;
+    defaultProps?: any & Partial<RMWC.ComponentProps & Props>;
     render?: (props: any, ref: React.Ref<any>, tag: RMWC.TagT) => React.ReactElement<HTMLElement>;
 }
-export declare const componentFactory: <P extends {}>({ displayName, classNames, tag: defaultTag, deprecate, defaultProps, consumeProps, render }: ComponentFactoryOpts<P>) => React.ComponentType<P & RMWC.ComponentProps<any>>;
+export declare const componentFactory: <P extends {}>({ displayName, classNames, tag: defaultTag, deprecate, defaultProps, consumeProps, render }: ComponentFactoryOpts<P>) => React.ComponentType<P & RMWC.ComponentProps>;
 export {};

dist/component.js

@@ -0,1 +1,2 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
@@ -51,49 +52,49 @@ __assign = Object.assign || function(t) {
 };
-define(["require", "exports", "react", "classnames", "./withTheme", "./utils/deprecation"], function (require, exports, React, classnames_1, withTheme_1, deprecation_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    React = __importStar(React);
-    classnames_1 = __importDefault(classnames_1);
-    // ALL OF THESE FUNCTIONS MUTATE THE COPY OF PROPS
-    // this is intentional and done for speed and memory
-    var handleClassNames = function (props, classNames, className, theme) {
-        var finalClassNames = classnames_1.default.apply(void 0, __spread([className], (!!theme ? withTheme_1.parseThemeOptions(theme) : []), (typeof classNames === 'function' ? classNames(props) : classNames)));
-        props.className = finalClassNames;
-    };
-    var handleTag = function (props, defaultTag, tag) {
-        // Handle the case where we are extending a component but passing
-        // a string as a tag. For instance, extending an Icon but rendering a span
-        if (typeof defaultTag !== 'string' && typeof tag === 'string') {
-            props.tag = tag;
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var withTheme_1 = require("./withTheme");
+var deprecation_1 = require("./utils/deprecation");
+// ALL OF THESE FUNCTIONS MUTATE THE COPY OF PROPS
+// this is intentional and done for speed and memory
+var handleClassNames = function (props, classNames, className, theme) {
+    var finalClassNames = classnames_1.default.apply(void 0, __spread([className], (!!theme ? withTheme_1.parseThemeOptions(theme) : []), (typeof classNames === 'function' ? classNames(props) : classNames)));
+    props.className = finalClassNames;
+};
+var handleTag = function (props, defaultTag, tag) {
+    // Handle the case where we are extending a component but passing
+    // a string as a tag. For instance, extending an Icon but rendering a span
+    if (typeof defaultTag !== 'string' && typeof tag === 'string') {
+        props.tag = tag;
+    }
+};
+var handleConsumeProps = function (props, consumeProps) {
+    consumeProps.forEach(function (p) {
+        delete props[p];
+    });
+};
+exports.componentFactory = function (_a) {
+    var displayName = _a.displayName, _b = _a.classNames, classNames = _b === void 0 ? [] : _b, _c = _a.tag, defaultTag = _c === void 0 ? 'div' : _c, deprecate = _a.deprecate, defaultProps = _a.defaultProps, _d = _a.consumeProps, consumeProps = _d === void 0 ? [] : _d, render = _a.render;
+    var Component = React.forwardRef(function (props, ref) {
+        var className = props.className, theme = props.theme, tag = props.tag, rest = __rest(props, ["className", "theme", "tag"]);
+        var newProps = rest;
+        handleClassNames(newProps, classNames, className, theme);
+        handleTag(newProps, defaultTag, tag);
+        if (deprecate) {
+            newProps = deprecation_1.handleDeprecations(newProps, deprecate, displayName);
         }
-    };
-    var handleConsumeProps = function (props, consumeProps) {
-        consumeProps.forEach(function (p) {
-            delete props[p];
-        });
-    };
-    exports.componentFactory = function (_a) {
-        var displayName = _a.displayName, _b = _a.classNames, classNames = _b === void 0 ? [] : _b, _c = _a.tag, defaultTag = _c === void 0 ? 'div' : _c, deprecate = _a.deprecate, defaultProps = _a.defaultProps, _d = _a.consumeProps, consumeProps = _d === void 0 ? [] : _d, render = _a.render;
-        var Component = React.forwardRef(function (props, ref) {
-            var className = props.className, theme = props.theme, tag = props.tag, rest = __rest(props, ["className", "theme", "tag"]);
-            handleClassNames(rest, classNames, className, theme);
-            handleTag(rest, defaultTag, tag);
-            if (deprecate) {
-                props = deprecation_1.handleDeprecations(rest, deprecate, displayName);
-            }
-            handleConsumeProps(rest, consumeProps);
-            var finalProps = rest;
-            // Do some switching to figure out what tag to use
-            // if we are extending an icon, we can still honor
-            // someone passing in an 'a' tag, while extending the icon
-            var Tag = typeof defaultTag !== 'string' && typeof tag === 'string'
-                ? defaultTag
-                : tag || defaultTag;
-            // @ts-ignore
-            return render ? (render(finalProps, ref, Tag)) : (React.createElement(Tag, __assign({}, finalProps, { ref: ref })));
-        });
-        Component.displayName = displayName;
-        Component.defaultProps = defaultProps;
-        return Component;
-    };
-});
+        handleConsumeProps(newProps, consumeProps);
+        var finalProps = newProps;
+        // Do some switching to figure out what tag to use
+        // if we are extending an icon, we can still honor
+        // someone passing in an 'a' tag, while extending the icon
+        var Tag = typeof defaultTag !== 'string' && typeof tag === 'string'
+            ? defaultTag
+            : tag || defaultTag;
+        // @ts-ignore
+        return render ? (render(finalProps, ref, Tag)) : (React.createElement(Tag, __assign({}, finalProps, { ref: ref })));
+    });
+    Component.displayName = displayName;
+    Component.defaultProps = defaultProps;
+    return Component;
+};

dist/foundation-component.d.ts

 import * as RMWC from '@rmwc/types';
 import * as React from 'react';
-export declare class FoundationElement<Props extends {
-    [key: string]: any;
-}, ElementType = HTMLElement> {
+export declare class FoundationElement<Props extends {}, ElementType = HTMLElement> {
     private _classes;
@@ -11,4 +9,5 @@ private _events;
     private _ref;
-    onChange: () => void;
+    _onChange: (() => void) | null;
     constructor(onChange: () => void);
+    onChange(): void;
     destroy(): void;
@@ -66,8 +65,11 @@ /**************************************************
     syncProp(prop: any, prevProp: any, callback: () => void): void;
-    getDefaultFoundation(): void;
+    getDefaultFoundation(): {
+        init: () => void;
+        destroy: () => void;
+    };
     /**
      * Fires a cross-browser-compatible custom event from the component root of the given type,
      */
-    emit(evtType: string, evtData: Object, shouldBubble?: boolean): CustomEvent<any>;
+    emit(evtType: string, evtData: Object, shouldBubble?: boolean): CustomEvent<Object>;
 }
 export {};

dist/foundation-component.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -25,11 +26,2 @@ var extendStatics = function (d, b) {
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 var __read = (this && this.__read) || function (o, n) {
@@ -65,228 +57,235 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
 };
-define(["require", "exports", "react", "classnames", "./utils/events-map", "./utils/debounce", "./utils/strings"], function (require, exports, React, classnames_1, events_map_1, debounce_1, strings_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    React = __importStar(React);
-    classnames_1 = __importDefault(classnames_1);
-    var reactPropFromEventName = function (evtName) {
-        return events_map_1.eventsMap[evtName] || evtName;
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var events_map_1 = require("./utils/events-map");
+var debounce_1 = require("./utils/debounce");
+var strings_1 = require("./utils/strings");
+var reactPropFromEventName = function (evtName) {
+    return events_map_1.eventsMap[evtName] || evtName;
+};
+var FoundationElement = /** @class */ (function () {
+    function FoundationElement(onChange) {
+        this._classes = new Set();
+        this._events = {};
+        this._style = {};
+        this._props = {};
+        this._ref = null;
+        this._onChange = null;
+        this._onChange = onChange;
+        this.onChange = this.onChange.bind(this);
+        this.addClass = this.addClass.bind(this);
+        this.removeClass = this.removeClass.bind(this);
+        this.hasClass = this.hasClass.bind(this);
+        this.setProp = this.setProp.bind(this);
+        this.getProp = this.getProp.bind(this);
+        this.removeProp = this.removeProp.bind(this);
+        this.setStyle = this.setStyle.bind(this);
+        this.addEventListener = this.addEventListener.bind(this);
+        this.removeEventListener = this.removeEventListener.bind(this);
+        this.setRef = this.setRef.bind(this);
+    }
+    FoundationElement.prototype.onChange = function () {
+        this._onChange && this._onChange();
     };
-    var FoundationElement = /** @class */ (function () {
-        function FoundationElement(onChange) {
-            this._classes = new Set();
-            this._events = {};
-            this._style = {};
-            this._props = {};
-            this._ref = null;
-            this.onChange = function () { };
-            this.onChange = onChange;
-            this.addClass = this.addClass.bind(this);
-            this.removeClass = this.removeClass.bind(this);
-            this.hasClass = this.hasClass.bind(this);
-            this.setProp = this.setProp.bind(this);
-            this.getProp = this.getProp.bind(this);
-            this.removeProp = this.removeProp.bind(this);
-            this.setStyle = this.setStyle.bind(this);
-            this.addEventListener = this.addEventListener.bind(this);
-            this.removeEventListener = this.removeEventListener.bind(this);
-            this.setRef = this.setRef.bind(this);
+    FoundationElement.prototype.destroy = function () {
+        this._onChange = null;
+        this._ref = null;
+        this._events = {};
+        this._style = {};
+        this._props = {};
+        this._classes = new Set();
+    };
+    /**************************************************
+     * Classes
+     **************************************************/
+    FoundationElement.prototype.addClass = function (className) {
+        if (!this._classes.has(className)) {
+            this._classes.add(className);
+            this.onChange();
         }
-        FoundationElement.prototype.destroy = function () {
-            this.onChange = function () { };
-            this._ref = null;
-            this._events = {};
-            this._style = {};
-            this._props = {};
-            this._classes = new Set();
-        };
-        /**************************************************
-         * Classes
-         **************************************************/
-        FoundationElement.prototype.addClass = function (className) {
-            if (!this._classes.has(className)) {
-                this._classes.add(className);
-                this.onChange();
+    };
+    FoundationElement.prototype.removeClass = function (className) {
+        if (this._classes.has(className)) {
+            this._classes.delete(className);
+            this.onChange();
+        }
+    };
+    FoundationElement.prototype.hasClass = function (className) {
+        return this._classes.has(className);
+    };
+    /**************************************************
+     * Props
+     **************************************************/
+    FoundationElement.prototype.setProp = function (propName, value) {
+        if (this._props[propName] !== value) {
+            this._props[propName] = value;
+            this.onChange();
+        }
+    };
+    FoundationElement.prototype.getProp = function (propName) {
+        return this._props[propName];
+    };
+    FoundationElement.prototype.removeProp = function (propName) {
+        if (this._props[propName] !== undefined) {
+            delete this._props[propName];
+            this.onChange();
+        }
+    };
+    FoundationElement.prototype.props = function (propsToMerge) {
+        var _this = this;
+        var _a = propsToMerge.className, className = _a === void 0 ? '' : _a, _b = propsToMerge.style, style = _b === void 0 ? {} : _b;
+        // handle merging events
+        // the foundation should be able to pass something onClick as well as a user
+        // This wraps them in a function that calls both
+        var mergedEvents = Object.entries(propsToMerge).reduce(function (acc, _a) {
+            var _b = __read(_a, 2), key = _b[0], possibleCallback = _b[1];
+            var existingCallback = _this._events[key];
+            if (typeof possibleCallback === 'function' &&
+                typeof existingCallback === 'function') {
+                var wrappedCallback = function (evt) {
+                    existingCallback(evt);
+                    return possibleCallback(evt);
+                };
+                acc[key] = wrappedCallback;
             }
+            return acc;
+        }, __assign({}, this._events));
+        // handle className
+        var mergedClasses = classnames_1.default(className, __spread(this._classes));
+        // handle styles
+        var mergedStyles = __assign({}, this._style, style);
+        return __assign({}, propsToMerge, this._props, mergedEvents, { style: mergedStyles, className: mergedClasses });
+    };
+    /**************************************************
+     * Styles
+     **************************************************/
+    FoundationElement.prototype.setStyle = function (propertyName, value) {
+        propertyName = propertyName.startsWith('--')
+            ? propertyName
+            : strings_1.toCamel(propertyName);
+        if (this._style[propertyName] !== value) {
+            this._style[propertyName] = value;
+            this.onChange();
+        }
+    };
+    /**************************************************
+     * Events
+     **************************************************/
+    FoundationElement.prototype.addEventListener = function (evtName, callback, shouldBubble) {
+        var propName = reactPropFromEventName(evtName);
+        if (this._events[propName] !== callback) {
+            this._events[propName] = callback;
+            this.onChange();
+        }
+    };
+    FoundationElement.prototype.removeEventListener = function (evtName, callback, shouldBubble) {
+        var propName = reactPropFromEventName(evtName);
+        if (this._events[propName]) {
+            delete this._events[propName];
+            this.onChange();
+        }
+    };
+    /**************************************************
+     * Refs
+     **************************************************/
+    FoundationElement.prototype.setRef = function (el) {
+        if (el) {
+            this._ref = el;
+        }
+    };
+    Object.defineProperty(FoundationElement.prototype, "ref", {
+        get: function () {
+            return this._ref;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return FoundationElement;
+}());
+exports.FoundationElement = FoundationElement;
+var FoundationComponent = /** @class */ (function (_super) {
+    __extends(FoundationComponent, _super);
+    function FoundationComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.foundation = _this.getDefaultFoundation();
+        _this.elements = {};
+        //@ts-ignore
+        if (_this.constructor.shouldDebounce) {
+            _this.update = debounce_1.debounce(_this.update.bind(_this), 0);
+        }
+        else {
+            _this.update = _this.update.bind(_this);
+        }
+        return _this;
+    }
+    FoundationComponent.prototype.componentDidMount = function () {
+        this.foundation.init();
+        this.sync(this.props, {});
+    };
+    FoundationComponent.prototype.componentDidUpdate = function (prevProps) {
+        this.sync(this.props, prevProps);
+    };
+    FoundationComponent.prototype.componentWillUnmount = function () {
+        this.foundation && this.foundation.destroy();
+        this.foundation = null;
+        Object.values(this.elements).forEach(function (el) { return el.destroy(); });
+    };
+    FoundationComponent.prototype.createElement = function (elementName) {
+        var el = new FoundationElement(this.update);
+        this.elements[elementName] = el;
+        return el;
+    };
+    FoundationComponent.prototype.update = function () {
+        this.foundation && this.setState({});
+    };
+    FoundationComponent.prototype.sync = function (props, prevProps) { };
+    FoundationComponent.prototype.syncProp = function (prop, prevProp, callback) {
+        if ((prop !== undefined || (prevProp !== undefined && prop === undefined)) &&
+            prop !== prevProp) {
+            callback();
+        }
+    };
+    FoundationComponent.prototype.getDefaultFoundation = function () {
+        return {
+            init: function () { },
+            destroy: function () { }
         };
-        FoundationElement.prototype.removeClass = function (className) {
-            if (this._classes.has(className)) {
-                this._classes.delete(className);
-                this.onChange();
-            }
-        };
-        FoundationElement.prototype.hasClass = function (className) {
-            return this._classes.has(className);
-        };
-        /**************************************************
-         * Props
-         **************************************************/
-        FoundationElement.prototype.setProp = function (propName, value) {
-            if (this._props[propName] !== value) {
-                this._props[propName] = value;
-                this.onChange();
-            }
-        };
-        FoundationElement.prototype.getProp = function (propName) {
-            return this._props[propName];
-        };
-        FoundationElement.prototype.removeProp = function (propName) {
-            if (this._props[propName] !== undefined) {
-                delete this._props[propName];
-                this.onChange();
-            }
-        };
-        FoundationElement.prototype.props = function (propsToMerge) {
-            var _this = this;
-            var _a = propsToMerge.className, className = _a === void 0 ? '' : _a, _b = propsToMerge.style, style = _b === void 0 ? {} : _b, rest = __rest(propsToMerge, ["className", "style"]);
-            // handle merging events
-            // the foundation should be able to pass something onClick as well as a user
-            // This wraps them in a function that calls both
-            var mergedEvents = Object.entries(propsToMerge).reduce(function (acc, _a) {
-                var _b = __read(_a, 2), key = _b[0], possibleCallback = _b[1];
-                var existingCallback = _this._events[key];
-                if (typeof possibleCallback === 'function' &&
-                    typeof existingCallback === 'function') {
-                    var wrappedCallback = function (evt) {
-                        existingCallback(evt);
-                        return possibleCallback(evt);
-                    };
-                    acc[key] = wrappedCallback;
-                }
-                return acc;
-            }, __assign({}, this._events));
-            // handle className
-            var mergedClasses = classnames_1.default(className, __spread(this._classes));
-            // handle styles
-            var mergedStyles = __assign({}, this._style, style);
-            return __assign({}, propsToMerge, this._props, mergedEvents, { style: mergedStyles, className: mergedClasses });
-        };
-        /**************************************************
-         * Styles
-         **************************************************/
-        FoundationElement.prototype.setStyle = function (propertyName, value) {
-            propertyName = propertyName.startsWith('--')
-                ? propertyName
-                : strings_1.toCamel(propertyName);
-            if (this._style[propertyName] !== value) {
-                this._style[propertyName] = value;
-                this.onChange();
-            }
-        };
-        /**************************************************
-         * Events
-         **************************************************/
-        FoundationElement.prototype.addEventListener = function (evtName, callback, shouldBubble) {
-            var propName = reactPropFromEventName(evtName);
-            if (this._events[propName] !== callback) {
-                this._events[propName] = callback;
-                this.onChange();
-            }
-        };
-        FoundationElement.prototype.removeEventListener = function (evtName, callback, shouldBubble) {
-            var propName = reactPropFromEventName(evtName);
-            if (this._events[propName]) {
-                delete this._events[propName];
-                this.onChange();
-            }
-        };
-        /**************************************************
-         * Refs
-         **************************************************/
-        FoundationElement.prototype.setRef = function (el) {
-            if (el) {
-                this._ref = el;
-            }
-        };
-        Object.defineProperty(FoundationElement.prototype, "ref", {
-            get: function () {
-                return this._ref;
-            },
-            enumerable: true,
-            configurable: true
+    };
+    /**
+     * Fires a cross-browser-compatible custom event from the component root of the given type,
+     */
+    FoundationComponent.prototype.emit = function (evtType, evtData, shouldBubble) {
+        if (shouldBubble === void 0) { shouldBubble = false; }
+        var evt;
+        evt = new CustomEvent(evtType, {
+            detail: evtData,
+            bubbles: shouldBubble
         });
-        return FoundationElement;
-    }());
-    exports.FoundationElement = FoundationElement;
-    var FoundationComponent = /** @class */ (function (_super) {
-        __extends(FoundationComponent, _super);
-        function FoundationComponent(props) {
-            var _this = _super.call(this, props) || this;
-            _this.foundation = _this.getDefaultFoundation();
-            _this.elements = {};
+        // 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;
+        // check to see if the foundation still exists. If not, we are
+        // probably unmounted or destroyed and dont want to call any more handlers
+        // This happens when MDC broadcasts certain events on timers
+        if (this.foundation) {
             //@ts-ignore
-            if (_this.constructor.shouldDebounce) {
-                _this.update = debounce_1.debounce(_this.update.bind(_this), 0);
-            }
-            else {
-                _this.update = _this.update.bind(_this);
-            }
-            return _this;
+            this.props[propName] && this.props[propName](evt);
         }
-        FoundationComponent.prototype.componentDidMount = function () {
-            this.foundation.init();
-            this.sync(this.props, {});
-        };
-        FoundationComponent.prototype.componentDidUpdate = function (prevProps) {
-            this.sync(this.props, prevProps);
-        };
-        FoundationComponent.prototype.componentWillUnmount = function () {
-            this.foundation && this.foundation.destroy();
-            this.foundation = null;
-            Object.values(this.elements).forEach(function (el) { return el.destroy(); });
-        };
-        FoundationComponent.prototype.createElement = function (elementName) {
-            var el = new FoundationElement(this.update);
-            this.elements[elementName] = el;
-            return el;
-        };
-        FoundationComponent.prototype.update = function () {
-            this.foundation && this.setState({});
-        };
-        FoundationComponent.prototype.sync = function (props, prevProps) { };
-        FoundationComponent.prototype.syncProp = function (prop, prevProp, callback) {
-            if ((prop !== undefined || (prevProp !== undefined && prop === undefined)) &&
-                prop !== prevProp) {
-                callback();
-            }
-        };
-        FoundationComponent.prototype.getDefaultFoundation = function () { };
-        /**
-         * Fires a cross-browser-compatible custom event from the component root of the given type,
-         */
-        FoundationComponent.prototype.emit = function (evtType, evtData, shouldBubble) {
-            if (shouldBubble === void 0) { shouldBubble = false; }
-            var evt;
-            if (typeof CustomEvent === 'function') {
-                evt = new CustomEvent(evtType, {
-                    detail: evtData,
-                    bubbles: shouldBubble
-                });
-            }
-            else {
-                evt = document.createEvent('CustomEvent');
-                evt.initCustomEvent(evtType, shouldBubble, false, evtData);
-            }
-            // 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
-            });
-            // Custom handling for React
-            var propName = evtType;
-            // check to see if the foundation still exists. If not, we are
-            // probably unmounted or destroyed and dont want to call any more handlers
-            // This happens when MDC broadcasts certain events on timers
-            if (this.foundation) {
-                //@ts-ignore
-                this.props[propName] && this.props[propName](evt);
-            }
-            return evt;
-        };
-        FoundationComponent.shouldDebounce = false;
-        return FoundationComponent;
-    }(React.Component));
-    exports.FoundationComponent = FoundationComponent;
-});
+        return evt;
+    };
+    FoundationComponent.shouldDebounce = true;
+    return FoundationComponent;
+}(React.Component));
+exports.FoundationComponent = FoundationComponent;

dist/index.d.ts

@@ -1,11 +0,10 @@
-/// <reference types="react" />
-import { WithThemeProps } from './withTheme';
-import { FoundationProps } from './foundation-component';
-import { FocusTrap } from 'focus-trap';
-export declare type WithThemeProps = WithThemeProps;
-export interface FoundationProps extends FoundationProps {
+import { WithThemeProps as _WithThemeProps } from './withTheme';
+import { FoundationProps as _FoundationProps } from './foundation-component';
+import { FocusTrap as _FocusTrap } from 'focus-trap';
+export declare type WithThemeProps = _WithThemeProps;
+export interface FoundationProps extends _FoundationProps {
 }
 export { default as classNames } from 'classnames';
 export { default as createFocusTrap } from 'focus-trap';
-export interface FocusTrap extends FocusTrap {
+export interface FocusTrap extends _FocusTrap {
 }
@@ -15,3 +14,2 @@ export * from './withTheme';
 export { componentFactory } from './component';
-export declare type CustomEventT<T> = CustomEvent<T> & React.SyntheticEvent<EventTarget>;
 export * from './utils';

dist/index.js

@@ -1,13 +0,15 @@
-define(["require", "exports", "classnames", "focus-trap", "./withTheme", "./foundation-component", "./component", "./utils"], function (require, exports, classnames_1, focus_trap_1, withTheme_1, foundation_component_1, component_1, utils_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.classNames = classnames_1.default;
-    exports.createFocusTrap = focus_trap_1.default;
-    __export(withTheme_1);
-    exports.FoundationComponent = foundation_component_1.FoundationComponent;
-    exports.componentFactory = component_1.componentFactory;
-    __export(utils_1);
-});
+"use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+var classnames_1 = require("classnames");
+exports.classNames = classnames_1.default;
+var focus_trap_1 = require("focus-trap");
+exports.createFocusTrap = focus_trap_1.default;
+__export(require("./withTheme"));
+var foundation_component_1 = require("./foundation-component");
+exports.FoundationComponent = foundation_component_1.FoundationComponent;
+var component_1 = require("./component");
+exports.componentFactory = component_1.componentFactory;
+__export(require("./utils"));

dist/utils/debounce.js

@@ -1,17 +0,15 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.debounce = function (func, wait) {
-        var timeout;
-        return function () {
-            // @ts-ignore
-            var context = this, args = arguments;
-            var later = function () {
-                timeout = null;
-                func.apply(context, args);
-            };
-            timeout !== null && clearTimeout(timeout);
-            timeout = setTimeout(later, wait);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.debounce = function (func, wait) {
+    var timeout;
+    return function () {
+        // @ts-ignore
+        var context = this, args = arguments;
+        var later = function () {
+            timeout = null;
+            func.apply(context, args);
         };
+        timeout !== null && clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
     };
-});
+};

dist/utils/deprecation.js

@@ -0,1 +1,2 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
@@ -12,40 +13,39 @@ __assign = Object.assign || function(t) {
 };
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.deprecationWarning = function (message) {
-        return console.warn("RMWC Deprecation Warning: " + message);
-    };
-    exports.handleDeprecations = function (props, deprecate, displayName) {
-        props = __assign({}, props);
-        for (var oldPropName in deprecate) {
-            var newProp = deprecate[oldPropName];
-            var newPropName = void 0;
-            var transformProp = function (value) { return value; };
-            if (Array.isArray(newProp)) {
-                newPropName = newProp[0];
-                transformProp = newProp[1];
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deprecationWarning = function (message) {
+    return console.warn("RMWC Deprecation Warning: " + message);
+};
+exports.handleDeprecations = function (props, deprecate, displayName) {
+    props = __assign({}, props);
+    for (var oldPropName in deprecate) {
+        var newProp = deprecate[oldPropName];
+        var newPropName = void 0;
+        var transformProp = function (value) { return value; };
+        if (Array.isArray(newProp)) {
+            newPropName = newProp[0];
+            transformProp = newProp[1];
+        }
+        else {
+            newPropName = newProp;
+        }
+        if (props[oldPropName] !== undefined) {
+            if (newPropName === '') {
+                /* istanbul ignore next */
+                exports.deprecationWarning((displayName ||
+                    '') + " component prop '" + oldPropName + "' has been removed from and is no longer a valid prop.");
             }
             else {
-                newPropName = newProp;
-            }
-            if (props[oldPropName] !== undefined) {
-                if (newPropName === '') {
-                    exports.deprecationWarning((displayName ||
-                        '') + " component prop '" + oldPropName + "' has been removed from and is no longer a valid prop.");
+                props[newPropName] = transformProp(props[oldPropName]);
+                var propTransformMessage = '';
+                if (props[newPropName] !== props[oldPropName]) {
+                    propTransformMessage = " The old value has also been converted from '" + props[oldPropName] + "' to '" + props[newPropName] + "'";
                 }
-                else {
-                    props[newPropName] = transformProp(props[oldPropName]);
-                    var propTransformMessage = '';
-                    if (props[newPropName] !== props[oldPropName]) {
-                        propTransformMessage = " The old value has also been converted from '" + props[newPropName] + "' to '" + props[oldPropName] + "'";
-                    }
-                    exports.deprecationWarning((displayName ||
-                        '') + " component prop '" + oldPropName + "' has been replaced with '" + newPropName + "'. " + propTransformMessage);
-                }
-                delete props[oldPropName];
+                /* istanbul ignore next */
+                exports.deprecationWarning((displayName ||
+                    '') + " component prop '" + oldPropName + "' has been replaced with '" + newPropName + "'. " + propTransformMessage);
             }
+            delete props[oldPropName];
         }
-        return props;
-    };
-});
+    }
+    return props;
+};

dist/utils/document-component.d.ts

@@ -34,6 +34,7 @@ import * as React from 'react';
 }
-export declare class Docs extends React.Component<{
+export interface DocsInterface {
     src: {};
     components: string[];
-}> {
+}
+export declare class Docs extends React.Component<DocsInterface> {
     docs: {
@@ -40,0 +41,0 @@ [key: string]: Def | undefined;

dist/utils/document-component.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -21,173 +22,170 @@ var extendStatics = function (d, b) {
 };
-define(["require", "exports", "react"], function (require, exports, React) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    React = __importStar(React);
-    var DocumentComponent = /** @class */ (function (_super) {
-        __extends(DocumentComponent, _super);
-        function DocumentComponent(props) {
-            var _this = _super.call(this, props) || this;
-            _this.simplifyType = _this.simplifyType.bind(_this);
-            return _this;
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var DocumentComponent = /** @class */ (function (_super) {
+    __extends(DocumentComponent, _super);
+    function DocumentComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.simplifyType = _this.simplifyType.bind(_this);
+        return _this;
+    }
+    DocumentComponent.prototype.simplifyType = function (type) {
+        var _this = this;
+        // unknown
+        if (!type) {
+            return 'undefined';
         }
-        DocumentComponent.prototype.simplifyType = function (type) {
-            var _this = this;
-            // unknown
-            if (!type) {
-                return 'undefined';
+        if ('value' in type) {
+            return type.value ? "'" + type.value + "'" : '';
+        }
+        if ('declaration' in type) {
+            if (type.declaration.name === '__type' && type.declaration.children) {
+                return "{" + type.declaration.children
+                    .map(function (c) {
+                    return c.name + ": " + _this.simplifyType(c.type);
+                })
+                    .join(', ') + "}";
             }
-            if ('value' in type) {
-                return type.value ? "'" + type.value + "'" : '';
+            return '';
+        }
+        // arrays
+        if (type.type && type.type === 'array') {
+            return this.simplifyType(type.elementType) + "[]";
+        }
+        if ('elementType' in type) {
+            return this.simplifyType(type.elementType);
+        }
+        // strings, numbers, any
+        if (type.name &&
+            ['any', 'string', 'number', 'boolean'].includes(type.name)) {
+            return type.name;
+        }
+        // catches type literals
+        if (type.name && type.name === '__type' && type.type === 'reference') {
+            return '{}';
+        }
+        // Named returns
+        if (type.type === 'reference' && type.name) {
+            var args = type.typeArguments
+                ? "<" + type.typeArguments.map(function (t) { return _this.simplifyType(t); }).join(', ') + ">"
+                : '';
+            return "" + type.name + args;
+        }
+        // booleans
+        if (type.type === 'union' && type.types && type.types.length <= 3) {
+            var combined = type.types.map(function (t) { return t.name; }).join('');
+            if (combined.includes('true') && combined.includes('false')) {
+                return 'boolean';
             }
-            if ('declaration' in type) {
-                if (type.declaration.name === '__type' && type.declaration.children) {
-                    return "{" + type.declaration.children
-                        .map(function (c) {
-                        return c.name + ": " + _this.simplifyType(c.type);
-                    })
-                        .join(', ') + "}";
+        }
+        // functions
+        if (type.type === 'union' &&
+            type.types &&
+            type.types.some(function (t) { return !!t.declaration; })) {
+            var found = type.types.find(function (t) { return !!t.declaration; });
+            if (found && found.declaration.signatures) {
+                var sig = found.declaration.signatures[0];
+                if (sig.name === '__call') {
+                    var rType = sig.type && sig.type.name;
+                    var params = sig.parameters.map(function (p) { return p.name + ": " + _this.simplifyType(p.type); });
+                    return "(" + params.join(', ') + ") => " + rType;
                 }
-                return '';
             }
-            // arrays
-            if (type.type && type.type === 'array') {
-                return this.simplifyType(type.elementType) + "[]";
-            }
-            if ('elementType' in type) {
-                return this.simplifyType(type.elementType);
-            }
-            // strings, numbers, any
-            if (type.name &&
-                ['any', 'string', 'number', 'boolean'].includes(type.name)) {
-                return type.name;
-            }
-            // catches type literals
-            if (type.name && type.name === '__type' && type.type === 'reference') {
-                return '{}';
-            }
-            // Named returns
-            if (type.type === 'reference' && type.name) {
-                var args = type.typeArguments
-                    ? "<" + type.typeArguments.map(function (t) { return _this.simplifyType(t); }).join(', ') + ">"
-                    : '';
-                return "" + type.name + args;
-            }
-            // booleans
-            if (type.type === 'union' && type.types && type.types.length <= 3) {
-                var combined = type.types.map(function (t) { return t.name; }).join('');
-                if (combined.includes('true') && combined.includes('false')) {
-                    return 'boolean';
-                }
-            }
-            // functions
-            if (type.type === 'union' &&
-                type.types &&
-                type.types.some(function (t) { return !!t.declaration; })) {
-                var found = type.types.find(function (t) { return !!t.declaration; });
-                if (found && found.declaration.signatures) {
-                    var sig = found.declaration.signatures[0];
-                    if (sig.name === '__call') {
-                        var rType = sig.type && sig.type.name;
-                        var params = sig.parameters.map(function (p) { return p.name + ": " + _this.simplifyType(p.type); });
-                        return "(" + params.join(', ') + ") => " + rType;
-                    }
-                }
-            }
-            if (type.type === 'union' && type.types) {
-                // generic unions
-                return type.types
-                    .filter(function (t) { return t.name !== 'undefined'; })
-                    .map(this.simplifyType)
-                    .join(' | ');
-            }
-            return 'undefined';
+        }
+        if (type.type === 'union' && type.types) {
+            // generic unions
+            return type.types
+                .filter(function (t) { return t.name !== 'undefined'; })
+                .map(this.simplifyType)
+                .join(' | ');
+        }
+        return 'undefined';
+    };
+    DocumentComponent.prototype.getComponentDef = function (displayName) {
+        var _this = this;
+        var componentDef = this.props.docs[displayName];
+        var propsDef = this.props.docs[displayName + 'Props'];
+        var def = {
+            name: displayName,
+            description: (componentDef &&
+                componentDef.comment &&
+                componentDef.comment.shortText) ||
+                '',
+            props: []
         };
-        DocumentComponent.prototype.getComponentDef = function (displayName) {
-            var _this = this;
-            var componentDef = this.props.docs[displayName];
-            var propsDef = this.props.docs[displayName + 'Props'];
-            var def = {
-                name: displayName,
-                description: (componentDef &&
-                    componentDef.comment &&
-                    componentDef.comment.shortText) ||
-                    '',
-                props: []
-            };
-            if (propsDef && propsDef.children) {
-                def.props = propsDef.children
-                    .map(function (p) {
-                    var simpleType = _this.simplifyType(p.type);
-                    return {
-                        name: p.name,
-                        description: (p.comment && p.comment.shortText) || '',
-                        required: !p.flags.isOptional,
-                        type: 
-                        // Do some wrapping for unions
-                        simpleType.includes(' | ') &&
-                            p.flags.isOptional &&
-                            !simpleType.startsWith('(')
-                            ? "(" + simpleType + ")"
-                            : simpleType
-                    };
-                })
-                    // remove deprecated props from UI
-                    .filter(function (p) { return !p.description.toLowerCase().includes('deprecated'); });
-            }
-            return def;
-        };
-        DocumentComponent.prototype.render = function () {
-            var displayName = this.props.displayName;
-            var def = this.getComponentDef(displayName);
-            return (React.createElement("div", { className: "document-component" },
-                React.createElement("h2", null, def.name),
-                React.createElement("p", null, def.description),
-                !!def.props.length && (React.createElement("div", null,
-                    React.createElement("h3", null, "Props"),
-                    React.createElement("table", null,
-                        React.createElement("thead", null,
-                            React.createElement("tr", null,
-                                React.createElement("th", null, "Name"),
-                                React.createElement("th", null, "Type"),
-                                React.createElement("th", null, "Description"))),
-                        React.createElement("tbody", null, def.props.map(function (prop) { return (React.createElement("tr", { key: prop.name },
-                            React.createElement("td", null,
-                                React.createElement("code", null, prop.name)),
-                            React.createElement("td", null,
-                                React.createElement("code", null,
-                                    !prop.required && React.createElement("span", { className: "optional" }, "?"),
-                                    prop.type)),
-                            React.createElement("td", null, prop.description))); })))))));
-        };
-        return DocumentComponent;
-    }(React.Component));
-    var Docs = /** @class */ (function (_super) {
-        __extends(Docs, _super);
-        function Docs(props) {
-            var _this = _super.call(this, props) || this;
-            _this.docs = {};
-            var docs = props.src.default ? props.src.default.children : [];
-            _this.docs = docs.reduce(function (acc, val) {
-                val.children &&
-                    val.children.forEach(function (c) {
-                        if (c.flags.isExported) {
-                            acc[c.name] = c;
-                        }
-                    });
-                return acc;
-            }, {});
-            console.log(_this.docs);
-            return _this;
+        if (propsDef && propsDef.children) {
+            def.props = propsDef.children
+                .map(function (p) {
+                var simpleType = _this.simplifyType(p.type);
+                return {
+                    name: p.name,
+                    description: (p.comment && p.comment.shortText) || '',
+                    required: !p.flags.isOptional,
+                    type: 
+                    // Do some wrapping for unions
+                    simpleType.includes(' | ') &&
+                        p.flags.isOptional &&
+                        !simpleType.startsWith('(')
+                        ? "(" + simpleType + ")"
+                        : simpleType
+                };
+            })
+                // remove deprecated props from UI
+                .filter(function (p) { return !p.description.toLowerCase().includes('deprecated'); });
         }
-        Docs.prototype.shouldComponentUpdate = function () {
-            return false;
-        };
-        Docs.prototype.render = function () {
-            var _this = this;
-            var components = this.props.components;
-            return components.map(function (c) { return (React.createElement(DocumentComponent, { key: c, displayName: c, docs: _this.docs })); });
-        };
-        return Docs;
-    }(React.Component));
-    exports.Docs = Docs;
-});
+        return def;
+    };
+    DocumentComponent.prototype.render = function () {
+        var displayName = this.props.displayName;
+        var def = this.getComponentDef(displayName);
+        return (React.createElement("div", { className: "document-component" },
+            React.createElement("h2", null, def.name),
+            React.createElement("p", null, def.description),
+            !!def.props.length && (React.createElement("div", null,
+                React.createElement("h3", null, "Props"),
+                React.createElement("table", null,
+                    React.createElement("thead", null,
+                        React.createElement("tr", null,
+                            React.createElement("th", null, "Name"),
+                            React.createElement("th", null, "Type"),
+                            React.createElement("th", null, "Description"))),
+                    React.createElement("tbody", null, def.props.map(function (prop) { return (React.createElement("tr", { key: prop.name },
+                        React.createElement("td", null,
+                            React.createElement("code", null, prop.name)),
+                        React.createElement("td", null,
+                            React.createElement("code", null,
+                                !prop.required && React.createElement("span", { className: "optional" }, "?"),
+                                prop.type)),
+                        React.createElement("td", null, prop.description))); })))))));
+    };
+    return DocumentComponent;
+}(React.Component));
+var Docs = /** @class */ (function (_super) {
+    __extends(Docs, _super);
+    function Docs(props) {
+        var _this = _super.call(this, props) || this;
+        _this.docs = {};
+        var docs = props.src.default ? props.src.default.children : [];
+        _this.docs = docs.reduce(function (acc, val) {
+            val.children &&
+                val.children.forEach(function (c) {
+                    if (c.flags.isExported) {
+                        acc[c.name] = c;
+                    }
+                });
+            return acc;
+        }, {});
+        console.log(_this.docs);
+        return _this;
+    }
+    Docs.prototype.shouldComponentUpdate = function () {
+        return false;
+    };
+    Docs.prototype.render = function () {
+        var _this = this;
+        var components = this.props.components;
+        return components.map(function (c) { return (React.createElement(DocumentComponent, { key: c, displayName: c, docs: _this.docs })); });
+    };
+    return Docs;
+}(React.Component));
+exports.Docs = Docs;

dist/utils/events-map.js

@@ -1,90 +0,89 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.eventsMap = {
-        blur: 'onBlur',
-        cancel: 'onCancel',
-        click: 'onClick',
-        close: 'onClose',
-        contextmenu: 'onContextMenu',
-        copy: 'onCopy',
-        cut: 'onCut',
-        auxclick: 'onAuxClick',
-        doubleclick: 'onDoubleClick',
-        dragend: 'onDragEnd',
-        dragstart: 'onDragStart',
-        drop: 'onDrop',
-        focus: 'onFocus',
-        input: 'onInput',
-        invalid: 'onInvalid',
-        keydown: 'onKeyDown',
-        keypress: 'onKeyPress',
-        keyup: 'onKeyUp',
-        mousedown: 'onMouseDown',
-        mouseup: 'onMouseUp',
-        paste: 'onPaste',
-        pause: 'onPause',
-        play: 'onPlay',
-        pointercancel: 'onPointerCancel',
-        pointerdown: 'onPointerDown',
-        pointerup: 'onPointerUp',
-        ratechange: 'onRateChange',
-        reset: 'onReset',
-        seeked: 'onSeeked',
-        submit: 'onSubmit',
-        touchcancel: 'onTouchCancel',
-        touchend: 'onTouchEnd',
-        touchstart: 'onTouchStart',
-        volumechange: 'onVolumeChange',
-        abort: 'onAbort',
-        animationend: 'onAnimationEnd',
-        animationiteration: 'onAnimationIteration',
-        animationstart: 'onAnimationStart',
-        canplay: 'onCanPlay',
-        canplaythrough: 'onCanPlayThrough',
-        drag: 'onDrag',
-        dragenter: 'onDragEnter',
-        dragexit: 'onDragExit',
-        dragleave: 'onDragLeave',
-        dragover: 'onDragOver',
-        durationchange: 'onDurationChange',
-        emptied: 'onEmptied',
-        encrypted: 'onEncrypted',
-        ended: 'onEnded',
-        error: 'onError',
-        gotpointercapture: 'onGotPointerCapture',
-        load: 'onLoad',
-        loadeddata: 'onLoadedData',
-        loadedmetadata: 'onLoadedMetadata',
-        loadstart: 'onLoadStart',
-        lostpointercapture: 'onLostPointerCapture',
-        mousemove: 'onMouseMove',
-        mouseout: 'onMouseOut',
-        mouseover: 'onMouseOver',
-        playing: 'onPlaying',
-        pointermove: 'onPointerMove',
-        pointerout: 'onPointerOut',
-        pointerover: 'onPointerOver',
-        progress: 'onProgress',
-        scroll: 'onScroll',
-        seeking: 'onSeeking',
-        stalled: 'onStalled',
-        suspend: 'onSuspend',
-        timeupdate: 'onTimeUpdate',
-        toggle: 'onToggle',
-        touchmove: 'onTouchMove',
-        transitionend: 'onTransitionEnd',
-        waiting: 'onWaiting',
-        wheel: 'onWheel',
-        mouseenter: 'onMouseEnter',
-        mouseleave: 'onMouseLeave',
-        pointerenter: 'onPointerEnter',
-        pointerleave: 'onPointerLeave',
-        change: 'onChange',
-        select: 'onSelect',
-        beforeinput: 'onBeforeInput',
-        compositionend: 'onCompositionEnd',
-        compositionstart: 'onCompositionStart',
-        compositionupdate: 'onCompositionUpdate'
-    };
-});
+"use strict";
+/* istanbul ignore file */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.eventsMap = {
+    blur: 'onBlur',
+    cancel: 'onCancel',
+    click: 'onClick',
+    close: 'onClose',
+    contextmenu: 'onContextMenu',
+    copy: 'onCopy',
+    cut: 'onCut',
+    auxclick: 'onAuxClick',
+    doubleclick: 'onDoubleClick',
+    dragend: 'onDragEnd',
+    dragstart: 'onDragStart',
+    drop: 'onDrop',
+    focus: 'onFocus',
+    input: 'onInput',
+    invalid: 'onInvalid',
+    keydown: 'onKeyDown',
+    keypress: 'onKeyPress',
+    keyup: 'onKeyUp',
+    mousedown: 'onMouseDown',
+    mouseup: 'onMouseUp',
+    paste: 'onPaste',
+    pause: 'onPause',
+    play: 'onPlay',
+    pointercancel: 'onPointerCancel',
+    pointerdown: 'onPointerDown',
+    pointerup: 'onPointerUp',
+    ratechange: 'onRateChange',
+    reset: 'onReset',
+    seeked: 'onSeeked',
+    submit: 'onSubmit',
+    touchcancel: 'onTouchCancel',
+    touchend: 'onTouchEnd',
+    touchstart: 'onTouchStart',
+    volumechange: 'onVolumeChange',
+    abort: 'onAbort',
+    animationend: 'onAnimationEnd',
+    animationiteration: 'onAnimationIteration',
+    animationstart: 'onAnimationStart',
+    canplay: 'onCanPlay',
+    canplaythrough: 'onCanPlayThrough',
+    drag: 'onDrag',
+    dragenter: 'onDragEnter',
+    dragexit: 'onDragExit',
+    dragleave: 'onDragLeave',
+    dragover: 'onDragOver',
+    durationchange: 'onDurationChange',
+    emptied: 'onEmptied',
+    encrypted: 'onEncrypted',
+    ended: 'onEnded',
+    error: 'onError',
+    gotpointercapture: 'onGotPointerCapture',
+    load: 'onLoad',
+    loadeddata: 'onLoadedData',
+    loadedmetadata: 'onLoadedMetadata',
+    loadstart: 'onLoadStart',
+    lostpointercapture: 'onLostPointerCapture',
+    mousemove: 'onMouseMove',
+    mouseout: 'onMouseOut',
+    mouseover: 'onMouseOver',
+    playing: 'onPlaying',
+    pointermove: 'onPointerMove',
+    pointerout: 'onPointerOut',
+    pointerover: 'onPointerOver',
+    progress: 'onProgress',
+    scroll: 'onScroll',
+    seeking: 'onSeeking',
+    stalled: 'onStalled',
+    suspend: 'onSuspend',
+    timeupdate: 'onTimeUpdate',
+    toggle: 'onToggle',
+    touchmove: 'onTouchMove',
+    transitionend: 'onTransitionEnd',
+    waiting: 'onWaiting',
+    wheel: 'onWheel',
+    mouseenter: 'onMouseEnter',
+    mouseleave: 'onMouseLeave',
+    pointerenter: 'onPointerEnter',
+    pointerleave: 'onPointerLeave',
+    change: 'onChange',
+    select: 'onSelect',
+    beforeinput: 'onBeforeInput',
+    compositionend: 'onCompositionEnd',
+    compositionstart: 'onCompositionStart',
+    compositionupdate: 'onCompositionUpdate'
+};

dist/utils/index.js

@@ -1,15 +0,13 @@
-define(["require", "exports", "./debounce", "./deprecation", "./document-component", "./events-map", "./ponyfills", "./random-id", "./strings", "./wrap-child"], function (require, exports, debounce_1, deprecation_1, document_component_1, events_map_1, ponyfills_1, random_id_1, strings_1, wrap_child_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    __export(debounce_1);
-    __export(deprecation_1);
-    __export(document_component_1);
-    __export(events_map_1);
-    __export(ponyfills_1);
-    __export(random_id_1);
-    __export(strings_1);
-    __export(wrap_child_1);
-});
+"use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+__export(require("./debounce"));
+__export(require("./deprecation"));
+__export(require("./document-component"));
+__export(require("./events-map"));
+__export(require("./ponyfills"));
+__export(require("./random-id"));
+__export(require("./strings"));
+__export(require("./wrap-child"));

dist/utils/ponyfills.js

@@ -1,9 +0,10 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.closest = function (element, selector) {
-        if (element instanceof Element) {
-            if (element && element.closest) {
-                return element.closest(selector);
-            }
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.closest = function (element, selector) {
+    if (element instanceof Element) {
+        /* istanbul ignore else  */
+        if (element && element.closest) {
+            return element.closest(selector);
+        }
+        else {
             var el = element;
@@ -17,11 +18,12 @@ while (el) {
         }
-        return null;
-    };
-    exports.matches = function (element, selector) {
-        var nativeMatches = element.matches ||
-            element.webkitMatchesSelector ||
-            // @ts-ignore
-            element.msMatchesSelector;
-        return nativeMatches.call(element, selector);
-    };
-});
+    }
+    return null;
+};
+exports.matches = function (element, selector) {
+    /* istanbul ignore next  */
+    var nativeMatches = element.matches ||
+        element.webkitMatchesSelector ||
+        // @ts-ignore
+        element.msMatchesSelector;
+    return nativeMatches.call(element, selector);
+};

dist/utils/random-id.js

@@ -1,14 +0,12 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Generates a pseudo random string for DOM ids
-     * Will return 'test' in the NODE test-env so things like storyshots doesnt break.
-     */
-    exports.randomId = function (prefix) {
-        var id = process.env.NODE_ENV === 'test'
-            ? 'test'
-            : (Math.random() + Math.random() + 1).toString(36).substring(2);
-        return prefix + "-" + id;
-    };
-});
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Generates a pseudo random string for DOM ids
+ * Will return 'test' in the NODE test-env so things like storyshots doesnt break.
+ */
+exports.randomId = function (prefix) {
+    var id = process.env.NODE_ENV === 'test'
+        ? 'test'
+        : (Math.random() + Math.random() + 1).toString(36).substring(2);
+    return prefix + "-" + id;
+};

dist/utils/strings.js

@@ -1,10 +0,8 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.toCamel = function (str) {
-        return str.replace(/(-[a-z])/g, function ($1) { return $1.toUpperCase().replace('-', ''); });
-    };
-    exports.toDashCase = function (str) {
-        return str.replace(/([A-Z])/g, function ($1) { return '-' + $1.toLowerCase(); });
-    };
-});
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCamel = function (str) {
+    return str.replace(/(-[a-z])/g, function ($1) { return $1.toUpperCase().replace('-', ''); });
+};
+exports.toDashCase = function (str) {
+    return str.replace(/([A-Z])/g, function ($1) { return '-' + $1.toLowerCase(); });
+};

dist/utils/wrap-child.js

@@ -0,1 +1,2 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
@@ -22,11 +23,8 @@ __assign = Object.assign || function(t) {
 };
-define(["require", "exports", "react", "classnames"], function (require, exports, React, classnames_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    React = __importStar(React);
-    classnames_1 = __importDefault(classnames_1);
-    exports.wrapChild = function (props) {
-        var child = React.Children.only(props.children);
-        return React.cloneElement(child, __assign({}, props, child.props, { className: classnames_1.default(props.className, child.props.className) }));
-    };
-});
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+exports.wrapChild = function (props) {
+    var child = React.Children.only(props.children);
+    return React.cloneElement(child, __assign({}, props, child.props, { className: classnames_1.default(props.className, child.props.className) }));
+};

dist/withTheme.d.ts

@@ -10,3 +10,3 @@ import * as RMWC from '@rmwc/types';
  */
-export declare const parseThemeOptions: (theme: string | string[] | null) => string[];
+export declare const parseThemeOptions: (theme: string | string[]) => string[];
 /**
@@ -13,0 +13,0 @@ * HOC that adds themeability to any component

dist/withTheme.js

@@ -0,1 +1,2 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
@@ -31,42 +32,38 @@ __assign = Object.assign || function(t) {
 };
-define(["require", "exports", "react", "classnames", "./utils/strings", "./utils/deprecation"], function (require, exports, React, classnames_1, strings_1, deprecation_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    React = __importStar(React);
-    classnames_1 = __importDefault(classnames_1);
-    /**
-     * Actually parses the theme options
-     */
-    exports.parseThemeOptions = function (theme) {
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var strings_1 = require("./utils/strings");
+var deprecation_1 = require("./utils/deprecation");
+/**
+ * Actually parses the theme options
+ */
+exports.parseThemeOptions = function (theme) {
+    if (typeof theme === 'string' && theme.includes(' ')) {
+        deprecation_1.deprecationWarning("Theme no longer accepts a string of theme names with spaces. Please pass them as an array instead.");
+    }
+    var themeItems = Array.isArray(theme) ? theme : theme.split(' ');
+    return themeItems.map(function (v) {
+        if (v.includes('-')) {
+            deprecation_1.deprecationWarning("Theme properties need to be passed as camelCase. Please convert " + v + " to " + v.replace(/-([a-z])/g, function (m, w) {
+                return w.toUpperCase();
+            }));
+        }
+        return "mdc-theme--" + strings_1.toDashCase(v);
+    });
+};
+/**
+ * HOC that adds themeability to any component
+ */
+exports.withTheme = function (Component) {
+    var HOC = function (_a) {
+        var theme = _a.theme, className = _a.className, rest = __rest(_a, ["theme", "className"]);
         if (theme) {
-            if (typeof theme === 'string' && theme.includes(' ')) {
-                deprecation_1.deprecationWarning("Theme no longer accepts a string of theme names with spaces. Please pass them as an array instead.");
-            }
-            var themeItems = Array.isArray(theme) ? theme : theme.split(' ');
-            return themeItems.map(function (v) {
-                if (v.includes('-')) {
-                    deprecation_1.deprecationWarning("Theme properties need to be passed as camelCase. Please convert " + v + " to " + v.replace(/-([a-z])/g, function (m, w) {
-                        return w.toUpperCase();
-                    }));
-                }
-                return "mdc-theme--" + strings_1.toDashCase(v);
-            });
+            var classes = classnames_1.default(className, exports.parseThemeOptions(theme));
+            return React.createElement(Component, __assign({ className: classes }, rest));
         }
-        return [];
+        return React.createElement(Component, __assign({ className: className }, rest));
     };
-    /**
-     * HOC that adds themeability to any component
-     */
-    exports.withTheme = function (Component) {
-        var HOC = function (_a) {
-            var theme = _a.theme, className = _a.className, rest = __rest(_a, ["theme", "className"]);
-            if (theme) {
-                var classes = classnames_1.default(className, exports.parseThemeOptions(theme));
-                return React.createElement(Component, __assign({ className: classes }, rest));
-            }
-            return React.createElement(Component, __assign({ className: className }, rest));
-        };
-        HOC.displayName = 'withTheme';
-        return HOC;
-    };
-});
+    HOC.displayName = 'withTheme';
+    return HOC;
+};

next/component.d.ts

@@ -13,6 +13,6 @@ import * as RMWC from '@rmwc/types';
     consumeProps?: string[];
-    defaultProps?: any & Partial<RMWC.ComponentProps<any> & Props>;
+    defaultProps?: any & Partial<RMWC.ComponentProps & Props>;
     render?: (props: any, ref: React.Ref<any>, tag: RMWC.TagT) => React.ReactElement<HTMLElement>;
 }
-export declare const componentFactory: <P extends {}>({ displayName, classNames, tag: defaultTag, deprecate, defaultProps, consumeProps, render }: ComponentFactoryOpts<P>) => React.ComponentType<P & RMWC.ComponentProps<any>>;
+export declare const componentFactory: <P extends {}>({ displayName, classNames, tag: defaultTag, deprecate, defaultProps, consumeProps, render }: ComponentFactoryOpts<P>) => React.ComponentType<P & RMWC.ComponentProps>;
 export {};

next/component.js

@@ -67,9 +67,10 @@ var __assign = (this && this.__assign) || function () {
         var className = props.className, theme = props.theme, tag = props.tag, rest = __rest(props, ["className", "theme", "tag"]);
-        handleClassNames(rest, classNames, className, theme);
-        handleTag(rest, defaultTag, tag);
+        var newProps = rest;
+        handleClassNames(newProps, classNames, className, theme);
+        handleTag(newProps, defaultTag, tag);
         if (deprecate) {
-            props = handleDeprecations(rest, deprecate, displayName);
+            newProps = handleDeprecations(newProps, deprecate, displayName);
         }
-        handleConsumeProps(rest, consumeProps);
-        var finalProps = rest;
+        handleConsumeProps(newProps, consumeProps);
+        var finalProps = newProps;
         // Do some switching to figure out what tag to use
@@ -76,0 +77,0 @@ // if we are extending an icon, we can still honor

next/foundation-component.d.ts

 import * as RMWC from '@rmwc/types';
 import * as React from 'react';
-export declare class FoundationElement<Props extends {
-    [key: string]: any;
-}, ElementType = HTMLElement> {
+export declare class FoundationElement<Props extends {}, ElementType = HTMLElement> {
     private _classes;
@@ -11,4 +9,5 @@ private _events;
     private _ref;
-    onChange: () => void;
+    _onChange: (() => void) | null;
     constructor(onChange: () => void);
+    onChange(): void;
     destroy(): void;
@@ -66,8 +65,11 @@ /**************************************************
     syncProp(prop: any, prevProp: any, callback: () => void): void;
-    getDefaultFoundation(): void;
+    getDefaultFoundation(): {
+        init: () => void;
+        destroy: () => void;
+    };
     /**
      * Fires a cross-browser-compatible custom event from the component root of the given type,
      */
-    emit(evtType: string, evtData: Object, shouldBubble?: boolean): CustomEvent<any>;
+    emit(evtType: string, evtData: Object, shouldBubble?: boolean): CustomEvent<Object>;
 }
 export {};

next/foundation-component.js

@@ -25,11 +25,2 @@ var __extends = (this && this.__extends) || (function () {
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 var __read = (this && this.__read) || function (o, n) {
@@ -70,4 +61,5 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
         this._ref = null;
-        this.onChange = function () { };
-        this.onChange = onChange;
+        this._onChange = null;
+        this._onChange = onChange;
+        this.onChange = this.onChange.bind(this);
         this.addClass = this.addClass.bind(this);
@@ -84,4 +76,7 @@ this.removeClass = this.removeClass.bind(this);
     }
+    FoundationElement.prototype.onChange = function () {
+        this._onChange && this._onChange();
+    };
     FoundationElement.prototype.destroy = function () {
-        this.onChange = function () { };
+        this._onChange = null;
         this._ref = null;
@@ -131,3 +126,3 @@ this._events = {};
         var _this = this;
-        var _a = propsToMerge.className, className = _a === void 0 ? '' : _a, _b = propsToMerge.style, style = _b === void 0 ? {} : _b, rest = __rest(propsToMerge, ["className", "style"]);
+        var _a = propsToMerge.className, className = _a === void 0 ? '' : _a, _b = propsToMerge.style, style = _b === void 0 ? {} : _b;
         // handle merging events
@@ -244,3 +239,8 @@ // the foundation should be able to pass something onClick as well as a user
     };
-    FoundationComponent.prototype.getDefaultFoundation = function () { };
+    FoundationComponent.prototype.getDefaultFoundation = function () {
+        return {
+            init: function () { },
+            destroy: function () { }
+        };
+    };
     /**
@@ -252,12 +252,6 @@ * Fires a cross-browser-compatible custom event from the component root of the given type,
         var evt;
-        if (typeof CustomEvent === 'function') {
-            evt = new CustomEvent(evtType, {
-                detail: evtData,
-                bubbles: shouldBubble
-            });
-        }
-        else {
-            evt = document.createEvent('CustomEvent');
-            evt.initCustomEvent(evtType, shouldBubble, false, evtData);
-        }
+        evt = new CustomEvent(evtType, {
+            detail: evtData,
+            bubbles: shouldBubble
+        });
         // bugfix for events coming from form elements
@@ -271,2 +265,6 @@ // and also fits with reacts form pattern better...
         });
+        Object.defineProperty(evt, 'currentTarget', {
+            value: evtData,
+            writable: false
+        });
         // Custom handling for React
@@ -283,5 +281,5 @@ var propName = evtType;
     };
-    FoundationComponent.shouldDebounce = false;
+    FoundationComponent.shouldDebounce = true;
     return FoundationComponent;
 }(React.Component));
 export { FoundationComponent };

next/index.d.ts

@@ -1,11 +0,10 @@
-/// <reference types="react" />
-import { WithThemeProps } from './withTheme';
-import { FoundationProps } from './foundation-component';
-import { FocusTrap } from 'focus-trap';
-export declare type WithThemeProps = WithThemeProps;
-export interface FoundationProps extends FoundationProps {
+import { WithThemeProps as _WithThemeProps } from './withTheme';
+import { FoundationProps as _FoundationProps } from './foundation-component';
+import { FocusTrap as _FocusTrap } from 'focus-trap';
+export declare type WithThemeProps = _WithThemeProps;
+export interface FoundationProps extends _FoundationProps {
 }
 export { default as classNames } from 'classnames';
 export { default as createFocusTrap } from 'focus-trap';
-export interface FocusTrap extends FocusTrap {
+export interface FocusTrap extends _FocusTrap {
 }
@@ -15,3 +14,2 @@ export * from './withTheme';
 export { componentFactory } from './component';
-export declare type CustomEventT<T> = CustomEvent<T> & React.SyntheticEvent<EventTarget>;
 export * from './utils';

next/utils/deprecation.js

@@ -30,2 +30,3 @@ var __assign = (this && this.__assign) || function () {
             if (newPropName === '') {
+                /* istanbul ignore next */
                 deprecationWarning((displayName ||
@@ -38,4 +39,5 @@ '') + " component prop '" + oldPropName + "' has been removed from and is no longer a valid prop.");
                 if (props[newPropName] !== props[oldPropName]) {
-                    propTransformMessage = " The old value has also been converted from '" + props[newPropName] + "' to '" + props[oldPropName] + "'";
+                    propTransformMessage = " The old value has also been converted from '" + props[oldPropName] + "' to '" + props[newPropName] + "'";
                 }
+                /* istanbul ignore next */
                 deprecationWarning((displayName ||
@@ -42,0 +44,0 @@ '') + " component prop '" + oldPropName + "' has been replaced with '" + newPropName + "'. " + propTransformMessage);

next/utils/document-component.d.ts

@@ -34,6 +34,7 @@ import * as React from 'react';
 }
-export declare class Docs extends React.Component<{
+export interface DocsInterface {
     src: {};
     components: string[];
-}> {
+}
+export declare class Docs extends React.Component<DocsInterface> {
     docs: {
@@ -40,0 +41,0 @@ [key: string]: Def | undefined;

next/utils/events-map.js

@@ -0,1 +1,2 @@
+/* istanbul ignore file */
 export var eventsMap = {
@@ -2,0 +3,0 @@ blur: 'onBlur',

next/utils/ponyfills.js

 export var closest = function (element, selector) {
     if (element instanceof Element) {
+        /* istanbul ignore else  */
         if (element && element.closest) {
             return element.closest(selector);
         }
-        var el = element;
-        while (el) {
-            if (matches(el, selector)) {
-                return el;
+        else {
+            var el = element;
+            while (el) {
+                if (matches(el, selector)) {
+                    return el;
+                }
+                el = el.parentElement;
             }
-            el = el.parentElement;
         }
@@ -17,2 +20,3 @@ }
 export var matches = function (element, selector) {
+    /* istanbul ignore next  */
     var nativeMatches = element.matches ||
@@ -19,0 +23,0 @@ element.webkitMatchesSelector ||

next/withTheme.d.ts

@@ -10,3 +10,3 @@ import * as RMWC from '@rmwc/types';
  */
-export declare const parseThemeOptions: (theme: string | string[] | null) => string[];
+export declare const parseThemeOptions: (theme: string | string[]) => string[];
 /**
@@ -13,0 +13,0 @@ * HOC that adds themeability to any component

next/withTheme.js

@@ -29,17 +29,14 @@ var __assign = (this && this.__assign) || function () {
 export var parseThemeOptions = function (theme) {
-    if (theme) {
-        if (typeof theme === 'string' && theme.includes(' ')) {
-            deprecationWarning("Theme no longer accepts a string of theme names with spaces. Please pass them as an array instead.");
+    if (typeof theme === 'string' && theme.includes(' ')) {
+        deprecationWarning("Theme no longer accepts a string of theme names with spaces. Please pass them as an array instead.");
+    }
+    var themeItems = Array.isArray(theme) ? theme : theme.split(' ');
+    return themeItems.map(function (v) {
+        if (v.includes('-')) {
+            deprecationWarning("Theme properties need to be passed as camelCase. Please convert " + v + " to " + v.replace(/-([a-z])/g, function (m, w) {
+                return w.toUpperCase();
+            }));
         }
-        var themeItems = Array.isArray(theme) ? theme : theme.split(' ');
-        return themeItems.map(function (v) {
-            if (v.includes('-')) {
-                deprecationWarning("Theme properties need to be passed as camelCase. Please convert " + v + " to " + v.replace(/-([a-z])/g, function (m, w) {
-                    return w.toUpperCase();
-                }));
-            }
-            return "mdc-theme--" + toDashCase(v);
-        });
-    }
-    return [];
+        return "mdc-theme--" + toDashCase(v);
+    });
 };
@@ -46,0 +43,0 @@ /**

package.json

 {
   "name": "@rmwc/base",
-  "version": "5.0.2-alpha.0",
+  "version": "5.0.3-alpha.0",
   "description": "RMWC base module",
@@ -34,3 +34,3 @@ "main": "dist/index.js",
   "dependencies": {
-    "@rmwc/types": "^5.0.2-alpha.0",
+    "@rmwc/types": "^5.0.3-alpha.0",
     "classnames": "^2.2.5",
@@ -41,3 +41,3 @@ "focus-trap": "^2.3.0",
   },
-  "gitHead": "69fbf9ddbdad8cf2b014443c386e1c125a9cee79"
+  "gitHead": "32b316530fb6c1c78e2335bc56d9be85e3cb3752"
 }

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

142486

increased by9.37%

Number of package files

86

increased by17.81%

Lines of code

4141

increased by14.33%

Dependency changes

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