@workday/canvas-kit-docs 13.2.17 → 13.2.19
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 +1395 -0
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
- package/dist/mdx/preview-react/multi-select/MultiSelect.mdx +8 -1
- package/dist/mdx/preview-react/multi-select/examples/InitialSelectedItems.tsx +129 -0
- package/package.json +6 -6
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "13.2.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "13.2.
|
|
23
|
-
"@workday/canvas-kit-react": "13.2.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^13.2.
|
|
25
|
-
"@workday/canvas-kit-styling": "13.2.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "13.2.19",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "13.2.19",
|
|
23
|
+
"@workday/canvas-kit-react": "13.2.19",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^13.2.19",
|
|
25
|
+
"@workday/canvas-kit-styling": "13.2.19",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
27
|
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
28
|
},
|
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "13.2.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "13.2.
|
|
23
|
-
"@workday/canvas-kit-react": "13.2.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^13.2.
|
|
25
|
-
"@workday/canvas-kit-styling": "13.2.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "13.2.19",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "13.2.19",
|
|
23
|
+
"@workday/canvas-kit-react": "13.2.19",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^13.2.19",
|
|
25
|
+
"@workday/canvas-kit-styling": "13.2.19",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
27
|
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
28
|
},
|
|
@@ -10,6 +10,7 @@ import Disabled from './examples/Disabled';
|
|
|
10
10
|
import Error from './examples/Error';
|
|
11
11
|
import Complex from './examples/Complex';
|
|
12
12
|
import Icons from './examples/Icons';
|
|
13
|
+
import InitialSelectedItems from './examples/InitialSelectedItems';
|
|
13
14
|
import Controlled from './examples/Controlled';
|
|
14
15
|
import Searching from './examples/Searching';
|
|
15
16
|
|
|
@@ -109,4 +110,10 @@ dynamically load items as the user navigates the available options.
|
|
|
109
110
|
> Don't rely too much on the exact behavior of the search input. For example, the search input may
|
|
110
111
|
> be cleared when the user blurs the field.
|
|
111
112
|
|
|
112
|
-
<ExampleCodeBlock code={Searching} />
|
|
113
|
+
<ExampleCodeBlock code={Searching} />
|
|
114
|
+
|
|
115
|
+
### Initial Selected Items
|
|
116
|
+
|
|
117
|
+
You can set `initialSelectedIds` to the value that you want initially selected.
|
|
118
|
+
|
|
119
|
+
<ExampleCodeBlock code={InitialSelectedItems} />
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import React, {useEffect} from 'react';
|
|
2
|
+
|
|
3
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
4
|
+
|
|
5
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
6
|
+
import {LoadReturn} from '@workday/canvas-kit-react/collection';
|
|
7
|
+
import {CanvasProvider, useMountLayout} from '@workday/canvas-kit-react/common';
|
|
8
|
+
import {useComboboxLoader} from '@workday/canvas-kit-react/combobox';
|
|
9
|
+
import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
10
|
+
|
|
11
|
+
import {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';
|
|
12
|
+
import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
|
|
13
|
+
|
|
14
|
+
const mainContentStyles = createStyles({
|
|
15
|
+
padding: system.space.x4,
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
const colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];
|
|
19
|
+
const fruits = ['Apple', 'Orange', 'Banana', 'Grape', 'Lemon', 'Lime'];
|
|
20
|
+
const options = Array(1000)
|
|
21
|
+
.fill('')
|
|
22
|
+
.map((_, index) => {
|
|
23
|
+
return {
|
|
24
|
+
id: `${index + 1}`,
|
|
25
|
+
text: `${colors[index % colors.length]} ${fruits[index % fruits.length]} ${index + 1}`,
|
|
26
|
+
};
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
export default () => {
|
|
30
|
+
const [value, setValue] = React.useState('');
|
|
31
|
+
|
|
32
|
+
const {model, loader} = useComboboxLoader(
|
|
33
|
+
{
|
|
34
|
+
// You can start with any number that makes sense.
|
|
35
|
+
total: 0,
|
|
36
|
+
initialSelectedIds: ['3', '5'],
|
|
37
|
+
|
|
38
|
+
// Pick whatever number makes sense for your API
|
|
39
|
+
pageSize: 500,
|
|
40
|
+
|
|
41
|
+
// A load function that will be called by the loader. You must return a promise that returns
|
|
42
|
+
// an object like `{items: [], total: 0}`. The `items` will be merged into the loader's cache
|
|
43
|
+
async load({pageNumber, pageSize, filter}) {
|
|
44
|
+
return new Promise<LoadReturn<(typeof options)[0]>>(resolve => {
|
|
45
|
+
// simulate a server response by resolving after a period of time
|
|
46
|
+
setTimeout(() => {
|
|
47
|
+
// simulate paging and filtering based on pre-computed items
|
|
48
|
+
const start = (pageNumber - 1) * pageSize;
|
|
49
|
+
const end = start + pageSize;
|
|
50
|
+
const filteredItems = options.filter(item => {
|
|
51
|
+
if (filter === '' || typeof filter !== 'string') {
|
|
52
|
+
return true;
|
|
53
|
+
}
|
|
54
|
+
return item.text.toLowerCase().includes(filter.toLowerCase());
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
const total = filteredItems.length;
|
|
58
|
+
const items = filteredItems.slice(start, end);
|
|
59
|
+
|
|
60
|
+
resolve({
|
|
61
|
+
items,
|
|
62
|
+
total,
|
|
63
|
+
});
|
|
64
|
+
}, 300);
|
|
65
|
+
});
|
|
66
|
+
},
|
|
67
|
+
onShow() {
|
|
68
|
+
// The `shouldLoad` cancels while the combobox menu is hidden, so let's load when it is
|
|
69
|
+
// visible
|
|
70
|
+
loader.load();
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
useMultiSelectModel
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
useEffect(() => {
|
|
77
|
+
loader.load();
|
|
78
|
+
}, [loader]);
|
|
79
|
+
|
|
80
|
+
return (
|
|
81
|
+
<CanvasProvider>
|
|
82
|
+
<>
|
|
83
|
+
<form
|
|
84
|
+
onSubmit={e => {
|
|
85
|
+
console.log('form submitted');
|
|
86
|
+
e.preventDefault();
|
|
87
|
+
}}
|
|
88
|
+
>
|
|
89
|
+
<main className={mainContentStyles}>
|
|
90
|
+
<MultiSelect model={model}>
|
|
91
|
+
<FormField orientation="horizontalStart">
|
|
92
|
+
<FormField.Label>Fruits</FormField.Label>
|
|
93
|
+
<FormField.Input
|
|
94
|
+
as={MultiSelect.SearchInput}
|
|
95
|
+
placeholder="Search"
|
|
96
|
+
removeLabel="Remove"
|
|
97
|
+
name="toppings"
|
|
98
|
+
onChange={e => {
|
|
99
|
+
setValue(e.currentTarget.value);
|
|
100
|
+
}}
|
|
101
|
+
value={value}
|
|
102
|
+
/>
|
|
103
|
+
<MultiSelect.Popper>
|
|
104
|
+
<MultiSelect.Card>
|
|
105
|
+
{model.state.items.length === 0 && (
|
|
106
|
+
<StyledMenuItem as="span">No Results Found</StyledMenuItem>
|
|
107
|
+
)}
|
|
108
|
+
{model.state.items.length > 0 && (
|
|
109
|
+
<MultiSelect.List maxHeight={200}>
|
|
110
|
+
{item =>
|
|
111
|
+
item ? (
|
|
112
|
+
<MultiSelect.Item data-id={item.id}>
|
|
113
|
+
<MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>
|
|
114
|
+
</MultiSelect.Item>
|
|
115
|
+
) : undefined
|
|
116
|
+
}
|
|
117
|
+
</MultiSelect.List>
|
|
118
|
+
)}
|
|
119
|
+
</MultiSelect.Card>
|
|
120
|
+
</MultiSelect.Popper>
|
|
121
|
+
</FormField>
|
|
122
|
+
</MultiSelect>
|
|
123
|
+
</main>
|
|
124
|
+
</form>
|
|
125
|
+
<div>Selected: {value}</div>
|
|
126
|
+
</>
|
|
127
|
+
</CanvasProvider>
|
|
128
|
+
);
|
|
129
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "13.2.
|
|
3
|
+
"version": "13.2.19",
|
|
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.2.
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^13.2.
|
|
50
|
-
"@workday/canvas-kit-react": "^13.2.
|
|
51
|
-
"@workday/canvas-kit-styling": "^13.2.
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^13.2.19",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^13.2.19",
|
|
50
|
+
"@workday/canvas-kit-react": "^13.2.19",
|
|
51
|
+
"@workday/canvas-kit-styling": "^13.2.19",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
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": "cd08183f2b3f57890da8f9514cbeef5dc025330d"
|
|
65
65
|
}
|