@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Tag/Tag.js

@@ -1,29 +1,61 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 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';
-/**
- * Tag for showing categories, filters etc.
- * @example
- * <Tag onRemove={() => alert('Closed a tag!')}>I'm a tag</Tag>
- * <Tag variant='basic'>Basic tag</Tag>
- */
 export const Tag = React.forwardRef((props, forwardedRef) => {
-    const { className, variant = 'default', children, onRemove, onClick, labelProps, removeButtonProps, ...rest } = props;
-    // If both onClick and onRemove are passed, we want to render the label as a button
-    // to avoid invalid markup (nested buttons). LinkAction ensures that clicking anywhere outside
-    // the remove button (including padding) will still trigger the main onClick callback.
-    const shouldUseLinkAction = !!onClick && !!onRemove;
-    return (React.createElement(Box, { as: shouldUseLinkAction ? LinkBox : !!onClick ? ButtonBase : 'span', className: cx({
-            'iui-tag-basic': variant === 'basic',
-            'iui-tag': variant === 'default',
-        }, className), ref: forwardedRef, onClick: !shouldUseLinkAction ? onClick : undefined, ...rest },
-        variant === 'default' ? (React.createElement(Box, { as: (shouldUseLinkAction ? LinkAction : 'span'), onClick: shouldUseLinkAction ? onClick : undefined, ...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 })))));
+  const {
+    className,
+    variant = 'default',
+    children,
+    onRemove,
+    onClick,
+    labelProps,
+    removeButtonProps,
+    ...rest
+  } = props;
+  const shouldUseLinkAction = !!onClick && !!onRemove;
+  return React.createElement(
+    Box,
+    {
+      as: shouldUseLinkAction ? LinkBox : !!onClick ? ButtonBase : 'span',
+      className: cx(
+        {
+          'iui-tag-basic': variant === 'basic',
+          'iui-tag': variant === 'default',
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      onClick: !shouldUseLinkAction ? onClick : undefined,
+      ...rest,
+    },
+    variant === 'default'
+      ? React.createElement(
+          Box,
+          {
+            as: shouldUseLinkAction ? LinkAction : 'span',
+            onClick: shouldUseLinkAction ? onClick : undefined,
+            ...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,
+        }),
+      ),
+  );
 });

package/esm/core/Tag/TagContainer.js

@@ -1,20 +1,22 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/index.js';
-/**
- * TagContainer for grouping tags.
- * @example
- * <TagContainer><Tag>Tag 1</Tag><Tag>Tag 2</Tag></TagContainer>
- * <TagContainer><Tag variant='basic'>Basic tag</Tag><Tag variant='basic'>Basic tag 2</Tag></TagContainer>
- */
 export const TagContainer = React.forwardRef((props, forwardedRef) => {
-    const { className, children, overflow, background = 'none', ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-tag-container', {
-            [`iui-${overflow}`]: !!overflow,
-            'iui-visible': background !== 'none',
-        }, className), ref: forwardedRef, ...rest }, children));
+  const { className, children, overflow, background = 'none', ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-tag-container',
+        {
+          [`iui-${overflow}`]: !!overflow,
+          'iui-visible': background !== 'none',
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });

package/esm/core/Textarea/Textarea.js

@@ -1,15 +1,10 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-/**
- * Basic textarea component
- * @example
- * <Textarea placeholder='This is a textarea' />
- * <Textarea disabled={true} placeholder='This is a disabled textarea' />
- */
 export const Textarea = React.forwardRef((props, forwardedRef) => {
-    return React.createElement(Input, { as: 'textarea', rows: 3, ref: forwardedRef, ...props });
+  return React.createElement(Input, {
+    as: 'textarea',
+    rows: 3,
+    ref: forwardedRef,
+    ...props,
+  });
 });

package/esm/core/ThemeProvider/ThemeContext.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { ThemeOptions, ThemeType } from './ThemeProvider.js';
 export declare const ThemeContext: React.Context<{
-    theme?: ThemeType | undefined;
-    themeOptions?: ThemeOptions | undefined;
-    portalContainer?: HTMLElement | null | undefined;
+    theme?: ThemeType;
+    themeOptions?: ThemeOptions;
+    portalContainer?: HTMLElement | null;
 } | undefined>;

package/esm/core/ThemeProvider/ThemeContext.js

@@ -1,6 +1,2 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 export const ThemeContext = React.createContext(undefined);

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -1,201 +1,237 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 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, } from '../../utils/index.js';
+import {
+  useMediaQuery,
+  useMergedRefs,
+  Box,
+  useLayoutEffect,
+  useLatestRef,
+  importCss,
+  isUnitTest,
+  HydrationProvider,
+  useHydration,
+  ScopeProvider,
+  portalContainerAtom,
+  useScopedAtom,
+  useScopedSetAtom,
+  useId,
+} from '../../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
 import { ToastProvider, Toaster } from '../Toast/Toaster.js';
 import { atom } from 'jotai';
-// ----------------------------------------------------------------------------
 const ownerDocumentAtom = atom(undefined);
