zds-pickers 4.0.5 → 4.0.6

package/lib/pickers/Select.tsx

@@ -0,0 +1,248 @@
+import {
+  Children,
+  type JSX,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useMemo,
+} from 'react'
+import ReactSelect, {
+  type GroupBase,
+  type IndicatorsContainerProps,
+  components as originalComponents,
+  type PlaceholderProps,
+  type SelectInstance,
+  type SingleValue,
+  type StylesConfig,
+  type ValueContainerProps,
+} from 'react-select'
+import { omit } from '../utils'
+
+const { IndicatorsContainer, Placeholder, ValueContainer } = originalComponents
+
+type Option<T> = {
+  label: React.ReactNode
+  value: T
+}
+
+interface CustomIndicatorsContainerProps<T>
+  extends Omit<IndicatorsContainerProps<Option<T>, false>, 'selectProps'> {
+  children: React.ReactNode
+  selectProps: IndicatorsContainerProps<Option<T>, false>['selectProps'] & {
+    actionButton?: React.ReactNode
+    inputValue?: string
+    placeholder?: React.ReactNode
+  }
+}
+
+const CustomIndicatorsContainer = <T,>({
+  children,
+  ...rest
+}: CustomIndicatorsContainerProps<T>) => {
+  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> = {
+  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
+  onChange: (value: Option<T>['value']) => void
+  options: Option<T>[] | { entries: Option<T>[] }[]
+  preserveMenuWidth?: boolean
+  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 ('entries' in entry) {
+        return acc.concat(entry.entries)
+      }
+      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 default Select
+
+export type { Option, SelectProps }

package/lib/pickers/StatusPicker.tsx

@@ -0,0 +1,28 @@
+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 = SelectProps<Status> & { 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 default StatusPicker
+
+export type { StatusPickerProps, StatusPickerRef }

package/lib/pickers/ValuePicker.tsx

@@ -0,0 +1,67 @@
+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 = SelectProps<number> & {
+  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 default ValuePicker
+
+export type { ValuePickerProps, ValuePickerRef }

package/lib/pickers/knobSkin10.tsx

@@ -0,0 +1,94 @@
+const knobSkin10 = {
+  knobX: 71.44,
+  knobY: 71.44,
+  svg: `
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="207px" height="207px" viewBox="0 0 207 207" version="1.1">
+  <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+  <desc>Created with Sketch.</desc>
+  <defs>
+      <linearGradient x1="50%" y1="50%" x2="50%" y2="100%" id="27c61b0f-392f-962d-de12-cb9da898274b">
+          <stop stop-color="#444040" stop-opacity="0.51098279" offset="0%"/>
+          <stop stop-color="#131111" stop-opacity="0.893200861" offset="100%"/>
+      </linearGradient>
+      <circle id="e966567b-3869-4bcd-76b6-2cf084e45390" cx="100.497487" cy="100.497487" r="99.4974874"/>
+      <filter x="-3.3%" y="-3.3%" width="106.5%" height="106.5%" filterUnits="objectBoundingBox" id="e2e6829f-0086-96b2-e92a-6f3809b8ac61">
+          <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"/>
+          <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+          <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+          <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"/>
+      </filter>
+      <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="0facd5c9-8e04-e83f-4842-8ba16f949942">
+          <stop stop-color="#FFFFFF" stop-opacity="0.5" offset="0%"/>
+          <stop stop-color="#000000" stop-opacity="0.5" offset="100%"/>
+      </linearGradient>
+      <circle id="c54189ed-7ea3-956c-f040-f0207548b268" cx="100.432161" cy="100.432161" r="86.4321608"/>
+      <filter x="-4.0%" y="-3.5%" width="108.1%" height="108.1%" filterUnits="objectBoundingBox" id="dedf2e7e-f008-c315-f682-e424d670f210">
+          <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"/>
+          <feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+          <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+          <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"/>
+      </filter>
+
+      <filter x="-5.3%" y="-11.3%" width="110.7%" height="122.6%" filterUnits="objectBoundingBox" id="12f618f7-e258-b597-3ed6-242484ddad8f">
+          <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"/>
+          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+          <feColorMatrix values="0 0 0 0 0.915577168   0 0 0 0 0.797591325   0 0 0 0 0.601479722  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"/>
+      </filter>
+      <pattern id="3cc0e5b8-1f0a-886b-f635-8fcb19212870" width="8.04411765" height="8.04411765" x="21.9558824" y="21.9558824" patternUnits="userSpaceOnUse">
+          <use xlink:href="#2b8719c1-286b-ebf8-a488-ac66a6598fc5" transform="scale(0.167585784,0.167585784)"/>
+      </pattern>
+      <image id="2b8719c1-286b-ebf8-a488-ac66a6598fc5" width="48" height="48" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEGWlDQ1BrQ0dDb2xvclNwYWNlR2VuZXJpY1JHQgAAOI2NVV1oHFUUPrtzZyMkzlNsNIV0qD8NJQ2TVjShtLp/3d02bpZJNtoi6GT27s6Yyc44M7v9oU9FUHwx6psUxL+3gCAo9Q/bPrQvlQol2tQgKD60+INQ6Ium65k7M5lpurHeZe58853vnnvuuWfvBei5qliWkRQBFpquLRcy4nOHj4g9K5CEh6AXBqFXUR0rXalMAjZPC3e1W99Dwntf2dXd/p+tt0YdFSBxH2Kz5qgLiI8B8KdVy3YBevqRHz/qWh72Yui3MUDEL3q44WPXw3M+fo1pZuQs4tOIBVVTaoiXEI/MxfhGDPsxsNZfoE1q66ro5aJim3XdoLFw72H+n23BaIXzbcOnz5mfPoTvYVz7KzUl5+FRxEuqkp9G/Ajia219thzg25abkRE/BpDc3pqvphHvRFys2weqvp+krbWKIX7nhDbzLOItiM8358pTwdirqpPFnMF2xLc1WvLyOwTAibpbmvHHcvttU57y5+XqNZrLe3lE/Pq8eUj2fXKfOe3pfOjzhJYtB/yll5SDFcSDiH+hRkH25+L+sdxKEAMZahrlSX8ukqMOWy/jXW2m6M9LDBc31B9LFuv6gVKg/0Szi3KAr1kGq1GMjU/aLbnq6/lRxc4XfJ98hTargX++DbMJBSiYMIe9Ck1YAxFkKEAG3xbYaKmDDgYyFK0UGYpfoWYXG+fAPPI6tJnNwb7ClP7IyF+D+bjOtCpkhz6CFrIa/I6sFtNl8auFXGMTP34sNwI/JhkgEtmDz14ySfaRcTIBInmKPE32kxyyE2Tv+thKbEVePDfW/byMM1Kmm0XdObS7oGD/MypMXFPXrCwOtoYjyyn7BV29/MZfsVzpLDdRtuIZnbpXzvlf+ev8MvYr/Gqk4H/kV/G3csdazLuyTMPsbFhzd1UabQbjFvDRmcWJxR3zcfHkVw9GfpbJmeev9F08WW8uDkaslwX6avlWGU6NRKz0g/SHtCy9J30o/ca9zX3Kfc19zn3BXQKRO8ud477hLnAfc1/G9mrzGlrfexZ5GLdn6ZZrrEohI2wVHhZywjbhUWEy8icMCGNCUdiBlq3r+xafL549HQ5jH+an+1y+LlYBifuxAvRN/lVVVOlwlCkdVm9NOL5BE4wkQ2SMlDZU97hX86EilU/lUmkQUztTE6mx1EEPh7OmdqBtAvv8HdWpbrJS6tJj3n0CWdM6busNzRV3S9KTYhqvNiqWmuroiKgYhshMjmhTh9ptWhsF7970j/SbMrsPE1suR5z7DMC+P/Hs+y7ijrQAlhyAgccjbhjPygfeBTjzhNqy28EdkUh8C+DU9+z2v/oyeH791OncxHOs5y2AtTc7nb/f73TWPkD/qwBnjX8BoJ98VQNcC+8AAAFFSURBVGgF7djbDYMwDAXQBjEMYqyqY1WMxTppLiJIQIA8ariWkp8IPuweO60am67r7MstY8wwjuPH7dMz3uUua63p+/7r9rePIRW/9QmQzCV9ub0YgSIgzhxvQkjFb1EZBAdEKolkfJTqtnb7bv/zOJm58moRE0AzYgFoRawAGhE7gDZEEKAJcQjQgjgFaEBcAtgRUQBmRDSAFZEEYEQkA9gQWQAmRDaABVEEYEAUAx5H4EaGOyw+SMl66mbXzNOD4k6gCPNUY/CFwF1YOn5zRxJJRINqaUbUuZA/79sd3wm3xIdbdS60rXzo2XVCbO60/HxKJgFKKv4CkEziuyKBWAE0InYAbYggQBPiEKAFcQrQgLgEsCOiAMyIaAArIgnAiEgGsCGyAEyIbAALogjAgCgGPI7AX9w6F3JtqHMhnMWLFSrSD9jOnakVHpZYAAAAAElFTkSuQmCC"/>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g id="s10" transform="translate(3.000000, 3.000000)">
+          <g id="container">
+              <g id="Oval-2">
+                  <use fill="black" fill-opacity="1" filter="url(#e2e6829f-0086-96b2-e92a-6f3809b8ac61)" xlink:href="#e966567b-3869-4bcd-76b6-2cf084e45390"/>
+                  <use stroke="#979797" stroke-width="1" fill="url(#27c61b0f-392f-962d-de12-cb9da898274b)" fill-rule="evenodd" xlink:href="#e966567b-3869-4bcd-76b6-2cf084e45390"/>
+              </g>
+              <g id="Oval-2">
+                  <use fill="black" fill-opacity="1" filter="url(#dedf2e7e-f008-c315-f682-e424d670f210)" xlink:href="#c54189ed-7ea3-956c-f040-f0207548b268"/>
+                  <use fill="" fill-rule="evenodd" xlink:href="#c54189ed-7ea3-956c-f040-f0207548b268"/>
+                  <use stroke="#4A4A4A" stroke-width="1" fill="url(#0facd5c9-8e04-e83f-4842-8ba16f949942)" fill-rule="evenodd" xlink:href="#c54189ed-7ea3-956c-f040-f0207548b268"/>
+              </g>
+              <g id="knob" transform="translate(28.574244, 28.574244)">
+                  <circle id="Oval-5" fill="#322E2E" cx="71.4356094" cy="71.4356094" r="71.4356094"/>
+                  <path d="M72.4209282,3.63066376 L88.6786876,16.869789 C81.585496,18.1548295 76.1662428,18.7973498 72.4209282,18.7973498 C68.6756135,18.7973498 63.2563604,18.1548295 56.1631688,16.869789 L72.4209282,3.63066376 Z" id="Rectangle" fill="#E6D7D7" transform="translate(72.420928, 11.214007) scale(1, -1) translate(-72.420928, -11.214007) "/>
+              </g>
+              <g id="label">
+                  <g id="labeltext" fill-opacity="1" fill="#E6D7D7">
+                      <text id="534f4e02-5541-3607-0966-af0b025d80e0" font-family="Helvetica" font-size="44" font-weight="normal" fill="#E6D7D7" class="text-7" filter="url(#12f618f7-e258-b597-3ed6-242484ddad8f)">
+          <tspan x="45.3246625" y="117.884225">10.10</tspan>
+      </text>
+                      <text id="92ebe866-c281-70c7-7b0e-a373cee013a9" font-family="Helvetica" font-size="44" font-weight="normal" fill="#E6D7D7" class="text-7">
+          <tspan x="45.3246625" y="117.884225">10.10</tspan>
+      </text>
+                  </g>
+                  <circle id="Oval-6" stroke="#979797" fill-opacity="0.730000019" fill="url(#3cc0e5b8-1f0a-886b-f635-8fcb19212870)" transform="translate(100.351759, 100.351759) rotate(-45.000000) translate(-100.351759, -100.351759) " cx="100.351759" cy="100.351759" r="70.3517588"/>
+              </g>
+          </g>
+      </g>
+  </g>
+</svg>
+`,
+  updateAttributes: [
+    {
+      element: '#labeltext text tspan',
+      content: (_props: React.CSSProperties, value: number) => value.toFixed(0),
+      attrs: [
+        {
+          name: 'text-anchor',
+          value: (/* props, value */) => 'middle',
+        },
+        {
+          name: 'x',
+          value: (/* props, value */) => '100',
+        },
+      ],
+    },
+  ],
+}
+
+export default knobSkin10

package/lib/rotaryKnob/InternalInput.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+type InternalInputProps = {
+  disabled?: boolean
+  min: number
+  max: number
+  value: number
+  step?: number
+  inputRef: React.RefObject<HTMLInputElement>
+  onChange: (val: number) => void
+  style?: React.CSSProperties
+}
+
+class InternalInput extends React.Component<InternalInputProps> {
+  static defaultProps = {
+    step: 1,
+  }
+  render() {
+    const props = this.props
+    const hideStyle = {}
+
+    function onValChange(event: React.ChangeEvent<HTMLInputElement>) {
+      props.onChange(Number(event.target.value))
+    }
+
+    const { value, min, max, step, onChange, inputRef, ...rest } = props
+    return (
+      <input
+        ref={inputRef}
+        value={value}
+        step={step}
+        onChange={onValChange}
+        style={hideStyle}
+        type="range"
+        min={min}
+        max={max}
+        {...rest}
+      />
+    )
+  }
+}
+
+export default InternalInput

package/lib/rotaryKnob/Types.ts

@@ -0,0 +1,6 @@
+type Point = {
+  x: number
+  y: number
+}
+
+export type { Point }

package/lib/rotaryKnob/helpers/DrawCircle.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+/**
+ * Draws a circle with radius = r
+ * position must be handled by parent
+ */
+
+type DrawCircleProps = React.SVGProps<SVGCircleElement> & {
+  r: number
+  borderColor?: string
+  fillColor?: string
+  borderWidth?: number
+  fillOpacity: number
+  cx: number
+  cy: number
+}
+
+class DrawCircle extends React.Component<DrawCircleProps> {
+  render() {
+    const {
+      r,
+      borderColor = 'black',
+      fillColor = 'transparent',
+      borderWidth = 2,
+      fillOpacity = 1,
+      ...rest
+    } = this.props
+
+    return (
+      <circle
+        stroke={borderColor}
+        fill={fillColor}
+        fillOpacity={fillOpacity}
+        r={r}
+        {...rest}
+      />
+    )
+  }
+}
+
+export default DrawCircle

package/lib/rotaryKnob/helpers/DrawLine.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import type { Point } from '../Types'
+
+/**
+ * Draws a line from p1 to p2
+ */
+
+type DrawLineProps = React.SVGProps<SVGLineElement> & {
+  width?: number
+  color?: string
+  p1: Point
+  p2: Point
+}
+
+class DrawLine extends React.Component<DrawLineProps> {
+  render() {
+    const { width = 2, color = 'black', p1, p2, ...rest } = this.props
+    return (
+      <line
+        {...rest}
+        stroke={color}
+        strokeWidth={width}
+        x1={p1.x}
+        y1={p1.y}
+        x2={p2.x}
+        y2={p2.y}
+      />
+    )
+  }
+}
+
+export default DrawLine

package/lib/rotaryKnob/helpers/HelpersOverlay.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+type HelpersOverlayProps = React.PropsWithChildren & {
+  overlayStyle?: React.CSSProperties
+}
+
+/**
+ * Draws the overlay and the children
+ */
+class HelpersOverlay extends React.Component<HelpersOverlayProps> {
+  render() {
+    const { children, ...rest } = this.props
+
+    const styles = {
+      overlay: Object.assign(
+        {
+          width: '100%',
+          height: '100vh',
+          top: 0,
+          left: 0,
+          zIndex: 2147483647,
+          margin: '0',
+          padding: '0',
+          boxSizing: 'border-box',
+          position: 'fixed',
+        },
+        this.props.overlayStyle,
+      ),
+    }
+
+    return ReactDOM.createPortal(
+      <div
+        style={styles.overlay}
+        {...rest}>
+        {children}
+      </div>,
+      document.body,
+    )
+  }
+}
+
+export default HelpersOverlay