@digdir/designsystemet-react 0.59.0 → 0.59.1-alpha.1
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/Accordion/Accordion.js +1 -4
- package/dist/cjs/components/Accordion/AccordionContent/AccordionContent.js +1 -2
- package/dist/cjs/components/Accordion/AccordionHeader/AccordionHeader.js +1 -2
- package/dist/cjs/components/Accordion/AccordionItem/AccordionItem.js +1 -4
- package/dist/cjs/components/Button/Button.js +2 -2
- 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/Modal/ModalHeader/ModalHeader.js +1 -1
- package/dist/cjs/components/Modal/ModalHeader/ModalHeader.module.css.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 +72 -199
- package/dist/cjs/components/form/Combobox/Combobox.module.css.js +1 -1
- 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 +13 -10
- package/dist/cjs/components/form/Combobox/internal/ComboboxClearButton.js +5 -8
- package/dist/cjs/components/form/Combobox/internal/ComboboxInput.js +40 -69
- package/dist/cjs/components/form/Combobox/internal/ComboboxNative.js +2 -2
- package/dist/cjs/components/form/Combobox/useCombobox.js +77 -75
- package/dist/cjs/components/form/Combobox/useComboboxKeyboard.js +76 -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/clsx/dist/clsx.js +1 -1
- package/dist/cjs/node_modules/clsx/dist/lite.js +9 -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/react-css-modules.css +2 -136
- package/dist/cjs/utilities/RovingTabIndex/RovingTabindexItem.js +1 -1
- package/dist/cjs/utilities/RovingTabIndex/RovingTabindexRoot.js +1 -1
- package/dist/esm/components/Accordion/Accordion.js +1 -4
- package/dist/esm/components/Accordion/AccordionContent/AccordionContent.js +1 -2
- package/dist/esm/components/Accordion/AccordionHeader/AccordionHeader.js +1 -2
- package/dist/esm/components/Accordion/AccordionItem/AccordionItem.js +1 -4
- package/dist/esm/components/Button/Button.js +2 -2
- 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/Modal/ModalHeader/ModalHeader.js +1 -1
- package/dist/esm/components/Modal/ModalHeader/ModalHeader.module.css.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 +76 -203
- package/dist/esm/components/form/Combobox/Combobox.module.css.js +1 -1
- 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 +12 -9
- package/dist/esm/components/form/Combobox/internal/ComboboxClearButton.js +4 -7
- package/dist/esm/components/form/Combobox/internal/ComboboxInput.js +40 -69
- package/dist/esm/components/form/Combobox/internal/ComboboxNative.js +2 -2
- package/dist/esm/components/form/Combobox/useCombobox.js +77 -75
- package/dist/esm/components/form/Combobox/useComboboxKeyboard.js +74 -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/clsx/dist/clsx.js +1 -1
- package/dist/esm/node_modules/clsx/dist/lite.js +4 -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/react-css-modules.css +2 -136
- package/dist/esm/utilities/RovingTabIndex/RovingTabindexItem.js +1 -1
- package/dist/esm/utilities/RovingTabIndex/RovingTabindexRoot.js +1 -1
- package/dist/types/components/Accordion/Accordion.d.ts.map +1 -1
- package/dist/types/components/Accordion/AccordionContent/AccordionContent.d.ts.map +1 -1
- package/dist/types/components/Accordion/AccordionHeader/AccordionHeader.d.ts.map +1 -1
- package/dist/types/components/Accordion/AccordionItem/AccordionItem.d.ts.map +1 -1
- package/dist/types/components/Modal/ModalHeader/ModalHeader.d.ts.map +1 -1
- package/dist/types/components/form/Combobox/Combobox.d.ts +95 -48
- package/dist/types/components/form/Combobox/Combobox.d.ts.map +1 -1
- package/dist/types/components/form/Combobox/ComboboxContext.d.ts +41 -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/ComboboxClearButton.d.ts.map +1 -1
- package/dist/types/components/form/Combobox/internal/ComboboxInput.d.ts +9 -2
- 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 +14 -9
- package/dist/types/components/form/Combobox/useCombobox.d.ts.map +1 -1
- package/dist/types/components/form/Combobox/useComboboxKeyboard.d.ts +19 -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/components/Accordion/Accordion.module.css.js +0 -6
- 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/components/Accordion/Accordion.module.css.js +0 -4
- 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,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { isShadowRoot, isHTMLElement } from '
|
|
2
|
+
import { isShadowRoot, isHTMLElement } from '../../../../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js';
|
|
3
3
|
|
|
4
4
|
function activeElement(doc) {
|
|
5
5
|
let activeElement = doc.activeElement;
|
|
@@ -13,7 +13,7 @@ function contains(parent, child) {
|
|
|
13
13
|
if (!parent || !child) {
|
|
14
14
|
return false;
|
|
15
15
|
}
|
|
16
|
-
const rootNode = child.getRootNode
|
|
16
|
+
const rootNode = child.getRootNode == null ? void 0 : child.getRootNode();
|
|
17
17
|
|
|
18
18
|
// First, attempt with faster native method
|
|
19
19
|
if (parent.contains(child)) {
|
|
@@ -70,9 +70,10 @@ function isVirtualClick(event) {
|
|
|
70
70
|
return event.detail === 0 && !event.pointerType;
|
|
71
71
|
}
|
|
72
72
|
function isVirtualPointerEvent(event) {
|
|
73
|
-
|
|
73
|
+
if (isJSDOM()) return false;
|
|
74
|
+
return !isAndroid() && event.width === 0 && event.height === 0 || isAndroid() && event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'mouse' ||
|
|
74
75
|
// iOS VoiceOver returns 0.333• for width/height.
|
|
75
|
-
event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0;
|
|
76
|
+
event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'touch';
|
|
76
77
|
}
|
|
77
78
|
function isSafari() {
|
|
78
79
|
// Chrome DevTools does not complain about navigator.vendor
|
|
@@ -85,6 +86,9 @@ function isAndroid() {
|
|
|
85
86
|
function isMac() {
|
|
86
87
|
return getPlatform().toLowerCase().startsWith('mac') && !navigator.maxTouchPoints;
|
|
87
88
|
}
|
|
89
|
+
function isJSDOM() {
|
|
90
|
+
return getUserAgent().includes('jsdom/');
|
|
91
|
+
}
|
|
88
92
|
function isMouseLikePointerType(pointerType, strict) {
|
|
89
93
|
// On some Linux machines with Chromium, mouse inputs return a `pointerType`
|
|
90
94
|
// of "pen": https://github.com/floating-ui/floating-ui/issues/2015
|
|
@@ -137,4 +141,4 @@ function isTypeableCombobox(element) {
|
|
|
137
141
|
return element.getAttribute('role') === 'combobox' && isTypeableElement(element);
|
|
138
142
|
}
|
|
139
143
|
|
|
140
|
-
export { TYPEABLE_SELECTOR, activeElement, contains, getDocument, getPlatform, getTarget, getUserAgent, isAndroid, isEventTargetWithin, isMac, isMouseLikePointerType, isReactEvent, isRootElement, isSafari, isTypeableCombobox, isTypeableElement, isVirtualClick, isVirtualPointerEvent, stopEvent };
|
|
144
|
+
export { TYPEABLE_SELECTOR, activeElement, contains, getDocument, getPlatform, getTarget, getUserAgent, isAndroid, isEventTargetWithin, isJSDOM, isMac, isMouseLikePointerType, isReactEvent, isRootElement, isSafari, isTypeableCombobox, isTypeableElement, isVirtualClick, isVirtualPointerEvent, stopEvent };
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { computePosition } from '../../dom/dist/floating-ui.dom.js';
|
|
3
|
-
export { autoUpdate, platform } from '../../dom/dist/floating-ui.dom.js';
|
|
2
|
+
import { arrow as arrow$1, computePosition } from '../../dom/dist/floating-ui.dom.js';
|
|
3
|
+
export { autoUpdate, flip, platform, shift, size } from '../../dom/dist/floating-ui.dom.js';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { useLayoutEffect, useEffect } from 'react';
|
|
6
6
|
import * as ReactDOM from 'react-dom';
|
|
7
|
-
import { arrow as arrow$1 } from '../../core/dist/floating-ui.core.js';
|
|
8
|
-
export { detectOverflow, flip, offset, shift, size } from '../../core/dist/floating-ui.core.js';
|
|
9
7
|
|
|
10
8
|
/**
|
|
11
9
|
* Provides data to position an inner element of the floating element so that it
|
|
@@ -33,7 +31,8 @@ const arrow = options => {
|
|
|
33
31
|
}).fn(state);
|
|
34
32
|
}
|
|
35
33
|
return {};
|
|
36
|
-
}
|
|
34
|
+
}
|
|
35
|
+
if (element) {
|
|
37
36
|
return arrow$1({
|
|
38
37
|
element,
|
|
39
38
|
padding
|
|
@@ -58,11 +57,13 @@ function deepEqual(a, b) {
|
|
|
58
57
|
if (typeof a === 'function' && a.toString() === b.toString()) {
|
|
59
58
|
return true;
|
|
60
59
|
}
|
|
61
|
-
let length
|
|
62
|
-
|
|
60
|
+
let length;
|
|
61
|
+
let i;
|
|
62
|
+
let keys;
|
|
63
|
+
if (a && b && typeof a === 'object') {
|
|
63
64
|
if (Array.isArray(a)) {
|
|
64
65
|
length = a.length;
|
|
65
|
-
if (length
|
|
66
|
+
if (length !== b.length) return false;
|
|
66
67
|
for (i = length; i-- !== 0;) {
|
|
67
68
|
if (!deepEqual(a[i], b[i])) {
|
|
68
69
|
return false;
|
|
@@ -91,6 +92,8 @@ function deepEqual(a, b) {
|
|
|
91
92
|
}
|
|
92
93
|
return true;
|
|
93
94
|
}
|
|
95
|
+
|
|
96
|
+
// biome-ignore lint/suspicious/noSelfCompare: in source
|
|
94
97
|
return a !== a && b !== b;
|
|
95
98
|
}
|
|
96
99
|
|
|
@@ -151,22 +154,23 @@ function useFloating(options) {
|
|
|
151
154
|
const [_reference, _setReference] = React.useState(null);
|
|
152
155
|
const [_floating, _setFloating] = React.useState(null);
|
|
153
156
|
const setReference = React.useCallback(node => {
|
|
154
|
-
if (node
|
|
157
|
+
if (node !== referenceRef.current) {
|
|
155
158
|
referenceRef.current = node;
|
|
156
159
|
_setReference(node);
|
|
157
160
|
}
|
|
158
|
-
}, [
|
|
161
|
+
}, []);
|
|
159
162
|
const setFloating = React.useCallback(node => {
|
|
160
163
|
if (node !== floatingRef.current) {
|
|
161
164
|
floatingRef.current = node;
|
|
162
165
|
_setFloating(node);
|
|
163
166
|
}
|
|
164
|
-
}, [
|
|
167
|
+
}, []);
|
|
165
168
|
const referenceEl = externalReference || _reference;
|
|
166
169
|
const floatingEl = externalFloating || _floating;
|
|
167
170
|
const referenceRef = React.useRef(null);
|
|
168
171
|
const floatingRef = React.useRef(null);
|
|
169
172
|
const dataRef = React.useRef(data);
|
|
173
|
+
const hasWhileElementsMounted = whileElementsMounted != null;
|
|
170
174
|
const whileElementsMountedRef = useLatestRef(whileElementsMounted);
|
|
171
175
|
const platformRef = useLatestRef(platform);
|
|
172
176
|
const update = React.useCallback(() => {
|
|
@@ -210,17 +214,18 @@ function useFloating(options) {
|
|
|
210
214
|
isMountedRef.current = false;
|
|
211
215
|
};
|
|
212
216
|
}, []);
|
|
217
|
+
|
|
218
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: `hasWhileElementsMounted` is intentionally included.
|
|
213
219
|
index(() => {
|
|
214
220
|
if (referenceEl) referenceRef.current = referenceEl;
|
|
215
221
|
if (floatingEl) floatingRef.current = floatingEl;
|
|
216
222
|
if (referenceEl && floatingEl) {
|
|
217
223
|
if (whileElementsMountedRef.current) {
|
|
218
224
|
return whileElementsMountedRef.current(referenceEl, floatingEl, update);
|
|
219
|
-
} else {
|
|
220
|
-
update();
|
|
221
225
|
}
|
|
226
|
+
update();
|
|
222
227
|
}
|
|
223
|
-
}, [referenceEl, floatingEl, update, whileElementsMountedRef]);
|
|
228
|
+
}, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
|
|
224
229
|
const refs = React.useMemo(() => ({
|
|
225
230
|
reference: referenceRef,
|
|
226
231
|
floating: floatingRef,
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
2
|
/*!
|
|
5
|
-
* tabbable 6.
|
|
3
|
+
* tabbable 6.2.0
|
|
6
4
|
* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
|
|
7
5
|
*/
|
|
8
6
|
// NOTE: separate `:not()` selectors has broader browser support than the newer
|
|
@@ -182,7 +180,27 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
|
|
|
182
180
|
}
|
|
183
181
|
return candidates;
|
|
184
182
|
};
|
|
185
|
-
|
|
183
|
+
|
|
184
|
+
/**
|
|
185
|
+
* @private
|
|
186
|
+
* Determines if the node has an explicitly specified `tabindex` attribute.
|
|
187
|
+
* @param {HTMLElement} node
|
|
188
|
+
* @returns {boolean} True if so; false if not.
|
|
189
|
+
*/
|
|
190
|
+
var hasTabIndex = function hasTabIndex(node) {
|
|
191
|
+
return !isNaN(parseInt(node.getAttribute('tabindex'), 10));
|
|
192
|
+
};
|
|
193
|
+
|
|
194
|
+
/**
|
|
195
|
+
* Determine the tab index of a given node.
|
|
196
|
+
* @param {HTMLElement} node
|
|
197
|
+
* @returns {number} Tab order (negative, 0, or positive number).
|
|
198
|
+
* @throws {Error} If `node` is falsy.
|
|
199
|
+
*/
|
|
200
|
+
var getTabIndex = function getTabIndex(node) {
|
|
201
|
+
if (!node) {
|
|
202
|
+
throw new Error('No node provided');
|
|
203
|
+
}
|
|
186
204
|
if (node.tabIndex < 0) {
|
|
187
205
|
// in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
|
|
188
206
|
// `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
|
|
@@ -191,16 +209,28 @@ var getTabindex = function getTabindex(node, isScope) {
|
|
|
191
209
|
// order, consider their tab index to be 0.
|
|
192
210
|
// Also browsers do not return `tabIndex` correctly for contentEditable nodes;
|
|
193
211
|
// so if they don't have a tabindex attribute specifically set, assume it's 0.
|
|
194
|
-
|
|
195
|
-
// isScope is positive for custom element with shadow root or slot that by default
|
|
196
|
-
// have tabIndex -1, but need to be sorted by document order in order for their
|
|
197
|
-
// content to be inserted in the correct position
|
|
198
|
-
if ((isScope || /^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && isNaN(parseInt(node.getAttribute('tabindex'), 10))) {
|
|
212
|
+
if ((/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && !hasTabIndex(node)) {
|
|
199
213
|
return 0;
|
|
200
214
|
}
|
|
201
215
|
}
|
|
202
216
|
return node.tabIndex;
|
|
203
217
|
};
|
|
218
|
+
|
|
219
|
+
/**
|
|
220
|
+
* Determine the tab index of a given node __for sort order purposes__.
|
|
221
|
+
* @param {HTMLElement} node
|
|
222
|
+
* @param {boolean} [isScope] True for a custom element with shadow root or slot that, by default,
|
|
223
|
+
* has tabIndex -1, but needs to be sorted by document order in order for its content to be
|
|
224
|
+
* inserted into the correct sort position.
|
|
225
|
+
* @returns {number} Tab order (negative, 0, or positive number).
|
|
226
|
+
*/
|
|
227
|
+
var getSortOrderTabIndex = function getSortOrderTabIndex(node, isScope) {
|
|
228
|
+
var tabIndex = getTabIndex(node);
|
|
229
|
+
if (tabIndex < 0 && isScope && !hasTabIndex(node)) {
|
|
230
|
+
return 0;
|
|
231
|
+
}
|
|
232
|
+
return tabIndex;
|
|
233
|
+
};
|
|
204
234
|
var sortOrderedTabbables = function sortOrderedTabbables(a, b) {
|
|
205
235
|
return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
|
|
206
236
|
};
|
|
@@ -443,7 +473,7 @@ var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(o
|
|
|
443
473
|
return true;
|
|
444
474
|
};
|
|
445
475
|
var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
|
|
446
|
-
if (isNonTabbableRadio(node) ||
|
|
476
|
+
if (isNonTabbableRadio(node) || getTabIndex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
|
|
447
477
|
return false;
|
|
448
478
|
}
|
|
449
479
|
return true;
|
|
@@ -468,7 +498,7 @@ var sortByOrder = function sortByOrder(candidates) {
|
|
|
468
498
|
candidates.forEach(function (item, i) {
|
|
469
499
|
var isScope = !!item.scopeParent;
|
|
470
500
|
var element = isScope ? item.scopeParent : item;
|
|
471
|
-
var candidateTabindex =
|
|
501
|
+
var candidateTabindex = getSortOrderTabIndex(element, isScope);
|
|
472
502
|
var elements = isScope ? sortByOrder(item.candidates) : element;
|
|
473
503
|
if (candidateTabindex === 0) {
|
|
474
504
|
isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
|
|
@@ -487,20 +517,30 @@ var sortByOrder = function sortByOrder(candidates) {
|
|
|
487
517
|
return acc;
|
|
488
518
|
}, []).concat(regularTabbables);
|
|
489
519
|
};
|
|
490
|
-
var tabbable = function tabbable(
|
|
520
|
+
var tabbable = function tabbable(container, options) {
|
|
491
521
|
options = options || {};
|
|
492
522
|
var candidates;
|
|
493
523
|
if (options.getShadowRoot) {
|
|
494
|
-
candidates = getCandidatesIteratively([
|
|
524
|
+
candidates = getCandidatesIteratively([container], options.includeContainer, {
|
|
495
525
|
filter: isNodeMatchingSelectorTabbable.bind(null, options),
|
|
496
526
|
flatten: false,
|
|
497
527
|
getShadowRoot: options.getShadowRoot,
|
|
498
528
|
shadowRootFilter: isValidShadowRootTabbable
|
|
499
529
|
});
|
|
500
530
|
} else {
|
|
501
|
-
candidates = getCandidates(
|
|
531
|
+
candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
|
|
502
532
|
}
|
|
503
533
|
return sortByOrder(candidates);
|
|
504
534
|
};
|
|
535
|
+
var isTabbable = function isTabbable(node, options) {
|
|
536
|
+
options = options || {};
|
|
537
|
+
if (!node) {
|
|
538
|
+
throw new Error('No node provided');
|
|
539
|
+
}
|
|
540
|
+
if (matches.call(node, candidateSelector) === false) {
|
|
541
|
+
return false;
|
|
542
|
+
}
|
|
543
|
+
return isNodeMatchingSelectorTabbable(options, node);
|
|
544
|
+
};
|
|
505
545
|
|
|
506
|
-
|
|
546
|
+
export { getTabIndex, isTabbable, tabbable };
|
|
@@ -517,140 +517,6 @@
|
|
|
517
517
|
}
|
|
518
518
|
}
|
|
519
519
|
|
|
520
|
-
@layer fds.accordion {
|
|
521
|
-
.fds-accordion-accordion-a8137c3d {
|
|
522
|
-
--fds-accordion-border-radius: var(--fds-border_radius-interactive);
|
|
523
|
-
--fds-accordion-border-color: var(--fds-semantic-border-neutral-subtle);
|
|
524
|
-
|
|
525
|
-
border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
|
|
526
|
-
box-sizing: border-box;
|
|
527
|
-
}
|
|
528
|
-
|
|
529
|
-
.fds-accordion-border-a8137c3d {
|
|
530
|
-
border: 1px solid var(--fds-accordion-border-color);
|
|
531
|
-
border-radius: var(--fds-accordion-border-radius);
|
|
532
|
-
}
|
|
533
|
-
|
|
534
|
-
.fds-accordion-expandIcon-a8137c3d {
|
|
535
|
-
border-radius: var(--fds-border_radius-interactive);
|
|
536
|
-
}
|
|
537
|
-
|
|
538
|
-
.fds-accordion-content-a8137c3d {
|
|
539
|
-
padding: var(--fds-spacing-5, 1rem);
|
|
540
|
-
overflow: hidden;
|
|
541
|
-
text-overflow: ellipsis;
|
|
542
|
-
}
|
|
543
|
-
|
|
544
|
-
.fds-accordion-header-a8137c3d {
|
|
545
|
-
margin: 0;
|
|
546
|
-
}
|
|
547
|
-
|
|
548
|
-
.fds-accordion-accordionButton-a8137c3d {
|
|
549
|
-
width: 100%;
|
|
550
|
-
display: flex;
|
|
551
|
-
justify-content: flex-start;
|
|
552
|
-
align-items: center;
|
|
553
|
-
gap: var(--fds-spacing-2);
|
|
554
|
-
margin: 0;
|
|
555
|
-
text-align: left;
|
|
556
|
-
cursor: pointer;
|
|
557
|
-
border: none;
|
|
558
|
-
border-top: 1px solid var(--fds-semantic-border-neutral-subtle);
|
|
559
|
-
padding: var(--fds-spacing-4);
|
|
560
|
-
}
|
|
561
|
-
|
|
562
|
-
.fds-accordion-border-a8137c3d .fds-accordion-accordionButton-a8137c3d {
|
|
563
|
-
border-radius: var(--fds-accordion-border-radius);
|
|
564
|
-
}
|
|
565
|
-
|
|
566
|
-
.fds-accordion-item-a8137c3d:focus-within {
|
|
567
|
-
position: relative;
|
|
568
|
-
}
|
|
569
|
-
|
|
570
|
-
.fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d:hover + * .fds-accordion-content-a8137c3d {
|
|
571
|
-
border-color: var(--fds-semantic-border-neutral-strong);
|
|
572
|
-
}
|
|
573
|
-
|
|
574
|
-
.fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-expandIcon-a8137c3d {
|
|
575
|
-
transform: rotateZ(180deg);
|
|
576
|
-
}
|
|
577
|
-
|
|
578
|
-
.fds-accordion-neutral-a8137c3d,
|
|
579
|
-
.fds-accordion-neutral-a8137c3d .fds-accordion-accordionButton-a8137c3d {
|
|
580
|
-
background-color: var(--fds-semantic-surface-neutral-default);
|
|
581
|
-
}
|
|
582
|
-
|
|
583
|
-
.fds-accordion-subtle-a8137c3d,
|
|
584
|
-
.fds-accordion-subtle-a8137c3d .fds-accordion-accordionButton-a8137c3d {
|
|
585
|
-
background-color: var(--fds-semantic-surface-neutral-subtle);
|
|
586
|
-
}
|
|
587
|
-
|
|
588
|
-
.fds-accordion-first-a8137c3d,
|
|
589
|
-
.fds-accordion-first-a8137c3d .fds-accordion-accordionButton-a8137c3d {
|
|
590
|
-
--fds-accordion-border-color: var(--fds-semantic-border-first-default);
|
|
591
|
-
|
|
592
|
-
background: var(--fds-semantic-surface-first-light);
|
|
593
|
-
}
|
|
594
|
-
|
|
595
|
-
.fds-accordion-second-a8137c3d,
|
|
596
|
-
.fds-accordion-second-a8137c3d .fds-accordion-accordionButton-a8137c3d {
|
|
597
|
-
--fds-accordion-border-color: var(--fds-semantic-border-second-default);
|
|
598
|
-
|
|
599
|
-
background: var(--fds-semantic-surface-second-light);
|
|
600
|
-
}
|
|
601
|
-
|
|
602
|
-
.fds-accordion-third-a8137c3d,
|
|
603
|
-
.fds-accordion-third-a8137c3d .fds-accordion-accordionButton-a8137c3d {
|
|
604
|
-
--fds-accordion-border-color: var(--fds-semantic-border-third-default);
|
|
605
|
-
|
|
606
|
-
background: var(--fds-semantic-surface-third-light);
|
|
607
|
-
}
|
|
608
|
-
|
|
609
|
-
.fds-accordion-first-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d,
|
|
610
|
-
.fds-accordion-second-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d,
|
|
611
|
-
.fds-accordion-third-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d {
|
|
612
|
-
background-color: rgba(0 0 0 / 0.03);
|
|
613
|
-
}
|
|
614
|
-
|
|
615
|
-
.fds-accordion-neutral-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d,
|
|
616
|
-
.fds-accordion-subtle-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d {
|
|
617
|
-
background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
|
|
618
|
-
}
|
|
619
|
-
|
|
620
|
-
.fds-accordion-border-a8137c3d .fds-accordion-item-a8137c3d:first-child .fds-accordion-accordionButton-a8137c3d {
|
|
621
|
-
border-top: 0;
|
|
622
|
-
}
|
|
623
|
-
|
|
624
|
-
.fds-accordion-first-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d,
|
|
625
|
-
.fds-accordion-second-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d,
|
|
626
|
-
.fds-accordion-third-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d {
|
|
627
|
-
border-top: 1px solid var(--fds-semantic-surface-neutral-default);
|
|
628
|
-
}
|
|
629
|
-
|
|
630
|
-
@media (hover: hover) and (pointer: fine) {
|
|
631
|
-
.fds-accordion-accordionButton-a8137c3d:hover .fds-accordion-expandIcon-a8137c3d {
|
|
632
|
-
background-color: rgba(0 0 0 / 0.1);
|
|
633
|
-
}
|
|
634
|
-
|
|
635
|
-
.fds-accordion-neutral-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover,
|
|
636
|
-
.fds-accordion-subtle-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover {
|
|
637
|
-
background-color: var(--fds-semantic-surface-neutral-subtle-hover);
|
|
638
|
-
}
|
|
639
|
-
|
|
640
|
-
.fds-accordion-first-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover {
|
|
641
|
-
background-color: var(--fds-semantic-surface-first-light-hover);
|
|
642
|
-
}
|
|
643
|
-
|
|
644
|
-
.fds-accordion-second-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover {
|
|
645
|
-
background-color: var(--fds-semantic-surface-second-light-hover);
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
.fds-accordion-third-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover {
|
|
649
|
-
background-color: var(--fds-semantic-surface-third-light-hover);
|
|
650
|
-
}
|
|
651
|
-
}
|
|
652
|
-
}
|
|
653
|
-
|
|
654
520
|
.fds-animateheight-root-a203211d.fds-animateheight-openingOrClosing-a203211d,
|
|
655
521
|
.fds-animateheight-root-a203211d.fds-animateheight-closed-a203211d {
|
|
656
522
|
overflow: hidden;
|
|
@@ -2170,7 +2036,7 @@
|
|
|
2170
2036
|
color: var(--fds-semantic-text-neutral-default);
|
|
2171
2037
|
}
|
|
2172
2038
|
|
|
2173
|
-
.fds-modalheader-
|
|
2039
|
+
.fds-modalheader-modalHeaderButton-47e4ee5b {
|
|
2174
2040
|
position: absolute;
|
|
2175
2041
|
top: var(--fds-spacing-3);
|
|
2176
2042
|
right: var(--fds-spacing-3);
|
|
@@ -3039,7 +2905,7 @@
|
|
|
3039
2905
|
/**
|
|
3040
2906
|
* Apply a focus outline on an element when it is focused with keyboard
|
|
3041
2907
|
*/
|
|
3042
|
-
.fds-combobox-
|
|
2908
|
+
.fds-combobox-inputWrapper-249a725c:has(input:focus) {
|
|
3043
2909
|
--fds-focus-border-width: 3px;
|
|
3044
2910
|
|
|
3045
2911
|
outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
|
-
import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
|
|
4
|
+
import { useMergeRefs } from '../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
|
|
5
5
|
import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
|
|
6
6
|
import { useRovingTabindex } from './useRovingTabindex.js';
|
|
7
7
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { createContext, forwardRef, useState, useRef } from 'react';
|
|
4
|
-
import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
|
|
4
|
+
import { useMergeRefs } from '../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
|
|
5
5
|
import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
|
|
6
6
|
|
|
7
7
|
const RovingTabindexContext = createContext({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,cAAc,GAAG;IAC3B,iCAAiC;IACjC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC5D,kBAAkB;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,SAAS;IARpB,iCAAiC;;IAEjC,kBAAkB;;IAElB,oCAAoC;cAC1B,SAAS;mFAgBpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/AccordionContent/AccordionContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AccordionContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/AccordionContent/AccordionContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAOvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,wCAAwC;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,gBAAgB;IAJ3B,wCAAwC;cAC9B,SAAS;mFAmCnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/AccordionHeader/AccordionHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AccordionHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/AccordionHeader/AccordionHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM1E,MAAM,MAAM,oBAAoB,GAAG;IACjC,uGAAuG;IACvG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,oCAAoC;IACpC,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;IACjE,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEvC,eAAO,MAAM,eAAe;IAR1B,uGAAuG;;IAEvG,oCAAoC;oBACpB,kBAAkB,iBAAiB,CAAC,GAAG,SAAS;IAChE,mBAAmB;cACT,SAAS;2FAkDnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2EAA2E;IAC3E,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,oBAAoB,2DACsB,CAAC;AAExD,eAAO,MAAM,aAAa;IArBxB;;;;OAIG;;IAEH,wDAAwD;;IAExD,2EAA2E;cACjE,SAAS;mFA2CpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modal/ModalHeader/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAY5C,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,WAAW;IAbtB;;;OAGG;;;IAGH;;;OAGG;;
|
|
1
|
+
{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modal/ModalHeader/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAY5C,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,WAAW;IAbtB;;;OAGG;;;IAGH;;;OAGG;;mFAyDJ,CAAC"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import type * as React from 'react';
|
|
2
|
-
import type { UseFloatingReturn, UseListNavigationProps } from '@floating-ui/react';
|
|
3
2
|
import type { FormFieldProps } from '../useFormField';
|
|
4
|
-
import { useFormField } from '../useFormField';
|
|
5
3
|
import type { PortalProps } from '../../../types/Portal';
|
|
6
4
|
import type { Option } from './useCombobox';
|
|
7
5
|
export type ComboboxProps = {
|
|
@@ -45,12 +43,6 @@ export type ComboboxProps = {
|
|
|
45
43
|
* @default false
|
|
46
44
|
*/
|
|
47
45
|
hideChips?: boolean;
|
|
48
|
-
/**
|
|
49
|
-
* Label for the clear button
|
|
50
|
-
* @default 'Fjern alt'
|
|
51
|
-
* @deprecated Use `clearButtonLabel` instead
|
|
52
|
-
*/
|
|
53
|
-
cleanButtonLabel?: string;
|
|
54
46
|
/**
|
|
55
47
|
* Hides the clear button
|
|
56
48
|
* @default false
|
|
@@ -100,7 +92,7 @@ export type ComboboxProps = {
|
|
|
100
92
|
*/
|
|
101
93
|
chipSrLabel?: (option: Option) => string;
|
|
102
94
|
} & PortalProps & FormFieldProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
|
|
103
|
-
export declare const
|
|
95
|
+
export declare const ComboboxComponent: React.ForwardRefExoticComponent<{
|
|
104
96
|
/**
|
|
105
97
|
* Label for the combobox
|
|
106
98
|
*/
|
|
@@ -141,12 +133,104 @@ export declare const Combobox: React.ForwardRefExoticComponent<{
|
|
|
141
133
|
* @default false
|
|
142
134
|
*/
|
|
143
135
|
hideChips?: boolean | undefined;
|
|
136
|
+
/**
|
|
137
|
+
* Hides the clear button
|
|
138
|
+
* @default false
|
|
139
|
+
*/
|
|
140
|
+
hideClearButton?: boolean | undefined;
|
|
144
141
|
/**
|
|
145
142
|
* Label for the clear button
|
|
146
143
|
* @default 'Fjern alt'
|
|
147
|
-
* @deprecated Use `clearButtonLabel` instead
|
|
148
144
|
*/
|
|
149
|
-
|
|
145
|
+
clearButtonLabel?: string | undefined;
|
|
146
|
+
/**
|
|
147
|
+
* Enables virtualizing of options list.
|
|
148
|
+
* @see https://tanstack.com/virtual
|
|
149
|
+
* @default false
|
|
150
|
+
*/
|
|
151
|
+
virtual?: boolean | undefined;
|
|
152
|
+
/**
|
|
153
|
+
* Value of the input field
|
|
154
|
+
*/
|
|
155
|
+
inputValue?: string | undefined;
|
|
156
|
+
/**
|
|
157
|
+
* Adds `aria-busy` and displays loading state for the Combobox
|
|
158
|
+
* All options will be hidden and replaced with a loading message.
|
|
159
|
+
* @default false
|
|
160
|
+
*/
|
|
161
|
+
loading?: boolean | undefined;
|
|
162
|
+
/**
|
|
163
|
+
* Text to display when the combobox is loading
|
|
164
|
+
* @default 'Laster...'
|
|
165
|
+
*/
|
|
166
|
+
loadingLabel?: string | undefined;
|
|
167
|
+
/**
|
|
168
|
+
* Filter function for filtering the list of options. Return `true` to show option, `false` to hide option.
|
|
169
|
+
* @param inputValue
|
|
170
|
+
* @param option
|
|
171
|
+
* @returns boolean
|
|
172
|
+
*
|
|
173
|
+
* @default (inputValue, option) => option.value.toLowerCase().startsWith(inputValue.toLowerCase())
|
|
174
|
+
*/
|
|
175
|
+
filter?: ((inputValue: string, option: Option) => boolean) | undefined;
|
|
176
|
+
/**
|
|
177
|
+
* Add a screen reader label to the chips
|
|
178
|
+
* @param option
|
|
179
|
+
* @returns string
|
|
180
|
+
*
|
|
181
|
+
* @default (option) => 'Slett ' + option.label,
|
|
182
|
+
*/
|
|
183
|
+
chipSrLabel?: ((option: Option) => string) | undefined;
|
|
184
|
+
} & PortalProps & {
|
|
185
|
+
error?: React.ReactNode;
|
|
186
|
+
errorId?: string | undefined;
|
|
187
|
+
disabled?: boolean | undefined;
|
|
188
|
+
description?: React.ReactNode;
|
|
189
|
+
id?: string | undefined;
|
|
190
|
+
readOnly?: boolean | undefined;
|
|
191
|
+
size?: "small" | "medium" | "large" | undefined;
|
|
192
|
+
} & Pick<React.HTMLAttributes<HTMLElement>, "aria-describedby"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
|
|
193
|
+
export declare const Combobox: React.ForwardRefExoticComponent<{
|
|
194
|
+
/**
|
|
195
|
+
* Label for the combobox
|
|
196
|
+
*/
|
|
197
|
+
label?: string | undefined;
|
|
198
|
+
/**
|
|
199
|
+
* Visually hides `label` and `description` (still available for screen readers)
|
|
200
|
+
* @default false
|
|
201
|
+
*/
|
|
202
|
+
hideLabel?: boolean | undefined;
|
|
203
|
+
/**
|
|
204
|
+
* String array of selected options. Contains only one option during single selection mode.
|
|
205
|
+
*/
|
|
206
|
+
value?: string[] | undefined;
|
|
207
|
+
/**
|
|
208
|
+
* String array of initial selected options. Contains only one option during single selection mode.
|
|
209
|
+
*/
|
|
210
|
+
initialValue?: string[] | undefined;
|
|
211
|
+
/**
|
|
212
|
+
* Callback function that is called when the value changes
|
|
213
|
+
*/
|
|
214
|
+
onValueChange?: ((value: string[]) => void) | undefined;
|
|
215
|
+
/**
|
|
216
|
+
* Multiple options can be selected
|
|
217
|
+
* @default false
|
|
218
|
+
*/
|
|
219
|
+
multiple?: boolean | undefined;
|
|
220
|
+
/**
|
|
221
|
+
* Name of the value when used in a form
|
|
222
|
+
*/
|
|
223
|
+
name?: string | undefined;
|
|
224
|
+
/**
|
|
225
|
+
* Exposes the HTML `size` attribute.
|
|
226
|
+
* @default 0
|
|
227
|
+
*/
|
|
228
|
+
htmlSize?: number | undefined;
|
|
229
|
+
/**
|
|
230
|
+
* Hides chips when multiple options are selected
|
|
231
|
+
* @default false
|
|
232
|
+
*/
|
|
233
|
+
hideChips?: boolean | undefined;
|
|
150
234
|
/**
|
|
151
235
|
* Hides the clear button
|
|
152
236
|
* @default false
|
|
@@ -204,41 +288,4 @@ export declare const Combobox: React.ForwardRefExoticComponent<{
|
|
|
204
288
|
readOnly?: boolean | undefined;
|
|
205
289
|
size?: "small" | "medium" | "large" | undefined;
|
|
206
290
|
} & Pick<React.HTMLAttributes<HTMLElement>, "aria-describedby"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
|
|
207
|
-
type ComboboxContextType = {
|
|
208
|
-
multiple: NonNullable<ComboboxProps['multiple']>;
|
|
209
|
-
disabled: NonNullable<ComboboxProps['disabled']>;
|
|
210
|
-
readOnly: NonNullable<ComboboxProps['readOnly']>;
|
|
211
|
-
name: ComboboxProps['name'];
|
|
212
|
-
error: ComboboxProps['error'];
|
|
213
|
-
htmlSize: ComboboxProps['htmlSize'];
|
|
214
|
-
hideChips: NonNullable<ComboboxProps['hideChips']>;
|
|
215
|
-
clearButtonLabel: NonNullable<ComboboxProps['clearButtonLabel']>;
|
|
216
|
-
hideClearButton: NonNullable<ComboboxProps['hideClearButton']>;
|
|
217
|
-
options: Option[];
|
|
218
|
-
selectedOptions: Option[];
|
|
219
|
-
size: NonNullable<ComboboxProps['size']>;
|
|
220
|
-
formFieldProps: ReturnType<typeof useFormField>;
|
|
221
|
-
refs: UseFloatingReturn['refs'];
|
|
222
|
-
inputRef: React.RefObject<HTMLInputElement>;
|
|
223
|
-
activeIndex: number | null;
|
|
224
|
-
open: boolean;
|
|
225
|
-
inputValue: string;
|
|
226
|
-
activeDescendant: string | undefined;
|
|
227
|
-
optionValues: string[];
|
|
228
|
-
listId: string;
|
|
229
|
-
setInputValue: React.Dispatch<React.SetStateAction<string>>;
|
|
230
|
-
setOpen: (open: boolean) => void;
|
|
231
|
-
handleKeyDown: (event: React.KeyboardEvent) => void;
|
|
232
|
-
setActiveIndex: (index: number | null) => void;
|
|
233
|
-
setActiveOption: (index: number, id: string) => void;
|
|
234
|
-
getReferenceProps: (props?: Record<string, unknown>) => Record<string, unknown>;
|
|
235
|
-
onOptionClick: (value: string) => void;
|
|
236
|
-
setSelectedOptions: React.Dispatch<React.SetStateAction<Option[]>>;
|
|
237
|
-
chipSrLabel: NonNullable<ComboboxProps['chipSrLabel']>;
|
|
238
|
-
handleSelectOption: (option: Option) => void;
|
|
239
|
-
listRef: UseListNavigationProps['listRef'];
|
|
240
|
-
forwareddRef: React.Ref<HTMLInputElement>;
|
|
241
|
-
};
|
|
242
|
-
export declare const ComboboxContext: React.Context<ComboboxContextType | undefined>;
|
|
243
|
-
export {};
|
|
244
291
|
//# sourceMappingURL=Combobox.d.ts.map
|