@digdir/designsystemet-react 0.59.0 → 0.59.1-alpha.0
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/DropdownMenu/DropdownMenuContent.js +4 -4
- package/dist/cjs/components/DropdownMenu/DropdownMenuTrigger.js +1 -1
- package/dist/cjs/components/Modal/ModalDialog.js +1 -1
- package/dist/cjs/components/Popover/PopoverContent.js +6 -6
- package/dist/cjs/components/Popover/PopoverTrigger.js +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.js +6 -6
- package/dist/cjs/components/form/Checkbox/Checkbox.js +1 -1
- package/dist/cjs/components/form/Combobox/Combobox.js +60 -177
- package/dist/cjs/components/form/Combobox/ComboboxContext.js +8 -0
- package/dist/cjs/components/form/Combobox/ComboboxIdContext.js +42 -0
- package/dist/cjs/components/form/Combobox/Custom/Custom.js +14 -9
- package/dist/cjs/components/form/Combobox/Empty/Empty.js +4 -4
- package/dist/cjs/components/form/Combobox/Option/Option.js +15 -33
- package/dist/cjs/components/form/Combobox/Option/useComboboxOption.js +47 -0
- package/dist/cjs/components/form/Combobox/internal/ComboboxChips.js +14 -6
- package/dist/cjs/components/form/Combobox/internal/ComboboxClearButton.js +4 -4
- package/dist/cjs/components/form/Combobox/internal/ComboboxInput.js +40 -35
- package/dist/cjs/components/form/Combobox/internal/ComboboxNative.js +2 -2
- package/dist/cjs/components/form/Combobox/useCombobox.js +46 -32
- package/dist/cjs/components/form/Combobox/useComboboxKeyboard.js +79 -0
- package/dist/cjs/components/form/Combobox/useFloatingCombobox.js +78 -0
- package/dist/cjs/components/form/Search/Search.js +1 -1
- package/dist/cjs/node_modules/@floating-ui/utils/{dom/dist → dist}/floating-ui.utils.dom.js +7 -4
- package/dist/cjs/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +5 -0
- package/dist/cjs/{node_modules → packages/react/node_modules}/@floating-ui/core/dist/floating-ui.core.js +40 -16
- package/dist/cjs/{node_modules → packages/react/node_modules}/@floating-ui/dom/dist/floating-ui.dom.js +83 -31
- package/dist/cjs/{node_modules → packages/react/node_modules}/@floating-ui/react/dist/floating-ui.react.js +307 -157
- package/dist/cjs/{node_modules/@floating-ui/react/utils → packages/react/node_modules/@floating-ui/react}/dist/floating-ui.react.utils.js +9 -4
- package/dist/cjs/{node_modules → packages/react/node_modules}/@floating-ui/react-dom/dist/floating-ui.react-dom.js +22 -18
- package/dist/{esm → cjs/packages/react}/node_modules/tabbable/dist/index.esm.js +59 -13
- package/dist/cjs/utilities/RovingTabIndex/RovingTabindexItem.js +1 -1
- package/dist/cjs/utilities/RovingTabIndex/RovingTabindexRoot.js +1 -1
- package/dist/esm/components/DropdownMenu/DropdownMenuContent.js +3 -3
- package/dist/esm/components/DropdownMenu/DropdownMenuTrigger.js +1 -1
- package/dist/esm/components/Modal/ModalDialog.js +1 -1
- package/dist/esm/components/Popover/PopoverContent.js +4 -4
- package/dist/esm/components/Popover/PopoverTrigger.js +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +4 -4
- package/dist/esm/components/form/Checkbox/Checkbox.js +1 -1
- package/dist/esm/components/form/Combobox/Combobox.js +65 -182
- package/dist/esm/components/form/Combobox/ComboboxContext.js +6 -0
- package/dist/esm/components/form/Combobox/ComboboxIdContext.js +35 -0
- package/dist/esm/components/form/Combobox/Custom/Custom.js +13 -8
- package/dist/esm/components/form/Combobox/Empty/Empty.js +3 -3
- package/dist/esm/components/form/Combobox/Option/Option.js +15 -33
- package/dist/esm/components/form/Combobox/Option/useComboboxOption.js +45 -0
- package/dist/esm/components/form/Combobox/internal/ComboboxChips.js +13 -5
- package/dist/esm/components/form/Combobox/internal/ComboboxClearButton.js +3 -3
- package/dist/esm/components/form/Combobox/internal/ComboboxInput.js +39 -34
- package/dist/esm/components/form/Combobox/internal/ComboboxNative.js +2 -2
- package/dist/esm/components/form/Combobox/useCombobox.js +46 -32
- package/dist/esm/components/form/Combobox/useComboboxKeyboard.js +77 -0
- package/dist/esm/components/form/Combobox/useFloatingCombobox.js +76 -0
- package/dist/esm/components/form/Search/Search.js +1 -1
- package/dist/esm/node_modules/@floating-ui/utils/{dom/dist → dist}/floating-ui.utils.dom.js +7 -4
- package/dist/esm/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +5 -0
- package/dist/esm/{node_modules → packages/react/node_modules}/@floating-ui/core/dist/floating-ui.core.js +40 -16
- package/dist/esm/{node_modules → packages/react/node_modules}/@floating-ui/dom/dist/floating-ui.dom.js +82 -30
- package/dist/esm/{node_modules → packages/react/node_modules}/@floating-ui/react/dist/floating-ui.react.js +282 -135
- package/dist/esm/{node_modules/@floating-ui/react/utils → packages/react/node_modules/@floating-ui/react}/dist/floating-ui.react.utils.js +9 -5
- package/dist/esm/{node_modules → packages/react/node_modules}/@floating-ui/react-dom/dist/floating-ui.react-dom.js +19 -14
- package/dist/{cjs → esm/packages/react}/node_modules/tabbable/dist/index.esm.js +55 -15
- package/dist/esm/utilities/RovingTabIndex/RovingTabindexItem.js +1 -1
- package/dist/esm/utilities/RovingTabIndex/RovingTabindexRoot.js +1 -1
- package/dist/types/components/form/Combobox/Combobox.d.ts +104 -39
- package/dist/types/components/form/Combobox/Combobox.d.ts.map +1 -1
- package/dist/types/components/form/Combobox/ComboboxContext.d.ts +48 -0
- package/dist/types/components/form/Combobox/ComboboxContext.d.ts.map +1 -0
- package/dist/types/components/form/Combobox/ComboboxIdContext.d.ts +19 -0
- package/dist/types/components/form/Combobox/ComboboxIdContext.d.ts.map +1 -0
- package/dist/types/components/form/Combobox/Custom/Custom.d.ts.map +1 -1
- package/dist/types/components/form/Combobox/Option/Option.d.ts +2 -2
- package/dist/types/components/form/Combobox/Option/Option.d.ts.map +1 -1
- package/dist/types/components/form/Combobox/Option/useComboboxOption.d.ts +14 -0
- package/dist/types/components/form/Combobox/Option/useComboboxOption.d.ts.map +1 -0
- package/dist/types/components/form/Combobox/internal/ComboboxChips.d.ts.map +1 -1
- package/dist/types/components/form/Combobox/internal/ComboboxInput.d.ts +0 -1
- package/dist/types/components/form/Combobox/internal/ComboboxInput.d.ts.map +1 -1
- package/dist/types/components/form/Combobox/internal/ComboboxNative.d.ts +3 -1
- package/dist/types/components/form/Combobox/internal/ComboboxNative.d.ts.map +1 -1
- package/dist/types/components/form/Combobox/useCombobox.d.ts +13 -5
- package/dist/types/components/form/Combobox/useCombobox.d.ts.map +1 -1
- package/dist/types/components/form/Combobox/useComboboxKeyboard.d.ts +20 -0
- package/dist/types/components/form/Combobox/useComboboxKeyboard.d.ts.map +1 -0
- package/dist/types/components/form/Combobox/useFloatingCombobox.d.ts +41 -0
- package/dist/types/components/form/Combobox/useFloatingCombobox.d.ts.map +1 -0
- package/package.json +3 -3
- package/dist/cjs/node_modules/@floating-ui/react/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +0 -6
- package/dist/cjs/node_modules/@floating-ui/react/node_modules/@floating-ui/utils/dom/dist/floating-ui.utils.dom.js +0 -68
- package/dist/esm/node_modules/@floating-ui/react/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +0 -4
- package/dist/esm/node_modules/@floating-ui/react/node_modules/@floating-ui/utils/dom/dist/floating-ui.utils.dom.js +0 -57
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { computePosition as computePosition$1 } from '../../core/dist/floating-ui.core.js';
|
|
3
|
-
export {
|
|
4
|
-
import { createCoords, rectToClientRect, round, max, min, floor } from '
|
|
5
|
-
import { getOverflowAncestors, isElement, getWindow, getComputedStyle, getDocumentElement, isHTMLElement, isWebKit, getNodeName, isOverflowElement, getNodeScroll, isTableElement, isContainingBlock, getContainingBlock, getParentNode, isLastTraversableNode } from '
|
|
2
|
+
import { shift as shift$1, flip as flip$1, arrow as arrow$1, size as size$1, computePosition as computePosition$1 } from '../../core/dist/floating-ui.core.js';
|
|
3
|
+
export { detectOverflow, offset } from '../../core/dist/floating-ui.core.js';
|
|
4
|
+
import { createCoords, rectToClientRect, round, max, min, floor } from '../../../../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.js';
|
|
5
|
+
import { getOverflowAncestors, isElement, getWindow, getComputedStyle, getDocumentElement, isHTMLElement, isWebKit, getNodeName, isOverflowElement, getNodeScroll, isTableElement, isContainingBlock, getContainingBlock, getParentNode, isLastTraversableNode } from '../../../../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js';
|
|
6
6
|
|
|
7
7
|
function getCssDimensions(element) {
|
|
8
8
|
const css = getComputedStyle(element);
|
|
@@ -105,8 +105,9 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
105
105
|
if (domElement) {
|
|
106
106
|
const win = getWindow(domElement);
|
|
107
107
|
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
108
|
-
let
|
|
109
|
-
|
|
108
|
+
let currentWin = win;
|
|
109
|
+
let currentIFrame = currentWin.frameElement;
|
|
110
|
+
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
|
|
110
111
|
const iframeScale = getScale(currentIFrame);
|
|
111
112
|
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
112
113
|
const css = getComputedStyle(currentIFrame);
|
|
@@ -118,7 +119,8 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
118
119
|
height *= iframeScale.y;
|
|
119
120
|
x += left;
|
|
120
121
|
y += top;
|
|
121
|
-
|
|
122
|
+
currentWin = getWindow(currentIFrame);
|
|
123
|
+
currentIFrame = currentWin.frameElement;
|
|
122
124
|
}
|
|
123
125
|
}
|
|
124
126
|
return rectToClientRect({
|
|
@@ -129,15 +131,28 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
129
131
|
});
|
|
130
132
|
}
|
|
131
133
|
|
|
134
|
+
const topLayerSelectors = [':popover-open', ':modal'];
|
|
135
|
+
function isTopLayer(floating) {
|
|
136
|
+
return topLayerSelectors.some(selector => {
|
|
137
|
+
try {
|
|
138
|
+
return floating.matches(selector);
|
|
139
|
+
} catch (e) {
|
|
140
|
+
return false;
|
|
141
|
+
}
|
|
142
|
+
});
|
|
143
|
+
}
|
|
144
|
+
|
|
132
145
|
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
133
146
|
let {
|
|
147
|
+
elements,
|
|
134
148
|
rect,
|
|
135
149
|
offsetParent,
|
|
136
150
|
strategy
|
|
137
151
|
} = _ref;
|
|
138
|
-
const
|
|
152
|
+
const isFixed = strategy === 'fixed';
|
|
139
153
|
const documentElement = getDocumentElement(offsetParent);
|
|
140
|
-
|
|
154
|
+
const topLayer = elements ? isTopLayer(elements.floating) : false;
|
|
155
|
+
if (offsetParent === documentElement || topLayer && isFixed) {
|
|
141
156
|
return rect;
|
|
142
157
|
}
|
|
143
158
|
let scroll = {
|
|
@@ -146,7 +161,8 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
|
146
161
|
};
|
|
147
162
|
let scale = createCoords(1);
|
|
148
163
|
const offsets = createCoords(0);
|
|
149
|
-
|
|
164
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
165
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
150
166
|
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
151
167
|
scroll = getNodeScroll(offsetParent);
|
|
152
168
|
}
|
|
@@ -272,7 +288,7 @@ function getClippingElementAncestors(element, cache) {
|
|
|
272
288
|
if (cachedResult) {
|
|
273
289
|
return cachedResult;
|
|
274
290
|
}
|
|
275
|
-
let result = getOverflowAncestors(element).filter(el => isElement(el) && getNodeName(el) !== 'body');
|
|
291
|
+
let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
|
|
276
292
|
let currentContainingBlockComputedStyle = null;
|
|
277
293
|
const elementIsFixed = getComputedStyle(element).position === 'fixed';
|
|
278
294
|
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
@@ -327,7 +343,14 @@ function getClippingRect(_ref) {
|
|
|
327
343
|
}
|
|
328
344
|
|
|
329
345
|
function getDimensions(element) {
|
|
330
|
-
|
|
346
|
+
const {
|
|
347
|
+
width,
|
|
348
|
+
height
|
|
349
|
+
} = getCssDimensions(element);
|
|
350
|
+
return {
|
|
351
|
+
width,
|
|
352
|
+
height
|
|
353
|
+
};
|
|
331
354
|
}
|
|
332
355
|
|
|
333
356
|
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
@@ -352,9 +375,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
352
375
|
offsets.x = getWindowScrollBarX(documentElement);
|
|
353
376
|
}
|
|
354
377
|
}
|
|
378
|
+
const x = rect.left + scroll.scrollLeft - offsets.x;
|
|
379
|
+
const y = rect.top + scroll.scrollTop - offsets.y;
|
|
355
380
|
return {
|
|
356
|
-
x
|
|
357
|
-
y
|
|
381
|
+
x,
|
|
382
|
+
y,
|
|
358
383
|
width: rect.width,
|
|
359
384
|
height: rect.height
|
|
360
385
|
};
|
|
@@ -374,7 +399,7 @@ function getTrueOffsetParent(element, polyfill) {
|
|
|
374
399
|
// such as table ancestors and cross browser bugs.
|
|
375
400
|
function getOffsetParent(element, polyfill) {
|
|
376
401
|
const window = getWindow(element);
|
|
377
|
-
if (!isHTMLElement(element)) {
|
|
402
|
+
if (!isHTMLElement(element) || isTopLayer(element)) {
|
|
378
403
|
return window;
|
|
379
404
|
}
|
|
380
405
|
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
@@ -387,20 +412,15 @@ function getOffsetParent(element, polyfill) {
|
|
|
387
412
|
return offsetParent || getContainingBlock(element) || window;
|
|
388
413
|
}
|
|
389
414
|
|
|
390
|
-
const getElementRects = async function (
|
|
391
|
-
let {
|
|
392
|
-
reference,
|
|
393
|
-
floating,
|
|
394
|
-
strategy
|
|
395
|
-
} = _ref;
|
|
415
|
+
const getElementRects = async function (data) {
|
|
396
416
|
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
397
417
|
const getDimensionsFn = this.getDimensions;
|
|
398
418
|
return {
|
|
399
|
-
reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
|
|
419
|
+
reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
|
|
400
420
|
floating: {
|
|
401
421
|
x: 0,
|
|
402
422
|
y: 0,
|
|
403
|
-
...(await getDimensionsFn(floating))
|
|
423
|
+
...(await getDimensionsFn(data.floating))
|
|
404
424
|
}
|
|
405
425
|
};
|
|
406
426
|
};
|
|
@@ -428,8 +448,9 @@ function observeMove(element, onMove) {
|
|
|
428
448
|
let timeoutId;
|
|
429
449
|
const root = getDocumentElement(element);
|
|
430
450
|
function cleanup() {
|
|
451
|
+
var _io;
|
|
431
452
|
clearTimeout(timeoutId);
|
|
432
|
-
io
|
|
453
|
+
(_io = io) == null || _io.disconnect();
|
|
433
454
|
io = null;
|
|
434
455
|
}
|
|
435
456
|
function refresh(skip, threshold) {
|
|
@@ -535,7 +556,8 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
535
556
|
resizeObserver.unobserve(floating);
|
|
536
557
|
cancelAnimationFrame(reobserveFrame);
|
|
537
558
|
reobserveFrame = requestAnimationFrame(() => {
|
|
538
|
-
|
|
559
|
+
var _resizeObserver;
|
|
560
|
+
(_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
|
|
539
561
|
});
|
|
540
562
|
}
|
|
541
563
|
update();
|
|
@@ -560,12 +582,13 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
560
582
|
}
|
|
561
583
|
update();
|
|
562
584
|
return () => {
|
|
585
|
+
var _resizeObserver2;
|
|
563
586
|
ancestors.forEach(ancestor => {
|
|
564
587
|
ancestorScroll && ancestor.removeEventListener('scroll', update);
|
|
565
588
|
ancestorResize && ancestor.removeEventListener('resize', update);
|
|
566
589
|
});
|
|
567
|
-
cleanupIo
|
|
568
|
-
resizeObserver
|
|
590
|
+
cleanupIo == null || cleanupIo();
|
|
591
|
+
(_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
|
|
569
592
|
resizeObserver = null;
|
|
570
593
|
if (animationFrame) {
|
|
571
594
|
cancelAnimationFrame(frameId);
|
|
@@ -573,10 +596,39 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
573
596
|
};
|
|
574
597
|
}
|
|
575
598
|
|
|
599
|
+
/**
|
|
600
|
+
* Optimizes the visibility of the floating element by shifting it in order to
|
|
601
|
+
* keep it in view when it will overflow the clipping boundary.
|
|
602
|
+
* @see https://floating-ui.com/docs/shift
|
|
603
|
+
*/
|
|
604
|
+
const shift = shift$1;
|
|
605
|
+
|
|
606
|
+
/**
|
|
607
|
+
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
608
|
+
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
609
|
+
* clipping boundary. Alternative to `autoPlacement`.
|
|
610
|
+
* @see https://floating-ui.com/docs/flip
|
|
611
|
+
*/
|
|
612
|
+
const flip = flip$1;
|
|
613
|
+
|
|
614
|
+
/**
|
|
615
|
+
* Provides data that allows you to change the size of the floating element —
|
|
616
|
+
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
617
|
+
* width of the reference element.
|
|
618
|
+
* @see https://floating-ui.com/docs/size
|
|
619
|
+
*/
|
|
620
|
+
const size = size$1;
|
|
621
|
+
|
|
622
|
+
/**
|
|
623
|
+
* Provides data to position an inner element of the floating element so that it
|
|
624
|
+
* appears centered to the reference element.
|
|
625
|
+
* @see https://floating-ui.com/docs/arrow
|
|
626
|
+
*/
|
|
627
|
+
const arrow = arrow$1;
|
|
628
|
+
|
|
576
629
|
/**
|
|
577
630
|
* Computes the `x` and `y` coordinates that will place the floating element
|
|
578
|
-
* next to a reference element
|
|
579
|
-
* strategy.
|
|
631
|
+
* next to a given reference element.
|
|
580
632
|
*/
|
|
581
633
|
const computePosition = (reference, floating, options) => {
|
|
582
634
|
// This caches the expensive `getClippingElementAncestors` function so that
|
|
@@ -597,4 +649,4 @@ const computePosition = (reference, floating, options) => {
|
|
|
597
649
|
});
|
|
598
650
|
};
|
|
599
651
|
|
|
600
|
-
export { autoUpdate, computePosition, getOverflowAncestors, platform };
|
|
652
|
+
export { arrow, autoUpdate, computePosition, flip, getOverflowAncestors, platform, shift, size };
|