etudes 1.2.0 → 2.0.0

package/lib/StepwiseSlider.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -68,130 +64,85 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StepwiseSliderKnobLabel = exports.StepwiseSliderKnob = exports.StepwiseSliderEndingTrack = exports.StepwiseSliderStartingTrack = exports.generateSteps = void 0;
+exports.generateSteps = exports.StepwiseSliderLabel = exports.StepwiseSliderKnob = exports.StepwiseSliderTrack = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
 var spase_1 = require("spase");
-var styled_components_1 = __importStar(require("styled-components"));
 var useDragEffect_1 = __importDefault(require("./hooks/useDragEffect"));
-var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:stepwise-slider') : function () { };
-/**
- * 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.
- *
- * @returns An array of steps.
- */
-function generateSteps(length) {
-    if (length <= 1)
-        throw new Error('`length` value must be greater than or equal to 2');
-    if (Math.round(length) !== length)
-        throw new Error('`length` value must be an integer');
-    var interval = 1 / (length - 1);
-    return Array(length).fill(null).map(function (v, i) {
-        var position = interval * i;
-        return position;
-    });
-}
-exports.generateSteps = generateSteps;
-/**
- * Gets the index of the step of which the specified position is closest to. If for whatever
- * reason the index cannot be computed, -1 is returned.
- *
- * @param position - The position (0 - 1, inclusive).
- * @param steps - The steps.
- *
- * @returns The nearest index.
- */
-function getNearestIndexByPosition(position, steps) {
-    var index = -1;
-    var minDelta = NaN;
-    for (var i = 0, n = steps.length; i < n; i++) {
-        var step = getPositionAt(i, steps);
-        if (isNaN(step))
-            continue;
-        var delta = Math.abs(position - step);
-        if (isNaN(minDelta) || (delta < minDelta)) {
-            minDelta = delta;
-            index = i;
-        }
-    }
-    return index;
-}
-/**
- * Gets the position by step index. This value ranges between 0 - 1, inclusive.
- *
- * @param index - The step index.
- * @param steps - The steps.
- *
- * @returns The position. If for whatever reason the position cannot be determined, `NaN` is
- *          returned.
- */
-function getPositionAt(index, steps) {
-    if (index >= steps.length)
-        return NaN;
-    return steps[index];
-}
+var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
+var asComponentDict_1 = __importDefault(require("./utils/asComponentDict"));
+var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
+var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
+var styles_1 = __importDefault(require("./utils/styles"));
+var useDebug_1 = __importDefault(require("./utils/useDebug"));
+var debug = (0, useDebug_1.default)('stepwise-slider');
 /**
- * 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.
+ * 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.
+ * @exports StepwiseSliderLabel - The component for the label on the knob.
+ * @exports StepwiseSliderTrack - The component for the slide track on either
+ *                                side of the knob.
  */
