@ebay/ui-core-react 7.4.0-alpha.8 → 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 -21
  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-DGbY99kq.js +0 -674
  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
@@ -1 +1 @@
1
- {"version":3,"file":"symbols.d.ts","sourceRoot":"","sources":["../../src/ebay-svg/symbols.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,OAAO,qBA+yBnB,CAAA"}
1
+ {"version":3,"file":"symbols.d.ts","sourceRoot":"","sources":["../../src/ebay-svg/symbols.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,OAAO,qBAk0BnB,CAAA"}
@@ -1,27 +1 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const React = require("react");
4
- const classNames = require("classnames");
5
- const isControlled = (checked) => typeof checked !== "undefined";
6
- const EbaySwitch = ({ id, value, name, className, checked, defaultChecked = false, onChange = () => {
7
- }, ...rest }) => {
8
- const [isChecked, setChecked] = React.useState(defaultChecked);
9
- React.useEffect(() => {
10
- setChecked(!!checked);
11
- }, [checked]);
12
- const handleChange = (e) => {
13
- const { value: inputValue = "", checked: inputChecked = false } = e.target || {};
14
- onChange(e, {
15
- value: inputValue,
16
- checked: inputChecked
17
- });
18
- setChecked(inputChecked);
19
- };
20
- return React.createElement(
21
- "span",
22
- { className: "switch" },
23
- React.createElement("input", { ...rest, className: classNames("switch__control", className), id, role: "switch", type: "checkbox", value, "aria-checked": isControlled(checked) ? checked : isChecked, checked: isControlled(checked) ? checked : isChecked, name, onChange: handleChange }),
24
- React.createElement("span", { className: "switch__button" })
25
- );
26
- };
27
- exports.EbaySwitch = EbaySwitch;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),b=require("classnames"),o=s=>typeof s<"u",w=({id:s,value:i,name:r,className:u,checked:e,defaultChecked:h=!1,onChange:d=()=>{},...m})=>{const[a,c]=t.useState(h);t.useEffect(()=>{c(!!e)},[e]);const p=n=>{const{value:f="",checked:l=!1}=n.target||{};d(n,{value:f,checked:l}),c(l)};return t.createElement("span",{className:"switch"},t.createElement("input",{...m,className:b("switch__control",u),id:s,role:"switch",type:"checkbox",value:i,"aria-checked":o(e)?e:a,checked:o(e)?e:a,name:r,onChange:p}),t.createElement("span",{className:"switch__button"}))};exports.EbaySwitch=w;
@@ -1,88 +1 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const React = require("react");
4
- const classNames = require("classnames");
5
- const common_eventUtils = require("../common/event-utils/index.js");
6
- const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
7
- const Tab = ({ children, index, parentId, selected, focused, className, refCallback, ...rest }) => React.createElement(
8
- "div",
9
- { ...rest, ref: refCallback, "aria-controls": `${parentId || "default"}-tabpanel-${index}`, "aria-selected": selected, className: classNames(className, "tabs__item"), id: `${parentId || "default"}-tab-${index}`, role: "tab", tabIndex: focused ? 0 : -1 },
10
- React.createElement("span", null, children)
11
- );
12
- const TabPanel = ({ children, index, parentId, selected, className, ...rest }) => React.createElement(
13
- "div",
14
- { ...rest, "aria-labelledby": `default-tab-${index}`, className: classNames(className, "tabs__panel"), id: `${parentId || "default"}-tabpanel-${index}`, role: "tabpanel", hidden: !selected },
15
- React.createElement("div", { className: "tabs__cell" }, children)
16
- );
17
- const Tabs = ({ id, className, index = 0, size = "medium", activation = "auto", onSelect = () => {
18
- }, onTabSelect = () => {
19
- }, children }) => {
20
- const headings = [];
21
- const [selectedIndex, setSelectedIndex] = React.useState(index);
22
- const [focusedIndex, setFocusedIndex] = React.useState(index);
23
- const handleSelect = (i) => {
24
- onSelect({ selectedIndex: i });
25
- onTabSelect(i);
26
- setSelectedIndex(i);
27
- };
28
- const onKeyDown = (ev, i) => {
29
- common_eventUtils.handleActionKeydown(ev, () => {
30
- ev.preventDefault();
31
- if (activation === "manual") {
32
- handleSelect(i);
33
- }
34
- });
35
- common_eventUtils.handleLeftRightArrowsKeydown(ev, () => {
36
- var _a;
37
- ev.preventDefault();
38
- const len = common_componentUtils_utils.filterByType(children, Tab).length;
39
- const direction = ["Left", "ArrowLeft"].includes(ev.key) ? -1 : 1;
40
- const currentIndex = focusedIndex === void 0 ? selectedIndex : focusedIndex;
41
- const nextIndex = (currentIndex + len + direction) % len;
42
- setFocusedIndex(nextIndex);
43
- (_a = headings[nextIndex]) == null ? void 0 : _a.focus();
44
- if (activation !== "manual") {
45
- handleSelect(nextIndex);
46
- }
47
- });
48
- };
49
- React.useEffect(() => {
50
- handleSelect(index);
51
- }, [index]);
52
- const isLarge = size === "large";
53
- const tabHeadings = common_componentUtils_utils.filterByType(children, Tab).map((item, i) => React.cloneElement(item, {
54
- ...item.props,
55
- refCallback: (ref) => {
56
- headings[i] = ref;
57
- },
58
- index: i,
59
- parentId: id,
60
- selected: selectedIndex === i,
61
- focused: focusedIndex === i,
62
- onClick: () => {
63
- handleSelect(i);
64
- setFocusedIndex(i);
65
- },
66
- onKeyDown: (e) => {
67
- onKeyDown(e, i);
68
- }
69
- }));
70
- const tabPanels = common_componentUtils_utils.filterByType(children, TabPanel).map((item, i) => {
71
- const itemProps = {
72
- index: i,
73
- parentId: id,
74
- selected: selectedIndex === i,
75
- children: item.props.children
76
- };
77
- return React.cloneElement(item, itemProps);
78
- });
79
- return React.createElement(
80
- "div",
81
- { id, className: classNames(className, "tabs") },
82
- React.createElement("div", { className: classNames("tabs__items", { "tabs__items--large": isLarge }), role: "tablist" }, tabHeadings),
83
- React.createElement("div", { className: "tabs__content" }, tabPanels)
84
- );
85
- };
86
- exports.EbayTab = Tab;
87
- exports.EbayTabPanel = TabPanel;
88
- exports.EbayTabs = Tabs;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),m=require("classnames"),h=require("../common/event-utils/index.js"),_=require("../common/component-utils/utils/index.js"),E=({children:l,index:c,parentId:n,selected:r,focused:o,className:d,refCallback:i,...b})=>a.createElement("div",{...b,ref:i,"aria-controls":`${n||"default"}-tabpanel-${c}`,"aria-selected":r,className:m(d,"tabs__item"),id:`${n||"default"}-tab-${c}`,role:"tab",tabIndex:o?0:-1},a.createElement("span",null,l)),x=({children:l,index:c,parentId:n,selected:r,className:o,...d})=>a.createElement("div",{...d,"aria-labelledby":`default-tab-${c}`,className:m(o,"tabs__panel"),id:`${n||"default"}-tabpanel-${c}`,role:"tabpanel",hidden:!r},a.createElement("div",{className:"tabs__cell"},l)),q=({id:l,className:c,index:n=0,size:r="medium",activation:o="auto",onSelect:d=()=>{},onTabSelect:i=()=>{},children:b})=>{const I=[],[f,N]=a.useState(n),[p,T]=a.useState(n),u=e=>{d({selectedIndex:e}),i(e),N(e)},$=(e,t)=>{h.handleActionKeydown(e,()=>{e.preventDefault(),o==="manual"&&u(t)}),h.handleLeftRightArrowsKeydown(e,()=>{var g;e.preventDefault();const s=_.filterByType(b,E).length,P=["Left","ArrowLeft"].includes(e.key)?-1:1,y=((p===void 0?f:p)+s+P)%s;T(y),(g=I[y])==null||g.focus(),o!=="manual"&&u(y)})};a.useEffect(()=>{u(n)},[n]);const v=r==="large",w=_.filterByType(b,E).map((e,t)=>a.cloneElement(e,{...e.props,refCallback:s=>{I[t]=s},index:t,parentId:l,selected:f===t,focused:p===t,onClick:()=>{u(t),T(t)},onKeyDown:s=>{$(s,t)}})),S=_.filterByType(b,x).map((e,t)=>{const s={index:t,parentId:l,selected:f===t,children:e.props.children};return a.cloneElement(e,s)});return a.createElement("div",{id:l,className:m(c,"tabs")},a.createElement("div",{className:m("tabs__items",{"tabs__items--large":v}),role:"tablist"},w),a.createElement("div",{className:"tabs__content"},S))};exports.EbayTab=E;exports.EbayTabPanel=x;exports.EbayTabs=q;
@@ -1,10 +1 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const textbox = require("../textbox-J291yCpJ.js");
4
- const common_floatingLabelUtils_hooks = require("../common/floating-label-utils/hooks/index.js");
5
- exports.EbayTextbox = textbox.EbayTextbox;
6
- exports.EbayTextboxPostfixIcon = textbox.EbayTextboxPostfixIcon;
7
- exports.EbayTextboxPostfixText = textbox.EbayTextboxPostfixText;
8
- exports.EbayTextboxPrefixIcon = textbox.EbayTextboxPrefixIcon;
9
- exports.EbayTextboxPrefixText = textbox.EbayTextboxPrefixText;
10
- exports.useFloatingLabel = common_floatingLabelUtils_hooks.useFloatingLabel;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../textbox-dUhinDwj.js"),x=require("../common/floating-label-utils/hooks/index.js");exports.EbayTextbox=e.EbayTextbox;exports.EbayTextboxPostfixIcon=e.EbayTextboxPostfixIcon;exports.EbayTextboxPostfixText=e.EbayTextboxPostfixText;exports.EbayTextboxPrefixIcon=e.EbayTextboxPrefixIcon;exports.EbayTextboxPrefixText=e.EbayTextboxPrefixText;exports.useFloatingLabel=x.useFloatingLabel;
@@ -1,9 +1 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const React = require("react");
4
- const classNames = require("classnames");
5
- const dialogPreviousButton = require("../dialog-previous-button-EC_Y6KaT.js");
6
- require("../icon-button-BQWoMgX1.js");
7
- const EbayToast = ({ className, onClose = () => {
8
- }, ...rest }) => React.createElement(dialogPreviousButton.DialogBaseWithState, { ...rest, isModal: false, baseEl: "aside", classPrefix: "toast-dialog", buttonPosition: "right", transitionElement: "root", className: classNames(className, "toast-dialog--transition"), onCloseBtnClick: onClose });
9
- exports.EbayToast = EbayToast;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),s=require("classnames"),i=require("../dialog-previous-button-CpuFLkQp.js");require("../icon-button-Cwaj-eT9.js");const r=({className:t,onClose:e=()=>{},...o})=>a.createElement(i.DialogBaseWithState,{...o,isModal:!1,baseEl:"aside",classPrefix:"toast-dialog",buttonPosition:"right",transitionElement:"root",className:s(t,"toast-dialog--transition"),onCloseBtnClick:e});exports.EbayToast=r;
@@ -0,0 +1,39 @@
1
+ # EbayToggleButton
2
+
3
+ ## Demo
4
+
5
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/buttons-ebay-toggle-button--docs)
6
+
7
+ ## Install
8
+
9
+ ```
10
+ yarn add @ebay/ui-core-react @ebay/skin
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ ```
16
+ import React from 'react'
17
+ import { EbayToggleButton } from '@ebay/ui-core-react/ebay-toggle-button'
18
+ import '@ebay/skin/toggle-button'
19
+
20
+ export const Example = () => (
21
+ <EbayToggleButton
22
+ pressed={isPressed}
23
+ onToggle={() => setIsPressed(!isPressed)}
24
+ title='Button 1'
25
+ subtitle='subtitle'
26
+ ></EbayToggleButton>
27
+ ```
28
+
29
+ ## EbayToggleButton Props
30
+
31
+ | Name | Type | Required | Description |
32
+ | ------------ | -------- | -------- | ---------------------------------------------------------------- |
33
+ | `layoutType` | enum | No | Can be `minimal` (default), `list` or `gallery` |
34
+ | `title` | string | No | Title attribute for the button |
35
+ | `subtitle` | string | No | Subtitle attribute for the button |
36
+ | `pressed` | boolean | Yes | Pressed state of the button |
37
+ | `icon` | enum | No | EbayIcon name |
38
+ | `img` | object | No | Image obj for the component |
39
+ | `onToggle` | Function | No | Triggered when the button is toggled: { originalEvent, pressed } |
@@ -0,0 +1,3 @@
1
+ export { default as EbayToggleButton } from './toggle-button';
2
+ export type { ToggleButtonProps, ToggleButtonEvent } from './types';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-toggle-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAC7D,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA"}
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../toggle-button-D8l0YB43.js");exports.EbayToggleButton=t.ToggleButton;
@@ -0,0 +1,5 @@
1
+ import { FC } from 'react';
2
+ import { ToggleButtonProps } from './types';
3
+ declare const ToggleButton: FC<ToggleButtonProps>;
4
+ export default ToggleButton;
5
+ //# sourceMappingURL=toggle-button.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../src/ebay-toggle-button/toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAc,MAAM,OAAO,CAAA;AAG7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAE3C,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAiFvC,CAAA;AAED,eAAe,YAAY,CAAA"}
@@ -0,0 +1,23 @@
1
+ import { ComponentProps } from 'react';
2
+ import { EbayMouseEventHandler } from '../common/event-utils/types';
3
+ import { Icon } from '../ebay-icon/types';
4
+ type PressedEventData = {
5
+ pressed: boolean;
6
+ };
7
+ export type ToggleButtonEvent = EbayMouseEventHandler<HTMLButtonElement, PressedEventData>;
8
+ export type ToggleButtonImge = {
9
+ src: string;
10
+ alt: string;
11
+ fillPlacement?: string;
12
+ };
13
+ export type ToggleButtonProps = Omit<ComponentProps<'button'>, 'onClick'> & {
14
+ pressed?: boolean;
15
+ title?: string;
16
+ subtitle?: string | string[];
17
+ layoutType?: 'minimal' | 'list' | 'gallery';
18
+ icon?: Icon;
19
+ img?: ToggleButtonImge;
20
+ onToggle?: ToggleButtonEvent;
21
+ };
22
+ export {};
23
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-toggle-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAEzC,KAAK,gBAAgB,GAAG;IACpB,OAAO,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CACjD,iBAAiB,EACjB,gBAAgB,CACnB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,aAAa,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,GAAG;IACxE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC5B,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;IAC3C,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,QAAQ,CAAC,EAAE,iBAAiB,CAAA;CAC/B,CAAA"}
@@ -0,0 +1,56 @@
1
+ # EbayToggleButtonGroup
2
+
3
+ ## Demo
4
+
5
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/buttons-ebay-toggle-button-group--docs)
6
+
7
+ ## Install
8
+
9
+ ```
10
+ yarn add @ebay/ui-core-react @ebay/skin
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ ```
16
+ import React from 'react'
17
+ import { EbayToggleButton } from '@ebay/ui-core-react/ebay-toggle-button'
18
+ import { EbayToggleButtonGroup } from '@ebay/ui-core-react/ebay-toggle-button-group'
19
+ import '@ebay/skin/toggle-button-group'
20
+
21
+ export const Example = () => (
22
+ <EbayToggleButtonGroup onChange={action('change')} {...args}>
23
+ <EbayToggleButton pressed title="Button1" />
24
+ <EbayToggleButton>Child Button</EbayToggleButton>
25
+ <EbayToggleButton title="Button2" subtitle="subtitle" />
26
+ <EbayToggleButton
27
+ icon="settings24"
28
+ title="Button3"
29
+ subtitle="subtitle"
30
+ ></EbayToggleButton>
31
+ <EbayToggleButton
32
+ title="Button4"
33
+ subtitle="subtitle"
34
+ img={{
35
+ src: 'https://cloudfront.slrlounge.com/wp-content/uploads/2012/07/01-SLRLounge-Holding-Standing-Wrong.jpg',
36
+ alt: 'image alt'
37
+ }}
38
+ ></EbayToggleButton>
39
+ </EbayToggleButtonGroup>
40
+ );
41
+ ```
42
+
43
+ ## EbayToggleButtonGroup Props
44
+
45
+ | Name | Type | Required | Description |
46
+ | ------------ | -------- | -------- | -------------------------------------------------------------------------------------- |
47
+ | `variant` | enum | No | Can be `checkbox` (default), `radio` or `radio-toggle` |
48
+ | `layoutType` | enum | No | Can be `minimal` (default), `list` or `gallery` |
49
+ | `a11yText` | string | No | Accessibility text for the group. Cannot be used together with `a11yLabelId` |
50
+ | `a11yLabelId`| string | No | Required for a11y compliance. Cannot be used together with a11yText |
51
+ | `columnsMin` | number | No | Preferred minimum number of columns for smallest container/screen (1-3) |
52
+ | `columnsXS` | number | No | Preferred minimum number of columns within extra small containers. |
53
+ | `columnsSM` | number | No | Preferred minimum number of columns within small containers. |
54
+ | `columnsMD` | number | No | Preferred minimum number of columns within medium containers. |
55
+ | `columnsXL` | number | No | Preferred minimum number of columns within extra large containers. |
56
+ | `onChange` | Function | No | Triggered when the pressed state changes: { originalEvent, pressed } |
@@ -0,0 +1,3 @@
1
+ export { default as EbayToggleButtonGroup } from './toggle-button-group';
2
+ export type { ToggleButtonGroupProps } from './types';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-toggle-button-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AACxE,YAAY,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA"}
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),P=require("classnames"),h=require("../common/component-utils/utils/index.js"),w=require("../toggle-button-D8l0YB43.js"),G=({a11yText:u,a11yLabelId:c,layoutType:m="minimal",variant:r="checkbox",children:g,columnsMin:d,columnsXS:i,columnsSM:b,columnsMD:p,columnsXL:B,onChange:a,className:y,...k})=>{const n=h.filterByType(g,w.ToggleButton),T=()=>n.reduce((s,e,t)=>(s[t]=e.props.pressed||!1,s),{}),[E,f]=l.useState(T),q=l.useCallback((s,e)=>{f(t=>{let o={};switch(r){case"checkbox":o={...t},o[e]=!t[e];break;case"radio-toggle":o[e]=!t[e];break;case"radio":o[e]=!0;break}return a&&a(s,{pressedButtonsIndex:o}),o})},[r,a]);return l.createElement("div",{className:P(y,"toggle-button-group"),"data-columns-min":d,"data-columns-xs":i,"data-columns-sm":b,"data-columns-md":p,"data-columns-xl":B,...k},l.createElement("ul",{"aria-label":u,"aria-labelledby":c},n.map((s,e)=>l.createElement("li",{key:e},l.cloneElement(s,{layoutType:m,pressed:E[e],onToggle:t=>{q(t,e)}})))))};exports.EbayToggleButtonGroup=G;
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import { ToggleButtonGroupProps } from './types';
3
+ declare const EbayToggleButtonGroup: React.FC<ToggleButtonGroupProps>;
4
+ export default EbayToggleButtonGroup;
5
+ //# sourceMappingURL=toggle-button-group.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../src/ebay-toggle-button-group/toggle-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAMhF,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAEhD,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgF3D,CAAA;AAED,eAAe,qBAAqB,CAAA"}
@@ -0,0 +1,20 @@
1
+ import { ComponentProps } from 'react';
2
+ import { EbayMouseEventHandler } from '../common/event-utils/types';
3
+ type PressedGroupEventData = {
4
+ pressedButtonsIndex: Record<number, boolean>;
5
+ };
6
+ export type ToggleButtonGroupEvent = EbayMouseEventHandler<HTMLButtonElement, PressedGroupEventData>;
7
+ export type ToggleButtonGroupProps = Omit<ComponentProps<'div'>, 'onChange'> & {
8
+ a11yText?: string;
9
+ a11yLabelId?: string;
10
+ variant?: 'checkbox' | 'radio' | 'radio-toggle';
11
+ layoutType?: 'minimal' | 'list' | 'gallery';
12
+ columnsMin?: number;
13
+ columnsXS?: number;
14
+ columnsSM?: number;
15
+ columnsMD?: number;
16
+ columnsXL?: number;
17
+ onChange?: ToggleButtonGroupEvent;
18
+ };
19
+ export {};
20
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-toggle-button-group/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAEnE,KAAK,qBAAqB,GAAG;IACzB,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAC/C,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,CACtD,iBAAiB,EACjB,qBAAqB,CACxB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,cAAc,CAAA;IAC/C,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,sBAAsB,CAAA;CACpC,CAAA"}
@@ -1,64 +1 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const React = require("react");
4
- const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
5
- const useTooltip = require("../use-tooltip-7JxcZHJn.js");
6
- require("classnames");
7
- require("../icon-B17Di3YL.js");
8
- require("../array.polyfill.flat-DyxysTxZ.js");
9
- const common_tooltipUtils_constants = require("../common/tooltip-utils/constants/index.js");
10
- const EbayTooltipContent = () => null;
11
- const EbayTooltipHost = () => null;
12
- const EbayTooltip = ({ className, pointer, overlayStyle, noHover, onFocus = () => {
13
- }, onBlur = () => {
14
- }, onMouseEnter = () => {
15
- }, onMouseLeave = () => {
16
- }, onExpand, onCollapse, children, ...rest }) => {
17
- const { isExpanded, expandTooltip, collapseTooltip } = useTooltip.useTooltip({ onCollapse, onExpand });
18
- const timeoutRef = React.useRef();
19
- const handleOnMouseEnter = (event) => {
20
- onMouseEnter(event);
21
- if (!noHover) {
22
- clearTimeout(timeoutRef.current);
23
- expandTooltip();
24
- }
25
- };
26
- const handleOnMouseLeave = (event) => {
27
- onMouseLeave(event);
28
- if (!noHover) {
29
- clearTimeout(timeoutRef.current);
30
- timeoutRef.current = setTimeout(() => {
31
- collapseTooltip();
32
- }, 300);
33
- }
34
- };
35
- const handleOnFocus = (event) => {
36
- onFocus(event);
37
- expandTooltip();
38
- };
39
- const handleOnBlur = (event) => {
40
- onBlur(event);
41
- collapseTooltip();
42
- };
43
- const content = common_componentUtils_utils.findComponent(children, EbayTooltipContent);
44
- const host = common_componentUtils_utils.findComponent(children, EbayTooltipHost);
45
- if (!host) {
46
- throw new Error(`EbayTooltip: Please use a EbayTooltipHost that defines the host of the tooltip`);
47
- }
48
- if (!content) {
49
- throw new Error(`EbayTooltip: Please use a EbayTooltipContent that defines the content of the tooltip`);
50
- }
51
- return React.createElement(
52
- useTooltip.Tooltip,
53
- { ...rest, className, type: "tooltip", isExpanded, onFocus: handleOnFocus, onBlur: handleOnBlur, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave },
54
- React.createElement(useTooltip.TooltipHost, { ...host.props }),
55
- React.createElement(useTooltip.TooltipContent, { ...content.props, type: "tooltip", style: overlayStyle, pointer })
56
- );
57
- };
58
- exports.Tooltip = useTooltip.Tooltip;
59
- exports.TooltipFooter = useTooltip.TooltipFooter;
60
- exports.DEFAULT_POINTER_DIRECTION = common_tooltipUtils_constants.DEFAULT_POINTER_DIRECTION;
61
- exports.POINTER_STYLES = common_tooltipUtils_constants.POINTER_STYLES;
62
- exports.EbayTooltip = EbayTooltip;
63
- exports.EbayTooltipContent = EbayTooltipContent;
64
- exports.EbayTooltipHost = EbayTooltipHost;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),a=require("../common/component-utils/utils/index.js"),t=require("../use-tooltip-CL3_zAeg.js");require("classnames");require("../icon-TuxfQndO.js");require("../array.polyfill.flat-5BAolFdk.js");const c=require("../common/tooltip-utils/constants/index.js"),u=()=>null,E=()=>null,N=({className:m,pointer:y,overlayStyle:f,noHover:i,onFocus:h=()=>{},onBlur:b=()=>{},onMouseEnter:d=()=>{},onMouseLeave:O=()=>{},onExpand:_,onCollapse:R,children:l,...C})=>{const{isExpanded:I,expandTooltip:s,collapseTooltip:r}=t.useTooltip({onCollapse:R,onExpand:_}),n=e.useRef(),q=o=>{d(o),i||(clearTimeout(n.current),s())},P=o=>{O(o),i||(clearTimeout(n.current),n.current=setTimeout(()=>{r()},300))},F=o=>{h(o),s()},L=o=>{b(o),r()},p=a.findComponent(l,u),T=a.findComponent(l,E);if(!T)throw new Error("EbayTooltip: Please use a EbayTooltipHost that defines the host of the tooltip");if(!p)throw new Error("EbayTooltip: Please use a EbayTooltipContent that defines the content of the tooltip");return e.createElement(t.Tooltip,{...C,className:m,type:"tooltip",isExpanded:I,onFocus:F,onBlur:L,onMouseEnter:q,onMouseLeave:P},e.createElement(t.TooltipHost,{...T.props}),e.createElement(t.TooltipContent,{...p.props,type:"tooltip",style:f,pointer:y}))};exports.Tooltip=t.Tooltip;exports.TooltipFooter=t.TooltipFooter;exports.DEFAULT_POINTER_DIRECTION=c.DEFAULT_POINTER_DIRECTION;exports.POINTER_STYLES=c.POINTER_STYLES;exports.EbayTooltip=N;exports.EbayTooltipContent=u;exports.EbayTooltipHost=E;
@@ -1,54 +1 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const React = require("react");
4
- const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
5
- const useTooltip = require("../use-tooltip-7JxcZHJn.js");
6
- const classNames = require("classnames");
7
- require("../icon-B17Di3YL.js");
8
- require("../array.polyfill.flat-DyxysTxZ.js");
9
- const EbayTourtipContent = () => null;
10
- const EbayTourtipHost = () => null;
11
- const EbayTourtipFooter = ({ index, children }) => React.createElement(
12
- React.Fragment,
13
- null,
14
- index !== void 0 && React.createElement("span", { className: "tourtip__index" }, index),
15
- children
16
- );
17
- const EbayTourtipHeading = ({ as, children, className, ...props }) => {
18
- const HeadingTag = as || "h2";
19
- return React.createElement(HeadingTag, { ...props, className: classNames(`tourtip__heading`, className) }, children);
20
- };
21
- const EbayTourtip = ({ a11yCloseText, "aria-label": ariaLabel, className, children, onCollapse, onExpand, overlayStyle, pointer, ...rest }) => {
22
- const hostRef = React.useRef();
23
- const { isExpanded, collapseTooltip } = useTooltip.useTooltip({ onExpand, onCollapse, initialExpanded: true, hostRef });
24
- const containerRef = React.useRef();
25
- const content = common_componentUtils_utils.findComponent(children, EbayTourtipContent);
26
- if (!content) {
27
- throw new Error(`EbayTourtip: Please use a EbayTourtipContent that defines the content of the tourtip`);
28
- }
29
- const { children: contentChildren, contentProps } = content.props;
30
- const host = common_componentUtils_utils.findComponent(children, EbayTourtipHost);
31
- if (!host) {
32
- throw new Error(`EbayTourtip: Please use a EbayTourtipHost that defines the host of the tourtip`);
33
- }
34
- const heading = common_componentUtils_utils.findComponent(children, EbayTourtipHeading);
35
- const footer = common_componentUtils_utils.findComponent(children, EbayTourtipFooter);
36
- return React.createElement(
37
- useTooltip.Tooltip,
38
- { ...rest, className, type: "tourtip", isExpanded, ref: containerRef },
39
- React.createElement(useTooltip.TooltipHost, { ...host.props, forwardedRef: hostRef, "aria-label": ariaLabel, "aria-expanded": isExpanded }),
40
- React.createElement(
41
- useTooltip.TooltipContent,
42
- { ...contentProps, a11yCloseText, onClose: collapseTooltip, pointer, showCloseButton: true, style: overlayStyle, type: "tourtip" },
43
- heading,
44
- contentChildren,
45
- footer && React.createElement(useTooltip.TooltipFooter, { type: "tourtip" }, footer)
46
- )
47
- );
48
- };
49
- exports.Tooltip = useTooltip.Tooltip;
50
- exports.EbayTourtip = EbayTourtip;
51
- exports.EbayTourtipContent = EbayTourtipContent;
52
- exports.EbayTourtipFooter = EbayTourtipFooter;
53
- exports.EbayTourtipHeading = EbayTourtipHeading;
54
- exports.EbayTourtipHost = EbayTourtipHost;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),i=require("../common/component-utils/utils/index.js"),n=require("../use-tooltip-CL3_zAeg.js"),_=require("classnames");require("../icon-TuxfQndO.js");require("../array.polyfill.flat-5BAolFdk.js");const T=()=>null,d=()=>null,y=({index:e,children:r})=>t.createElement(t.Fragment,null,e!==void 0&&t.createElement("span",{className:"tourtip__index"},e),r),f=({as:e,children:r,className:a,...o})=>{const s=e||"h2";return t.createElement(s,{...o,className:_("tourtip__heading",a)},r)},F=({a11yCloseText:e,"aria-label":r,className:a,children:o,onCollapse:s,onExpand:m,overlayStyle:b,pointer:h,...C})=>{const p=t.useRef(),{isExpanded:u,collapseTooltip:g}=n.useTooltip({onExpand:m,onCollapse:s,initialExpanded:!0,hostRef:p}),H=t.useRef(),l=i.findComponent(o,T);if(!l)throw new Error("EbayTourtip: Please use a EbayTourtipContent that defines the content of the tourtip");const{children:q,contentProps:w}=l.props,c=i.findComponent(o,d);if(!c)throw new Error("EbayTourtip: Please use a EbayTourtipHost that defines the host of the tourtip");const R=i.findComponent(o,f),E=i.findComponent(o,y);return t.createElement(n.Tooltip,{...C,className:a,type:"tourtip",isExpanded:u,ref:H},t.createElement(n.TooltipHost,{...c.props,forwardedRef:p,"aria-label":r,"aria-expanded":u}),t.createElement(n.TooltipContent,{...w,a11yCloseText:e,onClose:g,pointer:h,showCloseButton:!0,style:b,type:"tourtip"},R,q,E&&t.createElement(n.TooltipFooter,{type:"tourtip"},E)))};exports.Tooltip=n.Tooltip;exports.EbayTourtip=F;exports.EbayTourtipContent=T;exports.EbayTourtipFooter=y;exports.EbayTourtipHeading=f;exports.EbayTourtipHost=d;