@ebay/ui-core-react 7.1.0 → 7.2.0

package/README.md

@@ -6,9 +6,9 @@ eBayUI React components
 
 ### Requirements
 
-* [Node.js](https://nodejs.org/en/) (v18.13)
-* [React](https://reactjs.org/) (v16.8+)
-* [eBay Skin](https://ebay.github.io/skin/) (v16)
+* [Node.js](https://nodejs.org/en/) (v20.12.2)
+* [React](https://reactjs.org/) (v18+, v16.8+ in maintenance mode)
+* [eBay Skin](https://ebay.github.io/skin/) (v18+)
 
 ### eBayUI Components
 * [ ] `ebay-3d-viewer`
@@ -17,13 +17,13 @@ eBayUI React components
 * [x] [ebay-badge](src/ebay-badge)
 * [x] [ebay-breadcrumbs](src/ebay-breadcrumbs)
 * [x] [ebay-button](src/ebay-button)
-* [ ] `ebay-calendar`
+* [x] [ebay-calendar](src/ebay-calendar)
 * [x] [ebay-carousel](src/ebay-carousel)
 * [x] [ebay-checkbox](src/ebay-checkbox)
 * [ ] `ebay-combobox`
 * [x] [ebay-confirm-dialog](src/ebay-confirm-dialog)
 * [x] [ebay-cta-button](src/ebay-cta-button)
-* [ ] `ebay-date-textbox`
+* [x] [ebay-date-textbox](src/ebay-date-textbox)
 * [ ] `ebay-details`
 * [x] [ebay-drawer-dialog](src/ebay-drawer-dialog)
 * [x] [ebay-eek](src/ebay-eek)
@@ -33,7 +33,7 @@ eBayUI React components
 * [x] [ebay-fake-menu-button](src/ebay-fake-menu-button)
 * [x] [ebay-fake-tabs](src/ebay-fake-tabs)
 * [x] [ebay-field](src/ebay-field)
-* [ ] `ebay-filter` (in progress...)
+* [ ] `ebay-filter`
 * [ ] `ebay-filter-menu`
 * [ ] `ebay-filter-menu-button`
 * [x] [ebay-icon-button](src/ebay-icon-button)
@@ -55,6 +55,7 @@ eBayUI React components
 * [x] [ebay-radio](src/ebay-radio)
 * [x] [ebay-section-title](src/ebay-section-title)
 * [x] [ebay-section-notice](src/ebay-section-notice)
+* [x] [ebay-segmented-buttons](src/ebay-segmented-buttons)
 * [x] [ebay-select](src/ebay-select)
 * [x] [ebay-signal](src/ebay-signal)
 * [x] [ebay-snackbar-dialog](src/ebay-snackbar-dialog)
@@ -123,16 +124,18 @@ Create an issue on github
 ## Changelog
 
 `@ebay/ui-core-react`
+### version 7.x (Skin 18, breaking changes in icon names)
+### version 6.x (Skin 17, breaking changes in icon names)
 ### version 5.x (Skin 16, breaking changes in event callbacks)
 ### version 4.x (Skin 16, breaking changes in icon names)
 ### version 3.x (Skin 15, some breaking changes in dialog components)
 ### version 2.x (Skin 15)
 
-`@ebay/ebayui-core-react`
+`@ebay/ebayui-core-react` (obsolete)
 ### version 10.x (Skin 14)
 ### version 9.x (skin 13)
 
-`ebayui-core-react`
+`ebayui-core-react` (obsolete)
 ### version 8.x (skin 12)
 ### version 6.x (skin 10)
 ### version 5.x (removed less, changed imports to minimize bundle size)

package/ebay-segmented-buttons/README.md

@@ -0,0 +1,42 @@
+# EbaySegmentedButtons
+
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/buttons-ebay-segmented-buttons--default)
+
+## Install
+```
+yarn add @ebay/ui-core-react @ebay/skin
+```
+
+## Usage
+```
+import React from 'react'
+import { EbaySegmentedButtons, EbaySegmentedButton as Button } from '@ebay/ui-core-react/ebay-segmented-buttons'
+import { EbayIcon } from '@ebay/ui-core-react/ebay-icon'
+import '@ebay/skin/segmented-buttons'
+
+export const Example = () => (
+    <EbaySegmentedButtons
+        size="large"
+        onChange={(e, { i, value }) => console.log('Selected:', i, value)}
+    >
+        <Button value="1" selected>Button 1</Button>
+        <Button value="2">Button 2</Button>
+        <Button value="3"><EbayIcon name="settings24" /> Button 3</Button>
+    />
+);
+```
+
+## EbaySegmentedButtons Props
+
+Name | Type     | Required | Description
+--- |----------| --- | ---
+`size` | enum     | No | Can be `regular` (default) or `large`
+`onChange` | Function | No | props: (e: event, { index: number, value: string), triggered on selected button change
+
+## EbaySegmentedButton Props
+
+Name | Type | Required                        | Description
+--- | --- |---------------------------------| ---
+`value` | String | No                              | the value to use with `onChange` callback
+`selected` | Boolean  | No | Whether or not the button is selected

package/ebay-segmented-buttons/button.d.ts

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

package/ebay-segmented-buttons/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ebay-segmented-buttons/button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE9C,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA8B7C,CAAA;AAED,eAAe,eAAe,CAAA"}

package/ebay-segmented-buttons/index.d.ts

@@ -0,0 +1,4 @@
+export { default as EbaySegmentedButtons } from './segmented-buttons';
+export { default as EbaySegmentedButton } from './button';
+export type { SegmentedButtonsProps, SegmentedButtonProps, SegmentedButtonSize } from './types';
+//# sourceMappingURL=index.d.ts.map

package/ebay-segmented-buttons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-segmented-buttons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,UAAU,CAAA;AACzD,YAAY,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA"}

package/ebay-segmented-buttons/segmented-buttons.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { SegmentedButtonsProps } from './types';
+declare const EbaySegmentedButtons: FC<SegmentedButtonsProps>;
+export default EbaySegmentedButtons;
+//# sourceMappingURL=segmented-buttons.d.ts.map

package/ebay-segmented-buttons/segmented-buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-buttons.d.ts","sourceRoot":"","sources":["../../src/ebay-segmented-buttons/segmented-buttons.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,EAAE,EAA0B,MAAM,OAAO,CAAA;AAEvE,OAAO,EAAwB,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAIrE,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,qBAAqB,CAsCnD,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/ebay-segmented-buttons/types.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+import { EbayChangeEventHandler, EbayMouseEventHandler } from '../common/event-utils/types';
+export type SegmentedButtonProps = Omit<ComponentProps<'button'>, 'onClick'> & {
+    value?: string;
+    selected?: boolean;
+    onClick?: EbayMouseEventHandler<HTMLButtonElement>;
+};
+export type SegmentedButtonSize = 'large' | 'regular';
+export type SegmentedButtonsProps = Omit<ComponentProps<'div'>, 'onChange'> & {
+    size?: SegmentedButtonSize;
+    onChange?: EbayChangeEventHandler<HTMLButtonElement, {
+        index: number;
+        value?: string;
+    }>;
+};
+//# sourceMappingURL=types.d.ts.map

package/ebay-segmented-buttons/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-segmented-buttons/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAE3F,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,GAAG;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,qBAAqB,CAAC,iBAAiB,CAAC,CAAC;CACtD,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,CAAA;AAErD,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC1E,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,QAAQ,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC3F,CAAA"}

package/ebay-segmented-buttons.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),b=require("classnames"),d=require("./utils-C9NL3q0j.js"),i=require("./icon-DK6eEQD8.js"),E=({selected:o,children:n,className:u,...a})=>{const c=d.findComponent(n,i.EbayIcon),l=()=>{const r=d.excludeComponent(n,i.EbayIcon);return e.createElement("span",{className:"segmented-buttons__button-cell"},c,e.createElement("span",null,r))};return e.createElement("li",null,e.createElement("button",{className:b("segmented-buttons__button",u),"aria-current":o||void 0,...a},c?l():n))},x=({size:o,className:n,onChange:u=()=>{},children:a,...c})=>{const l=d.filterByType(a,E),[r,p]=e.useState(l.findIndex(t=>t.props.selected)||0),g=(t,s,m)=>{p(s),u(t,{index:s,value:m})};return e.createElement("div",{className:b("segmented-buttons",o&&`segmented-buttons--${o}`,n),...c},e.createElement("ul",null,l.map((t,s)=>{const{value:m,...y}=t.props;return e.cloneElement(t,{...y,onClick:S=>g(S,s,m),selected:s===r})})))};exports.EbaySegmentedButton=E;exports.EbaySegmentedButtons=x;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "Skin components build off React",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"