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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/layout/CollapsibleSection.d.ts +3 -2
  2. package/dist/components/layout/CollapsibleSection.js +13 -3
  3. package/dist/components/layout/CollapsibleSection.js.map +1 -1
  4. package/lib/components/layout/CollapsibleSection.tsx +15 -3
  5. package/package.json +1 -1
package/dist/components/layout/CollapsibleSection.d.ts CHANGED
@@ -1,11 +1,12 @@
1
1
  /// <reference types="react" />
2
- interface CollapsibleSectionProps {
2
+ interface CollapsibleSectionProps extends React.HTMLAttributes<HTMLDivElement> {
3
3
  title: string;
4
4
  expanded?: boolean;
5
5
  children: React.ReactNode;
6
+ onToggle?: (expanded: boolean) => void;
6
7
  className?: string;
7
8
  classNameEnvelope?: string;
8
9
  classNameTitle?: string;
9
10
  }
10
- declare const CollapsibleSection: ({ title, expanded, children, className, classNameEnvelope, classNameTitle, }: CollapsibleSectionProps) => import("react/jsx-runtime").JSX.Element;
11
+ declare const CollapsibleSection: ({ title, expanded, children, onToggle, className, classNameEnvelope, classNameTitle, ...rest }: CollapsibleSectionProps) => import("react/jsx-runtime").JSX.Element;
11
12
  export default CollapsibleSection;
package/dist/components/layout/CollapsibleSection.js CHANGED
@@ -1,17 +1,27 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
- import { useState } from "react";
2
+ import { useState, useRef, useEffect } from "react";
3
3
  import { M as MdExpandLess, a as MdExpandMore } from "../../index-CrfjcbOs.js";
4
4
  import { cn } from "../../utils/utils.js";
5
5
  const CollapsibleSection = ({
6
6
  title,
7
7
  expanded = true,
8
8
  children,
9
+ onToggle,
9
10
  className,
10
11
  classNameEnvelope,
11
- classNameTitle
12
+ classNameTitle,
13
+ ...rest
12
14
  }) => {
13
15
  const [isExpanded, setIsExpanded] = useState(expanded);
14
- return /* @__PURE__ */ jsxs("div", { className: cn("rounded-md shadow-lg border", classNameEnvelope), children: [
16
+ const isInitialMount = useRef(true);
17
+ useEffect(() => {
18
+ if (isInitialMount.current) {
19
+ isInitialMount.current = false;
20
+ return;
21
+ }
22
+ onToggle == null ? void 0 : onToggle(isExpanded);
23
+ }, [isExpanded, onToggle]);
24
+ return /* @__PURE__ */ jsxs("div", { className: cn("rounded-md shadow-lg border", classNameEnvelope), ...rest, children: [
15
25
  /* @__PURE__ */ jsxs(
16
26
  "div",
17
27
  {
package/dist/components/layout/CollapsibleSection.js.map CHANGED
@@ -1 +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;"}
1
+ {"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 extends React.HTMLAttributes<HTMLDivElement> {\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 ...rest\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)} {...rest}>\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;AAAA,EACA,GAAG;AACL,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;AAGvB,SAAA,qBAAC,SAAI,WAAW,GAAG,+BAA+B,iBAAiB,GAAI,GAAG,MACxE,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 CHANGED
@@ -1,11 +1,12 @@
1
- import { useState } from "react";
1
+ import { useEffect, useRef, useState } from "react";
2
2
  import { MdExpandLess, MdExpandMore } from "react-icons/md";
3
3
  import { cn } from "../../utils/utils";
4
4
 
5
- interface CollapsibleSectionProps {
5
+ interface CollapsibleSectionProps extends React.HTMLAttributes<HTMLDivElement> {
6
6
  title: string;
7
7
  expanded?: boolean;
8
8
  children: React.ReactNode;
9
+ onToggle?: (expanded: boolean) => void;
9
10
 
10
11
  className?: string;
11
12
  classNameEnvelope?: string;
@@ -16,14 +17,25 @@ const CollapsibleSection = ({
16
17
  title,
17
18
  expanded = true,
18
19
  children,
20
+ onToggle,
19
21
  className,
20
22
  classNameEnvelope,
21
23
  classNameTitle,
24
+ ...rest
22
25
  }: CollapsibleSectionProps) => {
23
26
  const [isExpanded, setIsExpanded] = useState(expanded);
27
+ const isInitialMount = useRef(true);
28
+
29
+ useEffect(() => {
30
+ if (isInitialMount.current) {
31
+ isInitialMount.current = false;
32
+ return;
33
+ }
34
+ onToggle?.(isExpanded);
35
+ }, [isExpanded, onToggle]);
24
36
 
25
37
  return (
26
- <div className={cn("rounded-md shadow-lg border", classNameEnvelope)}>
38
+ <div className={cn("rounded-md shadow-lg border", classNameEnvelope)} {...rest}>
27
39
  <div
28
40
  className={cn(
29
41
  "w-full justify-between border-b hover:bg-muted flex py-4 px-5 items-center cursor-pointer",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@addsign/moje-agenda-shared-lib",
3
3
  "private": false,
4
- "version": "2.0.75",
4
+ "version": "2.0.77",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",