@chayns-components/core 5.0.0-beta.9 → 5.0.0-beta.98

package/README.md

@@ -26,8 +26,8 @@ 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
 
@@ -40,11 +40,5 @@ const handleButtonClick: MouseEventHandler<HTMLButtonElement> = (event) => {
     // Your code
 };
 
-<Button onClick={handleButtonClick}>
-    Click me!
-</Button>
+<Button onClick={handleButtonClick}>Click me!</Button>;
 ```
-
-## Components Overview
-
-`coming soon`

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

@@ -1,17 +1,17 @@
-import React, { FC, ReactNode } from 'react';
+import React, { ChangeEventHandler, FC, ReactNode, UIEvent } from 'react';
 export declare const AccordionContext: React.Context<{
     isWrapped: boolean;
 }>;
-declare type AccordionProps = {
+export type AccordionProps = {
     /**
-     * The content of the accordion body
+     * Maximum height of the accordion body element. This automatically makes the content of the
+     * body element scrollable.
      */
-    children: ReactNode;
+    bodyMaxHeight?: number;
     /**
-     * Defines the group of the Accordion. Accordions with the same group are
-     * automatically closed when an Accordion of the group is opened.
+     * The content of the accordion body
      */
-    group?: string;
+    children: ReactNode;
     /**
      * The icon that is displayed in front of the title
      */
@@ -20,6 +20,10 @@ declare type AccordionProps = {
      * This can be used to automatically expand the Accordion during the first render.
      */
     isDefaultOpen?: boolean;
+    /**
+     * This will disable the Accordion so that it cannot be opened and will gray out the title.
+     */
+    isDisabled?: boolean;
     /**
      * This can be used so that the Accordion cannot be opened or closed.
      * In addition, in this case the icon is exchanged to mark the Accordions.
@@ -34,14 +38,48 @@ declare type AccordionProps = {
      * the head and the padding of the content.
      */
     isWrapped?: boolean;
+    /**
+     * Function that is executed when the accordion body will be scrolled
+     */
+    onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;
+    /**
+     * Function that is executed when the accordion will be closed.
+     */
+    onClose?: VoidFunction;
+    /**
+     * Function that is executed when the accordion will be opened.
+     */
+    onOpen?: VoidFunction;
+    /**
+     * Function that is executed when the text of the search in the accordion
+     * head changes. When this function is given, the search field is displayed
+     * in the Accordion Head.
+     */
+    onSearchChange?: ChangeEventHandler<HTMLInputElement>;
     /**
      * Content to be displayed on the right side in the head of the Accordion
      */
-    right?: ReactNode;
+    rightElement?: ReactNode;
+    /**
+     * Icon to be displayed on the right side in the search input
+     */
+    searchIcon?: string[];
+    /**
+     * The placeholder to be used for the search
+     */
+    searchPlaceholder?: string;
+    /**
+     * This will hide the background color of the accordion
+     */
+    shouldHideBackground?: boolean;
     /**
      * Title of the Accordion displayed in the head
      */
-    title: ReactNode;
+    title: string;
+    /**
+     * Additional elements to be displayed in the header next to the title.
+     */
+    titleElement?: ReactNode;
 };
 declare const Accordion: FC<AccordionProps>;
 export default Accordion;

package/lib/components/accordion/Accordion.js

@@ -1,123 +1,119 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 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 _getRequireWildcardCache(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; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var AccordionContext = /*#__PURE__*/_react.default.createContext({
+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({
   isWrapped: false
 });
-
 exports.AccordionContext = AccordionContext;
 AccordionContext.displayName = 'AccordionContext';
-
-var Accordion = function Accordion(_ref) {
-  var children = _ref.children,
-      group = _ref.group,
-      icon = _ref.icon,
-      _ref$isDefaultOpen = _ref.isDefaultOpen,
-      isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen,
-      _ref$isFixed = _ref.isFixed,
-      isFixed = _ref$isFixed === void 0 ? false : _ref$isFixed,
-      _ref$isTitleGreyed = _ref.isTitleGreyed,
-      isTitleGreyed = _ref$isTitleGreyed === void 0 ? false : _ref$isTitleGreyed,
-      _ref$isWrapped = _ref.isWrapped,
-      isWrapped = _ref$isWrapped === void 0 ? false : _ref$isWrapped,
-      right = _ref.right,
-      title = _ref.title;
-
-  var _useState = (0, _react.useState)(isDefaultOpen),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
-  var accordionRef = (0, _react.useRef)(null);
-  var handleHeadClick = (0, _react.useCallback)(function () {
-    if (!isOpen && typeof group === 'string') {
-      var customEvent = new CustomEvent('accordionOpen', {
-        detail: {
-          group: group,
-          ref: accordionRef
-        }
-      });
-      document.body.dispatchEvent(customEvent);
+const Accordion = _ref => {
+  let {
+    bodyMaxHeight,
+    children,
+    icon,
+    isDefaultOpen = false,
+    isDisabled = false,
+    isFixed = false,
+    isTitleGreyed = false,
+    isWrapped = false,
+    onBodyScroll,
+    onClose,
+    onOpen,
+    onSearchChange,
+    rightElement,
+    searchIcon,
+    searchPlaceholder,
+    shouldHideBackground = false,
+    title,
+    titleElement
+  } = _ref;
+  const {
+    openAccordionUuid,
+    updateOpenAccordionUuid
+  } = (0, _react.useContext)(_AccordionGroup.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);
+  const isInGroup = typeof updateOpenAccordionUuid === 'function';
+  const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;
+  const handleHeadClick = (0, _react.useCallback)(() => {
+    if (isDisabled) {
+      return;
     }
-
-    setIsOpen(!isOpen);
-  }, [group, isOpen]);
-  var handleAccordionOpen = (0, _react.useCallback)(function (_ref2) {
-    var detail = _ref2.detail;
-
-    if (isOpen && group === detail.group && accordionRef.current !== detail.ref.current) {
-      setIsOpen(false);
+    if (typeof updateOpenAccordionUuid === 'function') {
+      updateOpenAccordionUuid(uuid);
     }
-  }, [group, isOpen]);
-  (0, _react.useEffect)(function () {
-    // @ts-expect-error: Type is correct here because its a custom event
-    document.body.addEventListener('accordionOpen', handleAccordionOpen);
-    return function () {
-      // @ts-expect-error: Type is correct here because its a custom event
-      document.body.removeEventListener('accordionOpen', handleAccordionOpen);
-    };
-  }, [handleAccordionOpen]);
-  return /*#__PURE__*/_react.default.createElement(_framerMotion.MotionConfig, {
-    transition: {
-      duration: 0.25
+    setIsAccordionOpen(currentIsAccordionOpen => !currentIsAccordionOpen);
+  }, [isDisabled, updateOpenAccordionUuid, uuid]);
+  (0, _react.useEffect)(() => {
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+    } else if (isOpen) {
+      if (typeof onOpen === 'function') {
+        onOpen();
+      }
+    } else if (typeof onClose === 'function') {
+      onClose();
     }
-  }, /*#__PURE__*/_react.default.createElement(_Accordion.StyledAccordion, {
+  }, [isOpen, onClose, onOpen]);
+  (0, _react.useEffect)(() => {
+    if (isDefaultOpen && typeof updateOpenAccordionUuid === 'function') {
+      updateOpenAccordionUuid(uuid, {
+        shouldOnlyOpen: true
+      });
+    }
+  }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);
+  const accordionContextProviderValue = (0, _react.useMemo)(() => ({
+    isWrapped
+  }), [isWrapped]);
+  return /*#__PURE__*/_react.default.createElement(_Accordion.StyledAccordion, {
     className: "beta-chayns-accordion",
     isOpen: isOpen,
+    isParentWrapped: isParentWrapped,
     isWrapped: isWrapped,
-    ref: accordionRef
+    shouldHideBackground: shouldHideBackground
   }, /*#__PURE__*/_react.default.createElement(AccordionContext.Provider, {
-    value: {
-      isWrapped: isWrapped
+    value: accordionContextProviderValue
+  }, /*#__PURE__*/_react.default.createElement(_framerMotion.MotionConfig, {
+    transition: {
+      type: 'tween'
     }
   }, /*#__PURE__*/_react.default.createElement(_AccordionHead.default, {
     icon: icon,
     isOpen: isOpen,
     isFixed: isFixed,
-    isTitleGreyed: isTitleGreyed,
+    isTitleGreyed: isTitleGreyed || isDisabled,
     isWrapped: isWrapped,
     onClick: handleHeadClick,
-    right: right,
-    title: title
+    onSearchChange: onSearchChange,
+    rightElement: rightElement,
+    searchIcon: searchIcon,
+    searchPlaceholder: searchPlaceholder,
+    title: title,
+    titleElement: titleElement
   }), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
     initial: false
-  }, isOpen && /*#__PURE__*/_react.default.createElement(_AccordionBody.default, null, children)))));
+  }, isOpen && /*#__PURE__*/_react.default.createElement(_AccordionBody.default, {
+    maxHeight: bodyMaxHeight,
+    onScroll: onBodyScroll
+  }, children)))));
 };
-
 Accordion.displayName = 'Accordion';
 var _default = Accordion;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/accordion/Accordion.tsx"],"names":["AccordionContext","React","createContext","isWrapped","displayName","Accordion","children","group","icon","isDefaultOpen","isFixed","isTitleGreyed","right","title","isOpen","setIsOpen","accordionRef","handleHeadClick","customEvent","CustomEvent","detail","ref","document","body","dispatchEvent","handleAccordionOpen","current","addEventListener","removeEventListener","duration"],"mappings":"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","sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nAccordionContext.displayName = 'AccordionContext';\n\ntype AccordionProps = {\n    /**\n     * The content of the accordion body\n     */\n    children: ReactNode;\n    /**\n     * Defines the group of the Accordion. Accordions with the same group are\n     * automatically closed when an Accordion of the group is opened.\n     */\n    group?: string;\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 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     * Content to be displayed on the right side in the head of the Accordion\n     */\n    right?: ReactNode;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title: ReactNode;\n};\n\ninterface AccordionOpenData {\n    group: string;\n    ref: React.RefObject<HTMLDivElement>;\n}\n\nconst Accordion: FC<AccordionProps> = ({\n    children,\n    group,\n    icon,\n    isDefaultOpen = false,\n    isFixed = false,\n    isTitleGreyed = false,\n    isWrapped = false,\n    right,\n    title,\n}) => {\n    const [isOpen, setIsOpen] = useState(isDefaultOpen);\n\n    const accordionRef = useRef<HTMLDivElement>(null);\n\n    const handleHeadClick = useCallback(() => {\n        if (!isOpen && typeof group === 'string') {\n            const customEvent = new CustomEvent<AccordionOpenData>('accordionOpen', {\n                detail: { group, ref: accordionRef },\n            });\n\n            document.body.dispatchEvent(customEvent);\n        }\n\n        setIsOpen(!isOpen);\n    }, [group, isOpen]);\n\n    const handleAccordionOpen = useCallback(\n        ({ detail }: CustomEvent<AccordionOpenData>) => {\n            if (isOpen && group === detail.group && accordionRef.current !== detail.ref.current) {\n                setIsOpen(false);\n            }\n        },\n        [group, isOpen]\n    );\n\n    useEffect(() => {\n        // @ts-expect-error: Type is correct here because its a custom event\n        document.body.addEventListener('accordionOpen', handleAccordionOpen);\n\n        return () => {\n            // @ts-expect-error: Type is correct here because its a custom event\n            document.body.removeEventListener('accordionOpen', handleAccordionOpen);\n        };\n    }, [handleAccordionOpen]);\n\n    return (\n        <MotionConfig transition={{ duration: 0.25 }}>\n            <StyledAccordion\n                className=\"beta-chayns-accordion\"\n                isOpen={isOpen}\n                isWrapped={isWrapped}\n                ref={accordionRef}\n            >\n                <AccordionContext.Provider value={{ isWrapped }}>\n                    <AccordionHead\n                        icon={icon}\n                        isOpen={isOpen}\n                        isFixed={isFixed}\n                        isTitleGreyed={isTitleGreyed}\n                        isWrapped={isWrapped}\n                        onClick={handleHeadClick}\n                        right={right}\n                        title={title}\n                    />\n                    <AnimatePresence initial={false}>\n                        {isOpen && <AccordionBody>{children}</AccordionBody>}\n                    </AnimatePresence>\n                </AccordionContext.Provider>\n            </StyledAccordion>\n        </MotionConfig>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"file":"Accordion.js"}
+{"version":3,"file":"Accordion.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_Accordion","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","AccordionContext","React","createContext","isWrapped","exports","displayName","Accordion","_ref","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","createElement","StyledAccordion","className","Provider","value","MotionConfig","transition","type","onClick","AnimatePresence","initial","maxHeight","onScroll","_default"],"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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"}

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

@@ -1,6 +1,7 @@
-declare type StyledMotionAccordionProps = {
+import type { AccordionProps } from './Accordion';
+export declare const StyledAccordion: import("styled-components").StyledComponent<"div", any, {
     isOpen: boolean;
-    isWrapped: boolean;
-};
-export declare const StyledAccordion: import("styled-components").StyledComponent<"div", any, StyledMotionAccordionProps, never>;
-export {};
+    isParentWrapped: boolean;
+} & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+} & Pick<AccordionProps, "isWrapped" | "shouldHideBackground">, never>;

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

@@ -1,40 +1,81 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledAccordion = void 0;
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+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 StyledAccordion = _styledComponents.default.div`
+    ${_ref => {
+  let {
+    isOpen,
+    isWrapped,
+    shouldHideBackground
+  } = _ref;
+  return isOpen && !isWrapped && !shouldHideBackground && (0, _styledComponents.css)`
+            background-color: rgba(
+                ${_ref2 => {
+    let {
+      theme
+    } = _ref2;
+    return theme['100-rgb'];
+  }},
+                0.85
+            );
+            border-radius: 3px; // ToDo: Add correct border-radius here
+            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); // ToDo: Add correct box-shadow here
+        `;
+}}
 
