@onesy/ui-react 1.0.0

package/useLocation/useLocation.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const utils_1 = require("@onesy/utils");
+const useLocation = (props) => {
+    const {} = props || {};
+    const locationReactRouterDOM = ((0, utils_1.isEnvironment)('browser') && !window.navigation) ? (0, react_router_dom_1.useLocation)() : undefined;
+    const [response, setResponse] = react_1.default.useState((0, utils_1.isEnvironment)('browser') ? Object.assign({}, window.location) : {});
+    const onUpdate = react_1.default.useCallback((0, utils_1.debounce)((value = Object.assign({}, window.location)) => {
+        setResponse(value);
+    }, 40), []);
+    // React router DOM
+    react_1.default.useEffect(() => {
+        if (locationReactRouterDOM)
+            onUpdate(locationReactRouterDOM);
+    }, [locationReactRouterDOM]);
+    const method = react_1.default.useCallback(() => {
+        onUpdate();
+    }, []);
+    react_1.default.useEffect(() => {
+        if (!(0, utils_1.isEnvironment)('browser'))
+            return;
+        // New API
+        if (window.navigation) {
+            window.navigation.addEventListener('navigate', method);
+        }
+        // Old method
+        else {
+            window.addEventListener('popstate', method);
+            window.addEventListener('hashchange', method);
+        }
+        return () => {
+            // Clean up
+            // New API
+            if (window.navigation) {
+                window.navigation.removeEventListener('navigate', method);
+            }
+            // Old method
+            else {
+                window.removeEventListener('popstate', method);
+                window.removeEventListener('hashchange', method);
+            }
+        };
+    }, []);
+    return response;
+};
+useLocation.displayName = 'onesy-UseLocation';
+exports.default = useLocation;

package/useMediaQuery/index.d.ts

@@ -0,0 +1 @@
+export { default } from './useMediaQuery';

package/useMediaQuery/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var useMediaQuery_1 = require("./useMediaQuery");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useMediaQuery_1).default; } });

package/useMediaQuery/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/useMediaQuery/index.js",
+  "types": "./index.d.ts"
+}

package/useMediaQuery/useMediaQuery.d.ts

@@ -0,0 +1,9 @@
+export interface IOptionsUseMediaQuery {
+    element?: any;
+    initial?: boolean;
+}
+declare const useMediaQuery: {
+    (props: string, options?: IOptionsUseMediaQuery): any;
+    displayName: string;
+};
+export default useMediaQuery;

package/useMediaQuery/useMediaQuery.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const useMediaQuery = (props, options) => {
+    var _a, _b, _c;
+    const element = options === null || options === void 0 ? void 0 : options.element;
+    const [root, setRoot] = react_1.default.useState();
+    const [matches, setMatches] = react_1.default.useState((options === null || options === void 0 ? void 0 : options.initial) !== undefined ? options.initial : ((0, utils_1.isEnvironment)('browser') && ((_c = (_b = (((_a = element === null || element === void 0 ? void 0 : element.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) || window)) === null || _b === void 0 ? void 0 : _b.matchMedia(props)) === null || _c === void 0 ? void 0 : _c.matches)));
+    const refs = {
+        root: react_1.default.useRef(root),
+        responsive: react_1.default.useRef({}),
+        matches: react_1.default.useRef(matches)
+    };
+    refs.matches.current = matches;
+    // Root
+    react_1.default.useEffect(() => {
+        var _a;
+        const rootNew = ((_a = element === null || element === void 0 ? void 0 : element.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) || window;
+        setRoot(rootNew);
+        refs.root.current = rootNew;
+    }, [element]);
+    const method = react_1.default.useCallback((event) => {
+        if (refs.matches.current !== event.matches)
+            setMatches(event.matches);
+    }, []);
+    // Watch
+    react_1.default.useEffect(() => {
+        if (!root)
+            return;
+        const mediaQuery = root.matchMedia(props);
+        // Add new event listener
+        mediaQuery.addEventListener('change', method);
+        if (refs.matches.current !== (mediaQuery === null || mediaQuery === void 0 ? void 0 : mediaQuery.matches))
+            setMatches(mediaQuery === null || mediaQuery === void 0 ? void 0 : mediaQuery.matches);
+        return () => {
+            // Remove event listener
+            if (mediaQuery)
+                mediaQuery.removeEventListener('change', method);
+        };
+    }, [root, props]);
+    return matches;
+};
+useMediaQuery.displayName = 'onesy-UseMediaQuery';
+exports.default = useMediaQuery;

package/useQuery/index.d.ts

@@ -0,0 +1 @@
+export { default } from './useQuery';

package/useQuery/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var useQuery_1 = require("./useQuery");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useQuery_1).default; } });

