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

package/dist/storybook/assets/unit-input.stories-035fa696.js

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

package/dist/storybook/iframe.html

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