@digdir/designsystemet-react 1.0.0-next.48 → 1.0.0-next.50

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 (119) hide show
  1. package/dist/cjs/components/Badge/Badge.js +2 -2
  2. package/dist/cjs/components/Button/Button.js +1 -1
  3. package/dist/cjs/components/Card/Card.js +2 -2
  4. package/dist/cjs/components/Combobox/Combobox.js +0 -2
  5. package/dist/cjs/components/Details/Details.js +2 -2
  6. package/dist/cjs/components/Dialog/Dialog.js +74 -0
  7. package/dist/cjs/components/Dialog/DialogBlock.js +30 -0
  8. package/dist/cjs/components/Dialog/DialogTrigger.js +27 -0
  9. package/dist/cjs/components/Dialog/DialogTriggerContext.js +28 -0
  10. package/dist/cjs/components/Dialog/index.js +34 -0
  11. package/dist/cjs/components/Popover/Popover.js +2 -2
  12. package/dist/cjs/components/Suggestion/Suggestion.js +2 -3
  13. package/dist/cjs/components/Suggestion/SuggestionEmpty.js +4 -4
  14. package/dist/cjs/index.js +10 -10
  15. package/dist/cjs/{components/Pagination → utilities/hooks/usePagination}/usePagination.js +10 -1
  16. package/dist/esm/components/Badge/Badge.js +2 -2
  17. package/dist/esm/components/Button/Button.js +2 -2
  18. package/dist/esm/components/Card/Card.js +2 -2
  19. package/dist/esm/components/Chip/Chips.js +1 -1
  20. package/dist/esm/components/Chip/index.js +1 -1
  21. package/dist/esm/components/Combobox/Combobox.js +1 -3
  22. package/dist/esm/components/Combobox/ComboboxIdContext.js +1 -1
  23. package/dist/esm/components/Combobox/useFloatingCombobox.js +1 -1
  24. package/dist/esm/components/Details/Details.js +2 -2
  25. package/dist/esm/components/Dialog/Dialog.js +72 -0
  26. package/dist/esm/components/Dialog/DialogBlock.js +28 -0
  27. package/dist/esm/components/{Modal/ModalTrigger.js → Dialog/DialogTrigger.js} +9 -9
  28. package/dist/esm/components/Dialog/DialogTriggerContext.js +25 -0
  29. package/dist/esm/components/Dialog/index.js +29 -0
  30. package/dist/esm/components/ErrorSummary/ErrorSummary.js +1 -1
  31. package/dist/esm/components/Field/index.js +1 -1
  32. package/dist/esm/components/List/index.js +1 -1
  33. package/dist/esm/components/Popover/Popover.js +2 -2
  34. package/dist/esm/components/Suggestion/Suggestion.js +3 -4
  35. package/dist/esm/components/Suggestion/SuggestionEmpty.js +4 -4
  36. package/dist/esm/components/Tabs/Tabs.js +1 -1
  37. package/dist/esm/components/ToggleGroup/ToggleGroup.js +1 -1
  38. package/dist/esm/index.js +5 -5
  39. package/dist/esm/utilities/RovingFocus/RovingFocusRoot.js +1 -1
  40. package/dist/esm/{components/Pagination → utilities/hooks/usePagination}/usePagination.js +10 -1
  41. package/dist/types/colors.d.ts +12 -2
  42. package/dist/types/colors.d.ts.map +1 -1
  43. package/dist/types/components/Badge/Badge.d.ts +13 -1
  44. package/dist/types/components/Badge/Badge.d.ts.map +1 -1
  45. package/dist/types/components/Badge/index.d.ts +2 -1
  46. package/dist/types/components/Badge/index.d.ts.map +1 -1
  47. package/dist/types/components/Button/Button.d.ts +10 -6
  48. package/dist/types/components/Button/Button.d.ts.map +1 -1
  49. package/dist/types/components/Card/Card.d.ts +9 -7
  50. package/dist/types/components/Card/Card.d.ts.map +1 -1
  51. package/dist/types/components/Card/index.d.ts +2 -2
  52. package/dist/types/components/Details/Details.d.ts +4 -4
  53. package/dist/types/components/Details/Details.d.ts.map +1 -1
  54. package/dist/types/components/{Modal/Modal.d.ts → Dialog/Dialog.d.ts} +17 -17
  55. package/dist/types/components/Dialog/Dialog.d.ts.map +1 -0
  56. package/dist/types/components/{Modal/ModalBlock.d.ts → Dialog/DialogBlock.d.ts} +12 -12
  57. package/dist/types/components/Dialog/DialogBlock.d.ts.map +1 -0
  58. package/dist/types/components/Dialog/DialogTrigger.d.ts +22 -0
  59. package/dist/types/components/Dialog/DialogTrigger.d.ts.map +1 -0
  60. package/dist/types/components/Dialog/DialogTriggerContext.d.ts +21 -0
  61. package/dist/types/components/Dialog/DialogTriggerContext.d.ts.map +1 -0
  62. package/dist/types/components/Dialog/index.d.ts +43 -0
  63. package/dist/types/components/Dialog/index.d.ts.map +1 -0
  64. package/dist/types/components/Dropdown/DropdownHeading.d.ts +1 -1
  65. package/dist/types/components/Dropdown/index.d.ts +1 -1
  66. package/dist/types/components/ErrorSummary/ErrorSummaryHeading.d.ts +1 -1
  67. package/dist/types/components/ErrorSummary/index.d.ts +1 -1
  68. package/dist/types/components/Fieldset/FieldsetDescription.d.ts +1 -1
  69. package/dist/types/components/Fieldset/index.d.ts +1 -1
  70. package/dist/types/components/Heading/Heading.d.ts +2 -2
  71. package/dist/types/components/Heading/Heading.d.ts.map +1 -1
  72. package/dist/types/components/Pagination/index.d.ts +0 -2
  73. package/dist/types/components/Pagination/index.d.ts.map +1 -1
  74. package/dist/types/components/Paragraph/Paragraph.d.ts +2 -2
  75. package/dist/types/components/Paragraph/Paragraph.d.ts.map +1 -1
  76. package/dist/types/components/Popover/Popover.d.ts +13 -1
  77. package/dist/types/components/Popover/Popover.d.ts.map +1 -1
  78. package/dist/types/components/Popover/index.d.ts +2 -1
  79. package/dist/types/components/Popover/index.d.ts.map +1 -1
  80. package/dist/types/components/Search/SearchButton.d.ts +2 -2
  81. package/dist/types/components/Search/index.d.ts +2 -2
  82. package/dist/types/components/Spinner/Spinner.d.ts +1 -1
  83. package/dist/types/components/Spinner/Spinner.d.ts.map +1 -1
  84. package/dist/types/components/Suggestion/Suggestion.d.ts.map +1 -1
  85. package/dist/types/components/Suggestion/SuggestionEmpty.d.ts +3 -16
  86. package/dist/types/components/Suggestion/SuggestionEmpty.d.ts.map +1 -1
  87. package/dist/types/components/Suggestion/index.d.ts +1 -3
  88. package/dist/types/components/Suggestion/index.d.ts.map +1 -1
  89. package/dist/types/components/index.d.ts +1 -1
  90. package/dist/types/components/index.d.ts.map +1 -1
  91. package/dist/types/types.d.ts +2 -2
  92. package/dist/types/types.d.ts.map +1 -1
  93. package/dist/types/utilities/hooks/index.d.ts +2 -0
  94. package/dist/types/utilities/hooks/index.d.ts.map +1 -1
  95. package/dist/types/utilities/hooks/useCheckboxGroup/useCheckboxGroup.d.ts +2 -1
  96. package/dist/types/utilities/hooks/useCheckboxGroup/useCheckboxGroup.d.ts.map +1 -1
  97. package/dist/types/{components/Pagination → utilities/hooks/usePagination}/usePagination.d.ts +19 -11
  98. package/dist/types/utilities/hooks/usePagination/usePagination.d.ts.map +1 -0
  99. package/dist/types/utilities/hooks/useRadioGroup/useRadioGroup.d.ts +1 -1
  100. package/dist/types/utilities/hooks/useRadioGroup/useRadioGroup.d.ts.map +1 -1
  101. package/package.json +7 -5
  102. package/dist/cjs/components/Modal/Modal.js +0 -74
  103. package/dist/cjs/components/Modal/ModalBlock.js +0 -30
  104. package/dist/cjs/components/Modal/ModalTrigger.js +0 -27
  105. package/dist/cjs/components/Modal/ModalTriggerContext.js +0 -28
  106. package/dist/cjs/components/Modal/index.js +0 -34
  107. package/dist/esm/components/Modal/Modal.js +0 -72
  108. package/dist/esm/components/Modal/ModalBlock.js +0 -28
  109. package/dist/esm/components/Modal/ModalTriggerContext.js +0 -25
  110. package/dist/esm/components/Modal/index.js +0 -29
  111. package/dist/types/components/Modal/Modal.d.ts.map +0 -1
  112. package/dist/types/components/Modal/ModalBlock.d.ts.map +0 -1
  113. package/dist/types/components/Modal/ModalTrigger.d.ts +0 -22
  114. package/dist/types/components/Modal/ModalTrigger.d.ts.map +0 -1
  115. package/dist/types/components/Modal/ModalTriggerContext.d.ts +0 -21
  116. package/dist/types/components/Modal/ModalTriggerContext.d.ts.map +0 -1
  117. package/dist/types/components/Modal/index.d.ts +0 -43
  118. package/dist/types/components/Modal/index.d.ts.map +0 -1
  119. package/dist/types/components/Pagination/usePagination.d.ts.map +0 -1
