@itwin/itwinui-react 3.12.1 → 3.13.0

package/esm/utils/hooks/useSyncExternalStore.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
-const _React = React;
+let _React = React;
 export const useSyncExternalStore =
   _React.useSyncExternalStore || useSyncExternalStoreShim;
 function useSyncExternalStoreShim(subscribe, getSnapshot) {
-  const value = getSnapshot();
-  const [{ instance }, forceUpdate] = React.useState({
+  let value = getSnapshot();
+  let [{ instance }, forceUpdate] = React.useState({
     instance: {
       value,
       getSnapshot,
@@ -13,19 +13,17 @@ function useSyncExternalStoreShim(subscribe, getSnapshot) {
   React.useLayoutEffect(() => {
     instance.value = value;
     instance.getSnapshot = getSnapshot;
-    if (!Object.is(value, getSnapshot())) {
+    if (!Object.is(value, getSnapshot()))
       forceUpdate({
         instance,
       });
-    }
   }, [subscribe, value, getSnapshot]);
   React.useEffect(() => {
-    const synchronize = () => {
-      if (!Object.is(instance.value, instance.getSnapshot())) {
+    let synchronize = () => {
+      if (!Object.is(instance.value, instance.getSnapshot()))
         forceUpdate({
           instance,
         });
-      }
     };
     synchronize();
     return subscribe(synchronize);

package/esm/utils/hooks/useVirtualScroll.d.ts

@@ -0,0 +1,14 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
+import type { Virtualizer } from '@tanstack/react-virtual';
+/**
+ * Wrapper over `useVirtualizer` from `@tanstack/react-virtual` that sets the index attribute to
+ * `data-iui-index` and adds wraps the `scrollToIndex` function in a `setTimeout` so it can be used in `useLayoutEffect`.
+ *
+ * @example
+ * const virtualizer = useVirtualScroll({
+ *  count: item.length,
+ *  getScrollElement: () => parentRef.current,
+ *  estimateSize: () => 30,
+ * });
+ */
+export declare const useVirtualScroll: (params: Parameters<typeof useVirtualizer>[0]) => Virtualizer<Element, Element>;

package/esm/utils/hooks/useVirtualScroll.js

@@ -0,0 +1,28 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
+import React from 'react';
+export const useVirtualScroll = (params) => {
+  let { ...rest } = params;
+  let virtualizer = useVirtualizer({
+    indexAttribute: 'data-iui-index',
+    overscan: 10,
+    ...rest,
+  });
+  let scrollToIndex = React.useCallback(
+    (index, options) => {
+      setTimeout(() => {
+        virtualizer.scrollToIndex(index, {
+          align: 'auto',
+          ...options,
+        });
+      });
+    },
+    [virtualizer],
+  );
+  return React.useMemo(
+    () => ({
+      ...virtualizer,
+      scrollToIndex,
+    }),
+    [virtualizer, scrollToIndex],
+  );
+};

package/esm/utils/icons/SvgCalendar.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgCalendar = (props) => {
-  return React.createElement(
+export const SvgCalendar = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'M13,13H9V10h4ZM16,3V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V3A1,1,0,0,1,1,2H3V0H4V2h8V0h1V2h2A1,1,0,0,1,16,3ZM15,6H1v9H15Z',
     }),
   );
-};

package/esm/utils/icons/SvgCaretDownSmall.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgCaretDownSmall = (props) => {
-  return React.createElement(
+export const SvgCaretDownSmall = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'M4.807 6h6.395a.28.28 0 0 1 .24.443L8.27 9.9a.34.34 0 0 1-.481 0L4.566 6.443A.27.27 0 0 1 4.806 6z',
     }),
   );
-};

package/esm/utils/icons/SvgCaretRightSmall.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgCaretRightSmall = (props) => {
-  return React.createElement(
+export const SvgCaretRightSmall = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'M6.003 4.807v6.4a.28.28 0 0 0 .443.24L9.9 8.27a.34.34 0 0 0 0-.48L6.446 4.566a.269.269 0 0 0-.443.24z',
     }),
   );
-};

package/esm/utils/icons/SvgCaretUpSmall.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgCaretUpSmall = (props) => {
-  return React.createElement(
+export const SvgCaretUpSmall = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'M4.807 9.997h6.395a.28.28 0 0 0 .24-.443L8.27 6.097a.34.34 0 0 0-.48 0h-.001L4.566 9.554a.27.27 0 0 0 .24.443z',
     }),
   );
-};

package/esm/utils/icons/SvgCheckmark.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgCheckmark = (props) => {
-  return React.createElement(
+export const SvgCheckmark = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'M6,14L0,8l2-2l4,4l8-8l2,2L6,14z',
     }),
   );
-};

