impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/Stepper/index.js

@@ -1,101 +0,0 @@
-import React from "react";
-import Typography from "@mui/material/Typography";
-import MUIStepper from "@mui/material/Stepper";
-import Step from "@mui/material/Step";
-import StepLabel from "@mui/material/StepLabel";
-import PropTypes from "prop-types";
-import { Badge } from "../Badge";
-
-import "./Stepper.styles.scss";
-
-const renderDefaultStepper = ({
-  steps,
-  activeStep,
-  orientation,
-  handleStep,
-  width = "100%",
-  ...args
-}) => {
-  // const {icon, label, color="warning"} = statusConfig;
-  return (
-    <MUIStepper
-      className="ia-styles ia-stepper ia-stepper-horizontal"
-      activeStep={activeStep}
-      sx={{ width: width }}
-      orientation={orientation}
-      {...args}
-    >
-      {steps.length > 0 &&
-        steps.map((step, index) => (
-          <Step key={step.label} onClick={() => handleStep(index)}>
-            <StepLabel
-              optional={
-                step.description ? (
-                  <Typography variant="caption">{step.description}</Typography>
-                ) : null
-              }
-              className={step?.statusConfig ? "status-config" : ""}
-            >
-              {step.label}
-              {step?.statusConfig && <Badge label={step.statusConfig.label} color={step.statusConfig.color} icon={step.statusConfig.icon} isIcon={step.statusConfig.icon} variant="subtle"/>}
-            </StepLabel>
-        </Step>
-      ))}
-    </MUIStepper>
-  );
-};
-
-const renderProgressStepper = ({ steps, activeStep, handleStep }) => (
-  <div className="ia-styles ia-stepper progress">
-    <div className="progress-steps">
-      {steps.map((step, index) => (
-        <div
-          key={step.label}
-          className={`step ${index === activeStep ? "active" : ""} ${index < activeStep ? "completed" : ""
-            }`}
-          onClick={() => handleStep(index)}
-        />
-      ))}
-    </div>
-  </div>
-);
-
-export const Stepper = ({
-  steps,
-  activeStep,
-  orientation = "horizontal",
-  handleStep,
-  variant = "default",
-  ...args
-}) => {
-  const stepperContent = {
-    default: () =>
-      renderDefaultStepper({
-        steps,
-        activeStep,
-        orientation,
-        handleStep,
-        ...args,
-      }),
-    progress: () => renderProgressStepper({ steps, activeStep, handleStep }),
-    // Backward compatibility
-    mui: () =>
-      renderDefaultStepper({
-        steps,
-        activeStep,
-        orientation,
-        handleStep,
-        ...args,
-      }),
-  };
-
-  return stepperContent[variant]();
-};
-
-Stepper.propTypes = {
-  steps: PropTypes.array,
-  activeStep: PropTypes.number,
-  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
-  handleStep: PropTypes.func,
-  variant: PropTypes.oneOf(["default", "progress", "mui"]),
-};

package/src/components/Switch/Switch.styles.scss

