@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -22,129 +22,162 @@ var DatagridAiLabel = require('./addons/AiLabel/DatagridAiLabel.js');
 var useInitialColumnSort = require('../useInitialColumnSort.js');
 
 var _th;
-var _excluded = ["className"],
-  _excluded2 = ["key"];
-var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
-var getAccessibilityProps = function getAccessibilityProps(header) {
-  var props = {};
-  var content = getNodeTextContent.getNodeTextContent(header.Header);
+const blockClass = `${settings.pkg.prefix}--datagrid`;
+const getAccessibilityProps = header => {
+  const props = {};
+  const content = getNodeTextContent.getNodeTextContent(header.Header);
   if (!content) {
     props['aria-hidden'] = true;
   }
   return props;
 };
-var ResizeHeader = function ResizeHeader(_ref) {
-  var resizerProps = _ref.resizerProps,
-    header = _ref.header,
-    handleOnMouseDownResize = _ref.handleOnMouseDownResize,
-    originalCol = _ref.originalCol,
-    columnWidths = _ref.columnWidths,
-    datagridState = _ref.datagridState,
-    incrementAmount = _ref.incrementAmount,
-    minWidth = _ref.minWidth,
-    dispatch = _ref.dispatch,
-    onColResizeEnd = _ref.onColResizeEnd,
-    resizerAriaLabel = _ref.resizerAriaLabel,
-    isFetching = _ref.isFetching;
-  var headerProps = _rollupPluginBabelHelpers.extends({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(resizerProps), resizerProps));
-  var mouseDownHandler = function mouseDownHandler(evt) {
-    handleOnMouseDownResize === null || handleOnMouseDownResize === void 0 || handleOnMouseDownResize(evt, resizerProps);
+const ResizeHeader = _ref => {
+  let {
+    resizerProps,
+    header,
+    handleOnMouseDownResize,
+    originalCol,
+    columnWidths,
+    datagridState,
+    incrementAmount,
+    minWidth,
+    dispatch,
+    onColResizeEnd,
+    resizerAriaLabel,
+    isFetching
+  } = _ref;
+  const {
+    ...headerProps
+  } = resizerProps;
+  const mouseDownHandler = evt => {
+    handleOnMouseDownResize?.(evt, resizerProps);
   };
-  var mouseUpHandler = function mouseUpHandler() {
-    stateReducer.handleColumnResizeEndEvent(dispatch, onColResizeEnd, header === null || header === void 0 ? void 0 : header.id, true);
+  const mouseUpHandler = () => {
+    stateReducer.handleColumnResizeEndEvent(dispatch, onColResizeEnd, header?.id, true);
   };
-  var keyDownHandler = function keyDownHandler(evt) {
-    var key = evt.key;
+  const keyDownHandler = evt => {
+    const {
+      key
+    } = evt;
     if (key === 'ArrowLeft' || key === 'ArrowRight') {
-      var originalColMinWidth = (originalCol === null || originalCol === void 0 ? void 0 : originalCol.minWidth) || 90;
-      var currentColumnWidth = (header === null || header === void 0 ? void 0 : header.id) && (columnWidths === null || columnWidths === void 0 ? void 0 : columnWidths[header === null || header === void 0 ? void 0 : header.id]) || (datagridState !== null && datagridState !== void 0 && datagridState.isTableSortable && Number(originalCol === null || originalCol === void 0 ? void 0 : originalCol.width) < originalColMinWidth ? originalColMinWidth : originalCol === null || originalCol === void 0 ? void 0 : originalCol.width);
+      const originalColMinWidth = originalCol?.minWidth || 90;
+      const currentColumnWidth = header?.id && columnWidths?.[header?.id] || (datagridState?.isTableSortable && Number(originalCol?.width) < originalColMinWidth ? originalColMinWidth : originalCol?.width);
       if (key === 'ArrowLeft') {
         if (currentColumnWidth - incrementAmount > Math.max(Number(minWidth), 50)) {
-          var newWidth = currentColumnWidth - incrementAmount;
+          const newWidth = currentColumnWidth - incrementAmount;
           stateReducer.handleColumnResizingEvent(dispatch, header, newWidth);
         }
       }
       if (key === 'ArrowRight') {
-        var _newWidth = currentColumnWidth + incrementAmount;
-        stateReducer.handleColumnResizingEvent(dispatch, header, _newWidth);
+        const newWidth = currentColumnWidth + incrementAmount;
+        stateReducer.handleColumnResizingEvent(dispatch, header, newWidth);
       }
     }
   };
-  var keyUpHandler = function keyUpHandler() {
-    stateReducer.handleColumnResizeEndEvent(dispatch, onColResizeEnd, header === null || header === void 0 ? void 0 : header.id, true);
+  const keyUpHandler = () => {
+    stateReducer.handleColumnResizeEndEvent(dispatch, onColResizeEnd, header?.id, true);
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _rollupPluginBabelHelpers.extends({}, headerProps, {
     onMouseDown: mouseDownHandler,
     onMouseUp: mouseUpHandler,
     onKeyDown: keyDownHandler,
     onKeyUp: keyUpHandler,
-    className: "".concat(blockClass, "__col-resizer-range"),
+    className: `${blockClass}__col-resizer-range`,
     type: "range",
-    defaultValue: originalCol === null || originalCol === void 0 ? void 0 : originalCol.width,
+    defaultValue: originalCol?.width,
     "aria-label": resizerAriaLabel || 'Resize column',
     disabled: isFetching
   })), /*#__PURE__*/React.createElement("span", {
     role: "separator",
-    className: "".concat(blockClass, "__col-resize-indicator")
+    className: `${blockClass}__col-resize-indicator`
   }));
 };
-var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
-  var _datagridState$header;
-  var resizerAriaLabel = datagridState.resizerAriaLabel,
-    isTableSortable = datagridState.isTableSortable,
-    rows = datagridState.rows,
-    isFetching = datagridState.isFetching,
-    headers = datagridState.headers;
+const getAriaSortValue = (col, datagridState) => {
+  const {
+    ascendingSortableLabelText,
+    descendingSortableLabelText,
+    defaultSortableLabelText
+  } = datagridState;
+  if (!col) {
+    return;
+  }
+  const {
+    isSorted,
+    isSortedDesc
+  } = col;
+  if (!isSorted) {
+    return defaultSortableLabelText;
+  }
+  if (isSorted && !isSortedDesc) {
+    return ascendingSortableLabelText;
+  }
+  if (isSorted && isSortedDesc) {
+    return descendingSortableLabelText;
+  }
+};
+const HeaderRow = (datagridState, headRef, headerGroup) => {
+  const {
+    resizerAriaLabel,
+    isTableSortable,
+    rows,
+    isFetching,
+    headers
+  } = datagridState;
   useInitialColumnSort.useInitialColumnSort(datagridState);
   // Used to measure the height of the table and uses that value
   // to display a vertical line to indicate the column you are resizing
-  React.useEffect(function () {
-    var tableId = datagridState.tableId;
-    var gridElement = document.querySelector("#".concat(tableId));
-    var tableElement = gridElement === null || gridElement === void 0 ? void 0 : gridElement.querySelector('table');
-    var headerRowElement = document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head"));
-    var scrollBuffer = 2;
+  React.useEffect(() => {
+    const {
+      tableId
+    } = datagridState;
+    const gridElement = document.querySelector(`#${tableId}`);
+    const tableElement = gridElement?.querySelector('table');
+    const headerRowElement = document.querySelector(`#${tableId} .${blockClass}__head`);
+    let scrollBuffer = 2;
     if (tableElement) {
-      var hasHorizontalScrollbar = (tableElement === null || tableElement === void 0 ? void 0 : tableElement.scrollWidth) > (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientWidth);
+      const hasHorizontalScrollbar = tableElement?.scrollWidth > tableElement?.clientWidth;
       if (hasHorizontalScrollbar) {
         scrollBuffer = 18;
       }
     }
-    var tableToolbar = (gridElement === null || gridElement === void 0 ? void 0 : gridElement.querySelector(".".concat(blockClass, "__table-toolbar"))) || null;
-    var tableToolbarHeight = (tableToolbar === null || tableToolbar === void 0 ? void 0 : tableToolbar.offsetHeight) || 0;
-    var setCustomValues = function setCustomValues(_ref2) {
-      var rowHeight = _ref2.rowHeight,
-        gridHeight = _ref2.gridHeight;
-      headerRowElement === null || headerRowElement === void 0 || headerRowElement.style.setProperty("--".concat(blockClass, "--row-height"), layout.px(rowHeight));
-      headerRowElement === null || headerRowElement === void 0 || headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), layout.px(gridHeight - scrollBuffer - tableToolbarHeight));
-      headerRowElement === null || headerRowElement === void 0 || headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), layout.px(headerRowElement.offsetHeight));
+    const tableToolbar = gridElement?.querySelector(`.${blockClass}__table-toolbar`) || null;
+    const tableToolbarHeight = tableToolbar?.offsetHeight || 0;
+    const setCustomValues = _ref2 => {
+      let {
+        rowHeight,
+        gridHeight
+      } = _ref2;
+      headerRowElement?.style.setProperty(`--${blockClass}--row-height`, layout.px(rowHeight));
+      headerRowElement?.style.setProperty(`--${blockClass}--grid-height`, layout.px(gridHeight - scrollBuffer - tableToolbarHeight));
+      headerRowElement?.style.setProperty(`--${blockClass}--header-height`, layout.px(headerRowElement.offsetHeight));
     };
     setCustomValues({
-      gridHeight: gridElement === null || gridElement === void 0 ? void 0 : gridElement.offsetHeight,
-      rowHeight: headerRowElement === null || headerRowElement === void 0 ? void 0 : headerRowElement.clientHeight
+      gridHeight: gridElement?.offsetHeight,
+      rowHeight: headerRowElement?.clientHeight
     });
   }, [datagridState.rowSize, datagridState.tableId, datagridState]);
-  var _useState = React.useState(2),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 1),
-    incrementAmount = _useState2[0];
-  var handleOnMouseDownResize = function handleOnMouseDownResize(event, resizeProps) {
-    var _resizeProps = _rollupPluginBabelHelpers.objectSpread2({}, resizeProps),
-      _resizeProps$onMouseD = _resizeProps.onMouseDown,
-      onMouseDown = _resizeProps$onMouseD === void 0 ? function () {} : _resizeProps$onMouseD;
+  const [incrementAmount] = React.useState(2);
+  const handleOnMouseDownResize = (event, resizeProps) => {
+    const {
+      onMouseDown = () => {}
+    } = {
+      ...resizeProps
+    };
     // When event.button is 2, that is a right click
     // and we do not want to resize
     if (event.button === 2 || event.ctrlKey) {
       event.target.blur();
       return;
     }
-    onMouseDown === null || onMouseDown === void 0 || onMouseDown(event);
+    onMouseDown?.(event);
   };
-  var _headerGroup$getHeade = headerGroup.getHeaderGroupProps({
-      role: undefined
-    }),
-    headerGroupClassName = _headerGroup$getHeade.className,
-    headerGroupProps = _rollupPluginBabelHelpers.objectWithoutProperties(_headerGroup$getHeade, _excluded);
-  var renderAILabel = function renderAILabel(aiLabel) {
+  const {
+    className: headerGroupClassName,
+    ...headerGroupProps
+  } = headerGroup.getHeaderGroupProps({
+    role: undefined
+  });
+  const renderAILabel = aiLabel => {
     if (isTableSortable) {
       return;
     }
@@ -152,54 +185,59 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       aiLabel: aiLabel
     });
   };
-  var foundAIRow = rows.some(function (r) {
-    var _r$original, _r$original2;
-    return /*#__PURE__*/React.isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.aiLabel) || /*#__PURE__*/React.isValidElement(r === null || r === void 0 || (_r$original2 = r.original) === null || _r$original2 === void 0 ? void 0 : _r$original2.slug);
-  });
-  var key = headerGroupProps.key,
-    rowProps = _rollupPluginBabelHelpers.objectWithoutProperties(headerGroupProps, _excluded2);
-  var withActionsColumn = headers ? !!headers.filter(function (header) {
-    return header.isAction;
-  }).length : false;
+  const foundAIRow = rows.some(r => /*#__PURE__*/React.isValidElement(r?.original?.aiLabel) || /*#__PURE__*/React.isValidElement(r?.original?.slug));
+  const {
+    key,
+    ...rowProps
+  } = headerGroupProps;
+  const withActionsColumn = headers ? !!headers.filter(header => header.isAction).length : false;
   return /*#__PURE__*/React.createElement(react.TableRow, _rollupPluginBabelHelpers.extends({
     key: key
   }, rowProps, {
-    className: cx("".concat(blockClass, "__head"), headerGroupClassName),
+    className: cx(`${blockClass}__head`, headerGroupClassName),
     ref: headRef
   }), foundAIRow ? _th || (_th = /*#__PURE__*/React.createElement("th", {
     scope: "col",
     "aria-hidden": "false"
-  })) : null, datagridState === null || datagridState === void 0 || (_datagridState$header = datagridState.headers) === null || _datagridState$header === void 0 || (_datagridState$header = _datagridState$header.filter(function (_ref3) {
-    var isVisible = _ref3.isVisible;
+  })) : null, datagridState?.headers?.filter(_ref3 => {
+    let {
+      isVisible
+    } = _ref3;
     return isVisible;
-  })) === null || _datagridState$header === void 0 ? void 0 : _datagridState$header.map(function (header, index) {
-    var _header$getResizerPro;
+  })?.map((header, index) => {
     if (header.id === commonColumnIds.selectionColumnId) {
       // render directly without the wrapper TableHeader
       return header.render('Header', {
         key: header.id
       });
     }
-    var _ref4 = header || 50,
-      minWidth = _ref4.minWidth;
-    var visibleColumns = datagridState.visibleColumns,
-      state = datagridState.state,
-      dispatch = datagridState.dispatch,
-      onColResizeEnd = datagridState.onColResizeEnd;
-    var columnResizing = state.columnResizing;
-    var _ref5 = columnResizing || {},
-      columnWidths = _ref5.columnWidths;
-    var originalCol = visibleColumns[index];
-    var _header$getHeaderProp = header.getHeaderProps({
-        role: undefined
-      }),
-      headerProps = _rollupPluginBabelHelpers.extends({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_header$getHeaderProp), _header$getHeaderProp));
-    var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header, {
+    const {
+      minWidth
+    } = header || 50;
+    const {
+      visibleColumns,
+      state,
+      dispatch,
+      onColResizeEnd
+    } = datagridState;
+    const {
+      columnResizing
+    } = state;
+    const {
+      columnWidths
+    } = columnResizing || {};
+    const originalCol = visibleColumns[index];
+    const {
+      ...headerProps
+    } = header.getHeaderProps({
+      role: undefined
+    });
+    const resizerProps = header?.getResizerProps?.({
       role: undefined
     });
-    var headerStyle = headerProps === null || headerProps === void 0 ? void 0 : headerProps.style;
-    var lastVisibleIndex = withActionsColumn ? 2 : 1;
-    var isLastVisibleColumn = index === visibleColumns.length - lastVisibleIndex;
+    const headerStyle = headerProps?.style;
+    const lastVisibleIndex = withActionsColumn ? 2 : 1;
+    const isLastVisibleColumn = index === visibleColumns.length - lastVisibleIndex;
     if (headerStyle) {
       Object.assign(headerStyle, {
         flex: isLastVisibleColumn ? '1 1 0' : '0 0 auto',
@@ -207,29 +245,38 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       });
     }
     return /*#__PURE__*/React.createElement(react.TableHeader, _rollupPluginBabelHelpers.extends({}, headerProps, {
-      className: cx(header === null || header === void 0 ? void 0 : header.className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header === null || header === void 0 ? void 0 : header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header === null || header === void 0 ? void 0 : header.isSorted), "".concat(blockClass, "__header-actions-column"), header === null || header === void 0 ? void 0 : header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React.isValidElement(header === null || header === void 0 ? void 0 : header.slug)), "".concat(blockClass, "__with-ai-label"), header.aiLabel && /*#__PURE__*/React.isValidElement(header === null || header === void 0 ? void 0 : header.aiLabel)), headerProps.className),
+      className: cx(header?.className, {
+        [`${blockClass}__resizableColumn`]: resizerProps,
+        [`${blockClass}__isResizing`]: header?.isResizing,
+        [`${blockClass}__sortableColumn`]: datagridState.isTableSortable && header.id !== 'spacer',
+        [`${blockClass}__isSorted`]: header?.isSorted,
+        [`${blockClass}__header-actions-column`]: header?.isAction,
+        [`${blockClass}__with-slug`]: header.slug && /*#__PURE__*/React.isValidElement(header?.slug),
+        [`${blockClass}__with-ai-label`]: header.aiLabel && /*#__PURE__*/React.isValidElement(header?.aiLabel)
+      }, headerProps.className),
       key: header.id,
-      "aria-hidden": header.id === 'spacer' && 'true'
+      "aria-hidden": header.id === 'spacer' && 'true',
+      "aria-sort": header.canSort ? getAriaSortValue(header, datagridState) : ''
     }, getAccessibilityProps(header)), header.render('Header'), renderAILabel(header.aiLabel || header.slug), resizerProps && !header.isAction && /*#__PURE__*/React.createElement(ResizeHeader, {
-      resizerProps: resizerProps,
-      header: header,
-      handleOnMouseDownResize: handleOnMouseDownResize,
-      originalCol: originalCol,
-      columnWidths: columnWidths,
-      datagridState: datagridState,
-      incrementAmount: incrementAmount,
-      minWidth: minWidth,
-      dispatch: dispatch,
-      onColResizeEnd: onColResizeEnd,
-      resizerAriaLabel: resizerAriaLabel,
-      isFetching: isFetching
+      resizerProps,
+      header,
+      handleOnMouseDownResize,
+      originalCol,
+      columnWidths,
+      datagridState,
+      incrementAmount,
+      minWidth,
+      dispatch,
+      onColResizeEnd,
+      resizerAriaLabel,
+      isFetching
     }));
   }));
 };
