@beeq/react 1.0.0

package/README.md

@@ -0,0 +1,68 @@
+# React Wrapper for BEEQ
+
+A lightweight utility that wraps BEEQ custom elements ("web components") so they can be used like native React components.
+
+## Package installation
+
+- install the package
+
+```
+npm install @bee-q/react
+```
+
+- update the package
+
+```
+npm install @bee-q/react@latest
+```
+
+if `@bee-q/core` package is installed you should update both
+
+```
+npm install @bee-q/{core,react}
+```
+
+### Add BEEQ styles and assets
+
+Make sure that BEEQ main style is imported into your application's main style file:
+
+```css
+@import "@bee-q/core/dist/bee-q/bee-q";
+```
+
+> ❗️The icons SVG are shipped in a separate folder. Depending on your React stack, your project will need to include `node_modules/@bee-q/core/dist/bee-q/svg` in the build in such a way that it respond to: `http://<domain>/svg`
+
+## Usage
+
+```jsx
+import React from 'react';
+import { BqButton } from '@bee-q/react';
+
+function App() {
+  const handleButtonClick = (ev: CustomEvent) => {
+    console.log(ev.detail);
+  };
+
+  return (
+    <BqButton appearance="primary" onBqClick={handleButtonClick}>
+      Click Me
+    </BqButton>
+  );
+}
+
+export default App;
+```
+
+## Why is this necessary?
+
+React and custom elements don't play nicely together. The problem is best described by [Custom Elements Everywhere](https://custom-elements-everywhere.com/#react):
+
+> **Handling data**
+>
+> React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like some-attr="[object Object]" which can't actually be used.
+>
+> **Handling events**
+>
+> Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome.
+
+This utility solves these problems by exposing a native React component that maps properties and events to the underlying custom element. ✨

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@beeq/react",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "description": "React specific wrapper for BEEQ Design System components",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "dependencies": {
+    "@beeq/core": "*"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "tslib": "^2.6.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Endava/BEEQ"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "type": "module"
+}

package/src/components.d.ts

