@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.
Files changed (91) hide show
  1. package/dist/cjs/components/DropdownMenu/DropdownMenuContent.js +4 -4
  2. package/dist/cjs/components/DropdownMenu/DropdownMenuTrigger.js +1 -1
  3. package/dist/cjs/components/Modal/ModalDialog.js +1 -1
  4. package/dist/cjs/components/Popover/PopoverContent.js +6 -6
  5. package/dist/cjs/components/Popover/PopoverTrigger.js +1 -1
  6. package/dist/cjs/components/Tooltip/Tooltip.js +6 -6
  7. package/dist/cjs/components/form/Checkbox/Checkbox.js +1 -1
  8. package/dist/cjs/components/form/Combobox/Combobox.js +60 -177
  9. package/dist/cjs/components/form/Combobox/ComboboxContext.js +8 -0
  10. package/dist/cjs/components/form/Combobox/ComboboxIdContext.js +42 -0
  11. package/dist/cjs/components/form/Combobox/Custom/Custom.js +14 -9
  12. package/dist/cjs/components/form/Combobox/Empty/Empty.js +4 -4
  13. package/dist/cjs/components/form/Combobox/Option/Option.js +15 -33
  14. package/dist/cjs/components/form/Combobox/Option/useComboboxOption.js +47 -0
  15. package/dist/cjs/components/form/Combobox/internal/ComboboxChips.js +14 -6
  16. package/dist/cjs/components/form/Combobox/internal/ComboboxClearButton.js +4 -4
  17. package/dist/cjs/components/form/Combobox/internal/ComboboxInput.js +40 -35
  18. package/dist/cjs/components/form/Combobox/internal/ComboboxNative.js +2 -2
  19. package/dist/cjs/components/form/Combobox/useCombobox.js +46 -32
  20. package/dist/cjs/components/form/Combobox/useComboboxKeyboard.js +79 -0
  21. package/dist/cjs/components/form/Combobox/useFloatingCombobox.js +78 -0
  22. package/dist/cjs/components/form/Search/Search.js +1 -1
  23. package/dist/cjs/node_modules/@floating-ui/utils/{dom/dist → dist}/floating-ui.utils.dom.js +7 -4
  24. package/dist/cjs/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +5 -0
  25. package/dist/cjs/{node_modules → packages/react/node_modules}/@floating-ui/core/dist/floating-ui.core.js +40 -16
  26. package/dist/cjs/{node_modules → packages/react/node_modules}/@floating-ui/dom/dist/floating-ui.dom.js +83 -31
  27. package/dist/cjs/{node_modules → packages/react/node_modules}/@floating-ui/react/dist/floating-ui.react.js +307 -157
  28. package/dist/cjs/{node_modules/@floating-ui/react/utils → packages/react/node_modules/@floating-ui/react}/dist/floating-ui.react.utils.js +9 -4
  29. package/dist/cjs/{node_modules → packages/react/node_modules}/@floating-ui/react-dom/dist/floating-ui.react-dom.js +22 -18
  30. package/dist/{esm → cjs/packages/react}/node_modules/tabbable/dist/index.esm.js +59 -13
  31. package/dist/cjs/utilities/RovingTabIndex/RovingTabindexItem.js +1 -1
  32. package/dist/cjs/utilities/RovingTabIndex/RovingTabindexRoot.js +1 -1
  33. package/dist/esm/components/DropdownMenu/DropdownMenuContent.js +3 -3
  34. package/dist/esm/components/DropdownMenu/DropdownMenuTrigger.js +1 -1
  35. package/dist/esm/components/Modal/ModalDialog.js +1 -1
  36. package/dist/esm/components/Popover/PopoverContent.js +4 -4
  37. package/dist/esm/components/Popover/PopoverTrigger.js +1 -1
  38. package/dist/esm/components/Tooltip/Tooltip.js +4 -4
  39. package/dist/esm/components/form/Checkbox/Checkbox.js +1 -1
  40. package/dist/esm/components/form/Combobox/Combobox.js +65 -182
  41. package/dist/esm/components/form/Combobox/ComboboxContext.js +6 -0
  42. package/dist/esm/components/form/Combobox/ComboboxIdContext.js +35 -0
  43. package/dist/esm/components/form/Combobox/Custom/Custom.js +13 -8
  44. package/dist/esm/components/form/Combobox/Empty/Empty.js +3 -3
  45. package/dist/esm/components/form/Combobox/Option/Option.js +15 -33
  46. package/dist/esm/components/form/Combobox/Option/useComboboxOption.js +45 -0
  47. package/dist/esm/components/form/Combobox/internal/ComboboxChips.js +13 -5
  48. package/dist/esm/components/form/Combobox/internal/ComboboxClearButton.js +3 -3
  49. package/dist/esm/components/form/Combobox/internal/ComboboxInput.js +39 -34
  50. package/dist/esm/components/form/Combobox/internal/ComboboxNative.js +2 -2
  51. package/dist/esm/components/form/Combobox/useCombobox.js +46 -32
  52. package/dist/esm/components/form/Combobox/useComboboxKeyboard.js +77 -0
  53. package/dist/esm/components/form/Combobox/useFloatingCombobox.js +76 -0
  54. package/dist/esm/components/form/Search/Search.js +1 -1
  55. package/dist/esm/node_modules/@floating-ui/utils/{dom/dist → dist}/floating-ui.utils.dom.js +7 -4
  56. package/dist/esm/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +5 -0
  57. package/dist/esm/{node_modules → packages/react/node_modules}/@floating-ui/core/dist/floating-ui.core.js +40 -16
  58. package/dist/esm/{node_modules → packages/react/node_modules}/@floating-ui/dom/dist/floating-ui.dom.js +82 -30
  59. package/dist/esm/{node_modules → packages/react/node_modules}/@floating-ui/react/dist/floating-ui.react.js +282 -135
  60. package/dist/esm/{node_modules/@floating-ui/react/utils → packages/react/node_modules/@floating-ui/react}/dist/floating-ui.react.utils.js +9 -5
  61. package/dist/esm/{node_modules → packages/react/node_modules}/@floating-ui/react-dom/dist/floating-ui.react-dom.js +19 -14
  62. package/dist/{cjs → esm/packages/react}/node_modules/tabbable/dist/index.esm.js +55 -15
  63. package/dist/esm/utilities/RovingTabIndex/RovingTabindexItem.js +1 -1
  64. package/dist/esm/utilities/RovingTabIndex/RovingTabindexRoot.js +1 -1
  65. package/dist/types/components/form/Combobox/Combobox.d.ts +104 -39
  66. package/dist/types/components/form/Combobox/Combobox.d.ts.map +1 -1
  67. package/dist/types/components/form/Combobox/ComboboxContext.d.ts +48 -0
  68. package/dist/types/components/form/Combobox/ComboboxContext.d.ts.map +1 -0
  69. package/dist/types/components/form/Combobox/ComboboxIdContext.d.ts +19 -0
  70. package/dist/types/components/form/Combobox/ComboboxIdContext.d.ts.map +1 -0
  71. package/dist/types/components/form/Combobox/Custom/Custom.d.ts.map +1 -1
  72. package/dist/types/components/form/Combobox/Option/Option.d.ts +2 -2
  73. package/dist/types/components/form/Combobox/Option/Option.d.ts.map +1 -1
  74. package/dist/types/components/form/Combobox/Option/useComboboxOption.d.ts +14 -0
  75. package/dist/types/components/form/Combobox/Option/useComboboxOption.d.ts.map +1 -0
  76. package/dist/types/components/form/Combobox/internal/ComboboxChips.d.ts.map +1 -1
  77. package/dist/types/components/form/Combobox/internal/ComboboxInput.d.ts +0 -1
  78. package/dist/types/components/form/Combobox/internal/ComboboxInput.d.ts.map +1 -1
  79. package/dist/types/components/form/Combobox/internal/ComboboxNative.d.ts +3 -1
  80. package/dist/types/components/form/Combobox/internal/ComboboxNative.d.ts.map +1 -1
  81. package/dist/types/components/form/Combobox/useCombobox.d.ts +13 -5
  82. package/dist/types/components/form/Combobox/useCombobox.d.ts.map +1 -1
  83. package/dist/types/components/form/Combobox/useComboboxKeyboard.d.ts +20 -0
  84. package/dist/types/components/form/Combobox/useComboboxKeyboard.d.ts.map +1 -0
  85. package/dist/types/components/form/Combobox/useFloatingCombobox.d.ts +41 -0
  86. package/dist/types/components/form/Combobox/useFloatingCombobox.d.ts.map +1 -0
  87. package/package.json +3 -3
  88. package/dist/cjs/node_modules/@floating-ui/react/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +0 -6
  89. package/dist/cjs/node_modules/@floating-ui/react/node_modules/@floating-ui/utils/dom/dist/floating-ui.utils.dom.js +0 -68
  90. package/dist/esm/node_modules/@floating-ui/react/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +0 -4
  91. 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 { arrow, detectOverflow, flip, offset, shift, size } from '../../core/dist/floating-ui.core.js';
