impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/Menu/MenuHeaderInfo.jsx

@@ -1,319 +0,0 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
-import MenuItem from "@mui/material/MenuItem";
-import SearchIcon from "../../assets/searchIconTable.svg";
-import "./MenuHeaderInfo.styles.scss";
-import { Checkbox } from "../Checkbox";
-import { RadioButtonGroup } from "../RadioButtonGroup";
-import { chartConfig } from "../TableChat/components/chatConfig";
-
-const MenuOptionsHeaderComponent = ({
-  options,
-  selectedItems,
-  onSearchChange,
-  onSelectAll,
-  searchQuery,
-  onClearSelection,
-  onRadioButtonChange,
-  radioButtonOptions = chartConfig.userConfig.radioButtonConfig.options,
-  selectedRadioButton,
-  showRadioButton = chartConfig.userConfig.radioButtonConfig.showRadioButton,
-  isSearchable = chartConfig.userConfig.isSearchable,
-  isSelectAllAllowed = chartConfig.userConfig.showSelectAll,
-  // External handlers and props for customization
-  customHeaderProps = {},
-  externalHandlers = {},
-  overrideConfig = {},
-}) => {
-  // Apply external configuration overrides
-  const config = {
-    radioButtonOptions: overrideConfig.radioButtonOptions || radioButtonOptions,
-    selectedRadioButton: overrideConfig.selectedRadioButton,
-    showRadioButton:
-      overrideConfig.showRadioButton !== undefined
-        ? overrideConfig.showRadioButton
-        : showRadioButton,
-    isSearchable:
-      overrideConfig.isSearchable !== undefined
-        ? overrideConfig.isSearchable
-        : isSearchable,
-    isSelectAllAllowed:
-      overrideConfig.isSelectAllAllowed !== undefined
-        ? overrideConfig.isSelectAllAllowed
-        : isSelectAllAllowed,
-  };
-
-  const [selectedRadioOption, setSelectedRadioOption] = useState(
-    config.selectedRadioButton || ""
-  );
-  const [internalSearchQuery, setInternalSearchQuery] = useState(searchQuery);
-
-  // Ref to maintain focus during re-renders
-  const inputRef = useRef(null);
-  const isUserTyping = useRef(false);
-
-  // Maintain focus only when user is actively typing
-  useEffect(() => {
-    if (
-      isUserTyping.current &&
-      inputRef.current &&
-      document.activeElement !== inputRef.current
-    ) {
-      inputRef.current.focus();
-    }
-  });
-
-  useEffect(() => {
-    if (!searchQuery) {
-      setInternalSearchQuery("");
-    }
-  }, [searchQuery]);
-
-  // Debounced external handler to prevent excessive re-renders
-  const debouncedExternalHandler = useCallback(
-    debounce((value) => {
-      if (externalHandlers.onSearchChange) {
-        externalHandlers.onSearchChange(value);
-      } else if (onSearchChange) {
-        onSearchChange(value);
-      }
-    }, 500),
-    [externalHandlers.onSearchChange, onSearchChange]
-  );
-
-  const handleSearchChange = (event) => {
-    const value = event.target.value;
-
-    // Mark that user is actively typing
-    isUserTyping.current = true;
-
-    setInternalSearchQuery(value);
-
-    // Call external handlers with debounce to prevent excessive re-renders
-    debouncedExternalHandler(value);
-
-    // Reset typing flag after a delay
-    setTimeout(() => {
-      isUserTyping.current = false;
-    }, 50);
-  };
-
-  // Simple debounce utility
-  function debounce(func, wait) {
-    let timeout;
-    return function executedFunction(...args) {
-      const later = () => {
-        clearTimeout(timeout);
-        func(...args);
-      };
-      clearTimeout(timeout);
-      timeout = setTimeout(later, wait);
-    };
-  }
-
-  const handleKeyDown = (event) => {
-    // Allow clipboard operations (copy, paste, cut, select all)
-    if (event.ctrlKey || event.metaKey) {
-      const allowedKeys = ["c", "v", "x", "a", "z", "y"]; // copy, paste, cut, select all, undo, redo
-      if (allowedKeys.includes(event.key.toLowerCase())) {
-        // Stop propagation but allow default behavior for clipboard operations
-        event.stopPropagation();
-        if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) {
-          event.nativeEvent.stopImmediatePropagation();
-        }
-        isUserTyping.current = true;
-        return; // Don't prevent default for clipboard operations
-      }
-    }
-
-    // Allow arrow keys and other navigation/utility keys
-    const navigationKeys = [
-      "ArrowLeft",
-      "ArrowRight",
-      "ArrowUp",
-      "ArrowDown",
-      "Home",
-      "End",
-      "PageUp",
-      "PageDown",
-      "Tab",
-      "Escape",
-      "Enter",
-    ];
-    if (navigationKeys.includes(event.key)) {
-      event.stopPropagation();
-      if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) {
-        event.nativeEvent.stopImmediatePropagation();
-      }
-      return; // Don't prevent default for navigation
-    }
-
-    // Prevent the Menu component from capturing keyboard events
-    event.stopPropagation();
-    event.preventDefault();
-
-    // Use native event for immediate propagation stopping if available
-    if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) {
-      event.nativeEvent.stopImmediatePropagation();
-    }
-
-    // Mark that user is actively typing
-    isUserTyping.current = true;
-
-    // Manually handle input for problematic keys
-    if (
-      event.key.length === 1 ||
-      event.key === "Backspace" ||
-      event.key === "Delete"
-    ) {
-      const input = event.target;
-      const start = input.selectionStart;
-      const end = input.selectionEnd;
-      const currentValue = input.value;
-      let newValue;
-      let newCursorPos;
-
-      if (event.key === "Backspace") {
-        if (start === end && start > 0) {
-          newValue =
-            currentValue.slice(0, start - 1) + currentValue.slice(start);
-          newCursorPos = start - 1;
-        } else if (start !== end) {
-          newValue = currentValue.slice(0, start) + currentValue.slice(end);
-          newCursorPos = start;
-        } else {
-          return; // Nothing to delete
-        }
-      } else if (event.key === "Delete") {
-        if (start === end && start < currentValue.length) {
-          newValue =
-            currentValue.slice(0, start) + currentValue.slice(start + 1);
-          newCursorPos = start;
-        } else if (start !== end) {
-          newValue = currentValue.slice(0, start) + currentValue.slice(end);
-          newCursorPos = start;
-        } else {
-          return; // Nothing to delete
-        }
-      } else if (event.key.length === 1) {
-        newValue =
-          currentValue.slice(0, start) + event.key + currentValue.slice(end);
-        newCursorPos = start + 1;
-      }
-
-      if (newValue !== undefined) {
-        setInternalSearchQuery(newValue);
-        debouncedExternalHandler(newValue);
-
-        // Update cursor position
-        setTimeout(() => {
-          if (input && newCursorPos !== undefined) {
-            input.setSelectionRange(newCursorPos, newCursorPos);
-          }
-        }, 0);
-      }
-    }
-  };
-  const isAllSelected =
-    selectedItems.length === options.length && options.length > 0;
-  const isIndeterminate =
-    selectedItems.length > 0 && selectedItems.length < options.length;
-
-  const onSelectRadioButton = (event) => {
-    setSelectedRadioOption(event.target.value);
-    // Call external handler if provided, otherwise use default
-    if (externalHandlers.onRadioButtonChange) {
-      externalHandlers.onRadioButtonChange(event.target.value);
-    } else if (onRadioButtonChange) {
-      onRadioButtonChange(event.target.value);
-    }
-  };
-
-  const handleSelectAll = () => {
-    // Extract values from options for selection
-    const allValues = options?.map((opt) => opt.value) || [];
-
-    if (externalHandlers.onSelectAll) {
-      externalHandlers.onSelectAll(allValues);
-    } else if (onSelectAll) {
-      onSelectAll(allValues);
-    }
-  };
-
-  const handleClearSelection = () => {
-    if (externalHandlers.onClearSelection) {
-      externalHandlers.onClearSelection();
-    } else if (onClearSelection) {
-      onClearSelection();
-    }
-  };
-
-  return (
-    <div className="menu-header menu-header-fixed" {...customHeaderProps}>
-      {config.showRadioButton ? (
-        <div className="menu-header-radio-group-container">
-          <RadioButtonGroup
-            name="menu-header-radio-group"
-            onChange={onSelectRadioButton}
-            options={config.radioButtonOptions}
-            selectedOption={selectedRadioOption}
-            orientation="row"
-            {...(customHeaderProps.radioButtonProps || {})}
-          />
-        </div>
-      ) : null}
-
-      {config.isSearchable ? (
-        <div
-          className="menu-header-search-container"
-          role="search"
-          aria-label="Search input container"
-        >
-          <img
-            src={SearchIcon}
-            alt="search"
-            className="menu-header-search-icon"
-          />
-          <input
-            ref={inputRef}
-            placeholder={
-              customHeaderProps.searchPlaceholder || "Search here..."
-            }
-            className="menu-header-search-input"
-            type="text"
-            value={internalSearchQuery}
-            onChange={handleSearchChange}
-            onKeyDown={handleKeyDown}
-            autoComplete="off"
-            tabIndex={0}
-            {...(customHeaderProps.searchInputProps || {})}
-          />
-        </div>
-      ) : null}
-
-      {config.isSelectAllAllowed ? (
-        <MenuItem className="select-all-option">
-          <div className="ia-menu-checkbox">
-            <Checkbox
-              variant="default"
-              label={customHeaderProps.selectAllLabel || "Select all"}
-              checked={isAllSelected}
-              indeterminate={isIndeterminate}
-              onChange={handleSelectAll}
-              {...(customHeaderProps.checkboxProps || {})}
-            />
-          </div>
-          <span
-            className="clear-text"
-            onClick={handleClearSelection}
-            {...(customHeaderProps.clearButtonProps || {})}
-          >
-            {customHeaderProps.clearButtonText || "Clear"}
-          </span>
-        </MenuItem>
-      ) : null}
-    </div>
-  );
-};
-
-// Export memoized component to prevent unnecessary re-renders
-export const MenuOptionsHeader = React.memo(MenuOptionsHeaderComponent);

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

