@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.11

package/esm/core/Table/actionHandlers/selectHandler.js

@@ -4,113 +4,137 @@
  * - Validation: Ensures that any disabled/unselectable row/subrow is not selected
  */
 const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
-    if (!(instance === null || instance === void 0 ? void 0 : instance.rows.length)) {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect([], newState);
-        return;
+  if (!instance?.rows.length) {
+    onSelect?.([], newState);
+    return;
+  }
+  const newSelectedRowIds = {};
+  const handleRow = (row) => {
+    if (isRowDisabled?.(row.original)) {
+      return false;
     }
-    const newSelectedRowIds = {};
-    const handleRow = (row) => {
-        if (isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)) {
-            return false;
-        }
-        let isAllSubSelected = true;
-        row.initialSubRows.forEach((subRow) => {
-            const result = handleRow(subRow);
-            if (!result) {
-                isAllSubSelected = false;
-            }
-        });
-        // If `selectSubRows` is false, then no need to select sub-rows and just check current selection state.
-        // If a row doesn't have sub-rows then check its selection state.
-        // If it has sub-rows then check whether all of them are selected.
-        if ((!instance.selectSubRows && newState.selectedRowIds[row.id]) ||
-            (!row.initialSubRows.length && newState.selectedRowIds[row.id]) ||
-            (row.initialSubRows.length && isAllSubSelected)) {
-            newSelectedRowIds[row.id] = true;
-        }
-        return !!newSelectedRowIds[row.id];
-    };
-    instance.initialRows.forEach((row) => handleRow(row));
-    const selectedData = getSelectedData(newSelectedRowIds, instance);
-    newState.selectedRowIds = newSelectedRowIds;
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedData, newState);
+    let isAllSubSelected = true;
+    row.initialSubRows.forEach((subRow) => {
+      const result = handleRow(subRow);
+      if (!result) {
+        isAllSubSelected = false;
+      }
+    });
+    // If `selectSubRows` is false, then no need to select sub-rows and just check current selection state.
+    // If a row doesn't have sub-rows then check its selection state.
+    // If it has sub-rows then check whether all of them are selected.
+    if (
+      (!instance.selectSubRows && newState.selectedRowIds[row.id]) ||
+      (!row.initialSubRows.length && newState.selectedRowIds[row.id]) ||
+      (row.initialSubRows.length && isAllSubSelected)
+    ) {
+      newSelectedRowIds[row.id] = true;
+    }
+    return !!newSelectedRowIds[row.id];
+  };
+  instance.initialRows.forEach((row) => handleRow(row));
+  const selectedData = getSelectedData(newSelectedRowIds, instance);
+  newState.selectedRowIds = newSelectedRowIds;
+  onSelect?.(selectedData, newState);
 };
 /**
  * Handles selection when toggling a row (Ctrl click or checkbox click)
  */
