@digdir/designsystemet-react 0.55.1-alpha.0 → 0.55.1-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/DropdownMenu/DropdownMenu.js +2 -2
- package/dist/cjs/components/form/Checkbox/Checkbox.js +2 -2
- package/dist/cjs/components/form/Radio/Radio.js +2 -2
- package/dist/esm/components/DropdownMenu/DropdownMenu.js +2 -2
- package/dist/esm/components/form/Checkbox/Checkbox.js +2 -2
- package/dist/esm/components/form/Radio/Radio.js +2 -2
- package/dist/types/components/DropdownMenu/DropdownMenu.d.ts +1 -6
- package/dist/types/components/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/types/components/form/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/types/components/form/Radio/Radio.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
|
|
7
|
-
const DropdownMenu = ({ open, onClose, placement = 'bottom-end', size = 'medium', portal, children,
|
|
7
|
+
const DropdownMenu = ({ open, onClose, placement = 'bottom-end', size = 'medium', portal, children, }) => {
|
|
8
8
|
const triggerRef = React.useRef(null);
|
|
9
9
|
const [internalOpen, setInternalOpen] = React.useState(open ?? false);
|
|
10
|
-
const anchorEl =
|
|
10
|
+
const anchorEl = triggerRef.current;
|
|
11
11
|
const isControlled = typeof open === 'boolean';
|
|
12
12
|
React.useEffect(() => {
|
|
13
13
|
setInternalOpen(open ?? false);
|
|
@@ -12,7 +12,7 @@ var objectUtils = require('../../../utilities/objectUtils.js');
|
|
|
12
12
|
var Label = require('../../Typography/Label/Label.js');
|
|
13
13
|
|
|
14
14
|
const Checkbox = React.forwardRef((props, ref) => {
|
|
15
|
-
const { children, description, className, ...rest } = props;
|
|
15
|
+
const { children, description, className, style, ...rest } = props;
|
|
16
16
|
const { inputProps, descriptionId, hasError, size = 'medium', readOnly, } = useCheckbox.useCheckbox(props);
|
|
17
17
|
const inputRef = floatingUi_react.useMergeRefs([
|
|
18
18
|
ref,
|
|
@@ -22,7 +22,7 @@ const Checkbox = React.forwardRef((props, ref) => {
|
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
24
|
]);
|
|
25
|
-
return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: clsx.clsx(Checkbox_module.container, Checkbox_module[size], inputProps.disabled && Checkbox_module.disabled, hasError && Checkbox_module.error, readOnly && Checkbox_module.readonly, className), children: [jsxRuntime.jsx("input", { className: Checkbox_module.input, ref: inputRef, ...objectUtils.omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), jsxRuntime.jsx(Label.Label, { className: Checkbox_module.label, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: Checkbox_module.description, children: description }) }))] }) }));
|
|
25
|
+
return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: clsx.clsx(Checkbox_module.container, Checkbox_module[size], inputProps.disabled && Checkbox_module.disabled, hasError && Checkbox_module.error, readOnly && Checkbox_module.readonly, className), style: style, children: [jsxRuntime.jsx("input", { className: Checkbox_module.input, ref: inputRef, ...objectUtils.omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), jsxRuntime.jsx(Label.Label, { className: Checkbox_module.label, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: Checkbox_module.description, children: description }) }))] }) }));
|
|
26
26
|
});
|
|
27
27
|
Checkbox.displayName = 'Checkbox';
|
|
28
28
|
|
|
@@ -11,9 +11,9 @@ var objectUtils = require('../../../utilities/objectUtils.js');
|
|
|
11
11
|
var Label = require('../../Typography/Label/Label.js');
|
|
12
12
|
|
|
13
13
|
const Radio = React.forwardRef((props, ref) => {
|
|
14
|
-
const { children, description, className, ...rest } = props;
|
|
14
|
+
const { children, description, className, style, ...rest } = props;
|
|
15
15
|
const { inputProps, descriptionId, hasError, size = 'medium', readOnly, } = useRadio.useRadio(props);
|
|
16
|
-
return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: clsx.clsx(Radio_module.container, Radio_module[size], inputProps.disabled && Radio_module.disabled, hasError && Radio_module.error, readOnly && Radio_module.readonly, className), children: [jsxRuntime.jsx("input", { className: Radio_module.input, ref: ref, ...objectUtils.omit(['size', 'error'], rest), ...inputProps }), jsxRuntime.jsx(Label.Label, { className: Radio_module.label, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: Radio_module.description, children: description }) }))] }) }));
|
|
16
|
+
return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: clsx.clsx(Radio_module.container, Radio_module[size], inputProps.disabled && Radio_module.disabled, hasError && Radio_module.error, readOnly && Radio_module.readonly, className), style: style, children: [jsxRuntime.jsx("input", { className: Radio_module.input, ref: ref, ...objectUtils.omit(['size', 'error'], rest), ...inputProps }), jsxRuntime.jsx(Label.Label, { className: Radio_module.label, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: Radio_module.description, children: description }) }))] }) }));
|
|
17
17
|
});
|
|
18
18
|
Radio.displayName = 'Radio';
|
|
19
19
|
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { useRef, useState, useEffect, createContext } from 'react';
|
|
4
4
|
|
|
5
|
-
const DropdownMenu = ({ open, onClose, placement = 'bottom-end', size = 'medium', portal, children,
|
|
5
|
+
const DropdownMenu = ({ open, onClose, placement = 'bottom-end', size = 'medium', portal, children, }) => {
|
|
6
6
|
const triggerRef = useRef(null);
|
|
7
7
|
const [internalOpen, setInternalOpen] = useState(open ?? false);
|
|
8
|
-
const anchorEl =
|
|
8
|
+
const anchorEl = triggerRef.current;
|
|
9
9
|
const isControlled = typeof open === 'boolean';
|
|
10
10
|
useEffect(() => {
|
|
11
11
|
setInternalOpen(open ?? false);
|
|
@@ -10,7 +10,7 @@ import { omit } from '../../../utilities/objectUtils.js';
|
|
|
10
10
|
import { Label } from '../../Typography/Label/Label.js';
|
|
11
11
|
|
|
12
12
|
const Checkbox = forwardRef((props, ref) => {
|
|
13
|
-
const { children, description, className, ...rest } = props;
|
|
13
|
+
const { children, description, className, style, ...rest } = props;
|
|
14
14
|
const { inputProps, descriptionId, hasError, size = 'medium', readOnly, } = useCheckbox(props);
|
|
15
15
|
const inputRef = useMergeRefs([
|
|
16
16
|
ref,
|
|
@@ -20,7 +20,7 @@ const Checkbox = forwardRef((props, ref) => {
|
|
|
20
20
|
}
|
|
21
21
|
},
|
|
22
22
|
]);
|
|
23
|
-
return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx(classes.container, classes[size], inputProps.disabled && classes.disabled, hasError && classes.error, readOnly && classes.readonly, className), children: [jsx("input", { className: classes.input, ref: inputRef, ...omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), jsx(Label, { className: classes.label, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: classes.description, children: description }) }))] }) }));
|
|
23
|
+
return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx(classes.container, classes[size], inputProps.disabled && classes.disabled, hasError && classes.error, readOnly && classes.readonly, className), style: style, children: [jsx("input", { className: classes.input, ref: inputRef, ...omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), jsx(Label, { className: classes.label, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: classes.description, children: description }) }))] }) }));
|
|
24
24
|
});
|
|
25
25
|
Checkbox.displayName = 'Checkbox';
|
|
26
26
|
|
|
@@ -9,9 +9,9 @@ import { omit } from '../../../utilities/objectUtils.js';
|
|
|
9
9
|
import { Label } from '../../Typography/Label/Label.js';
|
|
10
10
|
|
|
11
11
|
const Radio = forwardRef((props, ref) => {
|
|
12
|
-
const { children, description, className, ...rest } = props;
|
|
12
|
+
const { children, description, className, style, ...rest } = props;
|
|
13
13
|
const { inputProps, descriptionId, hasError, size = 'medium', readOnly, } = useRadio(props);
|
|
14
|
-
return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx(classes.container, classes[size], inputProps.disabled && classes.disabled, hasError && classes.error, readOnly && classes.readonly, className), children: [jsx("input", { className: classes.input, ref: ref, ...omit(['size', 'error'], rest), ...inputProps }), jsx(Label, { className: classes.label, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: classes.description, children: description }) }))] }) }));
|
|
14
|
+
return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx(classes.container, classes[size], inputProps.disabled && classes.disabled, hasError && classes.error, readOnly && classes.readonly, className), style: style, children: [jsx("input", { className: classes.input, ref: ref, ...omit(['size', 'error'], rest), ...inputProps }), jsx(Label, { className: classes.label, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: classes.description, children: description }) }))] }) }));
|
|
15
15
|
});
|
|
16
16
|
Radio.displayName = 'Radio';
|
|
17
17
|
|
|
@@ -2,11 +2,6 @@ import type * as React from 'react';
|
|
|
2
2
|
import type { Placement } from '@floating-ui/react';
|
|
3
3
|
import type { PortalProps } from '../../types/Portal';
|
|
4
4
|
export type DropdownMenuProps = {
|
|
5
|
-
/** Element the dropdown anchors to
|
|
6
|
-
* @deprecated Use `DropdownMenu.Trigger` instead
|
|
7
|
-
* @see [Documentation](https://storybook.designsystemet.no/?path=/docs/komponenter-dropdownmenu--docs)
|
|
8
|
-
*/
|
|
9
|
-
anchorEl?: Element | null;
|
|
10
5
|
/** Whether the dropdown is open or not.
|
|
11
6
|
* @default false
|
|
12
7
|
*/
|
|
@@ -24,7 +19,7 @@ export type DropdownMenuProps = {
|
|
|
24
19
|
children: React.ReactNode;
|
|
25
20
|
} & PortalProps;
|
|
26
21
|
export declare const DropdownMenu: {
|
|
27
|
-
({ open, onClose, placement, size, portal, children,
|
|
22
|
+
({ open, onClose, placement, size, portal, children, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
28
23
|
displayName: string;
|
|
29
24
|
};
|
|
30
25
|
type DropdownMenuContextType = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG;IAC9B
|
|
1
|
+
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;QAEI;IACJ,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,WAAW,CAAC;AAEhB,eAAO,MAAM,YAAY;4DAOtB,iBAAiB;;CA4BnB,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACrC,IAAI,EAAE,WAAW,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;IAC7C,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,mBAAmB,wCAM9B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAO5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKtD,MAAM,MAAM,aAAa,GAAG;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC,GAC3C,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;AAEhE,eAAO,MAAM,QAAQ;IAXnB,qBAAqB;eACV,SAAS;IACpB,mCAAmC;WAC5B,MAAM;IACb;;OAEG;;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAO5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKtD,MAAM,MAAM,aAAa,GAAG;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC,GAC3C,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;AAEhE,eAAO,MAAM,QAAQ;IAXnB,qBAAqB;eACV,SAAS;IACpB,mCAAmC;WAC5B,MAAM;IACb;;OAEG;;gKA0EJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKtD,MAAM,MAAM,UAAU,GAAG;IACvB,kBAAkB;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC,GAC3C,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;AAEhE,eAAO,MAAM,KAAK;IAPhB,kBAAkB;eACP,SAAS;IACpB,mCAAmC;WAC5B,MAAM;
|
|
1
|
+
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKtD,MAAM,MAAM,UAAU,GAAG;IACvB,kBAAkB;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC,GAC3C,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;AAEhE,eAAO,MAAM,KAAK;IAPhB,kBAAkB;eACP,SAAS;IACpB,mCAAmC;WAC5B,MAAM;gKA4Db,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digdir/designsystemet-react",
|
|
3
|
-
"version": "0.55.1-alpha.
|
|
3
|
+
"version": "0.55.1-alpha.1",
|
|
4
4
|
"description": "React components for Designsystemet",
|
|
5
5
|
"author": "Designsystemet team",
|
|
6
6
|
"repository": "https://github.com/digdir/designsystemet",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"rollup": "^4.12.1",
|
|
44
44
|
"typescript": "^5.4.2"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "36ff9cf870adfc32bf9d8cbe5d32ee63f5b0d8e3"
|
|
47
47
|
}
|