-function StepwiseSlider(_a) {
-    var _b = _a.index, externalIndex = _b === void 0 ? 0 : _b, _c = _a.isInverted, isInverted = _c === void 0 ? false : _c, _d = _a.isTrackInteractive, isTrackInteractive = _d === void 0 ? true : _d, _e = _a.knobHeight, knobHeight = _e === void 0 ? 30 : _e, _f = _a.knobWidth, knobWidth = _f === void 0 ? 30 : _f, labelProvider = _a.labelProvider, _g = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _g === void 0 ? false : _g, _h = _a.orientation, orientation = _h === void 0 ? 'vertical' : _h, _j = _a.steps, steps = _j === void 0 ? generateSteps(10) : _j, _k = _a.trackPadding, trackPadding = _k === void 0 ? 0 : _k, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onIndexChange = _a.onIndexChange, onPositionChange = _a.onPositionChange, props = __rest(_a, ["index", "isInverted", "isTrackInteractive", "knobHeight", "knobWidth", "labelProvider", "onlyDispatchesOnDragEnd", "orientation", "steps", "trackPadding", "onDragEnd", "onDragStart", "onIndexChange", "onPositionChange"]);
-    var mapDragPositionToPosition = function (currentPosition, dx, dy) {
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b, _c, _d, _e;
+    var children = _a.children, className = _a.className, _f = _a.index, externalIndex = _f === void 0 ? 0 : _f, _g = _a.isInverted, isInverted = _g === void 0 ? false : _g, _h = _a.isTrackInteractive, isTrackInteractive = _h === void 0 ? true : _h, _j = _a.knobHeight, knobHeight = _j === void 0 ? 30 : _j, _k = _a.knobWidth, knobWidth = _k === void 0 ? 30 : _k, labelProvider = _a.labelProvider, _l = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _l === void 0 ? false : _l, _m = _a.orientation, orientation = _m === void 0 ? 'vertical' : _m, _o = _a.steps, steps = _o === void 0 ? generateSteps(10) : _o, _p = _a.trackPadding, trackPadding = _p === void 0 ? 0 : _p, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onIndexChange = _a.onIndexChange, onPositionChange = _a.onPositionChange, props = __rest(_a, ["children", "className", "index", "isInverted", "isTrackInteractive", "knobHeight", "knobWidth", "labelProvider", "onlyDispatchesOnDragEnd", "orientation", "steps", "trackPadding", "onDragEnd", "onDragStart", "onIndexChange", "onPositionChange"]);
+    var mapDragValueToPosition = function (value, dx, dy) {
         var _a;
-        var rect = (_a = spase_1.Rect.from(rootRef.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect();
-        var naturalPosition = isInverted ? 1 - currentPosition : currentPosition;
-        var naturalNewPositionX = naturalPosition * rect.width + dx;
-        var naturalNewPositionY = naturalPosition * rect.height + dy;
-        var naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width));
-        var newPosition = isInverted ? 1 - naturalNewPosition : naturalNewPosition;
-        return newPosition;
+        var rect = (_a = spase_1.Rect.from(bodyRef.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect();
+        var truePosition = isInverted ? 1 - value : value;
+        var trueNewPositionX = truePosition * rect.width + dx;
+        var trueNewPositionY = truePosition * rect.height + dy;
+        var trueNewPosition = orientation === 'vertical' ? Math.max(0, Math.min(1, trueNewPositionY / rect.height)) : Math.max(0, Math.min(1, trueNewPositionX / rect.width));
+        var normalizedPosition = isInverted ? 1 - trueNewPosition : trueNewPosition;
+        return normalizedPosition;
     };
-    var onTrackClick = function (event) {
+    var trackClickHandler = function (event) {
         var _a;
         if (!isTrackInteractive)
             return;
-        var rect = (_a = spase_1.Rect.from(rootRef.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect();
+        var rect = (_a = spase_1.Rect.from(bodyRef.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect();
         switch (orientation) {
             case 'horizontal': {
-                var position_1 = (event.clientX - rect.left) / rect.width;
-                var naturalPosition_1 = isInverted ? 1 - position_1 : position_1;
-                setPosition(naturalPosition_1);
+                var trackPosition = (event.clientX - rect.left) / rect.width;
+                var normalizedPosition = isInverted ? 1 - trackPosition : trackPosition;
+                setPosition(normalizedPosition);
                 break;
             }
             case 'vertical': {
-                var position_2 = (event.clientY - rect.top) / rect.height;
-                var naturalPosition_2 = isInverted ? 1 - position_2 : position_2;
-                setPosition(naturalPosition_2);
+                var trackPosition = (event.clientY - rect.top) / rect.height;
+                var normalizedPosition = isInverted ? 1 - trackPosition : trackPosition;
+                setPosition(normalizedPosition);
                 break;
             }
+            default:
+                break;
         }
     };
-    var rootRef = (0, react_1.useRef)(null);
-    var knobRef = (0, react_1.useRef)(null);
-    var _l = __read((0, react_1.useState)(externalIndex), 2), index = _l[0], setIndex = _l[1];
-    var _m = (0, useDragEffect_1.default)(knobRef, {
+    var bodyRef = (0, react_1.useRef)(null);
+    var knobContainerRef = (0, react_1.useRef)(null);
+    var _q = __read((0, react_1.useState)(externalIndex), 2), index = _q[0], setIndex = _q[1];
+    var _r = (0, useDragEffect_1.default)(knobContainerRef, {
         initialValue: getPositionAt(externalIndex, steps),
-        transform: mapDragPositionToPosition,
+        transform: mapDragValueToPosition,
         onDragStart: onDragStart,
         onDragEnd: onDragEnd,
-    }), _o = __read(_m.isDragging, 1), isDragging = _o[0], _p = __read(_m.value, 2), position = _p[0], setPosition = _p[1];
-    // Natural position is the position after taking `isInverted` into account.
+    }), _s = __read(_r.isDragging, 1), isDragging = _s[0], _t = __read(_r.isReleasing, 1), isReleasing = _t[0], _u = __read(_r.value, 2), position = _u[0], setPosition = _u[1];
+    // Natural position is the position affecting internal components accounting
+    // for `isInverted`.
     var naturalPosition = isInverted ? 1 - position : position;
+    var isAtEnd = isInverted ? position === 0 : position === 1;
+    var isAtStart = isInverted ? position === 1 : position === 0;
     (0, react_1.useEffect)(function () {
         if (isDragging)
             return;
@@ -225,45 +176,200 @@ function StepwiseSlider(_a) {
             onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(nearestPosition, true);
         }
     }, [isDragging]);
-    return (react_1.default.createElement(StyledRoot, __assign({}, props, { ref: rootRef, orientation: orientation }),
-        react_1.default.createElement(exports.StepwiseSliderStartingTrack, { orientation: orientation, isClickable: isTrackInteractive, onClick: function (event) { return onTrackClick(event); }, style: orientation === 'vertical' ? {
-                top: 0,
-                height: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * .5, "px - ").concat(trackPadding, "px)"),
-            } : {
-                left: 0,
-                width: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * .5, "px - ").concat(trackPadding, "px)"),
-            } }),
-        react_1.default.createElement(StyledKnobContainer, { ref: knobRef, style: __assign({ transform: 'translate3d(-50%, -50%, 0)' }, (orientation === 'vertical' ? {
-                left: '50%',
-                top: "".concat(naturalPosition * 100, "%"),
-                transition: isDragging === false ? 'top 100ms ease-out' : 'none',
-            } : {
-                left: "".concat(naturalPosition * 100, "%"),
-                top: '50%',
-                transition: isDragging === false ? 'left 100ms ease-out' : 'none',
-            })) },
-            react_1.default.createElement(exports.StepwiseSliderKnob, { className: (0, classnames_1.default)({
-                    'at-end': isInverted ? (position === 0) : (position === 1),
-                    'at-start': isInverted ? (position === 1) : (position === 0),
-                    'dragging': isDragging,
-                }), style: {
-                    height: "".concat(knobHeight, "px"),
-                    width: "".concat(knobWidth, "px"),
-                } }, steps && labelProvider && (react_1.default.createElement(exports.StepwiseSliderKnobLabel, { knobHeight: knobHeight }, labelProvider(position, getNearestIndexByPosition(position, steps)))))),
-        react_1.default.createElement(exports.StepwiseSliderEndingTrack, { orientation: orientation, isClickable: isTrackInteractive, onClick: function (event) { return onTrackClick(event); }, style: orientation === 'vertical' ? {
-                bottom: 0,
-                height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * .5, "px - ").concat(trackPadding, "px)"),
-            } : {
-                right: 0,
-                width: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * .5, "px - ").concat(trackPadding, "px)"),
-            } })));
+    var components = (0, asComponentDict_1.default)(children, {
+        knob: exports.StepwiseSliderKnob,
+        label: exports.StepwiseSliderLabel,
+        track: exports.StepwiseSliderTrack,
+    });
+    var fixedClassNames = (0, asClassNameDict_1.default)({
+        root: (0, classnames_1.default)(orientation, {
+            'at-end': isAtEnd,
+            'at-start': isAtStart,
+            'dragging': isDragging,
+            'releasing': isReleasing,
+        }),
+        track: (0, classnames_1.default)(orientation, {
+            'at-end': isAtEnd,
+            'at-start': isAtStart,
+            'dragging': isDragging,
+            'releasing': isReleasing,
+        }),
+        knob: (0, classnames_1.default)(orientation, {
+            'at-end': isAtEnd,
+            'at-start': isAtStart,
+            'dragging': isDragging,
+            'releasing': isReleasing,
+        }),
+        label: (0, classnames_1.default)(orientation, {
+            'at-end': isAtEnd,
+            'at-start': isAtStart,
+            'dragging': isDragging,
+            'releasing': isReleasing,
+        }),
+    });
+    var fixedStyles = (0, asStyleDict_1.default)({
+        body: {
+            height: '100%',
+            width: '100%',
+        },
+        knobContainer: __assign({ background: 'none', border: 'none', outline: 'none', position: 'absolute', transform: 'translate3d(-50%, -50%, 0)', zIndex: '1' }, orientation === 'vertical' ? {
+            left: '50%',
+            top: "".concat(naturalPosition * 100, "%"),
+            transition: isDragging === false ? 'top 100ms ease-out' : 'none',
+        } : {
+            left: "".concat(naturalPosition * 100, "%"),
+            top: '50%',
+            transition: isDragging === false ? 'left 100ms ease-out' : 'none',
+        }),
+        knob: {
+            height: "".concat(knobHeight, "px"),
+            touchAction: 'none',
+            width: "".concat(knobWidth, "px"),
+        },
+        label: {
+            pointerEvents: 'none',
+            userSelect: 'none',
+        },
+        track: __assign({ cursor: isTrackInteractive ? 'pointer' : 'auto', pointerEvents: isTrackInteractive ? 'auto' : 'none', position: 'absolute' }, orientation === 'vertical' ? {
+            left: '0',
+            margin: '0 auto',
+            right: '0',
+            width: '100%',
+        } : {
+            bottom: '0',
+            height: '100%',
+            margin: 'auto 0',
+            top: '0',
+        }),
+        trackHitbox: {
+            height: '100%',
+            minHeight: '20px',
+            minWidth: '20px',
+            position: 'absolute',
+            transform: orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)',
+            width: '100%',
+        },
+    });
+    var defaultStyles = (0, asStyleDict_1.default)({
+        knob: {
+            alignItems: 'center',
+            background: '#fff',
+            boxSizing: 'border-box',
+            display: 'flex',
+            justifyContent: 'center',
+        },
+        label: {
+            color: '#000',
+            fontSize: '12px',
+            lineHeight: "".concat(knobHeight, "px"),
+        },
+        track: {
+            background: '#fff',
+        },
+    });
+    return (react_1.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root) }),
+        react_1.default.createElement("div", { ref: bodyRef, style: fixedStyles.body },
+            (0, cloneStyledElement_1.default)((_b = components.track) !== null && _b !== void 0 ? _b : react_1.default.createElement(exports.StepwiseSliderTrack, { style: defaultStyles.track }), {
+                className: (0, classnames_1.default)('start', fixedClassNames.track),
+                style: (0, styles_1.default)(fixedStyles.track, orientation === 'vertical' ? {
+                    height: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * 0.5, "px - ").concat(trackPadding, "px)"),
+                    top: '0',
+                } : {
+                    left: '0',
+                    width: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * 0.5, "px - ").concat(trackPadding, "px)"),
+                }),
+                onClick: trackClickHandler,
+            }, react_1.default.createElement("div", { style: fixedStyles.trackHitbox })),
+            (0, cloneStyledElement_1.default)((_c = components.track) !== null && _c !== void 0 ? _c : react_1.default.createElement(exports.StepwiseSliderTrack, { style: defaultStyles.track }), {
+                className: (0, classnames_1.default)('end', fixedClassNames.track),
+                style: (0, styles_1.default)(fixedStyles.track, orientation === 'vertical' ? {
+                    bottom: '0',
+                    height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * 0.5, "px - ").concat(trackPadding, "px)"),
+                } : {
+                    right: '0',
+                    width: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * 0.5, "px - ").concat(trackPadding, "px)"),
+                }),
+                onClick: trackClickHandler,
+            }, react_1.default.createElement("div", { style: fixedStyles.trackHitbox })),
+            react_1.default.createElement("button", { ref: knobContainerRef, style: fixedStyles.knobContainer }, (0, cloneStyledElement_1.default)((_d = components.knob) !== null && _d !== void 0 ? _d : react_1.default.createElement(exports.StepwiseSliderKnob, { style: defaultStyles.knob }), {
+                className: (0, classnames_1.default)(fixedClassNames.knob),
+                style: (0, styles_1.default)(fixedStyles.knob),
+            }, steps && labelProvider && (0, cloneStyledElement_1.default)((_e = components.label) !== null && _e !== void 0 ? _e : react_1.default.createElement(exports.StepwiseSliderLabel, { style: defaultStyles.label }), {
+                className: (0, classnames_1.default)(fixedClassNames.label),
+                style: (0, styles_1.default)(fixedStyles.label),
+            }, labelProvider(position, getNearestIndexByPosition(position, steps))))))));
+});
+var StepwiseSliderTrack = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("div", __assign({}, props));
+};
+exports.StepwiseSliderTrack = StepwiseSliderTrack;
+var StepwiseSliderKnob = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("div", __assign({}, props));
+};
+exports.StepwiseSliderKnob = StepwiseSliderKnob;
+var StepwiseSliderLabel = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("div", __assign({}, props));
+};
+exports.StepwiseSliderLabel = StepwiseSliderLabel;
+/**
+ * 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.
+ *
+ * @returns An array of steps.
+ */
+function generateSteps(length) {
+    if (length <= 1)
+        throw new Error('`length` value must be greater than or equal to 2');
+    if (Math.round(length) !== length)
+        throw new Error('`length` value must be an integer');
+    var interval = 1 / (length - 1);
+    return Array(length).fill(null).map(function (v, i) {
+        var position = interval * i;
+        return position;
+    });
+}
+exports.generateSteps = generateSteps;
+/**
+ * Gets the index of the step of which the specified position is closest to. If
+ * for whatever reason the index cannot be computed, -1 is returned.
+ *
+ * @param position - The position (0 - 1, inclusive).
+ * @param steps - The steps.
+ *
+ * @returns The nearest index.
+ */
+function getNearestIndexByPosition(position, steps) {
+    var index = -1;
+    var minDelta = NaN;
+    for (var i = 0, n = steps.length; i < n; i++) {
+        var step = getPositionAt(i, steps);
+        if (isNaN(step))
+            continue;
+        var delta = Math.abs(position - step);
+        if (isNaN(minDelta) || delta < minDelta) {
+            minDelta = delta;
+            index = i;
+        }
+    }
+    return index;
+}
+/**
+ * Gets the position by step index. This value ranges between 0 - 1, inclusive.
+ *
+ * @param index - The step index.
+ * @param steps - The steps.
+ *
+ * @returns The position. If for whatever reason the position cannot be
+ *          determined, `NaN` is returned.
+ */
+function getPositionAt(index, steps) {
+    if (index >= steps.length)
+        return NaN;
+    return steps[index];
 }
