npm - @chayns-components/core - Versions diffs - 5.0.0-beta.945 → 5.0.0-beta.948 - Mend

@chayns-components/core 5.0.0-beta.945 → 5.0.0-beta.948

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 (25) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemHead.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","Icon","ListItemIcon","ListItemImage","ListItemRightElements","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemHeadTitleTextPseudo","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadIndicator","ListItemHead","_ref","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","isDisabledButNotReallyDisabled","shouldShowRoundImageOrIcon","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","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$marginTop","$isOpen","ref","marginLeft","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 type { IListItemRightElements } from '../../../../types/list';\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 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?: IListItemRightElements;\n shouldHideImageOrIconBackground?: boolean;\n shouldHideIndicator?: boolean;\n subtitle?: ReactNode;\n shouldShowRoundImageOrIcon?: boolean;\n title: ReactNode;\n titleElement?: ReactNode;\n isDisabledButNotReallyDisabled?: boolean;\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 shouldHideImageOrIconBackground,\n shouldHideIndicator,\n subtitle,\n isDisabledButNotReallyDisabled,\n shouldShowRoundImageOrIcon,\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 = subtitle \|\| 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 (\n <ListItemIcon\n icons={icons}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n if (images) {\n return (\n <ListItemImage\n images={images}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n return undefined;\n }, [icons, images, shouldHideImageOrIconBackground, shouldShowRoundImageOrIcon]);\n\n return (\n <StyledListItemHead\n animate={{ height: isOpen ? headHeight.open : headHeight.closed, opacity: isDisabledButNotReallyDisabled ? .5:1 }}\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 <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 && <ListItemRightElements rightElements={rightElements} />}\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","ListItemRightElements","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemHeadTitleTextPseudo","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadIndicator","ListItemHead","_ref","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","isDisabledButNotReallyDisabled","shouldShowRoundImageOrIcon","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","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$marginTop","$isOpen","ref","$width","width","marginLeft","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 type { IListItemRightElements } from '../../../../types/list';\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 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?: IListItemRightElements;\n shouldHideImageOrIconBackground?: boolean;\n shouldHideIndicator?: boolean;\n subtitle?: ReactNode;\n shouldShowRoundImageOrIcon?: boolean;\n title: ReactNode;\n titleElement?: ReactNode;\n isDisabledButNotReallyDisabled?: boolean;\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 shouldHideImageOrIconBackground,\n shouldHideIndicator,\n subtitle,\n isDisabledButNotReallyDisabled,\n shouldShowRoundImageOrIcon,\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 = subtitle \|\| 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 (\n <ListItemIcon\n icons={icons}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n if (images) {\n return (\n <ListItemImage\n images={images}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n return undefined;\n }, [icons, images, shouldHideImageOrIconBackground, shouldShowRoundImageOrIcon]);\n\n return (\n <StyledListItemHead\n animate={{\n height: isOpen ? headHeight.open : headHeight.closed,\n opacity: isDisabledButNotReallyDisabled ? 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 <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleTextPseudo\n ref={pseudoTitleClosedRef}\n $isOpen={false}\n >\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleText\n $isOpen={isOpen}\n $width={openedTitle?.width ?? 0}\n >\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 && <ListItemRightElements rightElements={rightElements} />}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItem\n animate={{\n marginLeft: shouldShowHoverItem ? 8 : 0,\n opacity: shouldShowHoverItem ? 1 : 0,\n width: shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}

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

@@ -100,21 +100,28 @@ export const StyledListItemHeadTitleText = styled(motion.span)`
     $isOpen
   } = _ref8;
   return $isOpen ? 'normal' : 'nowrap';
+}};
+    min-width: ${_ref9 => {
+  let {
+    $isOpen,
+    $width
+  } = _ref9;
+  return $isOpen ? `${$width}px` : undefined;
 }};
     overflow: hidden;
     text-overflow: ellipsis;
 `;
 export const StyledListItemHeadTitleTextPseudo = styled.span`
-    font-weight: ${_ref9 => {
+    font-weight: ${_ref10 => {
   let {
     $isOpen
-  } = _ref9;
+  } = _ref10;
   return $isOpen ? 'bold' : 'normal';
 }};
-    white-space: ${_ref10 => {
+    white-space: ${_ref11 => {
   let {
     $isOpen
-  } = _ref10;
+  } = _ref11;
   return $isOpen ? 'normal' : 'nowrap';
 }};
     overflow: hidden;
@@ -132,16 +139,16 @@ export const StyledListItemHeadSubtitle = styled.div`
     margin-top: 2px;
 `;
 export const StyledListItemHeadSubtitleText = styled.span`
-    font-weight: ${_ref11 => {
+    font-weight: ${_ref12 => {
   let {
     $isOpen
-  } = _ref11;
+  } = _ref12;
   return $isOpen ? 'bold' : 'normal';
 }};
-    white-space: ${_ref12 => {
+    white-space: ${_ref13 => {
   let {
     $isOpen
-  } = _ref12;
+  } = _ref13;
   return $isOpen ? 'normal' : 'nowrap';
 }};
     overflow: hidden;
@@ -153,16 +160,16 @@ export const StyledListItemHeadSubtitleText = styled.span`
     opacity: 0.75;
 `;
 export const StyledListItemHeadSubtitleTextPseudo = styled.span`
-    font-weight: ${_ref13 => {
+    font-weight: ${_ref14 => {
   let {
     $isOpen
-  } = _ref13;
+  } = _ref14;
   return $isOpen ? 'bold' : 'normal';
 }};
-    white-space: ${_ref14 => {
+    white-space: ${_ref15 => {
   let {
     $isOpen
-  } = _ref14;
+  } = _ref15;
   return $isOpen ? 'normal' : 'nowrap';
 }};
     overflow: hidden;

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

	@@ -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","~~StyledListItemHeadTitleTextPseudo~~","~~_ref9~~","_ref10","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","~~_ref11~~","~~_ref12~~","StyledListItemHeadSubtitleTextPseudo","~~_ref13~~","~~_ref14~~","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\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)<FramerMotionBugFix>`\n overflow: hidden;\n flex-shrink: 0;\n margin: auto 0;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAW/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAA0B;AAC7E;AACA;AACA,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA;AAC/D;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OACvB,CAACC,oBAAoB,IACrBP,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMQ,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,IACZT,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAMU,6BAA6B,GAAGX,MAAM,CAACG,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMS,iCAAiC,GAAGZ,MAAM,CAACD,MAAM,CAACI,GAAG,CAAqB;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMU,yBAAyB,GAAGb,MAAM,CAACG,GAAmC;AACnF;AACA;AACA;AACA,mBAAmBW,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAMC,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC;AACjE;AACA;AACA,mBAAmBC,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,MAAM,GAAGC,SAAS;AAAA,CAAC;AAC1F,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAKC,UAAU;AAAA;AAChD;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGrB,MAAM,CAACG,GAAG;AACjD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMmB,8BAA8B,GAAGtB,MAAM,CAACG,GAAG;AACxD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMoB,8BAA8B,GAAGvB,MAAM,CAACG,GAAG;AACxD;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMqB,2BAA2B,GAAGxB,MAAM,CAACD,MAAM,CAAC0B,IAAI,CAAmC;AAChG,mBAAmBC,KAAA;EAAA,IAAC;IAAEX;EAAQ,CAAC,GAAAW,KAAA;EAAA,OAAMX,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC;AACjE,mBAAmBY,KAAA;EAAA,IAAC;IAAEZ;EAAQ,CAAC,GAAAY,KAAA;EAAA,OAAMZ,OAAO,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAC;AACnE;AACA;AACA,CAAC;AAID,OAAO,~~MAAMa~~,iCAAiC,~~GAAG5B~~,MAAM,CAACyB,IAA4C;AACpG,~~mBAAmBI~~,~~KAAA~~;EAAA,IAAC;~~IAAEd~~;EAAQ,CAAC,~~GAAAc~~,~~KAAA~~;EAAA,~~OAAMd~~,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC;AACjE,~~mBAAmBe~~,MAAA;EAAA,IAAC;~~IAAEf~~;EAAQ,CAAC,~~GAAAe~~,MAAA;EAAA,~~OAAMf~~,OAAO,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,~~MAAMgB~~,0BAA0B,~~GAAG/B~~,MAAM,CAACG,GAAG;AACpD;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,~~MAAM6B~~,8BAA8B,~~GAAGhC~~,MAAM,CAACyB,IAAyC;AAC9F,~~mBAAmBQ~~,MAAA;EAAA,IAAC;~~IAAElB~~;EAAQ,CAAC,~~GAAAkB~~,MAAA;EAAA,~~OAAMlB~~,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC;AACjE,~~mBAAmBmB~~,MAAA;EAAA,IAAC;~~IAAEnB~~;EAAQ,CAAC,~~GAAAmB~~,MAAA;EAAA,~~OAAMnB~~,OAAO,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,~~MAAMoB~~,oCAAoC,~~GAAGnC~~,MAAM,CAACyB,IAA+C;AAC1G,~~mBAAmBW~~,MAAA;EAAA,IAAC;~~IAAErB~~;EAAQ,CAAC,~~GAAAqB~~,MAAA;EAAA,~~OAAMrB~~,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC;AACjE,~~mBAAmBsB~~,MAAA;EAAA,IAAC;~~IAAEtB~~;EAAQ,CAAC,~~GAAAsB~~,MAAA;EAAA,~~OAAMtB~~,OAAO,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,~~MAAMuB~~,iCAAiC,~~GAAGtC~~,MAAM,CAACD,MAAM,CAACI,GAAG,CAAqB;AACvF;AACA;AACA;AACA,CAAC","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","StyledListItemHeadTitleTextPseudo","_ref10","_ref11","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","_ref12","_ref13","StyledListItemHeadSubtitleTextPseudo","_ref14","_ref15","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; $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\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":[]}

package/lib/esm/components/search-box/SearchBox.js CHANGED Viewed

@@ -11,10 +11,11 @@ import GroupName from './group-name/GroupName';
 import SearchBoxBody from './search-box-body/SearchBoxBody';
 import SearchBoxItem from './search-box-item/SearchBoxItem';
 import { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';
-import { StyledSearchBox, StyledSearchBoxIcon } from './SearchBox.styles';
+import { StyledSearchBox, StyledSearchBoxIcon, StyledSearchBoxLeftWrapper } from './SearchBox.styles';
 const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     placeholder,
+    leftIcons,
     lists,
     onChange,
     onBlur,
@@ -378,6 +379,9 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
       color: theme['006']
     }));
   }, [handleClick, shouldShowToggleIcon, theme]);
+  const leftElement = useMemo(() => /*#__PURE__*/React.createElement(StyledSearchBoxLeftWrapper, null, leftIcons && /*#__PURE__*/React.createElement(Icon, {
+    icons: leftIcons
+  }), selectedImage && selectedImage), [leftIcons, selectedImage]);
   /**
    * This function handles changes of the input
@@ -598,10 +602,10 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     onFocus: handleFocus,
     placeholder: placeholder,
     onKeyDown: onKeyDown,
-    leftElement: selectedImage,
+    leftElement: leftElement,
     rightElement: rightElement,
     value: value
-  })), portal), [handleBlur, handleChange, handleFocus, onKeyDown, placeholder, portal, rightElement, selectedImage, value]);
+  })), portal), [handleBlur, handleChange, handleFocus, leftElement, onKeyDown, placeholder, portal, rightElement, value]);
 });
 SearchBox.displayName = 'SearchBox';
 export default SearchBox;

package/lib/esm/components/search-box/SearchBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","createPortal","useTheme","calculateContentHeight","searchList","Icon","Input","GroupName","SearchBoxBody","SearchBoxItem","StyledSearchBoxItemImage","StyledSearchBox","StyledSearchBoxIcon","SearchBox","_ref","ref","placeholder","lists","onChange","onBlur","onSelect","onKeyDown","selectedId","container","shouldShowRoundImage","shouldShowContentOnEmptyInput","shouldAddInputToList","shouldShowToggleIcon","matchingListsItems","setMatchingListsItems","selectedImage","setSelectedImage","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","hasMultipleGroups","setHasMultipleGroups","length","filteredChildrenArray","setFilteredChildrenArray","inputToListValue","setInputToListValue","groups","setGroups","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","boxRef","contentRef","inputRef","theme","browser","current","el","element","closest","Element","getBoundingClientRect","filterbuttons","items","forEach","_ref2","groupName","push","id","text","activeList","newLists","list","includes","newMatchingItems","_ref3","newList","searchString","undefined","filteredMatchingListItems","map","_ref4","filter","item","handleOpen","bodyHeight","handleClose","handleFilterButtonsGroupSelect","keys","handleOutsideClick","event","contains","target","document","addEventListener","window","removeEventListener","textArray","_ref5","_ref6","input","getElementById","getInputWidth","offsetWidth","ResizeObserver","observe","_ref7","selectedItem","find","_ref8","imageUrl","createElement","src","$shouldShowRoundImage","handleFocus","_ref9","_ref10","_ref11","_ref12","_ref13","toLowerCase","handleClick","rightElement","onClick","icons","color","handleChange","filteredLists","_ref14","handleBlur","handleSelect","newItem","replace","content","_ref15","index","key","name","_ref16","handleKeyDown","e","preventDefault","children","childrenArray","Array","from","newChildren","child","startsWith","filteredChildren","dataset","isgroupname","newIndex","prevElement","tabIndex","newElement","focus","textContent","attributes","nodeValue","handleKeyPress","keyCode","clear","initial","selectedGroups","coordinates","onGroupSelect","onFocus","leftElement","displayName"],"sources":["../../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n FocusEvent,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from 'styled-components';\nimport type { IFilterButtonItem } from '../../types/filterButtons';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport Input from '../input/Input';\nimport GroupName from './group-name/GroupName';\nimport SearchBoxBody from './search-box-body/SearchBoxBody';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';\nimport { StyledSearchBox, StyledSearchBoxIcon } from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n /*\n The element where the content of the `ComboBox` should be rendered via React Portal.\n /\n container?: Element;\n /\n List of groups with items that can be searched. It is possible to give only one list; if multiple lists are provided, the 'group name' parameter becomes mandatory.\n /\n lists: ISearchBoxItems[];\n /\n The placeholder that should be displayed.\n /\n placeholder?: string;\n /\n Function to be executed when the input lost focus.\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function to be executed when the input is changed.\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Function to be executed when an item is selected.\n /\n onSelect?: (item: ISearchBoxItem) => void;\n /\n Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n /\n selectedId?: string;\n /\n If true, the value in the Input is displayed in the list.\n /\n shouldAddInputToList: boolean;\n /\n Whether the full list of items should be displayed if the input is empty.\n /\n shouldShowContentOnEmptyInput?: boolean;\n /\n If true, the images of the items are displayed in a round shape.\n /\n shouldShowRoundImage?: boolean;\n /\n Whether the icon to open and close the list should be displayed.\n /\n shouldShowToggleIcon?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n (\n {\n placeholder,\n lists,\n onChange,\n onBlur,\n onSelect,\n onKeyDown,\n selectedId,\n container,\n shouldShowRoundImage,\n shouldShowContentOnEmptyInput = true,\n shouldAddInputToList = true,\n shouldShowToggleIcon = false,\n },\n ref,\n ) => {\n const [matchingListsItems, setMatchingListsItems] = useState<ISearchBoxItems[]>(lists);\n const [selectedImage, setSelectedImage] = useState<ReactElement>();\n const [value, setValue] = useState('');\n const [isAnimating, setIsAnimating] = useState(false);\n const [height, setHeight] = useState<number>(0);\n const [width, setWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n const [hasMultipleGroups, setHasMultipleGroups] = useState<boolean>(lists.length > 1);\n const [filteredChildrenArray, setFilteredChildrenArray] = useState<Element[]>();\n const [inputToListValue, setInputToListValue] = useState<string>('');\n const [groups, setGroups] = useState<string[]>(['all']);\n const [portal, setPortal] = useState<ReactPortal>();\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n const [newContainer, setNewContainer] = useState<Element \| null>(container ?? null);\n\n const boxRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n const theme = useTheme();\n\n const { browser } = getDevice();\n\n useEffect(() => {\n if (boxRef.current && !container) {\n const el = boxRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner') \|\| el.closest('body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if(container instanceof Element){\n setNewContainer(container)\n }\n }, [container]);\n\n useEffect(() => {\n if (boxRef.current) {\n const { x, y } = boxRef.current.getBoundingClientRect();\n\n setInternalCoordinates({\n x,\n y,\n });\n }\n }, []);\n\n /\n Checks if Lists are smaller then 1\n /\n useEffect(() => {\n setHasMultipleGroups(lists.length > 1);\n }, [lists]);\n\n const filterbuttons = useMemo(() => {\n const items: IFilterButtonItem[] = [];\n\n if (lists.length <= 1) {\n return items;\n }\n\n lists.forEach(({ groupName }) => {\n if (groupName) {\n items.push({\n id: groupName,\n text: groupName,\n });\n }\n });\n\n return items;\n }, [lists]);\n\n /\n Filters the lists by the FilterButtons\n /\n const activeList = useMemo(() => {\n let newLists: ISearchBoxItems[] = [];\n\n if (groups[0] === 'all') {\n newLists = lists;\n } else {\n lists.forEach((list) => {\n if (list.groupName && groups.includes(list.groupName)) {\n newLists.push(list);\n }\n });\n }\n\n const newMatchingItems: ISearchBoxItems[] = [];\n\n newLists.forEach(({ list, groupName }) => {\n const newList = searchList({ items: list, searchString: value });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\n }\n\n const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n groupName,\n list: list.filter(\n (item) => !(newMatchingItems.length === 1 && item.text === value),\n ),\n }));\n\n setMatchingListsItems(filteredMatchingListItems);\n\n return newLists;\n }, [groups, lists, shouldAddInputToList, value]);\n\n const handleOpen = useCallback(() => {\n if (boxRef.current) {\n const { x, y, height: bodyHeight } = boxRef.current.getBoundingClientRect();\n\n setInternalCoordinates({\n x,\n y: y + bodyHeight,\n });\n\n setIsAnimating(true);\n }\n }, []);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\n\n const handleFilterButtonsGroupSelect = (keys: string[]) => {\n setGroups(keys.length === 0 ? ['all'] : keys);\n };\n\n /\n This function closes the list of items\n /\n const handleOutsideClick = useCallback(\n (event: MouseEvent) => {\n if (\n boxRef.current &&\n !boxRef.current.contains(event.target as Node) &&\n contentRef.current &&\n !contentRef.current.contains(event.target as Node)\n ) {\n handleClose();\n }\n },\n [handleClose],\n );\n\n /\n This hook listens for clicks\n /\n useEffect(() => {\n document.addEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => handleClose());\n\n return () => {\n document.removeEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => handleClose());\n };\n }, [handleOutsideClick, boxRef, handleClose]);\n\n /\n This hook calculates the height\n /\n useEffect(() => {\n const textArray: string[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n list.forEach(({ text }) => textArray.push(text));\n if (!groupName) {\n return;\n }\n textArray.push(groupName);\n });\n\n if (shouldAddInputToList && inputToListValue !== '') {\n textArray.push(inputToListValue);\n }\n\n setHeight(calculateContentHeight(textArray));\n }, [inputToListValue, activeList, placeholder, shouldAddInputToList]);\n\n /\n This hook calculates the width\n /\n useEffect(() => {\n const input = document.getElementById('search_box_input');\n\n const getInputWidth = () => {\n if (input) {\n setWidth(input.offsetWidth);\n }\n };\n\n if (input) {\n new ResizeObserver(getInputWidth).observe(input);\n }\n }, []);\n\n useEffect(() => {\n if (selectedId) {\n activeList.forEach(({ list }) => {\n const selectedItem = list.find(({ id }) => id === selectedId);\n if (selectedItem) {\n setValue(selectedItem.text);\n\n if (selectedItem.imageUrl) {\n setSelectedImage(\n <StyledSearchBoxItemImage\n src={selectedItem.imageUrl}\n $shouldShowRoundImage={shouldShowRoundImage}\n />,\n );\n }\n }\n });\n }\n }, [activeList, selectedId, shouldShowRoundImage]);\n\n /\n This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n * should not be reset if the list changes and the selectedId is still undefined.\n /\n useEffect(() => {\n if (!selectedId) {\n setValue('');\n }\n }, [selectedId]);\n\n /\n This function sets the items on focus if shouldShowContentOnEmptyInput\n /\n const handleFocus = useCallback(() => {\n if (shouldShowContentOnEmptyInput) {\n const newMatchingItems: ISearchBoxItems[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n const newList = searchList({ items: list, searchString: value });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\n }\n\n const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n groupName,\n list: list.filter(\n (item) => !(newMatchingItems.length === 1 && item.text === value),\n ),\n }));\n\n setMatchingListsItems(filteredMatchingListItems);\n\n if (filteredMatchingListItems.length !== 0) {\n handleOpen();\n } else {\n handleClose();\n }\n }\n }, [\n activeList,\n handleClose,\n handleOpen,\n shouldAddInputToList,\n shouldShowContentOnEmptyInput,\n value,\n ]);\n\n /\n This function filters the lists by input\n /\n\n useEffect(() => {\n const newMatchingItems: ISearchBoxItems[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n const newList = searchList({ items: list, searchString: value });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\n }\n\n if (shouldAddInputToList && inputToListValue !== '') {\n newMatchingItems.forEach(({ list }) => {\n list.forEach(({ text }) => {\n if (text.toLowerCase() === inputToListValue.toLowerCase()) {\n setInputToListValue('');\n }\n });\n });\n }\n }, [\n inputToListValue,\n activeList,\n shouldAddInputToList,\n shouldShowContentOnEmptyInput,\n value,\n ]);\n\n const handleClick = useCallback(() => {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }, [handleClose, handleOpen, isAnimating]);\n\n const rightElement = useMemo(() => {\n if (!shouldShowToggleIcon) {\n return undefined;\n }\n\n return (\n <StyledSearchBoxIcon onClick={handleClick}>\n <Icon icons={['fa fa-chevron-down']} color={theme['006'] as string} />\n </StyledSearchBoxIcon>\n );\n }, [handleClick, shouldShowToggleIcon, theme]);\n\n /\n This function handles changes of the input\n /\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const filteredLists: ISearchBoxItems[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n const newList = searchList({ items: list, searchString: event.target.value });\n\n if (newList.length > 0) {\n filteredLists.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (filteredLists.length === 0 && shouldAddInputToList) {\n filteredLists.push({\n groupName: undefined,\n list: [],\n });\n }\n\n setSelectedImage(undefined);\n\n if (!shouldShowContentOnEmptyInput && !event.target.value) {\n setMatchingListsItems([]);\n } else {\n setMatchingListsItems(filteredLists);\n if (filteredLists.length !== 0) {\n handleOpen();\n } else {\n handleClose();\n }\n }\n\n setValue(event.target.value);\n setInputToListValue(event.target.value);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [\n activeList,\n handleClose,\n handleOpen,\n onChange,\n shouldAddInputToList,\n shouldShowContentOnEmptyInput,\n ],\n );\n\n /\n This function handles the blur event of the input\n /\n const handleBlur = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (typeof onBlur === 'function') {\n onBlur(event);\n }\n },\n [onBlur],\n );\n\n /\n This function handles the item selection\n */\n const handleSelect = useCallback(\n (item: ISearchBoxItem) => {\n const newItem = {\n ...item,\n text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', ''),\n };\n\n setValue(newItem.text);\n handleClose();\n\n setSelectedImage(\n newItem.imageUrl ? (\n <StyledSearchBoxItemImage\n src={newItem.imageUrl}\n $shouldShowRoundImage={shouldShowRoundImage}\n />\n ) : undefined,\n );\n\n setMatchingListsItems([]);\n\n if (typeof onSelect === 'function') {\n onSelect(newItem);\n }\n },\n [handleClose, onSelect, shouldShowRoundImage],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n matchingListsItems.forEach(({ groupName, list }, index) => {\n if (hasMultipleGroups) {\n if (list.length <= 0) {\n return;\n }\n\n if (index !== 0) {\n items.push(<GroupName key={groupName} name={groupName ?? ''} />);\n }\n }\n\n list.forEach(({ id, text, imageUrl }) => {\n items.push(\n <SearchBoxItem\n key={`${id}_${groupName ?? ''}`}\n id={id}\n text={text}\n imageUrl={imageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n onSelect={handleSelect}\n groupName={groupName}\n />,\n );\n });\n });\n\n if (shouldAddInputToList && inputToListValue !== '') {\n items.push(\n <SearchBoxItem\n id=\"input-value\"\n onSelect={handleSelect}\n text={`<b>${inputToListValue}</b`}\n />,\n );\n }\n\n return items;\n }, [\n matchingListsItems,\n shouldAddInputToList,\n inputToListValue,\n hasMultipleGroups,\n shouldShowRoundImage,\n handleSelect,\n ]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) {\n return;\n }\n\n if (e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n\n if (!children) {\n return;\n }\n\n const childrenArray = Array.from(children);\n\n const newChildren = childrenArray.find((child) =>\n child.id.startsWith('searchbox-content__'),\n )?.children;\n\n if (newChildren && newChildren.length > 0) {\n const filteredChildren = Array.from(newChildren).filter(\n (child) => (child as HTMLElement).dataset.isgroupname !== 'true',\n );\n setFilteredChildrenArray(filteredChildren);\n\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex +\n (e.key === 'ArrowUp' ? -1 : 1) +\n filteredChildren.length) %\n filteredChildren.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = filteredChildren[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = filteredChildren[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n if (filteredChildrenArray) {\n const element = filteredChildrenArray[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id, textContent } = element;\n\n let imageUrl: string \| undefined;\n\n // Just Ignore, it works\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n if (element.children[0]?.attributes.src) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n imageUrl = element.children[0]?.attributes.src.nodeValue as string;\n }\n\n handleSelect({\n id: id.replace('search-box-item__', ''),\n text: textContent ?? '',\n imageUrl,\n });\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [filteredChildrenArray, focusedIndex, handleSelect, isAnimating]);\n\n const handleKeyPress = useCallback((event: KeyboardEvent) => {\n if (event.keyCode === 27) {\n setMatchingListsItems([]);\n }\n }, []);\n\n useImperativeHandle(\n ref,\n () => ({\n clear: () => setValue(''),\n }),\n [],\n );\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyPress);\n\n return () => {\n document.addEventListener('keydown', handleKeyPress);\n };\n }, [handleKeyPress]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isAnimating && (\n <SearchBoxBody\n filterbuttons={filterbuttons}\n selectedGroups={groups}\n width={width}\n coordinates={internalCoordinates}\n browser={browser?.name}\n height={height}\n ref={contentRef}\n onGroupSelect={handleFilterButtonsGroupSelect}\n >\n {content}\n </SearchBoxBody>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n browser?.name,\n newContainer,\n content,\n filterbuttons,\n groups,\n height,\n internalCoordinates,\n isAnimating,\n width,\n ]);\n\n return useMemo(\n () => (\n <StyledSearchBox ref={boxRef}>\n <div id=\"search_box_input\">\n <Input\n ref={inputRef}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={handleFocus}\n placeholder={placeholder}\n onKeyDown={onKeyDown}\n leftElement={selectedImage}\n rightElement={rightElement}\n value={value}\n />\n </div>\n {portal}\n </StyledSearchBox>\n ),\n [\n handleBlur,\n handleChange,\n handleFocus,\n onKeyDown,\n placeholder,\n portal,\n rightElement,\n selectedImage,\n value,\n ],\n );\n },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","createPortal","useTheme","calculateContentHeight","searchList","Icon","Input","GroupName","SearchBoxBody","SearchBoxItem","StyledSearchBoxItemImage","StyledSearchBox","StyledSearchBoxIcon","StyledSearchBoxLeftWrapper","SearchBox","_ref","ref","placeholder","leftIcons","lists","onChange","onBlur","onSelect","onKeyDown","selectedId","container","shouldShowRoundImage","shouldShowContentOnEmptyInput","shouldAddInputToList","shouldShowToggleIcon","matchingListsItems","setMatchingListsItems","selectedImage","setSelectedImage","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","hasMultipleGroups","setHasMultipleGroups","length","filteredChildrenArray","setFilteredChildrenArray","inputToListValue","setInputToListValue","groups","setGroups","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","boxRef","contentRef","inputRef","theme","browser","current","el","element","closest","Element","getBoundingClientRect","filterbuttons","items","forEach","_ref2","groupName","push","id","text","activeList","newLists","list","includes","newMatchingItems","_ref3","newList","searchString","undefined","filteredMatchingListItems","map","_ref4","filter","item","handleOpen","bodyHeight","handleClose","handleFilterButtonsGroupSelect","keys","handleOutsideClick","event","contains","target","document","addEventListener","window","removeEventListener","textArray","_ref5","_ref6","input","getElementById","getInputWidth","offsetWidth","ResizeObserver","observe","_ref7","selectedItem","find","_ref8","imageUrl","createElement","src","$shouldShowRoundImage","handleFocus","_ref9","_ref10","_ref11","_ref12","_ref13","toLowerCase","handleClick","rightElement","onClick","icons","color","leftElement","handleChange","filteredLists","_ref14","handleBlur","handleSelect","newItem","replace","content","_ref15","index","key","name","_ref16","handleKeyDown","e","preventDefault","children","childrenArray","Array","from","newChildren","child","startsWith","filteredChildren","dataset","isgroupname","newIndex","prevElement","tabIndex","newElement","focus","textContent","attributes","nodeValue","handleKeyPress","keyCode","clear","initial","selectedGroups","coordinates","onGroupSelect","onFocus","displayName"],"sources":["../../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n FocusEvent,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from 'styled-components';\nimport type { IFilterButtonItem } from '../../types/filterButtons';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport Input from '../input/Input';\nimport GroupName from './group-name/GroupName';\nimport SearchBoxBody from './search-box-body/SearchBoxBody';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';\nimport {\n StyledSearchBox,\n StyledSearchBoxIcon,\n StyledSearchBoxLeftWrapper,\n} from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n /*\n The element where the content of the `ComboBox` should be rendered via React Portal.\n /\n container?: Element;\n /\n An optional icon that is displayed inside the left side of the input.\n /\n leftIcons?: string[];\n /\n List of groups with items that can be searched. It is possible to give only one list; if multiple lists are provided, the 'group name' parameter becomes mandatory.\n /\n lists: ISearchBoxItems[];\n /\n The placeholder that should be displayed.\n /\n placeholder?: string;\n /\n Function to be executed when the input lost focus.\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function to be executed when the input is changed.\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Function to be executed when an item is selected.\n /\n onSelect?: (item: ISearchBoxItem) => void;\n /\n Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n /\n selectedId?: string;\n /\n If true, the value in the Input is displayed in the list.\n /\n shouldAddInputToList: boolean;\n /\n Whether the full list of items should be displayed if the input is empty.\n /\n shouldShowContentOnEmptyInput?: boolean;\n /\n If true, the images of the items are displayed in a round shape.\n /\n shouldShowRoundImage?: boolean;\n /\n Whether the icon to open and close the list should be displayed.\n /\n shouldShowToggleIcon?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n (\n {\n placeholder,\n leftIcons,\n lists,\n onChange,\n onBlur,\n onSelect,\n onKeyDown,\n selectedId,\n container,\n shouldShowRoundImage,\n shouldShowContentOnEmptyInput = true,\n shouldAddInputToList = true,\n shouldShowToggleIcon = false,\n },\n ref,\n ) => {\n const [matchingListsItems, setMatchingListsItems] = useState<ISearchBoxItems[]>(lists);\n const [selectedImage, setSelectedImage] = useState<ReactElement>();\n const [value, setValue] = useState('');\n const [isAnimating, setIsAnimating] = useState(false);\n const [height, setHeight] = useState<number>(0);\n const [width, setWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n const [hasMultipleGroups, setHasMultipleGroups] = useState<boolean>(lists.length > 1);\n const [filteredChildrenArray, setFilteredChildrenArray] = useState<Element[]>();\n const [inputToListValue, setInputToListValue] = useState<string>('');\n const [groups, setGroups] = useState<string[]>(['all']);\n const [portal, setPortal] = useState<ReactPortal>();\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n const [newContainer, setNewContainer] = useState<Element \| null>(container ?? null);\n\n const boxRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n const theme = useTheme();\n\n const { browser } = getDevice();\n\n useEffect(() => {\n if (boxRef.current && !container) {\n const el = boxRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner') \|\| el.closest('body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n useEffect(() => {\n if (boxRef.current) {\n const { x, y } = boxRef.current.getBoundingClientRect();\n\n setInternalCoordinates({\n x,\n y,\n });\n }\n }, []);\n\n /\n Checks if Lists are smaller then 1\n /\n useEffect(() => {\n setHasMultipleGroups(lists.length > 1);\n }, [lists]);\n\n const filterbuttons = useMemo(() => {\n const items: IFilterButtonItem[] = [];\n\n if (lists.length <= 1) {\n return items;\n }\n\n lists.forEach(({ groupName }) => {\n if (groupName) {\n items.push({\n id: groupName,\n text: groupName,\n });\n }\n });\n\n return items;\n }, [lists]);\n\n /\n Filters the lists by the FilterButtons\n /\n const activeList = useMemo(() => {\n let newLists: ISearchBoxItems[] = [];\n\n if (groups[0] === 'all') {\n newLists = lists;\n } else {\n lists.forEach((list) => {\n if (list.groupName && groups.includes(list.groupName)) {\n newLists.push(list);\n }\n });\n }\n\n const newMatchingItems: ISearchBoxItems[] = [];\n\n newLists.forEach(({ list, groupName }) => {\n const newList = searchList({ items: list, searchString: value });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\n }\n\n const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n groupName,\n list: list.filter(\n (item) => !(newMatchingItems.length === 1 && item.text === value),\n ),\n }));\n\n setMatchingListsItems(filteredMatchingListItems);\n\n return newLists;\n }, [groups, lists, shouldAddInputToList, value]);\n\n const handleOpen = useCallback(() => {\n if (boxRef.current) {\n const { x, y, height: bodyHeight } = boxRef.current.getBoundingClientRect();\n\n setInternalCoordinates({\n x,\n y: y + bodyHeight,\n });\n\n setIsAnimating(true);\n }\n }, []);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\n\n const handleFilterButtonsGroupSelect = (keys: string[]) => {\n setGroups(keys.length === 0 ? ['all'] : keys);\n };\n\n /\n This function closes the list of items\n /\n const handleOutsideClick = useCallback(\n (event: MouseEvent) => {\n if (\n boxRef.current &&\n !boxRef.current.contains(event.target as Node) &&\n contentRef.current &&\n !contentRef.current.contains(event.target as Node)\n ) {\n handleClose();\n }\n },\n [handleClose],\n );\n\n /\n This hook listens for clicks\n /\n useEffect(() => {\n document.addEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => handleClose());\n\n return () => {\n document.removeEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => handleClose());\n };\n }, [handleOutsideClick, boxRef, handleClose]);\n\n /\n This hook calculates the height\n /\n useEffect(() => {\n const textArray: string[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n list.forEach(({ text }) => textArray.push(text));\n if (!groupName) {\n return;\n }\n textArray.push(groupName);\n });\n\n if (shouldAddInputToList && inputToListValue !== '') {\n textArray.push(inputToListValue);\n }\n\n setHeight(calculateContentHeight(textArray));\n }, [inputToListValue, activeList, placeholder, shouldAddInputToList]);\n\n /\n This hook calculates the width\n /\n useEffect(() => {\n const input = document.getElementById('search_box_input');\n\n const getInputWidth = () => {\n if (input) {\n setWidth(input.offsetWidth);\n }\n };\n\n if (input) {\n new ResizeObserver(getInputWidth).observe(input);\n }\n }, []);\n\n useEffect(() => {\n if (selectedId) {\n activeList.forEach(({ list }) => {\n const selectedItem = list.find(({ id }) => id === selectedId);\n if (selectedItem) {\n setValue(selectedItem.text);\n\n if (selectedItem.imageUrl) {\n setSelectedImage(\n <StyledSearchBoxItemImage\n src={selectedItem.imageUrl}\n $shouldShowRoundImage={shouldShowRoundImage}\n />,\n );\n }\n }\n });\n }\n }, [activeList, selectedId, shouldShowRoundImage]);\n\n /\n This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n * should not be reset if the list changes and the selectedId is still undefined.\n /\n useEffect(() => {\n if (!selectedId) {\n setValue('');\n }\n }, [selectedId]);\n\n /\n This function sets the items on focus if shouldShowContentOnEmptyInput\n /\n const handleFocus = useCallback(() => {\n if (shouldShowContentOnEmptyInput) {\n const newMatchingItems: ISearchBoxItems[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n const newList = searchList({ items: list, searchString: value });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\n }\n\n const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n groupName,\n list: list.filter(\n (item) => !(newMatchingItems.length === 1 && item.text === value),\n ),\n }));\n\n setMatchingListsItems(filteredMatchingListItems);\n\n if (filteredMatchingListItems.length !== 0) {\n handleOpen();\n } else {\n handleClose();\n }\n }\n }, [\n activeList,\n handleClose,\n handleOpen,\n shouldAddInputToList,\n shouldShowContentOnEmptyInput,\n value,\n ]);\n\n /\n This function filters the lists by input\n /\n\n useEffect(() => {\n const newMatchingItems: ISearchBoxItems[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n const newList = searchList({ items: list, searchString: value });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\n }\n\n if (shouldAddInputToList && inputToListValue !== '') {\n newMatchingItems.forEach(({ list }) => {\n list.forEach(({ text }) => {\n if (text.toLowerCase() === inputToListValue.toLowerCase()) {\n setInputToListValue('');\n }\n });\n });\n }\n }, [\n inputToListValue,\n activeList,\n shouldAddInputToList,\n shouldShowContentOnEmptyInput,\n value,\n ]);\n\n const handleClick = useCallback(() => {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }, [handleClose, handleOpen, isAnimating]);\n\n const rightElement = useMemo(() => {\n if (!shouldShowToggleIcon) {\n return undefined;\n }\n\n return (\n <StyledSearchBoxIcon onClick={handleClick}>\n <Icon icons={['fa fa-chevron-down']} color={theme['006'] as string} />\n </StyledSearchBoxIcon>\n );\n }, [handleClick, shouldShowToggleIcon, theme]);\n\n const leftElement = useMemo(\n () => (\n <StyledSearchBoxLeftWrapper>\n {leftIcons && <Icon icons={leftIcons} />}\n {selectedImage && selectedImage}\n </StyledSearchBoxLeftWrapper>\n ),\n [leftIcons, selectedImage],\n );\n\n /\n This function handles changes of the input\n /\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const filteredLists: ISearchBoxItems[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n const newList = searchList({ items: list, searchString: event.target.value });\n\n if (newList.length > 0) {\n filteredLists.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (filteredLists.length === 0 && shouldAddInputToList) {\n filteredLists.push({\n groupName: undefined,\n list: [],\n });\n }\n\n setSelectedImage(undefined);\n\n if (!shouldShowContentOnEmptyInput && !event.target.value) {\n setMatchingListsItems([]);\n } else {\n setMatchingListsItems(filteredLists);\n if (filteredLists.length !== 0) {\n handleOpen();\n } else {\n handleClose();\n }\n }\n\n setValue(event.target.value);\n setInputToListValue(event.target.value);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [\n activeList,\n handleClose,\n handleOpen,\n onChange,\n shouldAddInputToList,\n shouldShowContentOnEmptyInput,\n ],\n );\n\n /\n This function handles the blur event of the input\n /\n const handleBlur = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (typeof onBlur === 'function') {\n onBlur(event);\n }\n },\n [onBlur],\n );\n\n /\n This function handles the item selection\n */\n const handleSelect = useCallback(\n (item: ISearchBoxItem) => {\n const newItem = {\n ...item,\n text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', ''),\n };\n\n setValue(newItem.text);\n handleClose();\n\n setSelectedImage(\n newItem.imageUrl ? (\n <StyledSearchBoxItemImage\n src={newItem.imageUrl}\n $shouldShowRoundImage={shouldShowRoundImage}\n />\n ) : undefined,\n );\n\n setMatchingListsItems([]);\n\n if (typeof onSelect === 'function') {\n onSelect(newItem);\n }\n },\n [handleClose, onSelect, shouldShowRoundImage],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n matchingListsItems.forEach(({ groupName, list }, index) => {\n if (hasMultipleGroups) {\n if (list.length <= 0) {\n return;\n }\n\n if (index !== 0) {\n items.push(<GroupName key={groupName} name={groupName ?? ''} />);\n }\n }\n\n list.forEach(({ id, text, imageUrl }) => {\n items.push(\n <SearchBoxItem\n key={`${id}_${groupName ?? ''}`}\n id={id}\n text={text}\n imageUrl={imageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n onSelect={handleSelect}\n groupName={groupName}\n />,\n );\n });\n });\n\n if (shouldAddInputToList && inputToListValue !== '') {\n items.push(\n <SearchBoxItem\n id=\"input-value\"\n onSelect={handleSelect}\n text={`<b>${inputToListValue}</b`}\n />,\n );\n }\n\n return items;\n }, [\n matchingListsItems,\n shouldAddInputToList,\n inputToListValue,\n hasMultipleGroups,\n shouldShowRoundImage,\n handleSelect,\n ]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) {\n return;\n }\n\n if (e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n\n if (!children) {\n return;\n }\n\n const childrenArray = Array.from(children);\n\n const newChildren = childrenArray.find((child) =>\n child.id.startsWith('searchbox-content__'),\n )?.children;\n\n if (newChildren && newChildren.length > 0) {\n const filteredChildren = Array.from(newChildren).filter(\n (child) => (child as HTMLElement).dataset.isgroupname !== 'true',\n );\n setFilteredChildrenArray(filteredChildren);\n\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex +\n (e.key === 'ArrowUp' ? -1 : 1) +\n filteredChildren.length) %\n filteredChildren.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = filteredChildren[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = filteredChildren[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n if (filteredChildrenArray) {\n const element = filteredChildrenArray[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id, textContent } = element;\n\n let imageUrl: string \| undefined;\n\n // Just Ignore, it works\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n if (element.children[0]?.attributes.src) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n imageUrl = element.children[0]?.attributes.src.nodeValue as string;\n }\n\n handleSelect({\n id: id.replace('search-box-item__', ''),\n text: textContent ?? '',\n imageUrl,\n });\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [filteredChildrenArray, focusedIndex, handleSelect, isAnimating]);\n\n const handleKeyPress = useCallback((event: KeyboardEvent) => {\n if (event.keyCode === 27) {\n setMatchingListsItems([]);\n }\n }, []);\n\n useImperativeHandle(\n ref,\n () => ({\n clear: () => setValue(''),\n }),\n [],\n );\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyPress);\n\n return () => {\n document.addEventListener('keydown', handleKeyPress);\n };\n }, [handleKeyPress]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isAnimating && (\n <SearchBoxBody\n filterbuttons={filterbuttons}\n selectedGroups={groups}\n width={width}\n coordinates={internalCoordinates}\n browser={browser?.name}\n height={height}\n ref={contentRef}\n onGroupSelect={handleFilterButtonsGroupSelect}\n >\n {content}\n </SearchBoxBody>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n browser?.name,\n newContainer,\n content,\n filterbuttons,\n groups,\n height,\n internalCoordinates,\n isAnimating,\n width,\n ]);\n\n return useMemo(\n () => (\n <StyledSearchBox ref={boxRef}>\n <div id=\"search_box_input\">\n <Input\n ref={inputRef}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={handleFocus}\n placeholder={placeholder}\n onKeyDown={onKeyDown}\n leftElement={leftElement}\n rightElement={rightElement}\n value={value}\n />\n </div>\n {portal}\n </StyledSearchBox>\n ),\n [\n handleBlur,\n handleChange,\n handleFocus,\n leftElement,\n onKeyDown,\n placeholder,\n portal,\n rightElement,\n value,\n ],\n );\n },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/search-box/SearchBox.styles.js CHANGED Viewed

@@ -72,4 +72,9 @@ export const StyledSearchBoxIcon = styled.div`
     cursor: pointer;
     padding: 0 10px;
 `;
+export const StyledSearchBoxLeftWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+`;
 //# sourceMappingURL=SearchBox.styles.js.map

package/lib/esm/components/search-box/SearchBox.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchBox.styles.js","names":["motion","styled","css","StyledSearchBox","div","StyledMotionSearchBoxBody","_ref","theme","_ref2","$width","_ref3","$height","_ref4","_ref5","$browser","StyledSearchBoxIcon"],"sources":["../../../../src/components/search-box/SearchBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSearchBox = styled.div``;\n\ntype StyledMotionSearchBoxBodyProps = WithTheme<{\n $height: number;\n $width: number;\n $browser: Browser \| 'bot' \| null \| undefined;\n}>;\n\nexport const StyledMotionSearchBoxBody = styled(motion.div)<StyledMotionSearchBoxBodyProps>`\n background: ${({ theme }: StyledMotionSearchBoxBodyProps) => theme['101']};\n position: absolute;\n z-index: 4;\n display: flex;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n border-top: none;\n cursor: pointer;\n width: ${({ $width }) => $width}px;\n max-height: 300px;\n overflow-y: ${({ $height }) => ($height <= 300 ? 'hidden' : 'auto')};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledMotionSearchBoxBodyProps) => theme['009-rgb']}, 0.08) inset;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledMotionSearchBoxBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n\nexport const StyledSearchBoxIcon = styled.div`\n cursor: pointer;\n padding: 0 10px;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,eAAe,GAAGF,MAAM,CAACG,GAAG,EAAE;AAQ3C,OAAO,MAAMC,yBAAyB,GAAGJ,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F,kBAAkBE,IAAA;EAAA,IAAC;IAAEC;EAAsC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AACnC;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAMC,OAAO,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAM;AAAA,CAAC;AACvE;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEL;EAAsC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA;AAC9E;AACA;AACA,MAAMM,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEP;EAAsC,CAAC,GAAAM,KAAA;EAAA,OAClDC,QAAQ,KAAK,SAAS,GAChBZ,GAAG;AACjB,0CAA0CK,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDL,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CK,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AAAA;AACf,CAAC;AAED,OAAO,MAAMQ,mBAAmB,GAAGd,MAAM,CAACG,GAAG;AAC7C;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"SearchBox.styles.js","names":["motion","styled","css","StyledSearchBox","div","StyledMotionSearchBoxBody","_ref","theme","_ref2","$width","_ref3","$height","_ref4","_ref5","$browser","StyledSearchBoxIcon","StyledSearchBoxLeftWrapper"],"sources":["../../../../src/components/search-box/SearchBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSearchBox = styled.div``;\n\ntype StyledMotionSearchBoxBodyProps = WithTheme<{\n $height: number;\n $width: number;\n $browser: Browser \| 'bot' \| null \| undefined;\n}>;\n\nexport const StyledMotionSearchBoxBody = styled(motion.div)<StyledMotionSearchBoxBodyProps>`\n background: ${({ theme }: StyledMotionSearchBoxBodyProps) => theme['101']};\n position: absolute;\n z-index: 4;\n display: flex;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n border-top: none;\n cursor: pointer;\n width: ${({ $width }) => $width}px;\n max-height: 300px;\n overflow-y: ${({ $height }) => ($height <= 300 ? 'hidden' : 'auto')};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledMotionSearchBoxBodyProps) => theme['009-rgb']}, 0.08) inset;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledMotionSearchBoxBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n\nexport const StyledSearchBoxIcon = styled.div`\n cursor: pointer;\n padding: 0 10px;\n`;\n\nexport const StyledSearchBoxLeftWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,eAAe,GAAGF,MAAM,CAACG,GAAG,EAAE;AAQ3C,OAAO,MAAMC,yBAAyB,GAAGJ,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F,kBAAkBE,IAAA;EAAA,IAAC;IAAEC;EAAsC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AACnC;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAMC,OAAO,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAM;AAAA,CAAC;AACvE;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEL;EAAsC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA;AAC9E;AACA;AACA,MAAMM,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEP;EAAsC,CAAC,GAAAM,KAAA;EAAA,OAClDC,QAAQ,KAAK,SAAS,GAChBZ,GAAG;AACjB,0CAA0CK,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDL,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CK,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AAAA;AACf,CAAC;AAED,OAAO,MAAMQ,mBAAmB,GAAGd,MAAM,CAACG,GAAG;AAC7C;AACA;AACA,CAAC;AAED,OAAO,MAAMY,0BAA0B,GAAGf,MAAM,CAACG,GAAG;AACpD;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/search-box/search-box-body/SearchBoxBody.styles.js CHANGED Viewed

@@ -54,6 +54,12 @@ export const StyledSearchBoxBodyHead = styled.div`
 }}
 `;
 export const StyledSearchBoxBodyHeadGroupName = styled.div`
+    color: ${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.text;
+}};
     font-weight: bold;
 `;
 export const StyledSearchBoxBodyContent = styled.div`
@@ -61,26 +67,26 @@ export const StyledSearchBoxBodyContent = styled.div`
     flex-direction: column;
     cursor: pointer;
     width: 100%;
-    max-height: ${_ref6 => {
+    max-height: ${_ref7 => {
   let {
     $headHeight
-  } = _ref6;
+  } = _ref7;
   return 300 - $headHeight;
 }}px;
-    overflow-y: ${_ref7 => {
+    overflow-y: ${_ref8 => {
   let {
     $height,
     $headHeight
-  } = _ref7;
+  } = _ref8;
   return $height + $headHeight <= 300 ? 'hidden' : 'auto';
 }};
     // Styles for custom scrollbar
-    ${_ref8 => {
+    ${_ref9 => {
   let {
     $browser,
     theme
-  } = _ref8;
+  } = _ref9;
   return $browser === 'firefox' ? css`
                   scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
                   scrollbar-width: thin;

package/lib/esm/components/search-box/search-box-body/SearchBoxBody.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchBoxBody.styles.js","names":["motion","styled","css","StyledMotionSearchBoxBody","div","_ref","theme","_ref2","$width","_ref3","StyledSearchBoxBodyHead","_ref4","$hasGroupName","_ref5","$hasScrolled","StyledSearchBoxBodyHeadGroupName","StyledSearchBoxBodyContent","~~_ref6~~","$headHeight","~~_ref7~~","$height","~~_ref8~~","$browser"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionSearchBoxBodyProps = WithTheme<{\n $width: number;\n}>;\n\nexport const StyledMotionSearchBoxBody = styled(motion.div)<StyledMotionSearchBoxBodyProps>`\n background: ${({ theme }: StyledMotionSearchBoxBodyProps) => theme['101']};\n position: absolute;\n z-index: 4;\n display: flex;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n border-top: none;\n width: ${({ $width }) => $width - 2}px;\n max-height: 300px;\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledMotionSearchBoxBodyProps) => theme['009-rgb']}, 0.08) inset;\n`;\n\nexport const StyledSearchBoxBodyHead = styled.div<StyledSearchBoxHeadProps>`\n padding: 10px 10px 5px;\n display: flex;\n flex-direction: column;\n\n ${({ $hasGroupName }) =>\n $hasGroupName &&\n css`\n gap: 15px;\n `}\n\n ${({ $hasScrolled }) =>\n $hasScrolled &&\n css`\n box-shadow: 0 1px 4px #0000001a;\n `}\n`;\n\ntype StyledSearchBoxHeadProps = WithTheme<{ $hasScrolled: boolean; $hasGroupName: boolean }>;\n\nexport const StyledSearchBoxBodyHeadGroupName = styled.div`\n font-weight: bold;\n`;\n\ntype StyledSearchBoxBodyContentProps = WithTheme<{\n $height: number;\n $headHeight: number;\n $browser: Browser \| 'bot' \| null \| undefined;\n}>;\n\nexport const StyledSearchBoxBodyContent = styled.div<StyledSearchBoxBodyContentProps>`\n display: flex;\n flex-direction: column;\n cursor: pointer;\n width: 100%;\n max-height: ${({ $headHeight }) => 300 - $headHeight}px;\n overflow-y: ${({ $height, $headHeight }) => ($height + $headHeight <= 300 ? 'hidden' : 'auto')};\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledSearchBoxBodyContentProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F,kBAAkBC,IAAA;EAAA,IAAC;IAAEC;EAAsC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM,GAAG,CAAC;AAAA;AACvC;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEH;EAAsC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,SAAS,CAAC;AAAA;AAC9E,CAAC;AAED,OAAO,MAAMI,uBAAuB,GAAGT,MAAM,CAACG,GAA6B;AAC3E;AACA;AACA;AACA;AACA,MAAMO,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,IACbV,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMW,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,IACZZ,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;~~AAID~~,OAAO,MAAMa,gCAAgC,GAAGd,MAAM,CAACG,~~GAAG~~;~~AAC1D~~;AACA,CAAC;AAQD,OAAO,~~MAAMY~~,0BAA0B,~~GAAGf~~,MAAM,CAACG,GAAoC;AACrF;AACA;AACA;AACA;AACA,~~kBAAkBa~~,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAK,GAAG,GAAGC,WAAW;AAAA;AACxD,kBAAkBC,KAAA;EAAA,IAAC;IAAEC,OAAO;IAAEF;EAAY,CAAC,GAAAC,KAAA;EAAA,OAAMC,OAAO,GAAGF,WAAW,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAM;AAAA,CAAC;AAClG;AACA;AACA,MAAMG,KAAA;EAAA,IAAC;IAAEC,QAAQ;~~IAAEhB~~;EAAuC,CAAC,~~GAAAe~~,KAAA;EAAA,OACnDC,QAAQ,KAAK,SAAS,~~GAChBpB~~,GAAG;AACjB,0CAA0CI,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDJ,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CI,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"SearchBoxBody.styles.js","names":["motion","styled","css","StyledMotionSearchBoxBody","div","_ref","theme","_ref2","$width","_ref3","StyledSearchBoxBodyHead","_ref4","$hasGroupName","_ref5","$hasScrolled","StyledSearchBoxBodyHeadGroupName","_ref6","text","StyledSearchBoxBodyContent","_ref7","$headHeight","_ref8","$height","_ref9","$browser"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionSearchBoxBodyProps = WithTheme<{\n $width: number;\n}>;\n\nexport const StyledMotionSearchBoxBody = styled(motion.div)<StyledMotionSearchBoxBodyProps>`\n background: ${({ theme }: StyledMotionSearchBoxBodyProps) => theme['101']};\n position: absolute;\n z-index: 4;\n display: flex;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n border-top: none;\n width: ${({ $width }) => $width - 2}px;\n max-height: 300px;\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledMotionSearchBoxBodyProps) => theme['009-rgb']}, 0.08) inset;\n`;\n\nexport const StyledSearchBoxBodyHead = styled.div<StyledSearchBoxHeadProps>`\n padding: 10px 10px 5px;\n display: flex;\n flex-direction: column;\n\n ${({ $hasGroupName }) =>\n $hasGroupName &&\n css`\n gap: 15px;\n `}\n\n ${({ $hasScrolled }) =>\n $hasScrolled &&\n css`\n box-shadow: 0 1px 4px #0000001a;\n `}\n`;\n\ntype StyledSearchBoxHeadProps = WithTheme<{ $hasScrolled: boolean; $hasGroupName: boolean }>;\n\ntype StyledSearchBoxBodyHeadGroupNameNameProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxBodyHeadGroupName = styled.div<StyledSearchBoxBodyHeadGroupNameNameProps>`\n color: ${({ theme }: StyledSearchBoxBodyHeadGroupNameNameProps) => theme.text};\n font-weight: bold;\n`;\n\ntype StyledSearchBoxBodyContentProps = WithTheme<{\n $height: number;\n $headHeight: number;\n $browser: Browser \| 'bot' \| null \| undefined;\n}>;\n\nexport const StyledSearchBoxBodyContent = styled.div<StyledSearchBoxBodyContentProps>`\n display: flex;\n flex-direction: column;\n cursor: pointer;\n width: 100%;\n max-height: ${({ $headHeight }) => 300 - $headHeight}px;\n overflow-y: ${({ $height, $headHeight }) => ($height + $headHeight <= 300 ? 'hidden' : 'auto')};\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledSearchBoxBodyContentProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F,kBAAkBC,IAAA;EAAA,IAAC;IAAEC;EAAsC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM,GAAG,CAAC;AAAA;AACvC;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEH;EAAsC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,SAAS,CAAC;AAAA;AAC9E,CAAC;AAED,OAAO,MAAMI,uBAAuB,GAAGT,MAAM,CAACG,GAA6B;AAC3E;AACA;AACA;AACA;AACA,MAAMO,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,IACbV,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMW,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,IACZZ,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AAMD,OAAO,MAAMa,gCAAgC,GAAGd,MAAM,CAACG,GAA8C;AACrG,aAAaY,KAAA;EAAA,IAAC;IAAEV;EAAiD,CAAC,GAAAU,KAAA;EAAA,OAAKV,KAAK,CAACW,IAAI;AAAA;AACjF;AACA,CAAC;AAQD,OAAO,MAAMC,0BAA0B,GAAGjB,MAAM,CAACG,GAAoC;AACrF;AACA;AACA;AACA;AACA,kBAAkBe,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAK,GAAG,GAAGC,WAAW;AAAA;AACxD,kBAAkBC,KAAA;EAAA,IAAC;IAAEC,OAAO;IAAEF;EAAY,CAAC,GAAAC,KAAA;EAAA,OAAMC,OAAO,GAAGF,WAAW,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAM;AAAA,CAAC;AAClG;AACA;AACA,MAAMG,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAElB;EAAuC,CAAC,GAAAiB,KAAA;EAAA,OACnDC,QAAQ,KAAK,SAAS,GAChBtB,GAAG;AACjB,0CAA0CI,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDJ,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CI,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}

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

@@ -545,6 +545,7 @@ export declare const StyledListItemHeadTitleContent: import("styled-components/d
 export declare const StyledListItemHeadTitleElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 type StyledListItemHeadTitleTextProps = WithTheme<{
     $isOpen: boolean;
+    $width: number;
 }>;
 export declare const StyledListItemHeadTitleText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;