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

package/es/components/Datagrid/useRowSize.js

@@ -1,58 +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 { useState } from 'react';
-import RowSizeDropdown from './Datagrid/addons/RowSize/RowSizeDropdown.js';
-
-const useRowSize = hooks => {
-  const [internalRowSize, setRowSize] = useState('');
-  hooks.useInstance.push(instance => {
-    const {
-      rowSizeProps,
-      rowSizes,
-      rowSize,
-      onRowSizeChange,
-      tableId
-    } = instance;
-    const {
-      labels
-    } = rowSizeProps || {};
-    Object.assign(instance, {
-      rowSize: internalRowSize || rowSize,
-      rowSizeDropdownProps: {
-        rowSizes,
-        ...labels,
-        selectedOption: internalRowSize || rowSize,
-        onChange: value => {
-          setRowSize(value);
-          if (typeof onRowSizeChange === 'function') {
-            onRowSizeChange(value);
-          }
-        },
-        tableId
-      },
-      RowSizeDropdown
-    });
-  });
-  const getTableProps = (props, _ref) => {
-    let {
-      instance
-    } = _ref;
-    const {
-      rowSize
-    } = instance;
-    if (!rowSize) {
-      return props;
-    }
-    return [props, {
-      size: rowSize
-    }];
-  };
-  hooks.getTableProps.push(getTableProps);
-};
-
-export { useRowSize as default };

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

@@ -1,9 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 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 { Hooks } from 'react-table';
-declare const useSelectAllToggle: (hooks: Hooks) => void;
-export default useSelectAllToggle;

package/es/components/Datagrid/useSelectAllToggle.js

@@ -1,94 +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 React__default, { useState } from 'react';
-import cx from 'classnames';
-import { selectionColumnId } from './common-column-ids.js';
-import SelectAllWithToggle from './Datagrid/DatagridSelectAllWithToggle.js';
-import { pkg } from '../../settings.js';
-import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
-
-const blockClass = `${pkg.prefix}--datagrid__select-all`;
-const useSelectAllToggle = hooks => {
-  useSelectAllWithToggleComponent(hooks);
-  useAddClassNameToSelectRow(hooks);
-};
-const useSelectAllWithToggleComponent = hooks => {
-  const useInstance = instance => {
-    const {
-      headers,
-      DatagridPagination
-    } = instance;
-    const headersWithSelectAllToggle = headers?.map(header => {
-      if (header.id === selectionColumnId && DatagridPagination) {
-        Object.assign(header, {
-          Header
-        });
-      }
-      return header;
-    });
-    Object.assign(instance, {
-      headers: headersWithSelectAllToggle
-    });
-  };
-  hooks.useInstance.push(useInstance);
-};
-const useAddClassNameToSelectRow = hooks => {
-  const [windowSize, setWindowSize] = useState(0);
-  useIsomorphicEffect(() => {
-    setWindowSize(window.innerWidth);
-    function updateSize() {
-      setWindowSize(window.innerWidth);
-    }
-    window.addEventListener('resize', updateSize);
-    return () => window.removeEventListener('resize', updateSize);
-  }, []);
-  hooks.getCellProps.push((props, data) => {
-    const {
-      column
-    } = data.cell;
-    const {
-      DatagridPagination,
-      columns,
-      withStickyColumn
-    } = data.instance;
-    const isFirstColumnStickyLeft = columns[0]?.sticky === 'left' && withStickyColumn;
-    if (column.id === selectionColumnId && DatagridPagination) {
-      return [props, {
-        className: cx(`${blockClass}-toggle-on`, {
-          [`${blockClass}-sticky-left`]: isFirstColumnStickyLeft && windowSize > 671
-        })
-      }];
-    }
-    return [props];
-  });
-};
-const Header = gridState => {
-  const {
-    tableId,
-    isFetching,
-    selectAllToggle,
-    getToggleAllPageRowsSelectedProps,
-    getToggleAllRowsSelectedProps,
-    isAllRowsSelected,
-    withStickyColumn,
-    columns
-  } = gridState;
-  const props = {
-    tableId,
-    isFetching,
-    selectAllToggle,
-    getToggleAllPageRowsSelectedProps,
-    getToggleAllRowsSelectedProps,
-    isAllRowsSelected,
-    withStickyColumn,
-    columns
-  };
-  return /*#__PURE__*/React__default.createElement(SelectAllWithToggle, props);
-};
-
-export { useSelectAllToggle as default };

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