@@ -1,96 +0,0 @@
-@import "../../styles/index.scss";
-
-.ia-styles.ia-switch-container {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-
-  .ia-switch-label {
-    font-family: $fontFamily;
-    font-size: $normalFontSize;
-    font-weight: $normalFontWeight;
-    line-height: 17.5px;
-    text-align: left;
-    color: $textButtonFontColor;
-    &.ia-switch-disabled {
-      color: $lightGrayColor;
-    }
-  }
-}
-
-.ia-styles.ia-switch {
-  position: relative;
-  width: 24px;
-  padding: 0;
-  height: 16px;
-
-  .MuiButtonBase-root.MuiSwitch-switchBase {
-    background-color: transparent !important;
-  }
-
-  .MuiSwitch-thumb {
-    top: 3px;
-    position: absolute;
-    left: 15px;
-    width: 10px;
-    height: 10px;
-    box-shadow: none;
-    color: $deactivateColor;
-  }
-
-  .Mui-checked {
-    transform: translateX(10px);
-    color: $primaryColor !important;
-
-    .MuiSwitch-thumb {
-      color: $primaryColor;
-      left: 13px;
-    }
-  }
-  .Mui-checked:not(.Mui-disabled) + .MuiSwitch-track {
-    background-color: $lightBlueColor !important;
-    border: 1px solid $accordionBgBackground;
-  }
-
-  .MuiButtonBase-root {
-    color: $lightGrayColor;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: -12px;
-    width: 24px;
-    margin: auto;
-    padding: 0;
-  }
-
-  .MuiSwitch-track {
-    background-color: $whiteColor;
-    opacity: 1;
-    height: 16px;
-    width: 24px;
-    border-radius: 8px;
-    border: 1px solid $deactivateColor;
-  }
-
-  &.ia-switch-disabled {
-    // OFF + disabled
-    .MuiSwitch-switchBase:not(.Mui-checked) .MuiSwitch-thumb {
-      color: $disabledSecondaryBorder; // grey circle
-    }
-
-    .MuiSwitch-switchBase:not(.Mui-checked) + .MuiSwitch-track {
-      background-color: $disabledSecondaryBg !important;
-      border-color: 1px solid $disabledSecondaryBorder;
-    }
-
-    // ON + disabled
-    .MuiSwitch-switchBase.Mui-checked.Mui-disabled .MuiSwitch-thumb {
-      color: $accordionBgBackground;
-    }
-
-    .MuiSwitch-switchBase.Mui-checked.Mui-disabled + .MuiSwitch-track {
-      background-color: $lightBlueColor !important;
-      // border-color: $accordionBgBackground;
-    }
-  }
-}

package/src/components/Switch/index.js

@@ -1,59 +0,0 @@
-import React from "react";
-import MUISwitch from "@mui/material/Switch";
-import PropTypes from "prop-types";
-
-import "./Switch.styles.scss";
-
-export const Switch = ({
-  value,
-  leftLabel = "",
-  rightLabel = "",
-  disabled = false,
-  onChange,
-  ...args
-}) => {
-  return (
-    <div className="ia-styles ia-switch-container">
-      {leftLabel ? (
-        <span
-          className={`ia-styles ia-switch-label ${
-            disabled ? "ia-switch-disabled" : ""
-          }`}
-          style={{ color: value && !disabled && "#1f2b4d" }}
-        >
-          {leftLabel}
-        </span>
-      ) : null}
-      <div style={{ display: "flex", alignItems: "center" }}>
-        <MUISwitch
-          disabled={disabled}
-          disableRipple
-          checked={value}
-          onChange={onChange}
-          className={`ia-styles ia-switch ${
-            disabled ? "ia-switch-disabled" : ""
-          } ${!value ? "ia-switch-off" : ""}`}
-          {...args}
-        />
-      </div>
-      {rightLabel ? (
-        <span
-          className={`ia-styles ia-switch-label ${
-            disabled ? "ia-switch-disabled" : ""
-          }`}
-          style={{ color: value && !disabled && "#1F2B4D" }}
-        >
-          {rightLabel}
-        </span>
-      ) : null}
-    </div>
-  );
-};
-
-Switch.propTypes = {
-  value: PropTypes.bool,
-  leftLabel: PropTypes.string,
-  rightLabel: PropTypes.string,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-};

package/src/components/Table/AdvanceSearchModalItem.js

