@blocknote/mantine 0.24.1 → 0.25.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.
@@ -1 +1 @@
1
- {"builtAt":1740045312160,"assets":[{"name":"blocknote-mantine.umd.cjs","size":17000},{"name":"blocknote-mantine.umd.cjs.map","size":295396}],"chunks":[{"id":"ec22802","entry":true,"initial":true,"files":["blocknote-mantine.umd.cjs"],"names":["index"]}],"modules":[{"name":"./src/BlockNoteTheme.ts","size":2185,"chunks":["ec22802"]},{"name":"./src/form/TextInput.tsx","size":575,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/lib/iconContext.mjs","size":251,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/lib/iconBase.mjs","size":4014,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/hi/index.mjs","size":744,"chunks":["ec22802"]},{"name":"./src/menu/Menu.tsx","size":4215,"chunks":["ec22802"]},{"name":"./src/panel/Panel.tsx","size":1015,"chunks":["ec22802"]},{"name":"./src/panel/PanelButton.tsx","size":345,"chunks":["ec22802"]},{"name":"./src/panel/PanelFileInput.tsx","size":367,"chunks":["ec22802"]},{"name":"./src/panel/PanelTab.tsx","size":209,"chunks":["ec22802"]},{"name":"./src/panel/PanelTextInput.tsx","size":392,"chunks":["ec22802"]},{"name":"./src/popover/Popover.tsx","size":679,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenu.tsx","size":309,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenuButton.tsx","size":773,"chunks":["ec22802"]},{"name":"./src/style.css","size":0,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx","size":361,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx","size":436,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx","size":855,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.tsx","size":385,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenu.tsx","size":307,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuEmptyItem.tsx","size":338,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuItem.tsx","size":1822,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLabel.tsx","size":227,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLoader.tsx","size":283,"chunks":["ec22802"]},{"name":"./src/tableHandle/ExtendButton.tsx","size":333,"chunks":["ec22802"]},{"name":"./src/tableHandle/TableHandle.tsx","size":452,"chunks":["ec22802"]},{"name":"./src/toolbar/Toolbar.tsx","size":562,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarButton.tsx","size":2229,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarSelect.tsx","size":1785,"chunks":["ec22802"]},{"name":"./src/components.tsx","size":1311,"chunks":["ec22802"]},{"name":"./src/BlockNoteView.tsx","size":1459,"chunks":["ec22802"]},{"name":"./src/defaultThemes.ts","size":2023,"chunks":["ec22802"]},{"name":"./src/index.tsx","size":0,"chunks":["ec22802"]}]}
1
+ {"builtAt":1741102176573,"assets":[{"name":"blocknote-mantine.cjs","size":19856},{"name":"blocknote-mantine.cjs.map","size":309673}],"chunks":[{"id":"ec22802","entry":true,"initial":true,"files":["blocknote-mantine.cjs"],"names":["blocknote-mantine"]}],"modules":[{"name":"./src/BlockNoteTheme.ts","size":2185,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarButton.tsx","size":2674,"chunks":["ec22802"]},{"name":"./src/badge/Badge.tsx","size":1437,"chunks":["ec22802"]},{"name":"./src/comments/Card.tsx","size":478,"chunks":["ec22802"]},{"name":"./src/comments/Comment.tsx","size":2000,"chunks":["ec22802"]},{"name":"./src/comments/Editor.tsx","size":960,"chunks":["ec22802"]},{"name":"./src/form/TextInput.tsx","size":575,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/lib/iconContext.mjs","size":251,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/lib/iconBase.mjs","size":4014,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/hi/index.mjs","size":744,"chunks":["ec22802"]},{"name":"./src/menu/Menu.tsx","size":4095,"chunks":["ec22802"]},{"name":"./src/menu/Button.tsx","size":765,"chunks":["ec22802"]},{"name":"./src/panel/Panel.tsx","size":1015,"chunks":["ec22802"]},{"name":"./src/panel/PanelButton.tsx","size":345,"chunks":["ec22802"]},{"name":"./src/panel/PanelFileInput.tsx","size":367,"chunks":["ec22802"]},{"name":"./src/panel/PanelTab.tsx","size":209,"chunks":["ec22802"]},{"name":"./src/panel/PanelTextInput.tsx","size":392,"chunks":["ec22802"]},{"name":"./src/popover/Popover.tsx","size":679,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenu.tsx","size":309,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenuButton.tsx","size":773,"chunks":["ec22802"]},{"name":"./src/style.css","size":0,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenu.tsx","size":307,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuEmptyItem.tsx","size":338,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuItem.tsx","size":1822,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLabel.tsx","size":227,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLoader.tsx","size":283,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx","size":361,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx","size":436,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx","size":855,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.tsx","size":385,"chunks":["ec22802"]},{"name":"./src/tableHandle/ExtendButton.tsx","size":333,"chunks":["ec22802"]},{"name":"./src/tableHandle/TableHandle.tsx","size":452,"chunks":["ec22802"]},{"name":"./src/toolbar/Toolbar.tsx","size":666,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarSelect.tsx","size":1785,"chunks":["ec22802"]},{"name":"./src/components.tsx","size":1458,"chunks":["ec22802"]},{"name":"./src/BlockNoteView.tsx","size":1638,"chunks":["ec22802"]},{"name":"./src/defaultThemes.ts","size":2023,"chunks":["ec22802"]},{"name":"./src/index.tsx","size":0,"chunks":["ec22802"]}]}
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "*.css"
7
7
  ],
