feedback-fish - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

dist/feedback-fish.cjs.development.js

@@ -480,3 +480,12 @@ 'use strict';
 
-  var enabledSubmit = feedbackText.length > 5;
+  var enabledSubmit = feedbackText.length > 3;
+  React.useEffect(function () {
+    if (!submitted || !onClose) return;
+    var timeout = setTimeout(function () {
+      onClose();
+    }, 5000);
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, [submitted]);
   return themeUi.jsx(themeUi.ThemeProvider, {
@@ -534,3 +543,3 @@ theme: _extends({}, theme, {
         transition: '100ms ease-in-out',
-        transitionProperty: 'box-shadow, background, border-color',
+        transitionProperty: 'color, box-shadow, background, border-color',
         boxShadow: '0 0 0 0 rgba(0, 93, 255, 0)'
@@ -551,3 +560,4 @@ },
     onClick: function onClick() {
-      return setCategory(null);
+      setCategory(null);
+      setFeedback('');
     }
@@ -642,2 +652,6 @@ }, themeUi.jsx(IconBack, null)), themeUi.jsx(IconButton, {
       resize: 'none',
+      appearance: 'none',
+      '::-webkit-appearance': {
+        appearance: 'none'
+      },
       '::placeholder': {
@@ -714,6 +728,29 @@ color: 'gray.5'
       opacity: 0,
-      animationDelay: '0.3s',
-      animation: enterUpAnimation + " 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards"
+      animation: enterUpAnimation + " 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards"
     }
-  }, "Thanks! We received your feedback.")), themeUi.jsx("input", {
+  }, "Thanks! We received your feedback."), themeUi.jsx("button", {
+    onClick: function onClick() {
+      setCategory(null);
+      setFeedback('');
+      setSubmitted(false);
+    },
+    sx: {
+      border: 'none',
+      background: 'none',
+      mt: 3,
+      fontSize: 1,
+      px: 3,
+      opacity: 0,
+      animation: enterUpAnimation + " 0.6s 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards",
+      color: 'gray.7',
+      bg: 'gray.2',
+      py: 1,
+      borderRadius: 16,
+      cursor: 'pointer',
+      ':hover': {
+        color: 'gray.8',
+        bg: 'gray.3'
+      }
+    }
+  }, "Submit more feedback")), themeUi.jsx("input", {
     type: "hidden",
@@ -720,0 +757,0 @@ id: "projectId",

dist/feedback-fish.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("theme-ui"),n=require("react"),r=e(n),i=e(require("react-dom")),o=require("react-popper"),s=e(require("react-outside-click-handler")),a=e(require("@theme-ui/preset-tailwind")),l=require("reflexbox"),c=require("@emotion/core");function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function d(e,t){return t||(t=e.slice(0)),e.raw=t,e}var p=u({},a,{colors:u({},a.colors,{brandBlue:["#E6EFFF","#CCDFFF","#005DFF","#002F80","#304C7C","#20314E","#182439"],brandOrange:["#FFF0E6","#FFD2B3","#FFB580","#FF6A00","#CC5500","#662A00"]}),fontSizes:[12,14,18,24,34,41,46,58,72]}),f=function(e){var n=e.children,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(i[n]=e[n]);return i}(e,["children"]);return"number"==typeof e.gap&&0!==e.gap&&(n=r.Children.map(n,(function(n,r){var i;return n?t.jsx("div",{sx:0!==r?(i={},i["column"===e.flexDirection?"marginTop":"marginLeft"]=e.gap,i):{}},n):n}))),t.jsx(l.Flex,i,n)};function x(){var e=d(["\n  0% {\n\t\theight: 0px;\n\t\twidth: 0px;\n\t\topacity: 0;\n\t\tvisibility: visible;\n  }\n\n  40% {\n\t\theight: 0px;\n\t\twidth: 10px;\n\t\topacity: 1;\n  }\n\n  100% {\n\tvisibility: visible;\n\t\theight: 20px;\n  }\n"]);return x=function(){return e},e}function h(){var e=d(["\nfrom {\n   opacity: 0;\n   transform: translateY(12px);\n}\nto {\n   opacity: 1;\n   transform: translateY(0);\n}\n"]);return h=function(){return e},e}function g(){var e=d(["\nfrom {\n   opacity: 0;\n   transform: scale(0) rotate(45deg);\n}\nto {\n   opacity: 1;\n   transform: scale(1) rotate(45deg);\n}\n"]);return g=function(){return e},e}function m(){var e=d(["\nfrom {\n   opacity: 0;\n}\nto {\n   opacity: 1;\n}\n"]);return m=function(){return e},e}var j=c.keyframes(m()),b=c.keyframes(g()),y=c.keyframes(h()),v=c.keyframes(x()),w=function(){return t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"11",height:"11",fill:"currentColor",viewBox:"0 0 11 11"},t.jsx("path",{d:"M10.707 1.707A1 1 0 009.293.293l1.414 1.414zm-1.414 9a1 1 0 001.414-1.414l-1.414 1.414zM1.707.293A1 1 0 00.293 1.707L1.707.293zm-1.414 9a1 1 0 101.414 1.414L.293 9.293zm5.914-3.086l4.5-4.5L9.293.293l-4.5 4.5 1.414 1.414zm-1.414 0l4.5 4.5 1.414-1.414-4.5-4.5-1.414 1.414zm1.414-1.414l-4.5-4.5L.293 1.707l4.5 4.5 1.414-1.414zm-1.414 0l-4.5 4.5 1.414 1.414 4.5-4.5-1.414-1.414z"}))},C=function(){return t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"13",height:"11",fill:"currentColor",viewBox:"0 0 13 11"},t.jsx("path",{d:"M1 5.5l-.747-.664a1 1 0 000 1.328L1 5.5zm11 1a1 1 0 100-2v2zM5.747 1.664A1 1 0 104.253.336l1.494 1.328zm-1.494 9a1 1 0 001.494-1.328l-1.494 1.328zM1 6.5h11v-2H1v2zm.747-.336l4-4.5L4.253.336l-4 4.5 1.494 1.328zm-1.494 0l4 4.5 1.494-1.328-4-4.5L.253 6.164z"}))},k=function(e){return t.jsx("svg",Object.assign({},e,{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",fill:"none",viewBox:"0 0 48 48"}),t.jsx("g",{"clip-path":"url(#clip0)"},t.jsx("path",{fill:"#FFBC11",d:"M20.913 4.405c1.16-1.975 4.014-1.975 5.174 0L46.394 38.98c1.174 2-.268 4.519-2.587 4.519H3.193c-2.319 0-3.761-2.52-2.587-4.52L20.913 4.406z"}),t.jsx("path",{stroke:"#000",strokeOpacity:"0.05",d:"M25.656 4.658l20.306 34.576C46.942 40.9 45.74 43 43.807 43H3.193c-1.932 0-3.134-2.1-2.155-3.766L21.344 4.658c.967-1.645 3.345-1.645 4.312 0z"}),t.jsx("circle",{cx:"23.5",cy:"36.5",r:"2.5",fill:"#591515"}),t.jsx("path",{fill:"#591515",d:"M25.844 16.495l-.75 12.008a1.597 1.597 0 01-3.188 0l-.75-12.008a2.349 2.349 0 114.688 0z"})),t.jsx("defs",null,t.jsx("clipPath",{id:"clip0"},t.jsx("path",{fill:"#fff",d:"M0 0H48V48H0z"}))))},z=function(e){return t.jsx("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",fill:"none",viewBox:"0 0 48 48"},e),t.jsx("path",{fill:"url(#paint0_radial)",d:"M30 34.52v.98H18v-.98c0-3.878-1.423-7.621-4-10.52l-.431-.485A14.219 14.219 0 0110 14.093C10 6.36 16.268 0 24 0s14 6.36 14 14.093c0 3.46-1.27 6.836-3.569 9.422L34 24a15.836 15.836 0 00-4 10.52z"}),t.jsx("path",{stroke:"#FF6A00",strokeOpacity:"0.05",d:"M29.5 34.52V35h-11v-.48c0-4-1.468-7.862-4.126-10.852l-.432-.485a13.72 13.72 0 01-3.442-9.09C10.5 6.633 16.548.5 24 .5s13.5 6.133 13.5 13.593a13.72 13.72 0 01-3.442 9.09l-.432.485A16.336 16.336 0 0029.5 34.52z"}),t.jsx("path",{fill:"#9B9B9B",d:"M18 41.844V34.5l2.678.223c2.21.184 4.433.184 6.644 0L30 34.5v7.344A3.156 3.156 0 0126.844 45c-.527 0-1.02.264-1.312.703l-.058.086a1.772 1.772 0 01-2.948 0l-.058-.086A1.578 1.578 0 0021.156 45 3.156 3.156 0 0118 41.844z"}),t.jsx("path",{fill:"url(#paint1_linear)",d:"M18 41.844V34.5l2.678.223c2.21.184 4.433.184 6.644 0L30 34.5v7.344A3.156 3.156 0 0126.844 45c-.527 0-1.02.264-1.312.703l-.058.086a1.772 1.772 0 01-2.948 0l-.058-.086A1.578 1.578 0 0021.156 45 3.156 3.156 0 0118 41.844z"}),t.jsx("path",{fill:"url(#paint2_linear)",d:"M18 41.844V34.5l2.678.223c2.21.184 4.433.184 6.644 0L30 34.5v7.344A3.156 3.156 0 0126.844 45c-.527 0-1.02.264-1.312.703l-.058.086a1.772 1.772 0 01-2.948 0l-.058-.086A1.578 1.578 0 0021.156 45 3.156 3.156 0 0118 41.844z"}),t.jsx("path",{stroke:"#000",strokeOpacity:"0.2",d:"M18.5 41.844v-6.8l2.137.178c2.238.186 4.488.186 6.726 0l2.137-.179v6.801a2.656 2.656 0 01-2.656 2.656c-.694 0-1.343.347-1.728.925l-.058.087a1.272 1.272 0 01-2.116 0l-.058-.087a2.078 2.078 0 00-1.728-.925 2.656 2.656 0 01-2.656-2.656z"}),t.jsx("defs",null,t.jsx("radialGradient",{id:"paint0_radial",cx:"0",cy:"0",r:"1",gradientTransform:"matrix(0 28.5 -22.4789 0 24 7)",gradientUnits:"userSpaceOnUse"},t.jsx("stop",{stopColor:"#FFFB8F"}),t.jsx("stop",{offset:"1",stopColor:"#FFBC11"})),t.jsx("linearGradient",{id:"paint1_linear",x1:"18",x2:"30",y1:"38.5",y2:"38.5",gradientUnits:"userSpaceOnUse"},t.jsx("stop",{stopColor:"#fff",stopOpacity:"0"}),t.jsx("stop",{offset:"0.438",stopColor:"#fff",stopOpacity:"0.42"}),t.jsx("stop",{offset:"1",stopColor:"#fff",stopOpacity:"0"})),t.jsx("linearGradient",{id:"paint2_linear",x1:"24",x2:"24",y1:"45",y2:"44",gradientUnits:"userSpaceOnUse"},t.jsx("stop",{stopOpacity:"0.55"}),t.jsx("stop",{offset:"1",stopOpacity:"0"}))))},F=function(){return t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",fill:"none",viewBox:"0 0 48 48"},t.jsx("circle",{cx:"9.5",cy:"24.5",r:"3.5",fill:"#2D3748"}),t.jsx("circle",{cx:"23.5",cy:"24.5",r:"3.5",fill:"#2D3748"}),t.jsx("circle",{cx:"37.5",cy:"24.5",r:"3.5",fill:"#2D3748"}))},S={idea:"I would love...",issue:"I noticed that...",other:"What do you want to us to know?"},O={idea:"Share an Idea",issue:"Report an issue",other:"Tell us anything!"},I={idea:function(){return t.jsx(z,{sx:{width:6,height:5}})},issue:function(){return t.jsx(k,{sx:{width:6,height:5}})},other:function(){return""}},B=function(e){return t.jsx("button",{"aria-label":e.label,sx:{display:"flex",width:"100%",cursor:"pointer",flexDirection:"column",alignItems:"center",backgroundColor:"gray.1",border:"none",opacity:1,borderRadius:10,color:"gray.7",justifyContent:"center",height:"100%",transition:"background 100ms ease-in-out",":hover":{backgroundColor:"gray.2"},":active":{backgroundColor:"gray.3"}},onClick:function(t){t.preventDefault(),e.onClick()}},e.icon,t.jsx("span",{sx:{fontSize:"0.875rem",fontWeight:"600",marginTop:2,lineHeight:1}},e.children))},D=function(e){return t.jsx("button",{"aria-label":e.label,onClick:e.onClick,className:e.className,sx:{p:0,border:"none",bg:"transparent",borderRadius:4,display:"inline-flex",justifyContent:"center",alignItems:"center",color:"gray.5",width:6,height:6,cursor:"pointer",transition:"color ease-in-out 100ms",":hover":{color:"gray.6"}}},e.children)},L=function(){return t.jsx("div",{sx:{width:"48px",opacity:0,height:"48px",borderRadius:"24px",backgroundColor:"#22DB69",position:"relative",transform:"rotate(45deg)",animation:b+" 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards",animationDelay:"0.3s","&:after":{content:'""',visibility:"hidden",animation:v+" 0.15s ease-out forwards",animationDelay:"0.45s",position:"absolute",borderRight:"4px solid",borderBottom:"4px solid",borderColor:"white",bottom:"14px",left:"15px",height:"20px",width:"10px"}}})};function M(e){var i=e.projectId,o=e.postUrl,s=void 0===o?"https://api.feedback.fish/feedback":o,a=e.userId,l=e.onClose,c=n.useState(!1),d=c[0],x=c[1],h=n.useState(!1),g=h[0],m=h[1],b=n.useState(""),v=b[0],M=b[1],A=n.useState(null),W=A[0],E=A[1],H=v.length>5;return t.jsx(t.ThemeProvider,{theme:u({},p,{styles:{},useBodyStyles:!1,useLocalStorage:!1})},t.jsx(f,{as:"form",action:s,method:"POST",onSubmit:function(e){try{e.preventDefault(),x(!0);var t=new FormData(e.currentTarget),n=new URLSearchParams;return t.forEach((function(e,t){"string"==typeof e&&n.append(t,e)})),a&&n.append("userId",a),Promise.resolve(fetch(s,{method:"POST",body:n}).catch((function(){x(!1)})).then((function(){m(!0),x(!1)}))).then((function(){}))}catch(e){return Promise.reject(e)}},flexDirection:"column",sx:{minHeight:"200px",borderRadius:16,minWidth:"320px",background:"white",px:3,overflow:"hidden",position:"relative",boxShadow:"0 18px 50px -10px rgba(0,0,0,.2)","input, button, textarea":{outline:"none",transition:"100ms ease-in-out",transitionProperty:"box-shadow, background, border-color",boxShadow:"0 0 0 0 rgba(0, 93, 255, 0)"},"*:focus":{outline:"none",boxShadow:"0 0 0 3px rgba(0, 93, 255, 0.6)"}}},W&&!g&&t.jsx(D,{label:"Back",sx:{position:"absolute",left:3,top:3},onClick:function(){return E(null)}},t.jsx(C,null)),t.jsx(D,{label:"Close",onClick:l,sx:{position:"absolute",right:3,top:3,zIndex:1}},t.jsx(w,null)),t.jsx("div",{sx:{justifyContent:"center",alignItems:"center",display:"flex",py:3}},t.jsx("div",{sx:{mr:1,height:"26px",display:"flex",alignItems:"center",justifyItems:"center"}},W?I[W]():""),t.jsx("h1",{sx:{fontSize:"1.25rem",textAlign:"center",display:"inline",color:"gray.9",margin:0,lineHeight:1}},W?O[W]:"What's on your mind?")),W?g?t.jsx("div",{sx:{position:"absolute",left:0,right:0,top:0,bottom:0,background:"white",display:"flex",alignItems:"center",flexDirection:"column",color:"gray.8",justifyContent:"center",animation:j+" 0.2s ease-out"}},t.jsx(L,null),t.jsx("div",{sx:{fontWeight:"600",mt:3,opacity:0,animationDelay:"0.3s",animation:y+" 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards"}},"Thanks! We received your feedback.")):t.jsx(r.Fragment,null,t.jsx("textarea",{name:"text",id:"text",autoFocus:!0,onChange:function(e){return M(e.target.value)},sx:{border:"solid",borderWidth:"2px",borderColor:"gray.3",borderRadius:8,p:2,flex:1,fontFamily:"inherit",fontWeight:500,width:"100%",wordBreak:"break-word",fontSize:"0.875rem",maxWidth:"100%",outline:"none",color:"gray.8",resize:"none","::placeholder":{color:"gray.5"},":focus":{borderColor:"brandBlue.2"}},placeholder:S[W]}),t.jsx("button",{disabled:!H||d,sx:{alignSelf:"flex-end",border:"none",width:"100%",mt:2,backgroundColor:H?"brandBlue.2":"gray.2",borderRadius:7,color:H?"white":"gray.5",fontSize:0,py:2,px:"10px",transition:"all",overflow:"hidden",transitionDuration:"500ms",fontWeight:"500",cursor:H?"pointer":"initial",position:"relative"},type:"submit"},t.jsx("div",{sx:{opacity:d?0:1,fontWeight:"600",fontSize:"0.875rem"}},"Send Feedback"),d&&t.jsx("div",{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",bg:"gray.2",justifyContent:"center",alignItems:"center",animation:j+" 0.1s ease-out"}},t.jsx(t.Spinner,{size:18,color:"blue.5"})))):t.jsx(f,{justifyContent:"space-between",gap:2,sx:{width:"100%",flex:1,alignItems:"stretch","> *":{flex:1}}},t.jsx(B,{icon:t.jsx(k,null),label:"Issue",selected:"issue"===W,onClick:function(){return E("issue")}},"Issue"),t.jsx(B,{icon:t.jsx(z,null),label:"Idea",selected:"idea"===W,onClick:function(){return E("idea")}},"Idea"),t.jsx(B,{icon:t.jsx(F,null),label:"Other",selected:"other"===W,onClick:function(){return E("other")}},"Other")),t.jsx("input",{type:"hidden",id:"projectId",name:"projectId",value:i}),t.jsx("input",{type:"hidden",id:"category",name:"category",value:W||""}),t.jsx("div",{sx:{fontSize:"10px",display:"flex",paddingY:2,justifyContent:"center",alignItems:"center",color:"gray.5"}},t.jsx("svg",{width:"16",height:"11",viewBox:"0 0 16 11",fill:"none",xmlns:"http://www.w3.org/2000/svg",sx:{mr:1,mt:"1px"}},t.jsx("circle",{r:"5.04935",transform:"matrix(-1 0 0 1 10.9394 5.04935)",fill:"#A0AEC0"}),t.jsx("path",{d:"M10.9394 10.0987C8.15075 10.0987 5.89008 7.85999 5.89008 5.09839H15.9888C15.9888 7.85999 13.7281 10.0987 10.9394 10.0987Z",fill:"#2D3748"}),t.jsx("path",{d:"M5.88987 5.04935C5.88987 7.83802 3.60726 10.0987 0.791504 10.0987L0.791504 0C3.60726 -1.2308e-07 5.88987 2.26067 5.88987 5.04935Z",fill:"#CBD5E0"})),"Widget by"," ",t.jsx("a",{sx:{color:"gray.6",ml:1,textDecoration:"none"},href:"https://feedback.fish?ref=widget"},"Feedback Fish"))))}function A(e){var r,s=e.element,a=e.children,l=n.useState(null),c=l[1],d=o.usePopper(s,l[0],{placement:"bottom",modifiers:[{name:"flip",options:{padding:8}}]}),p=d.styles,f=d.attributes,x=function(e){var t={}.scroll,r="object"==typeof window;function i(){return r?t?{width:document.body.scrollWidth,height:document.body.scrollHeight}:{width:window.innerWidth,height:window.innerHeight}:{height:void 0,width:void 0}}var o=n.useState(i),s=o[0],a=o[1];return n.useEffect((function(){if(!r)return function(){return!1};function e(){a(i())}return window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[]),s}(),h=n.useMemo((function(){var e=document.createElement("span");return document.body.appendChild(e),e}),[]);n.useEffect((function(){return function(){document.body.removeChild(h)}}),[]);var g=n.useMemo((function(){var e;return(null!==(e=null==x?void 0:x.width)&&void 0!==e?e:0)<500?{position:"absolute",top:5,bottom:5,left:5,right:5,zIndex:99999}:u({},p.popper,{zIndex:99999})}),[(null!==(r=null==x?void 0:x.width)&&void 0!==r?r:0)<500,p.popper]);return i.createPortal(t.jsx("div",Object.assign({ref:function(e){return c(e)},style:g},f),a),h)}exports.FeedbackForm=function(e){var r=n.useState(null),i=r[0],o=r[1];return e.element||e.triggerComponent?e.element?t.jsx(A,{element:e.element},t.jsx(M,Object.assign({},e))):e.triggerComponent?t.jsx(n.Fragment,null,t.jsx(e.triggerComponent,{onClick:function(e){e.preventDefault(),o(i?null:e.currentTarget)}}),i&&t.jsx(A,{element:i},t.jsx(s,{onOutsideClick:function(e){e.target!==i&&o(null)}},t.jsx(M,Object.assign({},e,{onClose:function(){return o(null)}}))))):null:t.jsx(M,Object.assign({},e))};
+"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("theme-ui"),n=require("react"),r=e(n),i=e(require("react-dom")),o=require("react-popper"),a=e(require("react-outside-click-handler")),s=e(require("@theme-ui/preset-tailwind")),l=require("reflexbox"),c=require("@emotion/core");function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function d(e,t){return t||(t=e.slice(0)),e.raw=t,e}var p=u({},s,{colors:u({},s.colors,{brandBlue:["#E6EFFF","#CCDFFF","#005DFF","#002F80","#304C7C","#20314E","#182439"],brandOrange:["#FFF0E6","#FFD2B3","#FFB580","#FF6A00","#CC5500","#662A00"]}),fontSizes:[12,14,18,24,34,41,46,58,72]}),f=function(e){var n=e.children,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(i[n]=e[n]);return i}(e,["children"]);return"number"==typeof e.gap&&0!==e.gap&&(n=r.Children.map(n,(function(n,r){var i;return n?t.jsx("div",{sx:0!==r?(i={},i["column"===e.flexDirection?"marginTop":"marginLeft"]=e.gap,i):{}},n):n}))),t.jsx(l.Flex,i,n)};function x(){var e=d(["\n  0% {\n\t\theight: 0px;\n\t\twidth: 0px;\n\t\topacity: 0;\n\t\tvisibility: visible;\n  }\n\n  40% {\n\t\theight: 0px;\n\t\twidth: 10px;\n\t\topacity: 1;\n  }\n\n  100% {\n\tvisibility: visible;\n\t\theight: 20px;\n  }\n"]);return x=function(){return e},e}function h(){var e=d(["\nfrom {\n   opacity: 0;\n   transform: translateY(12px);\n}\nto {\n   opacity: 1;\n   transform: translateY(0);\n}\n"]);return h=function(){return e},e}function g(){var e=d(["\nfrom {\n   opacity: 0;\n   transform: scale(0) rotate(45deg);\n}\nto {\n   opacity: 1;\n   transform: scale(1) rotate(45deg);\n}\n"]);return g=function(){return e},e}function m(){var e=d(["\nfrom {\n   opacity: 0;\n}\nto {\n   opacity: 1;\n}\n"]);return m=function(){return e},e}var b=c.keyframes(m()),j=c.keyframes(g()),y=c.keyframes(h()),v=c.keyframes(x()),w=function(){return t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"11",height:"11",fill:"currentColor",viewBox:"0 0 11 11"},t.jsx("path",{d:"M10.707 1.707A1 1 0 009.293.293l1.414 1.414zm-1.414 9a1 1 0 001.414-1.414l-1.414 1.414zM1.707.293A1 1 0 00.293 1.707L1.707.293zm-1.414 9a1 1 0 101.414 1.414L.293 9.293zm5.914-3.086l4.5-4.5L9.293.293l-4.5 4.5 1.414 1.414zm-1.414 0l4.5 4.5 1.414-1.414-4.5-4.5-1.414 1.414zm1.414-1.414l-4.5-4.5L.293 1.707l4.5 4.5 1.414-1.414zm-1.414 0l-4.5 4.5 1.414 1.414 4.5-4.5-1.414-1.414z"}))},C=function(){return t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"13",height:"11",fill:"currentColor",viewBox:"0 0 13 11"},t.jsx("path",{d:"M1 5.5l-.747-.664a1 1 0 000 1.328L1 5.5zm11 1a1 1 0 100-2v2zM5.747 1.664A1 1 0 104.253.336l1.494 1.328zm-1.494 9a1 1 0 001.494-1.328l-1.494 1.328zM1 6.5h11v-2H1v2zm.747-.336l4-4.5L4.253.336l-4 4.5 1.494 1.328zm-1.494 0l4 4.5 1.494-1.328-4-4.5L.253 6.164z"}))},k=function(e){return t.jsx("svg",Object.assign({},e,{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",fill:"none",viewBox:"0 0 48 48"}),t.jsx("g",{"clip-path":"url(#clip0)"},t.jsx("path",{fill:"#FFBC11",d:"M20.913 4.405c1.16-1.975 4.014-1.975 5.174 0L46.394 38.98c1.174 2-.268 4.519-2.587 4.519H3.193c-2.319 0-3.761-2.52-2.587-4.52L20.913 4.406z"}),t.jsx("path",{stroke:"#000",strokeOpacity:"0.05",d:"M25.656 4.658l20.306 34.576C46.942 40.9 45.74 43 43.807 43H3.193c-1.932 0-3.134-2.1-2.155-3.766L21.344 4.658c.967-1.645 3.345-1.645 4.312 0z"}),t.jsx("circle",{cx:"23.5",cy:"36.5",r:"2.5",fill:"#591515"}),t.jsx("path",{fill:"#591515",d:"M25.844 16.495l-.75 12.008a1.597 1.597 0 01-3.188 0l-.75-12.008a2.349 2.349 0 114.688 0z"})),t.jsx("defs",null,t.jsx("clipPath",{id:"clip0"},t.jsx("path",{fill:"#fff",d:"M0 0H48V48H0z"}))))},z=function(e){return t.jsx("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",fill:"none",viewBox:"0 0 48 48"},e),t.jsx("path",{fill:"url(#paint0_radial)",d:"M30 34.52v.98H18v-.98c0-3.878-1.423-7.621-4-10.52l-.431-.485A14.219 14.219 0 0110 14.093C10 6.36 16.268 0 24 0s14 6.36 14 14.093c0 3.46-1.27 6.836-3.569 9.422L34 24a15.836 15.836 0 00-4 10.52z"}),t.jsx("path",{stroke:"#FF6A00",strokeOpacity:"0.05",d:"M29.5 34.52V35h-11v-.48c0-4-1.468-7.862-4.126-10.852l-.432-.485a13.72 13.72 0 01-3.442-9.09C10.5 6.633 16.548.5 24 .5s13.5 6.133 13.5 13.593a13.72 13.72 0 01-3.442 9.09l-.432.485A16.336 16.336 0 0029.5 34.52z"}),t.jsx("path",{fill:"#9B9B9B",d:"M18 41.844V34.5l2.678.223c2.21.184 4.433.184 6.644 0L30 34.5v7.344A3.156 3.156 0 0126.844 45c-.527 0-1.02.264-1.312.703l-.058.086a1.772 1.772 0 01-2.948 0l-.058-.086A1.578 1.578 0 0021.156 45 3.156 3.156 0 0118 41.844z"}),t.jsx("path",{fill:"url(#paint1_linear)",d:"M18 41.844V34.5l2.678.223c2.21.184 4.433.184 6.644 0L30 34.5v7.344A3.156 3.156 0 0126.844 45c-.527 0-1.02.264-1.312.703l-.058.086a1.772 1.772 0 01-2.948 0l-.058-.086A1.578 1.578 0 0021.156 45 3.156 3.156 0 0118 41.844z"}),t.jsx("path",{fill:"url(#paint2_linear)",d:"M18 41.844V34.5l2.678.223c2.21.184 4.433.184 6.644 0L30 34.5v7.344A3.156 3.156 0 0126.844 45c-.527 0-1.02.264-1.312.703l-.058.086a1.772 1.772 0 01-2.948 0l-.058-.086A1.578 1.578 0 0021.156 45 3.156 3.156 0 0118 41.844z"}),t.jsx("path",{stroke:"#000",strokeOpacity:"0.2",d:"M18.5 41.844v-6.8l2.137.178c2.238.186 4.488.186 6.726 0l2.137-.179v6.801a2.656 2.656 0 01-2.656 2.656c-.694 0-1.343.347-1.728.925l-.058.087a1.272 1.272 0 01-2.116 0l-.058-.087a2.078 2.078 0 00-1.728-.925 2.656 2.656 0 01-2.656-2.656z"}),t.jsx("defs",null,t.jsx("radialGradient",{id:"paint0_radial",cx:"0",cy:"0",r:"1",gradientTransform:"matrix(0 28.5 -22.4789 0 24 7)",gradientUnits:"userSpaceOnUse"},t.jsx("stop",{stopColor:"#FFFB8F"}),t.jsx("stop",{offset:"1",stopColor:"#FFBC11"})),t.jsx("linearGradient",{id:"paint1_linear",x1:"18",x2:"30",y1:"38.5",y2:"38.5",gradientUnits:"userSpaceOnUse"},t.jsx("stop",{stopColor:"#fff",stopOpacity:"0"}),t.jsx("stop",{offset:"0.438",stopColor:"#fff",stopOpacity:"0.42"}),t.jsx("stop",{offset:"1",stopColor:"#fff",stopOpacity:"0"})),t.jsx("linearGradient",{id:"paint2_linear",x1:"24",x2:"24",y1:"45",y2:"44",gradientUnits:"userSpaceOnUse"},t.jsx("stop",{stopOpacity:"0.55"}),t.jsx("stop",{offset:"1",stopOpacity:"0"}))))},F=function(){return t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",fill:"none",viewBox:"0 0 48 48"},t.jsx("circle",{cx:"9.5",cy:"24.5",r:"3.5",fill:"#2D3748"}),t.jsx("circle",{cx:"23.5",cy:"24.5",r:"3.5",fill:"#2D3748"}),t.jsx("circle",{cx:"37.5",cy:"24.5",r:"3.5",fill:"#2D3748"}))},S={idea:"I would love...",issue:"I noticed that...",other:"What do you want to us to know?"},O={idea:"Share an Idea",issue:"Report an issue",other:"Tell us anything!"},I={idea:function(){return t.jsx(z,{sx:{width:6,height:5}})},issue:function(){return t.jsx(k,{sx:{width:6,height:5}})},other:function(){return""}},B=function(e){return t.jsx("button",{"aria-label":e.label,sx:{display:"flex",width:"100%",cursor:"pointer",flexDirection:"column",alignItems:"center",backgroundColor:"gray.1",border:"none",opacity:1,borderRadius:10,color:"gray.7",justifyContent:"center",height:"100%",transition:"background 100ms ease-in-out",":hover":{backgroundColor:"gray.2"},":active":{backgroundColor:"gray.3"}},onClick:function(t){t.preventDefault(),e.onClick()}},e.icon,t.jsx("span",{sx:{fontSize:"0.875rem",fontWeight:"600",marginTop:2,lineHeight:1}},e.children))},D=function(e){return t.jsx("button",{"aria-label":e.label,onClick:e.onClick,className:e.className,sx:{p:0,border:"none",bg:"transparent",borderRadius:4,display:"inline-flex",justifyContent:"center",alignItems:"center",color:"gray.5",width:6,height:6,cursor:"pointer",transition:"color ease-in-out 100ms",":hover":{color:"gray.6"}}},e.children)},L=function(){return t.jsx("div",{sx:{width:"48px",opacity:0,height:"48px",borderRadius:"24px",backgroundColor:"#22DB69",position:"relative",transform:"rotate(45deg)",animation:j+" 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards",animationDelay:"0.3s","&:after":{content:'""',visibility:"hidden",animation:v+" 0.15s ease-out forwards",animationDelay:"0.45s",position:"absolute",borderRight:"4px solid",borderBottom:"4px solid",borderColor:"white",bottom:"14px",left:"15px",height:"20px",width:"10px"}}})};function M(e){var i=e.projectId,o=e.postUrl,a=void 0===o?"https://api.feedback.fish/feedback":o,s=e.userId,l=e.onClose,c=n.useState(!1),d=c[0],x=c[1],h=n.useState(!1),g=h[0],m=h[1],j=n.useState(""),v=j[0],M=j[1],A=n.useState(null),W=A[0],E=A[1],H=v.length>3;return n.useEffect((function(){if(g&&l){var e=setTimeout((function(){l()}),5e3);return function(){return clearTimeout(e)}}}),[g]),t.jsx(t.ThemeProvider,{theme:u({},p,{styles:{},useBodyStyles:!1,useLocalStorage:!1})},t.jsx(f,{as:"form",action:a,method:"POST",onSubmit:function(e){try{e.preventDefault(),x(!0);var t=new FormData(e.currentTarget),n=new URLSearchParams;return t.forEach((function(e,t){"string"==typeof e&&n.append(t,e)})),s&&n.append("userId",s),Promise.resolve(fetch(a,{method:"POST",body:n}).catch((function(){x(!1)})).then((function(){m(!0),x(!1)}))).then((function(){}))}catch(e){return Promise.reject(e)}},flexDirection:"column",sx:{minHeight:"200px",borderRadius:16,minWidth:"320px",background:"white",px:3,overflow:"hidden",position:"relative",boxShadow:"0 18px 50px -10px rgba(0,0,0,.2)","input, button, textarea":{outline:"none",transition:"100ms ease-in-out",transitionProperty:"color, box-shadow, background, border-color",boxShadow:"0 0 0 0 rgba(0, 93, 255, 0)"},"*:focus":{outline:"none",boxShadow:"0 0 0 3px rgba(0, 93, 255, 0.6)"}}},W&&!g&&t.jsx(D,{label:"Back",sx:{position:"absolute",left:3,top:3},onClick:function(){E(null),M("")}},t.jsx(C,null)),t.jsx(D,{label:"Close",onClick:l,sx:{position:"absolute",right:3,top:3,zIndex:1}},t.jsx(w,null)),t.jsx("div",{sx:{justifyContent:"center",alignItems:"center",display:"flex",py:3}},t.jsx("div",{sx:{mr:1,height:"26px",display:"flex",alignItems:"center",justifyItems:"center"}},W?I[W]():""),t.jsx("h1",{sx:{fontSize:"1.25rem",textAlign:"center",display:"inline",color:"gray.9",margin:0,lineHeight:1}},W?O[W]:"What's on your mind?")),W?g?t.jsx("div",{sx:{position:"absolute",left:0,right:0,top:0,bottom:0,background:"white",display:"flex",alignItems:"center",flexDirection:"column",color:"gray.8",justifyContent:"center",animation:b+" 0.2s ease-out"}},t.jsx(L,null),t.jsx("div",{sx:{fontWeight:"600",mt:3,opacity:0,animation:y+" 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards"}},"Thanks! We received your feedback."),t.jsx("button",{onClick:function(){E(null),M(""),m(!1)},sx:{border:"none",background:"none",mt:3,fontSize:1,px:3,opacity:0,animation:y+" 0.6s 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards",color:"gray.7",bg:"gray.2",py:1,borderRadius:16,cursor:"pointer",":hover":{color:"gray.8",bg:"gray.3"}}},"Submit more feedback")):t.jsx(r.Fragment,null,t.jsx("textarea",{name:"text",id:"text",autoFocus:!0,onChange:function(e){return M(e.target.value)},sx:{border:"solid",borderWidth:"2px",borderColor:"gray.3",borderRadius:8,p:2,flex:1,fontFamily:"inherit",fontWeight:500,width:"100%",wordBreak:"break-word",fontSize:"0.875rem",maxWidth:"100%",outline:"none",color:"gray.8",resize:"none",appearance:"none","::-webkit-appearance":{appearance:"none"},"::placeholder":{color:"gray.5"},":focus":{borderColor:"brandBlue.2"}},placeholder:S[W]}),t.jsx("button",{disabled:!H||d,sx:{alignSelf:"flex-end",border:"none",width:"100%",mt:2,backgroundColor:H?"brandBlue.2":"gray.2",borderRadius:7,color:H?"white":"gray.5",fontSize:0,py:2,px:"10px",transition:"all",overflow:"hidden",transitionDuration:"500ms",fontWeight:"500",cursor:H?"pointer":"initial",position:"relative"},type:"submit"},t.jsx("div",{sx:{opacity:d?0:1,fontWeight:"600",fontSize:"0.875rem"}},"Send Feedback"),d&&t.jsx("div",{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",bg:"gray.2",justifyContent:"center",alignItems:"center",animation:b+" 0.1s ease-out"}},t.jsx(t.Spinner,{size:18,color:"blue.5"})))):t.jsx(f,{justifyContent:"space-between",gap:2,sx:{width:"100%",flex:1,alignItems:"stretch","> *":{flex:1}}},t.jsx(B,{icon:t.jsx(k,null),label:"Issue",selected:"issue"===W,onClick:function(){return E("issue")}},"Issue"),t.jsx(B,{icon:t.jsx(z,null),label:"Idea",selected:"idea"===W,onClick:function(){return E("idea")}},"Idea"),t.jsx(B,{icon:t.jsx(F,null),label:"Other",selected:"other"===W,onClick:function(){return E("other")}},"Other")),t.jsx("input",{type:"hidden",id:"projectId",name:"projectId",value:i}),t.jsx("input",{type:"hidden",id:"category",name:"category",value:W||""}),t.jsx("div",{sx:{fontSize:"10px",display:"flex",paddingY:2,justifyContent:"center",alignItems:"center",color:"gray.5"}},t.jsx("svg",{width:"16",height:"11",viewBox:"0 0 16 11",fill:"none",xmlns:"http://www.w3.org/2000/svg",sx:{mr:1,mt:"1px"}},t.jsx("circle",{r:"5.04935",transform:"matrix(-1 0 0 1 10.9394 5.04935)",fill:"#A0AEC0"}),t.jsx("path",{d:"M10.9394 10.0987C8.15075 10.0987 5.89008 7.85999 5.89008 5.09839H15.9888C15.9888 7.85999 13.7281 10.0987 10.9394 10.0987Z",fill:"#2D3748"}),t.jsx("path",{d:"M5.88987 5.04935C5.88987 7.83802 3.60726 10.0987 0.791504 10.0987L0.791504 0C3.60726 -1.2308e-07 5.88987 2.26067 5.88987 5.04935Z",fill:"#CBD5E0"})),"Widget by"," ",t.jsx("a",{sx:{color:"gray.6",ml:1,textDecoration:"none"},href:"https://feedback.fish?ref=widget"},"Feedback Fish"))))}function A(e){var r,a=e.element,s=e.children,l=n.useState(null),c=l[1],d=o.usePopper(a,l[0],{placement:"bottom",modifiers:[{name:"flip",options:{padding:8}}]}),p=d.styles,f=d.attributes,x=function(e){var t={}.scroll,r="object"==typeof window;function i(){return r?t?{width:document.body.scrollWidth,height:document.body.scrollHeight}:{width:window.innerWidth,height:window.innerHeight}:{height:void 0,width:void 0}}var o=n.useState(i),a=o[0],s=o[1];return n.useEffect((function(){if(!r)return function(){return!1};function e(){s(i())}return window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[]),a}(),h=n.useMemo((function(){var e=document.createElement("span");return document.body.appendChild(e),e}),[]);n.useEffect((function(){return function(){document.body.removeChild(h)}}),[]);var g=n.useMemo((function(){var e;return(null!==(e=null==x?void 0:x.width)&&void 0!==e?e:0)<500?{position:"absolute",top:5,bottom:5,left:5,right:5,zIndex:99999}:u({},p.popper,{zIndex:99999})}),[(null!==(r=null==x?void 0:x.width)&&void 0!==r?r:0)<500,p.popper]);return i.createPortal(t.jsx("div",Object.assign({ref:function(e){return c(e)},style:g},f),s),h)}exports.FeedbackForm=function(e){var r=n.useState(null),i=r[0],o=r[1];return e.element||e.triggerComponent?e.element?t.jsx(A,{element:e.element},t.jsx(M,Object.assign({},e))):e.triggerComponent?t.jsx(n.Fragment,null,t.jsx(e.triggerComponent,{onClick:function(e){e.preventDefault(),o(i?null:e.currentTarget)}}),i&&t.jsx(A,{element:i},t.jsx(a,{onOutsideClick:function(e){e.target!==i&&o(null)}},t.jsx(M,Object.assign({},e,{onClose:function(){return o(null)}}))))):null:t.jsx(M,Object.assign({},e))};
 //# sourceMappingURL=feedback-fish.cjs.production.min.js.map

dist/feedback-fish.esm.js

@@ -473,3 +473,12 @@ import { jsx, ThemeProvider, Spinner } from 'theme-ui';
 
-  var enabledSubmit = feedbackText.length > 5;
+  var enabledSubmit = feedbackText.length > 3;
+  useEffect(function () {
+    if (!submitted || !onClose) return;
+    var timeout = setTimeout(function () {
+      onClose();
+    }, 5000);
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, [submitted]);
   return jsx(ThemeProvider, {
@@ -527,3 +536,3 @@ theme: _extends({}, theme, {
         transition: '100ms ease-in-out',
-        transitionProperty: 'box-shadow, background, border-color',
+        transitionProperty: 'color, box-shadow, background, border-color',
         boxShadow: '0 0 0 0 rgba(0, 93, 255, 0)'
@@ -544,3 +553,4 @@ },
     onClick: function onClick() {
-      return setCategory(null);
+      setCategory(null);
+      setFeedback('');
     }
@@ -635,2 +645,6 @@ }, jsx(IconBack, null)), jsx(IconButton, {
       resize: 'none',
+      appearance: 'none',
+      '::-webkit-appearance': {
+        appearance: 'none'
+      },
       '::placeholder': {
@@ -707,6 +721,29 @@ color: 'gray.5'
       opacity: 0,
-      animationDelay: '0.3s',
-      animation: enterUpAnimation + " 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards"
+      animation: enterUpAnimation + " 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards"
     }
-  }, "Thanks! We received your feedback.")), jsx("input", {
+  }, "Thanks! We received your feedback."), jsx("button", {
+    onClick: function onClick() {
+      setCategory(null);
+      setFeedback('');
+      setSubmitted(false);
+    },
+    sx: {
+      border: 'none',
+      background: 'none',
+      mt: 3,
+      fontSize: 1,
+      px: 3,
+      opacity: 0,
+      animation: enterUpAnimation + " 0.6s 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards",
+      color: 'gray.7',
+      bg: 'gray.2',
+      py: 1,
+      borderRadius: 16,
+      cursor: 'pointer',
+      ':hover': {
+        color: 'gray.8',
+        bg: 'gray.3'
+      }
+    }
+  }, "Submit more feedback")), jsx("input", {
     type: "hidden",
@@ -713,0 +750,0 @@ id: "projectId",

dist/packages/app/src/components/Layout.d.ts

@@ -12,2 +12,3 @@ import React from "react";
     outline: string;
+    fontFamily: string;
 };
@@ -14,0 +15,0 @@ export declare const NavButton: React.FC<{

package.json

 {
   "name": "feedback-fish",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "license": "MIT",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

235285

increased by4.12%

Lines of code

2841

increased by4.18%

No dependency changes