zds-pickers 4.0.21 → 4.0.22

package/dist/midi/export.js

@@ -32,38 +32,20 @@ const RESPONSE_CURVE_4 = 4;
 const RESPONSE_CURVE_5 = 5;
 const RESPONSE_CURVE_6 = 6;
 const RESPONSE_CURVE_7 = 7;
-const responseCurves = [
-    {
-        value: RESPONSE_CURVE_7,
-        label: 'Always maxed out.',
-    },
-    {
-        value: RESPONSE_CURVE_6,
-        label: 'Most sensitive.',
-    },
-    {
-        value: RESPONSE_CURVE_5,
-        label: 'Moderately sensitive.',
-    },
-    {
-        value: RESPONSE_CURVE_4,
-        label: 'A little sensitive.',
-    },
-    {
-        value: RESPONSE_CURVE_0,
-        label: 'Linear, no change.',
-    },
-    {
-        value: RESPONSE_CURVE_1,
-        label: 'A little less sensitive.',
-    },
-    {
-        value: RESPONSE_CURVE_2,
-        label: 'Even less sensitive.',
-    },
-    {
-        value: RESPONSE_CURVE_3,
-        label: 'Least sensitive.',
-    },
-];
-export { combineStatusWithChannel, extractStatusAndChannel, getStatusLabel, MASK_CHANNEL, MASK_STATUS, responseCurves, Statuses, statusOptions, };
+const ResponseCurveLabels = {
+    [RESPONSE_CURVE_0]: 'Linear, no change',
+    [RESPONSE_CURVE_1]: 'A little less sensitive',
+    [RESPONSE_CURVE_2]: 'Even less sensitive',
+    [RESPONSE_CURVE_3]: 'Least sensitive',
+    [RESPONSE_CURVE_4]: 'A little sensitive',
+    [RESPONSE_CURVE_5]: 'Moderately sensitive',
+    [RESPONSE_CURVE_6]: 'Most sensitive',
+    [RESPONSE_CURVE_7]: 'Always maxed out',
+};
+const responseCurves = Object.keys(ResponseCurveLabels)
+    .map(Number)
+    .map(key => ({
+    value: key,
+    label: ResponseCurveLabels[key],
+}));
+export { combineStatusWithChannel, extractStatusAndChannel, getStatusLabel, MASK_CHANNEL, MASK_STATUS, responseCurves, ResponseCurveLabels, Statuses, statusOptions, };

