@desynth/web-components-react 6.7.25-alpha.1

package/dist/components.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import type { JSX } from '@desynth/web-components/dist';
+export declare const DesynthAccordion: import("react").ForwardRefExoticComponent<JSX.DesynthAccordion & Omit<import("react").HTMLAttributes<HTMLDesynthAccordionElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthAccordionElement>>;
+export declare const DesynthAlert: import("react").ForwardRefExoticComponent<JSX.DesynthAlert & Omit<import("react").HTMLAttributes<HTMLDesynthAlertElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthAlertElement>>;
+export declare const DesynthBreadcrumb: import("react").ForwardRefExoticComponent<JSX.DesynthBreadcrumb & Omit<import("react").HTMLAttributes<HTMLDesynthBreadcrumbElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthBreadcrumbElement>>;
+export declare const DesynthButton: import("react").ForwardRefExoticComponent<JSX.DesynthButton & Omit<import("react").HTMLAttributes<HTMLDesynthButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthButtonElement>>;
+export declare const DesynthButtonSlider: import("react").ForwardRefExoticComponent<JSX.DesynthButtonSlider & Omit<import("react").HTMLAttributes<HTMLDesynthButtonSliderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthButtonSliderElement>>;
+export declare const DesynthCard: import("react").ForwardRefExoticComponent<JSX.DesynthCard & Omit<import("react").HTMLAttributes<HTMLDesynthCardElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthCardElement>>;
+export declare const DesynthCheckbox: import("react").ForwardRefExoticComponent<JSX.DesynthCheckbox & Omit<import("react").HTMLAttributes<HTMLDesynthCheckboxElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthCheckboxElement>>;
+export declare const DesynthDatePicker: import("react").ForwardRefExoticComponent<JSX.DesynthDatePicker & Omit<import("react").HTMLAttributes<HTMLDesynthDatePickerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthDatePickerElement>>;
+export declare const DesynthDivider: import("react").ForwardRefExoticComponent<JSX.DesynthDivider & Omit<import("react").HTMLAttributes<HTMLDesynthDividerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthDividerElement>>;
+export declare const DesynthDrawer: import("react").ForwardRefExoticComponent<JSX.DesynthDrawer & Omit<import("react").HTMLAttributes<HTMLDesynthDrawerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthDrawerElement>>;
+export declare const DesynthDropFile: import("react").ForwardRefExoticComponent<JSX.DesynthDropFile & Omit<import("react").HTMLAttributes<HTMLDesynthDropFileElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthDropFileElement>>;
+export declare const DesynthForm: import("react").ForwardRefExoticComponent<JSX.DesynthForm & Omit<import("react").HTMLAttributes<HTMLDesynthFormElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthFormElement>>;
+export declare const DesynthGrid: import("react").ForwardRefExoticComponent<JSX.DesynthGrid & Omit<import("react").HTMLAttributes<HTMLDesynthGridElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthGridElement>>;
+export declare const DesynthHeader: import("react").ForwardRefExoticComponent<JSX.DesynthHeader & Omit<import("react").HTMLAttributes<HTMLDesynthHeaderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthHeaderElement>>;
+export declare const DesynthList: import("react").ForwardRefExoticComponent<JSX.DesynthList & Omit<import("react").HTMLAttributes<HTMLDesynthListElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthListElement>>;
+export declare const DesynthLoader: import("react").ForwardRefExoticComponent<JSX.DesynthLoader & Omit<import("react").HTMLAttributes<HTMLDesynthLoaderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthLoaderElement>>;
+export declare const DesynthModal: import("react").ForwardRefExoticComponent<JSX.DesynthModal & Omit<import("react").HTMLAttributes<HTMLDesynthModalElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthModalElement>>;
+export declare const DesynthMultiStepper: import("react").ForwardRefExoticComponent<JSX.DesynthMultiStepper & Omit<import("react").HTMLAttributes<HTMLDesynthMultiStepperElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthMultiStepperElement>>;
+export declare const DesynthPaper: import("react").ForwardRefExoticComponent<JSX.DesynthPaper & Omit<import("react").HTMLAttributes<HTMLDesynthPaperElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthPaperElement>>;
+export declare const DesynthRating: import("react").ForwardRefExoticComponent<JSX.DesynthRating & Omit<import("react").HTMLAttributes<HTMLDesynthRatingElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthRatingElement>>;
+export declare const DesynthRenderer: import("react").ForwardRefExoticComponent<JSX.DesynthRenderer & Omit<import("react").HTMLAttributes<HTMLDesynthRendererElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthRendererElement>>;
+export declare const DesynthSelect: import("react").ForwardRefExoticComponent<JSX.DesynthSelect & Omit<import("react").HTMLAttributes<HTMLDesynthSelectElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthSelectElement>>;
+export declare const DesynthStepStepper: import("react").ForwardRefExoticComponent<JSX.DesynthStepStepper & Omit<import("react").HTMLAttributes<HTMLDesynthStepStepperElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthStepStepperElement>>;
+export declare const DesynthSwitch: import("react").ForwardRefExoticComponent<JSX.DesynthSwitch & Omit<import("react").HTMLAttributes<HTMLDesynthSwitchElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthSwitchElement>>;
+export declare const DesynthTable: import("react").ForwardRefExoticComponent<JSX.DesynthTable & Omit<import("react").HTMLAttributes<HTMLDesynthTableElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthTableElement>>;
+export declare const DesynthTextArea: import("react").ForwardRefExoticComponent<JSX.DesynthTextArea & Omit<import("react").HTMLAttributes<HTMLDesynthTextAreaElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthTextAreaElement>>;
+export declare const DesynthTextInput: import("react").ForwardRefExoticComponent<JSX.DesynthTextInput & Omit<import("react").HTMLAttributes<HTMLDesynthTextInputElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthTextInputElement>>;
+export declare const DesynthTooltip: import("react").ForwardRefExoticComponent<JSX.DesynthTooltip & Omit<import("react").HTMLAttributes<HTMLDesynthTooltipElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLDesynthTooltipElement>>;
+export declare const HorizontalCards: import("react").ForwardRefExoticComponent<JSX.HorizontalCards & Omit<import("react").HTMLAttributes<HTMLHorizontalCardsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLHorizontalCardsElement>>;
+export declare const HtmlEditor: import("react").ForwardRefExoticComponent<JSX.HtmlEditor & Omit<import("react").HTMLAttributes<HTMLHtmlEditorElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLHtmlEditorElement>>;

