@carbon/ibm-products 1.56.0 → 1.58.0

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -1,29 +1,104 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 // @flow
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import cx from 'classnames';
 import { DataTable } from 'carbon-components-react';
+import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids';
 import { pkg } from '../../../settings';
+import { handleColumnResizeEndEvent, handleColumnResizeStartEvent, handleColumnResizingEvent } from './addons/stateReducer';
+import getColTitle from '../utils/getColTitle';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
+var getAccessibilityProps = function getAccessibilityProps(header) {
+  var props = {};
+  var title = getColTitle(header);
+  if (title) {
+    props.title = title;
+  } else {
+    props['aria-hidden'] = true;
+  }
+  return props;
+};
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
+  // Used to measure the height of the table and uses that value
+  // to display a vertical line to indicate the column you are resizing
+  useEffect(function () {
+    var tableId = datagridState.tableId;
+    if (tableId) {
+      var gridElement = document.querySelector("#".concat(tableId));
+      var tableElement = gridElement.querySelector('table');
+      var headerRowElement = document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head"));
+      var hasHorizontalScrollbar = tableElement.scrollWidth > tableElement.clientWidth;
+      var scrollBuffer = hasHorizontalScrollbar ? 18 : 2;
+      var tableToolbar = gridElement.querySelector(".".concat(blockClass, "__table-toolbar"));
+      var tableToolbarHeight = (tableToolbar === null || tableToolbar === void 0 ? void 0 : tableToolbar.offsetHeight) || 0;
+      var setCustomValues = function setCustomValues(_ref) {
+        var _ref$rowHeight = _ref.rowHeight,
+          rowHeight = _ref$rowHeight === void 0 ? 48 : _ref$rowHeight,
+          gridHeight = _ref.gridHeight;
+        headerRowElement.style.setProperty("--".concat(blockClass, "--row-height"), px(rowHeight));
+        headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), px(gridHeight - scrollBuffer - tableToolbarHeight));
+        headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), px(headerRowElement.offsetHeight));
+      };
+      setCustomValues({
+        gridHeight: gridElement.offsetHeight,
+        rowHeight: headerRowElement.clientHeight
+      });
+    }
+  }, [datagridState.rowSize, datagridState.tableId, datagridState]);
+  var _useState = useState(2),
+    _useState2 = _slicedToArray(_useState, 1),
+    incrementAmount = _useState2[0];
+  var getClientXPosition = function getClientXPosition(event) {
+    var isTouchEvent = false;
+    if (event.type === 'touchstart') {
+      // Do not respond to multiple touches (e.g. 2 or 3 fingers)
+      if (event.touches && event.touches.length > 1) {
+        return;
+      }
+      isTouchEvent = true;
+    }
+    var clientX = isTouchEvent ? Math.round(event.touches[0].clientX) : event.clientX;
+    var closestHeader = event.target.closest('th');
+    var closestHeaderCoords = closestHeader.getBoundingClientRect();
+    var headerOffset = closestHeaderCoords.left;
+    var offsetValue = clientX - headerOffset;
+    return offsetValue;
+  };
+  useEffect(function () {
+    var isResizing = datagridState.state.isResizing;
+    if (isResizing) {
+      var onColResizeEnd = datagridState.onColResizeEnd;
+      document.addEventListener('mouseup', function () {
+        handleColumnResizeEndEvent(datagridState.dispatch, onColResizeEnd, isResizing);
+        document.activeElement.blur();
+      });
+    }
+    return function () {
+      document.removeEventListener('mouseup', function () {
+        return handleColumnResizeEndEvent(datagridState.dispatch);
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [datagridState.state.isResizing]);
   return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroup.getHeaderGroupProps({
     role: false
   }), {
     className: cx("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
     ref: headRef
-  }), datagridState.headers.filter(function (_ref) {
-    var isVisible = _ref.isVisible;
+  }), datagridState.headers.filter(function (_ref2) {
+    var isVisible = _ref2.isVisible;
     return isVisible;
-  }).map(function (header) {
+  }).map(function (header, index) {
     var _cx;
     if (header.id === selectionColumnId) {
       // render directly without the wrapper TableHeader
@@ -31,13 +106,59 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
         key: header.id
       });
     }
+    var _ref3 = header || 50,
+      minWidth = _ref3.minWidth;
+    var visibleColumns = datagridState.visibleColumns,
+      state = datagridState.state,
+      dispatch = datagridState.dispatch,
+      onColResizeEnd = datagridState.onColResizeEnd;
+    var columnResizing = state.columnResizing,
+      isResizing = state.isResizing;
+    var columnWidths = columnResizing.columnWidths;
+    var originalCol = visibleColumns[index];
     return /*#__PURE__*/React.createElement(TableHeader, _extends({}, header.getHeaderProps({
       role: false
     }), {
       className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), _defineProperty(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable), _defineProperty(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
       key: header.id
-    }), header.render('Header'), header.getResizerProps && /*#__PURE__*/React.createElement("div", _extends({}, header.getResizerProps(), {
-      className: "".concat(blockClass, "__resizer")
+    }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, header.getResizerProps(), {
+      onMouseMove: function onMouseMove(event) {
+        if (isResizing) {
+          var newWidth = getClientXPosition(event);
+          // Sets a min width for resizing so at least one character from the column header is visible
+          if (newWidth >= 50) {
+            handleColumnResizingEvent(dispatch, header, newWidth);
+          }
+        }
+      },
+      onMouseDown: function onMouseDown() {
+        return handleColumnResizeStartEvent(dispatch, header.id);
+      },
+      onKeyDown: function onKeyDown(event) {
+        var key = event.key;
+        if (key === 'ArrowLeft' || key === 'ArrowRight') {
+          var currentColumnWidth = columnWidths[header.id] || (datagridState.isTableSortable && originalCol.width < 90 ? 90 : originalCol.width);
+          if (key === 'ArrowLeft') {
+            if (currentColumnWidth - incrementAmount > Math.max(minWidth, 50)) {
+              var newWidth = currentColumnWidth - incrementAmount;
+              handleColumnResizingEvent(dispatch, header, newWidth, true);
+            }
+          }
+          if (key === 'ArrowRight') {
+            var _newWidth = currentColumnWidth + incrementAmount;
+            handleColumnResizingEvent(dispatch, header, _newWidth, true);
+          }
+        }
+      },
+      onKeyUp: function onKeyUp() {
+        return handleColumnResizeEndEvent(dispatch, onColResizeEnd, header.id);
+      },
+      className: cx("".concat(blockClass, "__col-resizer-range")),
+      type: "range",
+      defaultValue: originalCol.width,
+      "aria-label": "Resize column"
+    })), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(blockClass, "__col-resize-indicator")
     })));
   }));
 };

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -11,6 +11,7 @@ import { Checkbox } from 'carbon-components-react';
 import { isColumnVisible } from './common';
 import DraggableElement from '../../DraggableElement';
 import { pkg } from '../../../../../settings';
