@chayns-components/core 5.0.0-beta.529 → 5.0.0-beta.531

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

@@ -1,5 +1,5 @@
 import { AnimatePresence } from 'framer-motion';
-import React, { useCallback, useEffect, useMemo, useState } from '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 => {
@@ -10,6 +10,8 @@ const MentionFinder = _ref => {
     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​]*)/);
@@ -24,30 +26,22 @@ const MentionFinder = _ref => {
     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') {
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
       event.preventDefault();
-      event.stopPropagation();
-      const currentIndex = filteredMembers.findIndex(_ref3 => {
-        let {
-          id
-        } = _ref3;
-        return id === activeMember?.id;
-      });
-      const prevIndex = Math.max(currentIndex - 1, 0);
-      const member = filteredMembers[prevIndex];
-      setActiveMember(member);
-    } else if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      event.stopPropagation();
-      const currentIndex = filteredMembers.findIndex(_ref4 => {
-        let {
-          id
-        } = _ref4;
-        return id === activeMember?.id;
-      });
-      const nextIndex = Math.min(currentIndex + 1, filteredMembers.length - 1);
-      const member = filteredMembers[nextIndex];
-      setActiveMember(member);
+      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();
@@ -58,7 +52,38 @@ const MentionFinder = _ref => {
         });
       }
     }
