@ukic/canary-react 2.0.0-canary.4 → 2.0.0-canary.6

package/dist/components.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { JSX } from '@ukic/canary-web-components';
 export declare const IcDataTable: import("react").ForwardRefExoticComponent<JSX.IcDataTable & Omit<import("react").HTMLAttributes<HTMLIcDataTableElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataTableElement>>;
 export declare const IcPaginationBar: import("react").ForwardRefExoticComponent<JSX.IcPaginationBar & Omit<import("react").HTMLAttributes<HTMLIcPaginationBarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPaginationBarElement>>;

package/dist/components.js

@@ -4,5 +4,5 @@
 import { createReactComponent } from './react-component-lib';
 import { defineCustomElements } from '@ukic/canary-web-components/loader';
 defineCustomElements();
-export const IcDataTable = /*@__PURE__*/ createReactComponent('ic-data-table');
-export const IcPaginationBar = /*@__PURE__*/ createReactComponent('ic-pagination-bar');
+export var IcDataTable = /*@__PURE__*/ createReactComponent('ic-data-table');
+export var IcPaginationBar = /*@__PURE__*/ createReactComponent('ic-pagination-bar');

package/dist/react-component-lib/createComponent.js

@@ -1,3 +1,29 @@
+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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        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 __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)
@@ -11,30 +37,32 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { createElement } from 'react';
 import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
