@addsign/moje-agenda-shared-lib 2.0.75 → 2.0.76

package/dist/components/layout/CollapsibleSection.d.ts

@@ -3,9 +3,10 @@ interface CollapsibleSectionProps {
     title: string;
     expanded?: boolean;
     children: React.ReactNode;
+    onToggle?: (expanded: boolean) => void;
     className?: string;
     classNameEnvelope?: string;
     classNameTitle?: string;
 }
-declare const CollapsibleSection: ({ title, expanded, children, className, classNameEnvelope, classNameTitle, }: CollapsibleSectionProps) => import("react/jsx-runtime").JSX.Element;
+declare const CollapsibleSection: ({ title, expanded, children, onToggle, className, classNameEnvelope, classNameTitle, }: CollapsibleSectionProps) => import("react/jsx-runtime").JSX.Element;
 export default CollapsibleSection;

package/dist/components/layout/CollapsibleSection.js

@@ -1,16 +1,25 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { M as MdExpandLess, a as MdExpandMore } from "../../index-CrfjcbOs.js";
 import { cn } from "../../utils/utils.js";
 const CollapsibleSection = ({
   title,
   expanded = true,
   children,
+  onToggle,
   className,
   classNameEnvelope,
   classNameTitle
 }) => {
   const [isExpanded, setIsExpanded] = useState(expanded);
+  const isInitialMount = useRef(true);
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    onToggle == null ? void 0 : onToggle(isExpanded);
+  }, [isExpanded, onToggle]);
   return /* @__PURE__ */ jsxs("div", { className: cn("rounded-md shadow-lg border", classNameEnvelope), children: [
     /* @__PURE__ */ jsxs(
       "div",

package/dist/components/layout/CollapsibleSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleSection.js","sources":["../../../lib/components/layout/CollapsibleSection.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { MdExpandLess, MdExpandMore } from \"react-icons/md\";\nimport { cn } from \"../../utils/utils\";\n\ninterface CollapsibleSectionProps {\n  title: string;\n  expanded?: boolean;\n  children: React.ReactNode;\n\n  className?: string;\n  classNameEnvelope?: string;\n  classNameTitle?: string;\n}\n\nconst CollapsibleSection = ({\n  title,\n  expanded = true,\n  children,\n  className,\n  classNameEnvelope,\n  classNameTitle,\n}: CollapsibleSectionProps) => {\n  const [isExpanded, setIsExpanded] = useState(expanded);\n\n  return (\n    <div className={cn(\"rounded-md shadow-lg border\", classNameEnvelope)}>\n      <div\n        className={cn(\n          \"w-full justify-between border-b hover:bg-muted flex py-4 px-5 items-center cursor-pointer\",\n          classNameTitle\n        )}\n        onClick={() => setIsExpanded((prev) => !prev)}\n      >\n        <div className=\"font-medium text-lg\">{title}</div>\n        <div>\n          {isExpanded ? (\n            <MdExpandLess size={\"24px\"} className=\"text-gray-600\" />\n          ) : (\n            <MdExpandMore size={\"24px\"} className=\"text-gray-600\" />\n          )}\n        </div>\n      </div>\n      {isExpanded && <div className={cn(\"p-5\", className)}>{children}</div>}\n    </div>\n  );\n};\n\nexport default CollapsibleSection;\n"],"names":[],"mappings":";;;;AAcA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA+B;AAC7B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,QAAQ;AAErD,8BACG,OAAI,EAAA,WAAW,GAAG,+BAA+B,iBAAiB,GACjE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAS,MAAM,cAAc,CAAC,SAAS,CAAC,IAAI;AAAA,QAE5C,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAU,uBAAuB,UAAM,OAAA;AAAA,8BAC3C,OACE,EAAA,UAAA,aACE,oBAAA,cAAA,EAAa,MAAM,QAAQ,WAAU,iBAAgB,wBAErD,cAAa,EAAA,MAAM,QAAQ,WAAU,gBAAgB,CAAA,GAE1D;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACC,kCAAe,OAAI,EAAA,WAAW,GAAG,OAAO,SAAS,GAAI,UAAS;AAAA,EACjE,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"CollapsibleSection.js","sources":["../../../lib/components/layout/CollapsibleSection.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { MdExpandLess, MdExpandMore } from \"react-icons/md\";\nimport { cn } from \"../../utils/utils\";\n\ninterface CollapsibleSectionProps {\n  title: string;\n  expanded?: boolean;\n  children: React.ReactNode;\n  onToggle?: (expanded: boolean) => void;\n\n  className?: string;\n  classNameEnvelope?: string;\n  classNameTitle?: string;\n}\n\nconst CollapsibleSection = ({\n  title,\n  expanded = true,\n  children,\n  onToggle,\n  className,\n  classNameEnvelope,\n  classNameTitle,\n}: CollapsibleSectionProps) => {\n  const [isExpanded, setIsExpanded] = useState(expanded);\n  const isInitialMount = useRef(true);\n\n  useEffect(() => {\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n      return;\n    }\n    onToggle?.(isExpanded);\n  }, [isExpanded, onToggle]);\n\n  return (\n    <div className={cn(\"rounded-md shadow-lg border\", classNameEnvelope)}>\n      <div\n        className={cn(\n          \"w-full justify-between border-b hover:bg-muted flex py-4 px-5 items-center cursor-pointer\",\n          classNameTitle\n        )}\n        onClick={() => setIsExpanded((prev) => !prev)}\n      >\n        <div className=\"font-medium text-lg\">{title}</div>\n        <div>\n          {isExpanded ? (\n            <MdExpandLess size={\"24px\"} className=\"text-gray-600\" />\n          ) : (\n            <MdExpandMore size={\"24px\"} className=\"text-gray-600\" />\n          )}\n        </div>\n      </div>\n      {isExpanded && <div className={cn(\"p-5\", className)}>{children}</div>}\n    </div>\n  );\n};\n\nexport default CollapsibleSection;\n"],"names":[],"mappings":";;;;AAeA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA+B;AAC7B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,QAAQ;AAC/C,QAAA,iBAAiB,OAAO,IAAI;AAElC,YAAU,MAAM;AACd,QAAI,eAAe,SAAS;AAC1B,qBAAe,UAAU;AACzB;AAAA,IACF;AACA,yCAAW;AAAA,EAAU,GACpB,CAAC,YAAY,QAAQ,CAAC;AAEzB,8BACG,OAAI,EAAA,WAAW,GAAG,+BAA+B,iBAAiB,GACjE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAS,MAAM,cAAc,CAAC,SAAS,CAAC,IAAI;AAAA,QAE5C,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAU,uBAAuB,UAAM,OAAA;AAAA,8BAC3C,OACE,EAAA,UAAA,aACE,oBAAA,cAAA,EAAa,MAAM,QAAQ,WAAU,iBAAgB,wBAErD,cAAa,EAAA,MAAM,QAAQ,WAAU,gBAAgB,CAAA,GAE1D;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACC,kCAAe,OAAI,EAAA,WAAW,GAAG,OAAO,SAAS,GAAI,UAAS;AAAA,EACjE,EAAA,CAAA;AAEJ;"}

package/lib/components/layout/CollapsibleSection.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { MdExpandLess, MdExpandMore } from "react-icons/md";
 import { cn } from "../../utils/utils";
 
@@ -6,6 +6,7 @@ interface CollapsibleSectionProps {
   title: string;
   expanded?: boolean;
   children: React.ReactNode;
+  onToggle?: (expanded: boolean) => void;
 
   className?: string;
   classNameEnvelope?: string;
@@ -16,11 +17,21 @@ const CollapsibleSection = ({
   title,
   expanded = true,
   children,
+  onToggle,
   className,
   classNameEnvelope,
   classNameTitle,
 }: CollapsibleSectionProps) => {
   const [isExpanded, setIsExpanded] = useState(expanded);
+  const isInitialMount = useRef(true);
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    onToggle?.(isExpanded);
+  }, [isExpanded, onToggle]);
 
   return (
     <div className={cn("rounded-md shadow-lg border", classNameEnvelope)}>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@addsign/moje-agenda-shared-lib",
   "private": false,
-  "version": "2.0.75",
+  "version": "2.0.76",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",