etudes 0.27.0 → 0.31.0

package/lib/Slider.d.ts

@@ -1,43 +1,36 @@
 import { CSSProperties } from 'react';
-import { ExtendedCSSFunction, Orientation } from './types';
-export declare type KnobCSSProps = Readonly<{
-    isAtBeginning: boolean;
-    isAtEnd: boolean;
-    isDragging?: boolean;
-}>;
+import { CSSProp } from 'styled-components';
+import { Orientation } from './types';
 export declare type GutterCSSProps = Readonly<{
     orientation: Orientation;
 }>;
 export declare type LabelCSSProps = Readonly<{
     knobHeight: number;
 }>;
-export declare type BreakpointDescriptor = {
-    label?: string;
-    position?: number;
-};
 export declare type Props = {
     id?: string;
     className?: string;
     style?: CSSProperties;
     isInverted?: boolean;
     onlyDispatchesOnDragEnd?: boolean;
+    isLabelVisible?: boolean;
+    labelProvider?: (position: number, index: number) => string;
     gutterPadding?: number;
     knobHeight?: number;
     knobWidth?: number;
     orientation?: Orientation;
-    defaultPosition?: number;
+    position?: number;
     onDragEnd?: () => void;
     onDragStart?: () => void;
     onPositionChange?: (position: number) => void;
-    startingGutterCSS?: ExtendedCSSFunction<GutterCSSProps>;
-    endingGutterCSS?: ExtendedCSSFunction<GutterCSSProps>;
-    knobCSS?: ExtendedCSSFunction<KnobCSSProps>;
-    labelCSS?: ExtendedCSSFunction<LabelCSSProps>;
-    breakpoints?: readonly BreakpointDescriptor[];
+    startingGutterCSS?: CSSProp<any>;
+    endingGutterCSS?: CSSProp<any>;
+    knobCSS?: CSSProp<any>;
+    labelCSS?: CSSProp<any>;
+    breakpoints?: readonly number[];
     autoSnap?: boolean;
-    isLabelVisible?: boolean;
-    defaultIndex?: number;
+    index?: number;
     onIndexChange?: (index: number) => void;
 };
-export declare function sliderBreakpointsFactory(length: number, labelIterator?: (index: number, position: number) => string): readonly BreakpointDescriptor[];
-export default function Slider({ id, className, style, isInverted, onlyDispatchesOnDragEnd, gutterPadding, knobHeight, knobWidth, orientation, defaultPosition, onDragEnd, onDragStart, onPositionChange, startingGutterCSS, endingGutterCSS, knobCSS, labelCSS, breakpoints, autoSnap, isLabelVisible, defaultIndex, onIndexChange, }: Props): JSX.Element;
+export declare function generateBreakpoints(length: number): readonly number[];
+export default function Slider({ id, className, style, isInverted, onlyDispatchesOnDragEnd, gutterPadding, knobHeight, knobWidth, orientation, position, isLabelVisible, labelProvider, onDragEnd, onDragStart, onPositionChange, startingGutterCSS, endingGutterCSS, knobCSS, labelCSS, breakpoints, autoSnap, index, onIndexChange, }: Props): JSX.Element;

package/lib/Slider.js

@@ -53,93 +53,51 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sliderBreakpointsFactory = void 0;
+exports.generateBreakpoints = void 0;
+var classnames_1 = __importDefault(require("classnames"));
 var interactjs_1 = __importDefault(require("interactjs"));
 var react_1 = __importStar(require("react"));
 var spase_1 = require("spase");
 var styled_components_1 = __importStar(require("styled-components"));
-function sliderBreakpointsFactory(length, labelIterator) {
+function generateBreakpoints(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 _a;
         var pos = interval * i;
-        return {
-            label: (_a = labelIterator === null || labelIterator === void 0 ? void 0 : labelIterator(i, pos)) !== null && _a !== void 0 ? _a : undefined,
-            position: pos,
-        };
+        return pos;
     });
 }