-export const onToggleHandler = (newState, action, instance, onSelect, isRowDisabled) => {
-    onSelectHandler(newState, instance, onSelect, isRowDisabled);
-    // Toggling a row (ctrl click or checkbox click) updates the lastSelectedRowId
-    newState.lastSelectedRowId = action.id;
+export const onToggleHandler = (
+  newState,
+  action,
+  instance,
+  onSelect,
+  isRowDisabled,
+) => {
+  onSelectHandler(newState, instance, onSelect, isRowDisabled);
+  // Toggling a row (ctrl click or checkbox click) updates the lastSelectedRowId
+  newState.lastSelectedRowId = action.id;
 };
 /**
  * Handles selection when clicked on a row.
  */
-export const onSingleSelectHandler = (state, action, instance, onSelect, isRowDisabled) => {
-    const selectedRowIds = { [action.id]: true };
-    if (instance === null || instance === void 0 ? void 0 : instance.selectSubRows) {
-        const handleRow = (row) => {
-            selectedRowIds[row.id] = true;
-            row.subRows.forEach((r) => handleRow(r));
-        };
-        handleRow(instance.rowsById[action.id]);
-    }
-    const newState = {
-        ...state,
-        lastSelectedRowId: action.id,
-        selectedRowIds,
+export const onSingleSelectHandler = (
+  state,
+  action,
+  instance,
+  onSelect,
+  isRowDisabled,
+) => {
+  const selectedRowIds = { [action.id]: true };
+  if (instance?.selectSubRows) {
+    const handleRow = (row) => {
+      selectedRowIds[row.id] = true;
+      row.subRows.forEach((r) => handleRow(r));
     };
-    // Passing to `onSelectHandler` to handle filtered sub-rows
-    onSelectHandler(newState, instance, onSelect, isRowDisabled);
-    return newState;
+    handleRow(instance.rowsById[action.id]);
+  }
+  const newState = {
+    ...state,
+    lastSelectedRowId: action.id,
+    selectedRowIds,
+  };
+  // Passing to `onSelectHandler` to handle filtered sub-rows
+  onSelectHandler(newState, instance, onSelect, isRowDisabled);
+  return newState;
 };
 /**
  * Handles selection when clicked on a row while shift key is pressed.
  */
-export const onShiftSelectHandler = (state, action, instance, onSelect, isRowDisabled) => {
-    if (instance == null) {
-        return state;
-    }
-    let startIndex = Math.max(0, instance.flatRows.findIndex((row) => row.id === state.lastSelectedRowId));
-    let endIndex = Math.max(0, instance.flatRows.findIndex((row) => row.id === action.id));
-    if (startIndex > endIndex) {
-        const temp = startIndex;
-        startIndex = endIndex;
-        endIndex = temp;
-    }
-    // If ctrl + shift click, do not lose previous selection
-    // If shift click, start new selection
-    const selectedRowIds = !!action.ctrlPressed
-        ? state.selectedRowIds
-        : {};
-    // 1. Select all rows between start and end
-    instance.flatRows
-        .slice(startIndex, endIndex + 1)
-        .forEach((r) => (selectedRowIds[r.id] = true));
-    // 2. Select all children of the last row (endIndex)
-    // Since lastRow's children come after endIndex + 1 (not selected in step 1)
-    const handleRow = (row) => {
-        selectedRowIds[row.id] = true;
-        row.subRows.forEach((r) => handleRow(r));
-    };
-    handleRow(instance.flatRows[endIndex]);
-    const newState = {
-        ...state,
-        selectedRowIds,
-    };
-    // 3.1 Deselect all selected disabled rows and their children
-    // 3.2 Convert all partially selected rows marked with tick mark to horizontal line
-    onSelectHandler(newState, instance, onSelect, isRowDisabled);
-    return newState;
+export const onShiftSelectHandler = (
+  state,
+  action,
+  instance,
+  onSelect,
+  isRowDisabled,
+) => {
+  if (instance == null) {
+    return state;
+  }
+  let startIndex = Math.max(
+    0,
+    instance.flatRows.findIndex((row) => row.id === state.lastSelectedRowId),
+  );
+  let endIndex = Math.max(
+    0,
+    instance.flatRows.findIndex((row) => row.id === action.id),
+  );
+  if (startIndex > endIndex) {
+    const temp = startIndex;
+    startIndex = endIndex;
+    endIndex = temp;
+  }
+  // If ctrl + shift click, do not lose previous selection
+  // If shift click, start new selection
+  const selectedRowIds = !!action.ctrlPressed ? state.selectedRowIds : {};
+  // 1. Select all rows between start and end
+  instance.flatRows
+    .slice(startIndex, endIndex + 1)
+    .forEach((r) => (selectedRowIds[r.id] = true));
+  // 2. Select all children of the last row (endIndex)
+  // Since lastRow's children come after endIndex + 1 (not selected in step 1)
+  const handleRow = (row) => {
+    selectedRowIds[row.id] = true;
+    row.subRows.forEach((r) => handleRow(r));
+  };
+  handleRow(instance.flatRows[endIndex]);
+  const newState = {
+    ...state,
+    selectedRowIds,
+  };
+  // 3.1 Deselect all selected disabled rows and their children
+  // 3.2 Convert all partially selected rows marked with tick mark to horizontal line
+  onSelectHandler(newState, instance, onSelect, isRowDisabled);
+  return newState;
 };
 const getSelectedData = (selectedRowIds, instance) => {
-    const selectedData = [];
-    const setSelectedData = (row) => {
-        if (selectedRowIds[row.id]) {
-            selectedData.push(row.original);
-        }
-        row.initialSubRows.forEach((subRow) => setSelectedData(subRow));
-    };
-    instance === null || instance === void 0 ? void 0 : instance.initialRows.forEach((row) => setSelectedData(row));
-    return selectedData;
+  const selectedData = [];
+  const setSelectedData = (row) => {
+    if (selectedRowIds[row.id]) {
+      selectedData.push(row.original);
+    }
+    row.initialSubRows.forEach((subRow) => setSelectedData(subRow));
+  };
+  instance?.initialRows.forEach((row) => setSelectedData(row));
+  return selectedData;
 };

package/esm/core/Table/cells/DefaultCell.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { CellRendererProps } from 'react-table';
-export declare type DefaultCellProps<T extends Record<string, unknown>> = {
+import type { CellRendererProps } from '../../../react-table/react-table.js';
+export type DefaultCellProps<T extends Record<string, unknown>> = {
     /**
      * Custom icon to be displayed at the beginning of the cell.
      */
@@ -25,5 +25,5 @@ export declare type DefaultCellProps<T extends Record<string, unknown>> = {
  *   cellRenderer: (props) => <DefaultCell {...props} />,
  * }
  */
-export declare const DefaultCell: <T extends Record<string, unknown>>(props: DefaultCellProps<T>) => JSX.Element;
+export declare const DefaultCell: <T extends Record<string, unknown>>(props: DefaultCellProps<T>) => React.JSX.Element;
 export default DefaultCell;

package/esm/core/Table/cells/DefaultCell.js

@@ -17,12 +17,47 @@ import { Box } from '../../utils/index.js';
  * }
  */
 export const DefaultCell = (props) => {
-    // Omitting `cellProps`
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, children, startIcon, endIcon, cellProps, isDisabled, className, style, status, ...rest } = props;
-    return (React.createElement(Box, { ...cellElementProps, ...rest, className: cx(cellElementClassName, className), "aria-disabled": (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original)) || undefined, "data-iui-status": status, style: { ...cellElementStyle, ...style } },
-        startIcon && (React.createElement(Box, { className: 'iui-table-cell-start-icon' }, startIcon)),
-        children,
-        endIcon && React.createElement(Box, { className: 'iui-table-cell-end-icon' }, endIcon)));
+  // Omitting `cellProps`
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {
+    cellElementProps: {
+      className: cellElementClassName,
+      style: cellElementStyle,
+      ...cellElementProps
+    },
+    children,
+    startIcon,
+    endIcon,
+    cellProps,
+    isDisabled,
+    className,
+    style,
+    status,
+    ...rest
+  } = props;
+  return React.createElement(
+    Box,
+    {
+      ...cellElementProps,
+      ...rest,
+      className: cx(cellElementClassName, className),
+      'aria-disabled': isDisabled?.(cellProps.row.original) || undefined,
+      'data-iui-status': status,
+      style: { ...cellElementStyle, ...style },
+    },
+    startIcon &&
+      React.createElement(
+        Box,
+        { className: 'iui-table-cell-start-icon' },
+        startIcon,
+      ),
+    children,
+    endIcon &&
+      React.createElement(
+        Box,
+        { className: 'iui-table-cell-end-icon' },
+        endIcon,
+      ),
+  );
 };
 export default DefaultCell;

package/esm/core/Table/cells/EditableCell.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { CellRendererProps } from 'react-table';
-export declare type EditableCellProps<T extends Record<string, unknown>> = CellRendererProps<T> & {
+import type { CellRendererProps } from '../../../react-table/react-table.js';
+export type EditableCellProps<T extends Record<string, unknown>> = CellRendererProps<T> & {
     /**
      * Callback function when cell is edited. It is called only when `onBlur` event is fired.
      * @example
@@ -30,5 +30,5 @@ export declare type EditableCellProps<T extends Record<string, unknown>> = CellR
  *   cellRenderer: (props) => <EditableCell {...props} onCellEdit={onCellEditHandler} />,
  * }
  */
-export declare const EditableCell: <T extends Record<string, unknown>>(props: EditableCellProps<T>) => JSX.Element;
+export declare const EditableCell: <T extends Record<string, unknown>>(props: EditableCellProps<T>) => React.JSX.Element;
 export default EditableCell;

package/esm/core/Table/cells/EditableCell.js

@@ -15,52 +15,75 @@ import { Box, getRandomValue } from '../../utils/index.js';
  * }
  */
 export const EditableCell = (props) => {
-    const { cellElementProps, cellProps, onCellEdit, children, isDisabled, ...rest } = props;
-    isDisabled; // To omit and prevent eslint error.
-    const sanitizeString = (text) => {
-        return text.replace(/(\r\n|\n|\r)+/gm, ' ');
-    };
-    const [value, setValue] = React.useState(() => sanitizeString(cellProps.value));
-    React.useEffect(() => {
-        setValue(sanitizeString(cellProps.value));
-    }, [cellProps.value]);
-    const [key, setKey] = React.useState(getRandomValue(10));
-    const [isDirty, setIsDirty] = React.useState(false);
-    return (React.createElement(Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, onInput: (e) => {
-            var _a;
-            setValue(sanitizeString(e.target.innerText));
-            setIsDirty(true);
-            (_a = props.onInput) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        }, onBlur: (e) => {
-            var _a;
-            if (isDirty) {
-                onCellEdit(cellProps.column.id, value, cellProps.row.original);
-            }
-            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-            // Prevents error when text is cleared.
-            // New key makes React to reattach with the DOM so it won't complain about deleted text node.
-            setKey(getRandomValue(10));
-        }, onKeyDown: (e) => {
-            var _a;
-            // Prevents from adding HTML elements (div, br) inside a cell on Enter press
-            if (e.key === 'Enter') {
-                e.preventDefault();
-            }
-            (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        }, onPaste: (e) => {
-            var _a;
-            e.preventDefault();
-            document.execCommand('inserttext', false, sanitizeString(e.clipboardData.getData('text/plain')));
-            (_a = props.onPaste) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        }, onDrop: (e) => {
-            var _a;
-            // Prevents from drag'n'dropping into a cell because it will add unwanted HTML elements
-            e.preventDefault();
-            (_a = props.onDrop) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        }, onClick: (e) => {
-            var _a;
-            e.stopPropagation();
-            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        } }, children));
+  const {
+    cellElementProps,
+    cellProps,
+    onCellEdit,
+    children,
+    isDisabled,
+    ...rest
+  } = props;
+  isDisabled; // To omit and prevent eslint error.
+  const sanitizeString = (text) => {
+    return text.replace(/(\r\n|\n|\r)+/gm, ' ');
+  };
+  const [value, setValue] = React.useState(() =>
+    sanitizeString(cellProps.value),
+  );
+  React.useEffect(() => {
+    setValue(sanitizeString(cellProps.value));
+  }, [cellProps.value]);
+  const [key, setKey] = React.useState(getRandomValue(10));
+  const [isDirty, setIsDirty] = React.useState(false);
+  return React.createElement(
+    Box,
+    {
+      ...cellElementProps,
+      contentEditable: true,
+      suppressContentEditableWarning: true,
+      key: key,
+      ...rest,
+      onInput: (e) => {
+        setValue(sanitizeString(e.target.innerText));
+        setIsDirty(true);
+        props.onInput?.(e);
+      },
+      onBlur: (e) => {
+        if (isDirty) {
+          onCellEdit(cellProps.column.id, value, cellProps.row.original);
+        }
+        props.onBlur?.(e);
+        // Prevents error when text is cleared.
+        // New key makes React to reattach with the DOM so it won't complain about deleted text node.
+        setKey(getRandomValue(10));
+      },
+      onKeyDown: (e) => {
+        // Prevents from adding HTML elements (div, br) inside a cell on Enter press
+        if (e.key === 'Enter') {
+          e.preventDefault();
+        }
+        props.onKeyDown?.(e);
+      },
+      onPaste: (e) => {
+        e.preventDefault();
+        document.execCommand(
+          'inserttext',
+          false,
+          sanitizeString(e.clipboardData.getData('text/plain')),
+        );
+        props.onPaste?.(e);
+      },
+      onDrop: (e) => {
+        // Prevents from drag'n'dropping into a cell because it will add unwanted HTML elements
+        e.preventDefault();
+        props.onDrop?.(e);
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+        props.onClick?.(e);
+      },
+    },
+    children,
+  );
 };
 export default EditableCell;

package/esm/core/Table/columns/actionColumn.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import type { HeaderProps } from 'react-table';
-import type { DropdownMenuProps } from '../../DropdownMenu/index.js';
-declare type ActionColumnProps = {
+import * as React from 'react';
+import type { HeaderProps } from '../../../react-table/react-table.js';
+import type { DropdownMenuProps } from '../../DropdownMenu/DropdownMenu.js';
+type ActionColumnProps = {
     columnManager?: boolean | {
         dropdownMenuProps: Omit<DropdownMenuProps, 'menuItems' | 'children'>;
     };
@@ -35,6 +35,6 @@ export declare const ActionColumn: <T extends Record<string, unknown>>({ columnM
     columnClassName: string;
     cellClassName: string;
     disableReordering: boolean;
-    Header: ({ allColumns, dispatch, state }: HeaderProps<T>) => JSX.Element | null;
+    Header: ({ allColumns, dispatch, state }: HeaderProps<T>) => React.JSX.Element | null;
 };
 export {};

package/esm/core/Table/columns/actionColumn.js

@@ -3,15 +3,14 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Checkbox } from '../../Checkbox/index.js';
+import { Checkbox } from '../../Checkbox/Checkbox.js';
 import { SvgColumnManager } from '../../utils/index.js';
-import { DropdownMenu } from '../../DropdownMenu/index.js';
-import { IconButton } from '../../Buttons/IconButton/index.js';
-import { MenuItem } from '../../Menu/index.js';
+import { DropdownMenu } from '../../DropdownMenu/DropdownMenu.js';
+import { IconButton } from '../../Buttons/IconButton.js';
+import { MenuItem } from '../../Menu/MenuItem.js';
 import { tableResizeStartAction } from '../Table.js';
 import { SELECTION_CELL_ID } from './selectionColumn.js';
 import { EXPANDER_CELL_ID } from './expanderColumn.js';
-import cx from 'classnames';
 const ACTION_CELL_ID = 'iui-table-action';
 /**
  * Action column that adds column manager to the Table header.
@@ -32,66 +31,90 @@ const ACTION_CELL_ID = 'iui-table-action';
  *   ),
  * },
  */
-export const ActionColumn = ({ columnManager = false, } = {}) => {
-    return {
-        id: ACTION_CELL_ID,
-        disableResizing: true,
-        disableGroupBy: true,
-        minWidth: 48,
-        width: 48,
-        maxWidth: 48,
-        columnClassName: 'iui-slot',
-        cellClassName: 'iui-slot',
-        disableReordering: true,
-        Header: ({ allColumns, dispatch, state }) => {
-            const [isOpen, setIsOpen] = React.useState(false);
-            const buttonRef = React.useRef(null);
-            if (!columnManager) {
-                return null;
-            }
-            const defaultColumnIds = [
-                SELECTION_CELL_ID,
-                EXPANDER_CELL_ID,
-                ACTION_CELL_ID,
-            ];
-            const headerCheckBoxes = () => allColumns
-                //Filters out any default columns made such as selection and expansion
-                .filter(({ id }) => !defaultColumnIds.includes(id))
-                .map((column) => {
-                const { checked } = column.getToggleHiddenProps();
-                const onClick = () => {
-                    column.toggleHidden(checked);
-                    // If no column was resized then leave table resize handling to the flexbox
-                    if (Object.keys(state.columnResizing.columnWidths).length === 0) {
-                        return;
-                    }
-                    // Triggers an update to resize the widths of all visible columns
-                    dispatch({ type: tableResizeStartAction });
-                    // If some columns were resized and some columns visibility was enabled, then horizontal scrollbar appears
-                    // and table is scrolled to the very left which means our visibility dropdown menu is not visible.
-                    // So for better UX we need to scroll to that dropdown menu.
-                    queueMicrotask(() => {
-                        var _a;
-                        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
-                    });
-                };
-                return (React.createElement(MenuItem, { key: column.id, startIcon: React.createElement(Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: (e) => e.stopPropagation(), onChange: onClick, "aria-labelledby": `iui-column-${column.id}` }), onClick: onClick, disabled: column.disableToggleVisibility },
-                    React.createElement("div", { id: `iui-column-${column.id}` }, column.render('Header'))));
-            });
-            const dropdownMenuProps = typeof columnManager !== 'boolean'
-                ? columnManager.dropdownMenuProps
-                : {};
-            return (React.createElement(DropdownMenu, { ...dropdownMenuProps, menuItems: headerCheckBoxes, onHide: (i) => {
-                    var _a;
-                    setIsOpen(false);
-                    (_a = dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
-                }, onShow: (i) => {
-                    var _a;
-                    setIsOpen(true);
-                    (_a = dropdownMenuProps.onShow) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
-                }, className: cx('iui-scroll', dropdownMenuProps.className) },
-                React.createElement(IconButton, { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
-                    React.createElement(SvgColumnManager, null))));
+export const ActionColumn = ({ columnManager = false } = {}) => {
+  return {
+    id: ACTION_CELL_ID,
+    disableResizing: true,
+    disableGroupBy: true,
+    minWidth: 48,
+    width: 48,
+    maxWidth: 48,
+    columnClassName: 'iui-slot',
+    cellClassName: 'iui-slot',
+    disableReordering: true,
+    Header: ({ allColumns, dispatch, state }) => {
+      const [isOpen, setIsOpen] = React.useState(false);
+      const buttonRef = React.useRef(null);
+      if (!columnManager) {
+        return null;
+      }
+      const defaultColumnIds = [
+        SELECTION_CELL_ID,
+        EXPANDER_CELL_ID,
+        ACTION_CELL_ID,
+      ];
+      const headerCheckBoxes = () =>
+        allColumns
+          //Filters out any default columns made such as selection and expansion
+          .filter(({ id }) => !defaultColumnIds.includes(id))
+          .map((column) => {
+            const { checked } = column.getToggleHiddenProps();
+            const onClick = () => {
+              column.toggleHidden(checked);
+              // If no column was resized then leave table resize handling to the flexbox
+              if (Object.keys(state.columnResizing.columnWidths).length === 0) {
+                return;
+              }
+              // Triggers an update to resize the widths of all visible columns
+              dispatch({ type: tableResizeStartAction });
+              // If some columns were resized and some columns visibility was enabled, then horizontal scrollbar appears
+              // and table is scrolled to the very left which means our visibility dropdown menu is not visible.
+              // So for better UX we need to scroll to that dropdown menu.
+              queueMicrotask(() => {
+                buttonRef.current?.scrollIntoView();
+              });
+            };
+            return React.createElement(
+              MenuItem,
+              {
+                key: column.id,
+                startIcon: React.createElement(Checkbox, {
+                  checked: checked,
+                  disabled: column.disableToggleVisibility,
+                  onClick: (e) => e.stopPropagation(),
+                  onChange: onClick,
+                  'aria-labelledby': `iui-column-${column.id}`,
+                }),
+                onClick: onClick,
+                disabled: column.disableToggleVisibility,
+              },
+              React.createElement(
+                'div',
+                { id: `iui-column-${column.id}` },
+                column.render('Header'),
+              ),
+            );
+          });
+      const dropdownMenuProps =
+        typeof columnManager !== 'boolean'
+          ? columnManager.dropdownMenuProps
+          : {};
+      return React.createElement(
+        DropdownMenu,
+        {
+          ...dropdownMenuProps,
+          menuItems: headerCheckBoxes,
+          onVisibleChange: (open) => {
+            setIsOpen(open);
+            dropdownMenuProps?.onVisibleChange?.(open);
+          },
         },
-    };
+        React.createElement(
+          IconButton,
+          { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
+          React.createElement(SvgColumnManager, null),
+        ),
+      );
+    },
+  };
 };