@babylonjs/shared-ui-components 5.28.0 → 5.30.0

package/components/colorPicker/HexColor.js

@@ -1,46 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import style from "./HexColor.modules.scss";
-export class HexColor extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { hex: this.props.value.replace("#", "") };
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        if (nextProps.value !== this.props.value) {
-            nextState.hex = nextProps.value.replace("#", "");
-        }
-        return true;
-    }
-    lock() {
-        if (this.props.lockObject) {
-            this.props.lockObject.lock = true;
-        }
-    }
-    unlock() {
-        if (this.props.lockObject) {
-            this.props.lockObject.lock = false;
-        }
-    }
-    updateHexValue(valueString) {
-        if (valueString != "" && /^[0-9A-Fa-f]+$/g.test(valueString) == false) {
-            return;
-        }
-        this.setState({ hex: valueString });
-        if (valueString.length !== this.props.expectedLength) {
-            if (this.props.expectedLength === 8 && valueString.length === 6) {
-                valueString = valueString + "FF";
-            }
-            else {
-                return;
-            }
-        }
-        this.props.onChange("#" + valueString);
-    }
-    render() {
-        return (_jsxs("div", { className: style.colorPickerHex, children: [_jsx("div", { className: style.colorPickerHexLabel, children: "Hex" }), _jsx("div", { className: style.colorPickerHexValue, children: _jsx("input", { type: "string", 
-                        // className="hex-input"
-                        className: style.colorPickerHex, value: this.state.hex, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateHexValue(evt.target.value) }) })] }));
-    }
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import style from "./HexColor.modules.scss";
+export class HexColor extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hex: this.props.value.replace("#", "") };
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (nextProps.value !== this.props.value) {
+            nextState.hex = nextProps.value.replace("#", "");
+        }
+        return true;
+    }
+    lock() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = true;
+        }
+    }
+    unlock() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = false;
+        }
+    }
+    updateHexValue(valueString) {
+        if (valueString != "" && /^[0-9A-Fa-f]+$/g.test(valueString) == false) {
+            return;
+        }
+        this.setState({ hex: valueString });
+        if (valueString.length !== this.props.expectedLength) {
+            if (this.props.expectedLength === 8 && valueString.length === 6) {
+                valueString = valueString + "FF";
+            }
+            else {
+                return;
+            }
+        }
+        this.props.onChange("#" + valueString);
+    }
+    render() {
+        return (_jsxs("div", { className: style.colorPickerHex, children: [_jsx("div", { className: style.colorPickerHexLabel, children: "Hex" }), _jsx("div", { className: style.colorPickerHexValue, children: _jsx("input", { type: "string", 
+                        // className="hex-input"
+                        className: style.colorPickerHex, value: this.state.hex, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateHexValue(evt.target.value) }) })] }));
+    }
+}
 //# sourceMappingURL=HexColor.js.map

package/components/layout/DraggableIcon.d.ts

@@ -0,0 +1,23 @@
+import type { FC } from "react";
+import type { ElementTypes, TabDrag } from "./types";
+/**
+ * Arguments for the DraggableIcon component.
+ */
+export interface IDraggableIconProps {
+    /**
+     * Icon source
+     */
+    src: string;
+    /**
+     * Object that will be passed to the drag event
+     */
+    item: TabDrag;
+    /**
+     * Type of drag event
+     */
+    type: ElementTypes;
+}
+/**
+ * An icon that can be dragged by the user
+ */
+export declare const DraggableIcon: FC<IDraggableIconProps>;

package/components/layout/DraggableIcon.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDrag } from "react-dnd";
+/**
+ * An icon that can be dragged by the user
+ */
+export const DraggableIcon = (props) => {
+    const [, drag] = useDrag(() => ({
+        type: props.type,
+        item: props.item,
+        collect(monitor) {
+            return {
+                isDragging: !!monitor.isDragging(),
+            };
+        },
+    }));
+    return _jsx("img", { ref: drag, src: props.src });
+};
+//# sourceMappingURL=DraggableIcon.js.map

package/components/layout/DraggableIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableIcon.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/layout/DraggableIcon.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAqBpC;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAA4B,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC5B,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,OAAO,CAAC,OAAO;YACX,OAAO;gBACH,UAAU,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;aACrC,CAAC;QACN,CAAC;KACJ,CAAC,CAAC,CAAC;IACJ,OAAO,cAAK,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,GAAI,CAAC;AAC9C,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport type { ElementTypes, TabDrag } from \"./types\";\r\n\r\n/**\r\n * Arguments for the DraggableIcon component.\r\n */\r\nexport interface IDraggableIconProps {\r\n    /**\r\n     * Icon source\r\n     */\r\n    src: string;\r\n    /**\r\n     * Object that will be passed to the drag event\r\n     */\r\n    item: TabDrag;\r\n    /**\r\n     * Type of drag event\r\n     */\r\n    type: ElementTypes;\r\n}\r\n\r\n/**\r\n * An icon that can be dragged by the user\r\n */\r\nexport const DraggableIcon: FC<IDraggableIconProps> = (props) => {\r\n    const [, drag] = useDrag(() => ({\r\n        type: props.type,\r\n        item: props.item,\r\n        collect(monitor) {\r\n            return {\r\n                isDragging: !!monitor.isDragging(),\r\n            };\r\n        },\r\n    }));\r\n    return <img ref={drag} src={props.src} />;\r\n};\r\n"]}

