impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/Select/menuList.js

@@ -1,119 +0,0 @@
-import React, { useRef, useEffect, useState } from "react";
-import { FixedSizeList as List } from "react-window";
-import { components } from "react-select";
-import { Loader } from "../Loader";
-import { Button } from "../Button";
-import { ReactComponent as ShowAllIcon } from "../../assets/showAll.svg";
-
-
-// MenuList using react-window for virtualization
-export const MenuList = (props) => {
-  const { options, children, maxHeight, isLoading } = props;
-  const height = 37; // Height of each option
-  const [dynamicHeight, setDynamicHeight] = useState(
-    Math.min(options.length * height, maxHeight)
-  );
-
-  const listRef = useRef();
-
-  useEffect(() => {
-    let calcHeight = options.length * height;
-    if (props?.selectProps?.isLoadingMore) {
-      calcHeight += 92;
-    }
-    const dynamicHeight = Math.min(calcHeight, maxHeight);
-    setDynamicHeight(dynamicHeight);
-  }, [options, props?.selectProps?.isLoadingMore]);
-
-  const handleScroll = ({ scrollOffset, scrollUpdateWasRequested }) => {
-    if (!listRef.current || scrollUpdateWasRequested) return;
-    const totalHeight = options.length * height;
-    if (scrollOffset + dynamicHeight >= totalHeight - 2) {
-      if (
-        props.selectProps &&
-        typeof props.selectProps.onMenuScrollToBottom === "function"
-      ) {
-        props.selectProps.onMenuScrollToBottom();
-      }
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <components.MenuList className="menulistScroll" {...props}>
-        <div className="ia-select-loading-container">
-          <Loader size="small" />
-        </div>
-      </components.MenuList>
-    );
-  }
-
-  if (options?.length === 0) {
-    return (
-      <components.MenuList className="menulistScroll" {...props}>
-        <div className="ia-select-no-options-message">
-          {props?.selectProps?.noOptionMessage}
-        </div>
-      </components.MenuList>
-    );
-  }
-
-  return (
-    <>
-      <components.MenuList className="menulistScroll" {...props}>
-        <List
-          ref={listRef}
-          height={dynamicHeight}
-          itemCount={
-            props?.selectProps?.isLoadingMore
-              ? options.length + 1
-              : options.length
-          }
-          itemSize={height}
-          width="100%"
-          onScroll={handleScroll}
-        >
-          {({ index, style }) => {
-            if (props?.selectProps?.isLoadingMore && index === options.length) {
-              return (
-                <div
-                  className="ia-select-loading-container ia-select-loading-more-container"
-                  style={style}
-                >
-                  <Loader size="small" />
-                </div>
-              );
-            }
-            return <div style={style}>{children[index]}</div>;
-          }}
-        </List>
-      </components.MenuList>
-
-      {props?.selectProps?.maxSelectableOptions && options?.length > 0 && (
-        <span className="ia-select-max-selectable-options">{`Maximum ${props?.selectProps?.maxSelectableOptions} selections`}</span>
-      )}
-
-      {props?.selectProps?.showFooterMessage?.description && options?.length > 0 && (
-        <div className="ia-select-footer-message">
-          <span className="ia-select-max-selectable-options">
-            {props?.selectProps?.showFooterMessage?.description}
-          </span>
-          {props?.selectProps?.showFooterMessage?.actionButtonText &&
-            <Button
-              icon={<ShowAllIcon />}
-              iconPlacement="right"
-              size="small"
-              type="default"
-              variant="url"
-              onClick={(e) => {
-                e.stopPropagation();
-                props?.selectProps?.showFooterMessage?.action?.();
-              }}
-            >
-              {props?.selectProps?.showFooterMessage?.actionButtonText}
-            </Button>}
-        </div>
-      )}
-    </>
-  );
-};

package/src/components/Select/optionList.js

