@monolith-forensics/monolith-ui 1.1.0 → 1.1.2

package/TagBox/TagBox.tsx

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