package/esm/utils/icons/SvgCheckmarkSmall.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgCheckmarkSmall = (props) => {
-  return React.createElement(
+export const SvgCheckmarkSmall = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm6 13.4-4.7-4.7 1.4-1.4 3.3 3.3 7.3-7.3 1.4 1.4z',
     }),
   );
-};

package/esm/utils/icons/SvgChevronLeft.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgChevronLeft = (props) => {
-  return React.createElement(
+export const SvgChevronLeft = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm11.3 0 1.4 1.4-6.6 6.6 6.6 6.6-1.4 1.4-8-8z',
     }),
   );
-};

package/esm/utils/icons/SvgChevronLeftDouble.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgChevronLeftDouble = (props) => {
-  return React.createElement(
+export const SvgChevronLeftDouble = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm14.6 0 1.4 1.4-6.6 6.6 6.6 6.6-1.4 1.4-8-8zm-6.6 0 1.4 1.4-6.6 6.6 6.6 6.6-1.4 1.4-8-8z',
     }),
   );
-};

package/esm/utils/icons/SvgChevronRight.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgChevronRight = (props) => {
-  return React.createElement(
+export const SvgChevronRight = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm4.7 0-1.4 1.4 6.6 6.6-6.6 6.6 1.4 1.4 8-8z',
     }),
   );
-};

package/esm/utils/icons/SvgChevronRightDouble.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgChevronRightDouble = (props) => {
-  return React.createElement(
+export const SvgChevronRightDouble = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm1.4 0-1.4 1.4 6.6 6.6-6.6 6.6 1.4 1.4 8-8zm6.6 0-1.4 1.4 6.6 6.6-6.6 6.6 1.4 1.4 8-8z',
     }),
   );
-};

package/esm/utils/icons/SvgChevronRightSmall.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgChevronRightSmall = (props) => {
-  return React.createElement(
+export const SvgChevronRightSmall = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm5.525 2-1.05 1.05L9.425 8l-4.95 4.95L5.525 14l6-6-6-6Z',
     }),
   );
-};

package/esm/utils/icons/SvgClose.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgClose = (props) => {
-  return React.createElement(
+export const SvgClose = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm14 0-6 6-6-6-2 2 6 6-6 6 2 2 6-6 6 6 2-2-6-6 6-6',
     }),
   );
-};

package/esm/utils/icons/SvgCloseSmall.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgCloseSmall = (props) => {
-  return React.createElement(
+export const SvgCloseSmall = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z',
     }),
   );
-};

package/esm/utils/icons/SvgColumnManager.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgColumnManager = (props) => {
-  return React.createElement(
+export const SvgColumnManager = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm1 0h2v16h-2m6-16h2v16h-2m6-16h2v16h-2',
     }),
   );
-};

package/esm/utils/icons/SvgDocument.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgDocument = (props) => {
-  return React.createElement(
+export const SvgDocument = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'M10 0H2v16h12V4h-4zm1 0v3h3z',
     }),
   );
-};

package/esm/utils/icons/SvgFilter.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgFilter = (props) => {
-  return React.createElement(
+export const SvgFilter = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm0 0v2l6 5v9l4-3v-6l6-5v-2z',
     }),
   );
-};

package/esm/utils/icons/SvgFilterHollow.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgFilterHollow = (props) => {
-  return React.createElement(
+export const SvgFilterHollow = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'M15 1v.5L9.4 6.2l-.4.3v6L7 14V6.5l-.4-.3L1 1.5V1zm1-1H0v2l6 5v9l4-3V7l6-5z',
     }),
   );
-};

package/esm/utils/icons/SvgImportantSmall.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgImportantSmall = (props) => {
-  return React.createElement(
+export const SvgImportantSmall = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'M6.25 1h3.5v3.19l-.676 6.408H6.91L6.25 4.19zm.12 10.572h3.268V15H6.37z',
     }),
   );
-};

