zds-pickers 4.0.7 → 4.0.9

package/lib/pickers/ChannelMappingPicker.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, 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';
+const defaultOptions = arraySequence(16).map(value => ({
+    value,
+    label: value,
+}));
+const ChannelMappingPicker = forwardRef(({ channels, className, ...rest }, ref) => {
+    const [options, setOptions] = useState([]);
+    const formatOptionLabel = useCallback(({ value, label }, { context }) => {
+        if (value === 'separator') {
+            return _jsx("span", { className: "zds-mappings-user-mapping", children: label });
+        }
+        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" })] }));
+    }, [channels]);
+    useEffect(() => {
+        const result = defaultOptions.sort((a, b) => {
+            if (typeof a.value === 'number' &&
+                typeof b.value === 'number' &&
+                channels[a.value] &&
+                !channels[b.value]) {
+                return -1;
+            }
+            if (typeof a.value === 'number' &&
+                typeof b.value === 'number' &&
+                !channels[a.value] &&
+                channels[b.value]) {
+                return 1;
+            }
+            if (typeof a.value === 'number' && typeof b.value === 'number') {
+                return a.value - b.value;
+            }
+            return 0;
+        });
+        const numFilled = result.filter(({ value }) => typeof value === 'number' && !!channels[value]).length;
+        const separatorExists = result.some(({ value }) => value === 'separator');
+        if (numFilled && numFilled < 16 && !separatorExists) {
+            // insert a separator after the count of filled items
+            result.splice(numFilled, 0, { label: _jsx("hr", {}), value: 'separator' });
+        }
+        setOptions(result);
+    }, [channels]);
+    return (_jsx(Select, { ...rest, className: cl(className, 'channel-mapping-picker'), formatOptionLabel: formatOptionLabel, options: options, ref: ref }));
+});
+export default ChannelMappingPicker;

package/lib/pickers/ChannelMappingPicker.tsx

@@ -132,4 +132,8 @@ const ChannelMappingPicker = forwardRef<
 
 export default ChannelMappingPicker
 
-export type { ChannelMappingPickerProps, ChannelMappingPickerRef }
+export type {
+  ChannelMappingOption,
+  ChannelMappingPickerProps,
+  ChannelMappingPickerRef,
+}

package/lib/pickers/ChannelPicker.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cl from 'classnames';
+import { forwardRef } from 'react';
+import { arraySequence } from '../utils';
+import Select 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) {
+        return String(option.label).toLowerCase().includes(input.toLowerCase());
+    }
+    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 }));
+});
+export default ChannelPicker;

package/lib/pickers/Knob.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault';
+import RotaryKnob from '../rotaryKnob';
+import { assertRange } from '../utils';
+import knobSkin10 from './knobSkin10';
+const Knob = (props) => {
+    const { disabled = false, max = 127, min = 0, onChange, value: initialValue = 0, wheelEnabled = false, wheelSensitivity = 0.1, ...rest } = props;
+    const [value, setValue] = useStateWithDynamicDefault(initialValue);
+    const handleChange = (val) => {
+        if (disabled)
+            return;
+        const newValue = assertRange(Number.parseInt(String(val), 10), max, min);
+        setValue(newValue);
+        if (onChange) {
+            onChange(newValue);
+        }
+    };
+    const handleWheel = useCallback((event) => {
+        if (!wheelEnabled || disabled)
+            return;
+        event.preventDefault();
+        const delta = -event.deltaY * wheelSensitivity;
+        const newValue = assertRange(value + delta, max, min);
+        setValue(newValue);
+        if (onChange) {
+            onChange(newValue);
+        }
+    }, [
+        wheelEnabled,
+        disabled,
+        wheelSensitivity,
+        value,
+        max,
+        min,
+        onChange,
+        setValue,
+    ]);
+    return (_jsx(RotaryKnob, { clampMax: 320, clampMin: 40, className: "zds-pickers__knob-container", disabled: disabled, onChange: handleChange, onWheel: wheelEnabled ? handleWheel : undefined, preciseMode: false, rotateDegrees: 180, 
+        /**
+         * To see all skins:
+         * http://react-rotary-knob-skins-preview.surge.sh/
+         *
+         * NOTE: we've copied the one we use into this package because the skins
+         * pack package does not work in Electron.
+         */
+        skin: knobSkin10, style: { opacity: disabled ? 0.4 : 1 }, unlockDistance: 0, defaultValue: value, max, min, value, ...rest }));
+};
+export default Knob;

