@workday/canvas-kit-docs 13.0.0-alpha.1110-next.0 → 13.0.0-alpha.1111-next.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.
- package/dist/es6/lib/docs.js +214990 -159467
- package/dist/mdx/react/collection/mdx/examples/MultiSelection.tsx +2 -1
- package/dist/mdx/react/collection/mdx/examples/Selection.tsx +2 -1
- package/dist/mdx/react/menu/Menu.mdx +22 -0
- package/dist/mdx/react/menu/examples/Nested.tsx +49 -0
- package/dist/mdx/react/menu/examples/NestedDynamic.tsx +105 -0
- package/dist/mdx/react/tabs/examples/DynamicTabs.tsx +3 -2
- package/package.json +6 -6
|
@@ -8,6 +8,7 @@ import {
|
|
|
8
8
|
useListModel,
|
|
9
9
|
ListItemProps,
|
|
10
10
|
ListBox,
|
|
11
|
+
getCursor,
|
|
11
12
|
} from '@workday/canvas-kit-react/collection';
|
|
12
13
|
import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
|
|
13
14
|
|
|
@@ -47,7 +48,7 @@ export default () => {
|
|
|
47
48
|
<Item data-id="third">Third</Item>
|
|
48
49
|
</ListBox>
|
|
49
50
|
|
|
50
|
-
<p>Cursor ID: {model.state
|
|
51
|
+
<p>Cursor ID: {getCursor(model.state)}</p>
|
|
51
52
|
<p>
|
|
52
53
|
Selected IDs: {(model.state.selectedIds !== 'all' ? model.state.selectedIds : []).join(',')}
|
|
53
54
|
</p>
|
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
useListModel,
|
|
8
8
|
ListItemProps,
|
|
9
9
|
ListBox,
|
|
10
|
+
getCursor,
|
|
10
11
|
} from '@workday/canvas-kit-react/collection';
|
|
11
12
|
import {
|
|
12
13
|
composeHooks,
|
|
@@ -51,7 +52,7 @@ export default () => {
|
|
|
51
52
|
<SelectableItem data-id="third">Third</SelectableItem>
|
|
52
53
|
</ListBox>
|
|
53
54
|
|
|
54
|
-
<p>Cursor ID: {model.state
|
|
55
|
+
<p>Cursor ID: {getCursor(model.state)}</p>
|
|
55
56
|
<p>Selected ID: {model.state.selectedIds[0]}</p>
|
|
56
57
|
</>
|
|
57
58
|
);
|
|
@@ -4,6 +4,8 @@ import ContextMenu from './examples/ContextMenu';
|
|
|
4
4
|
import Icons from './examples/Icons';
|
|
5
5
|
import SelectableMenu from './examples/SelectableMenu';
|
|
6
6
|
import Grouping from './examples/Grouping';
|
|
7
|
+
import Nested from './examples/Nested';
|
|
8
|
+
import NestedDynamic from './examples/Nested';
|
|
7
9
|
|
|
8
10
|
# Canvas Kit Menu
|
|
9
11
|
|
|
@@ -81,6 +83,26 @@ and are not selectable with the keyboard or mouse.
|
|
|
81
83
|
|
|
82
84
|
<ExampleCodeBlock code={Grouping} />
|
|
83
85
|
|
|
86
|
+
### Nested
|
|
87
|
+
|
|
88
|
+
Menus support nesting. If you only have a few items and not very many nesting levels, the menu can
|
|
89
|
+
be defined statically using JSX. A submenu is defined using the `<Menu.Submenu>` component. The
|
|
90
|
+
`Submenu` is implemented as a special `Menu` subcomponent. The API of the submenu is the same as the
|
|
91
|
+
`Menu` except the submenu's target is also a menu item. The component is named `TargetItem` to
|
|
92
|
+
indicate this dual role.
|
|
93
|
+
|
|
94
|
+
<ExampleCodeBlock code={Nested} />
|
|
95
|
+
|
|
96
|
+
### Nested Dynamic Items
|
|
97
|
+
|
|
98
|
+
Menu nesting is simpler with the dynamic API. In this example, a `renderItem` function is defined to
|
|
99
|
+
allow recursive nesting of items using a data structure you define. A submenu will inherit the
|
|
100
|
+
`getId` and `getTextValue` functions of the parent menu. While you can pass a specialize `getId` or
|
|
101
|
+
`getTextValue` function to each submenu, it may be simpler to use the same one for the menu and
|
|
102
|
+
submenus.
|
|
103
|
+
|
|
104
|
+
<ExampleCodeBlock code={NestedDynamic} />
|
|
105
|
+
|
|
84
106
|
## Component API
|
|
85
107
|
|
|
86
108
|
<SymbolDoc name="Menu" fileName="/react/" />
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
|
|
3
|
+
|
|
4
|
+
import {Menu} from '@workday/canvas-kit-react/menu';
|
|
5
|
+
import {BodyText} from '@workday/canvas-kit-react/text';
|
|
6
|
+
|
|
7
|
+
export default () => {
|
|
8
|
+
const [selected, setSelected] = React.useState('');
|
|
9
|
+
return (
|
|
10
|
+
<Menu
|
|
11
|
+
id="first-menu"
|
|
12
|
+
onSelect={data => {
|
|
13
|
+
setSelected(data.id);
|
|
14
|
+
}}
|
|
15
|
+
>
|
|
16
|
+
<Menu.Target>Open Menu</Menu.Target>
|
|
17
|
+
<Menu.Popper>
|
|
18
|
+
<Menu.Card>
|
|
19
|
+
<Menu.List>
|
|
20
|
+
<Menu.Item data-id="first-item">First Item</Menu.Item>
|
|
21
|
+
<Menu.Submenu id="second-menu">
|
|
22
|
+
<Menu.Submenu.TargetItem data-id="second-item">Second Item</Menu.Submenu.TargetItem>
|
|
23
|
+
<Menu.Submenu.Popper>
|
|
24
|
+
<Menu.Submenu.Card>
|
|
25
|
+
<Menu.Submenu.List>
|
|
26
|
+
<Menu.Submenu.Item data-id="first-sub-item">First Sub Item</Menu.Submenu.Item>
|
|
27
|
+
<Menu.Submenu.Item data-id="second-sub-item">First Sub Item</Menu.Submenu.Item>
|
|
28
|
+
<Menu.Submenu.Item data-id="third-sub-item">Third Sub Item</Menu.Submenu.Item>
|
|
29
|
+
<Menu.Submenu.Item data-id="fourth-sub-item">Fourth Sub Item</Menu.Submenu.Item>
|
|
30
|
+
</Menu.Submenu.List>
|
|
31
|
+
</Menu.Submenu.Card>
|
|
32
|
+
</Menu.Submenu.Popper>
|
|
33
|
+
</Menu.Submenu>
|
|
34
|
+
<Menu.Divider />
|
|
35
|
+
<Menu.Item data-id="third-item">
|
|
36
|
+
Third Item (with a really, really, really long label)
|
|
37
|
+
</Menu.Item>
|
|
38
|
+
<Menu.Item aria-disabled data-id="fourth-item">
|
|
39
|
+
Fourth Item
|
|
40
|
+
</Menu.Item>
|
|
41
|
+
</Menu.List>
|
|
42
|
+
</Menu.Card>
|
|
43
|
+
</Menu.Popper>
|
|
44
|
+
<BodyText size="small" marginTop="s">
|
|
45
|
+
Selected: <span data-testid="output">{selected}</span>
|
|
46
|
+
</BodyText>
|
|
47
|
+
</Menu>
|
|
48
|
+
);
|
|
49
|
+
};
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import {Menu} from '@workday/canvas-kit-react/menu';
|
|
4
|
+
import {BodyText} from '@workday/canvas-kit-react/text';
|
|
5
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
6
|
+
|
|
7
|
+
type Item = {
|
|
8
|
+
type?: 'item';
|
|
9
|
+
id: string;
|
|
10
|
+
label: string;
|
|
11
|
+
};
|
|
12
|
+
type SubmenuItem = {
|
|
13
|
+
id: string;
|
|
14
|
+
label: string;
|
|
15
|
+
type: 'submenu';
|
|
16
|
+
children: (Item | SubmenuItem)[];
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
// This is a user-defined object. The structure uses `id` for the item identifier which is the
|
|
20
|
+
// default key used by the collection system and therefore doesn't require a `getId` function to be
|
|
21
|
+
// passed to the model. The `label` isn't the standard text value used by the collection system, so
|
|
22
|
+
// a `getTextValue` function is required. The `type` and `children` aren't important at all to the
|
|
23
|
+
// menu and are used in the template by the user-defined `renderItem` function.
|
|
24
|
+
const items: (SubmenuItem | Item)[] = [
|
|
25
|
+
{id: 'first-item', label: 'First Item'},
|
|
26
|
+
{
|
|
27
|
+
id: 'second-item',
|
|
28
|
+
label: 'Second Item',
|
|
29
|
+
type: 'submenu',
|
|
30
|
+
children: [
|
|
31
|
+
{id: 'first-sub-item', label: 'First Sub Item'},
|
|
32
|
+
{
|
|
33
|
+
id: 'second-sub-item',
|
|
34
|
+
label: 'Second Sub Item',
|
|
35
|
+
type: 'submenu',
|
|
36
|
+
children: [
|
|
37
|
+
{id: 'first-sub-sub-item', label: 'First Sub Sub Item'},
|
|
38
|
+
{
|
|
39
|
+
id: 'second-sub-sub-item',
|
|
40
|
+
type: 'submenu',
|
|
41
|
+
label: 'Second Sub Sub Item',
|
|
42
|
+
children: [
|
|
43
|
+
{id: 'first-sub-sub-sub-item', label: 'First Sub Sub Sub Item'},
|
|
44
|
+
{
|
|
45
|
+
id: 'second-sub-sub-sub-item',
|
|
46
|
+
label: 'Second Sub Sub Sub Item',
|
|
47
|
+
},
|
|
48
|
+
{id: 'third-sub-sub-sub-item', label: 'Third Sub Sub Sub Item'},
|
|
49
|
+
{id: 'fourth-sub-sub-sub-item', label: 'Fourth Sub Sub Sub Item'},
|
|
50
|
+
],
|
|
51
|
+
},
|
|
52
|
+
{id: 'third-sub-sub-item', label: 'Third Sub Sub Item'},
|
|
53
|
+
{id: 'fourth-sub-sub-item', label: 'Fourth Sub Sub Item'},
|
|
54
|
+
],
|
|
55
|
+
},
|
|
56
|
+
{id: 'third-sub-item', label: 'Third Sub Item'},
|
|
57
|
+
{id: 'fourth-sub-item', label: 'Fourth Sub Item'},
|
|
58
|
+
],
|
|
59
|
+
},
|
|
60
|
+
{id: 'third-item', label: 'Third Item'},
|
|
61
|
+
{id: 'fourth-item', label: 'Fourth Item'},
|
|
62
|
+
];
|
|
63
|
+
|
|
64
|
+
export default () => {
|
|
65
|
+
const [selected, setSelected] = React.useState('');
|
|
66
|
+
|
|
67
|
+
// defining this inline function allows use to recurse any nesting level defined by the `items`
|
|
68
|
+
// array.
|
|
69
|
+
function renderItem(item: SubmenuItem | Item) {
|
|
70
|
+
if (item.type === 'submenu') {
|
|
71
|
+
return (
|
|
72
|
+
<Menu.Submenu id={item.id} items={item.children}>
|
|
73
|
+
<Menu.Submenu.TargetItem>{item.label}</Menu.Submenu.TargetItem>
|
|
74
|
+
<Menu.Submenu.Popper>
|
|
75
|
+
<Menu.Submenu.Card>
|
|
76
|
+
<Menu.Submenu.List>{renderItem}</Menu.Submenu.List>
|
|
77
|
+
</Menu.Submenu.Card>
|
|
78
|
+
</Menu.Submenu.Popper>
|
|
79
|
+
</Menu.Submenu>
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
return <Menu.Item>{item.label}</Menu.Item>;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
return (
|
|
86
|
+
<Menu
|
|
87
|
+
items={items}
|
|
88
|
+
id="first-menu"
|
|
89
|
+
getTextValue={item => item.label}
|
|
90
|
+
onSelect={data => {
|
|
91
|
+
setSelected(data.id);
|
|
92
|
+
}}
|
|
93
|
+
>
|
|
94
|
+
<Menu.Target>Open Menu</Menu.Target>
|
|
95
|
+
<Menu.Popper>
|
|
96
|
+
<Menu.Card>
|
|
97
|
+
<Menu.List>{renderItem}</Menu.List>
|
|
98
|
+
</Menu.Card>
|
|
99
|
+
</Menu.Popper>
|
|
100
|
+
<BodyText size="small" cs={{marginBlockStart: system.space.x4}}>
|
|
101
|
+
Selected: <span data-testid="output">{selected}</span>
|
|
102
|
+
</BodyText>
|
|
103
|
+
</Menu>
|
|
104
|
+
);
|
|
105
|
+
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
+
import {isCursor} from '@workday/canvas-kit-react/collection';
|
|
3
4
|
import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
|
|
4
5
|
|
|
5
6
|
type Tab = {
|
|
@@ -32,14 +33,14 @@ export default () => {
|
|
|
32
33
|
* @param id The id of the item that will be removed
|
|
33
34
|
*/
|
|
34
35
|
const removeItem = <T extends unknown>(id: string, model: ReturnType<typeof useTabsModel>) => {
|
|
35
|
-
const index = model.state.items.findIndex(item =>
|
|
36
|
+
const index = model.state.items.findIndex(item => isCursor(model.state, item.id));
|
|
36
37
|
const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;
|
|
37
38
|
const nextId = model.state.items[nextIndex].id;
|
|
38
39
|
if (model.state.selectedIds[0] === id) {
|
|
39
40
|
// We're removing the currently selected item. Select next item
|
|
40
41
|
model.events.select({id: nextId});
|
|
41
42
|
}
|
|
42
|
-
if (model.state
|
|
43
|
+
if (isCursor(model.state, id)) {
|
|
43
44
|
// We're removing the currently focused item. Focus next item
|
|
44
45
|
model.events.goTo({id: nextId});
|
|
45
46
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "13.0.0-alpha.
|
|
3
|
+
"version": "13.0.0-alpha.1111-next.0",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@stackblitz/sdk": "^1.11.0",
|
|
47
47
|
"@storybook/csf": "0.0.1",
|
|
48
|
-
"@workday/canvas-kit-labs-react": "^13.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^13.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-react": "^13.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-styling": "^13.0.0-alpha.
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^13.0.0-alpha.1111-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^13.0.0-alpha.1111-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^13.0.0-alpha.1111-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^13.0.0-alpha.1111-next.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
53
53
|
"@workday/canvas-tokens-web": "^2.1.1",
|
|
54
54
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"mkdirp": "^1.0.3",
|
|
62
62
|
"typescript": "5.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "b0529fc270482d902e8da5ba424763cfb0b6b994"
|
|
65
65
|
}
|