@watermarkinsights/ripple-react 5.13.1-alpha.4 → 5.14.0-alpha.2

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

@@ -0,0 +1,109 @@
+import { camelToDashCase } from './case';
+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
+        var className = getClassName(node.classList, newProps, oldProps);
+        if (className !== '') {
+            node.className = className;
+        }
+        Object.keys(newProps).forEach(function (name) {
+            if (name === 'children' ||
+                name === 'style' ||
+                name === 'ref' ||
+                name === 'class' ||
+                name === 'className' ||
+                name === 'forwardedRef') {
+                return;
+            }
+            if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+                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];
+                var propType = typeof newProps[name];
+                if (propType === 'string') {
+                    node.setAttribute(camelToDashCase(name), newProps[name]);
+                }
+            }
+        });
+    }
+};
+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
+    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(function (currentClass) {
+        if (incomingPropClasses.has(currentClass)) {
+            // add it as its already included in classnames coming in from newProps
+            finalClassNames.push(currentClass);
+            incomingPropClasses.delete(currentClass);
+        }
+        else if (!oldPropClasses.has(currentClass)) {
+            // add it as it has NOT been removed by user
+            finalClassNames.push(currentClass);
+        }
+    });
+    incomingPropClasses.forEach(function (s) { return finalClassNames.push(s); });
+    return finalClassNames.join(' ');
+};
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export var transformReactEventName = function (eventNameSuffix) {
+    switch (eventNameSuffix) {
+        case 'doubleclick':
+            return 'dblclick';
+    }
+    return eventNameSuffix;
+};
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+export var isCoveredByReact = function (eventNameSuffix) {
+    if (typeof document === 'undefined') {
+        return true;
+    }
+    else {
+        var eventName = 'on' + transformReactEventName(eventNameSuffix);
+        var isSupported = eventName in document;
+        if (!isSupported) {
+            var element = document.createElement('div');
+            element.setAttribute(eventName, 'return;');
+            isSupported = typeof element[eventName] === 'function';
+        }
+        return isSupported;
+    }
+};
+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);
+    }
+    // Bind new listener.
+    node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
+        if (newEventHandler) {
+            newEventHandler.call(this, e);
+        }
+    }));
+};
+var arrayToMap = function (arr) {
+    var map = new Map();
+    arr.forEach(function (s) { return map.set(s, s); });
+    return map;
+};
+//# sourceMappingURL=attachProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"attachProps.js","sourceRoot":"","sources":["../../src/react-component-lib/attachProps.ts"],"names":[],"mappings":"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"}

package/dist/react-component-lib/case.d.ts

@@ -0,0 +1,2 @@
+export declare const dashToPascalCase: (str: string) => string;
+export declare const camelToDashCase: (str: string) => string;

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

@@ -0,0 +1,9 @@
+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()); }); };
+//# sourceMappingURL=case.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"case.js","sourceRoot":"","sources":["../../src/react-component-lib/case.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,GAAW;IAC1C,OAAA,GAAG;SACA,WAAW,EAAE;SACb,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,UAAC,OAAO,IAAK,OAAA,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAlD,CAAkD,CAAC;SACpE,IAAI,CAAC,EAAE,CAAC;AAJX,CAIW,CAAC;AACd,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,GAAW,IAAK,OAAA,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,UAAC,CAAS,IAAK,OAAA,WAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAE,EAAxB,CAAwB,CAAC,EAAhE,CAAgE,CAAC"}

package/dist/react-component-lib/createComponent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface HTMLStencilElement extends HTMLElement {
+    componentOnReady(): Promise<this>;
+}
+interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
+    forwardedRef: React.RefObject<ElementType>;
+    ref?: React.Ref<any>;
+}
+export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes, defineCustomElement?: () => void) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & import("./interfaces").StyleReactProps> & React.RefAttributes<ElementType>>;
+export {};

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

