@monolith-forensics/monolith-ui 1.0.10 → 1.1.0

package/TagBox/TagBox.tsx

@@ -0,0 +1,694 @@
+import styled from "styled-components";
+import { useFloating, flip, offset } from "@floating-ui/react";
+import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { Input, Tooltip, FieldLabel, Pill } from "..";
+
+import {
+  ArrowButton,
+  ClearButton,
+  StyledFloatContainer,
+  StyledContent,
+  Variant,
+  Size,
+} from "../core";
+
+const StyledInputContainer = styled.div<{
+  variant?: Variant;
+  size?: Size;
+}>`
+  position: relative;
+  cursor: pointer;
+
+  user-select: none;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  user-select: none;
+
+  pointer-events: all;
+  outline: none;
+
+  border-radius: 5px;
+  transition: border 0.1s ease-in-out;
+  border: 1px solid
+    ${({ theme, variant }) => {
+      switch (variant) {
+        case "filled":
+          return "transparent";
+        case "outlined":
+          return theme.palette.input.border;
+        case "text":
+          return "transparent";
+        default:
+          return theme.palette.input.border;
+      }
+    }};
+  font-weight: 500;
+  color: ${(props) => props.theme.palette.text.primary};
+  font-size: ${({ size }) =>
+    size === "xs"
+      ? "12px"
+      : size === "sm"
+      ? "14px"
+      : size === "md"
+      ? "16px"
+      : size === "lg"
+      ? "18px"
+      : size === "xl"
+      ? "20px"
+      : "12px"};
+
+  width: 100%;
+  min-height: ${({ size }) =>
+    size === "xs"
+      ? "26px"
+      : size === "sm"
+      ? "30px"
+      : size === "md"
+      ? "36px"
+      : size === "lg"
+      ? "42px"
+      : size === "xl"
+      ? "50px"
+      : "26px"};
+
+  &[data-button-right="true"] {
+    padding-right: 36px;
+  }
+
+  background-color: ${({ theme, variant }) => {
+    switch (variant) {
+      case "filled":
+        return theme.palette.input.background;
+      case "outlined":
+        return theme.palette.input.background;
+      case "text":
+        return "transparent";
+      default:
+        return theme.palette.input.background;
+    }
+  }};
+
+  &[readOnly] {
+    cursor: pointer;
+  }
+
+  & [data-has-space="true"] {
+    padding-left: 4px;
+  }
+
+  & [data-selected="true"] {
+    background-color: ${(props) => props.theme.palette.primary.main}50;
+  }
+
+  &[data-empty="true"] {
+    color: ${(props) => props.theme.palette.input.placeholder};
+    div {
+      color: ${(props) => props.theme.palette.input.placeholder};
+    }
+  }
+
+  & [data-default-btn="true"] {
+    color: ${(props) => props.theme.palette.text.secondary};
+    div {
+      color: ${(props) => props.theme.palette.text.secondary};
+    }
+  }
+
+  &[data-open="true"] {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+
+  &:focus-within {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+
+  &:focus {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+`;
+
+interface StyledInputProps {
+  className?: string;
+  inputRef: React.RefObject<HTMLInputElement>;
+  [key: string]: React.InputHTMLAttributes<HTMLInputElement> | any;
+}
+
+// styled input with forwardRef
+const StyledInput = styled(
+  ({ className, inputRef, ...props }: StyledInputProps) => {
+    return (
+      <Input
+        ref={inputRef}
+        className={className + " mfTagBox-input"}
+        {...props}
+      />
+    );
+  }
+)`
+  &.mfTagBox-input {
+    pointer-events: all;
+    outline: none;
+    background: transparent;
+    flex: 1;
+    appearance: none;
+    border: 0;
+    color: inherit;
+
+    height: 100%;
+    width: 100%;
+
+    &:focus {
+      border: 0;
+    }
+  }
+`;
+
+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 PillContainer = styled.div<{
+  size?: Size;
+}>`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex-wrap: wrap;
+  flex-grow: 1;
+
+  padding: ${({ size }) =>
+    size === "xs"
+      ? "0px 8px"
+      : size === "sm"
+      ? "0px 10px"
+      : size === "md"
+      ? "0px 12px"
+      : size === "lg"
+      ? "0px 14px"
+      : size === "xl"
+      ? "0px 16px"
+      : "0px 8px"};
+
+  padding-top: 5px;
+
+  &[data-empty="true"] {
+    display: none;
+  }
+`;
+
+const StyledInnerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &[data-button-right="true"] {
+    padding-right: 30px;
+  }
+`;
+
+const ExtendedStyledContent = styled(StyledContent)`
+  overflow-y: auto;
+`;
+
+const StyledItem = styled.div<{
+  size?: Size;
+}>`
+  line-height: 1;
+  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: "Arial", sans-serif;
+  font-size: ${({ size }) =>
+    size === "xs"
+      ? "11px"
+      : size === "sm"
+      ? "13px"
+      : size === "md"
+      ? "15px"
+      : size === "lg"
+      ? "17px"
+      : size === "xl"
+      ? "19px"
+      : "11px"};
+
+  &[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"] {
+    display: none;
+    color: ${(props) => props.theme.palette.primary.main};
+  }
+`;
+
+type Option = {
+  label: string;
+  value: any;
+  group?: string;
+  data: any;
+};
+
+interface TagBoxProps {
+  className?: string;
+  data?: Option[];
+  placeholder?: string;
+  arrow?: boolean;
+  defaultValue?: Option[];
+  grouped?: boolean;
+  searchFn?: (value: string) => void;
+  onChange?: (value: any[]) => void;
+  onScroll?: () => void;
+  onSearch?: (value: string) => void;
+  onItemAdded?: (value: any) => void;
+  size?: Size;
+  variant?: Variant;
+  width?: string;
+  allowCustomValue?: boolean;
+  searchable?: boolean;
+  clearable?: boolean;
+  label?: string;
+  description?: string;
+  required?: boolean;
+  error?: string;
+  loading?: boolean;
+  renderOption?: (item: Option | string) => ReactNode;
+  TooltipContent?: (props: { data: any }) => JSX.Element;
+}
+
+const TagBox = styled(
+  ({
+    className,
+    data = [],
+    placeholder = "Select or enter tags",
+    arrow = true,
+    defaultValue = [],
+    grouped,
+    searchFn,
+    onChange,
+    onScroll,
+    onSearch,
+    onItemAdded,
+    size = "sm",
+    variant = "filled",
+    width = "100%",
+    allowCustomValue = true,
+    searchable = false,
+    clearable = false,
+    label,
+    description,
+    required = false,
+    error,
+    loading = false,
+    renderOption,
+    TooltipContent,
+  }: TagBoxProps) => {
+    const isObjectArray = data.length > 0 && data[0]?.label !== undefined;
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedItems, setSelectedItems] =
+      useState<(Option | string)[]>(defaultValue);
+
+    const [searchValue, setSearchValue] = useState("");
+    const inputRef = useRef<HTMLInputElement>(null);
+    const scrollContainerRef = useRef(null);
+
+    const filteredItems = data
+      .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: "bottom-start",
+      strategy: "absolute",
+      // Handle collisions with the viewport
+      middleware: [flip(), offset(5)],
+    });
+
+    const toggleOpen = () => {
+      setIsOpen((prev) => {
+        if (!prev) {
+          if (inputRef.current) {
+            const inputEl = inputRef?.current as HTMLInputElement;
+            inputEl?.focus?.();
+          }
+        }
+        return !prev;
+      });
+    };
+
+    const handleClear = (
+      e:
+        | React.MouseEvent<HTMLButtonElement>
+        | React.ChangeEvent<HTMLInputElement>
+        | React.ChangeEvent<HTMLTextAreaElement>
+    ) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (inputRef?.current) inputRef.current.value = "";
+      onChange?.([]);
+      setSelectedItems([]);
+      setSearchValue("");
+      searchFn?.("");
+      setIsOpen(false);
+    };
+
+    const handleChangeSelection = useCallback(
+      (option: Option | string) => {
+        setSelectedItems((prev) => {
+          onChange?.([...prev, option]);
+          return [...prev, option];
+        });
+      },
+      [onChange]
+    );
+
+    const handleItemClick = (item: Option | string) => {
+      if (inputRef?.current?.value) inputRef.current.value = "";
+      setSearchValue("");
+      handleChangeSelection(item);
+    };
+
+    const handleRemoveItem = (item: Option | string) => {
+      setSelectedItems((prev) => {
+        const newItems = prev.filter((prevItem) =>
+          isObjectArray
+            ? (prevItem as Option).value !== (item as Option).value
+            : prevItem !== item
+        );
+        onChange?.(newItems);
+        return newItems;
+      });
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      // Tab key
+      if (e.key === "Tab") {
+        setIsOpen(false);
+      }
+    };
+
+    // 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]);
+
+    // update when selection changes
+    useEffect(() => {
+      update();
+    }, [selectedItems]);
+
+    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;
+
+    return (
+      <div className={className + " mfTagBox"}>
+        {label && (
+          <FieldLabel
+            error={error}
+            asterisk={required}
+            size={size}
+            description={description}
+          >
+            {label}
+          </FieldLabel>
+        )}
+        <StyledInputContainer
+          ref={refs.setReference}
+          onClick={toggleOpen}
+          size={size}
+          variant={variant}
+          onKeyDown={handleKeyDown}
+          data-open={isOpen}
+        >
+          <StyledInnerContainer data-button-right={arrow || clearable}>
+            <PillContainer size={size} data-empty={selectedItems?.length === 0}>
+              {selectedItems.map((item: Option | string, index: number) => (
+                <Pill
+                  key={index}
+                  size="xs"
+                  onRemove={() => handleRemoveItem(item)}
+                >
+                  {renderOption?.(item) || (
+                    <>{(item as Option)?.label || item}</>
+                  )}
+                </Pill>
+              ))}
+            </PillContainer>
+            {(searchable || allowCustomValue || selectedItems.length === 0) && (
+              <StyledInput
+                inputRef={inputRef}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  if (searchFn !== undefined) {
+                    searchFn?.(e.target.value);
+                  } else {
+                    setSearchValue(e.target.value);
+                  }
+                  update();
+                }}
+                placeholder={placeholder}
+                size={size}
+                readOnly={!(searchable || allowCustomValue)}
+                data-button-right={arrow || clearable}
+              />
+            )}
+          </StyledInnerContainer>
+          {clearable &&
+          (selectedItems.length > 0 || !!inputRef?.current?.value) ? (
+            <ClearButton onClick={handleClear} />
+          ) : arrow ? (
+            <ArrowButton />
+          ) : null}
+        </StyledInputContainer>
+        {isOpen && (
+          <StyledFloatContainer
+            ref={refs.setFloating}
+            style={floatingStyles}
+            className="mfFloating"
+          >
+            <ExtendedStyledContent
+              className="mfFloatingContent"
+              style={{ width: contentWidth, maxWidth: contentWidth }}
+              variant={variant}
+              onScroll={onScroll}
+              data-scroll-active={scrollActive}
+              data-empty={
+                filteredItems.length === 0 ||
+                selectedItems.length === filteredItems.length
+              }
+            >
+              {!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(item)}
+                              data-selected={selectedItems.some(
+                                (selectedItem) =>
+                                  (selectedItem as Option).value ===
+                                    item?.value || selectedItem === item
+                              )}
+                              size={size}
+                            >
+                              {renderOption?.(item) || (
+                                <>{(item as Option)?.label || item}</>
+                              )}
+                            </StyledItem>
+                          </Tooltip>
+                        );
+                      })}
+                    </div>
+                  ))
+                : filteredItems.map((item, index) => {
+                    return (
+                      <Tooltip
+                        key={item.value || item}
+                        content={
+                          TooltipContent ? (
+                            <TooltipContent data={item.data} />
+                          ) : null
+                        }
+                        side="left"
+                      >
+                        <StyledItem
+                          key={index}
+                          className="mfFloatingItem"
+                          onClick={(e) => handleItemClick(item)}
+                          data-selected={selectedItems.some(
+                            (selectedItem) =>
+                              (selectedItem as Option).value === item?.value ||
+                              selectedItem === item
+                          )}
+                          size={size}
+                        >
+                          {renderOption?.(item) || (
+                            <>{(item as Option)?.label || item}</>
+                          )}
+                        </StyledItem>
+                      </Tooltip>
+                    );
+                  })}
+            </ExtendedStyledContent>
+          </StyledFloatContainer>
+        )}
+      </div>
+    );
+  }
+)`
+  position: relative;
+  cursor: pointer;
+`;
+
+export default TagBox;