@itwin/itwinui-react 3.13.4 → 3.14.1

package/DEV-esm/utils/functions/colors.js

@@ -1,24 +1,25 @@
 export const SoftBackgrounds = {
-    skyblue: 'var(--iui-color-background-skyblue)',
-    celery: 'var(--iui-color-background-celery)',
-    froly: 'var(--iui-color-background-froly)',
-    steelblue: 'var(--iui-color-background-steelblue)',
-    sunglow: 'var(--iui-color-background-sunglow)',
-    seabuckthorn: 'var(--iui-color-background-seabuckthorn)',
-    montecarlo: 'var(--iui-color-background-montecarlo)',
-    poloblue: 'var(--iui-color-background-poloblue)',
-    bouquet: 'var(--iui-color-background-bouquet)',
-    ash: 'var(--iui-color-background-ash)',
-    oak: 'var(--iui-color-background-oak)'
+  skyblue: 'var(--iui-color-background-skyblue)',
+  celery: 'var(--iui-color-background-celery)',
+  froly: 'var(--iui-color-background-froly)',
+  steelblue: 'var(--iui-color-background-steelblue)',
+  sunglow: 'var(--iui-color-background-sunglow)',
+  seabuckthorn: 'var(--iui-color-background-seabuckthorn)',
+  montecarlo: 'var(--iui-color-background-montecarlo)',
+  poloblue: 'var(--iui-color-background-poloblue)',
+  bouquet: 'var(--iui-color-background-bouquet)',
+  ash: 'var(--iui-color-background-ash)',
+  oak: 'var(--iui-color-background-oak)',
 };
-export const isSoftBackground = (value)=>Object.keys(SoftBackgrounds).includes(value);
+export const isSoftBackground = (value) =>
+  Object.keys(SoftBackgrounds).includes(value);
 let USER_COLORS = Object.values(SoftBackgrounds);