+import getColTitle from '../../../utils/getColTitle';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var DraggableItemsList = function DraggableItemsList(_ref) {
   var columns = _ref.columns,
@@ -22,29 +23,6 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
     setAriaRegionText = _ref.setAriaRegionText,
     setColumnsObject = _ref.setColumnsObject,
     setFocusIndex = _ref.setFocusIndex;
-  // This function recursively looks for the nested header element until we can find the key which contains the title.
-  // This can happen if multiple hooks are used together that manipulate the rendering of the column
-  // header, such as `useColumnCenterAlign` and `useSortableColumns`.
-  var getNestedTitle = function getNestedTitle(component) {
-    if (component && !component.key) {
-      return getNestedTitle(component.children);
-    }
-    if (component && component.key && typeof component.key === 'string') {
-      return component.key;
-    }
-  };
-  var getColTitle = function getColTitle(col) {
-    if (!col) {
-      return;
-    }
-    var checkTitle = function checkTitle() {
-      if (col.Header().props.children.props && col.Header().props.children.props.title) {
-        return col.Header().props.children.props.title;
-      }
-      return getNestedTitle(col.Header().props.children.props);
-    };
-    return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col.Header.props.title;
-  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, columns
   // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {

package/es/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -0,0 +1,111 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var COLUMN_RESIZE_START = 'columnStartResizing';
+var COLUMN_RESIZING = 'columnResizing';
+var COLUMN_RESIZE_END = 'columnDoneResizing';
+var INIT = 'init';
+export var handleColumnResizeStartEvent = function handleColumnResizeStartEvent(dispatch, headerId) {
+  dispatch({
+    type: COLUMN_RESIZE_START,
+    payload: {
+      headerId: headerId
+    }
+  });
+};
+export var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId) {
+  dispatch({
+    type: COLUMN_RESIZE_END,
+    payload: {
+      onColResizeEnd: onColResizeEnd,
+      headerId: headerId
+    }
+  });
+};
+export var handleColumnResizingEvent = function handleColumnResizingEvent(dispatch, header, newWidth, isKeyEvent) {
+  if (isKeyEvent) {
+    dispatch({
+      type: COLUMN_RESIZE_START,
+      payload: {
+        newWidth: newWidth,
+        headerId: header.id,
+        defaultWidth: header.originalWidth
+      }
+    });
+  }
+  dispatch({
+    type: COLUMN_RESIZING,
+    payload: {
+      newWidth: newWidth,
+      headerId: header.id,
+      defaultWidth: header.originalWidth
+    }
+  });
+};
+export var stateReducer = function stateReducer(newState, action) {
+  switch (action.type) {
+    case INIT:
+      {
+        return _objectSpread(_objectSpread({}, newState), {}, {
+          isResizing: false
+        });
+      }
+    case COLUMN_RESIZE_START:
+      {
+        var headerId = action.payload.headerId;
+        return _objectSpread(_objectSpread({}, newState), {}, {
+          isResizing: headerId
+        });
+      }
+    case COLUMN_RESIZING:
+      {
+        var _ref = action.payload || {},
+          _headerId = _ref.headerId,
+          newWidth = _ref.newWidth,
+          defaultWidth = _ref.defaultWidth;
+        var newColumnWidth = {};
+        if (typeof _headerId === 'undefined') {
+          return _objectSpread({}, newState);
+        }
+        newColumnWidth[_headerId] = newWidth;
+        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 2),
+            _ = _ref3[0],
+            value = _ref3[1];
+          return !isNaN(value);
+        }));
+        return _objectSpread(_objectSpread({}, newState), {}, {
+          isResizing: _headerId,
+          columnResizing: _objectSpread(_objectSpread({}, newState.columnResizing), {}, {
+            columnWidth: defaultWidth,
+            columnWidths: _objectSpread(_objectSpread({}, cleanedWidths), newColumnWidth),
+            headerIdWidths: [_headerId, newWidth]
+          })
+        });
+      }
+    case COLUMN_RESIZE_END:
+      {
+        var _action$payload = action.payload,
+          onColResizeEnd = _action$payload.onColResizeEnd,
+          _headerId2 = _action$payload.headerId;
+        var currentColumn = {};
+        currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
+        var allChangedColumns = newState.columnResizing.columnWidths;
+        var isResizing = newState.isResizing;
+        if (isResizing) {
+          onColResizeEnd === null || onColResizeEnd === void 0 ? void 0 : onColResizeEnd(currentColumn, allChangedColumns);
+        }
+        return _objectSpread(_objectSpread({}, newState), {}, {
+          isResizing: false
+        });
+      }
+  }
+};

