@ebay/ui-core-react 7.4.0-alpha.9 → 7.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.
Files changed (153) hide show
  1. package/README.md +2 -2
  2. package/array.polyfill.flat-5BAolFdk.js +1 -0
  3. package/badge-CoHKfiPt.js +1 -0
  4. package/button-DGuEBUDJ.js +1 -0
  5. package/calendar-lAu6VfAb.js +1 -0
  6. package/common/component-utils/forwardRef/index.js +1 -10
  7. package/common/component-utils/index.js +1 -9
  8. package/common/component-utils/utils/index.js +1 -25
  9. package/common/event-utils/index.js +1 -113
  10. package/common/floating-label-utils/hooks/index.js +1 -106
  11. package/common/notice-utils/notice-cta/index.js +1 -5
  12. package/common/random-id/index.js +1 -13
  13. package/common/tooltip-utils/constants/index.js +1 -97
  14. package/common/tooltip-utils/index.js +1 -11
  15. package/debounce-BQsYxxOL.js +1 -0
  16. package/dialog-previous-button-CpuFLkQp.js +1 -0
  17. package/drawer-rqXAEeqd.js +1 -0
  18. package/ebay-alert-dialog/index.js +1 -26
  19. package/ebay-badge/index.js +1 -4
  20. package/ebay-breadcrumbs/index.js +1 -47
  21. package/ebay-button/index.js +1 -5
  22. package/ebay-calendar/index.js +1 -4
  23. package/ebay-carousel/index.js +1 -345
  24. package/ebay-checkbox/index.js +1 -52
  25. package/ebay-confirm-dialog/index.js +1 -28
  26. package/ebay-cta-button/index.js +1 -22
  27. package/ebay-date-textbox/index.js +1 -140
  28. package/ebay-dialog-base/components/animation/index.js +1 -92
  29. package/ebay-dialog-base/components/dialog-footer/index.js +1 -4
  30. package/ebay-dialog-base/components/dialog-header/index.js +1 -4
  31. package/ebay-dialog-base/index.js +1 -13
  32. package/ebay-drawer-dialog/index.js +1 -4
  33. package/ebay-eek/index.js +1 -54
  34. package/ebay-fake-menu/index.js +1 -10
  35. package/ebay-fake-menu/menu-item/index.js +1 -49
  36. package/ebay-fake-menu-button/index.js +1 -7
  37. package/ebay-fake-menu-button/menu-button/index.js +1 -12
  38. package/ebay-fake-tabs/index.js +1 -30
  39. package/ebay-field/index.js +1 -21
  40. package/ebay-fullscreen-dialog/index.js +1 -10
  41. package/ebay-icon/index.js +1 -4
  42. package/ebay-icon/types.d.ts +1 -1
  43. package/ebay-icon/types.d.ts.map +1 -1
  44. package/ebay-icon-button/index.js +1 -4
  45. package/ebay-infotip/index.js +1 -76
  46. package/ebay-inline-notice/index.js +1 -36
  47. package/ebay-lightbox-dialog/index.js +1 -12
  48. package/ebay-listbox-button/index.d.ts +2 -1
  49. package/ebay-listbox-button/index.d.ts.map +1 -1
  50. package/ebay-listbox-button/index.js +2 -151
  51. package/ebay-listbox-button/listbox-button-option.d.ts +10 -0
  52. package/ebay-listbox-button/listbox-button-option.d.ts.map +1 -0
  53. package/ebay-listbox-button/listbox-button.d.ts +5 -15
  54. package/ebay-listbox-button/listbox-button.d.ts.map +1 -1
  55. package/ebay-menu/index.js +1 -9
  56. package/ebay-menu-button/index.js +1 -113
  57. package/ebay-notice-base/index.js +1 -7
  58. package/ebay-page-notice/index.js +1 -50
  59. package/ebay-pagination/index.js +1 -244
  60. package/ebay-panel-dialog/index.js +1 -12
  61. package/ebay-progress-bar/index.js +1 -6
  62. package/ebay-progress-spinner/index.js +1 -4
  63. package/ebay-progress-stepper/index.js +1 -72
  64. package/ebay-radio/index.js +1 -4
  65. package/ebay-radio/radio/index.js +1 -48
  66. package/ebay-section-notice/index.js +1 -69
  67. package/ebay-section-title/index.js +1 -38
  68. package/ebay-segmented-buttons/index.js +1 -46
  69. package/ebay-select/index.js +1 -98
  70. package/ebay-signal/index.js +1 -9
  71. package/ebay-snackbar-dialog/index.js +1 -81
  72. package/ebay-split-button/index.js +1 -22
  73. package/ebay-star-rating/index.js +1 -9
  74. package/ebay-star-rating-select/index.js +1 -55
  75. package/ebay-svg/index.js +1 -5189
  76. package/ebay-svg/symbols.d.ts.map +1 -1
  77. package/ebay-switch/index.js +1 -27
  78. package/ebay-tabs/index.js +1 -88
  79. package/ebay-textbox/index.js +1 -10
  80. package/ebay-toast-dialog/index.js +1 -9
  81. package/ebay-toggle-button/README.md +39 -0
  82. package/ebay-toggle-button/index.d.ts +3 -0
  83. package/ebay-toggle-button/index.d.ts.map +1 -0
  84. package/ebay-toggle-button/index.js +1 -0
  85. package/ebay-toggle-button/toggle-button.d.ts +5 -0
  86. package/ebay-toggle-button/toggle-button.d.ts.map +1 -0
  87. package/ebay-toggle-button/types.d.ts +23 -0
  88. package/ebay-toggle-button/types.d.ts.map +1 -0
  89. package/ebay-toggle-button-group/README.md +56 -0
  90. package/ebay-toggle-button-group/index.d.ts +3 -0
  91. package/ebay-toggle-button-group/index.d.ts.map +1 -0
  92. package/ebay-toggle-button-group/index.js +1 -0
  93. package/ebay-toggle-button-group/toggle-button-group.d.ts +5 -0
  94. package/ebay-toggle-button-group/toggle-button-group.d.ts.map +1 -0
  95. package/ebay-toggle-button-group/types.d.ts +20 -0
  96. package/ebay-toggle-button-group/types.d.ts.map +1 -0
  97. package/ebay-tooltip/index.js +1 -64
  98. package/ebay-tourtip/index.js +1 -54
  99. package/ebay-video/index.js +1 -229
  100. package/events/index.js +1 -18
  101. package/icon-TuxfQndO.js +1 -0
  102. package/icon-button-Cwaj-eT9.js +1 -0
  103. package/label-CnrpYJ-g.js +1 -0
  104. package/menu-CV-INYLM.js +1 -0
  105. package/menu-_LzP6yje.js +1 -0
  106. package/menu-button-BZ66jxvI.js +1 -0
  107. package/notice-content-9iF4T8uB.js +1 -0
  108. package/notice-content-C0ZStfuX.js +1 -0
  109. package/notice-footer-Cw1DMzoB.js +1 -0
  110. package/package.json +2 -5
  111. package/progress-spinner-U2qOANON.js +1 -0
  112. package/range-DOsPN0h5.js +1 -0
  113. package/textbox-dUhinDwj.js +1 -0
  114. package/toggle-button-D8l0YB43.js +1 -0
  115. package/use-roving-index-DoAVBgsp.js +1 -0
  116. package/use-tooltip-CL3_zAeg.js +1 -0
  117. package/utils/index.js +1 -13
  118. package/array.polyfill.flat-DyxysTxZ.js +0 -21
  119. package/badge-CR5t7-2L.js +0 -8
  120. package/button-B4bZIgwB.js +0 -83
  121. package/calendar-D-DWjrMU.js +0 -333
  122. package/debounce-v8bWAUnY.js +0 -9
  123. package/dialog-previous-button-EC_Y6KaT.js +0 -370
  124. package/drawer-DBDktEBZ.js +0 -69
  125. package/ebay-listbox/README.md +0 -100
  126. package/ebay-listbox/index.d.ts +0 -4
  127. package/ebay-listbox/index.d.ts.map +0 -1
  128. package/ebay-listbox/index.js +0 -6
  129. package/ebay-listbox/listbox-option-description.d.ts +0 -4
  130. package/ebay-listbox/listbox-option-description.d.ts.map +0 -1
  131. package/ebay-listbox/listbox-option.d.ts +0 -10
  132. package/ebay-listbox/listbox-option.d.ts.map +0 -1
  133. package/ebay-listbox/listbox.d.ts +0 -22
  134. package/ebay-listbox/listbox.d.ts.map +0 -1
  135. package/icon-B17Di3YL.js +0 -56
  136. package/icon-button-BQWoMgX1.js +0 -31
  137. package/index-BXizW4ue.js +0 -89
  138. package/index-DcH7Tjjd.js +0 -272
  139. package/label-C0AS4fnO.js +0 -19
  140. package/listbox-DfOw_fJc.js +0 -662
  141. package/menu-Bsy48CE1.js +0 -163
  142. package/menu-button-CKGsgg6G.js +0 -89
  143. package/menu-fCOy6wBS.js +0 -29
  144. package/notice-content-BTXVxttv.js +0 -8
  145. package/notice-content-BhUeK1pd.js +0 -3
  146. package/notice-footer-CIQ8SM6N.js +0 -10
  147. package/progress-spinner-DOFKRtuu.js +0 -20
  148. package/range-C5qzyhg4.js +0 -3
  149. package/textbox-J291yCpJ.js +0 -136
  150. package/use-roving-index-CEM_UsCH.js +0 -58
  151. package/use-tooltip-7JxcZHJn.js +0 -92
  152. package/utils/scroll.d.ts +0 -2
  153. package/utils/scroll.d.ts.map +0 -1
