@carbon/ibm-products 2.80.0 → 2.81.0-rc.0

package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js

@@ -1,64 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2025
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useEffect } from 'react';
-import { px } from '@carbon/layout';
-import { pkg } from '../../../settings.js';
-import { moveColumnIndicatorLine } from '../utils/moveColumnIndicatorLine.js';
-
-// Used specifically for reordering columns, will move the position of the
-// cloned selection area to follow the position of the cursor
-const useSpreadsheetMouseMove = _ref => {
-  let {
-    ref,
-    blockClass = `${pkg.prefix}--data-spreadsheet`,
-    headerCellHoldActive,
-    defaultColumn
-  } = _ref;
-  useEffect(() => {
-    const handleMouseMove = event => {
-      const clonedSelectionElement = ref.current.querySelector(`.${blockClass}__selection-area--element-cloned`);
-      if (clonedSelectionElement) {
-        ref.current.addEventListener('mousemove', handleMouseMove);
-      }
-      const spreadsheetCoords = ref.current.getBoundingClientRect();
-      const listContainer = ref.current.querySelector(`.${blockClass}__list--container`);
-      const scrollAmount = listContainer.scrollLeft;
-      moveColumnIndicatorLine({
-        clonedSelectionElement,
-        ref,
-        spreadsheetCoords,
-        leftScrollAmount: scrollAmount
-      });
-      const spreadsheetWrapperElement = ref.current;
-      spreadsheetWrapperElement.getBoundingClientRect();
-      const xPositionRelativeToSpreadsheet = event.clientX - spreadsheetCoords.left;
-      const offsetXValue = clonedSelectionElement?.getAttribute('data-clone-offset-x');
-      const totalSpreadsheetScrollingWidth = listContainer.scrollWidth;
-      const clonedSelectionWidth = clonedSelectionElement.offsetWidth;
-      const clonePlacement = Math.max(xPositionRelativeToSpreadsheet - offsetXValue, defaultColumn?.rowHeaderWidth);
-      const leftPosition = totalSpreadsheetScrollingWidth - clonedSelectionWidth >= clonePlacement ? clonePlacement + scrollAmount : totalSpreadsheetScrollingWidth - clonedSelectionWidth;
-      // Moves the position of the cloned selection area to follow mouse, and
-      // add the amount horizontally scrolled
-      if (leftPosition < spreadsheetCoords.right - 40) {
-        clonedSelectionElement.style.left = px(leftPosition);
-      }
-    };
-    if (headerCellHoldActive) {
-      ref.current.addEventListener('mousemove', handleMouseMove);
-    }
-    const spreadsheetRef = ref.current;
-    if (!headerCellHoldActive) {
-      spreadsheetRef?.removeEventListener('mousemove', handleMouseMove);
-    }
-    return () => {
-      spreadsheetRef?.removeEventListener('mousemove', handleMouseMove);
-    };
-  });
-};
-
-export { useSpreadsheetMouseMove };

package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.d.ts

@@ -1,19 +0,0 @@
-export function useSpreadsheetMouseUp({ currentMatcher, setSelectionAreas, selectedHeaderReorderActive, setSelectedHeaderReorderActive, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, blockClass, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn, selectionAreas, }: {
-    currentMatcher: any;
-    setSelectionAreas: any;
-    selectedHeaderReorderActive: any;
-    setSelectedHeaderReorderActive: any;
-    setClickAndHoldActive: any;
-    setValidStartingPoint: any;
-    validStartingPoint: any;
-    blockClass?: string | undefined;
-    ref: any;
-    setHeaderCellHoldActive: any;
-    setColumnOrder: any;
-    visibleColumns: any;
-    setActiveCellCoordinates: any;
-    activeCellCoordinates: any;
-    rows: any;
-    defaultColumn: any;
-    selectionAreas: any;
-}): void;

package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js

