@itwin/itwinui-react 2.3.1-dev.0 → 2.4.0-dev.0

package/cjs/core/Buttons/DropdownButton/DropdownButton.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ButtonProps } from '../Button';
+import { DropdownMenuProps } from '../../DropdownMenu';
 import '@itwin/itwinui-css/css/button.css';
 export declare type DropdownButtonProps = {
     /**
@@ -14,6 +15,10 @@ export declare type DropdownButtonProps = {
      * @default 'default'
      */
     styleType?: 'default' | 'borderless';
+    /**
+     * Props for the `DropdownMenu` which extends `PopoverProps`.
+     */
+    dropdownMenuProps?: Omit<DropdownMenuProps, 'menuItems' | 'children'>;
 } & Omit<ButtonProps, 'onClick' | 'styleType' | 'endIcon'>;
 /**
  * Button that opens a DropdownMenu.
@@ -37,5 +42,9 @@ export declare const DropdownButton: React.ForwardRefExoticComponent<{
      * @default 'default'
      */
     styleType?: "default" | "borderless" | undefined;
+    /**
+     * Props for the `DropdownMenu` which extends `PopoverProps`.
+     */
+    dropdownMenuProps?: Omit<DropdownMenuProps, "children" | "menuItems"> | undefined;
 } & Omit<ButtonProps<"button">, "onClick" | "styleType" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
 export default DropdownButton;

package/cjs/core/Buttons/DropdownButton/DropdownButton.js