package/lib/pickers/KnobPicker.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { arraySequence } from '../utils';
+import Knob from './Knob';
+import Select from './Select';
+const KnobPicker = forwardRef((props, ref) => {
+    const { disabled, highToLow, includeLabel, includePicker, knobProps, label, max = 127, min = 0, onChange, shrinkLabel, value = 0, wheelEnabled, wheelSensitivity = 0.1, ...rest } = props;
+    const options = useMemo(() => {
+        const result = arraySequence(max - min + 1)
+            .map(i => min + i)
+            .map((i) => ({ value: i, label: String(i) }));
+        return highToLow ? result.reverse() : result;
+    }, [highToLow, max, min]);
+    return (_jsxs("div", { className: "zds-pickers__container", children: [Boolean(!shrinkLabel && Boolean(label)) && (_jsx("span", { className: "zds-pickers__label", children: label })), _jsxs("div", { style: { display: 'inline-flex', gap: 10, alignItems: 'center' }, children: [Boolean(includePicker) && (_jsx(Select, { ...rest,
+                        disabled,
+                        isDisabled: disabled,
+                        onChange,
+                        options,
+                        ref,
+                        value })), _jsx(Knob, { disabled,
+                        max,
+                        min,
+                        onChange,
+                        value,
+                        wheelEnabled,
+                        wheelSensitivity,
+                        ...knobProps })] })] }));
+});
+export default KnobPicker;

package/lib/pickers/LatchPicker.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import Select from './Select';
+const options = [
+    { value: 0, label: 'Momentary' },
+    { value: 1, label: 'Latching' },
+];
+const LatchPicker = forwardRef((props, ref) => (_jsx(Select, { ...props, options: options, ref: ref })));
+export default LatchPicker;

package/lib/pickers/MappingPicker.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { getStockNames, getUserMappingNames } from 'zds-mappings';
+import Select from './Select';
+const MappingPicker = forwardRef(({ allowClearing, ...rest }, ref) => {
+    const stockMappings = getStockNames();
+    const userMappings = getUserMappingNames();
+    const options = useMemo(() => {
+        const result = allowClearing
+            ? [
+                {
+                    value: 'No Mapping',
+                    label: (_jsx("span", { className: "zds-mappings-clear-mapping", children: "No Mapping" })),
+                },
+            ]
+            : [];
+        return [
+            ...result,
+            {
+                label: allowClearing ? _jsx("hr", {}) : '',
+                options: userMappings.map(label => ({
+                    value: label,
+                    label: _jsx("span", { className: "zds-mappings-user-mapping", children: label }),
+                })),
+            },
+            {
+                label: userMappings.length ? _jsx("hr", {}) : allowClearing ? _jsx("hr", {}) : '',
+                options: stockMappings.map(label => ({
+                    label,
+                    value: label,
+                })),
+            },
+        ];
+    }, [allowClearing, stockMappings, userMappings]);
+    return (_jsx(Select, { ...rest, options: options, ref: ref }));
+});
+export default MappingPicker;

package/lib/pickers/NotePicker.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo } from 'react';
+import { Midi } from 'tonal';
+import { emptyMapping } from 'zds-mappings';
+import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault';
+import { assertRange } from '../utils';
+import Select from './Select';
+const { midiToNoteName } = Midi;
+const formattedMapEntry = ({ note, name }) => `${note} ${name.length ? '-' : ''} ${name}`;
+const formattedListEntry = (label, idx) => ({
+    label,
+    value: idx + 1,
+});
+const NotePicker = forwardRef((props, ref) => {
+    const { channel, disabled = false, isMelodicMode = false, mapping, onChange, value: initialValue, ...rest } = props;
+    const options = useMemo(() => {
+        if (isMelodicMode) {
+            return emptyMapping()
+                .map(({ note }) => {
+                const midiNoteName = midiToNoteName(note, { sharps: false })
+                    .replace('b', '♭')
+                    .replace('#', '♯');
+                return `${midiNoteName} (#${note})`;
+            })
+                .map(formattedListEntry);
+        }
+        return (mapping || emptyMapping())
+            .map(formattedMapEntry)
+            .map(formattedListEntry);
+    }, [isMelodicMode, mapping]);
+    const [value, setValue] = useStateWithDynamicDefault(initialValue);
+    const handleChange = useCallback((v) => {
+        if (typeof v === 'string')
+            return;
+        const possibleNoteNumber = assertRange(v, 128, 0);
+        if (possibleNoteNumber > 0) {
+            onChange(possibleNoteNumber);
+        }
+        setValue(v);
+    }, [onChange, setValue]);
+    return (_jsx(Select, { ...rest, disabled: disabled, 
+        // isDisabled={disabled}
+        onChange: handleChange, options: options, ref: ref, value: value }));
+});
+export default NotePicker;