package/useQuery/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/useQuery/index.js",
+  "types": "./index.d.ts"
+}

package/useQuery/useQuery.d.ts

@@ -0,0 +1,5 @@
+declare const useQuery: {
+    (): URLSearchParams;
+    displayName: string;
+};
+export default useQuery;

package/useQuery/useQuery.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const useQuery = () => {
+    const { search } = (0, react_router_dom_1.useLocation)();
+    const value = react_1.default.useMemo(() => new URLSearchParams(search), [search]);
+    return value;
+};
+useQuery.displayName = 'onesy-UseQuery';
+exports.default = useQuery;

package/useScroll/index.d.ts

@@ -0,0 +1 @@
+export { default } from './useScroll';

package/useScroll/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var useScroll_1 = require("./useScroll");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useScroll_1).default; } });

package/useScroll/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/useScroll/index.js",
+  "types": "./index.d.ts"
+}

package/useScroll/useScroll.d.ts

@@ -0,0 +1,12 @@
+export declare type TUseScrollDirection = 'up' | 'down';
+export interface IUseScroll {
+    offset?: number;
+    direction?: TUseScrollDirection;
+    target?: HTMLElement | Window;
+    element?: any;
+}
+declare const useScroll: {
+    (props: IUseScroll): boolean;
+    displayName: string;
+};
+export default useScroll;

package/useScroll/useScroll.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const useScroll = (props) => {
+    const { offset, direction, element, target } = props;
+    const [response, setResponse] = react_1.default.useState(false);
+    const [root, setRoot] = react_1.default.useState();
+    const refs = {
+        root: react_1.default.useRef(root),
+        previous: react_1.default.useRef(0),
+        offset: react_1.default.useRef(),
+        direction: react_1.default.useRef(),
+        response: react_1.default.useRef(response)
+    };
+    refs.root.current = root;
+    refs.offset.current = offset;
+    refs.direction.current = direction;
+    refs.response.current = response;
+    // Root
+    react_1.default.useEffect(() => {
+        var _a;
+        const rootNew = target || ((_a = element === null || element === void 0 ? void 0 : element.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) || window;
+        setRoot(rootNew);
+        refs.root.current = rootNew;
+    }, [target, element]);
+    const method = react_1.default.useCallback(() => {
+        var _a, _b;
+        if (!refs.root.current)
+            return;
+        const value = ((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== undefined ? refs.root.current.scrollTop : (_b = refs.root.current) === null || _b === void 0 ? void 0 : _b.scrollY;
+        let responseNew = true;
+        // Direction
+        if (refs.direction.current !== undefined)
+            responseNew = responseNew && ((refs.direction.current === 'down' && value > refs.previous.current) || (refs.direction.current === 'up' && value < refs.previous.current));
+        // Offset
+        if (refs.offset.current !== undefined)
+            responseNew = responseNew && (value > refs.offset.current);
+        if (refs.response.current !== responseNew)
+            setResponse(responseNew);
+        // Previous
+        refs.previous.current = value;
+    }, []);
+    react_1.default.useEffect(() => {
+        // Add new event listener
+        if (root)
+            root.addEventListener('scroll', method);
+        method();
+        return () => {
+            // Remove previous event listener
+            if (root)
+                root.removeEventListener('scroll', method);
+        };
+    }, [root]);
+    return response;
+};
+useScroll.displayName = 'onesy-UseScroll';
+exports.default = useScroll;

package/useSubscription/index.d.ts

@@ -0,0 +1 @@
+export { default } from './useSubscription';

package/useSubscription/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var useSubscription_1 = require("./useSubscription");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useSubscription_1).default; } });

package/useSubscription/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/useSubscription/index.js",
+  "types": "./index.d.ts"
+}

package/useSubscription/useSubscription.d.ts