package/components/layout/FlexibleColumn.d.ts

@@ -0,0 +1,17 @@
+import type { FC } from "react";
+/**
+ * Arguments for the Column component.
+ */
+export interface IFlexibleColumnProps {
+    /**
+     * Width of column
+     */
+    width: string;
+}
+/**
+ * This component represents a single column in the layout. It receives a width
+ * that it occupies and the content to display
+ * @param props
+ * @returns
+ */
+export declare const FlexibleColumn: FC<IFlexibleColumnProps>;

package/components/layout/FlexibleColumn.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import style from "./FlexibleColumn.modules.scss";
+/**
+ * This component represents a single column in the layout. It receives a width
+ * that it occupies and the content to display
+ * @param props
+ * @returns
+ */
+export const FlexibleColumn = (props) => {
+    return (_jsx("div", { style: { width: props.width }, className: style.flexibleColumn, children: props.children }));
+};
+//# sourceMappingURL=FlexibleColumn.js.map

package/components/layout/FlexibleColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexibleColumn.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/layout/FlexibleColumn.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,+BAA+B,CAAC;AAYlD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAA6B,CAAC,KAAK,EAAE,EAAE;IAC9D,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,cAAc,YAC9D,KAAK,CAAC,QAAQ,GACb,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport style from \"./FlexibleColumn.modules.scss\";\r\n\r\n/**\r\n * Arguments for the Column component.\r\n */\r\nexport interface IFlexibleColumnProps {\r\n    /**\r\n     * Width of column\r\n     */\r\n    width: string;\r\n}\r\n\r\n/**\r\n * This component represents a single column in the layout. It receives a width\r\n * that it occupies and the content to display\r\n * @param props\r\n * @returns\r\n */\r\nexport const FlexibleColumn: FC<IFlexibleColumnProps> = (props) => {\r\n    return (\r\n        <div style={{ width: props.width }} className={style.flexibleColumn}>\r\n            {props.children}\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/layout/FlexibleDragHandler.d.ts

@@ -0,0 +1,18 @@
+import type { FC } from "react";
+/**
+ * Arguments for the DragHandler component.
+ */
+export interface IFlexibleDragHandlerProps {
+    /**
+     * The size of the containing element. Used to calculate the percentage of
+     * space occupied by the component
+     */
+    containerSize: {
+        width: number;
+        height: number;
+    };
+}
+/**
+ * This component receives the drop events and updates the layout accordingly
+ */
+export declare const FlexibleDragHandler: FC<IFlexibleDragHandlerProps>;

package/components/layout/FlexibleDragHandler.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useRef } from "react";
+import { Vector2 } from "@babylonjs/core/Maths/math.js";
+import { useDrop } from "react-dnd";
+import { ElementTypes } from "./types.js";
+import { addPercentageStringToNumber, getPosInLayout } from "./utils.js";
+import { LayoutContext } from "./LayoutContext.js";
+/**
+ * This component receives the drop events and updates the layout accordingly
+ */
+export const FlexibleDragHandler = (props) => {
+    const { layout, setLayout } = useContext(LayoutContext);
+    // CLICK/DRAG INFORMATION
+    const pointerPos = useRef(null);
+    const [_, drop] = useDrop(() => ({
+        accept: [ElementTypes.RESIZE_BAR],
+        hover(item, monitor) {
+            const anyitem = item;
+            const xy = monitor.getClientOffset();
+            const pos = new Vector2(xy.x, xy.y);
+            if (pointerPos.current) {
+                if (monitor.getItemType() === ElementTypes.RESIZE_BAR) {
+                    onResize(anyitem.rowNumber, anyitem.columnNumber, pos, pointerPos.current, anyitem.direction);
+                }
+            }
+            pointerPos.current = pos;
+        },
+        drop(item, monitor) {
+            pointerPos.current = null;
+        },
+    }));
+    const getLayoutProperty = (layout, property) => {
+        if (property === "width") {
+            return layout[property];
+        }
+        else {
+            return layout[property];
+        }
+    };
+    const setLayoutProperty = (layout, property, value) => {
+        if (property === "width") {
+            layout[property] = value;
+        }
+        else {
+            layout[property] = value;
+        }
+    };
+    const processResize = (pos, prevPos, row0, column0, row1, column1, axis, maxAxisValue, property, minFinalValue) => {
+        // Check axis difference
+        const axisDiff = pos[axis] - prevPos[axis];
+        try {
+            // Get layout rows
+            const layoutElement0 = getPosInLayout(layout, column0, row0);
+            const layoutElement1 = getPosInLayout(layout, column1, row1);
+            if (layoutElement0 && layoutElement1) {
+                const percDiff = (axisDiff / maxAxisValue) * 100;
+                const newValue0 = addPercentageStringToNumber(getLayoutProperty(layoutElement0, property), percDiff);
+                const newValue1 = addPercentageStringToNumber(getLayoutProperty(layoutElement1, property), -percDiff);
+                if (newValue0 >= minFinalValue && newValue1 >= minFinalValue) {
+                    setLayoutProperty(layoutElement0, property, newValue0.toFixed(2) + "%");
+                    setLayoutProperty(layoutElement1, property, newValue1.toFixed(2) + "%");
+                }
+                setLayout({ ...layout });
+            }
+        }
+        catch (e) {
+            // If an error occurred, we're trying to resize something invalid, so don't do anything
+            return;
+        }
+    };
+    const processResizeRow = (pos, prevPos, args) => {
+        processResize(pos, prevPos, args.row, args.column, args.row + 1, args.column, "y", props.containerSize.height, "height", 5);
+    };
+    const processResizeColumn = (pos, prevPos, args) => {
+        processResize(pos, prevPos, undefined, args.column, undefined, args.column + 1, "x", props.containerSize.width, "width", 5);
+    };
+    const onResize = (row, column, pos, prevPos, type) => {
+        if (type === "row") {
+            processResizeRow(pos, prevPos, { row, column });
+        }
+        else {
+            processResizeColumn(pos, prevPos, { row, column });
+        }
+        pointerPos.current = pos;
+    };
+    return (_jsx("div", { ref: drop, style: { width: "100%", height: "100%" }, children: props.children }));
+};
+//# sourceMappingURL=FlexibleDragHandler.js.map

