@fajarmaulana/komerce-lp-helper 0.2.2 → 0.3.1

package/dist/components/Form.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useImperativeHandle, useRef } from 'react';
 /**
@@ -37,19 +15,18 @@ import { useImperativeHandle, useRef } from 'react';
  * @property {ComponentPropsWithRef<'form'>} - All attribute of form element.
  * @property {React.ReactNode} [children] - The form’s inner content (inputs, buttons, etc.).
  */
-var Form = function (_a) {
-    var action = _a.action, ref = _a.ref, children = _a.children, props = __rest(_a, ["action", "ref", "children"]);
-    var innerRef = useRef(null);
-    useImperativeHandle(ref, function () { return innerRef.current; });
-    var handleSubmit = function (e) {
+const Form = ({ action, ref, children, ...props }) => {
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current);
+    const handleSubmit = (e) => {
         e.preventDefault();
-        var activeEl = document.activeElement;
+        const activeEl = document.activeElement;
         activeEl.blur();
         if (!innerRef.current)
             return;
-        var formData = new FormData(innerRef.current);
+        const formData = new FormData(innerRef.current);
         action(formData);
     };
-    return (_jsx("form", __assign({}, props, { ref: innerRef, onSubmit: handleSubmit, children: children })));
+    return (_jsx("form", { ...props, ref: innerRef, onSubmit: handleSubmit, children: children }));
 };
 export default Form;

package/dist/components/LazyBackground.js

@@ -18,9 +18,8 @@ import { useLazyBackground } from './hooks';
  * The component renders a `<div>` with a `ref` attached for the lazy observer.
  * The `url` is passed to `useLazyBackground`, which handles loading behavior internally.
  */
-var LazyBackground = function (_a) {
-    var url = _a.url, children = _a.children, className = _a.className;
-    var ref = useLazyBackground({ url: url }).ref;
+const LazyBackground = ({ url, children, className }) => {
+    const { ref } = useLazyBackground({ url });
     return (_jsx("div", { ref: ref, className: className || '', children: children }));
 };
 export default memo(LazyBackground);

package/dist/components/hooks/useLazyBackground.js

@@ -1,19 +1,3 @@
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 import { useEffect, useRef } from 'react';
 /**
  * `useLazyBackground` is a custom React hook that applies a background image
@@ -21,24 +5,22 @@ import { useEffect, useRef } from 'react';
  *
  * @param {TLazyBackground} props - The props object containing the image URL.
  */
-export var useLazyBackground = function (_a) {
-    var url = _a.url;
-    var ref = useRef(null);
-    useEffect(function () {
-        var el = ref.current;
+export const useLazyBackground = ({ url }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
         if (!el)
             return;
-        var observer = new IntersectionObserver(function (_a, obs) {
-            var _b = __read(_a, 1), entry = _b[0];
+        const observer = new IntersectionObserver(([entry], obs) => {
             if (entry.isIntersecting) {
-                el.style.backgroundImage = "url(".concat(url, ")");
+                el.style.backgroundImage = `url(${url})`;
                 obs.unobserve(el);
             }
         });
         observer.observe(el);
-        return function () { return observer.disconnect(); };
+        return () => observer.disconnect();
     }, [url]);
     return {
-        ref: ref,
+        ref,
     };
 };

package/dist/constants/index.js

@@ -1 +1 @@
-export var MOBILE_BOUND = 640;
+export const MOBILE_BOUND = 640;

package/dist/constants/regex.js

@@ -1,40 +1,40 @@
-export var VALID_EMAIL = {
+export const VALID_EMAIL = {
     re: /^(?![.])[A-Za-z0-9._-]+(?<![.])@[A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*\.[A-Za-z]{2,4}$/,
     text: 'masukkan email yang valid',
 };
-export var DOTALPHANUM = {
+export const DOTALPHANUM = {
     re: /^[a-zA-Z0-9._-]+$/,
     text: " hanya boleh berisi huruf, angka, '.', '_' atau '-'",
 };
-export var REPEATED_DOT = {
+export const REPEATED_DOT = {
     re: /(\.\.|__|--)/,
     text: ' tidak boleh berisi simbol berulang',
 };
-export var NUMBER_ONLY = {
+export const NUMBER_ONLY = {
     re: /[^\d]/,
     text: ' hanya boleh berisi angka',
 };
-export var ALPHASPACE = {
+export const ALPHASPACE = {
     re: /^[A-Za-z]+(?: [A-Za-z]+)*$/,
     text: ' hanya boleh berisi huruf dan spasi antar kata',
 };
-export var ANY_UPPERCASE = {
+export const ANY_UPPERCASE = {
     re: /[A-Z]/,
     text: ' harus berisi minimal 1 huruf kapital',
 };
-export var ANY_LOWERCASE = {
+export const ANY_LOWERCASE = {
     re: /[a-z]/,
     text: ' harus berisi minimal 1 huruf kecil',
 };
-export var ANY_NUMBER = {
+export const ANY_NUMBER = {
     re: /\d/,
     text: ' harus berisi minimal 1 angka',
 };
-export var ANY_SYMBOL = {
+export const ANY_SYMBOL = {
     re: /[\W+_]/,
     text: ' harus berisi minimal 1 simbol',
 };
-export var NO_SPACE = {
+export const NO_SPACE = {
     re: /^\S+$/,
     text: ' tidak boleh berisi spasi',
 };

package/dist/hooks/debounce.js

@@ -1,28 +1,3 @@
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useCallback, useEffect, useRef, useState } from 'react';
 /**
@@ -40,14 +15,13 @@ import { useCallback, useEffect, useRef, useState } from 'react';
  * @example
  * const debouncedSearchTerm = useDebounce(searchTerm, 500);
  */
-export function useDebounce(value, delay) {
-    if (delay === void 0) { delay = 500; }
-    var _a = __read(useState(value), 2), debouncedValue = _a[0], setDebouncedValue = _a[1];
-    useEffect(function () {
-        var handler = setTimeout(function () {
+export function useDebounce(value, delay = 500) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const handler = setTimeout(() => {
             setDebouncedValue(value);
         }, delay);
-        return function () {
+        return () => {
             clearTimeout(handler);
         };
     }, [value, delay]);
@@ -68,21 +42,17 @@ export function useDebounce(value, delay) {
  * debouncedSearch('hello'); // Will wait 300ms before calling fetchResults
  */
 export function useDebounceFunc(callback, delay) {
-    var timerRef = useRef(null);
-    var debouncedFunction = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
+    const timerRef = useRef(null);
+    const debouncedFunction = (...args) => {
         if (timerRef.current) {
             clearTimeout(timerRef.current);
         }
-        timerRef.current = setTimeout(function () {
-            callback.apply(void 0, __spreadArray([], __read(args), false));
+        timerRef.current = setTimeout(() => {
+            callback(...args);
         }, delay);
     };
-    useEffect(function () {
-        return function () {
+    useEffect(() => {
+        return () => {
             if (timerRef.current) {
                 clearTimeout(timerRef.current);
             }
@@ -98,18 +68,17 @@ export function useDebounceFunc(callback, delay) {
  *
  * @param {number} [delay=500] - The debounce delay in milliseconds before executing the callback.
  */
-export function useConditionalDebounce(delay) {
-    if (delay === void 0) { delay = 500; }
-    var timeoutRef = useRef(null);
-    var run = useCallback(function (condition, callback) {
+export function useConditionalDebounce(delay = 500) {
+    const timeoutRef = useRef(null);
+    const run = useCallback((condition, callback) => {
         if (timeoutRef.current)
             clearTimeout(timeoutRef.current);
         if (!condition)
             return;
         timeoutRef.current = window.setTimeout(callback, delay);
     }, [delay]);
-    useEffect(function () {
-        return function () {
+    useEffect(() => {
+        return () => {
             if (timeoutRef.current)
                 clearTimeout(timeoutRef.current);
         };

package/dist/hooks/form.js

@@ -1,30 +1,3 @@
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 import { useRef } from 'react';
 import { getById } from '../utils/general';
 /**
@@ -41,54 +14,42 @@ import { getById } from '../utils/general';
  *
  * @param {string[]} [fieldsWithoutNameIds=[]] - A list of field IDs that exist outside the form element.
  */
-export function useForm(fieldsWithoutNameIds) {
-    if (fieldsWithoutNameIds === void 0) { fieldsWithoutNameIds = []; }
-    var form = useRef(null);
-    var fields = function () {
-        var e_1, _a;
-        var result = {};
+export function useForm(fieldsWithoutNameIds = []) {
+    const form = useRef(null);
+    const fields = () => {
+        const result = {};
         if (!form.current)
             return result;
-        var formData = new FormData(form.current);
-        try {
-            for (var _b = __values(formData.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var _d = __read(_c.value, 2), name_1 = _d[0], value = _d[1];
-                var key = name_1;
-                var input = form.current.querySelector("[name=\"".concat(key, "\"]"));
-                var fieldValue = value;
-                if ((input === null || input === void 0 ? void 0 : input.type) === 'checkbox')
-                    fieldValue = input.checked;
-                result[key] = {
-                    field_value: fieldValue,
-                    field_id: (input === null || input === void 0 ? void 0 : input.id) || '',
-                    field_error: form.current.querySelector("#".concat(key, "_error")),
-                    field_info: form.current.querySelector("#".concat(key, "_info")),
-                };
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_1) throw e_1.error; }
+        const formData = new FormData(form.current);
+        for (const [name, value] of formData.entries()) {
+            const key = name;
+            const input = form.current.querySelector(`[name="${key}"]`);
+            let fieldValue = value;
+            if (input?.type === 'checkbox')
+                fieldValue = input.checked;
+            result[key] = {
+                field_value: fieldValue,
+                field_id: input?.id || '',
+                field_error: form.current.querySelector(`#${key}_error`),
+                field_info: form.current.querySelector(`#${key}_info`),
+            };
         }
         return result;
     };
-    var fieldsWithoutName = function () {
-        var result = {};
-        fieldsWithoutNameIds.forEach(function (id) {
-            var field = getById(id);
-            var key = id;
-            var value = field.type === 'radio' || field.type === 'checkbox' ? field.checked : field.value;
+    const fieldsWithoutName = () => {
+        const result = {};
+        fieldsWithoutNameIds.forEach(id => {
+            const field = getById(id);
+            const key = id;
+            const value = field.type === 'radio' || field.type === 'checkbox' ? field.checked : field.value;
             result[key] = {
                 field_value: value,
                 field_id: field.id,
-                field_error: getById("".concat(key, "_error")),
-                field_info: getById("".concat(key, "_info")),
+                field_error: getById(`${key}_error`),
+                field_info: getById(`${key}_info`),
             };
         });
         return result;
     };
-    return { form: form, fields: fields, fieldsWithoutName: fieldsWithoutName };
+    return { form, fields, fieldsWithoutName };
 }

package/dist/hooks/router.js

@@ -1,39 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { useCallback, useMemo } from 'react';
 import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
 /**
@@ -42,16 +6,17 @@ import { useLocation, useNavigate, useParams, useSearchParams } from 'react-rout
  * @returns An object implementing the {@link TUseRouter} interface
  */
 export function useRouter() {
-    var navigate = useNavigate();
-    var location = useLocation();
-    var params = useParams();
-    var _a = __read(useSearchParams(), 1), searchParams = _a[0];
-    var query = useMemo(function () {
-        var queryObj = {};
-        searchParams.forEach(function (value, key) {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const params = useParams();
+    const [searchParams] = useSearchParams();
+    const query = useMemo(() => {
+        const queryObj = {};
+        searchParams.forEach((value, key) => {
             if (queryObj[key]) {
                 queryObj[key] = Array.isArray(queryObj[key])
-                    ? __spreadArray(__spreadArray([], __read(queryObj[key]), false), [value], false) : [queryObj[key], value];
+                    ? [...queryObj[key], value]
+                    : [queryObj[key], value];
             }
             else {
                 queryObj[key] = value;
@@ -59,81 +24,77 @@ export function useRouter() {
         });
         return queryObj;
     }, [searchParams]);
-    var push = useCallback(function (url, options) {
+    const push = useCallback((url, options) => {
         if (typeof url === 'string') {
             navigate(url, options);
         }
         else {
-            var queryString = url.query
+            const queryString = url.query
                 ? '?' +
-                    new URLSearchParams(Object.entries(url.query).map(function (_a) {
-                        var _b = __read(_a, 2), k = _b[0], v = _b[1];
-                        return [k, Array.isArray(v) ? v.join(',') : v];
-                    })).toString()
+                    new URLSearchParams(Object.entries(url.query).map(([k, v]) => [k, Array.isArray(v) ? v.join(',') : v])).toString()
                 : '';
-            var hash = url.hash ? (url.hash.startsWith('#') ? url.hash : "#".concat(url.hash)) : '';
-            navigate("".concat(url.pathname).concat(queryString).concat(hash), options);
+            const hash = url.hash ? (url.hash.startsWith('#') ? url.hash : `#${url.hash}`) : '';
+            navigate(`${url.pathname}${queryString}${hash}`, options);
         }
     }, [navigate]);
-    var route = useCallback(function (pathname, query, options) {
-        var searchParams = new URLSearchParams();
+    const route = useCallback((pathname, query, options) => {
+        const searchParams = new URLSearchParams();
         if (query) {
-            Object.entries(query).forEach(function (_a) {
-                var _b = __read(_a, 2), key = _b[0], value = _b[1];
+            Object.entries(query).forEach(([key, value]) => {
                 if (Array.isArray(value)) {
-                    value.forEach(function (v) { return searchParams.append(key, v); });
+                    value.forEach(v => searchParams.append(key, v));
                 }
                 else {
                     searchParams.set(key, value);
                 }
             });
         }
-        var search = searchParams.toString();
-        var fullPath = search ? "".concat(pathname, "?").concat(search) : pathname;
+        const search = searchParams.toString();
+        const fullPath = search ? `${pathname}?${search}` : pathname;
         navigate(fullPath, options);
     }, [navigate]);
-    var replace = useCallback(function (url, options) {
-        var replaceOptions = __assign(__assign({}, options), { replace: true });
+    const replace = useCallback((url, options) => {
+        const replaceOptions = { ...options, replace: true };
         push(url, replaceOptions);
     }, [push]);
-    var back = useCallback(function () {
+    const back = useCallback(() => {
         navigate(-1);
     }, [navigate]);
-    var next = useCallback(function () {
+    const next = useCallback(() => {
         navigate(1);
     }, [navigate]);
-    var go = useCallback(function (num) {
+    const go = useCallback((num) => {
         navigate(num);
     }, [navigate]);
-    var refresh = useCallback(function () {
+    const refresh = useCallback(() => {
         window.location.reload();
     }, []);
-    var beforePopState = useCallback(function (cb) {
-        var handlePopState = function (event) {
+    const beforePopState = useCallback((cb) => {
+        const handlePopState = (event) => {
             if (!cb(event.state)) {
                 event.preventDefault();
                 window.history.pushState(location.state, '', location.pathname + location.search);
             }
         };
         window.addEventListener('popstate', handlePopState);
-        return function () { return window.removeEventListener('popstate', handlePopState); };
+        return () => window.removeEventListener('popstate', handlePopState);
     }, [location]);
     return {
-        push: push,
-        route: route,
-        replace: replace,
-        back: back,
-        next: next,
-        go: go,
-        refresh: refresh,
+        push,
+        route,
+        replace,
+        back,
+        next,
+        go,
+        refresh,
         path: location.pathname,
         hash: location.hash,
-        fullpath: "".concat(location.pathname).concat(location.search).concat(location.hash),
+        fullpath: `${location.pathname}${location.search}${location.hash}`,
         origin: window.location.origin,
         href: window.location.href,
-        query: query,
-        params: params,
-        beforePopState: beforePopState,
+        query,
+        params,
+        beforePopState,
     };
 }
 /**
@@ -147,11 +108,11 @@ export function useRouter() {
  *  - `updateQuery`: A function to update query parameters
  */
 export function useQueryParams(defaultValues) {
-    var _a = __read(useSearchParams(), 2), searchParams = _a[0], setSearchParams = _a[1];
-    var queryObj = useMemo(function () {
-        var result = __assign({}, defaultValues);
-        searchParams.forEach(function (value, key) {
-            var allValues = searchParams.getAll(key);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const queryObj = useMemo(() => {
+        const result = { ...defaultValues };
+        searchParams.forEach((value, key) => {
+            const allValues = searchParams.getAll(key);
             if (allValues.length > 1) {
                 result[key] = allValues;
             }
@@ -161,16 +122,15 @@ export function useQueryParams(defaultValues) {
         });
         return result;
     }, [searchParams, defaultValues]);
-    var updateQuery = useCallback(function (updates) {
-        var newParams = new URLSearchParams(searchParams);
-        Object.entries(updates).forEach(function (_a) {
-            var _b = __read(_a, 2), key = _b[0], value = _b[1];
+    const updateQuery = useCallback((updates) => {
+        const newParams = new URLSearchParams(searchParams);
+        Object.entries(updates).forEach(([key, value]) => {
             if (value === undefined || value === null) {
                 newParams.delete(key);
             }
             else if (Array.isArray(value)) {
                 newParams.delete(key);
-                value.forEach(function (v) { return newParams.append(key, v); });
+                value.forEach(v => newParams.append(key, v));
             }
             else {
                 newParams.set(key, value);

package/dist/hooks/sectionObserver.js

@@ -1,30 +1,12 @@
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 import { useEffect } from 'react';
 import { getById } from '../utils/general';
-export var useSectionObserver = function (_a) {
-    var triggerRef = _a.triggerRef, targetId = _a.targetId, _b = _a.threshold, threshold = _b === void 0 ? 0.8 : _b;
-    useEffect(function () {
-        var container = getById(targetId);
-        var trigger = triggerRef.current;
+export const useSectionObserver = ({ triggerRef, targetId, threshold = 0.8 }) => {
+    useEffect(() => {
+        const container = getById(targetId);
+        const trigger = triggerRef.current;
         if (!trigger || !container)
             return;
-        var observer = new IntersectionObserver(function (_a) {
-            var _b = __read(_a, 1), entry = _b[0];
+        const observer = new IntersectionObserver(([entry]) => {
             if (entry.isIntersecting) {
                 container.setAttribute('data-visible', 'true');
                 return;
@@ -32,9 +14,9 @@ export var useSectionObserver = function (_a) {
             if (entry.boundingClientRect.top > 0) {
                 container.setAttribute('data-visible', 'false');
             }
-        }, { threshold: threshold });
+        }, { threshold });
         observer.observe(trigger);
-        return function () {
+        return () => {
             observer.disconnect();
         };
     }, [triggerRef, targetId, threshold]);