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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CellProps, CellRendererProps, Row } from 'react-table';
+import type { CellProps, CellRendererProps, Row } from '../../../react-table/react-table.js';
 export declare const EXPANDER_CELL_ID = "iui-table-expander";
 /**
  * Expander column that adds sub-content expander column to the Table.
@@ -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

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { SvgChevronRight } from '../../utils/index.js';
-import { IconButton } from '../../Buttons/index.js';
+import { IconButton } from '../../Buttons/IconButton.js';
 import { DefaultCell } from '../cells/index.js';
 export const EXPANDER_CELL_ID = 'iui-table-expander';
 /**
@@ -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,5 +1,5 @@
-/// <reference types="react" />
-import type { CellProps, CellRendererProps, HeaderProps } from 'react-table';
+import * as React from 'react';
+import type { CellProps, CellRendererProps, HeaderProps } from '../../../react-table/react-table.js';
 export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
 /**
  * Selection column that adds selection checkbox column to the Table.
@@ -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

@@ -3,7 +3,7 @@
  * 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 { DefaultCell } from '../cells/index.js';
 export const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
 /**
@@ -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,6 +1,6 @@
 import * as React from 'react';
 import type { CommonProps } from '../../utils/index.js';
-export declare type BaseFilterProps = {
+export type BaseFilterProps = {
     /**
      * Filter body.
      */
@@ -20,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

@@ -20,11 +20,19 @@ import { Box, useGlobals } from '../../utils/index.js';
  * </BaseFilter>
  */
 export const BaseFilter = (props) => {
-    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));
+  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/LabeledInput.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;

