@digdir/designsystemet-react 1.0.0-next.16 → 1.0.0-next.32

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 (35) hide show
  1. package/dist/cjs/components/Accordion/AccordionHeading.js +4 -4
  2. package/dist/cjs/components/Accordion/AccordionItem.js +1 -1
  3. package/dist/cjs/components/Badge/Badge.js +34 -0
  4. package/dist/cjs/components/Table/Table.js +2 -2
  5. package/dist/cjs/components/Tabs/TabContent.js +1 -1
  6. package/dist/cjs/components/Tabs/useTab.js +1 -1
  7. package/dist/cjs/components/ToggleGroup/ToggleGroupItem/useToggleGroupitem.js +1 -1
  8. package/dist/cjs/components/form/Combobox/Combobox.js +11 -4
  9. package/dist/cjs/components/form/Combobox/utilities.js +11 -0
  10. package/dist/cjs/index.js +2 -0
  11. package/dist/cjs/utilities/RovingFocus/RovingFocusItem.js +1 -1
  12. package/dist/esm/components/Accordion/AccordionHeading.js +4 -4
  13. package/dist/esm/components/Accordion/AccordionItem.js +1 -1
  14. package/dist/esm/components/Badge/Badge.js +32 -0
  15. package/dist/esm/components/Table/Table.js +2 -2
  16. package/dist/esm/components/Tabs/TabContent.js +1 -1
  17. package/dist/esm/components/Tabs/useTab.js +1 -1
  18. package/dist/esm/components/ToggleGroup/ToggleGroupItem/useToggleGroupitem.js +1 -1
  19. package/dist/esm/components/form/Combobox/Combobox.js +12 -5
  20. package/dist/esm/components/form/Combobox/utilities.js +11 -1
  21. package/dist/esm/index.js +1 -0
  22. package/dist/esm/utilities/RovingFocus/RovingFocusItem.js +1 -1
  23. package/dist/types/components/Accordion/AccordionHeading.d.ts +3 -3
  24. package/dist/types/components/Accordion/AccordionHeading.d.ts.map +1 -1
  25. package/dist/types/components/Accordion/AccordionItem.d.ts +1 -1
  26. package/dist/types/components/Accordion/index.d.ts +2 -2
  27. package/dist/types/components/Accordion/index.d.ts.map +1 -1
  28. package/dist/types/components/Table/Table.d.ts +10 -0
  29. package/dist/types/components/Table/Table.d.ts.map +1 -1
  30. package/dist/types/components/form/Combobox/Combobox.d.ts.map +1 -1
  31. package/dist/types/components/form/Combobox/utilities.d.ts +7 -0
  32. package/dist/types/components/form/Combobox/utilities.d.ts.map +1 -1
  33. package/dist/types/components/index.d.ts +1 -0
  34. package/dist/types/components/index.d.ts.map +1 -1
  35. package/package.json +5 -2
@@ -10,21 +10,21 @@ var Heading = require('../Typography/Heading/Heading.js');
10
10
  var Paragraph = require('../Typography/Paragraph/Paragraph.js');
11
11
 
12
12
  /**
13
- * Accordion header component, contains a button to toggle the content.
13
+ * Accordion heading component, contains a button to toggle the content.
14
14
  * @example
15
- * <AccordionHeader>Header</AccordionHeader>
15
+ * <AccordionHeading>Header</AccordionHeading>
16
16
  */
17
17
  const AccordionHeading = React.forwardRef(({ level = 1, children, className, onHeaderClick, ...rest }, ref) => {
18
18
  const context = React.useContext(AccordionItem.AccordionItemContext);
19
19
  if (context === null) {
20
- console.error('<Accordion.Header> has to be used within an <Accordion.Item>');
20
+ console.error('<Accordion.Heading> has to be used within an <Accordion.Item>');
21
21
  return null;
22
22
  }
23
23
  const handleClick = (e) => {
24
24
  context.toggleOpen();
25
25
  onHeaderClick?.(e);
26
26
  };
27
- return (jsxRuntime.jsx(Heading.Heading, { ref: ref, size: 'xs', level: level, className: lite.clsx('ds-accordion__header', className), ...rest, children: jsxRuntime.jsxs("button", { type: 'button', className: lite.clsx('ds-accordion__button', `ds-focus`), onClick: handleClick, "aria-expanded": context.open, "aria-controls": context.contentId, children: [jsxRuntime.jsx(akselIcons.ChevronDownIcon, { "aria-hidden": true, className: 'ds-accordion__expand-icon', fontSize: '1.5rem' }), jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'sm', children: jsxRuntime.jsx("span", { children: children }) })] }) }));
27
+ return (jsxRuntime.jsx(Heading.Heading, { ref: ref, size: 'xs', level: level, className: lite.clsx('ds-accordion__heading', className), ...rest, children: jsxRuntime.jsxs("button", { type: 'button', className: lite.clsx('ds-accordion__button', `ds-focus`), onClick: handleClick, "aria-expanded": context.open, "aria-controls": context.contentId, children: [jsxRuntime.jsx(akselIcons.ChevronDownIcon, { "aria-hidden": true, className: 'ds-accordion__expand-icon', fontSize: '1.5rem' }), jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'sm', children: jsxRuntime.jsx("span", { children: children }) })] }) }));
28
28
  });
