@itwin/itwinui-react 3.13.4 → 3.14.1

package/DEV-esm/core/Tag/Tag.js

@@ -3,32 +3,60 @@ import * as React from 'react';
 import { SvgCloseSmall, Box, ButtonBase } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { LinkAction, LinkBox } from '../LinkAction/LinkAction.js';
-export const Tag = React.forwardRef((props, forwardedRef)=>{
-    let { className, variant = 'default', children, onRemove, onClick, labelProps, removeButtonProps, ...rest } = props;
-    let shouldUseLinkAction = !!onClick && !!onRemove;
-    return React.createElement(Box, {
-        as: shouldUseLinkAction ? LinkBox : onClick ? ButtonBase : 'span',
-        className: cx({
-            'iui-tag-basic': 'basic' === variant,
-            'iui-tag': 'default' === variant
-        }, className),
-        ref: forwardedRef,
-        onClick: shouldUseLinkAction ? void 0 : onClick,
-        ...rest
-    }, 'default' === variant ? React.createElement(Box, {
-        as: shouldUseLinkAction ? LinkAction : 'span',
-        onClick: shouldUseLinkAction ? onClick : void 0,
-        ...labelProps,
-        className: cx('iui-tag-label', labelProps?.className)
-    }, children) : children, onRemove && React.createElement(IconButton, {
-        styleType: "borderless",
-        size: "small",
-        onClick: onRemove,
-        "aria-label": "Delete tag",
-        ...removeButtonProps,
-        className: cx('iui-tag-button', removeButtonProps?.className)
-    }, React.createElement(SvgCloseSmall, {
-        "aria-hidden": true
-    })));
+export const Tag = React.forwardRef((props, forwardedRef) => {
+  let {
+    className,
+    variant = 'default',
+    children,
+    onRemove,
+    onClick,
+    labelProps,
+    removeButtonProps,
+    ...rest
+  } = props;
+  let shouldUseLinkAction = !!onClick && !!onRemove;
+  return React.createElement(
+    Box,
+    {
+      as: shouldUseLinkAction ? LinkBox : onClick ? ButtonBase : 'span',
+      className: cx(
+        {
+          'iui-tag-basic': 'basic' === variant,
+          'iui-tag': 'default' === variant,
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      onClick: shouldUseLinkAction ? void 0 : onClick,
+      ...rest,
+    },
+    'default' === variant
+      ? React.createElement(
+          Box,
+          {
+            as: shouldUseLinkAction ? LinkAction : 'span',
+            onClick: shouldUseLinkAction ? onClick : void 0,
+            ...labelProps,
+            className: cx('iui-tag-label', labelProps?.className),
+          },
+          children,
+        )
+      : children,
+    onRemove &&
+      React.createElement(
+        IconButton,
+        {
+          styleType: 'borderless',
+          size: 'small',
+          onClick: onRemove,
+          'aria-label': 'Delete tag',
+          ...removeButtonProps,
+          className: cx('iui-tag-button', removeButtonProps?.className),
+        },
+        React.createElement(SvgCloseSmall, {
+          'aria-hidden': true,
+        }),
+      ),
+  );
 });
 Tag.displayName = 'Tag';

package/DEV-esm/core/Tag/TagContainer.js

@@ -1,15 +1,23 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/index.js';
-export const TagContainer = React.forwardRef((props, forwardedRef)=>{
-    let { className, children, overflow, background = 'none', ...rest } = props;
-    return React.createElement(Box, {
-        className: cx('iui-tag-container', {
-            [`iui-${overflow}`]: !!overflow,
-            'iui-visible': 'none' !== background
-        }, className),
-        ref: forwardedRef,
-        ...rest
-    }, children);
+export const TagContainer = React.forwardRef((props, forwardedRef) => {
+  let { className, children, overflow, background = 'none', ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-tag-container',
+        {
+          [`iui-${overflow}`]: !!overflow,
+          'iui-visible': 'none' !== background,
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 TagContainer.displayName = 'TagContainer';

package/DEV-esm/core/Textarea/Textarea.js

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-export const Textarea = React.forwardRef((props, forwardedRef)=>React.createElement(Input, {
-        as: "textarea",
-        rows: 3,
-        ref: forwardedRef,
-        ...props
-    }));
+export const Textarea = React.forwardRef((props, forwardedRef) =>
+  React.createElement(Input, {
+    as: 'textarea',
+    rows: 3,
+    ref: forwardedRef,
+    ...props,
+  }),
+);
 Textarea.displayName = 'Textarea';

package/DEV-esm/core/ThemeProvider/ThemeProvider.js

@@ -1,177 +1,280 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import cx from 'classnames';
-import { useMediaQuery, useMergedRefs, Box, useLayoutEffect, useLatestRef, importCss, isUnitTest, HydrationProvider, useHydration, ScopeProvider, portalContainerAtom, useScopedAtom, useScopedSetAtom, useId } from '../../utils/index.js';
+import {
+  useMediaQuery,
+  useMergedRefs,
+  Box,
+  useLayoutEffect,
+  useLatestRef,
+  importCss,
+  isUnitTest,
+  HydrationProvider,
+  useHydration,
+  ScopeProvider,
+  portalContainerAtom,
+  useScopedAtom,
+  useId,
+} from '../../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
 import { ToastProvider, Toaster } from '../Toast/Toaster.js';
 import { atom } from 'jotai';
 import { meta } from '../../utils/meta.js';
 let versionWithoutDots = meta.version.replace(/\./g, '');
 let ownerDocumentAtom = atom(void 0);
-export const ThemeProvider = React.forwardRef((props, forwardedRef)=>{
-    var _themeOptions, _themeOptions1;
-    let { theme: themeProp = 'inherit', children, themeOptions = {}, portalContainer: portalContainerProp, includeCss = 'inherit' === themeProp, ...rest } = props;
-    let [rootElement, setRootElement] = React.useState(null);
-    let parent = useParentThemeAndContext(rootElement);
-    let theme = 'inherit' === themeProp ? parent.theme || 'light' : themeProp;
-    (_themeOptions = themeOptions).applyBackground ?? (_themeOptions.applyBackground = !parent.theme);
-    (_themeOptions1 = themeOptions).highContrast ?? (_themeOptions1.highContrast = 'inherit' === themeProp ? parent.highContrast : void 0);
-    let [portalContainerFromParent] = useScopedAtom(portalContainerAtom);
-    let contextValue = React.useMemo(()=>({
-            theme,
-            themeOptions
-        }), [
-        theme,
-        JSON.stringify(themeOptions)
-    ]);
-    return React.createElement(ScopeProvider, null, React.createElement(HydrationProvider, null, React.createElement(ThemeContext.Provider, {
-        value: contextValue
-    }, React.createElement(ToastProvider, null, includeCss && rootElement ? React.createElement(FallbackStyles, {
-        root: rootElement
-    }) : null, React.createElement(Root, {
-        theme: theme,
-        themeOptions: themeOptions,
-        ref: useMergedRefs(forwardedRef, setRootElement, useIuiDebugRef),
-        ...rest
-    }, children, React.createElement(PortalContainer, {
-        portalContainerProp: portalContainerProp,
-        portalContainerFromParent: portalContainerFromParent,
-        isInheritingTheme: 'inherit' === themeProp
-    }))))));
+export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
+  var _themeOptions, _themeOptions1;
+  let {
+    theme: themeProp = 'inherit',
+    children,
+    themeOptions = {},
+    portalContainer: portalContainerProp,
+    includeCss = 'inherit' === themeProp,
+    ...rest
+  } = props;
+  let [rootElement, setRootElement] = React.useState(null);
+  let parent = useParentThemeAndContext(rootElement);
+  let theme = 'inherit' === themeProp ? parent.theme || 'light' : themeProp;
+  (_themeOptions = themeOptions).applyBackground ??
+    (_themeOptions.applyBackground = !parent.theme);
+  (_themeOptions1 = themeOptions).highContrast ??
+    (_themeOptions1.highContrast =
+      'inherit' === themeProp ? parent.highContrast : void 0);
+  let [portalContainerFromParent] = useScopedAtom(portalContainerAtom);
+  let contextValue = React.useMemo(
+    () => ({
+      theme,
+      themeOptions,
+    }),
+    [theme, JSON.stringify(themeOptions)],
+  );
+  return React.createElement(
+    ScopeProvider,
+    null,
+    React.createElement(
+      HydrationProvider,
+      null,
+      React.createElement(
+        ThemeContext.Provider,
+        {
+          value: contextValue,
+        },
+        React.createElement(
+          ToastProvider,
+          {
+            inherit: 'inherit' === themeProp && !portalContainerProp,
+          },
+          includeCss && rootElement
+            ? React.createElement(FallbackStyles, {
+                root: rootElement,
+              })
+            : null,
+          React.createElement(
+            MainRoot,
+            {
+              theme: theme,
+              themeOptions: themeOptions,
+              ref: useMergedRefs(forwardedRef, setRootElement, useIuiDebugRef),
+              ...rest,
+            },
+            children,
+            React.createElement(PortalContainer, {
+              theme: theme,
+              themeOptions: themeOptions,
+              portalContainerProp: portalContainerProp,
+              portalContainerFromParent: portalContainerFromParent,
+              isInheritingTheme: 'inherit' === themeProp,
+            }),
+          ),
+        ),
+      ),
+    ),
+  );
 });
 ThemeProvider.displayName = 'ThemeProvider';
-let Root = React.forwardRef((props, forwardedRef)=>{
-    let { theme, children, themeOptions, className, ...rest } = props;
-    let prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
-    let prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
-    let shouldApplyDark = 'dark' === theme || 'os' === theme && prefersDark;
-    let shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
-    let shouldApplyBackground = themeOptions?.applyBackground;
-    let [ownerDocument, setOwnerDocument] = useScopedAtom(ownerDocumentAtom);
-    let findOwnerDocumentFromRef = React.useCallback((el)=>{
-        if (el && el.ownerDocument !== ownerDocument) setOwnerDocument(el.ownerDocument);
-    }, [
-        ownerDocument,
-        setOwnerDocument
-    ]);
-    return React.createElement(Box, {
-        className: cx('iui-root', {
-            'iui-root-background': shouldApplyBackground
-        }, className),
-        "data-iui-theme": shouldApplyDark ? 'dark' : 'light',
-        "data-iui-contrast": shouldApplyHC ? 'high' : 'default',
-        ref: useMergedRefs(forwardedRef, findOwnerDocumentFromRef),
-        ...rest
-    }, children);
+let MainRoot = React.forwardRef((props, forwardedRef) => {
+  let [ownerDocument, setOwnerDocument] = useScopedAtom(ownerDocumentAtom);
+  let findOwnerDocumentFromRef = React.useCallback(
+    (el) => {
+      if (el && el.ownerDocument !== ownerDocument)
+        setOwnerDocument(el.ownerDocument);
+    },
+    [ownerDocument, setOwnerDocument],
+  );
+  return React.createElement(Root, {
+    ...props,
+    ref: useMergedRefs(findOwnerDocumentFromRef, forwardedRef),
+  });
+});
+let Root = React.forwardRef((props, forwardedRef) => {
+  let { theme, children, themeOptions, className, ...rest } = props;
+  let prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
+  let prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
+  let shouldApplyDark = 'dark' === theme || ('os' === theme && prefersDark);
+  let shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
+  let shouldApplyBackground = themeOptions?.applyBackground;
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-root',
+        {
+          'iui-root-background': shouldApplyBackground,
+        },
+        className,
+      ),
+      'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
+      'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
-let useParentThemeAndContext = (rootElement)=>{
-    let parentContext = React.useContext(ThemeContext);
-    let [parentThemeState, setParentTheme] = React.useState(parentContext?.theme);
-    let [parentHighContrastState, setParentHighContrastState] = React.useState(parentContext?.themeOptions?.highContrast);
-    let parentThemeRef = useLatestRef(parentContext?.theme);
-    useLayoutEffect(()=>{
-        if (parentThemeRef.current) return;
-        let closestRoot = rootElement?.parentElement?.closest('[data-iui-theme]');
-        if (!closestRoot) return;
-        let synchronizeTheme = ()=>{
-            setParentTheme(closestRoot?.getAttribute('data-iui-theme'));
-            setParentHighContrastState(closestRoot?.getAttribute('data-iui-contrast') === 'high');
-        };
-        synchronizeTheme();
-        let observer = new MutationObserver(()=>synchronizeTheme());
-        observer.observe(closestRoot, {
-            attributes: true,
-            attributeFilter: [
-                'data-iui-theme',
-                'data-iui-contrast'
-            ]
-        });
-        return ()=>{
-            observer.disconnect();
-        };
-    }, [
-        rootElement,
-        parentThemeRef
-    ]);
-    return {
-        theme: parentContext?.theme ?? parentThemeState,
-        highContrast: parentContext?.themeOptions?.highContrast ?? parentHighContrastState,
-        context: parentContext
+let useParentThemeAndContext = (rootElement) => {
+  let parentContext = React.useContext(ThemeContext);
+  let [parentThemeState, setParentTheme] = React.useState(parentContext?.theme);
+  let [parentHighContrastState, setParentHighContrastState] = React.useState(
+    parentContext?.themeOptions?.highContrast,
+  );
+  let parentThemeRef = useLatestRef(parentContext?.theme);
+  useLayoutEffect(() => {
+    if (parentThemeRef.current) return;
+    let closestRoot = rootElement?.parentElement?.closest('[data-iui-theme]');
+    if (!closestRoot) return;
+    let synchronizeTheme = () => {
+      setParentTheme(closestRoot?.getAttribute('data-iui-theme'));
+      setParentHighContrastState(
+        closestRoot?.getAttribute('data-iui-contrast') === 'high',
+      );
     };
+    synchronizeTheme();
+    let observer = new MutationObserver(() => synchronizeTheme());
+    observer.observe(closestRoot, {
+      attributes: true,
+      attributeFilter: ['data-iui-theme', 'data-iui-contrast'],
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [rootElement, parentThemeRef]);
+  return {
+    theme: parentContext?.theme ?? parentThemeState,
+    highContrast:
+      parentContext?.themeOptions?.highContrast ?? parentHighContrastState,
+    context: parentContext,
+  };
 };
-let PortalContainer = React.memo(({ portalContainerProp, portalContainerFromParent, isInheritingTheme })=>{
+let PortalContainer = React.memo(
+  ({
+    portalContainerProp,
+    portalContainerFromParent,
+    isInheritingTheme,
+    theme,
+    themeOptions,
+  }) => {
     let [ownerDocument] = useScopedAtom(ownerDocumentAtom);
-    let setPortalContainer = useScopedSetAtom(portalContainerAtom);
+    let [portalContainer, setPortalContainer] =
+      useScopedAtom(portalContainerAtom);
+    let shouldSetupPortalContainer =
+      !portalContainerProp &&
+      (!isInheritingTheme ||
+        !portalContainerFromParent ||
+        (!!ownerDocument &&
+          portalContainerFromParent.ownerDocument !== ownerDocument));
     let id = useId();
+    React.useEffect(() => {
+      if (shouldSetupPortalContainer) return;
+      let portalTarget = portalContainerProp || portalContainerFromParent;
+      if (portalTarget && portalTarget !== portalContainer)
+        setPortalContainer(portalTarget);
+    });
     let isHydrated = 'hydrated' === useHydration();
     if (!isHydrated) return null;
-    if (portalContainerProp) return React.createElement(PortaledToaster, {
-        target: portalContainerProp
-    });
-    if (!isInheritingTheme || !portalContainerFromParent || !!ownerDocument && portalContainerFromParent.ownerDocument !== ownerDocument) return React.createElement("div", {
-        style: {
-            display: 'contents'
-        },
-        ref: setPortalContainer,
-        id: id
-    }, React.createElement(Toaster, null));
-    return React.createElement(PortaledToaster, {
-        target: portalContainerFromParent
-    });
-});
-let PortaledToaster = ({ target })=>{
-    let [portalContainer, setPortalContainer] = useScopedAtom(portalContainerAtom);
-    React.useEffect(()=>{
-        if (target && target !== portalContainer) setPortalContainer(target);
-    });
-    return target ? ReactDOM.createPortal(React.createElement(Toaster, null), target) : null;
-};
-let FallbackStyles = ({ root })=>{
-    useLayoutEffect(()=>{
-        if ('yes' === getComputedStyle(root).getPropertyValue(`--_iui-v${versionWithoutDots}`)) return;
-        if (isUnitTest) return;
-        (async ()=>{
-            try {
-                await import('../../../styles.css');
-            } catch (error) {
-                console.log('Error loading styles.css locally', error);
-                let css = await importCss('https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@3/styles.css');
-                document.adoptedStyleSheets = [
-                    ...document.adoptedStyleSheets,
-                    css.default
-                ];
-            }
-        })();
-    }, [
-        root
-    ]);
-    return React.createElement(React.Fragment, null);
+    if (shouldSetupPortalContainer && ownerDocument)
+      return ReactDOM.createPortal(
+        React.createElement(
+          Root,
+          {
+            theme: theme,
+            themeOptions: {
+              ...themeOptions,
+              applyBackground: false,
+            },
+            'data-iui-portal': true,
+            style: {
+              display: 'contents',
+            },
+            ref: setPortalContainer,
+            id: id,
+          },
+          React.createElement(Toaster, null),
+        ),
+        ownerDocument.body,
+      );
+    if (portalContainerProp)
+      return ReactDOM.createPortal(
+        React.createElement(Toaster, null),
+        portalContainerProp,
+      );
+    return null;
+  },
+);
+let FallbackStyles = ({ root }) => {
+  useLayoutEffect(() => {
+    if (
+      'yes' ===
+      getComputedStyle(root).getPropertyValue(`--_iui-v${versionWithoutDots}`)
+    )
+      return;
+    if (isUnitTest) return;
+    (async () => {
+      try {
+        await import('../../../styles.css');
+      } catch (error) {
+        console.log('Error loading styles.css locally', error);
+        let css = await importCss(
+          'https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@3/styles.css',
+        );
+        document.adoptedStyleSheets = [
+          ...document.adoptedStyleSheets,
+          css.default,
+        ];
+      }
+    })();
+  }, [root]);
+  return React.createElement(React.Fragment, null);
 };
-let useIuiDebugRef = ()=>{
-    var _globalThis;
-    let _globalThis1 = globalThis;
-    (_globalThis = _globalThis1).__iui || (_globalThis.__iui = {
-        versions: new Set()
+let useIuiDebugRef = () => {
+  var _globalThis;
+  let _globalThis1 = globalThis;
+  (_globalThis = _globalThis1).__iui ||
+    (_globalThis.__iui = {
+      versions: new Set(),
     });
-    if (!isUnitTest) _globalThis1.__iui.versions.add = (version)=>{
-        Set.prototype.add.call(_globalThis1.__iui.versions, version);
-        if (_globalThis1.__iui.versions.size > 1) {
-            _globalThis1.__iui._shouldWarn = true;
-            if (_globalThis1.__iui._warnTimeout) clearTimeout(_globalThis1.__iui._warnTimeout);
-            _globalThis1.__iui._warnTimeout = setTimeout(()=>{
-                if (_globalThis1.__iui._shouldWarn) {
-                    console.warn("Multiple versions of iTwinUI were detected on this page. This can lead to unexpected behavior and duplicated code in the bundle. Make sure you're using a single iTwinUI instance across your app. https://github.com/iTwin/iTwinUI/wiki/Version-conflicts");
-                    console.groupCollapsed('iTwinUI versions detected:');
-                    let versionsTable = [];
-                    _globalThis1.__iui.versions.forEach((version)=>{
-                        versionsTable.push(JSON.parse(version));
-                    });
-                    console.table(versionsTable);
-                    console.groupEnd();
-                    _globalThis1.__iui._shouldWarn = false;
-                }
-            }, 3000);
-        }
+  if (!isUnitTest)
+    _globalThis1.__iui.versions.add = (version) => {
+      Set.prototype.add.call(_globalThis1.__iui.versions, version);
+      if (_globalThis1.__iui.versions.size > 1) {
+        _globalThis1.__iui._shouldWarn = true;
+        if (_globalThis1.__iui._warnTimeout)
+          clearTimeout(_globalThis1.__iui._warnTimeout);
+        _globalThis1.__iui._warnTimeout = setTimeout(() => {
+          if (_globalThis1.__iui._shouldWarn) {
+            console.warn(
+              "Multiple versions of iTwinUI were detected on this page. This can lead to unexpected behavior and duplicated code in the bundle. Make sure you're using a single iTwinUI instance across your app. https://github.com/iTwin/iTwinUI/wiki/Version-conflicts",
+            );
+            console.groupCollapsed('iTwinUI versions detected:');
+            let versionsTable = [];
+            _globalThis1.__iui.versions.forEach((version) => {
+              versionsTable.push(JSON.parse(version));
+            });
+            console.table(versionsTable);
+            console.groupEnd();
+            _globalThis1.__iui._shouldWarn = false;
+          }
+        }, 3000);
+      }
     };
-    _globalThis1.__iui.versions.add(JSON.stringify(meta));
+  _globalThis1.__iui.versions.add(JSON.stringify(meta));
 };