@idealyst/components 1.0.82 → 1.0.84

package/src/Select/Select.styles.tsx

@@ -0,0 +1,335 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent, Size } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { SelectIntentVariant } from './types';
+
+// Type definitions
+type SelectSize = Size;
+type SelectType = 'outlined' | 'filled';
+
+type SelectTriggerVariants = {
+    type: SelectType;
+    size: SelectSize;
+    intent: SelectIntentVariant;
+    disabled: boolean;
+    error: boolean;
+    focused: boolean;
+}
+
+
+export type ExpandedSelectTriggerStyles = StylesheetStyles<keyof SelectTriggerVariants>;
+export type ExpandedSelectStyles = StylesheetStyles<never>;
+
+function createTriggerTypeVariants(theme: Theme) {
+    return {
+        outlined: {
+            backgroundColor: theme.colors.surface.primary,
+            borderColor: theme.colors.border.primary,
+            _web: {
+                border: `1px solid ${theme.colors.border.primary}`,
+            },
+        },
+        filled: {
+            backgroundColor: theme.colors.surface.secondary,
+            borderColor: 'transparent',
+            _web: {
+                border: '1px solid transparent',
+            },
+        },
+    } as const;
+}
+
+function createTriggerSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'select', (size) => ({
+        paddingHorizontal: size.paddingHorizontal,
+        minHeight: size.minHeight,
+    }));
+}
+
+function createIntentVariants(theme: Theme, type: SelectType, intent: SelectIntentVariant) {
+    if (intent === 'neutral') {
+        return {};
+    }
+
+    const intentValue = (theme.intents as any)[intent];
+
+    if (type === 'outlined') {
+        return {
+            borderColor: intentValue.primary,
+            _web: {
+                border: `1px solid ${intentValue.primary}`,
+            },
+        } as const;
+    }
+
+    return {} as const;
+}
+
+function buildDynamicTriggerStyles(theme: Theme) {
+    return ({ type, intent }: Partial<SelectTriggerVariants>) => {
+        const intentStyles = createIntentVariants(theme, type, intent);
+
+        return {
+            position: 'relative',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            borderRadius: 8,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            ...intentStyles,
+            variants: {
+                type: createTriggerTypeVariants(theme),
+                size: createTriggerSizeVariants(theme),
+                disabled: {
+                    true: {
+                        opacity: 0.6,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {
+                        _web: {
+                            cursor: 'pointer',
+                            _hover: {
+                                opacity: 0.9,
+                            },
+                            _active: {
+                                opacity: 0.8,
+                            },
+                        },
+                    },
+                },
+                error: {
+                    true: {
+                        borderColor: theme.intents.error.primary,
+                        _web: {
+                            border: `1px solid ${theme.intents.error.primary}`,
+                        },
+                    },
+                    false: {},
+                },
+                focused: {
+                    true: {
+                        borderColor: theme.intents.primary.primary,
+                        _web: {
+                            border: `2px solid ${theme.intents.primary.primary}`,
+                            outline: 'none',
+                        },
+                    },
+                    false: {},
+                },
+            },
+            _web: {
+                display: 'flex',
+                boxSizing: 'border-box',
+                _focus: {
+                    outline: 'none',
+                },
+            },
+        } as const;
+    }
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
+// transform on native cannot resolve function calls to extract variant structures.
+export const selectStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        container: {
+            position: 'relative',
+            backgroundColor: theme.colors.surface.primary,
+        },
+        label: {
+            fontSize: 14,
+            fontWeight: '500',
+            color: theme.colors.text.primary,
+            marginBottom: 4,
+        },
+        trigger: buildDynamicTriggerStyles(theme),
+        triggerContent: {
+            flex: 1,
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        triggerText: {
+            color: theme.colors.text.primary,
+            flex: 1,
+            variants: {
+                size: buildSizeVariants(theme, 'select', (size: any) => ({
+                    fontSize: size.fontSize,
+                })),
+            },
+        },
+        placeholder: {
+            color: theme.colors.text.secondary,
+            variants: {
+                size: buildSizeVariants(theme, 'select', (size: any) => ({
+                    fontSize: size.fontSize,
+                })),
+            },
+        },
+        icon: {
+            marginLeft: 4,
+            color: theme.colors.text.secondary,
+        },
+        chevron: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginLeft: 4,
+            color: theme.colors.text.secondary,
+            variants: {
+                size: buildSizeVariants(theme, 'select', (size: any) => ({
+                    width: size.iconSize,
+                    height: size.iconSize,
+                })),
+            },
+            _web: {
+                transition: 'transform 0.2s ease',
+            },
+        },
+        chevronOpen: {
+            _web: {
+                transform: 'rotate(180deg)',
+            }
+        },
+        dropdown: {
+            position: 'absolute',
+            top: '100%',
+            left: 0,
+            right: 0,
+            backgroundColor: theme.colors.surface.primary,
+            borderRadius: 8,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.colors.border.primary,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 8 },
+            shadowOpacity: 0.1,
+            shadowRadius: 24,
+            elevation: 8,
+            zIndex: 9999,
+            maxHeight: 240,
+            minWidth: 200,
+            overflow: 'hidden',
+            _web: {
+                border: `1px solid ${theme.colors.border.primary}`,
+                boxShadow: '0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06)',
+                overflowY: 'auto',
+            },
+        },
+        searchContainer: {
+            padding: 8,
+            borderBottomWidth: 1,
+            borderBottomStyle: 'solid',
+            borderBottomColor: theme.colors.border.primary,
+            _web: {
+                borderBottom: `1px solid ${theme.colors.border.primary}`,
+            },
+        },
+        searchInput: {
+            padding: 4,
+            borderRadius: 4,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.colors.border.primary,
+            backgroundColor: theme.colors.surface.primary,
+            variants: {
+                size: buildSizeVariants(theme, 'select', (size: any) => ({
+                    fontSize: size.fontSize,
+                })),
+            },
+            _web: {
+                border: `1px solid ${theme.colors.border.primary}`,
+                outline: 'none',
+                _focus: {
+                    borderColor: theme.intents.primary.primary,
+                },
+            },
+        },
+        optionsList: {
+            paddingVertical: 4,
+        },
+        option: {
+            paddingHorizontal: 8,
+            paddingVertical: 4,
+            flexDirection: 'row',
+            alignItems: 'center',
+            minHeight: 36,
+            variants: {
+                selected: {
+                    true: {
+                        backgroundColor: theme.intents.primary.light,
+                    },
+                    false: {},
+                },
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {
+                        _web: {
+                            cursor: 'pointer',
+                            _hover: {
+                                backgroundColor: theme.colors.surface.secondary,
+                            },
+                            _active: {
+                                opacity: 0.8,
+                            },
+                        },
+                    },
+                },
+            },
+            _web: {
+                display: 'flex',
+            },
+        },
+        optionContent: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            flex: 1,
+        },
+        optionIcon: {
+            marginRight: 4,
+        },
+        optionText: {
+            color: theme.colors.text.primary,
+            flex: 1,
+            variants: {
+                size: buildSizeVariants(theme, 'select', (size: any) => ({
+                    fontSize: size.fontSize,
+                })),
+            },
+        },
+        optionTextDisabled: {
+            color: theme.colors.text.secondary,
+        },
+        helperText: {
+            fontSize: 12,
+            marginTop: 4,
+            color: theme.colors.text.secondary,
+            variants: {
+                error: {
+                    true: {
+                        color: theme.intents.error.primary,
+                    },
+                    false: {},
+                },
+            },
+        },
+        overlay: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 999,
+            _web: {
+                position: 'fixed',
+            },
+        },
+    } as const;
+});