8
8
  "license": "MPL-2.0",
9
- "version": "0.24.1",
9
+ "version": "0.25.0",
10
10
  "files": [
11
11
  "dist",
12
12
  "types",
@@ -29,13 +29,13 @@
29
29
  "type": "module",
30
30
  "source": "src/index.tsx",
31
31
  "types": "./types/src/index.d.ts",
32
- "main": "./dist/blocknote-mantine.umd.cjs",
32
+ "main": "./dist/blocknote-mantine.cjs",
33
33
  "module": "./dist/blocknote-mantine.js",
34
34
  "exports": {
35
35
  ".": {
36
36
  "types": "./types/src/index.d.ts",
37
37
  "import": "./dist/blocknote-mantine.js",
38
- "require": "./dist/blocknote-mantine.umd.cjs"
38
+ "require": "./dist/blocknote-mantine.cjs"
39
39
  },
40
40
  "./style.css": {
41
41
  "import": "./dist/style.css",
@@ -50,8 +50,8 @@
50
50
  "clean": "rimraf dist && rimraf types"
51
51
  },
52
52
  "dependencies": {
53
- "@blocknote/core": "^0.24.1",
54
- "@blocknote/react": "^0.24.1",
53
+ "@blocknote/core": "^0.25.0",
54
+ "@blocknote/react": "^0.25.0",
55
55
  "@mantine/core": "^7.10.1",
56
56
  "@mantine/hooks": "^7.10.1",
57
57
  "@mantine/utils": "^6.0.21",
@@ -83,5 +83,5 @@
83
83
  "access": "public",
84
84
  "registry": "https://registry.npmjs.org/"
85
85
  },
86
- "gitHead": "a1479b8fb4bc872617b5eb3dcf3074aa99c01fb4"
86
+ "gitHead": "2e7e03a8e9ccdb4a169c7436d48205e04021db97"
87
87
  }
@@ -74,18 +74,27 @@ export const BlockNoteView = <
74
74
  [defaultColorScheme, theme]
75
75
  );
76
76
 
