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

package/dist/storybook/assets/tree.stories-b16724d6.js

@@ -0,0 +1,123 @@
+import{j as r}from"./jsx-runtime-f961835c.js";import{r as n}from"./index-f80c8c95.js";import{T as re,a as se}from"./icon-e9cbb4d7.js";import{T as h}from"./tree-a5de7d3a.js";import{T as oe}from"./text-ad1f5f1d.js";import{B as ie}from"./button-74c97e4a.js";import"./index-a80ed1cf.js";import"./inheritsLoose-d4851ab8.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./disabled-context-d654f6ff.js";import"./index-54f0d271.js";import"./common-types-2c81813f.js";import"./meta-content-6f132e03.js";import"./heading-d29eb744.js";import"./help-icon-d4189b1b.js";import"./tooltip-23e84186.js";import"./index-3d476d02.js";import"./actions-2d4e1c8e.js";import"./lodash-75c70a11.js";import"./types-cc224262.js";import"./types-332ceaf3.js";import"./badge-20e7ee0b.js";import"./redux-10ee6be7.js";import"./objectSpread2-fdee9b6d.js";import"./spinner-a81ebe38.js";const s={name:"Animals",items:[{id:1,parent:0,droppable:!0,name:"Mammals",onClick:()=>console.log("Test")},{id:2,parent:1,droppable:!0,name:"Cats"},{id:3,parent:1,droppable:!0,name:"Dogs"},{id:4,parent:0,droppable:!0,name:"Amphibians"},{id:5,parent:4,droppable:!0,name:"Frogs"},{id:6,parent:0,droppable:!0,name:"Reptiles",active:!0}]},pe={...s,header:{actions:[{label:"Add",primary:!0,icon:"add",onClick:()=>{}}]},items:s.items.map(e=>({...e,actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]}))},me={...s,items:s.items.map(e=>({...e,droppable:e.parent===0,details:e.parent===0?"Droppable":"Not droppable"}))},de={...s,items:s.items.map(e=>({...e,parent:0,droppable:!1}))},He={title:"Basic/Tree",component:h,args:{list:s}},a=e=>r.jsx(h,{...e}),T=a.bind({}),d=a.bind({});d.args={list:pe};const l=a.bind({});l.args={draggable:!0};const p=a.bind({});p.args={draggable:!0,list:me};p.parameters={docs:{description:{story:"Use the `droppable` prop to specify which items can have other items dropped into them."}}};const c=a.bind({});c.args={draggable:!0,list:de};const u=a.bind({});u.args={isInitialOpen:!0};const g=a.bind({});g.args={onChangeOpen:e=>console.log("onChangeOpen here",e)};const C=()=>{const[e,x]=n.useState([{id:1,parent:0,droppable:!0,name:"Mammals"},{id:2,parent:1,droppable:!0,name:"Cats"},{id:3,parent:1,droppable:!0,name:"Dogs"},{id:4,parent:0,droppable:!0,name:"Amphibians"},{id:5,parent:4,droppable:!0,name:"Frogs"},{id:6,parent:0,droppable:!0,name:"Reptiles"}]),o=()=>{const f={id:Math.max(...e.map(L=>L.id))+1,parent:0,droppable:!0,name:"New Item"};x([f].concat(e))},I={name:"Animals",actions:[{label:"Add",primary:!0,icon:"add",onClick:()=>o()}],items:e};return r.jsx(h,{list:I,draggable:!0,onListReorder:x})},le=[{id:1,parent:0,droppable:!0,name:"Mammals",onClick:()=>console.log("Test")},{id:4,parent:0,droppable:!0,name:"Amphibians"},{id:6,parent:0,droppable:!0,name:"Reptiles",active:!0}],ce=[{id:2,parent:1,droppable:!0,name:"Cats"},{id:3,parent:1,droppable:!0,name:"Dogs"},{id:5,parent:4,droppable:!0,name:"Frogs"}],S=()=>{const[e,x]=n.useState(le),[o,I]=n.useState({}),f=n.useRef(0);n.useEffect(()=>()=>clearTimeout(f.current),[]);const L=t=>t.parent===0,te=n.useCallback((t,i)=>{I(m=>({...m,[t.id]:{isOpen:i,isLoading:i}})),i&&(console.log("Loading"),f.current=window.setTimeout(()=>{console.log("Loaded"),x(m=>m.filter(A=>A.parent!==t.id).concat(ce.filter(A=>A.parent===t.id))),I(m=>({...m,[t.id]:{isOpen:i,isLoading:!1}}))},1e3))},[]),ae=n.useMemo(()=>Object.keys(o).filter(t=>o[+t].isOpen).map(t=>{const i=o[+t];return{id:`${t}_extra`,parent:+t,name:i.isLoading?r.jsx(oe,{muted:!0,children:"Loading..."}):r.jsx(ie,{label:"Load more...",onClick:()=>console.log(`Load more for parent ${t}`)})}}),[o]),ne={name:"Animals",items:e.concat(ae)};return r.jsx(h,{list:ne,itemHasChild:L,onItemToggle:te})},b=a.bind({});b.args={icons:{expand:r.jsx(re,{}),collapse:r.jsx(se,{})}};var j,O,k;T.parameters={...T.parameters,docs:{...(j=T.parameters)==null?void 0:j.docs,source:{originalSource:`args => <Tree
+// eslint-disable-next-line react/jsx-props-no-spreading
+{...args} />`,...(k=(O=T.parameters)==null?void 0:O.docs)==null?void 0:k.source}}};var y,D,R;d.parameters={...d.parameters,docs:{...(y=d.parameters)==null?void 0:y.docs,source:{originalSource:`args => <Tree
+// eslint-disable-next-line react/jsx-props-no-spreading
+{...args} />`,...(R=(D=d.parameters)==null?void 0:D.docs)==null?void 0:R.source}}};var w,M,F;l.parameters={...l.parameters,docs:{...(w=l.parameters)==null?void 0:w.docs,source:{originalSource:`args => <Tree
+// eslint-disable-next-line react/jsx-props-no-spreading
+{...args} />`,...(F=(M=l.parameters)==null?void 0:M.docs)==null?void 0:F.source}}};var v,E,B;p.parameters={...p.parameters,docs:{...(v=p.parameters)==null?void 0:v.docs,source:{originalSource:`args => <Tree
+// eslint-disable-next-line react/jsx-props-no-spreading
+{...args} />`,...(B=(E=p.parameters)==null?void 0:E.docs)==null?void 0:B.source}}};var N,_,H;c.parameters={...c.parameters,docs:{...(N=c.parameters)==null?void 0:N.docs,source:{originalSource:`args => <Tree
+// eslint-disable-next-line react/jsx-props-no-spreading
+{...args} />`,...(H=(_=c.parameters)==null?void 0:_.docs)==null?void 0:H.source}}};var $,U,z;u.parameters={...u.parameters,docs:{...($=u.parameters)==null?void 0:$.docs,source:{originalSource:`args => <Tree
+// eslint-disable-next-line react/jsx-props-no-spreading
+{...args} />`,...(z=(U=u.parameters)==null?void 0:U.docs)==null?void 0:z.source}}};var G,P,q;g.parameters={...g.parameters,docs:{...(G=g.parameters)==null?void 0:G.docs,source:{originalSource:`args => <Tree
+// eslint-disable-next-line react/jsx-props-no-spreading
+{...args} />`,...(q=(P=g.parameters)==null?void 0:P.docs)==null?void 0:q.source}}};var J,K,Q;C.parameters={...C.parameters,docs:{...(J=C.parameters)==null?void 0:J.docs,source:{originalSource:`() => {
+  const [items, setItems] = useState([{
+    id: 1,
+    parent: 0,
+    droppable: true,
+    name: 'Mammals'
+  }, {
+    id: 2,
+    parent: 1,
+    droppable: true,
+    name: 'Cats'
+  }, {
+    id: 3,
+    parent: 1,
+    droppable: true,
+    name: 'Dogs'
+  }, {
+    id: 4,
+    parent: 0,
+    droppable: true,
+    name: 'Amphibians'
+  }, {
+    id: 5,
+    parent: 4,
+    droppable: true,
+    name: 'Frogs'
+  }, {
+    id: 6,
+    parent: 0,
+    droppable: true,
+    name: 'Reptiles'
+  }]);
+  const addItem = () => {
+    const newItem = {
+      id: Math.max(...items.map(item => item.id)) + 1,
+      parent: 0,
+      droppable: true,
+      name: 'New Item'
+    };
+    setItems([newItem].concat(items));
+  };
+  const list = {
+    name: 'Animals',
+    actions: [{
+      label: 'Add',
+      primary: true,
+      icon: 'add',
+      onClick: () => addItem()
+    }],
+    items
+  };
+  return <Tree list={list} draggable onListReorder={setItems} />;
+}`,...(Q=(K=C.parameters)==null?void 0:K.docs)==null?void 0:Q.source}}};var V,W,X;S.parameters={...S.parameters,docs:{...(V=S.parameters)==null?void 0:V.docs,source:{originalSource:`() => {
+  const [items, setItems] = useState<Item[]>(itemsAnimalClasses);
+  const [itemsState, setItemsState] = useState<Record<number, {
+    isOpen: boolean;
+    isLoading: boolean;
+  }>>({});
+  const timerRef = useRef<number>(0);
+  useEffect(() => {
+    // Clear the timeout when the component unmounts
+    return () => clearTimeout(timerRef.current);
+  }, []);
+  const itemHasChild = (data: NodeModel<any>): boolean => {
+    return data.parent === 0;
+  };
+  const onItemToggle = useCallback((item: NodeModel<any>, isOpen: boolean) => {
+    // simulate action that is loading items
+    setItemsState(prevItemsState => ({
+      ...prevItemsState,
+      [item.id]: {
+        isOpen,
+        isLoading: isOpen
+      }
+    }));
+    if (!isOpen) return;
+    console.log('Loading');
+    timerRef.current = window.setTimeout(() => {
+      // Use window.setTimeout for correct type
+      console.log('Loaded');
+      setItems(currentItems => currentItems.filter(existingItem => existingItem.parent !== item.id) // Use item.id here
+      .concat(itemsAnimalGroups.filter(groupItem => groupItem.parent === item.id)) // And here
+      );
+
+      setItemsState(prevItemsState => ({
+        ...prevItemsState,
+        [item.id]: {
+          isOpen,
+          isLoading: false
+        }
+      }));
+    }, 1000);
+  }, []);
+  const extraItems = useMemo(() => Object.keys(itemsState).filter(id => itemsState[+id].isOpen).map(id => {
+    const state = itemsState[+id];
+    return {
+      id: \`\${id}_extra\`,
+      parent: +id,
+      name: state.isLoading ? <Text muted>Loading...</Text> : <Button label="Load more..." onClick={() => console.log(\`Load more for parent \${id}\`)} />
+    };
+  }), [itemsState]);
+  const list = {
+    name: 'Animals',
+    items: items.concat(extraItems)
+  };
+  return <Tree list={list} itemHasChild={itemHasChild} onItemToggle={onItemToggle} />;
+}`,...(X=(W=S.parameters)==null?void 0:W.docs)==null?void 0:X.source}}};var Y,Z,ee;b.parameters={...b.parameters,docs:{...(Y=b.parameters)==null?void 0:Y.docs,source:{originalSource:`args => <Tree
+// eslint-disable-next-line react/jsx-props-no-spreading
+{...args} />`,...(ee=(Z=b.parameters)==null?void 0:Z.docs)==null?void 0:ee.source}}};const $e=["Default","Actions","Draggable","Droppable","Flat","ExpandedByDefault","OnOpenChangeCallback","Managed","LazyLoading","CustomIcons"];export{d as Actions,b as CustomIcons,T as Default,l as Draggable,p as Droppable,u as ExpandedByDefault,c as Flat,S as LazyLoading,C as Managed,g as OnOpenChangeCallback,$e as __namedExportsOrder,He as default};