@@ -1,215 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { components } from "react-select";
-import { Tooltip } from "../Tooltip";
-import MUICheckbox from "@mui/material/Checkbox";
-import { Checkbox } from "../Checkbox";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-
-// Add helper function to get selected children count
-const getSelectedChildrenCount = (parent, selectedOptions) => {
-  if (!parent.children || !selectedOptions || !Array.isArray(selectedOptions))
-    return 0;
-  const selectedParent = selectedOptions.find(
-    (sel) => sel.value === parent.value
-  );
-  return selectedParent ? selectedParent.children.length : 0;
-};
-
-// Helper to check if all children are selected
-const areAllChildrenSelected = (option, selectedOptions) => {
-  if (!option.children || !selectedOptions || !Array.isArray(selectedOptions))
-    return false;
-  const selectedParent = selectedOptions.find(
-    (sel) => sel.value === option.value
-  );
-  return (
-    selectedParent && selectedParent.children.length === option.children.length
-  );
-};
-
-// Renders a label and only wraps it with Tooltip if it overflows its container
-const OverflowTooltipLabel = ({ text, popperProps }) => {
-  const labelRef = useRef(null);
-  const [isOverflowed, setIsOverflowed] = useState(false);
-
-  const checkOverflow = () => {
-    const el = labelRef.current;
-    if (!el) return;
-    setIsOverflowed(el.scrollWidth > el.clientWidth);
-  };
-
-  useEffect(() => {
-    checkOverflow();
-  }, [text]);
-
-  useEffect(() => {
-    window.addEventListener("resize", checkOverflow);
-    return () => window.removeEventListener("resize", checkOverflow);
-  }, []);
-
-  const content = <span ref={labelRef}>{text}</span>;
-
-  return isOverflowed ? (
-    <Tooltip
-      title={text}
-      orientation="right"
-      variant="tertiary"
-      className="select-tooltip"
-      PopperProps={popperProps}
-    >
-      {content}
-    </Tooltip>
-  ) : (
-    content
-  );
-};
-
-export const Option = ({
-  isLoadingOption,
-  isDisabled,
-  customOptionProps,
-  ...props
-}) => {
-  const {
-    data,
-    isSelected,
-    isMulti,
-    isWithIcon,
-    selectedOptions,
-    initialOptions,
-  } = props;
-
-  const resolveComponent = (type) => {
-    if (isMulti) {
-      const hasChildren = data.children && data.children.length > 0;
-      const selectedCount = hasChildren
-        ? getSelectedChildrenCount(data, selectedOptions)
-        : 0;
-      const allChildrenSelected = hasChildren
-        ? areAllChildrenSelected(data, selectedOptions)
-        : false;
-
-      const popperProps = {
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [0, 18],
-            },
-          },
-        ],
-      };
-
-      return (
-        <Checkbox
-          withoutFormLabel={true}
-          label={
-            <div className="select-label-with-icon">
-              {data.children ? (
-                <>
-                  <OverflowTooltipLabel
-                    text={data.label}
-                    popperProps={popperProps}
-                  />
-                  {hasChildren && selectedCount > 0 && (
-                    <span className="selected-children-count">
-                      ({selectedCount})
-                    </span>
-                  )}
-                </>
-              ) : (
-                <OverflowTooltipLabel
-                  text={data.label}
-                  popperProps={popperProps}
-                />
-              )}
-            </div>
-          }
-          checked={isSelected}
-          variant={
-            hasChildren && selectedCount > 0 && !allChildrenSelected
-              ? "dashed"
-              : "default"
-          }
-          onChange={() => null}
-          disabled={isLoadingOption || isDisabled}
-        />
-      );
-    } else {
-      // Handle non-multi case
-      const isParentSelected =
-        data.children &&
-        data.children.some(
-          (child) => selectedOptions && selectedOptions.value === child.value
-        );
-      const isOptionSelected = isSelected || isParentSelected;
-
-      const popperProps = {
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [0, 15],
-            },
-          },
-        ],
-      };
-
-      return (
-        <div
-          className={`select-label-with-icon ${
-            isOptionSelected ? "selected" : ""
-          } ${isDisabled ? "disabled" : ""}`}
-        >
-          {data.children ? (
-            <>
-              <OverflowTooltipLabel
-                text={data?.label}
-                popperProps={popperProps}
-              />
-            </>
-          ) : (
-            <OverflowTooltipLabel text={data.label} popperProps={popperProps} />
-          )}
-        </div>
-      );
-    }
-  };
-
-  const renderOption = (type) => (
-    <components.Option {...props}>
-      <div
-        className={`select-option-content ${
-          props.isSelected ||
-          (data.children &&
-            data.children.some(
-              (child) =>
-                selectedOptions && selectedOptions.value === child.value
-            ))
-            ? "selected"
-            : ""
-        }`}
-        {...customOptionProps}
-      >
-        {resolveComponent(type)}
-        {props.data.children && props.data.children.length > 0 && (
-          <ChevronRightIcon className="select-submenu-chevron" />
-        )}
-      </div>
-    </components.Option>
-  );
-
-  if (props.selectProps.isMulti && props.selectProps.isWithIcon) {
-    return renderOption("isMulti-with-icon");
-  }
-
-  if (props.selectProps.isMulti && !props.selectProps.isWithIcon) {
-    return renderOption("isMulti");
-  }
-
-  if (!props.selectProps.isMulti && props.selectProps.isWithIcon) {
-    return renderOption("with-icon");
-  }
-
-  return renderOption(props.isMulti ? "isMulti" : "default");
-};

package/src/components/Select/selected-option-tags.js

