@ebay/ui-core-react 4.2.5 → 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.
Files changed (144) hide show
  1. package/README.md +8 -6
  2. package/common/event-utils/index.d.ts +10 -7
  3. package/common/event-utils/index.d.ts.map +1 -1
  4. package/common/event-utils/index.js +11 -3
  5. package/common/event-utils/types.d.ts +7 -0
  6. package/common/event-utils/types.d.ts.map +1 -1
  7. package/common/event-utils/types.js +12 -0
  8. package/common/floating-label-utils/hooks.d.ts +2 -1
  9. package/common/floating-label-utils/hooks.d.ts.map +1 -1
  10. package/common/floating-label-utils/hooks.js +5 -4
  11. package/ebay-alert-dialog/README.md +3 -2
  12. package/ebay-alert-dialog/alert-dialog.d.ts +0 -1
  13. package/ebay-alert-dialog/alert-dialog.d.ts.map +1 -1
  14. package/ebay-alert-dialog/alert-dialog.js +1 -1
  15. package/ebay-breadcrumbs/README.md +1 -1
  16. package/ebay-breadcrumbs/breadcrumbs.d.ts +3 -2
  17. package/ebay-breadcrumbs/breadcrumbs.d.ts.map +1 -1
  18. package/ebay-breadcrumbs/breadcrumbs.js +1 -1
  19. package/ebay-button/README.md +4 -4
  20. package/ebay-carousel/carousel.js +1 -1
  21. package/ebay-checkbox/README.md +11 -10
  22. package/ebay-checkbox/checkbox.d.ts +15 -3
  23. package/ebay-checkbox/checkbox.d.ts.map +1 -1
  24. package/ebay-checkbox/checkbox.js +9 -4
  25. package/ebay-confirm-dialog/README.md +6 -6
  26. package/ebay-confirm-dialog/confirm-dialog.d.ts +0 -1
  27. package/ebay-confirm-dialog/confirm-dialog.d.ts.map +1 -1
  28. package/ebay-confirm-dialog/confirm-dialog.js +1 -1
  29. package/ebay-dialog-base/components/dialogBase.d.ts +3 -2
  30. package/ebay-dialog-base/components/dialogBase.d.ts.map +1 -1
  31. package/ebay-dialog-base/components/dialogBase.js +6 -3
  32. package/ebay-drawer-dialog/README.md +7 -6
  33. package/ebay-drawer-dialog/components/drawer.d.ts +3 -0
  34. package/ebay-drawer-dialog/components/drawer.d.ts.map +1 -1
  35. package/ebay-fake-menu/README.md +5 -5
  36. package/ebay-fake-menu/menu-item.d.ts +1 -1
  37. package/ebay-fake-menu/menu-item.d.ts.map +1 -1
  38. package/ebay-fake-menu/menu.d.ts +9 -5
  39. package/ebay-fake-menu/menu.d.ts.map +1 -1
  40. package/ebay-fake-menu/menu.js +2 -2
  41. package/ebay-fake-menu-button/README.md +9 -4
  42. package/ebay-fake-menu-button/menu-button.d.ts +9 -2
  43. package/ebay-fake-menu-button/menu-button.d.ts.map +1 -1
  44. package/ebay-fake-menu-button/menu-button.js +7 -5
  45. package/ebay-fullscreen-dialog/fullscreen-dialog.d.ts +0 -1
  46. package/ebay-fullscreen-dialog/fullscreen-dialog.d.ts.map +1 -1
  47. package/ebay-fullscreen-dialog/fullscreen-dialog.js +1 -1
  48. package/ebay-icon-button/README.md +9 -0
  49. package/ebay-icon-button/icon-button.d.ts +3 -1
  50. package/ebay-icon-button/icon-button.d.ts.map +1 -1
  51. package/ebay-icon-button/icon-button.js +8 -2
  52. package/ebay-lightbox-dialog/lightbox-dialog.d.ts +0 -1
  53. package/ebay-lightbox-dialog/lightbox-dialog.d.ts.map +1 -1
  54. package/ebay-lightbox-dialog/lightbox-dialog.js +1 -1
  55. package/ebay-listbox-button/README.md +8 -1
  56. package/ebay-listbox-button/listbox-button.d.ts +11 -3
  57. package/ebay-listbox-button/listbox-button.d.ts.map +1 -1
  58. package/ebay-listbox-button/listbox-button.js +41 -16
  59. package/ebay-menu/README.md +5 -4
  60. package/ebay-menu/menu-item.d.ts +1 -1
  61. package/ebay-menu/menu-item.d.ts.map +1 -1
  62. package/ebay-menu/menu.d.ts +4 -4
  63. package/ebay-menu/menu.d.ts.map +1 -1
  64. package/ebay-menu/menu.js +85 -42
  65. package/ebay-menu/types.d.ts +21 -12
  66. package/ebay-menu/types.d.ts.map +1 -1
  67. package/ebay-menu-button/README.md +2 -2
  68. package/ebay-menu-button/menu-button.d.ts +3 -3
  69. package/ebay-menu-button/menu-button.d.ts.map +1 -1
  70. package/ebay-menu-button/menu-button.js +18 -4
  71. package/ebay-page-notice/README.md +5 -1
  72. package/ebay-page-notice/index.d.ts +1 -1
  73. package/ebay-page-notice/index.d.ts.map +1 -1
  74. package/ebay-page-notice/page-notice.d.ts +5 -4
  75. package/ebay-page-notice/page-notice.d.ts.map +1 -1
  76. package/ebay-page-notice/page-notice.js +7 -8
  77. package/ebay-pagination/README.md +5 -5
  78. package/ebay-pagination/pagination-item.d.ts +8 -4
  79. package/ebay-pagination/pagination-item.d.ts.map +1 -1
  80. package/ebay-pagination/pagination-item.js +2 -1
  81. package/ebay-pagination/pagination.d.ts +8 -5
  82. package/ebay-pagination/pagination.d.ts.map +1 -1
  83. package/ebay-pagination/pagination.js +1 -1
  84. package/ebay-panel-dialog/panel-dialog.d.ts +0 -1
  85. package/ebay-panel-dialog/panel-dialog.d.ts.map +1 -1
  86. package/ebay-panel-dialog/panel-dialog.js +1 -1
  87. package/ebay-radio/README.md +7 -2
  88. package/ebay-radio/radio.d.ts +12 -3
  89. package/ebay-radio/radio.d.ts.map +1 -1
  90. package/ebay-radio/radio.js +7 -5
  91. package/ebay-section-notice/README.md +5 -0
  92. package/ebay-section-notice/index.d.ts +1 -1
  93. package/ebay-section-notice/index.d.ts.map +1 -1
  94. package/ebay-section-notice/section-notice.d.ts +6 -3
  95. package/ebay-section-notice/section-notice.d.ts.map +1 -1
  96. package/ebay-section-notice/section-notice.js +32 -4
  97. package/ebay-select/README.md +3 -1
  98. package/ebay-select/ebay-select.d.ts +7 -2
  99. package/ebay-select/ebay-select.d.ts.map +1 -1
  100. package/ebay-select/ebay-select.js +1 -1
  101. package/ebay-select/index.d.ts +1 -1
  102. package/ebay-select/index.d.ts.map +1 -1
  103. package/ebay-split-button/README.md +2 -2
  104. package/ebay-split-button/split-button.js +1 -1
  105. package/ebay-split-button/types.d.ts +2 -3
  106. package/ebay-split-button/types.d.ts.map +1 -1
  107. package/ebay-star-rating-select/README.md +8 -0
  108. package/ebay-star-rating-select/star-rating-select.d.ts +8 -4
  109. package/ebay-star-rating-select/star-rating-select.d.ts.map +1 -1
  110. package/ebay-star-rating-select/star-rating-select.js +8 -8
  111. package/ebay-switch/README.md +5 -1
  112. package/ebay-switch/ebay-switch.d.ts +7 -3
  113. package/ebay-switch/ebay-switch.d.ts.map +1 -1
  114. package/ebay-switch/ebay-switch.js +6 -3
  115. package/ebay-tabs/README.md +6 -10
  116. package/ebay-tabs/tab-panel.d.ts +0 -1
  117. package/ebay-tabs/tab-panel.d.ts.map +1 -1
  118. package/ebay-tabs/tab-panel.js +2 -2
  119. package/ebay-tabs/tab.d.ts +1 -7
  120. package/ebay-tabs/tab.d.ts.map +1 -1
  121. package/ebay-tabs/tab.js +2 -7
  122. package/ebay-tabs/tabs.d.ts +7 -1
  123. package/ebay-tabs/tabs.d.ts.map +1 -1
  124. package/ebay-tabs/tabs.js +12 -19
  125. package/ebay-textbox/README.md +16 -9
  126. package/ebay-textbox/postfix-icon.d.ts.map +1 -1
  127. package/ebay-textbox/postfix-icon.js +25 -3
  128. package/ebay-textbox/prefix-icon.d.ts.map +1 -1
  129. package/ebay-textbox/prefix-icon.js +24 -2
  130. package/ebay-textbox/textbox.d.ts +17 -7
  131. package/ebay-textbox/textbox.d.ts.map +1 -1
  132. package/ebay-textbox/textbox.js +47 -14
  133. package/ebay-textbox/types.d.ts +2 -2
  134. package/ebay-textbox/types.d.ts.map +1 -1
  135. package/ebay-video/README.md +7 -5
  136. package/ebay-video/controls.d.ts.map +1 -1
  137. package/ebay-video/controls.js +10 -4
  138. package/ebay-video/reportButton.d.ts +1 -5
  139. package/ebay-video/reportButton.d.ts.map +1 -1
  140. package/ebay-video/reportButton.js +3 -3
  141. package/ebay-video/video.d.ts +13 -10
  142. package/ebay-video/video.d.ts.map +1 -1
  143. package/ebay-video/video.js +4 -1
  144. package/package.json +1 -1
