@itwin/itwinui-react 3.12.1 → 3.13.0

package/esm/utils/components/LineClamp.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Box } from './Box.js';
 import { ShadowRoot } from './ShadowRoot.js';
 export const LineClamp = React.forwardRef((props, forwardedRef) => {
-  const { lines, children, ...rest } = props;
+  let { lines, children, ...rest } = props;
   return React.createElement(
     Box,
     {
@@ -23,7 +23,7 @@ export const LineClamp = React.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-const css = `
+let css = `
   :host {
     overflow: hidden;
     display: -webkit-box;

package/esm/utils/components/MiddleTextTruncation.d.ts

@@ -31,4 +31,7 @@ export type MiddleTextTruncationProps = {
  *   )}
  * />
  */
-export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => React.JSX.Element;
+export declare const MiddleTextTruncation: {
+    (props: MiddleTextTruncationProps): React.JSX.Element;
+    displayName: string;
+};

package/esm/utils/components/MiddleTextTruncation.js

@@ -1,18 +1,16 @@
 import * as React from 'react';
 import { useOverflow } from '../hooks/useOverflow.js';
-const ELLIPSIS_CHAR = '…';
+let ELLIPSIS_CHAR = '…';
 export const MiddleTextTruncation = (props) => {
-  const { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
-  const [ref, visibleCount] = useOverflow(text);
-  const truncatedText = React.useMemo(() => {
-    if (visibleCount < text.length) {
+  let { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
+  let [ref, visibleCount] = useOverflow(text);
+  let truncatedText = React.useMemo(() => {
+    if (visibleCount < text.length)
       return `${text.substring(
         0,
         visibleCount - endCharsCount - ELLIPSIS_CHAR.length,
       )}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
-    } else {
-      return text;
-    }
+    return text;
   }, [endCharsCount, text, visibleCount]);
   return React.createElement(
     'span',

package/esm/utils/components/Portal.js

@@ -3,21 +3,17 @@ import * as ReactDOM from 'react-dom';
 import { useIsClient } from '../hooks/useIsClient.js';
 import { atom } from 'jotai';
 import { useScopedAtom } from '../providers/ScopeProvider.js';
-export const portalContainerAtom = atom(undefined);
+export const portalContainerAtom = atom(void 0);
 export const Portal = (props) => {
-  const { portal = true, children } = props;
-  const isClient = useIsClient();
-  const portalTo = usePortalTo(portal);
-  if (!isClient) {
-    return null;
-  }
+  let { portal = true, children } = props;
+  let isClient = useIsClient();
+  let portalTo = usePortalTo(portal);
+  if (!isClient) return null;
   return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
 };
 export const usePortalTo = (portal) => {
-  const [portalContainer] = useScopedAtom(portalContainerAtom);
-  if (typeof portal === 'boolean') {
-    return portal ? portalContainer : null;
-  }
-  const portalTo = typeof portal.to === 'function' ? portal.to() : portal.to;
+  let [portalContainer] = useScopedAtom(portalContainerAtom);
+  if ('boolean' == typeof portal) return portal ? portalContainer : null;
+  let portalTo = 'function' == typeof portal.to ? portal.to() : portal.to;
   return portalTo ?? portalContainer;
 };

package/esm/utils/components/Resizer.js

@@ -3,8 +3,8 @@ import {
   getBoundedValue,
   getTranslateValuesFromElement,
 } from '../functions/index.js';
-export const Resizer = (props) => {
-  return React.createElement(
+export const Resizer = (props) =>
+  React.createElement(
     'div',
     {
       style: {
@@ -17,66 +17,58 @@ export const Resizer = (props) => {
     React.createElement(ResizerStyles, null),
     React.createElement(Resizers, props),
   );
-};
-const Resizers = (props) => {
-  const { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
-  const isResizing = React.useRef(false);
-  const onResizePointerDown = (event) => {
-    if (!elementRef.current || event.button !== 0) {
-      return;
-    }
-    const initialPointerX = event.clientX;
-    const initialPointerY = event.clientY;
-    const [initialTranslateX, initialTranslateY] =
-      getTranslateValuesFromElement(elementRef.current);
-    const { width: initialWidth, height: initialHeight } =
+let Resizers = (props) => {
+  let { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
+  let isResizing = React.useRef(false);
+  let onResizePointerDown = (event) => {
+    if (!elementRef.current || 0 !== event.button) return;
+    let initialPointerX = event.clientX;
+    let initialPointerY = event.clientY;
+    let [initialTranslateX, initialTranslateY] = getTranslateValuesFromElement(
+      elementRef.current,
+    );
+    let { width: initialWidth, height: initialHeight } =
       elementRef.current.getBoundingClientRect();
     let width = `${initialWidth}px`;
     let height = `${initialHeight}px`;
     let translateX = initialTranslateX;
     let translateY = initialTranslateY;
     let minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
-    if (Number.isNaN(minWidth)) {
-      minWidth = 380;
-    }
-    const minHeight = parseFloat(
-      getComputedStyle(elementRef.current).minHeight,
-    );
-    const resizer = event.currentTarget.dataset.iuiResizer;
-    const ownerDocument = elementRef.current.ownerDocument || document;
-    const originalUserSelect = ownerDocument.body.style.userSelect;
+    if (Number.isNaN(minWidth)) minWidth = 380;
+    let minHeight = parseFloat(getComputedStyle(elementRef.current).minHeight);
+    let resizer = event.currentTarget.dataset.iuiResizer;
+    let ownerDocument = elementRef.current.ownerDocument || document;
+    let originalUserSelect = ownerDocument.body.style.userSelect;
     ownerDocument.body.style.userSelect = 'none';
-    const onResizePointerMove = (event) => {
-      if (!elementRef.current) {
-        return;
-      }
+    let onResizePointerMove = (event) => {
+      if (!elementRef.current) return;
       if (!isResizing.current) {
         isResizing.current = true;
         onResizeStart?.();
       }
-      const containerRect = containerRef?.current?.getBoundingClientRect();
-      const clientX = getBoundedValue(
+      let containerRect = containerRef?.current?.getBoundingClientRect();
+      let clientX = getBoundedValue(
         event.clientX,
         containerRect?.left ?? 0,
         containerRect?.right ?? ownerDocument.documentElement.clientWidth ?? 0,
       );
-      const clientY = getBoundedValue(
+      let clientY = getBoundedValue(
         event.clientY,
         containerRect?.top ?? 0,
         containerRect?.bottom ??
           ownerDocument.documentElement.clientHeight ??
           0,
       );
-      const diffX = initialPointerX - clientX;
-      const diffY = initialPointerY - clientY;
+      let diffX = initialPointerX - clientX;
+      let diffY = initialPointerY - clientY;
       switch (resizer) {
         case 'top-left': {
-          const newHeight = initialHeight + diffY;
+          let newHeight = initialHeight + diffY;
           if (newHeight >= minHeight) {
             height = elementRef.current.style.height = `${newHeight}px`;
             translateY = initialTranslateY - diffY;
           }
-          const newWidth = initialWidth + diffX;
+          let newWidth = initialWidth + diffX;
           if (newWidth >= minWidth) {
             width = elementRef.current.style.width = `${newWidth}px`;
             translateX = initialTranslateX - diffX;
@@ -85,17 +77,15 @@ const Resizers = (props) => {
           break;
         }
         case 'top': {
-          const newHeight = initialHeight + diffY;
-          if (newHeight < minHeight) {
-            break;
-          }
+          let newHeight = initialHeight + diffY;
+          if (newHeight < minHeight) break;
           height = elementRef.current.style.height = `${newHeight}px`;
           translateY = initialTranslateY - diffY;
           elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
           break;
         }
         case 'top-right': {
-          const newHeight = initialHeight + diffY;
+          let newHeight = initialHeight + diffY;
           if (newHeight >= minHeight) {
             height = elementRef.current.style.height = `${newHeight}px`;
             translateY = initialTranslateY - diffY;
@@ -104,29 +94,26 @@ const Resizers = (props) => {
           elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
           break;
         }
-        case 'right': {
+        case 'right':
           width = elementRef.current.style.width = `${initialWidth - diffX}px`;
           height = elementRef.current.style.height = `${initialHeight}px`;
           elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
           break;
-        }
-        case 'bottom-right': {
+        case 'bottom-right':
           width = elementRef.current.style.width = `${initialWidth - diffX}px`;
           height = elementRef.current.style.height = `${
             initialHeight - diffY
           }px`;
           elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
           break;
-        }
-        case 'bottom': {
+        case 'bottom':
           height = elementRef.current.style.height = `${
             initialHeight - diffY
           }px`;
           elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
           break;
-        }
         case 'bottom-left': {
-          const newWidth = initialWidth + diffX;
+          let newWidth = initialWidth + diffX;
           if (newWidth >= minWidth) {
             width = elementRef.current.style.width = `${newWidth}px`;
             translateX = initialTranslateX - diffX;
@@ -138,10 +125,8 @@ const Resizers = (props) => {
           break;
         }
         case 'left': {
-          const newWidth = initialWidth + diffX;
-          if (newWidth < minWidth) {
-            break;
-          }
+          let newWidth = initialWidth + diffX;
+          if (newWidth < minWidth) break;
           width = elementRef.current.style.width = `${newWidth}px`;
           height = elementRef.current.style.height = `${initialHeight}px`;
           translateX = initialTranslateX - diffX;
@@ -233,10 +218,10 @@ const Resizers = (props) => {
     }),
   );
 };
-const ResizerStyles = React.memo(() =>
+let ResizerStyles = React.memo(() =>
   React.createElement('style', null, resizerStyles),
 );
-const resizerStyles = `
+let resizerStyles = `
 [data-iui-resizer] {
   pointer-events: auto;
   grid-area: 1 / 1 / -1 / -1;

package/esm/utils/components/ShadowRoot.js

@@ -2,14 +2,14 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { useLatestRef, useLayoutEffect } from '../hooks/index.js';
 import { useHydration } from '../providers/index.js';
-const isBrowser = typeof document !== 'undefined';
-const supportsDSD =
+let isBrowser = 'undefined' != typeof document;
+let supportsDSD =
   isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
-const supportsAdoptedStylesheets =
+let supportsAdoptedStylesheets =
   isBrowser && 'adoptedStyleSheets' in Document.prototype;
 export const ShadowRoot = ({ children, css }) => {
-  const isHydrating = useHydration() === 'hydrating';
-  if (!isBrowser) {
+  let isHydrating = 'hydrating' === useHydration();
+  if (!isBrowser)
     return React.createElement(
       'template',
       {
@@ -18,10 +18,7 @@ export const ShadowRoot = ({ children, css }) => {
       css && React.createElement('style', null, css),
       children,
     );
-  }
-  if (supportsDSD && isHydrating) {
-    return null;
-  }
+  if (supportsDSD && isHydrating) return null;
   return React.createElement(
     ClientShadowRoot,
     {
@@ -30,12 +27,12 @@ export const ShadowRoot = ({ children, css }) => {
     children,
   );
 };
-const ClientShadowRoot = ({ children, css }) => {
-  const templateRef = React.useRef(null);
-  const shadowRoot = useShadowRoot(templateRef, {
+let ClientShadowRoot = ({ children, css }) => {
+  let templateRef = React.useRef(null);
+  let shadowRoot = useShadowRoot(templateRef, {
     css,
   });
-  const fallbackCss =
+  let fallbackCss =
     !supportsAdoptedStylesheets && css
       ? React.createElement('style', null, css)
       : null;
@@ -49,31 +46,27 @@ const ClientShadowRoot = ({ children, css }) => {
       });
 };
 function useShadowRoot(templateRef, { css = '' }) {
-  const [shadowRoot, setShadowRoot] = React.useState(null);
-  const styleSheet = React.useRef();
-  const latestCss = useLatestRef(css);
-  const latestShadowRoot = useLatestRef(shadowRoot);
+  let [shadowRoot, setShadowRoot] = React.useState(null);
+  let styleSheet = React.useRef();
+  let latestCss = useLatestRef(css);
+  let latestShadowRoot = useLatestRef(shadowRoot);
   useLayoutEffect(() => {
-    const parent = templateRef.current?.parentElement;
-    if (!parent) {
-      return;
-    }
-    const setupOrReuseShadowRoot = () => {
-      if (parent.shadowRoot && latestShadowRoot.current === null) {
+    let parent = templateRef.current?.parentElement;
+    if (!parent) return;
+    let setupOrReuseShadowRoot = () => {
+      if (parent.shadowRoot && null === latestShadowRoot.current)
         parent.shadowRoot.replaceChildren();
-      }
-      const shadow =
+      let shadow =
         parent.shadowRoot ||
         parent.attachShadow({
           mode: 'open',
         });
       if (supportsAdoptedStylesheets) {
-        const currentWindow = shadow.ownerDocument.defaultView || globalThis;
+        let currentWindow = shadow.ownerDocument.defaultView || globalThis;
         styleSheet.current = new currentWindow.CSSStyleSheet();
         shadow.adoptedStyleSheets = [styleSheet.current];
-        if (latestCss.current) {
+        if (latestCss.current)
           styleSheet.current.replaceSync(latestCss.current);
-        }
       }
       ReactDOM.flushSync(() => setShadowRoot(shadow));
     };
@@ -83,9 +76,7 @@ function useShadowRoot(templateRef, { css = '' }) {
     return () => void setShadowRoot(null);
   }, [templateRef, latestCss, latestShadowRoot]);
   useLayoutEffect(() => {
-    if (css && supportsAdoptedStylesheets) {
-      styleSheet.current?.replaceSync(css);
-    }
+    if (css && supportsAdoptedStylesheets) styleSheet.current?.replaceSync(css);
   }, [css]);
   return shadowRoot;
 }

package/esm/utils/components/WithCSSTransition.js

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { styles } from '../../styles.js';
 export const WithCSSTransition = (props) => {
-  const { in: visible, dimension = 'height', children, ...rest } = props;
-  const expandedSize = React.useRef(0);
-  const dimensionCamelCase = dimension === 'height' ? 'Height' : 'Width';
+  let { in: visible, dimension = 'height', children, ...rest } = props;
+  let expandedSize = React.useRef(0);
+  let dimensionCamelCase = 'height' === dimension ? 'Height' : 'Width';
   return React.createElement(
     CSSTransition,
     {
@@ -40,9 +40,8 @@ export const WithCSSTransition = (props) => {
     React.isValidElement(children)
       ? React.cloneElement(children, {
           ref: (el) => {
-            if (el) {
+            if (el)
               expandedSize.current = el.getBoundingClientRect()[dimension];
-            }
           },
         })
       : React.createElement(React.Fragment, null),

package/esm/utils/components/index.d.ts

@@ -5,10 +5,10 @@ export * from './InputFlexContainer.js';
 export * from './InputWithIcon.js';
 export * from './WithCSSTransition.js';
 export * from './MiddleTextTruncation.js';
-export * from './VirtualScroll.js';
 export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';
 export * from './ButtonBase.js';
 export * from './Portal.js';
 export * from './ShadowRoot.js';
 export * from './LineClamp.js';
+export * from './FieldsetBase.js';

package/esm/utils/components/index.js

@@ -5,10 +5,10 @@ export * from './InputFlexContainer.js';
 export * from './InputWithIcon.js';
 export * from './WithCSSTransition.js';
 export * from './MiddleTextTruncation.js';
-export * from './VirtualScroll.js';
 export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';
 export * from './ButtonBase.js';
 export * from './Portal.js';
 export * from './ShadowRoot.js';
 export * from './LineClamp.js';
+export * from './FieldsetBase.js';

package/esm/utils/functions/colors.js

@@ -11,15 +11,14 @@ export const SoftBackgrounds = {
   ash: 'var(--iui-color-background-ash)',
   oak: 'var(--iui-color-background-oak)',
 };
-export const isSoftBackground = (value) => {
-  return Object.keys(SoftBackgrounds).includes(value);
-};
-const USER_COLORS = Object.values(SoftBackgrounds);
+export const isSoftBackground = (value) =>
+  Object.keys(SoftBackgrounds).includes(value);
+let USER_COLORS = Object.values(SoftBackgrounds);
 export const getUserColor = (emailOrName) => {
-  const normalizedString = emailOrName.trim().toLowerCase();
+  let normalizedString = emailOrName.trim().toLowerCase();
   let hash = 0;
   for (let i = 0; i < normalizedString.length; i++) {
-    const charCode = normalizedString.charCodeAt(i);
+    let charCode = normalizedString.charCodeAt(i);
     hash = (hash + charCode) % USER_COLORS.length;
   }
   return USER_COLORS[hash];

package/esm/utils/functions/date.js

@@ -1,9 +1,7 @@
 export const isBefore = (beforeDate, afterDate) => {
-  if (!beforeDate || !afterDate) {
-    return false;
-  }
-  const firstDate = new Date(beforeDate);
-  const secondDate = new Date(afterDate);
+  if (!beforeDate || !afterDate) return false;
+  let firstDate = new Date(beforeDate);
+  let secondDate = new Date(afterDate);
   firstDate && firstDate.setHours(0, 0, 0, 0);
   secondDate && secondDate.setHours(0, 0, 0, 0);
   return firstDate < secondDate;

package/esm/utils/functions/dev.d.ts

@@ -1,11 +1,17 @@
 declare const isUnitTest: boolean;
-declare let isDev: boolean;
 /**
- * Logs message one time only in dev environments.
+ * Returns a function that can be used to log one-time warnings in dev environments.
+ *
+ * **Note**: The actual log call should be wrapped in a check against `process.env.NODE_ENV === 'development'`
+ * to ensure that it is removed from the production build output (by SWC).
+ * Read more about the [`NODE_ENV` convention](https://nodejs.org/en/learn/getting-started/nodejs-the-difference-between-development-and-production).
  *
  * @example
- * const logWarningInDev = createWarningLogger();
- * logWarningInDev("please don't use this")
+ * const logWarning = createWarningLogger();
+ *
+ * if (process.env.NODE_ENV === 'development') {
+ *   logWarning("please don't use this")
+ * }
  */
 declare const createWarningLogger: () => (message: string) => void;
-export { isUnitTest, isDev, createWarningLogger };
+export { isUnitTest, createWarningLogger };

package/esm/utils/functions/dev.js

@@ -1,23 +1,9 @@
-const isJest = typeof jest !== 'undefined';
-const isMocha =
-  typeof globalThis.beforeEach !== 'undefined' &&
-  `${globalThis.beforeEach}`.replace(/\s/g, '') ===
-    'function(name,fn){suites[0].beforeEach(name,fn);}';
-const isVitest = typeof globalThis.__vitest_index__ !== 'undefined';
-const isUnitTest = isJest || isVitest || isMocha;
-let isDev = false;
-try {
-  isDev = process.env.NODE_ENV !== 'production' && !isUnitTest;
-} catch {}
-const createWarningLogger = !isDev
-  ? () => () => {}
-  : () => {
-      let logged = false;
-      return (message) => {
-        if (!logged) {
-          console.warn(message);
-          logged = true;
-        }
-      };
-    };
-export { isUnitTest, isDev, createWarningLogger };
+let isJest = 'undefined' != typeof jest;
+let isMocha =
+  void 0 !== globalThis.beforeEach &&
+  'function(name,fn){suites[0].beforeEach(name,fn);}' ===
+    `${globalThis.beforeEach}`.replace(/\s/g, '');
+let isVitest = void 0 !== globalThis.__vitest_index__;
+let isUnitTest = isJest || isVitest || isMocha;
+let createWarningLogger = () => () => {};
+export { isUnitTest, createWarningLogger };

package/esm/utils/functions/dom.js

@@ -1,28 +1,20 @@
-export const getDocument = () => {
-  return typeof document === 'undefined' ? undefined : document;
-};
-export const getWindow = () => {
-  return typeof window === 'undefined' ? undefined : window;
-};
+export const getDocument = () =>
+  'undefined' == typeof document ? void 0 : document;
+export const getWindow = () => ('undefined' == typeof window ? void 0 : window);
 export const mergeEventHandlers =
   (...callbacks) =>
   (event) => {
-    for (const cb of callbacks) {
+    for (let cb of callbacks) {
       cb?.(event);
-      if (event?.defaultPrevented) {
-        return;
-      }
+      if (event?.defaultPrevented) return;
     }
   };
 export const getTranslateValuesFromElement = (element) => {
-  if (!element) {
-    return [];
-  }
-  const transformValue =
-    getComputedStyle(element).getPropertyValue('transform');
+  if (!element) return [];
+  let transformValue = getComputedStyle(element).getPropertyValue('transform');
   return getTranslateValues(transformValue);
 };
 export const getTranslateValues = (transformValue) => {
-  const matrix = new DOMMatrix(transformValue);
+  let matrix = new DOMMatrix(transformValue);
   return [matrix.m41, matrix.m42];
 };

package/esm/utils/functions/focusable.js

@@ -1,50 +1,47 @@
 import * as React from 'react';
 import { useSyncExternalStore, useLatestRef } from '../hooks/index.js';
-const tabbableElementsSelector =
+let tabbableElementsSelector =
   'a[href], button, input, textarea, select, details, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
 export const getTabbableElements = (container) => {
-  if (!container) {
-    return [];
-  }
-  const elements = container.querySelectorAll(tabbableElementsSelector);
+  if (!container) return [];
+  let elements = container.querySelectorAll(tabbableElementsSelector);
   return Array.from(elements).filter(
     (el) =>
       !el.hasAttribute('disabled') &&
       !el.classList.contains('iui-disabled') &&
-      el.getAttribute('aria-disabled') !== 'true',
+      'true' !== el.getAttribute('aria-disabled'),
   );
 };
 export const getFocusableElements = (container) => {
-  if (!container) {
-    return [];
-  }
-  const elements = container.querySelectorAll(
+  if (!container) return [];
+  let elements = container.querySelectorAll(
     `${tabbableElementsSelector}, [tabindex="-1"]`,
   );
   return Array.from(elements).filter(
     (el) =>
       !el.hasAttribute('disabled') &&
       !el.classList.contains('iui-disabled') &&
-      el.getAttribute('aria-disabled') !== 'true',
+      'true' !== el.getAttribute('aria-disabled'),
   );
 };
 export function useFocusableElements(root, extraOptions) {
-  const focusableElementsRef = React.useRef([]);
-  const [focusableElements, setFocusableElements] = React.useState(
+  let focusableElementsRef = React.useRef([]);
+  let [focusableElements, setFocusableElements] = React.useState(
     focusableElementsRef.current,
   );
-  const setFocusableElementsRefAndState = (newFocusableElements) => {
+  let setFocusableElementsRefAndState = (newFocusableElements) => {
     focusableElementsRef.current = newFocusableElements;
     setFocusableElements(newFocusableElements);
   };
-  const { filter: filterProp } = extraOptions ?? {};
-  const filter = useLatestRef(filterProp);
-  const returnValue = React.useMemo(() => {
-    return {
+  let { filter: filterProp } = extraOptions ?? {};
+  let filter = useLatestRef(filterProp);
+  let returnValue = React.useMemo(
+    () => ({
       focusableElementsRef,
       focusableElements,
-    };
-  }, [focusableElementsRef, focusableElements]);
+    }),
+    [focusableElementsRef, focusableElements],
+  );
   return useSyncExternalStore(
     React.useCallback(() => {
       if (!root) {
@@ -52,7 +49,7 @@ export function useFocusableElements(root, extraOptions) {
         return () => {};
       }
       updateFocusableElements();
-      const observer = new MutationObserver(() => updateFocusableElements());
+      let observer = new MutationObserver(() => updateFocusableElements());
       observer.observe(root, {
         childList: true,
         subtree: true,
@@ -60,9 +57,8 @@ export function useFocusableElements(root, extraOptions) {
       return () => observer.disconnect();
       function updateFocusableElements() {
         let newFocusableElements = getFocusableElements(root);
-        if (filter.current) {
+        if (filter.current)
           newFocusableElements = filter.current?.(newFocusableElements);
-        }
         setFocusableElementsRefAndState(newFocusableElements);
       }
     }, [root, filter]),

package/esm/utils/functions/import.js

@@ -12,7 +12,7 @@ export const importCss = async (url) => {
       return await fetch(url)
         .then((res) => res.text())
         .then((cssText) => {
-          const stylesheet = new CSSStyleSheet();
+          let stylesheet = new CSSStyleSheet();
           stylesheet.replaceSync(cssText);
           return {
             default: stylesheet,