@dxos/react-ui-menu 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae
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.
- package/dist/lib/browser/index.mjs +547 -404
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +547 -404
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/builder.d.ts +7 -1
- package/dist/types/src/builder.d.ts.map +1 -1
- package/dist/types/src/components/ActionLabel.d.ts +3 -3
- package/dist/types/src/components/ActionLabel.d.ts.map +1 -1
- package/dist/types/src/components/DropdownMenu.d.ts +1 -1
- package/dist/types/src/components/DropdownMenu.d.ts.map +1 -1
- package/dist/types/src/components/Menu.d.ts +46 -0
- package/dist/types/src/components/Menu.d.ts.map +1 -0
- package/dist/types/src/components/Menu.test.d.ts +2 -0
- package/dist/types/src/components/Menu.test.d.ts.map +1 -0
- package/dist/types/src/components/MenuItems.stories.d.ts +21 -0
- package/dist/types/src/components/MenuItems.stories.d.ts.map +1 -0
- package/dist/types/src/components/ToolbarMenu.d.ts +4 -3
- package/dist/types/src/components/ToolbarMenu.d.ts.map +1 -1
- package/dist/types/src/components/ToolbarMenu.stories.d.ts +2 -2
- package/dist/types/src/components/ToolbarMenu.stories.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +1 -3
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useMenuActions.d.ts +8 -7
- package/dist/types/src/hooks/useMenuActions.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +0 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/testing/generator.d.ts +14 -12
- package/dist/types/src/testing/generator.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +2 -2
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/src/types.d.ts +36 -26
- package/dist/types/src/types.d.ts.map +1 -1
- package/dist/types/src/util.d.ts +14 -5
- package/dist/types/src/util.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +35 -29
- package/src/builder.ts +36 -9
- package/src/components/ActionLabel.tsx +5 -5
- package/src/components/DropdownMenu.tsx +12 -5
- package/src/components/Menu.test.tsx +448 -0
- package/src/components/Menu.tsx +349 -0
- package/src/components/MenuItems.stories.tsx +265 -0
- package/src/components/ToolbarMenu.stories.tsx +30 -23
- package/src/components/ToolbarMenu.tsx +41 -16
- package/src/components/index.ts +1 -3
- package/src/hooks/useMenuActions.ts +29 -54
- package/src/index.ts +0 -2
- package/src/testing/generator.ts +67 -62
- package/src/translations.ts +1 -1
- package/src/types.ts +38 -27
- package/src/util.ts +34 -15
- package/dist/types/src/components/MenuContext.d.ts +0 -13
- package/dist/types/src/components/MenuContext.d.ts.map +0 -1
- package/src/components/MenuContext.tsx +0 -50
package/src/util.ts
CHANGED
|
@@ -2,18 +2,31 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import
|
|
5
|
+
import * as Effect from 'effect/Effect';
|
|
6
|
+
|
|
7
|
+
import { Node } from '@dxos/app-graph';
|
|
8
|
+
import { runAndForwardErrors } from '@dxos/effect';
|
|
9
|
+
import { type MenuActionProperties, type MenuItemGroupProperties } from '@dxos/ui-types';
|
|
6
10
|
import { getHostPlatform } from '@dxos/util';
|
|
7
11
|
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}
|
|
12
|
+
import { type MenuAction, type MenuItemGroup, type MenuSeparator } from './types';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Execute a menu action's Effect with its captured context.
|
|
16
|
+
* This provides the `_actionContext` layer if available.
|
|
17
|
+
*/
|
|
18
|
+
export const executeMenuAction = async (action: MenuAction, params: Node.InvokeProps = {}): Promise<void> => {
|
|
19
|
+
let effect = action.data(params);
|
|
15
20
|
|
|
16
|
-
|
|
21
|
+
// Provide captured action context if available.
|
|
22
|
+
if (action._actionContext) {
|
|
23
|
+
effect = effect.pipe(Effect.provide(action._actionContext));
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
await runAndForwardErrors(effect);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export const getShortcut = (action: Node.ActionLike) => {
|
|
17
30
|
return typeof action.properties?.keyBinding === 'string'
|
|
18
31
|
? action.properties.keyBinding
|
|
19
32
|
: action.properties?.keyBinding?.[getHostPlatform()];
|
|
@@ -28,9 +41,9 @@ export const createMenuAction = <P extends {} = {}>(
|
|
|
28
41
|
) =>
|
|
29
42
|
({
|
|
30
43
|
id,
|
|
31
|
-
type:
|
|
44
|
+
type: Node.ActionType,
|
|
32
45
|
properties,
|
|
33
|
-
data: invoke,
|
|
46
|
+
data: () => Effect.sync(invoke),
|
|
34
47
|
}) satisfies MenuAction;
|
|
35
48
|
|
|
36
49
|
export const createMenuItemGroup = <
|
|
@@ -41,9 +54,9 @@ export const createMenuItemGroup = <
|
|
|
41
54
|
) =>
|
|
42
55
|
({
|
|
43
56
|
id,
|
|
44
|
-
type:
|
|
57
|
+
type: Node.ActionGroupType,
|
|
45
58
|
properties,
|
|
46
|
-
data: actionGroupSymbol,
|
|
59
|
+
data: Node.actionGroupSymbol,
|
|
47
60
|
}) satisfies MenuItemGroup;
|
|
48
61
|
|
|
49
62
|
export const createGapSeparator = (id: string = 'gap', source: string = 'root') => ({
|
|
@@ -55,7 +68,13 @@ export const createGapSeparator = (id: string = 'gap', source: string = 'root')
|
|
|
55
68
|
data: undefined as never,
|
|
56
69
|
} satisfies MenuSeparator,
|
|
57
70
|
],
|
|
58
|
-
edges: [
|
|
71
|
+
edges: [
|
|
72
|
+
{
|
|
73
|
+
source,
|
|
74
|
+
target: id,
|
|
75
|
+
relation: 'child' as const,
|
|
76
|
+
},
|
|
77
|
+
],
|
|
59
78
|
});
|
|
60
79
|
|
|
61
80
|
export const createLineSeparator = (id: string = 'line', source: string = 'root') => ({
|
|
@@ -67,5 +86,5 @@ export const createLineSeparator = (id: string = 'line', source: string = 'root'
|
|
|
67
86
|
data: undefined as never,
|
|
68
87
|
} satisfies MenuSeparator,
|
|
69
88
|
],
|
|
70
|
-
edges: [{ source, target: id }],
|
|
89
|
+
edges: [{ source, target: id, relation: 'child' as const }],
|
|
71
90
|
});
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { type Scope } from '@radix-ui/react-context';
|
|
2
|
-
import React, { type PropsWithChildren } from 'react';
|
|
3
|
-
import { type MenuContextValue, type MenuItem, type MenuItemGroup } from '../types';
|
|
4
|
-
export type MenuScopedProps<P> = P & {
|
|
5
|
-
__menuScope?: Scope;
|
|
6
|
-
};
|
|
7
|
-
declare const createMenuScope: import("@radix-ui/react-context").CreateScope;
|
|
8
|
-
declare const useMenu: (consumerName: string, scope: Scope<MenuContextValue | undefined>) => MenuContextValue;
|
|
9
|
-
export declare const menuContextDefaults: MenuContextValue;
|
|
10
|
-
declare const MenuProvider: ({ children, useGroupItems, iconSize, attendableId, }: PropsWithChildren<Partial<MenuContextValue>>) => React.JSX.Element;
|
|
11
|
-
export declare const useMenuItems: (group?: MenuItemGroup, propsItems?: MenuItem[], consumerName?: string, __menuScope?: Scope) => MenuItem[] | undefined;
|
|
12
|
-
export { useMenu, createMenuScope, MenuProvider };
|
|
13
|
-
//# sourceMappingURL=MenuContext.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MenuContext.d.ts","sourceRoot":"","sources":["../../../../src/components/MenuContext.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAsB,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAEpF,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAI7D,QAAA,MAA0B,eAAe,+CAAqC,CAAC;AAE/E,QAAA,MAA4B,OAAO,wFAAkD,CAAC;AAEtF,eAAO,MAAM,mBAAmB,EAAE,gBAGjC,CAAC;AAIF,QAAA,MAAM,YAAY,GAAI,sDAKnB,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,sBAO9C,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,QAAQ,aAAa,EACrB,aAAa,QAAQ,EAAE,EACvB,eAAc,MAA8B,EAC5C,cAAc,KAAK,2BAKpB,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2025 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { type Scope, createContextScope } from '@radix-ui/react-context';
|
|
6
|
-
import React, { type PropsWithChildren, useMemo } from 'react';
|
|
7
|
-
|
|
8
|
-
import { type MenuContextValue, type MenuItem, type MenuItemGroup } from '../types';
|
|
9
|
-
|
|
10
|
-
export type MenuScopedProps<P> = P & { __menuScope?: Scope };
|
|
11
|
-
|
|
12
|
-
const MENU_NAME = 'GraphMenu';
|
|
13
|
-
|
|
14
|
-
const [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, []);
|
|
15
|
-
|
|
16
|
-
const [MenuContextProvider, useMenu] = createMenuContext<MenuContextValue>(MENU_NAME);
|
|
17
|
-
|
|
18
|
-
export const menuContextDefaults: MenuContextValue = {
|
|
19
|
-
iconSize: 5,
|
|
20
|
-
useGroupItems: () => null,
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
const useMenuScope = createMenuScope();
|
|
24
|
-
|
|
25
|
-
const MenuProvider = ({
|
|
26
|
-
children,
|
|
27
|
-
useGroupItems = menuContextDefaults.useGroupItems,
|
|
28
|
-
iconSize = menuContextDefaults.iconSize,
|
|
29
|
-
attendableId,
|
|
30
|
-
}: PropsWithChildren<Partial<MenuContextValue>>) => {
|
|
31
|
-
const { scope } = useMenuScope(undefined);
|
|
32
|
-
return (
|
|
33
|
-
<MenuContextProvider useGroupItems={useGroupItems} iconSize={iconSize} attendableId={attendableId} scope={scope}>
|
|
34
|
-
{children}
|
|
35
|
-
</MenuContextProvider>
|
|
36
|
-
);
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
export const useMenuItems = (
|
|
40
|
-
group?: MenuItemGroup,
|
|
41
|
-
propsItems?: MenuItem[],
|
|
42
|
-
consumerName: string = 'useMenuItemConsumer',
|
|
43
|
-
__menuScope?: Scope,
|
|
44
|
-
) => {
|
|
45
|
-
const { useGroupItems } = useMenu(consumerName, __menuScope);
|
|
46
|
-
const groupItems = useGroupItems(group);
|
|
47
|
-
return useMemo(() => propsItems ?? groupItems ?? undefined, [propsItems, groupItems]);
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
export { useMenu, createMenuScope, MenuProvider };
|