@webiny/ui 5.23.1 → 5.25.0-beta.0

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

@@ -0,0 +1,120 @@
+/* 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 __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;
+    };
+Object.defineProperty(exports, "__esModule", { value: true });
+var EventEmitter = /** @class */ (function () {
+    function EventEmitter() {
+        this.events_ = {};
+    }
+    EventEmitter.prototype.on = function (event, cb) {
+        this.events_ = this.events_ || {};
+        this.events_[event] = this.events_[event] || [];
+        this.events_[event].push(cb);
+    };
+    EventEmitter.prototype.off = function (event, cb) {
+        this.events_ = this.events_ || {};
+        if (event in this.events_ === false) {
+            return;
+        }
+        this.events_[event].splice(this.events_[event].indexOf(cb), 1);
+    };
+    EventEmitter.prototype.trigger = function (event) {
+        var args = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args[_i - 1] = arguments[_i];
+        }
+        this.events_ = this.events_ || {};
+        if (event in this.events_ === false) {
+            return;
+        }
+        for (var i = 0; i < this.events_[event].length; i++) {
+            this.events_[event][i].apply(this, Array.prototype.slice.call(arguments, 1));
+        }
+    };
+    return EventEmitter;
+})();
+exports.EventEmitter = EventEmitter;
+var ArrayEmitter = /** @class */ (function (_super) {
+    __extends(ArrayEmitter, _super);
+    function ArrayEmitter() {
+        var _this = (_super !== null && _super.apply(this, arguments)) || this;
+        _this.array = [];
+        return _this;
+    }
+    ArrayEmitter.prototype.push = function () {
+        var _a;
+        var items = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            items[_i] = arguments[_i];
+        }
+        var rVal = (_a = this.array).push.apply(_a, __spread(items));
+        this.trigger("change");
+        return rVal;
+    };
+    return ArrayEmitter;
+})(EventEmitter);
+exports.ArrayEmitter = ArrayEmitter;

package/rmwc/base/code/utils/events-map.d.ts

@@ -0,0 +1,87 @@
+/* eslint-disable */
+export declare const eventsMap: {
+    blur: string;
+    cancel: string;
+    click: string;
+    close: string;
+    contextmenu: string;
+    copy: string;
+    cut: string;
+    auxclick: string;
+    doubleclick: string;
+    dragend: string;
+    dragstart: string;
+    drop: string;
+    focus: string;
+    input: string;
+    invalid: string;
+    keydown: string;
+    keypress: string;
+    keyup: string;
+    mousedown: string;
+    mouseup: string;
+    paste: string;
+    pause: string;
+    play: string;
+    pointercancel: string;
+    pointerdown: string;
+    pointerup: string;
+    ratechange: string;
+    reset: string;
+    seeked: string;
+    submit: string;
+    touchcancel: string;
+    touchend: string;
+    touchstart: string;
+    volumechange: string;
+    abort: string;
+    animationend: string;
+    animationiteration: string;
+    animationstart: string;
+    canplay: string;
+    canplaythrough: string;
+    drag: string;
+    dragenter: string;
+    dragexit: string;
+    dragleave: string;
+    dragover: string;
+    durationchange: string;
+    emptied: string;
+    encrypted: string;
+    ended: string;
+    error: string;
+    gotpointercapture: string;
+    load: string;
+    loadeddata: string;
+    loadedmetadata: string;
+    loadstart: string;
+    lostpointercapture: string;
+    mousemove: string;
+    mouseout: string;
+    mouseover: string;
+    playing: string;
+    pointermove: string;
+    pointerout: string;
+    pointerover: string;
+    progress: string;
+    scroll: string;
+    seeking: string;
+    stalled: string;
+    suspend: string;
+    timeupdate: string;
+    toggle: string;
+    touchmove: string;
+    transitionend: string;
+    waiting: string;
+    wheel: string;
+    mouseenter: string;
+    mouseleave: string;
+    pointerenter: string;
+    pointerleave: string;
+    change: string;
+    select: string;
+    beforeinput: string;
+    compositionend: string;
+    compositionstart: string;
+    compositionupdate: string;
+};

package/rmwc/base/code/utils/events-map.js

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

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

