@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

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

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
+import { Box } from '../../utils/index.js';
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.
@@ -16,12 +17,47 @@ import cx from 'classnames';
  * }
  */
 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("div", { ...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("div", { className: 'iui-table-cell-start-icon' }, startIcon)),
-        children,
-        endIcon && React.createElement("div", { 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> & {
+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

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { getRandomValue } from '../../utils/index.js';
+import { Box, getRandomValue } from '../../utils/index.js';
 /**
  * Editable cell.
  * It should be passed to `cellRenderer`.
@@ -15,52 +15,75 @@ import { 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("div", { ...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 * as React from 'react';
 import type { HeaderProps } from 'react-table';
 import type { DropdownMenuProps } from '../../DropdownMenu/index.js';
-declare type ActionColumnProps = {
+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

@@ -11,7 +11,6 @@ import { MenuItem } from '../../Menu/index.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),
+        ),
+      );
+    },
+  };
 };

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

@@ -39,6 +39,6 @@ export declare const ExpanderColumn: <T extends Record<string, unknown>>(props?:
     maxWidth: number;
     columnClassName: string;
     cellClassName: string;
-    Cell: (props: CellProps<T, any>) => JSX.Element | null;
-    cellRenderer: (props: CellRendererProps<T>) => JSX.Element;
+    Cell: (props: CellProps<T>) => React.JSX.Element | null;
+    cellRenderer: (props: CellRendererProps<T>) => React.JSX.Element;
 };

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

@@ -31,29 +31,42 @@ export const EXPANDER_CELL_ID = 'iui-table-expander';
  * ], [isExpanderDisabled, subComponent]);
  */
 export const ExpanderColumn = (props = {}) => {
-    const { subComponent, isDisabled } = props;
-    return {
-        id: EXPANDER_CELL_ID,
-        disableResizing: true,
-        disableGroupBy: true,
-        disableReordering: true,
-        minWidth: 48,
-        width: 48,
-        maxWidth: 48,
-        columnClassName: 'iui-slot',
-        cellClassName: 'iui-slot',
-        Cell: (props) => {
-            const { row } = props;
-            if (!(subComponent === null || subComponent === void 0 ? void 0 : subComponent(row))) {
-                return null;
-            }
-            else {
-                return (React.createElement(IconButton, { className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: (e) => {
-                        e.stopPropagation();
-                        row.toggleRowExpanded();
-                    }, disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(props.row.original) }, React.createElement(SvgChevronRight, null)));
-            }
-        },
-        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)) })),
-    };
+  const { subComponent, isDisabled } = props;
+  return {
+    id: EXPANDER_CELL_ID,
+    disableResizing: true,
+    disableGroupBy: true,
+    disableReordering: true,
+    minWidth: 48,
+    width: 48,
+    maxWidth: 48,
+    columnClassName: 'iui-slot',
+    cellClassName: 'iui-slot',
+    Cell: (props) => {
+      const { row } = props;
+      if (!subComponent?.(row)) {
+        return null;
+      } else {
+        return React.createElement(
+          IconButton,
+          {
+            className: 'iui-table-row-expander',
+            styleType: 'borderless',
+            size: 'small',
+            onClick: (e) => {
+              e.stopPropagation();
+              row.toggleRowExpanded();
+            },
+            disabled: isDisabled?.(props.row.original),
+          },
+          React.createElement(SvgChevronRight, null),
+        );
+      }
+    },
+    cellRenderer: (props) =>
+      React.createElement(DefaultCell, {
+        ...props,
+        isDisabled: (rowData) => !!isDisabled?.(rowData),
+      }),
+  };
 };

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { CellProps, CellRendererProps, HeaderProps } from 'react-table';
 export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
 /**
@@ -27,7 +27,7 @@ export declare const SelectionColumn: <T extends Record<string, unknown>>(props?
     maxWidth: number;
     columnClassName: string;
     cellClassName: string;
-    Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }: HeaderProps<T>) => JSX.Element;
-    Cell: ({ row }: CellProps<T, any>) => JSX.Element;
-    cellRenderer: (props: CellRendererProps<T>) => JSX.Element;
+    Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }: HeaderProps<T>) => React.JSX.Element;
+    Cell: ({ row }: CellProps<T>) => React.JSX.Element;
+    cellRenderer: (props: CellRendererProps<T>) => React.JSX.Element;
 };

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

@@ -19,27 +19,55 @@ export const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
  * ], [isCheckboxDisabled]);
  */
 export const SelectionColumn = (props = {}) => {
-    const { isDisabled, density } = props;
-    const densityWidth = density === 'condensed' ? 42 : density === 'extra-condensed' ? 34 : 48;
-    return {
-        id: SELECTION_CELL_ID,
-        disableResizing: true,
-        disableGroupBy: true,
-        disableReordering: true,
-        minWidth: densityWidth,
-        width: densityWidth,
-        maxWidth: densityWidth,
-        columnClassName: 'iui-slot',
-        cellClassName: 'iui-slot',
-        Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }) => {
-            const disabled = rows.every((row) => isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original));
-            const checked = initialRows.every((row) => state.selectedRowIds[row.id] || (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original)));
-            const indeterminate = !checked && Object.keys(state.selectedRowIds).length > 0;
-            return (React.createElement(Checkbox, { ...getToggleAllRowsSelectedProps(), style: {}, title: '' // Removes default title that comes from react-table
-                , checked: checked && !disabled, indeterminate: indeterminate, disabled: disabled, onChange: () => toggleAllRowsSelected(!rows.some((row) => row.isSelected)) }));
-        },
-        Cell: ({ row }) => (React.createElement(Checkbox, { ...row.getToggleRowSelectedProps(), style: {}, title: '' // Removes default title that comes from react-table
-            , disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original), onClick: (e) => e.stopPropagation() })),
-        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)) })),
-    };
+  const { isDisabled, density } = props;
+  const densityWidth =
+    density === 'condensed' ? 42 : density === 'extra-condensed' ? 34 : 48;
+  return {
+    id: SELECTION_CELL_ID,
+    disableResizing: true,
+    disableGroupBy: true,
+    disableReordering: true,
+    minWidth: densityWidth,
+    width: densityWidth,
+    maxWidth: densityWidth,
+    columnClassName: 'iui-slot',
+    cellClassName: 'iui-slot',
+    Header: ({
+      getToggleAllRowsSelectedProps,
+      toggleAllRowsSelected,
+      rows,
+      initialRows,
+      state,
+    }) => {
+      const disabled = rows.every((row) => isDisabled?.(row.original));
+      const checked = initialRows.every(
+        (row) => state.selectedRowIds[row.id] || isDisabled?.(row.original),
+      );
+      const indeterminate =
+        !checked && Object.keys(state.selectedRowIds).length > 0;
+      return React.createElement(Checkbox, {
+        ...getToggleAllRowsSelectedProps(),
+        style: {},
+        title: '', // Removes default title that comes from react-table
+        checked: checked && !disabled,
+        indeterminate: indeterminate,
+        disabled: disabled,
+        onChange: () =>
+          toggleAllRowsSelected(!rows.some((row) => row.isSelected)),
+      });
+    },
+    Cell: ({ row }) =>
+      React.createElement(Checkbox, {
+        ...row.getToggleRowSelectedProps(),
+        style: {},
+        title: '', // Removes default title that comes from react-table
+        disabled: isDisabled?.(row.original),
+        onClick: (e) => e.stopPropagation(),
+      }),
+    cellRenderer: (props) =>
+      React.createElement(DefaultCell, {
+        ...props,
+        isDisabled: (rowData) => !!isDisabled?.(rowData),
+      }),
+  };
 };

