@chayns-components/core 5.0.0-beta.1151 → 5.0.0-beta.1152

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 (10) hide show
  1. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js +36 -30
  2. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
  3. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js +22 -0
  4. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
  5. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js +36 -30
  6. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
  7. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js +42 -14
  8. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
  9. package/lib/types/components/list/list-item/list-item-head/ListItemHead.styles.d.ts +2 -0
  10. package/package.json +2 -2
package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js CHANGED
@@ -60,36 +60,39 @@ const ListItemHead = ({
60
60
  onTitleWidthChange(width);
61
61
  }
62
62
  }, [onTitleWidthChange]);
63
+ const shouldShowMultilineTitle = (0, _react.useMemo)(() => !subtitle, [subtitle]);
63
64
  (0, _react.useEffect)(() => {
64
- if (pseudoTitleOpenRef.current && pseudoTitleClosedRef.current) {
65
- const {
66
- height: closedTitleHeight
67
- } = pseudoTitleClosedRef.current.getBoundingClientRect();
68
- const {
69
- height: openTitleHeight,
70
- width: openWidth
71
- } = pseudoTitleOpenRef.current.getBoundingClientRect();
72
- setOpenTitleWidth(openWidth);
73
- let closedHeight = closedTitleHeight + 24;
74
- let openHeight = openTitleHeight + 24;
75
- if (shouldShowSubtitleRow) {
76
- if (pseudoSubtitleOpenRef.current && pseudoSubtitleClosedRef.current) {
77
- const {
78
- height: closedSubtitleHeight
79
- } = pseudoSubtitleClosedRef.current.getBoundingClientRect();
80
- const {
81
- height: openSubtitleHeight
82
- } = pseudoSubtitleOpenRef.current.getBoundingClientRect();
83
- closedHeight += closedSubtitleHeight + 4;
84
- openHeight += openSubtitleHeight + 4;
65
+ window.setTimeout(() => {
66
+ if (pseudoTitleOpenRef.current && pseudoTitleClosedRef.current) {
67
+ const {
68
+ height: closedTitleHeight
69
+ } = pseudoTitleClosedRef.current.getBoundingClientRect();
70
+ const {
71
+ height: openTitleHeight,
72
+ width: openWidth
73
+ } = pseudoTitleOpenRef.current.getBoundingClientRect();
74
+ setOpenTitleWidth(openWidth);
75
+ let closedHeight = closedTitleHeight + 24;
76
+ let openHeight = openTitleHeight + 24;
77
+ if (shouldShowSubtitleRow) {
78
+ if (pseudoSubtitleOpenRef.current && pseudoSubtitleClosedRef.current) {
79
+ const {
80
+ height: closedSubtitleHeight
81
+ } = pseudoSubtitleClosedRef.current.getBoundingClientRect();
82
+ const {
83
+ height: openSubtitleHeight
84
+ } = pseudoSubtitleOpenRef.current.getBoundingClientRect();
85
+ closedHeight += closedSubtitleHeight + 4;
86
+ openHeight += openSubtitleHeight + 4;
87
+ }
85
88
  }
89
+ setHeadHeight({
90
+ closed: closedHeight,
91
+ open: openHeight
92
+ });
93
+ setShouldRenderPseudoElements(false);
86
94
  }
87
- setHeadHeight({
88
- closed: closedHeight,
89
- open: openHeight
90
- });
91
- setShouldRenderPseudoElements(false);
92
- }
95
+ }, 100);
93
96
  }, [shouldShowSubtitleRow]);
94
97
  (0, _react.useEffect)(() => {
95
98
  if (subtitle || title) setShouldRenderPseudoElements(true);
@@ -190,13 +193,16 @@ const ListItemHead = ({
190
193
  $isOpen: isOpen
191
194
  }, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitle, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleContent, null, shouldRenderPseudoElements && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleTextPseudo, {
192
195
  ref: pseudoTitleOpenRef,
193
- $isOpen: true
196
+ $isOpen: true,
197
+ $shouldShowMultilineTitle: false
194
198
  }, title), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleTextPseudo, {
195
199
  ref: pseudoTitleClosedRef,
196
- $isOpen: false
200
+ $isOpen: false,
201
+ $shouldShowMultilineTitle: shouldShowMultilineTitle
197
202
  }, title)), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleText, {
198
203
  $isOpen: isOpen,
199
- $width: openTitleWidth
204
+ $width: openTitleWidth,
205
+ $shouldShowMultilineTitle: shouldShowMultilineTitle
200
206
  }, title), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleElement, null, titleElement))), shouldShowSubtitleRow && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitle, null, shouldRenderPseudoElements && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleTextPseudo, {
201
207
  ref: pseudoSubtitleOpenRef,
202
208
  $isOpen: true
package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemHead.js","names":["_react","_interopRequireWildcard","require","_accordion","_Icon","_interopRequireDefault","_ListItemIcon","_ListItemImage","_ListItemRightElements","_ListItemHead","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","onTitleWidthChange","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","shouldRenderPseudoElements","setShouldRenderPseudoElements","useState","shouldShowHoverItem","setShouldShowHoverItem","openTitleWidth","setOpenTitleWidth","headHeight","setHeadHeight","closed","open","setIsFirstRender","longPressTimeoutRef","useRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","shouldShowSubtitleRow","useEffect","current","width","getBoundingClientRect","height","closedTitleHeight","openTitleHeight","openWidth","closedHeight","openHeight","closedSubtitleHeight","openSubtitleHeight","handleMouseEnter","useCallback","handleMouseLeave","marginTop","useMemo","handleTouchStart","event","window","setTimeout","handleTouchEnd","clearTimeout","shouldPreventRightElementClick","bottom","getElementClickEvent","center","top","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","StyledListItemHead","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$marginTop","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","Fragment","StyledListItemHeadTitleTextPseudo","ref","StyledListItemHeadTitleText","$width","StyledListItemHeadTitleElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadSubtitleText","StyledMotionListItemHeadHoverItemWrapper","marginLeft","StyledMotionListItemHeadHoverItem","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport { getElementClickEvent } from '../../../../utils/accordion';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadSubtitleTextPseudo,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleContent,\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledListItemHeadTitleTextPseudo,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadHoverItemWrapper,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\ntype ListItemHeadProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n hoverItem?: ReactNode;\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n isTitleGreyed?: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n shouldHideImageOrIconBackground?: boolean;\n shouldHideIndicator?: boolean;\n shouldOpenImageOnClick: boolean;\n shouldShowRoundImageOrIcon?: boolean;\n subtitle?: ReactNode;\n title: ReactNode;\n onTitleWidthChange: (width: number) => void;\n titleElement?: ReactNode;\n shouldForceHover?: boolean;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n careOfLocationId,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n shouldHideImageOrIconBackground,\n shouldHideIndicator,\n shouldOpenImageOnClick,\n onTitleWidthChange,\n shouldShowRoundImageOrIcon,\n subtitle,\n shouldForceHover,\n title,\n titleElement,\n}) => {\n const [shouldRenderPseudoElements, setShouldRenderPseudoElements] = useState(true);\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [openTitleWidth, setOpenTitleWidth] = useState(0);\n const [headHeight, setHeadHeight] = useState<HeadHeight>({ closed: 64, open: 64 });\n const [, setIsFirstRender] = useState(false);\n\n const longPressTimeoutRef = useRef<number>();\n\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 shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n useEffect(() => {\n if (pseudoTitleClosedRef.current) {\n const { width } = pseudoTitleClosedRef.current.getBoundingClientRect();\n\n onTitleWidthChange(width);\n }\n }, [onTitleWidthChange]);\n\n useEffect(() => {\n if (pseudoTitleOpenRef.current && pseudoTitleClosedRef.current) {\n const { height: closedTitleHeight } =\n pseudoTitleClosedRef.current.getBoundingClientRect();\n const { height: openTitleHeight, width: openWidth } =\n pseudoTitleOpenRef.current.getBoundingClientRect();\n\n setOpenTitleWidth(openWidth);\n\n let closedHeight = closedTitleHeight + 24;\n let openHeight = openTitleHeight + 24;\n\n if (shouldShowSubtitleRow) {\n if (pseudoSubtitleOpenRef.current && pseudoSubtitleClosedRef.current) {\n const { height: closedSubtitleHeight } =\n pseudoSubtitleClosedRef.current.getBoundingClientRect();\n const { height: openSubtitleHeight } =\n pseudoSubtitleOpenRef.current.getBoundingClientRect();\n\n closedHeight += closedSubtitleHeight + 4;\n openHeight += openSubtitleHeight + 4;\n }\n }\n\n setHeadHeight({ closed: closedHeight, open: openHeight });\n\n setShouldRenderPseudoElements(false);\n }\n }, [shouldShowSubtitleRow]);\n\n useEffect(() => {\n if (subtitle || title) setShouldRenderPseudoElements(true);\n }, [subtitle, title]);\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 shouldPreventRightElementClick = useMemo(() => {\n if (!rightElements) return false;\n\n if (\n typeof rightElements === 'object' &&\n ('bottom' in rightElements || 'center' in rightElements || 'top' in rightElements)\n ) {\n if (rightElements.bottom && getElementClickEvent(rightElements.bottom)) {\n return true;\n }\n\n if (rightElements.center && getElementClickEvent(rightElements.center)) {\n return true;\n }\n\n if (rightElements.top && getElementClickEvent(rightElements.top)) {\n return true;\n }\n } else {\n return getElementClickEvent(rightElements as ReactNode);\n }\n\n return false;\n }, [rightElements]);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return (\n <ListItemIcon\n icons={icons}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n if (images) {\n return (\n <ListItemImage\n imageBackground={imageBackground}\n careOfLocationId={careOfLocationId}\n cornerImage={cornerImage}\n images={images}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n return undefined;\n }, [\n careOfLocationId,\n cornerImage,\n icons,\n imageBackground,\n images,\n shouldHideImageOrIconBackground,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n ]);\n\n return (\n <StyledListItemHead\n animate={{\n height: isOpen ? headHeight.open : headHeight.closed,\n opacity: isTitleGreyed ? 0.5 : 1,\n }}\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 && !shouldHideIndicator && (\n <Icon icons={['fa fa-chevron-right']} />\n )}\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 {shouldRenderPseudoElements && (\n <>\n <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleTextPseudo\n ref={pseudoTitleClosedRef}\n $isOpen={false}\n >\n {title}\n </StyledListItemHeadTitleTextPseudo>\n </>\n )}\n <StyledListItemHeadTitleText $isOpen={isOpen} $width={openTitleWidth}>\n {title}\n </StyledListItemHeadTitleText>\n <StyledListItemHeadTitleElement>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemHeadTitleContent>\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n {shouldRenderPseudoElements && (\n <>\n <StyledListItemHeadSubtitleTextPseudo\n ref={pseudoSubtitleOpenRef}\n $isOpen\n >\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleTextPseudo\n ref={pseudoSubtitleClosedRef}\n $isOpen={false}\n >\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n </>\n )}\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements && (\n <ListItemRightElements\n rightElements={rightElements}\n shouldPreventRightElementClick={shouldPreventRightElementClick}\n />\n )}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItemWrapper\n className=\"beta-chayns-list-item-hover-item\"\n animate={{\n marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n <StyledMotionListItemHeadHoverItem>\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n </StyledMotionListItemHeadHoverItemWrapper>\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","_accordion","_Icon","_interopRequireDefault","_ListItemIcon","_ListItemImage","_ListItemRightElements","_ListItemHead","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","onTitleWidthChange","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","shouldRenderPseudoElements","setShouldRenderPseudoElements","useState","shouldShowHoverItem","setShouldShowHoverItem","openTitleWidth","setOpenTitleWidth","headHeight","setHeadHeight","closed","open","setIsFirstRender","longPressTimeoutRef","useRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","shouldShowSubtitleRow","useEffect","current","width","getBoundingClientRect","shouldShowMultilineTitle","useMemo","window","setTimeout","height","closedTitleHeight","openTitleHeight","openWidth","closedHeight","openHeight","closedSubtitleHeight","openSubtitleHeight","handleMouseEnter","useCallback","handleMouseLeave","marginTop","handleTouchStart","event","handleTouchEnd","clearTimeout","shouldPreventRightElementClick","bottom","getElementClickEvent","center","top","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","StyledListItemHead","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$marginTop","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","Fragment","StyledListItemHeadTitleTextPseudo","ref","$shouldShowMultilineTitle","StyledListItemHeadTitleText","$width","StyledListItemHeadTitleElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadSubtitleText","StyledMotionListItemHeadHoverItemWrapper","marginLeft","StyledMotionListItemHeadHoverItem","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport { getElementClickEvent } from '../../../../utils/accordion';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadSubtitleTextPseudo,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleContent,\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledListItemHeadTitleTextPseudo,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadHoverItemWrapper,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\ntype ListItemHeadProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n hoverItem?: ReactNode;\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n isTitleGreyed?: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n shouldHideImageOrIconBackground?: boolean;\n shouldHideIndicator?: boolean;\n shouldOpenImageOnClick: boolean;\n shouldShowRoundImageOrIcon?: boolean;\n subtitle?: ReactNode;\n title: ReactNode;\n onTitleWidthChange: (width: number) => void;\n titleElement?: ReactNode;\n shouldForceHover?: boolean;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n careOfLocationId,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n shouldHideImageOrIconBackground,\n shouldHideIndicator,\n shouldOpenImageOnClick,\n onTitleWidthChange,\n shouldShowRoundImageOrIcon,\n subtitle,\n shouldForceHover,\n title,\n titleElement,\n}) => {\n const [shouldRenderPseudoElements, setShouldRenderPseudoElements] = useState(true);\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [openTitleWidth, setOpenTitleWidth] = useState(0);\n const [headHeight, setHeadHeight] = useState<HeadHeight>({ closed: 64, open: 64 });\n const [, setIsFirstRender] = useState(false);\n\n const longPressTimeoutRef = useRef<number>();\n\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 shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n useEffect(() => {\n if (pseudoTitleClosedRef.current) {\n const { width } = pseudoTitleClosedRef.current.getBoundingClientRect();\n\n onTitleWidthChange(width);\n }\n }, [onTitleWidthChange]);\n\n const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);\n\n useEffect(() => {\n window.setTimeout(() => {\n if (pseudoTitleOpenRef.current && pseudoTitleClosedRef.current) {\n const { height: closedTitleHeight } =\n pseudoTitleClosedRef.current.getBoundingClientRect();\n const { height: openTitleHeight, width: openWidth } =\n pseudoTitleOpenRef.current.getBoundingClientRect();\n\n setOpenTitleWidth(openWidth);\n\n let closedHeight = closedTitleHeight + 24;\n let openHeight = openTitleHeight + 24;\n\n if (shouldShowSubtitleRow) {\n if (pseudoSubtitleOpenRef.current && pseudoSubtitleClosedRef.current) {\n const { height: closedSubtitleHeight } =\n pseudoSubtitleClosedRef.current.getBoundingClientRect();\n const { height: openSubtitleHeight } =\n pseudoSubtitleOpenRef.current.getBoundingClientRect();\n\n closedHeight += closedSubtitleHeight + 4;\n openHeight += openSubtitleHeight + 4;\n }\n }\n\n setHeadHeight({ closed: closedHeight, open: openHeight });\n\n setShouldRenderPseudoElements(false);\n }\n }, 100);\n }, [shouldShowSubtitleRow]);\n\n useEffect(() => {\n if (subtitle || title) setShouldRenderPseudoElements(true);\n }, [subtitle, title]);\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 shouldPreventRightElementClick = useMemo(() => {\n if (!rightElements) return false;\n\n if (\n typeof rightElements === 'object' &&\n ('bottom' in rightElements || 'center' in rightElements || 'top' in rightElements)\n ) {\n if (rightElements.bottom && getElementClickEvent(rightElements.bottom)) {\n return true;\n }\n\n if (rightElements.center && getElementClickEvent(rightElements.center)) {\n return true;\n }\n\n if (rightElements.top && getElementClickEvent(rightElements.top)) {\n return true;\n }\n } else {\n return getElementClickEvent(rightElements as ReactNode);\n }\n\n return false;\n }, [rightElements]);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return (\n <ListItemIcon\n icons={icons}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n if (images) {\n return (\n <ListItemImage\n imageBackground={imageBackground}\n careOfLocationId={careOfLocationId}\n cornerImage={cornerImage}\n images={images}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n return undefined;\n }, [\n careOfLocationId,\n cornerImage,\n icons,\n imageBackground,\n images,\n shouldHideImageOrIconBackground,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n ]);\n\n return (\n <StyledListItemHead\n animate={{\n height: isOpen ? headHeight.open : headHeight.closed,\n opacity: isTitleGreyed ? 0.5 : 1,\n }}\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 && !shouldHideIndicator && (\n <Icon icons={['fa fa-chevron-right']} />\n )}\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 {shouldRenderPseudoElements && (\n <>\n <StyledListItemHeadTitleTextPseudo\n ref={pseudoTitleOpenRef}\n $isOpen\n $shouldShowMultilineTitle={false}\n >\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleTextPseudo\n ref={pseudoTitleClosedRef}\n $isOpen={false}\n $shouldShowMultilineTitle={shouldShowMultilineTitle}\n >\n {title}\n </StyledListItemHeadTitleTextPseudo>\n </>\n )}\n <StyledListItemHeadTitleText\n $isOpen={isOpen}\n $width={openTitleWidth}\n $shouldShowMultilineTitle={shouldShowMultilineTitle}\n >\n {title}\n </StyledListItemHeadTitleText>\n <StyledListItemHeadTitleElement>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemHeadTitleContent>\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n {shouldRenderPseudoElements && (\n <>\n <StyledListItemHeadSubtitleTextPseudo\n ref={pseudoSubtitleOpenRef}\n $isOpen\n >\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleTextPseudo\n ref={pseudoSubtitleClosedRef}\n $isOpen={false}\n >\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n </>\n )}\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements && (\n <ListItemRightElements\n rightElements={rightElements}\n shouldPreventRightElementClick={shouldPreventRightElementClick}\n />\n )}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItemWrapper\n className=\"beta-chayns-list-item-hover-item\"\n animate={{\n marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n <StyledMotionListItemHeadHoverItem>\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n </StyledMotionListItemHeadHoverItemWrapper>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js CHANGED
@@ -92,6 +92,17 @@ const StyledListItemHeadTitleText = exports.StyledListItemHeadTitleText = (0, _s
92
92
  }) => $isOpen ? `${$width}px` : undefined};
