@itwin/itwinui-react 2.0.0-dev.2 → 2.0.0-dev.4

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

@@ -1,15 +1,4 @@
 "use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -19,9 +8,9 @@ exports.SelectionColumn = exports.SELECTION_CELL_ID = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var Checkbox_1 = require("../../Checkbox");
-var cells_1 = require("../cells");
+const react_1 = __importDefault(require("react"));
+const Checkbox_1 = require("../../Checkbox");
+const cells_1 = require("../cells");
 exports.SELECTION_CELL_ID = 'iui-table-checkbox-selector';
 /**
  * Selection column that adds selection checkbox column to the Table.
@@ -31,16 +20,12 @@ exports.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]);
  */
-var SelectionColumn = function (props) {
-    if (props === void 0) { props = {}; }
-    var isDisabled = props.isDisabled;
+const SelectionColumn = (props = {}) => {
+    const { isDisabled } = props;
     return {
         id: exports.SELECTION_CELL_ID,
         disableResizing: true,
@@ -51,22 +36,16 @@ 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_1.default.createElement(Checkbox_1.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_1.default.createElement(Checkbox_1.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_1.default.createElement(Checkbox_1.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_1.default.createElement(cells_1.DefaultCell, __assign({}, props, { isDisabled: function (rowData) { return !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)); } }))); },
+        Cell: ({ row }) => (react_1.default.createElement(Checkbox_1.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_1.default.createElement(cells_1.DefaultCell, { ...props, isDisabled: (rowData) => !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)) })),
     };
 };
 exports.SelectionColumn = SelectionColumn;

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

@@ -8,10 +8,10 @@ exports.BaseFilter = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/table.css");
-var utils_1 = require("../../utils");
+const utils_1 = require("../../utils");
 /**
  * Filter wrapper that should be used when creating custom filters.
  * @example
@@ -26,12 +26,12 @@ var utils_1 = require("../../utils");
  *   />
  * </BaseFilter>
  */
-var BaseFilter = function (props) {
-    var children = props.children, className = props.className, style = props.style, id = props.id;
+const BaseFilter = (props) => {
+    const { children, className, style, id } = props;
     (0, utils_1.useTheme)();
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-table-column-filter', className), style: style, 
         // Prevents from triggering sort
-        onClick: function (e) {
+        onClick: (e) => {
             e.stopPropagation();
         }, id: id }, children));
 };

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

