@ebay/ui-core-react 2.1.3 → 2.1.4

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 (6) hide show
  1. package/ebay-tabs/tab.d.ts +3 -2
  2. package/ebay-tabs/tab.d.ts.map +1 -1
  3. package/ebay-tabs/tab.js +2 -2
  4. package/ebay-tabs/tabs.d.ts.map +1 -1
  5. package/ebay-tabs/tabs.js +20 -19
  6. package/package.json +1 -1
package/ebay-tabs/tab.d.ts CHANGED
@@ -1,12 +1,13 @@
1
- import { ComponentProps, FC } from 'react';
1
+ import { ComponentProps, FC, RefCallback } from 'react';
2
2
  declare type TabProps = ComponentProps<'li'> & ComponentProps<'div'> & {
3
3
  index?: number;
4
4
  parentId?: string;
5
5
  selected?: boolean;
6
+ focused?: boolean;
6
7
  href?: string;
7
8
  onClick?: () => void;
8
9
  onKeyDown?: () => void;
9
- refCallback?: () => void;
10
+ refCallback?: RefCallback<HTMLElement>;
10
11
  };
11
12
  declare const Tab: FC<TabProps>;
12
13
  export default Tab;
package/ebay-tabs/tab.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/ebay-tabs/tab.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjD,aAAK,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAA;AAED,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CAmCjB,CAAA;AAEL,eAAe,GAAG,CAAA"}
1
+ {"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/ebay-tabs/tab.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAG9D,aAAK,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;CAC1C,CAAA;AAED,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CAoCjB,CAAA;AAEL,eAAe,GAAG,CAAA"}
package/ebay-tabs/tab.js CHANGED
@@ -28,9 +28,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
28
28
  var react_1 = __importDefault(require("react"));
29
29
  var classnames_1 = __importDefault(require("classnames"));
30
30
  var Tab = function (_a) {
31
- var children = _a.children, index = _a.index, parentId = _a.parentId, selected = _a.selected, href = _a.href, className = _a.className, refCallback = _a.refCallback, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.onKeyDown, onKeyDown = _c === void 0 ? function () { } : _c, rest = __rest(_a, ["children", "index", "parentId", "selected", "href", "className", "refCallback", "onClick", "onKeyDown"]);
31
+ var children = _a.children, index = _a.index, parentId = _a.parentId, selected = _a.selected, focused = _a.focused, href = _a.href, className = _a.className, refCallback = _a.refCallback, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.onKeyDown, onKeyDown = _c === void 0 ? function () { } : _c, rest = __rest(_a, ["children", "index", "parentId", "selected", "focused", "href", "className", "refCallback", "onClick", "onKeyDown"]);
32
32
  return href ? (react_1.default.createElement("li", __assign({}, rest, { className: classnames_1.default(className, 'fake-tabs__item', { 'fake-tabs__item--current': selected }) }),
33
- react_1.default.createElement("a", { href: href, "aria-current": selected ? "page" : null }, children))) : (react_1.default.createElement("div", __assign({}, rest, { ref: refCallback, "aria-controls": (parentId || 'default') + "-tabpanel-" + index, "aria-selected": selected, className: classnames_1.default(className, 'tabs__item'), id: (parentId || 'default') + "-tab-" + index, role: "tab", tabIndex: selected ? 0 : -1, onClick: onClick, onKeyDown: onKeyDown }),
33
+ react_1.default.createElement("a", { href: href, "aria-current": selected ? "page" : null }, children))) : (react_1.default.createElement("div", __assign({}, rest, { ref: refCallback, "aria-controls": (parentId || 'default') + "-tabpanel-" + index, "aria-selected": selected, className: classnames_1.default(className, 'tabs__item'), id: (parentId || 'default') + "-tab-" + index, role: "tab", tabIndex: focused ? 0 : -1, onClick: onClick, onKeyDown: onKeyDown }),
34
34
  react_1.default.createElement("span", null, children)));
35
35
  };
36
36
  exports.default = Tab;
