zds-pickers 4.2.1 → 4.4.0

package/dist/index.js

@@ -2,6 +2,7 @@ export * from './utils';
 export * from './midi/ccValues';
 export * from './midi/export';
 export * from './other/DefaultTooltip';
+export * from './other/noteNames';
 export * from './other/OctavePlayer';
 export * from './other/SvgText';
 export * from './pickers/CCPicker';

package/dist/other/noteNames.js

@@ -0,0 +1,22 @@
+import { Midi, Note } from 'tonal';
+const { midiToNoteName } = Midi;
+/**
+ * Rewrites ASCII accidentals in a note name to their Unicode glyphs, so
+ * labels read as `D♭` / `F♯` rather than `Db` / `F#`.
+ */
+const formatPitchName = (name) => name.replace(/([A-G])b/g, '$1♭').replace(/([A-G])#/g, '$1♯');
+/**
+ * Pitch class (no octave) for a MIDI note, as a display label.
+ *
+ * `noteLabels`, when supplied, is a chroma-indexed array of names — index 0 is
+ * C, index 1 is C♯/D♭, and so on. It lets a caller impose key-aware spelling
+ * (a scale may legitimately need both B♭ and F♯), which a single sharps/flats
+ * flag cannot express. Missing entries fall back to the default flat spelling.
+ */
+const pitchClassLabel = (midiNumber, noteLabels) => noteLabels?.[((midiNumber % 12) + 12) % 12] ??
+    formatPitchName(Note.pitchClass(Note.fromMidi(midiNumber) ?? ''));
+/**
+ * Note name with octave for a MIDI note, flats by default (`70` → `B♭4`).
+ */
+const midiNoteLabel = (note) => formatPitchName(midiToNoteName(note, { sharps: false }));
+export { formatPitchName, midiNoteLabel, pitchClassLabel };

package/dist/pickers/KeyPicker.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Note } from 'tonal';
 import { OctavePlayer } from '../other/OctavePlayer';
+import { pitchClassLabel } from '../other/noteNames';
 import { noSelection } from './Select';
-const formatPitchName = (pitchClass) => pitchClass.replace(/([A-G])b/g, '$1\u266D');
 const NATURAL_LABEL_NUDGE_LEFT = new Set(['C', 'F']);
 const NATURAL_LABEL_NUDGE_RIGHT = new Set(['E', 'B']);
