@chayns-components/core 5.0.0-beta.21 → 5.0.0-beta.211

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemImage.js","names":["_react","_interopRequireWildcard","require","_GridImage","_interopRequireDefault","_ListItemImage","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ListItemImage","_ref","images","shouldShowRoundImage","hasLoadedImage","setHasLoadedImage","useState","handleImageLoaded","useCallback","gridImages","createElement","size","StyledListItemHeadImageWrapper","StyledListItemHeadImage","isHidden","onLoad","src","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport GridImage from '../../../../grid-image/GridImage';\nimport { StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n    images: string[];\n    shouldShowRoundImage: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({ images, shouldShowRoundImage }) => {\n    const [hasLoadedImage, setHasLoadedImage] = useState(false);\n    const handleImageLoaded = useCallback(() => {\n        setHasLoadedImage(true);\n    }, []);\n\n    if (images && images[0] && images[1] && images[2]) {\n        const gridImages = [images[0], images[1], images[2]];\n\n        return (\n            <GridImage images={gridImages} shouldShowRoundImage={shouldShowRoundImage} size={40} />\n        );\n    }\n\n    if (images && images[0]) {\n        return (\n            <StyledListItemHeadImageWrapper shouldShowRoundImage={shouldShowRoundImage}>\n                <StyledListItemHeadImage\n                    isHidden={!hasLoadedImage}\n                    onLoad={handleImageLoaded}\n                    src={images[0]}\n                />\n            </StyledListItemHeadImageWrapper>\n        );\n    }\n\n    return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"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"}

package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const StyledListItemHeadImageWrapper: import("styled-components").StyledComponent<"div", any, {
+    shouldShowRoundImage?: boolean | undefined;
+} & {
+    theme: import("../../../../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+type StyledListItemHeadImageProps = {
+    isHidden: boolean;
+};
+export declare const StyledListItemHeadImage: import("styled-components").StyledComponent<"img", any, StyledListItemHeadImageProps, never>;
+export {};

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

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledListItemHeadImageWrapper = exports.StyledListItemHeadImage = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledListItemHeadImageWrapper = _styledComponents.default.div`
+    background-color: rgba(
+        ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['text-rgb'];
+}},
+        0.1
+    );
+    border-radius: ${_ref2 => {
+  let {
+    shouldShowRoundImage
+  } = _ref2;
+  return shouldShowRoundImage ? '50%' : undefined;
+}};
+    box-shadow: 0 0 0 1px
+        rgba(${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme['009-rgb'];
+}}, 0.08) inset;
+    flex: 0 0 auto;
+    height: 40px;
+    overflow: hidden;
+    transition: border-radius 0.3s ease;
+    width: 40px;
+`;
+exports.StyledListItemHeadImageWrapper = StyledListItemHeadImageWrapper;
+const StyledListItemHeadImage = _styledComponents.default.img`
+    height: 100%;
+    object-fit: cover;
+    opacity: ${_ref4 => {
+  let {
+    isHidden
+  } = _ref4;
+  return isHidden ? 0 : 1;
+}};
+    transition: opacity 0.4s ease;
+    width: 100%;
+`;
+exports.StyledListItemHeadImage = StyledListItemHeadImage;
+//# sourceMappingURL=ListItemImage.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemImage.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledListItemHeadImageWrapper","styled","div","_ref","theme","_ref2","shouldShowRoundImage","undefined","_ref3","exports","StyledListItemHeadImage","img","_ref4","isHidden"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadImageWrapperProps = WithTheme<{\n    shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledListItemHeadImageWrapper = styled.div<StyledListItemHeadImageWrapperProps>`\n    background-color: rgba(\n        ${({ theme }: StyledListItemHeadImageWrapperProps) => theme['text-rgb']},\n        0.1\n    );\n    border-radius: ${({ shouldShowRoundImage }) => (shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledListItemHeadImageWrapperProps) => theme['009-rgb']}, 0.08) inset;\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition: border-radius 0.3s ease;\n    width: 40px;\n`;\n\ntype StyledListItemHeadImageProps = {\n    isHidden: boolean;\n};\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n    height: 100%;\n    object-fit: cover;\n    opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n    transition: opacity 0.4s ease;\n    width: 100%;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAOhC,MAAMG,8BAA8B,GAAGC,yBAAM,CAACC,GAAyC;AAC9F;AACA,UAAUC,IAAA;EAAA,IAAC;IAAEC;EAA2C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAChF;AACA;AACA,qBAAqBC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OAAMC,oBAAoB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAE;AAC9F;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEJ;EAA2C,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACpF;AACA;AACA;AACA;AACA;AACA,CAAC;AAACK,OAAA,CAAAT,8BAAA,GAAAA,8BAAA;AAMK,MAAMU,uBAAuB,GAAGT,yBAAM,CAACU,GAAkC;AAChF;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OAAMC,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA,CAAC;AAACJ,OAAA,CAAAC,uBAAA,GAAAA,uBAAA"}

package/lib/components/mention-finder/MentionFinder.d.ts

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import type { MentionFinderPopupAlignment } from './constants/alignment';
+export type MentionMember = {
+    id: string;
+    info: string;
+    imageUrl: string;
+    name: string;
+};
+export type MentionFinderProps = {
+    /**
+     * The text from the input field
+     */
+    inputValue: string;
+    /**
+     * Members that can be selected
+     */
+    members: MentionMember[];
+    /**
+     * Function to be executed when a member is selected
+     */
+    onSelect: ({ fullMatch, member }: {
+        fullMatch: string;
+        member: MentionMember;
+    }) => void;
+    /**
+     * Alignment of the popup
+     */
+    popupAlignment: MentionFinderPopupAlignment;
+};
+declare const MentionFinder: FC<MentionFinderProps>;
+export default MentionFinder;

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

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _MentionFinderItem = _interopRequireDefault(require("./mention-finder-item/MentionFinderItem"));
+var _MentionFinder = require("./MentionFinder.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const MentionFinder = _ref => {
+  let {
+    inputValue,
+    members,
+    onSelect,
+    popupAlignment
+  } = _ref;
+  const [activeMember, setActiveMember] = (0, _react.useState)(members[0]);
+  const [fullMatch, searchString] = (0, _react.useMemo)(() => {
+    var _regExpMatchArray$1$t, _regExpMatchArray$;
+    // eslint-disable-next-line no-irregular-whitespace
+    const regExpMatchArray = inputValue.match(/@([^\s​]*)/);
+    return [regExpMatchArray === null || regExpMatchArray === void 0 ? void 0 : regExpMatchArray[0], (_regExpMatchArray$1$t = regExpMatchArray === null || regExpMatchArray === void 0 ? void 0 : (_regExpMatchArray$ = regExpMatchArray[1]) === null || _regExpMatchArray$ === void 0 ? void 0 : _regExpMatchArray$.toLowerCase()) !== null && _regExpMatchArray$1$t !== void 0 ? _regExpMatchArray$1$t : ''];
+  }, [inputValue]);
+  const filteredMembers = (0, _react.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 = (0, _react.useCallback)(event => {
+    let shouldPreventDefault = false;
+    if (event.key === 'ArrowUp') {
+      const currentIndex = filteredMembers.findIndex(_ref3 => {
+        let {
+          id
+        } = _ref3;
+        return id === (activeMember === null || activeMember === void 0 ? void 0 : activeMember.id);
+      });
+      const prevIndex = Math.max(currentIndex - 1, 0);
+      const member = filteredMembers[prevIndex];
+      setActiveMember(member);
+      shouldPreventDefault = true;
+    } else if (event.key === 'ArrowDown') {
+      const currentIndex = filteredMembers.findIndex(_ref4 => {
+        let {
+          id
+        } = _ref4;
+        return id === (activeMember === null || activeMember === void 0 ? void 0 : activeMember.id);
+      });
+      const nextIndex = Math.min(currentIndex + 1, filteredMembers.length - 1);
+      const member = filteredMembers[nextIndex];
+      setActiveMember(member);
+      shouldPreventDefault = true;
+    } else if (event.key === 'Enter') {
+      if (fullMatch && activeMember) {
+        onSelect({
+          fullMatch,
+          member: activeMember
+        });
+        shouldPreventDefault = true;
+      }
+    }
+    if (shouldPreventDefault) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, [activeMember, filteredMembers, fullMatch, onSelect]);
+  const handleMemberClick = (0, _react.useCallback)(member => {
+    if (fullMatch) {
+      onSelect({
+        fullMatch,
+        member
+      });
+    }
+  }, [fullMatch, onSelect]);
+  const handleMemberHover = (0, _react.useCallback)(member => {
+    setActiveMember(member);
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (filteredMembers.length > 0) {
+      const isActiveMemberShown = filteredMembers.some(_ref5 => {
+        let {
+          id
+        } = _ref5;
+        return id === (activeMember === null || activeMember === void 0 ? void 0 : activeMember.id);
+      });
+      if (!isActiveMemberShown) {
+        setActiveMember(filteredMembers[0]);
+      }
+    }
+  }, [activeMember === null || activeMember === void 0 ? void 0 : activeMember.id, filteredMembers]);
+  const items = (0, _react.useMemo)(() => filteredMembers.map(member => /*#__PURE__*/_react.default.createElement(_MentionFinderItem.default, {
+    isActive: member.id === (activeMember === null || activeMember === void 0 ? void 0 : activeMember.id),
+    key: member.id,
+    member: member,
+    onClick: handleMemberClick,
+    onHover: handleMemberHover
+  })), [activeMember, filteredMembers, handleMemberClick, handleMemberHover]);
+  const shouldShowPopup = (0, _react.useMemo)(() => fullMatch && items.length > 0, [fullMatch, items.length]);
+  (0, _react.useEffect)(() => {
+    if (shouldShowPopup) {
+      window.addEventListener('keydown', handleKeyDown, true);
+    }
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown, true);
+    };
+  }, [handleKeyDown, shouldShowPopup]);
+  return /*#__PURE__*/_react.default.createElement(_MentionFinder.StyledMentionFinder, {
+    className: "beta-chayns-mention-finder"
+  }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, shouldShowPopup && /*#__PURE__*/_react.default.createElement(_MentionFinder.StyledMotionMentionFinderPopup, {
+    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
+    }
+  }, items)));
+};
+MentionFinder.displayName = 'MentionFinder';
+var _default = MentionFinder;
+exports.default = _default;
+//# sourceMappingURL=MentionFinder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinder.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_MentionFinderItem","_interopRequireDefault","_MentionFinder","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","MentionFinder","_ref","inputValue","members","onSelect","popupAlignment","activeMember","setActiveMember","useState","fullMatch","searchString","useMemo","_regExpMatchArray$1$t","_regExpMatchArray$","regExpMatchArray","match","toLowerCase","filteredMembers","filter","_ref2","id","info","name","includes","replace","handleKeyDown","useCallback","event","shouldPreventDefault","currentIndex","findIndex","_ref3","prevIndex","Math","max","member","_ref4","nextIndex","min","length","preventDefault","stopPropagation","handleMemberClick","handleMemberHover","useEffect","isActiveMemberShown","some","_ref5","items","map","createElement","isActive","onClick","onHover","shouldShowPopup","window","addEventListener","removeEventListener","StyledMentionFinder","className","AnimatePresence","initial","StyledMotionMentionFinderPopup","animate","height","opacity","exit","transition","duration","displayName","_default","exports"],"sources":["../../../src/components/mention-finder/MentionFinder.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { MentionFinderPopupAlignment } from './constants/alignment';\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};\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\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            let shouldPreventDefault = false;\n\n            if (event.key === 'ArrowUp') {\n                const currentIndex = filteredMembers.findIndex(({ id }) => id === activeMember?.id);\n\n                const prevIndex = Math.max(currentIndex - 1, 0);\n\n                const member = filteredMembers[prevIndex];\n\n                setActiveMember(member);\n\n                shouldPreventDefault = true;\n            } else if (event.key === 'ArrowDown') {\n                const currentIndex = filteredMembers.findIndex(({ id }) => id === activeMember?.id);\n\n                const nextIndex = Math.min(currentIndex + 1, filteredMembers.length - 1);\n\n                const member = filteredMembers[nextIndex];\n\n                setActiveMember(member);\n\n                shouldPreventDefault = true;\n            } else if (event.key === 'Enter') {\n                if (fullMatch && activeMember) {\n                    onSelect({ fullMatch, member: activeMember });\n\n                    shouldPreventDefault = true;\n                }\n            }\n\n            if (shouldPreventDefault) {\n                event.preventDefault();\n                event.stopPropagation();\n            }\n        },\n        [activeMember, filteredMembers, 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                        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                    >\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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"}

