@kosmeo-ui/react 0.1.0

package/src/components/inputs/multiSelect/index.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import DropdownArrowButton from "../dropdownArrowButton/index.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import useOutsideClick from "../../../hooks/useOutsideClick.js";
+import { useState, useRef, useEffect, useMemo } from "react";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import FieldShell from "../../forms/fieldShell/index.js";
+import { DropDownSection } from "./dropDown.js";
+import { PropsWithSize } from "../../types.js";
+import "./styles.css";
+
+interface MultiSelectProps<T> extends PropsWithSize {
+  /** Array of options to display */
+  options: T[];
+  /** Currently selected values */
+  value?: T[];
+  /** The key of the Options object that will be displayed to the user */
+  labelKey: keyof T;
+  /** Callback when selection changes */
+  onChange?: (values: T[]) => void;
+  /** Label to display above the component */
+  label?: string | React.ReactNode;
+  /** **_Optional_** whether the field is required (shows red asterisk and enables validation) */
+  required?: boolean;
+  /** Placeholder text when no items are selected */
+  placeholder?: string;
+  /** Whether the component is disabled */
+  disabled?: boolean;
+  /** ID for the component */
+  id?: string;
+}
+
+/**
+ * MultiSelect component with search functionality for selecting multiple options.
+ * Supports searching through options with a built-in filter.
+ *
+ * @param props - The props for the MultiSelect component
+ * @param props.options - Array of options to display
+ * @param props.value - Currently selected values
+ * @param props.onChange - Callback when selection changes
+ * @param props.label - **_Optional_** Label to display above the component
+ * @param props.placeholder - **_Optional_** Placeholder text when no items are selected
+ * @param props.disabled - **_Optional_** Whether the component is disabled
+ * @param props.id - **_Optional_** ID for the component
+ * @param props.size - **_Optional_** Size variant ("sm" | "md" | "lg"). Defaults to "md"
+ */
+const MultiSelect = <T,>(props: MultiSelectProps<T>) => {
+  const {
+    value = [],
+    placeholder = "Select options...",
+    disabled = false,
+    size = "md",
+    required = false,
+  } = props;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredOptions, setFilteredOptions] = useState(props.options);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const componentId =
+    props.id || `multiselect-${Math.random().toString(36).substring(2, 9)}`;
+
+  // Filter options based on search term
+  useEffect(() => {
+    if (searchTerm) {
+      const filtered = props.options.filter((option) =>
+        String(option[props.labelKey])
+          .toLowerCase()
+          .includes(searchTerm.toLowerCase())
+      );
+      setFilteredOptions(filtered);
+    } else {
+      setFilteredOptions(props.options);
+    }
+  }, [searchTerm, props.options]);
+
+  useOutsideClick([containerRef], () => setIsOpen(false));
+
+  // Focus search input when dropdown opens
+  useEffect(() => {
+    if (isOpen && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  const handleToggleDropdown = () => {
+    if (disabled) return;
+    setIsOpen(!isOpen);
+    if (!isOpen) {
+      setSearchTerm("");
+    }
+  };
+
+  const handleOptionToggle = (optionValue: T) => {
+    if (!props.onChange) return;
+
+    const isAlreadySelected = value.some((v) => {
+      if (
+        typeof v === "object" &&
+        v !== null &&
+        "value" in v &&
+        typeof optionValue === "object" &&
+        optionValue !== null &&
+        "value" in optionValue
+      ) {
+        return (
+          (v as { value: unknown }).value ===
+          (optionValue as { value: unknown }).value
+        );
+      }
+      return v === optionValue;
+    });
+
+    const newValues = isAlreadySelected
+      ? value.filter((v) => {
+          if (
+            typeof v === "object" &&
+            v !== null &&
+            "value" in v &&
+            typeof optionValue === "object" &&
+            optionValue !== null &&
+            "value" in optionValue
+          ) {
+            return (
+              (v as { value: unknown }).value !==
+              (optionValue as { value: unknown }).value
+            );
+          }
+          return v !== optionValue;
+        })
+      : [...value, optionValue];
+
+    props.onChange(newValues);
+  };
+
+  const handleSelectAll = () => {
+    if (!props.onChange) return;
+
+    const existingMap = new Map();
+    value.forEach((v) => {
+      if (typeof v === "object" && v !== null && "value" in v) {
+        existingMap.set((v as { value: unknown }).value, v);
+      } else {
+        existingMap.set(v, v);
+      }
+    });
+
+    const newValues = [...value];
+    filteredOptions.forEach((option) => {
+      const key =
+        typeof option === "object" && option !== null && "value" in option
+          ? (option as { value: unknown }).value
+          : option;
+
+      if (!existingMap.has(key)) {
+        newValues.push(option);
+      }
+    });
+
+    props.onChange(newValues);
+  };
+
+  const handleClearAll = () => {
+    if (!props.onChange) return;
+    props.onChange([]);
+  };
+
+  const selectedItems = useMemo(() => {
+    return value.map((v) => {
+      const key = Math.random().toString(36).slice(2);
+      return (
+        <div key={key} className="k-multiselect-selected-item">
+          <span className="k-multiselect-selected-item-label">
+            {String(v[props.labelKey])}
+          </span>
+          {!disabled && (
+            <button
+              type="button"
+              className="k-multiselect-selected-item-remove"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleOptionToggle(v);
+              }}
+            >
+              <FontAwesomeIcon icon={faXmark} />
+            </button>
+          )}
+        </div>
+      );
+    });
+  }, [value]);
+
+  return (
+    <div ref={containerRef}>
+      <FieldShell
+        label={props.label}
+        required={required}
+        htmlFor={componentId}
+        className="k-multiselect-container"
+      >
+        <div
+          id={componentId}
+          className={`k-multiselect k-multiselect-${size} ${
+            disabled ? "k-multiselect-disabled" : ""
+          } ${isOpen ? "k-multiselect-open" : ""}`}
+          onClick={handleToggleDropdown}
+          tabIndex={disabled ? -1 : 0}
+        >
+          <div className="k-multiselect-display">
+            {value.length > 0 ? (
+              <div className="k-multiselect-selected-items">
+                {selectedItems}
+              </div>
+            ) : (
+              <span className="k-multiselect-placeholder">{placeholder}</span>
+            )}
+          </div>
+          <DropdownArrowButton
+            size={size}
+            isOpen={isOpen}
+            disabled={disabled}
+            onClick={(e) => {
+              e.stopPropagation();
+              handleToggleDropdown();
+            }}
+          />
+        </div>
+        {isOpen && (
+          <DropDownSection
+            value={value}
+            labelKey={props.labelKey}
+            size={size}
+            searchTerm={searchTerm}
+            searchInputRef={searchInputRef}
+            filteredOptions={filteredOptions}
+            options={props.options}
+            setSearchTerm={setSearchTerm}
+            handleSelectAll={handleSelectAll}
+            handleClearAll={handleClearAll}
+            handleOptionToggle={handleOptionToggle}
+          />
+        )}
+      </FieldShell>
+    </div>
+  );
+};
+
+export default MultiSelect;

