@ebay/ui-core-react 4.2.6 → 5.0.0

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 (143) hide show
  1. package/common/event-utils/index.d.ts +10 -7
  2. package/common/event-utils/index.d.ts.map +1 -1
  3. package/common/event-utils/index.js +11 -3
  4. package/common/event-utils/types.d.ts +7 -0
  5. package/common/event-utils/types.d.ts.map +1 -1
  6. package/common/event-utils/types.js +12 -0
  7. package/common/floating-label-utils/hooks.d.ts +2 -1
  8. package/common/floating-label-utils/hooks.d.ts.map +1 -1
  9. package/common/floating-label-utils/hooks.js +5 -4
  10. package/ebay-alert-dialog/README.md +3 -2
  11. package/ebay-alert-dialog/alert-dialog.d.ts +0 -1
  12. package/ebay-alert-dialog/alert-dialog.d.ts.map +1 -1
  13. package/ebay-alert-dialog/alert-dialog.js +1 -1
  14. package/ebay-breadcrumbs/README.md +1 -1
  15. package/ebay-breadcrumbs/breadcrumbs.d.ts +3 -2
  16. package/ebay-breadcrumbs/breadcrumbs.d.ts.map +1 -1
  17. package/ebay-breadcrumbs/breadcrumbs.js +1 -1
  18. package/ebay-button/README.md +4 -4
  19. package/ebay-carousel/carousel.js +1 -1
  20. package/ebay-checkbox/README.md +11 -10
  21. package/ebay-checkbox/checkbox.d.ts +15 -3
  22. package/ebay-checkbox/checkbox.d.ts.map +1 -1
  23. package/ebay-checkbox/checkbox.js +9 -4
  24. package/ebay-confirm-dialog/README.md +6 -6
  25. package/ebay-confirm-dialog/confirm-dialog.d.ts +0 -1
  26. package/ebay-confirm-dialog/confirm-dialog.d.ts.map +1 -1
  27. package/ebay-confirm-dialog/confirm-dialog.js +1 -1
  28. package/ebay-dialog-base/components/dialogBase.d.ts +3 -2
  29. package/ebay-dialog-base/components/dialogBase.d.ts.map +1 -1
  30. package/ebay-dialog-base/components/dialogBase.js +6 -3
  31. package/ebay-drawer-dialog/README.md +7 -6
  32. package/ebay-drawer-dialog/components/drawer.d.ts +3 -0
  33. package/ebay-drawer-dialog/components/drawer.d.ts.map +1 -1
  34. package/ebay-fake-menu/README.md +5 -5
  35. package/ebay-fake-menu/menu-item.d.ts +1 -1
  36. package/ebay-fake-menu/menu-item.d.ts.map +1 -1
  37. package/ebay-fake-menu/menu.d.ts +9 -5
  38. package/ebay-fake-menu/menu.d.ts.map +1 -1
  39. package/ebay-fake-menu/menu.js +2 -2
  40. package/ebay-fake-menu-button/README.md +9 -4
  41. package/ebay-fake-menu-button/menu-button.d.ts +9 -2
  42. package/ebay-fake-menu-button/menu-button.d.ts.map +1 -1
  43. package/ebay-fake-menu-button/menu-button.js +7 -5
  44. package/ebay-fullscreen-dialog/fullscreen-dialog.d.ts +0 -1
  45. package/ebay-fullscreen-dialog/fullscreen-dialog.d.ts.map +1 -1
  46. package/ebay-fullscreen-dialog/fullscreen-dialog.js +1 -1
  47. package/ebay-icon-button/README.md +9 -0
  48. package/ebay-icon-button/icon-button.d.ts +3 -1
  49. package/ebay-icon-button/icon-button.d.ts.map +1 -1
  50. package/ebay-icon-button/icon-button.js +8 -2
  51. package/ebay-lightbox-dialog/lightbox-dialog.d.ts +0 -1
  52. package/ebay-lightbox-dialog/lightbox-dialog.d.ts.map +1 -1
  53. package/ebay-lightbox-dialog/lightbox-dialog.js +1 -1
  54. package/ebay-listbox-button/README.md +8 -1
  55. package/ebay-listbox-button/listbox-button.d.ts +11 -3
  56. package/ebay-listbox-button/listbox-button.d.ts.map +1 -1
  57. package/ebay-listbox-button/listbox-button.js +41 -16
  58. package/ebay-menu/README.md +5 -4
  59. package/ebay-menu/menu-item.d.ts +1 -1
  60. package/ebay-menu/menu-item.d.ts.map +1 -1
  61. package/ebay-menu/menu.d.ts +4 -4
  62. package/ebay-menu/menu.d.ts.map +1 -1
  63. package/ebay-menu/menu.js +85 -42
  64. package/ebay-menu/types.d.ts +21 -12
  65. package/ebay-menu/types.d.ts.map +1 -1
  66. package/ebay-menu-button/README.md +2 -2
  67. package/ebay-menu-button/menu-button.d.ts +3 -3
  68. package/ebay-menu-button/menu-button.d.ts.map +1 -1
  69. package/ebay-menu-button/menu-button.js +18 -4
  70. package/ebay-page-notice/README.md +5 -1
  71. package/ebay-page-notice/index.d.ts +1 -1
  72. package/ebay-page-notice/index.d.ts.map +1 -1
  73. package/ebay-page-notice/page-notice.d.ts +5 -4
  74. package/ebay-page-notice/page-notice.d.ts.map +1 -1
  75. package/ebay-page-notice/page-notice.js +7 -8
  76. package/ebay-pagination/README.md +5 -5
  77. package/ebay-pagination/pagination-item.d.ts +8 -4
  78. package/ebay-pagination/pagination-item.d.ts.map +1 -1
  79. package/ebay-pagination/pagination-item.js +2 -1
  80. package/ebay-pagination/pagination.d.ts +8 -5
  81. package/ebay-pagination/pagination.d.ts.map +1 -1
  82. package/ebay-pagination/pagination.js +1 -1
  83. package/ebay-panel-dialog/panel-dialog.d.ts +0 -1
  84. package/ebay-panel-dialog/panel-dialog.d.ts.map +1 -1
  85. package/ebay-panel-dialog/panel-dialog.js +1 -1
  86. package/ebay-radio/README.md +7 -2
  87. package/ebay-radio/radio.d.ts +12 -3
  88. package/ebay-radio/radio.d.ts.map +1 -1
  89. package/ebay-radio/radio.js +7 -5
  90. package/ebay-section-notice/README.md +5 -0
  91. package/ebay-section-notice/index.d.ts +1 -1
  92. package/ebay-section-notice/index.d.ts.map +1 -1
  93. package/ebay-section-notice/section-notice.d.ts +6 -3
  94. package/ebay-section-notice/section-notice.d.ts.map +1 -1
  95. package/ebay-section-notice/section-notice.js +32 -4
  96. package/ebay-select/README.md +3 -1
  97. package/ebay-select/ebay-select.d.ts +7 -2
  98. package/ebay-select/ebay-select.d.ts.map +1 -1
  99. package/ebay-select/ebay-select.js +1 -1
  100. package/ebay-select/index.d.ts +1 -1
  101. package/ebay-select/index.d.ts.map +1 -1
  102. package/ebay-split-button/README.md +2 -2
  103. package/ebay-split-button/split-button.js +1 -1
  104. package/ebay-split-button/types.d.ts +2 -3
  105. package/ebay-split-button/types.d.ts.map +1 -1
  106. package/ebay-star-rating-select/README.md +8 -0
  107. package/ebay-star-rating-select/star-rating-select.d.ts +8 -4
  108. package/ebay-star-rating-select/star-rating-select.d.ts.map +1 -1
  109. package/ebay-star-rating-select/star-rating-select.js +8 -8
  110. package/ebay-switch/README.md +5 -1
  111. package/ebay-switch/ebay-switch.d.ts +7 -3
  112. package/ebay-switch/ebay-switch.d.ts.map +1 -1
  113. package/ebay-switch/ebay-switch.js +6 -3
  114. package/ebay-tabs/README.md +6 -10
  115. package/ebay-tabs/tab-panel.d.ts +0 -1
  116. package/ebay-tabs/tab-panel.d.ts.map +1 -1
  117. package/ebay-tabs/tab-panel.js +2 -2
  118. package/ebay-tabs/tab.d.ts +1 -7
  119. package/ebay-tabs/tab.d.ts.map +1 -1
  120. package/ebay-tabs/tab.js +2 -7
  121. package/ebay-tabs/tabs.d.ts +7 -1
  122. package/ebay-tabs/tabs.d.ts.map +1 -1
  123. package/ebay-tabs/tabs.js +12 -19
  124. package/ebay-textbox/README.md +16 -9
  125. package/ebay-textbox/postfix-icon.d.ts.map +1 -1
  126. package/ebay-textbox/postfix-icon.js +25 -3
  127. package/ebay-textbox/prefix-icon.d.ts.map +1 -1
  128. package/ebay-textbox/prefix-icon.js +24 -2
  129. package/ebay-textbox/textbox.d.ts +17 -7
  130. package/ebay-textbox/textbox.d.ts.map +1 -1
  131. package/ebay-textbox/textbox.js +47 -14
  132. package/ebay-textbox/types.d.ts +2 -2
  133. package/ebay-textbox/types.d.ts.map +1 -1
  134. package/ebay-video/README.md +7 -5
  135. package/ebay-video/controls.d.ts.map +1 -1
  136. package/ebay-video/controls.js +10 -4
  137. package/ebay-video/reportButton.d.ts +1 -5
  138. package/ebay-video/reportButton.d.ts.map +1 -1
  139. package/ebay-video/reportButton.js +3 -3
  140. package/ebay-video/video.d.ts +13 -10
  141. package/ebay-video/video.d.ts.map +1 -1
  142. package/ebay-video/video.js +4 -1
  143. package/package.json +1 -1
