zds-pickers 4.0.19 → 4.0.21

package/dist/pickers/ChannelPicker.js

@@ -15,7 +15,9 @@ const filterOptions = (option, input) => {
     }
     return true;
 };
-const ChannelPicker = forwardRef(({ className, ...rest }, ref) => {
-    return (_jsx(Select, { ...rest, className: cl(className, 'channel-picker'), filterOptions: filterOptions, formatOptionLabel: formatOptionLabel, options: options, ref: ref }));
+const ChannelPicker = forwardRef(({ className, value = undefined, ...rest }, ref) => {
+    return (_jsx(Select, { ...rest, className: cl(className, 'channel-picker'), filterOptions: filterOptions, formatOptionLabel: formatOptionLabel, options: value === undefined
+            ? [...options, { value: undefined, label: '--' }]
+            : options, value: value, ref: ref }));
 });
 export { ChannelPicker };

package/dist/pickers/Select.js

@@ -3,7 +3,8 @@ import { Children, forwardRef, isValidElement, useCallback, useMemo, } from 'rea
 import ReactSelect, { components as originalComponents, } from 'react-select';
 import { omit } from '../utils';
 const { IndicatorsContainer, Placeholder, ValueContainer } = originalComponents;
-const CustomIndicatorsContainer = ({ children, ...rest }) => {
+const CustomIndicatorsContainer = (props) => {
+    const { children, ...rest } = props;
     const actionButton = rest.selectProps?.actionButton;
     return (_jsx(IndicatorsContainer, { ...rest, children: _jsxs("div", { onMouseDown: e => {
                 e.stopPropagation();

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

@@ -1,6 +1,6 @@
 import type { GroupBase, SelectInstance } from 'react-select';
 import type { Option, SelectProps } from './Select';
-type Channel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15;
+type Channel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | undefined;
 type ChannelPickerProps = Omit<SelectProps<Channel>, 'options'>;
 type ChannelPickerRef = SelectInstance<Option<Channel>, false, GroupBase<Option<Channel>>>;
 declare const ChannelPicker: import("react").ForwardRefExoticComponent<ChannelPickerProps & import("react").RefAttributes<SelectInstance<Option<Channel>, false, GroupBase<Option<Channel>>>>>;

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

@@ -13,6 +13,7 @@ type KnobPickerProps = SelectProps<number> & {
 };
 type KnobPickerRef = SelectInstance<Option<number>, false, GroupBase<Option<number>>>;
 declare const KnobPicker: import("react").ForwardRefExoticComponent<Partial<import("node_modules/react-select/dist/declarations/src/components").SelectComponents<Option<number>, false, GroupBase<Option<number>>>> & {
+    actionButton?: React.ReactNode;
     className?: string;
     components?: object;
     disabled?: boolean;
@@ -22,6 +23,9 @@ declare const KnobPicker: import("react").ForwardRefExoticComponent<Partial<impo
     }) => React.ReactNode;
     isSearchable?: boolean;
     label?: string;
+    menuPortalTarget?: HTMLElement | null;
+    menuPosition?: "fixed" | "absolute";
+    menuShouldScrollIntoView?: boolean;
     onChange: (value: number) => void;
     options: Option<number>[] | {
         entries: Option<number>[];
@@ -33,7 +37,7 @@ declare const KnobPicker: import("react").ForwardRefExoticComponent<Partial<impo
         placeholder?: React.ReactNode;
     };
     shrinkLabel?: boolean;
-    value: number;
+    value?: number | undefined;
 } & {
     highToLow?: boolean;
     includeLabel?: boolean;

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

@@ -8,6 +8,7 @@ type ResponseCurvePickerProps = SelectProps<Curve> & {
 };
 type ResponseCurvePickerRef = SelectInstance<Option<Curve>, false, GroupBase<Option<Curve>>>;
 declare const ResponseCurvePicker: import("react").ForwardRefExoticComponent<Partial<import("node_modules/react-select/dist/declarations/src/components").SelectComponents<Option<Curve>, false, GroupBase<Option<Curve>>>> & {
+    actionButton?: React.ReactNode;
     className?: string;
     components?: object;
     disabled?: boolean;
@@ -17,6 +18,9 @@ declare const ResponseCurvePicker: import("react").ForwardRefExoticComponent<Par
     }) => React.ReactNode;
     isSearchable?: boolean;
     label?: string;
+    menuPortalTarget?: HTMLElement | null;
+    menuPosition?: "fixed" | "absolute";
+    menuShouldScrollIntoView?: boolean;
     onChange: (value: Curve) => void;
     options: Option<Curve>[] | {
         entries: Option<Curve>[];
@@ -28,7 +32,7 @@ declare const ResponseCurvePicker: import("react").ForwardRefExoticComponent<Par
         placeholder?: React.ReactNode;
     };
     shrinkLabel?: boolean;
-    value: Curve;
+    value?: Curve | undefined;
 } & {
     inverted?: boolean;
     Tooltip?: React.FC<TooltipProps>;

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

@@ -10,6 +10,7 @@ type Option<T> = {
     value: T;
 };
 type SelectProps<T> = SelectComponentsConfig<Option<T>, false, GroupBase<Option<T>>> & {
+    actionButton?: React.ReactNode;
     className?: string;
     components?: object;
     disabled?: boolean;
@@ -19,6 +20,9 @@ type SelectProps<T> = SelectComponentsConfig<Option<T>, false, GroupBase<Option<
     }) => React.ReactNode;
     isSearchable?: boolean;
     label?: string;
+    menuPortalTarget?: HTMLElement | null;
+    menuPosition?: 'fixed' | 'absolute';
+    menuShouldScrollIntoView?: boolean;
     onChange: (value: Option<T>['value']) => void;
     options: Option<T>[] | {
         entries: Option<T>[];
@@ -26,7 +30,7 @@ type SelectProps<T> = SelectComponentsConfig<Option<T>, false, GroupBase<Option<
     preserveMenuWidth?: boolean;
     selectProps?: PassedSelectProps;
     shrinkLabel?: boolean;
-    value: Option<T>['value'];
+    value?: Option<T>['value'];
 };
 declare const Select: <T>(props: SelectProps<T> & {
     ref?: React.ForwardedRef<SelectInstance<Option<T>, false, GroupBase<Option<T>>>>;

package/lib/pickers/ChannelPicker.tsx

@@ -22,6 +22,7 @@ type Channel =
   | 13
   | 14
   | 15
+  | undefined
 
 interface FormatOptionLabelContext {
   context: 'menu' | 'value'
@@ -58,14 +59,19 @@ const filterOptions = (option: Option<Channel>, input: string) => {
 const ChannelPicker = forwardRef<
   SelectInstance<Option<Channel>, false, GroupBase<Option<Channel>>>,
   ChannelPickerProps
->(({ className, ...rest }, ref) => {
+>(({ className, value = undefined, ...rest }, ref) => {
   return (
     <Select
       {...rest}
       className={cl(className, 'channel-picker')}
       filterOptions={filterOptions}
       formatOptionLabel={formatOptionLabel}
-      options={options}
+      options={
+        value === undefined
+          ? [...options, { value: undefined, label: '--' }]
+          : options
+      }
+      value={value}
       ref={ref}
     />
   )

package/lib/pickers/Select.tsx

@@ -39,10 +39,10 @@ interface CustomIndicatorsContainerProps<T>
     PassedSelectProps
 }
 
-const CustomIndicatorsContainer = <T,>({
-  children,
-  ...rest
-}: CustomIndicatorsContainerProps<T>) => {
+const CustomIndicatorsContainer = <T,>(
+  props: CustomIndicatorsContainerProps<T>,
+) => {
+  const { children, ...rest } = props
   const actionButton = rest.selectProps?.actionButton
 
   return (
@@ -92,6 +92,7 @@ type SelectProps<T> = SelectComponentsConfig<
   false,
   GroupBase<Option<T>>
 > & {
+  actionButton?: React.ReactNode
   className?: string
   components?: object
   disabled?: boolean
@@ -102,12 +103,15 @@ type SelectProps<T> = SelectComponentsConfig<
   ) => React.ReactNode
   isSearchable?: boolean
   label?: string
+  menuPortalTarget?: HTMLElement | null
+  menuPosition?: 'fixed' | 'absolute'
+  menuShouldScrollIntoView?: boolean
   onChange: (value: Option<T>['value']) => void
   options: Option<T>[] | { entries: Option<T>[] }[]
   preserveMenuWidth?: boolean
   selectProps?: PassedSelectProps
   shrinkLabel?: boolean
-  value: Option<T>['value']
+  value?: Option<T>['value']
 }
 
 const Select = forwardRef(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zds-pickers",
-  "version": "4.0.19",
+  "version": "4.0.21",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -60,6 +60,7 @@
     "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",

package/stories/picker.stories.tsx

@@ -46,6 +46,16 @@ const ChannelPickerStory: StoryObj<typeof ChannelPicker> = {
   },
 }
 
+const ChannelPickerUndefinedStory: StoryObj<typeof ChannelPicker> = {
+  render: args => <ChannelPicker {...args} />,
+  args: {
+    disabled: false,
+    label: 'Channel',
+    shrinkLabel: false,
+    value: undefined,
+  },
+}
+
 const ChannelMappingPickerStory: StoryObj<typeof ChannelMappingPicker> = {
   render: args => <ChannelMappingPicker {...args} />,
   args: {
@@ -155,22 +165,33 @@ const NotePickerStory3: StoryObj<typeof NotePicker> = {
     isMelodicMode: false,
     label: 'Action button',
     mapping: gmMapping,
-    selectProps: {
-      actionButton: (
-        <button
-          type="button"
-          onClick={() => {
-            window.alert('click')
-          }}>
-          ?
-        </button>
-      ),
-    },
+    actionButton: (
+      <button
+        type="button"
+        onClick={() => {
+          window.alert('click')
+        }}>
+        ?
+      </button>
+    ),
     shrinkLabel: false,
     value: 38,
   },
 }
 
+const NotePickerStory4: StoryObj<typeof NotePicker> = {
+  render: args => <NotePicker {...args} />,
+  args: {
+    channel: 0,
+    disabled: false,
+    isMelodicMode: false,
+    label: 'Note #',
+    mapping: gmMapping,
+    shrinkLabel: false,
+    value: undefined,
+  },
+}
+
 const OctavePlayerStory: StoryObj<typeof OctavePlayer> = {
   render: args => <OctavePlayer {...args} />,
   args: {
@@ -184,49 +205,6 @@ const OctavePlayerStory: StoryObj<typeof OctavePlayer> = {
   },
 }
 
-// # NotePicker
-// <Canvas withToolbar>
-//   <Story
-//     height={120}
-//     name="NotePicker"
-//   >
-//     <NotePicker
-//       channel={number('channel', 0, 'NotePicker')}
-//       disabled={boolean('disabled', false, 'NotePicker')}
-//       isMelodicMode={boolean('isMelodicMode', false, 'NotePicker')}
-//       label={text('label', 'Note #', 'NotePicker')}
-//       mapping={gmMapping}
-//       onChange={action('handleChange')}
-//       shrinkLabel={boolean('shrinkLabel', false, 'NotePicker')}
-//       value={number('value', 38, {}, 'NotePicker')}
-//     />
-//     <br />
-//     <NotePicker
-//       channel={number('channel', 0, 'NotePicker2')}
-//       disabled={boolean('disabled', false, 'NotePicker2')}
-//       isMelodicMode={boolean('isMelodicMode', false, 'NotePicker2')}
-//       label="No mapping"
-//       onChange={action('handleChange2')}
-//       shrinkLabel={boolean('shrinkLabel', false, 'NotePicker')}
-//       value={number('value', 38, {}, 'NotePicker2')}
-//     />
-//     <br />
-//     <NotePicker
-//       channel={number('channel', 0, 'NotePicker3')}
-//       disabled={boolean('disabled', false, 'NotePicker3')}
-//       isMelodicMode={boolean('isMelodicMode', false, 'NotePicker3')}
-//       label="Action button"
-//       mapping={gmMapping}
-//       onChange={action('handleChange3')}
-//       selectProps={{actionButton:<button onClick={e=>{
-//         console.log('click')
-//         }}>?</button>}}
-//       shrinkLabel={boolean('shrinkLabel', false, 'NotePicker')}
-//       value={number('value', 38, {}, 'NotePicker3')}
-//     />
-//   </Story>
-// </Canvas>
-
 const PianoPickerStory: StoryObj<typeof PianoPicker> = {
   render: args => <PianoPicker {...args} />,
   args: {
@@ -293,6 +271,7 @@ const ValuePickerStory: StoryObj<typeof ValuePicker> = {
 
 export {
   ChannelPickerStory as ChannelPicker,
+  ChannelPickerUndefinedStory as ChannelPickerNoValue,
   ChannelMappingPickerStory as ChannelMappingPicker,
   CCPickerStory as ContinuousChangePicker,
   KnobStory as Knob,
@@ -302,6 +281,7 @@ export {
   NotePickerStory1 as NotePickerSimple,
   NotePickerStory2 as NotePickerNoMapping,
   NotePickerStory3 as NotePickerActionButton,
+  NotePickerStory4 as NotePickerNoValue,
   OctavePlayerStory as OctavePlayer,
   PianoPickerStory as PianoPicker,
   PolarityPickerStory as PolarityPicker,