@@ -0,0 +1,3 @@
+import OnesySubscription from '@onesy/subscription';
+declare const useSubscription: <Type extends unknown = undefined>(onesySubscription: OnesySubscription, method?: any, value?: any) => Type;
+export default useSubscription;

package/useSubscription/useSubscription.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const useSubscription = (onesySubscription, method, value) => {
+    // an array of the value
+    // we are getting the same reference value
+    // from some of the subscriptions
+    // in order for rerender to be made
+    const [response, setResponse] = react_1.default.useState([value !== undefined ? value : onesySubscription === null || onesySubscription === void 0 ? void 0 : onesySubscription.value]);
+    react_1.default.useEffect(() => {
+        if (value !== undefined) {
+            if ((0, utils_1.is)('function', onesySubscription.init))
+                onesySubscription.init(Object.assign(Object.assign({}, value), { loaded: true }));
+        }
+    }, []);
+    react_1.default.useEffect(() => {
+        if (!(0, utils_1.is)('function', onesySubscription === null || onesySubscription === void 0 ? void 0 : onesySubscription.subscribe))
+            return;
+        const subscription = onesySubscription.subscribe(async (valueItem) => {
+            if ((0, utils_1.is)('function', method))
+                await method(valueItem, setResponse);
+            else
+                setResponse([valueItem]);
+        });
+        if (onesySubscription.value !== undefined)
+            setResponse([onesySubscription.value]);
+        return () => {
+            if (subscription)
+                subscription.unsubscribe();
+        };
+    }, [onesySubscription]);
+    return response[0];
+};
+exports.default = useSubscription;

package/useSwipe/index.d.ts

@@ -0,0 +1 @@
+export { default } from './useSwipe';

package/useSwipe/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var useSwipe_1 = require("./useSwipe");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useSwipe_1).default; } });

package/useSwipe/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/useSwipe/index.js",
+  "types": "./index.d.ts"
+}

package/useSwipe/useSwipe.d.ts

@@ -0,0 +1,18 @@
+export interface IOptionsUseSwipe {
+    open?: boolean;
+    min?: number;
+    direction?: 'top' | 'left' | 'right' | 'bottom';
+    touchAnywhere?: boolean;
+    flick?: boolean;
+    flickTreshold?: number;
+}
+export interface IResponseUseSwipe {
+    value?: number;
+    valuePercentage?: number;
+    position?: string;
+}
+declare const useSwipe: {
+    (element: HTMLElement, options_?: IOptionsUseSwipe): IResponseUseSwipe;
+    displayName: string;
+};
+export default useSwipe;

package/useSwipe/useSwipe.js