-// ----------------------------------------------------------------------------
-/**
- * This component provides global state and applies theme to the entire tree
- * that it is wrapping around.
- *
- * The `theme` prop defaults to "inherit", which looks upwards for closest ThemeProvider
- * and falls back to "light" theme if one is not found.
- *
- * If you want to theme the entire app, you should use this component at the root. You can also
- * use this component to apply a different theme to only a part of the tree.
- *
- * By default, the topmost `ThemeProvider` in the tree will apply the recommended
- * `background-color`. You can override this behavior using `themeOptions.applyBackground`.
- *
- * @example
- * <ThemeProvider theme='os'>
- *  <App />
- * </ThemeProvider>
- *
- * @example
- * <ThemeProvider as='body'>
- *   <App />
- * </ThemeProvider>
- *
- * @example
- * <ThemeProvider theme='dark' themeOptions={{ applyBackground: false }}>
- *  <App />
- * </ThemeProvider>
- */
 export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
-    const { theme: themeProp = 'inherit', children, themeOptions = {}, portalContainer: portalContainerProp, includeCss = themeProp === 'inherit', ...rest } = props;
-    const [rootElement, setRootElement] = React.useState(null);
-    const parent = useParentThemeAndContext(rootElement);
-    const theme = themeProp === 'inherit' ? parent.theme || 'light' : themeProp;
-    // default apply background only for topmost ThemeProvider
-    themeOptions.applyBackground ?? (themeOptions.applyBackground = !parent.theme);
-    // default inherit highContrast option from parent if also inheriting base theme
-    themeOptions.highContrast ?? (themeOptions.highContrast = themeProp === 'inherit' ? parent.highContrast : undefined);
-    const [portalContainerFromParent] = useScopedAtom(portalContainerAtom);
-    const contextValue = React.useMemo(() => ({ theme, themeOptions }), 
-    // we do include all dependencies below, but we want to stringify the objects as they could be different on each render
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [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), ...rest },
-                        children,
-                        React.createElement(PortalContainer, { portalContainerProp: portalContainerProp, portalContainerFromParent: portalContainerFromParent, isInheritingTheme: themeProp === 'inherit' })))))));
+  var _themeOptions, _themeOptions1;
+  const {
+    theme: themeProp = 'inherit',
+    children,
+    themeOptions = {},
+    portalContainer: portalContainerProp,
+    includeCss = themeProp === 'inherit',
+    ...rest
+  } = props;
+  const [rootElement, setRootElement] = React.useState(null);
+  const parent = useParentThemeAndContext(rootElement);
+  const theme = themeProp === 'inherit' ? parent.theme || 'light' : themeProp;
+  (_themeOptions = themeOptions).applyBackground ??
+    (_themeOptions.applyBackground = !parent.theme);
+  (_themeOptions1 = themeOptions).highContrast ??
+    (_themeOptions1.highContrast =
+      themeProp === 'inherit' ? parent.highContrast : undefined);
+  const [portalContainerFromParent] = useScopedAtom(portalContainerAtom);
+  const 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),
+              ...rest,
+            },
+            children,
+            React.createElement(PortalContainer, {
+              portalContainerProp: portalContainerProp,
+              portalContainerFromParent: portalContainerFromParent,
+              isInheritingTheme: themeProp === 'inherit',
+            }),
+          ),
+        ),
+      ),
+    ),
+  );
 });
 ThemeProvider.displayName = 'ThemeProvider';
-// ----------------------------------------------------------------------------
 const Root = React.forwardRef((props, forwardedRef) => {
-    const { theme, children, themeOptions, className, ...rest } = props;
-    const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
-    const prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
-    const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
-    const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
-    const shouldApplyBackground = themeOptions?.applyBackground;
-    const [ownerDocument, setOwnerDocument] = useScopedAtom(ownerDocumentAtom);
-    const 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));
+  const { theme, children, themeOptions, className, ...rest } = props;
+  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
+  const prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
+  const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
+  const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
+  const shouldApplyBackground = themeOptions?.applyBackground;
+  const [ownerDocument, setOwnerDocument] = useScopedAtom(ownerDocumentAtom);
+  const 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,
+  );
 });
