@onepercentio/one-ui 1.3.3 → 1.3.5

package/dist/hooks/ui/useTilt.js

@@ -0,0 +1,145 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.givenTheRelativePositionHowMuchToRotate = exports.calculateDistanceRelativeToBounds = exports.useTiltUpdates = void 0;
+const throttle_1 = __importDefault(require("lodash/throttle"));
+const react_1 = require("react");
+const helpers_1 = require("../../components/Parallax/math/helpers");
+const MAX_TILT = {
+    x: 100,
+    y: 100,
+};
+function useTiltUpdates(active, relativeToEl, onTilt, onInverseMatrix, sensorScale = 1, tiltLimit = MAX_TILT, options) {
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (active) {
+            const updatePositions = (relativeToX, relativeToY) => {
+                var _a, _b;
+                const el = relativeToEl.current;
+                const rect = el.getBoundingClientRect();
+                const { width: [x0, xW], height: [y0, yH], } = {
+                    width: [rect.left, el.clientWidth],
+                    height: [rect.top, el.clientHeight],
+                };
+                const distanceOffRight = calculateDistanceRelativeToBounds(relativeToX, x0, xW, (_a = options === null || options === void 0 ? void 0 : options.round) !== null && _a !== void 0 ? _a : true);
+                const distanceOffBottom = calculateDistanceRelativeToBounds(relativeToY, y0, yH, (_b = options === null || options === void 0 ? void 0 : options.round) !== null && _b !== void 0 ? _b : true);
+                const howMuchToRotateY = givenTheRelativePositionHowMuchToRotate(distanceOffRight, tiltLimit.y);
+                const howMuchToRotateX = givenTheRelativePositionHowMuchToRotate(distanceOffBottom, tiltLimit.x);
+                onTilt({
+                    y: howMuchToRotateX * 2,
+                    x: howMuchToRotateY * 2,
+                });
+            };
+            const handler = (0, throttle_1.default)(({ x, y }) => {
+                updatePositions(x, y);
+            }, 1000 / 30);
+            const touchHandler = (0, throttle_1.default)(({ touches }) => {
+                const { pageX, pageY } = touches[0];
+                updatePositions(pageX, pageY);
+            }, 1000 / 30);
+            window.addEventListener("mousemove", handler);
+            window.addEventListener("touchmove", touchHandler);
+            let _inverseMatrix;
+            const _limits = {
+                beta: undefined,
+                gamma: undefined,
+            };
+            const orientationListener = ({ beta, gamma, }) => {
+                if ((beta !== null && beta !== void 0 ? beta : 0) + (gamma !== null && gamma !== void 0 ? gamma : 0) === 0)
+                    return;
+                beta = beta * 0.5;
+                gamma = gamma * 0.5;
+                if (!_inverseMatrix) {
+                    window.removeEventListener("mousemove", handler);
+                    window.removeEventListener("touchmove", touchHandler);
+                    const 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));
+                if (!_inverseMatrix && onInverseMatrix) {
+                    onInverseMatrix(() => {
+                        return (_inverseMatrix = (0, helpers_1.flattenMatrix)((0, helpers_1.invertMatrix)((0, helpers_1.generateMatrixFromOperations)({
+                            type: "rotateY",
+                            angle: _gamma,
+                        }, {
+                            type: "rotateX",
+                            angle: -_beta,
+                        }))));
+                    });
+                }
+                onTilt({
+                    y: -_beta * sensorScale,
+                    x: _gamma * sensorScale,
+                });
+            };
+            function removeListeners() {
+                window.removeEventListener("mousemove", handler);
+                window.removeEventListener("touchmove", touchHandler);
+            }
+            if ((_a = options === null || options === void 0 ? void 0 : options.gyroEnabled) !== null && _a !== void 0 ? _a : true) {
+                window.addEventListener("deviceorientation", orientationListener);
+                return () => {
+                    window.removeEventListener("deviceorientation", orientationListener);
+                    removeListeners();
+                };
+            }
+            else {
+                return () => removeListeners();
+            }
+        }
+    }, [active, onInverseMatrix, onTilt]);
+}
+exports.useTiltUpdates = useTiltUpdates;
+/**
+ * This hook binds to two methods for calculating tilt
+ *
+ * When available: The device sensors
+ * When on desktop: The mouse position relative to a ref
+ */
+function useTilt(active, 
+/**
+ * A scale to increase the values from the sensors
+ *
+ * @hack You can set this value to 0 as a way to disable the tilt calc on mobile
+ */
+sensorScale = 1, maxTilt = MAX_TILT, options) {
+    const [tilt, setTilt] = (0, react_1.useState)({
+        x: 0,
+        y: 0,
+    });
+    const [tiltResetMatrix, setTiltResetMatrix] = (0, react_1.useState)(() => (0, helpers_1.flattenMatrix)((0, helpers_1.IDENTITY_MATRIX)()));
+    const relativeTo = (0, react_1.useRef)(null);
+    useTiltUpdates(active, relativeTo, setTilt, setTiltResetMatrix, sensorScale, maxTilt, options);
+    return {
+        /** The element to monitor mouse hover relative to */
+        relativeTo,
+        /**
+         * The matrix that represents the original tilt, so it can be used with the tilt prop to tilt relative to the user
+         * Use it on css like so transform: matrix3d(tiltResetMatrix.join(",")) rotateX(tilt.x) rotateY(tilt.y)
+         */
+        tiltResetMatrix,
+        /**
+         * How much tilt should be applied based
+         */
+        tilt,
+    };
+}
+exports.default = useTilt;
+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;
+    return result;
+}
+exports.calculateDistanceRelativeToBounds = calculateDistanceRelativeToBounds;
+function givenTheRelativePositionHowMuchToRotate(relativePosition, maxRotation) {
+    return relativePosition * maxRotation - maxRotation / 2;
+}
+exports.givenTheRelativePositionHowMuchToRotate = givenTheRelativePositionHowMuchToRotate;
+//# sourceMappingURL=useTilt.js.map