-const noteNameLabelRenderer = ({ isAccidental, isActive, midiNumber, }) => {
+const makeNoteNameLabelRenderer = (noteLabels) => ({ isAccidental, isActive, midiNumber }) => {
+    // Nudge classes key off the natural letter, which never varies with the
+    // caller's spelling choice, so they read the default name rather than the
+    // (possibly overridden) label.
     const pitchClass = Note.pitchClass(Note.fromMidi(midiNumber) ?? '');
-    const pitchName = formatPitchName(pitchClass);
+    const pitchName = pitchClassLabel(midiNumber, noteLabels);
     if (!pitchName)
         return null;
     return (_jsx("div", { className: classNames('ReactPiano__NoteLabel', 'ReactPiano__NoteLabel--noteName', {
@@ -21,7 +24,8 @@ const noteNameLabelRenderer = ({ isAccidental, isActive, midiNumber, }) => {
         }), children: pitchName }));
 };
 const KeyPicker = (props) => {
-    const { value, onChange, disabled = false, height = 100, showNoteNames = false, width = 300, octave = 4, ...rest } = props;
+    const { value, onChange, disabled = false, height = 100, noteLabels, showNoteNames = false, width = 300, octave = 4, ...rest } = props;
+    const renderNoteLabel = useMemo(() => makeNoteNameLabelRenderer(noteLabels), [noteLabels]);
     const handleKeyClick = useCallback((note) => {
         if (disabled)
             return;
@@ -32,6 +36,6 @@ const KeyPicker = (props) => {
     const octaveStart = 60 + (octave - 4) * 12;
     const octaveEnd = octaveStart + 11;
     const shouldHighlight = value !== noSelection && value >= octaveStart && value <= octaveEnd;
-    return (_jsx(OctavePlayer, { ...rest, className: showNoteNames ? 'ReactPiano--showNoteNames' : undefined, selectedNotes: shouldHighlight ? [value] : [], disabled: disabled, height: height, renderNoteLabel: showNoteNames ? noteNameLabelRenderer : undefined, width: width, octave: octave, onClick: handleKeyClick, instrumentName: "acoustic_grand_piano" }));
+    return (_jsx(OctavePlayer, { ...rest, className: showNoteNames ? 'ReactPiano--showNoteNames' : undefined, selectedNotes: shouldHighlight ? [value] : [], disabled: disabled, height: height, renderNoteLabel: showNoteNames ? renderNoteLabel : undefined, width: width, octave: octave, onClick: handleKeyClick, instrumentName: "acoustic_grand_piano" }));
 };
 export { KeyPicker };

package/dist/pickers/NotePicker.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo } from 'react';
-import { Midi } from 'tonal';
 import { emptyMapping } from 'zds-mappings';
 import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault';
+import { midiNoteLabel } from '../other/noteNames';
 import { assertRange } from '../utils';
 import { Select } from './Select';
-const { midiToNoteName } = Midi;
 const formattedMapEntry = ({ note, name }) => `${note} ${name.length ? '-' : ''} ${name}`;
 const formattedListEntry = (label, idx) => ({
     label,
@@ -16,12 +15,7 @@ const NotePicker = forwardRef((props, ref) => {
     const options = useMemo(() => {
         if (isMelodicMode) {
             return emptyMapping()
-                .map(({ note }) => {
-                const midiNoteName = midiToNoteName(note, { sharps: false })
-                    .replace('b', '♭')
-                    .replace('#', '♯');
-                return `${midiNoteName} (#${note})`;
-            })
+                .map(({ note }) => `${midiNoteLabel(note)} (#${note})`)
                 .map(formattedListEntry);
         }
         return (mapping || emptyMapping())

package/dist/types/index.d.ts

@@ -2,6 +2,7 @@ export * from './utils';
 export * from './midi/ccValues';
 export * from './midi/export';
 export * from './other/DefaultTooltip';
+export * from './other/noteNames';
 export * from './other/OctavePlayer';
 export * from './other/SvgText';
 export * from './pickers/CCPicker';

package/dist/types/other/noteNames.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Rewrites ASCII accidentals in a note name to their Unicode glyphs, so
+ * labels read as `D♭` / `F♯` rather than `Db` / `F#`.
+ */
+declare const formatPitchName: (name: string) => string;
+/**
+ * Pitch class (no octave) for a MIDI note, as a display label.
+ *
+ * `noteLabels`, when supplied, is a chroma-indexed array of names — index 0 is
+ * C, index 1 is C♯/D♭, and so on. It lets a caller impose key-aware spelling
+ * (a scale may legitimately need both B♭ and F♯), which a single sharps/flats
+ * flag cannot express. Missing entries fall back to the default flat spelling.
+ */
+declare const pitchClassLabel: (midiNumber: number, noteLabels?: readonly string[]) => string;
+/**
+ * Note name with octave for a MIDI note, flats by default (`70` → `B♭4`).
+ */
+declare const midiNoteLabel: (note: number) => string;
+export { formatPitchName, midiNoteLabel, pitchClassLabel };

package/dist/types/pickers/KeyPicker.d.ts

@@ -4,6 +4,12 @@ type KeyPickerProps = Omit<PianoProviderProps, 'className' | 'instrumentName' |
     onChange: (value: number) => void;
     disabled?: boolean;
     height?: number;
+    /**
+     * Chroma-indexed note names (index 0 = C) overriding the default flat
+     * spelling — lets a caller label keys for a specific key/scale, where both
+     * sharps and flats can be correct at once. Missing entries fall back.
+     */
+    noteLabels?: readonly string[];
     showNoteNames?: boolean;
     width?: number;
     octave?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zds-pickers",
-  "version": "4.2.1",
+  "version": "4.4.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -55,6 +55,7 @@
     "react-dom": "18.3.1",
     "react-select": "5.10.1",
     "storybook": "10.5.5",
+    "tonal": "6.4.3",
     "typescript": "5.8.2",
     "vite": "^8.0.16",
     "vitest": "4.1.10",
@@ -66,7 +67,6 @@
     "d3-selection": "3.0.0",
     "react-svgmt": "2.0.2",
     "soundfont-player": "0.12.0",
-    "tonal": "6.4.2",
     "zds-react-piano": "4.1.0"
   },
   "peerDependencies": {
@@ -74,6 +74,7 @@
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-select": ">=5.10.0",
+    "tonal": ">=6.4.2",
     "zds-mappings": "^1.4.9"
   },
   "scripts": {