@ebay/ui-core-react 5.2.0 → 5.3.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.
|
@@ -4,33 +4,34 @@
|
|
|
4
4
|
|
|
5
5
|
```react
|
|
6
6
|
<DialogBase
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
open
|
|
8
|
+
a11yCloseText="Close Dialog Base"
|
|
9
|
+
onCloseBtnClick={handleCloseBtnClick}
|
|
10
|
+
>
|
|
11
|
+
<h1>Hello World</h1>
|
|
13
12
|
</DialogBase>
|
|
14
13
|
```
|
|
15
14
|
|
|
16
15
|
## Attributes
|
|
17
16
|
|
|
18
|
-
| Name
|
|
19
|
-
|
|
20
|
-
| `baseEl`
|
|
21
|
-
| `open`
|
|
22
|
-
| `classPrefix`
|
|
23
|
-
| `windowClass`
|
|
24
|
-
| `header`
|
|
25
|
-
| `footer`
|
|
26
|
-
| `isModal`
|
|
27
|
-
| `top`
|
|
28
|
-
| `buttonPosition`
|
|
29
|
-
| `a11yCloseText`
|
|
30
|
-
| `animated`
|
|
17
|
+
| Name | Type | Stateful | Required | Description |
|
|
18
|
+
| ------------------ | --------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------- |
|
|
19
|
+
| `baseEl` | String | No | No | 'div', 'span', 'aside' |
|
|
20
|
+
| `open` | Boolean | Yes | No | Whether drawer is open. |
|
|
21
|
+
| `classPrefix` | 'drawer', 'toast', 'dialog' | No | No | "" (default) / modifies the base prefix for all classes in the component |
|
|
22
|
+
| `windowClass` | String | No | No | "" (default) / modifies the base prefix for all Skin classes in the component |
|
|
23
|
+
| `header` | String | No | No | element placeholder |
|
|
24
|
+
| `footer` | String | No | No | element placeholder |
|
|
25
|
+
| `isModal` | Boolean | No | No | Whether drawer is model. |
|
|
26
|
+
| `top` | --- | --- | --- | --- |
|
|
27
|
+
| `buttonPosition` | String | --- | --- | top or right or bottom or left |
|
|
28
|
+
| `a11yCloseText` | String | No | No\* | A11y text for close button and mask. Required only when close button exists. |
|
|
29
|
+
| `animated` | Boolean | Yes | No | Renders the dialog with an animation. Note that the dialog will always be present in the DOM |
|
|
30
|
+
| `closeButtonClass` | String | No | No | Sets custom className on a close button element |
|
|
31
31
|
|
|
32
32
|
## Events
|
|
33
33
|
|
|
34
|
-
Event
|
|
35
|
-
|
|
36
|
-
`
|
|
34
|
+
| Event | Data | Description |
|
|
35
|
+
| ------------------- | ---- | ----------- |
|
|
36
|
+
| `onCloseBtnClick` | --- | --- |
|
|
37
|
+
| `onBackgroundClick` | --- | --- |
|
|
@@ -26,6 +26,7 @@ export interface DialogBaseProps<T> extends HTMLProps<T> {
|
|
|
26
26
|
previousButton?: ReactElement;
|
|
27
27
|
focus?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
|
|
28
28
|
animated?: boolean;
|
|
29
|
+
closeButtonClass?: string;
|
|
29
30
|
transitionElement?: TransitionElement;
|
|
30
31
|
children?: ReactNode;
|
|
31
32
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialogBase.d.ts","sourceRoot":"","sources":["../../../src/ebay-dialog-base/components/dialogBase.tsx"],"names":[],"mappings":"AAAA,OAAc,EACV,EAAE,EACF,SAAS,EACT,SAAS,EAIT,YAAY,EAEZ,iBAAiB,EACjB,SAAS,EAET,oBAAoB,EACvB,MAAM,OAAO,CAAA;AAMd,OAAO,EAAsB,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAGnE,oBAAY,UAAU,GAAG,SAAS,CAAA;AAClC,aAAK,WAAW,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,cAAc,GACrE,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,gBAAgB,GACpE,iBAAiB,CAAA;AACvB,aAAK,cAAc,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAA;AAGpE,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,iBAAiB,GAAG,oBAAoB,CAAC;IAC3D,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAAC,WAAW,CAAC,
|
|
1
|
+
{"version":3,"file":"dialogBase.d.ts","sourceRoot":"","sources":["../../../src/ebay-dialog-base/components/dialogBase.tsx"],"names":[],"mappings":"AAAA,OAAc,EACV,EAAE,EACF,SAAS,EACT,SAAS,EAIT,YAAY,EAEZ,iBAAiB,EACjB,SAAS,EAET,oBAAoB,EACvB,MAAM,OAAO,CAAA;AAMd,OAAO,EAAsB,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAGnE,oBAAY,UAAU,GAAG,SAAS,CAAA;AAClC,aAAK,WAAW,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,cAAc,GACrE,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,gBAAgB,GACpE,iBAAiB,CAAA;AACvB,aAAK,cAAc,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAA;AAGpE,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,iBAAiB,GAAG,oBAAoB,CAAC;IAC3D,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAAC,WAAW,CAAC,CA0KvD,CAAA;AAED,eAAe,UAAU,CAAA"}
|
|
@@ -54,7 +54,7 @@ var random_id_1 = require("../../common/random-id");
|
|
|
54
54
|
var animation_1 = require("./animation");
|
|
55
55
|
exports.DialogBase = function (_a) {
|
|
56
56
|
var _b;
|
|
57
|
-
var _c = _a.baseEl, Container = _c === void 0 ? 'div' : _c, _d = _a.classPrefix, classPrefix = _d === void 0 ? 'drawer-dialog' : _d, windowClass = _a.windowClass, windowType = _a.windowType, mainId = _a.mainId, top = _a.top, header = _a.header, _e = _a.buttonPosition, buttonPosition = _e === void 0 ? 'right' : _e, children = _a.children, ariaLabelledby = _a.ariaLabelledby, a11yCloseText = _a.a11yCloseText, _f = _a.onCloseBtnClick, onCloseBtnClick = _f === void 0 ? function () { } : _f, footer = _a.footer, actions = _a.actions, onScroll = _a.onScroll, _g = _a.open, open = _g === void 0 ? false : _g, _h = _a.onOpen, onOpen = _h === void 0 ? function () { } : _h, _j = _a.onBackgroundClick, onBackgroundClick = _j === void 0 ? function () { } : _j, ignoreEscape = _a.ignoreEscape, closeButton = _a.closeButton, previousButton = _a.previousButton, isModal = _a.isModal, _k = _a.role, role = _k === void 0 ? 'dialog' : _k, focus = _a.focus, transitionElement = _a.transitionElement, animated = _a.animated, props = __rest(_a, ["baseEl", "classPrefix", "windowClass", "windowType", "mainId", "top", "header", "buttonPosition", "children", "ariaLabelledby", "a11yCloseText", "onCloseBtnClick", "footer", "actions", "onScroll", "open", "onOpen", "onBackgroundClick", "ignoreEscape", "closeButton", "previousButton", "isModal", "role", "focus", "transitionElement", "animated"]);
|
|
57
|
+
var _c = _a.baseEl, Container = _c === void 0 ? 'div' : _c, _d = _a.classPrefix, classPrefix = _d === void 0 ? 'drawer-dialog' : _d, windowClass = _a.windowClass, windowType = _a.windowType, mainId = _a.mainId, top = _a.top, header = _a.header, _e = _a.buttonPosition, buttonPosition = _e === void 0 ? 'right' : _e, children = _a.children, ariaLabelledby = _a.ariaLabelledby, a11yCloseText = _a.a11yCloseText, _f = _a.onCloseBtnClick, onCloseBtnClick = _f === void 0 ? function () { } : _f, footer = _a.footer, actions = _a.actions, onScroll = _a.onScroll, _g = _a.open, open = _g === void 0 ? false : _g, _h = _a.onOpen, onOpen = _h === void 0 ? function () { } : _h, _j = _a.onBackgroundClick, onBackgroundClick = _j === void 0 ? function () { } : _j, ignoreEscape = _a.ignoreEscape, closeButton = _a.closeButton, previousButton = _a.previousButton, isModal = _a.isModal, _k = _a.role, role = _k === void 0 ? 'dialog' : _k, focus = _a.focus, transitionElement = _a.transitionElement, animated = _a.animated, closeButtonClass = _a.closeButtonClass, props = __rest(_a, ["baseEl", "classPrefix", "windowClass", "windowType", "mainId", "top", "header", "buttonPosition", "children", "ariaLabelledby", "a11yCloseText", "onCloseBtnClick", "footer", "actions", "onScroll", "open", "onOpen", "onBackgroundClick", "ignoreEscape", "closeButton", "previousButton", "isModal", "role", "focus", "transitionElement", "animated", "closeButtonClass"]);
|
|
58
58
|
var dialogRef = react_1.useRef(null);
|
|
59
59
|
var drawerBaseEl = react_1.useRef(null);
|
|
60
60
|
var closeButtonRef = react_1.useRef(null);
|
|
@@ -130,7 +130,7 @@ exports.DialogBase = function (_a) {
|
|
|
130
130
|
return function () { return document.removeEventListener('keydown', onKeyDown, false); };
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
|
-
var closeButtonContent = buttonPosition !== 'hidden' && (react_1.default.createElement("button", { ref: closeButtonRef, className: classnames_1.default("icon-btn", classPrefix + "__close", {
|
|
133
|
+
var closeButtonContent = buttonPosition !== 'hidden' && (react_1.default.createElement("button", { ref: closeButtonRef, className: classnames_1.default("icon-btn", closeButtonClass, classPrefix + "__close", {
|
|
134
134
|
'icon-btn--transparent': classPrefix === "toast-dialog"
|
|
135
135
|
}), type: "button", "aria-label": a11yCloseText, onClick: onCloseBtnClick }, closeButton || react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "close16" })));
|
|
136
136
|
var windowClassName = windowType ? classPrefix + "__" + windowType + "-window" : classPrefix + "__window";
|
|
@@ -113,7 +113,7 @@ var ListboxButton = function (_a) {
|
|
|
113
113
|
collapseListbox();
|
|
114
114
|
setActiveDescendant(index);
|
|
115
115
|
buttonRef.current.focus();
|
|
116
|
-
onChange(e, { index: index, selected: [getSelectedValueByIndex(
|
|
116
|
+
onChange(e, { index: index, selected: [getSelectedValueByIndex(index)], wasClicked: wasClicked });
|
|
117
117
|
setWasClicked(false);
|
|
118
118
|
};
|
|
119
119
|
var reset = function () {
|