@itwin/itwinui-react 3.11.3 → 3.12.1

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

@@ -1,69 +1,128 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { useGlobals } from '../../../../utils/index.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
 import { DatePickerInput } from './DatePickerInput.js';
 const defaultStrings = {
-    from: 'From',
-    to: 'To',
+  from: 'From',
+  to: 'To',
 };
 const defaultFormatDate = (date) => {
-    const formatter = new Intl.DateTimeFormat('en-us', {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
-    });
-    return formatter.format(date);
+  const formatter = new Intl.DateTimeFormat('en-us', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+  return formatter.format(date);
 };
 const defaultParseInput = (text) => {
-    // Checks whether date is in correct format e.g. Feb 11, 2021
-    if (/^[a-z]{3}\s\d{1,2},\s\d{4}$/gi.test(text)) {
-        return new Date(text);
-    }
-    return new Date('');
+  if (/^[a-z]{3}\s\d{1,2},\s\d{4}$/gi.test(text)) {
+    return new Date(text);
+  }
+  return new Date('');
 };
 export const DateRangeFilter = (props) => {
-    const { column, translatedLabels, setFilter, clearFilter, formatDate = defaultFormatDate, parseInput = defaultParseInput, placeholder = 'MMM dd, yyyy', showYearSelection, } = props;
-    useGlobals();
-    const translatedStrings = { ...defaultStrings, ...translatedLabels };
-    const [from, setFrom] = React.useState(column.filterValue?.[0] ? new Date(column.filterValue?.[0]) : undefined);
-    const inputRef = React.useRef(null);
-    React.useEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, []);
-    const onFromChange = React.useCallback((date) => {
-        setFrom((prevDate) => {
-            if (prevDate || !date) {
-                return date;
-            }
-            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
-        });
-    }, []);
-    const [to, setTo] = React.useState(column.filterValue?.[1] ? new Date(column.filterValue?.[1]) : undefined);
-    const onToChange = React.useCallback((date) => {
-        setTo((prevDate) => {
-            if (prevDate || !date) {
-                return date;
-            }
-            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
-        });
-    }, []);
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        if (event.key === 'Enter') {
-            setFilter([from, to]);
-        }
-    };
-    return (React.createElement(BaseFilter, null,
-        React.createElement(DatePickerInput, { ref: inputRef, label: translatedStrings.from, date: from, onChange: onFromChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, selectedDate: to, isFromOrTo: 'from', localizedNames: translatedStrings.datePicker, showYearSelection: showYearSelection }),
-        React.createElement(DatePickerInput, { label: translatedStrings.to, date: to, onChange: onToChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, selectedDate: from, isFromOrTo: 'to', localizedNames: translatedStrings.datePicker, showYearSelection: showYearSelection }),
-        React.createElement(FilterButtonBar, { setFilter: () => setFilter([from, to]), clearFilter: clearFilter, translatedLabels: translatedLabels })));
+  const {
+    column,
+    translatedLabels,
+    setFilter,
+    clearFilter,
+    formatDate = defaultFormatDate,
+    parseInput = defaultParseInput,
+    placeholder = 'MMM dd, yyyy',
+    showYearSelection,
+  } = props;
+  useGlobals();
+  const translatedStrings = {
+    ...defaultStrings,
+    ...translatedLabels,
+  };
+  const [from, setFrom] = React.useState(
+    column.filterValue?.[0] ? new Date(column.filterValue?.[0]) : undefined,
+  );
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+  const onFromChange = React.useCallback((date) => {
+    setFrom((prevDate) => {
+      if (prevDate || !date) {
+        return date;
+      }
+      return new Date(
+        date.getFullYear(),
+        date.getMonth(),
+        date.getDate(),
+        0,
+        0,
+        0,
+        0,
+      );
+    });
+  }, []);
+  const [to, setTo] = React.useState(
+    column.filterValue?.[1] ? new Date(column.filterValue?.[1]) : undefined,
+  );
+  const onToChange = React.useCallback((date) => {
+    setTo((prevDate) => {
+      if (prevDate || !date) {
+        return date;
+      }
+      return new Date(
+        date.getFullYear(),
+        date.getMonth(),
+        date.getDate(),
+        23,
+        59,
+        59,
+        999,
+      );
+    });
+  }, []);
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    if (event.key === 'Enter') {
+      setFilter([from, to]);
+    }
+  };
+  return React.createElement(
+    BaseFilter,
+    null,
+    React.createElement(DatePickerInput, {
+      ref: inputRef,
+      label: translatedStrings.from,
+      date: from,
+      onChange: onFromChange,
+      formatDate: formatDate,
+      parseInput: parseInput,
+      onKeyDown: onKeyDown,
+      placeholder: placeholder,
+      selectedDate: to,
+      isFromOrTo: 'from',
+      localizedNames: translatedStrings.datePicker,
+      showYearSelection: showYearSelection,
+    }),
+    React.createElement(DatePickerInput, {
+      label: translatedStrings.to,
+      date: to,
+      onChange: onToChange,
+      formatDate: formatDate,
+      parseInput: parseInput,
+      onKeyDown: onKeyDown,
+      placeholder: placeholder,
+      selectedDate: from,
+      isFromOrTo: 'to',
+      localizedNames: translatedStrings.datePicker,
+      showYearSelection: showYearSelection,
+    }),
+    React.createElement(FilterButtonBar, {
+      setFilter: () => setFilter([from, to]),
+      clearFilter: clearFilter,
+      translatedLabels: translatedLabels,
+    }),
+  );
 };

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

