@ebay/ui-core-react 8.0.4 → 8.1.1

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.
Files changed (115) hide show
  1. package/checkbox-Bb3s3Jof.js +1 -0
  2. package/common/dropdown.d.ts +61 -0
  3. package/common/dropdown.d.ts.map +1 -1
  4. package/common/floating-label-utils/hooks.d.ts +10 -21
  5. package/common/floating-label-utils/hooks.d.ts.map +1 -1
  6. package/dropdown-BLiIyhWy.js +1 -0
  7. package/ebay-avatar/README.md +44 -0
  8. package/ebay-avatar/avatar-image.d.ts +5 -0
  9. package/ebay-avatar/avatar-image.d.ts.map +1 -0
  10. package/ebay-avatar/avatar.d.ts +11 -0
  11. package/ebay-avatar/avatar.d.ts.map +1 -0
  12. package/ebay-avatar/index.d.ts +4 -0
  13. package/ebay-avatar/index.d.ts.map +1 -0
  14. package/ebay-avatar/index.js +1 -0
  15. package/ebay-avatar/types.d.ts +3 -0
  16. package/ebay-avatar/types.d.ts.map +1 -0
  17. package/ebay-avatar/utils.d.ts +3 -0
  18. package/ebay-avatar/utils.d.ts.map +1 -0
  19. package/ebay-carousel/README.md +5 -0
  20. package/ebay-carousel/carousel-item.d.ts.map +1 -1
  21. package/ebay-carousel/carousel-list.d.ts +1 -0
  22. package/ebay-carousel/carousel-list.d.ts.map +1 -1
  23. package/ebay-carousel/carousel.d.ts +3 -0
  24. package/ebay-carousel/carousel.d.ts.map +1 -1
  25. package/ebay-carousel/helpers.d.ts +14 -0
  26. package/ebay-carousel/helpers.d.ts.map +1 -1
  27. package/ebay-carousel/index.js +1 -1
  28. package/ebay-carousel/types.d.ts +2 -0
  29. package/ebay-carousel/types.d.ts.map +1 -1
  30. package/ebay-checkbox/README.md +20 -8
  31. package/ebay-checkbox/checkbox.d.ts +6 -17
  32. package/ebay-checkbox/checkbox.d.ts.map +1 -1
  33. package/ebay-checkbox/index.d.ts +2 -1
  34. package/ebay-checkbox/index.d.ts.map +1 -1
  35. package/ebay-checkbox/index.js +1 -1
  36. package/ebay-checkbox/types.d.ts +10 -0
  37. package/ebay-checkbox/types.d.ts.map +1 -0
  38. package/ebay-combobox/README.md +61 -0
  39. package/ebay-combobox/combobox-button.d.ts +5 -0
  40. package/ebay-combobox/combobox-button.d.ts.map +1 -0
  41. package/ebay-combobox/combobox-option.d.ts +9 -0
  42. package/ebay-combobox/combobox-option.d.ts.map +1 -0
  43. package/ebay-combobox/combobox.d.ts +25 -0
  44. package/ebay-combobox/combobox.d.ts.map +1 -0
  45. package/ebay-combobox/index.d.ts +5 -0
  46. package/ebay-combobox/index.d.ts.map +1 -0
  47. package/ebay-combobox/index.js +1 -0
  48. package/ebay-combobox/types.d.ts +18 -0
  49. package/ebay-combobox/types.d.ts.map +1 -0
  50. package/ebay-date-textbox/index.js +1 -1
  51. package/ebay-fake-menu-button/index.js +1 -1
  52. package/ebay-field/README.md +2 -2
  53. package/ebay-listbox-button/index.js +1 -1
  54. package/ebay-menu-button/index.js +1 -1
  55. package/ebay-pagination/index.js +1 -1
  56. package/ebay-select/ebay-select.d.ts.map +1 -1
  57. package/ebay-select/index.js +1 -1
  58. package/ebay-skeleton/README.md +108 -0
  59. package/ebay-skeleton/ebay-skeleton-avatar.d.ts +6 -0
  60. package/ebay-skeleton/ebay-skeleton-avatar.d.ts.map +1 -0
  61. package/ebay-skeleton/ebay-skeleton-button.d.ts +8 -0
  62. package/ebay-skeleton/ebay-skeleton-button.d.ts.map +1 -0
  63. package/ebay-skeleton/ebay-skeleton-image.d.ts +6 -0
  64. package/ebay-skeleton/ebay-skeleton-image.d.ts.map +1 -0
  65. package/ebay-skeleton/ebay-skeleton-text.d.ts +9 -0
  66. package/ebay-skeleton/ebay-skeleton-text.d.ts.map +1 -0
  67. package/ebay-skeleton/ebay-skeleton-textbox.d.ts +6 -0
  68. package/ebay-skeleton/ebay-skeleton-textbox.d.ts.map +1 -0
  69. package/ebay-skeleton/ebay-skeleton.d.ts +7 -0
  70. package/ebay-skeleton/ebay-skeleton.d.ts.map +1 -0
  71. package/ebay-skeleton/index.d.ts +7 -0
  72. package/ebay-skeleton/index.d.ts.map +1 -0
  73. package/ebay-skeleton/index.js +1 -0
  74. package/ebay-skeleton/types.d.ts +5 -0
  75. package/ebay-skeleton/types.d.ts.map +1 -0
  76. package/ebay-split-button/index.js +1 -1
  77. package/ebay-table/README.md +125 -0
  78. package/ebay-table/index.d.ts +6 -0
  79. package/ebay-table/index.d.ts.map +1 -0
  80. package/ebay-table/index.js +1 -0
  81. package/ebay-table/table-cell.d.ts +9 -0
  82. package/ebay-table/table-cell.d.ts.map +1 -0
  83. package/ebay-table/table-header.d.ts +13 -0
  84. package/ebay-table/table-header.d.ts.map +1 -0
  85. package/ebay-table/table-row.d.ts +19 -0
  86. package/ebay-table/table-row.d.ts.map +1 -0
  87. package/ebay-table/table.d.ts +15 -0
  88. package/ebay-table/table.d.ts.map +1 -0
  89. package/ebay-table/types.d.ts +23 -0
  90. package/ebay-table/types.d.ts.map +1 -0
  91. package/ebay-textbox/index.d.ts +0 -1
  92. package/ebay-textbox/index.d.ts.map +1 -1
  93. package/ebay-textbox/index.js +1 -1
  94. package/ebay-textbox/textbox.d.ts.map +1 -1
  95. package/ebay-toggle-button/index.js +1 -1
  96. package/ebay-toggle-button-group/index.js +1 -1
  97. package/ebay-tri-state-checkbox/Readme.md +72 -0
  98. package/ebay-tri-state-checkbox/index.d.ts +3 -0
  99. package/ebay-tri-state-checkbox/index.d.ts.map +1 -0
  100. package/ebay-tri-state-checkbox/index.js +1 -0
  101. package/ebay-tri-state-checkbox/tri-state-checkbox.d.ts +15 -0
  102. package/ebay-tri-state-checkbox/tri-state-checkbox.d.ts.map +1 -0
  103. package/ebay-tri-state-checkbox/types.d.ts +11 -0
  104. package/ebay-tri-state-checkbox/types.d.ts.map +1 -0
  105. package/hooks-S6mbahSV.js +1 -0
  106. package/{menu-button-label-Cu3rEUWv.js → menu-button-label-C_SUnCJn.js} +1 -1
  107. package/{menu-button-label-Bjy8tyX5.js → menu-button-label-Ck5QyJG2.js} +1 -1
  108. package/package.json +2 -1
  109. package/textbox-90ZPJmqa.js +1 -0
  110. package/toggle-button-Bzon4-mn.js +1 -0
  111. package/tri-state-checkbox-BX-snR_a.js +1 -0
  112. package/dropdown-JMZDOaC2.js +0 -1
  113. package/hooks-BJqqLO4L.js +0 -1
  114. package/textbox-CSLyIuKO.js +0 -1
  115. package/toggle-button-C-fyjkaE.js +0 -1
