@types/react-slider - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

react-slider/index.d.ts

@@ -6,195 +6,277 @@ // Type definitions for react-slider 1.1
 //                 Loïc Huder <https://github.com/loichuder>
+//                 Axel Bocciarelli <https://github.com/axelboc>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.8
+// TypeScript Version: 3.9
 
-import * as React from 'react';
+import { Component, HTMLProps, RefCallback } from "react";
 
-declare namespace ReactSlider {
-    interface ReactSliderProps {
-        /**
-         * aria-label for screen-readers to apply to the thumbs.
-         * Use an array for more than one thumb.
-         * The length of the array must match the number of thumbs in the value array.
-         */
-        ariaLabel?: string | string[];
+interface HTMLPropsWithRefCallback<T> extends HTMLProps<T> {
+    ref: RefCallback<T>;
+}
 
-        /**
-         * aria-valuetext for screen-readers.
-         * Can be a static string, or a function that returns a string.
-         */
-        ariaValuetext?: string | ((value: { index: number; value: number | number[]; valueNow: number }) => string);
+export interface ReactSliderProps<T extends number | ReadonlyArray<number> = number> {
+    // Disallow children
+    children?: never;
 
-        /**
-         * The css class set on the slider node.
-         */
-        className?: string;
+    /**
+     * `aria-label` for screen-readers to apply to the thumb(s).
+     *
+     * Use an array for more than one thumb.
+     * The length of the array must match the number of thumbs in the `value` array.
+     */
+    ariaLabel?: T extends number ? string : ReadonlyArray<string>;
 
-        /**
-         * Determines the initial positions of the thumbs and the number of thumbs.
-         *
-         * If a number is passed a slider with one thumb will be rendered.
-         * If an array is passed each value will determine the position of one thumb.
-         * The values in the array must be sorted.
-         */
-        defaultValue?: number | number[];
+    /**
+     * `aria-valuetext` for screen-readers.
+     *
+     * Can be a static string, or a function that returns a string:
+     *
+     * ```
+     * state => `Value: ${state.value}`
+     * ```
+     *
+     * - `state.index` - the index of the thumb
+     * - `state.value` - the current value state
+     * - `state.valueNow` - the value of the thumb (i.e. aria-valuenow)
+     */
+    ariaValuetext?: string | ((value: { index: number; value: T; valueNow: number }) => string);
 
-        /**
-         * If `true` the thumbs can't be moved.
-         */
-        disabled?: boolean;
+    /**
+     * The css class set on the slider node.
+     *
+     * @default "slider"
+     */
+    className?: string;
 
-        /**
-         * Inverts the slider.
-         */
-        invert?: boolean;
+    /**
+     * Determines the initial position(s) of the thumb(s) and the number of thumbs.
+     *
+     * If a number is passed a slider with one thumb will be rendered.
+     * If an array is passed each value will determine the position of one thumb.
+     * The values in the array must be sorted.
+     *
+     * Don't pass a default value if the slider is controlled (i.e. if you already
+     * use the `value` prop).
+     *
+     * @default 0
+     */
+    defaultValue?: this["value"] extends T ? never : T;
 
-        /**
-         * The CSS class set on the marks.
-         */
-        markClassName?: string;
+    /**
+     * If `true` the thumbs can't be moved.
+     *
+     * @default false
+     */
+    disabled?: boolean;
 
-        /**
-         * Shows passed marks on the track, if true it shows all the marks,
-         * if an array of numbers it shows just the passed marks, if a number
-         * is passed it shows just the marks in that steps: like passing 3
-         * shows the marks 3, 6, 9.
-         */
-        marks?: boolean | number | number[];
+    /**
+     * Inverts the slider.
+     *
+     * @default false
+     */
+    invert?: boolean;
 
-        /**
-         * The maximum value of the slider.
-         */
-        max?: number;
+    /**
+     * The CSS class set on the marks.
+     *
+     * @default "mark"
+     */
+    markClassName?: string;
 
-        /**
-         * The minimum value of the slider.
-         */
-        min?: number;
+    /**
+     * Shows passed marks on the track, if `true` it shows all the marks;
+     * if an array of numbers it shows just the passed marks; if a number
+     * is passed it shows just the marks in that steps: like passing `3`
+     * shows the marks `3`, `6`, `9`.
+     *
+     * @default []
+     */
+    marks?: boolean | number | ReadonlyArray<number>;
 
-        /**
-         * The minimal distance between any pair of thumbs.
-         * Must be positive, but zero means they can sit on top of each other.
-         */
-        minDistance?: number;
+    /**
+     * The maximum value of the slider.
+     *
+     * @default 100
+     */
+    max?: number;
 
-        /**
-         * Callback called only after moving a thumb has ended. The callback
-         * will only be called if the action resulted in a change. The
-         * function will be called with one argument,  the result value(s).
-         */
-        onAfterChange?: (value: number | number[] | undefined | null) => void;
+    /**
+     * The minimum value of the slider.
+     *
+     * @default 0
+     */
+    min?: number;
 
-        /**
-         * Callback called before starting to move a thumb. The callback will
-         * only be called if the action will result in a change. The function
-         * will be called with one argument, the initial value(s).
-         */
-        onBeforeChange?: (value: number | number[] | undefined | null) => void;
+    /**
+     * The minimal distance between any pair of thumbs.
+     * Must be positive, but `0` means they can sit on top of each other.
+     *
+     * @default 0
+     */
+    minDistance?: number;
 
-        /**
-         * Callback called on every value change. The function will be called
-         * with one argument, the new value(s).
-         */
-        onChange?: (value: number | number[] | undefined | null) => void;
+    /**
+     * Callback called only after moving a thumb has ended. The callback
+     * will only be called if the action resulted in a change.
+     *
+     * - `value` - the result value, or values if the slider has multiple thumbs
+     */
+    onAfterChange?: (value: T) => void;
 
-        /**
-         * Callback called when the the slider is clicked (thumb or tracks).
-         * Receives the value at the clicked position as argument.
-         */
-        onSliderClick?: (value: number) => void;
+    /**
+     * Callback called before starting to move a thumb. The callback will
+     * only be called if the action will result in a change.
+     *
+     * - `value` - the initial value, or values if the slider has multiple thumbs
+     */
+    onBeforeChange?: (value: T) => void;
 
-        /**
-         * Determines whether the slider moves horizontally (from left to right)
-         * or vertically (from top to bottom).
-         */
-        orientation?: 'horizontal' | 'vertical';
+    /**
+     * Callback called on every value change.
+     *
+     * - `value` - the new value, or values if the slider has multiple thumbs
+     */
+    onChange?: (value: T) => void;
 
-        /**
-         * The result of the function is the value to be added or subtracted
-         * when the `Page Up` or `Page Down` keys are pressed.
-         *
-         * The current `step` value will be passed as the only argument.
-         * By default, paging will modify `step` by a factor of 10.
-         */
-        pageFn?: (step: number) => number;
+    /**
+     * Callback called when the the slider is clicked (thumb or tracks).
+     *
+     * - `value` - the value at the clicked position
+     */
+    onSliderClick?: (value: number) => void;
 
-        /**
-         * If `true` the active thumb will push other thumbs
-         * within the constraints of `min`, `max`, `step` and `minDistance`.
-         */
-        pearling?: boolean;
+    /**
+     * Determines whether the slider moves horizontally (from left to right)
+     * or vertically (from top to bottom).
+     *
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
 
-        /**
-         * Provide a custom render function for the mark node.
-         * The render function will be passed one argument,
-         * an object with props that should be added to your handle node.
-         */
-        renderMark?: (props: React.HTMLProps<HTMLSpanElement>) => JSX.Element;
+    /**
+     * The result of the function is the value to be added or subtracted
+     * when the `Page Up` or `Page Down` keys are pressed.
+     *
+     * - `step` - the current step value
+     *
+     * @default step => step * 10
+     */
+    pageFn?: (step: number) => number;
 
-        /**
-         * Provide a custom render function for dynamic thumb content.
-         * The render function will be passed two arguments. The first is
-         * an object that should be added to your thumb node.
-         */
-        renderThumb?: (
-            props: React.HTMLProps<HTMLDivElement>,
-            state: { index: number; value: number | number[]; valueNow: number },
-        ) => JSX.Element;
+    /**
+     * If `true` the active thumb will push other thumbs within the constraints
+     * of `min`, `max`, `step` and `minDistance`.
+     *
+     * @default false
+     */
+    pearling?: boolean;
 
-        /**
-         * Provide a custom render function for the track node.
-         * The render function will be passed two arguments. The first is
-         * an object that should be added to your handle node.
-         */
-        renderTrack?: (
-            props: React.HTMLProps<HTMLDivElement>,
-            state: { index: number; value: number | number[] },
-        ) => JSX.Element;
+    /**
+     * Provide a custom render function for the mark node.
+     *
+     * The render function will be passed one argument, an object with props that
+     * should be added to your mark node.
+     *
+     * - `props` - props to be spread into your mark node
+     *
+     * @default props => <div {...props} />
+     */
+    renderMark?: (props: HTMLPropsWithRefCallback<HTMLSpanElement>) => JSX.Element | null;
 
-        /**
-         * Disables thumb move when clicking the slider track
-         */
-        snapDragDisabled?: boolean;
+    /**
+     * Provide a custom render function for dynamic thumb content.
+     *
+     * The render function will be passed two arguments, an object with props that
+     * should be added to your thumb node, and an object with thumb and slider state.
+     *
+     * - `props` - props to be spread into your thumb node
+     * - `state.index` - the index of the thumb
+     * - `state.value` - the current value state
+     * - `state.valueNow` - the value of the thumb (i.e. `aria-valuenow`)
+     *
+     * @default props => <div {...props} />
+     */
+    renderThumb?: (
+        props: HTMLPropsWithRefCallback<HTMLDivElement>,
+        state: { index: number; value: T; valueNow: number },
+    ) => JSX.Element | null;
 
-        /**
-         * Value to be added or subtracted on each step the slider makes.
-         * Must be greater than zero.
-         * `max - min` should be evenly divisible by the step value.
-         */
-        step?: number;
+    /**
+     * Provide a custom render function for the track node.
+     *
+     * The render function will be passed two arguments, an object with props that
+     * should be added to your handle node, and an object with track and slider state.
+     *
+     * - `props` - props to be spread into your track node
+     * - `state.index` - the index of the track
+     * - `state.value` - the current value state
+     *
+     * @default props => <div {...props} />
+     */
+    renderTrack?: (
+        props: HTMLPropsWithRefCallback<HTMLDivElement>,
+        state: { index: number; value: T },
+    ) => JSX.Element | null;
 
-        /**
-         * The css class set on the thumb that is currently being moved.
-         */
-        thumbActiveClassName?: string;
+    /**
+     * Disables thumb move when clicking the slider track
+     *
+     * @default false
+     */
+    snapDragDisabled?: boolean;
 
-        /**
-         * The css class set on each thumb node.
-         *
-         * In addition each thumb will receive a numbered css class of the form
-         * `${thumbClassName}-${i}`, e.g. `thumb-0`, `thumb-1`, ...
-         */
-        thumbClassName?: string;
+    /**
+     * Value to be added or subtracted on each step the slider makes.
+     *
+     * Must be greater than zero. `max - min` should be evenly divisible by the step value.
+     *
+     * @default 1
+     */
+    step?: number;
 
-        /**
-         * The css class set on the tracks between the thumbs.
-         * In addition track fragment will receive a numbered css class of the form
-         * `${trackClassName}-${i}`, e.g. `track-0`, `track-1`, ...
-         */
-        trackClassName?: string;
+    /**
+     * The css class set on the thumb that is currently being moved.
+     * @default "active"
+     */
+    thumbActiveClassName?: string;
 
-        /**
-         * Like `defaultValue` but for
-         * [controlled components](http://facebook.github.io/react/docs/forms.html#controlled-components).
-         */
-        value?: number | number[];
+    /**
+     * The css class set on each thumb node.
+     *
+     * In addition each thumb will receive a numbered css class of the form
+     * `${thumbClassName}-${i}`, e.g. `thumb-0`, `thumb-1`, ...
+     * @default "thumb"
+     */
+    thumbClassName?: string;
 
-        /**
-         * If `true` tracks between the thumbs will be rendered.
-         */
-        withTracks?: boolean;
-    }
+    /**
+     * The css class set on the tracks between the thumbs.
+     *
+     * In addition track fragment will receive a numbered css class of the form
+     * `${trackClassName}-${i}`, e.g. `track-0`, `track-1`, ...
+     * @default "track"
+     */
+    trackClassName?: string;
+
+    /**
+     * Like `defaultValue` but for
+     * [controlled components](http://facebook.github.io/react/docs/forms.html#controlled-components).
+     */
+    value?: T;
+
+    /**
+     * If `true` tracks between the thumbs will be rendered.
+     * @default true
+     */
+    withTracks?: boolean;
 }
 
-declare const ReactSlider: React.ComponentClass<ReactSlider.ReactSliderProps>;
+declare class ReactSlider<T extends number | ReadonlyArray<number> = number> extends Component<ReactSliderProps<T>> {
+    /**
+     * Tell the slider to resize, for example if the parent container has resized
+     * independently of the window.
+     */
+    resize: () => void;
+}
+
 export default ReactSlider;

react-slider/package.json

 {
     "name": "@types/react-slider",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "description": "TypeScript definitions for react-slider",
@@ -21,2 +21,7 @@ "license": "MIT",
             "githubUsername": "loichuder"
+        },
+        {
+            "name": "Axel Bocciarelli",
+            "url": "https://github.com/axelboc",
+            "githubUsername": "axelboc"
         }
@@ -35,4 +40,4 @@ ],
     },