package/esm/utils/icons/SvgInfoCircular.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgInfoCircular = (props) => {
-  return React.createElement(
+export const SvgInfoCircular = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'M8 0a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm1.2 3.2a.923.923 0 0 1 .997.843l.003.057a1.31 1.31 0 0 1-1.3 1.2.945.945 0 0 1-1-1 1.228 1.228 0 0 1 1.3-1.1zm-2 9.6c-.5 0-.9-.3-.5-1.7l.6-2.4c.1-.4.1-.5 0-.5-.2-.1-.9.2-1.3.5l-.2-.5a6.497 6.497 0 0 1 3.3-1.6c.5 0 .6.6.3 1.6l-.7 2.6c-.1.5-.1.6.1.6a2.003 2.003 0 0 0 1.1-.6l.3.4a5.769 5.769 0 0 1-3 1.6z',
     }),
   );
-};

package/esm/utils/icons/SvgMore.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgMore = (props) => {
-  return React.createElement(
+export const SvgMore = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm4 8a2 2 0 1 1 -2-2 2 2 0 0 1 2 2zm4-2a2 2 0 1 0 2 2 2 2 0 0 0 -2-2zm6 0a2 2 0 1 0 2 2 2 2 0 0 0 -2-2z',
     }),
   );
-};

package/esm/utils/icons/SvgMoreVertical.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgMoreVertical = (props) => {
-  return React.createElement(
+export const SvgMoreVertical = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm8 4a2 2 0 1 1 2-2 2 2 0 0 1 -2 2zm2 4a2 2 0 1 0 -2 2 2 2 0 0 0 2-2zm0 6a2 2 0 1 0 -2 2 2 2 0 0 0 2-2z',
     }),
   );
-};

package/esm/utils/icons/SvgNew.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgNew = (props) => {
-  return React.createElement(
+export const SvgNew = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'M8 5a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v3a1 1 0 0 1-1 1zM4.535 7a.997.997 0 0 1-.499-.134l-2.598-1.5a1 1 0 1 1 1-1.732l2.598 1.5A1 1 0 0 1 4.536 7zM1.94 12.5a1 1 0 0 1-.501-1.866l2.598-1.5a1 1 0 1 1 1 1.732l-2.598 1.5a.997.997 0 0 1-.499.134zM8 16a1 1 0 0 1-1-1v-3a1 1 0 0 1 2 0v3a1 1 0 0 1-1 1zm6.061-3.5a.995.995 0 0 1-.499-.134l-2.598-1.5a1 1 0 1 1 1-1.732l2.598 1.5a1 1 0 0 1-.5 1.866zM11.465 7a1 1 0 0 1-.501-1.866l2.598-1.5a1 1 0 1 1 1 1.732l-2.598 1.5a.995.995 0 0 1-.5.134z',
     }),
   );
-};

package/esm/utils/icons/SvgSearch.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgSearch = (props) => {
-  return React.createElement(
+export const SvgSearch = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm11 9.7c.7-1 1.1-2.2 1.1-3.5.1-3.5-2.7-6.2-6-6.2-3.4 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1c1.3 0 2.5-.4 3.5-1.1l4.9 4.9 1.4-1.4zm-5 .5c-2.3 0-4.1-1.8-4.1-4.1s1.8-4.1 4.1-4.1 4.1 1.8 4.1 4.1-1.8 4.1-4.1 4.1',
     }),
   );
-};

package/esm/utils/icons/SvgSmileyHappy.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgSmileyHappy = (props) => {
-  return React.createElement(
+export const SvgSmileyHappy = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'M8 12.5a5.19 5.19 0 0 1-3.872-1.666.5.5 0 1 1 .744-.668A4.191 4.191 0 0 0 8 11.5a4.191 4.191 0 0 0 3.128-1.334.5.5 0 1 1 .744.668A5.19 5.19 0 0 1 8 12.5zM11 5a1.146 1.146 0 0 1 1 1.25 1.146 1.146 0 0 1-1 1.25 1.146 1.146 0 0 1-1-1.25A1.146 1.146 0 0 1 11 5zM5 5a1.146 1.146 0 0 1 1 1.25A1.146 1.146 0 0 1 5 7.5a1.146 1.146 0 0 1-1-1.25A1.146 1.146 0 0 1 5 5zm3-5a8 8 0 1 0 8 8 8 8 0 0 0-8-8z',
     }),
   );
-};

package/esm/utils/icons/SvgSortDown.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgSortDown = (props) => {
-  return React.createElement(
+export const SvgSortDown = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm7 0v12.7l-3.8-3.7-1.2 1.2 6 5.8 1.2-1.2 4.8-4.6-1.2-1.2-3.8 3.7v-12.7z',
     }),
   );
-};

package/esm/utils/icons/SvgSortUp.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgSortUp = (props) => {
-  return React.createElement(
+export const SvgSortUp = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm9 16v-12.7l3.8 3.7 1.2-1.2-6-5.8-1.2 1.2-4.8 4.6 1.2 1.2 3.8-3.7v12.7z',
     }),
   );
