impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/FiltersStrip/FiltersStrip.styles.scss

@@ -1,343 +0,0 @@
-@import "../../styles/index.scss";
-
-.impact-info-panel-container {
-  position: relative;
-  font-family: $fontFamily;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  height: 48px;
-  width: 100%;
-  padding: 8px 24px;
-  background-color: $whiteColor;
-
-  .impact-info-panel-left-container {
-    flex: 1 1 auto;
-    min-width: 0;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: 12px;
-
-    .impact-filter-dropdown-container {
-      flex-shrink: 0;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      gap: 8px;
-
-      .MuiChip-root.impact_badges_only_label_stroke {
-        max-width: 145px;
-      }
-      //   border: 1px solid blue;
-
-      .impact-filter-dropdown-label {
-        font-family: $fontFamily;
-        font-size: $normalFontSize;
-        font-weight: $normalFontWeight;
-        line-height: 21px;
-        color: $textButtonFontColor;
-      }
-
-      .impact-filter-dropdown-button {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 32px;
-        width: 32px;
-        padding: 8px;
-        border-radius: 8px;
-        background-color: $textButtonPrimaryBg;
-        transition: transform 0.2s ease;
-
-        &:hover {
-          cursor: pointer;
-        }
-
-        & svg {
-          width: 20px;
-          height: 20px;
-          color: $mainFontColor;
-        }
-      }
-      .impact-filter-dropdown-wrapper {
-        position: absolute;
-        top: 54px;
-        left: 0px;
-        min-width: 265px;
-        border-radius: 8px;
-        padding: 8px 6px;
-        background-color: $whiteColor;
-        z-index: 1200;
-        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.12);
-
-        .impact-filter-dropdown-recent-container {
-          display: flex;
-          flex-direction: column;
-          .impact-filter-dropdown-label {
-            font-family: $fontFamily;
-            font-size: $smallFontSize;
-            font-weight: $normalFontWeight;
-            line-height: 21px;
-            color: $textButtonFontColor;
-            padding: 6px 18px;
-          }
-
-          .impact-filter-dropdown-recent-filters-wrapper {
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 6px;
-            .impact-filter-dropdown-recent-filters {
-              display: flex;
-              flex-direction: row;
-              padding: 8px 18px;
-              border-radius: 8px;
-
-              &:hover {
-                cursor: pointer;
-                background-color: #edf0ff;
-              }
-
-              span {
-                font-family: $fontFamily;
-                font-size: $normalFontSize;
-                font-weight: $normalFontWeight;
-                line-height: 20px;
-                color: $mainFontColor;
-              }
-            }
-          }
-        }
-
-        .impact-filter-dropdown-saved-container {
-          display: flex;
-          flex-direction: column;
-          .impact-filter-dropdown-label {
-            font-family: $fontFamily;
-            font-size: $smallFontSize;
-            font-weight: $normalFontWeight;
-            line-height: 21px;
-            color: $textButtonFontColor;
-            padding: 6px 18px;
-          }
-
-          .impact-filter-dropdown-saved-filters-badge-wrapper {
-            display: flex;
-            flex-direction: row;
-            gap: 6px;
-            padding: 8px 18px;
-            .MuiChip-root.impact_badges_only_label_stroke {
-              cursor: pointer;
-            }
-          }
-
-          .impact-filter-dropdown-saved-filters-no-data-text {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-family: $fontFamily;
-            font-size: $normalFontSize;
-            font-weight: 400;
-            line-height: 20px;
-            color: $inputInfoColor;
-            margin: 24px 0;
-          }
-
-          .impact-filter-dropdown-saved-filters-search-wrapper {
-            padding: 8px 18px;
-
-            .impact-input-wrapper {
-              min-width: 100% !important;
-              border: none !important;
-              padding-left: 0;
-            }
-          }
-
-          .impact-filter-dropdown-saved-filters-lists-wrapper {
-            display: flex;
-            flex-direction: column;
-            max-height: 160px;
-            overflow: auto;
-
-            .impact-filter-dropdown-saved-filters-list {
-              font-family: $fontFamily;
-              font-size: $normalFontSize;
-              font-weight: $normalFontWeight;
-              line-height: 20px;
-              color: $mainFontColor;
-              padding: 8px 18px;
-              border-radius: 8px;
-              margin-bottom: 4px;
-
-              &:hover {
-                cursor: pointer;
-                background-color: $textButtonPrimaryBg;
-              }
-            }
-          }
-
-          .filter-dropdown-selected-list {
-            background-color: #edf0ff;
-          }
-        }
-
-        .impact-filter-dropdown-action-wrapper {
-          display: flex;
-          flex-direction: column;
-          gap: 8px;
-
-          .impact-filter-dropdown-action-btns {
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-end;
-            gap: 8px;
-            padding: 0px 18px;
-          }
-        }
-      }
-    }
-
-    .impact-selected-filter-container {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      gap: 16px;
-      width: 100%;
-      min-width: 0;
-
-      .impact-selected-filter-tags {
-        flex: 1 1 0;
-        min-width: 0;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 12px;
-        max-width: 100%;
-        overflow: hidden;
-        // border: 1px solid salmon;
-
-        .impact-selected-filter-wrapper {
-          position: relative;
-          flex-shrink: 0;
-          display: flex;
-          flex-direction: row;
-          gap: 0px;
-          align-items: center;
-          transition: transform 0.5s ease-in-out;
-          .impact-selected-filter-label {
-            font-family: $fontFamily;
-            font-size: $smallFontSize;
-            font-weight: $normalFontWeight;
-            line-height: 21px;
-            color: $textButtonFontColor;
-            padding-right: 4px;
-          }
-
-          .impact-selected-filter-tags-container {
-            display: flex;
-            flex-direction: row;
-            gap: 4px;
-            align-items: center;
-          }
-
-          .impact-filter-strip-separator {
-            margin-right: 8px;
-          }
-        }
-      }
-
-      .impact-selected-filter-action-btns {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 4px;
-
-        .impact-selected-filter-action-btn {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 8px 4px;
-          cursor: pointer;
-          background-color: #f5f6fa;
-
-          svg {
-            font-size: 18px;
-            color: #60697d;
-          }
-        }
-
-        .prev {
-          border-top-left-radius: 4px;
-          border-bottom-left-radius: 4px;
-        }
-
-        .next {
-          border-top-right-radius: 4px;
-          border-bottom-right-radius: 4px;
-        }
-      }
-    }
-  }
-
-  .impact-info-panel-right-container {
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: row;
-    gap: 12px;
-    align-items: center;
-  }
-
-  .impact-filter-strip-separator {
-    display: inline-block;
-    height: 16px;
-    width: 1px;
-    background-color: $disabledSecondaryBorder;
-  }
-}
-
-// for portal
-.impact-selected-filter-tags-dropdown {
-  position: absolute;
-  top: 45px;
-  right: 0px;
-  padding: 8px 6px;
-  border-radius: 8px;
-  background-color: #fff;
-  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.12);
-  max-width: 200px;
-  width: 100%;
-  z-index: 1200;
-
-  .impact-selected-filter-tag-container {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    margin-bottom: 8px;
-  }
-
-  .impact-selected-filter-tag-label {
-    font-family: $fontFamily;
-    font-size: $normalFontSize;
-    font-weight: $normalFontWeight;
-    line-height: 20px;
-    color: $mainFontColor;
-    padding: 8px 18px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .impact-selected-filter-tags-actions-container {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    .ia-styles.ia-btn {
-      width: 100%;
-    }
-  }
-}

