@tinacms/react-forms - npm Package Compare versions

Comparing version 0.31.0 to 0.32.0-alpha.1

build/index.js

@@ -1,1 +0,1 @@
-!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("styled-components"),require("@tinacms/icons"),require("react-dismissible"),require("react-dom"),require("@tinacms/form-builder"),require("@tinacms/styles"),require("react-beautiful-dnd"),require("@tinacms/react-modals"),require("@tinacms/react-core")):"function"==typeof define&&define.amd?define(["exports","react","styled-components","@tinacms/icons","react-dismissible","react-dom","@tinacms/form-builder","@tinacms/styles","react-beautiful-dnd","@tinacms/react-modals","@tinacms/react-core"],e):e((n=n||self)["@tinacms/react-forms"]={},n.React,n.styled,n.icons,n.reactDismissible,n.reactDom,n.formBuilder,n.styles,n.reactBeautifulDnd,n.reactModals,n.reactCore)}(this,function(n,s,i,e,o,a,d,u,p,r,t){"use strict";var l="default"in i?i.default:i,c=function(){return(c=Object.assign||function(n){for(var e,t=1,i=arguments.length;t<i;t++)for(var r in e=arguments[t])Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}).apply(this,arguments)};function m(a,o,l,c){return new(l=l||Promise)(function(n,e){function t(n){try{r(c.next(n))}catch(n){e(n)}}function i(n){try{r(c.throw(n))}catch(n){e(n)}}function r(e){e.done?n(e.value):new l(function(n){n(e.value)}).then(t,i)}r((c=c.apply(a,o||[])).next())})}function f(t,i){var r,a,o,n,l={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return n={next:e(0),throw:e(1),return:e(2)},"function"==typeof Symbol&&(n[Symbol.iterator]=function(){return this}),n;function e(e){return function(n){return function(e){if(r)throw new TypeError("Generator is already executing.");for(;l;)try{if(r=1,a&&(o=2&e[0]?a.return:e[0]?a.throw||((o=a.return)&&o.call(a),0):a.next)&&!(o=o.call(a,e[1])).done)return o;switch(a=0,o&&(e=[2&e[0],o.value]),e[0]){case 0:case 1:o=e;break;case 4:return l.label++,{value:e[1],done:!1};case 5:l.label++,a=e[1],e=[0];continue;case 7:e=l.ops.pop(),l.trys.pop();continue;default:if(!(o=0<(o=l.trys).length&&o[o.length-1])&&(6===e[0]||2===e[0])){l=0;continue}if(3===e[0]&&(!o||e[1]>o[0]&&e[1]<o[3])){l.label=e[1];break}if(6===e[0]&&l.label<o[1]){l.label=o[1],o=e;break}if(o&&l.label<o[2]){l.label=o[2],l.ops.push(e);break}o[2]&&l.ops.pop(),l.trys.pop();continue}e=i.call(t,l)}catch(n){e=[6,n],a=0}finally{r=o=0}if(5&e[0])throw e[1];return{value:e[0]?e[1]:void 0,done:!0}}([e,n])}}}function g(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}function h(n){var e=n.actions,t=n.form,i=s.useState(!1),r=i[0],a=i[1];return s.createElement(s.Fragment,null,s.createElement(w,{onClick:function(){return a(function(n){return!n})}}),s.createElement(k,{open:r},s.createElement(o.Dismissible,{click:!0,escape:!0,disabled:!r,onDismiss:function(){a(function(n){return!n})}},e.map(function(n,e){return s.createElement(n,{form:t,key:e})}))))}var b,v,y,x,w=l(function(n){return s.createElement("button",c({},n),s.createElement(e.EllipsisVerticalIcon,null))}).withConfig({displayName:"MoreActionsButton",componentId:"sc-1atgntc"})(b=b||g(["\n  height: 64px;\n  width: 40px;\n  align-self: stretch;\n  background-color: transparent;\n  background-position: center;\n  background-size: auto 18px;\n  background-repeat: no-repeat;\n  border: 0;\n  margin: 0 -16px 0 8px;\n  outline: none;\n  cursor: pointer;\n  transition: opacity 85ms ease-out;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &:hover {\n    background-color: var(--tina-color-grey-1);\n    fill: var(--tina-color-grey-8);\n  }\n"],["\n  height: 64px;\n  width: 40px;\n  align-self: stretch;\n  background-color: transparent;\n  background-position: center;\n  background-size: auto 18px;\n  background-repeat: no-repeat;\n  border: 0;\n  margin: 0 -16px 0 8px;\n  outline: none;\n  cursor: pointer;\n  transition: opacity 85ms ease-out;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &:hover {\n    background-color: var(--tina-color-grey-1);\n    fill: var(--tina-color-grey-8);\n  }\n"])),k=l.div.withConfig({displayName:"ActionsOverlay",componentId:"sc-15j8abz"})(y=y||g(["\n  min-width: 192px;\n  border-radius: var(--tina-radius-big);\n  border: 1px solid #efefef;\n  display: block;\n  position: absolute;\n  bottom: var(--tina-padding-big);\n  right: var(--tina-padding-big);\n  transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);\n  opacity: 0;\n  pointer-events: none;\n  transition: all 85ms ease-out;\n  transform-origin: 100% 100%;\n  box-shadow: var(--tina-shadow-big);\n  background-color: white;\n  overflow: hidden;\n  z-index: var(--tina-z-index-1);\n  ",";\n"],["\n  min-width: 192px;\n  border-radius: var(--tina-radius-big);\n  border: 1px solid #efefef;\n  display: block;\n  position: absolute;\n  bottom: var(--tina-padding-big);\n  right: var(--tina-padding-big);\n  transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);\n  opacity: 0;\n  pointer-events: none;\n  transition: all 85ms ease-out;\n  transform-origin: 100% 100%;\n  box-shadow: var(--tina-shadow-big);\n  background-color: white;\n  overflow: hidden;\n  z-index: var(--tina-z-index-1);\n  ",";\n"]),function(n){return n.open&&i.css(v=v||g(["\n      opacity: 1;\n      pointer-events: all;\n      transform: translate3d(0, -28px, 0) scale3d(1, 1, 1);\n    "],["\n      opacity: 1;\n      pointer-events: all;\n      transform: translate3d(0, -28px, 0) scale3d(1, 1, 1);\n    "]))}),E=l.button.withConfig({displayName:"ActionButton",componentId:"sc-aiskpq"})(x=x||g(["\n  position: relative;\n  text-align: center;\n  font-size: var(--tina-font-size-1);\n  padding: 0 12px;\n  height: 40px;\n  font-weight: var(--tina-font-weight-regular);\n  width: 100%;\n  background: none;\n  cursor: pointer;\n  outline: none;\n  border: 0;\n  transition: all var(--tina-timing-medium) ease-out;\n  &:hover {\n    color: var(--tina-color-primary);\n    background-color: var(--tina-color-grey-1);\n  }\n  &:not(:last-child) {\n    border-bottom: 1px solid var(--tina-color-grey-2);\n  }\n"],["\n  position: relative;\n  text-align: center;\n  font-size: var(--tina-font-size-1);\n  padding: 0 12px;\n  height: 40px;\n  font-weight: var(--tina-font-weight-regular);\n  width: 100%;\n  background: none;\n  cursor: pointer;\n  outline: none;\n  border: 0;\n  transition: all var(--tina-timing-medium) ease-out;\n  &:hover {\n    color: var(--tina-color-primary);\n    background-color: var(--tina-color-grey-1);\n  }\n  &:not(:last-child) {\n    border-bottom: 1px solid var(--tina-color-grey-2);\n  }\n"])),z=s.createContext(function(){return null});function C(n){var e=n.dotSize,t=void 0===e?8:e,i=n.color,r=void 0===i?"white":i;return s.createElement("div",null,s.createElement(q,{dotSize:t,color:r}),s.createElement(q,{dotSize:t,color:r}),s.createElement(q,{dotSize:t,color:r}))}function B(n){var e=n.pristine,t=n.reset,i=n.children,r=s.useState(!1),a=r[0],o=r[1];return s.createElement(s.Fragment,null,s.createElement(M,{onClick:function(){o(function(n){return!n})},disabled:e},i),a&&s.createElement(D,{reset:t,close:function(){return o(!1)}}))}var j,S,F,O,P,I=l(function(n){var e=n.children,t=function(n,e){var t={};for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&e.indexOf(i)<0&&(t[i]=n[i]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(n);r<i.length;r++)e.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(n,i[r])&&(t[i[r]]=n[i[r]])}return t}(n,["children"]),i=s.useRef(null),r=s.useCallback(function(n){return i.current?a.createPortal(n.children,i.current):null},[i.current]);return s.createElement(z.Provider,{value:r},s.createElement("div",c({ref:i},t),e))}).withConfig({displayName:"FormPortalProvider",componentId:"sc-1bn9axm"})(j=j||g(["\n  height: 100%;\n  scrollbar-width: none;\n"],["\n  height: 100%;\n  scrollbar-width: none;\n"])),N=i.keyframes(S=S||g(["\n  0% { transform: scale(0.1); }\n  50% { transform: scale(1); }\n  90% { transform: scale(0.1); }\n  100% { transform: scale(0.1); }\n"],["\n  0% { transform: scale(0.1); }\n  50% { transform: scale(1); }\n  90% { transform: scale(0.1); }\n  100% { transform: scale(0.1); }\n"])),q=l.span.withConfig({displayName:"SingleDot",componentId:"sc-67w58h"})(O=O||g(["\n  animation: "," 2s linear infinite;\n  display: inline-block;\n  margin-right: 4px;\n  :nth-child(2) {\n    animation-delay: 0.3s;\n  }\n  :nth-child(3) {\n    animation-delay: 0.5s;\n  }\n  ","\n"],["\n  animation: "," 2s linear infinite;\n  display: inline-block;\n  margin-right: 4px;\n  :nth-child(2) {\n    animation-delay: 0.3s;\n  }\n  :nth-child(3) {\n    animation-delay: 0.5s;\n  }\n  ","\n"]),N,function(n){var e=n.color,t=n.dotSize;return i.css(F=F||g(["\n      background: ",";\n      width: ","px;\n      height: ","px;\n      border-radius: ","px;\n    "],["\n      background: ",";\n      width: ","px;\n      height: ","px;\n      border-radius: ","px;\n    "]),e,t,t,t)}),D=function(n){var e=n.close,t=n.reset;return s.createElement(r.Modal,null,s.createElement(r.ModalPopup,null,s.createElement(r.ModalHeader,{close:e},"Reset"),s.createElement(r.ModalBody,{padded:!0},s.createElement("p",null,"Are you sure you want to reset all changes?")),s.createElement(r.ModalActions,null,s.createElement(u.Button,{onClick:e},"Cancel"),s.createElement(u.Button,{margin:!0,primary:!0,onClick:function(){return m(void 0,void 0,void 0,function(){return f(this,function(n){switch(n.label){case 0:return[4,t()];case 1:return n.sent(),e(),[2]}})})}},"Reset"))))},M=l(u.Button).withConfig({displayName:"ResetButton",componentId:"sc-1epa276"})(P=P||g(["\n  flex: 0 0 96px;\n"],["\n  flex: 0 0 96px;\n"]));function A(){return s.createElement(Q,null,s.createElement(J,null,"🤔"),s.createElement("h3",null,"Hey, you don't have any fields added to this form."),s.createElement("p",null,s.createElement(U,{href:"https://tinacms.org/docs/fields",target:"_blank"},s.createElement(J,null,"📖")," Field Setup Guide")))}var R,_,G,H,L,V,W,T,J=l.span.withConfig({displayName:"Emoji",componentId:"sc-1ywomn6"})(R=R||g(["\n  font-size: 40px;\n  line-height: 1;\n  display: inline-block;\n"],["\n  font-size: 40px;\n  line-height: 1;\n  display: inline-block;\n"])),K=i.keyframes(_=_||g(["\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"],["\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"])),Q=l.div.withConfig({displayName:"EmptyState",componentId:"sc-1oxdh5z"})(G=G||g(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: var(--tina-padding-big) var(--tina-padding-big) 64px\n    var(--tina-padding-big);\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  animation-name: ",";\n  animation-delay: 300ms;\n  animation-timing-function: ease-out;\n  animation-iteration-count: 1;\n  animation-fill-mode: both;\n  animation-duration: 150ms;\n  > *:first-child {\n    margin: 0 0 var(--tina-padding-big) 0;\n  }\n  > "," {\n    display: block;\n  }\n  h3 {\n    font-size: var(--tina-font-size-5);\n    font-weight: normal;\n    color: inherit;\n    display: block;\n    margin: 0 0 var(--tina-padding-big) 0;\n    "," {\n      font-size: 1em;\n    }\n  }\n  p {\n    display: block;\n    margin: 0 0 var(--tina-padding-big) 0;\n  }\n"],["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: var(--tina-padding-big) var(--tina-padding-big) 64px\n    var(--tina-padding-big);\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  animation-name: ",";\n  animation-delay: 300ms;\n  animation-timing-function: ease-out;\n  animation-iteration-count: 1;\n  animation-fill-mode: both;\n  animation-duration: 150ms;\n  > *:first-child {\n    margin: 0 0 var(--tina-padding-big) 0;\n  }\n  > "," {\n    display: block;\n  }\n  h3 {\n    font-size: var(--tina-font-size-5);\n    font-weight: normal;\n    color: inherit;\n    display: block;\n    margin: 0 0 var(--tina-padding-big) 0;\n    "," {\n      font-size: 1em;\n    }\n  }\n  p {\n    display: block;\n    margin: 0 0 var(--tina-padding-big) 0;\n  }\n"]),K,J,J),U=l.a.withConfig({displayName:"LinkButton",componentId:"sc-i30s9h"})(H=H||g(["\n  text-align: center;\n  border: 0;\n  border-radius: var(--tina-radius-big);\n  border: 1px solid var(--tina-color-grey-2);\n  box-shadow: var(--tina-shadow-small);\n  font-weight: var(--tina-font-weight-regular);\n  cursor: pointer;\n  font-size: var(--tina-font-size-0);\n  transition: all var(--tina-timing-short) ease-out;\n  background-color: white;\n  color: var(--tina-color-grey-8);\n  padding: var(--tina-padding-small) var(--tina-padding-big)\n    var(--tina-padding-small) 56px;\n  position: relative;\n  text-decoration: none;\n  display: inline-block;\n  "," {\n    font-size: 24px;\n    position: absolute;\n    left: var(--tina-padding-big);\n    top: 50%;\n    transform-origin: 50% 50%;\n    transform: translate3d(0, -50%, 0);\n    transition: all var(--tina-timing-short) ease-out;\n  }\n  &:hover {\n    color: var(--tina-color-primary);\n    "," {\n      transform: translate3d(0, -50%, 0);\n    }\n  }\n"],["\n  text-align: center;\n  border: 0;\n  border-radius: var(--tina-radius-big);\n  border: 1px solid var(--tina-color-grey-2);\n  box-shadow: var(--tina-shadow-small);\n  font-weight: var(--tina-font-weight-regular);\n  cursor: pointer;\n  font-size: var(--tina-font-size-0);\n  transition: all var(--tina-timing-short) ease-out;\n  background-color: white;\n  color: var(--tina-color-grey-8);\n  padding: var(--tina-padding-small) var(--tina-padding-big)\n    var(--tina-padding-small) 56px;\n  position: relative;\n  text-decoration: none;\n  display: inline-block;\n  "," {\n    font-size: 24px;\n    position: absolute;\n    left: var(--tina-padding-big);\n    top: 50%;\n    transform-origin: 50% 50%;\n    transform: translate3d(0, -50%, 0);\n    transition: all var(--tina-timing-short) ease-out;\n  }\n  &:hover {\n    color: var(--tina-color-primary);\n    "," {\n      transform: translate3d(0, -50%, 0);\n    }\n  }\n"]),J,J),X=l.div.withConfig({displayName:"Wrapper",componentId:"sc-5xrk5z"})(L=L||g(["\n  display: block;\n  margin: 0 auto;\n  width: 100%;\n"],["\n  display: block;\n  margin: 0 auto;\n  width: 100%;\n"])),Y=l.div.withConfig({displayName:"FormBody",componentId:"sc-155ntqm"})(V=V||g(["\n  position: relative;\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  overflow: auto;\n  border-top: 1px solid var(--tina-color-grey-2);\n  background-color: #f6f6f9;\n\n  "," {\n    height: 100%;\n  }\n"],["\n  position: relative;\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  overflow: auto;\n  border-top: 1px solid var(--tina-color-grey-2);\n  background-color: #f6f6f9;\n\n  "," {\n    height: 100%;\n  }\n"]),X),Z=l.div.withConfig({displayName:"FormFooter",componentId:"sc-a22wd5"})(W=W||g(["\n  position: relative;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 64px;\n  background-color: white;\n  border-top: 1px solid var(--tina-color-grey-2);\n\n  "," {\n    flex: 1 0 auto;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0 16px;\n  }\n"],["\n  position: relative;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 64px;\n  background-color: white;\n  border-top: 1px solid var(--tina-color-grey-2);\n\n  "," {\n    flex: 1 0 auto;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0 16px;\n  }\n"]),X),$=l(u.Button).withConfig({displayName:"SaveButton",componentId:"sc-uak9wm"})(T=T||g(["\n  flex: 1.5 0 auto;\n  padding: 12px 24px;\n"],["\n  flex: 1.5 0 auto;\n  padding: 12px 24px;\n"]));n.ActionButton=E,n.FormActionMenu=h,n.FormBody=Y,n.FormPortalProvider=I,n.FormView=function(n){var e,a=this,o=n.activeForm,l=(null===(e=t.useCMS().sidebar)||void 0===e?void 0:e.buttons)||o.buttons,c=s.useCallback(function(n){if(n.destination&&o){var e=n.type;o.mutators.move(e,n.source.index,n.destination.index)}},[o]);return s.createElement(d.FormBuilder,{form:o},function(n){var e=n.handleSubmit,t=n.pristine,i=n.form,r=n.submitting;return s.createElement(p.DragDropContext,{onDragEnd:c},s.createElement(Y,null,s.createElement(I,null,s.createElement(X,null,o&&(o.fields.length?s.createElement(d.FieldsBuilder,{form:o,fields:o.fields}):s.createElement(A,null))))),s.createElement(Z,null,s.createElement(X,null,o.reset&&s.createElement(B,{pristine:t,reset:function(){return m(a,void 0,void 0,function(){return f(this,function(n){switch(n.label){case 0:return i.reset(),[4,o.reset()];case 1:return n.sent(),[2]}})})}},l.reset),s.createElement(u.Button,{onClick:function(){return e()},disabled:t,busy:r,primary:!0,grow:!0,margin:!0},r&&s.createElement(C,null),!r&&l.save),0<o.actions.length&&s.createElement(h,{actions:o.actions,form:o}))))})},n.LoadingDots=C,n.ResetForm=B,n.SaveButton=$,n.Wrapper=X,n.useFormPortal=function(){return s.useContext(z)},Object.defineProperty(n,"__esModule",{value:!0})});
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("styled-components"),require("@tinacms/icons"),require("react-dismissible"),require("react-dom"),require("@tinacms/form-builder"),require("@tinacms/styles"),require("react-beautiful-dnd"),require("@tinacms/react-modals"),require("@tinacms/react-core")):"function"==typeof define&&define.amd?define(["exports","react","styled-components","@tinacms/icons","react-dismissible","react-dom","@tinacms/form-builder","@tinacms/styles","react-beautiful-dnd","@tinacms/react-modals","@tinacms/react-core"],e):e((n=n||self)["@tinacms/react-forms"]={},n.React,n.styled,n.icons,n.reactDismissible,n.reactDom,n.formBuilder,n.styles,n.reactBeautifulDnd,n.reactModals,n.reactCore)}(this,function(n,s,i,e,o,a,d,u,p,r,t){"use strict";var l="default"in i?i.default:i,c=function(){return(c=Object.assign||function(n){for(var e,t=1,i=arguments.length;t<i;t++)for(var r in e=arguments[t])Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}).apply(this,arguments)};function m(a,o,l,c){return new(l=l||Promise)(function(n,e){function t(n){try{r(c.next(n))}catch(n){e(n)}}function i(n){try{r(c.throw(n))}catch(n){e(n)}}function r(e){e.done?n(e.value):new l(function(n){n(e.value)}).then(t,i)}r((c=c.apply(a,o||[])).next())})}function f(t,i){var r,a,o,n,l={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return n={next:e(0),throw:e(1),return:e(2)},"function"==typeof Symbol&&(n[Symbol.iterator]=function(){return this}),n;function e(e){return function(n){return function(e){if(r)throw new TypeError("Generator is already executing.");for(;l;)try{if(r=1,a&&(o=2&e[0]?a.return:e[0]?a.throw||((o=a.return)&&o.call(a),0):a.next)&&!(o=o.call(a,e[1])).done)return o;switch(a=0,o&&(e=[2&e[0],o.value]),e[0]){case 0:case 1:o=e;break;case 4:return l.label++,{value:e[1],done:!1};case 5:l.label++,a=e[1],e=[0];continue;case 7:e=l.ops.pop(),l.trys.pop();continue;default:if(!(o=0<(o=l.trys).length&&o[o.length-1])&&(6===e[0]||2===e[0])){l=0;continue}if(3===e[0]&&(!o||e[1]>o[0]&&e[1]<o[3])){l.label=e[1];break}if(6===e[0]&&l.label<o[1]){l.label=o[1],o=e;break}if(o&&l.label<o[2]){l.label=o[2],l.ops.push(e);break}o[2]&&l.ops.pop(),l.trys.pop();continue}e=i.call(t,l)}catch(n){e=[6,n],a=0}finally{r=o=0}if(5&e[0])throw e[1];return{value:e[0]?e[1]:void 0,done:!0}}([e,n])}}}function g(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}function h(n){var e=n.actions,t=n.form,i=s.useState(!1),r=i[0],a=i[1];return s.createElement(s.Fragment,null,s.createElement(w,{onClick:function(){return a(function(n){return!n})}}),s.createElement(k,{open:r},s.createElement(o.Dismissible,{click:!0,escape:!0,disabled:!r,onDismiss:function(){a(function(n){return!n})}},e.map(function(n,e){return s.createElement(n,{form:t,key:e})}))))}var b,v,y,x,w=l(function(n){return s.createElement("button",c({},n),s.createElement(e.EllipsisVerticalIcon,null))}).withConfig({displayName:"MoreActionsButton",componentId:"sc-2ank58"})(b=b||g(["\n  height: 64px;\n  width: 40px;\n  align-self: stretch;\n  background-color: transparent;\n  background-position: center;\n  background-size: auto 18px;\n  background-repeat: no-repeat;\n  border: 0;\n  margin: 0 -16px 0 8px;\n  outline: none;\n  cursor: pointer;\n  transition: opacity 85ms ease-out;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &:hover {\n    background-color: var(--tina-color-grey-1);\n    fill: var(--tina-color-grey-8);\n  }\n"],["\n  height: 64px;\n  width: 40px;\n  align-self: stretch;\n  background-color: transparent;\n  background-position: center;\n  background-size: auto 18px;\n  background-repeat: no-repeat;\n  border: 0;\n  margin: 0 -16px 0 8px;\n  outline: none;\n  cursor: pointer;\n  transition: opacity 85ms ease-out;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &:hover {\n    background-color: var(--tina-color-grey-1);\n    fill: var(--tina-color-grey-8);\n  }\n"])),k=l.div.withConfig({displayName:"ActionsOverlay",componentId:"sc-1yq7hy8"})(y=y||g(["\n  min-width: 192px;\n  border-radius: var(--tina-radius-big);\n  border: 1px solid #efefef;\n  display: block;\n  position: absolute;\n  bottom: var(--tina-padding-big);\n  right: var(--tina-padding-big);\n  transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);\n  opacity: 0;\n  pointer-events: none;\n  transition: all 85ms ease-out;\n  transform-origin: 100% 100%;\n  box-shadow: var(--tina-shadow-big);\n  background-color: white;\n  overflow: hidden;\n  z-index: var(--tina-z-index-1);\n  ",";\n"],["\n  min-width: 192px;\n  border-radius: var(--tina-radius-big);\n  border: 1px solid #efefef;\n  display: block;\n  position: absolute;\n  bottom: var(--tina-padding-big);\n  right: var(--tina-padding-big);\n  transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);\n  opacity: 0;\n  pointer-events: none;\n  transition: all 85ms ease-out;\n  transform-origin: 100% 100%;\n  box-shadow: var(--tina-shadow-big);\n  background-color: white;\n  overflow: hidden;\n  z-index: var(--tina-z-index-1);\n  ",";\n"]),function(n){return n.open&&i.css(v=v||g(["\n      opacity: 1;\n      pointer-events: all;\n      transform: translate3d(0, -28px, 0) scale3d(1, 1, 1);\n    "],["\n      opacity: 1;\n      pointer-events: all;\n      transform: translate3d(0, -28px, 0) scale3d(1, 1, 1);\n    "]))}),E=l.button.withConfig({displayName:"ActionButton",componentId:"sc-b9rjmz"})(x=x||g(["\n  position: relative;\n  text-align: center;\n  font-size: var(--tina-font-size-1);\n  padding: 0 12px;\n  height: 40px;\n  font-weight: var(--tina-font-weight-regular);\n  width: 100%;\n  background: none;\n  cursor: pointer;\n  outline: none;\n  border: 0;\n  transition: all var(--tina-timing-medium) ease-out;\n  &:hover {\n    color: var(--tina-color-primary);\n    background-color: var(--tina-color-grey-1);\n  }\n  &:not(:last-child) {\n    border-bottom: 1px solid var(--tina-color-grey-2);\n  }\n"],["\n  position: relative;\n  text-align: center;\n  font-size: var(--tina-font-size-1);\n  padding: 0 12px;\n  height: 40px;\n  font-weight: var(--tina-font-weight-regular);\n  width: 100%;\n  background: none;\n  cursor: pointer;\n  outline: none;\n  border: 0;\n  transition: all var(--tina-timing-medium) ease-out;\n  &:hover {\n    color: var(--tina-color-primary);\n    background-color: var(--tina-color-grey-1);\n  }\n  &:not(:last-child) {\n    border-bottom: 1px solid var(--tina-color-grey-2);\n  }\n"])),z=s.createContext(function(){return null});function C(n){var e=n.dotSize,t=void 0===e?8:e,i=n.color,r=void 0===i?"white":i;return s.createElement("div",null,s.createElement(q,{dotSize:t,color:r}),s.createElement(q,{dotSize:t,color:r}),s.createElement(q,{dotSize:t,color:r}))}function j(n){var e=n.pristine,t=n.reset,i=n.children,r=s.useState(!1),a=r[0],o=r[1];return s.createElement(s.Fragment,null,s.createElement(M,{onClick:function(){o(function(n){return!n})},disabled:e},i),a&&s.createElement(D,{reset:t,close:function(){return o(!1)}}))}var B,S,F,O,P,I=l(function(n){var e=n.children,t=function(n,e){var t={};for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&e.indexOf(i)<0&&(t[i]=n[i]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(n);r<i.length;r++)e.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(n,i[r])&&(t[i[r]]=n[i[r]])}return t}(n,["children"]),i=s.useRef(null),r=s.useCallback(function(n){return i.current?a.createPortal(n.children,i.current):null},[i.current]);return s.createElement(z.Provider,{value:r},s.createElement("div",c({ref:i},t),e))}).withConfig({displayName:"FormPortalProvider",componentId:"sc-1tk55t5"})(B=B||g(["\n  height: 100%;\n  scrollbar-width: none;\n"],["\n  height: 100%;\n  scrollbar-width: none;\n"])),N=i.keyframes(S=S||g(["\n  0% { transform: scale(0.1); }\n  50% { transform: scale(1); }\n  90% { transform: scale(0.1); }\n  100% { transform: scale(0.1); }\n"],["\n  0% { transform: scale(0.1); }\n  50% { transform: scale(1); }\n  90% { transform: scale(0.1); }\n  100% { transform: scale(0.1); }\n"])),q=l.span.withConfig({displayName:"SingleDot",componentId:"sc-14h4cha"})(O=O||g(["\n  animation: "," 2s linear infinite;\n  display: inline-block;\n  margin-right: 4px;\n  :nth-child(2) {\n    animation-delay: 0.3s;\n  }\n  :nth-child(3) {\n    animation-delay: 0.5s;\n  }\n  ","\n"],["\n  animation: "," 2s linear infinite;\n  display: inline-block;\n  margin-right: 4px;\n  :nth-child(2) {\n    animation-delay: 0.3s;\n  }\n  :nth-child(3) {\n    animation-delay: 0.5s;\n  }\n  ","\n"]),N,function(n){var e=n.color,t=n.dotSize;return i.css(F=F||g(["\n      background: ",";\n      width: ","px;\n      height: ","px;\n      border-radius: ","px;\n    "],["\n      background: ",";\n      width: ","px;\n      height: ","px;\n      border-radius: ","px;\n    "]),e,t,t,t)}),D=function(n){var e=n.close,t=n.reset;return s.createElement(r.Modal,null,s.createElement(r.ModalPopup,null,s.createElement(r.ModalHeader,{close:e},"Reset"),s.createElement(r.ModalBody,{padded:!0},s.createElement("p",null,"Are you sure you want to reset all changes?")),s.createElement(r.ModalActions,null,s.createElement(u.Button,{onClick:e},"Cancel"),s.createElement(u.Button,{margin:!0,primary:!0,onClick:function(){return m(void 0,void 0,void 0,function(){return f(this,function(n){switch(n.label){case 0:return[4,t()];case 1:return n.sent(),e(),[2]}})})}},"Reset"))))},M=l(u.Button).withConfig({displayName:"ResetButton",componentId:"sc-1vzztc2"})(P=P||g(["\n  flex: 0 0 96px;\n"],["\n  flex: 0 0 96px;\n"]));function A(){return s.createElement(Q,null,s.createElement(J,null,"🤔"),s.createElement("h3",null,"Hey, you don't have any fields added to this form."),s.createElement("p",null,s.createElement(U,{href:"https://tinacms.org/docs/fields",target:"_blank"},s.createElement(J,null,"📖")," Field Setup Guide")))}var R,_,G,H,L,V,W,T,J=l.span.withConfig({displayName:"Emoji",componentId:"sc-1svcs66"})(R=R||g(["\n  font-size: 40px;\n  line-height: 1;\n  display: inline-block;\n"],["\n  font-size: 40px;\n  line-height: 1;\n  display: inline-block;\n"])),K=i.keyframes(_=_||g(["\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"],["\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"])),Q=l.div.withConfig({displayName:"EmptyState",componentId:"sc-rhupf9"})(G=G||g(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: var(--tina-padding-big) var(--tina-padding-big) 64px\n    var(--tina-padding-big);\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  animation-name: ",";\n  animation-delay: 300ms;\n  animation-timing-function: ease-out;\n  animation-iteration-count: 1;\n  animation-fill-mode: both;\n  animation-duration: 150ms;\n  > *:first-child {\n    margin: 0 0 var(--tina-padding-big) 0;\n  }\n  > "," {\n    display: block;\n  }\n  h3 {\n    font-size: var(--tina-font-size-5);\n    font-weight: normal;\n    color: inherit;\n    display: block;\n    margin: 0 0 var(--tina-padding-big) 0;\n    "," {\n      font-size: 1em;\n    }\n  }\n  p {\n    display: block;\n    margin: 0 0 var(--tina-padding-big) 0;\n  }\n"],["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: var(--tina-padding-big) var(--tina-padding-big) 64px\n    var(--tina-padding-big);\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  animation-name: ",";\n  animation-delay: 300ms;\n  animation-timing-function: ease-out;\n  animation-iteration-count: 1;\n  animation-fill-mode: both;\n  animation-duration: 150ms;\n  > *:first-child {\n    margin: 0 0 var(--tina-padding-big) 0;\n  }\n  > "," {\n    display: block;\n  }\n  h3 {\n    font-size: var(--tina-font-size-5);\n    font-weight: normal;\n    color: inherit;\n    display: block;\n    margin: 0 0 var(--tina-padding-big) 0;\n    "," {\n      font-size: 1em;\n    }\n  }\n  p {\n    display: block;\n    margin: 0 0 var(--tina-padding-big) 0;\n  }\n"]),K,J,J),U=l.a.withConfig({displayName:"LinkButton",componentId:"sc-1grsfy6"})(H=H||g(["\n  text-align: center;\n  border: 0;\n  border-radius: var(--tina-radius-big);\n  border: 1px solid var(--tina-color-grey-2);\n  box-shadow: var(--tina-shadow-small);\n  font-weight: var(--tina-font-weight-regular);\n  cursor: pointer;\n  font-size: var(--tina-font-size-0);\n  transition: all var(--tina-timing-short) ease-out;\n  background-color: white;\n  color: var(--tina-color-grey-8);\n  padding: var(--tina-padding-small) var(--tina-padding-big)\n    var(--tina-padding-small) 56px;\n  position: relative;\n  text-decoration: none;\n  display: inline-block;\n  "," {\n    font-size: 24px;\n    position: absolute;\n    left: var(--tina-padding-big);\n    top: 50%;\n    transform-origin: 50% 50%;\n    transform: translate3d(0, -50%, 0);\n    transition: all var(--tina-timing-short) ease-out;\n  }\n  &:hover {\n    color: var(--tina-color-primary);\n    "," {\n      transform: translate3d(0, -50%, 0);\n    }\n  }\n"],["\n  text-align: center;\n  border: 0;\n  border-radius: var(--tina-radius-big);\n  border: 1px solid var(--tina-color-grey-2);\n  box-shadow: var(--tina-shadow-small);\n  font-weight: var(--tina-font-weight-regular);\n  cursor: pointer;\n  font-size: var(--tina-font-size-0);\n  transition: all var(--tina-timing-short) ease-out;\n  background-color: white;\n  color: var(--tina-color-grey-8);\n  padding: var(--tina-padding-small) var(--tina-padding-big)\n    var(--tina-padding-small) 56px;\n  position: relative;\n  text-decoration: none;\n  display: inline-block;\n  "," {\n    font-size: 24px;\n    position: absolute;\n    left: var(--tina-padding-big);\n    top: 50%;\n    transform-origin: 50% 50%;\n    transform: translate3d(0, -50%, 0);\n    transition: all var(--tina-timing-short) ease-out;\n  }\n  &:hover {\n    color: var(--tina-color-primary);\n    "," {\n      transform: translate3d(0, -50%, 0);\n    }\n  }\n"]),J,J),X=l.div.withConfig({displayName:"Wrapper",componentId:"sc-7ci1wi"})(L=L||g(["\n  display: block;\n  margin: 0 auto;\n  width: 100%;\n"],["\n  display: block;\n  margin: 0 auto;\n  width: 100%;\n"])),Y=l.div.withConfig({displayName:"FormBody",componentId:"sc-c8viuh"})(V=V||g(["\n  position: relative;\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  overflow: auto;\n  border-top: 1px solid var(--tina-color-grey-2);\n  background-color: #f6f6f9;\n\n  "," {\n    height: 100%;\n  }\n"],["\n  position: relative;\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  overflow: auto;\n  border-top: 1px solid var(--tina-color-grey-2);\n  background-color: #f6f6f9;\n\n  "," {\n    height: 100%;\n  }\n"]),X),Z=l.div.withConfig({displayName:"FormFooter",componentId:"sc-1uzign4"})(W=W||g(["\n  position: relative;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 64px;\n  background-color: white;\n  border-top: 1px solid var(--tina-color-grey-2);\n\n  "," {\n    flex: 1 0 auto;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0 16px;\n  }\n"],["\n  position: relative;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 64px;\n  background-color: white;\n  border-top: 1px solid var(--tina-color-grey-2);\n\n  "," {\n    flex: 1 0 auto;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0 16px;\n  }\n"]),X),$=l(u.Button).withConfig({displayName:"SaveButton",componentId:"sc-1j0n42c"})(T=T||g(["\n  flex: 1.5 0 auto;\n  padding: 12px 24px;\n"],["\n  flex: 1.5 0 auto;\n  padding: 12px 24px;\n"]));n.ActionButton=E,n.FormActionMenu=h,n.FormBody=Y,n.FormPortalProvider=I,n.FormView=function(n){var e,a=this,o=n.activeForm,l=(null===(e=t.useCMS().sidebar)||void 0===e?void 0:e.buttons)||o.buttons,c=s.useCallback(function(n){if(n.destination&&o){var e=n.type;o.mutators.move(e,n.source.index,n.destination.index)}},[o]);return s.createElement(d.FormBuilder,{form:o},function(n){var e=n.handleSubmit,t=n.pristine,i=n.form,r=n.submitting;return s.createElement(p.DragDropContext,{onDragEnd:c},s.createElement(Y,null,s.createElement(I,null,s.createElement(X,null,o&&(o.fields.length?s.createElement(d.FieldsBuilder,{form:o,fields:o.fields}):s.createElement(A,null))))),s.createElement(Z,null,s.createElement(X,null,o.reset&&s.createElement(j,{pristine:t,reset:function(){return m(a,void 0,void 0,function(){return f(this,function(n){switch(n.label){case 0:return i.reset(),[4,o.reset()];case 1:return n.sent(),[2]}})})}},l.reset),s.createElement(u.Button,{onClick:function(){return e()},disabled:t,busy:r,primary:!0,grow:!0,margin:!0},r&&s.createElement(C,null),!r&&l.save),0<o.actions.length&&s.createElement(h,{actions:o.actions,form:o}))))})},n.LoadingDots=C,n.ResetForm=j,n.SaveButton=$,n.Wrapper=X,n.useFormPortal=function(){return s.useContext(z)},Object.defineProperty(n,"__esModule",{value:!0})});

package.json

 {
   "name": "@tinacms/react-forms",
-  "version": "0.31.0",
+  "version": "0.32.0-alpha.1",
   "license": "Apache-2.0",
@@ -23,3 +23,3 @@ "main": "build/index.js",
   "dependencies": {
-    "@tinacms/form-builder": "^0.31.0",
+    "@tinacms/form-builder": "^0.32.0-alpha.1",
     "react-beautiful-dnd": "^11.0.5",
@@ -29,6 +29,6 @@ "react-dismissible": "^1.3.0"
   "devDependencies": {
-    "@tinacms/forms": "^0.31.0",
+    "@tinacms/forms": "^0.32.0-alpha.1",
     "@tinacms/icons": "^0.31.0",
-    "@tinacms/react-core": "^0.31.0",
-    "@tinacms/react-modals": "^0.31.0",
+    "@tinacms/react-core": "^0.32.0-alpha.1",
+    "@tinacms/react-modals": "^0.32.0-alpha.1",
     "@tinacms/scripts": "^0.29.0",
@@ -48,3 +48,3 @@ "@tinacms/styles": "^0.29.0",
   },
-  "gitHead": "2558ba5738062fbe74edae68b8d585310862210b"
+  "gitHead": "122600a3019205fa3c0dd16ed5f92eb19f867347"
 }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40169

increased by0.1%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@tinacms/core@0.32.0(transitive)

• + Added@tinacms/form-builder@0.32.0(transitive)

• + Added@tinacms/forms@0.32.0(transitive)

• + Added@tinacms/react-core@0.32.0(transitive)

• + Addedfinal-form@4.19.1(transitive)

• - Removed@tinacms/core@0.31.0(transitive)

• - Removed@tinacms/form-builder@0.31.0(transitive)

• - Removed@tinacms/forms@0.31.0(transitive)

• - Removed@tinacms/react-core@0.31.0(transitive)

• Updated@tinacms/form-builder@^0.32.0-alpha.1