tyrell-react 1.0.0-TC11 → 1.0.0-TC17

package/src/components/TyPopup.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Type definitions for Ty Popup component
 export interface TyPopupProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClose'> {
@@ -92,13 +93,11 @@ export const TyPopup = React.forwardRef<TyPopupElement, TyPopupProps>(
       webComponentProps.offset = offset.toString();
     }
 
-    if (manual) {
-      webComponentProps.manual = '';  // Boolean attributes as empty string
-    }
+    const isManual = useBooleanProperty(elementRef, 'manual', manual);
+    const isDisableClose = useBooleanProperty(elementRef, 'disableClose', disableClose);
 
-    if (disableClose) {
-      webComponentProps['disable-close'] = '';  // Boolean attributes as empty string
-    }
+    if (isManual) webComponentProps.manual = '';
+    if (isDisableClose) webComponentProps['disable-close'] = '';
 
     return React.createElement(
       'ty-popup',

package/src/components/TyRadio.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 export interface TyRadioProps extends React.HTMLAttributes<HTMLElement> {
   /** Form field value (selected by parent ty-radio-group when matches its `value`) */
@@ -37,13 +38,17 @@ export const TyRadio = React.forwardRef<HTMLElement, TyRadioProps>(
       }
     }, [ref]);
 
+    // Imperative property sync for boolean props (see use-boolean-prop.ts).
+    const isChecked = useBooleanProperty(elementRef, 'checked', checked);
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+
     const webComponentProps: Record<string, any> = {
       ...props,
       ref: elementRef,
     };
 
-    if (checked) webComponentProps.checked = '';
-    if (disabled) webComponentProps.disabled = '';
+    if (isChecked) webComponentProps.checked = '';
+    if (isDisabled) webComponentProps.disabled = '';
 
     if (value !== undefined) webComponentProps.value = value;
     if (size) webComponentProps.size = size;

package/src/components/TyRadioGroup.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 export interface TyRadioGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {
   /** Currently selected value (matches one child `<TyRadio value="...">`) */
@@ -98,13 +99,16 @@ export const TyRadioGroup = React.forwardRef<HTMLElement, TyRadioGroupProps>(
       }
     }, [ref]);
 
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isRequired = useBooleanProperty(elementRef, 'required', required);
+
     const webComponentProps: Record<string, any> = {
       ...props,
       ref: elementRef,
     };
 
-    if (disabled) webComponentProps.disabled = '';
-    if (required) webComponentProps.required = '';
+    if (isDisabled) webComponentProps.disabled = '';
+    if (isRequired) webComponentProps.required = '';
 
     if (value !== undefined) webComponentProps.value = value;
     if (name) webComponentProps.name = name;

package/src/components/TyScrollContainer.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useRef, useImperativeHandle } from 'react';
+import { needsPropertyBridge } from '../utils/react-version';
+import { useBooleanProperty, coerceBool } from '../utils/use-boolean-prop';
 
 // Type definitions for Ty ScrollContainer component
 export interface TyScrollContainerProps extends React.HTMLAttributes<HTMLElement> {
@@ -63,6 +65,19 @@ export const TyScrollContainer = React.forwardRef<TyScrollContainerRef, TyScroll
       }
     }), []);
 
+    // shadow defaults to true; only the explicit-false case matters at the
+    // attribute level. Bridge it imperatively so flipping back to true
+    // propagates on React 18.
+    useEffect(() => {
+      if (!needsPropertyBridge) return;
+      if (shadow === undefined) return;
+      const el = elementRef.current as any;
+      if (!el) return;
+      const next = coerceBool(shadow);
+      if (Boolean(el.shadow) !== next) el.shadow = next;
+    }, [shadow]);
+    const isHideScrollbar = useBooleanProperty(elementRef, 'hideScrollbar', hideScrollbar);
+
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...props,
@@ -73,8 +88,8 @@ export const TyScrollContainer = React.forwardRef<TyScrollContainerRef, TyScroll
     if (maxHeight) webComponentProps['max-height'] = maxHeight;
 
     // Add boolean attributes