package/ebay-menu/menu.js CHANGED
@@ -40,6 +40,13 @@ var __rest = (this && this.__rest) || function (s, e) {
40
40
  }
41
41
  return t;
42
42
  };
43
+ var __spreadArrays = (this && this.__spreadArrays) || function () {
44
+ for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
45
+ for (var r = Array(s), k = 0, i = 0; i < il; i++)
46
+ for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
47
+ r[k] = a[j];
48
+ return r;
49
+ };
43
50
  var __importDefault = (this && this.__importDefault) || function (mod) {
44
51
  return (mod && mod.__esModule) ? mod : { "default": mod };
45
52
  };
@@ -47,81 +54,117 @@ Object.defineProperty(exports, "__esModule", { value: true });
47
54
  var react_1 = __importStar(require("react"));
48
55
  var classnames_1 = __importDefault(require("classnames"));
49
56
  var use_roving_index_1 = __importDefault(require("../common/event-utils/use-roving-index"));
50
- var usePrevious_1 = require("../common/component-utils/usePrevious");
51
57
  var event_utils_1 = require("../common/event-utils");
58
+ var component_utils_1 = require("../common/component-utils");
52
59
  var index_1 = require("./index");
53
- var changedIndex = function (arr1, arr2) { return arr1.findIndex(function (x, i) { return arr2[i] !== x; }); };
54
60
  var EbayMenu = function (_a) {
55
- var _b = _a.baseEl, Container = _b === void 0 ? 'span' : _b, type = _a.type, _c = _a.priority, priority = _c === void 0 ? 'secondary' : _c, checked = _a.checked, className = _a.className, _d = _a.onKeyDown, onKeyDown = _d === void 0 ? function () { } : _d, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, _f = _a.onSelect, onSelect = _f === void 0 ? function () { } : _f, children = _a.children, rest = __rest(_a, ["baseEl", "type", "priority", "checked", "className", "onKeyDown", "onChange", "onSelect", "children"]);
61
+ var _b = _a.baseEl, Container = _b === void 0 ? 'span' : _b, type = _a.type, _c = _a.priority, priority = _c === void 0 ? 'secondary' : _c, checked = _a.checked, className = _a.className, autofocus = _a.autofocus, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.onKeyDown, onKeyDown = _e === void 0 ? function () { } : _e, _f = _a.onChange, onChange = _f === void 0 ? function () { } : _f, _g = _a.onSelect, onSelect = _g === void 0 ? function () { } : _g, forwardedRef = _a.forwardedRef, children = _a.children, rest = __rest(_a, ["baseEl", "type", "priority", "checked", "className", "autofocus", "onClick", "onKeyDown", "onChange", "onSelect", "forwardedRef", "children"]);
56
62
  var childrenArray = react_1.Children.toArray(children);
57
- var _g = use_roving_index_1.default(children, index_1.EbayMenuItem), focusedIndex = _g[0], setFocusedIndex = _g[1];
58
- var _h = react_1.useState(childrenArray.map(function () { return false; })), checkedIndexes = _h[0], setCheckedIndexes = _h[1];
63
+ var _h = use_roving_index_1.default(children, index_1.EbayMenuItem, autofocus === true ? 0 : undefined), focusedIndex = _h[0], setFocusedIndex = _h[1];
64
+ var _j = react_1.useState(childrenArray.map(function () { return false; })), checkedIndexes = _j[0], setCheckedIndexes = _j[1];
65
+ var valuesFromChecked = function (indexes) {
66
+ return childrenArray.reduce(function (values, item, i) {
67
+ return indexes[i] ? __spreadArrays(values, [item.props.value]) : values;
68
+ }, []);
69
+ };
70
+ var indexesFromChecked = function (indexes) {
71
+ return indexes.reduce(function (all, value, i) { return value ? __spreadArrays(all, [i]) : all; }, []);
72
+ };
73
+ var eventProps = function (index, indexes) { return ({
74
+ index: index,
75
+ checked: indexesFromChecked(indexes)
76
+ }); };
77
+ var checkboxEventProps = function (index, indexes) { return (__assign(__assign({}, eventProps(index, indexes)), { indexes: indexesFromChecked(indexes), checkedValues: valuesFromChecked(indexes) })); };
59
78
  var updateIndex = function (index, value, resetOthers) {
60
79
  if (resetOthers === void 0) { resetOthers = false; }
61
- setCheckedIndexes(function (prevCheckedIndexes) {
62
- return prevCheckedIndexes.map(function (indexChecked, i) {
63
- var defaultValue = resetOthers ? false : indexChecked;
64
- return index === i ? value : defaultValue;
65
- });
80
+ var anyChanges = false;
81
+ var newValues = checkedIndexes.map(function (indexChecked, i) {
82
+ var defaultValue = resetOthers ? false : indexChecked;
83
+ if (index === i) {
84
+ if (indexChecked !== value) {
85
+ anyChanges = true;
86
+ }
87
+ return value;
88
+ }
89
+ return defaultValue;
66
90
  });
91
+ if (anyChanges) {
92
+ setCheckedIndexes(newValues);
93
+ return newValues;
94
+ }
67
95
  };
68
96
  var selectIndex = function (index) {
69
97
  switch (type) {
70
98
  case 'radio':
71
99
  return updateIndex(index, true, true);
72
100
  case 'checkbox':
73
- return updateIndex(index, !checkedIndexes[index]);
101
+ return updateIndex(index, !checkedIndexes[index], false);
74
102
  default:
75
- return;
103
+ return checkedIndexes.map(function (_, i) { return i === index; });
76
104
  }
77
105
  };
78
106
  react_1.useEffect(function () {
79
107
  if (type === 'radio') {
80
- if (checked !== undefined) {
81
- selectIndex(checked);
108
+ if (checked === undefined) {
109
+ var checkedIndex = childrenArray.findIndex(function (child) { return child.props.checked; });
110
+ if (checkedIndex > -1) {
111
+ selectIndex(checkedIndex);
112
+ }
82
113
  }
83
- var checkedIndex = childrenArray.findIndex(function (child) { return child.props.checked; });
84
- if (checkedIndex > -1) {
85
- selectIndex(checkedIndex);
114
+ else {
115
+ selectIndex(checked);
86
116
  }
87
117
  }
88
118
  else if (type === 'checkbox') {
89
- setCheckedIndexes(childrenArray.map(function (child) { return child.props.checked; }));
119
+ setCheckedIndexes(childrenArray.map(function (child) { return Boolean(child.props.checked); }));
90
120
  }
91
121
  }, []);
92
- var prevCheckedIndexes = usePrevious_1.usePrevious(checkedIndexes);
93
- react_1.useEffect(function () {
94
- if (type === 'radio') {
95
- var checkedIndex = checkedIndexes.findIndex(Boolean);
96
- if (checkedIndex > -1) {
97
- onChange(checkedIndex, true);
98
- onSelect(checkedIndex, true);
99
- }
122
+ var handleChange = function (e, index, newValues) {
123
+ switch (type) {
124
+ case 'radio':
125
+ case 'checkbox':
126
+ return onChange(e, checkboxEventProps(index, newValues));
127
+ default:
128
+ return onSelect(e, eventProps(index, newValues));
100
129
  }
101
- else if (type === 'checkbox') {
102
- if (prevCheckedIndexes) {
103
- var index = changedIndex(prevCheckedIndexes, checkedIndexes);
104
- onChange(index, checkedIndexes[index]);
105
- onSelect(index, checkedIndexes[index]);
130
+ };
131
+ var handleKeyDown = function (e, index) {
132
+ var newValues;
133
+ if (event_utils_1.isActionKey(e.key)) {
134
+ newValues = selectIndex(index);
135
+ if (newValues) {
136
+ handleChange(e, index, newValues);
106
137
  }
107
138
  }
108
- }, [checkedIndexes]);
139
+ switch (type) {
140
+ case 'radio':
141
+ case 'checkbox':
142
+ return onKeyDown(e, checkboxEventProps(index, newValues || checkedIndexes));
143
+ default:
144
+ return onKeyDown(e, eventProps(index, newValues || checkedIndexes));
145
+ }
146
+ };
147
+ var handleClick = function (e, index) {
148
+ setFocusedIndex(index);
149
+ var newValues = selectIndex(index);
150
+ if (newValues) {
151
+ handleChange(e, index, newValues);
152
+ }
153
+ };
109
154
  return (react_1.default.createElement(Container, __assign({}, rest, { className: classnames_1.default(className, 'menu') }),
110
- react_1.default.createElement("div", { className: "menu__items", role: "menu" }, childrenArray.map(function (child, i) {
111
- var _a = child.props, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.onFocus, onFocus = _c === void 0 ? function () { } : _c, itemRest = __rest(_a, ["onClick", "onFocus"]);
155
+ react_1.default.createElement("div", { className: "menu__items", role: "menu", ref: forwardedRef }, childrenArray.map(function (child, i) {
156
+ var _a = child.props, _b = _a.onClick, onItemClick = _b === void 0 ? function () { } : _b, _c = _a.onFocus, onItemFocus = _c === void 0 ? function () { } : _c, _d = _a.onKeyDown, onItemKeyDown = _d === void 0 ? function () { } : _d, itemRest = __rest(_a, ["onClick", "onFocus", "onKeyDown"]);
112
157
  return react_1.cloneElement(child, __assign(__assign({}, itemRest), { type: type, focused: i === focusedIndex, tabIndex: focusedIndex === undefined ? 0 : -1, checked: checkedIndexes[i], onFocus: function (e) {
113
158
  setFocusedIndex(i);
114
- onFocus(e);
159
+ onItemFocus(e);
115
160
  }, onClick: function (e) {
116
- setFocusedIndex(i);
117
- selectIndex(i);
161
+ handleClick(e, i);
162
+ onItemClick(e);
118
163
  onClick(e);
119
164
  }, onKeyDown: function (e) {
120
- event_utils_1.handleActionKeydown(e, function () {
121
- selectIndex(i);
122
- });
123
- onKeyDown(i, checkedIndexes[i]);
165
+ handleKeyDown(e, i);
166
+ onItemKeyDown(e);
124
167
  } }));
125
168
  }))));
126
169
  };
127
- exports.default = EbayMenu;
170
+ exports.default = component_utils_1.withForwardRef(EbayMenu);
@@ -1,21 +1,30 @@
1
- import { ComponentProps } from 'react';
1
+ import { ComponentProps, Ref } from 'react';
2
+ import { EbayEventHandler, EbayKeyboardEventHandler } from '../common/event-utils/types';
2
3
  export declare type EbayMenuType = 'radio' | 'checkbox';
3
4
  export declare type EbayMenuPriority = 'primary' | 'secondary' | 'none';
4
5
  declare type ContainerDivProps = Omit<ComponentProps<'div'>, 'onKeyDown' | 'onChange' | 'onSelect'>;
5
6
  declare type ContainerSpanProps = Omit<ComponentProps<'span'>, 'onKeyDown' | 'onChange' | 'onSelect'>;
6
- export declare type SelectCallback = (i: number, checked: boolean) => void;
7
- export declare type ChangeCallback = (i: number, checked: boolean) => void;
8
- export declare type KeyDownCallback = (i: number, checked: boolean) => void;
9
- export declare type MenuProps = ContainerDivProps & ContainerSpanProps & {
7
+ declare type SelectProps = {
8
+ index: number;
9
+ checked: number[];
10
+ };
11
+ declare type ChangeProps = SelectProps & {
12
+ indexes: number[];
13
+ checkedValues: string[];
14
+ };
15
+ export declare type EbayMenuKeyDownEventHandler = EbayKeyboardEventHandler<HTMLElement, SelectProps | ChangeProps>;
16
+ export declare type EbayMenuChangeEventHandler = EbayEventHandler<HTMLElement, ChangeProps>;
17
+ export declare type EbayMenuSelectEventHandler = EbayEventHandler<HTMLElement, SelectProps>;
18
+ export declare type EbayMenuProps = ContainerDivProps & ContainerSpanProps & {
19
+ type?: EbayMenuType;
20
+ priority?: EbayMenuPriority;
21
+ checked?: number;
10
22
  autofocus?: boolean;
11
23
  baseEl?: 'div' | 'span';
12
- checked?: number;
13
- className?: string;
14
- priority?: EbayMenuPriority;
15
- type?: EbayMenuType;
16
- onKeyDown?: KeyDownCallback;
17
- onSelect?: SelectCallback;
18
- onChange?: ChangeCallback;
24
+ onKeyDown?: EbayMenuKeyDownEventHandler;
25
+ onChange?: EbayMenuChangeEventHandler;
26
+ onSelect?: EbayMenuSelectEventHandler;
27
+ forwardedRef?: Ref<HTMLDivElement>;
19
28
  };
20
29
  export {};
21
30
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,oBAAY,YAAY,GAAG,OAAO,GAAG,UAAU,CAAA;AAC/C,oBAAY,gBAAgB,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,CAAA;AAE/D,aAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC,CAAA;AAC3F,aAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC,CAAA;AAE7F,oBAAY,cAAc,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;AAClE,oBAAY,cAAc,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;AAClE,oBAAY,eAAe,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;AAEnE,oBAAY,SAAS,GAAG,iBAAiB,GAAG,kBAAkB,GAAG;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC7B,CAAA"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAA;AAExF,oBAAY,YAAY,GAAG,OAAO,GAAG,UAAU,CAAA;AAC/C,oBAAY,gBAAgB,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,CAAA;AAE/D,aAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC,CAAA;AAC3F,aAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC,CAAA;AAC7F,aAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,EAAE,CAAC;CACrB,CAAA;AACD,aAAK,WAAW,GAAG,WAAW,GAAG;IAC7B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,MAAM,EAAE,CAAC;CAC3B,CAAA;AACD,oBAAY,2BAA2B,GAAG,wBAAwB,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,CAAC,CAAA;AAC1G,oBAAY,0BAA0B,GAAG,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAA;AACnF,oBAAY,0BAA0B,GAAG,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAA;AACnF,oBAAY,aAAa,GAAG,iBAAiB,GAAG,kBAAkB,GAAG;IACjE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,2BAA2B,CAAC;IACxC,QAAQ,CAAC,EAAE,0BAA0B,CAAC;IACtC,QAAQ,CAAC,EAAE,0BAA0B,CAAC;IACtC,YAAY,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CACtC,CAAA"}
@@ -54,8 +54,8 @@ Name | Type | Required | Description
54
54
  `prefixLabel` | String | No |The label to add before each selected item on the button. Cannot be used with `prefix-id` (NOT YET IMPLEMENTED)
55
55
  `onExpand` | Function | No | Called when content is expanded
56
56
  `onCollapse` | Function | No | Called when content is collapsed
57
- `onSelect` | Function | No | props: ( index: number ), triggered on item clicked (not for type `radio`/`checkbox`)
58
- `onChange` | Function | No | props: (index: number, checked: number[], checkedValues: string[]), triggered on item `checked` change, (for type `radio`/`checkbox` only)
57
+ `onSelect` | Function | No | props: (e: event, { index: number }), triggered on item clicked (not for type `radio`/`checkbox`)
58
+ `onChange` | Function | No | props: (e: event, { index: number, checked: number[], checkedValues: string[]), triggered on item `checked` change, (for type `radio`/`checkbox` only)
59
59
 
60
60
  ## EbayMenuButtonItem Attributes
61
61
 
@@ -1,5 +1,5 @@
1
1
  import { ComponentProps, FC } from 'react';
2
- import { ChangeCallback, EbayMenuType, SelectCallback } from '../ebay-menu';
2
+ import { EbayMenuChangeEventHandler, EbayMenuSelectEventHandler, EbayMenuType } from '../ebay-menu';
3
3
  import { EbayButtonProps } from '../ebay-button';
4
4
  import { EbayMenuButtonVariant } from './index';
5
5
  export declare type EbayMenuButtonProps = {
@@ -12,8 +12,8 @@ export declare type EbayMenuButtonProps = {
12
12
  variant?: EbayMenuButtonVariant;
13
13
  onCollapse?: () => void;
14
14
  onExpand?: () => void;
15
- onChange?: ChangeCallback;
16
- onSelect?: SelectCallback;
15
+ onChange?: EbayMenuChangeEventHandler;
16
+ onSelect?: EbayMenuSelectEventHandler;
17
17
  expanded?: boolean;
18
18
  noToggleIcon?: boolean;
19
19
  checked?: number;
@@ -1 +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,EAAE,cAAc,EAAY,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AACrF,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAG5D,OAAO,EAAoE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEjH,oBAAY,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,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,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,aAAK,UAAU,GAAG,UAAU,GAAG,UAAU,CAAA;AACzC,aAAK,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,CA4H7B,CAAA;AAaD,eAAe,cAAc,CAAA"}
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,oBAAY,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,aAAK,UAAU,GAAG,UAAU,GAAG,UAAU,CAAA;AACzC,aAAK,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"}
@@ -61,11 +61,13 @@ var EbayMenuButton = function (_a) {
61
61
  var buttonRef = react_1.useRef(null);
62
62
  var menuRef = react_1.useRef();
63
63
  var menuItems = component_utils_1.filterByType(children, [index_1.EbayMenuButtonItem, index_1.EbayMenuButtonSeparator]);
64
+ var defaultIndexes = menuItems.map(function (item) { return Boolean(item.props.checked); });
65
+ var _l = react_1.useState(defaultIndexes), checkedIndexes = _l[0], setCheckedIndexes = _l[1];
64
66
  var menuButtonLabel = component_utils_1.findComponent(children, index_1.EbayMenuButtonLabel);
65
67
  var icon = component_utils_1.findComponent(children, ebay_icon_1.EbayIcon);
66
68
  var textLabel = text ? react_1.default.createElement("span", null, text) : null;
67
69
  var label = labelWithIcon(menuButtonLabel || textLabel, icon);
68
- var wrapperClasses = classnames_1.default('menu-button', className, expanded && 'menu-button--expanded');
70
+ var wrapperClasses = classnames_1.default('menu-button', className);
69
71
  var menuClasses = classnames_1.default('menu-button__menu', {
70
72
  'menu-button__menu--fix-width': fixWidth,
71
73
  'menu-button__menu--reverse': reverse
@@ -107,13 +109,25 @@ var EbayMenuButton = function (_a) {
107
109
  setExpanded(!expanded);
108
110
  onClick(e);
109
111
  } }, rest);
112
+ var handleOnChange = function (e, eventProps) {
113
+ if (type === 'radio' || type === 'checkbox') {
114
+ var newCheckedIndexes = checkedIndexes.map(function (_, i) { return eventProps.indexes.includes(i); });
115
+ setCheckedIndexes(newCheckedIndexes);
116
+ }
117
+ onChange(e, eventProps);
118
+ };
119
+ var checkedIndex = function () {
120
+ var index = checkedIndexes.findIndex(Boolean);
121
+ return index > -1 ? index : checked;
122
+ };
110
123
  return (react_1.default.createElement("span", { className: wrapperClasses },
111
124
  variant === 'overflow' ?
112
125
  react_1.default.createElement(ebay_icon_button_1.EbayIconButton, __assign({ icon: "overflowVertical16" }, buttonProps)) :
113
126
  react_1.default.createElement(ebay_button_1.EbayButton, __assign({ variant: variant === 'form' ? 'form' : undefined, bodyState: noToggleIcon ? undefined : 'expand' }, buttonProps), label),
114
- react_1.default.createElement(ebay_menu_1.EbayMenu, { baseEl: "div", ref: menuRef, type: type, className: menuClasses, tabIndex: -1, id: menuId, autofocus: true, checked: checked, onKeyDown: handleMenuKeydown, onChange: onChange, onSelect: onSelect }, menuItems.map(function (item, i) {
115
- return react_1.cloneElement(item, __assign(__assign({}, item.props), { className: classnames_1.default(item.props.className, 'menu-button__item'), key: i }));
116
- }))));
127
+ expanded &&
128
+ react_1.default.createElement(ebay_menu_1.EbayMenu, { baseEl: "div", ref: menuRef, type: type, className: menuClasses, tabIndex: -1, id: menuId, autofocus: true, checked: checkedIndex(), onKeyDown: handleMenuKeydown, onChange: handleOnChange, onSelect: onSelect }, menuItems.map(function (item, i) {
129
+ return react_1.cloneElement(item, __assign(__assign({}, item.props), { className: classnames_1.default(item.props.className, 'menu-button__item'), key: i, checked: checkedIndexes[i] }));
130
+ }))));
117
131
  };
118
132
  function labelWithIcon(label, icon) {
119
133
  if (!icon) {
@@ -48,6 +48,10 @@ import "@ebay/skin/page-notice";
48
48
  | `aria-label` | String | No | The description of the notice itself for screen readers. Check out [this issue](https://github.com/eBay/skin/issues/1001) for more context. | - |
49
49
  | `children` | React Node | No | The content to be displayed within the notice | - |
50
50
  | `a11yDismissText` | String | No | Determines if the notice will have a dismiss button. Acts as the aria-label for the dismiss button. Should not be used with a footer. | - |
51
- | `onDismissed` | Dispatch<boolean> | No | Handler for any extra functionality for after a notice is dismissed. | - |
51
+
52
+ ## Callbacks
53
+ | Name | Required | Description | Arguments |
54
+ |------|----------------------|-------------------|-----------|
55
+ | `onDismiss` | No | Triggered on notice dismiss | (Event) |
52
56
 
53
57
  Note: When using multiple PageNotice components with an aria-label, make sure to set a unique `id` attribute for each one or you'll run into accessibility issues.
@@ -1,4 +1,4 @@
1
- export { default as EbayPageNotice } from './page-notice';
1
+ export { default as EbayPageNotice, PageNoticeStatus, Props as EbayPageNoticeProps } from './page-notice';
2
2
  export { default as EbayPageNoticeTitle } from './page-notice-title';
3
3
  export { default as EbayPageNoticeFooter } from './page-notice-footer';
4
4
  export { default as EbayPageNoticeCTA } from './page-notice-cta';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-page-notice/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-page-notice/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,gBAAgB,EAAE,KAAK,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAA;AACzG,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA"}
@@ -1,9 +1,10 @@
1
- import React, { Dispatch, FC, MouseEvent } from 'react';
2
- declare type Props = React.HTMLProps<HTMLElement> & {
3
- status?: 'general' | 'attention' | 'confirmation' | 'information';
1
+ import { ComponentProps, FC, KeyboardEventHandler, MouseEventHandler } from 'react';
2
+ export declare type PageNoticeStatus = 'general' | 'attention' | 'confirmation' | 'information';
3
+ export declare type Props = ComponentProps<'section'> & {
4
+ status?: PageNoticeStatus;
4
5
  'aria-label'?: string;
5
6
  a11yDismissText?: string;
6
- onDismiss?: Dispatch<MouseEvent>;
7
+ onDismiss?: MouseEventHandler & KeyboardEventHandler;
7
8
  };
8
9
  declare const EbayPageNotice: FC<Props>;
9
10
  export default EbayPageNotice;
@@ -1 +1 @@
1
- {"version":3,"file":"page-notice.d.ts","sourceRoot":"","sources":["../../src/ebay-page-notice/page-notice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAA0B,MAAM,OAAO,CAAA;AAK/E,aAAK,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG;IACxC,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAA;CACnC,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CAqD7B,CAAA;AAED,eAAe,cAAc,CAAA"}
1
+ {"version":3,"file":"page-notice.d.ts","sourceRoot":"","sources":["../../src/ebay-page-notice/page-notice.tsx"],"names":[],"mappings":"AAAA,OAAc,EACV,cAAc,EACd,EAAE,EAEF,oBAAoB,EAEpB,iBAAiB,EAGpB,MAAM,OAAO,CAAA;AAMd,oBAAY,gBAAgB,GAAG,SAAS,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAA;AACvF,oBAAY,KAAK,GAAG,cAAc,CAAC,SAAS,CAAC,GAAG;IAC5C,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,iBAAiB,GAAG,oBAAoB,CAAC;CACxD,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CAmD7B,CAAA;AAED,eAAe,cAAc,CAAA"}
@@ -48,27 +48,26 @@ var react_1 = __importStar(require("react"));
48
48
  var notice_content_1 = __importDefault(require("../common/notice-utils/notice-content"));
49
49
  var ebay_notice_content_1 = require("../ebay-notice-base/components/ebay-notice-content");
50
50
  var ebay_icon_1 = require("../ebay-icon");
51
+ var index_1 = require("./index");
51
52
  var EbayPageNotice = function (_a) {
52
- var id = _a.id, _b = _a.status, status = _b === void 0 ? 'general' : _b, children = _a.children, onDismiss = _a.onDismiss, a11yDismissText = _a.a11yDismissText, ariaLabel = _a["aria-label"], rest = __rest(_a, ["id", "status", "children", "onDismiss", "a11yDismissText", 'aria-label']);
53
- var _c = react_1.useState(false), dismissed = _c[0], setDismissed = _c[1];
53
+ var id = _a.id, _b = _a.status, status = _b === void 0 ? 'general' : _b, children = _a.children, a11yDismissText = _a.a11yDismissText, ariaLabel = _a["aria-label"], _c = _a.onDismiss, onDismiss = _c === void 0 ? function () { } : _c, rest = __rest(_a, ["id", "status", "children", "a11yDismissText", 'aria-label', "onDismiss"]);
54
+ var _d = react_1.useState(false), dismissed = _d[0], setDismissed = _d[1];
54
55
  var childrenArray = react_1.default.Children.toArray(children);
55
56
  var content = childrenArray.find(function (child) { return child.type === ebay_notice_content_1.EbayNoticeContent; });
56
57
  if (!content) {
57
58
  throw new Error("EbayPageNotice: Please use a EbayNoticeContent that defines the content of the notice");
58
59
  }
59
- var handleDismissedClicked = function (event) {
60
+ var handleDismissed = function (event) {
60
61
  setDismissed(true);
61
- if (onDismiss) {
62
- onDismiss(event);
63
- }
62
+ onDismiss(event);
64
63
  };
65
64
  return dismissed ? null : (react_1.default.createElement("section", __assign({}, rest, { "aria-labelledby": id || status + "-status", className: "page-notice " + (status !== "general" ? "page-notice--" + status : ""), role: "region" }),
66
65
  status !== "general" ? (react_1.default.createElement("div", { className: "page-notice__header", id: id || status + "-status" },
67
66
  react_1.default.createElement(ebay_icon_1.EbayIcon, { name: status + "Filled16", a11yText: ariaLabel, a11yVariant: "label" }))) : null,
68
67
  react_1.default.createElement(notice_content_1.default, __assign({}, content.props, { type: "page" })),
69
68
  children,
70
- a11yDismissText && (react_1.default.createElement("div", { className: "page-notice__footer" },
71
- react_1.default.createElement("button", { "aria-label": a11yDismissText, className: "fake-link page-notice__dismiss", onClick: handleDismissedClicked },
69
+ a11yDismissText && (react_1.default.createElement(index_1.EbayPageNoticeFooter, null,
70
+ react_1.default.createElement("button", { "aria-label": a11yDismissText, className: "fake-link page-notice__dismiss", onClick: handleDismissed },
72
71
  react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "close16" }))))));
73
72
  };
74
73
  exports.default = EbayPageNotice;
@@ -44,11 +44,11 @@ Name | Type | Stateful | Description
44
44
 
45
45
  ### EbayPagination Events
46
46
 
47
- Event | Data | Description
48
- --- | --- | ---
49
- `onPrevious` | `{ originalEvent }`| clicked previous arrow button
50
- `onNext` | `{ originalEvent }` | clicked next arrow button
51
- `onSelect` | `{ originalEvent, value, index }` | page selected clicked
47
+ | Event | Data | Description |
48
+ |--------------|-----------------------------|-------------------------------|
49
+ | `onPrevious` | `(Event)` | clicked previous arrow button |
50
+ | `onNext` | `(Event)` | clicked next arrow button |
51
+ | `onSelect` | `(Event, { value, index })` | page selected clicked |
52
52
 
53
53
  ## EbayPaginationItem Tag
54
54
 
@@ -1,4 +1,5 @@
1
- import React, { Key, ReactNode, RefObject, StyleHTMLAttributes, MouseEvent, ComponentProps } from 'react';
1
+ import React, { Key, ReactNode, RefObject, StyleHTMLAttributes, ComponentProps } from 'react';
2
+ import { EbayEventHandler } from '../common/event-utils/types';
2
3
  export declare type PaginationItemType = 'previous' | 'next' | 'page' | 'separator';
3
4
  declare type HtmlProps = Omit<ComponentProps<'button'>, 'type'> & ComponentProps<'a'> & ComponentProps<'li'>;
4
5
  export declare type PaginationItemProps = HtmlProps & {
@@ -11,9 +12,12 @@ export declare type PaginationItemProps = HtmlProps & {
11
12
  hide?: boolean;
12
13
  a11yPreviousText?: string;
13
14
  a11yNextText?: string;
14
- onSelect?: (e: MouseEvent | KeyboardEvent, value: string, index: number) => void;
15
- onNext?: (e: MouseEvent | KeyboardEvent) => void;
16
- onPrevious?: (e: MouseEvent | KeyboardEvent) => void;
15
+ onPrevious?: EbayEventHandler;
16
+ onNext?: EbayEventHandler;
17
+ onSelect?: EbayEventHandler<{
18
+ value: string;
19
+ index: number;
20
+ }>;
17
21
  style?: StyleHTMLAttributes<HTMLButtonElement & HTMLAnchorElement>;
18
22
  forwardedRef?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
19
23
  children?: ReactNode;
@@ -1 +1 @@
1
- {"version":3,"file":"pagination-item.d.ts","sourceRoot":"","sources":["../../src/ebay-pagination/pagination-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,mBAAmB,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAK7G,oBAAY,kBAAkB,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,CAAA;AAC3E,aAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC,IAAI,CAAC,CAAA;AACpG,oBAAY,mBAAmB,GAAG,SAAS,GAAG;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,mBAAmB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACnE,YAAY,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IAChE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;;AAqGF,wBAAiD"}
1
+ {"version":3,"file":"pagination-item.d.ts","sourceRoot":"","sources":["../../src/ebay-pagination/pagination-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAIjG,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAE9D,oBAAY,kBAAkB,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,CAAA;AAC3E,aAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC,IAAI,CAAC,CAAA;AACpG,oBAAY,mBAAmB,GAAG,SAAS,GAAG;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9D,KAAK,CAAC,EAAE,mBAAmB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACnE,YAAY,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IAChE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;;AAqGF,wBAAiD"}
@@ -32,7 +32,8 @@ var classnames_1 = __importDefault(require("classnames"));
32
32
  var EbayPaginationItem = function (_a) {
33
33
  var _b = _a.pageIndex, pageIndex = _b === void 0 ? 0 : _b, key = _a.key, current = _a.current, disabled = _a.disabled, _c = _a.type, type = _c === void 0 ? 'page' : _c, href = _a.href, hide = _a.hide, children = _a.children, _d = _a.a11yPreviousText, a11yPreviousText = _d === void 0 ? 'Previous page' : _d, _e = _a.a11yNextText, a11yNextText = _e === void 0 ? 'Next page' : _e, onSelect = _a.onSelect, onNext = _a.onNext, onPrevious = _a.onPrevious, className = _a.className, style = _a.style, forwardedRef = _a.forwardedRef, rest = __rest(_a, ["pageIndex", "key", "current", "disabled", "type", "href", "hide", "children", "a11yPreviousText", "a11yNextText", "onSelect", "onNext", "onPrevious", "className", "style", "forwardedRef"]);
34
34
  var handlePageNumber = function (e) {
35
- onSelect(e, e.currentTarget.innerText, pageIndex);
35
+ var _a;
36
+ onSelect(e, { value: ((_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.innerText) || '', index: pageIndex });
36
37
  };
37
38
  var handleNextPage = function (e) {
38
39
  if (!e.currentTarget.getAttribute('aria-disabled')) {
@@ -1,14 +1,17 @@
1
1
  import { ComponentProps, FC } from 'react';
2
2
  import { PaginationVariant } from './types';
3
- declare type PaginationCallback = (e?: Event, value?: string) => void;
4
- declare type PaginationProps = Omit<ComponentProps<'nav'>, 'onSelect'> & {
3
+ import { EbayEventHandler } from '../common/event-utils/types';
4
+ export declare type PaginationProps = Omit<ComponentProps<'nav'>, 'onSelect'> & {
5
5
  id?: string;
6
6
  a11yPreviousText?: string;
7
7
  a11yNextText?: string;
8
8
  a11yCurrentText?: string;
9
- onPrevious?: PaginationCallback;
10
- onNext?: PaginationCallback;
11
- onSelect?: (e?: Event, value?: string, index?: number) => void;
9
+ onPrevious?: EbayEventHandler;
10
+ onNext?: EbayEventHandler;
11
+ onSelect?: EbayEventHandler<{
12
+ value: string;
13
+ index: number;
14
+ }>;
12
15
  variant?: PaginationVariant;
13
16
  fluid?: boolean;
14
17
  };
@@ -1 +1 @@
1
- {"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/ebay-pagination/pagination.tsx"],"names":[],"mappings":"AAAA,OAAc,EACA,cAAc,EAAE,EAAE,EAE/B,MAAM,OAAO,CAAA;AAUd,OAAO,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAGtD,aAAK,kBAAkB,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;AAC9D,aAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/D,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,eAAe,CAiKvC,CAAA;AAED,eAAe,cAAc,CAAA"}
1
+ {"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/ebay-pagination/pagination.tsx"],"names":[],"mappings":"AAAA,OAAc,EACA,cAAc,EAAE,EAAE,EAG/B,MAAM,OAAO,CAAA;AAUd,OAAO,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAE9D,oBAAY,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACpE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9D,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,eAAe,CAiKvC,CAAA;AAED,eAAe,cAAc,CAAA"}
@@ -127,7 +127,7 @@ var EbayPagination = function (_a) {
127
127
  event.preventDefault();
128
128
  }
129
129
  var currentTarget = event.currentTarget;
130
- onSelect(event, currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.innerText, pageIndex);
130
+ onSelect(event, { value: (currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.innerText) || '', index: pageIndex });
131
131
  updatePages(Number(currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.innerText));
132
132
  } }, text));
133
133
  if (firstDot === lastDot) {
@@ -5,7 +5,6 @@ export interface Props<T = any> extends DialogBaseProps<T> {
5
5
  open?: boolean;
6
6
  animated?: boolean;
7
7
  position?: Position;
8
- onOpen?: () => void;
9
8
  onClose?: () => void;
10
9
  }
11
10
  declare const EbayPanelDialog: FC<Props>;
@@ -1 +1 @@
1
- {"version":3,"file":"panel-dialog.d.ts","sourceRoot":"","sources":["../../src/ebay-panel-dialog/panel-dialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,eAAe,EAAuB,MAAM,qBAAqB,CAAA;AAI1E,aAAK,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAA;AAE/B,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CAuB9B,CAAA;AAED,eAAe,eAAe,CAAA"}
1
+ {"version":3,"file":"panel-dialog.d.ts","sourceRoot":"","sources":["../../src/ebay-panel-dialog/panel-dialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,eAAe,EAAuB,MAAM,qBAAqB,CAAA;AAI1E,aAAK,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAA;AAE/B,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CAsB9B,CAAA;AAED,eAAe,eAAe,CAAA"}
@@ -31,7 +31,7 @@ var ebay_dialog_base_1 = require("../ebay-dialog-base");
31
31
  var classPrefix = 'panel-dialog';
32
32
  var EbayPanelDialog = function (_a) {
33
33
  var _b, _c;
34
- var open = _a.open, animated = _a.animated, _d = _a.position, position = _d === void 0 ? 'start' : _d, _e = _a.onClose, onClose = _e === void 0 ? function () { } : _e, _f = _a.onOpen, onOpen = _f === void 0 ? function () { } : _f, className = _a.className, rest = __rest(_a, ["open", "animated", "position", "onClose", "onOpen", "className"]);
34
+ var open = _a.open, animated = _a.animated, _d = _a.position, position = _d === void 0 ? 'start' : _d, _e = _a.onClose, onClose = _e === void 0 ? function () { } : _e, className = _a.className, rest = __rest(_a, ["open", "animated", "position", "onClose", "className"]);
35
35
  return (react_1.default.createElement(ebay_dialog_base_1.DialogBaseWithState, __assign({}, rest, { "aria-label": "Infotip", classPrefix: classPrefix, buttonPosition: "right", onCloseBtnClick: onClose, onBackgroundClick: onClose, animated: animated, className: classnames_1.default(className, (_b = {}, _b[classPrefix + "--mask-fade-slow"] = animated, _b)), windowClass: classnames_1.default(classPrefix + "__window--slide", (_c = {},
36
36
  _c[classPrefix + "__window--end"] = position === 'end',
37
37
  _c)), open: open })));
@@ -46,7 +46,12 @@ Name | Type | Description
46
46
  `checked` | boolean | Set the radio button state to checked/unchecked. Use this for **controlled component**.
47
47
  `defaultChecked` | boolean | Set the radio button initial state to checked/unchecked. Use this for **uncontrolled component**.
48
48
  `size` | String | No | No | Either `large` or `regular` (default). Sets the radio icon size. For mweb this should be set to `large`. (Note: The dimensions of the radio will not change, but only the icon)
49
- `onChange` | Function | Callback fired when selected is changed, with param `{ originalEvent, value }`
50
- `onFocus` | Function | Callback fired when button is focused, with param `{ originalEvent, value }`
49
+
50
+ ## Callbacks
51
+ Name | Data | Description
52
+ --- | --- | --- | ---
53
+ `onChange` | `(ChangeEvent, { value })` | Callback fired when selected radio button is changed
54
+ `onFocus` | `(FocusEvent, { value })` | Callback fired when radio button is focused
55
+ `onKeydown` | `(KeyboardEvent, { value })` | Callback fired when key is down
51
56
 
52
57
  Note: For this component, `className`/`style` are applied to the container, while all other HTML attributes are applied to the input.
@@ -1,10 +1,19 @@
1
- import { ChangeEvent, ComponentProps, FC } from 'react';
1
+ import { ComponentProps, FC } from 'react';
2
+ import { EbayChangeEventHandler, EbayFocusEventHandler, EbayKeyboardEventHandler } from '../common/event-utils/types';
2
3
  declare type Size = 'default' | 'large';
3
4
  declare type EbayRadioProps = {
4
5
  size?: Size;
5
- onChange?: (event: ChangeEvent<HTMLInputElement>, value: string | number) => void;
6
+ onChange?: EbayChangeEventHandler<HTMLInputElement, {
7
+ value: string | number;
8
+ }>;
9
+ onFocus?: EbayFocusEventHandler<HTMLInputElement, {
10
+ value: string | number;
11
+ }>;
12
+ onKeyDown?: EbayKeyboardEventHandler<HTMLInputElement, {
13
+ value: string | number;
14
+ }>;
6
15
  };
7
- declare type InputProps = Omit<ComponentProps<'input'>, 'size'>;
16
+ declare type InputProps = Omit<ComponentProps<'input'>, 'size' | 'onChange' | 'onFocus' | 'onKeyDown'>;
8
17
  declare const EbayRadio: FC<InputProps & EbayRadioProps>;
9
18
  export default EbayRadio;
10
19
  //# sourceMappingURL=radio.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/ebay-radio/radio.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAA0B,cAAc,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAA;AAKpG,aAAK,IAAI,GAAG,SAAS,GAAG,OAAO,CAAA;AAE/B,aAAK,cAAc,GAAG;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CACrF,CAAA;AACD,aAAK,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAA;AAEvD,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,UAAU,GAAG,cAAc,CAoD9C,CAAA;AAED,eAAe,SAAS,CAAA"}
1
+ {"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/ebay-radio/radio.tsx"],"names":[],"mappings":"AAAA,OAAc,EAGV,cAAc,EAAE,EAAE,EACrB,MAAM,OAAO,CAAA;AAId,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAA;AAErH,aAAK,IAAI,GAAG,SAAS,GAAG,OAAO,CAAA;AAE/B,aAAK,cAAc,GAAG;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,sBAAsB,CAAC,gBAAgB,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC,CAAC;IAChF,OAAO,CAAC,EAAE,qBAAqB,CAAC,gBAAgB,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9E,SAAS,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC,CAAC;CACtF,CAAA;AACD,aAAK,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC,CAAA;AAE9F,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,UAAU,GAAG,cAAc,CA8D9C,CAAA;AAED,eAAe,SAAS,CAAA"}