@oliasoft-open-source/react-ui-library 4.2.1 → 4.3.0-beta-1

package/dist/storybook/assets/unit-table.stories-4706910f.js

@@ -0,0 +1,229 @@
+import{j as t}from"./jsx-runtime-f961835c.js";import{r as f}from"./index-f80c8c95.js";import{d as c}from"./index-57d7693e.js";import{G as V}from"./grid-3b729f81.js";import{C as T}from"./card-3847c251.js";import{F as M}from"./field-a094cd72.js";import{H as I}from"./heading-d29eb744.js";import{S as A}from"./select-205cd538.js";/* empty css               */import"./accordion-168fa7c5.js";import"./accordion-with-default-toggle-0b4845c8.js";import{M as z}from"./actions-2d4e1c8e.js";import"./badge-20e7ee0b.js";import"./breadcrumb-f8742fbd.js";import{B as Q}from"./button-74c97e4a.js";import"./button-group-fa895d0c.js";import"./check-box-e21258d5.js";import"./row-2299f0e7.js";import"./divider-182aa58c.js";import"./modal-ad69eee9.js";import"./drawer-7f450988.js";import"./empty-2d83d50b.js";import"./file-input-a3594635.js";import"./flex-1d14d86c.js";import"./form-row-19dd7f6e.js";import{I as X}from"./icon-e9cbb4d7.js";import"./input-group-20c3add3.js";import"./input-group-addon-f8f6683a.js";import"./help-icon-d4189b1b.js";import"./input-d68625a5.js";import"./label-13d490a3.js";import"./list-e6e7e5ed.js";import"./meta-content-6f132e03.js";import"./loader-87ec8334.js";import"./message-dabd76a8.js";import"./option-dropdown-fbe54c09.js";import"./page-6d07f774.js";import"./pagination-8aade846.js";import"./popover-06e375a5.js";import"./portal-03fe4689.js";import"./print-header-bd013690.js";import"./progress-bar-40b8dbf0.js";import"./radio-button-135a9615.js";import"./rich-text-input-977847ce.js";import"./side-bar-88e8cf41.js";import"./slider-160e2152.js";import"./spacer-54db0620.js";import"./spinner-a81ebe38.js";import{T as Y}from"./table-da6f6045.js";import"./tabs-cf5ccede.js";import"./text-ad1f5f1d.js";import"./text-link-f4589768.js";import"./textarea-d48efea2.js";import"./toaster-3fba1dd3.js";import"./toggle-bb34b2a2.js";import"./tooltip-23e84186.js";import"./top-bar-a84b9365.js";import"./pop-confirm-e6b7cc0c.js";import"./tree-a5de7d3a.js";import"./number-input-7d49b0b3.js";import"./unit-input-9bf08434.js";import"./lodash-75c70a11.js";import"./disabled-context-d654f6ff.js";import"./index-54f0d271.js";import"./styled-components.browser.esm-416d73e5.js";import"./tslib.es6-dfef685f.js";import"./index-a80ed1cf.js";import"./common-types-2c81813f.js";import"./types-332ceaf3.js";import"./index-c89a1915.js";import"./inheritsLoose-d4851ab8.js";import"./assertThisInitialized-081f9914.js";import"./memoize-one.esm-52518564.js";import"./types-cc224262.js";import"./select.input-88b6ebab.js";import"./index-3d476d02.js";import"./index.es-85cc7dfc.js";import"./redux-10ee6be7.js";import"./objectSpread2-fdee9b6d.js";import"./index-c7f280f6.js";const Z="#ff6600",ee=({onDeleteTableRow:e,rowid:n})=>{let l=[{type:"Option",label:"Delete",icon:t.jsx(X,{icon:"delete",color:Z}),onClick:()=>e(n)}];return t.jsx(z,{menu:{trigger:"Component",component:t.jsx(Q,{small:!0,basic:!0,round:!0,colored:"muted",icon:"menu",testId:`row-menu-${n}`}),sections:l}})};try{tablerowmenu.displayName="tablerowmenu",tablerowmenu.__docgenInfo={description:"",displayName:"tablerowmenu",props:{onDeleteTableRow:{defaultValue:null,description:"",name:"onDeleteTableRow",required:!0,type:{name:"(rowid: number) => void"}},rowid:{defaultValue:null,description:"",name:"rowid",required:!0,type:{name:"number"}}}}}catch{}const te=["Rock","Sandstone"],G=te.map(e=>({label:e,value:e})),ne=[{Cp:"1256.039|J/(kg*degC)",Ro:"2243|kg/m3",name:"Utsira Formation",Lambda:"1.591|W/(mK)",depth_to:"1200|m",rock_type:"Rock",depth_from:"385|m"},{Cp:"1300|J/(kg*degC)",Ro:"2200|kg/m3",name:"Sele Formation",Lambda:"1.591|W/(mK)",depth_to:"1600|m",rock_type:"Sandstone",depth_from:"1200|m"},{Cp:"1256.039|J/(kg*degC)",Ro:"2243|kg/m3",name:"Lista Formation",Lambda:"1.591|W/(mK)",depth_to:"1950|m",rock_type:"Rock",depth_from:"1600|m"},{Cp:"1256.039|J/(kg*degC)",Ro:"2243|kg/m3",name:"Våge Formation",Lambda:"1.591|W/(mK)",depth_to:"2200|m",rock_type:"Rock",depth_from:"1950|m"}],ae=[{key:"rock_type",header:"Rock",translationKey:"rock",defaultValue:"",type:"Select",convertible:!1,unitKey:"",columnAlignment:"left",columnWidth:"150px",options:G},{key:"name",header:"Formation name",translationKey:"name",placeholder:"Formation Name",type:"Input",disabled:!1,convertible:!1,unitKey:"",columnAlignment:"left",columnWidth:"160px"},{key:"depth_from",header:"Top Depth (TVD)",translationKey:"top_depth",type:"NumberInput",disabled:!1,convertible:!0,unitKey:"length",columnAlignment:"right",columnWidth:"150px"},{key:"depth_to",header:"Bottom Depth (TVD)",translationKey:"bottom_depth",type:"NumberInput",disabled:!1,convertible:!0,unitKey:"length",columnAlignment:"right",columnWidth:"160px"},{key:"Ro",header:"Density",translationKey:"ro",type:"NumberInput",defaultValue:0,disabled:!0,convertible:!0,unitKey:"density",columnAlignment:"right",columnWidth:"100px"},{key:"Cp",header:"Specific Heat Capacity",translationKey:"cp",type:"NumberInput",defaultValue:0,unitKey:"specificHeatCapacity",disabled:!0,convertible:!0,columnWidth:"150px",columnAlignment:"right"},{key:"Lambda",header:"Thermal Conductivity",translationKey:"cp",type:"NumberInput",unitKey:"thermalConductivity",disabled:!0,convertible:!0,defaultValue:0,columnWidth:"150px",columnAlignment:"right"}],K={acceleration:"ft/s2",angleGradient:"deg/100ft",angles:"deg",areaOther:"ft2",areaTubular:"in2",blowoutFlowRate:"STB/d",blowoutGasFlowRate:"MMSCFD",blowoutOilFlowRate:"STB/d",density:"ppg",densityGas:"Glbm/ft3",densityOil:"lbm/ft3",densityOilGas:"lbm/ft3",densitySolid:"lbm/ft3",depth:"ft",diameters:"cm",distance:"ft",doglegSeverity:"deg/100ft",duration:"min",durationLong:"d",durationShort:"h",flowrate:"bpm",fluidCompressibility:"1/psi",force:"lbf",forceGradient:"lbf/ft",frequency:"Hz",gasliftFlowRate:"STB/d",gasVolume:"MMSCF",gor:"SCF/STB",height:"ft",inflowProductivityIndex:"STB/d/psi",injectionFlowRate:"bpm",intensity:"hhp/in2",interfacialTension:"lbf/ft",inverseStandSpeed:"min/stand",kickToleranceVolume:"bbl",length:"km",linearCapacity:"bbl/ft",location:"m",massFlowRate:"lbm/s",mixingRequirements:"m3/t",moleWeight:"lbf/mol",oilVolume:"STB",percentage:"%",permeability:"mD",power:"BTU/h",pressure:"psi",pressurechange:"psi",pressureGradient:"psi/ft",pressurePerTemperature:"psi/F",productionFlowRate:"STB/d",productionFlowRateGas:"MMSCFD",productionFlowRateOil:"STB/d",pumpRate:"bpm",rop:"ft/h",rotationalSpeed:"rpm",roughness:"in",specificHeatCapacity:"BTU/(lbm*degF)",speed:"ft/s",stress:"psi",temperature:"F",tempgrad:"F/100ft",thermalConductivity:"BTU/(h*ft*degF)",thermalExpansionCoefficient:"E-06/degF",torque:"Nm",torqueGradient:"lbf",turbulentSkin:"1/MMSCFD",viscosity:"cP",volume:"bbl",wearFactor:"E-10/psi",weight:"lbf",weightGradient:"ppf",wltubulars:"ppf",youngsModulus:"psi"},le=[{length:"10|m",pressure:"5|psi"},{length:"20|m",pressure:"10|psi"}],oe=[{key:"length",header:"Length",translationKey:"length",defaultValue:0,type:"NumberInput",convertible:!0,unitKey:"length",columnAlignment:"left",columnWidth:"150px"},{key:"pressure",header:"Pressure",translationKey:"pressure",defaultValue:0,type:"NumberInput",convertible:!0,unitKey:"pressure",columnAlignment:"left",columnWidth:"150px"}],re=({tableDef:e,displayedUnits:n,handleUnitChange:l})=>e.map(({convertible:g,unitKey:p,key:m})=>{var u;if(!g)return{value:""};const o=n[m],b=(u=c.getAltUnitsListByQuantity(p))==null?void 0:u.map(({unit:s,label:d})=>({label:d,value:s}));return{value:o,options:b,type:"Select",onChange:({target:{value:s}})=>{s!==o&&l(m,s)}}}),ie=({tableDef:e})=>e.map(({header:n})=>({value:n})),se=(e,n,l)=>e!=null&&e.length?e.map(g=>l.reduce((m,o)=>{const{key:b,defaultValue:v}=o,u=n[b];let s=g[b],d=s??v;return c.isValueWithUnit(s)&&u&&(d=c.convertAndGetValue(d,u)||0),{...m,[b]:c.isNumeric(d)?c.withUnit(d,u):d}},{})):[],de=(e,n,l)=>({label:"Add",icon:"plus",primary:!0,onClick:()=>e(n,l),testId:"lithology-table-add-new-row"}),U=(e,n)=>e.reduce((l,g)=>{const{key:p,unitKey:m}=g;return{...l,[p]:n[m]}},{}),pe=({rows:e,tableDef:n,displayedUnits:l,handleUnitChange:g,tableActions:p})=>{if(!e)return{rows:[],headers:[]};const{addRow:m}=p;return{headers:[{cells:ie({tableDef:n}),actions:m?[de(m,e,l)]:[]},{cells:re({tableDef:n,displayedUnits:l,handleUnitChange:g})}],rows:e}},S=({data:e,unitTemplate:n,tableDef:l,convertToCells:g,tableActions:p,testId:m})=>{const[o,b]=f.useState(U(l,n));f.useEffect(()=>{b(U(l,n))},[n]);const v=(d,C)=>{b(r=>({...r,[d]:C}))},{headers:u,rows:s}=f.useMemo(()=>pe({rows:g(se(e,o,l),o),tableDef:l,displayedUnits:o,handleUnitChange:v,tableActions:p}),[e,o]);return t.jsx(Y,{table:{testId:m,headers:u,rows:s,columnAlignment:l.map(d=>d.columnAlignment),columnWidths:l.map(d=>d.columnWidth),fixedWidth:"auto"},onListReorder:(p==null?void 0:p.reorderComponents)||void 0})};try{S.displayName="UnitTable",S.__docgenInfo={description:"",displayName:"UnitTable",props:{data:{defaultValue:null,description:"",name:"data",required:!0,type:{name:"any[]"}},unitTemplate:{defaultValue:null,description:"",name:"unitTemplate",required:!0,type:{name:"Record<string, any>"}},tableDef:{defaultValue:null,description:"",name:"tableDef",required:!0,type:{name:"ITableDefinition[]"}},convertToCells:{defaultValue:null,description:"",name:"convertToCells",required:!0,type:{name:"(displayedData: any[], displayedUnits: Record<string, any>) => { cells: ICell[]; actions: IActionsType; }[]"}},tableActions:{defaultValue:null,description:"",name:"tableActions",required:!0,type:{name:"ITableActions"}},testId:{defaultValue:null,description:"",name:"testId",required:!0,type:{name:"string"}}}}}catch{}const ue=e=>e===0,me=(e,n)=>n===e-1,ce=(e,n)=>n?`(Test value text) ${e}`:e,At={title:"Basic/UnitTable",component:S},D=()=>{const[e,n]=f.useState(le),[l,g]=f.useState([]),[p,m]=f.useState(K),o=(u,s,d,C)=>{const{value:r}=u.target;let a;n(w=>(a=[...w],a[d][s]=c.withUnit(r,C[s]),a))},b=(u,s)=>{const d=u.map((C,r)=>{let{length:a,pressure:w}=C;return{cells:[{value:c.getValue(a),type:"NumberInput",disabled:!1,onChange:y=>o(y,"length",r,s),testId:`table-cell-${r}-0`},{value:c.getValue(w),type:"NumberInput",disabled:!1,onChange:y=>o(y,"pressure",r,s),testId:`table-cell-${r}-1`}],actions:[]}});return g(u),d},v=[{value:"m",label:"m"},{value:"ft",label:"ft"},{value:"km",label:"km"},{value:"in",label:"in"},{value:"mm",label:"mm"}];return t.jsxs(V,{columns:"1fr",gap:!0,children:[t.jsx(T,{heading:t.jsx(I,{children:"Global View Settings"}),children:t.jsx(M,{label:"Active Unit Template For Length",children:t.jsx(A,{options:v,value:{value:p.length},onChange:u=>{m(s=>({...s,length:u.target.value}))},width:"100px"})})}),t.jsx(S,{tableActions:{},data:e,tableDef:oe,convertToCells:b,unitTemplate:p,testId:"Test"}),t.jsxs(V,{columns:"1fr 1fr",gap:!0,children:[t.jsx(T,{heading:t.jsx(I,{children:"Display data"}),children:t.jsx("pre",{children:t.jsx("code",{children:JSON.stringify(l,null,2)})})}),t.jsx(T,{heading:t.jsx(I,{children:"Storage data"}),children:t.jsx("pre",{children:t.jsx("code",{children:JSON.stringify(e,null,2)})})})]})]})},k=()=>{const[e,n]=f.useState(ne),[l,g]=f.useState([]),[p,m]=f.useState(K),o=(r,a,w,y)=>{const{value:i}=r.target;let R;n(_=>(R=[..._],R[w][a]=a==="rock_type"||a==="name"?i:c.withUnit(i,y[a]),R))},b=()=>{const r={...e[e.length-1]};n(a=>[...a,r])},v=r=>n(a=>a.filter((w,y)=>r!==y)),u=r=>t.jsx(ee,{onDeleteTableRow:v,rowid:r}),s=(r,a)=>{const w=r.map((y,i)=>{let{rock_type:R,name:_,depth_from:O,depth_to:W,Ro:B,Cp:q,Lambda:J}=y;const x=ue(i),F=me(e.length,i),P=x?[]:[{childComponent:u(i)}];return{cells:[{options:G,value:R||"Rock",type:"Select",disabled:!1,onChange:h=>o(h,"rock_type",i,a),testId:`table-cell-${i}-0`},{value:_,type:"Input",placeholder:"Name",disabled:!1,onChange:h=>o(h,"name",i,a),testId:`table-cell-${i}-1`},{value:ce(c.getValue(O),x),type:x?"Static":"NumberInput",style:x?{whiteSpace:"nowrap"}:{},disabled:x,onChange:h=>o(h,"depth_from",i,a),testId:`table-cell-${i}-2`},{value:c.getValue(W),type:F?"Static":"NumberInput",style:F?{whiteSpace:"nowrap"}:{},disabled:F,onChange:h=>o(h,"depth_to",i,a),testId:`table-cell-${i}-3`},{value:c.getValue(B),type:"NumberInput",disabled:!0,onChange:h=>o(h,"Ro",i,a),testId:`table-cell-${i}-4`},{value:c.getValue(q),type:"NumberInput",disabled:!0,onChange:h=>o(h,"Cp",i,a),testId:`table-cell-${i}-5`},{value:c.getValue(J),type:"NumberInput",disabled:!0,onChange:h=>o(h,"Lambda",i,a),testId:`table-cell-${i}-6`}],actions:P}});return g(r),w},d={addRow:b,reorderComponents:()=>{}},C=[{value:"m",label:"m"},{value:"ft",label:"ft"},{value:"km",label:"km"},{value:"in",label:"in"},{value:"mm",label:"mm"}];return t.jsxs(V,{columns:"1fr",gap:!0,children:[t.jsx(T,{heading:t.jsx(I,{children:"Global View Settings"}),children:t.jsx(M,{label:"Active Unit Template For Length",children:t.jsx(A,{options:C,value:{value:p.length},onChange:r=>{m(a=>({...a,length:r.target.value}))},width:"100px"})})}),t.jsx(S,{tableActions:d,data:e,tableDef:ae,convertToCells:s,unitTemplate:p,testId:"Test"}),t.jsxs(V,{columns:"1fr 1fr",gap:!0,children:[t.jsx(T,{heading:t.jsx(I,{children:"Display data"}),children:t.jsx("pre",{children:t.jsx("code",{children:JSON.stringify(l,null,2)})})}),t.jsx(T,{heading:t.jsx(I,{children:"Storage data"}),children:t.jsx("pre",{children:t.jsx("code",{children:JSON.stringify(e,null,2)})})})]})]})};var N,L,j;D.parameters={...D.parameters,docs:{...(N=D.parameters)==null?void 0:N.docs,source:{originalSource:`() => {
+  const [data, setData] = useState<any[]>(simpleData);
+  const [displayedData, setDisplayedData] = useState<any[]>([]);
+  const [unitTemplate, setUnitTemplate] = useState(initalUnitTemplate);
+  const onChangeValue = (ev: ChangeEvent<HTMLInputElement>, columnName: keyof ISimpleData, rowIx: number, displayedUnits: Record<string, string>) => {
+    const {
+      value
+    } = ev.target;
+    let newData: ISimpleData[];
+    setData(prev => {
+      newData = [...prev];
+      newData[rowIx][columnName] = withUnit(value, displayedUnits[columnName]);
+      return newData;
+    });
+  };
+  const convertToCells = (displayedRows: Array<any>, displayedUnits: Record<string, any>) => {
+    const cells = displayedRows.map((item, rowIndex) => {
+      let {
+        length,
+        pressure
+      } = item;
+      return {
+        cells: [{
+          value: getValue(length),
+          type: 'NumberInput',
+          disabled: false,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'length', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${0}\`
+        }, {
+          value: getValue(pressure),
+          type: 'NumberInput',
+          disabled: false,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'pressure', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${1}\`
+        }],
+        actions: []
+      };
+    });
+    setDisplayedData(displayedRows);
+    return cells;
+  };
+  const unitOptions = [{
+    value: 'm',
+    label: 'm'
+  }, {
+    value: 'ft',
+    label: 'ft'
+  }, {
+    value: 'km',
+    label: 'km'
+  }, {
+    value: 'in',
+    label: 'in'
+  }, {
+    value: 'mm',
+    label: 'mm'
+  }];
+  return <Grid columns="1fr" gap>
+      <Card heading={<Heading>Global View Settings</Heading>}>
+        <Field label="Active Unit Template For Length">
+          <Select options={unitOptions} value={{
+          value: unitTemplate.length
+        }} onChange={evt => {
+          setUnitTemplate(prev => ({
+            ...prev,
+            length: evt.target.value
+          }));
+        }} width="100px" />
+        </Field>
+      </Card>
+      <UnitTable tableActions={{}} data={data} tableDef={simpleTableDef} convertToCells={convertToCells} unitTemplate={unitTemplate} testId="Test" />
+      <Grid columns="1fr 1fr" gap>
+        <Card heading={<Heading>Display data</Heading>}>
+          <pre>
+            <code>{JSON.stringify(displayedData, null, 2)}</code>
+          </pre>
+        </Card>
+        <Card heading={<Heading>Storage data</Heading>}>
+          <pre>
+            <code>{JSON.stringify(data, null, 2)}</code>
+          </pre>
+        </Card>
+      </Grid>
+    </Grid>;
+}`,...(j=(L=D.parameters)==null?void 0:L.docs)==null?void 0:j.source}}};var $,H,E;k.parameters={...k.parameters,docs:{...($=k.parameters)==null?void 0:$.docs,source:{originalSource:`() => {
+  const [data, setData] = useState<IRock[]>(rocks);
+  const [displayedData, setDisplayedData] = useState<any[]>([]);
+  const [unitTemplate, setUnitTemplate] = useState(initalUnitTemplate);
+  const onChangeValue = (ev: ChangeEvent<HTMLInputElement>, columnName: keyof IRock, rowIx: number, displayedUnits: Record<string, string>) => {
+    const {
+      value
+    } = ev.target;
+    let newData: IRock[];
+    setData(prev => {
+      newData = [...prev];
+      newData[rowIx][columnName] = columnName === 'rock_type' || columnName === 'name' ? value : withUnit(value, displayedUnits[columnName]);
+      return newData;
+    });
+  };
+  const addRow = () => {
+    const newRow = {
+      ...data[data.length - 1]
+    };
+    setData(prev => [...prev, newRow]);
+  };
+  const onDeleteRow = (ix: number) => setData(prev => prev.filter((_, index) => ix !== index));
+  const rowMenu = (rowIx: number) => <TableRowMenu onDeleteTableRow={onDeleteRow} rowid={rowIx} />;
+  const convertToCells = (displayedRows: Array<any>, displayedUnits: Record<string, any>) => {
+    const cells = displayedRows.map((item, rowIndex) => {
+      let {
+        rock_type,
+        name,
+        depth_from,
+        depth_to,
+        Ro,
+        Cp,
+        Lambda
+      } = item;
+      const disabledFirstRow = isFirstRow(rowIndex);
+      const disabledLastRow = isLastRow(data.length, rowIndex);
+      const actions = disabledFirstRow ? [] : [{
+        childComponent: rowMenu(rowIndex)
+      }];
+      return {
+        cells: [{
+          options: rocksList,
+          value: rock_type || 'Rock',
+          type: 'Select',
+          disabled: false,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'rock_type', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${0}\`
+        }, {
+          value: name,
+          type: 'Input',
+          placeholder: 'Name',
+          disabled: false,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'name', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${1}\`
+        }, {
+          value: getCellLength(getValue(depth_from), disabledFirstRow),
+          type: disabledFirstRow ? 'Static' : 'NumberInput',
+          style: disabledFirstRow ? {
+            whiteSpace: 'nowrap'
+          } : {},
+          disabled: disabledFirstRow,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'depth_from', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${2}\`
+        }, {
+          value: getValue(depth_to),
+          type: disabledLastRow ? 'Static' : 'NumberInput',
+          style: disabledLastRow ? {
+            whiteSpace: 'nowrap'
+          } : {},
+          disabled: disabledLastRow,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'depth_to', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${3}\`
+        }, {
+          value: getValue(Ro),
+          type: 'NumberInput',
+          disabled: true,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'Ro', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${4}\`
+        }, {
+          value: getValue(Cp),
+          type: 'NumberInput',
+          disabled: true,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'Cp', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${5}\`
+        }, {
+          value: getValue(Lambda),
+          type: 'NumberInput',
+          disabled: true,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'Lambda', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${6}\`
+        }],
+        actions
+      };
+    });
+    setDisplayedData(displayedRows);
+    return cells;
+  };
+  const tableActions = {
+    addRow,
+    reorderComponents: () => {}
+  };
+  const unitOptions = [{
+    value: 'm',
+    label: 'm'
+  }, {
+    value: 'ft',
+    label: 'ft'
+  }, {
+    value: 'km',
+    label: 'km'
+  }, {
+    value: 'in',
+    label: 'in'
+  }, {
+    value: 'mm',
+    label: 'mm'
+  }];
+  return <Grid columns="1fr" gap>
+      <Card heading={<Heading>Global View Settings</Heading>}>
+        <Field label="Active Unit Template For Length">
+          <Select options={unitOptions} value={{
+          value: unitTemplate.length
+        }} onChange={evt => {
+          setUnitTemplate(prev => ({
+            ...prev,
+            length: evt.target.value
+          }));
+        }} width="100px" />
+        </Field>
+      </Card>
+      <UnitTable tableActions={tableActions} data={data} tableDef={tableDef} convertToCells={convertToCells} unitTemplate={unitTemplate} testId="Test" />
+      <Grid columns="1fr 1fr" gap>
+        <Card heading={<Heading>Display data</Heading>}>
+          <pre>
+            <code>{JSON.stringify(displayedData, null, 2)}</code>
+          </pre>
+        </Card>
+        <Card heading={<Heading>Storage data</Heading>}>
+          <pre>
+            <code>{JSON.stringify(data, null, 2)}</code>
+          </pre>
+        </Card>
+      </Grid>
+    </Grid>;
+}`,...(E=(H=k.parameters)==null?void 0:H.docs)==null?void 0:E.source}}};const Gt=["Default","Complex"];export{k as Complex,D as Default,Gt as __namedExportsOrder,At as default};

package/dist/storybook/iframe.html

@@ -357,7 +357,7 @@
   }
 </script>
 
-  <script type="module" crossorigin src="./assets/iframe-c1fab5c5.js"></script>
+  <script type="module" crossorigin src="./assets/iframe-8d80f428.js"></script>
 </head>
 
 <body>