zds-pickers 4.0.0 → 4.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs.js +33 -52
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.es.js +8050 -13219
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/main.d.ts +92 -80
  6. package/package.json +20 -19
package/dist/main.d.ts CHANGED
@@ -2,38 +2,48 @@ import { default as default_2 } from 'soundfont-player';
2
2
  import { ForwardRefExoticComponent } from 'react';
3
3
  import { GroupBase } from 'react-select';
4
4
  import { JSX as JSX_2 } from 'react/jsx-runtime';
5
+ import { JSX as JSX_3 } from 'react';
6
+ import { JSXElementConstructor } from 'react';
5
7
  import { Mapping } from 'zds-mappings';
8
+ import { ReactElement } from 'react';
9
+ import { ReactNode } from 'react';
6
10
  import { RefAttributes } from 'react';
7
11
  import { SelectInstance } from 'react-select';
8
12
 
9
- export declare const CCPicker: ForwardRefExoticComponent<SelectProps & {
10
- onChange: (value: number | string) => void;
11
- value: number;
12
- } & RefAttributes<SelectRef>>;
13
+ export declare const CCPicker: ForwardRefExoticComponent<CCPickerProps & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
13
14
 
14
- export declare const ccValues: Option_2[];
15
+ declare type CCPickerProps = SelectProps<number>;
15
16
 
16
- export declare const ChannelMappingPicker: ForwardRefExoticComponent<SelectProps & {
17
- channels: Option_2[];
18
- className?: string;
19
- onChange: (value: number) => void;
20
- value: number;
21
- } & RefAttributes<SelectRef>>;
17
+ export declare const ccValues: Option_2<number>[];
22
18
 
23
- export declare const ChannelPicker: ForwardRefExoticComponent<SelectProps & RefAttributes<SelectRef>>;
19
+ export declare const ChannelMappingPicker: ForwardRefExoticComponent<ChannelMappingPickerProps & RefAttributes<SelectInstance<Option_2<InternalValue>, false, GroupBase<Option_2<InternalValue>>>>>;
20
+
21
+ declare interface ChannelMappingPickerProps extends SelectProps<InternalValue> {
22
+ channels: Option_2<number>[];
23
+ className?: string;
24
+ filterOptions?: (candidate: Option_2<InternalValue>, inputValue: string) => boolean;
25
+ value: number;
26
+ onChange: (value: InternalValue) => void;
27
+ }
24
28
 
25
- export declare const combineStatus: (channel: number, status: number) => number;
29
+ export declare const ChannelPicker: ForwardRefExoticComponent<ChannelPickerProps & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
26
30
 
