@chayns-components/core 5.0.0-beta.49 → 5.0.0-beta.490

package/README.md

@@ -26,25 +26,9 @@ yarn add @chayns-components/core
 ```
 
 > **Information:** Since the components have now been implemented with the styled-components
-> library, the styles are delivered directly with the components. There is no need to load an
-> extra stylesheet anymore.
+> library, the styles are delivered directly with the components. There is no need to load an extra
+> stylesheet anymore.
 
 ## Usage
 
-You can use the components in your project as in the following example.
-
-```typescript jsx
-import { Button } from '@chayns-components/core';
-
-const handleButtonClick: MouseEventHandler<HTMLButtonElement> = (event) => {
-    // Your code
-};
-
-<Button onClick={handleButtonClick}>
-    Click me!
-</Button>
-```
-
-## Components Overview
-
-`coming soon`
+For detailed usage visit the [storybook](https://components.chayns.site/storybook).

package/lib/api/image/post.d.ts

@@ -0,0 +1,14 @@
+import type { Meta } from '../../types/file';
+export interface PostImageResult {
+    key: string;
+    base: string;
+    meta?: Meta;
+}
+interface PostImageOptions {
+    file: File;
+}
+/**
+ * Uploads an image to the tsimg cloud service
+ */
+export declare const postImage: ({ file, }: PostImageOptions) => Promise<PostImageResult | undefined>;
+export {};

package/lib/api/image/post.js

@@ -0,0 +1,33 @@
+import { getAccessToken, getUser } from 'chayns-api';
+import { getFileAsArrayBuffer } from '../../utils/fileDialog';
+/**
+ * Uploads an image to the tsimg cloud service
+ */
+export const postImage = async _ref => {
+  let {
+    file
+  } = _ref;
+  const {
+    accessToken
+  } = await getAccessToken();
+  const user = getUser();
+  if (!accessToken || !user?.personId) {
+    return undefined;
+  }
+  const body = await getFileAsArrayBuffer(file);
+  const response = await fetch('https://api.tsimg.cloud/image', {
+    body,
+    headers: {
+      Accept: 'application/json',
+      Authorization: `bearer ${accessToken}`,
+      'Content-Type': 'image/*',
+      'X-Person-Id': user.personId
+    },
+    method: 'POST'
+  });
+  if (response.ok) {
+    return await response.json();
+  }
+  throw Error(`Failed to POST image (status code: ${response.status}).`);
+};
+//# sourceMappingURL=post.js.map

package/lib/api/image/post.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post.js","names":["getAccessToken","getUser","getFileAsArrayBuffer","postImage","_ref","file","accessToken","user","personId","undefined","body","response","fetch","headers","Accept","Authorization","method","ok","json","Error","status"],"sources":["../../../src/api/image/post.ts"],"sourcesContent":["import { getAccessToken, getUser } from 'chayns-api';\nimport type { Meta } from '../../types/file';\nimport { getFileAsArrayBuffer } from '../../utils/fileDialog';\n\nexport interface PostImageResult {\n    key: string;\n    base: string;\n    meta?: Meta;\n}\n\ninterface PostImageOptions {\n    file: File;\n}\n\n/**\n * Uploads an image to the tsimg cloud service\n */\nexport const postImage = async ({\n    file,\n}: PostImageOptions): Promise<PostImageResult | undefined> => {\n    const { accessToken } = await getAccessToken();\n    const user = getUser();\n\n    if (!accessToken || !user?.personId) {\n        return undefined;\n    }\n\n    const body = await getFileAsArrayBuffer(file);\n\n    const response = await fetch('https://api.tsimg.cloud/image', {\n        body,\n        headers: {\n            Accept: 'application/json',\n            Authorization: `bearer ${accessToken}`,\n            'Content-Type': 'image/*',\n            'X-Person-Id': user.personId,\n        },\n        method: 'POST',\n    });\n\n    if (response.ok) {\n        return (await response.json()) as PostImageResult;\n    }\n\n    throw Error(`Failed to POST image (status code: ${response.status}).`);\n};\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,OAAO,QAAQ,YAAY;AAEpD,SAASC,oBAAoB,QAAQ,wBAAwB;AAY7D;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAG,MAAAC,IAAA,IAEqC;EAAA,IAF9B;IAC5BC;EACc,CAAC,GAAAD,IAAA;EACf,MAAM;IAAEE;EAAY,CAAC,GAAG,MAAMN,cAAc,CAAC,CAAC;EAC9C,MAAMO,IAAI,GAAGN,OAAO,CAAC,CAAC;EAEtB,IAAI,CAACK,WAAW,IAAI,CAACC,IAAI,EAAEC,QAAQ,EAAE;IACjC,OAAOC,SAAS;EACpB;EAEA,MAAMC,IAAI,GAAG,MAAMR,oBAAoB,CAACG,IAAI,CAAC;EAE7C,MAAMM,QAAQ,GAAG,MAAMC,KAAK,CAAC,+BAA+B,EAAE;IAC1DF,IAAI;IACJG,OAAO,EAAE;MACLC,MAAM,EAAE,kBAAkB;MAC1BC,aAAa,EAAG,UAAST,WAAY,EAAC;MACtC,cAAc,EAAE,SAAS;MACzB,aAAa,EAAEC,IAAI,CAACC;IACxB,CAAC;IACDQ,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,OAAQ,MAAMN,QAAQ,CAACO,IAAI,CAAC,CAAC;EACjC;EAEA,MAAMC,KAAK,CAAE,sCAAqCR,QAAQ,CAACS,MAAO,IAAG,CAAC;AAC1E,CAAC"}

package/lib/api/signature/delete.d.ts

@@ -0,0 +1 @@
+export declare const deleteUserSignature: () => Promise<boolean>;

package/lib/api/signature/delete.js

@@ -0,0 +1,27 @@
+import { getAccessToken } from 'chayns-api';
+import { SIGNATURE_SERVER_URL } from '../../constants/signature';
+export const deleteUserSignature = async () => {
+  const {
+    accessToken
+  } = await getAccessToken();
+  if (!accessToken) {
+    return false;
+  }
+  try {
+    const response = await fetch(SIGNATURE_SERVER_URL, {
+      method: 'DELETE',
+      headers: {
+        accept: 'application/json',
+        authorization: `bearer ${accessToken}`
+      }
+    });
+    if (response.ok || response.status === 304) {
+      return true;
+    }
+    console.error('[chayns components] Signature: failed to delete user signature', response.status);
+  } catch (ex) {
+    console.error('[chayns components] Signature: failed to delete user signature', ex);
+  }
+  return false;
+};
+//# sourceMappingURL=delete.js.map

package/lib/api/signature/delete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"delete.js","names":["getAccessToken","SIGNATURE_SERVER_URL","deleteUserSignature","accessToken","response","fetch","method","headers","accept","authorization","ok","status","console","error","ex"],"sources":["../../../src/api/signature/delete.ts"],"sourcesContent":["import { getAccessToken } from 'chayns-api';\nimport { SIGNATURE_SERVER_URL } from '../../constants/signature';\n\nexport const deleteUserSignature = async () => {\n    const { accessToken } = await getAccessToken();\n\n    if (!accessToken) {\n        return false;\n    }\n\n    try {\n        const response = await fetch(SIGNATURE_SERVER_URL, {\n            method: 'DELETE',\n            headers: {\n                accept: 'application/json',\n                authorization: `bearer ${accessToken}`,\n            },\n        });\n\n        if (response.ok || response.status === 304) {\n            return true;\n        }\n\n        console.error(\n            '[chayns components] Signature: failed to delete user signature',\n            response.status,\n        );\n    } catch (ex) {\n        console.error('[chayns components] Signature: failed to delete user signature', ex);\n    }\n\n    return false;\n};\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,oBAAoB,QAAQ,2BAA2B;AAEhE,OAAO,MAAMC,mBAAmB,GAAG,MAAAA,CAAA,KAAY;EAC3C,MAAM;IAAEC;EAAY,CAAC,GAAG,MAAMH,cAAc,CAAC,CAAC;EAE9C,IAAI,CAACG,WAAW,EAAE;IACd,OAAO,KAAK;EAChB;EAEA,IAAI;IACA,MAAMC,QAAQ,GAAG,MAAMC,KAAK,CAACJ,oBAAoB,EAAE;MAC/CK,MAAM,EAAE,QAAQ;MAChBC,OAAO,EAAE;QACLC,MAAM,EAAE,kBAAkB;QAC1BC,aAAa,EAAG,UAASN,WAAY;MACzC;IACJ,CAAC,CAAC;IAEF,IAAIC,QAAQ,CAACM,EAAE,IAAIN,QAAQ,CAACO,MAAM,KAAK,GAAG,EAAE;MACxC,OAAO,IAAI;IACf;IAEAC,OAAO,CAACC,KAAK,CACT,gEAAgE,EAChET,QAAQ,CAACO,MACb,CAAC;EACL,CAAC,CAAC,OAAOG,EAAE,EAAE;IACTF,OAAO,CAACC,KAAK,CAAC,gEAAgE,EAAEC,EAAE,CAAC;EACvF;EAEA,OAAO,KAAK;AAChB,CAAC"}

package/lib/api/signature/get.d.ts

@@ -0,0 +1 @@
+export declare const getUserSignature: () => Promise<string | undefined>;

package/lib/api/signature/get.js

@@ -0,0 +1,33 @@
+import { getAccessToken } from 'chayns-api';
+import { SIGNATURE_SERVER_URL } from '../../constants/signature';
+export const getUserSignature = async () => {
+  const {
+    accessToken
+  } = await getAccessToken();
+  if (!accessToken) {
+    return undefined;
+  }
+  try {
+    const response = await fetch(SIGNATURE_SERVER_URL, {
+      method: 'GET',
+      headers: {
+        accept: 'application/json',
+        authorization: `bearer ${accessToken}`
+      }
+    });
+    if (response.status === 200) {
+      const {
+        value
+      } = await response.json();
+      return value;
+    }
+    if (response.status === 204) {
+      return undefined;
+    }
+    console.error('[chayns components] Signature: failed to get user signature', response.status);
+  } catch (ex) {
+    console.error('[chayns components] Signature: failed to get user signature', ex);
+  }
+  return undefined;
+};
+//# sourceMappingURL=get.js.map

package/lib/api/signature/get.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get.js","names":["getAccessToken","SIGNATURE_SERVER_URL","getUserSignature","accessToken","undefined","response","fetch","method","headers","accept","authorization","status","value","json","console","error","ex"],"sources":["../../../src/api/signature/get.ts"],"sourcesContent":["import { getAccessToken } from 'chayns-api';\nimport type { GetUserSignatureResult } from '../../types/signature';\nimport { SIGNATURE_SERVER_URL } from '../../constants/signature';\n\nexport const getUserSignature = async (): Promise<string | undefined> => {\n    const { accessToken } = await getAccessToken();\n\n    if (!accessToken) {\n        return undefined;\n    }\n\n    try {\n        const response = await fetch(SIGNATURE_SERVER_URL, {\n            method: 'GET',\n            headers: {\n                accept: 'application/json',\n                authorization: `bearer ${accessToken}`,\n            },\n        });\n\n        if (response.status === 200) {\n            const { value } = (await response.json()) as GetUserSignatureResult;\n\n            return value;\n        }\n\n        if (response.status === 204) {\n            return undefined;\n        }\n\n        console.error(\n            '[chayns components] Signature: failed to get user signature',\n            response.status,\n        );\n    } catch (ex) {\n        console.error('[chayns components] Signature: failed to get user signature', ex);\n    }\n\n    return undefined;\n};\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,YAAY;AAE3C,SAASC,oBAAoB,QAAQ,2BAA2B;AAEhE,OAAO,MAAMC,gBAAgB,GAAG,MAAAA,CAAA,KAAyC;EACrE,MAAM;IAAEC;EAAY,CAAC,GAAG,MAAMH,cAAc,CAAC,CAAC;EAE9C,IAAI,CAACG,WAAW,EAAE;IACd,OAAOC,SAAS;EACpB;EAEA,IAAI;IACA,MAAMC,QAAQ,GAAG,MAAMC,KAAK,CAACL,oBAAoB,EAAE;MAC/CM,MAAM,EAAE,KAAK;MACbC,OAAO,EAAE;QACLC,MAAM,EAAE,kBAAkB;QAC1BC,aAAa,EAAG,UAASP,WAAY;MACzC;IACJ,CAAC,CAAC;IAEF,IAAIE,QAAQ,CAACM,MAAM,KAAK,GAAG,EAAE;MACzB,MAAM;QAAEC;MAAM,CAAC,GAAI,MAAMP,QAAQ,CAACQ,IAAI,CAAC,CAA4B;MAEnE,OAAOD,KAAK;IAChB;IAEA,IAAIP,QAAQ,CAACM,MAAM,KAAK,GAAG,EAAE;MACzB,OAAOP,SAAS;IACpB;IAEAU,OAAO,CAACC,KAAK,CACT,6DAA6D,EAC7DV,QAAQ,CAACM,MACb,CAAC;EACL,CAAC,CAAC,OAAOK,EAAE,EAAE;IACTF,OAAO,CAACC,KAAK,CAAC,6DAA6D,EAAEC,EAAE,CAAC;EACpF;EAEA,OAAOZ,SAAS;AACpB,CAAC"}

package/lib/api/signature/put.d.ts

@@ -0,0 +1 @@
+export declare const putUserSignature: (dataURL: string) => Promise<boolean>;

package/lib/api/signature/put.js

@@ -0,0 +1,31 @@
+import { getAccessToken } from 'chayns-api';
+import { SIGNATURE_SERVER_URL } from '../../constants/signature';
+export const putUserSignature = async dataURL => {
+  const {
+    accessToken
+  } = await getAccessToken();
+  if (!accessToken) {
+    return false;
+  }
+  try {
+    const response = await fetch(SIGNATURE_SERVER_URL, {
+      method: 'PUT',
+      headers: {
+        accept: 'application/json',
+        authorization: `bearer ${accessToken}`,
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({
+        value: dataURL
+      })
+    });
+    if (response.ok) {
+      return true;
+    }
+    console.error('[chayns components] Signature: failed to put user signature', response.status);
+  } catch (ex) {
+    console.error('[chayns components] Signature: failed to put user signature', ex);
+  }
+  return false;
+};
+//# sourceMappingURL=put.js.map

package/lib/api/signature/put.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"put.js","names":["getAccessToken","SIGNATURE_SERVER_URL","putUserSignature","dataURL","accessToken","response","fetch","method","headers","accept","authorization","body","JSON","stringify","value","ok","console","error","status","ex"],"sources":["../../../src/api/signature/put.ts"],"sourcesContent":["import { getAccessToken } from 'chayns-api';\nimport { SIGNATURE_SERVER_URL } from '../../constants/signature';\n\nexport const putUserSignature = async (dataURL: string) => {\n    const { accessToken } = await getAccessToken();\n\n    if (!accessToken) {\n        return false;\n    }\n\n    try {\n        const response = await fetch(SIGNATURE_SERVER_URL, {\n            method: 'PUT',\n            headers: {\n                accept: 'application/json',\n                authorization: `bearer ${accessToken}`,\n                'content-type': 'application/json',\n            },\n            body: JSON.stringify({ value: dataURL }),\n        });\n\n        if (response.ok) {\n            return true;\n        }\n\n        console.error(\n            '[chayns components] Signature: failed to put user signature',\n            response.status,\n        );\n    } catch (ex) {\n        console.error('[chayns components] Signature: failed to put user signature', ex);\n    }\n\n    return false;\n};\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,oBAAoB,QAAQ,2BAA2B;AAEhE,OAAO,MAAMC,gBAAgB,GAAG,MAAOC,OAAe,IAAK;EACvD,MAAM;IAAEC;EAAY,CAAC,GAAG,MAAMJ,cAAc,CAAC,CAAC;EAE9C,IAAI,CAACI,WAAW,EAAE;IACd,OAAO,KAAK;EAChB;EAEA,IAAI;IACA,MAAMC,QAAQ,GAAG,MAAMC,KAAK,CAACL,oBAAoB,EAAE;MAC/CM,MAAM,EAAE,KAAK;MACbC,OAAO,EAAE;QACLC,MAAM,EAAE,kBAAkB;QAC1BC,aAAa,EAAG,UAASN,WAAY,EAAC;QACtC,cAAc,EAAE;MACpB,CAAC;MACDO,IAAI,EAAEC,IAAI,CAACC,SAAS,CAAC;QAAEC,KAAK,EAAEX;MAAQ,CAAC;IAC3C,CAAC,CAAC;IAEF,IAAIE,QAAQ,CAACU,EAAE,EAAE;MACb,OAAO,IAAI;IACf;IAEAC,OAAO,CAACC,KAAK,CACT,6DAA6D,EAC7DZ,QAAQ,CAACa,MACb,CAAC;EACL,CAAC,CAAC,OAAOC,EAAE,EAAE;IACTH,OAAO,CAACC,KAAK,CAAC,6DAA6D,EAAEE,EAAE,CAAC;EACpF;EAEA,OAAO,KAAK;AAChB,CAAC"}

package/lib/api/theme/get.d.ts

@@ -0,0 +1,2 @@
+import type { DesignSettings } from '../../types/colorSchemeProvider';
+export declare const getDesignSettings: () => Promise<DesignSettings | undefined>;

package/lib/api/theme/get.js

@@ -0,0 +1,14 @@
+import { getSite } from 'chayns-api';
+export const getDesignSettings = async () => {
+  const {
+    id
+  } = getSite();
+  const response = await fetch(`https://api.chayns.net/css/${id}/style/v2`, {
+    method: 'GET'
+  });
+  if (response.status === 200) {
+    return await response.json();
+  }
+  return undefined;
+};
+//# sourceMappingURL=get.js.map

