etudes 1.2.0 → 2.0.0

package/lib/hooks/useDragEffect.js

@@ -50,74 +50,84 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 var interactjs_1 = __importDefault(require("interactjs"));
-var lodash_1 = __importDefault(require("lodash"));
 var react_1 = require("react");
 /**
  * Hook for adding effectful dragging interaction to an element.
  *
- * @param targetRef - The reference to the target element to add drag interaction to.
- * @param options - Additional options which include options for `module:interactjs.draggable`.
+ * @param targetRef - The reference to the target element to add drag
+ *                    interaction to.
+ * @param options - Additional options which include options for
+ *                  `module:interactjs.draggable`.
  * @param deps - Dependencies that trigger this effect.
  *
  * @returns The states created for this effect.
  */
 function useDragEffect(targetRef, _a, deps) {
-    var onDragStart = _a.onDragStart, onDragMove = _a.onDragMove, onDragEnd = _a.onDragEnd, initialValue = _a.initialValue, transform = _a.transform, options = __rest(_a, ["onDragStart", "onDragMove", "onDragEnd", "initialValue", "transform"]);
+    var initialValue = _a.initialValue, transform = _a.transform, onDragStart = _a.onDragStart, onDragMove = _a.onDragMove, onDragEnd = _a.onDragEnd, options = __rest(_a, ["initialValue", "transform", "onDragStart", "onDragMove", "onDragEnd"]);
     /**
-     * Sets the current associated value reference. This reference object is equal to the `value`
-     * state but differs slightly in how they are set. Because states are asynchronous by nature, this
-     * reference object is used to cache time-sensitive value changes while drag event happens.
+     * Sets the current associated value reference. This reference object is equal
+     * to the `value` state but differs slightly in how they are set. Because
+     * states are asynchronous by nature, this reference object is used to cache
+     * time-sensitive value changes while drag event happens.
      *
      * @param value - The value to set the associated value to.
      *
      * @returns `true` if the value was set, `false` otherwise.
      */
     var setValueRef = function (value) {
-        if (lodash_1.default.isEqual(valueRef.current, value))
+        if ((0, fast_deep_equal_1.default)(valueRef.current, value))
             return false;
         valueRef.current = value;
         return true;
     };
     var valueRef = (0, react_1.useRef)(initialValue);
-    var _b = __read((0, react_1.useState)(false), 2), isDragging = _b[0], setIsDragging = _b[1];
-    var _c = __read((0, react_1.useState)(valueRef.current), 2), value = _c[0], setValue = _c[1];
+    var _b = __read((0, react_1.useState)(false), 2), hasDragged = _b[0], setHasDragged = _b[1];
+    var _c = __read((0, react_1.useState)(false), 2), isDragging = _c[0], setIsDragging = _c[1];
+    var _d = __read((0, react_1.useState)(false), 2), isReleasing = _d[0], setIsReleasing = _d[1];
+    var _e = __read((0, react_1.useState)(initialValue), 2), value = _e[0], setValue = _e[1];
     (0, react_1.useEffect)(function () {
-        // debug(`Using drag effect for element ${targetRef.current}...`, 'OK', `value=${valueRef.current}`)
         if (targetRef.current && !interactjs_1.default.isSet(targetRef.current)) {
-            // Do not consume states in these listeners as they will remain their initial values within
-            // the scope of the listeners.
+            // Do not consume states in these listeners as they will remain their
+            // initial values within the scope of the listeners.
             (0, interactjs_1.default)(targetRef.current).draggable(__assign(__assign({ inertia: true }, options), { onstart: function () {
+                    setHasDragged(true);
                     setIsDragging(true);
+                    setIsReleasing(false);
                     onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
                 }, onmove: function (_a) {
-                    var _b;
                     var dx = _a.dx, dy = _a.dy;
-                    var newValue = (_b = transform === null || transform === void 0 ? void 0 : transform(valueRef.current, dx, dy)) !== null && _b !== void 0 ? _b : [dx, dy];
+                    var newValue = transform(valueRef.current, dx, dy);
                     if (setValueRef(newValue)) {
-                        // debug('Updating value from dragging...', 'OK', newValue)
                         setValue(newValue);
                     }
+                    setIsDragging(true);
+                    setIsReleasing(false);
                     onDragMove === null || onDragMove === void 0 ? void 0 : onDragMove(dx, dy);
                 }, onend: function () {
                     setIsDragging(false);
+                    setIsReleasing(true);
                     onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
                 } }));
         }
         return function () {
-            // debug(`Removing drag effect for element ${targetRef.current}...`, 'OK', `value=${valueRef.current}`)
             if (targetRef.current && interactjs_1.default.isSet(targetRef.current)) {
                 (0, interactjs_1.default)(targetRef.current).unset();
             }
         };
     }, __spreadArray([], __read(deps ? deps : []), false));
     (0, react_1.useEffect)(function () {
-        if (setValueRef(value)) {
-            // debug('Updating value from externally...', 'OK', value)
-        }
+        if (hasDragged)
+            return;
+        setValue(initialValue);
+    }, [initialValue]);
+    (0, react_1.useEffect)(function () {
+        setValueRef(value);
     }, [value]);
     return {
         isDragging: [isDragging, setIsDragging],
+        isReleasing: [isReleasing, setIsReleasing],
         value: [value, setValue],
     };
 }

package/lib/hooks/useDragEffect.js.map

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

package/lib/hooks/useElementRect.d.ts