-exports.sliderBreakpointsFactory = sliderBreakpointsFactory;
+exports.generateBreakpoints = generateBreakpoints;
 function Slider(_a) {
-    var _b;
-    var id = _a.id, className = _a.className, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.isInverted, isInverted = _d === void 0 ? false : _d, _e = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _e === void 0 ? false : _e, _f = _a.gutterPadding, gutterPadding = _f === void 0 ? 0 : _f, _g = _a.knobHeight, knobHeight = _g === void 0 ? 30 : _g, _h = _a.knobWidth, knobWidth = _h === void 0 ? 30 : _h, _j = _a.orientation, orientation = _j === void 0 ? 'vertical' : _j, _k = _a.defaultPosition, defaultPosition = _k === void 0 ? 0 : _k, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onPositionChange = _a.onPositionChange, _l = _a.startingGutterCSS, startingGutterCSS = _l === void 0 ? function (props) { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""]))); } : _l, _m = _a.endingGutterCSS, endingGutterCSS = _m === void 0 ? function (props) { return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""]))); } : _m, _o = _a.knobCSS, knobCSS = _o === void 0 ? function (props) { return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""]))); } : _o, _p = _a.labelCSS, labelCSS = _p === void 0 ? function (props) { return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""]))); } : _p, _q = _a.breakpoints, breakpoints = _q === void 0 ? sliderBreakpointsFactory(10, function (index, position) { return "".concat(index); }) : _q, _r = _a.autoSnap, autoSnap = _r === void 0 ? true : _r, _s = _a.isLabelVisible, isLabelVisible = _s === void 0 ? true : _s, defaultIndex = _a.defaultIndex, onIndexChange = _a.onIndexChange;
-    function updateRect() {
-        var _a;
-        setRect((_a = spase_1.Rect.from(rootRef.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect());
-    }
-    function updateKnobPosition() {
-        var naturalPosition = getPosition(true);
-        if (orientation === 'vertical') {
-            setKnobPosition(naturalPosition * rect.height);
-        }
-        else {
-            setKnobPosition(naturalPosition * rect.width);
-        }
-    }
-    function getPosition(natural) {
-        if (natural === void 0) { natural = false; }
-        if (natural) {
-            return isInverted ? (1 - position.current) : position.current;
-        }
-        else {
-            return position.current;
-        }
-    }
-    function setPosition(value) {
-        position.current = value;
-        updateKnobPosition();
-        if (onlyDispatchesOnDragEnd && isDragging)
-            return;
-        onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(position.current);
-        if (breakpoints)
-            onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(getClosestIndex());
-    }
-    function getStartingGutterLength() {
-        var naturalPosition = getPosition(true);
-        var knobLength = orientation === 'vertical' ? knobHeight : knobWidth;
-        var sliderLength = orientation === 'vertical' ? rect.height : rect.width;
-        return Math.max(0, naturalPosition * sliderLength - (knobLength / 2) - gutterPadding);
-    }
-    function getEndingGutterLength() {
-        var naturalPosition = getPosition(true);
-        var knobLength = orientation === 'vertical' ? knobHeight : knobWidth;
-        var sliderLength = orientation === 'vertical' ? rect.height : rect.width;
-        return Math.max(0, (1 - naturalPosition) * sliderLength - (knobLength / 2) - gutterPadding);
-    }
+    var id = _a.id, className = _a.className, style = _a.style, _b = _a.isInverted, isInverted = _b === void 0 ? false : _b, _c = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _c === void 0 ? false : _c, _d = _a.gutterPadding, gutterPadding = _d === void 0 ? 0 : _d, _e = _a.knobHeight, knobHeight = _e === void 0 ? 30 : _e, _f = _a.knobWidth, knobWidth = _f === void 0 ? 30 : _f, _g = _a.orientation, orientation = _g === void 0 ? 'vertical' : _g, _h = _a.position, position = _h === void 0 ? 0 : _h, _j = _a.isLabelVisible, isLabelVisible = _j === void 0 ? true : _j, labelProvider = _a.labelProvider, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onPositionChange = _a.onPositionChange, startingGutterCSS = _a.startingGutterCSS, endingGutterCSS = _a.endingGutterCSS, knobCSS = _a.knobCSS, labelCSS = _a.labelCSS, breakpoints = _a.breakpoints, _k = _a.autoSnap, autoSnap = _k === void 0 ? true : _k, index = _a.index, onIndexChange = _a.onIndexChange;
     function getClosestIndex() {
         if (!breakpoints)
             return -1;
-        var idx = 0;
-        var delta = NaN;
+        var index = 0;
+        var minDelta = NaN;
         for (var i = 0, n = breakpoints.length; i < n; i++) {
             var breakpoint = getPositionByIndex(i);
-            var d = Math.abs(getPosition() - breakpoint);
-            if (isNaN(delta) || (d < delta)) {
-                delta = d;
-                idx = i;
+            var delta = Math.abs(livePosition.current - breakpoint);
+            if (isNaN(minDelta) || (delta < minDelta)) {
+                minDelta = delta;
+                index = i;
             }
         }
-        return idx;
+        return index;
     }
     function getPositionByIndex(index) {
-        var _a;
         if (!breakpoints)
             return NaN;
-        return (_a = breakpoints[index].position) !== null && _a !== void 0 ? _a : (index / (breakpoints.length - 1));
+        return breakpoints[index];
+    }
+    function setLivePosition(value) {
+        livePosition.current = value;
+        _setPosition(value);
+        if (breakpoints)
+            _setIndex(getClosestIndex());
     }
     function initInteractivity() {
         var knob = knobRef.current;
@@ -166,13 +124,15 @@ function Slider(_a) {
         onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
     }
     function onKnobDragMove(delta) {
-        var naturalPosition = getPosition(true);
+        var _a;
+        var rect = (_a = spase_1.Rect.from(rootRef.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect();
+        var naturalPosition = isInverted ? 1 - livePosition.current : livePosition.current;
         var naturalNewPositionX = naturalPosition * rect.width + delta;
         var naturalNewPositionY = naturalPosition * rect.height + delta;
         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;
         setIsDragging(true);
-        setPosition(newPosition);
+        setLivePosition(newPosition);
     }
     function onKnobDragStop() {
         setIsDragging(false);
@@ -183,52 +143,90 @@ function Slider(_a) {
         if (!autoSnap || !breakpoints)
             return;
         var position = getPositionByIndex(getClosestIndex());
-        setPosition(position);
+        setLivePosition(position);
     }
     var rootRef = (0, react_1.useRef)(null);
     var knobRef = (0, react_1.useRef)(null);
-    var position = (0, react_1.useRef)(((breakpoints !== undefined) && (defaultIndex !== undefined)) ? getPositionByIndex(defaultIndex) : defaultPosition);
-    var _t = __read((0, react_1.useState)(new spase_1.Rect()), 2), rect = _t[0], setRect = _t[1];
-    var _u = __read((0, react_1.useState)(undefined), 2), isDragging = _u[0], setIsDragging = _u[1];
-    var _v = __read((0, react_1.useState)(NaN), 2), knobPosition = _v[0], setKnobPosition = _v[1];
-    (0, react_1.useEffect)(function () {
-        updateRect();
-    }, [orientation, rootRef]);
+    var livePosition = (0, react_1.useRef)((breakpoints !== undefined && index !== undefined) ? getPositionByIndex(index) : position);
+    var _l = __read((0, react_1.useState)(livePosition.current), 2), _position = _l[0], _setPosition = _l[1];
+    var _m = __read((0, react_1.useState)(getClosestIndex()), 2), _index = _m[0], _setIndex = _m[1];
+    var _o = __read((0, react_1.useState)(undefined), 2), isDragging = _o[0], setIsDragging = _o[1];
+    var naturalPosition = isInverted ? 1 - _position : _position;
     (0, react_1.useEffect)(function () {
         initInteractivity();
-        updateKnobPosition();
         return function () {
             deinitInteractivity();
         };
-    }, [rect]);
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (breakpoints && index !== undefined)
+            return;
+        if (position === livePosition.current)
+            return;
+        setIsDragging(undefined);
+        setLivePosition(position);
+    }, [position]);
+    (0, react_1.useEffect)(function () {
+        if (!breakpoints || index === undefined)
+            return;
+        var position = getPositionByIndex(index);
+        if (position === livePosition.current)
+            return;
+        setIsDragging(undefined);
+        setLivePosition(position);
+    }, [index]);
+    (0, react_1.useEffect)(function () {
+        if (onlyDispatchesOnDragEnd && isDragging)
+            return;
+        onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(_position);
+    }, [_position]);
+    (0, react_1.useEffect)(function () {
+        if (onlyDispatchesOnDragEnd && isDragging)
+            return;
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(_index);
+    }, [_index]);
     (0, react_1.useEffect)(function () {
         snapToClosestBreakpointIfNeeded();
     }, [autoSnap]);
     return (react_1.default.createElement(StyledRoot, { ref: rootRef, id: id, className: className, orientation: orientation, style: style },
-        react_1.default.createElement(StyledGutter, { orientation: orientation, extendedCSS: startingGutterCSS, style: orientation === 'vertical' ? {
+        react_1.default.createElement(StyledGutter, { orientation: orientation, css: startingGutterCSS, style: orientation === 'vertical' ? {
                 top: 0,
-                height: "".concat(getStartingGutterLength(), "px"),
+                height: "calc(".concat(naturalPosition * 100, "% - ").concat(knobHeight * .5, "px - ").concat(gutterPadding, "px)"),
             } : {
                 left: 0,
-                width: "".concat(getStartingGutterLength(), "px"),
+                width: "calc(".concat(naturalPosition * 100, "% - ").concat(knobWidth * .5, "px - ").concat(gutterPadding, "px)"),
             } }),
-        react_1.default.createElement(StyledKnob, { ref: knobRef, isAtEnd: isInverted ? (position.current === 0) : (position.current === 1), isAtBeginning: isInverted ? (position.current === 1) : (position.current === 0), isDragging: isDragging, extendedCSS: knobCSS, style: __assign({ height: "".concat(knobHeight, "px"), position: 'absolute', width: "".concat(knobWidth, "px"), zIndex: 1 }, (orientation === 'vertical' ? {
-                margin: "".concat(-knobHeight / 2 + knobPosition, "px 0 0 ").concat((rect.width - knobWidth) / 2, "px"),
+        react_1.default.createElement(StyledKnobContainer, { ref: knobRef, style: __assign({ transform: 'translate3d(-50%, -50%, 0)' }, (orientation === 'vertical' ? {
+                left: '50%',
+                top: "".concat(_position * 100, "%"),
+                transition: isDragging === false ? 'top 100ms ease-out' : 'none',
             } : {
-                margin: "".concat((rect.height - knobHeight) / 2, "px 0 0 ").concat(-knobWidth / 2 + knobPosition, "px"),
-            })) }, breakpoints && isLabelVisible && (react_1.default.createElement(StyledLabel, { knobHeight: knobHeight, extendedCSS: labelCSS }, (_b = breakpoints[getClosestIndex()].label) !== null && _b !== void 0 ? _b : ''))),
-        react_1.default.createElement(StyledGutter, { orientation: orientation, extendedCSS: endingGutterCSS, style: orientation === 'vertical' ? {
+                left: "".concat(_position * 100, "%"),
+                top: '50%',
+                transition: isDragging === false ? 'left 100ms ease-out' : 'none',
+            })) },
+            react_1.default.createElement(StyledKnob, { className: (0, classnames_1.default)({
+                    'at-end': isInverted ? (_position === 0) : (_position === 1),
+                    'at-start': isInverted ? (_position === 1) : (_position === 0),
+                    'dragging': isDragging === true,
+                    'idle': isDragging === false,
+                }), css: knobCSS, style: {
+                    height: "".concat(knobHeight, "px"),
+                    width: "".concat(knobWidth, "px"),
+                } }, breakpoints && isLabelVisible && labelProvider && (react_1.default.createElement(StyledLabel, { knobHeight: knobHeight, css: labelCSS }, labelProvider(_position, getClosestIndex()))))),
+        react_1.default.createElement(StyledGutter, { orientation: orientation, css: endingGutterCSS, style: orientation === 'vertical' ? {
                 bottom: 0,
-                height: "".concat(getEndingGutterLength(), "px"),
+                height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(knobHeight * .5, "px - ").concat(gutterPadding, "px)"),
             } : {
                 right: 0,
-                width: "".concat(getEndingGutterLength(), "px"),
+                width: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(knobWidth * .5, "px - ").concat(gutterPadding, "px)"),
             } })));
 }
 exports.default = Slider;
-var StyledGutter = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background: #fff;\n  position: absolute;\n\n  ", "\n\n  ", "\n"], ["\n  background: #fff;\n  position: absolute;\n\n  ", "\n\n  ", "\n"])), function (props) { return props.orientation === 'vertical' ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __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_6 || (templateObject_6 = __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  "]))); }, function (props) { return props.extendedCSS(props); });
-var StyledLabel = 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  ", "\n"], ["\n  color: #000;\n  font-size: ", "px;\n  pointer-events: none;\n  user-select: none;\n\n  ", "\n"])), function (props) { return props.knobHeight * .5; }, function (props) { return props.extendedCSS(props); });
-var StyledKnob = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: ", ";\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: ", ";\n  transition-timing-function: ease-out;\n\n  ", "\n"], ["\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: ", ";\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: ", ";\n  transition-timing-function: ease-out;\n\n  ", "\n"])), function (props) { return props.isDragging ? .6 : 1; }, function (props) { return props.isDragging === false ? 'background, color, opacity, margin, transform' : 'background, color, transform, opacity'; }, function (props) { return props.extendedCSS(props); });
-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;
+var StyledGutter = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: #fff;\n  position: absolute;\n\n  ", "\n\n  ", "\n"], ["\n  background: #fff;\n  position: absolute;\n\n  ", "\n\n  ", "\n"])), 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  "]))); }, function (props) { return props.css; });
+var StyledLabel = styled_components_1.default.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: #000;\n  font-size: ", "px;\n  pointer-events: none;\n  user-select: none;\n\n  ", "\n"], ["\n  color: #000;\n  font-size: ", "px;\n  pointer-events: none;\n  user-select: none;\n\n  ", "\n"])), function (props) { return props.knobHeight * .5; }, function (props) { return props.css; });
+var StyledKnobContainer = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n  transition-duration: 100ms;\n  transition-property: top;\n  transition-timing-function: ease-out;\n"], ["\n  position: absolute;\n  z-index: 1;\n  transition-duration: 100ms;\n  transition-property: top;\n  transition-timing-function: ease-out;\n"])));
+var StyledKnob = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  cursor: pointer;\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  &.idle {\n    opacity: 1;\n    transition-property: background, color, opacity, margin, transform;\n  }\n\n  &.dragging {\n    opacity: .6;\n    transition-property: background, color, transform, opacity;\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  cursor: pointer;\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  &.idle {\n    opacity: 1;\n    transition-property: background, color, opacity, margin, transform;\n  }\n\n  &.dragging {\n    opacity: .6;\n    transition-property: background, color, transform, opacity;\n  }\n\n  ", "\n"])), function (props) { return props.css; });
+var StyledRoot = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __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;
 //# sourceMappingURL=Slider.js.map

package/lib/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"/","sources":["Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs'\nimport React, { CSSProperties, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css } from 'styled-components'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation } from './types'\n\nexport type KnobCSSProps = Readonly<{\n  isAtBeginning: boolean\n  isAtEnd: boolean\n  isDragging?: boolean\n}>\n\nexport type GutterCSSProps = Readonly<{\n  orientation: Orientation\n}>\n\nexport type LabelCSSProps = Readonly<{\n  knobHeight: number\n}>\n\nexport type BreakpointDescriptor = {\n  label?: string\n  position?: number\n}\n\nexport type Props = {\n  /**\n   * ID attribute of the root element.\n   */\n  id?: string\n\n  /**\n   * Class attribute of the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute of the root element.\n   */\n  style?: CSSProperties\n\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   * 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   * Padding between the gutter and the knob in pixels.\n   */\n  gutterPadding?: 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   * The default position. This is ignored if `defaultIndex` and breakpoints are provided.\n   */\n  defaultPosition?: number\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   * Handler invoked when position changes.\n   */\n  onPositionChange?: (position: number) => void\n\n  /**\n   * Custom CSS provided to the gutter before the knob.\n   */\n  startingGutterCSS?: ExtendedCSSFunction<GutterCSSProps>\n\n  /**\n   * Custom CSS provided to the gutter after the knob.\n   */\n  endingGutterCSS?: ExtendedCSSFunction<GutterCSSProps>\n\n  /**\n   * Custom CSS provided to the knob.\n   */\n  knobCSS?: ExtendedCSSFunction<KnobCSSProps>\n\n  /**\n   * Custom CSS provided to the label inside the knob.\n   */\n  labelCSS?: ExtendedCSSFunction<LabelCSSProps>\n\n  // The following props are only used if `breakpoints` are provided.\n\n  /**\n   * An array of breakpoint descriptors. A breakpoint is a position (0 - 1 inclusive) on the gutter\n   * where the knob should snap to if dragging stops near it. You can associate a label with a\n   * breakpoint so it can be displayed in the knob. If breakpoints are to be specified, ensure that\n   * there are at least two: one for the start of the gutter and one for the end.\n   */\n  breakpoints?: readonly BreakpointDescriptor[]\n\n  /**\n   * Indicates whether the knob automatically snaps to the nearest breakpoint, if breakpoints are\n   * provided.\n   */\n  autoSnap?: boolean\n\n  /**\n   * Indicates if the breakpoint label is visible by the knob. Note that this is only applicable if\n   * breakpoints are provided.\n   */\n  isLabelVisible?: boolean\n\n  /**\n   * The default index. This is only used if breakpoints are provided. On the other hand, if\n   * breakpoints are provided, the default position will be calculated based on this value, making\n   * `defaultPosition` irrelevant.\n   */\n  defaultIndex?: number\n\n  /**\n   * Handler invoked when index changes. This happens simultaneously with `onPositionChange`. Note\n   * that this is only invoked if breakpoints are provided, because otherwise there will be no\n   * indexes.\n   */\n  onIndexChange?: (index: number) => void\n}\n\n/**\n * Generates a set of breakpoints compatible with this component.\n *\n * @param length - The number of breakpoints. This must be at least 2 because you must include the\n *                 starting and ending points.\n * @param labelIterator - Iterator function used for generating the label for each breakpoint.\n *\n * @returns An array of breakpoints.\n */\nexport function sliderBreakpointsFactory(length: number, labelIterator?: (index: number, position: number) => string): readonly BreakpointDescriptor[] {\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 pos = interval * i\n\n    return {\n      label: labelIterator?.(i, pos) ?? undefined,\n      position: pos,\n    }\n  })\n}\n\n/**\n * A slider component that divides the scroll gutter into two different elements—one that is before\n * the knob and one that is after the knob. This allows for individual styling customizations. The\n * width and height of the root element of this component is taken from the aggregated rect of both\n * gutter parts. The dimension of the knob itself does not impact that of the root element. In\n * addition to the tranditional behavior of a scrollbar, this component allows you to provide\n * breakpoints along the gutter so the knob can automatically snap to them (if feature is enabled)\n * when dragging ends near the breakpoint positions. You can also supply a label to each breakpoint\n * and have it display on the knob when the current position is close to the breakpoint. This\n * component supports both horizontal and vertical orientations.\n */\nexport default function Slider({\n  id,\n  className,\n  style = {},\n  isInverted = false,\n  onlyDispatchesOnDragEnd = false,\n  gutterPadding = 0,\n  knobHeight = 30,\n  knobWidth = 30,\n  orientation = 'vertical',\n  defaultPosition = 0,\n  onDragEnd,\n  onDragStart,\n  onPositionChange,\n  startingGutterCSS = props => css``,\n  endingGutterCSS = props => css``,\n  knobCSS = props => css``,\n  labelCSS = props => css``,\n  breakpoints = sliderBreakpointsFactory(10, (index: number, position: number) => `${index}`),\n  autoSnap = true,\n  isLabelVisible = true,\n  defaultIndex,\n  onIndexChange,\n}: Props) {\n  /**\n   * Updates the calculated rect of this slider. If the root element is not rendered yet, the\n   * calculated rect will be zero.\n   */\n  function updateRect() {\n    setRect(Rect.from(rootRef.current) ?? new Rect())\n  }\n\n  /**\n   * Updates the current knob position of the slider.\n   */\n  function updateKnobPosition() {\n    const naturalPosition = getPosition(true)\n\n    if (orientation === 'vertical') {\n      setKnobPosition(naturalPosition * rect.height)\n    }\n    else {\n      setKnobPosition(naturalPosition * rect.width)\n    }\n  }\n\n  /**\n   * Gets the current position. If `natural` is `true`, the uninverted (if `isInverted` is set to\n   * `true`) position will be returned.\n   *\n   * @param natural - Specifies if the natural position should be returned in case `isInverted` is\n   *                  specified.\n   *\n   * @returns The current position.\n   */\n  function getPosition(natural = false): number {\n    if (natural) {\n      return isInverted ? (1 - position.current) : position.current\n    }\n    else {\n      return position.current\n    }\n  }\n\n  /**\n   * Sets the current position. The position should be normalized. That is, inversion should be\n   * taken care of prior to passing the new value to this method if `isInverted` is `true`.\n   *\n   * @param value - The value to set the position to.\n   */\n  function setPosition(value: number) {\n    position.current = value\n    updateKnobPosition()\n\n    if (onlyDispatchesOnDragEnd && isDragging) return\n\n    onPositionChange?.(position.current)\n\n    if (breakpoints) onIndexChange?.(getClosestIndex())\n  }\n\n  /**\n   * Length of the gutter before the knob in pixels. If the orientation of the slider is horizontal,\n   * this refers to the width, else this refers to the height.\n   *\n   * @returns The gutter length.\n   */\n  function getStartingGutterLength(): number {\n    const naturalPosition = getPosition(true)\n    const knobLength = orientation === 'vertical' ? knobHeight : knobWidth\n    const sliderLength = orientation === 'vertical' ? rect.height : rect.width\n    return Math.max(0, naturalPosition * sliderLength - (knobLength / 2) - gutterPadding)\n  }\n\n  /**\n   * Length of the gutter after the knob in pixels. If the orientation of the slider is horizontal,\n   * this refers to the width, else this refers to the height.\n   *\n   * @returns The gutter length.\n   */\n  function getEndingGutterLength(): number {\n    const naturalPosition = getPosition(true)\n    const knobLength = orientation === 'vertical' ? knobHeight : knobWidth\n    const sliderLength = orientation === 'vertical' ? rect.height : rect.width\n    return Math.max(0, (1 - naturalPosition) * sliderLength - (knobLength / 2) - gutterPadding)\n  }\n\n  /**\n   * Gets the index of the breakpoint of which the current position is closest to. If for whatever\n   * reason the index cannot be computed (i.e. no breakpoints were provided), -1 is returned.\n   *\n   * @returns The closest index.\n   */\n  function getClosestIndex(): number {\n    if (!breakpoints) return -1\n\n    let idx = 0\n    let delta = NaN\n\n    for (let i = 0, n = breakpoints.length; i < n; i++) {\n      const breakpoint = getPositionByIndex(i)\n      const d = Math.abs(getPosition() - breakpoint)\n\n      if (isNaN(delta) || (d < delta)) {\n        delta = d\n        idx = i\n      }\n    }\n\n    return idx\n  }\n\n  /**\n   * Gets the position by breakpoint index. This value ranges between 0 - 1, inclusive.\n   *\n   * @param index - The breakpoint index.\n   *\n   * @returns The position. If for whatever reason the position cannot be determined, NaN is\n   *          returned.\n   */\n  function getPositionByIndex(index: number): number {\n    if (!breakpoints) return NaN\n    return breakpoints[index].position ?? (index / (breakpoints.length - 1))\n  }\n\n  /**\n   * Initializes input interactivity of the knob.\n   */\n  function initInteractivity() {\n    const knob = knobRef.current\n    if (!knob || interact.isSet(knob)) return\n\n    interact(knob).draggable({\n      inertia: true,\n      onstart: () => onKnobDragStart(),\n      onmove: ({ dx, dy }) => onKnobDragMove(orientation === 'vertical' ? dy : dx),\n      onend: () => onKnobDragStop(),\n    })\n  }\n\n  /**\n   * Deinitializes input interactivity of the knob.\n   */\n  function deinitInteractivity() {\n    const knob = knobRef.current\n    if (!knob) return\n\n    interact(knob).unset()\n  }\n\n  /**\n   * Handler invoked when the knob starts dragging.\n   */\n  function onKnobDragStart() {\n    setIsDragging(true)\n\n    onDragStart?.()\n  }\n\n  /**\n   * Handler invoked when the knob moves.\n   *\n   * @param delta - The distance traveled (in pixels) since the last invocation of this handler.\n   */\n  function onKnobDragMove(delta: number) {\n    const naturalPosition = getPosition(true)\n    const naturalNewPositionX = naturalPosition * rect.width + delta\n    const naturalNewPositionY = naturalPosition * rect.height + delta\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\n    setIsDragging(true)\n\n    setPosition(newPosition)\n  }\n\n  /**\n   * Handler invoked when the knob stops dragging.\n   */\n  function onKnobDragStop() {\n    setIsDragging(false)\n    snapToClosestBreakpointIfNeeded()\n\n    onDragEnd?.()\n  }\n\n  /**\n   * Snaps the knob to the closest breakpoint. Note that if there are no breakpoints or\n   * auto-snapping feature is disabled, this method does nothing.\n   */\n  function snapToClosestBreakpointIfNeeded() {\n    if (!autoSnap || !breakpoints) return\n    const position = getPositionByIndex(getClosestIndex())\n    setPosition(position)\n  }\n\n  const rootRef = useRef(null)\n  const knobRef = useRef(null)\n  const position = useRef(((breakpoints !== undefined) && (defaultIndex !== undefined)) ? getPositionByIndex(defaultIndex) : defaultPosition)\n\n  const [rect, setRect] = useState(new Rect())\n  const [isDragging, setIsDragging] = useState<boolean | undefined>(undefined)\n  const [knobPosition, setKnobPosition] = useState(NaN)\n\n  useEffect(() => {\n    updateRect()\n  }, [orientation, rootRef])\n\n  useEffect(() => {\n    initInteractivity()\n    updateKnobPosition()\n\n    return () => {\n      deinitInteractivity()\n    }\n  }, [rect])\n\n  useEffect(() => {\n    snapToClosestBreakpointIfNeeded()\n  }, [autoSnap])\n\n  return (\n    <StyledRoot ref={rootRef} id={id} className={className} orientation={orientation} style={style}>\n      <StyledGutter orientation={orientation} extendedCSS={startingGutterCSS} style={orientation === 'vertical' ? {\n        top: 0,\n        height: `${getStartingGutterLength()}px`,\n      } : {\n        left: 0,\n        width: `${getStartingGutterLength()}px`,\n      }}\n      />\n      <StyledKnob\n        ref={knobRef}\n        isAtEnd={isInverted ? (position.current === 0) : (position.current === 1)}\n        isAtBeginning={isInverted ? (position.current === 1) : (position.current === 0)}\n        isDragging={isDragging}\n        extendedCSS={knobCSS}\n        style={{\n          height: `${knobHeight}px`,\n          position: 'absolute',\n          width: `${knobWidth}px`,\n          zIndex: 1,\n          ...(orientation === 'vertical' ? {\n            margin: `${-knobHeight / 2 + knobPosition}px 0 0 ${(rect.width - knobWidth) / 2}px`,\n          } : {\n            margin: `${(rect.height - knobHeight) / 2}px 0 0 ${-knobWidth / 2 + knobPosition}px`,\n          }),\n        }}\n      >\n        {breakpoints && isLabelVisible && (\n          <StyledLabel knobHeight={knobHeight} extendedCSS={labelCSS}>{breakpoints[getClosestIndex()].label ?? ''}</StyledLabel>\n        )}\n      </StyledKnob>\n      <StyledGutter orientation={orientation} extendedCSS={endingGutterCSS} style={orientation === 'vertical' ? {\n        bottom: 0,\n        height: `${getEndingGutterLength()}px`,\n      } : {\n        right: 0,\n        width: `${getEndingGutterLength()}px`,\n      }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledGutter = styled.div<GutterCSSProps & ExtendedCSSProps<GutterCSSProps>>`\n  background: #fff;\n  position: absolute;\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  ${props => props.extendedCSS(props)}\n`\n\nconst StyledLabel = styled.label<LabelCSSProps & ExtendedCSSProps<LabelCSSProps>>`\n  color: #000;\n  font-size: ${props => props.knobHeight * .5}px;\n  pointer-events: none;\n  user-select: none;\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledKnob = styled.div<KnobCSSProps & ExtendedCSSProps<KnobCSSProps>>`\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: ${props => props.isDragging ? .6 : 1};\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: ${props => props.isDragging === false ? 'background, color, opacity, margin, transform' : 'background, color, transform, opacity'};\n  transition-timing-function: ease-out;\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledRoot = styled.div<{\n  orientation: 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":"Slider.js","sourceRoot":"/","sources":["Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport interact from 'interactjs'\nimport React, { CSSProperties, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport { Orientation } from './types'\n\nexport type GutterCSSProps = Readonly<{\n  orientation: Orientation\n}>\n\nexport type LabelCSSProps = Readonly<{\n  knobHeight: number\n}>\n\nexport type Props = {\n  /**\n   * ID attribute of the root element.\n   */\n  id?: string\n\n  /**\n   * Class attribute of the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute of the root element.\n   */\n  style?: CSSProperties\n\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   * 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   * Indicates if the label is visible by the knob. Note that this is only applicable if\n   * `labelProvider` is set.\n   */\n  isLabelVisible?: boolean\n\n  /**\n   * A function that returns the label to be displayed (if `isLabelVisible` is `true`) at a given\n   * slider position and cloest breakpoint index (if breakpoints are provided).\n   *\n   * @param position - The current slider position.\n   * @praam index - The nearest breakpoint index (if breakpoints are provided), or -1 if no\n   *                breakpoints are provided.\n   *\n   * @returns The label.\n   */\n  labelProvider?: (position: number, index: number) => string\n\n  /**\n   * Padding between the gutter and the knob in pixels.\n   */\n  gutterPadding?: 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   * The current position. This is ignored if `index` and `breakpoints` are provided.\n   */\n  position?: number\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   * Handler invoked when position changes.\n   *\n   * @param position - The current slider position.\n   */\n  onPositionChange?: (position: number) => void\n\n  /**\n   * Custom CSS provided to the gutter before the knob.\n   */\n  startingGutterCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the gutter after the knob.\n   */\n  endingGutterCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the knob.\n   */\n  knobCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the label inside the knob.\n   */\n  labelCSS?: CSSProp<any>\n\n  // The following props are only used if `breakpoints` are provided.\n\n  /**\n   * An array of breakpoint descriptors. A breakpoint is a position (0 - 1 inclusive) on the gutter\n   * where the knob should snap to if dragging stops near it. If breakpoints are to be specified,\n   * ensure that there are at least two: one for the start of the gutter and one for the end.\n   */\n  breakpoints?: readonly number[]\n\n  /**\n   * Indicates whether the knob automatically snaps to the nearest breakpoint, if breakpoints are\n   * provided.\n   */\n  autoSnap?: boolean\n\n  /**\n   * The current index. This is only used if breakpoints are provided. On the other hand, if\n   * breakpoints are provided, the current position will be calculated based on this value, making\n   * `position` irrelevant.\n   */\n  index?: number\n\n  /**\n   * Handler invoked when index changes. This happens simultaneously with `onPositionChange`. Note\n   * that this is only invoked if breakpoints are provided, because otherwise there will be no\n   * indexes.\n   *\n   * @param index - The current breakpoint index.\n   */\n  onIndexChange?: (index: number) => void\n}\n\n/**\n * Generates a set of breakpoints compatible with this component.\n *\n * @param length - The number of breakpoints. This must be at least 2 because you must include the\n *                 starting and ending points.\n *\n * @returns An array of breakpoints.\n */\nexport function generateBreakpoints(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 pos = interval * i\n    return pos\n  })\n}\n\n/**\n * A slider component that divides the scroll gutter into two different elements—one that is before\n * the knob and one that is after the knob. This allows for individual styling customizations. The\n * width and height of the root element of this component is taken from the aggregated rect of both\n * gutter parts. The dimension of the knob itself does not impact that of the root element. In\n * addition to the tranditional behavior of a scrollbar, this component allows you to provide\n * breakpoints along the gutter so the knob can automatically snap to them (if feature is enabled)\n * when dragging ends near the breakpoint positions. You can also supply a label to each breakpoint\n * and have it display on the knob when the current position is close to the breakpoint. This\n * component supports both horizontal and vertical orientations.\n */\nexport default function Slider({\n  id,\n  className,\n  style,\n  isInverted = false,\n  onlyDispatchesOnDragEnd = false,\n  gutterPadding = 0,\n  knobHeight = 30,\n  knobWidth = 30,\n  orientation = 'vertical',\n  position = 0,\n  isLabelVisible = true,\n  labelProvider,\n  onDragEnd,\n  onDragStart,\n  onPositionChange,\n  startingGutterCSS,\n  endingGutterCSS,\n  knobCSS,\n  labelCSS,\n  breakpoints,\n  autoSnap = true,\n  index,\n  onIndexChange,\n}: Props) {\n  /**\n   * Gets the index of the breakpoint of which the current position is closest to. If for whatever\n   * reason the index cannot be computed (i.e. no breakpoints were provided), -1 is returned.\n   *\n   * @returns The closest index.\n   */\n  function getClosestIndex(): number {\n    if (!breakpoints) return -1\n\n    let index = 0\n    let minDelta = NaN\n\n    for (let i = 0, n = breakpoints.length; i < n; i++) {\n      const breakpoint = getPositionByIndex(i)\n      const delta = Math.abs(livePosition.current - breakpoint)\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 breakpoint index. This value ranges between 0 - 1, inclusive.\n   *\n   * @param index - The breakpoint index.\n   *\n   * @returns The position. If for whatever reason the position cannot be determined, NaN is\n   *          returned.\n   */\n  function getPositionByIndex(index: number): number {\n    if (!breakpoints) return NaN\n    return breakpoints[index]\n  }\n\n  /**\n   * Sets the current live position. The live position is different from the position state value.\n   * Because states are asynchronous by nature, this live position value is used to record position\n   * changes when drag event happens. This position should be normalized. That is, inversion should\n   * be taken care of prior to passing the new value to this method if `isInverted` is `true`.\n   *\n   * @param value - The value to set the position to.\n   */\n  function setLivePosition(value: number) {\n    livePosition.current = value\n    _setPosition(value)\n    if (breakpoints) _setIndex(getClosestIndex())\n  }\n\n  /**\n   * Initializes input interactivity of the knob.\n   */\n  function initInteractivity() {\n    const knob = knobRef.current\n    if (!knob || interact.isSet(knob)) return\n\n    interact(knob).draggable({\n      inertia: true,\n      onstart: () => onKnobDragStart(),\n      onmove: ({ dx, dy }) => onKnobDragMove(orientation === 'vertical' ? dy : dx),\n      onend: () => onKnobDragStop(),\n    })\n  }\n\n  /**\n   * Deinitializes input interactivity of the knob.\n   */\n  function deinitInteractivity() {\n    const knob = knobRef.current\n    if (!knob) return\n\n    interact(knob).unset()\n  }\n\n  /**\n   * Handler invoked when the knob starts dragging.\n   */\n  function onKnobDragStart() {\n    setIsDragging(true)\n\n    onDragStart?.()\n  }\n\n  /**\n   * Handler invoked when the knob moves.\n   *\n   * @param delta - The distance traveled (in pixels) since the last invocation of this handler.\n   */\n  function onKnobDragMove(delta: number) {\n    const rect = Rect.from(rootRef.current) ?? new Rect()\n    const naturalPosition = isInverted ? 1 - livePosition.current : livePosition.current\n    const naturalNewPositionX = naturalPosition * rect.width + delta\n    const naturalNewPositionY = naturalPosition * rect.height + delta\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\n    setIsDragging(true)\n    setLivePosition(newPosition)\n  }\n\n  /**\n   * Handler invoked when the knob stops dragging.\n   */\n  function onKnobDragStop() {\n    setIsDragging(false)\n    snapToClosestBreakpointIfNeeded()\n\n    onDragEnd?.()\n  }\n\n  /**\n   * Snaps the knob to the closest breakpoint. Note that if there are no breakpoints or\n   * auto-snapping feature is disabled, this method does nothing.\n   */\n  function snapToClosestBreakpointIfNeeded() {\n    if (!autoSnap || !breakpoints) return\n    const position = getPositionByIndex(getClosestIndex())\n    setLivePosition(position)\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n  const knobRef = useRef<HTMLButtonElement>(null)\n\n  const livePosition = useRef((breakpoints !== undefined && index !== undefined) ? getPositionByIndex(index) : position)\n\n  const [_position, _setPosition] = useState(livePosition.current)\n  const [_index, _setIndex] = useState(getClosestIndex())\n  const [isDragging, setIsDragging] = useState<boolean | undefined>(undefined)\n\n  const naturalPosition = isInverted ? 1 - _position : _position\n\n  useEffect(() => {\n    initInteractivity()\n\n    return () => {\n      deinitInteractivity()\n    }\n  }, [])\n\n  useEffect(() => {\n    if (breakpoints && index !== undefined) return\n    if (position === livePosition.current) return\n\n    setIsDragging(undefined)\n    setLivePosition(position)\n  }, [position])\n\n  useEffect(() => {\n    if (!breakpoints || index === undefined) return\n\n    const position = getPositionByIndex(index)\n\n    if (position === livePosition.current) return\n\n    setIsDragging(undefined)\n    setLivePosition(position)\n  }, [index])\n\n  useEffect(() => {\n    if (onlyDispatchesOnDragEnd && isDragging) return\n    onPositionChange?.(_position)\n  }, [_position])\n\n  useEffect(() => {\n    if (onlyDispatchesOnDragEnd && isDragging) return\n    onIndexChange?.(_index)\n  }, [_index])\n\n  useEffect(() => {\n    snapToClosestBreakpointIfNeeded()\n  }, [autoSnap])\n\n  return (\n    <StyledRoot ref={rootRef} id={id} className={className} orientation={orientation} style={style}>\n      <StyledGutter orientation={orientation} css={startingGutterCSS}\n        style={orientation === 'vertical' ? {\n          top: 0,\n          height: `calc(${naturalPosition*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n        } : {\n          left: 0,\n          width: `calc(${naturalPosition*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n        }}\n      />\n      <StyledKnobContainer ref={knobRef} style={{\n        transform: 'translate3d(-50%, -50%, 0)',\n        ...(orientation === 'vertical' ? {\n          left: '50%',\n          top: `${_position*100}%`,\n          transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n        } : {\n          left: `${_position*100}%`,\n          top: '50%',\n          transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n        }),\n      }}>\n        <StyledKnob\n          className={classNames({\n            'at-end': isInverted ? (_position === 0) : (_position === 1),\n            'at-start': isInverted ? (_position === 1) : (_position === 0),\n            'dragging': isDragging === true,\n            'idle': isDragging === false,\n          })}\n          css={knobCSS}\n          style={{\n            height: `${knobHeight}px`,\n            width: `${knobWidth}px`,\n          }}\n        >\n          {breakpoints && isLabelVisible && labelProvider && (\n            <StyledLabel knobHeight={knobHeight} css={labelCSS}>{labelProvider(_position, getClosestIndex())}</StyledLabel>\n          )}\n        </StyledKnob>\n      </StyledKnobContainer>\n      <StyledGutter orientation={orientation} css={endingGutterCSS}\n        style={orientation === 'vertical' ? {\n          bottom: 0,\n          height: `calc(${(1 - naturalPosition)*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n        } : {\n          right: 0,\n          width: `calc(${(1 - naturalPosition)*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledGutter = styled.div<GutterCSSProps>`\n  background: #fff;\n  position: absolute;\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  ${props => props.css}\n`\n\nconst StyledLabel = styled.label<LabelCSSProps>`\n  color: #000;\n  font-size: ${props => props.knobHeight * .5}px;\n  pointer-events: none;\n  user-select: none;\n\n  ${props => props.css}\n`\n\nconst StyledKnobContainer = styled.button`\n  position: absolute;\n  z-index: 1;\n  transition-duration: 100ms;\n  transition-property: top;\n  transition-timing-function: ease-out;\n`\n\nconst StyledKnob = styled.div`\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  cursor: pointer;\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  &.idle {\n    opacity: 1;\n    transition-property: background, color, opacity, margin, transform;\n  }\n\n  &.dragging {\n    opacity: .6;\n    transition-property: background, color, transform, opacity;\n  }\n\n  ${props => props.css}\n`\n\nconst StyledRoot = styled.div<{\n  orientation: 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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "0.27.0",
+  "version": "0.31.0",
   "description": "A study of styled React components",
   "main": "lib",
   "scripts": {
@@ -8,7 +8,7 @@
     "prebuild": "npm run lint",
     "build": "npm run clean && tsc -p tsconfig.json",
     "pages": "rimraf .gh-pages && webpack --config demo/config/build.conf.ts",
-    "demo": "cross-env NODE_ENV=development webpack-cli serve --mode development --hot --config demo/config/build.conf.ts",
+    "demo": "npm run clean && concurrently \"npm run build -- --watch\" \"wait-on lib && cross-env NODE_ENV=development webpack-cli serve --mode development --hot --config demo/config/build.conf.ts\"",
     "test": "echo \"No tests yet :)\"",
     "lint": "eslint --ext .ts --ext .tsx src demo",
     "lint:fix": "npm run lint -- --fix"
@@ -48,6 +48,7 @@
     "@typescript-eslint/parser": "^5.4.0",
     "babel-loader": "^8.2.3",
     "babel-plugin-styled-components": "^2.0.1",
+    "concurrently": "^6.4.0",
     "cross-env": "^7.0.3",
     "debug": "^4.3.2",
     "dirty-dom": "^7.0.0",
@@ -67,6 +68,7 @@
     "ts-node": "^10.4.0",
     "typescript": "^4.5.2",
     "url-loader": "^4.1.1",
+    "wait-on": "^6.0.0",
     "webpack": "^5.64.3",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.5.0"
@@ -79,5 +81,8 @@
     "dirty-dom": "^7.0.0",
     "interactjs": "1.10.11",
     "spase": "^6.2.0"
+  },
+  "dependencies": {
+    "classnames": "^2.3.1"
   }
 }