From 696ffb1ebb295e626d4a719e3f5f8619c0e892ac Mon Sep 17 00:00:00 2001
From: Axel Bocciarelli <axelboc@gmail.com>
Date: Tue, 21 May 2024 16:33:39 +0200
Subject: [PATCH 1/3] Re-use `Btn` component for menus and popovers

---
 packages/lib/src/toolbar/OverflowMenu.tsx     | 23 +++++++------------
 packages/lib/src/toolbar/controls/Btn.tsx     | 21 +++++++++--------
 .../lib/src/toolbar/controls/ExportMenu.tsx   | 21 ++++++-----------
 .../src/toolbar/controls/InteractionHelp.tsx  | 18 ++++++---------
 .../toolbar/controls/Selector/Selector.tsx    |  2 +-
 5 files changed, 35 insertions(+), 50 deletions(-)

diff --git a/packages/lib/src/toolbar/OverflowMenu.tsx b/packages/lib/src/toolbar/OverflowMenu.tsx
index 942c318fa..57122d8a7 100644
--- a/packages/lib/src/toolbar/OverflowMenu.tsx
+++ b/packages/lib/src/toolbar/OverflowMenu.tsx
@@ -12,10 +12,10 @@ import { cloneElement, isValidElement, useId } from 'react';
 import { FiMenu } from 'react-icons/fi';
 import flattenChildren from 'react-keyed-flatten-children';
 
+import Btn from './controls/Btn';
 import { useFloatingDismiss } from './controls/hooks';
 import styles from './OverflowMenu.module.css';
 import Separator from './Separator';
-import toolbarStyles from './Toolbar.module.css';
 
 interface Props {}
 