package/components/layout/FlexibleDragHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexibleDragHandler.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/layout/FlexibleDragHandler.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from \"react\";\r\nimport { useContext, useRef } from \"react\";\r\nimport { Vector2 } from \"core/Maths/math\";\r\nimport type { Nullable } from \"core/types\";\r\nimport { useDrop } from \"react-dnd\";\r\nimport { ElementTypes } from \"./types\";\r\nimport type { LayoutTabsRow, LayoutColumn } from \"./types\";\r\nimport { addPercentageStringToNumber, getPosInLayout } from \"./utils\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport type { ResizeItem } from \"./FlexibleResizeBar\";\r\n\r\n/**\r\n * Arguments for the DragHandler component.\r\n */\r\nexport interface IFlexibleDragHandlerProps {\r\n    /**\r\n     * The size of the containing element. Used to calculate the percentage of\r\n     * space occupied by the component\r\n     */\r\n    containerSize: { width: number; height: number };\r\n}\r\n\r\n/**\r\n * This component receives the drop events and updates the layout accordingly\r\n */\r\nexport const FlexibleDragHandler: FC<IFlexibleDragHandlerProps> = (props) => {\r\n    const { layout, setLayout } = useContext(LayoutContext);\r\n    // CLICK/DRAG INFORMATION\r\n    const pointerPos = useRef<Nullable<Vector2>>(null);\r\n    const [_, drop] = useDrop(() => ({\r\n        accept: [ElementTypes.RESIZE_BAR],\r\n        hover(item, monitor) {\r\n            const anyitem = item as ResizeItem;\r\n\r\n            const xy = monitor.getClientOffset();\r\n            const pos = new Vector2(xy!.x, xy!.y);\r\n            if (pointerPos.current) {\r\n                if (monitor.getItemType() === ElementTypes.RESIZE_BAR) {\r\n                    onResize(anyitem.rowNumber, anyitem.columnNumber, pos, pointerPos.current, anyitem.direction);\r\n                }\r\n            }\r\n            pointerPos.current = pos;\r\n        },\r\n        drop(item, monitor) {\r\n            pointerPos.current = null;\r\n        },\r\n    }));\r\n\r\n    const getLayoutProperty = (layout: LayoutColumn | LayoutTabsRow, property: \"width\" | \"height\") => {\r\n        if (property === \"width\") {\r\n            return (layout as LayoutColumn)[property];\r\n        } else {\r\n            return (layout as LayoutTabsRow)[property];\r\n        }\r\n    };\r\n\r\n    const setLayoutProperty = (layout: LayoutColumn | LayoutTabsRow, property: \"width\" | \"height\", value: string) => {\r\n        if (property === \"width\") {\r\n            (layout as LayoutColumn)[property] = value;\r\n        } else {\r\n            (layout as LayoutTabsRow)[property] = value;\r\n        }\r\n    };\r\n\r\n    const processResize = (\r\n        pos: Vector2,\r\n        prevPos: Vector2,\r\n        row0: number | undefined,\r\n        column0: number,\r\n        row1: number | undefined,\r\n        column1: number,\r\n        axis: \"x\" | \"y\",\r\n        maxAxisValue: number,\r\n        property: \"width\" | \"height\",\r\n        minFinalValue: number\r\n    ) => {\r\n        // Check axis difference\r\n        const axisDiff = pos[axis] - prevPos[axis];\r\n\r\n        try {\r\n            // Get layout rows\r\n            const layoutElement0 = getPosInLayout(layout, column0, row0);\r\n            const layoutElement1 = getPosInLayout(layout, column1, row1);\r\n\r\n            if (layoutElement0 && layoutElement1) {\r\n                const percDiff = (axisDiff / maxAxisValue) * 100;\r\n\r\n                const newValue0 = addPercentageStringToNumber(getLayoutProperty(layoutElement0, property), percDiff);\r\n                const newValue1 = addPercentageStringToNumber(getLayoutProperty(layoutElement1, property), -percDiff);\r\n\r\n                if (newValue0 >= minFinalValue && newValue1 >= minFinalValue) {\r\n                    setLayoutProperty(layoutElement0, property, newValue0.toFixed(2) + \"%\");\r\n                    setLayoutProperty(layoutElement1, property, newValue1.toFixed(2) + \"%\");\r\n                }\r\n\r\n                setLayout({ ...layout });\r\n            }\r\n        } catch (e) {\r\n            // If an error occurred, we're trying to resize something invalid, so don't do anything\r\n            return;\r\n        }\r\n    };\r\n\r\n    const processResizeRow = (pos: Vector2, prevPos: Vector2, args: { row: number; column: number }) => {\r\n        processResize(pos, prevPos, args.row, args.column, args.row + 1, args.column, \"y\", props.containerSize.height, \"height\", 5);\r\n    };\r\n\r\n    const processResizeColumn = (pos: Vector2, prevPos: Vector2, args: { row: number; column: number }) => {\r\n        processResize(pos, prevPos, undefined, args.column, undefined, args.column + 1, \"x\", props.containerSize.width, \"width\", 5);\r\n    };\r\n\r\n    const onResize = (row: number, column: number, pos: Vector2, prevPos: Vector2, type: \"row\" | \"column\") => {\r\n        if (type === \"row\") {\r\n            processResizeRow(pos, prevPos, { row, column });\r\n        } else {\r\n            processResizeColumn(pos, prevPos, { row, column });\r\n        }\r\n        pointerPos.current = pos;\r\n    };\r\n\r\n    return (\r\n        <div ref={drop} style={{ width: \"100%\", height: \"100%\" }}>\r\n            {props.children}\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/layout/FlexibleDropZone.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+/**
+ * Arguments for the FlexibleDropZone component.
+ */
+export interface IFlexibleDropZoneProps {
+    /**
+     * The row number of the component in the layout
+     */
+    rowNumber: number;
+    /**
+     * The column number of the component in the layout
+     */
+    columnNumber: number;
+}
+/**
+ * This component contains the drag and drop zone for the resize bars that
+ * allow redefining width and height of layout elements
+ */
+export declare const FlexibleDropZone: FC<IFlexibleDropZoneProps>;