@@ -0,0 +1,138 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const optionsDefault = {
+    flick: true,
+    flickTreshold: 140
+};
+const useSwipe = (element, options_ = {}) => {
+    const [response, setResponse] = react_1.default.useState();
+    const [touch, setTouch] = react_1.default.useState(false);
+    const options = (0, utils_1.merge)(options_, optionsDefault);
+    const refs = {
+        rect: react_1.default.useRef(undefined),
+        element: react_1.default.useRef(undefined),
+        options: react_1.default.useRef(options),
+        response: react_1.default.useRef(undefined),
+        touch: react_1.default.useRef(undefined),
+        previous: react_1.default.useRef(undefined),
+        previousMouseMove: react_1.default.useRef(undefined)
+    };
+    refs.options.current = options;
+    refs.response.current = response;
+    refs.touch.current = touch;
+    const onTouchStart = react_1.default.useCallback((event) => setTouch(event), []);
+    const getMinMax = react_1.default.useCallback(() => {
+        let min;
+        let max;
+        const optionsMin = refs.options.current.min || 0;
+        if (refs.options.current.direction === 'top') {
+            min = refs.rect.current.top;
+            max = refs.rect.current.bottom - optionsMin;
+        }
+        if (refs.options.current.direction === 'left') {
+            min = refs.rect.current.left;
+            max = refs.rect.current.right - optionsMin;
+        }
+        if (refs.options.current.direction === 'right') {
+            min = window.innerWidth - refs.rect.current.left - optionsMin;
+            max = min + refs.rect.current.width - optionsMin;
+        }
+        if (refs.options.current.direction === 'bottom') {
+            min = window.innerHeight - refs.rect.current.top - optionsMin;
+            max = min + refs.rect.current.height - optionsMin;
+        }
+        return {
+            min,
+            max
+        };
+    }, []);
+    const onTouchEnd = react_1.default.useCallback(() => {
+        const newResponse = Object.assign({}, refs.response.current);
+        const { min, max } = getMinMax();
+        let isFlick = false;
+        if (refs.options.current.flick) {
+            const now = new Date().getTime();
+            const flick = (now - refs.previousMouseMove.current <= refs.options.current.flickTreshold) && (newResponse.valuePercentage < 100);
+            if (flick)
+                isFlick = true;
+        }
+        newResponse.value = ((['left', 'top'].includes(refs.options.current.direction) && (newResponse.valuePercentage < 50 || isFlick)) ||
+            (['right', 'bottom'].includes(refs.options.current.direction) && (newResponse.valuePercentage > 50 && !isFlick))) ? min : max;
+        newResponse.position = (newResponse.valuePercentage < 50 || isFlick) ? 'min' : 'max';
+        newResponse.min = min;
+        newResponse.max = max;
+        newResponse.flick = isFlick;
+        refs.previous.current = undefined;
+        setTouch(false);
+        setResponse(newResponse);
+    }, [response]);
+    const onTouchMove = react_1.default.useCallback((event) => {
+        const newResponse = Object.assign({}, refs.response.current);
+        const { clientX: x_, clientY: y_ } = event.touches[0];
+        const { clientX: pX, clientY: pY } = refs.previous.current.touches[0];
+        const x = pX - x_;
+        const y = pY - y_;
+        const { top = 0, left = 0, width = 0, height = 0 } = (element === null || element === void 0 ? void 0 : element.getBoundingClientRect()) || {};
+        // value
+        let value_;
+        const { min, max } = getMinMax();
+        if (refs.options.current.direction === 'top') {
+            value_ = top - y;
+        }
+        if (refs.options.current.direction === 'left') {
+            value_ = left - x;
+        }
+        if (refs.options.current.direction === 'right') {
+            value_ = width - (window.innerWidth - left) - x;
+        }
+        if (refs.options.current.direction === 'bottom') {
+            value_ = height - (window.innerHeight - top) - y;
+        }
+        newResponse.min = min;
+        newResponse.max = max;
+        newResponse.value = (0, utils_1.clamp)(value_, min, max);
+        newResponse.valuePercentage = (0, utils_1.percentageFromValueWithinRange)(newResponse.value, min, max);
+        if (['bottom', 'right'].includes(refs.options.current.direction))
+            newResponse.valuePercentage = 100 - newResponse.valuePercentage;
+        // Only value move at touchmove
+        newResponse.position = undefined;
+        // previous mouse move
+        refs.previousMouseMove.current = new Date().getTime();
+        setResponse(newResponse);
+    }, [element, response]);
+    react_1.default.useEffect(() => {
+        const onTouchMoveMethod = (event) => {
+            // Workaround for proper element for touchmove
+            if (refs.options.current.open && refs.previous.current && ((refs.options.current.touchAnywhere || refs.touch.current) || element.contains(document.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY)))) {
+                if (!refs.touch.current)
+                    setTouch(true);
+                onTouchMove(event);
+            }
+            refs.previous.current = event;
+        };
+        if (element) {
+            refs.element.current = element;
+            refs.rect.current = element.getBoundingClientRect();
+            element.addEventListener('touchstart', onTouchStart, { passive: true });
+            const rootDocument = (element === null || element === void 0 ? void 0 : element.ownerDocument) || window.document;
+            rootDocument.addEventListener('touchend', onTouchEnd, { passive: true });
+            rootDocument.addEventListener('touchmove', onTouchMoveMethod, { passive: true });
+        }
+        return () => {
+            // Remove previous event listeners
+            if (element)
+                element.removeEventListener('touchstart', onTouchStart);
+            const rootDocument = (element === null || element === void 0 ? void 0 : element.ownerDocument) || window.document;
+            rootDocument.removeEventListener('touchend', onTouchEnd);
+            rootDocument.removeEventListener('touchmove', onTouchMoveMethod);
+        };
+    }, [element]);
+    return response;
+};
+useSwipe.displayName = 'onesy-UseSwipe';
+exports.default = useSwipe;

