From aa97adabdff962d9f4d7a97894ec543ad49c30a0 Mon Sep 17 00:00:00 2001
From: Axel Bocciarelli <axelboc@gmail.com>
Date: Tue, 21 May 2024 11:04:51 +0200
Subject: [PATCH] Refactor `OverflowMenu` and `InteractionHelp` with Floating
 UI

---
 apps/storybook/src/Customization.mdx          |  4 +-
 .../lib/src/toolbar/OverflowMenu.module.css   | 24 +----
 packages/lib/src/toolbar/OverflowMenu.tsx     | 93 ++++++++++++-------
 packages/lib/src/toolbar/Toolbar.module.css   | 49 +++++++++-
 .../ColorMapSelector.module.css               |  5 +-
 .../ColorMapSelector/ColorMapSelector.tsx     |  5 +-
 .../DomainWidget/DomainWidget.module.css      | 13 ++-
 .../controls/DomainWidget/DomainWidget.tsx    |  4 +-
 .../lib/src/toolbar/controls/ExportMenu.tsx   | 22 +++--
 .../controls/InteractionHelp.module.css       | 15 ++-
 .../src/toolbar/controls/InteractionHelp.tsx  | 90 ++++++++++++------
 .../ScaleSelector/ScaleOption.module.css      |  4 -
 .../controls/ScaleSelector/ScaleOption.tsx    | 11 ++-
 .../src/toolbar/controls/Selector/Option.tsx  |  4 +-
 .../controls/Selector/Selector.module.css     | 87 ++---------------
 .../toolbar/controls/Selector/Selector.tsx    | 51 +++++-----
 .../src/toolbar/controls/Selector/models.ts   |  5 +-
 packages/lib/src/toolbar/utils.module.css     |  7 --
 18 files changed, 249 insertions(+), 244 deletions(-)
 delete mode 100644 packages/lib/src/toolbar/controls/ScaleSelector/ScaleOption.module.css

diff --git a/apps/storybook/src/Customization.mdx b/apps/storybook/src/Customization.mdx
index 004a3c410..676c8731f 100644
--- a/apps/storybook/src/Customization.mdx
+++ b/apps/storybook/src/Customization.mdx
@@ -135,13 +135,13 @@ as you see fit. For instance, if you'd like to change the color of the curve of
 | `--h5w-btnRaised--shadowColor`        | `gray`                                             | Box shadow color of raised buttons                        |
 | `--h5w-btnRaised-hover--shadowColor`  | `dimgray`                                          | Box shadow color of raised buttons on hover               |
 
-##### Selectors
+##### Selectors & menus
 
 | Name                                        | Default                                      | Description                          |
 | ------------------------------------------- | -------------------------------------------- | ------------------------------------ |
 | `--h5w-selector-label--color`               | `var(--h5w-toolbar-label--color, royalblue)` | Text color of label                  |
-| `--h5w-selector-menu--bgColor`              | `white`                                      | Background color of menu             |
 | `--h5w-selector-arrowIcon--color`           | `dimgray`                                    | Color of arrow icon                  |
+| `--h5w-selector-menu--bgColor`              | `white`                                      | Background color of menus            |
 | `--h5w-selector-option-hover--bgColor`      | `whitesmoke`                                 | Background color of options on hover |
 | `--h5w-selector-option-selected--bgColor`   | `#eee`                                       | Background color of selected option  |
 | `--h5w-selector-option-focus--outlineColor` | `gray`                                       | Outline color of focused option      |
