@ebay/ui-core-react 5.8.0 → 5.9.0

package/ebay-fake-menu/README.md

@@ -29,10 +29,13 @@ import '@ebay/skin/menu';
 
 ## EbayFakeMenuItem Props
 
-Name | Type | Required | Description
---- | --- | --- | ---
-`href` | String | No | Redirection link on click
+Name | Type    | Required | Description
+--- |---------| --- | ---
+`href` | String  | No | Redirection link on click
+`type` | String  | No | Set to `button` to render menu-item as a button instead of a link
 `current` | Boolean | No | Whether or not the href is the current href of the page
+`badgeNumber` | Number  | No | Used as a number to be placed inside the badge
+`badgeAriaLabel` | Number  | No | Only if `badgeNumber` provided, passed as the `aria-label` directly to the badge
 
 ## EbayFakeMenuSeparator
 Example:

package/ebay-fake-menu/index.d.ts

@@ -1,4 +1,4 @@
 export { default as EbayFakeMenu } from './menu';
-export { default as EbayFakeMenuItem, EbayFakeMenuItemProps } from './menu-item';
+export { default as EbayFakeMenuItem, EbayFakeMenuItemProps, EbayMenuItemType } from './menu-item';
 export { default as EbayFakeMenuSeparator } from './menu-item-separator';
 //# sourceMappingURL=index.d.ts.map

package/ebay-fake-menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-fake-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAChF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-fake-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAClG,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,uBAAuB,CAAA"}

package/ebay-fake-menu/menu-item.d.ts

@@ -1,8 +1,12 @@
 import { ComponentProps, FC } from 'react';
-export type EbayFakeMenuItemProps = Omit<ComponentProps<'a'>, 'onKeyDown' | 'onMouseDown'> & {
+export type EbayMenuItemType = 'button';
+export type EbayFakeMenuItemProps = Omit<ComponentProps<'a'>, 'onKeyDown' | 'onMouseDown'> & Omit<ComponentProps<'button'>, 'onKeyDown' | 'onMouseDown'> & {
     current?: boolean;
     disabled?: boolean;
     autoFocus?: boolean;
+    type?: EbayMenuItemType;
+    badgeNumber?: number;
+    badgeAriaLabel?: string;
 };
 declare const EbayMenuItem: FC<EbayFakeMenuItemProps>;
 export default EbayMenuItem;

package/ebay-fake-menu/menu-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../src/ebay-fake-menu/menu-item.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAA;AAIpE,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,WAAW,GAAG,aAAa,CAAC,GAAG;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,qBAAqB,CA6B3C,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../src/ebay-fake-menu/menu-item.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAA;AAKpE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAA;AACvC,MAAM,MAAM,qBAAqB,GAC7B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,WAAW,GAAG,aAAa,CAAC,GACtD,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,WAAW,GAAG,aAAa,CAAC,GAC3D;IACI,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAA;AAEL,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,qBAAqB,CA+D3C,CAAA;AAED,eAAe,YAAY,CAAA"}

package/ebay-fake-menu/menu-item.js

@@ -51,17 +51,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var ebay_icon_1 = require("../ebay-icon");
+var ebay_badge_1 = require("../ebay-badge");
 var EbayMenuItem = function (_a) {
-    var className = _a.className, current = _a.current, disabled = _a.disabled, autoFocus = _a.autoFocus, children = _a.children, rest = __rest(_a, ["className", "current", "disabled", "autoFocus", "children"]);
+    var className = _a.className, current = _a.current, disabled = _a.disabled, autoFocus = _a.autoFocus, type = _a.type, badgeNumber = _a.badgeNumber, badgeAriaLabel = _a.badgeAriaLabel, children = _a.children, rest = __rest(_a, ["className", "current", "disabled", "autoFocus", "type", "badgeNumber", "badgeAriaLabel", "children"]);
     var ref = (0, react_1.useRef)();
+    var hasBadge = badgeNumber !== undefined;
     (0, react_1.useEffect)(function () {
         var _a;
         if (autoFocus) {
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     });
-    return (react_1.default.createElement("a", __assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, 'fake-menu__item'), "aria-disabled": disabled ? 'true' : undefined }),
-        react_1.default.createElement("span", null, children),
-        react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "tick16" })));
+    var itemProps = __assign(__assign({}, rest), { ref: ref, className: (0, classnames_1.default)(className, 'fake-menu__item', hasBadge && 'menu__item--badged'), 'aria-label': badgeAriaLabel });
+    var tick = react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "tick16" });
+    // todo: remove this workaround when Skin team fixes https://github.com/eBay/skin/issues/2208
+    var badgeStyleFix = {
+        marginLeft: 'var(--spacing-100)',
+        marginRight: 'var(--spacing-100)'
+    };
+    var badge = hasBadge && react_1.default.createElement(ebay_badge_1.EbayBadge, { type: "menu", number: badgeNumber, style: badgeStyleFix });
+    return type === 'button' ? (react_1.default.createElement("button", __assign({}, itemProps, { type: "button", disabled: disabled }),
+        react_1.default.createElement("span", null,
+            children,
+            badge),
+        tick)) : (react_1.default.createElement("a", __assign({}, itemProps, { "aria-disabled": disabled ? 'true' : undefined }),
+        react_1.default.createElement("span", null,
+            children,
+            badge),
+        tick));
 };
 exports.default = EbayMenuItem;

package/ebay-menu/README.md

@@ -33,13 +33,13 @@ Name | Type | Required | Description
 
 ## EbayMenuItem Props
 
-Name | Type | Required | Description
---- | --- | --- | ---
-`value` | String | No | for type `radio`, `checkbox`: the value to use with callbacks for `checkedValues[]`
-`checked` | Boolean | No | for type `radio`, `checkbox`: whether or not the item is checked
-`disabled` | Boolean | No | makes the menu item disabled
-`badgeNumber` | Number | No | used as the number to be placed in the badge
-`badgeAriaLabel` | String | If `badgeNumber` provided | passed as the `aria-label` directly to the badge
+Name | Type | Required                        | Description
+--- | --- |---------------------------------| ---
+`value` | String | No                              | for type `radio`, `checkbox`: the value to use with callbacks for `checkedValues[]`
+`checked` | Boolean | No                              | for type `radio`, `checkbox`: whether or not the item is checked
+`disabled` | Boolean | No                              | makes the menu item disabled
+`badgeNumber` | Number | No                              | used as the number to be placed in the badge
+`badgeAriaLabel` | String | Only if `badgeNumber` provided, passed as the `aria-label` directly to the badge
 
 ## EbayMenuSeparator
 Example:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "5.8.0",
+  "version": "5.9.0",
   "description": "Skin components build off React",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"