zds-pickers 4.0.22 → 4.0.25

package/dist/index.js

@@ -7,6 +7,7 @@ export * from './other/SvgText';
 export * from './pickers/CCPicker';
 export * from './pickers/ChannelMappingPicker';
 export * from './pickers/ChannelPicker';
+export * from './pickers/KeyPicker';
 export * from './pickers/Knob';
 export * from './pickers/KnobPicker';
 export * from './pickers/LatchPicker';

package/dist/other/OctavePlayer.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { /* Midi, */ Note } from 'tonal';
 import { Piano as ReactPiano } from 'zds-react-piano';
 import { SoundfontProvider } from './SoundFontProvider';
@@ -35,14 +35,14 @@ const WithProvider = ({ format, height, hostname, instrumentName, octave = 4, on
     hostname,
     instrumentName,
     onChange,
-    soundfont, render: ({ isLoading, playNote, stopNote, }) => (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsxs("h2", { children: ["Octave: ", octave] }) }), _jsx(BaseOctavePlayer, { disabled: isLoading, height,
-                octave,
-                onClick,
-                onDoubleClick,
-                onKeyMouseEnter,
-                onKeyMouseLeave,
-                playNote,
-                stopNote,
-                Tooltip,
-                width })] })) }));
+    soundfont, render: ({ isLoading, playNote, stopNote }) => (_jsx(BaseOctavePlayer, { disabled: isLoading, height,
+        octave,
+        onClick,
+        onDoubleClick,
+        onKeyMouseEnter,
+        onKeyMouseLeave,
+        playNote,
+        stopNote,
+        Tooltip,
+        width })) }));
 export { WithProvider as OctavePlayer };

package/dist/pickers/KeyPicker.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OctavePlayer } from '../other/OctavePlayer';
+const KeyPicker = (props) => {
+    console.log('KeyPicker', props);
+    return _jsx(OctavePlayer, { ...props, activeNotes: [65] });
+};
+KeyPicker.propTypes = {};
+export { KeyPicker };

package/dist/pickers/Select.js

