@itwin/itwinui-react 3.13.4 → 3.14.0

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

@@ -4,84 +4,108 @@ import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
 import { DatePickerInput } from './DatePickerInput.js';
 let defaultStrings = {
-    from: 'From',
-    to: 'To'
+  from: 'From',
+  to: 'To',
 };
-let defaultFormatDate = (date)=>{
-    let formatter = new Intl.DateTimeFormat('en-us', {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric'
-    });
-    return formatter.format(date);
+let defaultFormatDate = (date) => {
+  let formatter = new Intl.DateTimeFormat('en-us', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+  return formatter.format(date);
 };
-let defaultParseInput = (text)=>{
-    if (/^[a-z]{3}\s\d{1,2},\s\d{4}$/gi.test(text)) return new Date(text);
-    return new Date('');
+let defaultParseInput = (text) => {
+  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)=>{
-    let { column, translatedLabels, setFilter, clearFilter, formatDate = defaultFormatDate, parseInput = defaultParseInput, placeholder = 'MMM dd, yyyy', showYearSelection } = props;
-    useGlobals();
-    let translatedStrings = {
-        ...defaultStrings,
-        ...translatedLabels
-    };
-    let [from, setFrom] = React.useState(column.filterValue?.[0] ? new Date(column.filterValue?.[0]) : void 0);
-    let inputRef = React.useRef(null);
-    React.useEffect(()=>{
-        if (inputRef.current) inputRef.current.focus();
-    }, []);
-    let onFromChange = React.useCallback((date)=>{
-        setFrom((prevDate)=>{
-            if (prevDate || !date) return date;
-            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
-        });
-    }, []);
-    let [to, setTo] = React.useState(column.filterValue?.[1] ? new Date(column.filterValue?.[1]) : void 0);
-    let onToChange = React.useCallback((date)=>{
-        setTo((prevDate)=>{
-            if (prevDate || !date) return date;
-            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
-        });
-    }, []);
-    let onKeyDown = (event)=>{
-        if (event.altKey) return;
-        if ('Enter' === event.key) 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
-    }));
+export const DateRangeFilter = (props) => {
+  let {
+    column,
+    translatedLabels,
+    setFilter,
+    clearFilter,
+    formatDate = defaultFormatDate,
+    parseInput = defaultParseInput,
+    placeholder = 'MMM dd, yyyy',
+    showYearSelection,
+  } = props;
+  useGlobals();
+  let translatedStrings = {
+    ...defaultStrings,
+    ...translatedLabels,
+  };
+  let [from, setFrom] = React.useState(
+    column.filterValue?.[0] ? new Date(column.filterValue?.[0]) : void 0,
+  );
+  let inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (inputRef.current) inputRef.current.focus();
+  }, []);
+  let onFromChange = React.useCallback((date) => {
+    setFrom((prevDate) => {
+      if (prevDate || !date) return date;
+      return new Date(
+        date.getFullYear(),
+        date.getMonth(),
+        date.getDate(),
+        0,
+        0,
+        0,
+        0,
+      );
+    });
+  }, []);
+  let [to, setTo] = React.useState(
+    column.filterValue?.[1] ? new Date(column.filterValue?.[1]) : void 0,
+  );
+  let onToChange = React.useCallback((date) => {
+    setTo((prevDate) => {
+      if (prevDate || !date) return date;
+      return new Date(
+        date.getFullYear(),
+        date.getMonth(),
+        date.getDate(),
+        23,
+        59,
+        59,
+        999,
+      );
+    });
+  }, []);
+  return React.createElement(
+    BaseFilter,
+    {
+      onSubmit: () => setFilter([from, to]),
+    },
+    React.createElement(DatePickerInput, {
+      ref: inputRef,
+      label: translatedStrings.from,
+      date: from,
+      onChange: onFromChange,
+      formatDate: formatDate,
+      parseInput: parseInput,
+      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,
+      placeholder: placeholder,
+      selectedDate: from,
+      isFromOrTo: 'to',
+      localizedNames: translatedStrings.datePicker,
+      showYearSelection: showYearSelection,
+    }),
+    React.createElement(FilterButtonBar, {
+      clearFilter: clearFilter,
+      translatedLabels: translatedLabels,
+    }),
+  );
 };

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

