@hellobetterdigitalnz/betterui 0.0.3-33 → 0.0.3-331

package/src/Components/Form/MultiSelectField/MultiSelectField.tsx

@@ -0,0 +1,454 @@
+import React, { MouseEvent, useEffect, useRef, useState } from "react";
+import cx from "classnames";
+import CaretDown from "../../Icons/Arrows/CaretDown/CaretDown";
+import CaretUp from "../../Icons/Arrows/CaretUp/CaretUp";
+import MultiSelectFieldTag from "./MultiSelectFieldTag";
+import MultiSelectFieldItem from "./MultiSelectFieldItem";
+import styles from "./multiSelectField.module.scss";
+import MultiSelectFieldProps, { SelectOption } from "./MultiSelectFieldProps";
+import LoadingInput from "../LoadingInput/LoadingInput.tsx";
+import { createPortal } from "react-dom";
+
+const MultiSelectField: React.FC<MultiSelectFieldProps> = (props) => {
+  const {
+    placeholder,
+    value = [],
+    onChange,
+    onClick,
+    options = [],
+    onSearch,
+    creatable = false,
+    onCreateNew,
+    loading,
+    disabled,
+    extraClass,
+    error,
+    limit
+  } = props;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const [typedValue, setTypedValue] = useState("");
+  const [option, setOption] = useState<SelectOption[]>(options);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const controlRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [dropdownStyles, setDropdownStyles] = useState<React.CSSProperties>({});
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const isOptionSelected = (option: SelectOption) => {
+    return value.some(
+      (selectedOption) => selectedOption.value === option.value,
+    );
+  };
+
+  const isLimitReached =
+    typeof limit === "number" && value.length >= limit;
+
+  const selectOption = (option: SelectOption) => {
+    const alreadySelected = isOptionSelected(option);
+
+    if (alreadySelected) {
+      onChange(value.filter((o) => o.value !== option.value));
+      return;
+    }
+
+    if (isLimitReached) return;
+
+    onChange([...value, option]);
+  };
+
+  useEffect(() => {
+    if (isOpen) setHighlightedIndex(0);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setTypedValue("");
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: Event) => {
+      const target = event.target as Node;
+
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(target) &&
+        dropdownRef.current &&
+        !dropdownRef.current.contains(target)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const updateDropdownPosition = () => {
+    if (!isOpen || !controlRef.current || !dropdownRef.current) return;
+
+    const rect = controlRef.current.getBoundingClientRect();
+    const dropdownHeight = dropdownRef.current.offsetHeight;
+
+    const viewport = window.visualViewport;
+    const scrollY = window.scrollY || document.documentElement.scrollTop;
+    const scrollX = window.scrollX || document.documentElement.scrollLeft;
+
+    // Calculate available space in the visual viewport
+    const viewportHeight = viewport?.height ?? window.innerHeight;
+    const viewportOffsetTop = viewport?.offsetTop ?? 0;
+
+    // Space below relative to visual viewport bottom
+    const spaceBelow = (viewportOffsetTop + viewportHeight) - rect.bottom;
+
+    // Check if we should show above
+    const shouldShowAbove = spaceBelow < dropdownHeight && rect.top > dropdownHeight;
+
+    const dropdownTop = shouldShowAbove
+      ? rect.top + scrollY - dropdownHeight
+      : rect.bottom + scrollY;
+
+    setDropdownStyles({
+      top: `${dropdownTop}px`,
+      left: `${rect.left + scrollX}px`,
+      width: `${rect.width}px`,
+      position: "absolute",
+      zIndex: 99999,
+    });
+  };
+
+  useEffect(() => {
+    if (!controlRef.current) return;
+
+    let initialPosition = controlRef.current.getBoundingClientRect();
+
+    const handleResizeOrScroll = () => {
+      updateDropdownPosition();
+
+      if (!controlRef.current) return;
+
+      const currentPosition = controlRef.current.getBoundingClientRect();
+
+      if (
+        initialPosition.top !== currentPosition.top ||
+        initialPosition.left !== currentPosition.left
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      window.addEventListener("resize", handleResizeOrScroll);
+      window.addEventListener("scroll", handleResizeOrScroll, true);
+    }
+
+    return () => {
+      window.removeEventListener("resize", handleResizeOrScroll);
+      window.removeEventListener("scroll", handleResizeOrScroll, true);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    updateDropdownPosition();
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleResizeOrScroll = () => {
+      updateDropdownPosition();
+    };
+
+    window.addEventListener("resize", handleResizeOrScroll);
+    window.addEventListener("scroll", handleResizeOrScroll, true);
+
+    return () => {
+      window.removeEventListener("resize", handleResizeOrScroll);
+      window.removeEventListener("scroll", handleResizeOrScroll, true);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handler = () => updateDropdownPosition();
+
+    window.visualViewport?.addEventListener("resize", handler);
+    window.visualViewport?.addEventListener("scroll", handler);
+
+    return () => {
+      window.visualViewport?.removeEventListener("resize", handler);
+      window.visualViewport?.removeEventListener("scroll", handler);
+    };
+  }, [isOpen]);
+
+
+  useEffect(() => {
+    if (!controlRef.current) return;
+
+    let lastPosition = controlRef.current.getBoundingClientRect();
+
+    const observer = new ResizeObserver(() => {
+      const currentPosition = controlRef.current!.getBoundingClientRect();
+
+      if (
+        lastPosition.y !== currentPosition.y ||
+        lastPosition.x !== currentPosition.x ||
+        lastPosition.top !== currentPosition.top ||
+        lastPosition.left !== currentPosition.left
+      ) {
+        setIsOpen(false);
+      }
+      lastPosition = currentPosition;
+    });
+
+    observer.observe(controlRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [controlRef, isOpen]);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.target !== controlRef.current && e.target !== inputRef.current)
+        return;
+
+      const filteredOptions = option.filter((option) =>
+        option.label.toLowerCase().includes(typedValue.toLowerCase()),
+      );
+
+      switch (e.code) {
+        case "Enter":
+          if (e.target === inputRef.current) {
+            setIsOpen((prev) => !prev);
+            if (isOpen && filteredOptions.length > 0 && !isLimitReached) {
+              selectOption(filteredOptions[highlightedIndex]);
+              if (inputRef.current) {
+                inputRef.current.blur();
+              }
+            }
+            if (isOpen && filteredOptions.length >= 0) {
+              if (inputRef.current) {
+                inputRef.current.blur();
+              }
+            }
+          }
+
+          if (creatable && typedValue.trim() !== "" && !isLimitReached) {
+            const newOption: SelectOption = {
+              label: typedValue.trim(),
+              value: typedValue.trim().replace(/\s/g, "-"),
+            };
+
+            if (!options.some((o) => o.value === newOption.value)) {
+              setOption((prev) => [...prev, newOption]);
+              selectOption(newOption);
+              if (onCreateNew) {
+                // @ts-ignore
+                onCreateNew(newOption, e);
+              }
+            }
+
+            setTypedValue("");
+            setIsOpen(false);
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (!isOpen) {
+            setIsOpen(true);
+          } else {
+            setHighlightedIndex((prevIndex) =>
+              prevIndex > 0 ? prevIndex - 1 : filteredOptions.length - 1,
+            );
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen) {
+            setIsOpen(true);
+          } else {
+            setHighlightedIndex((prevIndex) =>
+              prevIndex < filteredOptions.length - 1 ? prevIndex + 1 : 0,
+            );
+          }
+          break;
+        case "Escape":
+          setIsOpen(false);
+          setTypedValue("");
+          break;
+      }
+    };
+
+    controlRef.current?.addEventListener("keydown", handler);
+
+    return () => {
+      controlRef.current?.removeEventListener("keydown", handler);
+    };
+  }, [
+    isOpen,
+    highlightedIndex,
+    options,
+    typedValue,
+    selectOption,
+    creatable,
+    onCreateNew,
+  ]);
+
+  const filteredOptions = options.filter((option) =>
+    option.label.toLowerCase().includes(typedValue.toLowerCase()),
+  );
+
+  const handleControlClick = (e: MouseEvent<HTMLDivElement>) => {
+    setIsOpen((prev) => !prev);
+    setIsInputFocused(!isInputFocused);
+    if (!isOpen && inputRef.current) {
+      inputRef.current.focus();
+    } else {
+      // @ts-ignore
+      inputRef.current.blur();
+    }
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  useEffect(() => {
+    if (onSearch) {
+      onSearch(typedValue);
+    }
+  }, [typedValue, onSearch]);
+
+  const classNames = [
+    'multiSelectField',
+    styles.dropdown
+  ];
+  if (error) {
+    classNames.push(styles.error);
+  }
+
+  if (disabled) {
+    classNames.push(styles.disabled);
+  }
+
+  if (extraClass) {
+    classNames.push(extraClass);
+  }
+
+  return (
+    <div ref={containerRef} className={cx(classNames)}>
+      {loading && <LoadingInput />}
+      <div
+        className={styles.control}
+        ref={controlRef}
+        onClick={handleControlClick}
+        tabIndex={0}
+      >
+        {!isOpen && value.length === 0 && (
+          <span className={styles.placeholder}>{placeholder}</span>
+        )}
+        <div className={styles.tagHolder}>
+          {value.map((v) => (
+            <MultiSelectFieldTag
+              key={v.value}
+              label={v.label}
+              onRemove={(e) => {
+                e.stopPropagation();
+                selectOption(v);
+              }}
+            />
+          ))}
+          <div className={styles.input}>
+            <input
+              type="text"
+              ref={inputRef}
+              value={typedValue}
+              onChange={(e) => setTypedValue(e.target.value)}
+              onFocus={() => setTimeout(updateDropdownPosition, 100)}
+              onBlur={() => setTimeout(updateDropdownPosition, 100)}
+            />
+          </div>
+        </div>
+        <div className={styles.chevron}>
+          {!isOpen ? <CaretDown /> : <CaretUp />}
+        </div>
+      </div>
+
+      {creatable ? (
+        <>
+          {!!isOpen && createPortal(
+            <div
+              ref={dropdownRef}
+              style={{ ...dropdownStyles }}
+              className={`${styles.dropdownMenu} dropdownMenu`}
+            >
+              {creatable && filteredOptions.length === 0 && (
+                <div className={styles.createOptionMessage}>
+                  Press Enter to create new
+                </div>
+              )}
+              {filteredOptions.length > 0 &&
+                filteredOptions.map((option, index) => (
+                  <MultiSelectFieldItem
+                    id={`${index}`}
+                    key={option.value}
+                    onMouseEnter={() => setHighlightedIndex(index)}
+                    label={option.label}
+                    value={option.value}
+                    handleSelect={(e) => {
+                      e.stopPropagation();
+                      selectOption(option);
+                    }}
+                    isSelected={isOptionSelected(option)}
+                    isHighlighted={index === highlightedIndex}
+                    disable={
+                      isLimitReached && !isOptionSelected(option)
+                    }
+                  />
+                ))}
+            </div>,
+            document.body
+          )}
+        </>
+      ) : (
+        <>
+          {!!isOpen && filteredOptions.length > 0 && createPortal(
+            <div
+              ref={dropdownRef}
+              style={{ ...dropdownStyles }}
+              className={`${styles.dropdownMenu} dropdownMenu`}
+            >
+              {filteredOptions.length > 0 &&
+                filteredOptions.map((option, index) => (
+                  <MultiSelectFieldItem
+                    id={`${index}`}
+                    key={option.value}
+                    onMouseEnter={() => setHighlightedIndex(index)}
+                    label={option.label}
+                    value={option.value}
+                    handleSelect={(e) => {
+                      e.stopPropagation();
+                      selectOption(option);
+                    }}
+                    isSelected={isOptionSelected(option)}
+                    isHighlighted={index === highlightedIndex}
+                    disable={
+                      isLimitReached && !isOptionSelected(option)
+                    }
+                  />
+                ))}
+            </div>,
+            document.body
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default MultiSelectField;

package/src/Components/Form/MultiSelectField/MultiSelectFieldItem.tsx

@@ -0,0 +1,38 @@
+import MultiSelectFieldItemProps from "./MultiSelectFieldItemProps.tsx";
+import {MouseEvent} from "react";
+import styles from './multiSelectField.module.scss'
+
+const MultiSelectFieldItem = (props: MultiSelectFieldItemProps) => {
+  const {label,
+    value,
+    onMouseEnter ,
+    handleSelect,
+    isSelected,
+    isHighlighted,
+    id,
+    disable
+  } = props
+  return (
+    <div
+      id={`${id}`}
+      className={`
+      ${styles.dropdownItem}
+      dropdownItem
+      ${isHighlighted ? `${styles.active} dropdownItemActive ` : ''}
+      ${isSelected ? `${styles.selected} dropdownItemSelected` : ''}
+      ${disable ? `${styles.disabled} dropdownItemDisabled` : ''}`
+    }
+     data-value={value} aria-label={label}
+     onClick={(e: MouseEvent) => {
+       if (handleSelect) {
+         handleSelect(e, value);
+       }
+     }}
+     onMouseEnter={onMouseEnter}
+     >
+      {label}
+    </div>
+  );
+};
+
+export default MultiSelectFieldItem;

package/src/Components/Form/MultiSelectField/MultiSelectFieldItemProps.tsx

@@ -0,0 +1,13 @@
+
+interface MultiSelectFieldItemProps {
+  id?: number | string | undefined;
+  label?: string;
+  value?: string | number;
+  handleSelect: (e: React.MouseEvent, value: string | number | undefined) => void;
+  onMouseEnter?:() => void;
+  isSelected?: boolean;
+  isHighlighted?: boolean;
+  disable?: boolean;
+}
+
+export default MultiSelectFieldItemProps;

package/src/Components/Form/MultiSelectField/MultiSelectFieldProps.tsx

@@ -0,0 +1,37 @@
+import {MouseEvent, FocusEvent} from "react";
+
+interface SelectOption  {
+  label: string | any;
+  value: string | number | any;
+}
+
+interface MultiSelectFieldProps {
+  name?: string;
+  id?: string;
+  value?: SelectOption[]
+  options: SelectOption[];
+  extraClass?: string;
+  placeholder?: string;
+  error?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  autoComplete?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  required?: boolean;
+  ariaLabel?: string;
+  ariaLabeledby?: string;
+  creatable?:boolean;
+  onCreateNew?: (option: string|number, e: any) => void;
+  ariaDescribedby?: string;
+  onClick?: (e: MouseEvent ,value?: SelectOption[]) => void;
+  onChange: (value: SelectOption[]) => void
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+  onSearch?: (keywords: any) => void;
+  loading?:boolean;
+  limit?: number;
+}
+export type { SelectOption };
+
+export default MultiSelectFieldProps;

package/src/Components/Form/MultiSelectField/MultiSelectFieldTag.tsx

@@ -0,0 +1,24 @@
+import {XIcon} from "../../Icons";
+import MultiSelectFieldTagProps from "./MultiSelectFieldTagProps.tsx";
+import styles from './multiSelectField.module.scss'
+
+
+const MultiSelectFieldTag = (props: MultiSelectFieldTagProps) => {
+
+  const {label, onRemove} = props
+
+  return <div className={`${styles.tagWrap} tagWrap`}>
+    <button
+      onClick={onRemove}
+      className={`${styles.tag} tag`}
+    >
+      {label}
+      <span className={`${styles.removeBtn} removeBtn`}>
+      <XIcon type={'regular'}/>
+    </span>
+    </button>
+  </div>
+
+};
+
+export default MultiSelectFieldTag;

package/src/Components/Form/MultiSelectField/MultiSelectFieldTagProps.tsx

@@ -0,0 +1,6 @@
+interface MultiSelectFieldTagProps {
+  label: string
+  onRemove: (e: any) => void;
+}
+
+export default MultiSelectFieldTagProps;