tyrell-react 1.0.0-TC25 → 1.0.0-TC27

package/src/components/TyDropdown.tsx

@@ -1,252 +0,0 @@
-import React, { useEffect, useRef, useCallback } from 'react';
-import { needsPropertyBridge } from '../utils/react-version';
-import { useBooleanProperty, coerceBool } from '../utils/use-boolean-prop';
-
-// Option data structure for data-driven approach
-export interface OptionData {
-  value: string;
-  text: string;
-  disabled?: boolean;
-}
-
-// Event detail structure for dropdown events
-export interface TyDropdownEventDetail {
-  option: HTMLElement;
-}
-
-// Type definitions for Ty Dropdown component
-export interface TyDropdownProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'style'> {
-  style?: import('./TyInput').TyInputCSSProperties;
-  /** Semantic styling variant */
-  flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
-  
-  /** Dropdown size */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  
-  /** Selected value */
-  value?: string;
-  
-  /** Placeholder text */
-  placeholder?: string;
-  
-  /** Dropdown label */
-  label?: string;
-  
-  /** Disable the dropdown */
-  disabled?: boolean;
-
-  /**
-   * Loading state — replaces the open popup options list with a centered
-   * spinner. Search input stays usable. Pair with `externalSearch` while
-   * fetching results from a parent-owned data source.
-   */
-  loading?: boolean;
-
-  /** Make dropdown readonly */
-  readonly?: boolean;
-  
-  /** Required field */
-  required?: boolean;
-  
-  /** Show clear button */
-  clearable?: boolean;
-
-  /** Disable clear button (alias for clearable={false}) */
-  notClearable?: boolean;
-
-  /** Debounce in milliseconds (0-5000) */
-  debounce?: number;
-
-  /**
-   * Switch to external (remote) search mode. Default is `false` — the dropdown
-   * filters its options locally. When `true`, the dropdown stops filtering and
-   * dispatches `search` events on each keystroke; the parent owns filtering
-   * and updates the children.
-   */
-  externalSearch?: boolean;
-
-  /** @deprecated Use `externalSearch` instead. */
-  notSearchable?: boolean;
-
-  /** @deprecated Use `externalSearch` instead. Pass `searchable={false}` was equivalent to `externalSearch={true}`. */
-  searchable?: boolean;
-  
-  /** Form field name for form submission */
-  name?: string;
-  
-  // Data-driven approach
-  options?: OptionData[];
-  
-  // React event handlers
-  onChange?: (event: CustomEvent<TyDropdownEventDetail>) => void;
-  onSearch?: (event: CustomEvent<{ query: string; element: HTMLElement }>) => void;
-  onOpen?: (event: CustomEvent) => void;
-  onClose?: (event: CustomEvent) => void;
-
-  // Children for slotted approach
-  children?: React.ReactNode;
-}
-
-// React wrapper for ty-dropdown web component
-export const TyDropdown = React.forwardRef<HTMLElement, TyDropdownProps>(
-  ({
-    options,
-    children,
-    onChange,
-    onSearch,
-    onOpen,
-    onClose,
-    disabled,
-    loading,
-    externalSearch,
-    notSearchable,
-    searchable,
-    clearable,
-    notClearable,
-    debounce,
-    name,
-    value,
-    ...props
-  }, ref) => {
-    const elementRef = useRef<HTMLElement>(null);
-
-    const handleChange = useCallback((event: CustomEvent<TyDropdownEventDetail>) => {
-      if (onChange) {
-        onChange(event);
-      }
-    }, [onChange]);
-
-    const handleSearch = useCallback((event: CustomEvent<{ query: string; element: HTMLElement }>) => {
-      if (onSearch) {
-        onSearch(event);
-      }
-    }, [onSearch]);
-
-    const handleOpen = useCallback((event: Event) => { if (onOpen) onOpen(event as CustomEvent); }, [onOpen]);
-    const handleClose = useCallback((event: Event) => { if (onClose) onClose(event as CustomEvent); }, [onClose]);
-
-    useEffect(() => {
-      const element = elementRef.current;
-      if (!element) return;
-
-      // Listen for custom events from ty-dropdown
-      if (onChange) {
-        element.addEventListener('change', handleChange as EventListener);
-      }
-
-      if (onSearch) {
-        element.addEventListener('search', handleSearch as EventListener);
-      }
-
-      if (onOpen) element.addEventListener('open', handleOpen);
-      if (onClose) element.addEventListener('close', handleClose);
-
-      return () => {
-        if (onChange) {
-          element.removeEventListener('change', handleChange as EventListener);
-        }
-        if (onSearch) {
-          element.removeEventListener('search', handleSearch as EventListener);
-        }
-        if (onOpen) element.removeEventListener('open', handleOpen);
-        if (onClose) element.removeEventListener('close', handleClose);
-      };
-    }, [handleChange, handleSearch, handleOpen, handleClose, onChange, onSearch, onOpen, onClose]);
-
-    // Imperatively sync `value` to the underlying element's property whenever
-    // it changes. React 18's prop-to-property bridging for custom elements is
-    // unreliable for empty strings (programmatic resets), so we set the
-    // property directly to guarantee the dropdown clears on `value=""`.
-    // React 19+ handles this natively, so the effect short-circuits there.
-    useEffect(() => {
-      if (!needsPropertyBridge) return;
-      const element = elementRef.current as any;
-      if (!element) return;
-      if (element.value !== value) {
-        element.value = value ?? '';
-      }
-    }, [value]);
-
-    // Handle ref forwarding
-    useEffect(() => {
-      if (ref && elementRef.current) {
-        if (typeof ref === 'function') {
-          ref(elementRef.current);
-        } else {
-          ref.current = elementRef.current;
-        }
-      }
-    }, [ref]);
-
-    // Render options from data if provided, otherwise use children
-    const renderContent = () => {
-      if (options && options.length > 0) {
-        // Data-driven approach - create ty-option elements
-        return options.map((option, index) => 
-          React.createElement(
-            'ty-option',
-            {
-              key: option.value || index,
-              value: option.value,
-              ...(option.disabled && { disabled: "" }),
-            },
-            option.text
-          )
-        );
-      }
-      
-      // Slotted approach - use provided children
-      return children;
-    };
-
-    // Imperative property sync for boolean props (see use-boolean-prop.ts).
-    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
-    const isLoading = useBooleanProperty(elementRef, 'loading', loading);
-    const isExternalSearch = coerceBool(externalSearch) || coerceBool(notSearchable) || searchable === false;
-    useBooleanProperty(elementRef, 'externalSearch', isExternalSearch);
-    // clearable: explicit boolean OR the `notClearable` alias inverts it
-    const isClearable = clearable !== undefined
-      ? coerceBool(clearable)
-      : (coerceBool(notClearable) ? false : undefined);
-    useEffect(() => {
-      if (!needsPropertyBridge) return;
-      if (isClearable === undefined) return;
-      const el = elementRef.current as any;
-      if (!el) return;
-      if (Boolean(el.clearable) !== isClearable) el.clearable = isClearable;
-    }, [isClearable]);
-
-    // Convert React props to web component attributes
-    const webComponentProps: Record<string, any> = {
-      ...props,
-      ref: elementRef,
-    };
-
-    if (isDisabled) webComponentProps.disabled = '';
-    if (isLoading) webComponentProps.loading = '';
-    if (isExternalSearch) webComponentProps['external-search'] = '';
-
-    // Handle clearable functionality
-    if (isClearable === true) {
-      webComponentProps.clearable = '';
-    } else if (isClearable === false) {
-      webComponentProps['not-clearable'] = '';
-    }
-
-    // Add debounce attribute
-    if (debounce !== undefined) {
-      webComponentProps.debounce = debounce;
-    }
-
-    // Add string attributes
-    if (name) webComponentProps.name = name;
-
-    return React.createElement(
-      'ty-dropdown',
-      webComponentProps,
-      renderContent()
-    );
-  }
-);
-
-TyDropdown.displayName = 'TyDropdown';