@@ -25,7 +25,7 @@ export type UseRadioGroupProps = {
25
25
  * remove anything that comes from the group itself.
26
26
  */
27
27
  export type GetRadioProps = Omit<RadioProps, 'prefix' | 'role' | 'type' | 'size' | 'aria-label' | 'aria-labelledby' | 'label' | 'name' | 'checked' | 'value'> & {
28
- ref?: React.Ref<HTMLInputElement | null>;
28
+ ref?: React.ForwardedRef<HTMLInputElement>;
29
29
  value?: string;
30
30
  };
31
31
  type useRadioGroupReturn = {
@@ -1 +1 @@
1
- {"version":3,"file":"useRadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/utilities/hooks/useRadioGroup/useRadioGroup.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,UAAU,EACR,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,YAAY,GACZ,iBAAiB,GACjB,OAAO,GACP,MAAM,GACN,SAAS,GACT,OAAO,CACV,GAAG;IACF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IACvD,aAAa,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,aAAa,KAAK,aAAa,CAAC;IACvE,sBAAsB,EAAE;QACtB,QAAQ,EAAE,SAAS,CAAC;QACpB,MAAM,EAAE,OAAO,CAAC;QAChB,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;CACH,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EAAE,WAAgB,GACxB,GAAE,kBAAuB,GAAG,mBAAmB,CAkF/C"}
1
+ {"version":3,"file":"useRadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/utilities/hooks/useRadioGroup/useRadioGroup.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,UAAU,EACR,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,YAAY,GACZ,iBAAiB,GACjB,OAAO,GACP,MAAM,GACN,SAAS,GACT,OAAO,CACV,GAAG;IACF,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IACvD,aAAa,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,aAAa,KAAK,aAAa,CAAC;IACvE,sBAAsB,EAAE;QACtB,QAAQ,EAAE,SAAS,CAAC;QACpB,MAAM,EAAE,OAAO,CAAC;QAChB,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;CACH,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EAAE,WAAgB,GACxB,GAAE,kBAAuB,GAAG,mBAAmB,CAkF/C"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@digdir/designsystemet-react",
3
3
  "type": "module",
4
- "version": "1.0.0-next.48",
4
+ "version": "1.0.0-next.50",
5
5
  "description": "React components for Designsystemet",
6
6
  "author": "Designsystemet team",
7
7
  "repository": {
@@ -20,7 +20,7 @@
20
20
  "./colors": {
21
21
  "types": "./dist/types/colors.d.ts"
22
22
  },
23
- "./react-types.d.ts": {
23
+ "./react-types": {
24
24
  "types": "./dist/react-types.d.ts"
25
25
  }
26
26
  },
@@ -44,10 +44,10 @@
44
44
  "dependencies": {
45
45
  "@floating-ui/dom": "^1.6.10",
46
46
  "@floating-ui/react": "0.26.23",
47
- "@navikt/aksel-icons": "^6.14.0",
47
+ "@navikt/aksel-icons": "^7.0.0",
48
48
  "@radix-ui/react-slot": "^1.1.1",
49
49
  "@tanstack/react-virtual": "^3.11.2",
50
- "@u-elements/u-datalist": "^0.1.2",
50
+ "@u-elements/u-datalist": "^0.1.3",
51
51
  "@u-elements/u-details": "^0.1.0",
52
52
  "clsx": "^2.1.1"
53
53
  },
@@ -58,8 +58,10 @@
58
58
  "@testing-library/jest-dom": "^6.6.3",
59
59
  "@testing-library/react": "^16.2.0",
60
60
  "@testing-library/user-event": "^14.6.0",
61
+ "@types/react": "^19.0.8",
62
+ "@types/react-dom": "^19.0.3",
61
63
  "copyfiles": "^2.4.1",
62
- "jsdom": "^24.1.1",
64
+ "jsdom": "^26.0.0",
63
65
  "react": "^19.0.0",
64
66
  "react-dom": "^19.0.0",
65
67
  "rimraf": "^6.0.1",
@@ -1,74 +0,0 @@
1
- 'use client';
2
- 'use strict';
3
-
4
- var jsxRuntime = require('react/jsx-runtime');
5
- var react$1 = require('@floating-ui/react');
6
- var reactSlot = require('@radix-ui/react-slot');
7
- var cl = require('clsx/lite');
8
- var react = require('react');
9
- var ModalTriggerContext = require('./ModalTriggerContext.js');
10
- var Button = require('../Button/Button.js');
11
-
12
- /**
13
- * Modal component, used to display a modal dialog.
14
- *
15
- * @example with TriggerContext
16
- * <Modal.TriggerContext>
17
- * <Modal.Trigger>Open Modal</Modal.Trigger>
18
- * <Modal>
19
- * <Modal.Block>
20
- * Content
21
- * </Modal.Block>
22
- * </Modal>
23
- * </Modal.TriggerContext>
24
- *
25
- * @example without TriggerContext
26
- * const modalRef = useRef<HTMLDialogElement>(null);
27
- *
28
- * ...
29
- *
30
- * <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
31
- * <Modal ref={modalRef}>
32
- * Content
33
- * </Modal>
34
- */
35
- const Modal = react.forwardRef(function Modal({ asChild, children, className, closeButton = 'Lukk dialogvindu', onClose, open, backdropClose = false, ...rest }, ref) {
36
- const contextRef = react.useContext(ModalTriggerContext.Context);
37
- const modalRef = react.useRef(null); // This local ref is used to make sure the modal works without a ModalTriggerContext
38
- const Component = asChild ? reactSlot.Slot : 'dialog';
39
- const mergedRefs = react$1.useMergeRefs([contextRef, ref, modalRef]);
40
- react.useEffect(() => modalRef.current?.[open ? 'showModal' : 'close'](), [open]); // Toggle open based on prop
41
- react.useEffect(() => {
42
- const modal = modalRef.current;
43
- const handleBackdropClick = ({ clientY: y, clientX: x, target, }) => {
44
- if (window.getSelection()?.toString())
45
- return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
46
- if (modal && target === modal && backdropClose) {
47
- const { top, left, right, bottom } = modal.getBoundingClientRect();
48
- const isInDialog = top <= y && y <= bottom && left <= x && x <= right;
49
- if (!isInDialog)
50
- modal?.close(); // Both <dialog> and ::backdrop is considered same event.target
51
- }
52
- };
53
- const handleAutoFocus = () => {
54
- const autofocus = modal?.querySelector('[autofocus]');
55
- if (document.activeElement !== autofocus)
56
- autofocus?.focus();
57
- };
58
- modal?.addEventListener('animationend', handleAutoFocus);
59
- modal?.addEventListener('click', handleBackdropClick);
60
- return () => {
61
- modal?.removeEventListener('animationend', handleAutoFocus);
62
- modal?.removeEventListener('click', handleBackdropClick);
63
- };
64
- }, [backdropClose]);
65
- /* handle closing */
66
- react.useEffect(() => {
67
- const handleClose = (event) => onClose?.(event);
68
- modalRef.current?.addEventListener('close', handleClose);
69
- return () => modalRef.current?.removeEventListener('close', handleClose);
70
- }, [onClose]);
71
- return (jsxRuntime.jsxs(Component, { className: cl('ds-modal', className), ref: mergedRefs, ...rest, children: [closeButton !== false && (jsxRuntime.jsx("form", { method: 'dialog', children: jsxRuntime.jsx(Button.Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
72
- });
73
-
74
- exports.Modal = Modal;
@@ -1,30 +0,0 @@
1
- 'use client';
2
- 'use strict';
3
-
4
- var jsxRuntime = require('react/jsx-runtime');
5
- var reactSlot = require('@radix-ui/react-slot');
6
- var cl = require('clsx/lite');
7
- var react = require('react');
8
-
9
- /**
10
- * ModalBlock component, used to separate content in a modal.
11
- *
12
- * @example
13
- * <Modal>
14
- * <Modal.Block>
15
- * Header
16
- * </Modal.Block>
17
- * <Modal.Block>
18
- * Content
19
- * </Modal.Block>
20
- * <Modal.Block>
21
- * Footer
22
- * </Modal.Block>
23
- * </Modal>
24
- */
25
- const ModalBlock = react.forwardRef(function ModalBlock({ asChild, className, ...rest }, ref) {
26
- const Component = asChild ? reactSlot.Slot : 'div';
27
- return (jsxRuntime.jsx(Component, { className: cl('ds-modal__block', className), ref: ref, ...rest }));
28
- });
29
-
30
- exports.ModalBlock = ModalBlock;
@@ -1,27 +0,0 @@
1
- 'use client';
2
- 'use strict';
3
-
4
- var jsxRuntime = require('react/jsx-runtime');
5
- var reactSlot = require('@radix-ui/react-slot');
6
- var react = require('react');
7
- var Button = require('../Button/Button.js');
8
- var ModalTriggerContext = require('./ModalTriggerContext.js');
9
-
10
- /**
11
- * ModalTrigger component, used within a Modal.TriggerContext to open a modal.
12
- *
13
- * @example
14
- * <Modal.TriggerContext>
15
- * <Modal.Trigger>Open Modal</Modal.Trigger>
16
- * <Modal>
17
- * Content
18
- * </Modal>
19
- * </Modal.TriggerContext>
20
- */
21
- const ModalTrigger = react.forwardRef(function ModalTrigger({ asChild, ...rest }, ref) {
22
- const contextRef = react.useContext(ModalTriggerContext.Context);
23
- const Component = asChild ? reactSlot.Slot : Button.Button;
24
- return (jsxRuntime.jsx(Component, { "aria-haspopup": 'dialog', onClick: () => contextRef?.current?.showModal(), ref: ref, ...rest }));
25
- });
26
-
27
- exports.ModalTrigger = ModalTrigger;
@@ -1,28 +0,0 @@
1
- 'use client';
2
- 'use strict';
3
-
4
- var jsxRuntime = require('react/jsx-runtime');
5
- var react = require('react');
6
-
7
- const Context = react.createContext({
8
- current: null,
9
- });
10
- /**
11
- * ModalTriggerContext component, used to provide a context for a modal trigger.
12
- *
13
- * @example
14
- * <Modal.TriggerContext>
15
- * <Modal.Trigger>Open Modal</Modal.Trigger>
16
- * <Modal>
17
- * Content
18
- * </Modal>
19
- * </Modal.TriggerContext>
20
- */
21
- const ModalTriggerContext = ({ children }) => {
22
- const contextRef = react.useRef(null);
23
- return jsxRuntime.jsx(Context.Provider, { value: contextRef, children: children });
24
- };
25
- ModalTriggerContext.displayName = 'ModalTriggerContext';
26
-
27
- exports.Context = Context;
28
- exports.ModalTriggerContext = ModalTriggerContext;
@@ -1,34 +0,0 @@
1
- 'use client';
2
- 'use strict';
3
-
4
- var Modal$1 = require('./Modal.js');
5
- var ModalBlock = require('./ModalBlock.js');
6
- var ModalTrigger = require('./ModalTrigger.js');
7
- var ModalTriggerContext = require('./ModalTriggerContext.js');
8
-
9
- /**
10
- * Modal component, used to display a modal dialog.
11
- *
12
- * @example
13
- * <Modal.TriggerContext>
14
- * <Modal.Trigger>Open Modal</Modal.Trigger>
15
- * <Modal>
16
- * <Modal.Block>
17
- * Content
18
- * </Modal.Block>
19
- * </Modal>
20
- * </Modal.TriggerContext>
21
- */
22
- const Modal = Object.assign(Modal$1.Modal, {
23
- Block: ModalBlock.ModalBlock,
24
- TriggerContext: ModalTriggerContext.ModalTriggerContext,
25
- Trigger: ModalTrigger.ModalTrigger,
26
- });
27
- Modal.Block.displayName = 'Modal.Block';
28
- Modal.TriggerContext.displayName = 'Modal.TriggerContext';
29
- Modal.Trigger.displayName = 'Modal.Trigger';
30
-
31
- exports.ModalBlock = ModalBlock.ModalBlock;
32
- exports.ModalTrigger = ModalTrigger.ModalTrigger;
33
- exports.ModalTriggerContext = ModalTriggerContext.ModalTriggerContext;
34
- exports.Modal = Modal;
@@ -1,72 +0,0 @@
1
- 'use client';
2
- import { jsxs, jsx } from 'react/jsx-runtime';
3
- import { useMergeRefs } from '@floating-ui/react';
4
- import { Slot } from '@radix-ui/react-slot';
5
- import cl from 'clsx/lite';
6
- import { forwardRef, useContext, useRef, useEffect } from 'react';
7
- import { Context } from './ModalTriggerContext.js';
8
- import { Button } from '../Button/Button.js';
9
-
10
- /**
11
- * Modal component, used to display a modal dialog.
12
- *
13
- * @example with TriggerContext
14
- * <Modal.TriggerContext>
15
- * <Modal.Trigger>Open Modal</Modal.Trigger>
16
- * <Modal>
17
- * <Modal.Block>
18
- * Content
19
- * </Modal.Block>
20
- * </Modal>
21
- * </Modal.TriggerContext>
22
- *
23
- * @example without TriggerContext
24
- * const modalRef = useRef<HTMLDialogElement>(null);
25
- *
26
- * ...
27
- *
28
- * <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
29
- * <Modal ref={modalRef}>
30
- * Content
31
- * </Modal>
32
- */
33
- const Modal = forwardRef(function Modal({ asChild, children, className, closeButton = 'Lukk dialogvindu', onClose, open, backdropClose = false, ...rest }, ref) {
34
- const contextRef = useContext(Context);
35
- const modalRef = useRef(null); // This local ref is used to make sure the modal works without a ModalTriggerContext
36
- const Component = asChild ? Slot : 'dialog';
37
- const mergedRefs = useMergeRefs([contextRef, ref, modalRef]);
38
- useEffect(() => modalRef.current?.[open ? 'showModal' : 'close'](), [open]); // Toggle open based on prop
39
- useEffect(() => {
40
- const modal = modalRef.current;
41
- const handleBackdropClick = ({ clientY: y, clientX: x, target, }) => {
42
- if (window.getSelection()?.toString())
43
- return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
44
- if (modal && target === modal && backdropClose) {
45
- const { top, left, right, bottom } = modal.getBoundingClientRect();
46
- const isInDialog = top <= y && y <= bottom && left <= x && x <= right;
47
- if (!isInDialog)
48
- modal?.close(); // Both <dialog> and ::backdrop is considered same event.target
49
- }
50
- };
51
- const handleAutoFocus = () => {
52
- const autofocus = modal?.querySelector('[autofocus]');
53
- if (document.activeElement !== autofocus)
54
- autofocus?.focus();
55
- };
56
- modal?.addEventListener('animationend', handleAutoFocus);
57
- modal?.addEventListener('click', handleBackdropClick);
58
- return () => {
59
- modal?.removeEventListener('animationend', handleAutoFocus);
60
- modal?.removeEventListener('click', handleBackdropClick);
61
- };
62
- }, [backdropClose]);
63
- /* handle closing */
64
- useEffect(() => {
65
- const handleClose = (event) => onClose?.(event);
66
- modalRef.current?.addEventListener('close', handleClose);
67
- return () => modalRef.current?.removeEventListener('close', handleClose);
68
- }, [onClose]);
69
- return (jsxs(Component, { className: cl('ds-modal', className), ref: mergedRefs, ...rest, children: [closeButton !== false && (jsx("form", { method: 'dialog', children: jsx(Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
70
- });
71
-
72
- export { Modal };
@@ -1,28 +0,0 @@
1
- 'use client';
2
- import { jsx } from 'react/jsx-runtime';
3
- import { Slot } from '@radix-ui/react-slot';
4
- import cl from 'clsx/lite';
5
- import { forwardRef } from 'react';
6
-
7
- /**
8
- * ModalBlock component, used to separate content in a modal.
9
- *
10
- * @example
11
- * <Modal>
12
- * <Modal.Block>
13
- * Header
14
- * </Modal.Block>
15
- * <Modal.Block>
16
- * Content
17
- * </Modal.Block>
18
- * <Modal.Block>
19
- * Footer
20
- * </Modal.Block>
21
- * </Modal>
22
- */
23
- const ModalBlock = forwardRef(function ModalBlock({ asChild, className, ...rest }, ref) {
24
- const Component = asChild ? Slot : 'div';
25
- return (jsx(Component, { className: cl('ds-modal__block', className), ref: ref, ...rest }));
26
- });
27
-
28
- export { ModalBlock };
@@ -1,25 +0,0 @@
1
- 'use client';
2
- import { jsx } from 'react/jsx-runtime';
3
- import { createContext, useRef } from 'react';
4
-
5
- const Context = createContext({
6
- current: null,
7
- });
8
- /**
9
- * ModalTriggerContext component, used to provide a context for a modal trigger.
10
- *
11
- * @example
12
- * <Modal.TriggerContext>
13
- * <Modal.Trigger>Open Modal</Modal.Trigger>
14
- * <Modal>
15
- * Content
16
- * </Modal>
17
- * </Modal.TriggerContext>
18
- */
19
- const ModalTriggerContext = ({ children }) => {
20
- const contextRef = useRef(null);
21
- return jsx(Context.Provider, { value: contextRef, children: children });
22
- };
23
- ModalTriggerContext.displayName = 'ModalTriggerContext';
24
-
25
- export { Context, ModalTriggerContext };
@@ -1,29 +0,0 @@
1
- 'use client';
2
- import { Modal as Modal$1 } from './Modal.js';
3
- import { ModalBlock } from './ModalBlock.js';
4
- import { ModalTrigger } from './ModalTrigger.js';
5
- import { ModalTriggerContext } from './ModalTriggerContext.js';
6
-
7
- /**
8
- * Modal component, used to display a modal dialog.
9
- *
10
- * @example
11
- * <Modal.TriggerContext>
12
- * <Modal.Trigger>Open Modal</Modal.Trigger>
13
- * <Modal>
14
- * <Modal.Block>
15
- * Content
16
- * </Modal.Block>
17
- * </Modal>
18
- * </Modal.TriggerContext>
19
- */
20
- const Modal = Object.assign(Modal$1, {
21
- Block: ModalBlock,
22
- TriggerContext: ModalTriggerContext,
23
- Trigger: ModalTrigger,
24
- });
25
- Modal.Block.displayName = 'Modal.Block';
26
- Modal.TriggerContext.displayName = 'Modal.TriggerContext';
27
- Modal.Trigger.displayName = 'Modal.Trigger';
28
-
29
- export { Modal, ModalBlock, ModalTrigger, ModalTriggerContext };
@@ -1 +0,0 @@
1
- {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,MAAM,UAAU,GAAG,UAAU,CACjC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,KAAK;IA7Cd;;;OAGG;kBACW,MAAM,GAAG,KAAK;IAC5B;;;OAGG;oBACa,OAAO;IACvB;;OAEG;cACO,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAChC;;;OAGG;cACO,OAAO;2CAsGnB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"ModalBlock.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU;IAvBrB;;;OAGG;cACO,OAAO;yEA+BlB,CAAC"}
@@ -1,22 +0,0 @@
1
- import type { ComponentPropsWithRef } from 'react';
2
- import { Button } from '../Button/Button';
3
- export type ModalTriggerProps = ComponentPropsWithRef<typeof Button>;
4
- /**
5
- * ModalTrigger component, used within a Modal.TriggerContext to open a modal.
6
- *
7
- * @example
8
- * <Modal.TriggerContext>
9
- * <Modal.Trigger>Open Modal</Modal.Trigger>
10
- * <Modal>
11
- * Content
12
- * </Modal>
13
- * </Modal.TriggerContext>
14
- */
15
- export declare const ModalTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("../../types").DefaultProps & React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "asChild" | "variant" | "icon" | "loading"> & {
16
- variant?: "primary" | "secondary" | "tertiary";
17
- icon?: boolean;
18
- loading?: boolean;
19
- asChild?: boolean;
20
- type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
21
- } & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
22
- //# sourceMappingURL=ModalTrigger.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ModalTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalTrigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAG1C,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,OAAO,MAAM,CAAC,CAAC;AAErE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY;;;;;;4FAcxB,CAAC"}
@@ -1,21 +0,0 @@
1
- import type { ReactNode, RefObject } from 'react';
2
- export declare const Context: React.Context<RefObject<HTMLDialogElement | null>>;
3
- export type ModalTriggerContextProps = {
4
- children: ReactNode;
5
- };
6
- /**
7
- * ModalTriggerContext component, used to provide a context for a modal trigger.
8
- *
9
- * @example
10
- * <Modal.TriggerContext>
11
- * <Modal.Trigger>Open Modal</Modal.Trigger>
12
- * <Modal>
13
- * Content
14
- * </Modal>
15
- * </Modal.TriggerContext>
16
- */
17
- export declare const ModalTriggerContext: {
18
- ({ children }: ModalTriggerContextProps): import("react/jsx-runtime").JSX.Element;
19
- displayName: string;
20
- };
21
- //# sourceMappingURL=ModalTriggerContext.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ModalTriggerContext.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalTriggerContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,eAAO,MAAM,OAAO,oDAElB,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAAC;AAE/D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,mBAAmB;mBAAkB,wBAAwB;;CAIzE,CAAC"}
@@ -1,43 +0,0 @@
1
- import { ModalBlock } from './ModalBlock';
2
- import { ModalTrigger } from './ModalTrigger';
3
- import { ModalTriggerContext } from './ModalTriggerContext';
4
- /**
5
- * Modal component, used to display a modal dialog.
6
- *
7
- * @example
8
- * <Modal.TriggerContext>
9
- * <Modal.Trigger>Open Modal</Modal.Trigger>
10
- * <Modal>
11
- * <Modal.Block>
12
- * Content
13
- * </Modal.Block>
14
- * </Modal>
15
- * </Modal.TriggerContext>
16
- */
17
- declare const Modal: React.ForwardRefExoticComponent<Omit<import("../../types").DefaultProps & React.DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "onClose" | "closeButton" | "backdropClose"> & {
18
- closeButton?: string | false;
19
- backdropClose?: boolean;
20
- onClose?: (event: Event) => void;
21
- asChild?: boolean;
22
- } & React.RefAttributes<HTMLDialogElement>> & {
23
- Block: React.ForwardRefExoticComponent<{
24
- asChild?: boolean;
25
- } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
26
- TriggerContext: {
27
- ({ children }: import("./ModalTriggerContext").ModalTriggerContextProps): import("react/jsx-runtime").JSX.Element;
28
- displayName: string;
29
- };
30
- Trigger: React.ForwardRefExoticComponent<Omit<Omit<import("../../types").DefaultProps & React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "asChild" | "variant" | "icon" | "loading"> & {
31
- variant?: "primary" | "secondary" | "tertiary";
32
- icon?: boolean;
33
- loading?: boolean;
34
- asChild?: boolean;
35
- type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
36
- } & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
37
- };
38
- export type { ModalBlockProps } from './ModalBlock';
39
- export type { ModalTriggerContextProps } from './ModalTriggerContext';
40
- export type { ModalProps } from './Modal';
41
- export type { ModalTriggerProps } from './ModalTrigger';
42
- export { Modal, ModalBlock, ModalTriggerContext, ModalTrigger };
43
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;CAIT,CAAC;AAMH,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,YAAY,EAAE,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/usePagination.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAchE,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4BI;AACJ,eAAO,MAAM,aAAa,sEAMvB,kBAAkB;IAWf,sBAAsB;;;;qBAWL,qBAAqB,GAAG,IAAI;;IAG7C,8EAA8E;qBAKzE,qBAAqB;IAC1B,0EAA0E;qBAKrE,qBAAqB;IAC1B,gEAAgE;;IAEhE,4DAA4D;;CAGxB,CAAC"}