From e604767e438e3d7fe56f9875af583708af754acc Mon Sep 17 00:00:00 2001 From: Nikita Date: Thu, 21 Nov 2024 20:18:45 +0300 Subject: [PATCH] Checkbox control multiple option (#326) * added Multiple option support for checkbox control changed checkbox alongside text and checked panel in constructor ui * remove unused multiple option from Radio control * build * simplified multiple checkbox algorithm --- build/control-checkbox.asset.php | 2 +- build/control-checkbox.js | 2 +- controls/checkbox/index.php | 88 +++++++++++++- controls/checkbox/script.js | 196 ++++++++++++++++++++++++++----- controls/radio/index.php | 1 - 5 files changed, 254 insertions(+), 35 deletions(-) diff --git a/build/control-checkbox.asset.php b/build/control-checkbox.asset.php index d56a8ba9c..9bebccfd5 100644 --- a/build/control-checkbox.asset.php +++ b/build/control-checkbox.asset.php @@ -1 +1 @@ - array('wp-components', 'wp-hooks', 'wp-i18n'), 'version' => 'ff206dcad436b42d1c1c'); + array('react', 'react-dom', 'wp-components', 'wp-compose', 'wp-hooks', 'wp-i18n'), 'version' => 'f7056cb1d81a3b49127c'); diff --git a/build/control-checkbox.js b/build/control-checkbox.js index a3d621396..96593577d 100644 --- a/build/control-checkbox.js +++ b/build/control-checkbox.js @@ -1 +1 @@ -(()=>{var e={8655:(e,t)=>{var n;!function(){"use strict";var r=function(){function e(){}function t(e,t){for(var n=t.length,r=0;r{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";const e=window.wp.i18n,t=window.wp.hooks,r=window.wp.components;var o=n(8655),l=n.n(o),a=["label","help","className","children"];function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:{},r=n.className,o=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r{var e={8655:(e,t)=>{var n;!function(){"use strict";var r=function(){function e(){}function t(e,t){for(var n=t.length,r=0;r{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";const e=window.wp.i18n,t=window.wp.hooks,r=window.wp.components;var o=n(8655),i=n.n(o),l=["label","help","className","children"];function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:{},r=n.className,o=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r{t.current=e})),(0,g.useCallback)((function(){for(var e=arguments.length,n=new Array(e),r=0;r{n.current!==e&&(n.current=e)}),t),n}function I(e,t){const n=(0,g.useRef)();return(0,g.useMemo)((()=>{const t=e(n.current);return n.current=t,t}),[...t])}function N(e){const t=k(e),n=(0,g.useRef)(null),r=(0,g.useCallback)((e=>{e!==n.current&&(null==t||t(e,n.current)),n.current=e}),[]);return[n,r]}function z(e){const t=(0,g.useRef)();return(0,g.useEffect)((()=>{t.current=e}),[e]),t.current}let A={};function P(e,t){return(0,g.useMemo)((()=>{if(t)return t;const n=null==A[e]?0:A[e]+1;return A[e]=n,e+"-"+n}),[e,t])}function j(e){return function(t){for(var n=arguments.length,r=new Array(n>1?n-1:0),o=1;o{const r=Object.entries(n);for(const[n,o]of r){const r=t[n];null!=r&&(t[n]=r+e*o)}return t}),{...t})}}const T=j(1),L=j(-1);function _(e){if(!e)return!1;const{KeyboardEvent:t}=E(e.target);return t&&e instanceof t}function B(e){if(function(e){if(!e)return!1;const{TouchEvent:t}=E(e.target);return t&&e instanceof t}(e)){if(e.touches&&e.touches.length){const{clientX:t,clientY:n}=e.touches[0];return{x:t,y:n}}if(e.changedTouches&&e.changedTouches.length){const{clientX:t,clientY:n}=e.changedTouches[0];return{x:t,y:n}}}return function(e){return"clientX"in e&&"clientY"in e}(e)?{x:e.clientX,y:e.clientY}:null}const F=Object.freeze({Translate:{toString(e){if(!e)return;const{x:t,y:n}=e;return"translate3d("+(t?Math.round(t):0)+"px, "+(n?Math.round(n):0)+"px, 0)"}},Scale:{toString(e){if(!e)return;const{scaleX:t,scaleY:n}=e;return"scaleX("+t+") scaleY("+n+")"}},Transform:{toString(e){if(e)return[F.Translate.toString(e),F.Scale.toString(e)].join(" ")}},Transition:{toString(e){let{property:t,duration:n,easing:r}=e;return t+" "+n+"ms "+r}}}),U="a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]";function H(e){return e.matches(U)?e:e.querySelector(U)}const V={display:"none"};function Y(e){let{id:t,value:n}=e;return m().createElement("div",{id:t,style:V},n)}function X(e){let{id:t,announcement:n,ariaLiveType:r="assertive"}=e;return m().createElement("div",{id:t,style:{position:"fixed",width:1,height:1,margin:-1,border:0,padding:0,overflow:"hidden",clip:"rect(0 0 0 0)",clipPath:"inset(100%)",whiteSpace:"nowrap"},role:"status","aria-live":r,"aria-atomic":!0},n)}const K=(0,g.createContext)(null),W={draggable:"\n To pick up a draggable item, press the space bar.\n While dragging, use the arrow keys to move the item.\n Press space again to drop the item in its new position, or press escape to cancel.\n "},Z={onDragStart(e){let{active:t}=e;return"Picked up draggable item "+t.id+"."},onDragOver(e){let{active:t,over:n}=e;return n?"Draggable item "+t.id+" was moved over droppable area "+n.id+".":"Draggable item "+t.id+" is no longer over a droppable area."},onDragEnd(e){let{active:t,over:n}=e;return n?"Draggable item "+t.id+" was dropped over droppable area "+n.id:"Draggable item "+t.id+" was dropped."},onDragCancel(e){let{active:t}=e;return"Dragging was cancelled. Draggable item "+t.id+" was dropped."}};function q(e){let{announcements:t=Z,container:n,hiddenTextDescribedById:r,screenReaderInstructions:o=W}=e;const{announce:i,announcement:l}=function(){const[e,t]=(0,g.useState)("");return{announce:(0,g.useCallback)((e=>{null!=e&&t(e)}),[]),announcement:e}}(),a=P("DndLiveRegion"),[c,s]=(0,g.useState)(!1);if((0,g.useEffect)((()=>{s(!0)}),[]),function(e){const t=(0,g.useContext)(K);(0,g.useEffect)((()=>{if(!t)throw new Error("useDndMonitor must be used within a children of ");return t(e)}),[e,t])}((0,g.useMemo)((()=>({onDragStart(e){let{active:n}=e;i(t.onDragStart({active:n}))},onDragMove(e){let{active:n,over:r}=e;t.onDragMove&&i(t.onDragMove({active:n,over:r}))},onDragOver(e){let{active:n,over:r}=e;i(t.onDragOver({active:n,over:r}))},onDragEnd(e){let{active:n,over:r}=e;i(t.onDragEnd({active:n,over:r}))},onDragCancel(e){let{active:n,over:r}=e;i(t.onDragCancel({active:n,over:r}))}})),[i,t])),!c)return null;const u=m().createElement(m().Fragment,null,m().createElement(Y,{id:r,value:o.draggable}),m().createElement(X,{id:a,announcement:l}));return n?(0,b.createPortal)(u,n):u}var J;function G(){}!function(e){e.DragStart="dragStart",e.DragMove="dragMove",e.DragEnd="dragEnd",e.DragCancel="dragCancel",e.DragOver="dragOver",e.RegisterDroppable="registerDroppable",e.SetDroppableDisabled="setDroppableDisabled",e.UnregisterDroppable="unregisterDroppable"}(J||(J={}));const $=Object.freeze({x:0,y:0});function Q(e,t){let{data:{value:n}}=e,{data:{value:r}}=t;return n-r}function ee(e,t){let{data:{value:n}}=e,{data:{value:r}}=t;return r-n}function te(e,t,n){return void 0===t&&(t=e.left),void 0===n&&(n=e.top),{x:t+.5*e.width,y:n+.5*e.height}}const ne=e=>{let{collisionRect:t,droppableRects:n,droppableContainers:r}=e;const o=te(t,t.left,t.top),i=[];for(const e of r){const{id:t}=e,r=n.get(t);if(r){const n=(l=te(r),a=o,Math.sqrt(Math.pow(l.x-a.x,2)+Math.pow(l.y-a.y,2)));i.push({id:t,data:{droppableContainer:e,value:n}})}}var l,a;return i.sort(Q)};function re(e,t){const n=Math.max(t.top,e.top),r=Math.max(t.left,e.left),o=Math.min(t.left+t.width,e.left+e.width),i=Math.min(t.top+t.height,e.top+e.height),l=o-r,a=i-n;if(r{let{collisionRect:t,droppableRects:n,droppableContainers:r}=e;const o=[];for(const e of r){const{id:r}=e,i=n.get(r);if(i){const n=re(i,t);n>0&&o.push({id:r,data:{droppableContainer:e,value:n}})}}return o.sort(ee)};function ie(e,t){return e&&t?{x:e.left-t.left,y:e.top-t.top}:$}function le(e){return function(t){for(var n=arguments.length,r=new Array(n>1?n-1:0),o=1;o({...t,top:t.top+e*n.y,bottom:t.bottom+e*n.y,left:t.left+e*n.x,right:t.right+e*n.x})),{...t})}}const ae=le(1);const ce={ignoreTransform:!1};function se(e,t){void 0===t&&(t=ce);let n=e.getBoundingClientRect();if(t.ignoreTransform){const{transform:t,transformOrigin:r}=E(e).getComputedStyle(e);t&&(n=function(e,t,n){const r=function(e){if(e.startsWith("matrix3d(")){const t=e.slice(9,-1).split(/, /);return{x:+t[12],y:+t[13],scaleX:+t[0],scaleY:+t[5]}}if(e.startsWith("matrix(")){const t=e.slice(7,-1).split(/, /);return{x:+t[4],y:+t[5],scaleX:+t[0],scaleY:+t[3]}}return null}(t);if(!r)return e;const{scaleX:o,scaleY:i,x:l,y:a}=r,c=e.left-l-(1-o)*parseFloat(n),s=e.top-a-(1-i)*parseFloat(n.slice(n.indexOf(" ")+1)),u=o?e.width/o:e.width,d=i?e.height/i:e.height;return{width:u,height:d,top:s,right:c+u,bottom:s+d,left:c}}(n,t,r))}const{top:r,left:o,width:i,height:l,bottom:a,right:c}=n;return{top:r,left:o,width:i,height:l,bottom:a,right:c}}function ue(e){return se(e,{ignoreTransform:!0})}function de(e,t){const n=[];return e?function r(o){if(null!=t&&n.length>=t)return n;if(!o)return n;if(C(o)&&null!=o.scrollingElement&&!n.includes(o.scrollingElement))return n.push(o.scrollingElement),n;if(!D(o)||S(o))return n;if(n.includes(o))return n;const i=E(e).getComputedStyle(o);return o!==e&&function(e,t){void 0===t&&(t=E(e).getComputedStyle(e));const n=/(auto|scroll|overlay)/;return["overflow","overflowX","overflowY"].some((e=>{const r=t[e];return"string"==typeof r&&n.test(r)}))}(o,i)&&n.push(o),function(e,t){return void 0===t&&(t=E(e).getComputedStyle(e)),"fixed"===t.position}(o,i)?n:r(o.parentNode)}(e):n}function fe(e){const[t]=de(e,1);return null!=t?t:null}function pe(e){return y&&e?w(e)?e:x(e)?C(e)||e===R(e).scrollingElement?window:D(e)?e:null:null:null}function ve(e){return w(e)?e.scrollX:e.scrollLeft}function he(e){return w(e)?e.scrollY:e.scrollTop}function ge(e){return{x:ve(e),y:he(e)}}var me;function be(e){return!(!y||!e)&&e===document.scrollingElement}function ye(e){const t={x:0,y:0},n=be(e)?{height:window.innerHeight,width:window.innerWidth}:{height:e.clientHeight,width:e.clientWidth},r={x:e.scrollWidth-n.width,y:e.scrollHeight-n.height};return{isTop:e.scrollTop<=t.y,isLeft:e.scrollLeft<=t.x,isBottom:e.scrollTop>=r.y,isRight:e.scrollLeft>=r.x,maxScroll:r,minScroll:t}}!function(e){e[e.Forward=1]="Forward",e[e.Backward=-1]="Backward"}(me||(me={}));const we={x:.2,y:.2};function xe(e,t,n,r,o){let{top:i,left:l,right:a,bottom:c}=n;void 0===r&&(r=10),void 0===o&&(o=we);const{isTop:s,isBottom:u,isLeft:d,isRight:f}=ye(e),p={x:0,y:0},v={x:0,y:0},h=t.height*o.y,g=t.width*o.x;return!s&&i<=t.top+h?(p.y=me.Backward,v.y=r*Math.abs((t.top+h-i)/h)):!u&&c>=t.bottom-h&&(p.y=me.Forward,v.y=r*Math.abs((t.bottom-h-c)/h)),!f&&a>=t.right-g?(p.x=me.Forward,v.x=r*Math.abs((t.right-g-a)/g)):!d&&l<=t.left+g&&(p.x=me.Backward,v.x=r*Math.abs((t.left+g-l)/g)),{direction:p,speed:v}}function Ee(e){if(e===document.scrollingElement){const{innerWidth:e,innerHeight:t}=window;return{top:0,left:0,right:e,bottom:t,width:e,height:t}}const{top:t,left:n,right:r,bottom:o}=e.getBoundingClientRect();return{top:t,left:n,right:r,bottom:o,width:e.clientWidth,height:e.clientHeight}}function Ce(e){return e.reduce(((e,t)=>T(e,ge(t))),$)}const De=[["x",["left","right"],function(e){return e.reduce(((e,t)=>e+ve(t)),0)}],["y",["top","bottom"],function(e){return e.reduce(((e,t)=>e+he(t)),0)}]];class Se{constructor(e,t){this.rect=void 0,this.width=void 0,this.height=void 0,this.top=void 0,this.bottom=void 0,this.right=void 0,this.left=void 0;const n=de(t),r=Ce(n);this.rect={...e},this.width=e.width,this.height=e.height;for(const[e,t,o]of De)for(const i of t)Object.defineProperty(this,i,{get:()=>{const t=o(n),l=r[e]-t;return this.rect[i]+l},enumerable:!0});Object.defineProperty(this,"rect",{enumerable:!1})}}class Re{constructor(e){this.target=void 0,this.listeners=[],this.removeAll=()=>{this.listeners.forEach((e=>{var t;return null==(t=this.target)?void 0:t.removeEventListener(...e)}))},this.target=e}add(e,t,n){var r;null==(r=this.target)||r.addEventListener(e,t,n),this.listeners.push([e,t,n])}}function Oe(e,t){const n=Math.abs(e.x),r=Math.abs(e.y);return"number"==typeof t?Math.sqrt(n**2+r**2)>t:"x"in t&&"y"in t?n>t.x&&r>t.y:"x"in t?n>t.x:"y"in t&&r>t.y}var ke,Me,Ie;function Ne(e){e.preventDefault()}function ze(e){e.stopPropagation()}!function(e){e.Click="click",e.DragStart="dragstart",e.Keydown="keydown",e.ContextMenu="contextmenu",e.Resize="resize",e.SelectionChange="selectionchange",e.VisibilityChange="visibilitychange"}(ke||(ke={})),(Ie=Me||(Me={})).Space="Space",Ie.Down="ArrowDown",Ie.Right="ArrowRight",Ie.Left="ArrowLeft",Ie.Up="ArrowUp",Ie.Esc="Escape",Ie.Enter="Enter";const Ae={start:[Me.Space,Me.Enter],cancel:[Me.Esc],end:[Me.Space,Me.Enter]},Pe=(e,t)=>{let{currentCoordinates:n}=t;switch(e.code){case Me.Right:return{...n,x:n.x+25};case Me.Left:return{...n,x:n.x-25};case Me.Down:return{...n,y:n.y+25};case Me.Up:return{...n,y:n.y-25}}};class je{constructor(e){this.props=void 0,this.autoScrollEnabled=!1,this.referenceCoordinates=void 0,this.listeners=void 0,this.windowListeners=void 0,this.props=e;const{event:{target:t}}=e;this.props=e,this.listeners=new Re(R(t)),this.windowListeners=new Re(E(t)),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleCancel=this.handleCancel.bind(this),this.attach()}attach(){this.handleStart(),this.windowListeners.add(ke.Resize,this.handleCancel),this.windowListeners.add(ke.VisibilityChange,this.handleCancel),setTimeout((()=>this.listeners.add(ke.Keydown,this.handleKeyDown)))}handleStart(){const{activeNode:e,onStart:t}=this.props,n=e.node.current;n&&function(e,t){if(void 0===t&&(t=se),!e)return;const{top:n,left:r,bottom:o,right:i}=t(e);fe(e)&&(o<=0||i<=0||n>=window.innerHeight||r>=window.innerWidth)&&e.scrollIntoView({block:"center",inline:"center"})}(n),t($)}handleKeyDown(e){if(_(e)){const{active:t,context:n,options:r}=this.props,{keyboardCodes:o=Ae,coordinateGetter:i=Pe,scrollBehavior:l="smooth"}=r,{code:a}=e;if(o.end.includes(a))return void this.handleEnd(e);if(o.cancel.includes(a))return void this.handleCancel(e);const{collisionRect:c}=n.current,s=c?{x:c.left,y:c.top}:$;this.referenceCoordinates||(this.referenceCoordinates=s);const u=i(e,{active:t,context:n.current,currentCoordinates:s});if(u){const t=L(u,s),r={x:0,y:0},{scrollableAncestors:o}=n.current;for(const n of o){const o=e.code,{isTop:i,isRight:a,isLeft:c,isBottom:s,maxScroll:d,minScroll:f}=ye(n),p=Ee(n),v={x:Math.min(o===Me.Right?p.right-p.width/2:p.right,Math.max(o===Me.Right?p.left:p.left+p.width/2,u.x)),y:Math.min(o===Me.Down?p.bottom-p.height/2:p.bottom,Math.max(o===Me.Down?p.top:p.top+p.height/2,u.y))},h=o===Me.Right&&!a||o===Me.Left&&!c,g=o===Me.Down&&!s||o===Me.Up&&!i;if(h&&v.x!==u.x){const e=n.scrollLeft+t.x,i=o===Me.Right&&e<=d.x||o===Me.Left&&e>=f.x;if(i&&!t.y)return void n.scrollTo({left:e,behavior:l});r.x=i?n.scrollLeft-e:o===Me.Right?n.scrollLeft-d.x:n.scrollLeft-f.x,r.x&&n.scrollBy({left:-r.x,behavior:l});break}if(g&&v.y!==u.y){const e=n.scrollTop+t.y,i=o===Me.Down&&e<=d.y||o===Me.Up&&e>=f.y;if(i&&!t.x)return void n.scrollTo({top:e,behavior:l});r.y=i?n.scrollTop-e:o===Me.Down?n.scrollTop-d.y:n.scrollTop-f.y,r.y&&n.scrollBy({top:-r.y,behavior:l});break}}this.handleMove(e,T(L(u,this.referenceCoordinates),r))}}}handleMove(e,t){const{onMove:n}=this.props;e.preventDefault(),n(t)}handleEnd(e){const{onEnd:t}=this.props;e.preventDefault(),this.detach(),t()}handleCancel(e){const{onCancel:t}=this.props;e.preventDefault(),this.detach(),t()}detach(){this.listeners.removeAll(),this.windowListeners.removeAll()}}function Te(e){return Boolean(e&&"distance"in e)}function Le(e){return Boolean(e&&"delay"in e)}je.activators=[{eventName:"onKeyDown",handler:(e,t,n)=>{let{keyboardCodes:r=Ae,onActivation:o}=t,{active:i}=n;const{code:l}=e.nativeEvent;if(r.start.includes(l)){const t=i.activatorNode.current;return!(t&&e.target!==t||(e.preventDefault(),null==o||o({event:e.nativeEvent}),0))}return!1}}];class _e{constructor(e,t,n){var r;void 0===n&&(n=function(e){const{EventTarget:t}=E(e);return e instanceof t?e:R(e)}(e.event.target)),this.props=void 0,this.events=void 0,this.autoScrollEnabled=!0,this.document=void 0,this.activated=!1,this.initialCoordinates=void 0,this.timeoutId=null,this.listeners=void 0,this.documentListeners=void 0,this.windowListeners=void 0,this.props=e,this.events=t;const{event:o}=e,{target:i}=o;this.props=e,this.events=t,this.document=R(i),this.documentListeners=new Re(this.document),this.listeners=new Re(n),this.windowListeners=new Re(E(i)),this.initialCoordinates=null!=(r=B(o))?r:$,this.handleStart=this.handleStart.bind(this),this.handleMove=this.handleMove.bind(this),this.handleEnd=this.handleEnd.bind(this),this.handleCancel=this.handleCancel.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.removeTextSelection=this.removeTextSelection.bind(this),this.attach()}attach(){const{events:e,props:{options:{activationConstraint:t,bypassActivationConstraint:n}}}=this;if(this.listeners.add(e.move.name,this.handleMove,{passive:!1}),this.listeners.add(e.end.name,this.handleEnd),this.windowListeners.add(ke.Resize,this.handleCancel),this.windowListeners.add(ke.DragStart,Ne),this.windowListeners.add(ke.VisibilityChange,this.handleCancel),this.windowListeners.add(ke.ContextMenu,Ne),this.documentListeners.add(ke.Keydown,this.handleKeydown),t){if(null!=n&&n({event:this.props.event,activeNode:this.props.activeNode,options:this.props.options}))return this.handleStart();if(Le(t))return void(this.timeoutId=setTimeout(this.handleStart,t.delay));if(Te(t))return}this.handleStart()}detach(){this.listeners.removeAll(),this.windowListeners.removeAll(),setTimeout(this.documentListeners.removeAll,50),null!==this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}handleStart(){const{initialCoordinates:e}=this,{onStart:t}=this.props;e&&(this.activated=!0,this.documentListeners.add(ke.Click,ze,{capture:!0}),this.removeTextSelection(),this.documentListeners.add(ke.SelectionChange,this.removeTextSelection),t(e))}handleMove(e){var t;const{activated:n,initialCoordinates:r,props:o}=this,{onMove:i,options:{activationConstraint:l}}=o;if(!r)return;const a=null!=(t=B(e))?t:$,c=L(r,a);if(!n&&l){if(Te(l)){if(null!=l.tolerance&&Oe(c,l.tolerance))return this.handleCancel();if(Oe(c,l.distance))return this.handleStart()}return Le(l)&&Oe(c,l.tolerance)?this.handleCancel():void 0}e.cancelable&&e.preventDefault(),i(a)}handleEnd(){const{onEnd:e}=this.props;this.detach(),e()}handleCancel(){const{onCancel:e}=this.props;this.detach(),e()}handleKeydown(e){e.code===Me.Esc&&this.handleCancel()}removeTextSelection(){var e;null==(e=this.document.getSelection())||e.removeAllRanges()}}const Be={move:{name:"pointermove"},end:{name:"pointerup"}};class Fe extends _e{constructor(e){const{event:t}=e,n=R(t.target);super(e,Be,n)}}Fe.activators=[{eventName:"onPointerDown",handler:(e,t)=>{let{nativeEvent:n}=e,{onActivation:r}=t;return!(!n.isPrimary||0!==n.button||(null==r||r({event:n}),0))}}];const Ue={move:{name:"mousemove"},end:{name:"mouseup"}};var He;!function(e){e[e.RightClick=2]="RightClick"}(He||(He={})),class extends _e{constructor(e){super(e,Ue,R(e.event.target))}}.activators=[{eventName:"onMouseDown",handler:(e,t)=>{let{nativeEvent:n}=e,{onActivation:r}=t;return n.button!==He.RightClick&&(null==r||r({event:n}),!0)}}];const Ve={move:{name:"touchmove"},end:{name:"touchend"}};var Ye,Xe;(class extends _e{constructor(e){super(e,Ve)}static setup(){return window.addEventListener(Ve.move.name,e,{capture:!1,passive:!1}),function(){window.removeEventListener(Ve.move.name,e)};function e(){}}}).activators=[{eventName:"onTouchStart",handler:(e,t)=>{let{nativeEvent:n}=e,{onActivation:r}=t;const{touches:o}=n;return!(o.length>1||(null==r||r({event:n}),0))}}],function(e){e[e.Pointer=0]="Pointer",e[e.DraggableRect=1]="DraggableRect"}(Ye||(Ye={})),function(e){e[e.TreeOrder=0]="TreeOrder",e[e.ReversedTreeOrder=1]="ReversedTreeOrder"}(Xe||(Xe={}));const Ke={x:{[me.Backward]:!1,[me.Forward]:!1},y:{[me.Backward]:!1,[me.Forward]:!1}};var We,Ze;!function(e){e[e.Always=0]="Always",e[e.BeforeDragging=1]="BeforeDragging",e[e.WhileDragging=2]="WhileDragging"}(We||(We={})),function(e){e.Optimized="optimized"}(Ze||(Ze={}));const qe=new Map;function Je(e,t){return I((n=>e?n||("function"==typeof t?t(e):e):null),[t,e])}function Ge(e){let{callback:t,disabled:n}=e;const r=k(t),o=(0,g.useMemo)((()=>{if(n||"undefined"==typeof window||void 0===window.ResizeObserver)return;const{ResizeObserver:e}=window;return new e(r)}),[n]);return(0,g.useEffect)((()=>()=>null==o?void 0:o.disconnect()),[o]),o}function $e(e){return new Se(se(e),e)}function Qe(e,t,n){void 0===t&&(t=$e);const[r,o]=(0,g.useReducer)((function(r){if(!e)return null;var o;if(!1===e.isConnected)return null!=(o=null!=r?r:n)?o:null;const i=t(e);return JSON.stringify(r)===JSON.stringify(i)?r:i}),null),i=function(e){let{callback:t,disabled:n}=e;const r=k(t),o=(0,g.useMemo)((()=>{if(n||"undefined"==typeof window||void 0===window.MutationObserver)return;const{MutationObserver:e}=window;return new e(r)}),[r,n]);return(0,g.useEffect)((()=>()=>null==o?void 0:o.disconnect()),[o]),o}({callback(t){if(e)for(const n of t){const{type:t,target:r}=n;if("childList"===t&&r instanceof HTMLElement&&r.contains(e)){o();break}}}}),l=Ge({callback:o});return O((()=>{o(),e?(null==l||l.observe(e),null==i||i.observe(document.body,{childList:!0,subtree:!0})):(null==l||l.disconnect(),null==i||i.disconnect())}),[e]),r}const et=[];function tt(e,t){void 0===t&&(t=[]);const n=(0,g.useRef)(null);return(0,g.useEffect)((()=>{n.current=null}),t),(0,g.useEffect)((()=>{const t=e!==$;t&&!n.current&&(n.current=e),!t&&n.current&&(n.current=null)}),[e]),n.current?L(e,n.current):$}function nt(e){return(0,g.useMemo)((()=>e?function(e){const t=e.innerWidth,n=e.innerHeight;return{top:0,left:0,right:t,bottom:n,width:t,height:n}}(e):null),[e])}const rt=[];const ot=[{sensor:Fe,options:{}},{sensor:je,options:{}}],it={current:{}},lt={draggable:{measure:ue},droppable:{measure:ue,strategy:We.WhileDragging,frequency:Ze.Optimized},dragOverlay:{measure:se}};class at extends Map{get(e){var t;return null!=e&&null!=(t=super.get(e))?t:void 0}toArray(){return Array.from(this.values())}getEnabled(){return this.toArray().filter((e=>{let{disabled:t}=e;return!t}))}getNodeFor(e){var t,n;return null!=(t=null==(n=this.get(e))?void 0:n.node.current)?t:void 0}}const ct={activatorEvent:null,active:null,activeNode:null,activeNodeRect:null,collisions:null,containerNodeRect:null,draggableNodes:new Map,droppableRects:new Map,droppableContainers:new at,over:null,dragOverlay:{nodeRef:{current:null},rect:null,setRef:G},scrollableAncestors:[],scrollableAncestorRects:[],measuringConfiguration:lt,measureDroppableContainers:G,windowRect:null,measuringScheduled:!1},st={activatorEvent:null,activators:[],active:null,activeNodeRect:null,ariaDescribedById:{draggable:""},dispatch:G,draggableNodes:new Map,over:null,measureDroppableContainers:G},ut=(0,g.createContext)(st),dt=(0,g.createContext)(ct);function ft(){return{draggable:{active:null,initialCoordinates:{x:0,y:0},nodes:new Map,translate:{x:0,y:0}},droppable:{containers:new at}}}function pt(e,t){switch(t.type){case J.DragStart:return{...e,draggable:{...e.draggable,initialCoordinates:t.initialCoordinates,active:t.active}};case J.DragMove:return e.draggable.active?{...e,draggable:{...e.draggable,translate:{x:t.coordinates.x-e.draggable.initialCoordinates.x,y:t.coordinates.y-e.draggable.initialCoordinates.y}}}:e;case J.DragEnd:case J.DragCancel:return{...e,draggable:{...e.draggable,active:null,initialCoordinates:{x:0,y:0},translate:{x:0,y:0}}};case J.RegisterDroppable:{const{element:n}=t,{id:r}=n,o=new at(e.droppable.containers);return o.set(r,n),{...e,droppable:{...e.droppable,containers:o}}}case J.SetDroppableDisabled:{const{id:n,key:r,disabled:o}=t,i=e.droppable.containers.get(n);if(!i||r!==i.key)return e;const l=new at(e.droppable.containers);return l.set(n,{...i,disabled:o}),{...e,droppable:{...e.droppable,containers:l}}}case J.UnregisterDroppable:{const{id:n,key:r}=t,o=e.droppable.containers.get(n);if(!o||r!==o.key)return e;const i=new at(e.droppable.containers);return i.delete(n),{...e,droppable:{...e.droppable,containers:i}}}default:return e}}function vt(e){let{disabled:t}=e;const{active:n,activatorEvent:r,draggableNodes:o}=(0,g.useContext)(ut),i=z(r),l=z(null==n?void 0:n.id);return(0,g.useEffect)((()=>{if(!t&&!r&&i&&null!=l){if(!_(i))return;if(document.activeElement===i.target)return;const e=o.get(l);if(!e)return;const{activatorNode:t,node:n}=e;if(!t.current&&!n.current)return;requestAnimationFrame((()=>{for(const e of[t.current,n.current]){if(!e)continue;const t=H(e);if(t){t.focus();break}}}))}}),[r,t,o,l,i]),null}const ht=(0,g.createContext)({...$,scaleX:1,scaleY:1});var gt;!function(e){e[e.Uninitialized=0]="Uninitialized",e[e.Initializing=1]="Initializing",e[e.Initialized=2]="Initialized"}(gt||(gt={}));const mt=(0,g.memo)((function(e){var t,n,r,o;let{id:i,accessibility:l,autoScroll:a=!0,children:c,sensors:s=ot,collisionDetection:u=oe,measuring:d,modifiers:f,...p}=e;const v=(0,g.useReducer)(pt,void 0,ft),[h,w]=v,[x,C]=function(){const[e]=(0,g.useState)((()=>new Set)),t=(0,g.useCallback)((t=>(e.add(t),()=>e.delete(t))),[e]),n=(0,g.useCallback)((t=>{let{type:n,event:r}=t;e.forEach((e=>{var t;return null==(t=e[n])?void 0:t.call(e,r)}))}),[e]);return[n,t]}(),[S,R]=(0,g.useState)(gt.Uninitialized),k=S===gt.Initialized,{draggable:{active:A,nodes:j,translate:L},droppable:{containers:_}}=h,F=A?j.get(A):null,U=(0,g.useRef)({initial:null,translated:null}),H=(0,g.useMemo)((()=>{var e;return null!=A?{id:A,data:null!=(e=null==F?void 0:F.data)?e:it,rect:U}:null}),[A,F]),V=(0,g.useRef)(null),[Y,X]=(0,g.useState)(null),[W,Z]=(0,g.useState)(null),G=M(p,Object.values(p)),Q=P("DndDescribedBy",i),ee=(0,g.useMemo)((()=>_.getEnabled()),[_]),te=(ne=d,(0,g.useMemo)((()=>({draggable:{...lt.draggable,...null==ne?void 0:ne.draggable},droppable:{...lt.droppable,...null==ne?void 0:ne.droppable},dragOverlay:{...lt.dragOverlay,...null==ne?void 0:ne.dragOverlay}})),[null==ne?void 0:ne.draggable,null==ne?void 0:ne.droppable,null==ne?void 0:ne.dragOverlay]));var ne;const{droppableRects:re,measureDroppableContainers:le,measuringScheduled:ce}=function(e,t){let{dragging:n,dependencies:r,config:o}=t;const[i,l]=(0,g.useState)(null),{frequency:a,measure:c,strategy:s}=o,u=(0,g.useRef)(e),d=function(){switch(s){case We.Always:return!1;case We.BeforeDragging:return n;default:return!n}}(),f=M(d),p=(0,g.useCallback)((function(e){void 0===e&&(e=[]),f.current||l((t=>null===t?e:t.concat(e.filter((e=>!t.includes(e))))))}),[f]),v=(0,g.useRef)(null),h=I((t=>{if(d&&!n)return qe;if(!t||t===qe||u.current!==e||null!=i){const t=new Map;for(let n of e){if(!n)continue;if(i&&i.length>0&&!i.includes(n.id)&&n.rect.current){t.set(n.id,n.rect.current);continue}const e=n.node.current,r=e?new Se(c(e),e):null;n.rect.current=r,r&&t.set(n.id,r)}return t}return t}),[e,i,n,d,c]);return(0,g.useEffect)((()=>{u.current=e}),[e]),(0,g.useEffect)((()=>{d||p()}),[n,d]),(0,g.useEffect)((()=>{i&&i.length>0&&l(null)}),[JSON.stringify(i)]),(0,g.useEffect)((()=>{d||"number"!=typeof a||null!==v.current||(v.current=setTimeout((()=>{p(),v.current=null}),a))}),[a,d,p,...r]),{droppableRects:h,measureDroppableContainers:p,measuringScheduled:null!=i}}(ee,{dragging:k,dependencies:[L.x,L.y],config:te.droppable}),ue=function(e,t){const n=null!==t?e.get(t):void 0,r=n?n.node.current:null;return I((e=>{var n;return null===t?null:null!=(n=null!=r?r:e)?n:null}),[r,t])}(j,A),ve=(0,g.useMemo)((()=>W?B(W):null),[W]),he=function(){const e=!1===(null==Y?void 0:Y.autoScrollEnabled),t="object"==typeof a?!1===a.enabled:!1===a,n=k&&!e&&!t;return"object"==typeof a?{...a,enabled:n}:{enabled:n}}(),ye=function(e,t){return Je(e,t)}(ue,te.draggable.measure);!function(e){let{activeNode:t,measure:n,initialRect:r,config:o=!0}=e;const i=(0,g.useRef)(!1),{x:l,y:a}="boolean"==typeof o?{x:o,y:o}:o;O((()=>{if(!l&&!a||!t)return void(i.current=!1);if(i.current||!r)return;const e=null==t?void 0:t.node.current;if(!e||!1===e.isConnected)return;const o=ie(n(e),r);if(l||(o.x=0),a||(o.y=0),i.current=!0,Math.abs(o.x)>0||Math.abs(o.y)>0){const t=fe(e);t&&t.scrollBy({top:o.y,left:o.x})}}),[t,l,a,r,n])}({activeNode:A?j.get(A):null,config:he.layoutShiftCompensation,initialRect:ye,measure:te.draggable.measure});const we=Qe(ue,te.draggable.measure,ye),Ee=Qe(ue?ue.parentElement:null),De=(0,g.useRef)({activatorEvent:null,active:null,activeNode:ue,collisionRect:null,collisions:null,droppableRects:re,draggableNodes:j,draggingNode:null,draggingNodeRect:null,droppableContainers:_,over:null,scrollableAncestors:[],scrollAdjustedTranslate:null}),Re=_.getNodeFor(null==(t=De.current.over)?void 0:t.id),Oe=function(e){let{measure:t}=e;const[n,r]=(0,g.useState)(null),o=Ge({callback:(0,g.useCallback)((e=>{for(const{target:n}of e)if(D(n)){r((e=>{const r=t(n);return e?{...e,width:r.width,height:r.height}:r}));break}}),[t])}),i=(0,g.useCallback)((e=>{const n=function(e){if(!e)return null;if(e.children.length>1)return e;const t=e.children[0];return D(t)?t:e}(e);null==o||o.disconnect(),n&&(null==o||o.observe(n)),r(n?t(n):null)}),[t,o]),[l,a]=N(i);return(0,g.useMemo)((()=>({nodeRef:l,rect:n,setRef:a})),[n,l,a])}({measure:te.dragOverlay.measure}),ke=null!=(n=Oe.nodeRef.current)?n:ue,Me=k?null!=(r=Oe.rect)?r:we:null,Ie=Boolean(Oe.nodeRef.current&&Oe.rect),Ne=ie(ze=Ie?null:we,Je(ze));var ze;const Ae=nt(ke?E(ke):null),Pe=function(e){const t=(0,g.useRef)(e),n=I((n=>e?n&&n!==et&&e&&t.current&&e.parentNode===t.current.parentNode?n:de(e):et),[e]);return(0,g.useEffect)((()=>{t.current=e}),[e]),n}(k?null!=Re?Re:ue:null),je=function(e,t){void 0===t&&(t=se);const[n]=e,r=nt(n?E(n):null),[o,i]=(0,g.useReducer)((function(){return e.length?e.map((e=>be(e)?r:new Se(t(e),e))):rt}),rt),l=Ge({callback:i});return e.length>0&&o===rt&&i(),O((()=>{e.length?e.forEach((e=>null==l?void 0:l.observe(e))):(null==l||l.disconnect(),i())}),[e]),o}(Pe),Te=function(e,t){let{transform:n,...r}=t;return null!=e&&e.length?e.reduce(((e,t)=>t({transform:e,...r})),n):n}(f,{transform:{x:L.x-Ne.x,y:L.y-Ne.y,scaleX:1,scaleY:1},activatorEvent:W,active:H,activeNodeRect:we,containerNodeRect:Ee,draggingNodeRect:Me,over:De.current.over,overlayNodeRect:Oe.rect,scrollableAncestors:Pe,scrollableAncestorRects:je,windowRect:Ae}),Le=ve?T(ve,L):null,_e=function(e){const[t,n]=(0,g.useState)(null),r=(0,g.useRef)(e),o=(0,g.useCallback)((e=>{const t=pe(e.target);t&&n((e=>e?(e.set(t,ge(t)),new Map(e)):null))}),[]);return(0,g.useEffect)((()=>{const t=r.current;if(e!==t){i(t);const l=e.map((e=>{const t=pe(e);return t?(t.addEventListener("scroll",o,{passive:!0}),[t,ge(t)]):null})).filter((e=>null!=e));n(l.length?new Map(l):null),r.current=e}return()=>{i(e),i(t)};function i(e){e.forEach((e=>{const t=pe(e);null==t||t.removeEventListener("scroll",o)}))}}),[o,e]),(0,g.useMemo)((()=>e.length?t?Array.from(t.values()).reduce(((e,t)=>T(e,t)),$):Ce(e):$),[e,t])}(Pe),Be=tt(_e),Fe=tt(_e,[we]),Ue=T(Te,Be),He=Me?ae(Me,Te):null,Ve=H&&He?u({active:H,collisionRect:He,droppableRects:re,droppableContainers:ee,pointerCoordinates:Le}):null,Ze=function(e){if(!e||0===e.length)return null;const[t]=e;return t.id}(Ve),[$e,at]=(0,g.useState)(null),ct=function(e,t,n){return{...e,scaleX:t&&n?t.width/n.width:1,scaleY:t&&n?t.height/n.height:1}}(Ie?Te:T(Te,Fe),null!=(o=null==$e?void 0:$e.rect)?o:null,we),st=(0,g.useCallback)(((e,t)=>{let{sensor:n,options:r}=t;if(null==V.current)return;const o=j.get(V.current);if(!o)return;const i=e.nativeEvent,l=new n({active:V.current,activeNode:o,event:i,options:r,context:De,onStart(e){const t=V.current;if(null==t)return;const n=j.get(t);if(!n)return;const{onDragStart:r}=G.current,o={active:{id:t,data:n.data,rect:U}};(0,b.unstable_batchedUpdates)((()=>{null==r||r(o),R(gt.Initializing),w({type:J.DragStart,initialCoordinates:e,active:t}),x({type:"onDragStart",event:o})}))},onMove(e){w({type:J.DragMove,coordinates:e})},onEnd:a(J.DragEnd),onCancel:a(J.DragCancel)});function a(e){return async function(){const{active:t,collisions:n,over:r,scrollAdjustedTranslate:o}=De.current;let l=null;if(t&&o){const{cancelDrop:a}=G.current;l={activatorEvent:i,active:t,collisions:n,delta:o,over:r},e===J.DragEnd&&"function"==typeof a&&await Promise.resolve(a(l))&&(e=J.DragCancel)}V.current=null,(0,b.unstable_batchedUpdates)((()=>{w({type:e}),R(gt.Uninitialized),at(null),X(null),Z(null);const t=e===J.DragEnd?"onDragEnd":"onDragCancel";if(l){const e=G.current[t];null==e||e(l),x({type:t,event:l})}}))}}(0,b.unstable_batchedUpdates)((()=>{X(l),Z(e.nativeEvent)}))}),[j]),mt=(0,g.useCallback)(((e,t)=>(n,r)=>{const o=n.nativeEvent,i=j.get(r);if(null!==V.current||!i||o.dndKit||o.defaultPrevented)return;const l={active:i};!0===e(n,t.options,l)&&(o.dndKit={capturedBy:t.sensor},V.current=r,st(n,t))}),[j,st]),bt=function(e,t){return(0,g.useMemo)((()=>e.reduce(((e,n)=>{const{sensor:r}=n;return[...e,...r.activators.map((e=>({eventName:e.eventName,handler:t(e.handler,n)})))]}),[])),[e,t])}(s,mt);!function(e){(0,g.useEffect)((()=>{if(!y)return;const t=e.map((e=>{let{sensor:t}=e;return null==t.setup?void 0:t.setup()}));return()=>{for(const e of t)null==e||e()}}),e.map((e=>{let{sensor:t}=e;return t})))}(s),O((()=>{we&&S===gt.Initializing&&R(gt.Initialized)}),[we,S]),(0,g.useEffect)((()=>{const{onDragMove:e}=G.current,{active:t,activatorEvent:n,collisions:r,over:o}=De.current;if(!t||!n)return;const i={active:t,activatorEvent:n,collisions:r,delta:{x:Ue.x,y:Ue.y},over:o};(0,b.unstable_batchedUpdates)((()=>{null==e||e(i),x({type:"onDragMove",event:i})}))}),[Ue.x,Ue.y]),(0,g.useEffect)((()=>{const{active:e,activatorEvent:t,collisions:n,droppableContainers:r,scrollAdjustedTranslate:o}=De.current;if(!e||null==V.current||!t||!o)return;const{onDragOver:i}=G.current,l=r.get(Ze),a=l&&l.rect.current?{id:l.id,rect:l.rect.current,data:l.data,disabled:l.disabled}:null,c={active:e,activatorEvent:t,collisions:n,delta:{x:o.x,y:o.y},over:a};(0,b.unstable_batchedUpdates)((()=>{at(a),null==i||i(c),x({type:"onDragOver",event:c})}))}),[Ze]),O((()=>{De.current={activatorEvent:W,active:H,activeNode:ue,collisionRect:He,collisions:Ve,droppableRects:re,draggableNodes:j,draggingNode:ke,draggingNodeRect:Me,droppableContainers:_,over:$e,scrollableAncestors:Pe,scrollAdjustedTranslate:Ue},U.current={initial:Me,translated:He}}),[H,ue,Ve,He,j,ke,Me,re,_,$e,Pe,Ue]),function(e){let{acceleration:t,activator:n=Ye.Pointer,canScroll:r,draggingRect:o,enabled:i,interval:l=5,order:a=Xe.TreeOrder,pointerCoordinates:c,scrollableAncestors:s,scrollableAncestorRects:u,delta:d,threshold:f}=e;const p=function(e){let{delta:t,disabled:n}=e;const r=z(t);return I((e=>{if(n||!r||!e)return Ke;const o=Math.sign(t.x-r.x),i=Math.sign(t.y-r.y);return{x:{[me.Backward]:e.x[me.Backward]||-1===o,[me.Forward]:e.x[me.Forward]||1===o},y:{[me.Backward]:e.y[me.Backward]||-1===i,[me.Forward]:e.y[me.Forward]||1===i}}}),[n,t,r])}({delta:d,disabled:!i}),[v,h]=function(){const e=(0,g.useRef)(null);return[(0,g.useCallback)(((t,n)=>{e.current=setInterval(t,n)}),[]),(0,g.useCallback)((()=>{null!==e.current&&(clearInterval(e.current),e.current=null)}),[])]}(),m=(0,g.useRef)({x:0,y:0}),b=(0,g.useRef)({x:0,y:0}),y=(0,g.useMemo)((()=>{switch(n){case Ye.Pointer:return c?{top:c.y,bottom:c.y,left:c.x,right:c.x}:null;case Ye.DraggableRect:return o}}),[n,o,c]),w=(0,g.useRef)(null),x=(0,g.useCallback)((()=>{const e=w.current;if(!e)return;const t=m.current.x*b.current.x,n=m.current.y*b.current.y;e.scrollBy(t,n)}),[]),E=(0,g.useMemo)((()=>a===Xe.TreeOrder?[...s].reverse():s),[a,s]);(0,g.useEffect)((()=>{if(i&&s.length&&y){for(const e of E){if(!1===(null==r?void 0:r(e)))continue;const n=s.indexOf(e),o=u[n];if(!o)continue;const{direction:i,speed:a}=xe(e,o,y,t,f);for(const e of["x","y"])p[e][i[e]]||(a[e]=0,i[e]=0);if(a.x>0||a.y>0)return h(),w.current=e,v(x,l),m.current=a,void(b.current=i)}m.current={x:0,y:0},b.current={x:0,y:0},h()}else h()}),[t,x,r,h,i,l,JSON.stringify(y),JSON.stringify(p),v,s,E,u,JSON.stringify(f)])}({...he,delta:L,draggingRect:He,pointerCoordinates:Le,scrollableAncestors:Pe,scrollableAncestorRects:je});const yt=(0,g.useMemo)((()=>({active:H,activeNode:ue,activeNodeRect:we,activatorEvent:W,collisions:Ve,containerNodeRect:Ee,dragOverlay:Oe,draggableNodes:j,droppableContainers:_,droppableRects:re,over:$e,measureDroppableContainers:le,scrollableAncestors:Pe,scrollableAncestorRects:je,measuringConfiguration:te,measuringScheduled:ce,windowRect:Ae})),[H,ue,we,W,Ve,Ee,Oe,j,_,re,$e,le,Pe,je,te,ce,Ae]),wt=(0,g.useMemo)((()=>({activatorEvent:W,activators:bt,active:H,activeNodeRect:we,ariaDescribedById:{draggable:Q},dispatch:w,draggableNodes:j,over:$e,measureDroppableContainers:le})),[W,bt,H,we,w,Q,j,$e,le]);return m().createElement(K.Provider,{value:C},m().createElement(ut.Provider,{value:wt},m().createElement(dt.Provider,{value:yt},m().createElement(ht.Provider,{value:ct},c)),m().createElement(vt,{disabled:!1===(null==l?void 0:l.restoreFocus)})),m().createElement(q,{...l,hiddenTextDescribedById:Q}))})),bt=(0,g.createContext)(null),yt="button";const wt={timeout:25};function xt(e,t,n){const r=e.slice();return r.splice(n<0?r.length+n:n,0,r.splice(t,1)[0]),r}function Et(e,t){return e.reduce(((e,n,r)=>{const o=t.get(n);return o&&(e[r]=o),e}),Array(e.length))}function Ct(e){return null!==e&&e>=0}const Dt=e=>{let{rects:t,activeIndex:n,overIndex:r,index:o}=e;const i=xt(t,r,n),l=t[o],a=i[o];return a&&l?{x:a.left-l.left,y:a.top-l.top,scaleX:a.width/l.width,scaleY:a.height/l.height}:null},St={scaleX:1,scaleY:1},Rt=e=>{var t;let{activeIndex:n,activeNodeRect:r,index:o,rects:i,overIndex:l}=e;const a=null!=(t=i[n])?t:r;if(!a)return null;if(o===n){const e=i[l];return e?{x:0,y:nn&&o<=l?{x:0,y:-a.height-c,...St}:o=l?{x:0,y:a.height+c,...St}:{x:0,y:0,...St}},Ot="Sortable",kt=m().createContext({activeIndex:-1,containerId:Ot,disableTransforms:!1,items:[],overIndex:-1,useDragOverlay:!1,sortedRects:[],strategy:Dt,disabled:{draggable:!1,droppable:!1}});function Mt(e){let{children:t,id:n,items:r,strategy:o=Dt,disabled:i=!1}=e;const{active:l,dragOverlay:a,droppableRects:c,over:s,measureDroppableContainers:u}=(0,g.useContext)(dt),d=P(Ot,n),f=Boolean(null!==a.rect),p=(0,g.useMemo)((()=>r.map((e=>"object"==typeof e&&"id"in e?e.id:e))),[r]),v=null!=l,h=l?p.indexOf(l.id):-1,b=s?p.indexOf(s.id):-1,y=(0,g.useRef)(p),w=!function(e,t){if(e===t)return!0;if(e.length!==t.length)return!1;for(let n=0;n{w&&v&&u(p)}),[w,p,v,u]),(0,g.useEffect)((()=>{y.current=p}),[p]);const C=(0,g.useMemo)((()=>({activeIndex:h,containerId:d,disabled:E,disableTransforms:x,items:p,overIndex:b,useDragOverlay:f,sortedRects:Et(p,c),strategy:o})),[h,d,E.draggable,E.droppable,x,p,b,c,f,o]);return m().createElement(kt.Provider,{value:C},t)}const It=e=>{let{id:t,items:n,activeIndex:r,overIndex:o}=e;return xt(n,r,o).indexOf(t)},Nt=e=>{let{containerId:t,isSorting:n,wasDragging:r,index:o,items:i,newIndex:l,previousItems:a,previousContainerId:c,transition:s}=e;return!(!s||!r||a!==i&&o===l||!n&&(l===o||t!==c))},zt={duration:200,easing:"ease"},At="transform",Pt=F.Transition.toString({property:At,duration:0,easing:"linear"}),jt={roleDescription:"sortable"};function Tt(e){let{animateLayoutChanges:t=Nt,attributes:n,disabled:r,data:o,getNewIndex:i=It,id:l,strategy:a,resizeObserverConfig:c,transition:s=zt}=e;const{items:u,containerId:d,activeIndex:f,disabled:p,disableTransforms:v,sortedRects:h,overIndex:m,useDragOverlay:b,strategy:y}=(0,g.useContext)(kt),w=function(e,t){var n,r;return"boolean"==typeof e?{draggable:e,droppable:!1}:{draggable:null!=(n=null==e?void 0:e.draggable)?n:t.draggable,droppable:null!=(r=null==e?void 0:e.droppable)?r:t.droppable}}(r,p),x=u.indexOf(l),E=(0,g.useMemo)((()=>({sortable:{containerId:d,index:x,items:u},...o})),[d,o,x,u]),C=(0,g.useMemo)((()=>u.slice(u.indexOf(l))),[u,l]),{rect:D,node:S,isOver:R,setNodeRef:k}=function(e){let{data:t,disabled:n=!1,id:r,resizeObserverConfig:o}=e;const i=P("Droppable"),{active:l,dispatch:a,over:c,measureDroppableContainers:s}=(0,g.useContext)(ut),u=(0,g.useRef)({disabled:n}),d=(0,g.useRef)(!1),f=(0,g.useRef)(null),p=(0,g.useRef)(null),{disabled:v,updateMeasurementsFor:h,timeout:m}={...wt,...o},b=M(null!=h?h:r),y=Ge({callback:(0,g.useCallback)((()=>{d.current?(null!=p.current&&clearTimeout(p.current),p.current=setTimeout((()=>{s(Array.isArray(b.current)?b.current:[b.current]),p.current=null}),m)):d.current=!0}),[m]),disabled:v||!l}),w=(0,g.useCallback)(((e,t)=>{y&&(t&&(y.unobserve(t),d.current=!1),e&&y.observe(e))}),[y]),[x,E]=N(w),C=M(t);return(0,g.useEffect)((()=>{y&&x.current&&(y.disconnect(),d.current=!1,y.observe(x.current))}),[x,y]),O((()=>(a({type:J.RegisterDroppable,element:{id:r,key:i,disabled:n,node:x,rect:f,data:C}}),()=>a({type:J.UnregisterDroppable,key:i,id:r}))),[r]),(0,g.useEffect)((()=>{n!==u.current.disabled&&(a({type:J.SetDroppableDisabled,id:r,key:i,disabled:n}),u.current.disabled=n)}),[r,i,n,a]),{active:l,rect:f,isOver:(null==c?void 0:c.id)===r,node:x,over:c,setNodeRef:E}}({id:l,data:E,disabled:w.droppable,resizeObserverConfig:{updateMeasurementsFor:C,...c}}),{active:I,activatorEvent:z,activeNodeRect:A,attributes:j,setNodeRef:T,listeners:L,isDragging:B,over:U,setActivatorNodeRef:H,transform:V}=function(e){let{id:t,data:n,disabled:r=!1,attributes:o}=e;const i=P("Droppable"),{activators:l,activatorEvent:a,active:c,activeNodeRect:s,ariaDescribedById:u,draggableNodes:d,over:f}=(0,g.useContext)(ut),{role:p=yt,roleDescription:v="draggable",tabIndex:h=0}=null!=o?o:{},m=(null==c?void 0:c.id)===t,b=(0,g.useContext)(m?ht:bt),[y,w]=N(),[x,E]=N(),C=function(e,t){return(0,g.useMemo)((()=>e.reduce(((e,n)=>{let{eventName:r,handler:o}=n;return e[r]=e=>{o(e,t)},e}),{})),[e,t])}(l,t),D=M(n);return O((()=>(d.set(t,{id:t,key:i,node:y,activatorNode:x,data:D}),()=>{const e=d.get(t);e&&e.key===i&&d.delete(t)})),[d,t]),{active:c,activatorEvent:a,activeNodeRect:s,attributes:(0,g.useMemo)((()=>({role:p,tabIndex:h,"aria-disabled":r,"aria-pressed":!(!m||p!==yt)||void 0,"aria-roledescription":v,"aria-describedby":u.draggable})),[r,p,h,m,v,u.draggable]),isDragging:m,listeners:r?void 0:C,node:y,over:f,setNodeRef:w,setActivatorNodeRef:E,transform:b}}({id:l,data:E,attributes:{...jt,...n},disabled:w.draggable}),Y=function(){for(var e=arguments.length,t=new Array(e),n=0;ne=>{t.forEach((t=>t(e)))}),t)}(k,T),X=Boolean(I),K=X&&!v&&Ct(f)&&Ct(m),W=!b&&B,Z=W&&K?V:null,q=K?null!=Z?Z:(null!=a?a:y)({rects:h,activeNodeRect:A,activeIndex:f,overIndex:m,index:x}):null,G=Ct(f)&&Ct(m)?i({id:l,items:u,activeIndex:f,overIndex:m}):x,$=null==I?void 0:I.id,Q=(0,g.useRef)({activeId:$,items:u,newIndex:G,containerId:d}),ee=u!==Q.current.items,te=t({active:I,containerId:d,isDragging:B,isSorting:X,id:l,index:x,items:u,newIndex:Q.current.newIndex,previousItems:Q.current.items,previousContainerId:Q.current.containerId,transition:s,wasDragging:null!=Q.current.activeId}),ne=function(e){let{disabled:t,index:n,node:r,rect:o}=e;const[i,l]=(0,g.useState)(null),a=(0,g.useRef)(n);return O((()=>{if(!t&&n!==a.current&&r.current){const e=o.current;if(e){const t=se(r.current,{ignoreTransform:!0}),n={x:e.left-t.left,y:e.top-t.top,scaleX:e.width/t.width,scaleY:e.height/t.height};(n.x||n.y)&&l(n)}}n!==a.current&&(a.current=n)}),[t,n,r,o]),(0,g.useEffect)((()=>{i&&l(null)}),[i]),i}({disabled:!te,index:x,node:S,rect:D});return(0,g.useEffect)((()=>{X&&Q.current.newIndex!==G&&(Q.current.newIndex=G),d!==Q.current.containerId&&(Q.current.containerId=d),u!==Q.current.items&&(Q.current.items=u)}),[X,G,d,u]),(0,g.useEffect)((()=>{if($===Q.current.activeId)return;if($&&!Q.current.activeId)return void(Q.current.activeId=$);const e=setTimeout((()=>{Q.current.activeId=$}),50);return()=>clearTimeout(e)}),[$]),{active:I,activeIndex:f,attributes:j,data:E,rect:D,index:x,newIndex:G,items:u,isOver:R,isSorting:X,isDragging:B,listeners:L,node:S,overIndex:m,over:U,setNodeRef:Y,setActivatorNodeRef:H,setDroppableNodeRef:k,setDraggableNodeRef:T,transform:null!=ne?ne:q,transition:ne||ee&&Q.current.newIndex===x?Pt:W&&!_(z)||!s?void 0:X||te?F.Transition.toString({...s,property:At}):void 0}}Me.Down,Me.Right,Me.Up,Me.Left;const Lt=window.wp.compose;function _t(e){return _t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},_t(e)}function Bt(e,t){for(var n=0;ne.length)&&(t=e.length);for(var n=0,r=Array(t);n[...t].filter((e=>null!=e))),[...t])}(function(e,t){return(0,g.useMemo)((()=>({sensor:e,options:{}})),[e,t])}(Yt)),b=[],y=!1;return o&&o.length&&(o.forEach((function(e,t){var n=[];a.forEach((function(t){var r;n.push({name:t.name,label:t.label,value:null!==(r=e[t.name])&&void 0!==r?r:""})})),b.push({id:t+1,values:n,removeChoice:function(){!function(e){o.splice(e,1),i(o)}(t)},updateChoice:function(e){!function(e,t){o[e]&&(o[e]=Wt(Wt({},o[e]),t),i(o))}(t,e)}})})),h=0&&re.length)&&(t=e.length);for(var n=0,r=Array(t);nattributes = array( 'checked' => 'false', 'alongside_text' => '', + 'choices' => array(), + 'multiple' => 'false', + 'output_format' => '', ); // Filters. @@ -64,18 +67,97 @@ public function filter_lzb_prepare_block_attribute( $attribute_data, $control ) if ( ! $control || ! isset( $control['type'] ) || - $this->name !== $control['type'] || - ! isset( $control['checked'] ) + $this->name !== $control['type'] ) { return $attribute_data; } - if ( ! isset( $attribute_data['default'] ) || ! is_bool( $attribute_data['default'] ) ) { + // Set multiple value. + if ( isset( $control['multiple'] ) && 'true' === $control['multiple'] ) { + $attribute_data['type'] = 'array'; + $attribute_data['items'] = array( 'type' => 'string' ); + $attribute_data['default'] = $attribute_data['default'] ? explode( ',', $attribute_data['default'] ) : array(); + + // Set default checked value for single checkbox. + } elseif ( isset( $control['checked'] ) && ( ! isset( $attribute_data['default'] ) || ! is_bool( $attribute_data['default'] ) ) ) { $attribute_data['default'] = 'true' === $control['checked']; } return $attribute_data; } + + /** + * Get choice data by control value. + * + * @param string $value - attribute value. + * @param array $control - control data. + * + * @return array + */ + public function get_choice_data_by_value( $value, $control ) { + $choice_data = array( + 'value' => $value, + 'label' => $value, + ); + + if ( isset( $control['choices'] ) && is_array( $control['choices'] ) ) { + foreach ( $control['choices'] as $choice ) { + if ( $value === $choice['value'] ) { + $choice_data = $choice; + } + } + } + + return $choice_data; + } + + /** + * Get new attribute value. + * + * @param string $value - attribute value. + * @param array $control - control data. + * + * @return array + */ + public function get_new_attribute_value( $value, $control ) { + if ( isset( $control['multiple'] ) && 'true' === $control['multiple'] && is_array( $value ) ) { + foreach ( $value as $k => $item ) { + $choice_data = $this->get_choice_data_by_value( $value[ $k ], $control ); + + if ( 'label' === $control['output_format'] ) { + $value[ $k ] = $choice_data['label']; + } elseif ( 'array' === $control['output_format'] ) { + $value[ $k ] = $choice_data; + } + } + } + + return $value; + } + + /** + * Change control output to array. + * + * @param mixed $value - control value. + * @param array $control_data - control data. + * @param array $block_data - block data. + * @param string $context - block render context. + * + * @return string|array + */ + // phpcs:ignore + public function filter_control_value( $value, $control_data, $block_data, $context ) { + if ( + ! isset( $control_data['multiple'] ) || + 'true' !== $control_data['multiple'] || + ! isset( $control_data['output_format'] ) || + ! $control_data['output_format'] + ) { + return $value; + } + + return $this->get_new_attribute_value( $value, $control_data ); + } } new LazyBlocks_Control_Checkbox(); diff --git a/controls/checkbox/script.js b/controls/checkbox/script.js index 48cc9c141..d92df529b 100644 --- a/controls/checkbox/script.js +++ b/controls/checkbox/script.js @@ -3,7 +3,13 @@ */ import { __ } from '@wordpress/i18n'; import { addFilter } from '@wordpress/hooks'; -import { PanelBody, TextControl, CheckboxControl } from '@wordpress/components'; +import { + PanelBody, + TextControl, + CheckboxControl, + ToggleControl, + RadioControl, +} from '@wordpress/components'; /** * Internal dependencies. @@ -11,21 +17,75 @@ import { PanelBody, TextControl, CheckboxControl } from '@wordpress/components'; import BaseControl from '../../assets/components/base-control'; import useBlockControlProps from '../../assets/hooks/use-block-control-props'; +import ComponentChoices from '../select/component-choices'; + /** * Control render in editor. */ addFilter( 'lzb.editor.control.checkbox.render', 'lzb.editor', - (render, props) => ( - - - - ) + (render, props) => { + const { choices } = props.data; + + // Return null if multiple is true and no choices available. + if (props.data.multiple === 'true' && (!choices || !choices.length)) { + return null; + } + + const val = props.getValue(); + + // Multiple checkbox. + if (props.data.multiple === 'true') { + return ( + + {choices.map((choice) => ( + { + const index = val.indexOf(choice.value); + + // Only create new array when needed + const newVal = + checked && index === -1 + ? [...val, choice.value] + : [...val]; + + if (!checked && index !== -1) { + newVal.splice(index, 1); + } + + // Create index map once for more efficient sorting + const indexMap = new Map( + choices.map((c, i) => [c.value, i]) + ); + + newVal.sort((a, b) => { + const indexA = indexMap.get(a) ?? 0; + const indexB = indexMap.get(b) ?? 0; + return indexA - indexB; + }); + + props.onChange(newVal); + }} + /> + ))} + + ); + } + + return ( + + + + ); + } ); /** @@ -33,11 +93,12 @@ addFilter( * * @param {Object} validationData * @param {number} value + * @param {Object} data * * @return {Object} validation data. */ -function validate(validationData, value) { - if (!value) { +function validate(validationData, value, data) { + if (!value || (data.multiple === 'true' && !value.length)) { return { valid: false, message: 'Please tick this box if you want to proceed.', @@ -60,36 +121,113 @@ addFilter( return ( <> + {data.multiple !== 'true' && ( + +
+
+ + updateData({ + alongside_text: value, + }) + } + /> +
+
+ + updateData({ + checked: value ? 'true' : 'false', + }) + } + /> +
+
+ + )} - - updateData({ alongside_text: value }) - } - /> - - - - updateData({ - checked: value ? 'true' : 'false', + multiple: value ? 'true' : 'false', }) } /> + {data.multiple === 'true' && ( + <> + + updateData({ choices: val })} + /> + + + + + updateData({ output_format: value }) + } + /> + + + + )} ); } diff --git a/controls/radio/index.php b/controls/radio/index.php index 876efc875..b43082b80 100644 --- a/controls/radio/index.php +++ b/controls/radio/index.php @@ -25,7 +25,6 @@ public function __construct() { $this->attributes = array( 'choices' => array(), 'allow_null' => 'false', - 'multiple' => 'false', 'output_format' => '', );