package/src/components/FiltersStrip/Slider/FilterSlider.styles.scss

@@ -1,85 +0,0 @@
-@import "../../../styles/index.scss";
-.impact-selected-filter-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-
-  .impact-selected-filter-tags {
-    flex: 1 1 0;
-    min-width: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-    max-width: 100%;
-    overflow: scroll;
-    scrollbar-width: none;
-
-    .impact-selected-filter-wrapper {
-      position: relative;
-      flex-shrink: 0;
-      display: flex;
-      flex-direction: row;
-      gap: 6px;
-      align-items: center;
-      transition: transform 0.5s ease-in-out;
-      .impact-selected-filter-label {
-        font-family: $fontFamily;
-        font-size: $smallFontSize;
-        font-weight: $normalFontWeight;
-        line-height: 21px;
-        color: $textButtonFontColor;
-      }
-
-      .impact-selected-filter-tags-container {
-        display: flex;
-        flex-direction: row;
-        gap: 4px;
-        align-items: center;
-      }
-    }
-  }
-
-  .collapsed {
-    overflow: hidden;
-  }
-
-  .impact-selected-filter-action-btns {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 4px;
-
-    .impact-selected-filter-action-btn {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 8px 4px;
-      cursor: pointer;
-      background-color: #f5f6fa;
-
-      svg {
-        font-size: 18px;
-        color: #60697d;
-      }
-    }
-
-    .prev {
-      border-top-left-radius: 4px;
-      border-bottom-left-radius: 4px;
-    }
-
-    .next {
-      border-top-right-radius: 4px;
-      border-bottom-right-radius: 4px;
-    }
-
-    .expand {
-      font-size: 14px;
-      color: $textButtonFontColor;
-      border-radius: 8px;
-    }
-  }
-}

