@ebay/ui-core-react 3.12.10 → 3.13.1
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/ebay-dialog-base/README.md +13 -13
- package/ebay-dialog-base/components/dialogBase.d.ts +1 -1
- package/ebay-dialog-base/components/dialogBase.d.ts.map +1 -1
- package/ebay-dialog-base/components/dialogBase.js +1 -1
- package/ebay-drawer-dialog/README.md +16 -16
- package/ebay-drawer-dialog/components/drawer.d.ts +2 -2
- package/ebay-drawer-dialog/components/drawer.d.ts.map +1 -1
- package/ebay-drawer-dialog/components/drawer.js +1 -1
- package/package.json +1 -1
|
@@ -15,19 +15,19 @@
|
|
|
15
15
|
|
|
16
16
|
## Attributes
|
|
17
17
|
|
|
18
|
-
Name
|
|
19
|
-
|
|
20
|
-
`baseEl`
|
|
21
|
-
`open`
|
|
22
|
-
`classPrefix`
|
|
23
|
-
`windowClass`
|
|
24
|
-
`header`
|
|
25
|
-
`footer`
|
|
26
|
-
`isModal`
|
|
27
|
-
`top`
|
|
28
|
-
`buttonPosition` | string
|
|
29
|
-
`a11yCloseText
|
|
30
|
-
`animated`
|
|
18
|
+
| Name | Type | Stateful | Required | Description |
|
|
19
|
+
|------------------|---------------------------|----------|----------|----------------------------------------------------------------------------------------------|
|
|
20
|
+
| `baseEl` | string | No | No | --- div' , 'span', 'aside' |
|
|
21
|
+
| `open` | Boolean | Yes | No | Whether drawer is open. |
|
|
22
|
+
| `classPrefix` | drawer or toast or dialog | No | No | "" (default) / modifies the base prefix for all classes in the component |
|
|
23
|
+
| `windowClass` | String | No | No | "" (default) / modifies the base prefix for all Skin classes in the component |
|
|
24
|
+
| `header` | String | No | No | element placeholder |
|
|
25
|
+
| `footer` | String | No | No | element placeholder |
|
|
26
|
+
| `isModal` | Boolean | No | No | Whether drawer is model. |
|
|
27
|
+
| `top` | --- | --- | --- | --- |
|
|
28
|
+
| `buttonPosition` | string | --- | --- | top or right or bottom or left |
|
|
29
|
+
| `a11yCloseText` | String | No | No* | A11y text for close button and mask. Required only when close button exists. |
|
|
30
|
+
| `animated` | Boolean | Yes | No | Renders the dialog with an animation. Note that the dialog will always be present in the DOM |
|
|
31
31
|
|
|
32
32
|
## Events
|
|
33
33
|
|
|
@@ -16,7 +16,7 @@ export interface DialogBaseProps<T> extends HTMLProps<T> {
|
|
|
16
16
|
top?: ReactElement;
|
|
17
17
|
buttonPosition?: ButtonPosition;
|
|
18
18
|
ariaLabelledby?: string;
|
|
19
|
-
a11yCloseText
|
|
19
|
+
a11yCloseText?: string;
|
|
20
20
|
onCloseBtnClick?: MouseEventHandler;
|
|
21
21
|
onBackgroundClick?: MouseEventHandler;
|
|
22
22
|
mainId?: string;
|
|
@@ -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,EACZ,MAAM,OAAO,CAAA;AAMd,OAAO,EAAsB,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAEnE,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,EAAE,MAAM,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,EACZ,MAAM,OAAO,CAAA;AAMd,OAAO,EAAsB,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAEnE,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,eAAe,CAAC,EAAE,iBAAiB,CAAC;IACpC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,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,CAmKvD,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 ? '
|
|
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.onBackgroundClick, onBackgroundClick = _h === void 0 ? function () { } : _h, ignoreEscape = _a.ignoreEscape, closeButton = _a.closeButton, isModal = _a.isModal, _j = _a.role, role = _j === void 0 ? 'dialog' : _j, 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", "onBackgroundClick", "ignoreEscape", "closeButton", "isModal", "role", "focus", "transitionElement", "animated"]);
|
|
58
58
|
var dialogRef = react_1.useRef(null);
|
|
59
59
|
var drawerBaseEl = react_1.useRef(null);
|
|
60
60
|
var closeButtonRef = react_1.useRef(null);
|
|
@@ -23,25 +23,25 @@ import '@ebay/skin/drawer-dialog.css'
|
|
|
23
23
|
|
|
24
24
|
## Props
|
|
25
25
|
|
|
26
|
-
Name
|
|
27
|
-
|
|
28
|
-
`expanded`
|
|
29
|
-
`open`
|
|
30
|
-
`noHandle`
|
|
31
|
-
`focus`
|
|
32
|
-
`a11yCloseText`
|
|
33
|
-
`a11yMinimizeText` | String
|
|
34
|
-
`a11yMaximizeText` | String
|
|
35
|
-
`animated`
|
|
26
|
+
| Name | Type | Stateful | Required | Description |
|
|
27
|
+
|--------------------|---------|----------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
28
|
+
| `expanded` | Boolean | No | No | Whether the drawer is expanded to full height or max 50%. Controlled. |
|
|
29
|
+
| `open` | Boolean | Yes | No | Whether drawer is open. Controlled. |
|
|
30
|
+
| `noHandle` | Boolean | Yes | No | Whether handle will be shown or not. |
|
|
31
|
+
| `focus` | String | No | No | An id for an element which will receive focus when the drawer opens (defaults to close button). |
|
|
32
|
+
| `a11yCloseText` | String | No | No* | A11y text for close button and mask. Required only when close button exists. |
|
|
33
|
+
| `a11yMinimizeText` | String | No | No* | A11y text for draggable handle when drawer is maximized and clicking handle will minimize the drawer. Required only when draggable handle exists. |
|
|
34
|
+
| `a11yMaximizeText` | String | No | No* | A11y text for draggable handle when drawer is minimized and clicking handle will maximize the drawer. Required only when draggable handle exists. |
|
|
35
|
+
| `animated` | Boolean | Yes | No | Renders the dialog with an animation. Note that the dialog will always be present in the DOM |
|
|
36
36
|
|
|
37
37
|
## Events
|
|
38
38
|
|
|
39
|
-
Event
|
|
40
|
-
|
|
41
|
-
`onShow`
|
|
42
|
-
`onClose`
|
|
43
|
-
`onExpanded`
|
|
44
|
-
`onCollapsed` |
|
|
39
|
+
| Event | Data | Description |
|
|
40
|
+
|---------------|------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
41
|
+
| `onShow` | | drawer opened |
|
|
42
|
+
| `onClose` | | drawer closed. Triggered also when user drags down on handle (touch only) when dialog is not expanded |
|
|
43
|
+
| `onExpanded` | | drawer expanded to full page height. Event is triggered on drag up of handle (touch only), clicks, or when user scrolls in content when dialog is not expanded |
|
|
44
|
+
| `onCollapsed` | | drawer collapsed back to max 50%. Event is triggered on drags do |
|
|
45
45
|
|
|
46
46
|
## Child components
|
|
47
47
|
|
|
@@ -5,8 +5,8 @@ export interface EbayDrawerProps<T> extends DialogBaseProps<T> {
|
|
|
5
5
|
open?: boolean;
|
|
6
6
|
noHandle?: boolean;
|
|
7
7
|
focus?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
|
|
8
|
-
a11yMinimizeText
|
|
9
|
-
a11yMaximizeText
|
|
8
|
+
a11yMinimizeText?: string;
|
|
9
|
+
a11yMaximizeText?: string;
|
|
10
10
|
onShow?: () => void;
|
|
11
11
|
onClose?: () => void;
|
|
12
12
|
onExpanded?: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/ebay-drawer-dialog/components/drawer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAY,EAAE,EAAgB,SAAS,EAA0C,MAAM,OAAO,CAAA;AAE5G,OAAO,EAAE,eAAe,EAAyC,MAAM,wBAAwB,CAAA;AAK/F,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzD,gBAAgB,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/ebay-drawer-dialog/components/drawer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAY,EAAE,EAAgB,SAAS,EAA0C,MAAM,OAAO,CAAA;AAE5G,OAAO,EAAE,eAAe,EAAyC,MAAM,wBAAwB,CAAA;AAK/F,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,CA8F9C,CAAA;AAED,eAAe,gBAAgB,CAAA"}
|
|
@@ -114,7 +114,7 @@ var EbayDrawerDialog = function (_a) {
|
|
|
114
114
|
var type = _a.type;
|
|
115
115
|
return type !== ebay_dialog_base_1.EbayDialogHeader;
|
|
116
116
|
});
|
|
117
|
-
return (react_1.default.createElement(ebay_dialog_base_1.DialogBaseWithState, __assign({}, rest, { classPrefix: classPrefix,
|
|
117
|
+
return (react_1.default.createElement(ebay_dialog_base_1.DialogBaseWithState, __assign({}, rest, { classPrefix: classPrefix, onCloseBtnClick: onClose, className: classnames_1.default(rest.className, classPrefix + "--mask-fade-slow"), windowClass: classnames_1.default(classPrefix + "__window", classPrefix + "__window--slide", (_b = {},
|
|
118
118
|
_b[classPrefix + "__window--expanded"] = expanded,
|
|
119
119
|
_b)), onBackgroundClick: onClose, top: handle }),
|
|
120
120
|
header || react_1.default.createElement(ebay_dialog_base_1.EbayDialogHeader, null),
|