@monolith-forensics/monolith-ui 1.0.12 → 1.1.0

package/SelectBox/SelectBox.tsx

@@ -0,0 +1,745 @@
+import styled from "styled-components";
+import {
+  useFloating,
+  flip,
+  offset,
+  FloatingPortal,
+  Placement,
+} from "@floating-ui/react";
+import {
+  MouseEvent,
+  MutableRefObject,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { Input, FieldLabel, Tooltip } from "..";
+import { useDebouncedCallback } from "use-debounce";
+
+import {
+  StyledContent,
+  StyledFloatContainer,
+  ArrowButton,
+  ClearButton,
+  Size,
+  Variant,
+} from "../core";
+
+export const StyledInputContainer = styled.div<{
+  width?: string | number | null;
+}>`
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  border: none;
+  outline: none;
+  height: fit-content;
+
+  width: ${({ width }) => {
+    if (typeof width === "undefined") return "100%";
+    if (width === null) return "100%";
+    if (typeof width === "string") return width;
+    if (typeof width === "number") return `${width}px`;
+  }};
+`;
+
+const StyledInnerItemContainer = styled.div`
+  overflow-y: auto;
+
+  &[data-scroll-active="true"] {
+    padding-right: 5px;
+  }
+`;
+
+interface GroupTitleProps {
+  className?: string;
+  children?: ReactNode;
+  size?: Size;
+}
+
+const GroupTitle = styled(
+  ({ className, children, ...props }: GroupTitleProps) => {
+    return (
+      <div className={className} {...props}>
+        <div className="group-line"></div>
+        <div className="group-label">{children}</div>
+        <div className="group-line"></div>
+      </div>
+    );
+  }
+)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+
+  color: ${(props) => props.theme.palette.text.secondary};
+
+  padding: ${({ size }) =>
+    size === "xs"
+      ? "2px 8px"
+      : size === "sm"
+      ? "4px 10px"
+      : size === "md"
+      ? "4px 12px"
+      : size === "lg"
+      ? "5px 14px"
+      : size === "xl"
+      ? "6px 16px"
+      : "2px 8px"};
+
+  .group-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: fit-content;
+    min-width: fit-content;
+
+    font-weight: 500;
+
+    font-size: ${({ size }) =>
+      size === "xs"
+        ? "11px"
+        : size === "sm"
+        ? "13px"
+        : size === "md"
+        ? "15px"
+        : size === "lg"
+        ? "17px"
+        : size === "xl"
+        ? "19px"
+        : "11px"};
+  }
+
+  .group-line {
+    border-top: 1px solid ${(props) => props.theme.palette.divider};
+    width: 100%;
+  }
+`;
+
+const ActionMenu = styled.div``;
+
+const StyledItem = styled.div<{
+  size: Size;
+}>`
+  color: ${(props) => props.theme.palette.text.primary};
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  min-height: 25px;
+  padding: 7px 10px;
+  position: relative;
+  user-select: none;
+  outline: none;
+
+  cursor: pointer;
+
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+
+  font-size: ${({ size }) =>
+    size === "xs"
+      ? "11px"
+      : size === "sm"
+      ? "13px"
+      : size === "md"
+      ? "15px"
+      : size === "lg"
+      ? "17px"
+      : size === "xl"
+      ? "19px"
+      : "11px"};
+
+  padding: ${({ size }) =>
+    size === "xs"
+      ? "2px 8px"
+      : size === "sm"
+      ? "4px 10px"
+      : size === "md"
+      ? "4px 12px"
+      : size === "lg"
+      ? "5px 14px"
+      : size === "xl"
+      ? "6px 16px"
+      : "2px 8px"};
+
+  &[data-disabled] {
+    color: ${(props) => props.theme.palette.text.secondary};
+    pointer-events: "none";
+  }
+
+  &:hover {
+    background-color: ${(props) => props.theme.palette.action.hover};
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+
+  &[data-selected="true"] {
+    background-color: ${(props) => props.theme.palette.divider};
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+`;
+
+type Option = {
+  label: string;
+  value: any;
+  group?: string;
+  data: any;
+};
+
+interface SelectBoxProps {
+  className?: string;
+  defaultValue?: Option | string;
+  data?: Option[] | string[];
+  placeholder?: string;
+  arrow?: boolean;
+  onChange?: (value: any, item: any) => void;
+  onSearch?: (value: string) => void;
+  searchFn?: (value: string) => void;
+  onScroll?: (e: any) => void;
+  loading?: boolean;
+  onItemAdded?: (item: any) => void;
+  size?: Size;
+  variant?: Variant;
+  width?: string | number | null;
+  allowCustomValue?: boolean;
+  searchable?: boolean;
+  clearable?: boolean;
+  label?: string;
+  description?: string;
+  required?: boolean;
+  error?: string;
+  openOnFocus?: boolean;
+  renderOption?: (item: Option | string) => ReactNode;
+  actionComponent?: JSX.Element;
+  focused?: boolean;
+  grouped?: boolean;
+  TooltipContent?: React.FC<{ data: any }>;
+  DropDownProps?: any;
+}
+
+const SelectBox = styled(
+  ({
+    className,
+    data = [],
+    placeholder = "Select...",
+    arrow = true,
+    onChange,
+    onSearch,
+    searchFn,
+    onScroll,
+    loading,
+    defaultValue,
+    onItemAdded,
+    size = "sm",
+    variant = "outlined",
+    width = "100%",
+    allowCustomValue = false,
+    searchable = false,
+    clearable = false,
+    label,
+    description,
+    required = false,
+    error,
+    openOnFocus = true,
+    renderOption,
+    actionComponent,
+    focused,
+    grouped,
+    TooltipContent,
+    DropDownProps = {},
+  }: SelectBoxProps) => {
+    const isObjectArray = Object.keys(data?.[0] || {})?.includes("label");
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [selected, setSelected] = useState<Option | string | null>(null);
+    const [searchValue, setSearchValue] = useState("");
+    const [customItems, setCustomItems] = useState<(Option | string)[]>([]);
+    const [placement, setPlacement] = useState<Placement>("bottom-start");
+    const [dropDownHeight, setDropDownHeight] = useState<number | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const containerRef: MutableRefObject<HTMLElement | null> =
+      useRef<HTMLElement>(null);
+    const scrollContainerRef = useRef(null);
+
+    const filteredItems = data
+      .concat(customItems) // Add custom items to the list
+      .filter((item: Option | string) => {
+        const itemValue = (
+          isObjectArray ? (item as Option).label : item
+        ) as string;
+
+        return itemValue.toLowerCase().includes(searchValue.toLowerCase());
+      })
+      .sort((a, b) => {
+        if (grouped) {
+          const aValue = (a as Option).group as string;
+          const bValue = (b as Option).group as string;
+          return aValue.localeCompare(bValue);
+        }
+        // return current sort order
+        return 0;
+      });
+
+    const groupedItems = grouped
+      ? filteredItems.reduce((acc: any, item: any) => {
+          if (!item.group) {
+            item.group = "Other";
+          }
+          if (acc[item.group]) {
+            acc[item.group].push(item);
+          } else {
+            acc[item.group] = [item];
+          }
+          return acc;
+        }, {})
+      : {};
+
+    const groups = grouped
+      ? Object.keys(groupedItems)
+          .map((group) => ({
+            label: group,
+            items: groupedItems[group],
+          }))
+          .sort((a, b) => a.label.localeCompare(b.label))
+      : [];
+
+    const { refs, floatingStyles, update } = useFloating({
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      placement,
+      strategy: "absolute",
+      // Handle collisions with the viewport
+      middleware: [flip(), offset(5)],
+    });
+
+    const toggleOpen = () => {
+      setIsOpen((prev) => {
+        if (!prev) {
+          if (inputRef.current) {
+            inputRef.current.focus();
+          }
+        }
+        return !prev;
+      });
+    };
+
+    const handleClear = (
+      e:
+        | MouseEvent<HTMLButtonElement>
+        | React.ChangeEvent<HTMLInputElement>
+        | React.ChangeEvent<HTMLTextAreaElement>
+    ) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (inputRef.current) inputRef.current.value = "";
+      handleChangeSelection(null);
+      setSelected(null);
+      setSearchValue("");
+      searchFn?.("");
+      update();
+    };
+
+    const handleItemClick = (
+      event: MouseEvent<HTMLDivElement>,
+      item: string | Option
+    ) => {
+      event.preventDefault();
+      event.stopPropagation();
+      handleChangeSelection(item);
+      setIsOpen(false);
+    };
+
+    const handleChangeSelection = useCallback(
+      (option: Option | string | null) => {
+        setSelected(option);
+        onChange?.((option as Option)?.value || option, option);
+      },
+      [onChange]
+    );
+
+    const handleAddItem = useCallback(
+      (newItem: string) => {
+        const isNewItem = data.every(
+          (item) =>
+            (item as Option).label.toLowerCase() !==
+            (newItem as string).toLowerCase()
+        );
+        if (isNewItem) {
+          const newValue = isObjectArray
+            ? ({ label: newItem, value: newItem } as Option)
+            : (newItem as string);
+          setCustomItems((prev) => {
+            prev.push(newValue);
+            return prev;
+          });
+          handleChangeSelection(newValue);
+          onItemAdded?.(newValue);
+        } else {
+          const item = data.find((item) => {
+            return isObjectArray
+              ? (item as Option).label.toLowerCase() === newItem.toLowerCase()
+              : (item as string).toLowerCase() === newItem.toLowerCase();
+          }) as Option | string;
+          handleChangeSelection(item);
+        }
+      },
+      [onItemAdded, isObjectArray, data, handleChangeSelection]
+    );
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      const currentInputValue = inputRef?.current?.value;
+
+      // Escape key
+      if (e.key === "Escape") {
+        const reference = refs?.reference?.current as HTMLElement;
+        reference?.blur();
+        setSearchValue("");
+        update();
+        setIsOpen(false);
+      }
+
+      // Enter key
+      if (e.key === "Enter") {
+        if (currentInputValue && currentInputValue !== "" && allowCustomValue) {
+          handleAddItem(currentInputValue);
+          setSearchValue("");
+          update();
+        } else {
+          // TODO: decide what to do when user presses enter after typing a search value
+        }
+
+        toggleOpen();
+        // setIsOpen(false);
+      }
+
+      // Arrow down
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelected((prev) => {
+          let newItem = filteredItems[0]; // Loop back to the first item
+          const index = filteredItems.findIndex((item) =>
+            isObjectArray
+              ? (item as Option).value === (prev as Option)?.value
+              : item === prev
+          );
+          if (index < filteredItems.length - 1) {
+            newItem = filteredItems[index + 1];
+          }
+          onChange?.((newItem as Option)?.value || newItem, newItem);
+          return newItem;
+        });
+      }
+
+      // Arrow up
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelected((prev) => {
+          let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
+          const index = filteredItems.findIndex((item) =>
+            isObjectArray
+              ? (item as Option).value === (prev as Option)?.value
+              : item === prev
+          );
+          if (index > 0) {
+            newItem = filteredItems[index - 1];
+          }
+          onChange?.((newItem as Option)?.value || newItem, newItem);
+          return newItem;
+        });
+      }
+
+      // Tab key
+      if (e.key === "Tab") {
+        if (allowCustomValue && currentInputValue && currentInputValue !== "") {
+          handleAddItem(currentInputValue);
+          setSearchValue("");
+        } else if (!selected) {
+          // clear input
+          if (inputRef.current) {
+            inputRef.current.value = "";
+          }
+        }
+        setSearchValue("");
+        setIsOpen(false);
+      }
+    };
+
+    const handleOnChange = (
+      e:
+        | React.ChangeEvent<HTMLInputElement>
+        | React.ChangeEvent<HTMLTextAreaElement>
+    ) => {
+      // Simulate clear event when the input is changed to an empty string
+      if (e.target.value === "") {
+        handleClear(e);
+        return;
+      }
+
+      if (searchFn !== undefined) {
+        searchFn?.(e.target.value);
+      } else {
+        setSearchValue(e.target.value);
+        update();
+      }
+    };
+
+    const debouncedHandleOnChange = useDebouncedCallback(handleOnChange, 300);
+
+    const handleFocus = () => {
+      if (openOnFocus) {
+        setIsOpen(true);
+      }
+    };
+
+    // Close on outside click
+    useEffect(() => {
+      const close = (e: any) => {
+        const target = e.target as Node;
+        const referenceElement = refs?.reference?.current as Node;
+        const floatingElement = refs?.floating?.current as Node;
+
+        if (
+          floatingElement && // Check if the floating element exists
+          target !== referenceElement && // Check if the target is not the reference (input)
+          !referenceElement.contains(target) && // Check if the target is not inside the reference (input)
+          !floatingElement.contains(target) // Check if the target is not inside the floating element (content)
+        ) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("click", close);
+      return () => document.removeEventListener("click", close);
+    }, [refs.floating, refs.reference]);
+
+    // Handle default value
+    useEffect(() => {
+      if (defaultValue) {
+        setSelected(
+          (data.find((item) =>
+            isObjectArray
+              ? (item as Option).value === defaultValue
+              : (item as string) === defaultValue
+          ) as Option | string) || null
+        );
+      }
+    }, [data, defaultValue, isObjectArray]);
+
+    // handle input value change
+    useEffect(() => {
+      if (inputRef.current) {
+        if (!(selected as Option)?.label) {
+          inputRef.current.value = "";
+        } else {
+          inputRef.current.value = isObjectArray
+            ? ((selected as Option).label as string)
+            : (selected as string);
+        }
+      }
+    }, [selected]);
+
+    // handle scroll item into view
+    useEffect(() => {
+      const item = containerRef?.current?.querySelector?.(
+        ".mfFloatingItem[data-selected=true]"
+      );
+      if (item) {
+        item.scrollIntoView({ block: "nearest" });
+      }
+    }, [selected]);
+
+    // make calls to onSearch callback
+    useEffect(() => {
+      if (searchable) {
+        update();
+        onSearch?.(searchValue);
+      }
+    }, [searchValue]);
+
+    const referenceEl = refs?.reference?.current as HTMLElement;
+
+    const contentWidth = referenceEl?.getClientRects?.()?.[0]?.width || "100%";
+
+    const scrollEl = scrollContainerRef?.current as HTMLElement | null;
+
+    const scrollActive = scrollEl
+      ? scrollEl?.scrollHeight > scrollEl?.clientHeight
+      : false;
+
+    // get height between bottom of the floating container and the bottom of the viewport
+    const bottomHeight =
+      window.innerHeight - referenceEl?.getBoundingClientRect()?.bottom - 10;
+
+    // get height between top of the floating container and the top of the viewport
+    const topHeight = (referenceEl?.getBoundingClientRect()?.top -
+      10) as number;
+
+    useEffect(() => {
+      if (bottomHeight < 250) {
+        setPlacement("top-start");
+        setDropDownHeight(topHeight);
+      } else {
+        setPlacement("bottom-start");
+        setDropDownHeight(bottomHeight);
+      }
+
+      return () => {
+        setPlacement("bottom-start");
+        setDropDownHeight(bottomHeight);
+      };
+    }, [topHeight, bottomHeight, isOpen]);
+
+    return (
+      <div className={className}>
+        {label && (
+          <FieldLabel
+            error={error}
+            asterisk={required}
+            size={size}
+            description={description}
+          >
+            {label}
+          </FieldLabel>
+        )}
+        <StyledInputContainer
+          ref={refs.setReference}
+          onClick={() => setIsOpen(true)}
+          width={width}
+          onKeyDown={handleKeyDown}
+        >
+          <Input
+            ref={inputRef}
+            onChange={debouncedHandleOnChange}
+            onFocus={handleFocus}
+            autoFocus={focused}
+            placeholder={placeholder}
+            size={size}
+            readOnly={!searchable}
+            data-button-right={arrow || clearable}
+          />
+          {clearable && (selected || !!inputRef?.current?.value) ? (
+            <ClearButton onClick={handleClear} />
+          ) : arrow ? (
+            <ArrowButton
+              onClick={(e: MouseEvent<HTMLButtonElement>) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+              onMouseDown={(e: MouseEvent<HTMLButtonElement>) => {
+                e.preventDefault();
+                e.stopPropagation();
+                toggleOpen();
+              }}
+            />
+          ) : null}
+        </StyledInputContainer>
+        {isOpen && (
+          <FloatingPortal preserveTabOrder>
+            <StyledFloatContainer
+              ref={(ref) => {
+                containerRef.current = ref;
+                refs.setFloating(ref);
+              }}
+              style={floatingStyles}
+              className="mfFloating"
+            >
+              <StyledContent
+                className="mfFloatingContent"
+                style={{
+                  width: contentWidth,
+                  maxWidth: contentWidth,
+                  maxHeight: DropDownProps.autoHeight
+                    ? (dropDownHeight || 250) - 10
+                    : "",
+                }}
+                variant={variant}
+                data-empty={filteredItems.length === 0}
+                {...DropDownProps}
+              >
+                {actionComponent && <ActionMenu>{actionComponent}</ActionMenu>}
+                <StyledInnerItemContainer
+                  ref={scrollContainerRef}
+                  data-scroll-active={scrollActive}
+                  onScroll={onScroll}
+                >
+                  {loading && <div>Loading...</div>}
+                  {!loading && grouped
+                    ? groups.map((group, index) => (
+                        <div key={group.label}>
+                          <GroupTitle size={size}>{group.label}</GroupTitle>
+                          {group.items.map((item: Option, index: number) => {
+                            return (
+                              <Tooltip
+                                content={
+                                  TooltipContent ? (
+                                    <TooltipContent data={item.data} />
+                                  ) : null
+                                }
+                                side="left"
+                              >
+                                <StyledItem
+                                  key={index}
+                                  className="mfFloatingItem"
+                                  onClick={(e) => handleItemClick(e, item)}
+                                  data-selected={
+                                    (selected as Option)?.value ===
+                                    (item?.value || item)
+                                  }
+                                  size={size}
+                                >
+                                  {renderOption?.(item) || (
+                                    <>{item?.label || item}</>
+                                  )}
+                                </StyledItem>
+                              </Tooltip>
+                            );
+                          })}
+                        </div>
+                      ))
+                    : filteredItems.map((item, index) => {
+                        return (
+                          <Tooltip
+                            key={(item as Option).value || item}
+                            content={
+                              TooltipContent ? (
+                                <TooltipContent data={(item as Option).data} />
+                              ) : null
+                            }
+                            side="left"
+                          >
+                            <StyledItem
+                              key={index}
+                              className="mfFloatingItem"
+                              onClick={(e) => handleItemClick(e, item)}
+                              data-selected={
+                                (selected as Option)?.value ===
+                                ((item as Option)?.value || item)
+                              }
+                              size={size}
+                            >
+                              {renderOption?.(item) || (
+                                <>{(item as Option)?.label || item}</>
+                              )}
+                            </StyledItem>
+                          </Tooltip>
+                        );
+                      })}
+                </StyledInnerItemContainer>
+              </StyledContent>
+            </StyledFloatContainer>
+          </FloatingPortal>
+        )}
+      </div>
+    );
+  }
+)`
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+`;
+
+export default SelectBox;