overflowed 0.0.0-experimental-20221120013127 → 0.0.0-experimental-20260129225612

package/react/index.mjs

@@ -1,108 +0,0 @@
-import {
-  Overflowed
-} from "../chunk-DATLJDI5.mjs";
-
-// modules/react/useOverflowedItems.tsx
-import { useEffect, useMemo, useRef, useState } from "react";
-
-// modules/react/defaultCreateGetContainerProps.ts
-var defaultCreateGetContainerProps = (overflowed, state) => ({ style } = {}) => ({
-  ref: (containerElement) => {
-    if (!(containerElement instanceof HTMLElement)) {
-      return;
-    }
-    overflowed.registerContainerElement(containerElement);
-  },
-  style: {
-    overflowX: overflowed.axis === "horizontal" ? state.isMounted ? "clip" : "auto" : void 0,
-    overflowY: overflowed.axis === "horizontal" ? state.isMounted ? "clip" : "auto" : void 0,
-    ...style
-  }
-});
-
-// modules/react/defaultCreateGetIndicatorProps.ts
-var defaultCreateGetIndicatorProps = (overflowed, state, isVisible) => ({ style } = {}) => ({
-  ref: (indicatorElement) => {
-    if (!(indicatorElement instanceof HTMLElement)) {
-      return;
-    }
-    overflowed.registerIndicatorElement(indicatorElement);
-  },
-  style: isVisible ? {
-    position: isVisible ? "absolute" : void 0,
-    insetInlineStart: isVisible ? state.indicatorElementOffset : void 0,
-    marginInlineStart: 0,
-    ...style
-  } : {
-    userSelect: "none",
-    pointerEvents: "none",
-    visibility: "hidden"
-  }
-});
-
-// modules/react/defaultCreateGetItemProps.ts
-var defaultCreateGetItemProps = (overflowed, state, isHidden) => ({ style } = {}) => ({
-  ref: (itemElement) => {
-    if (!(itemElement instanceof HTMLElement)) {
-      return;
-    }
-    overflowed.registerItemElement(itemElement);
-  },
-  style: {
-    ...isHidden ? {
-      userSelect: "none",
-      pointerEvents: "none",
-      visibility: "hidden"
-    } : {},
-    ...style
-  },
-  "aria-hidden": isHidden ? true : false
-});
-
-// modules/react/useOverflowedItems.tsx
-var useOverflowedItems = (items, {
-  enableEmptyOverflowedItems,
-  maxItemCount = items.length,
-  ...options
-} = {}) => {
-  const [state, setState] = useState({
-    visibleItemCount: maxItemCount,
-    indicatorElementOffset: void 0,
-    isMounted: false
-  });
-  const overflowedRef = useRef(
-    new Overflowed({
-      ...options,
-      onUpdate: (newVisibleItemCount, newIndicatorElementOffset) => setState(({ isMounted }) => ({
-        isMounted,
-        visibleItemCount: Math.min(newVisibleItemCount, maxItemCount),
-        indicatorElementOffset: newIndicatorElementOffset
-      }))
-    })
-  );
-  useEffect(() => {
-    setState((previousState) => ({ ...previousState, isMounted: true }));
-    return () => overflowedRef.current.onContainerElementWillUnmount();
-  }, []);
-  const visibleItems = useMemo(
-    () => items.map(
-      (item, index) => [item, defaultCreateGetItemProps(overflowedRef.current, state, index >= state.visibleItemCount)]
-    ),
-    [items, state]
-  );
-  const overflowedItems = useMemo(
-    () => state.visibleItemCount < items.length ? items.slice(state.visibleItemCount) : [],
-    [state.visibleItemCount, enableEmptyOverflowedItems]
-  );
-  const props = useMemo(
-    () => ({
-      getContainerProps: defaultCreateGetContainerProps(overflowedRef.current, state),
-      getIndicatorProps: defaultCreateGetIndicatorProps(overflowedRef.current, state, overflowedItems.length > 0)
-    }),
-    [state, overflowedItems]
-  );
-  return [visibleItems, overflowedItems, props];
-};
-export {
-  useOverflowedItems
-};

package/svelte/index.d.ts

