@carbon/ibm-products 2.38.0-alpha.5 → 2.39.0

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.d.ts

@@ -1,2 +1,139 @@
-export const DataSpreadsheetBody: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/**
+ * 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.
+ */
+import React, { Dispatch, SetStateAction, MutableRefObject } from 'react';
+import { ActiveCellCoordinates, Column } from './types';
+interface DataSpreadsheetBodyProps {
+    /**
+     * Object containing the active cell coordinates
+     */
+    activeCellCoordinates?: ActiveCellCoordinates | null;
+    /**
+     *This is the ref of the button input, which is the active cell element
+     */
+    activeCellRef?: MutableRefObject<HTMLElement | undefined>;
+    /**
+     * Is the user clicking and holding in the data spreadsheet body
+     */
+    clickAndHoldActive?: boolean;
+    /**
+     * All of the spreadsheet columns
+     */
+    columns?: readonly Column[];
+    /**
+     * This represents the id of the current cell selection area
+     */
+    currentMatcher?: string;
+    /**
+     * Default spreadsheet sizing values
+     */
+    defaultColumn?: Column;
+    /**
+     * Sets the number of empty rows to be created when there is no data provided
+     */
+    defaultEmptyRowCount?: number;
+    /**
+     * Function to set table body prop values
+     */
+    getTableBodyProps?: () => {
+        data: any;
+    };
+    /**
+     * Headers provided from useTable hook
+     */
+    headerGroups?: any[];
+    /**
+     * The spreadsheet id
+     */
+    id?: number | string;
+    /**
+     * The event handler that is called when the active cell changes
+     */
+    onActiveCellChange?: () => void;
+    /**
+     * The event handler that is called to set the rows for the empty spreadsheet
+     */
+    onDataUpdate?: ({ ...args }: {
+        [x: string]: any;
+    }) => void;
+    /**
+     * The event handler that is called when the selection areas change
+     */
+    onSelectionAreaChange?: ({ ...args }: {
+        [x: string]: any;
+    }) => void;
+    /**
+     * Prepare row function from react-table
+     */
+    prepareRow?: (...args: any[]) => void;
+    /**
+     * All of the spreadsheet row data
+     */
+    rows?: any[];
+    /**
+     * The scrollbar width
+     */
+    scrollBarSize?: number;
+    /**
+     * Array of selection area data
+     */
+    selectionAreaData?: object[];
+    /**
+     * Array of selection areas
+     */
+    selectionAreas?: any[];
+    /**
+     * Setter fn for activeCellCoordinates state value
+     */
+    setActiveCellCoordinates?: Dispatch<SetStateAction<ActiveCellCoordinates | null>>;
+    /**
+     * Setter fn for active cell inside of selection area
+     */
+    setActiveCellInsideSelectionArea?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Setter fn for clickAndHold state value
+     */
+    setClickAndHoldActive?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Setter fn for column ordering, provided from react-table
+     */
+    setColumnOrder?: () => void;
+    /**
+     * Setter fn for containerHasFocus state value
+     */
+    setContainerHasFocus?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Setter fn for currentMatcher state value
+     */
+    setCurrentMatcher?: Dispatch<SetStateAction<string>>;
+    /**
+     * Setter fn for header cell hold active value
+     */
+    setHeaderCellHoldActive?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Setter fn for selectionAreaData state value
+     */
+    setSelectionAreaData?: Dispatch<SetStateAction<object[]>>;
+    /**
+     * Setter fn for selectionAreas state value
+     */
+    setSelectionAreas?: Dispatch<SetStateAction<object[]>>;
+    /**
+     * The total columns width
+     */
+    totalColumnsWidth?: number;
+    /**
+     * The total number of columns to be initially visible, additional columns will be rendered and
+     * visible via horizontal scrollbar
+     */
+    totalVisibleColumns?: number;
+    /**
+     * Prop from react-table used to reorder columns
+     */
+    visibleColumns?: [];
+}
+export declare const DataSpreadsheetBody: React.ForwardRefExoticComponent<DataSpreadsheetBodyProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -23,6 +23,7 @@ var checkActiveHeaderCell = require('./utils/checkActiveHeaderCell.js');
 var checkSelectedHeaderCell = require('./utils/checkSelectedHeaderCell.js');
 var getSpreadsheetWidth = require('./utils/getSpreadsheetWidth.js');
 var commonEventHandlers = require('./utils/commonEventHandlers.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useSpreadsheetMouseUp = require('./hooks/useSpreadsheetMouseUp.js');
 
@@ -71,21 +72,21 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var previousState = usePreviousValue.usePreviousValue({
     selectionAreaData: selectionAreaData,
     clickAndHoldActive: clickAndHoldActive,
-    rowHeight: defaultColumn.rowHeight
-  });
+    rowHeight: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
+  }) || {};
 
   // Set custom css property containing the spreadsheet total width
   React.useEffect(function () {
-    ref === null || ref === void 0 || ref.current.style.setProperty("--".concat(blockClass, "--total-width"), layout.px(totalColumnsWidth + scrollBarSize));
+    ref === null || ref === void 0 || ref.current.style.setProperty("--".concat(blockClass, "--total-width"), layout.px((totalColumnsWidth || 0) + (scrollBarSize || 0)));
   }, [ref, scrollBarSize, totalColumnsWidth]);
 
   // Call the `onSelectionAreaChange` handler to send selection area data
   // back to the consumer
   React.useEffect(function () {
-    if (selectionAreaData.length) {
+    if (selectionAreaData !== null && selectionAreaData !== void 0 && selectionAreaData.length) {
       var _previousState$select;
       if (!clickAndHoldActive && previousState !== null && previousState !== void 0 && previousState.clickAndHoldActive || (previousState === null || previousState === void 0 || (_previousState$select = previousState.selectionAreaData) === null || _previousState$select === void 0 ? void 0 : _previousState$select.length) !== (selectionAreaData === null || selectionAreaData === void 0 ? void 0 : selectionAreaData.length)) {
-        onSelectionAreaChange(selectionAreaData);
+        onSelectionAreaChange === null || onSelectionAreaChange === void 0 || onSelectionAreaChange(selectionAreaData);
       }
     }
   }, [previousState === null || previousState === void 0 ? void 0 : previousState.selectionAreaData, selectionAreaData, onSelectionAreaChange, clickAndHoldActive, previousState === null || previousState === void 0 ? void 0 : previousState.clickAndHoldActive]);
@@ -117,7 +118,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             }),
             selectionId: area.matcher
           };
