zds-pickers 4.0.3 → 4.0.6

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

@@ -0,0 +1,14 @@
+declare const knobSkin10: {
+    knobX: number;
+    knobY: number;
+    svg: string;
+    updateAttributes: {
+        element: string;
+        content: (_props: React.CSSProperties, value: number) => string;
+        attrs: {
+            name: string;
+            value: () => string;
+        }[];
+    }[];
+};
+export default knobSkin10;

package/dist/types/rotaryKnob/InternalInput.d.ts

@@ -0,0 +1,18 @@
+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;
+};
+declare class InternalInput extends React.Component<InternalInputProps> {
+    static defaultProps: {
+        step: number;
+    };
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default InternalInput;

package/dist/types/rotaryKnob/Types.d.ts

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

package/dist/types/rotaryKnob/helpers/DrawCircle.d.ts

@@ -0,0 +1,18 @@
+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;
+};
+declare class DrawCircle extends React.Component<DrawCircleProps> {
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default DrawCircle;

package/dist/types/rotaryKnob/helpers/DrawLine.d.ts

@@ -0,0 +1,15 @@
+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;
+};
+declare class DrawLine extends React.Component<DrawLineProps> {
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default DrawLine;

package/dist/types/rotaryKnob/helpers/HelpersOverlay.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type HelpersOverlayProps = React.PropsWithChildren & {
+    overlayStyle?: React.CSSProperties;
+};
+/**
+ * Draws the overlay and the children
+ */
+declare class HelpersOverlay extends React.Component<HelpersOverlayProps> {
+    render(): React.ReactPortal;
+}
+export default HelpersOverlay;

package/dist/types/rotaryKnob/helpers/KnobVisualHelpers.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { Point } from '../Types';
+/** Precision visual helpers */
+/**
+ * Precision mode visual helpers
+ */
+type KnobVisualHelpersProps = {
+    svgRef?: SVGSVGElement;
+    radius: number;
+    minimumDragDistance: number;
+    valueAngle: number;
+    mousePos: Point;
+};
+type KnobVisualHelpersState = {
+    centerX: number;
+    centerY: number;
+    valueMarkerX: number;
+    valueMarkerY: number;
+};
+declare class KnobVisualHelpers extends React.Component<KnobVisualHelpersProps, KnobVisualHelpersState> {
+    state: {
+        centerX: number;
+        centerY: number;
+        valueMarkerX: number;
+        valueMarkerY: number;
+    };
+    static getDerivedStateFromProps(props: KnobVisualHelpersProps, state: KnobVisualHelpersState): KnobVisualHelpersState;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export { KnobVisualHelpers };

package/dist/types/rotaryKnob/index.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Show the rotation circle and marker
+ * dispatches drag events
+ */
+/**
+ * type definition for the skin system attribute modification element
+ */
+type AttributeSetValue = {
+    name: string;
+    value: (props: unknown, value: unknown) => string;
+};
+/**
+ * Type definition for the skin element manipulation block
+ */
+interface UpdateElement {
+    element: string;
+    content: (_props: React.CSSProperties, value: number) => string;
+    attrs: AttributeSetValue[];
+}
+interface Skin {
+    svg: string;
+    knobX: number;
+    knobY: number;
+    updateAttributes: UpdateElement[];
+}
+type KnobProps = Omit<React.ComponentProps<'div'>, 'onChange'> & {
+    clampMax?: number;
+    clampMin?: number;
+    defaultValue?: number;
+    disabled?: boolean;
+    format?: (val: number) => string;
+    max?: number;
+    min?: number;
+    onChange?: (val: number) => void;
+    onEnd?: () => void;
+    onStart?: () => void;
+    preciseMode?: boolean;
+    rotateDegrees?: number;
+    skin?: Skin;
+    step?: number;
+    style: React.CSSProperties;
+    unlockDistance?: number;
+    value?: number;
+};
+/**
+ * Generic knob component
+ */
+declare const RotaryKnob: (props: KnobProps) => import("react/jsx-runtime").JSX.Element;
+export default RotaryKnob;

package/dist/types/rotaryKnob/knobdefaultskin.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    knobX: number;
+    knobY: number;
+    svg: string;
+};
+export default _default;

package/dist/types/rotaryKnob/utils.d.ts

@@ -0,0 +1,49 @@
+/** Note on viewbox/width
+ * This methods only work when the pixels match the svg units.
+ * when the viewbox is changed, or width is set they won't return
+ * the correct results
+ */
+/**
+ * Returns the global coordinates of a position given
+ * for a specific coordinate system
+ * @param {*} svgdoc
+ * @param {*} elem
+ * @param {*} x
+ * @param {*} y
+ */
+/**
+ * Converts a global position to a local one
+ * @param {*} svgdoc
+ * @param {*} elem
+ * @param {*} x
+ * @param {*} y
+ */
+declare function toRadians(angle: number): number;
+declare function getQuadrant(x: number, y: number): 1 | 2 | 3 | 4;
+/**
+ * Returns the angle (degrees) given a point.
+ * Assumes 0,0 as the center of the circle
+ * @param {number} x
+ * @param {number} y
+ */
+declare function getAngleForPoint(x: number, y: number): number;
+/**
+ * Transforms the top/left variables of the rectangle
+ * returned by getBoundingClientRect to document based coordinates
+ * without the scroll.
+ * UPDATE
+ * @param {Rect} box
+ */
+declare function transformBoundingClientRectToDocument(box: DOMRect): {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+declare const _default: {
+    toRadians: typeof toRadians;
+    getQuadrant: typeof getQuadrant;
+    getAngleForPoint: typeof getAngleForPoint;
+    transformBoundingClientRectToDocument: typeof transformBoundingClientRectToDocument;
+};
+export default _default;

package/dist/types/utils.d.ts

@@ -0,0 +1,9 @@
+declare const arraySequence: (numberOfElements: number) => number[];
+declare const assertRange: (value: number | string, max?: number, min?: number) => number;
+declare const findObj: <T>(key: keyof T, value: T[keyof T]) => (arr: T[]) => T | undefined;
+declare const omit: <T extends Record<string, unknown>>(...keys: string[]) => (obj: T) => {};
+declare const pick: <T extends object>(...keys: (keyof T)[]) => (obj: T) => {};
+declare const set: <T>(key: keyof T, value: T[keyof T]) => (obj: T) => T & {
+    [x: string]: T[keyof T];
+};
+export { arraySequence, assertRange, findObj, omit, pick, set };

package/lib/@types/nebiru-react-rotary-knob.d.ts

@@ -0,0 +1,20 @@
+declare module 'nebiru-react-rotary-knob' {
+  const Knob: React.ComponentType<{
+    clampMax: number
+    clampMin: number
+    className: string
+    disabled: boolean
+    max: number
+    min: number
+    onChange: (value: number) => void
+    onWheel?: (event: WheelEvent) => void
+    preciseMode: boolean
+    rotateDegrees: number
+    skin: typeof import('./knobSkin10').default
+    style: React.CSSProperties
+    unlockDistance: number
+    value: number
+  }>
+
+  export { Knob }
+}

package/lib/@types/react-svgmt.d.ts

@@ -0,0 +1,74 @@
+declare module 'react-svgmt' {
+  import React from 'react'
+
+  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(): React.JSX.Element
+  }
+
+  type InternalInputProps = {
+    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: number
+    }
+    render(): React.JSX.Element
+  }
+
+  type Point = {
+    x: number
+    y: number
+  }
+
+  type DrawLineProps = React.SVGProps<SVGLineElement> & {
+    width?: number
+    color?: string
+    p1: Point
+    p2: Point
+  }
+
+  class DrawLine extends React.Component<DrawLineProps> {
+    render(): React.JSX.Element
+  }
+
+  type SvgLoaderProps = {
+    svg?: string
+    svgXML?: string
+    width?: string | number
+    height?: string | number
+    style?: React.CSSProperties
+    onSVGReady?: (svg: SVGElement) => void
+    children?: React.ReactNode
+  }
+
+  type SvgProxyProps = {
+    children?: React.ReactNode
+    selector: string
+    transform?: string
+  }
+
+  class SvgLoader extends React.Component<SvgLoaderProps> {
+    render(): React.JSX.Element
+  }
+
+  class SvgProxy extends React.Component<SvgProxyProps> {
+    render(): React.JSX.Element
+  }
+}