package/dist/pickers/ChannelMappingPicker.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import cl from 'classnames';
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 import { arraySequence } from '../utils';
-import { Select } from './Select';
+import { Select, noSelection } from './Select';
 const defaultOptions = arraySequence(16).map(value => ({
     value,
     label: value,
@@ -16,7 +16,7 @@ const ChannelMappingPicker = forwardRef(({ channels, className, ...rest }, ref)
         if (typeof value !== 'number')
             return null;
         const mapping = channels[value];
-        return mapping ? (_jsxs("span", { className: "mapping-entry", children: [_jsxs("b", { children: [value + 1, context === 'value' && ' -'] }), _jsx("span", { className: "mapping-entry-label", children: mapping.label })] })) : (_jsxs("span", { className: "mapping-entry empty-mapping-entry", children: [_jsxs("b", { children: [value + 1, context === 'value' && ' -'] }), _jsx("span", { className: "mapping-entry-label", children: "no mapping" })] }));
+        return mapping ? (_jsxs("span", { className: "mapping-entry", children: [_jsx("b", { children: value !== noSelection && (_jsxs(_Fragment, { children: [value + 1, context === 'value' && ' -'] })) }), _jsx("span", { className: "mapping-entry-label", children: mapping.label })] })) : (_jsxs("span", { className: "mapping-entry empty-mapping-entry", children: [_jsx("b", { children: value !== noSelection && (_jsxs(_Fragment, { children: [value + 1, context === 'value' && ' -'] })) }), _jsx("span", { className: "mapping-entry-label", children: "no mapping" })] }));
     }, [channels]);
     useEffect(() => {
         const result = defaultOptions.sort((a, b) => {
@@ -37,7 +37,8 @@ const ChannelMappingPicker = forwardRef(({ channels, className, ...rest }, ref)
             }
             return 0;
         });
-        const numFilled = result.filter(({ value }) => typeof value === 'number' && !!channels[value]).length;
+        const numFilled = result.filter(({ value }) => (typeof value === 'number' && !!channels[value]) ||
+            value === noSelection).length;
         const separatorExists = result.some(({ value }) => value === 'separator');
         if (numFilled && numFilled < 16 && !separatorExists) {
             // insert a separator after the count of filled items

package/dist/pickers/ChannelPicker.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import cl from 'classnames';
-import { forwardRef } from 'react';
+import { forwardRef, useCallback } from 'react';
 import { arraySequence } from '../utils';
 import { Select } from './Select';
+import { noSelection } from './Select';
 const options = arraySequence(16).map(value => ({
     value: value,
     label: `Channel ${value + 1}`,
 }));
-const formatOptionLabel = (option, { context }) => context === 'value' ? option.label : Number.parseInt(String(option.value)) + 1; // menu, e.g. the list of options
 const filterOptions = (option, input) => {
     // console.log(option, input)
     if (input) {
@@ -15,9 +15,15 @@ const filterOptions = (option, input) => {
     }
     return true;
 };
-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 }));
+const ChannelPicker = forwardRef(({ className, value = noSelection, ...rest }, ref) => {
+    const formatOptionLabel = useCallback((option, { context }) => {
+        if (value === undefined) {
+            return '--';
+        }
+        return context === 'value'
+            ? option.label
+            : Number.parseInt(String(option.value)) + 1; // menu, e.g. the list of options
+    }, [value]);
+    return (_jsx(Select, { ...rest, className: cl(className, 'channel-picker'), filterOptions: filterOptions, formatOptionLabel: formatOptionLabel, options: options, value: value, ref: ref }));
 });
 export { ChannelPicker };

package/dist/pickers/ResponseCurve.js

@@ -34,48 +34,48 @@ const ResponseCurve = (props) => {
         let labelX = xMid;
         let labelY = yMid;
         switch (value) {
-            case responseCurves[0].value:
+            case 0:
                 c1 = xMid;
                 c2 = yMid;
                 labelY += 3;
                 break;
-            case responseCurves[1].value:
+            case 1:
                 c1 = inverted ? xMid + width * 0.13 : xMid - width * 0.13;
                 c2 = yMid - height * 0.13;
                 labelX = inverted ? xMid + width * 0.1 : xMid - width * 0.1;
                 labelY = yMid - height * 0.09;
                 break;
-            case responseCurves[2].value:
+            case 2:
                 c1 = inverted ? xMid + width * 0.25 : xMid - width * 0.25;
                 c2 = yMid - height * 0.25;
                 labelX = inverted ? xMid + width * 0.2 : xMid - width * 0.2;
                 labelY = yMid - height * 0.17;
                 break;
-            case responseCurves[3].value:
+            case 3:
                 c1 = inverted ? xMid + width * 0.35 : xMid - width * 0.35;
                 c2 = yMid - height * 0.35;
                 labelX = inverted ? xMid + width * 0.28 : xMid - width * 0.28;
                 labelY = yMid - height * 0.25;
                 break;
-            case responseCurves[4].value:
+            case 4:
                 c1 = inverted ? xMid - width * 0.13 : xMid + width * 0.13;
                 c2 = yMid + height * 0.13;
                 labelX = inverted ? xMid - width * 0.1 : xMid + width * 0.1;
                 labelY = yMid + height * 0.1;
                 break;
-            case responseCurves[5].value:
+            case 5:
                 c1 = inverted ? xMid - width * 0.25 : xMid + width * 0.25;
                 c2 = yMid + height * 0.25;
                 labelX = inverted ? xMid - width * 0.2 : xMid + width * 0.2;
                 labelY = yMid + height * 0.18;
                 break;
-            case responseCurves[6].value:
+            case 6:
                 c1 = inverted ? xMid - width * 0.35 : xMid + width * 0.35;
                 c2 = yMid + height * 0.35;
                 labelX = inverted ? xMid - width * 0.28 : xMid + width * 0.28;
                 labelY = yMid + height * 0.25;
                 break;
-            case responseCurves[7].value:
+            case 7:
                 x1 = inverted ? axisX1 : axisX2;
                 y1 = axisY1;
                 x2 = x1;

package/dist/pickers/ResponseCurvePicker.js

@@ -7,7 +7,10 @@ import { ResponseCurve } from './ResponseCurve';
 import { Select } from './Select';
 const ResponseCurvePicker = forwardRef((props, ref) => {
     const { Tooltip = DefaultTooltip, inverted = false, onChange, value, ...rest } = props;
-    const Placeholder = useCallback(() => (_jsx("div", { className: "singleValue", children: findObj('value', value)(responseCurves)?.label })), [value]);
+    const Placeholder = useCallback(() => {
+        const option = findObj('value', value)(responseCurves);
+        return option ? (_jsx("div", { className: "singleValue", children: option.label })) : (_jsx("div", { className: "zds-pickers__placeholder", children: "Select..." }));
+    }, [value]);
     const MenuList = useCallback(({ setValue }) => (_jsx(ResponseCurve, { autosize: true, inverted: inverted, onChange: ({ target: { value: v } }) => {
             setValue(v);
             onChange(v);

package/dist/pickers/Select.js

@@ -2,7 +2,12 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Children, forwardRef, isValidElement, useCallback, useMemo, } from 'react';
 import ReactSelect, { components as originalComponents, } from 'react-select';
 import { omit } from '../utils';
+const noSelection = 255;
 const { IndicatorsContainer, Placeholder, ValueContainer } = originalComponents;
+const noSelectionOption = {
+    label: '--',
+    value: noSelection,
+};
 const CustomIndicatorsContainer = (props) => {
     const { children, ...rest } = props;
     const actionButton = rest.selectProps?.actionButton;
@@ -77,4 +82,4 @@ const Select = forwardRef((props, ref) => {
                 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
                 ref: ref, styles: styles, value: selectedOption })] }));
 });
-export { Select };
+export { noSelection, noSelectionOption, Select };

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

@@ -1,4 +1,4 @@
-import type { Option } from 'lib/pickers/Select';
+import type { Option, noSelection } from 'lib/pickers/Select';
 declare const Statuses: {
     readonly noteOff: 8;
     readonly noteOn: 9;
@@ -18,15 +18,17 @@ declare const extractStatusAndChannel: (status: number) => {
     status: Status;
     channel: number;
 };
-declare const RESPONSE_CURVE_0 = 0;
-declare const RESPONSE_CURVE_1 = 1;
-declare const RESPONSE_CURVE_2 = 2;
-declare const RESPONSE_CURVE_3 = 3;
-declare const RESPONSE_CURVE_4 = 4;
-declare const RESPONSE_CURVE_5 = 5;
-declare const RESPONSE_CURVE_6 = 6;
-declare const RESPONSE_CURVE_7 = 7;
-type Curve = typeof RESPONSE_CURVE_0 | typeof RESPONSE_CURVE_1 | typeof RESPONSE_CURVE_2 | typeof RESPONSE_CURVE_3 | typeof RESPONSE_CURVE_4 | typeof RESPONSE_CURVE_5 | typeof RESPONSE_CURVE_6 | typeof RESPONSE_CURVE_7;
+declare const ResponseCurveLabels: {
+    readonly 0: "Linear, no change";
+    readonly 1: "A little less sensitive";
+    readonly 2: "Even less sensitive";
+    readonly 3: "Least sensitive";
+    readonly 4: "A little sensitive";
+    readonly 5: "Moderately sensitive";
+    readonly 6: "Most sensitive";
+    readonly 7: "Always maxed out";
+};
+type Curve = keyof typeof ResponseCurveLabels | typeof noSelection;
 declare const responseCurves: Option<Curve>[];
-export { combineStatusWithChannel, extractStatusAndChannel, getStatusLabel, MASK_CHANNEL, MASK_STATUS, responseCurves, Statuses, statusOptions, };
+export { combineStatusWithChannel, extractStatusAndChannel, getStatusLabel, MASK_CHANNEL, MASK_STATUS, responseCurves, ResponseCurveLabels, Statuses, statusOptions, };
 export type { Curve, Status };

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 | undefined;
+import { type Option, type SelectProps, noSelection } from './Select';
+type Channel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | typeof noSelection;
 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/PolarityPicker.d.ts

@@ -1,6 +1,6 @@
 import type { GroupBase, SelectInstance } from 'react-select';
-import type { Option, SelectProps } from './Select';
-type Polarity = 0 | 1;
+import type { Option, SelectProps, noSelection } from './Select';
+type Polarity = 0 | 1 | typeof noSelection;
 type PolarityPickerProps = Omit<SelectProps<Polarity>, 'options'> & {
     labelOff?: string;
     labelOn?: string;

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

@@ -1,5 +1,6 @@
 import { type JSX } from 'react';
 import { type GroupBase, type SelectComponentsConfig, type SelectInstance } from 'react-select';
+declare const noSelection = 255;
 type PassedSelectProps = {
     actionButton?: React.ReactNode;
     inputValue?: string;
@@ -9,6 +10,7 @@ type Option<T> = {
     label: React.ReactNode;
     value: T;
 };
+declare const noSelectionOption: Option<number>;
 type SelectProps<T> = SelectComponentsConfig<Option<T>, false, GroupBase<Option<T>>> & {
     actionButton?: React.ReactNode;
     className?: string;
@@ -35,5 +37,5 @@ type SelectProps<T> = SelectComponentsConfig<Option<T>, false, GroupBase<Option<
 declare const Select: <T>(props: SelectProps<T> & {
     ref?: React.ForwardedRef<SelectInstance<Option<T>, false, GroupBase<Option<T>>>>;
 }) => JSX.Element;
-export { Select };
+export { noSelection, noSelectionOption, Select };
 export type { Option, SelectProps };

package/lib/midi/export.ts

@@ -1,4 +1,4 @@
-import type { Option } from 'lib/pickers/Select'
+import type { Option, noSelection } from 'lib/pickers/Select'
 
 const Statuses = {
   noteOff: 8, // 1000
@@ -51,50 +51,27 @@ const RESPONSE_CURVE_5 = 5
 const RESPONSE_CURVE_6 = 6
 const RESPONSE_CURVE_7 = 7
 
-type Curve =
-  | typeof RESPONSE_CURVE_0
-  | typeof RESPONSE_CURVE_1
-  | typeof RESPONSE_CURVE_2
-  | typeof RESPONSE_CURVE_3
-  | typeof RESPONSE_CURVE_4
-  | typeof RESPONSE_CURVE_5
-  | typeof RESPONSE_CURVE_6
-  | typeof RESPONSE_CURVE_7
+const ResponseCurveLabels = {
+  [RESPONSE_CURVE_0]: 'Linear, no change',
+  [RESPONSE_CURVE_1]: 'A little less sensitive',
+  [RESPONSE_CURVE_2]: 'Even less sensitive',
+  [RESPONSE_CURVE_3]: 'Least sensitive',
+  [RESPONSE_CURVE_4]: 'A little sensitive',
+  [RESPONSE_CURVE_5]: 'Moderately sensitive',
+  [RESPONSE_CURVE_6]: 'Most sensitive',
+  [RESPONSE_CURVE_7]: 'Always maxed out',
+} as const
 
-const responseCurves: Option<Curve>[] = [
-  {
-    value: RESPONSE_CURVE_7,
-    label: 'Always maxed out.',
-  },
-  {
-    value: RESPONSE_CURVE_6,
-    label: 'Most sensitive.',
-  },
-  {
-    value: RESPONSE_CURVE_5,
-    label: 'Moderately sensitive.',
-  },
-  {
-    value: RESPONSE_CURVE_4,
-    label: 'A little sensitive.',
-  },
-  {
-    value: RESPONSE_CURVE_0,
-    label: 'Linear, no change.',
-  },
-  {
-    value: RESPONSE_CURVE_1,
-    label: 'A little less sensitive.',
-  },
-  {
-    value: RESPONSE_CURVE_2,
-    label: 'Even less sensitive.',
-  },
-  {
-    value: RESPONSE_CURVE_3,
-    label: 'Least sensitive.',
-  },
-]
+// type Curve = (typeof Items)[keyof typeof Items]
+
+type Curve = keyof typeof ResponseCurveLabels | typeof noSelection
+
+const responseCurves: Option<Curve>[] = Object.keys(ResponseCurveLabels)
+  .map(Number)
+  .map(key => ({
+    value: key as Curve,
+    label: ResponseCurveLabels[key as keyof typeof ResponseCurveLabels],
+  }))
 
 export {
   combineStatusWithChannel,
@@ -103,6 +80,7 @@ export {
   MASK_CHANNEL,
   MASK_STATUS,
   responseCurves,
+  ResponseCurveLabels,
   Statuses,
   statusOptions,
 }

package/lib/pickers/ChannelMappingPicker.tsx

@@ -2,7 +2,7 @@ import cl from 'classnames'
 import { forwardRef, useCallback, useEffect, useState } from 'react'
 import type { GroupBase, SelectInstance } from 'react-select'
 import { arraySequence } from '../utils'
-import { Select } from './Select'
+import { Select, noSelection } from './Select'
 import type { Option, SelectProps } from './Select'
 
 type InternalValue = number | 'separator'
@@ -60,16 +60,24 @@ const ChannelMappingPicker = forwardRef<
       return mapping ? (
         <span className="mapping-entry">
           <b>
-            {value + 1}
-            {context === 'value' && ' -'}
+            {value !== noSelection && (
+              <>
+                {value + 1}
+                {context === 'value' && ' -'}
+              </>
+            )}
           </b>
           <span className="mapping-entry-label">{mapping.label}</span>
         </span>
       ) : (
         <span className="mapping-entry empty-mapping-entry">
           <b>
-            {value + 1}
-            {context === 'value' && ' -'}
+            {value !== noSelection && (
+              <>
+                {value + 1}
+                {context === 'value' && ' -'}
+              </>
+            )}
           </b>
           <span className="mapping-entry-label">no mapping</span>
         </span>
@@ -107,7 +115,9 @@ const ChannelMappingPicker = forwardRef<
     )
 
     const numFilled = result.filter(
-      ({ value }) => typeof value === 'number' && !!channels[value],
+      ({ value }) =>
+        (typeof value === 'number' && !!channels[value]) ||
+        value === noSelection,
     ).length
 
     const separatorExists = result.some(({ value }) => value === 'separator')

package/lib/pickers/ChannelPicker.tsx

@@ -1,9 +1,9 @@
 import cl from 'classnames'
-import { forwardRef } from 'react'
+import { forwardRef, useCallback } from 'react'
 import type { GroupBase, SelectInstance } from 'react-select'
 import { arraySequence } from '../utils'
 import { Select } from './Select'
-import type { Option, SelectProps } from './Select'
+import { type Option, type SelectProps, noSelection } from './Select'
 
 type Channel =
   | 0
@@ -22,7 +22,7 @@ type Channel =
   | 13
   | 14
   | 15
-  | undefined
+  | typeof noSelection
 
 interface FormatOptionLabelContext {
   context: 'menu' | 'value'
@@ -41,12 +41,6 @@ const options: Option<Channel>[] = arraySequence(16).map(value => ({
   label: `Channel ${value + 1}`,
 }))
 
-const formatOptionLabel = (
-  option: Option<unknown>,
-  { context }: FormatOptionLabelContext,
-) =>
-  context === 'value' ? option.label : Number.parseInt(String(option.value)) + 1 // menu, e.g. the list of options
-
 const filterOptions = (option: Option<Channel>, input: string) => {
   // console.log(option, input)
 
@@ -59,18 +53,26 @@ const filterOptions = (option: Option<Channel>, input: string) => {
 const ChannelPicker = forwardRef<
   SelectInstance<Option<Channel>, false, GroupBase<Option<Channel>>>,
   ChannelPickerProps
->(({ className, value = undefined, ...rest }, ref) => {
+>(({ className, value = noSelection, ...rest }, ref) => {
+  const formatOptionLabel = useCallback(
+    (option: Option<unknown>, { context }: FormatOptionLabelContext) => {
+      if (value === undefined) {
+        return '--'
+      }
+      return context === 'value'
+        ? option.label
+        : Number.parseInt(String(option.value)) + 1 // menu, e.g. the list of options
+    },
+    [value],
+  )
+
   return (
     <Select
       {...rest}
       className={cl(className, 'channel-picker')}
       filterOptions={filterOptions}
       formatOptionLabel={formatOptionLabel}
-      options={
-        value === undefined
-          ? [...options, { value: undefined, label: '--' }]
-          : options
-      }
+      options={options}
       value={value}
       ref={ref}
     />

package/lib/pickers/PolarityPicker.tsx

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react'
 import type { GroupBase, SelectInstance } from 'react-select'
 import { Select } from './Select'
-import type { Option, SelectProps } from './Select'
+import type { Option, SelectProps, noSelection } from './Select'
 
-type Polarity = 0 | 1
+type Polarity = 0 | 1 | typeof noSelection
 
 type PolarityPickerProps = Omit<SelectProps<Polarity>, 'options'> & {
   labelOff?: string

package/lib/pickers/ResponseCurve.tsx

@@ -74,55 +74,55 @@ const ResponseCurve = (props: ResponseCurveProps) => {
       let labelX = xMid
       let labelY = yMid
       switch (value) {
-        case responseCurves[0].value:
+        case 0:
           c1 = xMid
           c2 = yMid
           labelY += 3
 
           break
-        case responseCurves[1].value:
+        case 1:
           c1 = inverted ? xMid + width * 0.13 : xMid - width * 0.13
           c2 = yMid - height * 0.13
           labelX = inverted ? xMid + width * 0.1 : xMid - width * 0.1
           labelY = yMid - height * 0.09
           break
 
-        case responseCurves[2].value:
+        case 2:
           c1 = inverted ? xMid + width * 0.25 : xMid - width * 0.25
           c2 = yMid - height * 0.25
           labelX = inverted ? xMid + width * 0.2 : xMid - width * 0.2
           labelY = yMid - height * 0.17
           break
 
-        case responseCurves[3].value:
+        case 3:
           c1 = inverted ? xMid + width * 0.35 : xMid - width * 0.35
           c2 = yMid - height * 0.35
           labelX = inverted ? xMid + width * 0.28 : xMid - width * 0.28
           labelY = yMid - height * 0.25
           break
 
-        case responseCurves[4].value:
+        case 4:
           c1 = inverted ? xMid - width * 0.13 : xMid + width * 0.13
           c2 = yMid + height * 0.13
           labelX = inverted ? xMid - width * 0.1 : xMid + width * 0.1
           labelY = yMid + height * 0.1
           break
 
-        case responseCurves[5].value:
+        case 5:
           c1 = inverted ? xMid - width * 0.25 : xMid + width * 0.25
           c2 = yMid + height * 0.25
           labelX = inverted ? xMid - width * 0.2 : xMid + width * 0.2
           labelY = yMid + height * 0.18
           break
 
-        case responseCurves[6].value:
+        case 6:
           c1 = inverted ? xMid - width * 0.35 : xMid + width * 0.35
           c2 = yMid + height * 0.35
           labelX = inverted ? xMid - width * 0.28 : xMid + width * 0.28
           labelY = yMid + height * 0.25
           break
 
-        case responseCurves[7].value:
+        case 7:
           x1 = inverted ? axisX1 : axisX2
           y1 = axisY1
           x2 = x1

package/lib/pickers/ResponseCurvePicker.tsx

@@ -30,14 +30,14 @@ const ResponseCurvePicker = forwardRef<
     ...rest
   } = props
 
-  const Placeholder = useCallback(
-    () => (
-      <div className="singleValue">
-        {(findObj('value', value)(responseCurves) as Option<Curve>)?.label}
-      </div>
-    ),
-    [value],
-  )
+  const Placeholder = useCallback(() => {
+    const option = findObj('value', value)(responseCurves) as Option<Curve>
+    return option ? (
+      <div className="singleValue">{option.label}</div>
+    ) : (
+      <div className="zds-pickers__placeholder">Select...</div>
+    )
+  }, [value])
 
   const MenuList = useCallback(
     ({ setValue }: { setValue: (v: Curve) => void }) => (

package/lib/pickers/Select.tsx

@@ -19,6 +19,8 @@ import ReactSelect, {
 } from 'react-select'
 import { omit } from '../utils'
 
+const noSelection = 255
+
 const { IndicatorsContainer, Placeholder, ValueContainer } = originalComponents
 
 type PassedSelectProps = {
@@ -32,6 +34,11 @@ type Option<T> = {
   value: T
 }
 
+const noSelectionOption: Option<number> = {
+  label: '--',
+  value: noSelection,
+}
+
 interface CustomIndicatorsContainerProps<T>
   extends Omit<IndicatorsContainerProps<Option<T>, false>, 'selectProps'> {
   children: React.ReactNode
@@ -256,6 +263,6 @@ const Select = forwardRef(
   },
 ) => JSX.Element
 
-export { Select }
+export { noSelection, noSelectionOption, Select }
 
 export type { Option, SelectProps }

package/package.json

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