@chayns-components/core 5.0.0-beta.44 → 5.0.0-beta.46

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

@@ -3,6 +3,11 @@ export declare const AccordionContext: React.Context<{
     isWrapped: boolean;
 }>;
 export declare type AccordionProps = {
+    /**
+     * Maximum height of the accordion body element. This automatically makes the content of the
+     * body element scrollable.
+     */
+    bodyMaxHeight?: number;
     /**
      * The content of the accordion body
      */

package/lib/components/accordion/Accordion.js

@@ -21,6 +21,7 @@ exports.AccordionContext = AccordionContext;
 AccordionContext.displayName = 'AccordionContext';
 const Accordion = _ref => {
   let {
+    bodyMaxHeight,
     children,
     icon,
     isDefaultOpen = false,
@@ -106,7 +107,9 @@ const Accordion = _ref => {
     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
+  }, children)))));
 };
 Accordion.displayName = 'Accordion';
 var _default = Accordion;

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["AccordionContext","React","createContext","isWrapped","displayName","Accordion","children","icon","isDefaultOpen","isDisabled","isFixed","isTitleGreyed","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","type"],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\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     * 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 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    children,\n    icon,\n    isDefaultOpen = false,\n    isDisabled = false,\n    isFixed = false,\n    isTitleGreyed = false,\n    isWrapped = false,\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    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={{ isWrapped }}>\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 && <AccordionBody>{children}</AccordionBody>}\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":["AccordionContext","React","createContext","isWrapped","displayName","Accordion","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isTitleGreyed","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","type"],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\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 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    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    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={{ isWrapped }}>\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}>{children}</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-body/AccordionBody.d.ts

@@ -1,3 +1,10 @@
 import { FC } from 'react';
-declare const AccordionBody: FC;
+import type { AccordionProps } from '../Accordion';
+export declare type AccordionBodyProps = {
+    /**
+     * Maximum height of the element. This automatically makes the content of the element scrollable.
+     */
+    maxHeight: AccordionProps['bodyMaxHeight'];
+};
+declare const AccordionBody: FC<AccordionBodyProps>;
 export default AccordionBody;

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

