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

package/dist/storybook/assets/types-BmbYqTX_.js

@@ -1 +0,0 @@
-var i=(r=>(r.HEADING="Heading",r.DIVIDER="Divider",r.OPTION="Option",r.MENU="Menu",r))(i||{}),D=(r=>(r.FALSE="false",r.RIGHT="right",r.DOWN="down",r))(D||{});export{i as M,D as a};

package/dist/storybook/assets/types-Dx2TtIG9.js

@@ -1 +0,0 @@
-import{r as t}from"./index-DhsZuJvc.js";import{l as s}from"./lodash-c4VUpsOs.js";const a=r=>s.isString(r)||s.isNumber(r)||t.isValidElement(r),e=r=>Array.isArray(r)?"array":typeof r;export{e as g,a as i};

package/dist/storybook/assets/unit-input-5P4Cogho.css

@@ -1 +0,0 @@
-._predefinedMenuActive_ye9w9_1 input{background:var(--color-background-disabled)!important}._inputWrapper_ye9w9_4{flex:1}

package/dist/storybook/assets/unit-input-DTOrVqdm.js

@@ -1,5 +0,0 @@
-import{j as o}from"./jsx-runtime-eps93zm2.js";import{r as q}from"./index-DhsZuJvc.js";import{d as r}from"./index-C0x1JmaP.js";import{c as Ne}from"./index-Bk2sglWO.js";import{c as ne,i as Ce,a as De,g as Pe,u as Me,b as Oe}from"./initialize-context-Y03pJPr5.js";import{M as X}from"./actions-Bax0KeqM.js";import{I as Fe}from"./input-group-addon-D68iUKV2.js";import{B as Se}from"./button-Cbv7WK6k.js";import{T as xe}from"./tooltip-1V7clEnw.js";import{I as je}from"./input-group-BaRSJAEN.js";import{S as Ae}from"./spacer-BWoNR27H.js";import{T as We}from"./text-B3-TSWok.js";import{M as Y}from"./types-BmbYqTX_.js";import{l as v}from"./lodash-c4VUpsOs.js";import{N as Re,r as _e}from"./number-input-B3_gmeWr.js";const He=()=>{const e=q.useRef(null);return q.useLayoutEffect(()=>{e.current&&(e.current(),e.current=null)}),f=>{e.current=f}};var d=(e=>(e.CUSTOM="custom",e.PREDEFINED="predefined",e))(d||{});const ke=e=>{if(!e)return!1;const c=r.getUnit(e);return!r.KNOWN_UNITS.includes(c)},w=({value:e="",toUnit:c,unitkey:f,defaultFromUnit:F,doNotConvertValue:I})=>{const N=r.getValue(e),E=Ce(N);return ke(e)?{value:N}:E?{value:N}:r.isValueWithUnit(e)?ne({value:e,unitkey:f,toUnit:c,fromUnit:F,doNotConvertValue:I,exactPrecision:!0}):{value:e}},Z=e=>v.isObject(e)&&!v.isArray(e)&&!v.isFunction(e)?v.get(e,"fieldName",""):typeof e=="string"?e:"",ee=(e="")=>{var c;return(c=r.KNOWN_UNITS)==null?void 0:c.includes(e)},Le=(e,c)=>{const f=r.getUnit(e||"");return ee(c)&&ee(f)},Be="_predefinedMenuActive_ye9w9_1",$e="_inputWrapper_ye9w9_4",te={predefinedMenuActive:Be,inputWrapper:$e},Ke=({name:e,placeholder:c="",disabled:f=!1,disabledUnit:F=!1,error:I=null,left:N=!1,small:E=!1,width:re="100%",value:l,unitkey:u="",initUnit:ae,noConversion:ie=!1,onChange:S=v.noop,onClick:Ge=v.noop,onFocus:se=v.noop,onSwitchUnit:_=v.noop,unitTemplate:H,doNotConvertValue:V=!1,testId:b,warning:k=null,predefinedOptions:g,initialPredefinedOption:le=!1,shouldLinkAutomaticly:L=!0,selectedPredefinedOptionKey:B,validationCallback:ue=()=>({name:"",error:null}),disabledValidation:oe=!1,allowEmpty:de=!1,autoValue:U,convertBackToStorageUnit:pe=!1,enableCosmeticRounding:$=!0,enableDisplayRounding:ce=!1})=>{const h=De(),fe=He();typeof l=="number"&&(l=`${l}`);const[K="",y=""]=l!==void 0?r.split(l):[],G=U?r.getUnit(U):"",Q=q.useMemo(()=>Pe(u,H||(h==null?void 0:h.unitTemplate)),[u,H,h==null?void 0:h.unitTemplate]),me=Le(l,Q),m=ae||Q||y,ge=Me(m),{value:z}=w({value:l,toUnit:m,unitkey:u,defaultFromUnit:y,doNotConvertValue:V}),{value:J}=w({value:U,toUnit:m,unitkey:u,defaultFromUnit:G,doNotConvertValue:V}),ve=z!==""?{value:z,unit:m}:J!==""?{value:J,unit:m}:{value:K,unit:y},[a,x]=q.useState(ve),Ue=de||(a==null?void 0:a.value)===void 0,[T,j]=q.useState(le?d.PREDEFINED:d.CUSTOM),A=K===""&&U,ye=!!(oe||U),C=g&&g.find(t=>{if(!(t!=null&&t.value))return;if(B)return B===t.valueKey;const n=r.isValueWithUnit(t.value)?r.getUnit(t.value):"",{value:i=l}=ne({value:String(l),unitkey:u,toUnit:n});return r.withUnit(i,n)===t.value}),Te=()=>{const t=A?U:l??"",n=a.unit;if(Oe({value:t,unitkey:u,toUnit:n})){if(u)try{let s=r.altUnitsList(t,u);return r.getValue(t)===""?s.map(p=>["",p[1]]):s}catch{return null}}else{let s=r.getAltUnitsListByQuantity(u);return s==null?void 0:s.map(p=>["",p==null?void 0:p.unit])}},Ee=t=>{const n=Z(e),i=t.target,{value:s,selectionStart:p}=i,O=r.withUnit(s,(a==null?void 0:a.unit)||""),R=pe?r.withUnit(r.convertAndGetValue(O,y),y):O;S({target:{value:R,name:n}});const[qe,Ie]=r.split(O);x({value:qe,unit:Ie}),fe(()=>{i.selectionStart=p,i.selectionEnd=p})},Ve=(t,n)=>{n===a.unit||isNaN(Number(t))||(x({value:t,unit:n}),_&&_(n))};q.useEffect(()=>{if(m){let t,n="";if(ge!==m){const{value:i}=w({value:l,toUnit:m,unitkey:u,defaultFromUnit:y,doNotConvertValue:V});t=i,n=m}else if(r.withUnit(a.value,a.unit)!==l){const{value:i}=w({value:l,toUnit:a.unit,unitkey:u,defaultFromUnit:y,doNotConvertValue:V});t=i,n=a.unit}t!==void 0&&x({value:t,unit:n}),g&&j(C&&L?d.PREDEFINED:d.CUSTOM)}},[m,l,I,L]);const D=Te(),P=r.label(a.unit)||a.unit||"",be=ie||!D||D&&D.length===1,W=Z(e);let M;const he=t=>{const n=t!=null&&t.value?t.value:"",[i="",s=""]=r.isValueWithUnit(n)?r.split(n):[n];return{type:Y.OPTION,inline:!0,onClick:()=>{r.validateNumber(i).valid&&!f&&(j(d.PREDEFINED),S({target:{value:n,name:typeof e=="string"?e:(e==null?void 0:e.fieldName)||"",predefinedSelected:!0,predefinedOption:t}}))},label:o.jsxs(o.Fragment,{children:[o.jsx(We,{children:t.label}),o.jsx(Ae,{width:"20px",height:"0"})]}),description:r.isValueWithUnit(n)?`${i} ${s}`:n,selected:C===t&&T===d.PREDEFINED}};if(M=[{type:Y.OPTION,inline:!0,onClick:()=>{T!==d.CUSTOM&&!f&&S({target:{value:r.withUnit(a.value,a.unit),name:typeof e=="string"?e:(e==null?void 0:e.fieldName)||""}})},label:"Custom",selected:T===d.CUSTOM}],g!=null&&g.length){const t=g.map(he);M=[...M,...t]}const we=t=>{if(A){const{value:n}=w({value:U,toUnit:a.unit,unitkey:u,defaultFromUnit:G,doNotConvertValue:V});return n}else if(r.isValueWithUnit(t)){const n=r.getUnit(t),{value:i}=w({value:t,toUnit:a.unit,unitkey:u,defaultFromUnit:n,doNotConvertValue:V});return i}return t};return o.jsx("div",{className:T===d.PREDEFINED?Ne(te.predefinedMenuActive):"",children:o.jsxs(je,{small:E,width:re,children:[g&&o.jsx(xe,{text:T===d.PREDEFINED?C==null?void 0:C.label:"",children:o.jsx(X,{maxHeight:380,groupOrder:"first",testId:b&&`${b}-predefined-menu`,disabled:f,menu:{colored:!0,trigger:"Component",component:o.jsx(Se,{groupOrder:"first",active:T===d.PREDEFINED,icon:T===d.PREDEFINED?"link":"unlink"}),small:E,sections:M}})}),o.jsx("div",{className:te.inputWrapper,children:o.jsx(Re,{name:W,testId:b,disabled:f,placeholder:we(c),value:a.value,onChange:Ee,onFocus:se,error:I===null?void 0:I,warning:k===null?void 0:k,left:N,allowEmpty:Ue,validationCallback:(t,n)=>ue(W,n),enableCosmeticRounding:$,enableDisplayRounding:ce,groupOrder:g?"middle":"first",disableInternalErrorValidationMessages:ye,small:E},W)}),P&&(be||!me?o.jsx(Fe,{groupOrder:"last",children:P}):o.jsx(X,{maxHeight:380,groupOrder:"last",disabled:F,testId:b&&`${b}-menu`,menu:{label:P,trigger:"DropDownButton",small:E,sections:D.map(([t,n,i])=>{const s=i||n||"",p=r.isValidNum(t)?t:"";return{type:"Option",label:$?_e(p):p,inline:!0,onClick:R=>{R.stopPropagation(),Ve(A?"":t,n)},description:s,selected:s===P,testId:`${b}-unit-${s}`}})}}))]})})};Ke.__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:"(evt: TOnChangeEvent) => void",signature:{arguments:[{type:{name:"signature",type:"object",raw:"{ target: TOnChangeEventTarget }",signature:{properties:[{key:"target",value:{name:"union",raw:`| TOnChangeEventBaseTarget
-| (TOnChangeEventBaseTarget & {
-    predefinedSelected: boolean;
-    predefinedOption: IPredefinedOption;
-  })`,elements:[{name:"signature",type:"object",raw:"{ name: string; value: string }",signature:{properties:[{key:"name",value:{name:"string",required:!0}},{key:"value",value:{name:"string",required:!0}}]}},{name:"unknown"}],required:!0}}]}},name:"evt"}],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}}}};export{Ke as U};

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

