@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.
- package/README.md +2 -2
- package/array.polyfill.flat-5BAolFdk.js +1 -0
- package/badge-CoHKfiPt.js +1 -0
- package/button-DGuEBUDJ.js +1 -0
- package/calendar-lAu6VfAb.js +1 -0
- package/common/component-utils/forwardRef/index.js +1 -10
- package/common/component-utils/index.js +1 -9
- package/common/component-utils/utils/index.js +1 -25
- package/common/event-utils/index.js +1 -113
- package/common/floating-label-utils/hooks/index.js +1 -106
- package/common/notice-utils/notice-cta/index.js +1 -5
- package/common/random-id/index.js +1 -13
- package/common/tooltip-utils/constants/index.js +1 -97
- package/common/tooltip-utils/index.js +1 -11
- package/debounce-BQsYxxOL.js +1 -0
- package/dialog-previous-button-CpuFLkQp.js +1 -0
- package/drawer-rqXAEeqd.js +1 -0
- package/ebay-alert-dialog/index.js +1 -26
- package/ebay-badge/index.js +1 -4
- package/ebay-breadcrumbs/index.js +1 -47
- package/ebay-button/index.js +1 -5
- package/ebay-calendar/index.js +1 -4
- package/ebay-carousel/index.js +1 -345
- package/ebay-checkbox/index.js +1 -52
- package/ebay-confirm-dialog/index.js +1 -28
- package/ebay-cta-button/index.js +1 -22
- package/ebay-date-textbox/index.js +1 -140
- package/ebay-dialog-base/components/animation/index.js +1 -92
- package/ebay-dialog-base/components/dialog-footer/index.js +1 -4
- package/ebay-dialog-base/components/dialog-header/index.js +1 -4
- package/ebay-dialog-base/index.js +1 -13
- package/ebay-drawer-dialog/index.js +1 -4
- package/ebay-eek/index.js +1 -54
- package/ebay-fake-menu/index.js +1 -10
- package/ebay-fake-menu/menu-item/index.js +1 -49
- package/ebay-fake-menu-button/index.js +1 -7
- package/ebay-fake-menu-button/menu-button/index.js +1 -12
- package/ebay-fake-tabs/index.js +1 -30
- package/ebay-field/index.js +1 -21
- package/ebay-fullscreen-dialog/index.js +1 -10
- package/ebay-icon/index.js +1 -4
- package/ebay-icon/types.d.ts +1 -1
- package/ebay-icon/types.d.ts.map +1 -1
- package/ebay-icon-button/index.js +1 -4
- package/ebay-infotip/index.js +1 -76
- package/ebay-inline-notice/index.js +1 -36
- package/ebay-lightbox-dialog/index.js +1 -12
- package/ebay-listbox-button/index.d.ts +2 -1
- package/ebay-listbox-button/index.d.ts.map +1 -1
- package/ebay-listbox-button/index.js +2 -151
- package/ebay-listbox-button/listbox-button-option.d.ts +10 -0
- package/ebay-listbox-button/listbox-button-option.d.ts.map +1 -0
- package/ebay-listbox-button/listbox-button.d.ts +5 -15
- package/ebay-listbox-button/listbox-button.d.ts.map +1 -1
- package/ebay-menu/index.js +1 -9
- package/ebay-menu-button/index.js +1 -113
- package/ebay-notice-base/index.js +1 -7
- package/ebay-page-notice/index.js +1 -50
- package/ebay-pagination/index.js +1 -244
- package/ebay-panel-dialog/index.js +1 -12
- package/ebay-progress-bar/index.js +1 -6
- package/ebay-progress-spinner/index.js +1 -4
- package/ebay-progress-stepper/index.js +1 -72
- package/ebay-radio/index.js +1 -4
- package/ebay-radio/radio/index.js +1 -48
- package/ebay-section-notice/index.js +1 -69
- package/ebay-section-title/index.js +1 -38
- package/ebay-segmented-buttons/index.js +1 -46
- package/ebay-select/index.js +1 -98
- package/ebay-signal/index.js +1 -9
- package/ebay-snackbar-dialog/index.js +1 -81
- package/ebay-split-button/index.js +1 -22
- package/ebay-star-rating/index.js +1 -9
- package/ebay-star-rating-select/index.js +1 -55
- package/ebay-svg/index.js +1 -5189
- package/ebay-svg/symbols.d.ts.map +1 -1
- package/ebay-switch/index.js +1 -27
- package/ebay-tabs/index.js +1 -88
- package/ebay-textbox/index.js +1 -10
- package/ebay-toast-dialog/index.js +1 -9
- package/ebay-toggle-button/README.md +39 -0
- package/ebay-toggle-button/index.d.ts +3 -0
- package/ebay-toggle-button/index.d.ts.map +1 -0
- package/ebay-toggle-button/index.js +1 -0
- package/ebay-toggle-button/toggle-button.d.ts +5 -0
- package/ebay-toggle-button/toggle-button.d.ts.map +1 -0
- package/ebay-toggle-button/types.d.ts +23 -0
- package/ebay-toggle-button/types.d.ts.map +1 -0
- package/ebay-toggle-button-group/README.md +56 -0
- package/ebay-toggle-button-group/index.d.ts +3 -0
- package/ebay-toggle-button-group/index.d.ts.map +1 -0
- package/ebay-toggle-button-group/index.js +1 -0
- package/ebay-toggle-button-group/toggle-button-group.d.ts +5 -0
- package/ebay-toggle-button-group/toggle-button-group.d.ts.map +1 -0
- package/ebay-toggle-button-group/types.d.ts +20 -0
- package/ebay-toggle-button-group/types.d.ts.map +1 -0
- package/ebay-tooltip/index.js +1 -64
- package/ebay-tourtip/index.js +1 -54
- package/ebay-video/index.js +1 -229
- package/events/index.js +1 -18
- package/icon-TuxfQndO.js +1 -0
- package/icon-button-Cwaj-eT9.js +1 -0
- package/label-CnrpYJ-g.js +1 -0
- package/menu-CV-INYLM.js +1 -0
- package/menu-_LzP6yje.js +1 -0
- package/menu-button-BZ66jxvI.js +1 -0
- package/notice-content-9iF4T8uB.js +1 -0
- package/notice-content-C0ZStfuX.js +1 -0
- package/notice-footer-Cw1DMzoB.js +1 -0
- package/package.json +2 -5
- package/progress-spinner-U2qOANON.js +1 -0
- package/range-DOsPN0h5.js +1 -0
- package/textbox-dUhinDwj.js +1 -0
- package/toggle-button-D8l0YB43.js +1 -0
- package/use-roving-index-DoAVBgsp.js +1 -0
- package/use-tooltip-CL3_zAeg.js +1 -0
- package/utils/index.js +1 -13
- package/array.polyfill.flat-DyxysTxZ.js +0 -21
- package/badge-CR5t7-2L.js +0 -8
- package/button-B4bZIgwB.js +0 -83
- package/calendar-D-DWjrMU.js +0 -333
- package/debounce-v8bWAUnY.js +0 -9
- package/dialog-previous-button-EC_Y6KaT.js +0 -370
- package/drawer-DBDktEBZ.js +0 -69
- package/ebay-listbox/README.md +0 -100
- package/ebay-listbox/index.d.ts +0 -4
- package/ebay-listbox/index.d.ts.map +0 -1
- package/ebay-listbox/index.js +0 -6
- package/ebay-listbox/listbox-option-description.d.ts +0 -4
- package/ebay-listbox/listbox-option-description.d.ts.map +0 -1
- package/ebay-listbox/listbox-option.d.ts +0 -10
- package/ebay-listbox/listbox-option.d.ts.map +0 -1
- package/ebay-listbox/listbox.d.ts +0 -21
- package/ebay-listbox/listbox.d.ts.map +0 -1
- package/icon-B17Di3YL.js +0 -56
- package/icon-button-BQWoMgX1.js +0 -31
- package/index-BXizW4ue.js +0 -89
- package/index-DcH7Tjjd.js +0 -272
- package/label-C0AS4fnO.js +0 -19
- package/listbox-DGbY99kq.js +0 -674
- package/menu-Bsy48CE1.js +0 -163
- package/menu-button-CKGsgg6G.js +0 -89
- package/menu-fCOy6wBS.js +0 -29
- package/notice-content-BTXVxttv.js +0 -8
- package/notice-content-BhUeK1pd.js +0 -3
- package/notice-footer-CIQ8SM6N.js +0 -10
- package/progress-spinner-DOFKRtuu.js +0 -20
- package/range-C5qzyhg4.js +0 -3
- package/textbox-J291yCpJ.js +0 -136
- package/use-roving-index-CEM_UsCH.js +0 -58
- package/use-tooltip-7JxcZHJn.js +0 -92
- package/utils/scroll.d.ts +0 -2
- 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,
|
|
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"}
|
package/ebay-switch/index.js
CHANGED
|
@@ -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;
|
package/ebay-tabs/index.js
CHANGED
|
@@ -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;
|
package/ebay-textbox/index.js
CHANGED
|
@@ -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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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"}
|
package/ebay-tooltip/index.js
CHANGED
|
@@ -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;
|
package/ebay-tourtip/index.js
CHANGED
|
@@ -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;
|