29
29
  AccordionHeading.displayName = 'AccordionHeading';
30
30
 
@@ -10,7 +10,7 @@ const AccordionItemContext = React.createContext(null);
10
10
  * Accordion item component, contains `Accordion.Header` and `Accordion.Content` components.
11
11
  * @example
12
12
  * <AccordionItem>
13
- * <AccordionHeader>Header</AccordionHeader>
13
+ * <AccordionHeading>Header</AccordionHeading>
14
14
  * <AccordionContent>Content</AccordionContent>
15
15
  * </AccordionItem>
16
16
  */
@@ -0,0 +1,34 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ var jsxRuntime = require('react/jsx-runtime');
5
+ var lite = require('../../node_modules/clsx/dist/lite.js');
6
+ var React = require('react');
7
+ var Paragraph = require('../Typography/Paragraph/Paragraph.js');
8
+
9
+ const paragraphSizeMap = {
10
+ sm: 'xs',
11
+ md: 'sm',
12
+ lg: 'md',
13
+ };
14
+ /**
15
+ * `Badge` is a non-interactive component for displaying status with or without numbers.
16
+ *
17
+ * @example without children
18
+ * ```jsx
19
+ * <Badge color='accent' size='md' count={5} />
20
+ * ```
21
+ *
22
+ * @example with children
23
+ * ```jsx
24
+ * <Badge color='accent' size='md'>
25
+ * <Icon />
26
+ * </Badge>
27
+ * ```
28
+ */
29
+ const Badge = React.forwardRef(({ color = 'accent', size = 'md', placement = 'top-right', overlap = 'rectangle', count, maxCount, children, className, ...rest }, ref) => {
30
+ return (jsxRuntime.jsxs("div", { className: lite.clsx('ds-badge__wrapper', className), children: [children, jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, variant: 'short', size: paragraphSizeMap[size], children: jsxRuntime.jsx("span", { className: lite.clsx('ds-badge', `ds-badge--${size}`, `ds-badge--${color}`, count && 'ds-badge--count', children && `ds-badge--${placement}__${overlap}`, children && 'ds-badge--float'), ref: ref, ...rest, children: maxCount && count && count > maxCount ? `${maxCount}+` : count }) })] }));
31
+ });
32
+ Badge.displayName = 'Badge';
33
+
34
+ exports.Badge = Badge;
@@ -25,8 +25,8 @@ function _interopNamespaceDefault(e) {
25
25
 
26
26
  var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
27
27
 
28
- const Table = React__namespace.forwardRef(({ zebra = false, stickyHeader = false, border = false, size = 'md', className, children, ...rest }, ref) => {
29
- return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("table", { ref: ref, className: lite.clsx('ds-table', `ds-table--${size}`, zebra && 'ds-table--zebra', stickyHeader && 'ds-table--sticky-header', border && 'ds-table--border', `ds-paragraph--${size}`, className), ...rest, children: children }) }));
28
+ const Table = React__namespace.forwardRef(({ zebra = false, stickyHeader = false, border = false, hover = false, size = 'md', className, children, ...rest }, ref) => {
29
+ return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("table", { ref: ref, className: lite.clsx('ds-table', `ds-table--${size}`, zebra && 'ds-table--zebra', stickyHeader && 'ds-table--sticky-header', border && 'ds-table--border', hover && 'ds-table--hover', `ds-paragraph--${size}`, className), ...rest, children: children }) }));
30
30
  });
31
31
  Table.displayName = 'Table';
32
32
 
@@ -16,7 +16,7 @@ var Paragraph = require('../Typography/Paragraph/Paragraph.js');
16
16
  */
17
17
  const TabContent = React.forwardRef(({ children, value, className, ...rest }, ref) => {
18
18
  const { value: tabsValue, size } = React.useContext(TabsRoot.TabsContext);
19
- const active = value == tabsValue;
19
+ const active = value === tabsValue;
20
20
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: active && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, variant: 'short', size: size, children: jsxRuntime.jsx("div", { className: lite.clsx('ds-tabs__content', className), ref: ref, ...rest, children: children }) })) }));
21
21
  });
