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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/react/index.js DELETED
@@ -1,291 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // modules/react/index.ts
21
- var react_exports = {};
22
- __export(react_exports, {
23
- useOverflowedItems: () => useOverflowedItems
24
- });
25
- module.exports = __toCommonJS(react_exports);
26
-
27
- // modules/react/useOverflowedItems.tsx
28
- var import_react = require("react");
29
-
30
- // modules/core/Overflowed.ts
31
- var Overflowed = class {
32
- axis;
33
- onUpdate;
34
- resizeObserver;
35
- containerElement = null;
36
- indicatorElement = null;
37
- indicatorSize;
38
- constructor({
39
- ResizeObserver = typeof window === "undefined" ? void 0 : window.ResizeObserver,
40
- axis = "horizontal",
41
- onUpdate
42
- }) {
43
- this.resizeObserver = ResizeObserver && new ResizeObserver((entries) => {
44
- for (const entry of entries) {
45
- if (entry.target === this.indicatorElement) {
46
- if (entry.target.clientWidth > 0 && entry.target.clientWidth !== this.indicatorSize) {
47
- console.warn("width doesn't match", this.indicatorSize, entry.target.clientWidth);
48
- }
49
- this.indicatorSize = entry.target.clientWidth;
50
- } else if (entry.target.parentNode === this.containerElement) {
51
- }
52
- }
53
- this.requestUpdate();
54
- });
55
- this.axis = axis;
56
- this.onUpdate = onUpdate;
57
- }
58
- registerContainerElement(containerElement) {
59
- this.containerElement = containerElement;
60
- this.resizeObserver?.observe(containerElement);
61
- this.requestUpdate();
62
- }
63
- registerIndicatorElement(indicatorElement) {
64
- this.indicatorElement = indicatorElement;
65
- this.indicatorSize = indicatorElement.clientWidth;
66
- this.resizeObserver?.observe(indicatorElement);
67
- this.requestUpdate();
68
- }
69
- registerItemElement(itemElement) {
70
- this.resizeObserver?.observe(itemElement);
71
- this.requestUpdate();
72
- }
73
- onContainerElementWillUnmount() {
74
- this.resizeObserver?.disconnect();
75
- this.containerElement = null;
76
- this.indicatorElement = null;
77
- }
78
- getElementSize(element) {
79
- if (!element) {
80
- return 0;
81
- }
82
- if (this.axis === "horizontal") {
83
- return element.offsetWidth;
84
- }
85
- return element.offsetHeight;
86
- }
87
- getElementOffsetFromRight(element) {
88
- if (!element) {
89
- return 0;
90
- }
91
- if (this.axis === "horizontal") {
92
- return this.getElementSize(element.parentElement) - this.getElementSize(element) - element.offsetLeft;
93
- }
94
- return this.getElementSize(element.parentElement) - this.getElementSize(element) - element.offsetTop;
95
- }
96
- getElementOffsetFromLeft(element) {
97
- if (!element) {
98
- return 0;
99
- }
100
- if (this.axis === "horizontal") {
101
- return element.offsetLeft;
102
- }
103
- return element.offsetTop;
104
- }
105
- getElementComputedValues(element) {
106
- const {
107
- direction,
108
- marginBlockStart,
109
- marginBlockEnd,
110
- marginInlineStart,
111
- marginInlineEnd,
112
- paddingBlockStart,
113
- paddingBlockEnd,
114
- paddingInlineStart,
115
- paddingInlineEnd
116
- } = window.getComputedStyle(element);
117
- const marginStartAsString = this.axis === "horizontal" ? marginInlineStart : marginBlockStart;
118
- const marginEndAsString = this.axis === "horizontal" ? marginInlineEnd : marginBlockEnd;
119
- const paddingStartAsString = this.axis === "horizontal" ? paddingInlineStart : paddingBlockStart;
120
- const paddingEndAsString = this.axis === "horizontal" ? paddingInlineEnd : paddingBlockEnd;
121
- if (marginStartAsString && !marginStartAsString.endsWith("px"))
122
- throw new Error("ok1");
123
- if (marginEndAsString && !marginEndAsString.endsWith("px"))
124
- throw new Error("ok2");
125
- if (paddingStartAsString && !paddingStartAsString.endsWith("px"))
126
- throw new Error("ok3");
127
- if (paddingEndAsString && !paddingEndAsString.endsWith("px"))
128
- throw new Error("ok4");
129
- const marginStart = parseInt(marginStartAsString || "0", 10);
130
- const marginEnd = parseInt(marginEndAsString || "0", 10);
131
- const paddingStart = parseInt(paddingStartAsString || "0", 10);
132
- const paddingEnd = parseInt(paddingEndAsString || "0", 10);
133
- const isRtl = direction === "rtl";
134
- return { isRtl, marginStart, marginEnd, paddingStart, paddingEnd };
135
- }
136
- update() {
137
- if (!this.containerElement) {
138
- return;
139
- }
140
- const {
141
- isRtl,
142
- paddingStart: containerPaddingStart,
143
- paddingEnd: containerPaddingEnd
144
- } = this.getElementComputedValues(this.containerElement);
145
- const indicatorMarginEnd = this.indicatorElement ? this.getElementComputedValues(this.indicatorElement).marginEnd : 0;
146
- const containerElementSize = this.getElementSize(this.containerElement) - containerPaddingStart - containerPaddingEnd;
147
- const indicatorElementSize = this.getElementSize(this.indicatorElement) + indicatorMarginEnd;
148
- const childrenArray = Array.from(this.containerElement.children).filter((element) => element !== this.indicatorElement).filter(isHtmlElement);
149
- const getOffset = isRtl ? this.getElementOffsetFromRight.bind(this) : this.getElementOffsetFromLeft.bind(this);
150
- const breakpoints = [];
151
- for (const childElement of childrenArray.values()) {
152
- const childOffset = getOffset(childElement);
153
- const childSize = this.getElementSize(childElement);
154
- breakpoints.push([childOffset - containerPaddingStart, childOffset + childSize + containerPaddingEnd]);
155
- }
156
- if (breakpoints.length === 0) {
157
- return;
158
- }
159
- const containerIntersectingChildIndex = breakpoints.findIndex(([_start, end]) => end > containerElementSize);
160
- if (containerIntersectingChildIndex !== -1) {
161
- const intersectingChildIndex = breakpoints.findIndex(
162
- ([start, end]) => (this.indicatorElement ? start : end) > containerElementSize - indicatorElementSize
163
- );
164
- const newVisibleItemCount = Math.max(intersectingChildIndex - (this.indicatorElement ? 1 : 0), 0);
165
- const newIndicatorElementOffset = breakpoints[newVisibleItemCount]?.[0] + containerPaddingStart;
166
- this.onUpdate(newVisibleItemCount, newIndicatorElementOffset);
167
- } else {
168
- this.onUpdate(breakpoints.length, 0);
169
- }
170
- }
171
- requestedUpdate = false;
172
- requestUpdate() {
173
- if (this.requestedUpdate) {
174
- return;
175
- }
176
- this.requestedUpdate = true;
177
- this.update();
178
- window.requestAnimationFrame(() => {
179
- this.requestedUpdate = false;
180
- });
181
- }
182
- };
183
- var isHtmlElement = (element) => {
184
- if (element instanceof HTMLElement) {
185
- return true;
186
- }
187
- throw new Error("Element provided is not a HTMLElement.");
188
- };
189
-
190
- // modules/react/defaultCreateGetContainerProps.ts
191
- var defaultCreateGetContainerProps = (overflowed, state) => ({ style } = {}) => ({
192
- ref: (containerElement) => {
193
- if (!(containerElement instanceof HTMLElement)) {
194
- return;
195
- }
196
- overflowed.registerContainerElement(containerElement);
197
- },
198
- style: {
199
- overflowX: overflowed.axis === "horizontal" ? state.isMounted ? "clip" : "auto" : void 0,
200
- overflowY: overflowed.axis === "horizontal" ? state.isMounted ? "clip" : "auto" : void 0,
201
- position: "relative",
202
- ...style
203
- }
204
- });
205
-
206
- // modules/react/defaultCreateGetIndicatorProps.ts
207
- var defaultCreateGetIndicatorProps = (overflowed, state, isVisible) => ({ style } = {}) => ({
208
- ref: (indicatorElement) => {
209
- if (!(indicatorElement instanceof HTMLElement)) {
210
- return;
211
- }
212
- overflowed.registerIndicatorElement(indicatorElement);
213
- },
214
- style: {
215
- position: "absolute",
216
- marginInlineStart: 0,
217
- insetInlineStart: isVisible ? state.indicatorElementOffset : 0,
218
- userSelect: isVisible ? void 0 : "none",
219
- pointerEvents: isVisible ? void 0 : "none",
220
- visibility: isVisible ? void 0 : "hidden",
221
- ...style
222
- }
223
- });
224
-
225
- // modules/react/defaultCreateGetItemProps.ts
226
- var defaultCreateGetItemProps = (overflowed, state, isHidden) => ({ style } = {}) => ({
227
- ref: (itemElement) => {
228
- if (!(itemElement instanceof HTMLElement)) {
229
- return;
230
- }
231
- overflowed.registerItemElement(itemElement);
232
- },
233
- style: {
234
- ...isHidden ? {
235
- userSelect: "none",
236
- pointerEvents: "none",
237
- visibility: "hidden"
238
- } : {},
239
- ...style
240
- },
241
- "aria-hidden": isHidden ? true : false
242
- });
243
-
244
- // modules/react/useOverflowedItems.tsx
245
- var useOverflowedItems = (items, {
246
- enableEmptyOverflowedItems,
247
- maxItemCount = items.length,
248
- ...options
249
- } = {}) => {
250
- const [state, setState] = (0, import_react.useState)({
251
- visibleItemCount: maxItemCount,
252
- indicatorElementOffset: void 0,
253
- isMounted: false
254
- });
255
- const overflowedRef = (0, import_react.useRef)(
256
- new Overflowed({
257
- ...options,
258
- onUpdate: (newVisibleItemCount, newIndicatorElementOffset) => setState(({ isMounted }) => ({
259
- isMounted,
260
- visibleItemCount: Math.min(newVisibleItemCount, maxItemCount),
261
- indicatorElementOffset: newIndicatorElementOffset
262
- }))
263
- })
264
- );
265
- (0, import_react.useEffect)(() => {
266
- setState((previousState) => ({ ...previousState, isMounted: true }));
267
- return () => overflowedRef.current.onContainerElementWillUnmount();
268
- }, []);
269
- const visibleItems = (0, import_react.useMemo)(
270
- () => items.map(
271
- (item, index) => [item, defaultCreateGetItemProps(overflowedRef.current, state, index >= state.visibleItemCount)]
272
- ),
273
- [items, state]
274
- );
275
- const overflowedItems = (0, import_react.useMemo)(
276
- () => state.visibleItemCount < items.length ? items.slice(state.visibleItemCount) : [],
277
- [state.visibleItemCount, enableEmptyOverflowedItems]
278
- );
279
- const props = (0, import_react.useMemo)(
280
- () => ({
281
- getContainerProps: defaultCreateGetContainerProps(overflowedRef.current, state),
282
- getIndicatorProps: defaultCreateGetIndicatorProps(overflowedRef.current, state, overflowedItems.length > 0)
283
- }),
284
- [state, overflowedItems]
285
- );
286
- return [visibleItems, overflowedItems, props];
287
- };
288
- // Annotate the CommonJS export names for ESM import in node:
289
- 0 && (module.exports = {
290
- useOverflowedItems
291
- });
package/react/index.mjs DELETED
@@ -1,108 +0,0 @@
1
- import {
2
- Overflowed
3
- } from "../chunk-DZKPYTOC.mjs";
4
-
5
- // modules/react/useOverflowedItems.tsx
6
- import { useEffect, useMemo, useRef, useState } from "react";
7
-
8
- // modules/react/defaultCreateGetContainerProps.ts
9
- var defaultCreateGetContainerProps = (overflowed, state) => ({ style } = {}) => ({
10
- ref: (containerElement) => {
11
- if (!(containerElement instanceof HTMLElement)) {
12
- return;
13
- }
14
- overflowed.registerContainerElement(containerElement);
15
- },
16
- style: {
17
- overflowX: overflowed.axis === "horizontal" ? state.isMounted ? "clip" : "auto" : void 0,
18
- overflowY: overflowed.axis === "horizontal" ? state.isMounted ? "clip" : "auto" : void 0,
19
- position: "relative",
20
- ...style
21
- }
22
- });
23
-
24
- // modules/react/defaultCreateGetIndicatorProps.ts
25
- var defaultCreateGetIndicatorProps = (overflowed, state, isVisible) => ({ style } = {}) => ({
26
- ref: (indicatorElement) => {
27
- if (!(indicatorElement instanceof HTMLElement)) {
28
- return;
29
- }
30
- overflowed.registerIndicatorElement(indicatorElement);
31
- },
32
- style: {
33
- position: "absolute",
34
- marginInlineStart: 0,
35
- insetInlineStart: isVisible ? state.indicatorElementOffset : 0,
36
- userSelect: isVisible ? void 0 : "none",
37
- pointerEvents: isVisible ? void 0 : "none",
38
- visibility: isVisible ? void 0 : "hidden",
39
- ...style
40
- }
41
- });
42
-
43
- // modules/react/defaultCreateGetItemProps.ts
44
- var defaultCreateGetItemProps = (overflowed, state, isHidden) => ({ style } = {}) => ({
45
- ref: (itemElement) => {
46
- if (!(itemElement instanceof HTMLElement)) {
47
- return;
48
- }
49
- overflowed.registerItemElement(itemElement);
50
- },
51
- style: {
52
- ...isHidden ? {
53
- userSelect: "none",
54
- pointerEvents: "none",
55
- visibility: "hidden"
56
- } : {},
57
- ...style
58
- },
59
- "aria-hidden": isHidden ? true : false
60
- });
61
-
62
- // modules/react/useOverflowedItems.tsx
63
- var useOverflowedItems = (items, {
64
- enableEmptyOverflowedItems,
65
- maxItemCount = items.length,
66
- ...options
67
- } = {}) => {
68
- const [state, setState] = useState({
69
- visibleItemCount: maxItemCount,
70
- indicatorElementOffset: void 0,
71
- isMounted: false
72
- });
73
- const overflowedRef = useRef(
74
- new Overflowed({
75
- ...options,
76
- onUpdate: (newVisibleItemCount, newIndicatorElementOffset) => setState(({ isMounted }) => ({
77
- isMounted,
78
- visibleItemCount: Math.min(newVisibleItemCount, maxItemCount),
79
- indicatorElementOffset: newIndicatorElementOffset
80
- }))
81
- })
82
- );
83
- useEffect(() => {
84
- setState((previousState) => ({ ...previousState, isMounted: true }));
85
- return () => overflowedRef.current.onContainerElementWillUnmount();
86
- }, []);
87
- const visibleItems = useMemo(
88
- () => items.map(
89
- (item, index) => [item, defaultCreateGetItemProps(overflowedRef.current, state, index >= state.visibleItemCount)]
90
- ),
91
- [items, state]
92
- );
93
- const overflowedItems = useMemo(
94
- () => state.visibleItemCount < items.length ? items.slice(state.visibleItemCount) : [],
95
- [state.visibleItemCount, enableEmptyOverflowedItems]
96
- );
97
- const props = useMemo(
98
- () => ({
99
- getContainerProps: defaultCreateGetContainerProps(overflowedRef.current, state),
100
- getIndicatorProps: defaultCreateGetIndicatorProps(overflowedRef.current, state, overflowedItems.length > 0)
101
- }),
102
- [state, overflowedItems]
103
- );
104
- return [visibleItems, overflowedItems, props];
105
- };
106
- export {
107
- useOverflowedItems
108
- };
package/svelte/index.d.ts DELETED
@@ -1,9 +0,0 @@
1
- import { Action } from 'svelte/action';
2
-
3
- declare const overflowedItems: <Item>(items: Item[], onUpdate: (newVisibleItems: Item[], newOverflowedItems: Item[]) => void) => readonly [Item[], Item[], {
4
- readonly container: Action<HTMLElement, any, Record<never, any>>;
5
- readonly indicator: Action<HTMLElement, any, Record<never, any>>;
6
- readonly item: Action<HTMLElement, number, Record<never, any>>;
7
- }];
8
-
9
- export { overflowedItems };
package/svelte/index.js DELETED
@@ -1,216 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // modules/svelte/index.ts
21
- var svelte_exports = {};
22
- __export(svelte_exports, {
23
- overflowedItems: () => overflowedItems
24
- });
25
- module.exports = __toCommonJS(svelte_exports);
26
-
27
- // modules/core/Overflowed.ts
28
- var Overflowed = class {
29
- axis;
30
- onUpdate;
31
- resizeObserver;
32
- containerElement = null;
33
- indicatorElement = null;
34
- indicatorSize;
35
- constructor({
36
- ResizeObserver = typeof window === "undefined" ? void 0 : window.ResizeObserver,
37
- axis = "horizontal",
38
- onUpdate
39
- }) {
40
- this.resizeObserver = ResizeObserver && new ResizeObserver((entries) => {
41
- for (const entry of entries) {
42
- if (entry.target === this.indicatorElement) {
43
- if (entry.target.clientWidth > 0 && entry.target.clientWidth !== this.indicatorSize) {
44
- console.warn("width doesn't match", this.indicatorSize, entry.target.clientWidth);
45
- }
46
- this.indicatorSize = entry.target.clientWidth;
47
- } else if (entry.target.parentNode === this.containerElement) {
48
- }
49
- }
50
- this.requestUpdate();
51
- });
52
- this.axis = axis;
53
- this.onUpdate = onUpdate;
54
- }
55
- registerContainerElement(containerElement) {
56
- this.containerElement = containerElement;
57
- this.resizeObserver?.observe(containerElement);
58
- this.requestUpdate();
59
- }
60
- registerIndicatorElement(indicatorElement) {
61
- this.indicatorElement = indicatorElement;
62
- this.indicatorSize = indicatorElement.clientWidth;
63
- this.resizeObserver?.observe(indicatorElement);
64
- this.requestUpdate();
65
- }
66
- registerItemElement(itemElement) {
67
- this.resizeObserver?.observe(itemElement);
68
- this.requestUpdate();
69
- }
70
- onContainerElementWillUnmount() {
71
- this.resizeObserver?.disconnect();
72
- this.containerElement = null;
73
- this.indicatorElement = null;
74
- }
75
- getElementSize(element) {
76
- if (!element) {
77
- return 0;
78
- }
79
- if (this.axis === "horizontal") {
80
- return element.offsetWidth;
81
- }
82
- return element.offsetHeight;
83
- }
84
- getElementOffsetFromRight(element) {
85
- if (!element) {
86
- return 0;
87
- }
88
- if (this.axis === "horizontal") {
89
- return this.getElementSize(element.parentElement) - this.getElementSize(element) - element.offsetLeft;
90
- }
91
- return this.getElementSize(element.parentElement) - this.getElementSize(element) - element.offsetTop;
92
- }
93
- getElementOffsetFromLeft(element) {
94
- if (!element) {
95
- return 0;
96
- }
97
- if (this.axis === "horizontal") {
98
- return element.offsetLeft;
99
- }
100
- return element.offsetTop;
101
- }
102
- getElementComputedValues(element) {
103
- const {
104
- direction,
105
- marginBlockStart,
106
- marginBlockEnd,
107
- marginInlineStart,
108
- marginInlineEnd,
109
- paddingBlockStart,
110
- paddingBlockEnd,
111
- paddingInlineStart,
112
- paddingInlineEnd
113
- } = window.getComputedStyle(element);
114
- const marginStartAsString = this.axis === "horizontal" ? marginInlineStart : marginBlockStart;
115
- const marginEndAsString = this.axis === "horizontal" ? marginInlineEnd : marginBlockEnd;
116
- const paddingStartAsString = this.axis === "horizontal" ? paddingInlineStart : paddingBlockStart;
117
- const paddingEndAsString = this.axis === "horizontal" ? paddingInlineEnd : paddingBlockEnd;
118
- if (marginStartAsString && !marginStartAsString.endsWith("px"))
119
- throw new Error("ok1");
120
- if (marginEndAsString && !marginEndAsString.endsWith("px"))
121
- throw new Error("ok2");
122
- if (paddingStartAsString && !paddingStartAsString.endsWith("px"))
123
- throw new Error("ok3");
124
- if (paddingEndAsString && !paddingEndAsString.endsWith("px"))
125
- throw new Error("ok4");
126
- const marginStart = parseInt(marginStartAsString || "0", 10);
127
- const marginEnd = parseInt(marginEndAsString || "0", 10);
128
- const paddingStart = parseInt(paddingStartAsString || "0", 10);
129
- const paddingEnd = parseInt(paddingEndAsString || "0", 10);
130
- const isRtl = direction === "rtl";
131
- return { isRtl, marginStart, marginEnd, paddingStart, paddingEnd };
132
- }
133
- update() {
134
- if (!this.containerElement) {
135
- return;
136
- }
137
- const {
138
- isRtl,
139
- paddingStart: containerPaddingStart,
140
- paddingEnd: containerPaddingEnd
141
- } = this.getElementComputedValues(this.containerElement);
142
- const indicatorMarginEnd = this.indicatorElement ? this.getElementComputedValues(this.indicatorElement).marginEnd : 0;
143
- const containerElementSize = this.getElementSize(this.containerElement) - containerPaddingStart - containerPaddingEnd;
144
- const indicatorElementSize = this.getElementSize(this.indicatorElement) + indicatorMarginEnd;
145
- const childrenArray = Array.from(this.containerElement.children).filter((element) => element !== this.indicatorElement).filter(isHtmlElement);
146
- const getOffset = isRtl ? this.getElementOffsetFromRight.bind(this) : this.getElementOffsetFromLeft.bind(this);
147
- const breakpoints = [];
148
- for (const childElement of childrenArray.values()) {
149
- const childOffset = getOffset(childElement);
150
- const childSize = this.getElementSize(childElement);
151
- breakpoints.push([childOffset - containerPaddingStart, childOffset + childSize + containerPaddingEnd]);
152
- }
153
- if (breakpoints.length === 0) {
154
- return;
155
- }
156
- const containerIntersectingChildIndex = breakpoints.findIndex(([_start, end]) => end > containerElementSize);
157
- if (containerIntersectingChildIndex !== -1) {
158
- const intersectingChildIndex = breakpoints.findIndex(
159
- ([start, end]) => (this.indicatorElement ? start : end) > containerElementSize - indicatorElementSize
160
- );
161
- const newVisibleItemCount = Math.max(intersectingChildIndex - (this.indicatorElement ? 1 : 0), 0);
162
- const newIndicatorElementOffset = breakpoints[newVisibleItemCount]?.[0] + containerPaddingStart;
163
- this.onUpdate(newVisibleItemCount, newIndicatorElementOffset);
164
- } else {
165
- this.onUpdate(breakpoints.length, 0);
166
- }
167
- }
168
- requestedUpdate = false;
169
- requestUpdate() {
170
- if (this.requestedUpdate) {
171
- return;
172
- }
173
- this.requestedUpdate = true;
174
- this.update();
175
- window.requestAnimationFrame(() => {
176
- this.requestedUpdate = false;
177
- });
178
- }
179
- };
180
- var isHtmlElement = (element) => {
181
- if (element instanceof HTMLElement) {
182
- return true;
183
- }
184
- throw new Error("Element provided is not a HTMLElement.");
185
- };
186
-
187
- // modules/svelte/overflowedItems.ts
188
- var overflowedItems = (items, onUpdate) => {
189
- const overflowed = new Overflowed({
190
- onUpdate: (newVisibleItemCount, indicatorElementOffset) => {
191
- onUpdate(items, newVisibleItemCount < items.length ? items.slice(newVisibleItemCount) : []);
192
- console.log(indicatorElementOffset);
193
- }
194
- });
195
- const container = (element) => {
196
- overflowed.registerContainerElement(element);
197
- element.style.display = "flex";
198
- element.style.position = "relative";
199
- element.style.flexDirection = overflowed.axis === "horizontal" ? "row" : "column";
200
- element.style.overflowX = overflowed.axis === "horizontal" ? "clip" : "";
201
- element.style.overflowY = overflowed.axis === "horizontal" ? "clip" : "";
202
- };
203
- const indicator = (element) => {
204
- overflowed.registerIndicatorElement(element);
205
- element.style.flexShrink = "0";
206
- };
207
- const item = (element, index) => {
208
- overflowed.registerItemElement(element);
209
- element.style.flexShrink = "0";
210
- };
211
- return [items, items, { container, indicator, item }];
212
- };
213
- // Annotate the CommonJS export names for ESM import in node:
214
- 0 && (module.exports = {
215
- overflowedItems
216
- });
package/svelte/index.mjs DELETED
@@ -1,34 +0,0 @@
1
- import "../chunk-TXQIKLPR.mjs";
2
- import {
3
- Overflowed
4
- } from "../chunk-DZKPYTOC.mjs";
5
-
6
- // modules/svelte/overflowedItems.ts
7
- var overflowedItems = (items, onUpdate) => {
8
- const overflowed = new Overflowed({
9
- onUpdate: (newVisibleItemCount, indicatorElementOffset) => {
10
- onUpdate(items, newVisibleItemCount < items.length ? items.slice(newVisibleItemCount) : []);
11
- console.log(indicatorElementOffset);
12
- }
13
- });
14
- const container = (element) => {
15
- overflowed.registerContainerElement(element);
16
- element.style.display = "flex";
17
- element.style.position = "relative";
18
- element.style.flexDirection = overflowed.axis === "horizontal" ? "row" : "column";
19
- element.style.overflowX = overflowed.axis === "horizontal" ? "clip" : "";
20
- element.style.overflowY = overflowed.axis === "horizontal" ? "clip" : "";
21
- };
22
- const indicator = (element) => {
23
- overflowed.registerIndicatorElement(element);
24
- element.style.flexShrink = "0";
25
- };
26
- const item = (element, index) => {
27
- overflowed.registerItemElement(element);
28
- element.style.flexShrink = "0";
29
- };
30
- return [items, items, { container, indicator, item }];
31
- };
32
- export {
33
- overflowedItems
34
- };