@@ -1,7 +1,8 @@
 import { RefObject } from 'react';
 import { Rect } from 'spase';
 /**
- * Hook for monitoring changes in and returning the size and position of the target element.
+ * Hook for monitoring changes in and returning the size and position of the
+ * target element.
  *
  * @param targetRef - Reference to the target element.
  *

package/lib/hooks/useElementRect.js

@@ -23,7 +23,8 @@ var react_1 = require("react");
 var resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
 var spase_1 = require("spase");
 /**
- * Hook for monitoring changes in and returning the size and position of the target element.
+ * Hook for monitoring changes in and returning the size and position of the
+ * target element.
  *
  * @param targetRef - Reference to the target element.
  *
@@ -34,10 +35,10 @@ function useElementRect(targetRef) {
     var _a = __read((0, react_1.useState)(new spase_1.Rect()), 2), rect = _a[0], setRect = _a[1];
     (0, react_1.useEffect)(function () {
         observerRef.current = new resize_observer_polyfill_1.default(function () {
-            var rect = spase_1.Rect.from(targetRef.current);
-            if (!rect)
+            var newRect = spase_1.Rect.from(targetRef.current);
+            if (!newRect)
                 return;
-            setRect(rect);
+            setRect(newRect);
         });
         if (observerRef.current && targetRef.current) {
             observerRef.current.observe(targetRef.current);

package/lib/hooks/useElementRect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useElementRect.js","sourceRoot":"/","sources":["hooks/useElementRect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,+BAA8D;AAC9D,sFAAqD;AACrD,+BAA4B;AAE5B;;;;;;GAMG;AACH,SAAwB,cAAc,CAAC,SAA6B;IAClE,IAAM,WAAW,GAAG,IAAA,cAAM,EAA6B,SAAS,CAAC,CAAA;IAC3D,IAAA,KAAA,OAAkB,IAAA,gBAAQ,EAAO,IAAI,YAAI,EAAE,CAAC,IAAA,EAA3C,IAAI,QAAA,EAAE,OAAO,QAA8B,CAAA;IAElD,IAAA,iBAAS,EAAC;QACR,WAAW,CAAC,OAAO,GAAG,IAAI,kCAAc,CAAC;YACvC,IAAM,IAAI,GAAG,YAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;YAEzC,IAAI,CAAC,IAAI;gBAAE,OAAM;YAEjB,OAAO,CAAC,IAAI,CAAC,CAAA;QACf,CAAC,CAAC,CAAA;QAEF,IAAI,WAAW,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;YAC5C,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;SAC/C;QAED,OAAO;YACL,IAAI,WAAW,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;gBAC5C,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;aACjD;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,IAAI,CAAA;AACb,CAAC;AAzBD,iCAyBC","sourcesContent":["import { RefObject, useEffect, useRef, useState } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { Rect } from 'spase'\n\n/**\n * Hook for monitoring changes in and returning the size and position of the target element.\n *\n * @param targetRef - Reference to the target element.\n *\n * @returns The most current {@link Rect} of the target element.\n */\nexport default function useElementRect(targetRef: RefObject<Element>): Rect {\n  const observerRef = useRef<ResizeObserver | undefined>(undefined)\n  const [rect, setRect] = useState<Rect>(new Rect())\n\n  useEffect(() => {\n    observerRef.current = new ResizeObserver(() => {\n      const rect = Rect.from(targetRef.current)\n\n      if (!rect) return\n\n      setRect(rect)\n    })\n\n    if (observerRef.current && targetRef.current) {\n      observerRef.current.observe(targetRef.current)\n    }\n\n    return () => {\n      if (observerRef.current && targetRef.current) {\n        observerRef.current.unobserve(targetRef.current)\n      }\n    }\n  }, [targetRef])\n\n  return rect\n}\n"]}
+{"version":3,"file":"useElementRect.js","sourceRoot":"/","sources":["hooks/useElementRect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,+BAA8D;AAC9D,sFAAqD;AACrD,+BAA4B;AAE5B;;;;;;;GAOG;AACH,SAAwB,cAAc,CAAC,SAA6B;IAClE,IAAM,WAAW,GAAG,IAAA,cAAM,EAA6B,SAAS,CAAC,CAAA;IAC3D,IAAA,KAAA,OAAkB,IAAA,gBAAQ,EAAO,IAAI,YAAI,EAAE,CAAC,IAAA,EAA3C,IAAI,QAAA,EAAE,OAAO,QAA8B,CAAA;IAElD,IAAA,iBAAS,EAAC;QACR,WAAW,CAAC,OAAO,GAAG,IAAI,kCAAc,CAAC;YACvC,IAAM,OAAO,GAAG,YAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;YAE5C,IAAI,CAAC,OAAO;gBAAE,OAAM;YAEpB,OAAO,CAAC,OAAO,CAAC,CAAA;QAClB,CAAC,CAAC,CAAA;QAEF,IAAI,WAAW,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;YAC5C,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;SAC/C;QAED,OAAO;YACL,IAAI,WAAW,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;gBAC5C,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;aACjD;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,IAAI,CAAA;AACb,CAAC;AAzBD,iCAyBC","sourcesContent":["import { RefObject, useEffect, useRef, useState } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { Rect } from 'spase'\n\n/**\n * Hook for monitoring changes in and returning the size and position of the\n * target element.\n *\n * @param targetRef - Reference to the target element.\n *\n * @returns The most current {@link Rect} of the target element.\n */\nexport default function useElementRect(targetRef: RefObject<Element>): Rect {\n  const observerRef = useRef<ResizeObserver | undefined>(undefined)\n  const [rect, setRect] = useState<Rect>(new Rect())\n\n  useEffect(() => {\n    observerRef.current = new ResizeObserver(() => {\n      const newRect = Rect.from(targetRef.current)\n\n      if (!newRect) return\n\n      setRect(newRect)\n    })\n\n    if (observerRef.current && targetRef.current) {\n      observerRef.current.observe(targetRef.current)\n    }\n\n    return () => {\n      if (observerRef.current && targetRef.current) {\n        observerRef.current.unobserve(targetRef.current)\n      }\n    }\n  }, [targetRef])\n\n  return rect\n}\n"]}

package/lib/hooks/useInterval.d.ts

@@ -1,8 +1,8 @@
 import { DependencyList } from 'react';
 declare type Options = {
     /**
-     * Specifies if the handler should be invoked initially (as opposed to waiting for the specified
-     * interval for the initial invocation).
+     * Specifies if the handler should be invoked initially (as opposed to waiting
+     * for the specified interval for the initial invocation).
      */
     shouldInvokeInitially?: boolean;
 };

package/lib/hooks/useInterval.js

@@ -36,7 +36,7 @@ var react_1 = require("react");
  */
 function useInterval(handler, timeout, _a, deps) {
     var _b = _a === void 0 ? {} : _a, _c = _b.shouldInvokeInitially, shouldInvokeInitially = _c === void 0 ? false : _c;
-    var handlerRef = (0, react_1.useRef)(undefined);
+    var handlerRef = (0, react_1.useRef)();
     (0, react_1.useEffect)(function () {
         handlerRef.current = handler;
     }, [handler]);

package/lib/hooks/useInterval.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInterval.js","sourceRoot":"/","sources":["hooks/useInterval.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAyD;AAUzD;;;;;;;GAOG;AACH,SAAwB,WAAW,CAAC,OAAmB,EAAE,OAAgB,EAAE,EAA+C,EAAE,IAAqB;QAAtE,qBAA6C,EAAE,KAAA,EAA7C,6BAA6B,EAA7B,qBAAqB,mBAAG,KAAK,KAAA;IACxG,IAAM,UAAU,GAAG,IAAA,cAAM,EAA2B,SAAS,CAAC,CAAA;IAE9D,IAAA,iBAAS,EAAC;QACR,UAAU,CAAC,OAAO,GAAG,OAAO,CAAA;IAC9B,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,IAAA,iBAAS,EAAC;;QACR,IAAI,OAAO,KAAK,SAAS;YAAE,OAAM;QAEjC,IAAI,qBAAqB,KAAK,IAAI;YAAE,MAAA,UAAU,CAAC,OAAO,0DAAI,CAAA;QAC1D,IAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,sBAAM,OAAA,MAAA,UAAU,CAAC,OAAO,0DAAI,CAAA,EAAA,EAAE,OAAO,CAAC,CAAA;QACvE,OAAO,cAAM,OAAA,aAAa,CAAC,KAAK,CAAC,EAApB,CAAoB,CAAA;IACnC,CAAC,yCAAM,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,YAAE,OAAO,UAAE,CAAA;AACpC,CAAC;AAdD,8BAcC","sourcesContent":["import { DependencyList, useEffect, useRef } from 'react'\n\ntype Options = {\n  /**\n   * Specifies if the handler should be invoked initially (as opposed to waiting for the specified\n   * interval for the initial invocation).\n   */\n  shouldInvokeInitially?: boolean\n}\n\n/**\n * Hoook for invoking a method repeatedly on every set interval.\n *\n * @param handler - The method to invoke on every interval.\n * @param timeout - Time (in milliseconds) between each invocation.\n * @param options - See {@link Options}.\n * @param deps - Dependencies that trigger this effect.\n */\nexport default function useInterval(handler: () => void, timeout?: number, { shouldInvokeInitially = false }: Options = {}, deps?: DependencyList) {\n  const handlerRef = useRef<(() => void) | undefined>(undefined)\n\n  useEffect(() => {\n    handlerRef.current = handler\n  }, [handler])\n\n  useEffect(() => {\n    if (timeout === undefined) return\n\n    if (shouldInvokeInitially === true) handlerRef.current?.()\n    const timer = window.setInterval(() => handlerRef.current?.(), timeout)\n    return () => clearInterval(timer)\n  }, [...deps ? deps : [], timeout])\n}\n"]}
+{"version":3,"file":"useInterval.js","sourceRoot":"/","sources":["hooks/useInterval.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAyD;AAUzD;;;;;;;GAOG;AACH,SAAwB,WAAW,CAAC,OAAmB,EAAE,OAAgB,EAAE,EAA+C,EAAE,IAAqB;QAAtE,qBAA6C,EAAE,KAAA,EAA7C,6BAA6B,EAA7B,qBAAqB,mBAAG,KAAK,KAAA;IACxG,IAAM,UAAU,GAAG,IAAA,cAAM,GAAgB,CAAA;IAEzC,IAAA,iBAAS,EAAC;QACR,UAAU,CAAC,OAAO,GAAG,OAAO,CAAA;IAC9B,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,IAAA,iBAAS,EAAC;;QACR,IAAI,OAAO,KAAK,SAAS;YAAE,OAAM;QAEjC,IAAI,qBAAqB,KAAK,IAAI;YAAE,MAAA,UAAU,CAAC,OAAO,0DAAI,CAAA;QAC1D,IAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,sBAAM,OAAA,MAAA,UAAU,CAAC,OAAO,0DAAI,CAAA,EAAA,EAAE,OAAO,CAAC,CAAA;QAEvE,OAAO,cAAM,OAAA,aAAa,CAAC,KAAK,CAAC,EAApB,CAAoB,CAAA;IACnC,CAAC,yCAAM,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,YAAE,OAAO,UAAE,CAAA;AACpC,CAAC;AAfD,8BAeC","sourcesContent":["import { DependencyList, useEffect, useRef } from 'react'\n\ntype Options = {\n  /**\n   * Specifies if the handler should be invoked initially (as opposed to waiting\n   * for the specified interval for the initial invocation).\n   */\n  shouldInvokeInitially?: boolean\n}\n\n/**\n * Hoook for invoking a method repeatedly on every set interval.\n *\n * @param handler - The method to invoke on every interval.\n * @param timeout - Time (in milliseconds) between each invocation.\n * @param options - See {@link Options}.\n * @param deps - Dependencies that trigger this effect.\n */\nexport default function useInterval(handler: () => void, timeout?: number, { shouldInvokeInitially = false }: Options = {}, deps?: DependencyList) {\n  const handlerRef = useRef<(() => void)>()\n\n  useEffect(() => {\n    handlerRef.current = handler\n  }, [handler])\n\n  useEffect(() => {\n    if (timeout === undefined) return\n\n    if (shouldInvokeInitially === true) handlerRef.current?.()\n    const timer = window.setInterval(() => handlerRef.current?.(), timeout)\n\n    return () => clearInterval(timer)\n  }, [...deps ? deps : [], timeout])\n}\n"]}

package/lib/hooks/useLoadImageEffect.d.ts

@@ -2,13 +2,13 @@ import { DependencyList, Dispatch, SetStateAction } from 'react';
 import { Size } from 'spase';
 declare type ReturnedStates = {
     /**
-     * A tuple consisting of a stateful value indicating if the image is loading, and a function that
-     * updates the loading state.
+     * A tuple consisting of a stateful value indicating if the image is loading,
+     * and a function that updates the loading state.
      */
     isLoading: [boolean, Dispatch<SetStateAction<boolean>>];
     /**
-     * A tuple consisting of a stateful value representing the size of the image, and a function that
-     * updates the size.
+     * A tuple consisting of a stateful value representing the size of the image,
+     * and a function that updates the size.
      */
     imageSize: [Size | undefined, Dispatch<SetStateAction<Size | undefined>>];
 };
@@ -24,8 +24,8 @@ declare type Options = {
      */
     onImageLoadError?: () => void;
     /**
-     * Handler invoked when the image size changes. If there is no loaded image, the size is
-     * `undefined`.
+     * Handler invoked when the image size changes. If there is no loaded image,
+     * the size is `undefined`.
      *
      * @param size - The original image size.
      */

package/lib/hooks/useLoadImageEffect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLoadImageEffect.js","sourceRoot":"/","sources":["hooks/useLoadImageEffect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAA6F;AAC7F,+BAA4B;AAsC5B,SAAS,YAAY,CAAC,YAA8B;IAClD,OAAO,IAAI,YAAI,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAA;AAC5D,CAAC;AAED;;;;;;;;GAQG;AACH,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,iBAAG,GAAG,UAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAE,CAAA;IAE9B,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  /**\n   * A tuple consisting of a stateful value indicating if the image is loading, and a function that\n   * updates the loading state.\n   */\n  isLoading: [boolean, Dispatch<SetStateAction<boolean>>]\n\n  /**\n   * A tuple consisting of a stateful value representing the size of the image, and a function that\n   * updates the size.\n   */\n  imageSize: [Size | undefined, Dispatch<SetStateAction<Size | undefined>>]\n}\n\ntype Options = {\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\n/**\n * Hook for preloading an image.\n *\n * @param src - The image source.\n * @param options - See {@link Options}.\n * @param deps - Additional dependencies.\n *\n * @returns See {@link ReturnedStates}.\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, ...deps ? deps : []])\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;AAsC5B,SAAS,YAAY,CAAC,YAA8B;IAClD,OAAO,IAAI,YAAI,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAA;AAC5D,CAAC;AAED;;;;;;;;GAQG;AACH,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,iBAAG,GAAG,UAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAE,CAAA;IAE9B,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  /**\n   * A tuple consisting of a stateful value indicating if the image is loading,\n   * and a function that updates the loading state.\n   */\n  isLoading: [boolean, Dispatch<SetStateAction<boolean>>]\n\n  /**\n   * A tuple consisting of a stateful value representing the size of the image,\n   * and a function that updates the size.\n   */\n  imageSize: [Size | undefined, Dispatch<SetStateAction<Size | undefined>>]\n}\n\ntype Options = {\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,\n   * the size is `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\n/**\n * Hook for preloading an image.\n *\n * @param src - The image source.\n * @param options - See {@link Options}.\n * @param deps - Additional dependencies.\n *\n * @returns See {@link ReturnedStates}.\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, ...deps ? deps : []])\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/usePrevious.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns the previous value of a state or prop.
+ *
+ * @param stateOrProp - The state or prop.
+ */
+export default function usePrevious<T>(stateOrProp: T): T | undefined;

package/lib/hooks/usePrevious.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+/**
+ * Returns the previous value of a state or prop.
+ *
+ * @param stateOrProp - The state or prop.
+ */
+function usePrevious(stateOrProp) {
+    var ref = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        ref.current = stateOrProp;
+    }, [stateOrProp]);
+    return ref.current;
+}
+exports.default = usePrevious;
+//# sourceMappingURL=usePrevious.js.map

package/lib/hooks/usePrevious.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrevious.js","sourceRoot":"/","sources":["hooks/usePrevious.ts"],"names":[],"mappings":";;AAAA,+BAAyC;AAEzC;;;;GAIG;AACH,SAAwB,WAAW,CAAI,WAAc;IACnD,IAAM,GAAG,GAAG,IAAA,cAAM,GAAK,CAAA;IAEvB,IAAA,iBAAS,EAAC;QACR,GAAG,CAAC,OAAO,GAAG,WAAW,CAAA;IAC3B,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,OAAO,GAAG,CAAC,OAAO,CAAA;AACpB,CAAC;AARD,8BAQC","sourcesContent":["import { useEffect, useRef } from 'react'\n\n/**\n * Returns the previous value of a state or prop.\n *\n * @param stateOrProp - The state or prop.\n */\nexport default function usePrevious<T>(stateOrProp: T): T | undefined {\n  const ref = useRef<T>()\n\n  useEffect(() => {\n    ref.current = stateOrProp\n  }, [stateOrProp])\n\n  return ref.current\n}\n"]}

package/lib/hooks/useResizeEffect.d.ts

@@ -15,8 +15,8 @@ declare type Options = {
  * @param options - See {@link Options}.
  * @param deps - Additional dependencies.
  *
- * @returns A tuple consisting of a stateful value indicating the size of the target ref, and a
- *          function that sets its size.
+ * @returns A tuple consisting of a stateful value indicating the size of the
+ *          target ref, and a function that sets its size.
  */
 export default function useResizeEffect(targetRef: RefObject<Element>, { onResize }?: Options, deps?: DependencyList): [Size, Dispatch<SetStateAction<Size>>];
 export {};

package/lib/hooks/useResizeEffect.js

@@ -38,29 +38,26 @@ var spase_1 = require("spase");
  * @param options - See {@link Options}.
  * @param deps - Additional dependencies.
  *
- * @returns A tuple consisting of a stateful value indicating the size of the target ref, and a
- *          function that sets its size.
+ * @returns A tuple consisting of a stateful value indicating the size of the
+ *          target ref, and a function that sets its size.
  */
 function useResizeEffect(targetRef, _a, deps) {
     var _b = _a === void 0 ? {} : _a, onResize = _b.onResize;
     var observerRef = (0, react_1.useRef)(undefined);
     var _c = __read((0, react_1.useState)(new spase_1.Size()), 2), size = _c[0], setSize = _c[1];
     (0, react_1.useEffect)(function () {
-        // debug(`Using resize effect for element ${targetRef.current}...`, 'OK')
         observerRef.current = new resize_observer_polyfill_1.default(function () {
             var rect = spase_1.Rect.from(targetRef.current);
             if (!rect)
                 return;
-            var size = rect.size;
-            // debug(`Observing size change for element ${targetRef.current}...`, 'OK', size)
-            setSize(size);
-            onResize === null || onResize === void 0 ? void 0 : onResize(size);
+            var newSize = rect.size;
+            setSize(newSize);
+            onResize === null || onResize === void 0 ? void 0 : onResize(newSize);
         });
         if (observerRef.current && targetRef.current) {
             observerRef.current.observe(targetRef.current);
         }
         return function () {
-            // debug(`Removing resize effect for element ${targetRef.current}...`, 'OK')
             if (observerRef.current && targetRef.current) {
                 observerRef.current.unobserve(targetRef.current);
             }

package/lib/hooks/useResizeEffect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeEffect.js","sourceRoot":"/","sources":["hooks/useResizeEffect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAwG;AACxG,sFAAqD;AACrD,+BAAkC;AAalC;;;;;;;;;GASG;AACH,SAAwB,eAAe,CAAC,SAA6B,EAAE,EAA0B,EAAE,IAAqB;QAAjD,qBAAwB,EAAE,KAAA,EAAxB,QAAQ,cAAA;IAC/E,IAAM,WAAW,GAAG,IAAA,cAAM,EAA6B,SAAS,CAAC,CAAA;IAC3D,IAAA,KAAA,OAAkB,IAAA,gBAAQ,EAAO,IAAI,YAAI,EAAE,CAAC,IAAA,EAA3C,IAAI,QAAA,EAAE,OAAO,QAA8B,CAAA;IAElD,IAAA,iBAAS,EAAC;QACR,yEAAyE;QAEzE,WAAW,CAAC,OAAO,GAAG,IAAI,kCAAc,CAAC;YACvC,IAAM,IAAI,GAAG,YAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;YAEzC,IAAI,CAAC,IAAI;gBAAE,OAAM;YAEjB,IAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;YAEtB,iFAAiF;YAEjF,OAAO,CAAC,IAAI,CAAC,CAAA;YACb,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,IAAI,CAAC,CAAA;QAClB,CAAC,CAAC,CAAA;QAEF,IAAI,WAAW,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;YAC5C,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;SAC/C;QAED,OAAO;YACL,4EAA4E;YAE5E,IAAI,WAAW,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;gBAC5C,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;aACjD;QACH,CAAC,CAAA;IACH,CAAC,iBAAG,SAAS,UAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAE,CAAA;IAEpC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AACxB,CAAC;AAlCD,kCAkCC","sourcesContent":["import { DependencyList, Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { Rect, Size } from 'spase'\n\n// const debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : () => {}\n\ntype Options = {\n  /**\n   * Handler invoked when the target element resizes.\n   *\n   * @param size - The current size of the target element.\n   */\n  onResize?: (size: Size) => void\n}\n\n/**\n * Hook for monitoring the resizing event of the target element.\n *\n * @param targetRef - Reference to the target element.\n * @param options - See {@link Options}.\n * @param deps - Additional dependencies.\n *\n * @returns A tuple consisting of a stateful value indicating the size of the target ref, and a\n *          function that sets its size.\n */\nexport default function useResizeEffect(targetRef: RefObject<Element>, { onResize }: Options = {}, deps?: DependencyList): [Size, Dispatch<SetStateAction<Size>>] {\n  const observerRef = useRef<ResizeObserver | undefined>(undefined)\n  const [size, setSize] = useState<Size>(new Size())\n\n  useEffect(() => {\n    // debug(`Using resize effect for element ${targetRef.current}...`, 'OK')\n\n    observerRef.current = new ResizeObserver(() => {\n      const rect = Rect.from(targetRef.current)\n\n      if (!rect) return\n\n      const size = rect.size\n\n      // debug(`Observing size change for element ${targetRef.current}...`, 'OK', size)\n\n      setSize(size)\n      onResize?.(size)\n    })\n\n    if (observerRef.current && targetRef.current) {\n      observerRef.current.observe(targetRef.current)\n    }\n\n    return () => {\n      // debug(`Removing resize effect for element ${targetRef.current}...`, 'OK')\n\n      if (observerRef.current && targetRef.current) {\n        observerRef.current.unobserve(targetRef.current)\n      }\n    }\n  }, [targetRef, ...deps ? deps : []])\n\n  return [size, setSize]\n}\n"]}
+{"version":3,"file":"useResizeEffect.js","sourceRoot":"/","sources":["hooks/useResizeEffect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAwG;AACxG,sFAAqD;AACrD,+BAAkC;AAWlC;;;;;;;;;GASG;AACH,SAAwB,eAAe,CAAC,SAA6B,EAAE,EAA0B,EAAE,IAAqB;QAAjD,qBAAwB,EAAE,KAAA,EAAxB,QAAQ,cAAA;IAC/E,IAAM,WAAW,GAAG,IAAA,cAAM,EAA6B,SAAS,CAAC,CAAA;IAC3D,IAAA,KAAA,OAAkB,IAAA,gBAAQ,EAAO,IAAI,YAAI,EAAE,CAAC,IAAA,EAA3C,IAAI,QAAA,EAAE,OAAO,QAA8B,CAAA;IAElD,IAAA,iBAAS,EAAC;QACR,WAAW,CAAC,OAAO,GAAG,IAAI,kCAAc,CAAC;YACvC,IAAM,IAAI,GAAG,YAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;YAEzC,IAAI,CAAC,IAAI;gBAAE,OAAM;YAEjB,IAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA;YAEzB,OAAO,CAAC,OAAO,CAAC,CAAA;YAChB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,OAAO,CAAC,CAAA;QACrB,CAAC,CAAC,CAAA;QAEF,IAAI,WAAW,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;YAC5C,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;SAC/C;QAED,OAAO;YACL,IAAI,WAAW,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;gBAC5C,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;aACjD;QACH,CAAC,CAAA;IACH,CAAC,iBAAG,SAAS,UAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAE,CAAA;IAEpC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AACxB,CAAC;AA5BD,kCA4BC","sourcesContent":["import { DependencyList, Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { Rect, Size } from 'spase'\n\ntype Options = {\n  /**\n   * Handler invoked when the target element resizes.\n   *\n   * @param size - The current size of the target element.\n   */\n  onResize?: (size: Size) => void\n}\n\n/**\n * Hook for monitoring the resizing event of the target element.\n *\n * @param targetRef - Reference to the target element.\n * @param options - See {@link Options}.\n * @param deps - Additional dependencies.\n *\n * @returns A tuple consisting of a stateful value indicating the size of the\n *          target ref, and a function that sets its size.\n */\nexport default function useResizeEffect(targetRef: RefObject<Element>, { onResize }: Options = {}, deps?: DependencyList): [Size, Dispatch<SetStateAction<Size>>] {\n  const observerRef = useRef<ResizeObserver | undefined>(undefined)\n  const [size, setSize] = useState<Size>(new Size())\n\n  useEffect(() => {\n    observerRef.current = new ResizeObserver(() => {\n      const rect = Rect.from(targetRef.current)\n\n      if (!rect) return\n\n      const newSize = rect.size\n\n      setSize(newSize)\n      onResize?.(newSize)\n    })\n\n    if (observerRef.current && targetRef.current) {\n      observerRef.current.observe(targetRef.current)\n    }\n\n    return () => {\n      if (observerRef.current && targetRef.current) {\n        observerRef.current.unobserve(targetRef.current)\n      }\n    }\n  }, [targetRef, ...deps ? deps : []])\n\n  return [size, setSize]\n}\n"]}

package/lib/hooks/useSearchParamState.d.ts

@@ -1,15 +1,18 @@
 import { Dispatch, SetStateAction } from 'react';
 export declare type Options<T> = {
     /**
-     * Function for transforming the search param value to the value of the mapped state.
+     * Function for transforming the search param value to the value of the mapped
+     * state.
      *
-     * @param value - The search param value. `undefined` means the value is unavailable.
+     * @param value - The search param value. `undefined` means the value is
+     *                unavailable.
      *
      * @returns The equivalent state value.
      */
     mapSearchParamToState?: (value?: string) => T;
     /**
-     * Function for transforming the value of the mapped state to the search param value.
+     * Function for transforming the value of the mapped state to the search param
+     * value.
      *
      * @param state - The state value.
      *
@@ -18,14 +21,14 @@ export declare type Options<T> = {
     mapStateToSearchParam?: (state: T) => string | undefined;
 };
 /**
- * Hook for mapping a search param to a state. Whenever the value of the target search param
- * changes, the mapped state will change as well, and vice versa.
+ * Hook for mapping a search param to a state. Whenever the value of the target
+ * search param changes, the mapped state will change as well, and vice versa.
  *
  * @param param - The search param key.
  * @param defaultValue - The default value of the state.
  * @param options - See {@link Options}.
  *
- * @returns A tuple consisting of a stateful value representing the current value of the mapped
- *          state and a function that updates it.
+ * @returns A tuple consisting of a stateful value representing the current
+ *          value of the mapped state and a function that updates it.
  */
 export default function useSearchParamState<T>(param: string, defaultValue: T, { mapSearchParamToState, mapStateToSearchParam }?: Options<T>): [T, Dispatch<SetStateAction<T>>];

package/lib/hooks/useSearchParamState.js

@@ -15,36 +15,40 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 var react_router_dom_1 = require("react-router-dom");
-var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : function () { };
+var useDebug_1 = __importDefault(require("../utils/useDebug"));
+var debug = (0, useDebug_1.default)('hooks');
 /**
- * Hook for mapping a search param to a state. Whenever the value of the target search param
- * changes, the mapped state will change as well, and vice versa.
+ * Hook for mapping a search param to a state. Whenever the value of the target
+ * search param changes, the mapped state will change as well, and vice versa.
  *
  * @param param - The search param key.
  * @param defaultValue - The default value of the state.
  * @param options - See {@link Options}.
  *
- * @returns A tuple consisting of a stateful value representing the current value of the mapped
- *          state and a function that updates it.
+ * @returns A tuple consisting of a stateful value representing the current
+ *          value of the mapped state and a function that updates it.
  */
 function useSearchParamState(param, defaultValue, _a) {
     var _b;
     var _c = _a === void 0 ? {} : _a, mapSearchParamToState = _c.mapSearchParamToState, mapStateToSearchParam = _c.mapStateToSearchParam;
-    var _mapSearchParamToState = function (value, defaultValue) {
+    var defaultMapSearchParamToState = function (value, fallback) {
         if (mapSearchParamToState) {
             return mapSearchParamToState(value);
         }
         else if (!value) {
-            return defaultValue;
+            return fallback;
         }
         else {
             return value;
         }
     };
-    var _mapStateToSearchParam = function (state) {
+    var defaultMapStateToSearchParam = function (state) {
         if (mapStateToSearchParam) {
             return mapStateToSearchParam(state);
         }
@@ -56,12 +60,12 @@ function useSearchParamState(param, defaultValue, _a) {
         }
     };
     var _d = __read((0, react_router_dom_1.useSearchParams)(), 2), searchParams = _d[0], setSearchParams = _d[1];
-    var currentState = _mapSearchParamToState((_b = searchParams.get(param)) !== null && _b !== void 0 ? _b : undefined, defaultValue);
+    var currentState = defaultMapSearchParamToState((_b = searchParams.get(param)) !== null && _b !== void 0 ? _b : undefined, defaultValue);
     var _e = __read((0, react_1.useState)(currentState), 2), state = _e[0], setState = _e[1];
     debug('Using search param state...', 'OK', "param=".concat(param, ", defaultValue=").concat(currentState));
     (0, react_1.useEffect)(function () {
         var value = searchParams.get(param);
-        var newValue = _mapStateToSearchParam(state);
+        var newValue = defaultMapStateToSearchParam(state);
         if (newValue === value)
             return;
         if (!newValue) {

package/lib/hooks/useSearchParamState.js.map

@@ -1 +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;AAsBlG;;;;;;;;;;GAUG;AACH,SAAwB,mBAAmB,CAAI,KAAa,EAAE,YAAe,EAAE,EAAiE;;QAAjE,qBAA+D,EAAE,KAAA,EAA/D,qBAAqB,2BAAA,EAAE,qBAAqB,2BAAA;IAC3H,IAAM,sBAAsB,GAAG,UAAC,KAAyB,EAAE,YAAe;QACxE,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,CAAC,KAAK,EAAE;YACf,OAAO,YAAY,CAAA;SACpB;aACI;YACH,OAAO,KAAkC,CAAA;SAC1C;IACH,CAAC,CAAA;IAED,IAAM,sBAAsB,GAAG,UAAC,KAAQ;QACtC,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,KAAK,KAAK,YAAY,EAAE;YAC/B,OAAO,SAAS,CAAA;SACjB;aACI;YACH,OAAO,UAAG,KAAK,CAAE,CAAA;SAClB;IACH,CAAC,CAAA;IAEK,IAAA,KAAA,OAAkC,IAAA,kCAAe,GAAE,IAAA,EAAlD,YAAY,QAAA,EAAE,eAAe,QAAqB,CAAA;IACzD,IAAM,YAAY,GAAG,sBAAsB,CAAC,MAAA,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,mCAAI,SAAS,EAAE,YAAY,CAAC,CAAA;IACzF,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,CAAC,QAAQ,EAAE;YACb,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  /**\n   * Function for transforming the search param value to the value of the mapped state.\n   *\n   * @param value - The search param value. `undefined` means the value is unavailable.\n   *\n   * @returns The equivalent state value.\n   */\n  mapSearchParamToState?: (value?: string) => T\n\n  /**\n   * Function for transforming the value of the mapped state to the search param value.\n   *\n   * @param state - The state value.\n   *\n   * @returns The equivalent search param value.\n   */\n  mapStateToSearchParam?: (state: T) => string | undefined\n}\n\n/**\n * Hook for mapping a search param to a state. Whenever the value of the target search param\n * changes, the mapped state will change as well, and vice versa.\n *\n * @param param - The search param key.\n * @param defaultValue - The default value of the state.\n * @param options - See {@link Options}.\n *\n * @returns A tuple consisting of a stateful value representing the current value of the mapped\n *          state and a function that updates it.\n */\nexport default function useSearchParamState<T>(param: string, defaultValue: T, { mapSearchParamToState, mapStateToSearchParam }: Options<T> = {}): [T, Dispatch<SetStateAction<T>>] {\n  const _mapSearchParamToState = (value: string | undefined, defaultValue: T): T => {\n    if (mapSearchParamToState) {\n      return mapSearchParamToState(value)\n    }\n    else if (!value) {\n      return defaultValue\n    }\n    else {\n      return value as unknown as NonNullable<T>\n    }\n  }\n\n  const _mapStateToSearchParam = (state: T): string | undefined => {\n    if (mapStateToSearchParam) {\n      return mapStateToSearchParam(state)\n    }\n    else if (state === defaultValue) {\n      return undefined\n    }\n    else {\n      return `${state}`\n    }\n  }\n\n  const [searchParams, setSearchParams] = useSearchParams()\n  const currentState = _mapSearchParamToState(searchParams.get(param) ?? undefined, defaultValue)\n  const [state, setState] = useState(currentState)\n\n  debug('Using search param state...', 'OK', `param=${param}, defaultValue=${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) {\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"]}
+{"version":3,"file":"useSearchParamState.js","sourceRoot":"/","sources":["hooks/useSearchParamState.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,+BAAqE;AACrE,qDAAkD;AAClD,+DAAwC;AAExC,IAAM,KAAK,GAAG,IAAA,kBAAQ,EAAC,OAAO,CAAC,CAAA;AAyB/B;;;;;;;;;;GAUG;AACH,SAAwB,mBAAmB,CAAI,KAAa,EAAE,YAAe,EAAE,EAAiE;;QAAjE,qBAA+D,EAAE,KAAA,EAA/D,qBAAqB,2BAAA,EAAE,qBAAqB,2BAAA;IAC3H,IAAM,4BAA4B,GAAG,UAAC,KAAyB,EAAE,QAAW;QAC1E,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,CAAC,KAAK,EAAE;YACf,OAAO,QAAQ,CAAA;SAChB;aACI;YACH,OAAO,KAAkC,CAAA;SAC1C;IACH,CAAC,CAAA;IAED,IAAM,4BAA4B,GAAG,UAAC,KAAQ;QAC5C,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,KAAK,KAAK,YAAY,EAAE;YAC/B,OAAO,SAAS,CAAA;SACjB;aACI;YACH,OAAO,UAAG,KAAK,CAAE,CAAA;SAClB;IACH,CAAC,CAAA;IAEK,IAAA,KAAA,OAAkC,IAAA,kCAAe,GAAE,IAAA,EAAlD,YAAY,QAAA,EAAE,eAAe,QAAqB,CAAA;IACzD,IAAM,YAAY,GAAG,4BAA4B,CAAC,MAAA,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,mCAAI,SAAS,EAAE,YAAY,CAAC,CAAA;IAC/F,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,4BAA4B,CAAC,KAAK,CAAC,CAAA;QAEpD,IAAI,QAAQ,KAAK,KAAK;YAAE,OAAM;QAE9B,IAAI,CAAC,QAAQ,EAAE;YACb,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'\nimport useDebug from '../utils/useDebug'\n\nconst debug = useDebug('hooks')\n\nexport type Options<T> = {\n  /**\n   * Function for transforming the search param value to the value of the mapped\n   * state.\n   *\n   * @param value - The search param value. `undefined` means the value is\n   *                unavailable.\n   *\n   * @returns The equivalent state value.\n   */\n  mapSearchParamToState?: (value?: string) => T\n\n  /**\n   * Function for transforming the value of the mapped state to the search param\n   * value.\n   *\n   * @param state - The state value.\n   *\n   * @returns The equivalent search param value.\n   */\n  mapStateToSearchParam?: (state: T) => string | undefined\n}\n\n/**\n * Hook for mapping a search param to a state. Whenever the value of the target\n * search param changes, the mapped state will change as well, and vice versa.\n *\n * @param param - The search param key.\n * @param defaultValue - The default value of the state.\n * @param options - See {@link Options}.\n *\n * @returns A tuple consisting of a stateful value representing the current\n *          value of the mapped state and a function that updates it.\n */\nexport default function useSearchParamState<T>(param: string, defaultValue: T, { mapSearchParamToState, mapStateToSearchParam }: Options<T> = {}): [T, Dispatch<SetStateAction<T>>] {\n  const defaultMapSearchParamToState = (value: string | undefined, fallback: T): T => {\n    if (mapSearchParamToState) {\n      return mapSearchParamToState(value)\n    }\n    else if (!value) {\n      return fallback\n    }\n    else {\n      return value as unknown as NonNullable<T>\n    }\n  }\n\n  const defaultMapStateToSearchParam = (state: T): string | undefined => {\n    if (mapStateToSearchParam) {\n      return mapStateToSearchParam(state)\n    }\n    else if (state === defaultValue) {\n      return undefined\n    }\n    else {\n      return `${state}`\n    }\n  }\n\n  const [searchParams, setSearchParams] = useSearchParams()\n  const currentState = defaultMapSearchParamToState(searchParams.get(param) ?? undefined, defaultValue)\n  const [state, setState] = useState(currentState)\n\n  debug('Using search param state...', 'OK', `param=${param}, defaultValue=${currentState}`)\n\n  useEffect(() => {\n    const value = searchParams.get(param)\n    const newValue = defaultMapStateToSearchParam(state)\n\n    if (newValue === value) return\n\n    if (!newValue) {\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/lib/utils/asClassNameDict.d.ts

@@ -0,0 +1,3 @@
+export default function asClassNameDict<T>(dict: {
+    [K in keyof T]: string;
+}): { [K in keyof T]: string; };

package/lib/utils/asClassNameDict.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function asClassNameDict(dict) {
+    return dict;
+}
+exports.default = asClassNameDict;
+//# sourceMappingURL=asClassNameDict.js.map

package/lib/utils/asClassNameDict.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asClassNameDict.js","sourceRoot":"/","sources":["utils/asClassNameDict.ts"],"names":[],"mappings":";;AAAA,SAAwB,eAAe,CAAI,IAAgC;IACzE,OAAO,IAAI,CAAA;AACb,CAAC;AAFD,kCAEC","sourcesContent":["export default function asClassNameDict<T>(dict: { [K in keyof T]: string }) {\n  return dict\n}\n"]}

package/lib/utils/asComponentDict.d.ts

@@ -0,0 +1,5 @@
+import { JSXElementConstructor, ReactNode } from 'react';
+declare type ComponentTypeDict = Record<string, JSXElementConstructor<any>>;
+declare type ComponentElementDict<T extends ComponentTypeDict> = Record<keyof T, JSX.Element>;
+export default function asComponentDict<T extends ComponentTypeDict>(children?: ReactNode, typeDict?: T): Partial<ComponentElementDict<T>>;
+export {};

package/lib/utils/asComponentDict.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+function asComponentDict(children, typeDict) {
+    if (typeDict === void 0) { typeDict = {}; }
+    var keys = Object.keys(typeDict);
+    var types = Object.values(typeDict);
+    var components = {};
+    react_1.Children.forEach(children, function (child) {
+        if (!(0, react_1.isValidElement)(child))
+            throw Error('Invalid child detected');
+        var index = types.indexOf(child.type);
+        if (index < 0)
+            throw Error("Unsupported child, only the following children are allowed: ".concat(types));
+        var key = keys[index];
+        if (components[key])
+            throw Error("Only one ".concat(types[index], " can be provided as a child"));
+        components[key] = child;
+    });
+    return components;
+}
+exports.default = asComponentDict;
+//# sourceMappingURL=asComponentDict.js.map

package/lib/utils/asComponentDict.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asComponentDict.js","sourceRoot":"/","sources":["utils/asComponentDict.ts"],"names":[],"mappings":";;AAAA,+BAAkF;AAMlF,SAAwB,eAAe,CAA8B,QAAoB,EAAE,QAAqB;IAArB,yBAAA,EAAA,WAAc,EAAO;IAC9G,IAAM,IAAI,GAAgB,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC/C,IAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;IACrC,IAAM,UAAU,GAAqC,EAAE,CAAA;IAEvD,gBAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,UAAA,KAAK;QAC9B,IAAI,CAAC,IAAA,sBAAc,EAAC,KAAK,CAAC;YAAE,MAAM,KAAK,CAAC,wBAAwB,CAAC,CAAA;QAEjE,IAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAW,CAAC,CAAA;QAC9C,IAAI,KAAK,GAAG,CAAC;YAAE,MAAM,KAAK,CAAC,sEAA+D,KAAK,CAAE,CAAC,CAAA;QAElG,IAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAA;QACvB,IAAI,UAAU,CAAC,GAAG,CAAC;YAAE,MAAM,KAAK,CAAC,mBAAY,KAAK,CAAC,KAAK,CAAC,gCAA6B,CAAC,CAAA;QAEvF,UAAU,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;IACzB,CAAC,CAAC,CAAA;IAEF,OAAO,UAAU,CAAA;AACnB,CAAC;AAlBD,kCAkBC","sourcesContent":["import { Children, isValidElement, JSXElementConstructor, ReactNode } from 'react'\n\ntype ComponentTypeDict = Record<string, JSXElementConstructor<any>>\n\ntype ComponentElementDict<T extends ComponentTypeDict> = Record<keyof T, JSX.Element>\n\nexport default function asComponentDict<T extends ComponentTypeDict>(children?: ReactNode, typeDict: T = {} as T): Partial<ComponentElementDict<T>> {\n  const keys: (keyof T)[] = Object.keys(typeDict)\n  const types = Object.values(typeDict)\n  const components: Partial<ComponentElementDict<T>> = {}\n\n  Children.forEach(children, child => {\n    if (!isValidElement(child)) throw Error('Invalid child detected')\n\n    const index = types.indexOf(child.type as any)\n    if (index < 0) throw Error(`Unsupported child, only the following children are allowed: ${types}`)\n\n    const key = keys[index]\n    if (components[key]) throw Error(`Only one ${types[index]} can be provided as a child`)\n\n    components[key] = child\n  })\n\n  return components\n}\n"]}

package/lib/utils/asStyleDict.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+export default function asStyleDict<T>(dict: {
+    [K in keyof T]: CSSProperties;
+}): { [K in keyof T]: CSSProperties; };

package/lib/utils/asStyleDict.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function asStyleDict(dict) {
+    return dict;
+}
+exports.default = asStyleDict;
+//# sourceMappingURL=asStyleDict.js.map

package/lib/utils/asStyleDict.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asStyleDict.js","sourceRoot":"/","sources":["utils/asStyleDict.ts"],"names":[],"mappings":";;AAEA,SAAwB,WAAW,CAAI,IAAuC;IAC5E,OAAO,IAAI,CAAA;AACb,CAAC;AAFD,8BAEC","sourcesContent":["import { CSSProperties } from 'react'\n\nexport default function asStyleDict<T>(dict: { [K in keyof T]: CSSProperties }) {\n  return dict\n}\n"]}

package/lib/utils/cloneStyledElement.d.ts

@@ -0,0 +1,18 @@
+import { Attributes, CElement, ClassAttributes, Component, ComponentState, FunctionComponentElement, ReactElement, ReactNode } from 'react';
+/**
+ * Wrapper for {@link cloneElement} but instead of overwriting `className` and
+ * `style` of the cloned element with the values specified in the `props`
+ * argument, they are merged instead.
+ *
+ * @param element - The target element to clone.
+ * @param props - The props to apply to the cloned element. Overlapping props
+ *                are overwritten with the exception of `className` and `style`,
+ *                which are merged.
+ * @param children - Optional child elements add into the cloned element.
+ *
+ * @returns The cloned element.
+ */
+declare function cloneStyledElement<P>(element: FunctionComponentElement<P>, props?: Partial<P> & Attributes, ...children: ReactNode[]): FunctionComponentElement<P>;
+declare function cloneStyledElement<P, T extends Component<P, ComponentState>>(element: CElement<P, T>, props?: Partial<P> & ClassAttributes<T>, ...children: ReactNode[]): CElement<P, T>;
+declare function cloneStyledElement<P>(element: ReactElement<P>, props?: Partial<P> & Attributes, ...children: ReactNode[]): ReactElement<P>;
+export default cloneStyledElement;