cloudmr-ux 1.0.5 → 1.0.6

package/dist/index.css

@@ -141,6 +141,11 @@
   background-color: #dcbfea !important;
 }
 
+/* src/CmrComponents/collapse/Collapse.css */
+.collapse-bar {
+  margin-bottom: 4px;
+}
+
 /* src/CmrTable/CmrTable.css */
 .css-1lymaxv-MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within,
 .css-1lymaxv-MuiDataGrid-root .MuiDataGrid-cell:focus-within {

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ButtonProps } from '@mui/material';
-import React, { ChangeEvent, CSSProperties, FC } from 'react';
+import React, { ChangeEvent, ReactNode, CSSProperties, FC } from 'react';
 import { SizeType } from 'antd/lib/config-provider/SizeContext';
+import { CollapsibleType } from 'antd/es/collapse/CollapsePanel';
+import { ExpandIconPosition } from 'antd/es/collapse/Collapse';
 import { DataGridProps } from '@mui/x-data-grid';
 
 declare const CmrButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
@@ -56,6 +58,31 @@ interface CmrSelectProps {
 }
 declare const CmrSelect: React.FC<CmrSelectProps>;
 
+interface CmrCollapseProps {
+    accordion?: boolean;
+    activeKey?: Array<string | number> | number;
+    bordered?: boolean;
+    collapsible?: CollapsibleType;
+    defaultActiveKey?: Array<string | number>;
+    destroyInactivePanel?: boolean;
+    expandIconPosition?: ExpandIconPosition;
+    ghost?: boolean;
+    onChange?: (key: Array<string | number> | number) => void;
+    children?: JSX.Element[] | JSX.Element;
+}
+declare const CmrCollapse: (props: CmrCollapseProps) => react_jsx_runtime.JSX.Element;
+
+interface CmrPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    activeKey?: string | string[];
+    header: string | undefined;
+    children: ReactNode;
+    panelKey?: number;
+    onToggle?: (key: number | undefined) => void;
+    expanded?: boolean;
+    cardProps?: React.HTMLAttributes<HTMLDivElement>;
+}
+declare const CmrPanel: (props: CmrPanelProps) => react_jsx_runtime.JSX.Element;
+
 interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
     dataSource: any[];
     idAlias?: string;
@@ -66,4 +93,4 @@ interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
 
 declare const CmrTable: FC<CmrTableProps>;
 
