react-var-ui - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

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

@@ -546,2 +546,3 @@ 'use strict';
       multiline = _ref.multiline,
+      autoexpand = _ref.autoexpand,
       disabled = _ref.disabled,
@@ -554,2 +555,14 @@ className = _ref.className;
 
+  var autoexpandOnInput = function autoexpandOnInput(event) {
+    var textarea = event.currentTarget;
+    textarea.style.height = '0';
+    textarea.style.height = textarea.scrollHeight + "px";
+  };
+
+  var textareaStyle = React.useMemo(function () {
+    return autoexpand ? {
+      overflow: 'hidden',
+      resize: 'none'
+    } : undefined;
+  }, [autoexpand]);
   return React__default.createElement(VarBase, {
@@ -564,3 +577,5 @@ label: label,
       return setCurrentValue(e.target.value);
-    }
+    },
+    onInput: autoexpand ? autoexpandOnInput : undefined,
+    style: textareaStyle
   }) : React__default.createElement("span", {
@@ -567,0 +582,0 @@ className: "react-var-ui-string"

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),l=e(require("lodash.clonedeep")),n=e(require("lodash.set")),r=e(require("lodash.result")),u=require("react-use-pointer-drag"),c=require("react-color"),i=t.createContext(void 0);function s(e,a,l){var n=t.useContext(i);return[t.useMemo((function(){var t;return null!=(t=null==n?void 0:n.getValue(e))?t:a}),[n,e,a]),t.useCallback((function(t){e&&n&&n.setValue(e,t),null==l||l(t)}),[e,n,l])]}var o=function(e){var t=e.label,l=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),l)},m=2*Math.PI;function v(e){return(m+e%m)%m}function d(e,t,a,l,n){isFinite(e)||(e=null!=t?t:0);var r,u=2;return"number"==typeof l&&((u=(null==(r=l.toString().split(".")[1])?void 0:r.length)||0)>20&&(u=20),e=Math.round(e/l)*l),"number"==typeof t&&(e=Math.max(t,e)),"number"==typeof a&&(e=Math.min(a,e)),n?Math.round(e):parseFloat(e.toFixed(u))}var 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:"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"}))},b=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 p(e,t,a,l){var n=[0,0];if(!e||!Array.isArray(e)||e.length<2)return n;for(var r=0;r<l.length;r++){var u,c=(null==(u=l[r].toString().split(".")[1])?void 0:u.length)||0;n[r]=Math.round(e[r]/l[r])*l[r],n[r]=Math.max(t[r],n[r]),n[r]=Math.min(a[r],n[r]),n[r]=parseFloat(n[r].toFixed(c))}return n}exports.VarAngle=function(e){var l=e.label,n=e.path,r=e.value,c=e.onChange,i=e.disabled,m=e.defaultValue,d=void 0===m?0:m,f=e.className,b=t.useRef(null),p=s(n,r,c),g=p[0],h=p[1],E=t.useMemo((function(){return Math.round(v(g)*(180/Math.PI))}),[g]),N=t.useCallback((function(e,t){if(b.current){var a=b.current.getBoundingClientRect();h(v(Math.atan2(t-(a.top+a.height/2),e-(a.left+a.width/2))+Math.PI/2))}}),[h]),C=u.usePointerDragSimple(N).events;return t.useEffect((function(){var e;null==(e=b.current)||e.addEventListener("wheel",(function(e){return e.preventDefault()}))}),[]),a.createElement(o,{label:l,disabled:i,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:b,style:{transform:"rotate("+E+"deg)"},onDoubleClick:function(){return void 0!==d&&h(d)},onWheel:function(e){h(v(g+.5*(e.deltaY<0?-1:1)))},title:"Angle"},C))))},exports.VarBase=o,exports.VarButton=function(e){var t=e.onClick,l=e.disabled;return a.createElement(o,{label:e.label,disabled:l,className:e.className},a.createElement("span",{className:"react-var-ui-button"},a.createElement("button",{onClick:function(){return null==t?void 0:t()},disabled:l},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 l=e.label,n=e.alpha,r=e.disabled,u=e.className,i=s(e.path,e.value,e.onChange),m=i[0],v=i[1],d=t.useState(!1),f=d[0],b=d[1],p=t.useCallback((function(){return b((function(e){return!e}))}),[b]),g=t.useCallback((function(){return b(!1)}),[b]);return a.createElement(o,{label:l,disabled:r,className:u},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",title:"Color preview",style:{background:m}})),f?a.createElement("div",{className:"react-var-ui-color-popover"},a.createElement("div",{className:"react-var-ui-color-cover",onClick:g}),a.createElement(c.SketchPicker,{color:m,onChange:function(e){if(n){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:!n})):null)))},exports.VarDisplay=function(e){var t=e.label,l=e.disabled,n=e.className,r=s(e.path,e.value);return a.createElement(o,{label:t,disabled:l,className:n},a.createElement("span",null,r[0]))},exports.VarNumber=function(e){var l=e.label,n=e.min,r=e.max,u=e.step,c=void 0===u?1:u,i=e.integer,m=e.showButtons,v=e.disabled,p=e.className,g=s(e.path,e.value,e.onChange),h=g[0],E=g[1],N=t.useMemo((function(){return d(h,n,r,c,!!i)}),[h,n,r,c,i]),C=t.useCallback((function(){return E(d(h+(null!=c?c:1),n,r,c,!!i))}),[h,E,i,n,r,c]),x=t.useCallback((function(){return E(d(h-(null!=c?c:1),n,r,c,!!i))}),[h,E,i,n,r,c]);return a.createElement(o,{label:l,disabled:v,className:p},a.createElement("div",{className:"react-var-ui-number"},a.createElement("input",{className:"react-var-ui-number-input",type:"number",min:n,max:r,step:c,value:N.toString(),onChange:function(e){return E(d(parseFloat(e.target.value),n,r,c,!!i))}}),m&&a.createElement(a.Fragment,null,a.createElement("button",{title:"Increase",onClick:C},a.createElement(b,null)),a.createElement("button",{title:"Decrease",onClick:x},a.createElement(f,null)))))},exports.VarSelect=function(e){var l=e.label,n=e.options,r=e.disabled,u=e.className,c=s(e.path,e.value,e.onChange),i=c[0],m=c[1],v=t.useMemo((function(){return JSON.stringify(i)}),[i]);return a.createElement(o,{label:l,disabled:r,className:u},a.createElement("div",{className:"react-var-ui-select"},a.createElement("select",{onChange:function(e){return m(JSON.parse(e.target.value))},value:v,title:"Select options"},n.map((function(e){var t,l=JSON.stringify(null!=(t=e.value)?t:e.key);return a.createElement("option",{key:e.key,value:l},e.label)})))))},exports.VarSlider=function(e){var l=e.label,n=e.path,r=e.value,c=e.onChange,i=e.min,m=e.max,v=e.step,p=e.integer,g=e.defaultValue,h=e.showInput,E=e.showButtons,N=e.disabled,C=e.className,x=t.useRef(null),k=s(n,r,c),y=k[0],M=k[1],w=t.useMemo((function(){return d(y,i,m,v,!!p)}),[y,i,m,v,p]),V=t.useMemo((function(){return(w-i)/(m-i)*100}),[w,i,m]),S=t.useCallback((function(e){if(x.current){var t=x.current.getBoundingClientRect(),a=d(i+(e-t.left)/t.width*(m-i),i,m,v,!!p);M(a)}}),[M,p,i,m,v]),D=t.useCallback((function(){return M(d(y+v,i,m,v,!!p))}),[y,M,p,i,m,v]),B=t.useCallback((function(){return M(d(y-v,i,m,v,!!p))}),[y,M,p,i,m,v]),F=u.usePointerDragSimple(S).events;return t.useEffect((function(){var e;null==(e=x.current)||e.addEventListener("wheel",(function(e){return e.preventDefault()}))}),[]),a.createElement(o,{label:l,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 S(e.clientX)},onDoubleClick:function(){return void 0!==g&&M(g)},onWheel:function(e){e.deltaY<0?D():B()},title:"Slider"},F),a.createElement("div",{className:"react-var-ui-slider-content",style:{width:V+"%"}})),h?a.createElement("input",{className:"react-var-ui-slider-input",type:"number",min:i,max:m,step:v,value:w,onChange:function(e){return M(d(parseFloat(e.target.value),i,m,v,!!p))}}):a.createElement("span",null,w.toString()),E&&a.createElement(a.Fragment,null,a.createElement("button",{title:"Increase",onClick:D},a.createElement(b,null)),a.createElement("button",{title:"Decrease",onClick:B},a.createElement(f,null)))))},exports.VarString=function(e){var t=e.label,l=e.maxLength,n=e.multiline,r=e.disabled,u=e.className,c=s(e.path,e.value,e.onChange),i=c[0],m=c[1];return a.createElement(o,{label:t,disabled:r,className:u},n?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:l,value:i,onChange:function(e){return m(e.target.value)}})))},exports.VarToggle=function(e){var t=e.label,l=e.disabled,n=e.className,r=s(e.path,e.value,e.onChange),u=r[1];return a.createElement(o,{label:t,disabled:l,className:n},a.createElement("span",null,a.createElement("label",{className:"react-var-ui-toggle",title:"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,c=e.updateValues,s=e.className,o=e.children,m=t.useCallback((function(e){return e?r(u,e):void 0}),[u]),v=t.useCallback((function(e,t){c(n(l(u),e,t))}),[u,c]),d=t.useMemo((function(){return{values:u,getValue:m,setValue:v}}),[u,m,v]);return a.createElement(i.Provider,{value:d},a.createElement("div",{className:"react-var-ui "+(s||"")},o))},exports.VarXY=function(e){var l=e.label,n=e.path,r=e.value,c=e.onChange,i=e.disabled,m=e.className,v=e.defaultValue,d=void 0===v?[0,0]:v,f=e.min,b=void 0===f?[-1,-1]:f,g=e.max,h=void 0===g?[1,1]:g,E=e.step,N=void 0===E?[.01,.01]:E,C=t.useRef(null),x=s(n,r,c),k=x[0],y=x[1],M=t.useMemo((function(){return p(k,b,h,N)}),[k,b,h,N]),w=t.useMemo((function(){return function(e,t,a){if(!e)return[50,50];for(var l=[0,0],n=0;n<e.length;n++)l[n]=(e[n]-t[n])/(a[n]-t[n])*100;return l}(M,b,h)}),[M,b,h]),V=t.useCallback((function(e,t){if(C.current){var a=C.current.getBoundingClientRect(),l=p([b[0]+(e-a.left)/a.width*(h[0]-b[0]),b[1]+(t-a.top)/a.height*(h[1]-b[1])],b,h,N);y(l)}}),[y,b,h,N]),S=u.usePointerDragSimple(V).events,D=t.useCallback((function(){void 0!==d&&y(d)}),[d,y]);return a.createElement(o,{label:l,disabled:i,className:m},a.createElement("span",{className:"react-var-ui-xy-value"},M[0],", ",M[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 V(e.clientX,e.clientY)},onDoubleClick:D},S),a.createElement("div",{className:"react-var-ui-xy-control",style:{top:w[1]+"%",left:w[0]+"%"}}))))},exports.useVarUIValue=s;
+"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-use-pointer-drag"),c=require("react-color"),i=t.createContext(void 0);function s(e,a,n){var l=t.useContext(i);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])]}var o=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}function d(e,t,a,n,l){isFinite(e)||(e=null!=t?t:0);var r,u=2;return"number"==typeof n&&((u=(null==(r=n.toString().split(".")[1])?void 0:r.length)||0)>20&&(u=20),e=Math.round(e/n)*n),"number"==typeof t&&(e=Math.max(t,e)),"number"==typeof a&&(e=Math.min(a,e)),l?Math.round(e):parseFloat(e.toFixed(u))}var 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:"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"}))},b=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){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,c=e.onChange,i=e.disabled,m=e.defaultValue,d=void 0===m?0:m,f=e.className,b=t.useRef(null),h=s(l,r,c),p=h[0],g=h[1],E=t.useMemo((function(){return Math.round(v(p)*(180/Math.PI))}),[p]),N=t.useCallback((function(e,t){if(b.current){var a=b.current.getBoundingClientRect();g(v(Math.atan2(t-(a.top+a.height/2),e-(a.left+a.width/2))+Math.PI/2))}}),[g]),C=u.usePointerDragSimple(N).events;return t.useEffect((function(){var e;null==(e=b.current)||e.addEventListener("wheel",(function(e){return e.preventDefault()}))}),[]),a.createElement(o,{label:n,disabled:i,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:b,style:{transform:"rotate("+E+"deg)"},onDoubleClick:function(){return void 0!==d&&g(d)},onWheel:function(e){g(v(p+.5*(e.deltaY<0?-1:1)))},title:"Angle"},C))))},exports.VarBase=o,exports.VarButton=function(e){var t=e.onClick,n=e.disabled;return a.createElement(o,{label:e.label,disabled:n,className:e.className},a.createElement("span",{className:"react-var-ui-button"},a.createElement("button",{onClick:function(){return null==t?void 0:t()},disabled:n},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,u=e.className,i=s(e.path,e.value,e.onChange),m=i[0],v=i[1],d=t.useState(!1),f=d[0],b=d[1],h=t.useCallback((function(){return b((function(e){return!e}))}),[b]),p=t.useCallback((function(){return b(!1)}),[b]);return a.createElement(o,{label:n,disabled:r,className:u},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:h},a.createElement("div",{className:"react-var-ui-color-color",title:"Color preview",style:{background:m}})),f?a.createElement("div",{className:"react-var-ui-color-popover"},a.createElement("div",{className:"react-var-ui-color-cover",onClick:p}),a.createElement(c.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=s(e.path,e.value);return a.createElement(o,{label:t,disabled:n,className:l},a.createElement("span",null,r[0]))},exports.VarNumber=function(e){var n=e.label,l=e.min,r=e.max,u=e.step,c=void 0===u?1:u,i=e.integer,m=e.showButtons,v=e.disabled,h=e.className,p=s(e.path,e.value,e.onChange),g=p[0],E=p[1],N=t.useMemo((function(){return d(g,l,r,c,!!i)}),[g,l,r,c,i]),C=t.useCallback((function(){return E(d(g+(null!=c?c:1),l,r,c,!!i))}),[g,E,i,l,r,c]),x=t.useCallback((function(){return E(d(g-(null!=c?c:1),l,r,c,!!i))}),[g,E,i,l,r,c]);return a.createElement(o,{label:n,disabled:v,className:h},a.createElement("div",{className:"react-var-ui-number"},a.createElement("input",{className:"react-var-ui-number-input",type:"number",min:l,max:r,step:c,value:N.toString(),onChange:function(e){return E(d(parseFloat(e.target.value),l,r,c,!!i))}}),m&&a.createElement(a.Fragment,null,a.createElement("button",{title:"Increase",onClick:C},a.createElement(b,null)),a.createElement("button",{title:"Decrease",onClick:x},a.createElement(f,null)))))},exports.VarSelect=function(e){var n=e.label,l=e.options,r=e.disabled,u=e.className,c=s(e.path,e.value,e.onChange),i=c[0],m=c[1],v=t.useMemo((function(){return JSON.stringify(i)}),[i]);return a.createElement(o,{label:n,disabled:r,className:u},a.createElement("div",{className:"react-var-ui-select"},a.createElement("select",{onChange:function(e){return m(JSON.parse(e.target.value))},value:v,title:"Select options"},l.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,l=e.path,r=e.value,c=e.onChange,i=e.min,m=e.max,v=e.step,h=e.integer,p=e.defaultValue,g=e.showInput,E=e.showButtons,N=e.disabled,C=e.className,x=t.useRef(null),k=s(l,r,c),y=k[0],M=k[1],w=t.useMemo((function(){return d(y,i,m,v,!!h)}),[y,i,m,v,h]),V=t.useMemo((function(){return(w-i)/(m-i)*100}),[w,i,m]),S=t.useCallback((function(e){if(x.current){var t=x.current.getBoundingClientRect(),a=d(i+(e-t.left)/t.width*(m-i),i,m,v,!!h);M(a)}}),[M,h,i,m,v]),D=t.useCallback((function(){return M(d(y+v,i,m,v,!!h))}),[y,M,h,i,m,v]),B=t.useCallback((function(){return M(d(y-v,i,m,v,!!h))}),[y,M,h,i,m,v]),F=u.usePointerDragSimple(S).events;return t.useEffect((function(){var e;null==(e=x.current)||e.addEventListener("wheel",(function(e){return e.preventDefault()}))}),[]),a.createElement(o,{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 S(e.clientX)},onDoubleClick:function(){return void 0!==p&&M(p)},onWheel:function(e){e.deltaY<0?D():B()},title:"Slider"},F),a.createElement("div",{className:"react-var-ui-slider-content",style:{width:V+"%"}})),g?a.createElement("input",{className:"react-var-ui-slider-input",type:"number",min:i,max:m,step:v,value:w,onChange:function(e){return M(d(parseFloat(e.target.value),i,m,v,!!h))}}):a.createElement("span",null,w.toString()),E&&a.createElement(a.Fragment,null,a.createElement("button",{title:"Increase",onClick:D},a.createElement(b,null)),a.createElement("button",{title:"Decrease",onClick:B},a.createElement(f,null)))))},exports.VarString=function(e){var n=e.label,l=e.maxLength,r=e.multiline,u=e.autoexpand,c=e.disabled,i=e.className,m=s(e.path,e.value,e.onChange),v=m[0],d=m[1],f=t.useMemo((function(){return u?{overflow:"hidden",resize:"none"}:void 0}),[u]);return a.createElement(o,{label:n,disabled:c,className:i},r?a.createElement("textarea",{className:"react-var-ui-string-multiline",value:v,onChange:function(e){return d(e.target.value)},onInput:u?function(e){var t=e.currentTarget;t.style.height="0",t.style.height=t.scrollHeight+"px"}:void 0,style:f}):a.createElement("span",{className:"react-var-ui-string"},a.createElement("input",{type:"text",maxLength:l,value:v,onChange:function(e){return d(e.target.value)}})))},exports.VarToggle=function(e){var t=e.label,n=e.disabled,l=e.className,r=s(e.path,e.value,e.onChange),u=r[1];return a.createElement(o,{label:t,disabled:n,className:l},a.createElement("span",null,a.createElement("label",{className:"react-var-ui-toggle",title:"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,c=e.updateValues,s=e.className,o=e.children,m=t.useCallback((function(e){return e?r(u,e):void 0}),[u]),v=t.useCallback((function(e,t){c(l(n(u),e,t))}),[u,c]),d=t.useMemo((function(){return{values:u,getValue:m,setValue:v}}),[u,m,v]);return a.createElement(i.Provider,{value:d},a.createElement("div",{className:"react-var-ui "+(s||"")},o))},exports.VarXY=function(e){var n=e.label,l=e.path,r=e.value,c=e.onChange,i=e.disabled,m=e.className,v=e.defaultValue,d=void 0===v?[0,0]:v,f=e.min,b=void 0===f?[-1,-1]:f,p=e.max,g=void 0===p?[1,1]:p,E=e.step,N=void 0===E?[.01,.01]:E,C=t.useRef(null),x=s(l,r,c),k=x[0],y=x[1],M=t.useMemo((function(){return h(k,b,g,N)}),[k,b,g,N]),w=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}(M,b,g)}),[M,b,g]),V=t.useCallback((function(e,t){if(C.current){var a=C.current.getBoundingClientRect(),n=h([b[0]+(e-a.left)/a.width*(g[0]-b[0]),b[1]+(t-a.top)/a.height*(g[1]-b[1])],b,g,N);y(n)}}),[y,b,g,N]),S=u.usePointerDragSimple(V).events,D=t.useCallback((function(){void 0!==d&&y(d)}),[d,y]);return a.createElement(o,{label:n,disabled:i,className:m},a.createElement("span",{className:"react-var-ui-xy-value"},M[0],", ",M[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 V(e.clientX,e.clientY)},onDoubleClick:D},S),a.createElement("div",{className:"react-var-ui-xy-control",style:{top:w[1]+"%",left:w[0]+"%"}}))))},exports.useVarUIValue=s;
 //# sourceMappingURL=react-var-ui.cjs.production.min.js.map

dist/react-var-ui.esm.js

@@ -539,2 +539,3 @@ import React, { useContext, useMemo, useCallback, createContext, useRef, useEffect, useState } from 'react';
       multiline = _ref.multiline,
+      autoexpand = _ref.autoexpand,
       disabled = _ref.disabled,
@@ -547,2 +548,14 @@ className = _ref.className;
 
+  var autoexpandOnInput = function autoexpandOnInput(event) {
+    var textarea = event.currentTarget;
+    textarea.style.height = '0';
+    textarea.style.height = textarea.scrollHeight + "px";
+  };
+
+  var textareaStyle = useMemo(function () {
+    return autoexpand ? {
+      overflow: 'hidden',
+      resize: 'none'
+    } : undefined;
+  }, [autoexpand]);
   return React.createElement(VarBase, {
@@ -557,3 +570,5 @@ label: label,
       return setCurrentValue(e.target.value);
-    }
+    },
+    onInput: autoexpand ? autoexpandOnInput : undefined,
+    style: textareaStyle
   }) : React.createElement("span", {
@@ -560,0 +575,0 @@ className: "react-var-ui-string"

dist/VarString.d.ts

@@ -12,2 +12,7 @@ import { FC } from 'react';
     multiline?: boolean;
+    /**
+     * Should the text field auto expand?
+     * Only works with multiline instances.
+     */
+    autoexpand?: boolean;
 }
@@ -14,0 +19,0 @@ /**

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

237699

increased by2.06%

Lines of code

1693

increased by2.05%

No dependency changes