@@ -1,9 +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 { Hooks } from 'react-table';
-declare const useSelectRows: (hooks: Hooks) => void;
-export default useSelectRows;

package/es/components/Datagrid/useSelectRows.js

@@ -1,143 +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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useCallback } from 'react';
-import cx from 'classnames';
-import { usePrefix, TableSelectRow } from '@carbon/react';
-import { SelectAll } from './Datagrid/DatagridSelectAll.js';
-import { selectionColumnId } from './common-column-ids.js';
-import { pkg } from '../../settings.js';
-import { handleToggleRowSelected } from './Datagrid/addons/stateReducer.js';
-import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
-
-const blockClass = `${pkg.prefix}--datagrid`;
-const checkboxClass = `${pkg.prefix}--datagrid__checkbox-cell`;
-const renderSelectAll = gridState => /*#__PURE__*/React__default.createElement(SelectAll, gridState);
-const renderSelectCell = gridState => /*#__PURE__*/React__default.createElement(SelectRow, gridState);
-const useSelectRows = hooks => {
-  useHighlightSelection(hooks);
-  const useInstance = instance => {
-    const {
-      rows
-    } = instance;
-    const rowsWithSelect = rows.map(row => ({
-      ...row,
-      isSelectable: true
-    }));
-    Object.assign(instance, {
-      rows: rowsWithSelect
-    });
-  };
-  hooks.useInstance.push(useInstance);
-  hooks.useInstance.push(instance => {
-    Object.assign(instance, {
-      withSelectRows: true
-    });
-  });
-  hooks.visibleColumns.push(columns => {
-    // Ensures that the first column is the row expander in the
-    // case of selected rows and expandable rows being used together
-    const newColOrder = [...columns];
-    const expanderColumnIndex = newColOrder.findIndex(col => col.id === 'expander');
-    const expanderCol = expanderColumnIndex > -1 ? newColOrder.splice(expanderColumnIndex, 1) : [];
-    return [...(expanderColumnIndex > -1 && expanderCol && expanderCol.length ? expanderCol : []), {
-      id: selectionColumnId,
-      Header: renderSelectAll,
-      Cell: renderSelectCell
-    }, ...newColOrder];
-  });
-};
-const useHighlightSelection = hooks => {
-  const carbonPrefix = usePrefix();
-  const getRowProps = (props, _ref) => {
-    let {
-      row
-    } = _ref;
-    const {
-      checked
-    } = row.getToggleRowSelectedProps();
-    return [props, {
-      className: cx([`${blockClass}__carbon-row`, {
-        [`${carbonPrefix}--data-table--selected`]: checked,
-        [`${blockClass}__active-row`]: checked
-      }])
-    }];
-  };
-  hooks.getRowProps.push(getRowProps);
-};
-const SelectRow = datagridState => {
-  const {
-    isFetching = false,
-    tableId,
-    row,
-    cell,
-    radio,
-    toggleAllRowsSelected,
-    onRadioSelect,
-    onRowSelect,
-    columns,
-    withStickyColumn,
-    dispatch,
-    getRowId
-  } = datagridState;
-  const [windowSize, setWindowSize] = useState();
-  useIsomorphicEffect(() => {
-    setWindowSize(window.innerWidth);
-    function updateSize() {
-      setWindowSize(window.innerWidth);
-    }
-    window.addEventListener('resize', updateSize);
-    return () => window.removeEventListener('resize', updateSize);
-  }, []);
-  const selectDisabled = isFetching || row.getRowProps().disabled;
-  const {
-    onChange,
-    title,
-    ...selectProps
-  } = row.getToggleRowSelectedProps();
-  const cellProps = cell.getCellProps();
-  const isFirstColumnStickyLeft = columns[0]?.sticky === 'left' && withStickyColumn;
-  const rowId = `${tableId}-${row.id}-${row.index}`;
-  const {
-    key,
-    _cellProps
-  } = cellProps;
-  const onSelectHandler = useCallback(event => {
-    event.stopPropagation(); // avoid triggering onRowClick
-    if (radio) {
-      toggleAllRowsSelected(false);
-      if (onRadioSelect) {
-        onRadioSelect(row);
-      }
-    }
-    onChange(event);
-    onRowSelect?.(row, event);
-    handleToggleRowSelected({
-      dispatch,
-      rowData: row,
-      isChecked: event.target.checked,
-      getRowId,
-      selectAll: null
-    });
-  }, [dispatch, getRowId, onChange, onRadioSelect, onRowSelect, radio, row, toggleAllRowsSelected]);
-  return /*#__PURE__*/React__default.createElement(TableSelectRow, _extends({
-    key: key
-  }, _cellProps, selectProps, {
-    radio: radio,
-    onSelect: onSelectHandler,
-    id: rowId,
-    name: `${rowId}-name`,
-    className: cx([checkboxClass, cellProps.className, {
-      [`${checkboxClass}-sticky-left`]: isFirstColumnStickyLeft && Number(windowSize) > 671
-    }]),
-    "aria-label": title,
-    disabled: selectDisabled
-  }));
-};
-
-export { useSelectRows as default };

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

