impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/Accordion/Accordion.styles.scss

@@ -1,118 +0,0 @@
-@import "../../styles/index.scss";
-
-.impact_accordion_main_container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0px;
-  flex-direction: column;
-  // padding: 20px;
-  width: 100%;
-  // margin: 0 20px;
-  background: #eceefd;
-  gap: 12px;
-  .Mui-expanded {
-    margin: 0px !important;
-  }
-  .accordion_main_container {
-    border-bottom: 1px solid $darkGrayColor;
-    box-shadow: none !important;
-    border-radius: $borderRadius;
-    //cursor: pointer;
-    &:hover {
-      // border: 1px solid $primaryColor !important;
-    }
-    &::before {
-      opacity: 0 !important;
-    }
-    .accordion_header {
-      padding: 0px !important;
-      height: $Component48px;
-      font-size: $mediumFontSize;
-      display: flex !important;
-      flex-grow: 0 !important;
-      justify-content: flex-end !important;
-      margin: 0 $component16px !important;
-      flex-direction: row-reverse;
-      gap: 12px;
-      .MuiAccordionSummary-content {
-        flex-grow: 0 !important;
-        color: $darkColor;
-        justify-content: flex-end;
-      }
-      .css-yw020d-MuiAccordionSummary-expandIconWrapper {
-        background: $textButtonPrimaryBg;
-        border-radius: 8px;
-        width: 32px;
-        height: 32px;
-        align-items: center;
-        justify-content: center;
-      }
-      .css-yw020d-MuiAccordionSummary-expandIconWrapper {
-        transform: rotate(-90deg);
-      }
-      .css-yw020d-MuiAccordionSummary-expandIconWrapper.Mui-expanded {
-        transform: rotate(-180deg);
-      }
-    }
-    .accordion_header.Mui-expanded {
-      margin: 0px $component16px !important;
-      min-height: $Component48px !important;
-    }
-    .accordion_body {
-      padding: $smallFontSize $component16px !important;
-      color: $darkColor;
-    }
-  }
-
-  .css-1elwnq4-MuiPaper-root-MuiAccordion-root.Mui-disabled {
-    background-color: white;
-    .css-yw020d-MuiAccordionSummary-expandIconWrapper {
-      background-color: $disabledSecondaryBg;
-    }
-    .MuiAccordionSummary-content {
-      color: $lightGrayColor;
-    }
-    .accordion_body {
-      color: $lightGrayColor;
-    }
-  }
-}
-
-.impact_accordion_main_container_single {
-  .accordion_main_container {
-    &:last-child {
-      border-radius: 8px;
-    }
-  }
-}
-
-.Mui-expanded.accordion_main_container {
-  border: 1px solid $accrodionBorderColor !important;
-}
-.Mui-expanded.MuiAccordionSummary-content {
-  font-weight: 500;
-}
-
-.accordion_main_container:focus {
-  box-shadow: -3px 3px $lightBlueColor, 1px -1px 0 2px $lightBlueColor !important;
-}
-
-.impact_accordion_main_container
-  .css-1086bdv-MuiPaper-root-MuiAccordion-root.Mui-expanded {
-  margin: 0 !important;
-}
-
-.accordions_white {
-  .impact_accordion_main_container {
-    background: $whiteColor;
-  }
-}
-.impact_accordion_main_container {
-  .accordion_main_container {
-    border: 1px solid $accrodionBorderColor;
-  }
-}
-
-.accordion_header .Mui-expanded {
-  font-weight: 600;
-}

package/src/components/Accordion/index.js

