@itwin/itwinui-react 3.0.0-dev.9 → 3.0.1

package/cjs/core/Tag/Tag.js

@@ -9,7 +9,7 @@ const tslib_1 = require('tslib');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Buttons/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
 /**
  * Tag for showing categories, filters etc.
  * @example
@@ -41,7 +41,7 @@ exports.Tag = React.forwardRef((props, forwardedRef) => {
       : children,
     onRemove &&
       React.createElement(
-        index_js_2.IconButton,
+        IconButton_js_1.IconButton,
         {
           styleType: 'borderless',
           size: 'small',

package/cjs/core/Textarea/Textarea.js

@@ -7,7 +7,7 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Input/index.js');
+const Input_js_1 = require('../Input/Input.js');
 /**
  * Basic textarea component
  * @example
@@ -15,7 +15,7 @@ const index_js_1 = require('../Input/index.js');
  * <Textarea disabled={true} placeholder='This is a disabled textarea' />
  */
 exports.Textarea = React.forwardRef((props, forwardedRef) => {
-  return React.createElement(index_js_1.Input, {
+  return React.createElement(Input_js_1.Input, {
     as: 'textarea',
     rows: 3,
     ref: forwardedRef,

package/cjs/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/cjs/core/ThemeProvider/ThemeProvider.js

@@ -48,14 +48,23 @@ exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
     portalContainer: portalContainerProp,
     ...rest
   } = props;
-  const [portalContainer, setPortalContainer] = (0,
-  index_js_1.useControlledState)(null, portalContainerProp);
-  const [parentTheme, rootRef] = useParentTheme();
+  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] = (0,
+  index_js_1.useControlledState)(null, portaledPortalContainer);
   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_js_1.ThemeContext.Provider,
@@ -73,14 +82,14 @@ exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
         Toaster_js_1.ToastProvider,
         null,
         children,
-        portalContainerProp
+        portaledPortalContainer
           ? ReactDOM.createPortal(
               React.createElement(Toaster_js_1.Toaster, null),
-              portalContainerProp,
+              portaledPortalContainer,
             )
           : React.createElement(
               'div',
-              { ref: setPortalContainer },
+              { ref: setPortalContainer, style: { display: 'contents' } },
               React.createElement(Toaster_js_1.Toaster, null),
             ),
       ),
@@ -142,5 +151,5 @@ const useParentTheme = () => {
           ?.getAttribute('data-iui-theme'),
     );
   }, []);
-  return [parentContext?.theme ?? parentThemeState, rootRef];
+  return [parentContext?.theme ?? parentThemeState, rootRef, parentContext];
 };

package/cjs/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/cjs/core/Tile/Tile.js

