@ebay/ui-core-react 1.4.1 → 1.5.0

package/ebay-icon/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/ebay-icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,GAAG,EAAE,QAAQ,EAAuB,MAAM,OAAO,CAAA;AAIrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAM9B,oBAAY,WAAW,GAAG,OAAO,CAAC;AAElC,oBAAY,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAE,eAAe,GAAG,MAAM,CAAA;IACvC,IAAI,EAAE,IAAI,CAAC;IACX,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CACrC,CAAC;;AAqEF,wBAAuC"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/ebay-icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,GAAG,EAAE,QAAQ,EAAuB,MAAM,OAAO,CAAA;AAIrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAQ9B,oBAAY,WAAW,GAAG,OAAO,CAAC;AAElC,oBAAY,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAE,eAAe,GAAG,MAAM,CAAA;IACvC,IAAI,EAAE,IAAI,CAAC;IACX,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CACrC,CAAC;;AAoEF,wBAAuC"}

package/ebay-icon/icon.js

@@ -48,8 +48,10 @@ var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var component_utils_1 = require("../common/component-utils");
 var random_id_1 = require("../common/random-id");
-var SMALL_ICON_SIZE = 16;
-var LARGE_ICON_SIZE = 64;
+var iconPixelSizes = {
+    small: 16,
+    large: 64
+};
 var DEFAULT_ICON_SIZE = 24;
 var EbayIcon = function (_a) {
     var _b;
@@ -58,29 +60,26 @@ var EbayIcon = function (_a) {
     react_1.useEffect(function () {
         setRandomId(random_id_1.randomId());
     }, []);
-    var noTitle = a11yVariant === 'label';
+    var withAriaLabel = a11yVariant === 'label';
     var a11yTextId = a11yText && "icon-title-" + rId;
     var a11yProps = a11yText ? {
-        'aria-labelledby': noTitle ? undefined : a11yTextId,
-        'aria-label': noTitle ? a11yText : undefined,
+        'aria-labelledby': withAriaLabel ? undefined : a11yTextId,
+        'aria-label': withAriaLabel ? a11yText : undefined,
         role: 'img'
     } : {
         'aria-hidden': true
     };
-    var iconSize = getIconSize(name) + "px";
     var prefixSvg = type === 'icon' ? 'icon-' : '';
     var kebabName = kebabCased(name);
+    var iconSize = getIconPixelSize(kebabName) + "px";
     var className = classnames_1.default(extraClass, (_b = {}, _b[getIconClass(type, kebabName)] = !noSkinClasses, _b));
     return (react_1.default.createElement("svg", __assign({ height: iconSize, width: iconSize }, rest, { className: className, xmlns: "http://www.w3.org/2000/svg", focusable: false, ref: forwardedRef }, a11yProps),
-        a11yText && !noTitle && react_1.default.createElement("title", { id: a11yTextId }, a11yText),
+        a11yText && !withAriaLabel && react_1.default.createElement("title", { id: a11yTextId }, a11yText),
         react_1.default.createElement("use", { xlinkHref: "#" + prefixSvg + kebabName })));
 };
-function getIconSize(iconName) {
+function getIconPixelSize(iconName) {
     var sizeCandidate = iconName.split('-').slice(-1)[0];
-    return {
-        small: SMALL_ICON_SIZE,
-        large: LARGE_ICON_SIZE
-    }[sizeCandidate] || DEFAULT_ICON_SIZE;
+    return iconPixelSizes[sizeCandidate] || DEFAULT_ICON_SIZE;
 }
 function kebabCased(str) {
     return str.replace(/([A-Z])/g, function (s, c) { return "-" + c.toLowerCase(); });

package/ebay-inline-notice/inline-notice.js

@@ -56,7 +56,7 @@ var EbayInlineNotice = function (_a) {
     var isGeneral = status === "general";
     return (react_1.default.createElement("div", { className: classnames_1.default(className, "inline-notice " + (!isGeneral ? "inline-notice--" + status : "")) },
         !isGeneral ? (react_1.default.createElement("span", { className: "inline-notice__header" },
-            react_1.default.createElement(ebay_icon_1.EbayIcon, { name: status + "-filled", a11yText: ariaLabel, a11yVariant: "label" }))) : null,
+            react_1.default.createElement(ebay_icon_1.EbayIcon, { name: status + "FilledSmall", a11yText: ariaLabel, a11yVariant: "label" }))) : null,
         react_1.default.createElement(notice_content_1.default, __assign({}, content.props, { type: "inline" }))));
 };
 exports.default = EbayInlineNotice;

package/ebay-page-notice/page-notice.js

@@ -28,7 +28,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var notice_content_1 = __importDefault(require("../common/notice-utils/notice-content"));
 var ebay_notice_content_1 = require("../ebay-notice-base/components/ebay-notice-content");
-var icon_1 = __importDefault(require("../ebay-icon/icon"));
+var ebay_icon_1 = require("../ebay-icon");
 var EbayPageNotice = function (_a) {
     var _b = _a.status, status = _b === void 0 ? 'general' : _b, children = _a.children, ariaLabel = _a["aria-label"], rest = __rest(_a, ["status", "children", 'aria-label']);
     var childrenArray = react_1.default.Children.toArray(children);
@@ -38,7 +38,7 @@ var EbayPageNotice = function (_a) {
     }
     return (react_1.default.createElement("section", __assign({}, rest, { "aria-labelledby": status + "-status", className: "page-notice " + (status !== "general" ? "page-notice--" + status : ""), role: "region" }),
         status !== "general" ? (react_1.default.createElement("div", { className: "page-notice__header", id: status + "-status" },
-            react_1.default.createElement(icon_1.default, { name: status + "-filled", a11yText: ariaLabel, a11yVariant: "label" }))) : null,
+            react_1.default.createElement(ebay_icon_1.EbayIcon, { name: status + "FilledSmall", a11yText: ariaLabel, a11yVariant: "label" }))) : null,
         react_1.default.createElement(notice_content_1.default, __assign({}, content.props, { type: "page" })),
         children));
 };

