react-cheminfo 0.11.0 → 0.12.0

package/src/chart/ui/ChartSeriesMarks.tsx

@@ -11,6 +11,7 @@ import type { ReactElement } from 'react';
 
 import type { ChartBand } from '../core/chartBand.ts';
 import type { ChartScale } from '../core/chartScale.ts';
+import { chartRoundPixel } from '../core/chartScale.ts';
 
 import type { ChartSeries } from './TrackedLineChart.tsx';
 
@@ -48,7 +49,7 @@ export function ChartSeriesMarks(props: ChartSeriesMarksProps): ReactElement {
   const muted = item.muted === true;
   const grounded = item.kind === 'bar';
   const lanes = Math.max(1, lane.count);
-  const wide = round(band.bandWidth / lanes);
+  const wide = chartRoundPixel(band.bandWidth / lanes);
   const shift = band.bandWidth * ((lane.index + 0.5) / lanes - 0.5);
   const rects: ReactElement[] = [];
   let path = '';
@@ -62,13 +63,13 @@ export function ChartSeriesMarks(props: ChartSeriesMarksProps): ReactElement {
     const x = band.offset + band.step * (index + 0.5);
     const at = y.offset + value * y.factor;
     if (!grounded) {
-      path += `${pen}${round(x)} ${round(at)}`;
+      path += `${pen}${chartRoundPixel(x)} ${chartRoundPixel(at)}`;
       pen = 'L';
       continue;
     }
-    const near = round(x + shift - band.bandWidth / lanes / 2);
-    const high = round(Math.min(at, y.offset));
-    const tall = round(Math.abs(at - y.offset));
+    const near = chartRoundPixel(x + shift - band.bandWidth / lanes / 2);
+    const high = chartRoundPixel(Math.min(at, y.offset));
+    const tall = chartRoundPixel(Math.abs(at - y.offset));
     rects.push(
       <rect key={index} x={near} y={high} width={wide} height={tall} />,
     );
@@ -94,5 +95,3 @@ export function ChartSeriesMarks(props: ChartSeriesMarksProps): ReactElement {
 
 /** What a series drawn on its own is told, which is that it has the slot. */
 const SOLE_LANE = { index: 0, count: 1 } as const;
-
-const round = (value: number): number => Math.round(value * 100) / 100;

package/src/chart/ui/ChartTrackingLayer.tsx

@@ -12,6 +12,7 @@ import type { ChartAxisScale } from '../core/chartAxisScale.ts';
 import type { ChartBand } from '../core/chartBand.ts';
 import { chartBandCenter, chartBandIndexAt } from '../core/chartBand.ts';
 import type { ChartScale } from '../core/chartScale.ts';
+import { chartRoundPixel } from '../core/chartScale.ts';
 
 import { ChartAxis } from './ChartAxis.tsx';
 import type { ChartPlotArea } from './ChartFrame.tsx';
@@ -159,7 +160,7 @@ function markers(
   for (const item of series) {
     const value = item.values[slot];
     if (value === undefined || !Number.isFinite(value)) continue;
-    const cy = round(y.offset + value * y.factor);
+    const cy = chartRoundPixel(y.offset + value * y.factor);
     dots.push(
       <circle key={item.id} cx={at} cy={cy} r={3.5} fill={item.color} />,
     );
@@ -188,5 +189,3 @@ const CROSSHAIR_STYLE = {
   strokeWidth: 1,
   strokeDasharray: '3 3',
 } as const satisfies CSSProperties;
-
-const round = (value: number): number => Math.round(value * 100) / 100;

package/src/chart/ui/TrackedLineChart.tsx

@@ -25,7 +25,7 @@ export type ChartSeriesKind = 'line' | 'bar';
 export interface ChartSeries {
   /** A stable id, used as the React key and named in the tracking callback. */
   id: string;
-  /** What the legend calls it, e.g. `PC 1`. */
+  /** What the legend calls it, e.g. `PC1`. */
   label: string;
   /** One value per slot, in the slots' order. */
   values: ArrayLike<number>;
@@ -142,6 +142,11 @@ export interface TrackedLineChartProps {
    * @default undefined
    */
   testId?: string;
+  /**
+   * Class names added to the root element, after the component's own.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -155,7 +160,16 @@ export interface TrackedLineChartProps {
  * @returns The chart.
  */
 export function TrackedLineChart(props: TrackedLineChartProps): ReactElement {
-  const { categories, series, width, height, y, trackedIndex, xLabel } = props;
+  const {
+    className,
+    categories,
+    series,
+    width,
+    height,
+    y,
+    trackedIndex,
+    xLabel,
+  } = props;
   const { onTrack, onSelect, overlay, label, testId, maxTickLabels } = props;
   const { tickLabels = categories } = props;
   const [ownIndex, setOwnIndex] = useState<number | null>(null);
@@ -187,6 +201,7 @@ export function TrackedLineChart(props: TrackedLineChartProps): ReactElement {
       margins={margins}
       label={label}
       testId={testId}
+      className={className}
       x={{ domain: [0, slots], showTicks: false, showGrid: false, nice: false }}
       y={{ ...y, domain }}
       overlay={

package/src/chart/ui/TrackedStickChart.tsx

@@ -36,8 +36,6 @@ import {
   valueAt,
 } from './stickChartModel.ts';
 
-export type { ChartStickSeries } from './stickChartModel.ts';
-
 /** What {@link TrackedStickChart} needs. */
 export interface TrackedStickChartProps {
   /**
@@ -91,6 +89,11 @@ export interface TrackedStickChartProps {
    * @default undefined
    */
   testId?: string;
+  /**
+   * Class names added to the root element, after the component's own.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -99,7 +102,8 @@ export interface TrackedStickChartProps {
  * @returns The chart.
  */
 export function TrackedStickChart(props: TrackedStickChartProps): ReactElement {
-  const { positions, categories, series, width, height, y, xLabel } = props;
+  const { className, positions, categories, series, width, height, y, xLabel } =
+    props;
   const { onTrack, label, overlay, testId, trackedIndex } = props;
   const [ownIndex, setOwnIndex] = useState<number | null>(null);
   const held = trackedIndex === undefined ? ownIndex : trackedIndex;
@@ -144,6 +148,7 @@ export function TrackedStickChart(props: TrackedStickChartProps): ReactElement {
       height={height}
       label={label}
       testId={testId}
+      className={className}
       overlay={overlay}
       x={{ domain: across, label: xLabel, showGrid: false }}
       y={{ ...y, domain }}

package/src/chart/ui/chartFrameGeometry.ts

@@ -0,0 +1,53 @@
+import { chartAxisScale } from '../core/chartAxisScale.ts';
+import { chartScale } from '../core/chartScale.ts';
+
+import type {
+  ChartAxisSpec,
+  ChartFrameRender,
+  ChartMargins,
+} from './ChartFrame.tsx';
+import { chartOuterRoom, chartPlotArea } from './chartStyles.ts';
+
+/**
+ * Where a `ChartFrame` puts its plot, and how it maps data into it,
+ * worked out without drawing anything.
+ *
+ * A figure that needs its points in pixels before it renders — to hand a hit
+ * test its positions, which a hook cannot read from inside the frame's render
+ * callback — calls this once and passes the result to the frame as `geometry`.
+ * The frame and the figure then read one answer rather than two that could
+ * drift apart.
+ * @param width - Total width of the figure, in pixels.
+ * @param height - Total height.
+ * @param x - The horizontal axis, as the frame is given it.
+ * @param y - The vertical axis.
+ * @param margins - Room the caller insists on, merged over what the axes ask for.
+ * @returns The plot rectangle, the two data-to-pixel mappings and the two niced axes.
+ */
+export function chartFrameGeometry(
+  width: number,
+  height: number,
+  x: ChartAxisSpec,
+  y: ChartAxisSpec,
+  margins: Partial<ChartMargins> = {},
+): ChartFrameRender {
+  const xAxis = chartAxisScale(x.domain[0], x.domain[1], {
+    count: x.tickCount,
+    nice: x.nice,
+  });
+  const yAxis = chartAxisScale(y.domain[0], y.domain[1], {
+    count: y.tickCount,
+    nice: y.nice,
+  });
+  const plot = chartPlotArea(width, height, margins, {
+    bottom: chartOuterRoom('bottom', x, xAxis),
+    left: chartOuterRoom('left', y, yAxis),
+  });
+  return {
+    plot,
+    x: chartScale(xAxis.domain[0], xAxis.domain[1], plot.left, plot.right),
+    y: chartScale(yAxis.domain[0], yAxis.domain[1], plot.bottom, plot.top),
+    xAxis,
+    yAxis,
+  };
+}

package/src/chart/ui/index.ts

@@ -16,6 +16,7 @@ export type {
   ChartPlotArea,
 } from './ChartFrame.tsx';
 export { ChartFrame } from './ChartFrame.tsx';
+export { chartFrameGeometry } from './chartFrameGeometry.ts';
 export type { ChartSeriesMarksProps } from './ChartSeriesMarks.tsx';
 export { ChartSeriesMarks } from './ChartSeriesMarks.tsx';
 export type { ChartTrackingLayerProps } from './ChartTrackingLayer.tsx';
@@ -27,8 +28,6 @@ export type {
   TrackedLineChartProps,
 } from './TrackedLineChart.tsx';
 export { TrackedLineChart } from './TrackedLineChart.tsx';
-export type {
-  ChartStickSeries,
-  TrackedStickChartProps,
-} from './TrackedStickChart.tsx';
+export type { ChartStickSeries } from './stickChartModel.ts';
+export type { TrackedStickChartProps } from './TrackedStickChart.tsx';
 export { TrackedStickChart } from './TrackedStickChart.tsx';

package/src/chart/ui/stickChartModel.ts

@@ -14,12 +14,13 @@ import {
   chartValuesExtent,
 } from '../core/chartExtent.ts';
 import type { ChartScale } from '../core/chartScale.ts';
+import { chartRoundPixel } from '../core/chartScale.ts';
 
 /** One set of sticks. */
 export interface ChartStickSeries {
   /** A stable id, used as the React key and named in the tracking callback. */
   id: string;
-  /** What the legend calls it, e.g. `PC 1`. */
+  /** What the legend calls it, e.g. `PC1`. */
   label: string;
   /** Where each stick ends, one value per measurement. */
   values: ArrayLike<number>;
@@ -45,7 +46,7 @@ export interface ChartStickSeries {
   muted?: boolean;
 }
 /** What the geometry needs of a drawn frame: the two scales and the rectangle. */
-export interface StickFrame {
+interface StickFrame {
   /** The rectangle to draw in. */
   plot: { top: number; bottom: number; left: number; right: number };
   /** Data to pixels, horizontally. */
@@ -75,8 +76,8 @@ export function stickPath(
     if (at === undefined || value === undefined || !Number.isFinite(value)) {
       continue;
     }
-    const pixelX = round(x.offset + at * x.factor);
-    const top = round(y.offset + value * y.factor);
+    const pixelX = chartRoundPixel(x.offset + at * x.factor, 1);
+    const top = chartRoundPixel(y.offset + value * y.factor, 1);
     const start = item.from === undefined ? foot : startOf(item, index, y);
     if (start === null || !Number.isFinite(top)) continue;
     path += `M${pixelX} ${start}V${top}`;
@@ -98,23 +99,7 @@ function startOf(
 ): number | null {
   const value = item.from?.[index];
   if (value === undefined || !Number.isFinite(value)) return null;
-  return round(y.offset + value * y.factor);
-}
-
-/**
- * Where zero sits, which is what a stick stands on.
- *
- * The frame rules the plot at zero itself whenever the domain crosses it, so
- * this only says where a stick's foot goes and never draws anything.
- * @param frame - The rectangle and the two scales.
- * @returns The pixel, clamped into the plot so a domain above zero still has a
- * foot to stand on.
- */
-export function zeroAt(frame: StickFrame): number {
-  const { plot, y } = frame;
-  const at = y.offset;
-  if (!Number.isFinite(at)) return plot.bottom;
-  return round(Math.min(plot.bottom, Math.max(plot.top, at)));
+  return chartRoundPixel(y.offset + value * y.factor, 1);
 }
 
 /**
@@ -196,6 +181,18 @@ export function valueAt(scale: ChartScale, pixel: number): number {
     : (pixel - scale.offset) / scale.factor;
 }
 
-function round(pixel: number): number {
-  return Math.round(pixel * 10) / 10;
+/**
+ * Where zero sits, which is what a stick stands on.
+ *
+ * The frame rules the plot at zero itself whenever the domain crosses it, so
+ * this only says where a stick's foot goes and never draws anything.
+ * @param frame - The rectangle and the two scales.
+ * @returns The pixel, clamped into the plot so a domain above zero still has a
+ * foot to stand on.
+ */
+function zeroAt(frame: StickFrame): number {
+  const { plot, y } = frame;
+  const at = y.offset;
+  if (!Number.isFinite(at)) return plot.bottom;
+  return chartRoundPixel(Math.min(plot.bottom, Math.max(plot.top, at)), 1);
 }

package/src/chart/ui/useWheelZoom.ts

@@ -3,6 +3,9 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import { CHART_WHEEL_SPEED, chartWheelFactor } from '../core/chartViewport.ts';
 
+import type { WheelDwellEvent } from './wheelDwell.ts';
+import { WHEEL_DWELL_IDLE, wheelDwellStep, wheelShare } from './wheelDwell.ts';
+
 /** How long the pointer rests on a chart before its wheel is caught, in ms. */
 export const CHART_WHEEL_DWELL = 500;
 
@@ -63,7 +66,8 @@ export interface WheelZoomApi<T extends Element> {
  * their scroll, however slowly they pass over it — and the momentum a trackpad
  * keeps sending after the fingers lift holds it off for exactly as long as it
  * lasts. A reader who came to look at the picture has already rested on it by
- * the time they reach for the wheel, and pays nothing.
+ * the time they reach for the wheel, and pays nothing. The rules themselves
+ * are in `wheelDwell`; this hook carries them out.
  *
  * The listener is attached by hand rather than through `onWheel`, because
  * React registers that one on the root as passive: `preventDefault` inside a
@@ -83,7 +87,6 @@ export function useWheelZoom<T extends Element>(
   } = options;
 
   const ref = useRef<T | null>(null);
-  const armedRef = useRef(false);
   const [armed, setArmed] = useState(false);
 
   // Held in a ref so the inline arrow every caller writes does not tear the
@@ -98,32 +101,34 @@ export function useWheelZoom<T extends Element>(
     if (target === null || !enabled) return undefined;
 
     let timer: ReturnType<typeof setTimeout> | null = null;
-    function arm(state: boolean): void {
-      armedRef.current = state;
-      setArmed(state);
-    }
-    function rest(): void {
-      if (timer !== null) clearTimeout(timer);
-      timer = setTimeout(() => {
+    let dwell = WHEEL_DWELL_IDLE;
+    function apply(event: WheelDwellEvent): boolean {
+      const step = wheelDwellStep(dwell, event);
+      if (step.timer !== 'keep' && timer !== null) {
+        clearTimeout(timer);
         timer = null;
-        arm(true);
-      }, delay);
-    }
-    function forget(): void {
-      if (timer !== null) clearTimeout(timer);
-      timer = null;
-      arm(false);
+      }
+      if (step.timer === 'restart') {
+        timer = setTimeout(() => {
+          timer = null;
+          apply({ type: 'elapsed' });
+        }, delay);
+      }
+      if (step.state.armed !== dwell.armed) setArmed(step.state.armed);
+      dwell = step.state;
+      return step.zoom;
     }
     function enter(): void {
-      if (!armedRef.current) rest();
+      apply({ type: 'enter' });
     }
     // A pointer already resting over the plot when this was attached — a panel
     // that has just been resized under it — never sends an enter event, so the
-    // dwell also starts on the first move that finds nothing pending. It must
-    // be the first: restarting it on every move would ask the reader to hold
-    // the pointer perfectly still, which is not what resting means.
+    // dwell also starts on a move.
     function move(): void {
-      if (!armedRef.current && timer === null) rest();
+      apply({ type: 'move' });
+    }
+    function forget(): void {
+      apply({ type: 'leave' });
     }
     // An arrow rather than a declaration, and typed as the plain `Event` the
     // element's own listener map hands it: a hoisted function would be told
@@ -131,19 +136,12 @@ export function useWheelZoom<T extends Element>(
     // the guard above.
     const wheel = (event: Event): void => {
       if (!(event instanceof WheelEvent)) return;
-      // A wheel with a button down belongs to the drag that claimed the
-      // pointer: moving the ground under a lasso would leave the outline
-      // pointing at rows nobody drew a ring around.
-      if (event.buttons !== 0) return;
-      if (!armedRef.current) {
-        rest();
-        return;
-      }
+      if (!apply({ type: 'wheel', buttons: event.buttons })) return;
       event.preventDefault();
       const box = target.getBoundingClientRect();
       zoom.current(
-        share(event.clientX - box.left, box.width),
-        share(event.clientY - box.top, box.height),
+        wheelShare(event.clientX - box.left, box.width),
+        wheelShare(event.clientY - box.top, box.height),
         chartWheelFactor(event.deltaY, event.deltaMode, speed),
       );
     };
@@ -163,15 +161,3 @@ export function useWheelZoom<T extends Element>(
 
   return { ref, armed: enabled && armed };
 }
-
-/**
- * How far along a side a position sits, from 0 to 1.
- * @param position - The position, in pixels from the near edge.
- * @param size - The side's length.
- * @returns The share. The middle of an element with no size, which is the only
- * place a pointer can be said to be on one.
- */
-function share(position: number, size: number): number {
-  if (!(size > 0) || !Number.isFinite(position)) return 0.5;
-  return Math.min(1, Math.max(0, position / size));
-}

package/src/chart/ui/wheelDwell.ts

@@ -0,0 +1,123 @@
+/**
+ * When a chart's wheel is caught, worked out without a timer or a DOM.
+ *
+ * Kept out of `useWheelZoom` the way `lassoGesture` is kept out of the lasso:
+ * which event arms the wheel, which one pushes the dwell out and which one is
+ * a zoom are questions with one answer each, and the hook only has to carry
+ * the answers out — start or stop a timer, stop the page from scrolling.
+ */
+
+/** Whether a chart's wheel is caught yet, and whether a dwell is counting. */
+export interface WheelDwellState {
+  /** Whether the wheel zooms the chart rather than scrolling the page. */
+  armed: boolean;
+  /** Whether a dwell timer is running. */
+  counting: boolean;
+}
+
+/** Something that happened over the plot's surface. */
+export type WheelDwellEvent =
+  /** The pointer came onto the surface. */
+  | { type: 'enter' }
+  /** The pointer moved over it. */
+  | { type: 'move' }
+  /** The pointer left it. */
+  | { type: 'leave' }
+  /** The dwell timer ran out. */
+  | { type: 'elapsed' }
+  /** The wheel turned, with the mouse buttons held down at the time. */
+  | { type: 'wheel'; buttons: number };
+
+/** What one event leaves the hook to do. */
+export interface WheelDwellStep {
+  /** The state after the event. */
+  state: WheelDwellState;
+  /**
+   * What happens to the dwell timer: `restart` stops any timer running and
+   * starts a new one, `clear` stops it, `keep` leaves it as it is.
+   */
+  timer: 'restart' | 'clear' | 'keep';
+  /** Whether the event is a wheel the chart zooms by, and keeps from the page. */
+  zoom: boolean;
+}
+
+/** Nothing armed and nothing counting: a pointer that has not rested yet. */
+export const WHEEL_DWELL_IDLE: WheelDwellState = {
+  armed: false,
+  counting: false,
+};
+
+/**
+ * The next state of a chart's wheel.
+ *
+ * A pointer resting over the plot starts the dwell, and every wheel event that
+ * arrives before it is up both scrolls the page and starts it again. A move
+ * starts it only when nothing is counting: restarting it on every move would
+ * ask the reader to hold the pointer perfectly still, which is not what
+ * resting means. A wheel with a button down belongs to the drag that claimed
+ * the pointer, so it neither zooms nor pushes the dwell out: moving the ground
+ * under a lasso would leave the outline pointing at rows nobody drew a ring
+ * around.
+ * @param state - Where the wheel stands before the event.
+ * @param event - What happened.
+ * @returns The new state, and what the hook has to do about it.
+ */
+export function wheelDwellStep(
+  state: WheelDwellState,
+  event: WheelDwellEvent,
+): WheelDwellStep {
+  switch (event.type) {
+    case 'enter':
+      return state.armed ? keep(state) : restart(state);
+    case 'move':
+      return state.armed || state.counting ? keep(state) : restart(state);
+    case 'leave':
+      return { state: WHEEL_DWELL_IDLE, timer: 'clear', zoom: false };
+    case 'elapsed':
+      return {
+        state: { armed: true, counting: false },
+        timer: 'keep',
+        zoom: false,
+      };
+    case 'wheel':
+      if (event.buttons !== 0) return keep(state);
+      if (!state.armed) return restart(state);
+      return { state, timer: 'keep', zoom: true };
+    default:
+      return keep(state);
+  }
+}
+
+/**
+ * How far along a side a position sits, from 0 to 1.
+ * @param position - The position, in pixels from the near edge.
+ * @param size - The side's length.
+ * @returns The share. The middle of an element with no size, which is the only
+ * place a pointer can be said to be on one.
+ */
+export function wheelShare(position: number, size: number): number {
+  if (!(size > 0) || !Number.isFinite(position)) return 0.5;
+  return Math.min(1, Math.max(0, position / size));
+}
+
+/**
+ * An event that changes nothing.
+ * @param state - The state, handed back as it is.
+ * @returns The step.
+ */
+function keep(state: WheelDwellState): WheelDwellStep {
+  return { state, timer: 'keep', zoom: false };
+}
+
+/**
+ * An event that starts the dwell over.
+ * @param state - The state before it.
+ * @returns The step.
+ */
+function restart(state: WheelDwellState): WheelDwellStep {
+  return {
+    state: { armed: state.armed, counting: true },
+    timer: 'restart',
+    zoom: false,
+  };
+}

package/src/chrome/ui/NavLink.tsx

@@ -30,10 +30,18 @@ export interface NavLinkProps {
  */
 export function NavLink(props: NavLinkProps): ReactElement {
   const { item, active = false, className } = props;
-  const { href, external = false, onSelect, title, disabled = false } = item;
+  const {
+    href,
+    external = false,
+    onSelect,
+    title,
+    disabled = false,
+    icon,
+  } = item;
 
   const classes = [
     'nav-link',
+    icon === undefined ? null : 'nav-link--icon',
     active ? 'nav-link--active' : null,
     disabled ? 'nav-link--disabled' : null,
     className ?? null,
@@ -80,10 +88,18 @@ export function NavLink(props: NavLinkProps): ReactElement {
 function NavLinkBody(props: { item: NavItem }): ReactNode {
   const { icon, label, after } = props.item;
 
+  // Only an entry with a glyph can give up its label in a narrow bar, so only
+  // then is the label wrapped where the stylesheet can reach it.
   return (
     <>
-      {icon === undefined ? null : <Icon icon={icon} size={14} />}
-      {label}
+      {icon === undefined ? (
+        label
+      ) : (
+        <>
+          <Icon icon={icon} size={14} />
+          <span className="nav-link__label">{label}</span>
+        </>
+      )}
       {after}
     </>
   );

package/src/chrome/ui/NavMenuButton.tsx

@@ -26,6 +26,12 @@ export interface NavMenuButtonProps {
    * @default 'bottom-start'
    */
   placement?: PopoverNextProps['placement'];
+  /**
+   * Whether the trigger is reduced to its glyph, for a bar that has run out of
+   * room. The label is still what the pointer and a screen reader are told.
+   * @default false
+   */
+  compact?: boolean;
   /**
    * What the menu adds under the pages — a divider and an action, typically.
    * @default undefined
@@ -48,10 +54,18 @@ export function NavMenuButton(props: NavMenuButtonProps): ReactElement {
     activeId,
     icon,
     placement = 'bottom-start',
+    compact = false,
     children,
   } = props;
 
   const holdsActive = items.some((item) => item.id === activeId);
+  const classes = [
+    'nav-link',
+    icon === undefined ? null : 'nav-link--icon',
+    holdsActive ? 'nav-link--active' : null,
+  ]
+    .filter((part) => part !== null)
+    .join(' ');
 
   return (
     <PopoverNext
@@ -83,12 +97,19 @@ export function NavMenuButton(props: NavMenuButtonProps): ReactElement {
     >
       <button
         type="button"
-        className={holdsActive ? 'nav-link nav-link--active' : 'nav-link'}
+        className={classes}
         aria-label={label}
+        title={compact ? label : undefined}
       >
-        {icon === undefined ? null : <Icon icon={icon} size={14} />}
-        {label}
-        <Icon icon="caret-down" size={14} />
+        {icon === undefined ? (
+          label
+        ) : (
+          <>
+            <Icon icon={icon} size={14} />
+            {compact ? null : <span className="nav-link__label">{label}</span>}
+          </>
+        )}
+        {compact ? null : <Icon icon="caret-down" size={14} />}
       </button>
     </PopoverNext>
   );