package/dist/components.js

@@ -0,0 +1,64 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+import { defineCustomElement as defineDesynthAccordion } from '@desynth/web-components/dist/desynth-accordion.js';
+import { defineCustomElement as defineDesynthAlert } from '@desynth/web-components/dist/desynth-alert.js';
+import { defineCustomElement as defineDesynthBreadcrumb } from '@desynth/web-components/dist/desynth-breadcrumb.js';
+import { defineCustomElement as defineDesynthButton } from '@desynth/web-components/dist/desynth-button.js';
+import { defineCustomElement as defineDesynthButtonSlider } from '@desynth/web-components/dist/desynth-button-slider.js';
+import { defineCustomElement as defineDesynthCard } from '@desynth/web-components/dist/desynth-card.js';
+import { defineCustomElement as defineDesynthCheckbox } from '@desynth/web-components/dist/desynth-checkbox.js';
+import { defineCustomElement as defineDesynthDatePicker } from '@desynth/web-components/dist/desynth-date-picker.js';
+import { defineCustomElement as defineDesynthDivider } from '@desynth/web-components/dist/desynth-divider.js';
+import { defineCustomElement as defineDesynthDrawer } from '@desynth/web-components/dist/desynth-drawer.js';
+import { defineCustomElement as defineDesynthDropFile } from '@desynth/web-components/dist/desynth-drop-file.js';
+import { defineCustomElement as defineDesynthForm } from '@desynth/web-components/dist/desynth-form.js';
+import { defineCustomElement as defineDesynthGrid } from '@desynth/web-components/dist/desynth-grid.js';
+import { defineCustomElement as defineDesynthHeader } from '@desynth/web-components/dist/desynth-header.js';
+import { defineCustomElement as defineDesynthList } from '@desynth/web-components/dist/desynth-list.js';
+import { defineCustomElement as defineDesynthLoader } from '@desynth/web-components/dist/desynth-loader.js';
+import { defineCustomElement as defineDesynthModal } from '@desynth/web-components/dist/desynth-modal.js';
+import { defineCustomElement as defineDesynthMultiStepper } from '@desynth/web-components/dist/desynth-multi-stepper.js';
+import { defineCustomElement as defineDesynthPaper } from '@desynth/web-components/dist/desynth-paper.js';
+import { defineCustomElement as defineDesynthRating } from '@desynth/web-components/dist/desynth-rating.js';
+import { defineCustomElement as defineDesynthRenderer } from '@desynth/web-components/dist/desynth-renderer.js';
+import { defineCustomElement as defineDesynthSelect } from '@desynth/web-components/dist/desynth-select.js';
+import { defineCustomElement as defineDesynthStepStepper } from '@desynth/web-components/dist/desynth-step-stepper.js';
+import { defineCustomElement as defineDesynthSwitch } from '@desynth/web-components/dist/desynth-switch.js';
+import { defineCustomElement as defineDesynthTable } from '@desynth/web-components/dist/desynth-table.js';
+import { defineCustomElement as defineDesynthTextArea } from '@desynth/web-components/dist/desynth-text-area.js';
+import { defineCustomElement as defineDesynthTextInput } from '@desynth/web-components/dist/desynth-text-input.js';
+import { defineCustomElement as defineDesynthTooltip } from '@desynth/web-components/dist/desynth-tooltip.js';
+import { defineCustomElement as defineHorizontalCards } from '@desynth/web-components/dist/horizontal-cards.js';
+import { defineCustomElement as defineHtmlEditor } from '@desynth/web-components/dist/html-editor.js';
+export const DesynthAccordion = /*@__PURE__*/ createReactComponent('desynth-accordion', undefined, undefined, defineDesynthAccordion);
+export const DesynthAlert = /*@__PURE__*/ createReactComponent('desynth-alert', undefined, undefined, defineDesynthAlert);
+export const DesynthBreadcrumb = /*@__PURE__*/ createReactComponent('desynth-breadcrumb', undefined, undefined, defineDesynthBreadcrumb);
+export const DesynthButton = /*@__PURE__*/ createReactComponent('desynth-button', undefined, undefined, defineDesynthButton);
+export const DesynthButtonSlider = /*@__PURE__*/ createReactComponent('desynth-button-slider', undefined, undefined, defineDesynthButtonSlider);
+export const DesynthCard = /*@__PURE__*/ createReactComponent('desynth-card', undefined, undefined, defineDesynthCard);
+export const DesynthCheckbox = /*@__PURE__*/ createReactComponent('desynth-checkbox', undefined, undefined, defineDesynthCheckbox);
+export const DesynthDatePicker = /*@__PURE__*/ createReactComponent('desynth-date-picker', undefined, undefined, defineDesynthDatePicker);
+export const DesynthDivider = /*@__PURE__*/ createReactComponent('desynth-divider', undefined, undefined, defineDesynthDivider);
+export const DesynthDrawer = /*@__PURE__*/ createReactComponent('desynth-drawer', undefined, undefined, defineDesynthDrawer);
+export const DesynthDropFile = /*@__PURE__*/ createReactComponent('desynth-drop-file', undefined, undefined, defineDesynthDropFile);
+export const DesynthForm = /*@__PURE__*/ createReactComponent('desynth-form', undefined, undefined, defineDesynthForm);
+export const DesynthGrid = /*@__PURE__*/ createReactComponent('desynth-grid', undefined, undefined, defineDesynthGrid);
+export const DesynthHeader = /*@__PURE__*/ createReactComponent('desynth-header', undefined, undefined, defineDesynthHeader);
+export const DesynthList = /*@__PURE__*/ createReactComponent('desynth-list', undefined, undefined, defineDesynthList);
+export const DesynthLoader = /*@__PURE__*/ createReactComponent('desynth-loader', undefined, undefined, defineDesynthLoader);
+export const DesynthModal = /*@__PURE__*/ createReactComponent('desynth-modal', undefined, undefined, defineDesynthModal);
+export const DesynthMultiStepper = /*@__PURE__*/ createReactComponent('desynth-multi-stepper', undefined, undefined, defineDesynthMultiStepper);
+export const DesynthPaper = /*@__PURE__*/ createReactComponent('desynth-paper', undefined, undefined, defineDesynthPaper);
+export const DesynthRating = /*@__PURE__*/ createReactComponent('desynth-rating', undefined, undefined, defineDesynthRating);
+export const DesynthRenderer = /*@__PURE__*/ createReactComponent('desynth-renderer', undefined, undefined, defineDesynthRenderer);
+export const DesynthSelect = /*@__PURE__*/ createReactComponent('desynth-select', undefined, undefined, defineDesynthSelect);
+export const DesynthStepStepper = /*@__PURE__*/ createReactComponent('desynth-step-stepper', undefined, undefined, defineDesynthStepStepper);
+export const DesynthSwitch = /*@__PURE__*/ createReactComponent('desynth-switch', undefined, undefined, defineDesynthSwitch);
+export const DesynthTable = /*@__PURE__*/ createReactComponent('desynth-table', undefined, undefined, defineDesynthTable);
+export const DesynthTextArea = /*@__PURE__*/ createReactComponent('desynth-text-area', undefined, undefined, defineDesynthTextArea);
+export const DesynthTextInput = /*@__PURE__*/ createReactComponent('desynth-text-input', undefined, undefined, defineDesynthTextInput);
+export const DesynthTooltip = /*@__PURE__*/ createReactComponent('desynth-tooltip', undefined, undefined, defineDesynthTooltip);
+export const HorizontalCards = /*@__PURE__*/ createReactComponent('horizontal-cards', undefined, undefined, defineHorizontalCards);
+export const HtmlEditor = /*@__PURE__*/ createReactComponent('html-editor', undefined, undefined, defineHtmlEditor);

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> | undefined, manipulatePropsFunction?: ((originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes) | undefined, defineCustomElement?: () => void) => React.ForwardRefExoticComponent<React.PropsWithoutRef<import("./utils").StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
+export {};

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

