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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/cjs/core/Buttons/DropdownButton/DropdownButton.d.ts +9 -0
  2. package/cjs/core/Buttons/DropdownButton/DropdownButton.js +10 -2
  3. package/cjs/core/DropdownMenu/DropdownMenu.d.ts +1 -1
  4. package/esm/core/Buttons/DropdownButton/DropdownButton.d.ts +9 -0
  5. package/esm/core/Buttons/DropdownButton/DropdownButton.js +10 -2
  6. package/esm/core/DropdownMenu/DropdownMenu.d.ts +1 -1
  7. package/package.json +3 -3
package/cjs/core/Buttons/DropdownButton/DropdownButton.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ButtonProps } from '../Button';
3
+ import { DropdownMenuProps } from '../../DropdownMenu';
3
4
  import '@itwin/itwinui-css/css/button.css';
4
5
  export declare type DropdownButtonProps = {
5
6
  /**
@@ -14,6 +15,10 @@ export declare type DropdownButtonProps = {
14
15
  * @default 'default'
15
16
  */
16
17
  styleType?: 'default' | 'borderless';
18
+ /**
19
+ * Props for the `DropdownMenu` which extends `PopoverProps`.
20
+ */
21
+ dropdownMenuProps?: Omit<DropdownMenuProps, 'menuItems' | 'children'>;
17
22
  } & Omit<ButtonProps, 'onClick' | 'styleType' | 'endIcon'>;
18
23
  /**
19
24
  * Button that opens a DropdownMenu.
@@ -37,5 +42,9 @@ export declare const DropdownButton: React.ForwardRefExoticComponent<{
37
42
  * @default 'default'
38
43
  */
39
44
  styleType?: "default" | "borderless" | undefined;
45
+ /**
46
+ * Props for the `DropdownMenu` which extends `PopoverProps`.
47
+ */
48
+ dropdownMenuProps?: Omit<DropdownMenuProps, "children" | "menuItems"> | undefined;
40
49
  } & Omit<ButtonProps<"button">, "onClick" | "styleType" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
41
50
  export default DropdownButton;
package/cjs/core/Buttons/DropdownButton/DropdownButton.js CHANGED
@@ -24,7 +24,7 @@ require("@itwin/itwinui-css/css/button.css");
24
24
  * <DropdownButton menuItems={menuItems}>Default</DropdownButton>
25
25
  */
26
26
  exports.DropdownButton = react_1.default.forwardRef((props, ref) => {
27
- const { menuItems, className, size, styleType, children, ...rest } = props;
27
+ const { menuItems, className, size, styleType, children, dropdownMenuProps, ...rest } = props;
28
28
  (0, utils_1.useTheme)();
29
29
  const [isMenuOpen, setIsMenuOpen] = react_1.default.useState(false);
30
30
  const [menuWidth, setMenuWidth] = react_1.default.useState(0);
@@ -35,7 +35,15 @@ exports.DropdownButton = react_1.default.forwardRef((props, ref) => {
35
35
  setMenuWidth(buttonRef.current.offsetWidth);
36
36
  }
37
37
  }, [children, size, styleType]);
38
- return (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: menuItems, style: { minWidth: menuWidth }, onShow: () => setIsMenuOpen(true), onHide: () => setIsMenuOpen(false) },
38
+ return (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: menuItems, ...dropdownMenuProps, onShow: (i) => {
39
+ var _a;
40
+ setIsMenuOpen(true);
41
+ (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onShow) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
42
+ }, onHide: (i) => {
43
+ var _a;
44
+ setIsMenuOpen(false);
45
+ (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
46
+ }, style: { minWidth: menuWidth, ...dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.style } },
39
47
  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)));
40
48
  });
41
49
  exports.default = exports.DropdownButton;
package/cjs/core/DropdownMenu/DropdownMenu.d.ts CHANGED
@@ -15,7 +15,7 @@ export declare type DropdownMenuProps = {
15
15
  * Child element to wrap dropdown with.
16
16
  */
17
17
  children: React.ReactNode;
18
- } & PopoverProps & Omit<CommonProps, 'title'>;
18
+ } & Omit<PopoverProps, 'content'> & Omit<CommonProps, 'title'>;
19
19
  /**
20
20
  * Dropdown menu component.
21
21
  * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
package/esm/core/Buttons/DropdownButton/DropdownButton.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ButtonProps } from '../Button';
3
+ import { DropdownMenuProps } from '../../DropdownMenu';
3
4
  import '@itwin/itwinui-css/css/button.css';
4
5
  export declare type DropdownButtonProps = {
5
6
  /**
@@ -14,6 +15,10 @@ export declare type DropdownButtonProps = {
14
15
  * @default 'default'
15
16
  */
