@itwin/itwinui-react 3.13.4 → 3.14.0

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

@@ -1,75 +1,103 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "DatePickerInput", {
-    enumerable: true,
-    get: function() {
-        return DatePickerInput;
-    }
+Object.defineProperty(exports, 'DatePickerInput', {
+  enumerable: true,
+  get: function () {
+    return DatePickerInput;
+  },
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = _interop_require_wildcard._(require("react"));
-const _index = require("../../../../utils/index.js");
-const _DatePicker = require("../../../DatePicker/DatePicker.js");
-const _InputGrid = require("../../../InputGrid/InputGrid.js");
-const _Label = require("../../../Label/Label.js");
-const _InputWithDecorations = require("../../../InputWithDecorations/InputWithDecorations.js");
-const _Popover = require("../../../Popover/Popover.js");
-const DatePickerInput = _react.forwardRef((props, forwardedRef)=>{
-    let uid = (0, _index.useId)();
-    let { onChange, date, parseInput, formatDate, label, required, disabled, isFromOrTo, selectedDate, wrapperProps, labelProps, inputWrapperProps, id = uid, localizedNames, showYearSelection, ...rest } = props;
-    let isDateDisabled = (date)=>{
-        if ('to' === isFromOrTo) return (0, _index.isBefore)(date, selectedDate);
-        return (0, _index.isBefore)(selectedDate, date);
-    };
-    let buttonRef = _react.useRef(null);
-    let [inputValue, setInputValue] = _react.useState('');
-    _react.useEffect(()=>{
-        if (date && !isNaN(date.valueOf())) setInputValue(formatDate(date));
-    }, [
-        date,
-        formatDate
-    ]);
-    let [isVisible, setIsVisible] = _react.useState(false);
-    let close = _react.useCallback(()=>setIsVisible(false), []);
-    let onDateSelected = _react.useCallback((date)=>{
-        onChange(date);
-        close();
-        buttonRef.current?.focus();
-    }, [
-        close,
-        onChange
-    ]);
-    let onInputChange = _react.useCallback((event)=>{
-        let value = event.target.value;
-        setInputValue(value);
-        if (!value) onChange(void 0);
-        let parsedDate = parseInput(value);
-        if (parsedDate && !isNaN(parsedDate.valueOf())) onChange(parsedDate);
-    }, [
-        onChange,
-        parseInput
-    ]);
-    return _react.createElement(_InputGrid.InputGrid, {
-        labelPlacement: "inline",
-        ...wrapperProps
-    }, _react.createElement(_Label.Label, {
-        as: "label",
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../../../utils/index.js');
+const _DatePicker = require('../../../DatePicker/DatePicker.js');
+const _InputGrid = require('../../../InputGrid/InputGrid.js');
+const _Label = require('../../../Label/Label.js');
+const _InputWithDecorations = require('../../../InputWithDecorations/InputWithDecorations.js');
+const _Popover = require('../../../Popover/Popover.js');
+const DatePickerInput = _react.forwardRef((props, forwardedRef) => {
+  let uid = (0, _index.useId)();
+  let {
+    onChange,
+    date,
+    parseInput,
+    formatDate,
+    label,
+    required,
+    disabled,
+    isFromOrTo,
+    selectedDate,
+    wrapperProps,
+    labelProps,
+    inputWrapperProps,
+    id = uid,
+    localizedNames,
+    showYearSelection,
+    ...rest
+  } = props;
+  let isDateDisabled = (date) => {
+    if ('to' === isFromOrTo) return (0, _index.isBefore)(date, selectedDate);
+    return (0, _index.isBefore)(selectedDate, date);
+  };
+  let buttonRef = _react.useRef(null);
+  let [inputValue, setInputValue] = _react.useState('');
+  _react.useEffect(() => {
+    if (date && !isNaN(date.valueOf())) setInputValue(formatDate(date));
+  }, [date, formatDate]);
+  let [isVisible, setIsVisible] = _react.useState(false);
+  let close = _react.useCallback(() => setIsVisible(false), []);
+  let onDateSelected = _react.useCallback(
+    (date) => {
+      onChange(date);
+      close();
+      buttonRef.current?.focus();
+    },
+    [close, onChange],
+  );
+  let onInputChange = _react.useCallback(
+    (event) => {
+      let value = event.target.value;
+      setInputValue(value);
+      if (!value) onChange(void 0);
+      let parsedDate = parseInput(value);
+      if (parsedDate && !isNaN(parsedDate.valueOf())) onChange(parsedDate);
+    },
+    [onChange, parseInput],
+  );
+  return _react.createElement(
+    _InputGrid.InputGrid,
+    {
+      labelPlacement: 'inline',
+      ...wrapperProps,
+    },
+    _react.createElement(
+      _Label.Label,
+      {
+        as: 'label',
         required: required,
         disabled: disabled,
         htmlFor: id,
-        ...labelProps
-    }, label), _react.createElement(_InputWithDecorations.InputWithDecorations, inputWrapperProps, _react.createElement(_InputWithDecorations.InputWithDecorations.Input, {
+        ...labelProps,
+      },
+      label,
+    ),
+    _react.createElement(
+      _InputWithDecorations.InputWithDecorations,
+      inputWrapperProps,
+      _react.createElement(_InputWithDecorations.InputWithDecorations.Input, {
         id: id,
         value: inputValue,
         onChange: onInputChange,
         required: required,
         disabled: disabled,
         ref: forwardedRef,
-        ...rest
-    }), _react.createElement(_Popover.Popover, {
-        content: _react.createElement(_DatePicker.DatePicker, {
+        ...rest,
+      }),
+      _react.createElement(
+        _Popover.Popover,
+        {
+          content: _react.createElement(_DatePicker.DatePicker, {
             date: date,
             onChange: onDateSelected,
             setFocus: true,
@@ -77,15 +105,23 @@ const DatePickerInput = _react.forwardRef((props, forwardedRef)=>{
             localizedNames: localizedNames,
             applyBackground: false,
             showDatesOutsideMonth: false,
-            showYearSelection: showYearSelection
-        }),
-        placement: "bottom-end",
-        visible: isVisible,
-        onVisibleChange: setIsVisible,
-        closeOnOutsideClick: true,
-        applyBackground: true
-    }, _react.createElement(_InputWithDecorations.InputWithDecorations.Button, {
-        "aria-label": "Date picker",
-        ref: buttonRef
-    }, _react.createElement(_index.SvgCalendar, null)))));
+            showYearSelection: showYearSelection,
+          }),
+          placement: 'bottom-end',
+          visible: isVisible,
+          onVisibleChange: setIsVisible,
+          closeOnOutsideClick: true,
+          applyBackground: true,
+        },
+        _react.createElement(
+          _InputWithDecorations.InputWithDecorations.Button,
+          {
+            'aria-label': 'Date picker',
+            ref: buttonRef,
+          },
+          _react.createElement(_index.SvgCalendar, null),
+        ),
+      ),
+    ),
+  );
 });

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

@@ -1,98 +1,122 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "DateRangeFilter", {
-    enumerable: true,
-    get: function() {
-        return DateRangeFilter;
-    }
+Object.defineProperty(exports, 'DateRangeFilter', {
+  enumerable: true,
+  get: function () {
+    return DateRangeFilter;
+  },
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-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 _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+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)=>{
-    let formatter = new Intl.DateTimeFormat('en-us', {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric'
-    });
-    return formatter.format(date);
+const defaultFormatDate = (date) => {
+  let formatter = new Intl.DateTimeFormat('en-us', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+  return formatter.format(date);
 };
-const defaultParseInput = (text)=>{
-    if (/^[a-z]{3}\s\d{1,2},\s\d{4}$/gi.test(text)) return new Date(text);
-    return new Date('');
+const defaultParseInput = (text) => {
+  if (/^[a-z]{3}\s\d{1,2},\s\d{4}$/gi.test(text)) return new Date(text);
+  return new Date('');
 };
-const DateRangeFilter = (props)=>{
-    let { column, translatedLabels, setFilter, clearFilter, formatDate = defaultFormatDate, parseInput = defaultParseInput, placeholder = 'MMM dd, yyyy', showYearSelection } = props;
-    (0, _index.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.BaseFilter, null, _react.createElement(_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
-    }), _react.createElement(_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
-    }), _react.createElement(_FilterButtonBar.FilterButtonBar, {
-        setFilter: ()=>setFilter([
-                from,
-                to
-            ]),
-        clearFilter: clearFilter,
-        translatedLabels: translatedLabels
-    }));
+const DateRangeFilter = (props) => {
+  let {
+    column,
+    translatedLabels,
+    setFilter,
+    clearFilter,
+    formatDate = defaultFormatDate,
+    parseInput = defaultParseInput,
+    placeholder = 'MMM dd, yyyy',
+    showYearSelection,
+  } = props;
+  (0, _index.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.BaseFilter,
+    {
+      onSubmit: () => setFilter([from, to]),
+    },
+    _react.createElement(_DatePickerInput.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.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.FilterButtonBar, {
+      clearFilter: clearFilter,
+      translatedLabels: translatedLabels,
+    }),
+  );
 };

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

@@ -1,38 +1,61 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "FilterButtonBar", {
-    enumerable: true,
-    get: function() {
-        return FilterButtonBar;
-    }
+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 _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 _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+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',
 };
-const FilterButtonBar = (props)=>{
-    let { children, setFilter, clearFilter, translatedLabels, className, style, id } = props;
-    let translatedStrings = {
-        ...defaultStrings,
-        ...translatedLabels
-    };
-    (0, _index.useGlobals)();
-    return _react.createElement(_index.Box, {
-        className: (0, _classnames.default)('iui-button-bar', className),
-        style: style,
-        id: id
-    }, children, _react.createElement(_Button.Button, {
-        styleType: "high-visibility",
-        onClick: setFilter
-    }, translatedStrings.filter), _react.createElement(_Button.Button, {
-        onClick: clearFilter
-    }, translatedStrings.clear));
+const FilterButtonBar = (props) => {
+  let {
+    children,
+    setFilter,
+    clearFilter,
+    translatedLabels,
+    className,
+    style,
+    id,
+  } = props;
+  let translatedStrings = {
+    ...defaultStrings,
+    ...translatedLabels,
+  };
+  (0, _index.useGlobals)();
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)('iui-button-bar', className),
+      style: style,
+      id: id,
+    },
+    children,
+    _react.createElement(
+      _Button.Button,
+      {
+        type: 'submit',
+        styleType: 'high-visibility',
+        onClick: setFilter,
+      },
+      translatedStrings.filter,
+    ),
+    _react.createElement(
+      _Button.Button,
+      {
+        onClick: clearFilter,
+      },
+      translatedStrings.clear,
+    ),
+  );
 };

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

@@ -1,60 +1,77 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "FilterToggle", {
-    enumerable: true,
-    get: function() {
-        return FilterToggle;
-    }
+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 _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)=>{
-    let { column, className, ...rest } = props;
-    (0, _index.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.Popover, {
-        content: column.render('Filter', {
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+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) => {
+  let { column, className, ...rest } = props;
+  (0, _index.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.Popover,
+        {
+          content: column.render('Filter', {
             close,
             setFilter,
-            clearFilter
-        }),
-        placement: "bottom-start",
-        visible: isVisible,
-        onVisibleChange: setIsVisible,
-        closeOnOutsideClick: true,
-        applyBackground: true
-    }, _react.createElement(_IconButton.IconButton, {
-        styleType: "borderless",
-        isActive: isVisible || isColumnFiltered,
-        className: (0, _classnames.default)('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(_index.SvgFilter, null) : _react.createElement(_index.SvgFilterHollow, null))));
+        _react.createElement(
+          _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,
+          },
+          isColumnFiltered
+            ? _react.createElement(_index.SvgFilter, null)
+            : _react.createElement(_index.SvgFilterHollow, null),
+        ),
+      ),
+  );
 };