@itwin/itwinui-react 3.0.0-dev.4 → 3.0.0-dev.5

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

@@ -7,24 +7,26 @@ const isValidDate = (date) => !!date && !isNaN(date.valueOf());
  * @returns Filtered rows
  */
 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];
-            return (rowValue.valueOf() >= minValue.valueOf() &&
-                rowValue.valueOf() <= maxValue.valueOf());
-        });
+  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];
+      return (
+        rowValue.valueOf() >= minValue.valueOf() &&
+        rowValue.valueOf() <= maxValue.valueOf()
+      );
     });
+  });
 };
 /**
  * Filter is not being set if filter value is invalid.
  */
 betweenDate.autoRemove = (val) => {
-    return !val || (!isValidDate(val[0]) && !isValidDate(val[1]));
+  return !val || (!isValidDate(val[0]) && !isValidDate(val[1]));
 };
 export const customFilterFunctions = {
-    betweenDate,
+  betweenDate,
 };

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

@@ -1,120 +1,125 @@
 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.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { DateRangeTranslation } from './DateRangeFilter/DateRangeFilter.js';
 import type { FilterButtonBarTranslation } from './FilterButtonBar.js';
 import type { NumberRangeTranslation, NumberRangeFilterProps } from './NumberRangeFilter/NumberRangeFilter.js';
 import type { TableFilterProps } from './types.js';
-export declare type DateRangeFilterOptions = {
+export type DateRangeFilterOptions = {
     /**
      * Function that formats selected date into a `string` that is shown inside the input.
      */
@@ -28,7 +28,7 @@ export declare const tableFilters: {
      * Basic filter with a single input field.
      * @param translatedLabels Translated filter labels.
      */
-    TextFilter: (translatedLabels?: FilterButtonBarTranslation) => <T extends Record<string, unknown>>(props: TableFilterProps<T>) => JSX.Element;
+    TextFilter: (translatedLabels?: FilterButtonBarTranslation) => <T extends Record<string, unknown>>(props: TableFilterProps<T>) => React.JSX.Element;
     /**
      * Date range filter.
      *
@@ -39,7 +39,7 @@ export declare const tableFilters: {
      * 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?: DateRangeFilterOptions) => <T_1 extends Record<string, unknown>>(props: TableFilterProps<T_1>) => JSX.Element;
+    DateRangeFilter: (options?: DateRangeFilterOptions) => <T_1 extends Record<string, unknown>>(props: TableFilterProps<T_1>) => React.JSX.Element;
     /**
      * Number range filter.
      *
@@ -48,5 +48,5 @@ export declare const tableFilters: {
      * `accessor: (rowData) => Number(rowData.numberProp)`.
      * @param translatedLabels Translated filter labels.
      */
-    NumberRangeFilter: (translatedLabels?: NumberRangeTranslation & FilterButtonBarTranslation) => <T_2 extends Record<string, unknown>>(props: NumberRangeFilterProps<T_2>) => JSX.Element;
+    NumberRangeFilter: (translatedLabels?: NumberRangeTranslation & FilterButtonBarTranslation) => <T_2 extends Record<string, unknown>>(props: NumberRangeFilterProps<T_2>) => React.JSX.Element;
 };

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

@@ -7,29 +7,38 @@ 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/filters/types.d.ts

@@ -17,7 +17,7 @@ export interface TableFilterValue<T extends Record<string, unknown>> {
      */
     filterType: FilterType<T>;
 }
-export declare type TableFilterProps<T extends Record<string, unknown> | object> = FilterProps<T> & {
+export type TableFilterProps<T extends Record<string, unknown> | object> = FilterProps<T> & {
     /**
      * Data of column on which filter is opened. It is provided by the table it self.
      */

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

@@ -1,107 +1,114 @@
 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.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import type { CellProps, Hooks, Row } from 'react-table';
-export declare const useExpanderCell: <T extends Record<string, unknown>>(subComponent?: ((row: Row<T>) => React.ReactNode) | undefined, expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;
+export declare const useExpanderCell: <T extends Record<string, unknown>>(subComponent?: ((row: Row<T>) => React.ReactNode) | undefined, expanderCell?: ((cellProps: CellProps<T>) => React.ReactNode) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;

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

@@ -4,27 +4,33 @@
  *--------------------------------------------------------------------------------------------*/
 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,
+      ];
     });
-};
+  };