zds-pickers 4.1.0 → 4.1.3

package/lib/pickers/ResponseCurve.tsx

@@ -1,251 +0,0 @@
-import { useRef } from 'react'
-import useComponentSize from '../hooks/useComponentSize'
-import {
-  type Curve,
-  responseCurves as origResponseCurves,
-} from '../midi/export'
-import { DefaultTooltip, type TooltipProps } from '../other/DefaultTooltip'
-import { SvgText } from '../other/SvgText'
-
-type ResponseCurveType = {
-  value: Curve
-  label: React.ReactNode
-  c1: number
-  c2: number
-  x1: number
-  y1: number
-  x2: number
-  y2: number
-  labelX: number
-  labelY: number
-}
-
-// const width = 218
-// const height = 150
-const axisOffset = 20
-const buttonSize = 15
-
-const axisX1 = axisOffset
-const axisY1 = axisOffset
-
-type ResponseCurveProps = {
-  autosize: boolean
-  disabled?: boolean
-  inverted: boolean
-  onChange: (event: { target: { value: Curve } }) => void
-  Tooltip: React.FC<TooltipProps>
-  value: Curve
-}
-
-const ResponseCurve = (props: ResponseCurveProps) => {
-  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 = origResponseCurves.map(
-    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: <explanation>
-    ({ value, label }): ResponseCurveType => {
-      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 0:
-          c1 = xMid
-          c2 = yMid
-          labelY += 3
-
-          break
-        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 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 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 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 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 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 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 (
-    <div
-      className="response-curve-picker"
-      ref={ref}>
-      <svg {...svgProps}>
-        <rect
-          className="container"
-          height={height}
-          rx={3}
-          ry={3}
-          width={width}
-          x={0}
-          y={0}
-        />
-
-        <SvgText
-          className="axis"
-          textAnchor="middle"
-          transform={`translate(${axisX1 - 14} ${height / 2}) rotate(90)`}
-          x={0}
-          y={0}
-          text="Applied force"
-        />
-
-        <SvgText
-          className="axis"
-          textAnchor="middle"
-          transform={`translate(${width / 2} ${axisY2 + 13})`}
-          x={0}
-          y={0}
-          text="Output (velocity)"
-        />
-
-        <line
-          className="axis"
-          x1={axisX1}
-          x2={axisX1}
-          y1={axisY1}
-          y2={axisY2}
-        />
-        <line
-          className="axis"
-          x1={axisX1}
-          x2={axisX2}
-          y1={axisY2}
-          y2={axisY2}
-        />
-
-        {responseCurves.map(
-          ({ value, label, x1, y1, x2, y2, c1, c2, labelX, labelY }) => (
-            <g key={value}>
-              <path
-                className={value === responseCurve ? 'curve-selected' : 'curve'}
-                d={`M${x1} ${y1} C ${c1} ${c2}, ${c1} ${c2}, ${x2} ${y2}`}
-              />
-
-              <Tooltip
-                placement="left"
-                title={label}>
-                <rect
-                  className={
-                    value === responseCurve ? 'button-selected' : 'button'
-                  }
-                  height={buttonSize}
-                  onClick={
-                    disabled
-                      ? f => f
-                      : () =>
-                          onChange({
-                            target: {
-                              value: Number.parseInt(String(value)) as Curve,
-                            },
-                          })
-                  }
-                  transform={`translate(${labelX + 3} ${labelY - buttonSize / 1.05}) rotate(45)`}
-                  width={buttonSize}
-                />
-              </Tooltip>
-
-              <text
-                className={
-                  value === responseCurve ? 'button-selected' : 'button'
-                }
-                transform={`translate(${labelX} ${labelY})`}>
-                {value}
-                <title>{label}</title>
-              </text>
-            </g>
-          ),
-        )}
-      </svg>
-    </div>
-  )
-}
-
-export { ResponseCurve }
-
-export type { ResponseCurveType, ResponseCurveProps }

package/lib/pickers/ResponseCurvePicker.tsx

@@ -1,75 +0,0 @@
-import { forwardRef, useCallback } from 'react'
-import type { GroupBase, SelectInstance } from 'react-select'
-import { type Curve, responseCurves } from '../midi/export'
-import { DefaultTooltip, type TooltipProps } from '../other/DefaultTooltip'
-import { findObj } from '../utils'
-import { ResponseCurve } from './ResponseCurve'
-import { Select } from './Select'
-import type { Option, SelectProps } from './Select'
-
-type ResponseCurvePickerProps = SelectProps<Curve> & {
-  inverted?: boolean
-  Tooltip?: React.FC<TooltipProps>
-}
-
-type ResponseCurvePickerRef = SelectInstance<
-  Option<Curve>,
-  false,
-  GroupBase<Option<Curve>>
->
-
-const ResponseCurvePicker = forwardRef<
-  SelectInstance<Option<Curve>, false, GroupBase<Option<Curve>>>,
-  ResponseCurvePickerProps
->((props, ref) => {
-  const {
-    Tooltip = DefaultTooltip,
-    inverted = false,
-    onChange,
-    value,
-    ...rest
-  } = props
-
-  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 }) => (
-      <ResponseCurve
-        autosize
-        inverted={inverted}
-        onChange={({ target: { value: v } }) => {
-          setValue(v)
-          onChange(v)
-        }}
-        Tooltip={Tooltip}
-        value={Number.parseInt(String(value)) as Curve}
-      />
-    ),
-    [Tooltip, inverted, onChange, value],
-  )
-
-  return (
-    <Select
-      {...rest}
-      components={{
-        Placeholder,
-        MenuList,
-      }}
-      isSearchable={false}
-      onChange={f => f}
-      ref={ref}
-      value={value}
-    />
-  )
-})
-
-export { ResponseCurvePicker }
-
-export type { ResponseCurvePickerProps, ResponseCurvePickerRef }

