Add drag drop column component

package.json

@@ -83,6 +83,7 @@
     "whatwg-fetch": "^3.6.20"
   },
   "dependencies": {
+    "@patternfly/react-drag-drop": "^6.3.0",
     "@patternfly/react-tokens": "^6.0.0",
     "sharp": "^0.34.0"
   }

packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagement/ColumnManagement.md

@@ -0,0 +1,28 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: Component groups
+subsection: Helpers
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Column management
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['ColumnManagement']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagement/ColumnManagement.md
+---
+
+import ColumnManagement from '@patternfly/react-component-groups/dist/dynamic/ColumnManagement';
+import { FunctionComponent, useState } from 'react';
+
+The **column management** component can be used to implement customizable table columns. Columns can be configured to be enabled or disabled by default or be unhidable. 
+
+## Examples
+
+### Basic column list
+
+The order of the columns can be changed by dragging and dropping the columns themselves. This list can be used within a page or within a modal. Always make sure to set `isShownByDefault` and `isShown` to the same boolean value in the initial state.
+
+```js file="./ColumnManagementExample.tsx"

packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagement/ColumnManagementExample.tsx

@@ -0,0 +1,57 @@
+import { FunctionComponent, useState } from 'react';
+import { Column, ColumnManagement } from '@patternfly/react-component-groups';
+
+const DEFAULT_COLUMNS: Column[] = [
+  {
+    title: 'ID',
+    key: 'id',
+    isShownByDefault: true,
+    isShown: true,
+    isUntoggleable: true
+  },
+  {
+    title: 'Publish date',
+    key: 'publishDate',
+    isShownByDefault: true,
+    isShown: true
+  },
+  {
+    title: 'Impact',
+    key: 'impact',
+    isShownByDefault: true,
+    isShown: true
+  },
+  {
+    title: 'Score',
+    key: 'score',
+    isShownByDefault: false,
+    isShown: false
+  }
+];
+
+export const ColumnExample: FunctionComponent = () => {
+  const [ columns, setColumns ] = useState(DEFAULT_COLUMNS);
+
+  return (
+    <ColumnManagement
+      title="Manage columns"
+      description="Select the columns to display in the table."
+      columns={columns}
+      onOrderChange={setColumns}
+      onSelect={(col) => {
+          const newColumns = [...columns];
+          const changedColumn = newColumns.find(c => c.key === col.key);
+          if (changedColumn) {
+              changedColumn.isShown = col.isShown;
+          }
+          setColumns(newColumns);
+      }}
+      onSelectAll={(newColumns) => setColumns(newColumns)}
+      onSave={(newColumns) => {
+          setColumns(newColumns);
+          alert('Changes saved!');
+      }}
+      onCancel={() => alert('Changes cancelled!')}
+    />
+  );
+};

packages/module/src/ColumnManagement/ColumnManagement.test.tsx

@@ -0,0 +1,91 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import ColumnManagement from './ColumnManagement';
+
+jest.mock('@patternfly/react-drag-drop', () => {
+  const originalModule = jest.requireActual('@patternfly/react-drag-drop');
+  return {
+    ...originalModule,
+    DragDropSort: ({ onDrop, items }) => {
+      const handleDrop = () => {
+        const reorderedItems = [ ...items ].reverse();
+        onDrop({}, reorderedItems);
+      };
+      return <div onDrop={handleDrop}>{items.map(item => item.content)}</div>;
+    },
+  };
+});
+
+const mockColumns = [
+  { key: 'name', title: 'Name', isShown: true, isShownByDefault: true },
+  { key: 'status', title: 'Status', isShown: true, isShownByDefault: true },
+  { key: 'version', title: 'Version', isShown: false, isShownByDefault: false },
+];
+
+describe('Column', () => {
+  it('renders with initial columns', () => {
+    render(<ColumnManagement columns={mockColumns} />);
+    expect(screen.getByTestId('column-check-name')).toBeChecked();
+    expect(screen.getByTestId('column-check-status')).toBeChecked();
+    expect(screen.getByTestId('column-check-version')).not.toBeChecked();
+  });
+
+  it('renders title and description', () => {
+    render(<ColumnManagement columns={mockColumns} title="Test Title" description="Test Description" />);
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Test Description')).toBeInTheDocument();
+  });
+
+  it('renders a cancel button', async () => {
+    const onCancel = jest.fn();
+    render(<ColumnManagement columns={mockColumns} onCancel={onCancel} />);
+    const cancelButton = screen.getByText('Cancel');
+    expect(cancelButton).toBeInTheDocument();
+    await userEvent.click(cancelButton);
+    expect(onCancel).toHaveBeenCalled();
+  });
+
+  it('toggles a column', async () => {
+    const onSelect = jest.fn();
+    render(<ColumnManagement columns={mockColumns} onSelect={onSelect} />);
+    const nameCheckbox = screen.getByTestId('column-check-name');
+    await userEvent.click(nameCheckbox);
+    expect(nameCheckbox).not.toBeChecked();
+    expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ key: 'name', isShown: false }));
+  });
+
+  it('selects all columns', async () => {
+    render(<ColumnManagement columns={mockColumns} />);
+    const menuToggle = screen.getByLabelText('Bulk select toggle');
+    if (menuToggle) {
+      await userEvent.click(menuToggle);
+    }
+    const selectAllButton = screen.getByText('Select all (3)');
+    await userEvent.click(selectAllButton);
+    expect(screen.getByTestId('column-check-name')).toBeChecked();
+    expect(screen.getByTestId('column-check-status')).toBeChecked();
+    expect(screen.getByTestId('column-check-version')).toBeChecked();
+  });
+
+  it('selects no columns', async () => {
+    render(<ColumnManagement columns={mockColumns} />);
+    const menuToggle = screen.getByLabelText('Bulk select toggle');
+    if (menuToggle) {
+      await userEvent.click(menuToggle);
+    }
+    const selectNoneButton = screen.getByText('Select none (0)');
+    await userEvent.click(selectNoneButton);
+    expect(screen.getByTestId('column-check-name')).not.toBeChecked();
+    expect(screen.getByTestId('column-check-status')).not.toBeChecked();
+    expect(screen.getByTestId('column-check-version')).not.toBeChecked();
+  });
+
+  it('saves changes', async () => {
+    const onSave = jest.fn();
+    render(<ColumnManagement columns={mockColumns} onSave={onSave} />);
+    const saveButton = screen.getByText('Save');
+    await userEvent.click(saveButton);
+    expect(onSave).toHaveBeenCalledWith(expect.any(Array));
+  });
+});