4
- import { createCoords, rectToClientRect, round, max, min, floor } from '../../utils/dist/floating-ui.utils.js';
5
- import { getOverflowAncestors, isElement, getWindow, getComputedStyle, getDocumentElement, isHTMLElement, isWebKit, getNodeName, isOverflowElement, getNodeScroll, isTableElement, isContainingBlock, getContainingBlock, getParentNode, isLastTraversableNode } from '../../utils/dom/dist/floating-ui.utils.dom.js';
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 currentIFrame = win.frameElement;
109
- while (currentIFrame && offsetParent && offsetWin !== win) {
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
- currentIFrame = getWindow(currentIFrame).frameElement;
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 isOffsetParentAnElement = isHTMLElement(offsetParent);
152
+ const isFixed = strategy === 'fixed';
139
153
  const documentElement = getDocumentElement(offsetParent);
140
- if (offsetParent === documentElement) {
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
- if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
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
- return getCssDimensions(element);
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: rect.left + scroll.scrollLeft - offsets.x,
357
- y: rect.top + scroll.scrollTop - offsets.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 (_ref) {
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 && io.disconnect();
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
- resizeObserver && resizeObserver.observe(floating);
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 && cleanupIo();
568
- resizeObserver && resizeObserver.disconnect();
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 when it is given a certain CSS positioning
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 };