@@ -1,8 +0,0 @@
-export default useSkeletons;
-/**
- * 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.
- */
-declare function useSkeletons(hooks: any): void;

package/es/components/Datagrid/useSkeletonRows.js

@@ -1,33 +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 useSkeletons = hooks => {
-  const useInstance = instance => {
-    const {
-      isFetching,
-      rows,
-      skeletonRowCount
-    } = instance;
-    if (isFetching && skeletonRowCount === 0) {
-      throw new Error('skeletonRowCount cannot be set to 0, if isFetching is true');
-    }
-    const skeletonRow = id => ({
-      isSkeleton: true,
-      values: 'skeleton',
-      id
-    });
-    const rowsWithSkeletons = [...rows, ...Array.from({
-      length: skeletonRowCount || 3
-    }, (_, index) => skeletonRow(`skeleton-row-${index + 1}`))];
-    Object.assign(instance, {
-      rows: isFetching ? rowsWithSkeletons : rows
-    });
-  };
-  hooks.useInstance.push(useInstance);
-};
-
-export { useSkeletons as default };

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

@@ -1,14 +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 { Hooks } from 'react-table';
-interface Order {
-    newOrder: 'ASC' | 'DESC' | 'NONE';
-    newSortDesc: undefined | boolean;
-}
-export declare const getNewSortOrder: (currentOrder?: boolean | string) => Order;
-declare const useSortableColumns: (hooks: Hooks) => void;
-export default useSortableColumns;

package/es/components/Datagrid/useSortableColumns.js