@@ -47,31 +47,24 @@ function OverflowMenu(props: PropsWithChildren<Props>) {
     <>
       <Separator />
 
-      <button
+      <Btn
         ref={refs.setReference}
         id={referenceId}
-        className={toolbarStyles.btn}
-        type="button"
-        aria-label="More controls"
+        label="More controls"
+        icon={FiMenu}
+        iconOnly
         aria-haspopup="dialog"
-        aria-expanded={isOpen || undefined}
+        aria-expanded={isOpen}
         aria-controls={(isOpen && context.floatingId) || undefined}
         {...getReferenceProps()}
-      >
-        <span className={toolbarStyles.btnLike}>
-          <FiMenu className={toolbarStyles.icon} />
-        </span>
-      </button>
+      />
 
       {isOpen && (
         <div
           ref={refs.setFloating}
           id={context.floatingId}
           className={styles.popup}
-          style={{
-            ...floatingStyles,
-            overflow: 'visible', // don't clip nested floating elements
-          }}
+          style={floatingStyles}
           role="dialog"
           aria-labelledby={referenceId}
           {...getFloatingProps()}
diff --git a/packages/lib/src/toolbar/controls/Btn.tsx b/packages/lib/src/toolbar/controls/Btn.tsx
index 2f4c5b113..6d0f5381c 100644
--- a/packages/lib/src/toolbar/controls/Btn.tsx
+++ b/packages/lib/src/toolbar/controls/Btn.tsx
@@ -1,31 +1,34 @@
-import type { AriaAttributes, ComponentType, SVGAttributes } from 'react';
+import type { ComponentType, HTMLAttributes, SVGAttributes } from 'react';
+import { forwardRef } from 'react';
+import { MdArrowDropDown } from 'react-icons/md';
 
 import styles from '../Toolbar.module.css';
 
-interface Props extends AriaAttributes {
+interface Props extends HTMLAttributes<HTMLButtonElement> {
   label: string;
   icon?: ComponentType<SVGAttributes<SVGElement>>;
   iconOnly?: boolean;
   small?: boolean;
   raised?: boolean;
-  onClick: () => void;
+  withArrow?: boolean;
   disabled?: boolean;
 }
 
-function Btn(props: Props) {
+const Btn = forwardRef<HTMLButtonElement, Props>((props, ref) => {
   const {
     label,
     icon: Icon,
     iconOnly,
     small,
     raised,
+    withArrow,
     disabled,
-    onClick,
-    ...ariaAttrs
+    ...btnProps
   } = props;
 
   return (
     <button
+      ref={ref}
       className={styles.btn}
       type="button"
       title={iconOnly ? label : undefined}
@@ -33,16 +36,16 @@ function Btn(props: Props) {
       disabled={disabled}
       data-small={small || undefined}
       data-raised={raised || undefined}
-      onClick={() => onClick()}
-      {...ariaAttrs}
+      {...btnProps}
     >
       <span className={styles.btnLike}>
         {Icon && <Icon className={styles.icon} />}
         {!iconOnly && <span className={styles.label}>{label}</span>}
+        {withArrow && <MdArrowDropDown className={styles.arrowIcon} />}
       </span>
     </button>
   );
-}
+});
 
 export type { Props as BtnProps };
 export default Btn;
diff --git a/packages/lib/src/toolbar/controls/ExportMenu.tsx b/packages/lib/src/toolbar/controls/ExportMenu.tsx
index 2dfbff19a..ea1f15381 100644
--- a/packages/lib/src/toolbar/controls/ExportMenu.tsx
+++ b/packages/lib/src/toolbar/controls/ExportMenu.tsx
@@ -11,9 +11,9 @@ import { assertDefined } from '@h5web/shared/guards';
 import { useToggle } from '@react-hookz/web';
 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 Btn from './Btn';
 import { useFloatingDismiss } from './hooks';
 import { download, floatingMinWidth } from './utils';
 
@@ -68,25 +68,18 @@ function ExportMenu(props: Props) {
 
   return (
     <>
-      <button
+      <Btn
         ref={refs.setReference}
         id={referenceId}
-        className={toolbarStyles.btn}
-        type="button"
+        label={`Export${isSlice ? ' slice' : ''}`}
+        icon={FiDownload}
+        withArrow
         disabled={availableEntries.length === 0}
         aria-haspopup="menu"
-        aria-expanded={isOpen || undefined}
+        aria-expanded={isOpen}
         aria-controls={(isOpen && context.floatingId) || undefined}
         {...getReferenceProps()}
-      >
-        <span className={toolbarStyles.btnLike}>
-          <FiDownload className={toolbarStyles.icon} />
-          <span className={toolbarStyles.label}>
-            Export{isSlice && ' slice'}
-          </span>
-          <MdArrowDropDown className={toolbarStyles.arrowIcon} />
-        </span>
-      </button>
+      />
 
       {isOpen && (
         <div
diff --git a/packages/lib/src/toolbar/controls/InteractionHelp.tsx b/packages/lib/src/toolbar/controls/InteractionHelp.tsx
index 6dad031e7..a152a61ca 100644
--- a/packages/lib/src/toolbar/controls/InteractionHelp.tsx
+++ b/packages/lib/src/toolbar/controls/InteractionHelp.tsx
@@ -12,6 +12,7 @@ import { FiHelpCircle } from 'react-icons/fi';
 
 import type { InteractionInfo } from '../../interactions/models';
 import toolbarStyles from '../Toolbar.module.css';
+import Btn from './Btn';
 import { useFloatingDismiss } from './hooks';
 import styles from './InteractionHelp.module.css';
 
@@ -39,22 +40,17 @@ function InteractionHelp(props: Props) {
 
   return (
     <>
-      <button
+      <Btn
         ref={refs.setReference}
         id={referenceId}
-        className={toolbarStyles.btn}
-        type="button"
-        title="Show help"
-        aria-label="Show help"
+        label="Show help"
+        icon={FiHelpCircle}
+        iconOnly
         aria-haspopup="dialog"
-        aria-expanded={isOpen || undefined}
+        aria-expanded={isOpen}
         aria-controls={(isOpen && context.floatingId) || undefined}
         {...getReferenceProps()}
-      >
-        <span className={toolbarStyles.btnLike}>
-          <FiHelpCircle className={toolbarStyles.icon} />
-        </span>
-      </button>
+      />
 
       {isOpen && (
         <div
diff --git a/packages/lib/src/toolbar/controls/Selector/Selector.tsx b/packages/lib/src/toolbar/controls/Selector/Selector.tsx
index 4ff791f5d..e715c5903 100644
--- a/packages/lib/src/toolbar/controls/Selector/Selector.tsx
+++ b/packages/lib/src/toolbar/controls/Selector/Selector.tsx
@@ -101,7 +101,7 @@ function Selector<T extends string>(props: Props<T>) {
         role="combobox"
         aria-labelledby={`${label ? labelId : ''} ${currentOptionId}`}
         aria-haspopup="listbox"
-        aria-expanded={isOpen || undefined}
+        aria-expanded={isOpen}
         aria-controls={(isOpen && context.floatingId) || undefined}
         {...getReferenceProps()}
       >

From 345f8e8f645eea19f79985a1a7a4aae53f763280 Mon Sep 17 00:00:00 2001
From: Axel Bocciarelli <axelboc@gmail.com>
Date: Wed, 22 May 2024 13:11:22 +0200
Subject: [PATCH 2/3] Remove deprecated toggler components

---
 packages/lib/src/index.ts                     |  4 ---
 .../src/toolbar/controls/FlipYAxisToggler.tsx | 26 -------------------
 .../lib/src/toolbar/controls/GridToggler.tsx  | 21 ---------------
 3 files changed, 51 deletions(-)
 delete mode 100644 packages/lib/src/toolbar/controls/FlipYAxisToggler.tsx
 delete mode 100644 packages/lib/src/toolbar/controls/GridToggler.tsx

diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts
index 360fdfafc..55b7cc3dc 100644
--- a/packages/lib/src/index.ts
+++ b/packages/lib/src/index.ts
@@ -224,7 +224,3 @@ export { default as SurfaceVis } from './vis/surface/SurfaceVis';
 export type { SurfaceVisProps } from './vis/surface/SurfaceVis';
 export { default as SurfaceMeshGeometry } from './vis/surface/surfaceMeshGeometry';
 export { default as R3FCanvas } from './vis/shared/R3FCanvas';
-
-// Deprecated
-export { default as GridToggler } from './toolbar/controls/GridToggler';
-export { default as FlipYAxisToggler } from './toolbar/controls/FlipYAxisToggler';
diff --git a/packages/lib/src/toolbar/controls/FlipYAxisToggler.tsx b/packages/lib/src/toolbar/controls/FlipYAxisToggler.tsx
deleted file mode 100644
index 054a6b23c..000000000
--- a/packages/lib/src/toolbar/controls/FlipYAxisToggler.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { MdSwapVert } from 'react-icons/md';
-
-import ToggleBtn from './ToggleBtn';
-
-interface Props {
-  value: boolean;
-  onToggle: () => void;
-}
-
-/**
- * @deprecated Use `ToggleBtn` directly instead
- */
-function FlipYAxisToggler(props: Props) {
-  const { value, onToggle } = props;
-
-  return (
-    <ToggleBtn
-      label="Flip Y"
-      icon={MdSwapVert}
-      value={value}
-      onToggle={onToggle}
-    />
-  );
-}
-
-export default FlipYAxisToggler;
diff --git a/packages/lib/src/toolbar/controls/GridToggler.tsx b/packages/lib/src/toolbar/controls/GridToggler.tsx
deleted file mode 100644
index 20243b915..000000000
--- a/packages/lib/src/toolbar/controls/GridToggler.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { MdGridOn } from 'react-icons/md';
-
-import ToggleBtn from './ToggleBtn';
-
-interface Props {
-  value: boolean;
-  onToggle: () => void;
-}
-
-/**
- * @deprecated Use `ToggleBtn` directly instead
- */
-function GridToggler(props: Props) {
-  const { value, onToggle } = props;
-
-  return (
-    <ToggleBtn label="Grid" icon={MdGridOn} value={value} onToggle={onToggle} />
-  );
-}
-
-export default GridToggler;

From 4394f86758ae6fbb060685d4bd60a50f58b716e5 Mon Sep 17 00:00:00 2001
From: Axel Bocciarelli <axelboc@gmail.com>
Date: Wed, 22 May 2024 13:11:59 +0200
Subject: [PATCH 3/3] Remove `align` prop of `ExportMenu`

---
 packages/lib/src/toolbar/controls/ExportMenu.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/lib/src/toolbar/controls/ExportMenu.tsx b/packages/lib/src/toolbar/controls/ExportMenu.tsx
index ea1f15381..3a812d07f 100644
--- a/packages/lib/src/toolbar/controls/ExportMenu.tsx
+++ b/packages/lib/src/toolbar/controls/ExportMenu.tsx
@@ -17,12 +17,6 @@ import Btn from './Btn';
 import { useFloatingDismiss } from './hooks';
 import { download, floatingMinWidth } from './utils';
 
-const PLACEMENTS = {
-  center: 'bottom',
-  left: 'bottom-start',
-  right: 'bottom-end',
-} as const;
-
 interface ExportEntry {
   format: string;
   url: URL | (() => Promise<URL | Blob>) | undefined;
@@ -31,11 +25,10 @@ interface ExportEntry {
 interface Props {
   entries: ExportEntry[];
   isSlice?: boolean;
-  align?: keyof typeof PLACEMENTS;
 }
 
 function ExportMenu(props: Props) {
-  const { entries, isSlice, align = 'center' } = props;
+  const { entries, isSlice } = props;
   const availableEntries = entries.filter(({ url }) => !!url);
 
   const [isOpen, toggle] = useToggle();
@@ -46,7 +39,6 @@ function ExportMenu(props: Props) {
 
   const { refs, floatingStyles, context } = useFloating<HTMLButtonElement>({
     open: isOpen,
-    placement: PLACEMENTS[align],
     middleware: [floatingMinWidth, offset(6), shift({ padding: 6 })],
     onOpenChange: toggle,
     whileElementsMounted: autoUpdate,