@@ -0,0 +1,39 @@
+import type { JSX } from '@beeq/core';
+export declare const BqAccordion: import("react").ForwardRefExoticComponent<JSX.BqAccordion & Omit<import("react").HTMLAttributes<HTMLBqAccordionElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqAccordionElement>>;
+export declare const BqAccordionGroup: import("react").ForwardRefExoticComponent<JSX.BqAccordionGroup & Omit<import("react").HTMLAttributes<HTMLBqAccordionGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqAccordionGroupElement>>;
+export declare const BqAlert: import("react").ForwardRefExoticComponent<JSX.BqAlert & Omit<import("react").HTMLAttributes<HTMLBqAlertElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqAlertElement>>;
+export declare const BqAvatar: import("react").ForwardRefExoticComponent<JSX.BqAvatar & Omit<import("react").HTMLAttributes<HTMLBqAvatarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqAvatarElement>>;
+export declare const BqBadge: import("react").ForwardRefExoticComponent<JSX.BqBadge & Omit<import("react").HTMLAttributes<HTMLBqBadgeElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqBadgeElement>>;
+export declare const BqBreadcrumb: import("react").ForwardRefExoticComponent<JSX.BqBreadcrumb & Omit<import("react").HTMLAttributes<HTMLBqBreadcrumbElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqBreadcrumbElement>>;
+export declare const BqBreadcrumbItem: import("react").ForwardRefExoticComponent<JSX.BqBreadcrumbItem & Omit<import("react").HTMLAttributes<HTMLBqBreadcrumbItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqBreadcrumbItemElement>>;
+export declare const BqButton: import("react").ForwardRefExoticComponent<JSX.BqButton & Omit<import("react").HTMLAttributes<HTMLBqButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqButtonElement>>;
+export declare const BqCard: import("react").ForwardRefExoticComponent<JSX.BqCard & Omit<import("react").HTMLAttributes<HTMLBqCardElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqCardElement>>;
+export declare const BqCheckbox: import("react").ForwardRefExoticComponent<JSX.BqCheckbox & Omit<import("react").HTMLAttributes<HTMLBqCheckboxElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqCheckboxElement>>;
+export declare const BqDialog: import("react").ForwardRefExoticComponent<JSX.BqDialog & Omit<import("react").HTMLAttributes<HTMLBqDialogElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqDialogElement>>;
+export declare const BqDivider: import("react").ForwardRefExoticComponent<JSX.BqDivider & Omit<import("react").HTMLAttributes<HTMLBqDividerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqDividerElement>>;
+export declare const BqDropdown: import("react").ForwardRefExoticComponent<JSX.BqDropdown & Omit<import("react").HTMLAttributes<HTMLBqDropdownElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqDropdownElement>>;
+export declare const BqEmptyState: import("react").ForwardRefExoticComponent<JSX.BqEmptyState & Omit<import("react").HTMLAttributes<HTMLBqEmptyStateElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqEmptyStateElement>>;
+export declare const BqIcon: import("react").ForwardRefExoticComponent<JSX.BqIcon & Omit<import("react").HTMLAttributes<HTMLBqIconElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqIconElement>>;
+export declare const BqInput: import("react").ForwardRefExoticComponent<JSX.BqInput & Omit<import("react").HTMLAttributes<HTMLBqInputElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqInputElement>>;
+export declare const BqNotification: import("react").ForwardRefExoticComponent<JSX.BqNotification & Omit<import("react").HTMLAttributes<HTMLBqNotificationElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqNotificationElement>>;
+export declare const BqOption: import("react").ForwardRefExoticComponent<JSX.BqOption & Omit<import("react").HTMLAttributes<HTMLBqOptionElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqOptionElement>>;
+export declare const BqOptionGroup: import("react").ForwardRefExoticComponent<JSX.BqOptionGroup & Omit<import("react").HTMLAttributes<HTMLBqOptionGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqOptionGroupElement>>;
+export declare const BqOptionList: import("react").ForwardRefExoticComponent<JSX.BqOptionList & Omit<import("react").HTMLAttributes<HTMLBqOptionListElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqOptionListElement>>;
+export declare const BqPanel: import("react").ForwardRefExoticComponent<JSX.BqPanel & Omit<import("react").HTMLAttributes<HTMLBqPanelElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqPanelElement>>;
+export declare const BqRadio: import("react").ForwardRefExoticComponent<JSX.BqRadio & Omit<import("react").HTMLAttributes<HTMLBqRadioElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqRadioElement>>;
+export declare const BqRadioGroup: import("react").ForwardRefExoticComponent<JSX.BqRadioGroup & Omit<import("react").HTMLAttributes<HTMLBqRadioGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqRadioGroupElement>>;
+export declare const BqSelect: import("react").ForwardRefExoticComponent<JSX.BqSelect & Omit<import("react").HTMLAttributes<HTMLBqSelectElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqSelectElement>>;
+export declare const BqSideMenu: import("react").ForwardRefExoticComponent<JSX.BqSideMenu & Omit<import("react").HTMLAttributes<HTMLBqSideMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqSideMenuElement>>;
+export declare const BqSideMenuItem: import("react").ForwardRefExoticComponent<JSX.BqSideMenuItem & Omit<import("react").HTMLAttributes<HTMLBqSideMenuItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqSideMenuItemElement>>;
+export declare const BqSlider: import("react").ForwardRefExoticComponent<JSX.BqSlider & Omit<import("react").HTMLAttributes<HTMLBqSliderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqSliderElement>>;
+export declare const BqSpinner: import("react").ForwardRefExoticComponent<JSX.BqSpinner & Omit<import("react").HTMLAttributes<HTMLBqSpinnerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqSpinnerElement>>;
+export declare const BqStatus: import("react").ForwardRefExoticComponent<JSX.BqStatus & Omit<import("react").HTMLAttributes<HTMLBqStatusElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqStatusElement>>;
+export declare const BqStepItem: import("react").ForwardRefExoticComponent<JSX.BqStepItem & Omit<import("react").HTMLAttributes<HTMLBqStepItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqStepItemElement>>;
+export declare const BqSteps: import("react").ForwardRefExoticComponent<JSX.BqSteps & Omit<import("react").HTMLAttributes<HTMLBqStepsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqStepsElement>>;
+export declare const BqSwitch: import("react").ForwardRefExoticComponent<JSX.BqSwitch & Omit<import("react").HTMLAttributes<HTMLBqSwitchElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqSwitchElement>>;
+export declare const BqTab: import("react").ForwardRefExoticComponent<JSX.BqTab & Omit<import("react").HTMLAttributes<HTMLBqTabElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqTabElement>>;
+export declare const BqTabGroup: import("react").ForwardRefExoticComponent<JSX.BqTabGroup & Omit<import("react").HTMLAttributes<HTMLBqTabGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqTabGroupElement>>;
+export declare const BqTag: import("react").ForwardRefExoticComponent<JSX.BqTag & Omit<import("react").HTMLAttributes<HTMLBqTagElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqTagElement>>;
+export declare const BqTextarea: import("react").ForwardRefExoticComponent<JSX.BqTextarea & Omit<import("react").HTMLAttributes<HTMLBqTextareaElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqTextareaElement>>;
+export declare const BqToast: import("react").ForwardRefExoticComponent<JSX.BqToast & Omit<import("react").HTMLAttributes<HTMLBqToastElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqToastElement>>;
+export declare const BqTooltip: import("react").ForwardRefExoticComponent<JSX.BqTooltip & Omit<import("react").HTMLAttributes<HTMLBqTooltipElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqTooltipElement>>;

