@itwin/itwinui-react 3.11.3 → 3.12.0

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

@@ -1,31 +1,40 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useGlobals } from '../../../../utils/index.js';
 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;
-    useGlobals();
-    const [text, setText] = React.useState(column.filterValue ?? '');
-    const inputRef = React.useRef(null);
-    React.useEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, []);
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        if (event.key === 'Enter') {
-            setFilter(text);
-        }
-    };
-    return (React.createElement(BaseFilter, null,
-        React.createElement(Input, { ref: inputRef, value: text, onChange: (e) => setText(e.target.value), onKeyDown: onKeyDown }),
-        React.createElement(FilterButtonBar, { setFilter: () => setFilter(text), clearFilter: clearFilter, translatedLabels: translatedLabels })));
+  const { column, translatedLabels, setFilter, clearFilter } = props;
+  useGlobals();
+  const [text, setText] = React.useState(column.filterValue ?? '');
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    if (event.key === 'Enter') {
+      setFilter(text);
+    }
+  };
+  return _jsxs(BaseFilter, {
+    children: [
+      _jsx(Input, {
+        ref: inputRef,
+        value: text,
+        onChange: (e) => setText(e.target.value),
+        onKeyDown: onKeyDown,
+      }),
+      _jsx(FilterButtonBar, {
+        setFilter: () => setFilter(text),
+        clearFilter: clearFilter,
+        translatedLabels: translatedLabels,
+      }),
+    ],
+  });
 };

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

@@ -1,30 +1,22 @@
 const isValidDate = (date) => !!date && !isNaN(date.valueOf());
-/**
- * Filters dates.
- * @param rows Table rows
- * @param ids Property names of data object to use for filtering
- * @param filterValue Filter value
- * @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.d.ts

@@ -31,31 +31,31 @@ export declare const defaultFilterFunctions: {
         autoRemove(val: string): boolean;
     };
     exactText: {
-        <T_1 extends Record<string, unknown>>(rows: Row<T_1>[], ids: IdType<T_1>[], filterValue: string): Row<T_1>[];
+        <T extends Record<string, unknown>>(rows: Row<T>[], ids: IdType<T>[], filterValue: string): Row<T>[];
         autoRemove(val: string): boolean;
     };
     exactTextCase: {
-        <T_2 extends Record<string, unknown>>(rows: Row<T_2>[], ids: IdType<T_2>[], filterValue: string): Row<T_2>[];
+        <T extends Record<string, unknown>>(rows: Row<T>[], ids: IdType<T>[], filterValue: string): Row<T>[];
         autoRemove(val: string): boolean;
     };
     includes: {
-        <T_3 extends Record<string, unknown>>(rows: Row<T_3>[], ids: IdType<T_3>[], filterValue: unknown[]): Row<T_3>[];
+        <T extends Record<string, unknown>>(rows: Row<T>[], ids: IdType<T>[], filterValue: unknown[]): Row<T>[];
         autoRemove(val: unknown[]): boolean;
     };
     includesAll: {
-        <T_4 extends Record<string, unknown>>(rows: Row<T_4>[], ids: IdType<T_4>[], filterValue: unknown[]): Row<T_4>[];
+        <T extends Record<string, unknown>>(rows: Row<T>[], ids: IdType<T>[], filterValue: unknown[]): Row<T>[];
         autoRemove(val: unknown[]): boolean;
     };
     includesSome: {
-        <T_5 extends Record<string, unknown>>(rows: Row<T_5>[], ids: IdType<T_5>[], filterValue: unknown[]): Row<T_5>[];
+        <T extends Record<string, unknown>>(rows: Row<T>[], ids: IdType<T>[], filterValue: unknown[]): Row<T>[];
         autoRemove(val: unknown[]): boolean;
     };
     includesValue: {
-        <T_6 extends Record<string, unknown>>(rows: Row<T_6>[], ids: IdType<T_6>[], filterValue: unknown[]): Row<T_6>[];
+        <T extends Record<string, unknown>>(rows: Row<T>[], ids: IdType<T>[], filterValue: unknown[]): Row<T>[];
         autoRemove(val: unknown[]): boolean;
     };
     between: {
-        <T_7 extends Record<string, unknown>>(rows: Row<T_7>[], ids: IdType<T_7>[], filterValue: [number, number]): Row<T_7>[];
+        <T extends Record<string, unknown>>(rows: Row<T>[], ids: IdType<T>[], filterValue: [number, number]): Row<T>[];
         autoRemove(val: [number, number]): boolean;
     };
 };

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

@@ -1,120 +1,124 @@
 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];
+      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/index.js

@@ -1,7 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 export { BaseFilter } from './BaseFilter.js';
 export { tableFilters } from './tableFilters.js';
 export { FilterButtonBar } from './FilterButtonBar.js';

package/esm/core/Table/filters/tableFilters.d.ts

@@ -29,7 +29,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>) => React.JSX.Element;
+    TextFilter: (translatedLabels?: FilterButtonBarTranslation) => <T extends Record<string, unknown>>(props: TableFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
     /**
      * Date range filter.
      *
@@ -40,7 +40,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>) => React.JSX.Element;
+    DateRangeFilter: (options?: DateRangeFilterOptions) => <T extends Record<string, unknown>>(props: TableFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
     /**
      * Number range filter.
      *
@@ -49,5 +49,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>) => React.JSX.Element;
+    NumberRangeFilter: (translatedLabels?: NumberRangeTranslation & FilterButtonBarTranslation) => <T extends Record<string, unknown>>(props: NumberRangeFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,35 +1,22 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 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 })),
+  TextFilter: (translatedLabels) => (props) =>
+    _jsx(TextFilter, {
+      ...props,
+      translatedLabels: translatedLabels,
+    }),
+  DateRangeFilter: (options) => (props) =>
+    _jsx(DateRangeFilter, {
+      ...props,
+      ...options,
+    }),
+  NumberRangeFilter: (translatedLabels) => (props) =>
+    _jsx(NumberRangeFilter, {
+      ...props,
+      translatedLabels: translatedLabels,
+    }),
 };

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

@@ -1,7 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 export { useExpanderCell } from './useExpanderCell.js';
 export { useSelectionCell } from './useSelectionCell.js';
 export { useSubRowFiltering } from './useSubRowFiltering.js';

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

@@ -1,107 +1,114 @@
 import { actions, makePropGetter, useGetLatest } from 'react-table';
-import styles from '../../../styles.js';
+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,
+      },
+    );
+  });
 };