@@ -1,26 +1,48 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, useGlobals } from '../../../utils/index.js';
 import { Button } from '../../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} />
- */
 export const FilterButtonBar = (props) => {
-    const { children, setFilter, clearFilter, translatedLabels, className, style, id, } = props;
-    const translatedStrings = { ...defaultStrings, ...translatedLabels };
-    useGlobals();
-    return (React.createElement(Box, { className: cx('iui-button-bar', className), style: style, id: id },
-        children,
-        React.createElement(Button, { styleType: 'high-visibility', onClick: setFilter }, translatedStrings.filter),
-        React.createElement(Button, { onClick: clearFilter }, translatedStrings.clear)));
+  const {
+    children,
+    setFilter,
+    clearFilter,
+    translatedLabels,
+    className,
+    style,
+    id,
+  } = props;
+  const translatedStrings = {
+    ...defaultStrings,
+    ...translatedLabels,
+  };
+  useGlobals();
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-button-bar', className),
+      style: style,
+      id: id,
+    },
+    children,
+    React.createElement(
+      Button,
+      {
+        styleType: 'high-visibility',
+        onClick: setFilter,
+      },
+      translatedStrings.filter,
+    ),
+    React.createElement(
+      Button,
+      {
+        onClick: clearFilter,
+      },
+      translatedStrings.clear,
+    ),
+  );
 };

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

@@ -1,32 +1,66 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useGlobals, SvgFilterHollow, SvgFilter, } from '../../../utils/index.js';
+import {
+  useGlobals,
+  SvgFilterHollow,
+  SvgFilter,
+} from '../../../utils/index.js';
 import { IconButton } from '../../Buttons/IconButton.js';
 import { Popover } from '../../Popover/Popover.js';
