@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.
- package/common/event-utils/index.d.ts +10 -7
- package/common/event-utils/index.d.ts.map +1 -1
- package/common/event-utils/index.js +11 -3
- package/common/event-utils/types.d.ts +7 -0
- package/common/event-utils/types.d.ts.map +1 -1
- package/common/event-utils/types.js +12 -0
- package/common/floating-label-utils/hooks.d.ts +2 -1
- package/common/floating-label-utils/hooks.d.ts.map +1 -1
- package/common/floating-label-utils/hooks.js +5 -4
- package/ebay-alert-dialog/README.md +3 -2
- package/ebay-alert-dialog/alert-dialog.d.ts +0 -1
- package/ebay-alert-dialog/alert-dialog.d.ts.map +1 -1
- package/ebay-alert-dialog/alert-dialog.js +1 -1
- package/ebay-breadcrumbs/README.md +1 -1
- package/ebay-breadcrumbs/breadcrumbs.d.ts +3 -2
- package/ebay-breadcrumbs/breadcrumbs.d.ts.map +1 -1
- package/ebay-breadcrumbs/breadcrumbs.js +1 -1
- package/ebay-button/README.md +4 -4
- package/ebay-carousel/carousel.js +1 -1
- package/ebay-checkbox/README.md +11 -10
- package/ebay-checkbox/checkbox.d.ts +15 -3
- package/ebay-checkbox/checkbox.d.ts.map +1 -1
- package/ebay-checkbox/checkbox.js +9 -4
- package/ebay-confirm-dialog/README.md +6 -6
- package/ebay-confirm-dialog/confirm-dialog.d.ts +0 -1
- package/ebay-confirm-dialog/confirm-dialog.d.ts.map +1 -1
- package/ebay-confirm-dialog/confirm-dialog.js +1 -1
- package/ebay-dialog-base/components/dialogBase.d.ts +3 -2
- package/ebay-dialog-base/components/dialogBase.d.ts.map +1 -1
- package/ebay-dialog-base/components/dialogBase.js +6 -3
- package/ebay-drawer-dialog/README.md +7 -6
- package/ebay-drawer-dialog/components/drawer.d.ts +3 -0
- package/ebay-drawer-dialog/components/drawer.d.ts.map +1 -1
- package/ebay-fake-menu/README.md +5 -5
- package/ebay-fake-menu/menu-item.d.ts +1 -1
- package/ebay-fake-menu/menu-item.d.ts.map +1 -1
- package/ebay-fake-menu/menu.d.ts +9 -5
- package/ebay-fake-menu/menu.d.ts.map +1 -1
- package/ebay-fake-menu/menu.js +2 -2
- package/ebay-fake-menu-button/README.md +9 -4
- package/ebay-fake-menu-button/menu-button.d.ts +9 -2
- package/ebay-fake-menu-button/menu-button.d.ts.map +1 -1
- package/ebay-fake-menu-button/menu-button.js +7 -5
- package/ebay-fullscreen-dialog/fullscreen-dialog.d.ts +0 -1
- package/ebay-fullscreen-dialog/fullscreen-dialog.d.ts.map +1 -1
- package/ebay-fullscreen-dialog/fullscreen-dialog.js +1 -1
- package/ebay-icon-button/README.md +9 -0
- package/ebay-icon-button/icon-button.d.ts +3 -1
- package/ebay-icon-button/icon-button.d.ts.map +1 -1
- package/ebay-icon-button/icon-button.js +8 -2
- package/ebay-lightbox-dialog/lightbox-dialog.d.ts +0 -1
- package/ebay-lightbox-dialog/lightbox-dialog.d.ts.map +1 -1
- package/ebay-lightbox-dialog/lightbox-dialog.js +1 -1
- package/ebay-listbox-button/README.md +8 -1
- package/ebay-listbox-button/listbox-button.d.ts +11 -3
- package/ebay-listbox-button/listbox-button.d.ts.map +1 -1
- package/ebay-listbox-button/listbox-button.js +41 -16
- package/ebay-menu/README.md +5 -4
- package/ebay-menu/menu-item.d.ts +1 -1
- package/ebay-menu/menu-item.d.ts.map +1 -1
- package/ebay-menu/menu.d.ts +4 -4
- package/ebay-menu/menu.d.ts.map +1 -1
- package/ebay-menu/menu.js +85 -42
- package/ebay-menu/types.d.ts +21 -12
- package/ebay-menu/types.d.ts.map +1 -1
- package/ebay-menu-button/README.md +2 -2
- package/ebay-menu-button/menu-button.d.ts +3 -3
- package/ebay-menu-button/menu-button.d.ts.map +1 -1
- package/ebay-menu-button/menu-button.js +18 -4
- package/ebay-page-notice/README.md +5 -1
- package/ebay-page-notice/index.d.ts +1 -1
- package/ebay-page-notice/index.d.ts.map +1 -1
- package/ebay-page-notice/page-notice.d.ts +5 -4
- package/ebay-page-notice/page-notice.d.ts.map +1 -1
- package/ebay-page-notice/page-notice.js +7 -8
- package/ebay-pagination/README.md +5 -5
- package/ebay-pagination/pagination-item.d.ts +8 -4
- package/ebay-pagination/pagination-item.d.ts.map +1 -1
- package/ebay-pagination/pagination-item.js +2 -1
- package/ebay-pagination/pagination.d.ts +8 -5
- package/ebay-pagination/pagination.d.ts.map +1 -1
- package/ebay-pagination/pagination.js +1 -1
- package/ebay-panel-dialog/panel-dialog.d.ts +0 -1
- package/ebay-panel-dialog/panel-dialog.d.ts.map +1 -1
- package/ebay-panel-dialog/panel-dialog.js +1 -1
- package/ebay-radio/README.md +7 -2
- package/ebay-radio/radio.d.ts +12 -3
- package/ebay-radio/radio.d.ts.map +1 -1
- package/ebay-radio/radio.js +7 -5
- package/ebay-section-notice/README.md +5 -0
- package/ebay-section-notice/index.d.ts +1 -1
- package/ebay-section-notice/index.d.ts.map +1 -1
- package/ebay-section-notice/section-notice.d.ts +6 -3
- package/ebay-section-notice/section-notice.d.ts.map +1 -1
- package/ebay-section-notice/section-notice.js +32 -4
- package/ebay-select/README.md +3 -1
- package/ebay-select/ebay-select.d.ts +7 -2
- package/ebay-select/ebay-select.d.ts.map +1 -1
- package/ebay-select/ebay-select.js +1 -1
- package/ebay-select/index.d.ts +1 -1
- package/ebay-select/index.d.ts.map +1 -1
- package/ebay-split-button/README.md +2 -2
- package/ebay-split-button/split-button.js +1 -1
- package/ebay-split-button/types.d.ts +2 -3
- package/ebay-split-button/types.d.ts.map +1 -1
- package/ebay-star-rating-select/README.md +8 -0
- package/ebay-star-rating-select/star-rating-select.d.ts +8 -4
- package/ebay-star-rating-select/star-rating-select.d.ts.map +1 -1
- package/ebay-star-rating-select/star-rating-select.js +8 -8
- package/ebay-switch/README.md +5 -1
- package/ebay-switch/ebay-switch.d.ts +7 -3
- package/ebay-switch/ebay-switch.d.ts.map +1 -1
- package/ebay-switch/ebay-switch.js +6 -3
- package/ebay-tabs/README.md +6 -10
- package/ebay-tabs/tab-panel.d.ts +0 -1
- package/ebay-tabs/tab-panel.d.ts.map +1 -1
- package/ebay-tabs/tab-panel.js +2 -2
- package/ebay-tabs/tab.d.ts +1 -7
- package/ebay-tabs/tab.d.ts.map +1 -1
- package/ebay-tabs/tab.js +2 -7
- package/ebay-tabs/tabs.d.ts +7 -1
- package/ebay-tabs/tabs.d.ts.map +1 -1
- package/ebay-tabs/tabs.js +12 -19
- package/ebay-textbox/README.md +16 -9
- package/ebay-textbox/postfix-icon.d.ts.map +1 -1
- package/ebay-textbox/postfix-icon.js +25 -3
- package/ebay-textbox/prefix-icon.d.ts.map +1 -1
- package/ebay-textbox/prefix-icon.js +24 -2
- package/ebay-textbox/textbox.d.ts +17 -7
- package/ebay-textbox/textbox.d.ts.map +1 -1
- package/ebay-textbox/textbox.js +47 -14
- package/ebay-textbox/types.d.ts +2 -2
- package/ebay-textbox/types.d.ts.map +1 -1
- package/ebay-video/README.md +7 -5
- package/ebay-video/controls.d.ts.map +1 -1
- package/ebay-video/controls.js +10 -4
- package/ebay-video/reportButton.d.ts +1 -5
- package/ebay-video/reportButton.d.ts.map +1 -1
- package/ebay-video/reportButton.js +3 -3
- package/ebay-video/video.d.ts +13 -10
- package/ebay-video/video.d.ts.map +1 -1
- package/ebay-video/video.js +4 -1
- 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.
|
|
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
|
|
58
|
-
var
|
|
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
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
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
|
|
81
|
-
|
|
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
|
-
|
|
84
|
-
|
|
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
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
onSelect(
|
|
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
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
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
|
-
|
|
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,
|
|
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
|
-
|
|
159
|
+
onItemFocus(e);
|
|
115
160
|
}, onClick: function (e) {
|
|
116
|
-
|
|
117
|
-
|
|
161
|
+
handleClick(e, i);
|
|
162
|
+
onItemClick(e);
|
|
118
163
|
onClick(e);
|
|
119
164
|
}, onKeyDown: function (e) {
|
|
120
|
-
|
|
121
|
-
|
|
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);
|
package/ebay-menu/types.d.ts
CHANGED
|
@@ -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
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
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
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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
|
package/ebay-menu/types.d.ts.map
CHANGED
|
@@ -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;
|
|
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 {
|
|
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?:
|
|
16
|
-
onSelect?:
|
|
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,
|
|
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
|
|
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
|
-
|
|
115
|
-
|
|
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
|
-
|
|
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;
|
|
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
|
|
2
|
-
declare type
|
|
3
|
-
|
|
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?:
|
|
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,
|
|
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,
|
|
53
|
-
var
|
|
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
|
|
60
|
+
var handleDismissed = function (event) {
|
|
60
61
|
setDismissed(true);
|
|
61
|
-
|
|
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(
|
|
71
|
-
react_1.default.createElement("button", { "aria-label": a11yDismissText, className: "fake-link page-notice__dismiss", onClick:
|
|
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
|
|
48
|
-
|
|
49
|
-
`onPrevious` | `
|
|
50
|
-
`onNext`
|
|
51
|
-
`onSelect`
|
|
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,
|
|
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
|
-
|
|
15
|
-
onNext?:
|
|
16
|
-
|
|
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,
|
|
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
|
-
|
|
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
|
-
|
|
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?:
|
|
10
|
-
onNext?:
|
|
11
|
-
onSelect?:
|
|
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,
|
|
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) {
|
|
@@ -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,
|
|
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,
|
|
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 })));
|
package/ebay-radio/README.md
CHANGED
|
@@ -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
|
-
|
|
50
|
-
|
|
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.
|
package/ebay-radio/radio.d.ts
CHANGED
|
@@ -1,10 +1,19 @@
|
|
|
1
|
-
import {
|
|
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?:
|
|
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,
|
|
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"}
|