@oliasoft-open-source/react-ui-library 4.0.0-beta-40 → 4.0.0-beta-42

package/dist/storybook/assets/table-c69e0bf7.js

@@ -0,0 +1 @@
+import{j as n}from"./jsx-runtime-f961835c.js";import{r as V}from"./index-f80c8c95.js";import{c as j}from"./index-a80ed1cf.js";import{I as He,D as Pe,C as Le,P as Fe}from"./index.es-a10b54aa.js";import{l as De}from"./lodash-75c70a11.js";import{A as ge}from"./actions-adb8a67c.js";import{H as $e}from"./heading-2919c91b.js";import{P as Oe}from"./pagination-0da36c85.js";import{A as b,I as $}from"./common-types-3a5f9d98.js";import{I as Be}from"./input-8db939f4.js";import{N as Me}from"./number-input-11543c86.js";import{S as Ge}from"./select-ef19f734.js";import{D as Ue}from"./disabled-context-d654f6ff.js";import{i as O}from"./types-332ceaf3.js";import{T as fe}from"./tooltip-23e84186.js";import{C as Xe}from"./check-box-283097fe.js";import{S as Je}from"./slider-83f9ed96.js";import{I as B}from"./icon-281c0950.js";import{P as Ke}from"./popover-ee6860bd.js";import{H as Ee}from"./help-icon-ca6c6ab6.js";import{T as ee}from"./text-ad1f5f1d.js";const ze="_inputInTable_1ssxi_1",Ye="_inputHover_1ssxi_13",Qe="_inputFocus_1ssxi_18",Ze="_inputError_1ssxi_25",en="_inputWarning_1ssxi_26",nn="_inputDisabled_1ssxi_61",tn="_hideScrollbars_1ssxi_67",rn="_wrapper_1ssxi_87",an="_bordered_1ssxi_95",ln="_scroll_1ssxi_99",on="_table_1ssxi_109",sn="_striped_1ssxi_188",H={inputInTable:ze,inputHover:Ye,inputFocus:Qe,inputError:Ze,inputWarning:en,inputDisabled:nn,hideScrollbars:tn,wrapper:rn,bordered:an,scroll:ln,table:on,striped:sn},cn="_title_15m3r_1",dn={title:cn},U=({name:e=null,actions:t=null,actionsRight:a=!1,testId:l})=>{const r=e!==null,o=t!==null;if(!r&&!o)return null;const s=()=>{if(!o)return null;const u=n.jsx(ge,{actions:t});return a?u:n.jsx("div",{children:u})};return n.jsxs("div",{className:dn.title,children:[r?n.jsx($e,{children:n.jsx("span",{"data-testid":l,children:e})}):null,s()]})};try{U.displayName="Title",U.__docgenInfo={description:"",displayName:"Title",props:{name:{defaultValue:{value:"null"},description:"",name:"name",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},actions:{defaultValue:{value:"null"},description:"",name:"actions",required:!1,type:{name:"any"}},actionsRight:{defaultValue:{value:"false"},description:"",name:"actionsRight",required:!1,type:{name:"boolean"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}const un="_footer_u47t6_1",pn="_section_u47t6_7",ne={footer:un,section:pn},X=({colSpan:e,pagination:t,actions:a,content:l})=>{const r=a&&a.length,o=l!=null,s=()=>{var c,p;if(t){const{rowCount:d,rowsPerPage:g}=t,y=Number((p=(c=g==null?void 0:g.options)==null?void 0:c[0])==null?void 0:p.value);return d>y}return!1};return r||o||s()?n.jsxs("div",{className:ne.footer,children:[o?n.jsx("div",{className:ne.section,children:n.jsx("div",{children:l})}):null,r||s()?n.jsxs("div",{className:ne.section,children:[s()?n.jsx(Oe,{pagination:t}):n.jsx("div",{}),r&&n.jsx("div",{children:n.jsx(ge,{actions:a})})]}):null]}):null};try{X.displayName="Footer",X.__docgenInfo={description:"",displayName:"Footer",props:{colSpan:{defaultValue:null,description:"",name:"colSpan",required:!1,type:{name:"number"}},pagination:{defaultValue:null,description:"",name:"pagination",required:!0,type:{name:"IPagination"}},actions:{defaultValue:null,description:"",name:"actions",required:!1,type:{name:"IAction[]"}},content:{defaultValue:null,description:"",name:"content",required:!1,type:{name:"ReactNode"}}}}}catch{}const Se=e=>{const t=Math.max(...e.reduce((a,l)=>{const r=l.cells.map(o=>o.colSpan?o.colSpan:1).reduce((o,s)=>o+s,0);return a.concat(r)},[]));return isNaN(t)?0:t},mn=(e,t)=>{const a=[Se(t),Se(e)];return Math.max(...a)},Te=e=>e.reduce((t,a)=>a.actions&&a.actions.length>0?1:t,0),_n=(e,t)=>Te(t)>0||Te(e)>0,J=({table:e,children:t})=>{const{rows:a,infiniteScroll:l}=e,r=Math.ceil(window.innerHeight/30),[o,s]=l?V.useState(r):[a.length,null],[u,c]=l?V.useState(o<a.length):[!1,null],p=()=>{if(o>=a.length&&c){c(!1);return}s&&s(o+r)};return n.jsx("div",{id:"scrollWrapper",className:H.scroll,children:l?n.jsx(He,{dataLength:Math.min(a.length,o+r),next:p,hasMore:u,scrollableTarget:"scrollWrapper",style:{overflow:"initial"},loader:null,children:t({visibleRows:o})}):t({visibleRows:o})})};try{J.displayName="TableScrollWrapper",J.__docgenInfo={description:"",displayName:"TableScrollWrapper",props:{table:{defaultValue:null,description:"",name:"table",required:!0,type:{name:"ITableProps"}}}}}catch{}const yn="_clickableRow_11d5t_1",gn="_hoverableRow_11d5t_4",fn="_rowActive_11d5t_4",hn="_expandableRow_11d5t_8",bn="_flush_11d5t_8",Cn="_dragIconCell_11d5t_28",xn="_dragIcon_11d5t_28",R={clickableRow:yn,hoverableRow:gn,rowActive:fn,expandableRow:hn,flush:bn,dragIconCell:Cn,dragIcon:xn},K=({colSpan:e,children:t,flush:a})=>n.jsx("tr",{children:n.jsx("td",{colSpan:e,className:j(R.expandableRow,a?R.flush:""),children:t})});try{K.displayName="ExpandedContentRow",K.__docgenInfo={description:"",displayName:"ExpandedContentRow",props:{colSpan:{defaultValue:null,description:"",name:"colSpan",required:!0,type:{name:"number"}},flush:{defaultValue:null,description:"",name:"flush",required:!1,type:{name:"boolean"}}}}}catch{}const Ve=(e,t={leftAligned:"",rightAligned:"",centerAligned:""},a=!1)=>{if(!e)return null;const{bodyAlignment:l,headerAlignment:r,isHeader:o}=e;switch(o&&r?r:l){case b.LEFT:return a?b.LEFT:t.leftAligned;case b.RIGHT:return a?b.RIGHT:t.rightAligned;case b.CENTER:return a?b.CENTER:t.centerAligned;default:return a?b.LEFT:t.leftAligned}},In=(e,t=!1,a=0)=>{if(!e||e.length===0)return[];const l=e.every(o=>Array.isArray(o)),r=e.every(o=>typeof o=="string");return l&&t?e[a]||[]:r?e:(console.warn("getHeaderAlignment: alignments array contains a mix of strings and arrays, returning an empty array."),[])},Nn="_inputInTable_c2ruy_1",jn="_inputHover_c2ruy_13",wn="_inputFocus_c2ruy_18",An="_inputError_c2ruy_25",vn="_inputWarning_c2ruy_26",Rn="_inputDisabled_c2ruy_61",Sn="_hideScrollbars_c2ruy_67",Tn="_cell_c2ruy_77",Vn="_disabledLink_c2ruy_87",qn="_inputWrapper_c2ruy_91",En="_breakWord_c2ruy_106",kn="_inputCell_c2ruy_109",Wn="_sliderCell_c2ruy_112",Hn="_staticCell_c2ruy_116",Pn="_staticCellContent_c2ruy_119",Ln="_error_c2ruy_132",Fn="_warning_c2ruy_133",Dn="_unit_c2ruy_142",$n="_sortingCell_c2ruy_145",On="_sortingCellIcon_c2ruy_156",Bn="_icon_c2ruy_167",Mn="_checkBoxCell_c2ruy_171",Gn="_iconCellWrapper_c2ruy_175",Un="_actionsCell_c2ruy_179",Xn="_rightAligned_c2ruy_187",Jn="_centerAligned_c2ruy_193",Kn="_leftAligned_c2ruy_199",zn="_popover_c2ruy_202",Yn="_disabledPointerEvents_c2ruy_205",i={inputInTable:Nn,inputHover:jn,inputFocus:wn,inputError:An,inputWarning:vn,inputDisabled:Rn,hideScrollbars:Sn,cell:Tn,disabledLink:Vn,inputWrapper:qn,breakWord:En,inputCell:kn,sliderCell:Wn,staticCell:Hn,staticCellContent:Pn,error:Ln,warning:Fn,unit:Dn,sortingCell:$n,sortingCellIcon:On,icon:Bn,checkBoxCell:Mn,iconCellWrapper:Gn,actionsCell:Un,rightAligned:Xn,centerAligned:Jn,leftAligned:Kn,popover:zn,disabledPointerEvents:Yn},te=({cell:e,columnAlignment:t,testId:a})=>n.jsx(Be,{name:e.name,value:e.value,onChange:l=>{var r;return(r=e.onChange)==null?void 0:r.call(e,l)},onPaste:l=>{var r;return(r=e.onPaste)==null?void 0:r.call(e,l)},placeholder:e.placeholder,error:e.error,warning:e.warning,disabled:e.disabled,isInTable:!0,maxTooltipWidth:e.maxTooltipWidth,right:t===b.RIGHT,testId:a,tabIndex:e.disabled?-1:0,tooltip:e.tooltip});try{te.displayName="InputCell",te.__docgenInfo={description:"",displayName:"InputCell",props:{cell:{defaultValue:null,description:"",name:"cell",required:!0,type:{name:"IInputCell"}},columnAlignment:{defaultValue:null,description:"",name:"columnAlignment",required:!1,type:{name:"string"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}const re=({cell:e,testId:t})=>n.jsx(Me,{name:e.name,value:e.value,onChange:a=>{var l;return(l=e.onChange)==null?void 0:l.call(e,a)},placeholder:e.placeholder,error:e.error,warning:e.warning,disabled:e.disabled,isInTable:!0,left:e.left,tabIndex:e.disabled?-1:0,testId:t,tooltip:e.tooltip,validationCallback:e.validationCallback,allowEmpty:e.allowEmpty});try{re.displayName="NumberInputCell",re.__docgenInfo={description:"",displayName:"NumberInputCell",props:{cell:{defaultValue:null,description:"",name:"cell",required:!0,type:{name:"INumberInputCell"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}const ae=({cell:e,columnAlignment:t,testId:a})=>n.jsx(Ge,{name:e.name,borderRadius:0,options:e.options,onChange:l=>{var r;return(r=e.onChange)==null?void 0:r.call(e,l)},onCreate:e.onCreate?l=>e.onCreate&&e.onCreate(l):void 0,error:e.error,warning:e.warning,disabled:e.disabled,placeholder:e.placeholder,isInTable:!0,value:e.value,native:e.native,clearable:e.clearable,searchable:e.searchable,deprecatedEventHandler:e.deprecatedEventHandler,maxTooltipWidth:e.maxTooltipWidth,width:"100%",autoLayerWidth:e.autoLayerWidth,right:t===b.RIGHT,testId:a,tabIndex:e.disabled?-1:0});try{ae.displayName="SelectCell",ae.__docgenInfo={description:"",displayName:"SelectCell",props:{cell:{defaultValue:null,description:"",name:"cell",required:!0,type:{name:"ISelectCell"}},columnAlignment:{defaultValue:null,description:"",name:"columnAlignment",required:!1,type:{name:"string"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}const le=({cell:e,columnAlignment:t,testId:a})=>n.jsx("div",{className:i.inputWrapper,children:e.type==="Input"?n.jsx(te,{cell:e,columnAlignment:t,testId:a}):e.type==="NumberInput"?n.jsx(re,{cell:e,testId:a}):e.type==="Select"?n.jsx(ae,{cell:e,columnAlignment:t,testId:a}):null});try{le.displayName="InputCellWrapper",le.__docgenInfo={description:"",displayName:"InputCellWrapper",props:{cell:{defaultValue:null,description:"",name:"cell",required:!0,type:{name:"any"}},columnAlignment:{defaultValue:null,description:"",name:"columnAlignment",required:!0,type:{name:"string"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}const oe=({cell:e,testId:t})=>{const a=V.useContext(Ue),{error:l,warning:r,tooltip:o,maxTooltipWidth:s}=e,u=c=>O(c);return n.jsx("div",{className:i.inputWrapper,children:n.jsx(fe,{error:!!l,warning:!!r,text:o||l||r,enabled:u(o)||u(l)||u(r)||!1,maxWidth:s,placement:"bottom-center",children:n.jsx("div",{className:j(i.staticCellContent,l?i.error:r?i.warning:""),children:n.jsx("a",{className:j((e.disabled||a)&&i.disabledLink),onClick:e.disabled||a?void 0:c=>{var p;c.stopPropagation(),(p=e.onClick)==null||p.call(e,c)},"data-testid":t,children:e.value})})})})};try{oe.displayName="LinkCell",oe.__docgenInfo={description:"",displayName:"LinkCell",props:{cell:{defaultValue:null,description:"",name:"cell",required:!0,type:{name:"ILinkCell"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}const ie=({cell:e,testId:t})=>n.jsx(Xe,{label:e.label,checked:e.checked,isInTable:!0,disabled:e.disabled,onChange:a=>e.onChange(a),testId:t,tabIndex:e.disabled?-1:0});try{ie.displayName="CheckBoxCell",ie.__docgenInfo={description:"",displayName:"CheckBoxCell",props:{cell:{defaultValue:null,description:"",name:"cell",required:!0,type:{name:"ICheckBoxCell"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}const se=({cell:e})=>n.jsx("div",{className:i.inputWrapper,children:n.jsx(Je,{label:e.label,value:e.value,min:e.min,max:e.max,step:e.step,marks:e.marks,onChange:t=>e.onChange(t),showArrows:e.showArrows,showTooltip:e.showTooltip,tooltipFormatter:e.tooltipFormatter,disabled:e.disabled})});try{se.displayName="SliderCell",se.__docgenInfo={description:"",displayName:"SliderCell",props:{cell:{defaultValue:null,description:"",name:"cell",required:!0,type:{name:"ISliderCell"}}}}}catch{}const ce=({cell:e})=>{const{tooltip:t,icon:a}=e;return n.jsx("div",{className:i.iconCellWrapper,children:n.jsx(fe,{text:t,enabled:!!t&&O(t),display:"flex",placement:"top-center",children:n.jsx(B,{icon:a})})})};try{ce.displayName="IconCell",ce.__docgenInfo={description:"",displayName:"IconCell",props:{cell:{defaultValue:null,description:"",name:"cell",required:!0,type:{name:"IIconCell"}}}}}catch{}const de=({cell:e})=>n.jsx(ge,{actions:e.actions});try{de.displayName="ActionsCell",de.__docgenInfo={description:"",displayName:"ActionsCell",props:{cell:{defaultValue:null,description:"",name:"cell",required:!0,type:{name:"IActionCell"}}}}}catch{}const ue=({cell:e})=>{const{helpIcon:t}=e;return t?n.jsx("div",{className:i.icon,children:n.jsx(Ee,{onClick:t.onClick,text:t.tooltip})}):null};try{ue.displayName="CellHelpIcon",ue.__docgenInfo={description:"",displayName:"CellHelpIcon",props:{cell:{defaultValue:null,description:"",name:"cell",required:!0,type:{name:"IHelpIconCell"}}}}}catch{}const pe=({cell:e})=>{const{libraryIcon:t}=e;return t?n.jsx("div",{className:i.icon,children:n.jsx(Ee,{onClick:t.onClick,text:t.tooltip,icon:$.LIBRARY})}):null};try{pe.displayName="CellLibraryIcon",pe.__docgenInfo={description:"",displayName:"CellLibraryIcon",props:{cell:{defaultValue:null,description:"",name:"cell",required:!0,type:{name:"ILibraryIconCell"}}}}}catch{}const me=({cell:e})=>{const{hasSort:t,sort:a,sortPriority:l}=e;return t?n.jsxs("span",{className:i.sortingCellIcon,children:[a==="down"?n.jsx(ee,{link:!0,children:n.jsx(B,{icon:$.SORT_ASCENDING})}):a==="up"?n.jsx(ee,{link:!0,children:n.jsx(B,{icon:$.SORT_DESCENDING})}):n.jsx(ee,{faint:!0,children:n.jsx(B,{icon:$.SORT_DESCENDING})}),l&&a?n.jsx("sup",{children:l}):null]}):null};try{me.displayName="Sort",me.__docgenInfo={description:"",displayName:"Sort",props:{cell:{defaultValue:null,description:"",name:"cell",required:!0,type:{name:"ISortCell"}}}}}catch{}const z=({cell:e,isHeader:t,testId:a})=>{const{error:l,warning:r,tooltip:o,maxTooltipWidth:s,hasSort:u,onSort:c,type:p}=e,d=n.jsxs("div",{className:j(i.staticCellContent,p==="Unit"?i.unit:"",l?i.error:r?i.warning:""),onClick:u?g=>c&&c(g):()=>{},"data-testid":a,children:[e.value,t?n.jsxs(n.Fragment,{children:[n.jsx(ue,{cell:e}),n.jsx(pe,{cell:e}),n.jsx(me,{cell:e})]}):null]});return n.jsx("div",{className:i.inputWrapper,children:n.jsx(fe,{error:!!l,warning:!!r,text:o||l||r,enabled:o&&O(o)||l&&O(l)||r&&O(r)||!1,maxWidth:s,display:"block",placement:"bottom-center",children:d})})};try{z.displayName="StaticCell",z.__docgenInfo={description:"",displayName:"StaticCell",props:{cell:{defaultValue:null,description:"",name:"cell",required:!0,type:{name:"IStaticCell"}},isHeader:{defaultValue:null,description:"",name:"isHeader",required:!1,type:{name:"boolean"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}const _e=({cell:e,testId:t})=>{const{content:a,fullWidth:l,closeOnOutsideClick:r,disabled:o}=e;return n.jsx(Ke,{content:a,fullWidth:l,closeOnOutsideClick:r,disabled:o,children:n.jsx("div",{className:i.popover,children:n.jsx(z,{cell:e,testId:t})})})};try{_e.displayName="PopoverCell",_e.__docgenInfo={description:"",displayName:"PopoverCell",props:{cell:{defaultValue:null,description:"",name:"cell",required:!0,type:{name:"IPopoverCell"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}const ye=({cell:e,isHeader:t,columnAlignment:a,testId:l})=>{if(!e)return null;switch(e.type){case"Input":case"NumberInput":case"Select":return n.jsx(le,{cell:e,columnAlignment:a,testId:l});case"Link":return n.jsx(oe,{cell:e,testId:l});case"CheckBox":return n.jsx(ie,{cell:e,testId:l});case"Slider":return n.jsx(se,{cell:e});case"Icon":return n.jsx(ce,{cell:e});case"Actions":return n.jsx(de,{cell:e});case"Popover":return n.jsx(_e,{cell:e});default:return n.jsx(z,{cell:e,isHeader:t,testId:l})}};try{ye.displayName="CellWrapper",ye.__docgenInfo={description:"",displayName:"CellWrapper",props:{cell:{defaultValue:null,description:"",name:"cell",required:!0,type:{name:"any"}},isHeader:{defaultValue:null,description:"",name:"isHeader",required:!0,type:{name:"boolean"}},columnAlignment:{defaultValue:null,description:"",name:"columnAlignment",required:!0,type:{name:"string"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}var S=(e=>(e.INPUT="Input",e.NUMBER_INPUT="NumberInput",e.SELECT="Select",e.POPOVER="Popover",e.SLIDER="Slider",e.CHECKBOX="CheckBox",e.ACTIONS="Actions",e))(S||{});const Y=({cell:e,isHeader:t,columnHeaderAlignment:a=b.LEFT,columnAlignment:l=b.LEFT,width:r,snapshot:o,testId:s})=>{if(!e)return null;const{style:u,colSpan:c,rowSpan:p,width:d}=e,g=V.useRef(null),y={bodyAlignment:l,headerAlignment:a,isHeader:t},P=Ve(y,i),C=Ve(y,i,!0),L=e.type===S.INPUT||e.type===S.NUMBER_INPUT||e.type===S.SELECT||e.type===S.POPOVER?i.inputCell:e.type===S.SLIDER?i.sliderCell:e.type===S.CHECKBOX?i.checkBoxCell:e.type===S.ACTIONS?i.actionsCell:i.staticCell,w=j(i.cell,L,e.hasSort?i.sortingCell:null,P,e.breakWord?i.breakWord:""),q=d??r??((o==null?void 0:o.isDragging)&&g.current&&g.current.offsetWidth)??void 0,x={width:q,minWidth:q,...u},A=t?"th":"td";return n.jsx(A,{ref:g,className:w,style:x,colSpan:c,rowSpan:p,children:n.jsx(ye,{cell:e,columnAlignment:C??b.RIGHT,isHeader:t,testId:s})})};try{Y.displayName="Cell",Y.__docgenInfo={description:"",displayName:"Cell",props:{cell:{defaultValue:null,description:"",name:"cell",required:!1,type:{name:"TCellShape"}},isHeader:{defaultValue:null,description:"",name:"isHeader",required:!0,type:{name:"boolean"}},columnHeaderAlignment:{defaultValue:{value:"Align.LEFT"},description:"",name:"columnHeaderAlignment",required:!1,type:{name:"string"}},columnAlignment:{defaultValue:{value:"Align.LEFT"},description:"",name:"columnAlignment",required:!1,type:{name:"Align.LEFT | Align.RIGHT | null"}},width:{defaultValue:null,description:"",name:"width",required:!1,type:{name:"TStringOrNumber"}},snapshot:{defaultValue:null,description:"",name:"snapshot",required:!1,type:{name:"any"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}const D=({row:e,rowIndex:t,isHeader:a=!1,columnCount:l,colSpan:r,columnHeaderAlignments:o=[],columnAlignment:s=[],hasRowActions:u,draggableTable:c=!1,snapshot:p=null,provided:d=null,width:g,columnWidths:y,testId:P})=>{const C=V.useRef(null),L=In(o,a,t),{onRowClick:w,onRowFocus:q,onRowMouseEnter:x,onRowMouseLeave:A,expandedContent:I,active:Q}=e,E=e.cells.map((h,v)=>{const he=`${a?0:1}_${t}_${v}`;return n.jsx(Y,{cell:h,isHeader:a,columnAlignment:s[v],columnHeaderAlignment:L[v],width:y?y[v]:void 0,snapshot:p,testId:h.testId},he)}),T=u&&n.jsx(Y,{cell:{type:S.ACTIONS,actions:e.actions},isHeader:a},l),k=(h,v)=>({minWidth:h&&`${g}px`,width:h&&"100%",display:h&&"table",background:h&&"var(--color-background-listitem-active)",border:h&&"var(--color-border)",borderTop:h&&0,opacity:h&&.1,...v}),W=()=>e.noDrag?n.jsx("td",{"aria-labelledby":"unique-label-id"}):n.jsx("td",{className:R.dragIconCell,children:n.jsx("div",{...d.dragHandleProps,className:R.dragIcon,children:n.jsx(B,{icon:$.DRAG})})});return a?n.jsxs(n.Fragment,{children:[n.jsxs("tr",{ref:C,onClick:w,onMouseEnter:x,onMouseLeave:A,onFocus:q,className:j(w?R.clickableRow:null,x?R.hoverableRow:null),children:[c?n.jsx("th",{}):null,E,T]},t),I&&I.content?n.jsx(K,{colSpan:r,flush:I.flush===!0,children:I.content},`${t}_expanded_content`):null]}):n.jsxs(n.Fragment,{children:[n.jsxs("tr",{onClick:w,onMouseEnter:x,onMouseLeave:A,onFocus:q,className:j(w&&!w.noStyle?R.clickableRow:null,x&&!x.noStyle?R.hoverableRow:null,Q?R.rowActive:null),ref:(d==null?void 0:d.innerRef)||null,...(d==null?void 0:d.draggableProps)||null,style:p&&d?k(p.isDragging,d.draggableProps.style):null,children:[c?W():null,E,T]},t),I&&I.content?n.jsx(K,{colSpan:r,flush:I.flush===!0,children:I.content},`${t}_expanded_content`):null]})};try{D.displayName="Row",D.__docgenInfo={description:"",displayName:"Row",props:{row:{defaultValue:null,description:"",name:"row",required:!0,type:{name:"TRowType"}},rowIndex:{defaultValue:null,description:"",name:"rowIndex",required:!0,type:{name:"number"}},isHeader:{defaultValue:{value:"false"},description:"",name:"isHeader",required:!1,type:{name:"boolean"}},columnCount:{defaultValue:null,description:"",name:"columnCount",required:!0,type:{name:"number"}},colSpan:{defaultValue:null,description:"",name:"colSpan",required:!0,type:{name:"number"}},columnHeaderAlignments:{defaultValue:{value:"[]"},description:"",name:"columnHeaderAlignments",required:!1,type:{name:"string[] | string[][]"}},columnAlignment:{defaultValue:{value:"[]"},description:"",name:"columnAlignment",required:!1,type:{name:"string[]"}},hasRowActions:{defaultValue:null,description:"",name:"hasRowActions",required:!0,type:{name:"boolean"}},draggableTable:{defaultValue:{value:"false"},description:"",name:"draggableTable",required:!1,type:{name:"boolean"}},snapshot:{defaultValue:{value:"null"},description:"",name:"snapshot",required:!1,type:{name:"any"}},provided:{defaultValue:{value:"null"},description:"",name:"provided",required:!1,type:{name:"any"}},width:{defaultValue:null,description:"",name:"width",required:!1,type:{name:"TStringOrNumber"}},columnWidths:{defaultValue:null,description:"",name:"columnWidths",required:!1,type:{name:"string[]"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}const qe=e=>{var Ie,Ne,je,we,Ae,ve,Re;const{onListReorder:t=()=>{},table:a}=e,{columnWidths:l,footer:r,name:o,rows:s=[],actions:u,actionsRight:c,columnHeaderAlignments:p,columnAlignment:d,striped:g=!0,testId:y,draggable:P,defaultEmptyRow:C=null,onAddRow:L=null,bordered:w=!0,maxHeight:q,fixedWidth:x}=a,A=V.useRef(null),[I,Q]=V.useState({width:0,height:0});V.useEffect(()=>{A.current&&Q({width:A.current.offsetWidth,height:A.current.offsetHeight})},[]);const E=De.get(e,"table.headers",[]),T=mn(s,E),k=_n(s,E),W=T+(k?1:0),h=r?((Ne=(Ie=r==null?void 0:r.pagination)==null?void 0:Ie.rowsPerPage)==null?void 0:Ne.value)===0||Number((je=r==null?void 0:r.pagination)==null?void 0:je.selectedPage)>=Number((we=r==null?void 0:r.pagination)==null?void 0:we.rowCount)/Number((ve=(Ae=r==null?void 0:r.pagination)==null?void 0:Ae.rowsPerPage)==null?void 0:ve.value):!0,v=((Re=C==null?void 0:C.cells)==null?void 0:Re.length)&&L&&h,ke={cells:v?C.cells.map((m,N)=>(m==null?void 0:m.type)==="Input"?{...m,onChange:_=>{var M;const f=(M=_==null?void 0:_.target)==null?void 0:M.value,F={...C,cells:C.cells.map((G,We)=>({...G,value:We===N?f:G==null?void 0:G.value}))};L({newRow:F})}}:{...m,disabled:!0}):null,testId:y?`${y}-last-empty-row`:void 0},Z=v?s.concat(ke):s,be={...a,rows:Z},Ce=j(H.wrapper,w?H.bordered:""),xe={maxHeight:q,width:x,display:x==="auto"?"inline-flex":"flex"};return P?n.jsxs("div",{ref:A,className:Ce,style:xe,children:[n.jsx(U,{actions:u,actionsRight:c,name:o,testId:y&&`${y}-title`}),n.jsx(Pe,{onDragEnd:m=>{var f,F;const N=(f=m==null?void 0:m.source)==null?void 0:f.index,_=(F=m==null?void 0:m.destination)==null?void 0:F.index;typeof N=="number"&&typeof _=="number"&&t({from:N,to:_})},children:n.jsx(Le,{droppableId:"droppable",children:m=>n.jsx(J,{table:be,children:({visibleRows:N})=>n.jsxs("table",{className:j(H.table,g?H.striped:""),"data-testid":y,ref:m.innerRef,children:[n.jsx("thead",{children:E.map((_,f)=>n.jsx(D,{rowIndex:f,isHeader:!0,row:_,columnCount:T,columnWidths:l,colSpan:W,hasRowActions:k,columnAlignment:d,columnHeaderAlignments:p,draggableTable:P},`0_${f}`))}),n.jsxs("tbody",{children:[Z.slice(0,N).map((_,f)=>n.jsx(Fe,{draggableId:f+"",index:f,isDragDisabled:_.noDrag,children:(F,M)=>n.jsx(D,{rowIndex:f,row:_,columnCount:T,columnWidths:l,colSpan:W,hasRowActions:k,columnAlignment:d,provided:F,snapshot:M,draggableTable:P,width:I.width},`1_${f}`)},`index_${f}`)),m.placeholder]})]})})})}),r&&n.jsx(X,{pagination:r.pagination,actions:r.actions,content:r.content})]}):n.jsxs("div",{className:Ce,style:xe,children:[n.jsx(U,{actions:u,actionsRight:c,name:o,testId:y&&`${y}-title`}),n.jsx(J,{table:be,children:({visibleRows:m})=>n.jsxs("table",{className:j(H.table,g?H.striped:""),"data-testid":y,children:[n.jsx("thead",{children:E.map((N,_)=>n.jsx(D,{rowIndex:_,isHeader:!0,row:N,columnCount:T,columnWidths:l,colSpan:W,hasRowActions:k,columnAlignment:d,columnHeaderAlignments:p},`0_${_}`))}),n.jsx("tbody",{children:Z.slice(0,m).map((N,_)=>n.jsx(D,{rowIndex:_,row:N,columnCount:T,columnWidths:l,colSpan:W,hasRowActions:k,columnAlignment:d},`1_${_}`))})]})}),r&&n.jsx(X,{colSpan:W,pagination:r.pagination,actions:r.actions,content:r.content})]})};try{qe.displayName="Table",qe.__docgenInfo={description:"",displayName:"Table",props:{onListReorder:{defaultValue:null,description:"",name:"onListReorder",required:!1,type:{name:"((obj: { from: number; to: number; }) => void)"}},table:{defaultValue:null,description:"",name:"table",required:!0,type:{name:"{ name?: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined; ... 18 more ...; actions?: any; }"}}}}}catch{}export{qe as T};

package/dist/storybook/assets/table.stories-da32b0ba.js

@@ -0,0 +1,581 @@
+import{j as c}from"./jsx-runtime-f961835c.js";import{r as S}from"./index-f80c8c95.js";import{f as K}from"./immer.esm-5c06d4d0.js";import{l as ae}from"./lodash-75c70a11.js";import{T}from"./table-c69e0bf7.js";import{C as Ge}from"./card-2de0de0b.js";import{I as ee}from"./input-8db939f4.js";import{F as ne}from"./field-8f023b56.js";import{H as Je}from"./heading-2919c91b.js";import{t as Y,a as Xe,b as Ye,c as Ze,d as en,e as nn,f as tn,g as an}from"./table.stories-data-43aeb44a.js";import"./index-a80ed1cf.js";import"./index.es-a10b54aa.js";import"./inheritsLoose-d4851ab8.js";import"./redux-10ee6be7.js";import"./objectSpread2-fdee9b6d.js";import"./index-3d476d02.js";import"./memoize-one.esm-52518564.js";import"./icon-281c0950.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./disabled-context-d654f6ff.js";import"./actions-adb8a67c.js";import"./common-types-3a5f9d98.js";import"./button-1a1d00ec.js";import"./spinner-cb92a546.js";import"./tooltip-23e84186.js";import"./types-cc224262.js";import"./types-332ceaf3.js";import"./badge-a96e6194.js";import"./pagination-0da36c85.js";import"./select-ef19f734.js";import"./assertThisInitialized-081f9914.js";import"./text-ad1f5f1d.js";import"./select.input-88b6ebab.js";import"./input-group-9ddeb24a.js";import"./input-group-addon-63147930.js";import"./number-input-11543c86.js";import"./index-54f0d271.js";import"./check-box-283097fe.js";import"./help-icon-ca6c6ab6.js";import"./slider-83f9ed96.js";import"./index-c7f280f6.js";import"./popover-ee6860bd.js";import"./label-17fa7b23.js";import"./flex-47732c42.js";const Jn={title:"Basic/Table",component:T,args:{table:{...Y}}},I=h=>c.jsx(T,{...h}),B=I.bind({}),N=I.bind({});N.args={table:{...Y,fixedWidth:"400px"}};const M=I.bind({});M.args={table:{...Y,fixedWidth:"auto"}};const O=I.bind({});O.args={table:Xe};O.parameters={docs:{description:{story:"Use sparingly when certain columns cannot be below a certain width. Unless the Table is auto width, set one column to `auto` to use remaining space."}}};const Q=I.bind({});Q.args={table:Ye};const W=I.bind({});W.args={table:Ze};W.parameters={docs:{description:{story:"This is only required when you need to override `columnAlignment` in header cells (i.e. they have different alignment)"}}};const _=I.bind({});_.args={table:en};const U=I.bind({});U.args={table:nn};U.decorators=[h=>c.jsx("div",{style:{position:"absolute",inset:0,padding:"var(--padding)"},children:c.jsx(h,{})})];const E=I.bind({});E.args={table:tn};E.parameters={docs:{description:{story:"If a `maxHeight` is set, the table should only fill that height if it needs to."}}};const L=I.bind({});L.args={table:an};const q=()=>c.jsx(Ge,{heading:c.jsx(Je,{children:"Card heading"}),padding:!1,children:c.jsx(T,{table:{...Y,bordered:!1}})});q.parameters={docs:{source:{type:"dynamic"}}};const z=()=>{const h=["Section","Width","Height"];let m=["","m","m"],o=[...Array(175).keys()].map((a,n)=>[n,n*2,n*2]);const k=(a,n,s)=>a==="m"&&n==="ft"?s*3.28084:a==="ft"&&n==="m"?s/3.28084:s,l=(a,n,s,u)=>{o[n][s]=a.target.value,u()},C=a=>{o=o.concat([["","",""]]),a()},A=(a,n)=>{o=o.filter((s,u)=>u!==a),n()},d=(a,n,s)=>{const u=m[n],y=a.target.value;m=m.map((R,b)=>b===n?y:R),o=o.map(R=>R.map((b,g)=>g===n?k(u,y,b):b)),s()},p=()=>{const a=[{label:"10 / page",value:10},{label:"20 / page",value:20},{label:"50 / page",value:50},{label:"Show all",value:0}],[n,s]=S.useState(10),[u,y]=S.useState(1),[R,b]=S.useState(!1),g=()=>{b(!R)},F=()=>{const e=Math.ceil(o.length/n);y(e)},D=(u-1)*n,t=n===0?o.length-1:D+n,i={headers:[{cells:h.map(e=>({value:e})),actions:[{primary:!0,label:"Add",icon:"add",onClick:()=>{C(g),F()}}]},{cells:[{},{options:[{label:"m",value:"m"},{label:"ft",value:"ft"}],value:m[1],type:"Select",native:!0,onChange:e=>d(e,1,g)},{options:[{label:"m",value:"m"},{label:"ft",value:"ft"}],value:m[2],type:"Select",native:!0,onChange:e=>d(e,2,g)}]}],rows:o.slice(D,t).map((e,r)=>{const x=D+r;return{cells:[...Array(3).keys()].map((f,w)=>({value:e[w],type:"Input",onChange:P=>l(P,x,w,g)})),actions:[{label:"Delete",icon:"minus",onClick:()=>A(x,g)}]}}),footer:{pagination:{rowCount:o.length,selectedPage:u,rowsPerPage:{onChange:e=>{const{value:r}=e.target;s(Number(r))},options:a,value:n},onSelectPage:e=>y(e),small:!0}}};return c.jsx(T,{table:i})};return c.jsx(p,{})},G=()=>{const h=["Section","Width","Height"];let m=[...Array(175).keys()].map((k,l)=>({Section:l,Width:l*2,Height:l*2}));const o=()=>{const k=[{label:"10 / page",value:10},{label:"20 / page",value:20},{label:"50 / page",value:50},{label:"Show all",value:0}],[l,C]=S.useState(10),[A,d]=S.useState(1),[p,a]=S.useState({}),[n,s]=S.useState({});S.useEffect(()=>{d(1)},[p,n]);const u=(A-1)*l,y=l===0?m.length-1:u+l,R=(e,r,x)=>e.filter(f=>Object.keys(r).every(w=>r[w]===""?!0:f[w].toString().includes(r[w]))).sort((f,w)=>Object.entries(x).map(([P,j])=>{switch(j){case"up":return f[P]-w[P];case"down":return w[P]-f[P];default:return 0}}).reduce((P,j)=>P||j,0)),b=(e,r,x,f,w)=>{const P=e.map(v=>{const V=Object.keys(f).includes(v)?f[v]:"",H=`${v[0].toUpperCase()}${v.slice(1)}`;return{key:v,value:H,hasSort:!0,sort:V,onSort:()=>{const $=V===""?"up":V==="up"?"down":"";w({...f,[v]:$})}}}),j=e.map(v=>{const V=Object.keys(r).includes(v)?r[v]:"";return{key:v,value:V,type:"Input",placeholder:"Filter",onChange:H=>x({...r,[v]:H.target.value})}});return{dataSortCells:P,dataFilterCells:j}},{dataSortCells:g,dataFilterCells:F}=b(h,p,a,n,s),D=R(m,p,n),t=[...D.slice(u,y).map(e=>({cells:Object.entries(e).map(([x,f])=>({key:x,value:f,type:"Input",disabled:!0}))}))],i={headers:[{cells:g},{cells:F}],rows:t,footer:{pagination:{rowCount:D.length,selectedPage:A,rowsPerPage:{onChange:e=>{const{value:r}=e.target;C(Number(r))},options:k,value:l},onSelectPage:e=>d(e),small:!0}}};return c.jsx(T,{table:i})};return c.jsx(o,{})},J=()=>{const h={tea:3.6,coffee:3.2,orange:4.1},m=[{label:"Tea",value:"tea"},{label:"Coffee",value:"coffee"},{label:"Orange juice",value:"orange"}],o={cells:[{type:"Select",options:m,value:{value:"tea"}},{type:"Input"},{type:"Static"}]},k=[...Array(15).keys()].map((t,i)=>({cells:[{type:"Select",options:m,value:{value:"tea"}},{type:"Input",value:i+1},{type:"Static"}]})),[l,C]=S.useState(k),A=[{label:"10 / page",value:10},{label:"20 / page",value:20},{label:"50 / page",value:50},{label:"Show all",value:0}],[d,p]=S.useState(10),[a,n]=S.useState(1),s=(a-1)*d,u=d===0?l.length-1:s+d,y=({newRow:t}={})=>{const i=K(l,e=>{e.push(t??o)});C(i)},R=({rowIndex:t})=>{const i=K(l,e=>{delete e[t]}).filter(e=>e);C(i)},b=({rowIndex:t,value:i})=>{const e=K(l,r=>{r[t].cells[0].value.value=i});C(e)},g=({rowIndex:t,value:i})=>{const e=K(l,r=>{r[t].cells[1].value=i});C(e)},F=({value:t})=>{const i=Number(t);return!ae.isNaN(i)&&ae.isInteger(i)&&i>0},D=l.slice(s,u).map((t,i)=>{const e=s+i;return l.length-1,{...t,cells:t==null?void 0:t.cells.map((r,x)=>{var v,V,H,$,te;const f=(H=(V=(v=t==null?void 0:t.cells)==null?void 0:v[0])==null?void 0:V.value)==null?void 0:H.value,w=Number((te=($=t==null?void 0:t.cells)==null?void 0:$[1])==null?void 0:te.value),P=h==null?void 0:h[f],j=P&&F({value:w})?(P*w).toFixed(2):null;if(x===0)return{...r,onChange:Z=>b({rowIndex:e,value:Z.target.value})};if(x===1)return{...r,onChange:Z=>g({rowIndex:e,value:Z.target.value}),error:F({value:r.value})?null:"Must be valid whole number"};if(x===2)return{...r,value:j}}),actions:[{label:"Delete",icon:"minus",onClick:()=>R({rowIndex:e})}]}});return c.jsx(T,{table:{defaultEmptyRow:o,onAddRow:y,columnAlignment:["left","right","right"],headers:[{cells:[{value:"Drink"},{value:"Quantity"},{value:"Total Price (£)"}],actions:[{primary:!0,icon:"plus",label:"Add",onClick:()=>y()}]}],rows:D,footer:{pagination:{rowCount:l.length,selectedPage:a,rowsPerPage:{onChange:t=>{const{value:i}=t.target;p(Number(i))},options:A,value:d},onSelectPage:t=>n(t),small:!0}}}})},X=()=>{const h=["Section","Width","Height"];let m=Array.from(Array(10),(d,p)=>[p,p*2,p*2]);const[o,k]=S.useState({pastedValues:"",rowIndex:0,cellIndex:0}),l=(d,p,a,n)=>{m[p][a]=Number(d.target.value),n()},C=(d,p,a,n)=>{var u;let s=((u=d==null?void 0:d.clipboardData)==null?void 0:u.getData("text"))??"";return k({rowIndex:p,cellIndex:a,pastedValues:s}),n(),{pastedData:o}},A=()=>{const[d,p]=S.useState(!1),a=()=>{p(!d)},n={headers:[{cells:h.map(s=>({value:s}))}],rows:m.map((s,u)=>{const y=u;return{cells:[...Array(3).keys()].map((R,b)=>({value:s[b],type:"Input",onChange:g=>l(g,y,b,a),onPaste:g=>C(g,y,b,a)}))}})};return c.jsxs(c.Fragment,{children:[c.jsx(T,{table:n}),c.jsx(ne,{label:"Pasted Data",children:c.jsx(ee,{value:o.pastedValues})}),c.jsx(ne,{label:"At Row",children:c.jsx(ee,{value:o.rowIndex})}),c.jsx(ne,{label:"At Cell Index",children:c.jsx(ee,{value:o.cellIndex})})]})};return c.jsx(A,{})};var re,se,oe;B.parameters={...B.parameters,docs:{...(re=B.parameters)==null?void 0:re.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(oe=(se=B.parameters)==null?void 0:se.docs)==null?void 0:oe.source}}};var le,ie,ce;N.parameters={...N.parameters,docs:{...(le=N.parameters)==null?void 0:le.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(ce=(ie=N.parameters)==null?void 0:ie.docs)==null?void 0:ce.source}}};var de,ue,pe;M.parameters={...M.parameters,docs:{...(de=M.parameters)==null?void 0:de.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(pe=(ue=M.parameters)==null?void 0:ue.docs)==null?void 0:pe.source}}};var ge,me,be;O.parameters={...O.parameters,docs:{...(ge=O.parameters)==null?void 0:ge.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(be=(me=O.parameters)==null?void 0:me.docs)==null?void 0:be.source}}};var we,ve,he;Q.parameters={...Q.parameters,docs:{...(we=Q.parameters)==null?void 0:we.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(he=(ve=Q.parameters)==null?void 0:ve.docs)==null?void 0:he.source}}};var ye,fe,Pe;W.parameters={...W.parameters,docs:{...(ye=W.parameters)==null?void 0:ye.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(Pe=(fe=W.parameters)==null?void 0:fe.docs)==null?void 0:Pe.source}}};var Se,xe,Ce;_.parameters={..._.parameters,docs:{...(Se=_.parameters)==null?void 0:Se.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(Ce=(xe=_.parameters)==null?void 0:xe.docs)==null?void 0:Ce.source}}};var Re,Ie,ke;U.parameters={...U.parameters,docs:{...(Re=U.parameters)==null?void 0:Re.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(ke=(Ie=U.parameters)==null?void 0:Ie.docs)==null?void 0:ke.source}}};var Ae,De,Ve;E.parameters={...E.parameters,docs:{...(Ae=E.parameters)==null?void 0:Ae.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(Ve=(De=E.parameters)==null?void 0:De.docs)==null?void 0:Ve.source}}};var je,Te,Fe;L.parameters={...L.parameters,docs:{...(je=L.parameters)==null?void 0:je.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(Fe=(Te=L.parameters)==null?void 0:Te.docs)==null?void 0:Fe.source}}};var He,Oe,We;q.parameters={...q.parameters,docs:{...(He=q.parameters)==null?void 0:He.docs,source:{originalSource:`() => <Card heading={<Heading>Card heading</Heading>} padding={false}>
+    <Table table={({
+    ...storyData.table,
+    bordered: false
+  } as any)} />
+  </Card>`,...(We=(Oe=q.parameters)==null?void 0:Oe.docs)==null?void 0:We.source}}};var Ue,Ee,Ne;z.parameters={...z.parameters,docs:{...(Ue=z.parameters)==null?void 0:Ue.docs,source:{originalSource:`() => {
+  /*
+    Mock table data store (real apps should use Redux or similar)
+  */
+  const headings = ['Section', 'Width', 'Height'];
+  let units = ['', 'm', 'm'];
+  let data = [...Array(175).keys()].map((c, i) => [i, i * 2, i * 2]);
+  /*
+    Mock table data actions (real apps should use Redux or similar)
+  */
+  const convertUnit = (fromUnit: any, toUnit: any, value: any) => {
+    return fromUnit === 'm' && toUnit === 'ft' ? value * 3.28084 : fromUnit === 'ft' && toUnit === 'm' ? value / 3.28084 : value;
+  };
+  const onChangeValue = (evt: any, rowIndex: any, cellIndex: any, render: any) => {
+    data[rowIndex][cellIndex] = evt.target.value;
+    render();
+  };
+  const onAddRow = (render: any) => {
+    data = data.concat(([['', '', '']] as any));
+    render();
+  };
+  const onDeleteRow = (rowIndex: any, render: any) => {
+    data = data.filter((r, i) => i !== rowIndex);
+    render();
+  };
+  const onChangeUnit = (evt: any, columnIndex: any, render: any) => {
+    const fromUnit = units[columnIndex];
+    const toUnit = evt.target.value;
+    units = units.map((u, i) => i === columnIndex ? toUnit : u);
+    data = data.map(r => r.map((c, i) => i === columnIndex ? convertUnit(fromUnit, toUnit, c) : c));
+    render();
+  };
+  /*
+    Container component manages state and configuration of table
+  */
+  const ManagedTable = () => {
+    const rowsPerPageOptions = [{
+      label: '10 / page',
+      value: 10
+    }, {
+      label: '20 / page',
+      value: 20
+    }, {
+      label: '50 / page',
+      value: 50
+    }, {
+      label: 'Show all',
+      value: 0
+    }];
+    const [rowsPerPage, setRowsPerPage] = useState(10);
+    const [selectedPage, setSelectedPage] = useState(1);
+    //hack to make Storybook re-render after event handlers alter data
+    //only using this because example does not manage data with Redux / props
+    const [toggle, forceRender] = useState(false);
+    const render = () => {
+      forceRender(!toggle);
+    };
+    const goToLastPage = () => {
+      const lastPage = Math.ceil(data.length / rowsPerPage);
+      setSelectedPage(lastPage);
+    };
+    const firstVisibleRow = (selectedPage - 1) * rowsPerPage;
+    const lastVisibleRow = rowsPerPage === 0 ? data.length - 1 : firstVisibleRow + rowsPerPage;
+    const table = {
+      headers: [{
+        cells: headings.map(h => ({
+          value: h
+        })),
+        actions: [{
+          primary: true,
+          label: 'Add',
+          icon: 'add',
+          onClick: () => {
+            onAddRow(render);
+            goToLastPage();
+          }
+        }]
+      }, {
+        cells: [{}, {
+          options: [{
+            label: 'm',
+            value: 'm'
+          }, {
+            label: 'ft',
+            value: 'ft'
+          }],
+          value: units[1],
+          type: 'Select',
+          native: true,
+          onChange: (evt: any) => onChangeUnit(evt, 1, render)
+        }, {
+          options: [{
+            label: 'm',
+            value: 'm'
+          }, {
+            label: 'ft',
+            value: 'ft'
+          }],
+          value: units[2],
+          type: 'Select',
+          native: true,
+          onChange: (evt: any) => onChangeUnit(evt, 2, render)
+        }]
+      }],
+      rows: data.slice(firstVisibleRow, lastVisibleRow).map((row, i) => {
+        const rowIndex = firstVisibleRow + i;
+        return {
+          cells: [...Array(3).keys()].map((c, i) => ({
+            //https://stackoverflow.com/a/33352604
+            value: row[i],
+            type: 'Input',
+            onChange: (evt: any) => onChangeValue(evt, rowIndex, i, render)
+          })),
+          actions: [{
+            label: 'Delete',
+            icon: 'minus',
+            onClick: () => onDeleteRow(rowIndex, render)
+          }]
+        };
+      }),
+      footer: {
+        pagination: {
+          rowCount: data.length,
+          selectedPage,
+          rowsPerPage: {
+            onChange: (evt: any) => {
+              const {
+                value
+              } = evt.target;
+              setRowsPerPage(Number(value));
+            },
+            options: rowsPerPageOptions,
+            value: rowsPerPage
+          },
+          onSelectPage: (evt: any) => setSelectedPage(evt),
+          small: true
+        }
+      }
+    };
+    return <Table table={(table as any)} />;
+  };
+  return <ManagedTable />;
+}`,...(Ne=(Ee=z.parameters)==null?void 0:Ee.docs)==null?void 0:Ne.source}}};var Me,Qe,_e;G.parameters={...G.parameters,docs:{...(Me=G.parameters)==null?void 0:Me.docs,source:{originalSource:`() => {
+  /*
+    Mock table data store (real apps should use Redux or similar)
+  */
+  const headings = ['Section', 'Width', 'Height'];
+  let keyedData = [...Array(175).keys()].map((_c, i) => ({
+    Section: i,
+    Width: i * 2,
+    Height: i * 2
+  }));
+  /*
+        Container component manages state and configuration of table
+      */
+  const TableWithSortAndFilter: StoryFn<any> = () => {
+    const rowsPerPageOptions = [{
+      label: '10 / page',
+      value: 10
+    }, {
+      label: '20 / page',
+      value: 20
+    }, {
+      label: '50 / page',
+      value: 50
+    }, {
+      label: 'Show all',
+      value: 0
+    }];
+    const [rowsPerPage, setRowsPerPage] = useState(10);
+    const [selectedPage, setSelectedPage] = useState(1);
+    const [filters, setFilters] = useState({});
+    const [sorts, setSorts] = useState({});
+    useEffect(() => {
+      setSelectedPage(1);
+    }, [filters, sorts]);
+    const firstVisibleRow = (selectedPage - 1) * rowsPerPage;
+    const lastVisibleRow = rowsPerPage === 0 ? keyedData.length - 1 : firstVisibleRow + rowsPerPage;
+    const filterAndSortDataRows = (dataRows: any, filters: any, sorts: any) => dataRows.filter((row: any) => Object.keys(filters).every(key => {
+      return filters[key] === '' ? true : row[key].toString().includes(filters[key]);
+    })).sort((a: any, b: any) => Object.entries(sorts).map(([key, value]) => {
+      switch (value) {
+        case 'up':
+          {
+            return a[key] - b[key];
+          }
+        case 'down':
+          {
+            return b[key] - a[key];
+          }
+        default:
+          return 0;
+      }
+    }).reduce((a, acc) => a || acc, 0));
+    const dataHeaders = (dataRowsKeys: any, filters: any, setFilters: any, sorts: any, setSorts: any) => {
+      const dataSortCells = dataRowsKeys.map((key: any) => {
+        const sort = Object.keys(sorts).includes(key) ? sorts[key] : '';
+        const prettifyHeaderValue = \`\${key[0].toUpperCase()}\${key.slice(1)}\`;
+        return {
+          key,
+          value: prettifyHeaderValue,
+          hasSort: true,
+          sort,
+          onSort: () => {
+            const newSort = sort === '' ? 'up' : sort === 'up' ? 'down' : '';
+            setSorts({
+              ...sorts,
+              [key]: newSort
+            });
+          }
+        };
+      });
+      const dataFilterCells = dataRowsKeys.map((key: any) => {
+        const filterValue = Object.keys(filters).includes(key) ? filters[key] : '';
+        return {
+          key,
+          value: filterValue,
+          type: 'Input',
+          placeholder: 'Filter',
+          onChange: (ev: any) => setFilters({
+            ...filters,
+            [key]: ev.target.value
+          })
+        };
+      });
+      return {
+        dataSortCells,
+        dataFilterCells
+      };
+    };
+    const {
+      dataSortCells,
+      dataFilterCells
+    } = dataHeaders(headings, filters, setFilters, sorts, setSorts);
+    const filteredAndSortedData = filterAndSortDataRows(keyedData, filters, sorts);
+    const dataRows = [...filteredAndSortedData.slice(firstVisibleRow, lastVisibleRow).map((dataRow: any) => {
+      const rowsCells = Object.entries(dataRow).map(([key, value]) => ({
+        key,
+        value,
+        type: 'Input',
+        disabled: true
+      }));
+      return {
+        cells: rowsCells
+      };
+    })];
+    const table = {
+      headers: [{
+        cells: dataSortCells
+      }, {
+        cells: dataFilterCells
+      }],
+      rows: dataRows,
+      footer: {
+        pagination: {
+          rowCount: filteredAndSortedData.length,
+          selectedPage,
+          rowsPerPage: {
+            onChange: (evt: any) => {
+              const {
+                value
+              } = evt.target;
+              setRowsPerPage(Number(value));
+            },
+            options: rowsPerPageOptions,
+            value: rowsPerPage
+          },
+          onSelectPage: (evt: any) => setSelectedPage(evt),
+          small: true
+        }
+      }
+    };
+    return <Table table={(table as any)} />;
+  };
+  return <TableWithSortAndFilter />;
+}`,...(_e=(Qe=G.parameters)==null?void 0:Qe.docs)==null?void 0:_e.source}}};var Le,qe,$e;J.parameters={...J.parameters,docs:{...(Le=J.parameters)==null?void 0:Le.docs,source:{originalSource:`() => {
+  const prices = {
+    tea: 3.6,
+    coffee: 3.2,
+    orange: 4.1
+  };
+  const drinks = [{
+    label: 'Tea',
+    value: 'tea'
+  }, {
+    label: 'Coffee',
+    value: 'coffee'
+  }, {
+    label: 'Orange juice',
+    value: 'orange'
+  }];
+  const defaultEmptyRow = {
+    cells: [{
+      type: 'Select',
+      options: drinks,
+      value: {
+        value: 'tea'
+      }
+    }, {
+      type: 'Input'
+    }, {
+      type: 'Static'
+    }]
+  };
+  const initialRows = [...Array(15).keys()].map((row, rowIndex) => ({
+    cells: [{
+      type: 'Select',
+      options: drinks,
+      value: {
+        value: 'tea'
+      }
+    }, {
+      type: 'Input',
+      value: rowIndex + 1
+    }, {
+      type: 'Static'
+    }]
+  }));
+  const [rows, setRows] = useState(initialRows);
+  const rowsPerPageOptions = [{
+    label: '10 / page',
+    value: 10
+  }, {
+    label: '20 / page',
+    value: 20
+  }, {
+    label: '50 / page',
+    value: 50
+  }, {
+    label: 'Show all',
+    value: 0
+  }];
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [selectedPage, setSelectedPage] = useState(1);
+  const firstVisibleRow = (selectedPage - 1) * rowsPerPage;
+  const lastVisibleRow = rowsPerPage === 0 ? rows.length - 1 : firstVisibleRow + rowsPerPage;
+  const onAddRow = ({
+    newRow
+  }: any = {}) => {
+    const nextRows = produce(rows, draft => {
+      draft.push(newRow ?? defaultEmptyRow);
+    });
+    setRows(nextRows);
+  };
+  const onDeleteRow = ({
+    rowIndex
+  }: any) => {
+    const nextRows = produce(rows, draft => {
+      delete draft[rowIndex];
+    }).filter(r => r);
+    setRows(nextRows);
+  };
+  const onChangeDrink = ({
+    rowIndex,
+    value
+  }: any) => {
+    const nextRows = produce(rows, draft => {
+      // @ts-ignore: write explicit reason
+      draft[rowIndex].cells[0].value.value = value;
+    });
+    setRows(nextRows);
+  };
+  const onChangeQuantity = ({
+    rowIndex,
+    value
+  }: any) => {
+    const nextRows = produce(rows, draft => {
+      draft[rowIndex].cells[1].value = value;
+    });
+    setRows(nextRows);
+  };
+  const validQuantity = ({
+    value
+  }: any) => {
+    const numericValue = Number(value);
+    return !isNaN(numericValue) && isInteger(numericValue) && numericValue > 0;
+  };
+  const hydratedRows = rows.slice(firstVisibleRow, lastVisibleRow).map((row, i) => {
+    const rowIndex = firstVisibleRow + i;
+    const isLastRow = rowIndex === rows.length - 1;
+    return {
+      ...row,
+      cells: row?.cells.map((cell, cellIndex) => {
+        const drink = (row?.cells?.[0]?.value as any)?.value;
+        const quantity = Number(row?.cells?.[1]?.value);
+        const drinkPrice = (prices as any)?.[drink];
+        const price = drinkPrice && validQuantity({
+          value: quantity
+        }) ? (drinkPrice * quantity).toFixed(2) : null;
+        if (cellIndex === 0) {
+          return {
+            ...cell,
+            onChange: (evt: any) => onChangeDrink({
+              rowIndex,
+              value: evt.target.value
+            })
+          };
+        } else if (cellIndex === 1) {
+          return {
+            ...cell,
+            onChange: (evt: any) => onChangeQuantity({
+              rowIndex,
+              value: evt.target.value
+            }),
+            error: !validQuantity({
+              value: cell.value
+            }) ? 'Must be valid whole number' : null
+          };
+        } else if (cellIndex === 2) {
+          return {
+            ...cell,
+            value: price
+          };
+        }
+      }),
+      actions: [{
+        label: 'Delete',
+        icon: 'minus',
+        onClick: () => onDeleteRow({
+          rowIndex
+        })
+      }]
+    };
+  });
+  return <Table table={({
+    defaultEmptyRow,
+    onAddRow,
+    columnAlignment: ['left', 'right', 'right'],
+    headers: [{
+      cells: [{
+        value: 'Drink'
+      }, {
+        value: 'Quantity'
+      }, {
+        value: 'Total Price (£)'
+      }],
+      actions: [{
+        primary: true,
+        icon: 'plus',
+        label: 'Add',
+        onClick: () => onAddRow()
+      }]
+    }],
+    rows: (hydratedRows as any),
+    footer: {
+      pagination: {
+        rowCount: rows.length,
+        selectedPage,
+        rowsPerPage: {
+          onChange: (evt: any) => {
+            const {
+              value
+            } = evt.target;
+            setRowsPerPage(Number(value));
+          },
+          options: rowsPerPageOptions,
+          value: rowsPerPage
+        },
+        onSelectPage: (evt: any) => setSelectedPage(evt),
+        small: true
+      }
+    }
+  } as any)} />;
+}`,...($e=(qe=J.parameters)==null?void 0:qe.docs)==null?void 0:$e.source}}};var Ke,Be,ze;X.parameters={...X.parameters,docs:{...(Ke=X.parameters)==null?void 0:Ke.docs,source:{originalSource:`() => {
+  const headings = ['Section', 'Width', 'Height'];
+  let data = Array.from(Array(10), (_, i) => [i, i * 2, i * 2]);
+  const [pastedData, setpastedData] = useState<PastedData>({
+    pastedValues: '',
+    rowIndex: 0,
+    cellIndex: 0
+  });
+  /*
+    Mock table data
+  */
+
+  const onChangeValue = (evt: ChangeEvent<HTMLInputElement>, rowIndex: number, cellIndex: number, render: TEmpty) => {
+    data[rowIndex][cellIndex] = Number(evt.target.value);
+    render();
+  };
+  const handleOnPaste = (evt: ClipboardEvent, rowIndex: number, cellIndex: number, render: TEmpty) => {
+    let pastedValues = evt?.clipboardData?.getData('text') ?? '';
+    setpastedData({
+      rowIndex,
+      cellIndex,
+      pastedValues
+    });
+    render();
+    return {
+      pastedData
+    };
+  };
+  /*
+    Container component manages state and configuration of table
+  */
+  const CallbackCellTable = () => {
+    //hack to make Storybook re-render after event handlers alter data
+    //only using this because example does not manage data with Redux / props
+    const [toggle, forceRender] = useState(false);
+    const render = () => {
+      forceRender(!toggle);
+    };
+    const table = {
+      headers: [{
+        cells: headings.map(h => ({
+          value: h
+        }))
+      }],
+      rows: data.map((row, i) => {
+        const rowIndex = i;
+        //row
+        return {
+          cells: [...Array(3).keys()].map((_, i) => ({
+            //https://stackoverflow.com/a/33352604
+            value: row[i],
+            type: 'Input',
+            onChange: (evt: ChangeEvent<HTMLInputElement>) => onChangeValue(evt, rowIndex, i, render),
+            onPaste: (evt: ClipboardEvent) => handleOnPaste(evt, rowIndex, i, render)
+          }))
+        };
+      })
+    };
+    return <>
+        <Table table={table} />
+        <Field label="Pasted Data">
+          <Input value={pastedData.pastedValues} />
+        </Field>
+        <Field label="At Row">
+          <Input value={pastedData.rowIndex} />
+        </Field>
+        <Field label="At Cell Index">
+          <Input value={pastedData.cellIndex} />
+        </Field>
+      </>;
+  };
+  return <CallbackCellTable />;
+}`,...(ze=(Be=X.parameters)==null?void 0:Be.docs)==null?void 0:ze.source}}};const Xn=["Default","FixedWidth","AutoWidth","ColumnWidths","ColumnAlignment","ColumnHeaderAlignment","InfiniteScrollFixedHeight","InfiniteScrollFullHeight","InfiniteScrollShort","InfiniteScrollWithDragAndDrop","InCard","Managed","ManagedWithFilterAndSort","AutoAddNewRow","OnPasteCallback"];export{J as AutoAddNewRow,M as AutoWidth,Q as ColumnAlignment,W as ColumnHeaderAlignment,O as ColumnWidths,B as Default,N as FixedWidth,q as InCard,_ as InfiniteScrollFixedHeight,U as InfiniteScrollFullHeight,E as InfiniteScrollShort,L as InfiniteScrollWithDragAndDrop,z as Managed,G as ManagedWithFilterAndSort,X as OnPasteCallback,Xn as __namedExportsOrder,Jn as default};