react-var-ui - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/react-var-ui.cjs.development.js

@@ -353,2 +353,5 @@ 'use strict';
 
+  var serializedCurrentValue = React.useMemo(function () {
+    return JSON.stringify(currentValue);
+  }, [currentValue]);
   return React__default.createElement(VarBase, {
@@ -359,12 +362,13 @@ label: label,
   }, React__default.createElement("span", null, React__default.createElement("select", {
-    value: currentValue,
     onChange: function onChange(e) {
       return setCurrentValue(JSON.parse(e.target.value));
-    }
+    },
+    value: serializedCurrentValue
   }, options.map(function (option) {
     var _option$value;
 
+    var serializedValue = JSON.stringify((_option$value = option.value) != null ? _option$value : option.key);
     return React__default.createElement("option", {
       key: option.key,
-      value: JSON.stringify((_option$value = option.value) != null ? _option$value : option.key)
+      value: serializedValue
     }, option.label);
@@ -371,0 +375,0 @@ }))));

dist/react-var-ui.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),a=e(t),n=e(require("lodash.clonedeep")),l=e(require("lodash.set")),r=e(require("lodash.result")),u=require("react-color"),c=t.createContext(void 0);function o(e,a,n){var l=t.useContext(c);return[t.useMemo((function(){var t;return null!=(t=null==l?void 0:l.getValue(e))?t:a}),[l,e,a]),t.useCallback((function(t){e&&l&&l.setValue(e,t),null==n||n(t)}),[e,l,n])]}function i(e){var a=t.useState(!1),n=a[0],l=a[1];return t.useEffect((function(){if(n){var t=function(t){t.preventDefault(),t.stopPropagation(),e(t.clientX,t.clientY)},a=function(t){t.preventDefault(),t.stopPropagation();var a=t.touches[0];a&&e(a.clientX,a.clientY)},r=function(){l(!1)};return document.addEventListener("mousemove",t),document.addEventListener("mouseup",r),document.addEventListener("touchmove",a),document.addEventListener("touchend",r),document.addEventListener("touchcancel",r),function(){document.removeEventListener("mousemove",t),document.removeEventListener("mouseup",r),document.removeEventListener("touchmove",a),document.removeEventListener("touchend",r),document.removeEventListener("touchcancel",r)}}})),{events:t.useMemo((function(){return{onMouseDown:function(e){e.preventDefault(),l(!0)},onTouchStart:function(e){e.preventDefault(),l(!0)}}}),[l]),moving:n}}var s=function(e){var t=e.label,n=e.children;return a.createElement("div",{className:"react-var-ui-label "+(t?"react-var-ui-label-has-label ":"react-var-ui-label-no-label ")+(e.disabled?"react-var-ui-disabled ":"")+(e.className||"")},!!t&&a.createElement("span",null,t),n)},m=2*Math.PI;function v(e){return(m+e%m)%m}var d=function(){return a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},a.createElement("path",{fillRule:"evenodd",d:"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"}))},f=function(){return a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},a.createElement("path",{fillRule:"evenodd",d:"M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"}))};function h(e,t,a,n,l){var r,u=(null==(r=n.toString().split(".")[1])?void 0:r.length)||0;return e=Math.round(e/n)*n,e=Math.max(t,e),e=Math.min(a,e),l?Math.round(e):parseFloat(e.toFixed(u))}function p(e,t,a,n){var l=[0,0];if(!e||!Array.isArray(e)||e.length<2)return l;for(var r=0;r<n.length;r++){var u,c=(null==(u=n[r].toString().split(".")[1])?void 0:u.length)||0;l[r]=Math.round(e[r]/n[r])*n[r],l[r]=Math.max(t[r],l[r]),l[r]=Math.min(a[r],l[r]),l[r]=parseFloat(l[r].toFixed(c))}return l}exports.VarAngle=function(e){var n=e.label,l=e.path,r=e.value,u=e.onChange,c=e.disabled,m=e.defaultValue,d=void 0===m?0:m,f=e.className,h=t.useRef(null),p=o(l,r,u),b=p[0],g=p[1],E=t.useMemo((function(){return Math.round(v(b)*(180/Math.PI))}),[b]),N=i(t.useCallback((function(e,t){if(h.current){var a=h.current.getBoundingClientRect();g(v(Math.atan2(t-(a.top+a.height/2),e-(a.left+a.width/2))+Math.PI/2))}}),[g])).events;return a.createElement(s,{label:n,disabled:c,className:f},a.createElement("span",{className:"react-var-ui-angle-value"},E,"°"),a.createElement("div",{className:"react-var-ui-angle"},a.createElement("div",Object.assign({className:"react-var-ui-angle-control",ref:h,style:{transform:"rotate("+E+"deg)"},onDoubleClick:function(){return void 0!==d&&g(d)},onWheel:function(e){e.preventDefault(),g(v(b+.5*(e.deltaY<0?-1:1)))}},N))))},exports.VarBase=s,exports.VarButton=function(e){var t=e.disabled;return a.createElement(s,{label:e.label,disabled:t,className:e.className},a.createElement("span",{className:"react-var-ui-button"},a.createElement("button",{onClick:e.onClick,disabled:t},e.buttonLabel)))},exports.VarCategory=function(e){var t=e.children;return a.createElement("div",{className:"react-var-ui-category "+(e.className||"")},a.createElement("div",{className:"react-var-ui-category-title"},e.label),!!t&&a.createElement("div",null,t))},exports.VarColor=function(e){var n=e.label,l=e.alpha,r=e.disabled,c=e.className,i=o(e.path,e.value,e.onChange),m=i[0],v=i[1],d=t.useState(!1),f=d[0],h=d[1],p=t.useCallback((function(){return h((function(e){return!e}))}),[h]),b=t.useCallback((function(){return h(!1)}),[h]);return a.createElement(s,{label:n,disabled:r,className:c},a.createElement("span",null,a.createElement("span",{className:"react-var-ui-color-value"},m),a.createElement("div",{className:"react-var-ui-color"},a.createElement("div",{className:"react-var-ui-color-swatch",onClick:p},a.createElement("div",{className:"react-var-ui-color-color",style:{background:m}})),f?a.createElement("div",{className:"react-var-ui-color-popover"},a.createElement("div",{className:"react-var-ui-color-cover",onClick:b}),a.createElement(u.SketchPicker,{color:m,onChange:function(e){if(l){var t,a=Math.round(255*(null!=(t=e.rgb.a)?t:1)).toString(16);1===a.length&&(a="0"+a),v(e.hex+a)}else v(e.hex)},disableAlpha:!l})):null)))},exports.VarDisplay=function(e){var t=e.label,n=e.disabled,l=e.className,r=o(e.path,e.value);return a.createElement(s,{label:t,disabled:n,className:l},a.createElement("span",null,r[0]))},exports.VarSelect=function(e){var t=e.label,n=e.options,l=e.disabled,r=e.className,u=o(e.path,e.value,e.onChange),c=u[1];return a.createElement(s,{label:t,disabled:l,className:r},a.createElement("span",null,a.createElement("select",{value:u[0],onChange:function(e){return c(JSON.parse(e.target.value))}},n.map((function(e){var t;return a.createElement("option",{key:e.key,value:JSON.stringify(null!=(t=e.value)?t:e.key)},e.label)})))))},exports.VarSlider=function(e){var n=e.label,l=e.path,r=e.value,u=e.onChange,c=e.min,m=e.max,v=e.step,p=e.integer,b=e.defaultValue,g=e.showInput,E=e.showButtons,N=e.disabled,C=e.className,x=t.useRef(null),k=o(l,r,u),M=k[0],y=k[1],V=t.useMemo((function(){return h(M,c,m,v,!!p)}),[M,c,m,v,p]),w=t.useMemo((function(){return(V-c)/(m-c)*100}),[V,c,m]),L=t.useCallback((function(e){if(x.current){var t=x.current.getBoundingClientRect(),a=h(c+(e-t.left)/t.width*(m-c),c,m,v,!!p);y(a)}}),[y,p,c,m,v]),D=t.useCallback((function(){return y(h(M+v,c,m,v,!!p))}),[M,y,p,c,m,v]),S=t.useCallback((function(){return y(h(M-v,c,m,v,!!p))}),[M,y,p,c,m,v]),P=i(L);return a.createElement(s,{label:n,disabled:N,className:C},a.createElement("div",{className:"react-var-ui-slider"},a.createElement("div",Object.assign({className:"react-var-ui-slider-track",ref:x,onClick:function(e){return L(e.clientX)},onDoubleClick:function(){return void 0!==b&&y(b)},onWheel:function(e){e.preventDefault(),e.deltaY<0?D():S()}},P.events),a.createElement("div",{className:"react-var-ui-slider-content",style:{width:w+"%"}})),g?a.createElement("input",{className:"react-var-ui-slider-input",type:"number",min:c,max:m,step:v,value:V,onChange:function(e){return y(p?parseInt(e.target.value):parseFloat(e.target.value))}}):a.createElement("span",null,V),E&&a.createElement(a.Fragment,null,a.createElement("button",{title:"Increase",onClick:D},a.createElement(f,null)),a.createElement("button",{title:"Decrease",onClick:S},a.createElement(d,null)))))},exports.VarString=function(e){var t=e.label,n=e.maxLength,l=e.multiline,r=e.disabled,u=e.className,c=o(e.path,e.value,e.onChange),i=c[0],m=c[1];return a.createElement(s,{label:t,disabled:r,className:u},l?a.createElement("textarea",{className:"react-var-ui-string-multiline",value:i,onChange:function(e){return m(e.target.value)}}):a.createElement("span",{className:"react-var-ui-string"},a.createElement("input",{type:"text",maxLength:n,value:i,onChange:function(e){return m(e.target.value)}})))},exports.VarToggle=function(e){var t=e.label,n=e.disabled,l=e.className,r=o(e.path,e.value,e.onChange),u=r[1];return a.createElement(s,{label:t,disabled:n,className:l},a.createElement("span",null,a.createElement("label",{className:"react-var-ui-toggle"},a.createElement("input",{type:"checkbox",checked:r[0],onChange:function(e){return u(e.target.checked)}}),a.createElement("span",{className:"react-var-ui-toggle-helper"}))))},exports.VarUI=function(e){var u=e.values,o=e.updateValues,i=e.className,s=e.children,m=t.useCallback((function(e){return e?r(u,e):void 0}),[u]),v=t.useCallback((function(e,t){o(l(n(u),e,t))}),[u,o]),d=t.useMemo((function(){return{values:u,getValue:m,setValue:v}}),[u,m,v]);return a.createElement(c.Provider,{value:d},a.createElement("div",{className:"react-var-ui "+(i||"")},s))},exports.VarXY=function(e){var n=e.label,l=e.path,r=e.value,u=e.onChange,c=e.disabled,m=e.className,v=e.defaultValue,d=void 0===v?[0,0]:v,f=e.min,h=void 0===f?[-1,-1]:f,b=e.max,g=void 0===b?[1,1]:b,E=e.step,N=void 0===E?[.01,.01]:E,C=t.useRef(null),x=o(l,r,u),k=x[0],M=x[1],y=t.useMemo((function(){return p(k,h,g,N)}),[k,h,g,N]),V=t.useMemo((function(){return function(e,t,a){if(!e)return[50,50];for(var n=[0,0],l=0;l<e.length;l++)n[l]=(e[l]-t[l])/(a[l]-t[l])*100;return n}(y,h,g)}),[y,h,g]),w=t.useCallback((function(e,t){if(C.current){var a=C.current.getBoundingClientRect(),n=p([h[0]+(e-a.left)/a.width*(g[0]-h[0]),h[1]+(t-a.top)/a.height*(g[1]-h[1])],h,g,N);M(n)}}),[M,h,g,N]),L=i(w).events,D=t.useCallback((function(){void 0!==d&&M(d)}),[d,M]);return a.createElement(s,{label:n,disabled:c,className:m},a.createElement("span",{className:"react-var-ui-xy-value"},y[0],", ",y[1]),a.createElement("div",{className:"react-var-ui-xy"},a.createElement("div",Object.assign({className:"react-var-ui-xy-space",ref:C,onClick:function(e){return w(e.clientX,e.clientY)},onDoubleClick:D},L),a.createElement("div",{className:"react-var-ui-xy-control",style:{top:V[1]+"%",left:V[0]+"%"}}))))},exports.usePointerDrag=i,exports.useVarUIValue=o;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),a=e(t),n=e(require("lodash.clonedeep")),r=e(require("lodash.set")),l=e(require("lodash.result")),u=require("react-color"),c=t.createContext(void 0);function o(e,a,n){var r=t.useContext(c);return[t.useMemo((function(){var t;return null!=(t=null==r?void 0:r.getValue(e))?t:a}),[r,e,a]),t.useCallback((function(t){e&&r&&r.setValue(e,t),null==n||n(t)}),[e,r,n])]}function i(e){var a=t.useState(!1),n=a[0],r=a[1];return t.useEffect((function(){if(n){var t=function(t){t.preventDefault(),t.stopPropagation(),e(t.clientX,t.clientY)},a=function(t){t.preventDefault(),t.stopPropagation();var a=t.touches[0];a&&e(a.clientX,a.clientY)},l=function(){r(!1)};return document.addEventListener("mousemove",t),document.addEventListener("mouseup",l),document.addEventListener("touchmove",a),document.addEventListener("touchend",l),document.addEventListener("touchcancel",l),function(){document.removeEventListener("mousemove",t),document.removeEventListener("mouseup",l),document.removeEventListener("touchmove",a),document.removeEventListener("touchend",l),document.removeEventListener("touchcancel",l)}}})),{events:t.useMemo((function(){return{onMouseDown:function(e){e.preventDefault(),r(!0)},onTouchStart:function(e){e.preventDefault(),r(!0)}}}),[r]),moving:n}}var s=function(e){var t=e.label,n=e.children;return a.createElement("div",{className:"react-var-ui-label "+(t?"react-var-ui-label-has-label ":"react-var-ui-label-no-label ")+(e.disabled?"react-var-ui-disabled ":"")+(e.className||"")},!!t&&a.createElement("span",null,t),n)},m=2*Math.PI;function v(e){return(m+e%m)%m}var d=function(){return a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},a.createElement("path",{fillRule:"evenodd",d:"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"}))},f=function(){return a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},a.createElement("path",{fillRule:"evenodd",d:"M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"}))};function h(e,t,a,n,r){var l,u=(null==(l=n.toString().split(".")[1])?void 0:l.length)||0;return e=Math.round(e/n)*n,e=Math.max(t,e),e=Math.min(a,e),r?Math.round(e):parseFloat(e.toFixed(u))}function p(e,t,a,n){var r=[0,0];if(!e||!Array.isArray(e)||e.length<2)return r;for(var l=0;l<n.length;l++){var u,c=(null==(u=n[l].toString().split(".")[1])?void 0:u.length)||0;r[l]=Math.round(e[l]/n[l])*n[l],r[l]=Math.max(t[l],r[l]),r[l]=Math.min(a[l],r[l]),r[l]=parseFloat(r[l].toFixed(c))}return r}exports.VarAngle=function(e){var n=e.label,r=e.path,l=e.value,u=e.onChange,c=e.disabled,m=e.defaultValue,d=void 0===m?0:m,f=e.className,h=t.useRef(null),p=o(r,l,u),b=p[0],g=p[1],E=t.useMemo((function(){return Math.round(v(b)*(180/Math.PI))}),[b]),N=i(t.useCallback((function(e,t){if(h.current){var a=h.current.getBoundingClientRect();g(v(Math.atan2(t-(a.top+a.height/2),e-(a.left+a.width/2))+Math.PI/2))}}),[g])).events;return a.createElement(s,{label:n,disabled:c,className:f},a.createElement("span",{className:"react-var-ui-angle-value"},E,"°"),a.createElement("div",{className:"react-var-ui-angle"},a.createElement("div",Object.assign({className:"react-var-ui-angle-control",ref:h,style:{transform:"rotate("+E+"deg)"},onDoubleClick:function(){return void 0!==d&&g(d)},onWheel:function(e){e.preventDefault(),g(v(b+.5*(e.deltaY<0?-1:1)))}},N))))},exports.VarBase=s,exports.VarButton=function(e){var t=e.disabled;return a.createElement(s,{label:e.label,disabled:t,className:e.className},a.createElement("span",{className:"react-var-ui-button"},a.createElement("button",{onClick:e.onClick,disabled:t},e.buttonLabel)))},exports.VarCategory=function(e){var t=e.children;return a.createElement("div",{className:"react-var-ui-category "+(e.className||"")},a.createElement("div",{className:"react-var-ui-category-title"},e.label),!!t&&a.createElement("div",null,t))},exports.VarColor=function(e){var n=e.label,r=e.alpha,l=e.disabled,c=e.className,i=o(e.path,e.value,e.onChange),m=i[0],v=i[1],d=t.useState(!1),f=d[0],h=d[1],p=t.useCallback((function(){return h((function(e){return!e}))}),[h]),b=t.useCallback((function(){return h(!1)}),[h]);return a.createElement(s,{label:n,disabled:l,className:c},a.createElement("span",null,a.createElement("span",{className:"react-var-ui-color-value"},m),a.createElement("div",{className:"react-var-ui-color"},a.createElement("div",{className:"react-var-ui-color-swatch",onClick:p},a.createElement("div",{className:"react-var-ui-color-color",style:{background:m}})),f?a.createElement("div",{className:"react-var-ui-color-popover"},a.createElement("div",{className:"react-var-ui-color-cover",onClick:b}),a.createElement(u.SketchPicker,{color:m,onChange:function(e){if(r){var t,a=Math.round(255*(null!=(t=e.rgb.a)?t:1)).toString(16);1===a.length&&(a="0"+a),v(e.hex+a)}else v(e.hex)},disableAlpha:!r})):null)))},exports.VarDisplay=function(e){var t=e.label,n=e.disabled,r=e.className,l=o(e.path,e.value);return a.createElement(s,{label:t,disabled:n,className:r},a.createElement("span",null,l[0]))},exports.VarSelect=function(e){var n=e.label,r=e.options,l=e.disabled,u=e.className,c=o(e.path,e.value,e.onChange),i=c[0],m=c[1],v=t.useMemo((function(){return JSON.stringify(i)}),[i]);return a.createElement(s,{label:n,disabled:l,className:u},a.createElement("span",null,a.createElement("select",{onChange:function(e){return m(JSON.parse(e.target.value))},value:v},r.map((function(e){var t,n=JSON.stringify(null!=(t=e.value)?t:e.key);return a.createElement("option",{key:e.key,value:n},e.label)})))))},exports.VarSlider=function(e){var n=e.label,r=e.path,l=e.value,u=e.onChange,c=e.min,m=e.max,v=e.step,p=e.integer,b=e.defaultValue,g=e.showInput,E=e.showButtons,N=e.disabled,C=e.className,x=t.useRef(null),k=o(r,l,u),M=k[0],y=k[1],V=t.useMemo((function(){return h(M,c,m,v,!!p)}),[M,c,m,v,p]),w=t.useMemo((function(){return(V-c)/(m-c)*100}),[V,c,m]),L=t.useCallback((function(e){if(x.current){var t=x.current.getBoundingClientRect(),a=h(c+(e-t.left)/t.width*(m-c),c,m,v,!!p);y(a)}}),[y,p,c,m,v]),D=t.useCallback((function(){return y(h(M+v,c,m,v,!!p))}),[M,y,p,c,m,v]),S=t.useCallback((function(){return y(h(M-v,c,m,v,!!p))}),[M,y,p,c,m,v]),P=i(L);return a.createElement(s,{label:n,disabled:N,className:C},a.createElement("div",{className:"react-var-ui-slider"},a.createElement("div",Object.assign({className:"react-var-ui-slider-track",ref:x,onClick:function(e){return L(e.clientX)},onDoubleClick:function(){return void 0!==b&&y(b)},onWheel:function(e){e.preventDefault(),e.deltaY<0?D():S()}},P.events),a.createElement("div",{className:"react-var-ui-slider-content",style:{width:w+"%"}})),g?a.createElement("input",{className:"react-var-ui-slider-input",type:"number",min:c,max:m,step:v,value:V,onChange:function(e){return y(p?parseInt(e.target.value):parseFloat(e.target.value))}}):a.createElement("span",null,V),E&&a.createElement(a.Fragment,null,a.createElement("button",{title:"Increase",onClick:D},a.createElement(f,null)),a.createElement("button",{title:"Decrease",onClick:S},a.createElement(d,null)))))},exports.VarString=function(e){var t=e.label,n=e.maxLength,r=e.multiline,l=e.disabled,u=e.className,c=o(e.path,e.value,e.onChange),i=c[0],m=c[1];return a.createElement(s,{label:t,disabled:l,className:u},r?a.createElement("textarea",{className:"react-var-ui-string-multiline",value:i,onChange:function(e){return m(e.target.value)}}):a.createElement("span",{className:"react-var-ui-string"},a.createElement("input",{type:"text",maxLength:n,value:i,onChange:function(e){return m(e.target.value)}})))},exports.VarToggle=function(e){var t=e.label,n=e.disabled,r=e.className,l=o(e.path,e.value,e.onChange),u=l[1];return a.createElement(s,{label:t,disabled:n,className:r},a.createElement("span",null,a.createElement("label",{className:"react-var-ui-toggle"},a.createElement("input",{type:"checkbox",checked:l[0],onChange:function(e){return u(e.target.checked)}}),a.createElement("span",{className:"react-var-ui-toggle-helper"}))))},exports.VarUI=function(e){var u=e.values,o=e.updateValues,i=e.className,s=e.children,m=t.useCallback((function(e){return e?l(u,e):void 0}),[u]),v=t.useCallback((function(e,t){o(r(n(u),e,t))}),[u,o]),d=t.useMemo((function(){return{values:u,getValue:m,setValue:v}}),[u,m,v]);return a.createElement(c.Provider,{value:d},a.createElement("div",{className:"react-var-ui "+(i||"")},s))},exports.VarXY=function(e){var n=e.label,r=e.path,l=e.value,u=e.onChange,c=e.disabled,m=e.className,v=e.defaultValue,d=void 0===v?[0,0]:v,f=e.min,h=void 0===f?[-1,-1]:f,b=e.max,g=void 0===b?[1,1]:b,E=e.step,N=void 0===E?[.01,.01]:E,C=t.useRef(null),x=o(r,l,u),k=x[0],M=x[1],y=t.useMemo((function(){return p(k,h,g,N)}),[k,h,g,N]),V=t.useMemo((function(){return function(e,t,a){if(!e)return[50,50];for(var n=[0,0],r=0;r<e.length;r++)n[r]=(e[r]-t[r])/(a[r]-t[r])*100;return n}(y,h,g)}),[y,h,g]),w=t.useCallback((function(e,t){if(C.current){var a=C.current.getBoundingClientRect(),n=p([h[0]+(e-a.left)/a.width*(g[0]-h[0]),h[1]+(t-a.top)/a.height*(g[1]-h[1])],h,g,N);M(n)}}),[M,h,g,N]),L=i(w).events,D=t.useCallback((function(){void 0!==d&&M(d)}),[d,M]);return a.createElement(s,{label:n,disabled:c,className:m},a.createElement("span",{className:"react-var-ui-xy-value"},y[0],", ",y[1]),a.createElement("div",{className:"react-var-ui-xy"},a.createElement("div",Object.assign({className:"react-var-ui-xy-space",ref:C,onClick:function(e){return w(e.clientX,e.clientY)},onDoubleClick:D},L),a.createElement("div",{className:"react-var-ui-xy-control",style:{top:V[1]+"%",left:V[0]+"%"}}))))},exports.usePointerDrag=i,exports.useVarUIValue=o;
 //# sourceMappingURL=react-var-ui.cjs.production.min.js.map

dist/react-var-ui.esm.js

@@ -346,2 +346,5 @@ import React, { useContext, useMemo, useCallback, createContext, useState, useEffect, useRef } from 'react';
 
+  var serializedCurrentValue = useMemo(function () {
+    return JSON.stringify(currentValue);
+  }, [currentValue]);
   return React.createElement(VarBase, {
@@ -352,12 +355,13 @@ label: label,
   }, React.createElement("span", null, React.createElement("select", {
-    value: currentValue,
     onChange: function onChange(e) {
       return setCurrentValue(JSON.parse(e.target.value));
-    }
+    },
+    value: serializedCurrentValue
   }, options.map(function (option) {
     var _option$value;
 
+    var serializedValue = JSON.stringify((_option$value = option.value) != null ? _option$value : option.key);
     return React.createElement("option", {
       key: option.key,
-      value: JSON.stringify((_option$value = option.value) != null ? _option$value : option.key)
+      value: serializedValue
     }, option.label);
@@ -364,0 +368,0 @@ }))));

package.json

 {
-  "version": "1.0.4",
+  "version": "1.0.5",
   "license": "BSD-3-Clause-Clear",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

219603

increased by0.66%

Lines of code

1601

increased by0.57%

No dependency changes