package/es/components/Datagrid/useDatagrid.js

@@ -19,6 +19,7 @@ import useRowSize from './useRowSize';
 import useHeaderRow from './Datagrid/DatagridHeaderRow';
 import useFlexResize from './useFlexResize';
 import useFloatingScroll from './useFloatingScroll';
+import { stateReducer } from './Datagrid/addons/stateReducer';
 var useDatagrid = function useDatagrid(params) {
   var defaultPlugins = [useFlexLayout, useHeaderRow, useSkeletonRows, useResizeColumns, useRowRenderer, useDefaultStringRenderer, useRowSize, useFilters, useGlobalFilter, useSortBy, useExpanded];
   var defaultEndPlugins = [usePagination, useRowSelect, useFlexResize, useFloatingScroll];
@@ -29,9 +30,11 @@ var useDatagrid = function useDatagrid(params) {
   for (var _len = arguments.length, plugins = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     plugins[_key - 1] = arguments[_key];
   }
-  var tableState = useTable.apply(void 0, [_objectSpread({
+  var tableState = useTable.apply(void 0, [_objectSpread(_objectSpread({
     tableId: tableId
-  }, params)].concat(defaultPlugins, plugins, defaultEndPlugins, _toConsumableArray(clientEndPlugins)));
+  }, params), {}, {
+    stateReducer: stateReducer
+  })].concat(defaultPlugins, plugins, defaultEndPlugins, _toConsumableArray(clientEndPlugins)));
   return tableState;
 };
 export default useDatagrid;

package/es/components/Datagrid/utils/getColTitle.js

@@ -0,0 +1,25 @@
+// This function recursively looks for the nested header element until we can find the key which contains the title.
+// This can happen if multiple hooks are used together that manipulate the rendering of the column
+// header, such as `useColumnCenterAlign` and `useSortableColumns`.
+var getNestedTitle = function getNestedTitle(component) {
+  if (component && !component.key) {
+    return getNestedTitle(component.children);
+  }
+  if (component && component.key && typeof component.key === 'string') {
+    return component.key;
+  }
+};
+var getColTitle = function getColTitle(col) {
+  var _col$Header, _col$Header$props;
+  if (!col) {
+    return;
+  }
+  var checkTitle = function checkTitle() {
+    if (col.Header().props.children.props && col.Header().props.children.props.title) {
+      return col.Header().props.children.props.title;
+    }
+    return getNestedTitle(col.Header().props.children.props);
+  };
+  return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col === null || col === void 0 ? void 0 : (_col$Header = col.Header) === null || _col$Header === void 0 ? void 0 : (_col$Header$props = _col$Header.props) === null || _col$Header$props === void 0 ? void 0 : _col$Header$props.title;
+};
+export default getColTitle;

package/es/components/NonLinearReading/NonLinearReading.js

@@ -9,11 +9,12 @@ var _excluded = ["children", "className", "definition", "theme"];
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { ChevronDown16 } from '@carbon/icons-react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import uuidv4 from '../../global/js/utils/uuidv4';
 import { pkg } from '../../settings';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -41,6 +42,7 @@ export var NonLinearReading = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setOpen = _useState2[1];
+  var contentId = useRef(uuidv4()).current;
   var handleToggle = function handleToggle() {
     setOpen(function (prevState) {
       return !prevState;
@@ -52,12 +54,15 @@ export var NonLinearReading = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     role: "main"
   }, getDevtoolsProps(componentName)), ' ', /*#__PURE__*/React.createElement("button", {
     type: "button",
+    "aria-controls": contentId,
     "aria-expanded": isOpen,
     className: cx("".concat(blockClass, "__keyword"), [isOpen ? ["".concat(blockClass, "__keyword-open")] : ["".concat(blockClass, "__keyword-closed")]]),
     onClick: handleToggle
-  }, children, /*#__PURE__*/React.createElement(ChevronDown16, null)), ' ', isOpen && /*#__PURE__*/React.createElement("span", {
-    className: "".concat(blockClass, "__body")
-  }, definition), ' ');
+  }, children, /*#__PURE__*/React.createElement(ChevronDown16, null)), ' ', /*#__PURE__*/React.createElement("span", {
+    id: contentId,
+    className: "".concat(blockClass, "__body"),
+    hidden: !isOpen
+  }, isOpen && definition), ' ');
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/es/components/index.js