-export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
+export var createReactComponent = function (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) {
     if (defineCustomElement !== undefined) {
         defineCustomElement();
     }
-    const displayName = dashToPascalCase(tagName);
-    const ReactComponent = class extends React.Component {
-        constructor(props) {
-            super(props);
-            this.setComponentElRef = (element) => {
-                this.componentEl = element;
+    var displayName = dashToPascalCase(tagName);
+    var ReactComponent = /** @class */ (function (_super) {
+        __extends(class_1, _super);
+        function class_1(props) {
+            var _this = _super.call(this, props) || this;
+            _this.setComponentElRef = function (element) {
+                _this.componentEl = element;
             };
+            return _this;
         }
-        componentDidMount() {
+        class_1.prototype.componentDidMount = function () {
             this.componentDidUpdate(this.props);
-        }
-        componentDidUpdate(prevProps) {
+        };
+        class_1.prototype.componentDidUpdate = function (prevProps) {
             attachProps(this.componentEl, this.props, prevProps);
-        }
-        render() {
-            const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
-            let propsToPass = Object.keys(cProps).reduce((acc, name) => {
-                const value = cProps[name];
+        };
+        class_1.prototype.render = function () {
+            var _a = this.props, children = _a.children, forwardedRef = _a.forwardedRef, style = _a.style, className = _a.className, ref = _a.ref, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
+            var propsToPass = Object.keys(cProps).reduce(function (acc, name) {
+                var value = cProps[name];
                 if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
-                    const eventName = name.substring(2).toLowerCase();
+                    var eventName = name.substring(2).toLowerCase();
                     if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
                         acc[name] = value;
                     }
@@ -42,7 +70,7 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
                 else {
                     // we should only render strings, booleans, and numbers as attrs in html.
                     // objects, functions, arrays etc get synced via properties on mount.
-                    const type = typeof value;
+                    var type = typeof value;
                     if (type === 'string' || type === 'boolean' || type === 'number') {
                         acc[camelToDashCase(name)] = value;
                     }
@@ -52,7 +80,7 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
             if (manipulatePropsFunction) {
                 propsToPass = manipulatePropsFunction(this.props, propsToPass);
             }
-            const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
+            var newProps = __assign(__assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style: style });
             /**
              * We use createElement here instead of
              * React.createElement to work around a
@@ -61,11 +89,16 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
              * as <tagname> instead of the actual Web Component.
              */
             return createElement(tagName, newProps, children);
-        }
-        static get displayName() {
-            return displayName;
-        }
-    };
+        };
+        Object.defineProperty(class_1, "displayName", {
+            get: function () {
+                return displayName;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return class_1;
+    }(React.Component));
     // If context was passed to createReactComponent then conditionally add it to the Component Class
     if (ReactComponentContext) {
         ReactComponent.contextType = ReactComponentContext;

package/dist/react-component-lib/createOverlayComponent.js

@@ -1,3 +1,29 @@
+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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -7,6 +33,33 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 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)
@@ -21,88 +74,117 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
-export const createOverlayComponent = (tagName, controller, customElement) => {
+export var createOverlayComponent = function (tagName, controller, customElement) {
     defineCustomElement(tagName, customElement);
-    const displayName = dashToPascalCase(tagName);
-    const didDismissEventName = `on${displayName}DidDismiss`;
-    const didPresentEventName = `on${displayName}DidPresent`;
-    const willDismissEventName = `on${displayName}WillDismiss`;
-    const willPresentEventName = `on${displayName}WillPresent`;
-    let isDismissing = false;
-    class Overlay extends React.Component {
-        constructor(props) {
-            super(props);
+    var displayName = dashToPascalCase(tagName);
+    var didDismissEventName = "on".concat(displayName, "DidDismiss");
+    var didPresentEventName = "on".concat(displayName, "DidPresent");
+    var willDismissEventName = "on".concat(displayName, "WillDismiss");
+    var willPresentEventName = "on".concat(displayName, "WillPresent");
+    var isDismissing = false;
+    var Overlay = /** @class */ (function (_super) {
+        __extends(Overlay, _super);
+        function Overlay(props) {
+            var _this = _super.call(this, props) || this;
             if (typeof document !== 'undefined') {
-                this.el = document.createElement('div');
+                _this.el = document.createElement('div');
             }
-            this.handleDismiss = this.handleDismiss.bind(this);
-        }
-        static get displayName() {
-            return displayName;
+            _this.handleDismiss = _this.handleDismiss.bind(_this);
+            return _this;
         }
-        componentDidMount() {
+        Object.defineProperty(Overlay, "displayName", {
+            get: function () {
+                return displayName;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Overlay.prototype.componentDidMount = function () {
             if (this.props.isOpen) {
                 this.present();
             }
-        }
-        componentWillUnmount() {
+        };
+        Overlay.prototype.componentWillUnmount = function () {
             if (this.overlay) {
                 this.overlay.dismiss();
             }
-        }
-        handleDismiss(event) {
+        };
+        Overlay.prototype.handleDismiss = function (event) {
             if (this.props.onDidDismiss) {
                 this.props.onDidDismiss(event);
             }
             setRef(this.props.forwardedRef, null);
-        }
-        shouldComponentUpdate(nextProps) {
+        };
+        Overlay.prototype.shouldComponentUpdate = function (nextProps) {
             // Check if the overlay component is about to dismiss
             if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
                 isDismissing = true;
             }
             return true;
-        }
-        componentDidUpdate(prevProps) {
-            return __awaiter(this, void 0, void 0, function* () {
-                if (this.overlay) {
-                    attachProps(this.overlay, this.props, prevProps);
-                }
-                if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
-                    this.present(prevProps);
-                }
-                if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
-                    yield this.overlay.dismiss();
-                    isDismissing = false;
-                    /**
-                     * Now that the overlay is dismissed
-                     * we need to render again so that any
-                     * inner components will be unmounted
-                     */
-                    this.forceUpdate();
-                }
+        };
+        Overlay.prototype.componentDidUpdate = function (prevProps) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (this.overlay) {
+                                attachProps(this.overlay, this.props, prevProps);
+                            }
+                            if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
+                                this.present(prevProps);
+                            }
+                            if (!(this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.overlay.dismiss()];
+                        case 1:
+                            _a.sent();
+                            isDismissing = false;
+                            /**
+                             * Now that the overlay is dismissed
+                             * we need to render again so that any
+                             * inner components will be unmounted
+                             */
+                            this.forceUpdate();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
             });
-        }
-        present(prevProps) {
-            return __awaiter(this, void 0, void 0, function* () {
-                const _a = this.props, { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent } = _a, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss", "onDidPresent", "onWillDismiss", "onWillPresent"]);
-                const elementProps = Object.assign(Object.assign({}, cProps), { ref: this.props.forwardedRef, [didDismissEventName]: this.handleDismiss, [didPresentEventName]: (e) => this.props.onDidPresent && this.props.onDidPresent(e), [willDismissEventName]: (e) => this.props.onWillDismiss && this.props.onWillDismiss(e), [willPresentEventName]: (e) => this.props.onWillPresent && this.props.onWillPresent(e) });
-                this.overlay = yield controller.create(Object.assign(Object.assign({}, elementProps), { component: this.el, componentProps: {} }));
-                setRef(this.props.forwardedRef, this.overlay);
-                attachProps(this.overlay, elementProps, prevProps);
-                yield this.overlay.present();
+        };
+        Overlay.prototype.present = function (prevProps) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a, children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, cProps, elementProps, _b;
+                var _c;
+                var _this = this;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            _a = this.props, children = _a.children, isOpen = _a.isOpen, onDidDismiss = _a.onDidDismiss, onDidPresent = _a.onDidPresent, onWillDismiss = _a.onWillDismiss, onWillPresent = _a.onWillPresent, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss", "onDidPresent", "onWillDismiss", "onWillPresent"]);
+                            elementProps = __assign(__assign({}, cProps), (_c = { ref: this.props.forwardedRef }, _c[didDismissEventName] = this.handleDismiss, _c[didPresentEventName] = function (e) { return _this.props.onDidPresent && _this.props.onDidPresent(e); }, _c[willDismissEventName] = function (e) { return _this.props.onWillDismiss && _this.props.onWillDismiss(e); }, _c[willPresentEventName] = function (e) { return _this.props.onWillPresent && _this.props.onWillPresent(e); }, _c));
+                            _b = this;
+                            return [4 /*yield*/, controller.create(__assign(__assign({}, elementProps), { component: this.el, componentProps: {} }))];
+                        case 1:
+                            _b.overlay = _d.sent();
+                            setRef(this.props.forwardedRef, this.overlay);
+                            attachProps(this.overlay, elementProps, prevProps);
+                            return [4 /*yield*/, this.overlay.present()];
+                        case 2:
+                            _d.sent();
+                            return [2 /*return*/];
+                    }
+                });
             });
-        }
-        render() {
+        };
+        Overlay.prototype.render = function () {
             /**
              * Continue to render the component even when
              * overlay is dismissing otherwise component
              * will be hidden before animation is done.
              */
             return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
-        }
-    }
-    return React.forwardRef((props, ref) => {
-        return React.createElement(Overlay, Object.assign({}, props, { forwardedRef: ref }));
+        };
+        return Overlay;
+    }(React.Component));
+    return React.forwardRef(function (props, ref) {
+        return React.createElement(Overlay, __assign({}, props, { forwardedRef: ref }));
     });
 };

package/dist/react-component-lib/utils/attachProps.js

@@ -1,13 +1,14 @@
 import { camelToDashCase } from './case';
-export const attachProps = (node, newProps, oldProps = {}) => {
+export var attachProps = function (node, newProps, oldProps) {
+    if (oldProps === void 0) { oldProps = {}; }
     // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
     if (node instanceof Element) {
         // add any classes in className to the class list
-        const className = getClassName(node.classList, newProps, oldProps);
+        var className = getClassName(node.classList, newProps, oldProps);
         if (className !== '') {
             node.className = className;
         }
-        Object.keys(newProps).forEach((name) => {
+        Object.keys(newProps).forEach(function (name) {
             if (name === 'children' ||
                 name === 'style' ||
                 name === 'ref' ||
@@ -17,15 +18,15 @@ export const attachProps = (node, newProps, oldProps = {}) => {
                 return;
             }
             if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
-                const eventName = name.substring(2);
-                const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
+                var eventName = name.substring(2);
+                var eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
                 if (!isCoveredByReact(eventNameLc)) {
                     syncEvent(node, eventNameLc, newProps[name]);
                 }
             }
             else {
                 node[name] = newProps[name];
-                const propType = typeof newProps[name];
+                var propType = typeof newProps[name];
                 if (propType === 'string') {
                     node.setAttribute(camelToDashCase(name), newProps[name]);
                 }
@@ -33,17 +34,17 @@ export const attachProps = (node, newProps, oldProps = {}) => {
         });
     }
 };
-export const getClassName = (classList, newProps, oldProps) => {
-    const newClassProp = newProps.className || newProps.class;
-    const oldClassProp = oldProps.className || oldProps.class;
+export var getClassName = function (classList, newProps, oldProps) {
+    var newClassProp = newProps.className || newProps.class;
+    var oldClassProp = oldProps.className || oldProps.class;
     // map the classes to Maps for performance
-    const currentClasses = arrayToMap(classList);
-    const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
-    const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
-    const finalClassNames = [];
+    var currentClasses = arrayToMap(classList);
+    var incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
+    var oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
+    var finalClassNames = [];
     // loop through each of the current classes on the component
     // to see if it should be a part of the classNames added
-    currentClasses.forEach((currentClass) => {
+    currentClasses.forEach(function (currentClass) {
         if (incomingPropClasses.has(currentClass)) {
             // add it as its already included in classnames coming in from newProps
             finalClassNames.push(currentClass);
@@ -54,13 +55,13 @@ export const getClassName = (classList, newProps, oldProps) => {
             finalClassNames.push(currentClass);
         }
     });
-    incomingPropClasses.forEach((s) => finalClassNames.push(s));
+    incomingPropClasses.forEach(function (s) { return finalClassNames.push(s); });
     return finalClassNames.join(' ');
 };
 /**
  * Transforms a React event name to a browser event name.
  */
-export const transformReactEventName = (eventNameSuffix) => {
+export var transformReactEventName = function (eventNameSuffix) {
     switch (eventNameSuffix) {
         case 'doubleclick':
             return 'dblclick';
@@ -71,24 +72,24 @@ export const transformReactEventName = (eventNameSuffix) => {
  * Checks if an event is supported in the current execution environment.
  * @license Modernizr 3.0.0pre (Custom Build) | MIT
  */
-export const isCoveredByReact = (eventNameSuffix) => {
+export var isCoveredByReact = function (eventNameSuffix) {
     if (typeof document === 'undefined') {
         return true;
     }
     else {
-        const eventName = 'on' + transformReactEventName(eventNameSuffix);
-        let isSupported = eventName in document;
+        var eventName = 'on' + transformReactEventName(eventNameSuffix);
+        var isSupported = eventName in document;
         if (!isSupported) {
-            const element = document.createElement('div');
+            var element = document.createElement('div');
             element.setAttribute(eventName, 'return;');
             isSupported = typeof element[eventName] === 'function';
         }
         return isSupported;
     }
 };
-export const syncEvent = (node, eventName, newEventHandler) => {
-    const eventStore = node.__events || (node.__events = {});
-    const oldEventHandler = eventStore[eventName];
+export var syncEvent = function (node, eventName, newEventHandler) {
+    var eventStore = node.__events || (node.__events = {});
+    var oldEventHandler = eventStore[eventName];
     // Remove old listener so they don't double up.
     if (oldEventHandler) {
         node.removeEventListener(eventName, oldEventHandler);
@@ -100,8 +101,8 @@ export const syncEvent = (node, eventName, newEventHandler) => {
         }
     }));
 };
-const arrayToMap = (arr) => {
-    const map = new Map();
-    arr.forEach((s) => map.set(s, s));
+var arrayToMap = function (arr) {
+    var map = new Map();
+    arr.forEach(function (s) { return map.set(s, s); });
     return map;
 };

package/dist/react-component-lib/utils/case.js

@@ -1,6 +1,8 @@
-export const dashToPascalCase = (str) => str
-    .toLowerCase()
-    .split('-')
-    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
-    .join('');
-export const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
+export var dashToPascalCase = function (str) {
+    return str
+        .toLowerCase()
+        .split('-')
+        .map(function (segment) { return segment.charAt(0).toUpperCase() + segment.slice(1); })
+        .join('');
+};
+export var camelToDashCase = function (str) { return str.replace(/([A-Z])/g, function (m) { return "-".concat(m[0].toLowerCase()); }); };

package/dist/react-component-lib/utils/dev.js

@@ -1,8 +1,8 @@
-export const isDevMode = () => {
+export var isDevMode = function () {
     return process && process.env && process.env.NODE_ENV === 'development';
 };
-const warnings = {};
-export const deprecationWarning = (key, message) => {
+var warnings = {};
+export var deprecationWarning = function (key, message) {
     if (isDevMode()) {
         if (!warnings[key]) {
             console.warn(message);

package/dist/react-component-lib/utils/index.js

@@ -1,5 +1,16 @@
+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);
+};
 import React from 'react';
-export const setRef = (ref, value) => {
+export var setRef = function (ref, value) {
     if (typeof ref === 'function') {
         ref(value);
     }
@@ -8,21 +19,25 @@ export const setRef = (ref, value) => {
         ref.current = value;
     }
 };
-export const mergeRefs = (...refs) => {
-    return (value) => {
-        refs.forEach((ref) => {
+export var mergeRefs = function () {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return function (value) {
+        refs.forEach(function (ref) {
             setRef(ref, value);
         });
     };
 };
-export const createForwardRef = (ReactComponent, displayName) => {
-    const forwardRef = (props, ref) => {
-        return React.createElement(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
+export var createForwardRef = function (ReactComponent, displayName) {
+    var forwardRef = function (props, ref) {
+        return React.createElement(ReactComponent, __assign({}, props, { forwardedRef: ref }));
     };
     forwardRef.displayName = displayName;
     return React.forwardRef(forwardRef);
 };
-export const defineCustomElement = (tagName, customElement) => {
+export var defineCustomElement = function (tagName, customElement) {
     if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
         customElements.define(tagName, customElement);
     }

package/package.json

@@ -3,16 +3,20 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.0.0-canary.4",
+  "version": "2.0.0-canary.6",
   "description": "React-wrapped web components compiled using StencilJS",
   "scripts": {
     "build": "npm run clean && npm run compile && npm run copy:core-css && npm run copy:normalize-css",
+    "cypress": "cypress run --component --headed",
+    "cypress:open": "cypress open",
+    "cypress:component": "cypress run --component --headless",
+    "cypress:ci": "npm run cypress:component",
     "clean": "rimraf dist",
     "compile": "npm run tsc",
     "tsc": "tsc -p .",
     "rollup": "rollup -c",
-    "storybook": "start-storybook -p 6009 --no-manager-cache",
-    "build-storybook": "rimraf ./storybook-static && build-storybook",
+    "storybook": "storybook dev -p 6009",
+    "build-storybook": "rimraf ./storybook-static && storybook build",
     "audit": "echo 'Audit for: @ukic/canary-react' && audit-ci -m --config ../../audit-ci.json",
     "copy:core-css": "echo 'Copy core.css from: @ukic/web-components' && mkdirp -p ./dist/core && ncp ../web-components/dist/core/core.css ./dist/core/core.css",
     "copy:normalize-css": "echo 'Copy normalize.css from: @ukic/web-components' && ncp ../web-components/dist/core/normalize.css ./dist/core/normalize.css"
@@ -24,27 +28,37 @@
     "dist/"
   ],
   "dependencies": {
-    "@ukic/canary-web-components": "^2.0.0-canary.4",
-    "@ukic/react": "^2.10.0"
+    "@ukic/canary-web-components": "^2.0.0-canary.6",
+    "@ukic/react": "^2.12.0",
+    "@ukic/web-components": "^2.12.0"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@cypress/react": "^8.0.0",
+    "@cypress/webpack-preprocessor": "^6.0.0",
     "@mdi/js": "^7.2.96",
     "@stencil/react-output-target": "^0.5.3",
-    "@storybook/addon-a11y": "^6.4.8",
-    "@storybook/addon-actions": "^6.4.8",
-    "@storybook/addon-docs": "^6.4.8",
-    "@storybook/addon-essentials": "^6.4.8",
-    "@storybook/addon-links": "^6.4.8",
+    "@storybook/addon-a11y": "^7.6.10",
+    "@storybook/addon-actions": "^7.6.10",
+    "@storybook/addon-docs": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/addon-mdx-gfm": "^7.6.10",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/manager-webpack5": "^6.5.14",
-    "@storybook/react": "^6.5.15",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-webpack5": "^7.6.10",
     "@types/jest": "27.0.3",
     "@types/node": "^16.11.11",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "babel-loader": "^8.2.3",
+    "cypress": "^13.3.1",
+    "cypress-axe": "^1.5.0",
+    "cypress-image-diff-js": "^1.32.0",
+    "eslint-plugin-cypress": "^2.15.1",
     "github-markdown-css": "^5.5.0",
     "jest": "^27.4.1",
     "jest-dom": "^4.0.0",
@@ -56,11 +70,14 @@
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.3.0",
     "remark-gfm": "^3.0.1",
+    "storybook": "^7.6.10",
+    "ts-loader": "^9.5.0",
     "typescript": "^4.5.2",
+    "url-loader": "^4.1.1",
     "webpack": "^5.76.0"
   },
   "peerDependencies": {
-    "@ukic/fonts": "^2.3.0",
+    "@ukic/fonts": "^2.6.0",
     "react": "^16.7.0 || ^17.0.2 || ^18.2.0",
     "react-dom": "^16.7.0 || ^17.0.2 || ^18.2.0"
   },
@@ -73,5 +90,5 @@
     ]
   },
   "license": "MIT",
-  "gitHead": "d5a95835136923d7ccf2990b32bd5972535aef7d"
+  "gitHead": "4f477b247c85fdd12a6b5e82a907aec27b8b4697"
 }