@perses-dev/components 0.55.0-rc.1 → 0.56.0-beta.0

package/dist/DragAndDrop/DragAndDropList.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -27,129 +28,199 @@ import { idle } from "./model.js";
  * @param accessKey - The key to use to identify the elements (key of the object)
  * @param axis - The axis to monitor the drag and drop on
  * @param onChange - The function to call when a drop is detected
- */ export function useDragAndDropMonitor({ elements, accessKey, axis = 'vertical', onChange }) {
-    return useEffect(()=>{
-        return monitorForElements({
-            onDrop ({ location, source }) {
-                const target = location.current.dropTargets[0];
-                if (!target) {
-                    return;
-                }
-                const sourceData = source.data;
-                const targetData = target.data;
-                const indexOfSource = elements.findIndex((column)=>column[accessKey] === sourceData[accessKey]);
-                const indexOfTarget = elements.findIndex((column)=>column[accessKey] === targetData[accessKey]);
-                if (indexOfTarget < 0 || indexOfSource < 0) {
-                    return;
+ */ export function useDragAndDropMonitor(t0) {
+    const $ = _c(6);
+    const { elements, accessKey, axis: t1, onChange } = t0;
+    const axis = t1 === undefined ? "vertical" : t1;
+    let t2;
+    let t3;
+    if ($[0] !== accessKey || $[1] !== axis || $[2] !== elements || $[3] !== onChange) {
+        t2 = ()=>monitorForElements({
+                onDrop (t4) {
+                    const { location, source } = t4;
+                    const target = location.current.dropTargets[0];
+                    if (!target) {
+                        return;
+                    }
+                    const sourceData = source.data;
+                    const targetData = target.data;
+                    const indexOfSource = elements.findIndex((column)=>column[accessKey] === sourceData[accessKey]);
+                    const indexOfTarget = elements.findIndex((column_0)=>column_0[accessKey] === targetData[accessKey]);
+                    if (indexOfTarget < 0 || indexOfSource < 0) {
+                        return;
+                    }
+                    const closestEdgeOfTarget = extractClosestEdge(targetData);
+                    onChange(reorderWithEdge({
+                        list: elements,
+                        startIndex: indexOfSource,
+                        indexOfTarget,
+                        closestEdgeOfTarget,
+                        axis
+                    }));
                 }
-                const closestEdgeOfTarget = extractClosestEdge(targetData);
-                onChange(reorderWithEdge({
-                    list: elements,
-                    startIndex: indexOfSource,
-                    indexOfTarget,
-                    closestEdgeOfTarget,
-                    axis: axis
-                }));
-            }
-        });
-    }, [
-        accessKey,
-        axis,
-        elements,
-        onChange
-    ]);
+            });
+        t3 = [
+            accessKey,
+            axis,
+            elements,
+            onChange
+        ];
+        $[0] = accessKey;
+        $[1] = axis;
+        $[2] = elements;
+        $[3] = onChange;
+        $[4] = t2;
+        $[5] = t3;
+    } else {
+        t2 = $[4];
+        t3 = $[5];
+    }
+    return useEffect(t2, t3);
 }
 /**
  * This component wraps the children that should be draggable.
- */ export function DragAndDropElement({ children, data, dragHandleRef }) {
+ */ export function DragAndDropElement(t0) {
+    const $ = _c(17);
+    const { children, data, dragHandleRef } = t0;
     const ref = useRef(null);
     const [state, setState] = useState(idle);
-    useEffect(()=>{
-        const element = ref.current;
-        if (!element) {
-            return;
-        }
-        return combine(draggable({
-            element,
-            dragHandle: dragHandleRef?.current ?? undefined,
-            getInitialData () {
-                return data;
-            },
-            onDragStart () {
-                setState({
-                    type: 'is-dragging'
-                });
-            },
-            onDrop () {
-                setState(idle);
+    let t1;
+    let t2;
+    if ($[0] !== data || $[1] !== dragHandleRef) {
+        t1 = ()=>{
+            const element = ref.current;
+            if (!element) {
+                return;
             }
-        }), dropTargetForElements({
-            element,
-            canDrop ({ source }) {
-                // not allowing dropping on yourself
-                if (source.element === element) {
-                    return false;
+            return combine(draggable({
+                element,
+                dragHandle: dragHandleRef?.current ?? undefined,
+                getInitialData () {
+                    return data;
+                },
+                onDragStart () {
+                    setState({
+                        type: "is-dragging"
+                    });
+                },
+                onDrop () {
+                    setState(idle);
                 }
-                // only allowing tasks to be dropped on me
-                return true;
-            },
-            getData ({ input }) {
-                return attachClosestEdge(data, {
-                    element,
-                    input,
-                    allowedEdges: [
-                        'top',
-                        'bottom'
-                    ]
-                });
-            },
-            getIsSticky () {
-                return true;
-            },
-            onDragEnter ({ self }) {
-                const closestEdge = extractClosestEdge(self.data);
-                setState({
-                    type: 'is-dragging-over',
-                    closestEdge
-                });
-            },
-            onDrag ({ self }) {
-                const closestEdge = extractClosestEdge(self.data);
-                // Only need to update react state if nothing has changed.
-                // Prevents re-rendering.
-                setState((current)=>{
-                    if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {
-                        return current;
+            }), dropTargetForElements({
+                element,
+                canDrop (t3) {
+                    const { source } = t3;
+                    if (source.element === element) {
+                        return false;
                     }
-                    return {
-                        type: 'is-dragging-over',
+                    return true;
+                },
+                getData (t4) {
+                    const { input } = t4;
+                    return attachClosestEdge(data, {
+                        element,
+                        input,
+                        allowedEdges: [
+                            "top",
+                            "bottom"
+                        ]
+                    });
+                },
+                getIsSticky () {
+                    return true;
+                },
+                onDragEnter (t5) {
+                    const { self } = t5;
+                    const closestEdge = extractClosestEdge(self.data);
+                    setState({
+                        type: "is-dragging-over",
                         closestEdge
-                    };
-                });
-            },
-            onDragLeave () {
-                setState(idle);
-            },
-            onDrop () {
-                setState(idle);
-            }
-        }));
-    }, [
-        data,
-        dragHandleRef
-    ]);
-    return /*#__PURE__*/ _jsxs(Stack, {
-        ref: ref,
-        spacing: 1,
-        style: {
-            opacity: state.type === 'is-dragging' ? 0.5 : 'unset'
-        },
-        children: [
-            state.type === 'is-dragging-over' && state.closestEdge === 'top' ? /*#__PURE__*/ _jsx(DropIndicator, {}) : null,
-            children,
-            state.type === 'is-dragging-over' && state.closestEdge === 'bottom' ? /*#__PURE__*/ _jsx(DropIndicator, {}) : null
-        ]
-    });
+                    });
+                },
+                onDrag (t6) {
+                    const { self: self_0 } = t6;
+                    const closestEdge_0 = extractClosestEdge(self_0.data);
+                    setState((current)=>{
+                        if (current.type === "is-dragging-over" && current.closestEdge === closestEdge_0) {
+                            return current;
+                        }
+                        return {
+                            type: "is-dragging-over",
+                            closestEdge: closestEdge_0
+                        };
+                    });
+                },
+                onDragLeave () {
+                    setState(idle);
+                },
+                onDrop () {
+                    setState(idle);
+                }
+            }));
+        };
+        t2 = [
+            data,
+            dragHandleRef
+        ];
+        $[0] = data;
+        $[1] = dragHandleRef;
+        $[2] = t1;
+        $[3] = t2;
+    } else {
+        t1 = $[2];
+        t2 = $[3];
+    }
+    useEffect(t1, t2);
+    const t3 = state.type === "is-dragging" ? 0.5 : "unset";
+    let t4;
+    if ($[4] !== t3) {
+        t4 = {
+            opacity: t3
+        };
+        $[4] = t3;
+        $[5] = t4;
+    } else {
+        t4 = $[5];
+    }
+    let t5;
+    if ($[6] !== state.closestEdge || $[7] !== state.type) {
+        t5 = state.type === "is-dragging-over" && state.closestEdge === "top" ? /*#__PURE__*/ _jsx(DropIndicator, {}) : null;
+        $[6] = state.closestEdge;
+        $[7] = state.type;
+        $[8] = t5;
+    } else {
+        t5 = $[8];
+    }
+    let t6;
+    if ($[9] !== state.closestEdge || $[10] !== state.type) {
+        t6 = state.type === "is-dragging-over" && state.closestEdge === "bottom" ? /*#__PURE__*/ _jsx(DropIndicator, {}) : null;
+        $[9] = state.closestEdge;
+        $[10] = state.type;
+        $[11] = t6;
+    } else {
+        t6 = $[11];
+    }
+    let t7;
+    if ($[12] !== children || $[13] !== t4 || $[14] !== t5 || $[15] !== t6) {
+        t7 = /*#__PURE__*/ _jsxs(Stack, {
+            ref: ref,
+            spacing: 1,
+            style: t4,
+            children: [
+                t5,
+                children,
+                t6
+            ]
+        });
+        $[12] = children;
+        $[13] = t4;
+        $[14] = t5;
+        $[15] = t6;
+        $[16] = t7;
+    } else {
+        t7 = $[16];
+    }
+    return t7;
 }
 
 //# sourceMappingURL=DragAndDropList.js.map

package/dist/DragAndDrop/DragAndDropList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DragAndDrop/DragAndDropList.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n  monitorForElements,\n  draggable,\n  dropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { Stack } from '@mui/material';\nimport type { ReactElement, ReactNode, RefObject } from 'react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { DropIndicator } from './DropIndicator';\nimport type { State } from './model';\nimport { idle } from './model';\n\ninterface MonitorElementsProps {\n  elements: Array<Record<string, unknown>>;\n  accessKey: string;\n  axis?: 'vertical' | 'horizontal';\n  onChange: (elements: Array<Record<string, unknown>>) => void;\n}\n\n/**\n * This hook is responsible for monitoring the drag and drop of elements.\n * It will call the onChange function with the new order of elements when a drop is detected.\n *\n * @param elements - The list of elements to monitor\n * @param accessKey - The key to use to identify the elements (key of the object)\n * @param axis - The axis to monitor the drag and drop on\n * @param onChange - The function to call when a drop is detected\n */\nexport function useDragAndDropMonitor({\n  elements,\n  accessKey,\n  axis = 'vertical',\n  onChange,\n}: MonitorElementsProps): void {\n  return useEffect(() => {\n    return monitorForElements({\n      onDrop({ location, source }) {\n        const target = location.current.dropTargets[0];\n        if (!target) {\n          return;\n        }\n\n        const sourceData = source.data;\n        const targetData = target.data;\n\n        const indexOfSource = elements.findIndex((column) => column[accessKey] === sourceData[accessKey]);\n        const indexOfTarget = elements.findIndex((column) => column[accessKey] === targetData[accessKey]);\n\n        if (indexOfTarget < 0 || indexOfSource < 0) {\n          return;\n        }\n\n        const closestEdgeOfTarget = extractClosestEdge(targetData);\n\n        onChange(\n          reorderWithEdge({\n            list: elements,\n            startIndex: indexOfSource,\n            indexOfTarget,\n            closestEdgeOfTarget,\n            axis: axis,\n          }),\n        );\n      },\n    });\n  }, [accessKey, axis, elements, onChange]);\n}\n\nexport interface DragAndDropElementProps {\n  children: ReactNode;\n  data: Record<string, unknown>;\n  /**\n   * Ref of the element used as drag handle (e.g. a `DragButton`). When provided, the drag can only be started from\n   * this element. Otherwise, the drag can be started from anywhere in the element.\n   */\n  dragHandleRef?: RefObject<HTMLElement | null>;\n}\n\n/**\n * This component wraps the children that should be draggable.\n */\nexport function DragAndDropElement({ children, data, dragHandleRef }: DragAndDropElementProps): ReactElement {\n  const ref = useRef<HTMLDivElement>(null);\n  const [state, setState] = useState<State>(idle);\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) {\n      return;\n    }\n\n    return combine(\n      draggable({\n        element,\n        dragHandle: dragHandleRef?.current ?? undefined,\n        getInitialData() {\n          return data;\n        },\n        onDragStart() {\n          setState({ type: 'is-dragging' });\n        },\n        onDrop() {\n          setState(idle);\n        },\n      }),\n      dropTargetForElements({\n        element,\n        canDrop({ source }) {\n          // not allowing dropping on yourself\n          if (source.element === element) {\n            return false;\n          }\n          // only allowing tasks to be dropped on me\n          return true;\n        },\n        getData({ input }) {\n          return attachClosestEdge(data, {\n            element,\n            input,\n            allowedEdges: ['top', 'bottom'],\n          });\n        },\n        getIsSticky() {\n          return true;\n        },\n        onDragEnter({ self }) {\n          const closestEdge = extractClosestEdge(self.data);\n          setState({ type: 'is-dragging-over', closestEdge });\n        },\n        onDrag({ self }) {\n          const closestEdge = extractClosestEdge(self.data);\n\n          // Only need to update react state if nothing has changed.\n          // Prevents re-rendering.\n          setState((current) => {\n            if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {\n              return current;\n            }\n            return { type: 'is-dragging-over', closestEdge };\n          });\n        },\n        onDragLeave() {\n          setState(idle);\n        },\n        onDrop() {\n          setState(idle);\n        },\n      }),\n    );\n  }, [data, dragHandleRef]);\n\n  return (\n    <Stack ref={ref} spacing={1} style={{ opacity: state.type === 'is-dragging' ? 0.5 : 'unset' }}>\n      {state.type === 'is-dragging-over' && state.closestEdge === 'top' ? <DropIndicator /> : null}\n      {children}\n      {state.type === 'is-dragging-over' && state.closestEdge === 'bottom' ? <DropIndicator /> : null}\n    </Stack>\n  );\n}\n"],"names":["attachClosestEdge","extractClosestEdge","reorderWithEdge","combine","monitorForElements","draggable","dropTargetForElements","Stack","useEffect","useRef","useState","DropIndicator","idle","useDragAndDropMonitor","elements","accessKey","axis","onChange","onDrop","location","source","target","current","dropTargets","sourceData","data","targetData","indexOfSource","findIndex","column","indexOfTarget","closestEdgeOfTarget","list","startIndex","DragAndDropElement","children","dragHandleRef","ref","state","setState","element","dragHandle","undefined","getInitialData","onDragStart","type","canDrop","getData","input","allowedEdges","getIsSticky","onDragEnter","self","closestEdge","onDrag","onDragLeave","spacing","style","opacity"],"mappings":"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"}
+{"version":3,"sources":["../../src/DragAndDrop/DragAndDropList.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n  monitorForElements,\n  draggable,\n  dropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { Stack } from '@mui/material';\nimport type { ReactElement, ReactNode, RefObject } from 'react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { DropIndicator } from './DropIndicator';\nimport type { State } from './model';\nimport { idle } from './model';\n\ninterface MonitorElementsProps {\n  elements: Array<Record<string, unknown>>;\n  accessKey: string;\n  axis?: 'vertical' | 'horizontal';\n  onChange: (elements: Array<Record<string, unknown>>) => void;\n}\n\n/**\n * This hook is responsible for monitoring the drag and drop of elements.\n * It will call the onChange function with the new order of elements when a drop is detected.\n *\n * @param elements - The list of elements to monitor\n * @param accessKey - The key to use to identify the elements (key of the object)\n * @param axis - The axis to monitor the drag and drop on\n * @param onChange - The function to call when a drop is detected\n */\nexport function useDragAndDropMonitor({\n  elements,\n  accessKey,\n  axis = 'vertical',\n  onChange,\n}: MonitorElementsProps): void {\n  return useEffect(() => {\n    return monitorForElements({\n      onDrop({ location, source }) {\n        const target = location.current.dropTargets[0];\n        if (!target) {\n          return;\n        }\n\n        const sourceData = source.data;\n        const targetData = target.data;\n\n        const indexOfSource = elements.findIndex((column) => column[accessKey] === sourceData[accessKey]);\n        const indexOfTarget = elements.findIndex((column) => column[accessKey] === targetData[accessKey]);\n\n        if (indexOfTarget < 0 || indexOfSource < 0) {\n          return;\n        }\n\n        const closestEdgeOfTarget = extractClosestEdge(targetData);\n\n        onChange(\n          reorderWithEdge({\n            list: elements,\n            startIndex: indexOfSource,\n            indexOfTarget,\n            closestEdgeOfTarget,\n            axis: axis,\n          }),\n        );\n      },\n    });\n  }, [accessKey, axis, elements, onChange]);\n}\n\nexport interface DragAndDropElementProps {\n  children: ReactNode;\n  data: Record<string, unknown>;\n  /**\n   * Ref of the element used as drag handle (e.g. a `DragButton`). When provided, the drag can only be started from\n   * this element. Otherwise, the drag can be started from anywhere in the element.\n   */\n  dragHandleRef?: RefObject<HTMLElement | null>;\n}\n\n/**\n * This component wraps the children that should be draggable.\n */\nexport function DragAndDropElement({ children, data, dragHandleRef }: DragAndDropElementProps): ReactElement {\n  const ref = useRef<HTMLDivElement>(null);\n  const [state, setState] = useState<State>(idle);\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) {\n      return;\n    }\n\n    return combine(\n      draggable({\n        element,\n        dragHandle: dragHandleRef?.current ?? undefined,\n        getInitialData() {\n          return data;\n        },\n        onDragStart() {\n          setState({ type: 'is-dragging' });\n        },\n        onDrop() {\n          setState(idle);\n        },\n      }),\n      dropTargetForElements({\n        element,\n        canDrop({ source }) {\n          // not allowing dropping on yourself\n          if (source.element === element) {\n            return false;\n          }\n          // only allowing tasks to be dropped on me\n          return true;\n        },\n        getData({ input }) {\n          return attachClosestEdge(data, {\n            element,\n            input,\n            allowedEdges: ['top', 'bottom'],\n          });\n        },\n        getIsSticky() {\n          return true;\n        },\n        onDragEnter({ self }) {\n          const closestEdge = extractClosestEdge(self.data);\n          setState({ type: 'is-dragging-over', closestEdge });\n        },\n        onDrag({ self }) {\n          const closestEdge = extractClosestEdge(self.data);\n\n          // Only need to update react state if nothing has changed.\n          // Prevents re-rendering.\n          setState((current) => {\n            if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {\n              return current;\n            }\n            return { type: 'is-dragging-over', closestEdge };\n          });\n        },\n        onDragLeave() {\n          setState(idle);\n        },\n        onDrop() {\n          setState(idle);\n        },\n      }),\n    );\n  }, [data, dragHandleRef]);\n\n  return (\n    <Stack ref={ref} spacing={1} style={{ opacity: state.type === 'is-dragging' ? 0.5 : 'unset' }}>\n      {state.type === 'is-dragging-over' && state.closestEdge === 'top' ? <DropIndicator /> : null}\n      {children}\n      {state.type === 'is-dragging-over' && state.closestEdge === 'bottom' ? <DropIndicator /> : null}\n    </Stack>\n  );\n}\n"],"names":["attachClosestEdge","extractClosestEdge","reorderWithEdge","combine","monitorForElements","draggable","dropTargetForElements","Stack","useEffect","useRef","useState","DropIndicator","idle"],"mappings":";;AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,iBAAiB,EAAEC,kBAAkB,QAAQ,wDAAwD;AAC9G,SAASC,eAAe,QAAQ,kEAAkE;AAClG,SAASC,OAAO,QAAQ,4CAA4C;AACpE,SACEC,kBAAkB,EAClBC,SAAS,EACTC,qBAAqB,QAChB,oDAAoD;AAC3D,SAASC,KAAK,QAAQ,gBAAgB;AAEtC,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAEpD,SAASC,aAAa,QAAQ,qBAAkB;AAEhD,SAASC,IAAI,QAAQ,aAAU;AAS/B;;;;;;;;CAQC,GACD,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDP;;CAEC,GACD,OAAO"}

package/dist/DragAndDrop/DragButton.js

@@ -11,6 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 import { IconButton, Menu, MenuItem } from "@mui/material";
 import DragIcon from "mdi-material-ui/Drag";
 import { useState, forwardRef } from "react";
@@ -38,62 +39,140 @@ export function handleMoveDown(element, elements) {
     newElements.splice(index + 1, 0, element);
     return newElements;
 }
-export const DragButton = /*#__PURE__*/ forwardRef(function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx, ...otherProps }, ref) {
+export const DragButton = /*#__PURE__*/ forwardRef(function DragButton(t0, ref) {
+    const $ = _c(25);
+    let menuSx;
+    let onMoveDown;
+    let onMoveLeft;
+    let onMoveRight;
+    let onMoveUp;
+    let otherProps;
+    if ($[0] !== t0) {
+        ({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx, ...otherProps } = t0);
+        $[0] = t0;
+        $[1] = menuSx;
+        $[2] = onMoveDown;
+        $[3] = onMoveLeft;
+        $[4] = onMoveRight;
+        $[5] = onMoveUp;
+        $[6] = otherProps;
+    } else {
+        menuSx = $[1];
+        onMoveDown = $[2];
+        onMoveLeft = $[3];
+        onMoveRight = $[4];
+        onMoveUp = $[5];
+        otherProps = $[6];
+    }
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
-    function handleClick(event) {
-        setAnchorEl(event.currentTarget);
+    let t1;
+    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = function handleClick(event) {
+            setAnchorEl(event.currentTarget);
+        };
+        $[7] = t1;
+    } else {
+        t1 = $[7];
+    }
+    const handleClick = t1;
+    let t2;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = function handleMove(callback) {
+            setAnchorEl(null);
+            callback?.();
+        };
+        $[8] = t2;
+    } else {
+        t2 = $[8];
+    }
+    const handleMove = t2;
+    let t3;
+    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = /*#__PURE__*/ _jsx(DragIcon, {});
+        $[9] = t3;
+    } else {
+        t3 = $[9];
+    }
+    let t4;
+    if ($[10] !== open || $[11] !== otherProps || $[12] !== ref) {
+        t4 = /*#__PURE__*/ _jsx(IconButton, {
+            ...otherProps,
+            ref: ref,
+            "aria-label": "move",
+            "aria-haspopup": true,
+            "aria-expanded": open,
+            size: "small",
+            onClick: handleClick,
+            children: t3
+        });
+        $[10] = open;
+        $[11] = otherProps;
+        $[12] = ref;
+        $[13] = t4;
+    } else {
+        t4 = $[13];
+    }
+    let t5;
+    if ($[14] !== anchorEl || $[15] !== menuSx || $[16] !== onMoveDown || $[17] !== onMoveLeft || $[18] !== onMoveRight || $[19] !== onMoveUp || $[20] !== open) {
+        t5 = (onMoveUp || onMoveDown || onMoveLeft || onMoveRight) && /*#__PURE__*/ _jsxs(Menu, {
+            id: "drag-button-menu",
+            MenuListProps: {
+                "aria-labelledby": "drag-button-menu"
+            },
+            anchorEl: anchorEl,
+            open: open,
+            onClose: ()=>handleMove(undefined),
+            sx: menuSx,
+            children: [
+                onMoveUp && /*#__PURE__*/ _jsx(MenuItem, {
+                    onClick: ()=>handleMove(onMoveUp),
+                    children: "Move Up"
+                }),
+                onMoveDown && /*#__PURE__*/ _jsx(MenuItem, {
+                    onClick: ()=>handleMove(onMoveDown),
+                    children: "Move Down"
+                }),
+                onMoveLeft && /*#__PURE__*/ _jsx(MenuItem, {
+                    onClick: ()=>handleMove(onMoveLeft),
+                    children: "Move Left"
+                }),
+                onMoveRight && /*#__PURE__*/ _jsx(MenuItem, {
+                    onClick: ()=>handleMove(onMoveRight),
+                    children: "Move Right"
+                }),
+                onMoveRight && /*#__PURE__*/ _jsx(MenuItem, {
+                    onClick: ()=>handleMove(onMoveRight),
+                    children: "Move Right"
+                })
+            ]
+        });
+        $[14] = anchorEl;
+        $[15] = menuSx;
+        $[16] = onMoveDown;
+        $[17] = onMoveLeft;
+        $[18] = onMoveRight;
+        $[19] = onMoveUp;
+        $[20] = open;
+        $[21] = t5;
+    } else {
+        t5 = $[21];
     }
-    function handleMove(callback) {
-        setAnchorEl(null);
-        callback?.();
+    let t6;
+    if ($[22] !== t4 || $[23] !== t5) {
+        t6 = /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                t4,
+                t5
+            ]
+        });
+        $[22] = t4;
+        $[23] = t5;
+        $[24] = t6;
+    } else {
+        t6 = $[24];
     }
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx(IconButton, {
-                ...otherProps,
-                ref: ref,
-                "aria-label": "move",
-                "aria-haspopup": true,
-                "aria-expanded": open,
-                size: "small",
-                onClick: handleClick,
-                children: /*#__PURE__*/ _jsx(DragIcon, {})
-            }),
-            (onMoveUp || onMoveDown || onMoveLeft || onMoveRight) && /*#__PURE__*/ _jsxs(Menu, {
-                id: "drag-button-menu",
-                MenuListProps: {
-                    'aria-labelledby': 'drag-button-menu'
-                },
-                anchorEl: anchorEl,
-                open: open,
-                onClose: ()=>handleMove(undefined),
-                sx: menuSx,
-                children: [
-                    onMoveUp && /*#__PURE__*/ _jsx(MenuItem, {
-                        onClick: ()=>handleMove(onMoveUp),
-                        children: "Move Up"
-                    }),
-                    onMoveDown && /*#__PURE__*/ _jsx(MenuItem, {
-                        onClick: ()=>handleMove(onMoveDown),
-                        children: "Move Down"
-                    }),
-                    onMoveLeft && /*#__PURE__*/ _jsx(MenuItem, {
-                        onClick: ()=>handleMove(onMoveLeft),
-                        children: "Move Left"
-                    }),
-                    onMoveRight && /*#__PURE__*/ _jsx(MenuItem, {
-                        onClick: ()=>handleMove(onMoveRight),
-                        children: "Move Right"
-                    }),
-                    onMoveRight && /*#__PURE__*/ _jsx(MenuItem, {
-                        onClick: ()=>handleMove(onMoveRight),
-                        children: "Move Right"
-                    })
-                ]
-            })
-        ]
-    });
+    return t6;
 });
 
 //# sourceMappingURL=DragButton.js.map

