etudes 0.42.0 → 0.43.0

package/lib/Panorama.d.ts

@@ -14,7 +14,7 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
     /**
      * The source URL of the image.
      */
-    src: string;
+    src?: string;
     /**
      * A decimal percentage of the component width indicating where 0° should be, i.e. if `zeroAnchor`
      * is `0`, the `angle` would be 0° when the left edge of the image is at the left edge of the

package/lib/Panorama.js

@@ -148,6 +148,6 @@ function Panorama(_a) {
 }
 exports.default = Panorama;
 var StyledImageContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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  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"])));
-var StyledRoot = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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  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"])));
+var StyledRoot = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  height: 100%;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n  width: 100%;\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  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  height: 100%;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n  width: 100%;\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"])));
 var templateObject_1, templateObject_2;
 //# sourceMappingURL=Panorama.js.map

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\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      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"]}
+{"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\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      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  height: 100%;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n  width: 100%;\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/PanoramaSlider.js

@@ -121,6 +121,6 @@ var StyledTrack = styled_components_1.default.div(templateObject_2 || (templateO
 var StyledTrackContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n  height: 100%;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  > div {\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: flex-start;\n    left: 0;\n    overflow: visible;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"], ["\n  box-sizing: border-box;\n  display: block;\n  height: 100%;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  > div {\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: flex-start;\n    left: 0;\n    overflow: visible;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"])));
 var StyledIndicator = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: #fff;\n  border-radius: 2px;\n  bottom: -10px;\n  box-sizing: border-box;\n  display: block;\n  height: 2px;\n  left: 0;\n  margin: 0 auto;\n  opacity: 0;\n  right: 0;\n  transition: opacity .3s ease-out;\n\n  &.dragging {\n    opacity: 1;\n  }\n\n  ", "\n"], ["\n  background: #fff;\n  border-radius: 2px;\n  bottom: -10px;\n  box-sizing: border-box;\n  display: block;\n  height: 2px;\n  left: 0;\n  margin: 0 auto;\n  opacity: 0;\n  right: 0;\n  transition: opacity .3s ease-out;\n\n  &.dragging {\n    opacity: 1;\n  }\n\n  ", "\n"])), function (props) { return props.css; });
 var StyledPanorama = (0, styled_components_1.default)(Panorama_1.default)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) { return props.css; });
-var StyledRoot = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n  flex: 0 0 auto;\n"], ["\n  box-sizing: border-box;\n  display: block;\n  flex: 0 0 auto;\n"])));
+var StyledRoot = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n  flex: 0 0 auto;\n  height: 100%;\n  width: 100%;\n"], ["\n  box-sizing: border-box;\n  display: block;\n  flex: 0 0 auto;\n  height: 100%;\n  width: 100%;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 //# sourceMappingURL=PanoramaSlider.js.map

package/lib/PanoramaSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanoramaSlider.js","sourceRoot":"/","sources":["PanoramaSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport _ from 'lodash'\nimport React, { HTMLAttributes, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport styled, { CSSProp } from 'styled-components'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport Panorama, { Props as PanoramaProps } from './Panorama'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & PanoramaProps & {\n  /**\n   * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of the reticle. 360\n   * indicates the reticle covers the entire image. If this is unspecified, the component will\n   * attempt to automatically calculate the FOV using the `viewportSize` prop.\n   */\n  fov?: number\n\n  /**\n   * Specifies which length (width or height) should be automatically calculated. The counterpart\n   * must be known (if `width` is specified here, the component's height must be known, i.e. it is\n   * specified in the CSS). Defaults to `width`.\n   */\n  autoDimension?: 'width' | 'height'\n\n  /**\n   * Size of the viewport that this component is controlling. A viewport can be thought of as a DOM\n   * element containing an aspect-filled image. This is used to automatically calculate the FOV if\n   * `fov` prop is not specified. If it is, this prop is ignored.\n   */\n  viewportSize?: Size\n\n  /**\n   * Additional CSS to be provided to the internal panorama component.\n   */\n  cssPanorama?: CSSProp<any>\n\n  /**\n   * Additional CSS to be provided to the reticle.\n   */\n  cssReticle?: CSSProp<any>\n\n  /**\n   * Additional CSS to be provided to the track.\n   */\n  cssTrack?: CSSProp<any>\n\n  /**\n   * Additional CSS to be provided to the indicator.\n   */\n  cssIndicator?: CSSProp<any>\n}\n\nexport default function PanoramaSlider({\n  fov,\n  autoDimension = 'width',\n  viewportSize,\n  cssPanorama,\n  cssReticle,\n  cssTrack,\n  cssIndicator,\n  angle = 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  style,\n  ...props\n}: Props) {\n  function getImageAspectRatio(): number {\n    if (!imageSize) return 0\n    const { width, height } = imageSize\n    if (height === 0) return 0\n    return width / height\n  }\n\n  function getReticleWidth(): number {\n    const angle = _.clamp(fov ?? (viewportSize ? (viewportSize.width / (viewportSize.height * aspectRatio)) * 360 : 0), 0, 360)\n    return size.width * (angle / 360)\n  }\n\n  function getAdjustedZeroAnchor() {\n    if (size.width <= 0) return zeroAnchor\n\n    return ((size.width - reticleWidth) * 0.5 + (zeroAnchor * reticleWidth)) / size.width\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n\n  const [imageSize, setImageSize] = useState<Size | undefined>(undefined)\n  const [isDragging, setIsDragging] = useState(false)\n  const [size] = useResizeEffect(rootRef, { onResize })\n\n  const aspectRatio = getImageAspectRatio()\n  const reticleWidth = getReticleWidth()\n  const adjustedZeroAnchor = getAdjustedZeroAnchor()\n\n  return (\n    <StyledRoot ref={rootRef} style={{\n      ...style,\n      ...autoDimension === 'width' ? {\n        width: `${size.height * aspectRatio}px`,\n      } : {\n        height: `${size.width / aspectRatio}px`,\n      },\n    }} {...props}>\n      <StyledPanorama\n        angle={angle}\n        css={cssPanorama}\n        onAngleChange={onAngleChange}\n        onDragEnd={() => {\n          setIsDragging(false)\n          onDragEnd?.()\n        }}\n        onDragStart={() => {\n          setIsDragging(true)\n          onDragStart?.()\n        }}\n        onImageLoadComplete={onImageLoadComplete}\n        onImageLoadError={onImageLoadError}\n        onImageLoadStart={onImageLoadStart}\n        onImageSizeChange={size => setImageSize(size)}\n        onPositionChange={onPositionChange}\n        speed={speed}\n        src={src}\n        style={{ height: '100%', width: '100%' }}\n        zeroAnchor={adjustedZeroAnchor}\n      />\n      <StyledTrackContainer>\n        <div>\n          <StyledTrack className={classNames({ dragging: isDragging })} css={cssTrack}/>\n          <StyledReticle className={classNames({ dragging: isDragging })} css={cssReticle} style={{ width: `${reticleWidth}px` }}/>\n          <StyledTrack className={classNames({ dragging: isDragging })} css={cssTrack}/>\n        </div>\n      </StyledTrackContainer>\n      <StyledIndicator className={classNames({ dragging: isDragging })} style={{ width: `${reticleWidth}px` }} css={cssIndicator}/>\n    </StyledRoot>\n  )\n}\n\nconst StyledReticle = styled.div`\n  background: rgba(0, 0, 0, .3);\n  flex: 0 0 auto;\n  height: 100%;\n  transition-duration: 100ms;\n  transition-property: background;\n  transition-timing-function: ease-out;\n\n  &.dragging {\n    background: rgba(0, 0, 0, 0);\n  }\n\n  ${props => props.css}\n  `\n\nconst StyledTrack = styled.div`\n  background: rgba(0, 0, 0, .7);\n  display: block;\n  flex: 1 0 auto;\n  height: 100%;\n  pointer-events: none;\n\n  ${props => props.css}\n`\n\nconst StyledTrackContainer = styled.div`\n  box-sizing: border-box;\n  display: block;\n  height: 100%;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  > div {\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: flex-start;\n    left: 0;\n    overflow: visible;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n`\n\nconst StyledIndicator = styled.div`\n  background: #fff;\n  border-radius: 2px;\n  bottom: -10px;\n  box-sizing: border-box;\n  display: block;\n  height: 2px;\n  left: 0;\n  margin: 0 auto;\n  opacity: 0;\n  right: 0;\n  transition: opacity .3s ease-out;\n\n  &.dragging {\n    opacity: 1;\n  }\n\n  ${props => props.css}\n`\n\nconst StyledPanorama = styled(Panorama)`\n  ${(props: any) => props.css}\n`\n\nconst StyledRoot = styled.div`\n  box-sizing: border-box;\n  display: block;\n  flex: 0 0 auto;\n`\n"]}
+{"version":3,"file":"PanoramaSlider.js","sourceRoot":"/","sources":["PanoramaSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport _ from 'lodash'\nimport React, { HTMLAttributes, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport styled, { CSSProp } from 'styled-components'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport Panorama, { Props as PanoramaProps } from './Panorama'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & PanoramaProps & {\n  /**\n   * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of the reticle. 360\n   * indicates the reticle covers the entire image. If this is unspecified, the component will\n   * attempt to automatically calculate the FOV using the `viewportSize` prop.\n   */\n  fov?: number\n\n  /**\n   * Specifies which length (width or height) should be automatically calculated. The counterpart\n   * must be known (if `width` is specified here, the component's height must be known, i.e. it is\n   * specified in the CSS). Defaults to `width`.\n   */\n  autoDimension?: 'width' | 'height'\n\n  /**\n   * Size of the viewport that this component is controlling. A viewport can be thought of as a DOM\n   * element containing an aspect-filled image. This is used to automatically calculate the FOV if\n   * `fov` prop is not specified. If it is, this prop is ignored.\n   */\n  viewportSize?: Size\n\n  /**\n   * Additional CSS to be provided to the internal panorama component.\n   */\n  cssPanorama?: CSSProp<any>\n\n  /**\n   * Additional CSS to be provided to the reticle.\n   */\n  cssReticle?: CSSProp<any>\n\n  /**\n   * Additional CSS to be provided to the track.\n   */\n  cssTrack?: CSSProp<any>\n\n  /**\n   * Additional CSS to be provided to the indicator.\n   */\n  cssIndicator?: CSSProp<any>\n}\n\nexport default function PanoramaSlider({\n  fov,\n  autoDimension = 'width',\n  viewportSize,\n  cssPanorama,\n  cssReticle,\n  cssTrack,\n  cssIndicator,\n  angle = 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  style,\n  ...props\n}: Props) {\n  function getImageAspectRatio(): number {\n    if (!imageSize) return 0\n    const { width, height } = imageSize\n    if (height === 0) return 0\n    return width / height\n  }\n\n  function getReticleWidth(): number {\n    const angle = _.clamp(fov ?? (viewportSize ? (viewportSize.width / (viewportSize.height * aspectRatio)) * 360 : 0), 0, 360)\n    return size.width * (angle / 360)\n  }\n\n  function getAdjustedZeroAnchor() {\n    if (size.width <= 0) return zeroAnchor\n\n    return ((size.width - reticleWidth) * 0.5 + (zeroAnchor * reticleWidth)) / size.width\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n\n  const [imageSize, setImageSize] = useState<Size | undefined>(undefined)\n  const [isDragging, setIsDragging] = useState(false)\n  const [size] = useResizeEffect(rootRef, { onResize })\n\n  const aspectRatio = getImageAspectRatio()\n  const reticleWidth = getReticleWidth()\n  const adjustedZeroAnchor = getAdjustedZeroAnchor()\n\n  return (\n    <StyledRoot ref={rootRef} style={{\n      ...style,\n      ...autoDimension === 'width' ? {\n        width: `${size.height * aspectRatio}px`,\n      } : {\n        height: `${size.width / aspectRatio}px`,\n      },\n    }} {...props}>\n      <StyledPanorama\n        angle={angle}\n        css={cssPanorama}\n        onAngleChange={onAngleChange}\n        onDragEnd={() => {\n          setIsDragging(false)\n          onDragEnd?.()\n        }}\n        onDragStart={() => {\n          setIsDragging(true)\n          onDragStart?.()\n        }}\n        onImageLoadComplete={onImageLoadComplete}\n        onImageLoadError={onImageLoadError}\n        onImageLoadStart={onImageLoadStart}\n        onImageSizeChange={size => setImageSize(size)}\n        onPositionChange={onPositionChange}\n        speed={speed}\n        src={src}\n        style={{ height: '100%', width: '100%' }}\n        zeroAnchor={adjustedZeroAnchor}\n      />\n      <StyledTrackContainer>\n        <div>\n          <StyledTrack className={classNames({ dragging: isDragging })} css={cssTrack}/>\n          <StyledReticle className={classNames({ dragging: isDragging })} css={cssReticle} style={{ width: `${reticleWidth}px` }}/>\n          <StyledTrack className={classNames({ dragging: isDragging })} css={cssTrack}/>\n        </div>\n      </StyledTrackContainer>\n      <StyledIndicator className={classNames({ dragging: isDragging })} style={{ width: `${reticleWidth}px` }} css={cssIndicator}/>\n    </StyledRoot>\n  )\n}\n\nconst StyledReticle = styled.div`\n  background: rgba(0, 0, 0, .3);\n  flex: 0 0 auto;\n  height: 100%;\n  transition-duration: 100ms;\n  transition-property: background;\n  transition-timing-function: ease-out;\n\n  &.dragging {\n    background: rgba(0, 0, 0, 0);\n  }\n\n  ${props => props.css}\n  `\n\nconst StyledTrack = styled.div`\n  background: rgba(0, 0, 0, .7);\n  display: block;\n  flex: 1 0 auto;\n  height: 100%;\n  pointer-events: none;\n\n  ${props => props.css}\n`\n\nconst StyledTrackContainer = styled.div`\n  box-sizing: border-box;\n  display: block;\n  height: 100%;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  > div {\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: flex-start;\n    left: 0;\n    overflow: visible;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n`\n\nconst StyledIndicator = styled.div`\n  background: #fff;\n  border-radius: 2px;\n  bottom: -10px;\n  box-sizing: border-box;\n  display: block;\n  height: 2px;\n  left: 0;\n  margin: 0 auto;\n  opacity: 0;\n  right: 0;\n  transition: opacity .3s ease-out;\n\n  &.dragging {\n    opacity: 1;\n  }\n\n  ${props => props.css}\n`\n\nconst StyledPanorama = styled(Panorama)`\n  ${(props: any) => props.css}\n`\n\nconst StyledRoot = styled.div`\n  box-sizing: border-box;\n  display: block;\n  flex: 0 0 auto;\n  height: 100%;\n  width: 100%;\n`\n"]}

package/lib/RangeSlider.d.ts

@@ -9,7 +9,6 @@ export declare type KnobCSSProps = Readonly<{
     isReleasing: boolean;
     isDisabled: boolean;
 }>;
-export declare type GutterCSSProps = Readonly<{}>;
 export declare type LabelCSSProps = Readonly<{
     knobRadius: number;
     orientation: Orientation;

package/lib/RangeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","sourceRoot":"/","sources":["RangeSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs'\nimport React, { createRef, CSSProperties, PureComponent } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css } from 'styled-components'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation, Range } from './types'\n\nexport type KnobCSSProps = Readonly<{\n  radius: number\n  tintColor: string\n  hitboxPadding: number\n  isDragging: boolean\n  isReleasing: boolean\n  isDisabled: boolean\n}>\n\nexport type GutterCSSProps = Readonly<{\n}>\n\nexport type LabelCSSProps = Readonly<{\n  knobRadius: number\n  orientation: Orientation\n  isDragging: boolean\n  isReleasing: boolean\n}>\n\nexport type HighlightCSSProps = Readonly<{\n  tintColor: string\n  isDragging: boolean\n  isReleasing: boolean\n}>\n\nexport interface Props {\n  className?: string\n  style: CSSProperties\n  defaultRange?: Range\n  areLabelsVisible: boolean\n  decimalPlaces: number\n  hitboxPadding: number\n  knobRadius: number\n  max: number\n  min: number\n  steps: number\n  orientation: Orientation\n  tintColor: string\n  onRangeChange: (range: Range) => void\n  cssKnob: ExtendedCSSFunction<KnobCSSProps>\n  cssHighlight: ExtendedCSSFunction<HighlightCSSProps>\n  cssLabel: ExtendedCSSFunction<LabelCSSProps>\n  cssGutter: ExtendedCSSFunction\n}\n\nexport interface State {\n  range: Range\n  isDraggingStartingKnob: boolean\n  isReleasingStartingKnob: boolean\n  isDraggingEndingKnob: boolean\n  isReleasingEndingKnob: boolean\n}\n\nexport default class RangeSlider extends PureComponent<Props, State> {\n  static defaultProps = {\n    style: {},\n    areLabelsVisible: true,\n    decimalPlaces: 2,\n    hitboxPadding: 20,\n    knobRadius: 10,\n    steps: -1,\n    tintColor: '#fff',\n    orientation: 'vertical',\n    onRangeChange: () => {},\n    cssGutter: () => css``,\n    cssHighlight: () => css``,\n    cssKnob: () => css``,\n    cssLabel: () => css``,\n  }\n\n  nodeRefs = {\n    root: createRef<HTMLDivElement>(),\n    knobA: createRef<HTMLDivElement>(),\n    knobB: createRef<HTMLDivElement>(),\n  }\n\n  constructor(props: Props) {\n    super(props)\n\n    this.state = {\n      range: props.defaultRange ?? [props.min, props.max],\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: false,\n    }\n  }\n\n  get rect(): Rect {\n    return Rect.from(this.nodeRefs.root.current) ?? new Rect()\n  }\n\n  get highlightLength(): number {\n    const [valA, valB] = this.state.range\n    const a = this.getDisplacementByValue(valA)\n    const b = this.getDisplacementByValue(valB)\n    return (b - a)\n  }\n\n  get breakpoints(): readonly number[] {\n    const { min, max, steps } = this.props\n    const breakpoints = [min]\n\n    for (let i = 0; i < steps; i++) {\n      breakpoints.push(min + (i + 1) * (max - min) / (1 + steps))\n    }\n\n    breakpoints.push(max)\n\n    return breakpoints\n  }\n\n  componentDidMount() {\n    this.reconfigureInteractivityIfNeeded()\n\n    if (this.props.steps < 0) {\n      this.props.onRangeChange(this.state.range)\n    }\n    else {\n      this.snapToClosestBreakpoint()\n    }\n\n    this.forceUpdate()\n  }\n\n  componentDidUpdate(prevProps: Props, prevState: State) {\n    if (!this.areRangesEqual(prevState.range, this.state.range)) {\n      this.props.onRangeChange(this.state.range)\n    }\n\n    if (prevProps.orientation !== this.props.orientation) {\n      this.forceUpdate()\n    }\n\n    this.reconfigureInteractivityIfNeeded()\n  }\n\n  render() {\n    return (\n      <StyledRoot\n        className={this.props.className}\n        orientation={this.props.orientation}\n        ref={this.nodeRefs.root}\n        style={this.props.style}\n      >\n        <StyledGutter\n          extendedCSS={this.props.cssGutter}\n        />\n        <StyledKnob\n          ref={this.nodeRefs.knobA}\n          radius={this.props.knobRadius}\n          tintColor={this.props.tintColor}\n          hitboxPadding={this.props.hitboxPadding}\n          isDragging={this.state.isDraggingStartingKnob}\n          isReleasing={this.state.isReleasingStartingKnob}\n          isDisabled={(this.state.range[1] === this.props.min) && (this.state.range[0] === this.props.min)}\n          style={this.props.orientation === 'horizontal' ? {\n            marginLeft: `${this.getDisplacementByValue(this.state.range[0])}px`,\n          } : {\n            marginTop: `${this.getDisplacementByValue(this.state.range[0])}px`,\n          }}\n          extendedCSS={this.props.cssKnob}\n        />\n        {this.props.areLabelsVisible && (\n          <StyledLabel\n            knobRadius={this.props.knobRadius}\n            orientation={this.props.orientation}\n            isDragging={this.state.isDraggingStartingKnob}\n            isReleasing={this.state.isReleasingStartingKnob}\n            style={this.props.orientation === 'horizontal' ? {\n              transform: `translate3d(calc(-50% + ${this.getDisplacementByValue(this.state.range[0])}px), 0, 0)`,\n            } : {\n              transform: `translate3d(0, calc(-50% + ${this.getDisplacementByValue(this.state.range[0])}px), 0)`,\n            }}\n            extendedCSS={this.props.cssLabel}\n          >\n            {Number(this.state.range[0].toFixed(this.props.decimalPlaces)).toLocaleString()}\n          </StyledLabel>\n        )}\n        <StyledHighlight\n          tintColor={this.props.tintColor}\n          isDragging={this.state.isDraggingStartingKnob || this.state.isDraggingEndingKnob}\n          isReleasing={this.state.isReleasingStartingKnob || this.state.isReleasingEndingKnob}\n          style={this.props.orientation === 'horizontal' ? {\n            width: `${this.highlightLength}px`,\n            transform: `translate3d(${this.getDisplacementByValue(this.state.range[0])}px, 0, 0)`,\n          } : {\n            height: `${this.highlightLength}px`,\n            transform: `translate3d(0, ${this.getDisplacementByValue(this.state.range[0])}px, 0)`,\n          }}\n          extendedCSS={this.props.cssHighlight}\n        />\n        <StyledKnob\n          ref={this.nodeRefs.knobB}\n          radius={this.props.knobRadius}\n          tintColor={this.props.tintColor}\n          hitboxPadding={this.props.hitboxPadding}\n          isDragging={this.state.isDraggingEndingKnob}\n          isReleasing={this.state.isReleasingEndingKnob}\n          isDisabled={(this.state.range[1] === this.props.max) && (this.state.range[0] === this.props.max)}\n          style={this.props.orientation === 'horizontal' ? {\n            marginLeft: `${this.getDisplacementByValue(this.state.range[1])}px`,\n          } : {\n            marginTop: `${this.getDisplacementByValue(this.state.range[1])}px`,\n          }}\n          extendedCSS={this.props.cssKnob}\n        />\n        {this.props.areLabelsVisible && (\n          <StyledLabel\n            knobRadius={this.props.knobRadius}\n            orientation={this.props.orientation}\n            isDragging={this.state.isDraggingStartingKnob || this.state.isDraggingEndingKnob}\n            isReleasing={this.state.isReleasingStartingKnob || this.state.isReleasingEndingKnob}\n            style={this.props.orientation === 'horizontal' ? {\n              transform: `translate3d(calc(-50% + ${this.getDisplacementByValue(this.state.range[1])}px), 0, 0)`,\n            } : {\n              transform: `translate3d(0, calc(-50% + ${this.getDisplacementByValue(this.state.range[1])}px), 0)`,\n            }}\n            extendedCSS={this.props.cssLabel}\n          >\n            {Number(this.state.range[1].toFixed(this.props.decimalPlaces)).toLocaleString()}\n          </StyledLabel>\n        )}\n      </StyledRoot>\n    )\n  }\n\n  private reconfigureInteractivityIfNeeded() {\n    const knobANode = this.nodeRefs.knobA.current\n    const knobBNode = this.nodeRefs.knobB.current\n\n    if (knobANode && !interact.isSet(knobANode)) {\n      interact(knobANode).draggable({\n        inertia: true,\n        onstart: () => this.onKnobADragStart(),\n        onmove: ({ dx, dy }) => this.onKnobADragMove(this.props.orientation === 'horizontal' ? dx : dy),\n        onend: () => this.onKnobADragEnd(),\n      })\n    }\n\n    if (knobBNode && !interact.isSet(knobBNode)) {\n      interact(knobBNode).draggable({\n        inertia: true,\n        onstart: () => this.onKnobBDragStart(),\n        onmove: ({ dx, dy }) => this.onKnobBDragMove(this.props.orientation === 'horizontal' ? dx : dy),\n        onend: () => this.onKnobBDragEnd(),\n      })\n    }\n  }\n\n  private snapToClosestBreakpoint() {\n    if (this.props.steps < 0) return\n\n    this.setState({\n      range: [this.getClosestSteppedValueOfValue(this.state.range[0]), this.getClosestSteppedValueOfValue(this.state.range[1])],\n    })\n  }\n\n  private areRangesEqual(range1: Range, range2: Range): boolean {\n    if (!range1) return false\n    if (!range2) return false\n    if (range1[0] !== range2[0]) return false\n    if (range1[1] !== range2[1]) return false\n    return true\n  }\n\n  private getPositionByValue(value: number): number {\n    const { min, max } = this.props\n    return (value - min) / (max - min)\n  }\n\n  private getDisplacementByPosition(position: number): number {\n    if (this.props.orientation === 'horizontal') {\n      return position * this.rect.width\n    }\n    else {\n      return position * this.rect.height\n    }\n  }\n\n  private getDisplacementByValue(value: number): number {\n    const position = this.getPositionByValue(value)\n    return this.getDisplacementByPosition(position)\n  }\n\n  private getPositionByDisplacement(displacement: number): number {\n    if (this.props.orientation === 'horizontal') {\n      return displacement / this.rect.width\n    }\n    else {\n      return displacement / this.rect.height\n    }\n  }\n\n  private getValueByPosition(position: number): number {\n    const { min, max } = this.props\n    return (position * (max - min)) + min\n  }\n\n  private getClosestSteppedValueOfValue(value: number): number {\n    const breakpoints = this.breakpoints\n    const n = breakpoints.length\n    let idx = 0\n    let diff = Infinity\n\n    for (let i = 0; i < n; i++) {\n      const t = breakpoints[i]\n      const d = Math.abs(value - t)\n\n      if (d < diff) {\n        diff = d\n        idx = i\n      }\n    }\n\n    return breakpoints[idx]\n  }\n\n  private onKnobADragStart() {\n    this.setState({\n      isDraggingStartingKnob: true,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: false,\n    })\n  }\n\n  private onKnobADragEnd() {\n    this.setState({\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: true,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: false,\n    })\n\n    this.snapToClosestBreakpoint()\n  }\n\n  private onKnobADragMove(delta: number) {\n    const [valA, valB] = this.state.range\n    const min = this.getDisplacementByValue(this.props.min)\n    const max = this.getDisplacementByValue(valB)\n    const curr = this.getDisplacementByValue(valA)\n    const next = Math.max(min, Math.min(max, curr + delta))\n    const nextPos = this.getPositionByDisplacement(next)\n    const nextVal = this.getValueByPosition(nextPos)\n\n    this.setState({\n      isDraggingStartingKnob: true,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: false,\n      range: [nextVal, valB],\n    })\n  }\n\n  private onKnobBDragStart() {\n    this.setState({\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: true,\n      isReleasingEndingKnob: false,\n    })\n  }\n\n  private onKnobBDragEnd() {\n    this.setState({\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: true,\n    })\n\n    this.snapToClosestBreakpoint()\n  }\n\n  private onKnobBDragMove(delta: number) {\n    const [valA, valB] = this.state.range\n    const min = this.getDisplacementByValue(valA)\n    const max = this.getDisplacementByValue(this.props.max)\n    const curr = this.getDisplacementByValue(valB)\n    const next = Math.max(min, Math.min(max, curr + delta))\n    const nextPos = this.getPositionByDisplacement(next)\n    const nextVal = this.getValueByPosition(nextPos)\n\n    this.setState({\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: true,\n      isReleasingEndingKnob: false,\n      range: [valA, nextVal],\n    })\n  }\n}\n\nconst StyledHighlight = styled.div<HighlightCSSProps & ExtendedCSSProps<HighlightCSSProps>>`\n  top: 0;\n  left: 0;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  background: ${props => props.tintColor};\n  transition-property: ${props => props.isReleasing ? 'opacity, width, transform' : 'opacity'};\n  transition-duration: 100ms;\n  transition-timing-function: ease-out;\n  will-change: opacity, width, transform;\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledLabel = styled.span<LabelCSSProps & ExtendedCSSProps<LabelCSSProps>>`\n  background: transparent;\n  color: #fff;\n  left: ${props => props.orientation === 'horizontal' ? '0' : `${props.knobRadius}px`};\n  padding: 10px;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n  top: ${props => props.orientation === 'horizontal' ? `${props.knobRadius}px` : '0'};\n  transition-duration: 100ms;\n  transition-property: ${props => props.isReleasing ? 'opacity, transform' : 'opacity'};\n  transition-timing-function: ease-out;\n  user-select: none;\n  will-change: opacity, transform;\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledKnob = styled.div<KnobCSSProps & ExtendedCSSProps<KnobCSSProps>>`\n  background: transparent;\n  box-sizing: border-box;\n  display: block;\n  height: ${props => (props.radius + props.hitboxPadding) * 2}px;\n  left: ${props => -props.radius - props.hitboxPadding}px;\n  padding: ${props => props.hitboxPadding}px;\n  pointer-events: ${props => props.isDisabled ? 'none' : 'auto'};\n  position: absolute;\n  top: ${props => -props.radius - props.hitboxPadding}px;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: ${props => props.isReleasing ? 'background, opacity, margin, transform' : 'background, opacity, transform'};\n  transition-timing-function: ease-out;\n  width: ${props => (props.radius + props.hitboxPadding) * 2}px;\n  will-change: opacity, transform, margin, background;\n  z-index: 1;\n\n  &::after {\n    content: '';\n    border-radius: 100%;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto;\n    position: absolute;\n    width: ${props => props.radius * 2}px;\n    height: ${props => props.radius * 2}px;\n    background: ${props => props.tintColor};\n  }\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledGutter = styled.div<GutterCSSProps & ExtendedCSSProps<GutterCSSProps>>`\n  display: block;\n  top: 0;\n  left: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, .2);\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledRoot = styled.div<{\n  orientation: Orientation\n}>`\n  display: flex;\n  flex: 0 0 auto;\n  height: ${props => props.orientation === 'horizontal' ? '2px' : '300px'};\n  position: relative;\n  width: ${props => props.orientation === 'horizontal' ? '300px' : '2px'};\n`\n"]}
+{"version":3,"file":"RangeSlider.js","sourceRoot":"/","sources":["RangeSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs'\nimport React, { createRef, CSSProperties, PureComponent } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css } from 'styled-components'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation, Range } from './types'\n\nexport type KnobCSSProps = Readonly<{\n  radius: number\n  tintColor: string\n  hitboxPadding: number\n  isDragging: boolean\n  isReleasing: boolean\n  isDisabled: boolean\n}>\n\nexport type LabelCSSProps = Readonly<{\n  knobRadius: number\n  orientation: Orientation\n  isDragging: boolean\n  isReleasing: boolean\n}>\n\nexport type HighlightCSSProps = Readonly<{\n  tintColor: string\n  isDragging: boolean\n  isReleasing: boolean\n}>\n\nexport interface Props {\n  className?: string\n  style: CSSProperties\n  defaultRange?: Range\n  areLabelsVisible: boolean\n  decimalPlaces: number\n  hitboxPadding: number\n  knobRadius: number\n  max: number\n  min: number\n  steps: number\n  orientation: Orientation\n  tintColor: string\n  onRangeChange: (range: Range) => void\n  cssKnob: ExtendedCSSFunction<KnobCSSProps>\n  cssHighlight: ExtendedCSSFunction<HighlightCSSProps>\n  cssLabel: ExtendedCSSFunction<LabelCSSProps>\n  cssGutter: ExtendedCSSFunction\n}\n\nexport interface State {\n  range: Range\n  isDraggingStartingKnob: boolean\n  isReleasingStartingKnob: boolean\n  isDraggingEndingKnob: boolean\n  isReleasingEndingKnob: boolean\n}\n\nexport default class RangeSlider extends PureComponent<Props, State> {\n  static defaultProps = {\n    style: {},\n    areLabelsVisible: true,\n    decimalPlaces: 2,\n    hitboxPadding: 20,\n    knobRadius: 10,\n    steps: -1,\n    tintColor: '#fff',\n    orientation: 'vertical',\n    onRangeChange: () => {},\n    cssGutter: () => css``,\n    cssHighlight: () => css``,\n    cssKnob: () => css``,\n    cssLabel: () => css``,\n  }\n\n  nodeRefs = {\n    root: createRef<HTMLDivElement>(),\n    knobA: createRef<HTMLDivElement>(),\n    knobB: createRef<HTMLDivElement>(),\n  }\n\n  constructor(props: Props) {\n    super(props)\n\n    this.state = {\n      range: props.defaultRange ?? [props.min, props.max],\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: false,\n    }\n  }\n\n  get rect(): Rect {\n    return Rect.from(this.nodeRefs.root.current) ?? new Rect()\n  }\n\n  get highlightLength(): number {\n    const [valA, valB] = this.state.range\n    const a = this.getDisplacementByValue(valA)\n    const b = this.getDisplacementByValue(valB)\n    return (b - a)\n  }\n\n  get breakpoints(): readonly number[] {\n    const { min, max, steps } = this.props\n    const breakpoints = [min]\n\n    for (let i = 0; i < steps; i++) {\n      breakpoints.push(min + (i + 1) * (max - min) / (1 + steps))\n    }\n\n    breakpoints.push(max)\n\n    return breakpoints\n  }\n\n  componentDidMount() {\n    this.reconfigureInteractivityIfNeeded()\n\n    if (this.props.steps < 0) {\n      this.props.onRangeChange(this.state.range)\n    }\n    else {\n      this.snapToClosestBreakpoint()\n    }\n\n    this.forceUpdate()\n  }\n\n  componentDidUpdate(prevProps: Props, prevState: State) {\n    if (!this.areRangesEqual(prevState.range, this.state.range)) {\n      this.props.onRangeChange(this.state.range)\n    }\n\n    if (prevProps.orientation !== this.props.orientation) {\n      this.forceUpdate()\n    }\n\n    this.reconfigureInteractivityIfNeeded()\n  }\n\n  render() {\n    return (\n      <StyledRoot\n        className={this.props.className}\n        orientation={this.props.orientation}\n        ref={this.nodeRefs.root}\n        style={this.props.style}\n      >\n        <StyledGutter\n          extendedCSS={this.props.cssGutter}\n        />\n        <StyledKnob\n          ref={this.nodeRefs.knobA}\n          radius={this.props.knobRadius}\n          tintColor={this.props.tintColor}\n          hitboxPadding={this.props.hitboxPadding}\n          isDragging={this.state.isDraggingStartingKnob}\n          isReleasing={this.state.isReleasingStartingKnob}\n          isDisabled={(this.state.range[1] === this.props.min) && (this.state.range[0] === this.props.min)}\n          style={this.props.orientation === 'horizontal' ? {\n            marginLeft: `${this.getDisplacementByValue(this.state.range[0])}px`,\n          } : {\n            marginTop: `${this.getDisplacementByValue(this.state.range[0])}px`,\n          }}\n          extendedCSS={this.props.cssKnob}\n        />\n        {this.props.areLabelsVisible && (\n          <StyledLabel\n            knobRadius={this.props.knobRadius}\n            orientation={this.props.orientation}\n            isDragging={this.state.isDraggingStartingKnob}\n            isReleasing={this.state.isReleasingStartingKnob}\n            style={this.props.orientation === 'horizontal' ? {\n              transform: `translate3d(calc(-50% + ${this.getDisplacementByValue(this.state.range[0])}px), 0, 0)`,\n            } : {\n              transform: `translate3d(0, calc(-50% + ${this.getDisplacementByValue(this.state.range[0])}px), 0)`,\n            }}\n            extendedCSS={this.props.cssLabel}\n          >\n            {Number(this.state.range[0].toFixed(this.props.decimalPlaces)).toLocaleString()}\n          </StyledLabel>\n        )}\n        <StyledHighlight\n          tintColor={this.props.tintColor}\n          isDragging={this.state.isDraggingStartingKnob || this.state.isDraggingEndingKnob}\n          isReleasing={this.state.isReleasingStartingKnob || this.state.isReleasingEndingKnob}\n          style={this.props.orientation === 'horizontal' ? {\n            width: `${this.highlightLength}px`,\n            transform: `translate3d(${this.getDisplacementByValue(this.state.range[0])}px, 0, 0)`,\n          } : {\n            height: `${this.highlightLength}px`,\n            transform: `translate3d(0, ${this.getDisplacementByValue(this.state.range[0])}px, 0)`,\n          }}\n          extendedCSS={this.props.cssHighlight}\n        />\n        <StyledKnob\n          ref={this.nodeRefs.knobB}\n          radius={this.props.knobRadius}\n          tintColor={this.props.tintColor}\n          hitboxPadding={this.props.hitboxPadding}\n          isDragging={this.state.isDraggingEndingKnob}\n          isReleasing={this.state.isReleasingEndingKnob}\n          isDisabled={(this.state.range[1] === this.props.max) && (this.state.range[0] === this.props.max)}\n          style={this.props.orientation === 'horizontal' ? {\n            marginLeft: `${this.getDisplacementByValue(this.state.range[1])}px`,\n          } : {\n            marginTop: `${this.getDisplacementByValue(this.state.range[1])}px`,\n          }}\n          extendedCSS={this.props.cssKnob}\n        />\n        {this.props.areLabelsVisible && (\n          <StyledLabel\n            knobRadius={this.props.knobRadius}\n            orientation={this.props.orientation}\n            isDragging={this.state.isDraggingStartingKnob || this.state.isDraggingEndingKnob}\n            isReleasing={this.state.isReleasingStartingKnob || this.state.isReleasingEndingKnob}\n            style={this.props.orientation === 'horizontal' ? {\n              transform: `translate3d(calc(-50% + ${this.getDisplacementByValue(this.state.range[1])}px), 0, 0)`,\n            } : {\n              transform: `translate3d(0, calc(-50% + ${this.getDisplacementByValue(this.state.range[1])}px), 0)`,\n            }}\n            extendedCSS={this.props.cssLabel}\n          >\n            {Number(this.state.range[1].toFixed(this.props.decimalPlaces)).toLocaleString()}\n          </StyledLabel>\n        )}\n      </StyledRoot>\n    )\n  }\n\n  private reconfigureInteractivityIfNeeded() {\n    const knobANode = this.nodeRefs.knobA.current\n    const knobBNode = this.nodeRefs.knobB.current\n\n    if (knobANode && !interact.isSet(knobANode)) {\n      interact(knobANode).draggable({\n        inertia: true,\n        onstart: () => this.onKnobADragStart(),\n        onmove: ({ dx, dy }) => this.onKnobADragMove(this.props.orientation === 'horizontal' ? dx : dy),\n        onend: () => this.onKnobADragEnd(),\n      })\n    }\n\n    if (knobBNode && !interact.isSet(knobBNode)) {\n      interact(knobBNode).draggable({\n        inertia: true,\n        onstart: () => this.onKnobBDragStart(),\n        onmove: ({ dx, dy }) => this.onKnobBDragMove(this.props.orientation === 'horizontal' ? dx : dy),\n        onend: () => this.onKnobBDragEnd(),\n      })\n    }\n  }\n\n  private snapToClosestBreakpoint() {\n    if (this.props.steps < 0) return\n\n    this.setState({\n      range: [this.getClosestSteppedValueOfValue(this.state.range[0]), this.getClosestSteppedValueOfValue(this.state.range[1])],\n    })\n  }\n\n  private areRangesEqual(range1: Range, range2: Range): boolean {\n    if (!range1) return false\n    if (!range2) return false\n    if (range1[0] !== range2[0]) return false\n    if (range1[1] !== range2[1]) return false\n    return true\n  }\n\n  private getPositionByValue(value: number): number {\n    const { min, max } = this.props\n    return (value - min) / (max - min)\n  }\n\n  private getDisplacementByPosition(position: number): number {\n    if (this.props.orientation === 'horizontal') {\n      return position * this.rect.width\n    }\n    else {\n      return position * this.rect.height\n    }\n  }\n\n  private getDisplacementByValue(value: number): number {\n    const position = this.getPositionByValue(value)\n    return this.getDisplacementByPosition(position)\n  }\n\n  private getPositionByDisplacement(displacement: number): number {\n    if (this.props.orientation === 'horizontal') {\n      return displacement / this.rect.width\n    }\n    else {\n      return displacement / this.rect.height\n    }\n  }\n\n  private getValueByPosition(position: number): number {\n    const { min, max } = this.props\n    return (position * (max - min)) + min\n  }\n\n  private getClosestSteppedValueOfValue(value: number): number {\n    const breakpoints = this.breakpoints\n    const n = breakpoints.length\n    let idx = 0\n    let diff = Infinity\n\n    for (let i = 0; i < n; i++) {\n      const t = breakpoints[i]\n      const d = Math.abs(value - t)\n\n      if (d < diff) {\n        diff = d\n        idx = i\n      }\n    }\n\n    return breakpoints[idx]\n  }\n\n  private onKnobADragStart() {\n    this.setState({\n      isDraggingStartingKnob: true,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: false,\n    })\n  }\n\n  private onKnobADragEnd() {\n    this.setState({\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: true,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: false,\n    })\n\n    this.snapToClosestBreakpoint()\n  }\n\n  private onKnobADragMove(delta: number) {\n    const [valA, valB] = this.state.range\n    const min = this.getDisplacementByValue(this.props.min)\n    const max = this.getDisplacementByValue(valB)\n    const curr = this.getDisplacementByValue(valA)\n    const next = Math.max(min, Math.min(max, curr + delta))\n    const nextPos = this.getPositionByDisplacement(next)\n    const nextVal = this.getValueByPosition(nextPos)\n\n    this.setState({\n      isDraggingStartingKnob: true,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: false,\n      range: [nextVal, valB],\n    })\n  }\n\n  private onKnobBDragStart() {\n    this.setState({\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: true,\n      isReleasingEndingKnob: false,\n    })\n  }\n\n  private onKnobBDragEnd() {\n    this.setState({\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: true,\n    })\n\n    this.snapToClosestBreakpoint()\n  }\n\n  private onKnobBDragMove(delta: number) {\n    const [valA, valB] = this.state.range\n    const min = this.getDisplacementByValue(valA)\n    const max = this.getDisplacementByValue(this.props.max)\n    const curr = this.getDisplacementByValue(valB)\n    const next = Math.max(min, Math.min(max, curr + delta))\n    const nextPos = this.getPositionByDisplacement(next)\n    const nextVal = this.getValueByPosition(nextPos)\n\n    this.setState({\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: true,\n      isReleasingEndingKnob: false,\n      range: [valA, nextVal],\n    })\n  }\n}\n\nconst StyledHighlight = styled.div<HighlightCSSProps & ExtendedCSSProps<HighlightCSSProps>>`\n  top: 0;\n  left: 0;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  background: ${props => props.tintColor};\n  transition-property: ${props => props.isReleasing ? 'opacity, width, transform' : 'opacity'};\n  transition-duration: 100ms;\n  transition-timing-function: ease-out;\n  will-change: opacity, width, transform;\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledLabel = styled.span<LabelCSSProps & ExtendedCSSProps<LabelCSSProps>>`\n  background: transparent;\n  color: #fff;\n  left: ${props => props.orientation === 'horizontal' ? '0' : `${props.knobRadius}px`};\n  padding: 10px;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n  top: ${props => props.orientation === 'horizontal' ? `${props.knobRadius}px` : '0'};\n  transition-duration: 100ms;\n  transition-property: ${props => props.isReleasing ? 'opacity, transform' : 'opacity'};\n  transition-timing-function: ease-out;\n  user-select: none;\n  will-change: opacity, transform;\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledKnob = styled.div<KnobCSSProps & ExtendedCSSProps<KnobCSSProps>>`\n  background: transparent;\n  box-sizing: border-box;\n  display: block;\n  height: ${props => (props.radius + props.hitboxPadding) * 2}px;\n  left: ${props => -props.radius - props.hitboxPadding}px;\n  padding: ${props => props.hitboxPadding}px;\n  pointer-events: ${props => props.isDisabled ? 'none' : 'auto'};\n  position: absolute;\n  top: ${props => -props.radius - props.hitboxPadding}px;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: ${props => props.isReleasing ? 'background, opacity, margin, transform' : 'background, opacity, transform'};\n  transition-timing-function: ease-out;\n  width: ${props => (props.radius + props.hitboxPadding) * 2}px;\n  will-change: opacity, transform, margin, background;\n  z-index: 1;\n\n  &::after {\n    content: '';\n    border-radius: 100%;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto;\n    position: absolute;\n    width: ${props => props.radius * 2}px;\n    height: ${props => props.radius * 2}px;\n    background: ${props => props.tintColor};\n  }\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledGutter = styled.div<ExtendedCSSProps<any>>`\n  display: block;\n  top: 0;\n  left: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, .2);\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledRoot = styled.div<{\n  orientation: Orientation\n}>`\n  display: flex;\n  flex: 0 0 auto;\n  height: ${props => props.orientation === 'horizontal' ? '2px' : '300px'};\n  position: relative;\n  width: ${props => props.orientation === 'horizontal' ? '300px' : '2px'};\n`\n"]}

package/lib/RotatingGallery.js

@@ -89,6 +89,6 @@ function RotatingGallery(_a) {
 }
 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.cssEntering; }, function (props) { return props.cssEntered; }, function (props) { return props.cssExiting; }, function (props) { return props.cssExited; });
