npm - @chayns-components/core - Versions diffs - 5.0.0-beta.730 → 5.0.0-beta.737 - Mend

@chayns-components/core 5.0.0-beta.730 → 5.0.0-beta.737

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js CHANGED Viewed

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.AccordionGroupContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _uuid = require("../../../hooks/uuid");
+var _AreaContextProvider = require("../../area-provider/AreaContextProvider");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const AccordionGroupContext = exports.AccordionGroupContext = /*#__PURE__*/_react.default.createContext({
@@ -31,6 +32,8 @@ const AccordionGroup = ({
   const updateAccordionUuids = (0, _react.useCallback)(uuids => {
     setAccordionUuids(uuids);
   }, []);
+  const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
+  const shouldWrap = areaProvider.shouldChangeColor ? true : isWrapped;
   const updateOpenAccordionUuid = (0, _react.useCallback)((uuid, {
     shouldOnlyOpen
   } = {}) => {
@@ -64,14 +67,14 @@ const AccordionGroup = ({
     }
   }, [onClose, onOpen, openAccordionUuid]);
   const providerValue = (0, _react.useMemo)(() => ({
-    isWrapped,
+    isWrapped: shouldWrap,
     openAccordionUuid,
     setOpenAccordionUuid,
     updateOpenAccordionUuid,
     updateAccordionUuids,
     accordionUuids,
     accordionGroupUuid: accordionGroupId
-  }), [accordionGroupId, accordionUuids, isWrapped, openAccordionUuid, updateAccordionUuids, updateOpenAccordionUuid]);
+  }), [accordionGroupId, accordionUuids, shouldWrap, openAccordionUuid, updateAccordionUuids, updateOpenAccordionUuid]);
   return /*#__PURE__*/_react.default.createElement(AccordionGroupContext.Provider, {
     value: providerValue
   }, children);

package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccordionGroup.js","names":["_react","_interopRequireWildcard","require","_uuid","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AccordionGroupContext","exports","React","createContext","isWrapped","undefined","openAccordionUuid","setOpenAccordionUuid","updateOpenAccordionUuid","accordionUuids","updateAccordionUuids","accordionGroupUuid","displayName","AccordionGroup","children","onClose","onOpen","useState","setAccordionUuids","accordionGroupId","useUuid","isInitialRenderRef","useRef","useCallback","uuids","uuid","shouldOnlyOpen","currentOpenAccordionUuid","useEffect","elements","document","querySelectorAll","newOrder","Array","from","map","el","getAttribute","result","forEach","includes","push","replace","current","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../../../src/components/accordion/accordion-group/AccordionGroup.tsx"],"sourcesContent":["import React, {\n Dispatch,\n FC,\n ReactNode,\n SetStateAction,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\n\ntype IUpdateOpenAccordionUuid = (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\ntype IUpdateAccordionUuids = (uuids: string[]) => void;\n\ninterface IAccordionGroupContext {\n isWrapped?: boolean;\n openAccordionUuid?: string;\n setOpenAccordionUuid?: Dispatch<SetStateAction<string \| undefined>>;\n updateOpenAccordionUuid?: IUpdateOpenAccordionUuid;\n accordionUuids?: string[];\n updateAccordionUuids?: IUpdateAccordionUuids;\n accordionGroupUuid?: string;\n}\n\nexport const AccordionGroupContext = React.createContext<IAccordionGroupContext>({\n isWrapped: undefined,\n openAccordionUuid: undefined,\n setOpenAccordionUuid: undefined,\n updateOpenAccordionUuid: undefined,\n accordionUuids: undefined,\n updateAccordionUuids: undefined,\n accordionGroupUuid: undefined,\n});\n\nAccordionGroupContext.displayName = 'AccordionGroupContext';\n\ntype AccordionGroupProps = {\n /*\n The Accordions that should be grouped. Accordions with the same group are\n * automatically closed when an `Accordion` of the group is opened.\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 Function that is executed when all accordions in group are closed.\n /\n onClose?: VoidFunction;\n /\n Function that is executed when any accordion in group will be opened.\n */\n onOpen?: VoidFunction;\n};\n\nconst AccordionGroup: FC<AccordionGroupProps> = ({ children, isWrapped, onClose, onOpen }) => {\n const [openAccordionUuid, setOpenAccordionUuid] =\n useState<IAccordionGroupContext['openAccordionUuid']>(undefined);\n const [accordionUuids, setAccordionUuids] = useState<string[]>();\n\n const accordionGroupId = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const updateAccordionUuids = useCallback((uuids: string[]) => {\n setAccordionUuids(uuids);\n }, []);\n\n const updateOpenAccordionUuid = useCallback<IUpdateOpenAccordionUuid>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenAccordionUuid((currentOpenAccordionUuid) => {\n if (currentOpenAccordionUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenAccordionUuid],\n );\n\n useEffect(() => {\n const elements = document.querySelectorAll('[data-uuid]');\n const newOrder = Array.from(elements).map((el) => el.getAttribute('data-uuid'));\n\n const result: string[] = [];\n\n newOrder.forEach((uuid) => {\n if (uuid?.includes(accordionGroupId)) {\n result.push(uuid.replace(`${accordionGroupId}---`, ''));\n }\n });\n\n updateAccordionUuids(result);\n }, [accordionGroupId, updateAccordionUuids]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (typeof openAccordionUuid === 'string') {\n if (typeof onOpen === 'function') {\n onOpen();\n }\n } else if (typeof onClose === 'function') {\n onClose();\n }\n }, [onClose, onOpen, openAccordionUuid]);\n\n const providerValue = useMemo<IAccordionGroupContext>(\n () => ({\n isWrapped,\n openAccordionUuid,\n setOpenAccordionUuid,\n updateOpenAccordionUuid,\n updateAccordionUuids,\n accordionUuids,\n accordionGroupUuid: accordionGroupId,\n }),\n [\n accordionGroupId,\n accordionUuids,\n ~~isWrapped~~,\n openAccordionUuid,\n updateAccordionUuids,\n updateOpenAccordionUuid,\n ],\n );\n\n return (\n <AccordionGroupContext.Provider value={providerValue}>\n {children}\n </AccordionGroupContext.Provider>\n );\n};\n\nAccordionGroup.displayName = 'AccordionGroup';\n\nexport default AccordionGroup;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;~~AAWA~~,IAAAC,KAAA,GAAAD,OAAA;~~AAA8C~~,~~SAAAE~~,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,~~SAAAJ~~,~~wBAAAI~~,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;~~AAevC~~,MAAMW,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,gBAAGE,cAAK,CAACC,aAAa,CAAyB;EAC7EC,SAAS,EAAEC,SAAS;EACpBC,iBAAiB,EAAED,SAAS;EAC5BE,oBAAoB,EAAEF,SAAS;EAC/BG,uBAAuB,EAAEH,SAAS;EAClCI,cAAc,EAAEJ,SAAS;EACzBK,oBAAoB,EAAEL,SAAS;EAC/BM,kBAAkB,EAAEN;AACxB,CAAC,CAAC;AAEFL,qBAAqB,CAACY,WAAW,GAAG,uBAAuB;AAuB3D,MAAMC,cAAuC,GAAGA,CAAC;EAAEC,QAAQ;EAAEV,SAAS;EAAEW,OAAO;EAAEC;AAAO,CAAC,KAAK;EAC1F,MAAM,CAACV,iBAAiB,EAAEC,oBAAoB,CAAC,GAC3C,IAAAU,eAAQ,EAA8CZ,SAAS,CAAC;EACpE,MAAM,CAACI,cAAc,EAAES,iBAAiB,CAAC,GAAG,IAAAD,eAAQ,EAAW,CAAC;EAEhE,MAAME,gBAAgB,GAAG,IAAAC,aAAO,EAAC,CAAC;EAElC,MAAMC,kBAAkB,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EAEvC,MAAMZ,oBAAoB,GAAG,IAAAa,kBAAW,EAAEC,KAAe,IAAK;IAC1DN,iBAAiB,CAACM,KAAK,CAAC;EAC5B,CAAC,EAAE,EAAE,CAAC;EAEN,~~MAAMhB~~,uBAAuB,GAAG,IAAAe,kBAAW,EACvC,~~CAACE~~,IAAI,EAAE;IAAEC;EAAe,CAAC,GAAG,CAAC,CAAC,KAAK;IAC/~~BnB~~,oBAAoB,~~CAAEoB~~,wBAAwB,IAAK;MAC/C,IAAIA,wBAAwB,KAAKF,IAAI,IAAIC,cAAc,KAAK,IAAI,EAAE;QAC9D,~~OAAOrB~~,SAAS;MACpB;MAEA,~~OAAOoB~~,IAAI;IACf,CAAC,CAAC;EACN,CAAC,EACD,~~CAAClB~~,oBAAoB,CACzB,CAAC;EAED,~~IAAAqB~~,gBAAS,EAAC,MAAM;IACZ,MAAMC,QAAQ,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,aAAa,CAAC;IACzD,MAAMC,QAAQ,GAAGC,KAAK,CAACC,IAAI,CAACL,QAAQ,CAAC,CAACM,GAAG,CAAEC,EAAE,IAAKA,EAAE,CAACC,YAAY,CAAC,WAAW,CAAC,CAAC;IAE/E,MAAMC,MAAgB,GAAG,EAAE;IAE3BN,QAAQ,CAACO,OAAO,CAAEd,IAAI,IAAK;MACvB,IAAIA,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEe,QAAQ,~~CAACrB~~,gBAAgB,CAAC,EAAE;~~QAClCmB~~,MAAM,CAACG,IAAI,CAAChB,IAAI,CAACiB,OAAO,CAAC,~~GAAGvB~~,gBAAgB,KAAK,EAAE,EAAE,CAAC,CAAC;MAC3D;IACJ,CAAC,CAAC;IAEFT,oBAAoB,~~CAAC4B~~,MAAM,CAAC;EAChC,CAAC,EAAE,~~CAACnB~~,gBAAgB,EAAET,oBAAoB,CAAC,CAAC;EAE5C,~~IAAAkB~~,gBAAS,EAAC,MAAM;IACZ,~~IAAIP~~,kBAAkB,~~CAACsB~~,OAAO,EAAE;~~MAC5BtB~~,kBAAkB,~~CAACsB~~,OAAO,GAAG,KAAK;IACtC,CAAC,MAAM,IAAI,~~OAAOrC~~,iBAAiB,KAAK,QAAQ,EAAE;MAC9C,IAAI,OAAOU,MAAM,KAAK,UAAU,EAAE;QAC9BA,MAAM,CAAC,CAAC;MACZ;IACJ,CAAC,MAAM,IAAI,OAAOD,OAAO,KAAK,UAAU,EAAE;MACtCA,OAAO,CAAC,CAAC;IACb;EACJ,CAAC,EAAE,CAACA,OAAO,EAAEC,MAAM,EAAEV,iBAAiB,CAAC,CAAC;EAExC,~~MAAMsC~~,aAAa,GAAG,IAAAC,cAAO,EACzB,OAAO;~~IACHzC~~,SAAS;~~IACTE~~,iBAAiB;IACjBC,oBAAoB;IACpBC,uBAAuB;IACvBE,oBAAoB;IACpBD,cAAc;IACdE,kBAAkB,EAAEQ;EACxB,CAAC,CAAC,EACF,CACIA,gBAAgB,EAChBV,cAAc,~~EACdL~~,~~SAAS~~,~~EACTE~~,iBAAiB,EACjBI,oBAAoB,EACpBF,uBAAuB,CAE/B,CAAC;EAED,~~oBACIhC~~,MAAA,~~CAAAU~~,OAAA,~~CAAA4D~~,aAAA,~~CAAC9C~~,qBAAqB,~~CAAC+C~~,QAAQ;IAACC,KAAK,EAAEJ;EAAc,~~GAChD9B~~,QAC2B,CAAC;AAEzC,CAAC;AAEDD,cAAc,CAACD,WAAW,GAAG,gBAAgB;AAAC,~~IAAAqC~~,QAAA,~~GAAAhD~~,OAAA,CAAAf,OAAA,GAE/B2B,cAAc","ignoreList":[]}
1	+ {"version":3,"file":"AccordionGroup.js","names":["_react","_interopRequireWildcard","require","_uuid","_AreaContextProvider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AccordionGroupContext","exports","React","createContext","isWrapped","undefined","openAccordionUuid","setOpenAccordionUuid","updateOpenAccordionUuid","accordionUuids","updateAccordionUuids","accordionGroupUuid","displayName","AccordionGroup","children","onClose","onOpen","useState","setAccordionUuids","accordionGroupId","useUuid","isInitialRenderRef","useRef","useCallback","uuids","areaProvider","useContext","AreaContext","shouldWrap","shouldChangeColor","uuid","shouldOnlyOpen","currentOpenAccordionUuid","useEffect","elements","document","querySelectorAll","newOrder","Array","from","map","el","getAttribute","result","forEach","includes","push","replace","current","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../../../src/components/accordion/accordion-group/AccordionGroup.tsx"],"sourcesContent":["import React, {\n Dispatch,\n FC,\n ReactNode,\n SetStateAction,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\n\ntype IUpdateOpenAccordionUuid = (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\ntype IUpdateAccordionUuids = (uuids: string[]) => void;\n\ninterface IAccordionGroupContext {\n isWrapped?: boolean;\n openAccordionUuid?: string;\n setOpenAccordionUuid?: Dispatch<SetStateAction<string \| undefined>>;\n updateOpenAccordionUuid?: IUpdateOpenAccordionUuid;\n accordionUuids?: string[];\n updateAccordionUuids?: IUpdateAccordionUuids;\n accordionGroupUuid?: string;\n}\n\nexport const AccordionGroupContext = React.createContext<IAccordionGroupContext>({\n isWrapped: undefined,\n openAccordionUuid: undefined,\n setOpenAccordionUuid: undefined,\n updateOpenAccordionUuid: undefined,\n accordionUuids: undefined,\n updateAccordionUuids: undefined,\n accordionGroupUuid: undefined,\n});\n\nAccordionGroupContext.displayName = 'AccordionGroupContext';\n\ntype AccordionGroupProps = {\n /*\n The Accordions that should be grouped. Accordions with the same group are\n * automatically closed when an `Accordion` of the group is opened.\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 Function that is executed when all accordions in group are closed.\n /\n onClose?: VoidFunction;\n /\n Function that is executed when any accordion in group will be opened.\n */\n onOpen?: VoidFunction;\n};\n\nconst AccordionGroup: FC<AccordionGroupProps> = ({ children, isWrapped, onClose, onOpen }) => {\n const [openAccordionUuid, setOpenAccordionUuid] =\n useState<IAccordionGroupContext['openAccordionUuid']>(undefined);\n const [accordionUuids, setAccordionUuids] = useState<string[]>();\n\n const accordionGroupId = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const updateAccordionUuids = useCallback((uuids: string[]) => {\n setAccordionUuids(uuids);\n }, []);\n\n const areaProvider = useContext(AreaContext);\n\n const shouldWrap = areaProvider.shouldChangeColor ? true : isWrapped;\n\n const updateOpenAccordionUuid = useCallback<IUpdateOpenAccordionUuid>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenAccordionUuid((currentOpenAccordionUuid) => {\n if (currentOpenAccordionUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenAccordionUuid],\n );\n\n useEffect(() => {\n const elements = document.querySelectorAll('[data-uuid]');\n const newOrder = Array.from(elements).map((el) => el.getAttribute('data-uuid'));\n\n const result: string[] = [];\n\n newOrder.forEach((uuid) => {\n if (uuid?.includes(accordionGroupId)) {\n result.push(uuid.replace(`${accordionGroupId}---`, ''));\n }\n });\n\n updateAccordionUuids(result);\n }, [accordionGroupId, updateAccordionUuids]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (typeof openAccordionUuid === 'string') {\n if (typeof onOpen === 'function') {\n onOpen();\n }\n } else if (typeof onClose === 'function') {\n onClose();\n }\n }, [onClose, onOpen, openAccordionUuid]);\n\n const providerValue = useMemo<IAccordionGroupContext>(\n () => ({\n isWrapped: shouldWrap,\n openAccordionUuid,\n setOpenAccordionUuid,\n updateOpenAccordionUuid,\n updateAccordionUuids,\n accordionUuids,\n accordionGroupUuid: accordionGroupId,\n }),\n [\n accordionGroupId,\n accordionUuids,\n shouldWrap,\n openAccordionUuid,\n updateAccordionUuids,\n updateOpenAccordionUuid,\n ],\n );\n\n return (\n <AccordionGroupContext.Provider value={providerValue}>\n {children}\n </AccordionGroupContext.Provider>\n );\n};\n\nAccordionGroup.displayName = 'AccordionGroup';\n\nexport default AccordionGroup;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/list/list-item/ListItem.js CHANGED Viewed

@@ -29,6 +29,7 @@ const ListItem = ({
   shouldShowSingleRightElementCentered = false,
   subtitle,
   shouldShowRoundImage,
+  shouldShowSeparatorBelow = false,
   title,
   titleElement
 }) => {
@@ -83,7 +84,8 @@ const ListItem = ({
     key: `list-item-${uuid}`,
     $isClickable: isClickable,
     $isOpen: isItemOpen,
-    $isWrapped: isWrapped
+    $isWrapped: isWrapped,
+    $shouldShowSeparatorBelow: shouldShowSeparatorBelow
   }, /*#__PURE__*/_react.default.createElement(_ListItemHead.default, {
     hoverItem: hoverItem,
     icons: icons,

package/lib/cjs/components/list/list-item/ListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AreaContextProvider","_interopRequireDefault","_List","_ListItemBody","_ListItemHead","_ListItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItem","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldShowSingleRightElementCentered","subtitle","shouldShowRoundImage","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","uuid","useUuid","isExpandable","undefined","isItemOpen","handleHeadClick","useCallback","event","useEffect","shouldOnlyOpen","isClickable","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isWrapped","AnimatePresence","id","displayName","_default","exports"],"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 AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type 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?: ListItemElements;\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?: ListItemElements;\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 Whether a single rightElement should be centered. Only works if one rightElement is given.\n /\n shouldShowSingleRightElementCentered?: 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 Additional elements to be displayed in the header next to the title.\n */\n titleElement?: 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 shouldShowSingleRightElementCentered = false,\n subtitle,\n shouldShowRoundImage,\n title,\n titleElement,\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 const isClickable = typeof onClick === 'function' \|\| isExpandable;\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={isClickable}\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 leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n rightElements={rightElements}\n subtitle={subtitle}\n shouldShowRoundImage={shouldShowRoundImage}\n shouldShowSingleRightElementCentered={shouldShowSingleRightElementCentered}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isExpandable && isItemOpen && (\n <ListItemBody id={uuid}>\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledMotionListItem>\n );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ListItem.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AreaContextProvider","_interopRequireDefault","_List","_ListItemBody","_ListItemHead","_ListItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItem","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldShowSingleRightElementCentered","subtitle","shouldShowRoundImage","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","uuid","useUuid","isExpandable","undefined","isItemOpen","handleHeadClick","useCallback","event","useEffect","shouldOnlyOpen","isClickable","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isWrapped","$shouldShowSeparatorBelow","AnimatePresence","id","displayName","_default","exports"],"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 AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type 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?: ListItemElements;\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?: ListItemElements;\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 Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n /\n shouldShowSeparatorBelow?: boolean;\n /\n Whether a single rightElement should be centered. Only works if one rightElement is given.\n /\n shouldShowSingleRightElementCentered?: 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 Additional elements to be displayed in the header next to the title.\n */\n titleElement?: 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 shouldShowSingleRightElementCentered = false,\n subtitle,\n shouldShowRoundImage,\n shouldShowSeparatorBelow = false,\n title,\n titleElement,\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 const isClickable = typeof onClick === 'function' \|\| isExpandable;\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={isClickable}\n $isOpen={isItemOpen}\n $isWrapped={isWrapped}\n $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n >\n <ListItemHead\n hoverItem={hoverItem}\n icons={icons}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n rightElements={rightElements}\n subtitle={subtitle}\n shouldShowRoundImage={shouldShowRoundImage}\n shouldShowSingleRightElementCentered={shouldShowSingleRightElementCentered}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isExpandable && isItemOpen && (\n <ListItemBody id={uuid}>\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledMotionListItem>\n );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/list/list-item/ListItem.styles.js CHANGED Viewed

@@ -29,10 +29,12 @@ const StyledMotionListItem = exports.StyledMotionListItem = (0, _styledComponent
         `}
     ${({
+  $shouldShowSeparatorBelow,
   theme
-}) => theme.accordionLines && (0, _styledComponents.css)`
+}) => ($shouldShowSeparatorBelow || theme.accordionLines) && (0, _styledComponents.css)`
             &&:not(:last-child) {
-                border-bottom: 1px solid ${theme.headline}80;
+                border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
+                    rgba(${theme['headline-rgb']}, 0.5);
             }
         `}}

package/lib/cjs/components/list/list-item/ListItem.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionListItem","exports","styled","motion","div","$isOpen","theme","css","cardBackgroundOpacity","$isClickable","~~accordionLines~~","~~headline~~","$isWrapped"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n $isClickable: boolean;\n $isOpen: boolean;\n $isWrapped: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n ${({ $isOpen, theme }) =>\n $isOpen &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n `}\n\n overflow: hidden;\n transition: background-color 0.3s ease;\n\n ${({ $isClickable, theme }) =>\n $isClickable &&\n css`\n &&:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `}\n \n ${({ theme }: StyledListItemProps) =>\n theme.accordionLines &&\n css`\n &&:not(:last-child) {\n border-bottom: 1px solid ${theme.headline}80;\n }\n `}}\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n padding-left: 26px;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;~~AASzC~~,MAAMW,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAsB;AAC3E,MAAM,CAAC;EAAEC,OAAO;EAAEC;AAAM,CAAC,KACjBD,OAAO,IACP,IAAAE,qBAAG;AACX,qCAAqCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACrF,SAAS;AACT;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,YAAY;EAAEH;AAAM,CAAC,KACtBG,YAAY,IACZ,IAAAF,qBAAG;AACX;AACA,yCAAyCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACzF;AACA,SAAS;AACT;AACA,MAAM,CAAC;~~EAAEF~~;AAA2B,CAAC,~~KAC7BA~~,KAAK,~~CAACI~~,cAAc,~~IACpB~~,~~IAAAH~~,qBAAG;AACX;AACA,~~2CAA2CD~~,KAAK,~~CAACK~~,~~QAAQ~~;~~AACzD~~;AACA,SAAS;AACT;AACA,MAAM,CAAC;~~EAAEC~~;AAAW,CAAC,KACbA,UAAU,IACV,IAAAL,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ListItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionListItem","exports","styled","motion","div","$isOpen","theme","css","cardBackgroundOpacity","$isClickable","$shouldShowSeparatorBelow","accordionLines","$isWrapped"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n $isClickable: boolean;\n $isOpen: boolean;\n $isWrapped: boolean;\n $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n ${({ $isOpen, theme }) =>\n $isOpen &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n `}\n\n overflow: hidden;\n transition: background-color 0.3s ease;\n\n ${({ $isClickable, theme }) =>\n $isClickable &&\n css`\n &&:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `}\n \n ${({ $shouldShowSeparatorBelow, theme }: StyledListItemProps) =>\n ($shouldShowSeparatorBelow \|\| theme.accordionLines) &&\n css`\n &&:not(:last-child) {\n border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n rgba(${theme['headline-rgb']}, 0.5);\n }\n `}}\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n padding-left: 26px;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAUzC,MAAMW,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAsB;AAC3E,MAAM,CAAC;EAAEC,OAAO;EAAEC;AAAM,CAAC,KACjBD,OAAO,IACP,IAAAE,qBAAG;AACX,qCAAqCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACrF,SAAS;AACT;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,YAAY;EAAEH;AAAM,CAAC,KACtBG,YAAY,IACZ,IAAAF,qBAAG;AACX;AACA,yCAAyCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACzF;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEE,yBAAyB;EAAEJ;AAA2B,CAAC,KACxD,CAACI,yBAAyB,IAAIJ,KAAK,CAACK,cAAc,KAClD,IAAAJ,qBAAG;AACX;AACA,iCAAiCG,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BJ,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEM;AAAW,CAAC,KACbA,UAAU,IACV,IAAAL,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js CHANGED Viewed

@@ -45,16 +45,21 @@ const ListItemHead = ({
   const openedTitle = (0, _useElementSize.useElementSize)(pseudoTitleOpenRef);
   const closedSubtitle = (0, _useElementSize.useElementSize)(pseudoSubtitleClosedRef);
   const openedSubtitle = (0, _useElementSize.useElementSize)(pseudoSubtitleOpenRef);
+  const shouldShowSubtitleRow = typeof subtitle === 'string' || ((rightElements === null || rightElements === void 0 ? void 0 : rightElements.length) ?? 0) > 1;
+  console.debug('TEST', {
+    title,
+    closedSubtitle
+  });
   (0, _react.useEffect)(() => {
     if (closedTitle && openedTitle) {
       setHeadHeight({
-        closed: subtitle && closedSubtitle ? closedSubtitle.height + 4 + closedTitle.height + 24 : closedTitle.height + 24,
-        open: subtitle && openedSubtitle ? openedSubtitle.height + 4 + openedTitle.height + 24 : openedTitle.height + 24
+        closed: shouldShowSubtitleRow && closedSubtitle ? closedSubtitle.height + 4 + closedTitle.height + 24 : closedTitle.height + 24,
+        open: shouldShowSubtitleRow && openedSubtitle ? openedSubtitle.height + 4 + openedTitle.height + 24 : openedTitle.height + 24
       });
     }
-  }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, subtitle]);
+  }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);
-  // This is used to trigger a rerender, so the head height can be calculate
+  // This is used to trigger a rerender, so the head height can be calculated
   (0, _react.useEffect)(() => {
     setIsFirstRender(true);
   }, []);
@@ -129,13 +134,13 @@ const ListItemHead = ({
     $isOpen: false
   }, title), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleText, {
     $isOpen: isOpen
-  }, title), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleElement, null, titleElement)), (rightElements === null || rightElements === void 0 ? void 0 : rightElements.length) === 1 && !shouldShowSingleRightElementCentered && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTopRightElement, null, rightElements[0]), rightElements && rightElements.length > 1 && rightElements[0] && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTopRightElement, null, rightElements[0])), subtitle && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitle, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleTextPseudo, {
+  }, title), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleElement, null, titleElement)), (rightElements === null || rightElements === void 0 ? void 0 : rightElements.length) === 1 && !shouldShowSingleRightElementCentered && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTopRightElement, null, rightElements[0]), rightElements && rightElements.length > 1 && rightElements[0] && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTopRightElement, null, rightElements[0])), shouldShowSubtitleRow && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitle, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleTextPseudo, {
     ref: pseudoSubtitleOpenRef,
     $isOpen: true
-  }, subtitle), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleTextPseudo, {
+  }, subtitle ?? ''), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleTextPseudo, {
     ref: pseudoSubtitleClosedRef,
     $isOpen: false
-  }, subtitle), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleText, {
+  }, subtitle ?? ''), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleText, {
     $isOpen: isOpen
   }, subtitle), rightElements && rightElements.length > 1 && rightElements[1] && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadBottomRightElement, null, rightElements[1]))), (rightElements === null || rightElements === void 0 ? void 0 : rightElements.length) === 1 && shouldShowSingleRightElementCentered && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadRightElement, null, rightElements[0]), hoverItem && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledMotionListItemHeadHoverItem, {
     animate: {

package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemHead.js","names":["_react","_interopRequireWildcard","require","_useElementSize","_Icon","_interopRequireDefault","_ListItemIcon","_ListItemImage","_ListItemHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemHead","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","shouldShowSingleRightElementCentered","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","useState","headHeight","setHeadHeight","closed","open","isFirstRender","setIsFirstRender","longPressTimeoutRef","useRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","useElementSize","openedTitle","closedSubtitle","openedSubtitle","useEffect","height","handleMouseEnter","useCallback","handleMouseLeave","marginTop","useMemo","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","undefined","StyledListItemHead","animate","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$marginTop","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleTextPseudo","ref","StyledListItemHeadTitleText","StyledListItemHeadTitleElement","length","StyledListItemHeadTopRightElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadSubtitleText","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem","marginLeft","opacity","width","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n StyledListItemHead,\n StyledListItemHeadBottomRightElement,\n StyledListItemHeadContent,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadRightElement,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadSubtitleTextPseudo,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleContent,\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledListItemHeadTitleTextPseudo,\n StyledListItemHeadTopRightElement,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\ntype ListItemHeadProps = {\n hoverItem?: ReactNode;\n icons?: string[];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: [ReactNode, ...ReactNode[]];\n subtitle?: ReactNode;\n shouldShowRoundImage?: boolean;\n shouldShowSingleRightElementCentered: boolean;\n title: ReactNode;\n titleElement?: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n hoverItem,\n icons,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n subtitle,\n shouldShowRoundImage,\n shouldShowSingleRightElementCentered,\n title,\n titleElement,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: 40,\n open: 40,\n });\n const [isFirstRender, setIsFirstRender] = useState(false);\n\n const longPressTimeoutRef = useRef<number>();\n const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n const closedTitle = useElementSize(pseudoTitleClosedRef);\n const openedTitle = useElementSize(pseudoTitleOpenRef);\n const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n useEffect(() => {\n if (closedTitle && openedTitle) {\n setHeadHeight({\n closed:\n subtitle && closedSubtitle\n ? closedSubtitle.height + 4 + closedTitle.height + 24\n : closedTitle.height + 24,\n open:\n subtitle && openedSubtitle\n ? openedSubtitle.height + 4 + openedTitle.height + 24\n : openedTitle.height + 24,\n });\n }\n }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, subtitle]);\n\n // This is used to trigger a rerender, so the head height can be calculate\n useEffect(() => {\n setIsFirstRender(true);\n }, []);\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const marginTop = useMemo(() => {\n if (headHeight.closed < 64) {\n return (64 - headHeight.closed) / 2;\n }\n\n return 0;\n }, [headHeight.closed]);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return <ListItemIcon icons={icons} />;\n }\n\n if (images) {\n return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n }\n\n return undefined;\n }, [icons, images, shouldShowRoundImage]);\n\n return (\n <StyledListItemHead\n animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n initial={false}\n transition={{ duration: 0.2, type: 'tween' }}\n className=\"beta-chayns-list-item-head\"\n $isClickable={typeof onClick === 'function' \|\| isExpandable}\n $isAnyItemExpandable={isAnyItemExpandable}\n onClick={onClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n >\n <StyledListItemHeadLeftWrapper>\n {isAnyItemExpandable && (\n <StyledMotionListItemHeadIndicator\n animate={{ rotate: isOpen ? 90 : 0 }}\n initial={false}\n transition={{ type: 'tween' }}\n >\n {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n </StyledMotionListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $marginTop={marginTop}\n $isOpen={isOpen}\n >\n <StyledListItemHeadTitle>\n <StyledListItemHeadTitleContent>\n <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleTextPseudo\n ref={pseudoTitleClosedRef}\n $isOpen={false}\n >\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleText $isOpen={isOpen}>\n {title}\n </StyledListItemHeadTitleText>\n <StyledListItemHeadTitleElement>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemHeadTitleContent>\n {rightElements?.length === 1 && !shouldShowSingleRightElementCentered && (\n <StyledListItemHeadTopRightElement>\n {rightElements[0]}\n </StyledListItemHeadTopRightElement>\n )}\n {rightElements && rightElements.length > 1 && rightElements[0] && (\n <StyledListItemHeadTopRightElement>\n {rightElements[0]}\n </StyledListItemHeadTopRightElement>\n )}\n </StyledListItemHeadTitle>\n {subtitle && (\n <StyledListItemHeadSubtitle>\n <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleTextPseudo\n ref={pseudoSubtitleClosedRef}\n $isOpen={false}\n >\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n {rightElements && rightElements.length > 1 && rightElements[1] && (\n <StyledListItemHeadBottomRightElement>\n {rightElements[1]}\n </StyledListItemHeadBottomRightElement>\n )}\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements?.length === 1 && shouldShowSingleRightElementCentered && (\n <StyledListItemHeadRightElement>{rightElements[0]}</StyledListItemHeadRightElement>\n )}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItem\n animate={{\n marginLeft: shouldShowHoverItem ? 8 : 0,\n opacity: shouldShowHoverItem ? 1 : 0,\n width: shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ListItemHead.js","names":["_react","_interopRequireWildcard","require","_useElementSize","_Icon","_interopRequireDefault","_ListItemIcon","_ListItemImage","_ListItemHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemHead","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","shouldShowSingleRightElementCentered","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","useState","headHeight","setHeadHeight","closed","open","isFirstRender","setIsFirstRender","longPressTimeoutRef","useRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","useElementSize","openedTitle","closedSubtitle","openedSubtitle","shouldShowSubtitleRow","length","console","debug","useEffect","height","handleMouseEnter","useCallback","handleMouseLeave","marginTop","useMemo","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","undefined","StyledListItemHead","animate","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$marginTop","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleTextPseudo","ref","StyledListItemHeadTitleText","StyledListItemHeadTitleElement","StyledListItemHeadTopRightElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadSubtitleText","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem","marginLeft","opacity","width","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n StyledListItemHead,\n StyledListItemHeadBottomRightElement,\n StyledListItemHeadContent,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadRightElement,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadSubtitleTextPseudo,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleContent,\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledListItemHeadTitleTextPseudo,\n StyledListItemHeadTopRightElement,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\ntype ListItemHeadProps = {\n hoverItem?: ReactNode;\n icons?: string[];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: [ReactNode, ...ReactNode[]];\n subtitle?: ReactNode;\n shouldShowRoundImage?: boolean;\n shouldShowSingleRightElementCentered: boolean;\n title: ReactNode;\n titleElement?: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n hoverItem,\n icons,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n subtitle,\n shouldShowRoundImage,\n shouldShowSingleRightElementCentered,\n title,\n titleElement,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: 40,\n open: 40,\n });\n const [isFirstRender, setIsFirstRender] = useState(false);\n\n const longPressTimeoutRef = useRef<number>();\n const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n const closedTitle = useElementSize(pseudoTitleClosedRef);\n const openedTitle = useElementSize(pseudoTitleOpenRef);\n const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n const shouldShowSubtitleRow = typeof subtitle === 'string' \|\| (rightElements?.length ?? 0) > 1;\n\n console.debug('TEST', { title, closedSubtitle });\n\n useEffect(() => {\n if (closedTitle && openedTitle) {\n setHeadHeight({\n closed:\n shouldShowSubtitleRow && closedSubtitle\n ? closedSubtitle.height + 4 + closedTitle.height + 24\n : closedTitle.height + 24,\n open:\n shouldShowSubtitleRow && openedSubtitle\n ? openedSubtitle.height + 4 + openedTitle.height + 24\n : openedTitle.height + 24,\n });\n }\n }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);\n\n // This is used to trigger a rerender, so the head height can be calculated\n useEffect(() => {\n setIsFirstRender(true);\n }, []);\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const marginTop = useMemo(() => {\n if (headHeight.closed < 64) {\n return (64 - headHeight.closed) / 2;\n }\n\n return 0;\n }, [headHeight.closed]);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return <ListItemIcon icons={icons} />;\n }\n\n if (images) {\n return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n }\n\n return undefined;\n }, [icons, images, shouldShowRoundImage]);\n\n return (\n <StyledListItemHead\n animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n initial={false}\n transition={{ duration: 0.2, type: 'tween' }}\n className=\"beta-chayns-list-item-head\"\n $isClickable={typeof onClick === 'function' \|\| isExpandable}\n $isAnyItemExpandable={isAnyItemExpandable}\n onClick={onClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n >\n <StyledListItemHeadLeftWrapper>\n {isAnyItemExpandable && (\n <StyledMotionListItemHeadIndicator\n animate={{ rotate: isOpen ? 90 : 0 }}\n initial={false}\n transition={{ type: 'tween' }}\n >\n {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n </StyledMotionListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $marginTop={marginTop}\n $isOpen={isOpen}\n >\n <StyledListItemHeadTitle>\n <StyledListItemHeadTitleContent>\n <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleTextPseudo\n ref={pseudoTitleClosedRef}\n $isOpen={false}\n >\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleText $isOpen={isOpen}>\n {title}\n </StyledListItemHeadTitleText>\n <StyledListItemHeadTitleElement>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemHeadTitleContent>\n {rightElements?.length === 1 && !shouldShowSingleRightElementCentered && (\n <StyledListItemHeadTopRightElement>\n {rightElements[0]}\n </StyledListItemHeadTopRightElement>\n )}\n {rightElements && rightElements.length > 1 && rightElements[0] && (\n <StyledListItemHeadTopRightElement>\n {rightElements[0]}\n </StyledListItemHeadTopRightElement>\n )}\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n {subtitle ?? ''}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleTextPseudo\n ref={pseudoSubtitleClosedRef}\n $isOpen={false}\n >\n {subtitle ?? ''}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n {rightElements && rightElements.length > 1 && rightElements[1] && (\n <StyledListItemHeadBottomRightElement>\n {rightElements[1]}\n </StyledListItemHeadBottomRightElement>\n )}\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements?.length === 1 && shouldShowSingleRightElementCentered && (\n <StyledListItemHeadRightElement>{rightElements[0]}</StyledListItemHeadRightElement>\n )}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItem\n animate={{\n marginLeft: shouldShowHoverItem ? 8 : 0,\n opacity: shouldShowHoverItem ? 1 : 0,\n width: shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/accordion/accordion-group/AccordionGroup.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useUuid } from '../../../hooks/uuid';
+import { AreaContext } from '../../area-provider/AreaContextProvider';
 export const AccordionGroupContext = /*#__PURE__*/React.createContext({
   isWrapped: undefined,
   openAccordionUuid: undefined,
@@ -24,6 +25,8 @@ const AccordionGroup = _ref => {
   const updateAccordionUuids = useCallback(uuids => {
     setAccordionUuids(uuids);
   }, []);
+  const areaProvider = useContext(AreaContext);
+  const shouldWrap = areaProvider.shouldChangeColor ? true : isWrapped;
   const updateOpenAccordionUuid = useCallback(function (uuid) {
     let {
       shouldOnlyOpen
@@ -58,14 +61,14 @@ const AccordionGroup = _ref => {
     }
   }, [onClose, onOpen, openAccordionUuid]);
   const providerValue = useMemo(() => ({
-    isWrapped,
+    isWrapped: shouldWrap,
     openAccordionUuid,
     setOpenAccordionUuid,
     updateOpenAccordionUuid,
     updateAccordionUuids,
     accordionUuids,
     accordionGroupUuid: accordionGroupId
-  }), [accordionGroupId, accordionUuids, isWrapped, openAccordionUuid, updateAccordionUuids, updateOpenAccordionUuid]);
+  }), [accordionGroupId, accordionUuids, shouldWrap, openAccordionUuid, updateAccordionUuids, updateOpenAccordionUuid]);
   return /*#__PURE__*/React.createElement(AccordionGroupContext.Provider, {
     value: providerValue
   }, children);

package/lib/esm/components/accordion/accordion-group/AccordionGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccordionGroup.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useUuid","AccordionGroupContext","createContext","isWrapped","undefined","openAccordionUuid","setOpenAccordionUuid","updateOpenAccordionUuid","accordionUuids","updateAccordionUuids","accordionGroupUuid","displayName","AccordionGroup","_ref","children","onClose","onOpen","setAccordionUuids","accordionGroupId","isInitialRenderRef","uuids","uuid","shouldOnlyOpen","arguments","length","currentOpenAccordionUuid","elements","document","querySelectorAll","newOrder","Array","from","map","el","getAttribute","result","forEach","includes","push","replace","current","providerValue","createElement","Provider","value"],"sources":["../../../../../src/components/accordion/accordion-group/AccordionGroup.tsx"],"sourcesContent":["import React, {\n Dispatch,\n FC,\n ReactNode,\n SetStateAction,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\n\ntype IUpdateOpenAccordionUuid = (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\ntype IUpdateAccordionUuids = (uuids: string[]) => void;\n\ninterface IAccordionGroupContext {\n isWrapped?: boolean;\n openAccordionUuid?: string;\n setOpenAccordionUuid?: Dispatch<SetStateAction<string \| undefined>>;\n updateOpenAccordionUuid?: IUpdateOpenAccordionUuid;\n accordionUuids?: string[];\n updateAccordionUuids?: IUpdateAccordionUuids;\n accordionGroupUuid?: string;\n}\n\nexport const AccordionGroupContext = React.createContext<IAccordionGroupContext>({\n isWrapped: undefined,\n openAccordionUuid: undefined,\n setOpenAccordionUuid: undefined,\n updateOpenAccordionUuid: undefined,\n accordionUuids: undefined,\n updateAccordionUuids: undefined,\n accordionGroupUuid: undefined,\n});\n\nAccordionGroupContext.displayName = 'AccordionGroupContext';\n\ntype AccordionGroupProps = {\n /*\n The Accordions that should be grouped. Accordions with the same group are\n * automatically closed when an `Accordion` of the group is opened.\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 Function that is executed when all accordions in group are closed.\n /\n onClose?: VoidFunction;\n /\n Function that is executed when any accordion in group will be opened.\n */\n onOpen?: VoidFunction;\n};\n\nconst AccordionGroup: FC<AccordionGroupProps> = ({ children, isWrapped, onClose, onOpen }) => {\n const [openAccordionUuid, setOpenAccordionUuid] =\n useState<IAccordionGroupContext['openAccordionUuid']>(undefined);\n const [accordionUuids, setAccordionUuids] = useState<string[]>();\n\n const accordionGroupId = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const updateAccordionUuids = useCallback((uuids: string[]) => {\n setAccordionUuids(uuids);\n }, []);\n\n const updateOpenAccordionUuid = useCallback<IUpdateOpenAccordionUuid>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenAccordionUuid((currentOpenAccordionUuid) => {\n if (currentOpenAccordionUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenAccordionUuid],\n );\n\n useEffect(() => {\n const elements = document.querySelectorAll('[data-uuid]');\n const newOrder = Array.from(elements).map((el) => el.getAttribute('data-uuid'));\n\n const result: string[] = [];\n\n newOrder.forEach((uuid) => {\n if (uuid?.includes(accordionGroupId)) {\n result.push(uuid.replace(`${accordionGroupId}---`, ''));\n }\n });\n\n updateAccordionUuids(result);\n }, [accordionGroupId, updateAccordionUuids]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (typeof openAccordionUuid === 'string') {\n if (typeof onOpen === 'function') {\n onOpen();\n }\n } else if (typeof onClose === 'function') {\n onClose();\n }\n }, [onClose, onOpen, openAccordionUuid]);\n\n const providerValue = useMemo<IAccordionGroupContext>(\n () => ({\n isWrapped,\n openAccordionUuid,\n setOpenAccordionUuid,\n updateOpenAccordionUuid,\n updateAccordionUuids,\n accordionUuids,\n accordionGroupUuid: accordionGroupId,\n }),\n [\n accordionGroupId,\n accordionUuids,\n ~~isWrapped~~,\n openAccordionUuid,\n updateAccordionUuids,\n updateOpenAccordionUuid,\n ],\n );\n\n return (\n <AccordionGroupContext.Provider value={providerValue}>\n {children}\n </AccordionGroupContext.Provider>\n );\n};\n\nAccordionGroup.displayName = 'AccordionGroup';\n\nexport default AccordionGroup;\n"],"mappings":"AAAA,OAAOA,KAAK,IAKRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,OAAO,QAAQ,qBAAqB;~~AAe7C~~,OAAO,MAAMC,qBAAqB,~~gBAAGP~~,KAAK,~~CAACQ~~,aAAa,CAAyB;EAC7EC,SAAS,EAAEC,SAAS;EACpBC,iBAAiB,EAAED,SAAS;EAC5BE,oBAAoB,EAAEF,SAAS;EAC/BG,uBAAuB,EAAEH,SAAS;EAClCI,cAAc,EAAEJ,SAAS;EACzBK,oBAAoB,EAAEL,SAAS;EAC/BM,kBAAkB,EAAEN;AACxB,CAAC,CAAC;AAEFH,qBAAqB,CAACU,WAAW,GAAG,uBAAuB;AAuB3D,MAAMC,cAAuC,GAAGC,IAAA,IAA8C;EAAA,IAA7C;IAAEC,QAAQ;IAAEX,SAAS;IAAEY,OAAO;IAAEC;EAAO,CAAC,GAAAH,IAAA;EACrF,MAAM,CAACR,iBAAiB,EAAEC,oBAAoB,CAAC,~~GAC3CP~~,QAAQ,~~CAA8CK~~,SAAS,CAAC;EACpE,MAAM,CAACI,cAAc,EAAES,iBAAiB,CAAC,~~GAAGlB~~,QAAQ,CAAW,CAAC;EAEhE,~~MAAMmB~~,gBAAgB,~~GAAGlB~~,OAAO,CAAC,CAAC;EAElC,~~MAAMmB~~,kBAAkB,~~GAAGrB~~,MAAM,CAAC,IAAI,CAAC;EAEvC,~~MAAMW~~,oBAAoB,~~GAAGd~~,WAAW,~~CAAEyB~~,KAAe,IAAK;IAC1DH,iBAAiB,CAACG,KAAK,CAAC;EAC5B,CAAC,EAAE,EAAE,CAAC;EAEN,~~MAAMb~~,uBAAuB,~~GAAGZ~~,WAAW,CACvC,~~UAAC0B~~,IAAI,EAA8B;IAAA,IAA5B;MAAEC;IAAe,CAAC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,~~QAAAnB~~,SAAA,~~GAAAmB~~,SAAA,MAAG,CAAC,CAAC;~~IAC1BjB~~,oBAAoB,~~CAAEmB~~,wBAAwB,IAAK;MAC/C,IAAIA,wBAAwB,KAAKJ,IAAI,IAAIC,cAAc,KAAK,IAAI,EAAE;QAC9D,~~OAAOlB~~,SAAS;MACpB;MAEA,~~OAAOiB~~,IAAI;IACf,CAAC,CAAC;EACN,CAAC,EACD,~~CAACf~~,oBAAoB,CACzB,CAAC;~~EAEDV~~,SAAS,CAAC,MAAM;IACZ,~~MAAM8B~~,QAAQ,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,aAAa,CAAC;IACzD,MAAMC,QAAQ,GAAGC,KAAK,CAACC,IAAI,CAACL,QAAQ,CAAC,CAACM,GAAG,CAAEC,EAAE,IAAKA,EAAE,CAACC,YAAY,CAAC,WAAW,CAAC,CAAC;IAE/E,MAAMC,MAAgB,GAAG,EAAE;IAE3BN,QAAQ,CAACO,OAAO,CAAEf,IAAI,IAAK;MACvB,IAAIA,IAAI,EAAEgB,QAAQ,~~CAACnB~~,gBAAgB,CAAC,EAAE;~~QAClCiB~~,MAAM,CAACG,IAAI,CAACjB,IAAI,CAACkB,OAAO,CAAC,~~GAAGrB~~,gBAAgB,KAAK,EAAE,EAAE,CAAC,CAAC;MAC3D;IACJ,CAAC,CAAC;IAEFT,oBAAoB,~~CAAC0B~~,MAAM,CAAC;EAChC,CAAC,EAAE,~~CAACjB~~,gBAAgB,EAAET,oBAAoB,CAAC,CAAC;~~EAE5Cb~~,SAAS,CAAC,MAAM;IACZ,~~IAAIuB~~,kBAAkB,~~CAACqB~~,OAAO,EAAE;~~MAC5BrB~~,kBAAkB,~~CAACqB~~,OAAO,GAAG,KAAK;IACtC,CAAC,MAAM,IAAI,~~OAAOnC~~,iBAAiB,KAAK,QAAQ,EAAE;MAC9C,IAAI,OAAOW,MAAM,KAAK,UAAU,EAAE;QAC9BA,MAAM,CAAC,CAAC;MACZ;IACJ,CAAC,MAAM,IAAI,OAAOD,OAAO,KAAK,UAAU,EAAE;MACtCA,OAAO,CAAC,CAAC;IACb;EACJ,CAAC,EAAE,CAACA,OAAO,EAAEC,MAAM,EAAEX,iBAAiB,CAAC,CAAC;EAExC,~~MAAMoC~~,aAAa,~~GAAG5C~~,OAAO,CACzB,OAAO;~~IACHM~~,SAAS;~~IACTE~~,iBAAiB;IACjBC,oBAAoB;IACpBC,uBAAuB;IACvBE,oBAAoB;IACpBD,cAAc;IACdE,kBAAkB,EAAEQ;EACxB,CAAC,CAAC,EACF,CACIA,gBAAgB,EAChBV,cAAc,~~EACdL~~,~~SAAS~~,~~EACTE~~,iBAAiB,EACjBI,oBAAoB,EACpBF,uBAAuB,CAE/B,CAAC;EAED,~~oBACIb~~,KAAA,~~CAAAgD~~,aAAA,~~CAACzC~~,qBAAqB,~~CAAC0C~~,QAAQ;IAACC,KAAK,EAAEH;EAAc,~~GAChD3B~~,QAC2B,CAAC;AAEzC,CAAC;AAEDF,cAAc,CAACD,WAAW,GAAG,gBAAgB;AAE7C,eAAeC,cAAc","ignoreList":[]}
1	+ {"version":3,"file":"AccordionGroup.js","names":["React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionGroupContext","createContext","isWrapped","undefined","openAccordionUuid","setOpenAccordionUuid","updateOpenAccordionUuid","accordionUuids","updateAccordionUuids","accordionGroupUuid","displayName","AccordionGroup","_ref","children","onClose","onOpen","setAccordionUuids","accordionGroupId","isInitialRenderRef","uuids","areaProvider","shouldWrap","shouldChangeColor","uuid","shouldOnlyOpen","arguments","length","currentOpenAccordionUuid","elements","document","querySelectorAll","newOrder","Array","from","map","el","getAttribute","result","forEach","includes","push","replace","current","providerValue","createElement","Provider","value"],"sources":["../../../../../src/components/accordion/accordion-group/AccordionGroup.tsx"],"sourcesContent":["import React, {\n Dispatch,\n FC,\n ReactNode,\n SetStateAction,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\n\ntype IUpdateOpenAccordionUuid = (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\ntype IUpdateAccordionUuids = (uuids: string[]) => void;\n\ninterface IAccordionGroupContext {\n isWrapped?: boolean;\n openAccordionUuid?: string;\n setOpenAccordionUuid?: Dispatch<SetStateAction<string \| undefined>>;\n updateOpenAccordionUuid?: IUpdateOpenAccordionUuid;\n accordionUuids?: string[];\n updateAccordionUuids?: IUpdateAccordionUuids;\n accordionGroupUuid?: string;\n}\n\nexport const AccordionGroupContext = React.createContext<IAccordionGroupContext>({\n isWrapped: undefined,\n openAccordionUuid: undefined,\n setOpenAccordionUuid: undefined,\n updateOpenAccordionUuid: undefined,\n accordionUuids: undefined,\n updateAccordionUuids: undefined,\n accordionGroupUuid: undefined,\n});\n\nAccordionGroupContext.displayName = 'AccordionGroupContext';\n\ntype AccordionGroupProps = {\n /*\n The Accordions that should be grouped. Accordions with the same group are\n * automatically closed when an `Accordion` of the group is opened.\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 Function that is executed when all accordions in group are closed.\n /\n onClose?: VoidFunction;\n /\n Function that is executed when any accordion in group will be opened.\n */\n onOpen?: VoidFunction;\n};\n\nconst AccordionGroup: FC<AccordionGroupProps> = ({ children, isWrapped, onClose, onOpen }) => {\n const [openAccordionUuid, setOpenAccordionUuid] =\n useState<IAccordionGroupContext['openAccordionUuid']>(undefined);\n const [accordionUuids, setAccordionUuids] = useState<string[]>();\n\n const accordionGroupId = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const updateAccordionUuids = useCallback((uuids: string[]) => {\n setAccordionUuids(uuids);\n }, []);\n\n const areaProvider = useContext(AreaContext);\n\n const shouldWrap = areaProvider.shouldChangeColor ? true : isWrapped;\n\n const updateOpenAccordionUuid = useCallback<IUpdateOpenAccordionUuid>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenAccordionUuid((currentOpenAccordionUuid) => {\n if (currentOpenAccordionUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenAccordionUuid],\n );\n\n useEffect(() => {\n const elements = document.querySelectorAll('[data-uuid]');\n const newOrder = Array.from(elements).map((el) => el.getAttribute('data-uuid'));\n\n const result: string[] = [];\n\n newOrder.forEach((uuid) => {\n if (uuid?.includes(accordionGroupId)) {\n result.push(uuid.replace(`${accordionGroupId}---`, ''));\n }\n });\n\n updateAccordionUuids(result);\n }, [accordionGroupId, updateAccordionUuids]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (typeof openAccordionUuid === 'string') {\n if (typeof onOpen === 'function') {\n onOpen();\n }\n } else if (typeof onClose === 'function') {\n onClose();\n }\n }, [onClose, onOpen, openAccordionUuid]);\n\n const providerValue = useMemo<IAccordionGroupContext>(\n () => ({\n isWrapped: shouldWrap,\n openAccordionUuid,\n setOpenAccordionUuid,\n updateOpenAccordionUuid,\n updateAccordionUuids,\n accordionUuids,\n accordionGroupUuid: accordionGroupId,\n }),\n [\n accordionGroupId,\n accordionUuids,\n shouldWrap,\n openAccordionUuid,\n updateAccordionUuids,\n updateOpenAccordionUuid,\n ],\n );\n\n return (\n <AccordionGroupContext.Provider value={providerValue}>\n {children}\n </AccordionGroupContext.Provider>\n );\n};\n\nAccordionGroup.displayName = 'AccordionGroup';\n\nexport default AccordionGroup;\n"],"mappings":"AAAA,OAAOA,KAAK,IAKRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,WAAW,QAAQ,yCAAyC;AAerE,OAAO,MAAMC,qBAAqB,gBAAGT,KAAK,CAACU,aAAa,CAAyB;EAC7EC,SAAS,EAAEC,SAAS;EACpBC,iBAAiB,EAAED,SAAS;EAC5BE,oBAAoB,EAAEF,SAAS;EAC/BG,uBAAuB,EAAEH,SAAS;EAClCI,cAAc,EAAEJ,SAAS;EACzBK,oBAAoB,EAAEL,SAAS;EAC/BM,kBAAkB,EAAEN;AACxB,CAAC,CAAC;AAEFH,qBAAqB,CAACU,WAAW,GAAG,uBAAuB;AAuB3D,MAAMC,cAAuC,GAAGC,IAAA,IAA8C;EAAA,IAA7C;IAAEC,QAAQ;IAAEX,SAAS;IAAEY,OAAO;IAAEC;EAAO,CAAC,GAAAH,IAAA;EACrF,MAAM,CAACR,iBAAiB,EAAEC,oBAAoB,CAAC,GAC3CR,QAAQ,CAA8CM,SAAS,CAAC;EACpE,MAAM,CAACI,cAAc,EAAES,iBAAiB,CAAC,GAAGnB,QAAQ,CAAW,CAAC;EAEhE,MAAMoB,gBAAgB,GAAGnB,OAAO,CAAC,CAAC;EAElC,MAAMoB,kBAAkB,GAAGtB,MAAM,CAAC,IAAI,CAAC;EAEvC,MAAMY,oBAAoB,GAAGhB,WAAW,CAAE2B,KAAe,IAAK;IAC1DH,iBAAiB,CAACG,KAAK,CAAC;EAC5B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,YAAY,GAAG3B,UAAU,CAACM,WAAW,CAAC;EAE5C,MAAMsB,UAAU,GAAGD,YAAY,CAACE,iBAAiB,GAAG,IAAI,GAAGpB,SAAS;EAEpE,MAAMI,uBAAuB,GAAGd,WAAW,CACvC,UAAC+B,IAAI,EAA8B;IAAA,IAA5B;MAAEC;IAAe,CAAC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAtB,SAAA,GAAAsB,SAAA,MAAG,CAAC,CAAC;IAC1BpB,oBAAoB,CAAEsB,wBAAwB,IAAK;MAC/C,IAAIA,wBAAwB,KAAKJ,IAAI,IAAIC,cAAc,KAAK,IAAI,EAAE;QAC9D,OAAOrB,SAAS;MACpB;MAEA,OAAOoB,IAAI;IACf,CAAC,CAAC;EACN,CAAC,EACD,CAAClB,oBAAoB,CACzB,CAAC;EAEDX,SAAS,CAAC,MAAM;IACZ,MAAMkC,QAAQ,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,aAAa,CAAC;IACzD,MAAMC,QAAQ,GAAGC,KAAK,CAACC,IAAI,CAACL,QAAQ,CAAC,CAACM,GAAG,CAAEC,EAAE,IAAKA,EAAE,CAACC,YAAY,CAAC,WAAW,CAAC,CAAC;IAE/E,MAAMC,MAAgB,GAAG,EAAE;IAE3BN,QAAQ,CAACO,OAAO,CAAEf,IAAI,IAAK;MACvB,IAAIA,IAAI,EAAEgB,QAAQ,CAACtB,gBAAgB,CAAC,EAAE;QAClCoB,MAAM,CAACG,IAAI,CAACjB,IAAI,CAACkB,OAAO,CAAC,GAAGxB,gBAAgB,KAAK,EAAE,EAAE,CAAC,CAAC;MAC3D;IACJ,CAAC,CAAC;IAEFT,oBAAoB,CAAC6B,MAAM,CAAC;EAChC,CAAC,EAAE,CAACpB,gBAAgB,EAAET,oBAAoB,CAAC,CAAC;EAE5Cd,SAAS,CAAC,MAAM;IACZ,IAAIwB,kBAAkB,CAACwB,OAAO,EAAE;MAC5BxB,kBAAkB,CAACwB,OAAO,GAAG,KAAK;IACtC,CAAC,MAAM,IAAI,OAAOtC,iBAAiB,KAAK,QAAQ,EAAE;MAC9C,IAAI,OAAOW,MAAM,KAAK,UAAU,EAAE;QAC9BA,MAAM,CAAC,CAAC;MACZ;IACJ,CAAC,MAAM,IAAI,OAAOD,OAAO,KAAK,UAAU,EAAE;MACtCA,OAAO,CAAC,CAAC;IACb;EACJ,CAAC,EAAE,CAACA,OAAO,EAAEC,MAAM,EAAEX,iBAAiB,CAAC,CAAC;EAExC,MAAMuC,aAAa,GAAGhD,OAAO,CACzB,OAAO;IACHO,SAAS,EAAEmB,UAAU;IACrBjB,iBAAiB;IACjBC,oBAAoB;IACpBC,uBAAuB;IACvBE,oBAAoB;IACpBD,cAAc;IACdE,kBAAkB,EAAEQ;EACxB,CAAC,CAAC,EACF,CACIA,gBAAgB,EAChBV,cAAc,EACdc,UAAU,EACVjB,iBAAiB,EACjBI,oBAAoB,EACpBF,uBAAuB,CAE/B,CAAC;EAED,oBACIf,KAAA,CAAAqD,aAAA,CAAC5C,qBAAqB,CAAC6C,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAChD9B,QAC2B,CAAC;AAEzC,CAAC;AAEDF,cAAc,CAACD,WAAW,GAAG,gBAAgB;AAE7C,eAAeC,cAAc","ignoreList":[]}

package/lib/esm/components/list/list-item/ListItem.js CHANGED Viewed

@@ -21,6 +21,7 @@ const ListItem = _ref => {
     shouldShowSingleRightElementCentered = false,
     subtitle,
     shouldShowRoundImage,
+    shouldShowSeparatorBelow = false,
     title,
     titleElement
   } = _ref;
@@ -75,7 +76,8 @@ const ListItem = _ref => {
     key: `list-item-${uuid}`,
     $isClickable: isClickable,
     $isOpen: isItemOpen,
-    $isWrapped: isWrapped
+    $isWrapped: isWrapped,
+    $shouldShowSeparatorBelow: shouldShowSeparatorBelow
   }, /*#__PURE__*/React.createElement(ListItemHead, {
     hoverItem: hoverItem,
     icons: icons,

package/lib/esm/components/list/list-item/ListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldShowSingleRightElementCentered","subtitle","shouldShowRoundImage","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","isClickable","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 AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type 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?: ListItemElements;\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?: ListItemElements;\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 Whether a single rightElement should be centered. Only works if one rightElement is given.\n /\n shouldShowSingleRightElementCentered?: 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 Additional elements to be displayed in the header next to the title.\n */\n titleElement?: 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 shouldShowSingleRightElementCentered = false,\n subtitle,\n shouldShowRoundImage,\n title,\n titleElement,\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 const isClickable = typeof onClick === 'function' \|\| isExpandable;\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={isClickable}\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 leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n rightElements={rightElements}\n subtitle={subtitle}\n shouldShowRoundImage={shouldShowRoundImage}\n shouldShowSingleRightElementCentered={shouldShowSingleRightElementCentered}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isExpandable && isItemOpen && (\n <ListItemBody id={uuid}>\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledMotionListItem>\n );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAKRC,WAAW,EACXC,UAAU,EACVC,SAAS,QACN,OAAO;AACd,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,OAAOC,mBAAmB,MAAM,yCAAyC;AACzE,SAASC,WAAW,QAAQ,SAAS;AACrC,OAAOC,YAAY,MAAM,+BAA+B;AACxD,OAAOC,YAAY,MAAM,+BAA+B;AACxD,SAASC,oBAAoB,QAAQ,mBAAmB;AA6ExD,MAAMC,QAA2B,GAAGC,IAAA,IAgB9B;EAAA,IAhB+B;IACjCC,QAAQ;IACRC,SAAS;IACTC,KAAK;IACLC,MAAM;IACNC,aAAa;IACbC,MAAM;IACNC,OAAO;IACPC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,oCAAoC,GAAG,KAAK;IAC5CC,QAAQ;IACRC,oBAAoB;IACpBC,KAAK;IACLC;EACJ,CAAC,GAAAf,IAAA;EACG,MAAM;IACFgB,4BAA4B;IAC5BC,mBAAmB;IACnBC,SAAS;IACTC,YAAY;IACZC;EACJ,CAAC,GAAG7B,UAAU,CAACI,WAAW,CAAC;EAE3B,MAAM0B,IAAI,GAAG5B,OAAO,CAAC,CAAC;EAEtB,MAAM6B,YAAY,GAAGrB,QAAQ,KAAKsB,SAAS;EAC3C,MAAMC,UAAU,GAAGlB,MAAM,IAAIa,YAAY,KAAKE,IAAI;EAElD,MAAMI,eAAe,GAAGnC,WAAW,CAC9BoC,KAAK,IAAK;IACP,IAAIJ,YAAY,EAAE;MACdF,kBAAkB,CAACC,IAAI,CAAC;IAC5B;IAEA,IAAI,OAAOd,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACmB,KAAK,CAAC;IAClB;EACJ,CAAC,EACD,CAACJ,YAAY,EAAEf,OAAO,EAAEa,kBAAkB,EAAEC,IAAI,CACpD,CAAC;EAED7B,SAAS,CAAC,MAAM;IACZ,IAAI8B,YAAY,EAAE;MACd;MACA;MACA,OAAON,4BAA4B,CAAC,CAAC;IACzC;IAEA,OAAOO,SAAS;EACpB,CAAC,EAAE,CAACP,4BAA4B,EAAEM,YAAY,CAAC,CAAC;EAEhD9B,SAAS,CAAC,MAAM;IACZ,IAAIa,aAAa,EAAE;MACfe,kBAAkB,CAACC,IAAI,EAAE;QAAEM,cAAc,EAAE;MAAK,CAAC,CAAC;IACtD;EACJ,CAAC,EAAE,CAACtB,aAAa,EAAEe,kBAAkB,EAAEC,IAAI,CAAC,CAAC;EAE7C,MAAMO,WAAW,GAAG,OAAOrB,OAAO,KAAK,UAAU,IAAIe,YAAY;EAEjE,oBACIjC,KAAA,CAAAwC,aAAA,CAAC/B,oBAAoB;IACjBgC,OAAO,EAAE;MAAEC,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxCC,SAAS,EAAC,uBAAuB;IACjCC,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEJ,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCI,GAAG,EAAE,aAAaf,IAAI,EAAG;IACzBgB,YAAY,EAAET,WAAY;IAC1BU,OAAO,EAAEd,UAAW;IACpBe,UAAU,EAAErB;EAAU,gBAEtB7B,KAAA,CAAAwC,aAAA,CAAChC,YAAY;IACTK,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfa,mBAAmB,EAAEA,mBAAoB;IACzCK,YAAY,EAAEA,YAAa;IAC3BhB,MAAM,EAAEkB,UAAW;IACnBf,YAAY,EAAEA,YAAa;IAC3BF,OAAO,EAAEqB,WAAW,GAAGH,eAAe,GAAGF,SAAU;IACnDf,WAAW,EAAEA,WAAY;IACzBE,aAAa,EAAEA,aAAc;IAC7BE,QAAQ,EAAEA,QAAS;IACnBC,oBAAoB,EAAEA,oBAAqB;IAC3CF,oCAAoC,EAAEA,oCAAqC;IAC3EG,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA;EAAa,CAC9B,CAAC,eACF1B,KAAA,CAAAwC,aAAA,CAACzC,eAAe;IAAC+C,OAAO,EAAE;EAAM,GAC3Bb,YAAY,IAAIE,UAAU,iBACvBnC,KAAA,CAAAwC,aAAA,CAACjC,YAAY;IAAC4C,EAAE,EAAEnB;EAAK,gBACnBhC,KAAA,CAAAwC,aAAA,CAACnC,mBAAmB,QAAEO,QAA8B,CAC1C,CAEL,CACC,CAAC;AAE/B,CAAC;AAEDF,QAAQ,CAAC0C,WAAW,GAAG,UAAU;AAEjC,eAAe1C,QAAQ","ignoreList":[]}
1	+ {"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldShowSingleRightElementCentered","subtitle","shouldShowRoundImage","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isWrapped","$shouldShowSeparatorBelow","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 AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type 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?: ListItemElements;\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?: ListItemElements;\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 Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n /\n shouldShowSeparatorBelow?: boolean;\n /\n Whether a single rightElement should be centered. Only works if one rightElement is given.\n /\n shouldShowSingleRightElementCentered?: 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 Additional elements to be displayed in the header next to the title.\n */\n titleElement?: 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 shouldShowSingleRightElementCentered = false,\n subtitle,\n shouldShowRoundImage,\n shouldShowSeparatorBelow = false,\n title,\n titleElement,\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 const isClickable = typeof onClick === 'function' \|\| isExpandable;\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={isClickable}\n $isOpen={isItemOpen}\n $isWrapped={isWrapped}\n $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n >\n <ListItemHead\n hoverItem={hoverItem}\n icons={icons}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n rightElements={rightElements}\n subtitle={subtitle}\n shouldShowRoundImage={shouldShowRoundImage}\n shouldShowSingleRightElementCentered={shouldShowSingleRightElementCentered}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isExpandable && isItemOpen && (\n <ListItemBody id={uuid}>\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledMotionListItem>\n );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/list/list-item/ListItem.styles.js CHANGED Viewed

@@ -28,11 +28,13 @@ export const StyledMotionListItem = styled(motion.div)`
     ${_ref3 => {
   let {
+    $shouldShowSeparatorBelow,
     theme
   } = _ref3;
-  return theme.accordionLines && css`
+  return ($shouldShowSeparatorBelow || theme.accordionLines) && css`
             &&:not(:last-child) {
-                border-bottom: 1px solid ${theme.headline}80;
+                border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
+                    rgba(${theme['headline-rgb']}, 0.5);
             }
         `;
 }}}

package/lib/esm/components/list/list-item/ListItem.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","_ref","$isOpen","theme","cardBackgroundOpacity","_ref2","$isClickable","_ref3","~~accordionLines~~","~~headline~~","_ref4","$isWrapped"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n $isClickable: boolean;\n $isOpen: boolean;\n $isWrapped: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n ${({ $isOpen, theme }) =>\n $isOpen &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n `}\n\n overflow: hidden;\n transition: background-color 0.3s ease;\n\n ${({ $isClickable, theme }) =>\n $isClickable &&\n css`\n &&:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `}\n \n ${({ theme }: StyledListItemProps) =>\n theme.accordionLines &&\n css`\n &&:not(:last-child) {\n border-bottom: 1px solid ${theme.headline}80;\n }\n `}}\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n padding-left: 26px;\n `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;~~AAS~~/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AAC3E,MAAMC,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,OACjBC,OAAO,IACPJ,GAAG;AACX,qCAAqCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AAAA;AACT;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,YAAY;IAAEH;EAAM,CAAC,GAAAE,KAAA;EAAA,OACtBC,YAAY,IACZR,GAAG;AACX;AACA,yCAAyCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT;AACA,MAAMG,KAAA;EAAA,IAAC;~~IAAEJ~~;EAA2B,CAAC,GAAAI,KAAA;EAAA,~~OAC7BJ~~,KAAK,~~CAACK~~,cAAc,~~IACpBV~~,GAAG;AACX;AACA,~~2CAA2CK~~,KAAK,~~CAACM~~,~~QAAQ~~;~~AACzD~~;AACA,SAAS;AAAA;AACT;AACA,~~MAAMC~~,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OACbC,UAAU,IACVb,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","_ref","$isOpen","theme","cardBackgroundOpacity","_ref2","$isClickable","_ref3","$shouldShowSeparatorBelow","accordionLines","_ref4","$isWrapped"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n $isClickable: boolean;\n $isOpen: boolean;\n $isWrapped: boolean;\n $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n ${({ $isOpen, theme }) =>\n $isOpen &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n `}\n\n overflow: hidden;\n transition: background-color 0.3s ease;\n\n ${({ $isClickable, theme }) =>\n $isClickable &&\n css`\n &&:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `}\n \n ${({ $shouldShowSeparatorBelow, theme }: StyledListItemProps) =>\n ($shouldShowSeparatorBelow \|\| theme.accordionLines) &&\n css`\n &&:not(:last-child) {\n border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n rgba(${theme['headline-rgb']}, 0.5);\n }\n `}}\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n padding-left: 26px;\n `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AAC3E,MAAMC,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,OACjBC,OAAO,IACPJ,GAAG;AACX,qCAAqCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AAAA;AACT;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,YAAY;IAAEH;EAAM,CAAC,GAAAE,KAAA;EAAA,OACtBC,YAAY,IACZR,GAAG;AACX;AACA,yCAAyCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT;AACA,MAAMG,KAAA;EAAA,IAAC;IAAEC,yBAAyB;IAAEL;EAA2B,CAAC,GAAAI,KAAA;EAAA,OACxD,CAACC,yBAAyB,IAAIL,KAAK,CAACM,cAAc,KAClDX,GAAG;AACX;AACA,iCAAiCU,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BL,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AAAA;AACT;AACA,MAAMO,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OACbC,UAAU,IACVb,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js CHANGED Viewed

@@ -37,16 +37,21 @@ const ListItemHead = _ref => {
   const openedTitle = useElementSize(pseudoTitleOpenRef);
   const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);
   const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);
+  const shouldShowSubtitleRow = typeof subtitle === 'string' || (rightElements?.length ?? 0) > 1;
+  console.debug('TEST', {
+    title,
+    closedSubtitle
+  });
   useEffect(() => {
     if (closedTitle && openedTitle) {
       setHeadHeight({
-        closed: subtitle && closedSubtitle ? closedSubtitle.height + 4 + closedTitle.height + 24 : closedTitle.height + 24,
-        open: subtitle && openedSubtitle ? openedSubtitle.height + 4 + openedTitle.height + 24 : openedTitle.height + 24
+        closed: shouldShowSubtitleRow && closedSubtitle ? closedSubtitle.height + 4 + closedTitle.height + 24 : closedTitle.height + 24,
+        open: shouldShowSubtitleRow && openedSubtitle ? openedSubtitle.height + 4 + openedTitle.height + 24 : openedTitle.height + 24
       });
     }
-  }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, subtitle]);
+  }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);
-  // This is used to trigger a rerender, so the head height can be calculate
+  // This is used to trigger a rerender, so the head height can be calculated
   useEffect(() => {
     setIsFirstRender(true);
   }, []);
@@ -121,13 +126,13 @@ const ListItemHead = _ref => {
     $isOpen: false
   }, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleText, {
     $isOpen: isOpen
-  }, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleElement, null, titleElement)), rightElements?.length === 1 && !shouldShowSingleRightElementCentered && /*#__PURE__*/React.createElement(StyledListItemHeadTopRightElement, null, rightElements[0]), rightElements && rightElements.length > 1 && rightElements[0] && /*#__PURE__*/React.createElement(StyledListItemHeadTopRightElement, null, rightElements[0])), subtitle && /*#__PURE__*/React.createElement(StyledListItemHeadSubtitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleTextPseudo, {
+  }, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleElement, null, titleElement)), rightElements?.length === 1 && !shouldShowSingleRightElementCentered && /*#__PURE__*/React.createElement(StyledListItemHeadTopRightElement, null, rightElements[0]), rightElements && rightElements.length > 1 && rightElements[0] && /*#__PURE__*/React.createElement(StyledListItemHeadTopRightElement, null, rightElements[0])), shouldShowSubtitleRow && /*#__PURE__*/React.createElement(StyledListItemHeadSubtitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleTextPseudo, {
     ref: pseudoSubtitleOpenRef,
     $isOpen: true
-  }, subtitle), /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleTextPseudo, {
+  }, subtitle ?? ''), /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleTextPseudo, {
     ref: pseudoSubtitleClosedRef,
     $isOpen: false
-  }, subtitle), /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleText, {
+  }, subtitle ?? ''), /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleText, {
     $isOpen: isOpen
   }, subtitle), rightElements && rightElements.length > 1 && rightElements[1] && /*#__PURE__*/React.createElement(StyledListItemHeadBottomRightElement, null, rightElements[1]))), rightElements?.length === 1 && shouldShowSingleRightElementCentered && /*#__PURE__*/React.createElement(StyledListItemHeadRightElement, null, rightElements[0]), hoverItem && /*#__PURE__*/React.createElement(StyledMotionListItemHeadHoverItem, {
     animate: {

package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemHead.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","Icon","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadBottomRightElement","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadRightElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemHeadTitleTextPseudo","StyledListItemHeadTopRightElement","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadIndicator","ListItemHead","_ref","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","shouldShowSingleRightElementCentered","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","headHeight","setHeadHeight","closed","open","isFirstRender","setIsFirstRender","longPressTimeoutRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","openedTitle","closedSubtitle","openedSubtitle","height","handleMouseEnter","handleMouseLeave","marginTop","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","undefined","animate","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$marginTop","$isOpen","ref","length","marginLeft","opacity","width","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n StyledListItemHead,\n StyledListItemHeadBottomRightElement,\n StyledListItemHeadContent,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadRightElement,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadSubtitleTextPseudo,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleContent,\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledListItemHeadTitleTextPseudo,\n StyledListItemHeadTopRightElement,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\ntype ListItemHeadProps = {\n hoverItem?: ReactNode;\n icons?: string[];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: [ReactNode, ...ReactNode[]];\n subtitle?: ReactNode;\n shouldShowRoundImage?: boolean;\n shouldShowSingleRightElementCentered: boolean;\n title: ReactNode;\n titleElement?: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n hoverItem,\n icons,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n subtitle,\n shouldShowRoundImage,\n shouldShowSingleRightElementCentered,\n title,\n titleElement,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: 40,\n open: 40,\n });\n const [isFirstRender, setIsFirstRender] = useState(false);\n\n const longPressTimeoutRef = useRef<number>();\n const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n const closedTitle = useElementSize(pseudoTitleClosedRef);\n const openedTitle = useElementSize(pseudoTitleOpenRef);\n const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n useEffect(() => {\n if (closedTitle && openedTitle) {\n setHeadHeight({\n closed:\n subtitle && closedSubtitle\n ? closedSubtitle.height + 4 + closedTitle.height + 24\n : closedTitle.height + 24,\n open:\n subtitle && openedSubtitle\n ? openedSubtitle.height + 4 + openedTitle.height + 24\n : openedTitle.height + 24,\n });\n }\n }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, subtitle]);\n\n // This is used to trigger a rerender, so the head height can be calculate\n useEffect(() => {\n setIsFirstRender(true);\n }, []);\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const marginTop = useMemo(() => {\n if (headHeight.closed < 64) {\n return (64 - headHeight.closed) / 2;\n }\n\n return 0;\n }, [headHeight.closed]);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return <ListItemIcon icons={icons} />;\n }\n\n if (images) {\n return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n }\n\n return undefined;\n }, [icons, images, shouldShowRoundImage]);\n\n return (\n <StyledListItemHead\n animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n initial={false}\n transition={{ duration: 0.2, type: 'tween' }}\n className=\"beta-chayns-list-item-head\"\n $isClickable={typeof onClick === 'function' \|\| isExpandable}\n $isAnyItemExpandable={isAnyItemExpandable}\n onClick={onClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n >\n <StyledListItemHeadLeftWrapper>\n {isAnyItemExpandable && (\n <StyledMotionListItemHeadIndicator\n animate={{ rotate: isOpen ? 90 : 0 }}\n initial={false}\n transition={{ type: 'tween' }}\n >\n {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n </StyledMotionListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $marginTop={marginTop}\n $isOpen={isOpen}\n >\n <StyledListItemHeadTitle>\n <StyledListItemHeadTitleContent>\n <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleTextPseudo\n ref={pseudoTitleClosedRef}\n $isOpen={false}\n >\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleText $isOpen={isOpen}>\n {title}\n </StyledListItemHeadTitleText>\n <StyledListItemHeadTitleElement>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemHeadTitleContent>\n {rightElements?.length === 1 && !shouldShowSingleRightElementCentered && (\n <StyledListItemHeadTopRightElement>\n {rightElements[0]}\n </StyledListItemHeadTopRightElement>\n )}\n {rightElements && rightElements.length > 1 && rightElements[0] && (\n <StyledListItemHeadTopRightElement>\n {rightElements[0]}\n </StyledListItemHeadTopRightElement>\n )}\n </StyledListItemHeadTitle>\n {subtitle && (\n <StyledListItemHeadSubtitle>\n <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleTextPseudo\n ref={pseudoSubtitleClosedRef}\n $isOpen={false}\n >\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n {rightElements && rightElements.length > 1 && rightElements[1] && (\n <StyledListItemHeadBottomRightElement>\n {rightElements[1]}\n </StyledListItemHeadBottomRightElement>\n )}\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements?.length === 1 && shouldShowSingleRightElementCentered && (\n <StyledListItemHeadRightElement>{rightElements[0]}</StyledListItemHeadRightElement>\n )}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItem\n animate={{\n marginLeft: shouldShowHoverItem ? 8 : 0,\n opacity: shouldShowHoverItem ? 1 : 0,\n width: shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ListItemHead.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","Icon","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadBottomRightElement","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadRightElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemHeadTitleTextPseudo","StyledListItemHeadTopRightElement","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadIndicator","ListItemHead","_ref","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","shouldShowSingleRightElementCentered","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","headHeight","setHeadHeight","closed","open","isFirstRender","setIsFirstRender","longPressTimeoutRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","openedTitle","closedSubtitle","openedSubtitle","shouldShowSubtitleRow","length","console","debug","height","handleMouseEnter","handleMouseLeave","marginTop","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","undefined","animate","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$marginTop","$isOpen","ref","marginLeft","opacity","width","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n StyledListItemHead,\n StyledListItemHeadBottomRightElement,\n StyledListItemHeadContent,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadRightElement,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadSubtitleTextPseudo,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleContent,\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledListItemHeadTitleTextPseudo,\n StyledListItemHeadTopRightElement,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\ntype ListItemHeadProps = {\n hoverItem?: ReactNode;\n icons?: string[];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: [ReactNode, ...ReactNode[]];\n subtitle?: ReactNode;\n shouldShowRoundImage?: boolean;\n shouldShowSingleRightElementCentered: boolean;\n title: ReactNode;\n titleElement?: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n hoverItem,\n icons,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n subtitle,\n shouldShowRoundImage,\n shouldShowSingleRightElementCentered,\n title,\n titleElement,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: 40,\n open: 40,\n });\n const [isFirstRender, setIsFirstRender] = useState(false);\n\n const longPressTimeoutRef = useRef<number>();\n const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n const closedTitle = useElementSize(pseudoTitleClosedRef);\n const openedTitle = useElementSize(pseudoTitleOpenRef);\n const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n const shouldShowSubtitleRow = typeof subtitle === 'string' \|\| (rightElements?.length ?? 0) > 1;\n\n console.debug('TEST', { title, closedSubtitle });\n\n useEffect(() => {\n if (closedTitle && openedTitle) {\n setHeadHeight({\n closed:\n shouldShowSubtitleRow && closedSubtitle\n ? closedSubtitle.height + 4 + closedTitle.height + 24\n : closedTitle.height + 24,\n open:\n shouldShowSubtitleRow && openedSubtitle\n ? openedSubtitle.height + 4 + openedTitle.height + 24\n : openedTitle.height + 24,\n });\n }\n }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);\n\n // This is used to trigger a rerender, so the head height can be calculated\n useEffect(() => {\n setIsFirstRender(true);\n }, []);\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const marginTop = useMemo(() => {\n if (headHeight.closed < 64) {\n return (64 - headHeight.closed) / 2;\n }\n\n return 0;\n }, [headHeight.closed]);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return <ListItemIcon icons={icons} />;\n }\n\n if (images) {\n return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n }\n\n return undefined;\n }, [icons, images, shouldShowRoundImage]);\n\n return (\n <StyledListItemHead\n animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n initial={false}\n transition={{ duration: 0.2, type: 'tween' }}\n className=\"beta-chayns-list-item-head\"\n $isClickable={typeof onClick === 'function' \|\| isExpandable}\n $isAnyItemExpandable={isAnyItemExpandable}\n onClick={onClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n >\n <StyledListItemHeadLeftWrapper>\n {isAnyItemExpandable && (\n <StyledMotionListItemHeadIndicator\n animate={{ rotate: isOpen ? 90 : 0 }}\n initial={false}\n transition={{ type: 'tween' }}\n >\n {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n </StyledMotionListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $marginTop={marginTop}\n $isOpen={isOpen}\n >\n <StyledListItemHeadTitle>\n <StyledListItemHeadTitleContent>\n <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleTextPseudo\n ref={pseudoTitleClosedRef}\n $isOpen={false}\n >\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleText $isOpen={isOpen}>\n {title}\n </StyledListItemHeadTitleText>\n <StyledListItemHeadTitleElement>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemHeadTitleContent>\n {rightElements?.length === 1 && !shouldShowSingleRightElementCentered && (\n <StyledListItemHeadTopRightElement>\n {rightElements[0]}\n </StyledListItemHeadTopRightElement>\n )}\n {rightElements && rightElements.length > 1 && rightElements[0] && (\n <StyledListItemHeadTopRightElement>\n {rightElements[0]}\n </StyledListItemHeadTopRightElement>\n )}\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n {subtitle ?? ''}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleTextPseudo\n ref={pseudoSubtitleClosedRef}\n $isOpen={false}\n >\n {subtitle ?? ''}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n {rightElements && rightElements.length > 1 && rightElements[1] && (\n <StyledListItemHeadBottomRightElement>\n {rightElements[1]}\n </StyledListItemHeadBottomRightElement>\n )}\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements?.length === 1 && shouldShowSingleRightElementCentered && (\n <StyledListItemHeadRightElement>{rightElements[0]}</StyledListItemHeadRightElement>\n )}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItem\n animate={{\n marginLeft: shouldShowHoverItem ? 8 : 0,\n opacity: shouldShowHoverItem ? 1 : 0,\n width: shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/list/list-item/ListItem.d.ts CHANGED Viewed

@@ -55,6 +55,10 @@ export type ListItemProps = {
      * this property can be set to true.
      */
     shouldShowRoundImage?: boolean;
+    /**
+     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.
+     */
+    shouldShowSeparatorBelow?: boolean;
     /**
      * Whether a single rightElement should be centered. Only works if one rightElement is given.
      */

package/lib/types/components/list/list-item/ListItem.styles.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ type StyledListItemProps = WithTheme<{
     $isClickable: boolean;
     $isOpen: boolean;
     $isWrapped: boolean;
+    $shouldShowSeparatorBelow: boolean;
 }>;
 export declare const StyledMotionListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.730",
+    "version": "5.0.0-beta.737",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "dcf28d137c4010b813a82af90b35d24d6be710fb"
+    "gitHead": "4f7c92944640e0aa0bb10fa4e54ed4926165275c"
 }