@@ -1,26 +1,4 @@
 "use strict";
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -29,46 +7,46 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../../../utils");
-var LabeledInput_1 = require("../../../LabeledInput");
-var DatePicker_1 = require("../../../DatePicker");
-var Buttons_1 = require("../../../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_1.default.useRef(null);
-    var _a = react_1.default.useState(''), inputValue = _a[0], setInputValue = _a[1];
-    react_1.default.useEffect(function () {
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../../utils");
+const LabeledInput_1 = require("../../../LabeledInput");
+const DatePicker_1 = require("../../../DatePicker");
+const Buttons_1 = require("../../../Buttons");
+const DatePickerInput = (props) => {
+    const { onChange, date, parseInput, formatDate, ...rest } = props;
+    const buttonRef = react_1.default.useRef(null);
+    const [inputValue, setInputValue] = react_1.default.useState('');
+    react_1.default.useEffect(() => {
         if (date && !isNaN(date.valueOf())) {
             setInputValue(formatDate(date));
         }
     }, [date, formatDate]);
-    var _b = react_1.default.useState(false), isVisible = _b[0], setIsVisible = _b[1];
-    var close = react_1.default.useCallback(function () { return setIsVisible(false); }, []);
-    var onDateSelected = react_1.default.useCallback(function (date) {
+    const [isVisible, setIsVisible] = react_1.default.useState(false);
+    const close = react_1.default.useCallback(() => setIsVisible(false), []);
+    const onDateSelected = react_1.default.useCallback((date) => {
         var _a;
         onChange(date);
         close();
         (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [close, onChange]);
-    var onInputChange = react_1.default.useCallback(function (event) {
-        var value = event.target.value;
+    const onInputChange = react_1.default.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_1.default.createElement(utils_1.Popover, { content: react_1.default.createElement(DatePicker_1.DatePicker, { date: date, onChange: onDateSelected, setFocus: true }), placement: 'bottom', visible: isVisible, onClickOutside: function (_, e) {
+    return (react_1.default.createElement(utils_1.Popover, { content: react_1.default.createElement(DatePicker_1.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_1.default.createElement(LabeledInput_1.LabeledInput, __assign({ displayStyle: 'inline', value: inputValue, onChange: onInputChange, onClick: close, svgIcon: react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', onClick: function () { return setIsVisible(function (v) { return !v; }); }, ref: buttonRef },
-                react_1.default.createElement(utils_1.SvgCalendar, null)) }, rest))));
+        react_1.default.createElement(LabeledInput_1.LabeledInput, { displayStyle: 'inline', value: inputValue, onChange: onInputChange, onClick: close, svgIcon: react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', onClick: () => setIsVisible((v) => !v), ref: buttonRef },
+                react_1.default.createElement(utils_1.SvgCalendar, null)), ...rest })));
 };
 exports.default = DatePickerInput;

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

@@ -1,15 +1,4 @@
 "use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -19,55 +8,55 @@ exports.DateRangeFilter = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../../../utils");
-var FilterButtonBar_1 = require("../FilterButtonBar");
-var BaseFilter_1 = require("../BaseFilter");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../../utils");
+const FilterButtonBar_1 = require("../FilterButtonBar");
+const BaseFilter_1 = require("../BaseFilter");
 require("@itwin/itwinui-css/css/table.css");
-var DatePickerInput_1 = __importDefault(require("./DatePickerInput"));
-var defaultStrings = {
+const DatePickerInput_1 = __importDefault(require("./DatePickerInput"));
+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('');
 };
-var DateRangeFilter = function (props) {
+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;
     (0, utils_1.useTheme)();
-    var translatedStrings = __assign(__assign({}, defaultStrings), translatedLabels);
-    var _h = react_1.default.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_1.default.useCallback(function (date) {
-        setFrom(function (prevDate) {
+    const translatedStrings = { ...defaultStrings, ...translatedLabels };
+    const [from, setFrom] = react_1.default.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_1.default.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_1.default.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_1.default.useCallback(function (date) {
-        setTo(function (prevDate) {
+    const [to, setTo] = react_1.default.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_1.default.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]);
         }
@@ -75,6 +64,6 @@ var DateRangeFilter = function (props) {
     return (react_1.default.createElement(BaseFilter_1.BaseFilter, null,
         react_1.default.createElement(DatePickerInput_1.default, { label: translatedStrings.from, date: from, onChange: onFromChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, setFocus: true }),
         react_1.default.createElement(DatePickerInput_1.default, { label: translatedStrings.to, date: to, onChange: onToChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder }),
-        react_1.default.createElement(FilterButtonBar_1.FilterButtonBar, { setFilter: function () { return setFilter([from, to]); }, clearFilter: clearFilter, translatedLabels: translatedLabels })));
+        react_1.default.createElement(FilterButtonBar_1.FilterButtonBar, { setFilter: () => setFilter([from, to]), clearFilter: clearFilter, translatedLabels: translatedLabels })));
 };
 exports.DateRangeFilter = DateRangeFilter;

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

@@ -1,15 +1,4 @@
 "use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -19,12 +8,12 @@ exports.FilterButtonBar = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/table.css");
-var utils_1 = require("../../utils");
-var Buttons_1 = require("../../Buttons");
-var defaultStrings = {
+const utils_1 = require("../../utils");
+const Buttons_1 = require("../../Buttons");
+const defaultStrings = {
     filter: 'Filter',
     clear: 'Clear',
 };
@@ -33,9 +22,9 @@ var defaultStrings = {
  * @example
  * <FilterButtonBar setFilter={() => setFilter(text)} clearFilter={clearFilter} />
  */
-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);
+const FilterButtonBar = (props) => {
+    const { children, setFilter, clearFilter, translatedLabels, className, style, id, } = props;
+    const translatedStrings = { ...defaultStrings, ...translatedLabels };
     (0, utils_1.useTheme)();
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-button-bar', className), style: style, id: id },
         children,

package/cjs/core/Table/filters/FilterToggle.js

@@ -1,26 +1,4 @@
 "use strict";
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,33 +8,33 @@ exports.FilterToggle = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/table.css");
-var utils_1 = require("../../utils");
-var Buttons_1 = require("../../Buttons");
+const utils_1 = require("../../utils");
+const Buttons_1 = require("../../Buttons");
 /**
  * Handles showing filter icon and opening filter component.
  */
-var FilterToggle = function (props) {
-    var column = props.column, className = props.className, rest = __rest(props, ["column", "className"]);
+const FilterToggle = (props) => {
+    const { column, className, ...rest } = props;
     (0, utils_1.useTheme)();
-    var _a = react_1.default.useState(false), isVisible = _a[0], setIsVisible = _a[1];
-    var close = react_1.default.useCallback(function () { return setIsVisible(false); }, []);
-    var setFilter = react_1.default.useCallback(function (filterValue) {
+    const [isVisible, setIsVisible] = react_1.default.useState(false);
+    const close = react_1.default.useCallback(() => setIsVisible(false), []);
+    const setFilter = react_1.default.useCallback((filterValue) => {
         column.setFilter(filterValue);
         close();
     }, [close, column]);
-    var clearFilter = react_1.default.useCallback(function () {
+    const clearFilter = react_1.default.useCallback(() => {
         column.setFilter(undefined);
         close();
     }, [close, column]);
-    var isColumnFiltered = column.filterValue != null && column.filterValue !== '';
-    return (react_1.default.createElement(react_1.default.Fragment, null, column.canFilter && column.Filter && (react_1.default.createElement(utils_1.Popover, { content: column.render('Filter', { close: close, setFilter: setFilter, clearFilter: clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close },
-        react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', isActive: isVisible || isColumnFiltered, className: (0, classnames_1.default)('iui-table-filter-button', className), onClick: function (e) {
-                setIsVisible(function (v) { return !v; });
+    const isColumnFiltered = column.filterValue != null && column.filterValue !== '';
+    return (react_1.default.createElement(react_1.default.Fragment, null, column.canFilter && column.Filter && (react_1.default.createElement(utils_1.Popover, { content: column.render('Filter', { close, setFilter, clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close },
+        react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', isActive: isVisible || isColumnFiltered, className: (0, classnames_1.default)('iui-table-filter-button', className), onClick: (e) => {
+                setIsVisible((v) => !v);
                 // Prevents from triggering sort
                 e.stopPropagation();
-            } }, rest), isColumnFiltered ? react_1.default.createElement(utils_1.SvgFilter, null) : react_1.default.createElement(utils_1.SvgFilterHollow, null))))));
+            }, ...rest }, isColumnFiltered ? react_1.default.createElement(utils_1.SvgFilter, null) : react_1.default.createElement(utils_1.SvgFilterHollow, null))))));
 };
 exports.FilterToggle = FilterToggle;

package/cjs/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js

@@ -1,15 +1,4 @@
 "use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -19,36 +8,34 @@ exports.NumberRangeFilter = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../../../utils");
-var FilterButtonBar_1 = require("../FilterButtonBar");
-var BaseFilter_1 = require("../BaseFilter");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../../utils");
+const FilterButtonBar_1 = require("../FilterButtonBar");
+const BaseFilter_1 = require("../BaseFilter");
 require("@itwin/itwinui-css/css/table.css");
-var LabeledInput_1 = require("../../../LabeledInput");
-var defaultStrings = {
+const LabeledInput_1 = require("../../../LabeledInput");
+const defaultStrings = {
     from: 'From',
     to: 'To',
 };
-var NumberRangeFilter = function (props) {
+const NumberRangeFilter = (props) => {
     var _a, _b, _c, _d;
-    var column = props.column, translatedLabels = props.translatedLabels, setFilter = props.setFilter, clearFilter = props.clearFilter;
+    const { column, translatedLabels, setFilter, clearFilter } = props;
     (0, utils_1.useTheme)();
-    var translatedStrings = __assign(__assign({}, defaultStrings), translatedLabels);
-    var _e = react_1.default.useState((_b = (_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : ''), from = _e[0], setFrom = _e[1];
-    var _f = react_1.default.useState((_d = (_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : ''), to = _f[0], setTo = _f[1];
-    var parseInputValue = function (value) {
+    const translatedStrings = { ...defaultStrings, ...translatedLabels };
+    const [from, setFrom] = react_1.default.useState((_b = (_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '');
+    const [to, setTo] = react_1.default.useState((_d = (_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : '');
+    const parseInputValue = (value) => {
         return !value || isNaN(Number(value)) ? undefined : Number(value);
     };
-    var onKeyDown = function (event) {
+    const onKeyDown = (event) => {
         if (event.key === 'Enter') {
             setFilter([parseInputValue(from), parseInputValue(to)]);
         }
     };
     return (react_1.default.createElement(BaseFilter_1.BaseFilter, null,
-        react_1.default.createElement(LabeledInput_1.LabeledInput, { label: translatedStrings.from, value: from, onChange: function (e) { return setFrom(e.target.value); }, onKeyDown: onKeyDown, type: 'number', displayStyle: 'inline', setFocus: true }),
-        react_1.default.createElement(LabeledInput_1.LabeledInput, { label: translatedStrings.to, value: to, onChange: function (e) { return setTo(e.target.value); }, type: 'number', displayStyle: 'inline', onKeyDown: onKeyDown }),
-        react_1.default.createElement(FilterButtonBar_1.FilterButtonBar, { setFilter: function () {
-                return setFilter([parseInputValue(from), parseInputValue(to)]);
-            }, clearFilter: clearFilter, translatedLabels: translatedLabels })));
+        react_1.default.createElement(LabeledInput_1.LabeledInput, { label: translatedStrings.from, value: from, onChange: (e) => setFrom(e.target.value), onKeyDown: onKeyDown, type: 'number', displayStyle: 'inline', setFocus: true }),
+        react_1.default.createElement(LabeledInput_1.LabeledInput, { label: translatedStrings.to, value: to, onChange: (e) => setTo(e.target.value), type: 'number', displayStyle: 'inline', onKeyDown: onKeyDown }),
+        react_1.default.createElement(FilterButtonBar_1.FilterButtonBar, { setFilter: () => setFilter([parseInputValue(from), parseInputValue(to)]), clearFilter: clearFilter, translatedLabels: translatedLabels })));
 };
 exports.NumberRangeFilter = NumberRangeFilter;

package/cjs/core/Table/filters/TextFilter/TextFilter.js

@@ -8,24 +8,24 @@ exports.TextFilter = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
 require("@itwin/itwinui-css/css/table.css");
-var utils_1 = require("../../../utils");
-var Input_1 = require("../../../Input");
-var FilterButtonBar_1 = require("../FilterButtonBar");
-var BaseFilter_1 = require("../BaseFilter");
-var TextFilter = function (props) {
+const utils_1 = require("../../../utils");
+const Input_1 = require("../../../Input");
+const FilterButtonBar_1 = require("../FilterButtonBar");
+const BaseFilter_1 = require("../BaseFilter");
+const TextFilter = (props) => {
     var _a;
-    var column = props.column, translatedLabels = props.translatedLabels, setFilter = props.setFilter, clearFilter = props.clearFilter;
+    const { column, translatedLabels, setFilter, clearFilter } = props;
     (0, utils_1.useTheme)();
-    var _b = react_1.default.useState((_a = column.filterValue) !== null && _a !== void 0 ? _a : ''), text = _b[0], setText = _b[1];
-    var onKeyDown = function (event) {
+    const [text, setText] = react_1.default.useState((_a = column.filterValue) !== null && _a !== void 0 ? _a : '');
+    const onKeyDown = (event) => {
         if (event.key === 'Enter') {
             setFilter(text);
         }
     };
     return (react_1.default.createElement(BaseFilter_1.BaseFilter, null,
-        react_1.default.createElement(Input_1.Input, { value: text, onChange: function (e) { return setText(e.target.value); }, onKeyDown: onKeyDown, setFocus: true }),
-        react_1.default.createElement(FilterButtonBar_1.FilterButtonBar, { setFilter: function () { return setFilter(text); }, clearFilter: clearFilter, translatedLabels: translatedLabels })));
+        react_1.default.createElement(Input_1.Input, { value: text, onChange: (e) => setText(e.target.value), onKeyDown: onKeyDown, setFocus: true }),
+        react_1.default.createElement(FilterButtonBar_1.FilterButtonBar, { setFilter: () => setFilter(text), clearFilter: clearFilter, translatedLabels: translatedLabels })));
 };
 exports.TextFilter = TextFilter;

package/cjs/core/Table/filters/customFilterFunctions.js

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.customFilterFunctions = void 0;
-var isValidDate = function (date) {
-    return !!date && !isNaN(date.valueOf());
-};
+const isValidDate = (date) => !!date && !isNaN(date.valueOf());
 /**
  * Filters dates.
  * @param rows Table rows
@@ -11,14 +9,14 @@ var isValidDate = function (date) {
  * @param filterValue Filter value
  * @returns Filtered rows
  */
-var betweenDate = function (rows, ids, filterValue) {
-    var _a = filterValue || [], min = _a[0], max = _a[1];
-    var MAX_DATE_VALUE = 8640000000000000;
-    var minValue = (isValidDate(min) ? min : new Date(-MAX_DATE_VALUE));
-    var maxValue = (isValidDate(max) ? max : new Date(MAX_DATE_VALUE));
-    return rows.filter(function (row) {
-        return ids.some(function (id) {
-            var rowValue = row.values[id];
+const betweenDate = (rows, ids, filterValue) => {
+    const [min, max] = filterValue || [];
+    const MAX_DATE_VALUE = 8640000000000000;
+    const minValue = (isValidDate(min) ? min : new Date(-MAX_DATE_VALUE));
+    const maxValue = (isValidDate(max) ? max : new Date(MAX_DATE_VALUE));
+    return rows.filter((row) => {
+        return ids.some((id) => {
+            const rowValue = row.values[id];
             return (rowValue.valueOf() >= minValue.valueOf() &&
                 rowValue.valueOf() <= maxValue.valueOf());
         });
@@ -27,9 +25,9 @@ var betweenDate = function (rows, ids, filterValue) {
 /**
  * Filter is not being set if filter value is invalid.
  */
-betweenDate.autoRemove = function (val) {
+betweenDate.autoRemove = (val) => {
     return !val || (!isValidDate(val[0]) && !isValidDate(val[1]));
 };
 exports.customFilterFunctions = {
-    betweenDate: betweenDate,
+    betweenDate,
 };