@bikdotai/bik-widgets 1.0.0 → 1.0.2

package/src/components/inputComponents/Dropdown.tsx

@@ -1,630 +0,0 @@
-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>
-  );
-};