tyrell-react 1.0.0-TC10 → 1.0.0-TC12

package/src/components/TySwitch.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { needsPropertyBridge } from '../utils/react-version';
 
 export interface TySwitchProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {
   /** Checked (on) state */
@@ -87,6 +88,19 @@ export const TySwitch = React.forwardRef<HTMLElement, TySwitchProps>(
       }
     }, [ref]);
 
+    // Imperatively sync `checked` to the underlying property. React 18 sets
+    // boolean attributes as empty strings on first render but doesn't reliably
+    // remove them when the prop flips back to false on a custom element.
+    // React 19+ handles boolean prop-to-property bridging natively.
+    useEffect(() => {
+      if (!needsPropertyBridge) return;
+      const element = elementRef.current as any;
+      if (!element) return;
+      if (Boolean(element.checked) !== Boolean(checked)) {
+        element.checked = Boolean(checked);
+      }
+    }, [checked]);
+
     const webComponentProps: Record<string, any> = {
       ...props,
       ref: elementRef,

package/src/components/TyTextarea.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useCallback } from 'react';
+import { needsPropertyBridge } from '../utils/react-version';
 
 // Event detail structure for ty-textarea events
 export interface TyTextareaEventDetail {
@@ -45,11 +46,30 @@ export interface TyTextareaProps extends Omit<React.HTMLAttributes<HTMLElement>,
   onBlur?: (event: FocusEvent) => void;
 }
 
+// One-time warning flag.
+let _warnedOnInputProp = false;
+
 // React wrapper for ty-textarea web component
 export const TyTextarea = React.forwardRef<HTMLElement, TyTextareaProps>(
   ({ onChange, onChangeCommit, onFocus, onBlur, disabled, required, minHeight, maxHeight, ...props }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
+    // Same `onInput` → `onChange` redirect as TyInput. React's synthetic-event
+    // system strips event.detail; users hitting e.detail.value will crash.
+    const onInputProp = (props as any).onInput as ((e: any) => void) | undefined;
+    if (onInputProp && !onChange) {
+      if (!_warnedOnInputProp) {
+        _warnedOnInputProp = true;
+        console.warn(
+          '[tyrell-react] <TyTextarea> received `onInput`. ' +
+          'React strips event.detail; use `onChange` instead — it receives the raw CustomEvent. ' +
+          'Forwarding for now, but please rename the prop.'
+        );
+      }
+      onChange = onInputProp;
+    }
+    delete (props as any).onInput;
+
     // Map onChange to input event (React convention)
     const handleInput = useCallback((event: CustomEvent<TyTextareaEventDetail>) => {
       if (onChange) {
@@ -128,7 +148,10 @@ export const TyTextarea = React.forwardRef<HTMLElement, TyTextareaProps>(
     }, [ref]);
 
     // Imperatively sync `value` to the underlying element's property.
+    // React 18 workaround: prop-to-property bridging is unreliable for empty
+    // strings on custom elements. React 19+ handles this natively.
     useEffect(() => {
+      if (!needsPropertyBridge) return;
       const element = elementRef.current as any;
       if (!element) return;
       const next = (props as any).value ?? '';

package/src/components/index.ts

@@ -65,6 +65,9 @@ export type { TyRadioGroupProps, TyRadioGroupEventDetail } from './TyRadioGroup'
 export { TyCopy } from './TyCopy';
 export type { TyCopyProps } from './TyCopy';
 
+export { TyFileUpload } from './TyFileUpload';
+export type { TyFileUploadProps, TyFileUploadEventDetail } from './TyFileUpload';
+
 export { TyTabs } from './TyTabs';
 export type { TyTabsProps, TabChangeDetail } from './TyTabs';
 
@@ -112,6 +115,7 @@ export { TySwitch as Switch } from './TySwitch';
 export { TyRadio as Radio } from './TyRadio';
 export { TyRadioGroup as RadioGroup } from './TyRadioGroup';
 export { TyCopy as Copy } from './TyCopy';
+export { TyFileUpload as FileUpload } from './TyFileUpload';
 export { TyTabs as Tabs } from './TyTabs';
 export { TyTab as Tab } from './TyTab';
 export { TyCalendarMonth as CalendarMonth } from './TyCalendarMonth';
@@ -179,6 +183,9 @@ export type { TyRadioGroupProps as RadioGroupProps, TyRadioGroupEventDetail as R
 // Copy types
 export type { TyCopyProps as CopyProps } from './TyCopy';
 
+// FileUpload types
+export type { TyFileUploadProps as FileUploadProps, TyFileUploadEventDetail as FileUploadEventDetail } from './TyFileUpload';
+
 // Tabs types
 export type { TyTabsProps as TabsProps } from './TyTabs';
 

package/src/utils/react-version.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+// React 19 natively bridges props to custom-element properties (including
+// empty strings, `false` booleans, functions, and objects). On React 18 we
+// must imperatively assign these properties via useEffect. Wrappers gate
+// their bridging effects on this flag so the workaround is dead code on
+// React 19+ and removable when React 18 support is eventually dropped.
+export const needsPropertyBridge = parseInt(React.version, 10) < 19;