-          setSelectionAreaData(function (prev) {
+          setSelectionAreaData === null || setSelectionAreaData === void 0 || setSelectionAreaData(function (prev) {
             var prevValues = deepCloneObject.deepCloneObject(prev);
             var newAreaData = prevValues.filter(function (item) {
               return item.selectionId !== area.matcher;
@@ -175,19 +176,28 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   // cell also gets updated with the new size and new top placement
   // value. All of the cell selections will be updated as well
   React.useEffect(function () {
-    var listContainer = spreadsheetBodyRef === null || spreadsheetBodyRef === void 0 ? void 0 : spreadsheetBodyRef.current;
-    var activeCellButton = listContainer.querySelector(".".concat(blockClass, "__active-cell--highlight"));
-    if (activeCellButton && defaultColumn.rowHeight !== previousState.rowHeight) {
+    var listContainer;
+    var activeCellButton;
+    if (spreadsheetBodyRef !== null && spreadsheetBodyRef !== void 0 && spreadsheetBodyRef.current) {
+      var _listContainer;
+      listContainer = spreadsheetBodyRef === null || spreadsheetBodyRef === void 0 ? void 0 : spreadsheetBodyRef.current;
+      activeCellButton = (_listContainer = listContainer) === null || _listContainer === void 0 ? void 0 : _listContainer.querySelector(".".concat(blockClass, "__active-cell--highlight"));
+    }
+    if (activeCellButton && (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight) !== previousState.rowHeight) {
       activeCellButton.style.height = "".concat(defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight, "px");
       if (activeCellCoordinates) {
-        var activeTargetElement = ref.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates.column, "\"]"));
-        var _listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
-        var newActiveCellTopPosition = activeTargetElement.getBoundingClientRect().top - _listContainer.getBoundingClientRect().top;
+        var activeTargetElement = ref === null || ref === void 0 ? void 0 : ref.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates.column, "\"]"));
+        var _listContainer2 = ref === null || ref === void 0 ? void 0 : ref.current.querySelector(".".concat(blockClass, "__list--container"));
+        var newActiveCellTopPosition;
+        if (activeTargetElement && _listContainer2) {
+          newActiveCellTopPosition = (activeTargetElement === null || activeTargetElement === void 0 ? void 0 : activeTargetElement.getBoundingClientRect().top) - _listContainer2.getBoundingClientRect().top;
+        }
         activeCellButton.style.top = layout.px(newActiveCellTopPosition);
         removeCellSelections.removeCellSelections({
+          matcher: undefined,
           spreadsheetRef: ref
         });
-        selectionAreas.map(function (area) {
+        selectionAreas === null || selectionAreas === void 0 || selectionAreas.map(function (area) {
           if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
             return createCellSelectionArea.createCellSelectionArea({
               ref: ref,
@@ -204,22 +214,18 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }
   }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns]);
-  //selectionAreas will be set when ever a selection area is made.
-  React.useEffect(function () {
-    removeDuplicateSelections();
-  }, [selectionAreas, removeDuplicateSelections]);
 
   //this method will check for any duplicate selection area and remove.
   //same selections are those have the same height, width, top, left styles. These inline styles are being set in createCellSelection util.
   var removeDuplicateSelections = React.useCallback(function () {
     var uniqueAttrArray = [],
       removedSelectionAreaMatcherArr = [];
-    ref.current.querySelectorAll(".".concat(blockClass, "__selection-area--element")).forEach(function (selectorEl) {
-      var _selectorEl$style = selectorEl.style,
-        top = _selectorEl$style.top,
-        left = _selectorEl$style.left,
-        height = _selectorEl$style.height,
-        width = _selectorEl$style.width;
+    ref === null || ref === void 0 || ref.current.querySelectorAll(".".concat(blockClass, "__selection-area--element")).forEach(function (selectorEl) {
+      var _style = selectorEl.style,
+        top = _style.top,
+        left = _style.left,
+        height = _style.height,
+        width = _style.width;
       var uniqueAttrStr = "".concat(top).concat(left).concat(height).concat(width); // eg: 20px30px70px90px
       if (uniqueAttrArray.indexOf(uniqueAttrStr) == -1) {
         uniqueAttrArray.push(uniqueAttrStr);
@@ -231,13 +237,13 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
     //clean the duplicate selectionAreaData and selectionArea
     if (removedSelectionAreaMatcherArr.length) {
-      setSelectionAreas(function (prev) {
+      setSelectionAreas === null || setSelectionAreas === void 0 || setSelectionAreas(function (prev) {
         var prevValues = deepCloneObject.deepCloneObject(prev);
         return prevValues.filter(function (item) {
           return !removedSelectionAreaMatcherArr.includes(item.matcher);
         });
       });
-      setSelectionAreaData(function (prev) {
+      setSelectionAreaData === null || setSelectionAreaData === void 0 || setSelectionAreaData(function (prev) {
         var prevValues = deepCloneObject.deepCloneObject(prev);
         return prevValues.filter(function (item) {
           return !removedSelectionAreaMatcherArr.includes(item.selectionId);
@@ -246,6 +252,11 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, [ref, setSelectionAreas, setSelectionAreaData]);
 
+  //selectionAreas will be set when ever a selection area is made.
+  React.useEffect(function () {
+    removeDuplicateSelections();
+  }, [selectionAreas, removeDuplicateSelections]);
+
   // onClick fn for each cell in the data spreadsheet body,
   // adds the active cell highlight
 
@@ -255,14 +266,14 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   }, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea, activeCellRef]);
   var handleBodyScroll = function handleBodyScroll() {
-    var headerRowElement = ref.current.querySelector("\n        .".concat(blockClass, "__header--container .").concat(blockClass, "__tr"));
-    headerRowElement.scrollLeft = contentScrollRef.current.scrollLeft;
+    var headerRowElement = ref.current.querySelector("\n        .".concat(blockClass, "__header--container .").concat(blockClass, "__tr")) || new HTMLDivElement();
+    headerRowElement.scrollLeft = contentScrollRef === null || contentScrollRef === void 0 ? void 0 : contentScrollRef.current.scrollLeft;
   };
   React.useEffect(function () {
-    contentScrollRef.current.addEventListener('scroll', function (event) {
+    contentScrollRef.current.addEventListener('scroll', function () {
       return handleBodyScroll();
     });
-    var contentScrollElementRef = contentScrollRef.current;
+    var contentScrollElementRef = contentScrollRef.current || new HTMLElement();
     return function () {
       contentScrollElementRef.removeEventListener('scroll', handleBodyScroll);
     };
@@ -287,12 +298,12 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         _rollupPluginBabelHelpers.toConsumableArray(Array(defaultEmptyRowCount)).map(function () {
           var _headerGroups$;
           var emptyCell = {};
-          (_headerGroups$ = headerGroups[0]) === null || _headerGroups$ === void 0 || _headerGroups$.headers.map(function (header) {
+          headerGroups === null || headerGroups === void 0 || (_headerGroups$ = headerGroups[0]) === null || _headerGroups$ === void 0 || _headerGroups$.headers.map(function (header) {
             emptyCell[header.id] = null;
           });
           emptyRowData.push(emptyCell);
         });
-        onDataUpdate(emptyRowData);
+        onDataUpdate === null || onDataUpdate === void 0 || onDataUpdate(emptyRowData);
       };
       buildEmptyRows();
     }
@@ -305,12 +316,15 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var RenderRow = React.useCallback(function (_ref3) {
     var index = _ref3.index,
       style = _ref3.style;
-    var row = rows[index];
+    var row = rows === null || rows === void 0 ? void 0 : rows[index];
     if (rows && rows.length) {
-      prepareRow(row);
-      return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, row.getRowProps({
+      prepareRow === null || prepareRow === void 0 || prepareRow(row);
+      var rowProps = propsHelper.prepareProps(row.getRowProps({
         style: style
-      }), {
+      }), 'key');
+      return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+        key: _rollupPluginBabelHelpers.objectSpread2({}, row.getRowProps().key)
+      }, rowProps, {
         className: cx__default["default"]("".concat(blockClass, "__tr")),
         "data-row-index": index,
         "aria-rowindex": index + 1,
@@ -331,10 +345,11 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }
       }, index + 1)), row.cells.map(function (cell, index) {
         var _cell$column;
+        var cellProps = propsHelper.prepareProps(cell.getCellProps(), 'key');
         return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
           key: "cell_".concat(index),
           "aria-colindex": index + 1
-        }, cell.getCellProps(), {
+        }, cellProps, {
           role: "gridcell",
           style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, cell.getCellProps().style), {}, {
             display: 'grid',
@@ -358,12 +373,14 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     ref: spreadsheetBodyRef,
     className: cx__default["default"]("".concat(blockClass, "__body--container"))
-  }, getTableBodyProps()), /*#__PURE__*/React__default["default"].createElement(reactWindow.FixedSizeList, {
+  }, getTableBodyProps === null || getTableBodyProps === void 0 ? void 0 : getTableBodyProps()), /*#__PURE__*/React__default["default"].createElement(reactWindow.FixedSizeList, {
     className: cx__default["default"]("".concat(blockClass, "__list--container"), "".concat(blockClass, "__list--container--").concat(id)),
     height: 400,
-    itemCount: rows.length || defaultEmptyRowCount,
+    itemCount: (rows === null || rows === void 0 ? void 0 : rows.length) || defaultEmptyRowCount,
     itemSize: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
     width: getSpreadsheetWidth.getSpreadsheetWidth({
+      headerGroup: undefined,
+      type: undefined,
       scrollBarSizeValue: scrollBarSize,
       totalVisibleColumns: totalVisibleColumns,
       defaultColumn: defaultColumn,
@@ -377,6 +394,7 @@ DataSpreadsheetBody.propTypes = {
   /**
    * Object containing the active cell coordinates
    */
+  /**@ts-ignore */
   activeCellCoordinates: index["default"].shape({
     row: index["default"].oneOfType([index["default"].string, index["default"].number]),
     column: index["default"].oneOfType([index["default"].string, index["default"].number])
@@ -384,6 +402,7 @@ DataSpreadsheetBody.propTypes = {
   /**
    *This is the ref of the button input, which is the active cell element
    */
+  /**@ts-ignore */
   activeCellRef: index["default"].object,
   /**
    * Is the user clicking and holding in the data spreadsheet body
@@ -400,6 +419,7 @@ DataSpreadsheetBody.propTypes = {
   /**
    * Default spreadsheet sizing values
    */
+  /**@ts-ignore */
   defaultColumn: index["default"].shape({
     rowHeight: index["default"].number,
     rowHeaderWidth: index["default"].number,
@@ -501,6 +521,7 @@ DataSpreadsheetBody.propTypes = {
   /**
    * Prop from react-table used to reorder columns
    */
+  /**@ts-ignore */
   visibleColumns: index["default"].array
 };
 

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts

@@ -1,2 +1,89 @@
-export const DataSpreadsheetHeader: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/**
+ * 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.
+ */
+import React, { Dispatch, SetStateAction } from 'react';
+import { ActiveCellCoordinates, Column, ItemType, Size } from './types';
+interface DataSpreadsheetHeaderProps {
+    /**
+     * Object containing the active cell coordinates
+     */
+    activeCellCoordinates?: ActiveCellCoordinates | null;
+    /**
+     * Specifies the cell height
+     */
+    cellSize?: Size;
+    /**
+     * All of the spreadsheet columns
+     */
+    columns?: readonly Column[];
+    /**
+     * uuid that corresponds to the current selection area
+     */
+    currentMatcher?: string;
+    /**
+     * Default spreadsheet sizing values
+     */
+    defaultColumn?: Column;
+    /**
+     * Whether or not a click/hold is active on a header cell
+     */
+    headerCellHoldActive?: boolean;
+    /**
+     * Headers provided from useTable hook
+     */
+    headerGroups?: any[];
+    /**
+     * All of the spreadsheet row data
+     */
+    rows?: object[];
+    /**
+     * The scrollbar width
+     */
+    scrollBarSize?: number;
+    /**
+     * The aria label applied to the Select all button
+     */
+    selectAllAriaLabel: string;
+    /**
+     * All of the cell selection area items
+     */
+    selectionAreas?: ItemType[];
+    /**
+     * Setter fn for activeCellCoordinates value
+     */
+    setActiveCellCoordinates?: Dispatch<SetStateAction<ActiveCellCoordinates | null>>;
+    /**
+     * Setter fn for currentMatcher value
+     */
+    setCurrentMatcher?: Dispatch<SetStateAction<string>>;
+    /**
+     * Setter fn for header cell hold active value
+     */
+    setHeaderCellHoldActive?: (arg: boolean) => void;
+    /**
+     * Setter fn for selectionAreaData state value
+     */
+    setSelectionAreaData?: Dispatch<SetStateAction<object[]>>;
+    /**
+     * Setter fn for selectionAreas value
+     */
+    setSelectionAreas?: Dispatch<SetStateAction<object[]>>;
+    /**
+     * The total number of columns to be initially visible, additional columns will be rendered and
+     * visible via horizontal scrollbar
+     */
+    totalVisibleColumns?: number;
+    /**
+     * Function used to update the active cell coordinates
+     */
+    updateActiveCellCoordinates?: (arg: any) => void;
+    /**
+     * Array of visible columns provided by react-table useTable hook
+     */
+    visibleColumns?: [];
+}
+export declare const DataSpreadsheetHeader: React.ForwardRefExoticComponent<DataSpreadsheetHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export {};