package/lib/@types/zds-mappings.d.ts

@@ -0,0 +1,55 @@
+declare module 'zds-mappings' {
+  function cloneMapping(mappingName: string): Mapping
+  function createUserMapping(mappingName: string): Mapping
+  function editUserMapping(
+    mappingName: string,
+    noteNum: number,
+    field: string,
+    value: string | number,
+  ): Mapping
+
+  function getMapping(mappingName: string): Mapping
+
+  function emptyMapping(): Mapping
+
+  function getNextAvailableMappingName(path: string): string
+  function reverse(mapping: Mapping): string
+  function storeMapping(mappingName: string, rawContent: string): void
+  function validateContent(content: string): boolean
+
+  function getAvailableGroups(): { label: string; value: string }[]
+  function getStockNames(): string[]
+  function getUserMappingNames(): string[]
+  function removeMapping(mappingName: string): void
+  function renameUserMapping(
+    oldKey: string,
+    newKey: string,
+  ): { [key: string]: string | number }
+
+  interface MapItem {
+    note: number
+    group: string
+    name: string
+  }
+
+  type Mapping = MapItem[]
+
+  export {
+    cloneMapping,
+    createUserMapping,
+    emptyMapping,
+    editUserMapping,
+    getAvailableGroups,
+    getMapping,
+    getNextAvailableMappingName,
+    getStockNames,
+    getUserMappingNames,
+    removeMapping,
+    renameUserMapping,
+    reverse,
+    storeMapping,
+    validateContent,
+  }
+
+  export type { MapItem, Mapping }
+}

