zds-pickers 4.0.21 → 4.0.24

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
@@ -107,7 +114,7 @@ type SelectProps<T> = SelectComponentsConfig<
   menuPosition?: 'fixed' | 'absolute'
   menuShouldScrollIntoView?: boolean
   onChange: (value: Option<T>['value']) => void
-  options: Option<T>[] | { entries: Option<T>[] }[]
+  options: Option<T>[] | { options: Option<T>[] }[]
   preserveMenuWidth?: boolean
   selectProps?: PassedSelectProps
   shrinkLabel?: boolean
@@ -143,8 +150,8 @@ const Select = forwardRef(
     )
 
     const flatOptionsList = options.reduce<Option<T>[]>((acc, entry) => {
-      if ('entries' in entry) {
-        return acc.concat(entry.entries)
+      if ('options' in entry) {
+        return acc.concat(entry.options)
       }
       return acc.concat(entry)
     }, [])
@@ -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.24",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -40,38 +40,38 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@storybook/addon-actions": "8.5.0",
-    "@storybook/addon-docs": "8.5.0",
-    "@storybook/addon-essentials": "8.5.0",
-    "@storybook/addon-links": "8.5.0",
-    "@storybook/builder-vite": "8.5.0",
-    "@storybook/react-vite": "8.5.0",
-    "@storybook/react": "8.5.0",
+    "@storybook/addon-actions": "8.6.3",
+    "@storybook/addon-docs": "8.6.3",
+    "@storybook/addon-essentials": "8.6.3",
+    "@storybook/addon-links": "8.6.3",
+    "@storybook/builder-vite": "8.6.3",
+    "@storybook/react-vite": "8.6.3",
+    "@storybook/react": "8.6.3",
     "@types/d3-drag": "3.0.7",
-    "@types/d3-scale": "4.0.8",
+    "@types/d3-scale": "4.0.9",
     "@types/d3-selection": "3.0.11",
     "@types/react-dom": "18.3.5",
     "@types/react": "18.3.18",
-    "@vitejs/plugin-react-swc": "3.7.2",
+    "@vitejs/plugin-react-swc": "3.8.0",
     "classnames": "2.5.1",
-    "globals": "15.14.0",
+    "globals": "15.15.0",
     "immer": "10.1.1",
     "nodemon": "3.1.9",
     "prop-types": "15.8.1",
-    "react-dom": "18.2.0",
-    "react": "18.2.0",
+    "react-dom": "18.3.1",
+    "react": "18.3.1",
     "rc-slider": "11.1.8",
-    "storybook": "8.5.0",
-    "typescript": "5.7.3",
-    "vite": "6.0.7",
+    "storybook": "8.6.3",
+    "typescript": "5.8.2",
+    "vite": "6.2.0",
     "zds-mappings": "1.4.9"
   },
   "dependencies": {
-    "caniuse-lite": "1.0.30001695",
+    "caniuse-lite": "1.0.30001701",
     "d3-drag": "3.0.0",
     "d3-scale": "4.0.2",
     "d3-selection": "3.0.0",
-    "react-select": "5.9.0",
+    "react-select": "5.10.1",
     "react-svgmt": "2.0.2",
     "soundfont-player": "0.12.0",
     "tonal": "6.4.0",

package/stories/picker.stories.tsx

@@ -17,6 +17,11 @@ import { PianoPicker } from '../lib/pickers/PianoPicker'
 import { PolarityPicker } from '../lib/pickers/PolarityPicker'
 import { ResponseCurve } from '../lib/pickers/ResponseCurve'
 import { ResponseCurvePicker } from '../lib/pickers/ResponseCurvePicker'
+import {
+  type Option,
+  noSelection,
+  noSelectionOption,
+} from '../lib/pickers/Select'
 import { StatusPicker } from '../lib/pickers/StatusPicker'
 import { ValuePicker } from '../lib/pickers/ValuePicker'
 
@@ -36,6 +41,16 @@ const CCPickerStory: StoryObj<typeof CCPicker> = {
   },
 }
 
+const CCPickerUndefinedStory: StoryObj<typeof CCPicker> = {
+  render: args => <CCPicker {...args} />,
+  args: {
+    disabled: false,
+    label: 'CC #',
+    shrinkLabel: false,
+    value: noSelection,
+  },
+}
+
 const ChannelPickerStory: StoryObj<typeof ChannelPicker> = {
   render: args => <ChannelPicker {...args} />,
   args: {
@@ -52,7 +67,7 @@ const ChannelPickerUndefinedStory: StoryObj<typeof ChannelPicker> = {
     disabled: false,
     label: 'Channel',
     shrinkLabel: false,
-    value: undefined,
+    value: noSelection,
   },
 }
 
@@ -84,6 +99,39 @@ const ChannelMappingPickerStory: StoryObj<typeof ChannelMappingPicker> = {
   },
 }
 