-  }, [activeMember, filteredMembers, fullMatch, onSelect]);
+
+    // if (event.key === 'ArrowUp') {
+    //     event.preventDefault();
+    //     event.stopPropagation();
+    //
+    //     const currentIndex = filteredMembers.findIndex(({ id }) => id === activeMember?.id);
+    //
+    //     const prevIndex = Math.max(currentIndex - 1, 0);
+    //
+    //     const member = filteredMembers[prevIndex];
+    //
+    //     setActiveMember(member);
+    // } else if (event.key === 'ArrowDown') {
+    //     event.preventDefault();
+    //     event.stopPropagation();
+    //
+    //     const currentIndex = filteredMembers.findIndex(({ id }) => id === activeMember?.id);
+    //
+    //     const nextIndex = Math.min(currentIndex + 1, filteredMembers.length - 1);
+    //
+    //     const member = filteredMembers[nextIndex];
+    //
+    //     setActiveMember(member);
+    // } 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({
@@ -72,10 +97,10 @@ const MentionFinder = _ref => {
   }, []);
   useEffect(() => {
     if (filteredMembers.length > 0) {
-      const isActiveMemberShown = filteredMembers.some(_ref5 => {
+      const isActiveMemberShown = filteredMembers.some(_ref3 => {
         let {
           id
-        } = _ref5;
+        } = _ref3;
         return id === activeMember?.id;
       });
       if (!isActiveMemberShown) {
@@ -104,6 +129,7 @@ const MentionFinder = _ref => {
   }, /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, shouldShowPopup && /*#__PURE__*/React.createElement(StyledMotionMentionFinderPopup, {
+    ref: ref,
     animate: {
       height: 'auto',
       opacity: 1
@@ -120,7 +146,8 @@ const MentionFinder = _ref => {
     $popupAlignment: popupAlignment,
     transition: {
       duration: 0.15
-    }
+    },
+    tabIndex: 0
   }, items)));
 };
 MentionFinder.displayName = 'MentionFinder';

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

@@ -1 +1 @@
-{"version":3,"file":"MentionFinder.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useState","MentionFinderItem","StyledMentionFinder","StyledMotionMentionFinderPopup","MentionFinder","_ref","inputValue","members","onSelect","popupAlignment","activeMember","setActiveMember","fullMatch","searchString","regExpMatchArray","match","toLowerCase","filteredMembers","filter","_ref2","id","info","name","includes","replace","handleKeyDown","event","key","preventDefault","stopPropagation","currentIndex","findIndex","_ref3","prevIndex","Math","max","member","_ref4","nextIndex","min","length","handleMemberClick","handleMemberHover","isActiveMemberShown","some","_ref5","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 'framer-motion';\nimport React, { FC, useCallback, useEffect, useMemo, 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};\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            if (event.key === 'ArrowUp') {\n                event.preventDefault();\n                event.stopPropagation();\n\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            } else if (event.key === 'ArrowDown') {\n                event.preventDefault();\n                event.stopPropagation();\n\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            } 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, 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":"AAAA,SAASA,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAAQC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAE5E,OAAOC,iBAAiB,MAAM,yCAAyC;AACvE,SAASC,mBAAmB,EAAEC,8BAA8B,QAAQ,wBAAwB;AA4B5F,MAAMC,aAAqC,GAAGC,IAAA,IAKxC;EAAA,IALyC;IAC3CC,UAAU;IACVC,OAAO;IACPC,QAAQ;IACRC;EACJ,CAAC,GAAAJ,IAAA;EACG,MAAM,CAACK,YAAY,EAAEC,eAAe,CAAC,GAAGX,QAAQ,CAACO,OAAO,CAAC,CAAC,CAAC,CAAC;EAE5D,MAAM,CAACK,SAAS,EAAEC,YAAY,CAAC,GAAGd,OAAO,CAAC,MAAM;IAC5C;IACA,MAAMe,gBAAgB,GAAGR,UAAU,CAACS,KAAK,CAAC,YAAY,CAAC;IAEvD,OAAO,CAACD,gBAAgB,GAAG,CAAC,CAAC,EAAEA,gBAAgB,GAAG,CAAC,CAAC,EAAEE,WAAW,CAAC,CAAC,IAAI,EAAE,CAAC;EAC9E,CAAC,EAAE,CAACV,UAAU,CAAC,CAAC;EAEhB,MAAMW,eAAe,GAAGlB,OAAO,CAC3B,MACIc,YAAY,KAAK,EAAE,GACbN,OAAO,CAACW,MAAM,CACVC,KAAA;IAAA,IAAC;MAAEC,EAAE;MAAEC,IAAI;MAAEC;IAAK,CAAC,GAAAH,KAAA;IAAA,OACfC,EAAE,CAACJ,WAAW,CAAC,CAAC,CAACO,QAAQ,CAACV,YAAY,CAAC,IACvCQ,IAAI,CAACG,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAACR,WAAW,CAAC,CAAC,CAACO,QAAQ,CAACV,YAAY,CAAC,IAC/DS,IAAI,CAACN,WAAW,CAAC,CAAC,CAACO,QAAQ,CAACV,YAAY,CAAC;EAAA,CACjD,CAAC,GACDN,OAAO,EACjB,CAACA,OAAO,EAAEM,YAAY,CAC1B,CAAC;EAED,MAAMY,aAAa,GAAG5B,WAAW,CAC5B6B,KAAoB,IAAK;IACtB,IAAIA,KAAK,CAACC,GAAG,KAAK,SAAS,EAAE;MACzBD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBF,KAAK,CAACG,eAAe,CAAC,CAAC;MAEvB,MAAMC,YAAY,GAAGb,eAAe,CAACc,SAAS,CAACC,KAAA;QAAA,IAAC;UAAEZ;QAAG,CAAC,GAAAY,KAAA;QAAA,OAAKZ,EAAE,KAAKV,YAAY,EAAEU,EAAE;MAAA,EAAC;MAEnF,MAAMa,SAAS,GAAGC,IAAI,CAACC,GAAG,CAACL,YAAY,GAAG,CAAC,EAAE,CAAC,CAAC;MAE/C,MAAMM,MAAM,GAAGnB,eAAe,CAACgB,SAAS,CAAC;MAEzCtB,eAAe,CAACyB,MAAM,CAAC;IAC3B,CAAC,MAAM,IAAIV,KAAK,CAACC,GAAG,KAAK,WAAW,EAAE;MAClCD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBF,KAAK,CAACG,eAAe,CAAC,CAAC;MAEvB,MAAMC,YAAY,GAAGb,eAAe,CAACc,SAAS,CAACM,KAAA;QAAA,IAAC;UAAEjB;QAAG,CAAC,GAAAiB,KAAA;QAAA,OAAKjB,EAAE,KAAKV,YAAY,EAAEU,EAAE;MAAA,EAAC;MAEnF,MAAMkB,SAAS,GAAGJ,IAAI,CAACK,GAAG,CAACT,YAAY,GAAG,CAAC,EAAEb,eAAe,CAACuB,MAAM,GAAG,CAAC,CAAC;MAExE,MAAMJ,MAAM,GAAGnB,eAAe,CAACqB,SAAS,CAAC;MAEzC3B,eAAe,CAACyB,MAAM,CAAC;IAC3B,CAAC,MAAM,IAAIV,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MAC9BD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBF,KAAK,CAACG,eAAe,CAAC,CAAC;MAEvB,IAAIjB,SAAS,IAAIF,YAAY,EAAE;QAC3BF,QAAQ,CAAC;UAAEI,SAAS;UAAEwB,MAAM,EAAE1B;QAAa,CAAC,CAAC;MACjD;IACJ;EACJ,CAAC,EACD,CAACA,YAAY,EAAEO,eAAe,EAAEL,SAAS,EAAEJ,QAAQ,CACvD,CAAC;EAED,MAAMiC,iBAAiB,GAAG5C,WAAW,CAChCuC,MAAqB,IAAK;IACvB,IAAIxB,SAAS,EAAE;MACXJ,QAAQ,CAAC;QAAEI,SAAS;QAAEwB;MAAO,CAAC,CAAC;IACnC;EACJ,CAAC,EACD,CAACxB,SAAS,EAAEJ,QAAQ,CACxB,CAAC;EAED,MAAMkC,iBAAiB,GAAG7C,WAAW,CAAEuC,MAAqB,IAAK;IAC7DzB,eAAe,CAACyB,MAAM,CAAC;EAC3B,CAAC,EAAE,EAAE,CAAC;EAENtC,SAAS,CAAC,MAAM;IACZ,IAAImB,eAAe,CAACuB,MAAM,GAAG,CAAC,EAAE;MAC5B,MAAMG,mBAAmB,GAAG1B,eAAe,CAAC2B,IAAI,CAACC,KAAA;QAAA,IAAC;UAAEzB;QAAG,CAAC,GAAAyB,KAAA;QAAA,OAAKzB,EAAE,KAAKV,YAAY,EAAEU,EAAE;MAAA,EAAC;MAErF,IAAI,CAACuB,mBAAmB,EAAE;QACtBhC,eAAe,CAACM,eAAe,CAAC,CAAC,CAAC,CAAC;MACvC;IACJ;EACJ,CAAC,EAAE,CAACP,YAAY,EAAEU,EAAE,EAAEH,eAAe,CAAC,CAAC;EAEvC,MAAM6B,KAAK,GAAG/C,OAAO,CACjB,MACIkB,eAAe,CAAC8B,GAAG,CAAEX,MAAM,iBACvBxC,KAAA,CAAAoD,aAAA,CAAC/C,iBAAiB;IACdgD,QAAQ,EAAEb,MAAM,CAAChB,EAAE,KAAKV,YAAY,EAAEU,EAAG;IACzCO,GAAG,EAAES,MAAM,CAAChB,EAAG;IACfgB,MAAM,EAAEA,MAAO;IACfc,OAAO,EAAET,iBAAkB;IAC3BU,OAAO,EAAET;EAAkB,CAC9B,CACJ,CAAC,EACN,CAAChC,YAAY,EAAEO,eAAe,EAAEwB,iBAAiB,EAAEC,iBAAiB,CACxE,CAAC;EAED,MAAMU,eAAe,GAAGrD,OAAO,CAAC,MAAMa,SAAS,IAAIkC,KAAK,CAACN,MAAM,GAAG,CAAC,EAAE,CAAC5B,SAAS,EAAEkC,KAAK,CAACN,MAAM,CAAC,CAAC;EAE/F1C,SAAS,CAAC,MAAM;IACZ,IAAIsD,eAAe,EAAE;MACjBC,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAE7B,aAAa,EAAE,IAAI,CAAC;IAC3D;IAEA,OAAO,MAAM;MACT4B,MAAM,CAACE,mBAAmB,CAAC,SAAS,EAAE9B,aAAa,EAAE,IAAI,CAAC;IAC9D,CAAC;EACL,CAAC,EAAE,CAACA,aAAa,EAAE2B,eAAe,CAAC,CAAC;EAEpC,oBACIxD,KAAA,CAAAoD,aAAA,CAAC9C,mBAAmB;IAACsD,SAAS,EAAC;EAA4B,gBACvD5D,KAAA,CAAAoD,aAAA,CAACrD,eAAe;IAAC8D,OAAO,EAAE;EAAM,GAC3BL,eAAe,iBACZxD,KAAA,CAAAoD,aAAA,CAAC7C,8BAA8B;IAC3BuD,OAAO,EAAE;MAAEC,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxCJ,SAAS,EAAC,oBAAoB;IAC9BK,IAAI,EAAE;MAAEF,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCH,OAAO,EAAE;MAAEE,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCE,eAAe,EAAErD,cAAe;IAChCsD,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAK;EAAE,GAE9BlB,KAC2B,CAEvB,CACA,CAAC;AAE9B,CAAC;AAED1C,aAAa,CAAC6D,WAAW,GAAG,eAAe;AAE3C,eAAe7D,aAAa"}
+{"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 'framer-motion';\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};\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            // if (event.key === 'ArrowUp') {\n            //     event.preventDefault();\n            //     event.stopPropagation();\n            //\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            // } else if (event.key === 'ArrowDown') {\n            //     event.preventDefault();\n            //     event.stopPropagation();\n            //\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            // } 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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"}

package/lib/components/progress-bar/ProgressBar.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { StyledMotionProgressBarProgress, StyledProgressBar, StyledProgressBarBackground, StyledProgressBarLable, StyledProgressBarProgressWrapper } from './ProgressBar.styles';
+import { StyledMotionProgressBarProgress, StyledProgressBar, StyledProgressBarBackground, StyledProgressBarLabel, StyledProgressBarProgressWrapper } from './ProgressBar.styles';
 const ProgressBar = _ref => {
   let {
     percentage,
@@ -56,7 +56,7 @@ const ProgressBar = _ref => {
       }
     }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, null));
   }, [internalPercentage, percentage, shouldHideProgress]);
