tyrell-react 1.0.0-TC24 → 1.0.0-TC26

package/src/components/TySelect.tsx

@@ -0,0 +1,240 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import { needsPropertyBridge } from '../utils/react-version';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
+
+// Type definitions for Ty Select component
+export interface TySelectItem {
+  value: string;
+  label: string;
+  flavor: string | null;
+}
+
+export interface TySelectEventDetail {
+  /** Scalar for single select, array when `multiple` */
+  value: string | string[] | null;
+  /** Always the array form of the selection */
+  values: string[];
+  /** Rich info per selected value — enough to render chips out-of-band */
+  items: TySelectItem[];
+  /** Action that triggered the change */
+  action: 'add' | 'remove' | 'clear' | 'set';
+  /** The specific value that changed */
+  item: string | null;
+}
+
+export interface TySelectProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'style'> {
+  style?: import('./TyInput').TyInputCSSProperties;
+
+  /** Selected value(s) — string, comma-separated string, or array */
+  value?: string | string[];
+
+  /** Multi select (native <select multiple> semantics). Default: single. */
+  multiple?: boolean;
+
+  /** Compact content-hugging trigger (toolbars, filter bars) instead of the full-width field look */
+  compact?: boolean;
+
+  /** Placeholder shown while nothing is selected */
+  placeholder?: string;
+
+  /** Label text above the field */
+  label?: string;
+
+  /** Form field name — single submits one entry, multiple submits repeated entries */
+  name?: string;
+
+  /** Disable the select */
+  disabled?: boolean;
+
+  /** Read-only */
+  readonly?: boolean;
+
+  /** Mark the field as required */
+  required?: boolean;
+
+  /**
+   * Search row visibility: 'auto' (default) shows it only for 8+ options,
+   * 'always' / 'never' force it. external-search always shows it.
+   */
+  searchable?: 'auto' | 'always' | 'never' | boolean;
+
+  /**
+   * External (remote) search mode — the component stops filtering and emits
+   * debounced `search` events; replace the option children in response.
+   */
+  externalSearch?: boolean;
+
+  /** Debounce for the search event in ms (0-5000) */
+  debounce?: number;
+
+  /** Loading state — shows a spinner in the options area (external search in flight) */
+  loading?: boolean;
+
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+
+  /** Callback when selection changes */
+  onChange?: (event: CustomEvent<TySelectEventDetail>) => void;
+
+  /** Callback fired on each search input change (debounced). Use for external/server-side filtering. */
+  onSearch?: (event: CustomEvent<{ query: string; element: HTMLElement }>) => void;
+  onOpen?: (event: CustomEvent) => void;
+  onClose?: (event: CustomEvent) => void;
+
+  /** TyOption children (plus optional slot="trigger" / slot="start" / slot="end" elements) */
+  children?: React.ReactNode;
+}
+
+// React wrapper for ty-select web component
+export const TySelect = React.forwardRef<HTMLElement, TySelectProps>(
+  ({
+    value,
+    multiple,
+    compact,
+    placeholder,
+    label,
+    name,
+    disabled,
+    readonly,
+    required,
+    searchable,
+    externalSearch,
+    debounce,
+    loading,
+    size,
+    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` so resets ('' 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 = Array.isArray(value) ? value.join(',') : (value ?? '');
+      if (element.value !== next) {
+        element.value = next;
+      }
+    }, [value]);
+
+    // Handle events
+    const handleChange = useCallback((event: Event) => {
+      if (onChange) onChange(event as CustomEvent<TySelectEventDetail>);
+    }, [onChange]);
+
+    const handleSearch = useCallback((event: Event) => {
+      if (onSearch) onSearch(event as CustomEvent<{ query: string; element: HTMLElement }>);
+    }, [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 isMultiple = useBooleanProperty(elementRef, 'multiple', multiple);
+    const isCompact = useBooleanProperty(elementRef, 'compact', compact);
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isReadonly = useBooleanProperty(elementRef, 'readonly', readonly);
+    const isRequired = useBooleanProperty(elementRef, 'required', required);
+    const isLoading = useBooleanProperty(elementRef, 'loading', loading);
+    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) {
+      webComponentProps.value = Array.isArray(value) ? value.join(',') : value;
+    }
+
+    if (isMultiple) webComponentProps.multiple = '';
+    if (isCompact) webComponentProps.compact = '';
+    if (isDisabled) webComponentProps.disabled = '';
+    if (isReadonly) webComponentProps.readonly = '';
+    if (isRequired) webComponentProps.required = '';
+    if (isLoading) webComponentProps.loading = '';
+    if (isExternalSearch) webComponentProps['external-search'] = '';
+
+    if (placeholder) webComponentProps.placeholder = placeholder;
+    if (label) webComponentProps.label = label;
+    if (name) webComponentProps.name = name;
+    if (size) webComponentProps.size = size;
+    if (debounce !== undefined) webComponentProps.debounce = debounce.toString();
+    if (searchable === 'always' || searchable === true) webComponentProps.searchable = 'true';
+    else if (searchable === 'never' || searchable === false) webComponentProps.searchable = 'false';
+    // 'auto' / undefined → omit (component default)
+
+    return React.createElement('ty-select', webComponentProps, children);
+  }
+);
+
+TySelect.displayName = 'TySelect';
+
+// ============================================================================
+// TySelectedTags — out-of-band chip display for a TySelect
+// ============================================================================
+
+export interface TySelectedTagsProps extends React.HTMLAttributes<HTMLElement> {
+  /** id of the ty-select to display. Falls back to the previous element sibling. */
+  htmlFor?: string;
+  /** Optional <template> child as chip blueprint ({value}/{label}/{flavor}/{data-*} placeholders) */
+  children?: React.ReactNode;
+}
+
+// React wrapper for ty-selected-tags web component
+export const TySelectedTags = React.forwardRef<HTMLElement, TySelectedTagsProps>(
+  ({ htmlFor, children, ...props }, ref) => {
+    const elementRef = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+      if (ref && elementRef.current) {
+        if (typeof ref === 'function') ref(elementRef.current);
+        else ref.current = elementRef.current;
+      }
+    }, [ref]);
+
+    const webComponentProps: Record<string, any> = { ...props, ref: elementRef };
+    if (htmlFor) webComponentProps.for = htmlFor;
+
+    return React.createElement('ty-selected-tags', webComponentProps, children);
+  }
+);
+
+TySelectedTags.displayName = 'TySelectedTags';

package/src/components/index.ts

@@ -55,6 +55,9 @@ export type { TyIconProps } from './TyIcon';
 
 export { TyModal } from './TyModal';
 export type { TyModalProps, TyModalEventDetail, TyModalRef } from './TyModal';
+// Platform/ARIA name alias (the element is also registered as ty-dialog)
+export { TyModal as TyDialog } from './TyModal';
+export type { TyModalProps as TyDialogProps, TyModalEventDetail as TyDialogEventDetail, TyModalRef as TyDialogRef } from './TyModal';
 
 export { TyTooltip } from './TyTooltip';
 export type { TyTooltipProps } from './TyTooltip';
@@ -62,6 +65,9 @@ export type { TyTooltipProps } from './TyTooltip';
 export { TyMultiselect } from './TyMultiselect';
 export type { TyMultiselectProps, TyMultiselectEventDetail } from './TyMultiselect';
 
+export { TySelect, TySelectedTags } from './TySelect';
+export type { TySelectProps, TySelectEventDetail, TySelectItem, TySelectedTagsProps } from './TySelect';
+
 export { TyCalendar } from './TyCalendar';
 export type { TyCalendarProps, TyCalendarChangeEventDetail, TyCalendarNavigateEventDetail } from './TyCalendar';
 
@@ -85,6 +91,9 @@ export type { TyRadioGroupProps, TyRadioGroupEventDetail } from './TyRadioGroup'
 
 export { TyCopy } from './TyCopy';
 export type { TyCopyProps } from './TyCopy';
+// Descriptive name alias (the element is also registered as ty-copy-field)
+export { TyCopy as TyCopyField } from './TyCopy';
+export type { TyCopyProps as TyCopyFieldProps } from './TyCopy';
 
 export { TyFileUpload } from './TyFileUpload';
 export type { TyFileUploadProps, TyFileUploadEventDetail } from './TyFileUpload';

package/src/version.ts

@@ -3,4 +3,4 @@
 // Run 'npm run generate:version' to regenerate.
 
 /** Current version of tyrell-react. Synced with package.json on build. */
-export const VERSION = '1.0.0-TC24'
+export const VERSION = '1.0.0-TC26'

package/src/components/EventConventionTest.tsx

@@ -1,155 +0,0 @@
-/**
- * Test Example: React Event Convention
- * 
- * This file demonstrates the new event handling convention
- * for tyrell-react components.
- *
- * To test:
- * 1. Create a new React project or use existing
- * 2. npm install tyrell-react
- * 3. Add this component to your app
- * 4. Observe console logs and state updates
- */
-
-import React, { useState } from 'react';
-import { TyInput } from './TyInput';
-import { TyTextarea } from './TyTextarea';
-import { TyCheckbox } from './TyCheckbox';
-import type { TyInputEventDetail } from './TyInput';
-import type { TyTextareaEventDetail } from './TyTextarea';
-import type { TyCheckboxEventDetail } from './TyCheckbox';
-
-export function EventConventionTest() {
-  const [inputValue, setInputValue] = useState('');
-  const [textareaValue, setTextareaValue] = useState('');
-  const [checked, setChecked] = useState(false);
-  const [logs, setLogs] = useState<string[]>([]);
-
-  const addLog = (message: string) => {
-    setLogs(prev => [...prev, `${new Date().toLocaleTimeString()}: ${message}`]);
-  };
-
-  return (
-    <div className="p-8 space-y-6 max-w-2xl">
-      <h1 className="text-2xl font-bold">React Event Convention Test</h1>
-      
-      {/* Input Test */}
-      <div className="space-y-2">
-        <h2 className="text-lg font-semibold">TyInput Test</h2>
-        <TyInput
-          label="Email"
-          placeholder="Type to test onChange..."
-          value={inputValue}
-          onChange={(e: CustomEvent<TyInputEventDetail>) => {
-            setInputValue(e.detail.value);
-            addLog(`onChange: "${e.detail.value}" (fires on keystroke)`);
-          }}
-          onChangeCommit={(e: CustomEvent<TyInputEventDetail>) => {
-            addLog(`onChangeCommit: "${e.detail.value}" (fires on blur)`);
-          }}
-          onFocus={() => addLog('onFocus')}
-          onBlur={() => addLog('onBlur')}
-        />
-        <p className="text-sm text-gray-600">
-          Current value: <strong>{inputValue}</strong>
-        </p>
-      </div>
-
-      {/* Textarea Test */}
-      <div className="space-y-2">
-        <h2 className="text-lg font-semibold">TyTextarea Test</h2>
-        <TyTextarea
-          label="Comments"
-          placeholder="Type to test onChange..."
-          value={textareaValue}
-          rows={3}
-          onChange={(e: CustomEvent<TyTextareaEventDetail>) => {
-            setTextareaValue(e.detail.value);
-            addLog(`Textarea onChange: "${e.detail.value}"`);
-          }}
-          onChangeCommit={(e: CustomEvent<TyTextareaEventDetail>) => {
-            addLog(`Textarea onChangeCommit: "${e.detail.value}"`);
-          }}
-        />
-        <p className="text-sm text-gray-600">
-          Current value: <strong>{textareaValue}</strong>
-        </p>
-      </div>
-
-      {/* Checkbox Test */}
-      <div className="space-y-2">
-        <h2 className="text-lg font-semibold">TyCheckbox Test</h2>
-        <TyCheckbox
-          checked={checked}
-          onChange={(e: CustomEvent<TyCheckboxEventDetail>) => {
-            setChecked(e.detail.checked);
-            addLog(`Checkbox onChange: ${e.detail.checked} (fires immediately)`);
-          }}
-          onChangeCommit={(e: CustomEvent<TyCheckboxEventDetail>) => {
-            addLog(`Checkbox onChangeCommit: ${e.detail.checked} (fires on blur)`);
-          }}
-        >
-          Subscribe to newsletter
-        </TyCheckbox>
-        <p className="text-sm text-gray-600">
-          Current state: <strong>{checked ? 'Checked' : 'Unchecked'}</strong>
-        </p>
-      </div>
-
-      {/* Event Log */}
-      <div className="space-y-2">
-        <h2 className="text-lg font-semibold">Event Log</h2>
-        <div className="bg-gray-100 p-4 rounded max-h-64 overflow-y-auto font-mono text-xs">
-          {logs.length === 0 ? (
-            <p className="text-gray-500">No events yet. Start typing or checking boxes!</p>
-          ) : (
-            logs.map((log, i) => (
-              <div key={i} className="text-gray-800">
-                {log}
-              </div>
-            ))
-          )}
-        </div>
-        <button
-          onClick={() => setLogs([])}
-          className="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
-        >
-          Clear Log
-        </button>
-      </div>
-
-      {/* Expected Behavior */}
-      <div className="bg-blue-50 p-4 rounded">
-        <h3 className="font-semibold mb-2">Expected Behavior:</h3>
-        <ul className="list-disc list-inside space-y-1 text-sm">
-          <li>
-            <strong>onChange</strong> - Fires on every keystroke/state change (React convention)
-          </li>
-          <li>
-            <strong>onChangeCommit</strong> - Fires on blur if value changed (optional)
-          </li>
-          <li>
-            <strong>onFocus</strong> - Fires when element gains focus
-          </li>
-          <li>
-            <strong>onBlur</strong> - Fires when element loses focus
-          </li>
-        </ul>
-      </div>
-
-      {/* Verification */}
-      <div className="bg-green-50 p-4 rounded">
-        <h3 className="font-semibold mb-2">Verification Checklist:</h3>
-        <ul className="list-disc list-inside space-y-1 text-sm">
-          <li>✅ onChange fires on EVERY keystroke (not just on blur)</li>
-          <li>✅ State updates in real-time as you type</li>
-          <li>✅ onChangeCommit fires ONLY on blur (if value changed)</li>
-          <li>✅ Event order: onChange → onBlur → onChangeCommit</li>
-          <li>✅ Checkbox onChange fires immediately on click</li>
-        </ul>
-      </div>
-    </div>
-  );
-}
-
-export default EventConventionTest;