@carbon/react 1.103.0 → 1.104.0

package/lib/components/DataTable/Table.js

@@ -1,174 +1,128 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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.
  */
 
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var PropTypes = require('prop-types');
-var cx = require('classnames');
-var usePrefix = require('../../internal/usePrefix.js');
-var TableContext = require('./TableContext.js');
-var useEvent = require('../../internal/useEvent.js');
-var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
-var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.js');
+const require_runtime = require('../../_virtual/_rolldown/runtime.js');
+const require_usePrefix = require('../../internal/usePrefix.js');
+const require_useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
+const require_useEvent = require('../../internal/useEvent.js');
+const require_TableContext = require('./TableContext.js');
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let prop_types = require("prop-types");
+prop_types = require_runtime.__toESM(prop_types);
+let react_jsx_runtime = require("react/jsx-runtime");
+let es_toolkit_compat = require("es-toolkit/compat");
 
+//#region src/components/DataTable/Table.tsx
+/**
+* Copyright IBM Corp. 2016, 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.
+*/
 const isElementWrappingContent = (element, context) => {
-  if (element.children.length > 0) {
-    return false;
-  }
-  const computedStyles = window.getComputedStyle(element);
-  context.font = computedStyles.font ? computedStyles.font : `${computedStyles.fontSize}" "${computedStyles.fontFamily}`;
-  const measuredText = context?.measureText(element.textContent ?? '');
-  let textWidth = measuredText.width ?? 0;
-  // account for letter spacing
-  const letterSpacing = computedStyles.letterSpacing?.split('px');
-  if (letterSpacing && letterSpacing.length && !isNaN(Number(letterSpacing[0]))) {
-    textWidth += Number(letterSpacing[0]) * (element.textContent?.length ?? 0);
-  }
-  // account for padding
-  const paddingLeft = computedStyles.paddingLeft?.split('px');
-  if (paddingLeft && paddingLeft.length && !isNaN(Number(paddingLeft[0]))) {
-    textWidth += Number(paddingLeft[0]);
-  }
-  const paddingRight = computedStyles.paddingLeft?.split('px');
-  if (paddingRight && paddingRight.length && !isNaN(Number(paddingRight[0]))) {
-    textWidth += Number(paddingRight[0]);
-  }
-  // if measured textWidth is larger than the cell's width, then the content is being wrapped
-  if (textWidth > element.getBoundingClientRect().width) {
-    return true;
-  }
-  return false;
+	if (element.children.length > 0) return false;
+	const computedStyles = window.getComputedStyle(element);
+	context.font = computedStyles.font ? computedStyles.font : `${computedStyles.fontSize}" "${computedStyles.fontFamily}`;
+	let textWidth = (context?.measureText(element.textContent ?? "")).width ?? 0;
+	const letterSpacing = computedStyles.letterSpacing?.split("px");
+	if (letterSpacing && letterSpacing.length && !isNaN(Number(letterSpacing[0]))) textWidth += Number(letterSpacing[0]) * (element.textContent?.length ?? 0);
+	const paddingLeft = computedStyles.paddingLeft?.split("px");
+	if (paddingLeft && paddingLeft.length && !isNaN(Number(paddingLeft[0]))) textWidth += Number(paddingLeft[0]);
+	const paddingRight = computedStyles.paddingLeft?.split("px");
+	if (paddingRight && paddingRight.length && !isNaN(Number(paddingRight[0]))) textWidth += Number(paddingRight[0]);
+	if (textWidth > element.getBoundingClientRect().width) return true;
+	return false;
 };