package/lib/pickers/PianoPicker.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Piano as ReactPiano } from 'zds-react-piano';
+import SoundfontProvider from '../other/SoundFontProvider';
+const firstNote = 21;
+const lastNote = 108;
+const numNotes = lastNote - firstNote - 1;
+const whiteNotes = numNotes * 0.7; // approx
+const audioContext = new window.AudioContext();
+const PianoPicker = ({ height, width, ...rest }) => {
+    const keyWidth = width / whiteNotes + 2;
+    const keyWidthToHeight = keyWidth / height;
+    return (_jsx("div", { children: _jsx(ReactPiano, { keyWidthToHeight: keyWidthToHeight, noteRange: { first: firstNote, last: lastNote }, width: width, ...rest }) }));
+};
+const WithProvider = ({ format, height, hostname, instrumentName, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, width, }) => (_jsx(SoundfontProvider, { audioContext,
+    format,
+    hostname,
+    instrumentName,
+    onChange,
+    soundfont, render: ({ isLoading, playNote, stopNote }) => (_jsx(PianoPicker, { disabled: isLoading, height,
+        onClick,
+        onDoubleClick,
+        onKeyMouseEnter,
+        onKeyMouseLeave,
+        playNote,
+        stopNote,
+        width })) }));
+export default WithProvider;

package/lib/pickers/PolarityPicker.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import Select from './Select';
+const PolarityPicker = forwardRef(({ labelOff = 'Normally Off', labelOn = 'Normally On', ...rest }, ref) => {
+    const options = [
+        { value: 0, label: labelOff },
+        { value: 1, label: labelOn },
+    ];
+    return (_jsx(Select, { ...rest, options: options, ref: ref }));
+});
+export default PolarityPicker;

