@ebay/ui-core-react 7.4.0-alpha.9 → 8.0.0

package/ebay-svg/symbols.d.ts.map

@@ -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"}
+{"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,qBAy3BnB,CAAA"}

package/ebay-switch/index.js

@@ -1,27 +1 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const classNames = require("classnames");
-const isControlled = (checked) => typeof checked !== "undefined";
-const EbaySwitch = ({ id, value, name, className, checked, defaultChecked = false, onChange = () => {
-}, ...rest }) => {
-  const [isChecked, setChecked] = React.useState(defaultChecked);
-  React.useEffect(() => {
-    setChecked(!!checked);
-  }, [checked]);
-  const handleChange = (e) => {
-    const { value: inputValue = "", checked: inputChecked = false } = e.target || {};
-    onChange(e, {
-      value: inputValue,
-      checked: inputChecked
-    });
-    setChecked(inputChecked);
-  };
-  return React.createElement(
-    "span",
-    { className: "switch" },
-    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 }),
-    React.createElement("span", { className: "switch__button" })
-  );
-};
-exports.EbaySwitch = EbaySwitch;
+"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/README.md

@@ -28,7 +28,6 @@ import '@ebay/skin/tabs';
 
 Name | Type | Stateful | Description
 --- | --- | --- | ---
-`index` |Number | Yes | Deprecated, use `selectedIndex` instead. 0-based index of selected tab heading and panel
 `selectedIndex` |Number | Yes | 0-based index of selected tab heading and panel
 `activation` | Enum | Yes | whether to use automatic or manual activation when navigating by keyboard, can be `auto` (default) or `manual`
 `size` | Enum | No | Whether to opt into larger font-size for tab headings, can be `medium` (default) or `large`
@@ -37,8 +36,7 @@ Name | Type | Stateful | Description
 
 | Event         | Data                                      | Description                                                                                             |
 |---------------|-------------------------------------------|---------------------------------------------------------------------------------------------------------|
-| `onTabSelect` | `({ index: number })`                     | Triggered on tab selected. Deprecated, use onSelect instead. Will be removed in the next major release. |
-| `onSelect`    | `(ChangeEvent, { selectedIndex:number })` | Triggered on tab selected.                                                                              |
+| `onSelect`    | `({ selectedIndex:number })` | Triggered on tab selected.                                                                              |
 
 ## EbayTab
 

package/ebay-tabs/index.js