package/src/components/FiltersStrip/Slider/Portal.js

@@ -1,59 +0,0 @@
-import { Button } from "../../Button";
-import React from "react";
-import Portal from "../../Portal";
-
-const PortalDropDown = (props) => {
-  const {
-    filtersContainer,
-    index,
-    tags,
-    showButton,
-    tag,
-    viewAllAction,
-    position,
-  } = props;
-
-  if (!filtersContainer) return null;
-  return (
-    <Portal container={document.body}>
-      <div
-        className="impact-selected-filter-tags-dropdown"
-        style={{
-          top: position.y + 18,
-          // this 200 is max width of the dropdown
-          left:
-            position.width > 200
-              ? position.x - 200
-              : position.x - position.width,
-          width: position.width + "px",
-        }}
-      >
-        <div className="impact-selected-filter-tag-container">
-          {tags.map((tag, index) => {
-            return (
-              <div key={index} className="impact-selected-filter-tag-label">
-                {tag.label}
-              </div>
-            );
-          })}
-        </div>
-        {showButton && (
-          <div className="impact-selected-filter-tags-actions-container">
-            <div className="impact-notification-horizontal-separator" />
-            <Button
-              className=""
-              iconPlacement="left"
-              onClick={() => viewAllAction(tag)}
-              size="large"
-              variant="text"
-            >
-              {`View all (${tag.values.length})`}
-            </Button>
-          </div>
-        )}
-      </div>
-    </Portal>
-  );
-};
-
-export default PortalDropDown;

package/src/components/FiltersStrip/Slider/index.js

