@desynth/web-components-react 1.28.26-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components.d.ts +164 -0
- package/dist/components.js +339 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/react-component-lib/createComponent.d.ts +10 -0
- package/dist/react-component-lib/createComponent.js +74 -0
- package/dist/react-component-lib/createOverlayComponent.d.ts +21 -0
- package/dist/react-component-lib/createOverlayComponent.js +95 -0
- package/dist/react-component-lib/index.d.ts +2 -0
- package/dist/react-component-lib/index.js +2 -0
- package/dist/react-component-lib/interfaces.d.ts +29 -0
- package/dist/react-component-lib/interfaces.js +1 -0
- package/dist/react-component-lib/utils/attachProps.d.ts +16 -0
- package/dist/react-component-lib/utils/attachProps.js +107 -0
- package/dist/react-component-lib/utils/case.d.ts +2 -0
- package/dist/react-component-lib/utils/case.js +6 -0
- package/dist/react-component-lib/utils/dev.d.ts +2 -0
- package/dist/react-component-lib/utils/dev.js +12 -0
- package/dist/react-component-lib/utils/index.d.ts +10 -0
- package/dist/react-component-lib/utils/index.js +31 -0
- package/package.json +42 -0
- package/readme.md +15 -0
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This file was automatically generated by the Stencil React Output Target.
|
|
3
|
+
* Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
|
|
4
|
+
*/
|
|
5
|
+
import { type BeforeCloseAlertEventDetail, type BeforeCloseEventDetail, type CheckedChangeEventValue, type DesynthAlertCustomEvent, type DesynthBreadcrumbCustomEvent, type DesynthCheckboxCustomEvent, type DesynthDatePickerCustomEvent, type DesynthDropFileCustomEvent, type DesynthFormCustomEvent, type DesynthListCustomEvent, type DesynthModalCustomEvent, type DesynthRatingCustomEvent, type DesynthSelectCustomEvent, type DesynthSwitchCustomEvent, type DesynthTextAreaCustomEvent, type DesynthTextInputCustomEvent, type IFormInput, type InputChangeEventValue, type ListItem, type Options, type SwitchChangeEventValue, type TextInputChangeEventValue } from "@desynth/web-components";
|
|
6
|
+
import { DesynthAccordion as DesynthAccordionElement } from "@desynth/web-components/dist/desynth-accordion.js";
|
|
7
|
+
import { DesynthAlert as DesynthAlertElement } from "@desynth/web-components/dist/desynth-alert.js";
|
|
8
|
+
import { DesynthBreadcrumb as DesynthBreadcrumbElement } from "@desynth/web-components/dist/desynth-breadcrumb.js";
|
|
9
|
+
import { DesynthButtonSlider as DesynthButtonSliderElement } from "@desynth/web-components/dist/desynth-button-slider.js";
|
|
10
|
+
import { DesynthButton as DesynthButtonElement } from "@desynth/web-components/dist/desynth-button.js";
|
|
11
|
+
import { DesynthCard as DesynthCardElement } from "@desynth/web-components/dist/desynth-card.js";
|
|
12
|
+
import { DesynthCheckbox as DesynthCheckboxElement } from "@desynth/web-components/dist/desynth-checkbox.js";
|
|
13
|
+
import { DesynthDatePicker as DesynthDatePickerElement } from "@desynth/web-components/dist/desynth-date-picker.js";
|
|
14
|
+
import { DesynthDivider as DesynthDividerElement } from "@desynth/web-components/dist/desynth-divider.js";
|
|
15
|
+
import { DesynthDrawer as DesynthDrawerElement } from "@desynth/web-components/dist/desynth-drawer.js";
|
|
16
|
+
import { DesynthDropFile as DesynthDropFileElement } from "@desynth/web-components/dist/desynth-drop-file.js";
|
|
17
|
+
import { DesynthDropdown as DesynthDropdownElement } from "@desynth/web-components/dist/desynth-dropdown.js";
|
|
18
|
+
import { DesynthForm as DesynthFormElement } from "@desynth/web-components/dist/desynth-form.js";
|
|
19
|
+
import { DesynthGrid as DesynthGridElement } from "@desynth/web-components/dist/desynth-grid.js";
|
|
20
|
+
import { DesynthHeader as DesynthHeaderElement } from "@desynth/web-components/dist/desynth-header.js";
|
|
21
|
+
import { DesynthList as DesynthListElement } from "@desynth/web-components/dist/desynth-list.js";
|
|
22
|
+
import { DesynthLoader as DesynthLoaderElement } from "@desynth/web-components/dist/desynth-loader.js";
|
|
23
|
+
import { DesynthModal as DesynthModalElement } from "@desynth/web-components/dist/desynth-modal.js";
|
|
24
|
+
import { DesynthMultiStepper as DesynthMultiStepperElement } from "@desynth/web-components/dist/desynth-multi-stepper.js";
|
|
25
|
+
import { DesynthPaper as DesynthPaperElement } from "@desynth/web-components/dist/desynth-paper.js";
|
|
26
|
+
import { DesynthRating as DesynthRatingElement } from "@desynth/web-components/dist/desynth-rating.js";
|
|
27
|
+
import { DesynthRenderer as DesynthRendererElement } from "@desynth/web-components/dist/desynth-renderer.js";
|
|
28
|
+
import { DesynthSelect as DesynthSelectElement } from "@desynth/web-components/dist/desynth-select.js";
|
|
29
|
+
import { DesynthStepStepper as DesynthStepStepperElement } from "@desynth/web-components/dist/desynth-step-stepper.js";
|
|
30
|
+
import { DesynthSwitch as DesynthSwitchElement } from "@desynth/web-components/dist/desynth-switch.js";
|
|
31
|
+
import { DesynthTable as DesynthTableElement } from "@desynth/web-components/dist/desynth-table.js";
|
|
32
|
+
import { DesynthTextArea as DesynthTextAreaElement } from "@desynth/web-components/dist/desynth-text-area.js";
|
|
33
|
+
import { DesynthTextInput as DesynthTextInputElement } from "@desynth/web-components/dist/desynth-text-input.js";
|
|
34
|
+
import { DesynthText as DesynthTextElement } from "@desynth/web-components/dist/desynth-text.js";
|
|
35
|
+
import { DesynthTooltip as DesynthTooltipElement } from "@desynth/web-components/dist/desynth-tooltip.js";
|
|
36
|
+
import { HorizontalCards as HorizontalCardsElement } from "@desynth/web-components/dist/horizontal-cards.js";
|
|
37
|
+
import { HtmlEditor as HtmlEditorElement } from "@desynth/web-components/dist/html-editor.js";
|
|
38
|
+
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
|
|
39
|
+
export type DesynthAccordionEvents = NonNullable<unknown>;
|
|
40
|
+
export declare const DesynthAccordion: StencilReactComponent<DesynthAccordionElement, DesynthAccordionEvents>;
|
|
41
|
+
export type DesynthAlertEvents = {
|
|
42
|
+
onHandleOpen: EventName<CustomEvent<void>>;
|
|
43
|
+
onHandleClose: EventName<CustomEvent<void>>;
|
|
44
|
+
onHandleBeforeClose: EventName<DesynthAlertCustomEvent<BeforeCloseAlertEventDetail>>;
|
|
45
|
+
};
|
|
46
|
+
export declare const DesynthAlert: StencilReactComponent<DesynthAlertElement, DesynthAlertEvents>;
|
|
47
|
+
export type DesynthBreadcrumbEvents = {
|
|
48
|
+
onHandleInput: EventName<DesynthBreadcrumbCustomEvent<HTMLInputElement>>;
|
|
49
|
+
onHandleFocus: EventName<CustomEvent<void>>;
|
|
50
|
+
onHandleBlur: EventName<CustomEvent<void>>;
|
|
51
|
+
};
|
|
52
|
+
export declare const DesynthBreadcrumb: StencilReactComponent<DesynthBreadcrumbElement, DesynthBreadcrumbEvents>;
|
|
53
|
+
export type DesynthButtonEvents = {
|
|
54
|
+
onHandleClick: EventName<CustomEvent<void>>;
|
|
55
|
+
onHandleFocus: EventName<CustomEvent<void>>;
|
|
56
|
+
onHandleBlur: EventName<CustomEvent<void>>;
|
|
57
|
+
};
|
|
58
|
+
export declare const DesynthButton: StencilReactComponent<DesynthButtonElement, DesynthButtonEvents>;
|
|
59
|
+
export type DesynthButtonSliderEvents = NonNullable<unknown>;
|
|
60
|
+
export declare const DesynthButtonSlider: StencilReactComponent<DesynthButtonSliderElement, DesynthButtonSliderEvents>;
|
|
61
|
+
export type DesynthCardEvents = NonNullable<unknown>;
|
|
62
|
+
export declare const DesynthCard: StencilReactComponent<DesynthCardElement, DesynthCardEvents>;
|
|
63
|
+
export type DesynthCheckboxEvents = {
|
|
64
|
+
onHandleClick: EventName<DesynthCheckboxCustomEvent<CheckedChangeEventValue>>;
|
|
65
|
+
};
|
|
66
|
+
export declare const DesynthCheckbox: StencilReactComponent<DesynthCheckboxElement, DesynthCheckboxEvents>;
|
|
67
|
+
export type DesynthDatePickerEvents = {
|
|
68
|
+
onDateChanged: EventName<DesynthDatePickerCustomEvent<InputChangeEventValue>>;
|
|
69
|
+
};
|
|
70
|
+
export declare const DesynthDatePicker: StencilReactComponent<DesynthDatePickerElement, DesynthDatePickerEvents>;
|
|
71
|
+
export type DesynthDividerEvents = NonNullable<unknown>;
|
|
72
|
+
export declare const DesynthDivider: StencilReactComponent<DesynthDividerElement, DesynthDividerEvents>;
|
|
73
|
+
export type DesynthDrawerEvents = {
|
|
74
|
+
onHandleClick: EventName<CustomEvent<void>>;
|
|
75
|
+
onHandleFocus: EventName<CustomEvent<void>>;
|
|
76
|
+
onHandleClose: EventName<CustomEvent<void>>;
|
|
77
|
+
};
|
|
78
|
+
export declare const DesynthDrawer: StencilReactComponent<DesynthDrawerElement, DesynthDrawerEvents>;
|
|
79
|
+
export type DesynthDropFileEvents = {
|
|
80
|
+
onFilesDropped: EventName<DesynthDropFileCustomEvent<File[]>>;
|
|
81
|
+
};
|
|
82
|
+
export declare const DesynthDropFile: StencilReactComponent<DesynthDropFileElement, DesynthDropFileEvents>;
|
|
83
|
+
export type DesynthDropdownEvents = NonNullable<unknown>;
|
|
84
|
+
export declare const DesynthDropdown: StencilReactComponent<DesynthDropdownElement, DesynthDropdownEvents>;
|
|
85
|
+
export type DesynthFormEvents = {
|
|
86
|
+
onClickSubmit: EventName<CustomEvent<void>>;
|
|
87
|
+
onClickClear: EventName<CustomEvent<void>>;
|
|
88
|
+
onHandleChange: EventName<DesynthFormCustomEvent<IFormInput>>;
|
|
89
|
+
};
|
|
90
|
+
export declare const DesynthForm: StencilReactComponent<DesynthFormElement, DesynthFormEvents>;
|
|
91
|
+
export type DesynthGridEvents = NonNullable<unknown>;
|
|
92
|
+
export declare const DesynthGrid: StencilReactComponent<DesynthGridElement, DesynthGridEvents>;
|
|
93
|
+
export type DesynthHeaderEvents = NonNullable<unknown>;
|
|
94
|
+
export declare const DesynthHeader: StencilReactComponent<DesynthHeaderElement, DesynthHeaderEvents>;
|
|
95
|
+
export type DesynthListEvents = {
|
|
96
|
+
onItemClicked: EventName<DesynthListCustomEvent<ListItem>>;
|
|
97
|
+
};
|
|
98
|
+
export declare const DesynthList: StencilReactComponent<DesynthListElement, DesynthListEvents>;
|
|
99
|
+
export type DesynthLoaderEvents = NonNullable<unknown>;
|
|
100
|
+
export declare const DesynthLoader: StencilReactComponent<DesynthLoaderElement, DesynthLoaderEvents>;
|
|
101
|
+
export type DesynthModalEvents = {
|
|
102
|
+
onHandleOpen: EventName<CustomEvent<void>>;
|
|
103
|
+
onHandleClose: EventName<CustomEvent<void>>;
|
|
104
|
+
onHandleBeforeClose: EventName<DesynthModalCustomEvent<BeforeCloseEventDetail>>;
|
|
105
|
+
};
|
|
106
|
+
export declare const DesynthModal: StencilReactComponent<DesynthModalElement, DesynthModalEvents>;
|
|
107
|
+
export type DesynthMultiStepperEvents = {
|
|
108
|
+
onHandleSubmit: EventName<CustomEvent<void>>;
|
|
109
|
+
};
|
|
110
|
+
export declare const DesynthMultiStepper: StencilReactComponent<DesynthMultiStepperElement, DesynthMultiStepperEvents>;
|
|
111
|
+
export type DesynthPaperEvents = NonNullable<unknown>;
|
|
112
|
+
export declare const DesynthPaper: StencilReactComponent<DesynthPaperElement, DesynthPaperEvents>;
|
|
113
|
+
export type DesynthRatingEvents = {
|
|
114
|
+
onHandleChange: EventName<DesynthRatingCustomEvent<TextInputChangeEventValue>>;
|
|
115
|
+
};
|
|
116
|
+
export declare const DesynthRating: StencilReactComponent<DesynthRatingElement, DesynthRatingEvents>;
|
|
117
|
+
export type DesynthRendererEvents = NonNullable<unknown>;
|
|
118
|
+
export declare const DesynthRenderer: StencilReactComponent<DesynthRendererElement, DesynthRendererEvents>;
|
|
119
|
+
export type DesynthSelectEvents = {
|
|
120
|
+
onHandleChange: EventName<DesynthSelectCustomEvent<Options>>;
|
|
121
|
+
onHandleInput: EventName<DesynthSelectCustomEvent<HTMLInputElement>>;
|
|
122
|
+
onHandleFocus: EventName<CustomEvent<void>>;
|
|
123
|
+
};
|
|
124
|
+
export declare const DesynthSelect: StencilReactComponent<DesynthSelectElement, DesynthSelectEvents>;
|
|
125
|
+
export type DesynthStepStepperEvents = NonNullable<unknown>;
|
|
126
|
+
export declare const DesynthStepStepper: StencilReactComponent<DesynthStepStepperElement, DesynthStepStepperEvents>;
|
|
127
|
+
export type DesynthSwitchEvents = {
|
|
128
|
+
onHandleClick: EventName<DesynthSwitchCustomEvent<SwitchChangeEventValue>>;
|
|
129
|
+
onHandleInput: EventName<DesynthSwitchCustomEvent<HTMLInputElement>>;
|
|
130
|
+
onHandleFocus: EventName<CustomEvent<void>>;
|
|
131
|
+
onHandleBlur: EventName<CustomEvent<void>>;
|
|
132
|
+
};
|
|
133
|
+
export declare const DesynthSwitch: StencilReactComponent<DesynthSwitchElement, DesynthSwitchEvents>;
|
|
134
|
+
export type DesynthTableEvents = {
|
|
135
|
+
onChangeRowsPerPage: EventName<CustomEvent<number>>;
|
|
136
|
+
onGetDataNextPage: EventName<CustomEvent<null>>;
|
|
137
|
+
onRowEvent: EventName<CustomEvent<any>>;
|
|
138
|
+
onDropEvent: EventName<CustomEvent<any>>;
|
|
139
|
+
};
|
|
140
|
+
export declare const DesynthTable: StencilReactComponent<DesynthTableElement, DesynthTableEvents>;
|
|
141
|
+
export type DesynthTextEvents = NonNullable<unknown>;
|
|
142
|
+
export declare const DesynthText: StencilReactComponent<DesynthTextElement, DesynthTextEvents>;
|
|
143
|
+
export type DesynthTextAreaEvents = {
|
|
144
|
+
onHandleChange: EventName<DesynthTextAreaCustomEvent<InputChangeEventValue>>;
|
|
145
|
+
onHandleInput: EventName<DesynthTextAreaCustomEvent<HTMLInputElement>>;
|
|
146
|
+
onHandleFocus: EventName<CustomEvent<void>>;
|
|
147
|
+
onHandleBlur: EventName<CustomEvent<void>>;
|
|
148
|
+
};
|
|
149
|
+
export declare const DesynthTextArea: StencilReactComponent<DesynthTextAreaElement, DesynthTextAreaEvents>;
|
|
150
|
+
export type DesynthTextInputEvents = {
|
|
151
|
+
onHandleChange: EventName<DesynthTextInputCustomEvent<TextInputChangeEventValue>>;
|
|
152
|
+
onHandleInput: EventName<DesynthTextInputCustomEvent<HTMLInputElement>>;
|
|
153
|
+
onHandleFocus: EventName<CustomEvent<void>>;
|
|
154
|
+
onHandleBlur: EventName<CustomEvent<void>>;
|
|
155
|
+
};
|
|
156
|
+
export declare const DesynthTextInput: StencilReactComponent<DesynthTextInputElement, DesynthTextInputEvents>;
|
|
157
|
+
export type DesynthTooltipEvents = NonNullable<unknown>;
|
|
158
|
+
export declare const DesynthTooltip: StencilReactComponent<DesynthTooltipElement, DesynthTooltipEvents>;
|
|
159
|
+
export type HorizontalCardsEvents = NonNullable<unknown>;
|
|
160
|
+
export declare const HorizontalCards: StencilReactComponent<HorizontalCardsElement, HorizontalCardsEvents>;
|
|
161
|
+
export type HtmlEditorEvents = {
|
|
162
|
+
onHtmlChanged: EventName<CustomEvent<string>>;
|
|
163
|
+
};
|
|
164
|
+
export declare const HtmlEditor: StencilReactComponent<HtmlEditorElement, HtmlEditorEvents>;
|
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { DesynthAccordion as DesynthAccordionElement, defineCustomElement as defineDesynthAccordion } from "@desynth/web-components/dist/desynth-accordion.js";
|
|
3
|
+
import { DesynthAlert as DesynthAlertElement, defineCustomElement as defineDesynthAlert } from "@desynth/web-components/dist/desynth-alert.js";
|
|
4
|
+
import { DesynthBreadcrumb as DesynthBreadcrumbElement, defineCustomElement as defineDesynthBreadcrumb } from "@desynth/web-components/dist/desynth-breadcrumb.js";
|
|
5
|
+
import { DesynthButtonSlider as DesynthButtonSliderElement, defineCustomElement as defineDesynthButtonSlider } from "@desynth/web-components/dist/desynth-button-slider.js";
|
|
6
|
+
import { DesynthButton as DesynthButtonElement, defineCustomElement as defineDesynthButton } from "@desynth/web-components/dist/desynth-button.js";
|
|
7
|
+
import { DesynthCard as DesynthCardElement, defineCustomElement as defineDesynthCard } from "@desynth/web-components/dist/desynth-card.js";
|
|
8
|
+
import { DesynthCheckbox as DesynthCheckboxElement, defineCustomElement as defineDesynthCheckbox } from "@desynth/web-components/dist/desynth-checkbox.js";
|
|
9
|
+
import { DesynthDatePicker as DesynthDatePickerElement, defineCustomElement as defineDesynthDatePicker } from "@desynth/web-components/dist/desynth-date-picker.js";
|
|
10
|
+
import { DesynthDivider as DesynthDividerElement, defineCustomElement as defineDesynthDivider } from "@desynth/web-components/dist/desynth-divider.js";
|
|
11
|
+
import { DesynthDrawer as DesynthDrawerElement, defineCustomElement as defineDesynthDrawer } from "@desynth/web-components/dist/desynth-drawer.js";
|
|
12
|
+
import { DesynthDropFile as DesynthDropFileElement, defineCustomElement as defineDesynthDropFile } from "@desynth/web-components/dist/desynth-drop-file.js";
|
|
13
|
+
import { DesynthDropdown as DesynthDropdownElement, defineCustomElement as defineDesynthDropdown } from "@desynth/web-components/dist/desynth-dropdown.js";
|
|
14
|
+
import { DesynthForm as DesynthFormElement, defineCustomElement as defineDesynthForm } from "@desynth/web-components/dist/desynth-form.js";
|
|
15
|
+
import { DesynthGrid as DesynthGridElement, defineCustomElement as defineDesynthGrid } from "@desynth/web-components/dist/desynth-grid.js";
|
|
16
|
+
import { DesynthHeader as DesynthHeaderElement, defineCustomElement as defineDesynthHeader } from "@desynth/web-components/dist/desynth-header.js";
|
|
17
|
+
import { DesynthList as DesynthListElement, defineCustomElement as defineDesynthList } from "@desynth/web-components/dist/desynth-list.js";
|
|
18
|
+
import { DesynthLoader as DesynthLoaderElement, defineCustomElement as defineDesynthLoader } from "@desynth/web-components/dist/desynth-loader.js";
|
|
19
|
+
import { DesynthModal as DesynthModalElement, defineCustomElement as defineDesynthModal } from "@desynth/web-components/dist/desynth-modal.js";
|
|
20
|
+
import { DesynthMultiStepper as DesynthMultiStepperElement, defineCustomElement as defineDesynthMultiStepper } from "@desynth/web-components/dist/desynth-multi-stepper.js";
|
|
21
|
+
import { DesynthPaper as DesynthPaperElement, defineCustomElement as defineDesynthPaper } from "@desynth/web-components/dist/desynth-paper.js";
|
|
22
|
+
import { DesynthRating as DesynthRatingElement, defineCustomElement as defineDesynthRating } from "@desynth/web-components/dist/desynth-rating.js";
|
|
23
|
+
import { DesynthRenderer as DesynthRendererElement, defineCustomElement as defineDesynthRenderer } from "@desynth/web-components/dist/desynth-renderer.js";
|
|
24
|
+
import { DesynthSelect as DesynthSelectElement, defineCustomElement as defineDesynthSelect } from "@desynth/web-components/dist/desynth-select.js";
|
|
25
|
+
import { DesynthStepStepper as DesynthStepStepperElement, defineCustomElement as defineDesynthStepStepper } from "@desynth/web-components/dist/desynth-step-stepper.js";
|
|
26
|
+
import { DesynthSwitch as DesynthSwitchElement, defineCustomElement as defineDesynthSwitch } from "@desynth/web-components/dist/desynth-switch.js";
|
|
27
|
+
import { DesynthTable as DesynthTableElement, defineCustomElement as defineDesynthTable } from "@desynth/web-components/dist/desynth-table.js";
|
|
28
|
+
import { DesynthTextArea as DesynthTextAreaElement, defineCustomElement as defineDesynthTextArea } from "@desynth/web-components/dist/desynth-text-area.js";
|
|
29
|
+
import { DesynthTextInput as DesynthTextInputElement, defineCustomElement as defineDesynthTextInput } from "@desynth/web-components/dist/desynth-text-input.js";
|
|
30
|
+
import { DesynthText as DesynthTextElement, defineCustomElement as defineDesynthText } from "@desynth/web-components/dist/desynth-text.js";
|
|
31
|
+
import { DesynthTooltip as DesynthTooltipElement, defineCustomElement as defineDesynthTooltip } from "@desynth/web-components/dist/desynth-tooltip.js";
|
|
32
|
+
import { HorizontalCards as HorizontalCardsElement, defineCustomElement as defineHorizontalCards } from "@desynth/web-components/dist/horizontal-cards.js";
|
|
33
|
+
import { HtmlEditor as HtmlEditorElement, defineCustomElement as defineHtmlEditor } from "@desynth/web-components/dist/html-editor.js";
|
|
34
|
+
import { createComponent } from '@stencil/react-output-target/runtime';
|
|
35
|
+
import React from 'react';
|
|
36
|
+
export const DesynthAccordion = /*@__PURE__*/ createComponent({
|
|
37
|
+
tagName: 'desynth-accordion',
|
|
38
|
+
elementClass: DesynthAccordionElement,
|
|
39
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
40
|
+
react: React,
|
|
41
|
+
events: {},
|
|
42
|
+
defineCustomElement: defineDesynthAccordion
|
|
43
|
+
});
|
|
44
|
+
export const DesynthAlert = /*@__PURE__*/ createComponent({
|
|
45
|
+
tagName: 'desynth-alert',
|
|
46
|
+
elementClass: DesynthAlertElement,
|
|
47
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
48
|
+
react: React,
|
|
49
|
+
events: {
|
|
50
|
+
onHandleOpen: 'handleOpen',
|
|
51
|
+
onHandleClose: 'handleClose',
|
|
52
|
+
onHandleBeforeClose: 'handleBeforeClose'
|
|
53
|
+
},
|
|
54
|
+
defineCustomElement: defineDesynthAlert
|
|
55
|
+
});
|
|
56
|
+
export const DesynthBreadcrumb = /*@__PURE__*/ createComponent({
|
|
57
|
+
tagName: 'desynth-breadcrumb',
|
|
58
|
+
elementClass: DesynthBreadcrumbElement,
|
|
59
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
60
|
+
react: React,
|
|
61
|
+
events: {
|
|
62
|
+
onHandleInput: 'handleInput',
|
|
63
|
+
onHandleFocus: 'handleFocus',
|
|
64
|
+
onHandleBlur: 'handleBlur'
|
|
65
|
+
},
|
|
66
|
+
defineCustomElement: defineDesynthBreadcrumb
|
|
67
|
+
});
|
|
68
|
+
export const DesynthButton = /*@__PURE__*/ createComponent({
|
|
69
|
+
tagName: 'desynth-button',
|
|
70
|
+
elementClass: DesynthButtonElement,
|
|
71
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
72
|
+
react: React,
|
|
73
|
+
events: {
|
|
74
|
+
onHandleClick: 'handleClick',
|
|
75
|
+
onHandleFocus: 'handleFocus',
|
|
76
|
+
onHandleBlur: 'handleBlur'
|
|
77
|
+
},
|
|
78
|
+
defineCustomElement: defineDesynthButton
|
|
79
|
+
});
|
|
80
|
+
export const DesynthButtonSlider = /*@__PURE__*/ createComponent({
|
|
81
|
+
tagName: 'desynth-button-slider',
|
|
82
|
+
elementClass: DesynthButtonSliderElement,
|
|
83
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
84
|
+
react: React,
|
|
85
|
+
events: {},
|
|
86
|
+
defineCustomElement: defineDesynthButtonSlider
|
|
87
|
+
});
|
|
88
|
+
export const DesynthCard = /*@__PURE__*/ createComponent({
|
|
89
|
+
tagName: 'desynth-card',
|
|
90
|
+
elementClass: DesynthCardElement,
|
|
91
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
92
|
+
react: React,
|
|
93
|
+
events: {},
|
|
94
|
+
defineCustomElement: defineDesynthCard
|
|
95
|
+
});
|
|
96
|
+
export const DesynthCheckbox = /*@__PURE__*/ createComponent({
|
|
97
|
+
tagName: 'desynth-checkbox',
|
|
98
|
+
elementClass: DesynthCheckboxElement,
|
|
99
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
100
|
+
react: React,
|
|
101
|
+
events: { onHandleClick: 'handleClick' },
|
|
102
|
+
defineCustomElement: defineDesynthCheckbox
|
|
103
|
+
});
|
|
104
|
+
export const DesynthDatePicker = /*@__PURE__*/ createComponent({
|
|
105
|
+
tagName: 'desynth-date-picker',
|
|
106
|
+
elementClass: DesynthDatePickerElement,
|
|
107
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
108
|
+
react: React,
|
|
109
|
+
events: { onDateChanged: 'dateChanged' },
|
|
110
|
+
defineCustomElement: defineDesynthDatePicker
|
|
111
|
+
});
|
|
112
|
+
export const DesynthDivider = /*@__PURE__*/ createComponent({
|
|
113
|
+
tagName: 'desynth-divider',
|
|
114
|
+
elementClass: DesynthDividerElement,
|
|
115
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
116
|
+
react: React,
|
|
117
|
+
events: {},
|
|
118
|
+
defineCustomElement: defineDesynthDivider
|
|
119
|
+
});
|
|
120
|
+
export const DesynthDrawer = /*@__PURE__*/ createComponent({
|
|
121
|
+
tagName: 'desynth-drawer',
|
|
122
|
+
elementClass: DesynthDrawerElement,
|
|
123
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
124
|
+
react: React,
|
|
125
|
+
events: {
|
|
126
|
+
onHandleClick: 'handleClick',
|
|
127
|
+
onHandleFocus: 'handleFocus',
|
|
128
|
+
onHandleClose: 'handleClose'
|
|
129
|
+
},
|
|
130
|
+
defineCustomElement: defineDesynthDrawer
|
|
131
|
+
});
|
|
132
|
+
export const DesynthDropFile = /*@__PURE__*/ createComponent({
|
|
133
|
+
tagName: 'desynth-drop-file',
|
|
134
|
+
elementClass: DesynthDropFileElement,
|
|
135
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
136
|
+
react: React,
|
|
137
|
+
events: { onFilesDropped: 'filesDropped' },
|
|
138
|
+
defineCustomElement: defineDesynthDropFile
|
|
139
|
+
});
|
|
140
|
+
export const DesynthDropdown = /*@__PURE__*/ createComponent({
|
|
141
|
+
tagName: 'desynth-dropdown',
|
|
142
|
+
elementClass: DesynthDropdownElement,
|
|
143
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
144
|
+
react: React,
|
|
145
|
+
events: {},
|
|
146
|
+
defineCustomElement: defineDesynthDropdown
|
|
147
|
+
});
|
|
148
|
+
export const DesynthForm = /*@__PURE__*/ createComponent({
|
|
149
|
+
tagName: 'desynth-form',
|
|
150
|
+
elementClass: DesynthFormElement,
|
|
151
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
152
|
+
react: React,
|
|
153
|
+
events: {
|
|
154
|
+
onClickSubmit: 'clickSubmit',
|
|
155
|
+
onClickClear: 'clickClear',
|
|
156
|
+
onHandleChange: 'handleChange'
|
|
157
|
+
},
|
|
158
|
+
defineCustomElement: defineDesynthForm
|
|
159
|
+
});
|
|
160
|
+
export const DesynthGrid = /*@__PURE__*/ createComponent({
|
|
161
|
+
tagName: 'desynth-grid',
|
|
162
|
+
elementClass: DesynthGridElement,
|
|
163
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
164
|
+
react: React,
|
|
165
|
+
events: {},
|
|
166
|
+
defineCustomElement: defineDesynthGrid
|
|
167
|
+
});
|
|
168
|
+
export const DesynthHeader = /*@__PURE__*/ createComponent({
|
|
169
|
+
tagName: 'desynth-header',
|
|
170
|
+
elementClass: DesynthHeaderElement,
|
|
171
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
172
|
+
react: React,
|
|
173
|
+
events: {},
|
|
174
|
+
defineCustomElement: defineDesynthHeader
|
|
175
|
+
});
|
|
176
|
+
export const DesynthList = /*@__PURE__*/ createComponent({
|
|
177
|
+
tagName: 'desynth-list',
|
|
178
|
+
elementClass: DesynthListElement,
|
|
179
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
180
|
+
react: React,
|
|
181
|
+
events: { onItemClicked: 'itemClicked' },
|
|
182
|
+
defineCustomElement: defineDesynthList
|
|
183
|
+
});
|
|
184
|
+
export const DesynthLoader = /*@__PURE__*/ createComponent({
|
|
185
|
+
tagName: 'desynth-loader',
|
|
186
|
+
elementClass: DesynthLoaderElement,
|
|
187
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
188
|
+
react: React,
|
|
189
|
+
events: {},
|
|
190
|
+
defineCustomElement: defineDesynthLoader
|
|
191
|
+
});
|
|
192
|
+
export const DesynthModal = /*@__PURE__*/ createComponent({
|
|
193
|
+
tagName: 'desynth-modal',
|
|
194
|
+
elementClass: DesynthModalElement,
|
|
195
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
196
|
+
react: React,
|
|
197
|
+
events: {
|
|
198
|
+
onHandleOpen: 'handleOpen',
|
|
199
|
+
onHandleClose: 'handleClose',
|
|
200
|
+
onHandleBeforeClose: 'handleBeforeClose'
|
|
201
|
+
},
|
|
202
|
+
defineCustomElement: defineDesynthModal
|
|
203
|
+
});
|
|
204
|
+
export const DesynthMultiStepper = /*@__PURE__*/ createComponent({
|
|
205
|
+
tagName: 'desynth-multi-stepper',
|
|
206
|
+
elementClass: DesynthMultiStepperElement,
|
|
207
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
208
|
+
react: React,
|
|
209
|
+
events: { onHandleSubmit: 'handleSubmit' },
|
|
210
|
+
defineCustomElement: defineDesynthMultiStepper
|
|
211
|
+
});
|
|
212
|
+
export const DesynthPaper = /*@__PURE__*/ createComponent({
|
|
213
|
+
tagName: 'desynth-paper',
|
|
214
|
+
elementClass: DesynthPaperElement,
|
|
215
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
216
|
+
react: React,
|
|
217
|
+
events: {},
|
|
218
|
+
defineCustomElement: defineDesynthPaper
|
|
219
|
+
});
|
|
220
|
+
export const DesynthRating = /*@__PURE__*/ createComponent({
|
|
221
|
+
tagName: 'desynth-rating',
|
|
222
|
+
elementClass: DesynthRatingElement,
|
|
223
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
224
|
+
react: React,
|
|
225
|
+
events: { onHandleChange: 'handleChange' },
|
|
226
|
+
defineCustomElement: defineDesynthRating
|
|
227
|
+
});
|
|
228
|
+
export const DesynthRenderer = /*@__PURE__*/ createComponent({
|
|
229
|
+
tagName: 'desynth-renderer',
|
|
230
|
+
elementClass: DesynthRendererElement,
|
|
231
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
232
|
+
react: React,
|
|
233
|
+
events: {},
|
|
234
|
+
defineCustomElement: defineDesynthRenderer
|
|
235
|
+
});
|
|
236
|
+
export const DesynthSelect = /*@__PURE__*/ createComponent({
|
|
237
|
+
tagName: 'desynth-select',
|
|
238
|
+
elementClass: DesynthSelectElement,
|
|
239
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
240
|
+
react: React,
|
|
241
|
+
events: {
|
|
242
|
+
onHandleChange: 'handleChange',
|
|
243
|
+
onHandleInput: 'handleInput',
|
|
244
|
+
onHandleFocus: 'handleFocus'
|
|
245
|
+
},
|
|
246
|
+
defineCustomElement: defineDesynthSelect
|
|
247
|
+
});
|
|
248
|
+
export const DesynthStepStepper = /*@__PURE__*/ createComponent({
|
|
249
|
+
tagName: 'desynth-step-stepper',
|
|
250
|
+
elementClass: DesynthStepStepperElement,
|
|
251
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
252
|
+
react: React,
|
|
253
|
+
events: {},
|
|
254
|
+
defineCustomElement: defineDesynthStepStepper
|
|
255
|
+
});
|
|
256
|
+
export const DesynthSwitch = /*@__PURE__*/ createComponent({
|
|
257
|
+
tagName: 'desynth-switch',
|
|
258
|
+
elementClass: DesynthSwitchElement,
|
|
259
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
260
|
+
react: React,
|
|
261
|
+
events: {
|
|
262
|
+
onHandleClick: 'handleClick',
|
|
263
|
+
onHandleInput: 'handleInput',
|
|
264
|
+
onHandleFocus: 'handleFocus',
|
|
265
|
+
onHandleBlur: 'handleBlur'
|
|
266
|
+
},
|
|
267
|
+
defineCustomElement: defineDesynthSwitch
|
|
268
|
+
});
|
|
269
|
+
export const DesynthTable = /*@__PURE__*/ createComponent({
|
|
270
|
+
tagName: 'desynth-table',
|
|
271
|
+
elementClass: DesynthTableElement,
|
|
272
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
273
|
+
react: React,
|
|
274
|
+
events: {
|
|
275
|
+
onChangeRowsPerPage: 'changeRowsPerPage',
|
|
276
|
+
onGetDataNextPage: 'getDataNextPage',
|
|
277
|
+
onRowEvent: 'rowEvent',
|
|
278
|
+
onDropEvent: 'dropEvent'
|
|
279
|
+
},
|
|
280
|
+
defineCustomElement: defineDesynthTable
|
|
281
|
+
});
|
|
282
|
+
export const DesynthText = /*@__PURE__*/ createComponent({
|
|
283
|
+
tagName: 'desynth-text',
|
|
284
|
+
elementClass: DesynthTextElement,
|
|
285
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
286
|
+
react: React,
|
|
287
|
+
events: {},
|
|
288
|
+
defineCustomElement: defineDesynthText
|
|
289
|
+
});
|
|
290
|
+
export const DesynthTextArea = /*@__PURE__*/ createComponent({
|
|
291
|
+
tagName: 'desynth-text-area',
|
|
292
|
+
elementClass: DesynthTextAreaElement,
|
|
293
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
294
|
+
react: React,
|
|
295
|
+
events: {
|
|
296
|
+
onHandleChange: 'handleChange',
|
|
297
|
+
onHandleInput: 'handleInput',
|
|
298
|
+
onHandleFocus: 'handleFocus',
|
|
299
|
+
onHandleBlur: 'handleBlur'
|
|
300
|
+
},
|
|
301
|
+
defineCustomElement: defineDesynthTextArea
|
|
302
|
+
});
|
|
303
|
+
export const DesynthTextInput = /*@__PURE__*/ createComponent({
|
|
304
|
+
tagName: 'desynth-text-input',
|
|
305
|
+
elementClass: DesynthTextInputElement,
|
|
306
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
307
|
+
react: React,
|
|
308
|
+
events: {
|
|
309
|
+
onHandleChange: 'handleChange',
|
|
310
|
+
onHandleInput: 'handleInput',
|
|
311
|
+
onHandleFocus: 'handleFocus',
|
|
312
|
+
onHandleBlur: 'handleBlur'
|
|
313
|
+
},
|
|
314
|
+
defineCustomElement: defineDesynthTextInput
|
|
315
|
+
});
|
|
316
|
+
export const DesynthTooltip = /*@__PURE__*/ createComponent({
|
|
317
|
+
tagName: 'desynth-tooltip',
|
|
318
|
+
elementClass: DesynthTooltipElement,
|
|
319
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
320
|
+
react: React,
|
|
321
|
+
events: {},
|
|
322
|
+
defineCustomElement: defineDesynthTooltip
|
|
323
|
+
});
|
|
324
|
+
export const HorizontalCards = /*@__PURE__*/ createComponent({
|
|
325
|
+
tagName: 'horizontal-cards',
|
|
326
|
+
elementClass: HorizontalCardsElement,
|
|
327
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
328
|
+
react: React,
|
|
329
|
+
events: {},
|
|
330
|
+
defineCustomElement: defineHorizontalCards
|
|
331
|
+
});
|
|
332
|
+
export const HtmlEditor = /*@__PURE__*/ createComponent({
|
|
333
|
+
tagName: 'html-editor',
|
|
334
|
+
elementClass: HtmlEditorElement,
|
|
335
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
336
|
+
react: React,
|
|
337
|
+
events: { onHtmlChanged: 'htmlChanged' },
|
|
338
|
+
defineCustomElement: defineHtmlEditor
|
|
339
|
+
});
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components.js';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components.js';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface HTMLStencilElement extends HTMLElement {
|
|
3
|
+
componentOnReady(): Promise<this>;
|
|
4
|
+
}
|
|
5
|
+
interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
|
|
6
|
+
forwardedRef: React.RefObject<ElementType>;
|
|
7
|
+
ref?: React.Ref<any>;
|
|
8
|
+
}
|
|
9
|
+
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>>;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React, { createElement } from 'react';
|
|
13
|
+
import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
|
|
14
|
+
export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
|
|
15
|
+
if (defineCustomElement !== undefined) {
|
|
16
|
+
defineCustomElement();
|
|
17
|
+
}
|
|
18
|
+
const displayName = dashToPascalCase(tagName);
|
|
19
|
+
const ReactComponent = class extends React.Component {
|
|
20
|
+
constructor(props) {
|
|
21
|
+
super(props);
|
|
22
|
+
this.setComponentElRef = (element) => {
|
|
23
|
+
this.componentEl = element;
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
componentDidMount() {
|
|
27
|
+
this.componentDidUpdate(this.props);
|
|
28
|
+
}
|
|
29
|
+
componentDidUpdate(prevProps) {
|
|
30
|
+
attachProps(this.componentEl, this.props, prevProps);
|
|
31
|
+
}
|
|
32
|
+
render() {
|
|
33
|
+
const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
|
|
34
|
+
let propsToPass = Object.keys(cProps).reduce((acc, name) => {
|
|
35
|
+
const value = cProps[name];
|
|
36
|
+
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
37
|
+
const eventName = name.substring(2).toLowerCase();
|
|
38
|
+
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
|
|
39
|
+
acc[name] = value;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
// we should only render strings, booleans, and numbers as attrs in html.
|
|
44
|
+
// objects, functions, arrays etc get synced via properties on mount.
|
|
45
|
+
const type = typeof value;
|
|
46
|
+
if (type === 'string' || type === 'boolean' || type === 'number') {
|
|
47
|
+
acc[camelToDashCase(name)] = value;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
return acc;
|
|
51
|
+
}, {});
|
|
52
|
+
if (manipulatePropsFunction) {
|
|
53
|
+
propsToPass = manipulatePropsFunction(this.props, propsToPass);
|
|
54
|
+
}
|
|
55
|
+
const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
|
|
56
|
+
/**
|
|
57
|
+
* We use createElement here instead of
|
|
58
|
+
* React.createElement to work around a
|
|
59
|
+
* bug in Vite (https://github.com/vitejs/vite/issues/6104).
|
|
60
|
+
* React.createElement causes all elements to be rendered
|
|
61
|
+
* as <tagname> instead of the actual Web Component.
|
|
62
|
+
*/
|
|
63
|
+
return createElement(tagName, newProps, children);
|
|
64
|
+
}
|
|
65
|
+
static get displayName() {
|
|
66
|
+
return displayName;
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
// If context was passed to createReactComponent then conditionally add it to the Component Class
|
|
70
|
+
if (ReactComponentContext) {
|
|
71
|
+
ReactComponent.contextType = ReactComponentContext;
|
|
72
|
+
}
|
|
73
|
+
return createForwardRef(ReactComponent, displayName);
|
|
74
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { OverlayEventDetail } from './interfaces';
|
|
3
|
+
import { StencilReactForwardedRef } from './utils';
|
|
4
|
+
interface OverlayElement extends HTMLElement {
|
|
5
|
+
present: () => Promise<void>;
|
|
6
|
+
dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
|
|
7
|
+
}
|
|
8
|
+
export interface ReactOverlayProps {
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
isOpen: boolean;
|
|
11
|
+
onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
12
|
+
onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
13
|
+
onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
14
|
+
onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
15
|
+
}
|
|
16
|
+
export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
|
|
17
|
+
create: (options: any) => Promise<OverlayType>;
|
|
18
|
+
}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
|
|
19
|
+
forwardedRef?: StencilReactForwardedRef<OverlayType> | undefined;
|
|
20
|
+
}> & React.RefAttributes<OverlayType>>;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React from 'react';
|
|
13
|
+
import ReactDOM from 'react-dom';
|
|
14
|
+
import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
|
|
15
|
+
export const createOverlayComponent = (tagName, controller, customElement) => {
|
|
16
|
+
defineCustomElement(tagName, customElement);
|
|
17
|
+
const displayName = dashToPascalCase(tagName);
|
|
18
|
+
const didDismissEventName = `on${displayName}DidDismiss`;
|
|
19
|
+
const didPresentEventName = `on${displayName}DidPresent`;
|
|
20
|
+
const willDismissEventName = `on${displayName}WillDismiss`;
|
|
21
|
+
const willPresentEventName = `on${displayName}WillPresent`;
|
|
22
|
+
let isDismissing = false;
|
|
23
|
+
class Overlay extends React.Component {
|
|
24
|
+
constructor(props) {
|
|
25
|
+
super(props);
|
|
26
|
+
if (typeof document !== 'undefined') {
|
|
27
|
+
this.el = document.createElement('div');
|
|
28
|
+
}
|
|
29
|
+
this.handleDismiss = this.handleDismiss.bind(this);
|
|
30
|
+
}
|
|
31
|
+
static get displayName() {
|
|
32
|
+
return displayName;
|
|
33
|
+
}
|
|
34
|
+
componentDidMount() {
|
|
35
|
+
if (this.props.isOpen) {
|
|
36
|
+
this.present();
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
componentWillUnmount() {
|
|
40
|
+
if (this.overlay) {
|
|
41
|
+
this.overlay.dismiss();
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
handleDismiss(event) {
|
|
45
|
+
if (this.props.onDidDismiss) {
|
|
46
|
+
this.props.onDidDismiss(event);
|
|
47
|
+
}
|
|
48
|
+
setRef(this.props.forwardedRef, null);
|
|
49
|
+
}
|
|
50
|
+
shouldComponentUpdate(nextProps) {
|
|
51
|
+
// Check if the overlay component is about to dismiss
|
|
52
|
+
if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
|
|
53
|
+
isDismissing = true;
|
|
54
|
+
}
|
|
55
|
+
return true;
|
|
56
|
+
}
|
|
57
|
+
async componentDidUpdate(prevProps) {
|
|
58
|
+
if (this.overlay) {
|
|
59
|
+
attachProps(this.overlay, this.props, prevProps);
|
|
60
|
+
}
|
|
61
|
+
if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
|
|
62
|
+
this.present(prevProps);
|
|
63
|
+
}
|
|
64
|
+
if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
|
|
65
|
+
await this.overlay.dismiss();
|
|
66
|
+
isDismissing = false;
|
|
67
|
+
/**
|
|
68
|
+
* Now that the overlay is dismissed
|
|
69
|
+
* we need to render again so that any
|
|
70
|
+
* inner components will be unmounted
|
|
71
|
+
*/
|
|
72
|
+
this.forceUpdate();
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
async present(prevProps) {
|
|
76
|
+
const _a = this.props, { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent } = _a, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss", "onDidPresent", "onWillDismiss", "onWillPresent"]);
|
|
77
|
+
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) });
|
|
78
|
+
this.overlay = await controller.create(Object.assign(Object.assign({}, elementProps), { component: this.el, componentProps: {} }));
|
|
79
|
+
setRef(this.props.forwardedRef, this.overlay);
|
|
80
|
+
attachProps(this.overlay, elementProps, prevProps);
|
|
81
|
+
await this.overlay.present();
|
|
82
|
+
}
|
|
83
|
+
render() {
|
|
84
|
+
/**
|
|
85
|
+
* Continue to render the component even when
|
|
86
|
+
* overlay is dismissing otherwise component
|
|
87
|
+
* will be hidden before animation is done.
|
|
88
|
+
*/
|
|
89
|
+
return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
return React.forwardRef((props, ref) => {
|
|
93
|
+
return React.createElement(Overlay, Object.assign({}, props, { forwardedRef: ref }));
|
|
94
|
+
});
|
|
95
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export interface EventEmitter<T = any> {
|
|
2
|
+
emit: (data?: T) => CustomEvent<T>;
|
|
3
|
+
}
|
|
4
|
+
export interface StyleReactProps {
|
|
5
|
+
class?: string;
|
|
6
|
+
className?: string;
|
|
7
|
+
style?: {
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
export interface OverlayEventDetail<T = any> {
|
|
12
|
+
data?: T;
|
|
13
|
+
role?: string;
|
|
14
|
+
}
|
|
15
|
+
export interface OverlayInterface {
|
|
16
|
+
el: HTMLElement;
|
|
17
|
+
animated: boolean;
|
|
18
|
+
keyboardClose: boolean;
|
|
19
|
+
overlayIndex: number;
|
|
20
|
+
presented: boolean;
|
|
21
|
+
enterAnimation?: any;
|
|
22
|
+
leaveAnimation?: any;
|
|
23
|
+
didPresent: EventEmitter<void>;
|
|
24
|
+
willPresent: EventEmitter<void>;
|
|
25
|
+
willDismiss: EventEmitter<OverlayEventDetail>;
|
|
26
|
+
didDismiss: EventEmitter<OverlayEventDetail>;
|
|
27
|
+
present(): Promise<void>;
|
|
28
|
+
dismiss(data?: any, role?: string): Promise<boolean>;
|
|
29
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
|
|
2
|
+
export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
|
|
3
|
+
/**
|
|
4
|
+
* Transforms a React event name to a browser event name.
|
|
5
|
+
*/
|
|
6
|
+
export declare const transformReactEventName: (eventNameSuffix: string) => string;
|
|
7
|
+
/**
|
|
8
|
+
* Checks if an event is supported in the current execution environment.
|
|
9
|
+
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
|
10
|
+
*/
|
|
11
|
+
export declare const isCoveredByReact: (eventNameSuffix: string) => boolean;
|
|
12
|
+
export declare const syncEvent: (node: Element & {
|
|
13
|
+
__events?: {
|
|
14
|
+
[key: string]: ((e: Event) => any) | undefined;
|
|
15
|
+
} | undefined;
|
|
16
|
+
}, eventName: string, newEventHandler?: ((e: Event) => any) | undefined) => void;
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { camelToDashCase } from './case';
|
|
2
|
+
export const attachProps = (node, newProps, oldProps = {}) => {
|
|
3
|
+
// some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
|
|
4
|
+
if (node instanceof Element) {
|
|
5
|
+
// add any classes in className to the class list
|
|
6
|
+
const className = getClassName(node.classList, newProps, oldProps);
|
|
7
|
+
if (className !== '') {
|
|
8
|
+
node.className = className;
|
|
9
|
+
}
|
|
10
|
+
Object.keys(newProps).forEach((name) => {
|
|
11
|
+
if (name === 'children' ||
|
|
12
|
+
name === 'style' ||
|
|
13
|
+
name === 'ref' ||
|
|
14
|
+
name === 'class' ||
|
|
15
|
+
name === 'className' ||
|
|
16
|
+
name === 'forwardedRef') {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
20
|
+
const eventName = name.substring(2);
|
|
21
|
+
const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
|
|
22
|
+
if (!isCoveredByReact(eventNameLc)) {
|
|
23
|
+
syncEvent(node, eventNameLc, newProps[name]);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
node[name] = newProps[name];
|
|
28
|
+
const propType = typeof newProps[name];
|
|
29
|
+
if (propType === 'string') {
|
|
30
|
+
node.setAttribute(camelToDashCase(name), newProps[name]);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
export const getClassName = (classList, newProps, oldProps) => {
|
|
37
|
+
const newClassProp = newProps.className || newProps.class;
|
|
38
|
+
const oldClassProp = oldProps.className || oldProps.class;
|
|
39
|
+
// map the classes to Maps for performance
|
|
40
|
+
const currentClasses = arrayToMap(classList);
|
|
41
|
+
const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
|
|
42
|
+
const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
|
|
43
|
+
const finalClassNames = [];
|
|
44
|
+
// loop through each of the current classes on the component
|
|
45
|
+
// to see if it should be a part of the classNames added
|
|
46
|
+
currentClasses.forEach((currentClass) => {
|
|
47
|
+
if (incomingPropClasses.has(currentClass)) {
|
|
48
|
+
// add it as its already included in classnames coming in from newProps
|
|
49
|
+
finalClassNames.push(currentClass);
|
|
50
|
+
incomingPropClasses.delete(currentClass);
|
|
51
|
+
}
|
|
52
|
+
else if (!oldPropClasses.has(currentClass)) {
|
|
53
|
+
// add it as it has NOT been removed by user
|
|
54
|
+
finalClassNames.push(currentClass);
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
incomingPropClasses.forEach((s) => finalClassNames.push(s));
|
|
58
|
+
return finalClassNames.join(' ');
|
|
59
|
+
};
|
|
60
|
+
/**
|
|
61
|
+
* Transforms a React event name to a browser event name.
|
|
62
|
+
*/
|
|
63
|
+
export const transformReactEventName = (eventNameSuffix) => {
|
|
64
|
+
switch (eventNameSuffix) {
|
|
65
|
+
case 'doubleclick':
|
|
66
|
+
return 'dblclick';
|
|
67
|
+
}
|
|
68
|
+
return eventNameSuffix;
|
|
69
|
+
};
|
|
70
|
+
/**
|
|
71
|
+
* Checks if an event is supported in the current execution environment.
|
|
72
|
+
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
|
73
|
+
*/
|
|
74
|
+
export const isCoveredByReact = (eventNameSuffix) => {
|
|
75
|
+
if (typeof document === 'undefined') {
|
|
76
|
+
return true;
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
const eventName = 'on' + transformReactEventName(eventNameSuffix);
|
|
80
|
+
let isSupported = eventName in document;
|
|
81
|
+
if (!isSupported) {
|
|
82
|
+
const element = document.createElement('div');
|
|
83
|
+
element.setAttribute(eventName, 'return;');
|
|
84
|
+
isSupported = typeof element[eventName] === 'function';
|
|
85
|
+
}
|
|
86
|
+
return isSupported;
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
export const syncEvent = (node, eventName, newEventHandler) => {
|
|
90
|
+
const eventStore = node.__events || (node.__events = {});
|
|
91
|
+
const oldEventHandler = eventStore[eventName];
|
|
92
|
+
// Remove old listener so they don't double up.
|
|
93
|
+
if (oldEventHandler) {
|
|
94
|
+
node.removeEventListener(eventName, oldEventHandler);
|
|
95
|
+
}
|
|
96
|
+
// Bind new listener.
|
|
97
|
+
node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
|
|
98
|
+
if (newEventHandler) {
|
|
99
|
+
newEventHandler.call(this, e);
|
|
100
|
+
}
|
|
101
|
+
}));
|
|
102
|
+
};
|
|
103
|
+
const arrayToMap = (arr) => {
|
|
104
|
+
const map = new Map();
|
|
105
|
+
arr.forEach((s) => map.set(s, s));
|
|
106
|
+
return map;
|
|
107
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export const isDevMode = () => {
|
|
2
|
+
return process && process.env && process.env.NODE_ENV === 'development';
|
|
3
|
+
};
|
|
4
|
+
const warnings = {};
|
|
5
|
+
export const deprecationWarning = (key, message) => {
|
|
6
|
+
if (isDevMode()) {
|
|
7
|
+
if (!warnings[key]) {
|
|
8
|
+
console.warn(message);
|
|
9
|
+
warnings[key] = true;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { StyleReactProps } from '../interfaces';
|
|
3
|
+
export type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
|
|
4
|
+
export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
|
|
5
|
+
export declare const setRef: (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => void;
|
|
6
|
+
export declare const mergeRefs: (...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]) => React.RefCallback<any>;
|
|
7
|
+
export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
|
|
8
|
+
export declare const defineCustomElement: (tagName: string, customElement: any) => void;
|
|
9
|
+
export * from './attachProps';
|
|
10
|
+
export * from './case';
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const setRef = (ref, value) => {
|
|
3
|
+
if (typeof ref === 'function') {
|
|
4
|
+
ref(value);
|
|
5
|
+
}
|
|
6
|
+
else if (ref != null) {
|
|
7
|
+
// Cast as a MutableRef so we can assign current
|
|
8
|
+
ref.current = value;
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
export const mergeRefs = (...refs) => {
|
|
12
|
+
return (value) => {
|
|
13
|
+
refs.forEach((ref) => {
|
|
14
|
+
setRef(ref, value);
|
|
15
|
+
});
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export const createForwardRef = (ReactComponent, displayName) => {
|
|
19
|
+
const forwardRef = (props, ref) => {
|
|
20
|
+
return React.createElement(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
|
|
21
|
+
};
|
|
22
|
+
forwardRef.displayName = displayName;
|
|
23
|
+
return React.forwardRef(forwardRef);
|
|
24
|
+
};
|
|
25
|
+
export const defineCustomElement = (tagName, customElement) => {
|
|
26
|
+
if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
|
|
27
|
+
customElements.define(tagName, customElement);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
export * from './attachProps';
|
|
31
|
+
export * from './case';
|
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@desynth/web-components-react",
|
|
3
|
+
"sideEffects": false,
|
|
4
|
+
"version": "01.28.26-alpha.1",
|
|
5
|
+
"description": "React proxy for @desynth/web-components",
|
|
6
|
+
"license": "MPL-2.0",
|
|
7
|
+
"homepage": "https://github.com/desynth/desynth-web-components#readme",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/desynth/desynth-web-components.git"
|
|
11
|
+
},
|
|
12
|
+
"bugs": {
|
|
13
|
+
"url": "https://github.com/desynth/desynth-web-components/issues"
|
|
14
|
+
},
|
|
15
|
+
"publishConfig": {
|
|
16
|
+
"access": "public"
|
|
17
|
+
},
|
|
18
|
+
"scripts": {
|
|
19
|
+
"build": "npm run tsc",
|
|
20
|
+
"tsc": "tsc -p ."
|
|
21
|
+
},
|
|
22
|
+
"main": "./dist/index.js",
|
|
23
|
+
"module": "./dist/index.js",
|
|
24
|
+
"types": "./dist/index.d.ts",
|
|
25
|
+
"files": [
|
|
26
|
+
"dist/"
|
|
27
|
+
],
|
|
28
|
+
"type": "module",
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"@types/react": "19.2.4",
|
|
31
|
+
"@types/react-dom": "19.2.3"
|
|
32
|
+
},
|
|
33
|
+
"dependencies": {
|
|
34
|
+
"react": ">=19.2.0",
|
|
35
|
+
"react-dom": ">=19.2.0",
|
|
36
|
+
"typescript": "5.2.2"
|
|
37
|
+
},
|
|
38
|
+
"peerDependencies": {
|
|
39
|
+
"react": ">=19.2.0",
|
|
40
|
+
"react-dom": ">=19.2.0"
|
|
41
|
+
}
|
|
42
|
+
}
|
package/readme.md
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
# desynth-web-components - React Proxy
|
|
2
|
+
This is the desynth utility Stencil web component library for general purposes
|
|
3
|
+
|
|
4
|
+
```bash
|
|
5
|
+
HTML Web Components
|
|
6
|
+
Compatible with:
|
|
7
|
+
ReactJS
|
|
8
|
+
Vue
|
|
9
|
+
Angular
|
|
10
|
+
Svelte
|
|
11
|
+
Ionic
|
|
12
|
+
```
|
|
13
|
+
## General Solution's Architecture Design
|
|
14
|
+

|
|
15
|
+
|