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

package/lib/components/input/Input.styles.js

@@ -1,70 +1,147 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledMotionInputLabel = exports.StyledInputField = exports.StyledInputContent = exports.StyledInput = void 0;
-var _framerMotion = require("framer-motion");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StyledInput = _styledComponents.default.div`
-    align-items: center;
-    background-color: ${_ref => {
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledInput = styled.div`
+    opacity: ${_ref => {
   let {
-    theme
+    $isDisabled
   } = _ref;
-  return theme['100'];
+  return $isDisabled ? 0.5 : 1;
 }};
-    border: 1px solid rgba(160, 160, 160, 0.3);
-    border-radius: 3px;
-    color: ${_ref2 => {
+    display: flex;
+    width: 100%;
+`;
+export const StyledInputContentWrapper = styled.div`
+    align-items: center;
+    background-color: ${_ref2 => {
   let {
     theme
   } = _ref2;
+  return theme.colorMode === 'classic' ? theme['000'] : theme['100'];
+}};
+    border: 1px solid
+        ${_ref3 => {
+  let {
+    theme,
+    $isInvalid
+  } = _ref3;
+  return $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)';
+}};
+    color: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme['006'];
 }};
     display: flex;
     justify-content: space-between;
     min-height: 42px;
-    opacity: ${_ref3 => {
-  let {
-    isDisabled
-  } = _ref3;
-  return isDisabled ? 0.5 : 1;
-}};
-    padding: 8px 10px;
+    width: 100%;
     transition: opacity 0.3s ease;
 
-    &:not(&:first-child) {
-        margin-top: 8px;
-    }
+    ${_ref5 => {
+  let {
+    $shouldRoundRightCorners,
+    $shouldShowOnlyBottomBorder,
+    theme
+  } = _ref5;
+  if ($shouldShowOnlyBottomBorder) {
+    return css`
+                border-top: none;
+                border-right: none;
+                border-left: none;
+                background-color: transparent;
+                border-color: ${theme['408']};
+            `;
+  }
+  if ($shouldRoundRightCorners) {
+    return css`
+                border-radius: 3px;
+            `;
+  }
+  return css`
+            border-bottom-left-radius: 3px;
+            border-top-left-radius: 3px;
+            border-right: none;
+        `;
+}}
 `;
-exports.StyledInput = StyledInput;
-const StyledInputContent = _styledComponents.default.div`
+export const StyledInputContent = styled.div`
     display: flex;
     flex: 1 1 auto;
-    flex-direction: column;
-    position: relative;
     min-width: 0;
+    margin: 8px 10px;
+    position: relative;
 `;
-exports.StyledInputContent = StyledInputContent;
-const StyledInputField = _styledComponents.default.input`
+export const StyledInputField = styled.input`
     background: none;
     border: none;
