@perses-dev/components 0.50.1 → 0.50.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { IconButtonProps, MenuProps } from '@mui/material';
|
|
2
|
-
import { ReactElement } from 'react';
|
|
3
3
|
export declare function handleMoveUp<T>(element: T, elements: T[]): T[];
|
|
4
4
|
export declare function handleMoveDown<T>(element: T, elements: T[]): T[];
|
|
5
5
|
export interface DragButtonProps extends IconButtonProps {
|
|
@@ -9,5 +9,5 @@ export interface DragButtonProps extends IconButtonProps {
|
|
|
9
9
|
onMoveRight?: () => void;
|
|
10
10
|
menuSx?: MenuProps['sx'];
|
|
11
11
|
}
|
|
12
|
-
export declare
|
|
12
|
+
export declare const DragButton: import("react").ForwardRefExoticComponent<Omit<DragButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
13
13
|
//# sourceMappingURL=DragButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragButton.d.ts","sourceRoot":"","sources":["../../src/DragAndDrop/DragButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,eAAe,EAAkB,SAAS,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"DragButton.d.ts","sourceRoot":"","sources":["../../src/DragAndDrop/DragButton.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAc,eAAe,EAAkB,SAAS,EAAE,MAAM,eAAe,CAAC;AAIvF,wBAAgB,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAU9D;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAUhE;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;CAC1B;AAED,eAAO,MAAM,UAAU,4HAiDrB,CAAC"}
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
14
14
|
import { IconButton, Menu, MenuItem } from '@mui/material';
|
|
15
15
|
import DragIcon from 'mdi-material-ui/Drag';
|
|
16
|
-
import { useState } from 'react';
|
|
16
|
+
import { useState, forwardRef } from 'react';
|
|
17
17
|
export function handleMoveUp(element, elements) {
|
|
18
18
|
const index = elements.indexOf(element);
|
|
19
19
|
if (index === 0) {
|
|
@@ -38,7 +38,7 @@ export function handleMoveDown(element, elements) {
|
|
|
38
38
|
newElements.splice(index + 1, 0, element);
|
|
39
39
|
return newElements;
|
|
40
40
|
}
|
|
41
|
-
export function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx }) {
|
|
41
|
+
export const DragButton = /*#__PURE__*/ forwardRef(function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx, ...otherProps }, ref) {
|
|
42
42
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
43
43
|
const open = Boolean(anchorEl);
|
|
44
44
|
function handleClick(event) {
|
|
@@ -51,6 +51,8 @@ export function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menu
|
|
|
51
51
|
return /*#__PURE__*/ _jsxs(_Fragment, {
|
|
52
52
|
children: [
|
|
53
53
|
/*#__PURE__*/ _jsx(IconButton, {
|
|
54
|
+
...otherProps,
|
|
55
|
+
ref: ref,
|
|
54
56
|
"aria-label": "move",
|
|
55
57
|
"aria-haspopup": true,
|
|
56
58
|
"aria-expanded": open,
|
|
@@ -92,6 +94,6 @@ export function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menu
|
|
|
92
94
|
})
|
|
93
95
|
]
|
|
94
96
|
});
|
|
95
|
-
}
|
|
97
|
+
});
|
|
96
98
|
|
|
97
99
|
//# sourceMappingURL=DragButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/DragAndDrop/DragButton.tsx"],"sourcesContent":["// Copyright 2024 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 { IconButton, IconButtonProps, Menu, MenuItem, MenuProps } from '@mui/material';\nimport DragIcon from 'mdi-material-ui/Drag';\nimport { useState, MouseEvent, ReactElement } 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 function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx }: DragButtonProps): 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
|
|
1
|
+
{"version":3,"sources":["../../src/DragAndDrop/DragButton.tsx"],"sourcesContent":["// Copyright 2024 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 { IconButton, IconButtonProps, Menu, MenuItem, MenuProps } from '@mui/material';\nimport DragIcon from 'mdi-material-ui/Drag';\nimport { useState, MouseEvent, ReactElement, 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,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAmBC,IAAI,EAAEC,QAAQ,QAAmB,gBAAgB;AACvF,OAAOC,cAAc,uBAAuB;AAC5C,SAASC,QAAQ,EAA4BC,UAAU,QAAQ,QAAQ;AAEvE,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,qBAAAA,+BAAAA;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"}
|
|
@@ -64,7 +64,7 @@ function handleMoveDown(element, elements) {
|
|
|
64
64
|
newElements.splice(index + 1, 0, element);
|
|
65
65
|
return newElements;
|
|
66
66
|
}
|
|
67
|
-
function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx }) {
|
|
67
|
+
const DragButton = /*#__PURE__*/ (0, _react.forwardRef)(function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx, ...otherProps }, ref) {
|
|
68
68
|
const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
|
|
69
69
|
const open = Boolean(anchorEl);
|
|
70
70
|
function handleClick(event) {
|
|
@@ -77,6 +77,8 @@ function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx }) {
|
|
|
77
77
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
78
78
|
children: [
|
|
79
79
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
|
|
80
|
+
...otherProps,
|
|
81
|
+
ref: ref,
|
|
80
82
|
"aria-label": "move",
|
|
81
83
|
"aria-haspopup": true,
|
|
82
84
|
"aria-expanded": open,
|
|
@@ -118,4 +120,4 @@ function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx }) {
|
|
|
118
120
|
})
|
|
119
121
|
]
|
|
120
122
|
});
|
|
121
|
-
}
|
|
123
|
+
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@perses-dev/components",
|
|
3
|
-
"version": "0.50.
|
|
3
|
+
"version": "0.50.2",
|
|
4
4
|
"description": "Common UI components used across Perses features",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"homepage": "https://github.com/perses/perses/blob/main/README.md",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"@codemirror/lang-json": "^6.0.1",
|
|
39
39
|
"@fontsource/lato": "^4.5.10",
|
|
40
40
|
"@mui/x-date-pickers": "^7.23.1",
|
|
41
|
-
"@perses-dev/core": "0.50.
|
|
41
|
+
"@perses-dev/core": "0.50.2",
|
|
42
42
|
"@tanstack/react-table": "^8.20.5",
|
|
43
43
|
"@uiw/react-codemirror": "^4.19.1",
|
|
44
44
|
"date-fns": "^2.28.0",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"zod": "^3.21.4"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
|
-
"@perses-dev/storybook": "0.50.
|
|
58
|
+
"@perses-dev/storybook": "0.50.2"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
61
|
"@mui/material": "^6.1.10",
|