@digdir/designsystemet-react 1.0.0-rc.9 → 1.0.1

package/dist/cjs/components/MultiSuggestion/MultiSuggestionList.js

@@ -0,0 +1,30 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('@u-elements/u-datalist');
+var MultiSuggestion = require('./MultiSuggestion.js');
+
+/**
+ * Component that provides a MultiSuggestion list.
+ *
+ * Place as a descendant of `MultiSuggestion`
+ *
+ * @example
+ * <MultiSuggestion>
+ *   <MultiSuggestion.Input />
+ *   <MultiSuggestion.List />
+ * </MultiSuggestion>
+ */
+const MultiSuggestionList = react.forwardRef(function MultiSuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
+    const { inputRef, listId, setListId, handleFilter } = react.useContext(MultiSuggestion.MultiSuggestionContext);
+    react.useEffect(() => handleFilter?.(inputRef?.current)); // Must run on every render
+    react.useEffect(() => {
+        if (id && listId !== id)
+            setListId?.(id);
+    }, [listId, id, setListId]);
+    return (jsxRuntime.jsx("u-datalist", { "data-sr-singular": singular, "data-sr-plural": plural, class: className, id: listId, ref: ref, ...rest }));
+});
+
+exports.MultiSuggestionList = MultiSuggestionList;

package/dist/cjs/components/MultiSuggestion/MultiSuggestionOption.js

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('@u-elements/u-datalist');
+
+const MultiSuggestionOption = react.forwardRef(function MultiSuggestionOption({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("u-option", { class: className, ref: ref, ...rest }));
+});
+
+exports.MultiSuggestionOption = MultiSuggestionOption;

package/dist/cjs/components/MultiSuggestion/index.js

@@ -0,0 +1,34 @@
+'use client';
+'use strict';
+
+var MultiSuggestion$1 = require('./MultiSuggestion.js');
+var MultiSuggestionChips = require('./MultiSuggestionChips.js');
+var MultiSuggestionClear = require('./MultiSuggestionClear.js');
+var MultiSuggestionEmpty = require('./MultiSuggestionEmpty.js');
+var MultiSuggestionInput = require('./MultiSuggestionInput.js');
+var MultiSuggestionList = require('./MultiSuggestionList.js');
+var MultiSuggestionOption = require('./MultiSuggestionOption.js');
+
+const MultiSuggestion = Object.assign(MultiSuggestion$1.MultiSuggestion, {
+    Input: MultiSuggestionInput.MultiSuggestionInput,
+    List: MultiSuggestionList.MultiSuggestionList,
+    Option: MultiSuggestionOption.MultiSuggestionOption,
+    Chips: MultiSuggestionChips.MultiSuggestionChips,
+    Empty: MultiSuggestionEmpty.MultiSuggestionEmpty,
+    Clear: MultiSuggestionClear.MultiSuggestionClear,
+});
+MultiSuggestion.displayName = 'EXPERIMENTRAL_MultiSuggestion';
+MultiSuggestion.Input.displayName = 'EXPERIMENTRAL_MultiSuggestion.Input';
+MultiSuggestion.List.displayName = 'EXPERIMENTRAL_MultiSuggestion.List';
+MultiSuggestion.Option.displayName = 'EXPERIMENTRAL_MultiSuggestion.Option';
+MultiSuggestion.Chips.displayName = 'EXPERIMENTRAL_MultiSuggestion.Chips';
+MultiSuggestion.Empty.displayName = 'EXPERIMENTRAL_MultiSuggestion.Empty';
+MultiSuggestion.Clear.displayName = 'EXPERIMENTRAL_MultiSuggestion.Clear';
+
+exports.EXPERIMENTAL_MultiSuggestionChips = MultiSuggestionChips.MultiSuggestionChips;
+exports.EXPERIMENTAL_MultiSuggestionClear = MultiSuggestionClear.MultiSuggestionClear;
+exports.EXPERIMENTAL_MultiSuggestionEmpty = MultiSuggestionEmpty.MultiSuggestionEmpty;
+exports.EXPERIMENTAL_MultiSuggestionInput = MultiSuggestionInput.MultiSuggestionInput;
+exports.EXPERIMENTAL_MultiSuggestionList = MultiSuggestionList.MultiSuggestionList;
+exports.EXPERIMENTAL_MultiSuggestionOption = MultiSuggestionOption.MultiSuggestionOption;
+exports.EXPERIMENTAL_MultiSuggestion = MultiSuggestion;

package/dist/cjs/components/Pagination/Pagination.js

