@workday/canvas-kit-preview-react 8.0.0-alpha.204-next.4 → 8.0.0-alpha.208-next.1

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,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"}
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;IAyDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CAgF7B;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
@@ -98,7 +98,10 @@ var DeprecatedMenu = /** @class */ (function (_super) {
98
98
  var children = React.Children.toArray(_this.props.children);
99
99
  var nextSelectedIndex = 0;
100
100
  var isShortcut = false;
101
- var itemCount = children.length;
101
+ var itemCount = children.filter(function (child) {
102
+ var _a, _b;
103
+ return !((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isHeader);
104
+ }).length;
102
105
  var firstItem = 0;
103
106
  var lastItem = itemCount - 1;
104
107
  if (event.key.length === 1 && event.key.match(/\S/)) {
@@ -219,6 +222,10 @@ var DeprecatedMenu = /** @class */ (function (_super) {
219
222
  return character;
220
223
  };
221
224
  var firstCharacters = React.Children.map(_this.props.children, function (child) {
225
+ var _a, _b;
226
+ if ((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isHeader) {
227
+ return;
228
+ }
222
229
  return getFirstCharacter(child);
223
230
  });
224
231
  _this.firstCharacters = firstCharacters;
@@ -278,17 +285,22 @@ var DeprecatedMenu = /** @class */ (function (_super) {
278
285
  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"]);
279
286
  var selectedItemIndex = this.state.selectedItemIndex;
280
287
  var cardWidth = grow ? '100%' : width;
288
+ var interactiveItemIndex = null;
281
289
  return (React.createElement(card_1.Card, { display: "inline-block", padding: tokens_1.space.zero, width: cardWidth, depth: 3 },
282
290
  React.createElement(card_1.Card.Body, null,
283
- 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) {
291
+ 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) {
284
292
  if (!React.isValidElement(menuItem)) {
285
293
  return;
286
294
  }
287
- var itemId = id + "-" + index;
295
+ var itemId;
296
+ if (!menuItem.props.isHeader) {
297
+ interactiveItemIndex = (interactiveItemIndex !== null && interactiveItemIndex !== void 0 ? interactiveItemIndex : -1) + 1;
298
+ itemId = id + "-" + interactiveItemIndex;
299
+ }
288
300
  return (React.createElement(React.Fragment, { key: itemId }, React.cloneElement(menuItem, {
289
301
  onClick: function (event) { return _this.handleClick(event, menuItem.props); },
290
302
  id: itemId,
291
- isFocused: selectedItemIndex === index,
303
+ isFocused: selectedItemIndex === interactiveItemIndex && !menuItem.props.isHeader,
292
304
  })));
293
305
  })))));
294
306
  };
package/dist/commonjs/menu/lib/MenuItem.d.ts CHANGED
@@ -30,6 +30,11 @@ export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIEl
30
30
  * @default false
31
31
  */
32
32
  hasDivider?: boolean;
33
+ /**
34
+ * If true, render a header to group data, this menu item will not be intractable.
35
+ * @default false
36
+ */
37
+ isHeader?: boolean;
33
38
  /**
34
39
  * If true, set the DeprecatedMenuItem to the disabled state so it is not clickable.
35
40
  * @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;;;;;;;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"}
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,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;;;;;;;GAOG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;IAC9E,GAAG,iCAAoC;IAEvC,iBAAiB;IASjB,kBAAkB,cAAe,uBAAuB,UAMtD;IAEF,MAAM;IA2CN,OAAO,CAAC,WAAW,CAOjB;CACH"}
package/dist/commonjs/menu/lib/MenuItem.js CHANGED
@@ -65,6 +65,9 @@ var icon_1 = require("@workday/canvas-kit-react/icon");
65
65
  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': {
66
66
  outline: 'none',
67
67
  } }), function (_a) {
68
+ var isHeader = _a.isHeader;
69
+ return { pointerEvents: isHeader ? 'none' : 'all' };
70
+ }, function (_a) {
68
71
  var _b;
69
72
  var isFocused = _a.isFocused, isDisabled = _a.isDisabled;
70
73
  if (!isFocused && !isDisabled) {
@@ -227,12 +230,12 @@ var DeprecatedMenuItem = /** @class */ (function (_super) {
227
230
  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
231
  };
229
232
  DeprecatedMenuItem.prototype.render = function () {
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"]);
233
+ 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"]);
231
234
  iconProps = setIconProps(icon, isDisabled, isFocused);
232
235
  secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
233
236
  return (React.createElement(React.Fragment, null,
234
237
  hasDivider && React.createElement(Divider, null),
235
- 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),
238
+ 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),
236
239
  icon && iconProps && React.createElement(StyledSystemIcon, __assign({}, iconProps)),
237
240
  React.createElement(LabelContainer, null, children),
238
241
  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,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"}
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;IAyDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CAgF7B;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
@@ -73,7 +73,10 @@ var DeprecatedMenu = /** @class */ (function (_super) {
73
73
  var children = React.Children.toArray(_this.props.children);
74
74
  var nextSelectedIndex = 0;
75
75
  var isShortcut = false;
76
- var itemCount = children.length;
76
+ var itemCount = children.filter(function (child) {
77
+ var _a, _b;
78
+ return !((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isHeader);
79
+ }).length;
77
80
  var firstItem = 0;
78
81
  var lastItem = itemCount - 1;
79
82
  if (event.key.length === 1 && event.key.match(/\S/)) {
@@ -194,6 +197,10 @@ var DeprecatedMenu = /** @class */ (function (_super) {
194
197
  return character;
195
198
  };
196
199
  var firstCharacters = React.Children.map(_this.props.children, function (child) {
200
+ var _a, _b;
201
+ if ((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isHeader) {
202
+ return;
203
+ }
197
204
  return getFirstCharacter(child);
198
205
  });
199
206
  _this.firstCharacters = firstCharacters;
@@ -253,17 +260,22 @@ var DeprecatedMenu = /** @class */ (function (_super) {
253
260
  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"]);
254
261
  var selectedItemIndex = this.state.selectedItemIndex;
255
262
  var cardWidth = grow ? '100%' : width;
263
+ var interactiveItemIndex = null;
256
264
  return (React.createElement(Card, { display: "inline-block", padding: space.zero, width: cardWidth, depth: 3 },
257
265
  React.createElement(Card.Body, null,
258
- 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) {
266
+ 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) {
259
267
  if (!React.isValidElement(menuItem)) {
260
268
  return;
261
269
  }
262
- var itemId = id + "-" + index;
270
+ var itemId;
271
+ if (!menuItem.props.isHeader) {
272
+ interactiveItemIndex = (interactiveItemIndex !== null && interactiveItemIndex !== void 0 ? interactiveItemIndex : -1) + 1;
273
+ itemId = id + "-" + interactiveItemIndex;
274
+ }
263
275
  return (React.createElement(React.Fragment, { key: itemId }, React.cloneElement(menuItem, {
264
276
  onClick: function (event) { return _this.handleClick(event, menuItem.props); },
265
277
  id: itemId,
266
- isFocused: selectedItemIndex === index,
278
+ isFocused: selectedItemIndex === interactiveItemIndex && !menuItem.props.isHeader,
267
279
  })));
268
280
  })))));
269
281
  };
package/dist/es6/menu/lib/MenuItem.d.ts CHANGED
@@ -30,6 +30,11 @@ export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIEl
30
30
  * @default false
31
31
  */
32
32
  hasDivider?: boolean;
33
+ /**
34
+ * If true, render a header to group data, this menu item will not be intractable.
35
+ * @default false
36
+ */
37
+ isHeader?: boolean;
33
38
  /**
34
39
  * If true, set the DeprecatedMenuItem to the disabled state so it is not clickable.
35
40
  * @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;;;;;;;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"}
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,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;;;;;;;GAOG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;IAC9E,GAAG,iCAAoC;IAEvC,iBAAiB;IASjB,kBAAkB,cAAe,uBAAuB,UAMtD;IAEF,MAAM;IA2CN,OAAO,CAAC,WAAW,CAOjB;CACH"}
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) {
@@ -202,12 +205,12 @@ var DeprecatedMenuItem = /** @class */ (function (_super) {
202
205
  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
206
  };
204
207
  DeprecatedMenuItem.prototype.render = function () {
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"]);
208
+ 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"]);
206
209
  iconProps = setIconProps(icon, isDisabled, isFocused);
207
210
  secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
208
211
  return (React.createElement(React.Fragment, null,
209
212
  hasDivider && React.createElement(Divider, null),
210
- 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),
213
+ 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),
211
214
  icon && iconProps && React.createElement(StyledSystemIcon, __assign({}, iconProps)),
212
215
  React.createElement(LabelContainer, null, children),
213
216
  secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, __assign({}, secondaryIconProps))))));
package/menu/lib/Menu.tsx CHANGED
@@ -154,6 +154,7 @@ export class DeprecatedMenu extends React.Component<DeprecatedMenuProps, Depreca
154
154
  } = this.props;
155
155
  const {selectedItemIndex} = this.state;
156
156
  const cardWidth = grow ? '100%' : width;
157
+ let interactiveItemIndex: number | null = null;
157
158
 
158
159
  return (
159
160
  <Card display="inline-block" padding={space.zero} width={cardWidth} depth={3}>
@@ -168,17 +169,22 @@ export class DeprecatedMenu extends React.Component<DeprecatedMenuProps, Depreca
168
169
  ref={this.menuRef}
169
170
  {...elemProps}
170
171
  >
171
- {React.Children.map(children, (menuItem, index) => {
172
+ {React.Children.map(children, menuItem => {
172
173
  if (!React.isValidElement(menuItem)) {
173
174
  return;
174
175
  }
175
- const itemId = `${id}-${index}`;
176
+ let itemId;
177
+ if (!menuItem.props.isHeader) {
178
+ interactiveItemIndex = (interactiveItemIndex ?? -1) + 1;
179
+ itemId = `${id}-${interactiveItemIndex}`;
180
+ }
176
181
  return (
177
182
  <React.Fragment key={itemId}>
178
183
  {React.cloneElement(menuItem, {
179
184
  onClick: (event: React.MouseEvent) => this.handleClick(event, menuItem.props),
180
185
  id: itemId,
181
- isFocused: selectedItemIndex === index,
186
+ isFocused:
187
+ selectedItemIndex === interactiveItemIndex && !menuItem.props.isHeader,
182
188
  })}
183
189
  </React.Fragment>
184
190
  );
@@ -210,7 +216,9 @@ export class DeprecatedMenu extends React.Component<DeprecatedMenuProps, Depreca
210
216
  const children = React.Children.toArray(this.props.children);
211
217
  let nextSelectedIndex = 0;
212
218
  let isShortcut = false;
213
- const itemCount = children.length;
219
+ const itemCount = children.filter(child => {
220
+ return !(child as React.ReactElement<DeprecatedMenuItemProps>)?.props?.isHeader;
221
+ }).length;
214
222
  const firstItem = 0;
215
223
  const lastItem = itemCount - 1;
216
224
 
@@ -345,6 +353,9 @@ export class DeprecatedMenu extends React.Component<DeprecatedMenuProps, Depreca
345
353
  };
346
354
 
347
355
  const firstCharacters = React.Children.map(this.props.children, child => {
356
+ if ((child as React.ReactElement<DeprecatedMenuItemProps>)?.props?.isHeader) {
357
+ return;
358
+ }
348
359
  return getFirstCharacter(child);
349
360
  });
350
361
 
package/menu/lib/MenuItem.tsx CHANGED
@@ -41,6 +41,11 @@ export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIEl
41
41
  * @default false
42
42
  */
43
43
  hasDivider?: boolean;
44
+ /**
45
+ * If true, render a header to group data, this menu item will not be intractable.
46
+ * @default false
47
+ */
48
+ isHeader?: boolean;
44
49
  /**
45
50
  * If true, set the DeprecatedMenuItem to the disabled state so it is not clickable.
46
51
  * @default false
@@ -63,7 +68,7 @@ export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIEl
63
68
  shouldClose?: boolean;
64
69
  }
65
70
 
66
- const Item = styled('li')<Pick<DeprecatedMenuItemProps, 'isDisabled' | 'isFocused'>>(
71
+ const Item = styled('li')<Pick<DeprecatedMenuItemProps, 'isDisabled' | 'isFocused' | 'isHeader'>>(
67
72
  {
68
73
  ...type.levels.subtext.large,
69
74
  padding: `${space.xxs} ${space.s}`,
@@ -79,6 +84,9 @@ const Item = styled('li')<Pick<DeprecatedMenuItemProps, 'isDisabled' | 'isFocuse
79
84
  outline: 'none',
80
85
  },
81
86
  },
87
+ ({isHeader}) => {
88
+ return {pointerEvents: isHeader ? 'none' : 'all'};
89
+ },
82
90
  ({isFocused, isDisabled}) => {
83
91
  if (!isFocused && !isDisabled) {
84
92
  return {
@@ -283,6 +291,7 @@ export class DeprecatedMenuItem extends React.Component<DeprecatedMenuItemProps>
283
291
  hasDivider,
284
292
  isDisabled,
285
293
  isFocused,
294
+ isHeader,
286
295
  role,
287
296
  ...elemProps
288
297
  } = this.props;
@@ -297,11 +306,12 @@ export class DeprecatedMenuItem extends React.Component<DeprecatedMenuItemProps>
297
306
  ref={this.ref}
298
307
  tabIndex={-1}
299
308
  id={id}
300
- role={role}
309
+ role={isHeader ? 'presentation' : role}
301
310
  onClick={this.handleClick}
302
311
  aria-disabled={isDisabled ? true : undefined}
303
312
  isDisabled={!!isDisabled}
304
313
  isFocused={!!isFocused}
314
+ isHeader={!!isHeader}
305
315
  {...elemProps}
306
316
  >
307
317
  {icon && iconProps && <StyledSystemIcon {...iconProps} />}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "8.0.0-alpha.204-next.4+87a19905",
3
+ "version": "8.0.0-alpha.208-next.1+7ab4aa5f",
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.204-next.4+87a19905",
49
+ "@workday/canvas-kit-react": "^8.0.0-alpha.208-next.1+7ab4aa5f",
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.204-next.4+87a19905",
55
+ "@workday/canvas-kit-labs-react": "^8.0.0-alpha.208-next.1+7ab4aa5f",
56
56
  "formik": "^2.2.9",
57
57
  "yup": "^0.31.1"
58
58
  },
59
- "gitHead": "87a19905dbc3451603468e413e77408da56bf836"
59
+ "gitHead": "7ab4aa5fb8c81b2929cab767cd3dfd0dd7d2372f"
60
60
  }