@@ -3,24 +3,47 @@ import cx from 'classnames';
 import { Box, useGlobals } from '../../../utils/index.js';
 import { Button } from '../../Buttons/Button.js';
 let defaultStrings = {
-    filter: 'Filter',
-    clear: 'Clear'
+  filter: 'Filter',
+  clear: 'Clear',
 };
-export const FilterButtonBar = (props)=>{
-    let { children, setFilter, clearFilter, translatedLabels, className, style, id } = props;
-    let 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));
+export const FilterButtonBar = (props) => {
+  let {
+    children,
+    setFilter,
+    clearFilter,
+    translatedLabels,
+    className,
+    style,
+    id,
+  } = props;
+  let translatedStrings = {
+    ...defaultStrings,
+    ...translatedLabels,
+  };
+  useGlobals();
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-button-bar', className),
+      style: style,
+      id: id,
+    },
+    children,
+    React.createElement(
+      Button,
+      {
+        type: 'submit',
+        styleType: 'high-visibility',
+        onClick: setFilter,
+      },
+      translatedStrings.filter,
+    ),
+    React.createElement(
+      Button,
+      {
+        onClick: clearFilter,
+      },
+      translatedStrings.clear,
+    ),
+  );
 };

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

@@ -1,48 +1,66 @@
 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';
-export const FilterToggle = (props)=>{
-    let { column, className, ...rest } = props;
-    useGlobals();
-    let [isVisible, setIsVisible] = React.useState(false);
-    let close = React.useCallback(()=>setIsVisible(false), []);
-    let setFilter = React.useCallback((filterValue)=>{
-        column.setFilter(filterValue);
-        close();
-    }, [
-        close,
-        column
-    ]);
-    let clearFilter = React.useCallback(()=>{
-        column.setFilter(void 0);
-        close();
-    }, [
-        close,
-        column
-    ]);
-    let isColumnFiltered = null != column.filterValue && '' !== column.filterValue;
-    return React.createElement(React.Fragment, null, column.canFilter && column.Filter && React.createElement(Popover, {
-        content: column.render('Filter', {
+export const FilterToggle = (props) => {
+  let { column, className, ...rest } = props;
+  useGlobals();
+  let [isVisible, setIsVisible] = React.useState(false);
+  let close = React.useCallback(() => setIsVisible(false), []);
+  let setFilter = React.useCallback(
+    (filterValue) => {
+      column.setFilter(filterValue);
+      close();
+    },
+    [close, column],
+  );
+  let clearFilter = React.useCallback(() => {
+    column.setFilter(void 0);
+    close();
+  }, [close, column]);
+  let isColumnFiltered =
+    null != column.filterValue && '' !== 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();
+            clearFilter,
+          }),
+          placement: 'bottom-start',
+          visible: isVisible,
+          onVisibleChange: setIsVisible,
+          closeOnOutsideClick: true,
+          applyBackground: true,
         },
-        "data-iui-shift": "left",
-        ...rest
-    }, isColumnFiltered ? React.createElement(SvgFilter, null) : React.createElement(SvgFilterHollow, null))));
+        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/DEV-esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js

@@ -4,51 +4,47 @@ import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
 import { LabeledInput } from '../../../LabeledInput/LabeledInput.js';
 let defaultStrings = {
-    from: 'From',
-    to: 'To'
+  from: 'From',
+  to: 'To',
 };
