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

package/ebay-listbox/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const listbox = require("../listbox-DGbY99kq.js");
+const listbox = require("../listbox-DfOw_fJc.js");
 exports.EbayListbox = listbox.EbayListbox;
 exports.EbayListboxOption = listbox.EbayListboxOption;
 exports.EbayListboxOptionDescription = listbox.EbayListboxOptionDescription;

package/ebay-listbox/listbox.d.ts

@@ -14,6 +14,7 @@ export type EbayListboxProps = Omit<ComponentProps<'div'>, 'onChange'> & {
     typeaheadTimeoutLength?: number;
     maxHeight?: string | number;
     selectClassName?: string;
+    activeClassName?: string;
     onChange?: EbayChangeEventHandler<HTMLSpanElement, ChangeEventProps>;
     onEscape?: () => void;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"listbox.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox/listbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA6B,EAAE,EAA4B,MAAM,OAAO,CAAA;AAItF,OAAO,EAAE,cAAc,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAA;AAInE,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAIlD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAClC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;IACrE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAuM5C,CAAA"}
+{"version":3,"file":"listbox.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox/listbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA6B,EAAE,EAA4B,MAAM,OAAO,CAAA;AAItF,OAAO,EAAE,cAAc,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAA;AAInE,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAIlD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAClC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;IACrE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA2L5C,CAAA"}

package/ebay-listbox-button/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const index = require("../index-DcH7Tjjd.js");
 const classNames = require("classnames");
-const listbox = require("../listbox-DGbY99kq.js");
+const listbox = require("../listbox-DfOw_fJc.js");
 const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
 const icon = require("../icon-B17Di3YL.js");
 function onKeyDown(e) {
@@ -144,7 +144,7 @@ const EbayListboxButton = ({ "aria-invalid": invalid, a11yIconPrefixText, border
         React.createElement(icon.EbayIcon, { name: "chevronDown12" })
       )
     ),
-    React.createElement(listbox.EbayListbox, { className: "listbox-button__listbox", selectClassName: "listbox-button__native", tabIndex: -1, listSelection, name, maxHeight, onChange: handleListboxChange, onEscape: handleListboxEscape }, options.map((option, index2) => React.createElement(listbox.EbayListboxOption, { key: option.props.value || index2, selected: index2 === selectedIndex, className: classNames("listbox-button__option", option.props.className), ...option.props })))
+    React.createElement(listbox.EbayListbox, { className: "listbox-button__listbox listbox-button__options", selectClassName: "listbox-button__native", activeClassName: "listbox-button__option--active", tabIndex: -1, listSelection, name, maxHeight, onChange: handleListboxChange, onEscape: handleListboxEscape }, options.map((option, index2) => React.createElement(listbox.EbayListboxOption, { ...option.props, key: option.props.value || index2, selected: index2 === selectedIndex, className: classNames("listbox-button__option", option.props.className) })))
   );
 };
 exports.EbayListboxButton = EbayListboxButton;

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

@@ -1 +1 @@
-{"version":3,"file":"listbox-button.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEV,cAAc,EACd,EAAE,EAKL,MAAM,OAAO,CAAA;AAOd,OAAO,EAAe,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAiDhD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;IACrE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAA;AAED,eAAO,MAAM,uBAAuB,2EAAoB,CAAA;AAExD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA8LxD,CAAA"}
+{"version":3,"file":"listbox-button.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEV,cAAc,EACd,EAAE,EAKL,MAAM,OAAO,CAAA;AAOd,OAAO,EAAe,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAiDhD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;IACrE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAA;AAED,eAAO,MAAM,uBAAuB,2EAAoB,CAAA;AAExD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA+LxD,CAAA"}

package/{listbox-DGbY99kq.js → listbox-DfOw_fJc.js}

@@ -542,7 +542,7 @@ const EbayListboxOption = ({ className, icon: icon$1, text, children, disabled,
   );
 };
 const TYPEAHEAD_TIMEOUT_LENGTH = 1300;
-const EbayListbox = ({ name, className, disabled, children, tabIndex = 0, listSelection, maxHeight, typeaheadTimeoutLength, selectClassName, onChange = () => {
+const EbayListbox = ({ name, className, disabled, children, tabIndex = 0, listSelection, maxHeight, typeaheadTimeoutLength, selectClassName, activeClassName, onChange = () => {
 }, onEscape = () => {
 }, ...rest }) => {
   var _a;
@@ -589,20 +589,8 @@ const EbayListbox = ({ name, className, disabled, children, tabIndex = 0, listSe
     const itemIndex = typeaheadRef.current.getIndex(containerRef.current.children, event.key, typeaheadTimeoutLength || TYPEAHEAD_TIMEOUT_LENGTH);
     if (itemIndex !== -1) {
       activeDescendantRef.current.index = itemIndex;
-      scrollOptions(itemIndex);
-    }
-  }
-  function scrollOptions(index2) {
-    const listboxOptionsContainerNode = containerRef.current;
-    const currentTarget = listboxOptionsContainerNode.querySelectorAll("[role=option]")[index2];
-    if (listboxOptionsContainerNode.scrollHeight > listboxOptionsContainerNode.clientHeight) {
-      const scrollBottom = listboxOptionsContainerNode.clientHeight + listboxOptionsContainerNode.scrollTop;
-      const elementBottom = currentTarget.offsetTop + currentTarget.offsetHeight;
-      if (elementBottom > scrollBottom) {
-        listboxOptionsContainerNode.scrollTop = elementBottom - listboxOptionsContainerNode.clientHeight;
-      } else if (currentTarget.offsetTop < listboxOptionsContainerNode.scrollTop) {
-        listboxOptionsContainerNode.scrollTop = currentTarget.offsetTop;
-      }
+      const selectedOption = containerRef.current.querySelectorAll("[role=option]")[itemIndex];
+      containerRef.current.scrollTop = selectedOption.offsetTop - containerRef.current.offsetHeight / 2;
     }
   }
   function handleMouseDown() {
@@ -623,7 +611,7 @@ const EbayListbox = ({ name, className, disabled, children, tabIndex = 0, listSe
       const container = containerRef.current;
       const optionsContainer = containerRef.current;
       activeDescendantRef.current = createLinear(container, optionsContainer, optionsContainer, ".listbox__option[role=option]", {
-        activeDescendantClassName: "listbox__option--active",
+        activeDescendantClassName: activeClassName || "listbox__option--active",
         autoInit: selectedIndex,
         autoReset: null,
         autoScroll: listSelection !== "auto"

package/package.json

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