From 59cb690e3f72dc53ca28d4d390d15808c0d98e4e Mon Sep 17 00:00:00 2001
From: yami <mienaiyami0@gmail.com>
Date: Mon, 28 Aug 2023 01:01:59 +0530
Subject: [PATCH] added keyboard ctrl for theme link button

---
 src/renderer/Components/Element/MenuList.tsx | 213 ++++++++++---------
 src/renderer/Components/Settings.tsx         |   7 +
 src/renderer/styles/index.scss               |   1 +
 3 files changed, 119 insertions(+), 102 deletions(-)

diff --git a/src/renderer/Components/Element/MenuList.tsx b/src/renderer/Components/Element/MenuList.tsx
index be5db18..55f75ac 100644
--- a/src/renderer/Components/Element/MenuList.tsx
+++ b/src/renderer/Components/Element/MenuList.tsx
@@ -1,5 +1,8 @@
 import React, { useRef, useState, useEffect, useLayoutEffect, useContext } from "react";
 import { AppContext } from "../../App";
+
+import FocusLock from "react-focus-lock";
+
 // ! not indented to be used without `AppContext::optSelectData`
 //todo rename later for select only
 const MenuList = () => {
@@ -74,117 +77,123 @@ const MenuList = () => {
     };
     return (
         optSelectData && (
-            <div
-                className="itemList"
-                tabIndex={-1}
-                onBlur={(e) => {
+            <FocusLock
+                onDeactivation={() => {
                     optSelectData.focusBackElem && optSelectData.focusBackElem.focus();
-                    optSelectData.onBlur && optSelectData.onBlur(e);
-                }}
-                onClick={onClick}
-                onContextMenu={onClick}
-                onWheel={(e) => {
-                    e.stopPropagation();
-                }}
-                ref={ref}
-                style={{
-                    left: pos.x,
-                    top: pos.y,
-                    // display: display ? "block" : "none",
-                    "--min-width": pos.width === 0 ? "fit-content" : pos.width + "px",
-                    visibility: optSelectData.items.length > 0 ? "visible" : "hidden",
                 }}
-                onKeyDown={(e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    if (
-                        (e.ctrlKey && e.key === "/") ||
-                        (e.shiftKey && e.key === "F10") ||
-                        e.key === "ContextMenu"
-                    ) {
-                        e.currentTarget.blur();
-                        return;
-                    }
-                    if (e.key.length === 1 && /^[\w]/i.test(e.key)) {
-                        if (ref.current) {
-                            const elems = [...ref.current.querySelectorAll("li")];
-                            let i = focused;
-                            i = elems.findIndex(
-                                (elem, i2) =>
-                                    i < i2 &&
-                                    elem.innerText.length > 0 &&
-                                    elem.innerText[0].toLowerCase() === e.key.toLowerCase()
-                            );
-                            if (i < 0) {
+            >
+                <div
+                    className="itemList"
+                    tabIndex={-1}
+                    onBlur={(e) => {
+                        // optSelectData.focusBackElem && optSelectData.focusBackElem.focus();
+                        optSelectData.onBlur && optSelectData.onBlur(e);
+                    }}
+                    onClick={onClick}
+                    onContextMenu={onClick}
+                    onWheel={(e) => {
+                        e.stopPropagation();
+                    }}
+                    ref={ref}
+                    style={{
+                        left: pos.x,
+                        top: pos.y,
+                        // display: display ? "block" : "none",
+                        "--min-width": pos.width === 0 ? "fit-content" : pos.width + "px",
+                        visibility: optSelectData.items.length > 0 ? "visible" : "hidden",
+                    }}
+                    onKeyDown={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        if (
+                            (e.ctrlKey && e.key === "/") ||
+                            (e.shiftKey && e.key === "F10") ||
+                            e.key === "ContextMenu"
+                        ) {
+                            e.currentTarget.blur();
+                            return;
+                        }
+                        if (e.key.length === 1 && /^[\w]/i.test(e.key)) {
+                            if (ref.current) {
+                                const elems = [...ref.current.querySelectorAll("li")];
+                                let i = focused;
                                 i = elems.findIndex(
-                                    (elem) =>
+                                    (elem, i2) =>
+                                        i < i2 &&
                                         elem.innerText.length > 0 &&
                                         elem.innerText[0].toLowerCase() === e.key.toLowerCase()
                                 );
+                                if (i < 0) {
+                                    i = elems.findIndex(
+                                        (elem) =>
+                                            elem.innerText.length > 0 &&
+                                            elem.innerText[0].toLowerCase() === e.key.toLowerCase()
+                                    );
+                                }
+                                if (i >= 0) setFocused(i);
+                                return;
                             }
-                            if (i >= 0) setFocused(i);
-                            return;
                         }
-                    }
-                    switch (e.key) {
-                        case "Escape":
-                            e.currentTarget.blur();
-                            break;
-                        case "ArrowDown":
-                        case "ArrowRight":
-                            setFocused((init) => {
-                                if (init + 1 >= optSelectData.items.length) return 0;
-                                return init + 1;
-                            });
-                            break;
-                        case "ArrowUp":
-                        case "ArrowLeft":
-                            setFocused((init) => {
-                                if (init - 1 < 0) return optSelectData.items.length - 1;
-                                return init - 1;
-                            });
-                            break;
-                        case "Enter":
-                        case " ": {
-                            const elem = ref.current?.querySelector(
-                                '[data-focused="true"]'
-                            ) as HTMLLIElement | null;
-                            if (elem && !elem.classList.contains("disabled")) elem.click();
-                            break;
+                        switch (e.key) {
+                            case "Escape":
+                                e.currentTarget.blur();
+                                break;
+                            case "ArrowDown":
+                            case "ArrowRight":
+                                setFocused((init) => {
+                                    if (init + 1 >= optSelectData.items.length) return 0;
+                                    return init + 1;
+                                });
+                                break;
+                            case "ArrowUp":
+                            case "ArrowLeft":
+                                setFocused((init) => {
+                                    if (init - 1 < 0) return optSelectData.items.length - 1;
+                                    return init - 1;
+                                });
+                                break;
+                            case "Enter":
+                            case " ": {
+                                const elem = ref.current?.querySelector(
+                                    '[data-focused="true"]'
+                                ) as HTMLLIElement | null;
+                                if (elem && !elem.classList.contains("disabled")) elem.click();
+                                break;
+                            }
+                            default:
+                                break;
                         }
-                        default:
-                            break;
-                    }
-                }}
-            >
-                <ul>
-                    {optSelectData.items.map((e, i) => (
-                        <li
-                            role="menuitem"
-                            key={e.label}
-                            onClick={e.action}
-                            onContextMenu={e.action}
-                            style={e.style}
-                            ref={(node) => {
-                                if (node && i === focused)
-                                    node.scrollIntoView({ behavior: "instant", block: "nearest" });
-                            }}
-                            data-focused={i === focused}
-                            onMouseEnter={() => {
-                                setFocused(i);
-                            }}
-                            data-default-selected={e.selected}
-                            // onMouseLeave={() => {
-                            //     setFocused(-1);
-                            // }}
-                            // className={`${e.selected ? "selected " : ""}`}
-                        >
-                            <span>{e.selected ? "•" : ""}</span>
-                            {e.label}
-                        </li>
-                    ))}
-                </ul>
-            </div>
+                    }}
+                >
+                    <ul>
+                        {optSelectData.items.map((e, i) => (
+                            <li
+                                role="menuitem"
+                                key={e.label}
+                                onClick={e.action}
+                                onContextMenu={e.action}
+                                style={e.style}
+                                ref={(node) => {
+                                    if (node && i === focused)
+                                        node.scrollIntoView({ behavior: "instant", block: "nearest" });
+                                }}
+                                data-focused={i === focused}
+                                onMouseEnter={() => {
+                                    setFocused(i);
+                                }}
+                                data-default-selected={e.selected}
+                                // onMouseLeave={() => {
+                                //     setFocused(-1);
+                                // }}
+                                // className={`${e.selected ? "selected " : ""}`}
+                            >
+                                <span>{e.selected ? "•" : ""}</span>
+                                {e.label}
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            </FocusLock>
         )
     );
 };
diff --git a/src/renderer/Components/Settings.tsx b/src/renderer/Components/Settings.tsx
index 7ca0c31..d3db5de 100644
--- a/src/renderer/Components/Settings.tsx
+++ b/src/renderer/Components/Settings.tsx
@@ -89,6 +89,13 @@ const ThemeElement = ({
                 <label
                     className={`${variable === `var(${prop})` ? "disabled" : ""} ${checked ? "selected" : ""}`}
                     title="Link to variable"
+                    onKeyDown={(e) => {
+                        if ([" ", "Enter"].includes(e.key)) {
+                            e.preventDefault();
+                            e.currentTarget.click();
+                        }
+                    }}
+                    tabIndex={0}
                 >
                     <input
                         type="checkbox"
diff --git a/src/renderer/styles/index.scss b/src/renderer/styles/index.scss
index bad3ba0..602cbb9 100644
--- a/src/renderer/styles/index.scss
+++ b/src/renderer/styles/index.scss
@@ -219,6 +219,7 @@ body {
         &:focus,
         &:active {
             box-shadow: var(--btn-color-focus) 0 0 0px 2px;
+            outline: transparent;
         }
         &.disabled {
             opacity: 0.5;