@studiometa/js-toolkit 2.0.1 → 2.2.0-alpha.1

package/Base/managers/RefsManager.js

@@ -1,78 +1,50 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class RefsManager {
-  constructor(base, element, refs, eventsManager) {
-    __publicField(this, "__element");
-    __publicField(this, "__refs");
-    __publicField(this, "__base");
-    __publicField(this, "__eventsManager");
-    Object.defineProperties(this, {
-      __element: {
-        enumerable: false,
-        writable: false,
-        value: element
-      },
-      __refs: {
-        enumerable: false,
-        writable: false,
-        value: refs
-      },
-      __base: {
-        enumerable: false,
-        writable: false,
-        value: base
-      },
-      __eventsManager: {
-        enumerable: false,
-        writable: false,
-        value: eventsManager
-      }
-    });
-  }
-  registerAll() {
-    this.__refs.forEach((refName) => this.__register(refName));
+import AbstractManager from "./AbstractManager.js";
+function normalizeRefName(name) {
+  return name.endsWith("[]") ? name.replace(/\[\]$/, "") : name;
+}
+function __filterRefsBelongingToInstance(that, ref) {
+  let ancestor = ref.parentElement;
+  while (ancestor && ancestor.dataset.component === void 0) {
+    ancestor = ancestor.parentElement;
   }
-  unregisterAll() {
-    this.__refs.forEach((refName) => this.__unregister(refName));
+  return ancestor === null || ancestor === that.__element;
+}
+function __register(that, refName) {
+  const isMultiple = refName.endsWith("[]");
+  const propName = normalizeRefName(refName);
+  const refs = Array.from(that.__element.querySelectorAll(`[data-ref="${refName}"]`)).filter((ref) => __filterRefsBelongingToInstance(that, ref));
+  if (!isMultiple && refs.length > 1) {
+    console.warn(`[${that.__base.$options.name}]`, `The "${refName}" ref has been found multiple times.`, "Did you forgot to add the `[]` suffix to its name?");
   }
-  __register(refName) {
-    const isMultiple = refName.endsWith("[]");
-    const propName = RefsManager.normalizeRefName(refName);
-    const refs = Array.from(this.__element.querySelectorAll(`[data-ref="${refName}"]`)).filter((ref) => this.__filterRefsBelongingToInstance(ref));
-    if (!isMultiple && refs.length > 1) {
-      console.warn(`[${this.__base.$options.name}]`, `The "${refName}" ref has been found multiple times.`, "Did you forgot to add the `[]` suffix to its name?");
-    }
-    if (!isMultiple && refs.length <= 1 && refs[0] === void 0) {
-      console.warn(`[${this.__base.$options.name}]`, `The "${refName}" ref is missing.`, `Is there an \`[data-ref="${refName}"]\` element in the component's scope?`);
-      return;
-    }
-    this.__eventsManager.bindRef(refName, refs);
-    Object.defineProperty(this, propName, {
-      value: isMultiple || refs.length > 1 ? refs : refs[0],
-      enumerable: true,
-      configurable: true
-    });
+  if (!isMultiple && refs.length <= 1 && refs[0] === void 0) {
+    console.warn(`[${that.__base.$options.name}]`, `The "${refName}" ref is missing.`, `Is there an \`[data-ref="${refName}"]\` element in the component's scope?`);
+    return;
   }
-  __unregister(refName) {
-    const propName = RefsManager.normalizeRefName(refName);
-    const refs = Array.isArray(this[propName]) ? this[propName] : [this[propName]];
-    this.__eventsManager.unbindRef(refName, refs);
+  that.__eventsManager.bindRef(refName, refs);
+  Object.defineProperty(that, propName, {
+    value: isMultiple || refs.length > 1 ? refs : refs[0],
+    enumerable: true,
+    configurable: true
+  });
+}
+function __unregister(that, refName) {
+  const propName = normalizeRefName(refName);
+  const refs = Array.isArray(that[propName]) ? that[propName] : [that[propName]];
+  that.__eventsManager.unbindRef(refName, refs);
+}
+class RefsManager extends AbstractManager {
+  get __refs() {
+    var _a;
+    return (_a = this.__config.refs) != null ? _a : [];
   }
-  static normalizeRefName(name) {
-    return name.endsWith("[]") ? name.replace(/\[\]$/, "") : name;
+  registerAll() {
+    this.__refs.forEach((refName) => __register(this, refName));
   }
-  __filterRefsBelongingToInstance(ref) {
-    let ancestor = ref.parentElement;
-    while (ancestor && ancestor.dataset.component === void 0) {
-      ancestor = ancestor.parentElement;
-    }
-    return ancestor === null || ancestor === this.__element;
+  unregisterAll() {
+    this.__refs.forEach((refName) => __unregister(this, refName));
   }
 }
 export {
-  RefsManager as default
+  RefsManager as default,
+  normalizeRefName
 };

package/Base/managers/ResponsiveOptionsManager.cjs

@@ -0,0 +1,62 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/Base/managers/ResponsiveOptionsManager.js
+var ResponsiveOptionsManager_exports = {};
+__export(ResponsiveOptionsManager_exports, {
+  default: () => ResponsiveOptionsManager
+});
+module.exports = __toCommonJS(ResponsiveOptionsManager_exports);
+var import_OptionsManager = __toESM(require("./OptionsManager.cjs"), 1);
+var import_services = require("../../services/index.cjs");
+function __getResponsiveName(that, name) {
+  const { breakpoint } = (0, import_services.useResize)().props();
+  if (!breakpoint) {
+    return name;
+  }
+  let responsiveName = name;
+  const propertyName = (0, import_OptionsManager.__getPropertyName)(name);
+  const regex = new RegExp(`${propertyName}:(.+)$`);
+  Object.keys(that.__element.dataset).filter((optionName) => regex.test(optionName)).forEach((optionName) => {
+    const [, breakpoints] = optionName.match(regex);
+    const isInBreakpoint = breakpoints.split(":").includes(breakpoint);
+    if (isInBreakpoint) {
+      responsiveName = optionName.replace(/^option/, "");
+    }
+  });
+  return responsiveName;
+}
+var ResponsiveOptionsManager = class extends import_OptionsManager.default {
+  get(name, config) {
+    if (!config.responsive) {
+      return super.get(name, config);
+    }
+    return super.get(__getResponsiveName(this, name), config);
+  }
+  set(name, value, config) {
+    if (!config.responsive) {
+      super.set(name, value, config);
+      return;
+    }
+    console.warn(`[${this.__config.name}]`, "Responsive options are read-only.");
+  }
+};
+if (module.exports.default) module.exports = module.exports.default;

package/Base/managers/ResponsiveOptionsManager.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Class options to manage options as data attributes on an HTML element.
+ */
+export default class ResponsiveOptionsManager extends OptionsManager {
+    /**
+     * Get an option value.
+     *
+     * @param   {string} name The option name.
+     * @param   {ResponsiveOptionObject} config The option configuration.
+     * @returns {any}
+     */
+    get(name: string, config: ResponsiveOptionObject): any;
+    /**
+     * Set an option value.
+     *
+     * @param {string} name The option name.
+     * @param {any} value The new value.
+     * @param {ResponsiveOptionObject} config The option configuration.
+     */
+    set(name: string, value: any, config: ResponsiveOptionObject): void;
+}
+export type OptionObject = import('./OptionsManager.js').OptionObject;
+export type ResponsiveOptionObject = OptionObject & {
+    responsive?: boolean;
+};
+import OptionsManager from "./OptionsManager.js";

package/Base/managers/ResponsiveOptionsManager.js

@@ -0,0 +1,37 @@
+import OptionsManager, { __getPropertyName } from "./OptionsManager.js";
+import { useResize } from "../../services/index.js";
+function __getResponsiveName(that, name) {
+  const { breakpoint } = useResize().props();
+  if (!breakpoint) {
+    return name;
+  }
+  let responsiveName = name;
+  const propertyName = __getPropertyName(name);
+  const regex = new RegExp(`${propertyName}:(.+)$`);
+  Object.keys(that.__element.dataset).filter((optionName) => regex.test(optionName)).forEach((optionName) => {
+    const [, breakpoints] = optionName.match(regex);
+    const isInBreakpoint = breakpoints.split(":").includes(breakpoint);
+    if (isInBreakpoint) {
+      responsiveName = optionName.replace(/^option/, "");
+    }
+  });
+  return responsiveName;
+}
+class ResponsiveOptionsManager extends OptionsManager {
+  get(name, config) {
+    if (!config.responsive) {
+      return super.get(name, config);
+    }
+    return super.get(__getResponsiveName(this, name), config);
+  }
+  set(name, value, config) {
+    if (!config.responsive) {
+      super.set(name, value, config);
+      return;
+    }
+    console.warn(`[${this.__config.name}]`, "Responsive options are read-only.");
+  }
+}
+export {
+  ResponsiveOptionsManager as default
+};

package/Base/managers/ServicesManager.cjs

@@ -36,6 +36,7 @@ var import_resize = __toESM(require("../../services/resize.cjs"), 1);
 var import_scroll = __toESM(require("../../services/scroll.cjs"), 1);
 var import_key = __toESM(require("../../services/key.cjs"), 1);
 var import_load = __toESM(require("../../services/load.cjs"), 1);
+var import_AbstractManager = __toESM(require("./AbstractManager.cjs"), 1);
 var import_utils = require("../utils.cjs");
 var SERVICES_MAP = {
   scrolled: import_scroll.default,
@@ -46,17 +47,10 @@ var SERVICES_MAP = {
   loaded: import_load.default
 };
 var SERVICE_NAMES = Object.keys(SERVICES_MAP);
-var ServicesManager = class {
-  constructor(instance) {
-    __publicField(this, "__base");
+var ServicesManager = class extends import_AbstractManager.default {
+  constructor() {
+    super(...arguments);
     __publicField(this, "__customServices", {});
-    Object.defineProperties(this, {
-      __base: {
-        enumerable: false,
-        writable: false,
-        value: instance
-      }
-    });
   }
   get __services() {
     return {
@@ -85,7 +79,7 @@ var ServicesManager = class {
     const { add } = this.__services[service]();
     const self = this;
     function serviceHandler(...args) {
-      self.__base.__callMethod(service, ...args);
+      return self.__base.__callMethod(service, ...args);
     }
     add(this.__base.$id, serviceHandler);
     return this.disable.bind(this, service);

package/Base/managers/ServicesManager.d.ts

@@ -7,17 +7,7 @@
  *
  * @todo Add support for disabled services on mount when the method is defined.
  */
-export default class ServicesManager {
-    /**
-     * Class constructor.
-     * @param {Base} instance The Base instance.
-     */
-    constructor(instance: Base);
-    /**
-     * @type {Base}
-     * @private
-     */
-    private __base;
+export default class ServicesManager extends AbstractManager {
     /**
      * @type {Record<string, () => ServiceInterface>}
      */
@@ -101,6 +91,7 @@ export type ServiceName = keyof {
     keyed: typeof useKey;
     loaded: typeof useLoad;
 } | string;
+import AbstractManager from "./AbstractManager.js";
 declare namespace SERVICES_MAP {
     export { useScroll as scrolled };
     export { useResize as resized };

package/Base/managers/ServicesManager.js

@@ -10,6 +10,7 @@ import useResize from "../../services/resize.js";
 import useScroll from "../../services/scroll.js";
 import useKey from "../../services/key.js";
 import useLoad from "../../services/load.js";
+import AbstractManager from "./AbstractManager.js";
 import { hasMethod } from "../utils.js";
 const SERVICES_MAP = {
   scrolled: useScroll,
@@ -20,17 +21,10 @@ const SERVICES_MAP = {
   loaded: useLoad
 };
 const SERVICE_NAMES = Object.keys(SERVICES_MAP);
-class ServicesManager {
-  constructor(instance) {
-    __publicField(this, "__base");
+class ServicesManager extends AbstractManager {
+  constructor() {
+    super(...arguments);
     __publicField(this, "__customServices", {});
-    Object.defineProperties(this, {
-      __base: {
-        enumerable: false,
-        writable: false,
-        value: instance
-      }
-    });
   }
   get __services() {
     return {
@@ -59,7 +53,7 @@ class ServicesManager {
     const { add } = this.__services[service]();
     const self = this;
     function serviceHandler(...args) {
-      self.__base.__callMethod(service, ...args);
+      return self.__base.__callMethod(service, ...args);
     }
     add(this.__base.$id, serviceHandler);
     return this.disable.bind(this, service);

package/decorators/index.cjs

@@ -29,6 +29,7 @@ __export(decorators_exports, {
   withFreezedOptions: () => import_withFreezedOptions.default,
   withIntersectionObserver: () => import_withIntersectionObserver.default,
   withMountWhenInView: () => import_withMountWhenInView.default,
+  withResponsiveOptions: () => import_withResponsiveOptions.default,
   withScrolledInView: () => import_withScrolledInView.default,
   withVue2: () => import_withVue2.default
 });
@@ -40,6 +41,7 @@ var import_withExtraConfig = __toESM(require("./withExtraConfig.cjs"), 1);
 var import_withFreezedOptions = __toESM(require("./withFreezedOptions.cjs"), 1);
 var import_withIntersectionObserver = __toESM(require("./withIntersectionObserver.cjs"), 1);
 var import_withMountWhenInView = __toESM(require("./withMountWhenInView.cjs"), 1);
+var import_withResponsiveOptions = __toESM(require("./withResponsiveOptions.cjs"), 1);
 var import_withScrolledInView = __toESM(require("./withScrolledInView.cjs"), 1);
 var import_withVue2 = __toESM(require("./withVue2.cjs"), 1);
 if (module.exports.default) module.exports = module.exports.default;

package/decorators/index.d.ts

@@ -5,5 +5,6 @@ export { default as withExtraConfig } from "./withExtraConfig.js";
 export { default as withFreezedOptions } from "./withFreezedOptions.js";
 export { default as withIntersectionObserver } from "./withIntersectionObserver.js";
 export { default as withMountWhenInView } from "./withMountWhenInView.js";
+export { default as withResponsiveOptions } from "./withResponsiveOptions.js";
 export { default as withScrolledInView } from "./withScrolledInView.js";
 export { default as withVue2 } from "./withVue2.js";

package/decorators/index.js

@@ -5,8 +5,9 @@ import { default as default5 } from "./withExtraConfig.js";
 import { default as default6 } from "./withFreezedOptions.js";
 import { default as default7 } from "./withIntersectionObserver.js";
 import { default as default8 } from "./withMountWhenInView.js";
-import { default as default9 } from "./withScrolledInView.js";
-import { default as default10 } from "./withVue2.js";
+import { default as default9 } from "./withResponsiveOptions.js";
+import { default as default10 } from "./withScrolledInView.js";
+import { default as default11 } from "./withVue2.js";
 export {
   default2 as withBreakpointManager,
   default3 as withBreakpointObserver,
@@ -15,6 +16,7 @@ export {
   default6 as withFreezedOptions,
   default7 as withIntersectionObserver,
   default8 as withMountWhenInView,
-  default9 as withScrolledInView,
-  default10 as withVue2
+  default9 as withResponsiveOptions,
+  default10 as withScrolledInView,
+  default11 as withVue2
 };

package/decorators/withResponsiveOptions.cjs

@@ -0,0 +1,39 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/decorators/withResponsiveOptions.js
+var withResponsiveOptions_exports = {};
+__export(withResponsiveOptions_exports, {
+  default: () => withResponsiveOptions
+});
+module.exports = __toCommonJS(withResponsiveOptions_exports);
+var import_ResponsiveOptionsManager = __toESM(require("../Base/managers/ResponsiveOptionsManager.cjs"), 1);
+function withResponsiveOptions(BaseClass) {
+  return class extends BaseClass {
+    get __managers() {
+      return {
+        ...super.__managers,
+        OptionsManager: import_ResponsiveOptionsManager.default
+      };
+    }
+  };
+}
+if (module.exports.default) module.exports = module.exports.default;

package/decorators/withResponsiveOptions.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Extends the configuration of an existing class.
+ *
+ * @template {import('../Base').BaseConstructor} T
+ * @param {T} BaseClass The Base class to extend.
+ * @returns {T}
+ */
+export default function withResponsiveOptions<T extends typeof import("../Base").default>(BaseClass: T): T;

package/decorators/withResponsiveOptions.js

@@ -0,0 +1,14 @@
+import ResponsiveOptionsManager from "../Base/managers/ResponsiveOptionsManager.js";
+function withResponsiveOptions(BaseClass) {
+  return class extends BaseClass {
+    get __managers() {
+      return {
+        ...super.__managers,
+        OptionsManager: ResponsiveOptionsManager
+      };
+    }
+  };
+}
+export {
+  withResponsiveOptions as default
+};

package/decorators/withScrolledInView.cjs

@@ -32,11 +32,12 @@ __export(withScrolledInView_exports, {
 module.exports = __toCommonJS(withScrolledInView_exports);
 var import_withMountWhenInView = __toESM(require("./withMountWhenInView.cjs"), 1);
 var import_utils = require("../utils/index.cjs");
-function withScrolledInView(BaseClass, options) {
+var scheduler = (0, import_utils.useScheduler)(["update", "render"]);
+function withScrolledInView(BaseClass, options = {}) {
   var _a;
   return _a = class extends (0, import_withMountWhenInView.default)(BaseClass, options) {
-    constructor() {
-      super(...arguments);
+    constructor(element) {
+      super(element);
       __publicField(this, "__props", {
         start: {
           x: 0,
@@ -61,37 +62,79 @@ function withScrolledInView(BaseClass, options) {
       });
       __publicField(this, "dampFactor", 0.1);
       __publicField(this, "dampPrecision", 1e-3);
+      const delegate = {
+        handleEvent(event) {
+          delegate[event.type](event.detail[0]);
+        },
+        resized: () => {
+          this.__setProps();
+        },
+        scrolled: (props) => {
+          if (!this.$services.has("ticked") && props.changed.y || props.changed.x) {
+            this.$services.enable("ticked");
+          }
+        },
+        ticked: () => {
+          this.__props.current.x = (0, import_utils.clamp)(window.pageXOffset, this.__props.start.x, this.__props.end.x);
+          this.__props.progress.x = (0, import_utils.clamp01)((this.__props.current.x - this.__props.start.x) / (this.__props.end.x - this.__props.start.x));
+          this.__props.dampedProgress.x = (0, import_utils.damp)(this.__props.progress.x, this.__props.dampedProgress.x, this.dampFactor, this.dampPrecision);
+          this.__props.current.y = (0, import_utils.clamp)(window.pageYOffset, this.__props.start.y, this.__props.end.y);
+          this.__props.progress.y = (0, import_utils.clamp01)((this.__props.current.y - this.__props.start.y) / (this.__props.end.y - this.__props.start.y));
+          this.__props.dampedProgress.y = (0, import_utils.damp)(this.__props.progress.y, this.__props.dampedProgress.y, this.dampFactor, this.dampPrecision);
+          if (this.__props.dampedProgress.x === this.__props.progress.x && this.__props.dampedProgress.y === this.__props.progress.y) {
+            this.$services.disable("ticked");
+          }
+          scheduler.update(() => {
+            const renderFn = this.__callMethod("scrolledInView", this.__props);
+            if ((0, import_utils.isFunction)(renderFn)) {
+              scheduler.render(() => {
+                renderFn(this.__props);
+              });
+            }
+          });
+        }
+      };
+      this.$on("before-mounted", () => {
+        this.$on("resized", delegate);
+        this.$on("scrolled", delegate);
+        this.$on("ticked", delegate);
+      });
+      this.$on("mounted", () => {
+        this.__setProps();
+      });
+      this.$on("destroyed", () => {
+        this.$off("resized", delegate);
+        this.$off("scrolled", delegate);
+        this.$off("ticked", delegate);
+      });
     }
     mounted() {
-      this.__setProps();
+      if ((0, import_utils.isFunction)(super.mounted))
+        super.mounted();
     }
-    resized() {
-      this.__setProps();
+    resized(props) {
+      if ((0, import_utils.isFunction)(super.resized))
+        super.resized(props);
     }
     scrolled(props) {
-      if (!this.$services.has("ticked") && props.changed.y || props.changed.x) {
-        this.$services.enable("ticked");
-      }
+      if ((0, import_utils.isFunction)(super.scrolled))
+        super.scrolled(props);
+    }
+    ticked(props) {
+      if ((0, import_utils.isFunction)(super.ticked))
+        super.ticked(props);
     }
-    ticked() {
-      this.__props.current.x = (0, import_utils.clamp)(window.pageXOffset, this.__props.start.x, this.__props.end.x);
-      this.__props.progress.x = (0, import_utils.clamp01)((this.__props.current.x - this.__props.start.x) / (this.__props.end.x - this.__props.start.x));
-      this.__props.dampedProgress.x = (0, import_utils.damp)(this.__props.progress.x, this.__props.dampedProgress.x, this.dampFactor, this.dampPrecision);
-      this.__props.current.y = (0, import_utils.clamp)(window.pageYOffset, this.__props.start.y, this.__props.end.y);
-      this.__props.progress.y = (0, import_utils.clamp01)((this.__props.current.y - this.__props.start.y) / (this.__props.end.y - this.__props.start.y));
-      this.__props.dampedProgress.y = (0, import_utils.damp)(this.__props.progress.y, this.__props.dampedProgress.y, this.dampFactor, this.dampPrecision);
-      if (this.__props.dampedProgress.x === this.__props.progress.x && this.__props.dampedProgress.y === this.__props.progress.y) {
-        this.$services.disable("ticked");
-      }
-      this.__callMethod("scrolledInView", this.__props);
+    destroyed() {
+      if ((0, import_utils.isFunction)(super.destroyed))
+        super.destroyed();
     }
     __setProps() {
-      const sizes = this.$el.getBoundingClientRect();
-      const yEnd = sizes.top + window.pageYOffset + sizes.height;
+      const sizes = options.useOffsetSizes ? (0, import_utils.getOffsetSizes)(this.$el) : this.$el.getBoundingClientRect();
+      const yEnd = sizes.y + window.pageYOffset + sizes.height;
       const yStart = yEnd - window.innerHeight - sizes.height;
       const yCurrent = (0, import_utils.clamp)(window.pageYOffset, yStart, yEnd);
       const yProgress = (0, import_utils.clamp01)((yCurrent - yStart) / (yEnd - yStart));
-      const xEnd = sizes.left + window.pageXOffset + sizes.width;
+      const xEnd = sizes.x + window.pageXOffset + sizes.width;
       const xStart = xEnd - window.innerWidth - sizes.width;
       const xCurrent = (0, import_utils.clamp)(window.pageXOffset, xStart, xEnd);
       const xProgress = (0, import_utils.clamp01)((xCurrent - xStart) / (xEnd - xStart));

package/decorators/withScrolledInView.d.ts

@@ -8,10 +8,12 @@
  *
  * @template {BaseConstructor} T
  * @param {T} BaseClass
- * @param {IntersectionObserverInit} options
+ * @param {IntersectionObserverInit & { useOffsetSizes?: boolean }} options
  * @returns {T}
  */
-export default function withScrolledInView<T extends typeof import("../Base").default>(BaseClass: T, options: IntersectionObserverInit): T;
+export default function withScrolledInView<T extends typeof import("../Base").default>(BaseClass: T, options?: IntersectionObserverInit & {
+    useOffsetSizes?: boolean;
+}): T;
 export type Base = import('../Base').default;
 export type BaseConstructor = import('../Base').BaseConstructor;
 export type BaseConfig = import('../Base').BaseConfig;