overflowed 0.0.0-experimental-20230103160007 → 0.0.0-experimental-20260129225612

package/package.json

@@ -1,49 +1,10 @@
 {
-  "name": "overflowed",
-  "version": "0.0.0-experimental-20230103160007",
-  "description": "Create toolbars with responsive overflow menus ✂️",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ahtcx/overflowed.git"
-  },
-  "main": "./index.js",
-  "module": "./index.mjs",
-  "types": "./index.d.ts",
-  "devDependencies": {
-    "@changesets/cli": "2.26.0",
-    "@types/node": "18.11.18",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
-    "preact": "10.11.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "rome": "11.0.0",
-    "svelte": "3.55.0",
-    "tsup": "6.5.0",
-    "typescript": "4.9.4"
-  },
-  "peerDependencies": {
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "preact": "^10.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "svelte": "^3.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@types/react": {
-      "optional": true
-    },
-    "preact": {
-      "optional": true
-    },
-    "react": {
-      "optional": true
-    },
-    "svelte": {
-      "optional": true
-    }
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "pnpm --recursive dev"
-  }
-}
+	"name": "overflowed",
+	"version": "0.0.0-experimental-20260129225612",
+	"license": "MIT",
+	"type": "module",
+	"exports": {
+		".": "./dist/mod.js",
+		"./package.json": "./package.json"
+	}
+}

package/LICENSE.md

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2033 Alexandre Hitchcox
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/Overflowed-4d9a04ab.d.ts

@@ -1,30 +0,0 @@
-interface OverflowedOptions {
-    axis?: "horizontal" | "vertical";
-    onUpdate: (visibleItemCount: number, indicatorElementOffset: number) => void;
-    disableIndicatorResizeProtection?: boolean;
-    ResizeObserver?: typeof ResizeObserver;
-}
-type Breakpoint = [lowerBound: number, upperBound: number];
-declare class Overflowed {
-    readonly axis: "horizontal" | "vertical";
-    private onUpdate;
-    private resizeObserver;
-    private containerElement;
-    private indicatorElement;
-    private indicatorSize?;
-    constructor({ ResizeObserver, axis, onUpdate, }: OverflowedOptions);
-    registerContainerElement(containerElement: HTMLElement): void;
-    registerIndicatorElement(indicatorElement: HTMLElement): void;
-    registerItemElement(itemElement: HTMLElement): void;
-    /** Should be called before the container element is unmounted. */
-    onContainerElementWillUnmount(): void;
-    private getElementSize;
-    private getElementOffsetFromRight;
-    private getElementOffsetFromLeft;
-    private getElementComputedValues;
-    private update;
-    private requestedUpdate;
-    requestUpdate(): void;
-}
-
-export { Breakpoint as B, OverflowedOptions as O, Overflowed as a };

package/README.md