package/lib/pickers/ResponseCurve.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import useComponentSize from '../hooks/useComponentSize';
+import DefaultTooltip from '../other/DefaultTooltip';
+import SVGText from '../other/SVGText';
+const RESPONSE_CURVE_0 = 0;
+const RESPONSE_CURVE_1 = 1;
+const RESPONSE_CURVE_2 = 2;
+const RESPONSE_CURVE_3 = 3;
+const RESPONSE_CURVE_4 = 4;
+const RESPONSE_CURVE_5 = 5;
+const RESPONSE_CURVE_6 = 6;
+const RESPONSE_CURVE_7 = 7;
+const RESPONSE_CURVES = [
+    {
+        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.',
+    },
+];
+// const width = 218
+// const height = 150
+const axisOffset = 20;
+const buttonSize = 15;
+const axisX1 = axisOffset;
+const axisY1 = axisOffset;
+const ResponseCurve = (props) => {
+    const { Tooltip = DefaultTooltip, autosize, disabled, inverted, onChange, value: responseCurve, } = props;
+    const ref = useRef(null);
+    const svgRef = useRef(null);
+    const { height: ourHeight, width: ourWidth } = useComponentSize(ref);
+    const width = autosize ? ourWidth || 218 : 218;
+    const height = autosize ? ourHeight || 150 : 150;
+    const axisX2 = width - axisOffset;
+    const axisY2 = height - axisOffset;
+    const xMid = width / 2;
+    const yMid = height / 2;
+    const svgProps = { ref: svgRef };
+    const responseCurves = RESPONSE_CURVES.map(
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: <explanation>
+    ({ value, label }) => {
+        let c1 = 0;
+        let c2 = 0;
+        let x1 = axisX1;
+        let y1 = inverted ? axisY1 : axisY2;
+        let x2 = axisX2;
+        let y2 = inverted ? axisY2 : axisY1;
+        let labelX = xMid;
+        let labelY = yMid;
+        switch (value) {
+            case RESPONSE_CURVE_0:
+                c1 = xMid;
+                c2 = yMid;
+                labelY += 3;
+                break;
+            case RESPONSE_CURVE_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 RESPONSE_CURVE_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 RESPONSE_CURVE_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 RESPONSE_CURVE_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 RESPONSE_CURVE_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 RESPONSE_CURVE_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 RESPONSE_CURVE_7:
+                x1 = inverted ? axisX1 : axisX2;
+                y1 = axisY1;
+                x2 = x1;
+                y2 = axisY2;
+                c1 = x1;
+                c2 = yMid;
+                labelX = x1 - 5;
+                labelY = height - 30;
+                break;
+            default:
+                break;
+        }
+        return {
+            value,
+            label,
+            c1,
+            c2,
+            x1,
+            y1,
+            x2,
+            y2,
+            labelX,
+            labelY,
+        };
+    });
+    return (_jsx("div", { className: "response-curve-picker", ref: ref, children: _jsxs("svg", { ...svgProps, children: [_jsx("rect", { className: "container", height: height, rx: 3, ry: 3, width: width, x: 0, y: 0 }), _jsx(SVGText, { className: "axis", textAnchor: "middle", transform: `translate(${axisX1 - 14} ${height / 2}) rotate(90)`, x: 0, y: 0, text: "Applied force" }), _jsx(SVGText, { className: "axis", textAnchor: "middle", transform: `translate(${width / 2} ${axisY2 + 13})`, x: 0, y: 0, text: "Output (velocity)" }), _jsx("line", { className: "axis", x1: axisX1, x2: axisX1, y1: axisY1, y2: axisY2 }), _jsx("line", { className: "axis", x1: axisX1, x2: axisX2, y1: axisY2, y2: axisY2 }), responseCurves.map(({ value, label, x1, y1, x2, y2, c1, c2, labelX, labelY }) => (_jsxs("g", { children: [_jsx("path", { className: value === responseCurve ? 'curve-selected' : 'curve', d: `M${x1} ${y1} C ${c1} ${c2}, ${c1} ${c2}, ${x2} ${y2}` }), _jsx(Tooltip, { placement: "left", title: label, children: _jsx("rect", { className: value === responseCurve ? 'button-selected' : 'button', height: buttonSize, onClick: disabled
+                                    ? f => f
+                                    : () => onChange({
+                                        target: {
+                                            value: Number.parseInt(String(value)),
+                                        },
+                                    }), transform: `translate(${labelX + 3} ${labelY - buttonSize / 1.05}) rotate(45)`, width: buttonSize }) }), _jsxs("text", { className: value === responseCurve ? 'button-selected' : 'button', transform: `translate(${labelX} ${labelY})`, children: [value, _jsx("title", { children: label })] })] }, value)))] }) }));
+};
+export default ResponseCurve;
+export { RESPONSE_CURVES };

package/lib/pickers/ResponseCurvePicker.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import DefaultTooltip from '../other/DefaultTooltip';
+import { findObj } from '../utils';
+import ResponseCurve, { RESPONSE_CURVES } 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)(RESPONSE_CURVES)?.label })), [value]);
+    const MenuList = useCallback(({ setValue }) => (_jsx(ResponseCurve, { autosize: true, inverted: inverted, onChange: ({ target: { value: v } }) => {
+            setValue(v);
+            onChange(v);
+        }, Tooltip: Tooltip, value: Number.parseInt(String(value)) })), [Tooltip, inverted, onChange, value]);
+    return (_jsx(Select, { ...rest, components: {
+            Placeholder,
+            MenuList,
+        }, isSearchable: false, onChange: f => f, ref: ref, value: value }));
+});
+export default ResponseCurvePicker;

package/lib/pickers/Select.js

