@workday/canvas-kit-react 11.0.22 → 11.0.23
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/collection/lib/ListBox.tsx +27 -9
- package/dist/commonjs/collection/lib/ListBox.d.ts +22 -5
- package/dist/commonjs/collection/lib/ListBox.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/ListBox.js +10 -10
- package/dist/commonjs/menu/lib/MenuList.d.ts.map +1 -1
- package/dist/commonjs/menu/lib/MenuList.js +5 -6
- package/dist/es6/collection/lib/ListBox.d.ts +22 -5
- package/dist/es6/collection/lib/ListBox.d.ts.map +1 -1
- package/dist/es6/collection/lib/ListBox.js +11 -11
- package/dist/es6/menu/lib/MenuList.d.ts.map +1 -1
- package/dist/es6/menu/lib/MenuList.js +6 -7
- package/menu/lib/MenuList.tsx +2 -4
- package/package.json +4 -4
|
@@ -3,9 +3,8 @@ import {
|
|
|
3
3
|
createContainer,
|
|
4
4
|
createElemPropsHook,
|
|
5
5
|
createSubcomponent,
|
|
6
|
-
ExtractProps,
|
|
7
6
|
} from '@workday/canvas-kit-react/common';
|
|
8
|
-
import {
|
|
7
|
+
import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
|
|
9
8
|
import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
|
|
10
9
|
import {system} from '@workday/canvas-tokens-web';
|
|
11
10
|
|
|
@@ -13,16 +12,34 @@ import {useListModel} from './useListModel';
|
|
|
13
12
|
import {useListRenderItems} from './useListRenderItem';
|
|
14
13
|
import {useListItemRegister} from './useListItemRegister';
|
|
15
14
|
|
|
16
|
-
export interface ListBoxProps<T = any> extends Omit<
|
|
15
|
+
export interface ListBoxProps<T = any> extends Omit<FlexProps, 'children'> {
|
|
17
16
|
children?: React.ReactNode | ((item: T, index: number) => React.ReactNode);
|
|
17
|
+
/**
|
|
18
|
+
* Set the margin top of the list box. You must use this prop and not style any other way. The
|
|
19
|
+
* `Menu` uses virtualization and needs margins to be set on the correct element. This ensure
|
|
20
|
+
* proper rendering. If a `marginTop` is not provided, the value falls back to `marginY`.
|
|
21
|
+
*/
|
|
22
|
+
marginTop?: FlexProps['marginTop'];
|
|
23
|
+
/**
|
|
24
|
+
* Set the margin bottom of the list box. You must use this prop and not style any other way. The
|
|
25
|
+
* `Menu` uses virtualization and needs margins to be set on the correct element. This ensure
|
|
26
|
+
* proper rendering. If a `marginBottom` is not provided, the value falls back to `marginY`.
|
|
27
|
+
*/
|
|
28
|
+
marginBottom?: FlexProps['marginBottom'];
|
|
29
|
+
/**
|
|
30
|
+
* Set the margin top and bottom of the list box. You must use this prop and not style any other way. The
|
|
31
|
+
* `Menu` uses virtualization and needs margins to be set on the correct element. This ensure
|
|
32
|
+
* proper rendering.
|
|
33
|
+
*/
|
|
34
|
+
marginY?: FlexProps['marginY'];
|
|
18
35
|
}
|
|
19
36
|
|
|
20
37
|
export const ListBoxItem = createSubcomponent('li')({
|
|
21
38
|
displayName: 'Item',
|
|
22
39
|
modelHook: useListModel,
|
|
23
40
|
elemPropsHook: useListItemRegister,
|
|
24
|
-
})<
|
|
25
|
-
return <
|
|
41
|
+
})<FlexProps>((elemProps, Element) => {
|
|
42
|
+
return <Element {...mergeStyles(elemProps)} />;
|
|
26
43
|
});
|
|
27
44
|
|
|
28
45
|
export const useListBox = createElemPropsHook(useListModel)(model => {
|
|
@@ -50,6 +67,7 @@ const listBoxContainerStencil = createStencil({
|
|
|
50
67
|
|
|
51
68
|
const listBoxStencil = createStencil({
|
|
52
69
|
base: {
|
|
70
|
+
display: 'flex',
|
|
53
71
|
flexDirection: 'column',
|
|
54
72
|
marginTop: system.space.zero,
|
|
55
73
|
marginBottom: system.space.zero,
|
|
@@ -104,16 +122,16 @@ export const ListBox = createContainer('ul')({
|
|
|
104
122
|
{
|
|
105
123
|
style: {
|
|
106
124
|
maxHeight,
|
|
107
|
-
marginBottom:
|
|
108
|
-
marginTop:
|
|
125
|
+
marginBottom: marginBottom ?? marginY,
|
|
126
|
+
marginTop: marginTop ?? marginY,
|
|
109
127
|
},
|
|
110
128
|
},
|
|
111
129
|
listBoxContainerStencil({orientation: model.state.orientation})
|
|
112
130
|
)}
|
|
113
131
|
>
|
|
114
|
-
<
|
|
132
|
+
<Element {...mergeStyles(elemProps, listBoxStencil())}>
|
|
115
133
|
{useListRenderItems(model, elemProps.children)}
|
|
116
|
-
</
|
|
134
|
+
</Element>
|
|
117
135
|
</div>
|
|
118
136
|
);
|
|
119
137
|
}
|
|
@@ -1,10 +1,27 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
export interface ListBoxProps<T = any> extends Omit<ExtractProps<typeof Flex, never>, 'children'> {
|
|
2
|
+
import { FlexProps } from '@workday/canvas-kit-react/layout';
|
|
3
|
+
export interface ListBoxProps<T = any> extends Omit<FlexProps, 'children'> {
|
|
5
4
|
children?: React.ReactNode | ((item: T, index: number) => React.ReactNode);
|
|
5
|
+
/**
|
|
6
|
+
* Set the margin top of the list box. You must use this prop and not style any other way. The
|
|
7
|
+
* `Menu` uses virtualization and needs margins to be set on the correct element. This ensure
|
|
8
|
+
* proper rendering. If a `marginTop` is not provided, the value falls back to `marginY`.
|
|
9
|
+
*/
|
|
10
|
+
marginTop?: FlexProps['marginTop'];
|
|
11
|
+
/**
|
|
12
|
+
* Set the margin bottom of the list box. You must use this prop and not style any other way. The
|
|
13
|
+
* `Menu` uses virtualization and needs margins to be set on the correct element. This ensure
|
|
14
|
+
* proper rendering. If a `marginBottom` is not provided, the value falls back to `marginY`.
|
|
15
|
+
*/
|
|
16
|
+
marginBottom?: FlexProps['marginBottom'];
|
|
17
|
+
/**
|
|
18
|
+
* Set the margin top and bottom of the list box. You must use this prop and not style any other way. The
|
|
19
|
+
* `Menu` uses virtualization and needs margins to be set on the correct element. This ensure
|
|
20
|
+
* proper rendering.
|
|
21
|
+
*/
|
|
22
|
+
marginY?: FlexProps['marginY'];
|
|
6
23
|
}
|
|
7
|
-
export declare const ListBoxItem: import("@workday/canvas-kit-react/common").ElementComponentM<"li",
|
|
24
|
+
export declare const ListBoxItem: import("@workday/canvas-kit-react/common").ElementComponentM<"li", FlexProps, {
|
|
8
25
|
state: {
|
|
9
26
|
selectedIds: string[] | "all";
|
|
10
27
|
unselectedIds: string[];
|
|
@@ -1105,7 +1122,7 @@ export declare const ListBox: import("@workday/canvas-kit-react/common").Element
|
|
|
1105
1122
|
* functionality. `elemPropsHook` is provided on all compound components and is useful in the
|
|
1106
1123
|
* example to add additional functionality without making a new component.
|
|
1107
1124
|
*/
|
|
1108
|
-
Item: import("@workday/canvas-kit-react/common").ElementComponentM<"li",
|
|
1125
|
+
Item: import("@workday/canvas-kit-react/common").ElementComponentM<"li", FlexProps, {
|
|
1109
1126
|
state: {
|
|
1110
1127
|
selectedIds: string[] | "all";
|
|
1111
1128
|
unselectedIds: string[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../collection/lib/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../collection/lib/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAQxE,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3E;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMtB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOrB,CAAC;AAyBH;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKhB;;;;;;;;OAQG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BN,CAAC"}
|
|
@@ -17,7 +17,7 @@ exports.ListBoxItem = common_1.createSubcomponent('li')({
|
|
|
17
17
|
modelHook: useListModel_1.useListModel,
|
|
18
18
|
elemPropsHook: useListItemRegister_1.useListItemRegister,
|
|
19
19
|
})((elemProps, Element) => {
|
|
20
|
-
return react_1.default.createElement(
|
|
20
|
+
return react_1.default.createElement(Element, Object.assign({}, layout_1.mergeStyles(elemProps)));
|
|
21
21
|
});
|
|
22
22
|
exports.useListBox = common_1.createElemPropsHook(useListModel_1.useListModel)(model => {
|
|
23
23
|
return {
|
|
@@ -28,17 +28,17 @@ exports.useListBox = common_1.createElemPropsHook(useListModel_1.useListModel)(m
|
|
|
28
28
|
};
|
|
29
29
|
});
|
|
30
30
|
const listBoxContainerStencil = canvas_kit_styling_1.createStencil({
|
|
31
|
-
base: { name: "
|
|
31
|
+
base: { name: "5a4829", styles: "box-sizing:border-box;" },
|
|
32
32
|
modifiers: {
|
|
33
33
|
orientation: {
|
|
34
|
-
vertical: { name: "
|
|
35
|
-
horizontal: { name: "
|
|
34
|
+
vertical: { name: "ce1688", styles: "overflow-y:auto;" },
|
|
35
|
+
horizontal: { name: "804c63", styles: "overflow-y:undefined;" }
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
|
-
}, "list-box-container-
|
|
38
|
+
}, "list-box-container-625603");
|
|
39
39
|
const listBoxStencil = canvas_kit_styling_1.createStencil({
|
|
40
|
-
base: { name: "
|
|
41
|
-
}, "list-box-
|
|
40
|
+
base: { name: "7d2605", styles: "box-sizing:border-box;display:flex;flex-direction:column;margin-top:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-zero);" }
|
|
41
|
+
}, "list-box-9c3639");
|
|
42
42
|
/**
|
|
43
43
|
* The `ListBox` component that offers vertical rendering of a collection in the form of a
|
|
44
44
|
* 2-dimension list. It supports virtualization, rendering only visible items in the DOM while also
|
|
@@ -78,9 +78,9 @@ exports.ListBox = common_1.createContainer('ul')({
|
|
|
78
78
|
return (react_1.default.createElement("div", Object.assign({ ref: model.state.containerRef }, canvas_kit_styling_1.handleCsProp({
|
|
79
79
|
style: {
|
|
80
80
|
maxHeight,
|
|
81
|
-
marginBottom:
|
|
82
|
-
marginTop:
|
|
81
|
+
marginBottom: marginBottom !== null && marginBottom !== void 0 ? marginBottom : marginY,
|
|
82
|
+
marginTop: marginTop !== null && marginTop !== void 0 ? marginTop : marginY,
|
|
83
83
|
},
|
|
84
84
|
}, listBoxContainerStencil({ orientation: model.state.orientation }))),
|
|
85
|
-
react_1.default.createElement(
|
|
85
|
+
react_1.default.createElement(Element, Object.assign({}, layout_1.mergeStyles(elemProps, listBoxStencil())), useListRenderItem_1.useListRenderItems(model, elemProps.children))));
|
|
86
86
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,SAAS,EAAC,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAOxE,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG,CACpC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7D;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASvB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;oBAiB1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAenB,CAAC"}
|
|
@@ -27,7 +27,6 @@ const popup_1 = require("@workday/canvas-kit-react/popup");
|
|
|
27
27
|
const useMenuModel_1 = require("./useMenuModel");
|
|
28
28
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
29
29
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
30
|
-
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
31
30
|
exports.useMenuList = common_1.composeHooks(common_1.createElemPropsHook(useMenuModel_1.useMenuModel)(model => {
|
|
32
31
|
return {
|
|
33
32
|
role: 'menu',
|
|
@@ -35,18 +34,18 @@ exports.useMenuList = common_1.composeHooks(common_1.createElemPropsHook(useMenu
|
|
|
35
34
|
};
|
|
36
35
|
}), popup_1.useReturnFocus, popup_1.useFocusRedirect);
|
|
37
36
|
exports.menuListStencil = canvas_kit_styling_1.createStencil({
|
|
38
|
-
base: { name: "
|
|
37
|
+
base: { name: "416313", styles: "box-sizing:border-box;background:var(--cnvs-base-palette-french-vanilla-100);border-radius:var(--cnvs-sys-shape-zero);padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-zero);" },
|
|
39
38
|
modifiers: {
|
|
40
39
|
orientation: {
|
|
41
|
-
vertical: { name: "
|
|
42
|
-
horizontal: { name: "
|
|
40
|
+
vertical: { name: "2d8bcc", styles: "flex-direction:column;" },
|
|
41
|
+
horizontal: { name: "3f1685", styles: "flex-direction:row;" }
|
|
43
42
|
}
|
|
44
43
|
}
|
|
45
|
-
}, "menu-list-
|
|
44
|
+
}, "menu-list-b9b420");
|
|
46
45
|
exports.MenuList = common_1.createSubcomponent('div')({
|
|
47
46
|
displayName: 'Menu.List',
|
|
48
47
|
modelHook: useMenuModel_1.useMenuModel,
|
|
49
48
|
elemPropsHook: exports.useMenuList,
|
|
50
49
|
})(({ children, ...elemProps }, Element, model) => {
|
|
51
|
-
return (React.createElement(collection_1.ListBox, Object.assign({ as: Element, model: model, marginY: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2)
|
|
50
|
+
return (React.createElement(collection_1.ListBox, Object.assign({ as: Element, model: model, marginY: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2) }, canvas_kit_styling_1.handleCsProp(elemProps, exports.menuListStencil({ orientation: model.state.orientation }))), children));
|
|
52
51
|
});
|
|
@@ -1,10 +1,27 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
export interface ListBoxProps<T = any> extends Omit<ExtractProps<typeof Flex, never>, 'children'> {
|
|
2
|
+
import { FlexProps } from '@workday/canvas-kit-react/layout';
|
|
3
|
+
export interface ListBoxProps<T = any> extends Omit<FlexProps, 'children'> {
|
|
5
4
|
children?: React.ReactNode | ((item: T, index: number) => React.ReactNode);
|
|
5
|
+
/**
|
|
6
|
+
* Set the margin top of the list box. You must use this prop and not style any other way. The
|
|
7
|
+
* `Menu` uses virtualization and needs margins to be set on the correct element. This ensure
|
|
8
|
+
* proper rendering. If a `marginTop` is not provided, the value falls back to `marginY`.
|
|
9
|
+
*/
|
|
10
|
+
marginTop?: FlexProps['marginTop'];
|
|
11
|
+
/**
|
|
12
|
+
* Set the margin bottom of the list box. You must use this prop and not style any other way. The
|
|
13
|
+
* `Menu` uses virtualization and needs margins to be set on the correct element. This ensure
|
|
14
|
+
* proper rendering. If a `marginBottom` is not provided, the value falls back to `marginY`.
|
|
15
|
+
*/
|
|
16
|
+
marginBottom?: FlexProps['marginBottom'];
|
|
17
|
+
/**
|
|
18
|
+
* Set the margin top and bottom of the list box. You must use this prop and not style any other way. The
|
|
19
|
+
* `Menu` uses virtualization and needs margins to be set on the correct element. This ensure
|
|
20
|
+
* proper rendering.
|
|
21
|
+
*/
|
|
22
|
+
marginY?: FlexProps['marginY'];
|
|
6
23
|
}
|
|
7
|
-
export declare const ListBoxItem: import("@workday/canvas-kit-react/common").ElementComponentM<"li",
|
|
24
|
+
export declare const ListBoxItem: import("@workday/canvas-kit-react/common").ElementComponentM<"li", FlexProps, {
|
|
8
25
|
state: {
|
|
9
26
|
selectedIds: string[] | "all";
|
|
10
27
|
unselectedIds: string[];
|
|
@@ -1105,7 +1122,7 @@ export declare const ListBox: import("@workday/canvas-kit-react/common").Element
|
|
|
1105
1122
|
* functionality. `elemPropsHook` is provided on all compound components and is useful in the
|
|
1106
1123
|
* example to add additional functionality without making a new component.
|
|
1107
1124
|
*/
|
|
1108
|
-
Item: import("@workday/canvas-kit-react/common").ElementComponentM<"li",
|
|
1125
|
+
Item: import("@workday/canvas-kit-react/common").ElementComponentM<"li", FlexProps, {
|
|
1109
1126
|
state: {
|
|
1110
1127
|
selectedIds: string[] | "all";
|
|
1111
1128
|
unselectedIds: string[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../collection/lib/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../collection/lib/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAQxE,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3E;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMtB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOrB,CAAC;AAyBH;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKhB;;;;;;;;OAQG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BN,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { createContainer, createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
|
|
3
|
-
import {
|
|
3
|
+
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
4
4
|
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { system } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { useListModel } from './useListModel';
|
|
@@ -11,7 +11,7 @@ export const ListBoxItem = createSubcomponent('li')({
|
|
|
11
11
|
modelHook: useListModel,
|
|
12
12
|
elemPropsHook: useListItemRegister,
|
|
13
13
|
})((elemProps, Element) => {
|
|
14
|
-
return React.createElement(
|
|
14
|
+
return React.createElement(Element, Object.assign({}, mergeStyles(elemProps)));
|
|
15
15
|
});
|
|
16
16
|
export const useListBox = createElemPropsHook(useListModel)(model => {
|
|
17
17
|
return {
|
|
@@ -22,17 +22,17 @@ export const useListBox = createElemPropsHook(useListModel)(model => {
|
|
|
22
22
|
};
|
|
23
23
|
});
|
|
24
24
|
const listBoxContainerStencil = createStencil({
|
|
25
|
-
base: { name: "
|
|
25
|
+
base: { name: "5a4829", styles: "box-sizing:border-box;" },
|
|
26
26
|
modifiers: {
|
|
27
27
|
orientation: {
|
|
28
|
-
vertical: { name: "
|
|
29
|
-
horizontal: { name: "
|
|
28
|
+
vertical: { name: "ce1688", styles: "overflow-y:auto;" },
|
|
29
|
+
horizontal: { name: "804c63", styles: "overflow-y:undefined;" }
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
|
-
}, "list-box-container-
|
|
32
|
+
}, "list-box-container-625603");
|
|
33
33
|
const listBoxStencil = createStencil({
|
|
34
|
-
base: { name: "
|
|
35
|
-
}, "list-box-
|
|
34
|
+
base: { name: "7d2605", styles: "box-sizing:border-box;display:flex;flex-direction:column;margin-top:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-zero);" }
|
|
35
|
+
}, "list-box-9c3639");
|
|
36
36
|
/**
|
|
37
37
|
* The `ListBox` component that offers vertical rendering of a collection in the form of a
|
|
38
38
|
* 2-dimension list. It supports virtualization, rendering only visible items in the DOM while also
|
|
@@ -72,9 +72,9 @@ export const ListBox = createContainer('ul')({
|
|
|
72
72
|
return (React.createElement("div", Object.assign({ ref: model.state.containerRef }, handleCsProp({
|
|
73
73
|
style: {
|
|
74
74
|
maxHeight,
|
|
75
|
-
marginBottom:
|
|
76
|
-
marginTop:
|
|
75
|
+
marginBottom: marginBottom !== null && marginBottom !== void 0 ? marginBottom : marginY,
|
|
76
|
+
marginTop: marginTop !== null && marginTop !== void 0 ? marginTop : marginY,
|
|
77
77
|
},
|
|
78
78
|
}, listBoxContainerStencil({ orientation: model.state.orientation }))),
|
|
79
|
-
React.createElement(
|
|
79
|
+
React.createElement(Element, Object.assign({}, mergeStyles(elemProps, listBoxStencil())), useListRenderItems(model, elemProps.children))));
|
|
80
80
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,SAAS,EAAC,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAOxE,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG,CACpC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7D;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASvB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;oBAiB1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAenB,CAAC"}
|
|
@@ -3,9 +3,8 @@ import { createSubcomponent, createElemPropsHook, composeHooks, } from '@workday
|
|
|
3
3
|
import { ListBox } from '@workday/canvas-kit-react/collection';
|
|
4
4
|
import { useReturnFocus, useFocusRedirect } from '@workday/canvas-kit-react/popup';
|
|
5
5
|
import { useMenuModel } from './useMenuModel';
|
|
6
|
-
import { createStencil, cssVar } from '@workday/canvas-kit-styling';
|
|
6
|
+
import { createStencil, cssVar, handleCsProp } from '@workday/canvas-kit-styling';
|
|
7
7
|
import { base, system } from '@workday/canvas-tokens-web';
|
|
8
|
-
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
9
8
|
export const useMenuList = composeHooks(createElemPropsHook(useMenuModel)(model => {
|
|
10
9
|
return {
|
|
11
10
|
role: 'menu',
|
|
@@ -13,18 +12,18 @@ export const useMenuList = composeHooks(createElemPropsHook(useMenuModel)(model
|
|
|
13
12
|
};
|
|
14
13
|
}), useReturnFocus, useFocusRedirect);
|
|
15
14
|
export const menuListStencil = createStencil({
|
|
16
|
-
base: { name: "
|
|
15
|
+
base: { name: "416313", styles: "box-sizing:border-box;background:var(--cnvs-base-palette-french-vanilla-100);border-radius:var(--cnvs-sys-shape-zero);padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-zero);" },
|
|
17
16
|
modifiers: {
|
|
18
17
|
orientation: {
|
|
19
|
-
vertical: { name: "
|
|
20
|
-
horizontal: { name: "
|
|
18
|
+
vertical: { name: "2d8bcc", styles: "flex-direction:column;" },
|
|
19
|
+
horizontal: { name: "3f1685", styles: "flex-direction:row;" }
|
|
21
20
|
}
|
|
22
21
|
}
|
|
23
|
-
}, "menu-list-
|
|
22
|
+
}, "menu-list-b9b420");
|
|
24
23
|
export const MenuList = createSubcomponent('div')({
|
|
25
24
|
displayName: 'Menu.List',
|
|
26
25
|
modelHook: useMenuModel,
|
|
27
26
|
elemPropsHook: useMenuList,
|
|
28
27
|
})(({ children, ...elemProps }, Element, model) => {
|
|
29
|
-
return (React.createElement(ListBox, Object.assign({ as: Element, model: model, marginY: cssVar(system.space.x2)
|
|
28
|
+
return (React.createElement(ListBox, Object.assign({ as: Element, model: model, marginY: cssVar(system.space.x2) }, handleCsProp(elemProps, menuListStencil({ orientation: model.state.orientation }))), children));
|
|
30
29
|
});
|
package/menu/lib/MenuList.tsx
CHANGED
|
@@ -10,9 +10,8 @@ import {ListBox, ListProps} from '@workday/canvas-kit-react/collection';
|
|
|
10
10
|
import {useReturnFocus, useFocusRedirect} from '@workday/canvas-kit-react/popup';
|
|
11
11
|
|
|
12
12
|
import {useMenuModel} from './useMenuModel';
|
|
13
|
-
import {createStencil, cssVar} from '@workday/canvas-kit-styling';
|
|
13
|
+
import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
|
|
14
14
|
import {base, system} from '@workday/canvas-tokens-web';
|
|
15
|
-
import {mergeStyles} from '@workday/canvas-kit-react/layout';
|
|
16
15
|
|
|
17
16
|
export interface MenuListProps<T = any>
|
|
18
17
|
extends Omit<ExtractProps<typeof ListBox, never>, 'children'> {
|
|
@@ -62,8 +61,7 @@ export const MenuList = createSubcomponent('div')({
|
|
|
62
61
|
as={Element}
|
|
63
62
|
model={model}
|
|
64
63
|
marginY={cssVar(system.space.x2)}
|
|
65
|
-
|
|
66
|
-
{...mergeStyles(elemProps, menuListStencil({orientation: model.state.orientation}))}
|
|
64
|
+
{...handleCsProp(elemProps, menuListStencil({orientation: model.state.orientation}))}
|
|
67
65
|
>
|
|
68
66
|
{children}
|
|
69
67
|
</ListBox>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "11.0.
|
|
3
|
+
"version": "11.0.23",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
"@emotion/styled": "^11.6.0",
|
|
50
50
|
"@popperjs/core": "^2.5.4",
|
|
51
51
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
52
|
-
"@workday/canvas-kit-popup-stack": "^11.0.
|
|
53
|
-
"@workday/canvas-kit-styling": "^11.0.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^11.0.23",
|
|
53
|
+
"@workday/canvas-kit-styling": "^11.0.23",
|
|
54
54
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
55
55
|
"@workday/canvas-tokens-web": "^2.0.0",
|
|
56
56
|
"@workday/design-assets-types": "^0.2.8",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
68
68
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "2027105351c4ed414b372c25e50cdd969d24187b"
|
|
71
71
|
}
|