package/ebay-section-notice/section-notice.js

@@ -29,7 +29,7 @@ var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var ebay_notice_content_1 = require("../ebay-notice-base/components/ebay-notice-content");
 var notice_content_1 = __importDefault(require("../common/notice-utils/notice-content"));
-var icon_1 = __importDefault(require("../ebay-icon/icon"));
+var ebay_icon_1 = require("../ebay-icon");
 var EbaySectionNotice = function (_a) {
     var _b = _a.status, status = _b === void 0 ? 'general' : _b, children = _a.children, className = _a.className, ariaLabel = _a["aria-label"], _c = _a["aria-roledescription"], ariaRoleDescription = _c === void 0 ? 'Notice' : _c, rest = __rest(_a, ["status", "children", "className", 'aria-label', 'aria-roledescription']);
     var childrenArray = react_1.default.Children.toArray(children);
@@ -43,7 +43,7 @@ var EbaySectionNotice = function (_a) {
     }
     return (react_1.default.createElement("section", __assign({}, rest, { className: classnames_1.default(className, "section-notice", hasStatus && "section-notice--" + status), role: "region", "aria-label": !hasStatus ? ariaLabel : null, "aria-labelledby": hasStatus ? "section-notice-" + status : null, "aria-roledescription": ariaRoleDescription }),
         hasStatus && (react_1.default.createElement("div", { className: "section-notice__header", id: "section-notice-" + status },
-            react_1.default.createElement(icon_1.default, { name: status + "-filled", a11yText: ariaLabel, a11yVariant: "label" }))),
+            react_1.default.createElement(ebay_icon_1.EbayIcon, { name: status + "FilledSmall", a11yText: ariaLabel, a11yVariant: "label" }))),
         react_1.default.createElement(notice_content_1.default, __assign({}, content.props, { type: "section" })),
         children));
 };

