diff --git a/index.html b/index.html
new file mode 100644
index 00000000..6e7737ad
--- /dev/null
+++ b/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+ The GOAT of web apps
+
+
+
+
+
+
diff --git a/src/components/VersionSelector/styled.elements.ts b/src/components/VersionSelector/styled.elements.ts
index ee5c29fd..89207209 100644
--- a/src/components/VersionSelector/styled.elements.ts
+++ b/src/components/VersionSelector/styled.elements.ts
@@ -137,7 +137,7 @@ export const StyledLi = styled.li.attrs<{
role: 'option',
'aria-selected': selected,
tabIndex: '0',
-}))<{ selected: boolean; disabled?: boolean }>`
+}))<{ selected: boolean; disabled?: boolean; focused?: boolean }>`
display: flex;
width: 100%;
outline: none;
@@ -147,7 +147,10 @@ export const StyledLi = styled.li.attrs<{
padding: 8px 12px;
cursor: pointer;
color: ${palette.gray.dark3};
-
+ ${props =>
+ props.focused &&
+ `color: ${palette.blue.dark2};
+ background-color: ${palette.blue.light3};`}
font-weight: ${props => (props.selected ? `bold` : `normal`)};
&:before {
@@ -162,6 +165,13 @@ export const StyledLi = styled.li.attrs<{
border-radius: 0px 4px 4px 0px;
opacity: 0;
transition: all ${transitionDuration.default}ms ease-in-out;
+ ${props =>
+ props.focused &&
+ `
+ opacity: 1;
+ transform: scaleY(1);
+ background-color: ${palette.blue.base};
+ `}
}
${props => (props.disabled ? disabledOptionStyle : enabledOptionStyle)}
diff --git a/src/components/VersionSelector/use-outside-click copy.tsx b/src/components/VersionSelector/use-outside-click copy.tsx
new file mode 100644
index 00000000..665f3720
--- /dev/null
+++ b/src/components/VersionSelector/use-outside-click copy.tsx
@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+
+/**
+ * Hook that fires event on clicks outside of the passed ref
+ */
+export function useOutsideKeypress(ref, callback) {
+ useEffect(() => {
+ function handleClickOutside(event) {
+ if (ref.current && !ref.current.contains(event.target)) {
+ callback();
+ }
+ }
+ // Bind the event listener
+ document.addEventListener('keypress', handleClickOutside);
+ return () => {
+ // Unbind the event listener on clean up
+ document.removeEventListener('keypress', handleClickOutside);
+ };
+ }, [ref, callback]);
+}
diff --git a/src/reactStartup.tsx b/src/reactStartup.tsx
new file mode 100644
index 00000000..5461a9af
--- /dev/null
+++ b/src/reactStartup.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { render } from 'react-dom';
+import { VersionSelector } from './components/VersionSelector';
+
+render(
+
+
Hi there
+
+ ,
+ document.getElementById('home'),
+);
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..0466183a
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+ plugins: [react()],
+});