Align select menu with context menu styles

aws · Feb 3, 2025 · fc887f6 · fc887f6
1 parent 8850d8f
commit fc887f6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 106 deletions.
diff --git a/packages/graph-explorer/src/components/Select/Select.styles.ts b/packages/graph-explorer/src/components/Select/Select.styles.ts
@@ -210,64 +210,6 @@ export const selectContainerStyles =
     `;
   };
 
-const listStyles = () => css`
-  max-height: 300px;
-  overflow: auto;
-  list-style: none;
-  padding: 0;
-  margin: 2px 0;
-  outline: none;
-`;
-
-const listItemStyles = () => (activeTheme: ActiveThemeType) => {
-  const themeWithDefault = getSelectThemeWithDefaults(
-    activeTheme,
-    "valid"
-  )("default");
-
-  const { theme } = activeTheme;
-  return css`
-    background: ${themeWithDefault.list?.item?.background};
-    color: ${themeWithDefault.list?.item?.color};
-    padding: 8px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    outline: none;
-
-    &:focus:not(.select-list-item-selected),
-    &.select-list-item-focused {
-      background: ${themeWithDefault.list?.item?.hover?.background};
-      color: ${themeWithDefault.list?.item?.hover?.color};
-    }
-
-    &:hover {
-      background: ${themeWithDefault.list?.item?.hover?.background};
-      color: ${themeWithDefault.list?.item?.hover?.color};
-    }
-
-    &.select-list-item-selected {
-      background: ${themeWithDefault.list?.item?.selected?.background};
-      color: ${themeWithDefault.list?.item?.selected?.color};
-      &:hover {
-        background: ${themeWithDefault.list?.item?.selected?.background};
-        color: ${themeWithDefault.list?.item?.selected?.color};
-      }
-    }
-
-    &.select-list-item-disabled {
-      pointer-events: none;
-      filter: opacity(${theme.forms?.disabledOpacity || "40%"});
-    }
-  `;
-};
-
-const itemStyles = () => css`
-  display: flex;
-  align-items: center;
-  width: 100%;
-`;
-
 const searchInputStyles = (activeTheme: ActiveThemeType) => {
   const themeWithDefault = getSelectThemeWithDefaults(
     activeTheme,
@@ -279,22 +221,6 @@ const searchInputStyles = (activeTheme: ActiveThemeType) => {
   `;
 };
 
-const popoverWrapperStyles = (activeTheme: ActiveThemeType) => {
-  const themeWithDefault = getSelectThemeWithDefaults(
-    activeTheme,
-    "valid"
-  )("default");
-
-  return css`
-    position: absolute;
-    z-index: ${activeTheme.theme.zIndex.menu};
-    width: 100%;
-    border: 1px solid ${themeWithDefault.list?.borderColor};
-    border-radius: ${themeWithDefault.list?.borderRadius};
-    background: ${themeWithDefault.list?.background};
-  `;
-};
-
 const multipleSelectedValuesWrapper = ({ theme }: ActiveThemeType) => css`
   display: flex;
   gap: ${theme.spacing.base};
@@ -305,11 +231,7 @@ const multipleSelectedValuesWrapper = ({ theme }: ActiveThemeType) => css`
 
 const styles = {
   selectContainerStyles,
-  listStyles,
-  listItemStyles,
-  itemStyles,
   searchInputStyles,
-  popoverWrapperStyles,
   multipleSelectedValuesWrapper,
 };
 

diff --git a/packages/graph-explorer/src/components/Select/internalComponents/ListBox.tsx b/packages/graph-explorer/src/components/Select/internalComponents/ListBox.tsx
@@ -5,8 +5,8 @@ import type { ListState } from "@react-stately/list";
 import type { Node } from "@react-types/shared";
 import type { ForwardedRef, RefObject } from "react";
 import { forwardRef, useRef } from "react";
-import { useWithTheme } from "@/core";
-import styles from "../Select.styles";
+import ListItem from "@/components/ListItem";
+import { CheckIcon } from "lucide-react";
 
 interface OptionProps<T> {
   item: Node<T>;
@@ -21,8 +21,6 @@ const ListBox = forwardRef(
   <T,>(props: ListBoxProps<T>, ref: ForwardedRef<HTMLUListElement | null>) => {
     const { state } = props;
 
-    const styleWithTheme = useWithTheme();
-
     const { listBoxProps } = useListBox(
       props,
       state,
@@ -31,7 +29,9 @@ const ListBox = forwardRef(
 
     return (
       <ul
-        className={styleWithTheme(styles.listStyles)}
+        className={cn(
+          "max-h-[300px] list-none overflow-auto p-0 p-1 outline-none"
+        )}
         {...listBoxProps}
         ref={ref}
       >
@@ -44,12 +44,11 @@ const ListBox = forwardRef(
 );
 
 const OptionItem = <T,>({ item, state }: OptionProps<T>) => {
-  const ref = useRef<HTMLLIElement>(null);
+  const ref = useRef<HTMLDivElement>(null);
 
   const itemDisabled = state.disabledKeys.has(item.key);
-  const styleWithTheme = useWithTheme();
 
-  const { optionProps, isSelected, isFocused, isDisabled } = useOption(
+  const { optionProps, isSelected, isDisabled } = useOption(
     {
       isDisabled: itemDisabled,
       key: item.key,
@@ -60,25 +59,17 @@ const OptionItem = <T,>({ item, state }: OptionProps<T>) => {
   );
 
   return (
-    <li
+    <ListItem
+      ref={ref}
       className={cn(
-        styleWithTheme(styles.listItemStyles()),
-        "select-list-item-wrapper",
-        {
-          ["select-list-item-disabled"]: isDisabled,
-          ["select-list-item-selected"]: isSelected,
-          ["select-list-item-focused"]: isFocused,
-        }
+        "focus:bg-background-secondary flex flex-row justify-between outline-none",
+        isDisabled && "pointer-events-none opacity-50"
       )}
       {...optionProps}
-      ref={ref}
     >
-      <div
-        className={cn(styleWithTheme(styles.itemStyles), "select-list-item")}
-      >
-        {item.rendered}
-      </div>
-    </li>
+      {item.rendered}
+      {isSelected ? <CheckIcon className="text-text-primary size-5" /> : null}
+    </ListItem>
   );
 };
 

diff --git a/packages/graph-explorer/src/components/Select/internalComponents/SelectPopover.tsx b/packages/graph-explorer/src/components/Select/internalComponents/SelectPopover.tsx
@@ -3,8 +3,6 @@ import { DismissButton, useOverlay } from "@react-aria/overlays";
 import type { CSSProperties, ForwardedRef, RefObject } from "react";
 import { forwardRef } from "react";
 import type { Styles } from "react-laag/dist/types";
-import { useWithTheme } from "@/core";
-import popoverStyles from "../Select.styles";
 import { cn } from "@/utils";
 
 interface PopoverProps {
@@ -20,7 +18,6 @@ const SelectPopover = (
   ref: ForwardedRef<HTMLDivElement>
 ) => {
   const { onClose, children, style, menuStyleOverride } = props;
-  const styleWithTheme = useWithTheme();
 
   // Handle events that should cause the popup to close,
   // e.g. blur, clicking outside, or pressing the escape key.
@@ -39,8 +36,7 @@ const SelectPopover = (
     <FocusScope autoFocus>
       <div
         className={cn(
-          styleWithTheme(popoverStyles.popoverWrapperStyles),
-          "shadow-md"
+          "z-menu bg-background-default absolute w-full rounded-md border shadow-md"
         )}
         {...overlayProps}
         style={{ ...style, ...menuStyleOverride }}