@itwin/itwinui-react 3.0.3 → 3.0.5

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

@@ -1,127 +1,59 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const tslib_1 = require('tslib');
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../../../utils/index.js');
-const DatePicker_js_1 = require('../../../DatePicker/DatePicker.js');
-const InputGrid_js_1 = require('../../../InputGrid/InputGrid.js');
-const Label_js_1 = require('../../../Label/Label.js');
-const InputWithDecorations_js_1 = require('../../../InputWithDecorations/InputWithDecorations.js');
-const Popover_js_1 = require('../../../Popover/Popover.js');
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../../../utils/index.js");
+const DatePicker_js_1 = require("../../../DatePicker/DatePicker.js");
+const InputGrid_js_1 = require("../../../InputGrid/InputGrid.js");
+const Label_js_1 = require("../../../Label/Label.js");
+const InputWithDecorations_js_1 = require("../../../InputWithDecorations/InputWithDecorations.js");
+const Popover_js_1 = require("../../../Popover/Popover.js");
 const DatePickerInput = React.forwardRef((props, forwardedRef) => {
-  const uid = (0, index_js_1.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 (0, index_js_1.isBefore)(date, selectedDate);
-    } else {
-      return (0, index_js_1.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_js_1.InputGrid,
-    { labelPlacement: 'inline', ...wrapperProps },
-    React.createElement(
-      Label_js_1.Label,
-      {
-        as: 'label',
-        required: required,
-        disabled: disabled,
-        htmlFor: id,
-        ...labelProps,
-      },
-      label,
-    ),
-    React.createElement(
-      InputWithDecorations_js_1.InputWithDecorations,
-      { ...inputWrapperProps },
-      React.createElement(
-        InputWithDecorations_js_1.InputWithDecorations.Input,
-        {
-          id: id,
-          value: inputValue,
-          onChange: onInputChange,
-          required: required,
-          disabled: disabled,
-          ref: forwardedRef,
-          ...rest,
-        },
-      ),
-      React.createElement(
-        Popover_js_1.Popover,
-        {
-          content: React.createElement(DatePicker_js_1.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_js_1.InputWithDecorations.Button,
-          { 'aria-label': 'Date picker', ref: buttonRef },
-          React.createElement(index_js_1.SvgCalendar, null),
-        ),
-      ),
-    ),
-  );
+    const uid = (0, index_js_1.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 (0, index_js_1.isBefore)(date, selectedDate);
+        }
+        else {
+            return (0, index_js_1.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_js_1.InputGrid, { labelPlacement: 'inline', ...wrapperProps },
+        React.createElement(Label_js_1.Label, { as: 'label', required: required, disabled: disabled, htmlFor: id, ...labelProps }, label),
+        React.createElement(InputWithDecorations_js_1.InputWithDecorations, { ...inputWrapperProps },
+            React.createElement(InputWithDecorations_js_1.InputWithDecorations.Input, { id: id, value: inputValue, onChange: onInputChange, required: required, disabled: disabled, ref: forwardedRef, ...rest }),
+            React.createElement(Popover_js_1.Popover, { content: React.createElement(DatePicker_js_1.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_js_1.InputWithDecorations.Button, { "aria-label": 'Date picker', ref: buttonRef },
+                    React.createElement(index_js_1.SvgCalendar, null))))));
 });
 exports.default = DatePickerInput;

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

@@ -1,134 +1,74 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangeFilter = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../../../utils/index.js');
-const FilterButtonBar_js_1 = require('../FilterButtonBar.js');
-const BaseFilter_js_1 = require('../BaseFilter.js');
-const DatePickerInput_js_1 = tslib_1.__importDefault(
-  require('./DatePickerInput.js'),
-);
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../../../utils/index.js");
+const FilterButtonBar_js_1 = require("../FilterButtonBar.js");
+const BaseFilter_js_1 = require("../BaseFilter.js");
+const DatePickerInput_js_1 = tslib_1.__importDefault(require("./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('');
 };
 const DateRangeFilter = (props) => {
-  const {
-    column,
-    translatedLabels,
-    setFilter,
-    clearFilter,
-    formatDate = defaultFormatDate,
-    parseInput = defaultParseInput,
-    placeholder = 'MMM dd, yyyy',
-  } = props;
-  (0, index_js_1.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_js_1.BaseFilter,
-    null,
-    React.createElement(DatePickerInput_js_1.default, {
-      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_js_1.default, {
-      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_js_1.FilterButtonBar, {
-      setFilter: () => setFilter([from, to]),
-      clearFilter: clearFilter,
-      translatedLabels: translatedLabels,
-    }),
-  );
+    const { column, translatedLabels, setFilter, clearFilter, formatDate = defaultFormatDate, parseInput = defaultParseInput, placeholder = 'MMM dd, yyyy', } = props;
+    (0, index_js_1.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_js_1.BaseFilter, null,
+        React.createElement(DatePickerInput_js_1.default, { 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_js_1.default, { 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_js_1.FilterButtonBar, { setFilter: () => setFilter([from, to]), clearFilter: clearFilter, translatedLabels: translatedLabels })));
 };
 exports.DateRangeFilter = DateRangeFilter;

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

@@ -1,18 +1,18 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterButtonBar = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../../utils/index.js');
-const Button_js_1 = require('../../Buttons/Button.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../../utils/index.js");
+const Button_js_1 = require("../../Buttons/Button.js");
 const defaultStrings = {
-  filter: 'Filter',
-  clear: 'Clear',
+    filter: 'Filter',
+    clear: 'Clear',
 };
 /**
  * Button bar component that should be used in a filter. It already has Filter and Clear buttons.
@@ -20,35 +20,12 @@ const defaultStrings = {
  * <FilterButtonBar setFilter={() => setFilter(text)} clearFilter={clearFilter} />
  */
 const FilterButtonBar = (props) => {
-  const {
-    children,
-    setFilter,
-    clearFilter,
-    translatedLabels,
-    className,
-    style,
-    id,
-  } = props;
-  const translatedStrings = { ...defaultStrings, ...translatedLabels };
-  (0, index_js_1.useGlobals)();
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)('iui-button-bar', className),
-      style: style,
-      id: id,
-    },
-    children,
-    React.createElement(
-      Button_js_1.Button,
-      { styleType: 'high-visibility', onClick: setFilter },
-      translatedStrings.filter,
-    ),
-    React.createElement(
-      Button_js_1.Button,
-      { onClick: clearFilter },
-      translatedStrings.clear,
-    ),
-  );
+    const { children, setFilter, clearFilter, translatedLabels, className, style, id, } = props;
+    const translatedStrings = { ...defaultStrings, ...translatedLabels };
+    (0, index_js_1.useGlobals)();
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-button-bar', className), style: style, id: id },
+        children,
+        React.createElement(Button_js_1.Button, { styleType: 'high-visibility', onClick: setFilter }, translatedStrings.filter),
+        React.createElement(Button_js_1.Button, { onClick: clearFilter }, translatedStrings.clear)));
 };
 exports.FilterButtonBar = FilterButtonBar;

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

@@ -1,73 +1,37 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterToggle = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../../utils/index.js');
-const IconButton_js_1 = require('../../Buttons/IconButton.js');
-const Popover_js_1 = require('../../Popover/Popover.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../../utils/index.js");
+const IconButton_js_1 = require("../../Buttons/IconButton.js");
+const Popover_js_1 = require("../../Popover/Popover.js");
 /**
  * Handles showing filter icon and opening filter component.
  */
 const FilterToggle = (props) => {
-  const { column, className, ...rest } = props;
-  (0, index_js_1.useGlobals)();
-  const [isVisible, setIsVisible] = React.useState(false);
-  const close = React.useCallback(() => setIsVisible(false), []);
-  const setFilter = React.useCallback(
-    (filterValue) => {
-      column.setFilter(filterValue);
-      close();
-    },
-    [close, column],
-  );
-  const clearFilter = React.useCallback(() => {
-    column.setFilter(undefined);
-    close();
-  }, [close, column]);
-  const isColumnFiltered =
-    column.filterValue != null && column.filterValue !== '';
-  return React.createElement(
-    React.Fragment,
-    null,
-    column.canFilter &&
-      column.Filter &&
-      React.createElement(
-        Popover_js_1.Popover,
-        {
-          content: column.render('Filter', { close, setFilter, clearFilter }),
-          placement: 'bottom-start',
-          visible: isVisible,
-          onVisibleChange: setIsVisible,
-          closeOnOutsideClick: true,
-          applyBackground: true,
-        },
-        React.createElement(
-          IconButton_js_1.IconButton,
-          {
-            styleType: 'borderless',
-            isActive: isVisible || isColumnFiltered,
-            className: (0, classnames_1.default)(
-              'iui-table-filter-button',
-              className,
-            ),
-            'aria-label': 'Filter',
-            onClick: (e) => {
-              // Prevents from triggering sort
-              e.stopPropagation();
-            },
-            ...rest,
-          },
-          isColumnFiltered
-            ? React.createElement(index_js_1.SvgFilter, null)
-            : React.createElement(index_js_1.SvgFilterHollow, null),
-        ),
-      ),
-  );
+    const { column, className, ...rest } = props;
+    (0, index_js_1.useGlobals)();
+    const [isVisible, setIsVisible] = React.useState(false);
+    const close = React.useCallback(() => setIsVisible(false), []);
+    const setFilter = React.useCallback((filterValue) => {
+        column.setFilter(filterValue);
+        close();
+    }, [close, column]);
+    const clearFilter = React.useCallback(() => {
+        column.setFilter(undefined);
+        close();
+    }, [close, column]);
+    const isColumnFiltered = column.filterValue != null && column.filterValue !== '';
+    return (React.createElement(React.Fragment, null, column.canFilter && column.Filter && (React.createElement(Popover_js_1.Popover, { content: column.render('Filter', { close, setFilter, clearFilter }), placement: 'bottom-start', visible: isVisible, onVisibleChange: setIsVisible, closeOnOutsideClick: true, applyBackground: true },
+        React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', isActive: isVisible || isColumnFiltered, className: (0, classnames_1.default)('iui-table-filter-button', className), "aria-label": 'Filter', onClick: (e) => {
+                // Prevents from triggering sort
+                e.stopPropagation();
+            }, ...rest }, isColumnFiltered ? React.createElement(index_js_1.SvgFilter, null) : React.createElement(index_js_1.SvgFilterHollow, null))))));
 };
 exports.FilterToggle = FilterToggle;

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

@@ -1,68 +1,46 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberRangeFilter = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../../../utils/index.js');
-const FilterButtonBar_js_1 = require('../FilterButtonBar.js');
-const BaseFilter_js_1 = require('../BaseFilter.js');
-const LabeledInput_js_1 = require('../../../LabeledInput/LabeledInput.js');
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../../../utils/index.js");
+const FilterButtonBar_js_1 = require("../FilterButtonBar.js");
+const BaseFilter_js_1 = require("../BaseFilter.js");
+const LabeledInput_js_1 = require("../../../LabeledInput/LabeledInput.js");
 const defaultStrings = {
-  from: 'From',
-  to: 'To',
+    from: 'From',
+    to: 'To',
 };
 const NumberRangeFilter = (props) => {
-  const { column, translatedLabels, setFilter, clearFilter } = props;
-  (0, index_js_1.useGlobals)();
-  const translatedStrings = { ...defaultStrings, ...translatedLabels };
-  const inputRef = React.useRef(null);
-  React.useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, []);
-  const [from, setFrom] = React.useState(column.filterValue?.[0] ?? '');
-  const [to, setTo] = React.useState(column.filterValue?.[1] ?? '');
-  const parseInputValue = (value) => {
-    return !value || isNaN(Number(value)) ? undefined : Number(value);
-  };
-  const onKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    if (event.key === 'Enter') {
-      setFilter([parseInputValue(from), parseInputValue(to)]);
-    }
-  };
-  return React.createElement(
-    BaseFilter_js_1.BaseFilter,
-    null,
-    React.createElement(LabeledInput_js_1.LabeledInput, {
-      ref: inputRef,
-      label: translatedStrings.from,
-      value: from,
-      onChange: (e) => setFrom(e.target.value),
-      onKeyDown: onKeyDown,
-      type: 'number',
-      displayStyle: 'inline',
-    }),
-    React.createElement(LabeledInput_js_1.LabeledInput, {
-      label: translatedStrings.to,
-      value: to,
-      onChange: (e) => setTo(e.target.value),
-      type: 'number',
-      displayStyle: 'inline',
-      onKeyDown: onKeyDown,
-    }),
-    React.createElement(FilterButtonBar_js_1.FilterButtonBar, {
-      setFilter: () => setFilter([parseInputValue(from), parseInputValue(to)]),
-      clearFilter: clearFilter,
-      translatedLabels: translatedLabels,
-    }),
-  );
+    const { column, translatedLabels, setFilter, clearFilter } = props;
+    (0, index_js_1.useGlobals)();
+    const translatedStrings = { ...defaultStrings, ...translatedLabels };
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, []);
+    const [from, setFrom] = React.useState(column.filterValue?.[0] ?? '');
+    const [to, setTo] = React.useState(column.filterValue?.[1] ?? '');
+    const parseInputValue = (value) => {
+        return !value || isNaN(Number(value)) ? undefined : Number(value);
+    };
+    const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
+        if (event.key === 'Enter') {
+            setFilter([parseInputValue(from), parseInputValue(to)]);
+        }
+    };
+    return (React.createElement(BaseFilter_js_1.BaseFilter, null,
+        React.createElement(LabeledInput_js_1.LabeledInput, { ref: inputRef, label: translatedStrings.from, value: from, onChange: (e) => setFrom(e.target.value), onKeyDown: onKeyDown, type: 'number', displayStyle: 'inline' }),
+        React.createElement(LabeledInput_js_1.LabeledInput, { label: translatedStrings.to, value: to, onChange: (e) => setTo(e.target.value), type: 'number', displayStyle: 'inline', onKeyDown: onKeyDown }),
+        React.createElement(FilterButtonBar_js_1.FilterButtonBar, { setFilter: () => setFilter([parseInputValue(from), parseInputValue(to)]), clearFilter: clearFilter, translatedLabels: translatedLabels })));
 };
 exports.NumberRangeFilter = NumberRangeFilter;