@m4l/components 0.0.0 → 0.0.1

package/dist/components/SplitLayout/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SplitLayoutProps } from './types';
+export declare function SplitLayout(props: SplitLayoutProps): JSX.Element;

package/dist/components/SplitLayout/index.js

@@ -0,0 +1,130 @@
+import { S as SplitterLayout } from "../../react-splitter-layout.js";
+import { styled } from "@mui/material/styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+const WrapperSplit = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "relative",
+  flexGrow: 1,
+  overflow: "hidden",
+  "& .splitter-layout": {
+    position: "absolute",
+    display: "flex",
+    flexDirection: "row",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden"
+  },
+  "& .splitter-layout .layout-pane": {
+    position: "relative",
+    flex: "0 0 auto",
+    overflow: "auto"
+  },
+  "& .splitter-layout .layout-pane.layout-pane-primary": {
+    flex: "1 1 auto"
+  },
+  "& .splitter-layout.layout-changing": {
+    cursor: "col-resize"
+  },
+  "& .splitter-layout > .layout-splitter": {
+    display: "flex",
+    alignItems: "center",
+    backgroundColor: theme.palette.divider,
+    zIndex: "1",
+    boxSizing: "border-box",
+    backgroundClip: "padding-box",
+    width: "11px",
+    margin: "0 5px",
+    borderLeft: "5px solid hsla(0, 0%, 100%, 0)",
+    borderRight: "5px solid hsla(0, 0%, 100%, 0)",
+    cursor: "col-resize",
+    justifyContent: "center",
+    height: "100%"
+  },
+  "& .splitter-layout .layout-splitter:before": {
+    content: `""`,
+    height: "45px",
+    width: "4px",
+    top: "calc(50% - 22.5px)",
+    position: "absolute",
+    background: theme.palette.grey[500],
+    borderRadius: "6px"
+  },
+  "& .splitter-layout > .layout-splitter:hover": {
+    borderLeft: `5px solid ${theme.palette.grey[5008]}`,
+    borderRight: `5px solid ${theme.palette.grey[5008]}`
+  },
+  "& .splitter-layout.splitter-layout-vertical.layout-changing": {
+    cursor: "row-resize"
+  },
+  "& .splitter-layout.splitter-layout-vertical > .layout-splitter": {
+    height: "11px !important",
+    width: "100% !important",
+    margin: "5px 0",
+    borderTop: "5px solid hsla(0, 0%, 100%, 0)",
+    borderBottom: "5px solid hsla(0, 0%, 100%, 0)",
+    cursor: "row-resize"
+  },
+  "& .splitter-layout.splitter-layout-vertical .layout-splitter:before": {
+    width: "45px !important",
+    height: "4px !important",
+    left: "calc(50% - 22.5px)",
+    top: "unset"
+  },
+  "& .splitter-layout > .layout-splitter:hover:before, .splitter-layout.layout-changing >  .layout-splitter:before": {
+    background: theme.palette.primary.main
+  },
+  "& .splitter-layout.splitter-layout-vertical": {
+    flexDirection: "column"
+  },
+  "& .splitter-layout.splitter-layout-vertical > .layout-splitter:hover": {
+    borderTop: `5px solid ${theme.palette.grey[5008]}`,
+    borderBottom: `5px solid ${theme.palette.grey[5008]}`
+  }
+}));
+const SplitMaster = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  overflow: "hidden"
+}));
+const SplitDetail = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  position: "absolute",
+  left: "0px",
+  right: "0px",
+  top: "0px",
+  bottom: "0px"
+}));
+function SplitLayout(props) {
+  const {
+    splitPosition,
+    firstPart,
+    secondPart,
+    secondParrtInitialSize = 50,
+    percentage = true
+  } = props;
+  return /* @__PURE__ */ jsx(WrapperSplit, {
+    id: "WrapperSplit",
+    className: `split_${splitPosition}`,
+    children: /* @__PURE__ */ jsxs(SplitterLayout, {
+      vertical: splitPosition === "vertical",
+      percentage,
+      secondaryInitialSize: secondParrtInitialSize,
+      children: [/* @__PURE__ */ jsx(SplitMaster, {
+        id: "splitMaster",
+        children: typeof firstPart === "function" ? firstPart() : firstPart
+      }), splitPosition !== "none" && /* @__PURE__ */ jsx(SplitDetail, {
+        id: "detail",
+        children: typeof secondPart === "function" ? secondPart() : secondPart
+      })]
+    })
+  });
+}
+export { SplitLayout as S };