@@ -0,0 +1,108 @@
+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)
+        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;
+};
+import React, { createElement } from 'react';
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+export var createReactComponent = function (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) {
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
+    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;
+        }
+        class_1.prototype.componentDidMount = function () {
+            this.componentDidUpdate(this.props);
+        };
+        class_1.prototype.componentDidUpdate = function (prevProps) {
+            attachProps(this.componentEl, this.props, prevProps);
+        };
+        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()) {
+                    var eventName = name.substring(2).toLowerCase();
+                    if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
+                        acc[name] = value;
+                    }
+                }
+                else {
+                    // we should only render strings, booleans, and numbers as attrs in html.
+                    // objects, functions, arrays etc get synced via properties on mount.
+                    var type = typeof value;
+                    if (type === 'string' || type === 'boolean' || type === 'number') {
+                        acc[camelToDashCase(name)] = value;
+                    }
+                }
+                return acc;
+            }, {});
+            if (manipulatePropsFunction) {
+                propsToPass = manipulatePropsFunction(this.props, propsToPass);
+            }
+            var newProps = __assign(__assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style: style });
+            /**
+             * We use createElement here instead of
+             * React.createElement to work around a
+             * bug in Vite (https://github.com/vitejs/vite/issues/6104).
+             * React.createElement causes all elements to be rendered
+             * as <tagname> instead of the actual Web Component.
+             */
+            return createElement(tagName, newProps, children);
+        };
+        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;
+    }
+    return createForwardRef(ReactComponent, displayName);
+};
+//# sourceMappingURL=createComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createComponent.js","sourceRoot":"","sources":["../../src/react-component-lib/createComponent.tsx"],"names":[],"mappings":"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"}