@@ -1,50 +0,0 @@
-# Overflowed
-
-Overflowed is a small library allowing you to make your websites more responsive with collapsible
-lists. It's currently in it's alpha stage and the APIs are potentially unstable, but I aim to
-satisfy the following goals before a stable version.
-
-- ⚛️ Works across all major frameworks
-- 🌳 Lightweight and dependency-free, tree-shakable
-- 🏗️ Includes strongly typed TypeScript declarations
-- 🎨 Infinitely customizable, sensible defaults
-- ⚡ Highly optimized and performant
-- 📚 Clean API and comprehensive documentation
-- ♿ Encourages accessible practices
-- ↩️ Supports right-to-left writing modes
-- 🦄 Ponyfills can be provided
-- ⚙️ Supports SSR and environments without JS
-- 🧩 Ships with ESM and CJS bundles
-
-## Installation
-
-```
-npm install overflowed
-yarn add overflowed
-pnpm add overflowed
-```
-
-## Progress
-
-- [ ] Documentation
-  - [ ] Getting started
-    - [ ] React
-    - [ ] Vue.js
-    - [ ] Svelte
-    - [ ] Preact
-    - [ ] SolidJS
-  - [ ] Examples
-  - [ ] Playground
-- [ ] `overflowed/core`
-- [ ] `overflowed/react`
-  - [ ] `useOverflowedItems`
-- [ ] `overflowed/vue`
-- [ ] `overflowed/svelte`
-  - [ ] `overflowedItems`
-- [ ] `overflowed/preact`
-- [ ] `overflowed/solid`
-
-## Usage
-
-Check out the [examples](https://overflowed.aht.cx/examples) to see the library being used in
-various scenarios and it's implementations.

package/chunk-DZKPYTOC.mjs

@@ -1,163 +0,0 @@
-// modules/core/Overflowed.ts
-var Overflowed = class {
-  axis;
-  onUpdate;
-  resizeObserver;
-  containerElement = null;
-  indicatorElement = null;
-  indicatorSize;
-  constructor({
-    ResizeObserver = typeof window === "undefined" ? void 0 : window.ResizeObserver,
-    axis = "horizontal",
-    onUpdate
-  }) {
-    this.resizeObserver = ResizeObserver && new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.target === this.indicatorElement) {
-          if (entry.target.clientWidth > 0 && entry.target.clientWidth !== this.indicatorSize) {
-            console.warn("width doesn't match", this.indicatorSize, entry.target.clientWidth);
-          }
-          this.indicatorSize = entry.target.clientWidth;
-        } else if (entry.target.parentNode === this.containerElement) {
-        }
-      }
-      this.requestUpdate();
-    });
-    this.axis = axis;
-    this.onUpdate = onUpdate;
-  }
-  registerContainerElement(containerElement) {
-    this.containerElement = containerElement;
-    this.resizeObserver?.observe(containerElement);
-    this.requestUpdate();
-  }
-  registerIndicatorElement(indicatorElement) {
-    this.indicatorElement = indicatorElement;
-    this.indicatorSize = indicatorElement.clientWidth;
-    this.resizeObserver?.observe(indicatorElement);
-    this.requestUpdate();
-  }
-  registerItemElement(itemElement) {
-    this.resizeObserver?.observe(itemElement);
-    this.requestUpdate();
-  }
-  onContainerElementWillUnmount() {
-    this.resizeObserver?.disconnect();
-    this.containerElement = null;
-    this.indicatorElement = null;
-  }
-  getElementSize(element) {
-    if (!element) {
-      return 0;
-    }
-    if (this.axis === "horizontal") {
-      return element.offsetWidth;
-    }
-    return element.offsetHeight;
-  }
-  getElementOffsetFromRight(element) {
-    if (!element) {
-      return 0;
-    }
-    if (this.axis === "horizontal") {
-      return this.getElementSize(element.parentElement) - this.getElementSize(element) - element.offsetLeft;
-    }
-    return this.getElementSize(element.parentElement) - this.getElementSize(element) - element.offsetTop;
-  }
-  getElementOffsetFromLeft(element) {
-    if (!element) {
-      return 0;
-    }
-    if (this.axis === "horizontal") {
-      return element.offsetLeft;
-    }
-    return element.offsetTop;
-  }
-  getElementComputedValues(element) {
-    const {
-      direction,
-      marginBlockStart,
-      marginBlockEnd,
-      marginInlineStart,
-      marginInlineEnd,
-      paddingBlockStart,
-      paddingBlockEnd,
-      paddingInlineStart,
-      paddingInlineEnd
-    } = window.getComputedStyle(element);
-    const marginStartAsString = this.axis === "horizontal" ? marginInlineStart : marginBlockStart;
-    const marginEndAsString = this.axis === "horizontal" ? marginInlineEnd : marginBlockEnd;
-    const paddingStartAsString = this.axis === "horizontal" ? paddingInlineStart : paddingBlockStart;
-    const paddingEndAsString = this.axis === "horizontal" ? paddingInlineEnd : paddingBlockEnd;
-    if (marginStartAsString && !marginStartAsString.endsWith("px"))
-      throw new Error("ok1");
-    if (marginEndAsString && !marginEndAsString.endsWith("px"))
-      throw new Error("ok2");
-    if (paddingStartAsString && !paddingStartAsString.endsWith("px"))
-      throw new Error("ok3");
-    if (paddingEndAsString && !paddingEndAsString.endsWith("px"))
-      throw new Error("ok4");
-    const marginStart = parseInt(marginStartAsString || "0", 10);
-    const marginEnd = parseInt(marginEndAsString || "0", 10);
-    const paddingStart = parseInt(paddingStartAsString || "0", 10);
-    const paddingEnd = parseInt(paddingEndAsString || "0", 10);
-    const isRtl = direction === "rtl";
-    return { isRtl, marginStart, marginEnd, paddingStart, paddingEnd };
-  }
-  update() {
-    if (!this.containerElement) {
-      return;
-    }
-    const {
-      isRtl,
-      paddingStart: containerPaddingStart,
-      paddingEnd: containerPaddingEnd
-    } = this.getElementComputedValues(this.containerElement);
-    const indicatorMarginEnd = this.indicatorElement ? this.getElementComputedValues(this.indicatorElement).marginEnd : 0;
-    const containerElementSize = this.getElementSize(this.containerElement) - containerPaddingStart - containerPaddingEnd;
-    const indicatorElementSize = this.getElementSize(this.indicatorElement) + indicatorMarginEnd;
-    const childrenArray = Array.from(this.containerElement.children).filter((element) => element !== this.indicatorElement).filter(isHtmlElement);
-    const getOffset = isRtl ? this.getElementOffsetFromRight.bind(this) : this.getElementOffsetFromLeft.bind(this);
-    const breakpoints = [];
-    for (const childElement of childrenArray.values()) {
-      const childOffset = getOffset(childElement);
-      const childSize = this.getElementSize(childElement);
-      breakpoints.push([childOffset - containerPaddingStart, childOffset + childSize + containerPaddingEnd]);
-    }
-    if (breakpoints.length === 0) {
-      return;
-    }
-    const containerIntersectingChildIndex = breakpoints.findIndex(([_start, end]) => end > containerElementSize);
-    if (containerIntersectingChildIndex !== -1) {
-      const intersectingChildIndex = breakpoints.findIndex(
-        ([start, end]) => (this.indicatorElement ? start : end) > containerElementSize - indicatorElementSize
-      );
-      const newVisibleItemCount = Math.max(intersectingChildIndex - (this.indicatorElement ? 1 : 0), 0);
-      const newIndicatorElementOffset = breakpoints[newVisibleItemCount]?.[0] + containerPaddingStart;
-      this.onUpdate(newVisibleItemCount, newIndicatorElementOffset);
-    } else {
-      this.onUpdate(breakpoints.length, 0);
-    }
-  }
-  requestedUpdate = false;
-  requestUpdate() {
-    if (this.requestedUpdate) {
-      return;
-    }
-    this.requestedUpdate = true;
-    this.update();
-    window.requestAnimationFrame(() => {
-      this.requestedUpdate = false;
-    });
-  }
-};
-var isHtmlElement = (element) => {
-  if (element instanceof HTMLElement) {
-    return true;
-  }
-  throw new Error("Element provided is not a HTMLElement.");
-};
-
-export {
-  Overflowed
-};