@@ -53,4 +53,5 @@ export { CoachmarkButton } from './CoachmarkButton';
 export { CoachmarkOverlayElements } from './CoachmarkOverlayElements';
 export { CoachmarkOverlayElement } from './CoachmarkOverlayElement';
 export { CoachmarkStack } from './CoachmarkStack';
-export { InlineTip } from './InlineTip';
+export { InlineTip } from './InlineTip';
+export { Checklist } from './Checklist';

package/es/global/js/hooks/useResizeObserver.js

@@ -7,22 +7,38 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 import { useRef, useState, useLayoutEffect, useEffect } from 'react';
 export var useResizeObserver = function useResizeObserver(ref, callback) {
-  var _useState = useState(0),
+  var _useState = useState(-1),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
     setWidth = _useState2[1];
-  var _useState3 = useState(0),
+  var _useState3 = useState(-1),
     _useState4 = _slicedToArray(_useState3, 2),
     height = _useState4[0],
     setHeight = _useState4[1];
   var entriesToHandle = useRef(null);
   var cb = useRef(callback);
   useEffect(function () {
-    // ref for callback removes it as dependency fro useLayoutEffect
+    // ref for callback removes it as dependency from useLayoutEffect
     // This significantly reduces repeated calls if a function is redefined on every
     // render
     cb.current = callback;
   }, [callback]);
+  useEffect(function () {
+    var getInitialSize = function getInitialSize() {
+      if (ref.current) {
+        var _ref$current, _ref$current2;
+        var refComputedStyle = window.getComputedStyle(ref.current);
+        var initialWidth = (((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) || 0) - (parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingLeft) || 0), parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingRight) || 0));
+        var initialHeight = (((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.offsetHeight) || 0) - (parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingTop) || 0), parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingLeft) || 0));
+        setWidth(initialWidth);
+        setHeight(initialHeight);
+      }
+    };
+    if (!(ref !== null && ref !== void 0 && ref.current) || width >= 0 && height >= 0) {
+      return;
+    }
+    getInitialSize();
+  }, [width, height, ref]);
   useLayoutEffect(function () {
     if (!(ref !== null && ref !== void 0 && ref.current)) {
       return;

package/es/global/js/package-settings.js

@@ -75,6 +75,7 @@ var defaults = {
     InlineTip: false,
     Guidebanner: false,
     NonLinearReading: false,
+    Checklist: false,
     Coachmark: false,
     CoachmarkBeacon: false,
     CoachmarkButton: false,