package/lib/api/theme/get.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get.js","names":["getSite","getDesignSettings","id","response","fetch","method","status","json","undefined"],"sources":["../../../src/api/theme/get.ts"],"sourcesContent":["import { getSite } from 'chayns-api';\nimport type { DesignSettings } from '../../types/colorSchemeProvider';\n\nexport const getDesignSettings = async (): Promise<DesignSettings | undefined> => {\n    const { id } = getSite();\n\n    const response = await fetch(`https://api.chayns.net/css/${id}/style/v2`, {\n        method: 'GET',\n    });\n\n    if (response.status === 200) {\n        return (await response.json()) as DesignSettings;\n    }\n\n    return undefined;\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAGpC,OAAO,MAAMC,iBAAiB,GAAG,MAAAA,CAAA,KAAiD;EAC9E,MAAM;IAAEC;EAAG,CAAC,GAAGF,OAAO,CAAC,CAAC;EAExB,MAAMG,QAAQ,GAAG,MAAMC,KAAK,CAAE,8BAA6BF,EAAG,WAAU,EAAE;IACtEG,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIF,QAAQ,CAACG,MAAM,KAAK,GAAG,EAAE;IACzB,OAAQ,MAAMH,QAAQ,CAACI,IAAI,CAAC,CAAC;EACjC;EAEA,OAAOC,SAAS;AACpB,CAAC"}

package/lib/api/video/post.d.ts

@@ -0,0 +1,15 @@
+export interface PostVideoResult {
+    id: string;
+    originalVideoQuality: string;
+    thumbnailUrl: string;
+    url: string;
+    urlMP4: string;
+}
+interface PostVideoOptions {
+    file: File | Blob;
+}
+/**
+ * Uploads a video to the streaming service
+ */
+export declare const postVideo: ({ file, }: PostVideoOptions) => Promise<PostVideoResult | undefined>;
+export {};

package/lib/api/video/post.js

@@ -0,0 +1,30 @@
+import { getAccessToken } from 'chayns-api';
+/**
+ * Uploads a video to the streaming service
+ */
+export const postVideo = async _ref => {
+  let {
+    file
+  } = _ref;
+  const {
+    accessToken
+  } = await getAccessToken();
+  if (!accessToken) {
+    return undefined;
+  }
+  const formData = new FormData();
+  formData.append('files', file);
+  const response = await fetch('https://streamingservice.chayns.space/video?disableIntercom=true', {
+    body: formData,
+    headers: {
+      Authorization: `bearer ${accessToken}`
+    },
+    method: 'POST'
+  });
+  if (response.ok) {
+    const data = await response.json();
+    return data[0];
+  }
+  throw Error(`Failed to POST video (status code: ${response.status}).`);
+};
+//# sourceMappingURL=post.js.map

package/lib/api/video/post.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post.js","names":["getAccessToken","postVideo","_ref","file","accessToken","undefined","formData","FormData","append","response","fetch","body","headers","Authorization","method","ok","data","json","Error","status"],"sources":["../../../src/api/video/post.ts"],"sourcesContent":["import { getAccessToken } from 'chayns-api';\n\nexport interface PostVideoResult {\n    id: string;\n    originalVideoQuality: string;\n    thumbnailUrl: string;\n    url: string;\n    urlMP4: string;\n}\n\ninterface PostVideoOptions {\n    file: File | Blob;\n}\n\n/**\n * Uploads a video to the streaming service\n */\nexport const postVideo = async ({\n    file,\n}: PostVideoOptions): Promise<PostVideoResult | undefined> => {\n    const { accessToken } = await getAccessToken();\n\n    if (!accessToken) {\n        return undefined;\n    }\n\n    const formData = new FormData();\n\n    formData.append('files', file);\n\n    const response = await fetch(\n        'https://streamingservice.chayns.space/video?disableIntercom=true',\n        {\n            body: formData,\n            headers: {\n                Authorization: `bearer ${accessToken}`,\n            },\n            method: 'POST',\n        },\n    );\n\n    if (response.ok) {\n        const data = (await response.json()) as PostVideoResult[];\n\n        return data[0];\n    }\n\n    throw Error(`Failed to POST video (status code: ${response.status}).`);\n};\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,YAAY;AAc3C;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAG,MAAAC,IAAA,IAEqC;EAAA,IAF9B;IAC5BC;EACc,CAAC,GAAAD,IAAA;EACf,MAAM;IAAEE;EAAY,CAAC,GAAG,MAAMJ,cAAc,CAAC,CAAC;EAE9C,IAAI,CAACI,WAAW,EAAE;IACd,OAAOC,SAAS;EACpB;EAEA,MAAMC,QAAQ,GAAG,IAAIC,QAAQ,CAAC,CAAC;EAE/BD,QAAQ,CAACE,MAAM,CAAC,OAAO,EAAEL,IAAI,CAAC;EAE9B,MAAMM,QAAQ,GAAG,MAAMC,KAAK,CACxB,kEAAkE,EAClE;IACIC,IAAI,EAAEL,QAAQ;IACdM,OAAO,EAAE;MACLC,aAAa,EAAG,UAAST,WAAY;IACzC,CAAC;IACDU,MAAM,EAAE;EACZ,CACJ,CAAC;EAED,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,MAAMC,IAAI,GAAI,MAAMP,QAAQ,CAACQ,IAAI,CAAC,CAAuB;IAEzD,OAAOD,IAAI,CAAC,CAAC,CAAC;EAClB;EAEA,MAAME,KAAK,CAAE,sCAAqCT,QAAQ,CAACU,MAAO,IAAG,CAAC;AAC1E,CAAC"}

package/lib/components/accordion/Accordion.d.ts

@@ -21,7 +21,7 @@ export type AccordionProps = {
      */
     isDefaultOpen?: boolean;
     /**
-     * This will disable the Accordion so that it cannot be opened and will gray out the title.
+     * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.
      */
     isDisabled?: boolean;
     /**
@@ -30,14 +30,13 @@ export type AccordionProps = {
      */
     isFixed?: boolean;
     /**
-     * This will gray out the title of the Accordion to indicate hidden content, for example.
+     * This can be used to open the Accordion from the outside.
      */
-    isTitleGreyed?: boolean;
+    isOpened?: boolean;
     /**
-     * This value must be set for nested Accordions. This adjusts the style of
-     * the head and the padding of the content.
+     * This will gray out the title of the Accordion to indicate hidden content, for example.
      */
-    isWrapped?: boolean;
+    isTitleGreyed?: boolean;
     /**
      * Function that is executed when the accordion body will be scrolled
      */
@@ -68,10 +67,22 @@ export type AccordionProps = {
      * The placeholder to be used for the search
      */
     searchPlaceholder?: string;
+    /**
+     * The value that is displayed inside the search
+     */
+    searchValue?: string;
+    /**
+     * This will force the background color of the accordion to be used even if it is closed and not hovered.
+     */
+    shouldForceBackground?: boolean;
     /**
      * This will hide the background color of the accordion
      */
     shouldHideBackground?: boolean;
+    /**
+     * Whether the icon should be rotating.
+     */
+    shouldRotateIcon?: boolean;
     /**
      * Title of the Accordion displayed in the head
      */
@@ -80,6 +91,10 @@ export type AccordionProps = {
      * Additional elements to be displayed in the header next to the title.
      */
     titleElement?: ReactNode;
+    /**
+     * This will render the Accordion closed on the first render.
+     */
+    shouldRenderClosed?: boolean;
 };
 declare const Accordion: FC<AccordionProps>;
 export default Accordion;

package/lib/components/accordion/Accordion.js

@@ -1,24 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.AccordionContext = void 0;
-var _framerMotion = require("framer-motion");
-var _react = _interopRequireWildcard(require("react"));
-var _uuid = require("../../hooks/uuid");
-var _AccordionBody = _interopRequireDefault(require("./accordion-body/AccordionBody"));
-var _AccordionGroup = require("./accordion-group/AccordionGroup");
-var _AccordionHead = _interopRequireDefault(require("./accordion-head/AccordionHead"));
-var _Accordion = require("./Accordion.styles");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const AccordionContext = /*#__PURE__*/_react.default.createContext({
+import { AnimatePresence, MotionConfig } from 'framer-motion';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useUuid } from '../../hooks/uuid';
+import AccordionBody from './accordion-body/AccordionBody';
+import { AccordionGroupContext } from './accordion-group/AccordionGroup';
+import AccordionHead from './accordion-head/AccordionHead';
+import { StyledAccordion } from './Accordion.styles';
+export const AccordionContext = /*#__PURE__*/React.createContext({
   isWrapped: false
 });
-exports.AccordionContext = AccordionContext;
-AccordionContext.displayName = 'AccordionContext';
 const Accordion = _ref => {
   let {
     bodyMaxHeight,
@@ -27,8 +16,8 @@ const Accordion = _ref => {
     isDefaultOpen = false,
     isDisabled = false,
     isFixed = false,
+    isOpened,
     isTitleGreyed = false,
-    isWrapped = false,
     onBodyScroll,
     onClose,
     onOpen,
@@ -36,23 +25,34 @@ const Accordion = _ref => {
     rightElement,
     searchIcon,
     searchPlaceholder,
+    searchValue,
+    shouldForceBackground = false,
     shouldHideBackground = false,
+    shouldRotateIcon = true,
     title,
-    titleElement
+    titleElement,
+    shouldRenderClosed = false
   } = _ref;
   const {
+    isWrapped,
     openAccordionUuid,
     updateOpenAccordionUuid
-  } = (0, _react.useContext)(_AccordionGroup.AccordionGroupContext);
+  } = useContext(AccordionGroupContext);
   const {
     isWrapped: isParentWrapped
-  } = (0, _react.useContext)(AccordionContext);
-  const [isAccordionOpen, setIsAccordionOpen] = (0, _react.useState)(isDefaultOpen);
-  const uuid = (0, _uuid.useUuid)();
-  const isInitialRenderRef = (0, _react.useRef)(true);
+  } = useContext(AccordionContext);
+  const [isAccordionOpen, setIsAccordionOpen] = useState(isDefaultOpen ?? isOpened);
+  const uuid = useUuid();
+  const isInitialRenderRef = useRef(true);
   const isInGroup = typeof updateOpenAccordionUuid === 'function';
   const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;
-  const handleHeadClick = (0, _react.useCallback)(() => {
+  const onCloseRef = useRef(onClose);
+  const onOpenRef = useRef(onOpen);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+    onOpenRef.current = onOpen;
+  }, [onClose, onOpen]);
+  const handleHeadClick = useCallback(() => {
     if (isDisabled) {
       return;
     }
@@ -61,60 +61,84 @@ const Accordion = _ref => {
     }
     setIsAccordionOpen(currentIsAccordionOpen => !currentIsAccordionOpen);
   }, [isDisabled, updateOpenAccordionUuid, uuid]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
+    if (isDisabled && isOpen) {
+      if (typeof updateOpenAccordionUuid === 'function') {
+        updateOpenAccordionUuid(uuid);
+      }
+      setIsAccordionOpen(currentIsAccordionOpen => !currentIsAccordionOpen);
+    }
+  }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);
+  useEffect(() => {
     if (isInitialRenderRef.current) {
       isInitialRenderRef.current = false;
     } else if (isOpen) {
-      if (typeof onOpen === 'function') {
-        onOpen();
+      if (typeof onOpenRef.current === 'function') {
+        onOpenRef.current();
       }
-    } else if (typeof onClose === 'function') {
-      onClose();
+    } else if (typeof onCloseRef.current === 'function') {
+      onCloseRef.current();
     }
-  }, [isOpen, onClose, onOpen]);
-  (0, _react.useEffect)(() => {
-    if (isDefaultOpen && typeof updateOpenAccordionUuid === 'function') {
-      updateOpenAccordionUuid(uuid, {
-        shouldOnlyOpen: true
-      });
+  }, [isOpen]);
+  useEffect(() => {
+    if (isDefaultOpen) {
+      if (typeof updateOpenAccordionUuid === 'function') {
+        updateOpenAccordionUuid(uuid, {
+          shouldOnlyOpen: true
+        });
+      } else {
+        setIsAccordionOpen(true);
+      }
     }
   }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);
-  const accordionContextProviderValue = (0, _react.useMemo)(() => ({
-    isWrapped
+  useEffect(() => {
+    if (typeof isOpened === 'boolean') {
+      if (typeof updateOpenAccordionUuid === 'function' && isOpened) {
+        updateOpenAccordionUuid(uuid);
+      } else {
+        setIsAccordionOpen(isOpened);
+      }
+    }
+  }, [isOpened, updateOpenAccordionUuid, uuid]);
+  const accordionContextProviderValue = useMemo(() => ({
+    isWrapped: isWrapped === true
   }), [isWrapped]);
-  return /*#__PURE__*/_react.default.createElement(_Accordion.StyledAccordion, {
+  return /*#__PURE__*/React.createElement(StyledAccordion, {
     className: "beta-chayns-accordion",
-    isOpen: isOpen,
-    isParentWrapped: isParentWrapped,
-    isWrapped: isWrapped,
-    shouldHideBackground: shouldHideBackground
-  }, /*#__PURE__*/_react.default.createElement(AccordionContext.Provider, {
+    $isOpen: isOpen,
+    $isParentWrapped: isParentWrapped,
+    $isWrapped: isWrapped,
+    $shouldForceBackground: shouldForceBackground,
+    $shouldHideBackground: shouldHideBackground
+  }, /*#__PURE__*/React.createElement(AccordionContext.Provider, {
     value: accordionContextProviderValue
-  }, /*#__PURE__*/_react.default.createElement(_framerMotion.MotionConfig, {
+  }, /*#__PURE__*/React.createElement(MotionConfig, {
     transition: {
       type: 'tween'
     }
-  }, /*#__PURE__*/_react.default.createElement(_AccordionHead.default, {
+  }, /*#__PURE__*/React.createElement(AccordionHead, {
     icon: icon,
     isOpen: isOpen,
     isFixed: isFixed,
     isTitleGreyed: isTitleGreyed || isDisabled,
-    isWrapped: isWrapped,
+    isWrapped: isWrapped === true,
     onClick: handleHeadClick,
     onSearchChange: onSearchChange,
     rightElement: rightElement,
     searchIcon: searchIcon,
     searchPlaceholder: searchPlaceholder,
+    searchValue: searchValue,
+    shouldRotateIcon: shouldRotateIcon,
     title: title,
     titleElement: titleElement
-  }), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+  }), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
-  }, isOpen && /*#__PURE__*/_react.default.createElement(_AccordionBody.default, {
+  }, (isOpen || shouldRenderClosed) && /*#__PURE__*/React.createElement(AccordionBody, {
     maxHeight: bodyMaxHeight,
-    onScroll: onBodyScroll
+    onScroll: onBodyScroll,
+    shouldHideBody: shouldRenderClosed && !isOpen
   }, children)))));
 };
 Accordion.displayName = 'Accordion';
-var _default = Accordion;
-exports.default = _default;
+export default Accordion;
 //# sourceMappingURL=Accordion.js.map

package/lib/components/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["AccordionContext","React","createContext","isWrapped","displayName","Accordion","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isTitleGreyed","onBodyScroll","onClose","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","shouldHideBackground","title","titleElement","openAccordionUuid","updateOpenAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","isAccordionOpen","setIsAccordionOpen","useState","uuid","useUuid","isInitialRenderRef","useRef","isInGroup","isOpen","handleHeadClick","useCallback","currentIsAccordionOpen","useEffect","current","shouldOnlyOpen","accordionContextProviderValue","useMemo","type"],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    UIEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nAccordionContext.displayName = 'AccordionContext';\n\nexport type AccordionProps = {\n    /**\n     * Maximum height of the accordion body element. This automatically makes the content of the\n     * body element scrollable.\n     */\n    bodyMaxHeight?: number;\n    /**\n     * The content of the accordion body\n     */\n    children: ReactNode;\n    /**\n     * The icon that is displayed in front of the title\n     */\n    icon?: string;\n    /**\n     * This can be used to automatically expand the Accordion during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This will disable the Accordion so that it cannot be opened and will gray out the title.\n     */\n    isDisabled?: boolean;\n    /**\n     * This can be used so that the Accordion cannot be opened or closed.\n     * In addition, in this case the icon is exchanged to mark the Accordions.\n     */\n    isFixed?: boolean;\n    /**\n     * This will gray out the title of the Accordion to indicate hidden content, for example.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * This value must be set for nested Accordions. This adjusts the style of\n     * the head and the padding of the content.\n     */\n    isWrapped?: boolean;\n    /**\n     * Function that is executed when the accordion body will be scrolled\n     */\n    onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Function that is executed when the accordion will be closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function that is executed when the accordion will be opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * head changes. When this function is given, the search field is displayed\n     * in the Accordion Head.\n     */\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * Icon to be displayed on the right side in the search input\n     */\n    searchIcon?: string[];\n    /**\n     * The placeholder to be used for the search\n     */\n    searchPlaceholder?: string;\n    /**\n     * This will hide the background color of the accordion\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title: string;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n    bodyMaxHeight,\n    children,\n    icon,\n    isDefaultOpen = false,\n    isDisabled = false,\n    isFixed = false,\n    isTitleGreyed = false,\n    isWrapped = false,\n    onBodyScroll,\n    onClose,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    shouldHideBackground = false,\n    title,\n    titleElement,\n}) => {\n    const { openAccordionUuid, updateOpenAccordionUuid } = useContext(AccordionGroupContext);\n    const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n    const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen);\n\n    const uuid = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n\n    const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n    const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n    const handleHeadClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid);\n        }\n\n        setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n    }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isOpen) {\n            if (typeof onOpen === 'function') {\n                onOpen();\n            }\n        } else if (typeof onClose === 'function') {\n            onClose();\n        }\n    }, [isOpen, onClose, onOpen]);\n\n    useEffect(() => {\n        if (isDefaultOpen && typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n    const accordionContextProviderValue = useMemo(() => ({ isWrapped }), [isWrapped]);\n\n    return (\n        <StyledAccordion\n            className=\"beta-chayns-accordion\"\n            isOpen={isOpen}\n            isParentWrapped={isParentWrapped}\n            isWrapped={isWrapped}\n            shouldHideBackground={shouldHideBackground}\n        >\n            <AccordionContext.Provider value={accordionContextProviderValue}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\n                        icon={icon}\n                        isOpen={isOpen}\n                        isFixed={isFixed}\n                        isTitleGreyed={isTitleGreyed || isDisabled}\n                        isWrapped={isWrapped}\n                        onClick={handleHeadClick}\n                        onSearchChange={onSearchChange}\n                        rightElement={rightElement}\n                        searchIcon={searchIcon}\n                        searchPlaceholder={searchPlaceholder}\n                        title={title}\n                        titleElement={titleElement}\n                    />\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <AccordionBody maxHeight={bodyMaxHeight} onScroll={onBodyScroll}>\n                                {children}\n                            </AccordionBody>\n                        )}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AccordionBody","AccordionGroupContext","AccordionHead","StyledAccordion","AccordionContext","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRotateIcon","title","titleElement","shouldRenderClosed","openAccordionUuid","updateOpenAccordionUuid","isParentWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","onCloseRef","onOpenRef","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","createElement","className","$isOpen","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","Provider","value","transition","type","onClick","initial","maxHeight","onScroll","shouldHideBody","displayName"],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    UIEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n    /**\n     * Maximum height of the accordion body element. This automatically makes the content of the\n     * body element scrollable.\n     */\n    bodyMaxHeight?: number;\n    /**\n     * The content of the accordion body\n     */\n    children: ReactNode;\n    /**\n     * The icon that is displayed in front of the title\n     */\n    icon?: string;\n    /**\n     * This can be used to automatically expand the Accordion during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n     */\n    isDisabled?: boolean;\n    /**\n     * This can be used so that the Accordion cannot be opened or closed.\n     * In addition, in this case the icon is exchanged to mark the Accordions.\n     */\n    isFixed?: boolean;\n    /**\n     * This can be used to open the Accordion from the outside.\n     */\n    isOpened?: boolean;\n    /**\n     * This will gray out the title of the Accordion to indicate hidden content, for example.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * Function that is executed when the accordion body will be scrolled\n     */\n    onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Function that is executed when the accordion will be closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function that is executed when the accordion will be opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * head changes. When this function is given, the search field is displayed\n     * in the Accordion Head.\n     */\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * Icon to be displayed on the right side in the search input\n     */\n    searchIcon?: string[];\n    /**\n     * The placeholder to be used for the search\n     */\n    searchPlaceholder?: string;\n    /**\n     * The value that is displayed inside the search\n     */\n    searchValue?: string;\n    /**\n     * This will force the background color of the accordion to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * This will hide the background color of the accordion\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * Whether the icon should be rotating.\n     */\n    shouldRotateIcon?: boolean;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title: string;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n    /**\n     * This will render the Accordion closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n    bodyMaxHeight,\n    children,\n    icon,\n    isDefaultOpen = false,\n    isDisabled = false,\n    isFixed = false,\n    isOpened,\n    isTitleGreyed = false,\n    onBodyScroll,\n    onClose,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    searchValue,\n    shouldForceBackground = false,\n    shouldHideBackground = false,\n    shouldRotateIcon = true,\n    title,\n    titleElement,\n    shouldRenderClosed = false,\n}) => {\n    const { isWrapped, openAccordionUuid, updateOpenAccordionUuid } =\n        useContext(AccordionGroupContext);\n    const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n    const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n    const uuid = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n\n    const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n    const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    useEffect(() => {\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [onClose, onOpen]);\n\n    const handleHeadClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid);\n        }\n\n        setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n    }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isDisabled && isOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid);\n            }\n\n            setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n        }\n    }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n            } else {\n                setIsAccordionOpen(true);\n            }\n        }\n    }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (typeof isOpened === 'boolean') {\n            if (typeof updateOpenAccordionUuid === 'function' && isOpened) {\n                updateOpenAccordionUuid(uuid);\n            } else {\n                setIsAccordionOpen(isOpened);\n            }\n        }\n    }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n    const accordionContextProviderValue = useMemo(\n        () => ({ isWrapped: isWrapped === true }),\n        [isWrapped],\n    );\n\n    return (\n        <StyledAccordion\n            className=\"beta-chayns-accordion\"\n            $isOpen={isOpen}\n            $isParentWrapped={isParentWrapped}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldHideBackground={shouldHideBackground}\n        >\n            <AccordionContext.Provider value={accordionContextProviderValue}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\n                        icon={icon}\n                        isOpen={isOpen}\n                        isFixed={isFixed}\n                        isTitleGreyed={isTitleGreyed || isDisabled}\n                        isWrapped={isWrapped === true}\n                        onClick={handleHeadClick}\n                        onSearchChange={onSearchChange}\n                        rightElement={rightElement}\n                        searchIcon={searchIcon}\n                        searchPlaceholder={searchPlaceholder}\n                        searchValue={searchValue}\n                        shouldRotateIcon={shouldRotateIcon}\n                        title={title}\n                        titleElement={titleElement}\n                    />\n                    <AnimatePresence initial={false}>\n                        {(isOpen || shouldRenderClosed) && (\n                            <AccordionBody\n                                maxHeight={bodyMaxHeight}\n                                onScroll={onBodyScroll}\n                                shouldHideBody={shouldRenderClosed && !isOpen}\n                            >\n                                {children}\n                            </AccordionBody>\n                        )}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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"}

package/lib/components/accordion/Accordion.styles.d.ts

@@ -1,7 +1,11 @@
-import type { AccordionProps } from './Accordion';
-export declare const StyledAccordion: import("styled-components").StyledComponent<"div", any, {
-    isOpen: boolean;
-    isParentWrapped: boolean;
-} & {
-    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
-} & Pick<AccordionProps, "isWrapped" | "shouldHideBackground">, never>;
+/// <reference types="react" />
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+type StyledMotionAccordionProps = WithTheme<{
+    $isOpen: boolean;
+    $isParentWrapped: boolean;
+    $isWrapped?: boolean;
+    $shouldForceBackground?: boolean;
+    $shouldHideBackground?: boolean;
+}>;
+export declare const StyledAccordion: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledMotionAccordionProps>>;
+export {};