@itwin/itwinui-react 3.12.1 → 3.13.0

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -20,27 +20,29 @@ import {
 import { ThemeContext } from './ThemeContext.js';
 import { ToastProvider, Toaster } from '../Toast/Toaster.js';
 import { atom } from 'jotai';
-const ownerDocumentAtom = atom(undefined);
+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;
-  const {
+  let {
     theme: themeProp = 'inherit',
     children,
     themeOptions = {},
     portalContainer: portalContainerProp,
-    includeCss = themeProp === 'inherit',
+    includeCss = 'inherit' === themeProp,
     ...rest
   } = props;
-  const [rootElement, setRootElement] = React.useState(null);
-  const parent = useParentThemeAndContext(rootElement);
-  const theme = themeProp === 'inherit' ? parent.theme || 'light' : themeProp;
+  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 =
-      themeProp === 'inherit' ? parent.highContrast : undefined);
-  const [portalContainerFromParent] = useScopedAtom(portalContainerAtom);
-  const contextValue = React.useMemo(
+      'inherit' === themeProp ? parent.highContrast : void 0);
+  let [portalContainerFromParent] = useScopedAtom(portalContainerAtom);
+  let contextValue = React.useMemo(
     () => ({
       theme,
       themeOptions,
@@ -71,14 +73,14 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
             {
               theme: theme,
               themeOptions: themeOptions,
-              ref: useMergedRefs(forwardedRef, setRootElement),
+              ref: useMergedRefs(forwardedRef, setRootElement, useIuiDebugRef),
               ...rest,
             },
             children,
             React.createElement(PortalContainer, {
               portalContainerProp: portalContainerProp,
               portalContainerFromParent: portalContainerFromParent,
-              isInheritingTheme: themeProp === 'inherit',
+              isInheritingTheme: 'inherit' === themeProp,
             }),
           ),
         ),
@@ -86,20 +88,18 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-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(
+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) {
+      if (el && el.ownerDocument !== ownerDocument)
         setOwnerDocument(el.ownerDocument);
-      }
     },
     [ownerDocument, setOwnerDocument],
   );