@@ -1,233 +0,0 @@
-import React, {
-  Fragment,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
-import "./FilterSlider.styles.scss";
-import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
-import ChevronRightOutlinedIcon from "@mui/icons-material/ChevronRightOutlined";
-import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
-import PortalDropDown from "./Portal";
-
-export default function FilterSlider({
-  list,
-  width,
-  isExpanded = true,
-  handleExpandClick,
-  tagsChildren,
-  containerChildren,
-  setShowSeparator,
-  onNextClick,
-  onPrevClick,
-  currDropShow,
-  handleClickOutside = () => {},
-}) {
-  const [overFlow, setOverFlow] = useState(false);
-  const [currCount, setCurrCount] = useState(0);
-  const [translateX, setTranslateX] = useState(0);
-  const [maxTranslateX, setMaxTranslateX] = useState(0);
-  const [dropdownPosition, setDropdownPosition] = useState({
-    x: 0,
-    y: 0,
-    width: 200,
-  });
-  const [canScrollLeft, setCanScrollLeft] = useState(false);
-  const [canScrollRight, setCanScrollRight] = useState(false);
-  const tagContainer = useRef(null);
-  const filtersContainer = useRef([]);
-  const prevItemWidth = useRef(0);
-  const prevCount = useRef(currCount);
-  const memoizedHandleClickOutside = useCallback(handleClickOutside, []);
-
-  const handleCloseClick = () => {
-    setCurrCount(0);
-    setTranslateX(0);
-    if (handleExpandClick) handleExpandClick();
-  };
-  useLayoutEffect(() => {
-    if (tagContainer.current) {
-      const container = tagContainer.current;
-      setOverFlow(container.scrollWidth > container.clientWidth);
-      if (setShowSeparator) {
-        setShowSeparator(container.scrollWidth > container.clientWidth);
-      }
-    }
-  }, [tagContainer, list]);
-
-  useLayoutEffect(() => {
-    const container = tagContainer.current;
-    if (!container) return;
-
-    const checkScroll = () => {
-      const maxScroll = container.scrollWidth - container.clientWidth;
-      const currentScroll = container.scrollLeft;
-      setCanScrollLeft(currentScroll > 0);
-      setCanScrollRight(currentScroll < maxScroll - 1); // margin for precision
-      setOverFlow(maxScroll > 0);
-      if (setShowSeparator) setShowSeparator(maxScroll > 0);
-    };
-
-    // Run once immediately
-    requestAnimationFrame(checkScroll);
-
-    // Hook scroll + resize
-    container.addEventListener("scroll", checkScroll);
-    const resizeObserver = new ResizeObserver(checkScroll);
-    resizeObserver.observe(container);
-
-    return () => {
-      container.removeEventListener("scroll", checkScroll);
-      resizeObserver.disconnect();
-    };
-  }, [list, setShowSeparator]);
-
-  useLayoutEffect(() => {
-    if (filtersContainer.current[currCount]) {
-      const itemWidth = filtersContainer.current[currCount].offsetWidth;
-      let newTranslateX = translateX;
-
-      if (currCount > prevCount.current) {
-        newTranslateX += itemWidth;
-      } else if (currCount < prevCount.current) {
-        newTranslateX -= prevItemWidth.current;
-      }
-
-      newTranslateX = Math.min(newTranslateX, maxTranslateX);
-      newTranslateX = Math.max(newTranslateX, 0);
-
-      setTranslateX(newTranslateX);
-      prevItemWidth.current = itemWidth;
-      prevCount.current = currCount;
-    }
-  }, [currCount, maxTranslateX]);
-
-  useEffect(() => {
-    const handleMouseDown = (event) => {
-      memoizedHandleClickOutside(event);
-    };
-    document.addEventListener("mousedown", handleMouseDown);
-    return () => {
-      document.removeEventListener("mousedown", handleMouseDown);
-    };
-  }, [memoizedHandleClickOutside]);
-
-  const scrollAmount = 200; // or calculate based on tag average
-
-  const handleNextClick = () => {
-    if (onNextClick) onNextClick();
-    if (!tagContainer.current) return;
-    tagContainer.current.scrollBy({ left: scrollAmount, behavior: "smooth" });
-  };
-
-  const handlePrevClick = () => {
-    if (onPrevClick) onPrevClick();
-    if (!tagContainer.current) return;
-    tagContainer.current.scrollBy({ left: -scrollAmount, behavior: "smooth" });
-  };
-
-  const handleTagClick = (index) => {
-    if (filtersContainer.current[index]) {
-      const rect = filtersContainer.current[index].getBoundingClientRect();
-      setDropdownPosition({
-        x: rect.right + window.scrollX,
-        y: rect.bottom + window.scrollY,
-        width: rect.width,
-      });
-    }
-  };
-
-  if (!Array.isArray(list)) return null;
-  return (
-    <div
-      className="impact-selected-filter-container"
-      style={{ width: width ? width : "100%" }}
-    >
-      <div
-        className={`impact-selected-filter-tags ${!isExpanded && "collapsed"}`}
-        ref={tagContainer}
-      >
-        {Array.isArray(list) &&
-          list.map((item, index) => {
-            return (
-              <div
-                className="impact-selected-filter-wrapper"
-                key={item.id}
-                style={{
-                  transform: `translateX(-${translateX}px)`,
-                }}
-                ref={(el) => {
-                  if (el) {
-                    filtersContainer.current[index] = el; // Dynamically assign each ref
-                  }
-                }}
-                onClick={() => handleTagClick(index)}
-              >
-                {containerChildren ? containerChildren(item, index) : null}
-                <div className="impact-selected-filter-tags-container">
-                  {tagsChildren ? tagsChildren(item, index) : null}
-                </div>
-                {currDropShow === index && (
-                  <PortalDropDown
-                    tags={item?.values.slice(2, 5)}
-                    filtersContainer={filtersContainer}
-                    index={index}
-                    showButton={item.values.length > 6}
-                    tag={item}
-                    viewAllAction={item.handleViewAll}
-                    position={dropdownPosition}
-                  />
-                )}
-              </div>
-            );
-          })}
-      </div>
-      {overFlow && list.length > 2 ? (
-        <div className="impact-selected-filter-action-btns">
-          {isExpanded ? (
-            <Fragment>
-              <div
-                className="impact-selected-filter-action-btn prev"
-                role="button"
-                style={{ opacity: canScrollLeft ? 1 : 0.5 }}
-                onClick={handlePrevClick}
-              >
-                <KeyboardArrowLeftIcon />
-              </div>
-              <div
-                className="impact-selected-filter-action-btn next"
-                role="button"
-                style={{ opacity: canScrollRight ? 1 : 0.5 }}
-                onClick={handleNextClick}
-              >
-                <KeyboardArrowRightIcon />
-              </div>
-              {handleExpandClick && (
-                <div
-                  className="impact-selected-filter-action-btn next"
-                  role="button"
-                  style={{ opacity: currCount === list.length ? "0.5" : 1 }}
-                  onClick={handleCloseClick}
-                >
-                  <CloseOutlinedIcon fontSize="small" />
-                </div>
-              )}
-            </Fragment>
-          ) : (
-            <div
-              className="impact-selected-filter-action-btn expand"
-              role="button"
-              style={{ opacity: currCount === list.length ? "0.5" : 1 }}
-              onClick={handleExpandClick}
-            >
-              <p>{"+" + list.length}</p> <ChevronRightOutlinedIcon />
-            </div>
-          )}
-        </div>
-      ) : null}
-    </div>
-  );
-}