-    "typesPublisherContentHash": "87ad01705260e3f442c70c93a03ec6976000d7e27ab4dbebc9621c3814e68129",
-    "typeScriptVersion": "3.4"
+    "typesPublisherContentHash": "ad07d6ebc7e0768a37a20fbdea511dd7c468cbff4989d57e281cb2052f5213f6",
+    "typeScriptVersion": "3.9"
 }

react-slider/README.md

@@ -11,3 +11,3 @@ # Installation
 ### Additional Details
- * Last updated: Mon, 08 Feb 2021 07:19:40 GMT
+ * Last updated: Tue, 20 Apr 2021 08:01:20 GMT
  * Dependencies: [@types/react](https://npmjs.com/package/@types/react)
@@ -17,2 +17,2 @@ * Global values: none
 # Credits
-These definitions were written by [Jason Unger](https://github.com/jsonunger), [Björgvin Bæhrenz Þórðarson](https://github.com/bjorgvin), and [Loïc Huder](https://github.com/loichuder).
+These definitions were written by [Jason Unger](https://github.com/jsonunger), [Björgvin Bæhrenz Þórðarson](https://github.com/bjorgvin), [Loïc Huder](https://github.com/loichuder), and [Axel Bocciarelli](https://github.com/axelboc).

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11318

15.7%

Lines of code

248

46.75%

Number of low supply chain risk alerts

0

-100%

No dependency changes