package/src/components.js

@@ -0,0 +1,45 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+import { defineCustomElements } from '@beeq/core/dist/loader';
+defineCustomElements();
+export const BqAccordion = /*@__PURE__*/ createReactComponent('bq-accordion');
+export const BqAccordionGroup = /*@__PURE__*/ createReactComponent('bq-accordion-group');
+export const BqAlert = /*@__PURE__*/ createReactComponent('bq-alert');
+export const BqAvatar = /*@__PURE__*/ createReactComponent('bq-avatar');
+export const BqBadge = /*@__PURE__*/ createReactComponent('bq-badge');
+export const BqBreadcrumb = /*@__PURE__*/ createReactComponent('bq-breadcrumb');
+export const BqBreadcrumbItem = /*@__PURE__*/ createReactComponent('bq-breadcrumb-item');
+export const BqButton = /*@__PURE__*/ createReactComponent('bq-button');
+export const BqCard = /*@__PURE__*/ createReactComponent('bq-card');
+export const BqCheckbox = /*@__PURE__*/ createReactComponent('bq-checkbox');
+export const BqDialog = /*@__PURE__*/ createReactComponent('bq-dialog');
+export const BqDivider = /*@__PURE__*/ createReactComponent('bq-divider');
+export const BqDropdown = /*@__PURE__*/ createReactComponent('bq-dropdown');
+export const BqEmptyState = /*@__PURE__*/ createReactComponent('bq-empty-state');
+export const BqIcon = /*@__PURE__*/ createReactComponent('bq-icon');
+export const BqInput = /*@__PURE__*/ createReactComponent('bq-input');
+export const BqNotification = /*@__PURE__*/ createReactComponent('bq-notification');
+export const BqOption = /*@__PURE__*/ createReactComponent('bq-option');
+export const BqOptionGroup = /*@__PURE__*/ createReactComponent('bq-option-group');
+export const BqOptionList = /*@__PURE__*/ createReactComponent('bq-option-list');
+export const BqPanel = /*@__PURE__*/ createReactComponent('bq-panel');
+export const BqRadio = /*@__PURE__*/ createReactComponent('bq-radio');
+export const BqRadioGroup = /*@__PURE__*/ createReactComponent('bq-radio-group');
+export const BqSelect = /*@__PURE__*/ createReactComponent('bq-select');
+export const BqSideMenu = /*@__PURE__*/ createReactComponent('bq-side-menu');
+export const BqSideMenuItem = /*@__PURE__*/ createReactComponent('bq-side-menu-item');
+export const BqSlider = /*@__PURE__*/ createReactComponent('bq-slider');
+export const BqSpinner = /*@__PURE__*/ createReactComponent('bq-spinner');
+export const BqStatus = /*@__PURE__*/ createReactComponent('bq-status');
+export const BqStepItem = /*@__PURE__*/ createReactComponent('bq-step-item');
+export const BqSteps = /*@__PURE__*/ createReactComponent('bq-steps');
+export const BqSwitch = /*@__PURE__*/ createReactComponent('bq-switch');
+export const BqTab = /*@__PURE__*/ createReactComponent('bq-tab');
+export const BqTabGroup = /*@__PURE__*/ createReactComponent('bq-tab-group');
+export const BqTag = /*@__PURE__*/ createReactComponent('bq-tag');
+export const BqTextarea = /*@__PURE__*/ createReactComponent('bq-textarea');
+export const BqToast = /*@__PURE__*/ createReactComponent('bq-toast');
+export const BqTooltip = /*@__PURE__*/ createReactComponent('bq-tooltip');
+//# sourceMappingURL=components.js.map

package/src/components.js.map

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

package/src/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/index.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+export * from './components';
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../packages/beeq-react/src/index.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,cAAc;AACd,cAAc,cAAc,CAAC"}

