@itwin/itwinui-react 3.12.1 → 3.13.0

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Box, getRandomValue } from '../../../utils/index.js';
 import cx from 'classnames';
 export const EditableCell = (props) => {
-  const {
+  let {
     cellElementProps: {
       className: cellElementClassName,
       style: cellElementStyle,
@@ -16,18 +16,13 @@ export const EditableCell = (props) => {
     style,
     ...rest
   } = props;
-  isDisabled;
-  const sanitizeString = (text) => {
-    return text.replace(/(\r\n|\n|\r)+/gm, ' ');
-  };
-  const [value, setValue] = React.useState(() =>
-    sanitizeString(cellProps.value),
-  );
+  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(getRandomValue(10));
-  const [isDirty, setIsDirty] = React.useState(false);
+  let [key, setKey] = React.useState(getRandomValue(10));
+  let [isDirty, setIsDirty] = React.useState(false);
   return React.createElement(
     Box,
     {
@@ -47,16 +42,13 @@ export const EditableCell = (props) => {
         props.onInput?.(e);
       },
       onBlur: (e) => {
-        if (isDirty) {
+        if (isDirty)
           onCellEdit(cellProps.column.id, value, cellProps.row.original);
-        }
         props.onBlur?.(e);
         setKey(getRandomValue(10));
       },
       onKeyDown: (e) => {
-        if (e.key === 'Enter') {
-          e.preventDefault();
-        }
+        if ('Enter' === e.key) e.preventDefault();
         props.onKeyDown?.(e);
       },
       onPaste: (e) => {

package/esm/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/esm/core/Table/columns/actionColumn.js

@@ -1,101 +1,92 @@
 import * as React from 'react';
 import { Checkbox } from '../../Checkbox/Checkbox.js';
-import { SvgColumnManager } from '../../../utils/index.js';
-import { DropdownMenu } from '../../DropdownMenu/DropdownMenu.js';
+import { FieldsetBase, SvgColumnManager } from '../../../utils/index.js';
 import { IconButton } from '../../Buttons/IconButton.js';
-import { MenuItem } from '../../Menu/MenuItem.js';
 import { tableResizeStartAction } from '../Table.js';
 import { SELECTION_CELL_ID } from './selectionColumn.js';
 import { EXPANDER_CELL_ID } from './expanderColumn.js';
-const ACTION_CELL_ID = 'iui-table-action';
-export 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 = [
-        SELECTION_CELL_ID,
-        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: tableResizeStartAction,
+import { Popover } from '../../Popover/Popover.js';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.js';
+import { Flex } from '../../Flex/Flex.js';
+let ACTION_CELL_ID = 'iui-table-action';
+export 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 = [
+      SELECTION_CELL_ID,
+      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: tableResizeStartAction,
+            });
+            queueMicrotask(() => {
+              buttonRef.current?.scrollIntoView({
+                block: 'nearest',
               });
-              queueMicrotask(() => {
-                buttonRef.current?.scrollIntoView({
-                  block: 'nearest',
-                });
-              });
-            };
-            return React.createElement(
-              MenuItem,
-              {
-                key: column.id,
-                startIcon: React.createElement(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, {
+            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,
-        {
-          ...dropdownMenuProps,
-          menuItems: headerCheckBoxes,
-          onVisibleChange: (open) => {
-            setIsOpen(open);
-            dropdownMenuProps?.onVisibleChange?.(open);
-          },
-        },
-        React.createElement(
-          IconButton,
+        });
+    let popoverProps =
+      'boolean' != typeof columnManager ? columnManager.dropdownMenuProps : {};
+    return React.createElement(
+      Popover,
+      {
+        applyBackground: true,
+        content: React.createElement(
+          Flex,
           {
-            styleType: 'borderless',
-            isActive: isOpen,
-            ref: buttonRef,
+            as: FieldsetBase,
+            className: 'iui-table-column-manager',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
           },
-          React.createElement(SvgColumnManager, null),
+          React.createElement(
+            VisuallyHidden,
+            {
+              as: 'legend',
+            },
+            'Show/hide columns',
+          ),
+          headerCheckBoxes(),
         ),
-      );
-    },
-  };
-};
+        ...popoverProps,
+      },
+      React.createElement(
+        IconButton,
+        {
+          styleType: 'borderless',
+          ref: buttonRef,
+          label: 'Column manager',
+        },
+        React.createElement(SvgColumnManager, null),
+      ),
+    );
+  },
+});

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

@@ -4,7 +4,7 @@ import { IconButton } from '../../Buttons/IconButton.js';
 import { DefaultCell } from '../cells/index.js';
 export const EXPANDER_CELL_ID = 'iui-table-expander';
 export const ExpanderColumn = (props = {}) => {
-  const { subComponent, isDisabled } = props;
+  let { subComponent, isDisabled } = props;
   return {
     id: EXPANDER_CELL_ID,
     disableResizing: true,
@@ -16,10 +16,8 @@ export 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,
           {
@@ -35,7 +33,7 @@ export const ExpanderColumn = (props = {}) => {
           },
           React.createElement(SvgChevronRight, null),
         );
-      }
+      return null;
     },
     cellRenderer: (props) =>
       React.createElement(DefaultCell, {

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

@@ -3,9 +3,9 @@ import { Checkbox } from '../../Checkbox/Checkbox.js';
 import { DefaultCell } from '../cells/index.js';
 export const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
 export 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,
@@ -23,13 +23,13 @@ export 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, {
         ...getToggleAllRowsSelectedProps(),
@@ -50,15 +50,13 @@ export 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/esm/core/Table/filters/BaseFilter.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box, useGlobals } from '../../../utils/index.js';
 export const BaseFilter = (props) => {
-  const { children, className, style, id } = props;
+  let { children, className, style, id } = props;
   useGlobals();
   return React.createElement(
     Box,

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

@@ -6,8 +6,8 @@ import { Label } from '../../../Label/Label.js';
 import { InputWithDecorations } from '../../../InputWithDecorations/InputWithDecorations.js';
 import { Popover } from '../../../Popover/Popover.js';
 export const DatePickerInput = React.forwardRef((props, forwardedRef) => {
-  const uid = useId();
-  const {
+  let uid = useId();
+  let {
     onChange,
     date,
     parseInput,
@@ -25,23 +25,18 @@ export const DatePickerInput = React.forwardRef((props, forwardedRef) => {
     showYearSelection,
     ...rest
   } = props;
-  const isDateDisabled = (date) => {
-    if (isFromOrTo === 'to') {
-      return isBefore(date, selectedDate);
-    } else {
-      return isBefore(selectedDate, date);
-    }
+  let isDateDisabled = (date) => {
+    if ('to' === isFromOrTo) return isBefore(date, selectedDate);
+    return 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();
@@ -49,17 +44,13 @@ export 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/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -3,26 +3,24 @@ import { useGlobals } from '../../../../utils/index.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
 import { DatePickerInput } from './DatePickerInput.js';
-const defaultStrings = {
+let defaultStrings = {
   from: 'From',
   to: 'To',
 };
-const defaultFormatDate = (date) => {
-  const formatter = new Intl.DateTimeFormat('en-us', {
+let 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);
-  }
+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) => {
-  const {
+  let {
     column,
     translatedLabels,
     setFilter,
@@ -33,24 +31,20 @@ export const DateRangeFilter = (props) => {
     showYearSelection,
   } = props;
   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(),
@@ -62,14 +56,12 @@ export 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(),
@@ -81,13 +73,9 @@ export 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,

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

@@ -2,12 +2,12 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box, useGlobals } from '../../../utils/index.js';
 import { Button } from '../../Buttons/Button.js';
-const defaultStrings = {
+let defaultStrings = {
   filter: 'Filter',
   clear: 'Clear',
 };
 export const FilterButtonBar = (props) => {
-  const {
+  let {
     children,
     setFilter,
     clearFilter,
@@ -16,7 +16,7 @@ export const FilterButtonBar = (props) => {
     style,
     id,
   } = props;
-  const translatedStrings = {
+  let translatedStrings = {
     ...defaultStrings,
     ...translatedLabels,
   };

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

@@ -8,23 +8,23 @@ import {
 import { IconButton } from '../../Buttons/IconButton.js';
 import { Popover } from '../../Popover/Popover.js';
 export const FilterToggle = (props) => {
-  const { column, className, ...rest } = props;
+  let { column, className, ...rest } = props;
   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/esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js

@@ -3,35 +3,29 @@ import { useGlobals } from '../../../../utils/index.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
 import { LabeledInput } from '../../../LabeledInput/LabeledInput.js';
-const defaultStrings = {
+let defaultStrings = {
   from: 'From',
   to: 'To',
 };
 export const NumberRangeFilter = (props) => {
-  const { column, translatedLabels, setFilter, clearFilter } = props;
+  let { column, translatedLabels, setFilter, clearFilter } = props;
   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,

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

@@ -4,22 +4,16 @@ 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;
+  let { column, translatedLabels, setFilter, clearFilter } = props;
   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,