16
17
  styleType?: 'default' | 'borderless';
18
+ /**
19
+ * Props for the `DropdownMenu` which extends `PopoverProps`.
20
+ */
21
+ dropdownMenuProps?: Omit<DropdownMenuProps, 'menuItems' | 'children'>;
17
22
  } & Omit<ButtonProps, 'onClick' | 'styleType' | 'endIcon'>;
18
23
  /**
19
24
  * Button that opens a DropdownMenu.
@@ -37,5 +42,9 @@ export declare const DropdownButton: React.ForwardRefExoticComponent<{
37
42
  * @default 'default'
38
43
  */
39
44
  styleType?: "default" | "borderless" | undefined;
45
+ /**
46
+ * Props for the `DropdownMenu` which extends `PopoverProps`.
47
+ */
48
+ dropdownMenuProps?: Omit<DropdownMenuProps, "children" | "menuItems"> | undefined;
40
49
  } & Omit<ButtonProps<"button">, "onClick" | "styleType" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
41
50
  export default DropdownButton;
package/esm/core/Buttons/DropdownButton/DropdownButton.js CHANGED
@@ -18,7 +18,7 @@ import '@itwin/itwinui-css/css/button.css';
18
18
  * <DropdownButton menuItems={menuItems}>Default</DropdownButton>
19
19
  */
20
20
  export const DropdownButton = React.forwardRef((props, ref) => {
21
- const { menuItems, className, size, styleType, children, ...rest } = props;
21
+ const { menuItems, className, size, styleType, children, dropdownMenuProps, ...rest } = props;
22
22
  useTheme();
23
23
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
24
24
  const [menuWidth, setMenuWidth] = React.useState(0);
@@ -29,7 +29,15 @@ export const DropdownButton = React.forwardRef((props, ref) => {
29
29
  setMenuWidth(buttonRef.current.offsetWidth);
30
30
  }
31
31
  }, [children, size, styleType]);
32
- return (React.createElement(DropdownMenu, { menuItems: menuItems, style: { minWidth: menuWidth }, onShow: () => setIsMenuOpen(true), onHide: () => setIsMenuOpen(false) },
32
+ return (React.createElement(DropdownMenu, { menuItems: menuItems, ...dropdownMenuProps, onShow: (i) => {
33
+ var _a;
34
+ setIsMenuOpen(true);
35
+ (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onShow) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
36
+ }, onHide: (i) => {
37
+ var _a;
38
+ setIsMenuOpen(false);
39
+ (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
40
+ }, style: { minWidth: menuWidth, ...dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.style } },
33
41
  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)));
34
42
  });
35
43
  export default DropdownButton;
package/esm/core/DropdownMenu/DropdownMenu.d.ts CHANGED
@@ -15,7 +15,7 @@ export declare type DropdownMenuProps = {
15
15
  * Child element to wrap dropdown with.
16
16
  */
17
17
  children: React.ReactNode;
18
- } & PopoverProps & Omit<CommonProps, 'title'>;
18
+ } & Omit<PopoverProps, 'content'> & Omit<CommonProps, 'title'>;
19
19
  /**
20
20
  * Dropdown menu component.
21
21
  * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-react",
3
- "version": "2.3.2-dev.0",
3
+ "version": "2.4.0-dev.0",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "cjs/index.js",
@@ -62,9 +62,9 @@
62
62
  "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\""
63
63
  },
64
64
  "dependencies": {
65
- "@itwin/itwinui-css": "1.4.1-dev.0",
65
+ "@itwin/itwinui-css": "1.5.0-dev.0",
66
66
  "@itwin/itwinui-illustrations-react": "^2.0.0",
67
- "@itwin/itwinui-variables": "^1.0.0",
67
+ "@itwin/itwinui-variables": "2.0.0-dev.0",
68
68
  "@tippyjs/react": "^4.2.6",
69
69
  "@types/react-table": "^7.0.18",
70
70
  "classnames": "^2.2.6",