@@ -1,392 +0,0 @@
-import React, { useEffect, useState, useMemo } from "react";
-import { Select } from "../Select";
-import { Input } from "../Input";
-import { Button } from "../Button";
-import { DatePicker } from "../DatePicker";
-import { DateRangePicker } from "../DateRangePicker";
-import { useController, useForm } from "react-hook-form";
-import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
-import {
-  NON_TEXT_FILTER_OPTIONS,
-  TEXT_FILTER_OPTIONS,
-  isColumnSelectionDuplicate,
-} from "../../utils/helper";
-import moment from "moment";
-import { use } from "react";
-const AdvanceSearchModalItem = ({
-  colDefs,
-  control,
-  index,
-  actualIndex, // Add actualIndex prop for the real form index
-  onDelete,
-  filteredColumnsInitialOptions,
-  totalColumns,
-  currentColumnId,
-  activeOption,
-  getValues,
-  addNewColumn,
-  setToShowDuplicateColumnInAdvanceSearch,
-  selectedThirdOptionDropdownValue,
-  setSelectedThirdOptionDropdownValue,
-  isClearAll,
-  fields,
-  isLastVisible,
-  flag,
-  setFlag,
-  pendingDeletions,
-  setPendingDeletions,
-  remove,
-  ...args
-}) => {
-  const [isColumnOptionsOpen, setIsColumnOptionsOpen] = useState(false);
-  const [isOperationOptionsOpen, setIsOperationOptionsOpen] = useState(false);
-  const [isThirdOptionDropdownOpen, setIsThirdOptionDropdownOpen] =
-    useState(false);
-  const [currentOperationOptions, setCurrentOperationOptions] = useState([]);
-
-  const [
-    currentThirdOptionDropdownOptions,
-    setCurrentThirdOptionDropdownOptions,
-  ] = useState([]);
-  const [currentColumnDef, setCurrentColumnDef] = useState(null);
-  const [
-    currentFilteredColumnsInitialOptions,
-    setCurrentFilteredColumnsInitialOptions,
-  ] = useState(filteredColumnsInitialOptions);
-  // Column field controller - use actualIndex for form binding
-  const formIndex = actualIndex !== undefined ? actualIndex : index;
-  const { field: columnField } = useController({
-    name: `filters.${formIndex}.column`,
-    control,
-    rules: {
-      required: true,
-    },
-  });
-
-  const { unregister } = useForm();
-  // useEffect(() => {
-  //   if (activeOption !== "advanceSearch") {
-  //     unregister(`filters.${index}.operation`); // Completely removes field from form state
-  //   }
-  // }, [activeOption, index, unregister]);
-
-  const { field: operationField, fieldState: operationFieldState } =
-    useController({
-      name: `filters.${formIndex}.operation`,
-      control,
-      rules: { required: activeOption !== "advanceSearch" && true },
-    });
-
-  // Value field controller
-  const { field: valueField } = useController({
-    name: `filters.${formIndex}.value`,
-    control,
-    rules: {
-      required: true,
-    },
-  });
-
-  useEffect(() => {
-    if (columnField?.value) {
-      // Recursively find the column definition
-      const findColumnDef = (cols, field) => {
-        for (const col of cols) {
-          if (col.children) {
-            const found = findColumnDef(col.children, field);
-            if (found) return found;
-          }
-          if (
-            col.toShowDuplicateColumnInAdvanceSearch &&
-            col.columnFieldsInAdvanceSearch
-          ) {
-            const index = col.columnFieldsInAdvanceSearch?.indexOf(field);
-            if (index !== -1) {
-              return {
-                ...col,
-                currentColumnField: `${field}${index + 1}`, // add index + 1
-              };
-            }
-          } else if (col.colId === field || col.field === field) {
-            return col;
-          }
-        }
-        return null;
-      };
-
-      const columnDef = findColumnDef(colDefs, columnField.value.value);
-      setCurrentColumnDef(columnDef);
-      const operatorList = columnDef?.operationFilterOptions
-        ? columnDef.operationFilterOptions
-        : columnDef?.filter === "agNumberColumnFilter"
-        ? NON_TEXT_FILTER_OPTIONS
-        : TEXT_FILTER_OPTIONS;
-      setCurrentOperationOptions(operatorList);
-    }
-  }, [columnField?.value, colDefs]);
-
-  useEffect(() => {
-    if (currentColumnDef?.thirdOptionAsDropdown && operationField?.value) {
-      if (currentColumnDef?.toShowDuplicateColumnInAdvanceSearch) {
-        const currentOptions = currentColumnDef.currentColumnField?.endsWith(
-          "1"
-        )
-          ? currentColumnDef?.thirdOptionDropdownOptions1
-          : currentColumnDef?.thirdOptionDropdownOptions2;
-        setCurrentThirdOptionDropdownOptions(currentOptions);
-      } else {
-        setCurrentThirdOptionDropdownOptions(
-          currentColumnDef?.thirdOptionDropdownOptions
-        );
-      }
-    }
-    setToShowDuplicateColumnInAdvanceSearch(
-      currentColumnDef?.toShowDuplicateColumnInAdvanceSearch
-    );
-  }, [currentColumnDef, operationField]);
-
-  useEffect(() => {
-    // Case: When we click on icon to open advance filter
-
-    setCurrentFilteredColumnsInitialOptions(filteredColumnsInitialOptions);
-    if (
-      currentColumnId &&
-      !columnField.value &&
-      columnField.value !== currentColumnId &&
-      filteredColumnsInitialOptions?.length > 0 &&
-      !isClearAll
-    ) {
-      const columnOption = filteredColumnsInitialOptions?.find(
-        (opt) => opt.value === currentColumnId
-      );
-      const isColumnExists = getValues()
-        ?.filters?.map((filter) => filter?.column?.value)
-        ?.includes(currentColumnId);
-
-      // set the column value such as make ,modal etc
-      if (!isColumnExists) {
-        columnField?.onChange?.(columnOption);
-      }
-    }
-    // // Case where only one column is available
-    // if (filteredColumnsInitialOptions.length === 1 && !columnField.value) {
-    //   columnField.onChange(filteredColumnsInitialOptions[0]);
-    // }
-  }, [filteredColumnsInitialOptions, currentColumnId]);
-
-  const handleClickOutside = (event) => {
-    if (
-      isColumnOptionsOpen ||
-      isThirdOptionDropdownOpen ||
-      (isOperationOptionsOpen &&
-        !event.target.closest(".ia-table-search-content-body"))
-    ) {
-      setIsColumnOptionsOpen(false);
-      setIsThirdOptionDropdownOpen(false);
-      setIsOperationOptionsOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener("click", handleClickOutside);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [isColumnOptionsOpen, isThirdOptionDropdownOpen, isOperationOptionsOpen]);
-
-  useEffect(() => {
-    if (
-      activeOption === "search" &&
-      !operationField.value &&
-      columnField?.value &&
-      currentOperationOptions.length > 0
-    ) {
-      operationField.onChange({ label: "Contains", value: "contains" });
-    }
-  }, [columnField?.value, currentOperationOptions, activeOption]);
-  return (
-    <div className="ia-table-search-content-body">
-      <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
-        <Select
-          name={`filters.${formIndex}.column`}
-          placeholder="Select"
-          isOpen={isColumnOptionsOpen}
-          setIsOpen={(val) => {
-            setFlag(!flag);
-            setIsColumnOptionsOpen(val);
-          }}
-          currentOptions={currentFilteredColumnsInitialOptions}
-          setCurrentOptions={setCurrentFilteredColumnsInitialOptions}
-          selectedOptions={columnField?.value || null}
-          setSelectedOptions={(option) => {
-            const formValues = getValues();
-
-            // Find if the selected column is in a filter that is pending deletion.
-            const deletedFilter = fields.find((field, i) => {
-              const filterData = formValues.filters[i];
-              return (
-                pendingDeletions.includes(field.fieldId) &&
-                filterData?.column?.value === option.value
-              );
-            });
-
-            // If it is, remove it from the pending deletions list and remove the current row.
-            if (deletedFilter) {
-              setPendingDeletions((prev) =>
-                prev.filter((id) => id !== deletedFilter.fieldId)
-              );
-              remove(actualIndex);
-              return; // Stop processing to prevent the new row from being updated
-            }
-
-            const isDuplicate = isColumnSelectionDuplicate(
-              formValues,
-              option.value,
-              pendingDeletions,
-              setPendingDeletions,
-              fields
-            );
-
-            if (isDuplicate) {
-              return;
-            }
-
-            setFlag(!flag);
-            columnField.onChange(option);
-
-            // ✅ Default to "Contains" for normal search mode
-            if (activeOption === "search") {
-              operationField.onChange({ label: "Contains", value: "contains" });
-            } else {
-              operationField.onChange(null);
-            }
-
-            valueField.onChange("");
-          }}
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-          initialOptions={filteredColumnsInitialOptions}
-          minWidth={activeOption !== "advanceSearch" ? 400 : undefined}
-          withPortal={true}
-        />
-      </div>
-      {activeOption == "advanceSearch" && (
-        <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
-          <Select
-            name={`filters.${formIndex}.operation`}
-            placeholder="Select"
-            isOpen={isOperationOptionsOpen}
-            setIsOpen={(val) => {
-              setIsOperationOptionsOpen(val);
-            }}
-            currentOptions={currentOperationOptions}
-            setCurrentOptions={setCurrentOperationOptions}
-            selectedOptions={operationField?.value || null}
-            setSelectedOptions={(option) => {
-              operationField.onChange(option);
-            }}
-            initialOptions={currentOperationOptions}
-            disabled={!columnField.value}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-            }}
-            withPortal={true}
-            isDisabled={!columnField.value}
-          />
-        </div>
-      )}
-      <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
-        {currentColumnDef?.thirdOptionAsDropdown &&
-        currentThirdOptionDropdownOptions?.length > 0 ? (
-          <Select
-            name={`filters.${formIndex}.value`}
-            placeholder="Select value"
-            isOpen={isThirdOptionDropdownOpen}
-            setIsOpen={setIsThirdOptionDropdownOpen}
-            initialOptions={currentThirdOptionDropdownOptions}
-            currentOptions={currentThirdOptionDropdownOptions}
-            setCurrentOptions={setCurrentThirdOptionDropdownOptions}
-            selectedOptions={valueField?.value || null}
-            setSelectedOptions={(option) => {
-              // setSelectedThirdOptionDropdownValue(option);
-              valueField.onChange(option);
-            }}
-            minWidth={activeOption !== "advanceSearch" ? 344 : undefined}
-            withPortal={true}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-            }}
-            isDisabled={!operationField.value}
-          />
-        ) : currentColumnDef?.thirdOptionAsDatePicker ? (
-          <DatePicker
-            selectedDate={
-              valueField?.value ? moment(valueField?.value) : undefined
-            }
-            setSelectedDate={(date) => {
-              valueField?.onChange(date);
-            }}
-            placeholder="Select date"
-            name={`filters.${formIndex}.value`}
-            isDisabled={!operationField?.value}
-            withPortal={true}
-            fullWidth
-            {...currentColumnDef?.thirdOptionAsDatePickerProps}
-          />
-        ) : currentColumnDef?.thirdOptionAsDateRangePicker ? (
-          <DateRangePicker
-            isDisabled={!operationField.value}
-            startDate={
-              valueField.value?.startDate ? valueField.value?.startDate : null
-            }
-            endDate={
-              valueField.value?.endDate ? valueField.value?.endDate : null
-            }
-            setStartDate={() => {}}
-            setEndDate={() => {}}
-            handleDatesChange={(startDate, endDate) => {
-              valueField.onChange({
-                startDate: startDate,
-                endDate: endDate,
-              });
-            }}
-            withPortal={true}
-            name={`filters.${formIndex}.value`}
-            fullWidth
-            {...currentColumnDef?.thirdOptionAsDateRangePickerProps}
-          />
-        ) : (
-          <Input
-            placeholder="Enter text"
-            name={`filters.${formIndex}.value`}
-            value={valueField?.value || ""}
-            onChange={(e) => {
-              valueField.onChange(e.target.value);
-            }}
-            isDisabled={
-              activeOption == "advanceSearch" && !operationField.value
-            }
-          />
-        )}
-      </div>
-      <Button
-        variant="tertiary"
-        size="large"
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          onDelete();
-        }}
-        type="button"
-        disabled={isLastVisible}
-      >
-        <DeleteOutlineOutlinedIcon />
-      </Button>
-    </div>
-  );
-};
-
-export default AdvanceSearchModalItem;