-  return useMemo(() => /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, label && /*#__PURE__*/React.createElement(StyledProgressBarLable, null, label)), [progressBar, label]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, label && /*#__PURE__*/React.createElement(StyledProgressBarLabel, null, label)), [progressBar, label]);
 };
 ProgressBar.displayName = 'ProgressBar';
 export default ProgressBar;

package/lib/components/progress-bar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":["React","useEffect","useMemo","useState","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLable","StyledProgressBarProgressWrapper","ProgressBar","_ref","percentage","label","shouldHideProgress","internalPercentage","setInternalPercentage","progressBar","createElement","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","Fragment","displayName"],"sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport {\n    StyledMotionProgressBarProgress,\n    StyledProgressBar,\n    StyledProgressBarBackground,\n    StyledProgressBarLable,\n    StyledProgressBarProgressWrapper,\n} from './ProgressBar.styles';\n\nexport type ProgressBarProps = {\n    /**\n     * The label that should be displayed under the progressbar.\n     */\n    label?: string;\n    /**\n     * The percentage of the progress. Number between 0 and 100.\n     */\n    percentage?: number;\n    /**\n     * Whether the progress should be hide and just display the label.\n     */\n    shouldHideProgress?: boolean;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({ percentage, label, shouldHideProgress = false }) => {\n    const [internalPercentage, setInternalPercentage] = useState(0);\n\n    useEffect(() => {\n        if (!percentage) {\n            return;\n        }\n\n        if (percentage >= 0 && percentage <= 100) {\n            setInternalPercentage(percentage);\n        }\n    }, [percentage]);\n\n    const progressBar = useMemo(() => {\n        if (shouldHideProgress) {\n            return null;\n        }\n\n        if (!percentage) {\n            return (\n                <StyledProgressBarProgressWrapper>\n                    <StyledMotionProgressBarProgress\n                        initial={{ width: '200px', left: '-200px' }}\n                        animate={{ width: '200px', left: '100%' }}\n                        exit={{ width: '200px', left: '100%' }}\n                        transition={{\n                            type: 'tween',\n                            repeat: Infinity,\n                            repeatDelay: 0,\n                            duration: 1,\n                        }}\n                    />\n                    <StyledProgressBarBackground />\n                </StyledProgressBarProgressWrapper>\n            );\n        }\n\n        return (\n            <>\n                <StyledMotionProgressBarProgress\n                    initial={{ width: '0%' }}\n                    animate={{ width: `${internalPercentage}%` }}\n                    exit={{ width: '0%' }}\n                    transition={{ type: 'tween' }}\n                />\n                <StyledProgressBarBackground />\n            </>\n        );\n    }, [internalPercentage, percentage, shouldHideProgress]);\n\n    return useMemo(\n        () => (\n            <StyledProgressBar>\n                {progressBar}\n                {label && <StyledProgressBarLable>{label}</StyledProgressBarLable>}\n            </StyledProgressBar>\n        ),\n        [progressBar, label],\n    );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SACIC,+BAA+B,EAC/BC,iBAAiB,EACjBC,2BAA2B,EAC3BC,sBAAsB,EACtBC,gCAAgC,QAC7B,sBAAsB;AAiB7B,MAAMC,WAAiC,GAAGC,IAAA,IAAuD;EAAA,IAAtD;IAAEC,UAAU;IAAEC,KAAK;IAAEC,kBAAkB,GAAG;EAAM,CAAC,GAAAH,IAAA;EACxF,MAAM,CAACI,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGZ,QAAQ,CAAC,CAAC,CAAC;EAE/DF,SAAS,CAAC,MAAM;IACZ,IAAI,CAACU,UAAU,EAAE;MACb;IACJ;IAEA,IAAIA,UAAU,IAAI,CAAC,IAAIA,UAAU,IAAI,GAAG,EAAE;MACtCI,qBAAqB,CAACJ,UAAU,CAAC;IACrC;EACJ,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,MAAMK,WAAW,GAAGd,OAAO,CAAC,MAAM;IAC9B,IAAIW,kBAAkB,EAAE;MACpB,OAAO,IAAI;IACf;IAEA,IAAI,CAACF,UAAU,EAAE;MACb,oBACIX,KAAA,CAAAiB,aAAA,CAACT,gCAAgC,qBAC7BR,KAAA,CAAAiB,aAAA,CAACb,+BAA+B;QAC5Bc,OAAO,EAAE;UAAEC,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAS,CAAE;QAC5CC,OAAO,EAAE;UAAEF,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAO,CAAE;QAC1CE,IAAI,EAAE;UAAEH,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAO,CAAE;QACvCG,UAAU,EAAE;UACRC,IAAI,EAAE,OAAO;UACbC,MAAM,EAAEC,QAAQ;UAChBC,WAAW,EAAE,CAAC;UACdC,QAAQ,EAAE;QACd;MAAE,CACL,CAAC,eACF5B,KAAA,CAAAiB,aAAA,CAACX,2BAA2B,MAAE,CACA,CAAC;IAE3C;IAEA,oBACIN,KAAA,CAAAiB,aAAA,CAAAjB,KAAA,CAAA6B,QAAA,qBACI7B,KAAA,CAAAiB,aAAA,CAACb,+BAA+B;MAC5Bc,OAAO,EAAE;QAAEC,KAAK,EAAE;MAAK,CAAE;MACzBE,OAAO,EAAE;QAAEF,KAAK,EAAG,GAAEL,kBAAmB;MAAG,CAAE;MAC7CQ,IAAI,EAAE;QAAEH,KAAK,EAAE;MAAK,CAAE;MACtBI,UAAU,EAAE;QAAEC,IAAI,EAAE;MAAQ;IAAE,CACjC,CAAC,eACFxB,KAAA,CAAAiB,aAAA,CAACX,2BAA2B,MAAE,CAChC,CAAC;EAEX,CAAC,EAAE,CAACQ,kBAAkB,EAAEH,UAAU,EAAEE,kBAAkB,CAAC,CAAC;EAExD,OAAOX,OAAO,CACV,mBACIF,KAAA,CAAAiB,aAAA,CAACZ,iBAAiB,QACbW,WAAW,EACXJ,KAAK,iBAAIZ,KAAA,CAAAiB,aAAA,CAACV,sBAAsB,QAAEK,KAA8B,CAClD,CACtB,EACD,CAACI,WAAW,EAAEJ,KAAK,CACvB,CAAC;AACL,CAAC;AAEDH,WAAW,CAACqB,WAAW,GAAG,aAAa;AAEvC,eAAerB,WAAW"}
+{"version":3,"file":"ProgressBar.js","names":["React","useEffect","useMemo","useState","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","ProgressBar","_ref","percentage","label","shouldHideProgress","internalPercentage","setInternalPercentage","progressBar","createElement","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","Fragment","displayName"],"sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport {\n    StyledMotionProgressBarProgress,\n    StyledProgressBar,\n    StyledProgressBarBackground,\n    StyledProgressBarLabel,\n    StyledProgressBarProgressWrapper,\n} from './ProgressBar.styles';\n\nexport type ProgressBarProps = {\n    /**\n     * The label that should be displayed under the progressbar.\n     */\n    label?: string;\n    /**\n     * The percentage of the progress. Number between 0 and 100.\n     */\n    percentage?: number;\n    /**\n     * Whether the progress should be hide and just display the label.\n     */\n    shouldHideProgress?: boolean;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({ percentage, label, shouldHideProgress = false }) => {\n    const [internalPercentage, setInternalPercentage] = useState(0);\n\n    useEffect(() => {\n        if (!percentage) {\n            return;\n        }\n\n        if (percentage >= 0 && percentage <= 100) {\n            setInternalPercentage(percentage);\n        }\n    }, [percentage]);\n\n    const progressBar = useMemo(() => {\n        if (shouldHideProgress) {\n            return null;\n        }\n\n        if (!percentage) {\n            return (\n                <StyledProgressBarProgressWrapper>\n                    <StyledMotionProgressBarProgress\n                        initial={{ width: '200px', left: '-200px' }}\n                        animate={{ width: '200px', left: '100%' }}\n                        exit={{ width: '200px', left: '100%' }}\n                        transition={{\n                            type: 'tween',\n                            repeat: Infinity,\n                            repeatDelay: 0,\n                            duration: 1,\n                        }}\n                    />\n                    <StyledProgressBarBackground />\n                </StyledProgressBarProgressWrapper>\n            );\n        }\n\n        return (\n            <>\n                <StyledMotionProgressBarProgress\n                    initial={{ width: '0%' }}\n                    animate={{ width: `${internalPercentage}%` }}\n                    exit={{ width: '0%' }}\n                    transition={{ type: 'tween' }}\n                />\n                <StyledProgressBarBackground />\n            </>\n        );\n    }, [internalPercentage, percentage, shouldHideProgress]);\n\n    return useMemo(\n        () => (\n            <StyledProgressBar>\n                {progressBar}\n                {label && <StyledProgressBarLabel>{label}</StyledProgressBarLabel>}\n            </StyledProgressBar>\n        ),\n        [progressBar, label],\n    );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SACIC,+BAA+B,EAC/BC,iBAAiB,EACjBC,2BAA2B,EAC3BC,sBAAsB,EACtBC,gCAAgC,QAC7B,sBAAsB;AAiB7B,MAAMC,WAAiC,GAAGC,IAAA,IAAuD;EAAA,IAAtD;IAAEC,UAAU;IAAEC,KAAK;IAAEC,kBAAkB,GAAG;EAAM,CAAC,GAAAH,IAAA;EACxF,MAAM,CAACI,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGZ,QAAQ,CAAC,CAAC,CAAC;EAE/DF,SAAS,CAAC,MAAM;IACZ,IAAI,CAACU,UAAU,EAAE;MACb;IACJ;IAEA,IAAIA,UAAU,IAAI,CAAC,IAAIA,UAAU,IAAI,GAAG,EAAE;MACtCI,qBAAqB,CAACJ,UAAU,CAAC;IACrC;EACJ,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,MAAMK,WAAW,GAAGd,OAAO,CAAC,MAAM;IAC9B,IAAIW,kBAAkB,EAAE;MACpB,OAAO,IAAI;IACf;IAEA,IAAI,CAACF,UAAU,EAAE;MACb,oBACIX,KAAA,CAAAiB,aAAA,CAACT,gCAAgC,qBAC7BR,KAAA,CAAAiB,aAAA,CAACb,+BAA+B;QAC5Bc,OAAO,EAAE;UAAEC,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAS,CAAE;QAC5CC,OAAO,EAAE;UAAEF,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAO,CAAE;QAC1CE,IAAI,EAAE;UAAEH,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAO,CAAE;QACvCG,UAAU,EAAE;UACRC,IAAI,EAAE,OAAO;UACbC,MAAM,EAAEC,QAAQ;UAChBC,WAAW,EAAE,CAAC;UACdC,QAAQ,EAAE;QACd;MAAE,CACL,CAAC,eACF5B,KAAA,CAAAiB,aAAA,CAACX,2BAA2B,MAAE,CACA,CAAC;IAE3C;IAEA,oBACIN,KAAA,CAAAiB,aAAA,CAAAjB,KAAA,CAAA6B,QAAA,qBACI7B,KAAA,CAAAiB,aAAA,CAACb,+BAA+B;MAC5Bc,OAAO,EAAE;QAAEC,KAAK,EAAE;MAAK,CAAE;MACzBE,OAAO,EAAE;QAAEF,KAAK,EAAG,GAAEL,kBAAmB;MAAG,CAAE;MAC7CQ,IAAI,EAAE;QAAEH,KAAK,EAAE;MAAK,CAAE;MACtBI,UAAU,EAAE;QAAEC,IAAI,EAAE;MAAQ;IAAE,CACjC,CAAC,eACFxB,KAAA,CAAAiB,aAAA,CAACX,2BAA2B,MAAE,CAChC,CAAC;EAEX,CAAC,EAAE,CAACQ,kBAAkB,EAAEH,UAAU,EAAEE,kBAAkB,CAAC,CAAC;EAExD,OAAOX,OAAO,CACV,mBACIF,KAAA,CAAAiB,aAAA,CAACZ,iBAAiB,QACbW,WAAW,EACXJ,KAAK,iBAAIZ,KAAA,CAAAiB,aAAA,CAACV,sBAAsB,QAAEK,KAA8B,CAClD,CACtB,EACD,CAACI,WAAW,EAAEJ,KAAK,CACvB,CAAC;AACL,CAAC;AAEDH,WAAW,CAACqB,WAAW,GAAG,aAAa;AAEvC,eAAerB,WAAW"}

package/lib/components/progress-bar/ProgressBar.styles.d.ts

@@ -270,4 +270,6 @@ export declare const StyledMotionProgressBarProgress: import("styled-components"
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
-export declare const StyledProgressBarLable: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledProgressBarLabel: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}>>;

package/lib/components/progress-bar/ProgressBar.styles.js

@@ -32,5 +32,13 @@ export const StyledMotionProgressBarProgress = styled(motion.div)`
   return theme.headline;
 }};
 `;
-export const StyledProgressBarLable = styled.div``;
+export const StyledProgressBarLabel = styled.div`
+    font-size: 85%;
+    color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.headline;
+}};
+`;
 //# sourceMappingURL=ProgressBar.styles.js.map

package/lib/components/progress-bar/ProgressBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","StyledProgressBar","div","StyledProgressBarBackground","_ref","theme","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","_ref2","headline","StyledProgressBarLable"],"sources":["../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n    position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<unknown>;\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n    height: 10px;\n    width: 100%;\n    background-color: ${({ theme }: StyledProgressBarBackgroundProps) => theme['100']};\n`;\n\nexport const StyledProgressBarProgressWrapper = styled.div`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: 10px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<unknown>;\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n    height: 10px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    background-color: ${({ theme }: StyledProgressBarProgressProps) => theme.headline};\n`;\n\nexport const StyledProgressBarLable = styled.div``;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAAI;AAC5C;AACA,CAAC;AAGD,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAsC;AACxF;AACA;AACA,wBAAwBE,IAAA;EAAA,IAAC;IAAEC;EAAwC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACtF,CAAC;AAED,OAAO,MAAMC,gCAAgC,GAAGN,MAAM,CAACE,GAAI;AAC3D;AACA;AACA;AACA;AACA,CAAC;AAGD,OAAO,MAAMK,+BAA+B,GAAGP,MAAM,CAACD,MAAM,CAACG,GAAG,CAAkC;AAClG;AACA;AACA;AACA;AACA;AACA,wBAAwBM,KAAA;EAAA,IAAC;IAAEH;EAAsC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,QAAQ;AAAA,CAAC;AACtF,CAAC;AAED,OAAO,MAAMC,sBAAsB,GAAGV,MAAM,CAACE,GAAI,EAAC"}
+{"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","StyledProgressBar","div","StyledProgressBarBackground","_ref","theme","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","_ref2","headline","StyledProgressBarLabel","_ref3"],"sources":["../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n    position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<unknown>;\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n    height: 10px;\n    width: 100%;\n    background-color: ${({ theme }: StyledProgressBarBackgroundProps) => theme['100']};\n`;\n\nexport const StyledProgressBarProgressWrapper = styled.div`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: 10px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<unknown>;\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n    height: 10px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    background-color: ${({ theme }: StyledProgressBarProgressProps) => theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<unknown>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n    font-size: 85%;\n    color: ${({ theme }: StyledProgressBarLabelProps) => theme.headline};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAAI;AAC5C;AACA,CAAC;AAGD,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAsC;AACxF;AACA;AACA,wBAAwBE,IAAA;EAAA,IAAC;IAAEC;EAAwC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACtF,CAAC;AAED,OAAO,MAAMC,gCAAgC,GAAGN,MAAM,CAACE,GAAI;AAC3D;AACA;AACA;AACA;AACA,CAAC;AAGD,OAAO,MAAMK,+BAA+B,GAAGP,MAAM,CAACD,MAAM,CAACG,GAAG,CAAkC;AAClG;AACA;AACA;AACA;AACA;AACA,wBAAwBM,KAAA;EAAA,IAAC;IAAEH;EAAsC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,QAAQ;AAAA,CAAC;AACtF,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGV,MAAM,CAACE,GAAiC;AAC9E;AACA,aAAaS,KAAA;EAAA,IAAC;IAAEN;EAAmC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAACI,QAAQ;AAAA,CAAC;AACxE,CAAC"}

package/lib/components/search-box/SearchBox.js

@@ -5,7 +5,7 @@ import { calculateContentHeight } from '../../utils/calculate';
 import { searchList } from '../../utils/searchBox';
 import Input from '../input/Input';
 import SearchBoxItem from './search-box-item/SearchBoxItem';
-import { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';
+import { StyledMotionSearchBoxBody, StyledSearchBox, StyledSearchBoxContent } from './SearchBox.styles';
 const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     placeholder,
@@ -271,8 +271,9 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
       duration: 0.2,
       type: 'tween'
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: contentRef
+  }, /*#__PURE__*/React.createElement(StyledSearchBoxContent, {
+    ref: contentRef,
+    tabIndex: 0
   }, content)))), [browser?.name, content, handleBlur, handleChange, handleFocus, height, isAnimating, placeholder, value, width]);
 });
 SearchBox.displayName = 'SearchBox';

package/lib/components/search-box/SearchBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","calculateContentHeight","searchList","Input","SearchBoxItem","StyledMotionSearchBoxBody","StyledSearchBox","SearchBox","_ref","ref","placeholder","list","onChange","onBlur","onSelect","selectedId","shouldShowRoundImage","shouldShowContentOnEmptyInput","matchingItems","setMatchingItems","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","boxRef","contentRef","inputRef","browser","handleOutsideClick","event","current","contains","target","document","addEventListener","window","removeEventListener","textArray","map","_ref2","text","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleFocus","newMatchingItems","items","searchString","length","handleChange","searchedItems","handleBlur","handleSelect","item","content","sort","a","b","localeCompare","forEach","_ref4","imageUrl","push","createElement","key","handleKeyDown","e","preventDefault","children","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","clear","onFocus","initial","$browser","name","$height","$width","opacity","animate","transition","duration","type","displayName"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    forwardRef,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport type { ISearchBoxItem } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n    clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n    /**\n     * A list of items that can be searched.\n     */\n    list: ISearchBoxItem[];\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Function to be executed when the input lost focus.\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\n    /**\n     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n     */\n    selectedId?: string;\n    /**\n     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n    (\n        {\n            placeholder,\n            list,\n            onChange,\n            onBlur,\n            onSelect,\n            selectedId,\n            shouldShowRoundImage,\n            shouldShowContentOnEmptyInput = true,\n        },\n        ref,\n    ) => {\n        const [matchingItems, setMatchingItems] = useState<ISearchBoxItem[]>([]);\n        const [value, setValue] = useState('');\n        const [isAnimating, setIsAnimating] = useState(false);\n        const [height, setHeight] = useState<number>(0);\n        const [width, setWidth] = useState(0);\n        const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n        const boxRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLDivElement | null>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        const { browser } = getDevice();\n\n        /**\n         * This function closes the list of items\n         */\n        const handleOutsideClick = useCallback(\n            (event: MouseEvent) => {\n                if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n                    setIsAnimating(false);\n                }\n            },\n            [boxRef],\n        );\n\n        /**\n         * This hook listens for clicks\n         */\n        useEffect(() => {\n            document.addEventListener('click', handleOutsideClick);\n            window.addEventListener('blur', () => setIsAnimating(false));\n\n            return () => {\n                document.removeEventListener('click', handleOutsideClick);\n            };\n        }, [handleOutsideClick, boxRef]);\n\n        /**\n         * This hook calculates the height\n         */\n        useEffect(() => {\n            const textArray = list.map(({ text }) => text);\n\n            setHeight(calculateContentHeight(textArray));\n        }, [list, placeholder]);\n\n        /**\n         * This hook calculates the width\n         */\n        useEffect(() => {\n            const input = document.getElementById('search_box_input');\n\n            if (input) {\n                setWidth(input.offsetWidth);\n            }\n        }, []);\n\n        useEffect(() => {\n            if (selectedId) {\n                const selectedItem = list.find(({ id }) => id === selectedId);\n\n                if (selectedItem) {\n                    setValue(selectedItem.text);\n                }\n            }\n        }, [list, selectedId]);\n\n        /**\n         * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n         * should not be reset if the list changes and the selectedId is still undefined.\n         */\n        useEffect(() => {\n            if (!selectedId) {\n                setValue('');\n            }\n        }, [selectedId]);\n\n        /**\n         * This function sets the items on focus if shouldShowContentOnEmptyInput\n         */\n        const handleFocus = useCallback(() => {\n            if (shouldShowContentOnEmptyInput) {\n                const newMatchingItems = searchList({ items: list, searchString: value });\n\n                if (newMatchingItems.length === 1 && newMatchingItems[0]?.text === value) {\n                    return;\n                }\n\n                setMatchingItems(newMatchingItems);\n                setIsAnimating(true);\n            }\n        }, [list, shouldShowContentOnEmptyInput, value]);\n\n        useEffect(() => {\n            if (list) {\n                const newMatchingItems = searchList({ items: list, searchString: value });\n\n                if (newMatchingItems.length === 1 && newMatchingItems[0]?.text === value) {\n                    return;\n                }\n\n                if (shouldShowContentOnEmptyInput || value !== '') {\n                    setMatchingItems(newMatchingItems);\n                    setIsAnimating(newMatchingItems.length !== 0);\n                }\n            }\n        }, [list, shouldShowContentOnEmptyInput, value]);\n\n        /**\n         * This function handles changes of the input\n         */\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                const searchedItems = searchList({ items: list, searchString: event.target.value });\n\n                if (\n                    (!shouldShowContentOnEmptyInput && !event.target.value) ||\n                    (searchedItems.length === 1 && searchedItems[0]?.text === event.target.value)\n                ) {\n                    setMatchingItems([]);\n                } else {\n                    setMatchingItems(searchedItems);\n                    setIsAnimating(searchedItems.length !== 0);\n                }\n\n                setValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [list, onChange, shouldShowContentOnEmptyInput],\n        );\n\n        /**\n         * This function handles the blur event of the input\n         */\n        const handleBlur = useCallback(\n            (event: FocusEvent<HTMLInputElement>) => {\n                if (typeof onBlur === 'function') {\n                    onBlur(event);\n                }\n            },\n            [onBlur],\n        );\n\n        /**\n         * This function handles the item selection\n         */\n        const handleSelect = useCallback(\n            (item: ISearchBoxItem) => {\n                setValue(item.text);\n                setIsAnimating(false);\n                setMatchingItems([]);\n\n                if (typeof onSelect === 'function') {\n                    onSelect(item);\n                }\n            },\n            [onSelect],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            matchingItems.sort((a, b) => a.text.localeCompare(b.text));\n\n            matchingItems.forEach(({ id, text, imageUrl }) => {\n                items.push(\n                    <SearchBoxItem\n                        key={id}\n                        text={text}\n                        imageUrl={imageUrl}\n                        id={id}\n                        shouldShowRoundImage={shouldShowRoundImage}\n                        onSelect={handleSelect}\n                    />,\n                );\n            });\n\n            return items;\n        }, [shouldShowRoundImage, handleSelect, matchingItems]);\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n                    const children = contentRef.current?.children;\n                    if (children && children.length > 0) {\n                        const newIndex =\n                            focusedIndex !== null\n                                ? (focusedIndex +\n                                      (e.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 newElement = children[newIndex] as HTMLDivElement;\n                        newElement.tabIndex = 0;\n                        newElement.focus();\n                    }\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    const element = contentRef.current?.children[focusedIndex];\n\n                    if (!element) {\n                        return;\n                    }\n\n                    const { id, textContent } = element;\n\n                    handleSelect({\n                        id: id.replace('search-box-item__', ''),\n                        text: textContent ?? '',\n                    });\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        }, [focusedIndex, handleSelect]);\n\n        const handleKeyPress = useCallback((event: KeyboardEvent) => {\n            if (event.keyCode === 27) {\n                setMatchingItems([]);\n            }\n        }, []);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: () => setValue(''),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            document.addEventListener('keydown', handleKeyPress);\n\n            return () => {\n                document.addEventListener('keydown', handleKeyPress);\n            };\n        }, [handleKeyPress]);\n\n        return useMemo(\n            () => (\n                <StyledSearchBox ref={boxRef}>\n                    <div id=\"search_box_input\">\n                        <Input\n                            ref={inputRef}\n                            onChange={handleChange}\n                            onBlur={handleBlur}\n                            onFocus={handleFocus}\n                            placeholder={placeholder}\n                            value={value}\n                        />\n                    </div>\n                    <AnimatePresence initial={false}>\n                        <StyledMotionSearchBoxBody\n                            $browser={browser?.name}\n                            key=\"content\"\n                            $height={height}\n                            $width={width}\n                            initial={{ height: 0, opacity: 0 }}\n                            animate={\n                                isAnimating\n                                    ? { height: 'fit-content', opacity: 1 }\n                                    : { height: 0, opacity: 0 }\n                            }\n                            transition={{\n                                duration: 0.2,\n                                type: 'tween',\n                            }}\n                        >\n                            <div ref={contentRef}>{content}</div>\n                        </StyledMotionSearchBoxBody>\n                    </AnimatePresence>\n                </StyledSearchBox>\n            ),\n            [\n                browser?.name,\n                content,\n                handleBlur,\n                handleChange,\n                handleFocus,\n                height,\n                isAnimating,\n                placeholder,\n                value,\n                width,\n            ],\n        );\n    },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}
+{"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","calculateContentHeight","searchList","Input","SearchBoxItem","StyledMotionSearchBoxBody","StyledSearchBox","StyledSearchBoxContent","SearchBox","_ref","ref","placeholder","list","onChange","onBlur","onSelect","selectedId","shouldShowRoundImage","shouldShowContentOnEmptyInput","matchingItems","setMatchingItems","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","boxRef","contentRef","inputRef","browser","handleOutsideClick","event","current","contains","target","document","addEventListener","window","removeEventListener","textArray","map","_ref2","text","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleFocus","newMatchingItems","items","searchString","length","handleChange","searchedItems","handleBlur","handleSelect","item","content","sort","a","b","localeCompare","forEach","_ref4","imageUrl","push","createElement","key","handleKeyDown","e","preventDefault","children","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","clear","onFocus","initial","$browser","name","$height","$width","opacity","animate","transition","duration","type","displayName"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    forwardRef,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport type { ISearchBoxItem } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport {\n    StyledMotionSearchBoxBody,\n    StyledSearchBox,\n    StyledSearchBoxContent,\n} from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n    clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n    /**\n     * A list of items that can be searched.\n     */\n    list: ISearchBoxItem[];\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Function to be executed when the input lost focus.\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\n    /**\n     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n     */\n    selectedId?: string;\n    /**\n     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n    (\n        {\n            placeholder,\n            list,\n            onChange,\n            onBlur,\n            onSelect,\n            selectedId,\n            shouldShowRoundImage,\n            shouldShowContentOnEmptyInput = true,\n        },\n        ref,\n    ) => {\n        const [matchingItems, setMatchingItems] = useState<ISearchBoxItem[]>([]);\n        const [value, setValue] = useState('');\n        const [isAnimating, setIsAnimating] = useState(false);\n        const [height, setHeight] = useState<number>(0);\n        const [width, setWidth] = useState(0);\n        const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n        const boxRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLAnchorElement | null>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        const { browser } = getDevice();\n\n        /**\n         * This function closes the list of items\n         */\n        const handleOutsideClick = useCallback(\n            (event: MouseEvent) => {\n                if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n                    setIsAnimating(false);\n                }\n            },\n            [boxRef],\n        );\n\n        /**\n         * This hook listens for clicks\n         */\n        useEffect(() => {\n            document.addEventListener('click', handleOutsideClick);\n            window.addEventListener('blur', () => setIsAnimating(false));\n\n            return () => {\n                document.removeEventListener('click', handleOutsideClick);\n            };\n        }, [handleOutsideClick, boxRef]);\n\n        /**\n         * This hook calculates the height\n         */\n        useEffect(() => {\n            const textArray = list.map(({ text }) => text);\n\n            setHeight(calculateContentHeight(textArray));\n        }, [list, placeholder]);\n\n        /**\n         * This hook calculates the width\n         */\n        useEffect(() => {\n            const input = document.getElementById('search_box_input');\n\n            if (input) {\n                setWidth(input.offsetWidth);\n            }\n        }, []);\n\n        useEffect(() => {\n            if (selectedId) {\n                const selectedItem = list.find(({ id }) => id === selectedId);\n\n                if (selectedItem) {\n                    setValue(selectedItem.text);\n                }\n            }\n        }, [list, selectedId]);\n\n        /**\n         * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n         * should not be reset if the list changes and the selectedId is still undefined.\n         */\n        useEffect(() => {\n            if (!selectedId) {\n                setValue('');\n            }\n        }, [selectedId]);\n\n        /**\n         * This function sets the items on focus if shouldShowContentOnEmptyInput\n         */\n        const handleFocus = useCallback(() => {\n            if (shouldShowContentOnEmptyInput) {\n                const newMatchingItems = searchList({ items: list, searchString: value });\n\n                if (newMatchingItems.length === 1 && newMatchingItems[0]?.text === value) {\n                    return;\n                }\n\n                setMatchingItems(newMatchingItems);\n                setIsAnimating(true);\n            }\n        }, [list, shouldShowContentOnEmptyInput, value]);\n\n        useEffect(() => {\n            if (list) {\n                const newMatchingItems = searchList({ items: list, searchString: value });\n\n                if (newMatchingItems.length === 1 && newMatchingItems[0]?.text === value) {\n                    return;\n                }\n\n                if (shouldShowContentOnEmptyInput || value !== '') {\n                    setMatchingItems(newMatchingItems);\n                    setIsAnimating(newMatchingItems.length !== 0);\n                }\n            }\n        }, [list, shouldShowContentOnEmptyInput, value]);\n\n        /**\n         * This function handles changes of the input\n         */\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                const searchedItems = searchList({ items: list, searchString: event.target.value });\n\n                if (\n                    (!shouldShowContentOnEmptyInput && !event.target.value) ||\n                    (searchedItems.length === 1 && searchedItems[0]?.text === event.target.value)\n                ) {\n                    setMatchingItems([]);\n                } else {\n                    setMatchingItems(searchedItems);\n                    setIsAnimating(searchedItems.length !== 0);\n                }\n\n                setValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [list, onChange, shouldShowContentOnEmptyInput],\n        );\n\n        /**\n         * This function handles the blur event of the input\n         */\n        const handleBlur = useCallback(\n            (event: FocusEvent<HTMLInputElement>) => {\n                if (typeof onBlur === 'function') {\n                    onBlur(event);\n                }\n            },\n            [onBlur],\n        );\n\n        /**\n         * This function handles the item selection\n         */\n        const handleSelect = useCallback(\n            (item: ISearchBoxItem) => {\n                setValue(item.text);\n                setIsAnimating(false);\n                setMatchingItems([]);\n\n                if (typeof onSelect === 'function') {\n                    onSelect(item);\n                }\n            },\n            [onSelect],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            matchingItems.sort((a, b) => a.text.localeCompare(b.text));\n\n            matchingItems.forEach(({ id, text, imageUrl }) => {\n                items.push(\n                    <SearchBoxItem\n                        key={id}\n                        text={text}\n                        imageUrl={imageUrl}\n                        id={id}\n                        shouldShowRoundImage={shouldShowRoundImage}\n                        onSelect={handleSelect}\n                    />,\n                );\n            });\n\n            return items;\n        }, [shouldShowRoundImage, handleSelect, matchingItems]);\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n                    const children = contentRef.current?.children;\n                    if (children && children.length > 0) {\n                        const newIndex =\n                            focusedIndex !== null\n                                ? (focusedIndex +\n                                      (e.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 newElement = children[newIndex] as HTMLDivElement;\n                        newElement.tabIndex = 0;\n                        newElement.focus();\n                    }\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    const element = contentRef.current?.children[focusedIndex];\n\n                    if (!element) {\n                        return;\n                    }\n\n                    const { id, textContent } = element;\n\n                    handleSelect({\n                        id: id.replace('search-box-item__', ''),\n                        text: textContent ?? '',\n                    });\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        }, [focusedIndex, handleSelect]);\n\n        const handleKeyPress = useCallback((event: KeyboardEvent) => {\n            if (event.keyCode === 27) {\n                setMatchingItems([]);\n            }\n        }, []);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: () => setValue(''),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            document.addEventListener('keydown', handleKeyPress);\n\n            return () => {\n                document.addEventListener('keydown', handleKeyPress);\n            };\n        }, [handleKeyPress]);\n\n        return useMemo(\n            () => (\n                <StyledSearchBox ref={boxRef}>\n                    <div id=\"search_box_input\">\n                        <Input\n                            ref={inputRef}\n                            onChange={handleChange}\n                            onBlur={handleBlur}\n                            onFocus={handleFocus}\n                            placeholder={placeholder}\n                            value={value}\n                        />\n                    </div>\n                    <AnimatePresence initial={false}>\n                        <StyledMotionSearchBoxBody\n                            $browser={browser?.name}\n                            key=\"content\"\n                            $height={height}\n                            $width={width}\n                            initial={{ height: 0, opacity: 0 }}\n                            animate={\n                                isAnimating\n                                    ? { height: 'fit-content', opacity: 1 }\n                                    : { height: 0, opacity: 0 }\n                            }\n                            transition={{\n                                duration: 0.2,\n                                type: 'tween',\n                            }}\n                        >\n                            <StyledSearchBoxContent ref={contentRef} tabIndex={0}>\n                                {content}\n                            </StyledSearchBoxContent>\n                        </StyledMotionSearchBoxBody>\n                    </AnimatePresence>\n                </StyledSearchBox>\n            ),\n            [\n                browser?.name,\n                content,\n                handleBlur,\n                handleChange,\n                handleFocus,\n                height,\n                isAnimating,\n                placeholder,\n                value,\n                width,\n            ],\n        );\n    },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}

package/lib/components/search-box/SearchBox.styles.d.ts

@@ -271,4 +271,5 @@ export declare const StyledMotionSearchBoxBody: import("styled-components").ISty
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, StyledMotionSearchBoxBodyProps>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledSearchBoxContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>;
 export {};

package/lib/components/search-box/SearchBox.styles.js

@@ -68,4 +68,8 @@ export const StyledMotionSearchBoxBody = styled(motion.div)`
               `;
 }}
 `;
+export const StyledSearchBoxContent = styled.a`
+    text-decoration: none;
+    border: none;
+`;
 //# sourceMappingURL=SearchBox.styles.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.529",
+    "version": "5.0.0-beta.531",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d22c943b66f2edb6b6d3faa6f40763c392f325eb"
+    "gitHead": "dec8e250a7abe900eecdb50e981f6106ef830115"
 }