package/dist/hooks/ui/useTilt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTilt.js","sourceRoot":"","sources":["../../../src/hooks/ui/useTilt.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+/**
+ * Allows an element to be zoomable for fullscreen
+ */
+export default function useZoomable(id: string): {
+    zoomableEl: (providedRef: any) => void;
+};

package/dist/hooks/ui/useZoomable.js

@@ -0,0 +1,128 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_1 = require("react-dom/client");
+const react_dom_1 = __importDefault(require("react-dom"));
+const useZoomable_module_scss_1 = __importDefault(require("./useZoomable.module.scss"));
+const useHero_1 = __importDefault(require("../useHero"));
+const useMergeRefs_1 = require("../useMergeRefs");
+const ownEvent_1 = __importDefault(require("../../utils/ownEvent"));
+/**
+ * Allows an element to be zoomable for fullscreen
+ */
+function useZoomable(id) {
+    const zoomableID = (0, react_1.useMemo)(() => `zoomable-${id}`, []);
+    const getBackdrop = () => {
+        return document.querySelector(`[data-zoomable="${zoomableID}"]`);
+    };
+    const { heroRef, trigger } = (0, useHero_1.default)(zoomableID, {
+        "data-preffix": "zoomable",
+        repeatable: true,
+    }, {
+        onHeroStart: (clone, ...args) => {
+            const bd = getBackdrop();
+            const removeCb = ({ currentTarget, target }) => {
+                if (target === currentTarget) {
+                    if (("unmountComponentAtNode" in react_dom_1.default))
+                        react_dom_1.default.unmountComponentAtNode(bd);
+                    else
+                        console.error("This component doesn't work with the new versions of react yet...");
+                    bd.remove();
+                }
+            };
+            bd.style.opacity = "0";
+            const middlewayClick = () => {
+                bd.removeEventListener("transitionend", removeCb);
+                clone.removeEventListener("click", middlewayClick);
+                _zoom();
+            };
+            clone.addEventListener("click", middlewayClick);
+            bd.addEventListener("transitionend", removeCb);
+            bd.addEventListener("transitionstart", () => {
+                bd.addEventListener("transitioncancel", (0, ownEvent_1.default)(() => bd.removeEventListener("transitionend", removeCb)));
+            });
+        },
+    });
+    const zoomableEl = (0, react_1.useRef)(null);
+    function _unzoom() {
+        trigger();
+    }
+    function _zoom() {
+        const el = zoomableEl.current;
+        const elClone = el.cloneNode(true);
+        elClone.style.visibility = "hidden";
+        function HeroMount() {
+            const { heroRef } = (0, useHero_1.default)(zoomableID, {
+                "data-preffix": "zoomable",
+                repeatable: true,
+            }, {
+                onHeroStart: (clone, ...args) => {
+                    getBackdrop().style.opacity = "1";
+                    const unzoomCb = () => {
+                        _unzoom();
+                        clone.removeEventListener("click", unzoomCb);
+                    };
+                    clone.addEventListener("click", unzoomCb);
+                },
+                onHeroEnd: () => {
+                    heroRef.current.classList.remove(useZoomable_module_scss_1.default.zoomableIndicator);
+                },
+            });
+            return ((0, jsx_runtime_1.jsx)("div", { ref: (ref) => {
+                    if (ref) {
+                        ref.appendChild(elClone);
+                        heroRef.current = elClone;
+                        const verticalProportion = el.clientWidth / el.clientHeight;
+                        const targetWidth = ref.clientHeight * verticalProportion;
+                        if (targetWidth > ref.clientWidth) {
+                            const horizontalProportion = el.clientHeight / el.clientWidth;
+                            elClone.style.width = ref.clientWidth + "px";
+                            elClone.style.height =
+                                ref.clientWidth * horizontalProportion + "px";
+                        }
+                        else {
+                            elClone.style.height = ref.clientHeight + "px";
+                            elClone.style.width = targetWidth + "px";
+                        }
+                    }
+                } }));
+        }
+        const existingBackdrop = getBackdrop();
+        if (!existingBackdrop) {
+            const backdrop = document.createElement("div");
+            backdrop.classList.add(useZoomable_module_scss_1.default.backdrop);
+            backdrop.addEventListener("click", _unzoom);
+            backdrop.setAttribute("data-zoomable", zoomableID);
+            document.body.appendChild(backdrop);
+            (0, client_1.createRoot)(backdrop).render((0, jsx_runtime_1.jsx)(HeroMount, {}));
+        }
+        else {
+            (0, client_1.createRoot)(existingBackdrop).render((0, jsx_runtime_1.jsx)(HeroMount, {}));
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        const el = zoomableEl.current;
+        el.classList.add(useZoomable_module_scss_1.default.zoomableIndicator);
+        el.addEventListener("click", _zoom);
+        return () => {
+            el.classList.remove(useZoomable_module_scss_1.default.zoomableIndicator);
+            const bd = getBackdrop();
+            if (bd) {
+                bd.style.opacity = "0";
+                bd.addEventListener("transitionend", () => {
+                    bd.remove();
+                });
+            }
+        };
+    }, []);
+    const mergedRefs = (0, useMergeRefs_1.useMergeRefsFunc)(heroRef, zoomableEl);
+    return {
+        zoomableEl: mergedRefs,
+    };
+}
+exports.default = useZoomable;
+//# sourceMappingURL=useZoomable.js.map