@@ -1,123 +0,0 @@
-@import "../../styles/index.scss";
-
-.ia-menu {
-  .menu-header {
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    background: $whiteColor;
-    padding-bottom: 0px;
-    width: 260px;
-    border-radius: $borderRadiusLarge $borderRadiusLarge 0 0;
-    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // Add subtle shadow to separate from content
-
-    .MuiRadioGroup-row {
-      margin-bottom: 8px;
-    }
-
-    .MuiTextField-root {
-      .MuiInputBase-root {
-        border-radius: $borderRadius;
-        background-color: $offWhiteColor;
-        .MuiInputAdornment-root {
-          color: $lightGrayColor;
-        }
-      }
-    }
-    .menu-header-search-container {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 0px 16px;
-
-      .menu-header-search-icon {
-        width: 14px;
-      }
-
-      .menu-header-search-input {
-        width: 100%;
-        padding: 8px 0px;
-        border: 1px solid $menuBorderColor;
-        border-radius: $borderRadius;
-        font-size: 14px;
-        outline: none;
-        border: none;
-        &::placeholder {
-          color: $lightGrayColor; // #b4bac7
-        }
-      }
-    }
-    .menu-header-radio-group-container {
-      border-bottom: 1px solid $menuBorderColor;
-      margin-bottom: 8px;
-      .MuiFormGroup-root.orientation-row {
-        padding: 2px 12px;
-      }
-    }
-    .menu-header-radio-group {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .MuiFormGroup-root.orientation-row {
-      padding: 0 8px;
-    }
-    .MuiButtonBase-root {
-      padding: 0 8px;
-    }
-    .select-all-option {
-      padding: 0 12px;
-      margin-right: 12px;
-    }
-  }
-
-  .select-all-option {
-    display: flex;
-    justify-content: space-between;
-
-    .MuiCheckbox-root {
-      padding: 0;
-      margin-right: 8px;
-    }
-    .select-all-text {
-      flex-grow: 1;
-      font-weight: 500;
-      color: $darkColor !important;
-    }
-    .clear-text {
-      color: $color-text-secondary;
-      cursor: pointer;
-      font-weight: 500;
-    }
-  }
-
-  .menu-list-container {
-    padding-top: 0;
-    padding-bottom: 0;
-    max-height: 250px; // Adjust as needed
-    overflow-y: auto;
-  }
-
-  .menu-option {
-    display: flex;
-    align-items: center;
-    padding: 8px 16px;
-    &.selected {
-      background-color: $infoBackground;
-    }
-    .MuiCheckbox-root {
-      padding: 0;
-      margin-right: 8px;
-    }
-    .menu-option-label {
-      flex-grow: 1;
-    }
-  }
-
-  .ia-menu-action-button-container {
-    // padding: 8px 16px;
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-  }
-}

package/src/components/Menu/NestedMenuItem.js

@@ -1,189 +0,0 @@
-import Menu from "@mui/material/Menu";
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
-
-import { IconMenuItem } from "./IconMenuItem";
-import "./Menu.styles.scss";
-
-const NestedMenuItem = forwardRef(function NestedMenuItem(props, ref) {
-  const {
-    parentMenuOpen,
-    label,
-    renderLabel,
-    icon,
-    children,
-    className,
-    tabIndex: tabIndexProp,
-    ContainerProps: ContainerPropsProp = {},
-    MenuProps,
-    delay = 0,
-    item,
-    ...MenuItemProps
-  } = props;
-
-  const { ref: containerRefProp, ...ContainerProps } = ContainerPropsProp;
-
-  const menuItemRef = useRef(null);
-  useImperativeHandle(ref, () => menuItemRef.current || null);
-
-  const containerRef = useRef(null);
-  useImperativeHandle(containerRefProp, () => containerRef.current);
-
-  const menuContainerRef = useRef(null);
-
-  const timeoutRef = useRef(null);
-
-  const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
-
-  const handleMouseEnter = (e) => {
-    timeoutRef.current = setTimeout(() => {
-      if (!props.disabled) {
-        setIsSubMenuOpen(true);
-      }
-
-      if (ContainerProps.onMouseEnter) {
-        ContainerProps.onMouseEnter(e);
-      }
-    }, delay);
-  };
-
-  const handleMouseLeave = (e) => {
-    timeoutRef.current && clearTimeout(timeoutRef.current);
-
-    setIsSubMenuOpen(false);
-
-    if (ContainerProps.onMouseLeave) {
-      ContainerProps.onMouseLeave(e);
-    }
-  };
-
-  // Check if any immediate children are active
-  const isSubmenuFocused = () => {
-    const active = containerRef.current?.ownerDocument.activeElement ?? null;
-    if (menuContainerRef.current == null) {
-      return false;
-    }
-    for (const child of menuContainerRef.current.children) {
-      if (child === active) {
-        return true;
-      }
-    }
-
-    return false;
-  };
-
-  const handleFocus = (e) => {
-    if (e.target === containerRef.current && !props.disabled) {
-      setIsSubMenuOpen(true);
-    }
-
-    if (ContainerProps.onFocus) {
-      ContainerProps.onFocus(e);
-    }
-  };
-
-  const handleKeyDown = (e) => {
-    if (e.key === "Escape") {
-      return;
-    }
-
-    if (isSubmenuFocused()) {
-      e.stopPropagation();
-    }
-
-    const active = containerRef.current?.ownerDocument.activeElement;
-
-    if (e.key === "ArrowLeft" && isSubmenuFocused()) {
-      containerRef.current?.focus();
-    }
-
-    if (
-      e.key === "ArrowRight" &&
-      e.target === containerRef.current &&
-      e.target === active
-    ) {
-      const firstChild = menuContainerRef.current?.children[0];
-      if (firstChild instanceof HTMLDivElement) {
-        firstChild.focus();
-      }
-      firstChild?.focus();
-    }
-  };
-
-  const open = isSubMenuOpen && parentMenuOpen;
-
-  // Root element must have a `tabIndex` attribute for keyboard navigation
-  let tabIndex;
-  if (!props.disabled) {
-    tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;
-  }
-
-  return (
-    <div
-      {...ContainerProps}
-      ref={containerRef}
-      onFocus={handleFocus}
-      tabIndex={tabIndex}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onKeyDown={handleKeyDown}
-    >
-      <IconMenuItem
-        MenuItemProps={MenuItemProps}
-        className={className}
-        ref={menuItemRef}
-        icon={item?.icon}
-        label={item?.label}
-        item={item}
-        renderLabel={renderLabel}
-        children={children}
-        childOpen={open}
-      />
-
-      <Menu
-        // Set pointer events to 'none' to prevent the invisible Popover div
-        // from capturing events for clicks and hovers
-        {...props}
-        style={{ pointerEvents: "none", marginLeft: "12px" }}
-        anchorEl={menuItemRef.current}
-        anchorOrigin={{
-          horizontal: "right",
-          vertical: "top",
-        }}
-        transformOrigin={{
-          horizontal: "left",
-          vertical: "top",
-        }}
-        open={open}
-        autoFocus={false}
-        disableAutoFocus
-        disableEnforceFocus
-        onClose={() => {
-          setIsSubMenuOpen(false);
-        }}
-        id="basic-menu"
-        className="ia-styles ia-menu"
-        {...MenuProps}
-      >
-        <div
-          ref={menuContainerRef}
-          style={{
-            pointerEvents: "auto",
-            display: "flex",
-            flexDirection: "column",
-            gap: "4px",
-          }}
-        >
-          {children}
-        </div>
-      </Menu>
-    </div>
-  );
-});
-
-NestedMenuItem.displayName = "NestedMenuItem";
-export { NestedMenuItem };