93
93
  overflow: hidden;
94
94
  text-overflow: ellipsis;
95
+
96
+ ${({
97
+ $shouldShowMultilineTitle,
98
+ $isOpen
99
+ }) => $shouldShowMultilineTitle && !$isOpen && (0, _styledComponents.css)`
100
+ display: -webkit-box;
101
+ -webkit-box-orient: vertical;
102
+ -webkit-line-clamp: 2;
103
+ text-overflow: ellipsis;
104
+ white-space: normal;
105
+ `}
95
106
  `;
96
107
  const StyledListItemHeadTitleTextPseudo = exports.StyledListItemHeadTitleTextPseudo = _styledComponents.default.span`
97
108
  font-weight: ${({
@@ -107,6 +118,17 @@ const StyledListItemHeadTitleTextPseudo = exports.StyledListItemHeadTitleTextPse
107
118
  pointer-events: none;
108
119
  user-select: none;
109
120
  position: absolute;
121
+
122
+ ${({
123
+ $shouldShowMultilineTitle,
124
+ $isOpen
125
+ }) => $shouldShowMultilineTitle && !$isOpen && (0, _styledComponents.css)`
126
+ display: -webkit-box;
127
+ -webkit-box-orient: vertical;
128
+ -webkit-line-clamp: 2;
129
+ text-overflow: ellipsis;
130
+ white-space: normal;
131
+ `}
110
132
  `;
111
133
  const StyledListItemHeadSubtitle = exports.StyledListItemHeadSubtitle = _styledComponents.default.div`
112
134
  align-items: center;
package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemHead.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledListItemHead","exports","styled","motion","div","theme","text","$isAnyItemExpandable","css","$isClickable","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","StyledListItemHeadContent","$isOpen","$isIconOrImageGiven","undefined","$marginTop","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","span","$width","StyledListItemHeadTitleTextPseudo","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledMotionListItemHeadHoverItemWrapper","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\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 position: relative;\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 align-items: center;\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; $width: number }>;\n\nexport const StyledListItemHeadTitleText = styled(motion.span)<StyledListItemHeadTitleTextProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n min-width: ${({ $isOpen, $width }) => ($isOpen ? `${$width}px` : undefined)};\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 StyledMotionListItemHeadHoverItemWrapperProps = WithTheme<unknown>;\n\nexport const StyledMotionListItemHeadHoverItemWrapper = styled(\n motion.div,\n)<StyledMotionListItemHeadHoverItemWrapperProps>`\n overflow: hidden;\n flex-shrink: 0;\n margin: auto 0;\n position: absolute;\n right: 0;\n\n background: ${({ theme }: StyledMotionListItemHeadHoverItemWrapperProps) =>\n `linear-gradient(to right, transparent 0px, rgb(${theme['000-rgb'] ?? ''}) 40px)`};\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled.div`\n padding-left: 40px;\n`;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ListItemHead.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledListItemHead","exports","styled","motion","div","theme","text","$isAnyItemExpandable","css","$isClickable","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","StyledListItemHeadContent","$isOpen","$isIconOrImageGiven","undefined","$marginTop","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","span","$width","$shouldShowMultilineTitle","StyledListItemHeadTitleTextPseudo","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledMotionListItemHeadHoverItemWrapper","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\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 position: relative;\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 align-items: center;\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<{\n $isOpen: boolean;\n $width: number;\n $shouldShowMultilineTitle: boolean;\n}>;\n\nexport const StyledListItemHeadTitleText = styled(motion.span)<StyledListItemHeadTitleTextProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n min-width: ${({ $isOpen, $width }) => ($isOpen ? `${$width}px` : undefined)};\n overflow: hidden;\n text-overflow: ellipsis;\n\n ${({ $shouldShowMultilineTitle, $isOpen }) =>\n $shouldShowMultilineTitle &&\n !$isOpen &&\n css`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n white-space: normal;\n `}\n`;\n\ntype StyledListItemHeadTitleTextPseudoProps = WithTheme<{\n $isOpen: boolean;\n $shouldShowMultilineTitle: boolean;\n}>;\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 ${({ $shouldShowMultilineTitle, $isOpen }) =>\n $shouldShowMultilineTitle &&\n !$isOpen &&\n css`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n white-space: normal;\n `}\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 StyledMotionListItemHeadHoverItemWrapperProps = WithTheme<unknown>;\n\nexport const StyledMotionListItemHeadHoverItemWrapper = styled(\n motion.div,\n)<StyledMotionListItemHeadHoverItemWrapperProps>`\n overflow: hidden;\n flex-shrink: 0;\n margin: auto 0;\n position: absolute;\n right: 0;\n\n background: ${({ theme }: StyledMotionListItemHeadHoverItemWrapperProps) =>\n `linear-gradient(to right, transparent 0px, rgb(${theme['000-rgb'] ?? ''}) 40px)`};\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled.div`\n padding-left: 40px;\n`;\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js CHANGED
@@ -53,36 +53,39 @@ const ListItemHead = _ref => {
53
53
  onTitleWidthChange(width);
54
54
  }
55
55
  }, [onTitleWidthChange]);
56
+ const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);
56
57
  useEffect(() => {
57
- if (pseudoTitleOpenRef.current && pseudoTitleClosedRef.current) {
58
- const {
59
- height: closedTitleHeight
60
- } = pseudoTitleClosedRef.current.getBoundingClientRect();
61
- const {
62
- height: openTitleHeight,
63
- width: openWidth
64
- } = pseudoTitleOpenRef.current.getBoundingClientRect();
65
- setOpenTitleWidth(openWidth);
66
- let closedHeight = closedTitleHeight + 24;
67
- let openHeight = openTitleHeight + 24;
68
- if (shouldShowSubtitleRow) {
69
- if (pseudoSubtitleOpenRef.current && pseudoSubtitleClosedRef.current) {
70
- const {
71
- height: closedSubtitleHeight
72
- } = pseudoSubtitleClosedRef.current.getBoundingClientRect();
73
- const {
74
- height: openSubtitleHeight
75
- } = pseudoSubtitleOpenRef.current.getBoundingClientRect();
76
- closedHeight += closedSubtitleHeight + 4;
77
- openHeight += openSubtitleHeight + 4;
58
+ window.setTimeout(() => {
59
+ if (pseudoTitleOpenRef.current && pseudoTitleClosedRef.current) {
60
+ const {
61
+ height: closedTitleHeight
62
+ } = pseudoTitleClosedRef.current.getBoundingClientRect();
63
+ const {
64
+ height: openTitleHeight,
65
+ width: openWidth
66
+ } = pseudoTitleOpenRef.current.getBoundingClientRect();
67
+ setOpenTitleWidth(openWidth);
68
+ let closedHeight = closedTitleHeight + 24;
69
+ let openHeight = openTitleHeight + 24;
70
+ if (shouldShowSubtitleRow) {
71
+ if (pseudoSubtitleOpenRef.current && pseudoSubtitleClosedRef.current) {
72
+ const {
73
+ height: closedSubtitleHeight
74
+ } = pseudoSubtitleClosedRef.current.getBoundingClientRect();
75
+ const {
76
+ height: openSubtitleHeight
77
+ } = pseudoSubtitleOpenRef.current.getBoundingClientRect();
78
+ closedHeight += closedSubtitleHeight + 4;
79
+ openHeight += openSubtitleHeight + 4;
80
+ }
78
81
  }
82
+ setHeadHeight({
83
+ closed: closedHeight,
84
+ open: openHeight
85
+ });
86
+ setShouldRenderPseudoElements(false);
79
87
  }
80
- setHeadHeight({
81
- closed: closedHeight,
82
- open: openHeight
83
- });
84
- setShouldRenderPseudoElements(false);
85
- }
88
+ }, 100);
86
89
  }, [shouldShowSubtitleRow]);
87
90
  useEffect(() => {
88
91
  if (subtitle || title) setShouldRenderPseudoElements(true);
@@ -183,13 +186,16 @@ const ListItemHead = _ref => {
183
186
  $isOpen: isOpen
184
187
  }, /*#__PURE__*/React.createElement(StyledListItemHeadTitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitleContent, null, shouldRenderPseudoElements && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitleTextPseudo, {
185
188
  ref: pseudoTitleOpenRef,
186
- $isOpen: true
189
+ $isOpen: true,
190
+ $shouldShowMultilineTitle: false
187
191
  }, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleTextPseudo, {
188
192
  ref: pseudoTitleClosedRef,
189
- $isOpen: false
193
+ $isOpen: false,
194
+ $shouldShowMultilineTitle: shouldShowMultilineTitle
190
195
  }, title)), /*#__PURE__*/React.createElement(StyledListItemHeadTitleText, {
191
196
  $isOpen: isOpen,
192
- $width: openTitleWidth
197
+ $width: openTitleWidth,
198
+ $shouldShowMultilineTitle: shouldShowMultilineTitle
193
199
  }, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleElement, null, titleElement))), shouldShowSubtitleRow && /*#__PURE__*/React.createElement(StyledListItemHeadSubtitle, null, shouldRenderPseudoElements && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleTextPseudo, {
194
200
  ref: pseudoSubtitleOpenRef,
195
201
  $isOpen: true
package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemHead.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","getElementClickEvent","Icon","ListItemIcon","ListItemImage","ListItemRightElements","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemHeadTitleTextPseudo","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadHoverItemWrapper","StyledMotionListItemHeadIndicator","ListItemHead","_ref","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","onTitleWidthChange","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","shouldRenderPseudoElements","setShouldRenderPseudoElements","shouldShowHoverItem","setShouldShowHoverItem","openTitleWidth","setOpenTitleWidth","headHeight","setHeadHeight","closed","open","setIsFirstRender","longPressTimeoutRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","shouldShowSubtitleRow","current","width","getBoundingClientRect","height","closedTitleHeight","openTitleHeight","openWidth","closedHeight","openHeight","closedSubtitleHeight","openSubtitleHeight","handleMouseEnter","handleMouseLeave","marginTop","handleTouchStart","event","window","setTimeout","handleTouchEnd","clearTimeout","shouldPreventRightElementClick","bottom","center","top","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$marginTop","$isOpen","Fragment","ref","$width","marginLeft","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport { getElementClickEvent } from '../../../../utils/accordion';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadSubtitleTextPseudo,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleContent,\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledListItemHeadTitleTextPseudo,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadHoverItemWrapper,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\ntype ListItemHeadProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n hoverItem?: ReactNode;\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n isTitleGreyed?: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n shouldHideImageOrIconBackground?: boolean;\n shouldHideIndicator?: boolean;\n shouldOpenImageOnClick: boolean;\n shouldShowRoundImageOrIcon?: boolean;\n subtitle?: ReactNode;\n title: ReactNode;\n onTitleWidthChange: (width: number) => void;\n titleElement?: ReactNode;\n shouldForceHover?: boolean;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n careOfLocationId,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n shouldHideImageOrIconBackground,\n shouldHideIndicator,\n shouldOpenImageOnClick,\n onTitleWidthChange,\n shouldShowRoundImageOrIcon,\n subtitle,\n shouldForceHover,\n title,\n titleElement,\n}) => {\n const [shouldRenderPseudoElements, setShouldRenderPseudoElements] = useState(true);\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [openTitleWidth, setOpenTitleWidth] = useState(0);\n const [headHeight, setHeadHeight] = useState<HeadHeight>({ closed: 64, open: 64 });\n const [, setIsFirstRender] = useState(false);\n\n const longPressTimeoutRef = useRef<number>();\n\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 shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n useEffect(() => {\n if (pseudoTitleClosedRef.current) {\n const { width } = pseudoTitleClosedRef.current.getBoundingClientRect();\n\n onTitleWidthChange(width);\n }\n }, [onTitleWidthChange]);\n\n useEffect(() => {\n if (pseudoTitleOpenRef.current && pseudoTitleClosedRef.current) {\n const { height: closedTitleHeight } =\n pseudoTitleClosedRef.current.getBoundingClientRect();\n const { height: openTitleHeight, width: openWidth } =\n pseudoTitleOpenRef.current.getBoundingClientRect();\n\n setOpenTitleWidth(openWidth);\n\n let closedHeight = closedTitleHeight + 24;\n let openHeight = openTitleHeight + 24;\n\n if (shouldShowSubtitleRow) {\n if (pseudoSubtitleOpenRef.current && pseudoSubtitleClosedRef.current) {\n const { height: closedSubtitleHeight } =\n pseudoSubtitleClosedRef.current.getBoundingClientRect();\n const { height: openSubtitleHeight } =\n pseudoSubtitleOpenRef.current.getBoundingClientRect();\n\n closedHeight += closedSubtitleHeight + 4;\n openHeight += openSubtitleHeight + 4;\n }\n }\n\n setHeadHeight({ closed: closedHeight, open: openHeight });\n\n setShouldRenderPseudoElements(false);\n }\n }, [shouldShowSubtitleRow]);\n\n useEffect(() => {\n if (subtitle || title) setShouldRenderPseudoElements(true);\n }, [subtitle, title]);\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 shouldPreventRightElementClick = useMemo(() => {\n if (!rightElements) return false;\n\n if (\n typeof rightElements === 'object' &&\n ('bottom' in rightElements || 'center' in rightElements || 'top' in rightElements)\n ) {\n if (rightElements.bottom && getElementClickEvent(rightElements.bottom)) {\n return true;\n }\n\n if (rightElements.center && getElementClickEvent(rightElements.center)) {\n return true;\n }\n\n if (rightElements.top && getElementClickEvent(rightElements.top)) {\n return true;\n }\n } else {\n return getElementClickEvent(rightElements as ReactNode);\n }\n\n return false;\n }, [rightElements]);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return (\n <ListItemIcon\n icons={icons}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n if (images) {\n return (\n <ListItemImage\n imageBackground={imageBackground}\n careOfLocationId={careOfLocationId}\n cornerImage={cornerImage}\n images={images}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n return undefined;\n }, [\n careOfLocationId,\n cornerImage,\n icons,\n imageBackground,\n images,\n shouldHideImageOrIconBackground,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n ]);\n\n return (\n <StyledListItemHead\n animate={{\n height: isOpen ? headHeight.open : headHeight.closed,\n opacity: isTitleGreyed ? 0.5 : 1,\n }}\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 && !shouldHideIndicator && (\n <Icon icons={['fa fa-chevron-right']} />\n )}\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 {shouldRenderPseudoElements && (\n <>\n <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleTextPseudo\n ref={pseudoTitleClosedRef}\n $isOpen={false}\n >\n {title}\n </StyledListItemHeadTitleTextPseudo>\n </>\n )}\n <StyledListItemHeadTitleText $isOpen={isOpen} $width={openTitleWidth}>\n {title}\n </StyledListItemHeadTitleText>\n <StyledListItemHeadTitleElement>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemHeadTitleContent>\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n {shouldRenderPseudoElements && (\n <>\n <StyledListItemHeadSubtitleTextPseudo\n ref={pseudoSubtitleOpenRef}\n $isOpen\n >\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleTextPseudo\n ref={pseudoSubtitleClosedRef}\n $isOpen={false}\n >\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n </>\n )}\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements && (\n <ListItemRightElements\n rightElements={rightElements}\n shouldPreventRightElementClick={shouldPreventRightElementClick}\n />\n )}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItemWrapper\n className=\"beta-chayns-list-item-hover-item\"\n animate={{\n marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n <StyledMotionListItemHeadHoverItem>\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n </StyledMotionListItemHeadHoverItemWrapper>\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","getElementClickEvent","Icon","ListItemIcon","ListItemImage","ListItemRightElements","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemHeadTitleTextPseudo","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadHoverItemWrapper","StyledMotionListItemHeadIndicator","ListItemHead","_ref","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","onTitleWidthChange","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","shouldRenderPseudoElements","setShouldRenderPseudoElements","shouldShowHoverItem","setShouldShowHoverItem","openTitleWidth","setOpenTitleWidth","headHeight","setHeadHeight","closed","open","setIsFirstRender","longPressTimeoutRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","shouldShowSubtitleRow","current","width","getBoundingClientRect","shouldShowMultilineTitle","window","setTimeout","height","closedTitleHeight","openTitleHeight","openWidth","closedHeight","openHeight","closedSubtitleHeight","openSubtitleHeight","handleMouseEnter","handleMouseLeave","marginTop","handleTouchStart","event","handleTouchEnd","clearTimeout","shouldPreventRightElementClick","bottom","center","top","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$marginTop","$isOpen","Fragment","ref","$shouldShowMultilineTitle","$width","marginLeft","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport { getElementClickEvent } from '../../../../utils/accordion';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadSubtitleTextPseudo,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleContent,\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledListItemHeadTitleTextPseudo,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadHoverItemWrapper,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\ntype ListItemHeadProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n hoverItem?: ReactNode;\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n isTitleGreyed?: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n shouldHideImageOrIconBackground?: boolean;\n shouldHideIndicator?: boolean;\n shouldOpenImageOnClick: boolean;\n shouldShowRoundImageOrIcon?: boolean;\n subtitle?: ReactNode;\n title: ReactNode;\n onTitleWidthChange: (width: number) => void;\n titleElement?: ReactNode;\n shouldForceHover?: boolean;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n careOfLocationId,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n shouldHideImageOrIconBackground,\n shouldHideIndicator,\n shouldOpenImageOnClick,\n onTitleWidthChange,\n shouldShowRoundImageOrIcon,\n subtitle,\n shouldForceHover,\n title,\n titleElement,\n}) => {\n const [shouldRenderPseudoElements, setShouldRenderPseudoElements] = useState(true);\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [openTitleWidth, setOpenTitleWidth] = useState(0);\n const [headHeight, setHeadHeight] = useState<HeadHeight>({ closed: 64, open: 64 });\n const [, setIsFirstRender] = useState(false);\n\n const longPressTimeoutRef = useRef<number>();\n\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 shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n useEffect(() => {\n if (pseudoTitleClosedRef.current) {\n const { width } = pseudoTitleClosedRef.current.getBoundingClientRect();\n\n onTitleWidthChange(width);\n }\n }, [onTitleWidthChange]);\n\n const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);\n\n useEffect(() => {\n window.setTimeout(() => {\n if (pseudoTitleOpenRef.current && pseudoTitleClosedRef.current) {\n const { height: closedTitleHeight } =\n pseudoTitleClosedRef.current.getBoundingClientRect();\n const { height: openTitleHeight, width: openWidth } =\n pseudoTitleOpenRef.current.getBoundingClientRect();\n\n setOpenTitleWidth(openWidth);\n\n let closedHeight = closedTitleHeight + 24;\n let openHeight = openTitleHeight + 24;\n\n if (shouldShowSubtitleRow) {\n if (pseudoSubtitleOpenRef.current && pseudoSubtitleClosedRef.current) {\n const { height: closedSubtitleHeight } =\n pseudoSubtitleClosedRef.current.getBoundingClientRect();\n const { height: openSubtitleHeight } =\n pseudoSubtitleOpenRef.current.getBoundingClientRect();\n\n closedHeight += closedSubtitleHeight + 4;\n openHeight += openSubtitleHeight + 4;\n }\n }\n\n setHeadHeight({ closed: closedHeight, open: openHeight });\n\n setShouldRenderPseudoElements(false);\n }\n }, 100);\n }, [shouldShowSubtitleRow]);\n\n useEffect(() => {\n if (subtitle || title) setShouldRenderPseudoElements(true);\n }, [subtitle, title]);\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 shouldPreventRightElementClick = useMemo(() => {\n if (!rightElements) return false;\n\n if (\n typeof rightElements === 'object' &&\n ('bottom' in rightElements || 'center' in rightElements || 'top' in rightElements)\n ) {\n if (rightElements.bottom && getElementClickEvent(rightElements.bottom)) {\n return true;\n }\n\n if (rightElements.center && getElementClickEvent(rightElements.center)) {\n return true;\n }\n\n if (rightElements.top && getElementClickEvent(rightElements.top)) {\n return true;\n }\n } else {\n return getElementClickEvent(rightElements as ReactNode);\n }\n\n return false;\n }, [rightElements]);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return (\n <ListItemIcon\n icons={icons}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n if (images) {\n return (\n <ListItemImage\n imageBackground={imageBackground}\n careOfLocationId={careOfLocationId}\n cornerImage={cornerImage}\n images={images}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n return undefined;\n }, [\n careOfLocationId,\n cornerImage,\n icons,\n imageBackground,\n images,\n shouldHideImageOrIconBackground,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n ]);\n\n return (\n <StyledListItemHead\n animate={{\n height: isOpen ? headHeight.open : headHeight.closed,\n opacity: isTitleGreyed ? 0.5 : 1,\n }}\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 && !shouldHideIndicator && (\n <Icon icons={['fa fa-chevron-right']} />\n )}\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 {shouldRenderPseudoElements && (\n <>\n <StyledListItemHeadTitleTextPseudo\n ref={pseudoTitleOpenRef}\n $isOpen\n $shouldShowMultilineTitle={false}\n >\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleTextPseudo\n ref={pseudoTitleClosedRef}\n $isOpen={false}\n $shouldShowMultilineTitle={shouldShowMultilineTitle}\n >\n {title}\n </StyledListItemHeadTitleTextPseudo>\n </>\n )}\n <StyledListItemHeadTitleText\n $isOpen={isOpen}\n $width={openTitleWidth}\n $shouldShowMultilineTitle={shouldShowMultilineTitle}\n >\n {title}\n </StyledListItemHeadTitleText>\n <StyledListItemHeadTitleElement>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemHeadTitleContent>\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n {shouldRenderPseudoElements && (\n <>\n <StyledListItemHeadSubtitleTextPseudo\n ref={pseudoSubtitleOpenRef}\n $isOpen\n >\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleTextPseudo\n ref={pseudoSubtitleClosedRef}\n $isOpen={false}\n >\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n </>\n )}\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements && (\n <ListItemRightElements\n rightElements={rightElements}\n shouldPreventRightElementClick={shouldPreventRightElementClick}\n />\n )}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItemWrapper\n className=\"beta-chayns-list-item-hover-item\"\n animate={{\n marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n <StyledMotionListItemHeadHoverItem>\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n </StyledMotionListItemHeadHoverItemWrapper>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js CHANGED
@@ -112,18 +112,32 @@ export const StyledListItemHeadTitleText = styled(motion.span)`
112
112
  }};
