@chayns-components/core 5.0.0-beta.104 → 5.0.0-beta.1040

package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemImage.js","names":["MediaType","openMedia","React","useCallback","useState","StyledCareOfImage","StyledListImageWrapper","StyledListImageWrapperImage","StyledListItemHeadImage","StyledListItemHeadImageWrapper","ListItemImage","_ref","careOfLocationId","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","handleImageLoaded","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","createElement","onClick","src","$shouldHideBackground","$background","$isSmall","$isSecondImage","alt","$isHidden","onLoad","$shouldShowRoundImage","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, { CSSProperties, MouseEventHandler, useCallback, useState } from 'react';\nimport {\n    StyledCareOfImage,\n    StyledListImageWrapper,\n    StyledListImageWrapperImage,\n    StyledListItemHeadImage,\n    StyledListItemHeadImageWrapper,\n} from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n    careOfLocationId?: number;\n    imageBackground?: CSSProperties['background'];\n    images: string[];\n    shouldHideBackground: boolean;\n    shouldShowRoundImage: boolean;\n    shouldOpenImageOnClick: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n    careOfLocationId,\n    imageBackground,\n    images,\n    shouldHideBackground,\n    shouldShowRoundImage,\n    shouldOpenImageOnClick,\n}) => {\n    const [hasLoadedImage, setHasLoadedImage] = useState(false);\n    const handleImageLoaded = useCallback(() => {\n        setHasLoadedImage(true);\n    }, []);\n\n    const handleImageClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!shouldOpenImageOnClick) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n\n            const items: OpenMediaItem[] = images.map((image) => ({\n                url: image,\n                mediaType: MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex: 0 });\n        },\n        [images, shouldOpenImageOnClick],\n    );\n\n    if (images && images[0] && images[1]) {\n        return (\n            <StyledListImageWrapper onClick={handleImageClick}>\n                <StyledListImageWrapperImage\n                    src={images[0]}\n                    $shouldHideBackground={shouldHideBackground}\n                    $background={imageBackground}\n                    $isSmall={!!careOfLocationId}\n                />\n                <StyledListImageWrapperImage\n                    src={images[1]}\n                    $isSecondImage\n                    $shouldHideBackground={shouldHideBackground}\n                    $background={imageBackground}\n                    $isSmall={!!careOfLocationId}\n                />\n                {careOfLocationId && (\n                    <StyledCareOfImage\n                        $shouldHideBackground={shouldHideBackground}\n                        $background={imageBackground}\n                        src={`https://sub60.tobit.com/l/${careOfLocationId}?size=128`}\n                        alt=\"care-of\"\n                    />\n                )}\n            </StyledListImageWrapper>\n        );\n    }\n\n    if (images && images[0]) {\n        return (\n            <StyledListItemHeadImageWrapper onClick={handleImageClick}>\n                <StyledListItemHeadImage\n                    $isHidden={!hasLoadedImage}\n                    onLoad={handleImageLoaded}\n                    $shouldShowRoundImage={shouldShowRoundImage}\n                    $background={imageBackground}\n                    $shouldHideBackground={shouldHideBackground}\n                    $isSmall={!!careOfLocationId}\n                    src={images[0]}\n                />\n                {careOfLocationId && (\n                    <StyledCareOfImage\n                        $shouldHideBackground={shouldHideBackground}\n                        $background={imageBackground}\n                        src={`https://sub60.tobit.com/l/${careOfLocationId}?size=128`}\n                        alt=\"care-of\"\n                    />\n                )}\n            </StyledListItemHeadImageWrapper>\n        );\n    }\n\n    return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js

@@ -0,0 +1,125 @@
+import styled, { css } from 'styled-components';
+export const StyledListItemHeadImageWrapper = styled.div`
+    flex: 0 0 auto;
+    height: 40px;
+    overflow: hidden;
+    position: relative;
+    width: 40px;
+`;
+export const StyledListItemHeadImage = styled.img`
+    height: ${_ref => {
+  let {
+    $isSmall
+  } = _ref;
+  return $isSmall ? '34px' : '40px';
+}};
+    object-fit: cover;
+    opacity: ${_ref2 => {
+  let {
+    $isHidden
+  } = _ref2;
+  return $isHidden ? 0 : 1;
+}};
+    aspect-ratio: 1;
+
+    border-radius: ${_ref3 => {
+  let {
+    $shouldShowRoundImage
+  } = _ref3;
+  return $shouldShowRoundImage ? '50%' : undefined;
+}};
+
+    transition:
+        opacity 0.4s ease,
+        background-color 0.3s ease,
+        border-radius 0.3s ease,
+        box-shadow 0.3s ease;
+
+    ${_ref4 => {
+  let {
+    $shouldHideBackground,
+    $background,
+    theme
+  } = _ref4;
+  return !$shouldHideBackground && css`
+            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
+            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;
+        `;
+}}
+`;
+export const StyledListImageWrapper = styled.div`
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+`;
+export const StyledListImageWrapperImage = styled.img`
+    border-radius: 100px;
+    height: ${_ref5 => {
+  let {
+    $isSmall
+  } = _ref5;
+  return $isSmall ? '65%' : '80%';
+}};
+    aspect-ratio: 1;
+    position: absolute;
+
+    ${_ref6 => {
+  let {
+    $isSecondImage,
+    $isSmall
+  } = _ref6;
+  return $isSecondImage ? css`
+                  bottom: ${$isSmall ? '6px' : 0};
+                  right: ${$isSmall ? '6px' : 0};
+              ` : css`
+                  top: 0;
+                  left: 0;
+              `;
+}}
+
+    transition:
+    opacity 0.4s ease,
+    background-color 0.3s ease,
+    border-radius 0.3s ease,
+    box-shadow 0.3s ease;
+
+    ${_ref7 => {
+  let {
+    $shouldHideBackground,
+    $background,
+    theme
+  } = _ref7;
+  return !$shouldHideBackground && css`
+            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
+            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;
+        `;
+}}
+`;
+export const StyledCareOfImage = styled.img`
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    aspect-ratio: 1;
+    height: 20px;
+
+    transition:
+        opacity 0.4s ease,
+        background-color 0.3s ease,
+        border-radius 0.3s ease,
+        box-shadow 0.3s ease;
+
+    ${_ref8 => {
+  let {
+    $shouldHideBackground,
+    $background,
+    theme
+  } = _ref8;
+  return !$shouldHideBackground && css`
+            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
+            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;
+        `;
+}}
+`;
+//# sourceMappingURL=ListItemImage.styles.js.map

package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemImage.styles.js","names":["styled","css","StyledListItemHeadImageWrapper","div","StyledListItemHeadImage","img","_ref","$isSmall","_ref2","$isHidden","_ref3","$shouldShowRoundImage","undefined","_ref4","$shouldHideBackground","$background","theme","StyledListImageWrapper","StyledListImageWrapperImage","_ref5","_ref6","$isSecondImage","_ref7","StyledCareOfImage","_ref8"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledListItemHeadImageWrapper = styled.div`\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    position: relative;\n    width: 40px;\n`;\n\ntype StyledListItemHeadImageProps = WithTheme<{\n    $isHidden: boolean;\n    $shouldShowRoundImage?: boolean;\n    $background?: CSSProperties['background'];\n    $shouldHideBackground?: boolean;\n    $isSmall: boolean;\n}>;\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n    height: ${({ $isSmall }) => ($isSmall ? '34px' : '40px')};\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    aspect-ratio: 1;\n\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n\n    transition:\n        opacity 0.4s ease,\n        background-color 0.3s ease,\n        border-radius 0.3s ease,\n        box-shadow 0.3s ease;\n\n    ${({ $shouldHideBackground, $background, theme }: StyledListItemHeadImageProps) =>\n        !$shouldHideBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\nexport const StyledListImageWrapper = styled.div`\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 40px;\n    height: 40px;\n`;\n\nexport type StyledListImageWrapperImageProps = WithTheme<{\n    $isSecondImage?: boolean;\n    $isSmall: boolean;\n    $shouldHideBackground?: boolean;\n    $background?: CSSProperties['background'];\n}>;\n\nexport const StyledListImageWrapperImage = styled.img<StyledListImageWrapperImageProps>`\n    border-radius: 100px;\n    height: ${({ $isSmall }) => ($isSmall ? '65%' : '80%')};\n    aspect-ratio: 1;\n    position: absolute;\n\n    ${({ $isSecondImage, $isSmall }) =>\n        $isSecondImage\n            ? css`\n                  bottom: ${$isSmall ? '6px' : 0};\n                  right: ${$isSmall ? '6px' : 0};\n              `\n            : css`\n                  top: 0;\n                  left: 0;\n              `}\n\n    transition:\n    opacity 0.4s ease,\n    background-color 0.3s ease,\n    border-radius 0.3s ease,\n    box-shadow 0.3s ease;\n\n    ${({ $shouldHideBackground, $background, theme }: StyledListImageWrapperImageProps) =>\n        !$shouldHideBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\ntype StyledCareOfImageProps = WithTheme<{\n    $shouldHideBackground?: boolean;\n    $background?: CSSProperties['background'];\n}>;\n\nexport const StyledCareOfImage = styled.img<StyledCareOfImageProps>`\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    aspect-ratio: 1;\n    height: 20px;\n\n    transition:\n        opacity 0.4s ease,\n        background-color 0.3s ease,\n        border-radius 0.3s ease,\n        box-shadow 0.3s ease;\n\n    ${({ $shouldHideBackground, $background, theme }: StyledCareOfImageProps) =>\n        !$shouldHideBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,8BAA8B,GAAGF,MAAM,CAACG,GAAG;AACxD;AACA;AACA;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,uBAAuB,GAAGJ,MAAM,CAACK,GAAiC;AAC/E,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,IAAA;EAAA,OAAMC,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAC5D;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC;AACrD;AACA;AACA,qBAAqBC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OAAMC,qBAAqB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAC;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,qBAAqB;IAAEC,WAAW;IAAEC;EAAoC,CAAC,GAAAH,KAAA;EAAA,OAC1E,CAACC,qBAAqB,IACtBb,GAAG;AACX,0BAA0Bc,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAMC,sBAAsB,GAAGjB,MAAM,CAACG,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMe,2BAA2B,GAAGlB,MAAM,CAACK,GAAqC;AACvF;AACA,cAAcc,KAAA;EAAA,IAAC;IAAEZ;EAAS,CAAC,GAAAY,KAAA;EAAA,OAAMZ,QAAQ,GAAG,KAAK,GAAG,KAAK;AAAA,CAAC;AAC1D;AACA;AACA;AACA,MAAMa,KAAA;EAAA,IAAC;IAAEC,cAAc;IAAEd;EAAS,CAAC,GAAAa,KAAA;EAAA,OAC3BC,cAAc,GACRpB,GAAG;AACjB,4BAA4BM,QAAQ,GAAG,KAAK,GAAG,CAAC;AAChD,2BAA2BA,QAAQ,GAAG,KAAK,GAAG,CAAC;AAC/C,eAAe,GACDN,GAAG;AACjB;AACA;AACA,eAAe;AAAA;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMqB,KAAA;EAAA,IAAC;IAAER,qBAAqB;IAAEC,WAAW;IAAEC;EAAwC,CAAC,GAAAM,KAAA;EAAA,OAC9E,CAACR,qBAAqB,IACtBb,GAAG;AACX,0BAA0Bc,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AAAA;AACT,CAAC;AAOD,OAAO,MAAMO,iBAAiB,GAAGvB,MAAM,CAACK,GAA2B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMmB,KAAA;EAAA,IAAC;IAAEV,qBAAqB;IAAEC,WAAW;IAAEC;EAA8B,CAAC,GAAAQ,KAAA;EAAA,OACpE,CAACV,qBAAqB,IACtBb,GAAG;AACX,0BAA0Bc,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AAAA;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.js

@@ -0,0 +1,51 @@
+import React, { isValidElement, useMemo } from 'react';
+import { StyledListItemRightElements, StyledListItemRightElementsLeft, StyledListItemRightElementsLeftBottom, StyledListItemRightElementsLeftPseudo, StyledListItemRightElementsLeftTop, StyledListItemRightElementsRight } from './ListItemRightElements.styles';
+const ListItemRightElements = _ref => {
+  let {
+    rightElements
+  } = _ref;
+  const topElement = useMemo(() => {
+    if (typeof rightElements === 'object' && rightElements && 'top' in rightElements) {
+      return rightElements.top;
+    }
+    return undefined;
+  }, [rightElements]);
+  const bottomElement = useMemo(() => {
+    if (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements) {
+      return rightElements.bottom;
+    }
+    return undefined;
+  }, [rightElements]);
+  const centerElement = useMemo(() => {
+    if (typeof rightElements === 'string' || /*#__PURE__*/isValidElement(rightElements)) {
+      return rightElements;
+    }
+    if (typeof rightElements === 'object' && rightElements && 'center' in rightElements) {
+      return rightElements.center;
+    }
+    return undefined;
+  }, [rightElements]);
+  const {
+    topAlignment,
+    bottomAlignment
+  } = useMemo(() => {
+    if (typeof rightElements === 'object' && (rightElements && 'topAlignment' in rightElements || rightElements && 'bottomAlignment' in rightElements)) {
+      return {
+        topAlignment: rightElements.topAlignment,
+        bottomAlignment: rightElements.bottomAlignment
+      };
+    }
+    return {
+      topAlignment: undefined,
+      bottomAlignment: undefined
+    };
+  }, [rightElements]);
+  return /*#__PURE__*/React.createElement(StyledListItemRightElements, null, (topElement || bottomElement) && /*#__PURE__*/React.createElement(StyledListItemRightElementsLeft, null, topElement ? /*#__PURE__*/React.createElement(StyledListItemRightElementsLeftTop, {
+    $alignment: topAlignment
+  }, topElement) : /*#__PURE__*/React.createElement(StyledListItemRightElementsLeftPseudo, null, "."), bottomElement && /*#__PURE__*/React.createElement(StyledListItemRightElementsLeftBottom, {
+    $alignment: bottomAlignment
+  }, bottomElement)), centerElement && /*#__PURE__*/React.createElement(StyledListItemRightElementsRight, null, centerElement));
+};
+ListItemRightElements.displayName = 'ListItemRightElements';
+export default ListItemRightElements;
+//# sourceMappingURL=ListItemRightElements.js.map

package/lib/esm/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemRightElements.js","names":["React","isValidElement","useMemo","StyledListItemRightElements","StyledListItemRightElementsLeft","StyledListItemRightElementsLeftBottom","StyledListItemRightElementsLeftPseudo","StyledListItemRightElementsLeftTop","StyledListItemRightElementsRight","ListItemRightElements","_ref","rightElements","topElement","top","undefined","bottomElement","bottom","centerElement","center","topAlignment","bottomAlignment","createElement","$alignment","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.tsx"],"sourcesContent":["import React, { FC, isValidElement, useMemo } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport {\n    StyledListItemRightElements,\n    StyledListItemRightElementsLeft,\n    StyledListItemRightElementsLeftBottom,\n    StyledListItemRightElementsLeftPseudo,\n    StyledListItemRightElementsLeftTop,\n    StyledListItemRightElementsRight,\n} from './ListItemRightElements.styles';\n\ntype ListItemRightElementsProps = {\n    rightElements?: IListItemRightElements;\n};\n\nconst ListItemRightElements: FC<ListItemRightElementsProps> = ({ rightElements }) => {\n    const topElement = useMemo(() => {\n        if (typeof rightElements === 'object' && rightElements && 'top' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).top;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const bottomElement = useMemo(() => {\n        if (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).bottom;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const centerElement = useMemo(() => {\n        if (typeof rightElements === 'string' || isValidElement(rightElements)) {\n            return rightElements;\n        }\n\n        if (typeof rightElements === 'object' && rightElements && 'center' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).center;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const { topAlignment, bottomAlignment } = useMemo(() => {\n        if (\n            typeof rightElements === 'object' &&\n            ((rightElements && 'topAlignment' in rightElements) ||\n                (rightElements && 'bottomAlignment' in rightElements))\n        ) {\n            return {\n                topAlignment: rightElements.topAlignment,\n                bottomAlignment: rightElements.bottomAlignment,\n            };\n        }\n\n        return { topAlignment: undefined, bottomAlignment: undefined };\n    }, [rightElements]);\n\n    return (\n        <StyledListItemRightElements>\n            {(topElement || bottomElement) && (\n                <StyledListItemRightElementsLeft>\n                    {topElement ? (\n                        <StyledListItemRightElementsLeftTop $alignment={topAlignment}>\n                            {topElement}\n                        </StyledListItemRightElementsLeftTop>\n                    ) : (\n                        <StyledListItemRightElementsLeftPseudo>\n                            .\n                        </StyledListItemRightElementsLeftPseudo>\n                    )}\n                    {bottomElement && (\n                        <StyledListItemRightElementsLeftBottom $alignment={bottomAlignment}>\n                            {bottomElement}\n                        </StyledListItemRightElementsLeftBottom>\n                    )}\n                </StyledListItemRightElementsLeft>\n            )}\n            {centerElement && (\n                <StyledListItemRightElementsRight>{centerElement}</StyledListItemRightElementsRight>\n            )}\n        </StyledListItemRightElements>\n    );\n};\n\nListItemRightElements.displayName = 'ListItemRightElements';\n\nexport default ListItemRightElements;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAEC,OAAO,QAAQ,OAAO;AAE1D,SACIC,2BAA2B,EAC3BC,+BAA+B,EAC/BC,qCAAqC,EACrCC,qCAAqC,EACrCC,kCAAkC,EAClCC,gCAAgC,QAC7B,gCAAgC;AAMvC,MAAMC,qBAAqD,GAAGC,IAAA,IAAuB;EAAA,IAAtB;IAAEC;EAAc,CAAC,GAAAD,IAAA;EAC5E,MAAME,UAAU,GAAGV,OAAO,CAAC,MAAM;IAC7B,IAAI,OAAOS,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,KAAK,IAAIA,aAAa,EAAE;MAC9E,OAAQA,aAAa,CAAsCE,GAAG;IAClE;IAEA,OAAOC,SAAS;EACpB,CAAC,EAAE,CAACH,aAAa,CAAC,CAAC;EAEnB,MAAMI,aAAa,GAAGb,OAAO,CAAC,MAAM;IAChC,IAAI,OAAOS,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,QAAQ,IAAIA,aAAa,EAAE;MACjF,OAAQA,aAAa,CAAsCK,MAAM;IACrE;IAEA,OAAOF,SAAS;EACpB,CAAC,EAAE,CAACH,aAAa,CAAC,CAAC;EAEnB,MAAMM,aAAa,GAAGf,OAAO,CAAC,MAAM;IAChC,IAAI,OAAOS,aAAa,KAAK,QAAQ,iBAAIV,cAAc,CAACU,aAAa,CAAC,EAAE;MACpE,OAAOA,aAAa;IACxB;IAEA,IAAI,OAAOA,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,QAAQ,IAAIA,aAAa,EAAE;MACjF,OAAQA,aAAa,CAAsCO,MAAM;IACrE;IAEA,OAAOJ,SAAS;EACpB,CAAC,EAAE,CAACH,aAAa,CAAC,CAAC;EAEnB,MAAM;IAAEQ,YAAY;IAAEC;EAAgB,CAAC,GAAGlB,OAAO,CAAC,MAAM;IACpD,IACI,OAAOS,aAAa,KAAK,QAAQ,KAC/BA,aAAa,IAAI,cAAc,IAAIA,aAAa,IAC7CA,aAAa,IAAI,iBAAiB,IAAIA,aAAc,CAAC,EAC5D;MACE,OAAO;QACHQ,YAAY,EAAER,aAAa,CAACQ,YAAY;QACxCC,eAAe,EAAET,aAAa,CAACS;MACnC,CAAC;IACL;IAEA,OAAO;MAAED,YAAY,EAAEL,SAAS;MAAEM,eAAe,EAAEN;IAAU,CAAC;EAClE,CAAC,EAAE,CAACH,aAAa,CAAC,CAAC;EAEnB,oBACIX,KAAA,CAAAqB,aAAA,CAAClB,2BAA2B,QACvB,CAACS,UAAU,IAAIG,aAAa,kBACzBf,KAAA,CAAAqB,aAAA,CAACjB,+BAA+B,QAC3BQ,UAAU,gBACPZ,KAAA,CAAAqB,aAAA,CAACd,kCAAkC;IAACe,UAAU,EAAEH;EAAa,GACxDP,UAC+B,CAAC,gBAErCZ,KAAA,CAAAqB,aAAA,CAACf,qCAAqC,QAAC,GAEA,CAC1C,EACAS,aAAa,iBACVf,KAAA,CAAAqB,aAAA,CAAChB,qCAAqC;IAACiB,UAAU,EAAEF;EAAgB,GAC9DL,aACkC,CAEd,CACpC,EACAE,aAAa,iBACVjB,KAAA,CAAAqB,aAAA,CAACb,gCAAgC,QAAES,aAAgD,CAE9D,CAAC;AAEtC,CAAC;AAEDR,qBAAqB,CAACc,WAAW,GAAG,uBAAuB;AAE3D,eAAed,qBAAqB","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.styles.js

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+export const StyledListItemRightElements = styled.div`
+    display: flex;
+    align-items: start;
+    gap: 6px;
+    margin-left: 8px;
+`;
+export const StyledListItemRightElementsLeft = styled.div`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+`;
+export const StyledListItemRightElementsLeftPseudo = styled.div`
+    display: flex;
+    flex: 0 0 auto;
+    font-size: 85%;
+    color: transparent;
+    height: 50%;
+    line-height: normal;
+    user-select: none;
+`;
+export const StyledListItemRightElementsLeftTop = styled.div`
+    display: flex;
+    flex: 0 0 auto;
+    font-size: 85%;
+    height: 50%;
+    justify-content: ${_ref => {
+  let {
+    $alignment
+  } = _ref;
+  return $alignment ?? 'end';
+}};
+    align-items: center;
+    line-height: normal;
+`;
+export const StyledListItemRightElementsLeftBottom = styled.div`
+    display: flex;
+    flex: 0 0 auto;
+    font-size: 85%;
+    height: 50%;
+    justify-content: ${_ref2 => {
+  let {
+    $alignment
+  } = _ref2;
+  return $alignment ?? 'end';
+}};
+    align-items: center;
+    line-height: normal;
+`;
+export const StyledListItemRightElementsRight = styled.div`
+    margin: auto 0;
+    display: flex;
+    flex: 0 0 auto;
+    line-height: normal;
+`;
+//# sourceMappingURL=ListItemRightElements.styles.js.map

package/lib/esm/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemRightElements.styles.js","names":["styled","StyledListItemRightElements","div","StyledListItemRightElementsLeft","StyledListItemRightElementsLeftPseudo","StyledListItemRightElementsLeftTop","_ref","$alignment","StyledListItemRightElementsLeftBottom","_ref2","StyledListItemRightElementsRight"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-right-elements/ListItemRightElements.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledListItemRightElements = styled.div`\n    display: flex;\n    align-items: start;\n    gap: 6px;\n    margin-left: 8px;\n`;\n\nexport const StyledListItemRightElementsLeft = styled.div`\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n`;\n\nexport const StyledListItemRightElementsLeftPseudo = styled.div`\n    display: flex;\n    flex: 0 0 auto;\n    font-size: 85%;\n    color: transparent;\n    height: 50%;\n    line-height: normal;\n    user-select: none;\n`;\n\ntype StyledListItemRightElementsLeftTopProps = {\n    $alignment?: CSSProperties['justifyContent'];\n};\n\nexport const StyledListItemRightElementsLeftTop = styled.div<StyledListItemRightElementsLeftTopProps>`\n    display: flex;\n    flex: 0 0 auto;\n    font-size: 85%;\n    height: 50%;\n    justify-content: ${({ $alignment }) => $alignment ?? 'end'};\n    align-items: center;\n    line-height: normal;\n`;\n\ntype StyledListItemRightElementsLeftBottomProps = {\n    $alignment?: CSSProperties['justifyContent'];\n};\n\nexport const StyledListItemRightElementsLeftBottom = styled.div<StyledListItemRightElementsLeftBottomProps>`\n    display: flex;\n    flex: 0 0 auto;\n    font-size: 85%;\n    height: 50%;\n    justify-content: ${({ $alignment }) => $alignment ?? 'end'};\n    align-items: center;\n    line-height: normal;\n`;\n\nexport const StyledListItemRightElementsRight = styled.div`\n    margin: auto 0;\n    display: flex;\n    flex: 0 0 auto;\n    line-height: normal;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,2BAA2B,GAAGD,MAAM,CAACE,GAAG;AACrD;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGH,MAAM,CAACE,GAAG;AACzD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,qCAAqC,GAAGJ,MAAM,CAACE,GAAG;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMG,kCAAkC,GAAGL,MAAM,CAACE,GAA4C;AACrG;AACA;AACA;AACA;AACA,uBAAuBI,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OAAKC,UAAU,IAAI,KAAK;AAAA;AAC9D;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,qCAAqC,GAAGR,MAAM,CAACE,GAA+C;AAC3G;AACA;AACA;AACA;AACA,uBAAuBO,KAAA;EAAA,IAAC;IAAEF;EAAW,CAAC,GAAAE,KAAA;EAAA,OAAKF,UAAU,IAAI,KAAK;AAAA;AAC9D;AACA;AACA,CAAC;AAED,OAAO,MAAMG,gCAAgC,GAAGV,MAAM,CAACE,GAAG;AAC1D;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/mention-finder/MentionFinder.js

@@ -0,0 +1,124 @@
+import { AnimatePresence } from 'motion/react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import MentionFinderItem from './mention-finder-item/MentionFinderItem';
+import { StyledMentionFinder, StyledMotionMentionFinderPopup } from './MentionFinder.styles';
+const MentionFinder = _ref => {
+  let {
+    inputValue,
+    members,
+    onSelect,
+    popupAlignment
+  } = _ref;
+  const [activeMember, setActiveMember] = useState(members[0]);
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const ref = useRef(null);
+  const [fullMatch, searchString] = useMemo(() => {
+    // eslint-disable-next-line no-irregular-whitespace
+    const regExpMatchArray = inputValue.match(/@([^\s​]*)/);
+    return [regExpMatchArray?.[0], regExpMatchArray?.[1]?.toLowerCase() ?? ''];
+  }, [inputValue]);
+  const filteredMembers = useMemo(() => searchString !== '' ? members.filter(_ref2 => {
+    let {
+      id,
+      info,
+      name
+    } = _ref2;
+    return id.toLowerCase().includes(searchString) || info?.replace('chayns', '').toLowerCase().includes(searchString) || name.toLowerCase().includes(searchString);
+  }) : members, [members, searchString]);
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      event.preventDefault();
+      const children = ref.current?.children;
+      if (children && children.length > 0) {
+        const newIndex = focusedIndex !== null ? (focusedIndex + (event.key === 'ArrowUp' ? -1 : 1) + children.length) % children.length : 0;
+        if (focusedIndex !== null) {
+          const prevElement = children[focusedIndex];
+          prevElement.tabIndex = -1;
+        }
+        setFocusedIndex(newIndex);
+        const member = filteredMembers[newIndex];
+        setActiveMember(member);
+        const newElement = children[newIndex];
+        newElement.tabIndex = 0;
+        newElement.focus();
+      }
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      event.stopPropagation();
+      if (fullMatch && activeMember) {
+        onSelect({
+          fullMatch,
+          member: activeMember
+        });
+      }
+    }
+  }, [activeMember, filteredMembers, focusedIndex, fullMatch, onSelect]);
+  const handleMemberClick = useCallback(member => {
+    if (fullMatch) {
+      onSelect({
+        fullMatch,
+        member
+      });
+    }
+  }, [fullMatch, onSelect]);
+  const handleMemberHover = useCallback(member => {
+    setActiveMember(member);
+  }, []);
+  useEffect(() => {
+    if (filteredMembers.length > 0) {
+      const isActiveMemberShown = filteredMembers.some(_ref3 => {
+        let {
+          id
+        } = _ref3;
+        return id === activeMember?.id;
+      });
+      if (!isActiveMemberShown) {
+        setActiveMember(filteredMembers[0]);
+      }
+    }
+  }, [activeMember?.id, filteredMembers]);
+  const items = useMemo(() => filteredMembers.map(member => /*#__PURE__*/React.createElement(MentionFinderItem, {
+    isActive: member.id === activeMember?.id,
+    key: member.id,
+    member: member,
+    onClick: handleMemberClick,
+    onHover: handleMemberHover
+  })), [activeMember, filteredMembers, handleMemberClick, handleMemberHover]);
+  const shouldShowPopup = useMemo(() => fullMatch && items.length > 0, [fullMatch, items.length]);
+  useEffect(() => {
+    if (shouldShowPopup) {
+      window.addEventListener('keydown', handleKeyDown, true);
+    }
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown, true);
+    };
+  }, [handleKeyDown, shouldShowPopup]);
+  return /*#__PURE__*/React.createElement(StyledMentionFinder, {
+    className: "beta-chayns-mention-finder"
+  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, shouldShowPopup && /*#__PURE__*/React.createElement(StyledMotionMentionFinderPopup, {
+    ref: ref,
+    animate: {
+      height: 'auto',
+      opacity: 1
+    },
+    className: "prevent-lose-focus",
+    exit: {
+      height: 0,
+      opacity: 0
+    },
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    $popupAlignment: popupAlignment,
+    transition: {
+      duration: 0.15
+    },
+    tabIndex: 0
+  }, items)));
+};
+MentionFinder.displayName = 'MentionFinder';
+export default MentionFinder;
+//# sourceMappingURL=MentionFinder.js.map

package/lib/esm/components/mention-finder/MentionFinder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinder.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","MentionFinderItem","StyledMentionFinder","StyledMotionMentionFinderPopup","MentionFinder","_ref","inputValue","members","onSelect","popupAlignment","activeMember","setActiveMember","focusedIndex","setFocusedIndex","ref","fullMatch","searchString","regExpMatchArray","match","toLowerCase","filteredMembers","filter","_ref2","id","info","name","includes","replace","handleKeyDown","event","key","preventDefault","children","current","length","newIndex","prevElement","tabIndex","member","newElement","focus","stopPropagation","handleMemberClick","handleMemberHover","isActiveMemberShown","some","_ref3","items","map","createElement","isActive","onClick","onHover","shouldShowPopup","window","addEventListener","removeEventListener","className","initial","animate","height","opacity","exit","$popupAlignment","transition","duration","displayName"],"sources":["../../../../src/components/mention-finder/MentionFinder.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport MentionFinderItem from './mention-finder-item/MentionFinderItem';\nimport { StyledMentionFinder, StyledMotionMentionFinderPopup } from './MentionFinder.styles';\n\nexport type MentionMember = {\n    id: string;\n    info?: string;\n    imageUrl: string;\n    name: string;\n    shouldShowRoundImage?: boolean;\n};\n\nexport type MentionFinderProps = {\n    /**\n     * The text from the input field\n     */\n    inputValue: string;\n    /**\n     * Members that can be selected\n     */\n    members: MentionMember[];\n    /**\n     * Function to be executed when a member is selected\n     */\n    onSelect: ({ fullMatch, member }: { fullMatch: string; member: MentionMember }) => void;\n    /**\n     * Alignment of the popup\n     */\n    popupAlignment: MentionFinderPopupAlignment;\n};\n\nconst MentionFinder: FC<MentionFinderProps> = ({\n    inputValue,\n    members,\n    onSelect,\n    popupAlignment,\n}) => {\n    const [activeMember, setActiveMember] = useState(members[0]);\n    const [focusedIndex, setFocusedIndex] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const [fullMatch, searchString] = useMemo(() => {\n        // eslint-disable-next-line no-irregular-whitespace\n        const regExpMatchArray = inputValue.match(/@([^\\s​]*)/);\n\n        return [regExpMatchArray?.[0], regExpMatchArray?.[1]?.toLowerCase() ?? ''];\n    }, [inputValue]);\n\n    const filteredMembers = useMemo(\n        () =>\n            searchString !== ''\n                ? members.filter(\n                      ({ id, info, name }) =>\n                          id.toLowerCase().includes(searchString) ||\n                          info?.replace('chayns', '').toLowerCase().includes(searchString) ||\n                          name.toLowerCase().includes(searchString),\n                  )\n                : members,\n        [members, searchString],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n                event.preventDefault();\n\n                const children = ref.current?.children;\n\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex +\n                                  (event.key === 'ArrowUp' ? -1 : 1) +\n                                  children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const member = filteredMembers[newIndex];\n\n                    setActiveMember(member);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (event.key === 'Enter') {\n                event.preventDefault();\n                event.stopPropagation();\n\n                if (fullMatch && activeMember) {\n                    onSelect({ fullMatch, member: activeMember });\n                }\n            }\n        },\n        [activeMember, filteredMembers, focusedIndex, fullMatch, onSelect],\n    );\n\n    const handleMemberClick = useCallback(\n        (member: MentionMember) => {\n            if (fullMatch) {\n                onSelect({ fullMatch, member });\n            }\n        },\n        [fullMatch, onSelect],\n    );\n\n    const handleMemberHover = useCallback((member: MentionMember) => {\n        setActiveMember(member);\n    }, []);\n\n    useEffect(() => {\n        if (filteredMembers.length > 0) {\n            const isActiveMemberShown = filteredMembers.some(({ id }) => id === activeMember?.id);\n\n            if (!isActiveMemberShown) {\n                setActiveMember(filteredMembers[0]);\n            }\n        }\n    }, [activeMember?.id, filteredMembers]);\n\n    const items = useMemo(\n        () =>\n            filteredMembers.map((member) => (\n                <MentionFinderItem\n                    isActive={member.id === activeMember?.id}\n                    key={member.id}\n                    member={member}\n                    onClick={handleMemberClick}\n                    onHover={handleMemberHover}\n                />\n            )),\n        [activeMember, filteredMembers, handleMemberClick, handleMemberHover],\n    );\n\n    const shouldShowPopup = useMemo(() => fullMatch && items.length > 0, [fullMatch, items.length]);\n\n    useEffect(() => {\n        if (shouldShowPopup) {\n            window.addEventListener('keydown', handleKeyDown, true);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleKeyDown, true);\n        };\n    }, [handleKeyDown, shouldShowPopup]);\n\n    return (\n        <StyledMentionFinder className=\"beta-chayns-mention-finder\">\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <StyledMotionMentionFinderPopup\n                        ref={ref}\n                        animate={{ height: 'auto', opacity: 1 }}\n                        className=\"prevent-lose-focus\"\n                        exit={{ height: 0, opacity: 0 }}\n                        initial={{ height: 0, opacity: 0 }}\n                        $popupAlignment={popupAlignment}\n                        transition={{ duration: 0.15 }}\n                        tabIndex={0}\n                    >\n                        {items}\n                    </StyledMotionMentionFinderPopup>\n                )}\n            </AnimatePresence>\n        </StyledMentionFinder>\n    );\n};\n\nMentionFinder.displayName = 'MentionFinder';\n\nexport default MentionFinder;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/mention-finder/MentionFinder.styles.js

@@ -0,0 +1,84 @@
+import { motion } from 'motion/react';
+import styled, { css } from 'styled-components';
+import { MentionFinderPopupAlignment } from '../../constants/mentionFinder';
+export const StyledMentionFinder = styled.div`
+    position: relative;
+`;
+export const StyledMotionMentionFinderPopup = styled(motion.div)`
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['000'];
+}};
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);
+    left: 0;
+    max-height: 275px;
+    overflow-y: scroll;
+    position: absolute;
+    width: 100%;
+
+    ${_ref2 => {
+  let {
+    $popupAlignment
+  } = _ref2;
+  switch ($popupAlignment) {
+    case MentionFinderPopupAlignment.Bottom:
+      return css`
+                    top: 0;
+                `;
+    case MentionFinderPopupAlignment.Top:
+      return css`
+                    bottom: 0;
+                `;
+    default:
+      return undefined;
+  }
+}}
+
+    // Styles for custom scrollbar
+    &::-webkit-scrollbar {
+        width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-button {
+        background-color: transparent;
+        height: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: rgba(
+            ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme['text-rgb'];
+}},
+            0.15
+        );
+        border-radius: 20px;
+    }
+
+    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are
+    // only supported in Firefox:
+    * {
+        scrollbar-color: rgba(
+                ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme['text-rgb'];
+}},
+                0.15
+            )
+            transparent;
+        scrollbar-width: thin;
+    }
+`;
+//# sourceMappingURL=MentionFinder.styles.js.map

package/lib/esm/components/mention-finder/MentionFinder.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinder.styles.js","names":["motion","styled","css","MentionFinderPopupAlignment","StyledMentionFinder","div","StyledMotionMentionFinderPopup","_ref","theme","_ref2","$popupAlignment","Bottom","Top","undefined","_ref3","_ref4"],"sources":["../../../../src/components/mention-finder/MentionFinder.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMentionFinder = styled.div`\n    position: relative;\n`;\n\ntype StyledMentionFinderPopupProps = WithTheme<{ $popupAlignment: MentionFinderPopupAlignment }>;\n\nexport const StyledMotionMentionFinderPopup = styled(motion.div)<StyledMentionFinderPopupProps>`\n    background-color: ${({ theme }: StyledMentionFinderPopupProps) => theme['000']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);\n    left: 0;\n    max-height: 275px;\n    overflow-y: scroll;\n    position: absolute;\n    width: 100%;\n\n    ${({ $popupAlignment }) => {\n        switch ($popupAlignment) {\n            case MentionFinderPopupAlignment.Bottom:\n                return css`\n                    top: 0;\n                `;\n            case MentionFinderPopupAlignment.Top:\n                return css`\n                    bottom: 0;\n                `;\n            default:\n                return undefined;\n        }\n    }}\n\n    // Styles for custom scrollbar\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(\n            ${({ theme }: StyledMentionFinderPopupProps) => theme['text-rgb']},\n            0.15\n        );\n        border-radius: 20px;\n    }\n\n    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n    // only supported in Firefox:\n    * {\n        scrollbar-color: rgba(\n                ${({ theme }: StyledMentionFinderPopupProps) => theme['text-rgb']},\n                0.15\n            )\n            transparent;\n        scrollbar-width: thin;\n    }\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,2BAA2B,QAAQ,+BAA+B;AAG3E,OAAO,MAAMC,mBAAmB,GAAGH,MAAM,CAACI,GAAG;AAC7C;AACA,CAAC;AAID,OAAO,MAAMC,8BAA8B,GAAGL,MAAM,CAACD,MAAM,CAACK,GAAG,CAAgC;AAC/F,wBAAwBE,IAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAAyB;EAAA,IAAxB;IAAEC;EAAgB,CAAC,GAAAD,KAAA;EAClB,QAAQC,eAAe;IACnB,KAAKP,2BAA2B,CAACQ,MAAM;MACnC,OAAOT,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAKC,2BAA2B,CAACS,GAAG;MAChC,OAAOV,GAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAOW,SAAS;EACxB;AACJ,CAAC;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,KAAA;EAAA,IAAC;IAAEN;EAAqC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAAC,UAAU,CAAC;AAAA;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBO,KAAA;EAAA,IAAC;IAAEP;EAAqC,CAAC,GAAAO,KAAA;EAAA,OAAKP,KAAK,CAAC,UAAU,CAAC;AAAA;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.js

@@ -0,0 +1,24 @@
+import React, { useCallback } from 'react';
+import { StyledMentionFinderItem, StyledMentionFinderItemContent, StyledMentionFinderItemContentInfo, StyledMentionFinderItemContentName, StyledMentionFinderItemImage } from './MentionFinderItem.styles';
+const MentionFinderItem = _ref => {
+  let {
+    isActive,
+    member,
+    onClick,
+    onHover
+  } = _ref;
+  const handleItemClick = useCallback(() => onClick(member), [member, onClick]);
+  const handleItemMouseEnter = useCallback(() => onHover(member), [member, onHover]);
+  return /*#__PURE__*/React.createElement(StyledMentionFinderItem, {
+    className: "prevent-lose-focus",
+    onClick: handleItemClick,
+    onMouseEnter: handleItemMouseEnter,
+    $isActive: isActive
+  }, /*#__PURE__*/React.createElement(StyledMentionFinderItemImage, {
+    src: member.imageUrl,
+    $shouldShowRoundImage: member.shouldShowRoundImage
+  }), /*#__PURE__*/React.createElement(StyledMentionFinderItemContent, null, /*#__PURE__*/React.createElement(StyledMentionFinderItemContentName, null, member.name), member.info && /*#__PURE__*/React.createElement(StyledMentionFinderItemContentInfo, null, member.info)));
+};
+MentionFinderItem.displayName = 'MentionFinderItem';
+export default MentionFinderItem;
+//# sourceMappingURL=MentionFinderItem.js.map

package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinderItem.js","names":["React","useCallback","StyledMentionFinderItem","StyledMentionFinderItemContent","StyledMentionFinderItemContentInfo","StyledMentionFinderItemContentName","StyledMentionFinderItemImage","MentionFinderItem","_ref","isActive","member","onClick","onHover","handleItemClick","handleItemMouseEnter","createElement","className","onMouseEnter","$isActive","src","imageUrl","$shouldShowRoundImage","shouldShowRoundImage","name","info","displayName"],"sources":["../../../../../src/components/mention-finder/mention-finder-item/MentionFinderItem.tsx"],"sourcesContent":["import React, { FC, useCallback } from 'react';\nimport type { MentionMember } from '../MentionFinder';\nimport {\n    StyledMentionFinderItem,\n    StyledMentionFinderItemContent,\n    StyledMentionFinderItemContentInfo,\n    StyledMentionFinderItemContentName,\n    StyledMentionFinderItemImage,\n} from './MentionFinderItem.styles';\n\nexport type MentionFinderItemProps = {\n    isActive: boolean;\n    member: MentionMember;\n    onClick: (member: MentionMember) => void;\n    onHover: (member: MentionMember) => void;\n};\n\nconst MentionFinderItem: FC<MentionFinderItemProps> = ({ isActive, member, onClick, onHover }) => {\n    const handleItemClick = useCallback(() => onClick(member), [member, onClick]);\n\n    const handleItemMouseEnter = useCallback(() => onHover(member), [member, onHover]);\n\n    return (\n        <StyledMentionFinderItem\n            className=\"prevent-lose-focus\"\n            onClick={handleItemClick}\n            onMouseEnter={handleItemMouseEnter}\n            $isActive={isActive}\n        >\n            <StyledMentionFinderItemImage\n                src={member.imageUrl}\n                $shouldShowRoundImage={member.shouldShowRoundImage}\n            />\n            <StyledMentionFinderItemContent>\n                <StyledMentionFinderItemContentName>\n                    {member.name}\n                </StyledMentionFinderItemContentName>\n                {member.info && (\n                    <StyledMentionFinderItemContentInfo>\n                        {member.info}\n                    </StyledMentionFinderItemContentInfo>\n                )}\n            </StyledMentionFinderItemContent>\n        </StyledMentionFinderItem>\n    );\n};\n\nMentionFinderItem.displayName = 'MentionFinderItem';\n\nexport default MentionFinderItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,QAAQ,OAAO;AAE9C,SACIC,uBAAuB,EACvBC,8BAA8B,EAC9BC,kCAAkC,EAClCC,kCAAkC,EAClCC,4BAA4B,QACzB,4BAA4B;AASnC,MAAMC,iBAA6C,GAAGC,IAAA,IAA4C;EAAA,IAA3C;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,OAAO;IAAEC;EAAQ,CAAC,GAAAJ,IAAA;EACzF,MAAMK,eAAe,GAAGZ,WAAW,CAAC,MAAMU,OAAO,CAACD,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEC,OAAO,CAAC,CAAC;EAE7E,MAAMG,oBAAoB,GAAGb,WAAW,CAAC,MAAMW,OAAO,CAACF,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEE,OAAO,CAAC,CAAC;EAElF,oBACIZ,KAAA,CAAAe,aAAA,CAACb,uBAAuB;IACpBc,SAAS,EAAC,oBAAoB;IAC9BL,OAAO,EAAEE,eAAgB;IACzBI,YAAY,EAAEH,oBAAqB;IACnCI,SAAS,EAAET;EAAS,gBAEpBT,KAAA,CAAAe,aAAA,CAACT,4BAA4B;IACzBa,GAAG,EAAET,MAAM,CAACU,QAAS;IACrBC,qBAAqB,EAAEX,MAAM,CAACY;EAAqB,CACtD,CAAC,eACFtB,KAAA,CAAAe,aAAA,CAACZ,8BAA8B,qBAC3BH,KAAA,CAAAe,aAAA,CAACV,kCAAkC,QAC9BK,MAAM,CAACa,IACwB,CAAC,EACpCb,MAAM,CAACc,IAAI,iBACRxB,KAAA,CAAAe,aAAA,CAACX,kCAAkC,QAC9BM,MAAM,CAACc,IACwB,CAEZ,CACX,CAAC;AAElC,CAAC;AAEDjB,iBAAiB,CAACkB,WAAW,GAAG,mBAAmB;AAEnD,eAAelB,iBAAiB","ignoreList":[]}

package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js

@@ -0,0 +1,78 @@
+import styled, { css } from 'styled-components';
+export const StyledMentionFinderItem = styled.div`
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    padding: 10px 8px;
+
+    &:not(:last-child) {
+        border-bottom: 1px solid
+            rgba(${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['text-rgb'];
+}}, 0.15);
+    }
+
+    ${_ref2 => {
+  let {
+    $isActive,
+    theme
+  } = _ref2;
+  return $isActive && css`
+            background-color: ${theme['102']} !important;
+        `;
+}}
+`;
+export const StyledMentionFinderItemImage = styled.img`
+    background-color: rgba(
+        ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme['text-rgb'];
+}},
+        0.1
+    );
+    border-radius: ${_ref4 => {
+  let {
+    $shouldShowRoundImage
+  } = _ref4;
+  return $shouldShowRoundImage ? '50%' : 'initial';
+}};
+    box-shadow: 0 0 0 1px
+        rgba(${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme['009-rgb'];
+}}, 0.08) inset;
+    flex: 0 0 auto;
+    height: 40px;
+    overflow: hidden;
+    transition: border-radius 0.3s ease;
+    width: 40px;
+`;
+export const StyledMentionFinderItemContent = styled.div`
+    color: ${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.text;
+}};
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    justify-content: center;
+    line-height: normal;
+    margin-left: 10px;
+    min-width: 0;
+`;
+export const StyledMentionFinderItemContentName = styled.div``;
+export const StyledMentionFinderItemContentInfo = styled.div`
+    font-size: 85%;
+    margin-top: 2px;
+    opacity: 0.75;
+`;
+//# sourceMappingURL=MentionFinderItem.styles.js.map