@@ -121,31 +121,25 @@ const Root = React.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-const useParentThemeAndContext = (rootElement) => {
-  const parentContext = React.useContext(ThemeContext);
-  const [parentThemeState, setParentTheme] = React.useState(
-    parentContext?.theme,
-  );
-  const [parentHighContrastState, setParentHighContrastState] = React.useState(
+let useParentThemeAndContext = (rootElement) => {
+  let parentContext = React.useContext(ThemeContext);
+  let [parentThemeState, setParentTheme] = React.useState(parentContext?.theme);
+  let [parentHighContrastState, setParentHighContrastState] = React.useState(
     parentContext?.themeOptions?.highContrast,
   );
-  const parentThemeRef = useLatestRef(parentContext?.theme);
+  let parentThemeRef = useLatestRef(parentContext?.theme);
   useLayoutEffect(() => {
-    if (parentThemeRef.current) {
-      return;
-    }
-    const closestRoot = rootElement?.parentElement?.closest('[data-iui-theme]');
-    if (!closestRoot) {
-      return;
-    }
-    const synchronizeTheme = () => {
+    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();
-    const observer = new MutationObserver(() => synchronizeTheme());
+    let observer = new MutationObserver(() => synchronizeTheme());
     observer.observe(closestRoot, {
       attributes: true,
       attributeFilter: ['data-iui-theme', 'data-iui-contrast'],
@@ -161,26 +155,23 @@ const useParentThemeAndContext = (rootElement) => {
     context: parentContext,
   };
 };
-const PortalContainer = React.memo(
+let PortalContainer = React.memo(
   ({ portalContainerProp, portalContainerFromParent, isInheritingTheme }) => {
-    const [ownerDocument] = useScopedAtom(ownerDocumentAtom);
-    const setPortalContainer = useScopedSetAtom(portalContainerAtom);
-    const id = useId();
-    const isHydrated = useHydration() === 'hydrated';
-    if (!isHydrated) {
-      return null;
-    }
-    if (portalContainerProp) {
+    let [ownerDocument] = useScopedAtom(ownerDocumentAtom);
+    let setPortalContainer = useScopedSetAtom(portalContainerAtom);
+    let id = useId();
+    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',
         {
@@ -192,38 +183,35 @@ const PortalContainer = React.memo(
         },
         React.createElement(Toaster, null),
       );
-    }
     return React.createElement(PortaledToaster, {
       target: portalContainerFromParent,
     });
   },
 );
-const PortaledToaster = ({ target }) => {
-  const [portalContainer, setPortalContainer] =
+let PortaledToaster = ({ target }) => {
+  let [portalContainer, setPortalContainer] =
     useScopedAtom(portalContainerAtom);
   React.useEffect(() => {
-    if (target && target !== portalContainer) {
-      setPortalContainer(target);
-    }
+    if (target && target !== portalContainer) setPortalContainer(target);
   });
   return target
     ? ReactDOM.createPortal(React.createElement(Toaster, null), target)
     : null;
 };
-const FallbackStyles = ({ root }) => {
+let FallbackStyles = ({ root }) => {
   useLayoutEffect(() => {
-    if (getComputedStyle(root).getPropertyValue('--_iui-v3-loaded') === 'yes') {
-      return;
-    }
-    if (isUnitTest) {
+    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);
-        const css = await importCss(
+        let css = await importCss(
           'https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@3/styles.css',
         );
         document.adoptedStyleSheets = [
@@ -235,3 +223,13 @@ const FallbackStyles = ({ root }) => {
   }, [root]);
   return React.createElement(React.Fragment, null);
 };
+let useIuiDebugRef = () => {
+  var _globalThis;
+  let _globalThis1 = globalThis;
+  (_globalThis = _globalThis1).__iui ||
+    (_globalThis.__iui = {
+      versions: new Set(),
+    });
+  var version, version1;
+  _globalThis1.__iui.versions.add(JSON.stringify(meta));
+};

package/esm/core/Tile/Tile.js

@@ -14,10 +14,9 @@ import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { LinkAction } from '../LinkAction/LinkAction.js';
-const TileContext = React.createContext(undefined);
-TileContext.displayName = 'TileContext';
-const TileWrapper = React.forwardRef((props, forwardedRef) => {
-  const {
+let TileContext = React.createContext(void 0);
+let TileWrapper = React.forwardRef((props, forwardedRef) => {
+  let {
     className,
     status,
     variant,
@@ -27,8 +26,8 @@ const TileWrapper = React.forwardRef((props, forwardedRef) => {
     isDisabled,
     ...rest
   } = props;
-  const [localActionable, setLocalActionable] = React.useState(false);
-  const isActionable = localActionable;
+  let [localActionable, setLocalActionable] = React.useState(false);
+  let isActionable = localActionable;
   return React.createElement(
     TileContext.Provider,
     {
@@ -47,7 +46,7 @@ const TileWrapper = React.forwardRef((props, forwardedRef) => {
       className: cx(
         'iui-tile',
         {
-          'iui-folder': variant === 'folder',
+          'iui-folder': 'folder' === variant,
           'iui-new': isNew,
           'iui-selected': isSelected,
           'iui-actionable': isActionable,
@@ -62,21 +61,18 @@ const TileWrapper = React.forwardRef((props, forwardedRef) => {
     }),
   );
 });
-TileWrapper.displayName = 'Tile.Wrapper';
-const TileAction = React.forwardRef((props, forwardedRef) => {
-  const { onClick, children, href, ...rest } = props;
-  const { setActionable, isDisabled } = useSafeContext(TileContext);
+let TileAction = React.forwardRef((props, forwardedRef) => {
+  let { onClick, children, href, ...rest } = props;
+  let { setActionable, isDisabled } = useSafeContext(TileContext);
   React.useEffect(() => {
-    if (!supportsHas()) {
-      setActionable(true);
-    }
+    if (!supportsHas()) setActionable(true);
   }, [setActionable]);
   return React.createElement(
     LinkAction,
     {
-      as: !!props.href ? 'a' : 'button',
+      as: props.href ? 'a' : 'button',
       href: href,
-      onClick: !isDisabled ? onClick : undefined,
+      onClick: isDisabled ? void 0 : onClick,
       'aria-disabled': isDisabled,
       ref: forwardedRef,
       ...rest,
@@ -84,21 +80,18 @@ const TileAction = React.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-TileAction.displayName = 'Tile.Action';
-const TileThumbnailArea = polymorphic('iui-tile-thumbnail');
-TileThumbnailArea.displayName = 'Tile.ThumbnailArea';
-const TileThumbnailPicture = React.forwardRef((props, forwardedRef) => {
-  const { className, url, children, ...rest } = props;
-  if (url) {
+let TileThumbnailArea = polymorphic('iui-tile-thumbnail');
+let TileThumbnailPicture = React.forwardRef((props, forwardedRef) => {
+  let { className, url, children, ...rest } = props;
+  if (url)
     return React.createElement(Box, {
       className: cx('iui-tile-thumbnail-picture', className),
       style: {
-        backgroundImage: typeof url === 'string' ? `url(${url})` : undefined,
+        backgroundImage: 'string' == typeof url ? `url(${url})` : void 0,
       },
       ref: forwardedRef,
       ...rest,
     });
-  }
   return React.createElement(
     Box,
     {
@@ -109,13 +102,10 @@ const TileThumbnailPicture = React.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture';
-const TileQuickAction = polymorphic('iui-tile-thumbnail-quick-action');
-TileQuickAction.displayName = 'Tile.QuickAction';
-const TileTypeIndicator = polymorphic('iui-tile-thumbnail-type-indicator');
-TileTypeIndicator.displayName = 'Tile.TypeIndicator';
-const TileIconButton = React.forwardRef((props, forwardedRef) => {
-  const { className, children, ...rest } = props;
+let TileQuickAction = polymorphic('iui-tile-thumbnail-quick-action');
+let TileTypeIndicator = polymorphic('iui-tile-thumbnail-type-indicator');
+let TileIconButton = React.forwardRef((props, forwardedRef) => {
+  let { className, children, ...rest } = props;
   return React.createElement(
     IconButton,
     {
@@ -128,11 +118,9 @@ const TileIconButton = React.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-TileIconButton.displayName = 'Tile.IconButton';
-const TileBadgeContainer = polymorphic('iui-tile-thumbnail-badge-container');
-TileBadgeContainer.displayName = 'Tile.BadgeContainer';
-const TileName = React.forwardRef((props, forwardedRef) => {
-  const { className, children, name, ...rest } = props;
+let TileBadgeContainer = polymorphic('iui-tile-thumbnail-badge-container');
+let TileName = React.forwardRef((props, forwardedRef) => {
+  let { className, children, name, ...rest } = props;
   return React.createElement(
     Box,
     {
@@ -143,34 +131,29 @@ const TileName = React.forwardRef((props, forwardedRef) => {
     children ?? name,
   );
 });
-TileBadgeContainer.displayName = 'Tile.Name';
-const TileNameIcon = React.forwardRef((props, forwardedRef) => {
-  const { children, className, ...rest } = props;
-  const { status, isLoading, isSelected, isNew } = useSafeContext(TileContext);
-  const StatusIcon = !!status && StatusIconMap[status];
+let TileNameIcon = React.forwardRef((props, forwardedRef) => {
+  let { children, className, ...rest } = props;
+  let { status, isLoading, isSelected, isNew } = useSafeContext(TileContext);
+  let StatusIcon = !!status && StatusIconMap[status];
   let icon;
-  if (StatusIcon) {
+  if (StatusIcon)
     icon = React.createElement(StatusIcon, {
       'aria-hidden': true,
     });
-  }
-  if (isLoading) {
+  if (isLoading)
     icon = React.createElement(ProgressRadial, {
       size: 'x-small',
       'aria-hidden': true,
       indeterminate: true,
     });
-  }
-  if (isSelected) {
+  if (isSelected)
     icon = React.createElement(SvgCheckmark, {
       'aria-hidden': true,
     });
-  }
-  if (isNew) {
+  if (isNew)
     icon = React.createElement(SvgNew, {
       'aria-hidden': true,
     });
-  }
   return children || icon
     ? React.createElement(
         Box,
@@ -183,18 +166,13 @@ const TileNameIcon = React.forwardRef((props, forwardedRef) => {
       )
     : null;
 });
-TileNameIcon.displayName = 'Tile.NameIcon';
-const TileNameLabel = polymorphic.span('iui-tile-name-label');
-TileNameLabel.displayName = 'Tile.NameLabel';
-const TileContentArea = polymorphic('iui-tile-content');
-TileContentArea.displayName = 'Tile.ContentArea';
-const TileDescription = polymorphic('iui-tile-description');
-TileDescription.displayName = 'Tile.Description';
-const TileMetadata = polymorphic('iui-tile-metadata');
-TileMetadata.displayName = 'Tile.Metadata';
-const TileMoreOptions = React.forwardRef((props, forwardedRef) => {
-  const { className, children = [], buttonProps, ...rest } = props;
-  const [isMenuVisible, setIsMenuVisible] = React.useState(false);
+let TileNameLabel = polymorphic.span('iui-tile-name-label');
+let TileContentArea = polymorphic('iui-tile-content');
+let TileDescription = polymorphic('iui-tile-description');
+let TileMetadata = polymorphic('iui-tile-metadata');
+let TileMoreOptions = React.forwardRef((props, forwardedRef) => {
+  let { className, children = [], buttonProps, ...rest } = props;
+  let [isMenuVisible, setIsMenuVisible] = React.useState(false);
   return React.createElement(
     Box,
     {
@@ -235,11 +213,9 @@ const TileMoreOptions = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-TileMoreOptions.displayName = 'Tile.MoreOptions';
-const TileButtons = polymorphic('iui-tile-buttons');
-TileButtons.displayName = 'Tile.Buttons';
-const TileComponent = React.forwardRef((props, forwardedRef) => {
-  const {
+let TileButtons = polymorphic('iui-tile-buttons');
+let TileComponent = React.forwardRef((props, forwardedRef) => {
+  let {
     name,
     description,
     status,
@@ -282,7 +258,7 @@ const TileComponent = React.forwardRef((props, forwardedRef) => {
           ? React.createElement(
               TileAction,
               {
-                onClick: !isDisabled ? onClick : undefined,
+                onClick: isDisabled ? void 0 : onClick,
                 'aria-disabled': isDisabled,
               },
               name,
@@ -294,7 +270,7 @@ const TileComponent = React.forwardRef((props, forwardedRef) => {
       React.createElement(
         TileThumbnailArea,
         null,
-        typeof thumbnail !== 'string'
+        'string' != typeof thumbnail
           ? React.createElement(TileThumbnailPicture, null, thumbnail)
           : React.createElement(TileThumbnailPicture, {
               url: thumbnail,
@@ -314,7 +290,6 @@ const TileComponent = React.forwardRef((props, forwardedRef) => {
     buttons && React.createElement(TileButtons, null, buttons),
   );
 });
-TileComponent.displayName = 'Tile';
 export const Tile = Object.assign(TileComponent, {
   Wrapper: TileWrapper,
   ThumbnailArea: TileThumbnailArea,