package/dist/hooks/ui/useZoomable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useZoomable.js","sourceRoot":"","sources":["../../../src/hooks/ui/useZoomable.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,34 @@
+@use "../../assets/styles/variables.scss" as *;
+
+.zoomableIndicator {
+  cursor: zoom-in;
+}
+
+$stubZIndex: 1000000;
+
+.backdrop {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: $stubZIndex;
+  background: var(--zoomable--backdrop-bg, #0009);
+  transition: opacity $fast linear;
+  opacity: 0;
+  > * {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    > * {
+      cursor: zoom-out;
+    }
+  }
+}
+
+.backdrop + * {
+  z-index: $stubZIndex + 1;
+  max-width: initial;
+}

package/dist/hooks/useAsyncControl.ai.md

@@ -0,0 +1,25 @@
+# Protecting an async function
+```tsx
+const control = useAsyncControl()
+
+control.process(() => anAsyncFunction());
+```
+
+# Using multiple async functions
+```tsx
+const control = useAsyncControl({
+    asyncFunctionOne,
+    asyncFunctionTwo,
+})
+
+control.asyncFunctionOne();
+control.asyncFunctionTwo();
+```
+
+# Storing data
+```tsx
+const [result, setResult] = useState()
+const control = useAsyncControl({anAsyncFunctionThatReturnsData})
+
+control.anAsyncFunctionThatReturnsData().then(setResult);
+```

package/dist/hooks/useAsyncControl.d.ts

@@ -0,0 +1,32 @@
+import { SetStateAction } from "react";
+import { Primitive } from "type-fest";
+type Arr<X> = [X, React.Dispatch<SetStateAction<X>>];
+export type FunctionMap = {
+    [f: string]: ((...args: any[]) => Promise<any>) | Object | Primitive;
+};
+export type Control<E extends any = any> = {
+    error?: E;
+    loading: boolean;
+};
+export declare function useRawAsynControl<E = any, F extends FunctionMap = {}>(functionsToWrap: F | undefined, [error, setError]: Arr<E | undefined>, [loading, setLoading]: Arr<boolean>): {
+    process: (asyncFn: (() => Promise<any>) | Promise<any>) => Promise<any>;
+    loading: boolean;
+    error: E | undefined;
+    setError: import("react").Dispatch<SetStateAction<E | undefined>>;
+    setLoading: import("react").Dispatch<SetStateAction<boolean>>;
+} & F;
+export declare function useAsyncControl<E = any, F extends {
+    [f: string]: ((...args: any[]) => Promise<any>) | Object | Primitive;
+} = {}>(functionsToWrap?: F): {
+    process: (asyncFn: Promise<any> | (() => Promise<any>)) => Promise<any>;
+    loading: boolean;
+    error: Error | E | undefined;
+    setError: import("react").Dispatch<SetStateAction<Error | E | undefined>>;
+    setLoading: import("react").Dispatch<SetStateAction<boolean>>;
+} & F;
+/**
+ * This hook provides a way to handle async operations storing the loading state, or the error when it fails, it does not store information returned from the functions.
+ * @param functionsToWrap The functions to wrap in control.
+ * @returns
+ */
+export default useAsyncControl;

package/dist/hooks/useAsyncControl.js

@@ -0,0 +1,64 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAsyncControl = exports.useRawAsynControl = void 0;
+const react_1 = require("react");
+function useRawAsynControl(functionsToWrap, [error, setError], [loading, setLoading]) {
+    const _process = (0, react_1.useCallback)((asyncFn) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setLoading(true);
+            setError(undefined);
+            if (asyncFn instanceof Promise)
+                yield asyncFn;
+            else
+                return yield asyncFn();
+        }
+        catch (e) {
+            if (process.env.NODE_ENV === "development")
+                console.error(e);
+            setError(e);
+            throw e;
+        }
+        finally {
+            setLoading(false);
+        }
+    }), []);
+    const { functionsToMemoize, other } = Object.entries(functionsToWrap || {}).reduce((r, [k, func]) => {
+        return Object.assign(Object.assign({}, r), (typeof func === "function"
+            ? {
+                functionsToMemoize: Object.assign(Object.assign({}, r.functionsToMemoize), { [k]: func }),
+            }
+            : {
+                other: Object.assign(Object.assign({}, r.other), { [k]: func }),
+            }));
+    }, {
+        functionsToMemoize: {},
+        other: {},
+    });
+    return Object.assign(Object.assign({ process: _process, loading,
+        error,
+        setError,
+        setLoading }, other), Object.entries(functionsToMemoize).reduce((r, [k, v]) => (Object.assign(Object.assign({}, r), { [k]: (0, react_1.useMemo)(() => (...args) => _process(() => v(...args)), [v]) })), {}));
+}
+exports.useRawAsynControl = useRawAsynControl;
+function useAsyncControl(functionsToWrap) {
+    const error = (0, react_1.useState)();
+    const loading = (0, react_1.useState)(false);
+    return useRawAsynControl(functionsToWrap, error, loading);
+}
+exports.useAsyncControl = useAsyncControl;
+/**
+ * This hook provides a way to handle async operations storing the loading state, or the error when it fails, it does not store information returned from the functions.
+ * @param functionsToWrap The functions to wrap in control.
+ * @returns
+ */
+exports.default = useAsyncControl;
+//# sourceMappingURL=useAsyncControl.js.map