@@ -9,9 +9,10 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../DropdownMenu/index.js');
-const index_js_3 = require('../Buttons/index.js');
-const index_js_4 = require('../ProgressIndicators/index.js');
+const DropdownMenu_js_1 = require('../DropdownMenu/DropdownMenu.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
+const ProgressRadial_js_1 = require('../ProgressIndicators/ProgressRadial.js');
+const LinkAction_js_1 = require('../LinkAction/LinkAction.js');
 const TileContext = React.createContext(undefined);
 TileContext.displayName = 'TileContext';
 const TileWrapper = React.forwardRef((props, forwardedRef) => {
@@ -74,7 +75,7 @@ const TileAction = React.forwardRef((props, forwardedRef) => {
     }
   }, [setActionable]);
   return React.createElement(
-    index_js_1.LinkAction,
+    LinkAction_js_1.LinkAction,
     {
       as: !!props.href ? 'a' : 'button',
       href: href,
@@ -134,7 +135,7 @@ TileTypeIndicator.displayName = 'Tile.TypeIndicator';
 const TileIconButton = React.forwardRef((props, forwardedRef) => {
   const { className, children, ...rest } = props;
   return React.createElement(
-    index_js_3.IconButton,
+    IconButton_js_1.IconButton,
     {
       className: className,
       styleType: 'borderless',
@@ -177,7 +178,7 @@ const TileNameIcon = React.forwardRef((props, forwardedRef) => {
     icon = React.createElement(StatusIcon, { 'aria-hidden': true });
   }
   if (isLoading) {
-    icon = React.createElement(index_js_4.ProgressRadial, {
+    icon = React.createElement(ProgressRadial_js_1.ProgressRadial, {
       size: 'x-small',
       'aria-hidden': true,
       indeterminate: true,
@@ -240,7 +241,7 @@ const TileMoreOptions = React.forwardRef((props, forwardedRef) => {
       ...rest,
     },
     React.createElement(
-      index_js_2.DropdownMenu,
+      DropdownMenu_js_1.DropdownMenu,
       {
         onVisibleChange: setIsMenuVisible,
         menuItems: (close) =>
@@ -254,7 +255,7 @@ const TileMoreOptions = React.forwardRef((props, forwardedRef) => {
           ),
       },
       React.createElement(
-        index_js_3.IconButton,
+        IconButton_js_1.IconButton,
         {
           styleType: 'borderless',
           size: 'small',
@@ -323,16 +324,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/cjs/core/Toast/Toast.js

@@ -10,7 +10,7 @@ const React = tslib_1.__importStar(require('react'));
 const react_transition_group_1 = require('react-transition-group');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Buttons/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
 const Toaster_js_1 = require('./Toaster.js');
 const isMotionOk = () =>
   (0, index_js_1.getWindow)()?.matchMedia?.(
@@ -217,7 +217,7 @@ exports.ToastPresentation = React.forwardRef((props, forwardedRef) => {
       ),
     (type === 'persisting' || hasCloseButton) &&
       React.createElement(
-        index_js_2.IconButton,
+        IconButton_js_1.IconButton,
         {
           size: 'small',
           styleType: 'borderless',

package/cjs/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/cjs/core/TransferList/TransferList.js

@@ -9,8 +9,9 @@ const tslib_1 = require('tslib');
 const react_1 = tslib_1.__importDefault(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../List/index.js');
-const index_js_3 = require('../Label/index.js');
+const List_js_1 = require('../List/List.js');
+const ListItem_js_1 = require('../List/ListItem.js');
+const Label_js_1 = require('../Label/Label.js');
 // ----------------------------------------------------------------------------
 // TransferListComponent
 const TransferListComponent = (0, index_js_1.polymorphic)(
@@ -91,7 +92,7 @@ const TransferListListbox = react_1.default.forwardRef((props, ref) => {
     }
   };
   return react_1.default.createElement(
-    index_js_2.List,
+    List_js_1.List,
     {
       className: (0, classnames_1.default)(
         'iui-transfer-list-listbox',
@@ -134,7 +135,7 @@ const TransferListItem = react_1.default.forwardRef((props, ref) => {
     }
   };
   return react_1.default.createElement(
-    index_js_2.ListItem,
+    ListItem_js_1.ListItem,
     {
       ref: ref,
       onClick: onClickEvents,
@@ -163,7 +164,7 @@ const TransferListListboxLabel = react_1.default.forwardRef((props, ref) => {
     }
   }, [id, labelId, setLabelId]);
   return react_1.default.createElement(
-    index_js_3.Label,
+    Label_js_1.Label,
     { as: 'div', id: labelId, ref: ref, ...rest },
     children,
   );

package/cjs/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/cjs/core/Tree/TreeNodeExpander.js

@@ -9,11 +9,11 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Buttons/IconButton/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
 exports.TreeNodeExpander = React.forwardRef((props, ref) => {
   const { isExpanded, ...rest } = props;
   return React.createElement(
-    index_js_2.IconButton,
+    IconButton_js_1.IconButton,
     {
       styleType: 'borderless',
       size: 'small',

package/{esm/core/Typography/Anchor → cjs/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/cjs/core/Typography/{Anchor/Anchor.js → Anchor.js}

@@ -5,7 +5,7 @@ exports.Anchor = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require('../../utils/index.js');
+const index_js_1 = require('../utils/index.js');
 /**
  * A consistently styled anchor component.
  *

package/{esm/core/Typography/Blockquote → cjs/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/cjs/core/Typography/{Blockquote/Blockquote.js → Blockquote.js}

@@ -8,7 +8,7 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../../utils/index.js');
+const index_js_1 = require('../utils/index.js');
 /**
  * Basic blockquote component
  * @example

package/cjs/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/cjs/core/Typography/{Code/Code.js → Code.js}

@@ -5,7 +5,7 @@ exports.Code = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require('../../utils/index.js');
+const index_js_1 = require('../utils/index.js');
 /**
  * Inline code element.
  * @example

package/{esm/core/Typography/Kbd → cjs/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/cjs/core/Typography/{Kbd/Kbd.js → Kbd.js}

@@ -8,7 +8,7 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../../utils/index.js');
+const index_js_1 = require('../utils/index.js');
 /**
  * Some predefined strings for common keyboard keys.
  */

package/{esm/core/Typography/Text → cjs/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/cjs/core/Typography/{Text/Text.js → Text.js}

@@ -8,7 +8,7 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../../utils/index.js');
+const index_js_1 = require('../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/{esm/core/utils/components → cjs/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/cjs/core/{utils/components → VisuallyHidden}/VisuallyHidden.js

@@ -8,7 +8,7 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const Box_js_1 = require('./Box.js');
+const Box_js_1 = require('../utils/components/Box.js');
 /**
  * Hides content visually but keeps it still accessible to screen readers
  * and other assistive technologies.

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

@@ -7,7 +7,7 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const VisuallyHidden_js_1 = require('./VisuallyHidden.js');
+const VisuallyHidden_js_1 = require('../../VisuallyHidden/VisuallyHidden.js');
 const index_js_1 = require('../functions/index.js');
 /**
  * Visually-hidden polite live region that automatically clears itself after 5 seconds.

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

@@ -9,8 +9,8 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const Box_js_1 = require('./Box.js');
-const index_js_1 = require('../../Label/index.js');
-const index_js_2 = require('../../StatusMessage/index.js');
+const Label_js_1 = require('../../Label/Label.js');
+const StatusMessage_js_1 = require('../../StatusMessage/StatusMessage.js');
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
@@ -44,7 +44,7 @@ exports.InputContainer = React.forwardRef((props, forwardedRef) => {
     },
     label &&
       React.createElement(
-        index_js_1.Label,
+        Label_js_1.Label,
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         {
@@ -63,7 +63,7 @@ exports.InputContainer = React.forwardRef((props, forwardedRef) => {
       ? statusMessage
       : message &&
           React.createElement(
-            index_js_2.StatusMessage,
+            StatusMessage_js_1.StatusMessage,
             { startIcon: icon, status: status },
             message,
           ),

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

@@ -8,6 +8,7 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const react_transition_group_1 = require('react-transition-group');
+const styles_js_1 = tslib_1.__importDefault(require('../../../styles.js'));
 const WithCSSTransition = (props) => {
   const { in: visible, dimension = 'height', children, ...rest } = props;
   const expandedSize = React.useRef(0);
@@ -36,7 +37,12 @@ const WithCSSTransition = (props) => {
         node.style[`min${dimensionCamelCase}`] = 'initial';
         node.style[dimension] = '0px';
       },
-      classNames: 'iui',
+      classNames: {
+        enter: styles_js_1.default['iui-enter'],
+        enterActive: styles_js_1.default['iui-enter-active'],
+        exit: styles_js_1.default['iui-exit'],
+        exitActive: styles_js_1.default['iui-exit-active'],
+      },
       ...rest,
     },
     React.isValidElement(children)

package/cjs/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/cjs/core/utils/components/index.js

@@ -5,7 +5,6 @@ const tslib_1 = require('tslib');
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-tslib_1.__exportStar(require('./Popover.js'), exports);
 tslib_1.__exportStar(require('./Resizer.js'), exports);
 tslib_1.__exportStar(require('./FocusTrap.js'), exports);
 tslib_1.__exportStar(require('./InputContainer.js'), exports);
@@ -13,11 +12,6 @@ tslib_1.__exportStar(require('./InputFlexContainer.js'), exports);
 tslib_1.__exportStar(require('./WithCSSTransition.js'), exports);
 tslib_1.__exportStar(require('./MiddleTextTruncation.js'), exports);
 tslib_1.__exportStar(require('./VirtualScroll.js'), exports);
-tslib_1.__exportStar(require('./VisuallyHidden.js'), exports);
-tslib_1.__exportStar(require('./Icon.js'), exports);
-tslib_1.__exportStar(require('./Flex.js'), exports);
-tslib_1.__exportStar(require('./Divider.js'), exports);
-tslib_1.__exportStar(require('./LinkAction.js'), exports);
 tslib_1.__exportStar(require('./AutoclearingHiddenLiveRegion.js'), exports);
 tslib_1.__exportStar(require('./Box.js'), exports);
 tslib_1.__exportStar(require('./ButtonBase.js'), exports);

package/cjs/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/cjs/core/utils/functions/dev.js

@@ -0,0 +1,34 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.createWarningLogger = exports.isDev = exports.isJest = void 0;
+/*---------------------------------------------------------------------------------------------
+ * 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';
+exports.isJest = isJest;
+let isDev = false;
+exports.isDev = isDev;
+// wrapping in try-catch because process might be undefined
+try {
+  exports.isDev = 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;
+        }
+      };
+    };
+exports.createWarningLogger = createWarningLogger;

package/cjs/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/cjs/core/utils/functions/index.js

@@ -14,3 +14,4 @@ tslib_1.__exportStar(require('./supports.js'), exports);
 tslib_1.__exportStar(require('./polymorphic.js'), exports);
 tslib_1.__exportStar(require('./import.js'), exports);
 tslib_1.__exportStar(require('./react.js'), exports);
+tslib_1.__exportStar(require('./dev.js'), exports);

package/cjs/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/cjs/core/utils/hooks/useGlobals.js

@@ -8,11 +8,7 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const ThemeContext_js_1 = require('../../ThemeProvider/ThemeContext.js');
-let isDev = false;
-// wrapping in try-catch because process might be undefined
-try {
-  isDev = process.env.NODE_ENV !== 'production';
-} catch {}
+const dev_js_1 = require('../functions/dev.js');
 const didLogWarning = {
   fontSize: false,
   themeProvider: false,
@@ -34,7 +30,7 @@ exports.useGlobals = useGlobals;
 /** Shows console error if ThemeProvider is not used */
 const useThemeProviderWarning = (themeContext) => {
   React.useEffect(() => {
-    if (isDev && !didLogWarning.themeProvider && !themeContext) {
+    if (dev_js_1.isDev && !didLogWarning.themeProvider && !themeContext) {
       console.error(
         'iTwinUI components must be used within a tree wrapped in a ThemeProvider.',
       );
@@ -47,7 +43,7 @@ exports.useThemeProviderWarning = useThemeProviderWarning;
 /** Shows console error if the page changes the root font size */
 const useRootFontSizeWarning = () => {
   React.useEffect(() => {
-    if (isDev && !didLogWarning.fontSize) {
+    if (dev_js_1.isDev && !didLogWarning.fontSize) {
       const rootFontSize = parseInt(
         getComputedStyle(document.documentElement).fontSize,
       );

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

@@ -73,7 +73,9 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
     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}`],