package/ebay-tabs/tabs.d.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentProps, ReactElement } from 'react';
+import { ComponentProps, FC } from 'react';
 import { Activation, Size } from './types';
 declare type TabsProps = ComponentProps<'div'> & {
     index?: number;
@@ -8,21 +8,6 @@ declare type TabsProps = ComponentProps<'div'> & {
     activation?: Activation;
     onTabSelect?: (index: number) => void;
 };
-declare type State = {
-    selectedIndex: number;
-    focusedIndex: number;
-};
-declare class Tabs extends Component<TabsProps, State> {
-    headings: HTMLElement[];
-    constructor(props: TabsProps);
-    componentDidUpdate(prevProps: TabsProps): void;
-    onTabSelect(i: number): void;
-    /**
-     * Handle a11y for heading
-     * https://ebay.gitbooks.io/mindpatterns/content/disclosure/tabs.html
-     */
-    onTabKeyDown(ev: KeyboardEvent, index: number): void;
-    render(): ReactElement;
-}
+declare const Tabs: FC<TabsProps>;
 export default Tabs;
 //# sourceMappingURL=tabs.d.ts.map

package/ebay-tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/ebay-tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAItE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAI1C,aAAK,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAE9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,aAAK,KAAK,GAAG;IACT,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;CACxB,CAAA;AAGD,cAAM,IAAK,SAAQ,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC;IAC1C,QAAQ,EAAE,WAAW,EAAE,CAAC;gBAEZ,KAAK,EAAE,SAAS;IAc5B,kBAAkB,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI;IAO9C,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAU5B;;;OAGG;IACH,YAAY,CAAC,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAyBpD,MAAM,IAAI,YAAY;CA2DzB;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/ebay-tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,cAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAA;AAIpF,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAI1C,aAAK,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAE9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA0GvB,CAAA;AAED,eAAe,IAAI,CAAA"}

package/ebay-tabs/tabs.js

@@ -1,17 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -41,99 +28,79 @@ var tab_1 = __importDefault(require("./tab"));
 var tab_panel_1 = __importDefault(require("./tab-panel"));
 var component_utils_1 = require("../common/component-utils");
 var classnames_1 = __importDefault(require("classnames"));
-// todo: convert to hooks
-var Tabs = /** @class */ (function (_super) {
-    __extends(Tabs, _super);
-    function Tabs(props) {
-        var _this = _super.call(this, props) || this;
-        var _a = props.index, index = _a === void 0 ? 0 : _a;
-        _this.onTabSelect = _this.onTabSelect.bind(_this);
-        _this.headings = [];
-        _this.state = {
-            selectedIndex: index,
-            focusedIndex: index
-        };
-        return _this;
-    }
-    Tabs.prototype.componentDidUpdate = function (prevProps) {
-        var _a;
-        if (this.props.index !== prevProps.index) {
-            this.onTabSelect(this.props.index);
-        }
-        (_a = this.headings[this.state.focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    Tabs.prototype.onTabSelect = function (i) {
-        if (this.props.onTabSelect) {
-            this.props.onTabSelect(i);
-        }
-        this.setState({
-            selectedIndex: i,
-            focusedIndex: i
-        });
+var Tabs = function (_a) {
+    var id = _a.id, className = _a.className, _b = _a.index, index = _b === void 0 ? 0 : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.activation, activation = _d === void 0 ? 'auto' : _d, _e = _a.onTabSelect, onTabSelect = _e === void 0 ? function () { } : _e, children = _a.children;
+    var headings = [];
+    var _f = react_1.useState(index), selectedIndex = _f[0], setSelectedIndex = _f[1];
+    var _g = react_1.useState(index), focusedIndex = _g[0], setFocusedIndex = _g[1];
+    var onSelect = function (i) {
+        onTabSelect(i);
+        setSelectedIndex(i);
+        setFocusedIndex(i);
     };
     /**
      * Handle a11y for heading
      * https://ebay.gitbooks.io/mindpatterns/content/disclosure/tabs.html
      */
-    Tabs.prototype.onTabKeyDown = function (ev, index) {
-        var _this = this;
-        var _a = this.props, _b = _a.activation, activation = _b === void 0 ? 'auto' : _b, children = _a.children;
+    var onKeyDown = function (ev, i) {
         event_utils_1.handleActionKeydown(ev, function () {
             ev.preventDefault();
             if (activation === 'manual') {
-                _this.onTabSelect(index);
+                onSelect(i);
             }
         });
         event_utils_1.handleLeftRightArrowsKeydown(ev, function () {
             ev.preventDefault();
             var len = component_utils_1.filterByType(children, tab_1.default).length;
             var direction = ['Left', 'ArrowLeft'].includes(ev.key) ? -1 : 1;
-            var nextIndex = (_this.state.focusedIndex + len + direction) % len;
-            _this.setState({ focusedIndex: nextIndex });
+            var nextIndex = (focusedIndex + len + direction) % len;
+            setFocusedIndex(nextIndex);
             if (activation !== 'manual') {
-                _this.onTabSelect(nextIndex);
+                onSelect(nextIndex);
             }
         });
     };
-    Tabs.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, id = _a.id, className = _a.className, _b = _a.size, size = _b === void 0 ? 'medium' : _b, children = _a.children;
-        var fake = component_utils_1.filterBy(children, function (_a) {
-            var type = _a.type, props = _a.props;
-            return type === tab_1.default && props.href;
-        }).length > 0;
-        var large = size === 'large';
-        var tabHeadings = component_utils_1.filterByType(children, tab_1.default).map(function (item, i) {
-            var _a = item.props, href = _a.href, content = _a.children;
-            var itemProps = {
-                refCallback: function (ref) { _this.headings[i] = ref; },
-                index: i,
-                parentId: id,
-                selected: _this.state.selectedIndex === i,
-                href: href,
-                children: content,
-                onClick: function () { _this.onTabSelect(i); },
-                onKeyDown: function (e) { _this.onTabKeyDown(e, i); }
-            };
-            return react_1.default.cloneElement(item, itemProps);
-        });
-        var tabPanels = component_utils_1.filterByType(children, tab_panel_1.default).map(function (item, i) {
-            var content = item.props.children;
-            var itemProps = {
-                index: i,
-                parentId: id,
-                selected: _this.state.selectedIndex === i,
-                fake: fake,
-                children: content
-            };
-            return react_1.default.cloneElement(item, itemProps);
-        });
-        return fake ? (react_1.default.createElement("div", { id: id, className: classnames_1.default(className, 'fake-tabs') },
-            react_1.default.createElement("ul", { className: classnames_1.default('fake-tabs__items', { 'fake-tabs__items--large': large }) }, tabHeadings),
-            react_1.default.createElement("div", { className: "fake-tabs__content" }, tabPanels))) : (react_1.default.createElement("div", { id: id, className: classnames_1.default(className, 'tabs') },
-            react_1.default.createElement("div", { className: classnames_1.default('tabs__items', { 'tabs__items--large': large }), role: "tablist" }, tabHeadings),
-            react_1.default.createElement("div", { className: "tabs__content" }, tabPanels)));
-    };
-    return Tabs;
-}(react_1.Component));
+    react_1.useEffect(function () {
+        onSelect(index);
+    }, [index]);
+    react_1.useEffect(function () {
+        var _a;
+        (_a = headings[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [focusedIndex]);
+    var isFake = component_utils_1.filterBy(children, function (_a) {
+        var type = _a.type, props = _a.props;
+        return type === tab_1.default && props.href;
+    }).length > 0;
+    var isLarge = size === 'large';
+    var tabHeadings = component_utils_1.filterByType(children, tab_1.default).map(function (item, i) {
+        var _a = item.props, href = _a.href, content = _a.children;
+        var itemProps = {
+            refCallback: function (ref) { headings[i] = ref; },
+            index: i,
+            parentId: id,
+            selected: selectedIndex === i,
+            href: href,
+            children: content,
+            onClick: function () { onSelect(i); },
+            onKeyDown: function (e) { onKeyDown(e, i); }
+        };
+        return react_1.cloneElement(item, itemProps);
+    });
+    var tabPanels = component_utils_1.filterByType(children, tab_panel_1.default).map(function (item, i) {
+        var content = item.props.children;
+        var itemProps = {
+            index: i,
+            parentId: id,
+            selected: selectedIndex === i,
+            fake: isFake,
+            children: content
+        };
+        return react_1.cloneElement(item, itemProps);
+    });
+    return isFake ? (react_1.default.createElement("div", { id: id, className: classnames_1.default(className, 'fake-tabs') },
+        react_1.default.createElement("ul", { className: classnames_1.default('fake-tabs__items', { 'fake-tabs__items--large': isLarge }) }, tabHeadings),
+        react_1.default.createElement("div", { className: "fake-tabs__content" }, tabPanels))) : (react_1.default.createElement("div", { id: id, className: classnames_1.default(className, 'tabs') },
+        react_1.default.createElement("div", { className: classnames_1.default('tabs__items', { 'tabs__items--large': isLarge }), role: "tablist" }, tabHeadings),
+        react_1.default.createElement("div", { className: "tabs__content" }, tabPanels)));
+};
 exports.default = Tabs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Skin components build off React",
   "main": "index.js",
   "types": "index.d.ts",