@workday/canvas-kit-preview-react 7.3.13 → 7.4.0-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.
Files changed (13) hide show
  1. package/dist/commonjs/menu/lib/Menu.d.ts.map +1 -1
  2. package/dist/commonjs/menu/lib/Menu.js +16 -4
  3. package/dist/commonjs/menu/lib/MenuItem.d.ts +5 -0
  4. package/dist/commonjs/menu/lib/MenuItem.d.ts.map +1 -1
  5. package/dist/commonjs/menu/lib/MenuItem.js +5 -2
  6. package/dist/es6/menu/lib/Menu.d.ts.map +1 -1
  7. package/dist/es6/menu/lib/Menu.js +16 -4
  8. package/dist/es6/menu/lib/MenuItem.d.ts +5 -0
  9. package/dist/es6/menu/lib/MenuItem.d.ts.map +1 -1
  10. package/dist/es6/menu/lib/MenuItem.js +5 -2
  11. package/menu/lib/Menu.tsx +15 -4
  12. package/menu/lib/MenuItem.tsx +12 -2
  13. package/package.json +4 -4
package/dist/commonjs/menu/lib/Menu.d.ts.map CHANGED
@@ -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,aAAa,EAAC,MAAM,YAAY,CAAC;AAGzC,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACnF;;;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,MAAM,WAAW,SAAS;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACrE,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,SAAS;IAe5B,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAevC,iBAAiB;IAKjB,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,CA4E7B;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"}
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,aAAa,EAAC,MAAM,YAAY,CAAC;AAGzC,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACnF;;;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,MAAM,WAAW,SAAS;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACrE,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,SAAS;IAe5B,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAevC,iBAAiB;IAKjB,oBAAoB;IAIb,MAAM;IAyDN,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,CAkCxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}
package/dist/commonjs/menu/lib/Menu.js CHANGED
@@ -89,7 +89,10 @@ var Menu = /** @class */ (function (_super) {
89
89
  var children = React.Children.toArray(_this.props.children);
90
90
  var nextSelectedIndex = 0;
91
91
  var isShortcut = false;
92
- var itemCount = children.length;
92
+ var itemCount = children.filter(function (child) {
93
+ var _a, _b;
94
+ return !((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isHeader);
95
+ }).length;
93
96
  var firstItem = 0;
94
97
  var lastItem = itemCount - 1;
95
98
  if (event.key.length === 1 && event.key.match(/\S/)) {
@@ -210,6 +213,10 @@ var Menu = /** @class */ (function (_super) {
210
213
  return character;
211
214
  };
212
215
  var firstCharacters = React.Children.map(_this.props.children, function (child) {
216
+ var _a, _b;
217
+ if ((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isHeader) {
218
+ return;
219
+ }
213
220
  return getFirstCharacter(child);
214
221
  });
215
222
  _this.firstCharacters = firstCharacters;
@@ -268,17 +275,22 @@ var Menu = /** @class */ (function (_super) {
268
275
  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"]);
269
276
  var selectedItemIndex = this.state.selectedItemIndex;
270
277
  var cardWidth = grow ? '100%' : width;
278
+ var interactiveItemIndex = null;
271
279
  return (React.createElement(card_1.Card, { display: "inline-block", padding: tokens_1.space.zero, width: cardWidth, depth: 3 },
272
280
  React.createElement(card_1.Card.Body, null,
273
- React.createElement(List, __assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": id + "-" + selectedItemIndex, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, function (menuItem, index) {
281
+ React.createElement(List, __assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": id + "-" + selectedItemIndex, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, function (menuItem) {
274
282
  if (!React.isValidElement(menuItem)) {
275
283
  return;
276
284
  }
277
- var itemId = id + "-" + index;
285
+ var itemId = null;
286
+ if (!menuItem.props.isHeader) {
287
+ interactiveItemIndex = (interactiveItemIndex !== null && interactiveItemIndex !== void 0 ? interactiveItemIndex : -1) + 1;
288
+ itemId = id + "-" + interactiveItemIndex;
289
+ }
278
290
  return (React.createElement(React.Fragment, { key: itemId }, React.cloneElement(menuItem, {
279
291
  onClick: function (event) { return _this.handleClick(event, menuItem.props); },
280
292
  id: itemId,
281
- isFocused: selectedItemIndex === index,
293
+ isFocused: selectedItemIndex === interactiveItemIndex && !menuItem.props.isHeader,
282
294
  })));
283
295
  })))));
284
296
  };
package/dist/commonjs/menu/lib/MenuItem.d.ts CHANGED
@@ -22,6 +22,11 @@ export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
22
22
  * @default false
23
23
  */
24
24
  hasDivider?: boolean;
25
+ /**
26
+ * If true, render a header to group data, this menu item will not be intractable.
27
+ * @default false
28
+ */
29
+ isHeader?: boolean;
25
30
  /**
26
31
  * If true, set the MenuItem to the disabled state so it is not clickable.
27
32
  * @default false
package/dist/commonjs/menu/lib/MenuItem.d.ts.map CHANGED
@@ -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,aAAc,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IAC1E;;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,cAAM,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IACnD,GAAG,iCAAoC;IAEvC,kBAAkB,cAAe,aAAa,UAM5C;IAEF,MAAM;IAyCN,OAAO,CAAC,WAAW,CAOjB;CACH;AAcD,eAAe,QAAQ,CAAC"}
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,aAAc,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IAC1E;;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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;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;AA2LD,cAAM,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IACnD,GAAG,iCAAoC;IAEvC,kBAAkB,cAAe,aAAa,UAM5C;IAEF,MAAM;IA2CN,OAAO,CAAC,WAAW,CAOjB;CACH;AAcD,eAAe,QAAQ,CAAC"}
package/dist/commonjs/menu/lib/MenuItem.js CHANGED
@@ -64,6 +64,9 @@ var icon_1 = require("@workday/canvas-kit-react/icon");
64
64
  var Item = styled_1.default('li')(__assign(__assign({}, tokens_1.type.levels.subtext.large), { padding: tokens_1.space.xxs + " " + tokens_1.space.s, height: tokens_1.space.xl, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.blackPepper300, display: 'flex', flexDirection: 'row', alignItems: 'center', transition: 'background-color 80ms, color 80ms', '&:focus': {
65
65
  outline: 'none',
66
66
  } }), function (_a) {
67
+ var isHeader = _a.isHeader;
68
+ return { pointerEvents: isHeader ? 'none' : 'all' };
69
+ }, function (_a) {
67
70
  var _b;
68
71
  var isFocused = _a.isFocused, isDisabled = _a.isDisabled;
69
72
  if (!isFocused && !isDisabled) {
@@ -215,12 +218,12 @@ var MenuItem = /** @class */ (function (_super) {
215
218
  return _this;
216
219
  }
217
220
  MenuItem.prototype.render = function () {
218
- 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"]);
221
+ 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, isHeader = _a.isHeader, role = _a.role, elemProps = __rest(_a, ["onClick", "children", "id", "icon", "secondaryIcon", "hasDivider", "isDisabled", "isFocused", "isHeader", "role"]);
219
222
  iconProps = setIconProps(icon, isDisabled, isFocused);
220
223
  secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
221
224
  return (React.createElement(React.Fragment, null,
222
225
  hasDivider && React.createElement(Divider, null),
223
- React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: role, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused }, elemProps),
226
+ React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: isHeader ? 'presentation' : role, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused, isHeader: !!isHeader }, elemProps),
224
227
  icon && iconProps && React.createElement(StyledSystemIcon, __assign({}, iconProps)),
225
228
  React.createElement(LabelContainer, null, children),
226
229
  secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, __assign({}, secondaryIconProps))))));
package/dist/es6/menu/lib/Menu.d.ts.map CHANGED
@@ -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,aAAa,EAAC,MAAM,YAAY,CAAC;AAGzC,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACnF;;;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,MAAM,WAAW,SAAS;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACrE,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,SAAS;IAe5B,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAevC,iBAAiB;IAKjB,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,CA4E7B;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"}
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,aAAa,EAAC,MAAM,YAAY,CAAC;AAGzC,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACnF;;;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,MAAM,WAAW,SAAS;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACrE,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,SAAS;IAe5B,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAevC,iBAAiB;IAKjB,oBAAoB;IAIb,MAAM;IAyDN,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,CAkCxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}
package/dist/es6/menu/lib/Menu.js CHANGED
@@ -65,7 +65,10 @@ var Menu = /** @class */ (function (_super) {
65
65
  var children = React.Children.toArray(_this.props.children);
66
66
  var nextSelectedIndex = 0;
67
67
  var isShortcut = false;
68
- var itemCount = children.length;
68
+ var itemCount = children.filter(function (child) {
69
+ var _a, _b;
70
+ return !((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isHeader);
71
+ }).length;
69
72
  var firstItem = 0;
70
73
  var lastItem = itemCount - 1;
71
74
  if (event.key.length === 1 && event.key.match(/\S/)) {
@@ -186,6 +189,10 @@ var Menu = /** @class */ (function (_super) {
186
189
  return character;
187
190
  };
188
191
  var firstCharacters = React.Children.map(_this.props.children, function (child) {
192
+ var _a, _b;
193
+ if ((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isHeader) {
194
+ return;
195
+ }
189
196
  return getFirstCharacter(child);
190
197
  });
191
198
  _this.firstCharacters = firstCharacters;
@@ -244,17 +251,22 @@ var Menu = /** @class */ (function (_super) {
244
251
  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"]);
245
252
  var selectedItemIndex = this.state.selectedItemIndex;
246
253
  var cardWidth = grow ? '100%' : width;
254
+ var interactiveItemIndex = null;
247
255
  return (React.createElement(Card, { display: "inline-block", padding: space.zero, width: cardWidth, depth: 3 },
248
256
  React.createElement(Card.Body, null,
249
- React.createElement(List, __assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": id + "-" + selectedItemIndex, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, function (menuItem, index) {
257
+ React.createElement(List, __assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": id + "-" + selectedItemIndex, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, function (menuItem) {
250
258
  if (!React.isValidElement(menuItem)) {
251
259
  return;
252
260
  }
253
- var itemId = id + "-" + index;
261
+ var itemId = null;
262
+ if (!menuItem.props.isHeader) {
263
+ interactiveItemIndex = (interactiveItemIndex !== null && interactiveItemIndex !== void 0 ? interactiveItemIndex : -1) + 1;
264
+ itemId = id + "-" + interactiveItemIndex;
265
+ }
254
266
  return (React.createElement(React.Fragment, { key: itemId }, React.cloneElement(menuItem, {
255
267
  onClick: function (event) { return _this.handleClick(event, menuItem.props); },
256
268
  id: itemId,
257
- isFocused: selectedItemIndex === index,
269
+ isFocused: selectedItemIndex === interactiveItemIndex && !menuItem.props.isHeader,
258
270
  })));
259
271
  })))));
260
272
  };
package/dist/es6/menu/lib/MenuItem.d.ts CHANGED
@@ -22,6 +22,11 @@ export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
22
22
  * @default false
23
23
  */
24
24
  hasDivider?: boolean;
25
+ /**
26
+ * If true, render a header to group data, this menu item will not be intractable.
27
+ * @default false
28
+ */
29
+ isHeader?: boolean;
25
30
  /**
26
31
  * If true, set the MenuItem to the disabled state so it is not clickable.
27
32
  * @default false
package/dist/es6/menu/lib/MenuItem.d.ts.map CHANGED
@@ -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,aAAc,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IAC1E;;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,cAAM,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IACnD,GAAG,iCAAoC;IAEvC,kBAAkB,cAAe,aAAa,UAM5C;IAEF,MAAM;IAyCN,OAAO,CAAC,WAAW,CAOjB;CACH;AAcD,eAAe,QAAQ,CAAC"}
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,aAAc,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IAC1E;;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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;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;AA2LD,cAAM,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IACnD,GAAG,iCAAoC;IAEvC,kBAAkB,cAAe,aAAa,UAM5C;IAEF,MAAM;IA2CN,OAAO,CAAC,WAAW,CAOjB;CACH;AAcD,eAAe,QAAQ,CAAC"}
package/dist/es6/menu/lib/MenuItem.js CHANGED
@@ -40,6 +40,9 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
40
40
  var Item = styled('li')(__assign(__assign({}, type.levels.subtext.large), { padding: space.xxs + " " + space.s, height: space.xl, boxSizing: 'border-box', cursor: 'pointer', color: colors.blackPepper300, display: 'flex', flexDirection: 'row', alignItems: 'center', transition: 'background-color 80ms, color 80ms', '&:focus': {
41
41
  outline: 'none',
42
42
  } }), function (_a) {
43
+ var isHeader = _a.isHeader;
44
+ return { pointerEvents: isHeader ? 'none' : 'all' };
45
+ }, function (_a) {
43
46
  var _b;
44
47
  var isFocused = _a.isFocused, isDisabled = _a.isDisabled;
45
48
  if (!isFocused && !isDisabled) {
@@ -191,12 +194,12 @@ var MenuItem = /** @class */ (function (_super) {
191
194
  return _this;
192
195
  }
193
196
  MenuItem.prototype.render = function () {
194
- 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"]);
197
+ 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, isHeader = _a.isHeader, role = _a.role, elemProps = __rest(_a, ["onClick", "children", "id", "icon", "secondaryIcon", "hasDivider", "isDisabled", "isFocused", "isHeader", "role"]);
195
198
  iconProps = setIconProps(icon, isDisabled, isFocused);
196
199
  secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
197
200
  return (React.createElement(React.Fragment, null,
198
201
  hasDivider && React.createElement(Divider, null),
199
- React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: role, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused }, elemProps),
202
+ React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: isHeader ? 'presentation' : role, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused, isHeader: !!isHeader }, elemProps),
200
203
  icon && iconProps && React.createElement(StyledSystemIcon, __assign({}, iconProps)),
201
204
  React.createElement(LabelContainer, null, children),
202
205
  secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, __assign({}, secondaryIconProps))))));
package/menu/lib/Menu.tsx CHANGED
@@ -119,6 +119,7 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
119
119
  } = this.props;