package/dist/components/SplitLayout/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const WrapperSplit: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SplitMaster: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SplitDetail: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/SplitLayout/types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export declare type SplitPosition = 'vertical' | 'horizontal' | 'none';
+export interface SplitLayoutProps {
+    splitPosition: SplitPosition;
+    percentage?: boolean;
+    secondParrtInitialSize?: number;
+    firstPart: ((props?: any) => JSX.Element) | ReactNode;
+    secondPart: ((props?: any) => JSX.Element) | ReactNode;
+}

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../components/mui_extended';
+export * from '../components/SplitLayout';

package/dist/components/mui_extended/MenuActions/styles.d.ts

@@ -26,5 +26,5 @@ export declare const WrapperMenuActions: import("@emotion/styled").StyledCompone
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "tabIndex" | "disabled" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "color" | "sx" | "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "disabled" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const LabelMemuItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/index.d.ts

@@ -1 +1 @@
-export * from './components/mui_extended';
+export * from './components';

package/dist/index.js

@@ -1,11 +1,15 @@
+export { B as BoxIcon } from "./components/mui_extended/BoxIcon/index.js";
+export { M as MenuPopover } from "./components/mui_extended/MenuPopover/index.js";
+export { B as Breadcrumbs } from "./components/mui_extended/Breadcrumbs/index.js";
+export { M as MenuActions } from "./components/mui_extended/MenuActions/index.js";
+export { S as SplitLayout } from "./components/SplitLayout/index.js";
 import "@mui/material/Box";
 import "react/jsx-runtime";
-export { M as MenuPopover } from "./components/mui_extended/MenuPopover/index.js";
+import "@mui/material/styles";
+import "@mui/material";
 import "react";
 import "@m4l/core";
-import "@mui/material";
 import "react-router-dom";
-export { M as MenuActions } from "./components/mui_extended/MenuActions/index.js";
-export { B as BoxIcon } from "./components/mui_extended/BoxIcon/index.js";
-export { B as Breadcrumbs } from "./components/mui_extended/Breadcrumbs/index.js";
-import "@mui/material/styles";
+import "./react-splitter-layout.js";
+import "./vendor.js";
+import "prop-types";

package/dist/react-splitter-layout.js

