@digdir/designsystemet-react 1.8.0 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +2 -2
  2. package/dist/cjs/components/dialog/dialog.js +2 -2
  3. package/dist/cjs/components/popover/popover.js +1 -1
  4. package/dist/cjs/components/suggestion/suggestion-clear.js +1 -1
  5. package/dist/esm/components/dialog/dialog.js +2 -2
  6. package/dist/esm/components/popover/popover.js +1 -1
  7. package/dist/esm/components/suggestion/suggestion-clear.js +1 -1
  8. package/dist/types/components/dialog/dialog.d.ts +13 -1
  9. package/dist/types/components/dialog/dialog.d.ts.map +1 -1
  10. package/dist/types/components/suggestion/suggestion-clear.d.ts.map +1 -1
  11. package/package.json +6 -6
package/README.md CHANGED
@@ -3,8 +3,8 @@
3
3
  React implementation of the Designsystemet components
4
4
 
5
5
  - Uses `@digdir/designsystemet-css` for styling.
6
- - Uses `@digdir/designsystemet-theme` or CSS file generated from `@digdir/designsystemet tokens build` for theming.
7
- - Build your own theme on https://theme.designsystemet.no/
6
+ - Uses `@digdir/designsystemet-css/theme` or CSS file generated from `@digdir/designsystemet tokens build` for theming.
7
+ - Build your own theme on https://theme.designsystemet.no/en
8
8
  - All components support `ref`.
9
9
  - All components support SSR.
10
10
  - Use full component name, e.g. `CardBlock` instead of `Card.Block`
package/dist/cjs/components/dialog/dialog.js CHANGED
@@ -32,7 +32,7 @@ var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.
32
32
  * Content
33
33
  * </Dialog>
34
34
  */