package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -3,53 +3,119 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Popover, SvgCalendar, isBefore } from '../../../utils/index.js';
-import { LabeledInput } from '../../../LabeledInput/index.js';
-import { DatePicker } from '../../../DatePicker/index.js';
-import { IconButton } from '../../../Buttons/index.js';
-const DatePickerInput = (props) => {
-    const { onChange, date, parseInput, formatDate, isFromOrTo, selectedDate, ...rest } = props;
-    const isDateDisabled = (date) => {
-        if (isFromOrTo === 'to') {
-            return isBefore(date, selectedDate);
-        }
-        else {
-            return isBefore(selectedDate, date);
-        }
-    };
-    const buttonRef = React.useRef(null);
-    const [inputValue, setInputValue] = React.useState('');
-    React.useEffect(() => {
-        if (date && !isNaN(date.valueOf())) {
-            setInputValue(formatDate(date));
-        }
-    }, [date, formatDate]);
-    const [isVisible, setIsVisible] = React.useState(false);
-    const close = React.useCallback(() => setIsVisible(false), []);
-    const onDateSelected = React.useCallback((date) => {
-        var _a;
-        onChange(date);
-        close();
-        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [close, onChange]);
-    const onInputChange = React.useCallback((event) => {
-        const value = event.target.value;
-        setInputValue(value);
-        if (!value) {
-            onChange(undefined);
-        }
-        const parsedDate = parseInput(value);
-        if (parsedDate && !isNaN(parsedDate.valueOf())) {
-            onChange(parsedDate);
-        }
-    }, [onChange, parseInput]);
-    return (React.createElement(Popover, { content: React.createElement(DatePicker, { date: date, onChange: onDateSelected, setFocus: true, isDateDisabled: isDateDisabled }), placement: 'bottom', visible: isVisible, onClickOutside: (_, e) => {
-            var _a;
-            if (!((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-                close();
-            }
-        }, appendTo: 'parent' },
-        React.createElement(LabeledInput, { displayStyle: 'inline', value: inputValue, onChange: onInputChange, onClick: close, svgIcon: React.createElement(IconButton, { styleType: 'borderless', onClick: () => setIsVisible((v) => !v), ref: buttonRef },
-                React.createElement(SvgCalendar, null)), ...rest })));
-};
+import { SvgCalendar, isBefore, useId } from '../../../utils/index.js';
+import { DatePicker } from '../../../DatePicker/DatePicker.js';
+import { InputGrid } from '../../../InputGrid/InputGrid.js';
+import { Label } from '../../../Label/Label.js';
+import { InputWithDecorations } from '../../../InputWithDecorations/InputWithDecorations.js';
+import { Popover } from '../../../Popover/Popover.js';
+const DatePickerInput = React.forwardRef((props, forwardedRef) => {
+  const uid = useId();
+  const {
+    onChange,
+    date,
+    parseInput,
+    formatDate,
+    label,
+    required,
+    disabled,
+    isFromOrTo,
+    selectedDate,
+    wrapperProps,
+    labelProps,
+    inputWrapperProps,
+    id = uid,
+    localizedNames,
+    ...rest
+  } = props;
+  const isDateDisabled = (date) => {
+    if (isFromOrTo === 'to') {
+      return isBefore(date, selectedDate);
+    } else {
+      return isBefore(selectedDate, date);
+    }
+  };
+  const buttonRef = React.useRef(null);
+  const [inputValue, setInputValue] = React.useState('');
+  React.useEffect(() => {
+    if (date && !isNaN(date.valueOf())) {
+      setInputValue(formatDate(date));
+    }
+  }, [date, formatDate]);
+  const [isVisible, setIsVisible] = React.useState(false);
+  const close = React.useCallback(() => setIsVisible(false), []);
+  const onDateSelected = React.useCallback(
+    (date) => {
+      onChange(date);
+      close();
+      buttonRef.current?.focus();
+    },
+    [close, onChange],
+  );
+  const onInputChange = React.useCallback(
+    (event) => {
+      const value = event.target.value;
+      setInputValue(value);
+      if (!value) {
+        onChange(undefined);
+      }
+      const parsedDate = parseInput(value);
+      if (parsedDate && !isNaN(parsedDate.valueOf())) {
+        onChange(parsedDate);
+      }
+    },
+    [onChange, parseInput],
+  );
+  return React.createElement(
+    InputGrid,
+    { labelPlacement: 'inline', ...wrapperProps },
+    React.createElement(
+      Label,
+      {
+        as: 'label',
+        required: required,
+        disabled: disabled,
+        htmlFor: id,
+        ...labelProps,
+      },
+      label,
+    ),
+    React.createElement(
+      InputWithDecorations,
+      { ...inputWrapperProps },
+      React.createElement(InputWithDecorations.Input, {
+        id: id,
+        value: inputValue,
+        onChange: onInputChange,
+        required: required,
+        disabled: disabled,
+        ref: forwardedRef,
+        ...rest,
+      }),
+      React.createElement(
+        Popover,
+        {
+          content: React.createElement(DatePicker, {
+            date: date,
+            onChange: onDateSelected,
+            setFocus: true,
+            isDateDisabled: isDateDisabled,
+            localizedNames: localizedNames,
+            applyBackground: false,
+          }),
+          placement: 'bottom-end',
+          visible: isVisible,
+          onVisibleChange: setIsVisible,
+          closeOnOutsideClick: true,
+          applyBackground: true,
+        },
+        React.createElement(
+          InputWithDecorations.Button,
+          { 'aria-label': 'Date picker', ref: buttonRef },
+          React.createElement(SvgCalendar, null),
+        ),
+      ),
+    ),
+  );
+});
 export default DatePickerInput;

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

@@ -1,14 +1,16 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
-export declare type DateRangeTranslation = {
+import type { DatePickerLocalizedNames } from '../../../DatePicker/DatePicker.js';
+export type DateRangeTranslation = {
     from: string;
     to: string;
+    datePicker?: DatePickerLocalizedNames;
 };
-export declare type DateRangeFilterProps<T extends Record<string, unknown>> = TableFilterProps<T> & {
+export type DateRangeFilterProps<T extends Record<string, unknown>> = TableFilterProps<T> & {
     formatDate?: (date: Date) => string;
     parseInput?: (text: string) => Date;
     placeholder?: string;
     translatedLabels?: DateRangeTranslation & FilterButtonBarTranslation;
 };
-export declare const DateRangeFilter: <T extends Record<string, unknown>>(props: DateRangeFilterProps<T>) => JSX.Element;
+export declare const DateRangeFilter: <T extends Record<string, unknown>>(props: DateRangeFilterProps<T>) => React.JSX.Element;

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

@@ -8,57 +8,120 @@ import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
 import DatePickerInput from './DatePickerInput.js';
 const defaultStrings = {
-    from: 'From',
-    to: 'To',
+  from: 'From',
+  to: 'To',
 };
 const defaultFormatDate = (date) => {
-    const formatter = new Intl.DateTimeFormat('en-us', {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
-    });
-    return formatter.format(date);
+  const formatter = new Intl.DateTimeFormat('en-us', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+  return formatter.format(date);
 };
 const defaultParseInput = (text) => {
-    // Checks whether date is in correct format e.g. Feb 11, 2021
-    if (/^[a-z]{3}\s\d{1,2},\s\d{4}$/gi.test(text)) {
-        return new Date(text);
-    }
-    return new Date('');
+  // Checks whether date is in correct format e.g. Feb 11, 2021
+  if (/^[a-z]{3}\s\d{1,2},\s\d{4}$/gi.test(text)) {
+    return new Date(text);
+  }
+  return new Date('');
 };
 export const DateRangeFilter = (props) => {
-    var _a, _b, _c, _d;
-    const { column, translatedLabels, setFilter, clearFilter, formatDate = defaultFormatDate, parseInput = defaultParseInput, placeholder = 'MMM dd, yyyy', } = props;
-    useGlobals();
-    const translatedStrings = { ...defaultStrings, ...translatedLabels };
-    const [from, setFrom] = React.useState(((_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) ? new Date((_b = column.filterValue) === null || _b === void 0 ? void 0 : _b[0]) : undefined);
-    const onFromChange = React.useCallback((date) => {
-        setFrom((prevDate) => {
-            if (prevDate || !date) {
-                return date;
-            }
-            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
-        });
-    }, []);
-    const [to, setTo] = React.useState(((_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) ? new Date((_d = column.filterValue) === null || _d === void 0 ? void 0 : _d[1]) : undefined);
-    const onToChange = React.useCallback((date) => {
-        setTo((prevDate) => {
-            if (prevDate || !date) {
-                return date;
-            }
-            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
-        });
-    }, []);
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        if (event.key === 'Enter') {
-            setFilter([from, to]);
-        }
-    };
-    return (React.createElement(BaseFilter, null,
-        React.createElement(DatePickerInput, { label: translatedStrings.from, date: from, onChange: onFromChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, selectedDate: to, isFromOrTo: 'from', setFocus: true }),
-        React.createElement(DatePickerInput, { label: translatedStrings.to, date: to, onChange: onToChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, selectedDate: from, isFromOrTo: 'to' }),
-        React.createElement(FilterButtonBar, { setFilter: () => setFilter([from, to]), clearFilter: clearFilter, translatedLabels: translatedLabels })));
+  const {
+    column,
+    translatedLabels,
+    setFilter,
+    clearFilter,
+    formatDate = defaultFormatDate,
+    parseInput = defaultParseInput,
+    placeholder = 'MMM dd, yyyy',
+  } = props;
+  useGlobals();
+  const translatedStrings = { ...defaultStrings, ...translatedLabels };
+  const [from, setFrom] = React.useState(
+    column.filterValue?.[0] ? new Date(column.filterValue?.[0]) : undefined,
+  );
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+  const onFromChange = React.useCallback((date) => {
+    setFrom((prevDate) => {
+      if (prevDate || !date) {
+        return date;
+      }
+      return new Date(
+        date.getFullYear(),
+        date.getMonth(),
+        date.getDate(),
+        0,
+        0,
+        0,
+        0,
+      );
+    });
+  }, []);
+  const [to, setTo] = React.useState(
+    column.filterValue?.[1] ? new Date(column.filterValue?.[1]) : undefined,
+  );
+  const onToChange = React.useCallback((date) => {
+    setTo((prevDate) => {
+      if (prevDate || !date) {
+        return date;
+      }
+      return new Date(
+        date.getFullYear(),
+        date.getMonth(),
+        date.getDate(),
+        23,
+        59,
+        59,
+        999,
+      );
+    });
+  }, []);
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    if (event.key === 'Enter') {
+      setFilter([from, to]);
+    }
+  };
+  return React.createElement(
+    BaseFilter,
+    null,
+    React.createElement(DatePickerInput, {
+      ref: inputRef,
+      label: translatedStrings.from,
+      date: from,
+      onChange: onFromChange,
+      formatDate: formatDate,
+      parseInput: parseInput,
+      onKeyDown: onKeyDown,
+      placeholder: placeholder,
+      selectedDate: to,
+      isFromOrTo: 'from',
+      localizedNames: translatedStrings.datePicker,
+    }),
+    React.createElement(DatePickerInput, {
+      label: translatedStrings.to,
+      date: to,
+      onChange: onToChange,
+      formatDate: formatDate,
+      parseInput: parseInput,
+      onKeyDown: onKeyDown,
+      placeholder: placeholder,
+      selectedDate: from,
+      isFromOrTo: 'to',
+      localizedNames: translatedStrings.datePicker,
+    }),
+    React.createElement(FilterButtonBar, {
+      setFilter: () => setFilter([from, to]),
+      clearFilter: clearFilter,
+      translatedLabels: translatedLabels,
+    }),
+  );
 };

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import type { CommonProps } from '../../utils/index.js';
-export declare type FilterButtonBarTranslation = {
+export type FilterButtonBarTranslation = {
     filter: string;
     clear: string;
 };
-export declare type FilterButtonBarProps = {
+export type FilterButtonBarProps = {
     /**
      * Additional content that you want to be shown on the left of the buttons.
      */
@@ -27,4 +27,4 @@ export declare type FilterButtonBarProps = {
  * @example
  * <FilterButtonBar setFilter={() => setFilter(text)} clearFilter={clearFilter} />
  */
-export declare const FilterButtonBar: (props: FilterButtonBarProps) => JSX.Element;
+export declare const FilterButtonBar: (props: FilterButtonBarProps) => React.JSX.Element;