@@ -1,161 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2025
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useEffect } from 'react';
-import { px } from '@carbon/layout';
-import { pkg } from '../../../settings.js';
-import { deepCloneObject } from '../../../global/js/utils/deepCloneObject.js';
-
-const useSpreadsheetMouseUp = _ref => {
-  let {
-    currentMatcher,
-    setSelectionAreas,
-    selectedHeaderReorderActive,
-    setSelectedHeaderReorderActive,
-    setClickAndHoldActive,
-    setValidStartingPoint,
-    validStartingPoint,
-    blockClass = `${pkg.prefix}--data-spreadsheet`,
-    ref,
-    setHeaderCellHoldActive,
-    setColumnOrder,
-    visibleColumns,
-    setActiveCellCoordinates,
-    activeCellCoordinates,
-    rows,
-    defaultColumn,
-    selectionAreas
-  } = _ref;
-  useEffect(() => {
-    const handleMouseUp = event => {
-      let isHoldingColumn = false;
-      if (selectionAreas?.[0]?.header && selectionAreas[0].header.type === 'column') {
-        isHoldingColumn = true;
-      }
-      // Remove the cloned selection area on mouse up
-      if (!validStartingPoint && isHoldingColumn) {
-        setHeaderCellHoldActive(false);
-        const selectionAreaElement = ref.current.querySelector(`.${blockClass}__selection-area--element`);
-        const selectionAreaCloneElement = ref.current.querySelector(`.${blockClass}__selection-area--element-cloned`);
-        if (!selectionAreaCloneElement) {
-          return;
-        }
-        // Mouse up while a cloned selection area exists/a column is being reordered
-        if (selectionAreaCloneElement) {
-          const closestCell = event.target.closest(`.${blockClass}--interactive-cell-element`);
-          const newColumnIndex = parseInt?.(closestCell?.getAttribute('data-column-index'));
-          const originalColumnIndex = parseInt?.(selectionAreaCloneElement?.getAttribute('data-column-index-original'));
-          const selectionAreaToClone = selectionAreas.filter(item => item?.matcher === currentMatcher);
-          const selectionAreaIndexArray = selectionAreaToClone[0].header.selectedIndexList;
-          const columnToMoveToElement = ref.current.querySelector(`[data-row-index="header"][data-column-index="${newColumnIndex}"]`);
-          // Mouse up element was not part of the spreadsheet component
-          if (!columnToMoveToElement) {
-            return;
-          }
-          const selectionAreaToMove = ref.current.querySelector(`[data-matcher-id="${currentMatcher}"]`);
-          const spreadsheetPosition = ref.current.getBoundingClientRect();
-          const listContainer = ref.current.querySelector(`.${blockClass}__list--container`);
-          const leftScrollAmount = listContainer.scrollLeft;
-          const newIndexLessThanStarting = newColumnIndex < originalColumnIndex;
-          const newIndexGreater = newColumnIndex > originalColumnIndex;
-          const differenceBetweenOldNewIndex = newIndexGreater ? newColumnIndex - originalColumnIndex : originalColumnIndex - newColumnIndex;
-          setSelectionAreas(prev => {
-            const selectionAreaClone = deepCloneObject(prev);
-            if (originalColumnIndex === newColumnIndex) {
-              return prev;
-            }
-            const indexOfItemToUpdate = selectionAreaClone.findIndex(item => item.matcher === currentMatcher);
-            if (indexOfItemToUpdate === -1) {
-              return prev;
-            }
-            if (!selectionAreaIndexArray.includes(newColumnIndex)) {
-              // We need to not add just the newColumnIndex, but an array of indexes
-              // if there are multiple columns
-              const newIndexArray = newIndexGreater ? selectionAreaIndexArray.map(num => num + differenceBetweenOldNewIndex) : selectionAreaIndexArray.map(num => num - differenceBetweenOldNewIndex);
-              selectionAreaClone[indexOfItemToUpdate].header.selectedIndexList = newIndexArray;
-              selectionAreaClone[indexOfItemToUpdate].point1.column = Math.min(...newIndexArray);
-              selectionAreaClone[indexOfItemToUpdate].point2.column = Math.max(...newIndexArray);
-            }
-            selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
-            return selectionAreaClone;
-          });
-          // Only reorder columns if the new index is _not_ part of the
-          // selectionAreaIndexArray, meaning the new placement is outside
-          // of the current selection area. Similarly, the active cell position
-          // should only be changed under the same condition.
-          if (!selectionAreaIndexArray.includes(newColumnIndex)) {
-            const deleteCount = selectionAreaIndexArray.length;
-            const startIndex = Math.min(...selectionAreaIndexArray);
-            const columnIdArray = visibleColumns.map(column => column.id);
-            const columnIdArrayClone = [...columnIdArray];
-            const getNewColumnOrder = () => {
-              const newColumnList = [];
-              selectionAreaIndexArray.map(index => {
-                return newColumnList.push(columnIdArray[index]);
-              });
-              return newColumnList;
-            };
-            // Remove one element at the original index
-            columnIdArrayClone.splice(startIndex, deleteCount);
-            const originalPointIndex = selectionAreaIndexArray.findIndex(item => item === originalColumnIndex);
-            const updatedNewIndexWithNewOrder = newColumnIndex - originalPointIndex;
-            // Add one element at the new index
-            columnIdArrayClone.splice(updatedNewIndexWithNewOrder, 0, ...getNewColumnOrder());
-            setColumnOrder(columnIdArrayClone); // Function provided by useTable (react-table) hook to reorder columns
-            const newCellCoords = {
-              ...activeCellCoordinates,
-              column: newIndexGreater ? activeCellCoordinates.column + differenceBetweenOldNewIndex : activeCellCoordinates.column - differenceBetweenOldNewIndex
-            };
-            setActiveCellCoordinates(newCellCoords);
-            const firstSelectedHeader = Array.from(ref.current.querySelectorAll(`.${blockClass}__th--selected-header`))[0];
-            const firstSelectedHeaderCoords = firstSelectedHeader.getBoundingClientRect();
-            const newRelativePosition = firstSelectedHeaderCoords.left - spreadsheetPosition.left + leftScrollAmount;
-            // console.log(firstSelectedHeaderCoords.left - spreadsheetPosition.left + leftScrollAmount);
-            const updatedSelectionAreaPlacement = newIndexLessThanStarting ? newRelativePosition : newColumnIndex === originalColumnIndex ? selectionAreaToMove.style.left : newRelativePosition;
-            selectionAreaToMove.style.left = px(updatedSelectionAreaPlacement);
-          }
-          // Remove the cloned column and indicator elements
-          const indicatorLineElement = ref.current.querySelector(`.${blockClass}__reorder-indicator-line`);
-          indicatorLineElement?.remove();
-          selectionAreaCloneElement?.remove();
-          selectionAreaElement?.classList?.remove(`${blockClass}__selection-area--element`);
-          setSelectedHeaderReorderActive(false);
-        }
-      }
-      // Mouse up was on a spreadsheet body cell which is a valid
-      // start/end point for creating a selection area
-      if (validStartingPoint || event.type === 'mouseup') {
-        setClickAndHoldActive(false);
-        setValidStartingPoint(false);
-        const cellButton = event.target.closest(`.${blockClass}__body--td`);
-        if (cellButton) {
-          const endCellCoordinates = {
-            row: Number(cellButton.getAttribute('data-row-index')),
-            column: Number(cellButton.getAttribute('data-column-index'))
-          };
-          setSelectionAreas(prev => {
-            const selectionAreaClone = deepCloneObject(prev);
-            const indexOfItemToUpdate = selectionAreaClone.findIndex(item => item.matcher === currentMatcher);
-            // No items in the array have an object that matches the value of currentMatcher
-            if (indexOfItemToUpdate === -1) {
-              return prev;
-            }
-            selectionAreaClone[indexOfItemToUpdate].point2 = endCellCoordinates;
-            selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
-            return selectionAreaClone;
-          });
-        }
-      }
-    };
-    document.addEventListener('mouseup', handleMouseUp);
-    return () => {
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [blockClass, currentMatcher, setSelectionAreas, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, selectedHeaderReorderActive, setSelectedHeaderReorderActive, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn, selectionAreas]);
-};
-
-export { useSpreadsheetMouseUp };

package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.d.ts

@@ -1,10 +0,0 @@
-export function useSpreadsheetOutsideClick({ isBlurSpreadsheet, spreadsheetRef, blockClass, setActiveCellCoordinates, setSelectionAreas, removeActiveCell, setContainerHasFocus, removeCellEditor, }: {
-    isBlurSpreadsheet: any;
-    spreadsheetRef: any;
-    blockClass?: string | undefined;
-    setActiveCellCoordinates: any;
-    setSelectionAreas: any;
-    removeActiveCell: any;
-    setContainerHasFocus: any;
-    removeCellEditor: any;
-}): void;

package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js

@@ -1,45 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2025
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useEffect } from 'react';
-import { pkg } from '../../../settings.js';
-import { removeCellSelections } from '../utils/removeCellSelections.js';
-
-// Click outside useEffect for spreadsheet
-const useSpreadsheetOutsideClick = _ref => {
-  let {
-    isBlurSpreadsheet,
-    spreadsheetRef,
-    blockClass = `${pkg.prefix}--data-spreadsheet`,
-    setActiveCellCoordinates,
-    setSelectionAreas,
-    removeActiveCell,
-    setContainerHasFocus,
-    removeCellEditor
-  } = _ref;
-  useEffect(() => {
-    const handleOutsideClick = event => {
-      if (!spreadsheetRef.current || spreadsheetRef.current.contains(event.target) || event.target.classList.contains(`${blockClass}__active-cell--highlight`) || event.target.classList.contains(`${blockClass}--interactive-cell-element`)) {
-        return;
-      }
-      isBlurSpreadsheet.current = true;
-      setActiveCellCoordinates(null);
-      setSelectionAreas([]);
-      removeActiveCell();
-      removeCellSelections({
-        spreadsheetRef
-      });
-      setContainerHasFocus(false);
-    };
-    document.addEventListener('click', handleOutsideClick);
-    return () => {
-      document.removeEventListener('click', handleOutsideClick);
-    };
-  }, [isBlurSpreadsheet, spreadsheetRef, removeActiveCell, blockClass, setActiveCellCoordinates, setContainerHasFocus, setSelectionAreas, removeCellEditor]);
-};
-
-export { useSpreadsheetOutsideClick };

package/es/components/DataSpreadsheet/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2022, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-export { DataSpreadsheet } from './DataSpreadsheet';
-export type { DataSpreadsheetProps } from './DataSpreadsheet';

package/es/components/DataSpreadsheet/types/index.d.ts

@@ -1,35 +0,0 @@
-/**
- * Copyright IBM Corp. 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-export type Size = 'xs' | 'sm' | 'md' | 'lg';
-export type Theme = 'light' | 'dark';
-export interface SpreadsheetColumn {
-    rowHeight?: number;
-    rowHeaderWidth?: number;
-    width?: number;
-}
-export interface ActiveCellCoordinates {
-    row?: number | string;
-    column?: number | string;
-}
-export interface PrevState {
-    cellEditorValue?: string;
-    activeCellCoordinates?: ActiveCellCoordinates;
-    isEditing?: boolean;
-    selectionAreaData?: any[];
-    clickAndHoldActive?: boolean;
-    selectedHeaderReorderActive?: boolean;
-    rowHeight?: number;
-    cellSize?: Size;
-}
-export interface Point {
-    column?: number;
-}
-export interface ItemType {
-    matcher?: string;
-    point1?: Point;
-    point2?: Point;
-}

package/es/components/DataSpreadsheet/utils/checkActiveHeaderCell.d.ts

@@ -1 +0,0 @@
-export function checkActiveHeaderCell(headerIndex: any, selectionAreas: any, headerType: any): boolean;

package/es/components/DataSpreadsheet/utils/checkActiveHeaderCell.js

@@ -1,30 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2025
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { deepCloneObject } from '../../../global/js/utils/deepCloneObject.js';
-
-// Determines if a row or column header cell should receive a highlight/active background color
-// Check each object in selectionAreas and see if the headerIndex is between
-// point1.row and point2.row, inclusive
-const checkActiveHeaderCell = (headerIndex, selectionAreas, headerType) => {
-  const areasCloned = deepCloneObject(selectionAreas);
-  const activeRowIndexes = [];
-  areasCloned.forEach(area => {
-    const greatestRowIndex = Math.max(area.point1?.[headerType], area.point2?.[headerType]);
-    const lowestRowIndex = Math.min(area.point1?.[headerType], area.point2?.[headerType]);
-    for (let i = lowestRowIndex; i <= greatestRowIndex; i++) {
-      activeRowIndexes.push(i);
-    }
-  });
-  const activeRowIndexesNoDuplicates = [...new Set(activeRowIndexes)];
-  if (areasCloned?.length && activeRowIndexesNoDuplicates.includes(headerIndex)) {
-    return true;
-  }
-  return false;
-};
-
-export { checkActiveHeaderCell };

package/es/components/DataSpreadsheet/utils/checkForHoldingKey.d.ts

@@ -1 +0,0 @@
-export function checkForHoldingKey(event: any, key: any): any;

package/es/components/DataSpreadsheet/utils/checkForHoldingKey.js

@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2025
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const checkForHoldingKey = (event, key) => {
-  // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
-  if (key == 'cmd') {
-    return event.metaKey || event.ctrlKey;
-  } else {
-    return event[key];
-  }
-};
-
-export { checkForHoldingKey };

package/es/components/DataSpreadsheet/utils/checkSelectedHeaderCell.d.ts

@@ -1 +0,0 @@
-export function checkSelectedHeaderCell(headerIndex: any, selectionAreas: any, headerType: any, items: any): any;

package/es/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js

@@ -1,31 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2025
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { deepCloneObject } from '../../../global/js/utils/deepCloneObject.js';
-
-const checkSelectedHeaderCell = (headerIndex, selectionAreas, headerType, items) => {
-  const areasCloned = deepCloneObject(selectionAreas);
-  const isSelectedHeader = areasCloned.some(area => {
-    const oppositeType = headerType === 'column' ? 'row' : 'column';
-    const minOppositeSelection = Math.min(area?.point1?.[oppositeType], area?.point2?.[oppositeType]);
-    const maxOppositeSelection = Math.max(area?.point1?.[oppositeType], area?.point2?.[oppositeType]);
-    const minSelection = Math.min(area?.point1?.[headerType], area?.point2?.[headerType]);
-    const maxSelection = Math.max(area?.point1?.[headerType], area?.point2?.[headerType]);
-    const isTrueSelectedState = items?.length - 1 === maxOppositeSelection && minOppositeSelection === 0;
-    // console.log({minSelection, maxSelection});
-    // Iterate over all columns included in the selection area
-    for (let i = minSelection; i <= maxSelection; i++) {
-      if (headerIndex === i && isTrueSelectedState) {
-        return true;
-      }
-    }
-    return false;
-  });
-  return isSelectedHeader;
-};
-
-export { checkSelectedHeaderCell };

package/es/components/DataSpreadsheet/utils/commonEventHandlers.d.ts

@@ -1,4 +0,0 @@
-export function handleBodyCellClick(cell: any, columnIndex: any, event: any, ...rest: any[]): void;
-export function handleBodyCellHover(cell: any, columnIndex: any, ...rest: any[]): void;
-export function handleRowHeaderClick(index: any, event: any, ...rest: any[]): void;
-export function handleKeyPress(event: any, ...rest: any[]): any;