@@ -24,7 +24,7 @@ require("@itwin/itwinui-css/css/button.css");
  * <DropdownButton menuItems={menuItems}>Default</DropdownButton>
  */
 exports.DropdownButton = react_1.default.forwardRef((props, ref) => {
-    const { menuItems, className, size, styleType, children, ...rest } = props;
+    const { menuItems, className, size, styleType, children, dropdownMenuProps, ...rest } = props;
     (0, utils_1.useTheme)();
     const [isMenuOpen, setIsMenuOpen] = react_1.default.useState(false);
     const [menuWidth, setMenuWidth] = react_1.default.useState(0);
@@ -35,7 +35,15 @@ exports.DropdownButton = react_1.default.forwardRef((props, ref) => {
             setMenuWidth(buttonRef.current.offsetWidth);
         }
     }, [children, size, styleType]);
-    return (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: menuItems, style: { minWidth: menuWidth }, onShow: () => setIsMenuOpen(true), onHide: () => setIsMenuOpen(false) },
+    return (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: menuItems, ...dropdownMenuProps, onShow: (i) => {
+            var _a;
+            setIsMenuOpen(true);
+            (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onShow) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+        }, onHide: (i) => {
+            var _a;
+            setIsMenuOpen(false);
+            (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+        }, style: { minWidth: menuWidth, ...dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.style } },
         react_1.default.createElement(Button_1.Button, { className: (0, classnames_1.default)('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (react_1.default.createElement(utils_1.SvgCaretUpSmall, { "aria-hidden": true })) : (react_1.default.createElement(utils_1.SvgCaretDownSmall, { "aria-hidden": true })), ref: refs, "aria-label": 'Dropdown', ...rest }, children)));
 });
 exports.default = exports.DropdownButton;

package/cjs/core/DropdownMenu/DropdownMenu.d.ts

@@ -15,7 +15,7 @@ export declare type DropdownMenuProps = {
      * Child element to wrap dropdown with.
      */
     children: React.ReactNode;
-} & PopoverProps & Omit<CommonProps, 'title'>;
+} & Omit<PopoverProps, 'content'> & Omit<CommonProps, 'title'>;
 /**
  * Dropdown menu component.
  * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).

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

@@ -27,22 +27,22 @@ export default class Toaster {
      * Set global Toaster settings for toasts order and placement.
      * Settings will be applied to new toasts on the page.
      */
-    setSettings(newSettings: ToasterSettings): Promise<void>;
+    setSettings(newSettings: ToasterSettings): void;
     positive(content: React.ReactNode, options?: ToastOptions): {
-        close: () => Promise<void>;
+        close: () => void;
     };
     informational(content: React.ReactNode, options?: ToastOptions): {
-        close: () => Promise<void>;
+        close: () => void;
     };
     negative(content: React.ReactNode, options?: ToastOptions): {
-        close: () => Promise<void>;
+        close: () => void;
     };
     warning(content: React.ReactNode, options?: ToastOptions): {
-        close: () => Promise<void>;
+        close: () => void;
     };
     private createToast;
     private removeToast;
     private updateView;
     private closeToast;
-    closeAll(): Promise<void>;
+    closeAll(): void;
 }

package/cjs/core/Toast/Toaster.js

@@ -83,14 +83,14 @@ class Toaster {
      * Set global Toaster settings for toasts order and placement.
      * Settings will be applied to new toasts on the page.
      */
-    async setSettings(newSettings) {
+    setSettings(newSettings) {
         var _a, _b, _c;
         (_a = newSettings.placement) !== null && _a !== void 0 ? _a : (newSettings.placement = this.settings.placement);
         (_b = newSettings.order) !== null && _b !== void 0 ? _b : (newSettings.order = ((_c = newSettings.placement) === null || _c === void 0 ? void 0 : _c.startsWith('bottom'))
             ? 'ascending'
             : 'descending');
         this.settings = newSettings;
-        await this.asyncInit().then(() => {
+        this.asyncInit().then(() => {
             var _a, _b;
             (_a = this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setPlacement((_b = this.settings.placement) !== null && _b !== void 0 ? _b : 'top');
         });
@@ -126,37 +126,36 @@ class Toaster {
             },
             ...(this.settings.order === 'descending' ? this.toasts : []),
         ];
-        // cannot `await` this, for backwards compat with the return value
         this.updateView();
         return { close: () => this.closeToast(currentId) };
     }
-    async removeToast(id) {
+    removeToast(id) {
         this.toasts = this.toasts.filter((toast) => toast.id !== id);
         this.updateView();
     }
-    async updateView() {
-        await this.asyncInit().then(() => {
+    updateView() {
+        this.asyncInit().then(() => {
             var _a;
             (_a = this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setToasts(this.toasts);
         });
     }
-    async closeToast(toastId) {
+    closeToast(toastId) {
         this.toasts = this.toasts.map((toast) => {
             return {
                 ...toast,
                 isVisible: toast.id !== toastId,
             };
         });
-        await this.updateView();
+        this.updateView();
     }
-    async closeAll() {
+    closeAll() {
         this.toasts = this.toasts.map((toast) => {
             return {
                 ...toast,
                 isVisible: false,
             };
         });
-        await this.updateView();
+        this.updateView();
     }
 }
 exports.default = Toaster;

package/esm/core/Buttons/DropdownButton/DropdownButton.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ButtonProps } from '../Button';
+import { DropdownMenuProps } from '../../DropdownMenu';
 import '@itwin/itwinui-css/css/button.css';
 export declare type DropdownButtonProps = {
     /**
@@ -14,6 +15,10 @@ export declare type DropdownButtonProps = {
      * @default 'default'
      */
     styleType?: 'default' | 'borderless';
+    /**
+     * Props for the `DropdownMenu` which extends `PopoverProps`.
+     */
+    dropdownMenuProps?: Omit<DropdownMenuProps, 'menuItems' | 'children'>;
 } & Omit<ButtonProps, 'onClick' | 'styleType' | 'endIcon'>;
 /**
  * Button that opens a DropdownMenu.
@@ -37,5 +42,9 @@ export declare const DropdownButton: React.ForwardRefExoticComponent<{
      * @default 'default'
      */
     styleType?: "default" | "borderless" | undefined;
+    /**
+     * Props for the `DropdownMenu` which extends `PopoverProps`.
+     */
+    dropdownMenuProps?: Omit<DropdownMenuProps, "children" | "menuItems"> | undefined;
 } & Omit<ButtonProps<"button">, "onClick" | "styleType" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
 export default DropdownButton;

package/esm/core/Buttons/DropdownButton/DropdownButton.js

@@ -18,7 +18,7 @@ import '@itwin/itwinui-css/css/button.css';
  * <DropdownButton menuItems={menuItems}>Default</DropdownButton>
  */
 export const DropdownButton = React.forwardRef((props, ref) => {
-    const { menuItems, className, size, styleType, children, ...rest } = props;
+    const { menuItems, className, size, styleType, children, dropdownMenuProps, ...rest } = props;
     useTheme();
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
     const [menuWidth, setMenuWidth] = React.useState(0);
@@ -29,7 +29,15 @@ export const DropdownButton = React.forwardRef((props, ref) => {
             setMenuWidth(buttonRef.current.offsetWidth);
         }
     }, [children, size, styleType]);
-    return (React.createElement(DropdownMenu, { menuItems: menuItems, style: { minWidth: menuWidth }, onShow: () => setIsMenuOpen(true), onHide: () => setIsMenuOpen(false) },
+    return (React.createElement(DropdownMenu, { menuItems: menuItems, ...dropdownMenuProps, onShow: (i) => {
+            var _a;
+            setIsMenuOpen(true);
+            (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onShow) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+        }, onHide: (i) => {
+            var _a;
+            setIsMenuOpen(false);
+            (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+        }, style: { minWidth: menuWidth, ...dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.style } },
         React.createElement(Button, { className: cx('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (React.createElement(SvgCaretUpSmall, { "aria-hidden": true })) : (React.createElement(SvgCaretDownSmall, { "aria-hidden": true })), ref: refs, "aria-label": 'Dropdown', ...rest }, children)));
 });
 export default DropdownButton;

package/esm/core/DropdownMenu/DropdownMenu.d.ts

@@ -15,7 +15,7 @@ export declare type DropdownMenuProps = {
      * Child element to wrap dropdown with.
      */
     children: React.ReactNode;
-} & PopoverProps & Omit<CommonProps, 'title'>;
+} & Omit<PopoverProps, 'content'> & Omit<CommonProps, 'title'>;
 /**
  * Dropdown menu component.
  * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).

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

@@ -27,22 +27,22 @@ export default class Toaster {
      * Set global Toaster settings for toasts order and placement.
      * Settings will be applied to new toasts on the page.
      */
-    setSettings(newSettings: ToasterSettings): Promise<void>;
+    setSettings(newSettings: ToasterSettings): void;
     positive(content: React.ReactNode, options?: ToastOptions): {
-        close: () => Promise<void>;
+        close: () => void;
     };
     informational(content: React.ReactNode, options?: ToastOptions): {
-        close: () => Promise<void>;
+        close: () => void;
     };
     negative(content: React.ReactNode, options?: ToastOptions): {
-        close: () => Promise<void>;
+        close: () => void;
     };
     warning(content: React.ReactNode, options?: ToastOptions): {
-        close: () => Promise<void>;
+        close: () => void;
     };
     private createToast;
     private removeToast;
     private updateView;
     private closeToast;
-    closeAll(): Promise<void>;
+    closeAll(): void;
 }

package/esm/core/Toast/Toaster.js

@@ -55,14 +55,14 @@ export default class Toaster {
      * Set global Toaster settings for toasts order and placement.
      * Settings will be applied to new toasts on the page.
      */
-    async setSettings(newSettings) {
+    setSettings(newSettings) {
         var _a, _b, _c;
         (_a = newSettings.placement) !== null && _a !== void 0 ? _a : (newSettings.placement = this.settings.placement);
         (_b = newSettings.order) !== null && _b !== void 0 ? _b : (newSettings.order = ((_c = newSettings.placement) === null || _c === void 0 ? void 0 : _c.startsWith('bottom'))
             ? 'ascending'
             : 'descending');
         this.settings = newSettings;
-        await this.asyncInit().then(() => {
+        this.asyncInit().then(() => {
             var _a, _b;
             (_a = this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setPlacement((_b = this.settings.placement) !== null && _b !== void 0 ? _b : 'top');
         });
@@ -98,36 +98,35 @@ export default class Toaster {
             },
             ...(this.settings.order === 'descending' ? this.toasts : []),
         ];
-        // cannot `await` this, for backwards compat with the return value
         this.updateView();
         return { close: () => this.closeToast(currentId) };
     }
-    async removeToast(id) {
+    removeToast(id) {
         this.toasts = this.toasts.filter((toast) => toast.id !== id);
         this.updateView();
     }
-    async updateView() {
-        await this.asyncInit().then(() => {
+    updateView() {
+        this.asyncInit().then(() => {
             var _a;
             (_a = this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setToasts(this.toasts);
         });
     }
-    async closeToast(toastId) {
+    closeToast(toastId) {
         this.toasts = this.toasts.map((toast) => {
             return {
                 ...toast,
                 isVisible: toast.id !== toastId,
             };
         });
-        await this.updateView();
+        this.updateView();
     }
-    async closeAll() {
+    closeAll() {
         this.toasts = this.toasts.map((toast) => {
             return {
                 ...toast,
                 isVisible: false,
             };
         });
-        await this.updateView();
+        this.updateView();
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.3.1-dev.0",
+  "version": "2.4.0-dev.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -62,9 +62,9 @@
     "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\""
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^1.4.0",
+    "@itwin/itwinui-css": "1.5.0-dev.0",
     "@itwin/itwinui-illustrations-react": "^2.0.0",
-    "@itwin/itwinui-variables": "^1.0.0",
+    "@itwin/itwinui-variables": "2.0.0-dev.0",
     "@tippyjs/react": "^4.2.6",
     "@types/react-table": "^7.0.18",
     "classnames": "^2.2.6",