@itwin/itwinui-react 3.0.0-dev.8 → 3.0.0

package/esm/core/Tag/Tag.js

@@ -5,7 +5,7 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { SvgCloseSmall, Box } from '../utils/index.js';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 /**
  * Tag for showing categories, filters etc.
  * @example

package/esm/core/Textarea/Textarea.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Input } from '../Input/index.js';
+import { Input } from '../Input/Input.js';
 /**
  * Basic textarea component
  * @example

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

@@ -17,9 +17,10 @@ type RootProps = {
      * This can cause a flash of incorrect theme on first render.
      *
      * The 'inherit' option is intended to be used by packages, to enable incremental adoption
-     * of iTwinUI v2 in app that might be using v1 in other places.
+     * of iTwinUI while respecting the theme set by the consuming app. It will fall back to 'light'
+     * if no parent theme is found. Additionally, it will attempt to inherit the `portalContainer` if possible.
      *
-     * @default 'light'
+     * @default 'inherit'
      */
     theme?: ThemeType | 'inherit';
     themeOptions?: Pick<ThemeOptions, 'highContrast'> & {

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -50,16 +50,25 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
     portalContainer: portalContainerProp,
     ...rest
   } = props;
+  const [parentTheme, rootRef, parentContext] = useParentTheme();
+  const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
+  /**
+   * We will portal our portal container into `portalContainer` prop (if specified),
+   * or inherit `portalContainer` from context (if also inheriting theme).
+   */
+  const portaledPortalContainer =
+    portalContainerProp ||
+    (themeProp === 'inherit' ? parentContext?.portalContainer : undefined);
   const [portalContainer, setPortalContainer] = useControlledState(
     null,
-    portalContainerProp,
+    portaledPortalContainer,
   );
-  const [parentTheme, rootRef] = useParentTheme();
-  const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
   const shouldApplyBackground = themeOptions?.applyBackground ?? !parentTheme;
   const contextValue = React.useMemo(
     () => ({ theme, themeOptions, portalContainer }),
-    [theme, themeOptions, portalContainer],
+    // 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), portalContainer],
   );
   return React.createElement(
     ThemeContext.Provider,
@@ -77,14 +86,14 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
         ToastProvider,
         null,
         children,
-        portalContainerProp
+        portaledPortalContainer
           ? ReactDOM.createPortal(
               React.createElement(Toaster, null),
-              portalContainerProp,
+              portaledPortalContainer,
             )
           : React.createElement(
               'div',
-              { ref: setPortalContainer },
+              { ref: setPortalContainer, style: { display: 'contents' } },
               React.createElement(Toaster, null),
             ),
       ),
@@ -142,5 +151,5 @@ const useParentTheme = () => {
           ?.getAttribute('data-iui-theme'),
     );
   }, []);
-  return [parentContext?.theme ?? parentThemeState, rootRef];
+  return [parentContext?.theme ?? parentThemeState, rootRef, parentContext];
 };

