cloudmr-ux 1.0.4 → 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,68 +1,96 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ButtonProps } from '@mui/material';
-import React, { ChangeEvent, CSSProperties } 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;
 
-interface CmrCheckboxProps extends React.HTMLAttributes<HTMLDivElement> {
-    autoFocus?: boolean;
-    checked?: boolean;
-    defaultChecked?: boolean;
-    disabled?: boolean;
-    indeterminate?: boolean;
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    children?: any;
-    style?: any;
-}
+interface CmrCheckboxProps extends React.HTMLAttributes<HTMLDivElement> {
+    autoFocus?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    children?: any;
+    style?: any;
+}
 declare const CmrCheckbox: (props: CmrCheckboxProps) => react_jsx_runtime.JSX.Element;
 
-interface CmrInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
-    defaultValue?: string;
-    id?: string;
-    maxLength?: number;
-    size?: SizeType;
-    value?: string;
-    type?: any;
-    prefix?: React.ReactNode;
-    bordered?: boolean;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-}
+interface CmrInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
+    defaultValue?: string;
+    id?: string;
+    maxLength?: number;
+    size?: SizeType;
+    value?: string;
+    type?: any;
+    prefix?: React.ReactNode;
+    bordered?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}
 declare const CmrInput: (props: CmrInputProps) => react_jsx_runtime.JSX.Element;
 
-interface CmrRadioOption {
-    label: string;
-    value: string;
-    disabled?: boolean;
-}
-interface CmrRadioProps {
-    options: CmrRadioOption[];
-    groupLabel?: string;
-    defaultValue?: string;
-    onChange?: (value: string) => void;
-}
+interface CmrRadioOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface CmrRadioProps {
+    options: CmrRadioOption[];
+    groupLabel?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+}
 declare const CmrRadioGroup: React.FC<CmrRadioProps>;
 
-interface Option {
-    label: string;
-    value: string;
-}
-interface CmrSelectProps {
-    options: Option[];
-    label: string;
-    disabled?: boolean;
-}
+interface Option {
+    label: string;
+    value: string;
+}
+interface CmrSelectProps {
+    options: Option[];
+    label: string;
+    disabled?: boolean;
+}
 declare const CmrSelect: React.FC<CmrSelectProps>;
 
-interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
-    dataSource: any[];
-    idAlias?: string;
-    name?: string;
-    style?: CSSProperties;
-    showCheckbox?: boolean;
+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;
+    name?: string;
+    style?: CSSProperties;
+    showCheckbox?: boolean;
 }
-declare const CmrTable: (props: CmrTableProps) => react_jsx_runtime.JSX.Element;
 
-export { CmrButton, CmrCheckbox, CmrInput, CmrRadioGroup, CmrSelect, CmrTable };
+declare const CmrTable: FC<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,10 +32,12 @@ 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: () => CmrTable_default
+  CmrTable: () => CmrTable2
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -174,15 +186,131 @@ 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, columns, idAlias, className, onRowSelectionModelChange, style, showCheckbox = true, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: style ? style : { height: "400px", width: "100%" }, className: `${className ? className : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const {
+    dataSource,
+    columns,
+    idAlias,
+    className,
+    onRowSelectionModelChange,
+    style,
+    showCheckbox = true,
+    ...rest
+  } = props;
+  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) => ({ id: idAlias ? row[idAlias] : row["id"], ...row })) : [],
+      rows: dataSource ? dataSource.map((row) => ({
+        id: idAlias ? row[idAlias] : row["id"],
+        ...row
+      })) : [],
       columns,
       checkboxSelection: showCheckbox,
       onRowSelectionModelChange,
@@ -197,11 +325,16 @@ var CmrTable = (props) => {
   ) });
 };
 var CmrTable_default = CmrTable;
+
+// src/index.ts
+var CmrTable2 = CmrTable_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CmrButton,
   CmrCheckbox,
+  CmrCollapse,
   CmrInput,
+  CmrPanel,
   CmrRadioGroup,
   CmrSelect,
   CmrTable

package/dist/index.mjs

@@ -149,15 +149,131 @@ 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, columns, idAlias, className, onRowSelectionModelChange, style, showCheckbox = true, ...rest } = props;
-  return /* @__PURE__ */ jsx6("div", { style: style ? style : { height: "400px", width: "100%" }, className: `${className ? className : ""}`, children: /* @__PURE__ */ jsx6(
+  const {
+    dataSource,
+    columns,
+    idAlias,
+    className,
+    onRowSelectionModelChange,
+    style,
+    showCheckbox = true,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx8("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx8(
     DataGrid,
     {
-      rows: dataSource ? dataSource.map((row) => ({ id: idAlias ? row[idAlias] : row["id"], ...row })) : [],
+      rows: dataSource ? dataSource.map((row) => ({
+        id: idAlias ? row[idAlias] : row["id"],
+        ...row
+      })) : [],
       columns,
       checkboxSelection: showCheckbox,
       onRowSelectionModelChange,
@@ -172,11 +288,16 @@ var CmrTable = (props) => {
   ) });
 };
 var CmrTable_default = CmrTable;
+
+// src/index.ts
+var CmrTable2 = CmrTable_default;
 export {
   CmrButton,
   CmrCheckbox,
+  Collapse_default as CmrCollapse,
   CmrInput,
+  Panel_default as CmrPanel,
   CmrRadioGroup_default as CmrRadioGroup,
   CmrSelect_default as CmrSelect,
-  CmrTable_default as CmrTable
+  CmrTable2 as CmrTable
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudmr-ux",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",
@@ -22,7 +22,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "tsup": "^6.7.0",
-    "typescript": "^5.6.3"
+    "typescript": "^4.9.5"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",