tyrell-react 1.0.0-TC12 → 1.0.0-TC17

package/src/components/TyModal.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useRef, useImperativeHandle } from 'react';
+import { useBooleanProperty, coerceBool } from '../utils/use-boolean-prop';
+import { needsPropertyBridge } from '../utils/react-version';
 
 // Event detail structure for modal events
 export interface TyModalEventDetail {
@@ -104,33 +106,49 @@ export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
       };
     }, [onOpen, onClose]);
 
+    // Imperative property sync for boolean props (see use-boolean-prop.ts).
+    // Without this, flipping `open` from `true` to `false` on React 18 leaves
+    // the `open` attribute on the element and the modal stays open.
+    const isOpen = useBooleanProperty(elementRef, 'open', open);
+    const isProt = useBooleanProperty(elementRef, 'protected', isProtected);
+
+    // For default-true booleans (backdrop, closeOn*), only the explicit-false
+    // case is interesting — bridge it imperatively too so it propagates.
+    useEffect(() => {
+      if (!needsPropertyBridge) return;
+      const el = elementRef.current as any;
+      if (!el) return;
+      const setIf = (prop: string, raw: unknown) => {
+        if (raw === undefined) return;
+        const next = coerceBool(raw);
+        if (Boolean(el[prop]) !== next) el[prop] = next;
+      };
+      setIf('backdrop', backdrop);
+      setIf('closeOnOutsideClick', closeOnOutsideClick);
+      setIf('closeOnEscape', closeOnEscape);
+    }, [backdrop, closeOnOutsideClick, closeOnEscape]);
+
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...props,
       ref: elementRef,
     };
 
-    // Add boolean attributes using correct HTML attribute names
-    if (open) {
-      webComponentProps.open = '';  // Boolean attributes as empty string
-    }
+    if (isOpen) webComponentProps.open = '';
+    if (isProt) webComponentProps.protected = '';
 
-    if (backdrop === false) {  // Only set if explicitly false (default is true)
+    // Default-true booleans use "false" string on the attribute side; the
+    // core's parseBoolAttr handles it correctly.
+    if (backdrop !== undefined && !coerceBool(backdrop)) {
       webComponentProps.backdrop = 'false';
     }
-
-    if (closeOnOutsideClick === false) {  // Only set if explicitly false (default is true)
+    if (closeOnOutsideClick !== undefined && !coerceBool(closeOnOutsideClick)) {
       webComponentProps['close-on-outside-click'] = 'false';
     }
-
-    if (closeOnEscape === false) {  // Only set if explicitly false (default is true)
+    if (closeOnEscape !== undefined && !coerceBool(closeOnEscape)) {
       webComponentProps['close-on-escape'] = 'false';
     }
 
-    if (isProtected) {
-      webComponentProps.protected = '';  // Boolean attributes as empty string
-    }
-
     return React.createElement(
       'ty-modal',
       webComponentProps,

package/src/components/TyMultiselect.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useCallback } from 'react';
 import { needsPropertyBridge } from '../utils/react-version';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Type definitions for Ty Multiselect component
 export interface TyMultiselectEventDetail {
@@ -144,6 +145,13 @@ export const TyMultiselect = React.forwardRef<HTMLElement, TyMultiselectProps>(
       };
     }, [handleChange, handleSearch, onChange, onSearch]);
 
+    // Imperative property sync for boolean props (see use-boolean-prop.ts).
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isLoading = useBooleanProperty(elementRef, 'loading', loading);
+    const isReadonly = useBooleanProperty(elementRef, 'readonly', readonly);
+    const isRequired = useBooleanProperty(elementRef, 'required', required);
+    const isExternalSearch = useBooleanProperty(elementRef, 'externalSearch', externalSearch);
+
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...props,
@@ -161,14 +169,11 @@ export const TyMultiselect = React.forwardRef<HTMLElement, TyMultiselectProps>(
       webComponentProps.placeholder = placeholder;
     }
 
-    if (loading) webComponentProps.loading = '';
-    if (disabled) {
-      webComponentProps.disabled = '';  // Boolean attributes as empty string
-    }
-
-    if (readonly) {
-      webComponentProps.readonly = '';  // Boolean attributes as empty string
-    }
+    if (isLoading) webComponentProps.loading = '';
+    if (isDisabled) webComponentProps.disabled = '';
+    if (isReadonly) webComponentProps.readonly = '';
+    if (isRequired) webComponentProps.required = '';
+    if (isExternalSearch) webComponentProps['external-search'] = '';
 
     if (flavor) {
       webComponentProps.flavor = flavor;
@@ -178,18 +183,9 @@ export const TyMultiselect = React.forwardRef<HTMLElement, TyMultiselectProps>(
       webComponentProps.label = label;
     }
 
-    if (required) {
-      webComponentProps.required = '';  // Boolean attributes as empty string
-    }
-
     if (name) {
       webComponentProps.name = name;
     }
-    
-    // External (remote) search mode: parent owns filtering, multiselect dispatches search events
-    if (externalSearch) {
-      webComponentProps['external-search'] = '';
-    }
 
     // Add debounce attribute
     if (debounce !== undefined) {

package/src/components/TyOption.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Type definitions for Ty Option component
 export interface TyOptionProps extends React.HTMLAttributes<HTMLElement> {
@@ -25,13 +26,17 @@ export const TyOption = React.forwardRef<HTMLElement, TyOptionProps>(
       }
     }, [ref]);
 
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isSelected = useBooleanProperty(elementRef, 'selected', selected);
+    const isHidden = useBooleanProperty(elementRef, 'hidden', hidden);
+
     return React.createElement(
       'ty-option',
       {
         ...props,
-        ...(disabled && { disabled: "" }),
-        ...(selected && { selected: "" }),
-        ...(hidden && { hidden: "" }),
+        ...(isDisabled && { disabled: "" }),
+        ...(isSelected && { selected: "" }),
+        ...(isHidden && { hidden: "" }),
         ref: elementRef,
       },
       children

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,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { needsPropertyBridge } from '../utils/react-version';
+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`) */
@@ -38,26 +38,17 @@ export const TyRadio = React.forwardRef<HTMLElement, TyRadioProps>(
       }
     }, [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]);
+    // 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,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { needsPropertyBridge } from '../utils/react-version';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 export interface TySwitchProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {
   /** Checked (on) state */
@@ -88,27 +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]);
+    // 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,5 +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 {
@@ -160,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/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;
+}