package/dist/hooks/useAsyncControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAsyncControl.js","sourceRoot":"","sources":["../../src/hooks/useAsyncControl.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,iCAAuE;AAWvE,SAAgB,iBAAiB,CAC/B,eAA8B,EAC9B,CAAC,KAAK,EAAE,QAAQ,CAAqB,EACrC,CAAC,OAAO,EAAE,UAAU,CAAe;IAEnC,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAAC,CAAO,OAA4C,EAAE,EAAE;QAClF,IAAI,CAAC;YACH,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,IAAI,OAAO,YAAY,OAAO;gBAAE,MAAM,OAAO,CAAC;;gBACzC,OAAO,MAAM,OAAO,EAAE,CAAC;QAC9B,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa;gBAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC7D,QAAQ,CAAC,CAAM,CAAC,CAAC;YACjB,MAAM,CAAC,CAAC;QACV,CAAC;gBAAS,CAAC;YACT,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,CAAA,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,OAAO,CAClD,eAAe,IAAI,EAAE,CACtB,CAAC,MAAM,CACN,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE;QACf,uCACK,CAAC,GACD,CAAC,OAAO,IAAI,KAAK,UAAU;YAC5B,CAAC,CAAC;gBACE,kBAAkB,kCACb,CAAC,CAAC,kBAAkB,KACvB,CAAC,CAAC,CAAC,EAAE,IAAI,GACV;aACF;YACH,CAAC,CAAC;gBACE,KAAK,kCACA,CAAC,CAAC,KAAK,KACV,CAAC,CAAC,CAAC,EAAE,IAAI,GACV;aACF,CAAC,EACN;IACJ,CAAC,EACD;QACE,kBAAkB,EAAE,EAAE;QACtB,KAAK,EAAE,EAAE;KAIV,CACF,CAAC;IAEF,qCACE,OAAO,EAAE,QAAQ,EACjB,OAAO;QACP,KAAK;QACL,QAAQ;QACR,UAAU,IACP,KAAK,GACL,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAC1C,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iCACV,CAAC,KACJ,CAAC,CAAC,CAAC,EAAE,IAAA,eAAO,EACV,GAAG,EAAE,CACH,CAAC,GAAG,IAAW,EAAE,EAAE,CACjB,QAAQ,CAAC,GAAG,EAAE,CAAE,CAAS,CAAC,GAAG,IAAI,CAAC,CAAC,EACvC,CAAC,CAAC,CAAC,CACJ,IACD,EACF,EAAO,CACR,EACD;AACJ,CAAC;AAtED,8CAsEC;AAED,SAAgB,eAAe,CAK7B,eAAmB;IACnB,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAa,CAAC;IACpC,MAAM,OAAO,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEzC,OAAO,iBAAiB,CAAC,eAAe,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;AAC5D,CAAC;AAVD,0CAUC;AAED;;;;GAIG;AACH,kBAAe,eAAe,CAAC"}