-var useHeaderRow = function useHeaderRow(hooks) {
-  var useInstance = function useInstance(instance) {
+const useHeaderRow = hooks => {
+  const useInstance = instance => {
     Object.assign(instance, {
-      HeaderRow: HeaderRow
+      HeaderRow
     });
   };
   hooks.useInstance.push(useInstance);

package/lib/components/Datagrid/Datagrid/DatagridRefBody.js

@@ -14,29 +14,32 @@ var React = require('react');
 var cx = require('classnames');
 var settings = require('../../../settings.js');
 
-var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
+const blockClass = `${settings.pkg.prefix}--datagrid`;
 
 // TableBody from carbon is a functional component
 // hence no way to pass the ref to html element without changes in carbon side
 // define html directly here.
 // ref should be passed in thru getTableBodyProps
-var DatagridRefBody = function DatagridRefBody(datagridState) {
-  var getTableBodyProps = datagridState.getTableBodyProps,
-    rows = datagridState.rows,
-    prepareRow = datagridState.prepareRow;
+const DatagridRefBody = datagridState => {
+  const {
+    getTableBodyProps,
+    rows,
+    prepareRow
+  } = datagridState;
   return /*#__PURE__*/React.createElement("tbody", _rollupPluginBabelHelpers.extends({}, getTableBodyProps({
     role: undefined
   }), {
-    className: cx("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
-  }), rows === null || rows === void 0 ? void 0 : rows.map(function (row) {
-    var _row$RowRenderer;
+    className: cx(`${blockClass}__simple-body`, getTableBodyProps().className)
+  }), rows?.map(row => {
     prepareRow(row);
-    var _row$getRowProps = row.getRowProps(),
-      key = _row$getRowProps.key;
-    return row === null || row === void 0 || (_row$RowRenderer = row.RowRenderer) === null || _row$RowRenderer === void 0 ? void 0 : _row$RowRenderer.call(row, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, datagridState), {}, {
-      row: row,
-      key: key
-    }));
+    const {
+      key
+    } = row.getRowProps();
+    return row?.RowRenderer?.({
+      ...datagridState,
+      row,
+      key
+    });
   }));
 };