@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.
- package/dist/cjs/components/Accordion/AccordionHeading.js +4 -4
- package/dist/cjs/components/Accordion/AccordionItem.js +1 -1
- package/dist/cjs/components/Badge/Badge.js +34 -0
- package/dist/cjs/components/Table/Table.js +2 -2
- package/dist/cjs/components/Tabs/TabContent.js +1 -1
- package/dist/cjs/components/Tabs/useTab.js +1 -1
- package/dist/cjs/components/ToggleGroup/ToggleGroupItem/useToggleGroupitem.js +1 -1
- package/dist/cjs/components/form/Combobox/Combobox.js +11 -4
- package/dist/cjs/components/form/Combobox/utilities.js +11 -0
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/utilities/RovingFocus/RovingFocusItem.js +1 -1
- package/dist/esm/components/Accordion/AccordionHeading.js +4 -4
- package/dist/esm/components/Accordion/AccordionItem.js +1 -1
- package/dist/esm/components/Badge/Badge.js +32 -0
- package/dist/esm/components/Table/Table.js +2 -2
- package/dist/esm/components/Tabs/TabContent.js +1 -1
- package/dist/esm/components/Tabs/useTab.js +1 -1
- package/dist/esm/components/ToggleGroup/ToggleGroupItem/useToggleGroupitem.js +1 -1
- package/dist/esm/components/form/Combobox/Combobox.js +12 -5
- package/dist/esm/components/form/Combobox/utilities.js +11 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/utilities/RovingFocus/RovingFocusItem.js +1 -1
- package/dist/types/components/Accordion/AccordionHeading.d.ts +3 -3
- package/dist/types/components/Accordion/AccordionHeading.d.ts.map +1 -1
- package/dist/types/components/Accordion/AccordionItem.d.ts +1 -1
- package/dist/types/components/Accordion/index.d.ts +2 -2
- package/dist/types/components/Accordion/index.d.ts.map +1 -1
- package/dist/types/components/Table/Table.d.ts +10 -0
- package/dist/types/components/Table/Table.d.ts.map +1 -1
- package/dist/types/components/form/Combobox/Combobox.d.ts.map +1 -1
- package/dist/types/components/form/Combobox/utilities.d.ts +7 -0
- package/dist/types/components/form/Combobox/utilities.d.ts.map +1 -1
- package/dist/types/components/index.d.ts +1 -0
- package/dist/types/components/index.d.ts.map +1 -1
- 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
|
|
13
|
+
* Accordion heading component, contains a button to toggle the content.
|
|
14
14
|
* @example
|
|
15
|
-
* <
|
|
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.
|
|
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-
|
|
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
|
-
* <
|
|
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
|
|
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';
|
|
@@ -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
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
|
11
|
+
* Accordion heading component, contains a button to toggle the content.
|
|
12
12
|
* @example
|
|
13
|
-
* <
|
|
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.
|
|
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-
|
|
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
|
-
* <
|
|
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
|
|
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';
|
|
@@ -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
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
|
14
|
+
* Accordion heading component, contains a button to toggle the content.
|
|
15
15
|
* @example
|
|
16
|
-
* <
|
|
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,
|
|
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
|
-
* <
|
|
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 {
|
|
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,
|
|
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,
|
|
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;
|
|
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":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAIzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAUtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAM5C,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IACzD;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1C,GAAG,WAAW,GACb,cAAc,GACd,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAEtD,eAAO,MAAM,iBAAiB;IA9F5B;;;;OAIG;YACK,SAAS;IACjB;;;OAGG;gBACS,OAAO;IACnB;;OAEG;YACK,MAAM,EAAE;IAChB;;OAEG;mBACY,MAAM,EAAE;IACvB;;OAEG;oBACa,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI;IACzC;;;OAGG;eACQ,OAAO;IAClB;;OAEG;WACI,MAAM;IACb;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;gBACS,OAAO;IACnB;;;OAGG;sBACe,OAAO;IACzB;;;OAGG;uBACgB,MAAM;IACzB;;;;OAIG;cACO,OAAO;IACjB;;OAEG;iBACU,MAAM;IACnB;;;;OAIG;cACO,OAAO;IACjB;;;OAGG;mBACY,MAAM;IACrB;;;;;;;OAOG;aACM,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO;IACxD;;;;;;OAMG;kBACW,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM;;;;;;;;;
|
|
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 +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.
|
|
3
|
+
"version": "1.0.0-next.32",
|
|
4
4
|
"description": "React components for Designsystemet",
|
|
5
5
|
"author": "Designsystemet team",
|
|
6
|
-
"repository":
|
|
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",
|