@@ -1,104 +0,0 @@
-import React from "react";
-import MUIAccordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import "./Accordion.styles.scss";
-
-export function Accordion({
-  expanded,
-  setExpanded,
-  isMultiExpanded,
-  data,
-  onChange,
-  isSingleItem,
-  singleData,
-  disabled,
-}) {
-  const handleSingleAccordionChange = (value) => {
-    if (onChange) {
-      onChange(value);
-      return;
-    }
-    setExpanded(value);
-  };
-
-  const handleMultiAccordionChange = (value) => {
-    if (onChange) {
-      onChange(value);
-      return;
-    }
-
-    if (isMultiExpanded && !expanded.includes(value)) {
-      setExpanded([...expanded, value]);
-    } else if (isMultiExpanded && expanded.includes(value)) {
-      setExpanded(expanded.filter((item) => item !== value));
-    } else if (expanded === value) {
-      setExpanded("");
-    } else {
-      setExpanded(value);
-    }
-  };
-
-  if (isSingleItem) {
-    return (
-      <div className="impact_accordion_main_container impact_accordion_main_container_single">
-        <MUIAccordion
-          className="accordion_main_container"
-          defaultExpanded={expanded === singleData.value}
-          onChange={() => handleSingleAccordionChange(singleData.value)}
-          disabled={disabled}
-        >
-          <AccordionSummary
-            className="accordion_header"
-            expandIcon={<ExpandMoreIcon />}
-            aria-controls="panel1-content"
-            id="panel1-header"
-          >
-            {singleData.header}
-          </AccordionSummary>
-          <AccordionDetails className="accordion_body">
-            {singleData.content}
-          </AccordionDetails>
-        </MUIAccordion>
-      </div>
-    );
-  }
-
-  return (
-    <div className="impact_accordion_main_container">
-      {data.map((item, index) => {
-        return (
-          <MUIAccordion
-            key={index}
-            className="accordion_main_container"
-            expanded={
-              isMultiExpanded
-                ? expanded.includes(item.value)
-                : expanded === item.value
-            }
-            defaultExpanded={
-              isMultiExpanded
-                ? expanded.includes(item.value)
-                : expanded === item.value
-            }
-            onChange={() => handleMultiAccordionChange(item.value)}
-            disabled={disabled || item.disabled}
-          >
-            <AccordionSummary
-              className="accordion_header"
-              expandIcon={<ExpandMoreIcon />}
-              aria-controls="panel1-content"
-              id="panel1-header"
-            >
-              {item.header}
-            </AccordionSummary>
-            <AccordionDetails className="accordion_body">
-              {item.content}
-            </AccordionDetails>
-          </MUIAccordion>
-        );
-      })}
-    </div>
-  );
-}

package/src/components/AccordionModern/AccordionModern.styles.scss

