etudes 1.2.0 → 2.0.0

package/lib/StepwiseSlider.d.ts

@@ -1,9 +1,10 @@
-import { HTMLAttributes } from 'react';
-export declare type Props = HTMLAttributes<HTMLDivElement> & {
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+declare type Orientation = 'horizontal' | 'vertical';
+export declare type StepwiseSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
-     * By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the
-     * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1
-     * being the start.
+     * By default the position is a value from 0 - 1, 0 being the start of the
+     * slider and 1 being the end. Switching on this flag inverts this behavior,
+     * where 0 becomes the end of the slider and 1 being the start.
      */
     isInverted?: boolean;
     /**
@@ -11,20 +12,11 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
      */
     isTrackInteractive?: boolean;
     /**
-     * Indicates if position/index change events are dispatched only when dragging ends. When
-     * disabled, aforementioned events are fired repeatedly while dragging.
+     * Indicates if position/index change events are dispatched only when dragging
+     * ends. When disabled, aforementioned events are fired repeatedly while
+     * dragging.
      */
     onlyDispatchesOnDragEnd?: boolean;
-    /**
-     * A function that returns the label to be displayed at a given slider position and closest step
-     * index (if steps are provided).
-     *
-     * @param position - The current slider position.
-     * @param index - The nearest step index (if steps are provided), or -1 if no steps are provided.
-     *
-     * @returns The label.
-     */
-    labelProvider?: (position: number, index: number) => string;
     /**
      * Padding between the track and the knob in pixels.
      */
@@ -40,11 +32,12 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
     /**
      * Orientation of the slider.
      */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: Orientation;
     /**
-     * An array of step descriptors. A step is a position (0 - 1 inclusive) on the track where the
-     * knob should snap to if dragging stops near it. Ensure that there are at least two steps: one
-     * for the start of the track and one for the end.
+     * An array of step descriptors. A step is a position (0 - 1 inclusive) on the
+     * track where the knob should snap to if dragging stops near it. Ensure that
+     * there are at least two steps: one for the start of the track and one for
+     * the end.
      */
     steps?: readonly number[];
     /**
@@ -52,9 +45,21 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
      */
     index?: number;
     /**
-     * Handler invoked when index changes. This can either be invoked from the `index` prop
-     * being changed or from the slider being dragged. Note that if the event is emitted at the end of
-     * dragging due to `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
+     * A function that returns the label to be displayed at a given slider
+     * position and closest step index (if steps are provided).
+     *
+     * @param position - The current slider position.
+     * @param index - The nearest step index (if steps are provided), or -1 if no
+     *                steps are provided.
+     *
+     * @returns The label.
+     */
+    labelProvider?: (position: number, index: number) => string;
+    /**
+     * Handler invoked when index changes. This can either be invoked from the
+     * `index` prop being changed or from the slider being dragged. Note that if
+     * the event is emitted at the end of dragging due to
+     * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
      * still `true`. This event is emitted right after `onPositionChange`.
      *
      * @param index - The current slider index.
@@ -62,9 +67,10 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
      */
     onIndexChange?: (index: number, isDragging: boolean) => void;
     /**
-     * Handler invoked when position changes. This can either be invoked from the `index` prop
-     * being changed or from the slider being dragged. Note that if the event is emitted at the end of
-     * dragging due to `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
+     * Handler invoked when position changes. This can either be invoked from the
+     * `index` prop being changed or from the slider being dragged. Note that if
+     * the event is emitted at the end of dragging due to
+     * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
      * still `true`. This event is emitted right before `onIndexChange`.
      *
      * @param position - The current slider position.
@@ -79,42 +85,123 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
      * Handler invoked when dragging begins.
      */
     onDragStart?: () => void;
-};
+}>;
+/**
+ * A "stepwise" slider component supporting both horizontal and vertical
+ * orientations that automatically snaps to a set of predefined points on the
+ * slider when dragged. These points are referred to as "steps", indexed by an
+ * integer referred to as "index". This index can be two-way binded. The
+ * component consists of four customizable elements: a draggable knob, a label
+ * on the knob, a scroll track before the knob and a scroll track after the
+ * knob. While the width and height of the slider is inferred from its CSS
+ * rules, the width and height of the knob are set via props (`knobWidth` and
+ * `knobHeight`, respectively). The size of the knob does not impact the size of
+ * the slider. While dragging, the slider still emits a position change event,
+ * where the position is a decimal ranging between 0.0 and 1.0, inclusive.
+ *
+ * @exports StepwiseSliderKnob - The component for the knob.
+ * @exports StepwiseSliderLabel - The component for the label on the knob.
+ * @exports StepwiseSliderTrack - The component for the slide track on either
+ *                                side of the knob.
+ */
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * By default the position is a value from 0 - 1, 0 being the start of the
+     * slider and 1 being the end. Switching on this flag inverts this behavior,
+     * where 0 becomes the end of the slider and 1 being the start.
+     */
+    isInverted?: boolean | undefined;
+    /**
+     * Specifies if the track is clickable to set the position of the knob.
+     */
+    isTrackInteractive?: boolean | undefined;
+    /**
+     * Indicates if position/index change events are dispatched only when dragging
+     * ends. When disabled, aforementioned events are fired repeatedly while
+     * dragging.
+     */
+    onlyDispatchesOnDragEnd?: boolean | undefined;
+    /**
+     * Padding between the track and the knob in pixels.
+     */
+    trackPadding?: number | undefined;
+    /**
+     * Height of the knob in pixels.
+     */
+    knobHeight?: number | undefined;
+    /**
+     * Width of the knob in pixels.
+     */
+    knobWidth?: number | undefined;
+    /**
+     * Orientation of the slider.
+     */
+    orientation?: Orientation | undefined;
+    /**
+     * An array of step descriptors. A step is a position (0 - 1 inclusive) on the
+     * track where the knob should snap to if dragging stops near it. Ensure that
+     * there are at least two steps: one for the start of the track and one for
+     * the end.
+     */
+    steps?: readonly number[] | undefined;
+    /**
+     * The current index.
+     */
+    index?: number | undefined;
+    /**
+     * A function that returns the label to be displayed at a given slider
+     * position and closest step index (if steps are provided).
+     *
+     * @param position - The current slider position.
+     * @param index - The nearest step index (if steps are provided), or -1 if no
+     *                steps are provided.
+     *
+     * @returns The label.
+     */
+    labelProvider?: ((position: number, index: number) => string) | undefined;
+    /**
+     * Handler invoked when index changes. This can either be invoked from the
+     * `index` prop being changed or from the slider being dragged. Note that if
+     * the event is emitted at the end of dragging due to
+     * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
+     * still `true`. This event is emitted right after `onPositionChange`.
+     *
+     * @param index - The current slider index.
+     * @param isDragging - Specifies if the index change is due to dragging.
+     */
+    onIndexChange?: ((index: number, isDragging: boolean) => void) | undefined;
+    /**
+     * Handler invoked when position changes. This can either be invoked from the
+     * `index` prop being changed or from the slider being dragged. Note that if
+     * the event is emitted at the end of dragging due to
+     * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
+     * still `true`. This event is emitted right before `onIndexChange`.
+     *
+     * @param position - The current slider position.
+     * @param isDragging - Specifies if the position change is due to dragging.
+     */
+    onPositionChange?: ((position: number, isDragging: boolean) => void) | undefined;
+    /**
+     * Handler invoked when dragging ends.
+     */
+    onDragEnd?: (() => void) | undefined;
+    /**
+     * Handler invoked when dragging begins.
+     */
+    onDragStart?: (() => void) | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export declare const StepwiseSliderTrack: ({ ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export declare const StepwiseSliderKnob: ({ ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export declare const StepwiseSliderLabel: ({ ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
 /**
  * Generates a set of steps compatible with this component.
  *
- * @param length - The number of steps. This must be at least 2 because you must include the
- *                 starting and ending points.
+ * @param length - The number of steps. This must be at least 2 because you must
+ *                 include the starting and ending points.
  *
  * @returns An array of steps.
  */
 export declare function generateSteps(length: number): readonly number[];
-/**
- * A "stepwise" slider component supporting both horizontal and vertical orientations that
- * automatically snaps to a set of predefined points on the slider when dragged. These points are
- * referred to as "steps", indexed by an integer referred to as "index". This index can be two-way
- * binded. The component consists of four customizable elements: a draggable knob, a label on the
- * knob, a scroll track before the knob and a scroll track after the knob. While the width and
- * height of the slider is inferred from its CSS rules, the width and height of the knob are set via
- * props (`knobWidth` and `knobHeight`, respectively). The size of the knob does not impact the size
- * of the slider. While dragging, the slider still emits a position change event, where the position
- * is a decimal ranging between 0.0 and 1.0, inclusive.
- *
- * @exports StepwiseSliderKnob - The component for the knob.
- * @exports StepwiseSliderKnobLabel - The component for the label on the knob.
- * @exports StepwiseSliderStartingTrack - The component for the slide track before the knob.
- * @exports StepwiseSliderEndingTrack - The component for the slide track after the knob.
- */
-export default function StepwiseSlider({ index: externalIndex, isInverted, isTrackInteractive, knobHeight, knobWidth, labelProvider, onlyDispatchesOnDragEnd, orientation, steps, trackPadding, onDragEnd, onDragStart, onIndexChange, onPositionChange, ...props }: Props): JSX.Element;
-export declare const StepwiseSliderStartingTrack: import("styled-components").StyledComponent<"div", any, {
-    orientation: NonNullable<Props['orientation']>;
-    isClickable: boolean;
-}, never>;
-export declare const StepwiseSliderEndingTrack: import("styled-components").StyledComponent<"div", any, {
-    orientation: NonNullable<Props['orientation']>;
-    isClickable: boolean;
-}, never>;
-export declare const StepwiseSliderKnob: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StepwiseSliderKnobLabel: import("styled-components").StyledComponent<"label", any, {
-    knobHeight: NonNullable<Props['knobHeight']>;
-}, never>;