-exports.default = StepwiseSlider;
-exports.StepwiseSliderStartingTrack = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: #fff;\n  cursor: ", ";\n  pointer-events: ", ";\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  &::after {\n    content: '';\n    height: 100%;\n    min-height: 20px;\n    min-width: 20px;\n    position: absolute;\n    transform: ", ";\n    width: 100%;\n  }\n\n  ", "\n"], ["\n  background: #fff;\n  cursor: ", ";\n  pointer-events: ", ";\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  &::after {\n    content: '';\n    height: 100%;\n    min-height: 20px;\n    min-width: 20px;\n    position: absolute;\n    transform: ", ";\n    width: 100%;\n  }\n\n  ", "\n"])), function (props) { return props.isClickable ? 'pointer' : 'auto'; }, function (props) { return props.isClickable ? 'auto' : 'none'; }, function (props) { return props.orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)'; }, function (props) { return props.orientation === 'vertical' ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  "], ["\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  "], ["\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  "]))); });
-exports.StepwiseSliderEndingTrack = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background: #fff;\n  cursor: ", ";\n  pointer-events: ", ";\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  &::after {\n    content: '';\n    height: 100%;\n    min-height: 20px;\n    min-width: 20px;\n    position: absolute;\n    transform: ", ";\n    width: 100%;\n  }\n\n  ", "\n"], ["\n  background: #fff;\n  cursor: ", ";\n  pointer-events: ", ";\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  &::after {\n    content: '';\n    height: 100%;\n    min-height: 20px;\n    min-width: 20px;\n    position: absolute;\n    transform: ", ";\n    width: 100%;\n  }\n\n  ", "\n"])), function (props) { return props.isClickable ? 'pointer' : 'auto'; }, function (props) { return props.isClickable ? 'auto' : 'none'; }, function (props) { return props.orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)'; }, function (props) { return props.orientation === 'vertical' ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  "], ["\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  "], ["\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  "]))); });
-exports.StepwiseSliderKnob = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: 1;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n"], ["\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: 1;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n"])));
-exports.StepwiseSliderKnobLabel = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: #000;\n  font-size: ", "px;\n  pointer-events: none;\n  user-select: none;\n"], ["\n  color: #000;\n  font-size: ", "px;\n  pointer-events: none;\n  user-select: none;\n"])), function (props) { return props.knobHeight * .5; });
-var StyledKnobContainer = styled_components_1.default.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n"], ["\n  position: absolute;\n  z-index: 1;\n"])));
-var StyledRoot = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n  height: ", ";\n  position: relative;\n  width: ", ";\n"], ["\n  box-sizing: border-box;\n  display: block;\n  height: ", ";\n  position: relative;\n  width: ", ";\n"])), function (props) { return props.orientation === 'vertical' ? '300px' : '4px'; }, function (props) { return props.orientation === 'vertical' ? '4px' : '300px'; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
 //# sourceMappingURL=StepwiseSlider.js.map

