etudes 1.2.0 → 2.0.0

package/lib/Slider.d.ts

@@ -1,9 +1,10 @@
-import { HTMLAttributes } from 'react';
-export declare type Props = HTMLAttributes<HTMLDivElement> & {
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+declare type Orientation = 'horizontal' | 'vertical';
+export declare type SliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
-     * By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the
-     * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1
-     * being the start.
+     * By default the position is a value from 0 - 1, 0 being the start of the
+     * slider and 1 being the end. Switching on this flag inverts this behavior,
+     * where 0 becomes the end of the slider and 1 being the start.
      */
     isInverted?: boolean;
     /**
@@ -11,18 +12,10 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
      */
     isTrackInteractive?: boolean;
     /**
-     * Indicates if position change events are dispatched only when dragging ends. When disabled,
-     * aforementioned events are fired repeatedly while dragging.
+     * Indicates if position change events are dispatched only when dragging ends.
+     * When disabled, aforementioned events are fired repeatedly while dragging.
      */
     onlyDispatchesOnDragEnd?: boolean;
-    /**
-     * A function that returns the label to be displayed at a given slider position.
-     *
-     * @param position - The current slider position.
-     *
-     * @returns The label.
-     */
-    labelProvider?: (position: number) => string;
     /**
      * Padding between the track and the knob in pixels.
      */
@@ -38,15 +31,25 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
     /**
      * Orientation of the slider.
      */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: Orientation;
     /**
      * The current position.
      */
     position?: number;
     /**
-     * Handler invoked when position changes. This can either be invoked from the `position` prop
-     * being changed or from the slider being dragged. Note that if the event is emitted at the end of
-     * dragging due to `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
+     * A function that returns the label to be displayed at a given slider
+     * position.
+     *
+     * @param position - The current slider position.
+     *
+     * @returns The label.
+     */
+    labelProvider?: (position: number) => string;
+    /**
+     * Handler invoked when position changes. This can either be invoked from the
+     * `position` prop being changed or from the slider being dragged. Note that
+     * if the event is emitted at the end of dragging due to
+     * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
      * still `true`.
      *
      * @param position - The current slider position.
@@ -61,30 +64,89 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
      * Handler invoked when dragging begins.
      */
     onDragStart?: () => void;
-};
+}>;
 /**
- * A slider component supporting both horizontal and vertical orientations whose sliding position (a
- * decimal between 0.0 and 1.0, inclusive) 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`,
+ * A slider component supporting both horizontal and vertical orientations whose
+ * sliding position (a decimal between 0.0 and 1.0, inclusive) can be two-way
+ * binded. The component consists of three customizable elements: a draggable
+ * knob, a label on the knob, and a scroll track on either side of 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.
  *
  * @exports SliderKnob - The component for the knob.
- * @exports SliderKnobLabel - The component for the label on the knob.
- * @exports SliderStartingTrack - The component for the slide track before the knob.
- * @exports SliderEndingTrack - The component for the slide track after the knob.
+ * @exports SliderLabel - The component for the label on the knob.
+ * @exports SliderTrack - The component for the slide track on either side of
+ *                        the knob.
  */