package/core/index.d.ts

@@ -1 +0,0 @@
-export { B as Breakpoint, a as Overflowed, O as OverflowedOptions } from '../Overflowed-4d9a04ab.js';

package/core/index.js

@@ -1,189 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// modules/core/index.ts
-var core_exports = {};
-__export(core_exports, {
-  Overflowed: () => Overflowed
-});
-module.exports = __toCommonJS(core_exports);
-
-// modules/core/Overflowed.ts
-var Overflowed = class {
-  axis;
-  onUpdate;
-  resizeObserver;
-  containerElement = null;
-  indicatorElement = null;
-  indicatorSize;
-  constructor({
-    ResizeObserver = typeof window === "undefined" ? void 0 : window.ResizeObserver,
-    axis = "horizontal",
-    onUpdate
-  }) {
-    this.resizeObserver = ResizeObserver && new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.target === this.indicatorElement) {
-          if (entry.target.clientWidth > 0 && entry.target.clientWidth !== this.indicatorSize) {
-            console.warn("width doesn't match", this.indicatorSize, entry.target.clientWidth);
-          }
-          this.indicatorSize = entry.target.clientWidth;
-        } else if (entry.target.parentNode === this.containerElement) {
-        }
-      }
-      this.requestUpdate();
-    });
-    this.axis = axis;
-    this.onUpdate = onUpdate;
-  }
-  registerContainerElement(containerElement) {
-    this.containerElement = containerElement;
-    this.resizeObserver?.observe(containerElement);
-    this.requestUpdate();
-  }
-  registerIndicatorElement(indicatorElement) {
-    this.indicatorElement = indicatorElement;
-    this.indicatorSize = indicatorElement.clientWidth;
-    this.resizeObserver?.observe(indicatorElement);
-    this.requestUpdate();
-  }
-  registerItemElement(itemElement) {
-    this.resizeObserver?.observe(itemElement);
-    this.requestUpdate();
-  }
-  onContainerElementWillUnmount() {
-    this.resizeObserver?.disconnect();
-    this.containerElement = null;
-    this.indicatorElement = null;
-  }
-  getElementSize(element) {
-    if (!element) {
-      return 0;
-    }
-    if (this.axis === "horizontal") {
-      return element.offsetWidth;
-    }
-    return element.offsetHeight;
-  }
-  getElementOffsetFromRight(element) {
-    if (!element) {
-      return 0;
-    }
-    if (this.axis === "horizontal") {
-      return this.getElementSize(element.parentElement) - this.getElementSize(element) - element.offsetLeft;
-    }
-    return this.getElementSize(element.parentElement) - this.getElementSize(element) - element.offsetTop;
-  }
-  getElementOffsetFromLeft(element) {
-    if (!element) {
-      return 0;
-    }
-    if (this.axis === "horizontal") {
-      return element.offsetLeft;
-    }
-    return element.offsetTop;
-  }
-  getElementComputedValues(element) {
-    const {
-      direction,
-      marginBlockStart,
-      marginBlockEnd,
-      marginInlineStart,
-      marginInlineEnd,
-      paddingBlockStart,
-      paddingBlockEnd,
-      paddingInlineStart,
-      paddingInlineEnd
-    } = window.getComputedStyle(element);
-    const marginStartAsString = this.axis === "horizontal" ? marginInlineStart : marginBlockStart;
-    const marginEndAsString = this.axis === "horizontal" ? marginInlineEnd : marginBlockEnd;
-    const paddingStartAsString = this.axis === "horizontal" ? paddingInlineStart : paddingBlockStart;
-    const paddingEndAsString = this.axis === "horizontal" ? paddingInlineEnd : paddingBlockEnd;
-    if (marginStartAsString && !marginStartAsString.endsWith("px"))
-      throw new Error("ok1");
-    if (marginEndAsString && !marginEndAsString.endsWith("px"))
-      throw new Error("ok2");
-    if (paddingStartAsString && !paddingStartAsString.endsWith("px"))
-      throw new Error("ok3");
-    if (paddingEndAsString && !paddingEndAsString.endsWith("px"))
-      throw new Error("ok4");
-    const marginStart = parseInt(marginStartAsString || "0", 10);
-    const marginEnd = parseInt(marginEndAsString || "0", 10);
-    const paddingStart = parseInt(paddingStartAsString || "0", 10);
-    const paddingEnd = parseInt(paddingEndAsString || "0", 10);
-    const isRtl = direction === "rtl";
-    return { isRtl, marginStart, marginEnd, paddingStart, paddingEnd };
-  }
-  update() {
-    if (!this.containerElement) {
-      return;
-    }
-    const {
-      isRtl,
-      paddingStart: containerPaddingStart,
-      paddingEnd: containerPaddingEnd
-    } = this.getElementComputedValues(this.containerElement);
-    const indicatorMarginEnd = this.indicatorElement ? this.getElementComputedValues(this.indicatorElement).marginEnd : 0;
-    const containerElementSize = this.getElementSize(this.containerElement) - containerPaddingStart - containerPaddingEnd;
-    const indicatorElementSize = this.getElementSize(this.indicatorElement) + indicatorMarginEnd;
-    const childrenArray = Array.from(this.containerElement.children).filter((element) => element !== this.indicatorElement).filter(isHtmlElement);
-    const getOffset = isRtl ? this.getElementOffsetFromRight.bind(this) : this.getElementOffsetFromLeft.bind(this);
-    const breakpoints = [];
-    for (const childElement of childrenArray.values()) {
-      const childOffset = getOffset(childElement);
-      const childSize = this.getElementSize(childElement);
-      breakpoints.push([childOffset - containerPaddingStart, childOffset + childSize + containerPaddingEnd]);
-    }
-    if (breakpoints.length === 0) {
-      return;
-    }
-    const containerIntersectingChildIndex = breakpoints.findIndex(([_start, end]) => end > containerElementSize);
-    if (containerIntersectingChildIndex !== -1) {
-      const intersectingChildIndex = breakpoints.findIndex(
-        ([start, end]) => (this.indicatorElement ? start : end) > containerElementSize - indicatorElementSize
-      );
-      const newVisibleItemCount = Math.max(intersectingChildIndex - (this.indicatorElement ? 1 : 0), 0);
-      const newIndicatorElementOffset = breakpoints[newVisibleItemCount]?.[0] + containerPaddingStart;
-      this.onUpdate(newVisibleItemCount, newIndicatorElementOffset);
-    } else {
-      this.onUpdate(breakpoints.length, 0);
-    }
-  }
-  requestedUpdate = false;
-  requestUpdate() {
-    if (this.requestedUpdate) {
-      return;
-    }
-    this.requestedUpdate = true;
-    this.update();
-    window.requestAnimationFrame(() => {
-      this.requestedUpdate = false;
-    });
-  }
-};
-var isHtmlElement = (element) => {
-  if (element instanceof HTMLElement) {
-    return true;
-  }
-  throw new Error("Element provided is not a HTMLElement.");
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Overflowed
-});