diff --git a/packages/lib/src/toolbar/OverflowMenu.module.css b/packages/lib/src/toolbar/OverflowMenu.module.css
index e94bca2cf..018dc8475 100644
--- a/packages/lib/src/toolbar/OverflowMenu.module.css
+++ b/packages/lib/src/toolbar/OverflowMenu.module.css
@@ -1,26 +1,10 @@
-.root {
-  position: relative;
-  display: flex;
-}
-
-.menu {
+.popup {
   composes: popup from './utils.module.css';
-  right: 0.25rem;
-}
-
-.menuList {
-  composes: popupInner from './utils.module.css';
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 0.25rem;
-  justify-items: flex-start;
-  margin: 0;
-  padding: 0.375rem 0.25rem;
-  list-style-type: none;
+  padding: 0.25rem;
 }
 
-.menu > li {
+.control {
   display: flex;
   justify-content: flex-end;
-  min-height: 2.25rem;
+  min-height: calc(var(--h5w-btn--height, 1.875rem) + 0.5rem);
 }
diff --git a/packages/lib/src/toolbar/OverflowMenu.tsx b/packages/lib/src/toolbar/OverflowMenu.tsx
index 726b61852..942c318fa 100644
--- a/packages/lib/src/toolbar/OverflowMenu.tsx
+++ b/packages/lib/src/toolbar/OverflowMenu.tsx
@@ -1,9 +1,18 @@
-import { useClickOutside, useToggle } from '@react-hookz/web';
+import {
+  autoUpdate,
+  offset,
+  shift,
+  useClick,
+  useFloating,
+  useInteractions,
+} from '@floating-ui/react';
+import { useToggle } from '@react-hookz/web';
 import type { PropsWithChildren } from 'react';
-import { cloneElement, isValidElement, useRef } from 'react';
+import { cloneElement, isValidElement, useId } from 'react';
 import { FiMenu } from 'react-icons/fi';
 import flattenChildren from 'react-keyed-flatten-children';
 
+import { useFloatingDismiss } from './controls/hooks';
 import styles from './OverflowMenu.module.css';
 import Separator from './Separator';
 import toolbarStyles from './Toolbar.module.css';
@@ -14,15 +23,22 @@ function OverflowMenu(props: PropsWithChildren<Props>) {
   const { children } = props;
   const validChildren = flattenChildren(children).filter(isValidElement);
 
-  const rootRef = useRef(null);
-  const [isOverflowMenuOpen, toggleOverflowMenu] = useToggle(false);
+  const [isOpen, toggle] = useToggle();
+  const referenceId = useId();
 
-  useClickOutside(rootRef, () => {
-    if (isOverflowMenuOpen) {
-      toggleOverflowMenu(false);
-    }
+  const { refs, floatingStyles, context } = useFloating<HTMLButtonElement>({
+    open: isOpen,
+    placement: 'bottom-end',
+    middleware: [offset(6), shift({ padding: 6 })],
+    onOpenChange: toggle,
+    whileElementsMounted: autoUpdate,
   });
 
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useClick(context),
+    useFloatingDismiss(context),
+  ]);
+
   if (validChildren.length === 0) {
     return null;
   }
@@ -30,37 +46,44 @@ function OverflowMenu(props: PropsWithChildren<Props>) {
   return (
     <>
       <Separator />
-      <div ref={rootRef} className={styles.root}>
-        <button
-          className={toolbarStyles.btn}
-          type="button"
-          aria-label="More controls"
-          aria-haspopup="menu"
-          aria-controls="more-menu"
-          aria-expanded={isOverflowMenuOpen}
-          onClick={toggleOverflowMenu}
-        >
-          <span className={toolbarStyles.btnLike}>
-            <FiMenu className={toolbarStyles.icon} />
-          </span>
-        </button>
 
+      <button
+        ref={refs.setReference}
+        id={referenceId}
+        className={toolbarStyles.btn}
+        type="button"
+        aria-label="More controls"
+        aria-haspopup="dialog"
+        aria-expanded={isOpen || undefined}
+        aria-controls={(isOpen && context.floatingId) || undefined}
+        {...getReferenceProps()}
+      >
+        <span className={toolbarStyles.btnLike}>
+          <FiMenu className={toolbarStyles.icon} />
+        </span>
+      </button>
+
+      {isOpen && (
         <div
-          id="more-menu"
-          className={styles.menu}
-          role="menu"
-          hidden={!isOverflowMenuOpen}
+          ref={refs.setFloating}
+          id={context.floatingId}
+          className={styles.popup}
+          style={{
+            ...floatingStyles,
+            overflow: 'visible', // don't clip nested floating elements
+          }}
+          role="dialog"
+          aria-labelledby={referenceId}
+          {...getFloatingProps()}
         >
-          <ul className={styles.menuList}>
-            {validChildren.map((child) => (
-              // Render cloned child (React elements don't like to be moved around)
-              <li role="menuitem" key={child.key}>
-                {cloneElement(child)}
-              </li>
-            ))}
-          </ul>
+          {validChildren.map((child) => (
+            // Render cloned child (React elements don't like to be moved around)
+            <div className={styles.control} key={child.key}>
+              {cloneElement(child)}
+            </div>
+          ))}
         </div>
-      </div>
+      )}
     </>
   );
 }
diff --git a/packages/lib/src/toolbar/Toolbar.module.css b/packages/lib/src/toolbar/Toolbar.module.css
index 1e0b3a108..e2b59caec 100644
--- a/packages/lib/src/toolbar/Toolbar.module.css
+++ b/packages/lib/src/toolbar/Toolbar.module.css
@@ -52,10 +52,55 @@
   composes: label from './utils.module.css';
 }
 
+.arrowIcon {
+  align-self: center;
+  margin-top: 1px;
+  margin-left: 1px;
+  margin-right: -0.25rem;
+  color: var(--h5w-selector-arrowIcon--color, dimgray);
+  font-size: 1.25em;
+}
+
+.btn[aria-expanded='true'] .arrowIcon {
+  transform: rotate(180deg);
+}
+
 .popup {
   composes: popup from './utils.module.css';
 }
 
-.popupInner {
-  composes: popupInner from './utils.module.css';
+.menu {
+  display: flex;
+  flex-direction: column;
+  padding: 0.25rem 0;
+  overflow: hidden auto;
+  scrollbar-width: thin;
+  background-color: var(--h5w-selector-menu--bgColor, white);
+  box-shadow:
+    rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,
+    rgba(0, 0, 0, 0.1) 0px 4px 11px;
+}
+
+.btnOption {
+  composes: btnClean from global;
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  line-height: 1.5em; /* same as icon, if any */
+  transition: background-color 0.05s ease-in-out;
+  white-space: nowrap;
+}
+
+.btnOption:hover,
+.btnOption[data-active] {
+  background-color: var(--h5w-selector-option-hover--bgColor, whitesmoke);
+}
+
+.btnOption:focus-visible {
+  outline: 1px solid var(--h5w-selector-option-focus--outlineColor, gray);
+  outline-offset: -1px;
+}
+
+.btnOption[aria-selected] {
+  background-color: var(--h5w-selector-option-selected--bgColor, #eee);
 }
diff --git a/packages/lib/src/toolbar/controls/ColorMapSelector/ColorMapSelector.module.css b/packages/lib/src/toolbar/controls/ColorMapSelector/ColorMapSelector.module.css
index 54b6f7fa0..5a9f860d2 100644
--- a/packages/lib/src/toolbar/controls/ColorMapSelector/ColorMapSelector.module.css
+++ b/packages/lib/src/toolbar/controls/ColorMapSelector/ColorMapSelector.module.css
@@ -1,8 +1,5 @@
-.selectorWrapper {
-  display: flex;
-}
-
 .option {
+  flex: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/packages/lib/src/toolbar/controls/ColorMapSelector/ColorMapSelector.tsx b/packages/lib/src/toolbar/controls/ColorMapSelector/ColorMapSelector.tsx
index 89c358cbb..c0daa44f5 100644
--- a/packages/lib/src/toolbar/controls/ColorMapSelector/ColorMapSelector.tsx
+++ b/packages/lib/src/toolbar/controls/ColorMapSelector/ColorMapSelector.tsx
@@ -4,7 +4,6 @@ import type { ColorMap } from '../../../vis/heatmap/models';
 import Selector from '../Selector/Selector';
 import ToggleBtn from '../ToggleBtn';
 import ColorMapOption from './ColorMapOption';
-import styles from './ColorMapSelector.module.css';
 import { COLORMAP_GROUPS } from './groups';
 
 interface Props {
@@ -18,7 +17,7 @@ function ColorMapSelector(props: Props) {
   const { value, onValueChange, invert, onInversionChange } = props;
 
   return (
-    <div className={styles.selectorWrapper}>
+    <>
       <Selector
         value={value}
         onChange={onValueChange}
@@ -32,7 +31,7 @@ function ColorMapSelector(props: Props) {
         value={invert}
         onToggle={onInversionChange}
       />
-    </div>
+    </>
   );
 }
 
diff --git a/packages/lib/src/toolbar/controls/DomainWidget/DomainWidget.module.css b/packages/lib/src/toolbar/controls/DomainWidget/DomainWidget.module.css
index f2bbd0aea..3f9ec7b42 100644
--- a/packages/lib/src/toolbar/controls/DomainWidget/DomainWidget.module.css
+++ b/packages/lib/src/toolbar/controls/DomainWidget/DomainWidget.module.css
@@ -20,9 +20,12 @@
   opacity: 0.5; /* edit button is itself disabled, so don't fade it more */
 }
 
-.popup {
-  composes: popup from '../../utils.module.css';
-  z-index: 2; /* above overflow and selector menus */
+.popupOuter {
+  position: absolute;
+  z-index: 2; /* above other floating elements (overflow menu, selectors, etc.) */
+  bottom: 1px; /* guarantees overlap with toolbar so the popup doesn't close when the pointer moves into it */
+  padding-top: 6px; /* matches other floating elements */
+  transform: translateY(100%);
   /* Add invisible padding around popup to extend hover area */
   /* (especially for when enabling auto-scaling hides an error message). */
   padding-left: 2rem;
@@ -30,8 +33,8 @@
   padding-bottom: 2rem;
 }
 
-.popupInner {
-  composes: popupInner from '../../utils.module.css';
+.popup {
+  composes: popup from '../../utils.module.css';
   display: flex;
   align-items: center;
   padding: 1rem 0.375rem 1rem 0.75rem;
diff --git a/packages/lib/src/toolbar/controls/DomainWidget/DomainWidget.tsx b/packages/lib/src/toolbar/controls/DomainWidget/DomainWidget.tsx
index 95f4ffde0..34618fd8c 100644
--- a/packages/lib/src/toolbar/controls/DomainWidget/DomainWidget.tsx
+++ b/packages/lib/src/toolbar/controls/DomainWidget/DomainWidget.tsx
@@ -109,12 +109,12 @@ function DomainWidget(props: Props) {
 
       <div
         id={POPUP_ID}
-        className={styles.popup}
+        className={styles.popupOuter}
         role="dialog"
         aria-label="Edit domain"
         hidden={!hovered && !isEditing}
       >
-        <div className={styles.popupInner}>
+        <div className={styles.popup}>
           {histogram && (
             <Histogram
               dataDomain={dataDomain}
diff --git a/packages/lib/src/toolbar/controls/ExportMenu.tsx b/packages/lib/src/toolbar/controls/ExportMenu.tsx
index b5b3e9895..2dfbff19a 100644
--- a/packages/lib/src/toolbar/controls/ExportMenu.tsx
+++ b/packages/lib/src/toolbar/controls/ExportMenu.tsx
@@ -13,8 +13,8 @@ import { useId, useRef, useState } from 'react';
 import { FiDownload } from 'react-icons/fi';
 import { MdArrowDropDown } from 'react-icons/md';
 
+import toolbarStyles from '../Toolbar.module.css';
 import { useFloatingDismiss } from './hooks';
-import styles from './Selector/Selector.module.css';
 import { download, floatingMinWidth } from './utils';
 
 const PLACEMENTS = {
@@ -71,18 +71,20 @@ function ExportMenu(props: Props) {
       <button
         ref={refs.setReference}
         id={referenceId}
-        className={styles.btn}
+        className={toolbarStyles.btn}
         type="button"
         disabled={availableEntries.length === 0}
         aria-haspopup="menu"
         aria-expanded={isOpen || undefined}
-        aria-controls={context.floatingId}
+        aria-controls={(isOpen && context.floatingId) || undefined}
         {...getReferenceProps()}
       >
-        <span className={styles.btnLike}>
-          <FiDownload className={styles.icon} />
-          <span className={styles.label}>Export{isSlice && ' slice'}</span>
-          <MdArrowDropDown className={styles.arrowIcon} />
+        <span className={toolbarStyles.btnLike}>
+          <FiDownload className={toolbarStyles.icon} />
+          <span className={toolbarStyles.label}>
+            Export{isSlice && ' slice'}
+          </span>
+          <MdArrowDropDown className={toolbarStyles.arrowIcon} />
         </span>
       </button>
 
@@ -90,7 +92,7 @@ function ExportMenu(props: Props) {
         <div
           ref={refs.setFloating}
           id={context.floatingId}
-          className={styles.menu}
+          className={toolbarStyles.menu}
           style={floatingStyles}
           role="menu"
           aria-labelledby={referenceId}
@@ -107,7 +109,7 @@ function ExportMenu(props: Props) {
                 ref={(node) => {
                   listRef.current[index] = node;
                 }}
-                className={styles.btnOption}
+                className={toolbarStyles.btnOption}
                 type="button"
                 tabIndex={isActive ? 0 : -1}
                 data-active={isActive || undefined}
@@ -118,7 +120,7 @@ function ExportMenu(props: Props) {
                   },
                 })}
               >
-                <span className={styles.label}>
+                <span className={toolbarStyles.label}>
                   Export to {format.toUpperCase()}
                 </span>
               </button>
diff --git a/packages/lib/src/toolbar/controls/InteractionHelp.module.css b/packages/lib/src/toolbar/controls/InteractionHelp.module.css
index 918f9ec64..6a37c0b8e 100644
--- a/packages/lib/src/toolbar/controls/InteractionHelp.module.css
+++ b/packages/lib/src/toolbar/controls/InteractionHelp.module.css
@@ -1,16 +1,21 @@
+.list {
+  margin: 0;
+  padding: 0.25rem 0.5rem;
+  list-style-type: none;
+}
+
 .entry {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: 0.25rem 0.25rem;
+  padding: 0.375rem 0;
   white-space: nowrap;
 }
 
 .shortcut {
-  background-color: var(--h5w-interactionHelp-shortcut--bgColor, lightgray);
-  color: var(--h5w-interactionHelp-shortcut--color, inherit);
+  margin-left: 1rem;
   padding: 0.25rem;
+  background-color: var(--h5w-interactionHelp-shortcut--bgColor, lightgray);
   border-radius: 0.25rem;
-  flex-grow: 0;
-  margin-left: 1rem;
+  color: var(--h5w-interactionHelp-shortcut--color, inherit);
 }
diff --git a/packages/lib/src/toolbar/controls/InteractionHelp.tsx b/packages/lib/src/toolbar/controls/InteractionHelp.tsx
index 48063a464..6dad031e7 100644
--- a/packages/lib/src/toolbar/controls/InteractionHelp.tsx
+++ b/packages/lib/src/toolbar/controls/InteractionHelp.tsx
@@ -1,11 +1,19 @@
-import { useClickOutside, useToggle } from '@react-hookz/web';
-import { useRef } from 'react';
+import {
+  autoUpdate,
+  offset,
+  shift,
+  useClick,
+  useFloating,
+  useInteractions,
+} from '@floating-ui/react';
+import { useToggle } from '@react-hookz/web';
+import { useId } from 'react';
 import { FiHelpCircle } from 'react-icons/fi';
 
 import type { InteractionInfo } from '../../interactions/models';
-import overflowMenuStyles from '../OverflowMenu.module.css';
+import toolbarStyles from '../Toolbar.module.css';
+import { useFloatingDismiss } from './hooks';
 import styles from './InteractionHelp.module.css';
-import ToggleBtn from './ToggleBtn';
 
 interface Props {
   interactions: InteractionInfo[];
@@ -14,35 +22,61 @@ interface Props {
 function InteractionHelp(props: Props) {
   const { interactions } = props;
 
-  const [isHelpMenuOpen, toggleHelpMenu] = useToggle(false);
-  const rootRef = useRef(null);
+  const [isOpen, toggle] = useToggle();
+  const referenceId = useId();
 
-  useClickOutside(rootRef, () => {
-    if (isHelpMenuOpen) {
-      toggleHelpMenu(false);
-    }
+  const { refs, floatingStyles, context } = useFloating<HTMLButtonElement>({
+    open: isOpen,
+    middleware: [offset(6), shift({ padding: 6 })],
+    onOpenChange: toggle,
+    whileElementsMounted: autoUpdate,
   });
 
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useClick(context),
+    useFloatingDismiss(context),
+  ]);
+
   return (
-    <div className={overflowMenuStyles.root} ref={rootRef}>
-      <ToggleBtn
-        icon={FiHelpCircle}
-        iconOnly
-        onToggle={toggleHelpMenu}
-        label="Show help"
-        value={isHelpMenuOpen}
-      />
-      <div className={overflowMenuStyles.menu} hidden={!isHelpMenuOpen}>
-        <div className={overflowMenuStyles.menuList}>
-          {interactions.map(({ shortcut, description }) => (
-            <li key={shortcut} className={styles.entry}>
-              <span>{description}</span>{' '}
-              <kbd className={styles.shortcut}>{shortcut}</kbd>
-            </li>
-          ))}
+    <>
+      <button
+        ref={refs.setReference}
+        id={referenceId}
+        className={toolbarStyles.btn}
+        type="button"
+        title="Show help"
+        aria-label="Show help"
+        aria-haspopup="dialog"
+        aria-expanded={isOpen || undefined}
+        aria-controls={(isOpen && context.floatingId) || undefined}
+        {...getReferenceProps()}
+      >
+        <span className={toolbarStyles.btnLike}>
+          <FiHelpCircle className={toolbarStyles.icon} />
+        </span>
+      </button>
+
+      {isOpen && (
+        <div
+          ref={refs.setFloating}
+          id={context.floatingId}
+          className={toolbarStyles.popup}
+          style={floatingStyles}
+          role="dialog"
+          aria-labelledby={referenceId}
+          {...getFloatingProps()}
+        >
+          <ul className={styles.list}>
+            {interactions.map(({ shortcut, description }) => (
+              <li key={shortcut} className={styles.entry}>
+                <span>{description}</span>{' '}
+                <kbd className={styles.shortcut}>{shortcut}</kbd>
+              </li>
+            ))}
+          </ul>
         </div>
-      </div>
-    </div>
+      )}
+    </>
   );
 }
 
diff --git a/packages/lib/src/toolbar/controls/ScaleSelector/ScaleOption.module.css b/packages/lib/src/toolbar/controls/ScaleSelector/ScaleOption.module.css
deleted file mode 100644
index 6861fa913..000000000
--- a/packages/lib/src/toolbar/controls/ScaleSelector/ScaleOption.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.option {
-  display: flex;
-  align-items: center;
-}
diff --git a/packages/lib/src/toolbar/controls/ScaleSelector/ScaleOption.tsx b/packages/lib/src/toolbar/controls/ScaleSelector/ScaleOption.tsx
index b0e8581c9..7208d9f5d 100644
--- a/packages/lib/src/toolbar/controls/ScaleSelector/ScaleOption.tsx
+++ b/packages/lib/src/toolbar/controls/ScaleSelector/ScaleOption.tsx
@@ -4,7 +4,6 @@ import { MdFilterList, MdFlare, MdSort } from 'react-icons/md';
 
 import toolbarStyles from '../../Toolbar.module.css';
 import MdGraphicEqRotated from './MdGraphicEqRotated';
-import styles from './ScaleOption.module.css';
 import SqrtIcon from './SqrtIcon';
 
 export const SCALE_OPTIONS = {
@@ -15,15 +14,19 @@ export const SCALE_OPTIONS = {
   [ScaleType.Gamma]: { Icon: MdFlare, label: 'Gamma' },
 } satisfies Record<ScaleType, { Icon: IconType; label: string }>;
 
-function ScaleOption(props: { option: ScaleType }) {
+interface Props {
+  option: ScaleType;
+}
+
+function ScaleOption(props: Props) {
   const { option } = props;
   const { Icon, label } = SCALE_OPTIONS[option];
 
   return (
-    <div className={styles.option}>
+    <>
       <Icon className={toolbarStyles.icon} />
       <span>{label}</span>
-    </div>
+    </>
   );
 }
 
diff --git a/packages/lib/src/toolbar/controls/Selector/Option.tsx b/packages/lib/src/toolbar/controls/Selector/Option.tsx
index fdbbab037..f50fc80b3 100644
--- a/packages/lib/src/toolbar/controls/Selector/Option.tsx
+++ b/packages/lib/src/toolbar/controls/Selector/Option.tsx
@@ -2,7 +2,7 @@ import type { UseInteractionsReturn } from '@floating-ui/react';
 import { useListItem } from '@floating-ui/react';
 import type { PropsWithChildren } from 'react';
 
-import selectorStyles from './Selector.module.css';
+import toolbarStyles from '../../Toolbar.module.css';
 
 interface Props {
   activeIndex: number | null;
@@ -19,7 +19,7 @@ function Option(props: PropsWithChildren<Props>) {
   return (
     <button
       ref={ref}
-      className={selectorStyles.btnOption}
+      className={toolbarStyles.btnOption}
       type="button"
       role="option"
       aria-selected={index === selectedIndex || undefined}
diff --git a/packages/lib/src/toolbar/controls/Selector/Selector.module.css b/packages/lib/src/toolbar/controls/Selector/Selector.module.css
index 02939b35a..a93b9f225 100644
--- a/packages/lib/src/toolbar/controls/Selector/Selector.module.css
+++ b/packages/lib/src/toolbar/controls/Selector/Selector.module.css
@@ -1,8 +1,4 @@
-.root {
-  display: flex;
-}
-
-.selectorLabel {
+.label {
   align-self: center;
   margin-left: 0.25rem;
   color: var(
@@ -11,63 +7,19 @@
   );
 }
 
-.wrapper {
-  position: relative;
-  display: flex;
-}
-
-.btn {
-  composes: btn from '../../utils.module.css';
-}
-
-.btnLike {
-  composes: btnLike from '../../utils.module.css';
-  padding: 0 0.375rem 0 0.5625rem;
-}
-
-.icon {
-  composes: icon from '../../utils.module.css';
-}
-
-.label {
-  composes: label from '../../utils.module.css';
-}
-
-.arrowIcon {
-  align-self: center;
-  margin-top: 1px;
-  margin-left: 1px;
-  color: var(--h5w-selector-arrowIcon--color, dimgray);
-  font-size: 1.25em;
-}
-
-.btn[aria-expanded='true'] .arrowIcon {
-  transform: rotate(180deg);
-}
-
-.menu {
-  display: flex;
-  flex-direction: column;
-  padding: 0.25rem 0;
-  overflow: hidden auto;
-  scrollbar-width: thin;
-  background-color: var(--h5w-selector-menu--bgColor, white);
-  box-shadow:
-    rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,
-    rgba(0, 0, 0, 0.1) 0px 4px 11px;
+.groups {
+  margin: -0.5rem 0 0;
+  padding-left: 0;
+  list-style-type: none;
 }
 
-.list {
+.groups > li {
   display: flex;
   flex-direction: column;
-  margin: 0 0 0.25rem;
-  padding-left: 0;
-  list-style-type: none;
+  padding-top: 1rem;
 }
 
 .groupLabel {
-  display: block;
-  margin-top: 0.75rem;
   margin-bottom: 0.25rem;
   padding-left: 0.75rem;
   color: var(--h5w-selector-groupLabel--color, gray);
@@ -75,28 +27,3 @@
   font-size: 0.75em;
   font-weight: 600;
 }
-
-.selectedOption {
-  flex: 1;
-}
-
-.btnOption {
-  composes: btn from '../../utils.module.css';
-  padding: 0.5rem 0.75rem;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.btnOption:hover,
-.btnOption[data-active] {
-  background-color: var(--h5w-selector-option-hover--bgColor, whitesmoke);
-}
-
-.btnOption:focus-visible {
-  outline: 1px solid var(--h5w-selector-option-focus--outlineColor, gray);
-  outline-offset: -1px;
-}
-
-.btnOption[aria-selected] {
-  background-color: var(--h5w-selector-option-selected--bgColor, #eee);
-}
diff --git a/packages/lib/src/toolbar/controls/Selector/Selector.tsx b/packages/lib/src/toolbar/controls/Selector/Selector.tsx
index ccb5fd47c..4d016163c 100644
--- a/packages/lib/src/toolbar/controls/Selector/Selector.tsx
+++ b/packages/lib/src/toolbar/controls/Selector/Selector.tsx
@@ -13,6 +13,7 @@ import { useToggle } from '@react-hookz/web';
 import { useId, useRef, useState } from 'react';
 import { MdArrowDropDown } from 'react-icons/md';
 
+import toolbarStyles from '../../Toolbar.module.css';
 import { useFloatingDismiss } from '../hooks';
 import { getAllOptions } from '../utils';
 import type { OptionComponent } from './models';
@@ -48,7 +49,7 @@ function Selector<T extends string>(props: Props<T>) {
 
   const labelId = useId();
   const referenceId = useId();
-  const selectedOptionId = useId();
+  const currentOptionId = useId();
   const listRef = useRef<(HTMLButtonElement | null)[]>([]);
 
   const { refs, floatingStyles, context } = useFloating<HTMLButtonElement>({
@@ -91,9 +92,9 @@ function Selector<T extends string>(props: Props<T>) {
   }
 
   return (
-    <div className={styles.root}>
+    <>
       {label && (
-        <span id={labelId} className={styles.selectorLabel}>
+        <span id={labelId} className={styles.label}>
           {label}
         </span>
       )}
@@ -101,21 +102,19 @@ function Selector<T extends string>(props: Props<T>) {
       <button
         ref={refs.setReference}
         id={referenceId}
-        className={styles.btn}
+        className={toolbarStyles.btn}
         type="button"
         disabled={disabled}
         role="combobox"
-        aria-labelledby={`${label ? labelId : ''} ${selectedOptionId}`}
+        aria-labelledby={`${label ? labelId : ''} ${currentOptionId}`}
         aria-haspopup="listbox"
         aria-expanded={isOpen || undefined}
-        aria-controls={context.floatingId}
+        aria-controls={(isOpen && context.floatingId) || undefined}
         {...getReferenceProps()}
       >
-        <span className={styles.btnLike}>
-          <span id={selectedOptionId} className={styles.selectedOption}>
-            <OptionComp option={value} isSelected />
-          </span>
-          <MdArrowDropDown className={styles.arrowIcon} />
+        <span id={currentOptionId} className={toolbarStyles.btnLike}>
+          <OptionComp option={value} />
+          <MdArrowDropDown className={toolbarStyles.arrowIcon} />
         </span>
       </button>
 
@@ -123,7 +122,7 @@ function Selector<T extends string>(props: Props<T>) {
         <div
           ref={refs.setFloating}
           id={context.floatingId}
-          className={styles.menu}
+          className={toolbarStyles.menu}
           style={floatingStyles}
           role="listbox"
           aria-labelledby={referenceId}
@@ -143,23 +142,21 @@ function Selector<T extends string>(props: Props<T>) {
                 </Option>
               ))
             ) : (
-              <ul className={styles.list}>
+              <ul className={styles.groups}>
                 {Object.entries(options).map(([groupLabel, groupOptions]) => (
                   <li key={groupLabel}>
                     <span className={styles.groupLabel}>{groupLabel}</span>
-                    <ul className={styles.list}>
-                      {groupOptions.map((option) => (
-                        <Option
-                          key={option}
-                          activeIndex={activeIndex}
-                          selectedIndex={selectedIndex}
-                          getItemProps={getItemProps}
-                          onSelect={(index) => handleSelect(index, option)}
-                        >
-                          <OptionComp option={option} />
-                        </Option>
-                      ))}
-                    </ul>
+                    {groupOptions.map((option) => (
+                      <Option
+                        key={option}
+                        activeIndex={activeIndex}
+                        selectedIndex={selectedIndex}
+                        getItemProps={getItemProps}
+                        onSelect={(index) => handleSelect(index, option)}
+                      >
+                        <OptionComp option={option} />
+                      </Option>
+                    ))}
                   </li>
                 ))}
               </ul>
@@ -167,7 +164,7 @@ function Selector<T extends string>(props: Props<T>) {
           </FloatingList>
         </div>
       )}
-    </div>
+    </>
   );
 }
 
diff --git a/packages/lib/src/toolbar/controls/Selector/models.ts b/packages/lib/src/toolbar/controls/Selector/models.ts
index e87f6886d..a0f170f28 100644
--- a/packages/lib/src/toolbar/controls/Selector/models.ts
+++ b/packages/lib/src/toolbar/controls/Selector/models.ts
@@ -1,6 +1,3 @@
 import type { ReactElement } from 'react';
 
-export type OptionComponent<T> = (props: {
-  option: T;
-  isSelected?: boolean;
-}) => ReactElement;
+export type OptionComponent<T> = (props: { option: T }) => ReactElement;
diff --git a/packages/lib/src/toolbar/utils.module.css b/packages/lib/src/toolbar/utils.module.css
index ff9fefaeb..3064315f3 100644
--- a/packages/lib/src/toolbar/utils.module.css
+++ b/packages/lib/src/toolbar/utils.module.css
@@ -97,13 +97,6 @@ a.btn {
 }
 
 .popup {
-  position: absolute;
-  bottom: 1px; /* guarantees overlap with toolbar for hover-only popup */
-  padding-top: calc(0.375rem + 1px);
-  transform: translateY(100%);
-}
-
-.popupInner {
   background-color: var(--h5w-toolbar-popup--bgColor, rgba(255, 255, 255, 0.9));
   box-shadow:
     rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,