package/dist/storybook/assets/unit-input-9bf08434.js

@@ -0,0 +1 @@
+import{j as d}from"./jsx-runtime-f961835c.js";import{r as g}from"./index-f80c8c95.js";import{d as n,r as De}from"./index-57d7693e.js";import{c as we}from"./index-a80ed1cf.js";import{M as te}from"./actions-2d4e1c8e.js";import{I as Ce}from"./input-group-addon-f8f6683a.js";import{B as xe}from"./button-74c97e4a.js";import{T as Me}from"./tooltip-23e84186.js";import{I as Pe}from"./input-group-20c3add3.js";import{S as Se}from"./spacer-54db0620.js";import{T as Ae}from"./text-ad1f5f1d.js";import{I as Oe}from"./input-d68625a5.js";import{M as ne}from"./types-cc224262.js";import{l as b}from"./lodash-75c70a11.js";const Re=()=>{const e=g.useRef(null);return g.useLayoutEffect(()=>{e.current&&(e.current(),e.current=null)}),l=>{e.current=l}},je=e=>{const i=g.useRef();return g.useEffect(()=>{i.current=e},[e]),i.current},Fe=(e,i)=>{const l=i==null?void 0:i[e];return l||(console.log(`Warning: 'unitTemplate' does not define a preferred unit for '${e}'. Defaulting to standard unit.`),n.unitFromQuantity(e)??"")};var o=(e=>(e.CUSTOM="custom",e.PREDEFINED="predefined",e))(o||{});const se=e=>e==="undefined"||e===void 0||e===""||e==="null"||e===null||e==="NaN"||isNaN(e),ue=(e="",i,l="",v=!1)=>{if(v)return e;if(i&&!se(e))try{const p=n.isValueWithUnit(e)?e:n.withUnit(e,l),m=n.convertSamePrecision(p,i);return n.getValue(m)}catch{}return e},Te=e=>e?!!n.getUnit(e):!1,C=(e="",i,l,v)=>{if(v)return e;const p=Te(e)||n.isValueWithUnit(e),m=n.getValue(e);return se(m)?m:p?ue(m,i,l,v):e},ie=e=>b.isObject(e)&&!b.isArray(e)&&!b.isFunction(e)?b.get(e,"fieldName",""):typeof e=="string"?e:"",ke=e=>b.isObjectLike(e)&&b.has(e,"message"),We=e=>typeof e=="string"?e:ke(e)?e.message:null;var _e=De();const Le=e=>e.search(RegExp(/(^0{2}\.)|(^0+[1-9])/g))===0,re=(e,i)=>{var V;const{allowEmpty:l=!1,autoValue:v,placeholder:p,disabledValidation:m=!1}=i||{},y=String(e);if(m||v||p)return null;const N=_e.isValueWithUnit(y)?n.getValue(y):y;if(l&&N==="")return null;if(Le(N))return"Invalid number format due to leading zeroes";const a=n.validateNumber(N);if(!a.valid){const O=((V=a==null?void 0:a.errors)==null?void 0:V[0])??null;return We(O)}return null},ae=(e="")=>{var i;return(i=n.KNOWN_UNITS)==null?void 0:i.includes(e)},$e=(e,i)=>{const l=n.getUnit(e||"");return ae(i)&&ae(l)},He="_predefinedMenuActive_1yvt4_1",Ke={predefinedMenuActive:He},le=({name:e,placeholder:i="",disabled:l=!1,disabledUnit:v=!1,error:p=null,left:m=!1,small:y=!1,width:N="100%",value:a,unitkey:V="",initUnit:O,noConversion:oe=!1,onChange:R=()=>{},onClick:Be=()=>{},onFocus:de=()=>{},onSwitchUnit:L=()=>{},unitTemplate:$,doNotConvertValue:q=!1,testId:I,warning:ce=null,predefinedOptions:U,initialPredefinedOption:fe=!1,shouldLinkAutomaticly:H=!0,selectedPredefinedOptionKey:K,validationCallback:B=()=>({name:"",error:null}),disabledValidation:G=!1,allowEmpty:z=!1,autoValue:E})=>{typeof a=="number"&&(a=`${a}`);const pe=Re(),[j="",D=""]=a!==void 0?n.split(a):[],Q=E?n.getUnit(E):"",Z=g.useMemo(()=>Fe(V,$),[V,$]),me=$e(a,Z),c=O||Z||D,ge=je(c),J=C(a,c,D,q),X=C(E,c,Q,q),ve=J!==""?{value:J,unit:c}:X!==""?{value:X,unit:c}:{value:j,unit:D},[s,x]=g.useState(ve),[ye,F]=g.useState(null),[h,T]=g.useState(fe?o.PREDEFINED:o.CUSTOM),k=j===""&&E,w=U&&U.find(t=>{if(K)return K===t.valueKey;const r=n.isValueWithUnit(t.value)?n.getUnit(t.value):"";return n.withUnit(ue(a,r),r)===t.value}),Ue=()=>{if(V)try{const t=k?E:a??"";let r=n.altUnitsList(t,V);return n.getValue(t)===""?r.map(u=>["",u[1]]):r}catch{return null}},Ee=t=>{const r=ie(e),u=t.target,{value:f,selectionStart:A}=u,ee=n.cleanNumStr(f.replaceAll(" ","").replaceAll("|","")),W=n.withUnit(ee,(s==null?void 0:s.unit)||""),be=n.getValue(W),_=re(be,{allowEmpty:z,autoValue:E,placeholder:i,disabledValidation:G});if(_===null){R({target:{value:W,name:r}});const[Ne,qe]=n.split(W);x({value:Ne,unit:qe}),F(null),B(r,null)}else x({value:ee,unit:s.unit}),F(_),B(r,_);pe(()=>{u.selectionStart=A,u.selectionEnd=A})},Ve=(t,r)=>{r===s.unit||isNaN(Number(t))||(x({value:t,unit:r}),L&&L(r))};g.useEffect(()=>{if(c){let u,f="";ge!==c?(u=C(a,c,D,q),f=c):n.withUnit(s.value,s.unit)!==a&&(u=C(a,s.unit,D,q),f=s.unit),u!==void 0&&x({value:u,unit:f}),U&&T(w&&H?o.PREDEFINED:o.CUSTOM)}const t=n.checkAndCleanDecimalComma(j),r=re(t,{allowEmpty:z,autoValue:E,placeholder:i,disabledValidation:G});F(r)},[c,a,p,H]);const M=Ue(),P=n.label(s.unit)||s.unit||"",he=oe||!M||M&&M.length===1,Y=ie(e);let S;const Ie=t=>{const[r,u=""]=n.isValueWithUnit(t.value)?n.split(t.value):[t.value];return{type:ne.OPTION,inline:!0,onClick:()=>{n.validateNumber(r).valid&&!l&&(T(o.PREDEFINED),R({target:{value:t.value,name:typeof e=="string"?e:(e==null?void 0:e.fieldName)||"",predefinedSelected:!0,predefinedOption:t}}))},label:d.jsxs(d.Fragment,{children:[d.jsx(Ae,{children:t.label}),d.jsx(Se,{width:"20px",height:"0"})]}),description:n.isValueWithUnit(t.value)?`${r} ${u}`:t.value,selected:w===t&&h===o.PREDEFINED}};if(S=[{type:ne.OPTION,inline:!0,onClick:()=>{h!==o.CUSTOM&&!l&&R({target:{value:n.withUnit(s.value,s.unit),name:typeof e=="string"?e:(e==null?void 0:e.fieldName)||""}})},label:"Custom",selected:h===o.CUSTOM}],U!=null&&U.length){const t=U.map(Ie);S=[...S,...t]}return d.jsx("div",{className:h===o.PREDEFINED?we(Ke.predefinedMenuActive):"",children:d.jsxs(Pe,{small:y,width:N,children:[U&&d.jsx(Me,{text:h===o.PREDEFINED?w==null?void 0:w.label:"",children:d.jsx(te,{maxHeight:380,groupOrder:"first",testId:I&&`${I}-predefined-menu`,disabled:l,menu:{colored:!0,trigger:"Component",component:d.jsx(xe,{groupOrder:"first",active:h===o.PREDEFINED,icon:h===o.PREDEFINED?"link":"unlink"}),small:y,sections:S}})}),d.jsx(Oe,{type:"text",name:Y,testId:I,disabled:l,placeholder:k?C(E,s.unit,Q,q):i,value:s.value,onChange:Ee,onFocus:de,error:p||ye,warning:ce,right:!m},Y),P&&(he||!me?d.jsx(Ce,{groupOrder:"last",children:P}):d.jsx(te,{maxHeight:380,groupOrder:"last",disabled:v,testId:I&&`${I}-menu`,menu:{label:P,trigger:"DropDownButton",small:y,sections:M.map(([t,r,u])=>{const f=u||r||"";return{type:"Option",label:isNaN(Number(t))?"":t,inline:!0,onClick:A=>{A.stopPropagation(),Ve(k?"":t,r)},description:f,selected:f===P,testId:`${I}-unit-${f}`}})}}))]})})};try{le.displayName="UnitInput",le.__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{}export{le as U};

package/dist/storybook/assets/unit-input.stories-65646cf3.js

@@ -0,0 +1,273 @@
+import{j as e}from"./jsx-runtime-f961835c.js";import{r as d}from"./index-f80c8c95.js";import{U as i}from"./unit-input-9bf08434.js";import{B as l}from"./button-74c97e4a.js";import{S as p}from"./spacer-54db0620.js";import{D as Je}from"./divider-182aa58c.js";import{R as ze,C as F}from"./row-2299f0e7.js";import{F as h}from"./field-a094cd72.js";import{M as _}from"./message-dabd76a8.js";import"./index-57d7693e.js";import"./index-54f0d271.js";import"./index-a80ed1cf.js";import"./actions-2d4e1c8e.js";import"./lodash-75c70a11.js";import"./common-types-2c81813f.js";import"./disabled-context-d654f6ff.js";import"./tooltip-23e84186.js";import"./index-3d476d02.js";import"./icon-e9cbb4d7.js";import"./inheritsLoose-d4851ab8.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./types-cc224262.js";import"./types-332ceaf3.js";import"./badge-20e7ee0b.js";import"./input-group-addon-f8f6683a.js";import"./input-group-20c3add3.js";import"./text-ad1f5f1d.js";import"./input-d68625a5.js";import"./spinner-a81ebe38.js";import"./styled-components.browser.esm-416d73e5.js";import"./label-13d490a3.js";import"./help-icon-d4189b1b.js";const{useArgs:Ye}=__STORYBOOK_MODULE_ADDONS__,Ia={title:"Basic/UnitInput",component:i,args:{name:"example",unitkey:"length",value:"123|m"}},u=s=>{const[t,a]=Ye(),r=o=>{a({value:o.target.value})};return e.jsx(i,{...s,onChange:r})},N=u.bind({}),v=u.bind({});v.args={initUnit:"ft",unitTemplate:{length:"ft"}};const C=u.bind({});C.args={value:'123|"',unitkey:'"'};const b=u.bind({});b.args={width:"180px"};const x=u.bind({});x.args={noConversion:!0};const U=u.bind({});U.args={small:!0};const y=u.bind({});y.args={error:"Error message goes here"};const j=u.bind({});j.args={value:"asas123asd|%"};const m=u.bind({});m.args={disabled:!0,disabledUnit:!0};m.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 k=u.bind({});k.args={disabled:!0,disabledUnit:!0,noConversion:!0};const V=u.bind({});V.args={disabledUnit:!0,unitkey:void 0};const I=u.bind({});I.args={disabledUnit:!0,unitkey:"length"};const S=u.bind({});S.args={disabledUnit:!1,disabled:!0};const f=s=>{const[t,a]=d.useState("123|m"),[r,o]=d.useState("223|m"),[g,n]=d.useState("ft");return e.jsxs(e.Fragment,{children:[e.jsx(l,{label:"Change initUnit",onClick:()=>n(g==="m"?"ft":"m")}),e.jsx(p,{}),e.jsx(l,{label:"Change value",onClick:()=>a(t==="123|m"?"456|m":"123|m")}),e.jsx(p,{}),e.jsx(i,{name:"example",onChange:c=>{a(c.target.value)},unitkey:"length",value:t,initUnit:g,onSwitchUnit:n}),e.jsx(p,{}),e.jsx(i,{name:"example2",onChange:c=>{o(c.target.value)},unitkey:"length",value:r,initUnit:g,onSwitchUnit:n}),e.jsx(Je,{}),e.jsx("h4",{children:"Without initUnit property (taken from the redux store)"}),e.jsx(i,{name:"example",onChange:c=>{a(c.target.value)},unitkey:"length",value:t,onSwitchUnit:n}),e.jsx(i,{name:"example2",onChange:c=>{o(c.target.value)},unitkey:"length",value:r,onSwitchUnit:n})]})};f.parameters={docs:{description:{story:"[OW-4380](https://oliasoft.atlassian.net/browse/OW-4380?atlOrigin=eyJpIjoiMmM1N2RkNWU3Mjk5NDYxY2E0YzhkMzk5ZTVmZTJhMjciLCJwIjoiaiJ9)"}}};const w=u.bind({});w.args={predefinedOptions:[{label:"bottom of casing",value:"12|km"},{label:"mud weight at shoe depth",value:"8|mm"}]};const A=()=>{const s="500px",[t,a]=d.useState(void 0);return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Different edge cases such as +/- infinity, undefined, NaN, null:"}),e.jsxs(ze,{children:[e.jsxs(F,{width:"25%",children:[e.jsx(l,{label:"Change value infinity",onClick:()=>a(1/0)}),e.jsx("br",{}),e.jsx(l,{label:"Change value -infinity",onClick:()=>a(-1/0)}),e.jsx("br",{}),e.jsx(l,{label:"Change value null",onClick:()=>a(null)}),e.jsx("br",{}),e.jsx(l,{label:"Change value - undefined",onClick:()=>a(void 0)}),e.jsx("br",{}),e.jsx(l,{label:"Change value - NaN",onClick:()=>a(NaN)}),e.jsx("br",{}),e.jsx(l,{label:"Change value - nothing (empty)",onClick:()=>a(void 0)}),e.jsx("br",{}),e.jsx(l,{label:"Change value - empty string",onClick:()=>a("")})]}),e.jsxs(F,{width:"25%",children:[e.jsx(l,{label:"Change value infinity|m",onClick:()=>a("Infinity|m")}),e.jsx("br",{}),e.jsx(l,{label:"Change value -infinity|m",onClick:()=>a("-Infinity|m")}),e.jsx("br",{}),e.jsx(l,{label:"Change value null|m",onClick:()=>a(null+"|m")}),e.jsx("br",{}),e.jsx(l,{label:"Change value - undefined|m",onClick:()=>a(void 0+"|m")}),e.jsx("br",{}),e.jsx(l,{label:"Change value - NaN|m",onClick:()=>a("NaN|m")}),e.jsx("br",{}),e.jsx(l,{label:"Change value - nothing (empty)|m",onClick:()=>a("|m")})]})]}),e.jsx("br",{}),e.jsx(h,{label:"Normal PUI",children:e.jsx(i,{name:"example1",onChange:r=>a(r.target.value),value:t,unitkey:"length",width:s,placeholder:"value|unit"})}),e.jsx(h,{label:"Disabled validation",children:e.jsx(i,{name:"example2",onChange:r=>a(r.target.value),value:t,unitkey:"length",disabledValidation:!0,width:s})}),e.jsx(h,{label:"Disabled validation and manual error",children:e.jsx(i,{name:"example3",onChange:r=>a(r.target.value),value:t,unitkey:"length",error:"test",disabledValidation:!0,width:s})}),e.jsx(_,{message:{heading:"Current value inside PUI: "+t,visible:!0}})]})},P=()=>{const s="500px",[t,a]=d.useState("1|m"),[r,o]=d.useState("|m"),g="123|km";return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Different cases for automatic (placeholder) values:"}),e.jsx(ze,{children:e.jsxs(F,{width:"25%",children:[e.jsx(l,{label:"Change value to ''",onClick:()=>a("")}),e.jsx("br",{}),e.jsx(l,{label:"Change value to 1",onClick:()=>a("1")}),e.jsx("br",{}),e.jsx(l,{label:"Change value to 1|m",onClick:()=>a("1|m")}),e.jsx("br",{}),e.jsx(l,{label:"Change value to |m - empty value",onClick:()=>a("|m")})]})}),e.jsx("br",{}),e.jsx(h,{label:"Normal PUI (placeholder + auto)",children:e.jsx(i,{name:"example1",onChange:n=>a(n.target.value),value:t,unitkey:"length",width:s,placeholder:"value|unit",autoValue:g})}),e.jsx(h,{label:"Normal PUI (only auto)",children:e.jsx(i,{name:"example1",onChange:n=>a(n.target.value),value:t,unitkey:"length",width:s,autoValue:g})}),e.jsx(h,{label:"Empty PUI with autoValue",children:e.jsx(i,{name:"example1",onChange:n=>o(n.target.value),value:r,unitkey:"length",width:s,autoValue:g})}),e.jsx(h,{label:"Normal PUI (only placeholder)",children:e.jsx(i,{name:"example1",onChange:n=>a(n.target.value),value:t,unitkey:"length",width:s,placeholder:"Placeholder test"})}),e.jsx(h,{label:"Normal PUI (placeholder + allowEmpty)",children:e.jsx(i,{name:"example1",onChange:n=>a(n.target.value),value:t,unitkey:"length",width:s,placeholder:"Placeholder test",allowEmpty:!0})}),e.jsx(_,{message:{heading:"Current value inside PUI: "+t,visible:!0}})]})};A.parameters={docs:{description:{story:"[OW-8884](https://oliasoft.atlassian.net/browse/OW-8884)"}}};const B=()=>{const[s,t]=d.useState("123|%"),[a,r]=d.useState(null),o="This should be visible when an error appears",g=(n,c)=>(r(c),{name:n,error:c});return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"3rd party validation message when inputting invalid value:"}),e.jsx(i,{name:"example",onChange:n=>t(n.target.value),error:!a||o,validationCallback:g,value:s}),e.jsx("br",{}),e.jsx(p,{}),e.jsx("h4",{children:"Original validation message: "}),e.jsx(_,{message:{heading:a,visible:!0}})]})},E=()=>{const[s,t]=d.useState("123|m"),[a,r]=d.useState(""),[o,g]=d.useState("km"),n=()=>{g("ft"),r("placeholder"),t("|m")};return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Empty value case:"}),e.jsx(i,{name:"example",onChange:c=>t(c.target.value),value:s,allowEmpty:!0,placeholder:a,initUnit:o,unitkey:"length"}),e.jsx("br",{}),e.jsx(p,{}),e.jsx(l,{label:"Change value |m and unit ft",onClick:()=>n()})]})},D=()=>{const[s,t]=d.useState("123|m"),[a,r]=d.useState("m");return e.jsxs(e.Fragment,{children:[e.jsx(i,{name:"example",onChange:o=>t(o.target.value),value:s,initUnit:a,unitkey:"length",onSwitchUnit:r}),e.jsx(p,{}),e.jsx(i,{name:"example",onChange:o=>t(o.target.value),value:s,initUnit:a,unitkey:"length",onSwitchUnit:r})]})};var M,W,O;N.parameters={...N.parameters,docs:{...(M=N.parameters)==null?void 0:M.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(O=(W=N.parameters)==null?void 0:W.docs)==null?void 0:O.source}}};var T,R,K;v.parameters={...v.parameters,docs:{...(T=v.parameters)==null?void 0:T.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(K=(R=v.parameters)==null?void 0:R.docs)==null?void 0:K.source}}};var z,J,Y;C.parameters={...C.parameters,docs:{...(z=C.parameters)==null?void 0:z.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(Y=(J=C.parameters)==null?void 0:J.docs)==null?void 0:Y.source}}};var L,Z,q;b.parameters={...b.parameters,docs:{...(L=b.parameters)==null?void 0:L.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(q=(Z=b.parameters)==null?void 0:Z.docs)==null?void 0:q.source}}};var G,H,Q;x.parameters={...x.parameters,docs:{...(G=x.parameters)==null?void 0:G.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(Q=(H=x.parameters)==null?void 0:H.docs)==null?void 0:Q.source}}};var X,$,ee;U.parameters={...U.parameters,docs:{...(X=U.parameters)==null?void 0:X.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(ee=($=U.parameters)==null?void 0:$.docs)==null?void 0:ee.source}}};var ae,te,ne;y.parameters={...y.parameters,docs:{...(ae=y.parameters)==null?void 0:ae.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(ne=(te=y.parameters)==null?void 0:te.docs)==null?void 0:ne.source}}};var le,se,re;j.parameters={...j.parameters,docs:{...(le=j.parameters)==null?void 0:le.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(re=(se=j.parameters)==null?void 0:se.docs)==null?void 0:re.source}}};var ie,oe,ue;m.parameters={...m.parameters,docs:{...(ie=m.parameters)==null?void 0:ie.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(ue=(oe=m.parameters)==null?void 0:oe.docs)==null?void 0:ue.source}}};var de,ce,ge;k.parameters={...k.parameters,docs:{...(de=k.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} />;
+}`,...(ge=(ce=k.parameters)==null?void 0:ce.docs)==null?void 0:ge.source}}};var he,me,pe;V.parameters={...V.parameters,docs:{...(he=V.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} />;
+}`,...(pe=(me=V.parameters)==null?void 0:me.docs)==null?void 0:pe.source}}};var ve,Ce,be;I.parameters={...I.parameters,docs:{...(ve=I.parameters)==null?void 0:ve.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(be=(Ce=I.parameters)==null?void 0:Ce.docs)==null?void 0:be.source}}};var xe,Ue,ye;S.parameters={...S.parameters,docs:{...(xe=S.parameters)==null?void 0:xe.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(ye=(Ue=S.parameters)==null?void 0:Ue.docs)==null?void 0:ye.source}}};var je,ke,Ve;f.parameters={...f.parameters,docs:{...(je=f.parameters)==null?void 0:je.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} />
+    </>;
+}`,...(Ve=(ke=f.parameters)==null?void 0:ke.docs)==null?void 0:Ve.source}}};var Ie,Se,fe;w.parameters={...w.parameters,docs:{...(Ie=w.parameters)==null?void 0:Ie.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: any) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <UnitInput {...args} onChange={handleChange} />;
+}`,...(fe=(Se=w.parameters)==null?void 0:Se.docs)==null?void 0:fe.source}}};var we,Ae,Ne;A.parameters={...A.parameters,docs:{...(we=A.parameters)==null?void 0:we.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
+    }} />
+    </>;
+}`,...(Ne=(Ae=A.parameters)==null?void 0:Ae.docs)==null?void 0:Ne.source}}};var Pe,Be,Ee;P.parameters={...P.parameters,docs:{...(Pe=P.parameters)==null?void 0:Pe.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
+    }} />
+    </>;
+}`,...(Ee=(Be=P.parameters)==null?void 0:Be.docs)==null?void 0:Ee.source}}};var De,Fe,_e;B.parameters={...B.parameters,docs:{...(De=B.parameters)==null?void 0:De.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
+    }} />
+    </>;
+}`,...(_e=(Fe=B.parameters)==null?void 0:Fe.docs)==null?void 0:_e.source}}};var Me,We,Oe;E.parameters={...E.parameters,docs:{...(Me=E.parameters)==null?void 0:Me.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()} />
+    </>;
+}`,...(Oe=(We=E.parameters)==null?void 0:We.docs)==null?void 0:Oe.source}}};var Te,Re,Ke;D.parameters={...D.parameters,docs:{...(Te=D.parameters)==null?void 0:Te.docs,source:{originalSource:`() => {
+  const [value, setValue] = useState('123|m');
+  const [unit, setUnit] = useState('m');
+  return <>
+      <UnitInput name="example" onChange={evt => setValue(evt.target.value)} value={value} initUnit={unit} unitkey="length" onSwitchUnit={setUnit} />
+      <Spacer />
+      <UnitInput name="example" onChange={evt => setValue(evt.target.value)} value={value} initUnit={unit} unitkey="length" onSwitchUnit={setUnit} />
+    </>;
+}`,...(Ke=(Re=D.parameters)==null?void 0:Re.docs)==null?void 0:Ke.source}}};const Sa=["Default","InitUnit","notKnownUnit","Width","NoConversion","Small","Error","InternalValidationError","Disabled","DisabledNoConversion","DisabledUnitWithoutUnitKey","DisabledUnitWithUnitKey","DisabledWithEnabledUnitMenu","TestExternalStateChangeWithSynchronizedUnits","PredefinedOptionsMenu","TestEdgeCases","AutomaticValues","ValidationCallback","AllowEmptyPUI","onSwitchUnit"];export{E as AllowEmptyPUI,P as AutomaticValues,N as Default,m as Disabled,k as DisabledNoConversion,I as DisabledUnitWithUnitKey,V as DisabledUnitWithoutUnitKey,S as DisabledWithEnabledUnitMenu,y as Error,v as InitUnit,j as InternalValidationError,x as NoConversion,w as PredefinedOptionsMenu,U as Small,A as TestEdgeCases,f as TestExternalStateChangeWithSynchronizedUnits,B as ValidationCallback,b as Width,Sa as __namedExportsOrder,Ia as default,C as notKnownUnit,D as onSwitchUnit};