@digdir/designsystemet-react 1.0.0-rc.7 → 1.0.0-rc.9
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/dist/cjs/components/Tabs/Tab.js +3 -2
- package/dist/cjs/components/Tabs/TabContent.js +2 -2
- package/dist/cjs/components/Tabs/Tabs.js +2 -1
- package/dist/cjs/components/Tabs/useTab.js +1 -0
- package/dist/cjs/components/form/Combobox/internal/ComboboxInput.js +5 -7
- package/dist/cjs/components/form/Combobox/useCombobox.js +5 -2
- package/dist/cjs/node_modules/@tanstack/virtual-core/dist/esm/index.js +77 -71
- package/dist/cjs/node_modules/@tanstack/virtual-core/dist/esm/utils.js +8 -0
- package/dist/esm/components/Tabs/Tab.js +3 -2
- package/dist/esm/components/Tabs/TabContent.js +2 -2
- package/dist/esm/components/Tabs/Tabs.js +2 -1
- package/dist/esm/components/Tabs/useTab.js +1 -0
- package/dist/esm/components/form/Combobox/internal/ComboboxInput.js +5 -7
- package/dist/esm/components/form/Combobox/useCombobox.js +5 -2
- package/dist/esm/node_modules/@tanstack/virtual-core/dist/esm/index.js +78 -73
- package/dist/esm/node_modules/@tanstack/virtual-core/dist/esm/utils.js +8 -1
- package/dist/types/components/Tabs/Tab.d.ts.map +1 -1
- package/dist/types/components/Tabs/TabContent.d.ts.map +1 -1
- package/dist/types/components/Tabs/Tabs.d.ts +1 -0
- package/dist/types/components/Tabs/Tabs.d.ts.map +1 -1
- package/dist/types/components/Tabs/useTab.d.ts +4 -1
- package/dist/types/components/Tabs/useTab.d.ts.map +1 -1
- package/dist/types/components/form/Combobox/internal/ComboboxInput.d.ts.map +1 -1
- package/dist/types/components/form/Combobox/useCombobox.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -6,11 +6,12 @@ var React = require('react');
|
|
|
6
6
|
var lite = require('../../node_modules/clsx/dist/lite.js');
|
|
7
7
|
var useTab = require('./useTab.js');
|
|
8
8
|
var RovingTabindexItem = require('../../utilities/RovingTabIndex/RovingTabindexItem.js');
|
|
9
|
+
var Paragraph = require('../Typography/Paragraph/Paragraph.js');
|
|
9
10
|
|
|
10
11
|
const Tab = React.forwardRef((props, ref) => {
|
|
11
12
|
const { children, className, ...rest } = props;
|
|
12
|
-
const { ...useTabRest } = useTab.useTabItem(props);
|
|
13
|
-
return (jsxRuntime.jsx(RovingTabindexItem.RovingTabindexItem, { ...rest, asChild: true, children: jsxRuntime.jsx("button", { ...useTabRest, type: 'button', className: lite.clsx('ds-tabs__tab', 'ds-focus', className), ref: ref, children: children }) }));
|
|
13
|
+
const { size, ...useTabRest } = useTab.useTabItem(props);
|
|
14
|
+
return (jsxRuntime.jsx(RovingTabindexItem.RovingTabindexItem, { ...rest, asChild: true, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, variant: 'short', size: size, children: jsxRuntime.jsx("button", { ...useTabRest, type: 'button', className: lite.clsx('ds-tabs__tab', 'ds-focus', className), ref: ref, children: children }) }) }));
|
|
14
15
|
});
|
|
15
16
|
Tab.displayName = 'Tab';
|
|
16
17
|
|
|
@@ -8,9 +8,9 @@ var Tabs = require('./Tabs.js');
|
|
|
8
8
|
var Paragraph = require('../Typography/Paragraph/Paragraph.js');
|
|
9
9
|
|
|
10
10
|
const TabContent = React.forwardRef(({ children, value, className, ...rest }, ref) => {
|
|
11
|
-
const { value: tabsValue } = React.useContext(Tabs.TabsContext);
|
|
11
|
+
const { value: tabsValue, size } = React.useContext(Tabs.TabsContext);
|
|
12
12
|
const active = value == tabsValue;
|
|
13
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: active && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, children: jsxRuntime.jsx("div", { className: lite.clsx('ds-tabs__content', className), ref: ref, ...rest, children: children }) })) }));
|
|
13
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: active && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, variant: 'short', size: size, children: jsxRuntime.jsx("div", { className: lite.clsx('ds-tabs__content', className), ref: ref, ...rest, children: children }) })) }));
|
|
14
14
|
});
|
|
15
15
|
TabContent.displayName = 'TabContent';
|
|
16
16
|
|
|
@@ -21,7 +21,8 @@ const Tabs = React.forwardRef(({ size = 'md', children, value, defaultValue, cla
|
|
|
21
21
|
value,
|
|
22
22
|
defaultValue,
|
|
23
23
|
onChange: onValueChange,
|
|
24
|
-
|
|
24
|
+
size,
|
|
25
|
+
}, children: jsxRuntime.jsx("div", { className: lite.clsx(`ds-tabs--${size}`, className), ref: ref, ...rest, children: children }) }));
|
|
25
26
|
});
|
|
26
27
|
Tabs.displayName = 'Tabs';
|
|
27
28
|
|
|
@@ -10,7 +10,6 @@ var akselIcons = require('@navikt/aksel-icons');
|
|
|
10
10
|
var floatingUi_react = require('../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
|
|
11
11
|
var ComboboxContext = require('../ComboboxContext.js');
|
|
12
12
|
var ComboboxIdContext = require('../ComboboxIdContext.js');
|
|
13
|
-
var useCombobox = require('../useCombobox.js');
|
|
14
13
|
var ComboboxChips = require('./ComboboxChips.js');
|
|
15
14
|
var ComboboxClearButton = require('./ComboboxClearButton.js');
|
|
16
15
|
var Box = require('../../../Box/Box.js');
|
|
@@ -33,12 +32,11 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
|
|
|
33
32
|
setInputValue(value);
|
|
34
33
|
setActiveIndex(0);
|
|
35
34
|
// check if input value is the same as a label, if so, select it
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
handleSelectOption({ option: option });
|
|
35
|
+
Object.values(options).forEach((option) => {
|
|
36
|
+
if (option.label.toLowerCase() === value.toLowerCase()) {
|
|
37
|
+
handleSelectOption({ option: option });
|
|
38
|
+
}
|
|
39
|
+
});
|
|
42
40
|
};
|
|
43
41
|
const showClearButton = multiple && !hideClearButton && Object.keys(selectedOptions).length > 0;
|
|
44
42
|
/* Props from floating-ui */
|
|
@@ -97,7 +97,8 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
|
|
|
97
97
|
const [selectedOptions, setSelectedOptions] = React.useState(preSelectedOptions);
|
|
98
98
|
const { filteredOptions, filteredOptionsChildren } = React.useMemo(() => {
|
|
99
99
|
const filteredOptions = [];
|
|
100
|
-
const filteredOptionsChildren = Object.keys(options)
|
|
100
|
+
const filteredOptionsChildren = Object.keys(options)
|
|
101
|
+
.map((option, index) => {
|
|
101
102
|
/* If we have a selected value in single mode and the input matches an option, return all children */
|
|
102
103
|
if (!multiple && Object.keys(selectedOptions).length === 1) {
|
|
103
104
|
filteredOptions.push(option);
|
|
@@ -111,7 +112,9 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
|
|
|
111
112
|
filteredOptions.push(option);
|
|
112
113
|
return optionsChildren[index];
|
|
113
114
|
}
|
|
114
|
-
|
|
115
|
+
return;
|
|
116
|
+
})
|
|
117
|
+
.filter((child) => child);
|
|
115
118
|
return { filteredOptions, filteredOptionsChildren };
|
|
116
119
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
117
120
|
}, [inputValue, multiple, options, optionsChildren, selectedOptions]);
|
|
@@ -18,16 +18,20 @@ const observeElementRect = (instance, cb) => {
|
|
|
18
18
|
if (!element) {
|
|
19
19
|
return;
|
|
20
20
|
}
|
|
21
|
+
const targetWindow = instance.targetWindow;
|
|
22
|
+
if (!targetWindow) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
21
25
|
const handler = (rect) => {
|
|
22
26
|
const { width, height } = rect;
|
|
23
27
|
cb({ width: Math.round(width), height: Math.round(height) });
|
|
24
28
|
};
|
|
25
29
|
handler(element.getBoundingClientRect());
|
|
26
|
-
if (
|
|
30
|
+
if (!targetWindow.ResizeObserver) {
|
|
27
31
|
return () => {
|
|
28
32
|
};
|
|
29
33
|
}
|
|
30
|
-
const observer = new ResizeObserver((entries) => {
|
|
34
|
+
const observer = new targetWindow.ResizeObserver((entries) => {
|
|
31
35
|
const entry = entries[0];
|
|
32
36
|
if (entry == null ? void 0 : entry.borderBoxSize) {
|
|
33
37
|
const box = entry.borderBoxSize[0];
|
|
@@ -43,20 +47,40 @@ const observeElementRect = (instance, cb) => {
|
|
|
43
47
|
observer.unobserve(element);
|
|
44
48
|
};
|
|
45
49
|
};
|
|
50
|
+
const addEventListenerOptions = {
|
|
51
|
+
passive: true
|
|
52
|
+
};
|
|
53
|
+
const supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
|
|
46
54
|
const observeElementOffset = (instance, cb) => {
|
|
47
55
|
const element = instance.scrollElement;
|
|
48
56
|
if (!element) {
|
|
49
57
|
return;
|
|
50
58
|
}
|
|
51
|
-
const
|
|
52
|
-
|
|
59
|
+
const targetWindow = instance.targetWindow;
|
|
60
|
+
if (!targetWindow) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
let offset = 0;
|
|
64
|
+
const fallback = supportsScrollend ? () => void 0 : utils.debounce(
|
|
65
|
+
targetWindow,
|
|
66
|
+
() => {
|
|
67
|
+
cb(offset, false);
|
|
68
|
+
},
|
|
69
|
+
instance.options.isScrollingResetDelay
|
|
70
|
+
);
|
|
71
|
+
const createHandler = (isScrolling) => () => {
|
|
72
|
+
offset = element[instance.options.horizontal ? "scrollLeft" : "scrollTop"];
|
|
73
|
+
fallback();
|
|
74
|
+
cb(offset, isScrolling);
|
|
53
75
|
};
|
|
54
|
-
handler();
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
76
|
+
const handler = createHandler(true);
|
|
77
|
+
const endHandler = createHandler(false);
|
|
78
|
+
endHandler();
|
|
79
|
+
element.addEventListener("scroll", handler, addEventListenerOptions);
|
|
80
|
+
element.addEventListener("scrollend", endHandler, addEventListenerOptions);
|
|
58
81
|
return () => {
|
|
59
82
|
element.removeEventListener("scroll", handler);
|
|
83
|
+
element.removeEventListener("scrollend", endHandler);
|
|
60
84
|
};
|
|
61
85
|
};
|
|
62
86
|
const measureElement = (element, entry, instance) => {
|
|
@@ -88,8 +112,8 @@ class Virtualizer {
|
|
|
88
112
|
constructor(opts) {
|
|
89
113
|
this.unsubs = [];
|
|
90
114
|
this.scrollElement = null;
|
|
115
|
+
this.targetWindow = null;
|
|
91
116
|
this.isScrolling = false;
|
|
92
|
-
this.isScrollingTimeoutId = null;
|
|
93
117
|
this.scrollToIndexTimeoutId = null;
|
|
94
118
|
this.measurementsCache = [];
|
|
95
119
|
this.itemSizeCache = /* @__PURE__ */ new Map();
|
|
@@ -102,15 +126,15 @@ class Virtualizer {
|
|
|
102
126
|
const get = () => {
|
|
103
127
|
if (_ro) {
|
|
104
128
|
return _ro;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
entries.forEach((entry) => {
|
|
108
|
-
this._measureElement(entry.target, entry);
|
|
109
|
-
});
|
|
110
|
-
});
|
|
111
|
-
} else {
|
|
129
|
+
}
|
|
130
|
+
if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
|
|
112
131
|
return null;
|
|
113
132
|
}
|
|
133
|
+
return _ro = new this.targetWindow.ResizeObserver((entries) => {
|
|
134
|
+
entries.forEach((entry) => {
|
|
135
|
+
this._measureElement(entry.target, entry);
|
|
136
|
+
});
|
|
137
|
+
});
|
|
114
138
|
};
|
|
115
139
|
return {
|
|
116
140
|
disconnect: () => {
|
|
@@ -150,39 +174,24 @@ class Virtualizer {
|
|
|
150
174
|
initialRect: { width: 0, height: 0 },
|
|
151
175
|
scrollMargin: 0,
|
|
152
176
|
gap: 0,
|
|
153
|
-
scrollingDelay: 150,
|
|
154
177
|
indexAttribute: "data-index",
|
|
155
178
|
initialMeasurementsCache: [],
|
|
156
179
|
lanes: 1,
|
|
180
|
+
isScrollingResetDelay: 150,
|
|
157
181
|
...opts2
|
|
158
182
|
};
|
|
159
183
|
};
|
|
160
|
-
this.notify = (sync) => {
|
|
184
|
+
this.notify = (force, sync) => {
|
|
161
185
|
var _a, _b;
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
this.range ? this.range.startIndex : null,
|
|
170
|
-
this.range ? this.range.endIndex : null
|
|
171
|
-
];
|
|
172
|
-
},
|
|
173
|
-
(isScrolling) => {
|
|
174
|
-
this.notify(isScrolling);
|
|
175
|
-
},
|
|
176
|
-
{
|
|
177
|
-
key: process.env.NODE_ENV !== "production" && "maybeNotify",
|
|
178
|
-
debug: () => this.options.debug,
|
|
179
|
-
initialDeps: [
|
|
180
|
-
this.isScrolling,
|
|
181
|
-
this.range ? this.range.startIndex : null,
|
|
182
|
-
this.range ? this.range.endIndex : null
|
|
183
|
-
]
|
|
186
|
+
const { startIndex, endIndex } = this.range ?? {
|
|
187
|
+
startIndex: void 0,
|
|
188
|
+
endIndex: void 0
|
|
189
|
+
};
|
|
190
|
+
const range = this.calculateRange();
|
|
191
|
+
if (force || startIndex !== (range == null ? void 0 : range.startIndex) || endIndex !== (range == null ? void 0 : range.endIndex)) {
|
|
192
|
+
(_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, sync);
|
|
184
193
|
}
|
|
185
|
-
|
|
194
|
+
};
|
|
186
195
|
this.cleanup = () => {
|
|
187
196
|
this.unsubs.filter(Boolean).forEach((d) => d());
|
|
188
197
|
this.unsubs = [];
|
|
@@ -196,10 +205,16 @@ class Virtualizer {
|
|
|
196
205
|
};
|
|
197
206
|
};
|
|
198
207
|
this._willUpdate = () => {
|
|
208
|
+
var _a;
|
|
199
209
|
const scrollElement = this.options.getScrollElement();
|
|
200
210
|
if (this.scrollElement !== scrollElement) {
|
|
201
211
|
this.cleanup();
|
|
202
212
|
this.scrollElement = scrollElement;
|
|
213
|
+
if (this.scrollElement && "ownerDocument" in this.scrollElement) {
|
|
214
|
+
this.targetWindow = this.scrollElement.ownerDocument.defaultView;
|
|
215
|
+
} else {
|
|
216
|
+
this.targetWindow = ((_a = this.scrollElement) == null ? void 0 : _a.window) ?? null;
|
|
217
|
+
}
|
|
203
218
|
this._scrollToOffset(this.scrollOffset, {
|
|
204
219
|
adjustments: void 0,
|
|
205
220
|
behavior: void 0
|
|
@@ -207,29 +222,17 @@ class Virtualizer {
|
|
|
207
222
|
this.unsubs.push(
|
|
208
223
|
this.options.observeElementRect(this, (rect) => {
|
|
209
224
|
this.scrollRect = rect;
|
|
210
|
-
this.
|
|
225
|
+
this.notify(false, false);
|
|
211
226
|
})
|
|
212
227
|
);
|
|
213
228
|
this.unsubs.push(
|
|
214
|
-
this.options.observeElementOffset(this, (offset) => {
|
|
229
|
+
this.options.observeElementOffset(this, (offset, isScrolling) => {
|
|
215
230
|
this.scrollAdjustments = 0;
|
|
216
|
-
|
|
217
|
-
return;
|
|
218
|
-
}
|
|
219
|
-
if (this.isScrollingTimeoutId !== null) {
|
|
220
|
-
clearTimeout(this.isScrollingTimeoutId);
|
|
221
|
-
this.isScrollingTimeoutId = null;
|
|
222
|
-
}
|
|
223
|
-
this.isScrolling = true;
|
|
224
|
-
this.scrollDirection = this.scrollOffset < offset ? "forward" : "backward";
|
|
231
|
+
this.scrollDirection = isScrolling ? this.scrollOffset < offset ? "forward" : "backward" : null;
|
|
225
232
|
this.scrollOffset = offset;
|
|
226
|
-
this.
|
|
227
|
-
this.
|
|
228
|
-
|
|
229
|
-
this.isScrolling = false;
|
|
230
|
-
this.scrollDirection = null;
|
|
231
|
-
this.maybeNotify();
|
|
232
|
-
}, this.options.scrollingDelay);
|
|
233
|
+
const prevIsScrolling = this.isScrolling;
|
|
234
|
+
this.isScrolling = isScrolling;
|
|
235
|
+
this.notify(prevIsScrolling !== isScrolling, isScrolling);
|
|
233
236
|
})
|
|
234
237
|
);
|
|
235
238
|
}
|
|
@@ -237,7 +240,7 @@ class Virtualizer {
|
|
|
237
240
|
this.getSize = () => {
|
|
238
241
|
return this.scrollRect[this.options.horizontal ? "width" : "height"];
|
|
239
242
|
};
|
|
240
|
-
this.
|
|
243
|
+
this.getMeasurementOptions = utils.memo(
|
|
241
244
|
() => [
|
|
242
245
|
this.options.count,
|
|
243
246
|
this.options.paddingStart,
|
|
@@ -285,7 +288,7 @@ class Virtualizer {
|
|
|
285
288
|
})[0] : void 0;
|
|
286
289
|
};
|
|
287
290
|
this.getMeasurements = utils.memo(
|
|
288
|
-
() => [this.
|
|
291
|
+
() => [this.getMeasurementOptions(), this.itemSizeCache],
|
|
289
292
|
({ count, paddingStart, scrollMargin, getItemKey }, itemSizeCache) => {
|
|
290
293
|
const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
|
|
291
294
|
this.pendingMeasuredCacheIndexes = [];
|
|
@@ -338,7 +341,8 @@ class Virtualizer {
|
|
|
338
341
|
],
|
|
339
342
|
(rangeExtractor, range, overscan, count) => {
|
|
340
343
|
return range === null ? [] : rangeExtractor({
|
|
341
|
-
|
|
344
|
+
startIndex: range.startIndex,
|
|
345
|
+
endIndex: range.endIndex,
|
|
342
346
|
overscan,
|
|
343
347
|
count
|
|
344
348
|
});
|
|
@@ -385,7 +389,7 @@ class Virtualizer {
|
|
|
385
389
|
const itemSize = this.itemSizeCache.get(item.key) ?? item.size;
|
|
386
390
|
const delta = size - itemSize;
|
|
387
391
|
if (delta !== 0) {
|
|
388
|
-
if (item.start < this.scrollOffset + this.scrollAdjustments) {
|
|
392
|
+
if (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.scrollOffset + this.scrollAdjustments) {
|
|
389
393
|
if (process.env.NODE_ENV !== "production" && this.options.debug) {
|
|
390
394
|
console.info("correction", delta);
|
|
391
395
|
}
|
|
@@ -396,7 +400,7 @@ class Virtualizer {
|
|
|
396
400
|
}
|
|
397
401
|
this.pendingMeasuredCacheIndexes.push(item.index);
|
|
398
402
|
this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size));
|
|
399
|
-
this.notify(false);
|
|
403
|
+
this.notify(true, false);
|
|
400
404
|
}
|
|
401
405
|
};
|
|
402
406
|
this.measureElement = (node) => {
|
|
@@ -472,8 +476,8 @@ class Virtualizer {
|
|
|
472
476
|
};
|
|
473
477
|
this.isDynamicMode = () => this.measureElementCache.size > 0;
|
|
474
478
|
this.cancelScrollToIndex = () => {
|
|
475
|
-
if (this.scrollToIndexTimeoutId !== null) {
|
|
476
|
-
clearTimeout(this.scrollToIndexTimeoutId);
|
|
479
|
+
if (this.scrollToIndexTimeoutId !== null && this.targetWindow) {
|
|
480
|
+
this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId);
|
|
477
481
|
this.scrollToIndexTimeoutId = null;
|
|
478
482
|
}
|
|
479
483
|
};
|
|
@@ -499,8 +503,8 @@ class Virtualizer {
|
|
|
499
503
|
}
|
|
500
504
|
const [toOffset, align] = this.getOffsetForIndex(index, initialAlign);
|
|
501
505
|
this._scrollToOffset(toOffset, { adjustments: void 0, behavior });
|
|
502
|
-
if (behavior !== "smooth" && this.isDynamicMode()) {
|
|
503
|
-
this.scrollToIndexTimeoutId = setTimeout(() => {
|
|
506
|
+
if (behavior !== "smooth" && this.isDynamicMode() && this.targetWindow) {
|
|
507
|
+
this.scrollToIndexTimeoutId = this.targetWindow.setTimeout(() => {
|
|
504
508
|
this.scrollToIndexTimeoutId = null;
|
|
505
509
|
const elementInDOM = this.measureElementCache.has(
|
|
506
510
|
this.options.getItemKey(index)
|
|
@@ -548,17 +552,18 @@ class Virtualizer {
|
|
|
548
552
|
this.options.scrollToFn(offset, { behavior, adjustments }, this);
|
|
549
553
|
};
|
|
550
554
|
this.measure = () => {
|
|
555
|
+
var _a, _b;
|
|
551
556
|
this.itemSizeCache = /* @__PURE__ */ new Map();
|
|
552
|
-
this.
|
|
557
|
+
(_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, false);
|
|
553
558
|
};
|
|
554
559
|
this.setOptions(opts);
|
|
555
560
|
this.scrollRect = this.options.initialRect;
|
|
556
|
-
this.scrollOffset = this.options.initialOffset;
|
|
561
|
+
this.scrollOffset = typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset;
|
|
557
562
|
this.measurementsCache = this.options.initialMeasurementsCache;
|
|
558
563
|
this.measurementsCache.forEach((item) => {
|
|
559
564
|
this.itemSizeCache.set(item.key, item.size);
|
|
560
565
|
});
|
|
561
|
-
this.
|
|
566
|
+
this.notify(false, false);
|
|
562
567
|
}
|
|
563
568
|
}
|
|
564
569
|
const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
|
|
@@ -595,6 +600,7 @@ function calculateRange({
|
|
|
595
600
|
}
|
|
596
601
|
|
|
597
602
|
exports.approxEqual = utils.approxEqual;
|
|
603
|
+
exports.debounce = utils.debounce;
|
|
598
604
|
exports.memo = utils.memo;
|
|
599
605
|
exports.notUndefined = utils.notUndefined;
|
|
600
606
|
exports.Virtualizer = Virtualizer;
|
|
@@ -54,7 +54,15 @@ function notUndefined(value, msg) {
|
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
const approxEqual = (a, b) => Math.abs(a - b) < 1;
|
|
57
|
+
const debounce = (targetWindow, fn, ms) => {
|
|
58
|
+
let timeoutId;
|
|
59
|
+
return function(...args) {
|
|
60
|
+
targetWindow.clearTimeout(timeoutId);
|
|
61
|
+
timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
|
|
62
|
+
};
|
|
63
|
+
};
|
|
57
64
|
|
|
58
65
|
exports.approxEqual = approxEqual;
|
|
66
|
+
exports.debounce = debounce;
|
|
59
67
|
exports.memo = memo;
|
|
60
68
|
exports.notUndefined = notUndefined;
|
|
@@ -4,11 +4,12 @@ import { forwardRef } from 'react';
|
|
|
4
4
|
import { clsx } from '../../node_modules/clsx/dist/lite.js';
|
|
5
5
|
import { useTabItem } from './useTab.js';
|
|
6
6
|
import { RovingTabindexItem } from '../../utilities/RovingTabIndex/RovingTabindexItem.js';
|
|
7
|
+
import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
|
|
7
8
|
|
|
8
9
|
const Tab = forwardRef((props, ref) => {
|
|
9
10
|
const { children, className, ...rest } = props;
|
|
10
|
-
const { ...useTabRest } = useTabItem(props);
|
|
11
|
-
return (jsx(RovingTabindexItem, { ...rest, asChild: true, children: jsx("button", { ...useTabRest, type: 'button', className: clsx('ds-tabs__tab', 'ds-focus', className), ref: ref, children: children }) }));
|
|
11
|
+
const { size, ...useTabRest } = useTabItem(props);
|
|
12
|
+
return (jsx(RovingTabindexItem, { ...rest, asChild: true, children: jsx(Paragraph, { asChild: true, variant: 'short', size: size, children: jsx("button", { ...useTabRest, type: 'button', className: clsx('ds-tabs__tab', 'ds-focus', className), ref: ref, children: children }) }) }));
|
|
12
13
|
});
|
|
13
14
|
Tab.displayName = 'Tab';
|
|
14
15
|
|
|
@@ -6,9 +6,9 @@ import { TabsContext } from './Tabs.js';
|
|
|
6
6
|
import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
|
|
7
7
|
|
|
8
8
|
const TabContent = forwardRef(({ children, value, className, ...rest }, ref) => {
|
|
9
|
-
const { value: tabsValue } = useContext(TabsContext);
|
|
9
|
+
const { value: tabsValue, size } = useContext(TabsContext);
|
|
10
10
|
const active = value == tabsValue;
|
|
11
|
-
return (jsx(Fragment, { children: active && (jsx(Paragraph, { asChild: true, children: jsx("div", { className: clsx('ds-tabs__content', className), ref: ref, ...rest, children: children }) })) }));
|
|
11
|
+
return (jsx(Fragment, { children: active && (jsx(Paragraph, { asChild: true, variant: 'short', size: size, children: jsx("div", { className: clsx('ds-tabs__content', className), ref: ref, ...rest, children: children }) })) }));
|
|
12
12
|
});
|
|
13
13
|
TabContent.displayName = 'TabContent';
|
|
14
14
|
|
|
@@ -19,7 +19,8 @@ const Tabs = forwardRef(({ size = 'md', children, value, defaultValue, className
|
|
|
19
19
|
value,
|
|
20
20
|
defaultValue,
|
|
21
21
|
onChange: onValueChange,
|
|
22
|
-
|
|
22
|
+
size,
|
|
23
|
+
}, children: jsx("div", { className: clsx(`ds-tabs--${size}`, className), ref: ref, ...rest, children: children }) }));
|
|
23
24
|
});
|
|
24
25
|
Tabs.displayName = 'Tabs';
|
|
25
26
|
|
|
@@ -6,7 +6,6 @@ import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
|
|
|
6
6
|
import { useMergeRefs } from '../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
|
|
7
7
|
import { ComboboxContext } from '../ComboboxContext.js';
|
|
8
8
|
import { useComboboxIdDispatch } from '../ComboboxIdContext.js';
|
|
9
|
-
import { prefix } from '../useCombobox.js';
|
|
10
9
|
import ComboboxChips from './ComboboxChips.js';
|
|
11
10
|
import ComboboxClearButton from './ComboboxClearButton.js';
|
|
12
11
|
import { Box } from '../../../Box/Box.js';
|
|
@@ -29,12 +28,11 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
|
|
|
29
28
|
setInputValue(value);
|
|
30
29
|
setActiveIndex(0);
|
|
31
30
|
// check if input value is the same as a label, if so, select it
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
handleSelectOption({ option: option });
|
|
31
|
+
Object.values(options).forEach((option) => {
|
|
32
|
+
if (option.label.toLowerCase() === value.toLowerCase()) {
|
|
33
|
+
handleSelectOption({ option: option });
|
|
34
|
+
}
|
|
35
|
+
});
|
|
38
36
|
};
|
|
39
37
|
const showClearButton = multiple && !hideClearButton && Object.keys(selectedOptions).length > 0;
|
|
40
38
|
/* Props from floating-ui */
|
|
@@ -93,7 +93,8 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
|
|
|
93
93
|
const [selectedOptions, setSelectedOptions] = useState(preSelectedOptions);
|
|
94
94
|
const { filteredOptions, filteredOptionsChildren } = useMemo(() => {
|
|
95
95
|
const filteredOptions = [];
|
|
96
|
-
const filteredOptionsChildren = Object.keys(options)
|
|
96
|
+
const filteredOptionsChildren = Object.keys(options)
|
|
97
|
+
.map((option, index) => {
|
|
97
98
|
/* If we have a selected value in single mode and the input matches an option, return all children */
|
|
98
99
|
if (!multiple && Object.keys(selectedOptions).length === 1) {
|
|
99
100
|
filteredOptions.push(option);
|
|
@@ -107,7 +108,9 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
|
|
|
107
108
|
filteredOptions.push(option);
|
|
108
109
|
return optionsChildren[index];
|
|
109
110
|
}
|
|
110
|
-
|
|
111
|
+
return;
|
|
112
|
+
})
|
|
113
|
+
.filter((child) => child);
|
|
111
114
|
return { filteredOptions, filteredOptionsChildren };
|
|
112
115
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
113
116
|
}, [inputValue, multiple, options, optionsChildren, selectedOptions]);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { memo, notUndefined, approxEqual } from './utils.js';
|
|
2
|
+
import { debounce, memo, notUndefined, approxEqual } from './utils.js';
|
|
3
3
|
|
|
4
4
|
const defaultKeyExtractor = (index) => index;
|
|
5
5
|
const defaultRangeExtractor = (range) => {
|
|
@@ -16,16 +16,20 @@ const observeElementRect = (instance, cb) => {
|
|
|
16
16
|
if (!element) {
|
|
17
17
|
return;
|
|
18
18
|
}
|
|
19
|
+
const targetWindow = instance.targetWindow;
|
|
20
|
+
if (!targetWindow) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
19
23
|
const handler = (rect) => {
|
|
20
24
|
const { width, height } = rect;
|
|
21
25
|
cb({ width: Math.round(width), height: Math.round(height) });
|
|
22
26
|
};
|
|
23
27
|
handler(element.getBoundingClientRect());
|
|
24
|
-
if (
|
|
28
|
+
if (!targetWindow.ResizeObserver) {
|
|
25
29
|
return () => {
|
|
26
30
|
};
|
|
27
31
|
}
|
|
28
|
-
const observer = new ResizeObserver((entries) => {
|
|
32
|
+
const observer = new targetWindow.ResizeObserver((entries) => {
|
|
29
33
|
const entry = entries[0];
|
|
30
34
|
if (entry == null ? void 0 : entry.borderBoxSize) {
|
|
31
35
|
const box = entry.borderBoxSize[0];
|
|
@@ -41,20 +45,40 @@ const observeElementRect = (instance, cb) => {
|
|
|
41
45
|
observer.unobserve(element);
|
|
42
46
|
};
|
|
43
47
|
};
|
|
48
|
+
const addEventListenerOptions = {
|
|
49
|
+
passive: true
|
|
50
|
+
};
|
|
51
|
+
const supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
|
|
44
52
|
const observeElementOffset = (instance, cb) => {
|
|
45
53
|
const element = instance.scrollElement;
|
|
46
54
|
if (!element) {
|
|
47
55
|
return;
|
|
48
56
|
}
|
|
49
|
-
const
|
|
50
|
-
|
|
57
|
+
const targetWindow = instance.targetWindow;
|
|
58
|
+
if (!targetWindow) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
let offset = 0;
|
|
62
|
+
const fallback = supportsScrollend ? () => void 0 : debounce(
|
|
63
|
+
targetWindow,
|
|
64
|
+
() => {
|
|
65
|
+
cb(offset, false);
|
|
66
|
+
},
|
|
67
|
+
instance.options.isScrollingResetDelay
|
|
68
|
+
);
|
|
69
|
+
const createHandler = (isScrolling) => () => {
|
|
70
|
+
offset = element[instance.options.horizontal ? "scrollLeft" : "scrollTop"];
|
|
71
|
+
fallback();
|
|
72
|
+
cb(offset, isScrolling);
|
|
51
73
|
};
|
|
52
|
-
handler();
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
74
|
+
const handler = createHandler(true);
|
|
75
|
+
const endHandler = createHandler(false);
|
|
76
|
+
endHandler();
|
|
77
|
+
element.addEventListener("scroll", handler, addEventListenerOptions);
|
|
78
|
+
element.addEventListener("scrollend", endHandler, addEventListenerOptions);
|
|
56
79
|
return () => {
|
|
57
80
|
element.removeEventListener("scroll", handler);
|
|
81
|
+
element.removeEventListener("scrollend", endHandler);
|
|
58
82
|
};
|
|
59
83
|
};
|
|
60
84
|
const measureElement = (element, entry, instance) => {
|
|
@@ -86,8 +110,8 @@ class Virtualizer {
|
|
|
86
110
|
constructor(opts) {
|
|
87
111
|
this.unsubs = [];
|
|
88
112
|
this.scrollElement = null;
|
|
113
|
+
this.targetWindow = null;
|
|
89
114
|
this.isScrolling = false;
|
|
90
|
-
this.isScrollingTimeoutId = null;
|
|
91
115
|
this.scrollToIndexTimeoutId = null;
|
|
92
116
|
this.measurementsCache = [];
|
|
93
117
|
this.itemSizeCache = /* @__PURE__ */ new Map();
|
|
@@ -100,15 +124,15 @@ class Virtualizer {
|
|
|
100
124
|
const get = () => {
|
|
101
125
|
if (_ro) {
|
|
102
126
|
return _ro;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
entries.forEach((entry) => {
|
|
106
|
-
this._measureElement(entry.target, entry);
|
|
107
|
-
});
|
|
108
|
-
});
|
|
109
|
-
} else {
|
|
127
|
+
}
|
|
128
|
+
if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
|
|
110
129
|
return null;
|
|
111
130
|
}
|
|
131
|
+
return _ro = new this.targetWindow.ResizeObserver((entries) => {
|
|
132
|
+
entries.forEach((entry) => {
|
|
133
|
+
this._measureElement(entry.target, entry);
|
|
134
|
+
});
|
|
135
|
+
});
|
|
112
136
|
};
|
|
113
137
|
return {
|
|
114
138
|
disconnect: () => {
|
|
@@ -148,39 +172,24 @@ class Virtualizer {
|
|
|
148
172
|
initialRect: { width: 0, height: 0 },
|
|
149
173
|
scrollMargin: 0,
|
|
150
174
|
gap: 0,
|
|
151
|
-
scrollingDelay: 150,
|
|
152
175
|
indexAttribute: "data-index",
|
|
153
176
|
initialMeasurementsCache: [],
|
|
154
177
|
lanes: 1,
|
|
178
|
+
isScrollingResetDelay: 150,
|
|
155
179
|
...opts2
|
|
156
180
|
};
|
|
157
181
|
};
|
|
158
|
-
this.notify = (sync) => {
|
|
182
|
+
this.notify = (force, sync) => {
|
|
159
183
|
var _a, _b;
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
this.range ? this.range.startIndex : null,
|
|
168
|
-
this.range ? this.range.endIndex : null
|
|
169
|
-
];
|
|
170
|
-
},
|
|
171
|
-
(isScrolling) => {
|
|
172
|
-
this.notify(isScrolling);
|
|
173
|
-
},
|
|
174
|
-
{
|
|
175
|
-
key: process.env.NODE_ENV !== "production" && "maybeNotify",
|
|
176
|
-
debug: () => this.options.debug,
|
|
177
|
-
initialDeps: [
|
|
178
|
-
this.isScrolling,
|
|
179
|
-
this.range ? this.range.startIndex : null,
|
|
180
|
-
this.range ? this.range.endIndex : null
|
|
181
|
-
]
|
|
184
|
+
const { startIndex, endIndex } = this.range ?? {
|
|
185
|
+
startIndex: void 0,
|
|
186
|
+
endIndex: void 0
|
|
187
|
+
};
|
|
188
|
+
const range = this.calculateRange();
|
|
189
|
+
if (force || startIndex !== (range == null ? void 0 : range.startIndex) || endIndex !== (range == null ? void 0 : range.endIndex)) {
|
|
190
|
+
(_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, sync);
|
|
182
191
|
}
|
|
183
|
-
|
|
192
|
+
};
|
|
184
193
|
this.cleanup = () => {
|
|
185
194
|
this.unsubs.filter(Boolean).forEach((d) => d());
|
|
186
195
|
this.unsubs = [];
|
|
@@ -194,10 +203,16 @@ class Virtualizer {
|
|
|
194
203
|
};
|
|
195
204
|
};
|
|
196
205
|
this._willUpdate = () => {
|
|
206
|
+
var _a;
|
|
197
207
|
const scrollElement = this.options.getScrollElement();
|
|
198
208
|
if (this.scrollElement !== scrollElement) {
|
|
199
209
|
this.cleanup();
|
|
200
210
|
this.scrollElement = scrollElement;
|
|
211
|
+
if (this.scrollElement && "ownerDocument" in this.scrollElement) {
|
|
212
|
+
this.targetWindow = this.scrollElement.ownerDocument.defaultView;
|
|
213
|
+
} else {
|
|
214
|
+
this.targetWindow = ((_a = this.scrollElement) == null ? void 0 : _a.window) ?? null;
|
|
215
|
+
}
|
|
201
216
|
this._scrollToOffset(this.scrollOffset, {
|
|
202
217
|
adjustments: void 0,
|
|
203
218
|
behavior: void 0
|
|
@@ -205,29 +220,17 @@ class Virtualizer {
|
|
|
205
220
|
this.unsubs.push(
|
|
206
221
|
this.options.observeElementRect(this, (rect) => {
|
|
207
222
|
this.scrollRect = rect;
|
|
208
|
-
this.
|
|
223
|
+
this.notify(false, false);
|
|
209
224
|
})
|
|
210
225
|
);
|
|
211
226
|
this.unsubs.push(
|
|
212
|
-
this.options.observeElementOffset(this, (offset) => {
|
|
227
|
+
this.options.observeElementOffset(this, (offset, isScrolling) => {
|
|
213
228
|
this.scrollAdjustments = 0;
|
|
214
|
-
|
|
215
|
-
return;
|
|
216
|
-
}
|
|
217
|
-
if (this.isScrollingTimeoutId !== null) {
|
|
218
|
-
clearTimeout(this.isScrollingTimeoutId);
|
|
219
|
-
this.isScrollingTimeoutId = null;
|
|
220
|
-
}
|
|
221
|
-
this.isScrolling = true;
|
|
222
|
-
this.scrollDirection = this.scrollOffset < offset ? "forward" : "backward";
|
|
229
|
+
this.scrollDirection = isScrolling ? this.scrollOffset < offset ? "forward" : "backward" : null;
|
|
223
230
|
this.scrollOffset = offset;
|
|
224
|
-
this.
|
|
225
|
-
this.
|
|
226
|
-
|
|
227
|
-
this.isScrolling = false;
|
|
228
|
-
this.scrollDirection = null;
|
|
229
|
-
this.maybeNotify();
|
|
230
|
-
}, this.options.scrollingDelay);
|
|
231
|
+
const prevIsScrolling = this.isScrolling;
|
|
232
|
+
this.isScrolling = isScrolling;
|
|
233
|
+
this.notify(prevIsScrolling !== isScrolling, isScrolling);
|
|
231
234
|
})
|
|
232
235
|
);
|
|
233
236
|
}
|
|
@@ -235,7 +238,7 @@ class Virtualizer {
|
|
|
235
238
|
this.getSize = () => {
|
|
236
239
|
return this.scrollRect[this.options.horizontal ? "width" : "height"];
|
|
237
240
|
};
|
|
238
|
-
this.
|
|
241
|
+
this.getMeasurementOptions = memo(
|
|
239
242
|
() => [
|
|
240
243
|
this.options.count,
|
|
241
244
|
this.options.paddingStart,
|
|
@@ -283,7 +286,7 @@ class Virtualizer {
|
|
|
283
286
|
})[0] : void 0;
|
|
284
287
|
};
|
|
285
288
|
this.getMeasurements = memo(
|
|
286
|
-
() => [this.
|
|
289
|
+
() => [this.getMeasurementOptions(), this.itemSizeCache],
|
|
287
290
|
({ count, paddingStart, scrollMargin, getItemKey }, itemSizeCache) => {
|
|
288
291
|
const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
|
|
289
292
|
this.pendingMeasuredCacheIndexes = [];
|
|
@@ -336,7 +339,8 @@ class Virtualizer {
|
|
|
336
339
|
],
|
|
337
340
|
(rangeExtractor, range, overscan, count) => {
|
|
338
341
|
return range === null ? [] : rangeExtractor({
|
|
339
|
-
|
|
342
|
+
startIndex: range.startIndex,
|
|
343
|
+
endIndex: range.endIndex,
|
|
340
344
|
overscan,
|
|
341
345
|
count
|
|
342
346
|
});
|
|
@@ -383,7 +387,7 @@ class Virtualizer {
|
|
|
383
387
|
const itemSize = this.itemSizeCache.get(item.key) ?? item.size;
|
|
384
388
|
const delta = size - itemSize;
|
|
385
389
|
if (delta !== 0) {
|
|
386
|
-
if (item.start < this.scrollOffset + this.scrollAdjustments) {
|
|
390
|
+
if (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.scrollOffset + this.scrollAdjustments) {
|
|
387
391
|
if (process.env.NODE_ENV !== "production" && this.options.debug) {
|
|
388
392
|
console.info("correction", delta);
|
|
389
393
|
}
|
|
@@ -394,7 +398,7 @@ class Virtualizer {
|
|
|
394
398
|
}
|
|
395
399
|
this.pendingMeasuredCacheIndexes.push(item.index);
|
|
396
400
|
this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size));
|
|
397
|
-
this.notify(false);
|
|
401
|
+
this.notify(true, false);
|
|
398
402
|
}
|
|
399
403
|
};
|
|
400
404
|
this.measureElement = (node) => {
|
|
@@ -470,8 +474,8 @@ class Virtualizer {
|
|
|
470
474
|
};
|
|
471
475
|
this.isDynamicMode = () => this.measureElementCache.size > 0;
|
|
472
476
|
this.cancelScrollToIndex = () => {
|
|
473
|
-
if (this.scrollToIndexTimeoutId !== null) {
|
|
474
|
-
clearTimeout(this.scrollToIndexTimeoutId);
|
|
477
|
+
if (this.scrollToIndexTimeoutId !== null && this.targetWindow) {
|
|
478
|
+
this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId);
|
|
475
479
|
this.scrollToIndexTimeoutId = null;
|
|
476
480
|
}
|
|
477
481
|
};
|
|
@@ -497,8 +501,8 @@ class Virtualizer {
|
|
|
497
501
|
}
|
|
498
502
|
const [toOffset, align] = this.getOffsetForIndex(index, initialAlign);
|
|
499
503
|
this._scrollToOffset(toOffset, { adjustments: void 0, behavior });
|
|
500
|
-
if (behavior !== "smooth" && this.isDynamicMode()) {
|
|
501
|
-
this.scrollToIndexTimeoutId = setTimeout(() => {
|
|
504
|
+
if (behavior !== "smooth" && this.isDynamicMode() && this.targetWindow) {
|
|
505
|
+
this.scrollToIndexTimeoutId = this.targetWindow.setTimeout(() => {
|
|
502
506
|
this.scrollToIndexTimeoutId = null;
|
|
503
507
|
const elementInDOM = this.measureElementCache.has(
|
|
504
508
|
this.options.getItemKey(index)
|
|
@@ -546,17 +550,18 @@ class Virtualizer {
|
|
|
546
550
|
this.options.scrollToFn(offset, { behavior, adjustments }, this);
|
|
547
551
|
};
|
|
548
552
|
this.measure = () => {
|
|
553
|
+
var _a, _b;
|
|
549
554
|
this.itemSizeCache = /* @__PURE__ */ new Map();
|
|
550
|
-
this.
|
|
555
|
+
(_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, false);
|
|
551
556
|
};
|
|
552
557
|
this.setOptions(opts);
|
|
553
558
|
this.scrollRect = this.options.initialRect;
|
|
554
|
-
this.scrollOffset = this.options.initialOffset;
|
|
559
|
+
this.scrollOffset = typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset;
|
|
555
560
|
this.measurementsCache = this.options.initialMeasurementsCache;
|
|
556
561
|
this.measurementsCache.forEach((item) => {
|
|
557
562
|
this.itemSizeCache.set(item.key, item.size);
|
|
558
563
|
});
|
|
559
|
-
this.
|
|
564
|
+
this.notify(false, false);
|
|
560
565
|
}
|
|
561
566
|
}
|
|
562
567
|
const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
|
|
@@ -592,4 +597,4 @@ function calculateRange({
|
|
|
592
597
|
return { startIndex, endIndex };
|
|
593
598
|
}
|
|
594
599
|
|
|
595
|
-
export { Virtualizer, approxEqual, defaultKeyExtractor, defaultRangeExtractor, elementScroll, measureElement, memo, notUndefined, observeElementOffset, observeElementRect };
|
|
600
|
+
export { Virtualizer, approxEqual, debounce, defaultKeyExtractor, defaultRangeExtractor, elementScroll, measureElement, memo, notUndefined, observeElementOffset, observeElementRect };
|
|
@@ -52,5 +52,12 @@ function notUndefined(value, msg) {
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
const approxEqual = (a, b) => Math.abs(a - b) < 1;
|
|
55
|
+
const debounce = (targetWindow, fn, ms) => {
|
|
56
|
+
let timeoutId;
|
|
57
|
+
return function(...args) {
|
|
58
|
+
targetWindow.clearTimeout(timeoutId);
|
|
59
|
+
timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
|
|
60
|
+
};
|
|
61
|
+
};
|
|
55
62
|
|
|
56
|
-
export { approxEqual, memo, notUndefined };
|
|
63
|
+
export { approxEqual, debounce, memo, notUndefined };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAS5C,MAAM,MAAM,QAAQ,GAAG;IACrB,qFAAqF;IACrF,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,CAAC;AAErD,eAAO,MAAM,GAAG;IAJd,qFAAqF;WAC9E,MAAM;wGA4Bb,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/TabContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ5C,MAAM,MAAM,eAAe,GAAG;IAC5B,0FAA0F;IAC1F,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAElD,eAAO,MAAM,UAAU;IAJrB,0FAA0F;WACnF,MAAM;
|
|
1
|
+
{"version":3,"file":"TabContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/TabContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ5C,MAAM,MAAM,eAAe,GAAG;IAC5B,0FAA0F;IAC1F,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAElD,eAAO,MAAM,UAAU;IAJrB,0FAA0F;WACnF,MAAM;kGA4Bd,CAAC"}
|
|
@@ -31,6 +31,7 @@ export type TabsContextProps = {
|
|
|
31
31
|
value?: string;
|
|
32
32
|
defaultValue?: string;
|
|
33
33
|
onChange?: (value: string) => void;
|
|
34
|
+
size?: TabsProps['size'];
|
|
34
35
|
};
|
|
35
36
|
export declare const TabsContext: import("react").Context<TabsContextProps>;
|
|
36
37
|
export declare const Tabs: import("react").ForwardRefExoticComponent<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,SAAS,GAAG;IACtB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;AAE/D;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,SAAS,GAAG;IACtB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;AAE/D;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,WAAW,2CAAsC,CAAC;AAE/D,eAAO,MAAM,IAAI;IArCf,6CAA6C;;IAE7C,qBAAqB;;IAErB,+CAA+C;wBAC5B,MAAM,KAAK,IAAI;IAClC;;;OAGG;;+GAyEJ,CAAC"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import type { HTMLAttributes } from 'react';
|
|
2
|
+
import type { TabsContextProps } from './Tabs';
|
|
2
3
|
import type { TabProps } from '.';
|
|
3
|
-
type UseTab = (props: TabProps) => Pick<HTMLAttributes<HTMLButtonElement>, 'id' | 'aria-selected' | 'role' | 'onClick'
|
|
4
|
+
type UseTab = (props: TabProps) => Pick<HTMLAttributes<HTMLButtonElement>, 'id' | 'aria-selected' | 'role' | 'onClick'> & {
|
|
5
|
+
size?: TabsContextProps['size'];
|
|
6
|
+
};
|
|
4
7
|
/** Handles props for `Tab` in context with `Tabs` */
|
|
5
8
|
export declare const useTabItem: UseTab;
|
|
6
9
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTab.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/useTab.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useTab.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/useTab.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAG/C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAElC,KAAK,MAAM,GAAG,CACZ,KAAK,EAAE,QAAQ,KACZ,IAAI,CACP,cAAc,CAAC,iBAAiB,CAAC,EACjC,IAAI,GAAG,eAAe,GAAG,MAAM,GAAG,SAAS,CAC5C,GAAG;IAAE,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;CAAE,CAAC;AAExC,qDAAqD;AACrD,eAAO,MAAM,UAAU,EAAE,MAexB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/Combobox/internal/ComboboxInput.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/Combobox/internal/ComboboxInput.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAKjD,KAAK,kBAAkB,GAAG;IACxB,eAAe,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,SAAS,EAAE,WAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;IACnD,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACrD,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAE9D,eAAO,MAAM,aAAa;4EAOvB,kBAAkB;;CAkIpB,CAAC;AAIF,eAAe,aAAa,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCombobox.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Combobox/useCombobox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGpD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAIF,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,GACf,KAAK,IAAI,YAAY,CAAC,mBAAmB,CAAC,CAE5C;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,GACf,KAAK,IAAI,YAAY,CAAC,mBAAmB,CAAC,CAE5C;AAED,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,SAAS,GACf,KAAK,IAAI,YAAY,CAAC,mBAAmB,CAAC,CAE5C;AAID;;;;GAIG;AACH,eAAO,MAAM,MAAM,WAAY,MAAM,KAAG,MAEvC,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,MAE5C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,MAEC,EACD,YAAY,GACb,EAAE,gBAAgB;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useCombobox.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Combobox/useCombobox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGpD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAIF,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,GACf,KAAK,IAAI,YAAY,CAAC,mBAAmB,CAAC,CAE5C;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,GACf,KAAK,IAAI,YAAY,CAAC,mBAAmB,CAAC,CAE5C;AAED,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,SAAS,GACf,KAAK,IAAI,YAAY,CAAC,mBAAmB,CAAC,CAE5C;AAID;;;;GAIG;AACH,eAAO,MAAM,MAAM,WAAY,MAAM,KAAG,MAEvC,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,MAE5C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,MAEC,EACD,YAAY,GACb,EAAE,gBAAgB;;;;;;;;;;;;;;;EAyIlB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digdir/designsystemet-react",
|
|
3
|
-
"version": "1.0.0-rc.
|
|
3
|
+
"version": "1.0.0-rc.9",
|
|
4
4
|
"description": "React components for Designsystemet",
|
|
5
5
|
"author": "Designsystemet team",
|
|
6
6
|
"repository": "https://github.com/digdir/designsystemet",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"@floating-ui/react": "0.26.12",
|
|
31
31
|
"@navikt/aksel-icons": "^5.12.2",
|
|
32
32
|
"@radix-ui/react-slot": "^1.0.2",
|
|
33
|
-
"@tanstack/react-virtual": "^3.
|
|
33
|
+
"@tanstack/react-virtual": "^3.5.1"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"copyfiles": "^2.4.1",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"rollup": "^4.12.1",
|
|
40
40
|
"typescript": "^5.4.2"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "be57fec5efe257a06e072ad68713670c9511a119"
|
|
43
43
|
}
|