Clean up toolbar deprecations

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';

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()}

packages/lib/src/toolbar/controls/Btn.tsx

@@ -1,48 +1,51 @@
-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}
       aria-label={iconOnly ? label : undefined}
       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;

packages/lib/src/toolbar/controls/ExportMenu.tsx

@@ -11,18 +11,12 @@ 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';
 
-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,
@@ -68,25 +60,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

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

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()}
       >