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

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -0,0 +1,254 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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 { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useContext, useRef, useEffect } from 'react';
+import { usePrefix, TableContainer, Table } from '@carbon/react';
+import { pkg } from '../../../settings.js';
+import { CLEAR_FILTERS, CLEAR_SINGLE_FILTER } from './addons/Filtering/constants.js';
+import DatagridBody from './DatagridBody.js';
+import DatagridHead from './DatagridHead.js';
+import DatagridToolbar from './DatagridToolbar.js';
+import FilterSummary from '../../FilterSummary/FilterSummary.js';
+import PropTypes from '../../../_virtual/index.js';
+import cx from 'classnames';
+import { handleGridFocus } from './addons/InlineEdit/handleGridFocus.js';
+import { handleGridKeyPress } from './addons/InlineEdit/handleGridKeyPress.js';
+import { px } from '@carbon/layout';
+import { FilterContext, clearSingleFilter } from './addons/Filtering/FilterProvider.js';
+import { useFeatureFlag } from '../../FeatureFlags/index.js';
+import { InlineEditContext } from './addons/InlineEdit/InlineEditContext/InlineEditContext.js';
+import { useClickOutside } from '../../../global/js/hooks/useClickOutside.js';
+import { useMultipleKeyTracking } from '../../DataSpreadsheet/hooks/useMultipleKeyTracking.js';
+import useSubscribeToEventEmitter from './addons/Filtering/hooks/useSubscribeToEventEmitter.js';
+import FilterPanel from './addons/Filtering/FilterPanel.js';
+
+const blockClass = `${pkg.prefix}--datagrid`;
+const gcClass = `${blockClass}__grid-container`;
+const DatagridContent = _ref => {
+  let {
+    datagridState,
+    ariaToolbarLabel,
+    title
+  } = _ref;
+  const {
+    state: inlineEditState,
+    dispatch
+  } = useContext(InlineEditContext);
+  const {
+    filterTags,
+    EventEmitter,
+    panelOpen,
+    tableId: contextTableId
+  } = useContext(FilterContext);
+  const {
+    activeCellId,
+    gridActive,
+    editId,
+    featureFlags
+  } = inlineEditState;
+  const {
+    getTableProps,
+    getFilterFlyoutProps,
+    withVirtualScroll,
+    DatagridPagination,
+    isFetching,
+    CustomizeColumnsTearsheet,
+    filterProps,
+    fullHeightDatagrid,
+    verticalAlign = 'center',
+    variableRowHeight,
+    gridTitle,
+    gridDescription,
+    useDenseHeader,
+    withInlineEdit,
+    tableId,
+    DatagridActions,
+    totalColumnsWidth,
+    gridRef,
+    setAllFilters,
+    state,
+    page,
+    rows
+  } = datagridState;
+  const {
+    columnResizing
+  } = state;
+  const contentRows = DatagridPagination && page || rows;
+  const gridAreaRef = useRef(null);
+  const multiKeyTrackingRef = useRef(null);
+  const carbonPrefix = usePrefix();
+  const enableEditableCell = useFeatureFlag('enable-datagrid-useEditableCell');
+  const enableInlineEdit = useFeatureFlag('enable-datagrid-useInlineEdit');
+  const enableCustomizeCols = useFeatureFlag('enable-datagrid-useCustomizeColumns');
+  useEffect(() => {
+    dispatch({
+      type: 'SET_FEATURE_FLAGS',
+      payload: {
+        'enable-datagrid-useEditableCell': enableEditableCell,
+        'enable-datagrid-useInlineEdit': enableInlineEdit,
+        'enable-datagrid-useCustomizeColumns': enableCustomizeCols
+      }
+    });
+  }, [dispatch, enableEditableCell, enableCustomizeCols, enableInlineEdit]);
+  useEffect(() => {
+    if (featureFlags && (featureFlags?.['enable-datagrid-useEditableCell'] || featureFlags?.['enable-datagrid-useInlineEdit'])) {
+      console.error(`Datagrid useEditableCell/useInlineEdit extension has not been enabled via feature flag.`);
+    }
+  }, [featureFlags]);
+  useClickOutside(gridAreaRef, target => {
+    if (!withInlineEdit) {
+      return;
+    }
+    // We return from here if we find a parent element with the selector below
+    // because that element was initially part of the grid area but was removed
+    // and swapped out with an input, i.e. text, number, selection, or date picker
+    if (target.closest(`.${blockClass}__inline-edit-button`) || target.closest(`.${blockClass}__inline-edit--select`)) {
+      return;
+    }
+    dispatch({
+      type: 'REMOVE_GRID_ACTIVE_FOCUS',
+      payload: activeCellId
+    });
+  });
+  const renderTable = () => {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Table, _extends({}, getTableProps?.(), {
+      className: cx(withVirtualScroll ? `${blockClass}__table-virtual-scroll` : `${blockClass}__table-simple`, `${blockClass}__vertical-align-${verticalAlign}`, {
+        [`${blockClass}__variable-row-height`]: variableRowHeight
+      }, {
+        [`${blockClass}__table-with-inline-edit`]: withInlineEdit
+      }, {
+        [`${blockClass}__table-grid-active`]: gridActive
+      }, {
+        [`${blockClass}__table-is-resizing`]: typeof columnResizing?.isResizingColumn === 'string'
+      }, getTableProps?.().className),
+      role: withInlineEdit ? 'grid' : undefined,
+      tabIndex: withInlineEdit ? 0 : -1,
+      onKeyDown: withInlineEdit && (event => handleGridKeyPress({
+        event,
+        dispatch,
+        instance: datagridState,
+        keysPressedList,
+        state: inlineEditState,
+        usingMac,
+        ref: multiKeyTrackingRef,
+        carbonPrefix
+      })),
+      onFocus: withInlineEdit && (() => handleGridFocus(inlineEditState, dispatch)),
+      title
+    }), (!withVirtualScroll || withVirtualScroll && !isFetching && !contentRows.length) && /*#__PURE__*/React__default.createElement(DatagridHead, datagridState), /*#__PURE__*/React__default.createElement(DatagridBody, _extends({}, datagridState, {
+      rows: contentRows
+    }))), filterProps?.variation === 'panel' && renderPagination());
+  };
+  const {
+    keysPressedList,
+    usingMac
+  } = useMultipleKeyTracking({
+    ref: withInlineEdit ? multiKeyTrackingRef : null,
+    containerHasFocus: gridActive,
+    isEditing: !!editId
+  });
+
+  // Provides a width for the region outline for useInlineEdit
+  useEffect(() => {
+    if (!withInlineEdit) {
+      return;
+    }
+    const gridElement = document.querySelector(`#${tableId}`);
+    const tableHeader = gridElement?.querySelector(`.${carbonPrefix}--data-table-header`);
+    gridElement?.style?.setProperty(`--${blockClass}--grid-width`, px((totalColumnsWidth || 0) + 32));
+    if (gridActive) {
+      gridElement?.style.setProperty(`--${blockClass}--grid-header-height`, px(tableHeader?.clientHeight || 0));
+    }
+  }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive, carbonPrefix]);
+  useSubscribeToEventEmitter(CLEAR_SINGLE_FILTER, id => clearSingleFilter(id, setAllFilters, state, contextTableId));
+  const renderFilterSummary = () => state.filters.length > 0 && /*#__PURE__*/React__default.createElement(FilterSummary, {
+    className: `${blockClass}__filter-summary`,
+    filters: filterTags,
+    clearFilters: () => {
+      EventEmitter.dispatch(CLEAR_FILTERS, tableId);
+      if (typeof filterProps?.onClearFilters === 'function') {
+        filterProps.onClearFilters();
+      }
+    },
+    renderLabel: filterProps?.renderLabel,
+    overflowType: "tag"
+  });
+  const renderPagination = () => {
+    if (contentRows?.length > 0 && !isFetching && DatagridPagination) {
+      return /*#__PURE__*/React__default.createElement(DatagridPagination, datagridState);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TableContainer, {
+    className: cx(`${gcClass}`, {
+      [`${gcClass}-active`]: gridActive,
+      [`${gcClass}-active--without-toolbar`]: withInlineEdit && !DatagridActions,
+      [`${gcClass}-inline-edit`]: withInlineEdit,
+      [`${blockClass}__full-height`]: withVirtualScroll || fullHeightDatagrid,
+      [`${blockClass}__with-pagination`]: DatagridPagination,
+      [`${blockClass}__dense-header`]: useDenseHeader
+    }),
+    title: gridTitle,
+    description: gridDescription
+  }, /*#__PURE__*/React__default.createElement(DatagridToolbar, _extends({}, datagridState, {
+    ariaToolbarLabel: ariaToolbarLabel
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: cx(`${blockClass}__table-container`, {
+      [`${blockClass}__table-container--filter-open`]: panelOpen
+    }),
+    ref: gridAreaRef
+  }, filterProps?.variation === 'panel' && /*#__PURE__*/React__default.createElement(FilterPanel, _extends({
+    updateMethod: undefined,
+    setAllFilters: undefined
+  }, getFilterFlyoutProps?.(), {
+    title: filterProps.panelTitle,
+    filterSections: filterProps.sections,
+    autoHideFilters: filterProps.autoHideFilters,
+    isFetching: isFetching
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__table-container-inner`
+  }, renderFilterSummary(), withInlineEdit ? /*#__PURE__*/React__default.createElement("div", {
+    ref: multiKeyTrackingRef
+  }, renderTable()) : withVirtualScroll ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__virtualScrollContainer`,
+    ref: gridRef
+  }, renderTable()) : renderTable()))), filterProps?.variation !== 'panel' && renderPagination(), CustomizeColumnsTearsheet && /*#__PURE__*/React__default.createElement(CustomizeColumnsTearsheet, {
+    instance: datagridState
+  }));
+};
+DatagridContent.propTypes = {
+  ariaToolbarLabel: PropTypes.string,
+  datagridState: PropTypes.shape({
+    getTableProps: PropTypes.func,
+    getFilterFlyoutProps: PropTypes.func,
+    withVirtualScroll: PropTypes.bool,
+    DatagridActions: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    DatagridPagination: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    CustomizeColumnsTearsheet: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    isFetching: PropTypes.bool,
+    skeletonRowCount: PropTypes.number,
+    fullHeightDatagrid: PropTypes.bool,
+    filterProps: PropTypes.object,
+    variableRowHeight: PropTypes.bool,
+    useDenseHeader: PropTypes.bool,
+    withInlineEdit: PropTypes.bool,
+    verticalAlign: PropTypes.string,
+    gridTitle: PropTypes.node,
+    gridDescription: PropTypes.node,
+    page: PropTypes.arrayOf(PropTypes.object),
+    rows: PropTypes.arrayOf(PropTypes.object),
+    tableId: PropTypes.string,
+    totalColumnsWidth: PropTypes.number,
+    gridRef: PropTypes.object,
+    setAllFilters: PropTypes.func,
+    getFilterProps: PropTypes.func,
+    state: PropTypes.object
+  }),
+  title: PropTypes.string
+};
+
+export { DatagridContent };

