@workday/canvas-kit-preview-react 8.0.0-alpha.192-next.1 → 8.0.0-alpha.194-next.2
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/commonjs/menu/lib/Menu.d.ts +37 -13
- package/dist/commonjs/menu/lib/Menu.d.ts.map +1 -1
- package/dist/commonjs/menu/lib/Menu.js +20 -11
- package/dist/commonjs/menu/lib/MenuItem.d.ts +29 -12
- package/dist/commonjs/menu/lib/MenuItem.d.ts.map +1 -1
- package/dist/commonjs/menu/lib/MenuItem.js +19 -8
- package/dist/es6/menu/lib/Menu.d.ts +37 -13
- package/dist/es6/menu/lib/Menu.d.ts.map +1 -1
- package/dist/es6/menu/lib/Menu.js +19 -10
- package/dist/es6/menu/lib/MenuItem.d.ts +29 -12
- package/dist/es6/menu/lib/MenuItem.d.ts.map +1 -1
- package/dist/es6/menu/lib/MenuItem.js +18 -7
- package/menu/lib/Menu.tsx +53 -16
- package/menu/lib/MenuItem.tsx +39 -14
- package/package.json +4 -4
|
@@ -1,18 +1,26 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { DeprecatedMenuItemProps } from './MenuItem';
|
|
3
3
|
import { GrowthBehavior } from '@workday/canvas-kit-react/common';
|
|
4
|
-
|
|
4
|
+
/**
|
|
5
|
+
* ### Deprecated Menu
|
|
6
|
+
*
|
|
7
|
+
* As of Canvas Kit v8, Menu is being soft-deprecated.
|
|
8
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
9
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
10
|
+
* for more information.
|
|
11
|
+
*/
|
|
12
|
+
export interface DeprecatedMenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLUListElement> {
|
|
5
13
|
/**
|
|
6
|
-
* The
|
|
14
|
+
* The DeprecatedMenuItem children of the DeprecatedMenu (must be at least one). Also accepts other components which share the same interface as `DeprecatedMenuItem`.
|
|
7
15
|
*/
|
|
8
|
-
children?: React.ReactElement<
|
|
16
|
+
children?: React.ReactElement<DeprecatedMenuItemProps> | React.ReactElement<DeprecatedMenuItemProps>[];
|
|
9
17
|
/**
|
|
10
|
-
* If true, set the
|
|
18
|
+
* If true, set the DeprecatedMenu to the open state. Useful for showing and hiding the DeprecatedMenu from a parent component such as a menu button.
|
|
11
19
|
* @default true
|
|
12
20
|
*/
|
|
13
21
|
isOpen?: boolean;
|
|
14
22
|
/**
|
|
15
|
-
* The width of the
|
|
23
|
+
* The width of the DeprecatedMenu. If no value is provided, the DeprecatedMenu will collapse around its content.
|
|
16
24
|
*/
|
|
17
25
|
width?: number | string;
|
|
18
26
|
/**
|
|
@@ -20,7 +28,7 @@ export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLULis
|
|
|
20
28
|
*/
|
|
21
29
|
onSelect?: () => void;
|
|
22
30
|
/**
|
|
23
|
-
* The function called when the
|
|
31
|
+
* The function called when the DeprecatedMenu should close. This is called after a menu item is selected or if the escape shortcut key is used. This will not fire if the menu item sets `shouldClose` to false.
|
|
24
32
|
*/
|
|
25
33
|
onClose?: () => void;
|
|
26
34
|
/**
|
|
@@ -28,24 +36,40 @@ export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLULis
|
|
|
28
36
|
*/
|
|
29
37
|
initialSelectedItem?: number;
|
|
30
38
|
/**
|
|
31
|
-
* The unique id of the
|
|
39
|
+
* The unique id of the DeprecatedMenu used for ARIA and HTML `id` attributes.
|
|
32
40
|
*/
|
|
33
41
|
id?: string;
|
|
34
42
|
/**
|
|
35
|
-
* The HTML `id` of the element that labels the
|
|
43
|
+
* The HTML `id` of the element that labels the DeprecatedMenu. Often used with menu buttons.
|
|
36
44
|
*/
|
|
37
45
|
'aria-labelledby'?: string;
|
|
38
46
|
}
|
|
39
|
-
|
|
47
|
+
/**
|
|
48
|
+
* ### Deprecated Menu State
|
|
49
|
+
*
|
|
50
|
+
* As of Canvas Kit v8, Menu is being soft-deprecated.
|
|
51
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
52
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
53
|
+
* for more information.
|
|
54
|
+
*/
|
|
55
|
+
export interface DeprecatedMenuState {
|
|
40
56
|
selectedItemIndex: number;
|
|
41
57
|
}
|
|
42
|
-
|
|
58
|
+
/**
|
|
59
|
+
* ### Deprecated Menu
|
|
60
|
+
*
|
|
61
|
+
* As of Canvas Kit v8, this component is being soft-deprecated.
|
|
62
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
63
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
64
|
+
* for more information.
|
|
65
|
+
*/
|
|
66
|
+
export declare class DeprecatedMenu extends React.Component<DeprecatedMenuProps, DeprecatedMenuState> {
|
|
43
67
|
private id;
|
|
44
68
|
private animateId;
|
|
45
69
|
private menuRef;
|
|
46
70
|
private firstCharacters;
|
|
47
|
-
constructor(props:
|
|
48
|
-
componentDidUpdate(prevProps:
|
|
71
|
+
constructor(props: DeprecatedMenuProps);
|
|
72
|
+
componentDidUpdate(prevProps: DeprecatedMenuProps): void;
|
|
49
73
|
componentDidMount(): void;
|
|
50
74
|
componentWillUnmount(): void;
|
|
51
75
|
render(): JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,uBAAuB,EAAC,MAAM,YAAY,CAAC;AAGnD,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG;;;;;;;GAOG;AACH,MAAM,WAAW,mBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,GAC3C,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,EAAE,CAAC;IAClD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD;;;;;;;GAOG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC3F,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,mBAAmB;IAetC,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAejD,iBAAiB;IAYjB,oBAAoB;IAIb,MAAM;IAmDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CA8E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CA+BxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}
|
|
@@ -57,7 +57,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
57
57
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
58
58
|
};
|
|
59
59
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
60
|
-
exports.
|
|
60
|
+
exports.DeprecatedMenu = void 0;
|
|
61
61
|
var React = __importStar(require("react"));
|
|
62
62
|
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
63
63
|
var card_1 = require("@workday/canvas-kit-react/card");
|
|
@@ -66,9 +66,17 @@ var common_1 = require("@workday/canvas-kit-react/common");
|
|
|
66
66
|
var List = styled_1.default('ul')(__assign({ background: tokens_1.commonColors.background, borderRadius: tokens_1.borderRadius.m, padding: 0, margin: tokens_1.space.xxs + " 0", '&:focus': {
|
|
67
67
|
outline: 'none',
|
|
68
68
|
} }, common_1.hideMouseFocus));
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
/**
|
|
70
|
+
* ### Deprecated Menu
|
|
71
|
+
*
|
|
72
|
+
* As of Canvas Kit v8, this component is being soft-deprecated.
|
|
73
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
74
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
75
|
+
* for more information.
|
|
76
|
+
*/
|
|
77
|
+
var DeprecatedMenu = /** @class */ (function (_super) {
|
|
78
|
+
__extends(DeprecatedMenu, _super);
|
|
79
|
+
function DeprecatedMenu(props) {
|
|
72
80
|
var _this = _super.call(this, props) || this;
|
|
73
81
|
_this.id = common_1.generateUniqueId();
|
|
74
82
|
_this.getNormalizedItemIndex = function (index) {
|
|
@@ -158,7 +166,7 @@ var Menu = /** @class */ (function (_super) {
|
|
|
158
166
|
_this.handleClick = function (event, menuItemProps) {
|
|
159
167
|
/* istanbul ignore next line for coverage */
|
|
160
168
|
if (menuItemProps.isDisabled) {
|
|
161
|
-
// You should only hit this point if you are using a custom
|
|
169
|
+
// You should only hit this point if you are using a custom DeprecatedMenuItem implementation.
|
|
162
170
|
return;
|
|
163
171
|
}
|
|
164
172
|
if (menuItemProps.onClick) {
|
|
@@ -241,7 +249,7 @@ var Menu = /** @class */ (function (_super) {
|
|
|
241
249
|
};
|
|
242
250
|
return _this;
|
|
243
251
|
}
|
|
244
|
-
|
|
252
|
+
DeprecatedMenu.prototype.componentDidUpdate = function (prevProps) {
|
|
245
253
|
var _this = this;
|
|
246
254
|
if (this.props.children !== prevProps.children) {
|
|
247
255
|
this.setFirstCharacters();
|
|
@@ -256,14 +264,15 @@ var Menu = /** @class */ (function (_super) {
|
|
|
256
264
|
}
|
|
257
265
|
});
|
|
258
266
|
};
|
|
259
|
-
|
|
267
|
+
DeprecatedMenu.prototype.componentDidMount = function () {
|
|
268
|
+
console.warn("This component is being deprecated and will be removed in Canvas Kit V9.\n\n For more information, please see the V8 upgrade guide:\n\n https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page\n ");
|
|
260
269
|
this.setFirstCharacters();
|
|
261
270
|
this.setInitialSelectedItem();
|
|
262
271
|
};
|
|
263
|
-
|
|
272
|
+
DeprecatedMenu.prototype.componentWillUnmount = function () {
|
|
264
273
|
cancelAnimationFrame(this.animateId);
|
|
265
274
|
};
|
|
266
|
-
|
|
275
|
+
DeprecatedMenu.prototype.render = function () {
|
|
267
276
|
var _this = this;
|
|
268
277
|
// TODO: Standardize on prop spread location (see #150)
|
|
269
278
|
var _a = this.props, _b = _a.id, id = _b === void 0 ? this.id : _b, _c = _a.isOpen, isOpen = _c === void 0 ? true : _c, children = _a.children, ariaLabelledby = _a["aria-labelledby"], grow = _a.grow, width = _a.width, onSelect = _a.onSelect, onClose = _a.onClose, initialSelectedItem = _a.initialSelectedItem, elemProps = __rest(_a, ["id", "isOpen", "children", 'aria-labelledby', "grow", "width", "onSelect", "onClose", "initialSelectedItem"]);
|
|
@@ -283,6 +292,6 @@ var Menu = /** @class */ (function (_super) {
|
|
|
283
292
|
})));
|
|
284
293
|
})))));
|
|
285
294
|
};
|
|
286
|
-
return
|
|
295
|
+
return DeprecatedMenu;
|
|
287
296
|
}(React.Component));
|
|
288
|
-
exports.
|
|
297
|
+
exports.DeprecatedMenu = DeprecatedMenu;
|
|
@@ -1,51 +1,68 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { CanvasSystemIcon } from '@workday/design-assets-types';
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* ### Deprecated Menu Item Props
|
|
5
|
+
*
|
|
6
|
+
* As of Canvas Kit v8, Menu is being soft-deprecated.
|
|
7
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
8
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
9
|
+
* for more information.
|
|
10
|
+
*/
|
|
11
|
+
export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
|
|
4
12
|
/**
|
|
5
|
-
* The function called when the
|
|
13
|
+
* The function called when the DeprecatedMenuItem is clicked. If the item is a child of the DeprecatedMenu component, this callback will be decorated with the onSelect and onClose DeprecatedMenu callbacks. This callback will not fire if the item is disabled (see below).
|
|
6
14
|
*/
|
|
7
15
|
onClick?: (event: React.MouseEvent) => void;
|
|
8
16
|
/**
|
|
9
|
-
* The unique id for the
|
|
17
|
+
* The unique id for the DeprecatedMenuItem used for ARIA attributes. If the item is a child of the `DeprecatedMenu` component, this property will be generated and overridden.
|
|
10
18
|
*/
|
|
11
19
|
id?: string;
|
|
12
20
|
/**
|
|
13
|
-
* The icon of the
|
|
21
|
+
* The icon of the DeprecatedMenuItem. This icon is displayed before what you supplied for the children.
|
|
14
22
|
*/
|
|
15
23
|
icon?: CanvasSystemIcon;
|
|
16
24
|
/**
|
|
17
|
-
* The secondary icon of the
|
|
25
|
+
* The secondary icon of the DeprecatedMenuItem. This icon is displayed after what you supplied for the children.
|
|
18
26
|
*/
|
|
19
27
|
secondaryIcon?: CanvasSystemIcon;
|
|
20
28
|
/**
|
|
21
|
-
* If true, render a top border on the
|
|
29
|
+
* If true, render a top border on the DeprecatedMenuItem.
|
|
22
30
|
* @default false
|
|
23
31
|
*/
|
|
24
32
|
hasDivider?: boolean;
|
|
25
33
|
/**
|
|
26
|
-
* If true, set the
|
|
34
|
+
* If true, set the DeprecatedMenuItem to the disabled state so it is not clickable.
|
|
27
35
|
* @default false
|
|
28
36
|
*/
|
|
29
37
|
isDisabled?: boolean;
|
|
30
38
|
/**
|
|
31
|
-
* If true, set the
|
|
39
|
+
* If true, set the DeprecatedMenuItem to be the currently selected item. If the item is a child of the DeprecatedMenu component, this property will be generated and overridden.
|
|
32
40
|
* @default false
|
|
33
41
|
*/
|
|
34
42
|
isFocused?: boolean;
|
|
35
43
|
/**
|
|
36
|
-
* The role of the
|
|
44
|
+
* The role of the DeprecatedMenuItem. Use this to override the role of the item (e.g. you can use this element as an option in a Combobox).
|
|
37
45
|
* @default menuItem
|
|
38
46
|
*/
|
|
39
47
|
role?: string;
|
|
40
48
|
/**
|
|
41
|
-
* If true, allow the onClose
|
|
49
|
+
* If true, allow the onClose DeprecatedMenu callback to be fired after the DeprecatedMenuItem has been clicked.
|
|
42
50
|
* @default true
|
|
43
51
|
*/
|
|
44
52
|
shouldClose?: boolean;
|
|
45
53
|
}
|
|
46
|
-
|
|
54
|
+
/**
|
|
55
|
+
* ### Deprecated Menu Item
|
|
56
|
+
*
|
|
57
|
+
* As of Canvas Kit v8, Menu is being soft-deprecated.
|
|
58
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
59
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
60
|
+
* for more information.
|
|
61
|
+
*/
|
|
62
|
+
export declare class DeprecatedMenuItem extends React.Component<DeprecatedMenuItemProps> {
|
|
47
63
|
ref: React.RefObject<HTMLLIElement>;
|
|
48
|
-
|
|
64
|
+
componentDidMount(): void;
|
|
65
|
+
componentDidUpdate: (prevProps: DeprecatedMenuItemProps) => void;
|
|
49
66
|
render(): JSX.Element;
|
|
50
67
|
private handleClick;
|
|
51
68
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D;;;;;;;GAOG;AACH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACpF;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAwLD;;;;;;;GAOG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;IAC9E,GAAG,iCAAoC;IAEvC,iBAAiB;IASjB,kBAAkB,cAAe,uBAAuB,UAMtD;IAEF,MAAM;IAyCN,OAAO,CAAC,WAAW,CAOjB;CACH"}
|
|
@@ -57,7 +57,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
57
57
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
58
58
|
};
|
|
59
59
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
60
|
-
exports.
|
|
60
|
+
exports.DeprecatedMenuItem = void 0;
|
|
61
61
|
var React = __importStar(require("react"));
|
|
62
62
|
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
63
63
|
var tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
@@ -193,9 +193,17 @@ var scrollIntoViewIfNeeded = function (elem, centerIfNeeded) {
|
|
|
193
193
|
}
|
|
194
194
|
}
|
|
195
195
|
};
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
196
|
+
/**
|
|
197
|
+
* ### Deprecated Menu Item
|
|
198
|
+
*
|
|
199
|
+
* As of Canvas Kit v8, Menu is being soft-deprecated.
|
|
200
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
201
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
202
|
+
* for more information.
|
|
203
|
+
*/
|
|
204
|
+
var DeprecatedMenuItem = /** @class */ (function (_super) {
|
|
205
|
+
__extends(DeprecatedMenuItem, _super);
|
|
206
|
+
function DeprecatedMenuItem() {
|
|
199
207
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
200
208
|
_this.ref = React.createRef();
|
|
201
209
|
_this.componentDidUpdate = function (prevProps) {
|
|
@@ -215,7 +223,10 @@ var MenuItem = /** @class */ (function (_super) {
|
|
|
215
223
|
};
|
|
216
224
|
return _this;
|
|
217
225
|
}
|
|
218
|
-
|
|
226
|
+
DeprecatedMenuItem.prototype.componentDidMount = function () {
|
|
227
|
+
console.warn("This component is being deprecated and will be removed in Canvas Kit V9.\n\n For more information, please see the V8 upgrade guide:\n\n https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page\n ");
|
|
228
|
+
};
|
|
229
|
+
DeprecatedMenuItem.prototype.render = function () {
|
|
219
230
|
var _a = this.props, onClick = _a.onClick, children = _a.children, id = _a.id, icon = _a.icon, secondaryIcon = _a.secondaryIcon, hasDivider = _a.hasDivider, isDisabled = _a.isDisabled, isFocused = _a.isFocused, role = _a.role, elemProps = __rest(_a, ["onClick", "children", "id", "icon", "secondaryIcon", "hasDivider", "isDisabled", "isFocused", "role"]);
|
|
220
231
|
iconProps = setIconProps(icon, isDisabled, isFocused);
|
|
221
232
|
secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
|
|
@@ -226,9 +237,9 @@ var MenuItem = /** @class */ (function (_super) {
|
|
|
226
237
|
React.createElement(LabelContainer, null, children),
|
|
227
238
|
secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, __assign({}, secondaryIconProps))))));
|
|
228
239
|
};
|
|
229
|
-
return
|
|
240
|
+
return DeprecatedMenuItem;
|
|
230
241
|
}(React.Component));
|
|
231
|
-
exports.
|
|
242
|
+
exports.DeprecatedMenuItem = DeprecatedMenuItem;
|
|
232
243
|
/**
|
|
233
244
|
* If we destructure props, shouldClose will be undefined because the value is only applied for the render method only.
|
|
234
245
|
* We have to use defaultProps so that the value of shouldClose is applied for every method and therefore references in the Menu component.
|
|
@@ -236,7 +247,7 @@ exports.MenuItem = MenuItem;
|
|
|
236
247
|
*/
|
|
237
248
|
// TODO: Remove this ts-ignore when we convert to a functional component
|
|
238
249
|
// @ts-ignore
|
|
239
|
-
|
|
250
|
+
DeprecatedMenuItem.defaultProps = {
|
|
240
251
|
shouldClose: true,
|
|
241
252
|
role: 'menuitem',
|
|
242
253
|
};
|
|
@@ -1,18 +1,26 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { DeprecatedMenuItemProps } from './MenuItem';
|
|
3
3
|
import { GrowthBehavior } from '@workday/canvas-kit-react/common';
|
|
4
|
-
|
|
4
|
+
/**
|
|
5
|
+
* ### Deprecated Menu
|
|
6
|
+
*
|
|
7
|
+
* As of Canvas Kit v8, Menu is being soft-deprecated.
|
|
8
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
9
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
10
|
+
* for more information.
|
|
11
|
+
*/
|
|
12
|
+
export interface DeprecatedMenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLUListElement> {
|
|
5
13
|
/**
|
|
6
|
-
* The
|
|
14
|
+
* The DeprecatedMenuItem children of the DeprecatedMenu (must be at least one). Also accepts other components which share the same interface as `DeprecatedMenuItem`.
|
|
7
15
|
*/
|
|
8
|
-
children?: React.ReactElement<
|
|
16
|
+
children?: React.ReactElement<DeprecatedMenuItemProps> | React.ReactElement<DeprecatedMenuItemProps>[];
|
|
9
17
|
/**
|
|
10
|
-
* If true, set the
|
|
18
|
+
* If true, set the DeprecatedMenu to the open state. Useful for showing and hiding the DeprecatedMenu from a parent component such as a menu button.
|
|
11
19
|
* @default true
|
|
12
20
|
*/
|
|
13
21
|
isOpen?: boolean;
|
|
14
22
|
/**
|
|
15
|
-
* The width of the
|
|
23
|
+
* The width of the DeprecatedMenu. If no value is provided, the DeprecatedMenu will collapse around its content.
|
|
16
24
|
*/
|
|
17
25
|
width?: number | string;
|
|
18
26
|
/**
|
|
@@ -20,7 +28,7 @@ export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLULis
|
|
|
20
28
|
*/
|
|
21
29
|
onSelect?: () => void;
|
|
22
30
|
/**
|
|
23
|
-
* The function called when the
|
|
31
|
+
* The function called when the DeprecatedMenu should close. This is called after a menu item is selected or if the escape shortcut key is used. This will not fire if the menu item sets `shouldClose` to false.
|
|
24
32
|
*/
|
|
25
33
|
onClose?: () => void;
|
|
26
34
|
/**
|
|
@@ -28,24 +36,40 @@ export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLULis
|
|
|
28
36
|
*/
|
|
29
37
|
initialSelectedItem?: number;
|
|
30
38
|
/**
|
|
31
|
-
* The unique id of the
|
|
39
|
+
* The unique id of the DeprecatedMenu used for ARIA and HTML `id` attributes.
|
|
32
40
|
*/
|
|
33
41
|
id?: string;
|
|
34
42
|
/**
|
|
35
|
-
* The HTML `id` of the element that labels the
|
|
43
|
+
* The HTML `id` of the element that labels the DeprecatedMenu. Often used with menu buttons.
|
|
36
44
|
*/
|
|
37
45
|
'aria-labelledby'?: string;
|
|
38
46
|
}
|
|
39
|
-
|
|
47
|
+
/**
|
|
48
|
+
* ### Deprecated Menu State
|
|
49
|
+
*
|
|
50
|
+
* As of Canvas Kit v8, Menu is being soft-deprecated.
|
|
51
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
52
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
53
|
+
* for more information.
|
|
54
|
+
*/
|
|
55
|
+
export interface DeprecatedMenuState {
|
|
40
56
|
selectedItemIndex: number;
|
|
41
57
|
}
|
|
42
|
-
|
|
58
|
+
/**
|
|
59
|
+
* ### Deprecated Menu
|
|
60
|
+
*
|
|
61
|
+
* As of Canvas Kit v8, this component is being soft-deprecated.
|
|
62
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
63
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
64
|
+
* for more information.
|
|
65
|
+
*/
|
|
66
|
+
export declare class DeprecatedMenu extends React.Component<DeprecatedMenuProps, DeprecatedMenuState> {
|
|
43
67
|
private id;
|
|
44
68
|
private animateId;
|
|
45
69
|
private menuRef;
|
|
46
70
|
private firstCharacters;
|
|
47
|
-
constructor(props:
|
|
48
|
-
componentDidUpdate(prevProps:
|
|
71
|
+
constructor(props: DeprecatedMenuProps);
|
|
72
|
+
componentDidUpdate(prevProps: DeprecatedMenuProps): void;
|
|
49
73
|
componentDidMount(): void;
|
|
50
74
|
componentWillUnmount(): void;
|
|
51
75
|
render(): JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,uBAAuB,EAAC,MAAM,YAAY,CAAC;AAGnD,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG;;;;;;;GAOG;AACH,MAAM,WAAW,mBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,GAC3C,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,EAAE,CAAC;IAClD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD;;;;;;;GAOG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC3F,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,mBAAmB;IAetC,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAejD,iBAAiB;IAYjB,oBAAoB;IAIb,MAAM;IAmDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CA8E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CA+BxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}
|
|
@@ -41,9 +41,17 @@ import { hideMouseFocus, generateUniqueId } from '@workday/canvas-kit-react/comm
|
|
|
41
41
|
var List = styled('ul')(__assign({ background: commonColors.background, borderRadius: borderRadius.m, padding: 0, margin: space.xxs + " 0", '&:focus': {
|
|
42
42
|
outline: 'none',
|
|
43
43
|
} }, hideMouseFocus));
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
44
|
+
/**
|
|
45
|
+
* ### Deprecated Menu
|
|
46
|
+
*
|
|
47
|
+
* As of Canvas Kit v8, this component is being soft-deprecated.
|
|
48
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
49
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
50
|
+
* for more information.
|
|
51
|
+
*/
|
|
52
|
+
var DeprecatedMenu = /** @class */ (function (_super) {
|
|
53
|
+
__extends(DeprecatedMenu, _super);
|
|
54
|
+
function DeprecatedMenu(props) {
|
|
47
55
|
var _this = _super.call(this, props) || this;
|
|
48
56
|
_this.id = generateUniqueId();
|
|
49
57
|
_this.getNormalizedItemIndex = function (index) {
|
|
@@ -133,7 +141,7 @@ var Menu = /** @class */ (function (_super) {
|
|
|
133
141
|
_this.handleClick = function (event, menuItemProps) {
|
|
134
142
|
/* istanbul ignore next line for coverage */
|
|
135
143
|
if (menuItemProps.isDisabled) {
|
|
136
|
-
// You should only hit this point if you are using a custom
|
|
144
|
+
// You should only hit this point if you are using a custom DeprecatedMenuItem implementation.
|
|
137
145
|
return;
|
|
138
146
|
}
|
|
139
147
|
if (menuItemProps.onClick) {
|
|
@@ -216,7 +224,7 @@ var Menu = /** @class */ (function (_super) {
|
|
|
216
224
|
};
|
|
217
225
|
return _this;
|
|
218
226
|
}
|
|
219
|
-
|
|
227
|
+
DeprecatedMenu.prototype.componentDidUpdate = function (prevProps) {
|
|
220
228
|
var _this = this;
|
|
221
229
|
if (this.props.children !== prevProps.children) {
|
|
222
230
|
this.setFirstCharacters();
|
|
@@ -231,14 +239,15 @@ var Menu = /** @class */ (function (_super) {
|
|
|
231
239
|
}
|
|
232
240
|
});
|
|
233
241
|
};
|
|
234
|
-
|
|
242
|
+
DeprecatedMenu.prototype.componentDidMount = function () {
|
|
243
|
+
console.warn("This component is being deprecated and will be removed in Canvas Kit V9.\n\n For more information, please see the V8 upgrade guide:\n\n https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page\n ");
|
|
235
244
|
this.setFirstCharacters();
|
|
236
245
|
this.setInitialSelectedItem();
|
|
237
246
|
};
|
|
238
|
-
|
|
247
|
+
DeprecatedMenu.prototype.componentWillUnmount = function () {
|
|
239
248
|
cancelAnimationFrame(this.animateId);
|
|
240
249
|
};
|
|
241
|
-
|
|
250
|
+
DeprecatedMenu.prototype.render = function () {
|
|
242
251
|
var _this = this;
|
|
243
252
|
// TODO: Standardize on prop spread location (see #150)
|
|
244
253
|
var _a = this.props, _b = _a.id, id = _b === void 0 ? this.id : _b, _c = _a.isOpen, isOpen = _c === void 0 ? true : _c, children = _a.children, ariaLabelledby = _a["aria-labelledby"], grow = _a.grow, width = _a.width, onSelect = _a.onSelect, onClose = _a.onClose, initialSelectedItem = _a.initialSelectedItem, elemProps = __rest(_a, ["id", "isOpen", "children", 'aria-labelledby', "grow", "width", "onSelect", "onClose", "initialSelectedItem"]);
|
|
@@ -258,6 +267,6 @@ var Menu = /** @class */ (function (_super) {
|
|
|
258
267
|
})));
|
|
259
268
|
})))));
|
|
260
269
|
};
|
|
261
|
-
return
|
|
270
|
+
return DeprecatedMenu;
|
|
262
271
|
}(React.Component));
|
|
263
|
-
export {
|
|
272
|
+
export { DeprecatedMenu };
|
|
@@ -1,51 +1,68 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { CanvasSystemIcon } from '@workday/design-assets-types';
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* ### Deprecated Menu Item Props
|
|
5
|
+
*
|
|
6
|
+
* As of Canvas Kit v8, Menu is being soft-deprecated.
|
|
7
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
8
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
9
|
+
* for more information.
|
|
10
|
+
*/
|
|
11
|
+
export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
|
|
4
12
|
/**
|
|
5
|
-
* The function called when the
|
|
13
|
+
* The function called when the DeprecatedMenuItem is clicked. If the item is a child of the DeprecatedMenu component, this callback will be decorated with the onSelect and onClose DeprecatedMenu callbacks. This callback will not fire if the item is disabled (see below).
|
|
6
14
|
*/
|
|
7
15
|
onClick?: (event: React.MouseEvent) => void;
|
|
8
16
|
/**
|
|
9
|
-
* The unique id for the
|
|
17
|
+
* The unique id for the DeprecatedMenuItem used for ARIA attributes. If the item is a child of the `DeprecatedMenu` component, this property will be generated and overridden.
|
|
10
18
|
*/
|
|
11
19
|
id?: string;
|
|
12
20
|
/**
|
|
13
|
-
* The icon of the
|
|
21
|
+
* The icon of the DeprecatedMenuItem. This icon is displayed before what you supplied for the children.
|
|
14
22
|
*/
|
|
15
23
|
icon?: CanvasSystemIcon;
|
|
16
24
|
/**
|
|
17
|
-
* The secondary icon of the
|
|
25
|
+
* The secondary icon of the DeprecatedMenuItem. This icon is displayed after what you supplied for the children.
|
|
18
26
|
*/
|
|
19
27
|
secondaryIcon?: CanvasSystemIcon;
|
|
20
28
|
/**
|
|
21
|
-
* If true, render a top border on the
|
|
29
|
+
* If true, render a top border on the DeprecatedMenuItem.
|
|
22
30
|
* @default false
|
|
23
31
|
*/
|
|
24
32
|
hasDivider?: boolean;
|
|
25
33
|
/**
|
|
26
|
-
* If true, set the
|
|
34
|
+
* If true, set the DeprecatedMenuItem to the disabled state so it is not clickable.
|
|
27
35
|
* @default false
|
|
28
36
|
*/
|
|
29
37
|
isDisabled?: boolean;
|
|
30
38
|
/**
|
|
31
|
-
* If true, set the
|
|
39
|
+
* If true, set the DeprecatedMenuItem to be the currently selected item. If the item is a child of the DeprecatedMenu component, this property will be generated and overridden.
|
|
32
40
|
* @default false
|
|
33
41
|
*/
|
|
34
42
|
isFocused?: boolean;
|
|
35
43
|
/**
|
|
36
|
-
* The role of the
|
|
44
|
+
* The role of the DeprecatedMenuItem. Use this to override the role of the item (e.g. you can use this element as an option in a Combobox).
|
|
37
45
|
* @default menuItem
|
|
38
46
|
*/
|
|
39
47
|
role?: string;
|
|
40
48
|
/**
|
|
41
|
-
* If true, allow the onClose
|
|
49
|
+
* If true, allow the onClose DeprecatedMenu callback to be fired after the DeprecatedMenuItem has been clicked.
|
|
42
50
|
* @default true
|
|
43
51
|
*/
|
|
44
52
|
shouldClose?: boolean;
|
|
45
53
|
}
|
|
46
|
-
|
|
54
|
+
/**
|
|
55
|
+
* ### Deprecated Menu Item
|
|
56
|
+
*
|
|
57
|
+
* As of Canvas Kit v8, Menu is being soft-deprecated.
|
|
58
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
59
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
60
|
+
* for more information.
|
|
61
|
+
*/
|
|
62
|
+
export declare class DeprecatedMenuItem extends React.Component<DeprecatedMenuItemProps> {
|
|
47
63
|
ref: React.RefObject<HTMLLIElement>;
|
|
48
|
-
|
|
64
|
+
componentDidMount(): void;
|
|
65
|
+
componentDidUpdate: (prevProps: DeprecatedMenuItemProps) => void;
|
|
49
66
|
render(): JSX.Element;
|
|
50
67
|
private handleClick;
|
|
51
68
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D;;;;;;;GAOG;AACH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACpF;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAwLD;;;;;;;GAOG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;IAC9E,GAAG,iCAAoC;IAEvC,iBAAiB;IASjB,kBAAkB,cAAe,uBAAuB,UAMtD;IAEF,MAAM;IAyCN,OAAO,CAAC,WAAW,CAOjB;CACH"}
|
|
@@ -168,9 +168,17 @@ var scrollIntoViewIfNeeded = function (elem, centerIfNeeded) {
|
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
170
|
};
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
171
|
+
/**
|
|
172
|
+
* ### Deprecated Menu Item
|
|
173
|
+
*
|
|
174
|
+
* As of Canvas Kit v8, Menu is being soft-deprecated.
|
|
175
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
176
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
177
|
+
* for more information.
|
|
178
|
+
*/
|
|
179
|
+
var DeprecatedMenuItem = /** @class */ (function (_super) {
|
|
180
|
+
__extends(DeprecatedMenuItem, _super);
|
|
181
|
+
function DeprecatedMenuItem() {
|
|
174
182
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
175
183
|
_this.ref = React.createRef();
|
|
176
184
|
_this.componentDidUpdate = function (prevProps) {
|
|
@@ -190,7 +198,10 @@ var MenuItem = /** @class */ (function (_super) {
|
|
|
190
198
|
};
|
|
191
199
|
return _this;
|
|
192
200
|
}
|
|
193
|
-
|
|
201
|
+
DeprecatedMenuItem.prototype.componentDidMount = function () {
|
|
202
|
+
console.warn("This component is being deprecated and will be removed in Canvas Kit V9.\n\n For more information, please see the V8 upgrade guide:\n\n https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page\n ");
|
|
203
|
+
};
|
|
204
|
+
DeprecatedMenuItem.prototype.render = function () {
|
|
194
205
|
var _a = this.props, onClick = _a.onClick, children = _a.children, id = _a.id, icon = _a.icon, secondaryIcon = _a.secondaryIcon, hasDivider = _a.hasDivider, isDisabled = _a.isDisabled, isFocused = _a.isFocused, role = _a.role, elemProps = __rest(_a, ["onClick", "children", "id", "icon", "secondaryIcon", "hasDivider", "isDisabled", "isFocused", "role"]);
|
|
195
206
|
iconProps = setIconProps(icon, isDisabled, isFocused);
|
|
196
207
|
secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
|
|
@@ -201,9 +212,9 @@ var MenuItem = /** @class */ (function (_super) {
|
|
|
201
212
|
React.createElement(LabelContainer, null, children),
|
|
202
213
|
secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, __assign({}, secondaryIconProps))))));
|
|
203
214
|
};
|
|
204
|
-
return
|
|
215
|
+
return DeprecatedMenuItem;
|
|
205
216
|
}(React.Component));
|
|
206
|
-
export {
|
|
217
|
+
export { DeprecatedMenuItem };
|
|
207
218
|
/**
|
|
208
219
|
* If we destructure props, shouldClose will be undefined because the value is only applied for the render method only.
|
|
209
220
|
* We have to use defaultProps so that the value of shouldClose is applied for every method and therefore references in the Menu component.
|
|
@@ -211,7 +222,7 @@ export { MenuItem };
|
|
|
211
222
|
*/
|
|
212
223
|
// TODO: Remove this ts-ignore when we convert to a functional component
|
|
213
224
|
// @ts-ignore
|
|
214
|
-
|
|
225
|
+
DeprecatedMenuItem.defaultProps = {
|
|
215
226
|
shouldClose: true,
|
|
216
227
|
role: 'menuitem',
|
|
217
228
|
};
|
package/menu/lib/Menu.tsx
CHANGED
|
@@ -1,23 +1,35 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import {DeprecatedMenuItemProps} from './MenuItem';
|
|
5
5
|
import {Card} from '@workday/canvas-kit-react/card';
|
|
6
6
|
import {commonColors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
|
|
7
7
|
import {hideMouseFocus, GrowthBehavior, generateUniqueId} from '@workday/canvas-kit-react/common';
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
/**
|
|
10
|
+
* ### Deprecated Menu
|
|
11
|
+
*
|
|
12
|
+
* As of Canvas Kit v8, Menu is being soft-deprecated.
|
|
13
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
14
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
15
|
+
* for more information.
|
|
16
|
+
*/
|
|
17
|
+
export interface DeprecatedMenuProps
|
|
18
|
+
extends GrowthBehavior,
|
|
19
|
+
React.HTMLAttributes<HTMLUListElement> {
|
|
10
20
|
/**
|
|
11
|
-
* The
|
|
21
|
+
* The DeprecatedMenuItem children of the DeprecatedMenu (must be at least one). Also accepts other components which share the same interface as `DeprecatedMenuItem`.
|
|
12
22
|
*/
|
|
13
|
-
children?:
|
|
23
|
+
children?:
|
|
24
|
+
| React.ReactElement<DeprecatedMenuItemProps>
|
|
25
|
+
| React.ReactElement<DeprecatedMenuItemProps>[];
|
|
14
26
|
/**
|
|
15
|
-
* If true, set the
|
|
27
|
+
* If true, set the DeprecatedMenu to the open state. Useful for showing and hiding the DeprecatedMenu from a parent component such as a menu button.
|
|
16
28
|
* @default true
|
|
17
29
|
*/
|
|
18
30
|
isOpen?: boolean;
|
|
19
31
|
/**
|
|
20
|
-
* The width of the
|
|
32
|
+
* The width of the DeprecatedMenu. If no value is provided, the DeprecatedMenu will collapse around its content.
|
|
21
33
|
*/
|
|
22
34
|
width?: number | string;
|
|
23
35
|
/**
|
|
@@ -25,7 +37,7 @@ export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLULis
|
|
|
25
37
|
*/
|
|
26
38
|
onSelect?: () => void;
|
|
27
39
|
/**
|
|
28
|
-
* The function called when the
|
|
40
|
+
* The function called when the DeprecatedMenu should close. This is called after a menu item is selected or if the escape shortcut key is used. This will not fire if the menu item sets `shouldClose` to false.
|
|
29
41
|
*/
|
|
30
42
|
onClose?: () => void;
|
|
31
43
|
/**
|
|
@@ -33,16 +45,24 @@ export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLULis
|
|
|
33
45
|
*/
|
|
34
46
|
initialSelectedItem?: number;
|
|
35
47
|
/**
|
|
36
|
-
* The unique id of the
|
|
48
|
+
* The unique id of the DeprecatedMenu used for ARIA and HTML `id` attributes.
|
|
37
49
|
*/
|
|
38
50
|
id?: string;
|
|
39
51
|
/**
|
|
40
|
-
* The HTML `id` of the element that labels the
|
|
52
|
+
* The HTML `id` of the element that labels the DeprecatedMenu. Often used with menu buttons.
|
|
41
53
|
*/
|
|
42
54
|
'aria-labelledby'?: string;
|
|
43
55
|
}
|
|
44
56
|
|
|
45
|
-
|
|
57
|
+
/**
|
|
58
|
+
* ### Deprecated Menu State
|
|
59
|
+
*
|
|
60
|
+
* As of Canvas Kit v8, Menu is being soft-deprecated.
|
|
61
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
62
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
63
|
+
* for more information.
|
|
64
|
+
*/
|
|
65
|
+
export interface DeprecatedMenuState {
|
|
46
66
|
selectedItemIndex: number;
|
|
47
67
|
}
|
|
48
68
|
|
|
@@ -57,14 +77,22 @@ const List = styled('ul')({
|
|
|
57
77
|
...hideMouseFocus,
|
|
58
78
|
});
|
|
59
79
|
|
|
60
|
-
|
|
80
|
+
/**
|
|
81
|
+
* ### Deprecated Menu
|
|
82
|
+
*
|
|
83
|
+
* As of Canvas Kit v8, this component is being soft-deprecated.
|
|
84
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
85
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
86
|
+
* for more information.
|
|
87
|
+
*/
|
|
88
|
+
export class DeprecatedMenu extends React.Component<DeprecatedMenuProps, DeprecatedMenuState> {
|
|
61
89
|
private id = generateUniqueId();
|
|
62
90
|
private animateId!: number;
|
|
63
91
|
|
|
64
92
|
private menuRef: React.RefObject<HTMLUListElement>;
|
|
65
93
|
private firstCharacters!: string[];
|
|
66
94
|
|
|
67
|
-
constructor(props:
|
|
95
|
+
constructor(props: DeprecatedMenuProps) {
|
|
68
96
|
super(props);
|
|
69
97
|
this.menuRef = React.createRef();
|
|
70
98
|
|
|
@@ -79,7 +107,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
|
|
|
79
107
|
};
|
|
80
108
|
}
|
|
81
109
|
|
|
82
|
-
componentDidUpdate(prevProps:
|
|
110
|
+
componentDidUpdate(prevProps: DeprecatedMenuProps) {
|
|
83
111
|
if (this.props.children !== prevProps.children) {
|
|
84
112
|
this.setFirstCharacters();
|
|
85
113
|
this.setInitialSelectedItem();
|
|
@@ -95,6 +123,13 @@ export class Menu extends React.Component<MenuProps, MenuState> {
|
|
|
95
123
|
}
|
|
96
124
|
|
|
97
125
|
componentDidMount() {
|
|
126
|
+
console.warn(
|
|
127
|
+
`This component is being deprecated and will be removed in Canvas Kit V9.\n
|
|
128
|
+
For more information, please see the V8 upgrade guide:\n
|
|
129
|
+
https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page
|
|
130
|
+
`
|
|
131
|
+
);
|
|
132
|
+
|
|
98
133
|
this.setFirstCharacters();
|
|
99
134
|
this.setInitialSelectedItem();
|
|
100
135
|
}
|
|
@@ -231,7 +266,9 @@ export class Menu extends React.Component<MenuProps, MenuState> {
|
|
|
231
266
|
case ' ':
|
|
232
267
|
case 'Enter':
|
|
233
268
|
nextSelectedIndex = this.state.selectedItemIndex;
|
|
234
|
-
const child = children[this.state.selectedItemIndex] as React.ReactElement<
|
|
269
|
+
const child = children[this.state.selectedItemIndex] as React.ReactElement<
|
|
270
|
+
DeprecatedMenuItemProps
|
|
271
|
+
>;
|
|
235
272
|
this.handleClick(event, child.props);
|
|
236
273
|
isShortcut = true;
|
|
237
274
|
break;
|
|
@@ -248,11 +285,11 @@ export class Menu extends React.Component<MenuProps, MenuState> {
|
|
|
248
285
|
|
|
249
286
|
private handleClick = (
|
|
250
287
|
event: React.MouseEvent | React.KeyboardEvent,
|
|
251
|
-
menuItemProps:
|
|
288
|
+
menuItemProps: DeprecatedMenuItemProps
|
|
252
289
|
): void => {
|
|
253
290
|
/* istanbul ignore next line for coverage */
|
|
254
291
|
if (menuItemProps.isDisabled) {
|
|
255
|
-
// You should only hit this point if you are using a custom
|
|
292
|
+
// You should only hit this point if you are using a custom DeprecatedMenuItem implementation.
|
|
256
293
|
return;
|
|
257
294
|
}
|
|
258
295
|
if (menuItemProps.onClick) {
|
package/menu/lib/MenuItem.tsx
CHANGED
|
@@ -11,51 +11,59 @@ import {
|
|
|
11
11
|
import {CanvasSystemIcon} from '@workday/design-assets-types';
|
|
12
12
|
import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
/**
|
|
15
|
+
* ### Deprecated Menu Item Props
|
|
16
|
+
*
|
|
17
|
+
* As of Canvas Kit v8, Menu is being soft-deprecated.
|
|
18
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
19
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
20
|
+
* for more information.
|
|
21
|
+
*/
|
|
22
|
+
export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
|
|
15
23
|
/**
|
|
16
|
-
* The function called when the
|
|
24
|
+
* The function called when the DeprecatedMenuItem is clicked. If the item is a child of the DeprecatedMenu component, this callback will be decorated with the onSelect and onClose DeprecatedMenu callbacks. This callback will not fire if the item is disabled (see below).
|
|
17
25
|
*/
|
|
18
26
|
onClick?: (event: React.MouseEvent) => void;
|
|
19
27
|
/**
|
|
20
|
-
* The unique id for the
|
|
28
|
+
* The unique id for the DeprecatedMenuItem used for ARIA attributes. If the item is a child of the `DeprecatedMenu` component, this property will be generated and overridden.
|
|
21
29
|
*/
|
|
22
30
|
id?: string;
|
|
23
31
|
/**
|
|
24
|
-
* The icon of the
|
|
32
|
+
* The icon of the DeprecatedMenuItem. This icon is displayed before what you supplied for the children.
|
|
25
33
|
*/
|
|
26
34
|
icon?: CanvasSystemIcon;
|
|
27
35
|
/**
|
|
28
|
-
* The secondary icon of the
|
|
36
|
+
* The secondary icon of the DeprecatedMenuItem. This icon is displayed after what you supplied for the children.
|
|
29
37
|
*/
|
|
30
38
|
secondaryIcon?: CanvasSystemIcon;
|
|
31
39
|
/**
|
|
32
|
-
* If true, render a top border on the
|
|
40
|
+
* If true, render a top border on the DeprecatedMenuItem.
|
|
33
41
|
* @default false
|
|
34
42
|
*/
|
|
35
43
|
hasDivider?: boolean;
|
|
36
44
|
/**
|
|
37
|
-
* If true, set the
|
|
45
|
+
* If true, set the DeprecatedMenuItem to the disabled state so it is not clickable.
|
|
38
46
|
* @default false
|
|
39
47
|
*/
|
|
40
48
|
isDisabled?: boolean;
|
|
41
49
|
/**
|
|
42
|
-
* If true, set the
|
|
50
|
+
* If true, set the DeprecatedMenuItem to be the currently selected item. If the item is a child of the DeprecatedMenu component, this property will be generated and overridden.
|
|
43
51
|
* @default false
|
|
44
52
|
*/
|
|
45
53
|
isFocused?: boolean;
|
|
46
54
|
/**
|
|
47
|
-
* The role of the
|
|
55
|
+
* The role of the DeprecatedMenuItem. Use this to override the role of the item (e.g. you can use this element as an option in a Combobox).
|
|
48
56
|
* @default menuItem
|
|
49
57
|
*/
|
|
50
58
|
role?: string;
|
|
51
59
|
/**
|
|
52
|
-
* If true, allow the onClose
|
|
60
|
+
* If true, allow the onClose DeprecatedMenu callback to be fired after the DeprecatedMenuItem has been clicked.
|
|
53
61
|
* @default true
|
|
54
62
|
*/
|
|
55
63
|
shouldClose?: boolean;
|
|
56
64
|
}
|
|
57
65
|
|
|
58
|
-
const Item = styled('li')<Pick<
|
|
66
|
+
const Item = styled('li')<Pick<DeprecatedMenuItemProps, 'isDisabled' | 'isFocused'>>(
|
|
59
67
|
{
|
|
60
68
|
...type.levels.subtext.large,
|
|
61
69
|
padding: `${space.xxs} ${space.s}`,
|
|
@@ -237,10 +245,27 @@ const scrollIntoViewIfNeeded = (elem: HTMLElement, centerIfNeeded = true): void
|
|
|
237
245
|
}
|
|
238
246
|
};
|
|
239
247
|
|
|
240
|
-
|
|
248
|
+
/**
|
|
249
|
+
* ### Deprecated Menu Item
|
|
250
|
+
*
|
|
251
|
+
* As of Canvas Kit v8, Menu is being soft-deprecated.
|
|
252
|
+
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
253
|
+
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
254
|
+
* for more information.
|
|
255
|
+
*/
|
|
256
|
+
export class DeprecatedMenuItem extends React.Component<DeprecatedMenuItemProps> {
|
|
241
257
|
ref = React.createRef<HTMLLIElement>();
|
|
242
258
|
|
|
243
|
-
|
|
259
|
+
componentDidMount() {
|
|
260
|
+
console.warn(
|
|
261
|
+
`This component is being deprecated and will be removed in Canvas Kit V9.\n
|
|
262
|
+
For more information, please see the V8 upgrade guide:\n
|
|
263
|
+
https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page
|
|
264
|
+
`
|
|
265
|
+
);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
componentDidUpdate = (prevProps: DeprecatedMenuItemProps) => {
|
|
244
269
|
if (!prevProps.isFocused && this.props.isFocused) {
|
|
245
270
|
if (this.ref.current) {
|
|
246
271
|
scrollIntoViewIfNeeded(this.ref.current);
|
|
@@ -306,7 +331,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
|
|
|
306
331
|
*/
|
|
307
332
|
// TODO: Remove this ts-ignore when we convert to a functional component
|
|
308
333
|
// @ts-ignore
|
|
309
|
-
|
|
334
|
+
DeprecatedMenuItem.defaultProps = {
|
|
310
335
|
shouldClose: true,
|
|
311
336
|
role: 'menuitem',
|
|
312
337
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-preview-react",
|
|
3
|
-
"version": "8.0.0-alpha.
|
|
3
|
+
"version": "8.0.0-alpha.194-next.2+bc1f2fe6",
|
|
4
4
|
"description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -46,15 +46,15 @@
|
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@emotion/react": "^11.7.1",
|
|
48
48
|
"@emotion/styled": "^11.6.0",
|
|
49
|
-
"@workday/canvas-kit-react": "^8.0.0-alpha.
|
|
49
|
+
"@workday/canvas-kit-react": "^8.0.0-alpha.194-next.2+bc1f2fe6",
|
|
50
50
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
51
51
|
"@workday/design-assets-types": "^0.2.8"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
55
|
-
"@workday/canvas-kit-labs-react": "^8.0.0-alpha.
|
|
55
|
+
"@workday/canvas-kit-labs-react": "^8.0.0-alpha.194-next.2+bc1f2fe6",
|
|
56
56
|
"formik": "^2.2.9",
|
|
57
57
|
"yup": "^0.31.1"
|
|
58
58
|
},
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "bc1f2fe6cdb9fccd4592698f6c1cdad5a64e84de"
|
|
60
60
|
}
|