-export { CmrButton, CmrCheckbox, CmrInput, CmrRadioGroup, CmrSelect, CmrTable, CmrTableProps };
+export { CmrButton, CmrCheckbox, CmrCollapse, CmrInput, CmrPanel, CmrRadioGroup, CmrSelect, CmrTable, CmrTableProps };

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -22,7 +32,9 @@ var src_exports = {};
 __export(src_exports, {
   CmrButton: () => CmrButton,
   CmrCheckbox: () => CmrCheckbox,
+  CmrCollapse: () => Collapse_default,
   CmrInput: () => CmrInput,
+  CmrPanel: () => Panel_default,
   CmrRadioGroup: () => CmrRadioGroup_default,
   CmrSelect: () => CmrSelect_default,
   CmrTable: () => CmrTable2
@@ -174,9 +186,113 @@ var CmrSelect = ({ options, label, disabled }) => {
 };
 var CmrSelect_default = CmrSelect;
 
+// src/CmrComponents/collapse/Collapse.tsx
+var import_react3 = __toESM(require("react"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var CmrCollapse = (props) => {
+  let { activeKey, defaultActiveKey, onChange, children } = props;
+  defaultActiveKey = defaultActiveKey || [];
+  const [activeKeys, setActiveKeys] = import_react3.default.useState(defaultActiveKey);
+  import_react3.default.useEffect(() => {
+    if (activeKey !== void 0 && activeKey !== activeKeys) {
+      if (Array.isArray(activeKey)) {
+        setActiveKeys(activeKey);
+      } else {
+        setActiveKeys([activeKey]);
+      }
+    }
+  }, [activeKey]);
+  const onToggle = (key) => {
+    const newKeys = [...activeKeys];
+    const keyIndex = newKeys.indexOf(key);
+    if (keyIndex === -1) {
+      newKeys.push(key);
+    } else {
+      newKeys.splice(keyIndex, 1);
+    }
+    setActiveKeys(newKeys);
+    if (onChange)
+      onChange(newKeys);
+  };
+  const renderChildren = () => {
+    if (!children)
+      return null;
+    if (Array.isArray(children)) {
+      return children.map((child, index) => {
+        const panelKey = index;
+        const expanded = activeKeys.includes(panelKey);
+        const header = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { onClick: () => onToggle(panelKey), style: { cursor: "pointer" }, children: child.props.header });
+        return (0, import_react3.cloneElement)(child, {
+          expanded,
+          panelKey,
+          onToggle,
+          header
+          // Override header with clickable version
+        });
+      });
+    } else {
+      const panelKey = 0;
+      const expanded = activeKeys.includes(panelKey);
+      const header = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { onClick: () => onToggle(panelKey), style: { cursor: "pointer" }, children: children.props.header });
+      return (0, import_react3.cloneElement)(children, {
+        expanded,
+        panelKey,
+        onToggle,
+        header
+        // Override header with clickable version
+      });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cmr-collapse", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: renderChildren() }) });
+};
+var Collapse_default = CmrCollapse;
+
+// src/CmrComponents/panel/Panel.tsx
+var import_ArrowDropUp = __toESM(require("@mui/icons-material/ArrowDropUp"));
+var import_ArrowDropDown = __toESM(require("@mui/icons-material/ArrowDropDown"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var CmrPanel = function(props) {
+  var _a, _b;
+  let { expanded, onToggle } = props;
+  const toggle = () => {
+    if (onToggle)
+      onToggle(props.panelKey);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `card ${props.className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "card-header", style: { background: "white", display: props.header == void 0 ? "none" : void 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "row align-items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "col", children: props.header }),
+      onToggle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "col text-end", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "span",
+        {
+          className: "react-collapse float-end btn",
+          onClick: (e) => {
+            toggle();
+          },
+          children: !expanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ArrowDropDown.default, {}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ArrowDropUp.default, {})
+        }
+      ) })
+    ] }) }),
+    !expanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `card-body m-0 ${(_a = props.cardProps) == null ? void 0 : _a.className}`, style: {
+      maxHeight: "0",
+      padding: 0,
+      opacity: "0",
+      overflow: "hidden",
+      visibility: "collapse",
+      transition: "all 0.5s"
+    }, children: props.children }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `card-body m-4 ${(_b = props.cardProps) == null ? void 0 : _b.className}`, style: {
+      maxHeight: void 0,
+      padding: 0,
+      opacity: "1",
+      visibility: "visible",
+      transition: "all 0.5s"
+    }, children: props.children })
+  ] });
+};
+var Panel_default = CmrPanel;
+
 // src/CmrTable/CmrTable.tsx
 var import_x_data_grid = require("@mui/x-data-grid");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var CmrTable = (props) => {
   const {
     dataSource,
@@ -188,7 +304,7 @@ var CmrTable = (props) => {
     showCheckbox = true,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_x_data_grid.DataGrid,
     {
       rows: dataSource ? dataSource.map((row) => ({
@@ -216,7 +332,9 @@ var CmrTable2 = CmrTable_default;
 0 && (module.exports = {
   CmrButton,
   CmrCheckbox,
+  CmrCollapse,
   CmrInput,
+  CmrPanel,
   CmrRadioGroup,
   CmrSelect,
   CmrTable

package/dist/index.mjs

@@ -149,9 +149,113 @@ var CmrSelect = ({ options, label, disabled }) => {
 };
 var CmrSelect_default = CmrSelect;
 
+// src/CmrComponents/collapse/Collapse.tsx
+import React3, { cloneElement } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var CmrCollapse = (props) => {
+  let { activeKey, defaultActiveKey, onChange, children } = props;
+  defaultActiveKey = defaultActiveKey || [];
+  const [activeKeys, setActiveKeys] = React3.useState(defaultActiveKey);
+  React3.useEffect(() => {
+    if (activeKey !== void 0 && activeKey !== activeKeys) {
+      if (Array.isArray(activeKey)) {
+        setActiveKeys(activeKey);
+      } else {
+        setActiveKeys([activeKey]);
+      }
+    }
+  }, [activeKey]);
+  const onToggle = (key) => {
+    const newKeys = [...activeKeys];
+    const keyIndex = newKeys.indexOf(key);
+    if (keyIndex === -1) {
+      newKeys.push(key);
+    } else {
+      newKeys.splice(keyIndex, 1);
+    }
+    setActiveKeys(newKeys);
+    if (onChange)
+      onChange(newKeys);
+  };
+  const renderChildren = () => {
+    if (!children)
+      return null;
+    if (Array.isArray(children)) {
+      return children.map((child, index) => {
+        const panelKey = index;
+        const expanded = activeKeys.includes(panelKey);
+        const header = /* @__PURE__ */ jsx6("div", { onClick: () => onToggle(panelKey), style: { cursor: "pointer" }, children: child.props.header });
+        return cloneElement(child, {
+          expanded,
+          panelKey,
+          onToggle,
+          header
+          // Override header with clickable version
+        });
+      });
+    } else {
+      const panelKey = 0;
+      const expanded = activeKeys.includes(panelKey);
+      const header = /* @__PURE__ */ jsx6("div", { onClick: () => onToggle(panelKey), style: { cursor: "pointer" }, children: children.props.header });
+      return cloneElement(children, {
+        expanded,
+        panelKey,
+        onToggle,
+        header
+        // Override header with clickable version
+      });
+    }
+  };
+  return /* @__PURE__ */ jsx6("div", { className: "cmr-collapse", children: /* @__PURE__ */ jsx6("div", { children: renderChildren() }) });
+};
+var Collapse_default = CmrCollapse;
+
+// src/CmrComponents/panel/Panel.tsx
+import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var CmrPanel = function(props) {
+  var _a, _b;
+  let { expanded, onToggle } = props;
+  const toggle = () => {
+    if (onToggle)
+      onToggle(props.panelKey);
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: `card ${props.className}`, children: [
+    /* @__PURE__ */ jsx7("div", { className: "card-header", style: { background: "white", display: props.header == void 0 ? "none" : void 0 }, children: /* @__PURE__ */ jsxs3("div", { className: "row align-items-center", children: [
+      /* @__PURE__ */ jsx7("div", { className: "col", children: props.header }),
+      onToggle && /* @__PURE__ */ jsx7("div", { className: "col text-end", children: /* @__PURE__ */ jsx7(
+        "span",
+        {
+          className: "react-collapse float-end btn",
+          onClick: (e) => {
+            toggle();
+          },
+          children: !expanded ? /* @__PURE__ */ jsx7(ArrowDropDownIcon, {}) : /* @__PURE__ */ jsx7(ArrowDropUpIcon, {})
+        }
+      ) })
+    ] }) }),
+    !expanded ? /* @__PURE__ */ jsx7("div", { className: `card-body m-0 ${(_a = props.cardProps) == null ? void 0 : _a.className}`, style: {
+      maxHeight: "0",
+      padding: 0,
+      opacity: "0",
+      overflow: "hidden",
+      visibility: "collapse",
+      transition: "all 0.5s"
+    }, children: props.children }) : /* @__PURE__ */ jsx7("div", { className: `card-body m-4 ${(_b = props.cardProps) == null ? void 0 : _b.className}`, style: {
+      maxHeight: void 0,
+      padding: 0,
+      opacity: "1",
+      visibility: "visible",
+      transition: "all 0.5s"
+    }, children: props.children })
+  ] });
+};
+var Panel_default = CmrPanel;
+
 // src/CmrTable/CmrTable.tsx
 import { DataGrid } from "@mui/x-data-grid";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var CmrTable = (props) => {
   const {
     dataSource,
@@ -163,7 +267,7 @@ var CmrTable = (props) => {
     showCheckbox = true,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx6("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx8("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx8(
     DataGrid,
     {
       rows: dataSource ? dataSource.map((row) => ({
@@ -190,7 +294,9 @@ var CmrTable2 = CmrTable_default;
 export {
   CmrButton,
   CmrCheckbox,
+  Collapse_default as CmrCollapse,
   CmrInput,
+  Panel_default as CmrPanel,
   CmrRadioGroup_default as CmrRadioGroup,
   CmrSelect_default as CmrSelect,
   CmrTable2 as CmrTable

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudmr-ux",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",