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

package/dist/storybook/assets/unit-input.stories-50ac8b0f.js

@@ -0,0 +1,257 @@
+import{j as e}from"./jsx-runtime-f961835c.js";import{r as c}from"./index-f80c8c95.js";import{d as r,r as Yt}from"./index-57d7693e.js";import{c as Zt}from"./index-a80ed1cf.js";import{M as ke}from"./actions-2d4e1c8e.js";import{I as Gt}from"./input-group-addon-f8f6683a.js";import{B as d}from"./button-74c97e4a.js";import{T as Qt}from"./tooltip-23e84186.js";import{I as Xt}from"./input-group-20c3add3.js";import{S as N}from"./spacer-54db0620.js";import{T as en}from"./text-ad1f5f1d.js";import{I as tn}from"./input-d68625a5.js";import{M as Se}from"./types-cc224262.js";import{l as w}from"./lodash-75c70a11.js";import{D as nn}from"./divider-182aa58c.js";import{R as Nt,C as ce}from"./row-2299f0e7.js";import{F as j}from"./field-a094cd72.js";import{a as pe}from"./message-7e627e60.js";import"./index-54f0d271.js";import"./common-types-2c81813f.js";import"./disabled-context-d654f6ff.js";import"./icon-e9cbb4d7.js";import"./inheritsLoose-d4851ab8.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./types-332ceaf3.js";import"./badge-20e7ee0b.js";import"./spinner-a81ebe38.js";import"./index-3d476d02.js";import"./styled-components.browser.esm-416d73e5.js";import"./label-13d490a3.js";import"./help-icon-d4189b1b.js";const an=()=>{const t=c.useRef(null);return c.useLayoutEffect(()=>{t.current&&(t.current(),t.current=null)}),n=>{t.current=n}},ln=t=>{const a=c.useRef();return c.useEffect(()=>{a.current=t},[t]),a.current},rn=(t,a)=>{const n=a==null?void 0:a[t];return n||(console.log(`Warning: 'unitTemplate' does not define a preferred unit for '${t}'. Defaulting to standard unit.`),r.unitFromQuantity(t)??"")};var C=(t=>(t.CUSTOM="custom",t.PREDEFINED="predefined",t))(C||{});const me=t=>t==="undefined"||t===void 0||t===""||t==="null"||t===null||t==="NaN"||isNaN(t),At=(t="",a,n="",i=!1)=>{if(a&&!i)try{const u=me(t)?t:r.isValueWithUnit(t)?r.convertSamePrecision(t,a):r.convertSamePrecision(r.withUnit(t,n),a);return r.getValue(u)}catch{}return""},M=(t="",a,n,i)=>{const u=r.isValueWithUnit(t),m=u&&me(r.getValue(t))||!u&&me(t);return u?m?"":At(r.getValue(t),a,n,i):m?"":t},we=t=>w.isObject(t)&&!w.isArray(t)&&!w.isFunction(t)?w.get(t,"fieldName",""):typeof t=="string"?t:"",sn=t=>w.isObjectLike(t)&&w.has(t,"message"),un=t=>typeof t=="string"?t:sn(t)?t.message:null;var on=Yt();const dn=t=>t.search(RegExp(/(^0{2}\.)|(^0+[1-9])/g))===0,Ee=(t,a)=>{var I;const{allowEmpty:n=!1,autoValue:i,placeholder:u,disabledValidation:m=!1}=a||{},s=String(t);if(m||i||u)return null;const p=on.isValueWithUnit(s)?r.getValue(s):s;if(n&&p==="")return null;if(dn(p))return"Invalid number format due to leading zeroes";const v=r.validateNumber(p);if(!v.valid){const ae=((I=v==null?void 0:v.errors)==null?void 0:I[0])??null;return un(ae)}return null},cn="_predefinedMenuActive_1yvt4_1",mn={predefinedMenuActive:cn},h=({name:t,placeholder:a="",disabled:n=!1,disabledUnit:i=!1,error:u=null,left:m=!1,small:s=!1,width:p="100%",value:v,unitkey:I="",initUnit:ae,noConversion:Pt=!1,onChange:le=()=>{},onClick:gn=()=>{},onFocus:Dt=()=>{},onSwitchUnit:ge=()=>{},unitTemplate:he,doNotConvertValue:A=!1,testId:S,warning:Mt=null,predefinedOptions:x,initialPredefinedOption:Ft=!1,shouldLinkAutomaticly:ve=!0,selectedPredefinedOptionKey:fe,validationCallback:Ce=()=>({name:"",error:null}),disabledValidation:be=!1,allowEmpty:ye=!1,autoValue:V})=>{typeof v=="number"&&(v=`${v}`);const _t=an(),[re="",P=""]=v!==void 0?r.split(v):[],Ue=V?r.getUnit(V):"",Ot=c.useMemo(()=>rn(I,he),[I,he]),y=ae||Ot||P,Bt=ln(y),xe=M(v,y,P,A),Ve=M(V,y,Ue,A),qt=xe!==""?{value:xe,unit:y}:Ve!==""?{value:Ve,unit:y}:{value:re,unit:P},[g,J]=c.useState(qt),[Rt,se]=c.useState(null),[k,ie]=c.useState(Ft?C.PREDEFINED:C.CUSTOM),ue=re===""&&V,D=x&&x.find(l=>{if(fe)return fe===l.valueKey;const o=r.isValueWithUnit(l.value)?r.getUnit(l.value):"";return r.withUnit(At(String(v),o),o)===l.value}),Wt=()=>{if(I)try{const l=String(ue?V:v??"");let o=r.altUnitsList(l,I);return r.getValue(l)===""?o.map(f=>["",f[1]]):o}catch{return null}},Tt=l=>{const o=we(t),f=l.target,{value:U,selectionStart:Q}=f,Ie=r.cleanNumStr(U.replaceAll(" ","").replaceAll("|","")),oe=r.withUnit(Ie,(g==null?void 0:g.unit)||""),Kt=r.getValue(oe),de=Ee(Kt,{allowEmpty:ye,autoValue:V,placeholder:a,disabledValidation:be});if(de===null){le({target:{value:oe,name:o}});const[zt,Jt]=r.split(oe);J({value:zt,unit:Jt}),se(null),Ce(o,null)}else J({value:Ie,unit:g.unit}),se(de),Ce(o,de);_t(()=>{f.selectionStart=Q,f.selectionEnd=Q})},Lt=(l,o)=>{o===g.unit||isNaN(Number(l))||(J({value:l,unit:o}),ge&&ge(o))};c.useEffect(()=>{if(y){let f,U="";Bt!==y?(f=M(String(v),y,P,A),U=y):r.withUnit(g.value,g.unit)!==v&&(f=M(String(v),g.unit,P,A),U=g.unit),f!==void 0&&J({value:f,unit:U}),x&&ie(D&&ve?C.PREDEFINED:C.CUSTOM)}const l=r.withUnit(r.checkAndCleanDecimalComma(re),(g==null?void 0:g.unit)||""),o=Ee(l,{allowEmpty:ye,autoValue:V,placeholder:a,disabledValidation:be});se(o)},[y,v,u,ve]);const Y=Wt(),Z=r.label(g.unit)||g.unit||"",$t=Pt||!Y||Y&&Y.length===1,je=we(t);let G;const Ht=l=>{const[o,f=""]=r.isValueWithUnit(l.value)?r.split(l.value):[l.value];return{type:Se.OPTION,inline:!0,onClick:()=>{r.validateNumber(o).valid&&!n&&(ie(C.PREDEFINED),le({target:{value:l.value,name:typeof t=="string"?t:(t==null?void 0:t.fieldName)||"",predefinedSelected:!0,predefinedOption:l}}))},label:e.jsxs(e.Fragment,{children:[e.jsx(en,{children:l.label}),e.jsx(N,{width:"20px",height:"0"})]}),description:r.isValueWithUnit(l.value)?`${o} ${f}`:l.value,selected:D===l&&k===C.PREDEFINED}};if(G=[{type:Se.OPTION,inline:!0,onClick:()=>{k!==C.CUSTOM&&!n&&le({target:{value:r.withUnit(g.value,g.unit),name:typeof t=="string"?t:(t==null?void 0:t.fieldName)||""}})},label:"Custom",selected:k===C.CUSTOM}],x!=null&&x.length){const l=x.map(Ht);G=[...G,...l]}return e.jsx("div",{className:k===C.PREDEFINED?Zt(mn.predefinedMenuActive):"",children:e.jsxs(Xt,{small:s,width:p,children:[x&&e.jsx(Qt,{text:k===C.PREDEFINED?D==null?void 0:D.label:"",children:e.jsx(ke,{maxHeight:380,groupOrder:"first",testId:S&&`${S}-predefined-menu`,disabled:n,menu:{colored:!0,trigger:"Component",component:e.jsx(d,{groupOrder:"first",active:k===C.PREDEFINED,icon:k===C.PREDEFINED?"link":"unlink"}),small:s,sections:G}})}),e.jsx(tn,{type:"text",name:je,testId:S,disabled:n,placeholder:ue?M(V,g.unit,Ue,A):a,value:g.value,onChange:Tt,onFocus:Dt,error:u||Rt,warning:Mt,right:!m},je),Z&&($t?e.jsx(Gt,{groupOrder:"last",children:Z}):e.jsx(ke,{maxHeight:380,groupOrder:"last",disabled:i,testId:S&&`${S}-menu`,menu:{label:Z,trigger:"DropDownButton",small:s,sections:Y.map(([l,o,f])=>{const U=f||o||"";return{type:"Option",label:isNaN(Number(l))?"":l,inline:!0,onClick:Q=>{Q.stopPropagation(),Lt(ue?"":l,o)},description:U,selected:U===Z,testId:`${S}-unit-${U}`}})}}))]})})};try{h.displayName="UnitInput",h.__docgenInfo={description:"",displayName:"UnitInput",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"string | { fieldName?: string | undefined; }"}},placeholder:{defaultValue:{value:""},description:"",name:"placeholder",required:!1,type:{name:"string"}},disabled:{defaultValue:{value:"false"},description:"",name:"disabled",required:!1,type:{name:"boolean"}},disabledUnit:{defaultValue:{value:"false"},description:"",name:"disabledUnit",required:!1,type:{name:"boolean"}},error:{defaultValue:{value:"null"},description:"",name:"error",required:!1,type:{name:"string | boolean | null"}},left:{defaultValue:{value:"false"},description:"",name:"left",required:!1,type:{name:"boolean"}},small:{defaultValue:{value:"false"},description:"",name:"small",required:!1,type:{name:"boolean"}},width:{defaultValue:{value:"100%"},description:"",name:"width",required:!1,type:{name:"string | number"}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"string | number"}},unitkey:{defaultValue:{value:""},description:"",name:"unitkey",required:!1,type:{name:"string"}},initUnit:{defaultValue:null,description:"",name:"initUnit",required:!1,type:{name:"string"}},noConversion:{defaultValue:{value:"false"},description:"",name:"noConversion",required:!1,type:{name:"boolean"}},doNotConvertValue:{defaultValue:{value:"false"},description:"",name:"doNotConvertValue",required:!1,type:{name:"boolean"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}},warning:{defaultValue:{value:"null"},description:"",name:"warning",required:!1,type:{name:"string | null"}},predefinedOptions:{defaultValue:null,description:"",name:"predefinedOptions",required:!1,type:{name:"IPredefinedOption[]"}},initialPredefinedOption:{defaultValue:{value:"false"},description:"",name:"initialPredefinedOption",required:!1,type:{name:"boolean"}},shouldLinkAutomaticly:{defaultValue:{value:"true"},description:"",name:"shouldLinkAutomaticly",required:!1,type:{name:"boolean"}},selectedPredefinedOptionKey:{defaultValue:null,description:"",name:"selectedPredefinedOptionKey",required:!1,type:{name:"string"}},validationCallback:{defaultValue:{value:"() => ({ name: '', error: null })"},description:"",name:"validationCallback",required:!1,type:{name:"((name: string, message: string | null) => { name: string; error: string | null; })"}},disabledValidation:{defaultValue:{value:"false"},description:"",name:"disabledValidation",required:!1,type:{name:"boolean"}},allowEmpty:{defaultValue:{value:"false"},description:"",name:"allowEmpty",required:!1,type:{name:"boolean"}},autoValue:{defaultValue:null,description:"",name:"autoValue",required:!1,type:{name:"string"}},onChange:{defaultValue:{value:"() => {}"},description:"",name:"onChange",required:!1,type:{name:"(event: ChangeEvent<HTMLInputElement> | ICustomChangeEvent) => void"}},onSwitchUnit:{defaultValue:{value:"() => {}"},description:"",name:"onSwitchUnit",required:!1,type:{name:"((unit: string) => void)"}},onClick:{defaultValue:{value:"() => {}"},description:"",name:"onClick",required:!1,type:{name:"MouseEventHandler<HTMLInputElement>"}},onFocus:{defaultValue:{value:"() => {}"},description:"",name:"onFocus",required:!1,type:{name:"FocusEventHandler<HTMLInputElement>"}},unitTemplate:{defaultValue:null,description:"",name:"unitTemplate",required:!1,type:{name:"Record<string, any>"}}}}}catch{}const{useArgs:pn}=__STORYBOOK_MODULE_ADDONS__,zn={title:"Basic/UnitInput",component:h,args:{name:"example",unitkey:"length",value:"123|m"}},b=t=>{const[a,n]=pn(),i=u=>{n({value:u.target.value})};return e.jsx(h,{...t,onChange:i})},X=b.bind({}),F=b.bind({});F.args={initUnit:"ft",unitTemplate:{length:"ft"}};const _=b.bind({});_.args={width:"180px"};const O=b.bind({});O.args={noConversion:!0};const B=b.bind({});B.args={small:!0};const q=b.bind({});q.args={error:"Error message goes here"};const R=b.bind({});R.args={value:"asas123asd|%"};const E=b.bind({});E.args={disabled:!0,disabledUnit:!0};E.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 W=b.bind({});W.args={disabled:!0,disabledUnit:!0,noConversion:!0};const T=b.bind({});T.args={disabledUnit:!0,unitkey:void 0};const L=b.bind({});L.args={disabledUnit:!0,unitkey:"length"};const $=b.bind({});$.args={disabledUnit:!1,disabled:!0};const H=t=>{const[a,n]=c.useState("123|m"),[i,u]=c.useState("223|m"),[m,s]=c.useState("ft");return e.jsxs(e.Fragment,{children:[e.jsx(d,{label:"Change initUnit",onClick:()=>s(m==="m"?"ft":"m")}),e.jsx(N,{}),e.jsx(d,{label:"Change value",onClick:()=>n(a==="123|m"?"456|m":"123|m")}),e.jsx(N,{}),e.jsx(h,{name:"example",onChange:p=>{n(p.target.value)},unitkey:"length",value:a,initUnit:m,onSwitchUnit:s}),e.jsx(N,{}),e.jsx(h,{name:"example2",onChange:p=>{u(p.target.value)},unitkey:"length",value:i,initUnit:m,onSwitchUnit:s}),e.jsx(nn,{}),e.jsx("h4",{children:"Without initUnit property (taken from the redux store)"}),e.jsx(h,{name:"example",onChange:p=>{n(p.target.value)},unitkey:"length",value:a,onSwitchUnit:s}),e.jsx(h,{name:"example2",onChange:p=>{u(p.target.value)},unitkey:"length",value:i,onSwitchUnit:s})]})};H.parameters={docs:{description:{story:"[OW-4380](https://oliasoft.atlassian.net/browse/OW-4380?atlOrigin=eyJpIjoiMmM1N2RkNWU3Mjk5NDYxY2E0YzhkMzk5ZTVmZTJhMjciLCJwIjoiaiJ9)"}}};const K=b.bind({});K.args={predefinedOptions:[{label:"bottom of casing",value:"12|km"},{label:"mud weight at shoe depth",value:"8|mm"}]};const z=()=>{const t="500px",[a,n]=c.useState(void 0);return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Different edge cases such as +/- infinity, undefined, NaN, null:"}),e.jsxs(Nt,{children:[e.jsxs(ce,{width:"25%",children:[e.jsx(d,{label:"Change value infinity",onClick:()=>n(1/0)}),e.jsx("br",{}),e.jsx(d,{label:"Change value -infinity",onClick:()=>n(-1/0)}),e.jsx("br",{}),e.jsx(d,{label:"Change value null",onClick:()=>n(null)}),e.jsx("br",{}),e.jsx(d,{label:"Change value - undefined",onClick:()=>n(void 0)}),e.jsx("br",{}),e.jsx(d,{label:"Change value - NaN",onClick:()=>n(NaN)}),e.jsx("br",{}),e.jsx(d,{label:"Change value - nothing (empty)",onClick:()=>n(void 0)}),e.jsx("br",{}),e.jsx(d,{label:"Change value - empty string",onClick:()=>n("")})]}),e.jsxs(ce,{width:"25%",children:[e.jsx(d,{label:"Change value infinity|m",onClick:()=>n("Infinity|m")}),e.jsx("br",{}),e.jsx(d,{label:"Change value -infinity|m",onClick:()=>n("-Infinity|m")}),e.jsx("br",{}),e.jsx(d,{label:"Change value null|m",onClick:()=>n(null+"|m")}),e.jsx("br",{}),e.jsx(d,{label:"Change value - undefined|m",onClick:()=>n(void 0+"|m")}),e.jsx("br",{}),e.jsx(d,{label:"Change value - NaN|m",onClick:()=>n("NaN|m")}),e.jsx("br",{}),e.jsx(d,{label:"Change value - nothing (empty)|m",onClick:()=>n("|m")})]})]}),e.jsx("br",{}),e.jsx(j,{label:"Normal PUI",children:e.jsx(h,{name:"example1",onChange:i=>n(i.target.value),value:a,unitkey:"length",width:t,placeholder:"value|unit"})}),e.jsx(j,{label:"Disabled validation",children:e.jsx(h,{name:"example2",onChange:i=>n(i.target.value),value:a,unitkey:"length",disabledValidation:!0,width:t})}),e.jsx(j,{label:"Disabled validation and manual error",children:e.jsx(h,{name:"example3",onChange:i=>n(i.target.value),value:a,unitkey:"length",error:"test",disabledValidation:!0,width:t})}),e.jsx(pe,{message:{heading:"Current value inside PUI: "+a,visible:!0}})]})},ee=()=>{const t="500px",[a,n]=c.useState("1|m"),[i,u]=c.useState("|m"),m="123|km";return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Different cases for automatic (placeholder) values:"}),e.jsx(Nt,{children:e.jsxs(ce,{width:"25%",children:[e.jsx(d,{label:"Change value to ''",onClick:()=>n("")}),e.jsx("br",{}),e.jsx(d,{label:"Change value to 1",onClick:()=>n(1)}),e.jsx("br",{}),e.jsx(d,{label:"Change value to 1|m",onClick:()=>n("1|m")}),e.jsx("br",{}),e.jsx(d,{label:"Change value to |m - empty value",onClick:()=>n("|m")})]})}),e.jsx("br",{}),e.jsx(j,{label:"Normal PUI (placeholder + auto)",children:e.jsx(h,{name:"example1",onChange:s=>n(s.target.value),value:a,unitkey:"length",width:t,placeholder:"value|unit",autoValue:m})}),e.jsx(j,{label:"Normal PUI (only auto)",children:e.jsx(h,{name:"example1",onChange:s=>n(s.target.value),value:a,unitkey:"length",width:t,autoValue:m})}),e.jsx(j,{label:"Empty PUI with autoValue",children:e.jsx(h,{name:"example1",onChange:s=>u(s.target.value),value:i,unitkey:"length",width:t,autoValue:m})}),e.jsx(j,{label:"Normal PUI (only placeholder)",children:e.jsx(h,{name:"example1",onChange:s=>n(s.target.value),value:a,unitkey:"length",width:t,placeholder:"Placeholder test"})}),e.jsx(j,{label:"Normal PUI (placeholder + allowEmpty)",children:e.jsx(h,{name:"example1",onChange:s=>n(s.target.value),value:a,unitkey:"length",width:t,placeholder:"Placeholder test",allowEmpty:!0})}),e.jsx(pe,{message:{heading:"Current value inside PUI: "+a,visible:!0}})]})};z.parameters={docs:{description:{story:"[OW-8884](https://oliasoft.atlassian.net/browse/OW-8884)"}}};const te=()=>{const[t,a]=c.useState("123|%"),[n,i]=c.useState(null),u="This should be visible when an error appears",m=(s,p)=>(i(p),{name:s,error:p});return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"3rd party validation message when inputting invalid value:"}),e.jsx(h,{name:"example",onChange:s=>a(s.target.value),error:!n||u,validationCallback:m,value:t}),e.jsx("br",{}),e.jsx(N,{}),e.jsx("h4",{children:"Original validation message: "}),e.jsx(pe,{message:{heading:n,visible:!0}})]})},ne=()=>{const[t,a]=c.useState("123|m"),[n,i]=c.useState(""),[u,m]=c.useState("km"),s=()=>{m("ft"),i("placeholder"),a("|m")};return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Empty value case:"}),e.jsx(h,{name:"example",onChange:p=>a(p.target.value),value:t,allowEmpty:!0,placeholder:n,initUnit:u,unitkey:"length"}),e.jsx("br",{}),e.jsx(N,{}),e.jsx(d,{label:"Change value |m and unit ft",onClick:()=>s()})]})};var Ne,Ae,Pe;X.parameters={...X.parameters,docs:{...(Ne=X.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} />;
+}`,...(Pe=(Ae=X.parameters)==null?void 0:Ae.docs)==null?void 0:Pe.source}}};var De,Me,Fe;F.parameters={...F.parameters,docs:{...(De=F.parameters)==null?void 0:De.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(Fe=(Me=F.parameters)==null?void 0:Me.docs)==null?void 0:Fe.source}}};var _e,Oe,Be;_.parameters={..._.parameters,docs:{...(_e=_.parameters)==null?void 0:_e.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(Be=(Oe=_.parameters)==null?void 0:Oe.docs)==null?void 0:Be.source}}};var qe,Re,We;O.parameters={...O.parameters,docs:{...(qe=O.parameters)==null?void 0:qe.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(We=(Re=O.parameters)==null?void 0:Re.docs)==null?void 0:We.source}}};var Te,Le,$e;B.parameters={...B.parameters,docs:{...(Te=B.parameters)==null?void 0:Te.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...($e=(Le=B.parameters)==null?void 0:Le.docs)==null?void 0:$e.source}}};var He,Ke,ze;q.parameters={...q.parameters,docs:{...(He=q.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} />;
+}`,...(ze=(Ke=q.parameters)==null?void 0:Ke.docs)==null?void 0:ze.source}}};var Je,Ye,Ze;R.parameters={...R.parameters,docs:{...(Je=R.parameters)==null?void 0:Je.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(Ze=(Ye=R.parameters)==null?void 0:Ye.docs)==null?void 0:Ze.source}}};var Ge,Qe,Xe;E.parameters={...E.parameters,docs:{...(Ge=E.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} />;
+}`,...(Xe=(Qe=E.parameters)==null?void 0:Qe.docs)==null?void 0:Xe.source}}};var et,tt,nt;W.parameters={...W.parameters,docs:{...(et=W.parameters)==null?void 0:et.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(nt=(tt=W.parameters)==null?void 0:tt.docs)==null?void 0:nt.source}}};var at,lt,rt;T.parameters={...T.parameters,docs:{...(at=T.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} />;
+}`,...(rt=(lt=T.parameters)==null?void 0:lt.docs)==null?void 0:rt.source}}};var st,it,ut;L.parameters={...L.parameters,docs:{...(st=L.parameters)==null?void 0:st.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(ut=(it=L.parameters)==null?void 0:it.docs)==null?void 0:ut.source}}};var ot,dt,ct;$.parameters={...$.parameters,docs:{...(ot=$.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} />;
+}`,...(ct=(dt=$.parameters)==null?void 0:dt.docs)==null?void 0:ct.source}}};var mt,pt,gt;H.parameters={...H.parameters,docs:{...(mt=H.parameters)==null?void 0:mt.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} />
+    </>;
+}`,...(gt=(pt=H.parameters)==null?void 0:pt.docs)==null?void 0:gt.source}}};var ht,vt,ft;K.parameters={...K.parameters,docs:{...(ht=K.parameters)==null?void 0:ht.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(ft=(vt=K.parameters)==null?void 0:vt.docs)==null?void 0:ft.source}}};var Ct,bt,yt;z.parameters={...z.parameters,docs:{...(Ct=z.parameters)==null?void 0:Ct.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
+    }} />
+    </>;
+}`,...(yt=(bt=z.parameters)==null?void 0:bt.docs)==null?void 0:yt.source}}};var Ut,xt,Vt;ee.parameters={...ee.parameters,docs:{...(Ut=ee.parameters)==null?void 0:Ut.docs,source:{originalSource:`() => {
+  const width = '500px';
+  const [value, setValue] = useState<string | number>('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
+    }} />
+    </>;
+}`,...(Vt=(xt=ee.parameters)==null?void 0:xt.docs)==null?void 0:Vt.source}}};var jt,It,kt;te.parameters={...te.parameters,docs:{...(jt=te.parameters)==null?void 0:jt.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, message: string | null) => {
+    setValidation(message);
+    return {
+      name,
+      error: message
+    };
+  };
+  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
+    }} />
+    </>;
+}`,...(kt=(It=te.parameters)==null?void 0:It.docs)==null?void 0:kt.source}}};var St,wt,Et;ne.parameters={...ne.parameters,docs:{...(St=ne.parameters)==null?void 0:St.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()} />
+    </>;
+}`,...(Et=(wt=ne.parameters)==null?void 0:wt.docs)==null?void 0:Et.source}}};const Jn=["Default","InitUnit","Width","NoConversion","Small","Error","InternalValidationError","Disabled","DisabledNoConversion","DisabledUnitWithoutUnitKey","DisabledUnitWithUnitKey","DisabledWithEnabledUnitMenu","TestExternalStateChangeWithSynchronizedUnits","PredefinedOptionsMenu","TestEdgeCases","AutomaticValues","ValidationCallback","AllowEmptyPUI"];export{ne as AllowEmptyPUI,ee as AutomaticValues,X as Default,E as Disabled,W as DisabledNoConversion,L as DisabledUnitWithUnitKey,T as DisabledUnitWithoutUnitKey,$ as DisabledWithEnabledUnitMenu,q as Error,F as InitUnit,R as InternalValidationError,O as NoConversion,K as PredefinedOptionsMenu,B as Small,z as TestEdgeCases,H as TestExternalStateChangeWithSynchronizedUnits,te as ValidationCallback,_ as Width,Jn as __namedExportsOrder,zn as default};

package/dist/storybook/iframe.html

@@ -357,7 +357,7 @@
   }
 </script>
 
-  <script type="module" crossorigin src="./assets/iframe-c1f0de6b.js"></script>
+  <script type="module" crossorigin src="./assets/iframe-210f2f48.js"></script>
 </head>
 
 <body>