@@ -1,198 +0,0 @@
-import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as u}from"./index-DhsZuJvc.js";import{U as o}from"./unit-input-DTOrVqdm.js";import{B as p}from"./button-Cbv7WK6k.js";import{S as E}from"./spacer-BWoNR27H.js";import{R as Fe,C as De}from"./row-Bmiy2Lh0.js";import{F as g}from"./field-HrLaMLbx.js";import{M as Ne}from"./message-BRyKdRaX.js";import"./index-C0x1JmaP.js";import"./index-DRSy5Ssd.js";import"./index-Bk2sglWO.js";import"./initialize-context-Y03pJPr5.js";import"./number-input-B3_gmeWr.js";import"./enum-Bnn40S8Q.js";import"./index-CEuq6vkz.js";import"./lodash-c4VUpsOs.js";import"./helpers-JJxzGegQ.js";import"./input-Db9WkmPP.js";import"./disabled-context-rmpd7YJS.js";import"./types-Dx2TtIG9.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";import"./actions-Bax0KeqM.js";import"./common-types-Sih75Sav.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./inheritsLoose-DP0QEDDI.js";import"./types-BmbYqTX_.js";import"./badge-CLQ59MDF.js";import"./input-group-addon-D68iUKV2.js";import"./input-group-BaRSJAEN.js";import"./text-B3-TSWok.js";import"./spinner-AWUe4xwQ.js";import"./styled-components.browser.esm-BQ9GQzDc.js";import"./label-CqmyC9he.js";import"./help-icon-Buhx5nl6.js";const{useArgs:Be}=__STORYBOOK_MODULE_PREVIEW_API__,Ua={title:"Forms/UnitInput",component:o,args:{name:"example",unitkey:"length",value:"123|m"}},s=n=>{const[r,a]=Be(),i=l=>{a({value:l.target.value})};return e.jsx(o,{...n,onChange:i})},P=s.bind({}),m=s.bind({});m.args={initUnit:"ft",unitTemplate:{length:"ft"}};const h=s.bind({});h.args={value:'123|"',unitkey:'"'};const v=s.bind({});v.args={width:"180px"};const C=s.bind({});C.args={noConversion:!0};const b=s.bind({});b.args={small:!0};const U=s.bind({});U.args={error:"Error message goes here"};const x=s.bind({});x.args={value:"asas123asd|%"};const c=s.bind({});c.args={disabled:!0,disabledUnit:!0};c.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 y=s.bind({});y.args={disabled:!0,disabledUnit:!0,noConversion:!0};const I=s.bind({});I.args={disabledUnit:!0,unitkey:void 0};const V=s.bind({});V.args={disabledUnit:!0,unitkey:"length"};const A=s.bind({});A.args={disabledUnit:!1,disabled:!0};const S=s.bind({});S.args={predefinedOptions:[{label:"bottom of casing",value:"12|km"},{label:"mud weight at shoe depth",value:"8|mm"}]};const w=()=>{const n="500px",[r,a]=u.useState("1|m"),[i,l]=u.useState("|m"),d="123|km";return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Different cases for automatic (placeholder) values:"}),e.jsx(Fe,{children:e.jsxs(De,{width:"25%",children:[e.jsx(p,{label:"Change value to ''",onClick:()=>a("")}),e.jsx("br",{}),e.jsx(p,{label:"Change value to 1",onClick:()=>a("1")}),e.jsx("br",{}),e.jsx(p,{label:"Change value to 1|m",onClick:()=>a("1|m")}),e.jsx("br",{}),e.jsx(p,{label:"Change value to |m - empty value",onClick:()=>a("|m")})]})}),e.jsx("br",{}),e.jsx(g,{label:"Normal PUI (placeholder + auto)",children:e.jsx(o,{name:"example1",onChange:t=>a(t.target.value),value:r,unitkey:"length",width:n,placeholder:"value|unit",autoValue:d})}),e.jsx(g,{label:"Normal PUI (only auto)",children:e.jsx(o,{name:"example1",onChange:t=>a(t.target.value),value:r,unitkey:"length",width:n,autoValue:d})}),e.jsx(g,{label:"Empty PUI with autoValue",children:e.jsx(o,{name:"example1",onChange:t=>l(t.target.value),value:i,unitkey:"length",width:n,autoValue:d})}),e.jsx(g,{label:"Normal PUI (only placeholder)",children:e.jsx(o,{name:"example1",onChange:t=>a(t.target.value),value:r,unitkey:"length",width:n,placeholder:"Placeholder test"})}),e.jsx(g,{label:"Normal PUI (placeholder + allowEmpty)",children:e.jsx(o,{name:"example1",onChange:t=>a(t.target.value),value:r,unitkey:"length",width:n,placeholder:"Placeholder test",allowEmpty:!0})}),e.jsx(Ne,{message:{heading:"Current value inside PUI: "+r,visible:!0}})]})},j=()=>{const[n,r]=u.useState("123|%"),[a,i]=u.useState(null),l="This should be visible when an error appears",d=(t,_)=>(i(_),{name:t,error:_});return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"3rd party validation message when inputting invalid value:"}),e.jsx(o,{name:"example",onChange:t=>r(t.target.value),error:!a||l,validationCallback:d,value:n}),e.jsx("br",{}),e.jsx(E,{}),e.jsx("h4",{children:"Original validation message: "}),e.jsx(Ne,{message:{heading:a,visible:!0}})]})},k=()=>{const[n,r]=u.useState("123|m"),[a,i]=u.useState(""),[l,d]=u.useState("km"),t=()=>{d("ft"),i("placeholder"),r("|m")};return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Empty value case:"}),e.jsx(o,{name:"example",onChange:_=>r(_.target.value),value:n,allowEmpty:!0,placeholder:a,initUnit:l,unitkey:"length"}),e.jsx("br",{}),e.jsx(E,{}),e.jsx(p,{label:"Change value |m and unit ft",onClick:()=>t()})]})},f=()=>{const[n,r]=u.useState("123|m"),[a,i]=u.useState("m");return e.jsxs(e.Fragment,{children:[e.jsx(o,{name:"example",onChange:l=>r(l.target.value),value:n,initUnit:a,unitkey:"length",onSwitchUnit:i}),e.jsx(E,{}),e.jsx(o,{name:"example",onChange:l=>r(l.target.value),value:n,initUnit:a,unitkey:"length",onSwitchUnit:i})]})};w.__docgenInfo={description:"",methods:[],displayName:"AutomaticValues"};j.__docgenInfo={description:"",methods:[],displayName:"ValidationCallback"};k.__docgenInfo={description:"",methods:[],displayName:"AllowEmptyPUI"};f.__docgenInfo={description:"",methods:[],displayName:"OnSwitchUnit"};var N,F,D;P.parameters={...P.parameters,docs:{...(N=P.parameters)==null?void 0:N.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(D=(F=P.parameters)==null?void 0:F.docs)==null?void 0:D.source}}};var B,O,M;m.parameters={...m.parameters,docs:{...(B=m.parameters)==null?void 0:B.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(M=(O=m.parameters)==null?void 0:O.docs)==null?void 0:M.source}}};var W,R,K;h.parameters={...h.parameters,docs:{...(W=h.parameters)==null?void 0:W.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(K=(R=h.parameters)==null?void 0:R.docs)==null?void 0:K.source}}};var T,q,L;v.parameters={...v.parameters,docs:{...(T=v.parameters)==null?void 0:T.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(L=(q=v.parameters)==null?void 0:q.docs)==null?void 0:L.source}}};var Y,z,G;C.parameters={...C.parameters,docs:{...(Y=C.parameters)==null?void 0:Y.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(G=(z=C.parameters)==null?void 0:z.docs)==null?void 0:G.source}}};var H,J,Q;b.parameters={...b.parameters,docs:{...(H=b.parameters)==null?void 0:H.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(Q=(J=b.parameters)==null?void 0:J.docs)==null?void 0:Q.source}}};var X,Z,$;U.parameters={...U.parameters,docs:{...(X=U.parameters)==null?void 0:X.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...($=(Z=U.parameters)==null?void 0:Z.docs)==null?void 0:$.source}}};var ee,ae,te;x.parameters={...x.parameters,docs:{...(ee=x.parameters)==null?void 0:ee.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(te=(ae=x.parameters)==null?void 0:ae.docs)==null?void 0:te.source}}};var ne,re,se;c.parameters={...c.parameters,docs:{...(ne=c.parameters)==null?void 0:ne.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(se=(re=c.parameters)==null?void 0:re.docs)==null?void 0:se.source}}};var le,oe,ie;y.parameters={...y.parameters,docs:{...(le=y.parameters)==null?void 0:le.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(ie=(oe=y.parameters)==null?void 0:oe.docs)==null?void 0:ie.source}}};var ue,de,ce;I.parameters={...I.parameters,docs:{...(ue=I.parameters)==null?void 0:ue.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(ce=(de=I.parameters)==null?void 0:de.docs)==null?void 0:ce.source}}};var ge,pe,me;V.parameters={...V.parameters,docs:{...(ge=V.parameters)==null?void 0:ge.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(me=(pe=V.parameters)==null?void 0:pe.docs)==null?void 0:me.source}}};var he,ve,Ce;A.parameters={...A.parameters,docs:{...(he=A.parameters)==null?void 0:he.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(Ce=(ve=A.parameters)==null?void 0:ve.docs)==null?void 0:Ce.source}}};var be,Ue,xe;S.parameters={...S.parameters,docs:{...(be=S.parameters)==null?void 0:be.docs,source:{originalSource:`args => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt: any) => {
-    updateArgs({
-      value: evt.target.value
-    });
-  };
-  return <UnitInput {...args} onChange={handleChange} />;
-}`,...(xe=(Ue=S.parameters)==null?void 0:Ue.docs)==null?void 0:xe.source}}};var ye,Ie,Ve;w.parameters={...w.parameters,docs:{...(ye=w.parameters)==null?void 0:ye.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
-    }} />
-    </>;
-}`,...(Ve=(Ie=w.parameters)==null?void 0:Ie.docs)==null?void 0:Ve.source}}};var Ae,Se,we;j.parameters={...j.parameters,docs:{...(Ae=j.parameters)==null?void 0:Ae.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
-    }} />
-    </>;
-}`,...(we=(Se=j.parameters)==null?void 0:Se.docs)==null?void 0:we.source}}};var je,ke,fe;k.parameters={...k.parameters,docs:{...(je=k.parameters)==null?void 0:je.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()} />
-    </>;
-}`,...(fe=(ke=k.parameters)==null?void 0:ke.docs)==null?void 0:fe.source}}};var _e,Pe,Ee;f.parameters={...f.parameters,docs:{...(_e=f.parameters)==null?void 0:_e.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} />
-    </>;
-}`,...(Ee=(Pe=f.parameters)==null?void 0:Pe.docs)==null?void 0:Ee.source}}};const xa=["Default","InitUnit","NotKnownUnit","Width","NoConversion","Small","Error","InternalValidationError","Disabled","DisabledNoConversion","DisabledUnitWithoutUnitKey","DisabledUnitWithUnitKey","DisabledWithEnabledUnitMenu","PredefinedOptionsMenu","AutomaticValues","ValidationCallback","AllowEmptyPUI","OnSwitchUnit"];export{k as AllowEmptyPUI,w as AutomaticValues,P as Default,c as Disabled,y as DisabledNoConversion,V as DisabledUnitWithUnitKey,I as DisabledUnitWithoutUnitKey,A as DisabledWithEnabledUnitMenu,U as Error,m as InitUnit,x as InternalValidationError,C as NoConversion,h as NotKnownUnit,f as OnSwitchUnit,S as PredefinedOptionsMenu,b as Small,j as ValidationCallback,v as Width,xa as __namedExportsOrder,Ua as default};