-export default function Slider({ isInverted, isTrackInteractive, onlyDispatchesOnDragEnd, trackPadding, knobHeight, knobWidth, orientation, position: externalPosition, labelProvider, onDragEnd, onDragStart, onPositionChange, ...props }: Props): JSX.Element;
-export declare const SliderStartingTrack: import("styled-components").StyledComponent<"div", any, {
-    orientation: NonNullable<Props['orientation']>;
-    isClickable: boolean;
-}, never>;
-export declare const SliderEndingTrack: import("styled-components").StyledComponent<"div", any, {
-    orientation: NonNullable<Props['orientation']>;
-    isClickable: boolean;
-}, never>;
-export declare const SliderKnob: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SliderKnobLabel: import("styled-components").StyledComponent<"label", any, {
-    knobHeight: NonNullable<Props['knobHeight']>;
-}, never>;
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * By default the position is a value from 0 - 1, 0 being the start of the
+     * slider and 1 being the end. Switching on this flag inverts this behavior,
+     * where 0 becomes the end of the slider and 1 being the start.
+     */
+    isInverted?: boolean | undefined;
+    /**
+     * Specifies if the track is clickable to set the position of the knob.
+     */
+    isTrackInteractive?: boolean | undefined;
+    /**
+     * Indicates if position change events are dispatched only when dragging ends.
+     * When disabled, aforementioned events are fired repeatedly while dragging.
+     */
+    onlyDispatchesOnDragEnd?: boolean | undefined;
+    /**
+     * Padding between the track and the knob in pixels.
+     */
+    trackPadding?: number | undefined;
+    /**
+     * Height of the knob in pixels.
+     */
+    knobHeight?: number | undefined;
+    /**
+     * Width of the knob in pixels.
+     */
+    knobWidth?: number | undefined;
+    /**
+     * Orientation of the slider.
+     */
+    orientation?: Orientation | undefined;
+    /**
+     * The current position.
+     */
+    position?: number | undefined;
+    /**
+     * A function that returns the label to be displayed at a given slider
+     * position.
+     *
+     * @param position - The current slider position.
+     *
+     * @returns The label.
+     */
+    labelProvider?: ((position: number) => string) | undefined;
+    /**
+     * Handler invoked when position changes. This can either be invoked from the
+     * `position` prop being changed or from the slider being dragged. Note that
+     * if the event is emitted at the end of dragging due to
+     * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
+     * still `true`.
+     *
+     * @param position - The current slider position.
+     * @param isDragging - Specifies if the position change is due to dragging.
+     */
+    onPositionChange?: ((position: number, isDragging: boolean) => void) | undefined;
+    /**
+     * Handler invoked when dragging ends.
+     */
+    onDragEnd?: (() => void) | undefined;
+    /**
+     * Handler invoked when dragging begins.
+     */
+    onDragStart?: (() => void) | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export declare const SliderTrack: ({ ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export declare const SliderKnob: ({ ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export declare const SliderLabel: ({ ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;

package/lib/Slider.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,73 +64,80 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SliderKnobLabel = exports.SliderKnob = exports.SliderEndingTrack = exports.SliderStartingTrack = void 0;
+exports.SliderLabel = exports.SliderKnob = exports.SliderTrack = 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:slider') : function () { };
+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"));
 /**
- * A slider component supporting both horizontal and vertical orientations whose sliding position (a
- * decimal between 0.0 and 1.0, inclusive) 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`,
+ * A slider component supporting both horizontal and vertical orientations whose
+ * sliding position (a decimal between 0.0 and 1.0, inclusive) can be two-way
+ * binded. The component consists of three customizable elements: a draggable
+ * knob, a label on the knob, and a scroll track on either side of 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.
  *
  * @exports SliderKnob - The component for the knob.
- * @exports SliderKnobLabel - The component for the label on the knob.
- * @exports SliderStartingTrack - The component for the slide track before the knob.
- * @exports SliderEndingTrack - The component for the slide track after the knob.
+ * @exports SliderLabel - The component for the label on the knob.
+ * @exports SliderTrack - The component for the slide track on either side of
+ *                        the knob.
  */
-function Slider(_a) {
-    var _b = _a.isInverted, isInverted = _b === void 0 ? false : _b, _c = _a.isTrackInteractive, isTrackInteractive = _c === void 0 ? true : _c, _d = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _d === void 0 ? false : _d, _e = _a.trackPadding, trackPadding = _e === void 0 ? 0 : _e, _f = _a.knobHeight, knobHeight = _f === void 0 ? 30 : _f, _g = _a.knobWidth, knobWidth = _g === void 0 ? 30 : _g, _h = _a.orientation, orientation = _h === void 0 ? 'vertical' : _h, _j = _a.position, externalPosition = _j === void 0 ? 0 : _j, labelProvider = _a.labelProvider, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onPositionChange = _a.onPositionChange, props = __rest(_a, ["isInverted", "isTrackInteractive", "onlyDispatchesOnDragEnd", "trackPadding", "knobHeight", "knobWidth", "orientation", "position", "labelProvider", "onDragEnd", "onDragStart", "onPositionChange"]);
-    var mapDragPositionToSliderPosition = 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.isInverted, isInverted = _f === void 0 ? false : _f, _g = _a.isTrackInteractive, isTrackInteractive = _g === void 0 ? true : _g, _h = _a.knobHeight, knobHeight = _h === void 0 ? 30 : _h, _j = _a.knobWidth, knobWidth = _j === void 0 ? 30 : _j, labelProvider = _a.labelProvider, _k = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _k === void 0 ? false : _k, _l = _a.orientation, orientation = _l === void 0 ? 'vertical' : _l, _m = _a.position, externalPosition = _m === void 0 ? 0 : _m, _o = _a.trackPadding, trackPadding = _o === void 0 ? 0 : _o, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onPositionChange = _a.onPositionChange, props = __rest(_a, ["children", "className", "isInverted", "isTrackInteractive", "knobHeight", "knobWidth", "labelProvider", "onlyDispatchesOnDragEnd", "orientation", "position", "trackPadding", "onDragEnd", "onDragStart", "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 _k = (0, useDragEffect_1.default)(knobRef, {
+    var bodyRef = (0, react_1.useRef)(null);
+    var knobContainerRef = (0, react_1.useRef)(null);
+    var _p = (0, useDragEffect_1.default)(knobContainerRef, {
         initialValue: externalPosition,
-        transform: mapDragPositionToSliderPosition,
+        transform: mapDragValueToPosition,
         onDragStart: onDragStart,
         onDragEnd: onDragEnd,
-    }), _l = __read(_k.isDragging, 1), isDragging = _l[0], _m = __read(_k.value, 2), position = _m[0], setPosition = _m[1];
-    // debug('Rendering...', 'OK')
-    // Natural position is the position after taking `isInverted` into account.
+    }), _q = __read(_p.isDragging, 1), isDragging = _q[0], _r = __read(_p.isReleasing, 1), isReleasing = _r[0], _s = __read(_p.value, 2), position = _s[0], setPosition = _s[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 || externalPosition === position)
             return;
-        debug('Updating drag effect value from position prop...', 'OK', "prop=".concat(externalPosition, ", effect=").concat(position));
         setPosition(externalPosition);
     }, [externalPosition]);
     (0, react_1.useEffect)(function () {
@@ -147,45 +150,142 @@ function Slider(_a) {
             return;
         onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(position, true);
     }, [isDragging]);
-    return (react_1.default.createElement(StyledRoot, __assign({}, props, { ref: rootRef, orientation: orientation }),
-        react_1.default.createElement(exports.SliderStartingTrack, { 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.SliderKnob, { className: (0, classnames_1.default)({
-                    'at-end': isInverted ? (position === 0) : (position === 1),
-                    'at-start': isInverted ? (position === 1) : (position === 0),
-                    'dragging': isDragging === true,
-                }), style: {
-                    height: "".concat(knobHeight, "px"),
-                    width: "".concat(knobWidth, "px"),
-                } }, labelProvider && (react_1.default.createElement(exports.SliderKnobLabel, { knobHeight: knobHeight }, labelProvider(position))))),
-        react_1.default.createElement(exports.SliderEndingTrack, { 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)"),
-            } })));
-}
-exports.default = Slider;
-exports.SliderStartingTrack = 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.SliderEndingTrack = 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.SliderKnob = 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  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  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n"])));
-exports.SliderKnobLabel = 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;
+    var components = (0, asComponentDict_1.default)(children, {
+        knob: exports.SliderKnob,
+        label: exports.SliderLabel,
+        track: exports.SliderTrack,
+    });
+    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.SliderTrack, { 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.SliderTrack, { 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.SliderKnob, { style: defaultStyles.knob }), {
+                className: (0, classnames_1.default)(fixedClassNames.knob),
+                style: (0, styles_1.default)(fixedStyles.knob),
+            }, labelProvider && (0, cloneStyledElement_1.default)((_e = components.label) !== null && _e !== void 0 ? _e : react_1.default.createElement(exports.SliderLabel, { style: defaultStyles.label }), {
+                className: (0, classnames_1.default)(fixedClassNames.label),
+                style: (0, styles_1.default)(fixedStyles.label),
+            }, labelProvider(position)))))));
+});
+var SliderTrack = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("div", __assign({}, props));
+};
+exports.SliderTrack = SliderTrack;
+var SliderKnob = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("div", __assign({}, props));
+};
+exports.SliderKnob = SliderKnob;
+var SliderLabel = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("div", __assign({}, props));
+};
+exports.SliderLabel = SliderLabel;
 //# 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 classNames from 'classnames'\nimport React, { HTMLAttributes, MouseEvent, useEffect, useRef } 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: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 change events are dispatched only when dragging ends. When disabled,\n   * 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.\n   *\n   * @param position - The current slider position.\n   *\n   * @returns The label.\n   */\n  labelProvider?: (position: 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   * The current position.\n   */\n  position?: number\n\n  /**\n   * Handler invoked when position changes. This can either be invoked from the `position` 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`.\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 slider component supporting both horizontal and vertical orientations whose sliding position (a\n * decimal between 0.0 and 1.0, inclusive) can be two-way binded. The component consists of four\n * customizable elements: a draggable knob, a label on the knob, a scroll track before the knob and\n * a scroll track after the 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 `knobHeight`,\n * respectively). The size of the knob does not impact the size of the slider.\n *\n * @exports SliderKnob - The component for the knob.\n * @exports SliderKnobLabel - The component for the label on the knob.\n * @exports SliderStartingTrack - The component for the slide track before the knob.\n * @exports SliderEndingTrack - The component for the slide track after the knob.\n */\nexport default function Slider({\n  isInverted = false,\n  isTrackInteractive = true,\n  onlyDispatchesOnDragEnd = false,\n  trackPadding = 0,\n  knobHeight = 30,\n  knobWidth = 30,\n  orientation = 'vertical',\n  position: externalPosition = 0,\n  labelProvider,\n  onDragEnd,\n  onDragStart,\n  onPositionChange,\n  ...props\n}: Props) {\n  const mapDragPositionToSliderPosition = (currentPosition: number, dx: number, dy: number): 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\n  const { isDragging: [isDragging], value: [position, setPosition] } = useDragEffect(knobRef, {\n    initialValue: externalPosition,\n    transform: mapDragPositionToSliderPosition,\n    onDragStart,\n    onDragEnd,\n  })\n\n  // debug('Rendering...', 'OK')\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 || externalPosition === position) return\n\n    debug('Updating drag effect value from position prop...', 'OK', `prop=${externalPosition}, effect=${position}`)\n\n    setPosition(externalPosition)\n  }, [externalPosition])\n\n  useEffect(() => {\n    if (isDragging && onlyDispatchesOnDragEnd) return\n    onPositionChange?.(position, isDragging)\n  }, [position])\n\n  useEffect(() => {\n    if (isDragging || !onlyDispatchesOnDragEnd) return\n    onPositionChange?.(position, true)\n  }, [isDragging])\n\n  return (\n    <StyledRoot {...props} ref={rootRef} orientation={orientation}>\n      <SliderStartingTrack 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        <SliderKnob\n          className={classNames({\n            'at-end': isInverted ? (position === 0) : (position === 1),\n            'at-start': isInverted ? (position === 1) : (position === 0),\n            'dragging': isDragging === true,\n          })}\n          style={{\n            height: `${knobHeight}px`,\n            width: `${knobWidth}px`,\n          }}\n        >\n          {labelProvider && (\n            <SliderKnobLabel knobHeight={knobHeight}>{labelProvider(position)}</SliderKnobLabel>\n          )}\n        </SliderKnob>\n      </StyledKnobContainer>\n      <SliderEndingTrack 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 SliderStartingTrack = 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 SliderEndingTrack = 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 SliderKnob = 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  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n`\n\nexport const SliderKnobLabel = 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":"Slider.js","sourceRoot":"/","sources":["Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, HTMLAttributes, MouseEvent, PropsWithChildren, useEffect, useRef } 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'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type SliderProps = 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 change events are dispatched only when dragging ends.\n   * When disabled, aforementioned events are fired repeatedly while 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   * The current position.\n   */\n  position?: number\n\n  /**\n   * A function that returns the label to be displayed at a given slider\n   * position.\n   *\n   * @param position - The current slider position.\n   *\n   * @returns The label.\n   */\n  labelProvider?: (position: number) => string\n\n  /**\n   * Handler invoked when position changes. This can either be invoked from the\n   * `position` prop being changed or from the slider being dragged. Note that\n   * if the event is emitted at the end of dragging due to\n   * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n   * still `true`.\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 slider component supporting both horizontal and vertical orientations whose\n * sliding position (a decimal between 0.0 and 1.0, inclusive) can be two-way\n * binded. The component consists of three customizable elements: a draggable\n * knob, a label on the knob, and a scroll track on either side of the knob.\n * While the width and height of the slider is inferred from its CSS rules, the\n * width and height of the knob are set via props (`knobWidth` and `knobHeight`,\n * respectively). The size of the knob does not impact the size of the slider.\n *\n * @exports SliderKnob - The component for the knob.\n * @exports SliderLabel - The component for the label on the knob.\n * @exports SliderTrack - The component for the slide track on either side of\n *                        the knob.\n */\nexport default forwardRef<HTMLDivElement, SliderProps>(({\n  children,\n  className,\n  isInverted = false,\n  isTrackInteractive = true,\n  knobHeight = 30,\n  knobWidth = 30,\n  labelProvider,\n  onlyDispatchesOnDragEnd = false,\n  orientation = 'vertical',\n  position: externalPosition = 0,\n  trackPadding = 0,\n  onDragEnd,\n  onDragStart,\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: break\n    }\n  }\n\n  const bodyRef = useRef<HTMLDivElement>(null)\n  const knobContainerRef = useRef<HTMLButtonElement>(null)\n\n  const { isDragging: [isDragging], isReleasing: [isReleasing], value: [position, setPosition] } = useDragEffect(knobContainerRef, {\n    initialValue: externalPosition,\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 || externalPosition === position) return\n    setPosition(externalPosition)\n  }, [externalPosition])\n\n  useEffect(() => {\n    if (isDragging && onlyDispatchesOnDragEnd) return\n    onPositionChange?.(position, isDragging)\n  }, [position])\n\n  useEffect(() => {\n    if (isDragging || !onlyDispatchesOnDragEnd) return\n    onPositionChange?.(position, true)\n  }, [isDragging])\n\n  const components = asComponentDict(children, {\n    knob: SliderKnob,\n    label: SliderLabel,\n    track: SliderTrack,\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 ?? <SliderTrack 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 ?? <SliderTrack 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 ?? <SliderKnob style={defaultStyles.knob}/>, {\n            className: classNames(fixedClassNames.knob),\n            style: styles(fixedStyles.knob),\n          }, labelProvider && cloneStyledElement(components.label ?? <SliderLabel style={defaultStyles.label}/>, {\n            className: classNames(fixedClassNames.label),\n            style: styles(fixedStyles.label),\n          }, labelProvider(position)))}\n        </button>\n      </div>\n    </div>\n  )\n})\n\nexport const SliderTrack = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const SliderKnob = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const SliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}