@@ -1,88 +1 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const classNames = require("classnames");
-const common_eventUtils = require("../common/event-utils/index.js");
-const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
-const Tab = ({ children, index, parentId, selected, focused, className, refCallback, ...rest }) => React.createElement(
-  "div",
-  { ...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 },
-  React.createElement("span", null, children)
-);
-const TabPanel = ({ children, index, parentId, selected, className, ...rest }) => React.createElement(
-  "div",
-  { ...rest, "aria-labelledby": `default-tab-${index}`, className: classNames(className, "tabs__panel"), id: `${parentId || "default"}-tabpanel-${index}`, role: "tabpanel", hidden: !selected },
-  React.createElement("div", { className: "tabs__cell" }, children)
-);
-const Tabs = ({ id, className, index = 0, size = "medium", activation = "auto", onSelect = () => {
-}, onTabSelect = () => {
-}, children }) => {
-  const headings = [];
-  const [selectedIndex, setSelectedIndex] = React.useState(index);
-  const [focusedIndex, setFocusedIndex] = React.useState(index);
-  const handleSelect = (i) => {
-    onSelect({ selectedIndex: i });
-    onTabSelect(i);
-    setSelectedIndex(i);
-  };
-  const onKeyDown = (ev, i) => {
-    common_eventUtils.handleActionKeydown(ev, () => {
-      ev.preventDefault();
-      if (activation === "manual") {
-        handleSelect(i);
-      }
-    });
-    common_eventUtils.handleLeftRightArrowsKeydown(ev, () => {
-      var _a;
-      ev.preventDefault();
-      const len = common_componentUtils_utils.filterByType(children, Tab).length;
-      const direction = ["Left", "ArrowLeft"].includes(ev.key) ? -1 : 1;
-      const currentIndex = focusedIndex === void 0 ? selectedIndex : focusedIndex;
-      const nextIndex = (currentIndex + len + direction) % len;
-      setFocusedIndex(nextIndex);
-      (_a = headings[nextIndex]) == null ? void 0 : _a.focus();
-      if (activation !== "manual") {
-        handleSelect(nextIndex);
-      }
-    });
-  };
-  React.useEffect(() => {
-    handleSelect(index);
-  }, [index]);
-  const isLarge = size === "large";
-  const tabHeadings = common_componentUtils_utils.filterByType(children, Tab).map((item, i) => React.cloneElement(item, {
-    ...item.props,
-    refCallback: (ref) => {
-      headings[i] = ref;
-    },
-    index: i,
-    parentId: id,
-    selected: selectedIndex === i,
-    focused: focusedIndex === i,
-    onClick: () => {
-      handleSelect(i);
-      setFocusedIndex(i);
-    },
-    onKeyDown: (e) => {
-      onKeyDown(e, i);
-    }
-  }));
-  const tabPanels = common_componentUtils_utils.filterByType(children, TabPanel).map((item, i) => {
-    const itemProps = {
-      index: i,
-      parentId: id,
-      selected: selectedIndex === i,
-      children: item.props.children
-    };
-    return React.cloneElement(item, itemProps);
-  });
-  return React.createElement(
-    "div",
-    { id, className: classNames(className, "tabs") },
-    React.createElement("div", { className: classNames("tabs__items", { "tabs__items--large": isLarge }), role: "tablist" }, tabHeadings),
-    React.createElement("div", { className: "tabs__content" }, tabPanels)
-  );
-};
-exports.EbayTab = Tab;
-exports.EbayTabPanel = TabPanel;
-exports.EbayTabs = Tabs;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),m=require("classnames"),g=require("../index-Bsb1LHpi.js"),E=require("../utils-C9NL3q0j.js"),_=({children:l,index:c,parentId:n,selected:o,focused:r,className:d,refCallback:b,...u})=>a.createElement("div",{...u,ref:b,"aria-controls":`${n||"default"}-tabpanel-${c}`,"aria-selected":o,className:m(d,"tabs__item"),id:`${n||"default"}-tab-${c}`,role:"tab",tabIndex:r?0:-1},a.createElement("span",null,l)),x=({children:l,index:c,parentId:n,selected:o,className:r,...d})=>a.createElement("div",{...d,"aria-labelledby":`default-tab-${c}`,className:m(r,"tabs__panel"),id:`${n||"default"}-tabpanel-${c}`,role:"tabpanel",hidden:!o},a.createElement("div",{className:"tabs__cell"},l)),q=({id:l,className:c,selectedIndex:n=0,size:o="medium",activation:r="auto",onSelect:d=()=>{},children:b})=>{const u=[],[f,h]=a.useState(n),[p,I]=a.useState(n),i=e=>{d({selectedIndex:e}),h(e)},N=(e,t)=>{g.handleActionKeydown(e,()=>{e.preventDefault(),r==="manual"&&i(t)}),g.handleLeftRightArrowsKeydown(e,()=>{var T;e.preventDefault();const s=E.filterByType(b,_).length,P=["Left","ArrowLeft"].includes(e.key)?-1:1,y=((p===void 0?f:p)+s+P)%s;I(y),(T=u[y])==null||T.focus(),r!=="manual"&&i(y)})};a.useEffect(()=>{i(n)},[n]);const w=o==="large",S=E.filterByType(b,_).map((e,t)=>a.cloneElement(e,{...e.props,refCallback:s=>{u[t]=s},index:t,parentId:l,selected:f===t,focused:p===t,onClick:()=>{i(t),I(t)},onKeyDown:s=>{N(s,t)}})),v=E.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":w}),role:"tablist"},S),a.createElement("div",{className:"tabs__content"},v))};exports.EbayTab=_;exports.EbayTabPanel=x;exports.EbayTabs=q;

package/ebay-tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/ebay-tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,EAAE,EAAsC,MAAM,OAAO,CAAA;AAOnF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA4FvB,CAAA;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/ebay-tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,EAAE,EAAsC,MAAM,OAAO,CAAA;AAOnF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA0FvB,CAAA;AAED,eAAe,IAAI,CAAA"}

package/ebay-tabs/types.d.ts

@@ -4,14 +4,10 @@ export type Size = 'medium' | 'large';
 export type OnSelectProps = {
     selectedIndex: number;
 };
-export type TabsProps = ComponentProps<'div'> & {
-    index?: number;
+export type TabsProps = Omit<ComponentProps<'div'>, 'onSelect'> & {
+    selectedIndex?: number;
     size?: Size;
     activation?: Activation;
     onSelect?: (props: OnSelectProps) => void;
-    /**
-     * @deprecated Use onSelect instead
-     */
-    onTabSelect?: (index: number) => void;
 };
 //# sourceMappingURL=types.d.ts.map

package/ebay-tabs/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAA;AAC1C,MAAM,MAAM,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAA;AAErC,MAAM,MAAM,aAAa,GAAG;IAC1B,aAAa,EAAE,MAAM,CAAC;CACvB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAA;AAC1C,MAAM,MAAM,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAA;AAErC,MAAM,MAAM,aAAa,GAAG;IAC1B,aAAa,EAAE,MAAM,CAAC;CACvB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C,CAAA"}

package/ebay-textbox/index.js

@@ -1,10 +1 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const textbox = require("../textbox-J291yCpJ.js");
-const common_floatingLabelUtils_hooks = require("../common/floating-label-utils/hooks/index.js");
-exports.EbayTextbox = textbox.EbayTextbox;
-exports.EbayTextboxPostfixIcon = textbox.EbayTextboxPostfixIcon;
-exports.EbayTextboxPostfixText = textbox.EbayTextboxPostfixText;
-exports.EbayTextboxPrefixIcon = textbox.EbayTextboxPrefixIcon;
-exports.EbayTextboxPrefixText = textbox.EbayTextboxPrefixText;
-exports.useFloatingLabel = common_floatingLabelUtils_hooks.useFloatingLabel;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../textbox-DZRVQetR.js"),x=require("../hooks-5qES90Sx.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;

package/ebay-toast-dialog/README.md

@@ -15,7 +15,7 @@
 
 | Name            | Type    | Stateful | Required | Description |
 | --------------- | ------- | -------- | -------- | ----------- |
-| `open`          | Boolean | Yes      | No       | Whether drawer is open. |
+| `open`          | Boolean | Yes      | No       | Whether toast is open. |
 | `a11yCloseText` | String  | No       | Yes      | A11y text for close button and mask. |
 | `animated`      | Boolean | Yes      | No       | Renders the dialog with an animation. Note that the dialog will always be present in the DOM |
 
@@ -23,5 +23,5 @@
 
 | Event     | Data | Description   |
 | --------- | ---- | ------------- |
-| `onShow`  |      | drawer opened |
-| `onClose` |      | drawer closed |
+| `onOpen`  |      | toast opened |
+| `onClose` |      | toast closed |

package/ebay-toast-dialog/index.js

@@ -1,9 +1 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const classNames = require("classnames");
-const dialogPreviousButton = require("../dialog-previous-button-EC_Y6KaT.js");
-require("../icon-button-BQWoMgX1.js");
-const EbayToast = ({ className, onClose = () => {
-}, ...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 });
-exports.EbayToast = EbayToast;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),s=require("classnames"),i=require("../dialog-previous-button-B-fysL3O.js");require("../icon-button-Bjjvld0a.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;

package/ebay-toggle-button/README.md

@@ -0,0 +1,39 @@
+# EbayToggleButton
+
+## Demo
+
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/buttons-ebay-toggle-button--docs)
+
+## Install
+
+```
+yarn add @ebay/ui-core-react @ebay/skin
+```
+
+## Usage
+
+```
+import React from 'react'
+import { EbayToggleButton } from '@ebay/ui-core-react/ebay-toggle-button'
+import '@ebay/skin/toggle-button'
+
+export const Example = () => (
+    <EbayToggleButton
+        pressed={isPressed}
+        onToggle={() => setIsPressed(!isPressed)}
+        title='Button 1'
+        subtitle='subtitle'
+    ></EbayToggleButton>
+```
+
+## EbayToggleButton Props
+
+| Name         | Type     | Required | Description                                                      |
+| ------------ | -------- | -------- | ---------------------------------------------------------------- |
+| `layoutType` | enum     | No       | Can be `minimal` (default), `list` or `gallery`                  |
+| `title`      | string   | No       | Title attribute for the button                                   |
+| `subtitle`   | string   | No       | Subtitle attribute for the button                                |
+| `pressed`    | boolean  | Yes      | Pressed state of the button                                      |
+| `icon`       | enum     | No       | EbayIcon name                                                    |
+| `img`        | object   | No       | Image obj for the component                                      |
+| `onToggle`   | Function | No       | Triggered when the button is toggled: { originalEvent, pressed } |

package/ebay-toggle-button/index.d.ts

@@ -0,0 +1,3 @@
+export { default as EbayToggleButton } from './toggle-button';
+export type { ToggleButtonProps, ToggleButtonEvent } from './types';
+//# sourceMappingURL=index.d.ts.map

package/ebay-toggle-button/index.d.ts.map

@@ -0,0 +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"}

package/ebay-toggle-button/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../toggle-button-CFPnYlex.js");exports.EbayToggleButton=t.ToggleButton;

package/ebay-toggle-button/toggle-button.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ToggleButtonProps } from './types';
+declare const ToggleButton: FC<ToggleButtonProps>;
+export default ToggleButton;
+//# sourceMappingURL=toggle-button.d.ts.map