package/dist/DragAndDrop/DragButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DragAndDrop/DragButton.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { IconButtonProps, MenuProps } from '@mui/material';\nimport { IconButton, Menu, MenuItem } from '@mui/material';\nimport DragIcon from 'mdi-material-ui/Drag';\nimport type { MouseEvent, ReactElement } from 'react';\nimport { useState, forwardRef } from 'react';\n\nexport function handleMoveUp<T>(element: T, elements: T[]): T[] {\n  const index = elements.indexOf(element);\n  if (index === 0) {\n    return elements;\n  }\n\n  const newElements = [...elements];\n  newElements.splice(index, 1);\n  newElements.splice(index - 1, 0, element);\n  return newElements;\n}\n\nexport function handleMoveDown<T>(element: T, elements: T[]): T[] {\n  const index = elements.indexOf(element);\n  if (index === elements.length - 1) {\n    return elements;\n  }\n\n  const newElements = [...elements];\n  newElements.splice(index, 1);\n  newElements.splice(index + 1, 0, element);\n  return newElements;\n}\n\nexport interface DragButtonProps extends IconButtonProps {\n  onMoveUp?: () => void;\n  onMoveDown?: () => void;\n  onMoveLeft?: () => void;\n  onMoveRight?: () => void;\n  menuSx?: MenuProps['sx'];\n}\n\nexport const DragButton = forwardRef<HTMLButtonElement, DragButtonProps>(function DragButton(\n  { onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx, ...otherProps }: DragButtonProps,\n  ref,\n): ReactElement {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n\n  function handleClick(event: MouseEvent<HTMLElement>): void {\n    setAnchorEl(event.currentTarget);\n  }\n\n  function handleMove(callback?: () => void): void {\n    setAnchorEl(null);\n    callback?.();\n  }\n\n  return (\n    <>\n      <IconButton\n        {...otherProps}\n        ref={ref}\n        aria-label=\"move\"\n        aria-haspopup={true}\n        aria-expanded={open}\n        size=\"small\"\n        onClick={handleClick}\n      >\n        <DragIcon />\n      </IconButton>\n      {(onMoveUp || onMoveDown || onMoveLeft || onMoveRight) && (\n        <Menu\n          id=\"drag-button-menu\"\n          MenuListProps={{\n            'aria-labelledby': 'drag-button-menu',\n          }}\n          anchorEl={anchorEl}\n          open={open}\n          onClose={() => handleMove(undefined)}\n          sx={menuSx}\n        >\n          {onMoveUp && <MenuItem onClick={() => handleMove(onMoveUp)}>Move Up</MenuItem>}\n          {onMoveDown && <MenuItem onClick={() => handleMove(onMoveDown)}>Move Down</MenuItem>}\n          {onMoveLeft && <MenuItem onClick={() => handleMove(onMoveLeft)}>Move Left</MenuItem>}\n          {onMoveRight && <MenuItem onClick={() => handleMove(onMoveRight)}>Move Right</MenuItem>}\n          {onMoveRight && <MenuItem onClick={() => handleMove(onMoveRight)}>Move Right</MenuItem>}\n        </Menu>\n      )}\n    </>\n  );\n});\n"],"names":["IconButton","Menu","MenuItem","DragIcon","useState","forwardRef","handleMoveUp","element","elements","index","indexOf","newElements","splice","handleMoveDown","length","DragButton","onMoveUp","onMoveDown","onMoveLeft","onMoveRight","menuSx","otherProps","ref","anchorEl","setAnchorEl","open","Boolean","handleClick","event","currentTarget","handleMove","callback","aria-label","aria-haspopup","aria-expanded","size","onClick","id","MenuListProps","onClose","undefined","sx"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,UAAU,EAAEC,IAAI,EAAEC,QAAQ,QAAQ,gBAAgB;AAC3D,OAAOC,cAAc,uBAAuB;AAE5C,SAASC,QAAQ,EAAEC,UAAU,QAAQ,QAAQ;AAE7C,OAAO,SAASC,aAAgBC,OAAU,EAAEC,QAAa;IACvD,MAAMC,QAAQD,SAASE,OAAO,CAACH;IAC/B,IAAIE,UAAU,GAAG;QACf,OAAOD;IACT;IAEA,MAAMG,cAAc;WAAIH;KAAS;IACjCG,YAAYC,MAAM,CAACH,OAAO;IAC1BE,YAAYC,MAAM,CAACH,QAAQ,GAAG,GAAGF;IACjC,OAAOI;AACT;AAEA,OAAO,SAASE,eAAkBN,OAAU,EAAEC,QAAa;IACzD,MAAMC,QAAQD,SAASE,OAAO,CAACH;IAC/B,IAAIE,UAAUD,SAASM,MAAM,GAAG,GAAG;QACjC,OAAON;IACT;IAEA,MAAMG,cAAc;WAAIH;KAAS;IACjCG,YAAYC,MAAM,CAACH,OAAO;IAC1BE,YAAYC,MAAM,CAACH,QAAQ,GAAG,GAAGF;IACjC,OAAOI;AACT;AAUA,OAAO,MAAMI,2BAAaV,WAA+C,SAASU,WAChF,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,UAAU,EAAEC,WAAW,EAAEC,MAAM,EAAE,GAAGC,YAA6B,EACzFC,GAAG;IAEH,MAAM,CAACC,UAAUC,YAAY,GAAGpB,SAA6B;IAC7D,MAAMqB,OAAOC,QAAQH;IAErB,SAASI,YAAYC,KAA8B;QACjDJ,YAAYI,MAAMC,aAAa;IACjC;IAEA,SAASC,WAAWC,QAAqB;QACvCP,YAAY;QACZO;IACF;IAEA,qBACE;;0BACE,KAAC/B;gBACE,GAAGqB,UAAU;gBACdC,KAAKA;gBACLU,cAAW;gBACXC,iBAAe;gBACfC,iBAAeT;gBACfU,MAAK;gBACLC,SAAST;0BAET,cAAA,KAACxB;;YAEDa,CAAAA,YAAYC,cAAcC,cAAcC,WAAU,mBAClD,MAAClB;gBACCoC,IAAG;gBACHC,eAAe;oBACb,mBAAmB;gBACrB;gBACAf,UAAUA;gBACVE,MAAMA;gBACNc,SAAS,IAAMT,WAAWU;gBAC1BC,IAAIrB;;oBAEHJ,0BAAY,KAACd;wBAASkC,SAAS,IAAMN,WAAWd;kCAAW;;oBAC3DC,4BAAc,KAACf;wBAASkC,SAAS,IAAMN,WAAWb;kCAAa;;oBAC/DC,4BAAc,KAAChB;wBAASkC,SAAS,IAAMN,WAAWZ;kCAAa;;oBAC/DC,6BAAe,KAACjB;wBAASkC,SAAS,IAAMN,WAAWX;kCAAc;;oBACjEA,6BAAe,KAACjB;wBAASkC,SAAS,IAAMN,WAAWX;kCAAc;;;;;;AAK5E,GAAG"}
+{"version":3,"sources":["../../src/DragAndDrop/DragButton.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { IconButtonProps, MenuProps } from '@mui/material';\nimport { IconButton, Menu, MenuItem } from '@mui/material';\nimport DragIcon from 'mdi-material-ui/Drag';\nimport type { MouseEvent, ReactElement } from 'react';\nimport { useState, forwardRef } from 'react';\n\nexport function handleMoveUp<T>(element: T, elements: T[]): T[] {\n  const index = elements.indexOf(element);\n  if (index === 0) {\n    return elements;\n  }\n\n  const newElements = [...elements];\n  newElements.splice(index, 1);\n  newElements.splice(index - 1, 0, element);\n  return newElements;\n}\n\nexport function handleMoveDown<T>(element: T, elements: T[]): T[] {\n  const index = elements.indexOf(element);\n  if (index === elements.length - 1) {\n    return elements;\n  }\n\n  const newElements = [...elements];\n  newElements.splice(index, 1);\n  newElements.splice(index + 1, 0, element);\n  return newElements;\n}\n\nexport interface DragButtonProps extends IconButtonProps {\n  onMoveUp?: () => void;\n  onMoveDown?: () => void;\n  onMoveLeft?: () => void;\n  onMoveRight?: () => void;\n  menuSx?: MenuProps['sx'];\n}\n\nexport const DragButton = forwardRef<HTMLButtonElement, DragButtonProps>(function DragButton(\n  { onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx, ...otherProps }: DragButtonProps,\n  ref,\n): ReactElement {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n\n  function handleClick(event: MouseEvent<HTMLElement>): void {\n    setAnchorEl(event.currentTarget);\n  }\n\n  function handleMove(callback?: () => void): void {\n    setAnchorEl(null);\n    callback?.();\n  }\n\n  return (\n    <>\n      <IconButton\n        {...otherProps}\n        ref={ref}\n        aria-label=\"move\"\n        aria-haspopup={true}\n        aria-expanded={open}\n        size=\"small\"\n        onClick={handleClick}\n      >\n        <DragIcon />\n      </IconButton>\n      {(onMoveUp || onMoveDown || onMoveLeft || onMoveRight) && (\n        <Menu\n          id=\"drag-button-menu\"\n          MenuListProps={{\n            'aria-labelledby': 'drag-button-menu',\n          }}\n          anchorEl={anchorEl}\n          open={open}\n          onClose={() => handleMove(undefined)}\n          sx={menuSx}\n        >\n          {onMoveUp && <MenuItem onClick={() => handleMove(onMoveUp)}>Move Up</MenuItem>}\n          {onMoveDown && <MenuItem onClick={() => handleMove(onMoveDown)}>Move Down</MenuItem>}\n          {onMoveLeft && <MenuItem onClick={() => handleMove(onMoveLeft)}>Move Left</MenuItem>}\n          {onMoveRight && <MenuItem onClick={() => handleMove(onMoveRight)}>Move Right</MenuItem>}\n          {onMoveRight && <MenuItem onClick={() => handleMove(onMoveRight)}>Move Right</MenuItem>}\n        </Menu>\n      )}\n    </>\n  );\n});\n"],"names":["IconButton","Menu","MenuItem","DragIcon","useState","forwardRef","handleMoveUp","element","elements","index","indexOf","newElements","splice","handleMoveDown","length","DragButton"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;;AAGjC,SAASA,UAAU,EAAEC,IAAI,EAAEC,QAAQ,QAAQ,gBAAgB;AAC3D,OAAOC,cAAc,uBAAuB;AAE5C,SAASC,QAAQ,EAAEC,UAAU,QAAQ,QAAQ;AAE7C,OAAO,SAASC,aAAgBC,OAAO,EAAKC,QAAQ;IAClD,MAAMC,QAAQD,SAASE,OAAO,CAACH;IAC/B,IAAIE,UAAU,GAAG;QACf,OAAOD;IACT;IAEA,MAAMG,cAAc;WAAIH;KAAS;IACjCG,YAAYC,MAAM,CAACH,OAAO;IAC1BE,YAAYC,MAAM,CAACH,QAAQ,GAAG,GAAGF;IACjC,OAAOI;AACT;AAEA,OAAO,SAASE,eAAkBN,OAAO,EAAKC,QAAQ;IACpD,MAAMC,QAAQD,SAASE,OAAO,CAACH;IAC/B,IAAIE,UAAUD,SAASM,MAAM,GAAG,GAAG;QACjC,OAAON;IACT;IAEA,MAAMG,cAAc;WAAIH;KAAS;IACjCG,YAAYC,MAAM,CAACH,OAAO;IAC1BE,YAAYC,MAAM,CAACH,QAAQ,GAAG,GAAGF;IACjC,OAAOI;AACT;AAUA,OAAO,MAAMI,2BAAaV,WAA+C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDtE"}