-    color: ${_ref4 => {
+    color: ${_ref6 => {
   let {
-    theme
-  } = _ref4;
-  return theme.text;
+    theme,
+    $isInvalid
+  } = _ref6;
+  return $isInvalid ? theme.wrong : theme.text;
 }};
     padding: 0;
+    width: 100%;
 `;
-exports.StyledInputField = StyledInputField;
-const StyledMotionInputLabel = (0, _styledComponents.default)(_framerMotion.motion.label)`
-    line-height: 1.15;
+export const StyledMotionInputLabelWrapper = styled(motion.label)`
+    align-items: baseline;
+    display: flex;
+    flex: 0 0 auto;
+    gap: 4px;
+    line-height: 1.3;
     pointer-events: none;
     position: absolute;
     user-select: none;
+    max-width: ${_ref7 => {
+  let {
+    $width
+  } = _ref7;
+  return $width;
+}}px;
+`;
+export const StyledInputLabel = styled.label`
+    line-height: 1.3;
+    pointer-events: none;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: ${_ref8 => {
+  let {
+    theme,
+    $isInvalid
+  } = _ref8;
+  return $isInvalid ? theme.wrong : undefined;
+}};
+`;
+export const StyledMotionInputClearIcon = styled(motion.div)`
+    align-items: center;
+    border-left: ${_ref9 => {
+  let {
+    $shouldShowOnlyBottomBorder
+  } = _ref9;
+  return $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)';
+}};
+    cursor: pointer;
+    display: flex;
+    flex: 0 0 auto;
+    height: 40px;
+    justify-content: center;
+    width: 40px;
+`;
+export const StyledInputIconWrapper = styled.div`
+    align-items: baseline;
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    margin-left: 10px;
+`;
+export const StyledInputRightElement = styled.div`
+    border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+    overflow: hidden;
+    flex: 0 0 auto;
 `;
-exports.StyledMotionInputLabel = StyledMotionInputLabel;
 //# sourceMappingURL=Input.styles.js.map

package/lib/components/input/Input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","names":["StyledInput","styled","div","theme","isDisabled","StyledInputContent","StyledInputField","input","text","StyledMotionInputLabel","motion","label"],"sources":["../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputProps } from './Input';\n\ntype StyledInputProps = WithTheme<Pick<InputProps, 'isDisabled'>>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledInputProps) => theme['100']};\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-radius: 3px;\n    color: ${({ theme }: StyledInputProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    min-height: 42px;\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    padding: 8px 10px;\n    transition: opacity 0.3s ease;\n\n    &:not(&:first-child) {\n        margin-top: 8px;\n    }\n`;\n\nexport const StyledInputContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    position: relative;\n    min-width: 0;\n`;\n\nexport const StyledInputField = styled.input`\n    background: none;\n    border: none;\n    color: ${({ theme }: StyledInputProps) => theme.text};\n    padding: 0;\n`;\n\nexport const StyledMotionInputLabel = styled(motion.label)`\n    line-height: 1.15;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAAuC;AAMhC,MAAMA,WAAW,GAAGC,yBAAM,CAACC,GAAsB;AACxD;AACA,wBAAwB;EAAA,IAAC;IAAEC;EAAwB,CAAC;EAAA,OAAKA,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACtE;AACA;AACA,aAAa;EAAA,IAAC;IAAEA;EAAwB,CAAC;EAAA,OAAKA,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC3D;AACA;AACA;AACA,eAAe;EAAA,IAAC;IAAEC;EAAW,CAAC;EAAA,OAAMA,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAAC;AAEK,MAAMC,kBAAkB,GAAGJ,yBAAM,CAACC,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA,CAAC;AAAC;AAEK,MAAMI,gBAAgB,GAAGL,yBAAM,CAACM,KAAM;AAC7C;AACA;AACA,aAAa;EAAA,IAAC;IAAEJ;EAAwB,CAAC;EAAA,OAAKA,KAAK,CAACK,IAAI;AAAA,CAAC;AACzD;AACA,CAAC;AAAC;AAEK,MAAMC,sBAAsB,GAAG,IAAAR,yBAAM,EAACS,oBAAM,CAACC,KAAK,CAAE;AAC3D;AACA;AACA;AACA;AACA,CAAC;AAAC"}
+{"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","_ref","$isDisabled","StyledInputContentWrapper","_ref2","theme","colorMode","_ref3","$isInvalid","wrong","_ref4","_ref5","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","StyledInputContent","StyledInputField","input","_ref6","text","StyledMotionInputLabelWrapper","label","_ref7","$width","StyledInputLabel","_ref8","undefined","StyledMotionInputClearIcon","_ref9","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n    $shouldRoundRightCorners: boolean;\n    $shouldShowOnlyBottomBorder?: boolean;\n    $isInvalid?: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledInputContentWrapperProps) =>\n        theme.colorMode === 'classic' ? theme['000'] : theme['100']};\n    border: 1px solid\n        ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n            $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n    color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    min-height: 42px;\n    width: 100%;\n    transition: opacity 0.3s ease;\n\n    ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n        if ($shouldShowOnlyBottomBorder) {\n            return css`\n                border-top: none;\n                border-right: none;\n                border-left: none;\n                background-color: transparent;\n                border-color: ${theme['408']};\n            `;\n        }\n\n        if ($shouldRoundRightCorners) {\n            return css`\n                border-radius: 3px;\n            `;\n        }\n\n        return css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n            border-right: none;\n        `;\n    }}\n`;\n\nexport const StyledInputContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: 8px 10px;\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n        $isInvalid ? theme.wrong : theme.text};\n    padding: 0;\n    width: 100%;\n`;\n\ntype StyledMotionInputLabelWrapperProps = WithTheme<{ $width: number }>;\n\nexport const StyledMotionInputLabelWrapper = styled(\n    motion.label,\n)<StyledMotionInputLabelWrapperProps>`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    max-width: ${({ $width }) => $width}px;\n`;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n    line-height: 1.3;\n    pointer-events: none;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n        $isInvalid ? theme.wrong : undefined};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n        $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"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"}