package/ebay-toggle-button/toggle-button.d.ts.map

@@ -0,0 +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"}

package/ebay-toggle-button/types.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps } from 'react';
+import { EbayMouseEventHandler } from '../common/event-utils/types';
+import { Icon } from '../ebay-icon/types';
+type PressedEventData = {
+    pressed: boolean;
+};
+export type ToggleButtonEvent = EbayMouseEventHandler<HTMLButtonElement, PressedEventData>;
+export type ToggleButtonImge = {
+    src: string;
+    alt: string;
+    fillPlacement?: string;
+};
+export type ToggleButtonProps = Omit<ComponentProps<'button'>, 'onClick'> & {
+    pressed?: boolean;
+    title?: string;
+    subtitle?: string | string[];
+    layoutType?: 'minimal' | 'list' | 'gallery';
+    icon?: Icon;
+    img?: ToggleButtonImge;
+    onToggle?: ToggleButtonEvent;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/ebay-toggle-button/types.d.ts.map

@@ -0,0 +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"}

package/ebay-toggle-button-group/README.md

@@ -0,0 +1,56 @@
+# EbayToggleButtonGroup
+
+## Demo
+
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/buttons-ebay-toggle-button-group--docs)
+
+## Install
+
+```
+yarn add @ebay/ui-core-react @ebay/skin
+```
+
+## Usage
+
+```
+import React from 'react'
+import { EbayToggleButton } from '@ebay/ui-core-react/ebay-toggle-button'
+import { EbayToggleButtonGroup } from '@ebay/ui-core-react/ebay-toggle-button-group'
+import '@ebay/skin/toggle-button-group'
+
+export const Example = () => (
+    <EbayToggleButtonGroup onChange={action('change')} {...args}>
+        <EbayToggleButton pressed title="Button1" />
+        <EbayToggleButton>Child Button</EbayToggleButton>
+        <EbayToggleButton title="Button2" subtitle="subtitle" />
+        <EbayToggleButton
+            icon="settings24"
+            title="Button3"
+            subtitle="subtitle"
+        ></EbayToggleButton>
+        <EbayToggleButton
+            title="Button4"
+            subtitle="subtitle"
+            img={{
+                src: 'https://cloudfront.slrlounge.com/wp-content/uploads/2012/07/01-SLRLounge-Holding-Standing-Wrong.jpg',
+                alt: 'image alt'
+            }}
+        ></EbayToggleButton>
+    </EbayToggleButtonGroup>
+);
+```
+
+## EbayToggleButtonGroup Props
+
+| Name         | Type     | Required | Description                                                                            |
+| ------------ | -------- | -------- | -------------------------------------------------------------------------------------- |
+| `variant`    | enum     | No       | Can be `checkbox` (default), `radio` or `radio-toggle`                                 |
+| `layoutType` | enum     | No       | Can be `minimal` (default), `list` or `gallery`                                        |
+| `a11yText`   | string   | No       | Accessibility text for the group. Cannot be used together with `a11yLabelId`           |
+| `a11yLabelId`| string   | No       | Required for a11y compliance. Cannot be used together with a11yText                    |
+| `columnsMin` | number   | No       | Preferred minimum number of columns for smallest container/screen (1-3)                |
+| `columnsXS`  | number   | No       | Preferred minimum number of columns within extra small containers.                     |
+| `columnsSM`  | number   | No       | Preferred minimum number of columns within small containers.                           |
+| `columnsMD`  | number   | No       | Preferred minimum number of columns within medium containers.                          |
+| `columnsXL`  | number   | No       | Preferred minimum number of columns within extra large containers.                     |
+| `onChange`   | Function | No       | Triggered when the pressed state changes: { originalEvent, pressed }                   |

