@knapsack/app/dist/client/custom-slice-collection-VBAVI~317ccae7.chunk.eaa5497fb7f7db0479e3.js

Build Design Systems on top of knapsack, by Basalt

(window.webpackJsonp=window.webpackJsonp||[]).push([["custom-slice-collection-VBAVI~317ccae7"],{"./src/client/pages/custom-page/custom-slice-collection.scss":function(e,t,a){},"./src/client/pages/custom-page/custom-slice-collection.tsx":function(e,t,a){a.r(t);var n=a("../node_modules/@babel/runtime/helpers/esm/defineProperty.js"),l=a("react"),r=a.n(l),i=a("../design-system/dist/ks-design-system.js"),s=a("../node_modules/array-move/index.js"),c=a.n(s),o=a("../node_modules/deep-equal/index.js"),m=a.n(o),d=a("../node_modules/immer/dist/immer.module.js"),u=a("../node_modules/shortid/index.js"),p=a.n(u),g=a("../node_modules/@babel/runtime/helpers/esm/extends.js"),h=a("../node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js"),f=a("../node_modules/classnames/index.js"),v=a.n(f),b=a("../node_modules/react-dropzone/dist/es/index.js"),E=a("./src/client/data.ts"),_=a("./src/client/components/inline-edit.tsx"),k=a("./src/client/hooks.ts");a("./src/client/pages/custom-page/slices/image-slice.scss");function ownKeys(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}var ImageSliceImage=e=>{var{image:t,index:a,showControls:n,handleCaptionSave:s,handleDelete:c,move:o}=e,m=Object(l.useRef)(null),{isDragging:d}=Object(k.a)({ref:m,dragTypeId:"image-slice-image",canDrag:n,index:a,handleDrop:e=>{var{dragIndex:t}=e;o(t,a)}});return r.a.createElement("div",{style:{opacity:d?0:1},ref:m,className:"ks-image-slice__image"},r.a.createElement("div",{className:v()("ks-image-slice__image__img-wrapper",{"ks-image-slice__image__img-wrapper--can-edit":n})},n&&r.a.createElement("div",{className:"ks-image-slice__image__controls"},r.a.createElement("div",{className:"ks-image-slice__image__controls__handle"},r.a.createElement(i.k,{symbol:"drag-handle",size:"s"})),r.a.createElement("div",{className:"ks-image-slice__image__controls__open-external"},r.a.createElement(i.l,{kind:"icon",icon:"external-link",flush:!0,handleTrigger:()=>{window.open(t.src,"_blank")}},"Open in New Window")),r.a.createElement("div",{className:"ks-image-slice__image__controls__delete-btn"},r.a.createElement(i.o,{flush:!0,size:"s",handleTrigger:c})),r.a.createElement("div",{className:"ks-image-slice__image__controls__caption",title:"Image Caption: ".concat(t.caption)},r.a.createElement(_.a,{text:t.caption,handleSave:s,noWrap:!0}))),r.a.createElement("img",{src:t.src,alt:t.caption})))};function handleFiles(e){return _handleFiles.apply(this,arguments)}function _handleFiles(){return(_handleFiles=Object(h.a)((function*(e){return(yield Promise.all(e.map(function(){var e=Object(h.a)((function*(e){var t=yield Object(E.i)(e);return t.ok||console.error("uh oh!",{results:t,file:e}),t.data}));return function(t){return e.apply(this,arguments)}}()))).map(e=>({src:e.publicPath,caption:e.originalName}))}))).apply(this,arguments)}var ImageSlice=e=>{var{canEdit:t,setSliceData:a,data:s={}}=e,{images:o=[],imageSize:m="m"}=s,d=Object(l.useCallback)(function(){var e=Object(h.a)((function*(e){var t=yield handleFiles(e);a({images:(null==o?void 0:o.length)>0?[...t,...o]:[...t]})}));return function(t){return e.apply(this,arguments)}}(),[]),{getRootProps:u,getInputProps:p,isDragActive:f,open:E}=Object(b.a)({onDrop:d,accept:["image/*"],multiple:!0,noClick:!0,noKeyboard:!0}),_=t?u():{},k=p(),y=v()("ks-image-slice",{"ks-image-slice--dragging":f});return(null==o?void 0:o.length)<1&&!t?null:r.a.createElement("div",Object(g.a)({className:y},_),t&&f&&r.a.createElement("div",{className:"ks-image-slice__dropzone"},r.a.createElement("p",null,"Drop images here to upload..."),r.a.createElement("input",k)),(null==o?void 0:o.length)>0?r.a.createElement(i.s,{itemSize:m},o.map((e,l)=>r.a.createElement(ImageSliceImage,{image:e,key:"".concat(e.src,"-").concat(t),index:l,showControls:t,move:(e,t)=>{a({images:c()(o,e,t)})},handleDelete:()=>{a({images:o.filter((e,t)=>l!==t)})},handleCaptionSave:e=>{a({images:o.map((t,a)=>l!==a?t:function _objectSpread(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(a),!0).forEach((function(t){Object(n.a)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):ownKeys(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}({},t,{caption:e}))})}}))):r.a.createElement("div",{className:v()("ks-image-slice__no-images-msg",{"ks-image-slice__no-images-msg__drag-active":f})},r.a.createElement("h3",null,"Image Grid Slice"),r.a.createElement("p",null,"No images have been added yet."),r.a.createElement("p",null,"Add images by dropping them here, or via the slice settings.")))},y={id:"image-slice",title:"Image Grid",description:"Multiple images with captions laid out in a grid.",render:e=>r.a.createElement(ImageSlice,e),renderEditForm:e=>{var{setSliceData:t,data:a}=e;return r.a.createElement(r.a.Fragment,null,r.a.createElement("div",{className:"ks-image-slice__edit-warning"},r.a.createElement(i.C,{type:"warning",message:"Image uploading currently only works on localhost."})),r.a.createElement(i.r,{buttonLabel:"Select Images to Upload",accept:"image/*",multiple:!0,buttonProps:{isFullWidth:!0},handleChange:function(){var e=Object(h.a)((function*(e){var n,l=Array.from(e.target.files);if(l){var r=yield handleFiles(l);t({images:(null==a?void 0:null===(n=a.images)||void 0===n?void 0:n.length)>0?[...r,...a.images]:[...r]})}}));return function(t){return e.apply(this,arguments)}}()}))},schema:{type:"object",required:[],properties:{imageSize:{title:"Image's Display Size",type:"string",enum:["s","m","l"],enumNames:["small","medium","large"],default:"m"}}}},w=a("../node_modules/react-markdown/lib/react-markdown.js"),j=a.n(w),O=a("./src/client/components/suspense-loader.tsx"),S=(a("../node_modules/easymde/dist/easymde.min.css"),a("./src/client/pages/custom-page/slices/markdown-slice.scss"),r.a.lazy(()=>Promise.all([a.e("vendors~react-simplemde-editor-8Hy4D~ffdf5190"),a.e("vendors~react-simplemde-editor-8Hy4D~ecf1b8c5"),a.e("react-simplemde-editor-8Hy4D~8572da40")]).then(a.t.bind(null,"../node_modules/react-simplemde-editor/lib/index.js",7)))),MarkdownSlice=e=>{var{canEdit:t,setSliceData:a,data:n}=e,s=Object(l.useRef)(null),[c,o]=Object(l.useState)(!1),m=Object(l.useCallback)(e=>{!s.current.contains(e.target)&&(o(!1),window.removeEventListener("click",m))},[s]);Object(l.useEffect)(()=>(function cleanup(){window.removeEventListener("click",m)}),[m]);var onClickSlice=e=>{var a=!1;if(e){var n=e.target;(a="A"===(null==n?void 0:n.nodeName))&&(null==n?void 0:n.href)&&(e.preventDefault(),window.open(n.href,"_blank"))}!t||c||a||(o(!0),setTimeout(()=>{window.addEventListener("click",m)},0))};return r.a.createElement("div",{className:"markdown-slice",ref:s,role:"button",tabIndex:0,onClick:onClickSlice,onKeyDown:onClickSlice},c&&r.a.createElement(O.a,null,r.a.createElement(S,{onChange:e=>a({md:e}),value:(null==n?void 0:n.md)||"",options:{indentWithTabs:!1,promptURLs:!0,spellChecker:!1,minHeight:"22px",placeholder:"Enter markdown content...",status:!1}})),!c&&r.a.createElement(j.a,{source:n&&n.md?n.md.trim():"No text has been entered...",renderers:{code:e=>{var{language:t,value:a}=e;return r.a.createElement(i.g,{code:a,language:t})}}}))},D={id:"markdown-slice",title:"Text",render:e=>r.a.createElement(MarkdownSlice,e)},I=a("../node_modules/url/url.js"),N=a.n(I),P=(a("./src/client/pages/custom-page/slices/figma-slice.scss"),{id:"figma-slice",title:"Figma Embed",render:e=>{var t,{figmaFileUrl:a,height:n=500}=null!==(t=null==e?void 0:e.data)&&void 0!==t?t:{};if(!a)return r.a.createElement("div",{className:"ks-figma-slice__empty-state"},r.a.createElement("h3",null,"Figma Embed Slice"),r.a.createElement("p",null,"A Figma URL has not been provided yet."),r.a.createElement("p",null,r.a.createElement("strong",null,"Getting Started:")),r.a.createElement("ol",null,r.a.createElement("li",null,"From Figma, copy a share link (not embed code)."),r.a.createElement("ol",null,r.a.createElement("li",null,"For a whole Page, click the share button at the top right, then click Copy Link."),r.a.createElement("li",null,"For a single Frame, right click on the frame and select Copy/Past, then Copy Link.")),r.a.createElement("li",null,"Provide the link in the slice settings.")),r.a.createElement("p",{className:"ks-figma-slice__empty-state__note"},"If using a single frame from a page and this slice shows the whole page initially, this is because Figma is still working on the single frame preview. After a minute, refresh and it should be working."));var{host:l}=N.a.parse(a,!0);if("www.figma.com"!==l)throw new Error('Provided url needs to be for Figma.com, received "'.concat(a,'"'));var i=N.a.format({protocol:"https",hostname:"www.figma.com",pathname:"/embed",query:{embed_host:"share",url:a}});return r.a.createElement("div",{className:"ks-figma-slice"},r.a.createElement("iframe",{src:i,width:"100%",height:n,allowFullScreen:!0,title:"Figma"}))},schema:{type:"object",required:["figmaFileUrl"],properties:{figmaFileUrl:{title:"Figma Url",description:"Link to Figma file from share url (not embed code)",type:"string"},height:{title:"Embed Height",type:"number",default:480}}}});function escapeRegEx(e){return e.replace(/[*+?^${}()|[\]\\]/g,"\\$&")}function design_token_slice_ownKeys(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function design_token_slice_objectSpread(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?design_token_slice_ownKeys(Object(a),!0).forEach((function(t){Object(n.a)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):design_token_slice_ownKeys(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}var x=[{id:"color-swatch",title:"Color Swatches",render:e=>r.a.createElement(i.h,{tokens:e.tokens})},{id:"spacing",title:"Spacing",render:i.A},{id:"media-query",title:"Media Queries",render:e=>r.a.createElement(i.d,{tokens:e.tokens})},{render:i.j,id:"table-list",title:"Table List"},{id:"simple-list",title:"Simple List",render:e=>{var{tokens:t}=e;return t?r.a.createElement("ul",null,t.map(e=>r.a.createElement("li",{key:e.name},r.a.createElement(i.i,{snippet:e.code})," -"," ",r.a.createElement(i.i,{snippet:e.value})," ",e.comment&&r.a.createElement("span",null," ",e.comment)))):null}},{id:"box-shadow",title:"Box Shadow",render:i.c},{id:"text-shadow",title:"Text Shadow",render:i.F},{id:"text-color",title:"Text Color",render:i.D},{id:"border",title:"Border",render:i.a},{id:"border-radius",title:"Border Radius",render:i.b},{id:"raw-values",title:"Raw Values",render:e=>{var{tokens:t}=e;return r.a.createElement("details",{open:!0},r.a.createElement("summary",null,"Raw Values"),r.a.createElement("pre",null,r.a.createElement("code",null,JSON.stringify(t,null,"  "))))}}];function filterTokens(e){var{allTokens:t,category:a,tags:n,name:l}=e,r=[...t],i=function getCategories(e){var t=new Set;return e.forEach(e=>t.add(e.category)),[...t].filter(Boolean)}(t);a&&(r=r.filter(e=>e.category===a));var s=function getTags(e){var t=new Set;return e.forEach(e=>{var{tags:a=[]}=e;return a.forEach(e=>t.add(e))}),[...t].filter(Boolean)}(r);return n&&n.length>0&&(r=r.filter(e=>(function hasItemsInItems(e,t){return e.some(e=>t.includes(e))})(e.tags,s))),l&&(r=r.filter(e=>(function containsString(e,t){var a=escapeRegEx(t).toLowerCase();return-1!==escapeRegEx(e).toLowerCase().search(a)})(e.name,l))),{tokens:r,theseTags:s,theseCategories:i}}var DesignTokenSliceEdit=e=>{var{data:t={demo:{id:""},tokens:{category:"",tags:[],name:""}},setSliceData:a,state:n={allTokens:[]},setState:l}=e,{allTokens:s}=n;if(!s)return null;var{theseCategories:c,theseTags:o}=filterTokens(design_token_slice_objectSpread({allTokens:s},t.tokens));return r.a.createElement("div",{className:"ks-design-token-slice-edit"},r.a.createElement(i.y,{formData:t,schema:{type:"object",$schema:"http://json-schema.org/draft-07/schema",properties:{tokens:{type:"object",title:"Design Tokens to Show",description:"Filter the list of all available design tokens.",properties:{category:{type:"string",title:"Design Token Category",enum:c},tags:{type:"array",title:"Design Token Tags",uniqueItems:!0,default:o,items:{type:"string",enum:o}},name:{type:"string",title:"Design Token Name filter"}}},demo:{type:"object",title:"Design Token Display",description:"How to display this list of design tokens.",properties:{id:{type:"string",title:"Display Style",enum:x.map(e=>e.id),enumNames:x.map(e=>e.title),default:"raw-values"}}}}},uiSchema:{classNames:"ks-rjsf-custom-object-grid-2",tokens:{tags:{"ui:widget":"checkboxes","ui:options":{inline:!0}}}},onChange:e=>{var{formData:t}=e;a(t)}}))},DesignTokenSlice=e=>{var t,{data:a={demo:{id:""},tokens:{category:"",tags:[],name:""}},setSliceData:n,state:i={},setState:s}=e,c=null==a?void 0:null===(t=a.demo)||void 0===t?void 0:t.id;Object(l.useEffect)(()=>{Object(E.c)().then(e=>{s({tokens:e,allTokens:e})})},[]);var{allTokens:o}=i;if(!o)return r.a.createElement("div",null,"Loading...");var{tokens:m}=filterTokens(design_token_slice_objectSpread({allTokens:o},a.tokens)),d=r.a.createElement("div",null,r.a.createElement("p",null,"No demo with id ",r.a.createElement("code",null,c)," found, it should be one of these:"),r.a.createElement("ul",null,x.map(e=>r.a.createElement("li",{key:e.id},r.a.createElement("code",null,e.id))))),u=x.find(e=>e.id===c);return r.a.createElement("div",{className:"ks-design-token-slice"},!u&&d,u&&m&&u.render({tokens:m}))},C={id:"design-token-slice",title:"Design Tokens",description:"Filter and display design tokens.",render:e=>r.a.createElement(DesignTokenSlice,e),renderEditForm:e=>r.a.createElement(DesignTokenSliceEdit,e),initialData:{demo:{id:"simple-list"},tokens:{category:"",tags:[],name:""}}},F=a("./src/client/pages/pattern-view/template-view.tsx"),T=a("./src/client/store/index.ts");a("./src/client/pages/custom-page/slices/pattern-template-slice.scss");function pattern_template_slice_ownKeys(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function PatternTemplateSliceEdit(e){var{canEdit:t,setSliceData:a,data:s}=e,[c,o]=Object(l.useState)(s||{patternId:"",templateId:"",demoId:"",showReadme:!1,demoSize:"m",showSchemaForm:!0}),m=Object(T.useSelector)(e=>Object.values(e.patternsState.patterns));if(0===m.length)return r.a.createElement("div",null,"Loading...");var{patternId:d,templateId:u,demoId:p,showReadme:g,demoSize:h,showSchemaForm:f}=c,v={patternId:{type:"string",title:"Pattern",enum:m.map(e=>e.id),enumNames:m.map(e=>e.title)}};if(d){var{templates:b}=m.find(e=>e.id===d);v.templateId={type:"string",title:"Template",enum:b.map(e=>e.id),enumNames:b.map(e=>e.title),default:b.map(e=>e.id)[0]}}if(u){var{templates:E}=m.find(e=>e.id===d),{demos:_,demosById:k}=E.find(e=>e.id===u);v.demoId={type:"string",title:"Example",enum:_,enumNames:_.map(e=>{var t;return null===(t=k[e])||void 0===t?void 0:t.title})}}return f&&(v.demoSize={type:"string",title:"Stage Size",enum:["s","m","l","full"],enumNames:["Small","Medium","Large","Full"],default:"l"}),v.showSchemaForm={type:"boolean",title:"Show Schema Form",default:!0},r.a.createElement(i.y,{formData:c,schema:{type:"object",$schema:"http://json-schema.org/draft-07/schema",properties:v},isInline:!0,onChange:e=>{var t,{formData:l}=e,r=function pattern_template_slice_objectSpread(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?pattern_template_slice_ownKeys(Object(a),!0).forEach((function(t){Object(n.a)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):pattern_template_slice_ownKeys(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}({},l);(l.patternId!==c.patternId&&(r.templateId="",r.demoId=""),r.patternId)||(r.patternId=null===(t=m[0])||void 0===t?void 0:t.id);l.templateId!==c.templateId&&(r.templateId="");var i,{templates:s}=m.find(e=>e.id===r.patternId);r.templateId||(r.templateId=null===(i=s[0])||void 0===i?void 0:i.id,r.demoId="");if(!r.demoId){var d,[u]=null===(d=s.find(e=>e.id===r.templateId))||void 0===d?void 0:d.demos;r.demoId=u}o(r),a(r)}})}var PatternTemplateSlice=e=>{var{data:t}=e,{patternId:a,templateId:n,demoId:l,showReadme:i,demoSize:s,showSchemaForm:c}=t,o=a&&n&&l;return r.a.createElement(r.a.Fragment,null,o&&r.a.createElement(F.a,{templateId:n,id:a,demoId:l,isVerbose:!1,isReadmeShown:i,demoSize:s,isTitleShown:!1,isSchemaFormShown:c}),!o&&r.a.createElement("div",{className:"pattern-template-slice__empty-state"},r.a.createElement("h3",null,"Pattern Example"),r.a.createElement("p",null,"No pattern example has been selected."),r.a.createElement("p",null,"Select and configure the example in the slice settings.")))},R=[D,y,P,C,{id:"pattern-template-slice",title:"Pattern Example",description:"Render a Pattern Example",render:e=>r.a.createElement(PatternTemplateSlice,e),renderEditForm:e=>r.a.createElement(PatternTemplateSliceEdit,e)}];a("./src/client/pages/custom-page/custom-slice.scss");class custom_slice_CustomSliceErrorCatcher extends r.a.Component{componentDidCatch(e,t){console.error({error:e,errorInfo:t}),this.props.setErrorMsg(e.message)}render(){return this.props.errorMsg?r.a.createElement(i.C,{type:"error"},r.a.createElement("h3",null,"Error in component, please try changing data"),r.a.createElement("p",null,this.props.errorMsg)):this.props.children}}var custom_page_custom_slice=e=>{var t,a,{slice:n,sliceIndex:s,canEdit:c,slicesLength:o,moveSlice:m,moveSliceDown:d,moveSliceUp:u,deleteSlice:g,setSliceData:h,addSlice:f}=e,b=Object(l.useRef)(),{isDragging:E}=Object(k.a)({index:s,ref:b,dragTypeId:"custom-slice",handleDrop:e=>{var{dragIndex:t}=e;m(s,t)}}),[_,y]=Object(l.useState)(""),w=Object(l.useRef)(p.a.generate());Object(l.useEffect)(()=>{_&&(w.current=p.a.generate(),y(""))},[n]);var[j,O]=Object(l.useState)(!1),[S,D]=Object(i.G)(b),[I,N]=Object(l.useState)(!1),P=Object(l.useRef)(null),[x,C]=Object(l.useState)(),F=R.find(e=>e.id===n.blockId),T={data:null!==(t=n.data)&&void 0!==t?t:{},setSliceData:e=>h(s,e),canEdit:c,state:x,setState:C},z=Object(l.useMemo)(()=>null==F?void 0:F.render(T),[T.data,T.state]);if(!F)return console.error("Could not find slice!",{slice:n,knapsackSlices:R}),r.a.createElement("div",{className:"ks-custom-slice__missing"},r.a.createElement("p",null,r.a.createElement("strong",null,"Error: Could not find slice id ",r.a.createElement("code",null,n.blockId),"! Delete slice or resolve.")),r.a.createElement(i.o,{handleTrigger:()=>g(s)}));var L=0===s,K=s+1===o,A=c&&D||j||I,M=!!F.schema||!!F.renderEditForm,U=v()("ks-custom-slice",{"ks-custom-slice--dragging":E,"ks-custom-slice--can-edit":c,"ks-custom-slice--edit-ui-visible":A});return r.a.createElement("aside",{ref:S,className:U},r.a.createElement("div",{className:"ks-custom-slice__content-wrapper"},c&&r.a.createElement("div",{className:"ks-custom-slice__controls"},r.a.createElement("div",{className:"ks-custom-slice__left-controls"},!(L&&K)&&r.a.createElement("div",{className:"ks-custom-slice__move-controls"},!L&&r.a.createElement("div",{className:"ks-custom-slice__move-controls__move"},r.a.createElement(i.l,{kind:"icon",disabled:L,size:"s",icon:"move-item-up",flush:!0,handleTrigger:()=>u(s)},"Move Slice Up")),r.a.createElement("div",{className:"ks-custom-slice__move-controls__handle"},r.a.createElement(i.k,{symbol:"drag-handle"})),!K&&r.a.createElement("div",{className:"ks-custom-slice__move-controls__move"},r.a.createElement(i.l,{kind:"icon",disabled:K,size:"s",icon:"move-item-down",flush:!0,handleTrigger:()=>d(s)},"Move Slice Down"))),r.a.createElement("div",{className:"ks-custom-slice__add-btn"},r.a.createElement(i.t,{trigger:"prop",isOpen:I,position:"bottom",maxWidth:360,onClickOutside:()=>N(!1),content:r.a.createElement("div",{className:"ks-custom-slice__add-btn__select"},r.a.createElement(i.u,{options:[{label:"Select a slice to add...",value:""},...R.map(e=>({label:e.title||e.id,value:e.id}))],isSearchable:!0,openByDefault:!0,handleChange:e=>{var{value:t}=e;t&&f(s+1,t),N(!1)},innerRef:P}))},r.a.createElement(i.l,{kind:"icon",icon:"add",flush:!0,handleTrigger:()=>{N(!0),setTimeout(()=>{P.current.focus()},10)}},"Add Slice")))),r.a.createElement("div",{className:"ks-custom-slice__slice-actions"},M&&r.a.createElement("div",{className:"ks-custom-slice__edit-btn"},r.a.createElement(i.t,{trigger:"prop",position:"right",maxWidth:360,isOpen:j,onClickOutside:()=>O(!1),content:r.a.createElement(r.a.Fragment,null,r.a.createElement("h4",null,F.title),F.schema&&r.a.createElement(i.y,{schema:F.schema,uiSchema:F.uiSchema||{},formData:n.data,onChange:e=>{var{formData:t}=e;h(s,t)}}),null==F?void 0:null===(a=F.renderEditForm)||void 0===a?void 0:a.call(F,T))},r.a.createElement(i.l,{size:"s",icon:"edit",kind:"icon",flush:!0,handleTrigger:()=>O(e=>!e)},"Edit"))),r.a.createElement("div",{className:"ks-custom-slice__delete-btn"},r.a.createElement(i.o,{size:"s",flush:!0,handleTrigger:()=>g(s)})))),r.a.createElement("div",{className:"ks-custom-slice__content"},r.a.createElement(custom_slice_CustomSliceErrorCatcher,{setErrorMsg:y,errorMsg:_,key:w.current},z))))};a("./src/client/pages/custom-page/custom-slice-collection.scss");function custom_slice_collection_ownKeys(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}var AddSliceForm=e=>{var{addSlice:t,index:a}=e;return r.a.createElement(i.u,{options:[{label:"Select type...",value:""},...R.map(e=>({label:e.title||e.id,value:e.id}))],isSearchable:!0,label:"Add a Content Slice",handleChange:e=>{var{value:n}=e;n&&t(a,n)}})};t.default=r.a.memo(e=>{var{initialSlices:t,handleSave:a}=e,s=Object(T.useSelector)(e=>e.userState.canEdit),o=Object(l.useRef)(null),[m,u]=Object(i.H)(t,a),g=Object(l.useCallback)((e,t)=>{u(a=>a.map((a,l)=>l!==e?a:function custom_slice_collection_objectSpread(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?custom_slice_collection_ownKeys(Object(a),!0).forEach((function(t){Object(n.a)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):custom_slice_collection_ownKeys(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}({},a,{data:t})))},[u]),h=Object(l.useCallback)((e,t)=>{var a=R.find(e=>e.id===t);u(n=>Object(d.a)(n,n=>{n.splice(e,0,{id:p.a.generate(),blockId:t,data:a.initialData});var l=o.current.children[e].querySelector(".customSliceScrollAnchor");l&&l.scrollIntoView(!0)}))},[u]),f=Object(l.useCallback)(e=>{u(t=>t.filter((t,a)=>a!==e))},[u]),v=Object(l.useCallback)((e,t)=>{u(a=>c()(a,e,t))},[u]),b=Object(l.useCallback)(e=>v(e,e-1),[v]),E=Object(l.useCallback)(e=>v(e,e+1),[v]);return r.a.createElement("section",{className:"ks-custom-slice-collection",ref:o},m.map((e,t)=>r.a.createElement("div",{key:e.id,className:"ks-custom-slice-collection__item"},r.a.createElement("div",{className:"ks-custom-slice-collection__scroll-anchor customSliceScrollAnchor"}),r.a.createElement(custom_page_custom_slice,{key:e.id,slice:e,sliceIndex:t,slicesLength:m.length,canEdit:s,setSliceData:g,moveSlice:v,deleteSlice:f,moveSliceUp:b,moveSliceDown:E,addSlice:h}))),s&&r.a.createElement("div",{className:"ks-custom-slice-collection__add-slice"},r.a.createElement(AddSliceForm,{addSlice:h,index:m.length})))},(e,t)=>m()(e.initialSlices,t.initialSlices))},"./src/client/pages/custom-page/custom-slice.scss":function(e,t,a){},"./src/client/pages/custom-page/slices/figma-slice.scss":function(e,t,a){},"./src/client/pages/custom-page/slices/image-slice.scss":function(e,t,a){},"./src/client/pages/custom-page/slices/markdown-slice.scss":function(e,t,a){},"./src/client/pages/custom-page/slices/pattern-template-slice.scss":function(e,t,a){}}]);
//# sourceMappingURL=custom-slice-collection-VBAVI~317ccae7.chunk.eaa5497fb7f7db0479e3.js.map