package/dist/hooks/useContainedRepositioning.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+/**
+ * This hook takes an html and checks if its outside its parent
+ * If it is, it should move it so it can be totally visible inside the container
+ */
+export default function useContainedRepositioning(focused: boolean, getParent: (el: HTMLElement) => HTMLElement, { offset, scale, offsetLimit, }?: {
+    /** The offset the element will be moved by from the closest bound */
+    offset?: number;
+    /** The scaled element width to be considered. usefull for when the focused element will change size */
+    scale?: number;
+    /** Limit offset */
+    offsetLimit?: number;
+}): {
+    elementToCheck: import("react").RefObject<HTMLDivElement | null>;
+};

package/dist/hooks/useContainedRepositioning.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const debounce_1 = __importDefault(require("lodash/debounce"));
+const react_1 = require("react");
+/**
+ * This hook takes an html and checks if its outside its parent
+ * If it is, it should move it so it can be totally visible inside the container
+ */
+function useContainedRepositioning(focused, getParent, { offset = 16, scale = 1, offsetLimit = Number.POSITIVE_INFINITY, } = {}) {
+    const elementToCheck = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const el = elementToCheck.current;
+        if (!el)
+            return;
+        const curr = el;
+        const relativeParent = getParent(curr);
+        if (process.env.NODE_ENV === "development") {
+            if (window.getComputedStyle(el).position !== "relative")
+                throw new Error("The target element MUST have position relative so it can be moved");
+            if (window.getComputedStyle(relativeParent).position !== "relative")
+                throw new Error("The relative to element MUST have position relative so it can calculate correctly the target position");
+        }
+        if (focused) {
+            curr.style.right = `0px`;
+            const reposition = (0, debounce_1.default)(() => {
+                const alreadyRight = Number(curr.style.right.replace("px", ""));
+                const limitOffset = relativeParent.scrollLeft + relativeParent.clientWidth;
+                const elWidth = curr.clientWidth * scale;
+                const offsetOfScale = (elWidth - curr.clientWidth) / 2;
+                const cardLimit = curr.offsetLeft - offsetOfScale + alreadyRight + elWidth;
+                const exceedingSpace = cardLimit - limitOffset;
+                const offsetLeft = curr.offsetLeft -
+                    offsetOfScale +
+                    alreadyRight -
+                    relativeParent.scrollLeft;
+                const isOverflowedRight = exceedingSpace > 0;
+                const isOverflowedLeft = offsetLeft < 0;
+                const limit = exceedingSpace + -offsetLeft;
+                if (isOverflowedRight) {
+                    const val = Math.min(exceedingSpace - -Math.min(Math.abs(limit / 2), offset), offsetLimit);
+                    curr.style.right = `${val}px`;
+                }
+                if (isOverflowedLeft) {
+                    const val = Math.max(offsetLeft - Math.min(Math.abs(limit) / 2, offset), -offsetLimit);
+                    curr.style.right = `${val}px`;
+                }
+                if (isOverflowedLeft || isOverflowedRight) {
+                    curr.style.zIndex = "1000";
+                }
+            }, 50);
+            reposition();
+            reposition.flush();
+            relativeParent.addEventListener("scroll", reposition, {
+                passive: true
+            });
+            return () => {
+                reposition.cancel();
+                relativeParent.removeEventListener("scroll", reposition);
+                el.style.right = `0px`;
+                const restore = ({ propertyName, currentTarget }) => {
+                    const targetTransformation = window.getComputedStyle(currentTarget).right;
+                    if (propertyName === "right" && targetTransformation === "0px") {
+                        curr.style.zIndex = "";
+                        el.removeEventListener("transitionend", restore);
+                    }
+                };
+                el.addEventListener("transitionend", restore);
+            };
+        }
+    }, [focused]);
+    return {
+        elementToCheck,
+    };
+}
+exports.default = useContainedRepositioning;
+//# sourceMappingURL=useContainedRepositioning.js.map