package/dist/react-component-lib/createControllerComponent.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+interface LoadingElement {
+    present: () => any;
+    dismiss: () => any;
+}
+interface ReactControllerProps<E> {
+    isOpen: boolean;
+    onDidDismiss: (event: CustomEvent<E>) => void;
+}
+export declare function createControllerComponent<OptionsType extends object, LoadingElementType extends LoadingElement, OverlayEventDetail>(displayName: string, controller: {
+    create: (options: any) => Promise<LoadingElementType>;
+}): {
+    new (props: OptionsType & ReactControllerProps<OverlayEventDetail>): {
+        controller?: LoadingElementType;
+        componentDidMount(): Promise<void>;
+        componentDidUpdate(prevProps: OptionsType & ReactControllerProps<OverlayEventDetail>): Promise<void>;
+        present(prevProps?: OptionsType & ReactControllerProps<OverlayEventDetail>): Promise<void>;
+        render(): null;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<OptionsType & ReactControllerProps<OverlayEventDetail>>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
+        forceUpdate(callback?: () => void): void;
+        readonly props: Readonly<OptionsType & ReactControllerProps<OverlayEventDetail>> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<OptionsType & ReactControllerProps<OverlayEventDetail>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<OptionsType & ReactControllerProps<OverlayEventDetail>>, prevState: Readonly<{}>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<OptionsType & ReactControllerProps<OverlayEventDetail>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<OptionsType & ReactControllerProps<OverlayEventDetail>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<OptionsType & ReactControllerProps<OverlayEventDetail>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<OptionsType & ReactControllerProps<OverlayEventDetail>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    readonly displayName: string;
+    contextType?: React.Context<any>;
+};
+export {};

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

@@ -0,0 +1,148 @@
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        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)
+        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;
+};
+import React from 'react';
+import { attachEventProps } from './utils/attachEventProps';
+export function createControllerComponent(displayName, controller) {
+    var dismissEventName = "on".concat(displayName, "DidDismiss");
+    return /** @class */ (function (_super) {
+        __extends(ReactControllerComponent, _super);
+        function ReactControllerComponent(props) {
+            return _super.call(this, props) || this;
+        }
+        Object.defineProperty(ReactControllerComponent, "displayName", {
+            get: function () {
+                return displayName;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ReactControllerComponent.prototype.componentDidMount = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var isOpen;
+                return __generator(this, function (_a) {
+                    isOpen = this.props.isOpen;
+                    if (isOpen) {
+                        this.present();
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        };
+        ReactControllerComponent.prototype.componentDidUpdate = function (prevProps) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
+                                this.present(prevProps);
+                            }
+                            if (!(this.controller &&
+                                prevProps.isOpen !== this.props.isOpen &&
+                                this.props.isOpen === false)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.controller.dismiss()];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ReactControllerComponent.prototype.present = function (prevProps) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a, isOpen, onDidDismiss, cProps, elementProps, _b;
+                var _c;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            _a = this.props, isOpen = _a.isOpen, onDidDismiss = _a.onDidDismiss, cProps = __rest(_a, ["isOpen", "onDidDismiss"]);
+                            elementProps = __assign(__assign({}, cProps), (_c = {}, _c[dismissEventName] = onDidDismiss, _c));
+                            _b = this;
+                            return [4 /*yield*/, controller.create(__assign({}, elementProps))];
+                        case 1:
+                            _b.controller = _d.sent();
+                            attachEventProps(this.controller, elementProps, prevProps);
+                            this.controller.present();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ReactControllerComponent.prototype.render = function () {
+            return null;
+        };
+        return ReactControllerComponent;
+    }(React.Component));
+}
+//# sourceMappingURL=createControllerComponent.js.map

package/dist/react-component-lib/createControllerComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createControllerComponent.js","sourceRoot":"","sources":["../../src/react-component-lib/createControllerComponent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAY5D,MAAM,UAAU,yBAAyB,CAIvC,WAAmB,EAAE,UAAqE;IAC1F,IAAM,gBAAgB,GAAG,YAAK,WAAW,eAAY,CAAC;IAItD;QAA8C,4CAAsB;QAGlE,kCAAY,KAAY;mBACtB,kBAAM,KAAK,CAAC;QACd,CAAC;QAED,sBAAW,uCAAW;iBAAtB;gBACE,OAAO,WAAW,CAAC;YACrB,CAAC;;;WAAA;QAEK,oDAAiB,GAAvB;;;;oBACU,MAAM,GAAK,IAAI,CAAC,KAAK,OAAf,CAAgB;oBAC9B,IAAI,MAAM,EAAE;wBACV,IAAI,CAAC,OAAO,EAAE,CAAC;qBAChB;;;;SACF;QAEK,qDAAkB,GAAxB,UAAyB,SAAgB;;;;;4BACvC,IAAI,SAAS,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,EAAE;gCACxE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;6BACzB;iCAEC,CAAA,IAAI,CAAC,UAAU;gCACf,SAAS,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM;gCACtC,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,KAAK,CAAA,EAF3B,wBAE2B;4BAE3B,qBAAM,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,EAAA;;4BAA/B,SAA+B,CAAC;;;;;;SAEnC;QAEK,0CAAO,GAAb,UAAc,SAAiB;;;;;;;4BACvB,KAAsC,IAAI,CAAC,KAAK,EAA9C,MAAM,YAAA,EAAE,YAAY,kBAAA,EAAK,MAAM,cAAjC,0BAAmC,CAAF,CAAgB;4BACjD,YAAY,yBACb,MAAM,gBACR,gBAAgB,IAAG,YAAY,MACjC,CAAC;4BACF,KAAA,IAAI,CAAA;4BAAc,qBAAM,UAAU,CAAC,MAAM,cACpC,YAAY,EACf,EAAA;;4BAFF,GAAK,UAAU,GAAG,SAEhB,CAAC;4BACH,gBAAgB,CAAC,IAAI,CAAC,UAAiB,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;4BAClE,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;;;;;SAC3B;QAED,yCAAM,GAAN;YACE,OAAO,IAAI,CAAC;QACd,CAAC;QACH,+BAAC;IAAD,CAAC,AA/CM,CAAuC,KAAK,CAAC,SAAS,GA+C3D;AACJ,CAAC"}

package/dist/react-component-lib/createOverlayComponent.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { OverlayEventDetail } from './interfaces';
+import { StencilReactForwardedRef } from './utils';
+interface OverlayElement extends HTMLElement {
+    present: () => Promise<void>;
+    dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
+}
+export interface ReactOverlayProps {
+    children?: React.ReactNode;
+    isOpen: boolean;
+    onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+}
+export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
+    create: (options: any) => Promise<OverlayType>;
+}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
+    forwardedRef?: StencilReactForwardedRef<OverlayType>;
+}> & React.RefAttributes<OverlayType>>;
+export {};