package/src/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<import("./utils").StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
+export {};

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

@@ -0,0 +1,68 @@
+import React, { createElement } from 'react';
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+export const createReactComponent = (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;
+            };
+        }
+        componentDidMount() {
+            this.componentDidUpdate(this.props);
+        }
+        componentDidUpdate(prevProps) {
+            attachProps(this.componentEl, this.props, prevProps);
+        }
+        render() {
+            const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+            let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+                const value = cProps[name];
+                if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+                    const 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.
+                    const type = typeof value;
+                    if (type === 'string' || type === 'boolean' || type === 'number') {
+                        acc[camelToDashCase(name)] = value;
+                    }
+                }
+                return acc;
+            }, {});
+            if (manipulatePropsFunction) {
+                propsToPass = manipulatePropsFunction(this.props, propsToPass);
+            }
+            const newProps = {
+                ...propsToPass,
+                ref: mergeRefs(forwardedRef, this.setComponentElRef),
+                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);
+        }
+        static get displayName() {
+            return displayName;
+        }
+    };
+    // 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/src/react-component-lib/createComponent.js.map

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

package/src/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 {};

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

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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;
+        }
+        async componentDidUpdate(prevProps) {
+            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) {
+                await 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();
+            }
+        }
+        async present(prevProps) {
+            const { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;
+            const elementProps = {
+                ...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 = await controller.create({
+                ...elementProps,
+                component: this.el,
+                componentProps: {},
+            });
+            setRef(this.props.forwardedRef, this.overlay);
+            attachProps(this.overlay, elementProps, prevProps);
+            await 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 _jsx(Overlay, { ...props, forwardedRef: ref });
+    });
+};
+//# sourceMappingURL=createOverlayComponent.js.map

package/src/react-component-lib/createOverlayComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createOverlayComponent.js","sourceRoot":"","sources":["../../../../packages/beeq-react/src/react-component-lib/createOverlayComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,WAAW,CAAC;AAGjC,OAAO,EAA4B,WAAW,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAgB/G,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,OAAe,EACf,UAA8D,EAC9D,aAAmB,EACnB,EAAE;IACF,mBAAmB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IAE5C,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC9C,MAAM,mBAAmB,GAAG,KAAK,WAAW,YAAY,CAAC;IACzD,MAAM,mBAAmB,GAAG,KAAK,WAAW,YAAY,CAAC;IACzD,MAAM,oBAAoB,GAAG,KAAK,WAAW,aAAa,CAAC;IAC3D,MAAM,oBAAoB,GAAG,KAAK,WAAW,aAAa,CAAC;IAO3D,IAAI,YAAY,GAAG,KAAK,CAAC;IAEzB,MAAM,OAAQ,SAAQ,KAAK,CAAC,SAAgB;QAI1C,YAAY,KAAY;YACtB,KAAK,CAAC,KAAK,CAAC,CAAC;YACb,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;gBACnC,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;aACzC;YACD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrD,CAAC;QAED,MAAM,KAAK,WAAW;YACpB,OAAO,WAAW,CAAC;QACrB,CAAC;QAED,iBAAiB;YACf,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;gBACrB,IAAI,CAAC,OAAO,EAAE,CAAC;aAChB;QACH,CAAC;QAED,oBAAoB;YAClB,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;aACxB;QACH,CAAC;QAED,aAAa,CAAC,KAA2C;YACvD,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE;gBAC3B,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;aAChC;YACD,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QACxC,CAAC;QAED,qBAAqB,CAAC,SAAgB;YACpC,qDAAqD;YACrD,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,SAAS,CAAC,MAAM,KAAK,KAAK,EAAE;gBACxF,YAAY,GAAG,IAAI,CAAC;aACrB;YAED,OAAO,IAAI,CAAC;QACd,CAAC;QAED,KAAK,CAAC,kBAAkB,CAAC,SAAgB;YACvC,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,WAAW,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;aAClD;YAED,IAAI,SAAS,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,EAAE;gBACxE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;aACzB;YACD,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,KAAK,EAAE;gBACzF,MAAM,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;gBAC7B,YAAY,GAAG,KAAK,CAAC;gBAErB;;;;mBAIG;gBACH,IAAI,CAAC,WAAW,EAAE,CAAC;aACpB;QACH,CAAC;QAED,KAAK,CAAC,OAAO,CAAC,SAAiB;YAC7B,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAC7G,MAAM,YAAY,GAAG;gBACnB,GAAG,MAAM;gBACT,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY;gBAC5B,CAAC,mBAAmB,CAAC,EAAE,IAAI,CAAC,aAAa;gBACzC,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;gBAChG,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;gBACnG,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;aACpG,CAAC;YAEF,IAAI,CAAC,OAAO,GAAG,MAAM,UAAU,CAAC,MAAM,CAAC;gBACrC,GAAG,YAAY;gBACf,SAAS,EAAE,IAAI,CAAC,EAAE;gBAClB,cAAc,EAAE,EAAE;aACnB,CAAC,CAAC;YAEH,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YAC9C,WAAW,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;YAEnD,MAAM,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;QAC/B,CAAC;QAED,MAAM;YACJ;;;;eAIG;YACH,OAAO,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QACxG,CAAC;KACF;IAED,OAAO,KAAK,CAAC,UAAU,CAAqB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;QACzD,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,CAAC;IACnD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC"}

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

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

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

