etudes 0.36.0 → 0.40.0

package/lib/Dial.d.ts

@@ -39,8 +39,5 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
 };
 /**
  * A circular dial with a knob and a track.
- *
- * @requires react
- * @requires styled-components
  */
 export default function Dial({ angle, radius, knobLength, knobThickness, knobCSS, trackThickness, trackCSS, style, ...props }: Props): JSX.Element;

package/lib/Dial.js

@@ -50,9 +50,6 @@ function arcPath(x, y, radius, startAngle, endAngle) {
 }
 /**
  * A circular dial with a knob and a track.
- *
- * @requires react
- * @requires styled-components
  */
 function Dial(_a) {
     var _b = _a.angle, angle = _b === void 0 ? 0 : _b, _c = _a.radius, radius = _c === void 0 ? 50 : _c, _d = _a.knobLength, knobLength = _d === void 0 ? 30 : _d, _e = _a.knobThickness, knobThickness = _e === void 0 ? 10 : _e, knobCSS = _a.knobCSS, _f = _a.trackThickness, trackThickness = _f === void 0 ? 2 : _f, trackCSS = _a.trackCSS, style = _a.style, props = __rest(_a, ["angle", "radius", "knobLength", "knobThickness", "knobCSS", "trackThickness", "trackCSS", "style"]);

package/lib/Dial.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dial.js","sourceRoot":"/","sources":["Dial.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react'\nimport styled, { CSSProp } from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Current angle reading of the compass, between 0.0 - 360.0 degrees, inclusive.\n   */\n  angle?: number\n\n  /**\n   * Length of the knob along the track expressed in degrees, between 0.0 and 360.0 degrees,\n   * exclusive. If set to 0 or 360, the knob disappears.\n   *\n   * @example Suppose the compass were to be used to control a photosphere of an image that is 1000\n   *          x 500, and the window size is 500 x 500, that would mean the FOV is 500 / 1000 * 360 =\n   *          180 degrees.\n   */\n  knobLength?: number\n\n  /**\n   * Radius of the compass.\n   */\n  radius?: number\n\n  /**\n   * The thickness of the knob, which is equivalent to the `stroke-width` of the `<path>` element.\n   * Note that this overwrites the `stroke-width` set inside `knobCSS`.\n   */\n  knobThickness?: number\n\n  /**\n   * CSS of the knob, which is a `<path>` element.\n   */\n  knobCSS?: CSSProp<any>\n\n  /**\n   * The thickness of the circular track, which is equivalent to the `stroke-width` of the\n   * `<circle>` element. Note that this overwrites the `stroke-width` set inside `trackCSS`.\n   */\n  trackThickness?: number\n\n  /**\n   * CSS of the track, which is a `<circle>` element.\n   */\n  trackCSS?: CSSProp<any>\n}\n\nfunction polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {\n  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0\n\n  return {\n    x: centerX + (radius * Math.cos(angleInRadians)),\n    y: centerY + (radius * Math.sin(angleInRadians)),\n  }\n}\n\nfunction arcPath(x: number, y: number, radius: number, startAngle: number, endAngle: number) {\n  const start = polarToCartesian(x, y, radius, endAngle)\n  const end = polarToCartesian(x, y, radius, startAngle)\n  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'\n  const d = [\n    'M', start.x, start.y,\n    'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y,\n  ]\n\n  return d.join(' ')\n}\n\n/**\n * A circular dial with a knob and a track.\n *\n * @requires react\n * @requires styled-components\n */\nexport default function Dial({\n  angle = 0,\n  radius = 50,\n  knobLength = 30,\n  knobThickness = 10,\n  knobCSS,\n  trackThickness = 2,\n  trackCSS,\n  style,\n  ...props\n}: Props) {\n  const diameter = radius * 2\n  const clampedKnobAngle = Math.max(0, Math.min(360, knobLength))\n\n  return (\n    <StyledRoot style={{ ...style, width: `${diameter}px`, height: `${diameter}px` }} {...props}>\n      <StyledTrack>\n        <svg width={diameter} height={diameter} viewBox={`0 0 ${diameter} ${diameter}`}>\n          <StyledTrackCircle\n            cx={radius}\n            cy={radius}\n            r={radius - trackThickness / 2}\n            css={trackCSS}\n            strokeWidth={trackThickness}\n          />\n        </svg>\n      </StyledTrack>\n      <StyledKnob style={{ transform: `rotate(${(angle + 360) % 360}deg)` }}>\n        <svg viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg'>\n          <StyledKnobPath css={knobCSS} strokeWidth={knobThickness} d={arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2)}/>\n        </svg>\n      </StyledKnob>\n    </StyledRoot>\n  )\n}\n\nconst StyledTrack = styled.div`\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n`\n\nconst StyledTrackCircle = styled.circle`\n  stroke-dasharray: 4;\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledKnob = styled.div`\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 100%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n\n  svg {\n    overflow: visible;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n`\n\nconst StyledKnobPath = styled.path`\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledRoot = styled.div`\n  box-sizing: border-box;\n  display: block;\n`\n"]}
+{"version":3,"file":"Dial.js","sourceRoot":"/","sources":["Dial.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react'\nimport styled, { CSSProp } from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Current angle reading of the compass, between 0.0 - 360.0 degrees, inclusive.\n   */\n  angle?: number\n\n  /**\n   * Length of the knob along the track expressed in degrees, between 0.0 and 360.0 degrees,\n   * exclusive. If set to 0 or 360, the knob disappears.\n   *\n   * @example Suppose the compass were to be used to control a photosphere of an image that is 1000\n   *          x 500, and the window size is 500 x 500, that would mean the FOV is 500 / 1000 * 360 =\n   *          180 degrees.\n   */\n  knobLength?: number\n\n  /**\n   * Radius of the compass.\n   */\n  radius?: number\n\n  /**\n   * The thickness of the knob, which is equivalent to the `stroke-width` of the `<path>` element.\n   * Note that this overwrites the `stroke-width` set inside `knobCSS`.\n   */\n  knobThickness?: number\n\n  /**\n   * CSS of the knob, which is a `<path>` element.\n   */\n  knobCSS?: CSSProp<any>\n\n  /**\n   * The thickness of the circular track, which is equivalent to the `stroke-width` of the\n   * `<circle>` element. Note that this overwrites the `stroke-width` set inside `trackCSS`.\n   */\n  trackThickness?: number\n\n  /**\n   * CSS of the track, which is a `<circle>` element.\n   */\n  trackCSS?: CSSProp<any>\n}\n\nfunction polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {\n  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0\n\n  return {\n    x: centerX + (radius * Math.cos(angleInRadians)),\n    y: centerY + (radius * Math.sin(angleInRadians)),\n  }\n}\n\nfunction arcPath(x: number, y: number, radius: number, startAngle: number, endAngle: number) {\n  const start = polarToCartesian(x, y, radius, endAngle)\n  const end = polarToCartesian(x, y, radius, startAngle)\n  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'\n  const d = [\n    'M', start.x, start.y,\n    'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y,\n  ]\n\n  return d.join(' ')\n}\n\n/**\n * A circular dial with a knob and a track.\n */\nexport default function Dial({\n  angle = 0,\n  radius = 50,\n  knobLength = 30,\n  knobThickness = 10,\n  knobCSS,\n  trackThickness = 2,\n  trackCSS,\n  style,\n  ...props\n}: Props) {\n  const diameter = radius * 2\n  const clampedKnobAngle = Math.max(0, Math.min(360, knobLength))\n\n  return (\n    <StyledRoot style={{ ...style, width: `${diameter}px`, height: `${diameter}px` }} {...props}>\n      <StyledTrack>\n        <svg width={diameter} height={diameter} viewBox={`0 0 ${diameter} ${diameter}`}>\n          <StyledTrackCircle\n            cx={radius}\n            cy={radius}\n            r={radius - trackThickness / 2}\n            css={trackCSS}\n            strokeWidth={trackThickness}\n          />\n        </svg>\n      </StyledTrack>\n      <StyledKnob style={{ transform: `rotate(${(angle + 360) % 360}deg)` }}>\n        <svg viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg'>\n          <StyledKnobPath css={knobCSS} strokeWidth={knobThickness} d={arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2)}/>\n        </svg>\n      </StyledKnob>\n    </StyledRoot>\n  )\n}\n\nconst StyledTrack = styled.div`\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n`\n\nconst StyledTrackCircle = styled.circle`\n  stroke-dasharray: 4;\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledKnob = styled.div`\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 100%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n\n  svg {\n    overflow: visible;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n`\n\nconst StyledKnobPath = styled.path`\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledRoot = styled.div`\n  box-sizing: border-box;\n  display: block;\n`\n"]}

package/lib/FlatSVG.d.ts

@@ -1,14 +1,42 @@
 import { HTMLAttributes } from 'react';
+import { CSSProp } from 'styled-components';
 export declare type Props = HTMLAttributes<HTMLDivElement> & {
-    isAnimated?: boolean;
-    fillColor?: string;
-    strokeColor?: string;
-    svgMarkup: string;
+    /**
+     * The SVG string markup, i.e. "<svg>...</svg>".
+     */
+    markup: string;
+    /**
+     * Specifies whether the 'class' should be removed in the SVG root node and all of its child
+     * nodes.
+     */
+    stripClasses?: boolean;
+    /**
+     * Specifies whether extraneous attributes should be removed from the SVG root node. The
+     * `whitelistedAttributes` prop defines what attributes should be kept.
+     */
+    stripExtraneousAttributes?: boolean;
+    /**
+     * Specifies whether the 'id' attribute should be removed in the SVG root node and all of its
+     * child nodes.
+     */
+    stripIds?: boolean;
+    /**
+     * Specifies whether the 'style' atribute and any <style> nodes should be removed in the SVG root
+     * node and all of its child nodes.
+     */
+    stripStyles?: boolean;
+    /**
+     * Extended CSS to be provided to the SVG root node.
+     */
+    svgCSS?: CSSProp<any>;
+    /**
+     * Specifies attribute names to exclude from being stripped if `stripExtraneousAttributes` is
+     * enabled. By default, only `viewBox` is whitelisted.
+     */
+    whitelistedAttributes?: string[];
 };
 /**
- * A component whose root element wraps an SVG markup.
- *
- * @requires react
- * @requires styled-component
+ * A component whose root element wraps an SVG markup. When wrapping the SVG, it will attempt to
+ * sanitize the markup (i.e. stripping useless attributes) according to the props specified.
  */
-export default function FlatSVG({ isAnimated, fillColor, strokeColor, svgMarkup, ...props }: Props): JSX.Element;
+export default function FlatSVG({ markup, stripClasses, stripExtraneousAttributes, stripIds, stripStyles, svgCSS, whitelistedAttributes, ...props }: Props): JSX.Element;

package/lib/FlatSVG.js

@@ -14,25 +14,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -44,23 +25,97 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function removeStyles(element) {
+    element.removeAttribute('style');
+    var inlineStyles = element.getElementsByTagName('style');
+    var numInlineStyles = inlineStyles.length;
+    for (var i = 0; i < numInlineStyles; i++) {
+        var inlineStyle = inlineStyles[i];
+        inlineStyle.remove();
+    }
+    var numChildren = element.children.length;
+    for (var i = 0; i < numChildren; i++) {
+        removeStyles(element.children[i]);
+    }
+}
+function removeAttributes(element, attributes, recursive, whitelist) {
+    if (attributes === void 0) { attributes = undefined; }
+    if (recursive === void 0) { recursive = false; }
+    if (whitelist === void 0) { whitelist = []; }
+    var attrs = attributes !== null && attributes !== void 0 ? attributes : element.getAttributeNames();
+    var numAttrs = attrs.length;
+    for (var i = 0; i < numAttrs; i++) {
+        var attr = attrs[i];
+        var keep = whitelist.indexOf(attr) > -1;
+        if (!keep)
+            element.removeAttribute(attr);
+    }
+    if (recursive) {
+        var numChildren = element.children.length;
+        for (var i = 0; i < numChildren; i++) {
+            removeAttributes(element.children[i], attributes, recursive, whitelist);
+        }
+    }
+}
 /**
- * A component whose root element wraps an SVG markup.
- *
- * @requires react
- * @requires styled-component
+ * A component whose root element wraps an SVG markup. When wrapping the SVG, it will attempt to
+ * sanitize the markup (i.e. stripping useless attributes) according to the props specified.
  */
 function FlatSVG(_a) {
-    var _b = _a.isAnimated, isAnimated = _b === void 0 ? false : _b, fillColor = _a.fillColor, strokeColor = _a.strokeColor, svgMarkup = _a.svgMarkup, props = __rest(_a, ["isAnimated", "fillColor", "strokeColor", "svgMarkup"]);
-    return (react_1.default.createElement(StyledRoot, __assign({ dangerouslySetInnerHTML: { __html: svgMarkup }, isAnimated: isAnimated, fillColor: fillColor, strokeColor: strokeColor }, props)));
+    var markup = _a.markup, _b = _a.stripClasses, stripClasses = _b === void 0 ? true : _b, _c = _a.stripExtraneousAttributes, stripExtraneousAttributes = _c === void 0 ? true : _c, _d = _a.stripIds, stripIds = _d === void 0 ? true : _d, _e = _a.stripStyles, stripStyles = _e === void 0 ? true : _e, svgCSS = _a.svgCSS, _f = _a.whitelistedAttributes, whitelistedAttributes = _f === void 0 ? ['viewBox'] : _f, props = __rest(_a, ["markup", "stripClasses", "stripExtraneousAttributes", "stripIds", "stripStyles", "svgCSS", "whitelistedAttributes"]);
+    function sanitizedMarkup() {
+        var mockContainer = document.createElement('div');
+        mockContainer.innerHTML = markup;
+        var elements = mockContainer.getElementsByTagName('svg');
+        if (elements.length > 1)
+            throw new Error('More than one SVG element found in provided markup');
+        var svgElement = elements[0];
+        if (!svgElement)
+            throw new Error('No SVG in provided markup');
+        if (stripExtraneousAttributes)
+            removeAttributes(svgElement, undefined, false, __spreadArray(__spreadArray([], __read(whitelistedAttributes), false), ['style', 'class', 'id'], false));
+        if (stripIds)
+            removeAttributes(svgElement, ['id'], true);
+        if (stripClasses)
+            removeAttributes(svgElement, ['class'], true);
+        if (stripStyles)
+            removeStyles(svgElement);
+        return svgElement.outerHTML;
+    }
+    return (react_1.default.createElement(StyledRoot, __assign({ dangerouslySetInnerHTML: { __html: sanitizedMarkup() }, svgCSS: svgCSS }, props)));
 }
 exports.default = FlatSVG;
-var StyledRoot = styled_components_1.default.figure(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: 100%;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: 100%;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    ", "\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n\n      ", "\n\n      ", "\n    }\n  }\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: 100%;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: 100%;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    ", "\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n\n      ", "\n\n      ", "\n    }\n  }\n"])), function (props) { return props.isAnimated && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      transition-property: stroke, fill, transform;\n      transition-duration: 100ms;\n      transition-timing-function: ease-out;\n    "], ["\n      transition-property: stroke, fill, transform;\n      transition-duration: 100ms;\n      transition-timing-function: ease-out;\n    "]))); }, function (props) { return props.fillColor !== undefined && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        fill: ", " !important;\n      "], ["\n        fill: ", " !important;\n      "])), props.fillColor); }, function (props) { return props.strokeColor !== undefined && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        stroke: ", " !important;\n      "], ["\n        stroke: ", " !important;\n      "])), props.strokeColor); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var StyledRoot = styled_components_1.default.figure(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: auto;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: auto;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n    }\n\n    ", "\n  }\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: auto;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: auto;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n    }\n\n    ", "\n  }\n"])), function (props) { return props.svgCSS; });
+var templateObject_1;
 //# sourceMappingURL=FlatSVG.js.map