-// ----------------------------------------------------------------------------
-/**
- * Returns theme information from either parent ThemeContext or by reading the closest
- * data-iui-theme attribute if context is not found.
- *
- * Also returns the ThemeContext itself (if found).
- */
 const useParentThemeAndContext = (rootElement) => {
-    const parentContext = React.useContext(ThemeContext);
-    const [parentThemeState, setParentTheme] = React.useState(parentContext?.theme);
-    const [parentHighContrastState, setParentHighContrastState] = React.useState(parentContext?.themeOptions?.highContrast);
-    const parentThemeRef = useLatestRef(parentContext?.theme);
-    useLayoutEffect(() => {
-        // bail if we already have theme from context
-        if (parentThemeRef.current) {
-            return;
-        }
-        // find parent theme from closest data-iui-theme attribute
-        const closestRoot = rootElement?.parentElement?.closest('[data-iui-theme]');
-        if (!closestRoot) {
-            return;
-        }
-        // helper function that updates state to match data attributes from closest root
-        const synchronizeTheme = () => {
-            setParentTheme(closestRoot?.getAttribute('data-iui-theme'));
-            setParentHighContrastState(closestRoot?.getAttribute('data-iui-contrast') === 'high');
-        };
-        // set theme for initial mount
-        synchronizeTheme();
-        // use mutation observers to listen to future updates to data attributes
-        const 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,
+  const parentContext = React.useContext(ThemeContext);
+  const [parentThemeState, setParentTheme] = React.useState(
+    parentContext?.theme,
+  );
+  const [parentHighContrastState, setParentHighContrastState] = React.useState(
+    parentContext?.themeOptions?.highContrast,
+  );
+  const parentThemeRef = useLatestRef(parentContext?.theme);
+  useLayoutEffect(() => {
+    if (parentThemeRef.current) {
+      return;
+    }
+    const closestRoot = rootElement?.parentElement?.closest('[data-iui-theme]');
+    if (!closestRoot) {
+      return;
+    }
+    const synchronizeTheme = () => {
+      setParentTheme(closestRoot?.getAttribute('data-iui-theme'));
+      setParentHighContrastState(
+        closestRoot?.getAttribute('data-iui-contrast') === 'high',
+      );
     };
+    synchronizeTheme();
+    const 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,
+  };
 };
-// ----------------------------------------------------------------------------
-/**
- * Creates a new portal container if necessary, or reuses the parent portal container.
- *
- * Updates `portalContainerAtom` with the correct portal container.
- */
-const PortalContainer = React.memo(({ portalContainerProp, portalContainerFromParent, isInheritingTheme, }) => {
+const PortalContainer = React.memo(
+  ({ portalContainerProp, portalContainerFromParent, isInheritingTheme }) => {
     const [ownerDocument] = useScopedAtom(ownerDocumentAtom);
     const setPortalContainer = useScopedSetAtom(portalContainerAtom);
-    // bail if not hydrated, because portals don't work on server
+    const id = useId();
     const isHydrated = useHydration() === 'hydrated';
     if (!isHydrated) {
-        return null;
+      return null;
     }
     if (portalContainerProp) {
-        return React.createElement(PortaledToaster, { target: portalContainerProp });
+      return React.createElement(PortaledToaster, {
+        target: portalContainerProp,
+      });
     }
-    // Create a new portal container only if necessary:
-    // - not inheriting theme
-    // - no parent portal container to portal into
-    // - parent portal container is in a different window (#2006)
-    if (!isInheritingTheme ||
-        !portalContainerFromParent ||
-        (!!ownerDocument &&
-            portalContainerFromParent.ownerDocument !== ownerDocument)) {
-        return (React.createElement("div", { style: { display: 'contents' }, ref: setPortalContainer },
-            React.createElement(Toaster, null)));
+    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 });
-});
-// ----------------------------------------------------------------------------
-const PortaledToaster = ({ target }) => {
-    const [portalContainer, setPortalContainer] = useScopedAtom(portalContainerAtom);
-    // Synchronize atom with the correct portal target if necessary.
-    React.useEffect(() => {
-        if (target && target !== portalContainer) {
-            setPortalContainer(target);
-        }
+    return React.createElement(PortaledToaster, {
+      target: portalContainerFromParent,
     });
-    return target ? ReactDOM.createPortal(React.createElement(Toaster, null), target) : null;
+  },
+);
+const PortaledToaster = ({ target }) => {
+  const [portalContainer, setPortalContainer] =
+    useScopedAtom(portalContainerAtom);
+  React.useEffect(() => {
+    if (target && target !== portalContainer) {
+      setPortalContainer(target);
+    }
+  });
+  return target
+    ? ReactDOM.createPortal(React.createElement(Toaster, null), target)
+    : null;
 };
-// ----------------------------------------------------------------------------
-/**
- * When `@itwin/itwinui-react/styles.css` is not imported, we will attempt to
- * dynamically import it (if possible) and fallback to loading it from a CDN.
- */
 const FallbackStyles = ({ root }) => {
-    useLayoutEffect(() => {
-        // bail if styles are already loaded
-        if (getComputedStyle(root).getPropertyValue('--_iui-v3-loaded') === 'yes') {
-            return;
-        }
-        // bail if isUnitTest because unit tests don't care about CSS 🤷
-        if (isUnitTest) {
-            return;
-        }
-        (async () => {
-            try {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                await import('../../../styles.css');
-            }
-            catch (error) {
-                console.log('Error loading styles.css locally', error);
-                const 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);
+  useLayoutEffect(() => {
+    if (getComputedStyle(root).getPropertyValue('--_iui-v3-loaded') === 'yes') {
+      return;
+    }
+    if (isUnitTest) {
+      return;
+    }
+    (async () => {
+      try {
+        await import('../../../styles.css');
+      } catch (error) {
+        console.log('Error loading styles.css locally', error);
+        const 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);
 };