@@ -0,0 +1,165 @@
+import { g as getDefaultExportFromCjs } from "./vendor.js";
+import require$$0 from "prop-types";
+import require$$1 from "react";
+var lib = { exports: {} };
+(function(module, exports) {
+  !function(e, t) {
+    module.exports = t(require$$0, require$$1);
+  }(window, function(e, t) {
+    return function(e2) {
+      var t2 = {};
+      function n(o) {
+        if (t2[o])
+          return t2[o].exports;
+        var r = t2[o] = { i: o, l: false, exports: {} };
+        return e2[o].call(r.exports, r, r.exports, n), r.l = true, r.exports;
+      }
+      return n.m = e2, n.c = t2, n.d = function(e3, t3, o) {
+        n.o(e3, t3) || Object.defineProperty(e3, t3, { enumerable: true, get: o });
+      }, n.r = function(e3) {
+        typeof Symbol != "undefined" && Symbol.toStringTag && Object.defineProperty(e3, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e3, "__esModule", { value: true });
+      }, n.t = function(e3, t3) {
+        if (1 & t3 && (e3 = n(e3)), 8 & t3)
+          return e3;
+        if (4 & t3 && typeof e3 == "object" && e3 && e3.__esModule)
+          return e3;
+        var o = /* @__PURE__ */ Object.create(null);
+        if (n.r(o), Object.defineProperty(o, "default", { enumerable: true, value: e3 }), 2 & t3 && typeof e3 != "string")
+          for (var r in e3)
+            n.d(o, r, function(t4) {
+              return e3[t4];
+            }.bind(null, r));
+        return o;
+      }, n.n = function(e3) {
+        var t3 = e3 && e3.__esModule ? function() {
+          return e3.default;
+        } : function() {
+          return e3;
+        };
+        return n.d(t3, "a", t3), t3;
+      }, n.o = function(e3, t3) {
+        return Object.prototype.hasOwnProperty.call(e3, t3);
+      }, n.p = "", n(n.s = 2);
+    }([function(t2, n) {
+      t2.exports = e;
+    }, function(e2, n) {
+      e2.exports = t;
+    }, function(e2, t2, n) {
+      e2.exports = n(3);
+    }, function(e2, t2, n) {
+      n.r(t2);
+      var o = n(1), r = n.n(o), i = n(0), a = n.n(i);
+      function s(e3) {
+        var t3 = e3.size || 0, n2 = e3.percentage ? "%" : "px", o2 = "layout-pane", i2 = {};
+        return e3.primary ? o2 += " layout-pane-primary" : e3.vertical ? i2.height = "".concat(t3).concat(n2) : i2.width = "".concat(t3).concat(n2), r.a.createElement("div", { className: o2, style: i2 }, e3.children);
+      }
+      s.propTypes = { vertical: a.a.bool, primary: a.a.bool, size: a.a.number, percentage: a.a.bool, children: a.a.oneOfType([a.a.arrayOf(a.a.node), a.a.node]) }, s.defaultProps = { vertical: false, primary: false, size: 0, percentage: false, children: [] };
+      var c = s;
+      function l(e3) {
+        return (l = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e4) {
+          return typeof e4;
+        } : function(e4) {
+          return e4 && typeof Symbol == "function" && e4.constructor === Symbol && e4 !== Symbol.prototype ? "symbol" : typeof e4;
+        })(e3);
+      }
+      function u(e3, t3) {
+        for (var n2 = 0; n2 < t3.length; n2++) {
+          var o2 = t3[n2];
+          o2.enumerable = o2.enumerable || false, o2.configurable = true, "value" in o2 && (o2.writable = true), Object.defineProperty(e3, o2.key, o2);
+        }
+      }
+      function p(e3) {
+        return (p = Object.setPrototypeOf ? Object.getPrototypeOf : function(e4) {
+          return e4.__proto__ || Object.getPrototypeOf(e4);
+        })(e3);
+      }
+      function d(e3, t3) {
+        return (d = Object.setPrototypeOf || function(e4, t4) {
+          return e4.__proto__ = t4, e4;
+        })(e3, t3);
+      }
+      function h(e3) {
+        if (e3 === void 0)
+          throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+        return e3;
+      }
+      function f() {
+        if (document.body.createTextRange) {
+          var e3 = document.body.createTextRange();
+          e3.collapse(), e3.select();
+        } else
+          window.getSelection ? window.getSelection().empty ? window.getSelection().empty() : window.getSelection().removeAllRanges && window.getSelection().removeAllRanges() : document.selection && document.selection.empty();
+      }
+      var y = function(e3) {
+        function t3(e4) {
+          var n3, o3, r2;
+          return function(e5, t4) {
+            if (!(e5 instanceof t4))
+              throw new TypeError("Cannot call a class as a function");
+          }(this, t3), o3 = this, (n3 = !(r2 = p(t3).call(this, e4)) || l(r2) !== "object" && typeof r2 != "function" ? h(o3) : r2).handleResize = n3.handleResize.bind(h(h(n3))), n3.handleMouseMove = n3.handleMouseMove.bind(h(h(n3))), n3.handleMouseUp = n3.handleMouseUp.bind(h(h(n3))), n3.handleTouchMove = n3.handleTouchMove.bind(h(h(n3))), n3.handleSplitterMouseDown = n3.handleSplitterMouseDown.bind(h(h(n3))), n3.state = { secondaryPaneSize: 0, resizing: false }, n3;
+        }
+        var n2, o2;
+        return function(e4, t4) {
+          if (typeof t4 != "function" && t4 !== null)
+            throw new TypeError("Super expression must either be null or a function");
+          e4.prototype = Object.create(t4 && t4.prototype, { constructor: { value: e4, writable: true, configurable: true } }), t4 && d(e4, t4);
+        }(t3, r.a.Component), n2 = t3, (o2 = [{ key: "componentDidMount", value: function() {
+          var e4;
+          if (window.addEventListener("resize", this.handleResize), document.addEventListener("mouseup", this.handleMouseUp), document.addEventListener("mousemove", this.handleMouseMove), document.addEventListener("touchend", this.handleMouseUp), document.addEventListener("touchmove", this.handleTouchMove), this.props.secondaryInitialSize !== void 0)
+            e4 = this.props.secondaryInitialSize;
+          else {
+            var t4, n3 = this.container.getBoundingClientRect();
+            t4 = this.splitter ? this.splitter.getBoundingClientRect() : { width: 4, height: 4 }, e4 = this.getSecondaryPaneSize(n3, t4, { left: n3.left + (n3.width - t4.width) / 2, top: n3.top + (n3.height - t4.height) / 2 }, false);
+          }
+          this.setState({ secondaryPaneSize: e4 });
+        } }, { key: "componentDidUpdate", value: function(e4, t4) {
+          t4.secondaryPaneSize !== this.state.secondaryPaneSize && this.props.onSecondaryPaneSizeChange && this.props.onSecondaryPaneSizeChange(this.state.secondaryPaneSize), t4.resizing !== this.state.resizing && (this.state.resizing ? this.props.onDragStart && this.props.onDragStart() : this.props.onDragEnd && this.props.onDragEnd());
+        } }, { key: "componentWillUnmount", value: function() {
+          window.removeEventListener("resize", this.handleResize), document.removeEventListener("mouseup", this.handleMouseUp), document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("touchend", this.handleMouseUp), document.removeEventListener("touchmove", this.handleTouchMove);
+        } }, { key: "getSecondaryPaneSize", value: function(e4, t4, n3, o3) {
+          var r2, i2, a2, s2;
+          this.props.vertical ? (r2 = e4.height, i2 = t4.height, a2 = n3.top - e4.top) : (r2 = e4.width, i2 = t4.width, a2 = n3.left - e4.left), o3 && (a2 -= i2 / 2), a2 < 0 ? a2 = 0 : a2 > r2 - i2 && (a2 = r2 - i2);
+          var c2 = r2 - i2 - (s2 = this.props.primaryIndex === 1 ? a2 : r2 - i2 - a2);
+          return this.props.percentage && (s2 = 100 * s2 / r2, c2 = 100 * c2 / r2, i2 = 100 * i2 / r2, r2 = 100), c2 < this.props.primaryMinSize ? s2 = Math.max(s2 - (this.props.primaryMinSize - c2), 0) : s2 < this.props.secondaryMinSize && (s2 = Math.min(r2 - i2 - this.props.primaryMinSize, this.props.secondaryMinSize)), s2;
+        } }, { key: "handleResize", value: function() {
+          if (this.splitter && !this.props.percentage) {
+            var e4 = this.container.getBoundingClientRect(), t4 = this.splitter.getBoundingClientRect(), n3 = this.getSecondaryPaneSize(e4, t4, { left: t4.left, top: t4.top }, false);
+            this.setState({ secondaryPaneSize: n3 });
+          }
+        } }, { key: "handleMouseMove", value: function(e4) {
+          if (this.state.resizing) {
+            var t4 = this.container.getBoundingClientRect(), n3 = this.splitter.getBoundingClientRect(), o3 = this.getSecondaryPaneSize(t4, n3, { left: e4.clientX, top: e4.clientY }, true);
+            f(), this.setState({ secondaryPaneSize: o3 });
+          }
+        } }, { key: "handleTouchMove", value: function(e4) {
+          this.handleMouseMove(e4.changedTouches[0]);
+        } }, { key: "handleSplitterMouseDown", value: function() {
+          f(), this.setState({ resizing: true });
+        } }, { key: "handleMouseUp", value: function() {
+          this.setState(function(e4) {
+            return e4.resizing ? { resizing: false } : null;
+          });
+        } }, { key: "render", value: function() {
+          var e4 = this, t4 = "splitter-layout";
+          this.props.customClassName && (t4 += " ".concat(this.props.customClassName)), this.props.vertical && (t4 += " splitter-layout-vertical"), this.state.resizing && (t4 += " layout-changing");
+          var n3 = r.a.Children.toArray(this.props.children).slice(0, 2);
+          n3.length === 0 && n3.push(r.a.createElement("div", null));
+          for (var o3 = [], i2 = this.props.primaryIndex !== 0 && this.props.primaryIndex !== 1 ? 0 : this.props.primaryIndex, a2 = 0; a2 < n3.length; ++a2) {
+            var s2 = true, l2 = null;
+            n3.length > 1 && a2 !== i2 && (s2 = false, l2 = this.state.secondaryPaneSize), o3.push(r.a.createElement(c, { vertical: this.props.vertical, percentage: this.props.percentage, primary: s2, size: l2 }, n3[a2]));
+          }
+          return r.a.createElement("div", { className: t4, ref: function(t5) {
+            e4.container = t5;
+          } }, o3[0], o3.length > 1 && r.a.createElement("div", { role: "separator", className: "layout-splitter", ref: function(t5) {
+            e4.splitter = t5;
+          }, onMouseDown: this.handleSplitterMouseDown, onTouchStart: this.handleSplitterMouseDown }), o3.length > 1 && o3[1]);
+        } }]) && u(n2.prototype, o2), t3;
+      }();
+      y.propTypes = { customClassName: a.a.string, vertical: a.a.bool, percentage: a.a.bool, primaryIndex: a.a.number, primaryMinSize: a.a.number, secondaryInitialSize: a.a.number, secondaryMinSize: a.a.number, onDragStart: a.a.func, onDragEnd: a.a.func, onSecondaryPaneSizeChange: a.a.func, children: a.a.arrayOf(a.a.node) }, y.defaultProps = { customClassName: "", vertical: false, percentage: false, primaryIndex: 0, primaryMinSize: 0, secondaryInitialSize: void 0, secondaryMinSize: 0, onDragStart: null, onDragEnd: null, onSecondaryPaneSizeChange: null, children: [] };
+      var m = y;
+      t2.default = m;
+    }]);
+  });
+})(lib);
+const SplitterLayout = /* @__PURE__ */ getDefaultExportFromCjs(lib.exports);
+export { SplitterLayout as S };

