tyrell-react 1.0.0-TC11 → 1.0.0-TC17
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/README.md +8 -8
- package/dist/components/TyButton.d.ts +2 -0
- package/dist/components/TyButton.d.ts.map +1 -1
- package/dist/components/TyButton.js +13 -5
- package/dist/components/TyButton.js.map +1 -1
- package/dist/components/TyCalendar.d.ts.map +1 -1
- package/dist/components/TyCalendar.js +13 -7
- package/dist/components/TyCalendar.js.map +1 -1
- package/dist/components/TyCheckbox.d.ts.map +1 -1
- package/dist/components/TyCheckbox.js +11 -14
- package/dist/components/TyCheckbox.js.map +1 -1
- package/dist/components/TyCopy.d.ts.map +1 -1
- package/dist/components/TyCopy.js +7 -3
- package/dist/components/TyCopy.js.map +1 -1
- package/dist/components/TyDatePicker.d.ts.map +1 -1
- package/dist/components/TyDatePicker.js +16 -10
- package/dist/components/TyDatePicker.js.map +1 -1
- package/dist/components/TyDropdown.d.ts +16 -5
- package/dist/components/TyDropdown.d.ts.map +1 -1
- package/dist/components/TyDropdown.js +34 -19
- package/dist/components/TyDropdown.js.map +1 -1
- package/dist/components/TyFileUpload.d.ts +31 -0
- package/dist/components/TyFileUpload.d.ts.map +1 -0
- package/dist/components/TyFileUpload.js +56 -0
- package/dist/components/TyFileUpload.js.map +1 -0
- package/dist/components/TyIcon.d.ts.map +1 -1
- package/dist/components/TyIcon.js +7 -6
- package/dist/components/TyIcon.js.map +1 -1
- package/dist/components/TyInput.d.ts.map +1 -1
- package/dist/components/TyInput.js +15 -4
- package/dist/components/TyInput.js.map +1 -1
- package/dist/components/TyModal.d.ts.map +1 -1
- package/dist/components/TyModal.js +35 -10
- package/dist/components/TyModal.js.map +1 -1
- package/dist/components/TyMultiselect.d.ts +6 -0
- package/dist/components/TyMultiselect.d.ts.map +1 -1
- package/dist/components/TyMultiselect.js +22 -14
- package/dist/components/TyMultiselect.js.map +1 -1
- package/dist/components/TyOption.d.ts.map +1 -1
- package/dist/components/TyOption.js +7 -3
- package/dist/components/TyOption.js.map +1 -1
- package/dist/components/TyPopup.d.ts.map +1 -1
- package/dist/components/TyPopup.js +7 -6
- package/dist/components/TyPopup.js.map +1 -1
- package/dist/components/TyRadio.d.ts.map +1 -1
- package/dist/components/TyRadio.js +6 -2
- package/dist/components/TyRadio.js.map +1 -1
- package/dist/components/TyRadioGroup.d.ts.map +1 -1
- package/dist/components/TyRadioGroup.js +5 -2
- package/dist/components/TyRadioGroup.js.map +1 -1
- package/dist/components/TyScrollContainer.d.ts.map +1 -1
- package/dist/components/TyScrollContainer.js +22 -4
- package/dist/components/TyScrollContainer.js.map +1 -1
- package/dist/components/TySwitch.d.ts.map +1 -1
- package/dist/components/TySwitch.js +8 -3
- package/dist/components/TySwitch.js.map +1 -1
- package/dist/components/TyTab.d.ts.map +1 -1
- package/dist/components/TyTab.js +3 -1
- package/dist/components/TyTab.js.map +1 -1
- package/dist/components/TyTag.d.ts.map +1 -1
- package/dist/components/TyTag.js +11 -5
- package/dist/components/TyTag.js.map +1 -1
- package/dist/components/TyTextarea.d.ts.map +1 -1
- package/dist/components/TyTextarea.js +10 -2
- package/dist/components/TyTextarea.js.map +1 -1
- package/dist/components/TyTooltip.d.ts.map +1 -1
- package/dist/components/TyTooltip.js +4 -3
- package/dist/components/TyTooltip.js.map +1 -1
- package/dist/components/index.d.ts +4 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +2 -0
- package/dist/components/index.js.map +1 -1
- 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/dist/utils/use-boolean-prop.d.ts +36 -0
- package/dist/utils/use-boolean-prop.d.ts.map +1 -0
- package/dist/utils/use-boolean-prop.js +62 -0
- package/dist/utils/use-boolean-prop.js.map +1 -0
- package/package.json +1 -1
- package/src/components/TyButton.tsx +17 -5
- package/src/components/TyCalendar.tsx +10 -7
- package/src/components/TyCheckbox.tsx +11 -13
- package/src/components/TyCopy.tsx +9 -4
- package/src/components/TyDatePicker.tsx +12 -11
- package/src/components/TyDropdown.tsx +56 -34
- package/src/components/TyFileUpload.tsx +108 -0
- package/src/components/TyIcon.tsx +6 -7
- package/src/components/TyInput.tsx +14 -4
- package/src/components/TyModal.tsx +31 -13
- package/src/components/TyMultiselect.tsx +25 -17
- package/src/components/TyOption.tsx +8 -3
- package/src/components/TyPopup.tsx +5 -6
- package/src/components/TyRadio.tsx +7 -2
- package/src/components/TyRadioGroup.tsx +6 -2
- package/src/components/TyScrollContainer.tsx +17 -2
- package/src/components/TySwitch.tsx +9 -3
- package/src/components/TyTab.tsx +3 -1
- package/src/components/TyTag.tsx +12 -5
- package/src/components/TyTextarea.tsx +10 -2
- package/src/components/TyTooltip.tsx +3 -3
- package/src/components/index.ts +7 -0
- package/src/utils/react-version.ts +8 -0
- package/src/utils/use-boolean-prop.ts +62 -0
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# tyrell-react
|
|
2
2
|
|
|
3
|
-
**React wrappers for
|
|
3
|
+
**React wrappers for Tyrell Web Components** - bringing framework-agnostic web components to React with full TypeScript support.
|
|
4
4
|
|
|
5
5
|
## 🎯 Philosophy
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Tyrell web components are **distributed via CDN** and loaded as standard web components. These React wrappers provide:
|
|
8
8
|
- ✅ **React-friendly API** - Props instead of attributes
|
|
9
9
|
- ✅ **TypeScript types** - Full type safety
|
|
10
10
|
- ✅ **Event handling** - React synthetic events
|
|
@@ -13,7 +13,7 @@ Ty web components are **distributed via CDN** and loaded as standard web compone
|
|
|
13
13
|
|
|
14
14
|
## 📦 Installation
|
|
15
15
|
|
|
16
|
-
### Step 1: Load
|
|
16
|
+
### Step 1: Load Tyrell Web Components (CDN)
|
|
17
17
|
|
|
18
18
|
Add to your `index.html`:
|
|
19
19
|
|
|
@@ -21,7 +21,7 @@ Add to your `index.html`:
|
|
|
21
21
|
<!DOCTYPE html>
|
|
22
22
|
<html>
|
|
23
23
|
<head>
|
|
24
|
-
<!--
|
|
24
|
+
<!-- Tyrell Web Components & Styles via CDN -->
|
|
25
25
|
<script src="https://cdn.jsdelivr.net/npm/tyrell-components@latest/dist/tyrell.js"></script>
|
|
26
26
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tyrell-components@latest/css/tyrell.css">
|
|
27
27
|
</head>
|
|
@@ -96,7 +96,7 @@ All 18 components wrapped:
|
|
|
96
96
|
|
|
97
97
|
## ⚡ Event Handling (React Convention)
|
|
98
98
|
|
|
99
|
-
|
|
99
|
+
Tyrell React wrappers follow React conventions for event handling:
|
|
100
100
|
|
|
101
101
|
### Input Components (Input, Textarea, Checkbox)
|
|
102
102
|
|
|
@@ -387,7 +387,7 @@ Modern browsers with Web Components support:
|
|
|
387
387
|
|
|
388
388
|
## 📝 Why CDN Distribution?
|
|
389
389
|
|
|
390
|
-
**
|
|
390
|
+
**Tyrell web components are framework-agnostic** and designed for CDN distribution:
|
|
391
391
|
|
|
392
392
|
✅ **Zero version conflicts** - One version serves all frameworks
|
|
393
393
|
✅ **Smaller bundles** - Web components load once, shared across all React components
|
|
@@ -397,7 +397,7 @@ Modern browsers with Web Components support:
|
|
|
397
397
|
|
|
398
398
|
## 🤝 Contributing
|
|
399
399
|
|
|
400
|
-
This package is part of the [
|
|
400
|
+
This package is part of the [Tyrell monorepo](https://github.com/gersak/tyrell).
|
|
401
401
|
|
|
402
402
|
## 📄 License
|
|
403
403
|
|
|
@@ -405,6 +405,6 @@ MIT License - see [LICENSE](./LICENSE)
|
|
|
405
405
|
|
|
406
406
|
## 🔗 Links
|
|
407
407
|
|
|
408
|
-
- [
|
|
408
|
+
- [Tyrell Core Package](https://www.npmjs.com/package/tyrell-components)
|
|
409
409
|
- [GitHub Repository](https://github.com/gersak/tyrell)
|
|
410
410
|
- [Documentation](https://tyrell.gersak.dev) (Coming Soon)
|
|
@@ -30,6 +30,8 @@ export interface TyButtonProps extends Omit<React.HTMLAttributes<HTMLElement>, '
|
|
|
30
30
|
type?: 'button' | 'submit' | 'reset';
|
|
31
31
|
/** Disable the button */
|
|
32
32
|
disabled?: boolean;
|
|
33
|
+
/** Loading state — shows a centered spinner, blocks click, preserves width */
|
|
34
|
+
loading?: boolean;
|
|
33
35
|
/** Pill-shaped button (rounded ends) */
|
|
34
36
|
pill?: boolean;
|
|
35
37
|
/** Action (icon-only square) */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyButton.d.ts","sourceRoot":"","sources":["../../src/components/TyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"TyButton.d.ts","sourceRoot":"","sources":["../../src/components/TyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAC5F,KAAK,YAAY,GAAG,aAAa,GAAG,GAAG,aAAa,GAAG,GAAG,GAAG,aAAa,GAAG,CAAC;AAC9E,KAAK,gBAAgB,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;AAEvD,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,aAAa;IAChE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACrF,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAEtC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAE9B,kBAAkB;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAExC,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAErC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,wCAAwC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,gCAAgC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wBAAwB;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,QAAQ,mFAwFpB,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { useEffect, useRef } from 'react';
|
|
2
|
-
|
|
2
|
+
import { useBooleanProperty } from '../utils/use-boolean-prop';
|
|
3
|
+
export const TyButton = React.forwardRef(({ children, type, appearance, disabled, loading, pill, action, wide, label, name, value, onClick, ...props }, ref) => {
|
|
3
4
|
const elementRef = useRef(null);
|
|
4
5
|
// Imperatively attach the click listener so onClick reliably fires for the
|
|
5
6
|
// CustomEvent('click') that <ty-button> re-dispatches on its host (the
|
|
@@ -40,17 +41,24 @@ export const TyButton = React.forwardRef(({ children, type, appearance, disabled
|
|
|
40
41
|
}
|
|
41
42
|
}
|
|
42
43
|
}, [ref]);
|
|
44
|
+
const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
|
|
45
|
+
const isLoading = useBooleanProperty(elementRef, 'loading', loading);
|
|
46
|
+
const isPill = useBooleanProperty(elementRef, 'pill', pill);
|
|
47
|
+
const isAction = useBooleanProperty(elementRef, 'action', action);
|
|
48
|
+
const isWide = useBooleanProperty(elementRef, 'wide', wide);
|
|
43
49
|
const webComponentProps = {
|
|
44
50
|
...props,
|
|
45
51
|
ref: elementRef,
|
|
46
52
|
};
|
|
47
|
-
if (
|
|
53
|
+
if (isDisabled)
|
|
48
54
|
webComponentProps.disabled = '';
|
|
49
|
-
if (
|
|
55
|
+
if (isLoading)
|
|
56
|
+
webComponentProps.loading = '';
|
|
57
|
+
if (isPill)
|
|
50
58
|
webComponentProps.pill = '';
|
|
51
|
-
if (
|
|
59
|
+
if (isAction)
|
|
52
60
|
webComponentProps.action = '';
|
|
53
|
-
if (
|
|
61
|
+
if (isWide)
|
|
54
62
|
webComponentProps.wide = '';
|
|
55
63
|
if (appearance)
|
|
56
64
|
webComponentProps.appearance = appearance;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyButton.js","sourceRoot":"","sources":["../../src/components/TyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"TyButton.js","sourceRoot":"","sources":["../../src/components/TyButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyCalendar.d.ts","sourceRoot":"","sources":["../../src/components/TyCalendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TyCalendar.d.ts","sourceRoot":"","sources":["../../src/components/TyCalendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,MAAM,WAAW,2BAA2B;IAC1C,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,MAAM,EAAE,QAAQ,CAAC;IACjB,wCAAwC;IACxC,MAAM,EAAE,WAAW,CAAC;IACpB,mDAAmD;IACnD,UAAU,EAAE,GAAG,CAAC;CACjB;AAED,MAAM,WAAW,6BAA6B;IAC5C,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,MAAM,EAAE,UAAU,CAAC;IACnB,yCAAyC;IACzC,MAAM,EAAE,YAAY,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC1F,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,0BAA0B;IAC1B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,WAAW,GAAG,MAAM,CAAC;IAEzD,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,MAAM,EAAE,CAAC;IAE7C,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,2BAA2B,CAAC,KAAK,IAAI,CAAC;IAErE,kDAAkD;IAClD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,6BAA6B,CAAC,KAAK,IAAI,CAAC;CAC1E;AAGD,eAAO,MAAM,UAAU,qFA+JtB,CAAC"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useCallback } from 'react';
|
|
2
|
+
import { needsPropertyBridge } from '../utils/react-version';
|
|
3
|
+
import { useBooleanProperty } from '../utils/use-boolean-prop';
|
|
2
4
|
// React wrapper for ty-calendar web component
|
|
3
5
|
export const TyCalendar = React.forwardRef(({ year, month, day, showNavigation, stateless, size, locale, width, minWidth, maxWidth, name, value, dayContentFn, dayClassesFn, customCSS, onChange, onNavigate, ...props }, ref) => {
|
|
4
6
|
const elementRef = useRef(null);
|
|
@@ -47,8 +49,12 @@ export const TyCalendar = React.forwardRef(({ year, month, day, showNavigation,
|
|
|
47
49
|
});
|
|
48
50
|
};
|
|
49
51
|
}, [handleChange, handleNavigate, onChange, onNavigate]);
|
|
50
|
-
// Set function properties directly on the element
|
|
52
|
+
// Set function/object properties directly on the element. Required on
|
|
53
|
+
// React 18, which can't bridge non-string props onto custom elements.
|
|
54
|
+
// React 19+ handles function/object prop-to-property bridging natively.
|
|
51
55
|
useEffect(() => {
|
|
56
|
+
if (!needsPropertyBridge)
|
|
57
|
+
return;
|
|
52
58
|
const element = elementRef.current;
|
|
53
59
|
if (!element)
|
|
54
60
|
return;
|
|
@@ -89,12 +95,12 @@ export const TyCalendar = React.forwardRef(({ year, month, day, showNavigation,
|
|
|
89
95
|
if (day !== undefined) {
|
|
90
96
|
webComponentProps.day = day.toString();
|
|
91
97
|
}
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
+
const isShowNavigation = useBooleanProperty(elementRef, 'showNavigation', showNavigation);
|
|
99
|
+
const isStateless = useBooleanProperty(elementRef, 'stateless', stateless);
|
|
100
|
+
if (isShowNavigation)
|
|
101
|
+
webComponentProps['show-navigation'] = '';
|
|
102
|
+
if (isStateless)
|
|
103
|
+
webComponentProps.stateless = '';
|
|
98
104
|
if (size) {
|
|
99
105
|
webComponentProps.size = size;
|
|
100
106
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyCalendar.js","sourceRoot":"","sources":["../../src/components/TyCalendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TyCalendar.js","sourceRoot":"","sources":["../../src/components/TyCalendar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyCheckbox.d.ts","sourceRoot":"","sources":["../../src/components/TyCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TyCheckbox.d.ts","sourceRoot":"","sources":["../../src/components/TyCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACtG,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAExC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAEhF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;IAErE,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,aAAa,EAAE,KAAK,CAAC;CACtB;AAGD,eAAO,MAAM,UAAU,qFA2FtB,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
import { useBooleanProperty } from '../utils/use-boolean-prop';
|
|
2
3
|
// React wrapper for ty-checkbox web component
|
|
3
4
|
export const TyCheckbox = React.forwardRef(({ children, checked, value, name, disabled, required, error, size, flavor, onChange, onChangeCommit, ...props }, ref) => {
|
|
4
5
|
const elementRef = useRef(null);
|
|
@@ -39,28 +40,24 @@ export const TyCheckbox = React.forwardRef(({ children, checked, value, name, di
|
|
|
39
40
|
}
|
|
40
41
|
}
|
|
41
42
|
}, [ref]);
|
|
42
|
-
//
|
|
43
|
-
// boolean attributes as empty strings on first render but
|
|
44
|
-
// remove them when the prop flips back to false on a
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
if (Boolean(element.checked) !== Boolean(checked)) {
|
|
50
|
-
element.checked = Boolean(checked);
|
|
51
|
-
}
|
|
52
|
-
}, [checked]);
|
|
43
|
+
// Imperative property sync for boolean props (see use-boolean-prop.ts).
|
|
44
|
+
// React 18 sets boolean attributes as empty strings on first render but
|
|
45
|
+
// doesn't reliably remove them when the prop flips back to false on a
|
|
46
|
+
// custom element. React 19+ handles this natively.
|
|
47
|
+
const isChecked = useBooleanProperty(elementRef, 'checked', checked);
|
|
48
|
+
const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
|
|
49
|
+
const isRequired = useBooleanProperty(elementRef, 'required', required);
|
|
53
50
|
// Convert React props to web component attributes
|
|
54
51
|
const webComponentProps = {
|
|
55
52
|
...props,
|
|
56
53
|
ref: elementRef,
|
|
57
54
|
};
|
|
58
55
|
// Add boolean attributes
|
|
59
|
-
if (
|
|
56
|
+
if (isChecked)
|
|
60
57
|
webComponentProps.checked = '';
|
|
61
|
-
if (
|
|
58
|
+
if (isDisabled)
|
|
62
59
|
webComponentProps.disabled = '';
|
|
63
|
-
if (
|
|
60
|
+
if (isRequired)
|
|
64
61
|
webComponentProps.required = '';
|
|
65
62
|
// Add string attributes
|
|
66
63
|
if (value)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyCheckbox.js","sourceRoot":"","sources":["../../src/components/TyCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TyCheckbox.js","sourceRoot":"","sources":["../../src/components/TyCheckbox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyCopy.d.ts","sourceRoot":"","sources":["../../src/components/TyCopy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TyCopy.d.ts","sourceRoot":"","sources":["../../src/components/TyCopy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IACtF,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,qBAAqB;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAExC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAEhF,qBAAqB;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB,yBAAyB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,eAAO,MAAM,MAAM,iFAiDlB,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
import { useBooleanProperty } from '../utils/use-boolean-prop';
|
|
2
3
|
// React wrapper for ty-copy web component
|
|
3
4
|
export const TyCopy = React.forwardRef(({ value, label, size, flavor, format, multiline, disabled, required, ...props }, ref) => {
|
|
4
5
|
const elementRef = useRef(null);
|
|
@@ -13,6 +14,9 @@ export const TyCopy = React.forwardRef(({ value, label, size, flavor, format, mu
|
|
|
13
14
|
}
|
|
14
15
|
}
|
|
15
16
|
}, [ref]);
|
|
17
|
+
const isMultiline = useBooleanProperty(elementRef, 'multiline', multiline);
|
|
18
|
+
const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
|
|
19
|
+
const isRequired = useBooleanProperty(elementRef, 'required', required);
|
|
16
20
|
// Convert React props to web component attributes
|
|
17
21
|
const webComponentProps = {
|
|
18
22
|
...props,
|
|
@@ -30,11 +34,11 @@ export const TyCopy = React.forwardRef(({ value, label, size, flavor, format, mu
|
|
|
30
34
|
if (format)
|
|
31
35
|
webComponentProps.format = format;
|
|
32
36
|
// Add boolean attributes
|
|
33
|
-
if (
|
|
37
|
+
if (isMultiline)
|
|
34
38
|
webComponentProps.multiline = '';
|
|
35
|
-
if (
|
|
39
|
+
if (isDisabled)
|
|
36
40
|
webComponentProps.disabled = '';
|
|
37
|
-
if (
|
|
41
|
+
if (isRequired)
|
|
38
42
|
webComponentProps.required = '';
|
|
39
43
|
return React.createElement('ty-copy', webComponentProps);
|
|
40
44
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyCopy.js","sourceRoot":"","sources":["../../src/components/TyCopy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TyCopy.js","sourceRoot":"","sources":["../../src/components/TyCopy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AA6B/D,0CAA0C;AAC1C,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,CAAC,EACC,KAAK,EACL,KAAK,EACL,IAAI,EACJ,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,GAAG,EAAE,EAAE;IACR,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,MAAM,WAAW,GAAG,kBAAkB,CAAC,UAAU,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IAC3E,MAAM,UAAU,GAAG,kBAAkB,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IACxE,MAAM,UAAU,GAAG,kBAAkB,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IAExE,kDAAkD;IAClD,MAAM,iBAAiB,GAAwB;QAC7C,GAAG,KAAK;QACR,GAAG,EAAE,UAAU;KAChB,CAAC;IAEF,wBAAwB;IACxB,IAAI,KAAK;QAAE,iBAAiB,CAAC,KAAK,GAAG,KAAK,CAAC;IAC3C,IAAI,KAAK;QAAE,iBAAiB,CAAC,KAAK,GAAG,KAAK,CAAC;IAC3C,IAAI,IAAI;QAAE,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC;IACxC,IAAI,MAAM;QAAE,iBAAiB,CAAC,MAAM,GAAG,MAAM,CAAC;IAC9C,IAAI,MAAM;QAAE,iBAAiB,CAAC,MAAM,GAAG,MAAM,CAAC;IAE9C,yBAAyB;IACzB,IAAI,WAAW;QAAE,iBAAiB,CAAC,SAAS,GAAG,EAAE,CAAC;IAClD,IAAI,UAAU;QAAE,iBAAiB,CAAC,QAAQ,GAAG,EAAE,CAAC;IAChD,IAAI,UAAU;QAAE,iBAAiB,CAAC,QAAQ,GAAG,EAAE,CAAC;IAEhD,OAAO,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAC3D,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyDatePicker.d.ts","sourceRoot":"","sources":["../../src/components/TyDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TyDatePicker.d.ts","sourceRoot":"","sources":["../../src/components/TyDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,MAAM,WAAW,uBAAuB;IACtC,+EAA+E;IAC/E,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,oDAAoD;IACpD,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,+EAA+E;IAC/E,MAAM,EAAE,WAAW,GAAG,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC;IAC3D,8BAA8B;IAC9B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC5F,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,qCAAqC;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAEtD,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAEvD,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;IAEjE,uCAAuC;IACvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IAE1C,wCAAwC;IACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;CAC5C;AAGD,eAAO,MAAM,YAAY,uFAsJxB,CAAC"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useCallback } from 'react';
|
|
2
|
+
import { needsPropertyBridge } from '../utils/react-version';
|
|
3
|
+
import { useBooleanProperty } from '../utils/use-boolean-prop';
|
|
2
4
|
// React wrapper for ty-date-picker web component
|
|
3
5
|
export const TyDatePicker = React.forwardRef(({ value, size, flavor, label, placeholder, required, disabled, name, clearable, format, locale, withTime, onChange, onOpen, onClose, ...props }, ref) => {
|
|
4
6
|
const elementRef = useRef(null);
|
|
@@ -13,8 +15,12 @@ export const TyDatePicker = React.forwardRef(({ value, size, flavor, label, plac
|
|
|
13
15
|
}
|
|
14
16
|
}
|
|
15
17
|
}, [ref]);
|
|
16
|
-
// Sync value property with the web component
|
|
18
|
+
// Sync value property with the web component.
|
|
19
|
+
// React 18 workaround: prop-to-property bridging is unreliable for empty
|
|
20
|
+
// strings on custom elements. React 19+ handles this natively.
|
|
17
21
|
useEffect(() => {
|
|
22
|
+
if (!needsPropertyBridge)
|
|
23
|
+
return;
|
|
18
24
|
const element = elementRef.current;
|
|
19
25
|
if (element && value !== undefined) {
|
|
20
26
|
// Set the value property directly on the element
|
|
@@ -87,18 +93,18 @@ export const TyDatePicker = React.forwardRef(({ value, size, flavor, label, plac
|
|
|
87
93
|
if (placeholder) {
|
|
88
94
|
webComponentProps.placeholder = placeholder;
|
|
89
95
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
if (
|
|
94
|
-
webComponentProps.
|
|
95
|
-
|
|
96
|
+
const isRequired = useBooleanProperty(elementRef, 'required', required);
|
|
97
|
+
const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
|
|
98
|
+
const isClearable = useBooleanProperty(elementRef, 'clearable', clearable);
|
|
99
|
+
if (isRequired)
|
|
100
|
+
webComponentProps.required = '';
|
|
101
|
+
if (isDisabled)
|
|
102
|
+
webComponentProps.disabled = '';
|
|
103
|
+
if (isClearable)
|
|
104
|
+
webComponentProps.clearable = '';
|
|
96
105
|
if (name) {
|
|
97
106
|
webComponentProps.name = name;
|
|
98
107
|
}
|
|
99
|
-
if (clearable) {
|
|
100
|
-
webComponentProps.clearable = ''; // Boolean attributes as empty string
|
|
101
|
-
}
|
|
102
108
|
if (format) {
|
|
103
109
|
webComponentProps.format = format;
|
|
104
110
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyDatePicker.js","sourceRoot":"","sources":["../../src/components/TyDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TyDatePicker.js","sourceRoot":"","sources":["../../src/components/TyDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AA6D/D,iDAAiD;AACjD,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAC1C,CAAC,EACC,KAAK,EACL,IAAI,EACJ,MAAM,EACN,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,MAAM,EACN,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,GAAG,KAAK,EACT,EAAE,GAAG,EAAE,EAAE;IACR,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,8CAA8C;IAC9C,yEAAyE;IACzE,+DAA+D;IAC/D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,mBAAmB;YAAE,OAAO;QACjC,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QACnC,IAAI,OAAO,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACnC,iDAAiD;YAChD,OAAe,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;QACvC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,uBAAuB;IACvB,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,KAAY,EAAE,EAAE;QAChD,MAAM,WAAW,GAAG,KAA6C,CAAC;QAClE,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,WAAW,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,qBAAqB;IACrB,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,KAAY,EAAE,EAAE;QAC9C,MAAM,WAAW,GAAG,KAAwB,CAAC;QAC7C,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,WAAW,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,sBAAsB;IACtB,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,KAAY,EAAE,EAAE;QAC/C,MAAM,WAAW,GAAG,KAAwB,CAAC;QAC7C,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,WAAW,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,yBAAyB;IACzB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QACnC,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,SAAS,GAAmC,EAAE,CAAC;QAErD,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACjD,SAAS,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,MAAM,EAAE,CAAC;YACX,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;YAC7C,SAAS,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;QACvC,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;YAC/C,SAAS,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;QACzC,CAAC;QAED,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,EAAE;gBACzC,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;YAClD,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvE,kDAAkD;IAClD,MAAM,iBAAiB,GAAwB;QAC7C,GAAG,KAAK;QACR,GAAG,EAAE,UAAU;KAChB,CAAC;IAEF,mDAAmD;IACnD,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,iBAAiB,CAAC,KAAK,GAAG,KAAK,CAAC;IAClC,CAAC;IAED,IAAI,IAAI,EAAE,CAAC;QACT,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC;IAChC,CAAC;IAED,IAAI,MAAM,EAAE,CAAC;QACX,iBAAiB,CAAC,MAAM,GAAG,MAAM,CAAC;IACpC,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,iBAAiB,CAAC,KAAK,GAAG,KAAK,CAAC;IAClC,CAAC;IAED,IAAI,WAAW,EAAE,CAAC;QAChB,iBAAiB,CAAC,WAAW,GAAG,WAAW,CAAC;IAC9C,CAAC;IAED,MAAM,UAAU,GAAG,kBAAkB,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IACxE,MAAM,UAAU,GAAG,kBAAkB,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IACxE,MAAM,WAAW,GAAG,kBAAkB,CAAC,UAAU,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IAE3E,IAAI,UAAU;QAAE,iBAAiB,CAAC,QAAQ,GAAG,EAAE,CAAC;IAChD,IAAI,UAAU;QAAE,iBAAiB,CAAC,QAAQ,GAAG,EAAE,CAAC;IAChD,IAAI,WAAW;QAAE,iBAAiB,CAAC,SAAS,GAAG,EAAE,CAAC;IAElD,IAAI,IAAI,EAAE,CAAC;QACT,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC;IAChC,CAAC;IAED,IAAI,MAAM,EAAE,CAAC;QACX,iBAAiB,CAAC,MAAM,GAAG,MAAM,CAAC;IACpC,CAAC;IAED,IAAI,MAAM,EAAE,CAAC;QACX,iBAAiB,CAAC,MAAM,GAAG,MAAM,CAAC;IACpC,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,iBAAiB,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAE,kCAAkC;IAC1E,CAAC;IAED,OAAO,KAAK,CAAC,aAAa,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;AAClE,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}
|
|
@@ -21,22 +21,33 @@ export interface TyDropdownProps extends Omit<React.HTMLAttributes<HTMLElement>,
|
|
|
21
21
|
label?: string;
|
|
22
22
|
/** Disable the dropdown */
|
|
23
23
|
disabled?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Loading state — replaces the open popup options list with a centered
|
|
26
|
+
* spinner. Search input stays usable. Pair with `externalSearch` while
|
|
27
|
+
* fetching results from a parent-owned data source.
|
|
28
|
+
*/
|
|
29
|
+
loading?: boolean;
|
|
24
30
|
/** Make dropdown readonly */
|
|
25
31
|
readonly?: boolean;
|
|
26
32
|
/** Required field */
|
|
27
33
|
required?: boolean;
|
|
28
|
-
/** Enable search functionality */
|
|
29
|
-
searchable?: boolean;
|
|
30
34
|
/** Show clear button */
|
|
31
35
|
clearable?: boolean;
|
|
32
36
|
/** Disable clear button (alias for clearable={false}) */
|
|
33
37
|
notClearable?: boolean;
|
|
34
38
|
/** Debounce in milliseconds (0-5000) */
|
|
35
39
|
debounce?: number;
|
|
36
|
-
/**
|
|
37
|
-
|
|
38
|
-
|
|
40
|
+
/**
|
|
41
|
+
* Switch to external (remote) search mode. Default is `false` — the dropdown
|
|
42
|
+
* filters its options locally. When `true`, the dropdown stops filtering and
|
|
43
|
+
* dispatches `search` events on each keystroke; the parent owns filtering
|
|
44
|
+
* and updates the children.
|
|
45
|
+
*/
|
|
39
46
|
externalSearch?: boolean;
|
|
47
|
+
/** @deprecated Use `externalSearch` instead. */
|
|
48
|
+
notSearchable?: boolean;
|
|
49
|
+
/** @deprecated Use `externalSearch` instead. Pass `searchable={false}` was equivalent to `externalSearch={true}`. */
|
|
50
|
+
searchable?: boolean;
|
|
40
51
|
/** Form field name for form submission */
|
|
41
52
|
name?: string;
|
|
42
53
|
options?: OptionData[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyDropdown.d.ts","sourceRoot":"","sources":["../../src/components/TyDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TyDropdown.d.ts","sourceRoot":"","sources":["../../src/components/TyDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,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;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,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,qFAqJtB,CAAC"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useCallback } from 'react';
|
|
2
|
+
import { needsPropertyBridge } from '../utils/react-version';
|
|
3
|
+
import { useBooleanProperty, coerceBool } from '../utils/use-boolean-prop';
|
|
2
4
|
// React wrapper for ty-dropdown web component
|
|
3
|
-
export const TyDropdown = React.forwardRef(({ options, children, onChange, onSearch, disabled,
|
|
5
|
+
export const TyDropdown = React.forwardRef(({ options, children, onChange, onSearch, disabled, loading, externalSearch, notSearchable, searchable, clearable, notClearable, debounce, name, value, ...props }, ref) => {
|
|
4
6
|
const elementRef = useRef(null);
|
|
5
7
|
const handleChange = useCallback((event) => {
|
|
6
8
|
if (onChange) {
|
|
@@ -36,7 +38,10 @@ export const TyDropdown = React.forwardRef(({ options, children, onChange, onSea
|
|
|
36
38
|
// it changes. React 18's prop-to-property bridging for custom elements is
|
|
37
39
|
// unreliable for empty strings (programmatic resets), so we set the
|
|
38
40
|
// property directly to guarantee the dropdown clears on `value=""`.
|
|
41
|
+
// React 19+ handles this natively, so the effect short-circuits there.
|
|
39
42
|
useEffect(() => {
|
|
43
|
+
if (!needsPropertyBridge)
|
|
44
|
+
return;
|
|
40
45
|
const element = elementRef.current;
|
|
41
46
|
if (!element)
|
|
42
47
|
return;
|
|
@@ -68,32 +73,42 @@ export const TyDropdown = React.forwardRef(({ options, children, onChange, onSea
|
|
|
68
73
|
// Slotted approach - use provided children
|
|
69
74
|
return children;
|
|
70
75
|
};
|
|
76
|
+
// Imperative property sync for boolean props (see use-boolean-prop.ts).
|
|
77
|
+
const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
|
|
78
|
+
const isLoading = useBooleanProperty(elementRef, 'loading', loading);
|
|
79
|
+
const isExternalSearch = coerceBool(externalSearch) || coerceBool(notSearchable) || searchable === false;
|
|
80
|
+
useBooleanProperty(elementRef, 'externalSearch', isExternalSearch);
|
|
81
|
+
// clearable: explicit boolean OR the `notClearable` alias inverts it
|
|
82
|
+
const isClearable = clearable !== undefined
|
|
83
|
+
? coerceBool(clearable)
|
|
84
|
+
: (coerceBool(notClearable) ? false : undefined);
|
|
85
|
+
useEffect(() => {
|
|
86
|
+
if (!needsPropertyBridge)
|
|
87
|
+
return;
|
|
88
|
+
if (isClearable === undefined)
|
|
89
|
+
return;
|
|
90
|
+
const el = elementRef.current;
|
|
91
|
+
if (!el)
|
|
92
|
+
return;
|
|
93
|
+
if (Boolean(el.clearable) !== isClearable)
|
|
94
|
+
el.clearable = isClearable;
|
|
95
|
+
}, [isClearable]);
|
|
71
96
|
// Convert React props to web component attributes
|
|
72
97
|
const webComponentProps = {
|
|
73
98
|
...props,
|
|
74
99
|
ref: elementRef,
|
|
75
100
|
};
|
|
76
|
-
|
|
77
|
-
if (disabled)
|
|
101
|
+
if (isDisabled)
|
|
78
102
|
webComponentProps.disabled = '';
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
else if (externalSearch) {
|
|
84
|
-
// Support deprecated externalSearch for backward compatibility
|
|
85
|
-
webComponentProps['not-searchable'] = '';
|
|
86
|
-
}
|
|
103
|
+
if (isLoading)
|
|
104
|
+
webComponentProps.loading = '';
|
|
105
|
+
if (isExternalSearch)
|
|
106
|
+
webComponentProps['external-search'] = '';
|
|
87
107
|
// Handle clearable functionality
|
|
88
|
-
if (
|
|
89
|
-
|
|
90
|
-
webComponentProps.clearable = '';
|
|
91
|
-
}
|
|
92
|
-
else {
|
|
93
|
-
webComponentProps['not-clearable'] = '';
|
|
94
|
-
}
|
|
108
|
+
if (isClearable === true) {
|
|
109
|
+
webComponentProps.clearable = '';
|
|
95
110
|
}
|
|
96
|
-
if (
|
|
111
|
+
else if (isClearable === false) {
|
|
97
112
|
webComponentProps['not-clearable'] = '';
|
|
98
113
|
}
|
|
99
114
|
// Add debounce attribute
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyDropdown.js","sourceRoot":"","sources":["../../src/components/TyDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TyDropdown.js","sourceRoot":"","sources":["../../src/components/TyDropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface TyFileUploadProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
|
|
3
|
+
/** Form field name — used as the FormData key */
|
|
4
|
+
name?: string;
|
|
5
|
+
/** Allow selecting multiple files */
|
|
6
|
+
multiple?: boolean;
|
|
7
|
+
/** File type filter passed to the underlying input (e.g. "image/*", ".pdf,.docx") */
|
|
8
|
+
accept?: string;
|
|
9
|
+
/** Field label rendered above the drop zone */
|
|
10
|
+
label?: string;
|
|
11
|
+
/** Hint text shown inside the drop zone when no files are selected */
|
|
12
|
+
placeholder?: string;
|
|
13
|
+
/** Disable interaction */
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
/** Mark the field as required (shows asterisk) */
|
|
16
|
+
required?: boolean;
|
|
17
|
+
/** Validation error message — also applies danger border styling */
|
|
18
|
+
error?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Fires when the selection changes — browse, drag-drop, or remove.
|
|
21
|
+
* Maps to the native 'change' event from ty-file-upload.
|
|
22
|
+
*/
|
|
23
|
+
onChange?: (event: CustomEvent<TyFileUploadEventDetail>) => void;
|
|
24
|
+
}
|
|
25
|
+
export interface TyFileUploadEventDetail {
|
|
26
|
+
value: File[];
|
|
27
|
+
files: File[];
|
|
28
|
+
names: string[];
|
|
29
|
+
}
|
|
30
|
+
export declare const TyFileUpload: React.ForwardRefExoticComponent<TyFileUploadProps & React.RefAttributes<HTMLElement>>;
|
|
31
|
+
//# sourceMappingURL=TyFileUpload.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyFileUpload.d.ts","sourceRoot":"","sources":["../../src/components/TyFileUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC5F,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;CAClE;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAGD,eAAO,MAAM,YAAY,uFA8DxB,CAAC"}
|