@@ -0,0 +1,79 @@
+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 { IndicatorsContainer, Placeholder, ValueContainer } = originalComponents;
+const CustomIndicatorsContainer = ({ children, ...rest }) => {
+    const actionButton = rest.selectProps?.actionButton;
+    return (_jsx(IndicatorsContainer, { ...rest, children: _jsxs("div", { onMouseDown: e => {
+                e.stopPropagation();
+                e.preventDefault();
+            }, style: { display: 'flex' }, children: [actionButton, children] }) }));
+};
+const CustomValueContainer = ({ children, ...props }) => (_jsxs(ValueContainer, { ...props, children: [_jsx(Placeholder, { ...props, innerProps: props.innerProps || {}, className: props.hasValue || props.selectProps.inputValue ? 'shrunk' : '', isFocused: props.isFocused ?? false, children: props.selectProps.placeholder }), Children.map(children, child => isValidElement(child) && child.type !== Placeholder ? child : null)] }));
+const Select = forwardRef((props, ref) => {
+    const { components, disabled, label, onChange, options = [], preserveMenuWidth, shrinkLabel, value, ...rest } = props;
+    const handleChange = useCallback((option) => {
+        if (option) {
+            onChange(option.value);
+        }
+    }, [onChange]);
+    const flatOptionsList = options.reduce((acc, entry) => {
+        if ('entries' in entry) {
+            return acc.concat(entry.entries);
+        }
+        return acc.concat(entry);
+    }, []);
+    const selectedOption = flatOptionsList.find(option => value === option.value) || undefined;
+    const styles = useMemo(() => {
+        const base = preserveMenuWidth
+            ? {
+                menu: (base) => omit('width')(base),
+                menuList: (base) => ({
+                    ...base,
+                    overflowX: 'hidden',
+                }),
+                option: (base) => ({
+                    ...base,
+                    whiteSpace: 'nowrap',
+                    paddingRight: 10,
+                }),
+            }
+            : {};
+        return shrinkLabel
+            ? {
+                ...base,
+                container: (provided /* , state */) => ({
+                    ...provided,
+                    marginTop: 10,
+                }),
+                placeholder: (_provided, state) => ({
+                    position: 'absolute',
+                    left: state.hasValue || state.selectProps.inputValue ? -2 : '4%',
+                    top: state.hasValue || state.selectProps.inputValue ? -12 : '50%',
+                    transition: 'top 0.1s, font-size 0.1s, color 0.1s',
+                    fontSize: (state.hasValue || state.selectProps.inputValue) && 13,
+                }),
+                valueContainer: (provided /* , state */) => ({
+                    ...provided,
+                    overflow: 'visible',
+                }),
+            }
+            : {
+                ...base,
+            };
+    }, [preserveMenuWidth, shrinkLabel]);
+    return shrinkLabel ? (_jsx("div", { className: "zds-pickers__container", children: _jsx(ReactSelect, { ...rest, classNamePrefix: "zds-pickers", components: {
+                IndicatorsContainer: CustomIndicatorsContainer,
+                ValueContainer: CustomValueContainer,
+                ...components,
+            }, isDisabled: disabled, onChange: handleChange, options: flatOptionsList, placeholder: label, 
+            // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+            ref: ref, styles: styles, value: selectedOption }) })) : (_jsxs("div", { className: "zds-pickers__container", children: [Boolean(label) && _jsx("span", { className: "zds-pickers__label", children: label }), _jsx(ReactSelect, { ...rest, classNamePrefix: "zds-pickers", components: {
+                    IndicatorsContainer: CustomIndicatorsContainer,
+                    ...components,
+                }, isDisabled: disabled, onChange: handleChange, options: flatOptionsList, 
+                // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+                ref: ref, styles: styles, value: selectedOption })] }));
+});
+export default Select;

package/lib/pickers/StatusPicker.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import Select from './Select';
+const StatusPicker = forwardRef(({ statuses, ...rest }, ref) => (_jsx(Select, { ...rest, options: statuses, ref: ref })));
+export default StatusPicker;

package/lib/pickers/ValuePicker.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo } from 'react';
+import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault';
+import { arraySequence, assertRange } from '../utils';
+import Select from './Select';
+const ValuePicker = forwardRef((props, ref) => {
+    const { disabled, highToLow, max = 127, min = 0, onChange, value: initialValue = 0, ...rest } = props;
+    const options = useMemo(() => {
+        const result = arraySequence(max - min + 1)
+            .map(i => min + i)
+            .map(value => ({ value, label: value }));
+        return (highToLow
+            ? result.reverse()
+            : result);
+    }, [highToLow, max, min]);
+    const [value, setValue] = useStateWithDynamicDefault(initialValue);
+    const handleChange = useCallback((v) => {
+        onChange(assertRange(v, max, min));
+        setValue(Number.parseInt(String(v), 10));
+    }, [max, min, onChange, setValue]);
+    return (_jsx(Select, { ...rest, disabled: disabled, onChange: handleChange, options: options, ref: ref, value: value }));
+});
+export default ValuePicker;