@@ -0,0 +1,5 @@
1
+ import { ComponentProps, FC } from 'react';
2
+ export type EbayComboboxButtonProps = ComponentProps<'button'>;
3
+ declare const EbayComboboxButton: FC<EbayComboboxButtonProps>;
4
+ export default EbayComboboxButton;
5
+ //# sourceMappingURL=combobox-button.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"combobox-button.d.ts","sourceRoot":"","sources":["../../src/ebay-combobox/combobox-button.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjD,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAA;AAE9D,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAEnD,CAAA;AAED,eAAe,kBAAkB,CAAA"}
@@ -0,0 +1,9 @@
1
+ import { ComponentProps, FC } from 'react';
2
+ export type EbayComboboxOptionProps = Omit<ComponentProps<'div'>, 'children'> & {
3
+ text: string;
4
+ value?: string;
5
+ selected?: boolean;
6
+ };
7
+ declare const EbayComboboxOption: FC<EbayComboboxOptionProps>;
8
+ export default EbayComboboxOption;
9
+ //# sourceMappingURL=combobox-option.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"combobox-option.d.ts","sourceRoot":"","sources":["../../src/ebay-combobox/combobox-option.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC5E,IAAI,EAAE,MAAM,CAAC;IAGb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAA;AAED,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAcnD,CAAA;AAED,eAAe,kBAAkB,CAAA"}
@@ -0,0 +1,25 @@
1
+ import { ComponentProps, FC, Ref } from 'react';
2
+ import { Autocomplete, ListSelection, ComboboxSelectHandler, ComboboxFocusHandler, ComboboxClickHandler, ComboboxInputChangeHandler, ComboboxChangeHandler } from './types';
3
+ export type EbayComboboxProps = Omit<ComponentProps<'input'>, 'defaultValue' | 'value' | 'onFocus' | 'onInputChange' | 'onChange' | 'onSelect' | 'autoComplete'> & {
4
+ floatingLabel?: string;
5
+ fluid?: boolean;
6
+ expanded?: boolean;
7
+ borderless?: boolean;
8
+ value?: string;
9
+ defaultValue?: string;
10
+ autocomplete?: Autocomplete;
11
+ listSelection?: ListSelection;
12
+ forwardedRef?: Ref<HTMLInputElement>;
13
+ opaqueLabel?: boolean;
14
+ onFocus?: ComboboxFocusHandler;
15
+ onClick?: ComboboxClickHandler;
16
+ onExpand?: () => void;
17
+ onCollapse?: () => void;
18
+ onInputChange?: ComboboxInputChangeHandler;
19
+ onFloatingLabelInit?: () => void;
20
+ onChange?: ComboboxChangeHandler;
21
+ onSelect?: ComboboxSelectHandler;
22
+ };
23
+ declare const EbayCombobox: FC<EbayComboboxProps>;
24
+ export default EbayCombobox;
25
+ //# sourceMappingURL=combobox.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/ebay-combobox/combobox.tsx"],"names":[],"mappings":"AAAA,OAAc,EACV,cAAc,EACd,EAAE,EACF,GAAG,EAKN,MAAM,OAAO,CAAA;AAYd,OAAO,EACH,YAAY,EAEZ,aAAa,EACb,qBAAqB,EAErB,oBAAoB,EACpB,oBAAoB,EACpB,0BAA0B,EAC1B,qBAAqB,EACxB,MAAM,SAAS,CAAA;AAEhB,MAAM,MAAM,iBAAiB,GACzB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAC1B,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,eAAe,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,CAAC,GAClG;IACE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,0BAA0B,CAAC;IAC3C,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CACpC,CAAA;AAEL,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAoRvC,CAAA;AAED,eAAe,YAAY,CAAA"}
@@ -0,0 +1,5 @@
1
+ export { default as EbayCombobox, type EbayComboboxProps } from './combobox';
2
+ export { default as EbayComboboxOption, type EbayComboboxOptionProps } from './combobox-option';
3
+ export { default as EbayComboboxButton, type EbayComboboxButtonProps } from './combobox-button';
4
+ export * from './types';
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAC5E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;AAC/F,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;AAC/F,cAAc,SAAS,CAAA"}
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("../tslib.es6-C4EgNkz1.js"),t=require("react"),x=require("classnames"),be=require("../hooks-S6mbahSV.js"),M=require("../utils-C9NL3q0j.js"),I=require("../dropdown-BLiIyhWy.js"),T=a=>{var{className:b}=a,d=V.__rest(a,["className"]);return t.createElement("button",Object.assign({className:x("icon-btn","icon-btn--transparent",b)},d))},j=a=>{var{text:b,className:d,selected:C}=a,r=V.__rest(a,["text","className","selected"]);return t.createElement("div",Object.assign({},r,{role:"option",className:x("combobox__option",d),tabIndex:-1,"aria-selected":C}),b)},pe=a=>{var{className:b,floatingLabel:d,fluid:C,expanded:r,borderless:K,autocomplete:v="none",listSelection:k="automatic",forwardedRef:fe,defaultValue:A="",value:g,placeholder:H,opaqueLabel:P,children:D,onFocus:U=()=>{},onClick:Y=()=>{},onExpand:z=()=>{},onCollapse:G=()=>{},onInputChange:O=()=>{},onFloatingLabelInit:J=()=>{},onChange:Q=()=>{},onSelect:W=()=>{},onKeyDown:X=()=>{}}=a,h=V.__rest(a,["className","floatingLabel","fluid","expanded","borderless","autocomplete","listSelection","forwardedRef","defaultValue","value","placeholder","opaqueLabel","children","onFocus","onClick","onExpand","onCollapse","onInputChange","onFloatingLabelInit","onChange","onSelect","onKeyDown"]);const l=M.findComponent(D,T),y=M.filterByType(D,j),E=t.useRef(null),s=t.useRef(null),S=t.useRef(null),f=I.useExpander({ref:E,expanded:r,options:{autoCollapse:r,expandOnFocus:!0,collapseOnFocusOut:!r&&!!l,contentSelector:'[role="listbox"]',hostSelector:'[role="combobox"]',expandedClass:"combobox--expanded",simulateSpacebarClick:!0},onExpand:z,onCollapse:G},[r]),{overlayStyles:Z,refs:L}=I.useFloatingDropdown({open:f.isExpanded}),[$,N]=t.useState(A||""),c=typeof g<"u"?g:$;typeof g>"u"&&!O&&console.warn("EbayCombobox: You provided a value prop without an onInputChange handler.This will render a read-only input field. If you want the input to be editable, provide an onInputChange handler.");const _=(e,o)=>{c!==o&&(N(o),s.current&&(s.current.selectionStart=s.current.selectionEnd=o.length,s.current.focus()),W(e,p({currentInputValue:o})))};function ee(){return v==="none"?y||[]:y.filter(e=>{var o,n;return(o=e.props.text)===null||o===void 0?void 0:o.toLowerCase().includes((n=c==null?void 0:c.trim())===null||n===void 0?void 0:n.toLowerCase())})}const u=t.useMemo(()=>ee(),[v,c,y]),oe=t.useCallback((e,{toIndex:o})=>{if(k==="automatic"){const n=u[o];n&&s.current&&(s.current.value=n.props.text)}},[k,u]),ne=I.useActiveDescendant({ref:E,focusElementRef:s,itemContainerRef:S,disabled:!u.length,onChange:oe,options:{activeDescendantClassName:"combobox__option--active",autoInit:-1,autoReset:-1,autoScroll:!0,axis:"y"}}),R=C?"div":"span",F=be.useFloatingLabel({text:d,disabled:h.disabled,containerTagName:R,opaqueLabel:P,onMount:J}),te=d?F.Container:R,m=t.useRef(!1),le=e=>{var o,n;m.current=!0,(n=l==null?void 0:(o=l.props).onClick)===null||n===void 0||n.call(o,e)},ae=e=>{var o,n;m.current=!0,(n=l==null?void 0:(o=l.props).onMouseDown)===null||n===void 0||n.call(o,e)};function w(){f.collapse()}function q(){f.expand()}function se(e){const o=u.find(n=>n.props.text===e);return o?{text:o.props.text,value:o.props.value}:{}}function p(e){return{currentInputValue:e.currentInputValue,selectedOption:se(e.currentInputValue)}}const re=e=>{const o=e.target.value;N(e.target.value),O(e,p({currentInputValue:o}))},B=t.useRef(""),ce=e=>{m.current||w(),m.current=!1;const o=e.target.value;o!==B.current&&(B.current=o,Q(e,p({currentInputValue:o})))},ue=e=>{const o=e.target;o===document.activeElement&&q(),Y(e,p({currentInputValue:o.value}))},ie=e=>{U(e,p({currentInputValue:e.target.value}))},de=e=>{if(e.key==="ArrowDown")q();else if(e.key==="Escape")w();else if(e.key==="Enter"&&f.isExpanded){const o=ne.getIndex();o!==-1&&_(e,u[o].props.text),r||w()}X(e)};return t.createElement(te,{ref:E,className:x("combobox",b)},t.createElement(F.Label,{htmlFor:h.id}),t.createElement("span",{className:x("combobox__control",{"combobox__control--actionable":l,"combobox__control--borderless":K})},t.createElement("input",Object.assign({},h,{ref:e=>{L.setHost(e),s.current=e},type:"text",role:"combobox",value:c,"aria-autocomplete":v,"aria-haspopup":"listbox",autoComplete:"off","aria-expanded":"false",onChange:re,onBlur:ce,onClick:ue,onFocus:ie,onKeyDown:de,placeholder:H})),l?t.cloneElement(l,{onClick:le,onMouseDown:ae}):null),u.length>0&&t.createElement("div",{role:"listbox",className:"combobox__listbox",ref:e=>{L.setOverlay(e),S.current=e},style:Z},u.map(e=>t.cloneElement(e,{selected:(e.props.value||e.props.text)===c,onClick:o=>{var n,i;_(o,e.props.text),(i=(n=e.props).onClick)===null||i===void 0||i.call(n,o)},onMouseDown:o=>{var n,i;_(o,e.props.text),(i=(n=e.props).onMouseDown)===null||i===void 0||i.call(n,o)}}))))};exports.EbayCombobox=pe;exports.EbayComboboxButton=T;exports.EbayComboboxOption=j;
@@ -0,0 +1,18 @@
1
+ import { KeyboardEvent, SyntheticEvent } from 'react';
2
+ import { EbayChangeEventHandler, EbayFocusEventHandler, EbayMouseEventHandler } from '../events';
3
+ export type Autocomplete = 'list' | 'none';
4
+ export type ListSelection = 'automatic' | 'manual';
5
+ export type EventData = {
6
+ currentInputValue: string;
7
+ selectedOption?: {
8
+ text?: string;
9
+ value?: string;
10
+ };
11
+ };
12
+ export type ComboboxSelectEventArgs = SyntheticEvent<HTMLElement> | KeyboardEvent<HTMLInputElement>;
13
+ export type ComboboxSelectHandler = (event: ComboboxSelectEventArgs, data: EventData) => void;
14
+ export type ComboboxFocusHandler = EbayFocusEventHandler<HTMLInputElement, EventData>;
15
+ export type ComboboxClickHandler = EbayMouseEventHandler<HTMLInputElement, EventData>;
16
+ export type ComboboxInputChangeHandler = EbayChangeEventHandler<HTMLInputElement, EventData>;
17
+ export type ComboboxChangeHandler = EbayChangeEventHandler<HTMLInputElement, EventData>;
18
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-combobox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACxB,MAAM,WAAW,CAAA;AAElB,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,CAAA;AAC1C,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,QAAQ,CAAA;AAClD,MAAM,MAAM,SAAS,GAAG;IACpB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACL,CAAA;AAED,MAAM,MAAM,uBAAuB,GAC7B,cAAc,CAAC,WAAW,CAAC,GAC3B,aAAa,CAAC,gBAAgB,CAAC,CAAA;AAErC,MAAM,MAAM,qBAAqB,GAAE,CAAC,KAAK,EAAE,uBAAuB,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;AAE5F,MAAM,MAAM,oBAAoB,GAAE,qBAAqB,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAA;AACpF,MAAM,MAAM,oBAAoB,GAAE,qBAAqB,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAA;AACpF,MAAM,MAAM,0BAA0B,GAAG,sBAAsB,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAA;AAC5F,MAAM,MAAM,qBAAqB,GAAE,sBAAsB,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAA"}
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("../tslib.es6-C4EgNkz1.js"),a=require("react"),c=require("makeup-expander"),K=require("classnames"),v=require("../calendar-BZZF3Pad.js"),i=require("../textbox-CSLyIuKO.js");require("../icon-CeLPlCml.js");const Q=require("../dropdown-JMZDOaC2.js");var N;const{default:X=c}=(N=c==null?void 0:c.default)!=null&&N.__esModule?c.default:c,Z=600,$=m=>{var{className:D,inputPlaceholderText:g="YYYY-MM-DD",a11yOpenPopoverText:_="open calendar",range:o,value:y,rangeEnd:I,defaultValue:q,defaultRangeEnd:w,collapseOnSelect:M,onChange:p=()=>{},onInputChange:A=()=>{},onInputRangeEndChange:L=()=>{}}=m,V=J.__rest(m,["className","inputPlaceholderText","a11yOpenPopoverText","range","value","rangeEnd","defaultValue","defaultRangeEnd","collapseOnSelect","onChange","onInputChange","onInputRangeEndChange"]);const S=a.useRef(),[Y,d]=a.useState(q||""),[B,u]=a.useState(w||""),b=i.isControlled(y)?y:Y,T=i.isControlled(I)?I:B,[l,E]=a.useState(()=>v.dateArgToISO(b)),[s,x]=a.useState(()=>v.dateArgToISO(T)),[C,O]=a.useState(!1),[F,z]=a.useState(1),{overlayStyles:H,refs:h}=Q.useFloatingDropdown({open:C}),f=h.host,W=()=>{O(!0)},j=()=>{O(!1)};a.useEffect(()=>{if(!f.current)return;S.current=new X(f.current,{hostSelector:".ebay-date-textbox--main > .icon-btn",contentSelector:".date-textbox__popover",expandOnClick:!0,autoCollapse:!0}),f.current.addEventListener("expander-expand",W),f.current.addEventListener("expander-collapse",j);const e=()=>{z(document.documentElement.clientWidth<Z?1:2)};return e(),window.addEventListener("resize",e),()=>{var t;(t=S.current)===null||t===void 0||t.destroy(),window.removeEventListener("resize",e)}},[]);const P=(e,t)=>{const r=new Date(e.target.value),n=isNaN(r.getTime())?null:v.toISO(r);t===0?(E(n),d(n||"")):(x(n),u(n||"")),o?p(e,{rangeStart:t===0?n:l,rangeEnd:t===1?n:s}):p(e,{selected:n})},k=(e,{iso:t})=>{if(E(t),d(t),o){const r=l||s,n={rangeStart:t,rangeEnd:r};l&&s?(u(""),x(null),n.rangeEnd=null):r&&(r<t?(E(r),d(r),u(t),x(t),n.rangeStart=r,n.rangeEnd=t):(E(t),d(t),u(r),x(r),n.rangeStart=t,n.rangeEnd=r)),p(e,n)}else p(e,{selected:t});M&&(S.current.expanded=!1)},R=(e,t)=>{t===0?(d(e.target.value),A(e)):(u(e.target.value),L(e))},[U,G]=Array.isArray(g)?g:[g,g];return a.createElement("span",{className:K("date-textbox",D),ref:h.setHost},o&&a.createElement(i.EbayTextbox,{value:b,placeholder:U,onInputChange:e=>R(e,0),onBlur:e=>P(e,0)}),a.createElement(i.EbayTextbox,{className:"ebay-date-textbox--main",placeholder:G,value:o?T:b,onInputChange:e=>R(e,o?1:0),onBlur:e=>P(e,o?1:0)},a.createElement(i.EbayTextboxPostfixIcon,{name:"calendar24",buttonAriaLabel:_})),a.createElement("div",{hidden:!C,ref:h.setOverlay,style:H,className:"date-textbox__popover"},a.createElement(v.EbayCalendar,Object.assign({},V,{range:o,interactive:!0,navigable:!0,numMonths:F,selected:l&&s?[l,s]:l||s||void 0,onSelect:k}))))};exports.EbayDateTextbox=$;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("../tslib.es6-C4EgNkz1.js"),a=require("react"),c=require("makeup-expander"),K=require("classnames"),v=require("../calendar-BZZF3Pad.js"),i=require("../textbox-90ZPJmqa.js");require("../icon-CeLPlCml.js");const Q=require("../dropdown-BLiIyhWy.js");var N;const{default:X=c}=(N=c==null?void 0:c.default)!=null&&N.__esModule?c.default:c,Z=600,$=m=>{var{className:D,inputPlaceholderText:g="YYYY-MM-DD",a11yOpenPopoverText:_="open calendar",range:o,value:y,rangeEnd:I,defaultValue:q,defaultRangeEnd:w,collapseOnSelect:M,onChange:p=()=>{},onInputChange:A=()=>{},onInputRangeEndChange:L=()=>{}}=m,V=J.__rest(m,["className","inputPlaceholderText","a11yOpenPopoverText","range","value","rangeEnd","defaultValue","defaultRangeEnd","collapseOnSelect","onChange","onInputChange","onInputRangeEndChange"]);const S=a.useRef(),[Y,d]=a.useState(q||""),[B,u]=a.useState(w||""),b=i.isControlled(y)?y:Y,T=i.isControlled(I)?I:B,[l,E]=a.useState(()=>v.dateArgToISO(b)),[s,x]=a.useState(()=>v.dateArgToISO(T)),[C,O]=a.useState(!1),[F,z]=a.useState(1),{overlayStyles:H,refs:h}=Q.useFloatingDropdown({open:C}),f=h.host,W=()=>{O(!0)},j=()=>{O(!1)};a.useEffect(()=>{if(!f.current)return;S.current=new X(f.current,{hostSelector:".ebay-date-textbox--main > .icon-btn",contentSelector:".date-textbox__popover",expandOnClick:!0,autoCollapse:!0}),f.current.addEventListener("expander-expand",W),f.current.addEventListener("expander-collapse",j);const e=()=>{z(document.documentElement.clientWidth<Z?1:2)};return e(),window.addEventListener("resize",e),()=>{var t;(t=S.current)===null||t===void 0||t.destroy(),window.removeEventListener("resize",e)}},[]);const P=(e,t)=>{const r=new Date(e.target.value),n=isNaN(r.getTime())?null:v.toISO(r);t===0?(E(n),d(n||"")):(x(n),u(n||"")),o?p(e,{rangeStart:t===0?n:l,rangeEnd:t===1?n:s}):p(e,{selected:n})},k=(e,{iso:t})=>{if(E(t),d(t),o){const r=l||s,n={rangeStart:t,rangeEnd:r};l&&s?(u(""),x(null),n.rangeEnd=null):r&&(r<t?(E(r),d(r),u(t),x(t),n.rangeStart=r,n.rangeEnd=t):(E(t),d(t),u(r),x(r),n.rangeStart=t,n.rangeEnd=r)),p(e,n)}else p(e,{selected:t});M&&(S.current.expanded=!1)},R=(e,t)=>{t===0?(d(e.target.value),A(e)):(u(e.target.value),L(e))},[U,G]=Array.isArray(g)?g:[g,g];return a.createElement("span",{className:K("date-textbox",D),ref:h.setHost},o&&a.createElement(i.EbayTextbox,{value:b,placeholder:U,onInputChange:e=>R(e,0),onBlur:e=>P(e,0)}),a.createElement(i.EbayTextbox,{className:"ebay-date-textbox--main",placeholder:G,value:o?T:b,onInputChange:e=>R(e,o?1:0),onBlur:e=>P(e,o?1:0)},a.createElement(i.EbayTextboxPostfixIcon,{name:"calendar24",buttonAriaLabel:_})),a.createElement("div",{hidden:!C,ref:h.setOverlay,style:H,className:"date-textbox__popover"},a.createElement(v.EbayCalendar,Object.assign({},V,{range:o,interactive:!0,navigable:!0,numMonths:F,selected:l&&s?[l,s]:l||s||void 0,onSelect:k}))))};exports.EbayDateTextbox=$;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../menu-button-label-Bjy8tyX5.js");exports.EbayFakeMenuButton=e.EbayMenuButton;exports.EbayFakeMenuButtonItem=e.EbayFakeMenuButtonItem;exports.EbayFakeMenuButtonLabel=e.EbayFakeMenuButtonLabel;exports.EbayFakeMenuButtonSeparator=e.EbayMenuButtonSeparator;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../menu-button-label-Ck5QyJG2.js");exports.EbayFakeMenuButton=e.EbayMenuButton;exports.EbayFakeMenuButtonItem=e.EbayFakeMenuButtonItem;exports.EbayFakeMenuButtonLabel=e.EbayFakeMenuButtonLabel;exports.EbayFakeMenuButtonSeparator=e.EbayMenuButtonSeparator;
@@ -25,7 +25,7 @@ yarn add @ebay/ui-core-react
25
25
  <EbayTextbox placeholder="placeholder text" id="field1" />