package/lib/pickers/Select.tsx

@@ -1,268 +0,0 @@
-import {
-  Children,
-  type JSX,
-  forwardRef,
-  isValidElement,
-  useCallback,
-  useMemo,
-} from 'react'
-import ReactSelect, {
-  type GroupBase,
-  type IndicatorsContainerProps,
-  components as originalComponents,
-  type PlaceholderProps,
-  type SelectComponentsConfig,
-  type SelectInstance,
-  type SingleValue,
-  type StylesConfig,
-  type ValueContainerProps,
-} from 'react-select'
-import { omit } from '../utils'
-
-const noSelection = 255
-
-const { IndicatorsContainer, Placeholder, ValueContainer } = originalComponents
-
-type PassedSelectProps = {
-  actionButton?: React.ReactNode
-  inputValue?: string
-  placeholder?: React.ReactNode
-}
-
-type Option<T> = {
-  label: React.ReactNode
-  value: T
-}
-
-const noSelectionOption: Option<number> = {
-  label: '--',
-  value: noSelection,
-}
-
-interface CustomIndicatorsContainerProps<T>
-  extends Omit<IndicatorsContainerProps<Option<T>, false>, 'selectProps'> {
-  children: React.ReactNode
-  selectProps: IndicatorsContainerProps<Option<T>, false>['selectProps'] &
-    PassedSelectProps
-}
-
-const CustomIndicatorsContainer = <T,>(
-  props: CustomIndicatorsContainerProps<T>,
-) => {
-  const { children, ...rest } = props
-  const actionButton = rest.selectProps?.actionButton
-
-  return (
-    <IndicatorsContainer {...rest}>
-      <div
-        onMouseDown={e => {
-          e.stopPropagation()
-          e.preventDefault()
-        }}
-        style={{ display: 'flex' }}>
-        {actionButton}
-        {children}
-      </div>
-    </IndicatorsContainer>
-  )
-}
-
-type CustomValueContainerProps<T> = (
-  | ValueContainerProps<Option<T>, false>
-  | PlaceholderProps<Option<T>, false>
-) & {
-  children: React.ReactNode
-  hasValue?: boolean
-  isFocused?: boolean
-}
-
-const CustomValueContainer = <T,>({
-  children,
-  ...props
-}: CustomValueContainerProps<T>) => (
-  <ValueContainer {...props}>
-    <Placeholder
-      {...props}
-      innerProps={props.innerProps || {}}
-      className={props.hasValue || props.selectProps.inputValue ? 'shrunk' : ''}
-      isFocused={props.isFocused ?? false}>
-      {props.selectProps.placeholder}
-    </Placeholder>
-    {Children.map(children, child =>
-      isValidElement(child) && child.type !== Placeholder ? child : null,
-    )}
-  </ValueContainer>
-)
-
-type SelectProps<T> = SelectComponentsConfig<
-  Option<T>,
-  false,
-  GroupBase<Option<T>>
-> & {
-  actionButton?: React.ReactNode
-  className?: string
-  components?: object
-  disabled?: boolean
-  filterOptions?: (candidate: Option<T>, inputValue: string) => boolean
-  formatOptionLabel?: (
-    option: Option<unknown>,
-    { context }: { context: 'menu' | 'value' },
-  ) => React.ReactNode
-  isSearchable?: boolean
-  label?: string
-  menuPortalTarget?: HTMLElement | null
-  menuPosition?: 'fixed' | 'absolute'
-  menuShouldScrollIntoView?: boolean
-  onChange: (value: Option<T>['value']) => void
-  options: Option<T>[] | { options: Option<T>[] }[]
-  preserveMenuWidth?: boolean
-  selectProps?: PassedSelectProps
-  shrinkLabel?: boolean
-  value?: Option<T>['value']
-}
-
-const Select = forwardRef(
-  <T,>(
-    props: SelectProps<T>,
-    ref: React.ForwardedRef<
-      SelectInstance<Option<T>, false, GroupBase<Option<T>>>
-    >,
-  ) => {
-    const {
-      components,
-      disabled,
-      label,
-      onChange,
-      options = [],
-      preserveMenuWidth,
-      shrinkLabel,
-      value,
-      ...rest
-    } = props
-
-    const handleChange = useCallback(
-      (option: SingleValue<Option<unknown>>) => {
-        if (option) {
-          onChange((option as Option<T>).value)
-        }
-      },
-      [onChange],
-    )
-
-    const flatOptionsList = options.reduce<Option<T>[]>((acc, entry) => {
-      if ('options' in entry) {
-        return acc.concat(entry.options)
-      }
-      return acc.concat(entry)
-    }, [])
-
-    const selectedOption =
-      flatOptionsList.find(option => value === option.value) || undefined
-
-    const styles: unknown = useMemo(() => {
-      const base = preserveMenuWidth
-        ? {
-            menu: (base: Record<string, unknown>) => omit('width')(base),
-            menuList: (base: object) => ({
-              ...base,
-              overflowX: 'hidden',
-            }),
-            option: (base: object) => ({
-              ...base,
-              whiteSpace: 'nowrap',
-              paddingRight: 10,
-            }),
-          }
-        : {}
-
-      return shrinkLabel
-        ? {
-            ...base,
-            container: (provided: object /* , state */) => ({
-              ...provided,
-              marginTop: 10,
-            }),
-            placeholder: (
-              _provided: object,
-              state: PlaceholderProps<Option<T>, false>,
-            ) => ({
-              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: object /* , state */) => ({
-              ...provided,
-              overflow: 'visible',
-            }),
-          }
-        : {
-            ...base,
-          }
-    }, [preserveMenuWidth, shrinkLabel])
-
-    return shrinkLabel ? (
-      <div className="zds-pickers__container">
-        <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 as React.Ref<any>}
-          styles={
-            styles as StylesConfig<
-              Option<unknown>,
-              false,
-              GroupBase<Option<unknown>>
-            >
-          }
-          value={selectedOption}
-        />
-      </div>
-    ) : (
-      <div className="zds-pickers__container">
-        {Boolean(label) && <span className="zds-pickers__label">{label}</span>}
-        <ReactSelect
-          {...rest}
-          classNamePrefix="zds-pickers"
-          components={{
-            IndicatorsContainer: CustomIndicatorsContainer,
-            ...components,
-          }}
-          isDisabled={disabled}
-          onChange={handleChange}
-          options={flatOptionsList}
-          // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-          ref={ref as React.Ref<any>}
-          styles={
-            styles as StylesConfig<
-              Option<unknown>,
-              false,
-              GroupBase<Option<unknown>>
-            >
-          }
-          value={selectedOption}
-        />
-      </div>
-    )
-  },
-) as <T>(
-  props: SelectProps<T> & {
-    ref?: React.ForwardedRef<
-      SelectInstance<Option<T>, false, GroupBase<Option<T>>>
-    >
-  },
-) => JSX.Element
-
-export { noSelection, noSelectionOption, Select }
-
-export type { Option, SelectProps }

