@ebay/ui-core-react 2.1.2 → 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 (9) hide show
  1. package/ebay-drawer-dialog/README.md +2 -2
  2. package/ebay-drawer-dialog/components/drawer.d.ts.map +1 -1
  3. package/ebay-drawer-dialog/components/drawer.js +5 -2
  4. package/ebay-tabs/tab.d.ts +3 -2
  5. package/ebay-tabs/tab.d.ts.map +1 -1
  6. package/ebay-tabs/tab.js +2 -2
  7. package/ebay-tabs/tabs.d.ts.map +1 -1
  8. package/ebay-tabs/tabs.js +20 -19
  9. package/package.json +1 -1
package/ebay-drawer-dialog/README.md CHANGED
@@ -25,8 +25,8 @@ import '@ebay/skin/drawer-dialog.css'
25
25
 
26
26
  Name | Type | Stateful | Required | Description
27
27
  --- | --- | --- | --- | ---
28
- `expanded` | Boolean | No | No | Whether the drawer is expanded to full height or max 50%
29
- `open` | Boolean | Yes | No | Whether drawer is open.
28
+ `expanded` | Boolean | No | No | Whether the drawer is expanded to full height or max 50%. Controlled.
29
+ `open` | Boolean | Yes | No | Whether drawer is open. Controlled.
30
30
  `noHandle` | Boolean | Yes | No | Whether handle will be shown or not.
31
31
  `focus` | String | No | No | An id for an element which will receive focus when the drawer opens (defaults to close button).
32
32
  `a11yCloseText` | String | No | Yes | A11y text for close button and mask.
package/ebay-drawer-dialog/components/drawer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/ebay-drawer-dialog/components/drawer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAY,EAAE,EAAgB,SAAS,EAA+B,MAAM,OAAO,CAAA;AAEjG,OAAO,EAAE,eAAe,EAAyC,MAAM,wBAAwB,CAAA;AAK/F,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,CA2F9C,CAAA;AAED,eAAe,gBAAgB,CAAA"}
1
+ {"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/ebay-drawer-dialog/components/drawer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAY,EAAE,EAAgB,SAAS,EAA0C,MAAM,OAAO,CAAA;AAE5G,OAAO,EAAE,eAAe,EAAyC,MAAM,wBAAwB,CAAA;AAK/F,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,CA+F9C,CAAA;AAED,eAAe,gBAAgB,CAAA"}
package/ebay-drawer-dialog/components/drawer.js CHANGED
@@ -51,9 +51,12 @@ var THRESHOLD_TOUCH = 30;
51
51
  var classPrefix = 'drawer-dialog';
52
52
  var EbayDrawerDialog = function (_a) {
53
53
  var _b;
54
- var _c = _a.expanded, defaultExpanded = _c === void 0 ? false : _c, noHandle = _a.noHandle, _d = _a.onClose, onClose = _d === void 0 ? function () { } : _d, _e = _a.onCollapsed, onCollapsed = _e === void 0 ? function () { } : _e, _f = _a.onExpanded, onExpanded = _f === void 0 ? function () { } : _f, _g = _a.a11yMaximizeText, a11yMaximizeText = _g === void 0 ? 'Maximize Drawer' : _g, _h = _a.a11yMinimizeText, a11yMinimizeText = _h === void 0 ? 'Minimize Drawer' : _h, children = _a.children, rest = __rest(_a, ["expanded", "noHandle", "onClose", "onCollapsed", "onExpanded", "a11yMaximizeText", "a11yMinimizeText", "children"]);
54
+ var _c = _a.expanded, controlledExpanded = _c === void 0 ? false : _c, noHandle = _a.noHandle, _d = _a.onClose, onClose = _d === void 0 ? function () { } : _d, _e = _a.onCollapsed, onCollapsed = _e === void 0 ? function () { } : _e, _f = _a.onExpanded, onExpanded = _f === void 0 ? function () { } : _f, _g = _a.a11yMaximizeText, a11yMaximizeText = _g === void 0 ? 'Maximize Drawer' : _g, _h = _a.a11yMinimizeText, a11yMinimizeText = _h === void 0 ? 'Minimize Drawer' : _h, children = _a.children, rest = __rest(_a, ["expanded", "noHandle", "onClose", "onCollapsed", "onExpanded", "a11yMaximizeText", "a11yMinimizeText", "children"]);
55
55
  var touches = [];
56
- var _j = react_1.useState(defaultExpanded), expanded = _j[0], setExpanded = _j[1];
56
+ var _j = react_1.useState(controlledExpanded), expanded = _j[0], setExpanded = _j[1];
57
+ react_1.useEffect(function () {
58
+ setExpanded(controlledExpanded);
59
+ }, [controlledExpanded]);
57
60
  var setExpandedState = function (expand) {
58
61
  setExpanded(expand);
59
62
  if (expand) {
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.2",
3
+ "version": "2.1.4",
4
4
  "description": "Skin components build off React",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",