@itwin/itwinui-react 3.12.2 → 3.13.0

package/esm/react-table/react-table.types-test.js

@@ -19,7 +19,7 @@ import {
   Tooltip,
 } from '../index.js';
 () => {
-  const columns = [
+  let columns = [
     {
       Header: 'Header 1',
       accessor: 'header1',
@@ -29,7 +29,7 @@ import {
       accessor: 'header2',
     },
   ];
-  const data = [
+  let data = [
     {
       header1: 'row1',
       header2: 'row1',
@@ -46,7 +46,7 @@ import {
   });
 };
 () => {
-  const columns = [
+  let columns = [
     {
       Header: 'Header 1',
       accessor: 'header1',
@@ -60,14 +60,12 @@ import {
   ];
 };
 () => {
-  const cellRenderer = React.useCallback((props) => {
-    return React.createElement(
-      'div',
-      null,
-      props.cellProps.row.original.header1,
-    );
-  }, []);
-  const columns = [
+  let cellRenderer = React.useCallback(
+    (props) =>
+      React.createElement('div', null, props.cellProps.row.original.header1),
+    [],
+  );
+  let columns = [
     {
       Header: 'Header 1',
       accessor: 'header1',
@@ -80,7 +78,7 @@ import {
         React.createElement('div', null, props.row.original.header2),
     },
   ];
-  const data = [
+  let data = [
     {
       header1: 'row1',
       header2: 'row1',
@@ -97,10 +95,11 @@ import {
   });
 };
 () => {
-  const Cell = React.useCallback((props) => {
-    return React.createElement('div', null, props.row.original.header1);
-  }, []);
-  const columns = [
+  let Cell = React.useCallback(
+    (props) => React.createElement('div', null, props.row.original.header1),
+    [],
+  );
+  let columns = [
     {
       Header: 'Header 1',
       accessor: 'header1',
@@ -111,7 +110,7 @@ import {
       accessor: 'header2',
     },
   ];
-  const data = [
+  let data = [
     {
       header1: 'row1',
       header2: 'row1',
@@ -128,7 +127,7 @@ import {
   });
 };
 () => {
-  const columns = React.useMemo(
+  let columns = React.useMemo(
     () => [
       {
         id: 'name',
@@ -145,8 +144,8 @@ import {
     ],
     [],
   );
-  const data = React.useMemo(() => {
-    return [
+  let data = React.useMemo(
+    () => [
       {
         name: 'Name1',
         description: 'description',
@@ -159,8 +158,9 @@ import {
         name: 'Name3',
         description: 'description',
       },
-    ];
-  }, []);
+    ],
+    [],
+  );
   return React.createElement(Table, {
     columns: columns,
     emptyTableContent: 'No data.',
@@ -168,7 +168,7 @@ import {
   });
 };
 () => {
-  const translatedLabels = React.useMemo(
+  let translatedLabels = React.useMemo(
     () => ({
       filter: 'Filter',
       clear: 'Clear',
@@ -177,7 +177,7 @@ import {
     }),
     [],
   );
-  const formatter = React.useMemo(
+  let formatter = React.useMemo(
     () =>
       new Intl.DateTimeFormat('en-us', {
         month: 'short',
@@ -186,14 +186,12 @@ import {
       }),
     [],
   );
-  const formatDate = React.useCallback(
-    (date) => {
-      return formatter.format(date);
-    },
+  let formatDate = React.useCallback(
+    (date) => formatter.format(date),
     [formatter],
   );
-  const menuItems = React.useCallback((close) => {
-    return [
+  let menuItems = React.useCallback(
+    (close) => [
       React.createElement(
         MenuItem,
         {
@@ -210,51 +208,54 @@ import {
         },
         'Delete',
       ),
-    ];
-  }, []);
-  const isRowDisabled = React.useCallback((rowData) => {
-    return rowData.name === 'Name2';
-  }, []);
-  const isCheckboxDisabled = React.useCallback((rowData) => {
-    return rowData.name === 'Name1';
-  }, []);
-  const isExpanderDisabled = React.useCallback((rowData) => {
-    return rowData.name === 'Name2';
-  }, []);
-  const isCellDisabled = React.useCallback((rowData) => {
-    return rowData.name === 'Name3';
-  }, []);
-  const onCellEdit = React.useCallback((columnId, value, rowData) => {
+    ],
+    [],
+  );
+  let isRowDisabled = React.useCallback(
+    (rowData) => 'Name2' === rowData.name,
+    [],
+  );
+  let isCheckboxDisabled = React.useCallback(
+    (rowData) => 'Name1' === rowData.name,
+    [],
+  );
+  let isExpanderDisabled = React.useCallback(
+    (rowData) => 'Name2' === rowData.name,
+    [],
+  );
+  let isCellDisabled = React.useCallback(
+    (rowData) => 'Name3' === rowData.name,
+    [],
+  );
+  let onCellEdit = React.useCallback((columnId, value, rowData) => {
     console.log({
       columnId,
       value,
       rowData,
     });
   }, []);
-  const cellRenderer = React.useCallback(
+  let cellRenderer = React.useCallback(
     (props) =>
       React.createElement(
         React.Fragment,
         null,
-        !isRowDisabled(props.cellProps.row.original) &&
-          props.cellProps.value !== 'Fetching...'
-          ? React.createElement(EditableCell, {
-              ...props,
-              onCellEdit: onCellEdit,
-            })
-          : React.createElement(DefaultCell, {
+        isRowDisabled(props.cellProps.row.original) ||
+          'Fetching...' === props.cellProps.value
+          ? React.createElement(DefaultCell, {
               ...props,
               status:
-                props.cellProps.value === 'Fetching...'
-                  ? undefined
-                  : 'positive',
+                'Fetching...' === props.cellProps.value ? void 0 : 'positive',
               isDisabled: (rowData) =>
                 isCellDisabled(rowData) || isRowDisabled(rowData),
+            })
+          : React.createElement(EditableCell, {
+              ...props,
+              onCellEdit: onCellEdit,
             }),
       ),
     [isCellDisabled, isRowDisabled, onCellEdit],
   );
-  const expandedSubComponent = React.useCallback(
+  let expandedSubComponent = React.useCallback(
     (row) =>
       React.createElement(
         'div',
@@ -288,11 +289,11 @@ import {
       ),
     [],
   );
-  const onClickHandler = React.useCallback(
+  let onClickHandler = React.useCallback(
     (props) => console.log(props.row.original.name),
     [],
   );
-  const columns = React.useMemo(
+  let columns = React.useMemo(
     () => [
       SelectionColumn({
         isDisabled: isCheckboxDisabled,
@@ -333,13 +334,12 @@ import {
         id: 'ids',
         Header: 'IDs (enter one of the IDs in the filter)',
         accessor: 'ids',
-        Cell: (props) => {
-          return React.createElement(
+        Cell: (props) =>
+          React.createElement(
             React.Fragment,
             null,
             props.row.original.ids.join(', '),
-          );
-        },
+          ),
         Filter: tableFilters.TextFilter(translatedLabels),
         filter: 'includes',
         minWidth: 200,
@@ -348,13 +348,12 @@ import {
         id: 'startDate',
         Header: 'Start date',
         accessor: 'startDate',
-        Cell: (props) => {
-          return React.createElement(
+        Cell: (props) =>
+          React.createElement(
             React.Fragment,
             null,
             formatDate(props.row.original.startDate),
-          );
-        },
+          ),
         Filter: tableFilters.DateRangeFilter({
           translatedLabels,
         }),
@@ -364,13 +363,12 @@ import {
         id: 'endDate',
         Header: 'End date',
         accessor: (rowData) => new Date(rowData.endDate),
-        Cell: (props) => {
-          return React.createElement(
+        Cell: (props) =>
+          React.createElement(
             React.Fragment,
             null,
             formatDate(new Date(props.row.original.endDate)),
-          );
-        },
+          ),
         Filter: tableFilters.DateRangeFilter({
           translatedLabels,
         }),
@@ -380,8 +378,8 @@ import {
         id: 'click-me',
         Header: 'Click',
         width: 100,
-        Cell: (props) => {
-          return React.createElement(
+        Cell: (props) =>
+          React.createElement(
             Anchor,
             {
               as: 'button',
@@ -392,8 +390,7 @@ import {
               },
             },
             'Click me!',
-          );
-        },
+          ),
         disableResizing: true,
       },
       {
@@ -431,7 +428,7 @@ import {
       isRowDisabled,
     ],
   );
-  const data = React.useMemo(
+  let data = React.useMemo(
     () => [
       {
         index: 1,
@@ -502,7 +499,7 @@ import {
     ],
     [],
   );
-  const onFilter = React.useCallback((filters, state, filteredData) => {
+  let onFilter = React.useCallback((filters, state, filteredData) => {
     let rowInfo = '[';
     filteredData?.forEach((row) => {
       rowInfo += `${JSON.stringify(row.original)},`;
@@ -515,7 +512,7 @@ import {
       )}, State: ${JSON.stringify(state)}, Rows: ${rowInfo}`,
     );
   }, []);
-  const onSelect = React.useCallback(
+  let onSelect = React.useCallback(
     (rows, state) =>
       console.log(
         `Selected rows: ${JSON.stringify(rows)}, Table state: ${JSON.stringify(
@@ -524,16 +521,16 @@ import {
       ),
     [],
   );
-  const onRowClick = React.useCallback(
+  let onRowClick = React.useCallback(
     (event, row) => console.log(`Row clicked: ${JSON.stringify(row.original)}`),
     [],
   );
-  const onSort = React.useCallback(
+  let onSort = React.useCallback(
     (state) =>
       console.log(`Sort changed. Table state: ${JSON.stringify(state)}`),
     [],
   );
-  const onExpand = React.useCallback(
+  let onExpand = React.useCallback(
     (rows, state) =>
       console.log(
         `Expanded rows: ${JSON.stringify(rows)}. Table state: ${JSON.stringify(
@@ -542,27 +539,27 @@ import {
       ),
     [],
   );
-  const onRowInViewport = React.useCallback((rowData) => {
+  let onRowInViewport = React.useCallback((rowData) => {
     console.log(`Row in view: ${JSON.stringify(rowData)}`);
   }, []);
-  const rowProps = React.useCallback((row) => {
-    return {
+  let rowProps = React.useCallback(
+    (row) => ({
       onMouseEnter: () => {
         console.log(`Hovered over ${row.original.name}`);
         setHoveredRowIndex(row.index);
       },
       ref: (el) => {
-        if (el) {
+        if (el)
           setRowRefMap((r) => {
             r[row.index] = el;
             return r;
           });
-        }
       },
-    };
-  }, []);
-  const pageSizeList = React.useMemo(() => [10, 25, 50], []);
-  const paginator = React.useCallback(
+    }),
+    [],
+  );
+  let pageSizeList = React.useMemo(() => [10, 25, 50], []);
+  let paginator = React.useCallback(
     (props) =>
       React.createElement(TablePaginator, {
         ...props,
@@ -579,16 +576,16 @@ import {
           rowsPerPageLabel: 'Rows per localized page',
           rowsSelectedLabel: (totalSelectedRowsCount) =>
             `${totalSelectedRowsCount} localized ${
-              totalSelectedRowsCount === 1 ? 'row' : 'rows'
+              1 === totalSelectedRowsCount ? 'row' : 'rows'
             } selected`,
         },
       }),
     [pageSizeList],
   );
-  const [globalFilter, setGlobalFilter] = React.useState('');
-  const tableInstance = React.useRef();
-  const [hoveredRowIndex, setHoveredRowIndex] = React.useState(0);
-  const [rowRefMap, setRowRefMap] = React.useState({});
+  let [globalFilter, setGlobalFilter] = React.useState('');
+  let tableInstance = React.useRef();
+  let [hoveredRowIndex, setHoveredRowIndex] = React.useState(0);
+  let [rowRefMap, setRowRefMap] = React.useState({});
   return React.createElement(
     'div',
     null,
@@ -645,7 +642,7 @@ import {
       styleType: 'zebra-rows',
       enableVirtualization: true,
       scrollToRow: React.useCallback(
-        (rows, data) => rows.findIndex((row) => row.original.index === 1),
+        (rows, data) => rows.findIndex((row) => 1 === row.original.index),
         [],
       ),
     }),

package/esm/styles.js

@@ -1,10 +1,10 @@
-const t = '3.12.2';
+const t = '3.13.0';
 const u = new Proxy(
   {},
   {
     get(e, i) {
       if (typeof i == 'string' && i.startsWith('iui-'))
-        return i.replace('iui-', '_iui3-');
+        return i.replace('iui-', `_iui${t.replace(/\./g, '')}-`);
     },
     has(e, i) {
       return typeof i == 'string' && i.startsWith('iui-');