@itwin/itwinui-react 3.11.2 → 3.12.0

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

@@ -1,96 +1,140 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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.
- *--------------------------------------------------------------------------------------------*/
-const React = __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 = require("./DatePickerInput.js");
+Object.defineProperty(exports, 'DateRangeFilter', {
+  enumerable: true,
+  get: function () {
+    return DateRangeFilter;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../../../utils/index.js');
+const _FilterButtonBar = require('../FilterButtonBar.js');
+const _BaseFilter = require('../BaseFilter.js');
+const _DatePickerInput = 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('');
+  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', showYearSelection, } = 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.DatePickerInput, { ref: inputRef, label: translatedStrings.from, date: from, onChange: onFromChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, selectedDate: to, isFromOrTo: 'from', localizedNames: translatedStrings.datePicker, showYearSelection: showYearSelection }),
-        React.createElement(DatePickerInput_js_1.DatePickerInput, { label: translatedStrings.to, date: to, onChange: onToChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, selectedDate: from, isFromOrTo: 'to', localizedNames: translatedStrings.datePicker, showYearSelection: showYearSelection }),
-        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',
+    showYearSelection,
+  } = props;
+  (0, _index.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 (0, _jsxruntime.jsxs)(_BaseFilter.BaseFilter, {
+    children: [
+      (0, _jsxruntime.jsx)(_DatePickerInput.DatePickerInput, {
+        ref: inputRef,
+        label: translatedStrings.from,
+        date: from,
+        onChange: onFromChange,
+        formatDate: formatDate,
+        parseInput: parseInput,
+        onKeyDown: onKeyDown,
+        placeholder: placeholder,
+        selectedDate: to,
+        isFromOrTo: 'from',
+        localizedNames: translatedStrings.datePicker,
+        showYearSelection: showYearSelection,
+      }),
+      (0, _jsxruntime.jsx)(_DatePickerInput.DatePickerInput, {
+        label: translatedStrings.to,
+        date: to,
+        onChange: onToChange,
+        formatDate: formatDate,
+        parseInput: parseInput,
+        onKeyDown: onKeyDown,
+        placeholder: placeholder,
+        selectedDate: from,
+        isFromOrTo: 'to',
+        localizedNames: translatedStrings.datePicker,
+        showYearSelection: showYearSelection,
+      }),
+      (0, _jsxruntime.jsx)(_FilterButtonBar.FilterButtonBar, {
+        setFilter: () => setFilter([from, to]),
+        clearFilter: clearFilter,
+        translatedLabels: translatedLabels,
+      }),
+    ],
+  });
 };
-exports.DateRangeFilter = DateRangeFilter;

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

@@ -27,4 +27,4 @@ export type FilterButtonBarProps = {
  * @example
  * <FilterButtonBar setFilter={() => setFilter(text)} clearFilter={clearFilter} />
  */
-export declare const FilterButtonBar: (props: FilterButtonBarProps) => React.JSX.Element;
+export declare const FilterButtonBar: (props: FilterButtonBarProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,56 +1,54 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../../../utils/index.js");
-const Button_js_1 = require("../../Buttons/Button.js");
+Object.defineProperty(exports, 'FilterButtonBar', {
+  enumerable: true,
+  get: function () {
+    return FilterButtonBar;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../../utils/index.js');
+const _Button = 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.
- * @example
- * <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.useGlobals)();
+  return (0, _jsxruntime.jsxs)(_index.Box, {
+    className: (0, _classnames.default)('iui-button-bar', className),
+    style: style,
+    id: id,
+    children: [
+      children,
+      (0, _jsxruntime.jsx)(_Button.Button, {
+        styleType: 'high-visibility',
+        onClick: setFilter,
+        children: translatedStrings.filter,
+      }),
+      (0, _jsxruntime.jsx)(_Button.Button, {
+        onClick: clearFilter,
+        children: translatedStrings.clear,
+      }),
+    ],
+  });
 };
-exports.FilterButtonBar = FilterButtonBar;

package/cjs/core/Table/filters/FilterToggle.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { HeaderGroup } from '../../../react-table/react-table.js';
 import type { CommonProps } from '../../../utils/index.js';
 export type FilterToggleProps<T extends Record<string, unknown>> = {
@@ -7,4 +6,4 @@ export type FilterToggleProps<T extends Record<string, unknown>> = {
 /**
  * Handles showing filter icon and opening filter component.
  */
-export declare const FilterToggle: <T extends Record<string, unknown>>(props: FilterToggleProps<T>) => React.JSX.Element;
+export declare const FilterToggle: <T extends Record<string, unknown>>(props: FilterToggleProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,62 +1,71 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_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.
- */
+Object.defineProperty(exports, 'FilterToggle', {
+  enumerable: true,
+  get: function () {
+    return FilterToggle;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../../utils/index.js');
+const _IconButton = require('../../Buttons/IconButton.js');
+const _Popover = require('../../Popover/Popover.js');
 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();
-            }, "data-iui-shift": 'left', ...rest }, isColumnFiltered ? React.createElement(index_js_1.SvgFilter, null) : React.createElement(index_js_1.SvgFilterHollow, null))))));
+  const { column, className, ...rest } = props;
+  (0, _index.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 (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+    children:
+      column.canFilter &&
+      column.Filter &&
+      (0, _jsxruntime.jsx)(_Popover.Popover, {
+        content: column.render('Filter', {
+          close,
+          setFilter,
+          clearFilter,
+        }),
+        placement: 'bottom-start',
+        visible: isVisible,
+        onVisibleChange: setIsVisible,
+        closeOnOutsideClick: true,
+        applyBackground: true,
+        children: (0, _jsxruntime.jsx)(_IconButton.IconButton, {
+          styleType: 'borderless',
+          isActive: isVisible || isColumnFiltered,
+          className: (0, _classnames.default)(
+            'iui-table-filter-button',
+            className,
+          ),
+          'aria-label': 'Filter',
+          onClick: (e) => {
+            e.stopPropagation();
+          },
+          'data-iui-shift': 'left',
+          ...rest,
+          children: isColumnFiltered
+            ? (0, _jsxruntime.jsx)(_index.SvgFilter, {})
+            : (0, _jsxruntime.jsx)(_index.SvgFilterHollow, {}),
+        }),
+      }),
+  });
 };
-exports.FilterToggle = FilterToggle;

package/cjs/core/Table/filters/NumberRangeFilter/NumberRangeFilter.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
 export type NumberRangeTranslation = {
@@ -8,4 +7,4 @@ export type NumberRangeTranslation = {
 export type NumberRangeFilterProps<T extends Record<string, unknown>> = TableFilterProps<T> & {
     translatedLabels?: NumberRangeTranslation & FilterButtonBarTranslation;
 };
-export declare const NumberRangeFilter: <T extends Record<string, unknown>>(props: NumberRangeFilterProps<T>) => React.JSX.Element;
+export declare const NumberRangeFilter: <T extends Record<string, unknown>>(props: NumberRangeFilterProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,68 +1,75 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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.
- *--------------------------------------------------------------------------------------------*/
-const React = __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");
+Object.defineProperty(exports, 'NumberRangeFilter', {
+  enumerable: true,
+  get: function () {
+    return NumberRangeFilter;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../../../utils/index.js');
+const _FilterButtonBar = require('../FilterButtonBar.js');
+const _BaseFilter = require('../BaseFilter.js');
+const _LabeledInput = 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.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 (0, _jsxruntime.jsxs)(_BaseFilter.BaseFilter, {
+    children: [
+      (0, _jsxruntime.jsx)(_LabeledInput.LabeledInput, {
+        ref: inputRef,
+        label: translatedStrings.from,
+        value: from,
+        onChange: (e) => setFrom(e.target.value),
+        onKeyDown: onKeyDown,
+        type: 'number',
+        displayStyle: 'inline',
+      }),
+      (0, _jsxruntime.jsx)(_LabeledInput.LabeledInput, {
+        label: translatedStrings.to,
+        value: to,
+        onChange: (e) => setTo(e.target.value),
+        type: 'number',
+        displayStyle: 'inline',
+        onKeyDown: onKeyDown,
+      }),
+      (0, _jsxruntime.jsx)(_FilterButtonBar.FilterButtonBar, {
+        setFilter: () =>
+          setFilter([parseInputValue(from), parseInputValue(to)]),
+        clearFilter: clearFilter,
+        translatedLabels: translatedLabels,
+      }),
+    ],
+  });
 };
-exports.NumberRangeFilter = NumberRangeFilter;

package/cjs/core/Table/filters/TextFilter/TextFilter.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
 export type TextFilterProps<T extends Record<string, unknown>> = TableFilterProps<T> & {
     translatedLabels?: FilterButtonBarTranslation;
 };
-export declare const TextFilter: <T extends Record<string, unknown>>(props: TextFilterProps<T>) => React.JSX.Element;
+export declare const TextFilter: <T extends Record<string, unknown>>(props: TextFilterProps<T>) => import("react/jsx-runtime").JSX.Element;