zds-pickers 4.0.14 → 4.0.16

package/dist/other/SoundFontProvider.js

@@ -22,7 +22,7 @@ const SoundfontProvider = (props) => {
                 setInstrument(newInstrument);
             });
         }
-        else if (isDefined(instrumentName)) {
+        else if (instrumentName) {
             // the host app has already injected the soundfont into global space
             Soundfont.instrument(audioContext, instrumentName).then(newInstrument => {
                 setInstrument(newInstrument);
@@ -34,7 +34,9 @@ const SoundfontProvider = (props) => {
         }
     }, [audioContext, format, hostname, instrumentName, soundfont]);
     useEffect(() => {
-        loadInstrument(instrumentName);
+        if (instrumentName) {
+            loadInstrument(instrumentName);
+        }
     }, [instrumentName, loadInstrument]);
     useEffect(() => {
         if (isDefined(instrumentName)) {

package/dist/rotaryKnob/helpers/KnobVisualHelpers.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { toRadians } from '../utils';
 import { DrawCircle } from './DrawCircle';
 import { DrawLine } from './DrawLine';
 import { HelpersOverlay } from './HelpersOverlay';
-import { toRadians } from '../utils';
 class KnobVisualHelpers extends React.Component {
     constructor() {
         super(...arguments);

package/dist/types/midi/export.d.ts

@@ -8,7 +8,7 @@ declare const Statuses: {
     readonly channelPressure: 13;
     readonly pitchWheel: 14;
 };
-type Status = (typeof Statuses)[keyof typeof Statuses];
+type Status = 8 | 9 | 10 | 11 | 12 | 13 | 14;
 declare const MASK_CHANNEL = 15;
 declare const MASK_STATUS = 240;
 declare const statusOptions: Option<Status>[];

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

@@ -1,5 +1,11 @@
 import type Soundfont from 'soundfont-player';
 import type { TooltipProps } from './DefaultTooltip';
+type PianoMidiNote = {
+    accidental: boolean;
+    left: number;
+    midiNumber: number;
+    width: number;
+};
 type OctavePlayerProps = {
     disabled?: boolean;
     height: number;
@@ -10,12 +16,12 @@ type WithProviderProps = {
     format?: 'mp3' | 'ogg';
     height: number;
     hostname?: string;
-    instrumentName: Soundfont.InstrumentName;
+    instrumentName?: Soundfont.InstrumentName;
     octave?: number;
     onChange?: (note: number) => void;
     onClick?: (note: number) => void;
     onDoubleClick?: (note: number) => void;
-    onKeyMouseEnter?: (note: number) => void;
+    onKeyMouseEnter?: (note: PianoMidiNote) => void;
     onKeyMouseLeave?: (note: number) => void;
     soundfont?: 'MusyngKite' | 'FluidR3_GM';
     Tooltip?: TooltipProps;
@@ -23,4 +29,4 @@ type WithProviderProps = {
 };
 declare const WithProvider: ({ format, height, hostname, instrumentName, octave, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, Tooltip, width, }: WithProviderProps) => import("react/jsx-runtime").JSX.Element;
 export { WithProvider as OctavePlayer };
-export type { OctavePlayerProps, WithProviderProps };
+export type { OctavePlayerProps, PianoMidiNote, WithProviderProps };

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

@@ -3,7 +3,7 @@ type SoundfontProviderProps = {
     audioContext: AudioContext;
     format?: 'mp3' | 'ogg';
     hostname?: string;
-    instrumentName: Soundfont.InstrumentName;
+    instrumentName?: Soundfont.InstrumentName;
     onChange?: (midiNumber: number) => void;
     render: (props: {
         isLoading: boolean;

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

@@ -1,5 +1,10 @@
 import { type JSX } from 'react';
 import { type GroupBase, type SelectInstance } from 'react-select';
+type PassedSelectProps = {
+    actionButton?: React.ReactNode;
+    inputValue?: string;
+    placeholder?: React.ReactNode;
+};
 type Option<T> = {
     label: React.ReactNode;
     value: T;
@@ -19,6 +24,7 @@ type SelectProps<T> = {
         entries: Option<T>[];
     }[];
     preserveMenuWidth?: boolean;
+    selectProps?: PassedSelectProps;
     shrinkLabel?: boolean;
     value: Option<T>['value'];
 };

package/lib/midi/export.ts

@@ -10,7 +10,8 @@ const Statuses = {
   pitchWheel: 14, // 1110
 } as const
 
-type Status = (typeof Statuses)[keyof typeof Statuses]
+// Define type as union of literal values
+type Status = 8 | 9 | 10 | 11 | 12 | 13 | 14
 
 const MASK_CHANNEL = 15 // 00001111
 const MASK_STATUS = 240 // 01110000

package/lib/other/OctavePlayer.tsx

@@ -4,6 +4,13 @@ import { Piano as ReactPiano } from 'zds-react-piano'
 import type { TooltipProps } from './DefaultTooltip'
 import { SoundfontProvider } from './SoundFontProvider'
 
+type PianoMidiNote = {
+  accidental: boolean
+  left: number
+  midiNumber: number
+  width: number
+}
+
 const baseNotes = [
   'C',
   'C#',
@@ -67,12 +74,12 @@ type WithProviderProps = {
   format?: 'mp3' | 'ogg'
   height: number
   hostname?: string
-  instrumentName: Soundfont.InstrumentName
+  instrumentName?: Soundfont.InstrumentName
   octave?: number
   onChange?: (note: number) => void
   onClick?: (note: number) => void
   onDoubleClick?: (note: number) => void
-  onKeyMouseEnter?: (note: number) => void
+  onKeyMouseEnter?: (note: PianoMidiNote) => void
   onKeyMouseLeave?: (note: number) => void
   soundfont?: 'MusyngKite' | 'FluidR3_GM'
   Tooltip?: TooltipProps
@@ -138,4 +145,4 @@ const WithProvider = ({
 
 export { WithProvider as OctavePlayer }
 
-export type { OctavePlayerProps, WithProviderProps }
+export type { OctavePlayerProps, PianoMidiNote, WithProviderProps }

package/lib/other/SoundFontProvider.tsx

@@ -11,7 +11,7 @@ type SoundfontProviderProps = {
   audioContext: AudioContext
   format?: 'mp3' | 'ogg'
   hostname?: string
-  instrumentName: Soundfont.InstrumentName
+  instrumentName?: Soundfont.InstrumentName
   onChange?: (midiNumber: number) => void
   render: (props: {
     isLoading: boolean
@@ -54,7 +54,7 @@ const SoundfontProvider = (props: SoundfontProviderProps) => {
         }).then(newInstrument => {
           setInstrument(newInstrument)
         })
-      } else if (isDefined(instrumentName)) {
+      } else if (instrumentName) {
         // the host app has already injected the soundfont into global space
         Soundfont.instrument(audioContext, instrumentName).then(
           newInstrument => {
@@ -70,7 +70,9 @@ const SoundfontProvider = (props: SoundfontProviderProps) => {
   )
 
   useEffect(() => {
-    loadInstrument(instrumentName)
+    if (instrumentName) {
+      loadInstrument(instrumentName)
+    }
   }, [instrumentName, loadInstrument])
 
   useEffect(() => {

package/lib/pickers/Select.tsx

@@ -20,6 +20,12 @@ import { omit } from '../utils'
 
 const { IndicatorsContainer, Placeholder, ValueContainer } = originalComponents
 
+type PassedSelectProps = {
+  actionButton?: React.ReactNode
+  inputValue?: string
+  placeholder?: React.ReactNode
+}
+
 type Option<T> = {
   label: React.ReactNode
   value: T
@@ -28,11 +34,8 @@ type Option<T> = {
 interface CustomIndicatorsContainerProps<T>
   extends Omit<IndicatorsContainerProps<Option<T>, false>, 'selectProps'> {
   children: React.ReactNode
-  selectProps: IndicatorsContainerProps<Option<T>, false>['selectProps'] & {
-    actionButton?: React.ReactNode
-    inputValue?: string
-    placeholder?: React.ReactNode
-  }
+  selectProps: IndicatorsContainerProps<Option<T>, false>['selectProps'] &
+    PassedSelectProps
 }
 
 const CustomIndicatorsContainer = <T,>({
@@ -97,6 +100,7 @@ type SelectProps<T> = {
   onChange: (value: Option<T>['value']) => void
   options: Option<T>[] | { entries: Option<T>[] }[]
   preserveMenuWidth?: boolean
+  selectProps?: PassedSelectProps
   shrinkLabel?: boolean
   value: Option<T>['value']
 }

package/lib/rotaryKnob/helpers/KnobVisualHelpers.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import type { Point } from '../Types'
+import { toRadians } from '../utils'
 import { DrawCircle } from './DrawCircle'
 import { DrawLine } from './DrawLine'
 import { HelpersOverlay } from './HelpersOverlay'
-import { toRadians } from '../utils'
 
 /** Precision visual helpers */
 
@@ -50,7 +50,8 @@ class KnobVisualHelpers extends React.Component<
     //Note: Not sure why we need to subtract 90 here
     const valueMarkerX =
       props.radius * Math.cos(toRadians(props.valueAngle - 90))
-    const valueMarkerY = props.radius * Math.sin(toRadians(props.valueAngle - 90))
+    const valueMarkerY =
+      props.radius * Math.sin(toRadians(props.valueAngle - 90))
 
     return {
       ...state,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zds-pickers",
-  "version": "4.0.14",
+  "version": "4.0.16",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",

package/stories/picker.stories.tsx

@@ -155,16 +155,17 @@ const NotePickerStory3: StoryObj<typeof NotePicker> = {
     isMelodicMode: false,
     label: 'Action button',
     mapping: gmMapping,
-    // selectProps: {
-    //   actionButton: (
-    //     <button
-    //       onClick={e => {
-    //         window.alert('click')
-    //       }}>
-    //       ?
-    //     </button>
-    //   ),
-    // },
+    selectProps: {
+      actionButton: (
+        <button
+          type="button"
+          onClick={() => {
+            window.alert('click')
+          }}>
+          ?
+        </button>
+      ),
+    },
     shrinkLabel: false,
     value: 38,
   },