@@ -11,19 +11,15 @@ yarn add @ebay/ui-core-react
11
11
  ```
12
12
 
13
13
  ### Import JS
14
-
15
14
  ```jsx harmony
16
15
  import { EbayTextbox } from '@ebay/ui-core-react/ebay-textbox'
17
16
  ```
18
17
 
19
18
  ### Import following styles from SKIN
20
-
21
19
  ```jsx harmony
22
20
  import "@ebay/skin/textbox";
23
21
  ```
24
-
25
22
  ### or if using CSS/SCSS
26
-
27
23
  ```jsx
28
24
  import "@ebay/skin/textbox.css";
29
25
  ```
@@ -44,12 +40,23 @@ import "@ebay/skin/textbox.css";
44
40
  | `defaultValue` | String | No | No | Indicates the default input element value. Use when the component is not controlled. |
45
41
  | `inputSize` | String | No | No | `default` (default), `large` |
46
42
  | `floatingLabel` | String | No | No | Indicates that the input is a floating label type and renders it as a label |
47
- | `onFocus` | Function | No | No | Called when input gets focus, parameters passed: `originalEvent`, `value` |
48
- | `onBlur` | Function | No | No | Called when input loses focus, parameters passed: `originalEvent`, `value` |
49
- | `onChange` | Function | No | No | Called when input changes value, parameters passed: `originalEvent`, `value` |
50
- | `onButtonClick` | Function | No | No | Triggers when clicking on postfix-icon-button. Requires `buttonAriaLabel` to be present in order to attach correctly |
51
43
 
52
- It supports all the events supported by an input element (e.g. `onInput`, `onKeyDown`, `onKeyUp`)
44
+ ## Callbacks
45
+ | Name | Required | Description | Arguments |
46
+ |------|----------|-------------|-----------|
47
+
48
+ | `onChange` | No | Triggered when focus leaves and value is changed. | `(ChangeEvent, { value: string })` | |
49
+ | `onInputChange` | No | Triggered when the value of the input is changed. | `(ChangeEvent, { value: string })` | |
50
+ | `onFocus` | No | Called when input gets focus | `(FocusEvent, { value: string })` |
51
+ | `onBlur` | No | Called when input loses focus | `(FocusEvent, { value: string })` |
52
+ | `onKeyPress` | No | Called on key press | `(KeyboardEvent, { value: string })` |
53
+ | `onKeyUp` | No | Called on key up | `(KeyboardEvent, { value: string })` |
54
+ | `onKeyDown` | No | Called on key down | `(KeyboardEvent, { value: string })` |
55
+ | `onInvalid` | No | Triggered when value is invalid | `(ChangeEvent, { value: string })` |
56
+ | `onFloatingLabelInit` | No | Triggered when floating label is initialized | `()` |
57
+ | `onButtonClick` | No | Triggers when clicking on postfix-icon-button. Requires `buttonAriaLabel` to be present in order to attach correctly | `(MouseEvent, { value: string })` |
58
+
59
+ It supports all the events supported by an input element (e.g. `onInput`, `onPaste`)
53
60
 
54
61
  ## EbayTextboxPrefixIcon
55
62
  | Name | Type | Required | Description |
@@ -1 +1 @@
1
- {"version":3,"file":"postfix-icon.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/postfix-icon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAI9C,QAAA,MAAM,sBAAsB,EAAE,EAAE,CAAC,oBAAoB,CAWzB,CAAA;AAE5B,eAAe,sBAAsB,CAAA"}
1
+ {"version":3,"file":"postfix-icon.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/postfix-icon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAI9C,QAAA,MAAM,sBAAsB,EAAE,EAAE,CAAC,oBAAoB,CAaR,CAAA;AAE7C,eAAe,sBAAsB,CAAA"}
@@ -1,4 +1,26 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
2
24
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
25
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
26
  };
@@ -7,9 +29,9 @@ var react_1 = __importDefault(require("react"));
7
29
  var ebay_icon_1 = require("../ebay-icon");
8
30
  var ebay_icon_button_1 = require("../ebay-icon-button");
9
31
  var EbayTextboxPostfixIcon = function (_a) {
10
- var name = _a.name, buttonAriaLabel = _a.buttonAriaLabel, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b;
32
+ var name = _a.name, buttonAriaLabel = _a.buttonAriaLabel, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, rest = __rest(_a, ["name", "buttonAriaLabel", "onClick"]);
11
33
  return buttonAriaLabel ?
12
- react_1.default.createElement(ebay_icon_button_1.EbayIconButton, { "aria-label": buttonAriaLabel, icon: name, transparent: true, onClick: onClick }) :
13
- react_1.default.createElement(ebay_icon_1.EbayIcon, { name: name });
34
+ react_1.default.createElement(ebay_icon_button_1.EbayIconButton, __assign({ "aria-label": buttonAriaLabel, icon: name, transparent: true, onClick: onClick }, rest)) :
35
+ react_1.default.createElement(ebay_icon_1.EbayIcon, __assign({ name: name }, rest));
14
36
  };
15
37
  exports.default = EbayTextboxPostfixIcon;
@@ -1 +1 @@
1
- {"version":3,"file":"prefix-icon.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/prefix-icon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE9C,QAAA,MAAM,qBAAqB,EAAE,EAAE,CAAC,oBAAoB,CAInD,CAAA;AAED,eAAe,qBAAqB,CAAA"}
1
+ {"version":3,"file":"prefix-icon.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/prefix-icon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE9C,QAAA,MAAM,qBAAqB,EAAE,EAAE,CAAC,oBAAoB,CAKnD,CAAA;AAED,eAAe,qBAAqB,CAAA"}
@@ -1,4 +1,26 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
2
24
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
25
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
26
  };
@@ -6,7 +28,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
28
  var react_1 = __importDefault(require("react"));
7
29
  var ebay_icon_1 = require("../ebay-icon");
8
30
  var EbayTextboxPrefixIcon = function (_a) {
9
- var name = _a.name;
10
- return (react_1.default.createElement(ebay_icon_1.EbayIcon, { name: name }));
31
+ var name = _a.name, rest = __rest(_a, ["name"]);
32
+ return (react_1.default.createElement(ebay_icon_1.EbayIcon, __assign({ name: name }, rest)));
11
33
  };
12
34
  exports.default = EbayTextboxPrefixIcon;
@@ -1,19 +1,29 @@
1
- import React, { ChangeEvent, ComponentProps, FocusEvent, Ref } from 'react';
1
+ import React, { ComponentProps, Ref } from 'react';
2
2
  import { Size } from './index';
3
+ import { EbayChangeEventHandler, EbayEventHandler, EbayFocusEventHandler, EbayKeyboardEventHandler, EbayMouseEventHandler } from '../common/event-utils/types';
3
4
  declare type TextInputProps = ComponentProps<'input'> & ComponentProps<'textarea'>;
5
+ export declare type TextboxEventProps = {
6
+ value: string;
7
+ };
4
8
  export declare type EbayTextboxProps = {
5
9
  fluid?: boolean;
6
10
  invalid?: boolean;
7
11
  multiline?: boolean;
8
12
  defaultValue?: string;
9
13
  inputSize?: Size;
10
- onFocus?: (e?: FocusEvent<HTMLTextAreaElement & HTMLInputElement>, value?: string) => void;
11
- onBlur?: (e?: FocusEvent<HTMLTextAreaElement & HTMLInputElement>, value?: string) => void;
12
- onChange?: (e: ChangeEvent<HTMLTextAreaElement & HTMLInputElement>, value: string) => void;
13
- onButtonClick?: (e: MouseEvent, value: string) => void;
14
14
  floatingLabel?: string;
15
+ onChange?: EbayChangeEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
16
+ onInputChange?: EbayChangeEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
17
+ onFocus?: EbayFocusEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
18
+ onBlur?: EbayFocusEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
19
+ onKeyPress?: EbayKeyboardEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
20
+ onKeyUp?: EbayKeyboardEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
21
+ onKeyDown?: EbayKeyboardEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
22
+ onInvalid?: EbayEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
23
+ onFloatingLabelInit?: () => void;
24
+ onButtonClick?: EbayKeyboardEventHandler<HTMLInputElement, TextboxEventProps> & EbayMouseEventHandler<HTMLInputElement, TextboxEventProps>;
15
25
  forwardedRef?: Ref<HTMLTextAreaElement | HTMLInputElement>;
16
- } & Omit<TextInputProps, 'onFocus' | 'onBlur'>;
17
- declare const _default: React.ForwardRefExoticComponent<Pick<EbayTextboxProps, "form" | "slot" | "style" | "title" | "pattern" | "type" | "invalid" | "key" | "value" | "className" | "disabled" | "inputSize" | "placeholder" | "children" | "dir" | "list" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "cols" | "crossOrigin" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "rows" | "size" | "src" | "step" | "width" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "forwardedRef" | "fluid" | "floatingLabel" | "dirName" | "multiline" | "onButtonClick"> & React.RefAttributes<React.FC<EbayTextboxProps>>>;
26
+ } & Omit<TextInputProps, 'onFocus' | 'onBlur' | 'onChange' | 'onKeyPress' | 'onKeyUp' | 'onKeyDown' | 'onInvalid'>;
27
+ declare const _default: React.ForwardRefExoticComponent<Pick<EbayTextboxProps, "form" | "slot" | "style" | "title" | "pattern" | "type" | "invalid" | "key" | "value" | "className" | "disabled" | "inputSize" | "placeholder" | "children" | "dir" | "list" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "cols" | "crossOrigin" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "rows" | "size" | "src" | "step" | "width" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "forwardedRef" | "fluid" | "floatingLabel" | "dirName" | "multiline" | "onInputChange" | "onFloatingLabelInit" | "onButtonClick"> & React.RefAttributes<React.FC<EbayTextboxProps>>>;
18
28
  export default _default;
19
29
  //# sourceMappingURL=textbox.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"textbox.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/textbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAgB,cAAc,EAAM,UAAU,EAAE,GAAG,EAAuB,MAAM,OAAO,CAAA;AAGlH,OAAO,EAAiD,IAAI,EAAE,MAAM,SAAS,CAAA;AAK7E,aAAK,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;AAE1E,oBAAY,gBAAgB,GAAG;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,mBAAmB,GAAG,gBAAgB,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3F,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,mBAAmB,GAAG,gBAAgB,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1F,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,mBAAmB,GAAG,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3F,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,GAAG,CAAC,mBAAmB,GAAG,gBAAgB,CAAC,CAAC;CAC9D,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,QAAQ,CAAC,CAAC;;AA2G/C,wBAA4D"}
1
+ {"version":3,"file":"textbox.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/textbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACI,cAAc,EAAM,GAAG,EAGxC,MAAM,OAAO,CAAA;AAGd,OAAO,EAAiD,IAAI,EAAE,MAAM,SAAS,CAAA;AAE7E,OAAO,EACH,sBAAsB,EACtB,gBAAgB,EAChB,qBAAqB,EACrB,wBAAwB,EAAE,qBAAqB,EAClD,MAAM,6BAA6B,CAAA;AAIpC,aAAK,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;AAE1E,oBAAY,iBAAiB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AACjD,oBAAY,gBAAgB,GAAG;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC7F,aAAa,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAClG,OAAO,CAAC,EAAE,qBAAqB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC3F,MAAM,CAAC,EAAE,qBAAqB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC1F,UAAU,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IACjG,OAAO,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC9F,SAAS,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAChG,SAAS,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IACxF,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,GACzE,qBAAqB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,GAAG,CAAC,mBAAmB,GAAG,gBAAgB,CAAC,CAAC;CAC9D,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;;AAuJnH,wBAA4D"}
@@ -51,38 +51,67 @@ var index_1 = require("./index");
51
51
  var hooks_1 = require("../common/floating-label-utils/hooks");
52
52
  var isControlled = function (value) { return typeof value !== 'undefined'; };
53
53
  var EbayTextbox = function (_a) {
54
- var _b = _a.type, type = _b === void 0 ? 'text' : _b, invalid = _a.invalid, fluid = _a.fluid, multiline = _a.multiline, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, _d = _a.onFocus, onFocus = _d === void 0 ? function () { } : _d, _e = _a.onBlur, onBlur = _e === void 0 ? function () { } : _e, _f = _a.onButtonClick, onButtonClick = _f === void 0 ? function () { } : _f, autoFocus = _a.autoFocus, _g = _a.defaultValue, defaultValue = _g === void 0 ? '' : _g, controlledValue = _a.value, forwardedRef = _a.forwardedRef, _h = _a.inputSize, inputSize = _h === void 0 ? 'default' : _h, floatingLabel = _a.floatingLabel, children = _a.children, placeholder = _a.placeholder, rest = __rest(_a, ["type", "invalid", "fluid", "multiline", "onChange", "onFocus", "onBlur", "onButtonClick", "autoFocus", "defaultValue", "value", "forwardedRef", "inputSize", "floatingLabel", "children", "placeholder"]);
55
- var _j = react_1.useState(defaultValue), value = _j[0], setValue = _j[1];
56
- var _k = hooks_1.useFloatingLabel({
54
+ var _b = _a.type, type = _b === void 0 ? 'text' : _b, invalid = _a.invalid, fluid = _a.fluid, multiline = _a.multiline, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, _d = _a.onInputChange, onInputChange = _d === void 0 ? function () { } : _d, _e = _a.onFocus, onFocus = _e === void 0 ? function () { } : _e, _f = _a.onBlur, onBlur = _f === void 0 ? function () { } : _f, _g = _a.onKeyPress, onKeyPress = _g === void 0 ? function () { } : _g, _h = _a.onKeyUp, onKeyUp = _h === void 0 ? function () { } : _h, _j = _a.onKeyDown, onKeyDown = _j === void 0 ? function () { } : _j, _k = _a.onInvalid, onInvalid = _k === void 0 ? function () { } : _k, _l = _a.onFloatingLabelInit, onFloatingLabelInit = _l === void 0 ? function () { } : _l, _m = _a.onButtonClick, onButtonClick = _m === void 0 ? function () { } : _m, autoFocus = _a.autoFocus, _o = _a.defaultValue, defaultValue = _o === void 0 ? '' : _o, controlledValue = _a.value, forwardedRef = _a.forwardedRef, _p = _a.inputSize, inputSize = _p === void 0 ? 'default' : _p, floatingLabel = _a.floatingLabel, children = _a.children, placeholder = _a.placeholder, rest = __rest(_a, ["type", "invalid", "fluid", "multiline", "onChange", "onInputChange", "onFocus", "onBlur", "onKeyPress", "onKeyUp", "onKeyDown", "onInvalid", "onFloatingLabelInit", "onButtonClick", "autoFocus", "defaultValue", "value", "forwardedRef", "inputSize", "floatingLabel", "children", "placeholder"]);
55
+ var _q = react_1.useState(defaultValue), value = _q[0], setValue = _q[1];
56
+ var _r = react_1.useState(defaultValue), inputValue = _r[0], setInputValue = _r[1];
57
+ var _s = hooks_1.useFloatingLabel({
57
58
  ref: forwardedRef,
58
59
  inputId: rest.id,
59
60
  className: rest.className,
60
61
  disabled: rest.disabled,
61
62
  label: floatingLabel,
62
63
  inputSize: inputSize,
63
- inputValue: controlledValue || value,
64
+ inputValue: controlledValue || inputValue,
64
65
  placeholder: placeholder,
65
- invalid: invalid
66
- }), label = _k.label, Container = _k.Container, onFloatingLabelBlur = _k.onBlur, onFloatingLabelFocus = _k.onFocus, ref = _k.ref, floatingLabelPlaceholder = _k.placeholder;
66
+ invalid: invalid,
67
+ onMount: onFloatingLabelInit
68
+ }), label = _s.label, Container = _s.Container, onFloatingLabelBlur = _s.onBlur, onFloatingLabelFocus = _s.onFocus, ref = _s.ref, floatingLabelPlaceholder = _s.placeholder;
67
69
  var handleFocus = function (event) {
68
- onFocus(event);
70
+ var _a;
71
+ onFocus(event, { value: ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) || defaultValue });
69
72
  onFloatingLabelFocus();
70
73
  };
71
74
  var handleBlur = function (event) {
72
- onBlur(event);
75
+ var _a;
76
+ var newValue = (_a = event.target) === null || _a === void 0 ? void 0 : _a.value;
77
+ onBlur(event, { value: newValue });
78
+ if (newValue !== value) {
79
+ onChange(event, { value: newValue });
80
+ setValue(newValue);
81
+ }
73
82
  onFloatingLabelBlur();
74
83
  };
84
+ var handleKeyPress = function (event) {
85
+ var textbox = event.target;
86
+ onKeyPress(event, { value: textbox === null || textbox === void 0 ? void 0 : textbox.value });
87
+ };
88
+ var handleKeyUp = function (event) {
89
+ var textbox = event.target;
90
+ onKeyUp(event, { value: textbox === null || textbox === void 0 ? void 0 : textbox.value });
91
+ };
92
+ var handleKeyDown = function (event) {
93
+ var textbox = event.target;
94
+ onKeyDown(event, { value: textbox === null || textbox === void 0 ? void 0 : textbox.value });
95
+ };
96
+ var handleInvalid = function (event) {
97
+ var textbox = event.target;
98
+ onInvalid(event, { value: textbox === null || textbox === void 0 ? void 0 : textbox.value });
99
+ };
100
+ var handleButtonClick = function (event) {
101
+ onButtonClick(event, { value: value });
102
+ };
75
103
  react_1.useEffect(function () {
76
104
  if (autoFocus) {
77
105
  handleFocus();
78
106
  }
79
107
  }, []);
80
- var onChangeHandler = function (e) {
81
- var newValue = e.target.value;
108
+ var handleInputChange = function (e) {
109
+ var _a;
110
+ var newValue = (_a = e.target) === null || _a === void 0 ? void 0 : _a.value;
82
111
  if (!isControlled(controlledValue)) {
83
- setValue(newValue);
112
+ setInputValue(newValue);
84
113
  }
85
- onChange(e, newValue);
114
+ onInputChange(e, { value: newValue });
86
115
  };
87
116
  var Input = multiline ? 'textarea' : 'input';
88
117
  var Wrapper = fluid ? 'div' : 'span';
@@ -99,7 +128,11 @@ var EbayTextbox = function (_a) {
99
128
  label,
100
129
  react_1.default.createElement(Wrapper, { className: wrapperClassName },
101
130
  prefixIcon,
102
- react_1.default.createElement(Input, __assign({}, rest, { className: inputClassName, type: type, "aria-invalid": invalid, value: isControlled(controlledValue) ? controlledValue : value, onChange: onChangeHandler, onBlur: handleBlur, onFocus: handleFocus, autoFocus: autoFocus, ref: ref, placeholder: floatingLabelPlaceholder })),
103
- postfixIcon && react_1.cloneElement(postfixIcon, __assign({ onClick: onButtonClick }, postfixIcon.props)))));
131
+ react_1.default.createElement(Input, __assign({}, rest, { className: inputClassName, type: type, "aria-invalid": invalid, value: isControlled(controlledValue) ? controlledValue : inputValue, onChange: handleInputChange, onBlur: handleBlur, onFocus: handleFocus, onKeyPress: handleKeyPress, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onInvalid: handleInvalid, autoFocus: autoFocus, ref: ref, placeholder: floatingLabelPlaceholder })),
132
+ postfixIcon && react_1.cloneElement(postfixIcon, __assign(__assign({}, postfixIcon.props), { onClick: function (e) {
133
+ var _a = postfixIcon.props.onClick, iconClick = _a === void 0 ? function () { } : _a;
134
+ iconClick(e);
135
+ handleButtonClick(e);
136
+ } })))));
104
137
  };
105
138
  exports.default = component_utils_1.withForwardRef(EbayTextbox);
@@ -1,7 +1,7 @@
1
- import { KeyboardEvent, MouseEvent } from 'react';
1
+ import { ComponentProps, KeyboardEvent, MouseEvent } from 'react';
2
2
  import type { Icon } from '../ebay-icon';
3
3
  export declare type Size = 'default' | 'large';
4
- export declare type EbayTextboxIconProps = {
4
+ export declare type EbayTextboxIconProps = ComponentProps<'button'> & ComponentProps<'a'> & {
5
5
  name: Icon;
6
6
  buttonAriaLabel?: string;
7
7
  onClick?: (e: KeyboardEvent | MouseEvent) => void;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAExC,oBAAY,IAAI,GAAG,SAAS,GAAG,OAAO,CAAA;AAEtC,oBAAY,oBAAoB,GAAG;IAC/B,IAAI,EAAE,IAAI,CAAA;IACV,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,GAAG,UAAU,KAAK,IAAI,CAAA;CACpD,CAAA"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAExC,oBAAY,IAAI,GAAG,SAAS,GAAG,OAAO,CAAA;AAEtC,oBAAY,oBAAoB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG;IAChF,IAAI,EAAE,IAAI,CAAA;IACV,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,GAAG,UAAU,KAAK,IAAI,CAAA;CACpD,CAAA"}
@@ -37,14 +37,16 @@ import 'shaka-player/dist/controls.css'
37
37
  | a11yPlayText | String | Yes | a11y text for the play button |
38
38
  | errorText | String | Yes | content for error when an either the library or video cannot load |
39
39
  | reportText | String | Yes | text for report button |
40
- | onLoadError | Callback | No | triggered when there is a load error with video player or source, arguments: (Event) |
41
- | onPlay | Callback | No | triggered when playback starts, arguments: (Event, { player }) |
42
- | onVolumeChange | Callback | No | triggered when volume is changed, arguments: (Event, { volume: number, muted: boolean }) |
43
- | onReport | Callback | No | triggered when report button is clicked, no arguments |
40
+ ## Callbacks
41
+ | Name | Required | Description | Arguments |
42
+ |----------------|----------|------------------------------------------------------------------|---------------------------------------------|
43
+ | onLoadError | No | triggered when there is a load error with video player or source | (Event) |
44
+ | onPlay | No | triggered when playback starts | (Event, { player }) |
45
+ | onVolumeChange | No | triggered when volume is changed | (Event, { volume: number, muted: boolean }) |
46
+ | onReport | No | triggered when report button is clicked | |
44
47
 
45
48
 
46
49
  ## EbayVideoSource Props
47
-
48
50
  | Name | Type | Required | Description |
49
51
  |------|--------|----------|-----------------------------------------------------------------------------------------------------------------|
50
52
  | src | String | Yes | video/playlist URL
@@ -1 +1 @@
1
- {"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../src/ebay-video/controls.tsx"],"names":[],"mappings":"AAKA,wBAAgB,cAAc,CAAC,QAAQ,aAAW,GAAG;IAAE,MAAM,MAAA;CAAE,CAuB9D"}
1
+ {"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../src/ebay-video/controls.tsx"],"names":[],"mappings":"AAKA,wBAAgB,cAAc,CAAC,QAAQ,aAAW,GAAG;IAAE,MAAM,MAAA;CAAE,CA0B9D"}
@@ -28,7 +28,10 @@ function customControls(onReport) {
28
28
  __extends(class_1, _super);
29
29
  function class_1(parent, controls, text) {
30
30
  var _this = _super.call(this, parent, controls) || this;
31
- appendChild(parent, react_1.default.createElement(reportButton_1.ReportButton, { onReport: onReport }, text));
31
+ appendChild(parent, react_1.default.createElement(reportButton_1.ReportButton, null, text), function (button) {
32
+ // have to listen to clicks this way (React onClick will not work):
33
+ _this.eventManager.listen(button, 'click', onReport);
34
+ });
32
35
  return _this;
33
36
  }
34
37
  return class_1;
@@ -45,8 +48,11 @@ function customControls(onReport) {
45
48
  return { Report: Report };
46
49
  }
47
50
  exports.customControls = customControls;
48
- function appendChild(container, reactElement) {
51
+ function appendChild(container, reactElement, callback) {
49
52
  var tempEl = document.createElement('div');
50
- react_dom_1.default.render(reactElement, tempEl);
51
- container.appendChild(tempEl.firstChild);
53
+ react_dom_1.default.render(reactElement, tempEl, function () {
54
+ var child = tempEl.firstChild;
55
+ container.appendChild(child);
56
+ callback(child);
57
+ });
52
58
  }
@@ -1,7 +1,3 @@
1
1
  import { FC } from 'react';
2
- declare type Props = {
3
- onReport: () => void;
4
- };
5
- export declare const ReportButton: FC<Props>;
6
- export {};
2
+ export declare const ReportButton: FC;
7
3
  //# sourceMappingURL=reportButton.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"reportButton.d.ts","sourceRoot":"","sources":["../../src/ebay-video/reportButton.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,aAAK,KAAK,GAAG;IACT,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,KAAK,CAIlC,CAAA"}
1
+ {"version":3,"file":"reportButton.d.ts","sourceRoot":"","sources":["../../src/ebay-video/reportButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjC,eAAO,MAAM,YAAY,EAAE,EAI1B,CAAA"}
@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.ReportButton = void 0;
7
- var ebay_icon_1 = require("../ebay-icon");
8
7
  var react_1 = __importDefault(require("react"));
8
+ var ebay_icon_1 = require("../ebay-icon");
9
9
  exports.ReportButton = function (_a) {
10
- var onReport = _a.onReport, children = _a.children;
11
- return (react_1.default.createElement("button", { className: "video-player__report-button", onClick: onReport },
10
+ var children = _a.children;
11
+ return (react_1.default.createElement("button", { className: "video-player__report-button" },
12
12
  react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "flag24" }),
13
13
  children));
14
14
  };
@@ -1,6 +1,14 @@
1
- import { ComponentProps, FC, SyntheticEvent } from 'react';
1
+ import { ComponentProps, FC, MouseEvent } from 'react';
2
2
  import { VideoAction, VideoPlayView } from './types';
3
- export declare type EbayVideoProps = ComponentProps<'video'> & {
3
+ import { EbayEventHandler } from '../common/event-utils/types';
4
+ export declare type PlayEventProps = {
5
+ player: Player;
6
+ };
7
+ export declare type VolumeChangeProps = {
8
+ volume: number;
9
+ muted: boolean;
10
+ };
11
+ export declare type EbayVideoProps = Omit<ComponentProps<'video'>, 'onPlay' | 'onVolumeChange'> & {
4
12
  width?: number;
5
13
  height?: number;
6
14
  thumbnail?: string;
@@ -18,14 +26,9 @@ export declare type EbayVideoProps = ComponentProps<'video'> & {
18
26
  errorText: string;
19
27
  reportText?: string;
20
28
  onLoadError?: (err: Error) => void;
21
- onPlay?: (e: SyntheticEvent, { player: Player }: {
22
- player: any;
23
- }) => void;
24
- onVolumeChange?: (e: SyntheticEvent, { volume: number, muted: boolean }: {
25
- volume: any;
26
- muted: any;
27
- }) => void;
28
- onReport?: () => void;
29
+ onPlay?: EbayEventHandler<HTMLVideoElement, PlayEventProps>;
30
+ onVolumeChange?: EbayEventHandler<HTMLVideoElement, VolumeChangeProps>;
31
+ onReport?: (event?: MouseEvent<HTMLButtonElement>) => void;
29
32
  };
30
33
  declare const EbayVideo: FC<EbayVideoProps>;
31
34
  export default EbayVideo;
@@ -1 +1 @@
1
- {"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../src/ebay-video/video.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAA;AAO9F,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAKpD,oBAAY,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,CAAC;IAEzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;;KAAA,KAAK,IAAI,CAAC;IACzD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE;;;KAAA,KAAK,IAAI,CAAC;IACjF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAkOjC,CAAA;AAgBD,eAAe,SAAS,CAAA"}
1
+ {"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../src/ebay-video/video.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAkB,UAAU,EAA+B,MAAM,OAAO,CAAA;AAO1G,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAIpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAE9D,oBAAY,cAAc,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;CAClB,CAAA;AACD,oBAAY,iBAAiB,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;CAClB,CAAA;AACD,oBAAY,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC,GAAG;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,CAAC;IAEzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IACvE,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAqOjC,CAAA;AAgBD,eAAe,SAAS,CAAA"}
@@ -182,7 +182,10 @@ var EbayVideo = function (_a) {
182
182
  };
183
183
  var handleVolumeChange = function (e) {
184
184
  var eventTarget = e.currentTarget;
185
- onVolumeChange(e, { volume: eventTarget.volume, muted: eventTarget.muted });
185
+ onVolumeChange(e, {
186
+ volume: Math.round((eventTarget.volume + Number.EPSILON) * 100) / 100,
187
+ muted: eventTarget.muted
188
+ });
186
189
  };
187
190
  var handleOnPause = function () {
188
191
  // On IOS, the controls force showing up if the video exist fullscreen while playing.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ebay/ui-core-react",
3
- "version": "4.2.5",
3
+ "version": "5.0.0",
4
4
  "description": "Skin components build off React",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org"