@@ -0,0 +1,74 @@
+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 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 _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
+            let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+                const value = cProps[name];
+                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 = Object.assign(Object.assign({}, 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);
+};

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> | undefined;
+}> & React.RefAttributes<OverlayType>>;
+export {};

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

@@ -0,0 +1,95 @@
+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;
+        }
+        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 _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 = await controller.create(Object.assign(Object.assign({}, 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 React.createElement(Overlay, Object.assign({}, props, { forwardedRef: ref }));
+    });
+};

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

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

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

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

package/dist/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/dist/react-component-lib/interfaces.js

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

package/dist/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) | undefined;
+    } | undefined;
+}, eventName: string, newEventHandler?: ((e: Event) => any) | undefined) => void;

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

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

package/dist/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/dist/react-component-lib/utils/case.js

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

package/dist/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/dist/react-component-lib/utils/dev.js

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

package/dist/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/dist/react-component-lib/utils/index.js

@@ -0,0 +1,31 @@
+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 React.createElement(ReactComponent, Object.assign({}, 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';

package/package.json

@@ -0,0 +1,41 @@
+{
+    "name": "@desynth/web-components-react",
+    "sideEffects": false,
+    "version": "06.07.25-alpha.1",
+    "description": "React proxy for @desynth/web-components",
+    "license": "MPL-2.0",
+    "homepage": "https://github.com/desynth/desynth-web-components#readme",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/desynth/desynth-web-components.git"
+    },
+    "bugs": {
+        "url": "https://github.com/desynth/desynth-web-components/issues"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "build": "npm run tsc",
+        "tsc": "tsc -p ."
+    },
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "dist/"
+    ],
+    "devDependencies": {
+        "@types/react": "18.3.3",
+        "@types/react-dom": "18.3.0"
+    },
+    "dependencies": {
+        "react": ">=18.3.1",
+        "react-dom": ">=18.3.1",
+        "typescript": "5.2.2"
+    },
+    "peerDependencies": {
+        "react": ">=18.3.1",
+        "react-dom": ">=18.3.1"
+    }
+}

package/readme.md

@@ -0,0 +1,15 @@
+# desynth-web-components - React Proxy
+This is the desynth utility Stencil web component library for general purposes
+
+```bash
+HTML Web Components
+Compatible with:
+ReactJS
+Vue
+Angular
+Svelte
+Ionic
+```
+## General Solution's Architecture Design
+![Architecture Diagram](https://github.com/desynth/desynth-java-utils/assets/61949272/474bf10f-73cf-474c-a34b-45269dc508a2)
+