package/src/components/TyMultiselect.tsx

@@ -1,219 +0,0 @@
-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 {
-  /** Array of currently selected values */
-  values: string[];
-  /** Action that triggered the change: "add" | "remove" */
-  action: 'add' | 'remove';
-  /** The specific item that was added or removed */
-  item: string;
-}
-
-export interface TyMultiselectProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'style'> {
-  style?: import('./TyInput').TyInputCSSProperties;
-  /** Current selected values as comma-separated string or array */
-  value?: string | string[];
-  
-  /** Placeholder text when no items are selected */
-  placeholder?: string;
-  
-  /** Disable the multiselect component */
-  disabled?: boolean;
-
-  /**
-   * Loading state — replaces the available-options area with a centered
-   * spinner. Search input stays usable. Pair with `externalSearch` while
-   * fetching results from a parent-owned data source.
-   */
-  loading?: boolean;
-
-  /** Make the multiselect read-only */
-  readonly?: boolean;
-  
-  /** Semantic styling variant */
-  flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
-  
-  /** Label text for the multiselect */
-  label?: string;
-  
-  /** Mark the field as required */
-  required?: boolean;
-
-  /**
-   * Switch to external (remote) search mode. Default is `false` — the
-   * multiselect filters its own children client-side. Set to `true` when you
-   * want to handle filtering yourself (e.g. server-side): the component will
-   * dispatch `search` events on each keystroke, and you must update the children
-   * in response. The `onSearch` prop receives those events.
-   */
-  externalSearch?: boolean;
-
-  /** Debounce in milliseconds (0-5000) */
-  debounce?: number;
-  
-  /** Mobile section label for selected items */
-  selectedLabel?: string;
-  
-  /** Form field name for form submission */
-  name?: string;
-  
-  /** Callback when selection changes */
-  onChange?: (event: CustomEvent<TyMultiselectEventDetail>) => void;
-
-  /** Callback fired on each search input change (debounced by `debounce`). Use for external/server-side filtering. */
-  onSearch?: (event: CustomEvent<{ query: string; element: HTMLElement }>) => void;
-  onOpen?: (event: CustomEvent) => void;
-  onClose?: (event: CustomEvent) => void;
-
-  /** Children should be TyTag components, not TyOption */
-  children?: React.ReactNode;
-}
-
-// React wrapper for ty-multiselect web component
-export const TyMultiselect = React.forwardRef<HTMLElement, TyMultiselectProps>(
-  ({
-    value,
-    placeholder,
-    disabled,
-    loading,
-    readonly,
-    flavor,
-    label,
-    required,
-    externalSearch,
-    debounce,
-    selectedLabel,
-    name,
-    onChange,
-    onSearch,
-    onOpen,
-    onClose,
-    children,
-    ...props
-  }, ref) => {
-    const elementRef = useRef<HTMLElement>(null);
-
-    // Handle ref forwarding
-    useEffect(() => {
-      if (ref && elementRef.current) {
-        if (typeof ref === 'function') {
-          ref(elementRef.current);
-        } else {
-          ref.current = elementRef.current;
-        }
-      }
-    }, [ref]);
-
-    // Imperatively sync `value` to the underlying property so resets
-    // (`value=""` or null) reliably clear the visible selection.
-    // React 18 workaround; React 19+ handles this natively.
-    useEffect(() => {
-      if (!needsPropertyBridge) return;
-      const element = elementRef.current as any;
-      if (!element) return;
-      const next = (props as any).value ?? '';
-      if (element.value !== next) {
-        element.value = next;
-      }
-    }, [(props as any).value]);
-
-    // Handle change events
-    const handleChange = useCallback((event: Event) => {
-      const customEvent = event as CustomEvent<TyMultiselectEventDetail>;
-      if (onChange) {
-        onChange(customEvent);
-      }
-    }, [onChange]);
-
-    const handleSearch = useCallback((event: Event) => {
-      const customEvent = event as CustomEvent<{ query: string; element: HTMLElement }>;
-      if (onSearch) {
-        onSearch(customEvent);
-      }
-    }, [onSearch]);
-
-    const handleOpen = useCallback((event: Event) => { if (onOpen) onOpen(event as CustomEvent); }, [onOpen]);
-    const handleClose = useCallback((event: Event) => { if (onClose) onClose(event as CustomEvent); }, [onClose]);
-
-    // Set up event listeners
-    useEffect(() => {
-      const element = elementRef.current;
-      if (!element) return;
-
-      if (onChange) element.addEventListener('change', handleChange);
-      if (onSearch) element.addEventListener('search', handleSearch);
-      if (onOpen) element.addEventListener('open', handleOpen);
-      if (onClose) element.addEventListener('close', handleClose);
-
-      return () => {
-        if (onChange) element.removeEventListener('change', handleChange);
-        if (onSearch) element.removeEventListener('search', handleSearch);
-        if (onOpen) element.removeEventListener('open', handleOpen);
-        if (onClose) element.removeEventListener('close', handleClose);
-      };
-    }, [handleChange, handleSearch, handleOpen, handleClose, onChange, onSearch, onOpen, onClose]);
-
-    // 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,
-      ref: elementRef,
-    };
-
-    // Handle value conversion (array to comma-separated string)
-    if (value !== undefined) {
-      const valueString = Array.isArray(value) ? value.join(',') : value;
-      webComponentProps.value = valueString;
-    }
-
-    // Add optional attributes only if they have values
-    if (placeholder) {
-      webComponentProps.placeholder = placeholder;
-    }
-
-    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;
-    }
-
-    if (label) {
-      webComponentProps.label = label;
-    }
-
-    if (name) {
-      webComponentProps.name = name;
-    }
-
-    // Add debounce attribute
-    if (debounce !== undefined) {
-      webComponentProps.debounce = debounce;
-    }
-    
-    // Add selectedLabel attribute
-    if (selectedLabel) {
-      webComponentProps['selected-label'] = selectedLabel;
-    }
-
-    return React.createElement(
-      'ty-multiselect',
-      webComponentProps,
-      children
-    );
-  }
-);
-
-TyMultiselect.displayName = 'TyMultiselect';