@@ -0,0 +1,3 @@
+export { createReactComponent } from './createComponent';
+export { createOverlayComponent } from './createOverlayComponent';
+//# sourceMappingURL=index.js.map

package/src/react-component-lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/beeq-react/src/react-component-lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}

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

@@ -0,0 +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>;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/src/react-component-lib/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../packages/beeq-react/src/react-component-lib/interfaces.ts"],"names":[],"mappings":""}

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

@@ -0,0 +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;

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

@@ -0,0 +1,108 @@
+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;
+};
+//# sourceMappingURL=attachProps.js.map

package/src/react-component-lib/utils/attachProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachProps.js","sourceRoot":"","sources":["../../../../../packages/beeq-react/src/react-component-lib/utils/attachProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAiB,EAAE,QAAa,EAAE,WAAgB,EAAE,EAAE,EAAE;IAClF,6GAA6G;IAC7G,IAAI,IAAI,YAAY,OAAO,EAAE;QAC3B,iDAAiD;QACjD,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACnE,IAAI,SAAS,KAAK,EAAE,EAAE;YACpB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;SAC5B;QAED,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACrC,IACE,IAAI,KAAK,UAAU;gBACnB,IAAI,KAAK,OAAO;gBAChB,IAAI,KAAK,KAAK;gBACd,IAAI,KAAK,OAAO;gBAChB,IAAI,KAAK,WAAW;gBACpB,IAAI,KAAK,cAAc,EACvB;gBACA,OAAO;aACR;YACD,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE;gBACjE,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;gBACpC,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;gBAExE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE;oBAClC,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;iBAC9C;aACF;iBAAM;gBACJ,IAAY,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACrC,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACvC,IAAI,QAAQ,KAAK,QAAQ,EAAE;oBACzB,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;iBAC1D;aACF;QACH,CAAC,CAAC,CAAC;KACJ;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,SAAuB,EAAE,QAAa,EAAE,QAAa,EAAE,EAAE;IACpF,MAAM,YAAY,GAAW,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,KAAK,CAAC;IAClE,MAAM,YAAY,GAAW,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,KAAK,CAAC;IAClE,0CAA0C;IAC1C,MAAM,cAAc,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;IAC7C,MAAM,mBAAmB,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACpF,MAAM,cAAc,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC/E,MAAM,eAAe,GAAa,EAAE,CAAC;IACrC,4DAA4D;IAC5D,wDAAwD;IACxD,cAAc,CAAC,OAAO,CAAC,CAAC,YAAY,EAAE,EAAE;QACtC,IAAI,mBAAmB,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;YACzC,uEAAuE;YACvE,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACnC,mBAAmB,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;SAC1C;aAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;YAC5C,4CAA4C;YAC5C,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACpC;IACH,CAAC,CAAC,CAAC;IACH,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5D,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACnC,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,eAAuB,EAAE,EAAE;IACjE,QAAQ,eAAe,EAAE;QACvB,KAAK,aAAa;YAChB,OAAO,UAAU,CAAC;KACrB;IACD,OAAO,eAAe,CAAC;AACzB,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,eAAuB,EAAE,EAAE;IAC1D,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;QACnC,OAAO,IAAI,CAAC;KACb;SAAM;QACL,MAAM,SAAS,GAAG,IAAI,GAAG,uBAAuB,CAAC,eAAe,CAAC,CAAC;QAClE,IAAI,WAAW,GAAG,SAAS,IAAI,QAAQ,CAAC;QAExC,IAAI,CAAC,WAAW,EAAE;YAChB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC9C,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YAC3C,WAAW,GAAG,OAAQ,OAAe,CAAC,SAAS,CAAC,KAAK,UAAU,CAAC;SACjE;QAED,OAAO,WAAW,CAAC;KACpB;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,IAAiF,EACjF,SAAiB,EACjB,eAAmC,EACnC,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,CAAC;IACzD,MAAM,eAAe,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;IAE9C,+CAA+C;IAC/C,IAAI,eAAe,EAAE;QACnB,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;KACtD;IAED,qBAAqB;IACrB,IAAI,CAAC,gBAAgB,CACnB,SAAS,EACT,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,SAAS,OAAO,CAAC,CAAQ;QAChD,IAAI,eAAe,EAAE;YACnB,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;SAC/B;IACH,CAAC,CAAC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,GAA4B,EAAE,EAAE;IAClD,MAAM,GAAG,GAAG,IAAI,GAAG,EAAkB,CAAC;IACrC,GAAgB,CAAC,OAAO,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IACxD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC"}

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

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

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

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