package/src/components/inputs/multiSelect/styles.css

@@ -0,0 +1,265 @@
+.k-multiselect-container {
+  width: 100%;
+  position: relative;
+}
+
+.k-multiselect-label {
+  display: block;
+  margin-bottom: 0.1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.k-multiselect {
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 0.375rem;
+  color: var(--text-color);
+  width: 100%;
+  box-sizing: border-box;
+  transition:
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
+  background-color: var(--background-color-light);
+  cursor: pointer;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  position: relative;
+  min-height: auto;
+}
+
+/* Size variants */
+.k-multiselect-sm {
+  font-size: var(--text-size-sm);
+  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
+}
+
+.k-multiselect-md {
+  font-size: var(--text-size-md);
+  padding: 0.625rem 2.75rem 0.625rem 1rem;
+}
+
+.k-multiselect-lg {
+  font-size: var(--text-size-lg);
+  padding: 0.75rem 3rem 0.75rem 1.25rem;
+}
+
+/* States */
+.k-multiselect:hover:not(.k-multiselect-disabled) {
+  border-color: var(--primary-color);
+}
+
+.k-multiselect:focus {
+  outline: none;
+  border-color: var(--border-color-active);
+  box-shadow: 0 0 0 0.1875rem var(--border-shadow-color-active);
+}
+
+.k-multiselect-open {
+  border-color: var(--border-color-active);
+  box-shadow: 0 0 0 0.1875rem var(--border-shadow-color-active);
+}
+
+.k-multiselect-disabled {
+  background-color: var(--disabled-bg);
+  color: var(--disabled-text);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Display area */
+.k-multiselect-display {
+  flex: 1;
+  padding-right: 0.5rem;
+}
+
+.k-multiselect-placeholder {
+  color: var(--text-color-secondary);
+  opacity: 0.7;
+}
+
+/* Selected items display */
+.k-multiselect-selected-items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 0.25rem;
+  transition: max-height 0.3s ease-in-out;
+}
+
+/* Fixed height for 5 items based on size */
+.k-multiselect-sm .k-multiselect-selected-items {
+  max-height: calc(5 * (var(--text-size-sm) + 1.15rem));
+}
+
+.k-multiselect-md .k-multiselect-selected-items {
+  max-height: calc(5 * (var(--text-size-md) + 1.5rem));
+}
+
+.k-multiselect-lg .k-multiselect-selected-items {
+  max-height: calc(5 * (var(--text-size-lg) + 1.8rem));
+}
+
+.k-multiselect-selected-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--background-color-dark);
+  border-radius: 0.25rem;
+}
+
+.k-multiselect-selected-item:hover {
+  background-color: var(--background-color-hover);
+}
+
+.k-multiselect-selected-item-label {
+  color: var(--text-color);
+  flex: 1;
+  text-align: left;
+}
+
+/* Size variants for selected items */
+.k-multiselect-sm .k-multiselect-selected-item {
+  padding: 0.25rem 0.5rem;
+  font-size: var(--text-size-sm);
+}
+
+.k-multiselect-md .k-multiselect-selected-item {
+  padding: 0.375rem 0.625rem;
+  font-size: var(--text-size-md);
+}
+
+.k-multiselect-lg .k-multiselect-selected-item {
+  padding: 0.5rem 0.75rem;
+  font-size: var(--text-size-lg);
+}
+
+.k-multiselect-selected-item-remove {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--text-color);
+  transition: color 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.5rem;
+}
+
+/* Size variants for remove button */
+.k-multiselect-sm .k-multiselect-selected-item-remove {
+  font-size: calc(var(--text-size-sm) * 0.85);
+}
+
+.k-multiselect-md .k-multiselect-selected-item-remove {
+  font-size: calc(var(--text-size-md) * 0.85);
+}
+
+.k-multiselect-lg .k-multiselect-selected-item-remove {
+  font-size: calc(var(--text-size-lg) * 0.85);
+}
+
+.k-multiselect-selected-item-remove:hover {
+  color: var(--danger-color);
+}
+
+/* Dropdown */
+.k-multiselect-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 0.25rem;
+  background-color: var(--background-color-light);
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 0.375rem;
+  box-shadow:
+    0 0.25rem 0.375rem -0.0625rem var(--shadow-color),
+    0 0.125rem 0.25rem -0.125rem var(--shadow-color);
+  z-index: 1000;
+  max-height: 20rem;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Search input */
+.k-multiselect-search-container {
+  padding: 0.5rem;
+  border-bottom: 0.0625rem solid var(--border-color);
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+/* Bulk actions */
+.k-multiselect-bulk-actions {
+  display: flex;
+  gap: 0.25rem;
+}
+
+/* Options list */
+.k-multiselect-options-list {
+  list-style: none;
+  margin: 0;
+  padding: 0.25rem 0;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.k-multiselect-option {
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.k-multiselect-option-sm {
+  font-size: var(--text-size-sm);
+  padding: 0.375rem 0.75rem;
+}
+
+.k-multiselect-option-md {
+  font-size: var(--text-size-md);
+  padding: 0.5rem 1rem;
+}
+
+.k-multiselect-option-lg {
+  font-size: var(--text-size-lg);
+  padding: 0.625rem 1.25rem;
+}
+
+.k-multiselect-option:hover {
+  background-color: var(--background-color-dark);
+}
+
+.k-multiselect-option-selected {
+  background-color: var(--background-color-dark);
+  color: var(--text-color);
+}
+
+.k-multiselect-option-selected:hover {
+  background-color: var(--background-color-hover);
+}
+
+.k-multiselect-option-label {
+  flex: 1;
+}
+
+.k-multiselect-check {
+  color: var(--text-color);
+  font-size: 0.875rem;
+}
+
+.k-multiselect-no-results {
+  text-align: center;
+  color: var(--text-color-secondary);
+  font-style: italic;
+  padding: 1rem;
+}