package/components/layout/FlexibleDropZone.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import style from "./FlexibleDropZone.modules.scss";
+import { FlexibleResizeBar } from "./FlexibleResizeBar.js";
+import { ResizeDirections } from "./types.js";
+/**
+ * This component contains the drag and drop zone for the resize bars that
+ * allow redefining width and height of layout elements
+ */
+export const FlexibleDropZone = (props) => {
+    return (_jsxs("div", { className: style.flexibleDropZoneContainer, children: [props.children, _jsx(FlexibleResizeBar, { rowNumber: props.rowNumber, columnNumber: props.columnNumber, direction: ResizeDirections.COLUMN }), _jsx(FlexibleResizeBar, { rowNumber: props.rowNumber, columnNumber: props.columnNumber, direction: ResizeDirections.ROW })] }));
+};
+//# sourceMappingURL=FlexibleDropZone.js.map

package/components/layout/FlexibleDropZone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexibleDropZone.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/layout/FlexibleDropZone.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,iCAAiC,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAgB3C;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA+B,CAAC,KAAK,EAAE,EAAE;IAClE,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,yBAAyB,aAC1C,KAAK,CAAC,QAAQ,EACf,KAAC,iBAAiB,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,MAAM,GAAI,EACvH,KAAC,iBAAiB,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,GAAG,GAAI,IAClH,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport style from \"./FlexibleDropZone.modules.scss\";\r\nimport { FlexibleResizeBar } from \"./FlexibleResizeBar\";\r\nimport { ResizeDirections } from \"./types\";\r\n\r\n/**\r\n * Arguments for the FlexibleDropZone component.\r\n */\r\nexport interface IFlexibleDropZoneProps {\r\n    /**\r\n     * The row number of the component in the layout\r\n     */\r\n    rowNumber: number;\r\n    /**\r\n     * The column number of the component in the layout\r\n     */\r\n    columnNumber: number;\r\n}\r\n\r\n/**\r\n * This component contains the drag and drop zone for the resize bars that\r\n * allow redefining width and height of layout elements\r\n */\r\nexport const FlexibleDropZone: FC<IFlexibleDropZoneProps> = (props) => {\r\n    return (\r\n        <div className={style.flexibleDropZoneContainer}>\r\n            {props.children}\r\n            <FlexibleResizeBar rowNumber={props.rowNumber} columnNumber={props.columnNumber} direction={ResizeDirections.COLUMN} />\r\n            <FlexibleResizeBar rowNumber={props.rowNumber} columnNumber={props.columnNumber} direction={ResizeDirections.ROW} />\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/layout/FlexibleGridContainer.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from "react";
+/**
+ * Arguments for the GridContainer component.
+ */
+export interface IFlexibleGridContainerProps {
+}
+/**
+ * Component responsible for mapping the layout to the actual components
+ */
+export declare const FlexibleGridContainer: FC<IFlexibleGridContainerProps>;

