zds-pickers 4.0.15 → 4.0.17

package/dist/index.js

@@ -1,8 +1,10 @@
+export * from './utils';
 export * from './midi/ccValues';
 export * from './midi/export';
 export * from './other/DefaultTooltip';
 export * from './other/OctavePlayer';
 export * from './other/SvgText';
+export * from './pickers/CCPicker';
 export * from './pickers/ChannelMappingPicker';
 export * from './pickers/ChannelPicker';
 export * from './pickers/Knob';

package/dist/types/index.d.ts

@@ -1,8 +1,10 @@
+export * from './utils';
 export * from './midi/ccValues';
 export * from './midi/export';
 export * from './other/DefaultTooltip';
 export * from './other/OctavePlayer';
 export * from './other/SvgText';
+export * from './pickers/CCPicker';
 export * from './pickers/ChannelMappingPicker';
 export * from './pickers/ChannelPicker';
 export * from './pickers/Knob';

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/pickers/ChannelMappingPicker.d.ts

@@ -2,7 +2,7 @@ import type { GroupBase, SelectInstance } from 'react-select';
 import type { Option, SelectProps } from './Select';
 type InternalValue = number | 'separator';
 type ChannelMappingOption = Option<InternalValue>;
-interface ChannelMappingPickerProps extends SelectProps<InternalValue> {
+interface ChannelMappingPickerProps extends Omit<SelectProps<InternalValue>, 'options'> {
     channels: Option<number>[];
     className?: string;
     filterOptions?: (candidate: Option<InternalValue>, inputValue: string) => 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/dist/types/pickers/ValuePicker.d.ts

@@ -1,12 +1,12 @@
 import type { GroupBase, SelectInstance } from 'react-select';
 import type { Option, SelectProps } from './Select';
-type ValuePickerProps = SelectProps<number> & {
+type ValuePickerProps = Omit<SelectProps<number>, 'options'> & {
     highToLow?: boolean;
     max?: number;
     min?: number;
 };
 type ValuePickerRef = SelectInstance<Option<number>, false, GroupBase<Option<number>>>;
-declare const ValuePicker: import("react").ForwardRefExoticComponent<SelectProps<number> & {
+declare const ValuePicker: import("react").ForwardRefExoticComponent<Omit<SelectProps<number>, "options"> & {
     highToLow?: boolean;
     max?: number;
     min?: number;

package/lib/index.ts

@@ -1,3 +1,5 @@
+export * from './utils'
+
 export * from './midi/ccValues'
 export * from './midi/export'
 
@@ -5,6 +7,7 @@ export * from './other/DefaultTooltip'
 export * from './other/OctavePlayer'
 export * from './other/SvgText'
 
+export * from './pickers/CCPicker'
 export * from './pickers/ChannelMappingPicker'
 export * from './pickers/ChannelPicker'
 export * from './pickers/Knob'

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/pickers/ChannelMappingPicker.tsx

@@ -15,7 +15,8 @@ const defaultOptions: ChannelMappingOption[] = arraySequence(16).map(value => ({
   label: value,
 }))
 
-interface ChannelMappingPickerProps extends SelectProps<InternalValue> {
+interface ChannelMappingPickerProps
+  extends Omit<SelectProps<InternalValue>, 'options'> {
   channels: Option<number>[]
   className?: string
   filterOptions?: (

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/pickers/ValuePicker.tsx

@@ -5,7 +5,7 @@ import { arraySequence, assertRange } from '../utils'
 import { Select } from './Select'
 import type { Option, SelectProps } from './Select'
 
-type ValuePickerProps = SelectProps<number> & {
+type ValuePickerProps = Omit<SelectProps<number>, 'options'> & {
   highToLow?: boolean
   max?: number
   min?: number

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zds-pickers",
-  "version": "4.0.15",
+  "version": "4.0.17",
   "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,
   },