-var StyledRoot = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var StyledRoot = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  position: relative;\n  width: 100%;\n"], ["\n  height: 100%;\n  position: relative;\n  width: 100%;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 //# sourceMappingURL=RotatingGallery.js.map

package/lib/RotatingGallery.js.map

@@ -1 +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). Specifying `NaN` or a negative number will prevent the component from automatically\n   * rotating.\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  cssDefault?: 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  cssEntering?: 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  cssEntered?: 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  cssExiting?: 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  cssExited?: 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,\n  transitionDuration = 500,\n  srcs = [],\n  cssDefault = css`\n    transition-property: opacity;\n    transition-timing-function: ease-out;\n  `,\n  cssEntering = css`\n    opacity: 1;\n  `,\n  cssEntered,\n  cssExiting = css`\n    opacity: 0;\n  `,\n  cssExited,\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={cssDefault}\n              cssEntering={cssEntering ?? cssEntered}\n              cssEntered={cssEntered ?? cssEntering}\n              cssExiting={cssExiting ?? cssExited}\n              cssExited={cssExited ?? cssExiting}\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  cssEntering: Props['cssEntering']\n  cssEntered: Props['cssEntered']\n  cssExiting: Props['cssExiting']\n  cssExited: Props['cssExited']\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.cssEntering}\n  }\n\n  &.entered {\n    ${props => props.cssEntered}\n  }\n\n  &.exiting {\n    ${props => props.cssExiting}\n  }\n\n  &.exited {\n    ${props => props.cssExited}\n  }\n`\n\nconst StyledRoot = styled.div`\n  position: relative;\n`\n"]}
+{"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). Specifying `NaN` or a negative number will prevent the component from automatically\n   * rotating.\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  cssDefault?: 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  cssEntering?: 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  cssEntered?: 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  cssExiting?: 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  cssExited?: 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,\n  transitionDuration = 500,\n  srcs = [],\n  cssDefault = css`\n    transition-property: opacity;\n    transition-timing-function: ease-out;\n  `,\n  cssEntering = css`\n    opacity: 1;\n  `,\n  cssEntered,\n  cssExiting = css`\n    opacity: 0;\n  `,\n  cssExited,\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={cssDefault}\n              cssEntering={cssEntering ?? cssEntered}\n              cssEntered={cssEntered ?? cssEntering}\n              cssExiting={cssExiting ?? cssExited}\n              cssExited={cssExited ?? cssExiting}\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  cssEntering: Props['cssEntering']\n  cssEntered: Props['cssEntered']\n  cssExiting: Props['cssExiting']\n  cssExited: Props['cssExited']\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.cssEntering}\n  }\n\n  &.entered {\n    ${props => props.cssEntered}\n  }\n\n  &.exiting {\n    ${props => props.cssExiting}\n  }\n\n  &.exited {\n    ${props => props.cssExited}\n  }\n`\n\nconst StyledRoot = styled.div`\n  height: 100%;\n  position: relative;\n  width: 100%;\n`\n"]}

