@onepercentio/one-ui 0.20.2 → 0.20.4

package/dist/hooks/ui/useBreakpoint.js

@@ -10,25 +10,25 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /**
  * A hook to trigger changes when the screen resizes
  * @returns If the current resolution is lower than the specified width
  */
 function useBreakpoint(breakInto) {
-  const _useState = (0, _react.useState)(function () {
+  var _useState = (0, _react.useState)(function () {
       return window.visualViewport.width < breakInto;
     }),
     _useState2 = _slicedToArray(_useState, 2),
     lowerThanBreakpoint = _useState2[0],
     setIsLowerThanBreakpoint = _useState2[1];
   (0, _react.useEffect)(function () {
-    const onResizeThrottle = (0, _throttle.default)(function () {
+    var onResizeThrottle = (0, _throttle.default)(function () {
       setIsLowerThanBreakpoint(window.visualViewport.width < breakInto);
     }, 1000 / 4);
-    const onResize = function onResize() {
+    var onResize = function onResize() {
       return onResizeThrottle();
     };
     window.addEventListener("resize", onResize);

package/dist/hooks/ui/useCustomScrollbar.js

@@ -8,12 +8,12 @@ var _react = require("react");
 var _useCustomScrollbarModule = _interopRequireDefault(require("./useCustomScrollbar.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function useCustomScrollBar() {
-  let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "" : _ref$color,
     _ref$propagate = _ref.propagate,
     propagate = _ref$propagate === void 0 ? false : _ref$propagate;
-  const elRef = (0, _react.useRef)(null);
+  var elRef = (0, _react.useRef)(null);
   (0, _react.useLayoutEffect)(function () {
     elRef.current.style.setProperty("--scrollbar-color", color);
     elRef.current.classList.add(_useCustomScrollbarModule.default.scrollBarRoot);

package/dist/hooks/ui/useMouseHover.js

@@ -8,19 +8,19 @@ var _react = require("react");
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /**
  * A small hook for binding the hover control over some HTML element
  * @returns uiEvents: The events to spread to the html element hovering: the hover state
  */
 function useMouseHover() {
-  const _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     hovering = _useState2[0],
     setHovering = _useState2[1];
-  const uiEvents = (0, _react.useMemo)(function () {
+  var uiEvents = (0, _react.useMemo)(function () {
     return {
       onMouseEnter: function onMouseEnter() {
         setHovering(true);

package/dist/hooks/ui/usePaginationControls.d.ts

@@ -2,11 +2,12 @@ import { RefObject } from "react";
 /**
  * This hook handles the display of pagination controls for the user to move to another page
  */
-export default function usePaginationControls(containerRef: RefObject<HTMLDivElement>, { snapToPage, baseWidth, snapToCutElement: _snapToCutElement, }?: {
+export default function usePaginationControls(containerRef: RefObject<HTMLDivElement>, { snapToPage, baseWidth, snapToCutElement: _snapToCutElement, ...props }?: {
     snapToPage?: boolean;
     baseWidth?: number;
     /** This will scroll only until the partially visible element is at the border, instead of scrolling all the container */
     snapToCutElement?: boolean;
+    "data-testid"?: [left: string, right: string];
 }): {
     controls: JSX.Element[];
     checkControlsRequirement: () => void;

package/dist/hooks/ui/usePaginationControls.js

@@ -11,54 +11,56 @@ var _FadeIn = _interopRequireDefault(require("../../components/FadeIn"));
 var _OneUIProvider = require("../../context/OneUIProvider");
 var _usePaginationControlsModule = _interopRequireDefault(require("./usePaginationControls.module.scss"));
 var _html = require("../../utils/html.utils");
-const _excluded = ["touches"],
-  _excluded2 = ["touches"];
+var _excluded = ["snapToPage", "baseWidth", "snapToCutElement"],
+  _excluded2 = ["touches"],
+  _excluded3 = ["touches"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * This hook handles the display of pagination controls for the user to move to another page
  */
 function usePaginationControls(containerRef) {
-  let _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     snapToPage = _ref.snapToPage,
     baseWidth = _ref.baseWidth,
-    _snapToCutElement = _ref.snapToCutElement;
-  const _useState = (0, _react.useState)([false, false]),
+    _snapToCutElement = _ref.snapToCutElement,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = (0, _react.useState)([false, false]),
     _useState2 = _slicedToArray(_useState, 2),
     _useState2$ = _slicedToArray(_useState2[0], 2),
     leftControl = _useState2$[0],
     rightControl = _useState2$[1],
     setControls = _useState2[1];
-  const LeftControl = (0, _OneUIProvider.useOneUIConfig)("hook.ui.usePaginationControls.LeftControl");
-  const RightControl = (0, _OneUIProvider.useOneUIConfig)("hook.ui.usePaginationControls.RightControl");
-  const className = (0, _OneUIProvider.useOneUIConfig)("hook.ui.usePaginationControls.className", "");
+  var LeftControl = (0, _OneUIProvider.useOneUIConfig)("hook.ui.usePaginationControls.LeftControl");
+  var RightControl = (0, _OneUIProvider.useOneUIConfig)("hook.ui.usePaginationControls.RightControl");
+  var className = (0, _OneUIProvider.useOneUIConfig)("hook.ui.usePaginationControls.className", "");
   function move(direction) {
-    let snapToCutElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _snapToCutElement;
+    var snapToCutElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _snapToCutElement;
     return function () {
       if (snapToCutElement !== null && snapToCutElement !== void 0 ? snapToCutElement : false) {
-        const childBaseWidth = baseWidth || containerRef.current.firstElementChild.clientWidth;
-        const howMuchDoesTheScrollAddsUpTo = containerRef.current.scrollLeft / childBaseWidth - Math.floor((containerRef.current.scrollLeft + (direction === "l" ? -1 : 0)) / childBaseWidth);
-        const howMuchElementsFitOnAPage = containerRef.current.clientWidth / childBaseWidth;
-        const howMuchElementsFullyFitOnAPage = Math.floor(howMuchElementsFitOnAPage) || 1;
-        const directionScale = direction === "l" ? 1 - howMuchDoesTheScrollAddsUpTo : howMuchDoesTheScrollAddsUpTo;
-        const howMuchOfTheRemainingElementIsShown = howMuchElementsFitOnAPage + directionScale - howMuchElementsFullyFitOnAPage;
-        const howMuchToScroll = (containerRef.current.clientWidth - childBaseWidth * howMuchOfTheRemainingElementIsShown) * (direction === "l" ? -1 : 1);
+        var childBaseWidth = baseWidth || containerRef.current.firstElementChild.clientWidth;
+        var howMuchDoesTheScrollAddsUpTo = containerRef.current.scrollLeft / childBaseWidth - Math.floor((containerRef.current.scrollLeft + (direction === "l" ? -1 : 0)) / childBaseWidth);
+        var howMuchElementsFitOnAPage = containerRef.current.clientWidth / childBaseWidth;
+        var howMuchElementsFullyFitOnAPage = Math.floor(howMuchElementsFitOnAPage) || 1;
+        var directionScale = direction === "l" ? 1 - howMuchDoesTheScrollAddsUpTo : howMuchDoesTheScrollAddsUpTo;
+        var howMuchOfTheRemainingElementIsShown = howMuchElementsFitOnAPage + directionScale - howMuchElementsFullyFitOnAPage;
+        var howMuchToScroll = (containerRef.current.clientWidth - childBaseWidth * howMuchOfTheRemainingElementIsShown) * (direction === "l" ? -1 : 1);
         containerRef.current.scrollBy({
           left: howMuchToScroll,
           behavior: "smooth"
         });
       } else {
-        const rest = containerRef.current.scrollLeft % containerRef.current.clientWidth;
-        const snapOffset = snapToPage ? direction === "l" ? rest ? containerRef.current.clientWidth - rest : 0 : rest : 0;
+        var rest = containerRef.current.scrollLeft % containerRef.current.clientWidth;
+        var snapOffset = snapToPage ? direction === "l" ? rest ? containerRef.current.clientWidth - rest : 0 : rest : 0;
         containerRef.current.scrollBy({
           left: (containerRef.current.clientWidth - snapOffset) * (direction === "l" ? -1 : 1),
           behavior: "smooth"
@@ -67,38 +69,38 @@ function usePaginationControls(containerRef) {
     };
   }
   function checkControlsRequirement() {
-    const el = containerRef.current;
-    const shouldHaveAnyControl = el.scrollWidth > el.clientWidth;
+    var el = containerRef.current;
+    var shouldHaveAnyControl = el.scrollWidth > el.clientWidth;
     if (!shouldHaveAnyControl) setControls([false, false]);else {
-      const shouldHaveRightControl = el.scrollLeft < el.scrollWidth - el.clientWidth;
-      const shouldHaveLeftControl = el.scrollLeft > 0;
+      var shouldHaveRightControl = el.scrollLeft < el.scrollWidth - el.clientWidth;
+      var shouldHaveLeftControl = el.scrollLeft > 0;
       setControls([shouldHaveLeftControl, shouldHaveRightControl]);
     }
   }
   (0, _react.useEffect)(function () {
-    const el = containerRef.current;
-    const throttledCheck = (0, _throttle.default)(checkControlsRequirement, 1000 / 4);
+    var el = containerRef.current;
+    var throttledCheck = (0, _throttle.default)(checkControlsRequirement, 1000 / 4);
     checkControlsRequirement();
-    let startingX;
-    let lastX;
-    const onTouchStart = function onTouchStart(_ref2) {
-      let touches = _ref2.touches,
-        e = _objectWithoutProperties(_ref2, _excluded);
+    var startingX;
+    var lastX;
+    var onTouchStart = function onTouchStart(_ref2) {
+      var touches = _ref2.touches,
+        e = _objectWithoutProperties(_ref2, _excluded2);
       if (!(0, _html.isSameTarget)(e)) return;
-      const _ref3 = touches.item(0),
+      var _ref3 = touches.item(0),
         pageX = _ref3.pageX;
       startingX = pageX;
     };
-    const onTouchMove = function onTouchMove(_ref4) {
-      let touches = _ref4.touches,
-        e = _objectWithoutProperties(_ref4, _excluded2);
+    var onTouchMove = function onTouchMove(_ref4) {
+      var touches = _ref4.touches,
+        e = _objectWithoutProperties(_ref4, _excluded3);
       if (!(0, _html.isSameTarget)(e)) return;
-      const touch = touches.item(0);
+      var touch = touches.item(0);
       lastX = touch.pageX;
     };
-    const onTouchEnd = function onTouchEnd() {
+    var onTouchEnd = function onTouchEnd(e) {
       if (!lastX) return;
-      const dir = lastX > startingX ? "l" : "r";
+      var dir = lastX > startingX ? "l" : "r";
       move(dir, true)();
       startingX = undefined;
     };

package/dist/hooks/ui/useSnapToViewport.js

@@ -11,10 +11,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * This takes a container and applies padding and margin so the content overflow container and goes until it hits the viewport border
  */
 function useSnapToViewport(defaultPadding) {
-  const elRef = (0, _react.useRef)(null);
+  var elRef = (0, _react.useRef)(null);
   (0, _react.useLayoutEffect)(function () {
-    const diff = window.visualViewport.width - elRef.current.clientWidth;
-    const margin = diff / 2;
+    var diff = window.visualViewport.width - elRef.current.clientWidth;
+    var margin = diff / 2;
     elRef.current.style.setProperty("--overflow-padding", "".concat(margin, "px"));
     elRef.current.style.setProperty("--overflow-margin", "".concat(-margin, "px"));
     elRef.current.style.setProperty("--default-padding", "".concat(defaultPadding, "px"));

package/dist/hooks/ui/useTilt.js

@@ -14,29 +14,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-const MAX_TILT = {
+var MAX_TILT = {
   x: 100,
   y: 100
 };
 function useTiltUpdates(active, relativeToEl, onTilt, onInverseMatrix) {
-  let sensorScale = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
-  let tiltLimit = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : MAX_TILT;
-  let options = arguments.length > 6 ? arguments[6] : undefined;
+  var sensorScale = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+  var tiltLimit = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : MAX_TILT;
+  var options = arguments.length > 6 ? arguments[6] : undefined;
   (0, _react.useEffect)(function () {
     if (active) {
       var _options$gyroEnabled;
-      let removeListeners = function removeListeners() {
+      var removeListeners = function removeListeners() {
         window.removeEventListener("mousemove", handler);
         window.removeEventListener("touchmove", touchHandler);
       };
-      const updatePositions = function updatePositions(relativeToX, relativeToY) {
+      var updatePositions = function updatePositions(relativeToX, relativeToY) {
         var _options$round, _options$round2;
-        const el = relativeToEl.current;
-        const rect = el.getBoundingClientRect();
-        const _width$height = {
+        var el = relativeToEl.current;
+        var rect = el.getBoundingClientRect();
+        var _width$height = {
             width: [rect.left, el.clientWidth],
             height: [rect.top, el.clientHeight]
           },
@@ -46,48 +46,48 @@ function useTiltUpdates(active, relativeToEl, onTilt, onInverseMatrix) {
           _width$height$height = _slicedToArray(_width$height.height, 2),
           y0 = _width$height$height[0],
           yH = _width$height$height[1];
-        const distanceOffRight = calculateDistanceRelativeToBounds(relativeToX, x0, xW, (_options$round = options === null || options === void 0 ? void 0 : options.round) !== null && _options$round !== void 0 ? _options$round : true);
-        const distanceOffBottom = calculateDistanceRelativeToBounds(relativeToY, y0, yH, (_options$round2 = options === null || options === void 0 ? void 0 : options.round) !== null && _options$round2 !== void 0 ? _options$round2 : true);
-        const howMuchToRotateY = givenTheRelativePositionHowMuchToRotate(distanceOffRight, tiltLimit.y);
-        const howMuchToRotateX = givenTheRelativePositionHowMuchToRotate(distanceOffBottom, tiltLimit.x);
+        var distanceOffRight = calculateDistanceRelativeToBounds(relativeToX, x0, xW, (_options$round = options === null || options === void 0 ? void 0 : options.round) !== null && _options$round !== void 0 ? _options$round : true);
+        var distanceOffBottom = calculateDistanceRelativeToBounds(relativeToY, y0, yH, (_options$round2 = options === null || options === void 0 ? void 0 : options.round) !== null && _options$round2 !== void 0 ? _options$round2 : true);
+        var howMuchToRotateY = givenTheRelativePositionHowMuchToRotate(distanceOffRight, tiltLimit.y);
+        var howMuchToRotateX = givenTheRelativePositionHowMuchToRotate(distanceOffBottom, tiltLimit.x);
         onTilt({
           y: howMuchToRotateX * 2,
           x: howMuchToRotateY * 2
         });
       };
-      const handler = (0, _throttle.default)(function (_ref) {
-        let x = _ref.x,
+      var handler = (0, _throttle.default)(function (_ref) {
+        var x = _ref.x,
           y = _ref.y;
         updatePositions(x, y);
       }, 1000 / 30);
-      const touchHandler = (0, _throttle.default)(function (_ref2) {
-        let touches = _ref2.touches;
-        const _touches$ = touches[0],
+      var touchHandler = (0, _throttle.default)(function (_ref2) {
+        var touches = _ref2.touches;
+        var _touches$ = touches[0],
           pageX = _touches$.pageX,
           pageY = _touches$.pageY;
         updatePositions(pageX, pageY);
       }, 1000 / 30);
       window.addEventListener("mousemove", handler);
       window.addEventListener("touchmove", touchHandler);
-      let _inverseMatrix;
-      const _limits = {
+      var _inverseMatrix;
+      var _limits = {
         beta: undefined,
         gamma: undefined
       };
-      const orientationListener = function orientationListener(_ref3) {
-        let beta = _ref3.beta,
+      var orientationListener = function orientationListener(_ref3) {
+        var beta = _ref3.beta,
           gamma = _ref3.gamma;
         beta = beta * 0.5;
         gamma = gamma * 0.5;
         if (!_inverseMatrix) {
           window.removeEventListener("mousemove", handler);
           window.removeEventListener("touchmove", touchHandler);
-          const offset = 12.5;
+          var offset = 12.5;
           _limits.beta = [beta - offset, beta + offset];
           _limits.gamma = [gamma - offset, gamma + offset];
         }
-        const _beta = Math.min(_limits.beta[1], Math.max(_limits.beta[0], beta));
-        const _gamma = Math.min(_limits.gamma[1], Math.max(_limits.gamma[0], gamma));
+        var _beta = Math.min(_limits.beta[1], Math.max(_limits.beta[0], beta));
+        var _gamma = Math.min(_limits.gamma[1], Math.max(_limits.gamma[0], gamma));
         if (!_inverseMatrix && onInverseMatrix) {
           onInverseMatrix(function () {
             return _inverseMatrix = (0, _helpers.flattenMatrix)((0, _helpers.invertMatrix)((0, _helpers.generateMatrixFromOperations)({
@@ -126,23 +126,23 @@ function useTiltUpdates(active, relativeToEl, onTilt, onInverseMatrix) {
  * When on desktop: The mouse position relative to a ref
  */
 function useTilt(active) {
-  let sensorScale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  let maxTilt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : MAX_TILT;
-  let options = arguments.length > 3 ? arguments[3] : undefined;
-  const _useState = (0, _react.useState)({
+  var sensorScale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  var maxTilt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : MAX_TILT;
+  var options = arguments.length > 3 ? arguments[3] : undefined;
+  var _useState = (0, _react.useState)({
       x: 0,
       y: 0
     }),
     _useState2 = _slicedToArray(_useState, 2),
     tilt = _useState2[0],
     setTilt = _useState2[1];
-  const _useState3 = (0, _react.useState)(function () {
+  var _useState3 = (0, _react.useState)(function () {
       return (0, _helpers.flattenMatrix)((0, _helpers.IDENTITY_MATRIX)());
     }),
     _useState4 = _slicedToArray(_useState3, 2),
     tiltResetMatrix = _useState4[0],
     setTiltResetMatrix = _useState4[1];
-  const relativeTo = (0, _react.useRef)(null);
+  var relativeTo = (0, _react.useRef)(null);
   useTiltUpdates(active, relativeTo, setTilt, setTiltResetMatrix, sensorScale, maxTilt, options);
   return {
     /** The element to monitor mouse hover relative to */
@@ -159,11 +159,11 @@ function useTilt(active) {
   };
 }
 function calculateDistanceRelativeToBounds(mousePosition, elementInitialPosition, elementSizeDimension, shouldRound) {
-  const normalizeInitialPosition = mousePosition - elementInitialPosition;
-  const doNotAllowGoingBeyondLowerLimit = Math.max(normalizeInitialPosition, 0);
-  const doNotAllowHoingBeyondHigherLimit = Math.min(doNotAllowGoingBeyondLowerLimit, elementSizeDimension);
-  const threeRule = doNotAllowHoingBeyondHigherLimit * 100 / elementSizeDimension;
-  const result = (shouldRound ? Math.round(threeRule) : threeRule) / 100;
+  var normalizeInitialPosition = mousePosition - elementInitialPosition;
+  var doNotAllowGoingBeyondLowerLimit = Math.max(normalizeInitialPosition, 0);
+  var doNotAllowHoingBeyondHigherLimit = Math.min(doNotAllowGoingBeyondLowerLimit, elementSizeDimension);
+  var threeRule = doNotAllowHoingBeyondHigherLimit * 100 / elementSizeDimension;
+  var result = (shouldRound ? Math.round(threeRule) : threeRule) / 100;
   return result;
 }
 function givenTheRelativePositionHowMuchToRotate(relativePosition, maxRotation) {

package/dist/hooks/ui/useZoomable.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = useZoomable;
 var _react = _interopRequireWildcard(require("react"));
 var _useZoomableModule = _interopRequireDefault(require("./useZoomable.module.scss"));
+var _client = require("react-dom/client");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _useHero3 = _interopRequireDefault(require("../useHero"));
 var _useMergeRefs = require("../useMergeRefs");
@@ -14,31 +15,24 @@ var _ownEvent = _interopRequireDefault(require("../../utils/ownEvent"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const ON_HERO_START = {
-  onHeroStart: function onHeroStart(clone) {
-    return clone.classList.add(_useZoomableModule.default.overBackdrop);
-  }
-};
-
 /**
  * Allows an element to be zoomable for fullscreen
  */
 function useZoomable(id) {
-  const zoomableID = (0, _react.useMemo)(function () {
+  var zoomableID = (0, _react.useMemo)(function () {
     return "zoomable-".concat(id);
   }, []);
-  const getBackdrop = function getBackdrop() {
+  var getBackdrop = function getBackdrop() {
     return document.querySelector("[data-zoomable=\"".concat(zoomableID, "\"]"));
   };
-  const _useHero = (0, _useHero3.default)(zoomableID, {
+  var _useHero = (0, _useHero3.default)(zoomableID, {
       "data-preffix": "zoomable",
       repeatable: true
     }, {
       onHeroStart: function onHeroStart(clone) {
-        var _ref2;
-        const bd = getBackdrop();
-        const removeCb = function removeCb(_ref) {
-          let currentTarget = _ref.currentTarget,
+        var bd = getBackdrop();
+        var removeCb = function removeCb(_ref) {
+          var currentTarget = _ref.currentTarget,
             target = _ref.target;
           if (target === currentTarget) {
             _reactDom.default.unmountComponentAtNode(bd);
@@ -46,11 +40,7 @@ function useZoomable(id) {
           }
         };
         bd.style.opacity = "0";
-        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          args[_key - 1] = arguments[_key];
-        }
-        (_ref2 = ON_HERO_START).onHeroStart.apply(_ref2, [clone].concat(args));
-        const middlewayClick = function middlewayClick() {
+        var middlewayClick = function middlewayClick() {
           bd.removeEventListener("transitionend", removeCb);
           clone.removeEventListener("click", middlewayClick);
           _zoom();
@@ -66,52 +56,70 @@ function useZoomable(id) {
     }),
     heroRef = _useHero.heroRef,
     trigger = _useHero.trigger;
-  const zoomableEl = (0, _react.useRef)(null);
+  var zoomableEl = (0, _react.useRef)(null);
   function _unzoom() {
     trigger();
   }
   function _zoom() {
-    const el = zoomableEl.current;
-    const elClone = el.cloneNode(true);
+    var el = zoomableEl.current;
+    var elClone = el.cloneNode(true);
     elClone.style.visibility = "hidden";
     function HeroMount() {
+      var _useHero2 = (0, _useHero3.default)(zoomableID, {
+          "data-preffix": "zoomable",
+          repeatable: true
+        }, {
+          onHeroStart: function onHeroStart(clone) {
+            getBackdrop().style.opacity = "1";
+            var unzoomCb = function unzoomCb() {
+              _unzoom();
+              clone.removeEventListener("click", unzoomCb);
+            };
+            clone.addEventListener("click", unzoomCb);
+          },
+          onHeroEnd: function onHeroEnd() {
+            heroRef.current.classList.remove(_useZoomableModule.default.zoomableIndicator);
+          }
+        }),
+        heroRef = _useHero2.heroRef;
       return /*#__PURE__*/_react.default.createElement("div", {
-        ref: function ref(_ref4) {
-          if (_ref4) {
-            _ref4.appendChild(elClone);
-            const verticalProportion = el.clientWidth / el.clientHeight;
-            const targetWidth = _ref4.clientHeight * verticalProportion;
-            if (targetWidth > _ref4.clientWidth) {
-              const horizontalProportion = el.clientHeight / el.clientWidth;
-              elClone.style.width = _ref4.clientWidth + "px";
-              elClone.style.height = _ref4.clientWidth * horizontalProportion + "px";
+        ref: function ref(_ref2) {
+          if (_ref2) {
+            _ref2.appendChild(elClone);
+            heroRef.current = elClone;
+            var verticalProportion = el.clientWidth / el.clientHeight;
+            var targetWidth = _ref2.clientHeight * verticalProportion;
+            if (targetWidth > _ref2.clientWidth) {
+              var horizontalProportion = el.clientHeight / el.clientWidth;
+              elClone.style.width = _ref2.clientWidth + "px";
+              elClone.style.height = _ref2.clientWidth * horizontalProportion + "px";
             } else {
-              elClone.style.height = _ref4.clientHeight + "px";
+              elClone.style.height = _ref2.clientHeight + "px";
               elClone.style.width = targetWidth + "px";
             }
           }
         }
       });
     }
-    const existingBackdrop = getBackdrop();
+    var existingBackdrop = getBackdrop();
     if (!existingBackdrop) {
-      const backdrop = document.createElement("div");
+      var backdrop = document.createElement("div");
       backdrop.classList.add(_useZoomableModule.default.backdrop);
       backdrop.addEventListener("click", _unzoom);
       backdrop.setAttribute("data-zoomable", zoomableID);
       document.body.appendChild(backdrop);
-      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(HeroMount, null), backdrop);
+      (0, _client.createRoot)(backdrop).render( /*#__PURE__*/_react.default.createElement(HeroMount, null));
     } else {
-      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(HeroMount, null), existingBackdrop);
+      (0, _client.createRoot)(existingBackdrop).render( /*#__PURE__*/_react.default.createElement(HeroMount, null));
     }
   }
   (0, _react.useEffect)(function () {
-    const el = zoomableEl.current;
+    var el = zoomableEl.current;
     el.classList.add(_useZoomableModule.default.zoomableIndicator);
     el.addEventListener("click", _zoom);
     return function () {
       el.classList.remove(_useZoomableModule.default.zoomableIndicator);
-      const bd = getBackdrop();
+      var bd = getBackdrop();
       if (bd) {
         bd.style.opacity = "0";
         bd.addEventListener("transitionend", function () {
@@ -120,7 +128,7 @@ function useZoomable(id) {
       }
     };
   }, []);
-  const mergedRefs = (0, _useMergeRefs.useMergeRefsFunc)(heroRef, zoomableEl);
+  var mergedRefs = (0, _useMergeRefs.useMergeRefsFunc)(heroRef, zoomableEl);
   return {
     zoomableEl: mergedRefs
   };

package/dist/hooks/ui/useZoomable.module.scss

@@ -28,7 +28,7 @@ $stubZIndex: 1000000;
   }
 }
 
-.overBackdrop {
+.backdrop + * {
   z-index: $stubZIndex + 1;
   max-width: initial;
-}
+}