-const Table = ({
-  className,
-  children,
-  useZebraStyles,
-  size = 'lg',
-  isSortable = false,
-  useStaticWidth,
-  stickyHeader,
-  overflowMenuOnHover = true,
-  experimentalAutoAlign = false,
-  ...other
-}) => {
-  const {
-    titleId,
-    descriptionId
-  } = React.useContext(TableContext.TableContext);
-  const prefix = usePrefix.usePrefix();
-  const tableRef = React.useRef(null);
-  const componentClass = cx(`${prefix}--data-table`, className, {
-    [`${prefix}--data-table--${size}`]: size,
-    [`${prefix}--data-table--sort`]: isSortable,
-    [`${prefix}--data-table--zebra`]: useZebraStyles,
-    [`${prefix}--data-table--static`]: useStaticWidth,
-    [`${prefix}--data-table--sticky-header`]: stickyHeader,
-    [`${prefix}--data-table--visible-overflow-menu`]: !overflowMenuOnHover
-  });
-  const toggleTableBodyAlignmentClass = React.useCallback((alignTop = false) => {
-    if (alignTop) {
-      tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-body`);
-    } else {
-      tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-body`);
-    }
-  }, [prefix]);
-  const toggleTableHeaderAlignmentClass = React.useCallback((alignTop = false) => {
-    if (alignTop) {
-      tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-header`);
-    } else {
-      tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-header`);
-    }
-  }, [prefix]);
-  const setTableAlignment = React.useCallback(() => {
-    if (experimentalAutoAlign) {
-      const canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d');
-      if (tableRef.current && context) {
-        const isBodyMultiline = Array.from(tableRef.current.querySelectorAll('td')).some(td => isElementWrappingContent(td, context));
-        const isHeaderMultiline = Array.from(tableRef.current.querySelectorAll('th')).some(th => {
-          const label = th.querySelector(`.${prefix}--table-header-label`);
-          return label instanceof HTMLElement && isElementWrappingContent(label, context);
-        });
-        toggleTableBodyAlignmentClass(isBodyMultiline);
-        toggleTableHeaderAlignmentClass(isHeaderMultiline);
-      }
-    } else {
-      toggleTableBodyAlignmentClass(false);
-      toggleTableHeaderAlignmentClass(false);
-    }
-  }, [experimentalAutoAlign, toggleTableBodyAlignmentClass, toggleTableHeaderAlignmentClass, prefix]);
-  const debouncedSetTableAlignment = debounce.debounce(setTableAlignment, 100);
-  useEvent.useWindowEvent('resize', debouncedSetTableAlignment);
-
-  // recalculate table alignment once fonts have loaded
-  if (typeof document !== 'undefined' && document?.fonts?.status && document.fonts.status !== 'loaded') {
-    document.fonts.ready.then(() => {
-      setTableAlignment();
-    });
-  }
-  useIsomorphicEffect.default(() => {
-    setTableAlignment();
-  }, [setTableAlignment, size]);
-  const table = /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--data-table-content`
-  }, /*#__PURE__*/React.createElement("table", _rollupPluginBabelHelpers.extends({
-    "aria-labelledby": titleId,
-    "aria-describedby": descriptionId
-  }, other, {
-    className: componentClass,
-    ref: tableRef
-  }), children));
-  return stickyHeader ? /*#__PURE__*/React.createElement("section", {
-    className: `${prefix}--data-table_inner-container`
-  }, table) : table;
+const Table = ({ className, children, useZebraStyles, size = "lg", isSortable = false, useStaticWidth, stickyHeader, overflowMenuOnHover = true, experimentalAutoAlign = false, ...other }) => {
+	const { titleId, descriptionId } = (0, react.useContext)(require_TableContext.TableContext);
+	const prefix = require_usePrefix.usePrefix();
+	const tableRef = (0, react.useRef)(null);
+	const componentClass = (0, classnames.default)(`${prefix}--data-table`, className, {
+		[`${prefix}--data-table--${size}`]: size,
+		[`${prefix}--data-table--sort`]: isSortable,
+		[`${prefix}--data-table--zebra`]: useZebraStyles,
+		[`${prefix}--data-table--static`]: useStaticWidth,
+		[`${prefix}--data-table--sticky-header`]: stickyHeader,
+		[`${prefix}--data-table--visible-overflow-menu`]: !overflowMenuOnHover
+	});
+	const toggleTableBodyAlignmentClass = (0, react.useCallback)((alignTop = false) => {
+		if (alignTop) tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-body`);
+		else tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-body`);
+	}, [prefix]);
+	const toggleTableHeaderAlignmentClass = (0, react.useCallback)((alignTop = false) => {
+		if (alignTop) tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-header`);
+		else tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-header`);
+	}, [prefix]);
+	const setTableAlignment = (0, react.useCallback)(() => {
+		if (experimentalAutoAlign) {
+			const context = document.createElement("canvas").getContext("2d");
+			if (tableRef.current && context) {
+				const isBodyMultiline = Array.from(tableRef.current.querySelectorAll("td")).some((td) => isElementWrappingContent(td, context));
+				const isHeaderMultiline = Array.from(tableRef.current.querySelectorAll("th")).some((th) => {
+					const label = th.querySelector(`.${prefix}--table-header-label`);
+					return label instanceof HTMLElement && isElementWrappingContent(label, context);
+				});
+				toggleTableBodyAlignmentClass(isBodyMultiline);
+				toggleTableHeaderAlignmentClass(isHeaderMultiline);
+			}
+		} else {
+			toggleTableBodyAlignmentClass(false);
+			toggleTableHeaderAlignmentClass(false);
+		}
+	}, [
+		experimentalAutoAlign,
+		toggleTableBodyAlignmentClass,
+		toggleTableHeaderAlignmentClass,
+		prefix
+	]);
+	require_useEvent.useWindowEvent("resize", (0, es_toolkit_compat.debounce)(setTableAlignment, 100));
+	if (typeof document !== "undefined" && document?.fonts?.status && document.fonts.status !== "loaded") document.fonts.ready.then(() => {
+		setTableAlignment();
+	});
+	require_useIsomorphicEffect.default(() => {
+		setTableAlignment();
+	}, [setTableAlignment, size]);
+	const table = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `${prefix}--data-table-content`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+			"aria-labelledby": titleId,
+			"aria-describedby": descriptionId,
+			...other,
+			className: componentClass,
+			ref: tableRef,
+			children
+		})
+	});
+	return stickyHeader ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+		className: `${prefix}--data-table_inner-container`,
+		children: table
+	}) : table;
 };
 Table.propTypes = {
-  /**
-   * Pass in the children that will be rendered within the Table
-   */
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /**
-   * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
-   */
-  experimentalAutoAlign: PropTypes.bool,
-  /**
-   * `false` If true, will apply sorting styles
-   */
-  isSortable: PropTypes.bool,
-  /**
-   * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
-   */
-  overflowMenuOnHover: PropTypes.bool,
-  /**
-   *  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
-   */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  /**
-   * `false` If true, will keep the header sticky (only data rows will scroll)
-   */
-  stickyHeader: PropTypes.bool,
-  /**
-   * If `true`, sets the table width to `auto` instead of `100%`.
-   */
-  useStaticWidth: PropTypes.bool,
-  /**
-   * `true` to add useZebraStyles striping.
-   */
-  useZebraStyles: PropTypes.bool,
-  /**
-   * Specify the table tabIndex
-   */
-  tabIndex: PropTypes.number
+	children: prop_types.default.node,
+	className: prop_types.default.string,
+	experimentalAutoAlign: prop_types.default.bool,
+	isSortable: prop_types.default.bool,
+	overflowMenuOnHover: prop_types.default.bool,
+	size: prop_types.default.oneOf([
+		"xs",
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	]),
+	stickyHeader: prop_types.default.bool,
+	useStaticWidth: prop_types.default.bool,
+	useZebraStyles: prop_types.default.bool,
+	tabIndex: prop_types.default.number
 };
 
-exports.Table = Table;
-exports.default = Table;
+//#endregion
+exports.default = Table;

package/lib/components/DataTable/TableActionList.js

@@ -1,20 +1,24 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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.
  */
 
-'use strict';
+const require_wrapComponent = require('../../tools/wrapComponent.js');
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var wrapComponent = require('../../tools/wrapComponent.js');
-
-const TableActionList = wrapComponent.default({
-  name: 'TableActionList',
-  type: 'div',
-  className: prefix => `${prefix}--action-list`
+//#region src/components/DataTable/TableActionList.ts
+/**
+* Copyright IBM Corp. 2016, 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.
+*/
+const TableActionList = require_wrapComponent.default({
+	name: "TableActionList",
+	type: "div",
+	className: (prefix) => `${prefix}--action-list`
 });
 
-exports.default = TableActionList;
+//#endregion
+exports.default = TableActionList;

package/lib/components/DataTable/TableBatchAction.js

@@ -1,48 +1,38 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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.
  */
 
-'use strict';
+const require_runtime = require('../../_virtual/_rolldown/runtime.js');
+const require_index = require('../Button/index.js');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let prop_types = require("prop-types");
+prop_types = require_runtime.__toESM(prop_types);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _carbon_icons_react = require("@carbon/icons-react");
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var PropTypes = require('prop-types');
-var React = require('react');
-var iconsReact = require('@carbon/icons-react');
-var Button = require('../Button/Button.js');
-require('../Button/Button.Skeleton.js');
-
-const TableBatchAction = ({
-  renderIcon = iconsReact.AddFilled,
-  iconDescription = 'Add',
-  ...props
-}) => /*#__PURE__*/React.createElement(Button.default, _rollupPluginBabelHelpers.extends({
-  renderIcon: renderIcon,
-  iconDescription: iconDescription
-}, props));
+//#region src/components/DataTable/TableBatchAction.tsx
+/**
+* Copyright IBM Corp. 2016, 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 TableBatchAction = ({ renderIcon = _carbon_icons_react.AddFilled, iconDescription = "Add", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+	renderIcon,
+	iconDescription,
+	...props
+});
 TableBatchAction.propTypes = {
-  /**
-   * Specify if the button is an icon-only button
-   */
-  hasIconOnly: PropTypes.bool,
-  /**
-   * If specifying the `renderIcon` prop, provide a description for that icon that can
-   * be read by screen readers
-   */
-  iconDescription: props => {
-    if (props.renderIcon && !props.children && !props.iconDescription) {
-      return new Error('renderIcon property specified without also providing an iconDescription property.');
-    }
-    return undefined;
-  },
-  /**
-   * A component used to render an icon.
-   */
-  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+	hasIconOnly: prop_types.default.bool,
+	iconDescription: (props) => {
+		if (props.renderIcon && !props.children && !props.iconDescription) return /* @__PURE__ */ new Error("renderIcon property specified without also providing an iconDescription property.");
+	},
+	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object])
 };
 
-exports.default = TableBatchAction;
+//#endregion
+exports.default = TableBatchAction;

package/lib/components/DataTable/TableBatchActions.js

@@ -1,135 +1,100 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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.
  */
 
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var cx = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var Button = require('../Button/Button.js');
-require('../Button/Button.Skeleton.js');
-var TableActionList = require('./TableActionList.js');
-var Text = require('../Text/Text.js');
-require('../Text/TextDirection.js');
-var usePrefix = require('../../internal/usePrefix.js');
+const require_runtime = require('../../_virtual/_rolldown/runtime.js');
+const require_usePrefix = require('../../internal/usePrefix.js');
+const require_Text = require('../Text/Text.js');
+const require_index = require('../Button/index.js');
+const require_TableActionList = require('./TableActionList.js');
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let prop_types = require("prop-types");
+prop_types = require_runtime.__toESM(prop_types);
+let react_jsx_runtime = require("react/jsx-runtime");
 
+//#region src/components/DataTable/TableBatchActions.tsx
+/**
+* Copyright IBM Corp. 2016, 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 translationIds = {
-  'carbon.table.batch.cancel': 'carbon.table.batch.cancel',
-  'carbon.table.batch.items.selected': 'carbon.table.batch.items.selected',
-  'carbon.table.batch.item.selected': 'carbon.table.batch.item.selected',
-  'carbon.table.batch.selectAll': 'carbon.table.batch.selectAll'
+	"carbon.table.batch.cancel": "carbon.table.batch.cancel",
+	"carbon.table.batch.items.selected": "carbon.table.batch.items.selected",
+	"carbon.table.batch.item.selected": "carbon.table.batch.item.selected",
+	"carbon.table.batch.selectAll": "carbon.table.batch.selectAll"
 };
 const defaultTranslations = {
-  [translationIds['carbon.table.batch.cancel']]: 'Cancel',
-  [translationIds['carbon.table.batch.items.selected']]: 'items selected',
-  [translationIds['carbon.table.batch.item.selected']]: 'item selected',
-  [translationIds['carbon.table.batch.selectAll']]: 'Select all'
+	[translationIds["carbon.table.batch.cancel"]]: "Cancel",
+	[translationIds["carbon.table.batch.items.selected"]]: "items selected",
+	[translationIds["carbon.table.batch.item.selected"]]: "item selected",
+	[translationIds["carbon.table.batch.selectAll"]]: "Select all"
 };
 const defaultTranslateWithId = (messageId, args = {
-  totalSelected: 0,
-  totalCount: 0
+	totalSelected: 0,
+	totalCount: 0
 }) => {
-  const {
-    totalSelected,
-    totalCount
-  } = args;
-  switch (messageId) {
-    case translationIds['carbon.table.batch.cancel']:
-      return defaultTranslations[messageId];
-    case translationIds['carbon.table.batch.selectAll']:
-      return `${defaultTranslations[messageId]} (${totalCount})`;
-    case translationIds['carbon.table.batch.items.selected']:
-    case translationIds['carbon.table.batch.item.selected']:
-      return `${totalSelected} ${defaultTranslations[messageId]}`;
-  }
+	const { totalSelected, totalCount } = args;
+	switch (messageId) {
+		case translationIds["carbon.table.batch.cancel"]: return defaultTranslations[messageId];
+		case translationIds["carbon.table.batch.selectAll"]: return `${defaultTranslations[messageId]} (${totalCount})`;
+		case translationIds["carbon.table.batch.items.selected"]:
+		case translationIds["carbon.table.batch.item.selected"]: return `${totalSelected} ${defaultTranslations[messageId]}`;
+	}
 };
-const TableBatchActions = ({
-  className,
-  children,
-  shouldShowBatchActions,
-  totalSelected,
-  totalCount,
-  onCancel,
-  onSelectAll,
-  translateWithId: t = defaultTranslateWithId,
-  ...rest
-}) => {
-  const [isScrolling, setIsScrolling] = React.useState(false);
-  const prefix = usePrefix.usePrefix();
-  const batchActionsClasses = cx({
-    [`${prefix}--batch-actions`]: true,
-    [`${prefix}--batch-actions--active`]: shouldShowBatchActions
-  }, className);
-  const batchSummaryClasses = cx(`${prefix}--batch-summary`, {
-    [`${prefix}--batch-summary__scroll`]: isScrolling
-  });
-  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
-    onScroll: () => {
-      setIsScrolling(!isScrolling);
-    },
-    "aria-hidden": !shouldShowBatchActions,
-    className: batchActionsClasses
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    className: batchSummaryClasses
-  }, /*#__PURE__*/React.createElement("p", {
-    className: `${prefix}--batch-summary__para`
-  }, /*#__PURE__*/React.createElement(Text.Text, null, totalSelected > 1 || totalSelected === 0 ? t('carbon.table.batch.items.selected', {
-    totalSelected
-  }) : t('carbon.table.batch.item.selected', {
-    totalSelected
-  }))), onSelectAll && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: `${prefix}--batch-summary__divider`
-  }, "|"), /*#__PURE__*/React.createElement(Button.default, {
-    onClick: onSelectAll,
-    tabIndex: shouldShowBatchActions ? 0 : -1
-  }, t('carbon.table.batch.selectAll', {
-    totalCount
-  })))), /*#__PURE__*/React.createElement(TableActionList.default, null, children, /*#__PURE__*/React.createElement(Button.default, {
-    className: `${prefix}--batch-summary__cancel`,
-    tabIndex: shouldShowBatchActions ? 0 : -1,
-    onClick: onCancel
-  }, t('carbon.table.batch.cancel'))));
+const TableBatchActions = ({ className, children, shouldShowBatchActions, totalSelected, totalCount, onCancel, onSelectAll, translateWithId: t = defaultTranslateWithId, ...rest }) => {
+	const [isScrolling, setIsScrolling] = react.default.useState(false);
+	const prefix = require_usePrefix.usePrefix();
+	const batchActionsClasses = (0, classnames.default)({
+		[`${prefix}--batch-actions`]: true,
+		[`${prefix}--batch-actions--active`]: shouldShowBatchActions
+	}, className);
+	const batchSummaryClasses = (0, classnames.default)(`${prefix}--batch-summary`, { [`${prefix}--batch-summary__scroll`]: isScrolling });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		onScroll: () => {
+			setIsScrolling(!isScrolling);
+		},
+		"aria-hidden": !shouldShowBatchActions,
+		className: batchActionsClasses,
+		...rest,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: batchSummaryClasses,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: `${prefix}--batch-summary__para`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, { children: totalSelected > 1 || totalSelected === 0 ? t("carbon.table.batch.items.selected", { totalSelected }) : t("carbon.table.batch.item.selected", { totalSelected }) })
+			}), onSelectAll && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `${prefix}--batch-summary__divider`,
+				children: "|"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+				onClick: onSelectAll,
+				tabIndex: shouldShowBatchActions ? 0 : -1,
+				children: t("carbon.table.batch.selectAll", { totalCount })
+			})] })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_TableActionList.default, { children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+			className: `${prefix}--batch-summary__cancel`,
+			tabIndex: shouldShowBatchActions ? 0 : -1,
+			onClick: onCancel,
+			children: t("carbon.table.batch.cancel")
+		})] })]
+	});
 };
 TableBatchActions.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /**
-   * Hook required to listen for when the user initiates a cancel request
-   * through this component
-   */
-  onCancel: PropTypes.func.isRequired,
-  /**
-   * Hook to listen for when the user initiates a select all
-   * request through this component. This _only_ controls the rendering
-   * of the `Select All` button and does not include built in functionality
-   */
-  onSelectAll: PropTypes.func,
-  /**
-   * Boolean specifier for whether or not the batch action bar should be
-   * displayed
-   */
-  shouldShowBatchActions: PropTypes.bool,
-  /**
-   * Numeric representation of the total number of items in a table.
-   * This number is used in the select all button text
-   */
-  totalCount: PropTypes.number,
-  /**
-   * Numeric representation of the total number of items selected in a table.
-   * This number is used to derive the selection message
-   */
-  totalSelected: PropTypes.number.isRequired,
-  /**
-   * Translates component strings using your i18n tool.
-   */
-  translateWithId: PropTypes.func
+	children: prop_types.default.node,
+	className: prop_types.default.string,
+	onCancel: prop_types.default.func.isRequired,
+	onSelectAll: prop_types.default.func,
+	shouldShowBatchActions: prop_types.default.bool,
+	totalCount: prop_types.default.number,
+	totalSelected: prop_types.default.number.isRequired,
+	translateWithId: prop_types.default.func
 };
 
-exports.default = TableBatchActions;
+//#endregion
+exports.default = TableBatchActions;