@webiny/ui 5.23.1 → 5.25.0-beta.0

package/rmwc/base/code/foundation-component.js

@@ -0,0 +1,354 @@
+/* eslint-disable */
+"use strict";
+var __extends =
+    (this && this.__extends) ||
+    (function () {
+        var extendStatics = function (d, b) {
+            extendStatics =
+                Object.setPrototypeOf ||
+                ({ __proto__: [] } instanceof Array &&
+                    function (d, b) {
+                        d.__proto__ = b;
+                    }) ||
+                function (d, b) {
+                    for (var p in b) {
+                        if (b.hasOwnProperty(p)) {
+                            d[p] = b[p];
+                        }
+                    }
+                };
+            return extendStatics(d, b);
+        };
+        return function (d, b) {
+            extendStatics(d, b);
+            function __() {
+                this.constructor = d;
+            }
+            d.prototype = b === null ? Object.create(b) : ((__.prototype = b.prototype), new __());
+        };
+    })();
+var __assign =
+    (this && this.__assign) ||
+    function () {
+        __assign =
+            Object.assign ||
+            function (t) {
+                for (var s, i = 1, n = arguments.length; i < n; i++) {
+                    s = arguments[i];
+                    for (var p in s) {
+                        if (Object.prototype.hasOwnProperty.call(s, p)) {
+                            t[p] = s[p];
+                        }
+                    }
+                }
+                return t;
+            };
+        return __assign.apply(this, arguments);
+    };
+var __read =
+    (this && this.__read) ||
+    function (o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m) {
+            return o;
+        }
+        var i = m.call(o),
+            r,
+            ar = [],
+            e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
+                ar.push(r.value);
+            }
+        } catch (error) {
+            e = { error: error };
+        } finally {
+            try {
+                if (r && !r.done && (m = i["return"])) {
+                    m.call(i);
+                }
+            } finally {
+                if (e) {
+                    throw e.error;
+                }
+            }
+        }
+        return ar;
+    };
+var __spread =
+    (this && this.__spread) ||
+    function () {
+        for (var ar = [], i = 0; i < arguments.length; i++) {
+            ar = ar.concat(__read(arguments[i]));
+        }
+        return ar;
+    };
+var __importStar =
+    (this && this.__importStar) ||
+    function (mod) {
+        if (mod && mod.__esModule) {
+            return mod;
+        }
+        var result = {};
+        if (mod != null) {
+            for (var k in mod) {
+                if (Object.hasOwnProperty.call(mod, k)) {
+                    result[k] = mod[k];
+                }
+            }
+        }
+        result["default"] = mod;
+        return result;
+    };
+var __importDefault =
+    (this && this.__importDefault) ||
+    function (mod) {
+        return mod && mod.__esModule ? mod : { default: mod };
+    };
+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();
+    };
+    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.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) {
+        var propName = reactPropFromEventName(evtName);
+        if (this._events[propName] !== callback) {
+            this._events[propName] = callback;
+            this.onChange();
+        }
+    };
+    FoundationElement.prototype.removeEventListener = function (evtName, callback) {
+        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.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 = this.getDefaultFoundation();
+        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();
+        // @ts-ignore
+        this.foundation = undefined;
+        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 () {}
+        };
+    };
+    /**
+     * 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
+        });
+        // 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
+            this.props[propName] && this.props[propName](evt);
+        }
+        return evt;
+    };
+    FoundationComponent.shouldDebounce = false;
+    return FoundationComponent;
+})(React.Component);
+exports.FoundationComponent = FoundationComponent;

package/rmwc/base/code/index.d.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import { WithThemeProps as _WithThemeProps } from './with-theme';
+import { FoundationProps as _FoundationProps } from './foundation-component';
+import { FocusTrap as _FocusTrap } from 'focus-trap';
+import _createFocusTrap from 'focus-trap';
+export { default as classNames } from 'classnames';
+export * from './with-theme';
+export * from './utils';
+export { FoundationComponent } from './foundation-component';
+export { componentFactory } from './component';
+export declare const createFocusTrap: typeof _createFocusTrap;
+export declare type WithThemeProps = _WithThemeProps;
+export interface FoundationProps extends _FoundationProps {
+}
+export interface FocusTrap extends _FocusTrap {
+}

package/rmwc/base/code/index.js

@@ -0,0 +1,25 @@
+/* eslint-disable */
+"use strict";
+function __export(m) {
+    for (var p in m) {
+        if (!exports.hasOwnProperty(p)) {
+            exports[p] = m[p];
+        }
+    }
+}
+var __importDefault =
+    (this && this.__importDefault) ||
+    function (mod) {
+        return mod && mod.__esModule ? mod : { default: mod };
+    };
+Object.defineProperty(exports, "__esModule", { value: true });
+var focus_trap_1 = __importDefault(require("focus-trap"));
+var classnames_1 = require("classnames");
+exports.classNames = classnames_1.default;
+__export(require("./with-theme"));
+__export(require("./utils"));
+var foundation_component_1 = require("./foundation-component");
+exports.FoundationComponent = foundation_component_1.FoundationComponent;
+var component_1 = require("./component");
+exports.componentFactory = component_1.componentFactory;
+exports.createFocusTrap = focus_trap_1.default;