package/components/layout/FlexibleGridContainer.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { LayoutContext } from "./LayoutContext.js";
+import { FlexibleColumn } from "./FlexibleColumn.js";
+import { FlexibleDropZone } from "./FlexibleDropZone.js";
+import { FlexibleTabsContainer } from "./FlexibleTabsContainer.js";
+import style from "./FlexibleGridContainer.modules.scss";
+/**
+ * Component responsible for mapping the layout to the actual components
+ */
+export const FlexibleGridContainer = () => {
+    const context = useContext(LayoutContext);
+    const { layout } = context;
+    const columns = layout && layout.columns
+        ? layout.columns.map((column, columnIdx) => {
+            return (_jsx(FlexibleColumn, { width: column.width, children: column.rows.map((row, rowIdx) => {
+                    return (_jsx("div", { style: { height: row.height }, children: _jsx(FlexibleDropZone, { rowNumber: rowIdx, columnNumber: columnIdx, children: _jsx(FlexibleTabsContainer, { tabs: row.tabs, selectedTab: row.selectedTab, rowIndex: rowIdx, columnIndex: columnIdx }) }) }, row.id));
+                }) }, column.id));
+        })
+        : [];
+    return _jsx("div", { className: style.flexibleGrid, children: columns });
+};
+//# sourceMappingURL=FlexibleGridContainer.js.map

package/components/layout/FlexibleGridContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexibleGridContainer.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/layout/FlexibleGridContainer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,KAAK,MAAM,sCAAsC,CAAC;AAOzD;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAoC,GAAG,EAAE;IACvE,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;IAC3B,MAAM,OAAO,GACT,MAAM,IAAI,MAAM,CAAC,OAAO;QACpB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,SAAiB,EAAE,EAAE;YAClD,OAAO,CACH,KAAC,cAAc,IAAiB,KAAK,EAAE,MAAM,CAAC,KAAK,YAC9C,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAQ,EAAE,MAAc,EAAE,EAAE;oBAC1C,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,YAC9B,KAAC,gBAAgB,IAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,YACxD,KAAC,qBAAqB,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,GAAI,GAClG,IAHkB,GAAG,CAAC,EAAE,CAIzC,CACT,CAAC;gBACN,CAAC,CAAC,IATe,MAAM,CAAC,EAAE,CAUb,CACpB,CAAC;QACN,CAAC,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;IACb,OAAO,cAAK,SAAS,EAAE,KAAK,CAAC,YAAY,YAAG,OAAO,GAAO,CAAC;AAC/D,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useContext } from \"react\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport { FlexibleColumn } from \"./FlexibleColumn\";\r\nimport { FlexibleDropZone } from \"./FlexibleDropZone\";\r\nimport { FlexibleTabsContainer } from \"./FlexibleTabsContainer\";\r\nimport style from \"./FlexibleGridContainer.modules.scss\";\r\n\r\n/**\r\n * Arguments for the GridContainer component.\r\n */\r\nexport interface IFlexibleGridContainerProps {}\r\n\r\n/**\r\n * Component responsible for mapping the layout to the actual components\r\n */\r\nexport const FlexibleGridContainer: FC<IFlexibleGridContainerProps> = () => {\r\n    const context = useContext(LayoutContext);\r\n    const { layout } = context;\r\n    const columns =\r\n        layout && layout.columns\r\n            ? layout.columns.map((column: any, columnIdx: number) => {\r\n                  return (\r\n                      <FlexibleColumn key={column.id} width={column.width}>\r\n                          {column.rows.map((row: any, rowIdx: number) => {\r\n                              return (\r\n                                  <div style={{ height: row.height }} key={row.id}>\r\n                                      <FlexibleDropZone rowNumber={rowIdx} columnNumber={columnIdx}>\r\n                                          <FlexibleTabsContainer tabs={row.tabs} selectedTab={row.selectedTab} rowIndex={rowIdx} columnIndex={columnIdx} />\r\n                                      </FlexibleDropZone>\r\n                                  </div>\r\n                              );\r\n                          })}\r\n                      </FlexibleColumn>\r\n                  );\r\n              })\r\n            : [];\r\n    return <div className={style.flexibleGrid}>{columns}</div>;\r\n};\r\n"]}

package/components/layout/FlexibleGridLayout.d.ts

@@ -0,0 +1,16 @@
+import type { FC } from "react";
+import type { Layout } from "./types";
+/**
+ * Arguments for the Layout component.
+ */
+export interface IFlexibleGridLayoutProps {
+    /**
+     * A definition of the layout which can be changed by the user
+     */
+    layoutDefinition: Layout;
+}
+/**
+ * This component represents a grid layout that can be resized and rearranged
+ * by the user.
+ */
+export declare const FlexibleGridLayout: FC<IFlexibleGridLayoutProps>;

package/components/layout/FlexibleGridLayout.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from "react";
+import { DndProvider } from "react-dnd";
+import { TouchBackend } from "react-dnd-touch-backend";
+import { FlexibleDragHandler } from "./FlexibleDragHandler.js";
+import { LayoutContext } from "./LayoutContext.js";
+import { FlexibleGridContainer } from "./FlexibleGridContainer.js";
+/**
+ * This component represents a grid layout that can be resized and rearranged
+ * by the user.
+ */
+export const FlexibleGridLayout = (props) => {
+    const [layout, setLayout] = useState(props.layoutDefinition);
+    const containerDiv = useRef(null);
+    const containerSize = useRef({ width: 0, height: 0 });
+    useEffect(() => {
+        if (containerDiv.current) {
+            containerSize.current.width = containerDiv.current.clientWidth;
+            containerSize.current.height = containerDiv.current.clientHeight;
+        }
+    }, [containerDiv]);
+    return (_jsx(DndProvider, { backend: TouchBackend, options: { enableMouseEvents: true }, children: _jsx(LayoutContext.Provider, { value: { layout, setLayout }, children: _jsx(FlexibleDragHandler, { containerSize: containerSize.current, children: _jsx("div", { style: { width: "100%", height: "100%" }, ref: containerDiv, children: _jsx(FlexibleGridContainer, {}) }) }) }) }));
+};
+//# sourceMappingURL=FlexibleGridLayout.js.map