@@ -0,0 +1,10 @@
+/* eslint-disable */
+export * from './debounce';
+export * from './deprecation';
+export * from './events-map';
+export * from './ponyfills';
+export * from './random-id';
+export * from './strings';
+export * from './wrap-child';
+export * from './emitter';
+export * from './apply-passive';

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

@@ -0,0 +1,19 @@
+/* eslint-disable */
+"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("./events-map"));
+__export(require("./ponyfills"));
+__export(require("./random-id"));
+__export(require("./strings"));
+__export(require("./wrap-child"));
+__export(require("./emitter"));
+__export(require("./apply-passive"));

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

@@ -0,0 +1,3 @@
+/* eslint-disable */
+export declare const closest: (element: EventTarget | HTMLElement | null, selector: string) => HTMLElement | null;
+export declare const matches: (element: HTMLElement, selector: string) => boolean;

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

@@ -0,0 +1,29 @@
+/* eslint-disable */
+"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;
+            while (el) {
+                if (exports.matches(el, selector)) {
+                    return el;
+                }
+                el = el.parentElement;
+            }
+        }
+    }
+    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);
+};

package/rmwc/base/code/utils/random-id.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+/**
+ * Generates a pseudo random string for DOM ids
+ * Will return 'test' in the NODE test-env so things like storyshots doesnt break.
+ */
+export declare const randomId: (prefix?: string | undefined) => string;

package/rmwc/base/code/utils/random-id.js

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

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

@@ -0,0 +1,3 @@
+/* eslint-disable */
+export declare const toCamel: (str: string) => string;
+export declare const toDashCase: (str: string) => string;

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

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

package/rmwc/base/code/utils/use-knob.d.ts

@@ -0,0 +1,2 @@
+/* eslint-disable */
+export declare const useKnob: (knobType: "number" | "boolean" | "object" | "button" | "select" | "text" | "color" | "date" | "files" | "knob" | "radios" | "array" | "optionsKnob" | "withKnobs" | "withKnobsOptions", name: string, defaultValue: any) => any[];

package/rmwc/base/code/utils/use-knob.js

@@ -0,0 +1,64 @@
+/* eslint-disable */
+"use strict";
+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 __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;
+    };
+Object.defineProperty(exports, "__esModule", { value: true });
+/* istanbul ignore file */
+var react_1 = require("react");
+var knobTypes = __importStar(require("@storybook/addon-knobs"));
+exports.useKnob = function (knobType, name, defaultValue) {
+    var knobFunc = knobTypes[knobType];
+    var _a = __read(react_1.useState(defaultValue), 2),
+        stateValue = _a[0],
+        stateSetter = _a[1];
+    var knobValue = knobFunc(name, stateValue);
+    if (knobValue !== stateValue) {
+        stateSetter(knobValue);
+    }
+    return [stateValue, stateSetter];
+};

package/rmwc/base/code/utils/wrap-child.d.ts

@@ -0,0 +1,3 @@
+/* eslint-disable */
+import * as React from 'react';
+export declare const wrapChild: (props: any) => React.DetailedReactHTMLElement<any, HTMLElement>;

package/rmwc/base/code/utils/wrap-child.js

@@ -0,0 +1,55 @@
+/* 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 __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"));
+exports.wrapChild = function (props) {
+    var child = React.Children.only(props.children);
+    return React.cloneElement(
+        child,
+        __assign({}, props, child.props, {
+            // @ts-ignore
+            className: classnames_1.default(props.className, child.props.className)
+        })
+    );
+};

package/rmwc/base/code/with-theme.d.ts

@@ -0,0 +1,15 @@
+/* eslint-disable */
+import * as RMWC from '@rmwc/types';
+import * as React from 'react';
+export interface WithThemeProps {
+    theme?: RMWC.ThemePropT;
+    className?: string;
+}
+/**
+ * Actually parses the theme options
+ */
+export declare const parseThemeOptions: (theme: string | string[]) => string[];
+/**
+ * HOC that adds themeability to any component
+ */
+export declare const withTheme: <P extends any>(Component: React.ComponentType<any>) => React.ComponentType<any>;

package/rmwc/base/code/with-theme.js

@@ -0,0 +1,106 @@
+/* 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 __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 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) {
+            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;
+};