package/ebay-toggle-button-group/index.d.ts

@@ -0,0 +1,3 @@
+export { default as EbayToggleButtonGroup } from './toggle-button-group';
+export type { ToggleButtonGroupProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/ebay-toggle-button-group/index.d.ts.map

@@ -0,0 +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"}

package/ebay-toggle-button-group/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),P=require("classnames"),h=require("../utils-C9NL3q0j.js"),w=require("../toggle-button-CFPnYlex.js"),G=({a11yText:n,a11yLabelId:c,layoutType:g="minimal",variant:r="checkbox",children:m,columnsMin:d,columnsXS:b,columnsSM:i,columnsMD:p,columnsXL:B,onChange:a,className:y,...k})=>{const u=h.filterByType(m,w.ToggleButton),T=()=>u.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":b,"data-columns-sm":i,"data-columns-md":p,"data-columns-xl":B,...k},l.createElement("ul",{"aria-label":n,"aria-labelledby":c},u.map((s,e)=>l.createElement("li",{key:e},l.cloneElement(s,{layoutType:g,pressed:E[e],onToggle:t=>{q(t,e)}})))))};exports.EbayToggleButtonGroup=G;

package/ebay-toggle-button-group/toggle-button-group.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ToggleButtonGroupProps } from './types';
+declare const EbayToggleButtonGroup: React.FC<ToggleButtonGroupProps>;
+export default EbayToggleButtonGroup;
+//# sourceMappingURL=toggle-button-group.d.ts.map