package/dist/storybook/assets/unit-input.test-case.stories-Dk5SRvMt.js

@@ -1,215 +0,0 @@
-import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as d}from"./index-DhsZuJvc.js";import{d as b}from"./index-C0x1JmaP.js";import{w as f,u as l,e as r,f as V,a as D}from"./index-DMAnyMX5.js";import{U as u}from"./unit-input-DTOrVqdm.js";import{B as o}from"./button-Cbv7WK6k.js";import{S as g}from"./spacer-BWoNR27H.js";import{D as fe}from"./divider-DY9nJ_7N.js";import{R as Ce,C as F}from"./row-Bmiy2Lh0.js";import{F as U}from"./field-HrLaMLbx.js";import{M as pe}from"./message-BRyKdRaX.js";import{G as ge}from"./grid-DRkC-bt8.js";import{C as v}from"./card-EcjmryU9.js";import{H as y}from"./heading-CRNoBc7q.js";import{T as N}from"./toggle-BbFVf61v.js";import{T as q}from"./text-B3-TSWok.js";import{S as xe}from"./select-Cwks-WA0.js";import{I as he}from"./icon-BSFY3vDO.js";import"./index-DRSy5Ssd.js";import"./index-CF7H4eMJ.js";import"./index-Bk2sglWO.js";import"./initialize-context-Y03pJPr5.js";import"./number-input-B3_gmeWr.js";import"./enum-Bnn40S8Q.js";import"./index-CEuq6vkz.js";import"./lodash-c4VUpsOs.js";import"./helpers-JJxzGegQ.js";import"./input-Db9WkmPP.js";import"./disabled-context-rmpd7YJS.js";import"./types-Dx2TtIG9.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";import"./actions-Bax0KeqM.js";import"./common-types-Sih75Sav.js";import"./types-BmbYqTX_.js";import"./badge-CLQ59MDF.js";import"./input-group-addon-D68iUKV2.js";import"./input-group-BaRSJAEN.js";import"./spinner-AWUe4xwQ.js";import"./styled-components.browser.esm-BQ9GQzDc.js";import"./label-CqmyC9he.js";import"./help-icon-Buhx5nl6.js";import"./inheritsLoose-DP0QEDDI.js";import"./assertThisInitialized-B9jnkVVz.js";import"./memoize-one.esm-CcMeOnPo.js";import"./select.input-CJed_LLR.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";const ht={title:"Forms/UnitInput/Test Cases",component:u,tags:["!autodocs"]},C=()=>{const[i,a]=d.useState("123|m");return e.jsx(u,{name:"example",onChange:t=>a(t.target.value),placeholder:"Type a value...",value:i,initUnit:"m",unitkey:"depth",unitTemplate:{depth:"m"},testId:"testId"})};C.play=async({canvasElement:i,step:a})=>{const t=f(i),s=f(i.ownerDocument.body);await a("Shows validation error for non-numeric input",async()=>{const n=t.getByTestId("testId");await l.clear(n),await l.type(n,"123x45s6"),await r(t.getByDisplayValue("123x45s6")).toBeInTheDocument(),await r(n.getAttribute("data-error")).toEqual("Must be a numerical value"),await V.mouseOver(n),await D(()=>{r(s.getByText("Must be a numerical value")).toBeInTheDocument()})})};const x=()=>{const[i,a]=d.useState("|m");return e.jsx(u,{name:"example-ft",onChange:t=>a(t.target.value),placeholder:"7|ft",value:i,initUnit:"m",unitkey:"depth",unitTemplate:{depth:"m"},testId:"testId-ft"})};x.play=async({canvasElement:i,step:a})=>{const t=f(i),s=f(i.ownerDocument.body);await a("Handle input with unit only",async()=>{const n=t.getByTestId("testId-ft");await r(t.getByDisplayValue("")).toBeInTheDocument(),await r(n.getAttribute("data-error")).toBeNull(),await V.mouseOver(n),await D(()=>{r(s.queryByText("Must be a numerical value")).not.toBeInTheDocument()})}),await a("Clear input and check placeholder",async()=>{const n=t.getByTestId("testId-ft");await l.clear(n),await r(n).toHaveAttribute("placeholder","2.13")}),await a("Type a correct numeric value and ensure no error",async()=>{const n=t.getByTestId("testId-ft");await l.type(n,"123"),await r(t.getByDisplayValue("123")).toBeInTheDocument(),await r(n.getAttribute("data-error")).toBeNull(),await V.mouseOver(n),await D(()=>{r(s.queryByText("Must be a numerical value")).not.toBeInTheDocument()})}),await a("Remove value, type incorrect value and check for error",async()=>{const n=t.getByTestId("testId-ft");await l.clear(n),await l.type(n,"123abc"),await r(t.getByDisplayValue("123abc")).toBeInTheDocument(),await r(n.getAttribute("data-error")).toEqual("Must be a numerical value"),await V.mouseOver(n),await D(()=>{r(s.getByText("Must be a numerical value")).toBeInTheDocument()})})};const T=i=>{const[a,t]=d.useState("123|m"),[s,n]=d.useState("223|m"),[c,h]=d.useState("ft");return e.jsxs(e.Fragment,{children:[e.jsx(o,{label:"Change initUnit",onClick:()=>h(c==="m"?"ft":"m")}),e.jsx(g,{}),e.jsx(o,{label:"Change value",onClick:()=>t(a==="123|m"?"456|m":"123|m")}),e.jsx(g,{}),e.jsx(u,{name:"example",onChange:m=>{t(m.target.value)},unitkey:"length",value:a,initUnit:c,onSwitchUnit:h}),e.jsx(g,{}),e.jsx(u,{name:"example2",onChange:m=>{n(m.target.value)},unitkey:"length",value:s,initUnit:c,onSwitchUnit:h}),e.jsx(fe,{}),e.jsx("h4",{children:"Without initUnit property (taken from the redux store)"}),e.jsx(u,{name:"example",onChange:m=>{t(m.target.value)},unitkey:"length",value:a,onSwitchUnit:h}),e.jsx(u,{name:"example2",onChange:m=>{n(m.target.value)},unitkey:"length",value:s,onSwitchUnit:h})]})};T.parameters={docs:{description:{story:"[OW-4380](https://oliasoft.atlassian.net/browse/OW-4380?atlOrigin=eyJpIjoiMmM1N2RkNWU3Mjk5NDYxY2E0YzhkMzk5ZTVmZTJhMjciLCJwIjoiaiJ9)"}}};const I=()=>{const i="500px",[a,t]=d.useState(void 0);return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Different edge cases such as +/- infinity, undefined, NaN, null:"}),e.jsxs(Ce,{children:[e.jsxs(F,{width:"25%",children:[e.jsx(o,{label:"Change value infinity",onClick:()=>t(1/0)}),e.jsx("br",{}),e.jsx(o,{label:"Change value -infinity",onClick:()=>t(-1/0)}),e.jsx("br",{}),e.jsx(o,{label:"Change value null",onClick:()=>t(null)}),e.jsx("br",{}),e.jsx(o,{label:"Change value - undefined",onClick:()=>t(void 0)}),e.jsx("br",{}),e.jsx(o,{label:"Change value - NaN",onClick:()=>t(NaN)}),e.jsx("br",{}),e.jsx(o,{label:"Change value - nothing (empty)",onClick:()=>t(void 0)}),e.jsx("br",{}),e.jsx(o,{label:"Change value - empty string",onClick:()=>t("")})]}),e.jsxs(F,{width:"25%",children:[e.jsx(o,{label:"Change value infinity|m",onClick:()=>t("Infinity|m")}),e.jsx("br",{}),e.jsx(o,{label:"Change value -infinity|m",onClick:()=>t("-Infinity|m")}),e.jsx("br",{}),e.jsx(o,{label:"Change value null|m",onClick:()=>t("null|m")}),e.jsx("br",{}),e.jsx(o,{label:"Change value - undefined|m",onClick:()=>t("undefined|m")}),e.jsx("br",{}),e.jsx(o,{label:"Change value - NaN|m",onClick:()=>t("NaN|m")}),e.jsx("br",{}),e.jsx(o,{label:"Change value - nothing (empty)|m",onClick:()=>t("|m")})]})]}),e.jsx("br",{}),e.jsx(U,{label:"Normal PUI",children:e.jsx(u,{name:"example1",onChange:s=>t(s.target.value),value:a,unitkey:"length",width:i,placeholder:"value|unit"})}),e.jsx(U,{label:"Disabled validation",children:e.jsx(u,{name:"example2",onChange:s=>t(s.target.value),value:a,unitkey:"length",disabledValidation:!0,width:i})}),e.jsx(U,{label:"Disabled validation and manual error",children:e.jsx(u,{name:"example3",onChange:s=>t(s.target.value),value:a,unitkey:"length",error:"test",disabledValidation:!0,width:i})}),e.jsx(pe,{message:{heading:"Current value inside PUI: "+a,visible:!0}})]})};I.parameters={docs:{description:{story:"[OW-8884](https://oliasoft.atlassian.net/browse/OW-8884)"}}};const j=()=>{const[i,a]=d.useState(!0),t=()=>{a(!1),setTimeout(()=>a(!0),0)},[s,n]=d.useState("123|ft");return e.jsxs(ge,{columns:"1fr 1fr",gap:!0,children:[e.jsxs(v,{heading:e.jsx(y,{children:"Storage State (Redux)"}),children:[s,e.jsx(g,{}),e.jsx(o,{label:"Change value",onClick:()=>n(b.withUnit(String(Math.floor(Math.random()*100)),"ft"))})]}),e.jsx(v,{heading:e.jsx(y,{icon:e.jsx(he,{icon:"refresh",testId:"triggerRerenderTestId"}),onIconClick:t,children:"UnitInput"}),children:i&&e.jsx(u,{name:"example",onChange:c=>n(c.target.value),value:s,initUnit:"m",unitkey:"depth",unitTemplate:{depth:"m"}})})]})},S=()=>e.jsxs(e.Fragment,{children:[e.jsx(q,{faint:!0,children:"Reproduce OW-10614 rounding noise bug when storing values in a different unit to the display unit"}),e.jsx(g,{}),e.jsx(u,{name:"example",onChange:()=>{},value:b.withUnit(b.convertAndGetValue("9750|psi","bar"),"bar"),initUnit:"psi",unitkey:"pressure",unitTemplate:{pressure:"psi"}}),e.jsx(g,{}),e.jsx(u,{name:"example2",onChange:()=>{},value:b.withUnit(b.convertAndGetValue("8642|lbf","tonneForce"),"tonneForce"),initUnit:"lbf",unitkey:"force",unitTemplate:{force:"tonneForce"}})]}),w=()=>e.jsxs(e.Fragment,{children:[e.jsx(u,{name:"example",unitkey:"moleWeight",initUnit:"g/mol",doNotConvertValue:!0,value:"170|g/mol",unitTemplate:{moleWeight:"g/mol"},testId:"case1"}),e.jsx(g,{}),e.jsx(u,{name:"gor",unitkey:"moleWeight",initUnit:"gor",value:"Infinity|SCF/STB",testId:"case2"})]});w.play=async({canvasElement:i,step:a})=>{const t=f(i);await a("Can enter decimal values",async()=>{await r(t.getByDisplayValue("170")).toBeInTheDocument(),await r(t.getByDisplayValue("")).toBeInTheDocument()})};const B=()=>{const[i,a]=d.useState(!0),t=()=>{a(!1),setTimeout(()=>a(!0),0)},[s,n]=d.useState("psi"),[c,h]=d.useState(!1),[m,ve]=d.useState(!0),[M,ye]=d.useState(!0),[R,W]=d.useState("672.2388357750001|bar"),[O,be]=d.useState("");return e.jsxs(ge,{columns:"1fr 1fr",gap:!0,children:[e.jsxs(v,{heading:e.jsx(y,{children:"Settings"}),children:[e.jsx(U,{label:"Enable display rounding:",labelLeft:!0,labelWidth:200,children:e.jsx(N,{checked:c,onChange:p=>h(p.target.checked)})}),e.jsx(U,{label:"Enable cosmetic rounding:",labelLeft:!0,labelWidth:200,children:e.jsx(N,{checked:m,onChange:p=>ve(p.target.checked)})}),e.jsx(U,{label:"Convert back to storage unit (onChange):",labelLeft:!0,labelWidth:200,children:e.jsx(N,{checked:M,onChange:p=>ye(p.target.checked)})})]}),e.jsxs(v,{heading:e.jsx(y,{icon:e.jsx(he,{icon:"refresh",testId:"triggerRerenderTestId"}),onIconClick:t,children:"UnitInput"}),children:[e.jsx(q,{faint:!0,children:"Cosmetic Rounding Test Case: type 9750 then return (compare with enableCosmeticRounding on and off)"}),e.jsx(g,{}),e.jsx(q,{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(g,{}),i&&e.jsx(u,{name:"Example",unitkey:"pressure",initUnit:s,unitTemplate:{pressure:"psi"},value:R,onChange:p=>{const{value:E}=p.target;E&&W(E)},enableDisplayRounding:c,enableCosmeticRounding:m,error:b.convertAndGetValue(R,"bar")>=0?"":"Value must be positive",validationCallback:(p,E)=>{be(E??"")},convertBackToStorageUnit:M})]}),e.jsx(v,{heading:e.jsx(y,{children:"Unit Template"}),children:e.jsx(xe,{options:[{label:"Bar",value:"bar"},{label:"psi",value:"psi"}],value:s,width:70,onChange:p=>n(p.target.value)})}),e.jsx(v,{heading:e.jsx(y,{children:"Test Validation Callback"}),children:O&&e.jsx(pe,{message:{content:O,icon:!0,type:"Error",visible:!0}})}),e.jsxs(v,{heading:e.jsx(y,{children:"Storage State / Redux"}),children:[R,e.jsx(g,{}),e.jsx(o,{label:"Change value",onClick:()=>W(b.withUnit(String(Math.floor(Math.random()*100)),"bar"))})]})]})},k=()=>{const[i,a]=d.useState("123|m");return e.jsx(u,{name:"example",onChange:t=>a(t.target.value),value:i,initUnit:"m",unitkey:"depth",unitTemplate:{depth:"m"},testId:"testId"})};k.play=async({canvasElement:i,step:a})=>{const t=f(i),s=f(i.ownerDocument.body);await a("Can enter decimal values",async()=>{const n=t.getByTestId("testId");await l.clear(n),await l.type(n,"123.123456789"),await r(t.getByDisplayValue("123.123456789")).toBeInTheDocument()}),await a("Can enter scientific notation",async()=>{const n=t.getByTestId("testId");await l.clear(n),await l.type(n,"-1.12e3"),await r(t.getByDisplayValue("-1.12e3")).toBeInTheDocument()}),await a("Can enter comma decimals (converts to dot)",async()=>{const n=t.getByTestId("testId");await l.clear(n),await l.type(n,"123,456"),await r(t.getByDisplayValue("123.456")).toBeInTheDocument()}),await a("Can enter small numbers",async()=>{const n=t.getByTestId("testId");await l.clear(n),await l.type(n,"0.0000000023"),await r(t.getByDisplayValue("0.0000000023")).toBeInTheDocument()}),await a("Can enter large numbers",async()=>{const n=t.getByTestId("testId");await l.clear(n),await l.type(n,"999999999999"),await r(t.getByDisplayValue("999999999999")).toBeInTheDocument()}),await a("Can convert units",async()=>{const n=t.getByTestId("testId"),c=t.getByTestId("testId-menu");await l.clear(n),await l.type(n,"456.1"),await l.click(c),await l.click(s.getByTestId("testId-unit-ft")),await r(t.getByDisplayValue("1496")).toBeInTheDocument()}),await a("Shows validation error for non-numeric input",async()=>{const n=t.getByTestId("testId");await l.clear(n),await l.type(n,"123x45s6"),await r(t.getByDisplayValue("123x45s6")).toBeInTheDocument(),await r(n.getAttribute("data-error")).toEqual("Must be a numerical value"),await V.mouseOver(n),await D(()=>{r(s.getByText("Must be a numerical value")).toBeInTheDocument()})})};C.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"Placeholder"};x.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"PlaceholderWithUnit"};T.__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:"(evt: TOnChangeEvent) => void",signature:{arguments:[{type:{name:"signature",type:"object",raw:"{ target: TOnChangeEventTarget }",signature:{properties:[{key:"target",value:{name:"union",raw:`| TOnChangeEventBaseTarget
-| (TOnChangeEventBaseTarget & {
-    predefinedSelected: boolean;
-    predefinedOption: IPredefinedOption;
-  })`,elements:[{name:"signature",type:"object",raw:"{ name: string; value: string }",signature:{properties:[{key:"name",value:{name:"string",required:!0}},{key:"value",value:{name:"string",required:!0}}]}},{name:"unknown"}],required:!0}}]}},name:"evt"}],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:""}}};I.__docgenInfo={description:"",methods:[],displayName:"TestEdgeCases"};j.__docgenInfo={description:"",methods:[],displayName:"ManagedTestCase"};S.__docgenInfo={description:"",methods:[],displayName:"OW_10614TestCase"};w.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"OW_17784TestCase"};B.__docgenInfo={description:"",methods:[],displayName:"DemoCosmeticRounding"};k.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"TestUserInput"};var _,H,P;C.parameters={...C.parameters,docs:{...(_=C.parameters)==null?void 0:_.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" />;
-}`,...(P=(H=C.parameters)==null?void 0:H.docs)==null?void 0:P.source}}};var A,G,L;x.parameters={...x.parameters,docs:{...(A=x.parameters)==null?void 0:A.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" />;
-}`,...(L=(G=x.parameters)==null?void 0:G.docs)==null?void 0:L.source}}};var z,J,Y;T.parameters={...T.parameters,docs:{...(z=T.parameters)==null?void 0:z.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} />
-    </>;
-}`,...(Y=(J=T.parameters)==null?void 0:J.docs)==null?void 0:Y.source}}};var Z,K,Q;I.parameters={...I.parameters,docs:{...(Z=I.parameters)==null?void 0:Z.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
-    }} />
-    </>;
-}`,...(Q=(K=I.parameters)==null?void 0:K.docs)==null?void 0:Q.source}}};var X,$,ee;j.parameters={...j.parameters,docs:{...(X=j.parameters)==null?void 0:X.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>;
-}`,...(ee=($=j.parameters)==null?void 0:$.docs)==null?void 0:ee.source}}};var te,ne,ae;S.parameters={...S.parameters,docs:{...(te=S.parameters)==null?void 0:te.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'
-    }} />
-    </>;
-}`,...(ae=(ne=S.parameters)==null?void 0:ne.docs)==null?void 0:ae.source}}};var ie,re,se;w.parameters={...w.parameters,docs:{...(ie=w.parameters)==null?void 0:ie.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" />
-    </>;
-}`,...(se=(re=w.parameters)==null?void 0:re.docs)==null?void 0:se.source}}};var le,oe,ue;B.parameters={...B.parameters,docs:{...(le=B.parameters)==null?void 0:le.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>;
-}`,...(ue=(oe=B.parameters)==null?void 0:oe.docs)==null?void 0:ue.source}}};var de,ce,me;k.parameters={...k.parameters,docs:{...(de=k.parameters)==null?void 0:de.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" />;
-}`,...(me=(ce=k.parameters)==null?void 0:ce.docs)==null?void 0:me.source}}};const vt=["Placeholder","PlaceholderWithUnit","TestExternalStateChangeWithSynchronizedUnits","TestEdgeCases","ManagedTestCase","OW_10614TestCase","OW_17784TestCase","DemoCosmeticRounding","TestUserInput"];export{B as DemoCosmeticRounding,j as ManagedTestCase,S as OW_10614TestCase,w as OW_17784TestCase,C as Placeholder,x as PlaceholderWithUnit,I as TestEdgeCases,T as TestExternalStateChangeWithSynchronizedUnits,k as TestUserInput,vt as __namedExportsOrder,ht as default};