@plasmicpkgs/plasmic-basic-components 0.0.5 → 0.0.9

package/dist/plasmic-basic-components.cjs.production.min.js

@@ -1,2 +1,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("@plasmicapp/host"),r=e(require("@plasmicapp/host/registerComponent")),o=require("react"),n=e(o);function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function i(e,t){if(null==e)return{};var r,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)t.indexOf(r=a[o])>=0||(n[r]=e[r]);return n}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r<t;r++)o[r]=e[r];return o}var s=o.createContext(void 0);function c(e,t){if(t){for(var r,o=e,n=function(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(r)return(r=r.call(e)).next.bind(r);if(Array.isArray(e)||(r=function(e,t){if(e){if("string"==typeof e)return l(e,void 0);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?l(e,void 0):void 0}}(e))){r&&(e=r);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(t.split("."));!(r=n()).done;){var a;o=null==(a=o)?void 0:a[r.value]}return o}}function p(e){return c(u(),e)}function m(e){void 0===e&&(e={});var t=u();return Object.fromEntries(Object.entries(e).filter((function(e){return!!e[0]&&!!e[1]})).map((function(e){return function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return t}(e[0],c(t,e[1]))})))}function u(){return o.useContext(s)}function d(e){var t,r,o=e.name,i=e.data,l=e.children,c=null!=(t=u())?t:{};return o?n.createElement(s.Provider,{value:a({},c,(r={},r[o]=i,r))},l):n.createElement(n.Fragment,null,l)}function h(e){var t=e.tag,r=void 0===t?"div":t,n=e.className,l=e.children,s=e.propSelectors,c=i(e,["tag","className","children","propSelectors"]),p=m(s);return o.createElement(r,a({children:l},c,p,{className:n+" "+p.className}))}function y(e){var t=e.selector,r=e.propSelectors,o=i(e,["selector","propSelectors"]);return n.createElement(h,Object.assign({},o,{propSelectors:a({},r,{children:t})}),"(DynamicText requires a selector)")}function f(e){var t=e.selector,r=e.propSelectors,o=i(e,["selector","propSelectors"]);return n.createElement(h,Object.assign({tag:"img",loading:"lazy",style:{objectFit:"cover"}},o,{propSelectors:a({},r,{src:t}),src:"https://studio.plasmic.app/static/img/placeholder.png"}))}function v(e){var r,o=e.selector,a=e.loopItemName,l=e.children,s=e.data,m=e.keySelector,u=i(e,["selector","loopItemName","children","data","keySelector"]),y=null!=(r=null!=s?s:p(o))?r:[1,2,3];return n.createElement(h,Object.assign({},u),null==y||null==y.map?void 0:y.map((function(e,r){var o;return n.createElement(d,{key:null!=(o=c(e,m))?o:r,name:a,data:e},t.repeatedElement(0===r,l))})))}function g(e){var t=e.columns,r=e.columnGap,o=void 0===r?0:r,a=e.rowGap,l=void 0===a?0:a,s=i(e,["columns","columnGap","rowGap"]);return n.createElement(v,Object.assign({},s,{style:{display:"grid",gridTemplateColumns:"repeat("+t+", 1fr)",columnGap:o+"px",rowGap:l+"px"}}))}var b="@plasmicpkgs/plasmic-basic-components",x={name:"hostless-data-provider",displayName:"Data Provider",importName:"DataProvider",importPath:b,props:{name:{type:"string",defaultValue:"celebrities",description:"The name of the variable to store the data in"},data:{type:"object",defaultValue:[{name:"Fill Murray",birthYear:1950,profilePicture:["https://www.fillmurray.com/200/300"]},{name:"Place Cage",birthYear:1950,profilePicture:["https://www.placecage.com/200/300"]}]},children:{type:"slot",defaultValue:[{type:"component",name:"hostless-dynamic-text",props:{selector:"celebrities.0.name"}},{type:"component",name:"hostless-dynamic-image",props:{selector:"celebrities.0.profilePicture"}}]}}},w={propSelectors:{type:"object",defaultValueHint:{},description:"An object whose keys are prop names and values are selector expressions. Use this to set any prop to a dynamic value."}},N=a({},w,{tag:{type:"string",defaultValueHint:"div",description:"The HTML tag to use"}}),C={name:"hostless-dynamic-element",displayName:"Dynamic Element",importName:"DynamicElement",importPath:b,props:a({},N,{children:"slot"})},S={name:"hostless-dynamic-text",importName:"DynamicText",displayName:"Dynamic Text",importPath:b,props:a({},N,{selector:{type:"string",description:"The selector expression to use to get the text, such as: someVariable.0.someField"}})},D={name:"hostless-dynamic-image",displayName:"Dynamic Image",importName:"DynamicImage",importPath:b,props:a({},w,{selector:{type:"string",description:"The selector expression to use to get the image source URL, such as: someVariable.0.someField"}})},P=a({},N,{selector:{type:"string",description:"The selector expression to use to get the array of data to loop over, such as: someVariable.0.someField"},loopItemName:{type:"string",defaultValue:"item",description:"The name of the variable to use to store the current item in the loop"},children:"slot"}),T={name:"hostless-dynamic-collection",displayName:"Dynamic Collection",importName:"DynamicCollection",importPath:b,props:P},E=a({},P,{columns:{type:"number",defaultValue:2,description:"The number of columns to use in the grid"},columnGap:{type:"number",defaultValue:8,description:"The gap between columns"},rowGap:{type:"number",defaultValue:8,description:"The gap between rows"}}),I={name:"hostless-dynamic-collection-grid",displayName:"Dynamic Collection Grid",importName:"DynamicCollectionGrid",importPath:b,props:E};function j(e){var r=e.preview,a=e.src,i=e.className;return o.useContext(t.PlasmicCanvasContext)&&!r?n.createElement("div",{className:i},n.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,background:"#eee",color:"#888",fontSize:"36px",fontFamily:"sans-serif",fontWeight:"bold",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden"}},"Iframe placeholder")):n.createElement("iframe",{src:a,className:i})}var V={name:"hostless-iframe",displayName:"Iframe",importName:"Iframe",importPath:"@plasmicpkgs/plasmic-basic-components",props:{src:{type:"string",defaultValue:"https://www.example.com"},preview:{type:"boolean",description:"Load the iframe while editing in Plasmic Studio"}},defaultStyles:{width:"300px",height:"150px",maxWidth:"100%"}};function O(e){var t=e.ref,r=e.scrollDownThreshold,n=void 0===r?.5:r,a=e.scrollUpThreshold,i=void 0===a?0:a,l=o.useState(!1),s=l[0],c=l[1];return o.useEffect((function(){if(t.current&&"function"==typeof IntersectionObserver){var e=new IntersectionObserver((function(e){e[0].intersectionRatio>=n?c(!0):e[0].intersectionRatio<=i&&c(!1)}),{root:null,rootMargin:"0%",threshold:[i,n]});return e.observe(t.current),function(){c(!1),e.disconnect()}}return function(){}}),[t.current,n,i]),s}function M(e){var t=e.children,r=e.className,a=e.scrollDownThreshold,i=void 0===a?.5:a,l=e.scrollUpThreshold,s=void 0===l?0:l,c=o.useRef(null),p=O({ref:c,scrollUpThreshold:s,scrollDownThreshold:i});return n.createElement("div",{className:r,ref:c},p?t:null)}var G={name:"hostless-scroll-revealer",importName:"ScrollRevealer",displayName:"Scroll Revealer",importPath:"@plasmicpkgs/plasmic-basic-components",props:{children:"slot",scrollDownThreshold:{type:"number",displayName:"Scroll down threshold",defaultValueHint:.5,description:"How much of the element (as a fraction) must you scroll into view for it to appear (defaults to 0.5)"},scrollUpThreshold:{type:"number",displayName:"Scroll up threshold",defaultValueHint:0,description:"While scrolling up, how much of the element (as a fraction) can still be scrolled in view before it disappears (defaults to 0, meaning you must scroll up until it's completely out of view)"}},defaultStyles:{width:"stretch",maxWidth:"100%"}},R=n.forwardRef((function(e,t){return n.createElement("video",Object.assign({ref:t},e))})),U={name:"hostless-html-video",importName:"Video",displayName:"HTML Video",importPath:"@plasmicpkgs/plasmic-basic-components",props:{src:{type:"string",defaultValue:"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",displayName:"Source URL",description:"URL to a video file."},autoPlay:{type:"boolean",displayName:"Auto Play",description:"Whether the video show automatically start playing when the player loads"},controls:{type:"boolean",displayName:"Show Controls",description:"Whether the video player controls should be displayed"},playsInline:{type:"boolean",displayName:"Plays inline",description:"Usually on mobile, when tilted landscape, videos can play fullscreen. Turn this on to prevent that."},loop:{type:"boolean",displayName:"Loop",description:"Whether the video should be played again after it finishes"},muted:{type:"boolean",displayName:"Muted",description:"Whether audio should be muted"},poster:{type:"imageUrl",displayName:"Poster (placeholder) image",description:"Image to show while video is downloading"},preload:{type:"choice",options:["none","metadata","auto"],displayName:"Preload",description:"Whether to preload nothing, metadata only, or the full video"}},defaultStyles:{height:"hug",width:"640px",maxWidth:"100%"}};exports.DataContext=s,exports.DataProvider=d,exports.DynamicCollection=v,exports.DynamicCollectionGrid=g,exports.DynamicElement=h,exports.DynamicImage=f,exports.DynamicText=y,exports.Iframe=j,exports.ScrollRevealer=M,exports.Video=R,exports.applySelector=c,exports.dataProviderMeta=x,exports.dynamicCollectionGridMeta=I,exports.dynamicCollectionGridProps=E,exports.dynamicCollectionMeta=T,exports.dynamicCollectionProps=P,exports.dynamicElementMeta=C,exports.dynamicImageMeta=D,exports.dynamicTextMeta=S,exports.iframeMeta=V,exports.registerDataProvider=function(e,t){e?e.registerComponent(d,null!=t?t:x):r(d,null!=t?t:x)},exports.registerDynamicCollection=function(e,t){e?e.registerComponent(v,null!=t?t:T):r(v,null!=t?t:T)},exports.registerDynamicCollectionGrid=function(e,t){e?e.registerComponent(g,null!=t?t:I):r(g,null!=t?t:I)},exports.registerDynamicElement=function(e,t){e?e.registerComponent(h,null!=t?t:C):r(h,null!=t?t:C)},exports.registerDynamicImage=function(e,t){e?e.registerComponent(f,null!=t?t:D):r(f,null!=t?t:D)},exports.registerDynamicText=function(e,t){e?e.registerComponent(y,null!=t?t:S):r(y,null!=t?t:S)},exports.registerIframe=function(e,t){e?e.registerComponent(j,null!=t?t:V):r(j,null!=t?t:V)},exports.registerScrollRevealer=function(e,t){e?e.registerComponent(M,null!=t?t:G):r(M,null!=t?t:G)},exports.registerVideo=function(e,t){e?e.registerComponent(R,null!=t?t:U):r(R,null!=t?t:U)},exports.scrollRevealerMeta=G,exports.useDataEnv=u,exports.useDirectionalIntersection=O,exports.useSelector=p,exports.useSelectors=m,exports.videoMeta=U;
+"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("@plasmicapp/host"),r=e(require("@plasmicapp/host/registerComponent")),o=require("react"),n=e(o);function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function i(e,t){if(null==e)return{};var r,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)t.indexOf(r=a[o])>=0||(n[r]=e[r]);return n}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r<t;r++)o[r]=e[r];return o}function l(e){if(null==e)throw new Error("Value must not be undefined or null");return e}var c=o.createContext(void 0),p="@plasmicpkgs/plasmic-basic-components";function m(e,t){if(t){for(var r,o=e,n=function(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(r)return(r=r.call(e)).next.bind(r);if(Array.isArray(e)||(r=function(e,t){if(e){if("string"==typeof e)return s(e,void 0);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?s(e,void 0):void 0}}(e))){r&&(e=r);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(t.split("."));!(r=n()).done;){var a;o=null==(a=o)?void 0:a[r.value]}return o}}function d(e){return m(h(),e)}function u(e){void 0===e&&(e={});var t=h();return Object.fromEntries(Object.entries(e).filter((function(e){return!!e[0]&&!!e[1]})).map((function(e){return function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return t}(e[0],m(t,e[1]))})))}function h(){return o.useContext(c)}function f(e){var t,r,o=e.name,i=e.data,s=e.children,l=null!=(t=h())?t:{};return o?n.createElement(c.Provider,{value:a({},l,(r={},r[o]=i,r))},s):n.createElement(n.Fragment,null,s)}function y(e){var t=e.tag,r=void 0===t?"div":t,n=e.className,s=e.children,l=e.propSelectors,c=i(e,["tag","className","children","propSelectors"]),p=u(l);return o.createElement(r,a({children:s},c,p,{className:n+" "+p.className}))}function v(e){var t=e.selector,r=e.propSelectors,o=i(e,["selector","propSelectors"]);return n.createElement(y,Object.assign({},o,{propSelectors:a({},r,{children:t})}),"(DynamicText requires a selector)")}function g(e){var t=e.selector,r=e.propSelectors,o=i(e,["selector","propSelectors"]);return n.createElement(y,Object.assign({tag:"img",loading:"lazy",style:{objectFit:"cover"}},o,{propSelectors:a({},r,{src:t}),src:"https://studio.plasmic.app/static/img/placeholder.png"}))}function b(e){var r,o=e.children,a=e.loopItemName,i=e.keySelector,s=e.data,l=null!=(r=null!=s?s:d(e.selector))?r:[1,2,3];return n.createElement(n.Fragment,null,null==l||null==l.map?void 0:l.map((function(e,r){var s;return n.createElement(f,{key:null!=(s=m(e,i))?s:r,name:a,data:e},t.repeatedElement(0===r,o))})))}var x={selector:{type:"string",description:"The selector expression to use to get the array of data to loop over, such as: someVariable.0.someField"},loopItemName:{type:"string",defaultValue:"item",description:"The name of the variable to use to store the current item in the loop"},children:"slot"},w={name:"hostless-dynamic-repeater",displayName:"Dynamic Repeater",importName:"DynamicRepeater",importPath:p,props:x},N={name:"hostless-data-provider",displayName:"Data Provider",importName:"DataProvider",importPath:p,props:{name:{type:"string",defaultValue:"celebrities",description:"The name of the variable to store the data in"},data:{type:"object",defaultValue:[{name:"Fill Murray",birthYear:1950,profilePicture:["https://www.fillmurray.com/200/300"]},{name:"Place Cage",birthYear:1950,profilePicture:["https://www.placecage.com/200/300"]}]},children:{type:"slot",defaultValue:[{type:"component",name:"hostless-dynamic-text",props:{selector:"celebrities.0.name"}},{type:"component",name:"hostless-dynamic-image",props:{selector:"celebrities.0.profilePicture"}}]}}},S={propSelectors:{type:"object",defaultValueHint:{},description:"An object whose keys are prop names and values are selector expressions. Use this to set any prop to a dynamic value."}},E=a({},S,{tag:{type:"string",defaultValueHint:"div",description:"The HTML tag to use"}}),P={name:"hostless-dynamic-element",displayName:"Dynamic Element",importName:"DynamicElement",importPath:p,props:a({},E,{children:"slot"})},C={name:"hostless-dynamic-text",importName:"DynamicText",displayName:"Dynamic Text",importPath:p,props:a({},E,{selector:{type:"string",description:"The selector expression to use to get the text, such as: someVariable.0.someField"}})},D={name:"hostless-dynamic-image",displayName:"Dynamic Image",importName:"DynamicImage",importPath:p,props:a({},S,{selector:{type:"string",description:"The selector expression to use to get the image source URL, such as: someVariable.0.someField"}})};function T(e){var t=e.className,r=e.code,a=e.hideInEditor,i=void 0!==a&&a,s=o.useRef(null);return o.useEffect((function(){i||Array.from(l(s.current).querySelectorAll("script")).forEach((function(e){var t=document.createElement("script");Array.from(e.attributes).forEach((function(e){return t.setAttribute(e.name,e.value)})),t.appendChild(document.createTextNode(e.innerHTML)),l(e.parentNode).replaceChild(t,e)}))}),[r,i]),n.createElement("div",{ref:s,className:t,dangerouslySetInnerHTML:{__html:i?"":r}})}var I={name:"hostless-embed",displayName:"Embed HTML",importName:"Embed",importPath:"@plasmicpkgs/plasmic-basic-components",props:{code:{type:"string",defaultValue:"https://www.example.com"},hideInEditor:{type:"boolean",displayName:"Hide in editor",description:"Disable running the code while editing in Plasmic Studio (may require reload)",editOnly:!0}},defaultStyles:{maxWidth:"100%"}};function M(e){var r=e.preview,a=e.src,i=e.className;return o.useContext(t.PlasmicCanvasContext)&&!r?n.createElement("div",{className:i},n.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,background:"#eee",color:"#888",fontSize:"36px",fontFamily:"sans-serif",fontWeight:"bold",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden"}},"Iframe placeholder")):n.createElement("iframe",{src:a,className:i})}var V={name:"hostless-iframe",displayName:"Iframe",importName:"Iframe",importPath:"@plasmicpkgs/plasmic-basic-components",props:{src:{type:"string",defaultValue:"https://www.example.com"},preview:{type:"boolean",description:"Load the iframe while editing in Plasmic Studio"}},defaultStyles:{width:"300px",height:"150px",maxWidth:"100%"}};function R(e){var t=e.ref,r=e.scrollDownThreshold,n=void 0===r?.5:r,a=e.scrollUpThreshold,i=void 0===a?0:a,s=o.useState(!1),l=s[0],c=s[1];return o.useEffect((function(){if(t.current&&"function"==typeof IntersectionObserver){var e=new IntersectionObserver((function(e){e[0].intersectionRatio>=n?c(!0):e[0].intersectionRatio<=i&&c(!1)}),{root:null,rootMargin:"0%",threshold:[i,n]});return e.observe(t.current),function(){c(!1),e.disconnect()}}return function(){}}),[t.current,n,i]),l}function j(e){var t=e.children,r=e.className,a=e.scrollDownThreshold,i=void 0===a?.5:a,s=e.scrollUpThreshold,l=void 0===s?0:s,c=o.useRef(null),p=R({ref:c,scrollUpThreshold:l,scrollDownThreshold:i});return n.createElement("div",{className:r,ref:c},p?t:null)}var O={name:"hostless-scroll-revealer",importName:"ScrollRevealer",displayName:"Scroll Revealer",importPath:"@plasmicpkgs/plasmic-basic-components",props:{children:"slot",scrollDownThreshold:{type:"number",displayName:"Scroll down threshold",defaultValueHint:.5,description:"How much of the element (as a fraction) must you scroll into view for it to appear (defaults to 0.5)"},scrollUpThreshold:{type:"number",displayName:"Scroll up threshold",defaultValueHint:0,description:"While scrolling up, how much of the element (as a fraction) can still be scrolled in view before it disappears (defaults to 0, meaning you must scroll up until it's completely out of view)"}},defaultStyles:{width:"stretch",maxWidth:"100%"}},A=n.forwardRef((function(e,t){return n.createElement("video",Object.assign({ref:t},e))})),H={name:"hostless-html-video",importName:"Video",displayName:"HTML Video",importPath:"@plasmicpkgs/plasmic-basic-components",props:{src:{type:"string",defaultValue:"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",displayName:"Source URL",description:"URL to a video file."},autoPlay:{type:"boolean",displayName:"Auto Play",description:"Whether the video show automatically start playing when the player loads"},controls:{type:"boolean",displayName:"Show Controls",description:"Whether the video player controls should be displayed"},playsInline:{type:"boolean",displayName:"Plays inline",description:"Usually on mobile, when tilted landscape, videos can play fullscreen. Turn this on to prevent that."},loop:{type:"boolean",displayName:"Loop",description:"Whether the video should be played again after it finishes"},muted:{type:"boolean",displayName:"Muted",description:"Whether audio should be muted"},poster:{type:"imageUrl",displayName:"Poster (placeholder) image",description:"Image to show while video is downloading"},preload:{type:"choice",options:["none","metadata","auto"],displayName:"Preload",description:"Whether to preload nothing, metadata only, or the full video"}},defaultStyles:{height:"hug",width:"640px",maxWidth:"100%"}};function k(e){return n.createElement("style",{dangerouslySetInnerHTML:{__html:e.css}})}var L={name:"hostless-embed-css",displayName:"EmbedCss",importName:"EmbedCss",importPath:"@plasmicpkgs/plasmic-basic-components",props:{css:{type:"string",defaultValueHint:"Some CSS snippet",description:"CSS rules to be inserted"}}};exports.DataContext=c,exports.DataProvider=f,exports.DynamicElement=y,exports.DynamicImage=g,exports.DynamicRepeater=b,exports.DynamicText=v,exports.Embed=T,exports.EmbedCss=k,exports.Iframe=M,exports.ScrollRevealer=j,exports.Video=A,exports.applySelector=m,exports.dataProviderMeta=N,exports.dynamicElementMeta=P,exports.dynamicImageMeta=D,exports.dynamicRepeaterMeta=w,exports.dynamicRepeaterProps=x,exports.dynamicTextMeta=C,exports.embedCssMeta=L,exports.embedMeta=I,exports.iframeMeta=V,exports.registerDataProvider=function(e,t){e?e.registerComponent(f,null!=t?t:N):r(f,null!=t?t:N)},exports.registerDynamicElement=function(e,t){e?e.registerComponent(y,null!=t?t:P):r(y,null!=t?t:P)},exports.registerDynamicImage=function(e,t){e?e.registerComponent(g,null!=t?t:D):r(g,null!=t?t:D)},exports.registerDynamicRepeater=function(e,t){e?e.registerComponent(b,null!=t?t:w):r(b,null!=t?t:w)},exports.registerDynamicText=function(e,t){e?e.registerComponent(v,null!=t?t:C):r(v,null!=t?t:C)},exports.registerEmbed=function(e,t){e?e.registerComponent(T,null!=t?t:I):r(T,null!=t?t:I)},exports.registerEmbedCss=function(e,t){e?e.registerComponent(k,null!=t?t:L):r(k,null!=t?t:L)},exports.registerIframe=function(e,t){e?e.registerComponent(M,null!=t?t:V):r(M,null!=t?t:V)},exports.registerScrollRevealer=function(e,t){e?e.registerComponent(j,null!=t?t:O):r(j,null!=t?t:O)},exports.registerVideo=function(e,t){e?e.registerComponent(A,null!=t?t:H):r(A,null!=t?t:H)},exports.scrollRevealerMeta=O,exports.useDataEnv=h,exports.useDirectionalIntersection=R,exports.useSelector=d,exports.useSelectors=u,exports.videoMeta=H;
 //# sourceMappingURL=plasmic-basic-components.cjs.production.min.js.map

package/dist/plasmic-basic-components.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"plasmic-basic-components.cjs.production.min.js","sources":["../src/common.ts","../src/Data.tsx","../src/Iframe.tsx","../src/ScrollRevealer.tsx","../src/Video.tsx"],"sourcesContent":["export const tuple = <T extends any[]>(...args: T): T => args;\n\nexport function ensure<T>(x: T | null | undefined): T {\n  if (x === null || x === undefined) {\n    debugger;\n    throw new Error(`Value must not be undefined or null`);\n  } else {\n    return x;\n  }\n}\n","import { ComponentMeta, repeatedElement } from \"@plasmicapp/host\";\nimport registerComponent from \"@plasmicapp/host/registerComponent\";\nimport React, {\n  ComponentProps,\n  createContext,\n  createElement,\n  CSSProperties,\n  ReactNode,\n  useContext,\n} from \"react\";\nimport { tuple } from \"./common\";\n\nexport type DataDict = Record<string, any>;\n\nexport const DataContext = createContext<DataDict | undefined>(undefined);\n\nexport function applySelector(\n  rawData: DataDict | undefined,\n  selector: string | undefined\n): any {\n  if (!selector) {\n    return undefined;\n  }\n  let curData = rawData;\n  for (const key of selector.split(\".\")) {\n    curData = curData?.[key];\n  }\n  return curData;\n}\n\nexport type SelectorDict = Record<string, string | undefined>;\n\nexport function useSelector(selector: string | undefined): any {\n  const rawData = useDataEnv();\n  return applySelector(rawData, selector);\n}\n\nexport function useSelectors(selectors: SelectorDict = {}): any {\n  const rawData = useDataEnv();\n  return Object.fromEntries(\n    Object.entries(selectors)\n      .filter(([key, selector]) => !!key && !!selector)\n      .map(([key, selector]) => tuple(key, applySelector(rawData, selector)))\n  );\n}\n\nexport function useDataEnv() {\n  return useContext(DataContext);\n}\n\nexport interface DataProviderProps {\n  name?: string;\n  data?: any;\n  children?: ReactNode;\n}\n\nexport function DataProvider({ name, data, children }: DataProviderProps) {\n  const existingEnv = useDataEnv() ?? {};\n  if (!name) {\n    return <>{children}</>;\n  } else {\n    return (\n      <DataContext.Provider value={{ ...existingEnv, [name]: data }}>\n        {children}\n      </DataContext.Provider>\n    );\n  }\n}\n\nexport interface CommonDynamicProps {\n  className?: string;\n  tag?: string;\n  propSelectors?: SelectorDict;\n}\n\nexport function DynamicElement<\n  Tag extends keyof JSX.IntrinsicElements = \"div\"\n>({\n  tag = \"div\",\n  className,\n  children,\n  propSelectors,\n  ...props\n}: CommonDynamicProps & ComponentProps<Tag>) {\n  const computed = useSelectors(propSelectors);\n  return createElement(tag, {\n    children,\n    ...props,\n    ...computed,\n    className: className + \" \" + computed.className,\n  });\n}\n\nexport interface DynamicTextProps extends CommonDynamicProps {\n  selector?: string;\n}\n\nexport function DynamicText({\n  selector,\n  propSelectors,\n  ...props\n}: DynamicTextProps) {\n  return (\n    <DynamicElement\n      {...props}\n      propSelectors={{ ...propSelectors, children: selector }}\n    >\n      {/*This is the default text*/}\n      (DynamicText requires a selector)\n    </DynamicElement>\n  );\n}\n\nexport interface DynamicImageProps\n  extends CommonDynamicProps,\n    ComponentProps<\"img\"> {\n  selector?: string;\n}\n\nexport function DynamicImage({\n  selector,\n  propSelectors,\n  ...props\n}: DynamicImageProps) {\n  return (\n    <DynamicElement<\"img\">\n      tag={\"img\"}\n      loading={\"lazy\"}\n      style={{\n        objectFit: \"cover\",\n      }}\n      {...props}\n      propSelectors={{ ...propSelectors, src: selector }}\n      // Default image placeholder\n      src=\"https://studio.plasmic.app/static/img/placeholder.png\"\n    />\n  );\n}\n\nexport interface DynamicCollectionProps extends CommonDynamicProps {\n  children?: ReactNode;\n  style?: CSSProperties;\n  loopItemName?: string;\n  keySelector?: string;\n  selector?: string;\n  data?: any;\n}\n\nexport function DynamicCollection({\n  selector,\n  loopItemName,\n  children,\n  data,\n  keySelector,\n  ...props\n}: DynamicCollectionProps) {\n  // Defaults to an array of three items.\n  const finalData = data ?? useSelector(selector) ?? [1, 2, 3];\n  return (\n    <DynamicElement {...props}>\n      {finalData?.map?.((item: any, index: number) => (\n        <DataProvider\n          key={applySelector(item, keySelector) ?? index}\n          name={loopItemName}\n          data={item}\n        >\n          {repeatedElement(index === 0, children)}\n        </DataProvider>\n      ))}\n    </DynamicElement>\n  );\n}\n\nexport interface DynamicCollectionGridProps extends DynamicCollectionProps {\n  columns?: number;\n  columnGap?: number;\n  rowGap?: number;\n}\n\nexport function DynamicCollectionGrid({\n  columns,\n  columnGap = 0,\n  rowGap = 0,\n  ...props\n}: DynamicCollectionGridProps) {\n  return (\n    <DynamicCollection\n      {...props}\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: `repeat(${columns}, 1fr)`,\n        columnGap: `${columnGap}px`,\n        rowGap: `${rowGap}px`,\n      }}\n    />\n  );\n}\n\nconst thisModule = \"@plasmicpkgs/plasmic-basic-components\";\n\nexport const dataProviderMeta: ComponentMeta<DataProviderProps> = {\n  name: \"hostless-data-provider\",\n  displayName: \"Data Provider\",\n  importName: \"DataProvider\",\n  importPath: thisModule,\n  // description: \"Makes some specified data available to the subtree in a context\",\n  props: {\n    name: {\n      type: \"string\",\n      defaultValue: \"celebrities\",\n      description: \"The name of the variable to store the data in\",\n    },\n    data: {\n      type: \"object\",\n      defaultValue: [\n        {\n          name: \"Fill Murray\",\n          birthYear: 1950,\n          profilePicture: [\"https://www.fillmurray.com/200/300\"],\n        },\n        {\n          name: \"Place Cage\",\n          birthYear: 1950,\n          profilePicture: [\"https://www.placecage.com/200/300\"],\n        },\n      ],\n    },\n    children: {\n      type: \"slot\",\n      defaultValue: [\n        {\n          type: \"component\",\n          name: \"hostless-dynamic-text\",\n          props: {\n            selector: \"celebrities.0.name\",\n          },\n        },\n        {\n          type: \"component\",\n          name: \"hostless-dynamic-image\",\n          props: {\n            selector: \"celebrities.0.profilePicture\",\n          },\n        },\n      ],\n    },\n  },\n};\n\nexport function registerDataProvider(\n  loader?: { registerComponent: typeof registerComponent },\n  customDataProviderMeta?: ComponentMeta<DataProviderProps>\n) {\n  if (loader) {\n    loader.registerComponent(\n      DataProvider,\n      customDataProviderMeta ?? dataProviderMeta\n    );\n  } else {\n    registerComponent(DataProvider, customDataProviderMeta ?? dataProviderMeta);\n  }\n}\n\nconst dynamicPropsWithoutTag = {\n  propSelectors: {\n    type: \"object\",\n    defaultValueHint: {},\n    description:\n      \"An object whose keys are prop names and values are selector expressions. Use this to set any prop to a dynamic value.\",\n  },\n} as const;\n\nconst dynamicProps = {\n  ...dynamicPropsWithoutTag,\n  tag: {\n    type: \"string\",\n    defaultValueHint: \"div\",\n    description: \"The HTML tag to use\",\n  },\n} as const;\n\n// TODO Eventually we'll want to expose all the base HTML properties, but in the nicer way that we do within the studio.\n\nexport const dynamicElementMeta: ComponentMeta<CommonDynamicProps> = {\n  name: \"hostless-dynamic-element\",\n  displayName: \"Dynamic Element\",\n  importName: \"DynamicElement\",\n  importPath: thisModule,\n  props: { ...dynamicProps, children: \"slot\" },\n};\n\nexport function registerDynamicElement(\n  loader?: { registerComponent: typeof registerComponent },\n  customDynamicElementMeta?: ComponentMeta<CommonDynamicProps>\n) {\n  if (loader) {\n    loader.registerComponent(\n      DynamicElement,\n      customDynamicElementMeta ?? dynamicElementMeta\n    );\n  } else {\n    registerComponent(\n      DynamicElement,\n      customDynamicElementMeta ?? dynamicElementMeta\n    );\n  }\n}\n\nexport const dynamicTextMeta: ComponentMeta<DynamicTextProps> = {\n  name: \"hostless-dynamic-text\",\n  importName: \"DynamicText\",\n  displayName: \"Dynamic Text\",\n  importPath: thisModule,\n  props: {\n    ...dynamicProps,\n    selector: {\n      type: \"string\",\n      description:\n        \"The selector expression to use to get the text, such as: someVariable.0.someField\",\n    },\n  },\n};\n\nexport function registerDynamicText(\n  loader?: { registerComponent: typeof registerComponent },\n  customDynamicTextMeta?: ComponentMeta<DynamicTextProps>\n) {\n  if (loader) {\n    loader.registerComponent(\n      DynamicText,\n      customDynamicTextMeta ?? dynamicTextMeta\n    );\n  } else {\n    registerComponent(DynamicText, customDynamicTextMeta ?? dynamicTextMeta);\n  }\n}\n\nexport const dynamicImageMeta: ComponentMeta<DynamicImageProps> = {\n  name: \"hostless-dynamic-image\",\n  displayName: \"Dynamic Image\",\n  importName: \"DynamicImage\",\n  importPath: thisModule,\n  props: {\n    ...dynamicPropsWithoutTag,\n    selector: {\n      type: \"string\",\n      description:\n        \"The selector expression to use to get the image source URL, such as: someVariable.0.someField\",\n    },\n  },\n};\n\nexport function registerDynamicImage(\n  loader?: { registerComponent: typeof registerComponent },\n  customDynamicImageMeta?: ComponentMeta<DynamicImageProps>\n) {\n  if (loader) {\n    loader.registerComponent(\n      DynamicImage,\n      customDynamicImageMeta ?? dynamicImageMeta\n    );\n  } else {\n    registerComponent(DynamicImage, customDynamicImageMeta ?? dynamicImageMeta);\n  }\n}\n\nexport const dynamicCollectionProps = {\n  ...dynamicProps,\n  selector: {\n    type: \"string\",\n    description:\n      \"The selector expression to use to get the array of data to loop over, such as: someVariable.0.someField\",\n  },\n  loopItemName: {\n    type: \"string\",\n    defaultValue: \"item\",\n    description:\n      \"The name of the variable to use to store the current item in the loop\",\n  },\n  children: \"slot\",\n} as const;\n\nexport const dynamicCollectionMeta: ComponentMeta<DynamicCollectionProps> = {\n  name: \"hostless-dynamic-collection\",\n  displayName: \"Dynamic Collection\",\n  importName: \"DynamicCollection\",\n  importPath: thisModule,\n  props: dynamicCollectionProps,\n};\n\nexport function registerDynamicCollection(\n  loader?: { registerComponent: typeof registerComponent },\n  customDynamicCollectionMeta?: ComponentMeta<DynamicCollectionProps>\n) {\n  if (loader) {\n    loader.registerComponent(\n      DynamicCollection,\n      customDynamicCollectionMeta ?? dynamicCollectionMeta\n    );\n  } else {\n    registerComponent(\n      DynamicCollection,\n      customDynamicCollectionMeta ?? dynamicCollectionMeta\n    );\n  }\n}\n\nexport const dynamicCollectionGridProps = {\n  ...dynamicCollectionProps,\n  columns: {\n    type: \"number\",\n    defaultValue: 2,\n    description: \"The number of columns to use in the grid\",\n  },\n  columnGap: {\n    type: \"number\",\n    defaultValue: 8,\n    description: \"The gap between columns\",\n  },\n  rowGap: {\n    type: \"number\",\n    defaultValue: 8,\n    description: \"The gap between rows\",\n  },\n} as const;\n\nexport const dynamicCollectionGridMeta: ComponentMeta<DynamicCollectionGridProps> = {\n  name: \"hostless-dynamic-collection-grid\",\n  displayName: \"Dynamic Collection Grid\",\n  importName: \"DynamicCollectionGrid\",\n  importPath: thisModule,\n  props: dynamicCollectionGridProps,\n};\n\nexport function registerDynamicCollectionGrid(\n  loader?: { registerComponent: typeof registerComponent },\n  customDynamicCollectionGridMeta?: ComponentMeta<DynamicCollectionGridProps>\n) {\n  if (loader) {\n    loader.registerComponent(\n      DynamicCollectionGrid,\n      customDynamicCollectionGridMeta ?? dynamicCollectionGridMeta\n    );\n  } else {\n    registerComponent(\n      DynamicCollectionGrid,\n      customDynamicCollectionGridMeta ?? dynamicCollectionGridMeta\n    );\n  }\n}\n","import { ComponentMeta, PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent from \"@plasmicapp/host/registerComponent\";\nimport React, { useContext } from \"react\";\n\nexport interface IframeProps {\n  src: string;\n  preview?: boolean;\n  className?: string;\n}\n\nexport default function Iframe({ preview, src, className }: IframeProps) {\n  const isEditing = useContext(PlasmicCanvasContext);\n  if (isEditing && !preview) {\n    return (\n      <div className={className}>\n        <div\n          style={{\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            background: \"#eee\",\n            color: \"#888\",\n            fontSize: \"36px\",\n            fontFamily: \"sans-serif\",\n            fontWeight: \"bold\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            overflow: \"hidden\",\n          }}\n        >\n          Iframe placeholder\n        </div>\n      </div>\n    );\n  }\n  return <iframe src={src} className={className} />;\n}\n\nexport const iframeMeta: ComponentMeta<IframeProps> = {\n  name: \"hostless-iframe\",\n  displayName: \"Iframe\",\n  importName: \"Iframe\",\n  importPath: \"@plasmicpkgs/plasmic-basic-components\",\n  props: {\n    src: {\n      type: \"string\",\n      defaultValue: \"https://www.example.com\",\n    },\n    preview: {\n      type: \"boolean\",\n      description: \"Load the iframe while editing in Plasmic Studio\",\n    },\n  },\n  defaultStyles: {\n    width: \"300px\",\n    height: \"150px\",\n    maxWidth: \"100%\",\n  },\n};\n\nexport function registerIframe(\n  loader?: { registerComponent: typeof registerComponent },\n  customIframeMeta?: ComponentMeta<IframeProps>\n) {\n  if (loader) {\n    loader.registerComponent(Iframe, customIframeMeta ?? iframeMeta);\n  } else {\n    registerComponent(Iframe, customIframeMeta ?? iframeMeta);\n  }\n}\n","import registerComponent, {\n  ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, {\n  ReactNode,\n  RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nexport function useDirectionalIntersection({\n  ref,\n  scrollDownThreshold = 0.5,\n  scrollUpThreshold = 0,\n}: {\n  ref: RefObject<HTMLElement>;\n  scrollDownThreshold?: number;\n  scrollUpThreshold?: number;\n}) {\n  const [revealed, setRevealed] = useState(false);\n  useEffect(() => {\n    if (ref.current && typeof IntersectionObserver === \"function\") {\n      const handler = (entries: IntersectionObserverEntry[]) => {\n        if (entries[0].intersectionRatio >= scrollDownThreshold) {\n          setRevealed(true);\n        } else if (entries[0].intersectionRatio <= scrollUpThreshold) {\n          setRevealed(false);\n        }\n      };\n\n      const observer = new IntersectionObserver(handler, {\n        root: null,\n        rootMargin: \"0%\",\n        threshold: [scrollUpThreshold, scrollDownThreshold],\n      });\n      observer.observe(ref.current);\n\n      return () => {\n        setRevealed(false);\n        observer.disconnect();\n      };\n    }\n    return () => {};\n  }, [ref.current, scrollDownThreshold, scrollUpThreshold]);\n  return revealed;\n}\n\nexport interface ScrollRevealerProps {\n  children?: ReactNode;\n  className?: string;\n  scrollUpThreshold?: number;\n  scrollDownThreshold?: number;\n}\n\n/**\n * Unlike react-awesome-reveal, ScrollRevealer:\n *\n * - has configurable thresholds\n * - triggers arbitrary render/unrender animations\n *\n * TODO: Merge this inta a general Reveal component, perhaps forking react-awesome-reveal, so that we don't have two different reveal components for users.\n */\nexport default function ScrollRevealer({\n  children,\n  className,\n  scrollDownThreshold = 0.5,\n  scrollUpThreshold = 0,\n}: ScrollRevealerProps) {\n  const intersectionRef = useRef<HTMLDivElement>(null);\n  const revealed = useDirectionalIntersection({\n    ref: intersectionRef,\n    scrollUpThreshold,\n    scrollDownThreshold,\n  });\n  return (\n    <div className={className} ref={intersectionRef}>\n      {revealed ? children : null}\n    </div>\n  );\n}\n\nexport const scrollRevealerMeta: ComponentMeta<ScrollRevealerProps> = {\n  name: \"hostless-scroll-revealer\",\n  importName: \"ScrollRevealer\",\n  displayName: \"Scroll Revealer\",\n  importPath: \"@plasmicpkgs/plasmic-basic-components\",\n  props: {\n    children: \"slot\",\n    scrollDownThreshold: {\n      type: \"number\",\n      displayName: \"Scroll down threshold\",\n      defaultValueHint: 0.5,\n      description:\n        \"How much of the element (as a fraction) must you scroll into view for it to appear (defaults to 0.5)\",\n    },\n    scrollUpThreshold: {\n      type: \"number\",\n      displayName: \"Scroll up threshold\",\n      defaultValueHint: 0,\n      description:\n        \"While scrolling up, how much of the element (as a fraction) can still be scrolled in view before it disappears (defaults to 0, meaning you must scroll up until it's completely out of view)\",\n    },\n  },\n  defaultStyles: {\n    width: \"stretch\",\n    maxWidth: \"100%\",\n  },\n};\n\nexport function registerScrollRevealer(\n  loader?: { registerComponent: typeof registerComponent },\n  customScrollRevealerMeta?: ComponentMeta<ScrollRevealerProps>\n) {\n  if (loader) {\n    loader.registerComponent(\n      ScrollRevealer,\n      customScrollRevealerMeta ?? scrollRevealerMeta\n    );\n  } else {\n    registerComponent(\n      ScrollRevealer,\n      customScrollRevealerMeta ?? scrollRevealerMeta\n    );\n  }\n}\n","import registerComponent, {\n  ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React from \"react\";\n\nexport type VideoProps = Pick<\n  React.ComponentProps<\"video\">,\n  | \"autoPlay\"\n  | \"controls\"\n  | \"loop\"\n  | \"muted\"\n  | \"playsInline\"\n  | \"poster\"\n  | \"preload\"\n  | \"src\"\n>;\n\nconst Video = React.forwardRef<HTMLVideoElement, VideoProps>(\n  (props: VideoProps, ref) => {\n    return <video ref={ref} {...props} />;\n  }\n);\n\nexport default Video;\n\nexport const videoMeta: ComponentMeta<VideoProps> = {\n  name: \"hostless-html-video\",\n  importName: \"Video\",\n  displayName: \"HTML Video\",\n  importPath: \"@plasmicpkgs/plasmic-basic-components\",\n  props: {\n    src: {\n      type: \"string\",\n      defaultValue:\n        \"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm\",\n      displayName: \"Source URL\",\n      description: \"URL to a video file.\",\n    },\n    autoPlay: {\n      type: \"boolean\",\n      displayName: \"Auto Play\",\n      description:\n        \"Whether the video show automatically start playing when the player loads\",\n    },\n    controls: {\n      type: \"boolean\",\n      displayName: \"Show Controls\",\n      description: \"Whether the video player controls should be displayed\",\n    },\n    playsInline: {\n      type: \"boolean\",\n      displayName: \"Plays inline\",\n      description:\n        \"Usually on mobile, when tilted landscape, videos can play fullscreen. Turn this on to prevent that.\",\n    },\n    loop: {\n      type: \"boolean\",\n      displayName: \"Loop\",\n      description: \"Whether the video should be played again after it finishes\",\n    },\n    muted: {\n      type: \"boolean\",\n      displayName: \"Muted\",\n      description: \"Whether audio should be muted\",\n    },\n    poster: {\n      type: \"imageUrl\",\n      displayName: \"Poster (placeholder) image\",\n      description: \"Image to show while video is downloading\",\n    },\n    preload: {\n      type: \"choice\",\n      options: [\"none\", \"metadata\", \"auto\"],\n      displayName: \"Preload\",\n      description:\n        \"Whether to preload nothing, metadata only, or the full video\",\n    },\n  },\n  defaultStyles: {\n    height: \"hug\",\n    width: \"640px\",\n    maxWidth: \"100%\",\n  },\n};\n\nexport function registerVideo(\n  loader?: { registerComponent: typeof registerComponent },\n  customVideoMeta?: ComponentMeta<VideoProps>\n) {\n  if (loader) {\n    loader.registerComponent(Video, customVideoMeta ?? videoMeta);\n  } else {\n    registerComponent(Video, customVideoMeta ?? videoMeta);\n  }\n}\n"],"names":["DataContext","createContext","undefined","applySelector","rawData","selector","curData","split","_curData","useSelector","useDataEnv","useSelectors","selectors","Object","fromEntries","entries","filter","map","args","tuple","useContext","DataProvider","name","data","children","existingEnv","React","Provider","value","DynamicElement","tag","className","propSelectors","props","computed","createElement","DynamicText","DynamicImage","loading","style","objectFit","src","DynamicCollection","loopItemName","keySelector","finalData","item","index","key","repeatedElement","DynamicCollectionGrid","columns","columnGap","rowGap","display","gridTemplateColumns","thisModule","dataProviderMeta","displayName","importName","importPath","type","defaultValue","description","birthYear","profilePicture","dynamicPropsWithoutTag","defaultValueHint","dynamicProps","dynamicElementMeta","dynamicTextMeta","dynamicImageMeta","dynamicCollectionProps","dynamicCollectionMeta","dynamicCollectionGridProps","dynamicCollectionGridMeta","Iframe","preview","PlasmicCanvasContext","position","top","left","right","bottom","background","color","fontSize","fontFamily","fontWeight","alignItems","justifyContent","overflow","iframeMeta","defaultStyles","width","height","maxWidth","useDirectionalIntersection","ref","scrollDownThreshold","scrollUpThreshold","useState","revealed","setRevealed","useEffect","current","IntersectionObserver","observer","intersectionRatio","root","rootMargin","threshold","observe","disconnect","ScrollRevealer","intersectionRef","useRef","scrollRevealerMeta","Video","forwardRef","videoMeta","autoPlay","controls","playsInline","loop","muted","poster","preload","options","loader","customDataProviderMeta","registerComponent","customDynamicCollectionMeta","customDynamicCollectionGridMeta","customDynamicElementMeta","customDynamicImageMeta","customDynamicTextMeta","customIframeMeta","customScrollRevealerMeta","customVideoMeta"],"mappings":"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"}
+{"version":3,"file":"plasmic-basic-components.cjs.production.min.js","sources":["../src/common.ts","../src/Data.tsx","../src/Embed.tsx","../src/Iframe.tsx","../src/ScrollRevealer.tsx","../src/Video.tsx","../src/EmbedCss.tsx"],"sourcesContent":["export const tuple = <T extends any[]>(...args: T): T => args;\n\nexport function ensure<T>(x: T | null | undefined): T {\n  if (x === null || x === undefined) {\n    debugger;\n    throw new Error(`Value must not be undefined or null`);\n  } else {\n    return x;\n  }\n}\n","import { ComponentMeta, repeatedElement } from \"@plasmicapp/host\";\nimport registerComponent from \"@plasmicapp/host/registerComponent\";\nimport React, {\n  ComponentProps,\n  createContext,\n  createElement,\n  ReactNode,\n  useContext,\n} from \"react\";\nimport { tuple } from \"./common\";\n\nexport type DataDict = Record<string, any>;\n\nexport const DataContext = createContext<DataDict | undefined>(undefined);\n\nconst thisModule = \"@plasmicpkgs/plasmic-basic-components\";\n\nexport function applySelector(\n  rawData: DataDict | undefined,\n  selector: string | undefined\n): any {\n  if (!selector) {\n    return undefined;\n  }\n  let curData = rawData;\n  for (const key of selector.split(\".\")) {\n    curData = curData?.[key];\n  }\n  return curData;\n}\n\nexport type SelectorDict = Record<string, string | undefined>;\n\nexport function useSelector(selector: string | undefined): any {\n  const rawData = useDataEnv();\n  return applySelector(rawData, selector);\n}\n\nexport function useSelectors(selectors: SelectorDict = {}): any {\n  const rawData = useDataEnv();\n  return Object.fromEntries(\n    Object.entries(selectors)\n      .filter(([key, selector]) => !!key && !!selector)\n      .map(([key, selector]) => tuple(key, applySelector(rawData, selector)))\n  );\n}\n\nexport function useDataEnv() {\n  return useContext(DataContext);\n}\n\nexport interface DataProviderProps {\n  name?: string;\n  data?: any;\n  children?: ReactNode;\n}\n\nexport function DataProvider({ name, data, children }: DataProviderProps) {\n  const existingEnv = useDataEnv() ?? {};\n  if (!name) {\n    return <>{children}</>;\n  } else {\n    return (\n      <DataContext.Provider value={{ ...existingEnv, [name]: data }}>\n        {children}\n      </DataContext.Provider>\n    );\n  }\n}\n\nexport interface CommonDynamicProps {\n  className?: string;\n  tag?: string;\n  propSelectors?: SelectorDict;\n}\n\nexport function DynamicElement<\n  Tag extends keyof JSX.IntrinsicElements = \"div\"\n>({\n  tag = \"div\",\n  className,\n  children,\n  propSelectors,\n  ...props\n}: CommonDynamicProps & ComponentProps<Tag>) {\n  const computed = useSelectors(propSelectors);\n  return createElement(tag, {\n    children,\n    ...props,\n    ...computed,\n    className: className + \" \" + computed.className,\n  });\n}\n\nexport interface DynamicTextProps extends CommonDynamicProps {\n  selector?: string;\n}\n\nexport function DynamicText({\n  selector,\n  propSelectors,\n  ...props\n}: DynamicTextProps) {\n  return (\n    <DynamicElement\n      {...props}\n      propSelectors={{ ...propSelectors, children: selector }}\n    >\n      {/*This is the default text*/}\n      (DynamicText requires a selector)\n    </DynamicElement>\n  );\n}\n\nexport interface DynamicImageProps\n  extends CommonDynamicProps,\n    ComponentProps<\"img\"> {\n  selector?: string;\n}\n\nexport function DynamicImage({\n  selector,\n  propSelectors,\n  ...props\n}: DynamicImageProps) {\n  return (\n    <DynamicElement<\"img\">\n      tag={\"img\"}\n      loading={\"lazy\"}\n      style={{\n        objectFit: \"cover\",\n      }}\n      {...props}\n      propSelectors={{ ...propSelectors, src: selector }}\n      // Default image placeholder\n      src=\"https://studio.plasmic.app/static/img/placeholder.png\"\n    />\n  );\n}\n\nexport interface DynamicRepeaterProps {\n  children?: ReactNode;\n  loopItemName?: string;\n  keySelector?: string;\n  selector?: string;\n  data?: any;\n}\n\nexport function DynamicRepeater({\n  children,\n  loopItemName,\n  keySelector,\n  selector,\n  data,\n}: DynamicRepeaterProps) {\n  // Defaults to an array of three items.\n  const finalData = data ?? useSelector(selector) ?? [1, 2, 3];\n  return (\n    <>\n      {finalData?.map?.((item: any, index: number) => (\n        <DataProvider\n          key={applySelector(item, keySelector) ?? index}\n          name={loopItemName}\n          data={item}\n        >\n          {repeatedElement(index === 0, children)}\n        </DataProvider>\n      ))}\n    </>\n  );\n}\n\nexport const dynamicRepeaterProps = {\n  selector: {\n    type: \"string\",\n    description:\n      \"The selector expression to use to get the array of data to loop over, such as: someVariable.0.someField\",\n  },\n  loopItemName: {\n    type: \"string\",\n    defaultValue: \"item\",\n    description:\n      \"The name of the variable to use to store the current item in the loop\",\n  },\n  children: \"slot\",\n} as const;\n\nexport const dynamicRepeaterMeta: ComponentMeta<DynamicRepeaterProps> = {\n  name: \"hostless-dynamic-repeater\",\n  displayName: \"Dynamic Repeater\",\n  importName: \"DynamicRepeater\",\n  importPath: thisModule,\n  props: dynamicRepeaterProps,\n};\n\nexport function registerDynamicRepeater(\n  loader?: { registerComponent: typeof registerComponent },\n  customDynamicRepeaterMeta?: ComponentMeta<DynamicRepeaterProps>\n) {\n  if (loader) {\n    loader.registerComponent(\n      DynamicRepeater,\n      customDynamicRepeaterMeta ?? dynamicRepeaterMeta\n    );\n  } else {\n    registerComponent(\n      DynamicRepeater,\n      customDynamicRepeaterMeta ?? dynamicRepeaterMeta\n    );\n  }\n}\n\nexport const dataProviderMeta: ComponentMeta<DataProviderProps> = {\n  name: \"hostless-data-provider\",\n  displayName: \"Data Provider\",\n  importName: \"DataProvider\",\n  importPath: thisModule,\n  // description: \"Makes some specified data available to the subtree in a context\",\n  props: {\n    name: {\n      type: \"string\",\n      defaultValue: \"celebrities\",\n      description: \"The name of the variable to store the data in\",\n    },\n    data: {\n      type: \"object\",\n      defaultValue: [\n        {\n          name: \"Fill Murray\",\n          birthYear: 1950,\n          profilePicture: [\"https://www.fillmurray.com/200/300\"],\n        },\n        {\n          name: \"Place Cage\",\n          birthYear: 1950,\n          profilePicture: [\"https://www.placecage.com/200/300\"],\n        },\n      ],\n    },\n    children: {\n      type: \"slot\",\n      defaultValue: [\n        {\n          type: \"component\",\n          name: \"hostless-dynamic-text\",\n          props: {\n            selector: \"celebrities.0.name\",\n          },\n        },\n        {\n          type: \"component\",\n          name: \"hostless-dynamic-image\",\n          props: {\n            selector: \"celebrities.0.profilePicture\",\n          },\n        },\n      ],\n    },\n  },\n};\n\nexport function registerDataProvider(\n  loader?: { registerComponent: typeof registerComponent },\n  customDataProviderMeta?: ComponentMeta<DataProviderProps>\n) {\n  if (loader) {\n    loader.registerComponent(\n      DataProvider,\n      customDataProviderMeta ?? dataProviderMeta\n    );\n  } else {\n    registerComponent(DataProvider, customDataProviderMeta ?? dataProviderMeta);\n  }\n}\n\nconst dynamicPropsWithoutTag = {\n  propSelectors: {\n    type: \"object\",\n    defaultValueHint: {},\n    description:\n      \"An object whose keys are prop names and values are selector expressions. Use this to set any prop to a dynamic value.\",\n  },\n} as const;\n\nconst dynamicProps = {\n  ...dynamicPropsWithoutTag,\n  tag: {\n    type: \"string\",\n    defaultValueHint: \"div\",\n    description: \"The HTML tag to use\",\n  },\n} as const;\n\n// TODO Eventually we'll want to expose all the base HTML properties, but in the nicer way that we do within the studio.\n\nexport const dynamicElementMeta: ComponentMeta<CommonDynamicProps> = {\n  name: \"hostless-dynamic-element\",\n  displayName: \"Dynamic Element\",\n  importName: \"DynamicElement\",\n  importPath: thisModule,\n  props: { ...dynamicProps, children: \"slot\" },\n};\n\nexport function registerDynamicElement(\n  loader?: { registerComponent: typeof registerComponent },\n  customDynamicElementMeta?: ComponentMeta<CommonDynamicProps>\n) {\n  if (loader) {\n    loader.registerComponent(\n      DynamicElement,\n      customDynamicElementMeta ?? dynamicElementMeta\n    );\n  } else {\n    registerComponent(\n      DynamicElement,\n      customDynamicElementMeta ?? dynamicElementMeta\n    );\n  }\n}\n\nexport const dynamicTextMeta: ComponentMeta<DynamicTextProps> = {\n  name: \"hostless-dynamic-text\",\n  importName: \"DynamicText\",\n  displayName: \"Dynamic Text\",\n  importPath: thisModule,\n  props: {\n    ...dynamicProps,\n    selector: {\n      type: \"string\",\n      description:\n        \"The selector expression to use to get the text, such as: someVariable.0.someField\",\n    },\n  },\n};\n\nexport function registerDynamicText(\n  loader?: { registerComponent: typeof registerComponent },\n  customDynamicTextMeta?: ComponentMeta<DynamicTextProps>\n) {\n  if (loader) {\n    loader.registerComponent(\n      DynamicText,\n      customDynamicTextMeta ?? dynamicTextMeta\n    );\n  } else {\n    registerComponent(DynamicText, customDynamicTextMeta ?? dynamicTextMeta);\n  }\n}\n\nexport const dynamicImageMeta: ComponentMeta<DynamicImageProps> = {\n  name: \"hostless-dynamic-image\",\n  displayName: \"Dynamic Image\",\n  importName: \"DynamicImage\",\n  importPath: thisModule,\n  props: {\n    ...dynamicPropsWithoutTag,\n    selector: {\n      type: \"string\",\n      description:\n        \"The selector expression to use to get the image source URL, such as: someVariable.0.someField\",\n    },\n  },\n};\n\nexport function registerDynamicImage(\n  loader?: { registerComponent: typeof registerComponent },\n  customDynamicImageMeta?: ComponentMeta<DynamicImageProps>\n) {\n  if (loader) {\n    loader.registerComponent(\n      DynamicImage,\n      customDynamicImageMeta ?? dynamicImageMeta\n    );\n  } else {\n    registerComponent(DynamicImage, customDynamicImageMeta ?? dynamicImageMeta);\n  }\n}\n","import registerComponent, {\n  ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useEffect, useRef } from \"react\";\nimport { ensure } from \"./common\";\n\nexport interface EmbedProps {\n  className?: string;\n  code: string;\n  hideInEditor?: boolean;\n}\n\nexport default function Embed({\n  className,\n  code,\n  hideInEditor = false,\n}: EmbedProps) {\n  const rootElt = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (hideInEditor) {\n      return;\n    }\n    Array.from(ensure(rootElt.current).querySelectorAll(\"script\")).forEach(\n      (oldScript) => {\n        const newScript = document.createElement(\"script\");\n        Array.from(oldScript.attributes).forEach((attr) =>\n          newScript.setAttribute(attr.name, attr.value)\n        );\n        newScript.appendChild(document.createTextNode(oldScript.innerHTML));\n        ensure(oldScript.parentNode).replaceChild(newScript, oldScript);\n      }\n    );\n  }, [code, hideInEditor]);\n  const effectiveCode = hideInEditor ? \"\" : code;\n  return (\n    <div\n      ref={rootElt}\n      className={className}\n      dangerouslySetInnerHTML={{ __html: effectiveCode }}\n    />\n  );\n}\n\nexport const embedMeta: ComponentMeta<EmbedProps> = {\n  name: \"hostless-embed\",\n  displayName: \"Embed HTML\",\n  importName: \"Embed\",\n  importPath: \"@plasmicpkgs/plasmic-basic-components\",\n  props: {\n    code: {\n      type: \"string\",\n      defaultValue: \"https://www.example.com\",\n    },\n    hideInEditor: {\n      type: \"boolean\",\n      displayName: \"Hide in editor\",\n      description:\n        \"Disable running the code while editing in Plasmic Studio (may require reload)\",\n      editOnly: true,\n    },\n  },\n  defaultStyles: {\n    maxWidth: \"100%\",\n  },\n};\n\nexport function registerEmbed(\n  loader?: { registerComponent: typeof registerComponent },\n  customEmbedMeta?: ComponentMeta<EmbedProps>\n) {\n  if (loader) {\n    loader.registerComponent(Embed, customEmbedMeta ?? embedMeta);\n  } else {\n    registerComponent(Embed, customEmbedMeta ?? embedMeta);\n  }\n}\n","import { ComponentMeta, PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent from \"@plasmicapp/host/registerComponent\";\nimport React, { useContext } from \"react\";\n\nexport interface IframeProps {\n  src: string;\n  preview?: boolean;\n  className?: string;\n}\n\nexport default function Iframe({ preview, src, className }: IframeProps) {\n  const isEditing = useContext(PlasmicCanvasContext);\n  if (isEditing && !preview) {\n    return (\n      <div className={className}>\n        <div\n          style={{\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            background: \"#eee\",\n            color: \"#888\",\n            fontSize: \"36px\",\n            fontFamily: \"sans-serif\",\n            fontWeight: \"bold\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            overflow: \"hidden\",\n          }}\n        >\n          Iframe placeholder\n        </div>\n      </div>\n    );\n  }\n  return <iframe src={src} className={className} />;\n}\n\nexport const iframeMeta: ComponentMeta<IframeProps> = {\n  name: \"hostless-iframe\",\n  displayName: \"Iframe\",\n  importName: \"Iframe\",\n  importPath: \"@plasmicpkgs/plasmic-basic-components\",\n  props: {\n    src: {\n      type: \"string\",\n      defaultValue: \"https://www.example.com\",\n    },\n    preview: {\n      type: \"boolean\",\n      description: \"Load the iframe while editing in Plasmic Studio\",\n    },\n  },\n  defaultStyles: {\n    width: \"300px\",\n    height: \"150px\",\n    maxWidth: \"100%\",\n  },\n};\n\nexport function registerIframe(\n  loader?: { registerComponent: typeof registerComponent },\n  customIframeMeta?: ComponentMeta<IframeProps>\n) {\n  if (loader) {\n    loader.registerComponent(Iframe, customIframeMeta ?? iframeMeta);\n  } else {\n    registerComponent(Iframe, customIframeMeta ?? iframeMeta);\n  }\n}\n","import registerComponent, {\n  ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, {\n  ReactNode,\n  RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nexport function useDirectionalIntersection({\n  ref,\n  scrollDownThreshold = 0.5,\n  scrollUpThreshold = 0,\n}: {\n  ref: RefObject<HTMLElement>;\n  scrollDownThreshold?: number;\n  scrollUpThreshold?: number;\n}) {\n  const [revealed, setRevealed] = useState(false);\n  useEffect(() => {\n    if (ref.current && typeof IntersectionObserver === \"function\") {\n      const handler = (entries: IntersectionObserverEntry[]) => {\n        if (entries[0].intersectionRatio >= scrollDownThreshold) {\n          setRevealed(true);\n        } else if (entries[0].intersectionRatio <= scrollUpThreshold) {\n          setRevealed(false);\n        }\n      };\n\n      const observer = new IntersectionObserver(handler, {\n        root: null,\n        rootMargin: \"0%\",\n        threshold: [scrollUpThreshold, scrollDownThreshold],\n      });\n      observer.observe(ref.current);\n\n      return () => {\n        setRevealed(false);\n        observer.disconnect();\n      };\n    }\n    return () => {};\n  }, [ref.current, scrollDownThreshold, scrollUpThreshold]);\n  return revealed;\n}\n\nexport interface ScrollRevealerProps {\n  children?: ReactNode;\n  className?: string;\n  scrollUpThreshold?: number;\n  scrollDownThreshold?: number;\n}\n\n/**\n * Unlike react-awesome-reveal, ScrollRevealer:\n *\n * - has configurable thresholds\n * - triggers arbitrary render/unrender animations\n *\n * TODO: Merge this inta a general Reveal component, perhaps forking react-awesome-reveal, so that we don't have two different reveal components for users.\n */\nexport default function ScrollRevealer({\n  children,\n  className,\n  scrollDownThreshold = 0.5,\n  scrollUpThreshold = 0,\n}: ScrollRevealerProps) {\n  const intersectionRef = useRef<HTMLDivElement>(null);\n  const revealed = useDirectionalIntersection({\n    ref: intersectionRef,\n    scrollUpThreshold,\n    scrollDownThreshold,\n  });\n  return (\n    <div className={className} ref={intersectionRef}>\n      {revealed ? children : null}\n    </div>\n  );\n}\n\nexport const scrollRevealerMeta: ComponentMeta<ScrollRevealerProps> = {\n  name: \"hostless-scroll-revealer\",\n  importName: \"ScrollRevealer\",\n  displayName: \"Scroll Revealer\",\n  importPath: \"@plasmicpkgs/plasmic-basic-components\",\n  props: {\n    children: \"slot\",\n    scrollDownThreshold: {\n      type: \"number\",\n      displayName: \"Scroll down threshold\",\n      defaultValueHint: 0.5,\n      description:\n        \"How much of the element (as a fraction) must you scroll into view for it to appear (defaults to 0.5)\",\n    },\n    scrollUpThreshold: {\n      type: \"number\",\n      displayName: \"Scroll up threshold\",\n      defaultValueHint: 0,\n      description:\n        \"While scrolling up, how much of the element (as a fraction) can still be scrolled in view before it disappears (defaults to 0, meaning you must scroll up until it's completely out of view)\",\n    },\n  },\n  defaultStyles: {\n    width: \"stretch\",\n    maxWidth: \"100%\",\n  },\n};\n\nexport function registerScrollRevealer(\n  loader?: { registerComponent: typeof registerComponent },\n  customScrollRevealerMeta?: ComponentMeta<ScrollRevealerProps>\n) {\n  if (loader) {\n    loader.registerComponent(\n      ScrollRevealer,\n      customScrollRevealerMeta ?? scrollRevealerMeta\n    );\n  } else {\n    registerComponent(\n      ScrollRevealer,\n      customScrollRevealerMeta ?? scrollRevealerMeta\n    );\n  }\n}\n","import registerComponent, {\n  ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React from \"react\";\n\nexport type VideoProps = Pick<\n  React.ComponentProps<\"video\">,\n  | \"autoPlay\"\n  | \"controls\"\n  | \"loop\"\n  | \"muted\"\n  | \"playsInline\"\n  | \"poster\"\n  | \"preload\"\n  | \"src\"\n>;\n\nconst Video = React.forwardRef<HTMLVideoElement, VideoProps>(\n  (props: VideoProps, ref) => {\n    return <video ref={ref} {...props} />;\n  }\n);\n\nexport default Video;\n\nexport const videoMeta: ComponentMeta<VideoProps> = {\n  name: \"hostless-html-video\",\n  importName: \"Video\",\n  displayName: \"HTML Video\",\n  importPath: \"@plasmicpkgs/plasmic-basic-components\",\n  props: {\n    src: {\n      type: \"string\",\n      defaultValue:\n        \"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm\",\n      displayName: \"Source URL\",\n      description: \"URL to a video file.\",\n    },\n    autoPlay: {\n      type: \"boolean\",\n      displayName: \"Auto Play\",\n      description:\n        \"Whether the video show automatically start playing when the player loads\",\n    },\n    controls: {\n      type: \"boolean\",\n      displayName: \"Show Controls\",\n      description: \"Whether the video player controls should be displayed\",\n    },\n    playsInline: {\n      type: \"boolean\",\n      displayName: \"Plays inline\",\n      description:\n        \"Usually on mobile, when tilted landscape, videos can play fullscreen. Turn this on to prevent that.\",\n    },\n    loop: {\n      type: \"boolean\",\n      displayName: \"Loop\",\n      description: \"Whether the video should be played again after it finishes\",\n    },\n    muted: {\n      type: \"boolean\",\n      displayName: \"Muted\",\n      description: \"Whether audio should be muted\",\n    },\n    poster: {\n      type: \"imageUrl\",\n      displayName: \"Poster (placeholder) image\",\n      description: \"Image to show while video is downloading\",\n    },\n    preload: {\n      type: \"choice\",\n      options: [\"none\", \"metadata\", \"auto\"],\n      displayName: \"Preload\",\n      description:\n        \"Whether to preload nothing, metadata only, or the full video\",\n    },\n  },\n  defaultStyles: {\n    height: \"hug\",\n    width: \"640px\",\n    maxWidth: \"100%\",\n  },\n};\n\nexport function registerVideo(\n  loader?: { registerComponent: typeof registerComponent },\n  customVideoMeta?: ComponentMeta<VideoProps>\n) {\n  if (loader) {\n    loader.registerComponent(Video, customVideoMeta ?? videoMeta);\n  } else {\n    registerComponent(Video, customVideoMeta ?? videoMeta);\n  }\n}\n","import registerComponent, {\n  ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React from \"react\";\n\nexport interface EmbedCssProps {\n  css: string;\n}\n\nexport default function EmbedCss({\n  css\n}: EmbedCssProps) {\n  return (\n    <style\n      dangerouslySetInnerHTML={{ __html: css }}\n    />\n  );\n}\n\nexport const embedCssMeta: ComponentMeta<EmbedCssProps> = { \n  name: \"hostless-embed-css\",\n  displayName: \"EmbedCss\",\n  importName: \"EmbedCss\",\n  importPath: \"@plasmicpkgs/plasmic-basic-components\",\n  props: {\n    css: {\n      type: \"string\",\n      defaultValueHint: \"Some CSS snippet\",\n      description: \"CSS rules to be inserted\",\n    },\n  },\n};\n\nexport function registerEmbedCss(\n  loader?: { registerComponent: typeof registerComponent },\n  customEmbedCssMeta?: ComponentMeta<EmbedCssProps>\n) {\n  if (loader) {\n    loader.registerComponent(EmbedCss, customEmbedCssMeta ?? embedCssMeta);\n  } else {\n    registerComponent(EmbedCss, customEmbedCssMeta ?? embedCssMeta);\n  }\n}\n"],"names":["ensure","x","Error","DataContext","createContext","undefined","thisModule","applySelector","rawData","selector","curData","split","_curData","useSelector","useDataEnv","useSelectors","selectors","Object","fromEntries","entries","filter","map","args","tuple","useContext","DataProvider","name","data","children","existingEnv","React","Provider","value","DynamicElement","tag","className","propSelectors","props","computed","createElement","DynamicText","DynamicImage","loading","style","objectFit","src","DynamicRepeater","loopItemName","keySelector","finalData","item","index","key","repeatedElement","dynamicRepeaterProps","type","description","defaultValue","dynamicRepeaterMeta","displayName","importName","importPath","dataProviderMeta","birthYear","profilePicture","dynamicPropsWithoutTag","defaultValueHint","dynamicProps","dynamicElementMeta","dynamicTextMeta","dynamicImageMeta","Embed","code","hideInEditor","rootElt","useRef","useEffect","Array","from","current","querySelectorAll","forEach","oldScript","newScript","document","attributes","attr","setAttribute","appendChild","createTextNode","innerHTML","parentNode","replaceChild","ref","dangerouslySetInnerHTML","__html","embedMeta","editOnly","defaultStyles","maxWidth","Iframe","preview","PlasmicCanvasContext","position","top","left","right","bottom","background","color","fontSize","fontFamily","fontWeight","display","alignItems","justifyContent","overflow","iframeMeta","width","height","useDirectionalIntersection","scrollDownThreshold","scrollUpThreshold","useState","revealed","setRevealed","IntersectionObserver","observer","intersectionRatio","root","rootMargin","threshold","observe","disconnect","ScrollRevealer","intersectionRef","scrollRevealerMeta","Video","forwardRef","videoMeta","autoPlay","controls","playsInline","loop","muted","poster","preload","options","EmbedCss","css","embedCssMeta","loader","customDataProviderMeta","registerComponent","customDynamicElementMeta","customDynamicImageMeta","customDynamicRepeaterMeta","customDynamicTextMeta","customEmbedMeta","customEmbedCssMeta","customIframeMeta","customScrollRevealerMeta","customVideoMeta"],"mappings":"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"}

package/dist/plasmic-basic-components.esm.js

@@ -1,6 +1,6 @@
 import { repeatedElement, PlasmicCanvasContext } from '@plasmicapp/host';
 import registerComponent from '@plasmicapp/host/registerComponent';
-import React, { createContext, useContext, createElement, useRef, useState, useEffect } from 'react';
+import React, { createContext, useContext, createElement, useRef, useEffect, useState } from 'react';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -80,8 +80,17 @@ var tuple = function tuple() {
 
   return args;
 };
+function ensure(x) {
+  if (x === null || x === undefined) {
+    debugger;
+    throw new Error("Value must not be undefined or null");
+  } else {
+    return x;
+  }
+}
 
 var DataContext = /*#__PURE__*/createContext(undefined);
+var thisModule = "@plasmicpkgs/plasmic-basic-components";
 function applySelector(rawData, selector) {
   if (!selector) {
     return undefined;
@@ -184,19 +193,17 @@ function DynamicImage(_ref6) {
     src: "https://studio.plasmic.app/static/img/placeholder.png"
   }));
 }
-function DynamicCollection(_ref7) {
+function DynamicRepeater(_ref7) {
   var _ref8;
 
-  var selector = _ref7.selector,
+  var children = _ref7.children,
       loopItemName = _ref7.loopItemName,
-      children = _ref7.children,
-      data = _ref7.data,
       keySelector = _ref7.keySelector,
-      props = _objectWithoutPropertiesLoose(_ref7, ["selector", "loopItemName", "children", "data", "keySelector"]);
-
+      selector = _ref7.selector,
+      data = _ref7.data;
   // Defaults to an array of three items.
   var finalData = (_ref8 = data != null ? data : useSelector(selector)) != null ? _ref8 : [1, 2, 3];
-  return React.createElement(DynamicElement, Object.assign({}, props), finalData == null ? void 0 : finalData.map == null ? void 0 : finalData.map(function (item, index) {
+  return React.createElement(React.Fragment, null, finalData == null ? void 0 : finalData.map == null ? void 0 : finalData.map(function (item, index) {
     var _applySelector;
 
     return React.createElement(DataProvider, {
@@ -206,24 +213,32 @@ function DynamicCollection(_ref7) {
     }, repeatedElement(index === 0, children));
   }));
 }
-function DynamicCollectionGrid(_ref9) {
-  var columns = _ref9.columns,
-      _ref9$columnGap = _ref9.columnGap,
-      columnGap = _ref9$columnGap === void 0 ? 0 : _ref9$columnGap,
-      _ref9$rowGap = _ref9.rowGap,
-      rowGap = _ref9$rowGap === void 0 ? 0 : _ref9$rowGap,
-      props = _objectWithoutPropertiesLoose(_ref9, ["columns", "columnGap", "rowGap"]);
-
-  return React.createElement(DynamicCollection, Object.assign({}, props, {
-    style: {
-      display: "grid",
-      gridTemplateColumns: "repeat(" + columns + ", 1fr)",
-      columnGap: columnGap + "px",
-      rowGap: rowGap + "px"
-    }
-  }));
+var dynamicRepeaterProps = {
+  selector: {
+    type: "string",
+    description: "The selector expression to use to get the array of data to loop over, such as: someVariable.0.someField"
+  },
+  loopItemName: {
+    type: "string",
+    defaultValue: "item",
+    description: "The name of the variable to use to store the current item in the loop"
+  },
+  children: "slot"
+};
+var dynamicRepeaterMeta = {
+  name: "hostless-dynamic-repeater",
+  displayName: "Dynamic Repeater",
+  importName: "DynamicRepeater",
+  importPath: thisModule,
+  props: dynamicRepeaterProps
+};
+function registerDynamicRepeater(loader, customDynamicRepeaterMeta) {
+  if (loader) {
+    loader.registerComponent(DynamicRepeater, customDynamicRepeaterMeta != null ? customDynamicRepeaterMeta : dynamicRepeaterMeta);
+  } else {
+    registerComponent(DynamicRepeater, customDynamicRepeaterMeta != null ? customDynamicRepeaterMeta : dynamicRepeaterMeta);
+  }
 }
-var thisModule = "@plasmicpkgs/plasmic-basic-components";
 var dataProviderMeta = {
   name: "hostless-data-provider",
   displayName: "Data Provider",
@@ -344,61 +359,62 @@ function registerDynamicImage(loader, customDynamicImageMeta) {
     registerComponent(DynamicImage, customDynamicImageMeta != null ? customDynamicImageMeta : dynamicImageMeta);
   }
 }
-var dynamicCollectionProps = /*#__PURE__*/_extends({}, dynamicProps, {
-  selector: {
-    type: "string",
-    description: "The selector expression to use to get the array of data to loop over, such as: someVariable.0.someField"
-  },
-  loopItemName: {
-    type: "string",
-    defaultValue: "item",
-    description: "The name of the variable to use to store the current item in the loop"
-  },
-  children: "slot"
-});
-var dynamicCollectionMeta = {
-  name: "hostless-dynamic-collection",
-  displayName: "Dynamic Collection",
-  importName: "DynamicCollection",
-  importPath: thisModule,
-  props: dynamicCollectionProps
-};
-function registerDynamicCollection(loader, customDynamicCollectionMeta) {
-  if (loader) {
-    loader.registerComponent(DynamicCollection, customDynamicCollectionMeta != null ? customDynamicCollectionMeta : dynamicCollectionMeta);
-  } else {
-    registerComponent(DynamicCollection, customDynamicCollectionMeta != null ? customDynamicCollectionMeta : dynamicCollectionMeta);
-  }
+
+function Embed(_ref) {
+  var className = _ref.className,
+      code = _ref.code,
+      _ref$hideInEditor = _ref.hideInEditor,
+      hideInEditor = _ref$hideInEditor === void 0 ? false : _ref$hideInEditor;
+  var rootElt = useRef(null);
+  useEffect(function () {
+    if (hideInEditor) {
+      return;
+    }
+
+    Array.from(ensure(rootElt.current).querySelectorAll("script")).forEach(function (oldScript) {
+      var newScript = document.createElement("script");
+      Array.from(oldScript.attributes).forEach(function (attr) {
+        return newScript.setAttribute(attr.name, attr.value);
+      });
+      newScript.appendChild(document.createTextNode(oldScript.innerHTML));
+      ensure(oldScript.parentNode).replaceChild(newScript, oldScript);
+    });
+  }, [code, hideInEditor]);
+  var effectiveCode = hideInEditor ? "" : code;
+  return React.createElement("div", {
+    ref: rootElt,
+    className: className,
+    dangerouslySetInnerHTML: {
+      __html: effectiveCode
+    }
+  });
 }
-var dynamicCollectionGridProps = /*#__PURE__*/_extends({}, dynamicCollectionProps, {
-  columns: {
-    type: "number",
-    defaultValue: 2,
-    description: "The number of columns to use in the grid"
-  },
-  columnGap: {
-    type: "number",
-    defaultValue: 8,
-    description: "The gap between columns"
+var embedMeta = {
+  name: "hostless-embed",
+  displayName: "Embed HTML",
+  importName: "Embed",
+  importPath: "@plasmicpkgs/plasmic-basic-components",
+  props: {
+    code: {
+      type: "string",
+      defaultValue: "https://www.example.com"
+    },
+    hideInEditor: {
+      type: "boolean",
+      displayName: "Hide in editor",
+      description: "Disable running the code while editing in Plasmic Studio (may require reload)",
+      editOnly: true
+    }
   },
-  rowGap: {
-    type: "number",
-    defaultValue: 8,
-    description: "The gap between rows"
+  defaultStyles: {
+    maxWidth: "100%"
   }
-});
-var dynamicCollectionGridMeta = {
-  name: "hostless-dynamic-collection-grid",
-  displayName: "Dynamic Collection Grid",
-  importName: "DynamicCollectionGrid",
-  importPath: thisModule,
-  props: dynamicCollectionGridProps
 };
-function registerDynamicCollectionGrid(loader, customDynamicCollectionGridMeta) {
+function registerEmbed(loader, customEmbedMeta) {
   if (loader) {
-    loader.registerComponent(DynamicCollectionGrid, customDynamicCollectionGridMeta != null ? customDynamicCollectionGridMeta : dynamicCollectionGridMeta);
+    loader.registerComponent(Embed, customEmbedMeta != null ? customEmbedMeta : embedMeta);
   } else {
-    registerComponent(DynamicCollectionGrid, customDynamicCollectionGridMeta != null ? customDynamicCollectionGridMeta : dynamicCollectionGridMeta);
+    registerComponent(Embed, customEmbedMeta != null ? customEmbedMeta : embedMeta);
   }
 }
 
@@ -630,5 +646,34 @@ function registerVideo(loader, customVideoMeta) {
   }
 }
 
-export { DataContext, DataProvider, DynamicCollection, DynamicCollectionGrid, DynamicElement, DynamicImage, DynamicText, Iframe, ScrollRevealer, Video, applySelector, dataProviderMeta, dynamicCollectionGridMeta, dynamicCollectionGridProps, dynamicCollectionMeta, dynamicCollectionProps, dynamicElementMeta, dynamicImageMeta, dynamicTextMeta, iframeMeta, registerDataProvider, registerDynamicCollection, registerDynamicCollectionGrid, registerDynamicElement, registerDynamicImage, registerDynamicText, registerIframe, registerScrollRevealer, registerVideo, scrollRevealerMeta, useDataEnv, useDirectionalIntersection, useSelector, useSelectors, videoMeta };
+function EmbedCss(_ref) {
+  var css = _ref.css;
+  return React.createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: css
+    }
+  });
+}
+var embedCssMeta = {
+  name: "hostless-embed-css",
+  displayName: "EmbedCss",
+  importName: "EmbedCss",
+  importPath: "@plasmicpkgs/plasmic-basic-components",
+  props: {
+    css: {
+      type: "string",
+      defaultValueHint: "Some CSS snippet",
+      description: "CSS rules to be inserted"
+    }
+  }
+};
+function registerEmbedCss(loader, customEmbedCssMeta) {
+  if (loader) {
+    loader.registerComponent(EmbedCss, customEmbedCssMeta != null ? customEmbedCssMeta : embedCssMeta);
+  } else {
+    registerComponent(EmbedCss, customEmbedCssMeta != null ? customEmbedCssMeta : embedCssMeta);
+  }
+}
+
+export { DataContext, DataProvider, DynamicElement, DynamicImage, DynamicRepeater, DynamicText, Embed, EmbedCss, Iframe, ScrollRevealer, Video, applySelector, dataProviderMeta, dynamicElementMeta, dynamicImageMeta, dynamicRepeaterMeta, dynamicRepeaterProps, dynamicTextMeta, embedCssMeta, embedMeta, iframeMeta, registerDataProvider, registerDynamicElement, registerDynamicImage, registerDynamicRepeater, registerDynamicText, registerEmbed, registerEmbedCss, registerIframe, registerScrollRevealer, registerVideo, scrollRevealerMeta, useDataEnv, useDirectionalIntersection, useSelector, useSelectors, videoMeta };
 //# sourceMappingURL=plasmic-basic-components.esm.js.map