package/core/index.mjs

@@ -1,7 +0,0 @@
-import "../chunk-TXQIKLPR.mjs";
-import {
-  Overflowed
-} from "../chunk-DZKPYTOC.mjs";
-export {
-  Overflowed
-};

package/index.d.ts

@@ -1,4 +0,0 @@
-/** @deprecated Don't export this. */
-var undefined$1 = undefined;
-
-export { undefined$1 as default };

package/index.js

@@ -1,31 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// modules/index.ts
-var modules_exports = {};
-__export(modules_exports, {
-  default: () => modules_default
-});
-module.exports = __toCommonJS(modules_exports);
-var modules_default = void 0;
-throw new Error(
-  "You imported `overflowed` directly, instead you should import from it's subdirectories such as `overflowed/react` or `overflowed/core`. Documentation for this error is available at https://overflowed.aht.cx/errors/imported-root"
-);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});

package/index.mjs

@@ -1,8 +0,0 @@
-// modules/index.ts
-var modules_default = void 0;
-throw new Error(
-  "You imported `overflowed` directly, instead you should import from it's subdirectories such as `overflowed/react` or `overflowed/core`. Documentation for this error is available at https://overflowed.aht.cx/errors/imported-root"
-);
-export {
-  modules_default as default
-};

package/react/index.d.ts

@@ -1,17 +0,0 @@
-import { O as OverflowedOptions } from '../Overflowed-4d9a04ab.js';
-
-interface UseOverflowedItemsState {
-    visibleItemCount: number;
-    indicatorElementOffset: number | undefined;
-    isMounted: boolean;
-}
-interface UseOverflowedItemsOptions extends Omit<OverflowedOptions, "onUpdate"> {
-    enableEmptyOverflowedItems?: boolean;
-    maxItemCount?: number;
-}
-declare const useOverflowedItems: <Item extends unknown>(items: Item[], { enableEmptyOverflowedItems, maxItemCount, ...options }?: UseOverflowedItemsOptions) => readonly [(readonly [Item, any])[], Item[], {
-    getContainerProps: any;
-    getIndicatorProps: any;
-}];
-
-export { UseOverflowedItemsOptions, UseOverflowedItemsState, useOverflowedItems };