-/**
- * Handles showing filter icon and opening filter component.
- */
 export const FilterToggle = (props) => {
-    const { column, className, ...rest } = props;
-    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, { content: column.render('Filter', { close, setFilter, clearFilter }), placement: 'bottom-start', visible: isVisible, onVisibleChange: setIsVisible, closeOnOutsideClick: true, applyBackground: true },
-        React.createElement(IconButton, { styleType: 'borderless', isActive: isVisible || isColumnFiltered, className: cx('iui-table-filter-button', className), "aria-label": 'Filter', onClick: (e) => {
-                // Prevents from triggering sort
-                e.stopPropagation();
-            }, "data-iui-shift": 'left', ...rest }, isColumnFiltered ? React.createElement(SvgFilter, null) : React.createElement(SvgFilterHollow, null))))));
+  const { column, className, ...rest } = props;
+  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,
+        {
+          content: column.render('Filter', {
+            close,
+            setFilter,
+            clearFilter,
+          }),
+          placement: 'bottom-start',
+          visible: isVisible,
+          onVisibleChange: setIsVisible,
+          closeOnOutsideClick: true,
+          applyBackground: true,
+        },
+        React.createElement(
+          IconButton,
+          {
+            styleType: 'borderless',
+            isActive: isVisible || isColumnFiltered,
+            className: cx('iui-table-filter-button', className),
+            'aria-label': 'Filter',
+            onClick: (e) => {
+              e.stopPropagation();
+            },
+            'data-iui-shift': 'left',
+            ...rest,
+          },
+          isColumnFiltered
+            ? React.createElement(SvgFilter, null)
+            : React.createElement(SvgFilterHollow, null),
+        ),
+      ),
+  );
 };

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

@@ -1,41 +1,62 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { useGlobals } from '../../../../utils/index.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
 import { LabeledInput } from '../../../LabeledInput/LabeledInput.js';
 const defaultStrings = {
-    from: 'From',
-    to: 'To',
+  from: 'From',
+  to: 'To',
 };
 export const NumberRangeFilter = (props) => {
-    const { column, translatedLabels, setFilter, clearFilter } = props;
-    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, null,
-        React.createElement(LabeledInput, { ref: inputRef, label: translatedStrings.from, value: from, onChange: (e) => setFrom(e.target.value), onKeyDown: onKeyDown, type: 'number', displayStyle: 'inline' }),
-        React.createElement(LabeledInput, { label: translatedStrings.to, value: to, onChange: (e) => setTo(e.target.value), type: 'number', displayStyle: 'inline', onKeyDown: onKeyDown }),
-        React.createElement(FilterButtonBar, { setFilter: () => setFilter([parseInputValue(from), parseInputValue(to)]), clearFilter: clearFilter, translatedLabels: translatedLabels })));
+  const { column, translatedLabels, setFilter, clearFilter } = props;
+  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,
+    null,
+    React.createElement(LabeledInput, {
+      ref: inputRef,
+      label: translatedStrings.from,
+      value: from,
+      onChange: (e) => setFrom(e.target.value),
+      onKeyDown: onKeyDown,
+      type: 'number',
+      displayStyle: 'inline',
+    }),
+    React.createElement(LabeledInput, {
+      label: translatedStrings.to,
+      value: to,
+      onChange: (e) => setTo(e.target.value),
+      type: 'number',
+      displayStyle: 'inline',
+      onKeyDown: onKeyDown,
+    }),
+    React.createElement(FilterButtonBar, {
+      setFilter: () => setFilter([parseInputValue(from), parseInputValue(to)]),
+      clearFilter: clearFilter,
+      translatedLabels: translatedLabels,
+    }),
+  );
 };

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

@@ -1,31 +1,39 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { useGlobals } from '../../../../utils/index.js';
 import { Input } from '../../../Input/Input.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
 export const TextFilter = (props) => {
-    const { column, translatedLabels, setFilter, clearFilter } = props;
-    useGlobals();
-    const [text, setText] = React.useState(column.filterValue ?? '');
-    const inputRef = React.useRef(null);
-    React.useEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, []);
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        if (event.key === 'Enter') {
-            setFilter(text);
-        }
-    };
-    return (React.createElement(BaseFilter, null,
-        React.createElement(Input, { ref: inputRef, value: text, onChange: (e) => setText(e.target.value), onKeyDown: onKeyDown }),
-        React.createElement(FilterButtonBar, { setFilter: () => setFilter(text), clearFilter: clearFilter, translatedLabels: translatedLabels })));
+  const { column, translatedLabels, setFilter, clearFilter } = props;
+  useGlobals();
+  const [text, setText] = React.useState(column.filterValue ?? '');
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    if (event.key === 'Enter') {
+      setFilter(text);
+    }
+  };
+  return React.createElement(
+    BaseFilter,
+    null,
+    React.createElement(Input, {
+      ref: inputRef,
+      value: text,
+      onChange: (e) => setText(e.target.value),
+      onKeyDown: onKeyDown,
+    }),
+    React.createElement(FilterButtonBar, {
+      setFilter: () => setFilter(text),
+      clearFilter: clearFilter,
+      translatedLabels: translatedLabels,
+    }),
+  );
 };

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