package/lib/pickers/StatusPicker.tsx

@@ -1,30 +0,0 @@
-import type { Status } from 'lib/midi/export'
-import { forwardRef } from 'react'
-import type { GroupBase, SelectInstance } from 'react-select'
-import { Select } from './Select'
-import type { Option, SelectProps } from './Select'
-
-type StatusPickerProps = Omit<SelectProps<Status>, 'options'> & {
-  statuses: Option<Status>[]
-}
-
-type StatusPickerRef = SelectInstance<
-  Option<Status>,
-  false,
-  GroupBase<Option<Status>>
->
-
-const StatusPicker = forwardRef<
-  SelectInstance<Option<Status>, false, GroupBase<Option<Status>>>,
-  StatusPickerProps
->(({ statuses, ...rest }, ref) => (
-  <Select<Status>
-    {...rest}
-    options={statuses}
-    ref={ref}
-  />
-))
-
-export { StatusPicker }
-
-export type { StatusPickerProps, StatusPickerRef }

package/lib/pickers/ValuePicker.tsx

@@ -1,67 +0,0 @@
-import { forwardRef, useCallback, useMemo } from 'react'
-import type { GroupBase, SelectInstance } from 'react-select'
-import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault'
-import { arraySequence, assertRange } from '../utils'
-import { Select } from './Select'
-import type { Option, SelectProps } from './Select'
-
-type ValuePickerProps = Omit<SelectProps<number>, 'options'> & {
-  highToLow?: boolean
-  max?: number
-  min?: number
-}
-
-type ValuePickerRef = SelectInstance<
-  Option<number>,
-  false,
-  GroupBase<Option<number>>
->
-
-const ValuePicker = forwardRef<
-  SelectInstance<Option<number>, false, GroupBase<Option<number>>>,
-  ValuePickerProps
->((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) as unknown as Option<number>[]
-  }, [highToLow, max, min])
-
-  const [value, setValue] = useStateWithDynamicDefault(initialValue)
-
-  const handleChange = useCallback(
-    (v: number | string) => {
-      onChange(assertRange(v, max, min))
-
-      setValue(Number.parseInt(String(v), 10))
-    },
-    [max, min, onChange, setValue],
-  )
-
-  return (
-    <Select
-      {...rest}
-      disabled={disabled}
-      onChange={handleChange}
-      options={options}
-      ref={ref}
-      value={value}
-    />
-  )
-})
-
-export { ValuePicker }
-
-export type { ValuePickerProps, ValuePickerRef }