package/ebay-tabs/tabs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"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,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"}
1
+ {"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;AAMpF,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG1C,aAAK,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,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,CAsGvB,CAAA;AAED,eAAe,IAAI,CAAA"}
package/ebay-tabs/tabs.js CHANGED
@@ -1,4 +1,15 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
2
13
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
14
  if (k2 === undefined) k2 = k;
4
15
  Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -23,11 +34,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
23
34
  };
24
35
  Object.defineProperty(exports, "__esModule", { value: true });
25
36
  var react_1 = __importStar(require("react"));
37
+ var classnames_1 = __importDefault(require("classnames"));
26
38
  var event_utils_1 = require("../common/event-utils");
27
39
  var tab_1 = __importDefault(require("./tab"));
28
40
  var tab_panel_1 = __importDefault(require("./tab-panel"));
29
41
  var component_utils_1 = require("../common/component-utils");
30
- var classnames_1 = __importDefault(require("classnames"));
31
42
  var Tabs = function (_a) {
32
43
  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;
33
44
  var headings = [];
@@ -36,7 +47,6 @@ var Tabs = function (_a) {
36
47
  var onSelect = function (i) {
37
48
  onTabSelect(i);
38
49
  setSelectedIndex(i);
39
- setFocusedIndex(i);
40
50
  };
41
51
  /**
42
52
  * Handle a11y for heading
@@ -50,11 +60,14 @@ var Tabs = function (_a) {
50
60
  }
51
61
  });
52
62
  event_utils_1.handleLeftRightArrowsKeydown(ev, function () {
63
+ var _a;
53
64
  ev.preventDefault();
54
65
  var len = component_utils_1.filterByType(children, tab_1.default).length;
55
66
  var direction = ['Left', 'ArrowLeft'].includes(ev.key) ? -1 : 1;
56
- var nextIndex = (focusedIndex + len + direction) % len;
67
+ var currentIndex = focusedIndex === undefined ? selectedIndex : focusedIndex;
68
+ var nextIndex = (currentIndex + len + direction) % len;
57
69
  setFocusedIndex(nextIndex);
70
+ (_a = headings[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
58
71
  if (activation !== 'manual') {
59
72
  onSelect(nextIndex);
60
73
  }
@@ -63,28 +76,16 @@ var Tabs = function (_a) {
63
76
  react_1.useEffect(function () {
64
77
  onSelect(index);
65
78
  }, [index]);
66
- react_1.useEffect(function () {
67
- var _a;
68
- (_a = headings[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
69
- }, [focusedIndex]);
70
79
  var isFake = component_utils_1.filterBy(children, function (_a) {
71
80
  var type = _a.type, props = _a.props;
72
81
  return type === tab_1.default && props.href;
73
82
  }).length > 0;
74
83
  var isLarge = size === 'large';
75
84
  var tabHeadings = component_utils_1.filterByType(children, tab_1.default).map(function (item, i) {
76
- var _a = item.props, href = _a.href, content = _a.children;
77
- var itemProps = {
78
- refCallback: function (ref) { headings[i] = ref; },
79
- index: i,
80
- parentId: id,
81
- selected: selectedIndex === i,
82
- href: href,
83
- children: content,
84
- onClick: function () { onSelect(i); },
85
- onKeyDown: function (e) { onKeyDown(e, i); }
86
- };
87
- return react_1.cloneElement(item, itemProps);
85
+ return react_1.cloneElement(item, __assign(__assign({}, item.props), { refCallback: function (ref) { headings[i] = ref; }, index: i, parentId: id, selected: selectedIndex === i, focused: focusedIndex === i, onClick: function () {
86
+ onSelect(i);
87
+ setFocusedIndex(i);
88
+ }, onKeyDown: function (e) { onKeyDown(e, i); } }));
88
89
  });
89
90
  var tabPanels = component_utils_1.filterByType(children, tab_panel_1.default).map(function (item, i) {
90
91
  var content = item.props.children;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ebay/ui-core-react",
3
- "version": "2.1.3",
3
+ "version": "2.1.4",
4
4
  "description": "Skin components build off React",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",