@oliasoft-open-source/react-ui-library 4.12.3 → 4.12.4-beta-1

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

@@ -1,772 +0,0 @@
-import{j as n}from"./jsx-runtime-eps93zm2.js";import{r as S}from"./index-DhsZuJvc.js";import{f as ne}from"./immer.esm-BwVl9PS2.js";import{l as Z}from"./lodash-c4VUpsOs.js";import{G as le}from"./grid-DRkC-bt8.js";import{T as W}from"./text-B3-TSWok.js";import{T as D}from"./table-BSABGfWm.js";import{C as dn}from"./card-EcjmryU9.js";import{I as se}from"./input-Db9WkmPP.js";import{F as oe}from"./field-HrLaMLbx.js";import{H as un}from"./heading-CRNoBc7q.js";import{t as ae,x as pn,y as mn,z as gn,A as bn,B as hn,C as wn,D as yn}from"./table.stories-data-C7mC5R8Q.js";import"./styled-components.browser.esm-BQ9GQzDc.js";import"./index-Bk2sglWO.js";import"./index.es-DazXb-ul.js";import"./inheritsLoose-DP0QEDDI.js";import"./redux-tRgGMjwY.js";import"./objectSpread2-DW4nTBoq.js";import"./tiny-invariant-DqLgxztJ.js";import"./index-CUZDtIZe.js";import"./memoize-one.esm-CcMeOnPo.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./actions-Bax0KeqM.js";import"./common-types-Sih75Sav.js";import"./disabled-context-rmpd7YJS.js";import"./button-Cbv7WK6k.js";import"./spinner-AWUe4xwQ.js";import"./icon-BSFY3vDO.js";import"./index-CEuq6vkz.js";import"./tooltip-1V7clEnw.js";import"./types-BmbYqTX_.js";import"./types-Dx2TtIG9.js";import"./badge-CLQ59MDF.js";import"./pagination-CR1nxnnq.js";import"./select-Cwks-WA0.js";import"./enum-Bnn40S8Q.js";import"./assertThisInitialized-B9jnkVVz.js";import"./select.input-CJed_LLR.js";import"./helpers-JJxzGegQ.js";import"./input-group-BaRSJAEN.js";import"./input-group-addon-D68iUKV2.js";import"./number-input-B3_gmeWr.js";import"./index-C0x1JmaP.js";import"./index-DRSy5Ssd.js";import"./check-box-DPLaOkRR.js";import"./help-icon-Buhx5nl6.js";import"./slider-DxaD8LU4.js";import"./index-BI4_Bp97.js";import"./popover-C_2P8LFJ.js";import"./label-CqmyC9he.js";import"./flex-EllkLxgO.js";const ht={title:"Basic/Table",component:D,args:{table:{...ae}}},A=h=>n.jsx(D,{...h}),te=A.bind({}),E=A.bind({});E.args={table:{...ae,fixedWidth:"400px"}};const L=A.bind({});L.args={table:{...ae,fixedWidth:"auto"}};const _=A.bind({});_.args={table:pn};_.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=A.bind({});Q.args={table:mn};const O=A.bind({});O.args={table:gn};O.parameters={docs:{description:{story:"This is only required when you need to override `columnAlignment` in header cells (i.e. they have different alignment)"}}};const G=A.bind({});G.args={table:bn};const N=A.bind({});N.args={table:hn};N.decorators=[h=>n.jsx("div",{style:{position:"absolute",inset:0,padding:"var(--padding)"},children:n.jsx(h,{})})];const U=A.bind({});U.args={table:wn};U.parameters={docs:{description:{story:"If a `maxHeight` is set, the table should only fill that height if it needs to."}}};const $=A.bind({});$.args={table:yn};const M=()=>n.jsx(dn,{heading:n.jsx(un,{children:"Card heading"}),padding:!1,children:n.jsx(D,{table:{...ae,bordered:!1}})});M.parameters={docs:{source:{type:"dynamic"}}};const q=()=>{const h=["Section","Width","Height"];let g=["","m","m"],o=[...Array(175).keys()].map((l,t)=>[t,t*2,t*2]);const x=(l,t,r)=>l==="m"&&t==="ft"?r*3.28084:l==="ft"&&t==="m"?r/3.28084:r,i=(l,t,r,c)=>{o[t][r]=l.target.value,c()},R=l=>{o=o.concat([["","",""]]),l()},k=(l,t)=>{o=o.filter((r,c)=>c!==l),t()},p=(l,t,r)=>{const c=g[t],b=l.target.value;g=g.map((y,s)=>s===t?b:y),o=o.map(y=>y.map((s,u)=>u===t?x(c,b,s):s)),r()},w=()=>{const l=[{label:"10 / page",value:10},{label:"20 / page",value:20},{label:"50 / page",value:50},{label:"Show all",value:0}],[t,r]=S.useState(10),[c,b]=S.useState(1),[y,s]=S.useState(!1),u=()=>{s(!y)},j=()=>{const e=Math.ceil(o.length/t);b(e)},T=(c-1)*t,a=t===0?o.length-1:T+t,m={headers:[{cells:h.map(e=>({value:e})),actions:[{primary:!0,label:"Add",icon:"add",onClick:()=>{R(u),j()}}]},{cells:[{},{options:[{label:"m",value:"m"},{label:"ft",value:"ft"}],value:g[1],type:"Select",native:!0,onChange:e=>p(e,1,u)},{options:[{label:"m",value:"m"},{label:"ft",value:"ft"}],value:g[2],type:"Select",native:!0,onChange:e=>p(e,2,u)}]}],rows:o.slice(T,a).map((e,d)=>{const I=T+d;return{cells:[...Array(3).keys()].map((P,v)=>({value:e[v],type:"Input",onChange:C=>i(C,I,v,u)})),actions:[{label:"Delete",icon:"minus",onClick:()=>k(I,u)}]}}),footer:{pagination:{rowCount:o.length,selectedPage:c,rowsPerPage:{onChange:e=>{const{value:d}=e.target;r(Number(d))},options:l,value:t},onSelectPage:e=>b(e),small:!0}}};return n.jsx(D,{table:m})};return n.jsx(w,{})},K=()=>{const h=["Section","Width","Height"];let g=[...Array(20).keys()].map((x,i)=>({Section:Z.random(0,100),Width:Z.random(0,100),Height:Z.random(0,100)}));const o=()=>{const[x,i]=S.useState({Section:"up"}),R=(r,c)=>r.sort((b,y)=>Object.entries(c).map(([s,u])=>{switch(u){case"up":return b[s]-y[s];case"down":return y[s]-b[s];default:return 0}}).reduce((s,u)=>s||u,0)),k=(r,c,b)=>({dataSortCells:r.map(s=>{const u=Object.keys(c).includes(s)?c[s]:"",j=`${s[0].toUpperCase()}${s.slice(1)}`;return{key:s,value:j,hasSort:!0,sort:u,onSort:()=>{const T=u==="up"?"down":"up";b({[s]:T})}}})}),{dataSortCells:p}=k(h,x,i),l=[...R(g,x).map(r=>({cells:Object.entries(r).map(([b,y])=>({key:b,value:y,type:"Input",disabled:!0}))}))],t={headers:[{cells:p}],rows:l};return n.jsx(D,{table:t})};return n.jsx(o,{})},B=()=>{const h=["Section","Width","Height"];let g=[...Array(175).keys()].map((x,i)=>({Section:i,Width:i*2,Height:i*2}));const o=()=>{const x=[{label:"10 / page",value:10},{label:"20 / page",value:20},{label:"50 / page",value:50},{label:"Show all",value:0}],[i,R]=S.useState(10),[k,p]=S.useState(1),[w,l]=S.useState({}),[t,r]=S.useState({});S.useEffect(()=>{p(1)},[w,t]);const c=(k-1)*i,b=i===0?g.length-1:c+i,y=(e,d,I)=>e.filter(P=>Object.keys(d).every(v=>d[v]===""?!0:P[v].toString().includes(d[v]))).sort((P,v)=>Object.entries(I).map(([C,H])=>{switch(H){case"up":return P[C]-v[C];case"down":return v[C]-P[C];default:return 0}}).reduce((C,H)=>C||H,0)),s=(e,d,I,P,v)=>{const C=e.map(f=>{const V=Object.keys(P).includes(f)?P[f]:"",F=`${f[0].toUpperCase()}${f.slice(1)}`;return{key:f,value:F,hasSort:!0,sort:V,onSort:()=>{const ee=V===""?"up":V==="up"?"down":"";v({...P,[f]:ee})}}}),H=e.map(f=>{const V=Object.keys(d).includes(f)?d[f]:"";return{key:f,value:V,type:"Input",placeholder:"Filter",onChange:F=>I({...d,[f]:F.target.value})}});return{dataSortCells:C,dataFilterCells:H}},{dataSortCells:u,dataFilterCells:j}=s(h,w,l,t,r),T=y(g,w,t),a=[...T.slice(c,b).map(e=>({cells:Object.entries(e).map(([I,P])=>({key:I,value:P,type:"Input",disabled:!0}))}))],m={headers:[{cells:u},{cells:j}],rows:a,footer:{pagination:{rowCount:T.length,selectedPage:k,rowsPerPage:{onChange:e=>{const{value:d}=e.target;R(Number(d))},options:x,value:i},onSelectPage:e=>p(e),small:!0}}};return n.jsx(D,{table:m})};return n.jsx(o,{})},z=()=>{const h={tea:3.6,coffee:3.2,orange:4.1},g=[{label:"Tea",value:"tea"},{label:"Coffee",value:"coffee"},{label:"Orange juice",value:"orange"}],o={cells:[{type:"Select",options:g,value:{value:"tea"}},{type:"Input"},{type:"Static"}]},x=[...Array(15).keys()].map((a,m)=>({cells:[{type:"Select",options:g,value:{value:"tea"}},{type:"Input",value:m+1},{type:"Static"}]})),[i,R]=S.useState(x),k=[{label:"10 / page",value:10},{label:"20 / page",value:20},{label:"50 / page",value:50},{label:"Show all",value:0}],[p,w]=S.useState(10),[l,t]=S.useState(1),r=(l-1)*p,c=p===0?i.length-1:r+p,b=({newRow:a}={})=>{const m=ne(i,e=>{e.push(a??o)});R(m)},y=({rowIndex:a})=>{const m=ne(i,e=>{delete e[a]}).filter(e=>e);R(m)},s=({rowIndex:a,value:m})=>{const e=ne(i,d=>{d[a].cells[0].value.value=m});R(e)},u=({rowIndex:a,value:m})=>{const e=ne(i,d=>{d[a].cells[1].value=m});R(e)},j=({value:a})=>{const m=Number(a);return!Z.isNaN(m)&&Z.isInteger(m)&&m>0},T=i.slice(r,c).map((a,m)=>{const e=r+m;return i.length-1,{...a,cells:a==null?void 0:a.cells.map((d,I)=>{var f,V,F,ee,ie;const P=(F=(V=(f=a==null?void 0:a.cells)==null?void 0:f[0])==null?void 0:V.value)==null?void 0:F.value,v=Number((ie=(ee=a==null?void 0:a.cells)==null?void 0:ee[1])==null?void 0:ie.value),C=h==null?void 0:h[P],H=C&&j({value:v})?(C*v).toFixed(2):null;if(I===0)return{...d,onChange:re=>s({rowIndex:e,value:re.target.value})};if(I===1)return{...d,onChange:re=>u({rowIndex:e,value:re.target.value}),error:j({value:d.value})?null:"Must be valid whole number"};if(I===2)return{...d,value:H}}),actions:[{label:"Delete",icon:"minus",onClick:()=>y({rowIndex:e})}]}});return n.jsx(D,{table:{defaultEmptyRow:o,onAddRow:b,columnAlignment:["left","right","right"],headers:[{cells:[{value:"Drink"},{value:"Quantity"},{value:"Total Price (£)"}],actions:[{primary:!0,icon:"plus",label:"Add",onClick:()=>b()}]}],rows:T,footer:{pagination:{rowCount:i.length,selectedPage:l,rowsPerPage:{onChange:a=>{const{value:m}=a.target;w(Number(m))},options:k,value:p},onSelectPage:a=>t(a),small:!0}}}})},J=()=>{const h=["Section","Width","Height"];let g=Array.from(Array(10),(p,w)=>[w,w*2,w*2]);const[o,x]=S.useState({pastedValues:"",rowIndex:0,cellIndex:0}),i=(p,w,l,t)=>{g[w][l]=Number(p.target.value),t()},R=(p,w,l,t)=>{var c;let r=((c=p==null?void 0:p.clipboardData)==null?void 0:c.getData("text"))??"";return x({rowIndex:w,cellIndex:l,pastedValues:r}),t(),{pastedData:o}},k=()=>{const[p,w]=S.useState(!1),l=()=>{w(!p)},t={headers:[{cells:h.map(r=>({value:r}))}],rows:g.map((r,c)=>{const b=c;return{cells:[...Array(3).keys()].map((y,s)=>({value:r[s],type:"Input",onChange:u=>i(u,b,s,l),onPaste:u=>R(u,b,s,l)}))}})};return n.jsxs(n.Fragment,{children:[n.jsx(D,{table:t}),n.jsx(oe,{label:"Pasted Data",children:n.jsx(se,{value:o.pastedValues})}),n.jsx(oe,{label:"At Row",children:n.jsx(se,{value:o.rowIndex})}),n.jsx(oe,{label:"At Cell Index",children:n.jsx(se,{value:o.cellIndex})})]})};return n.jsx(k,{})},X=()=>{const h={fixedWidth:"auto",name:"Table title",actions:[{icon:"download",tooltip:"Download"}],columnAlignment:[...Array(10)].map((g,o)=>"right"),headers:[{cells:[...Array(10)].map((g,o)=>({value:"Heading"}))},{cells:[...Array(10)].map((g,o)=>({options:[{label:"m",value:"m"},{label:"ft",value:"ft"}],type:"Select",searchable:!1,value:{label:"m",value:"m"},autoLayerWidth:!0}))}],rows:[...Array(10)].map((g,o)=>({cells:[...Array(10)].map((x,i)=>({value:123.45})),actions:[{icon:"help",tooltip:n.jsxs(le,{children:[n.jsx(W,{bold:!0,children:"Title goes here lorem ipsum"}),n.jsx(W,{children:"Label: 123.45m"}),n.jsx(W,{children:"Another label: 123.45m"}),n.jsx(W,{children:"Label: 123.45m"})]})}]}))};return n.jsx(D,{table:h})},Y=()=>{const h={fixedWidth:"auto",name:"Table title",actions:[{icon:"download",tooltip:"Download"}],headers:[{cells:[{value:"Label"},{value:"Value",colSpan:2}]}],rows:[{cells:[{value:"Country",style:{fontWeight:"bold"},width:"120px"},{value:"Norway",colSpan:2}],actions:[{icon:"help",tooltip:n.jsxs(le,{children:[n.jsx(W,{bold:!0,children:"Title goes here"}),n.jsx(W,{children:"Details go here"})]})}]},{cells:[{value:"Depth",style:{fontWeight:"bold"}},{value:123,width:"80px"},{options:[{label:"m",value:"m"},{label:"ft",value:"ft"}],value:{label:"m",value:"m"},type:"Select",width:"80px"}],actions:[{icon:"help",tooltip:n.jsxs(le,{children:[n.jsx(W,{bold:!0,children:"Title goes here"}),n.jsx(W,{children:"Details go here"})]})}]}]};return n.jsx(D,{table:h})};M.__docgenInfo={description:"",methods:[],displayName:"InCard"};q.__docgenInfo={description:"",methods:[],displayName:"Managed"};K.__docgenInfo={description:"",methods:[],displayName:"ManagedWithSort"};B.__docgenInfo={description:"",methods:[],displayName:"ManagedWithFilterAndMultipleSort"};z.__docgenInfo={description:"",methods:[],displayName:"AutoAddNewRow"};J.__docgenInfo={description:"",methods:[],displayName:"OnPasteCallback"};X.__docgenInfo={description:"",methods:[],displayName:"ExampleTableWithInfoTooltips"};Y.__docgenInfo={description:"",methods:[],displayName:"ExampleTableWithInlineUnits"};var ce,de,ue;te.parameters={...te.parameters,docs:{...(ce=te.parameters)==null?void 0:ce.docs,source:{originalSource:`args => {
-  return <Table
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(ue=(de=te.parameters)==null?void 0:de.docs)==null?void 0:ue.source}}};var pe,me,ge;E.parameters={...E.parameters,docs:{...(pe=E.parameters)==null?void 0:pe.docs,source:{originalSource:`args => {
-  return <Table
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(ge=(me=E.parameters)==null?void 0:me.docs)==null?void 0:ge.source}}};var be,he,we;L.parameters={...L.parameters,docs:{...(be=L.parameters)==null?void 0:be.docs,source:{originalSource:`args => {
-  return <Table
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(we=(he=L.parameters)==null?void 0:he.docs)==null?void 0:we.source}}};var ye,ve,fe;_.parameters={..._.parameters,docs:{...(ye=_.parameters)==null?void 0:ye.docs,source:{originalSource:`args => {
-  return <Table
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(fe=(ve=_.parameters)==null?void 0:ve.docs)==null?void 0:fe.source}}};var Se,xe,Pe;Q.parameters={...Q.parameters,docs:{...(Se=Q.parameters)==null?void 0:Se.docs,source:{originalSource:`args => {
-  return <Table
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Pe=(xe=Q.parameters)==null?void 0:xe.docs)==null?void 0:Pe.source}}};var Ce,Re,Ie;O.parameters={...O.parameters,docs:{...(Ce=O.parameters)==null?void 0:Ce.docs,source:{originalSource:`args => {
-  return <Table
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Ie=(Re=O.parameters)==null?void 0:Re.docs)==null?void 0:Ie.source}}};var ke,Te,De;G.parameters={...G.parameters,docs:{...(ke=G.parameters)==null?void 0:ke.docs,source:{originalSource:`args => {
-  return <Table
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(De=(Te=G.parameters)==null?void 0:Te.docs)==null?void 0:De.source}}};var Ae,je,Ve;N.parameters={...N.parameters,docs:{...(Ae=N.parameters)==null?void 0:Ae.docs,source:{originalSource:`args => {
-  return <Table
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Ve=(je=N.parameters)==null?void 0:je.docs)==null?void 0:Ve.source}}};var We,He,Fe;U.parameters={...U.parameters,docs:{...(We=U.parameters)==null?void 0:We.docs,source:{originalSource:`args => {
-  return <Table
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Fe=(He=U.parameters)==null?void 0:He.docs)==null?void 0:Fe.source}}};var _e,Oe,Ne;$.parameters={...$.parameters,docs:{...(_e=$.parameters)==null?void 0:_e.docs,source:{originalSource:`args => {
-  return <Table
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Ne=(Oe=$.parameters)==null?void 0:Oe.docs)==null?void 0:Ne.source}}};var Ue,Me,Ee;M.parameters={...M.parameters,docs:{...(Ue=M.parameters)==null?void 0:Ue.docs,source:{originalSource:`() => <Card heading={<Heading>Card heading</Heading>} padding={false}>
-    <Table table={({
-    ...storyData.table,
-    bordered: false
-  } as any)} />
-  </Card>`,...(Ee=(Me=M.parameters)==null?void 0:Me.docs)==null?void 0:Ee.source}}};var Le,Qe,Ge;q.parameters={...q.parameters,docs:{...(Le=q.parameters)==null?void 0:Le.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 />;
-}`,...(Ge=(Qe=q.parameters)==null?void 0:Qe.docs)==null?void 0:Ge.source}}};var $e,qe,Ke;K.parameters={...K.parameters,docs:{...($e=K.parameters)==null?void 0:$e.docs,source:{originalSource:`() => {
-  /*
-    Mock table data store (real apps should use Redux or similar)
-  */
-  const headings = ['Section', 'Width', 'Height'];
-  let keyedData = [...Array(20).keys()].map((_c, i) => ({
-    Section: random(0, 100),
-    Width: random(0, 100),
-    Height: random(0, 100)
-  }));
-  /*
-    Container component manages state and configuration of table
-  */
-  const TableWithSort: StoryFn<any> = () => {
-    const [sort, setSort] = useState({
-      Section: 'up'
-    });
-    const sortDataRows = (dataRows: any, sort: any) => dataRows.sort((a: any, b: any) => Object.entries(sort).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, sort: any, setSort: any) => {
-      const dataSortCells = dataRowsKeys.map((key: any) => {
-        const sortDirection = Object.keys(sort).includes(key) ? sort[key] : '';
-        const prettifyHeaderValue = \`\${key[0].toUpperCase()}\${key.slice(1)}\`;
-        return {
-          key,
-          value: prettifyHeaderValue,
-          hasSort: true,
-          sort: sortDirection,
-          onSort: () => {
-            const newSortDirection = sortDirection === 'up' ? 'down' : 'up';
-            setSort({
-              [key]: newSortDirection
-            });
-          }
-        };
-      });
-      return {
-        dataSortCells
-      };
-    };
-    const {
-      dataSortCells
-    } = dataHeaders(headings, sort, setSort);
-    const sortedData = sortDataRows(keyedData, sort);
-    const dataRows = [...sortedData.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
-      }],
-      rows: dataRows
-    };
-    return <Table table={(table as any)} />;
-  };
-  return <TableWithSort />;
-}`,...(Ke=(qe=K.parameters)==null?void 0:qe.docs)==null?void 0:Ke.source}}};var Be,ze,Je;B.parameters={...B.parameters,docs:{...(Be=B.parameters)==null?void 0:Be.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 />;
-}`,...(Je=(ze=B.parameters)==null?void 0:ze.docs)==null?void 0:Je.source}}};var Xe,Ye,Ze;z.parameters={...z.parameters,docs:{...(Xe=z.parameters)==null?void 0:Xe.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)} />;
-}`,...(Ze=(Ye=z.parameters)==null?void 0:Ye.docs)==null?void 0:Ze.source}}};var en,nn,tn;J.parameters={...J.parameters,docs:{...(en=J.parameters)==null?void 0:en.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 />;
-}`,...(tn=(nn=J.parameters)==null?void 0:nn.docs)==null?void 0:tn.source}}};var an,rn,sn;X.parameters={...X.parameters,docs:{...(an=X.parameters)==null?void 0:an.docs,source:{originalSource:`() => {
-  const table = {
-    fixedWidth: 'auto',
-    name: 'Table title',
-    actions: [{
-      icon: 'download',
-      tooltip: 'Download'
-    }],
-    columnAlignment: [...Array(10)].map((_, i) => 'right'),
-    headers: [{
-      cells: [...Array(10)].map((_, i) => ({
-        value: 'Heading'
-      }))
-    }, {
-      cells: [...Array(10)].map((_, i) => ({
-        options: [{
-          label: 'm',
-          value: 'm'
-        }, {
-          label: 'ft',
-          value: 'ft'
-        }],
-        type: 'Select',
-        searchable: false,
-        value: {
-          label: 'm',
-          value: 'm'
-        },
-        autoLayerWidth: true
-      }))
-    }],
-    rows: [...Array(10)].map((_, i) => ({
-      cells: [...Array(10)].map((_, i) => ({
-        value: 123.45
-      })),
-      actions: [{
-        icon: 'help',
-        tooltip: <Grid>
-              <Text bold>Title goes here lorem ipsum</Text>
-              <Text>Label: 123.45m</Text>
-              <Text>Another label: 123.45m</Text>
-              <Text>Label: 123.45m</Text>
-            </Grid>
-      }]
-    }))
-  };
-  return <Table table={table} />;
-}`,...(sn=(rn=X.parameters)==null?void 0:rn.docs)==null?void 0:sn.source}}};var on,ln,cn;Y.parameters={...Y.parameters,docs:{...(on=Y.parameters)==null?void 0:on.docs,source:{originalSource:`() => {
-  const table = {
-    fixedWidth: 'auto',
-    name: 'Table title',
-    actions: [{
-      icon: 'download',
-      tooltip: 'Download'
-    }],
-    headers: [{
-      cells: [{
-        value: 'Label'
-      }, {
-        value: 'Value',
-        colSpan: 2
-      }]
-    }],
-    rows: [{
-      cells: [{
-        value: 'Country',
-        style: {
-          fontWeight: 'bold'
-        },
-        width: '120px'
-      }, {
-        value: 'Norway',
-        colSpan: 2
-      }],
-      actions: [{
-        icon: 'help',
-        tooltip: <Grid>
-                <Text bold>Title goes here</Text>
-                <Text>Details go here</Text>
-              </Grid>
-      }]
-    }, {
-      cells: [{
-        value: 'Depth',
-        style: {
-          fontWeight: 'bold'
-        }
-      }, {
-        value: 123,
-        width: '80px'
-      }, {
-        options: [{
-          label: 'm',
-          value: 'm'
-        }, {
-          label: 'ft',
-          value: 'ft'
-        }],
-        value: {
-          label: 'm',
-          value: 'm'
-        },
-        type: 'Select',
-        width: '80px'
-      }],
-      actions: [{
-        icon: 'help',
-        tooltip: <Grid>
-                <Text bold>Title goes here</Text>
-                <Text>Details go here</Text>
-              </Grid>
-      }]
-    }]
-  };
-  return <Table table={table} />;
-}`,...(cn=(ln=Y.parameters)==null?void 0:ln.docs)==null?void 0:cn.source}}};const wt=["Default","FixedWidth","AutoWidth","ColumnWidths","ColumnAlignment","ColumnHeaderAlignment","InfiniteScrollFixedHeight","InfiniteScrollFullHeight","InfiniteScrollShort","InfiniteScrollWithDragAndDrop","InCard","Managed","ManagedWithSort","ManagedWithFilterAndMultipleSort","AutoAddNewRow","OnPasteCallback","ExampleTableWithInfoTooltips","ExampleTableWithInlineUnits"];export{z as AutoAddNewRow,L as AutoWidth,Q as ColumnAlignment,O as ColumnHeaderAlignment,_ as ColumnWidths,te as Default,X as ExampleTableWithInfoTooltips,Y as ExampleTableWithInlineUnits,E as FixedWidth,M as InCard,G as InfiniteScrollFixedHeight,N as InfiniteScrollFullHeight,U as InfiniteScrollShort,$ as InfiniteScrollWithDragAndDrop,q as Managed,B as ManagedWithFilterAndMultipleSort,K as ManagedWithSort,J as OnPasteCallback,wt as __namedExportsOrder,ht as default};