impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/Loader/index.js

@@ -1,69 +0,0 @@
-import React, { useMemo } from "react";
-
-import "./Loader.styles.scss";
-import Skeleton from "@mui/material/Skeleton";
-import Box from "@mui/material/Box";
-
-export const Loader = ({
-  size = "large",
-  progress = "",
-  showSkeleton = false,
-  text = "Loading...",
-}) => {
-  const getSkeletonDimensions = (size) => {
-    switch (size) {
-      case "small":
-        return { circular: 20, rectangularWidth: 200, rectangularHeight: 10 };
-      case "medium":
-        return { circular: 25, rectangularWidth: 250, rectangularHeight: 12 };
-      case "large":
-      default:
-        return { circular: 30, rectangularWidth: 268, rectangularHeight: 12 };
-    }
-  };
-
-  const skeletonDimensions = useMemo(() => getSkeletonDimensions(size), [size]);
-
-  if (showSkeleton) {
-    return (
-      <Box display="flex" alignItems="center">
-        <Skeleton
-          variant="rectangular"
-          width={skeletonDimensions.circular}
-          height={skeletonDimensions.circular}
-          sx={{ borderRadius: 1 }}
-        />
-        <Box
-          display="flex"
-          flexDirection="column"
-          justifyContent="space-between"
-          ml={2}
-        >
-          <Skeleton
-            variant="rectangular"
-            width={skeletonDimensions.rectangularWidth}
-            height={skeletonDimensions.rectangularHeight}
-            style={{ marginBottom: 4 }}
-          />
-          <Skeleton
-            variant="rectangular"
-            width={skeletonDimensions.rectangularWidth}
-            height={skeletonDimensions.rectangularHeight}
-          />
-        </Box>
-      </Box>
-    );
-  }
-
-  return (
-    <div className="ia-styles ia-loader-container">
-      <div className={`ia-styles ia-loader-outer ia-loader-${size}`}>
-        <div className={`ia-loader ia-loader-inner`}>
-          {size !== "small" && progress}
-        </div>
-      </div>
-
-      {(progress || text) && <div className="ia-loaderText">{text}</div>}
-    </div>
-  );
-};

package/src/components/Menu/IconMenuItem.js

@@ -1,100 +0,0 @@
-import MenuItem from "@mui/material/MenuItem";
-import { Checkbox } from "../Checkbox";
-import React, { forwardRef, RefObject } from "react";
-import "./Menu.styles.scss";
-import { ListItemIcon } from "@mui/material";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-
-export const IconMenuItem = forwardRef(function IconMenuItem(
-  {
-    MenuItemProps,
-    className,
-    item,
-    handleSelect,
-    // grab any onClick passed from parent (nestedMenuItemsFromObject)
-    onClick: externalOnClick,
-    icon,
-    renderLabel,
-    withCheckbox,
-    selectedItems,
-    selected,
-    children,
-    childOpen = false,
-    ...props
-  },
-  ref
-) {
-  const internalOnClick = (e) => {
-    // legacy behavior: item has its own onClick/callback
-    return item?.onClick ? item.onClick(item.value, e) : undefined;
-  };
-
-  const composedOnClick = (e) => {
-    // If checkbox mode: prefer handleSelect, else prefer externalOnClick -> internal
-    if (withCheckbox) {
-      if (typeof handleSelect === "function") {
-        // keep old signature handleSelect(item, event)
-        return handleSelect(item, e);
-      }
-      // fallback to external onClick if provided
-      if (typeof externalOnClick === "function")
-        return externalOnClick(e, item);
-      return internalOnClick(e);
-    }
-
-    // non-checkbox mode
-    if (typeof externalOnClick === "function") return externalOnClick(e, item);
-    return internalOnClick(e);
-  };
-
-  return (
-    <MenuItem
-      {...props}
-      key={item?.label}
-      ref={ref}
-      disabled={item?.disabled}
-      onClick={composedOnClick}
-      disableRipple
-      disableTouchRipple
-      selected={
-        withCheckbox
-          ? selectedItems.includes(item?.value)
-          : selected === item?.value
-      }
-      disablePortal
-      disableScrollLock
-      {...MenuItemProps}
-      className={
-        className
-          ? `${className} ${childOpen && "child-hover"}`
-          : childOpen && "child-hover"
-      }
-    >
-      <div className="ia-list-body">
-        {withCheckbox && !item?.section && (
-          <div className="ia-menu-checkbox">
-            <Checkbox
-              variant="default"
-              disabled={item?.disabled}
-              checked={selectedItems.includes(item?.value)}
-            />
-          </div>
-        )}
-        {item.icon && (
-          <ListItemIcon className="ia-list-icon">{item.icon}</ListItemIcon>
-        )}
-        {item?.section ? (
-          <div className="menu-section-header">{item.section}</div>
-        ) : (
-          <div className="ia-list-label-container">
-            <div className="ia-list-label">{item?.label}</div>
-            {item?.subLabel && (
-              <div className="ia-list-sublabel">{item.subLabel}</div>
-            )}
-          </div>
-        )}
-      </div>
-      {item?.rightIcon ? item?.rightIcon : children && <ChevronRightIcon />}
-    </MenuItem>
-  );
-});

