@chayns-components/core 5.0.0-beta.3 → 5.0.0-beta.300

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

@@ -0,0 +1,140 @@
+"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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 || (_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 = exports.default = MentionFinder;
+//# 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","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","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","key","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,92 @@
+"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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledMentionFinder = exports.StyledMentionFinder = _styledComponents.default.div`
+    position: relative;
+`;
+const StyledMotionMentionFinderPopup = exports.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;
+    }
+`;
+//# 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","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledMentionFinder","exports","styled","div","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,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAG7D,MAAMY,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAAI;AAC9C;AACA,CAAC;AAIM,MAAMC,8BAA8B,GAAAH,OAAA,CAAAG,8BAAA,GAAG,IAAAF,yBAAM,EAACG,oBAAM,CAACF,GAAG,CAAiC;AAChG,wBAAwBG,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"}

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,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MentionFinderPopupAlignment = void 0;
+let MentionFinderPopupAlignment = exports.MentionFinderPopupAlignment = /*#__PURE__*/function (MentionFinderPopupAlignment) {
+  MentionFinderPopupAlignment[MentionFinderPopupAlignment["Top"] = 0] = "Top";
+  MentionFinderPopupAlignment[MentionFinderPopupAlignment["Bottom"] = 1] = "Bottom";
+  return 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,GAAAC,OAAA,CAAAD,2BAAA,0BAA3BA,2BAA2B;EAA3BA,2BAA2B,CAA3BA,2BAA2B;EAA3BA,2BAA2B,CAA3BA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA"}

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,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _MentionFinderItem = require("./MentionFinderItem.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 = exports.default = MentionFinderItem;
+//# 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","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","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,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AASpC,MAAMY,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,oBACI9B,MAAA,CAAAU,OAAA,CAAAwB,aAAA,CAAC/B,kBAAA,CAAAgC,uBAAuB;IACpBC,SAAS,EAAC,oBAAoB;IAC9BT,QAAQ,EAAEA,QAAS;IACnBE,OAAO,EAAEE,eAAgB;IACzBM,YAAY,EAAEJ;EAAqB,gBAEnCjC,MAAA,CAAAU,OAAA,CAAAwB,aAAA,CAAC/B,kBAAA,CAAAmC,4BAA4B;IAACC,GAAG,EAAEX,MAAM,CAACY;EAAS,CAAE,CAAC,eACtDxC,MAAA,CAAAU,OAAA,CAAAwB,aAAA,CAAC/B,kBAAA,CAAAsC,8BAA8B,qBAC3BzC,MAAA,CAAAU,OAAA,CAAAwB,aAAA,CAAC/B,kBAAA,CAAAuC,kCAAkC,QAC9Bd,MAAM,CAACe,IACwB,CAAC,eACrC3C,MAAA,CAAAU,OAAA,CAAAwB,aAAA,CAAC/B,kBAAA,CAAAyC,kCAAkC,QAC9BhB,MAAM,CAACiB,IACwB,CACR,CACX,CAAC;AAElC,CAAC;AAEDpB,iBAAiB,CAACqB,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAtC,OAAA,GAErCe,iBAAiB"}

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,95 @@
+"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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledMentionFinderItem = exports.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;
+        `;
+}}
+`;
+const StyledMentionFinderItemImage = exports.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;
+`;
+const StyledMentionFinderItemContent = exports.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;
+`;
+const StyledMentionFinderItemContentName = exports.StyledMentionFinderItemContentName = _styledComponents.default.div``;
+const StyledMentionFinderItemContentInfo = exports.StyledMentionFinderItemContentInfo = _styledComponents.default.div`
+    font-size: 85%;
+    margin-top: 2px;
+    opacity: 0.75;
+`;
+//# 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","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledMentionFinderItem","exports","styled","div","_ref","theme","_ref2","_ref3","isActive","css","_ref4","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/number-input/NumberInput.d.ts

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+export type NumberInputProps = {
+    /**
+     * Applies rules for decimal input.
+     * Enables the user to input one zero as number before the comma
+     */
+    isDecimalInput?: boolean;
+    /**
+     * Whether the input is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Applies rules for money input.
+     * Rules: only two decimal places, one zero before the comma
+     */
+    isMoneyInput?: boolean;
+    /**
+     * Limits the number to this value
+     */
+    maxNumber?: number;
+    /**
+     * Limits the number to this value
+     */
+    minNumber?: number;
+    /**
+     * Callback function that is called when the input gets out of focus
+     */
+    onBlur?: (newNumber: number | null, isInvalid: boolean) => void;
+    /**
+     * Callback function that is called when the input changes
+     * It will pass the text from the input
+     */
+    onChange?: (newValue: string) => void;
+    /**
+     * Placeholder for the input field
+     */
+    placeholder?: string;
+    /**
+     * The value, that should be displayed in the input, when it is in focus.
+     * You can also pass a stringified number as default value.
+     * NOTE: If you pass a stringified number, it will be formatted to the selected format
+     */
+    value?: string;
+};
+declare const NumberInput: FC<NumberInputProps>;
+export default NumberInput;