package/es/components/Datagrid/Datagrid/DatagridEmptyBody.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+import React from 'react';
+import { DataGridState } from '../types';
+declare const DatagridEmptyBody: (datagridState: DataGridState) => React.JSX.Element;
+export default DatagridEmptyBody;

package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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 { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { pkg } from '../../../settings.js';
+import { TableBody, TableRow, TableCell } from '@carbon/react';
+import { EmptyState } from '../../EmptyStates/EmptyState.js';
+import '../../EmptyStates/EmptyStateV2.deprecated.js';
+import { ErrorEmptyState } from '../../EmptyStates/ErrorEmptyState/ErrorEmptyState.js';
+import { NoDataEmptyState } from '../../EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
+import '../../EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js';
+import { NotFoundEmptyState } from '../../EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js';
+import '../../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js';
+import '../../EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js';
+
+const blockClass = `${pkg.prefix}--datagrid`;
+const DatagridEmptyBody = datagridState => {
+  const {
+    getTableBodyProps,
+    headers,
+    emptyStateTitle,
+    emptyStateDescription,
+    emptyStateSize,
+    emptyStateType = 'noData',
+    illustrationTheme,
+    emptyStateAction,
+    emptyStateLink
+  } = datagridState;
+  const emptyStateProps = {
+    illustrationTheme,
+    size: emptyStateSize,
+    title: emptyStateTitle,
+    subtitle: emptyStateDescription,
+    action: emptyStateAction,
+    link: emptyStateLink
+  };
+  const validEmptyStates = ['error', 'noData', 'notFound'];
+  return /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps({
+    role: undefined
+  }), {
+    "aria-live": "off",
+    className: `${blockClass}__empty-state-body`
+  }), /*#__PURE__*/React__default.createElement(TableRow, null, /*#__PURE__*/React__default.createElement(TableCell, {
+    colSpan: headers?.length,
+    className: `${blockClass}__empty-state-cell`
+  }, validEmptyStates.includes(emptyStateType) ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, emptyStateType === 'error' && /*#__PURE__*/React__default.createElement(ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/React__default.createElement(NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/React__default.createElement(NotFoundEmptyState, emptyStateProps)) : /*#__PURE__*/React__default.createElement(EmptyState, emptyStateProps))));
+};
+
+export { DatagridEmptyBody as default };