113
113
  overflow: hidden;
114
114
  text-overflow: ellipsis;
115
+
116
+ ${_ref0 => {
117
+ let {
118
+ $shouldShowMultilineTitle,
119
+ $isOpen
120
+ } = _ref0;
121
+ return $shouldShowMultilineTitle && !$isOpen && css`
122
+ display: -webkit-box;
123
+ -webkit-box-orient: vertical;
124
+ -webkit-line-clamp: 2;
125
+ text-overflow: ellipsis;
126
+ white-space: normal;
127
+ `;
128
+ }}
115
129
  `;
116
130
  export const StyledListItemHeadTitleTextPseudo = styled.span`
117
- font-weight: ${_ref0 => {
131
+ font-weight: ${_ref1 => {
118
132
  let {
119
133
  $isOpen
120
- } = _ref0;
134
+ } = _ref1;
121
135
  return $isOpen ? 'bold' : 'normal';
122
136
  }};
123
- white-space: ${_ref1 => {
137
+ white-space: ${_ref10 => {
124
138
  let {
125
139
  $isOpen
126
- } = _ref1;
140
+ } = _ref10;
127
141
  return $isOpen ? 'normal' : 'nowrap';
128
142
  }};
129
143
  overflow: hidden;
@@ -133,6 +147,20 @@ export const StyledListItemHeadTitleTextPseudo = styled.span`
133
147
  pointer-events: none;
134
148
  user-select: none;
135
149
  position: absolute;
150
+
151
+ ${_ref11 => {
152
+ let {
153
+ $shouldShowMultilineTitle,
154
+ $isOpen
155
+ } = _ref11;
156
+ return $shouldShowMultilineTitle && !$isOpen && css`
157
+ display: -webkit-box;
158
+ -webkit-box-orient: vertical;
159
+ -webkit-line-clamp: 2;
160
+ text-overflow: ellipsis;
161
+ white-space: normal;
162
+ `;
163
+ }}
136
164
  `;
137
165
  export const StyledListItemHeadSubtitle = styled.div`
138
166
  align-items: center;
@@ -141,16 +169,16 @@ export const StyledListItemHeadSubtitle = styled.div`
141
169
  margin-top: 2px;
142
170
  `;
143
171
  export const StyledListItemHeadSubtitleText = styled.span`
144
- font-weight: ${_ref10 => {
172
+ font-weight: ${_ref12 => {
145
173
  let {
146
174
  $isOpen
147
- } = _ref10;
175
+ } = _ref12;
148
176
  return $isOpen ? 'bold' : 'normal';
149
177
  }};
150
- white-space: ${_ref11 => {
178
+ white-space: ${_ref13 => {
151
179
  let {
152
180
  $isOpen
153
- } = _ref11;
181
+ } = _ref13;
154
182
  return $isOpen ? 'normal' : 'nowrap';
155
183
  }};
156
184
  overflow: hidden;
@@ -162,16 +190,16 @@ export const StyledListItemHeadSubtitleText = styled.span`
162
190
  opacity: 0.75;
163
191
  `;
164
192
  export const StyledListItemHeadSubtitleTextPseudo = styled.span`
165
- font-weight: ${_ref12 => {
193
+ font-weight: ${_ref14 => {
166
194
  let {
167
195
  $isOpen
168
- } = _ref12;
196
+ } = _ref14;
169
197
  return $isOpen ? 'bold' : 'normal';
170
198
  }};
171
- white-space: ${_ref13 => {
199
+ white-space: ${_ref15 => {
172
200
  let {
173
201
  $isOpen
174
- } = _ref13;
202
+ } = _ref15;
175
203
  return $isOpen ? 'normal' : 'nowrap';
176
204
  }};
177
205
  overflow: hidden;
@@ -194,10 +222,10 @@ export const StyledMotionListItemHeadHoverItemWrapper = styled(motion.div)`
194
222
  position: absolute;
195
223
  right: 0;
196
224
 
197
- background: ${_ref14 => {
225
+ background: ${_ref16 => {
198
226
  let {
199
227
  theme
200
- } = _ref14;
228
+ } = _ref16;
201
229
  return `linear-gradient(to right, transparent 0px, rgb(${theme['000-rgb'] ?? ''}) 40px)`;
202
230
  }};
203
231
  `;
package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js.map CHANGED
@@ -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","$isIconOrImageGiven","undefined","_ref6","$marginTop","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","span","_ref7","_ref8","_ref9","$width","StyledListItemHeadTitleTextPseudo","_ref0","_ref1","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","_ref10","_ref11","StyledListItemHeadSubtitleTextPseudo","_ref12","_ref13","StyledMotionListItemHeadHoverItemWrapper","_ref14","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\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 position: relative;\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 align-items: center;\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; $width: number }>;\n\nexport const StyledListItemHeadTitleText = styled(motion.span)<StyledListItemHeadTitleTextProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n min-width: ${({ $isOpen, $width }) => ($isOpen ? `${$width}px` : undefined)};\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 StyledMotionListItemHeadHoverItemWrapperProps = WithTheme<unknown>;\n\nexport const StyledMotionListItemHeadHoverItemWrapper = styled(\n motion.div,\n)<StyledMotionListItemHeadHoverItemWrapperProps>`\n overflow: hidden;\n flex-shrink: 0;\n margin: auto 0;\n position: absolute;\n right: 0;\n\n background: ${({ theme }: StyledMotionListItemHeadHoverItemWrapperProps) =>\n `linear-gradient(to right, transparent 0px, rgb(${theme['000-rgb'] ?? ''}) 40px)`};\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled.div`\n padding-left: 40px;\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","_ref9","$width","_ref0","$shouldShowMultilineTitle","StyledListItemHeadTitleTextPseudo","_ref1","_ref10","_ref11","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","_ref12","_ref13","StyledListItemHeadSubtitleTextPseudo","_ref14","_ref15","StyledMotionListItemHeadHoverItemWrapper","_ref16","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\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 position: relative;\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 align-items: center;\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<{\n $isOpen: boolean;\n $width: number;\n $shouldShowMultilineTitle: boolean;\n}>;\n\nexport const StyledListItemHeadTitleText = styled(motion.span)<StyledListItemHeadTitleTextProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n min-width: ${({ $isOpen, $width }) => ($isOpen ? `${$width}px` : undefined)};\n overflow: hidden;\n text-overflow: ellipsis;\n\n ${({ $shouldShowMultilineTitle, $isOpen }) =>\n $shouldShowMultilineTitle &&\n !$isOpen &&\n css`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n white-space: normal;\n `}\n`;\n\ntype StyledListItemHeadTitleTextPseudoProps = WithTheme<{\n $isOpen: boolean;\n $shouldShowMultilineTitle: boolean;\n}>;\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 ${({ $shouldShowMultilineTitle, $isOpen }) =>\n $shouldShowMultilineTitle &&\n !$isOpen &&\n css`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n white-space: normal;\n `}\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 StyledMotionListItemHeadHoverItemWrapperProps = WithTheme<unknown>;\n\nexport const StyledMotionListItemHeadHoverItemWrapper = styled(\n motion.div,\n)<StyledMotionListItemHeadHoverItemWrapperProps>`\n overflow: hidden;\n flex-shrink: 0;\n margin: auto 0;\n position: absolute;\n right: 0;\n\n background: ${({ theme }: StyledMotionListItemHeadHoverItemWrapperProps) =>\n `linear-gradient(to right, transparent 0px, rgb(${theme['000-rgb'] ?? ''}) 40px)`};\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled.div`\n padding-left: 40px;\n`;\n"],"mappings":"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","ignoreList":[]}
package/lib/types/components/list/list-item/list-item-head/ListItemHead.styles.d.ts CHANGED
@@ -24,12 +24,14 @@ export declare const StyledListItemHeadTitleElement: import("styled-components/d
24
24
  type StyledListItemHeadTitleTextProps = WithTheme<{
25
25
  $isOpen: boolean;
26
26
  $width: number;
27
+ $shouldShowMultilineTitle: boolean;
27
28
  }>;
28
29
  export declare const StyledListItemHeadTitleText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"span">, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & {
29
30
  ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
30
31
  }, StyledListItemHeadTitleTextProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLSpanElement, import("motion/react").HTMLMotionProps<"span">>, keyof import("react").Component<any, {}, any>>;
31
32
  type StyledListItemHeadTitleTextPseudoProps = WithTheme<{
32
33
  $isOpen: boolean;
34
+ $shouldShowMultilineTitle: boolean;
33
35
  }>;
34
36
  export declare const StyledListItemHeadTitleTextPseudo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledListItemHeadTitleTextPseudoProps>> & string;
35
37
  export declare const StyledListItemHeadSubtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.1151",
3
+ "version": "5.0.0-beta.1152",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -86,5 +86,5 @@
86
86
  "publishConfig": {
87
87
  "access": "public"
88
88
  },
89
- "gitHead": "f77314748aa1f907d2a89a01f881f2e7ac91ac77"
89
+ "gitHead": "139238bcb64a9499270aa4bc2779219cdca03c1a"
90
90
  }