package/lib/components/mention-finder/MentionFinder.styles.d.ts

@@ -0,0 +1,5 @@
+import type { MentionFinderProps } from './MentionFinder';
+export declare const StyledMentionFinder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMotionMentionFinderPopup: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, Pick<MentionFinderProps, "popupAlignment"> & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;

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

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionMentionFinderPopup = exports.StyledMentionFinder = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _alignment = require("./constants/alignment");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const StyledMentionFinder = _styledComponents.default.div`
+    position: relative;
+`;
+exports.StyledMentionFinder = StyledMentionFinder;
+const StyledMotionMentionFinderPopup = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['001'];
+}};
+    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: 300px;
+    overflow-y: scroll;
+    position: absolute;
+    width: 100%;
+
+    ${_ref2 => {
+  let {
+    popupAlignment
+  } = _ref2;
+  switch (popupAlignment) {
+    case _alignment.MentionFinderPopupAlignment.Bottom:
+      return (0, _styledComponents.css)`
+                    top: 0;
+                `;
+    case _alignment.MentionFinderPopupAlignment.Top:
+      return (0, _styledComponents.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;
+    }
+`;
+exports.StyledMotionMentionFinderPopup = StyledMotionMentionFinderPopup;
+//# sourceMappingURL=MentionFinder.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinder.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_alignment","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledMentionFinder","styled","div","exports","StyledMotionMentionFinderPopup","motion","_ref","theme","_ref2","popupAlignment","MentionFinderPopupAlignment","Bottom","css","Top","undefined","_ref3","_ref4"],"sources":["../../../src/components/mention-finder/MentionFinder.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { MentionFinderPopupAlignment } from './constants/alignment';\nimport type { MentionFinderProps } from './MentionFinder';\n\nexport const StyledMentionFinder = styled.div`\n    position: relative;\n`;\n\ntype StyledMentionFinderPopupProps = WithTheme<Pick<MentionFinderProps, 'popupAlignment'>>;\n\nexport const StyledMotionMentionFinderPopup = styled(motion.div)<StyledMentionFinderPopupProps>`\n    background-color: ${({ theme }: StyledMentionFinderPopupProps) => theme['001']};\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: 300px;\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,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,UAAA,GAAAH,OAAA;AAAoE,SAAAI,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAG7D,MAAMW,mBAAmB,GAAGC,yBAAM,CAACC,GAAI;AAC9C;AACA,CAAC;AAACC,OAAA,CAAAH,mBAAA,GAAAA,mBAAA;AAIK,MAAMI,8BAA8B,GAAG,IAAAH,yBAAM,EAACI,oBAAM,CAACH,GAAG,CAAiC;AAChG,wBAAwBI,IAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAAwB;EAAA,IAAvB;IAAEC;EAAe,CAAC,GAAAD,KAAA;EACjB,QAAQC,cAAc;IAClB,KAAKC,sCAA2B,CAACC,MAAM;MACnC,OAAO,IAAAC,qBAAG,CAAC;AAC3B;AACA,iBAAiB;IACL,KAAKF,sCAA2B,CAACG,GAAG;MAChC,OAAO,IAAAD,qBAAG,CAAC;AAC3B;AACA,iBAAiB;IACL;MACI,OAAOE,SAAS;EACxB;AACJ,CAAE;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,KAAA;EAAA,IAAC;IAAER;EAAqC,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBS,KAAA;EAAA,IAAC;IAAET;EAAqC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAClF;AACA;AACA;AACA;AACA;AACA,CAAC;AAACJ,OAAA,CAAAC,8BAAA,GAAAA,8BAAA"}

package/lib/components/mention-finder/constants/alignment.d.ts

@@ -0,0 +1,4 @@
+export declare enum MentionFinderPopupAlignment {
+    Top = 0,
+    Bottom = 1
+}

package/lib/components/mention-finder/constants/alignment.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MentionFinderPopupAlignment = void 0;
+let MentionFinderPopupAlignment = /*#__PURE__*/function (MentionFinderPopupAlignment) {
+  MentionFinderPopupAlignment[MentionFinderPopupAlignment["Top"] = 0] = "Top";
+  MentionFinderPopupAlignment[MentionFinderPopupAlignment["Bottom"] = 1] = "Bottom";
+  return MentionFinderPopupAlignment;
+}({});
+exports.MentionFinderPopupAlignment = MentionFinderPopupAlignment;
+//# sourceMappingURL=alignment.js.map

package/lib/components/mention-finder/constants/alignment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alignment.js","names":["MentionFinderPopupAlignment","exports"],"sources":["../../../../src/components/mention-finder/constants/alignment.ts"],"sourcesContent":["export enum MentionFinderPopupAlignment {\n    Top,\n    Bottom,\n}\n"],"mappings":";;;;;;IAAYA,2BAA2B,0BAA3BA,2BAA2B;EAA3BA,2BAA2B,CAA3BA,2BAA2B;EAA3BA,2BAA2B,CAA3BA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;AAAAC,OAAA,CAAAD,2BAAA,GAAAA,2BAAA"}

package/lib/components/mention-finder/mention-finder-item/MentionFinderItem.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import type { MentionMember } from '../MentionFinder';
+export type MentionFinderItemProps = {
+    isActive: boolean;
+    member: MentionMember;
+    onClick: (member: MentionMember) => void;
+    onHover: (member: MentionMember) => void;
+};
+declare const MentionFinderItem: FC<MentionFinderItemProps>;
+export default MentionFinderItem;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _MentionFinderItem = require("./MentionFinderItem.styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const MentionFinderItem = _ref => {
+  let {
+    isActive,
+    member,
+    onClick,
+    onHover
+  } = _ref;
+  const handleItemClick = (0, _react.useCallback)(() => onClick(member), [member, onClick]);
+  const handleItemMouseEnter = (0, _react.useCallback)(() => onHover(member), [member, onHover]);
+  return /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItem, {
+    className: "prevent-lose-focus",
+    isActive: isActive,
+    onClick: handleItemClick,
+    onMouseEnter: handleItemMouseEnter
+  }, /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItemImage, {
+    src: member.imageUrl
+  }), /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItemContent, null, /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItemContentName, null, member.name), /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItemContentInfo, null, member.info)));
+};
+MentionFinderItem.displayName = 'MentionFinderItem';
+var _default = MentionFinderItem;
+exports.default = _default;
+//# sourceMappingURL=MentionFinderItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinderItem.js","names":["_react","_interopRequireWildcard","require","_MentionFinderItem","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","MentionFinderItem","_ref","isActive","member","onClick","onHover","handleItemClick","useCallback","handleItemMouseEnter","createElement","StyledMentionFinderItem","className","onMouseEnter","StyledMentionFinderItemImage","src","imageUrl","StyledMentionFinderItemContent","StyledMentionFinderItemContentName","name","StyledMentionFinderItemContentInfo","info","displayName","_default","exports"],"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            isActive={isActive}\n            onClick={handleItemClick}\n            onMouseEnter={handleItemMouseEnter}\n        >\n            <StyledMentionFinderItemImage src={member.imageUrl} />\n            <StyledMentionFinderItemContent>\n                <StyledMentionFinderItemContentName>\n                    {member.name}\n                </StyledMentionFinderItemContentName>\n                <StyledMentionFinderItemContentInfo>\n                    {member.info}\n                </StyledMentionFinderItemContentInfo>\n            </StyledMentionFinderItemContent>\n        </StyledMentionFinderItem>\n    );\n};\n\nMentionFinderItem.displayName = 'MentionFinderItem';\n\nexport default MentionFinderItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,kBAAA,GAAAD,OAAA;AAMoC,SAAAE,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAJ,wBAAAQ,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AASpC,MAAMW,iBAA6C,GAAGC,IAAA,IAA4C;EAAA,IAA3C;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,OAAO;IAAEC;EAAQ,CAAC,GAAAJ,IAAA;EACzF,MAAMK,eAAe,GAAG,IAAAC,kBAAW,EAAC,MAAMH,OAAO,CAACD,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEC,OAAO,CAAC,CAAC;EAE7E,MAAMI,oBAAoB,GAAG,IAAAD,kBAAW,EAAC,MAAMF,OAAO,CAACF,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEE,OAAO,CAAC,CAAC;EAElF,oBACI/B,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAChC,kBAAA,CAAAiC,uBAAuB;IACpBC,SAAS,EAAC,oBAAoB;IAC9BT,QAAQ,EAAEA,QAAS;IACnBE,OAAO,EAAEE,eAAgB;IACzBM,YAAY,EAAEJ;EAAqB,gBAEnClC,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAChC,kBAAA,CAAAoC,4BAA4B;IAACC,GAAG,EAAEX,MAAM,CAACY;EAAS,CAAE,CAAC,eACtDzC,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAChC,kBAAA,CAAAuC,8BAA8B,qBAC3B1C,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAChC,kBAAA,CAAAwC,kCAAkC,QAC9Bd,MAAM,CAACe,IACwB,CAAC,eACrC5C,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAChC,kBAAA,CAAA0C,kCAAkC,QAC9BhB,MAAM,CAACiB,IACwB,CACR,CACX,CAAC;AAElC,CAAC;AAEDpB,iBAAiB,CAACqB,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAErCtB,iBAAiB;AAAAuB,OAAA,CAAAtC,OAAA,GAAAqC,QAAA"}