@@ -1,121 +0,0 @@
-@import "../../styles/index.scss";
-
-.impact-accordion-modern-main-container {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.impact-modern-accordion-item {
-  display: flex;
-  flex-direction: column;
-  border-radius: 8px;
-  background-color: $whiteColor;
-  border: 1px solid $accrodionBorderColor;
-  transition: border 0.2s ease;
-
-  .impact-modern-accordion-header {
-    display: flex;
-    flex-direction: row;
-    gap: 12px;
-    align-items: center;
-    height: 48px;
-    padding: 8px 16px;
-    width: 100%;
-
-    .impact-modern-accordion-drag-icon {
-      & svg {
-        width: 20px;
-        height: 20px;
-        color: #60697d;
-        margin-top: 2px;
-      }
-    }
-
-    .impact-modern-accordion-expand-icon {
-      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-in-out;
-
-      &:hover {
-        cursor: pointer;
-      }
-
-      & svg {
-        width: 20px;
-        height: 20px;
-        fill: $textButtonFontColor;
-      }
-    }
-
-    .impact-modern-accordion-title {
-      font-family: $fontFamily;
-      font-size: $normalFontSize;
-      font-weight: $semiBoldFontWeight;
-      line-height: 21px;
-      color: $offDarkColor;
-      width: 100%;
-    }
-    .impact-modern-accordion-title.child-count {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
-    .impact-modern-accordion-title.disabled {
-      color: $lightGrayColor;
-    }
-  }
-
-  .impact-modern-accordion-content {
-    font-family: $fontFamily !important;
-    font-size: $normalFontSize;
-    font-weight: $normalFontWeight;
-    line-height: 21px;
-    color: $offDarkColor;
-    padding: 0 16px; /* Initially no vertical padding */
-    visibility: hidden;
-    opacity: 0;
-    height: 0;
-    overflow: hidden;
-    transition: height 0.2s ease, padding 0.2s ease, opacity 0.2s ease;
-    box-sizing: border-box; /* Ensures padding is included in height calculation */
-  }
-
-  .expand-content {
-    padding: 16px; /* Add vertical padding on expansion */
-    height: auto; /* Allows natural height */
-    visibility: visible;
-    opacity: 1;
-  }
-}
-
-.impact-modern-accordion-container.disabled {
-  cursor: not-allowed;
-
-  .impact-modern-accordion-item {
-    .impact-modern-accordion-header {
-      pointer-events: none;
-    }
-    .impact-modern-accordion-expand-icon,
-    .impact-modern-accordion-drag-icon {
-      background-color: $disabledSecondaryBg;
-    }
-  }
-}
-
-.expand-content-icon {
-  transform: rotate(-90deg);
-}
-.expand-content-icon + .impact-modern-accordion-title {
-  font-weight: 800 !important;
-  fill: $textButtonFontColor;
-  h3 {
-    font-weight: 800;
-  }
-}

package/src/components/AccordionModern/SortableAccordionComp.js

@@ -1,156 +0,0 @@
-import React, { useState, useCallback } from "react";
-import {
-  DndContext,
-  closestCenter,
-  MouseSensor,
-  TouchSensor,
-  DragOverlay,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
-import { useSortable, arrayMove, SortableContext } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
-import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
-
-export const SortableAccordionList = ({
-  data,
-  handleMultiAccordionChange,
-  checkExpand,
-}) => {
-  const [items, setItems] = useState(data);
-  const [activeId, setActiveId] = useState(null);
-  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
-
-  const handleDragStart = useCallback((event) => {
-    setActiveId(event.active.id);
-  }, []);
-
-  const handleDragEnd = useCallback((event) => {
-    const { active, over } = event;
-    if (active.id !== over?.id) {
-      setItems((items) => {
-        // Extract IDs to find indices
-        const oldIndex = items.findIndex((item) => item.id === active.id);
-        const newIndex = items.findIndex((item) => item.id === over?.id);
-        if (oldIndex === -1 || newIndex === -1) return items;
-        return arrayMove(items, oldIndex, newIndex);
-      });
-    }
-    setActiveId(null);
-  }, []);
-
-  const handleDragCancel = useCallback(() => {
-    setActiveId(null);
-  }, []);
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragCancel={handleDragCancel}
-    >
-      <SortableContext items={items}>
-        <div className="impact-accordion-modern-main-container">
-          {items.map((item) => (
-            <SortableAccordionComp
-              key={item.id}
-              item={item}
-              handleMultiAccordionChange={handleMultiAccordionChange}
-              checkExpand={checkExpand}
-            />
-          ))}
-        </div>
-      </SortableContext>
-      <DragOverlay
-        adjustScale={false}
-        style={{ width: "inherit", transformOrigin: "0 0" }}
-      >
-        {activeId ? (
-          <SortableAccordionComp
-            item={items.find((i) => i.id === activeId)}
-            handleMultiAccordionChange={handleMultiAccordionChange}
-            checkExpand={checkExpand}
-            isDragging
-            isOverlay
-          />
-        ) : null}
-      </DragOverlay>
-    </DndContext>
-  );
-};
-
-const SortableAccordionComp = ({
-  item,
-  handleMultiAccordionChange,
-  checkExpand,
-  isDragging,
-  isOverlay,
-}) => {
-  const { attributes, listeners, setNodeRef, transform, transition } =
-    useSortable({
-      id: item.id,
-    });
-
-  const style = {
-    transform: isDragging ? CSS.Transform.toString(transform) : undefined,
-    transition: transition || undefined,
-    width: "100%", // Ensures it matches the accordion width
-  };
-
-  const inlineStyles = {
-    opacity: isDragging ? "0.5" : "1",
-    transformOrigin: "50% 50%",
-    // height: "140px",
-    // width: "140px",
-    borderRadius: "10px",
-    cursor: isDragging ? "grabbing" : "grab",
-    backgroundColor: "#ffffff",
-    display: "flex",
-    flexDirection: "column",
-    boxShadow: isDragging
-      ? "rgb(63 63 68 / 5%) 0px 2px 0px 2px, rgb(34 33 81 / 15%) 0px 2px 3px 2px"
-      : "rgb(63 63 68 / 5%) 0px 0px 0px 1px, rgb(34 33 81 / 15%) 0px 1px 3px 0px",
-    transform: isDragging ? "scale(1.05)" : "scale(1)",
-    ...style,
-  };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={inlineStyles}
-      withOpacity={isDragging}
-      className="impact-modern-accordion-container"
-    >
-      <div className="impact-modern-accordion-item">
-        <div className="impact-modern-accordion-header">
-          <div
-            className="impact-modern-accordion-drag-icon"
-            {...attributes}
-            {...listeners}
-            {...(isOverlay ? {} : { ...attributes, ...listeners })}
-          >
-            <DragIndicatorIcon />
-          </div>
-          <div
-            className={`impact-modern-accordion-expand-icon ${checkExpand(
-              item
-            )}-icon`}
-            onClick={(event) => {
-              event.stopPropagation();
-              handleMultiAccordionChange(item.value);
-            }}
-          >
-            <KeyboardArrowRightIcon />
-          </div>
-          <div className="impact-modern-accordion-title">{item.header}</div>
-        </div>
-        <div className={`impact-modern-accordion-content ${checkExpand(item)}`}>
-          {item.content}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/AccordionModern/index.js

@@ -1,103 +0,0 @@
-import React from "react";
-import { SortableAccordionList } from "./SortableAccordionComp";
-import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
-
-import "./AccordionModern.styles.scss";
-import { Badge } from "../Badge";
-
-export function AccordionModern(props) {
-  const {
-    draggable = false,
-    expanded,
-    setExpanded,
-    isMultiExpanded,
-    data,
-    onChange,
-    isSingleItem,
-    singleData,
-  } = props;
-
-  const handleMultiAccordionChange = (value) => {
-    if (onChange) {
-      onChange(value);
-    }
-    if (isMultiExpanded && !expanded.includes(value)) {
-      setExpanded([...expanded, value]);
-    } else if (isMultiExpanded && expanded.includes(value)) {
-      setExpanded((prev) => prev.filter((curr) => curr.value !== value));
-    } else if (expanded === value) {
-      setExpanded("");
-    } else {
-      setExpanded(value);
-    }
-  };
-
-  const checkExpand = (item) => {
-    if (isMultiExpanded && expanded.includes(item.value)) {
-      return "expand-content";
-    } else if (expanded === item.value) {
-      return "expand-content";
-    }
-    return "";
-  };
-
-  if (draggable && data.length > 0) {
-    return (
-      <SortableAccordionList
-        data={data}
-        handleMultiAccordionChange={handleMultiAccordionChange}
-        checkExpand={checkExpand}
-      />
-    );
-  }
-
-  return (
-    <div className="impact-accordion-modern-main-container">
-      {data.map((item, index) => {
-        return (
-          <div
-            className={`impact-modern-accordion-container ${
-              item?.disabled ? "disabled" : ""
-            }`}
-            key={item.value}
-          >
-            <div className="impact-modern-accordion-item" tabIndex="0">
-              <div className="impact-modern-accordion-header">
-                <div
-                  className={`impact-modern-accordion-expand-icon ${checkExpand(
-                    item
-                  )}-icon`}
-                  onClick={() => handleMultiAccordionChange(item.value)}
-                >
-                  <KeyboardArrowRightIcon />
-                </div>
-                <div
-                  className={`impact-modern-accordion-title ${
-                    item.childCount > 0 ? "child-count" : ""
-                  } ${item?.disabled ? "disabled" : ""}`}
-                >
-                  {item.header}
-                  {item.childCount > 0 ? (
-                    <Badge
-                      label={item.childCount}
-                      color="info"
-                      variant="stroke"
-                    />
-                  ) : null}
-                </div>
-              </div>
-              <div
-                className={`impact-modern-accordion-content ${checkExpand(
-                  item
-                )}`}
-              >
-                {item.content}
-              </div>
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}