@@ -1,99 +0,0 @@
-import React, { forwardRef, useRef, useState } from "react";
-import { Tag } from "../Tag";
-import { Tooltip } from "../Tooltip";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-
-export const SelectedOptionsTags = ({ selectedOptions, onChange }) => {
-  const optionListTagRef = useRef(null);
-  const [isSelectedOptionsTagListOpen, setSelectedOptionsTagListOpen] =
-    useState(false);
-
-  const handleOptionTagRemove = (option) => {
-    const updatedOptions = selectedOptions.filter(
-      (op) => op.value !== option.value,
-    );
-    onChange(updatedOptions);
-  };
-  return (
-    <div className="select-options-tag-group">
-      {selectedOptions.length > 0 ? (
-        <>
-          {/* to only display first 3 selected options under select */}
-          {selectedOptions.slice(0, 3).map((option, index) => {
-            return (
-              <SelectedOptionTag
-                orientation="bottom"
-                key={index}
-                label={option.label}
-                onClose={() => handleOptionTagRemove(option)}
-                className="selected-option-tag"
-              />
-            );
-          })}
-          {/* rest of the options are hidden and displayed in the popup list */}
-          {selectedOptions.length > 3 && (
-            <>
-              <div className="tag-group-open" ref={optionListTagRef}>
-                <Tag
-                  size="small"
-                  onClick={(e) => {
-                    setSelectedOptionsTagListOpen((prevState) => !prevState);
-                  }}
-                  label={<span className="tag-group-more" />}
-                />
-              </div>
-              {isSelectedOptionsTagListOpen && (
-                <SelectedOptionsTagList
-                  selectedOptions={selectedOptions}
-                  ref={optionListTagRef}
-                  handleOptionTagRemove={handleOptionTagRemove}
-                  className="selected-option-tag"
-                />
-              )}
-            </>
-          )}
-        </>
-      ) : null}
-    </div>
-  );
-};
-
-export const SelectedOptionsTagList = forwardRef(
-  ({ selectedOptions, handleOptionTagRemove }, ref) => {
-    return (
-      <div
-        className="select-options-tag-list"
-        style={{
-          top: ref.current?.offsetTop + 25,
-          left: ref.current?.offsetLeft,
-        }}
-      >
-        {/* to display rest of the options in list */}
-        {selectedOptions.slice(3, selectedOptions.length).map((option) => {
-          return (
-            <SelectedOptionTag
-              orientation="right"
-              label={option.label}
-              onClose={() => handleOptionTagRemove(option)}
-            />
-          );
-        })}
-      </div>
-    );
-  },
-);
-
-const SelectedOptionTag = ({ orientation, onClose, label }) => {
-  return (
-    <Tooltip
-      title={label}
-      orientation={orientation}
-      trigger="hover"
-      variant="primary"
-    >
-      <span>
-        <Tag size="small" isRemovable onDelete={onClose} label={label} />
-      </span>
-    </Tooltip>
-  );
-};

package/src/components/Select/utils.js