@@ -10,7 +10,8 @@ var _AccordionBody = require("./AccordionBody.styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const AccordionBody = _ref => {
   let {
-    children
+    children,
+    maxHeight
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_AccordionBody.StyledMotionAccordionBody, {
     animate: {
@@ -25,7 +26,8 @@ const AccordionBody = _ref => {
     initial: {
       height: 0,
       opacity: 0
-    }
+    },
+    maxHeight: maxHeight
   }, /*#__PURE__*/_react.default.createElement(_AccordionGroup.AccordionGroupContext.Provider, {
     value: {
       openAccordionUuid: undefined

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionBody.js","names":["AccordionBody","children","height","opacity","openAccordionUuid","undefined","displayName"],"sources":["../../../../src/components/accordion/accordion-body/AccordionBody.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { AccordionGroupContext } from '../accordion-group/AccordionGroup';\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        <AccordionGroupContext.Provider value={{ openAccordionUuid: undefined }}>\n            {children}\n        </AccordionGroupContext.Provider>\n    </StyledMotionAccordionBody>\n);\n\nAccordionBody.displayName = 'AccordionBody';\n\nexport default AccordionBody;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAmE;AAEnE,MAAMA,aAAiB,GAAG;EAAA,IAAC;IAAEC;EAAS,CAAC;EAAA,oBACnC,6BAAC,wCAAyB;IACtB,OAAO,EAAE;MAAEC,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxC,SAAS,EAAC,4BAA4B;IACtC,IAAI,EAAE;MAAED,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChC,OAAO,EAAE;MAAED,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE;EAAE,gBAEnC,6BAAC,qCAAqB,CAAC,QAAQ;IAAC,KAAK,EAAE;MAAEC,iBAAiB,EAAEC;IAAU;EAAE,GACnEJ,QAAQ,CACoB,CACT;AAAA,CAC/B;AAEDD,aAAa,CAACM,WAAW,GAAG,eAAe;AAAC,eAE7BN,aAAa;AAAA"}
+{"version":3,"file":"AccordionBody.js","names":["AccordionBody","children","maxHeight","height","opacity","openAccordionUuid","undefined","displayName"],"sources":["../../../../src/components/accordion/accordion-body/AccordionBody.tsx"],"sourcesContent":["import React, { FC } 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\nconst AccordionBody: FC<AccordionBodyProps> = ({ children, maxHeight }) => (\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    >\n        <AccordionGroupContext.Provider value={{ openAccordionUuid: undefined }}>\n            {children}\n        </AccordionGroupContext.Provider>\n    </StyledMotionAccordionBody>\n);\n\nAccordionBody.displayName = 'AccordionBody';\n\nexport default AccordionBody;\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAmE;AASnE,MAAMA,aAAqC,GAAG;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAU,CAAC;EAAA,oBAClE,6BAAC,wCAAyB;IACtB,OAAO,EAAE;MAAEC,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxC,SAAS,EAAC,4BAA4B;IACtC,IAAI,EAAE;MAAED,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChC,OAAO,EAAE;MAAED,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnC,SAAS,EAAEF;EAAU,gBAErB,6BAAC,qCAAqB,CAAC,QAAQ;IAAC,KAAK,EAAE;MAAEG,iBAAiB,EAAEC;IAAU;EAAE,GACnEL,QAAQ,CACoB,CACT;AAAA,CAC/B;AAEDD,aAAa,CAACO,WAAW,GAAG,eAAe;AAAC,eAE7BP,aAAa;AAAA"}

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';
+declare 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 {};

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

@@ -5,10 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledMotionAccordionBody = void 0;
 var _framerMotion = require("framer-motion");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 StyledMotionAccordionBody = (0, _styledComponents.default)(_framerMotion.motion.div)`
     overflow: hidden;
+
+    ${_ref => {
+  let {
+    maxHeight
+  } = _ref;
+  return typeof maxHeight === 'number' && (0, _styledComponents.css)`
+            max-height: ${maxHeight}px;
+            overflow-y: scroll;
+        `;
+}}
 `;
 exports.StyledMotionAccordionBody = StyledMotionAccordionBody;
 //# sourceMappingURL=AccordionBody.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionBody.styles.js","names":["StyledMotionAccordionBody","styled","motion","div"],"sources":["../../../../src/components/accordion/accordion-body/AccordionBody.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionAccordionBody = styled(motion.div)`\n    overflow: hidden;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAAuC;AAEhC,MAAMA,yBAAyB,GAAG,IAAAC,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAE;AAC5D;AACA,CAAC;AAAC"}
+{"version":3,"file":"AccordionBody.styles.js","names":["StyledMotionAccordionBody","styled","motion","div","maxHeight","css"],"sources":["../../../../src/components/accordion/accordion-body/AccordionBody.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { AccordionBodyProps } from './AccordionBody';\n\ntype StyledMotionAccordionBodyProps = Pick<AccordionBodyProps, 'maxHeight'>;\n\nexport const StyledMotionAccordionBody = styled(motion.div)<StyledMotionAccordionBodyProps>`\n    overflow: hidden;\n\n    ${({ maxHeight }) =>\n        typeof maxHeight === 'number' &&\n        css`\n            max-height: ${maxHeight}px;\n            overflow-y: scroll;\n        `}\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAAgD;AAAA;AAKzC,MAAMA,yBAAyB,GAAG,IAAAC,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAkC;AAC5F;AACA;AACA,MAAM;EAAA,IAAC;IAAEC;EAAU,CAAC;EAAA,OACZ,OAAOA,SAAS,KAAK,QAAQ,IAC7B,IAAAC,qBAAG,CAAC;AACZ,0BAA0BD,SAAU;AACpC;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAAC"}

package/lib/components/accordion/accordion-content/AccordionContent.d.ts

@@ -4,6 +4,9 @@ export declare type AccordionContentProps = {
      * The content of the accordion content element
      */
     children: ReactNode;
+    /**
+     * Maximum height of the element. This automatically makes the content of the element scrollable.
+     */
     maxHeight?: number;
 };
 declare const AccordionContent: FC<AccordionContentProps>;

package/lib/components/accordion/accordion-content/AccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.js","names":["AccordionContent","children","maxHeight","isWrapped","displayName"],"sources":["../../../../src/components/accordion/accordion-content/AccordionContent.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { AccordionContext } from '../Accordion';\nimport { StyledAccordionContent } from './AccordionContent.styles';\n\nexport type AccordionContentProps = {\n    /**\n     * The content of the accordion content element\n     */\n    children: ReactNode;\n    maxHeight?: number;\n};\n\nconst AccordionContent: FC<AccordionContentProps> = ({ children, maxHeight }) => (\n    <AccordionContext.Consumer>\n        {({ isWrapped }) => (\n            <StyledAccordionContent\n                className=\"beta-chayns-accordion-content\"\n                isWrapped={isWrapped}\n                maxHeight={maxHeight}\n            >\n                {children}\n            </StyledAccordionContent>\n        )}\n    </AccordionContext.Consumer>\n);\n\nAccordionContent.displayName = 'AccordionContent';\n\nexport default AccordionContent;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAmE;AAUnE,MAAMA,gBAA2C,GAAG;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAU,CAAC;EAAA,oBACxE,6BAAC,2BAAgB,CAAC,QAAQ,QACrB;IAAA,IAAC;MAAEC;IAAU,CAAC;IAAA,oBACX,6BAAC,wCAAsB;MACnB,SAAS,EAAC,+BAA+B;MACzC,SAAS,EAAEA,SAAU;MACrB,SAAS,EAAED;IAAU,GAEpBD,QAAQ,CACY;EAAA,CAC5B,CACuB;AAAA,CAC/B;AAEDD,gBAAgB,CAACI,WAAW,GAAG,kBAAkB;AAAC,eAEnCJ,gBAAgB;AAAA"}
+{"version":3,"file":"AccordionContent.js","names":["AccordionContent","children","maxHeight","isWrapped","displayName"],"sources":["../../../../src/components/accordion/accordion-content/AccordionContent.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { AccordionContext } from '../Accordion';\nimport { StyledAccordionContent } from './AccordionContent.styles';\n\nexport type AccordionContentProps = {\n    /**\n     * The content of the accordion content element\n     */\n    children: ReactNode;\n    /**\n     * Maximum height of the element. This automatically makes the content of the element scrollable.\n     */\n    maxHeight?: number;\n};\n\nconst AccordionContent: FC<AccordionContentProps> = ({ children, maxHeight }) => (\n    <AccordionContext.Consumer>\n        {({ isWrapped }) => (\n            <StyledAccordionContent\n                className=\"beta-chayns-accordion-content\"\n                isWrapped={isWrapped}\n                maxHeight={maxHeight}\n            >\n                {children}\n            </StyledAccordionContent>\n        )}\n    </AccordionContext.Consumer>\n);\n\nAccordionContent.displayName = 'AccordionContent';\n\nexport default AccordionContent;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAmE;AAanE,MAAMA,gBAA2C,GAAG;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAU,CAAC;EAAA,oBACxE,6BAAC,2BAAgB,CAAC,QAAQ,QACrB;IAAA,IAAC;MAAEC;IAAU,CAAC;IAAA,oBACX,6BAAC,wCAAsB;MACnB,SAAS,EAAC,+BAA+B;MACzC,SAAS,EAAEA,SAAU;MACrB,SAAS,EAAED;IAAU,GAEpBD,QAAQ,CACY;EAAA,CAC5B,CACuB;AAAA,CAC/B;AAEDD,gBAAgB,CAACI,WAAW,GAAG,kBAAkB;AAAC,eAEnCJ,gBAAgB;AAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.44",
+    "version": "5.0.0-beta.46",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -62,5 +62,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "58aaa9d73f7b6fafac4d25d0a2412f620913992b"
+    "gitHead": "c3a95cec946b061e76794296f168a52cd8176cae"
 }