22
22
  TabContent.displayName = 'TabContent';
@@ -12,7 +12,7 @@ const useTabItem = (props) => {
12
12
  return {
13
13
  ...rest,
14
14
  id: buttonId,
15
- 'aria-selected': tabs.value == value,
15
+ 'aria-selected': tabs.value === value,
16
16
  role: 'tab',
17
17
  size: tabs.size,
18
18
  onClick: () => {
@@ -10,7 +10,7 @@ const useToggleGroupItem = (props) => {
10
10
  const genValue = React.useId();
11
11
  const toggleGroup = React.useContext(ToggleGroupRoot.ToggleGroupContext);
12
12
  const value = props.value ?? genValue;
13
- const active = toggleGroup.value == value;
13
+ const active = toggleGroup.value === value;
14
14
  const buttonId = `togglegroup-item-${React.useId()}`;
15
15
  return {
16
16
  ...rest,
@@ -29,6 +29,11 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
29
29
  const listRef = React.useRef([]);
30
30
  const listId = React.useId();
31
31
  const [inputValue, setInputValue] = React.useState(rest.inputValue || '');
32
+ React.useEffect(() => {
33
+ if (typeof rest.inputValue === 'string') {
34
+ setInputValue(rest.inputValue);
35
+ }
36
+ }, [rest.inputValue]);
32
37
  const { selectedOptions, options, restChildren, interactiveChildren, customIds, filteredOptionsChildren, filteredOptions, setSelectedOptions, } = useCombobox.useCombobox({
33
38
  children,
34
39
  inputValue,
@@ -52,7 +57,8 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
52
57
  React.useEffect(() => {
53
58
  if (value && value.length > 0 && !multiple) {
54
59
  const option = options[utilities.prefix(value[0])];
55
- setInputValue(option?.label || '');
60
+ inputRef.current &&
61
+ utilities.setReactInputValue(inputRef.current, option?.label || '');
56
62
  }
57
63
  }, [multiple, value, options]);
58
64
  React.useEffect(() => {
@@ -72,7 +78,7 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
72
78
  const { option, clear, remove } = args;
73
79
  if (clear) {
74
80
  setSelectedOptions({});
75
- setInputValue('');
81
+ inputRef.current && utilities.setReactInputValue(inputRef.current, '');
76
82
  onValueChange?.([]);
77
83
  return;
78
84
  }
@@ -93,7 +99,7 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
93
99
  else {
94
100
  newSelectedOptions[utilities.prefix(option.value)] = option;
95
101
  }
96
- setInputValue('');
102
+ inputRef.current && utilities.setReactInputValue(inputRef.current, '');
97
103
  inputRef.current?.focus();
98
104
  }
99
105
  else {
@@ -102,7 +108,8 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
102
108
  delete newSelectedOptions[key];
103
109
  }
104
110
  newSelectedOptions[utilities.prefix(option.value)] = option;
105
- setInputValue(option?.label || '');
111
+ inputRef.current &&
112
+ utilities.setReactInputValue(inputRef.current, option?.label || '');
106
113
  // move cursor to the end of the input
107
114
  setTimeout(() => {
108
115
  inputRef.current?.setSelectionRange(option?.label?.length || 0, option?.label?.length || 0);
@@ -26,9 +26,20 @@ const prefix = (value) => {
26
26
  const removePrefix = (value) => {
27
27
  return value.slice(INTERNAL_OPTION_PREFIX.length);
28
28
  };
29
+ const setReactInputValue = (input, value) => {
30
+ const previousValue = input.value;
31
+ input.value = value;
32
+ const tracker = input._valueTracker;
33
+ if (typeof tracker !== 'undefined') {
34
+ tracker.setValue(previousValue);
35
+ }
36
+ //'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
37
+ input.dispatchEvent(new Event('change', { bubbles: true }));
38
+ };
29
39
 
30
40
  exports.isComboboxCustom = isComboboxCustom;
31
41
  exports.isComboboxOption = isComboboxOption;
32
42
  exports.isInteractiveComboboxCustom = isInteractiveComboboxCustom;
33
43
  exports.prefix = prefix;
34
44
  exports.removePrefix = removePrefix;
45
+ exports.setReactInputValue = setReactInputValue;
package/dist/cjs/index.js CHANGED
@@ -9,6 +9,7 @@ var useRovingFocus = require('./utilities/RovingFocus/useRovingFocus.js');
9
9
  var RovingFocusItem = require('./utilities/RovingFocus/RovingFocusItem.js');
10
10
  var omit = require('./utilities/omit/omit.js');
11
11
  var Button = require('./components/Button/Button.js');
12
+ var Badge = require('./components/Badge/Badge.js');
12
13
  var index = require('./components/Breadcrumbs/index.js');
13
14
  var BreadcrumbsRoot = require('./components/Breadcrumbs/BreadcrumbsRoot.js');
14
15
  var BreadcrumbsNav = require('./components/Breadcrumbs/BreadcrumbsNav.js');
@@ -121,6 +122,7 @@ exports.getNextFocusableValue = RovingFocusItem.getNextFocusableValue;
121
122
  exports.getPrevFocusableValue = RovingFocusItem.getPrevFocusableValue;
122
123
  exports.omit = omit.omit;
123
124
  exports.Button = Button.Button;
125
+ exports.Badge = Badge.Badge;
124
126
  exports.Breadcrumbs = index.Breadcrumbs;
125
127
  exports.BreadcrumbsRoot = BreadcrumbsRoot.BreadcrumbsRoot;
126
128
  exports.BreadcrumbsNav = BreadcrumbsNav.BreadcrumbsNav;
@@ -19,7 +19,7 @@ function getPrevFocusableValue(items, value) {
19
19
  }
20
20
  const RovingFocusItem = React.forwardRef(({ value, asChild, ...rest }, ref) => {
21
21
  const Component = asChild ? index.Slot : 'div';
22
- const focusValue = value ?? (typeof rest.children == 'string' ? rest.children : '');
22
+ const focusValue = value ?? (typeof rest.children === 'string' ? rest.children : '');
23
23
  const { getOrderedItems, getRovingProps, orientation } = useRovingFocus.useRovingFocus(focusValue);
24
24
  const rovingProps = getRovingProps({
25
25
  onKeyDown: (e) => {
@@ -8,21 +8,21 @@ import { Heading } from '../Typography/Heading/Heading.js';
8
8
  import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
9
9
 
10
10
  /**
11
- * Accordion header component, contains a button to toggle the content.
11
+ * Accordion heading component, contains a button to toggle the content.
12
12
  * @example
13
- * <AccordionHeader>Header</AccordionHeader>
13
+ * <AccordionHeading>Header</AccordionHeading>
14
14
  */
15
15
  const AccordionHeading = forwardRef(({ level = 1, children, className, onHeaderClick, ...rest }, ref) => {
16
16
  const context = useContext(AccordionItemContext);
17
17
  if (context === null) {
18
- console.error('<Accordion.Header> has to be used within an <Accordion.Item>');
18
+ console.error('<Accordion.Heading> has to be used within an <Accordion.Item>');
19
19
  return null;
20
20
  }
21
21
  const handleClick = (e) => {
22
22
  context.toggleOpen();
23
23
  onHeaderClick?.(e);
24
24
  };
25
- return (jsx(Heading, { ref: ref, size: 'xs', level: level, className: clsx('ds-accordion__header', className), ...rest, children: jsxs("button", { type: 'button', className: clsx('ds-accordion__button', `ds-focus`), onClick: handleClick, "aria-expanded": context.open, "aria-controls": context.contentId, children: [jsx(ChevronDownIcon, { "aria-hidden": true, className: 'ds-accordion__expand-icon', fontSize: '1.5rem' }), jsx(Paragraph, { asChild: true, size: 'sm', children: jsx("span", { children: children }) })] }) }));
25
+ return (jsx(Heading, { ref: ref, size: 'xs', level: level, className: clsx('ds-accordion__heading', className), ...rest, children: jsxs("button", { type: 'button', className: clsx('ds-accordion__button', `ds-focus`), onClick: handleClick, "aria-expanded": context.open, "aria-controls": context.contentId, children: [jsx(ChevronDownIcon, { "aria-hidden": true, className: 'ds-accordion__expand-icon', fontSize: '1.5rem' }), jsx(Paragraph, { asChild: true, size: 'sm', children: jsx("span", { children: children }) })] }) }));
26
26
  });
27
27
  AccordionHeading.displayName = 'AccordionHeading';
28
28
 
@@ -8,7 +8,7 @@ const AccordionItemContext = createContext(null);
8
8
  * Accordion item component, contains `Accordion.Header` and `Accordion.Content` components.
9
9
  * @example
10
10
  * <AccordionItem>
11
- * <AccordionHeader>Header</AccordionHeader>
11
+ * <AccordionHeading>Header</AccordionHeading>
12
12
  * <AccordionContent>Content</AccordionContent>
13
13
  * </AccordionItem>
14
14
  */
@@ -0,0 +1,32 @@
1
+ 'use client';
2
+ import { jsxs, jsx } from 'react/jsx-runtime';
3
+ import { clsx } from '../../node_modules/clsx/dist/lite.js';
4
+ import { forwardRef } from 'react';
5
+ import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
6
+
7
+ const paragraphSizeMap = {
8
+ sm: 'xs',
9
+ md: 'sm',
10
+ lg: 'md',
11
+ };
12
+ /**
13
+ * `Badge` is a non-interactive component for displaying status with or without numbers.
14
+ *
15
+ * @example without children
16
+ * ```jsx
17
+ * <Badge color='accent' size='md' count={5} />
18
+ * ```
19
+ *
20
+ * @example with children
21
+ * ```jsx
22
+ * <Badge color='accent' size='md'>
23
+ * <Icon />
24
+ * </Badge>
25
+ * ```
26
+ */
27
+ const Badge = forwardRef(({ color = 'accent', size = 'md', placement = 'top-right', overlap = 'rectangle', count, maxCount, children, className, ...rest }, ref) => {
28
+ return (jsxs("div", { className: clsx('ds-badge__wrapper', className), children: [children, jsx(Paragraph, { asChild: true, variant: 'short', size: paragraphSizeMap[size], children: jsx("span", { className: clsx('ds-badge', `ds-badge--${size}`, `ds-badge--${color}`, count && 'ds-badge--count', children && `ds-badge--${placement}__${overlap}`, children && 'ds-badge--float'), ref: ref, ...rest, children: maxCount && count && count > maxCount ? `${maxCount}+` : count }) })] }));
29
+ });
30
+ Badge.displayName = 'Badge';
31
+
32
+ export { Badge };
@@ -4,8 +4,8 @@ import { clsx } from '../../node_modules/clsx/dist/lite.js';
4
4
  import * as React from 'react';
5
5
  import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
6
6
 
7
- const Table = React.forwardRef(({ zebra = false, stickyHeader = false, border = false, size = 'md', className, children, ...rest }, ref) => {
8
- return (jsx(Paragraph, { asChild: true, size: size, children: jsx("table", { ref: ref, className: clsx('ds-table', `ds-table--${size}`, zebra && 'ds-table--zebra', stickyHeader && 'ds-table--sticky-header', border && 'ds-table--border', `ds-paragraph--${size}`, className), ...rest, children: children }) }));
7
+ const Table = React.forwardRef(({ zebra = false, stickyHeader = false, border = false, hover = false, size = 'md', className, children, ...rest }, ref) => {
8
+ return (jsx(Paragraph, { asChild: true, size: size, children: jsx("table", { ref: ref, className: clsx('ds-table', `ds-table--${size}`, zebra && 'ds-table--zebra', stickyHeader && 'ds-table--sticky-header', border && 'ds-table--border', hover && 'ds-table--hover', `ds-paragraph--${size}`, className), ...rest, children: children }) }));
9
9
  });
10
10
  Table.displayName = 'Table';
11
11
 
@@ -14,7 +14,7 @@ import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
14
14
  */
15
15
  const TabContent = forwardRef(({ children, value, className, ...rest }, ref) => {
16
16
  const { value: tabsValue, size } = useContext(TabsContext);
17
- const active = value == tabsValue;
17
+ const active = value === tabsValue;
18
18
  return (jsx(Fragment, { children: active && (jsx(Paragraph, { asChild: true, variant: 'short', size: size, children: jsx("div", { className: clsx('ds-tabs__content', className), ref: ref, ...rest, children: children }) })) }));
19
19
  });
20
20
  TabContent.displayName = 'TabContent';
@@ -10,7 +10,7 @@ const useTabItem = (props) => {
10
10
  return {
11
11
  ...rest,
12
12
  id: buttonId,
13
- 'aria-selected': tabs.value == value,
13
+ 'aria-selected': tabs.value === value,
14
14
  role: 'tab',
15
15
  size: tabs.size,
16
16
  onClick: () => {
@@ -8,7 +8,7 @@ const useToggleGroupItem = (props) => {
8
8
  const genValue = useId();
9
9
  const toggleGroup = useContext(ToggleGroupContext);
10
10
  const value = props.value ?? genValue;
11
- const active = toggleGroup.value == value;
11
+ const active = toggleGroup.value === value;
12
12
  const buttonId = `togglegroup-item-${useId()}`;
13
13
  return {
14
14
  ...rest,
@@ -15,7 +15,7 @@ import ComboboxNative from './internal/ComboboxNative.js';
15
15
  import { useCombobox } from './useCombobox.js';
16
16
  import { useComboboxKeyboard } from './useComboboxKeyboard.js';
17
17
  import { useFloatingCombobox } from './useFloatingCombobox.js';
18
- import { prefix, removePrefix } from './utilities.js';
18
+ import { prefix, setReactInputValue, removePrefix } from './utilities.js';
19
19
  import { Box } from '../../Box/Box.js';
20
20
  import { Spinner } from '../../Spinner/Spinner.js';
21
21
  import { useDebounceCallback } from '../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
@@ -27,6 +27,11 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
27
27
  const listRef = useRef([]);
28
28
  const listId = useId();
29
29
  const [inputValue, setInputValue] = useState(rest.inputValue || '');
30
+ useEffect(() => {
31
+ if (typeof rest.inputValue === 'string') {
32
+ setInputValue(rest.inputValue);
33
+ }
34
+ }, [rest.inputValue]);
30
35
  const { selectedOptions, options, restChildren, interactiveChildren, customIds, filteredOptionsChildren, filteredOptions, setSelectedOptions, } = useCombobox({
31
36
  children,
32
37
  inputValue,
@@ -50,7 +55,8 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
50
55
  useEffect(() => {
51
56
  if (value && value.length > 0 && !multiple) {
52
57
  const option = options[prefix(value[0])];
53
- setInputValue(option?.label || '');
58
+ inputRef.current &&
59
+ setReactInputValue(inputRef.current, option?.label || '');
54
60
  }
55
61
  }, [multiple, value, options]);
56
62
  useEffect(() => {
@@ -70,7 +76,7 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
70
76
  const { option, clear, remove } = args;
71
77
  if (clear) {
72
78
  setSelectedOptions({});
73
- setInputValue('');
79
+ inputRef.current && setReactInputValue(inputRef.current, '');
74
80
  onValueChange?.([]);
75
81
  return;
76
82
  }
@@ -91,7 +97,7 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
91
97
  else {
92
98
  newSelectedOptions[prefix(option.value)] = option;
93
99
  }
94
- setInputValue('');
100
+ inputRef.current && setReactInputValue(inputRef.current, '');
95
101
  inputRef.current?.focus();
96
102
  }
97
103
  else {
@@ -100,7 +106,8 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
100
106
  delete newSelectedOptions[key];
101
107
  }
102
108
  newSelectedOptions[prefix(option.value)] = option;
103
- setInputValue(option?.label || '');
109
+ inputRef.current &&
110
+ setReactInputValue(inputRef.current, option?.label || '');
104
111
  // move cursor to the end of the input
105
112
  setTimeout(() => {
106
113
  inputRef.current?.setSelectionRange(option?.label?.length || 0, option?.label?.length || 0);
@@ -24,5 +24,15 @@ const prefix = (value) => {
24
24
  const removePrefix = (value) => {
25
25
  return value.slice(INTERNAL_OPTION_PREFIX.length);
26
26
  };
27
+ const setReactInputValue = (input, value) => {
28
+ const previousValue = input.value;
29
+ input.value = value;
30
+ const tracker = input._valueTracker;
31
+ if (typeof tracker !== 'undefined') {
32
+ tracker.setValue(previousValue);
33
+ }
34
+ //'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
35
+ input.dispatchEvent(new Event('change', { bubbles: true }));
36
+ };
27
37
 
28
- export { isComboboxCustom, isComboboxOption, isInteractiveComboboxCustom, prefix, removePrefix };
38
+ export { isComboboxCustom, isComboboxOption, isInteractiveComboboxCustom, prefix, removePrefix, setReactInputValue };
package/dist/esm/index.js CHANGED
@@ -7,6 +7,7 @@ export { useRovingFocus } from './utilities/RovingFocus/useRovingFocus.js';
7
7
  export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue } from './utilities/RovingFocus/RovingFocusItem.js';
8
8
  export { omit } from './utilities/omit/omit.js';
9
9
  export { Button } from './components/Button/Button.js';
10
+ export { Badge } from './components/Badge/Badge.js';
10
11
  export { Breadcrumbs } from './components/Breadcrumbs/index.js';
11
12
  export { BreadcrumbsRoot } from './components/Breadcrumbs/BreadcrumbsRoot.js';
12
13
  export { BreadcrumbsNav } from './components/Breadcrumbs/BreadcrumbsNav.js';
@@ -17,7 +17,7 @@ function getPrevFocusableValue(items, value) {
17
17
  }
18
18
  const RovingFocusItem = forwardRef(({ value, asChild, ...rest }, ref) => {
19
19
  const Component = asChild ? Slot : 'div';
20
- const focusValue = value ?? (typeof rest.children == 'string' ? rest.children : '');
20
+ const focusValue = value ?? (typeof rest.children === 'string' ? rest.children : '');
21
21
  const { getOrderedItems, getRovingProps, orientation } = useRovingFocus(focusValue);
22
22
  const rovingProps = getRovingProps({
23
23
  onKeyDown: (e) => {
@@ -1,5 +1,5 @@
1
1
  import type { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
2
- export type AccordionHeaderProps = {
2
+ export type AccordionHeadingProps = {
3
3
  /**
4
4
  * Heading level. Use this to make sure the heading is correct according to you page heading levels
5
5
  * @default 1
@@ -11,9 +11,9 @@ export type AccordionHeaderProps = {
11
11
  children: ReactNode;
12
12
  } & HTMLAttributes<HTMLHeadingElement>;
13
13
  /**
14
- * Accordion header component, contains a button to toggle the content.
14
+ * Accordion heading component, contains a button to toggle the content.
15
15
  * @example
16
- * <AccordionHeader>Header</AccordionHeader>
16
+ * <AccordionHeading>Header</AccordionHeading>
17
17
  */
18
18
  export declare const AccordionHeading: import("react").ForwardRefExoticComponent<{
19
19
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionHeading.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionHeading.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAO1E,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,oCAAoC;IACpC,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;IACjE,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEvC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;IAhB3B;;;OAGG;YACK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;IAC7B,oCAAoC;oBACpB,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS;IAChE,mBAAmB;cACT,SAAS;2FAoDnB,CAAC"}
1
+ {"version":3,"file":"AccordionHeading.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionHeading.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAO1E,MAAM,MAAM,qBAAqB,GAAG;IAClC;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,oCAAoC;IACpC,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;IACjE,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEvC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;IAhB3B;;;OAGG;YACK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;IAC7B,oCAAoC;oBACpB,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS;IAChE,mBAAmB;cACT,SAAS;2FAoDnB,CAAC"}
@@ -26,7 +26,7 @@ export declare const AccordionItemContext: import("react").Context<AccordionItem
26
26
  * Accordion item component, contains `Accordion.Header` and `Accordion.Content` components.
27
27
  * @example
28
28
  * <AccordionItem>
29
- * <AccordionHeader>Header</AccordionHeader>
29
+ * <AccordionHeading>Header</AccordionHeading>
30
30
  * <AccordionContent>Content</AccordionContent>
31
31
  * </AccordionItem>
32
32
  */
@@ -1,6 +1,6 @@
1
1
  import type { AccordionContentProps } from './AccordionContent';
2
2
  import { AccordionContent } from './AccordionContent';
3
- import type { AccordionHeaderProps } from './AccordionHeading';
3
+ import type { AccordionHeadingProps } from './AccordionHeading';
4
4
  import { AccordionHeading } from './AccordionHeading';
5
5
  import type { AccordionItemProps } from './AccordionItem';
6
6
  import { AccordionItem } from './AccordionItem';
@@ -23,6 +23,6 @@ type AccordionComponent = {
23
23
  * <Accordion.Item>
24
24
  */
25
25
  declare const Accordion: AccordionComponent;
26
- export type { AccordionRootProps, AccordionContentProps, AccordionHeaderProps, AccordionItemProps, };
26
+ export type { AccordionRootProps, AccordionContentProps, AccordionHeadingProps, AccordionItemProps, };
27
27
  export { Accordion, AccordionRoot, AccordionItem, AccordionContent, AccordionHeading, };
28
28
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,aAAa,CAAC;IAC3B,IAAI,EAAE,OAAO,aAAa,CAAC;IAC3B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,OAAO,EAAE,OAAO,gBAAgB,CAAC;CAClC,CAAC;AAEF;;;;;;;;;GASG;AACH,QAAA,MAAM,SAAS,EAAS,kBAAkB,CAAC;AAY3C,YAAY,EACV,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,kBAAkB,GACnB,CAAC;AACF,OAAO,EACL,SAAS,EACT,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,gBAAgB,GACjB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,aAAa,CAAC;IAC3B,IAAI,EAAE,OAAO,aAAa,CAAC;IAC3B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,OAAO,EAAE,OAAO,gBAAgB,CAAC;CAClC,CAAC;AAEF;;;;;;;;;GASG;AACH,QAAA,MAAM,SAAS,EAAS,kBAAkB,CAAC;AAY3C,YAAY,EACV,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,GACnB,CAAC;AACF,OAAO,EACL,SAAS,EACT,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,gBAAgB,GACjB,CAAC"}
@@ -20,6 +20,11 @@ export type TableProps = {
20
20
  * @default false
21
21
  */
22
22
  border?: boolean;
23
+ /**
24
+ * If true, the table will have a hover effect on rows
25
+ * @default false
26
+ */
27
+ hover?: boolean;
23
28
  } & Omit<React.TableHTMLAttributes<HTMLTableElement>, 'border'>;
24
29
  export declare const Table: React.ForwardRefExoticComponent<{
25
30
  /**
@@ -42,5 +47,10 @@ export declare const Table: React.ForwardRefExoticComponent<{
42
47
  * @default false
43
48
  */
44
49
  border?: boolean;
50
+ /**
51
+ * If true, the table will have a hover effect on rows
52
+ * @default false
53
+ */
54
+ hover?: boolean;
45
55
  } & Omit<React.TableHTMLAttributes<HTMLTableElement>, "border"> & React.RefAttributes<HTMLTableElement>>;
46
56
  //# sourceMappingURL=Table.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,UAAU,GAAG;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEhE,eAAO,MAAM,KAAK;IAtBhB;;;OAGG;WACI,IAAI,GAAG,IAAI,GAAG,IAAI;IACzB;;;OAGG;YACK,OAAO;IACf;;;OAGG;mBACY,OAAO;IACtB;;;OAGG;aACM,OAAO;wGAoCjB,CAAC"}
1
+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,UAAU,GAAG;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEhE,eAAO,MAAM,KAAK;IA3BhB;;;OAGG;WACI,IAAI,GAAG,IAAI,GAAG,IAAI;IACzB;;;OAGG;YACK,OAAO;IACf;;;OAGG;mBACY,OAAO;IACtB;;;OAGG;aACM,OAAO;IAChB;;;OAGG;YACK,OAAO;wGAsChB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Combobox/Combobox.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Combobox/Combobox.tsx"],"names":[],"mappings":"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"}
@@ -11,4 +11,11 @@ export declare function isInteractiveComboboxCustom(child: ReactNode): child is
11
11
  */
12
12
  export declare const prefix: (value?: string) => string;
13
13
  export declare const removePrefix: (value: string) => string;
14
+ type ReactInternalHack = {
15
+ _valueTracker?: {
16
+ setValue: (a: string) => void;
17
+ };
18
+ };
19
+ export declare const setReactInputValue: (input: HTMLInputElement & ReactInternalHack, value: string) => void;
20
+ export {};
14
21
  //# sourceMappingURL=utilities.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Combobox/utilities.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,GACf,KAAK,IAAI,YAAY,CAAC,mBAAmB,CAAC,CAE5C;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,GACf,KAAK,IAAI,YAAY,CAAC,mBAAmB,CAAC,CAE5C;AAED,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,SAAS,GACf,KAAK,IAAI,YAAY,CAAC,mBAAmB,CAAC,CAE5C;AAID;;;;GAIG;AACH,eAAO,MAAM,MAAM,WAAY,MAAM,KAAG,MAEvC,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,MAE5C,CAAC"}
1
+ {"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Combobox/utilities.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,GACf,KAAK,IAAI,YAAY,CAAC,mBAAmB,CAAC,CAE5C;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,GACf,KAAK,IAAI,YAAY,CAAC,mBAAmB,CAAC,CAE5C;AAED,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,SAAS,GACf,KAAK,IAAI,YAAY,CAAC,mBAAmB,CAAC,CAE5C;AAID;;;;GAIG;AACH,eAAO,MAAM,MAAM,WAAY,MAAM,KAAG,MAEvC,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,MAE5C,CAAC;AAIF,KAAK,iBAAiB,GAAG;IAAE,aAAa,CAAC,EAAE;QAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;KAAE,CAAA;CAAE,CAAC;AAE/E,eAAO,MAAM,kBAAkB,UACtB,gBAAgB,GAAG,iBAAiB,SACpC,MAAM,KACZ,IAaF,CAAC"}
@@ -1,4 +1,5 @@
1
1
  export * from './Button';
2
+ export * from './Badge';
2
3
  export * from './Breadcrumbs';
3
4
  export * from './HelpText';
4
5
  export * from './Spinner';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC"}
package/package.json CHANGED
@@ -1,9 +1,12 @@
1
1
  {
2
2
  "name": "@digdir/designsystemet-react",
3
- "version": "1.0.0-next.16",
3
+ "version": "1.0.0-next.32",
4
4
  "description": "React components for Designsystemet",
5
5
  "author": "Designsystemet team",
6
- "repository": "https://github.com/digdir/designsystemet",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/digdir/designsystemet.git"
9
+ },
7
10
  "homepage": "https://github.com/digdir/designsystemet/tree/main/packages/react",
8
11
  "license": "MIT",
9
12
  "types": "dist/types/index.d.ts",