@@ -1,232 +0,0 @@
-export const handleSearch = ({
-  isMulti,
-  event,
-  externalOnSearch,
-  initialOptions,
-  setCurrentOptions,
-  setOpenToast,
-  setToastMessage,
-  setSearchTerm,
-}) => {
-  setSearchTerm(event.target.value);
-  if (externalOnSearch) {
-    externalOnSearch(event);
-  } else {
-    const isNonAlphaNumeric = (str) => /[^\w,]/.test(str);
-    const options = [...initialOptions];
-    // const searchTerm = isMulti
-    //   ? event.target.value
-    //       .trim()
-    //       .toUpperCase()
-    //       .replace(/\s/g, "")
-    //       .split(",")
-    //       .filter((item) => item != "")
-    //   : event.target.value.trim().toUpperCase().replace(/\s/g, "");
-
-    const searchTerm = event.target.value
-      .trim()
-      .split(",")
-      .filter((item) => item !== "");
-
-    if (searchTerm && searchTerm.length > 0) {
-      const searchResults = options.filter((option) => {
-        return searchTerm.some((term) => {
-          return option.label
-            .toString()
-            .toLowerCase()
-            .includes(term.toLowerCase().trim());
-        });
-      });
-      setCurrentOptions([...searchResults]);
-    } else {
-      setCurrentOptions(initialOptions);
-    }
-  }
-};
-
-/**
- * handle when select all option is passed through props
- */
-
-export const handleSelectAll = ({
-  event,
-  externalOnSelectAll,
-  setIsSelectAll,
-  currentOptions,
-  selectedOptions,
-  setSelectedOptions,
-  handleSelect,
-}) => {
-  if (externalOnSelectAll) {
-    externalOnSelectAll(event);
-  } else {
-    if (event && event.target.checked) {
-      setIsSelectAll(true);
-
-      //currentOptions without selectedOptions
-      const restCurrentOptions = currentOptions.filter(
-        (option) =>
-          !selectedOptions.find(
-            (selectedOption) =>
-              selectedOption.label === option.label &&
-              option.value === selectedOption.value
-          )
-      );
-      //console.log(selectedOptions, restCurrentOptions);
-      setSelectedOptions([...selectedOptions, ...restCurrentOptions]);
-      handleSelect([...selectedOptions, ...restCurrentOptions]);
-    } else {
-      setIsSelectAll(false);
-      setSelectedOptions([]);
-      handleSelect([]);
-    }
-  }
-};
-
-/**
- * select all options if we passed isWithSelectAll props
- */
-
-export const handleSelectAllWhenCompLoads = ({
-  currentOptions,
-  selectedOptions,
-  setSelectedOptions,
-}) => {
-  const restCurrentOptions = currentOptions.filter(
-    (option) =>
-      !selectedOptions.find(
-        (selectedOption) =>
-          selectedOption.label === option.label &&
-          option.value === selectedOption.value
-      )
-  );
-  setSelectedOptions([...selectedOptions, ...restCurrentOptions]);
-};
-
-/**
- * handle when handle clear all
- */
-
-export const handleClearAll = ({
-  externalOnClearAll,
-  setSelectedOptions,
-  setIsSelectAll,
-  handleSelect,
-  syncParentChildSelection,
-}) => {
-  if (externalOnClearAll) {
-    externalOnClearAll();
-  } else {
-    setSelectedOptions([]);
-    setIsSelectAll(false);
-    handleSelect([]);
-    syncParentChildSelection([]);
-  }
-};
-
-/**
- * handle when handle select dropdown close
- */
-
-export const handleDropdownClose = ({
-  externalOnDropdownClose,
-  setCurrentOptions,
-  initialOptions,
-  currentOptions,
-  setIsOpen,
-  onBlur,
-  event,
-}) => {
-  setIsOpen(false);
-  if (onBlur) {
-    onBlur(event);
-  }
-  if (externalOnDropdownClose) {
-    externalOnDropdownClose();
-  } else {
-    setCurrentOptions(
-      initialOptions.length > 0 ? initialOptions : currentOptions
-    );
-  }
-};
-
-/**
- * handle when handle select dropdown open
- */
-
-export const handleDropdownOpen = ({
-  externalOnDropdownOpen,
-  isOpen,
-  setIsOpen,
-}) => {
-  if (externalOnDropdownOpen) {
-    externalOnDropdownOpen();
-    setIsOpen(!isOpen);
-  } else {
-    setIsOpen(!isOpen);
-  }
-};
-
-export const getPlaceholder = (
-  isMulti,
-  selectedOptions,
-  placeholder,
-  customPlaceholderAfterSelect = null,
-  selectionLabels = {}
-) => {
-  if (!isMulti && Object.entries(selectedOptions || {}).length > 0) {
-    return typeof selectedOptions.value !== "undefined"
-      ? selectedOptions.label
-      : placeholder;
-  } else if (isMulti && selectedOptions.length > 0) {
-    return selectedOptions.length === 1
-      ? selectedOptions[0].label
-      : `${selectionLabels.selected || "Selected"} (${
-          customPlaceholderAfterSelect
-            ? customPlaceholderAfterSelect
-            : selectedOptions.length
-        })`;
-  }
-  return placeholder;
-};
-
-export const onKeyDown = ({ e, focusedIndex, currentOptions }) => {
-  const searchResults = Array.from(
-    document.getElementsByClassName("menulistScroll")
-  );
-
-  if (e.keyCode === 40 && focusedIndex.current + 1 < currentOptions.length) {
-    focusedIndex.current = focusedIndex.current + 1;
-  }
-  if (e.keyCode === 38 && focusedIndex.current - 1 >= 0) {
-    focusedIndex.current = focusedIndex.current - 1;
-  }
-
-  searchResults.forEach((element, index) => {
-    const classList = element.classList.value;
-    if (index === focusedIndex.current) {
-      element.className = "multi-select__option--is-focused " + classList;
-    } else {
-      element.classList.remove("multi-select__option--is-focused");
-    }
-  });
-
-  if (e.keyCode === 13 && searchResults.length > 0) {
-    //When a enter key is pressed, currently focused element would be selected
-    if (focusedIndex.current > 0) {
-      searchResults[focusedIndex.current].click();
-    } else if (focusedIndex.current === 0) {
-      searchResults[0].click();
-    }
-  }
-};
-export const flattenOptions = (options) => {
-  if (!options || !Array.isArray(options)) return [];
-
-  return options?.reduce((flatOptions, option) => {
-    if (option.options) {
-      return [...flatOptions, ...option.options];
-    }
-    return [...flatOptions, option];
-  }, []);
-};