npm - @oliasoft-open-source/react-ui-library - Versions diffs - 4.6.4 → 4.6.5-beta-1 - Mend

@oliasoft-open-source/react-ui-library 4.6.4 → 4.6.5-beta-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/react-ui-library",
-  "version": "4.6.4",
+  "version": "4.6.5-beta-1",
   "description": "Reusable UI components for React projects",
   "homepage": "https://oliasoft-open-source.gitlab.io/react-ui-library",
   "bugs": {

package/dist/404.html DELETED Viewed

@@ -1 +0,0 @@

- <!doctype html><head><title>React UI Library</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1" user-scalable="no"><meta name="apple-mobile-web-app-capable" content="yes"><script type="module" crossorigin src="/react-ui-library/assets/index-21EwET8E.js"></script><link rel="stylesheet" crossorigin href="/react-ui-library/assets/index-2LJjuVRB.css"></head><body><div id="content"></div></body>

package/dist/storybook/assets/dialog-roJ8Yns6.js DELETED Viewed

@@ -1 +0,0 @@

- import{j as t}from"./jsx-runtime-FsUICBgo.js";import{r as l}from"./index-RfLt4OUa.js";import{c as m}from"./index-VW3EWkuE.js";import{P as x}from"./portal-zPiHHKoC.js";import{l as y}from"./lodash-Bmg8FrMx.js";import{I as j}from"./common-types-U65vzrrz.js";import{H as v}from"./heading-jZsIIJF0.js";import{B as w}from"./button-shH4xakS.js";const _=(n,e,r=[])=>{l.useEffect(()=>{const i=o=>{o.key===n&&e()};return window.addEventListener("keydown",i),()=>{window.removeEventListener("keydown",i)}},r)},E="_wrapper_sb0hc_1",N="_contentContainer_sb0hc_15",b="_centered_sb0hc_24",k="_newLine_sb0hc_28",c={wrapper:E,contentContainer:N,centered:b,newLine:k},C=({children:n})=>{const e=l.useRef(null);return l.useEffect(()=>{if(e.current){const r=e.current.querySelector('[tabindex="0"]');r?r.focus():e.current.focus()}},[]),t.jsx("div",{ref:e,tabIndex:-1,className:m(c.wrapper),children:n})},I=({children:n,width:e,centered:r})=>t.jsx("div",{className:m(c.contentContainer,r?c.centered:""),style:{maxWidth:e},children:n}),f=({children:n,visible:e=!1,centered:r=!1,width:i="100%",onEnter:o,onEscape:d})=>(_("Enter",()=>{e&&o&&o()},[e,o]),_("Escape",()=>{e&&d&&d()},[e,d]),t.jsxs(t.Fragment,{children:[t.jsx(x,{id:"modalContainer",children:e?t.jsx(C,{children:t.jsx(I,{width:i,centered:r,children:n})}):null}),t.jsx("div",{id:"modalContainer"})]}));try{f.displayName="Modal",f.__docgenInfo={description:"",displayName:"Modal",props:{visible:{defaultValue:{value:"false"},description:"",name:"visible",required:!1,type:{name:"boolean"}},centered:{defaultValue:{value:"false"},description:"",name:"centered",required:!1,type:{name:"boolean"}},width:{defaultValue:{value:"100%"},description:"",name:"width",required:!1,type:{name:"TStringOrNumber"}},onEnter:{defaultValue:null,description:"",name:"onEnter",required:!1,type:{name:"(() => void)"}},onEscape:{defaultValue:null,description:"",name:"onEscape",required:!1,type:{name:"(() => void)"}}}}}catch{}const q="_dialog_18g0k_1",L="_inline_18g0k_18",V="_scroll_18g0k_21",D="_header_18g0k_24",M="_dismiss_18g0k_33",S="_content_18g0k_38",$="_footer_18g0k_47",a={dialog:q,inline:L,scroll:V,header:D,dismiss:M,content:S,footer:$},B=n=>y.isArray(n)?n.map((e,r)=>t.jsxs(l.Fragment,{children:[e," ",t.jsx("br",{})]},r)):n,g=({dialog:n})=>{const{heading:e,content:r,contentPadding:i="var(--padding)",footer:o,scroll:d,width:u,height:h,onClose:p,testId:s}=n;return t.jsxs("div",{className:m(a.dialog,u?a.inline:null,d?a.scroll:null),style:{width:u,height:h},"data-testid":s??null,children:[t.jsxs("div",{className:a.header,children:[t.jsx(v,{testId:s&&`${s}-heading`,top:!0,marginBottom:0,children:e}),p?t.jsx("div",{className:a.dismiss,children:t.jsx(w,{icon:j.CLOSE,round:!0,basic:!0,small:!0,colored:"muted",onClick:p})}):null]}),t.jsx("div",{"data-testid":s&&`${s}-content`,className:a.content,style:{padding:i},children:B(r)}),o&&t.jsx("div",{"data-testid":s&&`${s}-footer`,className:a.footer,children:o})]})};try{g.displayName="Dialog",g.__docgenInfo={description:"",displayName:"Dialog",props:{dialog:{defaultValue:null,description:"",name:"dialog",required:!0,type:{name:"IDialog"}}}}}catch{}export{g as D,f as M};

package/dist/storybook/assets/modal.stories-dirXv4n_.js DELETED Viewed

@@ -1,173 +0,0 @@
-import{j as e}from"./jsx-runtime-FsUICBgo.js";import{r as G}from"./index-RfLt4OUa.js";import{T as Y}from"./common-types-U65vzrrz.js";import{M,D as R}from"./dialog-roJ8Yns6.js";import{B as o}from"./button-shH4xakS.js";import{P as q}from"./popover-cad2llTa.js";import{I as U}from"./input-2BhbKV-j.js";import{I as z}from"./input-group-R8LoqKRn.js";import{F as v}from"./field-FZX0Z7IB.js";import{M as J}from"./actions-mOcj9IlF.js";import{S as Q}from"./select-DZdWUrCW.js";import{S as X}from"./spacer-Yji9g2AW.js";import{T as Z}from"./tooltip-HEHiU__l.js";import{M as x}from"./types-VB5zD18b.js";import"./index-VW3EWkuE.js";import"./portal-zPiHHKoC.js";import"./index-miLrID2P.js";import"./lodash-Bmg8FrMx.js";import"./heading-jZsIIJF0.js";import"./help-icon-SKky6KLV.js";import"./icon-8EQazuuW.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./inheritsLoose-8sb_A2v4.js";import"./tslib.es6-OIsz3r9a.js";import"./index-4QtD-hFu.js";import"./disabled-context-urNQThQz.js";import"./spinner-R8Il4aRe.js";import"./types-5uVBABF4.js";import"./label-uCFEME1p.js";import"./badge-23Ty_zBt.js";import"./assertThisInitialized-4q6YPdh3.js";import"./memoize-one.esm-hqe5SRxC.js";import"./text-6KQ6ntOV.js";import"./select.input-zP5tW20f.js";const{useArgs:$}=__STORYBOOK_MODULE_ADDONS__,Fe={title:"Modals/Modal",component:M,args:{visible:!0,centered:!0,width:"300px",heading:"Are you sure?",content:e.jsx(e.Fragment,{children:"This will complete the transaction"}),footer:e.jsxs(e.Fragment,{children:[e.jsx(o,{label:"Okay",colored:!0,onClick:()=>{}}),e.jsx(o,{label:"Cancel",onClick:()=>{}})]}),onClose:()=>{}},parameters:{docs:{story:{inline:!1,iframeHeight:400}}}},n=()=>{const[{visible:g,centered:p,...b},l]=$(),r=()=>{l({visible:!g})};return e.jsxs(e.Fragment,{children:[e.jsx(M,{visible:g,centered:p,children:e.jsx(R,{dialog:{...b,onClose:r}})}),e.jsx(o,{label:"Open Modal",onClick:r})]})},m=n.bind({}),s=n.bind({});s.args={centered:!0};const a=n.bind({});a.args={content:["This is a","new line!"]};const t=n.bind({});t.args={scroll:!0,content:e.jsx("div",{children:"Example modal content goes here lorem ipsum. ".repeat(100)})};const i=n.bind({});i.args={width:"100%",content:e.jsx("div",{children:"Example modal content goes here lorem ipsum. ".repeat(100)})};const d=n.bind({});d.args={contentPadding:0};const c=n.bind({});c.args={content:e.jsxs(e.Fragment,{children:[e.jsx(Z,{text:"Tooltip text",children:"Hover for tooltip"}),e.jsx(X,{}),e.jsx(v,{label:"Custom Select",helpText:"Select an animal",children:e.jsx(Q,{name:"example",options:["Aardvarks","Kangaroos","Monkeys","Possums","Gorilla","Puma","Patagonian Mara","Tarsier","Koala","Panda","Red Panda","Impala","Tiger","Crocodile","Bat"],onChange:()=>{},value:"Monkeys",error:"Bad value"})}),e.jsx(v,{label:"Nested Menu",children:e.jsx(J,{maxHeight:"240px",menu:{label:"Menu",trigger:Y.DROP_DOWN_BUTTON,sections:[{type:x.MENU,menu:{trigger:"Text",label:"Children",sections:[...Array(100).keys()].map(()=>({type:"Option",label:Math.random().toString(36).substring(7),onClick:()=>{}}))}},...[...Array(100).keys()].map(()=>({type:x.OPTION,label:Math.random().toString(36).substring(7),onClick:()=>{}}))]}})}),e.jsx(q,{content:e.jsxs(z,{small:!0,children:[e.jsx(U,{value:"Value",width:"150px",error:"Bad value"}),e.jsx(o,{colored:!0,label:"Save",onClick:()=>{}}),e.jsx(o,{label:"Cancel",onClick:()=>{}})]}),children:e.jsx(o,{colored:!0,label:"Toggle me",onClick:()=>{}})})]})};const u=()=>{const[g,p]=G.useState(!1),b=()=>{p(!0)},l=()=>{p(!1)},r=()=>{console.log("Submit action"),l()};return e.jsxs(e.Fragment,{children:[e.jsx(M,{visible:g,onEnter:()=>{console.log("Enter"),r()},onEscape:()=>{console.log("Escape"),l()},children:e.jsx(R,{dialog:{heading:"Test key handling",content:e.jsx(U,{}),footer:e.jsxs(e.Fragment,{children:[e.jsx(o,{label:"Done",colored:"red",onClick:r}),e.jsx(o,{label:"Cancel",onClick:l})]}),onClose:l}})}),e.jsx(o,{label:"Open Modal",onClick:b})]})};var C,h,j;m.parameters={...m.parameters,docs:{...(C=m.parameters)==null?void 0:C.docs,source:{originalSource:`() => {
-  const [{
-    visible,
-    centered,
-    ...dialogProps
-  }, updateArgs] = useArgs();
-  const toggleModal = () => {
-    updateArgs({
-      visible: !visible
-    });
-  };
-  return <>
-      <Modal visible={visible} centered={centered}>
-        <Dialog dialog={{
-        ...dialogProps,
-        onClose: toggleModal
-      }} />
-      </Modal>
-      <Button label="Open Modal" onClick={toggleModal} />
-    </>;
-}`,...(j=(h=m.parameters)==null?void 0:h.docs)==null?void 0:j.source}}};var k,P,S;s.parameters={...s.parameters,docs:{...(k=s.parameters)==null?void 0:k.docs,source:{originalSource:`() => {
-  const [{
-    visible,
-    centered,
-    ...dialogProps
-  }, updateArgs] = useArgs();
-  const toggleModal = () => {
-    updateArgs({
-      visible: !visible
-    });
-  };
-  return <>
-      <Modal visible={visible} centered={centered}>
-        <Dialog dialog={{
-        ...dialogProps,
-        onClose: toggleModal
-      }} />
-      </Modal>
-      <Button label="Open Modal" onClick={toggleModal} />
-    </>;
-}`,...(S=(P=s.parameters)==null?void 0:P.docs)==null?void 0:S.source}}};var A,f,O;a.parameters={...a.parameters,docs:{...(A=a.parameters)==null?void 0:A.docs,source:{originalSource:`() => {
-  const [{
-    visible,
-    centered,
-    ...dialogProps
-  }, updateArgs] = useArgs();
-  const toggleModal = () => {
-    updateArgs({
-      visible: !visible
-    });
-  };
-  return <>
-      <Modal visible={visible} centered={centered}>
-        <Dialog dialog={{
-        ...dialogProps,
-        onClose: toggleModal
-      }} />
-      </Modal>
-      <Button label="Open Modal" onClick={toggleModal} />
-    </>;
-}`,...(O=(f=a.parameters)==null?void 0:f.docs)==null?void 0:O.source}}};var T,y,B;t.parameters={...t.parameters,docs:{...(T=t.parameters)==null?void 0:T.docs,source:{originalSource:`() => {
-  const [{
-    visible,
-    centered,
-    ...dialogProps
-  }, updateArgs] = useArgs();
-  const toggleModal = () => {
-    updateArgs({
-      visible: !visible
-    });
-  };
-  return <>
-      <Modal visible={visible} centered={centered}>
-        <Dialog dialog={{
-        ...dialogProps,
-        onClose: toggleModal
-      }} />
-      </Modal>
-      <Button label="Open Modal" onClick={toggleModal} />
-    </>;
-}`,...(B=(y=t.parameters)==null?void 0:y.docs)==null?void 0:B.source}}};var D,E,_;i.parameters={...i.parameters,docs:{...(D=i.parameters)==null?void 0:D.docs,source:{originalSource:`() => {
-  const [{
-    visible,
-    centered,
-    ...dialogProps
-  }, updateArgs] = useArgs();
-  const toggleModal = () => {
-    updateArgs({
-      visible: !visible
-    });
-  };
-  return <>
-      <Modal visible={visible} centered={centered}>
-        <Dialog dialog={{
-        ...dialogProps,
-        onClose: toggleModal
-      }} />
-      </Modal>
-      <Button label="Open Modal" onClick={toggleModal} />
-    </>;
-}`,...(_=(E=i.parameters)==null?void 0:E.docs)==null?void 0:_.source}}};var F,N,I;d.parameters={...d.parameters,docs:{...(F=d.parameters)==null?void 0:F.docs,source:{originalSource:`() => {
-  const [{
-    visible,
-    centered,
-    ...dialogProps
-  }, updateArgs] = useArgs();
-  const toggleModal = () => {
-    updateArgs({
-      visible: !visible
-    });
-  };
-  return <>
-      <Modal visible={visible} centered={centered}>
-        <Dialog dialog={{
-        ...dialogProps,
-        onClose: toggleModal
-      }} />
-      </Modal>
-      <Button label="Open Modal" onClick={toggleModal} />
-    </>;
-}`,...(I=(N=d.parameters)==null?void 0:N.docs)==null?void 0:I.source}}};var w,H,K;c.parameters={...c.parameters,docs:{...(w=c.parameters)==null?void 0:w.docs,source:{originalSource:`() => {
-  const [{
-    visible,
-    centered,
-    ...dialogProps
-  }, updateArgs] = useArgs();
-  const toggleModal = () => {
-    updateArgs({
-      visible: !visible
-    });
-  };
-  return <>
-      <Modal visible={visible} centered={centered}>
-        <Dialog dialog={{
-        ...dialogProps,
-        onClose: toggleModal
-      }} />
-      </Modal>
-      <Button label="Open Modal" onClick={toggleModal} />
-    </>;
-}`,...(K=(H=c.parameters)==null?void 0:H.docs)==null?void 0:K.source}}};var L,V,W;u.parameters={...u.parameters,docs:{...(L=u.parameters)==null?void 0:L.docs,source:{originalSource:`() => {
-  const [visible, setVisible] = useState(false);
-  const openModal = () => {
-    setVisible(true);
-  };
-  const closeModal = () => {
-    setVisible(false);
-  };
-  const handleSubmit = () => {
-    console.log('Submit action');
-    closeModal();
-  };
-  return <>
-      <Modal visible={visible} onEnter={() => {
-      console.log('Enter');
-      handleSubmit();
-    }} onEscape={() => {
-      console.log('Escape');
-      closeModal();
-    }}>
-        <Dialog dialog={{
-        heading: 'Test key handling',
-        content: <Input />,
-        footer: <>
-                <Button label="Done" colored="red" onClick={handleSubmit} />
-                <Button label="Cancel" onClick={closeModal} />
-              </>,
-        onClose: closeModal
-      }} />
-      </Modal>
-      <Button label="Open Modal" onClick={openModal} />
-    </>;
-}`,...(W=(V=u.parameters)==null?void 0:V.docs)==null?void 0:W.source}}};const Ne=["Default","Centered","LineBreak","Scroll","FullWidth","NoContentPadding","WithPopoverLayers","KeyHandle"];export{s as Centered,m as Default,i as FullWidth,u as KeyHandle,a as LineBreak,d as NoContentPadding,t as Scroll,c as WithPopoverLayers,Ne as __namedExportsOrder,Fe as default};

package/dist/storybook/assets/unit-table.stories-lZ4MjpDy.js DELETED Viewed

@@ -1,108 +0,0 @@
-import{j as s}from"./jsx-runtime-FsUICBgo.js";import{r as h}from"./index-RfLt4OUa.js";import{f as Q}from"./immer.esm-bD7SSJ7T.js";import{d as v}from"./index-qZmQ7nA9.js";import{G as J}from"./grid-u1mZpaML.js";import{C as D}from"./card-0r8RRVk-.js";import{F as $}from"./field-FZX0Z7IB.js";import{H as I}from"./heading-jZsIIJF0.js";import{S as W}from"./select-DZdWUrCW.js";import{l as X}from"./lodash-Bmg8FrMx.js";import{u as Y}from"./use-previous-VKMmnaK7.js";import{T as Z,C as K}from"./table-033R9jUC.js";import"./index-cCpkwrS5.js";import"./styled-components.browser.esm-qIipjd6c.js";import"./tslib.es6-OIsz3r9a.js";import"./index-VW3EWkuE.js";import"./label-uCFEME1p.js";import"./common-types-U65vzrrz.js";import"./help-icon-SKky6KLV.js";import"./tooltip-HEHiU__l.js";import"./index-miLrID2P.js";import"./icon-8EQazuuW.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./inheritsLoose-8sb_A2v4.js";import"./index-4QtD-hFu.js";import"./disabled-context-urNQThQz.js";import"./types-5uVBABF4.js";import"./assertThisInitialized-4q6YPdh3.js";import"./memoize-one.esm-hqe5SRxC.js";import"./types-VB5zD18b.js";import"./text-6KQ6ntOV.js";import"./actions-mOcj9IlF.js";import"./button-shH4xakS.js";import"./spinner-R8Il4aRe.js";import"./badge-23Ty_zBt.js";import"./select.input-zP5tW20f.js";import"./index.es-VXFRDikp.js";import"./redux-F5dueAP3.js";import"./objectSpread2-93s0nBry.js";import"./tiny-invariant-R4kOKlvx.js";import"./pagination-tnyyuMkB.js";import"./input-2BhbKV-j.js";import"./input-group-R8LoqKRn.js";import"./input-group-addon-BHVsW9mL.js";import"./number-input-CMhEMmUd.js";import"./check-box-2gxosI3y.js";import"./slider-MN9iDCsS.js";import"./index-ugi_ZH6T.js";import"./popover-cad2llTa.js";const ee=o=>o.reduce(({preferredUnits:n,storageUnits:t},{unitKey:i,preferredUnit:m,storageUnit:g})=>(n[i]=m,t[i]=g,{preferredUnits:n,storageUnits:t}),{preferredUnits:{},storageUnits:{}}),te=({headers:o,rows:n,selectedUnits:t,storageUnits:i,onChangeUnit:m,convertBackToStorageUnit:g,enableCosmeticRounding:a,enableDisplayRounding:l})=>{const u=o?o.map(c=>({...c,cells:c.cells.map(r=>{if(r.type===K.AUTO_UNIT){const{testId:e,unitKey:y}=r;return{value:t[y],type:K.SELECT,options:v.getUnitsForQuantity(y),native:!0,onChange:p=>m({unitKey:y,value:p.target.value}),testId:e}}return r})})):[],d=n?n.map((c,r)=>({...c,cells:c.cells.map((e,y)=>{if("autoUnit"in e&&(e!=null&&e.autoUnit)&&(typeof(e==null?void 0:e.value)=="string"||typeof(e==null?void 0:e.value)=="number")){const{unitKey:p,value:U,formatDisplayValue:f}=e,T=l&&"roundDisplayValue"in e?e==null?void 0:e.roundDisplayValue:null,b=t[p],C=i[p],j=b!==C,A=j?v.convertAndGetValue(U,b,C):e.value,q=v.isScientificStringNum(U),N=a&&(j||!q)?v.roundToPrecision(A,14):A,k=f?f(N):N;return{...e,value:k,enableCosmeticRounding:a,enableDisplayRounding:l,roundDisplayValue:T,onChange:w=>{const{value:_}=w.target,S=i[p],V=t[p],O=V!==S?v.convertAndGetValue(_,S,V):_,z=g?S:V;if("onChange"in e){const{onChange:L}=e,M={...w,target:{...w.target,value:String(O),rowIndex:r,cellIndex:y,unit:z}};L(M)}}}}return e})})):[];return{convertedHeaders:u,convertedRows:d}},R=({table:o,unitConfig:n,convertBackToStorageUnit:t=!0,enableCosmeticRounding:i=!0,enableDisplayRounding:m=!0})=>{const{rows:g,headers:a,...l}=o,{storageUnits:u,preferredUnits:d}=ee(n),c=Y(d),[r,e]=h.useState(d),y=({unitKey:b,value:C})=>e({...r,[b]:C}),p=b=>te({headers:a,rows:g,selectedUnits:b,storageUnits:u,onChangeUnit:y,convertBackToStorageUnit:t,enableCosmeticRounding:i,enableDisplayRounding:m}),U=p(r),[f,T]=h.useState(U);return h.useEffect(()=>{!X.isEqual(d,c)&&(e(d),T(p(d)))},[n]),h.useEffect(()=>{T(p(r))},[o,r]),s.jsx(Z,{table:{...l,headers:f.convertedHeaders,rows:f.convertedRows}})};try{R.displayName="UnitTable",R.__docgenInfo={description:"",displayName:"UnitTable",props:{table:{defaultValue:null,description:"",name:"table",required:!0,type:{name:"IUnitTable"}},unitConfig:{defaultValue:null,description:"",name:"unitConfig",required:!0,type:{name:"IUnitConfigItem[]"}},convertBackToStorageUnit:{defaultValue:{value:"true"},description:"",name:"convertBackToStorageUnit",required:!1,type:{name:"boolean"}},enableCosmeticRounding:{defaultValue:{value:"true"},description:"",name:"enableCosmeticRounding",required:!1,type:{name:"boolean"}},enableDisplayRounding:{defaultValue:{value:"true"},description:"",name:"enableDisplayRounding",required:!1,type:{name:"boolean"}},onListReorder:{defaultValue:null,description:"",name:"onListReorder",required:!1,type:{name:"((obj: { from: number; to: number; }) => void)"}}}}}catch{}const rt={title:"Basic/UnitTable",args:{}},ne=!0,ae=!0,oe=!0,G="m",re=3,ie=(o,n)=>{const t=[n,n,n],i=[...Array(Number(o))].map((m,g)=>{const a=g,l=g+1.25,u=l-a;return[String(a),String(l),String(u)]});return[t].concat(i)},se=ie(re,G),le=({reduxTable:o,value:n,rowIndex:t,cellIndex:i})=>Q(o,m=>{m[t+1][i]=n}),x=()=>{const[o,n]=h.useState(G),[t,i]=h.useState(se),m=a=>{const{rowIndex:l,cellIndex:u,value:d,unit:c}=a.target,r=le({reduxTable:t,value:d,rowIndex:l,cellIndex:u});i(r)},g=t.reduce((a,l,u)=>(u===0?a.headers=[{cells:[{value:"From"},{value:"To"},{value:"Delta"}]},{cells:[{type:"AutoUnit",unitKey:"length"},{type:"AutoUnit",unitKey:"length"},{type:"AutoUnit",unitKey:"length",testId:"table-unit-selector-3"}]}]:a.rows=a.rows.concat({cells:l.map((d,c)=>{const r=u===1&&c===1;return{value:d,type:r?"Text":"NumberInput",unitKey:"length",onChange:m,roundDisplayValue:u===3&&c===2?f=>v.roundByMagnitude(f,2):null,formatDisplayValue:r?f=>`T* ${f}`:null,autoUnit:!0}})}),a),{headers:[],rows:[]});return s.jsxs(J,{columns:"1fr 1fr",gap:!0,children:[s.jsx(D,{heading:s.jsx(I,{children:"Global View Settings"}),children:s.jsx($,{label:"Active Unit Template",children:s.jsx(W,{options:v.getUnitsForQuantity("length"),value:{value:o},onChange:a=>n(a.target.value),width:"100px"})})}),s.jsx(D,{heading:s.jsx(I,{children:"UnitTable"}),children:s.jsx(R,{table:g,unitConfig:[{unitKey:"length",storageUnit:t[0][0],preferredUnit:o}],convertBackToStorageUnit:ne,enableDisplayRounding:oe,enableCosmeticRounding:ae})}),s.jsx(D,{heading:s.jsx(I,{children:"Storage State (Redux)"}),children:s.jsx("pre",{children:s.jsx("code",{children:JSON.stringify(t,null,2)})})})]})};var E,H,F,P,B;x.parameters={...x.parameters,docs:{...(E=x.parameters)==null?void 0:E.docs,source:{originalSource:`() => {
-  const [preferredUnit, setPreferredUnit] = useState(initialUnit);
-  const [reduxTable, setReduxTable] = useState(initialTable);
-  /*********************************************************************************************************************
-   Cell onChange handler
-  *********************************************************************************************************************/
-  const onUpdateCell = (evt: IUnitTableOnChangeEvent) => {
-    const {
-      rowIndex,
-      cellIndex,
-      value,
-      unit
-    } = evt.target;
-    const nextTable = convertWholeTable ? convertStorageTable({
-      reduxTable,
-      value,
-      unit,
-      rowIndex,
-      cellIndex
-    }) : updateCell({
-      reduxTable,
-      value,
-      rowIndex,
-      cellIndex
-    });
-    setReduxTable(nextTable);
-  };
-  /*********************************************************************************************************************
-   Construct table view data (same as old Table component, with a new props)
-  *********************************************************************************************************************/
-  const tableViewData = reduxTable.reduce((acc, row, rowIndex) => {
-    if (rowIndex === 0) {
-      acc.headers = [{
-        cells: [{
-          value: 'From'
-        }, {
-          value: 'To'
-        }, {
-          value: 'Delta'
-        }]
-      }, {
-        cells: [{
-          type: 'AutoUnit',
-          unitKey: 'length'
-        }, {
-          type: 'AutoUnit',
-          unitKey: 'length'
-        }, {
-          type: 'AutoUnit',
-          unitKey: 'length',
-          testId: 'table-unit-selector-3'
-        }]
-      }];
-    } else {
-      acc.rows = acc.rows.concat({
-        cells: row.map((cell, cellIndex) => {
-          const specialCell = rowIndex === 1 && cellIndex === 1;
-          const type = specialCell ? 'Text' : 'NumberInput';
-          const formatDisplayValue = specialCell ? (value: number | string) => \`T* \${value}\` : null;
-          const customDisplayRounding = rowIndex === 3 && cellIndex === 2 ? (value: TStringNumberNull) => roundByMagnitude(value, 2) : null;
-          const value = cell;
-          return {
-            value,
-            type,
-            unitKey: 'length',
-            onChange: onUpdateCell,
-            roundDisplayValue: customDisplayRounding,
-            // optionally customize the display rounding of specific columns/cells
-            formatDisplayValue,
-            // optionally extend/customize the display formatting of specific columns/cells
-            autoUnit: true
-          };
-        })
-      });
-    }
-    return acc;
-  }, {
-    headers: ([] as any[]),
-    rows: ([] as IUnitTableRow[])
-  });
-  return <Grid columns="1fr 1fr" gap>
-      <Card heading={<Heading>Global View Settings</Heading>}>
-        <Field label="Active Unit Template">
-          <Select options={getUnitsForQuantity('length')} value={{
-          value: preferredUnit
-        }} onChange={evt => setPreferredUnit(evt.target.value)} width="100px" />
-        </Field>
-      </Card>
-      <Card heading={<Heading>UnitTable</Heading>}>
-        <UnitTable table={tableViewData}
-      //New props:
-      unitConfig={[{
-        unitKey: 'length',
-        storageUnit: reduxTable[0][0],
-        preferredUnit
-      }]}
-      //Most tables should just use the default values here (true):
-      convertBackToStorageUnit={convertBackToStorageUnit} enableDisplayRounding={enableDisplayRounding} enableCosmeticRounding={enableCosmeticRounding} />
-      </Card>
-      <Card heading={<Heading>Storage State (Redux)</Heading>}>
-        <pre>
-          <code>{JSON.stringify(reduxTable, null, 2)}</code>
-        </pre>
-      </Card>
-    </Grid>;
-}`,...(F=(H=x.parameters)==null?void 0:H.docs)==null?void 0:F.source},description:{story:"Story",...(B=(P=x.parameters)==null?void 0:P.docs)==null?void 0:B.description}}};const it=["UnitTablePrototype"];export{x as UnitTablePrototype,it as __namedExportsOrder,rt as default};