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

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

@@ -1,108 +1,108 @@
-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 __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 ReactDOM from 'react-dom';
-import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
-export const createOverlayComponent = (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);
-            if (typeof document !== 'undefined') {
-                this.el = document.createElement('div');
-            }
-            this.handleDismiss = this.handleDismiss.bind(this);
-        }
-        static get displayName() {
-            return displayName;
-        }
-        componentDidMount() {
-            if (this.props.isOpen) {
-                this.present();
-            }
-        }
-        componentWillUnmount() {
-            if (this.overlay) {
-                this.overlay.dismiss();
-            }
-        }
-        handleDismiss(event) {
-            if (this.props.onDidDismiss) {
-                this.props.onDidDismiss(event);
-            }
-            setRef(this.props.forwardedRef, null);
-        }
-        shouldComponentUpdate(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();
-                }
-            });
-        }
-        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();
-            });
-        }
-        render() {
-            /**
-             * 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 }));
-    });
-};
+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 __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 ReactDOM from 'react-dom';
+import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
+export const createOverlayComponent = (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);
+            if (typeof document !== 'undefined') {
+                this.el = document.createElement('div');
+            }
+            this.handleDismiss = this.handleDismiss.bind(this);
+        }
+        static get displayName() {
+            return displayName;
+        }
+        componentDidMount() {
+            if (this.props.isOpen) {
+                this.present();
+            }
+        }
+        componentWillUnmount() {
+            if (this.overlay) {
+                this.overlay.dismiss();
+            }
+        }
+        handleDismiss(event) {
+            if (this.props.onDidDismiss) {
+                this.props.onDidDismiss(event);
+            }
+            setRef(this.props.forwardedRef, null);
+        }
+        shouldComponentUpdate(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();
+                }
+            });
+        }
+        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();
+            });
+        }
+        render() {
+            /**
+             * 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 }));
+    });
+};

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

@@ -1,2 +1,2 @@
-export { createReactComponent } from './createComponent';
-export { createOverlayComponent } from './createOverlayComponent';
+export { createReactComponent } from './createComponent';
+export { createOverlayComponent } from './createOverlayComponent';

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

@@ -1,2 +1,2 @@
-export { createReactComponent } from './createComponent';
-export { createOverlayComponent } from './createOverlayComponent';
+export { createReactComponent } from './createComponent';
+export { createOverlayComponent } from './createOverlayComponent';

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

@@ -1,29 +1,29 @@
-export interface EventEmitter<T = any> {
-    emit: (data?: T) => CustomEvent<T>;
-}
-export interface StyleReactProps {
-    class?: string;
-    className?: string;
-    style?: {
-        [key: string]: any;
-    };
-}
-export interface OverlayEventDetail<T = any> {
-    data?: T;
-    role?: string;
-}
-export interface OverlayInterface {
-    el: HTMLElement;
-    animated: boolean;
-    keyboardClose: boolean;
-    overlayIndex: number;
-    presented: boolean;
-    enterAnimation?: any;
-    leaveAnimation?: any;
-    didPresent: EventEmitter<void>;
-    willPresent: EventEmitter<void>;
-    willDismiss: EventEmitter<OverlayEventDetail>;
-    didDismiss: EventEmitter<OverlayEventDetail>;
-    present(): Promise<void>;
-    dismiss(data?: any, role?: string): Promise<boolean>;
-}
+export interface EventEmitter<T = any> {
+    emit: (data?: T) => CustomEvent<T>;
+}
+export interface StyleReactProps {
+    class?: string;
+    className?: string;
+    style?: {
+        [key: string]: any;
+    };
+}
+export interface OverlayEventDetail<T = any> {
+    data?: T;
+    role?: string;
+}
+export interface OverlayInterface {
+    el: HTMLElement;
+    animated: boolean;
+    keyboardClose: boolean;
+    overlayIndex: number;
+    presented: boolean;
+    enterAnimation?: any;
+    leaveAnimation?: any;
+    didPresent: EventEmitter<void>;
+    willPresent: EventEmitter<void>;
+    willDismiss: EventEmitter<OverlayEventDetail>;
+    didDismiss: EventEmitter<OverlayEventDetail>;
+    present(): Promise<void>;
+    dismiss(data?: any, role?: string): Promise<boolean>;
+}

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

@@ -1 +1 @@
-export {};
+export {};

package/dist/react-component-lib/utils/attachProps.d.ts

@@ -1,16 +1,16 @@
-export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
-export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
-/**
- * Transforms a React event name to a browser event name.
- */
-export declare const transformReactEventName: (eventNameSuffix: string) => string;
-/**
- * Checks if an event is supported in the current execution environment.
- * @license Modernizr 3.0.0pre (Custom Build) | MIT
- */
-export declare const isCoveredByReact: (eventNameSuffix: string) => boolean;
-export declare const syncEvent: (node: Element & {
-    __events?: {
-        [key: string]: (e: Event) => any;
-    };
-}, eventName: string, newEventHandler?: (e: Event) => any) => void;
+export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
+export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export declare const transformReactEventName: (eventNameSuffix: string) => string;
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+export declare const isCoveredByReact: (eventNameSuffix: string) => boolean;
+export declare const syncEvent: (node: Element & {
+    __events?: {
+        [key: string]: (e: Event) => any;
+    };
+}, eventName: string, newEventHandler?: (e: Event) => any) => void;

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

@@ -1,107 +1,107 @@
-import { camelToDashCase } from './case';
-export const attachProps = (node, newProps, 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);
-        if (className !== '') {
-            node.className = className;
-        }
-        Object.keys(newProps).forEach((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()) {
-                const eventName = name.substring(2);
-                const 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];
-                if (propType === 'string') {
-                    node.setAttribute(camelToDashCase(name), newProps[name]);
-                }
-            }
-        });
-    }
-};
-export const getClassName = (classList, newProps, oldProps) => {
-    const newClassProp = newProps.className || newProps.class;
-    const 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 = [];
-    // 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) => {
-        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((s) => finalClassNames.push(s));
-    return finalClassNames.join(' ');
-};
-/**
- * Transforms a React event name to a browser event name.
- */
-export const transformReactEventName = (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 const isCoveredByReact = (eventNameSuffix) => {
-    if (typeof document === 'undefined') {
-        return true;
-    }
-    else {
-        const eventName = 'on' + transformReactEventName(eventNameSuffix);
-        let isSupported = eventName in document;
-        if (!isSupported) {
-            const 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];
-    // 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);
-        }
-    }));
-};
-const arrayToMap = (arr) => {
-    const map = new Map();
-    arr.forEach((s) => map.set(s, s));
-    return map;
-};
+import { camelToDashCase } from './case';
+export const attachProps = (node, newProps, 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);
+        if (className !== '') {
+            node.className = className;
+        }
+        Object.keys(newProps).forEach((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()) {
+                const eventName = name.substring(2);
+                const 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];
+                if (propType === 'string') {
+                    node.setAttribute(camelToDashCase(name), newProps[name]);
+                }
+            }
+        });
+    }
+};
+export const getClassName = (classList, newProps, oldProps) => {
+    const newClassProp = newProps.className || newProps.class;
+    const 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 = [];
+    // 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) => {
+        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((s) => finalClassNames.push(s));
+    return finalClassNames.join(' ');
+};
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export const transformReactEventName = (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 const isCoveredByReact = (eventNameSuffix) => {
+    if (typeof document === 'undefined') {
+        return true;
+    }
+    else {
+        const eventName = 'on' + transformReactEventName(eventNameSuffix);
+        let isSupported = eventName in document;
+        if (!isSupported) {
+            const 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];
+    // 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);
+        }
+    }));
+};
+const arrayToMap = (arr) => {
+    const map = new Map();
+    arr.forEach((s) => map.set(s, s));
+    return map;
+};

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

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

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

@@ -1,6 +1,6 @@
-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 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()}`);

package/dist/react-component-lib/utils/dev.d.ts

@@ -1,2 +1,2 @@
-export declare const isDevMode: () => boolean;
-export declare const deprecationWarning: (key: string, message: string) => void;
+export declare const isDevMode: () => boolean;
+export declare const deprecationWarning: (key: string, message: string) => void;

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

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

package/dist/react-component-lib/utils/index.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import type { StyleReactProps } from '../interfaces';
-export type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
-export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
-export declare const setRef: (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => void;
-export declare const mergeRefs: (...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]) => React.RefCallback<any>;
-export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & StyleReactProps> & React.RefAttributes<ElementType>>;
-export declare const defineCustomElement: (tagName: string, customElement: any) => void;
-export * from './attachProps';
-export * from './case';
+import React from 'react';
+import type { StyleReactProps } from '../interfaces';
+export type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
+export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
+export declare const setRef: (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => void;
+export declare const mergeRefs: (...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]) => React.RefCallback<any>;
+export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & StyleReactProps> & React.RefAttributes<ElementType>>;
+export declare const defineCustomElement: (tagName: string, customElement: any) => void;
+export * from './attachProps';
+export * from './case';