-export const getUserColor = (emailOrName)=>{
-    let normalizedString = emailOrName.trim().toLowerCase();
-    let hash = 0;
-    for(let i = 0; i < normalizedString.length; i++){
-        let charCode = normalizedString.charCodeAt(i);
-        hash = (hash + charCode) % USER_COLORS.length;
-    }
-    return USER_COLORS[hash];
+export const getUserColor = (emailOrName) => {
+  let normalizedString = emailOrName.trim().toLowerCase();
+  let hash = 0;
+  for (let i = 0; i < normalizedString.length; i++) {
+    let charCode = normalizedString.charCodeAt(i);
+    hash = (hash + charCode) % USER_COLORS.length;
+  }
+  return USER_COLORS[hash];
 };

package/DEV-esm/utils/functions/date.js

@@ -1,8 +1,8 @@
-export const isBefore = (beforeDate, 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;
+export const isBefore = (beforeDate, 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/DEV-esm/utils/functions/dev.js

@@ -1,14 +1,8 @@
 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 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 = isUnitTest ? ()=>()=>{} : ()=>{
-    let logged = false;
-    return (message)=>{
-        if (!logged) {
-            console.warn(message);
-            logged = true;
-        }
-    };
-};
-export { isUnitTest, createWarningLogger };
+export { isUnitTest };

package/DEV-esm/utils/functions/dom.js

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

package/DEV-esm/utils/functions/focusable.js

@@ -1,51 +1,68 @@
 import * as React from 'react';
 import { useSyncExternalStore, useLatestRef } from '../hooks/index.js';
-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 [];
-    let elements = container.querySelectorAll(tabbableElementsSelector);
-    return Array.from(elements).filter((el)=>!el.hasAttribute('disabled') && !el.classList.contains('iui-disabled') && 'true' !== el.getAttribute('aria-disabled'));
+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 [];
+  let elements = container.querySelectorAll(tabbableElementsSelector);
+  return Array.from(elements).filter(
+    (el) =>
+      !el.hasAttribute('disabled') &&
+      !el.classList.contains('iui-disabled') &&
+      'true' !== el.getAttribute('aria-disabled'),
+  );
 };
-export const getFocusableElements = (container)=>{
-    if (!container) return [];
-    let elements = container.querySelectorAll(`${tabbableElementsSelector}, [tabindex="-1"]`);
-    return Array.from(elements).filter((el)=>!el.hasAttribute('disabled') && !el.classList.contains('iui-disabled') && 'true' !== el.getAttribute('aria-disabled'));
+export const getFocusableElements = (container) => {
+  if (!container) return [];
+  let elements = container.querySelectorAll(
+    `${tabbableElementsSelector}, [tabindex="-1"]`,
+  );
+  return Array.from(elements).filter(
+    (el) =>
+      !el.hasAttribute('disabled') &&
+      !el.classList.contains('iui-disabled') &&
+      'true' !== el.getAttribute('aria-disabled'),
+  );
 };
 export function useFocusableElements(root, extraOptions) {
-    let focusableElementsRef = React.useRef([]);
-    let [focusableElements, setFocusableElements] = React.useState(focusableElementsRef.current);
-    let setFocusableElementsRefAndState = (newFocusableElements)=>{
-        focusableElementsRef.current = newFocusableElements;
-        setFocusableElements(newFocusableElements);
-    };
-    let { filter: filterProp } = extraOptions ?? {};
-    let filter = useLatestRef(filterProp);
-    let returnValue = React.useMemo(()=>({
-            focusableElementsRef,
-            focusableElements
-        }), [
-        focusableElementsRef,
-        focusableElements
-    ]);
-    return useSyncExternalStore(React.useCallback(()=>{
-        if (!root) {
-            setFocusableElementsRefAndState([]);
-            return ()=>{};
-        }
-        updateFocusableElements();
-        let observer = new MutationObserver(()=>updateFocusableElements());
-        observer.observe(root, {
-            childList: true,
-            subtree: true
-        });
-        return ()=>observer.disconnect();
-        function updateFocusableElements() {
-            let newFocusableElements = getFocusableElements(root);
-            if (filter.current) newFocusableElements = filter.current?.(newFocusableElements);
-            setFocusableElementsRefAndState(newFocusableElements);
-        }
-    }, [
-        root,
-        filter
-    ]), ()=>returnValue, ()=>returnValue);
+  let focusableElementsRef = React.useRef([]);
+  let [focusableElements, setFocusableElements] = React.useState(
+    focusableElementsRef.current,
+  );
+  let setFocusableElementsRefAndState = (newFocusableElements) => {
+    focusableElementsRef.current = newFocusableElements;
+    setFocusableElements(newFocusableElements);
+  };
+  let { filter: filterProp } = extraOptions ?? {};
+  let filter = useLatestRef(filterProp);
+  let returnValue = React.useMemo(
+    () => ({
+      focusableElementsRef,
+      focusableElements,
+    }),
+    [focusableElementsRef, focusableElements],
+  );
+  return useSyncExternalStore(
+    React.useCallback(() => {
+      if (!root) {
+        setFocusableElementsRefAndState([]);
+        return () => {};
+      }
+      updateFocusableElements();
+      let observer = new MutationObserver(() => updateFocusableElements());
+      observer.observe(root, {
+        childList: true,
+        subtree: true,
+      });
+      return () => observer.disconnect();
+      function updateFocusableElements() {
+        let newFocusableElements = getFocusableElements(root);
+        if (filter.current)
+          newFocusableElements = filter.current?.(newFocusableElements);
+        setFocusableElementsRefAndState(newFocusableElements);
+      }
+    }, [root, filter]),
+    () => returnValue,
+    () => returnValue,
+  );
 }

package/DEV-esm/utils/functions/import.js

@@ -1,17 +1,23 @@
-export const importCss = async (url)=>{
+export const importCss = async (url) => {
+  try {
+    return await new Function(
+      `return import("${url}", { with: { type: "css" } })`,
+    )();
+  } catch {
     try {
-        return await new Function(`return import("${url}", { with: { type: "css" } })`)();
-    } catch  {
-        try {
-            return await new Function(`return import("${url}", { assert: { type: "css" } })`)();
-        } catch  {
-            return await fetch(url).then((res)=>res.text()).then((cssText)=>{
-                let stylesheet = new CSSStyleSheet();
-                stylesheet.replaceSync(cssText);
-                return {
-                    default: stylesheet
-                };
-            });
-        }
+      return await new Function(
+        `return import("${url}", { assert: { type: "css" } })`,
+      )();
+    } catch {
+      return await fetch(url)
+        .then((res) => res.text())
+        .then((cssText) => {
+          let stylesheet = new CSSStyleSheet();
+          stylesheet.replaceSync(cssText);
+          return {
+            default: stylesheet,
+          };
+        });
     }
+  }
 };

package/DEV-esm/utils/functions/numbers.js

@@ -1,11 +1,13 @@
-export const getBoundedValue = (val, min, max)=>Math.min(max, Math.max(min, val));
-export const getRandomValue = (length = 21)=>{
-    let alphabet = "_-0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
-    let id = '';
-    for(let i = 0; i < length; i++)id += alphabet[64 * Math.random() | 0];
-    return id;
+export const getBoundedValue = (val, min, max) =>
+  Math.min(max, Math.max(min, val));
+export const getRandomValue = (length = 21) => {
+  let alphabet =
+    '_-0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  let id = '';
+  for (let i = 0; i < length; i++) id += alphabet[(64 * Math.random()) | 0];
+  return id;
 };
-export const roundByDPR = (value)=>{
-    let dpr = window.devicePixelRatio || 1;
-    return Math.round(value * dpr) / dpr;
+export const roundByDPR = (value) => {
+  let dpr = window.devicePixelRatio || 1;
+  return Math.round(value * dpr) / dpr;
 };

package/DEV-esm/utils/functions/polymorphic.js

@@ -2,35 +2,48 @@ import * as React from 'react';
 import cx from 'classnames';
 import { useGlobals } from '../hooks/useGlobals.js';
 import { styles } from '../../styles.js';
-let _base = (defaultElement)=>(className, attrs)=>{
-        let Comp = React.forwardRef(({ as = defaultElement, ...props }, ref)=>{
-            props = {
-                ...attrs,
-                ...props,
-                className: getScopedClassName(cx(className, attrs?.className, props.className))
-            };
-            let Element = as || 'div';
-            if ('button' === Element || 'a' === Element || 'input' === Element && 'checkbox' === props.type) {
-                var _props;
-                (_props = props).tabIndex ?? (_props.tabIndex = 0);
-            }
-            useGlobals();
-            return React.createElement(Element, {
-                ref: ref,
-                ...props
-            });
-        });
-        Comp.displayName = getDisplayNameFromClass(className);
-        return Comp;
+let _base = (defaultElement) => (className, attrs) => {
+  let Comp = React.forwardRef(({ as = defaultElement, ...props }, ref) => {
+    props = {
+      ...attrs,
+      ...props,
+      className: getScopedClassName(
+        cx(className, attrs?.className, props.className),
+      ),
     };
-export const polymorphic = new Proxy(_base('div'), {
-    get: (target, prop)=>{
-        if ('string' == typeof prop) return _base(prop);
-        return Reflect.get(target, prop);
+    let Element = as || 'div';
+    if (
+      'button' === Element ||
+      'a' === Element ||
+      ('input' === Element && 'checkbox' === props.type)
+    ) {
+      var _props;
+      (_props = props).tabIndex ?? (_props.tabIndex = 0);
     }
-});
-let getDisplayNameFromClass = (str)=>{
-    let camel = str.replace(/-([a-z])/g, (g)=>g[1].toUpperCase());
-    return camel.substring(3);
+    useGlobals();
+    return React.createElement(Element, {
+      ref: ref,
+      ...props,
+    });
+  });
+  Comp.displayName = getDisplayNameFromClass(className);
+  return Comp;
 };
-let getScopedClassName = (className = '')=>className.split(' ').map((c)=>c in styles ? styles[c] : c).join(' ') || null;
+export const polymorphic = new Proxy(
+  {},
+  {
+    get: (target, prop) => {
+      if ('string' == typeof prop) return _base(prop);
+      return Reflect.get(target, prop);
+    },
+  },
+);
+let getDisplayNameFromClass = (str) => {
+  let camel = str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+  return camel.substring(3);
+};
+let getScopedClassName = (className = '') =>
+  className
+    .split(' ')
+    .map((c) => (c in styles ? styles[c] : c))
+    .join(' ') || null;

package/DEV-esm/utils/functions/react.js

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { mergeRefs } from '../hooks/useMergedRefs.js';
-export const cloneElementWithRef = (children, getProps)=>{
-    if (!children) return null;
-    if (!React.isValidElement(children)) return children;
-    let props = getProps(children);
-    let ref = mergeRefs(...[
-        'ref' in children ? children.ref : null,
-        'ref' in props ? props.ref : null
-    ].filter(Boolean));
-    return React.cloneElement(children, {
-        ...props,
-        ref
-    });
+export const cloneElementWithRef = (children, getProps) => {
+  if (!children) return null;
+  if (!React.isValidElement(children)) return children;
+  let props = getProps(children);
+  let ref = mergeRefs(
+    ...[
+      'ref' in children ? children.ref : null,
+      'ref' in props ? props.ref : null,
+    ].filter(Boolean),
+  );
+  return React.cloneElement(children, {
+    ...props,
+    ref,
+  });
 };

package/DEV-esm/utils/functions/supports.js

@@ -1,2 +1,3 @@
 import { getWindow } from './dom.js';
-export const supportsHas = ()=>getWindow()?.CSS?.supports?.('selector(:has(+ *))');
+export const supportsHas = () =>
+  getWindow()?.CSS?.supports?.('selector(:has(+ *))');

package/DEV-esm/utils/hooks/index.js

@@ -14,3 +14,4 @@ export * from './useId.js';
 export * from './useControlledState.js';
 export * from './useSyncExternalStore.js';
 export * from './useVirtualScroll.js';
+export * from './useWarningLogger.js';

package/DEV-esm/utils/hooks/useContainerWidth.js

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import { useMergedRefs } from './useMergedRefs.js';
 import { useResizeObserver } from './useResizeObserver.js';
-export const useContainerWidth = (watchResizes = true)=>{
-    let [contentWidth, setContentWidth] = React.useState(0);
-    let ref = React.useCallback((element)=>{
-        if (!element) return;
-        setContentWidth(element.getBoundingClientRect().width);
-    }, []);
-    let updateWidth = React.useCallback(({ width })=>setContentWidth(width), []);
-    let [resizeRef, resizeObserver] = useResizeObserver(updateWidth);
-    if (!watchResizes) resizeObserver?.disconnect();
-    let refs = useMergedRefs(ref, watchResizes ? resizeRef : void 0);
-    return [
-        refs,
-        contentWidth
-    ];
+export const useContainerWidth = (watchResizes = true) => {
+  let [contentWidth, setContentWidth] = React.useState(0);
+  let ref = React.useCallback((element) => {
+    if (!element) return;
+    setContentWidth(element.getBoundingClientRect().width);
+  }, []);
+  let updateWidth = React.useCallback(
+    ({ width }) => setContentWidth(width),
+    [],
+  );
+  let [resizeRef, resizeObserver] = useResizeObserver(updateWidth);
+  if (!watchResizes) resizeObserver?.disconnect();
+  let refs = useMergedRefs(ref, watchResizes ? resizeRef : void 0);
+  return [refs, contentWidth];
 };

package/DEV-esm/utils/hooks/useControlledState.js

@@ -1,19 +1,20 @@
 import * as React from 'react';
-export const useControlledState = (initialValue, controlledState, setControlledState)=>{
-    let [uncontrolledState, setUncontrolledState] = React.useState(initialValue);
-    let state = React.useMemo(()=>void 0 !== controlledState ? controlledState : uncontrolledState, [
-        controlledState,
-        uncontrolledState
-    ]);
-    let setState = React.useCallback((value)=>{
-        setUncontrolledState(value);
-        setControlledState?.(value);
-    }, [
-        setControlledState,
-        setUncontrolledState
-    ]);
-    return [
-        state,
-        setState
-    ];
+export const useControlledState = (
+  initialValue,
+  controlledState,
+  setControlledState,
+) => {
+  let [uncontrolledState, setUncontrolledState] = React.useState(initialValue);
+  let state = React.useMemo(
+    () => (void 0 !== controlledState ? controlledState : uncontrolledState),
+    [controlledState, uncontrolledState],
+  );
+  let setState = React.useCallback(
+    (value) => {
+      setUncontrolledState(value);
+      setControlledState?.(value);
+    },
+    [setControlledState, setUncontrolledState],
+  );
+  return [state, setState];
 };