77
+ const finalTheme =
78
+ typeof theme === "string"
79
+ ? theme
80
+ : defaultColorScheme !== "no-preference"
81
+ ? defaultColorScheme
82
+ : "light";
83
+
77
84
  return (
78
85
  <ComponentsContext.Provider value={components}>
79
- {/* `cssVariablesSelector` scopes Mantine CSS variables to only the editor, */}
80
- {/* as proposed here: https://github.com/orgs/mantinedev/discussions/5685 */}
81
86
  <MantineProvider
82
87
  theme={mantineTheme}
88
+ // Scopes Mantine CSS variables to only the editor, as proposed here:
89
+ // https://github.com/orgs/mantinedev/discussions/5685
83
90
  cssVariablesSelector=".bn-mantine"
84
- // This gets the element to set `data-mantine-color-scheme` on. Since we
85
- // don't need this attribute (we use our own theming API), we return
86
- // undefined here.
91
+ // This gets the element to set `data-mantine-color-scheme` on. This
92
+ // element needs to already be rendered, so we can't set it to the
93
+ // editor container element. Instead, we set it to `undefined` and set it
94
+ // manually in `BlockNoteViewRaw`.
87
95
  getRootElement={() => undefined}>
88
96
  <BlockNoteViewRaw
97
+ data-mantine-color-scheme={finalTheme}
89
98
  className={mergeCSSClasses("bn-mantine", className || "")}
90
99
  theme={typeof theme === "object" ? undefined : theme}
91
100
  {...rest}
@@ -0,0 +1,87 @@
1
+ import {
2
+ Chip as MantineChip,
3
+ Group as MantineGroup,
4
+ Tooltip as MantineTooltip,
5
+ } from "@mantine/core";
6
+
7
+ import { assertEmpty } from "@blocknote/core";
8
+ import { ComponentProps } from "@blocknote/react";
9
+ import { MouseEvent, forwardRef, useState } from "react";
10
+
11
+ import { TooltipContent } from "../toolbar/ToolbarButton.js";
12
+
13
+ export const Badge = forwardRef<
14
+ HTMLInputElement,
15
+ ComponentProps["Generic"]["Badge"]["Root"]
16
+ >((props, ref) => {
17
+ const {
18
+ className,
19
+ text,
20
+ icon,
21
+ isSelected,
22
+ mainTooltip,
23
+ secondaryTooltip,
24
+ onClick,
25
+ onMouseEnter,
26
+ ...rest
27
+ } = props;
28
+
29
+ // false, because rest props can be added by mantine when chip is used as a trigger
30
+ // assertEmpty in this case is only used at typescript level, not runtime level
31
+ assertEmpty(rest, false);
32
+
33
+ const [hideTooltip, setHideTooltip] = useState(false);
34
+
35
+ const badge = (
36
+ <MantineChip
37
+ className={className}
38
+ checked={isSelected === true}
39
+ wrapperProps={{
40
+ onMouseEnter,
41
+ onMouseLeave: () => setHideTooltip(false),
42
+ onClick: (event: MouseEvent) => {
43
+ setHideTooltip(true);
44
+ onClick?.(event);
45
+ },
46
+ }}
47
+ variant={"light"}
48
+ icon={null}
49
+ ref={ref}>
50
+ <span>{icon}</span>
51
+ <span>{text}</span>
52
+ </MantineChip>
53
+ );
54
+
55
+ if (!mainTooltip || hideTooltip) {
56
+ return badge;
57
+ }
58
+
59
+ return (
60
+ <MantineTooltip
61
+ refProp="rootRef"
62
+ withinPortal={false}
63
+ label={
64
+ <TooltipContent
65
+ mainTooltip={mainTooltip}
66
+ secondaryTooltip={secondaryTooltip}
67
+ />
68
+ }>
69
+ {badge}
70
+ </MantineTooltip>
71
+ );
72
+ });
73
+
74
+ export const BadgeGroup = forwardRef<
75
+ HTMLDivElement,
76
+ ComponentProps["Generic"]["Badge"]["Group"]
77
+ >((props, ref) => {
78
+ const { className, children, ...rest } = props;
79
+
80
+ assertEmpty(rest);
81
+
82
+ return (
83
+ <MantineGroup className={className} ref={ref}>
84
+ {children}
85
+ </MantineGroup>
86
+ );
87
+ });
@@ -0,0 +1,34 @@
1
+ import { assertEmpty } from "@blocknote/core";
2
+ import { ComponentProps } from "@blocknote/react";
3
+ import { Card as MantineCard } from "@mantine/core";
4
+ import { forwardRef } from "react";
5
+
6
+ export const Card = forwardRef<
7
+ HTMLDivElement,
8
+ ComponentProps["Comments"]["Card"]
9
+ >((props, ref) => {
10
+ const { className, children, ...rest } = props;
11
+
12
+ assertEmpty(rest, false);
13
+
14
+ return (
15
+ <MantineCard w={350} p={"md"} className={className} ref={ref}>
16
+ {children}
17
+ </MantineCard>
18
+ );
19
+ });
20
+
21
+ export const CardSection = forwardRef<
22
+ HTMLDivElement,
23
+ ComponentProps["Comments"]["CardSection"]
24
+ >((props, ref) => {
25
+ const { className, children, ...rest } = props;
26
+
27
+ assertEmpty(rest, false);
28
+
29
+ return (
30
+ <MantineCard.Section p={"md"} className={className} ref={ref}>
31
+ {children}
32
+ </MantineCard.Section>
33
+ );
34
+ });
@@ -0,0 +1,91 @@
1
+ import { assertEmpty } from "@blocknote/core";
2
+ import { ComponentProps, mergeRefs } from "@blocknote/react";
3
+ import { Avatar, Group, Skeleton, Text } from "@mantine/core";
4
+ import { useFocusWithin, useHover } from "@mantine/hooks";
5
+ import { forwardRef } from "react";
6
+
7
+ const AuthorInfo = forwardRef<
8
+ HTMLDivElement,
9
+ Pick<ComponentProps["Comments"]["Comment"], "authorInfo" | "timeString">
10
+ >((props, _ref) => {
11
+ const { authorInfo, timeString, ...rest } = props;
12
+
13
+ assertEmpty(rest, false);
14
+
15
+ if (authorInfo === "loading") {
16
+ return (
17
+ <Group>
18
+ <Skeleton height={24} width={24} />
19
+ <div>
20
+ <Skeleton height={12} width={100} />
21
+ </div>
22
+ </Group>
23
+ );
24
+ }
25
+
26
+ return (
27
+ <Group>
28
+ <Avatar
29
+ src={authorInfo.avatarUrl}
30
+ alt={authorInfo.username}
31
+ radius="xl"
32
+ size="sm"
33
+ // name={authorInfo.username} TODO: upgrade mantine?
34
+ color="initials"
35
+ />
36
+
37
+ <Text fz="sm" fw={"bold"}>
38
+ {authorInfo.username}
39
+ <Text fz="xs" c="dimmed" span ml={"xs"}>
40
+ {timeString}
41
+ </Text>
42
+ </Text>
43
+ </Group>
44
+ );
45
+ });
46
+
47
+ export const Comment = forwardRef<
48
+ HTMLDivElement,
49
+ ComponentProps["Comments"]["Comment"]
50
+ >((props, ref) => {
51
+ const {
52
+ className,
53
+ showActions,
54
+ authorInfo,
55
+ timeString,
56
+ actions,
57
+ children,
58
+ ...rest
59
+ } = props;
60
+
61
+ const { hovered, ref: hoverRef } = useHover();
62
+ const { focused, ref: focusRef } = useFocusWithin();
63
+ const mergedRef = mergeRefs([ref, hoverRef]);
64
+ assertEmpty(rest, false);
65
+
66
+ const doShowActions =
67
+ actions &&
68
+ (showActions === true ||
69
+ showActions === undefined ||
70
+ (showActions === "hover" && hovered) ||
71
+ focused);
72
+
73
+ return (
74
+ <Group pos="relative" ref={mergedRef} className={className}>
75
+ {doShowActions ? (
76
+ <Group
77
+ ref={focusRef}
78
+ style={{
79
+ position: "absolute",
80
+ right: 0,
81
+ top: 0,
82
+ zIndex: 10,
83
+ }}>
84
+ {actions}
85
+ </Group>
86
+ ) : null}
87
+ <AuthorInfo {...props} />
88
+ {children}
89
+ </Group>
90
+ );
91
+ });
@@ -0,0 +1,47 @@
1
+ import { assertEmpty } from "@blocknote/core";
2
+ import {
3
+ ComponentProps,
4
+ FormattingToolbar,
5
+ FormattingToolbarController,
6
+ getFormattingToolbarItems,
7
+ } from "@blocknote/react";
8
+ import { forwardRef } from "react";
9
+ import { BlockNoteView } from "../BlockNoteView.js";
10
+
11
+ export const Editor = forwardRef<
12
+ HTMLDivElement,
13
+ ComponentProps["Comments"]["Editor"]
14
+ >((props, ref) => {
15
+ const { className, onFocus, onBlur, editor, editable, ...rest } = props;
16
+
17
+ assertEmpty(rest, false);
18
+
19
+ return (
20
+ <BlockNoteView
21
+ autoFocus={true}
22
+ className={className}
23
+ editor={props.editor}
24
+ sideMenu={false}
25
+ slashMenu={false}
26
+ tableHandles={false}
27
+ filePanel={false}
28
+ formattingToolbar={false}
29
+ editable={editable}
30
+ ref={ref}
31
+ onFocus={onFocus}
32
+ onBlur={onBlur}>
33
+ <FormattingToolbarController
34
+ formattingToolbar={CustomFormattingToolbar}
35
+ />
36
+ </BlockNoteView>
37
+ );
38
+ });
39
+
40
+ const CustomFormattingToolbar = () => {
41
+ const items = getFormattingToolbarItems([]).filter(
42
+ (el) => el.key !== "nestBlockButton" && el.key !== "unnestBlockButton"
43
+ );
44
+ return (
45
+ <FormattingToolbar blockTypeSelectItems={[]}>{items}</FormattingToolbar>
46
+ );
47
+ };
@@ -1,5 +1,8 @@
1
1
  import { Components } from "@blocknote/react";
2
-
2
+ import { Badge, BadgeGroup } from "./badge/Badge.js";
3
+ import { Card, CardSection } from "./comments/Card.js";
4
+ import { Comment } from "./comments/Comment.js";
5
+ import { Editor } from "./comments/Editor.js";
3
6
  import { TextInput } from "./form/TextInput.js";
4
7
  import {
5
8
  Menu,
@@ -9,6 +12,7 @@ import {
9
12
  MenuLabel,
10
13
  MenuTrigger,
11
14
  } from "./menu/Menu.js";
15
+ import { Button } from "./menu/Button.js";
12
16
  import { Panel } from "./panel/Panel.js";
13
17
  import { PanelButton } from "./panel/PanelButton.js";
14
18
  import { PanelFileInput } from "./panel/PanelFileInput.js";
@@ -18,15 +22,15 @@ import { Popover, PopoverContent, PopoverTrigger } from "./popover/Popover.js";
18
22
  import { SideMenu } from "./sideMenu/SideMenu.js";
19
23
  import { SideMenuButton } from "./sideMenu/SideMenuButton.js";
20
24
  import "./style.css";
21
- import { GridSuggestionMenu } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.js";
22
- import { GridSuggestionMenuEmptyItem } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.js";
23
- import { GridSuggestionMenuItem } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.js";
24
- import { GridSuggestionMenuLoader } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.js";
25
25
  import { SuggestionMenu } from "./suggestionMenu/SuggestionMenu.js";
26
26
  import { SuggestionMenuEmptyItem } from "./suggestionMenu/SuggestionMenuEmptyItem.js";
27
27
  import { SuggestionMenuItem } from "./suggestionMenu/SuggestionMenuItem.js";
28
28
  import { SuggestionMenuLabel } from "./suggestionMenu/SuggestionMenuLabel.js";
29
29
  import { SuggestionMenuLoader } from "./suggestionMenu/SuggestionMenuLoader.js";
30
+ import { GridSuggestionMenu } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.js";
31
+ import { GridSuggestionMenuEmptyItem } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.js";
32
+ import { GridSuggestionMenuItem } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.js";
33
+ import { GridSuggestionMenuLoader } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.js";
30
34
  import { ExtendButton } from "./tableHandle/ExtendButton.js";
31
35
  import { TableHandle } from "./tableHandle/TableHandle.js";
32
36
  import { Toolbar } from "./toolbar/Toolbar.js";
@@ -72,9 +76,9 @@ export const components: Components = {
72
76
  ExtendButton: ExtendButton,
73
77
  },
74
78
  Generic: {
75
- Toolbar: {
76
- Root: Toolbar,
77
- Button: ToolbarButton,
79
+ Badge: {
80
+ Root: Badge,
81
+ Group: BadgeGroup,
78
82
  },
79
83
  Form: {
80
84
  Root: (props) => <div>{props.children}</div>,
@@ -87,11 +91,22 @@ export const components: Components = {
87
91
  Divider: MenuDivider,
88
92
  Label: MenuLabel,
89
93
  Item: MenuItem,
94
+ Button: Button,
90
95
  },
91
96
  Popover: {
92
97
  Root: Popover,
93
98
  Trigger: PopoverTrigger,
94
99
  Content: PopoverContent,
95
100
  },
101
+ Toolbar: {
102
+ Root: Toolbar,
103
+ Button: ToolbarButton,
104
+ },
105
+ },
106
+ Comments: {
107
+ Comment,
108
+ Editor,
109
+ Card,
110
+ CardSection,
96
111
  },
97
112
  };
@@ -0,0 +1,60 @@
1
+ import {
2
+ ActionIcon as MantineActionIcon,
3
+ Button as MantineButton,
4
+ } from "@mantine/core";
5
+
6
+ import { assertEmpty } from "@blocknote/core";
7
+ import { ComponentProps } from "@blocknote/react";
8
+ import { forwardRef } from "react";
9
+
10
+ export const Button = forwardRef<
11
+ HTMLButtonElement,
12
+ ComponentProps["Generic"]["Menu"]["Button"]
13
+ >((props, ref) => {
14
+ const {
15
+ className,
16
+ children,
17
+ icon,
18
+ onClick,
19
+ onDragEnd,
20
+ onDragStart,
21
+ draggable,
22
+ label,
23
+ ...rest
24
+ } = props;
25
+
26
+ // false, because rest props can be added by mantine when button is used as a trigger
27
+ // assertEmpty in this case is only used at typescript level, not runtime level
28
+ assertEmpty(rest, false);
29
+
30
+ if (icon) {
31
+ return (
32
+ <MantineActionIcon
33
+ size={24}
34
+ className={className}
35
+ ref={ref}
36
+ onClick={onClick}
37
+ onDragEnd={onDragEnd}
38
+ onDragStart={onDragStart}
39
+ draggable={draggable}
40
+ aria-label={label}
41
+ {...rest}>
42
+ {icon}
43
+ </MantineActionIcon>
44
+ );
45
+ }
46
+
47
+ return (
48
+ <MantineButton
49
+ className={className}
50
+ ref={ref}
51
+ onClick={onClick}
52
+ onDragEnd={onDragEnd}
53
+ onDragStart={onDragStart}
54
+ draggable={draggable}
55
+ aria-label={label}
56
+ {...rest}>
57
+ {children}
58
+ </MantineButton>
59
+ );
60
+ });
package/src/menu/Menu.tsx CHANGED
@@ -125,8 +125,7 @@ const SubMenu = forwardRef<
125
125
  middlewares={{ flip: true, shift: true, inline: false, size: true }}
126
126
  trigger={"hover"}
127
127
  opened={opened}
128
- onClose={() => onOpenChange?.(false)}
129
- onOpen={() => onOpenChange?.(true)}
128
+ onChange={onOpenChange}
130
129
  position={position}>
131
130
  {children}
132
131
  </MantineMenu>
@@ -148,8 +147,7 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
148
147
  <MantineMenu
149
148
  withinPortal={false}
150
149
  middlewares={{ flip: true, shift: true, inline: false, size: true }}
151
- onClose={() => onOpenChange?.(false)}
152
- onOpen={() => onOpenChange?.(true)}
150
+ onChange={onOpenChange}
153
151
  position={position}>
154
152
  {children}
155
153
  </MantineMenu>
@@ -11,7 +11,7 @@ import { forwardRef } from "react";
11
11
  export const Popover = (
12
12
  props: ComponentProps["Generic"]["Popover"]["Root"]
13
13
  ) => {
14
- const { children, opened, position, ...rest } = props;
14
+ const { opened, position, children, ...rest } = props;
15
15
 
16
16
  assertEmpty(rest);
17
17