package/components/layout/FlexibleGridLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexibleGridLayout.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/layout/FlexibleGridLayout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAahE;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAiC,CAAC,KAAK,EAAE,EAAE;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAC7D,MAAM,YAAY,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAC5D,MAAM,aAAa,GAAG,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,YAAY,CAAC,OAAO,EAAE;YACtB,aAAa,CAAC,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC;YAC/D,aAAa,CAAC,OAAO,CAAC,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC;SACpE;IACL,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACH,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,YACpE,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,YAChD,KAAC,mBAAmB,IAAC,aAAa,EAAE,aAAa,CAAC,OAAO,YACrD,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,YAAY,YAC5D,KAAC,qBAAqB,KAAG,GACvB,GACY,GACD,GACf,CACjB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useRef, useEffect, useState } from \"react\";\r\nimport type { Nullable } from \"core/types\";\r\nimport { DndProvider } from \"react-dnd\";\r\nimport { TouchBackend } from \"react-dnd-touch-backend\";\r\nimport { FlexibleDragHandler } from \"./FlexibleDragHandler\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport { FlexibleGridContainer } from \"./FlexibleGridContainer\";\r\nimport type { Layout } from \"./types\";\r\n\r\n/**\r\n * Arguments for the Layout component.\r\n */\r\nexport interface IFlexibleGridLayoutProps {\r\n    /**\r\n     * A definition of the layout which can be changed by the user\r\n     */\r\n    layoutDefinition: Layout;\r\n}\r\n\r\n/**\r\n * This component represents a grid layout that can be resized and rearranged\r\n * by the user.\r\n */\r\nexport const FlexibleGridLayout: FC<IFlexibleGridLayoutProps> = (props) => {\r\n    const [layout, setLayout] = useState(props.layoutDefinition);\r\n    const containerDiv = useRef<Nullable<HTMLDivElement>>(null);\r\n    const containerSize = useRef({ width: 0, height: 0 });\r\n\r\n    useEffect(() => {\r\n        if (containerDiv.current) {\r\n            containerSize.current.width = containerDiv.current.clientWidth;\r\n            containerSize.current.height = containerDiv.current.clientHeight;\r\n        }\r\n    }, [containerDiv]);\r\n\r\n    return (\r\n        <DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>\r\n            <LayoutContext.Provider value={{ layout, setLayout }}>\r\n                <FlexibleDragHandler containerSize={containerSize.current}>\r\n                    <div style={{ width: \"100%\", height: \"100%\" }} ref={containerDiv}>\r\n                        <FlexibleGridContainer />\r\n                    </div>\r\n                </FlexibleDragHandler>\r\n            </LayoutContext.Provider>\r\n        </DndProvider>\r\n    );\r\n};\r\n"]}

package/components/layout/FlexibleResizeBar.d.ts

@@ -0,0 +1,40 @@
+import type { FC } from "react";
+import { ResizeDirections } from "./types";
+/**
+ * Arguments for the ResizeBar component.
+ */
+export interface IFlexibleRowResizerProps {
+    /**
+     * Row number of the component that is being resized
+     */
+    rowNumber: number;
+    /**
+     * Column number of the component being resized
+     */
+    columnNumber: number;
+    /**
+     * If the resizing happens in row or column direction
+     */
+    direction: ResizeDirections;
+}
+/**
+ * The item that will be sent to the drag event
+ */
+export declare type ResizeItem = {
+    /**
+     * If the resizing happens in row or column direction
+     */
+    direction: ResizeDirections;
+    /**
+     * The row number of the component that is being resized
+     */
+    rowNumber: number;
+    /**
+     * the column number of the component being resized
+     */
+    columnNumber: number;
+};
+/**
+ * A component that renders a bar that the user can drag to resize.
+ */
+export declare const FlexibleResizeBar: FC<IFlexibleRowResizerProps>;

package/components/layout/FlexibleResizeBar.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDrag } from "react-dnd";
+import { ResizeDirections, ElementTypes } from "./types.js";
+import { ClassNames } from "../classNames.js";
+import style from "./FlexibleResizeBar.modules.scss";
+/**
+ * A component that renders a bar that the user can drag to resize.
+ */
+export const FlexibleResizeBar = (props) => {
+    const [_, drag] = useDrag(() => ({
+        type: ElementTypes.RESIZE_BAR,
+        item: { direction: props.direction, rowNumber: props.rowNumber, columnNumber: props.columnNumber },
+        collect(monitor) {
+            return {
+                isDragging: !!monitor.isDragging(),
+            };
+        },
+    }));
+    return (_jsx("div", { className: ClassNames({ rowDragHandler: props.direction === ResizeDirections.ROW, columnDragHandler: props.direction === ResizeDirections.COLUMN }, style), ref: drag }));
+};
+//# sourceMappingURL=FlexibleResizeBar.js.map