+const ChannelMappingPickerUndefinedStory: StoryObj<
+  typeof ChannelMappingPicker
+> = {
+  render: args => <ChannelMappingPicker {...args} />,
+  args: {
+    channels: [
+      ...[
+        '',
+        'No Mapping',
+        '',
+        'Alesis DM Pro',
+        '',
+        '',
+        '',
+        'BFD3',
+        '',
+        '',
+        'Roland TD-20',
+        'Roland TD-30 Perc 1 (Latin)',
+        '',
+        '',
+        '',
+        '',
+      ].map((label, value): Option<number> => ({ label, value })),
+      noSelectionOption,
+    ],
+    disabled: false,
+    label: 'Channel',
+    shrinkLabel: false,
+    value: noSelection,
+  },
+}
+
 const KnobStory: StoryObj<typeof Knob> = {
   render: args => <Knob {...args} />,
   args: {
@@ -226,6 +274,18 @@ const PolarityPickerStory: StoryObj<typeof PolarityPicker> = {
   },
 }
 
+const PolarityPickerUndefinedStory: StoryObj<typeof PolarityPicker> = {
+  render: args => <PolarityPicker {...args} />,
+  args: {
+    disabled: false,
+    label: 'Polarity',
+    labelOff: 'Normally Off',
+    labelOn: 'Normally On',
+    shrinkLabel: false,
+    value: noSelection,
+  },
+}
+
 const ResponseCurveStory: StoryObj<typeof ResponseCurve> = {
   render: args => <ResponseCurve {...args} />,
   args: {
@@ -246,6 +306,18 @@ const ResponseCurvePickerStory: StoryObj<typeof ResponseCurvePicker> = {
   },
 }
 
+const ResponseCurvePickerUndefinedStory: StoryObj<typeof ResponseCurvePicker> =
+  {
+    render: args => <ResponseCurvePicker {...args} />,
+    args: {
+      disabled: false,
+      inverted: false,
+      label: 'Response',
+      shrinkLabel: false,
+      value: noSelection,
+    },
+  }
+
 const StatusPickerStory: StoryObj<typeof StatusPicker> = {
   render: args => <StatusPicker {...args} />,
   args: {
@@ -257,6 +329,17 @@ const StatusPickerStory: StoryObj<typeof StatusPicker> = {
   },
 }
 
+const StatusPickerUndefinedStory: StoryObj<typeof StatusPicker> = {
+  render: args => <StatusPicker {...args} />,
+  args: {
+    disabled: false,
+    label: 'Status Msg',
+    shrinkLabel: false,
+    statuses: statusOptions,
+    value: noSelection,
+  },
+}
+
 const ValuePickerStory: StoryObj<typeof ValuePicker> = {
   render: args => <ValuePicker {...args} />,
   args: {
@@ -269,11 +352,26 @@ const ValuePickerStory: StoryObj<typeof ValuePicker> = {
   },
 }
 
+const ValuePickerUndefinedStory: StoryObj<typeof ValuePicker> = {
+  render: args => <ValuePicker {...args} />,
+  args: {
+    disabled: false,
+    highToLow: false,
+    label: 'Value',
+    max: 127,
+    min: 0,
+    shrinkLabel: false,
+    value: noSelection,
+  },
+}
+
 export {
   ChannelPickerStory as ChannelPicker,
   ChannelPickerUndefinedStory as ChannelPickerNoValue,
   ChannelMappingPickerStory as ChannelMappingPicker,
-  CCPickerStory as ContinuousChangePicker,
+  ChannelMappingPickerUndefinedStory as ChannelMappingPickerNoValue,
+  CCPickerStory as ChangeController,
+  CCPickerUndefinedStory as ChangeControllerNoValue,
   KnobStory as Knob,
   KnobPickerStory as KnobPicker,
   LatchPickerStory as LatchPicker,
@@ -285,10 +383,14 @@ export {
   OctavePlayerStory as OctavePlayer,
   PianoPickerStory as PianoPicker,
   PolarityPickerStory as PolarityPicker,
+  PolarityPickerUndefinedStory as PolarityPickerNoValue,
   ResponseCurveStory as ResponseCurve,
   ResponseCurvePickerStory as ResponseCurvePicker,
+  ResponseCurvePickerUndefinedStory as ResponseCurvePickerNoValue,
   StatusPickerStory as StatusPicker,
+  StatusPickerUndefinedStory as StatusPickerNoValue,
   ValuePickerStory as ValuePicker,
+  ValuePickerUndefinedStory as ValuePickerNoValue,
 }
 
 export default meta