@@ -2,36 +2,31 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var akselIcons = require('@navikt/aksel-icons');
-var PaginationRoot = require('./PaginationRoot.js');
-var PaginationContent = require('./PaginationContent.js');
-var PaginationItem = require('./PaginationItem.js');
-var PaginationButton = require('./PaginationButton.js');
-var PaginationEllipsis = require('./PaginationEllipsis.js');
-var PaginationNextPrev = require('./PaginationNextPrev.js');
-var usePagination = require('./usePagination.js');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
 
-const iconSize = {
-    sm: '1rem',
-    md: '1.5rem',
-    lg: '2rem',
-};
-const Pagination = React.forwardRef(({ nextLabel = '', previousLabel = '', compact = false, hideLabels = false, currentPage = 1, totalPages, size = 'md', onChange, itemLabel = (num) => `Side ${num}`, ...rest }, ref) => {
-    const { pages, showNextPage, showPreviousPage } = usePagination.usePagination({
-        compact,
-        currentPage,
-        totalPages,
-    });
-    return (jsxRuntime.jsx(PaginationRoot.PaginationRoot, { ref: ref, "aria-label": 'Pagination', size: size, compact: compact, ...rest, children: jsxRuntime.jsxs(PaginationContent.PaginationContent, { children: [jsxRuntime.jsx(PaginationItem.PaginationItem, { children: jsxRuntime.jsxs(PaginationNextPrev.PaginationPrevious, { className: lite.clsx(!showPreviousPage && 'ds-pagination--hidden'), onClick: () => {
-                            onChange(currentPage - 1);
-                        }, "aria-label": previousLabel, children: [jsxRuntime.jsx(akselIcons.ChevronLeftIcon, { "aria-hidden": true, fontSize: iconSize[size] }), !hideLabels && previousLabel] }) }), pages.map((page, i) => (jsxRuntime.jsx(PaginationItem.PaginationItem, { children: page === 'ellipsis' ? (jsxRuntime.jsx(PaginationEllipsis.PaginationEllipsis, {})) : (jsxRuntime.jsx(PaginationButton.PaginationButton, { "aria-current": currentPage === page, isActive: currentPage === page, "aria-label": itemLabel(page), onClick: () => {
-                            onChange(page);
-                        }, children: page })) }, `${page}${i}`))), jsxRuntime.jsx(PaginationItem.PaginationItem, { children: jsxRuntime.jsxs(PaginationNextPrev.PaginationNext, { "aria-label": nextLabel, onClick: () => {
-                            onChange(currentPage + 1);
-                        }, className: lite.clsx(!showNextPage && 'ds-pagination--hidden'), children: [!hideLabels && nextLabel, jsxRuntime.jsx(akselIcons.ChevronRightIcon, { "aria-hidden": true, fontSize: iconSize[size] })] }) })] }) }));
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
+const Pagination = react.forwardRef(function Pagination({ 'aria-label': ariaLabel = 'Sidenavigering', asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'nav';
+    return (jsxRuntime.jsx(Component, { "aria-label": ariaLabel, className: cl('ds-pagination', className), ref: ref, ...rest }));
 });
-Pagination.displayName = 'Pagination';
 
 exports.Pagination = Pagination;

package/dist/cjs/components/Pagination/PaginationButton.js

@@ -2,13 +2,19 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var PaginationRoot = require('./PaginationRoot.js');
+var react = require('react');
 var Button = require('../Button/Button.js');
 
-const PaginationButton = React.forwardRef(({ isActive, ...rest }, ref) => {
-    const { size } = React.useContext(PaginationRoot.PaginationContext);
-    return (jsxRuntime.jsx(Button.Button, { ref: ref, variant: isActive ? 'primary' : 'tertiary', "aria-current": isActive, size: size, ...rest }));
+/**
+ * PaginationButton component, use within a Pagination.Item.
+ *
+ * @example
+ * <Pagination.Item>
+ *   <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ * </Pagination.Item>
+ */
+const PaginationButton = react.forwardRef(function PaginationButton(rest, ref) {
+    return jsxRuntime.jsx(Button.Button, { ref: ref, ...rest });
 });
 
 exports.PaginationButton = PaginationButton;

package/dist/cjs/components/Pagination/PaginationItem.js

@@ -1,20 +1,23 @@
 'use client';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var PaginationRoot = require('./PaginationRoot.js');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
 
-const PaginationItem = React.forwardRef(({ asChild, className, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'li';
-    const { size, compact } = React.useContext(PaginationRoot.PaginationContext);
-    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx('ds-pagination__item', `ds-pagination--${size}`, compact && 'ds-pagination--compact', className), ...rest }));
+/**
+ * PaginationItem component, use within a Pagination.List.
+ *
+ * @example
+ * <Pagination.List>
+ *   <Pagination.Item>
+ *     <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *   </Pagination.Item>
+ * </Pagination.List>
+ */
+const PaginationItem = react.forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'li';
+    return jsxRuntime.jsx(Component, { ref: ref, ...rest });
 });
-var PaginationItem$1 = PaginationItem;
 
 exports.PaginationItem = PaginationItem;
-exports.default = PaginationItem$1;

package/dist/cjs/components/Pagination/PaginationList.js

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+
+/**
+ * PaginationList component, use within a Pagination.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
+const PaginationList = react.forwardRef(function PaginationList({ asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'ul';
+    return jsxRuntime.jsx(Component, { ref: ref, ...rest });
+});
+
+exports.PaginationList = PaginationList;

package/dist/cjs/components/Pagination/index.js

@@ -2,34 +2,38 @@
 'use strict';
 
 var Pagination$1 = require('./Pagination.js');
-var PaginationContent = require('./PaginationContent.js');
-var PaginationEllipsis = require('./PaginationEllipsis.js');
-var PaginationItem = require('./PaginationItem.js');
 var PaginationButton = require('./PaginationButton.js');
-var PaginationNextPrev = require('./PaginationNextPrev.js');
-var PaginationRoot = require('./PaginationRoot.js');
+var PaginationItem = require('./PaginationItem.js');
+var PaginationList = require('./PaginationList.js');
 
-const Pagination = Pagination$1.Pagination;
-Pagination.Root = PaginationRoot.default;
-Pagination.Content = PaginationContent.PaginationContent;
-Pagination.Item = PaginationItem.default;
-Pagination.Button = PaginationButton.PaginationButton;
-Pagination.Ellipsis = PaginationEllipsis.default;
-Pagination.Previous = PaginationNextPrev.PaginationPrevious;
-Pagination.Next = PaginationNextPrev.PaginationNext;
-Pagination.Root.displayName = 'Pagination.Root';
-Pagination.Content.displayName = 'Pagination.Content';
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
+const Pagination = Object.assign(Pagination$1.Pagination, {
+    List: PaginationList.PaginationList,
+    Item: PaginationItem.PaginationItem,
+    Button: PaginationButton.PaginationButton,
+});
+Pagination.List.displayName = 'Pagination.List';
 Pagination.Item.displayName = 'Pagination.Item';
 Pagination.Button.displayName = 'Pagination.Button';
-Pagination.Ellipsis.displayName = 'Pagination.Ellipsis';
-Pagination.Previous.displayName = 'Pagination.Previous';
-Pagination.Next.displayName = 'Pagination.Next';
 
-exports.PaginationContent = PaginationContent.PaginationContent;
-exports.PaginationEllipsis = PaginationEllipsis.default;
-exports.PaginationItem = PaginationItem.default;
 exports.PaginationButton = PaginationButton.PaginationButton;
-exports.PaginationNext = PaginationNextPrev.PaginationNext;
-exports.PaginationPrevious = PaginationNextPrev.PaginationPrevious;
-exports.PaginationRoot = PaginationRoot.default;
+exports.PaginationItem = PaginationItem.PaginationItem;
+exports.PaginationList = PaginationList.PaginationList;
 exports.Pagination = Pagination;

package/dist/cjs/components/Paragraph/Paragraph.js

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Use `Paragraph` to display text with paragraph text styles.
+ * Renders a native `p` element.
+ *
+ * @example
+ * <Paragraph data-size='lg'>Paragraph</Paragraph>
+ */
+const Paragraph = react.forwardRef(function Paragraph({ className, asChild, variant = 'default', ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'p';
+    return (jsxRuntime.jsx(Component, { ref: ref, className: cl(`ds-paragraph`, className), "data-variant": variant, ...rest }));
+});
+
+exports.Paragraph = Paragraph;

package/dist/cjs/components/Popover/Popover.js

@@ -2,67 +2,134 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var dom = require('@floating-ui/dom');
+var react$1 = require('@floating-ui/react');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var PopoverTriggerContext = require('./PopoverTriggerContext.js');
 
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example with TriggerContext
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-popover">Open Popover</Button>
+ * <Popover id="my-popover">
+ *   Content
+ * </Popover>
+ */
+const Popover = react.forwardRef(function Popover({ id, className, onClose, onOpen, open, variant = 'default', placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    const popoverRef = react.useRef(null);
+    const mergedRefs = react$1.useMergeRefs([popoverRef, ref]);
+    const { popoverId, setPopoverId } = react.useContext(PopoverTriggerContext.Context);
+    const [internalOpen, setInternalOpen] = react.useState(false);
+    const controlledOpen = open ?? internalOpen;
+    // NOTE: This code is purely to add React controlled component ability to Popover API
+    react.useEffect(() => {
+        const popover = popoverRef.current;
+        const handleClick = (event) => {
+            const el = event.target;
+            const isTrigger = el?.closest?.(`[popovertarget="${popover?.id}"]`);
+            const isOutside = !isTrigger && !popover?.contains(el);
+            if (isTrigger) {
+                event.preventDefault(); // Prevent native Popover API
+                setInternalOpen((open) => !open);
+                onOpen?.();
             }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-const Popover = ({ children, placement = 'top', open, variant = 'default', portal, size = 'md', onOpenChange, onClose, }) => {
-    const triggerRef = React.useRef(null);
-    const [internalOpen, setInternalOpen] = React.useState(open ?? false);
-    const randomPopoverId = React.useId();
-    const [popoverId, setPopoverId] = React.useState(randomPopoverId);
-    const randomTriggerId = React.useId();
-    const [triggerId, setTriggerId] = React.useState(randomTriggerId);
-    const isControlled = typeof open === 'boolean';
-    React__namespace.useEffect(() => {
-        setInternalOpen(open ?? false);
-    }, [open]);
-    const anchorEl = triggerRef.current;
-    return (jsxRuntime.jsx(PopoverContext.Provider, { value: {
-            triggerRef,
-            anchorEl,
-            portal,
-            internalOpen,
-            isControlled,
-            setInternalOpen,
-            size,
-            variant,
-            placement,
-            onOpenChange,
-            onClose,
-            popoverId,
-            setPopoverId,
-            triggerId,
-            setTriggerId,
-        }, children: children }));
-};
-const PopoverContext = React__namespace.createContext({
-    size: 'sm',
-    variant: 'default',
-    anchorEl: null,
-    placement: 'top',
-    triggerRef: { current: null },
-    internalOpen: false,
-    setInternalOpen: () => { },
+            if (isOutside) {
+                setInternalOpen(false);
+                onClose?.();
+            }
+        };
+        const handleKeydown = (event) => {
+            if (event.key !== 'Escape' || !controlledOpen)
+                return;
+            event.preventDefault(); // Prevent closing fullscreen in Safari
+            setInternalOpen(false);
+            onClose?.();
+        };
+        popover?.togglePopover?.(controlledOpen);
+        document.addEventListener('click', handleClick, true); // Use capture to execute before React event API
+        document.addEventListener('keydown', handleKeydown);
+        return () => {
+            document.removeEventListener('click', handleClick, true);
+            document.removeEventListener('keydown', handleKeydown);
+        };
+    }, [controlledOpen]);
+    // Position with floating-ui
+    react.useEffect(() => {
+        const popover = popoverRef.current;
+        const trigger = document.querySelector(`[popovertarget="${popover?.id}"]`);
+        if (popover && trigger && controlledOpen)
+            return dom.autoUpdate(trigger, popover, () => {
+                dom.computePosition(trigger, popover, {
+                    placement,
+                    strategy: 'fixed',
+                    middleware: [
+                        dom.offset((data) => {
+                            // get pseudo element arrow size
+                            const styles = getComputedStyle(data.elements.floating, '::before');
+                            return parseFloat(styles.height);
+                        }),
+                        ...(autoPlacement
+                            ? [dom.flip({ fallbackAxisSideDirection: 'start' }), dom.shift()]
+                            : []),
+                        arrowPseudoElement,
+                    ],
+                }).then(({ x, y }) => {
+                    popover.style.translate = `${x}px ${y}px`;
+                });
+            });
+    }, [controlledOpen, placement, id, autoPlacement]);
+    // Update context with id
+    react.useEffect(() => {
+        if (id)
+            setPopoverId?.(id);
+    }, [id]);
+    return (jsxRuntime.jsx(Component, { className: cl('ds-popover', className), id: id || popoverId, 
+        // @ts-ignore @types/react-dom does not understand popover yet
+        popover: 'manual', "data-variant": variant, ref: mergedRefs, ...rest }));
 });
-Popover.displayName = 'Popover';
+const arrowPseudoElement = {
+    name: 'ArrowPseudoElement',
+    fn(data) {
+        const { elements, rects, placement } = data;
+        let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`;
+        let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`;
+        if (rects.reference.width > rects.floating.width) {
+            arrowX = `${Math.round(rects.floating.width / 2)}px`;
+        }
+        if (rects.reference.height > rects.floating.height) {
+            arrowY = `${Math.round(rects.floating.height / 2)}px`;
+        }
+        switch (placement.split('-')[0]) {
+            case 'top':
+                arrowY = '100%';
+                break;
+            case 'right':
+                arrowX = '0';
+                break;
+            case 'bottom':
+                arrowY = '0';
+                break;
+            case 'left':
+                arrowX = '100%';
+                break;
+        }
+        elements.floating.setAttribute('data-placement', placement.split('-')[0]); // We only need top/left/right/bottom
+        elements.floating.style.setProperty('--ds-popover-arrow-x', arrowX);
+        elements.floating.style.setProperty('--ds-popover-arrow-y', arrowY);
+        return data;
+    },
+};
 
 exports.Popover = Popover;
-exports.PopoverContext = PopoverContext;

package/dist/cjs/components/Popover/PopoverTrigger.js

@@ -2,24 +2,44 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var Popover = require('./Popover.js');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
 var Button = require('../Button/Button.js');
+var PopoverTriggerContext = require('./PopoverTriggerContext.js');
 
-const PopoverTrigger = React.forwardRef(({ id, asChild, ...rest }, ref) => {
-    const { triggerRef, internalOpen, setInternalOpen, isControlled, popoverId, triggerId, setTriggerId, } = React.useContext(Popover.PopoverContext);
-    const mergedRefs = floatingUi_react.useMergeRefs([ref, triggerRef]);
-    React.useEffect(() => {
-        id && setTriggerId?.(id);
-    }, [id, setTriggerId]);
-    const Component = asChild ? index.Slot : Button.Button;
-    return (jsxRuntime.jsx(Component, { ref: mergedRefs, onClick: () => {
-            if (!isControlled)
-                setInternalOpen(!internalOpen);
-        }, "aria-expanded": internalOpen, "aria-controls": internalOpen ? popoverId : undefined, id: triggerId, ...rest }));
+/**
+ * PopoverTrigger component, used to trigger a popover.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ *
+ * @example inline
+ * <Popover.TriggerContext>
+ *   <Paragraph>
+ *    We can use it <Popover.Trigger inline={true}>inline</Popover.Trigger>.
+ *   </Paragraph>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
+const PopoverTrigger = react.forwardRef(function PopoverTrigger({ id, inline, asChild, ...rest }, ref) {
+    const { popoverId } = react.useContext(PopoverTriggerContext.Context);
+    const Component = asChild ? reactSlot.Slot : inline ? 'button' : Button.Button;
+    const popoverProps = Object.assign({
+        [react.version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: popoverId,
+        ...(inline
+            ? {
+                'data-popover': 'inline',
+            }
+            : {}),
+    }, rest);
+    return jsxRuntime.jsx(Component, { ref: ref, ...popoverProps });
 });
-PopoverTrigger.displayName = 'PopoverTrigger';
 
 exports.PopoverTrigger = PopoverTrigger;

package/dist/cjs/components/Popover/PopoverTriggerContext.js

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
+const PopoverTriggerContext = ({ children, }) => {
+    const randomPopoverId = react.useId();
+    const [popoverId, setPopoverId] = react.useState(randomPopoverId);
+    return (jsxRuntime.jsx(Context.Provider, { value: { popoverId, setPopoverId }, children: children }));
+};
+PopoverTriggerContext.displayName = 'PopoverTriggerContext';
+const Context = react.createContext({});
+
+exports.Context = Context;
+exports.PopoverTriggerContext = PopoverTriggerContext;

package/dist/cjs/components/Popover/index.js

@@ -2,15 +2,27 @@
 'use strict';
 
 var Popover$1 = require('./Popover.js');
-var PopoverContent = require('./PopoverContent.js');
 var PopoverTrigger = require('./PopoverTrigger.js');
+var PopoverTriggerContext = require('./PopoverTriggerContext.js');
 
-const Popover = Popover$1.Popover;
-Popover.Content = PopoverContent.PopoverContent;
-Popover.Trigger = PopoverTrigger.PopoverTrigger;
-Popover.Content.displayName = 'Popover.Content';
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
+const Popover = Object.assign(Popover$1.Popover, {
+    TriggerContext: PopoverTriggerContext.PopoverTriggerContext,
+    Trigger: PopoverTrigger.PopoverTrigger,
+});
+Popover.TriggerContext.displayName = 'Popover.TriggerContext';
 Popover.Trigger.displayName = 'Popover.Trigger';
 
-exports.PopoverContent = PopoverContent.PopoverContent;
 exports.PopoverTrigger = PopoverTrigger.PopoverTrigger;
+exports.PopoverTriggerContext = PopoverTriggerContext.PopoverTriggerContext;
 exports.Popover = Popover;