package/dist/vendor.js

@@ -0,0 +1,17 @@
+import "@mui/material/Box";
+import "react/jsx-runtime";
+import "./components/mui_extended/MenuPopover/index.js";
+import "react";
+import "@m4l/core";
+import "@mui/material";
+import "react-router-dom";
+import "./components/mui_extended/MenuActions/index.js";
+import "prop-types";
+import "./react-splitter-layout.js";
+import "./components/SplitLayout/index.js";
+import "./components/mui_extended/BoxIcon/index.js";
+import "./components/mui_extended/Breadcrumbs/index.js";
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+export { getDefaultExportFromCjs as g };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@m4l/components",
   "private": false,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "license": "UNLICENSED",
   "scripts": {
     "dev": "vite",
@@ -20,9 +20,10 @@
   "peerDependencies": {
     "@m4l/core": "^0.0.26",
     "@mui/material": "^5.8.7",
+    "prop-types": "^15.8.1",
     "react": "^17.0.0 || 18.x",
     "react-dom": "^18.0.0",
-    "react-router-dom":"^6.3.0"
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
     "@emotion/styled": "^11.9.3",
@@ -34,6 +35,7 @@
     "@types/node": "^17.0.40",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "@types/react-splitter-layout": "^3.0.2",
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",
     "@vitejs/plugin-react": "^1.3.2",
@@ -47,6 +49,8 @@
     "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "prettier": "^2.6.2",
+    "prop-types": "^15.8.1",
+    "react-splitter-layout": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "^4.6.3",
     "vite": "^2.9.9",