@@ -1,30 +1,22 @@
 const isValidDate = (date) => !!date && !isNaN(date.valueOf());
-/**
- * Filters dates.
- * @param rows Table rows
- * @param ids Property names of data object to use for filtering
- * @param filterValue Filter value
- * @returns Filtered rows
- */
 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());
-        });
+  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()
+      );
     });
+  });
 };
-/**
- * Filter is not being set if filter value is invalid.
- */
 betweenDate.autoRemove = (val) => {
-    return !val || (!isValidDate(val[0]) && !isValidDate(val[1]));
+  return !val || (!isValidDate(val[0]) && !isValidDate(val[1]));
 };
 export const customFilterFunctions = {
-    betweenDate,
+  betweenDate,
 };

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

@@ -31,31 +31,31 @@ export declare const defaultFilterFunctions: {
         autoRemove(val: string): boolean;
     };
     exactText: {
-        <T_1 extends Record<string, unknown>>(rows: Row<T_1>[], ids: IdType<T_1>[], filterValue: string): Row<T_1>[];
+        <T extends Record<string, unknown>>(rows: Row<T>[], ids: IdType<T>[], filterValue: string): Row<T>[];
         autoRemove(val: string): boolean;
     };
     exactTextCase: {
-        <T_2 extends Record<string, unknown>>(rows: Row<T_2>[], ids: IdType<T_2>[], filterValue: string): Row<T_2>[];
+        <T extends Record<string, unknown>>(rows: Row<T>[], ids: IdType<T>[], filterValue: string): Row<T>[];
         autoRemove(val: string): boolean;
     };
     includes: {
-        <T_3 extends Record<string, unknown>>(rows: Row<T_3>[], ids: IdType<T_3>[], filterValue: unknown[]): Row<T_3>[];
+        <T extends Record<string, unknown>>(rows: Row<T>[], ids: IdType<T>[], filterValue: unknown[]): Row<T>[];
         autoRemove(val: unknown[]): boolean;
     };
     includesAll: {
-        <T_4 extends Record<string, unknown>>(rows: Row<T_4>[], ids: IdType<T_4>[], filterValue: unknown[]): Row<T_4>[];
+        <T extends Record<string, unknown>>(rows: Row<T>[], ids: IdType<T>[], filterValue: unknown[]): Row<T>[];
         autoRemove(val: unknown[]): boolean;
     };
     includesSome: {
-        <T_5 extends Record<string, unknown>>(rows: Row<T_5>[], ids: IdType<T_5>[], filterValue: unknown[]): Row<T_5>[];
+        <T extends Record<string, unknown>>(rows: Row<T>[], ids: IdType<T>[], filterValue: unknown[]): Row<T>[];
         autoRemove(val: unknown[]): boolean;
     };
     includesValue: {
-        <T_6 extends Record<string, unknown>>(rows: Row<T_6>[], ids: IdType<T_6>[], filterValue: unknown[]): Row<T_6>[];
+        <T extends Record<string, unknown>>(rows: Row<T>[], ids: IdType<T>[], filterValue: unknown[]): Row<T>[];
         autoRemove(val: unknown[]): boolean;
     };
     between: {
-        <T_7 extends Record<string, unknown>>(rows: Row<T_7>[], ids: IdType<T_7>[], filterValue: [number, number]): Row<T_7>[];
+        <T extends Record<string, unknown>>(rows: Row<T>[], ids: IdType<T>[], filterValue: [number, number]): Row<T>[];
         autoRemove(val: [number, number]): boolean;
     };
 };