@ebay/ui-core-react 3.10.0 → 3.10.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 (7) hide show
  1. package/ebay-menu/README.md +1 -0
  2. package/ebay-menu/menu-item.d.ts +3 -0
  3. package/ebay-menu/menu-item.d.ts.map +1 -1
  4. package/ebay-menu/menu-item.js +11 -3
  5. package/ebay-menu/menu.d.ts.map +1 -1
  6. package/ebay-menu/menu.js +1 -1
  7. package/package.json +1 -1
package/ebay-menu/README.md CHANGED
@@ -38,6 +38,7 @@ Name | Type | Required | Description
38
38
  `checked` | Boolean | No | for type `radio`, `checkbox`: whether or not the item is checked
39
39
  `disabled` | Boolean | No | makes the menu item disabled
40
40
  `badgeNumber` | Number | No | used as the number to be placed in the badge
41
+ `badgeAriaLabel` | String | If `badgeNumber` provided | passed as the `aria-label` directly to the badge
41
42
 
42
43
  ## EbayMenuSeparator
43
44
  Example:
package/ebay-menu/menu-item.d.ts CHANGED
@@ -1,11 +1,14 @@
1
1
  import { ComponentProps, FC } from 'react';
2
+ import { EbayMenuType } from './types';
2
3
  export declare type MenuItemProps = Omit<ComponentProps<'div'>, 'onKeyDown'> & {
4
+ type?: EbayMenuType;
3
5
  focused?: boolean;
4
6
  tabIndex?: number;
5
7
  checked?: boolean;
6
8
  value?: string;
7
9
  disabled?: boolean;
8
10
  badgeNumber?: number;
11
+ badgeAriaLabel?: string;
9
12
  };
10
13
  declare const EbayMenuItem: FC<MenuItemProps>;
11
14
  export default EbayMenuItem;
package/ebay-menu/menu-item.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../src/ebay-menu/menu-item.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAA;AAKpE,oBAAY,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,aAAa,CAqCnC,CAAA;AAED,eAAe,YAAY,CAAA"}
1
+ {"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../src/ebay-menu/menu-item.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAA;AAIpE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,oBAAY,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,GAAG;IACnE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,aAAa,CAyCnC,CAAA;AAUD,eAAe,YAAY,CAAA"}
package/ebay-menu/menu-item.js CHANGED
@@ -49,7 +49,7 @@ var classnames_1 = __importDefault(require("classnames"));
49
49
  var ebay_badge_1 = require("../ebay-badge");
50
50
  var ebay_icon_1 = require("../ebay-icon");
51
51
  var EbayMenuItem = function (_a) {
52
- var className = _a.className, checked = _a.checked, _b = _a.focused, focused = _b === void 0 ? false : _b, tabIndex = _a.tabIndex, disabled = _a.disabled, badgeNumber = _a.badgeNumber, children = _a.children, rest = __rest(_a, ["className", "checked", "focused", "tabIndex", "disabled", "badgeNumber", "children"]);
52
+ var className = _a.className, checked = _a.checked, type = _a.type, _b = _a.focused, focused = _b === void 0 ? false : _b, tabIndex = _a.tabIndex, disabled = _a.disabled, badgeNumber = _a.badgeNumber, badgeAriaLabel = _a.badgeAriaLabel, children = _a.children, rest = __rest(_a, ["className", "checked", "type", "focused", "tabIndex", "disabled", "badgeNumber", "badgeAriaLabel", "children"]);
53
53
  var ref = react_1.useRef(null);
54
54
  var hasBadge = badgeNumber !== undefined;
55
55
  react_1.useEffect(function () {
@@ -57,10 +57,18 @@ var EbayMenuItem = function (_a) {
57
57
  ref.current.focus();
58
58
  }
59
59
  }, [ref, focused]);
60
- return (react_1.default.createElement("div", __assign({}, rest, { ref: ref, className: classnames_1.default(className, 'menu__item', hasBadge && 'menu__item--badged'), role: "menuitem", "aria-checked": checked, "aria-disabled": disabled, "aria-hidden": hasBadge, tabIndex: focused ? 0 : tabIndex }),
61
- react_1.default.createElement("span", null,
60
+ var checkable = ['radio', 'checkbox'];
61
+ return (react_1.default.createElement("div", __assign({ "aria-label": badgeAriaLabel }, rest, { ref: ref, className: classnames_1.default(className, 'menu__item', hasBadge && 'menu__item--badged'), role: roleFromType(type), "aria-checked": checkable.includes(type) ? checked : undefined, "aria-disabled": disabled, tabIndex: focused ? 0 : tabIndex }),
62
+ react_1.default.createElement("span", { "aria-hidden": hasBadge },
62
63
  children,
63
64
  hasBadge && react_1.default.createElement(ebay_badge_1.EbayBadge, { type: "menu", number: badgeNumber })),
64
65
  react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "tickSmall" })));
65
66
  };
67
+ function roleFromType(type) {
68
+ var roles = {
69
+ radio: 'menuitemradio',
70
+ checkbox: 'menuitemcheckbox'
71
+ };
72
+ return roles[type] || 'menuitem';
73
+ }
66
74
  exports.default = EbayMenuItem;
package/ebay-menu/menu.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/ebay-menu/menu.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEV,cAAc,EAAE,EAAE,EACrB,MAAM,OAAO,CAAA;AAMd,OAAO,EAAgB,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAEtE,aAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC,CAAA;AACvE,aAAK,QAAQ,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;AACrD,aAAK,KAAK,GAAG,SAAS,GAAG;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACvB,CAAA;AAID,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,KAAK,CAmGvB,CAAA;AAED,eAAe,QAAQ,CAAA"}
1
+ {"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/ebay-menu/menu.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEV,cAAc,EAAE,EAAE,EACrB,MAAM,OAAO,CAAA;AAMd,OAAO,EAAgB,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAEtE,aAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC,CAAA;AACvE,aAAK,QAAQ,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;AACrD,aAAK,KAAK,GAAG,SAAS,GAAG;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACvB,CAAA;AAID,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,KAAK,CAoGvB,CAAA;AAED,eAAe,QAAQ,CAAA"}
package/ebay-menu/menu.js CHANGED
@@ -109,7 +109,7 @@ var EbayMenu = function (_a) {
109
109
  return (react_1.default.createElement("span", __assign({}, rest, { className: classnames_1.default(className, 'menu') }),
110
110
  react_1.default.createElement("div", { className: "menu__items", role: "menu" }, childrenArray.map(function (child, i) {
111
111
  var _a = child.props, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.onFocus, onFocus = _c === void 0 ? function () { } : _c, itemRest = __rest(_a, ["onClick", "onFocus"]);
112
- return react_1.cloneElement(child, __assign(__assign({}, itemRest), { focused: i === focusedIndex, tabIndex: focusedIndex === undefined ? 0 : -1, checked: checkedIndexes[i], onFocus: function (e) {
112
+ return react_1.cloneElement(child, __assign(__assign({}, itemRest), { type: type, focused: i === focusedIndex, tabIndex: focusedIndex === undefined ? 0 : -1, checked: checkedIndexes[i], onFocus: function (e) {
113
113
  setFocusedIndex(i);
114
114
  onFocus(e);
115
115
  }, onClick: function (e) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ebay/ui-core-react",
3
- "version": "3.10.0",
3
+ "version": "3.10.1",
4
4
  "description": "Skin components build off React",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",