package/es/components/Datagrid/Datagrid/DatagridExpandedRow.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+import React, { JSXElementConstructor } from 'react';
+import { DataGridState } from '../types';
+declare const DatagridExpandedRow: (ExpandedRowContentComponent: JSXElementConstructor<any>) => (datagridState: DataGridState) => React.JSX.Element;
+export default DatagridExpandedRow;

package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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 { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { isValidElement } from 'react';
+import { pkg } from '../../../settings.js';
+import cx from 'classnames';
+
+const blockClass = `${pkg.prefix}--datagrid`;
+const DatagridExpandedRow = ExpandedRowContentComponent => datagridState => {
+  const {
+    row
+  } = datagridState;
+  const {
+    expandedContentHeight
+  } = row;
+  const toggleParentHoverClass = function (event) {
+    let eventType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    /* istanbul ignore else */
+    if (event?.target?.closest('tr').previousElementSibling) {
+      const parentNode = event?.target?.closest('tr').previousElementSibling;
+      if (eventType === 'enter') {
+        parentNode.classList.add(`${blockClass}__expandable-row--hover`);
+      } else {
+        parentNode.classList.remove(`${blockClass}__expandable-row--hover`);
+      }
+    }
+  };
+  const {
+    key,
+    ..._state
+  } = datagridState;
+  return /*#__PURE__*/React__default.createElement("tr", {
+    className: cx(`${blockClass}__expanded-row`, {
+      [`${blockClass}__slug--row`]: /*#__PURE__*/isValidElement(row?.original?.slug),
+      [`${blockClass}__ai-label--row`]: /*#__PURE__*/isValidElement(row?.original?.aiLabel)
+    }),
+    onMouseEnter: event => toggleParentHoverClass(event, 'enter'),
+    onMouseLeave: event => toggleParentHoverClass(event)
+  }, /*#__PURE__*/React__default.createElement("td", {
+    className: `${blockClass}__expanded-row-cell-wrapper`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__expanded-row-content`,
+    ref: el => {
+      if (el && el.style && expandedContentHeight) {
+        el.style.height = `${expandedContentHeight}px`;
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(ExpandedRowContentComponent, _extends({
+    key: key
+  }, _state)))));
+};
+
+export { DatagridExpandedRow as default };

package/es/components/Datagrid/Datagrid/DatagridHead.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2020, 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 from 'react';
+import { DataGridState } from '../types';
+declare const DatagridHead: (datagridState: DataGridState) => React.JSX.Element;
+export default DatagridHead;

package/es/components/Datagrid/Datagrid/DatagridHead.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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__default from 'react';
+import { TableHead } from '@carbon/react';
+
+const DatagridHead = datagridState => {
+  const {
+    headerGroups = [],
+    headRef,
+    HeaderRow
+  } = datagridState;
+  return /*#__PURE__*/React__default.createElement(TableHead, null, headerGroups.map(headerGroup =>
+  // doesn't support header grouping.
+  HeaderRow?.(datagridState, headRef, headerGroup)));
+};
+
+export { DatagridHead as default };

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+import { DatagridTableHooks } from '../types';
+declare const useHeaderRow: (hooks: DatagridTableHooks) => void;
+export default useHeaderRow;