package/lib/@types/zds-react-piano.d.ts

@@ -0,0 +1,17 @@
+declare module 'zds-react-piano' {
+  type NoteRange = {
+    first: number
+    last: number
+  }
+
+  const ReactPiano: React.ComponentType<{
+    disabled?: boolean
+    keyWidthToHeight: number
+    noteRange: NoteRange
+    width: number
+  }>
+
+  export { ReactPiano as Piano }
+
+  export type { NoteRange }
+}

package/lib/hooks/useComponentSize.ts

@@ -0,0 +1,52 @@
+import { useCallback, useLayoutEffect, useState } from 'react'
+
+const getSize = (el: HTMLDivElement | null) =>
+  el
+    ? {
+        width: el.offsetWidth,
+        height: el.offsetHeight,
+      }
+    : {
+        width: 0,
+        height: 0,
+      }
+
+const useComponentSize = (ref: React.RefObject<HTMLDivElement>) => {
+  const [componentSize, setComponentSize] = useState(
+    getSize(ref ? ref.current : null),
+  )
+
+  const handleResize = useCallback(() => {
+    if (ref.current) {
+      setComponentSize(getSize(ref.current))
+    }
+  }, [ref])
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useLayoutEffect(() => {
+    if (!ref.current) return
+
+    handleResize()
+
+    if (typeof ResizeObserver === 'function') {
+      const resizeObserver = new ResizeObserver(() => {
+        handleResize()
+      })
+      resizeObserver.observe(ref.current)
+
+      return () => {
+        resizeObserver.disconnect()
+        // resizeObserver = null
+      }
+    }
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [ref.current])
+
+  return componentSize
+}
+
+export default useComponentSize

package/lib/hooks/useStateWithDynamicDefault.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react'
+
+const useStateWithDynamicDefault = <T>(defaultVal: T) => {
+  const [state, setState] = useState<T>(defaultVal)
+
+  useEffect(() => {
+    setState(defaultVal)
+  }, [defaultVal])
+
+  return [state, setState] as const
+}
+
+export default useStateWithDynamicDefault

package/lib/main.ts

@@ -0,0 +1,34 @@
+// Pickers
+export { default as CCPicker } from './pickers/CCPicker'
+export { default as ChannelMappingPicker } from './pickers/ChannelMappingPicker'
+export { default as ChannelPicker } from './pickers/ChannelPicker'
+export { default as Knob } from './pickers/Knob'
+export { default as KnobPicker } from './pickers/KnobPicker'
+export { default as LatchPicker } from './pickers/LatchPicker'
+export { default as MappingPicker } from './pickers/MappingPicker'
+export { default as NotePicker } from './pickers/NotePicker'
+export { default as OctavePlayer } from './other/OctavePlayer'
+export { default as PianoPicker } from './pickers/PianoPicker'
+export { default as PolarityPicker } from './pickers/PolarityPicker'
+export { default as ResponseCurvePicker } from './pickers/ResponseCurvePicker'
+export { default as Select } from './pickers/Select'
+export { default as StatusPicker } from './pickers/StatusPicker'
+export { default as SVGText } from './other/SVGText'
+export { default as ValuePicker } from './pickers/ValuePicker'
+
+// MIDI
+export {
+  combineStatusWithChannel,
+  extractStatusAndChannel,
+  getStatusLabel,
+  MASK_CHANNEL,
+  MASK_STATUS,
+  Statuses,
+} from './midi/export'
+
+export {
+  default as ResponseCurve,
+  RESPONSE_CURVES,
+} from './pickers/ResponseCurve'
+
+export { default as ccValues } from './midi/ccValues'

package/lib/midi/ccValues.ts

@@ -0,0 +1,139 @@
+import type { Option } from '../pickers/Select'
+
+const CC_NAMES = [
+  'Bank Select',
+  'Modulation Wheel',
+  'Breath Controller',
+  '',
+  'Foot Control',
+  'Portamento Time',
+  'Data Entry Slider',
+  'Volume',
+  'Balance',
+  '',
+  'Pan',
+  'Expression',
+  'Effect Control 1',
+  'Effect Control 2',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  'Controller 0',
+  'Controller 1',
+  'Controller 2',
+  'Controller 3',
+  'Controller 4',
+  'Controller 5',
+  'Controller 6',
+  'Controller 7',
+  'Controller 8',
+  'Controller 9',
+  'Controller 10',
+  'Controller 11',
+  'Controller 12',
+  'Controller 13',
+  'Controller 14',
+  'Controller 15',
+  'Controller 16',
+  'Controller 17',
+  'Controller 18',
+  'Controller 19',
+  'Controller 20',
+  'Controller 21',
+  'Controller 22',
+  'Controller 23',
+  'Controller 24',
+  'Controller 25',
+  'Controller 26',
+  'Controller 27',
+  'Controller 28',
+  'Controller 29',
+  'Controller 30',
+  'Controller 31',
+  'Sustain',
+  'Portamento',
+  'Sostenuto',
+  'Soft Pedal',
+  'Legato Pedal',
+  'Sustain 2',
+  'Sound Variation',
+  'Resonance/Timbre',
+  'Sound Release Time',
+  'Sound Attack Time',
+  'Frequency Cutoff',
+  'Sound Control 6',
+  'Sound Control 7',
+  'Sound Control 8',
+  'Sound Control 9',
+  'Sound Control 10',
+  'Decay or General 1',
+  'Hi-Pass or General 2',
+  'General 3',
+  'General 4',
+  'Portamento Amount',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  'Reverb Level',
+  'Tremolo Depth',
+  'Chorus Level',
+  'Detune',
+  'Phaser Depth',
+  'Data Entry +1',
+  'Data Entry -1',
+  'Non-registered LSB',
+  'Non-registered MSB',
+  'Registered msb',
+  'Registered lsb',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  'Shift 1',
+  'Shift 2',
+  'Shift 3',
+  'Shift 4',
+  'Shift 5',
+  'Shift 6',
+  '',
+  '',
+  '',
+  '',
+  'All Sound Off',
+  'All Controllers Off',
+  'Local Mode',
+  'All Notes Off',
+  'Omni Mode Off',
+  'Omni Mode On',
+  'Mono Mode On',
+  'Poly Mode',
+].map(
+  (label, value): Option<number> => ({
+    label: String(label).length ? `${value} - ${label}` : String(value),
+    value,
+  }),
+)
+
+export default CC_NAMES