package/ebay-toggle-button-group/toggle-button-group.d.ts.map

@@ -0,0 +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"}

package/ebay-toggle-button-group/types.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps } from 'react';
+import { EbayMouseEventHandler } from '../common/event-utils/types';
+type PressedGroupEventData = {
+    pressedButtonsIndex: Record<number, boolean>;
+};
+export type ToggleButtonGroupEvent = EbayMouseEventHandler<HTMLButtonElement, PressedGroupEventData>;
+export type ToggleButtonGroupProps = Omit<ComponentProps<'div'>, 'onChange'> & {
+    a11yText?: string;
+    a11yLabelId?: string;
+    variant?: 'checkbox' | 'radio' | 'radio-toggle';
+    layoutType?: 'minimal' | 'list' | 'gallery';
+    columnsMin?: number;
+    columnsXS?: number;
+    columnsSM?: number;
+    columnsMD?: number;
+    columnsXL?: number;
+    onChange?: ToggleButtonGroupEvent;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/ebay-toggle-button-group/types.d.ts.map

@@ -0,0 +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

@@ -1,64 +1 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
-const useTooltip = require("../use-tooltip-7JxcZHJn.js");
-require("classnames");
-require("../icon-B17Di3YL.js");
-require("../array.polyfill.flat-DyxysTxZ.js");
-const common_tooltipUtils_constants = require("../common/tooltip-utils/constants/index.js");
-const EbayTooltipContent = () => null;
-const EbayTooltipHost = () => null;
-const EbayTooltip = ({ className, pointer, overlayStyle, noHover, onFocus = () => {
-}, onBlur = () => {
-}, onMouseEnter = () => {
-}, onMouseLeave = () => {
-}, onExpand, onCollapse, children, ...rest }) => {
-  const { isExpanded, expandTooltip, collapseTooltip } = useTooltip.useTooltip({ onCollapse, onExpand });
-  const timeoutRef = React.useRef();
-  const handleOnMouseEnter = (event) => {
-    onMouseEnter(event);
-    if (!noHover) {
-      clearTimeout(timeoutRef.current);
-      expandTooltip();
-    }
-  };
-  const handleOnMouseLeave = (event) => {
-    onMouseLeave(event);
-    if (!noHover) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(() => {
-        collapseTooltip();
-      }, 300);
-    }
-  };
-  const handleOnFocus = (event) => {
-    onFocus(event);
-    expandTooltip();
-  };
-  const handleOnBlur = (event) => {
-    onBlur(event);
-    collapseTooltip();
-  };
-  const content = common_componentUtils_utils.findComponent(children, EbayTooltipContent);
-  const host = common_componentUtils_utils.findComponent(children, EbayTooltipHost);
-  if (!host) {
-    throw new Error(`EbayTooltip: Please use a EbayTooltipHost that defines the host of the tooltip`);
-  }
-  if (!content) {
-    throw new Error(`EbayTooltip: Please use a EbayTooltipContent that defines the content of the tooltip`);
-  }
-  return React.createElement(
-    useTooltip.Tooltip,
-    { ...rest, className, type: "tooltip", isExpanded, onFocus: handleOnFocus, onBlur: handleOnBlur, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave },
-    React.createElement(useTooltip.TooltipHost, { ...host.props }),
-    React.createElement(useTooltip.TooltipContent, { ...content.props, type: "tooltip", style: overlayStyle, pointer })
-  );
-};
-exports.Tooltip = useTooltip.Tooltip;
-exports.TooltipFooter = useTooltip.TooltipFooter;
-exports.DEFAULT_POINTER_DIRECTION = common_tooltipUtils_constants.DEFAULT_POINTER_DIRECTION;
-exports.POINTER_STYLES = common_tooltipUtils_constants.POINTER_STYLES;
-exports.EbayTooltip = EbayTooltip;
-exports.EbayTooltipContent = EbayTooltipContent;
-exports.EbayTooltipHost = EbayTooltipHost;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),a=require("../utils-C9NL3q0j.js"),o=require("../use-tooltip-BEiQpMDa.js");require("classnames");require("../icon-D4RDqpD4.js");require("../array.polyfill.flat-5BAolFdk.js");const u=()=>null,c=()=>null,N=({className:E,pointer:y,overlayStyle:f,noHover:l,onFocus:h=()=>{},onBlur:b=()=>{},onMouseEnter:d=()=>{},onMouseLeave:O=()=>{},onExpand:m,onCollapse:R,children:i,...C})=>{const{isExpanded:I,expandTooltip:s,collapseTooltip:r}=o.useTooltip({onCollapse:R,onExpand:m}),n=e.useRef(),P=t=>{d(t),l||(clearTimeout(n.current),s())},q=t=>{O(t),l||(clearTimeout(n.current),n.current=setTimeout(()=>{r()},300))},F=t=>{h(t),s()},L=t=>{b(t),r()},p=a.findComponent(i,u),T=a.findComponent(i,c);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(o.Tooltip,{...C,className:E,type:"tooltip",isExpanded:I,onFocus:F,onBlur:L,onMouseEnter:P,onMouseLeave:q},e.createElement(o.TooltipHost,{...T.props}),e.createElement(o.TooltipContent,{...p.props,type:"tooltip",style:f,pointer:y}))};exports.DEFAULT_POINTER_DIRECTION=o.DEFAULT_POINTER_DIRECTION;exports.POINTER_STYLES=o.POINTER_STYLES;exports.Tooltip=o.Tooltip;exports.TooltipFooter=o.TooltipFooter;exports.EbayTooltip=N;exports.EbayTooltipContent=u;exports.EbayTooltipHost=c;