package/useVisible/index.d.ts

@@ -0,0 +1 @@
+export { default } from './useVisible';

package/useVisible/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var useVisible_1 = require("./useVisible");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useVisible_1).default; } });

package/useVisible/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/useVisible/index.js",
+  "types": "./index.d.ts"
+}

package/useVisible/useVisible.d.ts

@@ -0,0 +1,23 @@
+export interface IUseVisibleResponse extends IntersectionObserverEntry {
+    visible?: boolean;
+    percentage?: number;
+}
+export interface IUseVisible {
+    element: HTMLElement;
+    visibleDefault?: boolean;
+    options?: IntersectionObserverInit;
+    addClasses?: boolean;
+    classes?: {
+        in?: string;
+    };
+    addStyles?: boolean;
+    styles?: {
+        in?: any;
+        out?: any;
+    };
+}
+declare const useVisible: {
+    (props: IUseVisible): IUseVisibleResponse;
+    displayName: string;
+};
+export default useVisible;

package/useVisible/useVisible.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const useVisible = (props) => {
+    const { element, visibleDefault, options, addClasses, classes = {
+        in: 'onesy-visible'
+    }, addStyles, styles } = props;
+    const [response, setResponse] = react_1.default.useState({ visible: visibleDefault !== undefined ? visibleDefault : false });
+    const [root, setRoot] = react_1.default.useState();
+    const refs = {
+        root: react_1.default.useRef(root),
+        response: react_1.default.useRef(response),
+        addClasses: react_1.default.useRef(addClasses),
+        classes: react_1.default.useRef(classes),
+        addStyles: react_1.default.useRef(addStyles),
+        styles: react_1.default.useRef(styles)
+    };
+    refs.root.current = root;
+    refs.response.current = response;
+    refs.addClasses.current = addClasses;
+    refs.classes.current = classes;
+    refs.addStyles.current = addStyles;
+    refs.styles.current = styles;
+    // Root
+    react_1.default.useEffect(() => {
+        const rootNew = element;
+        setRoot(rootNew);
+        refs.root.current = rootNew;
+    }, [element]);
+    const method = react_1.default.useCallback((entries) => {
+        entries.forEach(entry => {
+            var _a, _b, _c;
+            const properties = ['boundingClientRect', 'intersectionRatio', 'intersectionRect', 'isIntersecting', 'isVisible', 'rootBounds', 'target', 'time'];
+            const responseNew = {
+                visible: !!entry.isIntersecting,
+                percentage: entry.intersectionRatio
+            };
+            properties.forEach(property => responseNew[property] = entry[property]);
+            const target = entry.target;
+            // classes
+            if (refs.addClasses.current) {
+                const visibleClass = ((_a = refs.classes.current) === null || _a === void 0 ? void 0 : _a.in) || 'onesy-visible';
+                if (responseNew.visible)
+                    target.classList.add(visibleClass);
+                else
+                    target.classList.remove(visibleClass);
+            }
+            // styles
+            if (refs.addStyles.current) {
+                const visibleStyles = ((_b = refs.styles.current) === null || _b === void 0 ? void 0 : _b.in) || {};
+                const notVisibleStyles = ((_c = refs.styles.current) === null || _c === void 0 ? void 0 : _c.out) || {};
+                if (responseNew.visible)
+                    Object.keys(visibleStyles).forEach(item => target.style[item] = visibleStyles[item]);
+                else
+                    Object.keys(notVisibleStyles).forEach(item => target.style[item] = notVisibleStyles[item]);
+            }
+            setResponse(responseNew);
+        });
+    }, []);
+    react_1.default.useEffect(() => {
+        if (!((0, utils_1.isEnvironment)('browser') && 'IntersectionObserver' in window))
+            return;
+        // Add new observer listener
+        const observer = new IntersectionObserver(method, options);
+        if (root) {
+            observer.observe(root);
+        }
+        return () => {
+            // Clean up
+            observer.disconnect();
+        };
+    }, [root, options === null || options === void 0 ? void 0 : options.root, options === null || options === void 0 ? void 0 : options.rootMargin, (0, utils_1.hash)(options === null || options === void 0 ? void 0 : options.threshold)]);
+    return response;
+};
+useVisible.displayName = 'onesy-UseVisible';
+exports.default = useVisible;