package/src/react-component-lib/utils/case.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"case.js","sourceRoot":"","sources":["../../../../../packages/beeq-react/src/react-component-lib/utils/case.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,GAAW,EAAE,EAAE,CAC9C,GAAG;KACA,WAAW,EAAE;KACb,KAAK,CAAC,GAAG,CAAC;KACV,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;KACpE,IAAI,CAAC,EAAE,CAAC,CAAC;AACd,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC"}

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

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

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

@@ -0,0 +1,13 @@
+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;
+        }
+    }
+};
+//# sourceMappingURL=dev.js.map

package/src/react-component-lib/utils/dev.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev.js","sourceRoot":"","sources":["../../../../../packages/beeq-react/src/react-component-lib/utils/dev.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,OAAO,IAAI,OAAO,CAAC,GAAG,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC;AAC1E,CAAC,CAAC;AAEF,MAAM,QAAQ,GAA+B,EAAE,CAAC;AAEhD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,GAAW,EAAE,OAAe,EAAE,EAAE;IACjE,IAAI,SAAS,EAAE,EAAE;QACf,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;YAClB,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACtB,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;SACtB;KACF;AACH,CAAC,CAAC"}

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

@@ -0,0 +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<StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
+export declare const defineCustomElement: (tagName: string, customElement: any) => void;
+export * from './attachProps';
+export * from './case';

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+export const setRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref != null) {
+        // Cast as a MutableRef so we can assign current
+        ref.current = value;
+    }
+};
+export const mergeRefs = (...refs) => {
+    return (value) => {
+        refs.forEach((ref) => {
+            setRef(ref, value);
+        });
+    };
+};
+export const createForwardRef = (ReactComponent, displayName) => {
+    const forwardRef = (props, ref) => {
+        return _jsx(ReactComponent, { ...props, forwardedRef: ref });
+    };
+    forwardRef.displayName = displayName;
+    return React.forwardRef(forwardRef);
+};
+export const defineCustomElement = (tagName, customElement) => {
+    if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+        customElements.define(tagName, customElement);
+    }
+};
+export * from './attachProps';
+export * from './case';
+//# sourceMappingURL=index.js.map

package/src/react-component-lib/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../packages/beeq-react/src/react-component-lib/utils/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,GAA+D,EAAE,KAAU,EAAE,EAAE;IACpG,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;QAC7B,GAAG,CAAC,KAAK,CAAC,CAAC;KACZ;SAAM,IAAI,GAAG,IAAI,IAAI,EAAE;QACtB,gDAAgD;QAC/C,GAAmC,CAAC,OAAO,GAAG,KAAK,CAAC;KACtD;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,GAAG,IAAoE,EAC/C,EAAE;IAC1B,OAAO,CAAC,KAAU,EAAE,EAAE;QACpB,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YACnB,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAwB,cAAmB,EAAE,WAAmB,EAAE,EAAE;IAClG,MAAM,UAAU,GAAG,CACjB,KAAuD,EACvD,GAA0C,EAC1C,EAAE;QACF,OAAO,KAAC,cAAc,OAAK,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,CAAC;IAC1D,CAAC,CAAC;IACF,UAAU,CAAC,WAAW,GAAG,WAAW,CAAC;IAErC,OAAO,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;AACtC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,OAAe,EAAE,aAAkB,EAAE,EAAE;IACzE,IAAI,aAAa,KAAK,SAAS,IAAI,OAAO,cAAc,KAAK,WAAW,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;QACxG,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;KAC/C;AACH,CAAC,CAAC;AAEF,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC"}