diff --git a/packages/react/src/components/HelpText/HelpText.tsx b/packages/react/src/components/HelpText/HelpText.tsx
index 021d8e1028..58ca91d481 100644
--- a/packages/react/src/components/HelpText/HelpText.tsx
+++ b/packages/react/src/components/HelpText/HelpText.tsx
@@ -4,7 +4,7 @@ import cl from 'clsx/lite';
import type { Placement } from '@floating-ui/utils';
import { Popover, Paragraph } from '../';
-import type { PopoverProps } from '../Popover/Popover';
+import type { PopoverRootProps } from '../Popover/PopoverRoot';
import type { PortalProps } from '../../types/Portal';
import { HelpTextIcon } from './HelpTextIcon';
@@ -18,7 +18,7 @@ export type HelpTextProps = {
* Size of the helptext
* @default md
*/
- size?: PopoverProps['size'];
+ size?: PopoverRootProps['size'];
/**
* Placement of the Popover.
* @default 'right'
@@ -40,7 +40,7 @@ const HelpText = ({
return (
<>
-
-
+
>
);
};
diff --git a/packages/react/src/components/Popover/Popover.mdx b/packages/react/src/components/Popover/Popover.mdx
index 885bb271d6..a992fd2a8b 100644
--- a/packages/react/src/components/Popover/Popover.mdx
+++ b/packages/react/src/components/Popover/Popover.mdx
@@ -14,7 +14,7 @@ import * as PopoverStories from './Popover.stories.tsx';
```tsx
import { Popover } from '@digdir/designsystemet-react';
-
+
Trigger
Content
diff --git a/packages/react/src/components/Popover/Popover.stories.tsx b/packages/react/src/components/Popover/Popover.stories.tsx
index e1505e9daf..b739dc242d 100644
--- a/packages/react/src/components/Popover/Popover.stories.tsx
+++ b/packages/react/src/components/Popover/Popover.stories.tsx
@@ -13,15 +13,15 @@ const marginDecorator = (Story: StoryFn) => (
export default {
title: 'Komponenter/Popover',
- component: Popover,
+ component: Popover.Root,
} as Meta;
-export const Preview: StoryFn = (args) => {
+export const Preview: StoryFn = (args) => {
return (
-
+
My trigger!
popover content
-
+
);
};
@@ -34,7 +34,7 @@ Preview.args = {
Preview.decorators = [marginDecorator];
-export const Variants: StoryFn = () => {
+export const Variants: StoryFn = () => {
const [open, setOpen] = useState(false);
useEffect(() => {
@@ -43,37 +43,37 @@ export const Variants: StoryFn = () => {
return (
-
popover
default
-
-
+
popover
danger
-
-
+
popover
info
-
-
+
popover
warning
-
+
);
};
@@ -85,7 +85,7 @@ export const Controlled: StoryFn = () => {
return (
<>
- setOpen(false)}
>
@@ -105,7 +105,7 @@ export const Controlled: StoryFn = () => {
Slett
-
+
>
);
};
@@ -114,9 +114,9 @@ Controlled.decorators = [marginDecorator];
export const InPortal = () => {
return (
-
+
My trigger
popover content
-
+
);
};
diff --git a/packages/react/src/components/Popover/Popover.test.tsx b/packages/react/src/components/Popover/Popover.test.tsx
index 27186187e5..d968c0a096 100644
--- a/packages/react/src/components/Popover/Popover.test.tsx
+++ b/packages/react/src/components/Popover/Popover.test.tsx
@@ -1,22 +1,22 @@
import { act, render as renderRtl, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import type { PopoverProps } from './Popover';
+import type { PopoverRootProps } from './PopoverRoot';
import { Popover } from './';
const contentText = 'popover content';
-const Comp = (args: Partial) => {
+const Comp = (args: Partial) => {
return (
-
+
trigger
{contentText}
-
+
);
};
-const render = async (props: Partial = {}) => {
+const render = async (props: Partial = {}) => {
/* Flush microtasks */
await act(async () => {});
const user = userEvent.setup();
diff --git a/packages/react/src/components/Popover/PopoverContent.tsx b/packages/react/src/components/Popover/PopoverContent.tsx
index 81ecb915ad..70506fb91d 100644
--- a/packages/react/src/components/Popover/PopoverContent.tsx
+++ b/packages/react/src/components/Popover/PopoverContent.tsx
@@ -20,7 +20,7 @@ import cl from 'clsx/lite';
import { Paragraph } from '../Typography';
import { useIsomorphicLayoutEffect } from '../../hooks';
-import { PopoverContext } from './Popover';
+import { PopoverContext } from './PopoverRoot';
const ARROW_HEIGHT = 7;
const ARROW_GAP = 4;
diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/PopoverRoot.tsx
similarity index 88%
rename from packages/react/src/components/Popover/Popover.tsx
rename to packages/react/src/components/Popover/PopoverRoot.tsx
index 4a9a02f6fd..e4c8151f00 100644
--- a/packages/react/src/components/Popover/Popover.tsx
+++ b/packages/react/src/components/Popover/PopoverRoot.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
import type { PortalProps } from '../../types/Portal';
-export type PopoverProps = {
+export type PopoverRootProps = {
/**
* Placement of the tooltip on the trigger.
* @default top
@@ -34,7 +34,7 @@ export type PopoverProps = {
children: React.ReactNode;
} & PortalProps;
-export const Popover = ({
+export const PopoverRoot = ({
children,
placement = 'top',
open,
@@ -43,7 +43,7 @@ export const Popover = ({
size = 'md',
onOpenChange,
onClose,
-}: PopoverProps) => {
+}: PopoverRootProps) => {
const triggerRef = useRef(null);
const [internalOpen, setInternalOpen] = useState(open ?? false);
@@ -94,11 +94,11 @@ export const PopoverContext = React.createContext<{
triggerId?: string;
isControlled?: boolean;
internalOpen: boolean;
- size: NonNullable;
- variant: NonNullable;
+ size: NonNullable;
+ variant: NonNullable;
placement: Placement;
- onOpenChange?: PopoverProps['onOpenChange'];
- onClose?: PopoverProps['onClose'];
+ onOpenChange?: PopoverRootProps['onOpenChange'];
+ onClose?: PopoverRootProps['onClose'];
setPopoverId?: (id: string) => void;
setTriggerId?: (id: string) => void;
setInternalOpen: (open: boolean) => void;
@@ -112,4 +112,4 @@ export const PopoverContext = React.createContext<{
setInternalOpen: () => {},
});
-Popover.displayName = 'Popover';
+PopoverRoot.displayName = 'Popover.Root';
diff --git a/packages/react/src/components/Popover/PopoverTrigger.tsx b/packages/react/src/components/Popover/PopoverTrigger.tsx
index c94f310afc..8d1d219770 100644
--- a/packages/react/src/components/Popover/PopoverTrigger.tsx
+++ b/packages/react/src/components/Popover/PopoverTrigger.tsx
@@ -5,7 +5,7 @@ import { Slot } from '@radix-ui/react-slot';
import { Button } from '../Button';
-import { PopoverContext } from './Popover';
+import { PopoverContext } from './PopoverRoot';
export type PopoverTriggerProps = React.ComponentPropsWithRef;
diff --git a/packages/react/src/components/Popover/index.ts b/packages/react/src/components/Popover/index.ts
index 0a688a7245..19127e4152 100644
--- a/packages/react/src/components/Popover/index.ts
+++ b/packages/react/src/components/Popover/index.ts
@@ -1,22 +1,21 @@
-import { Popover as PopoverRoot } from './Popover';
+import { PopoverRoot } from './PopoverRoot';
import type { PopoverContentProps } from './PopoverContent';
import { PopoverContent } from './PopoverContent';
import type { PopoverTriggerProps } from './PopoverTrigger';
import { PopoverTrigger } from './PopoverTrigger';
-import type { PopoverProps } from './Popover';
+import type { PopoverRootProps } from './PopoverRoot';
-type PopoverComponent = typeof PopoverRoot & {
+type PopoverComponent = {
+ Root: typeof PopoverRoot;
Content: typeof PopoverContent;
Trigger: typeof PopoverTrigger;
};
-const Popover = PopoverRoot as PopoverComponent;
+const Popover = {} as PopoverComponent;
+Popover.Root = PopoverRoot;
Popover.Content = PopoverContent;
Popover.Trigger = PopoverTrigger;
-Popover.Content.displayName = 'Popover.Content';
-Popover.Trigger.displayName = 'Popover.Trigger';
-
-export type { PopoverProps, PopoverContentProps, PopoverTriggerProps };
-export { Popover, PopoverContent, PopoverTrigger };
+export type { PopoverRootProps, PopoverContentProps, PopoverTriggerProps };
+export { Popover, PopoverRoot, PopoverContent, PopoverTrigger };