package/src/components/Menu/Menu.styles.scss

@@ -1,190 +0,0 @@
-@import "../../styles/index.scss";
-
-.ia-styles.ia-menu {
-  .MuiPaper-root {
-    background: $whiteColor; // #fff
-    border: 1px solid $menuBorderColor;
-    box-shadow: 0px 1px 6px 0px $boxShadowMedium; // rgba(0, 0, 0, 0.12) – closest match to rgba(26,39,124,0.14)
-    border-radius: $borderRadiusLarge; // 12px
-    padding: 0 6px;
-    margin-top: 4px;
-  }
-  .MuiList-root {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-  .MuiButtonBase-root {
-    font-size: 14px;
-    color: $mainFontColor;
-    font-family: $fontFamily;
-    font-weight: $normalFontWeight;
-    line-height: 20px;
-    height: 35px;
-    padding: 0 12px;
-    display: flex;
-    gap: 6px;
-    align-items: center;
-    justify-content: space-between;
-    &.Mui-focusVisible {
-      background-color: transparent;
-    }
-
-    &:hover {
-      background: $textButtonPrimaryBg; // #f5f6fa
-      border-radius: $borderRadius;
-      color: $mainFontColor;
-    }
-  }
-
-  .css-kk1bwy-MuiButtonBase-root-MuiMenuItem-root:has(.ia-list-sublabel) {
-    min-height: 56px !important;
-  }
-
-  .css-kk1bwy-MuiButtonBase-root-MuiMenuItem-root.Mui-selected {
-    background-color: $lightBlueColor; // #eceefd
-    border-radius: $borderRadius;
-  }
-
-  .ia-list-body:has(.menu-section-header) {
-    gap: 6px;
-    padding-top: 4px;
-    border-top: 1px solid $textButtonPrimaryBg;
-  }
-
-  li:first-of-type {
-    :has(.menu-section-header) {
-      border-top: none;
-    }
-  }
-
-  li:has(.menu-section-header) {
-    pointer-events: none;
-    cursor: default;
-  }
-
-  .css-kk1bwy-MuiButtonBase-root-MuiMenuItem-root.child-hover {
-    background: $textButtonPrimaryBg; // #f5f6fa
-    border-radius: $borderRadius;
-    color: $mainFontColor;
-  }
-
-  .ia-vertical-line {
-    min-width: 228px;
-    height: 0px;
-    border: 1px solid $textButtonPrimaryBg; // #f5f6fa
-    flex: none;
-    align-self: stretch;
-    flex-grow: 0;
-  }
-  .ia-menu-action-button-container {
-    display: flex;
-    justify-content: flex-end;
-    gap: 12px;
-    align-items: center;
-    padding: 8px 8px 4px;
-    .ia-styles.ia-btn {
-      font-weight: 400;
-      height: 32px;
-      padding: 8px;
-    }
-    .ia-btn-contained {
-      color: $whiteColor;
-      &:hover {
-        color: $whiteColor;
-        background-color: $secondaryColor;
-      }
-    }
-    .ia-btn-tertiary {
-      &:hover {
-        background-color: $lightBlueColor;
-        color: $secondaryColor;
-        border-color: $secondaryColor;
-        border-width: 1px;
-      }
-    }
-  }
-  .menu-scroll-area {
-    max-height: 300px; // fixed height for scrolling area
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-  .menu-item-selected {
-    background: $textButtonPrimaryBg;
-    border-radius: 8px;
-    color: $mainFontColor;
-  }
-}
-
-.ia-menu-checkbox {
-  .MuiCheckbox-root.impact-checkbox-container {
-    height: 16px;
-    width: 16px;
-    margin-right: 0;
-    &:hover {
-      border-radius: 4px !important;
-      background: $whiteColor;
-    }
-  }
-  .MuiCheckbox-root.default-variant.Mui-checked {
-    &:hover {
-      background: $lightBlueColor url("../../assets/tick.svg") no-repeat;
-      background-size: 10px;
-      background-position: center;
-      border: 1px solid $primaryColor;
-    }
-  }
-}
-
-.menu-section-header {
-  font-weight: 700;
-  font-size: 12px;
-  line-height: 20px;
-  height: 35px;
-  color: $lightGrayColor;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.ia-list-icon {
-  min-width: auto !important;
-}
-
-.ia-section-icon {
-  min-width: 32px !important;
-}
-
-.ia-list-label-container {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  justify-content: center;
-}
-
-.ia-list-sublabel {
-  font-size: 12px;
-  max-width: 7rem;
-  font-weight: 400;
-  color: $inputInfoColor;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ia-list-body {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-grow: 1;
-}
-
-.bottom_action {
-  position: sticky;
-  bottom: 0;
-  background: #fff; // ya $whiteColor
-  padding: 0;
-  border-top: 1px solid $menuBorderColor;
-}

package/src/components/Menu/MenuHeader.jsx

@@ -1,84 +0,0 @@
-import React, { useState } from "react";
-import MenuItem from "@mui/material/MenuItem";
-import Radio from "@mui/material/Radio";
-import RadioGroup from "@mui/material/RadioGroup";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import TextField from "@mui/material/TextField";
-import Checkbox from "@mui/material/Checkbox";
-import InputAdornment from "@mui/material/InputAdornment";
-import SearchIcon from "@mui/icons-material/Search";
-import "./MenuOptionsHeader.styles.scss";
-
-export const MenuOptionsHeader = ({
-  options,
-  selectedItems,
-  onSearchChange,
-  onSelectAll,
-  onClearSelection,
-}) => {
-  const [menuOption, setMenuOption] = useState("New");
-  const [searchQuery, setSearchQuery] = useState("");
-
-  const handleMenuOptionChange = (event) => {
-    setMenuOption(event.target.value);
-  };
-
-  const handleSearchChange = (event) => {
-    setSearchQuery(event.target.value);
-    onSearchChange(event.target.value);
-  };
-
-  const isAllSelected =
-    selectedItems.length === options.length && options.length > 0;
-  const isIndeterminate =
-    selectedItems.length > 0 && selectedItems.length < options.length;
-
-  return (
-    <div className="menu-header">
-      <RadioGroup
-        row
-        name="row-radio-buttons-group"
-        value={menuOption}
-        onChange={handleMenuOptionChange}
-      >
-        <FormControlLabel
-          value="New"
-          control={<Radio size="small" />}
-          label="New"
-        />
-        <FormControlLabel
-          value="Existing"
-          control={<Radio size="small" />}
-          label="Existing"
-        />
-      </RadioGroup>
-
-      <TextField
-        fullWidth
-        size="small"
-        placeholder="Search here..."
-        value={searchQuery}
-        onChange={handleSearchChange}
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <SearchIcon />
-            </InputAdornment>
-          ),
-        }}
-      />
-
-      <MenuItem className="select-all-option">
-        <Checkbox
-          checked={isAllSelected}
-          indeterminate={isIndeterminate}
-          onChange={onSelectAll}
-        />
-        <span className="select-all-text">Select all</span>
-        <span className="clear-text" onClick={onClearSelection}>
-          Clear
-        </span>
-      </MenuItem>
-    </div>
-  );
-};