@monolith-forensics/monolith-ui 1.1.0 → 1.1.2

package/SelectBox/SelectBox.tsx

@@ -1,745 +0,0 @@
-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;