package/rmwc/base/code/test-polyfill.d.ts

@@ -0,0 +1,3 @@
+/* eslint-disable */
+declare const _default: () => void;
+export default _default;

package/rmwc/base/code/test-polyfill.js

@@ -0,0 +1,33 @@
+/* eslint-disable */
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = function () {
+    if (global["window"]) {
+        var hyperform = require("hyperform");
+        hyperform(window);
+        Object.defineProperty(window["HTMLElement"].prototype, "dataset", {
+            writable: true,
+            value: {}
+        });
+        if (!window["HTMLCanvasElement"]) {
+            Object.defineProperty(window["HTMLCanvasElement"].prototype, "getContext", {
+                writable: true,
+                value: function () {
+                    return {
+                        font: "",
+                        measureText: function () {
+                            return { width: 0 };
+                        }
+                    };
+                }
+            });
+        }
+        if (!window.scrollTo) {
+            Object.defineProperty(window, "scrollTo", {
+                writable: true,
+                value: function () {}
+            });
+        }
+        window["MutationObserver"] = window["MutationObserver"] || require("mutation-observer");
+    }
+};

package/rmwc/base/code/utils/apply-passive.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+/**
+ * Determine whether the current browser supports passive event listeners, and
+ * if so, use them.
+ */
+export declare function applyPassive(globalObj?: any, forceRefresh?: any): false | {
+    passive: boolean;
+};

package/rmwc/base/code/utils/apply-passive.js

@@ -0,0 +1,63 @@
+/* eslint-disable */
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @license
+ * Copyright 2019 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+/**
+ * Stores result from applyPassive to avoid redundant processing to detect
+ * passive event listener support.
+ */
+var supportsPassive_;
+/**
+ * Determine whether the current browser supports passive event listeners, and
+ * if so, use them.
+ */
+function applyPassive(globalObj, forceRefresh) {
+    if (globalObj === void 0) {
+        globalObj = window;
+    }
+    if (forceRefresh === void 0) {
+        forceRefresh = false;
+    }
+    if (supportsPassive_ === undefined || forceRefresh) {
+        var isSupported_1 = false;
+        try {
+            globalObj.document.addEventListener(
+                "test",
+                function () {
+                    return undefined;
+                },
+                {
+                    get passive() {
+                        isSupported_1 = true;
+                        return isSupported_1;
+                    }
+                }
+            );
+        } catch (e) {} // tslint:disable-line:no-empty cannot throw error due to tests. tslint also disables console.log.
+        supportsPassive_ = isSupported_1;
+    }
+    return supportsPassive_ ? { passive: true } : false;
+}
+exports.applyPassive = applyPassive;
+//# sourceMappingURL=events.js.map

package/rmwc/base/code/utils/debounce.d.ts

@@ -0,0 +1,2 @@
+/* eslint-disable */
+export declare const debounce: (func: Function, wait: number) => () => void;

package/rmwc/base/code/utils/debounce.js

@@ -0,0 +1,17 @@
+/* eslint-disable */
+"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);
+    };
+};

package/rmwc/base/code/utils/deprecation.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+export declare type DeprecateT = {
+    [oldPropName: string]: string | [string, (value: any) => void];
+};
+export declare const deprecationWarning: (message: string) => void;
+export declare const handleDeprecations: (props: any, deprecate: DeprecateT, displayName: string) => any;

package/rmwc/base/code/utils/deprecation.js

@@ -0,0 +1,76 @@
+/* eslint-disable */
+"use strict";
+var __assign =
+    (this && this.__assign) ||
+    function () {
+        __assign =
+            Object.assign ||
+            function (t) {
+                for (var s, i = 1, n = arguments.length; i < n; i++) {
+                    s = arguments[i];
+                    for (var p in s) {
+                        if (Object.prototype.hasOwnProperty.call(s, p)) {
+                            t[p] = s[p];
+                        }
+                    }
+                }
+                return t;
+            };
+        return __assign.apply(this, arguments);
+    };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deprecationWarning = function (message) {
+    if (process && process.env && process.env.NODE_ENV !== "production") {
+        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 {
+                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] +
+                        "'";
+                }
+                /* istanbul ignore next */
+                exports.deprecationWarning(
+                    (displayName || "") +
+                        " component prop '" +
+                        oldPropName +
+                        "' has been replaced with '" +
+                        newPropName +
+                        "'. " +
+                        propTransformMessage
+                );
+            }
+            delete props[oldPropName];
+        }
+    }
+    return props;
+};

package/rmwc/base/code/utils/emitter.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+export declare class EventEmitter {
+    events_: {
+        [evtName: string]: Array<Function>;
+    };
+    on(event: string, cb: Function): void;
+    off(event: string, cb: Function): void;
+    trigger(event: string, ...args: any): void;
+}
+export declare class ArrayEmitter<T> extends EventEmitter {
+    array: T[];
+    push(...items: T[]): number;
+}