@@ -1,145 +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 React__default from 'react';
-import cx from 'classnames';
-import { pkg } from '../../settings.js';
-import { usePrefix, Button } from '@carbon/react';
-import { ArrowsVertical, ArrowDown, ArrowUp } from '@carbon/react/icons';
-import { SelectAll } from './Datagrid/DatagridSelectAll.js';
-import { DatagridAILabel } from './Datagrid/addons/AiLabel/DatagridAiLabel.js';
-
-const blockClass = `${pkg.prefix}--datagrid`;
-const getNewSortOrder = currentOrder => {
-  const order = {
-    newOrder: 'NONE',
-    newSortDesc: undefined
-  };
-
-  // NONE => ASC
-  if (currentOrder === undefined) {
-    order.newOrder = 'ASC';
-    order.newSortDesc = false;
-  }
-
-  // ACS => DESC
-  if (currentOrder === false || currentOrder === 'DESC') {
-    order.newOrder = 'DESC';
-    order.newSortDesc = true;
-  }
-
-  // DESC => NONE
-  if (currentOrder === true || currentOrder === 'ASC') {
-    order.newOrder = 'NONE';
-    order.newSortDesc = undefined;
-  }
-  return order;
-};
-const getAriaPressedValue = col => {
-  if (!col) {
-    return;
-  }
-  const {
-    isSorted
-  } = col;
-  if (isSorted) {
-    return 'true';
-  }
-  return 'false';
-};
-const useSortableColumns = hooks => {
-  const carbonPrefix = usePrefix();
-  const sortableVisibleColumns = (visibleColumns, _ref) => {
-    let {
-      instance
-    } = _ref;
-    const {
-      onSort
-    } = instance;
-    const onSortClick = (event, column) => {
-      const aiLabel = event.target.classList.contains(`${carbonPrefix}--slug`) || event.target.closest(`.${carbonPrefix}--slug`);
-      // Do not continue with sorting if we find a slug
-      if (aiLabel) {
-        event.stopPropagation();
-        return;
-      }
-      const key = column.id;
-      const sortDesc = column.isSortedDesc;
-      const {
-        newSortDesc,
-        newOrder
-      } = getNewSortOrder(sortDesc);
-      if (onSort) {
-        onSort(key, newOrder);
-      }
-      instance.toggleSortBy(key, newSortDesc, false);
-    };
-    const sortableColumns = visibleColumns.map(column => {
-      const icon = (col, props) => {
-        const iconProps = {
-          size: 16,
-          ...props,
-          className: `${blockClass}__sortable-icon ${carbonPrefix}--btn__icon`
-        };
-        if (col?.isSorted) {
-          switch (col.isSortedDesc) {
-            case false:
-              return /*#__PURE__*/React__default.createElement(ArrowUp, iconProps);
-            case true:
-              return /*#__PURE__*/React__default.createElement(ArrowDown, iconProps);
-            default:
-              return /*#__PURE__*/React__default.createElement(ArrowsVertical, iconProps);
-          }
-        }
-        return /*#__PURE__*/React__default.createElement(ArrowsVertical, iconProps);
-      };
-      const handleKey = (e, columnId) => {
-        const {
-          key
-        } = e;
-        if (key === 'Enter') {
-          setTimeout(() => document.getElementById(columnId)?.focus(), 0);
-        }
-      };
-      const Header = headerProp => column.disableSortBy === true || column.id === 'datagridSelection' || column.isAction ? column.disableSortBy || column.isAction ? column.Header : /*#__PURE__*/React__default.createElement(SelectAll, instance) : /*#__PURE__*/React__default.createElement(Button, {
-        "aria-pressed": getAriaPressedValue(headerProp?.column),
-        onClick: event => onSortClick(event, headerProp?.column),
-        kind: "ghost",
-        renderIcon: props => {
-          return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DatagridAILabel, {
-            aiLabel: headerProp?.column?.aiLabel || headerProp?.column?.slug
-          }), icon(headerProp?.column, props));
-        },
-        id: column?.id,
-        className: cx(`${carbonPrefix}--table-sort ${blockClass}--table-sort`, {
-          [`${blockClass}--table-sort--desc`]: headerProp?.column.isSortedDesc,
-          [`${blockClass}--table-sort--asc`]: headerProp?.column.isSortedDesc === false
-        }),
-        onKeyDown: event => handleKey(event, column.id)
-      }, column.Header);
-      return {
-        ...column,
-        Header,
-        minWidth: column.minWidth ?? (column.disableSortBy ? 50 : column.isAction ? 50 : 90)
-      };
-    });
-    return instance.customizeColumnsProps?.isTearsheetOpen ? visibleColumns : [...sortableColumns];
-  };
-  const sortInstanceProps = instance => {
-    const {
-      onSort
-    } = instance;
-    Object.assign(instance, {
-      manualSortBy: !!onSort,
-      isTableSortable: true
-    });
-  };
-  hooks.visibleColumns.push(sortableVisibleColumns);
-  hooks.useInstance.push(sortInstanceProps);
-};
-
-export { useSortableColumns as default, getNewSortOrder };

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

@@ -1,9 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 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 { Hooks } from 'react-table';
-declare const useStickyColumn: (hooks: Hooks) => void;
-export default useStickyColumn;