@norges-domstoler/dds-components 21.7.0 → 21.9.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/index.css +199 -201
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +804 -546
- package/dist/index.d.ts +804 -546
- package/dist/index.js +3663 -3631
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3051 -3016
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { ComponentPropsWithRef,
|
|
3
|
+
import { ComponentPropsWithRef, DependencyList, Ref, RefCallback, Dispatch, SetStateAction, ChangeEvent, RefObject, ElementType, ComponentPropsWithoutRef, CSSProperties, HTMLAttributes, ReactNode, KeyboardEvent as KeyboardEvent$1, ComponentProps, SVGAttributes, JSX, AnchorHTMLAttributes, LabelHTMLAttributes, ButtonHTMLAttributes, AriaRole, InputHTMLAttributes, FocusEvent, MouseEventHandler, ForwardedRef, ForwardRefExoticComponent, MouseEvent as MouseEvent$1, ReactElement } from 'react';
|
|
4
4
|
import * as CSS from 'csstype';
|
|
5
5
|
import { Property, StandardProperties } from 'csstype';
|
|
6
6
|
import { Strategy, UseFloatingReturn, Placement as Placement$1 } from '@floating-ui/react-dom';
|
|
@@ -9,7 +9,7 @@ import { DateValue, AriaCalendarProps } from '@react-aria/calendar';
|
|
|
9
9
|
import { DateValue as DateValue$1, CalendarDate, Time } from '@internationalized/date';
|
|
10
10
|
import { AriaDatePickerProps } from '@react-types/datepicker';
|
|
11
11
|
import { AriaDateFieldOptions, useDatePicker, AriaTimeFieldProps } from '@react-aria/datepicker';
|
|
12
|
-
import { OptionProps, GroupBase, SingleValueProps, SelectInstance, Props
|
|
12
|
+
import { OptionProps, GroupBase, SingleValueProps, SelectInstance, Props } from 'react-select';
|
|
13
13
|
|
|
14
14
|
declare function handleElementWithBackdropMount(container: HTMLElement): void;
|
|
15
15
|
declare function handleElementWithBackdropUnmount(container: HTMLElement): void;
|
|
@@ -18,6 +18,26 @@ type BackdropProps = {
|
|
|
18
18
|
isMounted?: boolean;
|
|
19
19
|
zIndex: 'drawer' | 'modal';
|
|
20
20
|
} & Pick<ComponentPropsWithRef<'div'>, 'children' | 'onClick' | 'ref'>;
|
|
21
|
+
/**
|
|
22
|
+
* Backdrop-komponent, viser et bakgrunnslag for et element som skal låse applikasjonen i bakgrunnen (Modal el.l.).
|
|
23
|
+
*
|
|
24
|
+
* @component
|
|
25
|
+
* @param {Object} props - Props for komponenten.
|
|
26
|
+
* @param {boolean} [props.isMounted] - Angir om backdropen skal være synlig (`true`) eller skjult (`false`). Standard er `false`.
|
|
27
|
+
* @param {'drawer' | 'modal'} props.zIndex - Bestemmer hvilken z-index-klasse som skal brukes, avhengig av konteksten (f.eks. drawer eller modal).
|
|
28
|
+
* @param {React.ReactNode} [props.children] - Eventuelt innhold som skal vises inni backdropen.
|
|
29
|
+
* @param {React.MouseEventHandler<HTMLDivElement>} [props.onClick] - Klikkhåndterer for backdropen, f.eks. for å lukke en modal.
|
|
30
|
+
* @param {React.Ref<HTMLDivElement>} [props.ref] - Referanse til DOM-elementet.
|
|
31
|
+
*
|
|
32
|
+
* @returns {JSX.Element} Et `<div>`-element med riktige klasser basert på synlighet og z-index.
|
|
33
|
+
|
|
34
|
+
* @example
|
|
35
|
+
* ```tsx
|
|
36
|
+
* <Backdrop isMounted={true} zIndex="modal" onClick={handleClose}>
|
|
37
|
+
* <ModalContent />
|
|
38
|
+
* </Backdrop>
|
|
39
|
+
* ```
|
|
40
|
+
*/
|
|
21
41
|
declare const Backdrop: {
|
|
22
42
|
({ isMounted, zIndex, ...props }: BackdropProps): react_jsx_runtime.JSX.Element;
|
|
23
43
|
displayName: string;
|
|
@@ -28,8 +48,386 @@ interface SvgChevronProps {
|
|
|
28
48
|
height?: Property.Height;
|
|
29
49
|
width?: Property.Width;
|
|
30
50
|
}
|
|
51
|
+
/**
|
|
52
|
+
* Animert chevron der armene beveger seg uavhengig av hverandre.
|
|
53
|
+
*
|
|
54
|
+
* @component
|
|
55
|
+
* @param {SvgChevronProps} props - Props for komponenten.
|
|
56
|
+
* @param {boolean} props.isUp - om chevron peker opp.
|
|
57
|
+
* @param {Property.Height} props.height - høyde.
|
|
58
|
+
* @param {Property.Width} props.width - bredde.
|
|
59
|
+
*
|
|
60
|
+
* @returns {JSX.Element} Et `<svg>`-element som animeres basert props.
|
|
61
|
+
|
|
62
|
+
* @example
|
|
63
|
+
* ```tsx
|
|
64
|
+
* const [isExpanded, setIsExpanded] = useState(false);
|
|
65
|
+
* <button onClick={() => setIsExpanded(!isExpanded)}>
|
|
66
|
+
* <AnimatedChevronUpDown isUp={isExpanded} />
|
|
67
|
+
* </button>
|
|
68
|
+
* ```
|
|
69
|
+
*/
|
|
31
70
|
declare const AnimatedChevronUpDown: ({ isUp, height, width, }: SvgChevronProps) => react_jsx_runtime.JSX.Element;
|
|
32
71
|
|
|
72
|
+
/**
|
|
73
|
+
* Usynlig `<input>` til bruk for skjermlesere, typisk for custom radioknapper o.l..
|
|
74
|
+
*
|
|
75
|
+
* @component
|
|
76
|
+
* @param {Object} props - Standard HTML-attributter for komponenten.
|
|
77
|
+
*
|
|
78
|
+
* @returns {JSX.Element} Et usynlig `<input>`-element.
|
|
79
|
+
|
|
80
|
+
* @example
|
|
81
|
+
* ```tsx
|
|
82
|
+
* <label htmlFor="id">
|
|
83
|
+
* <HiddenInput id="id" />
|
|
84
|
+
* //visuell erstatning for input
|
|
85
|
+
* </label>
|
|
86
|
+
* });
|
|
87
|
+
* ```
|
|
88
|
+
*/
|
|
89
|
+
declare const HiddenInput: ({ className, ...rest }: ComponentPropsWithRef<"input">) => react_jsx_runtime.JSX.Element;
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* Hook som returnerer en callback-funksjon som refererer til den nyeste versjonen av den opprinnelige funksjonen.
|
|
93
|
+
* Nyttig når du trenger en stabil referanse (f.eks. i event listeners), men fortsatt ønsker at den skal bruke den nyeste logikken.
|
|
94
|
+
*
|
|
95
|
+
* @template T - Typen til callback-funksjonen.
|
|
96
|
+
* @param {T | undefined} callback - Funksjonen som skal kalles.
|
|
97
|
+
* @param {DependencyList} [deps=[]] - Avhengigheter som styrer når den returnerte funksjonen skal oppdateres.
|
|
98
|
+
* @returns {T} En memorisert funksjon som peker til den nyeste versjonen av `callback`.
|
|
99
|
+
* @example
|
|
100
|
+
* ```tsx
|
|
101
|
+
* function MyComponent() {
|
|
102
|
+
* const [count, setCount] = useState(0);
|
|
103
|
+
*
|
|
104
|
+
* const handleClick = useCallbackRef(() => {
|
|
105
|
+
* console.log('Klikk med count:', count);
|
|
106
|
+
* }, [count]);
|
|
107
|
+
*
|
|
108
|
+
* useEffect(() => {
|
|
109
|
+
* window.addEventListener('click', handleClick);
|
|
110
|
+
* return () => window.removeEventListener('click', handleClick);
|
|
111
|
+
* }, [handleClick]);
|
|
112
|
+
*
|
|
113
|
+
* return <button onClick={() => setCount(c => c + 1)}>Øk</button>;
|
|
114
|
+
* }
|
|
115
|
+
* ```
|
|
116
|
+
|
|
117
|
+
*/
|
|
118
|
+
declare function useCallbackRef<T extends (...args: Array<never>) => unknown>(callback: T | undefined, deps?: DependencyList): T;
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Kombinerer refs for et element.
|
|
122
|
+
*
|
|
123
|
+
* @template T elementet som refereres til.
|
|
124
|
+
* @param {Array<Ref<T> | undefined>} refs array med refs.
|
|
125
|
+
* @returns {RefCallback<T>} callback med kombinerte refs.
|
|
126
|
+
* @example
|
|
127
|
+
* ```tsx
|
|
128
|
+
* function MyComponent(ref) {
|
|
129
|
+
*
|
|
130
|
+
* const itemRef = useRef<HTMLDivElement>(null);
|
|
131
|
+
* const combinedRef = useCombinedRef(ref, itemRef);
|
|
132
|
+
*
|
|
133
|
+
* return <div ref={combinedRef}>innhold</div>
|
|
134
|
+
* });
|
|
135
|
+
* ```
|
|
136
|
+
*/
|
|
137
|
+
declare function useCombinedRef<T>(...refs: Array<Ref<T> | undefined>): RefCallback<T>;
|
|
138
|
+
|
|
139
|
+
interface UseControllableStateProps<T> {
|
|
140
|
+
/**Verdi. */
|
|
141
|
+
value?: T;
|
|
142
|
+
/**Default verdi. */
|
|
143
|
+
defaultValue?: T | (() => T);
|
|
144
|
+
/** `onChange` funksjon. */
|
|
145
|
+
onChange?: (value: T) => void;
|
|
146
|
+
}
|
|
147
|
+
/**
|
|
148
|
+
* The `useControllableState` hook returns the state and function that updates the state, just like React.useState does.
|
|
149
|
+
*/
|
|
150
|
+
/**
|
|
151
|
+
* Håndterer bruk av state slik at den kan bli enten kontrollert eller ukontrollert ut av boksen.
|
|
152
|
+
* @template T typen til verdien.
|
|
153
|
+
* @param {{
|
|
154
|
+
* value?: T;
|
|
155
|
+
* defaultValue?: T | (() => T);
|
|
156
|
+
* onChange?: (value: T) => void;
|
|
157
|
+
* }} props verdi, default verdi ved ukontrollert state og funksjon til å kotrnollere `value`.
|
|
158
|
+
* @returns {[T, Dispatch<SetStateAction<T>>]} state og funksjon til å kontrollere den.
|
|
159
|
+
* @example
|
|
160
|
+
* ```tsx
|
|
161
|
+
* const MyComponent = ({
|
|
162
|
+
* onChange,
|
|
163
|
+
* checked: checkedProp,
|
|
164
|
+
* defaultChecked
|
|
165
|
+
* }) => {
|
|
166
|
+
* const [checked, setChecked] = useControllableState({
|
|
167
|
+
* value: checkedProp,
|
|
168
|
+
* defaultValue: defaultChecked ?? false,
|
|
169
|
+
* onChange,
|
|
170
|
+
* });
|
|
171
|
+
* return (
|
|
172
|
+
* <input
|
|
173
|
+
* checked={checked}
|
|
174
|
+
* onChange={e => setChecked(e.target.checked)}
|
|
175
|
+
* type="checkbox"
|
|
176
|
+
* />
|
|
177
|
+
* ) };
|
|
178
|
+
* ```
|
|
179
|
+
*/
|
|
180
|
+
declare function useControllableState<T>(props: UseControllableStateProps<T>): [T, Dispatch<SetStateAction<T>>];
|
|
181
|
+
/**
|
|
182
|
+
* The `useControllableGroupState` hook returns the group value and handleChange function to control it.
|
|
183
|
+
*/
|
|
184
|
+
interface UseControllableGroupStateProps<T> extends Pick<UseControllableStateProps<T>, 'defaultValue' | 'value'> {
|
|
185
|
+
onChange?: (event: ChangeEvent<HTMLInputElement>, value: T) => void;
|
|
186
|
+
}
|
|
187
|
+
declare function useControllableGroupState<T>(props: UseControllableGroupStateProps<T>): {
|
|
188
|
+
groupValue: T | undefined;
|
|
189
|
+
handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
190
|
+
};
|
|
191
|
+
|
|
192
|
+
type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
|
|
193
|
+
interface UseFloatPositionOptions {
|
|
194
|
+
/**
|
|
195
|
+
* Whether to update the position of the floating element on every animation frame if required.
|
|
196
|
+
* This is optimized for performance but can still be costly.
|
|
197
|
+
* @default true
|
|
198
|
+
*/
|
|
199
|
+
animationFrame?: boolean;
|
|
200
|
+
/**
|
|
201
|
+
* `offset` is used to displace the floating element from its core placement.
|
|
202
|
+
* The value passed is logical, meaning its effect on the
|
|
203
|
+
* physical result is dependent on the writing direction (e.g. RTL).
|
|
204
|
+
* @default 8
|
|
205
|
+
*/
|
|
206
|
+
offset?: number;
|
|
207
|
+
/**
|
|
208
|
+
* Where to place the floating element relative to its reference element.
|
|
209
|
+
* @default 'bottom'
|
|
210
|
+
*/
|
|
211
|
+
placement?: Placement;
|
|
212
|
+
}
|
|
213
|
+
interface FloatingStyles {
|
|
214
|
+
position: Strategy;
|
|
215
|
+
top: number;
|
|
216
|
+
left: number;
|
|
217
|
+
}
|
|
218
|
+
interface UseFloatPosition {
|
|
219
|
+
refs: UseFloatingReturn['refs'];
|
|
220
|
+
styles: {
|
|
221
|
+
floating: FloatingStyles;
|
|
222
|
+
arrow: {
|
|
223
|
+
[x: string]: string | number;
|
|
224
|
+
position: Strategy;
|
|
225
|
+
top: string | number;
|
|
226
|
+
left: string | number;
|
|
227
|
+
transform: string;
|
|
228
|
+
} | undefined;
|
|
229
|
+
};
|
|
230
|
+
}
|
|
231
|
+
/**
|
|
232
|
+
* Håndterer posisjonering av et element i forhold til et annet element i DOM.
|
|
233
|
+
* @param {HTMLElement | null} arrowRef pil-elementet.
|
|
234
|
+
* @param {{AnimationFrame: boolean, offset: number, placement: Placement}} options alternativer for float.
|
|
235
|
+
* @returns {{
|
|
236
|
+
* refs: import('@floating-ui/react-dom').UseFloatingReturn['refs'],
|
|
237
|
+
* styles: {
|
|
238
|
+
* floating: import('@floating-ui/react-dom').FloatingStyles,
|
|
239
|
+
* arrow:
|
|
240
|
+
* undefined | {
|
|
241
|
+
* [x: string]: string | number;
|
|
242
|
+
* position: Strategy;
|
|
243
|
+
* top: string | number;
|
|
244
|
+
* left: string | number;
|
|
245
|
+
* transform: string;
|
|
246
|
+
* }
|
|
247
|
+
* }
|
|
248
|
+
* }} Objekt med refs og styling for floating UI.
|
|
249
|
+
* @example
|
|
250
|
+
* ```tsx
|
|
251
|
+
* function MyComponent() {
|
|
252
|
+
*
|
|
253
|
+
* // Hvis du trenger en pil
|
|
254
|
+
* const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
|
|
255
|
+
*
|
|
256
|
+
* const { refs, styles: positionStyles } = useFloatPosition(arrowElement, {
|
|
257
|
+
* placement: 'right',
|
|
258
|
+
* offset: 2,
|
|
259
|
+
* });
|
|
260
|
+
*
|
|
261
|
+
* return (
|
|
262
|
+
* <>
|
|
263
|
+
* <button ref={refs.setReference}>Anchor</button>
|
|
264
|
+
* <div
|
|
265
|
+
* ref={refs.setFloating}
|
|
266
|
+
* style={positionStyles.floating}
|
|
267
|
+
* >
|
|
268
|
+
* <div ref={setArrowElement} style={positionStyles.arrow}>
|
|
269
|
+
* // din pil, f.eks. svg
|
|
270
|
+
* </div>
|
|
271
|
+
* Innhold
|
|
272
|
+
* </div>
|
|
273
|
+
* </>
|
|
274
|
+
* };
|
|
275
|
+
* ```
|
|
276
|
+
*/
|
|
277
|
+
declare const useFloatPosition: (arrowRef: HTMLElement | null, options?: UseFloatPositionOptions) => UseFloatPosition;
|
|
278
|
+
|
|
279
|
+
/**
|
|
280
|
+
* Fanger fokus i en loop inni et element.
|
|
281
|
+
* @template {HTMLElement} T typen til container-elementet som fanger fokus.
|
|
282
|
+
* @param {boolean} active om focus skal fanges, f.eks. når en modal åpnes.
|
|
283
|
+
* @param {RefObject<HTMLElement | null> | undefined} initialFocusRef `ref` til elementet som skal motta focus når focus trap er aktiv.
|
|
284
|
+
* @returns {RefObject<T | null>} `ref` til elementet som fanger fokus.
|
|
285
|
+
* @example
|
|
286
|
+
* ```tsx
|
|
287
|
+
* function MyComponent() {
|
|
288
|
+
*
|
|
289
|
+
* const [isOpen, setOpen] = useState(false);
|
|
290
|
+
* const componentRef = useFocusTrap<HTMLDivElement>(isOpen);
|
|
291
|
+
*
|
|
292
|
+
* return isOpen ? <div ref={componentRef}><button>click</button></div> : null;
|
|
293
|
+
*
|
|
294
|
+
* }
|
|
295
|
+
* ```
|
|
296
|
+
*/
|
|
297
|
+
declare function useFocusTrap<T extends HTMLElement>(active: boolean, initialFocusRef?: RefObject<HTMLElement | null> | undefined): RefObject<T | null>;
|
|
298
|
+
|
|
299
|
+
/**
|
|
300
|
+
* Sjekker om komponenten er mounted i DOM.
|
|
301
|
+
*
|
|
302
|
+
* @returns {() => boolean} om komponenten er mounted.
|
|
303
|
+
* @example
|
|
304
|
+
* ```tsx
|
|
305
|
+
* function MyComponent() {
|
|
306
|
+
*
|
|
307
|
+
* const isMounted = useIsMounted();
|
|
308
|
+
*
|
|
309
|
+
* useEffect(() => {
|
|
310
|
+
* if(isMounted()) {
|
|
311
|
+
* // logikk når mounted
|
|
312
|
+
* }
|
|
313
|
+
* }, [isMounted]);
|
|
314
|
+
*
|
|
315
|
+
* });
|
|
316
|
+
* ```
|
|
317
|
+
*
|
|
318
|
+
*/
|
|
319
|
+
declare const useIsMounted: () => (() => boolean);
|
|
320
|
+
|
|
321
|
+
/**
|
|
322
|
+
* Tillater effekter og animasjoner å bli gjennomført like etter et element blir lagt til eller like før det blir fjernet fra DOM.
|
|
323
|
+
* @param {boolean} isMounted om elementet er mounted.
|
|
324
|
+
* @param {number} unmountDelay hvor lenge transition skal vare før unmount.
|
|
325
|
+
* @returns {boolean} om den har trasisjonert inn.
|
|
326
|
+
* @example
|
|
327
|
+
* ```css
|
|
328
|
+
* // CSS
|
|
329
|
+
* .component {
|
|
330
|
+
* transition: opacity 0.2s;
|
|
331
|
+
* opacity: 0;
|
|
332
|
+
* }
|
|
333
|
+
*
|
|
334
|
+
* .transitionedIn.mounted {
|
|
335
|
+
* opacity: 1;
|
|
336
|
+
* }
|
|
337
|
+
* ```
|
|
338
|
+
* ```jsx
|
|
339
|
+
* // JSX
|
|
340
|
+
* function MyComponent(isMounted) {
|
|
341
|
+
*
|
|
342
|
+
* const hasTransitionedIn = useMountTransition(isMounted, 500);
|
|
343
|
+
*
|
|
344
|
+
* return isMounted || hasTransitionedIn ? (
|
|
345
|
+
* <div
|
|
346
|
+
* className={`component ${hasTransitionedIn && 'transitionedIn'} ${isMounted && 'mounted'}`}
|
|
347
|
+
* >
|
|
348
|
+
* innhold
|
|
349
|
+
* </div>)
|
|
350
|
+
* : null;
|
|
351
|
+
* };
|
|
352
|
+
* ```
|
|
353
|
+
*/
|
|
354
|
+
declare const useMountTransition: (isMounted: boolean, unmountDelay: number) => boolean;
|
|
355
|
+
|
|
356
|
+
/**
|
|
357
|
+
* Kjører logikk når brukeren klikker utenfor espesifisert(e) element(er).
|
|
358
|
+
* @param {HTMLElement | null | undefined | Array<HTMLElement | null | undefined>} element HTML element(er) som overvåkes for klikk utenfor.
|
|
359
|
+
* @param {(event: MouseEvent | TouchEvent) => void} handler funksjonen som kjøres ved klikk utenfor.
|
|
360
|
+
* @returns {void}
|
|
361
|
+
* @example
|
|
362
|
+
* ```tsx
|
|
363
|
+
* * function MyComponent() {
|
|
364
|
+
* const [isOpen, setOpen] = useState(true);
|
|
365
|
+
* const ref = useRef<HTMLDivElement>(null);
|
|
366
|
+
* useOnClickOutside(ref.current, () => setOpen(false));
|
|
367
|
+
*
|
|
368
|
+
* return isOpen && <div ref={ref}>innhold</div>
|
|
369
|
+
* };
|
|
370
|
+
* ```
|
|
371
|
+
*/
|
|
372
|
+
declare function useOnClickOutside(element: HTMLElement | null | undefined | Array<HTMLElement | null | undefined>, handler: (event: MouseEvent | TouchEvent) => void): void;
|
|
373
|
+
|
|
374
|
+
/**
|
|
375
|
+
* Kjører logikk når spesifisert(e) tast(er) blir trykt ned.
|
|
376
|
+
* @param {string} key tasten som trykkes.
|
|
377
|
+
* @param {(event: KeyboardEvent) => void} handler funksjonen som skal kjøres.
|
|
378
|
+
* @returns {void}
|
|
379
|
+
* @example
|
|
380
|
+
* ```tsx
|
|
381
|
+
* function MyComponent() {
|
|
382
|
+
* const [isOpen, setOpen] = useState(true);
|
|
383
|
+
* useOnKeyDown('Escape', () => setOpen(false));
|
|
384
|
+
*
|
|
385
|
+
* return isOpen ? <div>innhold</div> : null;
|
|
386
|
+
* }
|
|
387
|
+
* ```
|
|
388
|
+
*/
|
|
389
|
+
declare const useOnKeyDown: (key: string | Array<string>, handler: (event: KeyboardEvent) => void) => void;
|
|
390
|
+
|
|
391
|
+
/**
|
|
392
|
+
* Returnerer fokus til et element når første eller siste barn i en container mister fokus ved tastaturnavigasjon.
|
|
393
|
+
* @template {HTMLElement} T typen til container som skal returnere fous.
|
|
394
|
+
* @param {boolean} active om container skal få fokus, f.eks. når en modal åpnes.
|
|
395
|
+
* @param {() => void} onBlur ekstra logikk når fokus forlater container.
|
|
396
|
+
* @param {HTMLElement | null | undefined} triggerElement elementet som skal få fokus når fokus forlater container.
|
|
397
|
+
* @returns {RefObject<T | null>} ref til container som skal returnere fokus.
|
|
398
|
+
* @example
|
|
399
|
+
* ```tsx
|
|
400
|
+
* const MyComponent() {
|
|
401
|
+
*
|
|
402
|
+
* const [isOpen, setOpen] = useState(false);
|
|
403
|
+
* const triggerRef = useRef<HTMLButtonElement>(null);
|
|
404
|
+
* const containerRef = useReturnFocusOnBlur<HTMLDivElement>(
|
|
405
|
+
* isOpen,
|
|
406
|
+
* () => setOpen(false),
|
|
407
|
+
* triggerRef.current,
|
|
408
|
+
* );
|
|
409
|
+
*
|
|
410
|
+
* return (
|
|
411
|
+
* <div>
|
|
412
|
+
* <button
|
|
413
|
+
* ref={triggerRef}
|
|
414
|
+
* onClick={() => setOpen(true)}
|
|
415
|
+
* >
|
|
416
|
+
* Åpne popover
|
|
417
|
+
* </button>
|
|
418
|
+
* {isOpen &&
|
|
419
|
+
* <div ref={containerRef}>
|
|
420
|
+
* <button>1</button>
|
|
421
|
+
* <button>2</button>
|
|
422
|
+
* </div>
|
|
423
|
+
* }
|
|
424
|
+
* </div>
|
|
425
|
+
* )
|
|
426
|
+
* }
|
|
427
|
+
* ```
|
|
428
|
+
*/
|
|
429
|
+
declare function useReturnFocusOnBlur<T extends HTMLElement>(active: boolean, onBlur: () => void, triggerElement?: HTMLElement | null): RefObject<T | null>;
|
|
430
|
+
|
|
33
431
|
type Direction$1 = 'row' | 'column';
|
|
34
432
|
|
|
35
433
|
/**
|
|
@@ -154,14 +552,72 @@ type ExtractStrict<T, U extends T> = U;
|
|
|
154
552
|
type Nullable<T> = T | null;
|
|
155
553
|
type Callback<T> = (e: T) => void;
|
|
156
554
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
|
|
555
|
+
declare const isKeyboardEvent: (e: Event | KeyboardEvent$1<Element>) => e is KeyboardEvent$1<Element>;
|
|
556
|
+
/**
|
|
557
|
+
* Bytter fokus mellom elementer i en gruppe med piltaster og ikke `Tab`, samt looper fokus i gruppen.
|
|
558
|
+
* @param {number} size antall elementer i gruppen.
|
|
559
|
+
* @param {boolean} active om fokus skal kontrolleres av hooken. Når status blir inaktiv vil fokusrekkefølge nullstilles.
|
|
560
|
+
* @param {'row' | 'column'} direction retning elementene blas i.
|
|
561
|
+
* @param {boolean} noWrap om indeksen skal 'wrappe' rundt til 0 hvis den går over size - 1, eller til size - 1 hvis den går under 0.
|
|
562
|
+
* @returns {[focusedIndex: number, setFocus: Dispatch<SetStateAction<number>>]} hook par: indeksen til fokuserte elemenentet og funksjonen som håndterer fokus.
|
|
563
|
+
* @example
|
|
564
|
+
* ```tsx
|
|
565
|
+
* import elements from './elements';
|
|
566
|
+
* import RoveItem from './RoveItem';
|
|
567
|
+
*
|
|
568
|
+
* function MyComponent() {
|
|
569
|
+
* const [focusedIndex, setFocus] = useRoveFocus(elements.length);
|
|
570
|
+
*
|
|
571
|
+
* return (
|
|
572
|
+
* <ul>
|
|
573
|
+
* {elements.map((element, index) => (
|
|
574
|
+
* <li key={element}>
|
|
575
|
+
* <RoveItem index={index} shouldFocus={focusedIndex === index} setFocus={setFocus}>{element.name}</RoveItem>
|
|
576
|
+
* </li>
|
|
577
|
+
* ))}
|
|
578
|
+
* </ul>)
|
|
579
|
+
* }
|
|
580
|
+
* ```
|
|
581
|
+
*/
|
|
582
|
+
declare function useRoveFocus(size?: number, active?: boolean, direction?: Direction$1, noWrap?: boolean): [number, Dispatch<SetStateAction<number>>];
|
|
163
583
|
|
|
164
|
-
declare
|
|
584
|
+
declare enum ScreenSize {
|
|
585
|
+
XSmall = 0,
|
|
586
|
+
Small = 1,
|
|
587
|
+
Medium = 2,
|
|
588
|
+
Large = 3,
|
|
589
|
+
XLarge = 4
|
|
590
|
+
}
|
|
591
|
+
/**
|
|
592
|
+
* Sjekker skjermstørrelsen basert på brekkpunkter definerte i designsystemet.
|
|
593
|
+
* @returns den aktuelle skjermstørrelsen basert på {@link ScreenSize}.
|
|
594
|
+
* @example
|
|
595
|
+
* ```tsx
|
|
596
|
+
* function MyComponent() {
|
|
597
|
+
* const screenSize = useScreenSize();
|
|
598
|
+
* const isSmallScreen = screenSize === ScreenSize.Small;
|
|
599
|
+
*
|
|
600
|
+
* return <div className={isSmallScreen && 'smallDiv'} >innhold</div>
|
|
601
|
+
* }
|
|
602
|
+
* ```
|
|
603
|
+
*/
|
|
604
|
+
declare const useScreenSize: () => ScreenSize;
|
|
605
|
+
|
|
606
|
+
/**
|
|
607
|
+
* Kjører logikk når vindusstørrelsen endrer seg.
|
|
608
|
+
* @param {() => void} handler funksjonen som skal kjøres.
|
|
609
|
+
* @returns {void}
|
|
610
|
+
* @example
|
|
611
|
+
* ```tsx
|
|
612
|
+
* function MyComponent() {
|
|
613
|
+
* const [width, setWidth] = useState<number>(window.innerWidth);
|
|
614
|
+
* useResize(() => setWidth(window.innerWidth));
|
|
615
|
+
*
|
|
616
|
+
* return <div>vindusstørrelse: {width}px</div>;
|
|
617
|
+
* }
|
|
618
|
+
* ```
|
|
619
|
+
*/
|
|
620
|
+
declare const useWindowResize: (handler: () => void) => void;
|
|
165
621
|
|
|
166
622
|
declare const BREAKPOINTS: readonly ["xs", "sm", "md", "lg", "xl"];
|
|
167
623
|
type Breakpoint = (typeof BREAKPOINTS)[number];
|
|
@@ -246,533 +702,64 @@ interface PrimitiveLayoutProps {
|
|
|
246
702
|
type ResponsiveProps = PrimitiveDisplayProps & PrimitiveLayoutProps;
|
|
247
703
|
type ResponsiveStackProps = Omit<ResponsiveProps, 'display' | 'flexDirection'>;
|
|
248
704
|
|
|
249
|
-
declare
|
|
250
|
-
declare function TextOverflowEllipsisInner({ className, ...rest }: ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
|
|
705
|
+
declare const getLiteralScreenSize: (screenSize: ScreenSize) => Breakpoint;
|
|
251
706
|
|
|
707
|
+
type StylelessButtonProps<TProps extends object = object> = TProps & ComponentPropsWithRef<'button'>;
|
|
252
708
|
/**
|
|
253
|
-
*
|
|
254
|
-
*
|
|
709
|
+
* Normalisert `<button>` uten styling. Base for custom buttom styling.
|
|
710
|
+
*
|
|
711
|
+
* @component
|
|
712
|
+
* @template T ekstra props ved behov.
|
|
713
|
+
* @param {Object & T} props - Standard HTML-attributter for komponenten med mulig utvidelse.
|
|
714
|
+
*
|
|
715
|
+
* @returns {JSX.Element} `<button>`-element uten styling.
|
|
716
|
+
|
|
717
|
+
* @example
|
|
718
|
+
* ```tsx
|
|
719
|
+
* <StylelessButton className="min-styling">
|
|
720
|
+
* Tekst
|
|
721
|
+
* </StylelessButton>
|
|
722
|
+
* ```
|
|
255
723
|
*/
|
|
256
|
-
declare const
|
|
257
|
-
declare const TEXT_COLORS_CAMEL: readonly ["textOnAction", "textOnInverse", "textOnStatusDefault", "textOnStatusStrong", "textActionResting", "textActionHover", "textActionVisited", "textDefault", "textRequiredfield", "textSubtle", "textMedium", "textOnNotification", "iconOnAction", "iconOnInfoDefault", "iconOnSuccessDefault", "iconOnDangerDefault", "iconOnWarningDefault", "iconOnInfoStrong", "iconOnSuccessStrong", "iconOnDangerStrong", "iconOnWarningStrong", "iconOnInverse", "iconActionResting", "iconActionHover", "iconDefault", "iconSubtle", "iconMedium"];
|
|
258
|
-
type DDSTextColor = (typeof TEXT_COLORS)[number];
|
|
259
|
-
type DDSTextColorCamel = (typeof TEXT_COLORS_CAMEL)[number];
|
|
260
|
-
type TextColor = DDSTextColor | DDSTextColorCamel | Property.Color;
|
|
724
|
+
declare const StylelessButton: ({ className, ...rest }: StylelessButtonProps) => react_jsx_runtime.JSX.Element;
|
|
261
725
|
|
|
262
|
-
type
|
|
263
|
-
type TypographyHeadingType = 'headingXxsmall' | 'headingXsmall' | 'headingSmall' | 'headingMedium' | 'headingLarge' | 'headingXlarge' | 'headingXxlarge';
|
|
264
|
-
type TypographyLeadType = 'leadMedium';
|
|
265
|
-
type TypographyAnchorType = 'a';
|
|
266
|
-
type TypographyLabelType = 'labelMedium';
|
|
267
|
-
type OtherTypographyType = TypographyHeadingType | TypographyBodyType | TypographyLeadType;
|
|
268
|
-
type TypographyType = TypographyAnchorType | TypographyLabelType | OtherTypographyType;
|
|
269
|
-
type StaticTypographyType = OtherTypographyType | TypographyLabelType;
|
|
270
|
-
type HyphenTypographyType = 'body-xsmall' | 'body-small' | 'body-medium' | 'body-large' | 'heading-xxsmall' | 'heading-xsmall' | 'heading-small' | 'heading-medium' | 'heading-large' | 'heading-xlarge' | 'heading-xxlarge' | 'lead-medium' | 'a' | 'label-medium';
|
|
271
|
-
type InlineElement = 'a' | 'abbr' | 'audio' | 'b' | 'bdi' | 'bdo' | 'big' | 'br' | 'button' | 'canvas' | 'cite' | 'code' | 'data' | 'datalist' | 'del' | 'dfn' | 'em' | 'embed' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'map' | 'mark' | 'meter' | 'noscript' | 'object' | 'output' | 'picture' | 'progress' | 'q' | 'ruby' | 's' | 'samp' | 'script' | 'select' | 'slot' | 'small' | 'span' | 'strong' | 'sub' | 'sup' | 'svg' | 'template' | 'textarea' | 'time' | 'u' | 'var' | 'video' | 'wbr';
|
|
272
|
-
interface BaseTypographyProps {
|
|
273
|
-
/**Tekstfarge fra utvalget eller custom. **OBS!** Bruk farger fra `@dds-design-tokens` med navn i kebab-case, f.eks. `text-subtle`. */
|
|
274
|
-
color?: TextColor;
|
|
275
|
-
/**Spesifiserer om tekstelementet skal ha spacing definert i Elsa.
|
|
276
|
-
* Brukes hovedsakelig i artikler og lignende.
|
|
277
|
-
* **OBS!** har forskjellig virkning på ulike typografityper.
|
|
278
|
-
* `body` og `lead`-typer får margin på bunnen, `heading`-typer får margin på bunnen og padding på toppen mens label får margin topp og bunn.
|
|
279
|
-
* */
|
|
280
|
-
withMargins?: boolean;
|
|
281
|
-
/**HTML style. */
|
|
282
|
-
style?: CSSProperties;
|
|
283
|
-
}
|
|
284
|
-
type TypographyComponentProps = BaseTypographyProps & {
|
|
285
|
-
/**Setter `bold` styling. */
|
|
286
|
-
bold?: boolean;
|
|
287
|
-
/**Setter `italic` styling. */
|
|
288
|
-
italic?: boolean;
|
|
289
|
-
/**Setter en linje under. */
|
|
290
|
-
underline?: boolean;
|
|
291
|
-
/**HTML tag som skal brukes istedenfor default definert via `typographyType`. */
|
|
292
|
-
as?: ElementType;
|
|
293
|
-
};
|
|
294
|
-
|
|
295
|
-
type AnchorTypographyProps = BaseComponentProps<HTMLAnchorElement, {
|
|
296
|
-
/**nativ `href`-prop ved `typographyType='a'`. */
|
|
297
|
-
href?: string | undefined;
|
|
298
|
-
/** Spesifiserer om lenka er ekstern ved `typographyType='a'` eller `as='a'`.*/
|
|
299
|
-
externalLink?: boolean;
|
|
300
|
-
/**nativ `target`-prop ved `typographyType='a'`. */
|
|
301
|
-
target?: string;
|
|
302
|
-
}, AnchorHTMLAttributes<HTMLAnchorElement>>;
|
|
303
|
-
type LabelTypographyProps = BaseComponentProps<HTMLLabelElement, HTMLAttributes<HTMLLabelElement>>;
|
|
304
|
-
type OtherTypographyProps = BaseComponentProps<HTMLElement, HTMLAttributes<HTMLElement>>;
|
|
305
|
-
type TypographyProps = ({
|
|
306
|
-
/**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under. */
|
|
307
|
-
typographyType?: TypographyAnchorType;
|
|
308
|
-
} & TypographyComponentProps & Omit<AnchorTypographyProps, 'color'>) | ({
|
|
309
|
-
/**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under. */
|
|
310
|
-
typographyType?: TypographyLabelType;
|
|
311
|
-
} & TypographyComponentProps & Omit<LabelTypographyProps, 'color'>) | ({
|
|
312
|
-
/**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under. */
|
|
313
|
-
typographyType?: OtherTypographyType;
|
|
314
|
-
} & TypographyComponentProps & Omit<OtherTypographyProps, 'color'>);
|
|
315
|
-
declare const Typography: {
|
|
316
|
-
(props: TypographyProps): react_jsx_runtime.JSX.Element;
|
|
317
|
-
displayName: string;
|
|
318
|
-
};
|
|
319
|
-
|
|
320
|
-
/**
|
|
321
|
-
* Join class names together.
|
|
322
|
-
* Will filter out all falsy values.
|
|
323
|
-
*/
|
|
324
|
-
declare function cn(...classNames: Array<unknown>): string;
|
|
325
|
-
|
|
326
|
-
type SvgProps = {
|
|
327
|
-
title?: string;
|
|
328
|
-
} & SVGAttributes<SVGSVGElement>;
|
|
329
|
-
type SvgIcon = (props: SvgProps) => JSX.Element;
|
|
330
|
-
|
|
331
|
-
declare function SvgWrapper({ height, width, fill, className, title, children, ...props }: SvgProps): react_jsx_runtime.JSX.Element;
|
|
332
|
-
|
|
333
|
-
type IconSize = 'small' | 'medium' | 'large' | 'inherit';
|
|
334
|
-
type IconProps = BaseComponentProps<SVGSVGElement, {
|
|
335
|
-
/**Ikonet importert fra `@norges-domstoler/dds-components`. */
|
|
336
|
-
icon: SvgIcon;
|
|
337
|
-
/**Størrelsen på ikonet.
|
|
338
|
-
* @default "medium"
|
|
339
|
-
*/
|
|
340
|
-
iconSize?: IconSize;
|
|
341
|
-
/**Fargen på ikonet.
|
|
342
|
-
* @default "currentcolor"
|
|
343
|
-
*/
|
|
344
|
-
color?: TextColor;
|
|
345
|
-
}>;
|
|
346
|
-
declare function Icon(props: IconProps): react.JSX.Element;
|
|
347
|
-
declare namespace Icon {
|
|
348
|
-
var displayName: string;
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
declare const defaultTypographyType: TypographyBodyType;
|
|
352
|
-
declare const defaultTypographyTypeClassName: HyphenTypographyType;
|
|
353
|
-
declare const getElementType: (element: TypographyType) => ElementType;
|
|
354
|
-
declare const isHeading: (type: TypographyType) => type is TypographyHeadingType;
|
|
355
|
-
declare const isLegend: (as: ElementType) => boolean;
|
|
356
|
-
declare const isCaption: (as: ElementType) => boolean;
|
|
357
|
-
declare const inlineElements: Array<ElementType>;
|
|
358
|
-
declare const isInlineElement: (as: ElementType) => as is InlineElement;
|
|
359
|
-
declare function getTypographyCn(value: TypographyType): HyphenTypographyType;
|
|
360
|
-
declare const getColorCn: (color?: TextColor) => string | null;
|
|
361
|
-
|
|
362
|
-
type CaptionProps = BaseComponentPropsWithChildren<HTMLTableCaptionElement, BaseTypographyProps, Omit<ComponentProps<'caption'>, 'color'>>;
|
|
363
|
-
declare const Caption: {
|
|
364
|
-
({ id, className, htmlProps, children, ...rest }: CaptionProps): react_jsx_runtime.JSX.Element;
|
|
365
|
-
displayName: string;
|
|
366
|
-
};
|
|
367
|
-
|
|
368
|
-
type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
369
|
-
type HeadingProps = BaseComponentPropsWithChildren<HTMLHeadingElement, {
|
|
370
|
-
/**Nivå på overskriften. Komponenten returnerer HTML heading element med dette nivået med default styling. */
|
|
371
|
-
level: HeadingLevel;
|
|
372
|
-
/**Spesifiserer typografistil basert på utvalget for HTML heading elementer. */
|
|
373
|
-
typographyType?: TypographyHeadingType;
|
|
374
|
-
} & BaseTypographyProps, Omit<HTMLAttributes<HTMLHeadingElement>, 'color'>>;
|
|
375
|
-
declare const Heading: {
|
|
376
|
-
({ id, className, htmlProps, children, typographyType, level, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
|
|
377
|
-
displayName: string;
|
|
378
|
-
};
|
|
379
|
-
|
|
380
|
-
type PickedHTMLAttributes$4 = Pick<LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'>;
|
|
381
|
-
interface BaseLabelProps {
|
|
382
|
-
/** Om input knyttet til ledeteksten er påkrevd; påvirker styling. */
|
|
383
|
-
showRequiredStyling?: boolean;
|
|
384
|
-
/** Om input knyttet til ledeteksten er `read-only`; påvirker styling. */
|
|
385
|
-
readOnly?: boolean;
|
|
386
|
-
}
|
|
387
|
-
type LabelProps = BaseComponentPropsWithChildren<HTMLLabelElement, BaseLabelProps & BaseTypographyProps & PickedHTMLAttributes$4, Omit<LabelHTMLAttributes<HTMLLabelElement>, keyof PickedHTMLAttributes$4 | 'color'>>;
|
|
388
|
-
declare const Label: {
|
|
389
|
-
({ showRequiredStyling, readOnly, id, className, htmlProps, children, ...rest }: LabelProps): react_jsx_runtime.JSX.Element;
|
|
390
|
-
displayName: string;
|
|
391
|
-
};
|
|
392
|
-
|
|
393
|
-
type LegendProps = BaseComponentPropsWithChildren<HTMLLegendElement, BaseTypographyProps & {
|
|
394
|
-
/**Typografistil basert på utvalget for HTML heading elementer. */
|
|
395
|
-
typographyType?: TypographyHeadingType;
|
|
396
|
-
}, Omit<HTMLAttributes<HTMLLegendElement>, 'color'>>;
|
|
397
|
-
declare const Legend: {
|
|
398
|
-
({ id, className, htmlProps, typographyType, ...rest }: LegendProps): react_jsx_runtime.JSX.Element;
|
|
399
|
-
displayName: string;
|
|
400
|
-
};
|
|
401
|
-
|
|
402
|
-
type PickedHTMLAttributes$3 = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'href' | 'target'>;
|
|
403
|
-
type LinkProps = BaseComponentPropsWithChildren<HTMLAnchorElement, {
|
|
404
|
-
/**Spesifiserer om lenken fører til et eksternt nettsted eller åpnes i nytt vindu. Påvirker styling og setter `target` prop. */
|
|
405
|
-
external?: boolean;
|
|
406
|
-
/**Om lenken kan få `:visited`-styling. */
|
|
407
|
-
withVisited?: boolean;
|
|
408
|
-
/**Spesifiserer typografistil basert på utvalget for brødtekst. Arver hvis ikke oppgitt. */
|
|
409
|
-
typographyType?: TypographyBodyType;
|
|
410
|
-
} & BaseTypographyProps & PickedHTMLAttributes$3, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof PickedHTMLAttributes$3 | 'color'>>;
|
|
411
|
-
declare const Link: {
|
|
412
|
-
({ id, className, htmlProps, children, typographyType, withMargins, withVisited, external, target, style, color, ...rest }: LinkProps): react_jsx_runtime.JSX.Element;
|
|
413
|
-
displayName: string;
|
|
414
|
-
};
|
|
415
|
-
|
|
416
|
-
type ParagraphProps = BaseComponentPropsWithChildren<HTMLParagraphElement, {
|
|
417
|
-
/**Spesifiserer typografistil basert på utvalget for brødtekst og ingress. */
|
|
418
|
-
typographyType?: TypographyBodyType | TypographyLeadType;
|
|
419
|
-
} & BaseTypographyProps, Omit<HTMLAttributes<HTMLParagraphElement>, 'color'>>;
|
|
420
|
-
declare const Paragraph: {
|
|
421
|
-
({ id, className, htmlProps, children, typographyType, ...rest }: ParagraphProps): react_jsx_runtime.JSX.Element;
|
|
422
|
-
displayName: string;
|
|
423
|
-
};
|
|
424
|
-
|
|
425
|
-
interface CommonInputProps {
|
|
426
|
-
/**Ledetekst. */
|
|
427
|
-
label?: string;
|
|
428
|
-
/**Bredde for inputfeltet. */
|
|
429
|
-
width?: ResponsiveProps['width'];
|
|
430
|
-
/**Hjelpetekst. */
|
|
431
|
-
tip?: string;
|
|
432
|
-
/**Feilmelding. Setter også error state. */
|
|
433
|
-
errorMessage?: string;
|
|
434
|
-
}
|
|
435
|
-
type InputSize = Extract<Size, 'medium' | 'small' | 'xsmall'>;
|
|
436
|
-
type InputProps = CommonInputProps & {
|
|
437
|
-
/**Størrelse på inputfeltet.
|
|
438
|
-
* @default "medium"
|
|
439
|
-
*/
|
|
440
|
-
componentSize?: InputSize;
|
|
441
|
-
} & Omit<ComponentPropsWithRef<'input'>, 'width'>;
|
|
442
|
-
type StatefulInputProps = {
|
|
443
|
-
hasErrorMessage: boolean;
|
|
444
|
-
} & Omit<InputProps, keyof CommonInputProps>;
|
|
445
|
-
type InputTypographyTypes = Record<InputSize, StaticTypographyType>;
|
|
446
|
-
|
|
447
|
-
declare const Input: {
|
|
448
|
-
({ className, ...rest }: ComponentPropsWithRef<"input">): react_jsx_runtime.JSX.Element;
|
|
449
|
-
displayName: string;
|
|
450
|
-
};
|
|
451
|
-
declare const StatefulInput: {
|
|
452
|
-
({ className, componentSize, hasErrorMessage, ...rest }: StatefulInputProps): react_jsx_runtime.JSX.Element;
|
|
453
|
-
displayName: string;
|
|
454
|
-
};
|
|
455
|
-
|
|
456
|
-
type BoxProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, ResponsiveProps>;
|
|
457
|
-
declare const Box: {
|
|
458
|
-
<T extends ElementType = "div">({ id, className, style, padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, height, maxHeight, minHeight, width, maxWidth, minWidth, position, left, right, bottom, top, overflow, overflowX, overflowY, display, textAlign, flexDirection, gap, columnGap, rowGap, alignItems, alignContent, justifyItems, justifyContent, flexWrap, flexBasis, flexFlow, htmlProps, ...rest }: BoxProps<T>): react_jsx_runtime.JSX.Element;
|
|
459
|
-
displayName: string;
|
|
460
|
-
};
|
|
461
|
-
|
|
462
|
-
type GridProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, Omit<{
|
|
463
|
-
/** CSS `grid-template-columns`. Støtter standardverdier per brekkpunkt eller samme for alle skjermstørrelser.
|
|
464
|
-
* @default {
|
|
465
|
-
xs: 'repeat(var(--dds-grid-xs-count), minmax(0, 1fr))',
|
|
466
|
-
sm: 'repeat(var(--dds-grid-sm-count), minmax(0, 1fr))',
|
|
467
|
-
md: 'repeat(var(--dds-grid-md-count), minmax(0, 1fr))',
|
|
468
|
-
lg: 'repeat(var(--dds-grid-lg-count), minmax(0, 1fr))',
|
|
469
|
-
xl: 'repeat(var(--dds-grid-xl-count), minmax(0, 1fr))',
|
|
470
|
-
}
|
|
471
|
-
*/
|
|
472
|
-
gridTemplateColumns?: ResponsiveProp<Property.GridTemplateColumns>;
|
|
473
|
-
} & ResponsiveProps, 'display'>>;
|
|
474
|
-
declare const Grid: {
|
|
475
|
-
<T extends ElementType = "div">({ id, className, htmlProps, gridTemplateColumns, columnGap, rowGap, marginInline, style, ...rest }: GridProps<T>): react_jsx_runtime.JSX.Element;
|
|
476
|
-
displayName: string;
|
|
477
|
-
};
|
|
478
|
-
|
|
479
|
-
type RelativeColumnsOccupied = 'all' | 'firstHalf' | 'secondHalf';
|
|
480
|
-
type ColumnsOccupied = ResponsiveProp<StandardProperties['gridColumn'] | RelativeColumnsOccupied>;
|
|
481
|
-
type GridChildProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, {
|
|
482
|
-
/**Hvilke kolonner innholdet skal okkupere. Støtter standardverdier for CSS `grid-column` og relative verider `'all'`, `'firstHalf'` eller `'secondHalf'`, per brekkpunkt eller samme for alle skjermstørrelser. */
|
|
483
|
-
columnsOccupied?: ColumnsOccupied;
|
|
484
|
-
/**CSS `justify-self`. Støtter verdi per brekkpunkt eller samme for alle skjermstørrelser. */
|
|
485
|
-
justifySelf?: ResponsiveProp<Property.JustifySelf>;
|
|
486
|
-
/**CSS `grid-row`. Støtter verdi per brekkpunkt eller samme for alle skjermstørrelser. */
|
|
487
|
-
gridRow?: ResponsiveProp<Property.GridRow>;
|
|
488
|
-
} & Omit<ResponsiveProps, 'display'>>;
|
|
489
|
-
declare const GridChild: {
|
|
490
|
-
<T extends ElementType = "div">({ id, className, htmlProps, style, gridRow, justifySelf, columnsOccupied, ...rest }: GridChildProps<T>): react_jsx_runtime.JSX.Element;
|
|
491
|
-
displayName: string;
|
|
492
|
-
};
|
|
493
|
-
|
|
494
|
-
type PaperElevation = Elevation;
|
|
495
|
-
type PaperBorder = BorderColor;
|
|
496
|
-
type PaperBorderRadius = BorderRadius;
|
|
497
|
-
type PickedAttributes$1<T extends ElementType = 'div'> = Pick<ComponentProps<T>, 'tabIndex' | 'role'>;
|
|
498
|
-
type PaperProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, {
|
|
499
|
-
/**I hvor stor grad flaten skal framheves. Støtter dds tokens. */
|
|
500
|
-
elevation?: PaperElevation;
|
|
501
|
-
/**Farge på kantlinje. Støtter dds tokens. */
|
|
502
|
-
border?: PaperBorder;
|
|
503
|
-
/**Hvor runde hjørner skal være. Støtter dds tokens. */
|
|
504
|
-
borderRadius?: PaperBorderRadius;
|
|
505
|
-
/**Bakgrunn. Støtter dds tokens. */
|
|
506
|
-
background?: PaperBackground;
|
|
507
|
-
} & ResponsiveProps & PickedAttributes$1, Omit<ComponentProps<T>, keyof PickedAttributes$1>>;
|
|
508
|
-
declare const Paper: <T extends ElementType = "div">({ id, elevation, border, borderRadius, background, className, htmlProps, style, ...rest }: PaperProps<T>) => react_jsx_runtime.JSX.Element;
|
|
509
|
-
|
|
510
|
-
type ShowHideProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, PrimitiveDisplayProps>;
|
|
511
|
-
declare const ShowHide: {
|
|
512
|
-
<T extends ElementType = "div">({ hideBelow, showBelow, className, htmlProps, id, ...rest }: ShowHideProps<T>): react_jsx_runtime.JSX.Element;
|
|
513
|
-
displayName: string;
|
|
514
|
-
};
|
|
515
|
-
|
|
516
|
-
type VStackProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, ResponsiveStackProps>;
|
|
517
|
-
declare const VStack: {
|
|
518
|
-
<T extends ElementType = "div">({ id, className, htmlProps, ...rest }: VStackProps<T>): react_jsx_runtime.JSX.Element;
|
|
519
|
-
displayName: string;
|
|
520
|
-
};
|
|
521
|
-
|
|
522
|
-
type HStackProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, ResponsiveStackProps>;
|
|
523
|
-
declare const HStack: {
|
|
524
|
-
<T extends ElementType = "div">({ id, className, htmlProps, ...rest }: HStackProps<T>): react_jsx_runtime.JSX.Element;
|
|
525
|
-
displayName: string;
|
|
526
|
-
};
|
|
527
|
-
|
|
528
|
-
declare function getDefaultText(value?: string | number | ReadonlyArray<string>, defaultValue?: string | number | ReadonlyArray<string>): string;
|
|
529
|
-
declare function getInputWidth(width?: ResponsiveProps['width'], defaultW?: ResponsiveProps['width'] | false | null): ResponsiveProps['width'];
|
|
530
|
-
|
|
531
|
-
/**
|
|
532
|
-
* Kombinerer refs for et element.
|
|
533
|
-
* Eksempel på bruk:
|
|
534
|
-
* ```
|
|
535
|
-
* const MyComponent = ({ref, ...props}) => {
|
|
536
|
-
*
|
|
537
|
-
* const itemRef = useRef<HTMLDivElement>(null);
|
|
538
|
-
* const combinedRef = useCombinedRef(ref, itemRef);
|
|
539
|
-
*
|
|
540
|
-
* return <div ref={combinedRef} {...props}>innhold</div>
|
|
541
|
-
* });
|
|
542
|
-
* ```
|
|
543
|
-
* @param refs array med refs.
|
|
544
|
-
* @template T elementet som refereres til.
|
|
545
|
-
* @returns callback med kombinerte refs.
|
|
546
|
-
*
|
|
547
|
-
* {@link useCombinedRef}
|
|
548
|
-
*/
|
|
549
|
-
declare function useCombinedRef<T>(...refs: Array<Ref<T> | undefined>): RefCallback<T>;
|
|
550
|
-
|
|
551
|
-
type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
|
|
552
|
-
interface UseFloatPositionOptions {
|
|
553
|
-
/**
|
|
554
|
-
* Whether to update the position of the floating element on every animation frame if required.
|
|
555
|
-
* This is optimized for performance but can still be costly.
|
|
556
|
-
* @default true
|
|
557
|
-
*/
|
|
558
|
-
animationFrame?: boolean;
|
|
559
|
-
/**
|
|
560
|
-
* `offset` is used to displace the floating element from its core placement.
|
|
561
|
-
* The value passed is logical, meaning its effect on the
|
|
562
|
-
* physical result is dependent on the writing direction (e.g. RTL).
|
|
563
|
-
* @default 8
|
|
564
|
-
*/
|
|
565
|
-
offset?: number;
|
|
566
|
-
/**
|
|
567
|
-
* Where to place the floating element relative to its reference element.
|
|
568
|
-
* @default 'bottom'
|
|
569
|
-
*/
|
|
570
|
-
placement?: Placement;
|
|
571
|
-
}
|
|
572
|
-
interface FloatingStyles {
|
|
573
|
-
position: Strategy;
|
|
574
|
-
top: number;
|
|
575
|
-
left: number;
|
|
576
|
-
}
|
|
577
|
-
interface UseFloatPosition {
|
|
578
|
-
refs: UseFloatingReturn['refs'];
|
|
579
|
-
styles: {
|
|
580
|
-
floating: FloatingStyles;
|
|
581
|
-
arrow: {
|
|
582
|
-
[x: string]: string | number;
|
|
583
|
-
position: Strategy;
|
|
584
|
-
top: string | number;
|
|
585
|
-
left: string | number;
|
|
586
|
-
transform: string;
|
|
587
|
-
} | undefined;
|
|
588
|
-
};
|
|
589
|
-
}
|
|
590
|
-
declare const useFloatPosition: (arrowRef: HTMLElement | null, options?: UseFloatPositionOptions) => UseFloatPosition;
|
|
591
|
-
|
|
592
|
-
/**
|
|
593
|
-
* Fanger fokus i en loop inni et element. Typisk bruk:
|
|
594
|
-
* ```
|
|
595
|
-
* const MyComponent = (props) => {
|
|
596
|
-
*
|
|
597
|
-
* const componentRef = useFocusTrap<HTMLDivElement>(props.isOpen);
|
|
598
|
-
*
|
|
599
|
-
* return props.isOpen ? <div ref={componentRef}><button>click</button></div> : null;
|
|
600
|
-
*
|
|
601
|
-
* }
|
|
602
|
-
* ```
|
|
603
|
-
* @param active om focus skal fanges, f.eks. når en modal åpnes.
|
|
604
|
-
* @param initialFocusRef Ref som skal motta focus når focus trap er aktiv.
|
|
605
|
-
* @returns ref til elementet som fanger fokus.
|
|
606
|
-
*/
|
|
607
|
-
declare function useFocusTrap<T extends HTMLElement>(active: boolean, initialFocusRef?: RefObject<HTMLElement | null> | undefined): RefObject<T | null>;
|
|
608
|
-
|
|
609
|
-
declare const useIsMounted: () => () => boolean;
|
|
610
|
-
|
|
611
|
-
/**
|
|
612
|
-
* Tillater effekter og animasjoner å bli gjennomført like etter et element blir lagt til eller like før det blir fjernet fra DOM.
|
|
613
|
-
* Typisk bruk:
|
|
614
|
-
* ```
|
|
615
|
-
* // CSS
|
|
616
|
-
* .component {
|
|
617
|
-
* transition: opacity 0.2s;
|
|
618
|
-
* opacity: 0;
|
|
619
|
-
* }
|
|
620
|
-
*
|
|
621
|
-
* .transitionedIn.mounted {
|
|
622
|
-
* opacity: 1;
|
|
623
|
-
* }
|
|
624
|
-
*
|
|
625
|
-
* const MyComponent = (props) => {
|
|
626
|
-
*
|
|
627
|
-
* const hasTransitionedIn = useMountTransition(props.isMounted, 500);
|
|
628
|
-
*
|
|
629
|
-
* return props.isMounted || hasTransitionedIn ? (
|
|
630
|
-
* <div
|
|
631
|
-
* className={`component ${hasTransitionedIn && 'transitionedIn'} ${props.isMounted && 'mounted'}`}
|
|
632
|
-
* >
|
|
633
|
-
* innhold
|
|
634
|
-
* </div>)
|
|
635
|
-
* : null;
|
|
636
|
-
*
|
|
637
|
-
* }
|
|
638
|
-
* ```
|
|
639
|
-
* @param isMounted om elementet er mounted.
|
|
640
|
-
* @param unmountDelay hvor lenge transition skal vare før unmount.
|
|
641
|
-
* @returns om transition er ferdig.
|
|
642
|
-
*/
|
|
643
|
-
declare const useMountTransition: (isMounted: boolean, unmountDelay: number) => boolean;
|
|
644
|
-
|
|
645
|
-
/**
|
|
646
|
-
* Kjører logikk når brukeren klikker utenfor et element, f.eks at elementet fjernes fra DOM.
|
|
647
|
-
* Typisk bruk:
|
|
648
|
-
* ```
|
|
649
|
-
* const [isOpen, setOpen] = useState(true);
|
|
650
|
-
* const ref = useRef<HTMLElement>(null);
|
|
651
|
-
* useOnClickOutside(ref.current, () => setOpen(false));
|
|
652
|
-
*
|
|
653
|
-
* return <div ref={ref}>innhold</div>
|
|
654
|
-
* ```
|
|
655
|
-
* @param element HTML elementet man klikker utenfor.
|
|
656
|
-
* @param handler funksjonen som kjøres ved klikk utenfor.
|
|
657
|
-
*/
|
|
658
|
-
declare function useOnClickOutside(element: HTMLElement | null | undefined | Array<HTMLElement | null | undefined>, handler: (event: MouseEvent | TouchEvent) => void): void;
|
|
659
|
-
|
|
660
|
-
/**
|
|
661
|
-
* Kjører logikk når en spesifisert tast blir trykt ned.
|
|
662
|
-
* Typisk bruk:
|
|
663
|
-
* ```
|
|
664
|
-
* const [isOpen, setOpen] = useState(true);
|
|
665
|
-
* const ref = useRef<HTMLElement>(null);
|
|
666
|
-
* useOnKeyDown(['Escape', 'Esc'], () => setOpen(false));
|
|
667
|
-
*
|
|
668
|
-
* return isOpen ? <div>innhold</div> : null;
|
|
669
|
-
* ```
|
|
670
|
-
* @param key tasten som trykkes.
|
|
671
|
-
* @param handler funksjonen som skal kjøres.
|
|
672
|
-
*/
|
|
673
|
-
declare const useOnKeyDown: (key: string | Array<string>, handler: (event: KeyboardEvent) => void) => void;
|
|
674
|
-
|
|
675
|
-
/**
|
|
676
|
-
* Returnerer fokus til et element når første eller siste barn i en container mister fokus ved tastaturnavigasjon. Typisk bruk:
|
|
677
|
-
* ```
|
|
678
|
-
* const MyComponent = (props) => {
|
|
679
|
-
*
|
|
680
|
-
* const [isOpen, setOpen] = useState(true);
|
|
681
|
-
* const close = () => setOpen(false);
|
|
682
|
-
* const triggerRef = useRef<HTMLButtonElement>(null);
|
|
683
|
-
* const containerRef = useReturnFocusOnBlur<HTMLDivElement>(
|
|
684
|
-
* isOpen,
|
|
685
|
-
* triggerRef.current,
|
|
686
|
-
* () => close()
|
|
687
|
-
* );
|
|
688
|
-
*
|
|
689
|
-
* return (
|
|
690
|
-
* <div>
|
|
691
|
-
* <button ref={triggerRef} >Åpne popover</button>
|
|
692
|
-
* <div ref={containerRef}>
|
|
693
|
-
* <button>gjør noe</button>
|
|
694
|
-
* </div>
|
|
695
|
-
* </div>
|
|
696
|
-
* )
|
|
697
|
-
* }
|
|
698
|
-
* ```
|
|
699
|
-
* @param active om container skal få fokus, f.eks. når en modal åpnes.
|
|
700
|
-
* @param triggerElement elementet som skal få fokus når fokus forlater container.
|
|
701
|
-
* @param onBlur ekstra logikk når fokus forlater container.
|
|
702
|
-
* @returns ref til container som får fokus.
|
|
703
|
-
*/
|
|
704
|
-
declare function useReturnFocusOnBlur<T extends HTMLElement>(active: boolean, onBlur: () => void, triggerElement?: HTMLElement | null): RefObject<T | null>;
|
|
705
|
-
|
|
706
|
-
declare const isKeyboardEvent: (e: Event | KeyboardEvent$1<Element>) => e is KeyboardEvent$1<Element>;
|
|
726
|
+
type StylelessListProps<TProps extends object = object> = TProps & ComponentPropsWithRef<'ul'>;
|
|
707
727
|
/**
|
|
708
|
-
*
|
|
709
|
-
* ```
|
|
710
|
-
* import elements from './elements';
|
|
711
|
-
* import RoveItem from './RoveItem';
|
|
728
|
+
* Normalisert `<ul>` uten styling. Base for custom ul styling.
|
|
712
729
|
*
|
|
713
|
-
*
|
|
714
|
-
*
|
|
730
|
+
* @component
|
|
731
|
+
* @template T ekstra props ved behov.
|
|
732
|
+
* @param {Object & T} props - Standard HTML-attributter for komponenten med mulig utvidelse.
|
|
715
733
|
*
|
|
716
|
-
*
|
|
717
|
-
|
|
718
|
-
*
|
|
719
|
-
*
|
|
720
|
-
*
|
|
721
|
-
* </li>
|
|
722
|
-
*
|
|
723
|
-
* </
|
|
724
|
-
* }
|
|
734
|
+
* @returns {JSX.Element} `<ul>`-element uten styling.
|
|
735
|
+
|
|
736
|
+
* @example
|
|
737
|
+
* ```tsx
|
|
738
|
+
* <StylelessList className="min-styling">
|
|
739
|
+
* <li>item</li>
|
|
740
|
+
* <li>item</li>
|
|
741
|
+
* </StylelessList>
|
|
725
742
|
* ```
|
|
726
|
-
* @param size antall elementer i gruppen.
|
|
727
|
-
* @param active om fokus skal kontrolleres av hooken. Når status blir inaktiv vil fokusrekkefølge nullstilles.
|
|
728
|
-
* @param direction retning elementene blas i.
|
|
729
|
-
* @param noWrap om indeksen skal 'wrappe' rundt til 0 hvis den går over size - 1, eller til size - 1 hvis den går under 0.
|
|
730
|
-
* @returns hook par: indeksen til fokuserte elemenentet og funksjonen som håndterer fokus.
|
|
731
743
|
*/
|
|
732
|
-
declare
|
|
733
|
-
|
|
734
|
-
declare enum ScreenSize {
|
|
735
|
-
XSmall = 0,
|
|
736
|
-
Small = 1,
|
|
737
|
-
Medium = 2,
|
|
738
|
-
Large = 3,
|
|
739
|
-
XLarge = 4
|
|
740
|
-
}
|
|
744
|
+
declare const StylelessList: ({ className, ...rest }: StylelessListProps) => react_jsx_runtime.JSX.Element;
|
|
745
|
+
type StylelessOListProps<TProps extends object = object> = TProps & ComponentPropsWithRef<'ol'>;
|
|
741
746
|
/**
|
|
742
|
-
*
|
|
743
|
-
* ```
|
|
744
|
-
* const MyComponent = () => {
|
|
745
|
-
* const screenSize = useScreenSize();
|
|
746
|
-
* const isSmallScreen = screenSize === ScreenSize.Small;
|
|
747
|
+
* Normalisert `<ol>` uten styling. Base for custom ol styling.
|
|
747
748
|
*
|
|
748
|
-
*
|
|
749
|
-
*
|
|
750
|
-
*
|
|
751
|
-
* @returns den aktuelle skjermstørrelsen basert på {@link ScreenSize}.
|
|
752
|
-
*/
|
|
753
|
-
declare const useScreenSize: () => ScreenSize;
|
|
754
|
-
|
|
755
|
-
/**
|
|
756
|
-
* Kjører logikk når vindusstørrelsen endrer seg.
|
|
757
|
-
* Typisk bruk:
|
|
758
|
-
* ```
|
|
759
|
-
* const [width, setWidth] = useState<number>(window.innerWidth);
|
|
760
|
-
* useResize(() => setWidth(window.innerWidth));
|
|
749
|
+
* @component
|
|
750
|
+
* @template T ekstra props ved behov.
|
|
751
|
+
* @param {Object & T} props - Standard HTML-attributter for komponenten med mulig utvidelse.
|
|
761
752
|
*
|
|
762
|
-
*
|
|
753
|
+
* @returns {JSX.Element} `<ol>`-element uten styling.
|
|
754
|
+
|
|
755
|
+
* @example
|
|
756
|
+
* ```tsx
|
|
757
|
+
* <StylelessOList className="min-styling">
|
|
758
|
+
* <li>item</li>
|
|
759
|
+
* <li>item</li>
|
|
760
|
+
* </StylelessOList>
|
|
763
761
|
* ```
|
|
764
|
-
* @param handler funksjonen som skal kjøres.
|
|
765
762
|
*/
|
|
766
|
-
declare const useWindowResize: (handler: () => void) => void;
|
|
767
|
-
|
|
768
|
-
declare const getLiteralScreenSize: (screenSize: ScreenSize) => Breakpoint;
|
|
769
|
-
|
|
770
|
-
type StylelessButtonProps<TProps extends object = object> = TProps & ComponentPropsWithRef<'button'>;
|
|
771
|
-
declare const StylelessButton: ({ className, ...rest }: StylelessButtonProps) => react_jsx_runtime.JSX.Element;
|
|
772
|
-
|
|
773
|
-
type StylelessListProps<TProps extends object = object> = TProps & ComponentPropsWithRef<'ul'>;
|
|
774
|
-
declare const StylelessList: ({ className, ...rest }: StylelessListProps) => react_jsx_runtime.JSX.Element;
|
|
775
|
-
type StylelessOListProps<TProps extends object = object> = TProps & ComponentPropsWithRef<'ol'>;
|
|
776
763
|
declare const StylelessOList: ({ className, ...rest }: StylelessOListProps) => react_jsx_runtime.JSX.Element;
|
|
777
764
|
|
|
778
765
|
/**
|
|
@@ -818,29 +805,108 @@ declare const hideInput: {
|
|
|
818
805
|
width: string;
|
|
819
806
|
margin: number;
|
|
820
807
|
};
|
|
821
|
-
declare const inheritLinkStyling: {
|
|
822
|
-
color: string;
|
|
823
|
-
textDecoration: string;
|
|
808
|
+
declare const inheritLinkStyling: {
|
|
809
|
+
color: string;
|
|
810
|
+
textDecoration: string;
|
|
811
|
+
};
|
|
812
|
+
declare const removeButtonStyling: {
|
|
813
|
+
background: string;
|
|
814
|
+
color: string;
|
|
815
|
+
border: string;
|
|
816
|
+
padding: number;
|
|
817
|
+
font: string;
|
|
818
|
+
cursor: string;
|
|
819
|
+
outline: string;
|
|
820
|
+
};
|
|
821
|
+
declare const removeListStyling: {
|
|
822
|
+
listStyle: string;
|
|
823
|
+
padding: number;
|
|
824
|
+
margin: number;
|
|
825
|
+
};
|
|
826
|
+
declare const normalizeButton: {
|
|
827
|
+
margin: number;
|
|
828
|
+
textTransform: Property.TextTransform;
|
|
829
|
+
};
|
|
830
|
+
|
|
831
|
+
type BoxProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, ResponsiveProps>;
|
|
832
|
+
declare const Box: {
|
|
833
|
+
<T extends ElementType = "div">({ id, className, style, padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, height, maxHeight, minHeight, width, maxWidth, minWidth, position, left, right, bottom, top, overflow, overflowX, overflowY, display, textAlign, flexDirection, gap, columnGap, rowGap, alignItems, alignContent, justifyItems, justifyContent, flexWrap, flexBasis, flexFlow, htmlProps, ...rest }: BoxProps<T>): react_jsx_runtime.JSX.Element;
|
|
834
|
+
displayName: string;
|
|
835
|
+
};
|
|
836
|
+
|
|
837
|
+
type GridProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, Omit<{
|
|
838
|
+
/** CSS `grid-template-columns`. Støtter standardverdier per brekkpunkt eller samme for alle skjermstørrelser.
|
|
839
|
+
* @default {
|
|
840
|
+
xs: 'repeat(var(--dds-grid-xs-count), minmax(0, 1fr))',
|
|
841
|
+
sm: 'repeat(var(--dds-grid-sm-count), minmax(0, 1fr))',
|
|
842
|
+
md: 'repeat(var(--dds-grid-md-count), minmax(0, 1fr))',
|
|
843
|
+
lg: 'repeat(var(--dds-grid-lg-count), minmax(0, 1fr))',
|
|
844
|
+
xl: 'repeat(var(--dds-grid-xl-count), minmax(0, 1fr))',
|
|
845
|
+
}
|
|
846
|
+
*/
|
|
847
|
+
gridTemplateColumns?: ResponsiveProp<Property.GridTemplateColumns>;
|
|
848
|
+
} & ResponsiveProps, 'display'>>;
|
|
849
|
+
declare const Grid: {
|
|
850
|
+
<T extends ElementType = "div">({ id, className, htmlProps, gridTemplateColumns, columnGap, rowGap, marginInline, style, ...rest }: GridProps<T>): react_jsx_runtime.JSX.Element;
|
|
851
|
+
displayName: string;
|
|
852
|
+
};
|
|
853
|
+
|
|
854
|
+
type RelativeColumnsOccupied = 'all' | 'firstHalf' | 'secondHalf';
|
|
855
|
+
type ColumnsOccupied = ResponsiveProp<StandardProperties['gridColumn'] | RelativeColumnsOccupied>;
|
|
856
|
+
type GridChildProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, {
|
|
857
|
+
/**Hvilke kolonner innholdet skal okkupere. Støtter standardverdier for CSS `grid-column` og relative verider `'all'`, `'firstHalf'` eller `'secondHalf'`, per brekkpunkt eller samme for alle skjermstørrelser. */
|
|
858
|
+
columnsOccupied?: ColumnsOccupied;
|
|
859
|
+
/**CSS `justify-self`. Støtter verdi per brekkpunkt eller samme for alle skjermstørrelser. */
|
|
860
|
+
justifySelf?: ResponsiveProp<Property.JustifySelf>;
|
|
861
|
+
/**CSS `grid-row`. Støtter verdi per brekkpunkt eller samme for alle skjermstørrelser. */
|
|
862
|
+
gridRow?: ResponsiveProp<Property.GridRow>;
|
|
863
|
+
} & Omit<ResponsiveProps, 'display'>>;
|
|
864
|
+
declare const GridChild: {
|
|
865
|
+
<T extends ElementType = "div">({ id, className, htmlProps, style, gridRow, justifySelf, columnsOccupied, ...rest }: GridChildProps<T>): react_jsx_runtime.JSX.Element;
|
|
866
|
+
displayName: string;
|
|
824
867
|
};
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
868
|
+
|
|
869
|
+
type PaperElevation = Elevation;
|
|
870
|
+
type PaperBorder = BorderColor;
|
|
871
|
+
type PaperBorderRadius = BorderRadius;
|
|
872
|
+
type PickedAttributes$1<T extends ElementType = 'div'> = Pick<ComponentProps<T>, 'tabIndex' | 'role'>;
|
|
873
|
+
type PaperProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, {
|
|
874
|
+
/**I hvor stor grad flaten skal framheves. Støtter dds tokens. */
|
|
875
|
+
elevation?: PaperElevation;
|
|
876
|
+
/**Farge på kantlinje. Støtter dds tokens. */
|
|
877
|
+
border?: PaperBorder;
|
|
878
|
+
/**Hvor runde hjørner skal være. Støtter dds tokens. */
|
|
879
|
+
borderRadius?: PaperBorderRadius;
|
|
880
|
+
/**Bakgrunn. Støtter dds tokens. */
|
|
881
|
+
background?: PaperBackground;
|
|
882
|
+
} & ResponsiveProps & PickedAttributes$1, Omit<ComponentProps<T>, keyof PickedAttributes$1>>;
|
|
883
|
+
declare const Paper: <T extends ElementType = "div">({ id, elevation, border, borderRadius, background, className, htmlProps, style, ...rest }: PaperProps<T>) => react_jsx_runtime.JSX.Element;
|
|
884
|
+
|
|
885
|
+
type ShowHideProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, PrimitiveDisplayProps>;
|
|
886
|
+
declare const ShowHide: {
|
|
887
|
+
<T extends ElementType = "div">({ hideBelow, showBelow, className, htmlProps, id, ...rest }: ShowHideProps<T>): react_jsx_runtime.JSX.Element;
|
|
888
|
+
displayName: string;
|
|
833
889
|
};
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
890
|
+
|
|
891
|
+
type VStackProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, ResponsiveStackProps>;
|
|
892
|
+
declare const VStack: {
|
|
893
|
+
<T extends ElementType = "div">({ id, className, htmlProps, ...rest }: VStackProps<T>): react_jsx_runtime.JSX.Element;
|
|
894
|
+
displayName: string;
|
|
838
895
|
};
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
896
|
+
|
|
897
|
+
type HStackProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, ResponsiveStackProps>;
|
|
898
|
+
declare const HStack: {
|
|
899
|
+
<T extends ElementType = "div">({ id, className, htmlProps, ...rest }: HStackProps<T>): react_jsx_runtime.JSX.Element;
|
|
900
|
+
displayName: string;
|
|
842
901
|
};
|
|
843
902
|
|
|
903
|
+
type SvgProps = {
|
|
904
|
+
title?: string;
|
|
905
|
+
} & SVGAttributes<SVGSVGElement>;
|
|
906
|
+
type SvgIcon = (props: SvgProps) => JSX.Element;
|
|
907
|
+
|
|
908
|
+
declare function SvgWrapper({ height, width, fill, className, title, children, ...props }: SvgProps): react_jsx_runtime.JSX.Element;
|
|
909
|
+
|
|
844
910
|
declare function AddressShieldedIcon(props: SvgProps): react_jsx_runtime.JSX.Element;
|
|
845
911
|
|
|
846
912
|
declare function AgreementIcon(props: SvgProps): react_jsx_runtime.JSX.Element;
|
|
@@ -1322,6 +1388,12 @@ declare namespace index {
|
|
|
1322
1388
|
export { index_AddressShieldedIcon as AddressShieldedIcon, index_AgreementIcon as AgreementIcon, index_AppsIcon as AppsIcon, index_ArchiveIcon as ArchiveIcon, index_ArrowDownIcon as ArrowDownIcon, index_ArrowLeftIcon as ArrowLeftIcon, index_ArrowRightIcon as ArrowRightIcon, index_ArrowUpIcon as ArrowUpIcon, index_AttachmentIcon as AttachmentIcon, index_BarChartBoxedIcon as BarChartBoxedIcon, index_BarChartIcon as BarChartIcon, index_BlockIcon as BlockIcon, index_BookIcon as BookIcon, index_BuildCircledIcon as BuildCircledIcon, index_BuildIcon as BuildIcon, index_CalendarIcon as CalendarIcon, index_CalendarMonthIcon as CalendarMonthIcon, index_CalendarViewDayIcon as CalendarViewDayIcon, index_CalendarViewMonthIcon as CalendarViewMonthIcon, index_CalendarViewWeekIcon as CalendarViewWeekIcon, index_CallIcon as CallIcon, index_CaringIcon as CaringIcon, index_ChatIcon as ChatIcon, index_CheckCircledIcon as CheckCircledIcon, index_CheckIcon as CheckIcon, index_ChecklistIcon as ChecklistIcon, index_ChevronDownIcon as ChevronDownIcon, index_ChevronFirstIcon as ChevronFirstIcon, index_ChevronLargeLeftIcon as ChevronLargeLeftIcon, index_ChevronLargeRightIcon as ChevronLargeRightIcon, index_ChevronLastIcon as ChevronLastIcon, index_ChevronLeftIcon as ChevronLeftIcon, index_ChevronRightIcon as ChevronRightIcon, index_ChevronUpIcon as ChevronUpIcon, index_CloseCircledIcon as CloseCircledIcon, index_CloseIcon as CloseIcon, index_CloseSmallIcon as CloseSmallIcon, index_CloudIcon as CloudIcon, index_CollapseIcon as CollapseIcon, index_CommentIcon as CommentIcon, index_CopyIcon as CopyIcon, index_CourtIcon as CourtIcon, index_DateRangeIcon as DateRangeIcon, index_DeathsIcon as DeathsIcon, index_DoubleChevronLeftIcon as DoubleChevronLeftIcon, index_DoubleChevronRightIcon as DoubleChevronRightIcon, index_DownloadDoneIcon as DownloadDoneIcon, index_DownloadIcon as DownloadIcon, index_DragHandleIcon as DragHandleIcon, index_EditIcon as EditIcon, index_ErrorIcon as ErrorIcon, index_ExclaimIcon as ExclaimIcon, index_ExpandIcon as ExpandIcon, index_FacebookIcon as FacebookIcon, index_FamilyIcon as FamilyIcon, index_FeedbackIcon as FeedbackIcon, index_FileAddIcon as FileAddIcon, index_FileIcon as FileIcon, index_FileShieldedIcon as FileShieldedIcon, index_FileTextIcon as FileTextIcon, index_FilterIcon as FilterIcon, index_FilterListIcon as FilterListIcon, index_FilterListOffIcon as FilterListOffIcon, index_FilterOffIcon as FilterOffIcon, index_FindInPageIcon as FindInPageIcon, index_FlickrIcon as FlickrIcon, index_FolderAddIcon as FolderAddIcon, index_FolderIcon as FolderIcon, index_FolderShieldedIcon as FolderShieldedIcon, index_FullscreenExitIcon as FullscreenExitIcon, index_FullscreenIcon as FullscreenIcon, index_GavelIcon as GavelIcon, index_GuardianIcon as GuardianIcon, index_HelpFilledIcon as HelpFilledIcon, index_HelpIcon as HelpIcon, index_HelpSimpleIcon as HelpSimpleIcon, index_HomeIcon as HomeIcon, index_HourglassBottomIcon as HourglassBottomIcon, index_HourglassDisabledIcon as HourglassDisabledIcon, index_HourglassEmptyIcon as HourglassEmptyIcon, index_HourglassFullIcon as HourglassFullIcon, index_HourglassTopIcon as HourglassTopIcon, index_ImageIcon as ImageIcon, index_InfoIcon as InfoIcon, index_InstagramIcon as InstagramIcon, index_JordskifterettIcon as JordskifterettIcon, index_JordskiftesakIcon as JordskiftesakIcon, index_KeyIcon as KeyIcon, index_LagmannsrettIcon as LagmannsrettIcon, index_LanguageIcon as LanguageIcon, index_LibraryAddIcon as LibraryAddIcon, index_LineChartIcon as LineChartIcon, index_LinkIcon as LinkIcon, index_LinkOffIcon as LinkOffIcon, index_LinkedInIcon as LinkedInIcon, index_ListAltIcon as ListAltIcon, index_ListIcon as ListIcon, index_LocationIcon as LocationIcon, index_LockIcon as LockIcon, index_LockOpenIcon as LockOpenIcon, index_LoginIcon as LoginIcon, index_LogoutIcon as LogoutIcon, index_MailIcon as MailIcon, index_MailOpenIcon as MailOpenIcon, index_MenuIcon as MenuIcon, index_MinusCirledIcon as MinusCirledIcon, index_MinusIcon as MinusIcon, index_MoreHorizontalIcon as MoreHorizontalIcon, index_MoreVerticalIcon as MoreVerticalIcon, index_NotarialIcon as NotarialIcon, index_NotificationsIcon as NotificationsIcon, index_NotificationsOffIcon as NotificationsOffIcon, index_OnlineMeetingIcon as OnlineMeetingIcon, index_OpenExternalIcon as OpenExternalIcon, index_PayoutIcon as PayoutIcon, index_PdfIcon as PdfIcon, index_PersonAddIcon as PersonAddIcon, index_PersonIcon as PersonIcon, index_PersonShieldedIcon as PersonShieldedIcon, index_PinIcon as PinIcon, index_PlusCircledIcon as PlusCircledIcon, index_PlusIcon as PlusIcon, index_PowerOfAttorneyIcon as PowerOfAttorneyIcon, index_PrintIcon as PrintIcon, index_PropertyIcon as PropertyIcon, index_PublishIcon as PublishIcon, index_QuestionAnswerIcon as QuestionAnswerIcon, index_ReceiptIcon as ReceiptIcon, index_RedoIcon as RedoIcon, index_RefreshIcon as RefreshIcon, index_ReplayIcon as ReplayIcon, index_SearchIcon as SearchIcon, index_SettingsIcon as SettingsIcon, index_SmsIcon as SmsIcon, index_StarFilledIcon as StarFilledIcon, index_StarHalfFilled as StarHalfFilled, index_StarIcon as StarIcon, index_SyncIcon as SyncIcon, index_ThumbDownFilledIcon as ThumbDownFilledIcon, index_ThumbDownIcon as ThumbDownIcon, index_ThumbUpFilledIcon as ThumbUpFilledIcon, index_ThumbUpIcon as ThumbUpIcon, index_TimeIcon as TimeIcon, index_TingrettIcon as TingrettIcon, index_TipIcon as TipIcon, index_TrashIcon as TrashIcon, index_TrendingDownIcon as TrendingDownIcon, index_TrendingUpIcon as TrendingUpIcon, index_UndoIcon as UndoIcon, index_UnfoldLessIcon as UnfoldLessIcon, index_UnfoldMoreIcon as UnfoldMoreIcon, index_UploadIcon as UploadIcon, index_VisibilityOffIcon as VisibilityOffIcon, index_VisibilityOnIcon as VisibilityOnIcon, index_WarningIcon as WarningIcon, index_WebexIcon as WebexIcon, index_XIcon as XIcon, index_ZoomInIcon as ZoomInIcon, index_ZoomOutIcon as ZoomOutIcon };
|
|
1323
1389
|
}
|
|
1324
1390
|
|
|
1391
|
+
/**
|
|
1392
|
+
* Join class names together.
|
|
1393
|
+
* Will filter out all falsy values.
|
|
1394
|
+
*/
|
|
1395
|
+
declare function cn(...classNames: Array<unknown>): string;
|
|
1396
|
+
|
|
1325
1397
|
type DdsTheme = keyof typeof ddsTokens;
|
|
1326
1398
|
interface ThemeContextProps {
|
|
1327
1399
|
theme: DdsTheme;
|
|
@@ -2165,6 +2237,187 @@ declare const Accordion: {
|
|
|
2165
2237
|
displayName: string;
|
|
2166
2238
|
};
|
|
2167
2239
|
|
|
2240
|
+
declare function TextOverflowEllipsisWrapper({ className, ...rest }: ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
|
|
2241
|
+
declare function TextOverflowEllipsisInner({ className, ...rest }: ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
|
|
2242
|
+
|
|
2243
|
+
/**
|
|
2244
|
+
* Tekstfarger i kebab-case; camelCase blir deprecated, og kebab-case blir standarden for props som refererer til CSS-variabler.
|
|
2245
|
+
* TODO: fjerne cameCase på et tidspunkt.
|
|
2246
|
+
*/
|
|
2247
|
+
declare const TEXT_COLORS: readonly ["text-on-action", "text-on-inverse", "text-on-status-default", "text-on-status-strong", "text-action-resting", "text-action-hover", "text-action-visited", "text-default", "text-requiredfield", "text-subtle", "text-medium", "text-on-notification", "icon-on-action", "icon-on-info-default", "icon-on-success-default", "icon-on-danger-default", "icon-on-warning-default", "icon-on-info-strong", "icon-on-success-strong", "icon-on-danger-strong", "icon-on-warning-strong", "icon-on-inverse", "icon-action-resting", "icon-action-hover", "icon-default", "icon-subtle", "icon-medium"];
|
|
2248
|
+
declare const TEXT_COLORS_CAMEL: readonly ["textOnAction", "textOnInverse", "textOnStatusDefault", "textOnStatusStrong", "textActionResting", "textActionHover", "textActionVisited", "textDefault", "textRequiredfield", "textSubtle", "textMedium", "textOnNotification", "iconOnAction", "iconOnInfoDefault", "iconOnSuccessDefault", "iconOnDangerDefault", "iconOnWarningDefault", "iconOnInfoStrong", "iconOnSuccessStrong", "iconOnDangerStrong", "iconOnWarningStrong", "iconOnInverse", "iconActionResting", "iconActionHover", "iconDefault", "iconSubtle", "iconMedium"];
|
|
2249
|
+
type DDSTextColor = (typeof TEXT_COLORS)[number];
|
|
2250
|
+
type DDSTextColorCamel = (typeof TEXT_COLORS_CAMEL)[number];
|
|
2251
|
+
type TextColor = DDSTextColor | DDSTextColorCamel | Property.Color;
|
|
2252
|
+
|
|
2253
|
+
type TypographyBodyType = 'bodyXsmall' | 'bodySmall' | 'bodyMedium' | 'bodyLarge';
|
|
2254
|
+
type TypographyHeadingType = 'headingXxsmall' | 'headingXsmall' | 'headingSmall' | 'headingMedium' | 'headingLarge' | 'headingXlarge' | 'headingXxlarge';
|
|
2255
|
+
type TypographyLeadType = 'leadMedium';
|
|
2256
|
+
type TypographyAnchorType = 'a';
|
|
2257
|
+
type TypographyLabelType = 'labelMedium';
|
|
2258
|
+
type OtherTypographyType = TypographyHeadingType | TypographyBodyType | TypographyLeadType;
|
|
2259
|
+
type TypographyType = TypographyAnchorType | TypographyLabelType | OtherTypographyType;
|
|
2260
|
+
type StaticTypographyType = OtherTypographyType | TypographyLabelType;
|
|
2261
|
+
type HyphenTypographyType = 'body-xsmall' | 'body-small' | 'body-medium' | 'body-large' | 'heading-xxsmall' | 'heading-xsmall' | 'heading-small' | 'heading-medium' | 'heading-large' | 'heading-xlarge' | 'heading-xxlarge' | 'lead-medium' | 'a' | 'label-medium';
|
|
2262
|
+
type InlineElement = 'a' | 'abbr' | 'audio' | 'b' | 'bdi' | 'bdo' | 'big' | 'br' | 'button' | 'canvas' | 'cite' | 'code' | 'data' | 'datalist' | 'del' | 'dfn' | 'em' | 'embed' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'map' | 'mark' | 'meter' | 'noscript' | 'object' | 'output' | 'picture' | 'progress' | 'q' | 'ruby' | 's' | 'samp' | 'script' | 'select' | 'slot' | 'small' | 'span' | 'strong' | 'sub' | 'sup' | 'svg' | 'template' | 'textarea' | 'time' | 'u' | 'var' | 'video' | 'wbr';
|
|
2263
|
+
interface BaseTypographyProps {
|
|
2264
|
+
/**Tekstfarge fra utvalget eller custom. **OBS!** Bruk farger fra `@dds-design-tokens` med navn i kebab-case, f.eks. `text-subtle`. */
|
|
2265
|
+
color?: TextColor;
|
|
2266
|
+
/**Spesifiserer om tekstelementet skal ha spacing definert i Elsa.
|
|
2267
|
+
* Brukes hovedsakelig i artikler og lignende.
|
|
2268
|
+
* **OBS!** har forskjellig virkning på ulike typografityper.
|
|
2269
|
+
* `body` og `lead`-typer får margin på bunnen, `heading`-typer får margin på bunnen og padding på toppen mens label får margin topp og bunn.
|
|
2270
|
+
* */
|
|
2271
|
+
withMargins?: boolean;
|
|
2272
|
+
/**HTML style. */
|
|
2273
|
+
style?: CSSProperties;
|
|
2274
|
+
}
|
|
2275
|
+
type TypographyComponentProps = BaseTypographyProps & {
|
|
2276
|
+
/**Setter `bold` styling. */
|
|
2277
|
+
bold?: boolean;
|
|
2278
|
+
/**Setter `italic` styling. */
|
|
2279
|
+
italic?: boolean;
|
|
2280
|
+
/**Setter en linje under. */
|
|
2281
|
+
underline?: boolean;
|
|
2282
|
+
/**HTML tag som skal brukes istedenfor default definert via `typographyType`. */
|
|
2283
|
+
as?: ElementType;
|
|
2284
|
+
};
|
|
2285
|
+
|
|
2286
|
+
type AnchorTypographyProps = BaseComponentProps<HTMLAnchorElement, {
|
|
2287
|
+
/**nativ `href`-prop ved `typographyType='a'`. */
|
|
2288
|
+
href?: string | undefined;
|
|
2289
|
+
/** Spesifiserer om lenka er ekstern ved `typographyType='a'` eller `as='a'`.*/
|
|
2290
|
+
externalLink?: boolean;
|
|
2291
|
+
/**nativ `target`-prop ved `typographyType='a'`. */
|
|
2292
|
+
target?: string;
|
|
2293
|
+
}, AnchorHTMLAttributes<HTMLAnchorElement>>;
|
|
2294
|
+
type LabelTypographyProps = BaseComponentProps<HTMLLabelElement, HTMLAttributes<HTMLLabelElement>>;
|
|
2295
|
+
type OtherTypographyProps = BaseComponentProps<HTMLElement, HTMLAttributes<HTMLElement>>;
|
|
2296
|
+
type TypographyProps = ({
|
|
2297
|
+
/**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under. */
|
|
2298
|
+
typographyType?: TypographyAnchorType;
|
|
2299
|
+
} & TypographyComponentProps & Omit<AnchorTypographyProps, 'color'>) | ({
|
|
2300
|
+
/**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under. */
|
|
2301
|
+
typographyType?: TypographyLabelType;
|
|
2302
|
+
} & TypographyComponentProps & Omit<LabelTypographyProps, 'color'>) | ({
|
|
2303
|
+
/**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under. */
|
|
2304
|
+
typographyType?: OtherTypographyType;
|
|
2305
|
+
} & TypographyComponentProps & Omit<OtherTypographyProps, 'color'>);
|
|
2306
|
+
declare const Typography: {
|
|
2307
|
+
(props: TypographyProps): react_jsx_runtime.JSX.Element;
|
|
2308
|
+
displayName: string;
|
|
2309
|
+
};
|
|
2310
|
+
|
|
2311
|
+
interface CommonInputProps {
|
|
2312
|
+
/**Ledetekst. */
|
|
2313
|
+
label?: string;
|
|
2314
|
+
/**Bredde for inputfeltet. Kan settes per brekkpunkt, manglende brekkpunter får da default bredde. */
|
|
2315
|
+
width?: ResponsiveProps['width'];
|
|
2316
|
+
/**Hjelpetekst. */
|
|
2317
|
+
tip?: string;
|
|
2318
|
+
/**Feilmelding. Setter også error state. */
|
|
2319
|
+
errorMessage?: string;
|
|
2320
|
+
}
|
|
2321
|
+
type InputSize = Extract<Size, 'medium' | 'small' | 'xsmall'>;
|
|
2322
|
+
type InputProps = CommonInputProps & {
|
|
2323
|
+
/**Størrelse på inputfeltet.
|
|
2324
|
+
* @default "medium"
|
|
2325
|
+
*/
|
|
2326
|
+
componentSize?: InputSize;
|
|
2327
|
+
} & Omit<ComponentPropsWithRef<'input'>, 'width'>;
|
|
2328
|
+
|
|
2329
|
+
type IconSize = 'small' | 'medium' | 'large' | 'inherit';
|
|
2330
|
+
type IconProps = BaseComponentProps<SVGSVGElement, {
|
|
2331
|
+
/**Ikonet importert fra `@norges-domstoler/dds-components`. */
|
|
2332
|
+
icon: SvgIcon;
|
|
2333
|
+
/**Størrelsen på ikonet.
|
|
2334
|
+
* @default "medium"
|
|
2335
|
+
*/
|
|
2336
|
+
iconSize?: IconSize;
|
|
2337
|
+
/**Fargen på ikonet.
|
|
2338
|
+
* @default "currentcolor"
|
|
2339
|
+
*/
|
|
2340
|
+
color?: TextColor;
|
|
2341
|
+
}, Omit<HTMLAttributes<SVGSVGElement>, 'color'>>;
|
|
2342
|
+
declare function Icon(props: IconProps): react.JSX.Element;
|
|
2343
|
+
declare namespace Icon {
|
|
2344
|
+
var displayName: string;
|
|
2345
|
+
}
|
|
2346
|
+
|
|
2347
|
+
declare const defaultTypographyType: TypographyBodyType;
|
|
2348
|
+
declare const defaultTypographyTypeClassName: HyphenTypographyType;
|
|
2349
|
+
declare const getElementType: (element: TypographyType) => ElementType;
|
|
2350
|
+
declare const isHeading: (type: TypographyType) => type is TypographyHeadingType;
|
|
2351
|
+
declare const isLegend: (as: ElementType) => boolean;
|
|
2352
|
+
declare const isCaption: (as: ElementType) => boolean;
|
|
2353
|
+
declare const inlineElements: Array<ElementType>;
|
|
2354
|
+
declare const isInlineElement: (as: ElementType) => as is InlineElement;
|
|
2355
|
+
declare function getTypographyCn(value: TypographyType): HyphenTypographyType;
|
|
2356
|
+
declare const getColorCn: (color?: TextColor) => string | null;
|
|
2357
|
+
|
|
2358
|
+
type CaptionProps = BaseComponentPropsWithChildren<HTMLTableCaptionElement, BaseTypographyProps, Omit<ComponentProps<'caption'>, 'color'>>;
|
|
2359
|
+
declare const Caption: {
|
|
2360
|
+
({ id, className, htmlProps, children, ...rest }: CaptionProps): react_jsx_runtime.JSX.Element;
|
|
2361
|
+
displayName: string;
|
|
2362
|
+
};
|
|
2363
|
+
|
|
2364
|
+
type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
2365
|
+
type HeadingProps = BaseComponentPropsWithChildren<HTMLHeadingElement, {
|
|
2366
|
+
/**Nivå på overskriften. Komponenten returnerer HTML heading element med dette nivået med default styling. */
|
|
2367
|
+
level: HeadingLevel;
|
|
2368
|
+
/**Spesifiserer typografistil basert på utvalget for HTML heading elementer. */
|
|
2369
|
+
typographyType?: TypographyHeadingType;
|
|
2370
|
+
} & BaseTypographyProps, Omit<HTMLAttributes<HTMLHeadingElement>, 'color'>>;
|
|
2371
|
+
declare const Heading: {
|
|
2372
|
+
({ id, className, htmlProps, children, typographyType, level, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
|
|
2373
|
+
displayName: string;
|
|
2374
|
+
};
|
|
2375
|
+
|
|
2376
|
+
type PickedHTMLAttributes$4 = Pick<LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'>;
|
|
2377
|
+
interface BaseLabelProps {
|
|
2378
|
+
/** Om input knyttet til ledeteksten er påkrevd; påvirker styling. */
|
|
2379
|
+
showRequiredStyling?: boolean;
|
|
2380
|
+
/** Om input knyttet til ledeteksten er `read-only`; påvirker styling. */
|
|
2381
|
+
readOnly?: boolean;
|
|
2382
|
+
}
|
|
2383
|
+
type LabelProps = BaseComponentPropsWithChildren<HTMLLabelElement, BaseLabelProps & BaseTypographyProps & PickedHTMLAttributes$4, Omit<LabelHTMLAttributes<HTMLLabelElement>, keyof PickedHTMLAttributes$4 | 'color'>>;
|
|
2384
|
+
declare const Label: {
|
|
2385
|
+
({ showRequiredStyling, readOnly, id, className, htmlProps, children, ...rest }: LabelProps): react_jsx_runtime.JSX.Element;
|
|
2386
|
+
displayName: string;
|
|
2387
|
+
};
|
|
2388
|
+
|
|
2389
|
+
type LegendProps = BaseComponentPropsWithChildren<HTMLLegendElement, BaseTypographyProps & {
|
|
2390
|
+
/**Typografistil basert på utvalget for HTML heading elementer. */
|
|
2391
|
+
typographyType?: TypographyHeadingType;
|
|
2392
|
+
}, Omit<HTMLAttributes<HTMLLegendElement>, 'color'>>;
|
|
2393
|
+
declare const Legend: {
|
|
2394
|
+
({ id, className, htmlProps, typographyType, ...rest }: LegendProps): react_jsx_runtime.JSX.Element;
|
|
2395
|
+
displayName: string;
|
|
2396
|
+
};
|
|
2397
|
+
|
|
2398
|
+
type PickedHTMLAttributes$3 = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'href' | 'target'>;
|
|
2399
|
+
type LinkProps = BaseComponentPropsWithChildren<HTMLAnchorElement, {
|
|
2400
|
+
/**Spesifiserer om lenken fører til et eksternt nettsted eller åpnes i nytt vindu. Påvirker styling og setter `target` prop. */
|
|
2401
|
+
external?: boolean;
|
|
2402
|
+
/**Om lenken kan få `:visited`-styling. */
|
|
2403
|
+
withVisited?: boolean;
|
|
2404
|
+
/**Spesifiserer typografistil basert på utvalget for brødtekst. Arver hvis ikke oppgitt. */
|
|
2405
|
+
typographyType?: TypographyBodyType;
|
|
2406
|
+
} & BaseTypographyProps & PickedHTMLAttributes$3, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof PickedHTMLAttributes$3 | 'color'>>;
|
|
2407
|
+
declare const Link: {
|
|
2408
|
+
({ id, className, htmlProps, children, typographyType, withMargins, withVisited, external, target, style, color, ...rest }: LinkProps): react_jsx_runtime.JSX.Element;
|
|
2409
|
+
displayName: string;
|
|
2410
|
+
};
|
|
2411
|
+
|
|
2412
|
+
type ParagraphProps = BaseComponentPropsWithChildren<HTMLParagraphElement, {
|
|
2413
|
+
/**Spesifiserer typografistil basert på utvalget for brødtekst og ingress. */
|
|
2414
|
+
typographyType?: TypographyBodyType | TypographyLeadType;
|
|
2415
|
+
} & BaseTypographyProps, Omit<HTMLAttributes<HTMLParagraphElement>, 'color'>>;
|
|
2416
|
+
declare const Paragraph: {
|
|
2417
|
+
({ id, className, htmlProps, children, typographyType, ...rest }: ParagraphProps): react_jsx_runtime.JSX.Element;
|
|
2418
|
+
displayName: string;
|
|
2419
|
+
};
|
|
2420
|
+
|
|
2168
2421
|
type AccordionHeaderProps = Omit<BaseComponentPropsWithChildren<HTMLButtonElement, {
|
|
2169
2422
|
/**Overskriver default teksttype. */
|
|
2170
2423
|
typographyType?: StaticTypographyType;
|
|
@@ -3486,7 +3739,7 @@ interface SelectOption<TValue = unknown> {
|
|
|
3486
3739
|
label: string | number;
|
|
3487
3740
|
value: TValue;
|
|
3488
3741
|
}
|
|
3489
|
-
type WrappedReactSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = WithRequiredIf<Option extends SelectOption ? false : true, Props
|
|
3742
|
+
type WrappedReactSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = WithRequiredIf<Option extends SelectOption ? false : true, Props<Option, IsMulti, Group>, 'getOptionLabel' | 'getOptionValue'>;
|
|
3490
3743
|
type SelectProps<Option = unknown, IsMulti extends boolean = false> = {
|
|
3491
3744
|
/**Ledetekst for nedtrekkslisten. */
|
|
3492
3745
|
label?: string;
|
|
@@ -3521,8 +3774,11 @@ declare namespace Select {
|
|
|
3521
3774
|
var displayName: string;
|
|
3522
3775
|
}
|
|
3523
3776
|
|
|
3524
|
-
type NativeSelectProps =
|
|
3525
|
-
|
|
3777
|
+
type NativeSelectProps = {
|
|
3778
|
+
/**Om verdien til `<select>` kan tømmes. */
|
|
3779
|
+
clearable?: boolean;
|
|
3780
|
+
} & CommonInputProps & Pick<InputProps, 'componentSize' | 'readOnly'> & ComponentPropsWithRef<'select'>;
|
|
3781
|
+
declare const NativeSelect: ({ ref, id, children, componentSize, label, multiple, readOnly, errorMessage, tip, required, "aria-required": ariaRequired, "aria-describedby": ariaDescribedby, width, className, style, onKeyDown, onMouseDown, clearable, onChange, ...rest }: NativeSelectProps) => react_jsx_runtime.JSX.Element;
|
|
3526
3782
|
type NativeSelectPlaceholderProps = ComponentPropsWithRef<'option'>;
|
|
3527
3783
|
declare const NativeSelectPlaceholder: {
|
|
3528
3784
|
({ children, value, ...rest }: NativeSelectPlaceholderProps): react_jsx_runtime.JSX.Element;
|
|
@@ -3956,7 +4212,7 @@ type ToggleBarProps<T extends string | number> = BaseComponentPropsWithChildren<
|
|
|
3956
4212
|
label?: string;
|
|
3957
4213
|
/**Funksjonen for `onChange`-event for barna. */
|
|
3958
4214
|
onChange?: (event: ChangeEvent<HTMLInputElement>, value?: T) => void;
|
|
3959
|
-
/**Den valgte verdien i gruppen. Hvis satt ved innlastning blir en `<ToggleRadio
|
|
4215
|
+
/**Den valgte verdien i gruppen. Hvis satt ved innlastning blir en `<ToggleRadio>` forhåndsvalgt. */
|
|
3960
4216
|
value?: T;
|
|
3961
4217
|
/** Gir alle barna samme `name` prop.*/
|
|
3962
4218
|
name?: string;
|
|
@@ -4033,9 +4289,11 @@ type TooltipProps = BaseComponentProps<HTMLDivElement, {
|
|
|
4033
4289
|
delay?: number;
|
|
4034
4290
|
/**`id` for tooltip. */
|
|
4035
4291
|
tooltipId?: string;
|
|
4292
|
+
/**Om tooltip skal alltid være i DOM, eller bli rendret først når den skal vises. */
|
|
4293
|
+
keepMounted?: boolean;
|
|
4036
4294
|
} & PickedHTMLAttributes, Omit<HTMLAttributes<HTMLDivElement>, 'children' | keyof PickedHTMLAttributes>>;
|
|
4037
4295
|
declare const Tooltip: {
|
|
4038
|
-
({ text, placement, children, tooltipId, delay, style, onMouseLeave, onMouseOver, id, ref, className, htmlProps, ...rest }: TooltipProps): react_jsx_runtime.JSX.Element;
|
|
4296
|
+
({ text, placement, children, tooltipId, delay, style, onMouseLeave, onMouseOver, keepMounted, id, ref, className, htmlProps, ...rest }: TooltipProps): react_jsx_runtime.JSX.Element;
|
|
4039
4297
|
displayName: string;
|
|
4040
4298
|
};
|
|
4041
4299
|
|
|
@@ -4045,4 +4303,4 @@ declare const VisuallyHidden: {
|
|
|
4045
4303
|
displayName: string;
|
|
4046
4304
|
};
|
|
4047
4305
|
|
|
4048
|
-
export { Accordion, AccordionBody, type AccordionBodyProps, AccordionHeader, type AccordionHeaderProps, type AccordionProps, AddTabButton, type AddTabButtonProps, AddressShieldedIcon, AgreementIcon, AnimatedChevronUpDown, AppsIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AttachmentIcon, BORDER_COLORS, BORDER_RADII, BackLink, type BackLinkProps, Backdrop, BarChartBoxedIcon, BarChartIcon, type BaseComponentProps, type BaseComponentPropsWithChildren, type BaseItemProps, type BaseLabelProps, type BaseTypographyProps, BlockIcon, BookIcon, type BorderColor, type BorderRadius, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, type Breakpoint, BuildCircledIcon, BuildIcon, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonPurpose, type ButtonSize, Calendar, CalendarIcon, CalendarMonthIcon, type CalendarProps, CalendarViewDayIcon, CalendarViewMonthIcon, CalendarViewWeekIcon, CallIcon, type Callback, Caption, type CaptionProps, Card, CardExpandable, CardExpandableBody, type CardExpandableBodyProps, CardExpandableHeader, type CardExpandableHeaderProps, type CardExpandableProps, type CardProps, CardSelectable, CardSelectableGroup, type CardSelectableGroupProps, type CardSelectableProps, CaringIcon, CharCounter, ChatIcon, CheckCircledIcon, CheckIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxPickedHTMLAttributes, type CheckboxProps, ChecklistIcon, ChevronDownIcon, ChevronFirstIcon, ChevronLargeLeftIcon, ChevronLargeRightIcon, ChevronLastIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, ChipGroup, type ChipGroupProps, type ChipProps, CloseCircledIcon, CloseIcon, CloseSmallIcon, CloudIcon, CollapseIcon, CollapsibleTable, type CollapsibleTableProps, CollapsibleRow as CollapsibleTableRow, type ColumnsOccupied, CommentIcon, type CommonInputProps, Contrast, type ContrastProps, CookieBanner, CookieBannerCheckbox, type CookieBannerCheckboxProps, type CookieBannerProps, CopyIcon, CourtIcon, DatePicker, type DatePickerProps, DateRangeIcon, DdsProvider, type DdsProviderProps, type DdsTheme, DeathsIcon, DescriptionList, type DescriptionListAppearance, DescriptionListDesc, type DescriptionListDescProps, DescriptionListGroup, type DescriptionListGroupProps, type DescriptionListProps, DescriptionListTerm, type DescriptionListTermProps, DetailList, DetailListDesc, type DetailListDescProps, type DetailListProps, DetailListRow, type DetailListRowProps, type DetailListSize, DetailListTerm, type DetailListTermProps, type Direction$1 as Direction, Divider, type DividerColor, type DividerProps, DoubleChevronLeftIcon, DoubleChevronRightIcon, DownloadDoneIcon, DownloadIcon, DragHandleIcon, Drawer, DrawerGroup, type DrawerGroupProps, type DrawerPlacement, type DrawerProps, type DrawerSize, ELEVATIONS, EditIcon, ElementAs, type Elevation, EmptyContent, type EmptyContentProps, ErrorIcon, ExclaimIcon, ExpandIcon, type ExtractStrict, FacebookIcon, FamilyIcon, FavStar, type FavStarProps, Feedback, FeedbackIcon, type FeedbackProps, Fieldset, FieldsetGroup, type FieldsetGroupProps, type FieldsetProps, FileAddIcon, FileIcon, type FileList, FileShieldedIcon, FileTextIcon, FileUploader, type FileUploaderAccept, type FileUploaderProps, FilterIcon, FilterListIcon, FilterListOffIcon, FilterOffIcon, FindInPageIcon, FlickrIcon, type FloatingStyles, FolderAddIcon, FolderIcon, FolderShieldedIcon, Footer, FooterLeft, type FooterLeftProps, FooterList, FooterListGroup, type FooterListGroupProps, FooterListHeader, type FooterListHeaderProps, type FooterListProps, FooterLogo, type FooterLogoProps, type FooterProps, FooterSocialsGroup, type FooterSocialsGroupProps, FooterSocialsList, type FooterSocialsListProps, FullscreenExitIcon, FullscreenIcon, GavelIcon, GlobalMessage, type GlobalMessageProps, type GlobalMessagePurpose, Grid, GridChild, type GridChildProps, type GridProps, GuardianIcon, HStack, type HStackProps, Heading, type HeadingLevel, type HeadingProps, HelpFilledIcon, HelpIcon, HelpSimpleIcon, HiddenInput, HomeIcon, HourglassBottomIcon, HourglassDisabledIcon, HourglassEmptyIcon, HourglassFullIcon, HourglassTopIcon, type HyphenTypographyType, Icon, type IconPosition, type IconProps, type IconSize, ImageIcon, InfoIcon, InlineButton, type InlineButtonProps, InlineEditInput, type InlineEditInputProps, InlineEditSelect, type InlineEditSelectProps, InlineEditTextArea, type InlineEditTextAreaProps, type InlineElement, Input, InputMessage, type InputMessageProps, type InputMessageType, type InputProps, type InputSize, type InputTypographyTypes, InstagramIcon, InternalHeader, type InternalHeaderProps, JordskifterettIcon, JordskiftesakIcon, KeyIcon, Label, type LabelProps, LagmannsrettIcon, LanguageIcon, type Layout, Legend, type LegendProps, LibraryAddIcon, LineChartIcon, Link, LinkIcon, LinkOffIcon, type LinkProps, LinkedInIcon, List, ListAltIcon, ListIcon, ListItem, type ListItemProps, type ListProps, type ListType, type ListTypographyType, LocalMessage, type LocalMessageLayout, type LocalMessageProps, type LocalMessagePurpose, LocationIcon, LockIcon, LockOpenIcon, LoginIcon, LogoutIcon, MailIcon, MailOpenIcon, MenuIcon, MinusCirledIcon, MinusIcon, Modal, ModalActions, type ModalActionsProps, ModalBody, type ModalBodyProps, type ModalProps, MoreHorizontalIcon, MoreVerticalIcon, NativeSelect, NativeSelectPlaceholder, type NativeSelectPlaceholderProps, type NativeSelectProps, NotarialIcon, NotificationsIcon, NotificationsOffIcon, type Nullable, OnlineMeetingIcon, OpenExternalIcon, type OtherTypographyType, OverflowMenu, OverflowMenuButton, type OverflowMenuButtonProps, OverflowMenuDivider, OverflowMenuGroup, type OverflowMenuGroupProps, OverflowMenuLink, type OverflowMenuLinkProps, OverflowMenuList, OverflowMenuListHeader, type OverflowMenuListItemBaseProps, type OverflowMenuProps, OverflowMenuSpan, type OverflowMenuSpanProps, Pagination, type PaginationOption, type PaginationProps, Paper, type PaperBackground, type PaperBorder, type PaperBorderRadius, type PaperElevation, type PaperProps, Paragraph, type ParagraphProps, PayoutIcon, PdfIcon, PersonAddIcon, PersonIcon, PersonShieldedIcon, PhoneInput, type PhoneInputProps, type PhoneInputValue, PinIcon, type Placement, PlusCircledIcon, PlusIcon, type PolymorphicBaseComponentProps, type PolymorphicProps, Popover, PopoverGroup, type PopoverGroupProps, type PopoverProps, type PopoverSizeProps, PowerOfAttorneyIcon, PrintIcon, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressTracker, ProgressTrackerItem, type ProgressTrackerItemProps, type ProgressTrackerProps, PropertyIcon, PublishIcon, QuestionAnswerIcon, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonProps, type RadioValue, type Rating, ReceiptIcon, RedoIcon, RefreshIcon, ReplayIcon, type ResponsiveProps, type ResponsiveStackProps, ScreenSize, Search, SearchAutocompleteWrapper, type SearchAutocompleteWrapperProps, type SearchButtonProps, type SearchData, SearchIcon, type SearchProps, type SearchSize, SearchSuggestions, type SearchSuggestionsProps, Select, type SelectForwardRefType, type SelectOption, type SelectProps, SettingsIcon, ShowHide, type ShowHideProps, type Size, Skeleton, type SkeletonAppearance, type SkeletonProps, SkipToContent, type SkipToContentProps, SmsIcon, type SortOrder, type SpacingScale, Spinner, type SpinnerProps, SplitButton, type SplitButtonPrimaryActionProps, type SplitButtonProps, type SplitButtonPurpose, type SplitButtonSecondaryActionsProps, StarFilledIcon, StarHalfFilled, StarIcon, StatefulInput, type StatefulInputProps, type StaticTypographyType, StylelessButton, type StylelessButtonProps, StylelessList, type StylelessListProps, StylelessOList, type StylelessOListProps, type SvgIcon, type SvgProps, SvgWrapper, SyncIcon, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabProps, type TabSize, Table, Body as TableBody, type TableBodyProps, Cell as TableCell, type TableCellLayout, type TableCellProps, type TableCellType, Foot as TableFoot, type TableFootProps, Head as TableHead, type TableHeadProps, type TableProps, Row as TableRow, type TableRowProps, type TableRowType, type TableSize, SortCell as TableSortCell, type TableSortCellProps, TableWrapper, Tabs, type TabsProps, Tag, type TagAppearance, type TagProps, type TagPurpose, type TextAffixProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TextOverflowEllipsisInner, TextOverflowEllipsisWrapper, ThemeContext, ThemeProvider, type ThemeProviderProps, ThumbDownFilledIcon, ThumbDownIcon, ThumbUpFilledIcon, ThumbUpIcon, TimeIcon, TimePicker, type TimePickerProps, TingrettIcon, TipIcon, Toggle, ToggleBar, type ToggleBarProps, type ToggleBarSize, type ToggleBarValue, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, type ToggleProps, ToggleRadio, type ToggleRadioProps, type ToggleSize, Tooltip, type TooltipProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, Typography, type TypographyAnchorType, type TypographyBodyType, type TypographyComponentProps, type TypographyHeadingType, type TypographyLabelType, type TypographyLeadType, type TypographyProps, type TypographyType, UndoIcon, UnfoldLessIcon, UnfoldMoreIcon, UploadIcon, type UseFloatPositionOptions, VStack, type VStackProps, VisibilityOffIcon, VisibilityOnIcon, VisuallyHidden, type VisuallyHiddenProps, WarningIcon, WebexIcon, type WeightedSearchData, type WidthProps, type WithRequiredIf, XIcon, ZoomInIcon, ZoomOutIcon, calendarDateToNativeDate, cn, countryOptions, createSelectOptions, dateValueToNativeDate, defaultTypographyType, defaultTypographyTypeClassName, focusVisible, focusVisibleInset, focusVisibleTransitionValue, getBaseHTMLProps, getColorCn, getDefaultText, getElementType, getInputWidth, getLiteralScreenSize, getTypographyCn, handleElementWithBackdropMount, handleElementWithBackdropUnmount, hideInput, index as icons, inheritLinkStyling, inlineElements, isAnchorTypographyProps, isBorderColor, isBorderRadius, isCaption, isElevation, isHeading, isInlineElement, isKeyboardEvent, isLegend, isPaperBackground, nativeDateToCalendarDate, nativeDateToDateValue, nativeDateToTime, normalizeButton, outlineInset, outlineOffset, removeButtonStyling, removeListStyling, renderCharCounter, renderInputMessage, scrollbarStyling, typographyTypes, useCombinedRef, useFloatPosition, useFocusTrap, useIsMounted, useMountTransition, useOnClickOutside, useOnKeyDown, useReturnFocusOnBlur, useRoveFocus, useScreenSize, useTheme, useWindowResize, visibilityTransition };
|
|
4306
|
+
export { Accordion, AccordionBody, type AccordionBodyProps, AccordionHeader, type AccordionHeaderProps, type AccordionProps, AddTabButton, type AddTabButtonProps, AddressShieldedIcon, AgreementIcon, AnimatedChevronUpDown, AppsIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AttachmentIcon, BORDER_COLORS, BORDER_RADII, BackLink, type BackLinkProps, Backdrop, BarChartBoxedIcon, BarChartIcon, type BaseComponentProps, type BaseComponentPropsWithChildren, type BaseItemProps, type BaseLabelProps, type BaseTypographyProps, BlockIcon, BookIcon, type BorderColor, type BorderRadius, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, type Breakpoint, BuildCircledIcon, BuildIcon, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonPurpose, type ButtonSize, Calendar, CalendarIcon, CalendarMonthIcon, type CalendarProps, CalendarViewDayIcon, CalendarViewMonthIcon, CalendarViewWeekIcon, CallIcon, type Callback, Caption, type CaptionProps, Card, CardExpandable, CardExpandableBody, type CardExpandableBodyProps, CardExpandableHeader, type CardExpandableHeaderProps, type CardExpandableProps, type CardProps, CardSelectable, CardSelectableGroup, type CardSelectableGroupProps, type CardSelectableProps, CaringIcon, ChatIcon, CheckCircledIcon, CheckIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxPickedHTMLAttributes, type CheckboxProps, ChecklistIcon, ChevronDownIcon, ChevronFirstIcon, ChevronLargeLeftIcon, ChevronLargeRightIcon, ChevronLastIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, ChipGroup, type ChipGroupProps, type ChipProps, CloseCircledIcon, CloseIcon, CloseSmallIcon, CloudIcon, CollapseIcon, CollapsibleTable, type CollapsibleTableProps, CollapsibleRow as CollapsibleTableRow, type ColumnsOccupied, CommentIcon, Contrast, type ContrastProps, CookieBanner, CookieBannerCheckbox, type CookieBannerCheckboxProps, type CookieBannerProps, CopyIcon, CourtIcon, DatePicker, type DatePickerProps, DateRangeIcon, DdsProvider, type DdsProviderProps, type DdsTheme, DeathsIcon, DescriptionList, type DescriptionListAppearance, DescriptionListDesc, type DescriptionListDescProps, DescriptionListGroup, type DescriptionListGroupProps, type DescriptionListProps, DescriptionListTerm, type DescriptionListTermProps, DetailList, DetailListDesc, type DetailListDescProps, type DetailListProps, DetailListRow, type DetailListRowProps, type DetailListSize, DetailListTerm, type DetailListTermProps, type Direction$1 as Direction, Divider, type DividerColor, type DividerProps, DoubleChevronLeftIcon, DoubleChevronRightIcon, DownloadDoneIcon, DownloadIcon, DragHandleIcon, Drawer, DrawerGroup, type DrawerGroupProps, type DrawerPlacement, type DrawerProps, type DrawerSize, ELEVATIONS, EditIcon, ElementAs, type Elevation, EmptyContent, type EmptyContentProps, ErrorIcon, ExclaimIcon, ExpandIcon, type ExtractStrict, FacebookIcon, FamilyIcon, FavStar, type FavStarProps, Feedback, FeedbackIcon, type FeedbackProps, Fieldset, FieldsetGroup, type FieldsetGroupProps, type FieldsetProps, FileAddIcon, FileIcon, type FileList, FileShieldedIcon, FileTextIcon, FileUploader, type FileUploaderAccept, type FileUploaderProps, FilterIcon, FilterListIcon, FilterListOffIcon, FilterOffIcon, FindInPageIcon, FlickrIcon, type FloatingStyles, FolderAddIcon, FolderIcon, FolderShieldedIcon, Footer, FooterLeft, type FooterLeftProps, FooterList, FooterListGroup, type FooterListGroupProps, FooterListHeader, type FooterListHeaderProps, type FooterListProps, FooterLogo, type FooterLogoProps, type FooterProps, FooterSocialsGroup, type FooterSocialsGroupProps, FooterSocialsList, type FooterSocialsListProps, FullscreenExitIcon, FullscreenIcon, GavelIcon, GlobalMessage, type GlobalMessageProps, type GlobalMessagePurpose, Grid, GridChild, type GridChildProps, type GridProps, GuardianIcon, HStack, type HStackProps, Heading, type HeadingLevel, type HeadingProps, HelpFilledIcon, HelpIcon, HelpSimpleIcon, HiddenInput, HomeIcon, HourglassBottomIcon, HourglassDisabledIcon, HourglassEmptyIcon, HourglassFullIcon, HourglassTopIcon, type HyphenTypographyType, Icon, type IconPosition, type IconProps, type IconSize, ImageIcon, InfoIcon, InlineButton, type InlineButtonProps, InlineEditInput, type InlineEditInputProps, InlineEditSelect, type InlineEditSelectProps, InlineEditTextArea, type InlineEditTextAreaProps, type InlineElement, InputMessage, type InputMessageProps, type InputMessageType, InstagramIcon, InternalHeader, type InternalHeaderProps, JordskifterettIcon, JordskiftesakIcon, KeyIcon, Label, type LabelProps, LagmannsrettIcon, LanguageIcon, type Layout, Legend, type LegendProps, LibraryAddIcon, LineChartIcon, Link, LinkIcon, LinkOffIcon, type LinkProps, LinkedInIcon, List, ListAltIcon, ListIcon, ListItem, type ListItemProps, type ListProps, type ListType, type ListTypographyType, LocalMessage, type LocalMessageLayout, type LocalMessageProps, type LocalMessagePurpose, LocationIcon, LockIcon, LockOpenIcon, LoginIcon, LogoutIcon, MailIcon, MailOpenIcon, MenuIcon, MinusCirledIcon, MinusIcon, Modal, ModalActions, type ModalActionsProps, ModalBody, type ModalBodyProps, type ModalProps, MoreHorizontalIcon, MoreVerticalIcon, NativeSelect, NativeSelectPlaceholder, type NativeSelectPlaceholderProps, type NativeSelectProps, NotarialIcon, NotificationsIcon, NotificationsOffIcon, type Nullable, OnlineMeetingIcon, OpenExternalIcon, type OtherTypographyType, OverflowMenu, OverflowMenuButton, type OverflowMenuButtonProps, OverflowMenuDivider, OverflowMenuGroup, type OverflowMenuGroupProps, OverflowMenuLink, type OverflowMenuLinkProps, OverflowMenuList, OverflowMenuListHeader, type OverflowMenuListItemBaseProps, type OverflowMenuProps, OverflowMenuSpan, type OverflowMenuSpanProps, Pagination, type PaginationOption, type PaginationProps, Paper, type PaperBackground, type PaperBorder, type PaperBorderRadius, type PaperElevation, type PaperProps, Paragraph, type ParagraphProps, PayoutIcon, PdfIcon, PersonAddIcon, PersonIcon, PersonShieldedIcon, PhoneInput, type PhoneInputProps, type PhoneInputValue, PinIcon, type Placement, PlusCircledIcon, PlusIcon, type PolymorphicBaseComponentProps, type PolymorphicProps, Popover, PopoverGroup, type PopoverGroupProps, type PopoverProps, type PopoverSizeProps, PowerOfAttorneyIcon, PrintIcon, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressTracker, ProgressTrackerItem, type ProgressTrackerItemProps, type ProgressTrackerProps, PropertyIcon, PublishIcon, QuestionAnswerIcon, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonProps, type RadioValue, type Rating, ReceiptIcon, RedoIcon, RefreshIcon, ReplayIcon, type ResponsiveProps, type ResponsiveStackProps, ScreenSize, Search, SearchAutocompleteWrapper, type SearchAutocompleteWrapperProps, type SearchButtonProps, type SearchData, SearchIcon, type SearchProps, type SearchSize, SearchSuggestions, type SearchSuggestionsProps, Select, type SelectForwardRefType, type SelectOption, type SelectProps, SettingsIcon, ShowHide, type ShowHideProps, type Size, Skeleton, type SkeletonAppearance, type SkeletonProps, SkipToContent, type SkipToContentProps, SmsIcon, type SortOrder, type SpacingScale, Spinner, type SpinnerProps, SplitButton, type SplitButtonPrimaryActionProps, type SplitButtonProps, type SplitButtonPurpose, type SplitButtonSecondaryActionsProps, StarFilledIcon, StarHalfFilled, StarIcon, type StaticTypographyType, StylelessButton, type StylelessButtonProps, StylelessList, type StylelessListProps, StylelessOList, type StylelessOListProps, type SvgIcon, type SvgProps, SvgWrapper, SyncIcon, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabProps, type TabSize, Table, Body as TableBody, type TableBodyProps, Cell as TableCell, type TableCellLayout, type TableCellProps, type TableCellType, Foot as TableFoot, type TableFootProps, Head as TableHead, type TableHeadProps, type TableProps, Row as TableRow, type TableRowProps, type TableRowType, type TableSize, SortCell as TableSortCell, type TableSortCellProps, TableWrapper, Tabs, type TabsProps, Tag, type TagAppearance, type TagProps, type TagPurpose, type TextAffixProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TextOverflowEllipsisInner, TextOverflowEllipsisWrapper, ThemeContext, ThemeProvider, type ThemeProviderProps, ThumbDownFilledIcon, ThumbDownIcon, ThumbUpFilledIcon, ThumbUpIcon, TimeIcon, TimePicker, type TimePickerProps, TingrettIcon, TipIcon, Toggle, ToggleBar, type ToggleBarProps, type ToggleBarSize, type ToggleBarValue, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, type ToggleProps, ToggleRadio, type ToggleRadioProps, type ToggleSize, Tooltip, type TooltipProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, Typography, type TypographyAnchorType, type TypographyBodyType, type TypographyComponentProps, type TypographyHeadingType, type TypographyLabelType, type TypographyLeadType, type TypographyProps, type TypographyType, UndoIcon, UnfoldLessIcon, UnfoldMoreIcon, UploadIcon, type UseControllableGroupStateProps, type UseControllableStateProps, type UseFloatPositionOptions, VStack, type VStackProps, VisibilityOffIcon, VisibilityOnIcon, VisuallyHidden, type VisuallyHiddenProps, WarningIcon, WebexIcon, type WeightedSearchData, type WidthProps, type WithRequiredIf, XIcon, ZoomInIcon, ZoomOutIcon, calendarDateToNativeDate, cn, countryOptions, createSelectOptions, dateValueToNativeDate, defaultTypographyType, defaultTypographyTypeClassName, focusVisible, focusVisibleInset, focusVisibleTransitionValue, getBaseHTMLProps, getColorCn, getElementType, getLiteralScreenSize, getTypographyCn, handleElementWithBackdropMount, handleElementWithBackdropUnmount, hideInput, index as icons, inheritLinkStyling, inlineElements, isAnchorTypographyProps, isBorderColor, isBorderRadius, isCaption, isElevation, isHeading, isInlineElement, isKeyboardEvent, isLegend, isPaperBackground, nativeDateToCalendarDate, nativeDateToDateValue, nativeDateToTime, normalizeButton, outlineInset, outlineOffset, removeButtonStyling, removeListStyling, renderInputMessage, scrollbarStyling, typographyTypes, useCallbackRef, useCombinedRef, useControllableGroupState, useControllableState, useFloatPosition, useFocusTrap, useIsMounted, useMountTransition, useOnClickOutside, useOnKeyDown, useReturnFocusOnBlur, useRoveFocus, useScreenSize, useTheme, useWindowResize, visibilityTransition };
|