package/dist/hooks/useContainedRepositioning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContainedRepositioning.js","sourceRoot":"","sources":["../../src/hooks/useContainedRepositioning.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useCustomHistory.d.ts

@@ -0,0 +1,14 @@
+export default function useCustomHistory(): {
+    goBackWithFallback(fallbackRoute: string): void;
+    length: number;
+    action: import("history").Action;
+    location: import("history").Location<unknown>;
+    push(location: import("history").LocationDescriptor<unknown>, state?: unknown): void;
+    replace(location: import("history").LocationDescriptor<unknown>, state?: unknown): void;
+    go(n: number): void;
+    goBack(): void;
+    goForward(): void;
+    block(prompt?: string | boolean | import("history").TransitionPromptHook<unknown> | undefined): import("history").UnregisterCallback;
+    listen(listener: import("history").LocationListener<unknown>): import("history").UnregisterCallback;
+    createHref(location: import("history").LocationDescriptorObject<unknown>): string;
+};

package/dist/hooks/useCustomHistory.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_router_dom_1 = require("react-router-dom");
+function useCustomHistory() {
+    const customHistory = (0, react_router_dom_1.useHistory)();
+    const { state } = (0, react_router_dom_1.useLocation)();
+    return Object.assign(Object.assign({}, customHistory), { goBackWithFallback(fallbackRoute) {
+            if (state === null || state === void 0 ? void 0 : state.internalNavigation)
+                customHistory.goBack();
+            else
+                customHistory.push(fallbackRoute);
+        } });
+}
+exports.default = useCustomHistory;
+//# sourceMappingURL=useCustomHistory.js.map

package/dist/hooks/useCustomHistory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCustomHistory.js","sourceRoot":"","sources":["../../src/hooks/useCustomHistory.ts"],"names":[],"mappings":";;AAAA,uDAA0D;AAG1D,SAAwB,gBAAgB;IACpC,MAAM,aAAa,GAAG,IAAA,6BAAU,GAAE,CAAC;IACnC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,8BAAW,GAA2B,CAAC;IACzD,uCACO,aAAa,KAChB,kBAAkB,CAAC,aAAqB;YACpC,IAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,kBAAkB;gBAAE,aAAa,CAAC,MAAM,EAAE,CAAC;;gBACjD,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC3C,CAAC,IACJ;AACL,CAAC;AAVD,mCAUC"}

package/dist/hooks/useElementFit.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from "react";
+/**
+ * This hook receives a base width of an element and returns how much items fit **vertically** inside the referenced html element
+ *
+ * @param baseWidth The base width of each element
+ */
+export default function useElementFit(baseWidth: number, baseHeight?: number): {
+    /** The amount of items that are able to fit in the available width */
+    howManyItemsFit?: number;
+    /** The amount of items that are able to fit in the available visible space + a row more so it can be scrollable */
+    howManyItemsFitWithExtraRow?: number;
+    /** How many items would fit a single row */
+    howManyItemsByRow?: number;
+    /** How many items until it overflows width */
+    anItemMore?: number;
+    /** The ref to be sent to the element that will receive the items */
+    ref: RefObject<HTMLDivElement | undefined>;
+};