@ebay/ui-core-react 7.3.4 → 7.4.0-alpha.0

package/listbox-Bq3f2oxx.js

@@ -0,0 +1 @@
+"use strict";const e=require("react"),H=require("makeup-active-descendant"),A=require("makeup-typeahead"),v=require("classnames"),L=require("./common/component-utils/utils/index.js"),B=require("./icon-TuxfQndO.js");function M(s){if(!s)return;const o=s.parentElement,l=s.offsetTop+s.offsetHeight,d=o.scrollTop+o.offsetHeight;s.offsetTop<o.scrollTop?o.scrollTop=s.offsetTop:l>d&&(o.scrollTop=l-o.offsetHeight)}const k=({children:s,className:o,...l})=>e.createElement("div",{className:v("listbox__description",o),...l},s),I=({className:s,icon:o,text:l,children:d,disabled:b,tabIndex:i,selected:h,...x})=>{const r=L.filterByType(d,k),m=l||(r!=null&&r.length?"":d);return e.createElement("div",{...x,tabIndex:b?-1:i,className:v("listbox__option",s),"aria-disabled":b,"aria-selected":h,role:"option"},o?e.createElement("span",{className:"listbox__value"},o,m?e.createElement("span",null,m):null,r!=null&&r.length?r:null):e.createElement(e.Fragment,null,e.createElement("span",{className:"listbox__value"},m),r!=null&&r.length?r:null),e.createElement(B.EbayIcon,{name:"tick16"}))},F=1300,K=({name:s,className:o,disabled:l,children:d,tabIndex:b=0,listSelection:i,maxHeight:h,typeaheadTimeoutLength:x,selectClassName:r,onChange:m=()=>{},onEscape:R=()=>{},...N})=>{var D;const u=L.filterByType(d,I),_=u.findIndex(t=>t.props.selected),[p,T]=e.useState(u.findIndex(t=>t.props.selected));e.useEffect(()=>{_!==p&&T(_)},[_]);const c=e.useRef(),f=e.useRef(),E=e.useRef(),y=e.useRef(!1);function g(t,n,a){n===p||u[n].props.disabled||(T(n),m(t,{index:n,selected:[u[n].props.value],wasClicked:a}))}function q(t){switch(t.code){case"Esc":case"Escape":R();break;case"Space":case"Enter":g(t,f.current.index,!1);break;default:return}const n=E.current.getIndex(c.current.children,t.key,x||F);if(n!==-1){f.current.index=n;const a=c.current.querySelectorAll("[role=option]")[n];c.current.scrollTop=a.offsetTop-c.current.offsetHeight/2}}function w(){y.current=!0}return e.useEffect(()=>{const t=n=>{const a=parseInt(n.detail.toIndex,10),C=c.current?c.current.querySelectorAll("[role=option]")[p]:null,O=y.current;M(C),y.current&&(y.current=!1),g(n,a,O)};if(u.length&&!l){const n=c.current,a=c.current;f.current=H.createLinear(n,a,a,".listbox__option[role=option]",{activeDescendantClassName:"listbox__option--active",autoInit:p,autoReset:null,autoScroll:i!=="auto"}),E.current=A()}return i==="auto"&&c.current.addEventListener("activeDescendantChange",t),()=>{f.current&&(f.current.reset(),f.current.destroy(),f.current=void 0),E.current&&(E.current.destroy(),E.current=void 0),c.current&&c.current.removeEventListener("activeDescendantChange",t)}},[p,l,i]),e.createElement(e.Fragment,null,e.createElement("div",{...N,tabIndex:b,ref:c,role:"listbox",onKeyDown:i!=="auto"?q:void 0,className:v("listbox__options",o),style:{maxHeight:h}},u.map((t,n)=>e.cloneElement(t,{key:t.props.value||n,...t.props,onMouseDown:i==="auto"?w:void 0,onClick:a=>{i!=="auto"&&g(a,n,!0)},selected:n===p}))),e.createElement("select",{hidden:!0,className:v("listbox__native",r),name:s,value:(D=u[p])==null?void 0:D.props.value,onChange:()=>{}},u.map((t,n)=>e.createElement("option",{key:t.props.value||n,value:t.props.value,disabled:t.props.disabled}))))};exports.EbayListbox=K;exports.EbayListboxOption=I;exports.EbayListboxOptionDescription=k;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "7.3.4",
+  "version": "7.4.0-alpha.0",
   "description": "Skin components build off React",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -128,9 +128,12 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
-    "makeup-expander": "^0.10.1",
+    "makeup-active-descendant": "^0.7.3",
+    "makeup-expander": "^0.11.3",
     "makeup-keyboard-trap": "^0.4.1",
+    "makeup-prevent-scroll-keys": "^0.3.2",
     "makeup-screenreader-trap": "^0.4.1",
+    "makeup-typeahead": "^0.3.2",
     "react-remove-scroll": "^2.2.0"
   },
   "devDependencies": {

package/utils/scroll.d.ts

@@ -0,0 +1,2 @@
+export declare function scroll(el?: HTMLElement): void;
+//# sourceMappingURL=scroll.d.ts.map

package/utils/scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../src/utils/scroll.ts"],"names":[],"mappings":"AAAA,wBAAgB,MAAM,CAAC,EAAE,CAAC,EAAE,WAAW,GAAG,IAAI,CAc7C"}

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

@@ -1,10 +0,0 @@
-import { ComponentProps, FC, MouseEvent, RefObject } from 'react';
-type EbayListboxButtonOptionProps = ComponentProps<'input'> & {
-    selected?: boolean;
-    index?: number;
-    onClick?: (event: MouseEvent<HTMLDivElement>, value: any, index: number) => void;
-    innerRef?: RefObject<HTMLDivElement>;
-};
-declare const ListboxOption: FC<EbayListboxButtonOptionProps>;
-export default ListboxOption;
-//# sourceMappingURL=listbox-button-option.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"listbox-button-option.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button-option.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIxE,KAAK,4BAA4B,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACxC,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,4BAA4B,CA0BnD,CAAA;AAED,eAAe,aAAa,CAAA"}