package/esm/core/Table/filters/BaseFilter.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/table.css';
 import type { CommonProps } from '../../utils/index.js';
-export declare type BaseFilterProps = {
+export type BaseFilterProps = {
     /**
      * Filter body.
      */
@@ -21,4 +20,4 @@ export declare type BaseFilterProps = {
  *   />
  * </BaseFilter>
  */
-export declare const BaseFilter: (props: BaseFilterProps) => JSX.Element;
+export declare const BaseFilter: (props: BaseFilterProps) => React.JSX.Element;

package/esm/core/Table/filters/BaseFilter.js

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/table.css';
-import { useGlobals } from '../../utils/index.js';
+import { Box, useGlobals } from '../../utils/index.js';
 /**
  * Filter wrapper that should be used when creating custom filters.
  * @example
@@ -21,11 +20,19 @@ import { useGlobals } from '../../utils/index.js';
  * </BaseFilter>
  */
 export const BaseFilter = (props) => {
-    const { children, className, style, id } = props;
-    useGlobals();
-    return (React.createElement("div", { className: cx('iui-table-column-filter', className), style: style, 
-        // Prevents from triggering sort
-        onClick: (e) => {
-            e.stopPropagation();
-        }, id: id }, children));
+  const { children, className, style, id } = props;
+  useGlobals();
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-table-column-filter', className),
+      style: style,
+      // Prevents from triggering sort
+      onClick: (e) => {
+        e.stopPropagation();
+      },
+      id: id,
+    },
+    children,
+  );
 };

package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
-import { LabeledInput } from '../../../LabeledInput/index.js';
-export declare type DatePickerInputProps = {
+import type { LabeledInput } from '../../../LabeledInput/index.js';
+import type { PolymorphicForwardRefComponent } from '../../../utils/index.js';
+import type { DatePickerLocalizedNames } from '../../../DatePicker/DatePicker.js';
+export type DatePickerInputProps = {
     date?: Date;
     onChange: (date?: Date) => void;
     parseInput: (text: string) => Date;
@@ -13,6 +15,10 @@ export declare type DatePickerInputProps = {
      * The 'to' date for the 'from' DatePickerInput or the 'from' date for the 'to' DatePickerInput
      */
     selectedDate?: Date;
+    /**
+     * Months, short days and days localized names for DatePicker
+     */
+    localizedNames?: DatePickerLocalizedNames;
 } & Omit<React.ComponentProps<typeof LabeledInput>, 'value' | 'onChange' | 'svgIcon' | 'displayStyle'>;
-declare const DatePickerInput: (props: DatePickerInputProps) => JSX.Element;
+declare const DatePickerInput: PolymorphicForwardRefComponent<"input", DatePickerInputProps>;
 export default DatePickerInput;