120
120
  const {selectedItemIndex} = this.state;
121
121
  const cardWidth = grow ? '100%' : width;
122
+ let interactiveItemIndex: number | null = null;
122
123
 
123
124
  return (
124
125
  <Card display="inline-block" padding={space.zero} width={cardWidth} depth={3}>
@@ -133,17 +134,22 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
133
134
  ref={this.menuRef}
134
135
  {...elemProps}
135
136
  >
136
- {React.Children.map(children, (menuItem, index) => {
137
+ {React.Children.map(children, menuItem => {
137
138
  if (!React.isValidElement(menuItem)) {
138
139
  return;
139
140
  }
140
- const itemId = `${id}-${index}`;
141
+ let itemId = null;
142
+ if (!menuItem.props.isHeader) {
143
+ interactiveItemIndex = (interactiveItemIndex ?? -1) + 1;
144
+ itemId = `${id}-${interactiveItemIndex}`;
145
+ }
141
146
  return (
142
147
  <React.Fragment key={itemId}>
143
148
  {React.cloneElement(menuItem, {
144
149
  onClick: (event: React.MouseEvent) => this.handleClick(event, menuItem.props),
145
150
  id: itemId,
146
- isFocused: selectedItemIndex === index,
151
+ isFocused:
152
+ selectedItemIndex === interactiveItemIndex && !menuItem.props.isHeader,
147
153
  })}
148
154
  </React.Fragment>
149
155
  );
@@ -175,7 +181,9 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
175
181
  const children = React.Children.toArray(this.props.children);
176
182
  let nextSelectedIndex = 0;
177
183
  let isShortcut = false;
178
- const itemCount = children.length;
184
+ const itemCount = children.filter(child => {
185
+ return !(child as React.ReactElement<MenuItemProps>)?.props?.isHeader;
186
+ }).length;
179
187
  const firstItem = 0;
180
188
  const lastItem = itemCount - 1;
181
189
 
@@ -308,6 +316,9 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
308
316
  };
309
317
 
310
318
  const firstCharacters = React.Children.map(this.props.children, child => {
319
+ if ((child as React.ReactElement<MenuItemProps>)?.props?.isHeader) {
320
+ return;
321
+ }
311
322
  return getFirstCharacter(child);
312
323
  });
313
324
 
package/menu/lib/MenuItem.tsx CHANGED
@@ -33,6 +33,11 @@ export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
33
33
  * @default false
34
34
  */
35
35
  hasDivider?: boolean;
36
+ /**
37
+ * If true, render a header to group data, this menu item will not be intractable.
38
+ * @default false
39
+ */
40
+ isHeader?: boolean;
36
41
  /**
37
42
  * If true, set the MenuItem to the disabled state so it is not clickable.
38
43
  * @default false
@@ -55,7 +60,7 @@ export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
55
60
  shouldClose?: boolean;
56
61
  }
57
62
 
58
- const Item = styled('li')<Pick<MenuItemProps, 'isDisabled' | 'isFocused'>>(
63
+ const Item = styled('li')<Pick<MenuItemProps, 'isDisabled' | 'isFocused' | 'isHeader'>>(
59
64
  {
60
65
  ...type.levels.subtext.large,
61
66
  padding: `${space.xxs} ${space.s}`,
@@ -71,6 +76,9 @@ const Item = styled('li')<Pick<MenuItemProps, 'isDisabled' | 'isFocused'>>(
71
76
  outline: 'none',
72
77
  },
73
78
  },
79
+ ({isHeader}) => {
80
+ return {pointerEvents: isHeader ? 'none' : 'all'};
81
+ },
74
82
  ({isFocused, isDisabled}) => {
75
83
  if (!isFocused && !isDisabled) {
76
84
  return {
@@ -258,6 +266,7 @@ class MenuItem extends React.Component<MenuItemProps> {
258
266
  hasDivider,
259
267
  isDisabled,
260
268
  isFocused,
269
+ isHeader,
261
270
  role,
262
271
  ...elemProps
263
272
  } = this.props;
@@ -272,11 +281,12 @@ class MenuItem extends React.Component<MenuItemProps> {
272
281
  ref={this.ref}
273
282
  tabIndex={-1}
274
283
  id={id}
275
- role={role}
284
+ role={isHeader ? 'presentation' : role}
276
285
  onClick={this.handleClick}
277
286
  aria-disabled={isDisabled ? true : undefined}
278
287
  isDisabled={!!isDisabled}
279
288
  isFocused={!!isFocused}
289
+ isHeader={!!isHeader}
280
290
  {...elemProps}
281
291
  >
282
292
  {icon && iconProps && <StyledSystemIcon {...iconProps} />}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "7.3.13",
3
+ "version": "7.4.0-next.0+e138a7b2",
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": "^7.3.13",
49
+ "@workday/canvas-kit-react": "^7.4.0-next.0+e138a7b2",
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": "^7.3.13",
55
+ "@workday/canvas-kit-labs-react": "^7.4.0-next.0+e138a7b2",
56
56
  "formik": "^2.2.9",
57
57
  "yup": "^0.31.1"
58
58
  },
59
- "gitHead": "d3eafc129b9c67c38c3eb46a7ecf23521e40e4c3"
59
+ "gitHead": "e138a7b26bdec0a480cf9b5229a33fb4b33765dc"
60
60
  }