@ebay/ui-core-react 5.2.1 → 5.3.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.
Files changed (7) hide show
  1. package/ebay-dialog-base/README.md +23 -22
  2. package/ebay-dialog-base/components/dialogBase.d.ts +1 -0
  3. package/ebay-dialog-base/components/dialogBase.d.ts.map +1 -1
  4. package/ebay-dialog-base/components/dialogBase.js +2 -2
  5. package/ebay-listbox-button/listbox-button.d.ts.map +1 -1
  6. package/ebay-listbox-button/listbox-button.js +6 -5
  7. package/package.json +1 -1
package/ebay-dialog-base/README.md CHANGED
@@ -4,33 +4,34 @@
4
4
 
5
5
  ```react
6
6
  <DialogBase
7
- open
8
- a11yClosetext = "Close DialogBase"
9
- onCloseBtnClick={ handleCloseBtnClick }>
10
-
11
- <h1>Hello World</h1>
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 | 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 |
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 | Data | Description
35
- `onCloseBtnClick` | --- | --- | --- | ---
36
- `OnBackgroundClick` | --- | --- | --- | ---
34
+ | Event | Data | Description |
35
+ | ------------------- | ---- | ----------- |
36
+ | `onCloseBtnClick` | --- | --- |
37
+ | `onBackgroundClick` | --- | --- |
package/ebay-dialog-base/components/dialogBase.d.ts CHANGED
@@ -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
  }
package/ebay-dialog-base/components/dialogBase.d.ts.map CHANGED
@@ -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,CAyKvD,CAAA;AAED,eAAe,UAAU,CAAA"}
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"}
package/ebay-dialog-base/components/dialogBase.js CHANGED
@@ -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";
package/ebay-listbox-button/listbox-button.d.ts.map CHANGED
@@ -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,CA6Q7C,CAAA;AAED,eAAe,aAAa,CAAA"}
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,CAoR7C,CAAA;AAED,eAAe,aAAa,CAAA"}
package/ebay-listbox-button/listbox-button.js CHANGED
@@ -64,7 +64,7 @@ var ListboxButton = function (_a) {
64
64
  var props = _a.props;
65
65
  return props.value === value;
66
66
  });
67
- var index = selectedIndex > -1 ? selectedIndex : 0;
67
+ var index = selectedIndex > -1 || floatingLabel ? selectedIndex : 0;
68
68
  return {
69
69
  option: listBoxButtonOptions[index],
70
70
  index: index
@@ -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,7 +230,7 @@ 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
236
  return (react_1.default.createElement("span", { className: wrapperClassName },
@@ -239,7 +239,8 @@ var ListboxButton = function (_a) {
239
239
  onMouseDown: function (e) { return e.preventDefault(); }, onKeyUp: onButtonKeyup, ref: buttonRef }),
240
240
  react_1.default.createElement("span", { className: "btn__cell" },
241
241
  floatingLabel ? (react_1.default.createElement("span", { className: "btn__floating-label" }, floatingLabel)) : null,
242
- react_1.default.createElement("span", { className: "btn__text", id: expandBtnTextId }, selectedOption.props.children),
242
+ selectedOption &&
243
+ react_1.default.createElement("span", { className: "btn__text", id: expandBtnTextId }, selectedOption.props.children),
243
244
  react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "chevronDown16" }))),
244
245
  (expanded || optionsOpened) &&
245
246
  react_1.default.createElement("div", { className: "listbox-button__listbox", ref: optionsParentContainerRef, style: { maxHeight: maxHeight } },
@@ -253,7 +254,7 @@ var ListboxButton = function (_a) {
253
254
  collapseListbox();
254
255
  setTimeout(function () { return buttonRef.current.focus(); }, 0);
255
256
  } }, updatelistBoxButtonOptions)),
256
- react_1.default.createElement("select", { hidden: true, className: "listbox-button__native", name: name, value: selectedOption.props.value }, updatelistBoxButtonOptions.map(function (option, i) {
257
+ 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
258
  return react_1.default.createElement("option", { value: option.props.value, key: i });
258
259
  }))));
259
260
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ebay/ui-core-react",
3
- "version": "5.2.1",
3
+ "version": "5.3.1",
4
4
  "description": "Skin components build off React",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org"