@@ -1,9 +0,0 @@
-import { Action } from 'svelte/action';
-
-declare const overflowedItems: <Item>(items: Item[], onUpdate: (newVisibleItems: Item[], newOverflowedItems: Item[]) => void) => readonly [Item[], Item[], {
-    readonly container: Action<HTMLElement, any, Record<never, any>>;
-    readonly indicator: Action<HTMLElement, any, Record<never, any>>;
-    readonly item: Action<HTMLElement, number, Record<never, any>>;
-}];
-
-export { overflowedItems };

package/svelte/index.js

@@ -1,183 +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/svelte/index.ts
-var svelte_exports = {};
-__export(svelte_exports, {
-  overflowedItems: () => overflowedItems
-});
-module.exports = __toCommonJS(svelte_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;
-  }
-  update() {
-    if (!this.containerElement) {
-      return;
-    }
-    const { direction, paddingBlockStart, paddingBlockEnd, paddingInlineStart, paddingInlineEnd } = window.getComputedStyle(this.containerElement);
-    const offsetStart = parseInt(this.axis === "horizontal" ? paddingInlineStart : paddingBlockStart, 10);
-    const offsetEnd = parseInt(this.axis === "horizontal" ? paddingInlineEnd : paddingBlockEnd, 10);
-    const isRtl = direction === "rtl";
-    const containerElementSize = this.getElementSize(this.containerElement) - offsetStart - offsetEnd;
-    const indicatorElementSize = this.getElementSize(this.indicatorElement);
-    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 [_index, childElement] of childrenArray.entries()) {
-      const childOffset = getOffset(childElement);
-      const childSize = this.getElementSize(childElement);
-      breakpoints.push([childOffset - offsetStart, childOffset + childSize + offsetEnd]);
-    }
-    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] + offsetStart;
-      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.");
-};
-
-// modules/svelte/OverflowedActions.ts
-var overflowedItems = (items, onUpdate) => {
-  const overflowed = new Overflowed({
-    onUpdate: (newVisibleItemCount, indicatorElementOffset) => {
-      onUpdate(items, newVisibleItemCount < items.length ? items.slice(newVisibleItemCount) : []);
-      console.log(indicatorElementOffset);
-    }
-  });
-  const container = (element) => {
-    overflowed.registerContainerElement(element);
-    element.style.display = "flex";
-    element.style.position = "relative";
-    element.style.flexDirection = overflowed.axis === "horizontal" ? "row" : "column";
-    element.style.overflowX = overflowed.axis === "horizontal" ? "clip" : "";
-    element.style.overflowY = overflowed.axis === "horizontal" ? "clip" : "";
-  };
-  const indicator = (element) => {
-    overflowed.registerIndicatorElement(element);
-    element.style.flexShrink = "0";
-  };
-  const item = (element, index) => {
-    overflowed.registerItemElement(element);
-    element.style.flexShrink = "0";
-  };
-  return [items, items, { container, indicator, item }];
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  overflowedItems
-});

package/svelte/index.mjs

@@ -1,34 +0,0 @@
-import "../chunk-TXQIKLPR.mjs";
-import {
-  Overflowed
-} from "../chunk-DATLJDI5.mjs";
-
-// modules/svelte/OverflowedActions.ts
-var overflowedItems = (items, onUpdate) => {
-  const overflowed = new Overflowed({
-    onUpdate: (newVisibleItemCount, indicatorElementOffset) => {
-      onUpdate(items, newVisibleItemCount < items.length ? items.slice(newVisibleItemCount) : []);
-      console.log(indicatorElementOffset);
-    }
-  });
-  const container = (element) => {
-    overflowed.registerContainerElement(element);
-    element.style.display = "flex";
-    element.style.position = "relative";
-    element.style.flexDirection = overflowed.axis === "horizontal" ? "row" : "column";
-    element.style.overflowX = overflowed.axis === "horizontal" ? "clip" : "";
-    element.style.overflowY = overflowed.axis === "horizontal" ? "clip" : "";
-  };
-  const indicator = (element) => {
-    overflowed.registerIndicatorElement(element);
-    element.style.flexShrink = "0";
-  };
-  const item = (element, index) => {
-    overflowed.registerItemElement(element);
-    element.style.flexShrink = "0";
-  };
-  return [items, items, { container, indicator, item }];
-};
-export {
-  overflowedItems
-};