@itwin/itwinui-react 3.13.3 → 3.14.0

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

@@ -207,7 +207,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      *    <Tile.BadgeContainer/>
      * </Tile.ThumbnailArea>
      */
-    ThumbnailArea: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    ThumbnailArea: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Thumbnail image url, a custom component or an svg for thumbnail avatar.
      * @example
@@ -234,26 +234,27 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      * `QuickAction` subcomponent shown on top left of the tile.
      * Recommended to use an invisible `IconButton`.
      */
-    QuickAction: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    QuickAction: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * `TypeIndicator` subcomponent shown on top left of the tile.
      * Recommended to use an invisible `IconButton`.
      */
-    TypeIndicator: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    TypeIndicator: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * `BadgeContainer` subcomponent shown on the bottom right of thumbnail.
      */
-    BadgeContainer: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    BadgeContainer: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * `IconButton` subcomponent: custom icon for `QuickAction` and `TypeIndicator` buttons.
      */
     IconButton: PolymorphicForwardRefComponent<"button", Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean;
         label?: React.ReactNode;
         labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
         iconProps?: React.ComponentProps<"span">;
+        title?: string;
     } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }, "ref">>;
@@ -294,12 +295,12 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      *  </Tile.ContentArea>
      * </Tile.Wrapper>
      */
-    ContentArea: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    ContentArea: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Description text of the tile.
      * Gets truncated if it can't fit in the tile.
      */
-    Description: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Description: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Metadata section located below description.
      * @example
@@ -315,7 +316,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      *  </>}
      * </Tile.Metadata>
      */
-    Metadata: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Metadata: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Dropdown menu containing `MenuItem`s.
      */
@@ -323,6 +324,6 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
     /**
      * Upto two buttons shown at the bottom of the tile.
      */
-    Buttons: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Buttons: PolymorphicForwardRefComponent<"div", {}>;
 };
 export {};

package/esm/core/Tile/Tile.js