package/lib/components/list/List.d.ts

@@ -2,6 +2,7 @@ import React, { FC, ReactNode } from 'react';
 interface IListContext {
     incrementExpandableItemCount: () => () => void;
     isAnyItemExpandable: boolean;
+    isWrapped: boolean;
     openItemUuid: string | undefined;
     updateOpenItemUuid: (uuid: string, options?: {
         shouldOnlyOpen?: boolean;
@@ -13,6 +14,11 @@ type ListProps = {
      * The items of the list
      */
     children: ReactNode;
+    /**
+     * This value must be set for nested AccordionGroup components. This adjusts the style of
+     * the head and the padding of the content accordions.
+     */
+    isWrapped?: boolean;
 };
 declare const List: FC<ListProps>;
 export default List;

package/lib/components/list/List.js

@@ -1,27 +1,21 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ListContext = void 0;
-var _react = _interopRequireWildcard(require("react"));
-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 ListContext = /*#__PURE__*/_react.default.createContext({
+import { AnimatePresence, MotionConfig } from 'framer-motion';
+import React, { useCallback, useMemo, useState } from 'react';
+export const ListContext = /*#__PURE__*/React.createContext({
   incrementExpandableItemCount: () => () => {},
   isAnyItemExpandable: false,
+  isWrapped: false,
   openItemUuid: undefined,
   updateOpenItemUuid: () => {}
 });
-exports.ListContext = ListContext;
 ListContext.displayName = 'ListContext';
 const List = _ref => {
   let {
-    children
+    children,
+    isWrapped = false
   } = _ref;
-  const [openItemUuid, setOpenItemUuid] = (0, _react.useState)(undefined);
-  const [expandableItemCount, setExpandableItemCount] = (0, _react.useState)(0);
-  const updateOpenItemUuid = (0, _react.useCallback)(function (uuid) {
+  const [openItemUuid, setOpenItemUuid] = useState(undefined);
+  const [expandableItemCount, setExpandableItemCount] = useState(0);
+  const updateOpenItemUuid = useCallback(function (uuid) {
     let {
       shouldOnlyOpen
     } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -32,23 +26,29 @@ const List = _ref => {
       return uuid;
     });
   }, [setOpenItemUuid]);
-  const incrementExpandableItemCount = (0, _react.useCallback)(() => {
+  const incrementExpandableItemCount = useCallback(() => {
     setExpandableItemCount(count => count + 1);
     return () => {
       setExpandableItemCount(count => count - 1);
     };
   }, [setExpandableItemCount]);
-  const providerValue = (0, _react.useMemo)(() => ({
+  const providerValue = useMemo(() => ({
+    incrementExpandableItemCount,
     isAnyItemExpandable: expandableItemCount > 0,
-    updateOpenItemUuid,
+    isWrapped,
     openItemUuid,
-    incrementExpandableItemCount
-  }), [expandableItemCount, incrementExpandableItemCount, openItemUuid, updateOpenItemUuid]);
-  return /*#__PURE__*/_react.default.createElement(ListContext.Provider, {
+    updateOpenItemUuid
+  }), [expandableItemCount, incrementExpandableItemCount, isWrapped, openItemUuid, updateOpenItemUuid]);
+  return /*#__PURE__*/React.createElement(ListContext.Provider, {
     value: providerValue
-  }, children);
+  }, /*#__PURE__*/React.createElement(MotionConfig, {
+    transition: {
+      type: 'tween'
+    }
+  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, children)));
 };
 List.displayName = 'List';
-var _default = List;
-exports.default = _default;
+export default List;
 //# sourceMappingURL=List.js.map

package/lib/components/list/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","names":["ListContext","React","createContext","incrementExpandableItemCount","isAnyItemExpandable","openItemUuid","undefined","updateOpenItemUuid","displayName","List","children","setOpenItemUuid","useState","expandableItemCount","setExpandableItemCount","useCallback","uuid","shouldOnlyOpen","currentOpenItemUuid","count","providerValue","useMemo"],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ninterface IListContext {\n    incrementExpandableItemCount: () => () => void;\n    isAnyItemExpandable: boolean;\n    openItemUuid: string | undefined;\n    updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n    incrementExpandableItemCount: () => () => {},\n    isAnyItemExpandable: false,\n    openItemUuid: undefined,\n    updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n    /**\n     * The items of the list\n     */\n    children: ReactNode;\n};\n\nconst List: FC<ListProps> = ({ children }) => {\n    const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n    const [expandableItemCount, setExpandableItemCount] = useState<number>(0);\n\n    const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n        (uuid, { shouldOnlyOpen } = {}) => {\n            setOpenItemUuid((currentOpenItemUuid) => {\n                if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n                    return undefined;\n                }\n\n                return uuid;\n            });\n        },\n        [setOpenItemUuid]\n    );\n\n    const incrementExpandableItemCount = useCallback(() => {\n        setExpandableItemCount((count) => count + 1);\n\n        return () => {\n            setExpandableItemCount((count) => count - 1);\n        };\n    }, [setExpandableItemCount]);\n\n    const providerValue = useMemo<IListContext>(\n        () => ({\n            isAnyItemExpandable: expandableItemCount > 0,\n            updateOpenItemUuid,\n            openItemUuid,\n            incrementExpandableItemCount,\n        }),\n        [expandableItemCount, incrementExpandableItemCount, openItemUuid, updateOpenItemUuid]\n    );\n\n    return <ListContext.Provider value={providerValue}>{children}</ListContext.Provider>;\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":";;;;;;AAAA;AAA6E;AAAA;AAStE,MAAMA,WAAW,gBAAGC,cAAK,CAACC,aAAa,CAAe;EACzDC,4BAA4B,EAAE,MAAM,MAAM,CAAC,CAAC;EAC5CC,mBAAmB,EAAE,KAAK;EAC1BC,YAAY,EAAEC,SAAS;EACvBC,kBAAkB,EAAE,MAAM,CAAC;AAC/B,CAAC,CAAC;AAAC;AAEHP,WAAW,CAACQ,WAAW,GAAG,aAAa;AASvC,MAAMC,IAAmB,GAAG,QAAkB;EAAA,IAAjB;IAAEC;EAAS,CAAC;EACrC,MAAM,CAACL,YAAY,EAAEM,eAAe,CAAC,GAAG,IAAAC,eAAQ,EAA+BN,SAAS,CAAC;EACzF,MAAM,CAACO,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG,IAAAF,eAAQ,EAAS,CAAC,CAAC;EAEzE,MAAML,kBAAkB,GAAG,IAAAQ,kBAAW,EAClC,UAACC,IAAI,EAA8B;IAAA,IAA5B;MAAEC;IAAe,CAAC,uEAAG,CAAC,CAAC;IAC1BN,eAAe,CAAEO,mBAAmB,IAAK;MACrC,IAAIA,mBAAmB,KAAKF,IAAI,IAAIC,cAAc,KAAK,IAAI,EAAE;QACzD,OAAOX,SAAS;MACpB;MAEA,OAAOU,IAAI;IACf,CAAC,CAAC;EACN,CAAC,EACD,CAACL,eAAe,CAAC,CACpB;EAED,MAAMR,4BAA4B,GAAG,IAAAY,kBAAW,EAAC,MAAM;IACnDD,sBAAsB,CAAEK,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;IAE5C,OAAO,MAAM;MACTL,sBAAsB,CAAEK,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,CAACL,sBAAsB,CAAC,CAAC;EAE5B,MAAMM,aAAa,GAAG,IAAAC,cAAO,EACzB,OAAO;IACHjB,mBAAmB,EAAES,mBAAmB,GAAG,CAAC;IAC5CN,kBAAkB;IAClBF,YAAY;IACZF;EACJ,CAAC,CAAC,EACF,CAACU,mBAAmB,EAAEV,4BAA4B,EAAEE,YAAY,EAAEE,kBAAkB,CAAC,CACxF;EAED,oBAAO,6BAAC,WAAW,CAAC,QAAQ;IAAC,KAAK,EAAEa;EAAc,GAAEV,QAAQ,CAAwB;AACxF,CAAC;AAEDD,IAAI,CAACD,WAAW,GAAG,MAAM;AAAC,eAEXC,IAAI;AAAA"}
+{"version":3,"file":"List.js","names":["AnimatePresence","MotionConfig","React","useCallback","useMemo","useState","ListContext","createContext","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","_ref","children","setOpenItemUuid","expandableItemCount","setExpandableItemCount","uuid","shouldOnlyOpen","arguments","length","currentOpenItemUuid","count","providerValue","createElement","Provider","value","transition","type","initial"],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ninterface IListContext {\n    incrementExpandableItemCount: () => () => void;\n    isAnyItemExpandable: boolean;\n    isWrapped: boolean;\n    openItemUuid: string | undefined;\n    updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n    incrementExpandableItemCount: () => () => {},\n    isAnyItemExpandable: false,\n    isWrapped: false,\n    openItemUuid: undefined,\n    updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n    /**\n     * The items of the list\n     */\n    children: ReactNode;\n    /**\n     * This value must be set for nested AccordionGroup components. This adjusts the style of\n     * the head and the padding of the content accordions.\n     */\n    isWrapped?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false }) => {\n    const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n    const [expandableItemCount, setExpandableItemCount] = useState<number>(0);\n\n    const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n        (uuid, { shouldOnlyOpen } = {}) => {\n            setOpenItemUuid((currentOpenItemUuid) => {\n                if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n                    return undefined;\n                }\n\n                return uuid;\n            });\n        },\n        [setOpenItemUuid],\n    );\n\n    const incrementExpandableItemCount = useCallback(() => {\n        setExpandableItemCount((count) => count + 1);\n\n        return () => {\n            setExpandableItemCount((count) => count - 1);\n        };\n    }, [setExpandableItemCount]);\n\n    const providerValue = useMemo<IListContext>(\n        () => ({\n            incrementExpandableItemCount,\n            isAnyItemExpandable: expandableItemCount > 0,\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n        }),\n        [\n            expandableItemCount,\n            incrementExpandableItemCount,\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n        ],\n    );\n\n    return (\n        <ListContext.Provider value={providerValue}>\n            <MotionConfig transition={{ type: 'tween' }}>\n                <AnimatePresence initial={false}>{children}</AnimatePresence>\n            </MotionConfig>\n        </ListContext.Provider>\n    );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,eAAe;AAC7D,OAAOC,KAAK,IAAmBC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAU5E,OAAO,MAAMC,WAAW,gBAAGJ,KAAK,CAACK,aAAa,CAAe;EACzDC,4BAA4B,EAAEA,CAAA,KAAM,MAAM,CAAC,CAAC;EAC5CC,mBAAmB,EAAE,KAAK;EAC1BC,SAAS,EAAE,KAAK;EAChBC,YAAY,EAAEC,SAAS;EACvBC,kBAAkB,EAAEA,CAAA,KAAM,CAAC;AAC/B,CAAC,CAAC;AAEFP,WAAW,CAACQ,WAAW,GAAG,aAAa;AAcvC,MAAMC,IAAmB,GAAGC,IAAA,IAAqC;EAAA,IAApC;IAAEC,QAAQ;IAAEP,SAAS,GAAG;EAAM,CAAC,GAAAM,IAAA;EACxD,MAAM,CAACL,YAAY,EAAEO,eAAe,CAAC,GAAGb,QAAQ,CAA+BO,SAAS,CAAC;EACzF,MAAM,CAACO,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGf,QAAQ,CAAS,CAAC,CAAC;EAEzE,MAAMQ,kBAAkB,GAAGV,WAAW,CAClC,UAACkB,IAAI,EAA8B;IAAA,IAA5B;MAAEC;IAAe,CAAC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAX,SAAA,GAAAW,SAAA,MAAG,CAAC,CAAC;IAC1BL,eAAe,CAAEO,mBAAmB,IAAK;MACrC,IAAIA,mBAAmB,KAAKJ,IAAI,IAAIC,cAAc,KAAK,IAAI,EAAE;QACzD,OAAOV,SAAS;MACpB;MAEA,OAAOS,IAAI;IACf,CAAC,CAAC;EACN,CAAC,EACD,CAACH,eAAe,CACpB,CAAC;EAED,MAAMV,4BAA4B,GAAGL,WAAW,CAAC,MAAM;IACnDiB,sBAAsB,CAAEM,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;IAE5C,OAAO,MAAM;MACTN,sBAAsB,CAAEM,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,CAACN,sBAAsB,CAAC,CAAC;EAE5B,MAAMO,aAAa,GAAGvB,OAAO,CACzB,OAAO;IACHI,4BAA4B;IAC5BC,mBAAmB,EAAEU,mBAAmB,GAAG,CAAC;IAC5CT,SAAS;IACTC,YAAY;IACZE;EACJ,CAAC,CAAC,EACF,CACIM,mBAAmB,EACnBX,4BAA4B,EAC5BE,SAAS,EACTC,YAAY,EACZE,kBAAkB,CAE1B,CAAC;EAED,oBACIX,KAAA,CAAA0B,aAAA,CAACtB,WAAW,CAACuB,QAAQ;IAACC,KAAK,EAAEH;EAAc,gBACvCzB,KAAA,CAAA0B,aAAA,CAAC3B,YAAY;IAAC8B,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBACxC9B,KAAA,CAAA0B,aAAA,CAAC5B,eAAe;IAACiC,OAAO,EAAE;EAAM,GAAEhB,QAA0B,CAClD,CACI,CAAC;AAE/B,CAAC;AAEDF,IAAI,CAACD,WAAW,GAAG,MAAM;AAEzB,eAAeC,IAAI"}

package/lib/components/list/list-item/ListItem.d.ts

@@ -50,7 +50,7 @@ type ListItemProps = {
      */
     rightElements?: [ReactNode, ...ReactNode[]];
     /**
-     * Images of users should always be displayed in a round shape. Therefore
+     * Images of users should always be displayed in a round shape. Therefore,
      * this property can be set to true.
      */
     shouldShowRoundImage?: boolean;

package/lib/components/list/list-item/ListItem.js

@@ -1,19 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _framerMotion = require("framer-motion");
-var _react = _interopRequireWildcard(require("react"));
-var _uuid = require("../../../hooks/uuid");
-var _List = require("../List");
-var _ListItemBody = _interopRequireDefault(require("./list-item-body/ListItemBody"));
-var _ListItemHead = _interopRequireDefault(require("./list-item-head/ListItemHead"));
-var _ListItem = require("./ListItem.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; }
+import { AnimatePresence } from 'framer-motion';
+import React, { useCallback, useContext, useEffect } from 'react';
+import { useUuid } from '../../../hooks/uuid';
+import { ListContext } from '../List';
+import ListItemBody from './list-item-body/ListItemBody';
+import ListItemHead from './list-item-head/ListItemHead';
+import { StyledMotionListItem } from './ListItem.styles';
 const ListItem = _ref => {
   let {
     children,
@@ -33,13 +24,14 @@ const ListItem = _ref => {
   const {
     incrementExpandableItemCount,
     isAnyItemExpandable,
+    isWrapped,
     openItemUuid,
     updateOpenItemUuid
-  } = (0, _react.useContext)(_List.ListContext);
-  const uuid = (0, _uuid.useUuid)();
+  } = useContext(ListContext);
+  const uuid = useUuid();
   const isExpandable = children !== undefined;
-  const isItemOpen = isOpen !== null && isOpen !== void 0 ? isOpen : openItemUuid === uuid;
-  const handleHeadClick = (0, _react.useCallback)(event => {
+  const isItemOpen = isOpen ?? openItemUuid === uuid;
+  const handleHeadClick = useCallback(event => {
     if (isExpandable) {
       updateOpenItemUuid(uuid);
     }
@@ -47,7 +39,7 @@ const ListItem = _ref => {
       onClick(event);
     }
   }, [isExpandable, onClick, updateOpenItemUuid, uuid]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (isExpandable) {
       // The incrementExpandableItemCount function returns an cleanup
       // function to decrement expandableItemCount if component unmounts
@@ -55,18 +47,32 @@ const ListItem = _ref => {
     }
     return undefined;
   }, [incrementExpandableItemCount, isExpandable]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (isDefaultOpen) {
       updateOpenItemUuid(uuid, {
         shouldOnlyOpen: true
       });
     }
   }, [isDefaultOpen, updateOpenItemUuid, uuid]);
-  return /*#__PURE__*/_react.default.createElement(_ListItem.StyledListItem, {
+  return /*#__PURE__*/React.createElement(StyledMotionListItem, {
+    animate: {
+      height: 'auto',
+      opacity: 1
+    },
     className: "beta-chayns-list-item",
-    isClickable: typeof onClick === 'function' || isExpandable,
-    isOpen: isItemOpen
-  }, /*#__PURE__*/_react.default.createElement(_ListItemHead.default, {
+    exit: {
+      height: 0,
+      opacity: 0
+    },
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    key: `list-item-${uuid}`,
+    $isClickable: typeof onClick === 'function' || isExpandable,
+    $isOpen: isItemOpen,
+    $isWrapped: isWrapped
+  }, /*#__PURE__*/React.createElement(ListItemHead, {
     hoverItem: hoverItem,
     icons: icons,
     images: images,
@@ -80,11 +86,12 @@ const ListItem = _ref => {
     subtitle: subtitle,
     shouldShowRoundImage: shouldShowRoundImage,
     title: title
-  }), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+  }), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
-  }, isExpandable && isItemOpen && /*#__PURE__*/_react.default.createElement(_ListItemBody.default, null, children)));
+  }, isExpandable && isItemOpen && /*#__PURE__*/React.createElement(ListItemBody, {
+    id: uuid
+  }, children)));
 };
 ListItem.displayName = 'ListItem';
-var _default = ListItem;
-exports.default = _default;
+export default ListItem;
 //# sourceMappingURL=ListItem.js.map

package/lib/components/list/list-item/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["ListItem","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","subtitle","shouldShowRoundImage","title","incrementExpandableItemCount","isAnyItemExpandable","openItemUuid","updateOpenItemUuid","useContext","ListContext","uuid","useUuid","isExpandable","undefined","isItemOpen","handleHeadClick","useCallback","event","useEffect","shouldOnlyOpen","displayName"],"sources":["../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledListItem } from './ListItem.styles';\n\ntype ListItemProps = {\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: [ReactNode, ...ReactNode[]];\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: [ReactNode, ...ReactNode[]];\n    /**\n     * Images of users should always be displayed in a round shape. Therefore\n     * this property can be set to true.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    isOpen,\n    onClick,\n    onLongPress,\n    leftElements,\n    rightElements,\n    subtitle,\n    shouldShowRoundImage,\n    title,\n}) => {\n    const { incrementExpandableItemCount, isAnyItemExpandable, openItemUuid, updateOpenItemUuid } =\n        useContext(ListContext);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid]\n    );\n\n    useEffect(() => {\n        if (isExpandable) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    return (\n        <StyledListItem\n            className=\"beta-chayns-list-item\"\n            isClickable={typeof onClick === 'function' || isExpandable}\n            isOpen={isItemOpen}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                onClick={handleHeadClick}\n                onLongPress={onLongPress}\n                leftElements={leftElements}\n                rightElements={rightElements}\n                subtitle={subtitle}\n                shouldShowRoundImage={shouldShowRoundImage}\n                title={title}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && <ListItemBody>{children}</ListItemBody>}\n            </AnimatePresence>\n        </StyledListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";;;;;;AAAA;AACA;AASA;AACA;AACA;AACA;AACA;AAAmD;AAAA;AAAA;AAmEnD,MAAMA,QAA2B,GAAG,QAc9B;EAAA,IAd+B;IACjCC,QAAQ;IACRC,SAAS;IACTC,KAAK;IACLC,MAAM;IACNC,aAAa;IACbC,MAAM;IACNC,OAAO;IACPC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,QAAQ;IACRC,oBAAoB;IACpBC;EACJ,CAAC;EACG,MAAM;IAAEC,4BAA4B;IAAEC,mBAAmB;IAAEC,YAAY;IAAEC;EAAmB,CAAC,GACzF,IAAAC,iBAAU,EAACC,iBAAW,CAAC;EAE3B,MAAMC,IAAI,GAAG,IAAAC,aAAO,GAAE;EAEtB,MAAMC,YAAY,GAAGrB,QAAQ,KAAKsB,SAAS;EAC3C,MAAMC,UAAU,GAAGlB,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIU,YAAY,KAAKI,IAAI;EAElD,MAAMK,eAAe,GAAG,IAAAC,kBAAW,EAC9BC,KAAK,IAAK;IACP,IAAIL,YAAY,EAAE;MACdL,kBAAkB,CAACG,IAAI,CAAC;IAC5B;IAEA,IAAI,OAAOb,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACoB,KAAK,CAAC;IAClB;EACJ,CAAC,EACD,CAACL,YAAY,EAAEf,OAAO,EAAEU,kBAAkB,EAAEG,IAAI,CAAC,CACpD;EAED,IAAAQ,gBAAS,EAAC,MAAM;IACZ,IAAIN,YAAY,EAAE;MACd;MACA;MACA,OAAOR,4BAA4B,EAAE;IACzC;IAEA,OAAOS,SAAS;EACpB,CAAC,EAAE,CAACT,4BAA4B,EAAEQ,YAAY,CAAC,CAAC;EAEhD,IAAAM,gBAAS,EAAC,MAAM;IACZ,IAAIvB,aAAa,EAAE;MACfY,kBAAkB,CAACG,IAAI,EAAE;QAAES,cAAc,EAAE;MAAK,CAAC,CAAC;IACtD;EACJ,CAAC,EAAE,CAACxB,aAAa,EAAEY,kBAAkB,EAAEG,IAAI,CAAC,CAAC;EAE7C,oBACI,6BAAC,wBAAc;IACX,SAAS,EAAC,uBAAuB;IACjC,WAAW,EAAE,OAAOb,OAAO,KAAK,UAAU,IAAIe,YAAa;IAC3D,MAAM,EAAEE;EAAW,gBAEnB,6BAAC,qBAAY;IACT,SAAS,EAAEtB,SAAU;IACrB,KAAK,EAAEC,KAAM;IACb,MAAM,EAAEC,MAAO;IACf,mBAAmB,EAAEW,mBAAoB;IACzC,YAAY,EAAEO,YAAa;IAC3B,MAAM,EAAEE,UAAW;IACnB,OAAO,EAAEC,eAAgB;IACzB,WAAW,EAAEjB,WAAY;IACzB,YAAY,EAAEC,YAAa;IAC3B,aAAa,EAAEC,aAAc;IAC7B,QAAQ,EAAEC,QAAS;IACnB,oBAAoB,EAAEC,oBAAqB;IAC3C,KAAK,EAAEC;EAAM,EACf,eACF,6BAAC,6BAAe;IAAC,OAAO,EAAE;EAAM,GAC3BS,YAAY,IAAIE,UAAU,iBAAI,6BAAC,qBAAY,QAAEvB,QAAQ,CAAgB,CACxD,CACL;AAEzB,CAAC;AAEDD,QAAQ,CAAC8B,WAAW,GAAG,UAAU;AAAC,eAEnB9B,QAAQ;AAAA"}
+{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","subtitle","shouldShowRoundImage","title","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isWrapped","id","displayName"],"sources":["../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\ntype ListItemProps = {\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: [ReactNode, ...ReactNode[]];\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: [ReactNode, ...ReactNode[]];\n    /**\n     * Images of users should always be displayed in a round shape. Therefore,\n     * this property can be set to true.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    isOpen,\n    onClick,\n    onLongPress,\n    leftElements,\n    rightElements,\n    subtitle,\n    shouldShowRoundImage,\n    title,\n}) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid],\n    );\n\n    useEffect(() => {\n        if (isExpandable) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    return (\n        <StyledMotionListItem\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-list-item\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            key={`list-item-${uuid}`}\n            $isClickable={typeof onClick === 'function' || isExpandable}\n            $isOpen={isItemOpen}\n            $isWrapped={isWrapped}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                onClick={handleHeadClick}\n                onLongPress={onLongPress}\n                leftElements={leftElements}\n                rightElements={rightElements}\n                subtitle={subtitle}\n                shouldShowRoundImage={shouldShowRoundImage}\n                title={title}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && <ListItemBody id={uuid}>{children}</ListItemBody>}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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"}