@itwin/itwinui-react 3.12.2 → 3.13.0

package/cjs/core/Table/cells/EditableCell.js

@@ -14,7 +14,7 @@ const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../../utils/index.js');
 const _classnames = _interop_require_default._(require('classnames'));
 const EditableCell = (props) => {
-  const {
+  let {
     cellElementProps: {
       className: cellElementClassName,
       style: cellElementStyle,
@@ -28,18 +28,15 @@ const EditableCell = (props) => {
     style,
     ...rest
   } = props;
-  isDisabled;
-  const sanitizeString = (text) => {
-    return text.replace(/(\r\n|\n|\r)+/gm, ' ');
-  };
-  const [value, setValue] = _react.useState(() =>
+  let sanitizeString = (text) => text.replace(/(\r\n|\n|\r)+/gm, ' ');
+  let [value, setValue] = _react.useState(() =>
     sanitizeString(cellProps.value),
   );
   _react.useEffect(() => {
     setValue(sanitizeString(cellProps.value));
   }, [cellProps.value]);
-  const [key, setKey] = _react.useState((0, _index.getRandomValue)(10));
-  const [isDirty, setIsDirty] = _react.useState(false);
+  let [key, setKey] = _react.useState((0, _index.getRandomValue)(10));
+  let [isDirty, setIsDirty] = _react.useState(false);
   return _react.createElement(
     _index.Box,
     {
@@ -59,16 +56,13 @@ const EditableCell = (props) => {
         props.onInput?.(e);
       },
       onBlur: (e) => {
-        if (isDirty) {
+        if (isDirty)
           onCellEdit(cellProps.column.id, value, cellProps.row.original);
-        }
         props.onBlur?.(e);
         setKey((0, _index.getRandomValue)(10));
       },
       onKeyDown: (e) => {
-        if (e.key === 'Enter') {
-          e.preventDefault();
-        }
+        if ('Enter' === e.key) e.preventDefault();
         props.onKeyDown?.(e);
       },
       onPaste: (e) => {

package/cjs/core/Table/columns/actionColumn.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import type { HeaderProps } from '../../../react-table/react-table.js';
-import { DropdownMenu } from '../../DropdownMenu/DropdownMenu.js';
+import { Popover } from '../../Popover/Popover.js';
 type ActionColumnProps = {
     columnManager?: boolean | {
-        dropdownMenuProps: Omit<React.ComponentPropsWithoutRef<typeof DropdownMenu>, 'menuItems' | 'children'>;
+        dropdownMenuProps: React.ComponentPropsWithoutRef<'div'> & Pick<React.ComponentPropsWithoutRef<typeof Popover>, 'visible' | 'onVisibleChange' | 'placement' | 'portal'>;
     };
 };
 /**

package/cjs/core/Table/columns/actionColumn.js

@@ -12,101 +12,92 @@ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildc
 const _react = _interop_require_wildcard._(require('react'));
 const _Checkbox = require('../../Checkbox/Checkbox.js');
 const _index = require('../../../utils/index.js');
-const _DropdownMenu = require('../../DropdownMenu/DropdownMenu.js');
 const _IconButton = require('../../Buttons/IconButton.js');
-const _MenuItem = require('../../Menu/MenuItem.js');
 const _Table = require('../Table.js');
 const _selectionColumn = require('./selectionColumn.js');
 const _expanderColumn = require('./expanderColumn.js');
+const _Popover = require('../../Popover/Popover.js');
+const _VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.js');
+const _Flex = require('../../Flex/Flex.js');
 const ACTION_CELL_ID = 'iui-table-action';
-const ActionColumn = ({ columnManager = false } = {}) => {
-  return {
-    id: ACTION_CELL_ID,
-    disableResizing: true,
-    disableGroupBy: true,
-    minWidth: 48,
-    width: 48,
-    maxWidth: 48,
-    columnClassName: 'iui-slot',
-    cellClassName: 'iui-slot',
-    disableReordering: true,
-    Header: ({ allColumns, dispatch, state }) => {
-      const [isOpen, setIsOpen] = _react.useState(false);
-      const buttonRef = _react.useRef(null);
-      if (!columnManager) {
-        return null;
-      }
-      const defaultColumnIds = [
-        _selectionColumn.SELECTION_CELL_ID,
-        _expanderColumn.EXPANDER_CELL_ID,
-        ACTION_CELL_ID,
-      ];
-      const headerCheckBoxes = () =>
-        allColumns
-          .filter(({ id }) => !defaultColumnIds.includes(id))
-          .map((column) => {
-            const { checked } = column.getToggleHiddenProps();
-            const onClick = () => {
-              column.toggleHidden(checked);
-              if (Object.keys(state.columnResizing.columnWidths).length === 0) {
-                return;
-              }
-              dispatch({
-                type: _Table.tableResizeStartAction,
+const ActionColumn = ({ columnManager = false } = {}) => ({
+  id: ACTION_CELL_ID,
+  disableResizing: true,
+  disableGroupBy: true,
+  minWidth: 48,
+  width: 48,
+  maxWidth: 48,
+  columnClassName: 'iui-slot',
+  cellClassName: 'iui-slot',
+  disableReordering: true,
+  Header: ({ allColumns, dispatch, state }) => {
+    let buttonRef = _react.useRef(null);
+    if (!columnManager) return null;
+    let defaultColumnIds = [
+      _selectionColumn.SELECTION_CELL_ID,
+      _expanderColumn.EXPANDER_CELL_ID,
+      ACTION_CELL_ID,
+    ];
+    let headerCheckBoxes = () =>
+      allColumns
+        .filter(({ id }) => !defaultColumnIds.includes(id))
+        .map((column) => {
+          let { checked } = column.getToggleHiddenProps();
+          let onChange = () => {
+            column.toggleHidden(checked);
+            if (0 === Object.keys(state.columnResizing.columnWidths).length)
+              return;
+            dispatch({
+              type: _Table.tableResizeStartAction,
+            });
+            queueMicrotask(() => {
+              buttonRef.current?.scrollIntoView({
+                block: 'nearest',
               });
-              queueMicrotask(() => {
-                buttonRef.current?.scrollIntoView({
-                  block: 'nearest',
-                });
-              });
-            };
-            return _react.createElement(
-              _MenuItem.MenuItem,
-              {
-                key: column.id,
-                startIcon: _react.createElement(_Checkbox.Checkbox, {
-                  checked: checked,
-                  disabled: column.disableToggleVisibility,
-                  onClick: (e) => e.stopPropagation(),
-                  onChange: onClick,
-                  'aria-labelledby': `iui-column-${column.id}`,
-                }),
-                onClick: onClick,
-                disabled: column.disableToggleVisibility,
-              },
-              _react.createElement(
-                'div',
-                {
-                  id: `iui-column-${column.id}`,
-                },
-                column.render('Header'),
-              ),
-            );
+            });
+          };
+          return _react.createElement(_Checkbox.Checkbox, {
+            key: column.id,
+            checked: checked,
+            disabled: column.disableToggleVisibility,
+            onChange: onChange,
+            label: column.render('Header'),
           });
-      const dropdownMenuProps =
-        typeof columnManager !== 'boolean'
-          ? columnManager.dropdownMenuProps
-          : {};
-      return _react.createElement(
-        _DropdownMenu.DropdownMenu,
-        {
-          ...dropdownMenuProps,
-          menuItems: headerCheckBoxes,
-          onVisibleChange: (open) => {
-            setIsOpen(open);
-            dropdownMenuProps?.onVisibleChange?.(open);
-          },
-        },
-        _react.createElement(
-          _IconButton.IconButton,
+        });
+    let popoverProps =
+      'boolean' != typeof columnManager ? columnManager.dropdownMenuProps : {};
+    return _react.createElement(
+      _Popover.Popover,
+      {
+        applyBackground: true,
+        content: _react.createElement(
+          _Flex.Flex,
           {
-            styleType: 'borderless',
-            isActive: isOpen,
-            ref: buttonRef,
+            as: _index.FieldsetBase,
+            className: 'iui-table-column-manager',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
           },
-          _react.createElement(_index.SvgColumnManager, null),
+          _react.createElement(
+            _VisuallyHidden.VisuallyHidden,
+            {
+              as: 'legend',
+            },
+            'Show/hide columns',
+          ),
+          headerCheckBoxes(),
         ),
-      );
-    },
-  };
-};
+        ...popoverProps,
+      },
+      _react.createElement(
+        _IconButton.IconButton,
+        {
+          styleType: 'borderless',
+          ref: buttonRef,
+          label: 'Column manager',
+        },
+        _react.createElement(_index.SvgColumnManager, null),
+      ),
+    );
+  },
+});

package/cjs/core/Table/columns/expanderColumn.js

@@ -24,7 +24,7 @@ const _IconButton = require('../../Buttons/IconButton.js');
 const _index1 = require('../cells/index.js');
 const EXPANDER_CELL_ID = 'iui-table-expander';
 const ExpanderColumn = (props = {}) => {
-  const { subComponent, isDisabled } = props;
+  let { subComponent, isDisabled } = props;
   return {
     id: EXPANDER_CELL_ID,
     disableResizing: true,
@@ -36,10 +36,8 @@ const ExpanderColumn = (props = {}) => {
     columnClassName: 'iui-slot',
     cellClassName: 'iui-slot',
     Cell: (props) => {
-      const { row } = props;
-      if (!subComponent?.(row)) {
-        return null;
-      } else {
+      let { row } = props;
+      if (subComponent?.(row))
         return _react.createElement(
           _IconButton.IconButton,
           {
@@ -55,7 +53,7 @@ const ExpanderColumn = (props = {}) => {
           },
           _react.createElement(_index.SvgChevronRight, null),
         );
-      }
+      return null;
     },
     cellRenderer: (props) =>
       _react.createElement(_index1.DefaultCell, {

package/cjs/core/Table/columns/selectionColumn.js

@@ -23,9 +23,9 @@ const _Checkbox = require('../../Checkbox/Checkbox.js');
 const _index = require('../cells/index.js');
 const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
 const SelectionColumn = (props = {}) => {
-  const { isDisabled, density } = props;
-  const densityWidth =
-    density === 'condensed' ? 42 : density === 'extra-condensed' ? 34 : 48;
+  let { isDisabled, density } = props;
+  let densityWidth =
+    'condensed' === density ? 42 : 'extra-condensed' === density ? 34 : 48;
   return {
     id: SELECTION_CELL_ID,
     disableResizing: true,
@@ -43,13 +43,13 @@ const SelectionColumn = (props = {}) => {
       preFilteredFlatRows,
       state,
     }) => {
-      const disabled = preFilteredFlatRows.every((row) =>
+      let disabled = preFilteredFlatRows.every((row) =>
         isDisabled?.(row.original),
       );
-      const checked = preFilteredFlatRows.every(
+      let checked = preFilteredFlatRows.every(
         (row) => state.selectedRowIds[row.id] || isDisabled?.(row.original),
       );
-      const indeterminate =
+      let indeterminate =
         !checked && Object.keys(state.selectedRowIds).length > 0;
       return _react.createElement(_Checkbox.Checkbox, {
         ...getToggleAllRowsSelectedProps(),
@@ -70,15 +70,13 @@ const SelectionColumn = (props = {}) => {
         disabled: isDisabled?.(row.original),
         onClick: (e) => e.stopPropagation(),
         onChange: () => {
-          if (row.subRows.length > 0 && selectSubRows) {
+          if (row.subRows.length > 0 && selectSubRows)
             row.toggleRowSelected(
               !row.subRows.every(
                 (subRow) => subRow.isSelected || isDisabled?.(subRow.original),
               ),
             );
-          } else {
-            row.toggleRowSelected();
-          }
+          else row.toggleRowSelected();
         },
       }),
     cellRenderer: (props) =>

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

@@ -14,7 +14,7 @@ const _react = _interop_require_wildcard._(require('react'));
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../../utils/index.js');
 const BaseFilter = (props) => {
-  const { children, className, style, id } = props;
+  let { children, className, style, id } = props;
   (0, _index.useGlobals)();
   return _react.createElement(
     _index.Box,

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

@@ -17,8 +17,8 @@ const _Label = require('../../../Label/Label.js');
 const _InputWithDecorations = require('../../../InputWithDecorations/InputWithDecorations.js');
 const _Popover = require('../../../Popover/Popover.js');
 const DatePickerInput = _react.forwardRef((props, forwardedRef) => {
-  const uid = (0, _index.useId)();
-  const {
+  let uid = (0, _index.useId)();
+  let {
     onChange,
     date,
     parseInput,
@@ -36,23 +36,18 @@ const DatePickerInput = _react.forwardRef((props, forwardedRef) => {
     showYearSelection,
     ...rest
   } = props;
-  const isDateDisabled = (date) => {
-    if (isFromOrTo === 'to') {
-      return (0, _index.isBefore)(date, selectedDate);
-    } else {
-      return (0, _index.isBefore)(selectedDate, date);
-    }
+  let isDateDisabled = (date) => {
+    if ('to' === isFromOrTo) return (0, _index.isBefore)(date, selectedDate);
+    return (0, _index.isBefore)(selectedDate, date);
   };
-  const buttonRef = _react.useRef(null);
-  const [inputValue, setInputValue] = _react.useState('');
+  let buttonRef = _react.useRef(null);
+  let [inputValue, setInputValue] = _react.useState('');
   _react.useEffect(() => {
-    if (date && !isNaN(date.valueOf())) {
-      setInputValue(formatDate(date));
-    }
+    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(
+  let [isVisible, setIsVisible] = _react.useState(false);
+  let close = _react.useCallback(() => setIsVisible(false), []);
+  let onDateSelected = _react.useCallback(
     (date) => {
       onChange(date);
       close();
@@ -60,17 +55,13 @@ const DatePickerInput = _react.forwardRef((props, forwardedRef) => {
     },
     [close, onChange],
   );
-  const onInputChange = _react.useCallback(
+  let onInputChange = _react.useCallback(
     (event) => {
-      const value = event.target.value;
+      let value = event.target.value;
       setInputValue(value);
-      if (!value) {
-        onChange(undefined);
-      }
-      const parsedDate = parseInput(value);
-      if (parsedDate && !isNaN(parsedDate.valueOf())) {
-        onChange(parsedDate);
-      }
+      if (!value) onChange(void 0);
+      let parsedDate = parseInput(value);
+      if (parsedDate && !isNaN(parsedDate.valueOf())) onChange(parsedDate);
     },
     [onChange, parseInput],
   );

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

@@ -19,7 +19,7 @@ const defaultStrings = {
   to: 'To',
 };
 const defaultFormatDate = (date) => {
-  const formatter = new Intl.DateTimeFormat('en-us', {
+  let formatter = new Intl.DateTimeFormat('en-us', {
     month: 'short',
     day: 'numeric',
     year: 'numeric',
@@ -27,13 +27,11 @@ const defaultFormatDate = (date) => {
   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);
-  }
+  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 {
+  let {
     column,
     translatedLabels,
     setFilter,
@@ -44,24 +42,20 @@ const DateRangeFilter = (props) => {
     showYearSelection,
   } = props;
   (0, _index.useGlobals)();
-  const translatedStrings = {
+  let translatedStrings = {
     ...defaultStrings,
     ...translatedLabels,
   };
-  const [from, setFrom] = _react.useState(
-    column.filterValue?.[0] ? new Date(column.filterValue?.[0]) : undefined,
+  let [from, setFrom] = _react.useState(
+    column.filterValue?.[0] ? new Date(column.filterValue?.[0]) : void 0,
   );
-  const inputRef = _react.useRef(null);
+  let inputRef = _react.useRef(null);
   _react.useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
+    if (inputRef.current) inputRef.current.focus();
   }, []);
-  const onFromChange = _react.useCallback((date) => {
+  let onFromChange = _react.useCallback((date) => {
     setFrom((prevDate) => {
-      if (prevDate || !date) {
-        return date;
-      }
+      if (prevDate || !date) return date;
       return new Date(
         date.getFullYear(),
         date.getMonth(),
@@ -73,14 +67,12 @@ const DateRangeFilter = (props) => {
       );
     });
   }, []);
-  const [to, setTo] = _react.useState(
-    column.filterValue?.[1] ? new Date(column.filterValue?.[1]) : undefined,
+  let [to, setTo] = _react.useState(
+    column.filterValue?.[1] ? new Date(column.filterValue?.[1]) : void 0,
   );
-  const onToChange = _react.useCallback((date) => {
+  let onToChange = _react.useCallback((date) => {
     setTo((prevDate) => {
-      if (prevDate || !date) {
-        return date;
-      }
+      if (prevDate || !date) return date;
       return new Date(
         date.getFullYear(),
         date.getMonth(),
@@ -92,13 +84,9 @@ const DateRangeFilter = (props) => {
       );
     });
   }, []);
-  const onKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    if (event.key === 'Enter') {
-      setFilter([from, to]);
-    }
+  let onKeyDown = (event) => {
+    if (event.altKey) return;
+    if ('Enter' === event.key) setFilter([from, to]);
   };
   return _react.createElement(
     _BaseFilter.BaseFilter,

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

@@ -19,7 +19,7 @@ const defaultStrings = {
   clear: 'Clear',
 };
 const FilterButtonBar = (props) => {
-  const {
+  let {
     children,
     setFilter,
     clearFilter,
@@ -28,7 +28,7 @@ const FilterButtonBar = (props) => {
     style,
     id,
   } = props;
-  const translatedStrings = {
+  let translatedStrings = {
     ...defaultStrings,
     ...translatedLabels,
   };

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

@@ -16,23 +16,23 @@ 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;
+  let { column, className, ...rest } = props;
   (0, _index.useGlobals)();
-  const [isVisible, setIsVisible] = _react.useState(false);
-  const close = _react.useCallback(() => setIsVisible(false), []);
-  const setFilter = _react.useCallback(
+  let [isVisible, setIsVisible] = _react.useState(false);
+  let close = _react.useCallback(() => setIsVisible(false), []);
+  let setFilter = _react.useCallback(
     (filterValue) => {
       column.setFilter(filterValue);
       close();
     },
     [close, column],
   );
-  const clearFilter = _react.useCallback(() => {
-    column.setFilter(undefined);
+  let clearFilter = _react.useCallback(() => {
+    column.setFilter(void 0);
     close();
   }, [close, column]);
-  const isColumnFiltered =
-    column.filterValue != null && column.filterValue !== '';
+  let isColumnFiltered =
+    null != column.filterValue && '' !== column.filterValue;
   return _react.createElement(
     _react.Fragment,
     null,

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

@@ -19,30 +19,24 @@ const defaultStrings = {
   to: 'To',
 };
 const NumberRangeFilter = (props) => {
-  const { column, translatedLabels, setFilter, clearFilter } = props;
+  let { column, translatedLabels, setFilter, clearFilter } = props;
   (0, _index.useGlobals)();
-  const translatedStrings = {
+  let translatedStrings = {
     ...defaultStrings,
     ...translatedLabels,
   };
-  const inputRef = _react.useRef(null);
+  let inputRef = _react.useRef(null);
   _react.useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
+    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') {
+  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.BaseFilter,

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

@@ -15,22 +15,16 @@ const _Input = require('../../../Input/Input.js');
 const _FilterButtonBar = require('../FilterButtonBar.js');
 const _BaseFilter = require('../BaseFilter.js');
 const TextFilter = (props) => {
-  const { column, translatedLabels, setFilter, clearFilter } = props;
+  let { column, translatedLabels, setFilter, clearFilter } = props;
   (0, _index.useGlobals)();
-  const [text, setText] = _react.useState(column.filterValue ?? '');
-  const inputRef = _react.useRef(null);
+  let [text, setText] = _react.useState(column.filterValue ?? '');
+  let inputRef = _react.useRef(null);
   _react.useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
+    if (inputRef.current) inputRef.current.focus();
   }, []);
-  const onKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    if (event.key === 'Enter') {
-      setFilter(text);
-    }
+  let onKeyDown = (event) => {
+    if (event.altKey) return;
+    if ('Enter' === event.key) setFilter(text);
   };
   return _react.createElement(
     _BaseFilter.BaseFilter,

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

@@ -10,23 +10,22 @@ Object.defineProperty(exports, 'customFilterFunctions', {
 });
 const isValidDate = (date) => !!date && !isNaN(date.valueOf());
 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];
+  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) => {
-  return !val || (!isValidDate(val[0]) && !isValidDate(val[1]));
+    }),
+  );
 };
+betweenDate.autoRemove = (val) =>
+  !val || (!isValidDate(val[0]) && !isValidDate(val[1]));
 const customFilterFunctions = {
   betweenDate,
 };