-};

package/esm/utils/icons/SvgStatusError.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgStatusError = (props) => {
-  return React.createElement(
+export const SvgStatusError = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'M9 12H7v-2h2v2Zm0-3H7V4h2v5Zm2.314-9H4.686L0 4.686v6.628L4.686 16h6.628L16 11.314V4.686L11.314 0Z',
     }),
   );
-};

package/esm/utils/icons/SvgStatusSuccess.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgStatusSuccess = (props) => {
-  return React.createElement(
+export const SvgStatusSuccess = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm8 0a8 8 0 1 0 8 8 8 8 0 0 0 -8-8zm-1.35 12-3.65-3.41 1.4-1.3 2.36 2.2 4.83-4.49 1.41 1.29z',
     }),
   );
-};

package/esm/utils/icons/SvgStatusWarning.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgStatusWarning = (props) => {
-  return React.createElement(
+export const SvgStatusWarning = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm15.86807 13.26721-6.77-11.62a1.15 1.15 0 0 0 -1.1-.67 1.17 1.17 0 0 0 -1.1.69l-6.77 11.59a1.2 1.2 0 0 0 1.1 1.72h13.45a1.19 1.19 0 0 0 1.19-1.71zm-6.87-.29h-2v-2h2zm0-3h-2v-5h2z',
     }),
   );
-};

package/esm/utils/icons/SvgSwap.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgSwap = (props) => {
-  return React.createElement(
+export const SvgSwap = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm5 15-3.78125-3.5 3.78125-3.5v2h8v3h-8zm6-7 3.78125-3.5-3.78125-3.5v2h-8v3h8z',
     }),
   );
-};

package/esm/utils/icons/SvgUpload.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgUpload = (props) => {
-  return React.createElement(
+export const SvgUpload = (props) =>
+  React.createElement(
     Svg,
     props,
     React.createElement('path', {
       d: 'm2 5h4v7h4v-7h4l-6-5zm12 6v3h-12v-3h-2v5h16v-5z',
     }),
   );
-};

package/esm/utils/meta.js

@@ -1,5 +1,5 @@
 import { version } from '../styles.js';
-const _moduleType = typeof 'ESM' !== 'undefined' ? 'ESM' : 'DEV';
+let _moduleType = 'ESM';
 export const meta = {
   version,
   module: _moduleType,

package/esm/utils/providers/HydrationProvider.js

@@ -1,42 +1,38 @@
 import * as React from 'react';
 import { useSyncExternalStore, useIsClient } from '../hooks/index.js';
-const HydrationContext = React.createContext(false);
-const noopSubscribe = () => () => {};
-const isServer = typeof window === 'undefined';
+let HydrationContext = React.createContext(false);
+let noopSubscribe = () => () => {};
+let isServer = 'undefined' == typeof window;
 export const useHydration = () => {
-  const hydrating = useSyncExternalStore(
+  let hydrating = useSyncExternalStore(
     noopSubscribe,
     () => false,
     () => !isServer,
   );
-  const hydrated = React.useContext(HydrationContext);
-  const hydratedFallback = useIsClient();
-  if (hydrated || hydratedFallback) {
-    return 'hydrated';
-  } else if (hydrating) {
-    return 'hydrating';
-  }
-  return undefined;
+  let hydrated = React.useContext(HydrationContext);
+  let hydratedFallback = useIsClient();
+  if (hydrated || hydratedFallback) return 'hydrated';
+  if (hydrating) return 'hydrating';
 };
 export const HydrationProvider = ({ children }) => {
-  const [isHydrated, setIsHydrated] = React.useState(
+  let [isHydrated, setIsHydrated] = React.useState(
     React.useContext(HydrationContext),
   );
-  const onHydrate = React.useCallback(() => setIsHydrated(true), []);
+  let onHydrate = React.useCallback(() => setIsHydrated(true), []);
   return React.createElement(
     HydrationContext.Provider,
     {
       value: isHydrated,
     },
-    !isHydrated
-      ? React.createElement(HydrationCheck, {
+    isHydrated
+      ? null
+      : React.createElement(HydrationCheck, {
           onHydrate: onHydrate,
-        })
-      : null,
+        }),
     children,
   );
 };
-const HydrationCheck = ({ onHydrate }) => {
+let HydrationCheck = ({ onHydrate }) => {
   React.useEffect(() => void onHydrate(), [onHydrate]);
   return null;
 };