@webiny/ui 5.24.0 → 5.25.0-beta.0

package/rmwc/base/code/component.js

@@ -0,0 +1,163 @@
+/* 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);
+    };
+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 && Object.prototype.propertyIsEnumerable.call(s, p[i])) {
+                    t[p[i]] = s[p[i]];
+                }
+            }
+        }
+        return t;
+    };
+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 with_theme_1 = require("./with-theme");
+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 ? with_theme_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") {
+        props.tag = tag;
+        return defaultTag;
+    }
+    return tag || defaultTag;
+};
+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);
+        var Tag = handleTag(newProps, defaultTag, tag);
+        if (deprecate) {
+            newProps = deprecation_1.handleDeprecations(newProps, deprecate, displayName);
+        }
+        handleConsumeProps(newProps, consumeProps);
+        var finalProps = newProps;
+        // @ts-ignore
+        return render
+            ? render(finalProps, ref, Tag)
+            : React.createElement(Tag, __assign({}, finalProps, { ref: ref }));
+    });
+    Component.displayName = displayName;
+    Component.defaultProps = defaultProps;
+    return Component;
+};

package/rmwc/base/code/foundation-component.d.ts

@@ -0,0 +1,79 @@
+/* eslint-disable */
+import * as RMWC from "@rmwc/types";
+import { SpecificEventListener } from "@material/base/types";
+import * as React from "react";
+export declare class FoundationElement<Props, ElementType = HTMLElement> {
+    private _classes;
+    private _events;
+    private _style;
+    private _props;
+    private _ref;
+    _onChange: (() => void) | null;
+    constructor(onChange: () => void);
+    onChange(): void;
+    destroy(): void;
+    /**************************************************
+     * Classes
+     **************************************************/
+    addClass(className: string): void;
+    removeClass(className: string): void;
+    hasClass(className: string): boolean;
+    /**************************************************
+     * Props
+     **************************************************/
+    setProp(propName: keyof Props, value: any): void;
+    getProp(propName: keyof Props): Partial<Props>[keyof Props];
+    removeProp(propName: keyof Props): void;
+    props(propsToMerge: { [key: string]: any }): any;
+    /**************************************************
+     * Styles
+     **************************************************/
+    setStyle(propertyName: string, value: number | string | null): void;
+    /**************************************************
+     * Events
+     **************************************************/
+    addEventListener(evtName: string, callback: SpecificEventListener<any>): void;
+    removeEventListener(evtName: string, callback: SpecificEventListener<any>): void;
+    /**************************************************
+     * Refs
+     **************************************************/
+    setRef(el: any): void;
+    readonly ref: ElementType | null;
+}
+declare type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends React.Component<
+    infer TProps,
+    any
+>
+    ? TProps
+    : TComponentOrTProps;
+export interface FoundationProps extends RMWC.ComponentProps {}
+interface FoundationState {}
+declare type FoundationPropsT<P> = RMWC.MergeInterfacesT<P, FoundationProps>;
+declare type FoundationStateT<S> = S & FoundationState;
+export declare class FoundationComponent<
+    Foundation extends any,
+    P,
+    S extends any = {}
+> extends React.Component<FoundationPropsT<P>, FoundationStateT<S>> {
+    static shouldDebounce: boolean;
+    foundation: Foundation;
+    elements: {
+        [key: string]: FoundationElement<any, any>;
+    };
+    constructor(props: any);
+    public override componentDidMount(): void;
+    componentDidUpdate(prevProps: FoundationPropsT<P>): void;
+    componentWillUnmount(): void;
+    createElement<ElementType extends HTMLElement = HTMLElement>(
+        elementName: string
+    ): FoundationElement<ExtractProps<ElementType>, ElementType>;
+    update(): void;
+    sync(props: any, prevProps?: any): void;
+    syncProp(prop: any, prevProp: any, callback: () => void): void;
+    getDefaultFoundation(): Foundation;
+    /**
+     * Fires a cross-browser-compatible custom event from the component root of the given type,
+     */
+    emit(evtType: string, evtData: any, shouldBubble?: boolean): CustomEvent<any>;
+}
+export {};

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;
+};