-    if (shadow === false) webComponentProps.shadow = 'false';
-    if (hideScrollbar) webComponentProps['hide-scrollbar'] = true;
+    if (shadow !== undefined && !coerceBool(shadow)) webComponentProps.shadow = 'false';
+    if (isHideScrollbar) webComponentProps['hide-scrollbar'] = '';
 
     return React.createElement(
       'ty-scroll-container',

package/src/components/TySwitch.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 export interface TySwitchProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {
   /** Checked (on) state */
@@ -87,14 +88,19 @@ export const TySwitch = React.forwardRef<HTMLElement, TySwitchProps>(
       }
     }, [ref]);
 
+    // Imperative property sync for boolean props (see use-boolean-prop.ts).
+    const isChecked = useBooleanProperty(elementRef, 'checked', checked);
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isRequired = useBooleanProperty(elementRef, 'required', required);
+
     const webComponentProps: Record<string, any> = {
       ...props,
       ref: elementRef,
     };
 
-    if (checked) webComponentProps.checked = '';
-    if (disabled) webComponentProps.disabled = '';
-    if (required) webComponentProps.required = '';
+    if (isChecked) webComponentProps.checked = '';
+    if (isDisabled) webComponentProps.disabled = '';
+    if (isRequired) webComponentProps.required = '';
 
     if (value) webComponentProps.value = value;
     if (name) webComponentProps.name = name;

package/src/components/TyTab.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Type definitions for Ty Tab component
 export interface TyTabProps extends React.HTMLAttributes<HTMLElement> {
@@ -47,7 +48,8 @@ export const TyTab = React.forwardRef<HTMLElement, TyTabProps>(
     webComponentProps.id = id;
     
     // Add boolean attributes
-    if (disabled) webComponentProps.disabled = '';
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    if (isDisabled) webComponentProps.disabled = '';
     
     // Add string attributes
     if (label) webComponentProps.label = label;

package/src/components/TyTag.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useCallback } from 'react';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // CSS custom properties that cascade into the shadow DOM for full color control
 export interface TyTagCSSProperties extends React.CSSProperties {
@@ -57,6 +58,12 @@ export const TyTag = React.forwardRef<HTMLElement, TyTagProps>(
       }
     }, [ref]);
 
