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

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 (23) hide show
  1. package/lib/cjs/components/accordion/Accordion.js +13 -1
  2. package/lib/cjs/components/accordion/Accordion.js.map +1 -1
  3. package/lib/cjs/components/accordion/Accordion.styles.js +3 -2
  4. package/lib/cjs/components/accordion/Accordion.styles.js.map +1 -1
  5. package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js +8 -1
  6. package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
  7. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js +11 -12
  8. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
  9. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js +13 -10
  10. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
  11. package/lib/esm/components/accordion/Accordion.js +14 -2
  12. package/lib/esm/components/accordion/Accordion.js.map +1 -1
  13. package/lib/esm/components/accordion/Accordion.styles.js +2 -1
  14. package/lib/esm/components/accordion/Accordion.styles.js.map +1 -1
  15. package/lib/esm/components/accordion/accordion-group/AccordionGroup.js +8 -1
  16. package/lib/esm/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
  17. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js +12 -13
  18. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
  19. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js +20 -14
  20. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
  21. package/lib/types/components/accordion/Accordion.styles.d.ts +263 -1
  22. package/lib/types/components/list/list-item/list-item-head/ListItemHead.styles.d.ts +4 -0
  23. package/package.json +2 -2
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionBody","AccordionGroupContext","AccordionHead","AccordionWrappedContext","StyledAccordion","AccordionContext","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","title","titleElement","onTitleInputChange","titleInputProps","titleColor","onBodyAnimationComplete","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","isParentWrapped","contextIsWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","className","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","onMouseEnter","onMouseLeave","Provider","value","transition","type","onClick","initial","maxHeight","onScroll","onAnimationComplete","shouldHideBody","displayName"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n /**\n * Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n */\n bodyMaxHeight?: number;\n /**\n * The content of the accordion body\n */\n children: ReactNode;\n /**\n * The icon that is displayed in front of the title\n */\n icon?: string;\n /**\n * This can be used to automatically expand the Accordion during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n */\n isDisabled?: boolean;\n /**\n * This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n */\n isFixed?: boolean;\n /**\n * This can be used to open the Accordion from the outside\n */\n isOpened?: boolean;\n /**\n * This will gray out the title of the Accordion to indicate hidden content, for example.\n */\n isTitleGreyed?: boolean;\n /**\n * Function that is executed when the accordion body will be scrolled\n */\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Function that is executed when the accordion will be closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the accordion is no longer hovered.\n */\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the accordion is hovered.\n */\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the accordion will be opened.\n */\n onOpen?: VoidFunction;\n /**\n * Function that is executed when the accordion body is animated\n */\n onBodyAnimationComplete?: VoidFunction;\n /**\n * Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n */\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n */\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Content to be displayed on the right side in the head of the Accordion\n */\n rightElement?: ReactNode;\n /**\n * The placeholder to be used for the search\n */\n searchPlaceholder?: string;\n /**\n * The value that is displayed inside the search\n */\n searchValue?: string;\n /**\n * This will force the background color of the accordion to be used even if it is closed and not hovered.\n */\n shouldForceBackground?: boolean;\n /**\n * This will hide the background color of the accordion\n */\n shouldHideBackground?: boolean;\n /**\n * This will render the Accordion closed on the first render.\n */\n shouldRenderClosed?: boolean;\n /**\n * Whether the icon should be rotating.\n */\n shouldRotateIcon?: boolean;\n /**\n * Title of the Accordion displayed in the head\n */\n title: string;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n /**\n * The props of the title Input.\n */\n titleInputProps?: InputProps;\n /**\n * The title color.\n */\n titleColor?: CSSProperties['color'];\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n titleColor,\n onBodyAnimationComplete,\n}) => {\n const {\n isWrapped: groupIsWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n const isWrapped = useMemo(\n () => groupIsWrapped ?? contextIsWrapped,\n [contextIsWrapped, groupIsWrapped],\n );\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);\n\n const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n return (\n <StyledAccordion\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n $isOpen={isOpen}\n $shouldShowLines={!isLastAccordion}\n $isParentWrapped={isParentWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBackground={shouldHideBackground}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed || isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n titleColor={titleColor}\n />\n <AnimatePresence initial={false}>\n {(isOpen || shouldRenderClosed) && (\n <AccordionBody\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n onAnimationComplete={onBodyAnimationComplete}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AccordionWrappedContext.Provider\n value={accordionWrappedContextProviderValue}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionWrappedContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionBody","AccordionGroupContext","AccordionHead","AccordionWrappedContext","StyledMotionAccordion","AccordionContext","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","title","titleElement","onTitleInputChange","titleInputProps","titleColor","onBodyAnimationComplete","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","isParentWrapped","contextIsWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","animate","height","opacity","className","exit","initial","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","onMouseEnter","onMouseLeave","Provider","value","transition","type","onClick","maxHeight","onScroll","onAnimationComplete","shouldHideBody","displayName"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledMotionAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n /**\n * Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n */\n bodyMaxHeight?: number;\n /**\n * The content of the accordion body\n */\n children: ReactNode;\n /**\n * The icon that is displayed in front of the title\n */\n icon?: string;\n /**\n * This can be used to automatically expand the Accordion during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n */\n isDisabled?: boolean;\n /**\n * This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n */\n isFixed?: boolean;\n /**\n * This can be used to open the Accordion from the outside\n */\n isOpened?: boolean;\n /**\n * This will gray out the title of the Accordion to indicate hidden content, for example.\n */\n isTitleGreyed?: boolean;\n /**\n * Function that is executed when the accordion body will be scrolled\n */\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Function that is executed when the accordion will be closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the accordion is no longer hovered.\n */\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the accordion is hovered.\n */\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the accordion will be opened.\n */\n onOpen?: VoidFunction;\n /**\n * Function that is executed when the accordion body is animated\n */\n onBodyAnimationComplete?: VoidFunction;\n /**\n * Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n */\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n */\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Content to be displayed on the right side in the head of the Accordion\n */\n rightElement?: ReactNode;\n /**\n * The placeholder to be used for the search\n */\n searchPlaceholder?: string;\n /**\n * The value that is displayed inside the search\n */\n searchValue?: string;\n /**\n * This will force the background color of the accordion to be used even if it is closed and not hovered.\n */\n shouldForceBackground?: boolean;\n /**\n * This will hide the background color of the accordion\n */\n shouldHideBackground?: boolean;\n /**\n * This will render the Accordion closed on the first render.\n */\n shouldRenderClosed?: boolean;\n /**\n * Whether the icon should be rotating.\n */\n shouldRotateIcon?: boolean;\n /**\n * Title of the Accordion displayed in the head\n */\n title: string;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n /**\n * The props of the title Input.\n */\n titleInputProps?: InputProps;\n /**\n * The title color.\n */\n titleColor?: CSSProperties['color'];\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n titleColor,\n onBodyAnimationComplete,\n}) => {\n const {\n isWrapped: groupIsWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n const isWrapped = useMemo(\n () => groupIsWrapped ?? contextIsWrapped,\n [contextIsWrapped, groupIsWrapped],\n );\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);\n\n const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n return (\n <StyledMotionAccordion\n animate={{ height: 'auto', opacity: 1 }}\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $isOpen={isOpen}\n $shouldShowLines={!isLastAccordion}\n $isParentWrapped={isParentWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBackground={shouldHideBackground}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed || isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n titleColor={titleColor}\n />\n <AnimatePresence initial={false}>\n {(isOpen || shouldRenderClosed) && (\n <AccordionBody\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n onAnimationComplete={onBodyAnimationComplete}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AccordionWrappedContext.Provider\n value={accordionWrappedContextProviderValue}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionWrappedContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledMotionAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
@@ -1,5 +1,6 @@
1
+ import { motion } from 'framer-motion';
1
2
  import styled, { css } from 'styled-components';
2
- export const StyledAccordion = styled.div`
3
+ export const StyledMotionAccordion = styled(motion.div)`
3
4
  ${_ref => {
4
5
  let {
5
6
  $isOpen,
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.styles.js","names":["styled","css","StyledAccordion","div","_ref","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","cardBackgroundOpacity","cardBorderRadius","cardShadow","_ref2","accordionLines","_ref3","_ref4","$shouldShowLines","undefined","headline","_ref5","$isParentWrapped","_ref6","_ref7"],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionProps = WithTheme<{\n $isOpen: boolean;\n $isParentWrapped: boolean;\n $isWrapped?: boolean;\n $shouldForceBackground?: boolean;\n $shouldHideBackground?: boolean;\n $shouldShowLines?: boolean;\n}>;\n\nexport const StyledAccordion = styled.div<StyledMotionAccordionProps>`\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldHideBackground,\n theme,\n }: StyledMotionAccordionProps) =>\n ($isOpen || $shouldForceBackground) &&\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n border-radius: ${theme.cardBorderRadius}px;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n `}\n\n ${({ theme }: StyledMotionAccordionProps) =>\n theme.accordionLines &&\n css`\n border-bottom: 1px solid transparent;\n `}\n \n margin-bottom: ${({ $isOpen, $isWrapped }: StyledMotionAccordionProps) =>\n $isOpen && !$isWrapped ? '30px' : '0px'};\n transition:\n background-color 0.3s ease,\n border-bottom-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease,\n margin-bottom 0.3s ease;\n\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldShowLines,\n theme,\n }: StyledMotionAccordionProps) => {\n if ($shouldForceBackground) return undefined;\n\n if (theme.accordionLines) {\n if ($isWrapped && $shouldShowLines) {\n return css`\n border-bottom-color: ${theme.headline}80;\n `;\n }\n\n if (!$isOpen && $shouldShowLines) {\n return css`\n border-bottom-color: ${theme.headline};\n `;\n }\n }\n\n return undefined;\n }}\n ${({ $isParentWrapped }: StyledMotionAccordionProps) =>\n $isParentWrapped &&\n css`\n padding-left: 17px;\n `}\n ${({ $isWrapped }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n css`\n margin-top: 10px;\n `}\n ${({ $isWrapped, $shouldHideBackground, theme }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n &:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAY/C,OAAO,MAAMC,eAAe,GAAGF,MAAM,CAACG,GAA+B;AACrE,MAAMC,IAAA;EAAA,IAAC;IACCC,OAAO;IACPC,UAAU;IACVC,sBAAsB;IACtBC,qBAAqB;IACrBC;EACwB,CAAC,GAAAL,IAAA;EAAA,OACzB,CAACC,OAAO,IAAIE,sBAAsB,KAClC,CAACD,UAAU,IACX,CAACE,qBAAqB,IACtBP,GAAG;AACX,qCAAqCQ,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,6BAA6BD,KAAK,CAACE,gBAAgB;AACnD,oDAAoDF,KAAK,CAACG,UAAU;AACpE,SAAS;AAAA;AACT;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEJ;EAAkC,CAAC,GAAAI,KAAA;EAAA,OACpCJ,KAAK,CAACK,cAAc,IACpBb,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,qBAAqBc,KAAA;EAAA,IAAC;IAAEV,OAAO;IAAEC;EAAuC,CAAC,GAAAS,KAAA;EAAA,OACjEV,OAAO,IAAI,CAACC,UAAU,GAAG,MAAM,GAAG,KAAK;AAAA;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMU,KAAA,IAMgC;EAAA,IAN/B;IACCX,OAAO;IACPC,UAAU;IACVC,sBAAsB;IACtBU,gBAAgB;IAChBR;EACwB,CAAC,GAAAO,KAAA;EACzB,IAAIT,sBAAsB,EAAE,OAAOW,SAAS;EAE5C,IAAIT,KAAK,CAACK,cAAc,EAAE;IACtB,IAAIR,UAAU,IAAIW,gBAAgB,EAAE;MAChC,OAAOhB,GAAG;AAC1B,2CAA2CQ,KAAK,CAACU,QAAQ;AACzD,iBAAiB;IACL;IAEA,IAAI,CAACd,OAAO,IAAIY,gBAAgB,EAAE;MAC9B,OAAOhB,GAAG;AAC1B,2CAA2CQ,KAAK,CAACU,QAAQ;AACzD,iBAAiB;IACL;EACJ;EAEA,OAAOD,SAAS;AACpB,CAAC;AACL,MAAME,KAAA;EAAA,IAAC;IAAEC;EAA6C,CAAC,GAAAD,KAAA;EAAA,OAC/CC,gBAAgB,IAChBpB,GAAG;AACX;AACA,SAAS;AAAA;AACT,cAAcqB,KAAA;EAAA,IAAC;IAAEhB;EAAuC,CAAC,GAAAgB,KAAA;EAAA,OACjD,CAAChB,UAAU,IACXL,GAAG;AACX;AACA,SAAS;AAAA;AACT,cAAcsB,KAAA;EAAA,IAAC;IAAEjB,UAAU;IAAEE,qBAAqB;IAAEC;EAAkC,CAAC,GAAAc,KAAA;EAAA,OAC/E,CAACjB,UAAU,IACX,CAACE,qBAAqB,IACtBP,GAAG;AACX;AACA,yCAAyCQ,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"Accordion.styles.js","names":["motion","styled","css","StyledMotionAccordion","div","_ref","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","cardBackgroundOpacity","cardBorderRadius","cardShadow","_ref2","accordionLines","_ref3","_ref4","$shouldShowLines","undefined","headline","_ref5","$isParentWrapped","_ref6","_ref7"],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionProps = WithTheme<{\n $isOpen: boolean;\n $isParentWrapped: boolean;\n $isWrapped?: boolean;\n $shouldForceBackground?: boolean;\n $shouldHideBackground?: boolean;\n $shouldShowLines?: boolean;\n}>;\n\nexport const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldHideBackground,\n theme,\n }: StyledMotionAccordionProps) =>\n ($isOpen || $shouldForceBackground) &&\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n border-radius: ${theme.cardBorderRadius}px;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n `}\n\n ${({ theme }: StyledMotionAccordionProps) =>\n theme.accordionLines &&\n css`\n border-bottom: 1px solid transparent;\n `}\n \n margin-bottom: ${({ $isOpen, $isWrapped }: StyledMotionAccordionProps) =>\n $isOpen && !$isWrapped ? '30px' : '0px'};\n transition:\n background-color 0.3s ease,\n border-bottom-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease,\n margin-bottom 0.3s ease;\n\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldShowLines,\n theme,\n }: StyledMotionAccordionProps) => {\n if ($shouldForceBackground) return undefined;\n\n if (theme.accordionLines) {\n if ($isWrapped && $shouldShowLines) {\n return css`\n border-bottom-color: ${theme.headline}80;\n `;\n }\n\n if (!$isOpen && $shouldShowLines) {\n return css`\n border-bottom-color: ${theme.headline};\n `;\n }\n }\n\n return undefined;\n }}\n ${({ $isParentWrapped }: StyledMotionAccordionProps) =>\n $isParentWrapped &&\n css`\n padding-left: 17px;\n `}\n ${({ $isWrapped }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n css`\n margin-top: 10px;\n `}\n ${({ $isWrapped, $shouldHideBackground, theme }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n &:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAY/C,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAA6B;AACnF,MAAMC,IAAA;EAAA,IAAC;IACCC,OAAO;IACPC,UAAU;IACVC,sBAAsB;IACtBC,qBAAqB;IACrBC;EACwB,CAAC,GAAAL,IAAA;EAAA,OACzB,CAACC,OAAO,IAAIE,sBAAsB,KAClC,CAACD,UAAU,IACX,CAACE,qBAAqB,IACtBP,GAAG;AACX,qCAAqCQ,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,6BAA6BD,KAAK,CAACE,gBAAgB;AACnD,oDAAoDF,KAAK,CAACG,UAAU;AACpE,SAAS;AAAA;AACT;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEJ;EAAkC,CAAC,GAAAI,KAAA;EAAA,OACpCJ,KAAK,CAACK,cAAc,IACpBb,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,qBAAqBc,KAAA;EAAA,IAAC;IAAEV,OAAO;IAAEC;EAAuC,CAAC,GAAAS,KAAA;EAAA,OACjEV,OAAO,IAAI,CAACC,UAAU,GAAG,MAAM,GAAG,KAAK;AAAA;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMU,KAAA,IAMgC;EAAA,IAN/B;IACCX,OAAO;IACPC,UAAU;IACVC,sBAAsB;IACtBU,gBAAgB;IAChBR;EACwB,CAAC,GAAAO,KAAA;EACzB,IAAIT,sBAAsB,EAAE,OAAOW,SAAS;EAE5C,IAAIT,KAAK,CAACK,cAAc,EAAE;IACtB,IAAIR,UAAU,IAAIW,gBAAgB,EAAE;MAChC,OAAOhB,GAAG;AAC1B,2CAA2CQ,KAAK,CAACU,QAAQ;AACzD,iBAAiB;IACL;IAEA,IAAI,CAACd,OAAO,IAAIY,gBAAgB,EAAE;MAC9B,OAAOhB,GAAG;AAC1B,2CAA2CQ,KAAK,CAACU,QAAQ;AACzD,iBAAiB;IACL;EACJ;EAEA,OAAOD,SAAS;AACpB,CAAC;AACL,MAAME,KAAA;EAAA,IAAC;IAAEC;EAA6C,CAAC,GAAAD,KAAA;EAAA,OAC/CC,gBAAgB,IAChBpB,GAAG;AACX;AACA,SAAS;AAAA;AACT,cAAcqB,KAAA;EAAA,IAAC;IAAEhB;EAAuC,CAAC,GAAAgB,KAAA;EAAA,OACjD,CAAChB,UAAU,IACXL,GAAG;AACX;AACA,SAAS;AAAA;AACT,cAAcsB,KAAA;EAAA,IAAC;IAAEjB,UAAU;IAAEE,qBAAqB;IAAEC;EAAkC,CAAC,GAAAc,KAAA;EAAA,OAC/E,CAACjB,UAAU,IACX,CAACE,qBAAqB,IACtBP,GAAG;AACX;AACA,yCAAyCQ,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
@@ -1,3 +1,4 @@
1
+ import { AnimatePresence, MotionConfig } from 'framer-motion';
1
2
  import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
2
3
  import { useUuid } from '../../../hooks/uuid';
3
4
  import { AreaContext } from '../../area-provider/AreaContextProvider';
@@ -71,7 +72,13 @@ const AccordionGroup = _ref => {
71
72
  }), [accordionGroupId, accordionUuids, shouldWrap, openAccordionUuid, updateAccordionUuids, updateOpenAccordionUuid]);
72
73
  return /*#__PURE__*/React.createElement(AccordionGroupContext.Provider, {
73
74
  value: providerValue
74
- }, children);
75
+ }, /*#__PURE__*/React.createElement(MotionConfig, {
76
+ transition: {
77
+ type: 'tween'
78
+ }
79
+ }, /*#__PURE__*/React.createElement(AnimatePresence, {
80
+ initial: false
81
+ }, children)));
75
82
  };
76
83
  AccordionGroup.displayName = 'AccordionGroup';
77
84
  export default AccordionGroup;
@@ -1 +1 @@
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":"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","ignoreList":[]}
1
+ {"version":3,"file":"AccordionGroup.js","names":["AnimatePresence","MotionConfig","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","transition","type","initial"],"sources":["../../../../../src/components/accordion/accordion-group/AccordionGroup.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport 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 <MotionConfig transition={{ type: 'tween' }}>\n <AnimatePresence initial={false}>{children}</AnimatePresence>\n </MotionConfig>\n </AccordionGroupContext.Provider>\n );\n};\n\nAccordionGroup.displayName = 'AccordionGroup';\n\nexport default AccordionGroup;\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,eAAe;AAC7D,OAAOC,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,gBACjDpD,KAAA,CAAAqD,aAAA,CAACtD,YAAY;IAACyD,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBACxCzD,KAAA,CAAAqD,aAAA,CAACvD,eAAe;IAAC4D,OAAO,EAAE;EAAM,GAAEpC,QAA0B,CAClD,CACc,CAAC;AAEzC,CAAC;AAEDF,cAAc,CAACD,WAAW,GAAG,gBAAgB;AAE7C,eAAeC,cAAc","ignoreList":[]}
@@ -3,7 +3,7 @@ import { useElementSize } from '../../../../hooks/useElementSize';
3
3
  import Icon from '../../../icon/Icon';
4
4
  import ListItemIcon from './list-item-icon/ListItemIcon';
5
5
  import ListItemImage from './list-item-image/ListItemImage';
6
- import { StyledListItemHead, StyledListItemHeadBottomRightElement, StyledListItemHeadContent, StyledListItemHeadLeftWrapper, StyledListItemHeadRightElement, StyledListItemHeadSubtitle, StyledListItemHeadSubtitleText, StyledListItemHeadSubtitleTextPseudo, StyledListItemHeadTitle, StyledListItemHeadTitleContent, StyledListItemHeadTitleElement, StyledListItemHeadTitleText, StyledListItemHeadTitleTextPseudo, StyledListItemHeadTopRightElement, StyledMotionListItemHeadHoverItem, StyledMotionListItemHeadIndicator } from './ListItemHead.styles';
6
+ import { StyledListItemHead, StyledListItemHeadBottomRightElement, StyledListItemHeadContent, StyledListItemHeadLeftWrapper, StyledListItemHeadRightElement, StyledListItemHeadRightWrapper, StyledListItemHeadSubtitle, StyledListItemHeadSubtitleText, StyledListItemHeadSubtitleTextPseudo, StyledListItemHeadTitle, StyledListItemHeadTitleContent, StyledListItemHeadTitleElement, StyledListItemHeadTitleText, StyledListItemHeadTitleTextPseudo, StyledListItemHeadTopRightElement, StyledMotionListItemHeadHoverItem, StyledMotionListItemHeadIndicator } from './ListItemHead.styles';
7
7
  const ListItemHead = _ref => {
8
8
  let {
9
9
  hoverItem,
@@ -37,11 +37,7 @@ const ListItemHead = _ref => {
37
37
  const openedTitle = useElementSize(pseudoTitleOpenRef);
38
38
  const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);
39
39
  const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);
40
- const shouldShowSubtitleRow = typeof subtitle === 'string' || (rightElements?.length ?? 0) > 1;
41
- console.debug('TEST', {
42
- title,
43
- closedSubtitle
44
- });
40
+ const shouldShowSubtitleRow = typeof subtitle === 'string';
45
41
  useEffect(() => {
46
42
  if (closedTitle && openedTitle) {
47
43
  setHeadHeight({
@@ -58,11 +54,12 @@ const ListItemHead = _ref => {
58
54
  const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);
59
55
  const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);
60
56
  const marginTop = useMemo(() => {
61
- if (headHeight.closed < 64) {
62
- return (64 - headHeight.closed) / 2;
57
+ const height = headHeight[isOpen ? 'open' : 'closed'];
58
+ if (height < 64) {
59
+ return (64 - height) / 2;
63
60
  }
64
61
  return 0;
65
- }, [headHeight.closed]);
62
+ }, [headHeight, isOpen]);
66
63
  const handleTouchStart = useCallback(event => {
67
64
  longPressTimeoutRef.current = window.setTimeout(() => {
68
65
  if (typeof onLongPress === 'function') {
@@ -126,15 +123,17 @@ const ListItemHead = _ref => {
126
123
  $isOpen: false
127
124
  }, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleText, {
128
125
  $isOpen: isOpen
129
- }, 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, {
126
+ }, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleElement, null, titleElement))), shouldShowSubtitleRow && /*#__PURE__*/React.createElement(StyledListItemHeadSubtitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleTextPseudo, {
130
127
  ref: pseudoSubtitleOpenRef,
131
128
  $isOpen: true
132
- }, subtitle ?? '​'), /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleTextPseudo, {
129
+ }, subtitle), /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleTextPseudo, {
133
130
  ref: pseudoSubtitleClosedRef,
134
131
  $isOpen: false
135
- }, subtitle ?? '​'), /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleText, {
132
+ }, subtitle), /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleText, {
136
133
  $isOpen: isOpen
137
- }, 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, {
134
+ }, subtitle))), rightElements && /*#__PURE__*/React.createElement(StyledListItemHeadRightWrapper, {
135
+ $shouldShowCentered: rightElements?.length === 1 && shouldShowSingleRightElementCentered
136
+ }, rightElements?.length === 1 && shouldShowSingleRightElementCentered ? /*#__PURE__*/React.createElement(StyledListItemHeadRightElement, null, rightElements[0]) : /*#__PURE__*/React.createElement(React.Fragment, null, rightElements[0] && /*#__PURE__*/React.createElement(StyledListItemHeadTopRightElement, null, rightElements[0]), rightElements[1] && /*#__PURE__*/React.createElement(StyledListItemHeadBottomRightElement, null, rightElements[1]))), hoverItem && /*#__PURE__*/React.createElement(StyledMotionListItemHeadHoverItem, {
138
137
  animate: {
139
138
  marginLeft: shouldShowHoverItem ? 8 : 0,
140
139
  opacity: shouldShowHoverItem ? 1 : 0,
@@ -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","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":[]}
1
+ {"version":3,"file":"ListItemHead.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","Icon","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadBottomRightElement","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadRightElement","StyledListItemHeadRightWrapper","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","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","$shouldShowCentered","length","Fragment","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 StyledListItemHeadRightWrapper,\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';\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 const height = headHeight[isOpen ? 'open' : 'closed'];\n\n if (height < 64) {\n return (64 - height) / 2;\n }\n\n return 0;\n }, [headHeight, isOpen]);\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 </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 </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements && (\n <StyledListItemHeadRightWrapper\n $shouldShowCentered={\n rightElements?.length === 1 && shouldShowSingleRightElementCentered\n }\n >\n {rightElements?.length === 1 && shouldShowSingleRightElementCentered ? (\n <StyledListItemHeadRightElement>\n {rightElements[0]}\n </StyledListItemHeadRightElement>\n ) : (\n <>\n {rightElements[0] && (\n <StyledListItemHeadTopRightElement>\n {rightElements[0]}\n </StyledListItemHeadTopRightElement>\n )}\n {rightElements[1] && (\n <StyledListItemHeadBottomRightElement>\n {rightElements[1]}\n </StyledListItemHeadBottomRightElement>\n )}\n </>\n )}\n </StyledListItemHeadRightWrapper>\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":[]}
@@ -56,21 +56,18 @@ export const StyledListItemHeadContent = styled.div`
56
56
  }};
57
57
  justify-content: start;
58
58
  line-height: normal;
59
-
60
- margin-top: ${_ref5 => {
61
- let {
62
- $marginTop,
63
- $isOpen
64
- } = _ref5;
65
- return $isOpen ? 0 : $marginTop;
66
- }}px;
67
-
68
- margin-left: ${_ref6 => {
59
+ margin-left: ${_ref5 => {
69
60
  let {
70
61
  $isIconOrImageGiven
71
- } = _ref6;
62
+ } = _ref5;
72
63
  return $isIconOrImageGiven ? '10px' : undefined;
73
64
  }};
65
+ margin-top: ${_ref6 => {
66
+ let {
67
+ $marginTop
68
+ } = _ref6;
69
+ return $marginTop;
70
+ }}px;
74
71
  min-width: 0;
75
72
  `;
76
73
  export const StyledListItemHeadTitle = styled.div`
@@ -181,23 +178,32 @@ export const StyledListItemHeadSubtitleTextPseudo = styled.span`
181
178
 
182
179
  position: absolute;
183
180
  `;
181
+ export const StyledListItemHeadRightWrapper = styled.div`
182
+ align-items: flex-end;
183
+ display: flex;
184
+ flex-direction: column;
185
+ justify-content: ${_ref15 => {
186
+ let {
187
+ $shouldShowCentered
188
+ } = _ref15;
189
+ return $shouldShowCentered ? 'center' : 'flex-start';
190
+ }};
191
+ margin-left: 8px;
192
+ `;
184
193
  export const StyledListItemHeadTopRightElement = styled.div`
185
194
  display: flex;
186
195
  flex: 0 0 auto;
187
196
  font-size: 85%;
188
- margin-left: 8px;
189
197
  `;
190
198
  export const StyledListItemHeadBottomRightElement = styled.div`
191
199
  display: flex;
192
200
  flex: 0 0 auto;
193
- margin-left: 8px;
194
201
  font-size: 85%;
195
202
  `;
196
203
  export const StyledListItemHeadRightElement = styled.div`
197
204
  align-items: center;
198
205
  display: flex;
199
206
  flex: 0 0 auto;
200
- margin-left: 8px;
201
207
  `;
202
208
  export const StyledMotionListItemHeadHoverItem = styled(motion.div)`
203
209
  overflow: hidden;
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","_ref","theme","text","_ref2","$isAnyItemExpandable","_ref3","$isClickable","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","StyledListItemHeadContent","_ref4","$isOpen","_ref5","$marginTop","_ref6","$isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","span","_ref7","_ref8","StyledListItemHeadTitleTextPseudo","_ref9","_ref10","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","_ref11","_ref12","StyledListItemHeadSubtitleTextPseudo","_ref13","_ref14","StyledListItemHeadTopRightElement","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type {\n FramerMotionBugFix,\n WithTheme,\n} from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n $isClickable: boolean;\n $isAnyItemExpandable: boolean;\n}>;\n\nexport const StyledListItemHead = styled(motion.div)<StyledListItemHeadProps>`\n //align-items: center;\n overflow: hidden;\n color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n display: flex;\n min-height: 64px;\n padding: 12px 9px;\n\n ${({ $isAnyItemExpandable }) =>\n !$isAnyItemExpandable &&\n css`\n padding-left: 12px;\n `}\n\n ${({ $isClickable }) =>\n $isClickable &&\n css`\n cursor: pointer;\n `}\n`;\n\nexport const StyledListItemHeadLeftWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: auto 0;\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)<FramerMotionBugFix>`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n height: 26px;\n justify-content: center;\n width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n $isIconOrImageGiven: boolean;\n $isOpen: boolean;\n $marginTop: number;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n justify-content: start;\n line-height: normal;\n\n margin-top: ${({ $marginTop, $isOpen }) => ($isOpen ? 0 : $marginTop)}px;\n\n margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n min-width: 0;\n`;\n\nexport const StyledListItemHeadTitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleContent = styled.div`\n display: flex;\n flex: 1 1 auto;\n max-width: 100%;\n min-width: 0;\n position: relative;\n`;\n\nexport const StyledListItemHeadTitleElement = styled.div`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n margin-left: 8px;\n`;\n\ntype StyledListItemHeadTitleTextProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadTitleText = styled(motion.span)<StyledListItemHeadTitleTextProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\ntype StyledListItemHeadTitleTextPseudoProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadTitleTextPseudo = styled.span<StyledListItemHeadTitleTextPseudoProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n overflow: hidden;\n text-overflow: ellipsis;\n\n opacity: 0;\n pointer-events: none;\n user-select: none;\n position: absolute;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-top: 2px;\n`;\n\ntype StyledListItemHeadSubtitleTextProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadSubtitleText = styled.span<StyledListItemHeadSubtitleTextProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n overflow: hidden;\n text-overflow: ellipsis;\n\n flex: 1 1 auto;\n font-size: 85%;\n min-width: 0;\n opacity: 0.75;\n`;\n\ntype StyledListItemHeadSubtitleTextPseudoProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadSubtitleTextPseudo = styled.span<StyledListItemHeadSubtitleTextPseudoProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n overflow: hidden;\n text-overflow: ellipsis;\n\n flex: 1 1 auto;\n font-size: 85%;\n min-width: 0;\n\n opacity: 0;\n pointer-events: none;\n user-select: none;\n\n position: absolute;\n`;\n\nexport const StyledListItemHeadTopRightElement = styled.div`\n display: flex;\n flex: 0 0 auto;\n font-size: 85%;\n margin-left: 8px;\n`;\n\nexport const StyledListItemHeadBottomRightElement = styled.div`\n display: flex;\n flex: 0 0 auto;\n margin-left: 8px;\n font-size: 85%;\n`;\n\nexport const StyledListItemHeadRightElement = styled.div`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n margin-left: 8px;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)<FramerMotionBugFix>`\n overflow: hidden;\n flex-shrink: 0;\n margin: auto 0;\n`;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","_ref","theme","text","_ref2","$isAnyItemExpandable","_ref3","$isClickable","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","StyledListItemHeadContent","_ref4","$isOpen","_ref5","$isIconOrImageGiven","undefined","_ref6","$marginTop","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","span","_ref7","_ref8","StyledListItemHeadTitleTextPseudo","_ref9","_ref10","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","_ref11","_ref12","StyledListItemHeadSubtitleTextPseudo","_ref13","_ref14","StyledListItemHeadRightWrapper","_ref15","$shouldShowCentered","StyledListItemHeadTopRightElement","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type {\n FramerMotionBugFix,\n WithTheme,\n} from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n $isClickable: boolean;\n $isAnyItemExpandable: boolean;\n}>;\n\nexport const StyledListItemHead = styled(motion.div)<StyledListItemHeadProps>`\n //align-items: center;\n overflow: hidden;\n color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n display: flex;\n min-height: 64px;\n padding: 12px 9px;\n\n ${({ $isAnyItemExpandable }) =>\n !$isAnyItemExpandable &&\n css`\n padding-left: 12px;\n `}\n\n ${({ $isClickable }) =>\n $isClickable &&\n css`\n cursor: pointer;\n `}\n`;\n\nexport const StyledListItemHeadLeftWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: auto 0;\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)<FramerMotionBugFix>`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n height: 26px;\n justify-content: center;\n width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n $isIconOrImageGiven: boolean;\n $isOpen: boolean;\n $marginTop: number;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n justify-content: start;\n line-height: normal;\n margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n margin-top: ${({ $marginTop }) => $marginTop}px;\n min-width: 0;\n`;\n\nexport const StyledListItemHeadTitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleContent = styled.div`\n display: flex;\n flex: 1 1 auto;\n max-width: 100%;\n min-width: 0;\n position: relative;\n`;\n\nexport const StyledListItemHeadTitleElement = styled.div`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n margin-left: 8px;\n`;\n\ntype StyledListItemHeadTitleTextProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadTitleText = styled(motion.span)<StyledListItemHeadTitleTextProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\ntype StyledListItemHeadTitleTextPseudoProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadTitleTextPseudo = styled.span<StyledListItemHeadTitleTextPseudoProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n overflow: hidden;\n text-overflow: ellipsis;\n\n opacity: 0;\n pointer-events: none;\n user-select: none;\n position: absolute;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-top: 2px;\n`;\n\ntype StyledListItemHeadSubtitleTextProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadSubtitleText = styled.span<StyledListItemHeadSubtitleTextProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n overflow: hidden;\n text-overflow: ellipsis;\n\n flex: 1 1 auto;\n font-size: 85%;\n min-width: 0;\n opacity: 0.75;\n`;\n\ntype StyledListItemHeadSubtitleTextPseudoProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadSubtitleTextPseudo = styled.span<StyledListItemHeadSubtitleTextPseudoProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n overflow: hidden;\n text-overflow: ellipsis;\n\n flex: 1 1 auto;\n font-size: 85%;\n min-width: 0;\n\n opacity: 0;\n pointer-events: none;\n user-select: none;\n\n position: absolute;\n`;\n\ntype StyledListItemHeadRightWrapperProps = WithTheme<{ $shouldShowCentered: boolean }>;\n\nexport const StyledListItemHeadRightWrapper = styled.div<StyledListItemHeadRightWrapperProps>`\n align-items: flex-end;\n display: flex;\n flex-direction: column;\n justify-content: ${({ $shouldShowCentered }) =>\n $shouldShowCentered ? 'center' : 'flex-start'};\n margin-left: 8px;\n`;\n\nexport const StyledListItemHeadTopRightElement = styled.div`\n display: flex;\n flex: 0 0 auto;\n font-size: 85%;\n`;\n\nexport const StyledListItemHeadBottomRightElement = styled.div`\n display: flex;\n flex: 0 0 auto;\n font-size: 85%;\n`;\n\nexport const StyledListItemHeadRightElement = styled.div`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)<FramerMotionBugFix>`\n overflow: hidden;\n flex-shrink: 0;\n margin: auto 0;\n`;\n"],"mappings":"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","ignoreList":[]}