package/lib/FlatSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA6C;AAC7C,qEAA+C;AAS/C;;;;;GAKG;AACH,SAAwB,OAAO,CAAC,EAMxB;IALN,IAAA,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,SAAS,eAAA,EACN,KAAK,cALsB,uDAM/B,CADS;IAER,OAAO,CACL,8BAAC,UAAU,aACT,uBAAuB,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC9C,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,IACpB,KAAK,EACT,CACH,CAAA;AACH,CAAC;AAhBD,0BAgBC;AAED,IAAM,UAAU,GAAG,2BAAM,CAAC,MAAM,gmBAI9B,4UAgBI,EAID,+KAQG,EAED,YAEC,EAED,gBAGN,KArBK,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,UAAU,QAAI,uBAAG,iNAAA,6IAIjC,IAAA,EAJU,CAIV,EAQG,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,SAAS,KAAK,SAAS,QAAI,uBAAG,8GAAA,kBACrC,EAAe,sBACxB,KADS,KAAK,CAAC,SAAS,CACxB,EAFU,CAEV,EAEC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,SAAS,QAAI,uBAAG,gHAAA,oBACrC,EAAiB,sBAC5B,KADW,KAAK,CAAC,WAAW,CAC5B,EAFU,CAEV,CAGN,CAAA","sourcesContent":["import React, { HTMLAttributes } from 'react'\nimport styled, { css } from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  isAnimated?: boolean\n  fillColor?: string\n  strokeColor?: string\n  svgMarkup: string\n}\n\n/**\n * A component whose root element wraps an SVG markup.\n *\n * @requires react\n * @requires styled-component\n */\nexport default function FlatSVG({\n  isAnimated = false,\n  fillColor,\n  strokeColor,\n  svgMarkup,\n  ...props\n}: Props) {\n  return (\n    <StyledRoot\n      dangerouslySetInnerHTML={{ __html: svgMarkup }}\n      isAnimated={isAnimated}\n      fillColor={fillColor}\n      strokeColor={strokeColor}\n      {...props}\n    />\n  )\n}\n\nconst StyledRoot = styled.figure<{\n  fillColor?: string\n  strokeColor?: string\n  isAnimated: boolean\n}>`\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: 100%;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: 100%;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    ${props => props.isAnimated && css`\n      transition-property: stroke, fill, transform;\n      transition-duration: 100ms;\n      transition-timing-function: ease-out;\n    `}\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n\n      ${props => props.fillColor !== undefined && css`\n        fill: ${props.fillColor} !important;\n      `}\n\n      ${props => props.strokeColor !== undefined && css`\n        stroke: ${props.strokeColor} !important;\n      `}\n    }\n  }\n`\n"]}
+{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react'\nimport styled, { CSSProp } from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The SVG string markup, i.e. \"<svg>...</svg>\".\n   */\n  markup: string\n\n  /**\n   * Specifies whether the 'class' should be removed in the SVG root node and all of its child\n   * nodes.\n   */\n  stripClasses?: boolean\n\n  /**\n   * Specifies whether extraneous attributes should be removed from the SVG root node. The\n   * `whitelistedAttributes` prop defines what attributes should be kept.\n   */\n  stripExtraneousAttributes?: boolean\n\n  /**\n   * Specifies whether the 'id' attribute should be removed in the SVG root node and all of its\n   * child nodes.\n   */\n  stripIds?: boolean\n\n  /**\n   * Specifies whether the 'style' atribute and any <style> nodes should be removed in the SVG root\n   * node and all of its child nodes.\n   */\n  stripStyles?: boolean\n\n  /**\n   * Extended CSS to be provided to the SVG root node.\n   */\n  svgCSS?: CSSProp<any>\n\n  /**\n   * Specifies attribute names to exclude from being stripped if `stripExtraneousAttributes` is\n   * enabled. By default, only `viewBox` is whitelisted.\n   */\n  whitelistedAttributes?: string[]\n}\n\nfunction removeStyles(element: Element) {\n  element.removeAttribute('style')\n\n  const inlineStyles = element.getElementsByTagName('style')\n  const numInlineStyles = inlineStyles.length\n\n  for (let i = 0; i < numInlineStyles; i++) {\n    const inlineStyle = inlineStyles[i]\n    inlineStyle.remove()\n  }\n\n  const numChildren = element.children.length\n\n  for (let i = 0; i < numChildren; i++) {\n    removeStyles(element.children[i])\n  }\n}\n\nfunction removeAttributes(element: Element, attributes: string[] | undefined = undefined, recursive = false, whitelist: string[] = []) {\n  const attrs = attributes ?? element.getAttributeNames()\n  const numAttrs = attrs.length\n\n  for (let i = 0; i < numAttrs; i++) {\n    const attr = attrs[i]\n    const keep = whitelist.indexOf(attr) > -1\n    if (!keep) element.removeAttribute(attr)\n  }\n\n  if (recursive) {\n    const numChildren = element.children.length\n\n    for (let i = 0; i < numChildren; i++) {\n      removeAttributes(element.children[i], attributes, recursive, whitelist)\n    }\n  }\n}\n\n/**\n * A component whose root element wraps an SVG markup. When wrapping the SVG, it will attempt to\n * sanitize the markup (i.e. stripping useless attributes) according to the props specified.\n */\nexport default function FlatSVG({\n  markup,\n  stripClasses = true,\n  stripExtraneousAttributes = true,\n  stripIds = true,\n  stripStyles = true,\n  svgCSS,\n  whitelistedAttributes = ['viewBox'],\n  ...props\n}: Props) {\n  function sanitizedMarkup(): string {\n    const mockContainer = document.createElement('div')\n    mockContainer.innerHTML = markup\n\n    const elements = mockContainer.getElementsByTagName('svg')\n    if (elements.length > 1) throw new Error('More than one SVG element found in provided markup')\n\n    const svgElement = elements[0]\n    if (!svgElement) throw new Error('No SVG in provided markup')\n\n    if (stripExtraneousAttributes) removeAttributes(svgElement, undefined, false, [...whitelistedAttributes, 'style', 'class', 'id'])\n    if (stripIds) removeAttributes(svgElement, ['id'], true)\n    if (stripClasses) removeAttributes(svgElement, ['class'], true)\n    if (stripStyles) removeStyles(svgElement)\n\n    return svgElement.outerHTML\n  }\n\n  return (\n    <StyledRoot\n      dangerouslySetInnerHTML={{ __html: sanitizedMarkup() }}\n      svgCSS={svgCSS}\n      {...props}\n    />\n  )\n}\n\nconst StyledRoot = styled.figure<{ svgCSS: Props['svgCSS'] }>`\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: auto;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: auto;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n    }\n\n    ${props => props.svgCSS}\n  }\n`\n"]}

package/lib/Panorama.d.ts

@@ -22,15 +22,18 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
      */
     zeroAnchor?: number;
     /**
-     * Handler invoked when the changes. This can either be invoked from the `angle` prop being
-     * changed or from the image being dragged.
+     * Handler invoked when the positionchanges. This can either be invoked from the `angle` prop
+     * being changed or from the image being dragged.
      *
      * @param position - The current position.
      * @param isDragging - Specifies if the position change is due to dragging.
      */
     onPositionChange?: (position: number, isDragging: boolean) => void;
     /**
-     * Handler invoked when the angle changes.
+     * Handler invoked when the angle changes. This can either be invoked from the `angle` prop being
+     * changed or from the image being dragged. When `angle` is being double-binded, ensure that the
+     * value is only being set by this handler when `isDragging` is `true` to avoid potential update
+     * overflow.
      *
      * @param angle - The current angle.
      * @param isDragging - Specifies if the angle change is due to dragging.
@@ -75,10 +78,5 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
 };
 /**
  * A component containing a pannable 360° panorama image. The angle supports two-way binding.
- *
- * @requires react
- * @requires styled-component
- * @requires spase
- * @requires interactjs
  */
 export default function Panorama({ angle: externalAngle, speed, src, zeroAnchor, onAngleChange, onPositionChange, onDragStart, onDragEnd, onImageLoadStart, onImageLoadComplete, onImageLoadError, onImageSizeChange, onResize, ...props }: Props): JSX.Element;

package/lib/Panorama.js

@@ -97,11 +97,6 @@ function getAngleFromDisplacement(displacement, originalImageSize, componentSize
 }
 /**
  * A component containing a pannable 360° panorama image. The angle supports two-way binding.
- *
- * @requires react
- * @requires styled-component
- * @requires spase
- * @requires interactjs
  */
 function Panorama(_a) {
     var _b = _a.angle, externalAngle = _b === void 0 ? 0 : _b, _c = _a.speed, speed = _c === void 0 ? 1 : _c, src = _a.src, _d = _a.zeroAnchor, zeroAnchor = _d === void 0 ? 0 : _d, onAngleChange = _a.onAngleChange, onPositionChange = _a.onPositionChange, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, onImageLoadStart = _a.onImageLoadStart, onImageLoadComplete = _a.onImageLoadComplete, onImageLoadError = _a.onImageLoadError, onImageSizeChange = _a.onImageSizeChange, onResize = _a.onResize, props = __rest(_a, ["angle", "speed", "src", "zeroAnchor", "onAngleChange", "onPositionChange", "onDragStart", "onDragEnd", "onImageLoadStart", "onImageLoadComplete", "onImageLoadError", "onImageSizeChange", "onResize"]);
@@ -141,10 +136,12 @@ function Panorama(_a) {
         var newAngle = getAngleFromDisplacement(displacement, imageSize, size, zeroAnchor);
         if (angle !== newAngle) {
             setAngle(newAngle);
-            onAngleChange === null || onAngleChange === void 0 ? void 0 : onAngleChange(angle, isDragging);
-            onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(angle / 360, isDragging);
         }
     }, [displacement, imageSize, size, zeroAnchor]);
+    (0, react_1.useEffect)(function () {
+        onAngleChange === null || onAngleChange === void 0 ? void 0 : onAngleChange(angle, isDragging);
+        onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(angle / 360, isDragging);
+    }, [angle]);
     return (react_1.default.createElement(StyledRoot, __assign({ ref: rootRef }, props),
         react_1.default.createElement(StyledImageContainer, { style: {
                 backgroundImage: "url(".concat(src, ")"),

package/lib/Panorama.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panorama.js","sourceRoot":"/","sources":["Panorama.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport styled from 'styled-components'\nimport useDragEffect from './hooks/useDragEffect'\nimport useLoadImageEffect from './hooks/useLoadImageEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:panorama') : () => {}\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or 360, the left bound of\n   * the image is at the center of the component.\n   */\n  angle?: number\n\n  /**\n   * The panning speed. This is a multiplier to the number of pixels dragged, i.e. when set to 1,\n   * the image will shift the same amount of pixels that were dragged.\n   */\n  speed?: number\n\n  /**\n   * The source URL of the image.\n   */\n  src: string\n\n  /**\n   * A decimal percentage of the component width indicating where 0° should be, i.e. if `zeroAnchor`\n   * is `0`, the `angle` would be 0° when the left edge of the image is at the left edge of the\n   * component.\n   */\n  zeroAnchor?: number\n\n  /**\n   * Handler invoked when the changes. This can either be invoked from the `angle` prop being\n   * changed or from the image being dragged.\n   *\n   * @param position - The current 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 the angle changes.\n   *\n   * @param angle - The current angle.\n   * @param isDragging - Specifies if the angle change is due to dragging.\n   */\n  onAngleChange?: (angle: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when dragging starts.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when the image begins loading.\n   */\n  onImageLoadStart?: () => void\n\n  /**\n   * Handler invoked when the image is done loading.\n   *\n   * @param imageElement - The loaded image element.\n   */\n  onImageLoadComplete?: (imageElement: HTMLImageElement) => void\n\n  /**\n   * Handler invoked when there is an error loading the image.\n   */\n  onImageLoadError?: () => void\n\n  /**\n   * Handler invoked when the image size changes. This is the actual size of the loaded image. When\n   * no images are loaded yet, the size is `undefined`.\n   *\n   * @param size - The actual size of the loaded iamge. If no images are loaded yet, the size is\n   *               `undefined`.\n   */\n  onImageSizeChange?: (size?: Size) => void\n\n  /**\n   * Handler invoked when the size of this component changes.\n   *\n   * @param size - The size of this component.\n   */\n  onResize?: (size: Size) => void\n}\n\nfunction getFilledImageSize(originalSize: Size, sizeToFill: Size): Size {\n  const { width: originalWidth, height: originalHeight } = originalSize\n  const { height: filledHeignt } = sizeToFill\n\n  if (originalHeight <= 0) return new Size()\n\n  const aspectRatio = filledHeignt / originalHeight\n  const filledWidth = aspectRatio * originalWidth\n\n  return new Size([filledWidth, filledHeignt])\n}\n\nfunction getDisplacementFromAngle(angle: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth*zeroAnchor\n  return (angle / 360) * imageWidth - offset\n}\n\nfunction getAngleFromDisplacement(displacement: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth*zeroAnchor\n\n  let angle = ((displacement + offset) % imageWidth) / imageWidth*360\n  while (angle < 0) angle += 360\n  return angle\n}\n\n/**\n * A component containing a pannable 360° panorama image. The angle supports two-way binding.\n *\n * @requires react\n * @requires styled-component\n * @requires spase\n * @requires interactjs\n */\nexport default function Panorama({\n  angle: externalAngle = 0,\n  speed = 1,\n  src,\n  zeroAnchor = 0,\n  onAngleChange,\n  onPositionChange,\n  onDragStart,\n  onDragEnd,\n  onImageLoadStart,\n  onImageLoadComplete,\n  onImageLoadError,\n  onImageSizeChange,\n  onResize,\n  ...props\n}: Props) {\n  function transform(currentDisplacement: number, dx: number, dy: number): number {\n    const newDisplacement = currentDisplacement - (dx * speed)\n    return newDisplacement\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n\n  const [size] = useResizeEffect(rootRef, { onResize })\n  const [angle, setAngle] = useState(externalAngle)\n\n  const { isLoading: [isLoading], imageSize: [imageSize] } = useLoadImageEffect(src, {\n    onImageLoadComplete,\n    onImageLoadError,\n    onImageSizeChange,\n  })\n\n  const { isDragging: [isDragging], value: [displacement, setDisplacement] } = useDragEffect(rootRef, {\n    initialValue: 0,\n    transform,\n    onDragStart,\n    onDragEnd,\n  })\n\n  useEffect(() => {\n    if (isDragging || isLoading || !imageSize) return\n\n    const newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, size, zeroAnchor)\n\n    if (newDisplacement !== displacement) {\n      // debug('Updating drag effect value from angle prop...', 'OK', `old=${displacement} new=${newDisplacement}`)\n      setDisplacement(newDisplacement)\n    }\n\n    if (externalAngle !== angle) {\n      setAngle(externalAngle)\n    }\n  }, [externalAngle, isLoading, imageSize, size, zeroAnchor])\n\n  useEffect(() => {\n    if (!isDragging || !imageSize) return\n\n    const newAngle = getAngleFromDisplacement(displacement, imageSize, size, zeroAnchor)\n\n    if (angle !== newAngle) {\n      setAngle(newAngle)\n      onAngleChange?.(angle, isDragging)\n      onPositionChange?.(angle / 360, isDragging)\n    }\n  }, [displacement, imageSize, size, zeroAnchor])\n\n  return (\n    <StyledRoot ref={rootRef} {...props}>\n      <StyledImageContainer\n        style={{\n          backgroundImage: `url(${src})`,\n          backgroundPositionX: `${-displacement}px`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledImageContainer = styled.div`\n  background-repeat: repeat;\n  background-size: auto 100%;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n`\n\nconst StyledRoot = styled.div`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n\n  > div {\n    height: 100%;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n`\n"]}
+{"version":3,"file":"Panorama.js","sourceRoot":"/","sources":["Panorama.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport styled from 'styled-components'\nimport useDragEffect from './hooks/useDragEffect'\nimport useLoadImageEffect from './hooks/useLoadImageEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:panorama') : () => {}\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or 360, the left bound of\n   * the image is at the center of the component.\n   */\n  angle?: number\n\n  /**\n   * The panning speed. This is a multiplier to the number of pixels dragged, i.e. when set to 1,\n   * the image will shift the same amount of pixels that were dragged.\n   */\n  speed?: number\n\n  /**\n   * The source URL of the image.\n   */\n  src: string\n\n  /**\n   * A decimal percentage of the component width indicating where 0° should be, i.e. if `zeroAnchor`\n   * is `0`, the `angle` would be 0° when the left edge of the image is at the left edge of the\n   * component.\n   */\n  zeroAnchor?: number\n\n  /**\n   * Handler invoked when the positionchanges. This can either be invoked from the `angle` prop\n   * being changed or from the image being dragged.\n   *\n   * @param position - The current 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 the angle changes. This can either be invoked from the `angle` prop being\n   * changed or from the image being dragged. When `angle` is being double-binded, ensure that the\n   * value is only being set by this handler when `isDragging` is `true` to avoid potential update\n   * overflow.\n   *\n   * @param angle - The current angle.\n   * @param isDragging - Specifies if the angle change is due to dragging.\n   */\n  onAngleChange?: (angle: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when dragging starts.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when the image begins loading.\n   */\n  onImageLoadStart?: () => void\n\n  /**\n   * Handler invoked when the image is done loading.\n   *\n   * @param imageElement - The loaded image element.\n   */\n  onImageLoadComplete?: (imageElement: HTMLImageElement) => void\n\n  /**\n   * Handler invoked when there is an error loading the image.\n   */\n  onImageLoadError?: () => void\n\n  /**\n   * Handler invoked when the image size changes. This is the actual size of the loaded image. When\n   * no images are loaded yet, the size is `undefined`.\n   *\n   * @param size - The actual size of the loaded iamge. If no images are loaded yet, the size is\n   *               `undefined`.\n   */\n  onImageSizeChange?: (size?: Size) => void\n\n  /**\n   * Handler invoked when the size of this component changes.\n   *\n   * @param size - The size of this component.\n   */\n  onResize?: (size: Size) => void\n}\n\nfunction getFilledImageSize(originalSize: Size, sizeToFill: Size): Size {\n  const { width: originalWidth, height: originalHeight } = originalSize\n  const { height: filledHeignt } = sizeToFill\n\n  if (originalHeight <= 0) return new Size()\n\n  const aspectRatio = filledHeignt / originalHeight\n  const filledWidth = aspectRatio * originalWidth\n\n  return new Size([filledWidth, filledHeignt])\n}\n\nfunction getDisplacementFromAngle(angle: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth*zeroAnchor\n  return (angle / 360) * imageWidth - offset\n}\n\nfunction getAngleFromDisplacement(displacement: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth*zeroAnchor\n\n  let angle = ((displacement + offset) % imageWidth) / imageWidth*360\n  while (angle < 0) angle += 360\n  return angle\n}\n\n/**\n * A component containing a pannable 360° panorama image. The angle supports two-way binding.\n */\nexport default function Panorama({\n  angle: externalAngle = 0,\n  speed = 1,\n  src,\n  zeroAnchor = 0,\n  onAngleChange,\n  onPositionChange,\n  onDragStart,\n  onDragEnd,\n  onImageLoadStart,\n  onImageLoadComplete,\n  onImageLoadError,\n  onImageSizeChange,\n  onResize,\n  ...props\n}: Props) {\n  function transform(currentDisplacement: number, dx: number, dy: number): number {\n    const newDisplacement = currentDisplacement - (dx * speed)\n    return newDisplacement\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n\n  const [size] = useResizeEffect(rootRef, { onResize })\n  const [angle, setAngle] = useState(externalAngle)\n\n  const { isLoading: [isLoading], imageSize: [imageSize] } = useLoadImageEffect(src, {\n    onImageLoadComplete,\n    onImageLoadError,\n    onImageSizeChange,\n  })\n\n  const { isDragging: [isDragging], value: [displacement, setDisplacement] } = useDragEffect(rootRef, {\n    initialValue: 0,\n    transform,\n    onDragStart,\n    onDragEnd,\n  })\n\n  useEffect(() => {\n    if (isDragging || isLoading || !imageSize) return\n\n    const newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, size, zeroAnchor)\n\n    if (newDisplacement !== displacement) {\n      // debug('Updating drag effect value from angle prop...', 'OK', `old=${displacement} new=${newDisplacement}`)\n      setDisplacement(newDisplacement)\n    }\n\n    if (externalAngle !== angle) {\n      setAngle(externalAngle)\n    }\n  }, [externalAngle, isLoading, imageSize, size, zeroAnchor])\n\n  useEffect(() => {\n    if (!isDragging || !imageSize) return\n\n    const newAngle = getAngleFromDisplacement(displacement, imageSize, size, zeroAnchor)\n\n    if (angle !== newAngle) {\n      setAngle(newAngle)\n    }\n  }, [displacement, imageSize, size, zeroAnchor])\n\n  useEffect(() => {\n    onAngleChange?.(angle, isDragging)\n    onPositionChange?.(angle / 360, isDragging)\n  }, [angle])\n\n  return (\n    <StyledRoot ref={rootRef} {...props}>\n      <StyledImageContainer\n        style={{\n          backgroundImage: `url(${src})`,\n          backgroundPositionX: `${-displacement}px`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledImageContainer = styled.div`\n  background-repeat: repeat;\n  background-size: auto 100%;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n`\n\nconst StyledRoot = styled.div`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n\n  > div {\n    height: 100%;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n`\n"]}

package/lib/RotatingGallery.d.ts

@@ -0,0 +1,54 @@
+import { HTMLAttributes } from 'react';
+import { CSSProp } from 'styled-components';
+declare type Props = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Current image index. An error is thrown if the index is invalid (must be between 0 and length
+     * of `srcs` - 1, inclusive). This prop supports two-way binding.
+     */
+    index?: number;
+    /**
+     * An array of image paths.
+     */
+    srcs?: string[];
+    /**
+     * The duration of one rotation in milliseconds (how long one image stays before transitioning to
+     * the next).
+     */
+    rotationDuration?: number;
+    /**
+     * The duration of an image transition in milliseconds.
+     */
+    transitionDuration?: number;
+    /**
+     * The default CSS of the image container.
+     */
+    defaultCSS?: CSSProp<any>;
+    /**
+     * The CSS of the image container (a `<div>` element containing the image) when the image is
+     * entering into view. This CSS lasts for `transitionDuration` milliseconds.
+     */
+    enteringCSS?: CSSProp<any>;
+    /**
+     * The CSS of the image container (a `<div>` element containing the image) after the image has
+     * entered into view.
+     */
+    enteredCSS?: CSSProp<any>;
+    /**
+     * The CSS of the image container (a `<div>` element containing the image) when the image is
+     * exiting out of view. This CSS lasts for `transitionDuration` milliseconds.
+     */
+    exitingCSS?: CSSProp<any>;
+    /**
+     * The CSS of the image container (a `<div>` element containing the image) after the image has
+     * exited out of view.
+     */
+    exitedCSS?: CSSProp<any>;
+    /**
+     * Handler invoked when the image index changes.
+     *
+     * @param index - The current image index.
+     */
+    onIndexChange?: (index: number) => void;
+};
+export default function RotatingGallery({ index: externalIndex, onIndexChange, rotationDuration, transitionDuration, srcs, defaultCSS, enteringCSS, enteredCSS, exitingCSS, exitedCSS, ...props }: Props): JSX.Element;
+export {};

package/lib/RotatingGallery.js

@@ -0,0 +1,94 @@
+"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++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_transition_group_1 = require("react-transition-group");
+var styled_components_1 = __importStar(require("styled-components"));
+var useInterval_1 = __importDefault(require("./hooks/useInterval"));
+function RotatingGallery(_a) {
+    var _b = _a.index, externalIndex = _b === void 0 ? 0 : _b, onIndexChange = _a.onIndexChange, _c = _a.rotationDuration, rotationDuration = _c === void 0 ? 1000 : _c, _d = _a.transitionDuration, transitionDuration = _d === void 0 ? 500 : _d, _e = _a.srcs, srcs = _e === void 0 ? [] : _e, _f = _a.defaultCSS, defaultCSS = _f === void 0 ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    transition-property: opacity;\n    transition-timing-function: ease-out;\n  "], ["\n    transition-property: opacity;\n    transition-timing-function: ease-out;\n  "]))) : _f, _g = _a.enteringCSS, enteringCSS = _g === void 0 ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    opacity: 1;\n  "], ["\n    opacity: 1;\n  "]))) : _g, enteredCSS = _a.enteredCSS, _h = _a.exitingCSS, exitingCSS = _h === void 0 ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    opacity: 0;\n  "], ["\n    opacity: 0;\n  "]))) : _h, exitedCSS = _a.exitedCSS, props = __rest(_a, ["index", "onIndexChange", "rotationDuration", "transitionDuration", "srcs", "defaultCSS", "enteringCSS", "enteredCSS", "exitingCSS", "exitedCSS"]);
+    var _j = __read((0, react_1.useState)(externalIndex), 2), index = _j[0], setIndex = _j[1];
+    (0, useInterval_1.default)(function () {
+        setIndex((index + 1) % srcs.length);
+    }, rotationDuration);
+    (0, react_1.useEffect)(function () {
+        if (externalIndex === index)
+            return;
+        setIndex(externalIndex);
+    }, [externalIndex]);
+    (0, react_1.useEffect)(function () {
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(index);
+    }, [index]);
+    return (react_1.default.createElement(StyledRoot, __assign({}, props), srcs.map(function (src, idx) { return (react_1.default.createElement(react_transition_group_1.Transition, { key: src, in: idx === index, timeout: transitionDuration }, function (state) { return (react_1.default.createElement(StyledImage, { className: state, css: defaultCSS, enteringCSS: enteringCSS !== null && enteringCSS !== void 0 ? enteringCSS : enteredCSS, enteredCSS: enteredCSS !== null && enteredCSS !== void 0 ? enteredCSS : enteringCSS, exitingCSS: exitingCSS !== null && exitingCSS !== void 0 ? exitingCSS : exitedCSS, exitedCSS: exitedCSS !== null && exitedCSS !== void 0 ? exitedCSS : exitingCSS, style: {
+            transitionDuration: "".concat(transitionDuration, "ms"),
+            backgroundImage: "url(".concat(src, ")"),
+        } })); })); })));
+}
+exports.default = RotatingGallery;
+var StyledImage = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-repeat: no-repeat;\n  background-size: cover;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  ", "\n\n  &.entering {\n    ", "\n  }\n\n  &.entered {\n    ", "\n  }\n\n  &.exiting {\n    ", "\n  }\n\n  &.exited {\n    ", "\n  }\n"], ["\n  background-repeat: no-repeat;\n  background-size: cover;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  ", "\n\n  &.entering {\n    ", "\n  }\n\n  &.entered {\n    ", "\n  }\n\n  &.exiting {\n    ", "\n  }\n\n  &.exited {\n    ", "\n  }\n"])), function (props) { return props.css; }, function (props) { return props.enteringCSS; }, function (props) { return props.enteredCSS; }, function (props) { return props.exitingCSS; }, function (props) { return props.exitedCSS; });
+var StyledRoot = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+//# sourceMappingURL=RotatingGallery.js.map

package/lib/RotatingGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RotatingGallery.js","sourceRoot":"/","sources":["RotatingGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, useEffect, useState } from 'react'\nimport { Transition } from 'react-transition-group'\nimport styled, { css, CSSProp } from 'styled-components'\nimport useInterval from './hooks/useInterval'\n\ntype Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Current image index. An error is thrown if the index is invalid (must be between 0 and length\n   * of `srcs` - 1, inclusive). This prop supports two-way binding.\n   */\n  index?: number\n\n  /**\n   * An array of image paths.\n   */\n  srcs?: string[]\n\n  /**\n   * The duration of one rotation in milliseconds (how long one image stays before transitioning to\n   * the next).\n   */\n  rotationDuration?: number\n\n  /**\n   * The duration of an image transition in milliseconds.\n   */\n  transitionDuration?: number\n\n  /**\n   * The default CSS of the image container.\n   */\n  defaultCSS?: CSSProp<any>\n\n  /**\n   * The CSS of the image container (a `<div>` element containing the image) when the image is\n   * entering into view. This CSS lasts for `transitionDuration` milliseconds.\n   */\n  enteringCSS?: CSSProp<any>\n\n  /**\n   * The CSS of the image container (a `<div>` element containing the image) after the image has\n   * entered into view.\n   */\n  enteredCSS?: CSSProp<any>\n\n  /**\n   * The CSS of the image container (a `<div>` element containing the image) when the image is\n   * exiting out of view. This CSS lasts for `transitionDuration` milliseconds.\n   */\n  exitingCSS?: CSSProp<any>\n\n  /**\n   * The CSS of the image container (a `<div>` element containing the image) after the image has\n   * exited out of view.\n   */\n  exitedCSS?: CSSProp<any>\n\n  /**\n   * Handler invoked when the image index changes.\n   *\n   * @param index - The current image index.\n   */\n  onIndexChange?: (index: number) => void\n}\n\nexport default function RotatingGallery({\n  index: externalIndex = 0,\n  onIndexChange,\n  rotationDuration = 1000,\n  transitionDuration = 500,\n  srcs = [],\n  defaultCSS = css`\n    transition-property: opacity;\n    transition-timing-function: ease-out;\n  `,\n  enteringCSS = css`\n    opacity: 1;\n  `,\n  enteredCSS,\n  exitingCSS = css`\n    opacity: 0;\n  `,\n  exitedCSS,\n  ...props\n}: Props) {\n  const [index, setIndex] = useState(externalIndex)\n\n  useInterval(() => {\n    setIndex((index + 1) % srcs.length)\n  }, rotationDuration)\n\n  useEffect(() => {\n    if (externalIndex === index) return\n    setIndex(externalIndex)\n  }, [externalIndex])\n\n  useEffect(() => {\n    onIndexChange?.(index)\n  }, [index])\n\n  return (\n    <StyledRoot {...props}>\n      {srcs.map((src, idx) => (\n        <Transition key={src} in={idx === index} timeout={transitionDuration}>\n          {state => (\n            <StyledImage\n              className={state}\n              css={defaultCSS}\n              enteringCSS={enteringCSS ?? enteredCSS}\n              enteredCSS={enteredCSS ?? enteringCSS}\n              exitingCSS={exitingCSS ?? exitedCSS}\n              exitedCSS={exitedCSS ?? exitingCSS}\n              style={{\n                transitionDuration: `${transitionDuration}ms`,\n                backgroundImage: `url(${src})`,\n              }}\n            />\n          )}\n        </Transition>\n      ))}\n    </StyledRoot>\n  )\n}\n\nconst StyledImage = styled.div<{\n  enteringCSS: Props['enteringCSS']\n  enteredCSS: Props['enteredCSS']\n  exitingCSS: Props['exitingCSS']\n  exitedCSS: Props['exitedCSS']\n}>`\n  background-repeat: no-repeat;\n  background-size: cover;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  ${props => props.css}\n\n  &.entering {\n    ${props => props.enteringCSS}\n  }\n\n  &.entered {\n    ${props => props.enteredCSS}\n  }\n\n  &.exiting {\n    ${props => props.exitingCSS}\n  }\n\n  &.exited {\n    ${props => props.exitedCSS}\n  }\n`\n\nconst StyledRoot = styled.div`\n  position: relative;\n`\n"]}

package/lib/Slider.d.ts

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from 'react';
 import { CSSProp } from 'styled-components';
-import { Orientation } from './types';
 export declare type Props = HTMLAttributes<HTMLDivElement> & {
     /**
      * By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the
@@ -36,7 +35,7 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
     /**
      * Orientation of the slider.
      */
-    orientation?: Orientation;
+    orientation?: 'horizontal' | 'vertical';
     /**
      * The current position.
      */
@@ -83,10 +82,5 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
  * a scroll track after the knob. While the width and height of the slider is inferred from its CSS
  * rules, the width and height of the knob are set via props (`knobWidth` and `knobHeight`,
  * respectively). The size of the knob does not impact the size of the slider.
- *
- * @requires react
- * @requires styled-components
- * @requires spase
- * @requires interactjs
  */
 export default function Slider({ isInverted, onlyDispatchesOnDragEnd, trackPadding, knobHeight, knobWidth, orientation, position: externalPosition, labelProvider, onDragEnd, onDragStart, onPositionChange, startingTrackCSS, endingTrackCSS, knobCSS, labelCSS, ...props }: Props): JSX.Element;

package/lib/Slider.js

@@ -77,11 +77,6 @@ var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:sl
  * a scroll track after the knob. While the width and height of the slider is inferred from its CSS
  * rules, the width and height of the knob are set via props (`knobWidth` and `knobHeight`,
  * respectively). The size of the knob does not impact the size of the slider.
- *
- * @requires react
- * @requires styled-components
- * @requires spase
- * @requires interactjs
  */
 function Slider(_a) {
     var _b = _a.isInverted, isInverted = _b === void 0 ? false : _b, _c = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _c === void 0 ? false : _c, _d = _a.trackPadding, trackPadding = _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, externalPosition = _h === void 0 ? 0 : _h, labelProvider = _a.labelProvider, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onPositionChange = _a.onPositionChange, startingTrackCSS = _a.startingTrackCSS, endingTrackCSS = _a.endingTrackCSS, knobCSS = _a.knobCSS, labelCSS = _a.labelCSS, props = __rest(_a, ["isInverted", "onlyDispatchesOnDragEnd", "trackPadding", "knobHeight", "knobWidth", "orientation", "position", "labelProvider", "onDragEnd", "onDragStart", "onPositionChange", "startingTrackCSS", "endingTrackCSS", "knobCSS", "labelCSS"]);

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, useEffect, useRef } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport useDragEffect from './hooks/useDragEffect'\nimport { Orientation } from './types'\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   * 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?: Orientation\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   * Custom CSS provided to the track before the knob.\n   */\n  startingTrackCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the track after the knob.\n   */\n  endingTrackCSS?: 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\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 * @requires react\n * @requires styled-components\n * @requires spase\n * @requires interactjs\n */\nexport default function Slider({\n  isInverted = false,\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  startingTrackCSS,\n  endingTrackCSS,\n  knobCSS,\n  labelCSS,\n  ...props\n}: Props) {\n  function transform(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 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,\n    onDragStart,\n    onDragEnd,\n  })\n\n  // debug('Rendering...', 'OK')\n\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\n    onPositionChange?.(position, true)\n  }, [isDragging])\n\n  return (\n    <StyledRoot ref={rootRef} orientation={orientation} {...props}>\n      <StyledTrack orientation={orientation} css={startingTrackCSS}\n        style={orientation === 'vertical' ? {\n          top: 0,\n          height: `calc(${naturalPosition*100}% - ${knobHeight*.5}px - ${trackPadding}px)`,\n        } : {\n          left: 0,\n          width: `calc(${naturalPosition*100}% - ${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        <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          })}\n          css={knobCSS}\n          style={{\n            height: `${knobHeight}px`,\n            width: `${knobWidth}px`,\n          }}\n        >\n          {labelProvider && (\n            <StyledLabel knobHeight={knobHeight} css={labelCSS}>{labelProvider(position)}</StyledLabel>\n          )}\n        </StyledKnob>\n      </StyledKnobContainer>\n      <StyledTrack orientation={orientation} css={endingTrackCSS}\n        style={orientation === 'vertical' ? {\n          bottom: 0,\n          height: `calc(${(1 - naturalPosition)*100}% - ${knobHeight*.5}px - ${trackPadding}px)`,\n        } : {\n          right: 0,\n          width: `calc(${(1 - naturalPosition)*100}% - ${knobWidth*.5}px - ${trackPadding}px)`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledTrack = styled.div<{ orientation: NonNullable<Props['orientation']> }>`\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<{ 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  ${props => props.css}\n`\n\nconst StyledKnobContainer = styled.button`\n  position: absolute;\n  z-index: 1;\n`\n\nconst StyledKnob = 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  ${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"]}
+{"version":3,"file":"Slider.js","sourceRoot":"/","sources":["Slider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAAgE;AAChE,+BAA4B;AAC5B,qEAAwD;AACxD,wEAAiD;AAEjD,IAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,cAAO,CAAC,CAAA;AA4FnG;;;;;;;GAOG;AACH,SAAwB,MAAM,CAAC,EAiBvB;IAhBN,IAAA,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,+BAA+B,EAA/B,uBAAuB,mBAAG,KAAK,KAAA,EAC/B,oBAAgB,EAAhB,YAAY,mBAAG,CAAC,KAAA,EAChB,kBAAe,EAAf,UAAU,mBAAG,EAAE,KAAA,EACf,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,mBAAwB,EAAxB,WAAW,mBAAG,UAAU,KAAA,EACxB,gBAA8B,EAApB,gBAAgB,mBAAG,CAAC,KAAA,EAC9B,aAAa,mBAAA,EACb,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,QAAQ,cAAA,EACL,KAAK,cAhBqB,6OAiB9B,CADS;IAER,SAAS,SAAS,CAAC,eAAuB,EAAE,EAAU,EAAE,EAAU;;QAChE,IAAM,IAAI,GAAG,MAAA,YAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,mCAAI,IAAI,YAAI,EAAE,CAAA;QACrD,IAAM,eAAe,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,eAAe,CAAA;QAC1E,IAAM,mBAAmB,GAAG,eAAe,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;QAC7D,IAAM,mBAAmB,GAAG,eAAe,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;QAC9D,IAAM,kBAAkB,GAAG,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;QAClL,IAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,CAAA;QAC5E,OAAO,WAAW,CAAA;IACpB,CAAC;IAED,IAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAA;IAC5C,IAAM,OAAO,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAA;IAEzC,IAAA,KAA+D,IAAA,uBAAa,EAAC,OAAO,EAAE;QAC1F,YAAY,EAAE,gBAAgB;QAC9B,SAAS,WAAA;QACT,WAAW,aAAA;QACX,SAAS,WAAA;KACV,CAAC,EALM,KAAA,wBAAwB,EAAX,UAAU,QAAA,EAAG,KAAA,mBAA8B,EAAtB,QAAQ,QAAA,EAAE,WAAW,QAK7D,CAAA;IAEF,8BAA8B;IAE9B,IAAM,eAAe,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAA;IAE5D,IAAA,iBAAS,EAAC;QACR,IAAI,UAAU,IAAI,gBAAgB,KAAK,QAAQ;YAAE,OAAM;QAEvD,KAAK,CAAC,kDAAkD,EAAE,IAAI,EAAE,eAAQ,gBAAgB,sBAAY,QAAQ,CAAE,CAAC,CAAA;QAE/G,WAAW,CAAC,gBAAgB,CAAC,CAAA;IAC/B,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAEtB,IAAA,iBAAS,EAAC;QACR,IAAI,UAAU,IAAI,uBAAuB;YAAE,OAAM;QACjD,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,QAAQ,EAAE,UAAU,CAAC,CAAA;IAC1C,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,IAAA,iBAAS,EAAC;QACR,IAAI,UAAU,IAAI,CAAC,uBAAuB;YAAE,OAAM;QAClD,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,QAAQ,EAAE,IAAI,CAAC,CAAA;IACpC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,OAAO,CACL,8BAAC,UAAU,aAAC,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,IAAM,KAAK;QAC3D,8BAAC,WAAW,IAAC,WAAW,EAAE,WAAW,EAAE,GAAG,EAAE,gBAAgB,EAC1D,KAAK,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;gBAClC,GAAG,EAAE,CAAC;gBACN,MAAM,EAAE,eAAQ,eAAe,GAAC,GAAG,iBAAO,UAAU,GAAC,EAAE,kBAAQ,YAAY,QAAK;aACjF,CAAC,CAAC,CAAC;gBACF,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,eAAQ,eAAe,GAAC,GAAG,iBAAO,SAAS,GAAC,EAAE,kBAAQ,YAAY,QAAK;aAC/E,GACD;QACF,8BAAC,mBAAmB,IAAC,GAAG,EAAE,OAAO,EAAE,KAAK,aACtC,SAAS,EAAE,4BAA4B,IACpC,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;gBAC/B,IAAI,EAAE,KAAK;gBACX,GAAG,EAAE,UAAG,eAAe,GAAC,GAAG,MAAG;gBAC9B,UAAU,EAAE,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,MAAM;aACjE,CAAC,CAAC,CAAC;gBACF,IAAI,EAAE,UAAG,eAAe,GAAC,GAAG,MAAG;gBAC/B,GAAG,EAAE,KAAK;gBACV,UAAU,EAAE,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM;aAClE,CAAC;YAEF,8BAAC,UAAU,IACT,SAAS,EAAE,IAAA,oBAAU,EAAC;oBACpB,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC;oBAC1D,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC;oBAC5D,UAAU,EAAE,UAAU,KAAK,IAAI;iBAChC,CAAC,EACF,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE;oBACL,MAAM,EAAE,UAAG,UAAU,OAAI;oBACzB,KAAK,EAAE,UAAG,SAAS,OAAI;iBACxB,IAEA,aAAa,IAAI,CAChB,8BAAC,WAAW,IAAC,UAAU,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,IAAG,aAAa,CAAC,QAAQ,CAAC,CAAe,CAC5F,CACU,CACO;QACtB,8BAAC,WAAW,IAAC,WAAW,EAAE,WAAW,EAAE,GAAG,EAAE,cAAc,EACxD,KAAK,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;gBAClC,MAAM,EAAE,CAAC;gBACT,MAAM,EAAE,eAAQ,CAAC,CAAC,GAAG,eAAe,CAAC,GAAC,GAAG,iBAAO,UAAU,GAAC,EAAE,kBAAQ,YAAY,QAAK;aACvF,CAAC,CAAC,CAAC;gBACF,KAAK,EAAE,CAAC;gBACR,KAAK,EAAE,eAAQ,CAAC,CAAC,GAAG,eAAe,CAAC,GAAC,GAAG,iBAAO,SAAS,GAAC,EAAE,kBAAQ,YAAY,QAAK;aACrF,GACD,CACS,CACd,CAAA;AACH,CAAC;AA/GD,yBA+GC;AAED,IAAM,WAAW,GAAG,2BAAM,CAAC,GAAG,uIAAoD,oDAI9E,EAUD,QAEC,EAAkB,IACrB,KAbG,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,KAAC,uBAAG,8IAAA,0EAKhD,KAAC,CAAC,KAAC,uBAAG,+IAAA,2EAKN,IAAA,EAVU,CAUV,EAEC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,EAAT,CAAS,CACrB,CAAA;AAED,IAAM,WAAW,GAAG,2BAAM,CAAC,KAAK,sKAAkD,iCAEnE,EAA8B,0DAIzC,EAAkB,IACrB,KALc,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,UAAU,GAAG,EAAE,EAArB,CAAqB,EAIzC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,EAAT,CAAS,CACrB,CAAA;AAED,IAAM,mBAAmB,GAAG,2BAAM,CAAC,MAAM,6GAAA,0CAGxC,IAAA,CAAA;AAED,IAAM,UAAU,GAAG,2BAAM,CAAC,GAAG,gYAAA,uTAYzB,EAAkB,IACrB,KADG,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,EAAT,CAAS,CACrB,CAAA;AAED,IAAM,UAAU,GAAG,2BAAM,CAAC,GAAG,6KAE3B,4DAGU,EAA2D,qCAE5D,EAA2D,KACrE,KAHW,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAlD,CAAkD,EAE5D,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAAlD,CAAkD,CACrE,CAAA","sourcesContent":["import classNames from 'classnames'\nimport React, { HTMLAttributes, useEffect, useRef } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } 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   * 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   * Custom CSS provided to the track before the knob.\n   */\n  startingTrackCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the track after the knob.\n   */\n  endingTrackCSS?: 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\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 */\nexport default function Slider({\n  isInverted = false,\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  startingTrackCSS,\n  endingTrackCSS,\n  knobCSS,\n  labelCSS,\n  ...props\n}: Props) {\n  function transform(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 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,\n    onDragStart,\n    onDragEnd,\n  })\n\n  // debug('Rendering...', 'OK')\n\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 ref={rootRef} orientation={orientation} {...props}>\n      <StyledTrack orientation={orientation} css={startingTrackCSS}\n        style={orientation === 'vertical' ? {\n          top: 0,\n          height: `calc(${naturalPosition*100}% - ${knobHeight*.5}px - ${trackPadding}px)`,\n        } : {\n          left: 0,\n          width: `calc(${naturalPosition*100}% - ${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        <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          })}\n          css={knobCSS}\n          style={{\n            height: `${knobHeight}px`,\n            width: `${knobWidth}px`,\n          }}\n        >\n          {labelProvider && (\n            <StyledLabel knobHeight={knobHeight} css={labelCSS}>{labelProvider(position)}</StyledLabel>\n          )}\n        </StyledKnob>\n      </StyledKnobContainer>\n      <StyledTrack orientation={orientation} css={endingTrackCSS}\n        style={orientation === 'vertical' ? {\n          bottom: 0,\n          height: `calc(${(1 - naturalPosition)*100}% - ${knobHeight*.5}px - ${trackPadding}px)`,\n        } : {\n          right: 0,\n          width: `calc(${(1 - naturalPosition)*100}% - ${knobWidth*.5}px - ${trackPadding}px)`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledTrack = styled.div<{ orientation: NonNullable<Props['orientation']> }>`\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<{ 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  ${props => props.css}\n`\n\nconst StyledKnobContainer = styled.button`\n  position: absolute;\n  z-index: 1;\n`\n\nconst StyledKnob = 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  ${props => props.css}\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"]}

package/lib/StepwiseSlider.d.ts

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from 'react';
 import { CSSProp } from 'styled-components';
-import { Orientation } from './types';
 export declare type Props = HTMLAttributes<HTMLDivElement> & {
     /**
      * By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the
@@ -38,7 +37,7 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
     /**
      * Orientation of the slider.
      */
-    orientation?: Orientation;
+    orientation?: 'horizontal' | 'vertical';
     /**
      * An array of step descriptors. A step is a position (0 - 1 inclusive) on the track where the
      * knob should snap to if dragging stops near it. Ensure that there are at least two steps: one
@@ -113,10 +112,5 @@ export declare function generateSteps(length: number): readonly number[];
  * props (`knobWidth` and `knobHeight`, respectively). The size of the knob does not impact the size
  * of the slider. While dragging, the slider still emits a position change event, where the position
  * is a decimal ranging between 0.0 and 1.0, inclusive.
- *
- * @requires react
- * @requires styled-components
- * @requires spase
- * @requires interactjs
  */
 export default function StepwiseSlider({ id, className, isInverted, onlyDispatchesOnDragEnd, trackPadding, knobHeight, knobWidth, orientation, labelProvider, steps, index: externalIndex, onIndexChange, onPositionChange, onDragEnd, onDragStart, startingTrackCSS, endingTrackCSS, knobCSS, labelCSS, ...props }: Props): JSX.Element;

package/lib/StepwiseSlider.js

@@ -139,11 +139,6 @@ function getPositionAt(index, steps) {
  * props (`knobWidth` and `knobHeight`, respectively). The size of the knob does not impact the size
  * of the slider. While dragging, the slider still emits a position change event, where the position
  * is a decimal ranging between 0.0 and 1.0, inclusive.
- *
- * @requires react
- * @requires styled-components
- * @requires spase
- * @requires interactjs
  */
 function StepwiseSlider(_a) {
     var id = _a.id, className = _a.className, _b = _a.isInverted, isInverted = _b === void 0 ? false : _b, _c = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _c === void 0 ? false : _c, _d = _a.trackPadding, trackPadding = _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, labelProvider = _a.labelProvider, _h = _a.steps, steps = _h === void 0 ? generateSteps(10) : _h, _j = _a.index, externalIndex = _j === void 0 ? 0 : _j, onIndexChange = _a.onIndexChange, onPositionChange = _a.onPositionChange, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, startingTrackCSS = _a.startingTrackCSS, endingTrackCSS = _a.endingTrackCSS, knobCSS = _a.knobCSS, labelCSS = _a.labelCSS, props = __rest(_a, ["id", "className", "isInverted", "onlyDispatchesOnDragEnd", "trackPadding", "knobHeight", "knobWidth", "orientation", "labelProvider", "steps", "index", "onIndexChange", "onPositionChange", "onDragEnd", "onDragStart", "startingTrackCSS", "endingTrackCSS", "knobCSS", "labelCSS"]);

package/lib/StepwiseSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepwiseSlider.js","sourceRoot":"/","sources":["StepwiseSlider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAA0E;AAC1E,+BAA4B;AAC5B,qEAAwD;AACxD,wEAAiD;AAGjD,IAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,cAAO,CAAC,CAAA;AAgH5G;;;;;;;GAOG;AACH,SAAgB,aAAa,CAAC,MAAc;IAC1C,IAAI,MAAM,IAAI,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAA;IACrF,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,MAAM;QAAE,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAA;IAEvF,IAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IAEjC,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC;QACvC,IAAM,QAAQ,GAAG,QAAQ,GAAG,CAAC,CAAA;QAC7B,OAAO,QAAQ,CAAA;IACjB,CAAC,CAAC,CAAA;AACJ,CAAC;AAVD,sCAUC;AAED;;;;;;;;GAQG;AACH,SAAS,yBAAyB,CAAC,QAAgB,EAAE,KAAwB;IAC3E,IAAI,KAAK,GAAG,CAAC,CAAC,CAAA;IACd,IAAI,QAAQ,GAAG,GAAG,CAAA;IAElB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;QAC5C,IAAM,IAAI,GAAG,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,CAAA;QAEpC,IAAI,KAAK,CAAC,IAAI,CAAC;YAAE,SAAQ;QAEzB,IAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAA;QAEvC,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,EAAE;YACzC,QAAQ,GAAG,KAAK,CAAA;YAChB,KAAK,GAAG,CAAC,CAAA;SACV;KACF;IAED,OAAO,KAAK,CAAA;AACd,CAAC;AAED;;;;;;;;GAQG;AACH,SAAS,aAAa,CAAC,KAAa,EAAE,KAAwB;IAC5D,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM;QAAE,OAAO,GAAG,CAAA;IACrC,OAAO,KAAK,CAAC,KAAK,CAAC,CAAA;AACrB,CAAC;AAED;;;;;;;;;;;;;;;GAeG;AACH,SAAwB,cAAc,CAAC,EAqB/B;IApBN,IAAA,EAAE,QAAA,EACF,SAAS,eAAA,EACT,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,+BAA+B,EAA/B,uBAAuB,mBAAG,KAAK,KAAA,EAC/B,oBAAgB,EAAhB,YAAY,mBAAG,CAAC,KAAA,EAChB,kBAAe,EAAf,UAAU,mBAAG,EAAE,KAAA,EACf,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,mBAAwB,EAAxB,WAAW,mBAAG,UAAU,KAAA,EACxB,aAAa,mBAAA,EACb,aAAyB,EAAzB,KAAK,mBAAG,aAAa,CAAC,EAAE,CAAC,KAAA,EACzB,aAAwB,EAAjB,aAAa,mBAAG,CAAC,KAAA,EACxB,aAAa,mBAAA,EACb,gBAAgB,sBAAA,EAChB,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,gBAAgB,sBAAA,EAChB,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,QAAQ,cAAA,EACL,KAAK,cApB6B,uRAqBtC,CADS;IAER,SAAS,SAAS,CAAC,eAAuB,EAAE,EAAU,EAAE,EAAU;;QAChE,IAAM,IAAI,GAAG,MAAA,YAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,mCAAI,IAAI,YAAI,EAAE,CAAA;QACrD,IAAM,eAAe,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,eAAe,CAAA;QAC1E,IAAM,mBAAmB,GAAG,eAAe,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;QAC7D,IAAM,mBAAmB,GAAG,eAAe,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;QAC9D,IAAM,kBAAkB,GAAG,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;QAClL,IAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,CAAA;QAC5E,OAAO,WAAW,CAAA;IACpB,CAAC;IAED,IAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAA;IAC5C,IAAM,OAAO,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAA;IAEzC,IAAA,KAAA,OAAoB,IAAA,gBAAQ,EAAC,aAAa,CAAC,IAAA,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAA;IAE3C,IAAA,KAA+D,IAAA,uBAAa,EAAC,OAAO,EAAE;QAC1F,YAAY,EAAE,aAAa,CAAC,aAAa,EAAE,KAAK,CAAC;QACjD,SAAS,WAAA;QACT,WAAW,aAAA;QACX,SAAS,WAAA;KACV,CAAC,EALM,KAAA,wBAAwB,EAAX,UAAU,QAAA,EAAG,KAAA,mBAA8B,EAAtB,QAAQ,QAAA,EAAE,WAAW,QAK7D,CAAA;IAEF,IAAM,eAAe,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAA;IAE5D,IAAA,iBAAS,EAAC;QACR,IAAI,UAAU;YAAE,OAAM;QAEtB,IAAM,WAAW,GAAG,aAAa,CAAC,aAAa,EAAE,KAAK,CAAC,CAAA;QAEvD,IAAI,QAAQ,KAAK,WAAW,EAAE;YAC5B,KAAK,CAAC,+CAA+C,EAAE,IAAI,EAAE,eAAQ,WAAW,sBAAY,QAAQ,CAAE,CAAC,CAAA;YACvG,WAAW,CAAC,WAAW,CAAC,CAAA;SACzB;QAED,IAAI,aAAa,KAAK,KAAK,EAAE;YAC3B,QAAQ,CAAC,aAAa,CAAC,CAAA;SACxB;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,IAAA,iBAAS,EAAC;QACR,IAAI,UAAU,IAAI,uBAAuB;YAAE,OAAM;QAEjD,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,QAAQ,EAAE,UAAU,CAAC,CAAA;QAExC,IAAM,QAAQ,GAAG,yBAAyB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;QAC3D,IAAI,KAAK,KAAK,QAAQ;YAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,IAAA,iBAAS,EAAC;QACR,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,KAAK,EAAE,UAAU,CAAC,CAAA;IACpC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,IAAA,iBAAS,EAAC;QACR,IAAI,UAAU;YAAE,OAAM;QAEtB,IAAM,YAAY,GAAG,yBAAyB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;QAC/D,IAAM,eAAe,GAAG,aAAa,CAAC,YAAY,EAAE,KAAK,CAAC,CAAA;QAE1D,IAAI,eAAe,KAAK,QAAQ,IAAI,uBAAuB,EAAE;YAC3D,WAAW,CAAC,eAAe,CAAC,CAAA;YAC5B,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,eAAe,EAAE,IAAI,CAAC,CAAA;SAC1C;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,OAAO,CACL,8BAAC,UAAU,aAAC,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,IAAM,KAAK;QAC3D,8BAAC,WAAW,IAAC,WAAW,EAAE,WAAW,EAAE,GAAG,EAAE,gBAAgB,EAC1D,KAAK,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;gBAClC,GAAG,EAAE,CAAC;gBACN,MAAM,EAAE,eAAQ,eAAe,GAAC,GAAG,iBAAO,UAAU,GAAC,EAAE,kBAAQ,YAAY,QAAK;aACjF,CAAC,CAAC,CAAC;gBACF,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,eAAQ,eAAe,GAAC,GAAG,iBAAO,SAAS,GAAC,EAAE,kBAAQ,YAAY,QAAK;aAC/E,GACD;QACF,8BAAC,mBAAmB,IAAC,GAAG,EAAE,OAAO,EAAE,KAAK,aACtC,SAAS,EAAE,4BAA4B,IACpC,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;gBAC/B,IAAI,EAAE,KAAK;gBACX,GAAG,EAAE,UAAG,eAAe,GAAC,GAAG,MAAG;gBAC9B,UAAU,EAAE,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,MAAM;aACjE,CAAC,CAAC,CAAC;gBACF,IAAI,EAAE,UAAG,eAAe,GAAC,GAAG,MAAG;gBAC/B,GAAG,EAAE,KAAK;gBACV,UAAU,EAAE,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM;aAClE,CAAC;YAEF,8BAAC,UAAU,IACT,SAAS,EAAE,IAAA,oBAAU,EAAC;oBACpB,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC;oBAC1D,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC;oBAC5D,UAAU,EAAE,UAAU;iBACvB,CAAC,EACF,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE;oBACL,MAAM,EAAE,UAAG,UAAU,OAAI;oBACzB,KAAK,EAAE,UAAG,SAAS,OAAI;iBACxB,IAEA,KAAK,IAAI,aAAa,IAAI,CACzB,8BAAC,WAAW,IAAC,UAAU,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,IAAG,aAAa,CAAC,QAAQ,EAAE,yBAAyB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAe,CACxI,CACU,CACO;QACtB,8BAAC,WAAW,IAAC,WAAW,EAAE,WAAW,EAAE,GAAG,EAAE,cAAc,EACxD,KAAK,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;gBAClC,MAAM,EAAE,CAAC;gBACT,MAAM,EAAE,eAAQ,CAAC,CAAC,GAAG,eAAe,CAAC,GAAC,GAAG,iBAAO,UAAU,GAAC,EAAE,kBAAQ,YAAY,QAAK;aACvF,CAAC,CAAC,CAAC;gBACF,KAAK,EAAE,CAAC;gBACR,KAAK,EAAE,eAAQ,CAAC,CAAC,GAAG,eAAe,CAAC,GAAC,GAAG,iBAAO,SAAS,GAAC,EAAE,kBAAQ,YAAY,QAAK;aACrF,GACD,CACS,CACd,CAAA;AACH,CAAC;AAzID,iCAyIC;AAED,IAAM,WAAW,GAAG,2BAAM,CAAC,GAAG,uIAAoD,oDAI9E,EAUD,QAEC,EAAkB,IACrB,KAbG,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,KAAC,uBAAG,8IAAA,0EAKhD,KAAC,CAAC,KAAC,uBAAG,+IAAA,2EAKN,IAAA,EAVU,CAUV,EAEC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,EAAT,CAAS,CACrB,CAAA;AAED,IAAM,WAAW,GAAG,2BAAM,CAAC,KAAK,sKAAkD,iCAEnE,EAA8B,0DAIzC,EAAkB,IACrB,KALc,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,UAAU,GAAG,EAAE,EAArB,CAAqB,EAIzC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,EAAT,CAAS,CACrB,CAAA;AAED,IAAM,mBAAmB,GAAG,2BAAM,CAAC,MAAM,6GAAA,0CAGxC,IAAA,CAAA;AAED,IAAM,UAAU,GAAG,2BAAM,CAAC,GAAG,+YAAA,sUAazB,EAAkB,IACrB,KADG,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,EAAT,CAAS,CACrB,CAAA;AAED,IAAM,UAAU,GAAG,2BAAM,CAAC,GAAG,6KAE3B,4DAGU,EAA2D,qCAE5D,EAA2D,KACrE,KAHW,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAlD,CAAkD,EAE5D,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAAlD,CAAkD,CACrE,CAAA","sourcesContent":["import classNames from 'classnames'\nimport React, { HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport useDragEffect from './hooks/useDragEffect'\nimport { Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:stepwise-slider') : () => {}\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the\n   * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1\n   * being the start.\n   */\n  isInverted?: boolean\n\n  /**\n   * Indicates if position/index change events are dispatched only when dragging ends. When\n   * disabled, aforementioned events are fired repeatedly while dragging.\n   */\n  onlyDispatchesOnDragEnd?: boolean\n\n  /**\n   * A function that returns the label to be displayed at a given slider position and closest step\n   * index (if steps are provided).\n   *\n   * @param position - The current slider position.\n   * @param index - The nearest step index (if steps are provided), or -1 if no steps are provided.\n   *\n   * @returns The label.\n   */\n  labelProvider?: (position: number, index: number) => string\n\n  /**\n   * Padding between the track and the knob in pixels.\n   */\n  trackPadding?: number\n\n  /**\n   * Height of the knob in pixels.\n   */\n  knobHeight?: number\n\n  /**\n   * Width of the knob in pixels.\n   */\n  knobWidth?: number\n\n  /**\n   * Orientation of the slider.\n   */\n  orientation?: Orientation\n\n  /**\n   * An array of step descriptors. A step is a position (0 - 1 inclusive) on the track where the\n   * knob should snap to if dragging stops near it. Ensure that there are at least two steps: one\n   * for the start of the track and one for the end.\n   */\n  steps?: readonly number[]\n\n  /**\n   * The current index.\n   */\n  index?: number\n\n  /**\n   * Handler invoked when index changes. This can either be invoked from the `index` prop\n   * being changed or from the slider being dragged. Note that if the event is emitted at the end of\n   * dragging due to `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n   * still `true`. This event is emitted right after `onPositionChange`.\n   *\n   * @param index - The current slider index.\n   * @param isDragging - Specifies if the index change is due to dragging.\n   */\n  onIndexChange?: (index: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when position changes. This can either be invoked from the `index` prop\n   * being changed or from the slider being dragged. Note that if the event is emitted at the end of\n   * dragging due to `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n   * still `true`. This event is emitted right before `onIndexChange`.\n   *\n   * @param position - The current slider position.\n   * @param isDragging - Specifies if the position change is due to dragging.\n   */\n  onPositionChange?: (position: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when dragging begins.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Custom CSS provided to the track before the knob.\n   */\n  startingTrackCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the track after the knob.\n   */\n  endingTrackCSS?: 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\n/**\n * Generates a set of steps compatible with this component.\n *\n * @param length - The number of steps. This must be at least 2 because you must include the\n *                 starting and ending points.\n *\n * @returns An array of steps.\n */\nexport function generateSteps(length: number): readonly number[] {\n  if (length <= 1) throw new Error('`length` value must be greater than or equal to 2')\n  if (Math.round(length) !== length) throw new Error('`length` value must be an integer')\n\n  const interval = 1 / (length - 1)\n\n  return Array(length).fill(null).map((v, i) => {\n    const position = interval * i\n    return position\n  })\n}\n\n/**\n * Gets the index of the step of which the specified position is closest to. If for whatever\n * reason the index cannot be computed, -1 is returned.\n *\n * @param position - The position (0 - 1, inclusive).\n * @param steps - The steps.\n *\n * @returns The nearest index.\n */\nfunction getNearestIndexByPosition(position: number, steps: readonly number[]): number {\n  let index = -1\n  let minDelta = NaN\n\n  for (let i = 0, n = steps.length; i < n; i++) {\n    const step = getPositionAt(i, steps)\n\n    if (isNaN(step)) continue\n\n    const delta = Math.abs(position - step)\n\n    if (isNaN(minDelta) || (delta < minDelta)) {\n      minDelta = delta\n      index = i\n    }\n  }\n\n  return index\n}\n\n/**\n * Gets the position by step index. This value ranges between 0 - 1, inclusive.\n *\n * @param index - The step index.\n * @param steps - The steps.\n *\n * @returns The position. If for whatever reason the position cannot be determined, `NaN` is\n *          returned.\n */\nfunction getPositionAt(index: number, steps: readonly number[]): number {\n  if (index >= steps.length) return NaN\n  return steps[index]\n}\n\n/**\n * A \"stepwise\" slider component supporting both horizontal and vertical orientations that\n * automatically snaps to a set of predefined points on the slider when dragged. These points are\n * referred to as \"steps\", indexed by an integer referred to as \"index\". This index can be two-way\n * binded. The component consists of four customizable elements: a draggable knob, a label on the\n * knob, a scroll track before the knob and a scroll track after the knob. While the width and\n * height of the slider is inferred from its CSS rules, the width and height of the knob are set via\n * props (`knobWidth` and `knobHeight`, respectively). The size of the knob does not impact the size\n * of the slider. While dragging, the slider still emits a position change event, where the position\n * is a decimal ranging between 0.0 and 1.0, inclusive.\n *\n * @requires react\n * @requires styled-components\n * @requires spase\n * @requires interactjs\n */\nexport default function StepwiseSlider({\n  id,\n  className,\n  isInverted = false,\n  onlyDispatchesOnDragEnd = false,\n  trackPadding = 0,\n  knobHeight = 30,\n  knobWidth = 30,\n  orientation = 'vertical',\n  labelProvider,\n  steps = generateSteps(10),\n  index: externalIndex = 0,\n  onIndexChange,\n  onPositionChange,\n  onDragEnd,\n  onDragStart,\n  startingTrackCSS,\n  endingTrackCSS,\n  knobCSS,\n  labelCSS,\n  ...props\n}: Props) {\n  function transform(currentPosition: number, dx: number, dy: number) {\n    const rect = Rect.from(rootRef.current) ?? new Rect()\n    const naturalPosition = isInverted ? 1 - currentPosition : currentPosition\n    const naturalNewPositionX = naturalPosition * rect.width + dx\n    const naturalNewPositionY = naturalPosition * rect.height + dy\n    const naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width))\n    const newPosition = isInverted ? 1 - naturalNewPosition : naturalNewPosition\n    return newPosition\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n  const knobRef = useRef<HTMLButtonElement>(null)\n\n  const [index, setIndex] = useState(externalIndex)\n\n  const { isDragging: [isDragging], value: [position, setPosition] } = useDragEffect(knobRef, {\n    initialValue: getPositionAt(externalIndex, steps),\n    transform,\n    onDragStart,\n    onDragEnd,\n  })\n\n  const naturalPosition = isInverted ? 1 - position : position\n\n  useEffect(() => {\n    if (isDragging) return\n\n    const newPosition = getPositionAt(externalIndex, steps)\n\n    if (position !== newPosition) {\n      debug('Updating drag effect value from index prop...', 'OK', `prop=${newPosition}, effect=${position}`)\n      setPosition(newPosition)\n    }\n\n    if (externalIndex !== index) {\n      setIndex(externalIndex)\n    }\n  }, [externalIndex])\n\n  useEffect(() => {\n    if (isDragging && onlyDispatchesOnDragEnd) return\n\n    onPositionChange?.(position, isDragging)\n\n    const newIndex = getNearestIndexByPosition(position, steps)\n    if (index !== newIndex) setIndex(newIndex)\n  }, [position])\n\n  useEffect(() => {\n    onIndexChange?.(index, isDragging)\n  }, [index])\n\n  useEffect(() => {\n    if (isDragging) return\n\n    const nearestIndex = getNearestIndexByPosition(position, steps)\n    const nearestPosition = getPositionAt(nearestIndex, steps)\n\n    if (nearestPosition !== position || onlyDispatchesOnDragEnd) {\n      setPosition(nearestPosition)\n      onPositionChange?.(nearestPosition, true)\n    }\n  }, [isDragging])\n\n  return (\n    <StyledRoot ref={rootRef} orientation={orientation} {...props}>\n      <StyledTrack orientation={orientation} css={startingTrackCSS}\n        style={orientation === 'vertical' ? {\n          top: 0,\n          height: `calc(${naturalPosition*100}% - ${knobHeight*.5}px - ${trackPadding}px)`,\n        } : {\n          left: 0,\n          width: `calc(${naturalPosition*100}% - ${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        <StyledKnob\n          className={classNames({\n            'at-end': isInverted ? (position === 0) : (position === 1),\n            'at-start': isInverted ? (position === 1) : (position === 0),\n            'dragging': isDragging,\n          })}\n          css={knobCSS}\n          style={{\n            height: `${knobHeight}px`,\n            width: `${knobWidth}px`,\n          }}\n        >\n          {steps && labelProvider && (\n            <StyledLabel knobHeight={knobHeight} css={labelCSS}>{labelProvider(position, getNearestIndexByPosition(position, steps))}</StyledLabel>\n          )}\n        </StyledKnob>\n      </StyledKnobContainer>\n      <StyledTrack orientation={orientation} css={endingTrackCSS}\n        style={orientation === 'vertical' ? {\n          bottom: 0,\n          height: `calc(${(1 - naturalPosition)*100}% - ${knobHeight*.5}px - ${trackPadding}px)`,\n        } : {\n          right: 0,\n          width: `calc(${(1 - naturalPosition)*100}% - ${knobWidth*.5}px - ${trackPadding}px)`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledTrack = styled.div<{ orientation: NonNullable<Props['orientation']> }>`\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<{ 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  ${props => props.css}\n`\n\nconst StyledKnobContainer = styled.button`\n  position: absolute;\n  z-index: 1;\n`\n\nconst StyledKnob = styled.div`\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: 1;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  ${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"]}
+{"version":3,"file":"StepwiseSlider.js","sourceRoot":"/","sources":["StepwiseSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport useDragEffect from './hooks/useDragEffect'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:stepwise-slider') : () => {}\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the\n   * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1\n   * being the start.\n   */\n  isInverted?: boolean\n\n  /**\n   * Indicates if position/index change events are dispatched only when dragging ends. When\n   * disabled, aforementioned events are fired repeatedly while dragging.\n   */\n  onlyDispatchesOnDragEnd?: boolean\n\n  /**\n   * A function that returns the label to be displayed at a given slider position and closest step\n   * index (if steps are provided).\n   *\n   * @param position - The current slider position.\n   * @param index - The nearest step index (if steps are provided), or -1 if no steps are provided.\n   *\n   * @returns The label.\n   */\n  labelProvider?: (position: number, index: number) => string\n\n  /**\n   * Padding between the track and the knob in pixels.\n   */\n  trackPadding?: number\n\n  /**\n   * Height of the knob in pixels.\n   */\n  knobHeight?: number\n\n  /**\n   * Width of the knob in pixels.\n   */\n  knobWidth?: number\n\n  /**\n   * Orientation of the slider.\n   */\n  orientation?: 'horizontal' | 'vertical'\n\n  /**\n   * An array of step descriptors. A step is a position (0 - 1 inclusive) on the track where the\n   * knob should snap to if dragging stops near it. Ensure that there are at least two steps: one\n   * for the start of the track and one for the end.\n   */\n  steps?: readonly number[]\n\n  /**\n   * The current index.\n   */\n  index?: number\n\n  /**\n   * Handler invoked when index changes. This can either be invoked from the `index` prop\n   * being changed or from the slider being dragged. Note that if the event is emitted at the end of\n   * dragging due to `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n   * still `true`. This event is emitted right after `onPositionChange`.\n   *\n   * @param index - The current slider index.\n   * @param isDragging - Specifies if the index change is due to dragging.\n   */\n  onIndexChange?: (index: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when position changes. This can either be invoked from the `index` prop\n   * being changed or from the slider being dragged. Note that if the event is emitted at the end of\n   * dragging due to `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n   * still `true`. This event is emitted right before `onIndexChange`.\n   *\n   * @param position - The current slider position.\n   * @param isDragging - Specifies if the position change is due to dragging.\n   */\n  onPositionChange?: (position: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when dragging begins.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Custom CSS provided to the track before the knob.\n   */\n  startingTrackCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the track after the knob.\n   */\n  endingTrackCSS?: 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\n/**\n * Generates a set of steps compatible with this component.\n *\n * @param length - The number of steps. This must be at least 2 because you must include the\n *                 starting and ending points.\n *\n * @returns An array of steps.\n */\nexport function generateSteps(length: number): readonly number[] {\n  if (length <= 1) throw new Error('`length` value must be greater than or equal to 2')\n  if (Math.round(length) !== length) throw new Error('`length` value must be an integer')\n\n  const interval = 1 / (length - 1)\n\n  return Array(length).fill(null).map((v, i) => {\n    const position = interval * i\n    return position\n  })\n}\n\n/**\n * Gets the index of the step of which the specified position is closest to. If for whatever\n * reason the index cannot be computed, -1 is returned.\n *\n * @param position - The position (0 - 1, inclusive).\n * @param steps - The steps.\n *\n * @returns The nearest index.\n */\nfunction getNearestIndexByPosition(position: number, steps: readonly number[]): number {\n  let index = -1\n  let minDelta = NaN\n\n  for (let i = 0, n = steps.length; i < n; i++) {\n    const step = getPositionAt(i, steps)\n\n    if (isNaN(step)) continue\n\n    const delta = Math.abs(position - step)\n\n    if (isNaN(minDelta) || (delta < minDelta)) {\n      minDelta = delta\n      index = i\n    }\n  }\n\n  return index\n}\n\n/**\n * Gets the position by step index. This value ranges between 0 - 1, inclusive.\n *\n * @param index - The step index.\n * @param steps - The steps.\n *\n * @returns The position. If for whatever reason the position cannot be determined, `NaN` is\n *          returned.\n */\nfunction getPositionAt(index: number, steps: readonly number[]): number {\n  if (index >= steps.length) return NaN\n  return steps[index]\n}\n\n/**\n * A \"stepwise\" slider component supporting both horizontal and vertical orientations that\n * automatically snaps to a set of predefined points on the slider when dragged. These points are\n * referred to as \"steps\", indexed by an integer referred to as \"index\". This index can be two-way\n * binded. The component consists of four customizable elements: a draggable knob, a label on the\n * knob, a scroll track before the knob and a scroll track after the knob. While the width and\n * height of the slider is inferred from its CSS rules, the width and height of the knob are set via\n * props (`knobWidth` and `knobHeight`, respectively). The size of the knob does not impact the size\n * of the slider. While dragging, the slider still emits a position change event, where the position\n * is a decimal ranging between 0.0 and 1.0, inclusive.\n */\nexport default function StepwiseSlider({\n  id,\n  className,\n  isInverted = false,\n  onlyDispatchesOnDragEnd = false,\n  trackPadding = 0,\n  knobHeight = 30,\n  knobWidth = 30,\n  orientation = 'vertical',\n  labelProvider,\n  steps = generateSteps(10),\n  index: externalIndex = 0,\n  onIndexChange,\n  onPositionChange,\n  onDragEnd,\n  onDragStart,\n  startingTrackCSS,\n  endingTrackCSS,\n  knobCSS,\n  labelCSS,\n  ...props\n}: Props) {\n  function transform(currentPosition: number, dx: number, dy: number) {\n    const rect = Rect.from(rootRef.current) ?? new Rect()\n    const naturalPosition = isInverted ? 1 - currentPosition : currentPosition\n    const naturalNewPositionX = naturalPosition * rect.width + dx\n    const naturalNewPositionY = naturalPosition * rect.height + dy\n    const naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width))\n    const newPosition = isInverted ? 1 - naturalNewPosition : naturalNewPosition\n    return newPosition\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n  const knobRef = useRef<HTMLButtonElement>(null)\n\n  const [index, setIndex] = useState(externalIndex)\n\n  const { isDragging: [isDragging], value: [position, setPosition] } = useDragEffect(knobRef, {\n    initialValue: getPositionAt(externalIndex, steps),\n    transform,\n    onDragStart,\n    onDragEnd,\n  })\n\n  const naturalPosition = isInverted ? 1 - position : position\n\n  useEffect(() => {\n    if (isDragging) return\n\n    const newPosition = getPositionAt(externalIndex, steps)\n\n    if (position !== newPosition) {\n      debug('Updating drag effect value from index prop...', 'OK', `prop=${newPosition}, effect=${position}`)\n      setPosition(newPosition)\n    }\n\n    if (externalIndex !== index) {\n      setIndex(externalIndex)\n    }\n  }, [externalIndex])\n\n  useEffect(() => {\n    if (isDragging && onlyDispatchesOnDragEnd) return\n\n    onPositionChange?.(position, isDragging)\n\n    const newIndex = getNearestIndexByPosition(position, steps)\n    if (index !== newIndex) setIndex(newIndex)\n  }, [position])\n\n  useEffect(() => {\n    onIndexChange?.(index, isDragging)\n  }, [index])\n\n  useEffect(() => {\n    if (isDragging) return\n\n    const nearestIndex = getNearestIndexByPosition(position, steps)\n    const nearestPosition = getPositionAt(nearestIndex, steps)\n\n    if (nearestPosition !== position || onlyDispatchesOnDragEnd) {\n      setPosition(nearestPosition)\n      onPositionChange?.(nearestPosition, true)\n    }\n  }, [isDragging])\n\n  return (\n    <StyledRoot ref={rootRef} orientation={orientation} {...props}>\n      <StyledTrack orientation={orientation} css={startingTrackCSS}\n        style={orientation === 'vertical' ? {\n          top: 0,\n          height: `calc(${naturalPosition*100}% - ${knobHeight*.5}px - ${trackPadding}px)`,\n        } : {\n          left: 0,\n          width: `calc(${naturalPosition*100}% - ${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        <StyledKnob\n          className={classNames({\n            'at-end': isInverted ? (position === 0) : (position === 1),\n            'at-start': isInverted ? (position === 1) : (position === 0),\n            'dragging': isDragging,\n          })}\n          css={knobCSS}\n          style={{\n            height: `${knobHeight}px`,\n            width: `${knobWidth}px`,\n          }}\n        >\n          {steps && labelProvider && (\n            <StyledLabel knobHeight={knobHeight} css={labelCSS}>{labelProvider(position, getNearestIndexByPosition(position, steps))}</StyledLabel>\n          )}\n        </StyledKnob>\n      </StyledKnobContainer>\n      <StyledTrack orientation={orientation} css={endingTrackCSS}\n        style={orientation === 'vertical' ? {\n          bottom: 0,\n          height: `calc(${(1 - naturalPosition)*100}% - ${knobHeight*.5}px - ${trackPadding}px)`,\n        } : {\n          right: 0,\n          width: `calc(${(1 - naturalPosition)*100}% - ${knobWidth*.5}px - ${trackPadding}px)`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledTrack = styled.div<{ orientation: NonNullable<Props['orientation']> }>`\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<{ 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  ${props => props.css}\n`\n\nconst StyledKnobContainer = styled.button`\n  position: absolute;\n  z-index: 1;\n`\n\nconst StyledKnob = styled.div`\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: 1;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  ${props => props.css}\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"]}

package/lib/hooks/useDragEffect.d.ts

@@ -42,10 +42,6 @@ declare type Options<T> = Omit<Interact.DraggableOptions, 'onstart' | 'onmove' |
  * @param deps - Dependencies that trigger this effect.
  *
  * @returns The states created for this effect.
- *
- * @requires react
- * @requires spase
- * @requires interactjs
  */
 export default function useDragEffect<T = [number, number]>(targetRef: RefObject<HTMLElement>, { onDragStart, onDragMove, onDragEnd, initialValue, transform, ...options }: Options<T>, deps?: DependencyList): ReturnedStates<T>;
 export {};

package/lib/hooks/useDragEffect.js

@@ -62,10 +62,6 @@ var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:ho
  * @param deps - Dependencies that trigger this effect.
  *
  * @returns The states created for this effect.
- *
- * @requires react
- * @requires spase
- * @requires interactjs
  */
 function useDragEffect(targetRef, _a, deps) {
     var onDragStart = _a.onDragStart, onDragMove = _a.onDragMove, onDragEnd = _a.onDragEnd, initialValue = _a.initialValue, transform = _a.transform, options = __rest(_a, ["onDragStart", "onDragMove", "onDragEnd", "initialValue", "transform"]);
@@ -93,7 +89,6 @@ function useDragEffect(targetRef, _a, deps) {
             // Do not consume states in these listeners as they will remain their initial values within
             // the scope of the listeners.
             (0, interactjs_1.default)(targetRef.current).draggable(__assign(__assign({ inertia: true }, options), { onstart: function () {
-                    console.log('started');
                     setIsDragging(true);
                     onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
                 }, onmove: function (_a) {
@@ -106,7 +101,6 @@ function useDragEffect(targetRef, _a, deps) {
                     }
                     onDragMove === null || onDragMove === void 0 ? void 0 : onDragMove(dx, dy);
                 }, onend: function () {
-                    console.log('stopped');
                     setIsDragging(false);
                     onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
                 } }));

package/lib/hooks/useDragEffect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDragEffect.js","sourceRoot":"/","sources":["hooks/useDragEffect.ts"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs'\nimport _ from 'lodash'\nimport { DependencyList, Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from 'react'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : () => {}\n\ntype ReturnedStates<T> = {\n  isDragging: [boolean, Dispatch<SetStateAction<boolean>>]\n  value: [T, Dispatch<SetStateAction<T>>]\n}\n\ntype Options<T> = Omit<Interact.DraggableOptions, 'onstart' | 'onmove' | 'onend'> & {\n  /**\n   * The initial associated value of this hook.\n   */\n  initialValue: T\n\n  /**\n   * Handler invoked when dragging starts.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when dragging.\n   *\n   * @param dx - The displacement on the x-axis (in pixels) since the last emitted drag move event.\n   * @param dy - The displacement on the y-axis (in pixels) since the last emitted drag move event.\n   */\n  onDragMove?: (dx: number, dy: number) => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * A function that transforms the drag move delta values to the associated value of this hook.\n   *\n   * @param currentValue - The current associated value.\n   * @param dx - The displacement on the x-axis (in pixels) since the last emitted drag move event.\n   * @param dy - The displacement on the y-axis (in pixels) since the last emitted drag move event.\n   *\n   * @returns The transformed value.\n   */\n  transform?: (currentValue: T, dx: number, dy: number) => T\n}\n\n/**\n * Hook for adding effectful dragging interaction to an element.\n *\n * @param targetRef - The reference to the target element to add drag interaction to.\n * @param options - Additional options which include options for `module:interactjs.draggable`.\n * @param deps - Dependencies that trigger this effect.\n *\n * @returns The states created for this effect.\n *\n * @requires react\n * @requires spase\n * @requires interactjs\n */\nexport default function useDragEffect<T = [number, number]>(targetRef: RefObject<HTMLElement>, { onDragStart, onDragMove, onDragEnd, initialValue, transform, ...options }: Options<T>, deps?: DependencyList): ReturnedStates<T> {\n  const valueRef = useRef<T>(initialValue)\n  const [isDragging, setIsDragging] = useState<boolean>(false)\n  const [value, setValue] = useState(valueRef.current)\n\n  /**\n   * Sets the current associated value reference. This reference object is equal to the `value`\n   * state but differs slightly in how they are set. Because states are asynchronous by nature, this\n   * reference object is used to cache time-sensitive value changes while drag event happens.\n   *\n   * @param value - The value to set the associated value to.\n   *\n   * @returns `true` if the value was set, `false` otherwise.\n   */\n  function setValueRef(value: T): boolean {\n    if (_.isEqual(valueRef.current, value)) return false\n    valueRef.current = value\n    return true\n  }\n\n  useEffect(() => {\n    // debug(`Using drag effect for element ${targetRef.current}...`, 'OK', `value=${valueRef.current}`)\n\n    if (targetRef.current && !interact.isSet(targetRef.current)) {\n      // Do not consume states in these listeners as they will remain their initial values within\n      // the scope of the listeners.\n      interact(targetRef.current).draggable({\n        inertia: true,\n        ...options,\n        onstart: () => {\n          console.log('started')\n          setIsDragging(true)\n          onDragStart?.()\n        },\n        onmove: ({ dx, dy }) => {\n          const newValue = transform?.(valueRef.current, dx, dy) ?? [dx, dy] as unknown as T\n\n          if (setValueRef(newValue)) {\n            // debug('Updating value from dragging...', 'OK', newValue)\n            setValue(newValue)\n          }\n\n          onDragMove?.(dx, dy)\n        },\n        onend: () => {\n          console.log('stopped')\n          setIsDragging(false)\n          onDragEnd?.()\n        },\n      })\n    }\n\n    return () => {\n      // debug(`Removing drag effect for element ${targetRef.current}...`, 'OK', `value=${valueRef.current}`)\n\n      if (targetRef.current && interact.isSet(targetRef.current)) {\n        interact(targetRef.current).unset()\n      }\n    }\n  }, [...deps ? deps : []])\n\n  useEffect(() => {\n    if (setValueRef(value)) {\n      // debug('Updating value from externally...', 'OK', value)\n    }\n  }, [value])\n\n  return {\n    isDragging: [isDragging, setIsDragging],\n    value: [value, setValue],\n  }\n}\n"]}
+{"version":3,"file":"useDragEffect.js","sourceRoot":"/","sources":["hooks/useDragEffect.ts"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs'\nimport _ from 'lodash'\nimport { DependencyList, Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from 'react'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : () => {}\n\ntype ReturnedStates<T> = {\n  isDragging: [boolean, Dispatch<SetStateAction<boolean>>]\n  value: [T, Dispatch<SetStateAction<T>>]\n}\n\ntype Options<T> = Omit<Interact.DraggableOptions, 'onstart' | 'onmove' | 'onend'> & {\n  /**\n   * The initial associated value of this hook.\n   */\n  initialValue: T\n\n  /**\n   * Handler invoked when dragging starts.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when dragging.\n   *\n   * @param dx - The displacement on the x-axis (in pixels) since the last emitted drag move event.\n   * @param dy - The displacement on the y-axis (in pixels) since the last emitted drag move event.\n   */\n  onDragMove?: (dx: number, dy: number) => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * A function that transforms the drag move delta values to the associated value of this hook.\n   *\n   * @param currentValue - The current associated value.\n   * @param dx - The displacement on the x-axis (in pixels) since the last emitted drag move event.\n   * @param dy - The displacement on the y-axis (in pixels) since the last emitted drag move event.\n   *\n   * @returns The transformed value.\n   */\n  transform?: (currentValue: T, dx: number, dy: number) => T\n}\n\n/**\n * Hook for adding effectful dragging interaction to an element.\n *\n * @param targetRef - The reference to the target element to add drag interaction to.\n * @param options - Additional options which include options for `module:interactjs.draggable`.\n * @param deps - Dependencies that trigger this effect.\n *\n * @returns The states created for this effect.\n */\nexport default function useDragEffect<T = [number, number]>(targetRef: RefObject<HTMLElement>, { onDragStart, onDragMove, onDragEnd, initialValue, transform, ...options }: Options<T>, deps?: DependencyList): ReturnedStates<T> {\n  const valueRef = useRef<T>(initialValue)\n  const [isDragging, setIsDragging] = useState<boolean>(false)\n  const [value, setValue] = useState(valueRef.current)\n\n  /**\n   * Sets the current associated value reference. This reference object is equal to the `value`\n   * state but differs slightly in how they are set. Because states are asynchronous by nature, this\n   * reference object is used to cache time-sensitive value changes while drag event happens.\n   *\n   * @param value - The value to set the associated value to.\n   *\n   * @returns `true` if the value was set, `false` otherwise.\n   */\n  function setValueRef(value: T): boolean {\n    if (_.isEqual(valueRef.current, value)) return false\n    valueRef.current = value\n    return true\n  }\n\n  useEffect(() => {\n    // debug(`Using drag effect for element ${targetRef.current}...`, 'OK', `value=${valueRef.current}`)\n\n    if (targetRef.current && !interact.isSet(targetRef.current)) {\n      // Do not consume states in these listeners as they will remain their initial values within\n      // the scope of the listeners.\n      interact(targetRef.current).draggable({\n        inertia: true,\n        ...options,\n        onstart: () => {\n          setIsDragging(true)\n          onDragStart?.()\n        },\n        onmove: ({ dx, dy }) => {\n          const newValue = transform?.(valueRef.current, dx, dy) ?? [dx, dy] as unknown as T\n\n          if (setValueRef(newValue)) {\n            // debug('Updating value from dragging...', 'OK', newValue)\n            setValue(newValue)\n          }\n\n          onDragMove?.(dx, dy)\n        },\n        onend: () => {\n          setIsDragging(false)\n          onDragEnd?.()\n        },\n      })\n    }\n\n    return () => {\n      // debug(`Removing drag effect for element ${targetRef.current}...`, 'OK', `value=${valueRef.current}`)\n\n      if (targetRef.current && interact.isSet(targetRef.current)) {\n        interact(targetRef.current).unset()\n      }\n    }\n  }, [...deps ? deps : []])\n\n  useEffect(() => {\n    if (setValueRef(value)) {\n      // debug('Updating value from externally...', 'OK', value)\n    }\n  }, [value])\n\n  return {\n    isDragging: [isDragging, setIsDragging],\n    value: [value, setValue],\n  }\n}\n"]}

package/lib/hooks/useInterval.d.ts

@@ -0,0 +1 @@
+export default function useInterval(handler: () => void, timeout?: number): void;

package/lib/hooks/useInterval.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+function useInterval(handler, timeout) {
+    var handlerRef = (0, react_1.useRef)(undefined);
+    (0, react_1.useEffect)(function () {
+        handlerRef.current = handler;
+    }, [handler]);
+    (0, react_1.useEffect)(function () {
+        if (timeout === undefined)
+            return;
+        var timer = window.setInterval(function () { var _a; return (_a = handlerRef.current) === null || _a === void 0 ? void 0 : _a.call(handlerRef); }, timeout);
+        return function () { return clearInterval(timer); };
+    }, [timeout]);
+}
+exports.default = useInterval;
+//# sourceMappingURL=useInterval.js.map

package/lib/hooks/useInterval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.js","sourceRoot":"/","sources":["hooks/useInterval.ts"],"names":[],"mappings":";;AAAA,+BAAyC;AAEzC,SAAwB,WAAW,CAAC,OAAmB,EAAE,OAAgB;IACvE,IAAM,UAAU,GAAG,IAAA,cAAM,EAA2B,SAAS,CAAC,CAAA;IAE9D,IAAA,iBAAS,EAAC;QACR,UAAU,CAAC,OAAO,GAAG,OAAO,CAAA;IAC9B,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,IAAA,iBAAS,EAAC;QACR,IAAI,OAAO,KAAK,SAAS;YAAE,OAAM;QAEjC,IAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,sBAAM,OAAA,MAAA,UAAU,CAAC,OAAO,+CAAlB,UAAU,CAAY,CAAA,EAAA,EAAE,OAAO,CAAC,CAAA;QACvE,OAAO,cAAM,OAAA,aAAa,CAAC,KAAK,CAAC,EAApB,CAAoB,CAAA;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;AACf,CAAC;AAbD,8BAaC","sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport default function useInterval(handler: () => void, timeout?: number) {\n  const handlerRef = useRef<(() => void) | undefined>(undefined)\n\n  useEffect(() => {\n    handlerRef.current = handler\n  }, [handler])\n\n  useEffect(() => {\n    if (timeout === undefined) return\n\n    const timer = window.setInterval(() => handlerRef.current?.(), timeout)\n    return () => clearInterval(timer)\n  }, [timeout])\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "0.36.0",
+  "version": "0.40.0",
   "description": "A study of styled React components",
   "main": "lib",
   "scripts": {
@@ -42,6 +42,7 @@
     "@types/lodash": "^4.14.177",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
+    "@types/react-transition-group": "^4.4.4",
     "@types/styled-components": "^5.1.15",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.16.3",
@@ -80,6 +81,7 @@
     "dirty-dom": "^7.0.0",
     "interactjs": "^1.10.11",
     "lodash": "^4.17.21",
+    "react-transition-group": "^4.4.2",
     "resize-observer-polyfill": "^1.5.1",
     "spase": "^6.2.0"
   }