@ebay/ui-core-react 5.9.4 → 5.10.0

package/ebay-menu-button/README.md

@@ -50,12 +50,12 @@ Name | Type     | Required | Description
 `disabled` | Boolean  | No | will disable the entire dropdown (disables the ebay-button label) if set to true
 `variant` | String   | No | will change the button style: `overflow`, `form` or `button`
 `collapseOnSelect` | Boolean  | No | Will collapse whole menu when an item is selected in menu. Typically used in type=`radio`
-`prefixId` | String   | No | The id of an external element to use as the prefix label for the menu button. Cannot be used with `prefix-label` (NOT YET IMPLEMENTED)
+`prefixId` | String   | No | The id of an external element to use as the prefix label for the menu button. Cannot be used with `prefix-label`
 `prefixLabel` | String   | No |The label to add before each selected item on the button. Cannot be used with `prefix-id` (NOT YET IMPLEMENTED)
 `onExpand` | Function | No | Called when content is expanded
 `onCollapse` | Function | No | Called when content is collapsed
 `onSelect` | Function | No | props: (e: event, { index: number }), triggered on item clicked (not for type `radio`/`checkbox`)
-`onChange` | Function | No | props: (e: event, { index: number, checked: number[], checkedValues: string[]), triggered on item `checked` change, (for type `radio`/`checkbox` only)
+`onChange` | Function | No | props: (e: event, { index: number, checked: number[], checkedValues: string[] }), triggered on item `checked` change, (for type `radio`/`checkbox` only)
 
 ## EbayMenuButtonItem Attributes
 

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

@@ -1,4 +1,4 @@
-export { default as EbayMenuButton, EbayMenuButtonProps } from './menu-button';
+export { default as EbayMenuButton } from './menu-button';
 export { default as EbayMenuButtonItem } from './menu-button-item';
 export { default as EbayMenuButtonSeparator } from './menu-button-separator';
 export { default as EbayMenuButtonLabel } from './menu-button-label';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-menu-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AAC9E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,yBAAyB,CAAA;AAC5E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpE,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-menu-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,yBAAyB,CAAA;AAC5E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpE,cAAc,SAAS,CAAA"}

package/ebay-menu-button/menu-button.d.ts

@@ -1,28 +1,5 @@
-import { ComponentProps, FC } from 'react';
-import { EbayMenuChangeEventHandler, EbayMenuSelectEventHandler, EbayMenuType } from '../ebay-menu';
-import { EbayButtonProps } from '../ebay-button';
-import { EbayMenuButtonVariant } from './index';
-export type EbayMenuButtonProps = {
-    a11yText?: string;
-    className?: string;
-    fixWidth?: boolean;
-    reverse?: boolean;
-    text?: string;
-    type?: EbayMenuType;
-    variant?: EbayMenuButtonVariant;
-    onCollapse?: () => void;
-    onExpand?: () => void;
-    onChange?: EbayMenuChangeEventHandler;
-    onSelect?: EbayMenuSelectEventHandler;
-    expanded?: boolean;
-    noToggleIcon?: boolean;
-    checked?: number;
-    collapseOnSelect?: boolean;
-    prefixId?: string;
-    prefixLabel?: string;
-};
-type MenuEvents = 'onSelect' | 'onChange';
-type Props = Omit<EbayButtonProps, 'type' | 'variant' | 'onKeyDown'> & Omit<ComponentProps<'button'>, 'type' | MenuEvents> & Omit<ComponentProps<'a'>, MenuEvents> & EbayMenuButtonProps;
-declare const EbayMenuButton: FC<Props>;
+import { FC } from 'react';
+import { MenuButtonProps } from './index';
+declare const EbayMenuButton: FC<MenuButtonProps>;
 export default EbayMenuButton;
 //# sourceMappingURL=menu-button.d.ts.map

package/ebay-menu-button/menu-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-button.d.ts","sourceRoot":"","sources":["../../src/ebay-menu-button/menu-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,cAAc,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAA;AAM5F,OAAO,EAAY,0BAA0B,EAAE,0BAA0B,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAC7G,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAG5D,OAAO,EAAoE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEjH,MAAM,MAAM,mBAAmB,GAAG;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,0BAA0B,CAAC;IACtC,QAAQ,CAAC,EAAE,0BAA0B,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,CAAA;AAED,KAAK,UAAU,GAAG,UAAU,GAAG,UAAU,CAAA;AACzC,KAAK,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,CAAC,GAChE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC,GACnD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GACrC,mBAAmB,CAAA;AAEvB,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CA6I7B,CAAA;AAaD,eAAe,cAAc,CAAA"}
+{"version":3,"file":"menu-button.d.ts","sourceRoot":"","sources":["../../src/ebay-menu-button/menu-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,EAAE,EAA+B,MAAM,OAAO,CAAA;AAQ5E,OAAO,EAAgF,eAAe,EAAE,MAAM,SAAS,CAAA;AAIvH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,eAAe,CA8IvC,CAAA;AAcD,eAAe,cAAc,CAAA"}

package/ebay-menu-button/menu-button.js

@@ -51,15 +51,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var component_utils_1 = require("../common/component-utils");
-var event_utils_1 = require("../common/event-utils");
-var random_id_1 = require("../common/random-id");
 var ebay_menu_1 = require("../ebay-menu");
 var ebay_button_1 = require("../ebay-button");
 var ebay_icon_button_1 = require("../ebay-icon-button");
 var ebay_icon_1 = require("../ebay-icon");
 var index_1 = require("./index");
+var random_id_1 = require("../common/random-id");
+var event_utils_1 = require("../common/event-utils");
 var EbayMenuButton = function (_a) {
-    var type = _a.type, _b = _a.variant, variant = _b === void 0 ? 'button' : _b, className = _a.className, _c = _a.text, text = _c === void 0 ? '' : _c, fixWidth = _a.fixWidth, reverse = _a.reverse, defaultExpanded = _a.expanded, noToggleIcon = _a.noToggleIcon, checked = _a.checked, collapseOnSelect = _a.collapseOnSelect, a11yText = _a.a11yText, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.onExpand, onExpand = _e === void 0 ? function () { } : _e, _f = _a.onCollapse, onCollapse = _f === void 0 ? function () { } : _f, _g = _a.onChange, onChange = _g === void 0 ? function () { } : _g, _h = _a.onSelect, onSelect = _h === void 0 ? function () { } : _h, children = _a.children, rest = __rest(_a, ["type", "variant", "className", "text", "fixWidth", "reverse", "expanded", "noToggleIcon", "checked", "collapseOnSelect", "a11yText", "onClick", "onExpand", "onCollapse", "onChange", "onSelect", "children"]);
+    var type = _a.type, _b = _a.variant, variant = _b === void 0 ? 'button' : _b, className = _a.className, _c = _a.text, text = _c === void 0 ? '' : _c, fixWidth = _a.fixWidth, reverse = _a.reverse, defaultExpanded = _a.expanded, noToggleIcon = _a.noToggleIcon, checked = _a.checked, collapseOnSelect = _a.collapseOnSelect, a11yText = _a.a11yText, prefixId = _a.prefixId, prefixLabel = _a.prefixLabel, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.onExpand, onExpand = _e === void 0 ? function () { } : _e, _f = _a.onCollapse, onCollapse = _f === void 0 ? function () { } : _f, _g = _a.onChange, onChange = _g === void 0 ? function () { } : _g, _h = _a.onSelect, onSelect = _h === void 0 ? function () { } : _h, children = _a.children, rest = __rest(_a, ["type", "variant", "className", "text", "fixWidth", "reverse", "expanded", "noToggleIcon", "checked", "collapseOnSelect", "a11yText", "prefixId", "prefixLabel", "onClick", "onExpand", "onCollapse", "onChange", "onSelect", "children"]);
     var _j = (0, react_1.useState)(defaultExpanded), expanded = _j[0], setExpanded = _j[1];
     var _k = (0, react_1.useState)(), menuId = _k[0], setMenuId = _k[1];
     var buttonRef = (0, react_1.useRef)(null);
@@ -69,8 +69,7 @@ var EbayMenuButton = function (_a) {
     var _l = (0, react_1.useState)(defaultIndexes), checkedIndexes = _l[0], setCheckedIndexes = _l[1];
     var menuButtonLabel = (0, component_utils_1.findComponent)(children, index_1.EbayMenuButtonLabel);
     var icon = (0, component_utils_1.findComponent)(children, ebay_icon_1.EbayIcon);
-    var textLabel = text ? react_1.default.createElement("span", null, text) : null;
-    var label = labelWithIcon(menuButtonLabel || textLabel, icon);
+    var label = labelWithPrefixAndIcon({ text: text, prefixId: prefixId, prefixLabel: prefixLabel, menuButtonLabel: menuButtonLabel, icon: icon });
     var wrapperClasses = (0, classnames_1.default)('menu-button', className);
     var menuClasses = (0, classnames_1.default)('menu-button__menu', {
         'menu-button__menu--fix-width': fixWidth,
@@ -109,7 +108,7 @@ var EbayMenuButton = function (_a) {
             (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         });
     };
-    var buttonProps = __assign({ ref: buttonRef, className: 'menu-button__button', 'aria-expanded': !!expanded, 'aria-haspopup': true, 'aria-label': a11yText, 'aria-controls': menuId, onClick: function (e) {
+    var buttonProps = __assign({ ref: buttonRef, className: 'menu-button__button', 'aria-expanded': !!expanded, 'aria-haspopup': true, 'aria-label': a11yText, 'aria-controls': menuId, 'aria-labelledby': prefixId, onClick: function (e) {
             setExpanded(!expanded);
             onClick(e);
         } }, rest);
@@ -133,15 +132,15 @@ var EbayMenuButton = function (_a) {
                 return (0, react_1.cloneElement)(item, __assign(__assign({}, item.props), { className: (0, classnames_1.default)(item.props.className, 'menu-button__item'), key: i, checked: checkedIndexes[i] }));
             }))));
 };
-function labelWithIcon(label, icon) {
-    if (!icon) {
-        return label;
-    }
-    if (!label) {
-        return icon;
-    }
-    return react_1.default.createElement(react_1.default.Fragment, null,
-        icon,
-        label);
+function labelWithPrefixAndIcon(_a) {
+    var text = _a.text, prefixId = _a.prefixId, prefixLabel = _a.prefixLabel, menuButtonLabel = _a.menuButtonLabel, icon = _a.icon;
+    var textLabelElement = text.length ? react_1.default.createElement("span", null, text) : null;
+    var prefixLabelElement = !prefixId && prefixLabel && [
+        react_1.default.createElement("span", { className: "menu-button-prefix-label" }, prefixLabel),
+        react_1.default.createElement(react_1.default.Fragment, null, "\u00A0")
+    ];
+    var labelWithPrefix = [prefixLabelElement, menuButtonLabel || textLabelElement];
+    var labelArray = [icon, labelWithPrefix].flat().filter(Boolean);
+    return labelArray.length ? labelArray : null;
 }
 exports.default = EbayMenuButton;

package/ebay-menu-button/types.d.ts

@@ -1,2 +1,34 @@
+import { EbayMenuChangeEventHandler, EbayMenuSelectEventHandler, EbayMenuType } from '../ebay-menu';
+import { EbayButtonProps } from '../ebay-button';
+import { ComponentProps, ReactElement } from 'react';
 export type EbayMenuButtonVariant = 'overflow' | 'form' | 'button';
+export type EbayMenuButtonProps = {
+    a11yText?: string;
+    className?: string;
+    fixWidth?: boolean;
+    reverse?: boolean;
+    text?: string;
+    type?: EbayMenuType;
+    variant?: EbayMenuButtonVariant;
+    onCollapse?: () => void;
+    onExpand?: () => void;
+    onChange?: EbayMenuChangeEventHandler;
+    onSelect?: EbayMenuSelectEventHandler;
+    expanded?: boolean;
+    noToggleIcon?: boolean;
+    checked?: number;
+    collapseOnSelect?: boolean;
+    prefixId?: string;
+    prefixLabel?: string;
+};
+type MenuEvents = 'onSelect' | 'onChange';
+export type MenuButtonProps = Omit<EbayButtonProps, 'type' | 'variant' | 'onKeyDown'> & Omit<ComponentProps<'button'>, 'type' | MenuEvents> & Omit<ComponentProps<'a'>, MenuEvents> & EbayMenuButtonProps;
+export type LabelProps = {
+    text?: string;
+    prefixId?: string;
+    prefixLabel?: string;
+    menuButtonLabel?: ReactElement;
+    icon?: JSX.Element;
+};
+export {};
 //# sourceMappingURL=types.d.ts.map

package/ebay-menu-button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-menu-button/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-menu-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AACnG,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEpD,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAA;AAElE,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,0BAA0B,CAAC;IACtC,QAAQ,CAAC,EAAE,0BAA0B,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAA;AAED,KAAK,UAAU,GAAG,UAAU,GAAG,UAAU,CAAA;AACzC,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,CAAC,GACnF,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC,GACnD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GACrC,mBAAmB,CAAA;AAErB,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,YAAY,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAA"}

package/package.json

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