package/esm/core/Tile/Tile.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 type TileWrapperOwnProps = {
     /**
      * Status of the tile.
@@ -253,7 +253,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }, "ref">>;
     /**

package/esm/core/Tile/Tile.js

@@ -9,15 +9,15 @@ import {
   SvgMore,
   SvgNew,
   SvgCheckmark,
-  LinkAction,
   useSafeContext,
   supportsHas,
   polymorphic,
   Box,
 } from '../utils/index.js';
-import { DropdownMenu } from '../DropdownMenu/index.js';
-import { IconButton } from '../Buttons/index.js';
-import { ProgressRadial } from '../ProgressIndicators/index.js';
+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) => {
@@ -212,32 +212,31 @@ const TileMoreOptions = React.forwardRef((props, forwardedRef) => {
   const { className, children = [], buttonProps, ...rest } = props;
   const [isMenuVisible, setIsMenuVisible] = React.useState(false);
   return React.createElement(
-    DropdownMenu,
+    Box,
     {
-      onShow: React.useCallback(() => setIsMenuVisible(true), []),
-      onHide: React.useCallback(() => setIsMenuVisible(false), []),
-      menuItems: (close) =>
-        children?.map((option) =>
-          React.cloneElement(option, {
-            onClick: (value) => {
-              close();
-              option.props.onClick?.(value);
-            },
-          }),
-        ),
+      className: cx(
+        'iui-tile-more-options',
+        {
+          'iui-visible': isMenuVisible,
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
     },
     React.createElement(
-      Box,
+      DropdownMenu,
       {
-        className: cx(
-          'iui-tile-more-options',
-          {
-            'iui-visible': isMenuVisible,
-          },
-          className,
-        ),
-        ref: forwardedRef,
-        ...rest,
+        onVisibleChange: setIsMenuVisible,
+        menuItems: (close) =>
+          children?.map((option) =>
+            React.cloneElement(option, {
+              onClick: (value) => {
+                close();
+                option.props.onClick?.(value);
+              },
+            }),
+          ),
       },
       React.createElement(
         IconButton,
@@ -309,16 +308,17 @@ const TileComponent = React.forwardRef((props, forwardedRef) => {
           : name,
       ),
     ),
-    React.createElement(
-      TileThumbnailArea,
-      null,
-      typeof thumbnail !== 'string'
-        ? React.createElement(TileThumbnailPicture, null, thumbnail)
-        : React.createElement(TileThumbnailPicture, { url: thumbnail }),
-      badge && React.createElement(TileBadgeContainer, null, badge),
-      leftIcon && React.createElement(TileTypeIndicator, null, leftIcon),
-      rightIcon && React.createElement(TileQuickAction, null, rightIcon),
-    ),
+    thumbnail &&
+      React.createElement(
+        TileThumbnailArea,
+        null,
+        typeof thumbnail !== 'string'
+          ? React.createElement(TileThumbnailPicture, null, thumbnail)
+          : React.createElement(TileThumbnailPicture, { url: thumbnail }),
+        badge && React.createElement(TileBadgeContainer, null, badge),
+        leftIcon && React.createElement(TileTypeIndicator, null, leftIcon),
+        rightIcon && React.createElement(TileQuickAction, null, rightIcon),
+      ),
     React.createElement(
       TileContentArea,
       null,

package/esm/core/Toast/Toast.js

@@ -13,7 +13,7 @@ import {
   useSafeContext,
   ButtonBase,
 } from '../utils/index.js';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 import { ToasterStateContext } from './Toaster.js';
 const isMotionOk = () =>
   getWindow()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;

package/esm/core/TransferList/TransferList.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import { ListItem } from '../List/index.js';
+import { ListItem } from '../List/ListItem.js';
 type TransferListListboxWrapperOwnProps = {};
 type TransferListItemOwnProps = {
     /**

package/esm/core/TransferList/TransferList.js

@@ -12,8 +12,9 @@ import {
   Box,
   polymorphic,
 } from '../utils/index.js';
-import { List, ListItem } from '../List/index.js';
-import { Label } from '../Label/index.js';
+import { List } from '../List/List.js';
+import { ListItem } from '../List/ListItem.js';
+import { Label } from '../Label/Label.js';
 // ----------------------------------------------------------------------------
 // TransferListComponent
 const TransferListComponent = polymorphic('iui-transfer-list-wrapper');

package/esm/core/Tree/TreeNodeExpander.d.ts

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { IconButtonProps } from '../Buttons/IconButton/IconButton.js';
+import type { IconButtonProps } from '../Buttons/IconButton.js';
 type TreeNodeExpanderProps = {
     isExpanded?: boolean;
 } & IconButtonProps;

package/esm/core/Tree/TreeNodeExpander.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { SvgChevronRight } from '../utils/index.js';
-import { IconButton } from '../Buttons/IconButton/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 export const TreeNodeExpander = React.forwardRef((props, ref) => {
   const { isExpanded, ...rest } = props;
   return React.createElement(

package/{cjs/core/Typography/Anchor → esm/core/Typography}/Anchor.d.ts

@@ -12,5 +12,5 @@
  * <Anchor as={Link} to='/'>Home</Anchor>
  * <Anchor as='button' onClick={() => {}}>click me</Anchor>
  */
-export declare const Anchor: import("../../utils/props.js").PolymorphicForwardRefComponent<"a", {}>;
+export declare const Anchor: import("../utils/props.js").PolymorphicForwardRefComponent<"a", {}>;
 export default Anchor;

package/esm/core/Typography/{Anchor/Anchor.js → Anchor.js}

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { polymorphic } from '../../utils/index.js';
+import { polymorphic } from '../utils/index.js';
 /**
  * A consistently styled anchor component.
  *

package/{cjs/core/Typography/Blockquote → esm/core/Typography}/Blockquote.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type BlockquoteProps = {
     /**
      * Optional footer for any attribution/source.

package/esm/core/Typography/{Blockquote/Blockquote.js → Blockquote.js}

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box } from '../../utils/index.js';
+import { Box } from '../utils/index.js';
 /**
  * Basic blockquote component
  * @example

package/esm/core/Typography/{Code/Code.d.ts → Code.d.ts}

@@ -3,5 +3,5 @@
  * @example
  * <p>Some <Code>inline code</Code> in a paragraph</p>
  */
-export declare const Code: import("../../utils/props.js").PolymorphicForwardRefComponent<"code", {}>;
+export declare const Code: import("../utils/props.js").PolymorphicForwardRefComponent<"code", {}>;
 export default Code;

package/esm/core/Typography/{Code/Code.js → Code.js}

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { polymorphic } from '../../utils/index.js';
+import { polymorphic } from '../utils/index.js';
 /**
  * Inline code element.
  * @example

package/{cjs/core/Typography/Kbd → esm/core/Typography}/Kbd.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 /**
  * Some predefined strings for common keyboard keys.
  */

package/esm/core/Typography/{Kbd/Kbd.js → Kbd.js}

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box } from '../../utils/index.js';
+import { Box } from '../utils/index.js';
 /**
  * Some predefined strings for common keyboard keys.
  */

