@digdir/designsystemet-react 1.1.9 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/cjs/components/dialog/dialog.js +9 -1
  2. package/dist/cjs/components/field/field-observer.js +1 -1
  3. package/dist/cjs/components/tabs/tabs-list.js +4 -2
  4. package/dist/cjs/components/tabs/tabs-panel.js +16 -3
  5. package/dist/cjs/components/tabs/tabs-tab.js +5 -2
  6. package/dist/cjs/components/tabs/tabs.js +5 -0
  7. package/dist/cjs/components/tooltip/tooltip.js +19 -3
  8. package/dist/cjs/utilities/roving-focus/roving-focus-root.js +4 -3
  9. package/dist/esm/components/dialog/dialog.js +9 -1
  10. package/dist/esm/components/field/field-observer.js +1 -1
  11. package/dist/esm/components/tabs/tabs-list.js +4 -2
  12. package/dist/esm/components/tabs/tabs-panel.js +18 -5
  13. package/dist/esm/components/tabs/tabs-tab.js +5 -2
  14. package/dist/esm/components/tabs/tabs.js +6 -1
  15. package/dist/esm/components/tooltip/tooltip.js +19 -3
  16. package/dist/esm/utilities/roving-focus/roving-focus-root.js +4 -3
  17. package/dist/types/components/Combobox/Custom.d.ts.map +1 -1
  18. package/dist/types/components/Combobox/internal/ComboboxInput.d.ts.map +1 -1
  19. package/dist/types/components/dialog/dialog.d.ts +4 -0
  20. package/dist/types/components/dialog/dialog.d.ts.map +1 -1
  21. package/dist/types/components/skeleton/skeleton.d.ts +24 -7
  22. package/dist/types/components/skeleton/skeleton.d.ts.map +1 -1
  23. package/dist/types/components/tabs/tabs-list.d.ts.map +1 -1
  24. package/dist/types/components/tabs/tabs-panel.d.ts.map +1 -1
  25. package/dist/types/components/tabs/tabs-tab.d.ts.map +1 -1
  26. package/dist/types/components/tabs/tabs.d.ts +3 -0
  27. package/dist/types/components/tabs/tabs.d.ts.map +1 -1
  28. package/dist/types/components/tooltip/tooltip.d.ts.map +1 -1
  29. package/dist/types/utilities/roving-focus/roving-focus-root.d.ts.map +1 -1
  30. package/package.json +20 -20