package/lib/components/mention-finder/mention-finder-item/MentionFinderItem.styles.d.ts

@@ -0,0 +1,8 @@
+import type { MentionFinderItemProps } from './MentionFinderItem';
+export declare const StyledMentionFinderItem: import("styled-components").StyledComponent<"div", any, Pick<MentionFinderItemProps, "isActive"> & {
+    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledMentionFinderItemImage: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const StyledMentionFinderItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMentionFinderItemContentName: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMentionFinderItemContentInfo: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMentionFinderItemImage = exports.StyledMentionFinderItemContentName = exports.StyledMentionFinderItemContentInfo = exports.StyledMentionFinderItemContent = exports.StyledMentionFinderItem = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const StyledMentionFinderItem = _styledComponents.default.div`
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    height: 64px;
+    padding: 12px 9px;
+
+    :not(:last-child) {
+        border-bottom: 1px solid
+            rgba(${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['text-rgb'];
+}}, 0.15);
+    }
+
+    :nth-child(even) {
+        background-color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['002'];
+}};
+    }
+
+    ${_ref3 => {
+  let {
+    isActive
+  } = _ref3;
+  return isActive && (0, _styledComponents.css)`
+            background-color: ${_ref4 => {
+    let {
+      theme
+    } = _ref4;
+    return theme['102'];
+  }} !important;
+        `;
+}}
+`;
+exports.StyledMentionFinderItem = StyledMentionFinderItem;
+const StyledMentionFinderItemImage = _styledComponents.default.img`
+    background-color: rgba(
+        ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme['text-rgb'];
+}},
+        0.1
+    );
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px
+        rgba(${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme['009-rgb'];
+}}, 0.08) inset;
+    flex: 0 0 auto;
+    height: 40px;
+    overflow: hidden;
+    transition: border-radius 0.3s ease;
+    width: 40px;
+`;
+exports.StyledMentionFinderItemImage = StyledMentionFinderItemImage;
+const StyledMentionFinderItemContent = _styledComponents.default.div`
+    color: ${_ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.text;
+}};
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    justify-content: center;
+    line-height: normal;
+    margin-left: 10px;
+    min-width: 0;
+`;
+exports.StyledMentionFinderItemContent = StyledMentionFinderItemContent;
+const StyledMentionFinderItemContentName = _styledComponents.default.div``;
+exports.StyledMentionFinderItemContentName = StyledMentionFinderItemContentName;
+const StyledMentionFinderItemContentInfo = _styledComponents.default.div`
+    font-size: 85%;
+    margin-top: 2px;
+    opacity: 0.75;
+`;
+exports.StyledMentionFinderItemContentInfo = StyledMentionFinderItemContentInfo;
+//# sourceMappingURL=MentionFinderItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinderItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledMentionFinderItem","styled","div","_ref","theme","_ref2","_ref3","isActive","css","_ref4","exports","StyledMentionFinderItemImage","img","_ref5","_ref6","StyledMentionFinderItemContent","_ref7","text","StyledMentionFinderItemContentName","StyledMentionFinderItemContentInfo"],"sources":["../../../../src/components/mention-finder/mention-finder-item/MentionFinderItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport type { MentionFinderItemProps } from './MentionFinderItem';\n\ntype StyledMentionFinderItemProps = WithTheme<Pick<MentionFinderItemProps, 'isActive'>>;\n\nexport const StyledMentionFinderItem = styled.div<StyledMentionFinderItemProps>`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: 64px;\n    padding: 12px 9px;\n\n    :not(:last-child) {\n        border-bottom: 1px solid\n            rgba(${({ theme }: StyledMentionFinderItemProps) => theme['text-rgb']}, 0.15);\n    }\n\n    :nth-child(even) {\n        background-color: ${({ theme }: StyledMentionFinderItemProps) => theme['002']};\n    }\n\n    ${({ isActive }) =>\n        isActive &&\n        css`\n            background-color: ${({ theme }: StyledMentionFinderItemProps) =>\n                theme['102']} !important;\n        `}\n`;\n\ntype StyledMentionFinderItemImageProps = WithTheme<unknown>;\n\nexport const StyledMentionFinderItemImage = styled.img`\n    background-color: rgba(\n        ${({ theme }: StyledMentionFinderItemImageProps) => theme['text-rgb']},\n        0.1\n    );\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMentionFinderItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition: border-radius 0.3s ease;\n    width: 40px;\n`;\n\ntype StyledMentionFinderItemContentProps = WithTheme<unknown>;\n\nexport const StyledMentionFinderItemContent = styled.div`\n    color: ${({ theme }: StyledMentionFinderItemContentProps) => theme.text};\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    justify-content: center;\n    line-height: normal;\n    margin-left: 10px;\n    min-width: 0;\n`;\n\nexport const StyledMentionFinderItemContentName = styled.div``;\n\nexport const StyledMentionFinderItemContentInfo = styled.div`\n    font-size: 85%;\n    margin-top: 2px;\n    opacity: 0.75;\n`;\n"],"mappings":"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"}

package/lib/components/popup/Popup.d.ts

@@ -0,0 +1,26 @@
+import React, { ReactNode } from 'react';
+import { PopupRef } from './types';
+export type PopupProps = {
+    /**
+     * The element over which the content of the `ContextMenu` should be displayed.
+     */
+    children?: ReactNode;
+    /**
+     * The content that should be displayed inside the popup.
+     */
+    content: ReactNode;
+    /**
+     * Function to be executed when the content of the Context menu has been hidden.
+     */
+    onHide?: VoidFunction;
+    /**
+     * Function to be executed when the content of the Context menu has been shown.
+     */
+    onShow?: VoidFunction;
+    /**
+     * Whether the popup should be opened on hover. If not, the popup will be opened on click.
+     */
+    shouldShowOnHover?: boolean;
+};
+declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<PopupRef>>;
+export default Popup;