@shohojdhara/atomix 0.3.15 → 0.4.1

package/src/components/Form/Select.tsx

@@ -1,213 +1,266 @@
-import React, { useRef, useEffect, useState, memo } from 'react';
-import { SelectProps } from '../../lib/types/components';
+import React, { useRef, useEffect, useState, memo, useCallback } from 'react';
+import { SelectProps, SelectOption as SelectOptionType } from '../../lib/types/components';
 import { useSelect } from '../../lib/composables';
 import { SELECT } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import { SelectContext, SelectOption } from './SelectOption';
+
+export type SelectComponent = React.FC<SelectProps> & {
+  Option: typeof SelectOption;
+};
 
 /**
  * Select - A component for dropdown selection
  */
-export const Select: React.FC<SelectProps> = memo(({
-  options = [],
-  value,
-  onChange,
-  onBlur,
-  onFocus,
-  placeholder = 'Select an option',
-  className = '',
-  style,
-  disabled = false,
-  required = false,
-  id,
-  name,
-  size = 'md',
-  invalid = false,
-  valid = false,
-  multiple = false,
-  'aria-label': ariaLabel,
-  'aria-describedby': ariaDescribedBy,
-  glass,
-}) => {
-  const { generateSelectClass } = useSelect({
-    size,
-    disabled,
-    invalid,
-    valid,
-  });
-
-  const selectClass = generateSelectClass({
-    className: `${className} ${glass ? 'c-select--glass' : ''}`.trim(),
-    size,
-    disabled,
-    invalid,
-    valid,
-  });
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedLabel, setSelectedLabel] = useState(placeholder);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const panelRef = useRef<HTMLDivElement>(null);
-  const bodyRef = useRef<HTMLDivElement>(null);
-  const nativeSelectRef = useRef<HTMLSelectElement>(null);
-
-  // Update selected label when value changes
-  useEffect(() => {
-    if (value) {
-      const selectedOption = options.find(opt => opt.value === value);
-      if (selectedOption) {
-        setSelectedLabel(selectedOption.label);
+export const Select: SelectComponent = memo(
+  ({
+    options,
+    value,
+    onChange,
+    onBlur,
+    onFocus,
+    placeholder = 'Select an option',
+    className = '',
+    style,
+    disabled = false,
+    required = false,
+    id,
+    name,
+    size = 'md',
+    invalid = false,
+    valid = false,
+    multiple = false,
+    'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    glass,
+    children,
+  }: SelectProps) => {
+    const { generateSelectClass } = useSelect({
+      size,
+      disabled,
+      invalid,
+      valid,
+    });
+
+    const selectClass = generateSelectClass({
+      className: `${className} ${glass ? 'c-select--glass' : ''}`.trim(),
+      size,
+      disabled,
+      invalid,
+      valid,
+    });
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedLabel, setSelectedLabel] = useState(placeholder);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const panelRef = useRef<HTMLDivElement>(null);
+    const bodyRef = useRef<HTMLDivElement>(null);
+    const nativeSelectRef = useRef<HTMLSelectElement>(null);
+
+    // State for registered options (Compound mode)
+    const [registeredOptions, setRegisteredOptions] = useState<SelectOptionType[]>([]);
+
+    const registerOption = useCallback((option: SelectOptionType) => {
+      setRegisteredOptions((prev) => {
+        if (prev.some(o => o.value === option.value)) return prev;
+        return [...prev, option];
+      });
+    }, []);
+
+    const unregisterOption = useCallback((value: string) => {
+      setRegisteredOptions((prev) => prev.filter(o => o.value !== value));
+    }, []);
+
+    // Determine active options
+    const hasOptionsProp = options && options.length > 0;
+    const activeOptions = hasOptionsProp ? options : registeredOptions;
+
+    // Update selected label when value changes
+    useEffect(() => {
+      if (value) {
+        const selectedOption = activeOptions.find(opt => opt.value === value);
+        if (selectedOption) {
+          setSelectedLabel(selectedOption.label);
+        }
+      } else {
+        setSelectedLabel(placeholder);
       }
-    } else {
-      setSelectedLabel(placeholder);
-    }
-  }, [value, options, placeholder]);
+    }, [value, activeOptions, placeholder]);
 
-  // Handle click outside to close dropdown
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-        if (bodyRef.current) {
+    // Handle click outside to close dropdown
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+          setIsOpen(false);
+          if (bodyRef.current) {
+            bodyRef.current.style.height = '0px';
+          }
+        }
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, []);
+
+    // Toggle dropdown
+    const handleToggle = () => {
+      if (!disabled) {
+        if (!isOpen && bodyRef.current && panelRef.current) {
+          bodyRef.current.style.height = `${panelRef.current.clientHeight}px`;
+        } else if (bodyRef.current) {
           bodyRef.current.style.height = '0px';
         }
+        setIsOpen(!isOpen);
       }
     };
 
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  // Toggle dropdown
-  const handleToggle = () => {
-    if (!disabled) {
-      if (!isOpen && bodyRef.current && panelRef.current) {
-        bodyRef.current.style.height = `${panelRef.current.clientHeight}px`;
-      } else if (bodyRef.current) {
-        bodyRef.current.style.height = '0px';
-      }
-      setIsOpen(!isOpen);
-    }
-  };
-
-  // Handle item selection
-  const handleItemClick = (option: { value: string; label: string }) => {
-    setSelectedLabel(option.label);
-    setIsOpen(false);
-    if (bodyRef.current) {
-      bodyRef.current.style.height = '0px';
-    }
+    // Handle item selection
+    const handleItemClick = useCallback(
+      (option: { value: string; label: string }) => {
+        setSelectedLabel(option.label);
+        setIsOpen(false);
+        if (bodyRef.current) {
+          bodyRef.current.style.height = '0px';
+        }
 
-    if (nativeSelectRef.current) {
-      nativeSelectRef.current.value = option.value;
-    }
+        if (nativeSelectRef.current) {
+          nativeSelectRef.current.value = option.value;
+        }
 
-    if (onChange) {
-      // Create a synthetic event
-      const event = {
-        target: {
-          name,
-          value: option.value,
-        },
-      } as React.ChangeEvent<HTMLSelectElement>;
-      onChange(event);
-    }
-  };
-
-  const selectContent = (
-    <div
-      className={`${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ''}`}
-      ref={dropdownRef}
-      style={style}
-      aria-expanded={isOpen}
-    >
-      {/* Native select for accessibility and form submission */}
-      <select
-        ref={nativeSelectRef}
-        value={value}
-        onChange={onChange}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        disabled={disabled}
-        required={required}
-        id={id}
-        name={name}
-        multiple={multiple}
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescribedBy}
-        aria-invalid={invalid}
-        style={{ display: 'none' }}
-      >
-        {placeholder && (
-          <option value="" disabled>
-            {placeholder}
-          </option>
-        )}
-        {options.map(option => (
-          <option key={option.value} value={option.value} disabled={option.disabled}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-
-      {/* Custom Select UI */}
-      <div className={SELECT.CLASSES.SELECTED} onClick={handleToggle} aria-disabled={disabled}>
-        {selectedLabel}
-      </div>
-
-      <i className={`${SELECT.CLASSES.ICON_CARET} ${SELECT.CLASSES.TOGGLE_ICON}`} />
-
-      <div className={SELECT.CLASSES.SELECT_BODY} ref={bodyRef} style={{ height: 0 }}>
-        <div className={SELECT.CLASSES.SELECT_PANEL} ref={panelRef}>
-          <ul className={SELECT.CLASSES.SELECT_ITEMS}>
-            {options.map((option, index) => (
-              <li
-                key={option.value}
-                className={SELECT.CLASSES.SELECT_ITEM}
-                data-value={option.value}
-                onClick={() => !option.disabled && handleItemClick(option)}
-              >
-                <label htmlFor={`SelectItem${index}`} className="c-checkbox">
-                  <input
-                    type="checkbox"
-                    id={`SelectItem${index}`}
-                    className="c-checkbox__input c-select__item-input"
-                    checked={value === option.value}
-                    readOnly
-                    disabled={option.disabled}
-                  />
-                  <div className="c-select__item-label">{option.label}</div>
-                </label>
-              </li>
+        if (onChange) {
+          // Create a synthetic event
+          const event = {
+            target: {
+              name,
+              value: option.value,
+            },
+          } as React.ChangeEvent<HTMLSelectElement>;
+          onChange(event);
+        }
+      },
+      [onChange, name]
+    );
+
+    const onSelect = useCallback(
+      (val: string, label: string) => {
+        handleItemClick({ value: val, label });
+      },
+      [handleItemClick]
+    );
+
+    const contextValue = React.useMemo(
+      () => ({
+        registerOption,
+        unregisterOption,
+        selectedValue: value,
+        onSelect,
+      }),
+      [registerOption, unregisterOption, value, onSelect]
+    );
+
+    const selectContent = (
+      <SelectContext.Provider value={contextValue}>
+        <div
+          className={`${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ''}`}
+          ref={dropdownRef}
+          style={style}
+          aria-expanded={isOpen}
+        >
+          {/* Native select for accessibility and form submission */}
+          <select
+            ref={nativeSelectRef}
+            value={value}
+            onChange={onChange}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            disabled={disabled}
+            required={required}
+            id={id}
+            name={name}
+            multiple={multiple}
+            aria-label={ariaLabel}
+            aria-describedby={ariaDescribedBy}
+            aria-invalid={invalid}
+            style={{ display: 'none' }}
+          >
+            {placeholder && (
+              <option value="" disabled>
+                {placeholder}
+              </option>
+            )}
+            {activeOptions.map(option => (
+              <option key={option.value} value={option.value} disabled={option.disabled}>
+                {option.label}
+              </option>
             ))}
-          </ul>
+          </select>
+
+          {/* Custom Select UI */}
+          <div className={SELECT.CLASSES.SELECTED} onClick={handleToggle} aria-disabled={disabled}>
+            {selectedLabel}
+          </div>
+
+          <i className={`${SELECT.CLASSES.ICON_CARET} ${SELECT.CLASSES.TOGGLE_ICON}`} />
+
+          <div className={SELECT.CLASSES.SELECT_BODY} ref={bodyRef} style={{ height: 0 }}>
+            <div className={SELECT.CLASSES.SELECT_PANEL} ref={panelRef}>
+              <ul className={SELECT.CLASSES.SELECT_ITEMS}>
+                {hasOptionsProp ? (
+                  options.map((option, index) => (
+                    <li
+                      key={option.value}
+                      className={SELECT.CLASSES.SELECT_ITEM}
+                      data-value={option.value}
+                      onClick={() => !option.disabled && handleItemClick(option)}
+                    >
+                      <label htmlFor={`SelectItem${index}`} className="c-checkbox">
+                        <input
+                          type="checkbox"
+                          id={`SelectItem${index}`}
+                          className="c-checkbox__input c-select__item-input"
+                          checked={value === option.value}
+                          readOnly
+                          disabled={option.disabled}
+                        />
+                        <div className="c-select__item-label">{option.label}</div>
+                      </label>
+                    </li>
+                  ))
+                ) : (
+                  children
+                )}
+              </ul>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-  );
-
-  if (glass) {
-    // Default glass settings for select components
-    const defaultGlassProps = {
-      displacementScale: 60,
-      blurAmount: 1,
-      saturation: 180,
-      aberrationIntensity: 0.2,
-      cornerRadius: 12,
-      mode: 'shader' as const,
-    };
+      </SelectContext.Provider>
+    );
 
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+    if (glass) {
+      // Default glass settings for select components
+      const defaultGlassProps = {
+        displacementScale: 60,
+        blurAmount: 1,
+        saturation: 180,
+        aberrationIntensity: 0.2,
+        cornerRadius: 12,
+        mode: 'shader' as const,
+      };
 
-    return <AtomixGlass {...glassProps}>{selectContent}</AtomixGlass>;
-  }
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+      return <AtomixGlass {...glassProps}>{selectContent}</AtomixGlass>;
+    }
 
-  return selectContent;
-});
+    return selectContent;
+  }
+) as unknown as SelectComponent;
 
 export type { SelectProps };
 
 Select.displayName = 'Select';
+Select.Option = SelectOption;
 
 export default Select;

package/src/components/Form/SelectOption.tsx

@@ -0,0 +1,88 @@
+import React, { createContext, useContext, useEffect, memo, ReactNode } from 'react';
+import { SelectOption as SelectOptionType } from '../../lib/types/components';
+import { SELECT } from '../../lib/constants/components';
+
+// Context for managing options registration and selection
+export interface SelectContextType {
+  registerOption: (option: SelectOptionType) => void;
+  unregisterOption: (value: string) => void;
+  selectedValue?: string | string[];
+  onSelect: (value: string, label: string) => void;
+}
+
+export const SelectContext = createContext<SelectContextType | null>(null);
+
+export interface SelectOptionProps {
+  value: string;
+  children?: ReactNode;
+  disabled?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const SelectOption: React.FC<SelectOptionProps> = memo(
+  ({ value, children, disabled = false, className = '', style }) => {
+    const context = useContext(SelectContext);
+
+    // We assume children is the label if it's a string, or we need a way to get label.
+    // For simplicity, we use children as label for registration if it's a string.
+    const label = typeof children === 'string' ? children : value;
+
+    useEffect(() => {
+      if (context) {
+        context.registerOption({ value, label, disabled });
+        return () => {
+          context.unregisterOption(value);
+        };
+      }
+      return undefined;
+    }, [context, value, label, disabled]);
+
+    if (!context) {
+      console.warn('SelectOption must be used within a Select component');
+      return null;
+    }
+
+    const { selectedValue, onSelect } = context;
+
+    const isSelected = Array.isArray(selectedValue)
+      ? selectedValue.includes(value)
+      : selectedValue === value;
+
+    const handleClick = (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!disabled) {
+        onSelect(value, label);
+      }
+    };
+
+    return (
+      <li
+        className={`${SELECT.CLASSES.SELECT_ITEM} ${className}`.trim()}
+        data-value={value}
+        onClick={handleClick}
+        style={style}
+        role="option"
+        aria-selected={isSelected}
+        aria-disabled={disabled}
+      >
+        <label className="c-checkbox" style={{ pointerEvents: 'none' }}>
+           <input
+             type="checkbox"
+             className="c-checkbox__input c-select__item-input"
+             checked={isSelected}
+             readOnly
+             disabled={disabled}
+             tabIndex={-1}
+           />
+           <div className="c-select__item-label">{children}</div>
+        </label>
+      </li>
+    );
+  }
+);
+
+SelectOption.displayName = 'SelectOption';
+
+export default SelectOption;

package/src/components/Form/Textarea.test.tsx

@@ -4,42 +4,37 @@ import { Textarea } from './Textarea';
 
 // Mock AtomixGlass component
 vi.mock('../AtomixGlass/AtomixGlass', () => ({
-    AtomixGlass: ({ children, ...props }: any) => (
-        <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
-            {children}
-        </div>
-    ),
+  AtomixGlass: ({ children, ...props }: any) => (
+    <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
+      {children}
+    </div>
+  ),
 }));
 
 describe('Textarea Component', () => {
-    it('renders correctly', () => {
-        render(<Textarea placeholder="Test Textarea" />);
-        expect(screen.getByPlaceholderText('Test Textarea')).toBeInTheDocument();
-    });
+  it('renders correctly', () => {
+    render(<Textarea placeholder="Test Textarea" />);
+    expect(screen.getByPlaceholderText('Test Textarea')).toBeInTheDocument();
+  });
 
-    it('handles uncontrolled defaultValue', () => {
-        render(<Textarea defaultValue="Default Textarea Value" />);
-        const textarea = screen.getByDisplayValue('Default Textarea Value');
-        expect(textarea).toBeInTheDocument();
-        expect(textarea).toHaveValue('Default Textarea Value');
-    });
+  it('handles uncontrolled defaultValue', () => {
+    render(<Textarea defaultValue="Default Textarea Value" />);
+    const textarea = screen.getByDisplayValue('Default Textarea Value');
+    expect(textarea).toBeInTheDocument();
+    expect(textarea).toHaveValue('Default Textarea Value');
+  });
 
-    it('calls onChange when typing', () => {
-        const handleChange = vi.fn();
-        render(<Textarea onChange={handleChange} />);
-        const textarea = screen.getByRole('textbox');
-        fireEvent.change(textarea, { target: { value: 'New Textarea Value' } });
-        expect(handleChange).toHaveBeenCalledTimes(1);
-    });
+  it('calls onChange when typing', () => {
+    const handleChange = vi.fn();
+    render(<Textarea onChange={handleChange} />);
+    const textarea = screen.getByRole('textbox');
+    fireEvent.change(textarea, { target: { value: 'New Textarea Value' } });
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
 
-    it('applies accessibility attributes', () => {
-        render(
-            <Textarea
-                aria-label="Accessible Textarea"
-                invalid
-            />
-        );
-        const textarea = screen.getByLabelText('Accessible Textarea');
-        expect(textarea).toHaveAttribute('aria-invalid', 'true');
-    });
+  it('applies accessibility attributes', () => {
+    render(<Textarea aria-label="Accessible Textarea" invalid />);
+    const textarea = screen.getByLabelText('Accessible Textarea');
+    expect(textarea).toHaveAttribute('aria-invalid', 'true');
+  });
 });