@oliasoft-open-source/react-ui-library 4.10.5-beta-3 → 4.10.5

package/dist/storybook/assets/unit-input.stories-SLkG2NCZ.js

@@ -1,426 +0,0 @@
-import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as o}from"./index-DhsZuJvc.js";import{d as l}from"./index-C0x1JmaP.js";import{w as F,u as g,e as h,f as fe,a as ye}from"./index-DMAnyMX5.js";import{c as zn}from"./index-Bk2sglWO.js";import{u as Jn}from"./use-previous-D775JrO6.js";import{M as Ge}from"./actions-Tr0wIZve.js";import{I as Yn}from"./input-group-addon-D68iUKV2.js";import{B as p}from"./button-CzvLc2io.js";import{T as Zn}from"./tooltip-1V7clEnw.js";import{I as Qn}from"./input-group-BaRSJAEN.js";import{S as b}from"./spacer-BWoNR27H.js";import{T as we}from"./text-B3-TSWok.js";import{M as Ke}from"./types-BmbYqTX_.js";import{l as V}from"./lodash-c4VUpsOs.js";import{N as Xn,r as ea}from"./number-input-BTExotSd.js";import{D as ta}from"./divider-DY9nJ_7N.js";import{R as wn,C as Ae}from"./row-Bmiy2Lh0.js";import{F as I}from"./field-C5_fLDpy.js";import{M as Te}from"./message-DQ3q8XF9.js";import{G as Tn}from"./grid-DRkC-bt8.js";import{C as q}from"./card-EcjmryU9.js";import{H as A}from"./heading-NkLgQYoP.js";import{T as qe}from"./toggle-C0zvrIOF.js";import{S as na}from"./select-BEc_mNg5.js";import{I as kn}from"./icon-BP4BO6-k.js";import"./index-DRSy5Ssd.js";import"./index-CF7H4eMJ.js";import"./common-types-Sih75Sav.js";import"./disabled-context-rmpd7YJS.js";import"./types-Dx2TtIG9.js";import"./badge-CLQ59MDF.js";import"./spinner-AWUe4xwQ.js";import"./index-CUZDtIZe.js";import"./select.input-D0UkAPd9.js";import"./input-DTXbDJaL.js";import"./styled-components.browser.esm-BQ9GQzDc.js";import"./label-hiSz3I8H.js";import"./help-icon-41R-Z9N1.js";import"./index-CEuq6vkz.js";import"./extends-CF3RwP-h.js";import"./assertThisInitialized-B9jnkVVz.js";import"./inheritsLoose-DR8r8Ogv.js";import"./memoize-one.esm-CcMeOnPo.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";const aa=()=>{const t=o.useRef(null);return o.useLayoutEffect(()=>{t.current&&(t.current(),t.current=null)}),n=>{t.current=n}},ia=(t,a)=>{const n=a==null?void 0:a[t];return n||(console.log(`Warning: 'unitTemplate' missing for '${t}'. Using initial unit, preferred unit or value unit.`),l.unitFromQuantity(t)??"")};var x=(t=>(t.CUSTOM="custom",t.PREDEFINED="predefined",t))(x||{});const Vn=t=>t==="undefined"||t===void 0||t===""||t==="null"||t===null||t==="NaN"||isNaN(t),Sn=(t="",a,n="",s=!1)=>{if(s)return t;if(a&&!Vn(t))try{const i=l.isValueWithUnit(t)?t:l.withUnit(t,n),m=l.convertSamePrecision(i,a);return l.getValue(m)}catch{}},ra=t=>t?!!l.getUnit(t):!1,O=(t="",a,n,s)=>{const i=ra(t)||l.isValueWithUnit(t),m=l.getValue(t);return Vn(m)?m:i?Sn(m,a,n,s):t},$e=t=>V.isObject(t)&&!V.isArray(t)&&!V.isFunction(t)?V.get(t,"fieldName",""):typeof t=="string"?t:"",ze=(t="")=>{var a;return(a=l.KNOWN_UNITS)==null?void 0:a.includes(t)},sa=(t,a)=>{const n=l.getUnit(t||"");return ze(a)&&ze(n)};let la=o.createContext(null);const oa=()=>o.useContext(la),ua="_predefinedMenuActive_ye9w9_1",da="_inputWrapper_ye9w9_4",Je={predefinedMenuActive:ua,inputWrapper:da},c=({name:t,placeholder:a="",disabled:n=!1,disabledUnit:s=!1,error:i=null,left:m=!1,small:u=!1,width:f="100%",value:y,unitkey:S="",initUnit:ke,noConversion:Y=!1,onChange:P=V.noop,onClick:Ve=V.noop,onFocus:Se=V.noop,onSwitchUnit:U=V.noop,unitTemplate:j,doNotConvertValue:R=!1,testId:_,warning:Fe=null,predefinedOptions:k,initialPredefinedOption:jn=!1,shouldLinkAutomaticly:Pe=!0,selectedPredefinedOptionKey:Re,validationCallback:En=()=>({name:"",error:null}),disabledValidation:Bn=!1,allowEmpty:ma=!1,autoValue:E,convertBackToStorageUnit:Dn=!1,enableCosmeticRounding:_e=!0,enableDisplayRounding:Nn=!1})=>{const M=oa(),qn=aa();typeof y=="number"&&(y=`${y}`);const[Me="",B=""]=y!==void 0?l.split(y):[],We=E?l.getUnit(E):"",Oe=o.useMemo(()=>ia(S,j||(M==null?void 0:M.unitTemplate)),[S,j,M==null?void 0:M.unitTemplate]),An=sa(y,Oe),w=ke||Oe||B,Fn=Jn(w),He=O(y,w,B,R),Le=O(E,w,We,R),Pn=He!==""?{value:He,unit:w}:Le!==""?{value:Le,unit:w}:{value:Me,unit:B},[v,je]=o.useState(Pn),Rn=(v==null?void 0:v.value)===void 0,[D,Ee]=o.useState(jn?x.PREDEFINED:x.CUSTOM),Be=Me===""&&E,_n=!!(Bn||E),Z=k&&k.find(r=>{if(!(r!=null&&r.value))return;if(Re)return Re===r.valueKey;const d=l.isValueWithUnit(r.value)?l.getUnit(r.value):"";return l.withUnit(Sn(y,d),d)===r.value}),Mn=()=>{if(S)try{const r=Be?E:y??"";let d=l.altUnitsList(r,S);return l.getValue(r)===""?d.map(T=>["",T[1]]):d}catch{return null}},Wn=r=>{const d=$e(t),T=r.target,{value:N,selectionStart:W}=T,xe=l.withUnit(N,(v==null?void 0:v.unit)||""),Ne=Dn?l.withUnit(l.convertAndGetValue(xe,B),B):xe;P({target:{value:Ne,name:d}});const[Kn,$n]=l.split(xe);je({value:Kn,unit:$n}),qn(()=>{T.selectionStart=W,T.selectionEnd=W})},On=(r,d)=>{d===v.unit||isNaN(Number(r))||(je({value:r,unit:d}),U&&U(d))};o.useEffect(()=>{if(w){let r,d="";Fn!==w?(r=O(y,w,B,R),d=w):l.withUnit(v.value,v.unit)!==y&&(r=O(y,v.unit,B,R),d=v.unit),r!==void 0&&je({value:r,unit:d}),k&&Ee(Z&&Pe?x.PREDEFINED:x.CUSTOM)}},[w,y,i,Pe]);const be=Mn(),Ce=l.label(v.unit)||v.unit||"",Hn=Y||!be||be&&be.length===1,De=$e(t);let Ue;const Ln=r=>{const d=r!=null&&r.value?r.value:"",[T="",N=""]=l.isValueWithUnit(d)?l.split(d):[d];return{type:Ke.OPTION,inline:!0,onClick:()=>{l.validateNumber(T).valid&&!n&&(Ee(x.PREDEFINED),P({target:{value:d,name:typeof t=="string"?t:(t==null?void 0:t.fieldName)||"",predefinedSelected:!0,predefinedOption:r}}))},label:e.jsxs(e.Fragment,{children:[e.jsx(we,{children:r.label}),e.jsx(b,{width:"20px",height:"0"})]}),description:l.isValueWithUnit(d)?`${T} ${N}`:d,selected:Z===r&&D===x.PREDEFINED}};if(Ue=[{type:Ke.OPTION,inline:!0,onClick:()=>{D!==x.CUSTOM&&!n&&P({target:{value:l.withUnit(v.value,v.unit),name:typeof t=="string"?t:(t==null?void 0:t.fieldName)||""}})},label:"Custom",selected:D===x.CUSTOM}],k!=null&&k.length){const r=k.map(Ln);Ue=[...Ue,...r]}const Gn=r=>{if(Be)return O(E,v.unit,We,R);if(l.isValueWithUnit(r)){const d=l.getUnit(r);return O(r,v.unit,d,R)}return r};return e.jsx("div",{className:D===x.PREDEFINED?zn(Je.predefinedMenuActive):"",children:e.jsxs(Qn,{small:u,width:f,children:[k&&e.jsx(Zn,{text:D===x.PREDEFINED?Z==null?void 0:Z.label:"",children:e.jsx(Ge,{maxHeight:380,groupOrder:"first",testId:_&&`${_}-predefined-menu`,disabled:n,menu:{colored:!0,trigger:"Component",component:e.jsx(p,{groupOrder:"first",active:D===x.PREDEFINED,icon:D===x.PREDEFINED?"link":"unlink"}),small:u,sections:Ue}})}),e.jsx("div",{className:Je.inputWrapper,children:e.jsx(Xn,{name:De,testId:_,disabled:n,placeholder:Gn(a),value:v.value,onChange:Wn,onFocus:Se,error:i===null?void 0:i,warning:Fe===null?void 0:Fe,left:m,allowEmpty:Rn,validationCallback:(r,d)=>En(De,d),enableCosmeticRounding:_e,enableDisplayRounding:Nn,groupOrder:k?"middle":"first",disableInternalErrorValidationMessages:_n,small:u},De)}),Ce&&(Hn||!An?e.jsx(Yn,{groupOrder:"last",children:Ce}):e.jsx(Ge,{maxHeight:380,groupOrder:"last",disabled:s,testId:_&&`${_}-menu`,menu:{label:Ce,trigger:"DropDownButton",small:u,sections:be.map(([r,d,T])=>{const N=T||d||"",W=l.isValidNum(r)?r:"";return{type:"Option",label:_e?ea(W):W,inline:!0,onClick:Ne=>{Ne.stopPropagation(),On(Be?"":r,d)},description:N,selected:N===Ce,testId:`${_}-unit-${N}`}})}}))]})})};c.__docgenInfo={description:"",methods:[],displayName:"UnitInput",props:{name:{required:!0,tsType:{name:"union",raw:"string | { fieldName?: string }",elements:[{name:"string"},{name:"signature",type:"object",raw:"{ fieldName?: string }",signature:{properties:[{key:"fieldName",value:{name:"string",required:!1}}]}}]},description:""},placeholder:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"''",computed:!1}},disabled:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},disabledUnit:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},error:{required:!1,tsType:{name:"union",raw:"string | null | boolean",elements:[{name:"string"},{name:"null"},{name:"boolean"}]},description:"",defaultValue:{value:"null",computed:!1}},left:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},small:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},width:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:"",defaultValue:{value:"'100%'",computed:!1}},value:{required:!1,tsType:{name:"string"},description:""},unitkey:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"''",computed:!1}},initUnit:{required:!1,tsType:{name:"string"},description:""},noConversion:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},doNotConvertValue:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},testId:{required:!1,tsType:{name:"string"},description:""},warning:{required:!1,tsType:{name:"union",raw:"string | boolean | null",elements:[{name:"string"},{name:"boolean"},{name:"null"}]},description:"",defaultValue:{value:"null",computed:!1}},predefinedOptions:{required:!1,tsType:{name:"union",raw:"IPredefinedOption[] | null",elements:[{name:"Array",elements:[{name:"IPredefinedOption"}],raw:"IPredefinedOption[]"},{name:"null"}]},description:""},initialPredefinedOption:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},shouldLinkAutomaticly:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},selectedPredefinedOptionKey:{required:!1,tsType:{name:"string"},description:""},validationCallback:{required:!1,tsType:{name:"signature",type:"function",raw:"(name: string, error: string | null) => any",signature:{arguments:[{type:{name:"string"},name:"name"},{type:{name:"union",raw:"string | null",elements:[{name:"string"},{name:"null"}]},name:"error"}],return:{name:"any"}}},description:"",defaultValue:{value:"() => ({ name: '', error: null })",computed:!1}},disabledValidation:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},allowEmpty:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},autoValue:{required:!1,tsType:{name:"string"},description:""},onChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(event: TChangeEvent | ICustomChangeEvent) => void",signature:{arguments:[{type:{name:"union",raw:"TChangeEvent | ICustomChangeEvent",elements:[{name:"intersection",raw:`ChangeEvent<T> & {
-  target:
-    | T
-    | { name: string; value: any; label?: string; files?: FileList | null };
-}`,elements:[{name:"ChangeEvent",elements:[{name:"T"}],raw:"ChangeEvent<T>"},{name:"signature",type:"object",raw:`{
-  target:
-    | T
-    | { name: string; value: any; label?: string; files?: FileList | null };
-}`,signature:{properties:[{key:"target",value:{name:"union",raw:`| T
-| { name: string; value: any; label?: string; files?: FileList | null }`,elements:[{name:"T"},{name:"signature",type:"object",raw:"{ name: string; value: any; label?: string; files?: FileList | null }",signature:{properties:[{key:"name",value:{name:"string",required:!0}},{key:"value",value:{name:"any",required:!0}},{key:"label",value:{name:"string",required:!1}},{key:"files",value:{name:"union",raw:"FileList | null",elements:[{name:"FileList"},{name:"null"}],required:!1}}]}}],required:!0}}]}}]},{name:"ICustomChangeEvent"}]},name:"event"}],return:{name:"void"}}},description:"",defaultValue:{value:"noop",computed:!0}},onSwitchUnit:{required:!1,tsType:{name:"signature",type:"function",raw:"(unit: string) => void",signature:{arguments:[{type:{name:"string"},name:"unit"}],return:{name:"void"}}},description:"",defaultValue:{value:"noop",computed:!0}},onClick:{required:!1,tsType:{name:"MouseEventHandler",elements:[{name:"HTMLInputElement"}],raw:"MouseEventHandler<HTMLInputElement>"},description:"",defaultValue:{value:"noop",computed:!0}},onFocus:{required:!1,tsType:{name:"FocusEventHandler",elements:[{name:"HTMLInputElement"}],raw:"FocusEventHandler<HTMLInputElement>"},description:"",defaultValue:{value:"noop",computed:!0}},unitTemplate:{required:!1,tsType:{name:"Record",elements:[{name:"string"},{name:"any"}],raw:"Record<string, any>"},description:""},convertBackToStorageUnit:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},enableCosmeticRounding:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},enableDisplayRounding:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}}}};const{useArgs:ca}=__STORYBOOK_MODULE_PREVIEW_API__,ii={title:"Forms/UnitInput",component:c,args:{name:"example",unitkey:"length",value:"123|m"}},C=t=>{const[a,n]=ca(),s=i=>{n({value:i.target.value})};return e.jsx(c,{...t,onChange:s})},Ie=C.bind({}),Q=C.bind({});Q.args={initUnit:"ft",unitTemplate:{length:"ft"}};const X=C.bind({});X.args={value:'123|"',unitkey:'"'};const ee=C.bind({});ee.args={width:"180px"};const te=C.bind({});te.args={noConversion:!0};const ne=C.bind({});ne.args={small:!0};const H=()=>{const[t,a]=o.useState("123|m");return e.jsx(c,{name:"example",onChange:n=>a(n.target.value),placeholder:"Type a value...",value:t,initUnit:"m",unitkey:"depth",unitTemplate:{depth:"m"},testId:"testId"})};H.play=async({canvasElement:t,step:a})=>{const n=F(t),s=F(t.ownerDocument.body);await a("Shows validation error for non-numeric input",async()=>{const i=n.getByTestId("testId");await g.clear(i),await g.type(i,"123x45s6"),await h(n.getByDisplayValue("123x45s6")).toBeInTheDocument(),await fe.mouseOver(i),await ye(()=>{h(s.getByText("Must be a numerical value")).toBeInTheDocument()})})};const L=()=>{const[t,a]=o.useState("|m");return e.jsx(c,{name:"example-ft",onChange:n=>a(n.target.value),placeholder:"7|ft",value:t,initUnit:"m",unitkey:"depth",unitTemplate:{depth:"m"},testId:"testId-ft"})};L.play=async({canvasElement:t,step:a})=>{const n=F(t),s=F(t.ownerDocument.body);await a("Handle input with unit only",async()=>{const i=n.getByTestId("testId-ft");await h(n.getByDisplayValue("")).toBeInTheDocument(),await fe.mouseOver(i),await ye(()=>{h(s.queryByText("Must be a numerical value")).not.toBeInTheDocument()})}),await a("Clear input and check placeholder",async()=>{const i=n.getByTestId("testId-ft");await g.clear(i),await h(i).toHaveAttribute("placeholder","2.13")}),await a("Type a correct numeric value and ensure no error",async()=>{const i=n.getByTestId("testId-ft");await g.type(i,"123"),await h(n.getByDisplayValue("123")).toBeInTheDocument(),await fe.mouseOver(i),await ye(()=>{h(s.queryByText("Must be a numerical value")).not.toBeInTheDocument()})}),await a("Remove value, type incorrect value and check for error",async()=>{const i=n.getByTestId("testId-ft");await g.clear(i),await g.type(i,"123abc"),await h(n.getByDisplayValue("123abc")).toBeInTheDocument(),await fe.mouseOver(i),await ye(()=>{h(s.getByText("Must be a numerical value")).toBeInTheDocument()})})};const ae=C.bind({});ae.args={error:"Error message goes here"};const ie=C.bind({});ie.args={value:"asas123asd|%"};const G=C.bind({});G.args={disabled:!0,disabledUnit:!0};G.parameters={docs:{description:{story:"Each part of UnitInput can be disabled separately. `disabled` disables only the main text input, `disabledUnit` disables only the unit menu. **Needs review (comes from Reservoir input requirements)**"}}};const re=C.bind({});re.args={disabled:!0,disabledUnit:!0,noConversion:!0};const se=C.bind({});se.args={disabledUnit:!0,unitkey:void 0};const le=C.bind({});le.args={disabledUnit:!0,unitkey:"length"};const oe=C.bind({});oe.args={disabledUnit:!1,disabled:!0};const K=t=>{const[a,n]=o.useState("123|m"),[s,i]=o.useState("223|m"),[m,u]=o.useState("ft");return e.jsxs(e.Fragment,{children:[e.jsx(p,{label:"Change initUnit",onClick:()=>u(m==="m"?"ft":"m")}),e.jsx(b,{}),e.jsx(p,{label:"Change value",onClick:()=>n(a==="123|m"?"456|m":"123|m")}),e.jsx(b,{}),e.jsx(c,{name:"example",onChange:f=>{n(f.target.value)},unitkey:"length",value:a,initUnit:m,onSwitchUnit:u}),e.jsx(b,{}),e.jsx(c,{name:"example2",onChange:f=>{i(f.target.value)},unitkey:"length",value:s,initUnit:m,onSwitchUnit:u}),e.jsx(ta,{}),e.jsx("h4",{children:"Without initUnit property (taken from the redux store)"}),e.jsx(c,{name:"example",onChange:f=>{n(f.target.value)},unitkey:"length",value:a,onSwitchUnit:u}),e.jsx(c,{name:"example2",onChange:f=>{i(f.target.value)},unitkey:"length",value:s,onSwitchUnit:u})]})};K.parameters={docs:{description:{story:"[OW-4380](https://oliasoft.atlassian.net/browse/OW-4380?atlOrigin=eyJpIjoiMmM1N2RkNWU3Mjk5NDYxY2E0YzhkMzk5ZTVmZTJhMjciLCJwIjoiaiJ9)"}}};const ue=C.bind({});ue.args={predefinedOptions:[{label:"bottom of casing",value:"12|km"},{label:"mud weight at shoe depth",value:"8|mm"}]};const $=()=>{const t="500px",[a,n]=o.useState(void 0);return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Different edge cases such as +/- infinity, undefined, NaN, null:"}),e.jsxs(wn,{children:[e.jsxs(Ae,{width:"25%",children:[e.jsx(p,{label:"Change value infinity",onClick:()=>n(1/0)}),e.jsx("br",{}),e.jsx(p,{label:"Change value -infinity",onClick:()=>n(-1/0)}),e.jsx("br",{}),e.jsx(p,{label:"Change value null",onClick:()=>n(null)}),e.jsx("br",{}),e.jsx(p,{label:"Change value - undefined",onClick:()=>n(void 0)}),e.jsx("br",{}),e.jsx(p,{label:"Change value - NaN",onClick:()=>n(NaN)}),e.jsx("br",{}),e.jsx(p,{label:"Change value - nothing (empty)",onClick:()=>n(void 0)}),e.jsx("br",{}),e.jsx(p,{label:"Change value - empty string",onClick:()=>n("")})]}),e.jsxs(Ae,{width:"25%",children:[e.jsx(p,{label:"Change value infinity|m",onClick:()=>n("Infinity|m")}),e.jsx("br",{}),e.jsx(p,{label:"Change value -infinity|m",onClick:()=>n("-Infinity|m")}),e.jsx("br",{}),e.jsx(p,{label:"Change value null|m",onClick:()=>n("null|m")}),e.jsx("br",{}),e.jsx(p,{label:"Change value - undefined|m",onClick:()=>n("undefined|m")}),e.jsx("br",{}),e.jsx(p,{label:"Change value - NaN|m",onClick:()=>n("NaN|m")}),e.jsx("br",{}),e.jsx(p,{label:"Change value - nothing (empty)|m",onClick:()=>n("|m")})]})]}),e.jsx("br",{}),e.jsx(I,{label:"Normal PUI",children:e.jsx(c,{name:"example1",onChange:s=>n(s.target.value),value:a,unitkey:"length",width:t,placeholder:"value|unit"})}),e.jsx(I,{label:"Disabled validation",children:e.jsx(c,{name:"example2",onChange:s=>n(s.target.value),value:a,unitkey:"length",disabledValidation:!0,width:t})}),e.jsx(I,{label:"Disabled validation and manual error",children:e.jsx(c,{name:"example3",onChange:s=>n(s.target.value),value:a,unitkey:"length",error:"test",disabledValidation:!0,width:t})}),e.jsx(Te,{message:{heading:"Current value inside PUI: "+a,visible:!0}})]})},de=()=>{const t="500px",[a,n]=o.useState("1|m"),[s,i]=o.useState("|m"),m="123|km";return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Different cases for automatic (placeholder) values:"}),e.jsx(wn,{children:e.jsxs(Ae,{width:"25%",children:[e.jsx(p,{label:"Change value to ''",onClick:()=>n("")}),e.jsx("br",{}),e.jsx(p,{label:"Change value to 1",onClick:()=>n("1")}),e.jsx("br",{}),e.jsx(p,{label:"Change value to 1|m",onClick:()=>n("1|m")}),e.jsx("br",{}),e.jsx(p,{label:"Change value to |m - empty value",onClick:()=>n("|m")})]})}),e.jsx("br",{}),e.jsx(I,{label:"Normal PUI (placeholder + auto)",children:e.jsx(c,{name:"example1",onChange:u=>n(u.target.value),value:a,unitkey:"length",width:t,placeholder:"value|unit",autoValue:m})}),e.jsx(I,{label:"Normal PUI (only auto)",children:e.jsx(c,{name:"example1",onChange:u=>n(u.target.value),value:a,unitkey:"length",width:t,autoValue:m})}),e.jsx(I,{label:"Empty PUI with autoValue",children:e.jsx(c,{name:"example1",onChange:u=>i(u.target.value),value:s,unitkey:"length",width:t,autoValue:m})}),e.jsx(I,{label:"Normal PUI (only placeholder)",children:e.jsx(c,{name:"example1",onChange:u=>n(u.target.value),value:a,unitkey:"length",width:t,placeholder:"Placeholder test"})}),e.jsx(I,{label:"Normal PUI (placeholder + allowEmpty)",children:e.jsx(c,{name:"example1",onChange:u=>n(u.target.value),value:a,unitkey:"length",width:t,placeholder:"Placeholder test",allowEmpty:!0})}),e.jsx(Te,{message:{heading:"Current value inside PUI: "+a,visible:!0}})]})};$.parameters={docs:{description:{story:"[OW-8884](https://oliasoft.atlassian.net/browse/OW-8884)"}}};const ce=()=>{const[t,a]=o.useState("123|%"),[n,s]=o.useState(null),i="This should be visible when an error appears",m=(u,f)=>(s(f),{name:u,error:f});return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"3rd party validation message when inputting invalid value:"}),e.jsx(c,{name:"example",onChange:u=>a(u.target.value),error:!n||i,validationCallback:m,value:t}),e.jsx("br",{}),e.jsx(b,{}),e.jsx("h4",{children:"Original validation message: "}),e.jsx(Te,{message:{heading:n,visible:!0}})]})},me=()=>{const[t,a]=o.useState("123|m"),[n,s]=o.useState(""),[i,m]=o.useState("km"),u=()=>{m("ft"),s("placeholder"),a("|m")};return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Empty value case:"}),e.jsx(c,{name:"example",onChange:f=>a(f.target.value),value:t,allowEmpty:!0,placeholder:n,initUnit:i,unitkey:"length"}),e.jsx("br",{}),e.jsx(b,{}),e.jsx(p,{label:"Change value |m and unit ft",onClick:()=>u()})]})},pe=()=>{const[t,a]=o.useState("123|m"),[n,s]=o.useState("m");return e.jsxs(e.Fragment,{children:[e.jsx(c,{name:"example",onChange:i=>a(i.target.value),value:t,initUnit:n,unitkey:"length",onSwitchUnit:s}),e.jsx(b,{}),e.jsx(c,{name:"example",onChange:i=>a(i.target.value),value:t,initUnit:n,unitkey:"length",onSwitchUnit:s})]})},ge=()=>{const[t,a]=o.useState(!0),n=()=>{a(!1),setTimeout(()=>a(!0),0)},[s,i]=o.useState("123|ft");return e.jsxs(Tn,{columns:"1fr 1fr",gap:!0,children:[e.jsxs(q,{heading:e.jsx(A,{children:"Storage State (Redux)"}),children:[s,e.jsx(b,{}),e.jsx(p,{label:"Change value",onClick:()=>i(l.withUnit(String(Math.floor(Math.random()*100)),"ft"))})]}),e.jsx(q,{heading:e.jsx(A,{icon:e.jsx(kn,{icon:"refresh",testId:"triggerRerenderTestId"}),onIconClick:n,children:"UnitInput"}),children:t&&e.jsx(c,{name:"example",onChange:m=>i(m.target.value),value:s,initUnit:"m",unitkey:"depth",unitTemplate:{depth:"m"}})})]})},he=()=>e.jsxs(e.Fragment,{children:[e.jsx(we,{faint:!0,children:"Reproduce OW-10614 rounding noise bug when storing values in a different unit to the display unit"}),e.jsx(b,{}),e.jsx(c,{name:"example",onChange:()=>{},value:l.withUnit(l.convertAndGetValue("9750|psi","bar"),"bar"),initUnit:"psi",unitkey:"pressure",unitTemplate:{pressure:"psi"}}),e.jsx(b,{}),e.jsx(c,{name:"example2",onChange:()=>{},value:l.withUnit(l.convertAndGetValue("8642|lbf","tonneForce"),"tonneForce"),initUnit:"lbf",unitkey:"force",unitTemplate:{force:"tonneForce"}})]}),z=()=>e.jsxs(e.Fragment,{children:[e.jsx(c,{name:"example",unitkey:"moleWeight",initUnit:"g/mol",doNotConvertValue:!0,value:"170|g/mol",unitTemplate:{moleWeight:"g/mol"},testId:"case1"}),e.jsx(b,{}),e.jsx(c,{name:"gor",unitkey:"moleWeight",initUnit:"gor",value:"Infinity|SCF/STB",testId:"case2"})]});z.play=async({canvasElement:t,step:a})=>{const n=F(t);await a("Can enter decimal values",async()=>{await h(n.getByDisplayValue("170")).toBeInTheDocument(),await h(n.getByDisplayValue("")).toBeInTheDocument()})};const ve=()=>{const[t,a]=o.useState(!0),n=()=>{a(!1),setTimeout(()=>a(!0),0)},[s,i]=o.useState("psi"),[m,u]=o.useState(!1),[f,y]=o.useState(!0),[S,ke]=o.useState(!0),[Y,P]=o.useState("672.2388357750001|bar"),[Ve,Se]=o.useState("");return e.jsxs(Tn,{columns:"1fr 1fr",gap:!0,children:[e.jsxs(q,{heading:e.jsx(A,{children:"Settings"}),children:[e.jsx(I,{label:"Enable display rounding:",labelLeft:!0,labelWidth:200,children:e.jsx(qe,{checked:m,onChange:U=>u(U.target.checked)})}),e.jsx(I,{label:"Enable cosmetic rounding:",labelLeft:!0,labelWidth:200,children:e.jsx(qe,{checked:f,onChange:U=>y(U.target.checked)})}),e.jsx(I,{label:"Convert back to storage unit (onChange):",labelLeft:!0,labelWidth:200,children:e.jsx(qe,{checked:S,onChange:U=>ke(U.target.checked)})})]}),e.jsxs(q,{heading:e.jsx(A,{icon:e.jsx(kn,{icon:"refresh",testId:"triggerRerenderTestId"}),onIconClick:n,children:"UnitInput"}),children:[e.jsx(we,{faint:!0,children:"Cosmetic Rounding Test Case: type 9750 then return (compare with enableCosmeticRounding on and off)"}),e.jsx(b,{}),e.jsx(we,{warning:!0,children:"Note: UnitInput uses convertSamePrecision internally (decision prior to cosmetic value implementation). This means not all rounding noise occurrences seen in NumberInput will be reproducible in UnitInput, because they get rounded off by other logic."}),e.jsx(b,{}),t&&e.jsx(c,{name:"Example",unitkey:"pressure",initUnit:s,unitTemplate:{pressure:"psi"},value:Y,onChange:U=>{const{value:j}=U.target;j&&P(j)},enableDisplayRounding:m,enableCosmeticRounding:f,error:l.convertAndGetValue(Y,"bar")>=0?"":"Value must be positive",validationCallback:(U,j)=>{Se(j??"")},convertBackToStorageUnit:S})]}),e.jsx(q,{heading:e.jsx(A,{children:"Unit Template"}),children:e.jsx(na,{options:[{label:"Bar",value:"bar"},{label:"psi",value:"psi"}],value:s,width:70,onChange:U=>i(U.target.value)})}),e.jsx(q,{heading:e.jsx(A,{children:"Test Validation Callback"}),children:Ve&&e.jsx(Te,{message:{content:Ve,icon:!0,type:"Error",visible:!0}})}),e.jsxs(q,{heading:e.jsx(A,{children:"Storage State / Redux"}),children:[Y,e.jsx(b,{}),e.jsx(p,{label:"Change value",onClick:()=>P(l.withUnit(String(Math.floor(Math.random()*100)),"bar"))})]})]})},J=()=>{const[t,a]=o.useState("123|m");return e.jsx(c,{name:"example",onChange:n=>a(n.target.value),value:t,initUnit:"m",unitkey:"depth",unitTemplate:{depth:"m"},testId:"testId"})};J.play=async({canvasElement:t,step:a})=>{const n=F(t),s=F(t.ownerDocument.body);await a("Can enter decimal values",async()=>{const i=n.getByTestId("testId");await g.clear(i),await g.type(i,"123.123456789"),await h(n.getByDisplayValue("123.123456789")).toBeInTheDocument()}),await a("Can enter scientific notation",async()=>{const i=n.getByTestId("testId");await g.clear(i),await g.type(i,"-1.12e3"),await h(n.getByDisplayValue("-1.12e3")).toBeInTheDocument()}),await a("Can enter comma decimals (converts to dot)",async()=>{const i=n.getByTestId("testId");await g.clear(i),await g.type(i,"123,456"),await h(n.getByDisplayValue("123.456")).toBeInTheDocument()}),await a("Can enter small numbers",async()=>{const i=n.getByTestId("testId");await g.clear(i),await g.type(i,"0.0000000023"),await h(n.getByDisplayValue("0.0000000023")).toBeInTheDocument()}),await a("Can enter large numbers",async()=>{const i=n.getByTestId("testId");await g.clear(i),await g.type(i,"999999999999"),await h(n.getByDisplayValue("999999999999")).toBeInTheDocument()}),await a("Can convert units",async()=>{const i=n.getByTestId("testId"),m=n.getByTestId("testId-menu");await g.clear(i),await g.type(i,"456.1"),await g.click(m),await g.click(s.getByTestId("testId-unit-ft")),await h(n.getByDisplayValue("1496")).toBeInTheDocument()}),await a("Shows validation error for non-numeric input",async()=>{const i=n.getByTestId("testId");await g.clear(i),await g.type(i,"123x45s6"),await h(n.getByDisplayValue("123x45s6")).toBeInTheDocument(),await fe.mouseOver(i),await ye(()=>{h(s.getByText("Must be a numerical value")).toBeInTheDocument()})})};H.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"Placeholder"};L.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"PlaceholderWithUnit"};K.__docgenInfo={description:"",methods:[],displayName:"TestExternalStateChangeWithSynchronizedUnits",props:{name:{required:!0,tsType:{name:"union",raw:"string | { fieldName?: string }",elements:[{name:"string"},{name:"signature",type:"object",raw:"{ fieldName?: string }",signature:{properties:[{key:"fieldName",value:{name:"string",required:!1}}]}}]},description:""},placeholder:{required:!1,tsType:{name:"string"},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:""},disabledUnit:{required:!1,tsType:{name:"boolean"},description:""},error:{required:!1,tsType:{name:"union",raw:"string | null | boolean",elements:[{name:"string"},{name:"null"},{name:"boolean"}]},description:""},left:{required:!1,tsType:{name:"boolean"},description:""},small:{required:!1,tsType:{name:"boolean"},description:""},width:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:""},value:{required:!1,tsType:{name:"string"},description:""},unitkey:{required:!1,tsType:{name:"string"},description:""},initUnit:{required:!1,tsType:{name:"string"},description:""},noConversion:{required:!1,tsType:{name:"boolean"},description:""},doNotConvertValue:{required:!1,tsType:{name:"boolean"},description:""},testId:{required:!1,tsType:{name:"string"},description:""},warning:{required:!1,tsType:{name:"union",raw:"string | boolean | null",elements:[{name:"string"},{name:"boolean"},{name:"null"}]},description:""},predefinedOptions:{required:!1,tsType:{name:"union",raw:"IPredefinedOption[] | null",elements:[{name:"Array",elements:[{name:"IPredefinedOption"}],raw:"IPredefinedOption[]"},{name:"null"}]},description:""},initialPredefinedOption:{required:!1,tsType:{name:"boolean"},description:""},shouldLinkAutomaticly:{required:!1,tsType:{name:"boolean"},description:""},selectedPredefinedOptionKey:{required:!1,tsType:{name:"string"},description:""},validationCallback:{required:!1,tsType:{name:"signature",type:"function",raw:"(name: string, error: string | null) => any",signature:{arguments:[{type:{name:"string"},name:"name"},{type:{name:"union",raw:"string | null",elements:[{name:"string"},{name:"null"}]},name:"error"}],return:{name:"any"}}},description:""},disabledValidation:{required:!1,tsType:{name:"boolean"},description:""},allowEmpty:{required:!1,tsType:{name:"boolean"},description:""},autoValue:{required:!1,tsType:{name:"string"},description:""},onChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(event: TChangeEvent | ICustomChangeEvent) => void",signature:{arguments:[{type:{name:"union",raw:"TChangeEvent | ICustomChangeEvent",elements:[{name:"intersection",raw:`ChangeEvent<T> & {
-  target:
-    | T
-    | { name: string; value: any; label?: string; files?: FileList | null };
-}`,elements:[{name:"ChangeEvent",elements:[{name:"T"}],raw:"ChangeEvent<T>"},{name:"signature",type:"object",raw:`{
-  target:
-    | T
-    | { name: string; value: any; label?: string; files?: FileList | null };
-}`,signature:{properties:[{key:"target",value:{name:"union",raw:`| T
-| { name: string; value: any; label?: string; files?: FileList | null }`,elements:[{name:"T"},{name:"signature",type:"object",raw:"{ name: string; value: any; label?: string; files?: FileList | null }",signature:{properties:[{key:"name",value:{name:"string",required:!0}},{key:"value",value:{name:"any",required:!0}},{key:"label",value:{name:"string",required:!1}},{key:"files",value:{name:"union",raw:"FileList | null",elements:[{name:"FileList"},{name:"null"}],required:!1}}]}}],required:!0}}]}}]},{name:"ICustomChangeEvent"}]},name:"event"}],return:{name:"void"}}},description:""},onSwitchUnit:{required:!1,tsType:{name:"signature",type:"function",raw:"(unit: string) => void",signature:{arguments:[{type:{name:"string"},name:"unit"}],return:{name:"void"}}},description:""},onClick:{required:!1,tsType:{name:"MouseEventHandler",elements:[{name:"HTMLInputElement"}],raw:"MouseEventHandler<HTMLInputElement>"},description:""},onFocus:{required:!1,tsType:{name:"FocusEventHandler",elements:[{name:"HTMLInputElement"}],raw:"FocusEventHandler<HTMLInputElement>"},description:""},unitTemplate:{required:!1,tsType:{name:"Record",elements:[{name:"string"},{name:"any"}],raw:"Record<string, any>"},description:""},convertBackToStorageUnit:{required:!1,tsType:{name:"boolean"},description:""},enableCosmeticRounding:{required:!1,tsType:{name:"boolean"},description:""},enableDisplayRounding:{required:!1,tsType:{name:"boolean"},description:""}}};$.__docgenInfo={description:"",methods:[],displayName:"TestEdgeCases"};de.__docgenInfo={description:"",methods:[],displayName:"AutomaticValues"};ce.__docgenInfo={description:"",methods:[],displayName:"ValidationCallback"};me.__docgenInfo={description:"",methods:[],displayName:"AllowEmptyPUI"};pe.__docgenInfo={description:"",methods:[],displayName:"onSwitchUnit"};ge.__docgenInfo={description:"",methods:[],displayName:"ManagedTestCase"};he.__docgenInfo={description:"",methods:[],displayName:"OW_10614TestCase"};z.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"OW_17784TestCase"};ve.__docgenInfo={description:"",methods:[],displayName:"DemoCosmeticRounding"};J.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"TestUserInput"};var Ye,Ze,Qe;Ie.parameters={...Ie.parameters,docs:{...(Ye=Ie.parameters)==null?void 0:Ye.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(Qe=(Ze=Ie.parameters)==null?void 0:Ze.docs)==null?void 0:Qe.source}}};var Xe,et,tt;Q.parameters={...Q.parameters,docs:{...(Xe=Q.parameters)==null?void 0:Xe.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(tt=(et=Q.parameters)==null?void 0:et.docs)==null?void 0:tt.source}}};var nt,at,it;X.parameters={...X.parameters,docs:{...(nt=X.parameters)==null?void 0:nt.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(it=(at=X.parameters)==null?void 0:at.docs)==null?void 0:it.source}}};var rt,st,lt;ee.parameters={...ee.parameters,docs:{...(rt=ee.parameters)==null?void 0:rt.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(lt=(st=ee.parameters)==null?void 0:st.docs)==null?void 0:lt.source}}};var ot,ut,dt;te.parameters={...te.parameters,docs:{...(ot=te.parameters)==null?void 0:ot.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(dt=(ut=te.parameters)==null?void 0:ut.docs)==null?void 0:dt.source}}};var ct,mt,pt;ne.parameters={...ne.parameters,docs:{...(ct=ne.parameters)==null?void 0:ct.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(pt=(mt=ne.parameters)==null?void 0:mt.docs)==null?void 0:pt.source}}};var gt,ht,vt;H.parameters={...H.parameters,docs:{...(gt=H.parameters)==null?void 0:gt.docs,source:{originalSource:`() => {
-  const [value, setValue] = useState('123|m');
-  return <UnitInput name="example" onChange={evt => setValue(evt.target.value)} placeholder="Type a value..." value={value} initUnit="m" unitkey="depth" unitTemplate={{
-    depth: 'm'
-  }} testId="testId" />;
-}`,...(vt=(ht=H.parameters)==null?void 0:ht.docs)==null?void 0:vt.source}}};var ft,yt,bt;L.parameters={...L.parameters,docs:{...(ft=L.parameters)==null?void 0:ft.docs,source:{originalSource:`() => {
-  const [value, setValue] = useState('|m');
-  return <UnitInput name="example-ft" onChange={evt => setValue(evt.target.value)} placeholder="7|ft" value={value} initUnit="m" unitkey="depth" unitTemplate={{
-    depth: 'm'
-  }} testId="testId-ft" />;
-}`,...(bt=(yt=L.parameters)==null?void 0:yt.docs)==null?void 0:bt.source}}};var Ct,Ut,xt;ae.parameters={...ae.parameters,docs:{...(Ct=ae.parameters)==null?void 0:Ct.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(xt=(Ut=ae.parameters)==null?void 0:Ut.docs)==null?void 0:xt.source}}};var It,wt,Tt;ie.parameters={...ie.parameters,docs:{...(It=ie.parameters)==null?void 0:It.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(Tt=(wt=ie.parameters)==null?void 0:wt.docs)==null?void 0:Tt.source}}};var kt,Vt,St;G.parameters={...G.parameters,docs:{...(kt=G.parameters)==null?void 0:kt.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(St=(Vt=G.parameters)==null?void 0:Vt.docs)==null?void 0:St.source}}};var jt,Et,Bt;re.parameters={...re.parameters,docs:{...(jt=re.parameters)==null?void 0:jt.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(Bt=(Et=re.parameters)==null?void 0:Et.docs)==null?void 0:Bt.source}}};var Dt,Nt,qt;se.parameters={...se.parameters,docs:{...(Dt=se.parameters)==null?void 0:Dt.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(qt=(Nt=se.parameters)==null?void 0:Nt.docs)==null?void 0:qt.source}}};var At,Ft,Pt;le.parameters={...le.parameters,docs:{...(At=le.parameters)==null?void 0:At.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(Pt=(Ft=le.parameters)==null?void 0:Ft.docs)==null?void 0:Pt.source}}};var Rt,_t,Mt;oe.parameters={...oe.parameters,docs:{...(Rt=oe.parameters)==null?void 0:Rt.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(Mt=(_t=oe.parameters)==null?void 0:_t.docs)==null?void 0:Mt.source}}};var Wt,Ot,Ht;K.parameters={...K.parameters,docs:{...(Wt=K.parameters)==null?void 0:Wt.docs,source:{originalSource:`(args: IUnitInputProps) => {
-  const [value, setValue] = useState('123|m');
-  const [value2, setValue2] = useState('223|m');
-  const [initUnit, setInitUnit] = useState('ft');
-  return <>
-      <Button label="Change initUnit" onClick={() => setInitUnit(initUnit === 'm' ? 'ft' : 'm')} />
-      <Spacer />
-      <Button label="Change value" onClick={() => setValue(value === '123|m' ? '456|m' : '123|m')} />
-      <Spacer />
-      <UnitInput name="example" onChange={evt => {
-      setValue(evt.target.value);
-    }} unitkey="length" value={value} initUnit={initUnit} onSwitchUnit={setInitUnit} />
-      <Spacer />
-      <UnitInput name="example2" onChange={evt => {
-      setValue2(evt.target.value);
-    }} unitkey="length" value={value2} initUnit={initUnit} onSwitchUnit={setInitUnit} />
-      <Divider />
-      <h4>Without initUnit property (taken from the redux store)</h4>
-      <UnitInput name="example" onChange={evt => {
-      setValue(evt.target.value);
-    }} unitkey="length" value={value} onSwitchUnit={setInitUnit} />
-      <UnitInput name="example2" onChange={evt => {
-      setValue2(evt.target.value);
-    }} unitkey="length" value={value2} onSwitchUnit={setInitUnit} />
-    </>;
-}`,...(Ht=(Ot=K.parameters)==null?void 0:Ot.docs)==null?void 0:Ht.source}}};var Lt,Gt,Kt;ue.parameters={...ue.parameters,docs:{...(Lt=ue.parameters)==null?void 0:Lt.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(Kt=(Gt=ue.parameters)==null?void 0:Gt.docs)==null?void 0:Kt.source}}};var $t,zt,Jt;$.parameters={...$.parameters,docs:{...($t=$.parameters)==null?void 0:$t.docs,source:{originalSource:`() => {
-  const width = '500px';
-  const [value, setValue] = useState<any>(undefined);
-  return <>
-      <h4>Different edge cases such as +/- infinity, undefined, NaN, null:</h4>
-      <Row>
-        <Column width="25%">
-          <Button label="Change value infinity" onClick={() => setValue(Infinity)} />
-          <br />
-          <Button label="Change value -infinity" onClick={() => setValue(-Infinity)} />
-          <br />
-          <Button label="Change value null" onClick={() => setValue(null)} />
-          <br />
-          <Button label="Change value - undefined" onClick={() => setValue(undefined)} />
-          <br />
-          <Button label="Change value - NaN" onClick={() => setValue(NaN)} />
-          <br />
-          <Button label="Change value - nothing (empty)" onClick={() => setValue(undefined)} />
-          <br />
-          <Button label="Change value - empty string" onClick={() => setValue('')} />
-        </Column>
-        <Column width="25%">
-          <Button label="Change value infinity|m" onClick={() => setValue(Infinity + '|m')} />
-          <br />
-          <Button label="Change value -infinity|m" onClick={() => setValue(-Infinity + '|m')} />
-          <br />
-          <Button label="Change value null|m" onClick={() => setValue(null + '|m')} />
-          <br />
-          <Button label="Change value - undefined|m" onClick={() => setValue(undefined + '|m')} />
-          <br />
-          <Button label="Change value - NaN|m" onClick={() => setValue(NaN + '|m')} />
-          <br />
-          <Button label="Change value - nothing (empty)|m" onClick={() => setValue('|m')} />
-        </Column>
-      </Row>
-      <br />
-      <Field label="Normal PUI">
-        <UnitInput name="example1" onChange={evt => setValue(evt.target.value)} value={value} unitkey="length" width={width} placeholder="value|unit" />
-      </Field>
-      <Field label="Disabled validation">
-        <UnitInput name="example2" onChange={evt => setValue(evt.target.value)} value={value} unitkey="length" disabledValidation width={width} />
-      </Field>
-      <Field label="Disabled validation and manual error">
-        <UnitInput name="example3" onChange={evt => setValue(evt.target.value)} value={value} unitkey="length" error="test" disabledValidation width={width} />
-      </Field>
-      <Message message={{
-      heading: 'Current value inside PUI: ' + value,
-      visible: true
-    }} />
-    </>;
-}`,...(Jt=(zt=$.parameters)==null?void 0:zt.docs)==null?void 0:Jt.source}}};var Yt,Zt,Qt;de.parameters={...de.parameters,docs:{...(Yt=de.parameters)==null?void 0:Yt.docs,source:{originalSource:`() => {
-  const width = '500px';
-  const [value, setValue] = useState<string>('1|m');
-  const [valueB, setValueB] = useState('|m');
-  const automaticValue = '123|km';
-  return <>
-      <h4>Different cases for automatic (placeholder) values:</h4>
-      <Row>
-        <Column width="25%">
-          <Button label="Change value to ''" onClick={() => setValue('')} />
-          <br />
-          <Button label="Change value to 1" onClick={() => setValue('1')} />
-          <br />
-          <Button label="Change value to 1|m" onClick={() => setValue('1|m')} />
-          <br />
-          <Button label="Change value to |m - empty value" onClick={() => setValue('|m')} />
-        </Column>
-      </Row>
-      <br />
-      <Field label="Normal PUI (placeholder + auto)">
-        <UnitInput name="example1" onChange={evt => setValue(evt.target.value)} value={value} unitkey="length" width={width} placeholder="value|unit" autoValue={automaticValue} />
-      </Field>
-      <Field label="Normal PUI (only auto)">
-        <UnitInput name="example1" onChange={evt => setValue(evt.target.value)} value={value} unitkey="length" width={width} autoValue={automaticValue} />
-      </Field>
-      <Field label="Empty PUI with autoValue">
-        <UnitInput name="example1" onChange={evt => setValueB(evt.target.value)} value={valueB} unitkey="length" width={width} autoValue={automaticValue} />
-      </Field>
-      <Field label="Normal PUI (only placeholder)">
-        <UnitInput name="example1" onChange={evt => setValue(evt.target.value)} value={value} unitkey="length" width={width} placeholder="Placeholder test" />
-      </Field>
-      <Field label="Normal PUI (placeholder + allowEmpty)">
-        <UnitInput name="example1" onChange={evt => setValue(evt.target.value)} value={value} unitkey="length" width={width} placeholder="Placeholder test" allowEmpty />
-      </Field>
-      <Message message={{
-      heading: 'Current value inside PUI: ' + value,
-      visible: true
-    }} />
-    </>;
-}`,...(Qt=(Zt=de.parameters)==null?void 0:Zt.docs)==null?void 0:Qt.source}}};var Xt,en,tn;ce.parameters={...ce.parameters,docs:{...(Xt=ce.parameters)==null?void 0:Xt.docs,source:{originalSource:`() => {
-  const [value, setValue] = useState('123|%');
-  const [validation, setValidation] = useState<string | null>(null);
-  const predictedMessage = 'This should be visible when an error appears';
-  const handleValidation = (name: string, error: string | null) => {
-    setValidation(error);
-    return {
-      name,
-      error
-    };
-  };
-  return <>
-      <h4>3rd party validation message when inputting invalid value:</h4>
-      <UnitInput name="example" onChange={evt => setValue(evt.target.value)} error={!validation || predictedMessage} validationCallback={handleValidation} value={value} />
-      <br />
-      <Spacer />
-      <h4>Original validation message: </h4>
-      <Message message={{
-      heading: validation,
-      visible: true
-    }} />
-    </>;
-}`,...(tn=(en=ce.parameters)==null?void 0:en.docs)==null?void 0:tn.source}}};var nn,an,rn;me.parameters={...me.parameters,docs:{...(nn=me.parameters)==null?void 0:nn.docs,source:{originalSource:`() => {
-  const [value, setValue] = useState('123|m');
-  const [placeholder, setPlaceholder] = useState('');
-  const [initUnit, setInitUnit] = useState('km');
-  const setPlaceholderValue = () => {
-    setInitUnit('ft');
-    setPlaceholder('placeholder');
-    setValue('|m');
-  };
-  return <>
-      <h4>Empty value case:</h4>
-      <UnitInput name="example" onChange={evt => setValue(evt.target.value)} value={value} allowEmpty placeholder={placeholder} initUnit={initUnit} unitkey="length" />
-      <br />
-      <Spacer />
-      <Button label="Change value |m and unit ft" onClick={() => setPlaceholderValue()} />
-    </>;
-}`,...(rn=(an=me.parameters)==null?void 0:an.docs)==null?void 0:rn.source}}};var sn,ln,on;pe.parameters={...pe.parameters,docs:{...(sn=pe.parameters)==null?void 0:sn.docs,source:{originalSource:`() => {
-  const [value, setValue] = useState('123|m');
-  const [unit, setUnit] = useState('m');
-  return <>
-      <UnitInput name="example" onChange={evt => setValue(evt.target.value)} value={value} initUnit={unit} unitkey="length" onSwitchUnit={setUnit} />
-      <Spacer />
-      <UnitInput name="example" onChange={evt => setValue(evt.target.value)} value={value} initUnit={unit} unitkey="length" onSwitchUnit={setUnit} />
-    </>;
-}`,...(on=(ln=pe.parameters)==null?void 0:ln.docs)==null?void 0:on.source}}};var un,dn,cn;ge.parameters={...ge.parameters,docs:{...(un=ge.parameters)==null?void 0:un.docs,source:{originalSource:`() => {
-  const [visible, setVisible] = useState(true);
-  const triggerRerender = () => {
-    setVisible(false);
-    setTimeout(() => setVisible(true), 0);
-  };
-  const [value, setValue] = useState('123|ft');
-  return <Grid columns="1fr 1fr" gap>
-      <Card heading={<Heading>Storage State (Redux)</Heading>}>
-        {value}
-        <Spacer />
-        <Button label="Change value" onClick={() => setValue(withUnit(String(Math.floor(Math.random() * 100)), 'ft'))} />
-      </Card>
-      <Card heading={<Heading icon={<Icon icon="refresh" testId="triggerRerenderTestId" />} onIconClick={triggerRerender}>
-            UnitInput
-          </Heading>}>
-        {visible && <UnitInput name="example" onChange={evt => setValue(evt.target.value)} value={value} initUnit="m" unitkey="depth" unitTemplate={{
-        depth: 'm'
-      }} />}
-      </Card>
-    </Grid>;
-}`,...(cn=(dn=ge.parameters)==null?void 0:dn.docs)==null?void 0:cn.source}}};var mn,pn,gn;he.parameters={...he.parameters,docs:{...(mn=he.parameters)==null?void 0:mn.docs,source:{originalSource:`() => {
-  return <>
-      <Text faint>
-        Reproduce OW-10614 rounding noise bug when storing values in a different
-        unit to the display unit
-      </Text>
-      <Spacer />
-      <UnitInput name="example" onChange={() => {}} value={withUnit(convertAndGetValue('9750|psi', 'bar'), 'bar')} initUnit="psi" unitkey="pressure" unitTemplate={{
-      pressure: 'psi'
-    }} />
-      <Spacer />
-      <UnitInput name="example2" onChange={() => {}} value={withUnit(convertAndGetValue('8642|lbf', 'tonneForce'), 'tonneForce')} initUnit="lbf" unitkey="force" unitTemplate={{
-      force: 'tonneForce'
-    }} />
-    </>;
-}`,...(gn=(pn=he.parameters)==null?void 0:pn.docs)==null?void 0:gn.source}}};var hn,vn,fn;z.parameters={...z.parameters,docs:{...(hn=z.parameters)==null?void 0:hn.docs,source:{originalSource:`() => {
-  return <>
-      <UnitInput name="example" unitkey="moleWeight" initUnit="g/mol" doNotConvertValue //reproduces OW_17784
-    value="170|g/mol" unitTemplate={{
-      moleWeight: 'g/mol'
-    }} testId="case1" />
-      <Spacer />
-      <UnitInput name="gor" unitkey="moleWeight" initUnit="gor" value="Infinity|SCF/STB" testId="case2" />
-    </>;
-}`,...(fn=(vn=z.parameters)==null?void 0:vn.docs)==null?void 0:fn.source}}};var yn,bn,Cn;ve.parameters={...ve.parameters,docs:{...(yn=ve.parameters)==null?void 0:yn.docs,source:{originalSource:`() => {
-  const [visible, setVisible] = useState(true);
-  const triggerRerender = () => {
-    setVisible(false);
-    setTimeout(() => setVisible(true), 0);
-  };
-  const [preferredUnit, setPreferredUnit] = useState('psi');
-  const [enableDisplayRounding, setEnableDisplayRounding] = useState(false);
-  const [enableCosmeticRounding, setEnableCosmeticRounding] = useState(true);
-  const [convertBackToStorageUnit, setConvertBackToStorageUnit] = useState(true);
-  const [value, setValue] = useState('672.2388357750001|bar');
-  const [callBackError, setCallBackError] = useState('');
-  return <Grid columns="1fr 1fr" gap>
-      <Card heading={<Heading>Settings</Heading>}>
-        <Field label="Enable display rounding:" labelLeft labelWidth={200}>
-          <Toggle checked={enableDisplayRounding} onChange={evt => setEnableDisplayRounding(evt.target.checked)} />
-        </Field>
-        <Field label="Enable cosmetic rounding:" labelLeft labelWidth={200}>
-          <Toggle checked={enableCosmeticRounding} onChange={evt => setEnableCosmeticRounding(evt.target.checked)} />
-        </Field>
-        <Field label="Convert back to storage unit (onChange):" labelLeft labelWidth={200}>
-          <Toggle checked={convertBackToStorageUnit} onChange={evt => setConvertBackToStorageUnit(evt.target.checked)} />
-        </Field>
-      </Card>
-      <Card heading={<Heading icon={<Icon icon="refresh" testId="triggerRerenderTestId" />} onIconClick={triggerRerender}>
-            UnitInput
-          </Heading>}>
-        <Text faint>
-          Cosmetic Rounding Test Case: type 9750 then return (compare with
-          enableCosmeticRounding on and off)
-        </Text>
-        <Spacer />
-        <Text warning>
-          Note: UnitInput uses convertSamePrecision internally (decision prior
-          to cosmetic value implementation). This means not all rounding noise
-          occurrences seen in NumberInput will be reproducible in UnitInput,
-          because they get rounded off by other logic.
-        </Text>
-        <Spacer />
-        {visible && <UnitInput name="Example" unitkey="pressure" initUnit={preferredUnit} unitTemplate={{
-        pressure: 'psi'
-      }} value={value} onChange={evt => {
-        const {
-          value
-        } = evt.target;
-        if (value) {
-          setValue(value);
-        }
-      }} enableDisplayRounding={enableDisplayRounding} enableCosmeticRounding={enableCosmeticRounding} error={convertAndGetValue(value, 'bar') >= 0 ? '' : 'Value must be positive'} validationCallback={(name, error) => {
-        setCallBackError(error ?? '');
-      }} convertBackToStorageUnit={convertBackToStorageUnit} />}
-      </Card>
-      <Card heading={<Heading>Unit Template</Heading>}>
-        <Select options={[{
-        label: 'Bar',
-        value: 'bar'
-      }, {
-        label: 'psi',
-        value: 'psi'
-      }]} value={preferredUnit} width={70} onChange={evt => setPreferredUnit(evt.target.value)} />
-      </Card>
-      <Card heading={<Heading>Test Validation Callback</Heading>}>
-        {callBackError && <Message message={{
-        content: callBackError,
-        icon: true,
-        type: 'Error',
-        visible: true
-      }} />}
-      </Card>
-      <Card heading={<Heading>Storage State / Redux</Heading>}>
-        {value}
-        <Spacer />
-        <Button label="Change value" onClick={() => setValue(withUnit(String(Math.floor(Math.random() * 100)), 'bar'))} />
-      </Card>
-    </Grid>;
-}`,...(Cn=(bn=ve.parameters)==null?void 0:bn.docs)==null?void 0:Cn.source}}};var Un,xn,In;J.parameters={...J.parameters,docs:{...(Un=J.parameters)==null?void 0:Un.docs,source:{originalSource:`() => {
-  const [value, setValue] = useState('123|m');
-  return <UnitInput name="example" onChange={evt => setValue(evt.target.value)} value={value} initUnit="m" unitkey="depth" unitTemplate={{
-    depth: 'm'
-  }} testId="testId" />;
-}`,...(In=(xn=J.parameters)==null?void 0:xn.docs)==null?void 0:In.source}}};const ri=["Default","InitUnit","notKnownUnit","Width","NoConversion","Small","Placeholder","PlaceholderWithUnit","Error","InternalValidationError","Disabled","DisabledNoConversion","DisabledUnitWithoutUnitKey","DisabledUnitWithUnitKey","DisabledWithEnabledUnitMenu","TestExternalStateChangeWithSynchronizedUnits","PredefinedOptionsMenu","TestEdgeCases","AutomaticValues","ValidationCallback","AllowEmptyPUI","onSwitchUnit","ManagedTestCase","OW_10614TestCase","OW_17784TestCase","DemoCosmeticRounding","TestUserInput"];export{me as AllowEmptyPUI,de as AutomaticValues,Ie as Default,ve as DemoCosmeticRounding,G as Disabled,re as DisabledNoConversion,le as DisabledUnitWithUnitKey,se as DisabledUnitWithoutUnitKey,oe as DisabledWithEnabledUnitMenu,ae as Error,Q as InitUnit,ie as InternalValidationError,ge as ManagedTestCase,te as NoConversion,he as OW_10614TestCase,z as OW_17784TestCase,H as Placeholder,L as PlaceholderWithUnit,ue as PredefinedOptionsMenu,ne as Small,$ as TestEdgeCases,K as TestExternalStateChangeWithSynchronizedUnits,J as TestUserInput,ce as ValidationCallback,ee as Width,ri as __namedExportsOrder,ii as default,X as notKnownUnit,pe as onSwitchUnit};