@@ -80,7 +80,7 @@ let TileAction = React.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-let TileThumbnailArea = polymorphic('iui-tile-thumbnail');
+let TileThumbnailArea = polymorphic.div('iui-tile-thumbnail');
 let TileThumbnailPicture = React.forwardRef((props, forwardedRef) => {
   let { className, url, children, ...rest } = props;
   if (url)
@@ -102,8 +102,8 @@ let TileThumbnailPicture = React.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-let TileQuickAction = polymorphic('iui-tile-thumbnail-quick-action');
-let TileTypeIndicator = polymorphic('iui-tile-thumbnail-type-indicator');
+let TileQuickAction = polymorphic.div('iui-tile-thumbnail-quick-action');
+let TileTypeIndicator = polymorphic.div('iui-tile-thumbnail-type-indicator');
 let TileIconButton = React.forwardRef((props, forwardedRef) => {
   let { className, children, ...rest } = props;
   return React.createElement(
@@ -118,7 +118,7 @@ let TileIconButton = React.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-let TileBadgeContainer = polymorphic('iui-tile-thumbnail-badge-container');
+let TileBadgeContainer = polymorphic.div('iui-tile-thumbnail-badge-container');
 let TileName = React.forwardRef((props, forwardedRef) => {
   let { className, children, name, ...rest } = props;
   return React.createElement(
@@ -167,9 +167,9 @@ let TileNameIcon = React.forwardRef((props, forwardedRef) => {
     : null;
 });
 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 TileContentArea = polymorphic.div('iui-tile-content');
+let TileDescription = polymorphic.div('iui-tile-description');
+let TileMetadata = polymorphic.div('iui-tile-metadata');
 let TileMoreOptions = React.forwardRef((props, forwardedRef) => {
   let { className, children = [], buttonProps, ...rest } = props;
   let [isMenuVisible, setIsMenuVisible] = React.useState(false);
@@ -213,7 +213,7 @@ let TileMoreOptions = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-let TileButtons = polymorphic('iui-tile-buttons');
+let TileButtons = polymorphic.div('iui-tile-buttons');
 let TileComponent = React.forwardRef((props, forwardedRef) => {
   let {
     name,

package/esm/core/Toast/Toaster.d.ts

@@ -35,9 +35,10 @@ export declare const useToaster: () => {
     setSettings: (settings: Partial<ToasterSettings>) => void;
 };
 export declare const Toaster: () => React.JSX.Element;
-export declare const ToastProvider: ({ children }: {
+export declare const ToastProvider: ({ children, inherit, }: {
     children: React.ReactNode;
-}) => React.JSX.Element;
+    inherit?: boolean;
+}) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
 export declare const ToasterStateContext: React.Context<ToasterState | undefined>;
 type ToasterState = {
     toasts: ToastProps[];

package/esm/core/Toast/Toaster.js

@@ -58,7 +58,7 @@ export const Toaster = () => {
     ),
   );
 };
-export const ToastProvider = ({ children }) => {
+export const ToastProvider = ({ children, inherit = false }) => {
   let [toasterState, dispatch] = React.useReducer(toastReducer, {
     toasts: [],
     settings: {
@@ -66,6 +66,7 @@ export const ToastProvider = ({ children }) => {
       placement: 'top',
     },
   });
+  if (React.useContext(ToasterStateContext) && inherit) return children;
   return React.createElement(
     ToasterDispatchContext.Provider,
     {

package/esm/core/Tooltip/Tooltip.js

@@ -15,7 +15,6 @@ import {
   autoPlacement,
   hide,
   inline,
-  useDelayGroupContext,
   useDelayGroup,
 } from '@floating-ui/react';
 import {
@@ -61,6 +60,7 @@ let useTooltip = (options = {}) => {
     placement,
     open,
     onOpenChange,
+    strategy: 'fixed',
     whileElementsMounted: React.useMemo(
       () =>
         open ? (...args) => autoUpdate(...args, autoUpdateOptions) : void 0,
@@ -70,12 +70,27 @@ let useTooltip = (options = {}) => {
       () =>
         [
           void 0 !== middleware.offset ? offset(middleware.offset) : offset(4),
-          middleware.flip && flip(),
-          middleware.shift && shift(),
-          middleware.size && size(),
-          middleware.autoPlacement && autoPlacement(),
+          middleware.flip &&
+            flip({
+              padding: 4,
+            }),
+          middleware.shift &&
+            shift({
+              padding: 4,
+            }),
+          middleware.size &&
+            size({
+              padding: 4,
+            }),
+          middleware.autoPlacement &&
+            autoPlacement({
+              padding: 4,
+            }),
           middleware.inline && inline(),
-          middleware.hide && hide(),
+          middleware.hide &&
+            hide({
+              padding: 4,
+            }),
         ].filter(Boolean),
       [middleware],
     ),
@@ -98,8 +113,7 @@ let useTooltip = (options = {}) => {
           : {},
     [ariaStrategy, id],
   );
-  let { delay } = useDelayGroupContext();
-  useDelayGroup(floating.context, {
+  let { delay } = useDelayGroup(floating.context, {
     id: useId(),
   });
   let interactions = useInteractions([

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

@@ -30,7 +30,7 @@ type TransferListListboxLabelOwnProps = {
  *   </TransferList.ListboxWrapper>
  * </TransferList>
  */
-export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}> & {
+export declare const TransferList: PolymorphicForwardRefComponent<"div", {}> & {
     /**
      * 	TransferList listbox wrapper subcomponent
      */
@@ -38,10 +38,10 @@ export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.Intr
     /**
      * 	TransferList listbox subcomponent
      */
-    Listbox: PolymorphicForwardRefComponent<"ul", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
-        ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
+    Listbox: PolymorphicForwardRefComponent<"ul", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
     }, "as"> & {
-        as?: "ul" | undefined;
+        as?: "div" | undefined;
     }>;
     /**
      * 	TransferList item subcomponent
@@ -54,7 +54,7 @@ export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.Intr
     /**
      * 	TransferList toolbar subcomponent
      */
-    Toolbar: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Toolbar: PolymorphicForwardRefComponent<"div", {}>;
 };
 export declare const TransferListContext: React.Context<{
     /**

package/esm/core/TransferList/TransferList.js

@@ -11,7 +11,7 @@ import {
 import { List } from '../List/List.js';
 import { ListItem } from '../List/ListItem.js';
 import { Label } from '../Label/Label.js';
-let TransferListComponent = polymorphic('iui-transfer-list-wrapper');
+let TransferListComponent = polymorphic.div('iui-transfer-list-wrapper');
 let TransferListListboxWrapper = React.forwardRef((props, ref) => {
   let { className, children, ...rest } = props;
   let uid = useId();
@@ -147,7 +147,7 @@ let TransferListListboxLabel = React.forwardRef((props, ref) => {
     children,
   );
 });
-let TransferListToolbar = polymorphic('iui-transfer-list-toolbar', {
+let TransferListToolbar = polymorphic.div('iui-transfer-list-toolbar', {
   role: 'toolbar',
 });
 export const TransferList = Object.assign(TransferListComponent, {

package/esm/core/Tree/Tree.js

@@ -120,7 +120,8 @@ export const Tree = (props) => {
               'data-iui-virtualizer': 'item',
               ref: virtualizer.measureElement,
               style: {
-                width: '100%',
+                ...children.props.style,
+                '--_iui-width': '100%',
                 transform: `translateY(${virtualItem.start}px)`,
               },
             }))

package/esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.13.3';
+const t = '3.14.0';
 const u = new Proxy(
   {},
   {

package/esm/utils/functions/polymorphic.d.ts

@@ -3,8 +3,8 @@ declare const _base: <As extends keyof JSX.IntrinsicElements = "div">(defaultEle
 /**
  * Utility to create a type-safe polymorphic component with a simple class.
  *
- * Can be called directly or as a property of the `polymorphic` object.
- * In both cases, returns a component that:
+ * Should be called as a property of the `polymorphic` object.
+ * Returns a component that:
  * - uses CSS-modules scoped classes
  * - supports `as` prop with default element
  * - forwards ref and spreads rest props
@@ -12,14 +12,10 @@ declare const _base: <As extends keyof JSX.IntrinsicElements = "div">(defaultEle
  * - adds tabIndex to interactive elements (Safari workaround)
  *
  * @example
- * const MyPolyDiv = polymorphic('my-poly-div');
- * <MyPolyDiv>...</MyPolyDiv>;
- *
- * @example
  * const MyPolyButton = polymorphic.button('my-poly-button', { type: 'button' });
  * <MyPolyButton as='a' href='#'>...</MyPolyButton>;
  *
  * @private
  */
-export declare const polymorphic: ReturnType<typeof _base> & { [key in keyof JSX.IntrinsicElements]: ReturnType<typeof _base<key>>; };
+export declare const polymorphic: { [key in keyof JSX.IntrinsicElements]: ReturnType<typeof _base<key>>; };
 export {};

package/esm/utils/functions/polymorphic.js

@@ -28,12 +28,15 @@ let _base = (defaultElement) => (className, attrs) => {
   });
   return Comp;
 };
-export const polymorphic = new Proxy(_base('div'), {
-  get: (target, prop) => {
-    if ('string' == typeof prop) return _base(prop);
-    return Reflect.get(target, prop);
+export const polymorphic = new Proxy(
+  {},
+  {
+    get: (target, prop) => {
+      if ('string' == typeof prop) return _base(prop);
+      return Reflect.get(target, prop);
+    },
   },
-});
+);
 let getDisplayNameFromClass = (str) => {
   let camel = str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
   return camel.substring(3);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.13.3",
+  "version": "3.14.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -79,7 +79,7 @@
     "ux"
   ],
   "dependencies": {
-    "@floating-ui/react": "^0.26.18",
+    "@floating-ui/react": "^0.26.23",
     "@itwin/itwinui-illustrations-react": "^2.1.0",
     "@swc/helpers": "^0.5.11",
     "@tanstack/react-virtual": "^3.8.2",
@@ -140,7 +140,7 @@
     "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write",
     "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0",
     "lint:fix": "pnpm lint --fix && node ../../scripts/copyrightLinter.js --fix \"*/**/*.{js,ts,tsx}\"",
-    "dev": "pnpm clean:build && concurrently \"pnpm dev:esm\" \"pnpm dev:cjs\" \"pnpm build:styles --watch\" \"pnpm dev:types\"",
+    "dev": "pnpm clean:build && concurrently \"pnpm dev:esm\" \"pnpm dev:cjs\" \"pnpm dev:styles\" \"pnpm dev:types\"",
     "dev:esm": "swc src -d esm --watch --strip-leading-paths",
     "dev:cjs": "swc src -d cjs --watch --strip-leading-paths -C module.type=commonjs",
     "dev:types": "concurrently \"tsc -p tsconfig.build.json --outDir esm --watch --preserveWatchOutput\" \"tsc -p tsconfig.build.json --outDir cjs --watch --preserveWatchOutput\"",