@@ -25,8 +25,8 @@ const Select = forwardRef((props, ref) => {
         }
     }, [onChange]);
     const flatOptionsList = options.reduce((acc, entry) => {
-        if ('entries' in entry) {
-            return acc.concat(entry.entries);
+        if ('options' in entry) {
+            return acc.concat(entry.options);
         }
         return acc.concat(entry);
     }, []);

package/dist/types/index.d.ts

@@ -7,6 +7,7 @@ export * from './other/SvgText';
 export * from './pickers/CCPicker';
 export * from './pickers/ChannelMappingPicker';
 export * from './pickers/ChannelPicker';
+export * from './pickers/KeyPicker';
 export * from './pickers/Knob';
 export * from './pickers/KnobPicker';
 export * from './pickers/LatchPicker';
@@ -27,6 +28,7 @@ export type * from './other/SvgText';
 export type * from './pickers/CCPicker';
 export type * from './pickers/ChannelMappingPicker';
 export type * from './pickers/ChannelPicker';
+export type * from './pickers/KeyPicker';
 export type * from './pickers/Knob';
 export type * from './pickers/KnobPicker';
 export type * from './pickers/LatchPicker';

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

@@ -1,18 +1,19 @@
 import type Soundfont from 'soundfont-player';
 import type { TooltipProps } from './DefaultTooltip';
+import type { PianoProps } from 'lib/pickers/PianoPicker';
 type PianoMidiNote = {
     accidental: boolean;
     left: number;
     midiNumber: number;
     width: number;
 };
-type OctavePlayerProps = {
+type OctavePlayerProps = PianoProps & {
     disabled?: boolean;
     height: number;
     octave: number;
     width: number;
 };
-type WithProviderProps = {
+type WithProviderProps = PianoProps & {
     format?: 'mp3' | 'ogg';
     height: number;
     hostname?: string;

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

@@ -0,0 +1,10 @@
+import { type OctavePlayerProps } from '../other/OctavePlayer';
+type KeyPickerProps = OctavePlayerProps & {
+    value: number;
+    onChange: (value: number) => void;
+};
+declare const KeyPicker: {
+    (props: KeyPickerProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {};
+};
+export { KeyPicker };

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

@@ -28,7 +28,7 @@ declare const KnobPicker: import("react").ForwardRefExoticComponent<Partial<impo
     menuShouldScrollIntoView?: boolean;
     onChange: (value: number) => void;
     options: Option<number>[] | {
-        entries: Option<number>[];
+        options: Option<number>[];
     }[];
     preserveMenuWidth?: boolean;
     selectProps?: {

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

@@ -1,5 +1,6 @@
 import type { WithProviderProps } from '../other/OctavePlayer';
 type PianoProps = {
+    activeNotes?: number[];
     disabled: boolean;
     height: number;
     width: number;

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

@@ -23,7 +23,7 @@ declare const ResponseCurvePicker: import("react").ForwardRefExoticComponent<Par
     menuShouldScrollIntoView?: boolean;
     onChange: (value: Curve) => void;
     options: Option<Curve>[] | {
-        entries: Option<Curve>[];
+        options: Option<Curve>[];
     }[];
     preserveMenuWidth?: boolean;
     selectProps?: {

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

@@ -27,7 +27,7 @@ type SelectProps<T> = SelectComponentsConfig<Option<T>, false, GroupBase<Option<
     menuShouldScrollIntoView?: boolean;
     onChange: (value: Option<T>['value']) => void;
     options: Option<T>[] | {
-        entries: Option<T>[];
+        options: Option<T>[];
     }[];
     preserveMenuWidth?: boolean;
     selectProps?: PassedSelectProps;

package/lib/index.ts

@@ -10,6 +10,7 @@ export * from './other/SvgText'
 export * from './pickers/CCPicker'
 export * from './pickers/ChannelMappingPicker'
 export * from './pickers/ChannelPicker'
+export * from './pickers/KeyPicker'
 export * from './pickers/Knob'
 export * from './pickers/KnobPicker'
 export * from './pickers/LatchPicker'
@@ -34,6 +35,7 @@ export type * from './other/SvgText'
 export type * from './pickers/CCPicker'
 export type * from './pickers/ChannelMappingPicker'
 export type * from './pickers/ChannelPicker'
+export type * from './pickers/KeyPicker'
 export type * from './pickers/Knob'
 export type * from './pickers/KnobPicker'
 export type * from './pickers/LatchPicker'

package/lib/other/OctavePlayer.tsx

@@ -3,6 +3,7 @@ import { /* Midi, */ Note } from 'tonal'
 import { Piano as ReactPiano } from 'zds-react-piano'
 import type { TooltipProps } from './DefaultTooltip'
 import { SoundfontProvider } from './SoundFontProvider'
+import type { PianoProps } from 'lib/pickers/PianoPicker'
 
 type PianoMidiNote = {
   accidental: boolean
@@ -38,7 +39,7 @@ const whiteNotes = numNotes * 0.7 // approx
 
 const audioContext = new window.AudioContext()
 
-type OctavePlayerProps = {
+type OctavePlayerProps = PianoProps & {
   disabled?: boolean
   height: number
   octave: number
@@ -70,7 +71,7 @@ const BaseOctavePlayer = ({
   )
 }
 
-type WithProviderProps = {
+type WithProviderProps = PianoProps & {
   format?: 'mp3' | 'ogg'
   height: number
   hostname?: string
@@ -110,35 +111,22 @@ const WithProvider = ({
       onChange,
       soundfont,
     }}
-    render={({
-      isLoading,
-      playNote,
-      stopNote,
-    }: {
-      isLoading: boolean
-      playNote: (midiNumber: number) => void
-      stopNote: (midiNumber: number) => void
-    }) => (
-      <>
-        <div>
-          <h2>Octave: {octave}</h2>
-        </div>
-        <BaseOctavePlayer
-          disabled={isLoading}
-          {...{
-            height,
-            octave,
-            onClick,
-            onDoubleClick,
-            onKeyMouseEnter,
-            onKeyMouseLeave,
-            playNote,
-            stopNote,
-            Tooltip,
-            width,
-          }}
-        />
-      </>
+    render={({ isLoading, playNote, stopNote }) => (
+      <BaseOctavePlayer
+        disabled={isLoading}
+        {...{
+          height,
+          octave,
+          onClick,
+          onDoubleClick,
+          onKeyMouseEnter,
+          onKeyMouseLeave,
+          playNote,
+          stopNote,
+          Tooltip,
+          width,
+        }}
+      />
     )}
   />
 )

package/lib/pickers/KeyPicker.tsx

@@ -0,0 +1,16 @@
+import { OctavePlayer, type OctavePlayerProps } from '../other/OctavePlayer'
+
+type KeyPickerProps = OctavePlayerProps & {
+  value: number
+  onChange: (value: number) => void
+}
+
+const KeyPicker = (props: KeyPickerProps) => {
+  console.log('KeyPicker', props)
+
+  return <OctavePlayer {...props} activeNotes={[65]} />
+}
+
+KeyPicker.propTypes = {}
+
+export { KeyPicker }

package/lib/pickers/PianoPicker.tsx

@@ -11,6 +11,7 @@ const whiteNotes = numNotes * 0.7 // approx
 const audioContext = new window.AudioContext()
 
 type PianoProps = {
+  activeNotes?: number[]
   disabled: boolean
   height: number
   width: number

package/lib/pickers/Select.tsx

@@ -114,7 +114,7 @@ type SelectProps<T> = SelectComponentsConfig<
   menuPosition?: 'fixed' | 'absolute'
   menuShouldScrollIntoView?: boolean
   onChange: (value: Option<T>['value']) => void
-  options: Option<T>[] | { entries: Option<T>[] }[]
+  options: Option<T>[] | { options: Option<T>[] }[]
   preserveMenuWidth?: boolean
   selectProps?: PassedSelectProps
   shrinkLabel?: boolean
@@ -150,8 +150,8 @@ const Select = forwardRef(
     )
 
     const flatOptionsList = options.reduce<Option<T>[]>((acc, entry) => {
-      if ('entries' in entry) {
-        return acc.concat(entry.entries)
+      if ('options' in entry) {
+        return acc.concat(entry.options)
       }
       return acc.concat(entry)
     }, [])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zds-pickers",
-  "version": "4.0.22",
+  "version": "4.0.25",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -40,38 +40,35 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@storybook/addon-actions": "8.5.0",
-    "@storybook/addon-docs": "8.5.0",
-    "@storybook/addon-essentials": "8.5.0",
-    "@storybook/addon-links": "8.5.0",
-    "@storybook/builder-vite": "8.5.0",
-    "@storybook/react-vite": "8.5.0",
-    "@storybook/react": "8.5.0",
+    "@storybook/addon-actions": "8.6.3",
+    "@storybook/addon-docs": "8.6.3",
+    "@storybook/addon-essentials": "8.6.3",
+    "@storybook/addon-links": "8.6.3",
+    "@storybook/builder-vite": "8.6.3",
+    "@storybook/react": "8.6.3",
+    "@storybook/react-vite": "8.6.3",
     "@types/d3-drag": "3.0.7",
-    "@types/d3-scale": "4.0.8",
+    "@types/d3-scale": "4.0.9",
     "@types/d3-selection": "3.0.11",
-    "@types/react-dom": "18.3.5",
     "@types/react": "18.3.18",
-    "@vitejs/plugin-react-swc": "3.7.2",
+    "@types/react-dom": "18.3.5",
+    "@vitejs/plugin-react-swc": "3.8.0",
     "classnames": "2.5.1",
-    "globals": "15.14.0",
+    "globals": "15.15.0",
     "immer": "10.1.1",
     "nodemon": "3.1.9",
     "prop-types": "15.8.1",
-    "react-dom": "18.2.0",
-    "react": "18.2.0",
     "rc-slider": "11.1.8",
-    "storybook": "8.5.0",
-    "typescript": "5.7.3",
-    "vite": "6.0.7",
+    "storybook": "8.6.3",
+    "typescript": "5.8.2",
+    "vite": "^6.3.6",
     "zds-mappings": "1.4.9"
   },
   "dependencies": {
-    "caniuse-lite": "1.0.30001695",
+    "caniuse-lite": "1.0.30001741",
     "d3-drag": "3.0.0",
     "d3-scale": "4.0.2",
     "d3-selection": "3.0.0",
-    "react-select": "5.9.0",
     "react-svgmt": "2.0.2",
     "soundfont-player": "0.12.0",
     "tonal": "6.4.0",
@@ -81,6 +78,7 @@
     "classnames": ">=2.5.1",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
+    "react-select": ">=5.10.0",
     "zds-mappings": "1.4.9"
   }
 }

package/stories/picker.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 // biome-ignore lint/correctness/noUnusedImports: <explanation>
 import React from 'react'
-import type * as Soundfont from 'soundfont-player'
+// import type * as Soundfont from 'soundfont-player'
 import { getMapping } from 'zds-mappings'
 import { Statuses, statusOptions } from '../lib/midi/export'
 import { OctavePlayer } from '../lib/other/OctavePlayer'
@@ -16,6 +16,7 @@ import { NotePicker } from '../lib/pickers/NotePicker'
 import { PianoPicker } from '../lib/pickers/PianoPicker'
 import { PolarityPicker } from '../lib/pickers/PolarityPicker'
 import { ResponseCurve } from '../lib/pickers/ResponseCurve'
+import { KeyPicker } from '../lib/pickers/KeyPicker'
 import { ResponseCurvePicker } from '../lib/pickers/ResponseCurvePicker'
 import {
   type Option,
@@ -132,6 +133,17 @@ const ChannelMappingPickerUndefinedStory: StoryObj<
   },
 }
 
+const KeyPickerStory: StoryObj<typeof KeyPicker> = {
+  render: args => <KeyPicker {...args} />,
+  args: {
+    instrumentName: 'acoustic_grand_piano',
+    height: 100,
+    width: 200,
+    octave: 4,
+  },
+}
+
+
 const KnobStory: StoryObj<typeof Knob> = {
   render: args => <Knob {...args} />,
   args: {
@@ -243,10 +255,7 @@ const NotePickerStory4: StoryObj<typeof NotePicker> = {
 const OctavePlayerStory: StoryObj<typeof OctavePlayer> = {
   render: args => <OctavePlayer {...args} />,
   args: {
-    instrumentName: {
-      control: { type: 'select' },
-      options: [undefined, 'acoustic_grand_piano'],
-    } as unknown as Soundfont.InstrumentName,
+    instrumentName: 'acoustic_grand_piano',
     height: 100,
     width: 200,
     octave: 4,
@@ -372,6 +381,7 @@ export {
   ChannelMappingPickerUndefinedStory as ChannelMappingPickerNoValue,
   CCPickerStory as ChangeController,
   CCPickerUndefinedStory as ChangeControllerNoValue,
+  KeyPickerStory as KeyPicker,
   KnobStory as Knob,
   KnobPickerStory as KnobPicker,
   LatchPickerStory as LatchPicker,