@itwin/itwinui-react 2.0.0-dev.1 → 2.0.0-dev.3

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

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -36,26 +14,24 @@ import { getRandomValue } from '../../utils';
  *   cellRenderer: (props) => <EditableCell {...props} onCellEdit={onCellEditHandler} />,
  * }
  */
-export var EditableCell = function (props) {
-    var cellElementProps = props.cellElementProps, cellProps = props.cellProps, onCellEdit = props.onCellEdit, children = props.children, isDisabled = props.isDisabled, rest = __rest(props, ["cellElementProps", "cellProps", "onCellEdit", "children", "isDisabled"]);
+export const EditableCell = (props) => {
+    const { cellElementProps, cellProps, onCellEdit, children, isDisabled, ...rest } = props;
     isDisabled; // To omit and prevent eslint error.
-    var sanitizeString = function (text) {
+    const sanitizeString = (text) => {
         return text.replace(/(\r\n|\n|\r)+/gm, ' ');
     };
-    var _a = React.useState(function () {
-        return sanitizeString(cellProps.value);
-    }), value = _a[0], setValue = _a[1];
-    React.useEffect(function () {
+    const [value, setValue] = React.useState(() => sanitizeString(cellProps.value));
+    React.useEffect(() => {
         setValue(sanitizeString(cellProps.value));
     }, [cellProps.value]);
-    var _b = React.useState(getRandomValue(10)), key = _b[0], setKey = _b[1];
-    var _c = React.useState(false), isDirty = _c[0], setIsDirty = _c[1];
-    return (React.createElement("div", __assign({}, cellElementProps, { contentEditable: true, suppressContentEditableWarning: true, key: key }, rest, { onInput: function (e) {
+    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: function (e) {
+        }, onBlur: (e) => {
             var _a;
             if (isDirty) {
                 onCellEdit(cellProps.column.id, value, cellProps.row.original);
@@ -64,27 +40,27 @@ export var EditableCell = function (props) {
             // 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: function (e) {
+        }, 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: function (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: function (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: function (e) {
+        }, onClick: (e) => {
             var _a;
             e.stopPropagation();
             (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        } }), children));
+        } }, children));
 };
 export default EditableCell;

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

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -23,7 +12,7 @@ import { tableResizeStartAction } from '../Table';
 import { SELECTION_CELL_ID } from './selectionColumn';
 import { EXPANDER_CELL_ID } from './expanderColumn';
 import cx from 'classnames';
-var ACTION_CELL_ID = 'iui-table-action';
+const ACTION_CELL_ID = 'iui-table-action';
 /**
  * Action column that adds column manager to the Table header.
  * It is recommended to add this column to the end of the Table
@@ -43,8 +32,7 @@ var ACTION_CELL_ID = 'iui-table-action';
  *   ),
  * },
  */
-export var ActionColumn = function (_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.columnManager, columnManager = _c === void 0 ? false : _c;
+export const ActionColumn = ({ columnManager = false, } = {}) => {
     return {
         id: ACTION_CELL_ID,
         disableResizing: true,
@@ -55,59 +43,53 @@ export var ActionColumn = function (_a) {
         columnClassName: 'iui-slot',
         cellClassName: 'iui-slot',
         disableReordering: true,
-        Header: function (_a) {
-            var allColumns = _a.allColumns, dispatch = _a.dispatch, state = _a.state;
-            var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
-            var buttonRef = React.useRef(null);
+        Header: ({ allColumns, dispatch, state }) => {
+            const [isOpen, setIsOpen] = React.useState(false);
+            const buttonRef = React.useRef(null);
             if (!columnManager) {
                 return null;
             }
-            var defaultColumnIds = [
+            const defaultColumnIds = [
                 SELECTION_CELL_ID,
                 EXPANDER_CELL_ID,
                 ACTION_CELL_ID,
             ];
-            var headerCheckBoxes = function () {
-                return allColumns
-                    //Filters out any default columns made such as selection and expansion
-                    .filter(function (_a) {
-                    var id = _a.id;
-                    return !defaultColumnIds.includes(id);
-                })
-                    .map(function (column) {
-                    var checked = column.getToggleHiddenProps().checked;
-                    var onClick = function () {
-                        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(function () {
-                            var _a;
-                            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
-                        });
-                    };
-                    return (React.createElement(MenuItem, { key: column.id, icon: React.createElement(Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: function (e) { return e.stopPropagation(); }, onChange: onClick, "aria-labelledby": "iui-column-".concat(column.id) }), onClick: onClick, disabled: column.disableToggleVisibility },
-                        React.createElement("div", { id: "iui-column-".concat(column.id) }, column.render('Header'))));
-                });
-            };
-            var dropdownMenuProps = typeof columnManager !== 'boolean'
+            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, icon: 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, __assign({}, dropdownMenuProps, { menuItems: headerCheckBoxes, onHide: function (i) {
+            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: function (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) }),
+                }, className: cx('iui-scroll', dropdownMenuProps.className) },
                 React.createElement(IconButton, { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
                     React.createElement(SvgColumnManager, null))));
         },

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

@@ -20,11 +20,8 @@ export declare const EXPANDER_CELL_ID = "iui-table-expander";
  *   return rowData.name === 'Name2';
  * }, []);
  * const columns = useMemo(() => [
- *   Header: 'Table',
- *   columns: [
- *     ExpanderColumn({ subComponent, isDisabled: isExpanderDisabled }),
- *     // Rest of your columns
- *   ],
+ *   ExpanderColumn({ subComponent, isDisabled: isExpanderDisabled }),
+ *   // Rest of your columns
  * ], [isExpanderDisabled, subComponent]);
  */
 export declare const ExpanderColumn: <T extends Record<string, unknown>>(props?: {

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

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -17,7 +6,7 @@ import React from 'react';
 import { SvgChevronRight } from '../../utils';
 import { IconButton } from '../../Buttons';
 import { DefaultCell } from '../cells';
-export var EXPANDER_CELL_ID = 'iui-table-expander';
+export const EXPANDER_CELL_ID = 'iui-table-expander';
 /**
  * Expander column that adds sub-content expander column to the Table.
  * It is recommended to use it as the first column or after selection column.
@@ -37,16 +26,12 @@ export var EXPANDER_CELL_ID = 'iui-table-expander';
  *   return rowData.name === 'Name2';
  * }, []);
  * const columns = useMemo(() => [
- *   Header: 'Table',
- *   columns: [
- *     ExpanderColumn({ subComponent, isDisabled: isExpanderDisabled }),
- *     // Rest of your columns
- *   ],
+ *   ExpanderColumn({ subComponent, isDisabled: isExpanderDisabled }),
+ *   // Rest of your columns
  * ], [isExpanderDisabled, subComponent]);
  */
-export var ExpanderColumn = function (props) {
-    if (props === void 0) { props = {}; }
-    var subComponent = props.subComponent, isDisabled = props.isDisabled;
+export const ExpanderColumn = (props = {}) => {
+    const { subComponent, isDisabled } = props;
     return {
         id: EXPANDER_CELL_ID,
         disableResizing: true,
@@ -57,18 +42,18 @@ export var ExpanderColumn = function (props) {
         maxWidth: 48,
         columnClassName: 'iui-slot',
         cellClassName: 'iui-slot',
-        Cell: function (props) {
-            var row = props.row;
+        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: function (e) {
+                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: function (props) { return (React.createElement(DefaultCell, __assign({}, props, { isDisabled: function (rowData) { return !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)); } }))); },
+        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)) })),
     };
 };

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

@@ -9,11 +9,8 @@ export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
  *   return rowData.name === 'Name1';
  * }, []);
  * const columns = useMemo(() => [
- *   Header: 'Table',
- *   columns: [
- *     SelectionColumn({ isDisabled: isCheckboxDisabled }),
- *     // Rest of your columns
- *    ],
+ *   SelectionColumn({ isDisabled: isCheckboxDisabled }),
+ *   // Rest of your columns
  * ], [isCheckboxDisabled]);
  */
 export declare const SelectionColumn: <T extends Record<string, unknown>>(props?: {

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

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -16,7 +5,7 @@ var __assign = (this && this.__assign) || function () {
 import React from 'react';
 import { Checkbox } from '../../Checkbox';
 import { DefaultCell } from '../cells';
-export var SELECTION_CELL_ID = 'iui-table-checkbox-selector';
+export const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
 /**
  * Selection column that adds selection checkbox column to the Table.
  * It is recommended to use it as the first column.
@@ -25,16 +14,12 @@ export var SELECTION_CELL_ID = 'iui-table-checkbox-selector';
  *   return rowData.name === 'Name1';
  * }, []);
  * const columns = useMemo(() => [
- *   Header: 'Table',
- *   columns: [
- *     SelectionColumn({ isDisabled: isCheckboxDisabled }),
- *     // Rest of your columns
- *    ],
+ *   SelectionColumn({ isDisabled: isCheckboxDisabled }),
+ *   // Rest of your columns
  * ], [isCheckboxDisabled]);
  */
-export var SelectionColumn = function (props) {
-    if (props === void 0) { props = {}; }
-    var isDisabled = props.isDisabled;
+export const SelectionColumn = (props = {}) => {
+    const { isDisabled } = props;
     return {
         id: SELECTION_CELL_ID,
         disableResizing: true,
@@ -45,21 +30,15 @@ export var SelectionColumn = function (props) {
         maxWidth: 48,
         columnClassName: 'iui-slot',
         cellClassName: 'iui-slot',
-        Header: function (_a) {
-            var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, toggleAllRowsSelected = _a.toggleAllRowsSelected, rows = _a.rows, initialRows = _a.initialRows, state = _a.state;
-            var disabled = rows.every(function (row) { return isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original); });
-            var checked = initialRows.every(function (row) { return state.selectedRowIds[row.id] || (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original)); });
-            var indeterminate = !checked && Object.keys(state.selectedRowIds).length > 0;
-            return (React.createElement(Checkbox, __assign({}, getToggleAllRowsSelectedProps(), { style: {}, title: '' // Removes default title that comes from react-table
-                , checked: checked && !disabled, indeterminate: indeterminate, disabled: disabled, onChange: function () {
-                    return toggleAllRowsSelected(!rows.some(function (row) { return row.isSelected; }));
-                } })));
-        },
-        Cell: function (_a) {
-            var row = _a.row;
-            return (React.createElement(Checkbox, __assign({}, row.getToggleRowSelectedProps(), { style: {}, title: '' // Removes default title that comes from react-table
-                , disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original), onClick: function (e) { return e.stopPropagation(); } })));
+        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)) }));
         },
-        cellRenderer: function (props) { return (React.createElement(DefaultCell, __assign({}, props, { isDisabled: function (rowData) { return !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)); } }))); },
+        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)) })),
     };
 };

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

