tyrell-react 1.0.0-RC6
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/LICENSE +21 -0
- package/README.md +410 -0
- package/dist/components/TyButton.d.ts +50 -0
- package/dist/components/TyButton.d.ts.map +1 -0
- package/dist/components/TyButton.js +68 -0
- package/dist/components/TyButton.js.map +1 -0
- package/dist/components/TyCalendar.d.ts +63 -0
- package/dist/components/TyCalendar.d.ts.map +1 -0
- package/dist/components/TyCalendar.js +127 -0
- package/dist/components/TyCalendar.js.map +1 -0
- package/dist/components/TyCalendarMonth.d.ts +32 -0
- package/dist/components/TyCalendarMonth.d.ts.map +1 -0
- package/dist/components/TyCalendarMonth.js +54 -0
- package/dist/components/TyCalendarMonth.js.map +1 -0
- package/dist/components/TyCalendarNavigation.d.ts +21 -0
- package/dist/components/TyCalendarNavigation.d.ts.map +1 -0
- package/dist/components/TyCalendarNavigation.js +50 -0
- package/dist/components/TyCalendarNavigation.js.map +1 -0
- package/dist/components/TyCheckbox.d.ts +39 -0
- package/dist/components/TyCheckbox.d.ts.map +1 -0
- package/dist/components/TyCheckbox.js +83 -0
- package/dist/components/TyCheckbox.js.map +1 -0
- package/dist/components/TyCopy.d.ts +21 -0
- package/dist/components/TyCopy.d.ts.map +1 -0
- package/dist/components/TyCopy.js +42 -0
- package/dist/components/TyCopy.js.map +1 -0
- package/dist/components/TyDatePicker.d.ts +45 -0
- package/dist/components/TyDatePicker.d.ts.map +1 -0
- package/dist/components/TyDatePicker.js +119 -0
- package/dist/components/TyDatePicker.js.map +1 -0
- package/dist/components/TyDropdown.d.ts +56 -0
- package/dist/components/TyDropdown.d.ts.map +1 -0
- package/dist/components/TyDropdown.js +110 -0
- package/dist/components/TyDropdown.js.map +1 -0
- package/dist/components/TyIcon.d.ts +17 -0
- package/dist/components/TyIcon.d.ts.map +1 -0
- package/dist/components/TyIcon.js +41 -0
- package/dist/components/TyIcon.js.map +1 -0
- package/dist/components/TyInput.d.ts +65 -0
- package/dist/components/TyInput.d.ts.map +1 -0
- package/dist/components/TyInput.js +127 -0
- package/dist/components/TyInput.js.map +1 -0
- package/dist/components/TyModal.d.ts +29 -0
- package/dist/components/TyModal.d.ts.map +1 -0
- package/dist/components/TyModal.js +74 -0
- package/dist/components/TyModal.js.map +1 -0
- package/dist/components/TyMultiselect.d.ts +51 -0
- package/dist/components/TyMultiselect.d.ts.map +1 -0
- package/dist/components/TyMultiselect.js +107 -0
- package/dist/components/TyMultiselect.js.map +1 -0
- package/dist/components/TyOption.d.ts +10 -0
- package/dist/components/TyOption.d.ts.map +1 -0
- package/dist/components/TyOption.js +25 -0
- package/dist/components/TyOption.js.map +1 -0
- package/dist/components/TyPopup.d.ts +24 -0
- package/dist/components/TyPopup.d.ts.map +1 -0
- package/dist/components/TyPopup.js +61 -0
- package/dist/components/TyPopup.js.map +1 -0
- package/dist/components/TyRadio.d.ts +20 -0
- package/dist/components/TyRadio.d.ts.map +1 -0
- package/dist/components/TyRadio.js +46 -0
- package/dist/components/TyRadio.js.map +1 -0
- package/dist/components/TyRadioGroup.d.ts +40 -0
- package/dist/components/TyRadioGroup.d.ts.map +1 -0
- package/dist/components/TyRadioGroup.js +58 -0
- package/dist/components/TyRadioGroup.js.map +1 -0
- package/dist/components/TyResizeObserver.d.ts +11 -0
- package/dist/components/TyResizeObserver.d.ts.map +1 -0
- package/dist/components/TyResizeObserver.js +28 -0
- package/dist/components/TyResizeObserver.js.map +1 -0
- package/dist/components/TyScrollContainer.d.ts +25 -0
- package/dist/components/TyScrollContainer.d.ts.map +1 -0
- package/dist/components/TyScrollContainer.js +43 -0
- package/dist/components/TyScrollContainer.js.map +1 -0
- package/dist/components/TyStep.d.ts +17 -0
- package/dist/components/TyStep.d.ts.map +1 -0
- package/dist/components/TyStep.js +35 -0
- package/dist/components/TyStep.js.map +1 -0
- package/dist/components/TySwitch.d.ts +35 -0
- package/dist/components/TySwitch.d.ts.map +1 -0
- package/dist/components/TySwitch.js +69 -0
- package/dist/components/TySwitch.js.map +1 -0
- package/dist/components/TyTab.d.ts +13 -0
- package/dist/components/TyTab.d.ts.map +1 -0
- package/dist/components/TyTab.js +32 -0
- package/dist/components/TyTab.js.map +1 -0
- package/dist/components/TyTabs.d.ts +23 -0
- package/dist/components/TyTabs.d.ts.map +1 -0
- package/dist/components/TyTabs.js +48 -0
- package/dist/components/TyTabs.js.map +1 -0
- package/dist/components/TyTag.d.ts +22 -0
- package/dist/components/TyTag.d.ts.map +1 -0
- package/dist/components/TyTag.js +45 -0
- package/dist/components/TyTag.js.map +1 -0
- package/dist/components/TyTextarea.d.ts +37 -0
- package/dist/components/TyTextarea.d.ts.map +1 -0
- package/dist/components/TyTextarea.js +113 -0
- package/dist/components/TyTextarea.js.map +1 -0
- package/dist/components/TyTooltip.d.ts +17 -0
- package/dist/components/TyTooltip.d.ts.map +1 -0
- package/dist/components/TyTooltip.js +40 -0
- package/dist/components/TyTooltip.js.map +1 -0
- package/dist/components/TyWizard.d.ts +26 -0
- package/dist/components/TyWizard.d.ts.map +1 -0
- package/dist/components/TyWizard.js +50 -0
- package/dist/components/TyWizard.js.map +1 -0
- package/dist/components/index.d.ts +105 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/index.js +112 -0
- package/dist/components/index.js.map +1 -0
- package/dist/utils/react-version.d.ts +2 -0
- package/dist/utils/react-version.d.ts.map +1 -0
- package/dist/utils/react-version.js +8 -0
- package/dist/utils/react-version.js.map +1 -0
- package/package.json +46 -0
- package/src/components/EventConventionTest.tsx +155 -0
- package/src/components/TyButton.tsx +145 -0
- package/src/components/TyCalendar.tsx +248 -0
- package/src/components/TyCalendarMonth.tsx +108 -0
- package/src/components/TyCalendarNavigation.tsx +91 -0
- package/src/components/TyCheckbox.tsx +152 -0
- package/src/components/TyCopy.tsx +78 -0
- package/src/components/TyDatePicker.tsx +220 -0
- package/src/components/TyDropdown.tsx +225 -0
- package/src/components/TyIcon.tsx +72 -0
- package/src/components/TyInput.tsx +232 -0
- package/src/components/TyModal.tsx +142 -0
- package/src/components/TyMultiselect.tsx +203 -0
- package/src/components/TyOption.tsx +42 -0
- package/src/components/TyPopup.tsx +111 -0
- package/src/components/TyRadio.tsx +70 -0
- package/src/components/TyRadioGroup.tsx +121 -0
- package/src/components/TyResizeObserver.tsx +54 -0
- package/src/components/TyScrollContainer.tsx +87 -0
- package/src/components/TyStep.tsx +71 -0
- package/src/components/TySwitch.tsx +122 -0
- package/src/components/TyTab.tsx +63 -0
- package/src/components/TyTabs.tsx +93 -0
- package/src/components/TyTag.tsx +79 -0
- package/src/components/TyTextarea.tsx +177 -0
- package/src/components/TyTooltip.tsx +83 -0
- package/src/components/TyWizard.tsx +99 -0
- package/src/components/index.ts +251 -0
- package/src/utils/react-version.ts +8 -0
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import React, { useEffect, useRef, useCallback } from 'react';
|
|
2
|
+
import { needsPropertyBridge } from '../utils/react-version';
|
|
3
|
+
// React wrapper for ty-date-picker web component
|
|
4
|
+
export const TyDatePicker = React.forwardRef(({ value, size, flavor, label, placeholder, required, disabled, name, clearable, format, locale, withTime, onChange, onOpen, onClose, ...props }, ref) => {
|
|
5
|
+
const elementRef = useRef(null);
|
|
6
|
+
// Handle ref forwarding
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
if (ref && elementRef.current) {
|
|
9
|
+
if (typeof ref === 'function') {
|
|
10
|
+
ref(elementRef.current);
|
|
11
|
+
}
|
|
12
|
+
else {
|
|
13
|
+
ref.current = elementRef.current;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}, [ref]);
|
|
17
|
+
// Sync value property with the web component.
|
|
18
|
+
// React 18 workaround: prop-to-property bridging is unreliable for empty
|
|
19
|
+
// strings on custom elements. React 19+ handles this natively.
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
if (!needsPropertyBridge)
|
|
22
|
+
return;
|
|
23
|
+
const element = elementRef.current;
|
|
24
|
+
if (element && value !== undefined) {
|
|
25
|
+
// Set the value property directly on the element
|
|
26
|
+
element.value = value || '';
|
|
27
|
+
}
|
|
28
|
+
}, [value]);
|
|
29
|
+
// Handle change events
|
|
30
|
+
const handleChange = useCallback((event) => {
|
|
31
|
+
const customEvent = event;
|
|
32
|
+
if (onChange) {
|
|
33
|
+
onChange(customEvent);
|
|
34
|
+
}
|
|
35
|
+
}, [onChange]);
|
|
36
|
+
// Handle open events
|
|
37
|
+
const handleOpen = useCallback((event) => {
|
|
38
|
+
const customEvent = event;
|
|
39
|
+
if (onOpen) {
|
|
40
|
+
onOpen(customEvent);
|
|
41
|
+
}
|
|
42
|
+
}, [onOpen]);
|
|
43
|
+
// Handle close events
|
|
44
|
+
const handleClose = useCallback((event) => {
|
|
45
|
+
const customEvent = event;
|
|
46
|
+
if (onClose) {
|
|
47
|
+
onClose(customEvent);
|
|
48
|
+
}
|
|
49
|
+
}, [onClose]);
|
|
50
|
+
// Set up event listeners
|
|
51
|
+
useEffect(() => {
|
|
52
|
+
const element = elementRef.current;
|
|
53
|
+
if (!element)
|
|
54
|
+
return;
|
|
55
|
+
const listeners = [];
|
|
56
|
+
if (onChange) {
|
|
57
|
+
element.addEventListener('change', handleChange);
|
|
58
|
+
listeners.push(['change', handleChange]);
|
|
59
|
+
}
|
|
60
|
+
if (onOpen) {
|
|
61
|
+
element.addEventListener('open', handleOpen);
|
|
62
|
+
listeners.push(['open', handleOpen]);
|
|
63
|
+
}
|
|
64
|
+
if (onClose) {
|
|
65
|
+
element.addEventListener('close', handleClose);
|
|
66
|
+
listeners.push(['close', handleClose]);
|
|
67
|
+
}
|
|
68
|
+
return () => {
|
|
69
|
+
listeners.forEach(([eventName, handler]) => {
|
|
70
|
+
element.removeEventListener(eventName, handler);
|
|
71
|
+
});
|
|
72
|
+
};
|
|
73
|
+
}, [handleChange, handleOpen, handleClose, onChange, onOpen, onClose]);
|
|
74
|
+
// Convert React props to web component attributes
|
|
75
|
+
const webComponentProps = {
|
|
76
|
+
...props,
|
|
77
|
+
ref: elementRef,
|
|
78
|
+
};
|
|
79
|
+
// Add optional attributes only if they have values
|
|
80
|
+
if (value !== undefined) {
|
|
81
|
+
webComponentProps.value = value;
|
|
82
|
+
}
|
|
83
|
+
if (size) {
|
|
84
|
+
webComponentProps.size = size;
|
|
85
|
+
}
|
|
86
|
+
if (flavor) {
|
|
87
|
+
webComponentProps.flavor = flavor;
|
|
88
|
+
}
|
|
89
|
+
if (label) {
|
|
90
|
+
webComponentProps.label = label;
|
|
91
|
+
}
|
|
92
|
+
if (placeholder) {
|
|
93
|
+
webComponentProps.placeholder = placeholder;
|
|
94
|
+
}
|
|
95
|
+
if (required) {
|
|
96
|
+
webComponentProps.required = ''; // Boolean attributes as empty string
|
|
97
|
+
}
|
|
98
|
+
if (disabled) {
|
|
99
|
+
webComponentProps.disabled = ''; // Boolean attributes as empty string
|
|
100
|
+
}
|
|
101
|
+
if (name) {
|
|
102
|
+
webComponentProps.name = name;
|
|
103
|
+
}
|
|
104
|
+
if (clearable) {
|
|
105
|
+
webComponentProps.clearable = ''; // Boolean attributes as empty string
|
|
106
|
+
}
|
|
107
|
+
if (format) {
|
|
108
|
+
webComponentProps.format = format;
|
|
109
|
+
}
|
|
110
|
+
if (locale) {
|
|
111
|
+
webComponentProps.locale = locale;
|
|
112
|
+
}
|
|
113
|
+
if (withTime) {
|
|
114
|
+
webComponentProps['with-time'] = ''; // Convert camelCase to kebab-case
|
|
115
|
+
}
|
|
116
|
+
return React.createElement('ty-date-picker', webComponentProps);
|
|
117
|
+
});
|
|
118
|
+
TyDatePicker.displayName = 'TyDatePicker';
|
|
119
|
+
//# sourceMappingURL=TyDatePicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyDatePicker.js","sourceRoot":"","sources":["../../src/components/TyDatePicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface OptionData {
|
|
3
|
+
value: string;
|
|
4
|
+
text: string;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export interface TyDropdownEventDetail {
|
|
8
|
+
option: HTMLElement;
|
|
9
|
+
}
|
|
10
|
+
export interface TyDropdownProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'style'> {
|
|
11
|
+
style?: import('./TyInput').TyInputCSSProperties;
|
|
12
|
+
/** Semantic styling variant */
|
|
13
|
+
flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
|
|
14
|
+
/** Dropdown size */
|
|
15
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
16
|
+
/** Selected value */
|
|
17
|
+
value?: string;
|
|
18
|
+
/** Placeholder text */
|
|
19
|
+
placeholder?: string;
|
|
20
|
+
/** Dropdown label */
|
|
21
|
+
label?: string;
|
|
22
|
+
/** Disable the dropdown */
|
|
23
|
+
disabled?: boolean;
|
|
24
|
+
/** Make dropdown readonly */
|
|
25
|
+
readonly?: boolean;
|
|
26
|
+
/** Required field */
|
|
27
|
+
required?: boolean;
|
|
28
|
+
/** Show clear button */
|
|
29
|
+
clearable?: boolean;
|
|
30
|
+
/** Disable clear button (alias for clearable={false}) */
|
|
31
|
+
notClearable?: boolean;
|
|
32
|
+
/** Debounce in milliseconds (0-5000) */
|
|
33
|
+
debounce?: number;
|
|
34
|
+
/**
|
|
35
|
+
* Switch to external (remote) search mode. Default is `false` — the dropdown
|
|
36
|
+
* filters its options locally. When `true`, the dropdown stops filtering and
|
|
37
|
+
* dispatches `search` events on each keystroke; the parent owns filtering
|
|
38
|
+
* and updates the children.
|
|
39
|
+
*/
|
|
40
|
+
externalSearch?: boolean;
|
|
41
|
+
/** @deprecated Use `externalSearch` instead. */
|
|
42
|
+
notSearchable?: boolean;
|
|
43
|
+
/** @deprecated Use `externalSearch` instead. Pass `searchable={false}` was equivalent to `externalSearch={true}`. */
|
|
44
|
+
searchable?: boolean;
|
|
45
|
+
/** Form field name for form submission */
|
|
46
|
+
name?: string;
|
|
47
|
+
options?: OptionData[];
|
|
48
|
+
onChange?: (event: CustomEvent<TyDropdownEventDetail>) => void;
|
|
49
|
+
onSearch?: (event: CustomEvent<{
|
|
50
|
+
query: string;
|
|
51
|
+
element: HTMLElement;
|
|
52
|
+
}>) => void;
|
|
53
|
+
children?: React.ReactNode;
|
|
54
|
+
}
|
|
55
|
+
export declare const TyDropdown: React.ForwardRefExoticComponent<TyDropdownProps & React.RefAttributes<HTMLElement>>;
|
|
56
|
+
//# sourceMappingURL=TyDropdown.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyDropdown.d.ts","sourceRoot":"","sources":["../../src/components/TyDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,WAAW,CAAC;CACrB;AAGD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACpG,KAAK,CAAC,EAAE,OAAO,WAAW,EAAE,oBAAoB,CAAC;IACjD,+BAA+B;IAC/B,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAEhF,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAExC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,qHAAqH;IACrH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IAGvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,WAAW,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAGjF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,eAAO,MAAM,UAAU,qFA8ItB,CAAC"}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import React, { useEffect, useRef, useCallback } from 'react';
|
|
2
|
+
import { needsPropertyBridge } from '../utils/react-version';
|
|
3
|
+
// React wrapper for ty-dropdown web component
|
|
4
|
+
export const TyDropdown = React.forwardRef(({ options, children, onChange, onSearch, disabled, externalSearch, notSearchable, searchable, clearable, notClearable, debounce, name, value, ...props }, ref) => {
|
|
5
|
+
const elementRef = useRef(null);
|
|
6
|
+
const handleChange = useCallback((event) => {
|
|
7
|
+
if (onChange) {
|
|
8
|
+
onChange(event);
|
|
9
|
+
}
|
|
10
|
+
}, [onChange]);
|
|
11
|
+
const handleSearch = useCallback((event) => {
|
|
12
|
+
if (onSearch) {
|
|
13
|
+
onSearch(event);
|
|
14
|
+
}
|
|
15
|
+
}, [onSearch]);
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
const element = elementRef.current;
|
|
18
|
+
if (!element)
|
|
19
|
+
return;
|
|
20
|
+
// Listen for custom events from ty-dropdown
|
|
21
|
+
if (onChange) {
|
|
22
|
+
element.addEventListener('change', handleChange);
|
|
23
|
+
}
|
|
24
|
+
if (onSearch) {
|
|
25
|
+
element.addEventListener('search', handleSearch);
|
|
26
|
+
}
|
|
27
|
+
return () => {
|
|
28
|
+
if (onChange) {
|
|
29
|
+
element.removeEventListener('change', handleChange);
|
|
30
|
+
}
|
|
31
|
+
if (onSearch) {
|
|
32
|
+
element.removeEventListener('search', handleSearch);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
}, [handleChange, handleSearch, onChange, onSearch]);
|
|
36
|
+
// Imperatively sync `value` to the underlying element's property whenever
|
|
37
|
+
// it changes. React 18's prop-to-property bridging for custom elements is
|
|
38
|
+
// unreliable for empty strings (programmatic resets), so we set the
|
|
39
|
+
// property directly to guarantee the dropdown clears on `value=""`.
|
|
40
|
+
// React 19+ handles this natively, so the effect short-circuits there.
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
if (!needsPropertyBridge)
|
|
43
|
+
return;
|
|
44
|
+
const element = elementRef.current;
|
|
45
|
+
if (!element)
|
|
46
|
+
return;
|
|
47
|
+
if (element.value !== value) {
|
|
48
|
+
element.value = value ?? '';
|
|
49
|
+
}
|
|
50
|
+
}, [value]);
|
|
51
|
+
// Handle ref forwarding
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
if (ref && elementRef.current) {
|
|
54
|
+
if (typeof ref === 'function') {
|
|
55
|
+
ref(elementRef.current);
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
ref.current = elementRef.current;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}, [ref]);
|
|
62
|
+
// Render options from data if provided, otherwise use children
|
|
63
|
+
const renderContent = () => {
|
|
64
|
+
if (options && options.length > 0) {
|
|
65
|
+
// Data-driven approach - create ty-option elements
|
|
66
|
+
return options.map((option, index) => React.createElement('ty-option', {
|
|
67
|
+
key: option.value || index,
|
|
68
|
+
value: option.value,
|
|
69
|
+
...(option.disabled && { disabled: "" }),
|
|
70
|
+
}, option.text));
|
|
71
|
+
}
|
|
72
|
+
// Slotted approach - use provided children
|
|
73
|
+
return children;
|
|
74
|
+
};
|
|
75
|
+
// Convert React props to web component attributes
|
|
76
|
+
const webComponentProps = {
|
|
77
|
+
...props,
|
|
78
|
+
ref: elementRef,
|
|
79
|
+
};
|
|
80
|
+
// Add conditional attributes
|
|
81
|
+
if (disabled)
|
|
82
|
+
webComponentProps.disabled = '';
|
|
83
|
+
// External search mode: parent owns filtering, dropdown dispatches search events.
|
|
84
|
+
// `notSearchable` and `searchable={false}` are deprecated aliases for `externalSearch`.
|
|
85
|
+
if (externalSearch || notSearchable || searchable === false) {
|
|
86
|
+
webComponentProps['external-search'] = '';
|
|
87
|
+
}
|
|
88
|
+
// Handle clearable functionality
|
|
89
|
+
if (clearable !== undefined) {
|
|
90
|
+
if (clearable) {
|
|
91
|
+
webComponentProps.clearable = '';
|
|
92
|
+
}
|
|
93
|
+
else {
|
|
94
|
+
webComponentProps['not-clearable'] = '';
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
if (notClearable) {
|
|
98
|
+
webComponentProps['not-clearable'] = '';
|
|
99
|
+
}
|
|
100
|
+
// Add debounce attribute
|
|
101
|
+
if (debounce !== undefined) {
|
|
102
|
+
webComponentProps.debounce = debounce;
|
|
103
|
+
}
|
|
104
|
+
// Add string attributes
|
|
105
|
+
if (name)
|
|
106
|
+
webComponentProps.name = name;
|
|
107
|
+
return React.createElement('ty-dropdown', webComponentProps, renderContent());
|
|
108
|
+
});
|
|
109
|
+
TyDropdown.displayName = 'TyDropdown';
|
|
110
|
+
//# sourceMappingURL=TyDropdown.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyDropdown.js","sourceRoot":"","sources":["../../src/components/TyDropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface TyIconProps extends React.HTMLAttributes<HTMLElement> {
|
|
3
|
+
/** Icon name from the icon registry (e.g., 'home', 'star', 'settings') */
|
|
4
|
+
name: string;
|
|
5
|
+
/** Icon size - relative (em-based) or absolute (pixel-based) */
|
|
6
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '12' | '14' | '16' | '18' | '20' | '24' | '32' | '48';
|
|
7
|
+
/** Enable spinning animation */
|
|
8
|
+
spin?: boolean;
|
|
9
|
+
/** Enable pulse animation */
|
|
10
|
+
pulse?: boolean;
|
|
11
|
+
/** Animation tempo/speed */
|
|
12
|
+
tempo?: 'slow' | 'fast';
|
|
13
|
+
/** Additional CSS classes */
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
export declare const TyIcon: React.ForwardRefExoticComponent<TyIconProps & React.RefAttributes<HTMLElement>>;
|
|
17
|
+
//# sourceMappingURL=TyIcon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyIcon.d.ts","sourceRoot":"","sources":["../../src/components/TyIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACpE,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC;IAEb,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAExG,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,eAAO,MAAM,MAAM,iFA6ClB,CAAC"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
// React wrapper for ty-icon web component
|
|
3
|
+
export const TyIcon = React.forwardRef(({ name, size, spin, pulse, tempo, className, ...props }, ref) => {
|
|
4
|
+
const elementRef = useRef(null);
|
|
5
|
+
// Handle ref forwarding
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
if (ref && elementRef.current) {
|
|
8
|
+
if (typeof ref === 'function') {
|
|
9
|
+
ref(elementRef.current);
|
|
10
|
+
}
|
|
11
|
+
else {
|
|
12
|
+
ref.current = elementRef.current;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}, [ref]);
|
|
16
|
+
// Convert React props to web component attributes
|
|
17
|
+
const webComponentProps = {
|
|
18
|
+
...props,
|
|
19
|
+
name,
|
|
20
|
+
ref: elementRef,
|
|
21
|
+
};
|
|
22
|
+
// Add optional attributes only if they have values
|
|
23
|
+
if (size) {
|
|
24
|
+
webComponentProps.size = size;
|
|
25
|
+
}
|
|
26
|
+
if (spin) {
|
|
27
|
+
webComponentProps.spin = ''; // Boolean attributes as empty string
|
|
28
|
+
}
|
|
29
|
+
if (pulse) {
|
|
30
|
+
webComponentProps.pulse = ''; // Boolean attributes as empty string
|
|
31
|
+
}
|
|
32
|
+
if (tempo) {
|
|
33
|
+
webComponentProps.tempo = tempo;
|
|
34
|
+
}
|
|
35
|
+
if (className) {
|
|
36
|
+
webComponentProps.class = className; // HTML attribute is 'class', not 'className'
|
|
37
|
+
}
|
|
38
|
+
return React.createElement('ty-icon', webComponentProps);
|
|
39
|
+
});
|
|
40
|
+
TyIcon.displayName = 'TyIcon';
|
|
41
|
+
//# sourceMappingURL=TyIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyIcon.js","sourceRoot":"","sources":["../../src/components/TyIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAuBjD,0CAA0C;AAC1C,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/D,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE7C,wBAAwB;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;YACnC,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,kDAAkD;IAClD,MAAM,iBAAiB,GAAwB;QAC7C,GAAG,KAAK;QACR,IAAI;QACJ,GAAG,EAAE,UAAU;KAChB,CAAC;IAEF,mDAAmD;IACnD,IAAI,IAAI,EAAE,CAAC;QACT,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC;IAChC,CAAC;IAED,IAAI,IAAI,EAAE,CAAC;QACT,iBAAiB,CAAC,IAAI,GAAG,EAAE,CAAC,CAAE,qCAAqC;IACrE,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,iBAAiB,CAAC,KAAK,GAAG,EAAE,CAAC,CAAE,qCAAqC;IACtE,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,iBAAiB,CAAC,KAAK,GAAG,KAAK,CAAC;IAClC,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACd,iBAAiB,CAAC,KAAK,GAAG,SAAS,CAAC,CAAE,6CAA6C;IACrF,CAAC;IAED,OAAO,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAC3D,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface TyInputEventDetail {
|
|
3
|
+
value: any;
|
|
4
|
+
formattedValue: string;
|
|
5
|
+
rawValue: string;
|
|
6
|
+
originalEvent: Event;
|
|
7
|
+
}
|
|
8
|
+
export interface TyInputCSSProperties extends React.CSSProperties {
|
|
9
|
+
'--input-bg'?: string;
|
|
10
|
+
'--input-color'?: string;
|
|
11
|
+
'--input-border'?: string;
|
|
12
|
+
'--input-border-hover'?: string;
|
|
13
|
+
'--input-border-focus'?: string;
|
|
14
|
+
'--input-shadow-focus'?: string;
|
|
15
|
+
'--input-placeholder'?: string;
|
|
16
|
+
'--input-disabled-bg'?: string;
|
|
17
|
+
'--input-disabled-border'?: string;
|
|
18
|
+
'--input-disabled-color'?: string;
|
|
19
|
+
}
|
|
20
|
+
export interface TyInputProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onFocus' | 'onBlur' | 'style'> {
|
|
21
|
+
style?: TyInputCSSProperties;
|
|
22
|
+
/** Input type */
|
|
23
|
+
type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'currency' | 'percent' | 'compact';
|
|
24
|
+
/** Semantic styling variant */
|
|
25
|
+
flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
|
|
26
|
+
/** Input size */
|
|
27
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
28
|
+
/** Input value */
|
|
29
|
+
value?: string;
|
|
30
|
+
/** Placeholder text */
|
|
31
|
+
placeholder?: string;
|
|
32
|
+
/** Input label */
|
|
33
|
+
label?: string;
|
|
34
|
+
/** Error message */
|
|
35
|
+
error?: string;
|
|
36
|
+
/** Disable the input */
|
|
37
|
+
disabled?: boolean;
|
|
38
|
+
/** Required field */
|
|
39
|
+
required?: boolean;
|
|
40
|
+
/** Form field name for form submission */
|
|
41
|
+
name?: string;
|
|
42
|
+
/** Checked state for checkbox inputs */
|
|
43
|
+
checked?: boolean;
|
|
44
|
+
currency?: string;
|
|
45
|
+
locale?: string;
|
|
46
|
+
precision?: string | number;
|
|
47
|
+
/** Debounce in milliseconds (0-5000) */
|
|
48
|
+
debounce?: number;
|
|
49
|
+
/**
|
|
50
|
+
* Fires on every keystroke (React convention)
|
|
51
|
+
* Maps to native 'input' event from ty-input
|
|
52
|
+
*/
|
|
53
|
+
onChange?: (event: CustomEvent<TyInputEventDetail>) => void;
|
|
54
|
+
/**
|
|
55
|
+
* Fires on blur if value changed (native DOM behavior)
|
|
56
|
+
* Maps to native 'change' event from ty-input
|
|
57
|
+
*/
|
|
58
|
+
onChangeCommit?: (event: CustomEvent<TyInputEventDetail>) => void;
|
|
59
|
+
/** Standard focus event */
|
|
60
|
+
onFocus?: (event: FocusEvent) => void;
|
|
61
|
+
/** Standard blur event */
|
|
62
|
+
onBlur?: (event: FocusEvent) => void;
|
|
63
|
+
}
|
|
64
|
+
export declare const TyInput: React.ForwardRefExoticComponent<TyInputProps & React.RefAttributes<HTMLElement>>;
|
|
65
|
+
//# sourceMappingURL=TyInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyInput.d.ts","sourceRoot":"","sources":["../../src/components/TyInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,GAAG,CAAC;IACX,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,KAAK,CAAC;CACtB;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,aAAa;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC;AAGD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxH,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GACxE,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;IAErC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAEhF,iBAAiB;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAExC,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAE5D;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAElE,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAEtC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAMD,eAAO,MAAM,OAAO,kFAwInB,CAAC"}
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import React, { useEffect, useRef, useCallback } from 'react';
|
|
2
|
+
import { needsPropertyBridge } from '../utils/react-version';
|
|
3
|
+
// One-time global warning flags so we don't spam the console.
|
|
4
|
+
let _warnedOnInputProp = false;
|
|
5
|
+
// React wrapper for ty-input web component
|
|
6
|
+
export const TyInput = React.forwardRef(({ onChange, onChangeCommit, onFocus, onBlur, disabled, name, checked, debounce, ...props }, ref) => {
|
|
7
|
+
const elementRef = useRef(null);
|
|
8
|
+
// Catch the most common mistake: passing `onInput` (React's prop) instead
|
|
9
|
+
// of `onChange` (our wrapper's prop). React's synthetic-event system
|
|
10
|
+
// strips event.detail, so the user's handler crashes on `e.detail.value`.
|
|
11
|
+
// Forward to onChange and log a one-shot warning.
|
|
12
|
+
const onInputProp = props.onInput;
|
|
13
|
+
if (onInputProp && !onChange) {
|
|
14
|
+
if (!_warnedOnInputProp) {
|
|
15
|
+
_warnedOnInputProp = true;
|
|
16
|
+
console.warn('[tyrell-react] <TyInput> received `onInput`. ' +
|
|
17
|
+
'React strips event.detail; use `onChange` instead — it receives the raw CustomEvent. ' +
|
|
18
|
+
'Forwarding for now, but please rename the prop.');
|
|
19
|
+
}
|
|
20
|
+
onChange = onInputProp;
|
|
21
|
+
}
|
|
22
|
+
// Either way, drop onInput from spread so React doesn't double-wire it.
|
|
23
|
+
delete props.onInput;
|
|
24
|
+
// Map onChange to input event (React convention)
|
|
25
|
+
const handleInput = useCallback((event) => {
|
|
26
|
+
if (onChange) {
|
|
27
|
+
onChange(event);
|
|
28
|
+
}
|
|
29
|
+
}, [onChange]);
|
|
30
|
+
// Map onChangeCommit to change event (blur behavior)
|
|
31
|
+
const handleChangeCommit = useCallback((event) => {
|
|
32
|
+
if (onChangeCommit) {
|
|
33
|
+
onChangeCommit(event);
|
|
34
|
+
}
|
|
35
|
+
}, [onChangeCommit]);
|
|
36
|
+
const handleFocus = useCallback((event) => {
|
|
37
|
+
if (onFocus) {
|
|
38
|
+
onFocus(event);
|
|
39
|
+
}
|
|
40
|
+
}, [onFocus]);
|
|
41
|
+
const handleBlur = useCallback((event) => {
|
|
42
|
+
if (onBlur) {
|
|
43
|
+
onBlur(event);
|
|
44
|
+
}
|
|
45
|
+
}, [onBlur]);
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
const element = elementRef.current;
|
|
48
|
+
if (!element)
|
|
49
|
+
return;
|
|
50
|
+
// Listen for custom input/change events from ty-input
|
|
51
|
+
// Map onChange → input event (React convention)
|
|
52
|
+
if (onChange) {
|
|
53
|
+
element.addEventListener('input', handleInput);
|
|
54
|
+
}
|
|
55
|
+
// Map onChangeCommit → change event (blur behavior)
|
|
56
|
+
if (onChangeCommit) {
|
|
57
|
+
element.addEventListener('change', handleChangeCommit);
|
|
58
|
+
}
|
|
59
|
+
// Listen for standard focus/blur events
|
|
60
|
+
if (onFocus) {
|
|
61
|
+
element.addEventListener('focus', handleFocus);
|
|
62
|
+
}
|
|
63
|
+
if (onBlur) {
|
|
64
|
+
element.addEventListener('blur', handleBlur);
|
|
65
|
+
}
|
|
66
|
+
return () => {
|
|
67
|
+
if (onChange) {
|
|
68
|
+
element.removeEventListener('input', handleInput);
|
|
69
|
+
}
|
|
70
|
+
if (onChangeCommit) {
|
|
71
|
+
element.removeEventListener('change', handleChangeCommit);
|
|
72
|
+
}
|
|
73
|
+
if (onFocus) {
|
|
74
|
+
element.removeEventListener('focus', handleFocus);
|
|
75
|
+
}
|
|
76
|
+
if (onBlur) {
|
|
77
|
+
element.removeEventListener('blur', handleBlur);
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
}, [handleInput, handleChangeCommit, handleFocus, handleBlur, onChange, onChangeCommit, onFocus, onBlur]);
|
|
81
|
+
// Handle ref forwarding
|
|
82
|
+
useEffect(() => {
|
|
83
|
+
if (ref && elementRef.current) {
|
|
84
|
+
if (typeof ref === 'function') {
|
|
85
|
+
ref(elementRef.current);
|
|
86
|
+
}
|
|
87
|
+
else {
|
|
88
|
+
ref.current = elementRef.current;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}, [ref]);
|
|
92
|
+
// Imperatively sync `value` to the underlying element's property whenever
|
|
93
|
+
// the React prop changes. React 18's prop-to-property bridging for custom
|
|
94
|
+
// elements is unreliable for empty strings, so we set the property directly
|
|
95
|
+
// to guarantee resets (`value=""`) clear the visible content. React 19+
|
|
96
|
+
// handles this natively, so the effect short-circuits there.
|
|
97
|
+
useEffect(() => {
|
|
98
|
+
if (!needsPropertyBridge)
|
|
99
|
+
return;
|
|
100
|
+
const element = elementRef.current;
|
|
101
|
+
if (!element)
|
|
102
|
+
return;
|
|
103
|
+
const next = props.value ?? '';
|
|
104
|
+
if (element.value !== next) {
|
|
105
|
+
element.value = next;
|
|
106
|
+
}
|
|
107
|
+
}, [props.value]);
|
|
108
|
+
// Convert React props to web component attributes
|
|
109
|
+
const webComponentProps = {
|
|
110
|
+
...props,
|
|
111
|
+
ref: elementRef,
|
|
112
|
+
};
|
|
113
|
+
// Add conditional attributes
|
|
114
|
+
if (disabled)
|
|
115
|
+
webComponentProps.disabled = '';
|
|
116
|
+
if (checked)
|
|
117
|
+
webComponentProps.checked = '';
|
|
118
|
+
// Add string attributes
|
|
119
|
+
if (name)
|
|
120
|
+
webComponentProps.name = name;
|
|
121
|
+
// Add debounce attribute
|
|
122
|
+
if (debounce !== undefined)
|
|
123
|
+
webComponentProps.debounce = debounce;
|
|
124
|
+
return React.createElement('ty-input', webComponentProps);
|
|
125
|
+
});
|
|
126
|
+
TyInput.displayName = 'TyInput';
|
|
127
|
+
//# sourceMappingURL=TyInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyInput.js","sourceRoot":"","sources":["../../src/components/TyInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface TyModalEventDetail {
|
|
3
|
+
reason?: 'programmatic' | 'native' | 'backdrop' | 'escape' | 'close-button';
|
|
4
|
+
returnValue?: string;
|
|
5
|
+
}
|
|
6
|
+
export interface TyModalProps extends React.HTMLAttributes<HTMLElement> {
|
|
7
|
+
/** Controls modal visibility */
|
|
8
|
+
open?: boolean;
|
|
9
|
+
/** Show backdrop behind modal (default: true) */
|
|
10
|
+
backdrop?: boolean;
|
|
11
|
+
/** Allow closing modal by clicking backdrop (default: true) */
|
|
12
|
+
closeOnOutsideClick?: boolean;
|
|
13
|
+
/** Allow closing modal with Escape key (default: true) */
|
|
14
|
+
closeOnEscape?: boolean;
|
|
15
|
+
/** Require confirmation before closing when there are unsaved changes */
|
|
16
|
+
protected?: boolean;
|
|
17
|
+
/** React event handlers */
|
|
18
|
+
onOpen?: (event: CustomEvent<TyModalEventDetail>) => void;
|
|
19
|
+
onClose?: (event: CustomEvent<TyModalEventDetail>) => void;
|
|
20
|
+
/** Modal content */
|
|
21
|
+
children?: React.ReactNode;
|
|
22
|
+
}
|
|
23
|
+
export interface TyModalRef {
|
|
24
|
+
show: () => void;
|
|
25
|
+
hide: () => void;
|
|
26
|
+
element: HTMLElement | null;
|
|
27
|
+
}
|
|
28
|
+
export declare const TyModal: React.ForwardRefExoticComponent<TyModalProps & React.RefAttributes<TyModalRef>>;
|
|
29
|
+
//# sourceMappingURL=TyModal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyModal.d.ts","sourceRoot":"","sources":["../../src/components/TyModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAGtE,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,cAAc,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,cAAc,CAAC;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAGD,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACrE,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,0DAA0D;IAC1D,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAC1D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAE3D,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;CAC7B;AAGD,eAAO,MAAM,OAAO,iFAkGnB,CAAC"}
|