26
26
  <EbayFieldDescription
27
27
  type="confirmation"
28
- position="bellow">
28
+ position="below">
29
29
  Some description Text
30
30
  </EbayFieldDescription>
31
31
  </EbayField>
@@ -50,4 +50,4 @@ Name | Type | Stateful | Required | Description
50
50
  Name | Type | Stateful | Required | Description
51
51
  --- | --- | --- | --- | ---
52
52
  `type` | String | No | No | `confirmation`, `default`(Default), `attention`, `information`
53
- `position` | String | No | No | `bellow` (Default), `inline`, `above`
53
+ `position` | String | No | No | `below` (Default), `inline`, `above`
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const U=require("../tslib.es6-C4EgNkz1.js"),n=require("react"),N=require("classnames"),$=require("../icon-CeLPlCml.js"),ve=require("../utils-C9NL3q0j.js"),xe=require("../dropdown-JMZDOaC2.js"),V=u=>{var{value:p,children:v,selected:x,onClick:b,index:g,innerRef:E,className:y}=u,O=U.__rest(u,["value","children","selected","onClick","index","innerRef","className"]);const k=N("listbox-button__option",y,{"listbox-button__option--active":x});return n.createElement("div",Object.assign({},O,{className:k,role:"option","aria-selected":x,ref:E,onClick:d=>{b(d,p,g)}}),n.createElement("span",{className:"listbox-button__value"},v),n.createElement($.EbayIcon,{name:"tick16"}))},ge=u=>{var p,{children:v,name:x,value:b,selected:g,borderless:E,fluid:y,className:O,maxHeight:k,prefixId:d,prefixLabel:L,floatingLabel:_,unselectedText:W="-",onChange:S=()=>{},onCollapse:z=()=>{},onExpand:G=()=>{}}=u,J=U.__rest(u,["children","name","value","selected","borderless","fluid","className","maxHeight","prefixId","prefixLabel","floatingLabel","unselectedText","onChange","onCollapse","onExpand"]);const i=n.useRef(null),C=n.useRef(new Map),l=ve.filterByType(v,V);if(!l.length)throw new Error(`EbayListboxButton: Please use a
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const U=require("../tslib.es6-C4EgNkz1.js"),n=require("react"),N=require("classnames"),$=require("../icon-CeLPlCml.js"),ve=require("../utils-C9NL3q0j.js"),xe=require("../dropdown-BLiIyhWy.js"),V=u=>{var{value:p,children:v,selected:x,onClick:b,index:g,innerRef:E,className:y}=u,O=U.__rest(u,["value","children","selected","onClick","index","innerRef","className"]);const k=N("listbox-button__option",y,{"listbox-button__option--active":x});return n.createElement("div",Object.assign({},O,{className:k,role:"option","aria-selected":x,ref:E,onClick:d=>{b(d,p,g)}}),n.createElement("span",{className:"listbox-button__value"},v),n.createElement($.EbayIcon,{name:"tick16"}))},ge=u=>{var p,{children:v,name:x,value:b,selected:g,borderless:E,fluid:y,className:O,maxHeight:k,prefixId:d,prefixLabel:L,floatingLabel:_,unselectedText:W="-",onChange:S=()=>{},onCollapse:z=()=>{},onExpand:G=()=>{}}=u,J=U.__rest(u,["children","name","value","selected","borderless","fluid","className","maxHeight","prefixId","prefixLabel","floatingLabel","unselectedText","onChange","onCollapse","onExpand"]);const i=n.useRef(null),C=n.useRef(new Map),l=ve.filterByType(v,V);if(!l.length)throw new Error(`EbayListboxButton: Please use a
2
2
  EbayListboxButtonOption that defines the options of the listbox`);const Q=()=>{const e=g!==void 0?g:l.findIndex(({props:s})=>b!==void 0&&s.value===b),t=e>-1||_?e:void 0;return{option:l[t],index:t}},{option:T,index:D}=Q(),[a,f]=n.useState(T),[o,I]=n.useState(D),[m,R]=n.useState(),[X,Y]=n.useState(!1),[H,A]=n.useState(),{overlayStyles:Z,refs:h}=xe.useFloatingDropdown({open:m}),w=h.host,ee=h.overlay;n.useEffect(()=>{f(T)},[b]);const c=n.Children.toArray(v),q=e=>c[e].props.value,te=n.useCallback(e=>c.findIndex(({props:t})=>t.value===e),[c]),ne=e=>C.current.get(e),r=()=>{R(!1),z()},oe=()=>{R(!0),G()},se=()=>{m?r():oe()},j=(e,t)=>{f(c[t]),I(t),r(),w.current.focus(),S(e,{index:t,selected:[q(t)],wasClicked:H}),A(!1)},ae=()=>{r(),f(c[D])},le=e=>{const t=i.current.children[e];t.setAttribute("aria-selected","true"),t.classList.add("listbox-button__option--active")},ce=e=>{const t=i.current.children[e];t.setAttribute("aria-selected","false"),t.classList.remove("listbox-button__option--active")},ie=e=>{const t=ee.current,s=ne(e);if(t.scrollHeight>t.clientHeight){const me=t.clientHeight+t.scrollTop,M=s.offsetTop+s.offsetHeight;M>me?t.scrollTop=M-t.clientHeight:s.offsetTop<t.scrollTop&&(t.scrollTop=s.offsetTop)}},P=e=>{le(o===void 0||e===-1?0:e),ce(o===void 0||o===-1?0:o),ie(e),I(e),f(c[e])},F=e=>setTimeout(()=>{var t;return(t=i==null?void 0:i.current)===null||t===void 0?void 0:t.focus(e)},0),re=()=>{se(),F({preventScroll:!0})},ue=e=>{switch(e.key){case"Escape":r();break;case"Enter":F();break}},pe=e=>{switch(e.key){case" ":case"PageUp":case"PageDown":case"Home":case"End":e.preventDefault();break;case"Down":case"ArrowDown":e.preventDefault(),o!==l.length-1&&P(o<l.length-1?o+1:0);break;case"Up":case"ArrowUp":e.preventDefault(),o!==0&&P(o>0?o-1:l.length-1);break;case"Enter":r(),setTimeout(()=>f(c[o])),setTimeout(()=>w.current.focus(),0),S(e,{index:o,selected:[q(o)],wasClicked:H});break;case"Esc":case"Escape":ae();break}},B=l.map((e,t)=>n.cloneElement(e,{index:t,key:t,selected:a&&e.props.value===a.props.value,id:e.props.id||`listbox_btn_${e.props.value}_${t}`,onClick:s=>j(s,t),innerRef:s=>s?C.current.set(t,s):C.current.delete(t)})),be=N("listbox-button",O,{"listbox-button--fluid":y}),de=N("btn",{"btn--form":!E,"btn--borderless":E,"btn--floating-label":_&&a}),K=d&&"expand-btn-text",fe=n.createElement(n.Fragment,null,_&&n.createElement("span",{className:"btn__floating-label"},_),L&&n.createElement("span",{className:"btn__label"},L),n.createElement("span",{className:"btn__text",id:K},(a==null?void 0:a.props.children)||W));return n.createElement("span",{className:be},n.createElement("button",Object.assign({},J,{onFocus:()=>Y(!0),type:"button",className:de,"aria-expanded":!!m,"aria-haspopup":"listbox","aria-labelledby":d&&`${d} ${K}`,onClick:re,onMouseDown:e=>e.preventDefault(),onKeyUp:ue,ref:h.setHost}),n.createElement("span",{className:"btn__cell"},fe,n.createElement($.EbayIcon,{name:"chevronDown12"}))),(m||X)&&n.createElement("div",{className:"listbox-button__listbox",ref:h.setOverlay,style:Object.assign(Object.assign({},Z),{maxHeight:k})},n.createElement("div",{className:"listbox-button__options",role:"listbox",tabIndex:m?0:-1,ref:i,"aria-activedescendant":(p=B[o])===null||p===void 0?void 0:p.props.id,onKeyDown:e=>pe(e),onMouseDown:e=>{e.preventDefault(),A(!0)},onBlur:()=>{r(),setTimeout(()=>w.current.focus(),0)}},B)),n.createElement("select",{hidden:!0,className:"listbox-button__native",name:x,onChange:e=>j(e,te(e.target.value)),value:a?a==null?void 0:a.props.value:""},B.map((e,t)=>n.createElement("option",{value:e.props.value,key:t}))))};exports.EbayListboxButton=ge;exports.EbayListboxButtonOption=V;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../menu-button-label-Cu3rEUWv.js"),t=require("../menu-D2zjriWy.js");require("react");require("classnames");exports.EbayMenuButton=e.EbayMenuButton;exports.EbayMenuButtonLabel=e.EbayMenuButtonLabel;exports.EbayMenuButtonSeparator=e.EbayMenuButtonSeparator;exports.EbayMenuButtonItem=t.EbayMenuItem;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../menu-button-label-C_SUnCJn.js"),t=require("../menu-D2zjriWy.js");require("react");require("classnames");exports.EbayMenuButton=e.EbayMenuButton;exports.EbayMenuButtonLabel=e.EbayMenuButtonLabel;exports.EbayMenuButtonSeparator=e.EbayMenuButtonSeparator;exports.EbayMenuButtonItem=t.EbayMenuItem;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Y=require("../tslib.es6-C4EgNkz1.js"),t=require("react"),K=require("../menu-button-label-Bjy8tyX5.js"),H=require("classnames"),ne=require("../debounce-BQsYxxOL.js"),re=require("../utils-C9NL3q0j.js"),$=require("../icon-CeLPlCml.js"),ie=require("../forwardRef-irqyO_PF.js");require("../array.polyfill.flat-5BAolFdk.js");const oe=1,A=9,Q=4,V=2,ae=A-V;function se(e,n,a=e,d=null){const c=d==="show-last"||d==="overflow"&&e>A,W=d==="overflow"&&e>A,o=Math.min(a,e),_=Math.max(0,n-Math.ceil((o-1)/2)),h=o<Q?n:Math.max(0,n-Math.floor((o-1)/2)),g=(c?h:_)+o,y=g>=e,m=n<=Q,w=(p,s)=>{const r=k(e,p,s);return o>2?(r[s-2]="dots",r[s-1]="hidden",r[e-1]="visible"):o>1&&(r[s-1]="dots"),r},T=(p,s)=>{if(m)return w(0,s);if(y){const f=k(e,e-ae,e);return f[0]="visible",f[1]="dots",f}const r=k(e,n-V,n+V+1);return r[0]="visible",r[1]=m?"visible":"dots",r[e-2]="dots",r[e-1]="visible",r};return y&&e<=A?k(e,e-o):c?W?T(h,g):w(h,g):k(e,_,g)}function ce(e,n,a,d="show-range"){if(e===-1)return[];const c=d==="overflow"?A:le(Math.min(a,n),oe,A);return se(a,e-1,c,d)}function le(e,n,a){return e<=n?n:e>=a?a:e}function k(e,n,a){return Array(e).fill("hidden").fill("visible",n,a)}function ue(e){if(!e)return 0;e.style.width="100vw";const n=e.offsetWidth;return e.style.width=null,n}const de=e=>{var{id:n="ebay-pagination",className:a,a11yCurrentText:d="Pagination - Current Page",a11yPreviousText:c="Previous page",a11yNextText:W="Next page",variant:o="show-range",fluid:_=!1,onPrevious:h=()=>{},onNext:g=()=>{},onSelect:y=()=>{},children:m}=e,w=Y.__rest(e,["id","className","a11yCurrentText","a11yPreviousText","a11yNextText","variant","fluid","onPrevious","onNext","onSelect","children"]);const T=t.useRef(null),p=t.useRef([]);p.current=t.Children.map(m,t.createRef);const s=re.filterBy(m,({props:i})=>i.type===void 0||i.type==="page").length,r=t.useRef(0),f=t.useRef(0),j=()=>{var i,v,b,x;const E=f.current||((v=(i=p.current[0])===null||i===void 0?void 0:i.current)===null||v===void 0?void 0:v.offsetWidth);f.current=E;const u=r.current||((x=(b=p.current[1])===null||b===void 0?void 0:b.current)===null||x===void 0?void 0:x.offsetWidth);return r.current=u,u?Math.floor((ue(T.current)-E*2)/u):0},[S,L]=t.useState([]),[I,O]=t.useState(0),R=i=>{const v=i||p.current.findIndex(E=>{var u;return((u=E.current)===null||u===void 0?void 0:u.getAttribute("aria-current"))==="page"}),b=j(),x=ce(v,b,s,o);O(v),L(["hidden",...x])};t.useEffect(()=>{const i=ne.debounce(R,16);return R(),window.addEventListener("resize",()=>i()),()=>{window.removeEventListener("resize",()=>i())}},[m]);const C=i=>{let v=0;const b=[],x=[],E=[],u=S.indexOf("dots"),B=S.lastIndexOf("dots");return t.Children.map(m,(U,N)=>{const{type:P="page",current:Z,disabled:ee,href:G,children:X}=U.props,q=S[N]==="dots",z=`${n}-item-${N}`,J=S[N]==="hidden",te={current:Z,disabled:ee,href:G,type:q&&P==="page"?"separator":P,children:q?t.createElement($.EbayIcon,{name:"overflowHorizontal24",focusable:!1}):X,pageIndex:P==="page"?v++:void 0,key:z,hide:J,onPrevious:h,onNext:g,onSelect:y,a11yPreviousText:c,a11yNextText:W,ref:p.current[N]};if((J||q)&&P==="page"){const D=t.createElement(K.EbayFakeMenuButtonItem,{key:z,href:G,onClick:F=>{G||F.preventDefault();const M=F.currentTarget;y(F,{value:(M==null?void 0:M.innerText)||"",index:v}),R(Number(M==null?void 0:M.innerText))}},X);u===B&&E.push(D),I-2>u&&N<I&&b.push(D),I+2<B&&N>I&&x.push(D)}if(i==="page"&&q&&o==="overflow"){let D=E;return u!==B&&(D=N===2?b:x),t.createElement("li",{key:z},t.createElement("span",{className:"pagination__item",role:"separator"},t.createElement(K.EbayMenuButton,{a11yText:"Menu",borderless:!0,variant:"overflow",noToggleIcon:!0},D)))}return i===P?t.cloneElement(U,te):null})},l=`${n}-pagination-heading`;return t.createElement("nav",Object.assign({},w,{role:"navigation",className:H(a,"pagination",{"pagination--fluid":_}),"aria-labelledby":l,ref:T}),t.createElement("span",{"aria-live":"polite",role:"status"},t.createElement("h2",{className:"clipped",id:l},d)),C("previous"),t.createElement("ol",{className:"pagination__items"},C("page")),C("next"))},fe=e=>{var{pageIndex:n=0,key:a,current:d,disabled:c,type:W="page",href:o,hide:_,children:h,a11yPreviousText:g="Previous page",a11yNextText:y="Next page",onSelect:m,onNext:w,onPrevious:T,className:p,style:s,forwardedRef:r}=e,f=Y.__rest(e,["pageIndex","key","current","disabled","type","href","hide","children","a11yPreviousText","a11yNextText","onSelect","onNext","onPrevious","className","style","forwardedRef"]);const j=l=>{var i;m(l,{value:((i=l.currentTarget)===null||i===void 0?void 0:i.innerText)||"",index:n})},S=l=>{l.currentTarget.getAttribute("aria-disabled")||w(l)},L=l=>{l.currentTarget.getAttribute("aria-disabled")||T(l)},I=!!o,O=I?"a":"button",R=I?"icon-link":"icon-btn",C=Object.assign(Object.assign({},s),{minWidth:"40px"});switch(W){case"previous":return t.createElement(O,Object.assign({},f,{ref:r,"aria-disabled":c?"true":void 0,"aria-label":g,href:c?void 0:o,className:H(R,"pagination__previous"),style:C,onClick:L}),t.createElement($.EbayIcon,{name:"arrowLeft16"}));case"next":return t.createElement(O,Object.assign({},f,{ref:r,"aria-disabled":c?"true":void 0,"aria-label":y,href:c?void 0:o,className:H(R,"pagination__next"),style:C,onClick:S}),t.createElement($.EbayIcon,{name:"arrowRight16"}));case"separator":return t.createElement("span",{key:a,style:s,className:"pagination__item",ref:r,role:"separator"},h);default:return t.createElement("li",Object.assign({},f,{hidden:_}),t.createElement(O,{ref:r,"aria-current":d?"page":void 0,href:o,className:"pagination__item",style:s,key:a,onClick:j},h))}},me=ie.withForwardRef(fe);exports.EbayPagination=de;exports.EbayPaginationItem=me;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Y=require("../tslib.es6-C4EgNkz1.js"),t=require("react"),K=require("../menu-button-label-Ck5QyJG2.js"),H=require("classnames"),ne=require("../debounce-BQsYxxOL.js"),re=require("../utils-C9NL3q0j.js"),$=require("../icon-CeLPlCml.js"),ie=require("../forwardRef-irqyO_PF.js");require("../array.polyfill.flat-5BAolFdk.js");const oe=1,A=9,Q=4,V=2,ae=A-V;function se(e,n,a=e,d=null){const c=d==="show-last"||d==="overflow"&&e>A,W=d==="overflow"&&e>A,o=Math.min(a,e),_=Math.max(0,n-Math.ceil((o-1)/2)),h=o<Q?n:Math.max(0,n-Math.floor((o-1)/2)),g=(c?h:_)+o,y=g>=e,m=n<=Q,w=(p,s)=>{const r=k(e,p,s);return o>2?(r[s-2]="dots",r[s-1]="hidden",r[e-1]="visible"):o>1&&(r[s-1]="dots"),r},T=(p,s)=>{if(m)return w(0,s);if(y){const f=k(e,e-ae,e);return f[0]="visible",f[1]="dots",f}const r=k(e,n-V,n+V+1);return r[0]="visible",r[1]=m?"visible":"dots",r[e-2]="dots",r[e-1]="visible",r};return y&&e<=A?k(e,e-o):c?W?T(h,g):w(h,g):k(e,_,g)}function ce(e,n,a,d="show-range"){if(e===-1)return[];const c=d==="overflow"?A:le(Math.min(a,n),oe,A);return se(a,e-1,c,d)}function le(e,n,a){return e<=n?n:e>=a?a:e}function k(e,n,a){return Array(e).fill("hidden").fill("visible",n,a)}function ue(e){if(!e)return 0;e.style.width="100vw";const n=e.offsetWidth;return e.style.width=null,n}const de=e=>{var{id:n="ebay-pagination",className:a,a11yCurrentText:d="Pagination - Current Page",a11yPreviousText:c="Previous page",a11yNextText:W="Next page",variant:o="show-range",fluid:_=!1,onPrevious:h=()=>{},onNext:g=()=>{},onSelect:y=()=>{},children:m}=e,w=Y.__rest(e,["id","className","a11yCurrentText","a11yPreviousText","a11yNextText","variant","fluid","onPrevious","onNext","onSelect","children"]);const T=t.useRef(null),p=t.useRef([]);p.current=t.Children.map(m,t.createRef);const s=re.filterBy(m,({props:i})=>i.type===void 0||i.type==="page").length,r=t.useRef(0),f=t.useRef(0),j=()=>{var i,v,b,x;const E=f.current||((v=(i=p.current[0])===null||i===void 0?void 0:i.current)===null||v===void 0?void 0:v.offsetWidth);f.current=E;const u=r.current||((x=(b=p.current[1])===null||b===void 0?void 0:b.current)===null||x===void 0?void 0:x.offsetWidth);return r.current=u,u?Math.floor((ue(T.current)-E*2)/u):0},[S,L]=t.useState([]),[I,O]=t.useState(0),R=i=>{const v=i||p.current.findIndex(E=>{var u;return((u=E.current)===null||u===void 0?void 0:u.getAttribute("aria-current"))==="page"}),b=j(),x=ce(v,b,s,o);O(v),L(["hidden",...x])};t.useEffect(()=>{const i=ne.debounce(R,16);return R(),window.addEventListener("resize",()=>i()),()=>{window.removeEventListener("resize",()=>i())}},[m]);const C=i=>{let v=0;const b=[],x=[],E=[],u=S.indexOf("dots"),B=S.lastIndexOf("dots");return t.Children.map(m,(U,N)=>{const{type:P="page",current:Z,disabled:ee,href:G,children:X}=U.props,q=S[N]==="dots",z=`${n}-item-${N}`,J=S[N]==="hidden",te={current:Z,disabled:ee,href:G,type:q&&P==="page"?"separator":P,children:q?t.createElement($.EbayIcon,{name:"overflowHorizontal24",focusable:!1}):X,pageIndex:P==="page"?v++:void 0,key:z,hide:J,onPrevious:h,onNext:g,onSelect:y,a11yPreviousText:c,a11yNextText:W,ref:p.current[N]};if((J||q)&&P==="page"){const D=t.createElement(K.EbayFakeMenuButtonItem,{key:z,href:G,onClick:F=>{G||F.preventDefault();const M=F.currentTarget;y(F,{value:(M==null?void 0:M.innerText)||"",index:v}),R(Number(M==null?void 0:M.innerText))}},X);u===B&&E.push(D),I-2>u&&N<I&&b.push(D),I+2<B&&N>I&&x.push(D)}if(i==="page"&&q&&o==="overflow"){let D=E;return u!==B&&(D=N===2?b:x),t.createElement("li",{key:z},t.createElement("span",{className:"pagination__item",role:"separator"},t.createElement(K.EbayMenuButton,{a11yText:"Menu",borderless:!0,variant:"overflow",noToggleIcon:!0},D)))}return i===P?t.cloneElement(U,te):null})},l=`${n}-pagination-heading`;return t.createElement("nav",Object.assign({},w,{role:"navigation",className:H(a,"pagination",{"pagination--fluid":_}),"aria-labelledby":l,ref:T}),t.createElement("span",{"aria-live":"polite",role:"status"},t.createElement("h2",{className:"clipped",id:l},d)),C("previous"),t.createElement("ol",{className:"pagination__items"},C("page")),C("next"))},fe=e=>{var{pageIndex:n=0,key:a,current:d,disabled:c,type:W="page",href:o,hide:_,children:h,a11yPreviousText:g="Previous page",a11yNextText:y="Next page",onSelect:m,onNext:w,onPrevious:T,className:p,style:s,forwardedRef:r}=e,f=Y.__rest(e,["pageIndex","key","current","disabled","type","href","hide","children","a11yPreviousText","a11yNextText","onSelect","onNext","onPrevious","className","style","forwardedRef"]);const j=l=>{var i;m(l,{value:((i=l.currentTarget)===null||i===void 0?void 0:i.innerText)||"",index:n})},S=l=>{l.currentTarget.getAttribute("aria-disabled")||w(l)},L=l=>{l.currentTarget.getAttribute("aria-disabled")||T(l)},I=!!o,O=I?"a":"button",R=I?"icon-link":"icon-btn",C=Object.assign(Object.assign({},s),{minWidth:"40px"});switch(W){case"previous":return t.createElement(O,Object.assign({},f,{ref:r,"aria-disabled":c?"true":void 0,"aria-label":g,href:c?void 0:o,className:H(R,"pagination__previous"),style:C,onClick:L}),t.createElement($.EbayIcon,{name:"arrowLeft16"}));case"next":return t.createElement(O,Object.assign({},f,{ref:r,"aria-disabled":c?"true":void 0,"aria-label":y,href:c?void 0:o,className:H(R,"pagination__next"),style:C,onClick:S}),t.createElement($.EbayIcon,{name:"arrowRight16"}));case"separator":return t.createElement("span",{key:a,style:s,className:"pagination__item",ref:r,role:"separator"},h);default:return t.createElement("li",Object.assign({},f,{hidden:_}),t.createElement(O,{ref:r,"aria-current":d?"page":void 0,href:o,className:"pagination__item",style:s,key:a,onClick:j},h))}},me=ie.withForwardRef(fe);exports.EbayPagination=de;exports.EbayPaginationItem=me;
@@ -1 +1 @@
1
- {"version":3,"file":"ebay-select.d.ts","sourceRoot":"","sources":["../../src/ebay-select/ebay-select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6B,cAAc,EAA4B,MAAM,OAAO,CAAA;AAMlG,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAIpE,KAAK,WAAW,GAAG,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,gBAAgB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;CAAE,CAAA;AACpE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACvE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;;AAqFF,wBAA0D"}
1
+ {"version":3,"file":"ebay-select.d.ts","sourceRoot":"","sources":["../../src/ebay-select/ebay-select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6B,cAAc,EAA4B,MAAM,OAAO,CAAA;AAMlG,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAIpE,KAAK,WAAW,GAAG,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,gBAAgB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;CAAE,CAAA;AACpE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACvE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;;AAyEF,wBAA0D"}
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("../tslib.es6-C4EgNkz1.js"),o=require("react"),I=require("classnames"),_=require("../icon-CeLPlCml.js"),x=require("../forwardRef-irqyO_PF.js"),z=require("../utils-C9NL3q0j.js"),P=require("../hooks-BJqqLO4L.js"),d=t=>{var{children:e}=t,l=F.__rest(t,["children"]);return o.createElement("option",Object.assign({},l),e)},E=t=>typeof t<"u",T=t=>{var{value:e,defaultValue:l,className:n,borderless:u,name:i,disabled:a,onChange:f=()=>{},onBlur:p=()=>{},onFocus:h=()=>{},floatingLabel:b,forwardedRef:m,children:r,inputSize:g,invalid:v}=t,s=F.__rest(t,["value","defaultValue","className","borderless","name","disabled","onChange","onBlur","onFocus","floatingLabel","forwardedRef","children","inputSize","invalid"]);const S=v||s["aria-invalid"]==="true",[w,C]=o.useState(l),{label:N,Container:O,onBlur:G,onFocus:q,ref:B}=P.useFloatingLabel({ref:m,inputId:s.id,className:n,disabled:a,label:b,inputValue:e,inputSize:g,invalid:S}),V=c=>{const{value:y,selectedIndex:k}=c.target;E(e)||C(y),f(c,{index:k,selected:[y]})},L=c=>{p(c),G()},R=c=>{h(c),q()},j=I("select",n,{"select--borderless":u,"select--large":g==="large"});return o.createElement(O,null,N,o.createElement("span",{className:j},o.createElement("select",Object.assign({},s,{name:i,value:E(e)?e:w,disabled:a,onChange:V,onBlur:L,onFocus:R,ref:B}),$(r)),o.createElement(_.EbayIcon,{name:"chevronDown12",height:"8",width:"8"})))},D=x.withForwardRef(T);function M(t){const e={};return t.forEach(l=>{const n=l.props;n.optgroup&&(Object.prototype.hasOwnProperty.call(e,n.optgroup)||(e[n.optgroup]=[]),e[n.optgroup].push(n))}),e}function $(t){const e=[],l=[];let n={},u=!1;const i=z.filterByType(t,d).map(a=>o.cloneElement(a,{}));if(i){n=M(i);let a;return i.forEach((f,p)=>{const{value:h,optionClassName:b,children:m,optgroup:r}=f.props;if(u=r&&e.indexOf(r)===-1,u){a=r;const v=n[a].map(s=>o.createElement(d,{key:`opt-${s.value}`,value:s.value,className:s.optionClassName},s.children));l.push(o.createElement("optgroup",{key:p,label:r},v)),e.push(r)}else r||l.push(o.createElement(d,{key:p,value:h,className:b},m))}),l}}exports.EbaySelect=D;exports.EbaySelectOption=d;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("../tslib.es6-C4EgNkz1.js"),n=require("react"),R=require("classnames"),V=require("../icon-CeLPlCml.js"),j=require("../forwardRef-irqyO_PF.js"),k=require("../utils-C9NL3q0j.js"),x=require("../hooks-S6mbahSV.js"),d=t=>{var{children:e}=t,l=w.__rest(t,["children"]);return n.createElement("option",Object.assign({},l),e)},S=t=>typeof t<"u",z=t=>{var{value:e,defaultValue:l,className:o,borderless:u,name:i,disabled:a,onChange:f=()=>{},onBlur:p=()=>{},onFocus:h=()=>{},floatingLabel:m,forwardedRef:b,children:r,inputSize:g,invalid:v}=t,s=w.__rest(t,["value","defaultValue","className","borderless","name","disabled","onChange","onBlur","onFocus","floatingLabel","forwardedRef","children","inputSize","invalid"]);const C=v||s["aria-invalid"]==="true",[N,O]=n.useState(l),E=x.useFloatingLabel({text:m,disabled:a,size:g,invalid:C}),F=c=>{const{value:y,selectedIndex:B}=c.target;S(e)||O(y),f(c,{index:B,selected:[y]})},G=c=>{p(c)},q=c=>{h(c)},L=R("select",o,{"select--borderless":u,"select--large":g==="large"});return n.createElement(E.Container,null,n.createElement(E.Label,{htmlFor:s.id}),n.createElement("span",{className:L},n.createElement("select",Object.assign({},s,{name:i,value:S(e)?e:N,disabled:a,onChange:F,onBlur:G,onFocus:q,ref:b}),_(r)),n.createElement(V.EbayIcon,{name:"chevronDown12",height:"8",width:"8"})))},I=j.withForwardRef(z);function T(t){const e={};return t.forEach(l=>{const o=l.props;o.optgroup&&(Object.prototype.hasOwnProperty.call(e,o.optgroup)||(e[o.optgroup]=[]),e[o.optgroup].push(o))}),e}function _(t){const e=[],l=[];let o={},u=!1;const i=k.filterByType(t,d).map(a=>n.cloneElement(a,{}));if(i){o=T(i);let a;return i.forEach((f,p)=>{const{value:h,optionClassName:m,children:b,optgroup:r}=f.props;if(u=r&&e.indexOf(r)===-1,u){a=r;const v=o[a].map(s=>n.createElement(d,{key:`opt-${s.value}`,value:s.value,className:s.optionClassName},s.children));l.push(n.createElement("optgroup",{key:p,label:r},v)),e.push(r)}else r||l.push(n.createElement(d,{key:p,value:h,className:m},b))}),l}}exports.EbaySelect=I;exports.EbaySelectOption=d;
@@ -0,0 +1,108 @@
1
+ # EbaySkeleton
2
+
3
+ ## Demo
4
+
5
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/docs/building-blocks-ebay-skeleton--docs)
6
+
7
+ ## Import JS
8
+
9
+ ```jsx harmony
10
+ import {
11
+ EbaySkeleton,
12
+ EbaySkeletonAvatar,
13
+ EbaySkeletonButton,
14
+ EbaySkeletonImage,
15
+ EbaySkeletonText,
16
+ EbaySkeletonTextbox,
17
+ } from "@ebay/ui-core-react/ebay-skeleton";
18
+ ```
19
+
20
+ ## Import following styles from SKIN
21
+
22
+ ```js
23
+ import "@ebay/skin/skeleton";
24
+ ```
25
+
26
+ ## Import styles using SCSS/CSS
27
+
28
+ ```js
29
+ import "@ebay/skin/skeleton.css";
30
+ ```
31
+
32
+ ## Usage
33
+
34
+ ```jsx
35
+ <EbaySkeleton aria-label="Loading...">
36
+ <EbaySkeletonImage style={{ width: "220px", height: "220px" }} />
37
+ <EbaySkeletonText multiline />
38
+ </EbaySkeleton>
39
+ ```
40
+
41
+ ## Attributes
42
+
43
+ ### EbaySkeleton
44
+
45
+ | Name | Type | Required | Description |
46
+ | ------- | ------ | -------- | -------------------------------------------------- |
47
+ | `color` | string | No | Color of the Skeleton, `purple`, `green` or `blue` |
48
+
49
+ ### EbaySkeletonAvatar
50
+
51
+ | Name | Type | Required | Description |
52
+ | ---- | ------ | -------- | ------------------------------------------------------ |
53
+ | `as` | string | No | Attribute to define the element to use `div` or `span` |
54
+
55
+ ### EbaySkeletonButton
56
+
57
+ | Name | Type | Required | Description |
58
+ | ------ | ------ | -------- | ------------------------------------------------------ |
59
+ | `as` | string | No | Attribute to define the element to use `div` or `span` |
60
+ | `size` | string | No | size of the button can be `small` or `large` |
61
+
62
+ ### EbaySkeletonImage
63
+
64
+ | Name | Type | Required | Description |
65
+ | ---- | ------ | -------- | ------------------------------------------------------ |
66
+ | `as` | string | No | Attribute to define the element to use `div` or `span` |
67
+
68
+ ### EbaySkeletonText
69
+
70
+ | Name | Type | Required | Description |
71
+ | ----------- | ------- | -------- | ------------------------------------------------------ |
72
+ | `as` | string | No | Attribute to define the element to use `div` or `span` |
73
+ | `multiline` | boolean | No | Attribute to define the text as multiline |
74
+ | `size` | string | No | size of the text can be `small` or `large` |
75
+
76
+ ### EbaySkeletonTextbox
77
+
78
+ | Name | Type | Required | Description |
79
+ | ---- | ------ | -------- | ------------------------------------------------------ |
80
+ | `as` | string | No | Attribute to define the element to use `div` or `span` |
81
+
82
+ ## Examples
83
+
84
+ ### Composite
85
+
86
+ ```jsx
87
+ <EbaySkeleton color={color} style={{ width: "300px" }}>
88
+ <div>
89
+ <EbaySkeletonAvatar as="span" />
90
+ <EbaySkeletonText
91
+ multiline={multiline}
92
+ as="span"
93
+ size={size}
94
+ style={{ width: "220px", verticalAlign: "top" }}
95
+ />
96
+ </div>
97
+ <EbaySkeletonButton size={size} />
98
+ </EbaySkeleton>
99
+ ```
100
+
101
+ ### Tile
102
+
103
+ ```jsx
104
+ <EbaySkeleton color={color} style={{ width: "220px" }}>
105
+ <EbaySkeletonImage style={{ width: "220px", height: "220px" }} />
106
+ <EbaySkeletonText multiline={multiline} size={size} />
107
+ </EbaySkeleton>
108
+ ```
@@ -0,0 +1,6 @@
1
+ import { ReactNode } from 'react';
2
+ import { BaseSkeletonComponentProps, SupportedElements } from './types';
3
+ export type EbaySkeletonAvatarProps<T extends SupportedElements> = BaseSkeletonComponentProps<T>;
4
+ declare const EbaySkeletonAvatar: <T extends SupportedElements = "div">(props: EbaySkeletonAvatarProps<T>) => ReactNode;
5
+ export default EbaySkeletonAvatar;
6
+ //# sourceMappingURL=ebay-skeleton-avatar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ebay-skeleton-avatar.d.ts","sourceRoot":"","sources":["../../src/ebay-skeleton/ebay-skeleton-avatar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEvE,MAAM,MAAM,uBAAuB,CAAC,CAAC,SAAS,iBAAiB,IAAI,0BAA0B,CAAC,CAAC,CAAC,CAAA;AAEhG,QAAA,MAAM,kBAAkB,8EAA6E,SAMpG,CAAA;AAED,eAAe,kBAAkB,CAAA"}
@@ -0,0 +1,8 @@
1
+ import { ReactNode } from 'react';
2
+ import { BaseSkeletonComponentProps, SupportedElements } from './types';
3
+ export type EbaySkeletonButtonProps<T extends SupportedElements> = BaseSkeletonComponentProps<T> & {
4
+ size?: 'small' | 'large';
5
+ };
6
+ declare const EbaySkeletonButton: <T extends SupportedElements = "div">(props: EbaySkeletonButtonProps<T>) => ReactNode;
7
+ export default EbaySkeletonButton;
8
+ //# sourceMappingURL=ebay-skeleton-button.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ebay-skeleton-button.d.ts","sourceRoot":"","sources":["../../src/ebay-skeleton/ebay-skeleton-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEvE,MAAM,MAAM,uBAAuB,CAAC,CAAC,SAAS,iBAAiB,IAAI,0BAA0B,CAAC,CAAC,CAAC,GAAG;IAC/F,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC5B,CAAA;AAED,QAAA,MAAM,kBAAkB,8EAA6E,SAYpG,CAAA;AACD,eAAe,kBAAkB,CAAA"}
@@ -0,0 +1,6 @@
1
+ import { ReactNode } from 'react';
2
+ import { BaseSkeletonComponentProps, SupportedElements } from './types';
3
+ export type EbaySkeletonImageProps<T extends SupportedElements> = BaseSkeletonComponentProps<T>;
4
+ declare const EbaySkeletonImage: <T extends SupportedElements = "div">(props: EbaySkeletonImageProps<T>) => ReactNode;
5
+ export default EbaySkeletonImage;
6
+ //# sourceMappingURL=ebay-skeleton-image.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ebay-skeleton-image.d.ts","sourceRoot":"","sources":["../../src/ebay-skeleton/ebay-skeleton-image.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEvE,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,iBAAiB,IAAI,0BAA0B,CAAC,CAAC,CAAC,CAAA;AAE/F,QAAA,MAAM,iBAAiB,6EAA4E,SAQlG,CAAA;AAED,eAAe,iBAAiB,CAAA"}
@@ -0,0 +1,9 @@
1
+ import { ReactNode } from 'react';
2
+ import { BaseSkeletonComponentProps, SupportedElements } from './types';
3
+ export type EbaySkeletonTextProps<T extends SupportedElements> = BaseSkeletonComponentProps<T> & {
4
+ size?: 'small' | 'large';
5
+ multiline?: boolean;
6
+ };
7
+ declare const EbaySkeletonText: <T extends SupportedElements = "div">(props: EbaySkeletonTextProps<T>) => ReactNode;
8
+ export default EbaySkeletonText;
9
+ //# sourceMappingURL=ebay-skeleton-text.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ebay-skeleton-text.d.ts","sourceRoot":"","sources":["../../src/ebay-skeleton/ebay-skeleton-text.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEvE,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,iBAAiB,IAAI,0BAA0B,CAAC,CAAC,CAAC,GAAG;IAC7F,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,QAAA,MAAM,gBAAgB,4EAA2E,SAchG,CAAA;AAED,eAAe,gBAAgB,CAAA"}
@@ -0,0 +1,6 @@
1
+ import { ReactNode } from 'react';
2
+ import { BaseSkeletonComponentProps, SupportedElements } from './types';
3
+ export type EbaySkeletonTextboxProps<T extends SupportedElements> = BaseSkeletonComponentProps<T>;
4
+ declare const EbaySkeletonTextbox: <T extends SupportedElements = "div">(props: EbaySkeletonTextboxProps<T>) => ReactNode;
5
+ export default EbaySkeletonTextbox;
6
+ //# sourceMappingURL=ebay-skeleton-textbox.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ebay-skeleton-textbox.d.ts","sourceRoot":"","sources":["../../src/ebay-skeleton/ebay-skeleton-textbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEvE,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,iBAAiB,IAAI,0BAA0B,CAAC,CAAC,CAAC,CAAA;AAEjG,QAAA,MAAM,mBAAmB,+EAA8E,SAStG,CAAA;AAED,eAAe,mBAAmB,CAAA"}
@@ -0,0 +1,7 @@
1
+ import { ComponentProps, FC } from 'react';
2
+ export type EbaySkeletonProps = ComponentProps<'div'> & {
3
+ color?: 'purple' | 'green' | 'blue';
4
+ };
5
+ declare const EbaySkeleton: FC<EbaySkeletonProps>;
6
+ export default EbaySkeleton;
7
+ //# sourceMappingURL=ebay-skeleton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ebay-skeleton.d.ts","sourceRoot":"","sources":["../../src/ebay-skeleton/ebay-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjD,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;CACtC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAavC,CAAA;AAED,eAAe,YAAY,CAAA"}
@@ -0,0 +1,7 @@
1
+ export { default as EbaySkeleton, type EbaySkeletonProps } from './ebay-skeleton';
2
+ export { default as EbaySkeletonAvatar, type EbaySkeletonAvatarProps } from './ebay-skeleton-avatar';
3
+ export { default as EbaySkeletonButton, type EbaySkeletonButtonProps } from './ebay-skeleton-button';
4
+ export { default as EbaySkeletonImage, type EbaySkeletonImageProps } from './ebay-skeleton-image';
5
+ export { default as EbaySkeletonText, type EbaySkeletonTextProps } from './ebay-skeleton-text';
6
+ export { default as EbaySkeletonTextbox, type EbaySkeletonTextboxProps } from './ebay-skeleton-textbox';
7
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACjF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAA;AACpG,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAA;AACpG,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,uBAAuB,CAAA;AACjG,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AAC9F,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,yBAAyB,CAAA"}
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../tslib.es6-C4EgNkz1.js"),l=require("react"),o=require("classnames"),m=e=>{var{children:s,className:a,color:t}=e,c=n.__rest(e,["children","className","color"]);return l.createElement("div",Object.assign({role:"img",className:o("skeleton",t&&`skeleton--${t}`,a)},c),s)},i=e=>{const{as:s="div",className:a}=e,t=n.__rest(e,["as","className"]);return l.createElement(s,Object.assign({className:o("skeleton__avatar",a)},t))},_=e=>{const{as:s="div",className:a,size:t}=e,c=n.__rest(e,["as","className","size"]);return l.createElement(s,Object.assign({className:o("skeleton__button",t&&`skeleton__button--${t}`,a)},c))},b=e=>{const{as:s="div",className:a}=e,t=n.__rest(e,["as","className"]);return l.createElement(s,Object.assign({className:o("skeleton__image",a)},t))},k=e=>{const{as:s="div",className:a,size:t,multiline:c}=e,r=n.__rest(e,["as","className","size","multiline"]);return l.createElement(s,Object.assign({className:o("skeleton__text",c&&"skeleton__text--multiline",t==="large"&&"skeleton__text--large",a)},r))},u=e=>{const{as:s="div",className:a}=e,t=n.__rest(e,["as","className"]);return l.createElement(s,Object.assign({className:o("skeleton__textbox",a)},t))};exports.EbaySkeleton=m;exports.EbaySkeletonAvatar=i;exports.EbaySkeletonButton=_;exports.EbaySkeletonImage=b;exports.EbaySkeletonText=k;exports.EbaySkeletonTextbox=u;
@@ -0,0 +1,5 @@
1
+ export type SupportedElements = 'div' | 'span';
2
+ export type BaseSkeletonComponentProps<T extends SupportedElements = 'div'> = {
3
+ as?: T;
4
+ } & Omit<JSX.IntrinsicElements[T], 'ref'>;
5
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-skeleton/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,MAAM,CAAA;AAE9C,MAAM,MAAM,0BAA0B,CAAC,CAAC,SAAS,iBAAiB,GAAG,KAAK,IAAI;IAC1E,EAAE,CAAC,EAAE,CAAC,CAAC;CACV,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAA"}
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("../tslib.es6-C4EgNkz1.js"),n=require("react"),s=require("../utils-C9NL3q0j.js"),g=require("../button-DpMwH1cr.js"),i=require("../menu-button-label-Cu3rEUWv.js"),x=require("../menu-D2zjriWy.js");require("classnames");const q=a=>{var{a11yMenuText:u,children:o,type:l,bodyState:t,a11yButtonLoadingText:y,onCollapse:c,onExpand:p,onSelect:b=()=>{},onChange:d=()=>{},ref:T}=a,e=S.__rest(a,["a11yMenuText","children","type","bodyState","a11yButtonLoadingText","onCollapse","onExpand","onSelect","onChange","ref"]);const r=[x.EbayMenuItem,i.EbayMenuButtonSeparator],m=s.filterBy(o,B=>!r.includes(B.type)),E=s.filterByType(o,r);return n.createElement("span",{className:"split-button"},n.createElement(g.EbayButton,Object.assign({"aria-label":t==="loading"?y:void 0},e,{split:"start",bodyState:t==="expand"?void 0:t}),m),n.createElement(i.EbayMenuButton,{priority:e.priority,disabled:e.disabled,transparent:e.transparent,size:e.size,type:l,split:"end",reverse:!0,a11yText:u,onCollapse:c,onExpand:p,onSelect:b,onChange:d},E))};exports.EbaySplitButton=q;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("../tslib.es6-C4EgNkz1.js"),n=require("react"),s=require("../utils-C9NL3q0j.js"),g=require("../button-DpMwH1cr.js"),i=require("../menu-button-label-C_SUnCJn.js"),x=require("../menu-D2zjriWy.js");require("classnames");const q=a=>{var{a11yMenuText:u,children:o,type:l,bodyState:t,a11yButtonLoadingText:y,onCollapse:c,onExpand:p,onSelect:b=()=>{},onChange:d=()=>{},ref:T}=a,e=S.__rest(a,["a11yMenuText","children","type","bodyState","a11yButtonLoadingText","onCollapse","onExpand","onSelect","onChange","ref"]);const r=[x.EbayMenuItem,i.EbayMenuButtonSeparator],m=s.filterBy(o,B=>!r.includes(B.type)),E=s.filterByType(o,r);return n.createElement("span",{className:"split-button"},n.createElement(g.EbayButton,Object.assign({"aria-label":t==="loading"?y:void 0},e,{split:"start",bodyState:t==="expand"?void 0:t}),m),n.createElement(i.EbayMenuButton,{priority:e.priority,disabled:e.disabled,transparent:e.transparent,size:e.size,type:l,split:"end",reverse:!0,a11yText:u,onCollapse:c,onExpand:p,onSelect:b,onChange:d},E))};exports.EbaySplitButton=q;
@@ -0,0 +1,125 @@
1
+ # EbayTable
2
+
3
+ ## Demo
4
+
5
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/docs/data-display-ebay-table--docs)
6
+
7
+ ## Usage
8
+
9
+ ### Import JS
10
+
11
+ ```tsx
12
+ import {
13
+ EbayTable,
14
+ EbayTableHeader,
15
+ EbayTableRow,
16
+ EbayTableCell,
17
+ type TableSelectHandler,
18
+ type TableSortHandler,
19
+ type TableRowSelectHandler,
20
+ type TableHeaderSortHandler,
21
+ } from "@ebay/ui-core-react/ebay-table";
22
+ ```
23
+
24
+ ### Import following styles from SKIN
25
+
26
+ ```tsx
27
+ import "@ebay/skin/table";
28
+ ```
29
+
30
+ ### If tokens haven't been added to the project at a higher level, make sure to import
31
+
32
+ ```tsx
33
+ import "@ebay/skin/tokens";
34
+ ```
35
+
36
+ ### Or import styles using SCSS/CSS
37
+
38
+ ```tsx
39
+ import "@ebay/skin/table.css";
40
+ ```
41
+
42
+ ### Import icons
43
+
44
+ Add the below icons to the `EbaySvg` component.
45
+
46
+ Note: Make sure that `EbaySvg` is only rendered on the server so it does not affect the client bundle size.
47
+
48
+ ```tsx
49
+ <EbaySvg
50
+ icons={[
51
+ // If using sorting behavior
52
+ "sort12",
53
+ "sort12up",
54
+ "sort12down",
55
+
56
+ // If using selection behavior
57
+ "checkboxChecked18",
58
+ "checkboxUnchecked18",
59
+ "checkboxMixed18",
60
+ ]}
61
+ />
62
+ ```
63
+
64
+ ```tsx
65
+ <EbayTable>
66
+ <EbayTableHeader>
67
+ <EbayTableRow>
68
+ <EbayTableCell>Column 1</EbayTableCell>
69
+ <EbayTableCell>Column 2</EbayTableCell>
70
+ <EbayTableCell>Column 3</EbayTableCell>
71
+ </EbayTableRow>
72
+ </EbayTableHeader>
73
+ <EbayTableRow>
74
+ <EbayTableCell>Row 1, Cell 1</EbayTableCell>
75
+ <EbayTableCell>Row 1, Cell 2</EbayTableCell>
76
+ <EbayTableCell>Row 1, Cell 3</EbayTableCell>
77
+ </EbayTableRow>
78
+ <EbayTableRow>
79
+ <EbayTableCell>Row 2, Cell 1</EbayTableCell>
80
+ <EbayTableCell>Row 2, Cell 2</EbayTableCell>
81
+ <EbayTableCell>Row 2, Cell 3</EbayTableCell>
82
+ </EbayTableRow>
83
+ </EbayTable>
84
+ ```
85
+
86
+ ## Attributes
87
+
88
+ ### EbayTable
89
+
90
+ | Name | Type | Required | Description | Data |
91
+ | ------------------- | -------- | -------- | ------------------------------------------------------------- | ------------------------------------------- |
92
+ | `density` | String | No | Table density, `compact`, `relaxed`, `none` | |
93
+ | `mode` | String | No | Table mode, `selection`, `none` | |
94
+ | `allSelected` | String | No | Select all tri-state checkbox state, `true`, `false`, `mixed` | |
95
+ | `a11ySelectAllText` | String | No | Accessibility text for select all checkbox | |
96
+ | `a11ySelectRowText` | String | No | Accessibility text for select row checkbox | |
97
+ | `onSelect` | Function | No | Triggered on selection | `(event: Event, { selected, allSelected })` |
98
+ | `onSort` | Function | No | Triggered on column sort | `(event: Event, { sorted })` |
99
+
100
+ ### EbayTableHeader
101
+
102
+ | Name | Type | Required | Description | Data |
103
+ | ------------ | -------- | -------- | -------------------------------------------------------------------- | ---------------- |
104
+ | `columnType` | String | No | Column type, `normal`, `numeric`, `layout`, `icon-action` | |
105
+ | `name` | String | No | Column name that will be used in the EbayTable event `sorted` object | |
106
+ | `sort` | String | No | Defines which icon will be shown, `asc`, `desc`, `none` | |
107
+ | `rowHeader` | Boolean | No | Defines if the column is a row header | |
108
+ | `onSort` | Function | No | Triggered on column sort | `(event: Event)` |
109
+
110
+ ### EbayTableRow
111
+
112
+ | Name | Type | Required | Description | Data |
113
+ | ------------------- | -------- | -------- | ------------------------------------------------------------------------ | ------------------------------------ |
114
+ | `name` | String | No | Column name that will be used in the EbayTable events objects `selected` | |
115
+ | `selected` | Boolean | No | Defines if the row is selected | |
116
+ | `mode` | String | No | Row mode, `selection`, `none` | |
117
+ | `a11ySelectRowText` | String | No | Accessibility text for select row checkbox | |
118
+ | `onSelect` | Function | No | Triggered on row selection | `(event: Event, { name, selected })` |
119
+
120
+ ### EbayTableCell
121
+
122
+ | Name | Type | Required | Description | Data |
123
+ | ------------ | ------- | -------- | --------------------------------------------------------- | ---- |
124
+ | `rowHeader` | Boolean | No | Defines if the cell is a row header (`<th>`) | |
125
+ | `columnType` | String | No | Column type, `normal`, `numeric`, `layout`, `icon-action` | |
@@ -0,0 +1,6 @@
1
+ export { default as EbayTable } from './table';
2
+ export { default as EbayTableHeader } from './table-header';
3
+ export { default as EbayTableRow } from './table-row';
4
+ export { default as EbayTableCell } from './table-cell';
5
+ export * from './types';
6
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,aAAa,CAAA;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,cAAc,CAAA;AACvD,cAAc,SAAS,CAAA"}