package/menu-Bsy48CE1.js DELETED
@@ -1,163 +0,0 @@
1
- "use strict";
2
- const React = require("react");
3
- const classNames = require("classnames");
4
- const useRovingIndex = require("./use-roving-index-CEM_UsCH.js");
5
- const common_eventUtils = require("./common/event-utils/index.js");
6
- const common_componentUtils_forwardRef = require("./common/component-utils/forwardRef/index.js");
7
- require("./array.polyfill.flat-DyxysTxZ.js");
8
- const badge = require("./badge-CR5t7-2L.js");
9
- const icon = require("./icon-B17Di3YL.js");
10
- const EbayMenuItem = ({ className, checked, type, focused = false, tabIndex, disabled, badgeNumber, badgeAriaLabel, children, ...rest }) => {
11
- const ref = React.useRef(null);
12
- const hasBadge = badgeNumber !== void 0;
13
- React.useEffect(() => {
14
- if (ref.current && focused) {
15
- ref.current.focus();
16
- }
17
- }, [ref, focused]);
18
- const checkable = ["radio", "checkbox"];
19
- return React.createElement(
20
- "div",
21
- { "aria-label": badgeAriaLabel, ...rest, ref, className: classNames(className, "menu__item", hasBadge && "menu__item--badged"), role: roleFromType(type), "aria-checked": checkable.includes(type) ? checked : void 0, "aria-disabled": disabled, tabIndex: focused ? 0 : tabIndex },
22
- React.createElement(
23
- "span",
24
- { "aria-hidden": hasBadge },
25
- children,
26
- hasBadge && React.createElement(badge.EbayBadge, { type: "menu", number: badgeNumber })
27
- ),
28
- React.createElement(icon.EbayIcon, { name: "tick16" })
29
- );
30
- };
31
- function roleFromType(type) {
32
- const roles = {
33
- radio: "menuitemradio",
34
- checkbox: "menuitemcheckbox"
35
- };
36
- return roles[type] || "menuitem";
37
- }
38
- const EbayMenu = ({ baseEl: Container = "span", type, priority = "secondary", checked, className, autofocus, onClick = () => {
39
- }, onKeyDown = () => {
40
- }, onChange = () => {
41
- }, onSelect = () => {
42
- }, forwardedRef, children, ...rest }) => {
43
- const childrenArray = React.Children.toArray(children);
44
- const [focusedIndex, setFocusedIndex] = useRovingIndex.useRovingIndex(children, EbayMenuItem, autofocus === true ? 0 : void 0);
45
- const [checkedIndexes, setCheckedIndexes] = React.useState(childrenArray.map(() => false));
46
- const valuesFromChecked = (indexes) => childrenArray.reduce((values, item, i) => indexes[i] ? [...values, item.props.value] : values, []);
47
- const indexesFromChecked = (indexes) => indexes.reduce((all, value, i) => value ? [...all, i] : all, []);
48
- const eventProps = (index, indexes) => ({
49
- index,
50
- checked: indexesFromChecked(indexes)
51
- });
52
- const checkboxEventProps = (index, indexes) => ({
53
- ...eventProps(index, indexes),
54
- indexes: indexesFromChecked(indexes),
55
- checkedValues: valuesFromChecked(indexes)
56
- });
57
- const updateIndex = (index, value, resetOthers = false) => {
58
- let anyChanges = false;
59
- const newValues = checkedIndexes.map((indexChecked, i) => {
60
- const defaultValue = resetOthers ? false : indexChecked;
61
- if (index === i) {
62
- if (indexChecked !== value) {
63
- anyChanges = true;
64
- }
65
- return value;
66
- }
67
- return defaultValue;
68
- });
69
- if (anyChanges) {
70
- setCheckedIndexes(newValues);
71
- return newValues;
72
- }
73
- };
74
- const selectIndex = (index) => {
75
- switch (type) {
76
- case "radio":
77
- return updateIndex(index, true, true);
78
- case "checkbox":
79
- return updateIndex(index, !checkedIndexes[index], false);
80
- default:
81
- return checkedIndexes.map((_, i) => i === index);
82
- }
83
- };
84
- React.useEffect(() => {
85
- if (type === "radio") {
86
- if (checked === void 0) {
87
- const checkedIndex = childrenArray.findIndex((child) => child.props.checked);
88
- if (checkedIndex > -1) {
89
- selectIndex(checkedIndex);
90
- }
91
- } else {
92
- selectIndex(checked);
93
- }
94
- } else if (type === "checkbox") {
95
- setCheckedIndexes(childrenArray.map((child) => Boolean(child.props.checked)));
96
- }
97
- }, []);
98
- const handleChange = (e, index, newValues) => {
99
- switch (type) {
100
- case "radio":
101
- case "checkbox":
102
- return onChange(e, checkboxEventProps(index, newValues));
103
- default:
104
- return onSelect(e, eventProps(index, newValues));
105
- }
106
- };
107
- const handleKeyDown = (e, index) => {
108
- let newValues;
109
- if (common_eventUtils.isActionKey(e.key)) {
110
- newValues = selectIndex(index);
111
- if (newValues) {
112
- handleChange(e, index, newValues);
113
- }
114
- }
115
- switch (type) {
116
- case "radio":
117
- case "checkbox":
118
- return onKeyDown(e, checkboxEventProps(index, newValues || checkedIndexes));
119
- default:
120
- return onKeyDown(e, eventProps(index, newValues || checkedIndexes));
121
- }
122
- };
123
- const handleClick = (e, index) => {
124
- setFocusedIndex(index);
125
- const newValues = selectIndex(index);
126
- if (newValues) {
127
- handleChange(e, index, newValues);
128
- }
129
- };
130
- return React.createElement(
131
- Container,
132
- { ...rest, className: classNames(className, "menu") },
133
- React.createElement("div", { className: "menu__items", role: "menu", ref: forwardedRef }, childrenArray.map((child, i) => {
134
- const { onClick: onItemClick = () => {
135
- }, onFocus: onItemFocus = () => {
136
- }, onKeyDown: onItemKeyDown = () => {
137
- }, ...itemRest } = child.props;
138
- return React.cloneElement(child, {
139
- ...itemRest,
140
- type,
141
- focused: i === focusedIndex,
142
- tabIndex: focusedIndex === void 0 ? 0 : -1,
143
- checked: checkedIndexes[i],
144
- onFocus: (e) => {
145
- setFocusedIndex(i);
146
- onItemFocus(e);
147
- },
148
- onClick: (e) => {
149
- handleClick(e, i);
150
- onItemClick(e);
151
- onClick(e);
152
- },
153
- onKeyDown: (e) => {
154
- handleKeyDown(e, i);
155
- onItemKeyDown(e);
156
- }
157
- });
158
- }))
159
- );
160
- };
161
- const EbayMenu$1 = common_componentUtils_forwardRef.withForwardRef(EbayMenu);
162
- exports.EbayMenu = EbayMenu$1;
163
- exports.EbayMenuItem = EbayMenuItem;
@@ -1,89 +0,0 @@
1
- "use strict";
2
- const React = require("react");
3
- const classNames = require("classnames");
4
- const common_componentUtils_utils = require("./common/component-utils/utils/index.js");
5
- const common_eventUtils = require("./common/event-utils/index.js");
6
- const common_randomId = require("./common/random-id/index.js");
7
- const button = require("./button-B4bZIgwB.js");
8
- const icon = require("./icon-B17Di3YL.js");
9
- const iconButton = require("./icon-button-BQWoMgX1.js");
10
- const menu = require("./menu-fCOy6wBS.js");
11
- const ebayFakeMenu_menuItem = require("./ebay-fake-menu/menu-item/index.js");
12
- const EbayFakeMenuButtonItem = ebayFakeMenu_menuItem;
13
- const EbayMenuButtonSeparator = ({ className, ...rest }) => React.createElement("hr", { ...rest, className: classNames(className, "menu-button__separator"), role: "separator" });
14
- const EbayFakeMenuButtonLabel = ({ children }) => React.createElement(React.Fragment, null, children);
15
- const EbayMenuButton = ({ a11yText, noToggleIcon, fixWidth, reverse, variant, expanded: defaultExpanded = false, className, onCollapse = () => {
16
- }, onExpand = () => {
17
- }, onMouseDown = () => {
18
- }, onSelect = () => {
19
- }, text = "", children, ...rest }) => {
20
- const [expanded, setExpanded] = React.useState(defaultExpanded);
21
- const [menuId, setMenuId] = React.useState();
22
- const ref = React.useRef();
23
- const icon$1 = common_componentUtils_utils.findComponent(children, icon.EbayIcon);
24
- const label = common_componentUtils_utils.findComponent(children, EbayFakeMenuButtonLabel) || (icon$1 ? React.createElement("span", null, text) : text);
25
- const menuItems = common_componentUtils_utils.filterByType(children, [EbayFakeMenuButtonItem, EbayMenuButtonSeparator]);
26
- React.useEffect(() => {
27
- const handleBackgroundClick = (e) => {
28
- if (ref.current && !ref.current.contains(e.currentTarget)) {
29
- setExpanded(false);
30
- }
31
- };
32
- if (expanded) {
33
- onExpand();
34
- setTimeout(() => {
35
- document.addEventListener("click", handleBackgroundClick, false);
36
- });
37
- } else if (expanded === false) {
38
- onCollapse();
39
- }
40
- return () => document.removeEventListener("click", handleBackgroundClick, false);
41
- }, [expanded]);
42
- React.useEffect(() => {
43
- setMenuId(common_randomId.randomId());
44
- }, []);
45
- const handleMenuKeydown = (e) => {
46
- common_eventUtils.handleEscapeKeydown(e, () => {
47
- var _a;
48
- setExpanded(false);
49
- (_a = ref.current) == null ? void 0 : _a.focus();
50
- });
51
- };
52
- const menuClasses = classNames("fake-menu-button__menu", {
53
- "menu-button__menu--fix-width": fixWidth,
54
- "menu-button__menu--reverse": reverse
55
- });
56
- const buttonProps = {
57
- ref,
58
- className: "fake-menu-button__button",
59
- "aria-expanded": !!expanded,
60
- "aria-haspopup": true,
61
- "aria-label": a11yText,
62
- "aria-controls": menuId,
63
- onClick: () => setExpanded(!expanded),
64
- ...rest
65
- };
66
- return React.createElement(
67
- "span",
68
- { className: classNames("fake-menu-button", className) },
69
- variant === "overflow" ? React.createElement(iconButton.EbayIconButton, { icon: "overflowHorizontal24", ...buttonProps }) : React.createElement(
70
- button.EbayButton,
71
- { variant: variant === "form" ? "form" : void 0, bodyState: noToggleIcon ? void 0 : "expand", ...buttonProps },
72
- icon$1,
73
- label
74
- ),
75
- expanded && React.createElement(menu.EbayFakeMenu, { className: menuClasses, id: menuId, tabIndex: -1, onKeyDown: handleMenuKeydown, onSelect }, menuItems.map((item, i) => React.cloneElement(item, {
76
- ...item.props,
77
- onMouseDown: (e) => {
78
- onMouseDown(e, { index: i });
79
- },
80
- className: classNames(item.props.className, "fake-menu-button__item"),
81
- key: i,
82
- autoFocus: i === 0
83
- })))
84
- );
85
- };
86
- exports.EbayFakeMenuButtonItem = EbayFakeMenuButtonItem;
87
- exports.EbayFakeMenuButtonLabel = EbayFakeMenuButtonLabel;
88
- exports.EbayMenuButton = EbayMenuButton;
89
- exports.EbayMenuButtonSeparator = EbayMenuButtonSeparator;
package/menu-fCOy6wBS.js DELETED
@@ -1,29 +0,0 @@
1
- "use strict";
2
- const React = require("react");
3
- const classNames = require("classnames");
4
- const EbayFakeMenu = ({ className, itemMatchesUrl = true, onKeyDown = () => {
5
- }, onSelect = () => {
6
- }, children, ...rest }) => {
7
- const childrenArray = React.Children.toArray(children);
8
- const defaultAriaCurrent = itemMatchesUrl === false ? "true" : "page";
9
- return React.createElement(
10
- "div",
11
- { ...rest, className: classNames(className, "fake-menu") },
12
- React.createElement("ul", { className: "fake-menu__items", tabIndex: -1 }, childrenArray.map((child, i) => {
13
- const { current, onClick = () => {
14
- }, ...itemRest } = child.props;
15
- return React.createElement("li", { key: i }, React.cloneElement(child, {
16
- ...itemRest,
17
- "aria-current": current ? defaultAriaCurrent : void 0,
18
- onClick: (e) => {
19
- onSelect(e, { index: i });
20
- onClick(e);
21
- },
22
- onKeyDown: (e) => {
23
- onKeyDown(e, { index: i });
24
- }
25
- }));
26
- }))
27
- );
28
- };
29
- exports.EbayFakeMenu = EbayFakeMenu;
@@ -1,8 +0,0 @@
1
- "use strict";
2
- const React = require("react");
3
- const classNames = require("classnames");
4
- const NoticeContent = ({ className, type, children }) => {
5
- const ContentTag = type === "inline" ? "span" : "div";
6
- return React.createElement(ContentTag, { className: classNames(className, `${type}-notice__main`) }, children);
7
- };
8
- exports.NoticeContent = NoticeContent;
@@ -1,3 +0,0 @@
1
- "use strict";
2
- const EbayNoticeContent = () => null;
3
- exports.EbayNoticeContent = EbayNoticeContent;
@@ -1,10 +0,0 @@
1
- "use strict";
2
- const React = require("react");
3
- const classNames = require("classnames");
4
- const NoticeTitle = ({ className, type, as, children, ...rest }) => {
5
- const HeadingTag = as || `h2`;
6
- return React.createElement(HeadingTag, { className: classNames(className, `${type}-notice__title`), ...rest }, children);
7
- };
8
- const NoticeFooter = ({ className, type, children, ...rest }) => React.createElement("div", { className: classNames(className, `${type}-notice__footer`), ...rest }, children);
9
- exports.NoticeFooter = NoticeFooter;
10
- exports.NoticeTitle = NoticeTitle;
@@ -1,20 +0,0 @@
1
- "use strict";
2
- const React = require("react");
3
- const classNames = require("classnames");
4
- const icon = require("./icon-B17Di3YL.js");
5
- const sizeClass = {
6
- "default": "",
7
- "small": "progress-spinner--small",
8
- "large": "progress-spinner--large"
9
- };
10
- const iconName = {
11
- "default": "spinner24",
12
- "small": "spinner20",
13
- "large": "spinner30"
14
- };
15
- const EbayProgressSpinner = ({ size = "default", "aria-label": ariaLabel = "Busy", className, ...rest }) => React.createElement(
16
- "span",
17
- { ...rest, className: classNames("progress-spinner", sizeClass[size], className), "aria-label": ariaLabel, role: "img" },
18
- React.createElement(icon.EbayIcon, { name: iconName[size] })
19
- );
20
- exports.EbayProgressSpinner = EbayProgressSpinner;
package/range-C5qzyhg4.js DELETED
@@ -1,3 +0,0 @@
1
- "use strict";
2
- const range = (start, stop, step = 1) => Array(Math.ceil((stop + 1 - start) / step)).fill(start).map((x, y) => x + y * step);
3
- exports.range = range;
@@ -1,136 +0,0 @@
1
- "use strict";
2
- const React = require("react");
3
- const classNames = require("classnames");
4
- const common_componentUtils_forwardRef = require("./common/component-utils/forwardRef/index.js");
5
- const common_componentUtils_utils = require("./common/component-utils/utils/index.js");
6
- const icon = require("./icon-B17Di3YL.js");
7
- const iconButton = require("./icon-button-BQWoMgX1.js");
8
- const common_floatingLabelUtils_hooks = require("./common/floating-label-utils/hooks/index.js");
9
- const EbayTextboxPostfixIcon = ({ name, buttonAriaLabel, onClick = () => {
10
- }, ...rest }) => buttonAriaLabel ? React.createElement(iconButton.EbayIconButton, { "aria-label": buttonAriaLabel, icon: name, transparent: true, onClick, ...rest }) : React.createElement(icon.EbayIcon, { name, ...rest });
11
- const EbayTextboxPostfixText = (props) => React.createElement("span", { ...props });
12
- const EbayTextboxPrefixIcon = ({ name, ...rest }) => React.createElement(icon.EbayIcon, { name, ...rest });
13
- const EbayTextboxPrefixText = (props) => React.createElement("span", { ...props });
14
- const isControlled = (value) => typeof value !== "undefined";
15
- const EbayTextbox = ({ type = "text", invalid, fluid, multiline, onChange = () => {
16
- }, onInputChange = () => {
17
- }, onFocus = () => {
18
- }, onBlur = () => {
19
- }, onKeyPress = () => {
20
- }, onKeyUp = () => {
21
- }, onKeyDown = () => {
22
- }, onInvalid = () => {
23
- }, onFloatingLabelInit = () => {
24
- }, onButtonClick = () => {
25
- }, autoFocus, defaultValue = "", value: controlledValue, forwardedRef, inputSize = "default", floatingLabel, children, placeholder, opaqueLabel, ...rest }) => {
26
- var _a, _b;
27
- const [value, setValue] = React.useState(defaultValue);
28
- const [inputValue, setInputValue] = React.useState(defaultValue);
29
- const { label, Container, onBlur: onFloatingLabelBlur, onFocus: onFloatingLabelFocus, ref, placeholder: floatingLabelPlaceholder } = common_floatingLabelUtils_hooks.useFloatingLabel({
30
- ref: forwardedRef,
31
- inputId: rest.id,
32
- className: rest.className,
33
- disabled: rest.disabled,
34
- label: floatingLabel,
35
- inputSize,
36
- inputValue: controlledValue || inputValue,
37
- placeholder,
38
- invalid,
39
- type,
40
- opaqueLabel,
41
- onMount: onFloatingLabelInit
42
- });
43
- const handleFocus = (event) => {
44
- var _a2;
45
- onFocus(event, { value: ((_a2 = event == null ? void 0 : event.target) == null ? void 0 : _a2.value) || defaultValue });
46
- onFloatingLabelFocus();
47
- };
48
- const handleBlur = (event) => {
49
- var _a2;
50
- const newValue = (_a2 = event.target) == null ? void 0 : _a2.value;
51
- onBlur(event, { value: newValue });
52
- if (newValue !== value) {
53
- onChange(event, { value: newValue });
54
- setValue(newValue);
55
- }
56
- onFloatingLabelBlur();
57
- };
58
- const handleKeyPress = (event) => {
59
- const textbox = event.target;
60
- onKeyPress(event, { value: textbox == null ? void 0 : textbox.value });
61
- };
62
- const handleKeyUp = (event) => {
63
- const textbox = event.target;
64
- onKeyUp(event, { value: textbox == null ? void 0 : textbox.value });
65
- };
66
- const handleKeyDown = (event) => {
67
- const textbox = event.target;
68
- onKeyDown(event, { value: textbox == null ? void 0 : textbox.value });
69
- };
70
- const handleInvalid = (event) => {
71
- const textbox = event.target;
72
- onInvalid(event, { value: textbox == null ? void 0 : textbox.value });
73
- };
74
- const handleButtonClick = (event) => {
75
- onButtonClick(event, { value });
76
- };
77
- React.useEffect(() => {
78
- if (autoFocus) {
79
- handleFocus();
80
- }
81
- }, []);
82
- const handleInputChange = (e) => {
83
- var _a2;
84
- const newValue = (_a2 = e.target) == null ? void 0 : _a2.value;
85
- if (!isControlled(controlledValue)) {
86
- setInputValue(newValue);
87
- }
88
- onInputChange(e, { value: newValue });
89
- };
90
- const Input = multiline ? "textarea" : "input";
91
- const Wrapper = fluid ? "div" : "span";
92
- const prefixIcon = common_componentUtils_utils.findComponent(children, EbayTextboxPrefixIcon);
93
- const prefixText = common_componentUtils_utils.findComponent(children, EbayTextboxPrefixText);
94
- const prefixId = (_a = prefixText == null ? void 0 : prefixText.props) == null ? void 0 : _a.id;
95
- const postfixIcon = common_componentUtils_utils.findComponent(children, EbayTextboxPostfixIcon);
96
- const postfixText = common_componentUtils_utils.findComponent(children, EbayTextboxPostfixText);
97
- const postfixId = (_b = postfixText == null ? void 0 : postfixText.props) == null ? void 0 : _b.id;
98
- const wrapperClassName = classNames("textbox", rest.className, {
99
- "textbox--fluid": fluid,
100
- "textbox--large": inputSize === "large",
101
- /** start remove after `:has` support */
102
- "textbox--disabled": rest.disabled,
103
- "textbox--invalid": invalid,
104
- "textbox--readonly": rest.readOnly
105
- /** end remove after `:has` support */
106
- });
107
- return React.createElement(
108
- Container,
109
- null,
110
- label,
111
- React.createElement(
112
- Wrapper,
113
- { className: wrapperClassName },
114
- prefixIcon,
115
- prefixText,
116
- React.createElement(Input, { "aria-describedby": [prefixId, postfixId].filter(Boolean).join(" ") || void 0, ...rest, className: "textbox__control", type, "aria-invalid": invalid, value: isControlled(controlledValue) ? controlledValue : inputValue, onChange: handleInputChange, onBlur: handleBlur, onFocus: handleFocus, onKeyPress: handleKeyPress, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onInvalid: handleInvalid, autoFocus, ref, placeholder: floatingLabelPlaceholder }),
117
- postfixText,
118
- postfixIcon && React.cloneElement(postfixIcon, {
119
- ...postfixIcon.props,
120
- onClick: (e) => {
121
- const { onClick: iconClick = () => {
122
- } } = postfixIcon.props;
123
- iconClick(e);
124
- handleButtonClick(e);
125
- }
126
- })
127
- )
128
- );
129
- };
130
- const EbayTextbox$1 = common_componentUtils_forwardRef.withForwardRef(EbayTextbox);
131
- exports.EbayTextbox = EbayTextbox$1;
132
- exports.EbayTextboxPostfixIcon = EbayTextboxPostfixIcon;
133
- exports.EbayTextboxPostfixText = EbayTextboxPostfixText;
134
- exports.EbayTextboxPrefixIcon = EbayTextboxPrefixIcon;
135
- exports.EbayTextboxPrefixText = EbayTextboxPrefixText;
136
- exports.isControlled = isControlled;
@@ -1,58 +0,0 @@
1
- "use strict";
2
- const React = require("react");
3
- const useKeyPress = () => {
4
- const [arrowUpPressed, setArrowUpPressed] = React.useState(false);
5
- const [arrowDownPressed, setArrowDownPressed] = React.useState(false);
6
- const upHandler = ({ key }) => {
7
- const fn = {
8
- ArrowUp: setArrowUpPressed,
9
- ArrowDown: setArrowDownPressed
10
- }[key];
11
- if (fn)
12
- fn(false);
13
- };
14
- const downHandler = ({ key }) => {
15
- const fn = {
16
- ArrowUp: setArrowUpPressed,
17
- ArrowDown: setArrowDownPressed
18
- }[key];
19
- if (fn)
20
- fn(true);
21
- };
22
- React.useEffect(() => {
23
- window.addEventListener("keydown", downHandler);
24
- window.addEventListener("keyup", upHandler);
25
- return () => {
26
- window.removeEventListener("keydown", downHandler);
27
- window.removeEventListener("keyup", upHandler);
28
- };
29
- }, []);
30
- return [arrowUpPressed, arrowDownPressed];
31
- };
32
- const useRovingIndex = (children, FocusableType, defaultValue) => {
33
- const [rovingIndex, setRovingIndex] = React.useState(defaultValue);
34
- const [arrowUpPressed, arrowDownPressed] = useKeyPress();
35
- const rovingIndexArray = React.Children.toArray(children).reduce((focusables, child, i) => child.type === FocusableType ? [...focusables, i] : focusables, []);
36
- const currentIndex = rovingIndexArray.indexOf(rovingIndex);
37
- const previousOrCurrent = () => {
38
- if (currentIndex === -1)
39
- return rovingIndex;
40
- const previousRovingIndex = rovingIndexArray[currentIndex - 1];
41
- return previousRovingIndex === void 0 ? rovingIndex : previousRovingIndex;
42
- };
43
- const nextOrCurrent = () => {
44
- if (currentIndex === -1)
45
- return rovingIndex;
46
- const nextRovingIndex = rovingIndexArray[currentIndex + 1];
47
- return nextRovingIndex === void 0 ? rovingIndex : nextRovingIndex;
48
- };
49
- React.useEffect(() => {
50
- if (arrowUpPressed)
51
- setRovingIndex(previousOrCurrent());
52
- if (arrowDownPressed)
53
- setRovingIndex(nextOrCurrent());
54
- }, [arrowUpPressed, arrowDownPressed]);
55
- return [rovingIndex, setRovingIndex];
56
- };
57
- exports.useKeyPress = useKeyPress;
58
- exports.useRovingIndex = useRovingIndex;
@@ -1,92 +0,0 @@
1
- "use strict";
2
- const React = require("react");
3
- const classNames = require("classnames");
4
- const common_componentUtils_forwardRef = require("./common/component-utils/forwardRef/index.js");
5
- const common_componentUtils_utils = require("./common/component-utils/utils/index.js");
6
- const icon = require("./icon-B17Di3YL.js");
7
- const common_tooltipUtils_constants = require("./common/tooltip-utils/constants/index.js");
8
- const TooltipHost = ({ children, className, forwardedRef, ...rest }) => {
9
- React.Children.only(children);
10
- return React.cloneElement(children, {
11
- ref: forwardedRef,
12
- ...rest,
13
- className: classNames(className, children.props.className)
14
- });
15
- };
16
- const Tooltip = ({ className, type, isExpanded, children, forwardedRef, ...rest }) => {
17
- var _a;
18
- const originalHostComponent = common_componentUtils_utils.findComponent(children, TooltipHost);
19
- const content = common_componentUtils_utils.excludeComponent(children, TooltipHost)[0];
20
- if (!originalHostComponent) {
21
- throw new Error(`Tooltip: Please use a TooltipHost that defines the host of the tooltip`);
22
- }
23
- const host = React.cloneElement(originalHostComponent, {
24
- className: `${type}__host`,
25
- "aria-expanded": isExpanded,
26
- "aria-describedby": (_a = content == null ? void 0 : content.props) == null ? void 0 : _a.id,
27
- ...originalHostComponent.props
28
- });
29
- return React.createElement(
30
- "span",
31
- { ...rest, ref: forwardedRef, className: classNames(className, type, {
32
- [`${type}--expanded`]: isExpanded
33
- }) },
34
- host,
35
- content
36
- );
37
- };
38
- const Tooltip$1 = common_componentUtils_forwardRef.withForwardRef(Tooltip);
39
- const TooltipCloseButton = () => null;
40
- const TooltipFooter = ({ children, className, type = "tourtip" }) => React.createElement("div", { className: classNames(`${type}__footer`, className) }, children);
41
- const TooltipContent = ({ id, style, pointer = common_tooltipUtils_constants.DEFAULT_POINTER_DIRECTION, children, type = "tooltip", showCloseButton, a11yCloseText, onClose }) => {
42
- const closeButton = common_componentUtils_utils.findComponent(children, TooltipCloseButton);
43
- const footer = common_componentUtils_utils.findComponent(children, TooltipFooter);
44
- const allChildrenExceptFooter = common_componentUtils_utils.excludeComponent(children, TooltipFooter);
45
- return React.createElement(
46
- "span",
47
- { className: `${type}__overlay`, id, role: common_tooltipUtils_constants.TYPE_ROLES[type] || null, style: { ...common_tooltipUtils_constants.POINTER_STYLES[pointer], ...style } },
48
- React.createElement("span", { className: `${type}__pointer ${type}__pointer--${pointer}` }),
49
- React.createElement(
50
- "span",
51
- { className: `${type}__mask` },
52
- React.createElement(
53
- "span",
54
- { className: `${type}__cell` },
55
- React.createElement("span", { className: `${type}__content` }, allChildrenExceptFooter),
56
- showCloseButton ? React.createElement(
57
- "button",
58
- { ...closeButton == null ? void 0 : closeButton.props, className: `icon-btn icon-btn--transparent ${type}__close`, type: "button", "aria-label": a11yCloseText, onClick: onClose },
59
- React.createElement(icon.EbayIcon, { name: "close16" })
60
- ) : null,
61
- footer
62
- )
63
- )
64
- );
65
- };
66
- const useTooltip = ({ onExpand, onCollapse, initialExpanded = false, hostRef }) => {
67
- const [isExpanded, setIsExpanded] = React.useState(initialExpanded);
68
- const expandTooltip = () => {
69
- setIsExpanded(true);
70
- if (onExpand) {
71
- onExpand();
72
- }
73
- };
74
- const collapseTooltip = () => {
75
- var _a;
76
- setIsExpanded(false);
77
- if (onCollapse) {
78
- onCollapse();
79
- }
80
- (_a = hostRef == null ? void 0 : hostRef.current) == null ? void 0 : _a.focus();
81
- };
82
- return {
83
- isExpanded,
84
- expandTooltip,
85
- collapseTooltip
86
- };
87
- };
88
- exports.Tooltip = Tooltip$1;
89
- exports.TooltipContent = TooltipContent;
90
- exports.TooltipFooter = TooltipFooter;
91
- exports.TooltipHost = TooltipHost;
92
- exports.useTooltip = useTooltip;
package/utils/scroll.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export declare function scroll(el?: HTMLElement): void;
2
- //# sourceMappingURL=scroll.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../src/utils/scroll.ts"],"names":[],"mappings":"AAAA,wBAAgB,MAAM,CAAC,EAAE,CAAC,EAAE,WAAW,GAAG,IAAI,CAc7C"}