@itwin/itwinui-react 3.0.4 → 3.0.6

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

@@ -1,125 +1,120 @@
 const text = (rows, ids, filterValue) => {
-  rows = rows.filter((row) => {
-    return ids.some((id) => {
-      const rowValue = row.values[id];
-      return String(rowValue)
-        .toLowerCase()
-        .includes(String(filterValue).toLowerCase());
+    rows = rows.filter((row) => {
+        return ids.some((id) => {
+            const rowValue = row.values[id];
+            return String(rowValue)
+                .toLowerCase()
+                .includes(String(filterValue).toLowerCase());
+        });
     });
-  });
-  return rows;
+    return rows;
 };
 text.autoRemove = (val) => !val;
 const exactText = (rows, ids, filterValue) => {
-  return rows.filter((row) => {
-    return ids.some((id) => {
-      const rowValue = row.values[id];
-      return rowValue !== undefined
-        ? String(rowValue).toLowerCase() === String(filterValue).toLowerCase()
-        : true;
+    return rows.filter((row) => {
+        return ids.some((id) => {
+            const rowValue = row.values[id];
+            return rowValue !== undefined
+                ? String(rowValue).toLowerCase() === String(filterValue).toLowerCase()
+                : true;
+        });
     });
-  });
 };
 exactText.autoRemove = (val) => !val;
 const exactTextCase = (rows, ids, filterValue) => {
-  return rows.filter((row) => {
-    return ids.some((id) => {
-      const rowValue = row.values[id];
-      return rowValue !== undefined
-        ? String(rowValue) === String(filterValue)
-        : true;
+    return rows.filter((row) => {
+        return ids.some((id) => {
+            const rowValue = row.values[id];
+            return rowValue !== undefined
+                ? String(rowValue) === String(filterValue)
+                : true;
+        });
     });
-  });
 };
 exactTextCase.autoRemove = (val) => !val;
 const includes = (rows, ids, filterValue) => {
-  return rows.filter((row) => {
-    return ids.some((id) => {
-      const rowValue = row.values[id];
-      return rowValue.includes(filterValue);
+    return rows.filter((row) => {
+        return ids.some((id) => {
+            const rowValue = row.values[id];
+            return rowValue.includes(filterValue);
+        });
     });
-  });
 };
 includes.autoRemove = (val) => !val || !val.length;
 const includesAll = (rows, ids, filterValue) => {
-  return rows.filter((row) => {
-    return ids.some((id) => {
-      const rowValue = row.values[id];
-      return (
-        rowValue &&
-        rowValue.length &&
-        filterValue.every((val) => rowValue.includes(val))
-      );
+    return rows.filter((row) => {
+        return ids.some((id) => {
+            const rowValue = row.values[id];
+            return (rowValue &&
+                rowValue.length &&
+                filterValue.every((val) => rowValue.includes(val)));
+        });
     });
-  });
 };
 includesAll.autoRemove = (val) => !val || !val.length;
 const includesSome = (rows, ids, filterValue) => {
-  return rows.filter((row) => {
-    return ids.some((id) => {
-      const rowValue = row.values[id];
-      return (
-        rowValue &&
-        rowValue.length &&
-        filterValue.some((val) => rowValue.includes(val))
-      );
+    return rows.filter((row) => {
+        return ids.some((id) => {
+            const rowValue = row.values[id];
+            return (rowValue &&
+                rowValue.length &&
+                filterValue.some((val) => rowValue.includes(val)));
+        });
     });
-  });
 };
 includesSome.autoRemove = (val) => !val || !val.length;
 const includesValue = (rows, ids, filterValue) => {
-  return rows.filter((row) => {
-    return ids.some((id) => {
-      const rowValue = row.values[id];
-      return filterValue.includes(rowValue);
+    return rows.filter((row) => {
+        return ids.some((id) => {
+            const rowValue = row.values[id];
+            return filterValue.includes(rowValue);
+        });
     });
-  });
 };
 includesValue.autoRemove = (val) => !val || !val.length;
 const exact = (rows, ids, filterValue) => {
-  return rows.filter((row) => {
-    return ids.some((id) => {
-      const rowValue = row.values[id];
-      return rowValue === filterValue;
+    return rows.filter((row) => {
+        return ids.some((id) => {
+            const rowValue = row.values[id];
+            return rowValue === filterValue;
+        });
     });
-  });
 };
 exact.autoRemove = (val) => typeof val === 'undefined';
 const equals = (rows, ids, filterValue) => {
-  return rows.filter((row) => {
-    return ids.some((id) => {
-      const rowValue = row.values[id];
-      // eslint-disable-next-line eqeqeq
-      return rowValue == filterValue;
+    return rows.filter((row) => {
+        return ids.some((id) => {
+            const rowValue = row.values[id];
+            // eslint-disable-next-line eqeqeq
+            return rowValue == filterValue;
+        });
     });
-  });
 };
 equals.autoRemove = (val) => val == null;
 const between = (rows, ids, filterValue) => {
-  let [min, max] = filterValue || [];
-  min = typeof min === 'number' ? min : -Infinity;
-  max = typeof max === 'number' ? max : Infinity;
-  if (min > max) {
-    const temp = min;
-    min = max;
-    max = temp;
-  }
-  return rows.filter((row) => {
-    return ids.some((id) => {
-      const rowValue = row.values[id];
-      return rowValue >= min && rowValue <= max;
+    let [min, max] = filterValue || [];
+    min = typeof min === 'number' ? min : -Infinity;
+    max = typeof max === 'number' ? max : Infinity;
+    if (min > max) {
+        const temp = min;
+        min = max;
+        max = temp;
+    }
+    return rows.filter((row) => {
+        return ids.some((id) => {
+            const rowValue = row.values[id];
+            return rowValue >= min && rowValue <= max;
+        });
     });
-  });
 };
-between.autoRemove = (val) =>
-  !val || (typeof val[0] !== 'number' && typeof val[1] !== 'number');
+between.autoRemove = (val) => !val || (typeof val[0] !== 'number' && typeof val[1] !== 'number');
 export const defaultFilterFunctions = {
-  text,
-  exactText,
-  exactTextCase,
-  includes,
-  includesAll,
-  includesSome,
-  includesValue,
-  between,
+    text,
+    exactText,
+    exactTextCase,
+    includes,
+    includesAll,
+    includesSome,
+    includesValue,
+    between,
 };

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

@@ -7,38 +7,29 @@ import { DateRangeFilter } from './DateRangeFilter/DateRangeFilter.js';
 import { NumberRangeFilter } from './NumberRangeFilter/NumberRangeFilter.js';
 import { TextFilter } from './TextFilter/TextFilter.js';
 export const tableFilters = {
-  /**
-   * Basic filter with a single input field.
-   * @param translatedLabels Translated filter labels.
-   */
-  TextFilter: (translatedLabels) => (props) =>
-    React.createElement(TextFilter, {
-      ...props,
-      translatedLabels: translatedLabels,
-    }),
-  /**
-   * Date range filter.
-   *
-   * By default it handles user input in `en-us` date format. If you want to use other format
-   * please provide `formatDate`, `parseInput` and `placeholder`.
-   *
-   * It only works with `Date` type object properties.
-   * If your data is different type e.g. `string`, you can use `accessor` property in column description:
-   * `accessor: (rowData) => new Date(rowData.date)`.
-   */
-  DateRangeFilter: (options) => (props) =>
-    React.createElement(DateRangeFilter, { ...props, ...options }),
-  /**
-   * Number range filter.
-   *
-   * It only works with `number` type object properties.
-   * If your data is different type e.g. `string`, you can use `accessor` property in column description:
-   * `accessor: (rowData) => Number(rowData.numberProp)`.
-   * @param translatedLabels Translated filter labels.
-   */
-  NumberRangeFilter: (translatedLabels) => (props) =>
-    React.createElement(NumberRangeFilter, {
-      ...props,
-      translatedLabels: translatedLabels,
-    }),
+    /**
+     * Basic filter with a single input field.
+     * @param translatedLabels Translated filter labels.
+     */
+    TextFilter: (translatedLabels) => (props) => (React.createElement(TextFilter, { ...props, translatedLabels: translatedLabels })),
+    /**
+     * Date range filter.
+     *
+     * By default it handles user input in `en-us` date format. If you want to use other format
+     * please provide `formatDate`, `parseInput` and `placeholder`.
+     *
+     * It only works with `Date` type object properties.
+     * If your data is different type e.g. `string`, you can use `accessor` property in column description:
+     * `accessor: (rowData) => new Date(rowData.date)`.
+     */
+    DateRangeFilter: (options) => (props) => (React.createElement(DateRangeFilter, { ...props, ...options })),
+    /**
+     * Number range filter.
+     *
+     * It only works with `number` type object properties.
+     * If your data is different type e.g. `string`, you can use `accessor` property in column description:
+     * `accessor: (rowData) => Number(rowData.numberProp)`.
+     * @param translatedLabels Translated filter labels.
+     */
+    NumberRangeFilter: (translatedLabels) => (props) => (React.createElement(NumberRangeFilter, { ...props, translatedLabels: translatedLabels })),
 };

package/esm/core/Table/hooks/useColumnDragAndDrop.js

@@ -1,114 +1,107 @@
 import { actions, makePropGetter, useGetLatest } from 'react-table';
 import styles from '../../../styles.js';
 const REORDER_ACTIONS = {
-  columnDragStart: 'columnDragStart',
-  columnDragEnd: 'columnDragEnd',
+    columnDragStart: 'columnDragStart',
+    columnDragEnd: 'columnDragEnd',
 };
 export const useColumnDragAndDrop = (isEnabled) => (hooks) => {
-  hooks.getDragAndDropProps = [defaultGetDragAndDropProps(isEnabled)];
-  hooks.stateReducers.push(reducer);
-  hooks.useInstance.push(useInstance);
+    hooks.getDragAndDropProps = [defaultGetDragAndDropProps(isEnabled)];
+    hooks.stateReducers.push(reducer);
+    hooks.useInstance.push(useInstance);
 };
-const defaultGetDragAndDropProps =
-  (isEnabled) =>
-  (props, { instance, header }) => {
+const defaultGetDragAndDropProps = (isEnabled) => (props, { instance, header, }) => {
     if (!isEnabled || header.disableReordering) {
-      return props;
+        return props;
     }
     const onDragStart = () => {
-      instance.dispatch({
-        type: REORDER_ACTIONS.columnDragStart,
-        columnIndex: instance.flatHeaders.indexOf(header),
-      });
+        instance.dispatch({
+            type: REORDER_ACTIONS.columnDragStart,
+            columnIndex: instance.flatHeaders.indexOf(header),
+        });
     };
     const setOnDragColumnStyle = (event, position) => {
-      const columnElement = event.currentTarget;
-      columnElement.classList.remove(styles['iui-table-reorder-column-right']);
-      columnElement.classList.remove(styles['iui-table-reorder-column-left']);
-      if (position === 'left') {
-        columnElement.classList.add(styles['iui-table-reorder-column-left']);
-      } else if (position === 'right') {
-        columnElement.classList.add(styles['iui-table-reorder-column-right']);
-      }
+        const columnElement = event.currentTarget;
+        columnElement.classList.remove(styles['iui-table-reorder-column-right']);
+        columnElement.classList.remove(styles['iui-table-reorder-column-left']);
+        if (position === 'left') {
+            columnElement.classList.add(styles['iui-table-reorder-column-left']);
+        }
+        else if (position === 'right') {
+            columnElement.classList.add(styles['iui-table-reorder-column-right']);
+        }
     };
     const reorderColumns = (tableColumns, srcIndex, dstIndex) => {
-      const newTableColumns = [...tableColumns];
-      const [removed] = newTableColumns.splice(srcIndex, 1);
-      newTableColumns.splice(dstIndex, 0, removed);
-      return newTableColumns;
+        const newTableColumns = [...tableColumns];
+        const [removed] = newTableColumns.splice(srcIndex, 1);
+        newTableColumns.splice(dstIndex, 0, removed);
+        return newTableColumns;
     };
     const onDragOver = (event) => {
-      event.preventDefault();
-      const headerIndex = instance.flatHeaders.indexOf(header);
-      if (instance.state.columnReorderStartIndex !== headerIndex) {
-        setOnDragColumnStyle(
-          event,
-          instance.state.columnReorderStartIndex > headerIndex
-            ? 'left'
-            : 'right',
-        );
-      }
+        event.preventDefault();
+        const headerIndex = instance.flatHeaders.indexOf(header);
+        if (instance.state.columnReorderStartIndex !== headerIndex) {
+            setOnDragColumnStyle(event, instance.state.columnReorderStartIndex > headerIndex
+                ? 'left'
+                : 'right');
+        }
     };
     const onDragLeave = (event) => {
-      setOnDragColumnStyle(event);
+        setOnDragColumnStyle(event);
     };
     const onDrop = (event) => {
-      event.preventDefault();
-      setOnDragColumnStyle(event);
-      const columnIds = instance.allColumns.map((x) => x.id);
-      const srcIndex = instance.state.columnReorderStartIndex;
-      const dstIndex = columnIds.findIndex((x) => x === header.id);
-      if (srcIndex === dstIndex || srcIndex === -1 || dstIndex === -1) {
-        return;
-      }
-      instance.setColumnOrder(reorderColumns(columnIds, srcIndex, dstIndex));
-      instance.dispatch({
-        type: REORDER_ACTIONS.columnDragEnd,
-        columnIndex: -1,
-      });
+        event.preventDefault();
+        setOnDragColumnStyle(event);
+        const columnIds = instance.allColumns.map((x) => x.id);
+        const srcIndex = instance.state.columnReorderStartIndex;
+        const dstIndex = columnIds.findIndex((x) => x === header.id);
+        if (srcIndex === dstIndex || srcIndex === -1 || dstIndex === -1) {
+            return;
+        }
+        instance.setColumnOrder(reorderColumns(columnIds, srcIndex, dstIndex));
+        instance.dispatch({
+            type: REORDER_ACTIONS.columnDragEnd,
+            columnIndex: -1,
+        });
     };
     return [
-      props,
-      {
-        draggable: true,
-        onDragStart,
-        onDragOver,
-        onDragLeave,
-        onDrop,
-      },
+        props,
+        {
+            draggable: true,
+            onDragStart,
+            onDragOver,
+            onDragLeave,
+            onDrop,
+        },
     ];
-  };
+};
 const reducer = (newState, action) => {
-  switch (action.type) {
-    case actions.init:
-      return {
-        ...newState,
-        columnReorderStartIndex: -1,
-      };
-    case REORDER_ACTIONS.columnDragStart:
-      return {
-        ...newState,
-        columnReorderStartIndex: action.columnIndex,
-      };
-    case REORDER_ACTIONS.columnDragEnd:
-      return {
-        ...newState,
-        columnReorderStartIndex: -1,
-      };
-    default:
-      return newState;
-  }
+    switch (action.type) {
+        case actions.init:
+            return {
+                ...newState,
+                columnReorderStartIndex: -1,
+            };
+        case REORDER_ACTIONS.columnDragStart:
+            return {
+                ...newState,
+                columnReorderStartIndex: action.columnIndex,
+            };
+        case REORDER_ACTIONS.columnDragEnd:
+            return {
+                ...newState,
+                columnReorderStartIndex: -1,
+            };
+        default:
+            return newState;
+    }
 };
 const useInstance = (instance) => {
-  const { flatHeaders, getHooks } = instance;
-  const getInstance = useGetLatest(instance);
-  flatHeaders.forEach((header) => {
-    header.getDragAndDropProps = makePropGetter(
-      getHooks().getDragAndDropProps,
-      {
-        instance: getInstance(),
-        header,
-      },
-    );
-  });
+    const { flatHeaders, getHooks } = instance;
+    const getInstance = useGetLatest(instance);
+    flatHeaders.forEach((header) => {
+        header.getDragAndDropProps = makePropGetter(getHooks().getDragAndDropProps, {
+            instance: getInstance(),
+            header,
+        });
+    });
 };

package/esm/core/Table/hooks/useExpanderCell.js

@@ -4,33 +4,27 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { ExpanderColumn, EXPANDER_CELL_ID } from '../columns/index.js';
-export const useExpanderCell =
-  (subComponent, expanderCell, isRowDisabled) => (hooks) => {
+export const useExpanderCell = (subComponent, expanderCell, isRowDisabled) => (hooks) => {
     if (!subComponent) {
-      return;
+        return;
     }
     hooks.allColumns.push((columns) => {
-      const hasExpanderColumn = columns.find((c) => c.id === EXPANDER_CELL_ID);
-      if (hasExpanderColumn) {
-        return columns;
-      }
-      const expanderColumn = ExpanderColumn({
-        subComponent,
-        isDisabled: isRowDisabled,
-      });
-      return [
-        {
-          ...expanderColumn,
-          Cell: expanderCell
-            ? (cellProps) =>
-                React.createElement(
-                  React.Fragment,
-                  null,
-                  expanderCell(cellProps),
-                )
-            : expanderColumn.Cell,
-        },
-        ...columns,
-      ];
+        const hasExpanderColumn = columns.find((c) => c.id === EXPANDER_CELL_ID);
+        if (hasExpanderColumn) {
+            return columns;
+        }
+        const expanderColumn = ExpanderColumn({
+            subComponent,
+            isDisabled: isRowDisabled,
+        });
+        return [
+            {
+                ...expanderColumn,
+                Cell: expanderCell
+                    ? (cellProps) => React.createElement(React.Fragment, null, expanderCell(cellProps))
+                    : expanderColumn.Cell,
+            },
+            ...columns,
+        ];
     });
-  };
+};