@ebay/ui-core-react 5.3.0 → 5.4.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.
|
@@ -25,21 +25,24 @@ yarn add @ebay/ui-core-react
|
|
|
25
25
|
|
|
26
26
|
## Attributes
|
|
27
27
|
|
|
28
|
-
Name
|
|
29
|
-
|
|
30
|
-
`value`
|
|
31
|
-
`
|
|
32
|
-
`aria-
|
|
33
|
-
`
|
|
34
|
-
`
|
|
35
|
-
`
|
|
36
|
-
`
|
|
37
|
-
`
|
|
28
|
+
| Name | Type | Required | Description |
|
|
29
|
+
|------------------|---------|----------|---------------------------------------------------------------------------------------------------------|
|
|
30
|
+
| `value` | string | No | Allows you to set the selected option to the one with `value` |
|
|
31
|
+
| `selected` | number | No | Allows you to set the selected index option to `selected` |
|
|
32
|
+
| `aria-disabled` | boolean | No | Set to true if the field is disabled |
|
|
33
|
+
| `aria-invalid` | boolean | No | Set to true if the field is invalid |
|
|
34
|
+
| `fluid` | boolean | No | To make the listbox fluid |
|
|
35
|
+
| `borderless` | boolean | No | To make the listbox borderless |
|
|
36
|
+
| `maxHeight` | string | No | example: 100px, 200px, 10rem |
|
|
37
|
+
| `prefixId` | string | No | The id of an external element to use as the a11y prefix label for the listbox button. |
|
|
38
|
+
| `prefixLabel` | string | No | The label to add before selected option on the button. Cannot be used with `prefixId` |
|
|
39
|
+
| `floatingLabel` | string | No | Indicates that the listbox is a floating label type and renders it with a label |
|
|
40
|
+
| `unselectedText` | string | No | The text to be shown when no options are selected. Default is '-'. Cannot be used with `floating-label` |
|
|
38
41
|
|
|
39
42
|
## Callbacks
|
|
40
43
|
|
|
41
|
-
| Name
|
|
42
|
-
|
|
43
|
-
| `onChange`
|
|
44
|
-
| `onCollapse` | Function | No | triggered on collapse | `()`
|
|
45
|
-
| `onExpand`
|
|
44
|
+
| Name | Type | Required | Description | Data |
|
|
45
|
+
|--------------|----------|----------|-----------------------|------------------------------------------------------------------------------|
|
|
46
|
+
| `onChange` | Function | No | triggered on change | `(ChangeEvent, { index: number, selected: string[] , wasClicked: boolean })` |
|
|
47
|
+
| `onCollapse` | Function | No | triggered on collapse | `()` |
|
|
48
|
+
| `onExpand` | Function | No | triggered on expand | `()` |
|
|
@@ -6,11 +6,14 @@ export declare type ChangeEventProps = {
|
|
|
6
6
|
wasClicked: boolean;
|
|
7
7
|
};
|
|
8
8
|
export declare type EbayListboxButtonProps = Omit<ComponentProps<'input'>, 'onChange'> & {
|
|
9
|
+
selected?: number;
|
|
9
10
|
borderless?: boolean;
|
|
10
11
|
fluid?: boolean;
|
|
11
12
|
maxHeight?: string;
|
|
12
13
|
prefixId?: string;
|
|
14
|
+
prefixLabel?: string;
|
|
13
15
|
floatingLabel?: string;
|
|
16
|
+
unselectedText?: string;
|
|
14
17
|
onChange?: EbayChangeEventHandler<HTMLButtonElement, ChangeEventProps>;
|
|
15
18
|
onCollapse?: () => void;
|
|
16
19
|
onExpand?: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"listbox-button.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEV,cAAc,EAAE,EAAE,EACrB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAE,sBAAsB,EAAO,MAAM,6BAA6B,CAAA;AAIzE,oBAAY,gBAAgB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,oBAAY,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,sBAAsB,
|
|
1
|
+
{"version":3,"file":"listbox-button.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEV,cAAc,EAAE,EAAE,EACrB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAE,sBAAsB,EAAO,MAAM,6BAA6B,CAAA;AAIzE,oBAAY,gBAAgB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,oBAAY,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,sBAAsB,CA6R7C,CAAA;AAED,eAAe,aAAa,CAAA"}
|
|
@@ -50,7 +50,7 @@ var ebay_icon_1 = require("../ebay-icon");
|
|
|
50
50
|
var component_utils_1 = require("../common/component-utils");
|
|
51
51
|
var listbox_button_option_1 = __importDefault(require("./listbox-button-option"));
|
|
52
52
|
var ListboxButton = function (_a) {
|
|
53
|
-
var children = _a.children, name = _a.name, value = _a.value, borderless = _a.borderless, fluid = _a.fluid, className = _a.className, maxHeight = _a.maxHeight, prefixId = _a.prefixId, floatingLabel = _a.floatingLabel, _b = _a.onChange, onChange =
|
|
53
|
+
var children = _a.children, name = _a.name, value = _a.value, selected = _a.selected, borderless = _a.borderless, fluid = _a.fluid, className = _a.className, maxHeight = _a.maxHeight, prefixId = _a.prefixId, prefixLabel = _a.prefixLabel, floatingLabel = _a.floatingLabel, _b = _a.unselectedText, unselectedText = _b === void 0 ? '-' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, _d = _a.onCollapse, onCollapse = _d === void 0 ? function () { } : _d, _e = _a.onExpand, onExpand = _e === void 0 ? function () { } : _e, rest = __rest(_a, ["children", "name", "value", "selected", "borderless", "fluid", "className", "maxHeight", "prefixId", "prefixLabel", "floatingLabel", "unselectedText", "onChange", "onCollapse", "onExpand"]);
|
|
54
54
|
var optionsContainerRef = react_1.useRef(null);
|
|
55
55
|
var optionsParentContainerRef = react_1.useRef();
|
|
56
56
|
var optionsByIndexRef = react_1.useRef(new Map());
|
|
@@ -60,26 +60,26 @@ var ListboxButton = function (_a) {
|
|
|
60
60
|
throw new Error("EbayListboxButton: Please use a\n EbayListboxButtonOption that defines the options of the listbox");
|
|
61
61
|
}
|
|
62
62
|
var getInitialSelectedOption = function () {
|
|
63
|
-
var selectedIndex = listBoxButtonOptions.findIndex(function (_a) {
|
|
63
|
+
var selectedIndex = selected !== undefined ? selected : listBoxButtonOptions.findIndex(function (_a) {
|
|
64
64
|
var props = _a.props;
|
|
65
|
-
return props.value === value;
|
|
65
|
+
return value !== undefined && props.value === value;
|
|
66
66
|
});
|
|
67
|
-
var index = selectedIndex > -1 ? selectedIndex :
|
|
67
|
+
var index = selectedIndex > -1 || floatingLabel ? selectedIndex : undefined;
|
|
68
68
|
return {
|
|
69
69
|
option: listBoxButtonOptions[index],
|
|
70
70
|
index: index
|
|
71
71
|
};
|
|
72
72
|
};
|
|
73
73
|
// Get the default Selected value and set it in the state
|
|
74
|
-
var
|
|
74
|
+
var _f = getInitialSelectedOption(), selectedOptionFromValue = _f.option, initialSelectedOptionIndex = _f.index;
|
|
75
75
|
// Update the selected option to the state
|
|
76
|
-
var
|
|
77
|
-
var
|
|
76
|
+
var _g = react_1.useState(selectedOptionFromValue), selectedOption = _g[0], setSelectedOption = _g[1];
|
|
77
|
+
var _h = react_1.useState(initialSelectedOptionIndex), selectedIndex = _h[0], setSelectedIndex = _h[1];
|
|
78
78
|
// Update the expanded status to the state
|
|
79
|
-
var
|
|
79
|
+
var _j = react_1.useState(), expanded = _j[0], setExpanded = _j[1];
|
|
80
80
|
// Additional flag to avoid multiple re-render when users tries to open and close
|
|
81
|
-
var
|
|
82
|
-
var
|
|
81
|
+
var _k = react_1.useState(false), optionsOpened = _k[0], setOptionsOpened = _k[1];
|
|
82
|
+
var _l = react_1.useState(), wasClicked = _l[0], setWasClicked = _l[1];
|
|
83
83
|
react_1.useEffect(function () {
|
|
84
84
|
setSelectedOption(selectedOptionFromValue);
|
|
85
85
|
}, [value]);
|
|
@@ -221,7 +221,7 @@ var ListboxButton = function (_a) {
|
|
|
221
221
|
.map(function (child, index) { return react_1.cloneElement(child, {
|
|
222
222
|
index: index,
|
|
223
223
|
key: index,
|
|
224
|
-
selected: child.props.value === selectedOption.props.value,
|
|
224
|
+
selected: selectedOption && child.props.value === selectedOption.props.value,
|
|
225
225
|
onClick: function (e, optionValue) { return onOptionsSelect(e, optionValue, index); },
|
|
226
226
|
innerRef: function (optionNode) { return !optionNode
|
|
227
227
|
? optionsByIndexRef.current.delete(index)
|
|
@@ -230,16 +230,18 @@ var ListboxButton = function (_a) {
|
|
|
230
230
|
var wrapperClassName = classnames_1.default('listbox-button', className, { 'listbox-button--fluid': fluid });
|
|
231
231
|
var buttonClassName = classnames_1.default('btn btn--form', {
|
|
232
232
|
'btn--borderless': borderless,
|
|
233
|
-
'btn--floating-label': floatingLabel
|
|
233
|
+
'btn--floating-label': floatingLabel && selectedOption
|
|
234
234
|
});
|
|
235
235
|
var expandBtnTextId = prefixId && 'expand-btn-text';
|
|
236
|
+
var buttonLabel = floatingLabel ? (react_1.default.createElement("span", { className: "btn__floating-label" }, floatingLabel)) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
237
|
+
prefixLabel && react_1.default.createElement("span", { className: "btn__label" }, prefixLabel),
|
|
238
|
+
react_1.default.createElement("span", { className: "btn__text", id: expandBtnTextId }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.props.children) || unselectedText)));
|
|
236
239
|
return (react_1.default.createElement("span", { className: wrapperClassName },
|
|
237
240
|
react_1.default.createElement("button", __assign({}, rest, { type: "button", className: buttonClassName, "aria-expanded": !!expanded, "aria-haspopup": "listbox", "aria-labelledby": prefixId && prefixId + " " + expandBtnTextId, onClick: onButtonClick,
|
|
238
241
|
// https://stackoverflow.com/questions/17769005/onclick-and-onblur-ordering-issue
|
|
239
242
|
onMouseDown: function (e) { return e.preventDefault(); }, onKeyUp: onButtonKeyup, ref: buttonRef }),
|
|
240
243
|
react_1.default.createElement("span", { className: "btn__cell" },
|
|
241
|
-
|
|
242
|
-
react_1.default.createElement("span", { className: "btn__text", id: expandBtnTextId }, selectedOption.props.children),
|
|
244
|
+
buttonLabel,
|
|
243
245
|
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "chevronDown16" }))),
|
|
244
246
|
(expanded || optionsOpened) &&
|
|
245
247
|
react_1.default.createElement("div", { className: "listbox-button__listbox", ref: optionsParentContainerRef, style: { maxHeight: maxHeight } },
|
|
@@ -253,7 +255,7 @@ var ListboxButton = function (_a) {
|
|
|
253
255
|
collapseListbox();
|
|
254
256
|
setTimeout(function () { return buttonRef.current.focus(); }, 0);
|
|
255
257
|
} }, updatelistBoxButtonOptions)),
|
|
256
|
-
react_1.default.createElement("select", { hidden: true, className: "listbox-button__native", name: name, value: selectedOption.props.value }, updatelistBoxButtonOptions.map(function (option, i) {
|
|
258
|
+
react_1.default.createElement("select", { hidden: true, className: "listbox-button__native", name: name, value: selectedOption ? selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.props.value : '' }, updatelistBoxButtonOptions.map(function (option, i) {
|
|
257
259
|
return react_1.default.createElement("option", { value: option.props.value, key: i });
|
|
258
260
|
}))));
|
|
259
261
|
};
|