@bikdotai/bik-widgets 1.0.0

package/src/components/inputComponents/Dropdown.tsx

@@ -0,0 +1,630 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { ChevronIcon } from '../../assets/svg/ChevronIcon';
+import { DropdownCheckIcon } from '../../assets/svg/DropdownCheckIcon';
+import { RadioIcon } from '../../assets/svg/RadioIcon';
+import { UncheckedCheckboxIcon } from '../../assets/svg/UncheckedCheckboxIcon';
+import { UncheckedRadioIcon } from '../../assets/svg/UncheckedRadioIcon';
+import ErrorIcon from 'assets/svg/ErrorIcon';
+
+export interface DropdownOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface DropdownProps {
+  id?: string;
+  value: string[];
+  label?: string;
+  onChange: (value: string[]) => void;
+  options: DropdownOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  isRequired?: boolean;
+  className?: string;
+  error?: string;
+  onValidate?: (value: string[]) => string | null;
+  onBlur?: () => void;
+  searchable?: boolean;
+  maxHeight?: number;
+  closeOnSelect?: boolean;
+  showSelectAll?: boolean;
+  maxSelectedDisplay?: number;
+  isMultiSelect?: boolean;
+  customTrigger?: (
+    selectedItems: DropdownOption[],
+    isOpen: boolean,
+  ) => React.ReactNode;
+  isPreview?: boolean;
+  fontColour?: string;
+}
+
+interface DropdownState {
+  isOpen: boolean;
+  isFocused: boolean;
+  searchTerm: string;
+  dropdownPosition: 'bottom' | 'top';
+}
+
+interface DropdownComputedValues {
+  hasValue: boolean;
+  shouldFloatLabel: boolean;
+  shouldCloseOnSelect: boolean;
+  shouldShowSelectAll: boolean;
+  selectedOptions: DropdownOption[];
+  filteredOptions: DropdownOption[];
+  isAllSelected: boolean;
+}
+
+const useDropdownState = (initialState?: Partial<DropdownState>) => {
+  const [state, setState] = useState<DropdownState>({
+    isOpen: false,
+    isFocused: false,
+    searchTerm: '',
+    dropdownPosition: 'bottom',
+    ...initialState,
+  });
+
+  const updateState = (updates: Partial<DropdownState>) => {
+    setState(prev => ({ ...prev, ...updates }));
+  };
+
+  const resetState = () => {
+    setState({
+      isOpen: false,
+      isFocused: false,
+      searchTerm: '',
+      dropdownPosition: 'bottom',
+    });
+  };
+
+  return { state, updateState, resetState };
+};
+
+const useDropdownComputedValues = (
+  options: DropdownOption[],
+  value: string[],
+  isMultiSelect: boolean,
+  closeOnSelect: boolean | undefined,
+  showSelectAll: boolean,
+  searchTerm: string,
+  searchable: boolean,
+  isOpen: boolean,
+  isFocused: boolean,
+): DropdownComputedValues => {
+  const selectedOptions = options.filter(option =>
+    value.includes(option.value),
+  );
+
+  const filteredOptions =
+    !searchable || !searchTerm
+      ? options
+      : options.filter(option =>
+          option.label.toLowerCase().includes(searchTerm.toLowerCase()),
+        );
+
+  const shouldCloseOnSelect =
+    closeOnSelect !== undefined ? closeOnSelect : !isMultiSelect;
+
+  const shouldShowSelectAll = showSelectAll && isMultiSelect;
+
+  const isAllSelected =
+    filteredOptions.length > 0 &&
+    filteredOptions
+      .filter(opt => !opt.disabled)
+      .every(option => value.includes(option.value));
+
+  const hasValue = value.length > 0;
+  const shouldFloatLabel = isFocused || hasValue || isOpen;
+
+  return {
+    hasValue,
+    shouldFloatLabel,
+    shouldCloseOnSelect,
+    shouldShowSelectAll,
+    selectedOptions,
+    filteredOptions,
+    isAllSelected,
+  };
+};
+
+export const Dropdown: React.FC<DropdownProps> = ({
+  value = [],
+  onChange,
+  options = [],
+  placeholder = 'Select options',
+  disabled = false,
+  isRequired = false,
+  className = '',
+  label,
+  error,
+  id,
+  onBlur,
+  searchable = false,
+  maxHeight = 200,
+  closeOnSelect,
+  showSelectAll = true,
+  maxSelectedDisplay = 2,
+  isMultiSelect = true,
+  customTrigger,
+  isPreview = false,
+  fontColour,
+}) => {
+  const { state, updateState, resetState } = useDropdownState();
+  const { isOpen, isFocused, searchTerm, dropdownPosition } = state;
+
+  const [currentStyle, setCurrentStyle] = useState<Record<
+    string,
+    string
+  > | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const computedValues = useDropdownComputedValues(
+    options,
+    value,
+    isMultiSelect,
+    closeOnSelect,
+    showSelectAll,
+    searchTerm,
+    searchable,
+    isOpen,
+    isFocused,
+  );
+
+  const {
+    selectedOptions,
+    filteredOptions,
+    shouldCloseOnSelect,
+    shouldShowSelectAll,
+    isAllSelected,
+    hasValue,
+    shouldFloatLabel,
+  } = computedValues;
+
+  useEffect(() => {
+    import('./Dropdown.module.css').then(stylesModule => {
+      setCurrentStyle(stylesModule.default);
+    });
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        resetState();
+        onBlur?.();
+      }
+    };
+
+    const handleResize = () => {
+      if (isOpen && dropdownRef.current) {
+        // Recalculate position on resize
+        const rect = dropdownRef.current.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const spaceBelow = viewportHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const estimatedDropdownHeight = Math.min(maxHeight + 80, 320);
+        const minSpaceBuffer = 20;
+
+        const newDropdownPosition =
+          spaceBelow < estimatedDropdownHeight + minSpaceBuffer &&
+          spaceAbove > estimatedDropdownHeight + minSpaceBuffer
+            ? 'top'
+            : 'bottom';
+
+        updateState({ dropdownPosition: newDropdownPosition });
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [onBlur, resetState, isOpen, maxHeight, updateState]);
+
+  const handleToggle = () => {
+    if (disabled) return;
+
+    const newIsOpen = !isOpen;
+
+    // Calculate dropdown position when opening
+    let newDropdownPosition: 'bottom' | 'top' = 'bottom';
+
+    if (newIsOpen && dropdownRef.current) {
+      const rect = dropdownRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const spaceBelow = viewportHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      const estimatedDropdownHeight = Math.min(maxHeight + 80, 320); // Adding buffer for search/select all/padding
+      const minSpaceBuffer = 20; // Minimum space to keep from viewport edge
+
+      // If there's not enough space below but enough space above, open upward
+      if (
+        spaceBelow < estimatedDropdownHeight + minSpaceBuffer &&
+        spaceAbove > estimatedDropdownHeight + minSpaceBuffer
+      ) {
+        newDropdownPosition = 'top';
+      }
+    }
+
+    updateState({
+      isOpen: newIsOpen,
+      isFocused: newIsOpen,
+      dropdownPosition: newDropdownPosition,
+    });
+
+    if (newIsOpen && searchable) {
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  };
+
+  const handleOptionClick = (optionValue: string) => {
+    const option = options.find(opt => opt.value === optionValue);
+    if (option?.disabled) return;
+
+    const newValue = isMultiSelect
+      ? value.includes(optionValue)
+        ? value.filter(v => v !== optionValue)
+        : [...value, optionValue]
+      : value.includes(optionValue)
+        ? []
+        : [optionValue];
+
+    onChange(newValue);
+
+    if (
+      !isMultiSelect ||
+      (shouldCloseOnSelect && !value.includes(optionValue))
+    ) {
+      resetState();
+      onBlur?.();
+    }
+  };
+
+  const handleSelectAll = () => {
+    const availableOptions = filteredOptions.filter(option => !option.disabled);
+
+    if (isAllSelected) {
+      const newValue = value.filter(
+        v => !availableOptions.some(option => option.value === v),
+      );
+      onChange(newValue);
+    } else {
+      const newValues = availableOptions.map(option => option.value);
+      const combinedValue = Array.from(new Set([...value, ...newValues]));
+      onChange(combinedValue);
+    }
+  };
+
+  const handleClearAll = () => {
+    onChange([]);
+  };
+
+  const handleRemoveItem = (optionValue: string, event: React.MouseEvent) => {
+    event.stopPropagation();
+    const newValue = value.filter(v => v !== optionValue);
+    onChange(newValue);
+  };
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateState({ searchTerm: e.target.value });
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      resetState();
+    } else if (e.key === 'Backspace' && searchTerm === '' && value.length > 0) {
+      const newValue = value.slice(0, -1);
+      onChange(newValue);
+    }
+  };
+
+  if (!currentStyle) {
+    return <div style={{ height: '80px' }} />;
+  }
+
+  const wrapperClasses = [
+    currentStyle['bik-dropdown__inputWrapper'],
+    (isFocused || isOpen) &&
+      currentStyle['bik-dropdown__inputWrapper--focused'],
+    error && currentStyle['bik-dropdown__inputWrapper--error'],
+    disabled && currentStyle['bik-dropdown__inputWrapper--disabled'],
+    isOpen && currentStyle['bik-dropdown__inputWrapper--open'],
+    hasValue && currentStyle['bik-dropdown__inputWrapper--hasSelectedItems'],
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const labelClasses = [
+    currentStyle['bik-dropdown__label'],
+    shouldFloatLabel && currentStyle['bik-dropdown__label--floated'],
+    error && currentStyle['bik-dropdown__label--error'],
+    disabled && currentStyle['bik-dropdown__label--disabled'],
+    hasValue && currentStyle['bik-dropdown__label--hasValue'],
+    hasValue && currentStyle['bik-dropdown__label--hasSelectedItems'],
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const wrapperStyle = {
+    borderColor: error ? '#b92321' : '#e0e0e0',
+    ...(fontColour ? { color: fontColour } : {}),
+  } as React.CSSProperties;
+
+  return (
+    <div
+      className={`${currentStyle['bik-dropdown__container']} ${className}`}
+      ref={dropdownRef}
+      data-mode={isPreview ? 'preview' : 'default'}
+    >
+      <div className={wrapperClasses} style={wrapperStyle}>
+        <div
+          className={currentStyle['bik-dropdown__input']}
+          onClick={handleToggle}
+          style={fontColour ? { color: fontColour } : undefined}
+        >
+          {customTrigger ? (
+            customTrigger(selectedOptions, isOpen)
+          ) : searchable && isOpen ? (
+            <div className={currentStyle?.['bik-dropdown__searchContainer']}>
+              {value.length === 0 ? (
+                <span
+                  className={currentStyle?.['bik-dropdown__placeholder']}
+                  style={fontColour ? { color: fontColour } : undefined}
+                >
+                  {placeholder}
+                </span>
+              ) : !isMultiSelect && value.length === 1 ? (
+                <div className={currentStyle?.['bik-dropdown__selectedItems']}>
+                  <span
+                    className={
+                      currentStyle?.['bik-dropdown__singleSelectedItem']
+                    }
+                    style={fontColour ? { color: fontColour } : undefined}
+                  >
+                    {selectedOptions[0]?.label}
+                  </span>
+                </div>
+              ) : value.length <= maxSelectedDisplay ? (
+                <div className={currentStyle?.['bik-dropdown__selectedItems']}>
+                  {selectedOptions.map(option => (
+                    <span
+                      key={option.value}
+                      className={currentStyle?.['bik-dropdown__selectedItem']}
+                      style={fontColour ? { color: fontColour } : undefined}
+                    >
+                      {option.label}
+                      <button
+                        type="button"
+                        className={currentStyle?.['bik-dropdown__removeButton']}
+                        onClick={e => handleRemoveItem(option.value, e)}
+                        disabled={disabled}
+                      >
+                        ×
+                      </button>
+                    </span>
+                  ))}
+                </div>
+              ) : (
+                <div className={currentStyle?.['bik-dropdown__selectedItems']}>
+                  <span
+                    className={currentStyle?.['bik-dropdown__selectedCount']}
+                  >
+                    {value.length} items selected
+                  </span>
+                  {value.length > 0 && (
+                    <button
+                      type="button"
+                      className={currentStyle?.['bik-dropdown__clearButton']}
+                      onClick={e => {
+                        e.stopPropagation();
+                        handleClearAll();
+                      }}
+                      disabled={disabled}
+                    >
+                      Clear all
+                    </button>
+                  )}
+                </div>
+              )}
+              <input
+                id={id}
+                ref={inputRef}
+                type="text"
+                value={searchTerm}
+                onChange={handleSearchChange}
+                onKeyDown={handleKeyDown}
+                placeholder="Search..."
+                className={currentStyle?.['bik-dropdown__search']}
+                style={fontColour ? { color: fontColour } : undefined}
+              />
+            </div>
+          ) : value.length === 0 ? (
+            <span
+              className={currentStyle?.['bik-dropdown__placeholder']}
+              style={fontColour ? { color: fontColour } : undefined}
+            >
+              {placeholder}
+            </span>
+          ) : !isMultiSelect && value.length === 1 ? (
+            <div className={currentStyle?.['bik-dropdown__selectedItems']}>
+              <span
+                className={currentStyle?.['bik-dropdown__singleSelectedItem']}
+                style={fontColour ? { color: fontColour } : undefined}
+              >
+                {selectedOptions[0]?.label}
+              </span>
+            </div>
+          ) : value.length <= maxSelectedDisplay ? (
+            <div className={currentStyle?.['bik-dropdown__selectedItems']}>
+              {selectedOptions.map(option => (
+                <span
+                  key={option.value}
+                  className={currentStyle?.['bik-dropdown__selectedItem']}
+                  style={fontColour ? { color: fontColour } : undefined}
+                >
+                  {option.label}
+                  <button
+                    type="button"
+                    className={currentStyle?.['bik-dropdown__removeButton']}
+                    onClick={e => handleRemoveItem(option.value, e)}
+                    disabled={disabled}
+                  >
+                    ×
+                  </button>
+                </span>
+              ))}
+            </div>
+          ) : (
+            <div className={currentStyle?.['bik-dropdown__selectedItems']}>
+              <span className={currentStyle?.['bik-dropdown__selectedCount']}>
+                {value.length} items selected
+              </span>
+              {value.length > 0 && (
+                <button
+                  type="button"
+                  className={currentStyle?.['bik-dropdown__clearButton']}
+                  onClick={e => {
+                    e.stopPropagation();
+                    handleClearAll();
+                  }}
+                  disabled={disabled}
+                >
+                  Clear all
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+        {label && (
+          <div className={labelClasses}>
+            {label}
+            {isRequired && (
+              <span className={currentStyle['bik-dropdown__required']}>*</span>
+            )}
+          </div>
+        )}
+        <div className={currentStyle['bik-dropdown__icon']}>
+          <ChevronIcon
+            className={`${currentStyle['bik-dropdown__chevron']} ${
+              isOpen ? currentStyle['bik-dropdown__chevron--open'] : ''
+            }`}
+          />
+        </div>
+      </div>
+
+      {isOpen && (
+        <div
+          className={`${currentStyle['bik-dropdown__options']} ${
+            dropdownPosition === 'top'
+              ? currentStyle['bik-dropdown__options--top']
+              : ''
+          }`}
+          style={{ maxHeight }}
+        >
+          {searchable && (
+            <div className={currentStyle?.['bik-dropdown__searchWrapper']}>
+              <input
+                type="text"
+                value={searchTerm}
+                onChange={handleSearchChange}
+                onKeyDown={handleKeyDown}
+                placeholder="Search options..."
+                className={currentStyle?.['bik-dropdown__searchInput']}
+              />
+            </div>
+          )}
+          {shouldShowSelectAll &&
+            filteredOptions.filter(opt => !opt.disabled).length > 1 && (
+              <div className={currentStyle?.['bik-dropdown__selectAllWrapper']}>
+                <div
+                  className={`${currentStyle?.['bik-dropdown__option']} ${currentStyle?.['bik-dropdown__selectAllOption']}`}
+                  onClick={handleSelectAll}
+                  style={fontColour ? { color: fontColour } : undefined}
+                >
+                  <div className={currentStyle?.['bik-dropdown__checkbox']}>
+                    {isAllSelected ? (
+                      <DropdownCheckIcon />
+                    ) : (
+                      <UncheckedCheckboxIcon />
+                    )}
+                  </div>
+                  <span style={fontColour ? { color: fontColour } : undefined}>
+                    {isAllSelected ? 'Deselect All' : 'Select All'}
+                  </span>
+                </div>
+              </div>
+            )}
+          <div className={currentStyle['bik-dropdown__optionsList']}>
+            {filteredOptions.length === 0 ? (
+              <div className={currentStyle?.['bik-dropdown__noOptions']}>
+                No options found
+              </div>
+            ) : (
+              filteredOptions.map(option => (
+                <div
+                  key={option.value}
+                  className={`${currentStyle?.['bik-dropdown__option']} ${
+                    value.includes(option.value)
+                      ? currentStyle?.['bik-dropdown__option--selected']
+                      : ''
+                  } ${
+                    option.disabled
+                      ? currentStyle?.['bik-dropdown__option--disabled']
+                      : ''
+                  }`}
+                  onClick={() => handleOptionClick(option.value)}
+                  style={fontColour ? { color: fontColour } : undefined}
+                >
+                  <div
+                    className={
+                      isMultiSelect
+                        ? currentStyle?.['bik-dropdown__checkbox']
+                        : currentStyle?.['bik-dropdown__radio']
+                    }
+                  >
+                    {isMultiSelect ? (
+                      value.includes(option.value) ? (
+                        <DropdownCheckIcon />
+                      ) : (
+                        <UncheckedCheckboxIcon />
+                      )
+                    ) : value.includes(option.value) ? (
+                      <RadioIcon />
+                    ) : (
+                      <UncheckedRadioIcon />
+                    )}
+                  </div>
+                  <span
+                    className={currentStyle?.['bik-dropdown__optionLabel']}
+                    style={fontColour ? { color: fontColour } : undefined}
+                  >
+                    {option.label}
+                  </span>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+
+      {error && (
+        <div
+          className={currentStyle['bik-dropdown__error']}
+          style={{ display: 'flex', alignItems: 'center' }}
+        >
+          <div className={currentStyle['bik-dropdown__errorIcon']}>
+            <ErrorIcon size={12} />
+          </div>
+          {error}
+        </div>
+      )}
+    </div>
+  );
+};