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

package/dist/storybook/assets/unit-input.stories-0eea1703.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 s,r as Xt}from"./index-57d7693e.js";import{c as en}from"./index-a80ed1cf.js";import{M as ke}from"./actions-2d4e1c8e.js";import{I as tn}from"./input-group-addon-f8f6683a.js";import{B as d}from"./button-74c97e4a.js";import{T as nn}from"./tooltip-23e84186.js";import{I as an}from"./input-group-20c3add3.js";import{S as N}from"./spacer-54db0620.js";import{T as ln}from"./text-ad1f5f1d.js";import{I as rn}from"./input-d68625a5.js";import{M as Se}from"./types-cc224262.js";import{l as w}from"./lodash-75c70a11.js";import{D as sn}from"./divider-182aa58c.js";import{R as Dt,C as me}from"./row-2299f0e7.js";import{F as I}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 un=()=>{const t=m.useRef(null);return m.useLayoutEffect(()=>{t.current&&(t.current(),t.current=null)}),n=>{t.current=n}},on=t=>{const a=m.useRef();return m.useEffect(()=>{a.current=t},[t]),a.current},dn=(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.`),s.unitFromQuantity(t)??"")};var b=(t=>(t.CUSTOM="custom",t.PREDEFINED="predefined",t))(b||{});const Mt=t=>t==="undefined"||t===void 0||t===""||t==="null"||t===null||t==="NaN"||isNaN(t),Ft=(t="",a,n="",i=!1)=>{if(i)return t;if(a&&!Mt(t))try{const c=s.isValueWithUnit(t)?t:s.withUnit(t,n),u=s.convertSamePrecision(c,a);return s.getValue(u)}catch{}return t},cn=t=>t?!!s.getUnit(t):!1,M=(t="",a,n,i)=>{if(i)return t;const c=cn(t)||s.isValueWithUnit(t),u=s.getValue(t);return Mt(u)?u:c?Ft(u,a,n,i):t},we=t=>w.isObject(t)&&!w.isArray(t)&&!w.isFunction(t)?w.get(t,"fieldName",""):typeof t=="string"?t:"",mn=t=>w.isObjectLike(t)&&w.has(t,"message"),pn=t=>typeof t=="string"?t:mn(t)?t.message:null;var gn=Xt();const hn=t=>t.search(RegExp(/(^0{2}\.)|(^0+[1-9])/g))===0,Ee=(t,a)=>{var j;const{allowEmpty:n=!1,autoValue:i,placeholder:c,disabledValidation:u=!1}=a||{},r=String(t);if(u||i||c)return null;const p=gn.isValueWithUnit(r)?s.getValue(r):r;if(n&&p==="")return null;if(hn(p))return"Invalid number format due to leading zeroes";const h=s.validateNumber(p);if(!h.valid){const le=((j=h==null?void 0:h.errors)==null?void 0:j[0])??null;return pn(le)}return null},vn="_predefinedMenuActive_1yvt4_1",fn={predefinedMenuActive:vn},g=({name:t,placeholder:a="",disabled:n=!1,disabledUnit:i=!1,error:c=null,left:u=!1,small:r=!1,width:p="100%",value:h,unitkey:j="",initUnit:le,noConversion:_t=!1,onChange:re=()=>{},onClick:bn=()=>{},onFocus:Ot=()=>{},onSwitchUnit:ge=()=>{},unitTemplate:he,doNotConvertValue:A=!1,testId:S,warning:Bt=null,predefinedOptions:x,initialPredefinedOption:qt=!1,shouldLinkAutomaticly:ve=!0,selectedPredefinedOptionKey:fe,validationCallback:Ce=()=>({name:"",error:null}),disabledValidation:be=!1,allowEmpty:ye=!1,autoValue:V})=>{typeof h=="number"&&(h=`${h}`);const Wt=un(),[se="",P=""]=h!==void 0?s.split(h):[],Ue=V?s.getUnit(V):"",Rt=m.useMemo(()=>dn(j,he),[j,he]),y=le||Rt||P,Tt=on(y),xe=M(h,y,P,A),Ve=M(V,y,Ue,A),Lt=xe!==""?{value:xe,unit:y}:Ve!==""?{value:Ve,unit:y}:{value:se,unit:P},[v,Y]=m.useState(Lt),[Kt,ie]=m.useState(null),[k,ue]=m.useState(qt?b.PREDEFINED:b.CUSTOM),oe=se===""&&V,D=x&&x.find(l=>{if(fe)return fe===l.valueKey;const o=s.isValueWithUnit(l.value)?s.getUnit(l.value):"";return s.withUnit(Ft(h,o),o)===l.value}),$t=()=>{if(j)try{const l=oe?V:h??"";let o=s.altUnitsList(l,j);return s.getValue(l)===""?o.map(f=>["",f[1]]):o}catch{return null}},Ht=l=>{const o=we(t),f=l.target,{value:U,selectionStart:X}=f,je=s.cleanNumStr(U.replaceAll(" ","").replaceAll("|","")),de=s.withUnit(je,(v==null?void 0:v.unit)||""),Zt=s.getValue(de),ce=Ee(Zt,{allowEmpty:ye,autoValue:V,placeholder:a,disabledValidation:be});if(ce===null){re({target:{value:de,name:o}});const[Gt,Qt]=s.split(de);Y({value:Gt,unit:Qt}),ie(null),Ce(o,null)}else Y({value:je,unit:v.unit}),ie(ce),Ce(o,ce);Wt(()=>{f.selectionStart=X,f.selectionEnd=X})},zt=(l,o)=>{o===v.unit||isNaN(Number(l))||(Y({value:l,unit:o}),ge&&ge(o))};m.useEffect(()=>{if(y){let f,U="";Tt!==y?(f=M(h,y,P,A),U=y):s.withUnit(v.value,v.unit)!==h&&(f=M(h,v.unit,P,A),U=v.unit),f!==void 0&&Y({value:f,unit:U}),x&&ue(D&&ve?b.PREDEFINED:b.CUSTOM)}const l=s.checkAndCleanDecimalComma(se),o=Ee(l,{allowEmpty:ye,autoValue:V,placeholder:a,disabledValidation:be});ie(o)},[y,h,c,ve]);const Z=$t(),G=s.label(v.unit)||v.unit||"",Jt=_t||!Z||Z&&Z.length===1,Ie=we(t);let Q;const Yt=l=>{const[o,f=""]=s.isValueWithUnit(l.value)?s.split(l.value):[l.value];return{type:Se.OPTION,inline:!0,onClick:()=>{s.validateNumber(o).valid&&!n&&(ue(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(ln,{children:l.label}),e.jsx(N,{width:"20px",height:"0"})]}),description:s.isValueWithUnit(l.value)?`${o} ${f}`:l.value,selected:D===l&&k===b.PREDEFINED}};if(Q=[{type:Se.OPTION,inline:!0,onClick:()=>{k!==b.CUSTOM&&!n&&re({target:{value:s.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(Yt);Q=[...Q,...l]}return e.jsx("div",{className:k===b.PREDEFINED?en(fn.predefinedMenuActive):"",children:e.jsxs(an,{small:r,width:p,children:[x&&e.jsx(nn,{text:k===b.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===b.PREDEFINED,icon:k===b.PREDEFINED?"link":"unlink"}),small:r,sections:Q}})}),e.jsx(rn,{type:"text",name:Ie,testId:S,disabled:n,placeholder:oe?M(V,v.unit,Ue,A):a,value:v.value,onChange:Ht,onFocus:Ot,error:c||Kt,warning:Bt,right:!u},Ie),G&&(Jt?e.jsx(tn,{groupOrder:"last",children:G}):e.jsx(ke,{maxHeight:380,groupOrder:"last",disabled:i,testId:S&&`${S}-menu`,menu:{label:G,trigger:"DropDownButton",small:r,sections:Z.map(([l,o,f])=>{const U=f||o||"";return{type:"Option",label:isNaN(Number(l))?"":l,inline:!0,onClick:X=>{X.stopPropagation(),zt(oe?"":l,o)},description:U,selected:U===G,testId:`${S}-unit-${U}`}})}}))]})})};try{g.displayName="UnitInput",g.__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:Cn}=__STORYBOOK_MODULE_ADDONS__,Qn={title:"Basic/UnitInput",component:g,args:{name:"example",unitkey:"length",value:"123|m"}},C=t=>{const[a,n]=Cn(),i=c=>{n({value:c.target.value})};return e.jsx(g,{...t,onChange:i})},ee=C.bind({}),F=C.bind({});F.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,r]=m.useState("ft");return e.jsxs(e.Fragment,{children:[e.jsx(d,{label:"Change initUnit",onClick:()=>r(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(g,{name:"example",onChange:p=>{n(p.target.value)},unitkey:"length",value:a,initUnit:u,onSwitchUnit:r}),e.jsx(N,{}),e.jsx(g,{name:"example2",onChange:p=>{c(p.target.value)},unitkey:"length",value:i,initUnit:u,onSwitchUnit:r}),e.jsx(sn,{}),e.jsx("h4",{children:"Without initUnit property (taken from the redux store)"}),e.jsx(g,{name:"example",onChange:p=>{n(p.target.value)},unitkey:"length",value:a,onSwitchUnit:r}),e.jsx(g,{name:"example2",onChange:p=>{c(p.target.value)},unitkey:"length",value:i,onSwitchUnit:r})]})};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(Dt,{children:[e.jsxs(me,{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(me,{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(g,{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(g,{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(g,{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}})]})},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(Dt,{children:e.jsxs(me,{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(g,{name:"example1",onChange:r=>n(r.target.value),value:a,unitkey:"length",width:t,placeholder:"value|unit",autoValue:u})}),e.jsx(I,{label:"Normal PUI (only auto)",children:e.jsx(g,{name:"example1",onChange:r=>n(r.target.value),value:a,unitkey:"length",width:t,autoValue:u})}),e.jsx(I,{label:"Empty PUI with autoValue",children:e.jsx(g,{name:"example1",onChange:r=>c(r.target.value),value:i,unitkey:"length",width:t,autoValue:u})}),e.jsx(I,{label:"Normal PUI (only placeholder)",children:e.jsx(g,{name:"example1",onChange:r=>n(r.target.value),value:a,unitkey:"length",width:t,placeholder:"Placeholder test"})}),e.jsx(I,{label:"Normal PUI (placeholder + allowEmpty)",children:e.jsx(g,{name:"example1",onChange:r=>n(r.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}})]})};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=(r,p)=>(i(p),{name:r,error:p});return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"3rd party validation message when inputting invalid value:"}),e.jsx(g,{name:"example",onChange:r=>a(r.target.value),error:!n||c,validationCallback:u,value:t}),e.jsx("br",{}),e.jsx(N,{}),e.jsx("h4",{children:"Original validation message: "}),e.jsx(pe,{message:{heading:n,visible:!0}})]})},ae=()=>{const[t,a]=m.useState("123|m"),[n,i]=m.useState(""),[c,u]=m.useState("km"),r=()=>{u("ft"),i("placeholder"),a("|m")};return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Empty value case:"}),e.jsx(g,{name:"example",onChange:p=>a(p.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:()=>r()})]})};var Ne,Ae,Pe;ee.parameters={...ee.parameters,docs:{...(Ne=ee.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=ee.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,We,Re;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} />;
+}`,...(Re=(We=O.parameters)==null?void 0:We.docs)==null?void 0:Re.source}}};var Te,Le,Ke;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} />;
+}`,...(Ke=(Le=B.parameters)==null?void 0:Le.docs)==null?void 0:Ke.source}}};var $e,He,ze;q.parameters={...q.parameters,docs:{...($e=q.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=q.parameters)==null?void 0:He.docs)==null?void 0:ze.source}}};var Je,Ye,Ze;W.parameters={...W.parameters,docs:{...(Je=W.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=W.parameters)==null?void 0:Ye.docs)==null?void 0:Ze.source}}};var Ge,Qe,Xe;R.parameters={...R.parameters,docs:{...(Ge=R.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=R.parameters)==null?void 0:Qe.docs)==null?void 0:Xe.source}}};var et,tt,nt;E.parameters={...E.parameters,docs:{...(et=E.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=E.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;K.parameters={...K.parameters,docs:{...(ot=K.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=K.parameters)==null?void 0:dt.docs)==null?void 0:ct.source}}};var mt,pt,gt;$.parameters={...$.parameters,docs:{...(mt=$.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=$.parameters)==null?void 0:pt.docs)==null?void 0:gt.source}}};var ht,vt,ft;H.parameters={...H.parameters,docs:{...(ht=H.parameters)==null?void 0:ht.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} />
+    </>;
+}`,...(ft=(vt=H.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:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(yt=(bt=z.parameters)==null?void 0:bt.docs)==null?void 0:yt.source}}};var Ut,xt,Vt;J.parameters={...J.parameters,docs:{...(Ut=J.parameters)==null?void 0:Ut.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
+    }} />
+    </>;
+}`,...(Vt=(xt=J.parameters)==null?void 0:xt.docs)==null?void 0:Vt.source}}};var It,jt,kt;te.parameters={...te.parameters,docs:{...(It=te.parameters)==null?void 0:It.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
+    }} />
+    </>;
+}`,...(kt=(jt=te.parameters)==null?void 0:jt.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|%');
+  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
+    }} />
+    </>;
+}`,...(Et=(wt=ne.parameters)==null?void 0:wt.docs)==null?void 0:Et.source}}};var Nt,At,Pt;ae.parameters={...ae.parameters,docs:{...(Nt=ae.parameters)==null?void 0:Nt.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()} />
+    </>;
+}`,...(Pt=(At=ae.parameters)==null?void 0:At.docs)==null?void 0:Pt.source}}};const Xn=["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,F 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,Xn as __namedExportsOrder,Qn as default,_ as notKnownUnit};

package/dist/storybook/assets/unit-input.stories-c251e2c8.css

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

package/dist/storybook/iframe.html

@@ -357,7 +357,7 @@
   }
 </script>
 
-  <script type="module" crossorigin src="./assets/iframe-615023be.js"></script>
+  <script type="module" crossorigin src="./assets/iframe-5eee0790.js"></script>
 </head>
 
 <body>