-export const NumberRangeFilter = (props)=>{
-    let { column, translatedLabels, setFilter, clearFilter } = props;
-    useGlobals();
-    let translatedStrings = {
-        ...defaultStrings,
-        ...translatedLabels
-    };
-    let inputRef = React.useRef(null);
-    React.useEffect(()=>{
-        if (inputRef.current) inputRef.current.focus();
-    }, []);
-    let [from, setFrom] = React.useState(column.filterValue?.[0] ?? '');
-    let [to, setTo] = React.useState(column.filterValue?.[1] ?? '');
-    let parseInputValue = (value)=>!value || isNaN(Number(value)) ? void 0 : Number(value);
-    let onKeyDown = (event)=>{
-        if (event.altKey) return;
-        if ('Enter' === event.key) 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
-    }));
+export const NumberRangeFilter = (props) => {
+  let { column, translatedLabels, setFilter, clearFilter } = props;
+  useGlobals();
+  let translatedStrings = {
+    ...defaultStrings,
+    ...translatedLabels,
+  };
+  let inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (inputRef.current) inputRef.current.focus();
+  }, []);
+  let [from, setFrom] = React.useState(column.filterValue?.[0] ?? '');
+  let [to, setTo] = React.useState(column.filterValue?.[1] ?? '');
+  let parseInputValue = (value) =>
+    !value || isNaN(Number(value)) ? void 0 : Number(value);
+  return React.createElement(
+    BaseFilter,
+    {
+      onSubmit: () => setFilter([parseInputValue(from), parseInputValue(to)]),
+    },
+    React.createElement(LabeledInput, {
+      ref: inputRef,
+      label: translatedStrings.from,
+      value: from,
+      onChange: (e) => setFrom(e.target.value),
+      type: 'number',
+      displayStyle: 'inline',
+    }),
+    React.createElement(LabeledInput, {
+      label: translatedStrings.to,
+      value: to,
+      onChange: (e) => setTo(e.target.value),
+      type: 'number',
+      displayStyle: 'inline',
+    }),
+    React.createElement(FilterButtonBar, {
+      clearFilter: clearFilter,
+      translatedLabels: translatedLabels,
+    }),
+  );
 };

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

@@ -3,26 +3,28 @@ 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)=>{
-    let { column, translatedLabels, setFilter, clearFilter } = props;
-    useGlobals();
-    let [text, setText] = React.useState(column.filterValue ?? '');
-    let inputRef = React.useRef(null);
-    React.useEffect(()=>{
-        if (inputRef.current) inputRef.current.focus();
-    }, []);
-    let onKeyDown = (event)=>{
-        if (event.altKey) return;
-        if ('Enter' === event.key) 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
-    }));
+export const TextFilter = (props) => {
+  let { column, translatedLabels, setFilter, clearFilter } = props;
+  useGlobals();
+  let [text, setText] = React.useState(column.filterValue ?? '');
+  let inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (inputRef.current) inputRef.current.focus();
+  }, []);
+  return React.createElement(
+    BaseFilter,
+    {
+      onSubmit: () => setFilter(text),
+    },
+    React.createElement(Input, {
+      ref: inputRef,
+      value: text,
+      onChange: (e) => setText(e.target.value),
+      required: true,
+    }),
+    React.createElement(FilterButtonBar, {
+      clearFilter: clearFilter,
+      translatedLabels: translatedLabels,
+    }),
+  );
 };

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

@@ -1,15 +1,21 @@
-let isValidDate = (date)=>!!date && !isNaN(date.valueOf());
-let betweenDate = (rows, ids, filterValue)=>{
-    let [min, max] = filterValue || [];
-    let MAX_DATE_VALUE = 8640000000000000;
-    let minValue = isValidDate(min) ? min : new Date(-MAX_DATE_VALUE);
-    let maxValue = isValidDate(max) ? max : new Date(MAX_DATE_VALUE);
-    return rows.filter((row)=>ids.some((id)=>{
-            let rowValue = row.values[id];
-            return rowValue.valueOf() >= minValue.valueOf() && rowValue.valueOf() <= maxValue.valueOf();
-        }));
+let isValidDate = (date) => !!date && !isNaN(date.valueOf());
+let betweenDate = (rows, ids, filterValue) => {
+  let [min, max] = filterValue || [];
+  let MAX_DATE_VALUE = 8640000000000000;
+  let minValue = isValidDate(min) ? min : new Date(-MAX_DATE_VALUE);
+  let maxValue = isValidDate(max) ? max : new Date(MAX_DATE_VALUE);
+  return rows.filter((row) =>
+    ids.some((id) => {
+      let rowValue = row.values[id];
+      return (
+        rowValue.valueOf() >= minValue.valueOf() &&
+        rowValue.valueOf() <= maxValue.valueOf()
+      );
+    }),
+  );
 };
-betweenDate.autoRemove = (val)=>!val || !isValidDate(val[0]) && !isValidDate(val[1]);
+betweenDate.autoRemove = (val) =>
+  !val || (!isValidDate(val[0]) && !isValidDate(val[1]));
 export const customFilterFunctions = {
-    betweenDate
+  betweenDate,
 };