@@ -42,11 +42,19 @@ const Dialog = react.forwardRef(function Dialog({ asChild, children, className,
42
42
  react.useEffect(() => {
43
43
  const dialog = dialogRef.current;
44
44
  const handleClosedby = (event) => {
45
+ if (event.defaultPrevented)
46
+ return; // Skip if default action is prevented
45
47
  const { clientY: y, clientX: x, target } = event;
46
48
  if (event instanceof KeyboardEvent)
47
49
  return (closedby === 'none' &&
48
50
  event.key === 'Escape' &&
49
51
  event.preventDefault()); // Skip ESC-key if closedby="none"
52
+ /* Check if clicked element or its closest parent has data-command='close' */
53
+ if (target instanceof Element) {
54
+ const closeElement = target.closest('[data-command="close"]');
55
+ if (closeElement)
56
+ return dialog?.close();
57
+ }
50
58
  if (window.getSelection()?.toString())
51
59
  return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
52
60
  if (dialog && target === dialog && closedby === 'any') {
@@ -77,7 +85,7 @@ const Dialog = react.forwardRef(function Dialog({ asChild, children, className,
77
85
  currentRef?.addEventListener('close', handleClose);
78
86
  return () => currentRef?.removeEventListener('close', handleClose);
79
87
  }, [onClose]);
80
- return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsxRuntime.jsx("form", { method: 'dialog', children: jsxRuntime.jsx(button.Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
88
+ return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsxRuntime.jsx(button.Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
81
89
  });
82
90
 
83
91
  exports.Dialog = Dialog;
@@ -27,7 +27,7 @@ function fieldObserver(fieldElement) {
27
27
  elements.set(el, el.htmlFor);
28
28
  else if (el.hasAttribute('data-field'))
29
29
  elements.set(el, el.id);
30
- else if (isInputLike(el)) {
30
+ else if (isInputLike(el) && !el.hidden) {
31
31
  input = el;
32
32
  describedby = el.getAttribute('aria-describedby') || '';
33
33
  }
@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
5
5
  var react = require('react');
6
6
  var rovingFocusRoot = require('../../utilities/roving-focus/roving-focus-root.js');
7
7
  var tabs = require('./tabs.js');
8
+ var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
8
9
 
9
10
  /**
10
11
  * The container for all `Tab` components.
@@ -16,8 +17,9 @@ var tabs = require('./tabs.js');
16
17
  * </TabsList>
17
18
  */
18
19
  const TabsList = react.forwardRef(function TabsList({ children, ...rest }, ref) {
19
- const { value } = react.useContext(tabs.Context);
20
- return (jsxRuntime.jsx(rovingFocusRoot.RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: ref, ...rest, children: children }));
20
+ const { value, tablistRef } = react.useContext(tabs.Context);
21
+ const mergedRefs = useMergeRefs.useMergeRefs([ref, tablistRef]);
22
+ return (jsxRuntime.jsx(rovingFocusRoot.RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: mergedRefs, ...rest, children: children }));
21
23
  });
22
24
 
23
25
  exports.TabsList = TabsList;
@@ -12,10 +12,13 @@ var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.
12
12
  * @example
13
13
  * <TabsPanel value='1'>content 1</TabsPanel>
14
14
  */
15
- const TabsPanel = react.forwardRef(function TabsPanel({ children, value, ...rest }, ref) {
16
- const { value: tabsValue } = react.useContext(tabs.Context);
15
+ const TabsPanel = react.forwardRef(function TabsPanel({ children, value, id, ...rest }, ref) {
16
+ const { value: tabsValue, tablistRef, setPanelButtonMap, } = react.useContext(tabs.Context);
17
17
  const active = value === tabsValue;
18
+ const generatedId = react.useId();
19
+ const panelId = id ?? `tabpanel-${generatedId}`;
18
20
  const [hasTabbableElement, setHasTabbableElement] = react.useState(false);
21
+ const [labelledBy, setLabelledBy] = react.useState(undefined);
19
22
  const internalRef = react.useRef(null);
20
23
  const mergedRef = useMergeRefs.useMergeRefs([ref, internalRef]);
21
24
  /* Check if the panel has any tabbable elements */
@@ -25,7 +28,17 @@ const TabsPanel = react.forwardRef(function TabsPanel({ children, value, ...rest
25
28
  const tabbableElements = internalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
26
29
  setHasTabbableElement(tabbableElements.length > 0);
27
30
  }, [children]);
28
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: active && (jsxRuntime.jsx("div", { ref: mergedRef, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, ...rest, children: children })) }));
31
+ /* get associated button */
32
+ react.useEffect(() => {
33
+ if (!tablistRef)
34
+ return;
35
+ const button = tablistRef.current?.querySelector(`[role="tab"][data-value="${value}"]`);
36
+ setLabelledBy(button ? button.id : undefined);
37
+ if (button) {
38
+ setPanelButtonMap?.((prev) => new Map(prev).set(button.id, panelId));
39
+ }
40
+ }, [tablistRef]);
41
+ return (jsxRuntime.jsx("div", { ref: mergedRef, id: panelId, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, "aria-labelledby": labelledBy, hidden: !active, ...rest, children: children }));
29
42
  });
30
43
 
31
44
  exports.TabsPanel = TabsPanel;
@@ -12,11 +12,14 @@ var tabs = require('./tabs.js');
12
12
  * @example
13
13
  * <TabsTab value='1'>Tab 1</TabsTab>
14
14
  */
15
- const TabsTab = react.forwardRef(function TabsTab({ value, id, ...rest }, ref) {
15
+ const TabsTab = react.forwardRef(function TabsTab({ value, id, onClick, ...rest }, ref) {
16
16
  const tabs$1 = react.useContext(tabs.Context);
17
17
  const generatedId = react.useId();
18
18
  const buttonId = id ?? `tab-${generatedId}`;
19
- return (jsxRuntime.jsx(rovingFocusItem.RovingFocusItem, { value: value, ...rest, asChild: true, children: jsxRuntime.jsx("button", { ...rest, "aria-selected": tabs$1.value === value, id: buttonId, onClick: () => tabs$1.onChange?.(value), ref: ref, role: 'tab', type: 'button' }) }));
19
+ return (jsxRuntime.jsx(rovingFocusItem.RovingFocusItem, { value: value, ...rest, asChild: true, children: jsxRuntime.jsx("button", { ref: ref, id: buttonId, "aria-selected": tabs$1.value === value, "data-value": value, role: 'tab', type: 'button', onClick: (e) => {
20
+ tabs$1.onChange?.(value);
21
+ onClick?.(e);
22
+ }, "aria-controls": tabs$1.panelButtonMap?.get(buttonId), ...rest }) }));
20
23
  });
21
24
 
22
25
  exports.TabsTab = TabsTab;
@@ -22,8 +22,10 @@ const Context = react.createContext({});
22
22
  * </Tabs>
23
23
  */
24
24
  const Tabs = react.forwardRef(function Tabs({ value, defaultValue, className, onChange, ...rest }, ref) {
25
+ const tablistRef = react.useRef(null);
25
26
  const isControlled = value !== undefined;
26
27
  const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
28
+ const [panelButtonMap, setPanelButtonMap] = react.useState(new Map());
27
29
  let onValueChange = onChange;
28
30
  if (!isControlled) {
29
31
  onValueChange = (newValue) => {
@@ -36,6 +38,9 @@ const Tabs = react.forwardRef(function Tabs({ value, defaultValue, className, on
36
38
  value,
37
39
  defaultValue,
38
40
  onChange: onValueChange,
41
+ tablistRef,
42
+ panelButtonMap,
43
+ setPanelButtonMap,
39
44
  }, children: jsxRuntime.jsx("div", { className: cl('ds-tabs', className), ref: ref, ...rest }) }));
40
45
  });
41
46
 
@@ -65,18 +65,34 @@ const Tooltip = react.forwardRef(function Tooltip({ id, children, content, place
65
65
  });
66
66
  }
67
67
  }, [controlledOpen, placement]);
68
- /* Add listener for ESC to dismiss */
68
+ /* Add listeners for ESC to dismiss and click outside on mobile */
69
69
  react.useEffect(() => {
70
+ const tooltip = tooltipRef.current;
71
+ const trigger = triggerRef.current;
70
72
  const handleKeyDown = (event) => {
71
73
  if (event.key === 'Escape') {
72
74
  setInternalOpen(false);
73
75
  }
74
76
  };
75
- window.addEventListener('keydown', handleKeyDown);
77
+ const handleClick = (event) => {
78
+ const el = event.target;
79
+ const isTooltip = tooltip?.contains(el);
80
+ const isTrigger = trigger?.contains(el);
81
+ const isOutside = !isTrigger && !isTooltip;
82
+ if (isOutside && controlledOpen) {
83
+ setInternalOpen(false);
84
+ }
85
+ };
86
+ if (controlledOpen) {
87
+ window.addEventListener('keydown', handleKeyDown);
88
+ /* Add click listener to handle mobile tap-to-close */
89
+ document.addEventListener('click', handleClick);
90
+ }
76
91
  return () => {
77
92
  window.removeEventListener('keydown', handleKeyDown);
93
+ document.removeEventListener('click', handleClick);
78
94
  };
79
- }, []);
95
+ }, [controlledOpen]);
80
96
  /* If children is only a string, make a span */
81
97
  const ChildContainer = typeof children === 'string' ? 'span' : reactSlot.Slot;
82
98
  /* Make sure it is valid */
@@ -20,7 +20,8 @@ const RovingFocusContext = react.createContext({
20
20
  });
21
21
  const RovingFocusRoot = react.forwardRef(({ activeValue, asChild, orientation = 'horizontal', onBlur, onFocus, ...rest }, ref) => {
22
22
  const Component = asChild ? reactSlot.Slot : 'div';
23
- const [focusableValue, setFocusableValue] = react.useState(null);
23
+ const activeValueOrNull = activeValue ?? null;
24
+ const [focusableValue, setFocusableValue] = react.useState(activeValueOrNull);
24
25
  const [isShiftTabbing, setIsShiftTabbing] = react.useState(false);
25
26
  const elements = react.useRef(new Map());
26
27
  const myRef = react.useRef(null);
@@ -34,8 +35,8 @@ const RovingFocusRoot = react.forwardRef(({ activeValue, asChild, orientation =
34
35
  .map(([value, element]) => ({ value, element }));
35
36
  };
36
37
  react.useEffect(() => {
37
- setFocusableValue(activeValue ?? null);
38
- }, [activeValue]);
38
+ setFocusableValue(activeValueOrNull);
39
+ }, [activeValueOrNull]);
39
40
  return (jsxRuntime.jsx(RovingFocusContext.Provider, { value: {
40
41
  elements,
41
42
  getOrderedItems,
@@ -40,11 +40,19 @@ const Dialog = forwardRef(function Dialog({ asChild, children, className, closeB
40
40
  useEffect(() => {
41
41
  const dialog = dialogRef.current;
42
42
  const handleClosedby = (event) => {
43
+ if (event.defaultPrevented)
44
+ return; // Skip if default action is prevented
43
45
  const { clientY: y, clientX: x, target } = event;
44
46
  if (event instanceof KeyboardEvent)
45
47
  return (closedby === 'none' &&
46
48
  event.key === 'Escape' &&
47
49
  event.preventDefault()); // Skip ESC-key if closedby="none"
50
+ /* Check if clicked element or its closest parent has data-command='close' */
51
+ if (target instanceof Element) {
52
+ const closeElement = target.closest('[data-command="close"]');
53
+ if (closeElement)
54
+ return dialog?.close();
55
+ }
48
56
  if (window.getSelection()?.toString())
49
57
  return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
50
58
  if (dialog && target === dialog && closedby === 'any') {
@@ -75,7 +83,7 @@ const Dialog = forwardRef(function Dialog({ asChild, children, className, closeB
75
83
  currentRef?.addEventListener('close', handleClose);
76
84
  return () => currentRef?.removeEventListener('close', handleClose);
77
85
  }, [onClose]);
78
- return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsx("form", { method: 'dialog', children: jsx(Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
86
+ return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsx(Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
79
87
  });
80
88
 
81
89
  export { Dialog };
@@ -25,7 +25,7 @@ function fieldObserver(fieldElement) {
25
25
  elements.set(el, el.htmlFor);
26
26
  else if (el.hasAttribute('data-field'))
27
27
  elements.set(el, el.id);
28
- else if (isInputLike(el)) {
28
+ else if (isInputLike(el) && !el.hidden) {
29
29
  input = el;
30
30
  describedby = el.getAttribute('aria-describedby') || '';
31
31
  }
@@ -3,6 +3,7 @@ import { jsx } from 'react/jsx-runtime';
3
3
  import { forwardRef, useContext } from 'react';
4
4
  import { RovingFocusRoot } from '../../utilities/roving-focus/roving-focus-root.js';
5
5
  import { Context } from './tabs.js';
6
+ import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
6
7
 
7
8
  /**
8
9
  * The container for all `Tab` components.
@@ -14,8 +15,9 @@ import { Context } from './tabs.js';
14
15
  * </TabsList>
15
16
  */
16
17
  const TabsList = forwardRef(function TabsList({ children, ...rest }, ref) {
17
- const { value } = useContext(Context);
18
- return (jsx(RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: ref, ...rest, children: children }));
18
+ const { value, tablistRef } = useContext(Context);
19
+ const mergedRefs = useMergeRefs([ref, tablistRef]);
20
+ return (jsx(RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: mergedRefs, ...rest, children: children }));
19
21
  });
20
22
 
21
23
  export { TabsList };
@@ -1,6 +1,6 @@
1
1
  'use client';
2
- import { jsx, Fragment } from 'react/jsx-runtime';
3
- import { forwardRef, useContext, useState, useRef, useEffect } from 'react';
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { forwardRef, useContext, useId, useState, useRef, useEffect } from 'react';
4
4
  import { Context } from './tabs.js';
5
5
  import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
6
6
 
@@ -10,10 +10,13 @@ import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-ref
10
10
  * @example
11
11
  * <TabsPanel value='1'>content 1</TabsPanel>
12
12
  */
13
- const TabsPanel = forwardRef(function TabsPanel({ children, value, ...rest }, ref) {
14
- const { value: tabsValue } = useContext(Context);
13
+ const TabsPanel = forwardRef(function TabsPanel({ children, value, id, ...rest }, ref) {
14
+ const { value: tabsValue, tablistRef, setPanelButtonMap, } = useContext(Context);
15
15
  const active = value === tabsValue;
16
+ const generatedId = useId();
17
+ const panelId = id ?? `tabpanel-${generatedId}`;
16
18
  const [hasTabbableElement, setHasTabbableElement] = useState(false);
19
+ const [labelledBy, setLabelledBy] = useState(undefined);
17
20
  const internalRef = useRef(null);
18
21
  const mergedRef = useMergeRefs([ref, internalRef]);
19
22
  /* Check if the panel has any tabbable elements */
@@ -23,7 +26,17 @@ const TabsPanel = forwardRef(function TabsPanel({ children, value, ...rest }, re
23
26
  const tabbableElements = internalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
24
27
  setHasTabbableElement(tabbableElements.length > 0);
25
28
  }, [children]);
26
- return (jsx(Fragment, { children: active && (jsx("div", { ref: mergedRef, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, ...rest, children: children })) }));
29
+ /* get associated button */
30
+ useEffect(() => {
31
+ if (!tablistRef)
32
+ return;
33
+ const button = tablistRef.current?.querySelector(`[role="tab"][data-value="${value}"]`);
34
+ setLabelledBy(button ? button.id : undefined);
35
+ if (button) {
36
+ setPanelButtonMap?.((prev) => new Map(prev).set(button.id, panelId));
37
+ }
38
+ }, [tablistRef]);
39
+ return (jsx("div", { ref: mergedRef, id: panelId, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, "aria-labelledby": labelledBy, hidden: !active, ...rest, children: children }));
27
40
  });
28
41
 
29
42
  export { TabsPanel };
@@ -10,11 +10,14 @@ import { Context } from './tabs.js';
10
10
  * @example
11
11
  * <TabsTab value='1'>Tab 1</TabsTab>
12
12
  */
13
- const TabsTab = forwardRef(function TabsTab({ value, id, ...rest }, ref) {
13
+ const TabsTab = forwardRef(function TabsTab({ value, id, onClick, ...rest }, ref) {
14
14
  const tabs = useContext(Context);
15
15
  const generatedId = useId();
16
16
  const buttonId = id ?? `tab-${generatedId}`;
17
- return (jsx(RovingFocusItem, { value: value, ...rest, asChild: true, children: jsx("button", { ...rest, "aria-selected": tabs.value === value, id: buttonId, onClick: () => tabs.onChange?.(value), ref: ref, role: 'tab', type: 'button' }) }));
17
+ return (jsx(RovingFocusItem, { value: value, ...rest, asChild: true, children: jsx("button", { ref: ref, id: buttonId, "aria-selected": tabs.value === value, "data-value": value, role: 'tab', type: 'button', onClick: (e) => {
18
+ tabs.onChange?.(value);
19
+ onClick?.(e);
20
+ }, "aria-controls": tabs.panelButtonMap?.get(buttonId), ...rest }) }));
18
21
  });
19
22
 
20
23
  export { TabsTab };
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
  import { jsx } from 'react/jsx-runtime';
3
3
  import cl from 'clsx/lite';
4
- import { forwardRef, createContext, useState } from 'react';
4
+ import { forwardRef, createContext, useRef, useState } from 'react';
5
5
 
6
6
  const Context = createContext({});
7
7
  /**
@@ -20,8 +20,10 @@ const Context = createContext({});
20
20
  * </Tabs>
21
21
  */
22
22
  const Tabs = forwardRef(function Tabs({ value, defaultValue, className, onChange, ...rest }, ref) {
23
+ const tablistRef = useRef(null);
23
24
  const isControlled = value !== undefined;
24
25
  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
26
+ const [panelButtonMap, setPanelButtonMap] = useState(new Map());
25
27
  let onValueChange = onChange;
26
28
  if (!isControlled) {
27
29
  onValueChange = (newValue) => {
@@ -34,6 +36,9 @@ const Tabs = forwardRef(function Tabs({ value, defaultValue, className, onChange
34
36
  value,
35
37
  defaultValue,
36
38
  onChange: onValueChange,
39
+ tablistRef,
40
+ panelButtonMap,
41
+ setPanelButtonMap,
37
42
  }, children: jsx("div", { className: cl('ds-tabs', className), ref: ref, ...rest }) }));
38
43
  });
39
44
 
@@ -63,18 +63,34 @@ const Tooltip = forwardRef(function Tooltip({ id, children, content, placement =
63
63
  });
64
64
  }
65
65
  }, [controlledOpen, placement]);
66
- /* Add listener for ESC to dismiss */
66
+ /* Add listeners for ESC to dismiss and click outside on mobile */
67
67
  useEffect(() => {
68
+ const tooltip = tooltipRef.current;
69
+ const trigger = triggerRef.current;
68
70
  const handleKeyDown = (event) => {
69
71
  if (event.key === 'Escape') {
70
72
  setInternalOpen(false);
71
73
  }
72
74
  };
73
- window.addEventListener('keydown', handleKeyDown);
75
+ const handleClick = (event) => {
76
+ const el = event.target;
77
+ const isTooltip = tooltip?.contains(el);
78
+ const isTrigger = trigger?.contains(el);
79
+ const isOutside = !isTrigger && !isTooltip;
80
+ if (isOutside && controlledOpen) {
81
+ setInternalOpen(false);
82
+ }
83
+ };
84
+ if (controlledOpen) {
85
+ window.addEventListener('keydown', handleKeyDown);
86
+ /* Add click listener to handle mobile tap-to-close */
87
+ document.addEventListener('click', handleClick);
88
+ }
74
89
  return () => {
75
90
  window.removeEventListener('keydown', handleKeyDown);
91
+ document.removeEventListener('click', handleClick);
76
92
  };
77
- }, []);
93
+ }, [controlledOpen]);
78
94
  /* If children is only a string, make a span */
79
95
  const ChildContainer = typeof children === 'string' ? 'span' : Slot;
80
96
  /* Make sure it is valid */
@@ -18,7 +18,8 @@ const RovingFocusContext = createContext({
18
18
  });
19
19
  const RovingFocusRoot = forwardRef(({ activeValue, asChild, orientation = 'horizontal', onBlur, onFocus, ...rest }, ref) => {
20
20
  const Component = asChild ? Slot : 'div';
21
- const [focusableValue, setFocusableValue] = useState(null);
21
+ const activeValueOrNull = activeValue ?? null;
22
+ const [focusableValue, setFocusableValue] = useState(activeValueOrNull);
22
23
  const [isShiftTabbing, setIsShiftTabbing] = useState(false);
23
24
  const elements = useRef(new Map());
24
25
  const myRef = useRef(null);
@@ -32,8 +33,8 @@ const RovingFocusRoot = forwardRef(({ activeValue, asChild, orientation = 'horiz
32
33
  .map(([value, element]) => ({ value, element }));
33
34
  };
34
35
  useEffect(() => {
35
- setFocusableValue(activeValue ?? null);
36
- }, [activeValue]);
36
+ setFocusableValue(activeValueOrNull);
37
+ }, [activeValueOrNull]);
37
38
  return (jsx(RovingFocusContext.Provider, { value: {
38
39
  elements,
39
40
  getOrderedItems,
@@ -1 +1 @@
1
- {"version":3,"file":"Custom.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Custom.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAO5C,KAAK,gBAAgB,GAAG;IACtB,WAAW,EAAE,IAAI,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,GAChC,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;AAE3C,QAAA,MAAM,cAAc,4FA+CnB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
1
+ {"version":3,"file":"Custom.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Custom.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAO5C,KAAK,gBAAgB,GAAG;IACtB,WAAW,EAAE,IAAI,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,GAChC,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;AAE3C,QAAA,MAAM,cAAc,4FAgDnB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Combobox/internal/ComboboxInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,mBAAmB,EACnB,aAAa,EAEd,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAQjD,KAAK,kBAAkB,GAAG;IACxB,eAAe,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,SAAS,EAAE,WAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;IACnD,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC/C,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAExD,QAAA,MAAM,aAAa;4EAOhB,kBAAkB;;CAmIpB,CAAC;AAIF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Combobox/internal/ComboboxInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,mBAAmB,EACnB,aAAa,EAEd,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAQjD,KAAK,kBAAkB,GAAG;IACxB,eAAe,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,SAAS,EAAE,WAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;IACnD,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC/C,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAExD,QAAA,MAAM,aAAa;4EAOhB,kBAAkB;;CAoIpB,CAAC;AAIF,eAAe,aAAa,CAAC"}
@@ -32,6 +32,8 @@ export type DialogProps = MergeRight<DefaultProps & DialogHTMLAttributes<HTMLDia
32
32
  /**
33
33
  * Change the default rendered element for the one passed as a child, merging their props and behavior.
34
34
  * @default false
35
+ *
36
+ * @deprecated Will be removed in the next major version. Should always be a `<dialog>` element
35
37
  */
36
38
  asChild?: boolean;
37
39
  }>;
@@ -89,6 +91,8 @@ export declare const Dialog: React.ForwardRefExoticComponent<Omit<DefaultProps &
89
91
  /**
90
92
  * Change the default rendered element for the one passed as a child, merging their props and behavior.
91
93
  * @default false
94
+ *
95
+ * @deprecated Will be removed in the next major version. Should always be a `<dialog>` element
92
96
  */
93
97
  asChild?: boolean;
94
98
  } & React.RefAttributes<HTMLDialogElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,KAAK,CAAC;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;IA1Df;;;OAGG;kBACW,MAAM,GAAG,KAAK;IAC5B;;;;OAIG;eACQ,MAAM,GAAG,cAAc,GAAG,KAAK;IAC1C;;;;;;OAMG;YACK,OAAO;IACf;;OAEG;WACI,OAAO;IACd;;OAEG;cACO,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAChC;;;OAGG;cACO,OAAO;2CAqHpB,CAAC"}
1
+ {"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,KAAK,CAAC;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;IA5Df;;;OAGG;kBACW,MAAM,GAAG,KAAK;IAC5B;;;;OAIG;eACQ,MAAM,GAAG,cAAc,GAAG,KAAK;IAC1C;;;;;;OAMG;YACK,OAAO;IACf;;OAEG;WACI,OAAO;IACd;;OAEG;cACO,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAChC;;;;;OAKG;cACO,OAAO;2CA2HpB,CAAC"}
@@ -18,13 +18,9 @@ export type SkeletonProps = {
18
18
  * @default false
19
19
  */
20
20
  asChild?: boolean;
21
- } & HTMLAttributes<HTMLSpanElement> & ({
22
- variant: 'text';
21
+ /** @deprecated This prop has no effect. Use `width` or supply text as children instead */
23
22
  characters?: number;
24
- } | {
25
- variant?: 'rectangle' | 'circle';
26
- characters?: never;
27
- });
23
+ } & HTMLAttributes<HTMLSpanElement>;
28
24
  /**
29
25
  * Skeleton is used to represent a draft of page while the content loads.
30
26
  *
@@ -33,5 +29,26 @@ export type SkeletonProps = {
33
29
  * <Skeleton variant="text" />
34
30
  * <Skeleton variant="rectangle" />
35
31
  */
36
- export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLSpanElement>>;
32
+ export declare const Skeleton: React.ForwardRefExoticComponent<{
33
+ /**
34
+ * The width of the component
35
+ */
36
+ width?: string | number;
37
+ /**
38
+ * The height of the component
39
+ */
40
+ height?: string | number;
41
+ /**
42
+ * The shape variant
43
+ * @default 'rectangle'
44
+ */
45
+ variant?: "rectangle" | "circle" | "text";
46
+ /**
47
+ * Change the default rendered element for the one passed as a child, merging their props and behavior.
48
+ * @default false
49
+ */
50
+ asChild?: boolean;
51
+ /** @deprecated This prop has no effect. Use `width` or supply text as children instead */
52
+ characters?: number;
53
+ } & HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
37
54
  //# sourceMappingURL=skeleton.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAIxD,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,eAAe,CAAC,GACjC,CACI;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,OAAO,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;IAAC,UAAU,CAAC,EAAE,KAAK,CAAA;CAAE,CAC3D,CAAC;AAEJ;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,uFAgCpB,CAAC"}
1
+ {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAIxD,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0FAA0F;IAC1F,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAEpC;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ;IA9BnB;;OAEG;YACK,MAAM,GAAG,MAAM;IACvB;;OAEG;aACM,MAAM,GAAG,MAAM;IACxB;;;OAGG;cACO,WAAW,GAAG,QAAQ,GAAG,MAAM;IACzC;;;OAGG;cACO,OAAO;IACjB,0FAA0F;iBAC7E,MAAM;2EA2CpB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"tabs-list.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE3D;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,sFAgBpB,CAAC"}
1
+ {"version":3,"file":"tabs-list.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM5C,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE3D;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,sFAkBpB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"tabs-panel.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM5C,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAElD;;;;;GAKG;AACH,eAAO,MAAM,SAAS;IAbpB;;;OAGG;WACI,MAAM;wFA2Cd,CAAC"}
1
+ {"version":3,"file":"tabs-panel.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAa5C,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAElD;;;;;GAKG;AACH,eAAO,MAAM,SAAS;IAbpB;;;OAGG;WACI,MAAM;wFAgEd,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"tabs-tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,CAAC;AAErD;;;;;GAKG;AACH,eAAO,MAAM,OAAO;IAZlB;;OAEG;WACI,MAAM;8FA6Bd,CAAC"}
1
+ {"version":3,"file":"tabs-tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,CAAC;AAErD;;;;;GAKG;AACH,eAAO,MAAM,OAAO;IAZlB;;OAEG;WACI,MAAM;8FAkCd,CAAC"}
@@ -21,7 +21,10 @@ export type TabsProps = MergeRight<DefaultProps & Omit<HTMLAttributes<HTMLDivEle
21
21
  export type ContextProps = {
22
22
  value?: string;
23
23
  defaultValue?: string;
24
+ panelButtonMap?: Map<string, string>;
25
+ setPanelButtonMap?: React.Dispatch<React.SetStateAction<Map<string, string>>>;
24
26
  onChange?: (value: string) => void;
27
+ tablistRef?: React.RefObject<HTMLDivElement | null>;
25
28
  };
26
29
  export declare const Context: React.Context<ContextProps>;
27
30
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,UAAU,CAChC,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EACzE;IACE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CACF,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,OAAO,6BAAkC,CAAC;AAEvD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI;IAzCb;;;OAGG;YACK,MAAM;IACd;;;OAGG;mBACY,MAAM;IACrB;;;OAGG;eACQ,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;wCAuDpC,CAAC"}
1
+ {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,UAAU,CAChC,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EACzE;IACE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CACF,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,iBAAiB,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,OAAO,6BAAkC,CAAC;AAEvD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI;IA5Cb;;;OAGG;YACK,MAAM;IACd;;;OAGG;mBACY,MAAM;IACrB;;;OAGG;eACQ,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;wCAoEpC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAWzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,YAAY,GAAG,UAAU,CACnC,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC,GAAG,cAAc,CAAC,cAAc,CAAC,EACjE;IACE;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,YAAY,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC;IAC/D;;QAEI;IACJ,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CACF,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO;IA1ChB;;;;;OAKG;cACO,CAAC,YAAY,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC,GAAG,MAAM;IAC9D;;QAEI;aACK,MAAM;IACf;;;OAGG;gBACS,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM;IAC/C;;;OAGG;oBACa,OAAO;IACvB;;;OAGG;WACI,OAAO;kCAiJjB,CAAC"}
1
+ {"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAWzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,YAAY,GAAG,UAAU,CACnC,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC,GAAG,cAAc,CAAC,cAAc,CAAC,EACjE;IACE;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,YAAY,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC;IAC/D;;QAEI;IACJ,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CACF,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO;IA1ChB;;;;;OAKG;cACO,CAAC,YAAY,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC,GAAG,MAAM;IAC9D;;QAEI;aACK,MAAM;IACf;;;OAGG;gBACS,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM;IAC/C;;;OAGG;oBACa,OAAO;IACvB;;;OAGG;WACI,OAAO;kCAoKjB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"roving-focus-root.d.ts","sourceRoot":"","sources":["../../../src/utilities/roving-focus/roving-focus-root.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAEV,cAAc,EACd,gBAAgB,EAChB,SAAS,EACV,MAAM,OAAO,CAAC;AAuBf,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;IACrD,eAAe,EAAE,MAAM,kBAAkB,EAAE,CAAC;IAC5C,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,WAAW,CAAC;CACtD,CAAC;AAEF,eAAO,MAAM,kBAAkB,iCAW7B,CAAC;AAEH,eAAO,MAAM,eAAe;IA7C1B,iIAAiI;cACvH,SAAS;IACnB,iGAAiG;kBACnF,MAAM;IACpB;;;OAGG;cACO,OAAO;IACjB;;;;;OAKG;kBACW,UAAU,GAAG,YAAY,GAAG,WAAW;mEAkHtD,CAAC"}
1
+ {"version":3,"file":"roving-focus-root.d.ts","sourceRoot":"","sources":["../../../src/utilities/roving-focus/roving-focus-root.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAEV,cAAc,EACd,gBAAgB,EAChB,SAAS,EACV,MAAM,OAAO,CAAC;AAuBf,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;IACrD,eAAe,EAAE,MAAM,kBAAkB,EAAE,CAAC;IAC5C,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,WAAW,CAAC;CACtD,CAAC;AAEF,eAAO,MAAM,kBAAkB,iCAW7B,CAAC;AAEH,eAAO,MAAM,eAAe;IA7C1B,iIAAiI;cACvH,SAAS;IACnB,iGAAiG;kBACnF,MAAM;IACpB;;;OAGG;cACO,OAAO;IACjB;;;;;OAKG;kBACW,UAAU,GAAG,YAAY,GAAG,WAAW;mEAqHtD,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@digdir/designsystemet-react",
3
3
  "type": "module",
4
- "version": "1.1.9",
4
+ "version": "1.2.0",
5
5
  "description": "React components for Designsystemet",
6
6
  "author": "Designsystemet team",
7
7
  "repository": {
@@ -36,39 +36,39 @@
36
36
  "access": "public"
37
37
  },
38
38
  "dependencies": {
39
- "@floating-ui/dom": "^1.7.2",
39
+ "@floating-ui/dom": "^1.7.3",
40
40
  "@floating-ui/react": "0.26.23",
41
- "@navikt/aksel-icons": "^7.25.1",
41
+ "@navikt/aksel-icons": "^7.27.0",
42
42
  "@radix-ui/react-slot": "^1.2.3",
43
43
  "@tanstack/react-virtual": "^3.13.12",
44
- "@u-elements/u-combobox": "^0.0.18",
45
- "@u-elements/u-datalist": "^1.0.10",
46
- "@u-elements/u-details": "^0.1.1",
44
+ "@u-elements/u-combobox": "^0.0.20",
45
+ "@u-elements/u-datalist": "^1.0.13",
46
+ "@u-elements/u-details": "^0.1.2",
47
47
  "clsx": "^2.1.1"
48
48
  },
49
49
  "devDependencies": {
50
50
  "@rollup/plugin-commonjs": "^28.0.6",
51
51
  "@rollup/plugin-node-resolve": "^16.0.1",
52
- "@storybook/addon-docs": "^9.0.16",
53
- "@storybook/addon-vitest": "^9.0.16",
54
- "@storybook/react-vite": "^9.0.16",
55
- "@testing-library/dom": "^10.4.0",
56
- "@testing-library/jest-dom": "^6.6.3",
52
+ "@storybook/addon-docs": "^9.1.1",
53
+ "@storybook/addon-vitest": "^9.1.1",
54
+ "@storybook/react-vite": "^9.1.1",
55
+ "@testing-library/dom": "^10.4.1",
56
+ "@testing-library/jest-dom": "^6.6.4",
57
57
  "@testing-library/react": "^16.3.0",
58
58
  "@testing-library/user-event": "^14.6.1",
59
- "@types/react": "^19.1.8",
60
- "@types/react-dom": "^19.1.6",
59
+ "@types/react": "^19.1.9",
60
+ "@types/react-dom": "^19.1.7",
61
61
  "jsdom": "^26.1.0",
62
- "react": "^19.1.0",
63
- "react-dom": "^19.1.0",
62
+ "react": "^19.1.1",
63
+ "react-dom": "^19.1.1",
64
64
  "rimraf": "^6.0.1",
65
- "rollup": "^4.45.0",
65
+ "rollup": "^4.46.2",
66
66
  "rollup-plugin-copy": "^3.5.0",
67
- "storybook": "^9.0.16",
67
+ "storybook": "^9.1.1",
68
68
  "tsx": "4.20.3",
69
- "typescript": "^5.8.3",
70
- "@digdir/designsystemet": "^1.1.9",
71
- "@digdir/designsystemet-css": "^1.1.9"
69
+ "typescript": "^5.9.2",
70
+ "@digdir/designsystemet": "^1.2.0",
71
+ "@digdir/designsystemet-css": "^1.2.0"
72
72
  },
73
73
  "scripts": {
74
74
  "build": "pnpm run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",