-var _templateObject, _templateObject2, _templateObject3;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+    margin-bottom: ${_ref3 => {
+  let {
+    isOpen,
+    isWrapped
+  } = _ref3;
+  return isOpen && !isWrapped ? '30px' : '0px';
+}};
+    transition: background-color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease,
+        margin-bottom 0.3s ease;
 
-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; }
+    ${_ref4 => {
+  let {
+    isParentWrapped
+  } = _ref4;
+  return isParentWrapped && (0, _styledComponents.css)`
+            padding-left: 17px;
+        `;
+}}
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+    ${_ref5 => {
+  let {
+    isWrapped
+  } = _ref5;
+  return !isWrapped && (0, _styledComponents.css)`
+            margin-top: 10px;
+        `;
+}}
 
-var StyledAccordion = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n\n    margin-bottom: ", ";\n    transition: background-color 0.2s ease, border-radius 0.2s ease, box-shadow 0.2s ease,\n        margin-bottom 0.2s ease;\n\n    ", "\n"])), function (_ref) {
-  var isOpen = _ref.isOpen,
-      isWrapped = _ref.isWrapped;
-  return isOpen && !isWrapped && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            background-color: rgba(", ", 0.85);\n            border-radius: 3px; // ToDo: Add correct border-radius here\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); // ToDo: Add correct box-shadow here\n        "])), function (_ref2) {
-    var theme = _ref2.theme;
+    ${_ref6 => {
+  let {
+    isWrapped,
+    shouldHideBackground
+  } = _ref6;
+  return !isWrapped && !shouldHideBackground && (0, _styledComponents.css)`
+            &:hover {
+                background-color: rgba(
+                    ${_ref7 => {
+    let {
+      theme
+    } = _ref7;
     return theme['100-rgb'];
-  });
-}, function (_ref3) {
-  var isOpen = _ref3.isOpen,
-      isWrapped = _ref3.isWrapped;
-  return isOpen && !isWrapped ? '30px' : '0px';
-}, function (_ref4) {
-  var isWrapped = _ref4.isWrapped;
-  return !isWrapped && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            margin-top: 10px;\n\n            &:hover {\n                background-color: rgba(", ", 0.85);\n            }\n        "])), function (_ref5) {
-    var theme = _ref5.theme;
-    return theme['100-rgb'];
-  });
-});
-
+  }},
+                    0.85
+                );
+            }
+        `;
+}}
+`;
 exports.StyledAccordion = StyledAccordion;
 //# sourceMappingURL=Accordion.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/accordion/Accordion.styles.ts"],"names":["StyledAccordion","styled","div","isOpen","isWrapped","css","theme"],"mappings":";;;;;;;;;AAAA;;;;;;;;;;AAOO,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,wPACtB;AAAA,MAAGC,MAAH,QAAGA,MAAH;AAAA,MAAWC,SAAX,QAAWA,SAAX;AAAA,SACED,MAAM,IACN,CAACC,SADD,QAEAC,qBAFA,4SAG6B;AAAA,QAAGC,KAAH,SAAGA,KAAH;AAAA,WAAeA,KAAK,CAAC,SAAD,CAApB;AAAA,GAH7B,CADF;AAAA,CADsB,EAUP;AAAA,MAAGH,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAI,CAACC,SAAX,GAAuB,MAAvB,GAAgC,KAA5D;AAAA,CAVO,EActB;AAAA,MAAGA,SAAH,SAAGA,SAAH;AAAA,SACE,CAACA,SAAD,QACAC,qBADA,+MAKiC;AAAA,QAAGC,KAAH,SAAGA,KAAH;AAAA,WAAeA,KAAK,CAAC,SAAD,CAApB;AAAA,GALjC,CADF;AAAA,CAdsB,CAArB","sourcesContent":["import styled, { css } from 'styled-components';\n\ntype StyledMotionAccordionProps = {\n    isOpen: boolean;\n    isWrapped: boolean;\n};\n\nexport const StyledAccordion = styled.div<StyledMotionAccordionProps>`\n    ${({ isOpen, isWrapped }) =>\n        isOpen &&\n        !isWrapped &&\n        css`\n            background-color: rgba(${({ theme }) => theme['100-rgb']}, 0.85);\n            border-radius: 3px; // ToDo: Add correct border-radius here\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); // ToDo: Add correct box-shadow here\n        `}\n\n    margin-bottom: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '30px' : '0px')};\n    transition: background-color 0.2s ease, border-radius 0.2s ease, box-shadow 0.2s ease,\n        margin-bottom 0.2s ease;\n\n    ${({ isWrapped }) =>\n        !isWrapped &&\n        css`\n            margin-top: 10px;\n\n            &:hover {\n                background-color: rgba(${({ theme }) => theme['100-rgb']}, 0.85);\n            }\n        `}\n`;\n"],"file":"Accordion.styles.js"}
+{"version":3,"file":"Accordion.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledAccordion","styled","div","_ref","isOpen","isWrapped","shouldHideBackground","css","_ref2","theme","_ref3","_ref4","isParentWrapped","_ref5","_ref6","_ref7","exports"],"sources":["../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { AccordionProps } from './Accordion';\n\ntype StyledMotionAccordionProps = WithTheme<{\n    isOpen: boolean;\n    isParentWrapped: boolean;\n}> &\n    Pick<AccordionProps, 'isWrapped' | 'shouldHideBackground'>;\n\nexport const StyledAccordion = styled.div<StyledMotionAccordionProps>`\n    ${({ isOpen, isWrapped, shouldHideBackground }) =>\n        isOpen &&\n        !isWrapped &&\n        !shouldHideBackground &&\n        css`\n            background-color: rgba(\n                ${({ theme }: StyledMotionAccordionProps) => theme['100-rgb']},\n                0.85\n            );\n            border-radius: 3px; // ToDo: Add correct border-radius here\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); // ToDo: Add correct box-shadow here\n        `}\n\n    margin-bottom: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '30px' : '0px')};\n    transition: background-color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease,\n        margin-bottom 0.3s ease;\n\n    ${({ isParentWrapped }) =>\n        isParentWrapped &&\n        css`\n            padding-left: 17px;\n        `}\n\n    ${({ isWrapped }) =>\n        !isWrapped &&\n        css`\n            margin-top: 10px;\n        `}\n\n    ${({ isWrapped, shouldHideBackground }) =>\n        !isWrapped &&\n        !shouldHideBackground &&\n        css`\n            &:hover {\n                background-color: rgba(\n                    ${({ theme }: StyledMotionAccordionProps) => theme['100-rgb']},\n                    0.85\n                );\n            }\n        `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAUzC,MAAMW,eAAe,GAAGC,yBAAM,CAACC,GAAgC;AACtE,MAAMC,IAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC,SAAS;IAAEC;EAAqB,CAAC,GAAAH,IAAA;EAAA,OAC1CC,MAAM,IACN,CAACC,SAAS,IACV,CAACC,oBAAoB,IACrB,IAAAC,qBAAG,CAAC;AACZ;AACA,kBAAkBC,KAAA;IAAA,IAAC;MAAEC;IAAkC,CAAC,GAAAD,KAAA;IAAA,OAAKC,KAAK,CAAC,SAAS,CAAC;EAAA,CAAC;AAC9E;AACA;AACA;AACA;AACA,SAAS;AAAA,CAAC;AACV;AACA,qBAAqBC,KAAA;EAAA,IAAC;IAAEN,MAAM;IAAEC;EAAU,CAAC,GAAAK,KAAA;EAAA,OAAMN,MAAM,IAAI,CAACC,SAAS,GAAG,MAAM,GAAG,KAAK;AAAA,CAAE;AACxF;AACA;AACA;AACA,MAAMM,KAAA;EAAA,IAAC;IAAEC;EAAgB,CAAC,GAAAD,KAAA;EAAA,OAClBC,eAAe,IACf,IAAAL,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMM,KAAA;EAAA,IAAC;IAAER;EAAU,CAAC,GAAAQ,KAAA;EAAA,OACZ,CAACR,SAAS,IACV,IAAAE,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMO,KAAA;EAAA,IAAC;IAAET,SAAS;IAAEC;EAAqB,CAAC,GAAAQ,KAAA;EAAA,OAClC,CAACT,SAAS,IACV,CAACC,oBAAoB,IACrB,IAAAC,qBAAG,CAAC;AACZ;AACA;AACA,sBAAsBQ,KAAA;IAAA,IAAC;MAAEN;IAAkC,CAAC,GAAAM,KAAA;IAAA,OAAKN,KAAK,CAAC,SAAS,CAAC;EAAA,CAAC;AAClF;AACA;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAACO,OAAA,CAAAhB,eAAA,GAAAA,eAAA"}

package/lib/components/accordion/accordion-body/AccordionBody.d.ts

@@ -1,3 +1,14 @@
-import { FC } from 'react';
-declare const AccordionBody: FC;
+import { FC, UIEvent } from 'react';
+import type { AccordionProps } from '../Accordion';
+export type AccordionBodyProps = {
+    /**
+     * Maximum height of the element. This automatically makes the content of the element scrollable.
+     */
+    maxHeight: AccordionProps['bodyMaxHeight'];
+    /**
+     * Function that is executed when the element will be scrolled
+     */
+    onScroll?: (event: UIEvent<HTMLDivElement>) => void;
+};
+declare const AccordionBody: FC<AccordionBodyProps>;
 export default AccordionBody;

package/lib/components/accordion/accordion-body/AccordionBody.js

@@ -4,15 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
+var _react = _interopRequireWildcard(require("react"));
+var _AccordionGroup = require("../accordion-group/AccordionGroup");
 var _AccordionBody = require("./AccordionBody.styles");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var AccordionBody = function AccordionBody(_ref) {
-  var children = _ref.children;
+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 AccordionBody = _ref => {
+  let {
+    children,
+    maxHeight,
+    onScroll
+  } = _ref;
+  const AccordionGroupContextProviderValue = (0, _react.useMemo)(() => ({
+    openAccordionUuid: undefined
+  }), []);
   return /*#__PURE__*/_react.default.createElement(_AccordionBody.StyledMotionAccordionBody, {
     animate: {
       height: 'auto',
@@ -26,10 +31,13 @@ var AccordionBody = function AccordionBody(_ref) {
     initial: {
       height: 0,
       opacity: 0
-    }
-  }, children);
+    },
+    maxHeight: maxHeight,
+    onScroll: onScroll
+  }, /*#__PURE__*/_react.default.createElement(_AccordionGroup.AccordionGroupContext.Provider, {
+    value: AccordionGroupContextProviderValue
+  }, children));
 };
-
 AccordionBody.displayName = 'AccordionBody';
 var _default = AccordionBody;
 exports.default = _default;

package/lib/components/accordion/accordion-body/AccordionBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/accordion/accordion-body/AccordionBody.tsx"],"names":["AccordionBody","children","height","opacity","displayName"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,IAAMA,aAAiB,GAAG,SAApBA,aAAoB;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,sBACtB,6BAAC,wCAAD;AACI,IAAA,OAAO,EAAE;AAAEC,MAAAA,MAAM,EAAE,MAAV;AAAkBC,MAAAA,OAAO,EAAE;AAA3B,KADb;AAEI,IAAA,SAAS,EAAC,4BAFd;AAGI,IAAA,IAAI,EAAE;AAAED,MAAAA,MAAM,EAAE,CAAV;AAAaC,MAAAA,OAAO,EAAE;AAAtB,KAHV;AAII,IAAA,OAAO,EAAE;AAAED,MAAAA,MAAM,EAAE,CAAV;AAAaC,MAAAA,OAAO,EAAE;AAAtB;AAJb,KAMKF,QANL,CADsB;AAAA,CAA1B;;AAWAD,aAAa,CAACI,WAAd,GAA4B,eAA5B;eAEeJ,a","sourcesContent":["import React, { FC } from 'react';\nimport { StyledMotionAccordionBody } from './AccordionBody.styles';\n\nconst AccordionBody: FC = ({ children }) => (\n    <StyledMotionAccordionBody\n        animate={{ height: 'auto', opacity: 1 }}\n        className=\"beta-chayns-accordion-body\"\n        exit={{ height: 0, opacity: 0 }}\n        initial={{ height: 0, opacity: 0 }}\n    >\n        {children}\n    </StyledMotionAccordionBody>\n);\n\nAccordionBody.displayName = 'AccordionBody';\n\nexport default AccordionBody;\n"],"file":"AccordionBody.js"}
+{"version":3,"file":"AccordionBody.js","names":["_react","_interopRequireWildcard","require","_AccordionGroup","_AccordionBody","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","AccordionBody","_ref","children","maxHeight","onScroll","AccordionGroupContextProviderValue","useMemo","openAccordionUuid","undefined","createElement","StyledMotionAccordionBody","animate","height","opacity","className","exit","initial","AccordionGroupContext","Provider","value","displayName","_default","exports"],"sources":["../../../../src/components/accordion/accordion-body/AccordionBody.tsx"],"sourcesContent":["import React, { FC, UIEvent, useMemo } from 'react';\nimport type { AccordionProps } from '../Accordion';\nimport { AccordionGroupContext } from '../accordion-group/AccordionGroup';\nimport { StyledMotionAccordionBody } from './AccordionBody.styles';\n\nexport type AccordionBodyProps = {\n    /**\n     * Maximum height of the element. This automatically makes the content of the element scrollable.\n     */\n    maxHeight: AccordionProps['bodyMaxHeight'];\n    /**\n     * Function that is executed when the element will be scrolled\n     */\n    onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n};\n\nconst AccordionBody: FC<AccordionBodyProps> = ({ children, maxHeight, onScroll }) => {\n    const AccordionGroupContextProviderValue = useMemo(\n        () => ({ openAccordionUuid: undefined }),\n        []\n    );\n\n    return (\n        <StyledMotionAccordionBody\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-accordion-body\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            maxHeight={maxHeight}\n            onScroll={onScroll}\n        >\n            <AccordionGroupContext.Provider value={AccordionGroupContextProviderValue}>\n                {children}\n            </AccordionGroupContext.Provider>\n        </StyledMotionAccordionBody>\n    );\n};\n\nAccordionBody.displayName = 'AccordionBody';\n\nexport default AccordionBody;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AAAmE,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAL,wBAAAS,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAanE,MAAMW,aAAqC,GAAGC,IAAA,IAAuC;EAAA,IAAtC;IAAEC,QAAQ;IAAEC,SAAS;IAAEC;EAAS,CAAC,GAAAH,IAAA;EAC5E,MAAMI,kCAAkC,GAAG,IAAAC,cAAO,EAC9C,OAAO;IAAEC,iBAAiB,EAAEC;EAAU,CAAC,CAAC,EACxC,EAAE,CACL;EAED,oBACInC,MAAA,CAAAY,OAAA,CAAAwB,aAAA,CAAChC,cAAA,CAAAiC,yBAAyB;IACtBC,OAAO,EAAE;MAAEC,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxCC,SAAS,EAAC,4BAA4B;IACtCC,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEJ,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCV,SAAS,EAAEA,SAAU;IACrBC,QAAQ,EAAEA;EAAS,gBAEnB/B,MAAA,CAAAY,OAAA,CAAAwB,aAAA,CAACjC,eAAA,CAAAyC,qBAAqB,CAACC,QAAQ;IAACC,KAAK,EAAEd;EAAmC,GACrEH,QAAQ,CACoB,CACT;AAEpC,CAAC;AAEDF,aAAa,CAACoB,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAE7BrB,aAAa;AAAAsB,OAAA,CAAArC,OAAA,GAAAoC,QAAA"}

package/lib/components/accordion/accordion-body/AccordionBody.styles.d.ts

@@ -1 +1,4 @@
-export declare const StyledMotionAccordionBody: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+import type { AccordionBodyProps } from './AccordionBody';
+type StyledMotionAccordionBodyProps = Pick<AccordionBodyProps, 'maxHeight'>;
+export declare const StyledMotionAccordionBody: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, StyledMotionAccordionBodyProps, never>;
+export {};