+    const isNotPill = useBooleanProperty(elementRef, 'notPill', notPill);
+    const isClickable = useBooleanProperty(elementRef, 'clickable', clickable);
+    const isDismissible = useBooleanProperty(elementRef, 'dismissible', dismissible);
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isSelected = useBooleanProperty(elementRef, 'selected', selected);
+
     return React.createElement(
       'ty-tag',
       {
@@ -64,11 +71,11 @@ export const TyTag = React.forwardRef<HTMLElement, TyTagProps>(
         // click is dispatched as composed CustomEvent by the web component — React's
         // synthetic onClick already catches it, so we just pass it through as onClick
         ...(onClick && { onClick }),
-        ...(notPill && { 'not-pill': "" }),
-        ...(clickable && { clickable: "" }),
-        ...(dismissible && { dismissible: "" }),
-        ...(disabled && { disabled: "" }),
-        ...(selected && { selected: "" }),
+        ...(isNotPill && { 'not-pill': "" }),
+        ...(isClickable && { clickable: "" }),
+        ...(isDismissible && { dismissible: "" }),
+        ...(isDisabled && { disabled: "" }),
+        ...(isSelected && { selected: "" }),
         ref: elementRef,
       },
       children

package/src/components/TyTextarea.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useRef, useCallback } from 'react';
+import { needsPropertyBridge } from '../utils/react-version';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Event detail structure for ty-textarea events
 export interface TyTextareaEventDetail {
@@ -147,7 +149,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 ?? '';
@@ -156,12 +161,15 @@ export const TyTextarea = React.forwardRef<HTMLElement, TyTextareaProps>(
       }
     }, [(props as any).value]);
 
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isRequired = useBooleanProperty(elementRef, 'required', required);
+
     return React.createElement(
       'ty-textarea',
       {
         ...props,
-        ...(disabled && { disabled: "" }),
-        ...(required && { required: "" }),
+        ...(isDisabled && { disabled: "" }),
+        ...(isRequired && { required: "" }),
         ...(minHeight && { 'min-height': minHeight }),  // Convert camelCase to kebab-case
         ...(maxHeight && { 'max-height': maxHeight }),  // Convert camelCase to kebab-case
         ref: elementRef,

package/src/components/TyTooltip.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Type definitions for Ty Tooltip component
 export interface TyTooltipProps extends React.HTMLAttributes<HTMLElement> {
@@ -64,9 +65,8 @@ export const TyTooltip = React.forwardRef<HTMLElement, TyTooltipProps>(
       webComponentProps.delay = delay.toString();
     }
 
-    if (disabled) {
-      webComponentProps.disabled = '';  // Boolean attributes as empty string
-    }
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    if (isDisabled) webComponentProps.disabled = '';
 
     if (flavor) {
       webComponentProps.flavor = flavor;

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;

package/src/utils/use-boolean-prop.ts

@@ -0,0 +1,62 @@
+import { useEffect, RefObject } from 'react';
+import { needsPropertyBridge } from './react-version';
+
+/**
+ * Coerce a value to a boolean using the same rules as the core property
+ * manager (packages/core/src/utils/property-manager.ts:142-152). This matters
+ * because consumers sometimes pass the string "false" through untyped call
+ * sites (JSON config, query params, server-rendered props) — and the JS
+ * `Boolean("false")` is surprisingly `true`.
+ *
+ *   undefined | null | false | "false" | "0"  → false
+ *   ""                                        → true  (HTML boolean-attribute convention)
+ *   any other truthy                          → true
+ */
+export function coerceBool(value: unknown): boolean {
+  if (value === undefined || value === null || value === false) return false;
+  if (typeof value === 'string') {
+    if (value === '') return true;
+    const norm = value.toLowerCase().trim();
+    if (norm === 'false' || norm === '0') return false;
+    return true;
+  }
+  return Boolean(value);
+}
+
+/**
+ * Imperatively keep a boolean property on the underlying custom element in
+ * sync with its React prop.
+ *
+ * Why this exists: React 18 sets boolean attributes as empty strings on the
+ * first render to a custom element but does not reliably *remove* them when
+ * the prop flips back to `false`. Without this bridge, `<TyModal open>` →
+ * `<TyModal open={false}>` leaves the `open` attribute on the element and
+ * the modal stays open. Same class of bug affects `disabled`, `required`,
+ * `clearable`, `loading`, `readonly`, `protected`, etc.
+ *
+ * React 19+ bridges this natively — the effect short-circuits via
+ * `needsPropertyBridge`, so this is dead code on modern React.
+ *
+ * Pass the *camelCase JS property name* on the element (e.g. `externalSearch`
+ * for the `external-search` attribute). The core base class handles the
+ * attribute-side sync once the property changes.
+ *
+ * Returns the coerced boolean so the caller can also drive its conditional
+ * JSX attribute emission with a value that correctly handles "false".
+ */
+export function useBooleanProperty(
+  ref: RefObject<HTMLElement | null>,
+  propName: string,
+  value: unknown
+): boolean {
+  const coerced = coerceBool(value);
+  useEffect(() => {
+    if (!needsPropertyBridge) return;
+    const el = ref.current as any;
+    if (!el) return;
+    if (Boolean(el[propName]) !== coerced) {
+      el[propName] = coerced;
+    }
+  }, [coerced, propName, ref]);
+  return coerced;
+}