feat(bulk-action): create reusable BulkActionToolbar component

src/__testing__/BulkActionToolbar.test.tsx

@@ -0,0 +1,66 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+jest.mock('react-markdown', () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>
+}));
+
+jest.mock('remark-gfm', () => ({
+  __esModule: true,
+  default: () => {}
+}));
+
+jest.mock('rehype-raw', () => ({
+  __esModule: true,
+  default: () => {}
+}));
+
+import { BulkActionToolbar } from '../custom/BulkActionToolbar';
+import { SistentThemeProviderWithoutBaseLine } from '../theme';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<SistentThemeProviderWithoutBaseLine>{ui}</SistentThemeProviderWithoutBaseLine>);
+}
+
+describe('BulkActionToolbar', () => {
+  it('renders null when selectedCount is 0', () => {
+    const { container } = renderWithTheme(<BulkActionToolbar selectedCount={0} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders selected count and children when selectedCount > 0', () => {
+    renderWithTheme(
+      <BulkActionToolbar selectedCount={3}>
+        <button data-testid="custom-action">Delete</button>
+      </BulkActionToolbar>
+    );
+
+    expect(screen.getByText('3 selected')).toBeTruthy();
+    expect(screen.getByTestId('custom-action')).toBeTruthy();
+  });
+
+  it('renders deselect button and handles callback', () => {
+    const onDeselectAll = jest.fn();
+    renderWithTheme(<BulkActionToolbar selectedCount={5} onDeselectAll={onDeselectAll} />);
+
+    const deselectButton = screen.getByTestId('deselect-all-button');
+    expect(deselectButton).toBeTruthy();
+
+    fireEvent.click(deselectButton);
+    expect(onDeselectAll).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders custom labels when provided', () => {
+    renderWithTheme(
+      <BulkActionToolbar
+        selectedCount={3}
+        onDeselectAll={jest.fn()}
+        deselectAllLabel="Clear Selection"
+        selectedLabel="items chosen"
+      />
+    );
+
+    expect(screen.getByText('3 items chosen')).toBeTruthy();
+  });
+});

src/custom/BulkActionToolbar/BulkActionToolbar.tsx

@@ -0,0 +1,72 @@
+import { styled } from '@mui/material/styles';
+import React from 'react';
+import { Box, IconButton, Toolbar, Typography } from '../../base';
+import { IndeterminateCheckBoxIcon } from '../../icons';
+import { useTheme } from '../../theme';
+import { CustomTooltip } from '../CustomTooltip';
+
+const StyledToolbar = styled(Toolbar)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark'
+      ? theme.palette.background.card
+      : theme.palette.background.secondary,
+  paddingLeft: theme.spacing(3),
+  paddingRight: theme.spacing(3),
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%',
+  minHeight: '64px'
+}));
+
+export interface BulkActionToolbarProps {
+  selectedCount: number;
+  onDeselectAll?: () => void;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  'data-testid'?: string;
+  deselectAllLabel?: string;
+  selectedLabel?: string;
+}
+
+export const BulkActionToolbar: React.FC<BulkActionToolbarProps> = ({
+  selectedCount,
+  onDeselectAll,
+  children,
+  style = {},
+  'data-testid': testId = 'bulk-action-toolbar',
+  deselectAllLabel = 'Deselect ALL',
+  selectedLabel = 'selected'
+}) => {
+  const theme = useTheme();
+
+  if (selectedCount <= 0) {
+    return null;
+  }
+
+  const iconFill = theme.palette.icon.default;
+
+  return (
+    <StyledToolbar style={style} data-testid={testId}>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        {onDeselectAll && (
+          <CustomTooltip title={deselectAllLabel} arrow>
+            <IconButton
+              onClick={onDeselectAll}
+              sx={{ marginRight: theme.spacing(2) }}
+              data-testid="deselect-all-button"
+            >
+              <IndeterminateCheckBoxIcon fill={iconFill} />
+            </IconButton>
+          </CustomTooltip>
+        )}
+        <Typography variant="subtitle1" sx={{ fontWeight: 600, color: theme.palette.text.default }}>
+          {selectedCount} {selectedLabel}
+        </Typography>
+      </Box>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: theme.spacing(1) }}>{children}</Box>
+    </StyledToolbar>
+  );
+};
+
+export default BulkActionToolbar;

src/custom/BulkActionToolbar/index.ts

@@ -0,0 +1,2 @@
+export * from './BulkActionToolbar';
+export { default as BulkActionToolbar } from './BulkActionToolbar';

src/custom/index.tsx

@@ -1,6 +1,7 @@
 import { ActionButton } from './ActionButton';
 import { BBChart } from './BBChart';
 import { BookmarkNotification } from './BookmarkNotification';
+import BulkActionToolbar, { BulkActionToolbarProps } from './BulkActionToolbar';
 import { Carousel } from './Carousel';
 import CatalogFilter, { CatalogFilterProps } from './CatalogFilter/CatalogFilter';
 import { ChapterCard } from './ChapterCard';
@@ -87,6 +88,7 @@ export {
   ActionButton,
   BBChart,
   BookmarkNotification,
+  BulkActionToolbar,
   Carousel,
   CatalogCardDesignLogo,
   CatalogFilter,
@@ -154,6 +156,7 @@ export { BasicMarkdown, RenderMarkdown };
 export { CustomizedStepper, useStepper } from './Stepper';
 
 export type {
+  BulkActionToolbarProps,
   CatalogFilterProps,
   ColView,
   CustomColumn,

src/index.tsx

@@ -23,6 +23,8 @@ export { FeedbackButton, type FeedbackComponentProps } from './custom/Feedback';
 // `@sistent/mui-datatables` and would crash the dts build) precisely so this
 // explicit re-export can force them into the published declaration bundle.
 export { getCopyDeepLinkAction, type TableAction } from './custom/TableActions';
+
+export { BulkActionToolbar, type BulkActionToolbarProps } from './custom/BulkActionToolbar';
 // Same nested-barrel dts-drop quirk as FeedbackButton above: without this
 // explicit re-export the DangerConfirmationModal declarations (and its exported
 // props types) are dropped from the bundled d.ts, breaking