package/{cjs/core/Typography/Text → esm/core/Typography}/Text.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type TextProps = {
     /**
      * Which typography variant/size should be used for the styling?

package/esm/core/Typography/{Text/Text.js → Text.js}

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box } from '../../utils/index.js';
+import { Box } from '../utils/index.js';
 /**
  * Polymorphic typography component to render any kind of text as any kind of element.
  * Users should decide which element to render based on the context of their app. Link to heading levels docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#accessibility_concerns

package/{cjs/core/utils/components → esm/core/VisuallyHidden}/VisuallyHidden.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../props.js';
+import type { PolymorphicForwardRefComponent } from '../utils/props.js';
 type VisuallyHiddenOwnProps = {
     /**
      * When VisuallyHidden is used with an interactive element (e.g. button),

package/esm/core/{utils/components → VisuallyHidden}/VisuallyHidden.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box } from './Box.js';
+import { Box } from '../utils/components/Box.js';
 /**
  * Hides content visually but keeps it still accessible to screen readers
  * and other assistive technologies.

package/esm/core/utils/components/AutoclearingHiddenLiveRegion.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { VisuallyHidden } from './VisuallyHidden.js';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.js';
 import { getWindow } from '../functions/index.js';
 /**
  * Visually-hidden polite live region that automatically clears itself after 5 seconds.

package/esm/core/utils/components/InputContainer.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export type InputContainerProps<T extends React.ElementType = 'div'> = {
-    as?: T;
+import type { PolymorphicForwardRefComponent } from '../props.js';
+export type InputContainerProps = {
     label?: React.ReactNode;
     disabled?: boolean;
     required?: boolean;
@@ -11,9 +11,9 @@ export type InputContainerProps<T extends React.ElementType = 'div'> = {
     statusMessage?: React.ReactNode;
     inputId?: string;
     labelId?: string;
-} & React.ComponentPropsWithoutRef<T>;
+};
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
-export declare const InputContainer: <T extends React.ElementType<any> = "div">(props: InputContainerProps<T>) => React.JSX.Element;
+export declare const InputContainer: PolymorphicForwardRefComponent<"div", InputContainerProps>;

package/esm/core/utils/components/InputContainer.js

@@ -5,13 +5,13 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from './Box.js';
-import { Label } from '../../Label/index.js';
-import { StatusMessage } from '../../StatusMessage/index.js';
+import { Label } from '../../Label/Label.js';
+import { StatusMessage } from '../../StatusMessage/StatusMessage.js';
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
-export const InputContainer = (props) => {
+export const InputContainer = React.forwardRef((props, forwardedRef) => {
   const {
     label,
     disabled,
@@ -35,12 +35,17 @@ export const InputContainer = (props) => {
       'data-iui-status': status,
       'data-iui-label-placement': isLabelInline ? 'inline' : undefined,
       style: style,
+      ref: forwardedRef,
       ...rest,
     },
     label &&
       React.createElement(
         Label,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
           as: inputId && props.as !== 'label' ? 'label' : 'div',
           required: required,
           disabled: disabled,
@@ -59,4 +64,4 @@ export const InputContainer = (props) => {
             message,
           ),
   );
-};
+});

package/esm/core/utils/components/WithCSSTransition.js

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 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);
@@ -32,7 +33,12 @@ export const WithCSSTransition = (props) => {
         node.style[`min${dimensionCamelCase}`] = 'initial';
         node.style[dimension] = '0px';
       },
-      classNames: 'iui',
+      classNames: {
+        enter: styles['iui-enter'],
+        enterActive: styles['iui-enter-active'],
+        exit: styles['iui-exit'],
+        exitActive: styles['iui-exit-active'],
+      },
       ...rest,
     },
     React.isValidElement(children)

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

@@ -1,4 +1,3 @@
-export * from './Popover.js';
 export * from './Resizer.js';
 export * from './FocusTrap.js';
 export * from './InputContainer.js';
@@ -6,11 +5,6 @@ export * from './InputFlexContainer.js';
 export * from './WithCSSTransition.js';
 export * from './MiddleTextTruncation.js';
 export * from './VirtualScroll.js';
-export * from './VisuallyHidden.js';
-export * from './Icon.js';
-export * from './Flex.js';
-export * from './Divider.js';
-export * from './LinkAction.js';
 export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';
 export * from './ButtonBase.js';

package/esm/core/utils/components/index.js

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export * from './Popover.js';
 export * from './Resizer.js';
 export * from './FocusTrap.js';
 export * from './InputContainer.js';
@@ -10,11 +9,6 @@ export * from './InputFlexContainer.js';
 export * from './WithCSSTransition.js';
 export * from './MiddleTextTruncation.js';
 export * from './VirtualScroll.js';
-export * from './VisuallyHidden.js';
-export * from './Icon.js';
-export * from './Flex.js';
-export * from './Divider.js';
-export * from './LinkAction.js';
 export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';
 export * from './ButtonBase.js';

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

@@ -0,0 +1,11 @@
+declare const isJest: boolean;
+declare let isDev: boolean;
+/**
+ * Logs message one time only in dev environments.
+ *
+ * @example
+ * const logWarningInDev = createWarningLogger();
+ * logWarningInDev("please don't use this")
+ */
+declare const createWarningLogger: () => (message: string) => void;
+export { isJest, isDev, createWarningLogger };

package/esm/core/utils/functions/dev.js

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const isJest = typeof jest !== 'undefined';
+let isDev = false;
+// wrapping in try-catch because process might be undefined
+try {
+  isDev = process.env.NODE_ENV !== 'production' && !isJest;
+} catch {}
+/**
+ * Logs message one time only in dev environments.
+ *
+ * @example
+ * const logWarningInDev = createWarningLogger();
+ * logWarningInDev("please don't use this")
+ */
+const createWarningLogger = !isDev
+  ? () => () => {}
+  : () => {
+      let logged = false;
+      return (message) => {
+        if (!logged) {
+          console.warn(message);
+          logged = true;
+        }
+      };
+    };
+export { isJest, isDev, createWarningLogger };

package/esm/core/utils/functions/index.d.ts

@@ -7,3 +7,4 @@ export * from './supports.js';
 export * from './polymorphic.js';
 export * from './import.js';
 export * from './react.js';
+export * from './dev.js';

package/esm/core/utils/functions/index.js

@@ -11,3 +11,4 @@ export * from './supports.js';
 export * from './polymorphic.js';
 export * from './import.js';
 export * from './react.js';
+export * from './dev.js';

package/esm/core/utils/hooks/useGlobals.d.ts

@@ -7,7 +7,7 @@ import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
  * @private
  */
 export declare const useGlobals: () => {
-    theme?: import("../../index.js").ThemeType | undefined;
+    theme?: import("../../ThemeProvider/ThemeProvider.js").ThemeType | undefined;
     themeOptions?: import("../../ThemeProvider/ThemeProvider.js").ThemeOptions | undefined;
     portalContainer?: HTMLElement | null | undefined;
 } | undefined;

package/esm/core/utils/hooks/useGlobals.js

@@ -4,11 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
-let isDev = false;
-// wrapping in try-catch because process might be undefined
-try {
-  isDev = process.env.NODE_ENV !== 'production';
-} catch {}
+import { isDev } from '../functions/dev.js';
 const didLogWarning = {
   fontSize: false,
   themeProvider: false,

package/esm/core/utils/hooks/useOverflow.js

@@ -68,7 +68,9 @@ export const useOverflow = (
     if (availableSize < requiredSize) {
       const avgItemSize = requiredSize / visibleCount;
       const visibleItems = Math.floor(availableSize / avgItemSize);
-      setVisibleCount(visibleItems);
+      /* When first item is larger than the container - visibleItems count is 0,
+            We can assume that at least some part of the first item is visible and return 1. */
+      setVisibleCount(visibleItems > 0 ? visibleItems : 1);
     } else if (needsFullRerender.current) {
       const childrenSize = Array.from(containerRef.current.children).reduce(
         (sum, child) => sum + child[`offset${dimension}`],