@@ -20,12 +20,12 @@ import { useTheme } from '../../utils';
  *   />
  * </BaseFilter>
  */
-export var BaseFilter = function (props) {
-    var children = props.children, className = props.className, style = props.style, id = props.id;
+export const BaseFilter = (props) => {
+    const { children, className, style, id } = props;
     useTheme();
     return (React.createElement("div", { className: cx('iui-table-column-filter', className), style: style, 
         // Prevents from triggering sort
-        onClick: function (e) {
+        onClick: (e) => {
             e.stopPropagation();
         }, id: id }, children));
 };

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

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -29,41 +7,41 @@ import { Popover, SvgCalendar } from '../../../utils';
 import { LabeledInput } from '../../../LabeledInput';
 import { DatePicker } from '../../../DatePicker';
 import { IconButton } from '../../../Buttons';
-var DatePickerInput = function (props) {
-    var onChange = props.onChange, date = props.date, parseInput = props.parseInput, formatDate = props.formatDate, rest = __rest(props, ["onChange", "date", "parseInput", "formatDate"]);
-    var buttonRef = React.useRef(null);
-    var _a = React.useState(''), inputValue = _a[0], setInputValue = _a[1];
-    React.useEffect(function () {
+const DatePickerInput = (props) => {
+    const { onChange, date, parseInput, formatDate, ...rest } = props;
+    const buttonRef = React.useRef(null);
+    const [inputValue, setInputValue] = React.useState('');
+    React.useEffect(() => {
         if (date && !isNaN(date.valueOf())) {
             setInputValue(formatDate(date));
         }
     }, [date, formatDate]);
-    var _b = React.useState(false), isVisible = _b[0], setIsVisible = _b[1];
-    var close = React.useCallback(function () { return setIsVisible(false); }, []);
-    var onDateSelected = React.useCallback(function (date) {
+    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]);
-    var onInputChange = React.useCallback(function (event) {
-        var value = event.target.value;
+    const onInputChange = React.useCallback((event) => {
+        const value = event.target.value;
         setInputValue(value);
         if (!value) {
             onChange(undefined);
         }
-        var parsedDate = parseInput(value);
+        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 }), placement: 'bottom', visible: isVisible, onClickOutside: function (_, e) {
+    return (React.createElement(Popover, { content: React.createElement(DatePicker, { date: date, onChange: onDateSelected, setFocus: true }), 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, __assign({ displayStyle: 'inline', value: inputValue, onChange: onInputChange, onClick: close, svgIcon: React.createElement(IconButton, { styleType: 'borderless', onClick: function () { return setIsVisible(function (v) { return !v; }); }, ref: buttonRef },
-                React.createElement(SvgCalendar, null)) }, rest))));
+        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 })));
 };
 export default DatePickerInput;

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

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -19,49 +8,49 @@ import { FilterButtonBar, } from '../FilterButtonBar';
 import { BaseFilter } from '../BaseFilter';
 import '@itwin/itwinui-css/css/table.css';
 import DatePickerInput from './DatePickerInput';
-var defaultStrings = {
+const defaultStrings = {
     from: 'From',
     to: 'To',
 };
-var defaultFormatDate = function (date) {
-    var formatter = new Intl.DateTimeFormat('en-us', {
+const defaultFormatDate = (date) => {
+    const formatter = new Intl.DateTimeFormat('en-us', {
         month: 'short',
         day: 'numeric',
         year: 'numeric',
     });
     return formatter.format(date);
 };
-var defaultParseInput = function (text) {
+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('');
 };
-export var DateRangeFilter = function (props) {
+export const DateRangeFilter = (props) => {
     var _a, _b, _c, _d;
-    var column = props.column, translatedLabels = props.translatedLabels, setFilter = props.setFilter, clearFilter = props.clearFilter, _e = props.formatDate, formatDate = _e === void 0 ? defaultFormatDate : _e, _f = props.parseInput, parseInput = _f === void 0 ? defaultParseInput : _f, _g = props.placeholder, placeholder = _g === void 0 ? 'MMM dd, yyyy' : _g;
+    const { column, translatedLabels, setFilter, clearFilter, formatDate = defaultFormatDate, parseInput = defaultParseInput, placeholder = 'MMM dd, yyyy', } = props;
     useTheme();
-    var translatedStrings = __assign(__assign({}, defaultStrings), translatedLabels);
-    var _h = 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), from = _h[0], setFrom = _h[1];
-    var onFromChange = React.useCallback(function (date) {
-        setFrom(function (prevDate) {
+    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);
         });
     }, []);
-    var _j = 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), to = _j[0], setTo = _j[1];
-    var onToChange = React.useCallback(function (date) {
-        setTo(function (prevDate) {
+    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);
         });
     }, []);
-    var onKeyDown = function (event) {
+    const onKeyDown = (event) => {
         if (event.key === 'Enter') {
             setFilter([from, to]);
         }
@@ -69,5 +58,5 @@ export var DateRangeFilter = function (props) {
     return (React.createElement(BaseFilter, null,
         React.createElement(DatePickerInput, { label: translatedStrings.from, date: from, onChange: onFromChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, setFocus: true }),
         React.createElement(DatePickerInput, { label: translatedStrings.to, date: to, onChange: onToChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder }),
-        React.createElement(FilterButtonBar, { setFilter: function () { return setFilter([from, to]); }, clearFilter: clearFilter, translatedLabels: translatedLabels })));
+        React.createElement(FilterButtonBar, { setFilter: () => setFilter([from, to]), clearFilter: clearFilter, translatedLabels: translatedLabels })));
 };

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

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -18,7 +7,7 @@ import cx from 'classnames';
 import '@itwin/itwinui-css/css/table.css';
 import { useTheme } from '../../utils';
 import { Button } from '../../Buttons';
-var defaultStrings = {
+const defaultStrings = {
     filter: 'Filter',
     clear: 'Clear',
 };
@@ -27,9 +16,9 @@ var defaultStrings = {
  * @example
  * <FilterButtonBar setFilter={() => setFilter(text)} clearFilter={clearFilter} />
  */
-export var FilterButtonBar = function (props) {
-    var children = props.children, setFilter = props.setFilter, clearFilter = props.clearFilter, translatedLabels = props.translatedLabels, className = props.className, style = props.style, id = props.id;
-    var translatedStrings = __assign(__assign({}, defaultStrings), translatedLabels);
+export const FilterButtonBar = (props) => {
+    const { children, setFilter, clearFilter, translatedLabels, className, style, id, } = props;
+    const translatedStrings = { ...defaultStrings, ...translatedLabels };
     useTheme();
     return (React.createElement("div", { className: cx('iui-button-bar', className), style: style, id: id },
         children,