package/lib/StepwiseSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepwiseSlider.js","sourceRoot":"/","sources":["StepwiseSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { HTMLAttributes, MouseEvent, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css } from 'styled-components'\nimport useDragEffect from './hooks/useDragEffect'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:stepwise-slider') : () => {}\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the\n   * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1\n   * being the start.\n   */\n  isInverted?: boolean\n\n  /**\n   * Specifies if the track is clickable to set the position of the knob.\n   */\n  isTrackInteractive?: boolean\n\n  /**\n   * Indicates if position/index change events are dispatched only when dragging ends. When\n   * disabled, aforementioned events are fired repeatedly while dragging.\n   */\n  onlyDispatchesOnDragEnd?: boolean\n\n  /**\n   * A function that returns the label to be displayed at a given slider position and closest step\n   * index (if steps are provided).\n   *\n   * @param position - The current slider position.\n   * @param index - The nearest step index (if steps are provided), or -1 if no steps are provided.\n   *\n   * @returns The label.\n   */\n  labelProvider?: (position: number, index: number) => string\n\n  /**\n   * Padding between the track and the knob in pixels.\n   */\n  trackPadding?: number\n\n  /**\n   * Height of the knob in pixels.\n   */\n  knobHeight?: number\n\n  /**\n   * Width of the knob in pixels.\n   */\n  knobWidth?: number\n\n  /**\n   * Orientation of the slider.\n   */\n  orientation?: 'horizontal' | 'vertical'\n\n  /**\n   * An array of step descriptors. A step is a position (0 - 1 inclusive) on the track where the\n   * knob should snap to if dragging stops near it. Ensure that there are at least two steps: one\n   * for the start of the track and one for the end.\n   */\n  steps?: readonly number[]\n\n  /**\n   * The current index.\n   */\n  index?: number\n\n  /**\n   * Handler invoked when index changes. This can either be invoked from the `index` prop\n   * being changed or from the slider being dragged. Note that if the event is emitted at the end of\n   * dragging due to `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n   * still `true`. This event is emitted right after `onPositionChange`.\n   *\n   * @param index - The current slider index.\n   * @param isDragging - Specifies if the index change is due to dragging.\n   */\n  onIndexChange?: (index: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when position changes. This can either be invoked from the `index` prop\n   * being changed or from the slider being dragged. Note that if the event is emitted at the end of\n   * dragging due to `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n   * still `true`. This event is emitted right before `onIndexChange`.\n   *\n   * @param position - The current slider position.\n   * @param isDragging - Specifies if the position change is due to dragging.\n   */\n  onPositionChange?: (position: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when dragging begins.\n   */\n  onDragStart?: () => void\n}\n\n/**\n * Generates a set of steps compatible with this component.\n *\n * @param length - The number of steps. This must be at least 2 because you must include the\n *                 starting and ending points.\n *\n * @returns An array of steps.\n */\nexport function generateSteps(length: number): readonly number[] {\n  if (length <= 1) throw new Error('`length` value must be greater than or equal to 2')\n  if (Math.round(length) !== length) throw new Error('`length` value must be an integer')\n\n  const interval = 1 / (length - 1)\n\n  return Array(length).fill(null).map((v, i) => {\n    const position = interval * i\n    return position\n  })\n}\n\n/**\n * Gets the index of the step of which the specified position is closest to. If for whatever\n * reason the index cannot be computed, -1 is returned.\n *\n * @param position - The position (0 - 1, inclusive).\n * @param steps - The steps.\n *\n * @returns The nearest index.\n */\nfunction getNearestIndexByPosition(position: number, steps: readonly number[]): number {\n  let index = -1\n  let minDelta = NaN\n\n  for (let i = 0, n = steps.length; i < n; i++) {\n    const step = getPositionAt(i, steps)\n\n    if (isNaN(step)) continue\n\n    const delta = Math.abs(position - step)\n\n    if (isNaN(minDelta) || (delta < minDelta)) {\n      minDelta = delta\n      index = i\n    }\n  }\n\n  return index\n}\n\n/**\n * Gets the position by step index. This value ranges between 0 - 1, inclusive.\n *\n * @param index - The step index.\n * @param steps - The steps.\n *\n * @returns The position. If for whatever reason the position cannot be determined, `NaN` is\n *          returned.\n */\nfunction getPositionAt(index: number, steps: readonly number[]): number {\n  if (index >= steps.length) return NaN\n  return steps[index]\n}\n\n/**\n * A \"stepwise\" slider component supporting both horizontal and vertical orientations that\n * automatically snaps to a set of predefined points on the slider when dragged. These points are\n * referred to as \"steps\", indexed by an integer referred to as \"index\". This index can be two-way\n * binded. The component consists of four customizable elements: a draggable knob, a label on the\n * knob, a scroll track before the knob and a scroll track after the knob. While the width and\n * height of the slider is inferred from its CSS rules, the width and height of the knob are set via\n * props (`knobWidth` and `knobHeight`, respectively). The size of the knob does not impact the size\n * of the slider. While dragging, the slider still emits a position change event, where the position\n * is a decimal ranging between 0.0 and 1.0, inclusive.\n *\n * @exports StepwiseSliderKnob - The component for the knob.\n * @exports StepwiseSliderKnobLabel - The component for the label on the knob.\n * @exports StepwiseSliderStartingTrack - The component for the slide track before the knob.\n * @exports StepwiseSliderEndingTrack - The component for the slide track after the knob.\n */\nexport default function StepwiseSlider({\n  index: externalIndex = 0,\n  isInverted = false,\n  isTrackInteractive = true,\n  knobHeight = 30,\n  knobWidth = 30,\n  labelProvider,\n  onlyDispatchesOnDragEnd = false,\n  orientation = 'vertical',\n  steps = generateSteps(10),\n  trackPadding = 0,\n  onDragEnd,\n  onDragStart,\n  onIndexChange,\n  onPositionChange,\n  ...props\n}: Props) {\n  const mapDragPositionToPosition = (currentPosition: number, dx: number, dy: number) => {\n    const rect = Rect.from(rootRef.current) ?? new Rect()\n    const naturalPosition = isInverted ? 1 - currentPosition : currentPosition\n    const naturalNewPositionX = naturalPosition * rect.width + dx\n    const naturalNewPositionY = naturalPosition * rect.height + dy\n    const naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width))\n    const newPosition = isInverted ? 1 - naturalNewPosition : naturalNewPosition\n    return newPosition\n  }\n\n  const onTrackClick = (event: MouseEvent) => {\n    if (!isTrackInteractive) return\n\n    const rect = Rect.from(rootRef.current) ?? new Rect()\n\n    switch (orientation) {\n    case 'horizontal': {\n      const position = (event.clientX - rect.left) / rect.width\n      const naturalPosition = isInverted ? 1 - position : position\n      setPosition(naturalPosition)\n      break\n    }\n    case 'vertical': {\n      const position = (event.clientY - rect.top) / rect.height\n      const naturalPosition = isInverted ? 1 - position : position\n      setPosition(naturalPosition)\n      break\n    }\n    }\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n  const knobRef = useRef<HTMLButtonElement>(null)\n  const [index, setIndex] = useState(externalIndex)\n\n  const { isDragging: [isDragging], value: [position, setPosition] } = useDragEffect(knobRef, {\n    initialValue: getPositionAt(externalIndex, steps),\n    transform: mapDragPositionToPosition,\n    onDragStart,\n    onDragEnd,\n  })\n\n  // Natural position is the position after taking `isInverted` into account.\n  const naturalPosition = isInverted ? 1 - position : position\n\n  useEffect(() => {\n    if (isDragging) return\n\n    const newPosition = getPositionAt(externalIndex, steps)\n\n    if (position !== newPosition) {\n      debug('Updating drag effect value from index prop...', 'OK', `prop=${newPosition}, effect=${position}`)\n      setPosition(newPosition)\n    }\n\n    if (externalIndex !== index) {\n      setIndex(externalIndex)\n    }\n  }, [externalIndex])\n\n  useEffect(() => {\n    if (isDragging && onlyDispatchesOnDragEnd) return\n\n    onPositionChange?.(position, isDragging)\n\n    const newIndex = getNearestIndexByPosition(position, steps)\n    if (index !== newIndex) setIndex(newIndex)\n  }, [position])\n\n  useEffect(() => {\n    onIndexChange?.(index, isDragging)\n  }, [index])\n\n  useEffect(() => {\n    if (isDragging) return\n\n    const nearestIndex = getNearestIndexByPosition(position, steps)\n    const nearestPosition = getPositionAt(nearestIndex, steps)\n\n    if (nearestPosition !== position || onlyDispatchesOnDragEnd) {\n      setPosition(nearestPosition)\n      onPositionChange?.(nearestPosition, true)\n    }\n  }, [isDragging])\n\n  return (\n    <StyledRoot {...props} ref={rootRef} orientation={orientation}>\n      <StepwiseSliderStartingTrack orientation={orientation} isClickable={isTrackInteractive} onClick={event => onTrackClick(event)}\n        style={orientation === 'vertical' ? {\n          top: 0,\n          height: `calc(${naturalPosition*100}% - ${trackPadding <= 0 ? 0 : knobHeight*.5}px - ${trackPadding}px)`,\n        } : {\n          left: 0,\n          width: `calc(${naturalPosition*100}% - ${trackPadding <= 0 ? 0 : knobWidth*.5}px - ${trackPadding}px)`,\n        }}\n      />\n      <StyledKnobContainer ref={knobRef} style={{\n        transform: 'translate3d(-50%, -50%, 0)',\n        ...(orientation === 'vertical' ? {\n          left: '50%',\n          top: `${naturalPosition*100}%`,\n          transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n        } : {\n          left: `${naturalPosition*100}%`,\n          top: '50%',\n          transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n        }),\n      }}>\n        <StepwiseSliderKnob\n          className={classNames({\n            'at-end': isInverted ? (position === 0) : (position === 1),\n            'at-start': isInverted ? (position === 1) : (position === 0),\n            'dragging': isDragging,\n          })}\n          style={{\n            height: `${knobHeight}px`,\n            width: `${knobWidth}px`,\n          }}\n        >\n          {steps && labelProvider && (\n            <StepwiseSliderKnobLabel knobHeight={knobHeight}>{labelProvider(position, getNearestIndexByPosition(position, steps))}</StepwiseSliderKnobLabel>\n          )}\n        </StepwiseSliderKnob>\n      </StyledKnobContainer>\n      <StepwiseSliderEndingTrack orientation={orientation} isClickable={isTrackInteractive} onClick={event => onTrackClick(event)}\n        style={orientation === 'vertical' ? {\n          bottom: 0,\n          height: `calc(${(1 - naturalPosition)*100}% - ${trackPadding <= 0 ? 0 : knobHeight*.5}px - ${trackPadding}px)`,\n        } : {\n          right: 0,\n          width: `calc(${(1 - naturalPosition)*100}% - ${trackPadding <= 0 ? 0 : knobWidth*.5}px - ${trackPadding}px)`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nexport const StepwiseSliderStartingTrack = styled.div<{\n  orientation: NonNullable<Props['orientation']>\n  isClickable: boolean\n}>`\n  background: #fff;\n  cursor: ${props => props.isClickable ? 'pointer' : 'auto' };\n  pointer-events: ${props => props.isClickable ? 'auto' : 'none' };\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  &::after {\n    content: '';\n    height: 100%;\n    min-height: 20px;\n    min-width: 20px;\n    position: absolute;\n    transform: ${props => props.orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)'};\n    width: 100%;\n  }\n\n  ${props => props.orientation === 'vertical' ? css`\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  ` : css`\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  `}\n`\n\nexport const StepwiseSliderEndingTrack = styled.div<{\n  orientation: NonNullable<Props['orientation']>\n  isClickable: boolean\n}>`\n  background: #fff;\n  cursor: ${props => props.isClickable ? 'pointer' : 'auto' };\n  pointer-events: ${props => props.isClickable ? 'auto' : 'none' };\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  &::after {\n    content: '';\n    height: 100%;\n    min-height: 20px;\n    min-width: 20px;\n    position: absolute;\n    transform: ${props => props.orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)'};\n    width: 100%;\n  }\n\n  ${props => props.orientation === 'vertical' ? css`\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  ` : css`\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  `}\n`\n\nexport const StepwiseSliderKnob = styled.div`\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: 1;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n`\n\nexport const StepwiseSliderKnobLabel = styled.label<{ knobHeight: NonNullable<Props['knobHeight']> }>`\n  color: #000;\n  font-size: ${props => props.knobHeight * .5}px;\n  pointer-events: none;\n  user-select: none;\n`\n\nconst StyledKnobContainer = styled.button`\n  position: absolute;\n  z-index: 1;\n`\n\nconst StyledRoot = styled.div<{\n  orientation: Props['orientation']\n}>`\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.orientation === 'vertical' ? '300px' : '4px'};\n  position: relative;\n  width: ${props => props.orientation === 'vertical' ? '4px' : '300px'};\n`\n"]}
+{"version":3,"file":"StepwiseSlider.js","sourceRoot":"/","sources":["StepwiseSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, HTMLAttributes, MouseEvent, PropsWithChildren, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport useDragEffect from './hooks/useDragEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\nimport useDebug from './utils/useDebug'\n\nconst debug = useDebug('stepwise-slider')\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type StepwiseSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * By default the position is a value from 0 - 1, 0 being the start of the\n   * slider and 1 being the end. Switching on this flag inverts this behavior,\n   * where 0 becomes the end of the slider and 1 being the start.\n   */\n  isInverted?: boolean\n\n  /**\n   * Specifies if the track is clickable to set the position of the knob.\n   */\n  isTrackInteractive?: boolean\n\n  /**\n   * Indicates if position/index change events are dispatched only when dragging\n   * ends. When disabled, aforementioned events are fired repeatedly while\n   * dragging.\n   */\n  onlyDispatchesOnDragEnd?: boolean\n\n  /**\n   * Padding between the track and the knob in pixels.\n   */\n  trackPadding?: number\n\n  /**\n   * Height of the knob in pixels.\n   */\n  knobHeight?: number\n\n  /**\n   * Width of the knob in pixels.\n   */\n  knobWidth?: number\n\n  /**\n   * Orientation of the slider.\n   */\n  orientation?: Orientation\n\n  /**\n   * An array of step descriptors. A step is a position (0 - 1 inclusive) on the\n   * track where the knob should snap to if dragging stops near it. Ensure that\n   * there are at least two steps: one for the start of the track and one for\n   * the end.\n   */\n  steps?: readonly number[]\n\n  /**\n   * The current index.\n   */\n  index?: number\n\n  /**\n   * A function that returns the label to be displayed at a given slider\n   * position and closest step index (if steps are provided).\n   *\n   * @param position - The current slider position.\n   * @param index - The nearest step index (if steps are provided), or -1 if no\n   *                steps are provided.\n   *\n   * @returns The label.\n   */\n  labelProvider?: (position: number, index: number) => string\n\n  /**\n   * Handler invoked when index changes. This can either be invoked from the\n   * `index` prop being changed or from the slider being dragged. Note that if\n   * the event is emitted at the end of dragging due to\n   * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n   * still `true`. This event is emitted right after `onPositionChange`.\n   *\n   * @param index - The current slider index.\n   * @param isDragging - Specifies if the index change is due to dragging.\n   */\n  onIndexChange?: (index: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when position changes. This can either be invoked from the\n   * `index` prop being changed or from the slider being dragged. Note that if\n   * the event is emitted at the end of dragging due to\n   * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n   * still `true`. This event is emitted right before `onIndexChange`.\n   *\n   * @param position - The current slider position.\n   * @param isDragging - Specifies if the position change is due to dragging.\n   */\n  onPositionChange?: (position: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when dragging begins.\n   */\n  onDragStart?: () => void\n}>\n\n/**\n * A \"stepwise\" slider component supporting both horizontal and vertical\n * orientations that automatically snaps to a set of predefined points on the\n * slider when dragged. These points are referred to as \"steps\", indexed by an\n * integer referred to as \"index\". This index can be two-way binded. The\n * component consists of four customizable elements: a draggable knob, a label\n * on the knob, a scroll track before the knob and a scroll track after the\n * knob. While the width and height of the slider is inferred from its CSS\n * rules, the width and height of the knob are set via props (`knobWidth` and\n * `knobHeight`, respectively). The size of the knob does not impact the size of\n * the slider. While dragging, the slider still emits a position change event,\n * where the position is a decimal ranging between 0.0 and 1.0, inclusive.\n *\n * @exports StepwiseSliderKnob - The component for the knob.\n * @exports StepwiseSliderLabel - The component for the label on the knob.\n * @exports StepwiseSliderTrack - The component for the slide track on either\n *                                side of the knob.\n */\nexport default forwardRef<HTMLDivElement, StepwiseSliderProps>(({\n  children,\n  className,\n  index: externalIndex = 0,\n  isInverted = false,\n  isTrackInteractive = true,\n  knobHeight = 30,\n  knobWidth = 30,\n  labelProvider,\n  onlyDispatchesOnDragEnd = false,\n  orientation = 'vertical',\n  steps = generateSteps(10),\n  trackPadding = 0,\n  onDragEnd,\n  onDragStart,\n  onIndexChange,\n  onPositionChange,\n  ...props\n}, ref) => {\n  const mapDragValueToPosition = (value: number, dx: number, dy: number) => {\n    const rect = Rect.from(bodyRef.current) ?? new Rect()\n    const truePosition = isInverted ? 1 - value : value\n    const trueNewPositionX = truePosition * rect.width + dx\n    const trueNewPositionY = truePosition * rect.height + dy\n    const trueNewPosition = orientation === 'vertical' ? Math.max(0, Math.min(1, trueNewPositionY / rect.height)) : Math.max(0, Math.min(1, trueNewPositionX / rect.width))\n    const normalizedPosition = isInverted ? 1 - trueNewPosition : trueNewPosition\n\n    return normalizedPosition\n  }\n\n  const trackClickHandler = (event: MouseEvent) => {\n    if (!isTrackInteractive) return\n\n    const rect = Rect.from(bodyRef.current) ?? new Rect()\n\n    switch (orientation) {\n      case 'horizontal': {\n        const trackPosition = (event.clientX - rect.left) / rect.width\n        const normalizedPosition = isInverted ? 1 - trackPosition : trackPosition\n        setPosition(normalizedPosition)\n        break\n      }\n      case 'vertical': {\n        const trackPosition = (event.clientY - rect.top) / rect.height\n        const normalizedPosition = isInverted ? 1 - trackPosition : trackPosition\n        setPosition(normalizedPosition)\n        break\n      }\n      default:\n        break\n    }\n  }\n\n  const bodyRef = useRef<HTMLDivElement>(null)\n  const knobContainerRef = useRef<HTMLButtonElement>(null)\n  const [index, setIndex] = useState(externalIndex)\n\n  const { isDragging: [isDragging], isReleasing: [isReleasing], value: [position, setPosition] } = useDragEffect(knobContainerRef, {\n    initialValue: getPositionAt(externalIndex, steps),\n    transform: mapDragValueToPosition,\n    onDragStart,\n    onDragEnd,\n  })\n\n  // Natural position is the position affecting internal components accounting\n  // for `isInverted`.\n  const naturalPosition = isInverted ? 1 - position : position\n  const isAtEnd = isInverted ? position === 0 : position === 1\n  const isAtStart = isInverted ? position === 1 : position === 0\n\n  useEffect(() => {\n    if (isDragging) return\n\n    const newPosition = getPositionAt(externalIndex, steps)\n\n    if (position !== newPosition) {\n      debug('Updating drag effect value from index prop...', 'OK', `prop=${newPosition}, effect=${position}`)\n      setPosition(newPosition)\n    }\n\n    if (externalIndex !== index) {\n      setIndex(externalIndex)\n    }\n  }, [externalIndex])\n\n  useEffect(() => {\n    if (isDragging && onlyDispatchesOnDragEnd) return\n\n    onPositionChange?.(position, isDragging)\n\n    const newIndex = getNearestIndexByPosition(position, steps)\n    if (index !== newIndex) setIndex(newIndex)\n  }, [position])\n\n  useEffect(() => {\n    onIndexChange?.(index, isDragging)\n  }, [index])\n\n  useEffect(() => {\n    if (isDragging) return\n\n    const nearestIndex = getNearestIndexByPosition(position, steps)\n    const nearestPosition = getPositionAt(nearestIndex, steps)\n\n    if (nearestPosition !== position || onlyDispatchesOnDragEnd) {\n      setPosition(nearestPosition)\n      onPositionChange?.(nearestPosition, true)\n    }\n  }, [isDragging])\n\n  const components = asComponentDict(children, {\n    knob: StepwiseSliderKnob,\n    label: StepwiseSliderLabel,\n    track: StepwiseSliderTrack,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    track: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    knob: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    label: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n  })\n\n  const fixedStyles = asStyleDict({\n    body: {\n      height: '100%',\n      width: '100%',\n    },\n    knobContainer: {\n      background: 'none',\n      border: 'none',\n      outline: 'none',\n      position: 'absolute',\n      transform: 'translate3d(-50%, -50%, 0)',\n      zIndex: '1',\n      ...orientation === 'vertical' ? {\n        left: '50%',\n        top: `${naturalPosition * 100}%`,\n        transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n      } : {\n        left: `${naturalPosition * 100}%`,\n        top: '50%',\n        transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n      },\n    },\n    knob: {\n      height: `${knobHeight}px`,\n      touchAction: 'none',\n      width: `${knobWidth}px`,\n    },\n    label: {\n      pointerEvents: 'none',\n      userSelect: 'none',\n    },\n    track: {\n      cursor: isTrackInteractive ? 'pointer' : 'auto',\n      pointerEvents: isTrackInteractive ? 'auto' : 'none',\n      position: 'absolute',\n      ...orientation === 'vertical' ? {\n        left: '0',\n        margin: '0 auto',\n        right: '0',\n        width: '100%',\n      } : {\n        bottom: '0',\n        height: '100%',\n        margin: 'auto 0',\n        top: '0',\n      },\n    },\n    trackHitbox: {\n      height: '100%',\n      minHeight: '20px',\n      minWidth: '20px',\n      position: 'absolute',\n      transform: orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)',\n      width: '100%',\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    knob: {\n      alignItems: 'center',\n      background: '#fff',\n      boxSizing: 'border-box',\n      display: 'flex',\n      justifyContent: 'center',\n    },\n    label: {\n      color: '#000',\n      fontSize: '12px',\n      lineHeight: `${knobHeight}px`,\n    },\n    track: {\n      background: '#fff',\n    },\n  })\n\n  return (\n    <div {...props} ref={ref} className={classNames(className, fixedClassNames.root)}>\n      <div ref={bodyRef} style={fixedStyles.body}>\n        {cloneStyledElement(components.track ?? <StepwiseSliderTrack style={defaultStyles.track}/>, {\n          className: classNames('start', fixedClassNames.track),\n          style: styles(fixedStyles.track, orientation === 'vertical' ? {\n            height: `calc(${naturalPosition * 100}% - ${trackPadding <= 0 ? 0 : knobHeight * 0.5}px - ${trackPadding}px)`,\n            top: '0',\n          } : {\n            left: '0',\n            width: `calc(${naturalPosition * 100}% - ${trackPadding <= 0 ? 0 : knobWidth * 0.5}px - ${trackPadding}px)`,\n          }),\n          onClick: trackClickHandler,\n        }, <div style={fixedStyles.trackHitbox}/>)}\n        {cloneStyledElement(components.track ?? <StepwiseSliderTrack style={defaultStyles.track}/>, {\n          className: classNames('end', fixedClassNames.track),\n          style: styles(fixedStyles.track, orientation === 'vertical' ? {\n            bottom: '0',\n            height: `calc(${(1 - naturalPosition) * 100}% - ${trackPadding <= 0 ? 0 : knobHeight * 0.5}px - ${trackPadding}px)`,\n          } : {\n            right: '0',\n            width: `calc(${(1 - naturalPosition) * 100}% - ${trackPadding <= 0 ? 0 : knobWidth * 0.5}px - ${trackPadding}px)`,\n          }),\n          onClick: trackClickHandler,\n        }, <div style={fixedStyles.trackHitbox}/>)}\n        <button ref={knobContainerRef} style={fixedStyles.knobContainer}>\n          {cloneStyledElement(components.knob ?? <StepwiseSliderKnob style={defaultStyles.knob}/>, {\n            className: classNames(fixedClassNames.knob),\n            style: styles(fixedStyles.knob),\n          }, steps && labelProvider && cloneStyledElement(components.label ?? <StepwiseSliderLabel style={defaultStyles.label}/>, {\n            className: classNames(fixedClassNames.label),\n            style: styles(fixedStyles.label),\n          }, labelProvider(position, getNearestIndexByPosition(position, steps))))}\n        </button>\n      </div>\n    </div>\n  )\n})\n\nexport const StepwiseSliderTrack = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const StepwiseSliderKnob = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const StepwiseSliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\n/**\n * Generates a set of steps compatible with this component.\n *\n * @param length - The number of steps. This must be at least 2 because you must\n *                 include the starting and ending points.\n *\n * @returns An array of steps.\n */\nexport function generateSteps(length: number): readonly number[] {\n  if (length <= 1) throw new Error('`length` value must be greater than or equal to 2')\n  if (Math.round(length) !== length) throw new Error('`length` value must be an integer')\n\n  const interval = 1 / (length - 1)\n\n  return Array(length).fill(null).map((v, i) => {\n    const position = interval * i\n\n    return position\n  })\n}\n\n/**\n * Gets the index of the step of which the specified position is closest to. If\n * for whatever reason the index cannot be computed, -1 is returned.\n *\n * @param position - The position (0 - 1, inclusive).\n * @param steps - The steps.\n *\n * @returns The nearest index.\n */\nfunction getNearestIndexByPosition(position: number, steps: readonly number[]): number {\n  let index = -1\n  let minDelta = NaN\n\n  for (let i = 0, n = steps.length; i < n; i++) {\n    const step = getPositionAt(i, steps)\n\n    if (isNaN(step)) continue\n\n    const delta = Math.abs(position - step)\n\n    if (isNaN(minDelta) || delta < minDelta) {\n      minDelta = delta\n      index = i\n    }\n  }\n\n  return index\n}\n\n/**\n * Gets the position by step index. This value ranges between 0 - 1, inclusive.\n *\n * @param index - The step index.\n * @param steps - The steps.\n *\n * @returns The position. If for whatever reason the position cannot be\n *          determined, `NaN` is returned.\n */\nfunction getPositionAt(index: number, steps: readonly number[]): number {\n  if (index >= steps.length) return NaN\n\n  return steps[index]\n}\n"]}

package/lib/SwipeContainer.d.ts

@@ -1,5 +1,5 @@
-import { HTMLAttributes } from 'react';
-declare type Props = HTMLAttributes<HTMLDivElement> & {
+import React, { HTMLAttributes } from 'react';
+export declare type SwipeContainerProps = HTMLAttributes<HTMLDivElement> & {
     isEnabled?: boolean;
     threshold?: number;
     onSwipeDown?: () => void;
@@ -8,7 +8,15 @@ declare type Props = HTMLAttributes<HTMLDivElement> & {
     onSwipeUp?: () => void;
 };
 /**
- * An empty component with a backing `<div>` element that detects swipe gestures.
+ * An empty component with a backing `<div>` element that detects swipe
+ * gestures.
  */
-export default function SwipeContainer({ children, isEnabled, threshold, onSwipeDown, onSwipeLeft, onSwipeRight, onSwipeUp, ...props }: Props): JSX.Element;
-export {};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    isEnabled?: boolean | undefined;
+    threshold?: number | undefined;
+    onSwipeDown?: (() => void) | undefined;
+    onSwipeLeft?: (() => void) | undefined;
+    onSwipeRight?: (() => void) | undefined;
+    onSwipeUp?: (() => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;