@monolith-forensics/monolith-ui 1.0.12 → 1.1.0

package/src/components/SelectBox/SelectBox.js

@@ -1,543 +0,0 @@
-import styled from "styled-components";
-import { useFloating, flip, offset } from "@floating-ui/react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { X } from "lucide-react";
-import FieldLabel from "../FieldLabel/FieldLabel.js";
-import ArrowButton from "../ArrowButton";
-
-export const StyledInputContainer = styled.div`
-  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 StyledInput = styled.input`
-  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%;
-  height: ${({ size }) =>
-    size === "xs"
-      ? "26px"
-      : size === "sm"
-      ? "30px"
-      : size === "md"
-      ? "36px"
-      : size === "lg"
-      ? "42px"
-      : size === "xl"
-      ? "50px"
-      : "26px"};
-
-  padding: ${({ size }) =>
-    size === "xs"
-      ? "0px 8px"
-      : size === "sm"
-      ? "0px 10px"
-      : size === "md"
-      ? "0px 12px"
-      : size === "lg"
-      ? "0px 14px"
-      : size === "xl"
-      ? "0px 16px"
-      : "0px 8px"};
-
-  &[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;
-  }
-
-  ::placeholder {
-    font-size: ${({ size }) =>
-      size === "xs"
-        ? "10px"
-        : size === "sm"
-        ? "12px"
-        : size === "md"
-        ? "14px"
-        : size === "lg"
-        ? "16px"
-        : size === "xl"
-        ? "18px"
-        : "10px"};
-  }
-
-  &:focus {
-    border: 1px solid ${(props) => props.theme.palette.primary.main};
-  }
-`;
-
-export const StyledFloatContainer = styled.div`
-  z-index: 100000;
-`;
-
-export const StyledContent = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow-y: hidden;
-  overflow-x: hidden;
-
-  max-height: ${({ maxDropdownHeight }) =>
-    Number.isInteger(maxDropdownHeight)
-      ? `${maxDropdownHeight}px`
-      : maxDropdownHeight || "250px"};
-
-  background-color: ${(props) => props.theme.palette.background.default};
-  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;
-    }
-  }};
-
-  border-radius: 5px;
-  border: 1px solid ${(props) => props.theme.palette.divider};
-  padding: 5px;
-  // box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.85),
-  //   0px 10px 20px -15px rgba(22, 23, 24, 0.65);
-  animation-duration: 400ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  will-change: transform, opacity;
-
-  &[data-empty="true"] {
-    display: none;
-  }
-`;
-
-const StyledInnerItemContainer = styled.div`
-  overflow-y: auto;
-`;
-
-const ActionMenu = styled.div``;
-
-const StyledItem = styled.div`
-  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"
-      ? "12px"
-      : size === "sm"
-      ? "14px"
-      : size === "md"
-      ? "16px"
-      : size === "lg"
-      ? "18px"
-      : size === "xl"
-      ? "20px"
-      : "12px"};
-
-  &[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};
-  }
-`;
-
-const ClearIcon = styled(({ className, ...props }) => (
-  <div className={className} {...props}>
-    <X size={16} />
-  </div>
-))`
-  color: ${(props) => props.theme.palette.text.secondary};
-  transition: transform 0.2s ease-in-out;
-  transform: rotate(0deg);
-  will-change: transform;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const ClearButton = styled(({ className, ...props }) => (
-  <button
-    className={className}
-    {...props}
-    tabIndex={-1}
-    data-default-btn={true}
-  >
-    <ClearIcon />
-  </button>
-))`
-  position: absolute;
-  right: 0;
-  height: 100%;
-  padding-inline: 10px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  margin: 0;
-  outline: none;
-`;
-
-const SelectBox = styled(
-  ({
-    className,
-    data = [],
-    placeholder = "Select...",
-    arrow = true,
-    onChange,
-    onItemAdded,
-    size = "xs",
-    variant = "filled",
-    width = "100%",
-    allowCustomValue = false,
-    searchable = false,
-    clearable = false,
-    label = null,
-    description = null,
-    required = false,
-    error = false,
-    renderOption,
-    actionComponent,
-  }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selected, setSelected] = useState(null);
-    const [searchValue, setSearchValue] = useState("");
-    const [customItems, setCustomItems] = useState([]);
-    const inputRef = useRef(null);
-
-    const isObjectArray = Object.keys(data?.[0] || {})?.includes("label");
-
-    const filteredItems = data
-      .concat(customItems) // Add custom items to the list
-      .filter((item) =>
-        isObjectArray
-          ? item.label.toLowerCase().includes(searchValue.toLowerCase())
-          : item.toLowerCase().includes(searchValue.toLowerCase())
-      );
-
-    const { refs, floatingStyles } = 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) {
-          inputRef.current.focus();
-        }
-        return !prev;
-      });
-    };
-
-    const handleClear = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      inputRef.current.value = "";
-      handleChangeSelection(null);
-      setSelected(null);
-      setSearchValue("");
-      setIsOpen(false);
-    };
-
-    const handleItemClick = (event, item) => {
-      inputRef.current.value = item?.label || item;
-      handleChangeSelection(item);
-      setIsOpen(false);
-    };
-
-    const handleChangeSelection = useCallback(
-      (option) => {
-        setSelected(option);
-        onChange?.(option?.value || option, option);
-      },
-      [onChange, isObjectArray]
-    );
-
-    const handleAddItem = useCallback(
-      (newItem) => {
-        const isNewItem = data.every(
-          (item) => item.label.toLowerCase() !== newItem.toLowerCase()
-        );
-        if (isNewItem) {
-          const newValue = isObjectArray
-            ? { label: newItem, value: newItem }
-            : newItem;
-          setCustomItems((prev) => {
-            prev.push(newValue);
-            return prev;
-          });
-          handleChangeSelection(newValue);
-          onItemAdded?.(newValue);
-        } else {
-          const item = data.find((item) =>
-            isObjectArray
-              ? item.label.toLowerCase() === newItem.toLowerCase()
-              : item.toLowerCase() === newItem.toLowerCase()
-          );
-          handleChangeSelection(item);
-        }
-      },
-      [onItemAdded, isObjectArray]
-    );
-
-    const handleKeyDown = (e) => {
-      const currentInputValue = inputRef.current.value;
-
-      // Escape key
-      if (e.key === "Escape") {
-        refs?.reference?.current?.blur();
-        setSearchValue("");
-        setIsOpen(false);
-      }
-
-      // Enter key
-      if (e.key === "Enter") {
-        if (currentInputValue === "") {
-          return;
-        }
-        if (allowCustomValue) {
-          handleAddItem(currentInputValue);
-          setSearchValue("");
-        } else {
-          const item = data.find((item) =>
-            isObjectArray
-              ? item.label.toLowerCase() === currentInputValue.toLowerCase()
-              : item.toLowerCase() === currentInputValue.toLowerCase()
-          );
-          if (!item) {
-            inputRef.current.value = "";
-            handleChangeSelection(null);
-          }
-        }
-
-        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.value === prev?.value : item === prev
-          );
-          if (index < filteredItems.length - 1) {
-            newItem = filteredItems[index + 1];
-          }
-          inputRef.current.value = newItem.label;
-          onChange?.(newItem?.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.value === prev?.value : item === prev
-          );
-          if (index > 0) {
-            newItem = filteredItems[index - 1];
-          }
-          inputRef.current.value = newItem.label;
-          onChange?.(newItem?.value || newItem, newItem);
-          return newItem;
-        });
-      }
-
-      // Tab key
-      if (e.key === "Tab") {
-        if (currentInputValue === "") {
-          return;
-        }
-        if (allowCustomValue) {
-          handleAddItem(currentInputValue);
-          setSearchValue("");
-        }
-        setIsOpen(false);
-      }
-    };
-
-    const handleOnChange = (e) => {
-      // Simulate clear event when the input is changed to an empty string
-      if (e.target.value === "") {
-        handleClear(e);
-        return;
-      }
-
-      setSearchValue(e.target.value);
-    };
-
-    // Close on outside click
-    useEffect(() => {
-      const close = (e) => {
-        if (
-          refs.floating.current && // Check if the floating element exists
-          e.target !== refs.reference.current && // Check if the target is not the reference (input)
-          !refs.reference.current.contains(e.target) && // Check if the target is not inside the reference (input)
-          !refs.floating.current.contains(e.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]);
-
-    const contentWidth =
-      refs?.reference?.current?.getClientRects?.()?.[0]?.width || "100%";
-
-    return (
-      <div>
-        {label && (
-          <FieldLabel
-            error={error}
-            asterisk={required}
-            size={size}
-            description={description}
-          >
-            {label}
-          </FieldLabel>
-        )}
-        <StyledInputContainer
-          ref={refs.setReference}
-          onClick={toggleOpen}
-          size={size}
-          variant={variant}
-          width={width}
-          onKeyDown={handleKeyDown}
-        >
-          <StyledInput
-            ref={inputRef}
-            onChange={handleOnChange}
-            placeholder={placeholder}
-            size={size}
-            readOnly={!searchable}
-            data-button-right={arrow || clearable}
-          />
-          {clearable && selected ? (
-            <ClearButton onClick={handleClear} />
-          ) : arrow ? (
-            <ArrowButton />
-          ) : null}
-        </StyledInputContainer>
-        {isOpen && (
-          <StyledFloatContainer
-            ref={refs.setFloating}
-            style={floatingStyles}
-            className="mfFloating"
-          >
-            <StyledContent
-              className="mfFloatingContent"
-              style={{ width: contentWidth, maxWidth: contentWidth }}
-              variant={variant}
-              data-empty={filteredItems.length === 0}
-            >
-              {actionComponent && <ActionMenu>{actionComponent}</ActionMenu>}
-              <StyledInnerItemContainer>
-                {filteredItems.map((item, index) => (
-                  <StyledItem
-                    key={index}
-                    className="mfFloatingItem"
-                    onClick={(e) => handleItemClick(e, item)}
-                    data-selected={selected?.value === (item?.value || item)}
-                    size={size}
-                  >
-                    {renderOption ? renderOption(item) : item?.label || item}
-                  </StyledItem>
-                ))}
-              </StyledInnerItemContainer>
-            </StyledContent>
-          </StyledFloatContainer>
-        )}
-      </div>
-    );
-  }
-)`
-  position: relative;
-  cursor: pointer;
-`;
-
-export default SelectBox;