package/components/layout/FlexibleResizeBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexibleResizeBar.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/layout/FlexibleResizeBar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,MAAM,kCAAkC,CAAC;AAsCrD;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAiC,CAAC,KAAK,EAAE,EAAE;IACrE,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7B,IAAI,EAAE,YAAY,CAAC,UAAU;QAC7B,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE;QAClG,OAAO,CAAC,OAAO;YACX,OAAO;gBACH,UAAU,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;aACrC,CAAC;QACN,CAAC;KACJ,CAAC,CAAC,CAAC;IACJ,OAAO,CACH,cACI,SAAS,EAAE,UAAU,CAAC,EAAE,cAAc,EAAE,KAAK,CAAC,SAAS,KAAK,gBAAgB,CAAC,GAAG,EAAE,iBAAiB,EAAE,KAAK,CAAC,SAAS,KAAK,gBAAgB,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,EAC1J,GAAG,EAAE,IAAI,GACX,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport { ResizeDirections, ElementTypes } from \"./types\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport style from \"./FlexibleResizeBar.modules.scss\";\r\n\r\n/**\r\n * Arguments for the ResizeBar component.\r\n */\r\nexport interface IFlexibleRowResizerProps {\r\n    /**\r\n     * Row number of the component that is being resized\r\n     */\r\n    rowNumber: number;\r\n    /**\r\n     * Column number of the component being resized\r\n     */\r\n    columnNumber: number;\r\n    /**\r\n     * If the resizing happens in row or column direction\r\n     */\r\n    direction: ResizeDirections;\r\n}\r\n\r\n/**\r\n * The item that will be sent to the drag event\r\n */\r\nexport type ResizeItem = {\r\n    /**\r\n     * If the resizing happens in row or column direction\r\n     */\r\n    direction: ResizeDirections;\r\n    /**\r\n     * The row number of the component that is being resized\r\n     */\r\n    rowNumber: number;\r\n    /**\r\n     * the column number of the component being resized\r\n     */\r\n    columnNumber: number;\r\n};\r\n\r\n/**\r\n * A component that renders a bar that the user can drag to resize.\r\n */\r\nexport const FlexibleResizeBar: FC<IFlexibleRowResizerProps> = (props) => {\r\n    const [_, drag] = useDrag(() => ({\r\n        type: ElementTypes.RESIZE_BAR,\r\n        item: { direction: props.direction, rowNumber: props.rowNumber, columnNumber: props.columnNumber },\r\n        collect(monitor) {\r\n            return {\r\n                isDragging: !!monitor.isDragging(),\r\n            };\r\n        },\r\n    }));\r\n    return (\r\n        <div\r\n            className={ClassNames({ rowDragHandler: props.direction === ResizeDirections.ROW, columnDragHandler: props.direction === ResizeDirections.COLUMN }, style)}\r\n            ref={drag}\r\n        />\r\n    );\r\n};\r\n"]}

package/components/layout/FlexibleTab.d.ts

@@ -0,0 +1,34 @@
+import type { FC } from "react";
+import type { TabDrag } from "./types";
+/**
+ * Arguments for the FlexibleTab component.
+ */
+export interface IFlexibleTabProps {
+    /**
+     * The tab's title.
+     */
+    title: string;
+    /**
+     * If the tab is currently selected or not
+     */
+    selected: boolean;
+    /**
+     * What happens when the user clicks on the tab
+     */
+    onClick: () => void;
+    /**
+     * The object that will be sent to the drag event
+     */
+    item: TabDrag;
+    /**
+     * What happens when the user drops another tab after this one
+     */
+    onTabDroppedAction: (item: TabDrag) => void;
+}
+/**
+ * A component that renders a tab that the user can click
+ * to activate or drag to reorder. It also listens for
+ * drop events if the user wants to drop another tab
+ * after it.
+ */
+export declare const FlexibleTab: FC<IFlexibleTabProps>;

package/components/layout/FlexibleTab.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDrag, useDrop } from "react-dnd";
+import { ClassNames } from "../classNames.js";
+import { ElementTypes } from "./types.js";
+import style from "./FlexibleTab.modules.scss";
+/**
+ * A component that renders a tab that the user can click
+ * to activate or drag to reorder. It also listens for
+ * drop events if the user wants to drop another tab
+ * after it.
+ */
+export const FlexibleTab = (props) => {
+    const [{ isDragging }, drag] = useDrag(() => ({
+        type: ElementTypes.TAB,
+        item: props.item,
+        collect(monitor) {
+            return {
+                isDragging: !!monitor.isDragging(),
+            };
+        },
+    }), [props.item]);
+    const [{ isOver, canDrop }, drop] = useDrop(() => ({
+        accept: ElementTypes.TAB,
+        drop: (item, monitor) => {
+            props.onTabDroppedAction(item);
+        },
+        collect(monitor) {
+            return {
+                isOver: !!monitor.isOver(),
+                canDrop: !!monitor.canDrop(),
+            };
+        },
+    }), [props.onTabDroppedAction]);
+    return (_jsxs("div", { className: ClassNames({ tab: true, tabSelected: props.selected, tabGrabbed: isDragging, tabNormal: !props.selected && !isDragging }, style), children: [_jsx("div", { ref: drag, className: style.tabText, onClick: props.onClick, children: props.title }), _jsx("div", { className: ClassNames({ dropZone: true, dropZoneCanDrop: canDrop }, style), ref: drop }), _jsx("div", { className: ClassNames({ dropBarIndicator: true, dropBarIndicatorOver: isOver }, style) })] }));
+};
+//# sourceMappingURL=FlexibleTab.js.map