package/ebay-tourtip/index.js

@@ -1,54 +1 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
-const useTooltip = require("../use-tooltip-7JxcZHJn.js");
-const classNames = require("classnames");
-require("../icon-B17Di3YL.js");
-require("../array.polyfill.flat-DyxysTxZ.js");
-const EbayTourtipContent = () => null;
-const EbayTourtipHost = () => null;
-const EbayTourtipFooter = ({ index, children }) => React.createElement(
-  React.Fragment,
-  null,
-  index !== void 0 && React.createElement("span", { className: "tourtip__index" }, index),
-  children
-);
-const EbayTourtipHeading = ({ as, children, className, ...props }) => {
-  const HeadingTag = as || "h2";
-  return React.createElement(HeadingTag, { ...props, className: classNames(`tourtip__heading`, className) }, children);
-};
-const EbayTourtip = ({ a11yCloseText, "aria-label": ariaLabel, className, children, onCollapse, onExpand, overlayStyle, pointer, ...rest }) => {
-  const hostRef = React.useRef();
-  const { isExpanded, collapseTooltip } = useTooltip.useTooltip({ onExpand, onCollapse, initialExpanded: true, hostRef });
-  const containerRef = React.useRef();
-  const content = common_componentUtils_utils.findComponent(children, EbayTourtipContent);
-  if (!content) {
-    throw new Error(`EbayTourtip: Please use a EbayTourtipContent that defines the content of the tourtip`);
-  }
-  const { children: contentChildren, contentProps } = content.props;
-  const host = common_componentUtils_utils.findComponent(children, EbayTourtipHost);
-  if (!host) {
-    throw new Error(`EbayTourtip: Please use a EbayTourtipHost that defines the host of the tourtip`);
-  }
-  const heading = common_componentUtils_utils.findComponent(children, EbayTourtipHeading);
-  const footer = common_componentUtils_utils.findComponent(children, EbayTourtipFooter);
-  return React.createElement(
-    useTooltip.Tooltip,
-    { ...rest, className, type: "tourtip", isExpanded, ref: containerRef },
-    React.createElement(useTooltip.TooltipHost, { ...host.props, forwardedRef: hostRef, "aria-label": ariaLabel, "aria-expanded": isExpanded }),
-    React.createElement(
-      useTooltip.TooltipContent,
-      { ...contentProps, a11yCloseText, onClose: collapseTooltip, pointer, showCloseButton: true, style: overlayStyle, type: "tourtip" },
-      heading,
-      contentChildren,
-      footer && React.createElement(useTooltip.TooltipFooter, { type: "tourtip" }, footer)
-    )
-  );
-};
-exports.Tooltip = useTooltip.Tooltip;
-exports.EbayTourtip = EbayTourtip;
-exports.EbayTourtipContent = EbayTourtipContent;
-exports.EbayTourtipFooter = EbayTourtipFooter;
-exports.EbayTourtipHeading = EbayTourtipHeading;
-exports.EbayTourtipHost = EbayTourtipHost;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),i=require("../utils-C9NL3q0j.js"),n=require("../use-tooltip-BEiQpMDa.js"),F=require("classnames");require("../icon-D4RDqpD4.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:F("tourtip__heading",a)},r)},P=({a11yCloseText:e,"aria-label":r,className:a,children:o,onCollapse:s,onExpand:b,overlayStyle:m,pointer:h,...C})=>{const p=t.useRef(),{isExpanded:u,collapseTooltip:g}=n.useTooltip({onExpand:b,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:m,type:"tourtip"},R,q,E&&t.createElement(n.TooltipFooter,{type:"tourtip"},E)))};exports.Tooltip=n.Tooltip;exports.EbayTourtip=P;exports.EbayTourtipContent=T;exports.EbayTourtipFooter=y;exports.EbayTourtipHeading=f;exports.EbayTourtipHost=d;