package/lib/hooks/useLoadImageEffect.d.ts

@@ -23,5 +23,5 @@ declare type Options = {
      */
     onImageSizeChange?: (size?: Size) => void;
 };
-export default function useLoadImageEffect(src: string, { onImageLoadComplete, onImageLoadError, onImageSizeChange }?: Options, deps?: DependencyList): ReturnedStates;
+export default function useLoadImageEffect(src?: string, { onImageLoadComplete, onImageLoadError, onImageSizeChange }?: Options, deps?: DependencyList): ReturnedStates;
 export {};

package/lib/hooks/useLoadImageEffect.js

@@ -39,6 +39,8 @@ function useLoadImageEffect(src, _a, deps) {
     var _c = __read((0, react_1.useState)(true), 2), isLoading = _c[0], setIsLoading = _c[1];
     var _d = __read((0, react_1.useState)(undefined), 2), imageSize = _d[0], setImageSize = _d[1];
     (0, react_1.useEffect)(function () {
+        if (!src)
+            return;
         setIsLoading(true);
         imageRef.current = new Image();
         imageRef.current.src = src;

package/lib/hooks/useLoadImageEffect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLoadImageEffect.js","sourceRoot":"/","sources":["hooks/useLoadImageEffect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+BAA6F;AAC7F,+BAA4B;AA8B5B,SAAS,YAAY,CAAC,YAA8B;IAClD,OAAO,IAAI,YAAI,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAA;AAC5D,CAAC;AAED,SAAwB,kBAAkB,CAAC,GAAW,EAAE,EAA0E,EAAE,IAAqB;QAAjG,qBAAwE,EAAE,KAAA,EAAxE,mBAAmB,yBAAA,EAAE,gBAAgB,sBAAA,EAAE,iBAAiB,uBAAA;IAChH,IAAM,wBAAwB,GAAG,UAAC,KAAY;QAC5C,IAAM,YAAY,GAAG,KAAK,CAAC,aAAiC,CAAA;QAC5D,IAAM,SAAS,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;QAE5C,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,YAAY,CAAC,SAAS,CAAC,CAAA;QAEvB,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAG,YAAY,CAAC,CAAA;IACrC,CAAC,CAAA;IAED,IAAM,qBAAqB,GAAG,UAAC,KAAY;QACzC,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,YAAY,CAAC,SAAS,CAAC,CAAA;QAEvB,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,EAAI,CAAA;IACtB,CAAC,CAAA;IAED,IAAM,QAAQ,GAAG,IAAA,cAAM,EAA+B,SAAS,CAAC,CAAA;IAC1D,IAAA,KAAA,OAA4B,IAAA,gBAAQ,EAAC,IAAI,CAAC,IAAA,EAAzC,SAAS,QAAA,EAAE,YAAY,QAAkB,CAAA;IAC1C,IAAA,KAAA,OAA4B,IAAA,gBAAQ,EAAmB,SAAS,CAAC,IAAA,EAAhE,SAAS,QAAA,EAAE,YAAY,QAAyC,CAAA;IAEvE,IAAA,iBAAS,EAAC;QACR,YAAY,CAAC,IAAI,CAAC,CAAA;QAElB,QAAQ,CAAC,OAAO,GAAG,IAAI,KAAK,EAAE,CAAA;QAC9B,QAAQ,CAAC,OAAO,CAAC,GAAG,GAAG,GAAG,CAAA;QAC1B,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAA;QACnE,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAA;QAEjE,OAAO;;YACL,MAAA,QAAQ,CAAC,OAAO,0CAAE,mBAAmB,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAA;YACvE,MAAA,QAAQ,CAAC,OAAO,0CAAE,mBAAmB,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAA;YACrE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAA;QAC9B,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,IAAA,iBAAS,EAAC;QACR,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,SAAS,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO;QACL,SAAS,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;QACpC,SAAS,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;KACrC,CAAA;AACH,CAAC;AA7CD,qCA6CC","sourcesContent":["import { DependencyList, Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'\nimport { Size } from 'spase'\n\ntype ReturnedStates = {\n  isLoading: [boolean, Dispatch<SetStateAction<boolean>>]\n  imageSize: [Size | undefined, Dispatch<SetStateAction<Size | undefined>>]\n}\n\ntype Options = {\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. If there is no loaded image, the size is\n   * `undefined`.\n   *\n   * @param size - The original image size.\n   */\n  onImageSizeChange?: (size?: Size) => void\n}\n\nfunction getImageSize(imageElement: HTMLImageElement): Size {\n  return new Size([imageElement.width, imageElement.height])\n}\n\nexport default function useLoadImageEffect(src: string, { onImageLoadComplete, onImageLoadError, onImageSizeChange }: Options = {}, deps?: DependencyList): ReturnedStates {\n  const imageLoadCompleteHandler = (event: Event) => {\n    const imageElement = event.currentTarget as HTMLImageElement\n    const imageSize = getImageSize(imageElement)\n\n    setIsLoading(false)\n    setImageSize(imageSize)\n\n    onImageLoadComplete?.(imageElement)\n  }\n\n  const imageLoadErrorHandler = (event: Event) => {\n    setIsLoading(false)\n    setImageSize(undefined)\n\n    onImageLoadError?.()\n  }\n\n  const imageRef = useRef<HTMLImageElement | undefined>(undefined)\n  const [isLoading, setIsLoading] = useState(true)\n  const [imageSize, setImageSize] = useState<Size | undefined>(undefined)\n\n  useEffect(() => {\n    setIsLoading(true)\n\n    imageRef.current = new Image()\n    imageRef.current.src = src\n    imageRef.current.addEventListener('load', imageLoadCompleteHandler)\n    imageRef.current.addEventListener('error', imageLoadErrorHandler)\n\n    return () => {\n      imageRef.current?.removeEventListener('load', imageLoadCompleteHandler)\n      imageRef.current?.removeEventListener('error', imageLoadErrorHandler)\n      imageRef.current = undefined\n    }\n  }, [src])\n\n  useEffect(() => {\n    onImageSizeChange?.(imageSize)\n  }, [imageSize])\n\n  return {\n    isLoading: [isLoading, setIsLoading],\n    imageSize: [imageSize, setImageSize],\n  }\n}\n"]}
+{"version":3,"file":"useLoadImageEffect.js","sourceRoot":"/","sources":["hooks/useLoadImageEffect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+BAA6F;AAC7F,+BAA4B;AA8B5B,SAAS,YAAY,CAAC,YAA8B;IAClD,OAAO,IAAI,YAAI,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAA;AAC5D,CAAC;AAED,SAAwB,kBAAkB,CAAC,GAAY,EAAE,EAA0E,EAAE,IAAqB;QAAjG,qBAAwE,EAAE,KAAA,EAAxE,mBAAmB,yBAAA,EAAE,gBAAgB,sBAAA,EAAE,iBAAiB,uBAAA;IACjH,IAAM,wBAAwB,GAAG,UAAC,KAAY;QAC5C,IAAM,YAAY,GAAG,KAAK,CAAC,aAAiC,CAAA;QAC5D,IAAM,SAAS,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;QAE5C,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,YAAY,CAAC,SAAS,CAAC,CAAA;QAEvB,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAG,YAAY,CAAC,CAAA;IACrC,CAAC,CAAA;IAED,IAAM,qBAAqB,GAAG,UAAC,KAAY;QACzC,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,YAAY,CAAC,SAAS,CAAC,CAAA;QAEvB,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,EAAI,CAAA;IACtB,CAAC,CAAA;IAED,IAAM,QAAQ,GAAG,IAAA,cAAM,EAA+B,SAAS,CAAC,CAAA;IAC1D,IAAA,KAAA,OAA4B,IAAA,gBAAQ,EAAC,IAAI,CAAC,IAAA,EAAzC,SAAS,QAAA,EAAE,YAAY,QAAkB,CAAA;IAC1C,IAAA,KAAA,OAA4B,IAAA,gBAAQ,EAAmB,SAAS,CAAC,IAAA,EAAhE,SAAS,QAAA,EAAE,YAAY,QAAyC,CAAA;IAEvE,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,GAAG;YAAE,OAAM;QAEhB,YAAY,CAAC,IAAI,CAAC,CAAA;QAElB,QAAQ,CAAC,OAAO,GAAG,IAAI,KAAK,EAAE,CAAA;QAC9B,QAAQ,CAAC,OAAO,CAAC,GAAG,GAAG,GAAG,CAAA;QAC1B,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAA;QACnE,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAA;QAEjE,OAAO;;YACL,MAAA,QAAQ,CAAC,OAAO,0CAAE,mBAAmB,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAA;YACvE,MAAA,QAAQ,CAAC,OAAO,0CAAE,mBAAmB,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAA;YACrE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAA;QAC9B,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,IAAA,iBAAS,EAAC;QACR,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,SAAS,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO;QACL,SAAS,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;QACpC,SAAS,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;KACrC,CAAA;AACH,CAAC;AA/CD,qCA+CC","sourcesContent":["import { DependencyList, Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'\nimport { Size } from 'spase'\n\ntype ReturnedStates = {\n  isLoading: [boolean, Dispatch<SetStateAction<boolean>>]\n  imageSize: [Size | undefined, Dispatch<SetStateAction<Size | undefined>>]\n}\n\ntype Options = {\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. If there is no loaded image, the size is\n   * `undefined`.\n   *\n   * @param size - The original image size.\n   */\n  onImageSizeChange?: (size?: Size) => void\n}\n\nfunction getImageSize(imageElement: HTMLImageElement): Size {\n  return new Size([imageElement.width, imageElement.height])\n}\n\nexport default function useLoadImageEffect(src?: string, { onImageLoadComplete, onImageLoadError, onImageSizeChange }: Options = {}, deps?: DependencyList): ReturnedStates {\n  const imageLoadCompleteHandler = (event: Event) => {\n    const imageElement = event.currentTarget as HTMLImageElement\n    const imageSize = getImageSize(imageElement)\n\n    setIsLoading(false)\n    setImageSize(imageSize)\n\n    onImageLoadComplete?.(imageElement)\n  }\n\n  const imageLoadErrorHandler = (event: Event) => {\n    setIsLoading(false)\n    setImageSize(undefined)\n\n    onImageLoadError?.()\n  }\n\n  const imageRef = useRef<HTMLImageElement | undefined>(undefined)\n  const [isLoading, setIsLoading] = useState(true)\n  const [imageSize, setImageSize] = useState<Size | undefined>(undefined)\n\n  useEffect(() => {\n    if (!src) return\n\n    setIsLoading(true)\n\n    imageRef.current = new Image()\n    imageRef.current.src = src\n    imageRef.current.addEventListener('load', imageLoadCompleteHandler)\n    imageRef.current.addEventListener('error', imageLoadErrorHandler)\n\n    return () => {\n      imageRef.current?.removeEventListener('load', imageLoadCompleteHandler)\n      imageRef.current?.removeEventListener('error', imageLoadErrorHandler)\n      imageRef.current = undefined\n    }\n  }, [src])\n\n  useEffect(() => {\n    onImageSizeChange?.(imageSize)\n  }, [imageSize])\n\n  return {\n    isLoading: [isLoading, setIsLoading],\n    imageSize: [imageSize, setImageSize],\n  }\n}\n"]}

package/lib/hooks/useSearchParamState.d.ts

@@ -0,0 +1,7 @@
+import { Dispatch, SetStateAction } from 'react';
+export declare type Options<T> = {
+    initialState?: T | null;
+    mapSearchParamToState?: (param: string | null) => NonNullable<T> | null;
+    mapStateToSearchParam?: (state: T | null) => string | null;
+};
+export default function useSearchParamState<T>(param: string, { initialState, mapSearchParamToState, mapStateToSearchParam }?: Options<T>): [NonNullable<T> | null, Dispatch<SetStateAction<NonNullable<T> | null>>];

package/lib/hooks/useSearchParamState.js

@@ -0,0 +1,67 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var react_router_dom_1 = require("react-router-dom");
+var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : function () { };
+function useSearchParamState(param, _a) {
+    var _b = _a === void 0 ? {} : _a, initialState = _b.initialState, mapSearchParamToState = _b.mapSearchParamToState, mapStateToSearchParam = _b.mapStateToSearchParam;
+    function _mapSearchParamToState(value, initialState) {
+        if (mapSearchParamToState) {
+            return mapSearchParamToState(value);
+        }
+        else if (value === null) {
+            return initialState !== null && initialState !== void 0 ? initialState : null;
+        }
+        else {
+            return value;
+        }
+    }
+    function _mapStateToSearchParam(state) {
+        if (mapStateToSearchParam) {
+            return mapStateToSearchParam(state);
+        }
+        else if (state === null) {
+            return null;
+        }
+        else {
+            return "".concat(state);
+        }
+    }
+    var _c = __read((0, react_router_dom_1.useSearchParams)(), 2), searchParams = _c[0], setSearchParams = _c[1];
+    var currentState = _mapSearchParamToState(searchParams.get(param), initialState);
+    var _d = __read((0, react_1.useState)(currentState), 2), state = _d[0], setState = _d[1];
+    debug('Using search param state...', 'OK', "param=".concat(param, ", initialState=").concat(currentState));
+    (0, react_1.useEffect)(function () {
+        var value = searchParams.get(param);
+        var newValue = _mapStateToSearchParam(state);
+        if (newValue === value)
+            return;
+        if (newValue === null) {
+            searchParams.delete(param);
+        }
+        else {
+            searchParams.set(param, newValue);
+        }
+        debug('Handling state change...', 'OK', "state=".concat(state, ", oldValue=").concat(value, ", newValue=").concat(newValue));
+        setSearchParams(searchParams);
+    }, [state]);
+    return [state, setState];
+}
+exports.default = useSearchParamState;
+//# sourceMappingURL=useSearchParamState.js.map

package/lib/hooks/useSearchParamState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearchParamState.js","sourceRoot":"/","sources":["hooks/useSearchParamState.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+BAAqE;AACrE,qDAAkD;AAElD,IAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAO,CAAC,CAAA;AAQlG,SAAwB,mBAAmB,CAAI,KAAa,EAAE,EAA+E;QAA/E,qBAA6E,EAAE,KAAA,EAA7E,YAAY,kBAAA,EAAE,qBAAqB,2BAAA,EAAE,qBAAqB,2BAAA;IACxH,SAAS,sBAAsB,CAAC,KAAoB,EAAE,YAAuB;QAC3E,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,KAAK,KAAK,IAAI,EAAE;YACvB,OAAO,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,IAAI,CAAA;SAC5B;aACI;YACH,OAAO,KAAkC,CAAA;SAC1C;IACH,CAAC;IAED,SAAS,sBAAsB,CAAC,KAAe;QAC7C,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,KAAK,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAA;SACZ;aACI;YACH,OAAO,UAAG,KAAK,CAAE,CAAA;SAClB;IACH,CAAC;IAEK,IAAA,KAAA,OAAkC,IAAA,kCAAe,GAAE,IAAA,EAAlD,YAAY,QAAA,EAAE,eAAe,QAAqB,CAAA;IACzD,IAAM,YAAY,GAAG,sBAAsB,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,CAAA;IAC5E,IAAA,KAAA,OAAoB,IAAA,gBAAQ,EAAC,YAAY,CAAC,IAAA,EAAzC,KAAK,QAAA,EAAE,QAAQ,QAA0B,CAAA;IAEhD,KAAK,CAAC,6BAA6B,EAAE,IAAI,EAAE,gBAAS,KAAK,4BAAkB,YAAY,CAAE,CAAC,CAAA;IAE1F,IAAA,iBAAS,EAAC;QACR,IAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QACrC,IAAM,QAAQ,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAA;QAE9C,IAAI,QAAQ,KAAK,KAAK;YAAE,OAAM;QAE9B,IAAI,QAAQ,KAAK,IAAI,EAAE;YACrB,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;SAC3B;aACI;YACH,YAAY,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;SAClC;QAED,KAAK,CAAC,0BAA0B,EAAE,IAAI,EAAE,gBAAS,KAAK,wBAAc,KAAK,wBAAc,QAAQ,CAAE,CAAC,CAAA;QAElG,eAAe,CAAC,YAAY,CAAC,CAAA;IAC/B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;AAC1B,CAAC;AAlDD,sCAkDC","sourcesContent":["import { Dispatch, SetStateAction, useEffect, useState } from 'react'\nimport { useSearchParams } from 'react-router-dom'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : () => {}\n\nexport type Options<T> = {\n  initialState?: T | null\n  mapSearchParamToState?: (param: string | null) => NonNullable<T> | null\n  mapStateToSearchParam?: (state: T | null) => string | null\n}\n\nexport default function useSearchParamState<T>(param: string, { initialState, mapSearchParamToState, mapStateToSearchParam }: Options<T> = {}): [NonNullable<T> | null, Dispatch<SetStateAction<NonNullable<T> | null>>] {\n  function _mapSearchParamToState(value: string | null, initialState?: T | null): NonNullable<T> | null {\n    if (mapSearchParamToState) {\n      return mapSearchParamToState(value)\n    }\n    else if (value === null) {\n      return initialState ?? null\n    }\n    else {\n      return value as unknown as NonNullable<T>\n    }\n  }\n\n  function _mapStateToSearchParam(state: T | null): string | null {\n    if (mapStateToSearchParam) {\n      return mapStateToSearchParam(state)\n    }\n    else if (state === null) {\n      return null\n    }\n    else {\n      return `${state}`\n    }\n  }\n\n  const [searchParams, setSearchParams] = useSearchParams()\n  const currentState = _mapSearchParamToState(searchParams.get(param), initialState)\n  const [state, setState] = useState(currentState)\n\n  debug('Using search param state...', 'OK', `param=${param}, initialState=${currentState}`)\n\n  useEffect(() => {\n    const value = searchParams.get(param)\n    const newValue = _mapStateToSearchParam(state)\n\n    if (newValue === value) return\n\n    if (newValue === null) {\n      searchParams.delete(param)\n    }\n    else {\n      searchParams.set(param, newValue)\n    }\n\n    debug('Handling state change...', 'OK', `state=${state}, oldValue=${value}, newValue=${newValue}`)\n\n    setSearchParams(searchParams)\n  }, [state])\n\n  return [state, setState]\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "description": "A study of styled React components",
   "main": "lib",
   "scripts": {
@@ -43,16 +43,16 @@
     "@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/styled-components": "^5.1.16",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
+    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/parser": "^5.5.0",
     "babel-loader": "^8.2.3",
-    "babel-plugin-styled-components": "^2.0.1",
+    "babel-plugin-styled-components": "^2.0.2",
     "concurrently": "^6.4.0",
     "cross-env": "^7.0.3",
-    "debug": "^4.3.2",
+    "debug": "^4.3.3",
     "eslint": "^8.3.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
@@ -61,6 +61,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
+    "react-router": "^6.0.2",
+    "react-router-dom": "^6.0.2",
     "rimraf": "^3.0.2",
     "styled-components": "^5.3.3",
     "ts-loader": "^9.2.6",
@@ -72,10 +74,6 @@
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.6.0"
   },
-  "peerDependencies": {
-    "react": "^17.0.2",
-    "styled-components": "^5.3.3"
-  },
   "dependencies": {
     "classnames": "^2.3.1",
     "dirty-dom": "^7.0.0",
@@ -84,5 +82,13 @@
     "react-transition-group": "^4.4.2",
     "resize-observer-polyfill": "^1.5.1",
     "spase": "^6.2.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "styled-components": "^5.3.3"
+  },
+  "optionalDependencies": {
+    "react-router": "^6.0.2",
+    "react-router-dom": "^6.0.2"
   }
 }