settings

2025-11-06 11:41:28 +01:00
parent ebed18afef
commit 28b9112781
7 changed files with 1388 additions and 1293 deletions
@@ -0,0 +1,147 @@
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { CheckIcon, ChevronDownIcon } from '../../ui/icons';
+
+const CapabilityDropdown = ({
+  id,
+  options = [],
+  selectedValues = [],
+  onSelect,
+  onDeselect,
+  formatLabel,
+  disabled = false,
+  loading = false,
+  summaryLabel = 'capabilities',
+}) => {
+  const anchorRef = useRef(null);
+  const menuRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const toggle = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    setIsOpen((previous) => !previous);
+  }, [disabled]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return undefined;
+    }
+
+    const handlePointerEvent = (event) => {
+      if (anchorRef.current?.contains(event.target) || menuRef.current?.contains(event.target)) {
+        return;
+      }
+      close();
+    };
+
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        close();
+      }
+    };
+
+    document.addEventListener('mousedown', handlePointerEvent);
+    document.addEventListener('touchstart', handlePointerEvent, { passive: true });
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('mousedown', handlePointerEvent);
+      document.removeEventListener('touchstart', handlePointerEvent);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [close, isOpen]);
+
+  const handleOptionClick = useCallback((value) => {
+    if (selectedValues.includes(value)) {
+      onDeselect?.(value);
+    } else {
+      onSelect?.(value);
+    }
+  }, [onDeselect, onSelect, selectedValues]);
+
+  const total = options.length;
+  const selectedCount = selectedValues.length;
+
+  const summaryText = total
+    ? `${selectedCount}/${total} ${summaryLabel} enabled`
+    : selectedCount
+      ? `${selectedCount} ${summaryLabel} selected`
+      : loading
+        ? `Loading ${summaryLabel}…`
+        : `No ${summaryLabel}`;
+
+  const buttonText = selectedCount || loading || total
+    ? summaryText
+    : `Select ${summaryLabel}`;
+
+  const emptyMessage = loading
+    ? `Loading ${summaryLabel}…`
+    : `No ${summaryLabel} available.`;
+
+  const isDisabled = disabled || (total === 0 && !selectedCount) || loading;
+
+  return (
+    <div className="capability-dropdown">
+      <button
+        type="button"
+        className="capability-dropdown__trigger"
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+        aria-controls={id ? `${id}-menu` : undefined}
+        onClick={toggle}
+        disabled={isDisabled}
+        ref={anchorRef}
+      >
+        <span>{buttonText}</span>
+        <ChevronDownIcon className="capability-dropdown__chevron" aria-hidden="true" />
+      </button>
+      {isOpen ? (
+        <div
+          id={id ? `${id}-menu` : undefined}
+          role="menu"
+          ref={menuRef}
+          className="menu menu--floating capability-dropdown__menu"
+        >
+          {total ? (
+            options.map((option) => {
+              const value = option?.value ?? option?.id ?? option;
+              const label = typeof formatLabel === 'function'
+                ? formatLabel(value)
+                : option?.label || String(value);
+              const selected = selectedValues.includes(value);
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  role="menuitemcheckbox"
+                  aria-checked={selected}
+                  className={`menu__item capability-dropdown__option${selected ? ' is-selected' : ''}`}
+                  onClick={() => handleOptionClick(value)}
+                >
+                  <span className="capability-dropdown__option-icon">
+                    {selected ? <CheckIcon className="icon-inline" aria-hidden="true" /> : null}
+                  </span>
+                  <span className="capability-dropdown__option-label">{label}</span>
+                </button>
+              );
+            })
+          ) : (
+            <div className="capability-dropdown__empty">{emptyMessage}</div>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default CapabilityDropdown;