package/src/Select/Select.web.tsx

@@ -0,0 +1,276 @@
+import React, { useState, useRef, useEffect, forwardRef } from 'react';
+// @ts-ignore - web-specific import
+import { getWebProps } from 'react-native-unistyles/web';
+import { SelectProps, SelectOption } from './types';
+import { selectStyles } from './Select.styles';
+import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import { resolveIconPath } from '../Icon/icon-resolver';
+import { PositionedPortal } from '../internal/PositionedPortal';
+import useMergeRefs from '../hooks/useMergeRefs';
+
+const Select = forwardRef<HTMLDivElement, SelectProps>(({
+  options,
+  value,
+  onValueChange,
+  placeholder = 'Select an option',
+  disabled = false,
+  error = false,
+  helperText,
+  label,
+  type = 'outlined',
+  intent = 'neutral',
+  size = 'md',
+  searchable = false,
+  filterOption,
+  maxHeight = 240,
+  style,
+  testID,
+  accessibilityLabel,
+}, ref) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const selectedOption = options.find(option => option.value === value);
+
+  // Filter options based on search term
+  const filteredOptions = searchable && searchTerm
+    ? options.filter(option => {
+        if (filterOption) {
+          return filterOption(option, searchTerm);
+        }
+        return option.label.toLowerCase().includes(searchTerm.toLowerCase());
+      })
+    : options;
+
+  // Apply styles with variants
+  selectStyles.useVariants({
+    type,
+    size,
+    disabled,
+    error,
+    focused: isOpen,
+  });
+
+
+  // Handle keyboard navigation
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (!isOpen) return;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        setFocusedIndex(prev =>
+          prev < filteredOptions.length - 1 ? prev + 1 : 0
+        );
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        setFocusedIndex(prev =>
+          prev > 0 ? prev - 1 : filteredOptions.length - 1
+        );
+        break;
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        if (focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+          const option = filteredOptions[focusedIndex];
+          if (!option.disabled) {
+            handleOptionSelect(option);
+          }
+        }
+        break;
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) return;
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, focusedIndex, filteredOptions]);
+
+  // Focus search input when dropdown opens
+  useEffect(() => {
+    if (isOpen && searchable && searchInputRef.current) {
+      // Delay to ensure dropdown is positioned
+      setTimeout(() => {
+        searchInputRef.current?.focus();
+      }, 50);
+    }
+  }, [isOpen, searchable]);
+
+  const handleTriggerClick = () => {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+      setSearchTerm('');
+      setFocusedIndex(-1);
+    }
+  };
+
+  const handleOptionSelect = (option: SelectOption) => {
+    if (!option.disabled) {
+      onValueChange(option.value);
+      setIsOpen(false);
+      setSearchTerm('');
+      triggerRef.current?.focus();
+    }
+  };
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+    setFocusedIndex(0);
+  };
+
+  const containerWebProps = getWebProps([
+    selectStyles.container,
+    style as any
+  ]);
+
+  const triggerWebProps = getWebProps([
+    selectStyles.trigger({ type, intent }),
+  ]);
+
+  const handleClose = () => {
+    setIsOpen(false);
+    triggerRef.current?.focus();
+  };
+
+  const mergedRef = useMergeRefs(ref, containerWebProps.ref);
+
+  return (
+    <div {...containerWebProps} ref={mergedRef} data-testid={testID}>
+      {label && (
+        <label {...getWebProps([selectStyles.label])}>
+          {label}
+        </label>
+      )}
+
+      <div ref={triggerRef}>
+        <button
+          {...triggerWebProps}
+          onClick={handleTriggerClick}
+          disabled={disabled}
+          aria-label={accessibilityLabel || label}
+          aria-expanded={isOpen}
+          aria-haspopup="listbox"
+          type="button"
+        >
+          <div {...getWebProps([selectStyles.triggerContent])}>
+            {selectedOption?.icon && (
+              <span {...getWebProps([selectStyles.icon])}>
+                {selectedOption.icon}
+              </span>
+            )}
+            <span
+              {...getWebProps([
+                selectedOption ? selectStyles.triggerText : selectStyles.placeholder
+              ])}
+            >
+              {selectedOption ? selectedOption.label : placeholder}
+            </span>
+          </div>
+
+          <IconSvg
+            path={resolveIconPath('chevron-down')}
+            {...getWebProps([
+              selectStyles.chevron,
+              isOpen && selectStyles.chevronOpen
+            ])}
+            aria-label="chevron-down"
+          />
+        </button>
+      </div>
+      <PositionedPortal
+        open={isOpen}
+        anchor={triggerRef}
+        placement="bottom-start"
+        offset={4}
+        onClickOutside={handleClose}
+        onEscapeKey={handleClose}
+        matchWidth={false}
+        zIndex={1000}
+      >
+        <div
+          {...getWebProps([selectStyles.dropdown])}
+          style={{
+            maxHeight: maxHeight,
+            // Override positioning since PositionedPortal handles it
+            position: 'relative',
+            top: 'auto',
+            left: 'auto',
+            right: 'auto',
+          }}
+          role="listbox"
+        >
+            {searchable && (
+              <div {...getWebProps([selectStyles.searchContainer])}>
+                <input
+                  ref={searchInputRef}
+                  type="text"
+                  placeholder="Search options..."
+                  value={searchTerm}
+                  onChange={handleSearchChange}
+                  {...getWebProps([selectStyles.searchInput])}
+                />
+              </div>
+            )}
+
+            <div {...getWebProps([selectStyles.optionsList])}>
+              {filteredOptions.map((option, index) => {
+                const isSelected = option.value === value;
+
+                return (
+                  <div
+                    key={option.value}
+                    onClick={() => handleOptionSelect(option)}
+                    role="option"
+                    aria-selected={isSelected}
+                    onMouseEnter={() => setFocusedIndex(index)}
+                    {...getWebProps([selectStyles.option])}
+                  >
+                    <div {...getWebProps([selectStyles.optionContent])}>
+                      {option.icon && (
+                        <span {...getWebProps([selectStyles.optionIcon])}>
+                          {option.icon}
+                        </span>
+                      )}
+                      <span {...getWebProps([
+                        selectStyles.optionText,
+                        option.disabled && selectStyles.optionTextDisabled
+                      ])}>
+                        {option.label}
+                      </span>
+                    </div>
+                  </div>
+                );
+              })}
+
+              {filteredOptions.length === 0 && (
+                <div {...getWebProps([selectStyles.option])} style={{ cursor: 'default' }}>
+                  <span {...getWebProps([selectStyles.optionText])}>
+                    No options found
+                  </span>
+                </div>
+              )}
+            </div>
+        </div>
+      </PositionedPortal>
+
+      {helperText && (
+        <div
+          {...getWebProps([
+            selectStyles.helperText,
+          ])}
+        >
+          {helperText}
+        </div>
+      )}
+    </div>
+  );
+});
+
+Select.displayName = 'Select';
+
+export default Select;

package/src/Select/index.native.ts

@@ -0,0 +1,2 @@
+export { default } from './Select.native';
+export * from './types';

package/src/Select/index.ts

@@ -0,0 +1,5 @@
+import SelectComponent from './Select.web';
+
+export default SelectComponent;
+export { SelectComponent as Select };
+export * from './types';

package/src/Select/index.web.ts

@@ -0,0 +1,5 @@
+import SelectComponent from './Select.web';
+
+export default SelectComponent;
+export { SelectComponent as Select };
+export * from './types';