27
- export declare const extractStatus: (status: number) => {
28
- status: number;
31
+ declare type ChannelPickerProps = SelectProps<number>;
32
+
33
+ export declare const combineStatusWithChannel: (channel: number, status: Status_2) => number;
34
+
35
+ export declare const extractStatusAndChannel: (status: number) => {
36
+ status: Status_2;
29
37
  channel: number;
30
38
  };
31
39
 
32
- export declare const getStatusLabel: (val: Status) => string;
40
+ export declare const getStatusLabel: (val: Status_2) => string | number | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode>;
41
+
42
+ declare type InternalValue = number | 'separator';
33
43
 
34
44
  export declare const Knob: (props: KnobProps) => JSX_2.Element;
35
45
 
36
- export declare const KnobPicker: ForwardRefExoticComponent<SelectProps & {
46
+ export declare const KnobPicker: ForwardRefExoticComponent<SelectProps<number> & {
37
47
  highToLow?: boolean;
38
48
  includeLabel?: boolean;
39
49
  includePicker?: boolean;
@@ -43,9 +53,9 @@ min?: number;
43
53
  wheelEnabled?: boolean;
44
54
  wheelSensitivity?: number;
45
55
  value: number;
46
- } & RefAttributes<SelectRef>>;
56
+ } & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
47
57
 
48
- declare type KnobPickerProps = SelectProps & {
58
+ declare type KnobPickerProps = SelectProps<number> & {
49
59
  highToLow?: boolean;
50
60
  includeLabel?: boolean;
51
61
  includePicker?: boolean;
@@ -67,53 +77,41 @@ declare type KnobProps = {
67
77
  wheelSensitivity?: number;
68
78
  };
69
79
 
70
- export declare const LatchPicker: ForwardRefExoticComponent<SelectProps & RefAttributes<SelectRef>>;
80
+ export declare const LatchPicker: ForwardRefExoticComponent<LatchPickerProps & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
71
81
 
72
- export declare const MappingPicker: ForwardRefExoticComponent<SelectProps & {
82
+ declare type LatchPickerProps = SelectProps<number>;
83
+
84
+ export declare const MappingPicker: ForwardRefExoticComponent<SelectProps<string> & {
73
85
  allowClearing: boolean;
74
- } & RefAttributes<SelectRef>>;
86
+ } & RefAttributes<SelectInstance<Option_2<string>, false, GroupBase<Option_2<string>>>>>;
75
87
 
76
88
  export declare const MASK_CHANNEL = 15;
77
89
 
78
90
  export declare const MASK_STATUS = 240;
79
91
 
80
- export declare const NotePicker: ForwardRefExoticComponent<SelectProps & {
92
+ export declare const NotePicker: ForwardRefExoticComponent<SelectProps<number> & {
81
93
  channel: number;
82
94
  disabled?: boolean;
83
95
  isMelodicMode?: boolean;
84
96
  mapping?: Mapping;
85
97
  onChange: (value: number) => void;
86
- value?: number;
87
- } & RefAttributes<SelectRef>>;
98
+ } & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
88
99
 
89
100
  export declare const OctavePlayer: ({ format, height, hostname, instrumentName, octave, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, Tooltip, width, }: WithProviderProps) => JSX_2.Element;
90
101
 
91
- declare type Option_2 = {
102
+ declare type Option_2<T> = {
92
103
  label: React.ReactNode;
93
- value: number | string;
104
+ value: T;
94
105
  };
95
106
 
96
107
  export declare const PianoPicker: ({ format, height, hostname, instrumentName, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, width, }: WithProviderProps) => JSX_2.Element;
97
108
 
98
- export declare const PolarityPicker: ForwardRefExoticComponent<SelectProps & {
109
+ export declare const PolarityPicker: ForwardRefExoticComponent<SelectProps<number> & {
99
110
  labelOff?: string;
100
111
  labelOn?: string;
101
- } & RefAttributes<SelectRef>>;
102
-
103
- declare type Props = {
104
- autosize: boolean;
105
- disabled?: boolean;
106
- inverted: boolean;
107
- onChange: (event: {
108
- target: {
109
- value: number;
110
- };
111
- }) => void;
112
- Tooltip: React.FC<TooltipProps>;
113
- value: number;
114
- };
112
+ } & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
115
113
 
116
- export declare const RESPONSE_CURVES: Option_2[];
114
+ export declare const RESPONSE_CURVES: Option_2<number>[];
117
115
 
118
116
  export declare type ResponseCurve = {
119
117
  value: string | number;
@@ -128,62 +126,76 @@ export declare type ResponseCurve = {
128
126
  labelY: number;
129
127
  };
130
128
 
131
- export declare const ResponseCurve: (props: Props) => JSX_2.Element;
129
+ export declare const ResponseCurve: (props: ResponseCurveProps) => JSX_2.Element;
132
130
 
133
- export declare const ResponseCurvePicker: ForwardRefExoticComponent<SelectProps & {
131
+ export declare const ResponseCurvePicker: ForwardRefExoticComponent<SelectProps<number> & {
134
132
  inverted?: boolean;
135
133
  Tooltip?: React.FC<TooltipProps>;
136
- } & RefAttributes<SelectRef>>;
134
+ } & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
137
135
 
138
- export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<SelectRef>>;
136
+ declare type ResponseCurveProps = {
137
+ autosize: boolean;
138
+ disabled?: boolean;
139
+ inverted: boolean;
140
+ onChange: (event: {
141
+ target: {
142
+ value: number;
143
+ };
144
+ }) => void;
145
+ Tooltip: React.FC<TooltipProps>;
146
+ value: number;
147
+ };
139
148
 
140
- declare type SelectProps = {
149
+ export declare const Select: <T>(props: SelectProps<T> & {
150
+ ref?: React.ForwardedRef<SelectInstance<Option_2<T>, false, GroupBase<Option_2<T>>>>;
151
+ }) => JSX_3.Element;
152
+
153
+ declare type SelectProps<T> = {
141
154
  className?: string;
142
155
  components?: object;
143
156
  disabled?: boolean;
144
- filterOptions?: (candidate: Option_2, inputValue: string) => boolean;
145
- formatOptionLabel?: (option: Option_2, { context }: {
157
+ filterOptions?: (candidate: Option_2<T>, inputValue: string) => boolean;
158
+ formatOptionLabel?: (option: Option_2<unknown>, { context }: {
146
159
  context: 'menu' | 'value';
147
160
  }) => React.ReactNode;
148
161
  isSearchable?: boolean;
149
162
  label?: string;
150
- onChange: (value: Option_2['value']) => void;
151
- options: Option_2[] | {
152
- entries: Option_2[];
163
+ onChange: (value: Option_2<T>['value']) => void;
164
+ options: Option_2<T>[] | {
165
+ entries: Option_2<T>[];
153
166
  }[];
154
167
  preserveMenuWidth?: boolean;
155
168
  shrinkLabel?: boolean;
156
- value: Option_2['value'];
169
+ value: Option_2<T>['value'];
157
170
  };
158
171
 
159
- declare type SelectRef = SelectInstance<Option_2, false, GroupBase<Option_2>>;
160
-
161
- declare type Status = typeof STATUS_NOTE_OFF | typeof STATUS_NOTE_ON | typeof STATUS_AFTER_TOUCH | typeof STATUS_CONTROL_CHANGE | typeof STATUS_PROGRAM_CHANGE | typeof STATUS_CHANNEL_PRESSURE | typeof STATUS_PITCH_WHEEL;
162
-
163
- export declare const STATUS_AFTER_TOUCH = 10;
164
-
165
- export declare const STATUS_CHANNEL_PRESSURE = 13;
166
-
167
- export declare const STATUS_CONTROL_CHANGE = 11;
172
+ declare type Status = (typeof Statuses_2)[keyof typeof Statuses_2]
168
173
 
169
- export declare const STATUS_NOTE_OFF = 8;
174
+ declare type Status_2 = (typeof Statuses)[keyof typeof Statuses];
170
175
 
171
- export declare const STATUS_NOTE_ON = 9;
172
-
173
- export declare const STATUS_PITCH_WHEEL = 14;
174
-
175
- export declare const STATUS_PROGRAM_CHANGE = 12;
176
-
177
- export declare const Statuses: Record<string, Status>;
176
+ export declare const Statuses: {
177
+ noteOff: number;
178
+ noteOn: number;
179
+ aftertouch: number;
180
+ controlChange: number;
181
+ programChange: number;
182
+ channelPressure: number;
183
+ pitchWheel: number;
184
+ };
178
185
 
179
- export declare const statuses: {
180
- value: Status;
181
- label: string;
182
- }[];
186
+ declare const Statuses_2 = {
187
+ noteOff: 8, // 1000
188
+ noteOn: 9, // 1001
189
+ aftertouch: 10, // 1010
190
+ controlChange: 11, // 1011
191
+ programChange: 12, // 1100
192
+ channelPressure: 13, // 1101
193
+ pitchWheel: 14, // 1110
194
+ };
183
195
 
184
- export declare const StatusPicker: ForwardRefExoticComponent<SelectProps & {
185
- statuses: Option_2[];
186
- } & RefAttributes<SelectRef>>;
196
+ export declare const StatusPicker: ForwardRefExoticComponent<SelectProps<number> & {
197
+ statuses: Option_2<Status>[];
198
+ } & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
187
199
 
188
200
  export declare const SVGText: (props: TextProps) => JSX_2.Element;
189
201
 
@@ -207,11 +219,11 @@ declare type TooltipProps = {
207
219
  title: React.ReactNode;
208
220
  };
209
221
 
210
- export declare const ValuePicker: ForwardRefExoticComponent<SelectProps & {
222
+ export declare const ValuePicker: ForwardRefExoticComponent<SelectProps<number> & {
211
223
  highToLow?: boolean;
212
224
  max?: number;
213
225
  min?: number;
214
- } & RefAttributes<SelectRef>>;
226
+ } & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
215
227
 
216
228
  declare type WithProviderProps = {
217
229
  format?: 'mp3' | 'ogg';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zds-pickers",
3
- "version": "4.0.0",
3
+ "version": "4.0.2",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.es.js",
6
6
  "types": "./dist/main.d.ts",
@@ -48,41 +48,42 @@
48
48
  "@storybook/addon-essentials": "8.5.0",
49
49
  "@storybook/addon-links": "8.5.0",
50
50
  "@storybook/builder-vite": "8.5.0",
51
- "@storybook/react": "8.5.0",
52
51
  "@storybook/react-vite": "8.5.0",
53
- "@types/react": "18.3.18",
52
+ "@storybook/react": "8.5.0",
53
+ "@types/d3-drag": "3.0.7",
54
+ "@types/d3-scale": "4.0.8",
55
+ "@types/d3-selection": "3.0.11",
54
56
  "@types/react-dom": "18.3.5",
57
+ "@types/react": "18.3.18",
55
58
  "@vitejs/plugin-react-swc": "3.7.2",
56
59
  "classnames": "2.5.1",
57
60
  "globals": "15.14.0",
58
61
  "immer": "10.1.1",
59
62
  "nodemon": "3.1.9",
60
- "nebiru-react-rotary-knob": "1.1.8",
61
63
  "prop-types": "15.8.1",
62
- "react": "18.2.0",
63
64
  "react-dom": "18.2.0",
64
- "react-select": "5.9.0",
65
- "soundfont-player": "0.12.0",
65
+ "react": "18.2.0",
66
66
  "storybook": "8.5.0",
67
- "tonal": "5.2.1",
68
67
  "typescript": "5.7.3",
69
- "vite": "6.0.7",
70
68
  "vite-plugin-dts": "4.5.0",
71
- "zds-mappings": "1.4.9",
72
- "zds-react-piano": "4.0.10"
69
+ "vite": "6.0.7",
70
+ "zds-mappings": "1.4.9"
73
71
  },
74
72
  "dependencies": {
75
- "caniuse-lite": "1.0.30001692"
73
+ "caniuse-lite": "1.0.30001695",
74
+ "d3-drag": "3.0.0",
75
+ "d3-scale": "4.0.2",
76
+ "d3-selection": "3.0.0",
77
+ "react-select": "5.9.0",
78
+ "react-svgmt": "2.0.2",
79
+ "soundfont-player": "0.12.0",
80
+ "tonal": "6.4.0",
81
+ "zds-react-piano": "4.0.10"
76
82
  },
77
83
  "peerDependencies": {
78
- "classnames": "2.5.1",
79
- "nebiru-react-rotary-knob": "1.1.8",
84
+ "classnames": ">=2.5.1",
80
85
  "react": ">=18.0.0",
81
86
  "react-dom": ">=18.0.0",
82
- "react-select": ">=5.9.0",
83
- "soundfont-player": ">=0.12.0",
84
- "tonal": "5.2.1",
85
- "zds-mappings": "1.4.9",
86
- "zds-react-piano": ">=4.0.10"
87
+ "zds-mappings": "1.4.9"
87
88
  }
88
89
  }