package/components/layout/FlexibleTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexibleTab.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/layout/FlexibleTab.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,OAAO,KAAK,MAAM,4BAA4B,CAAC;AA4B/C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAA0B,CAAC,KAAK,EAAE,EAAE;IACxD,MAAM,CAAC,EAAE,UAAU,EAAE,EAAE,IAAI,CAAC,GAAG,OAAO,CAClC,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,YAAY,CAAC,GAAG;QACtB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,OAAO,CAAC,OAAO;YACX,OAAO;gBACH,UAAU,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;aACrC,CAAC;QACN,CAAC;KACJ,CAAC,EACF,CAAC,KAAK,CAAC,IAAI,CAAC,CACf,CAAC;IAEF,MAAM,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,GAAG,OAAO,CACvC,GAAG,EAAE,CAAC,CAAC;QACH,MAAM,EAAE,YAAY,CAAC,GAAG;QACxB,IAAI,EAAE,CAAC,IAAS,EAAE,OAAO,EAAE,EAAE;YACzB,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC;QACD,OAAO,CAAC,OAAO;YACX,OAAO;gBACH,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE;gBAC1B,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE;aAC/B,CAAC;QACN,CAAC;KACJ,CAAC,EACF,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAC7B,CAAC;IACF,OAAO,CACH,eAAK,SAAS,EAAE,UAAU,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,CAAC,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,CAAC,aAC5I,cAAK,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,YAC3D,KAAK,CAAC,KAAK,GACV,EACN,cAAK,SAAS,EAAE,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,IAAI,GAAQ,EAClG,cAAK,SAAS,EAAE,UAAU,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,oBAAoB,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,GAAQ,IACjG,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useDrag, useDrop } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { ElementTypes } from \"./types\";\r\nimport type { TabDrag } from \"./types\";\r\nimport style from \"./FlexibleTab.modules.scss\";\r\n\r\n/**\r\n * Arguments for the FlexibleTab component.\r\n */\r\nexport interface IFlexibleTabProps {\r\n    /**\r\n     * The tab's title.\r\n     */\r\n    title: string;\r\n    /**\r\n     * If the tab is currently selected or not\r\n     */\r\n    selected: boolean;\r\n    /**\r\n     * What happens when the user clicks on the tab\r\n     */\r\n    onClick: () => void;\r\n    /**\r\n     * The object that will be sent to the drag event\r\n     */\r\n    item: TabDrag;\r\n    /**\r\n     * What happens when the user drops another tab after this one\r\n     */\r\n    onTabDroppedAction: (item: TabDrag) => void;\r\n}\r\n\r\n/**\r\n * A component that renders a tab that the user can click\r\n * to activate or drag to reorder. It also listens for\r\n * drop events if the user wants to drop another tab\r\n * after it.\r\n */\r\nexport const FlexibleTab: FC<IFlexibleTabProps> = (props) => {\r\n    const [{ isDragging }, drag] = useDrag(\r\n        () => ({\r\n            type: ElementTypes.TAB,\r\n            item: props.item,\r\n            collect(monitor) {\r\n                return {\r\n                    isDragging: !!monitor.isDragging(),\r\n                };\r\n            },\r\n        }),\r\n        [props.item]\r\n    );\r\n\r\n    const [{ isOver, canDrop }, drop] = useDrop(\r\n        () => ({\r\n            accept: ElementTypes.TAB,\r\n            drop: (item: any, monitor) => {\r\n                props.onTabDroppedAction(item);\r\n            },\r\n            collect(monitor) {\r\n                return {\r\n                    isOver: !!monitor.isOver(),\r\n                    canDrop: !!monitor.canDrop(),\r\n                };\r\n            },\r\n        }),\r\n        [props.onTabDroppedAction]\r\n    );\r\n    return (\r\n        <div className={ClassNames({ tab: true, tabSelected: props.selected, tabGrabbed: isDragging, tabNormal: !props.selected && !isDragging }, style)}>\r\n            <div ref={drag} className={style.tabText} onClick={props.onClick}>\r\n                {props.title}\r\n            </div>\r\n            <div className={ClassNames({ dropZone: true, dropZoneCanDrop: canDrop }, style)} ref={drop}></div>\r\n            <div className={ClassNames({ dropBarIndicator: true, dropBarIndicatorOver: isOver }, style)}></div>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/layout/FlexibleTabsContainer.d.ts

@@ -0,0 +1,28 @@
+import type { FC } from "react";
+import type { LayoutTab } from "./types";
+/**
+ * Arguments for the TabsContainer component.
+ */
+export interface IFlexibleTabsContainerProps {
+    /**
+     * The tabs to display
+     */
+    tabs: LayoutTab[];
+    /**
+     * Row index of component in layout
+     */
+    rowIndex: number;
+    /**
+     * Column index of component in layout
+     */
+    columnIndex: number;
+    /**
+     * Which tab is selected in the layout
+     */
+    selectedTab?: string;
+}
+/**
+ * This component contains a set of tabs of which only one is visible at a time.
+ * The tabs can also be dragged from and to different containers.
+ */
+export declare const FlexibleTabsContainer: FC<IFlexibleTabsContainerProps>;