35
- const Dialog = react.forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
35
+ const Dialog = react.forwardRef(function Dialog({ asChild, children, className, placement = 'center', closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
36
36
  const contextRef = react.useContext(dialogTriggerContext.Context);
37
37
  const dialogRef = react.useRef(null); // This local ref is used to make sure the dialog works without a DialogTriggerContext
38
38
  const Component = asChild ? reactSlot.Slot : 'dialog';
@@ -89,7 +89,7 @@ const Dialog = react.forwardRef(function Dialog({ asChild, children, className,
89
89
  currentRef?.addEventListener('close', handleClose);
90
90
  return () => currentRef?.removeEventListener('close', handleClose);
91
91
  }, [onClose]);
92
- return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, closedby: closedby, ...rest, children: [closeButton !== false && (jsxRuntime.jsx(button.Button, { "aria-label": closeButton, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
92
+ return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-placement": placement, "data-modal": modal, closedby: closedby, ...rest, children: [closeButton !== false && (jsxRuntime.jsx(button.Button, { "aria-label": closeButton, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
93
93
  });
94
94
 
95
95
  exports.Dialog = Dialog;
package/dist/cjs/components/popover/popover.js CHANGED
@@ -47,7 +47,7 @@ const Popover = react.forwardRef(function Popover({ id, className, onClose, onOp
47
47
  setInternalOpen(false);
48
48
  onClose?.();
49
49
  }
50
- else if (isTrigger) {
50
+ else if (!controlledOpen && isTrigger) {
51
51
  setInternalOpen(true);
52
52
  onOpen?.();
53
53
  }
package/dist/cjs/components/suggestion/suggestion-clear.js CHANGED
@@ -17,7 +17,7 @@ var button = require('../button/button.js');
17
17
  * <Suggestion.List />
18
18
  * </Suggestion>
19
19
  */
20
- const SuggestionClear = react.forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
20
+ const SuggestionClear = react.forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', ...rest }, ref) {
21
21
  return (jsxRuntime.jsx(button.Button, { "aria-label": label, asChild: true, icon: true, hidden: true, ref: ref, variant: 'tertiary', ...rest, children: jsxRuntime.jsx("del", {}) }));
22
22
  });
23
23
 
package/dist/esm/components/dialog/dialog.js CHANGED
@@ -30,7 +30,7 @@ import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-ref
30
30
  * Content
31
31
  * </Dialog>
32
32
  */
33
- const Dialog = forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
33
+ const Dialog = forwardRef(function Dialog({ asChild, children, className, placement = 'center', closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
34
34
  const contextRef = useContext(Context);
35
35
  const dialogRef = useRef(null); // This local ref is used to make sure the dialog works without a DialogTriggerContext
36
36
  const Component = asChild ? Slot : 'dialog';
@@ -87,7 +87,7 @@ const Dialog = forwardRef(function Dialog({ asChild, children, className, closeB
87
87
  currentRef?.addEventListener('close', handleClose);
88
88
  return () => currentRef?.removeEventListener('close', handleClose);
89
89
  }, [onClose]);
90
- return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, closedby: closedby, ...rest, children: [closeButton !== false && (jsx(Button, { "aria-label": closeButton, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
90
+ return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-placement": placement, "data-modal": modal, closedby: closedby, ...rest, children: [closeButton !== false && (jsx(Button, { "aria-label": closeButton, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
91
91
  });
92
92
 
93
93
  export { Dialog };
package/dist/esm/components/popover/popover.js CHANGED
@@ -45,7 +45,7 @@ const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, op
45
45
  setInternalOpen(false);
46
46
  onClose?.();
47
47
  }
48
- else if (isTrigger) {
48
+ else if (!controlledOpen && isTrigger) {
49
49
  setInternalOpen(true);
50
50
  onOpen?.();
51
51
  }
package/dist/esm/components/suggestion/suggestion-clear.js CHANGED
@@ -15,7 +15,7 @@ import { Button } from '../button/button.js';
15
15
  * <Suggestion.List />
16
16
  * </Suggestion>
17
17
  */
18
- const SuggestionClear = forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
18
+ const SuggestionClear = forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', ...rest }, ref) {
19
19
  return (jsx(Button, { "aria-label": label, asChild: true, icon: true, hidden: true, ref: ref, variant: 'tertiary', ...rest, children: jsx("del", {}) }));
20
20
  });
21
21
 
package/dist/types/components/dialog/dialog.d.ts CHANGED
@@ -15,6 +15,12 @@ export type DialogProps = MergeRight<DefaultProps & DialogHTMLAttributes<HTMLDia
15
15
  * @default 'closerequest'
16
16
  */
17
17
  closedby?: 'none' | 'closerequest' | 'any';
18
+ /**
19
+ * When not center, displays dialog as a "drawer" from the specified side.
20
+ *
21
+ * @default 'center'
22
+ */
23
+ placement?: 'center' | 'left' | 'right' | 'top' | 'bottom';
18
24
  /**
19
25
  * Toogle modal and non-modal dialog.
20
26
  *
@@ -62,7 +68,7 @@ export type DialogProps = MergeRight<DefaultProps & DialogHTMLAttributes<HTMLDia
62
68
  * Content
63
69
  * </Dialog>
64
70
  */
65
- export declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "open" | "closedby" | "onClose" | "closeButton" | "modal"> & {
71
+ export declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "open" | "placement" | "closedby" | "onClose" | "closeButton" | "modal"> & {
66
72
  /**
67
73
  * Screen reader label of close button. Set false to hide the close button.
68
74
  * @default 'Lukk dialogvindu'
@@ -76,6 +82,12 @@ export declare const Dialog: import("react").ForwardRefExoticComponent<Omit<Defa
76
82
  * @default 'closerequest'
77
83
  */
78
84
  closedby?: "none" | "closerequest" | "any";
85
+ /**
86
+ * When not center, displays dialog as a "drawer" from the specified side.
87
+ *
88
+ * @default 'center'
89
+ */
90
+ placement?: "center" | "left" | "right" | "top" | "bottom";
79
91
  /**
80
92
  * Toogle modal and non-modal dialog.
81
93
  *
package/dist/types/components/dialog/dialog.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,KAAK,CAAC;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;IA9Df;;;OAGG;kBACW,MAAM,GAAG,KAAK;IAC5B;;;;;;OAMG;eACQ,MAAM,GAAG,cAAc,GAAG,KAAK;IAC1C;;;;;;OAMG;YACK,OAAO;IACf;;OAEG;WACI,OAAO;IACd;;OAEG;cACO,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAChC;;;;;OAKG;cACO,OAAO;qDA8HpB,CAAC"}
1
+ {"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,KAAK,CAAC;IAC3C;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC3D;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;IApEf;;;OAGG;kBACW,MAAM,GAAG,KAAK;IAC5B;;;;;;OAMG;eACQ,MAAM,GAAG,cAAc,GAAG,KAAK;IAC1C;;;;OAIG;gBACS,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ;IAC1D;;;;;;OAMG;YACK,OAAO;IACf;;OAEG;WACI,OAAO;IACd;;OAEG;cACO,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAChC;;;;;OAKG;cACO,OAAO;qDAgIpB,CAAC"}
package/dist/types/components/suggestion/suggestion-clear.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"suggestion-clear.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion-clear.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG5D,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC,GAAG;IAC7E;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe;IAnB1B;;;OAGG;mBACY,MAAM;qDAmCrB,CAAC"}
1
+ {"version":3,"file":"suggestion-clear.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion-clear.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG5D,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC,GAAG;IAC7E;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe;IAnB1B;;;OAGG;mBACY,MAAM;qDAgCrB,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@digdir/designsystemet-react",
3
3
  "type": "module",
4
- "version": "1.8.0",
4
+ "version": "1.9.0",
5
5
  "description": "React components for Designsystemet",
6
6
  "author": "Designsystemet team",
7
7
  "repository": {
@@ -38,14 +38,14 @@
38
38
  "dependencies": {
39
39
  "@floating-ui/dom": "^1.7.4",
40
40
  "@floating-ui/react": "0.26.23",
41
- "@navikt/aksel-icons": "^7.35.0",
41
+ "@navikt/aksel-icons": "^7.35.1",
42
42
  "@radix-ui/react-slot": "^1.2.4",
43
43
  "@tanstack/react-virtual": "^3.13.12",
44
- "@u-elements/u-combobox": "^1.0.4",
44
+ "@u-elements/u-combobox": "^1.0.5",
45
45
  "@u-elements/u-datalist": "^1.0.14",
46
46
  "@u-elements/u-details": "^0.1.5",
47
47
  "clsx": "^2.1.1",
48
- "@digdir/designsystemet-types": "^1.8.0"
48
+ "@digdir/designsystemet-types": "^1.9.0"
49
49
  },
50
50
  "devDependencies": {
51
51
  "@rollup/plugin-commonjs": "^29.0.0",
@@ -67,8 +67,8 @@
67
67
  "storybook": "^9.1.16",
68
68
  "tsx": "4.21.0",
69
69
  "typescript": "^5.9.3",
70
- "@digdir/designsystemet": "^1.8.0",
71
- "@digdir/designsystemet-css": "^1.8.0"
70
+ "@digdir/designsystemet": "^1.9.0",
71
+ "@digdir/designsystemet-css": "^1.9.0"
72
72
  },
73
73
  "scripts": {
74
74
  "build": "pnpm run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",