Merge pull request #1893 from silx-kit/abstract-menu

Add generic `Menu` component

Author: axelboc

apps/storybook/src/LineAspectMenu.stories.tsx

@@ -0,0 +1,25 @@
+import { Menu } from '@h5web/lib';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { MdIcecream } from 'react-icons/md';
+
+const meta = {
+  title: 'Toolbar/Menu',
+  component: Menu,
+} satisfies Meta<typeof Menu>;
+
+export default meta;
+type Story = StoryObj<typeof Menu>;
+
+export const Default = {
+  render: (args) => {
+    return (
+      <Menu {...args}>
+        <div style={{ padding: '0.25rem 0.5rem' }}>Radio group, etc.</div>
+      </Menu>
+    );
+  },
+  args: {
+    label: 'Icecream',
+    Icon: MdIcecream,
+  },
+} satisfies Story;

apps/storybook/src/Menu.stories.tsx

@@ -1,8 +1,11 @@
 import {
   ComplexVisTypeSelector,
+  CurveType,
   DomainWidget,
   ExportMenu,
-  LineAspectMenu,
+  Interpolation,
+  Menu,
+  RadioGroup,
   ScaleSelector,
   Separator,
   ToggleBtn,
@@ -14,9 +17,9 @@ import {
   type ExportEntry,
 } from '@h5web/shared/vis-models';
 import { AXIS_SCALE_TYPES } from '@h5web/shared/vis-utils';
-import { MdGridOn } from 'react-icons/md';
+import { MdAutoGraph, MdGridOn } from 'react-icons/md';
 
-import { INTERACTIONS_WITH_AXIAL_ZOOM } from '../utils';
+import { CURVE_TYPE_LABELS, INTERACTIONS_WITH_AXIAL_ZOOM } from '../utils';
 import { type LineConfig } from './config';
 import ErrorsIcon from './ErrorsIcon';
 
@@ -111,12 +114,23 @@ function LineToolbar(props: Props) {
         onToggle={toggleGrid}
       />
 
-      <LineAspectMenu
-        curveType={curveType}
-        onCurveTypeChanged={setCurveType}
-        interpolation={interpolation}
-        onInterpolationChanged={setInterpolation}
-      />
+      <Menu label="Aspect" Icon={MdAutoGraph}>
+        <RadioGroup
+          name="curvetype"
+          value={curveType}
+          options={Object.values(CurveType)}
+          optionsLabels={CURVE_TYPE_LABELS}
+          onValueChanged={setCurveType}
+        />
+        <RadioGroup
+          name="interpolation"
+          label="Interpolation"
+          options={Object.values(Interpolation)}
+          disabled={curveType === CurveType.GlyphsOnly}
+          value={interpolation}
+          onValueChanged={setInterpolation}
+        />
+      </Menu>
 
       {exportEntries && exportEntries.length > 0 && (
         <>

packages/app/src/vis-packs/core/line/LineToolbar.tsx

@@ -1,4 +1,8 @@
-import { type DimensionMapping, type InteractionInfo } from '@h5web/lib';
+import {
+  CurveType,
+  type DimensionMapping,
+  type InteractionInfo,
+} from '@h5web/lib';
 import {
   isBigIntTypedArray,
   isIntegerType,
@@ -29,6 +33,12 @@ export const INTERACTIONS_WITH_AXIAL_ZOOM = [
   { shortcut: 'Ctrl+Shift+Drag', description: 'Select to zoom in Y' },
 ];
 
+export const CURVE_TYPE_LABELS: Record<CurveType, string> = {
+  [CurveType.LineOnly]: 'Line',
+  [CurveType.GlyphsOnly]: 'Points',
+  [CurveType.LineAndGlyphs]: 'Both',
+};
+
 export function getBaseArray<T extends ArrayValue | undefined>(
   value: T,
   rawDims: number[],

packages/app/src/vis-packs/core/utils.ts

@@ -16,6 +16,7 @@ export { default as LinkBtn } from './toolbar/controls/LinkBtn';
 export { default as ToggleBtn } from './toolbar/controls/ToggleBtn';
 export { default as ToggleGroup } from './toolbar/controls/ToggleGroup/ToggleGroup';
 export { default as RadioGroup } from './toolbar/controls/RadioGroup';
+export { default as Menu } from './toolbar/controls/Menu';
 export { default as DomainWidget } from './toolbar/controls/DomainWidget/DomainWidget';
 export { default as DomainSlider } from './toolbar/controls/DomainWidget/DomainSlider';
 export { default as DomainControls } from './toolbar/controls/DomainWidget/DomainControls';
@@ -27,7 +28,6 @@ export { default as Selector } from './toolbar/controls/Selector/Selector';
 export { default as InteractionHelp } from './toolbar/controls/InteractionHelp';
 export { default as NotationToggleGroup } from './toolbar/controls/NotationToggleGroup';
 export { default as Histogram } from './toolbar/controls/Histogram/Histogram';
-export { default as LineAspectMenu } from './toolbar/controls/LineAspectMenu';
 export type { ToolbarProps } from './toolbar/Toolbar';
 export type { DomainWidgetProps } from './toolbar/controls/DomainWidget/DomainWidget';
 export type { DomainSliderProps } from './toolbar/controls/DomainWidget/DomainSlider';

packages/lib/src/index.ts

@@ -0,0 +1,57 @@
+import { useClick, useInteractions } from '@floating-ui/react';
+import { type ComponentType, type PropsWithChildren, useId } from 'react';
+
+import toolbarStyles from '../Toolbar.module.css';
+import Btn from './Btn';
+import { useFloatingDismiss, useFloatingMenu } from './hooks';
+
+interface Props {
+  label: string;
+  Icon?: ComponentType<{ className: string }>;
+}
+
+function Menu(props: PropsWithChildren<Props>) {
+  const { label, Icon, children } = props;
+
+  const { context, refs, floatingStyles } = useFloatingMenu();
+  const { floatingId, open: isOpen } = context;
+
+  const referenceId = useId();
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useClick(context),
+    useFloatingDismiss(context),
+  ]);
+
+  return (
+    <>
+      <Btn
+        ref={refs.setReference}
+        id={referenceId}
+        label={label}
+        Icon={Icon}
+        withArrow
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+        aria-controls={(isOpen && floatingId) || undefined}
+        {...getReferenceProps()}
+      />
+
+      {isOpen && (
+        <div
+          ref={refs.setFloating}
+          id={floatingId}
+          className={toolbarStyles.menu}
+          style={floatingStyles}
+          role="menu"
+          aria-labelledby={referenceId}
+          {...getFloatingProps()}
+        >
+          {children}
+        </div>
+      )}
+    </>
+  );
+}
+
+export default Menu;