@digdir/designsystemet-react 1.0.0-next.33 → 1.0.0-next.34

package/dist/esm/components/DropdownMenu/DropdownMenuRoot.js

@@ -1,46 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useState, useEffect, createContext } from 'react';
-
-/**
- * DropdownMenuRoot is the root component for the DropdownMenu component.
- * @example
- * <DropdownMenu.Root>
- *  <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
- *  <DropdownMenu.Content>
- *    <DropdownMenu.Group heading='Heading'>
- *      <DropdownMenu.Item>Button 1</DropdownMenu.Item>
- *    </DropdownMenu.Group>
- *  </DropdownMenu.Content>
- * </DropdownMenu.Root>
- */
-const DropdownMenuRoot = ({ open, onClose, placement = 'bottom-end', portal, size = 'md', children, }) => {
-    const triggerRef = useRef(null);
-    const [internalOpen, setInternalOpen] = useState(open ?? false);
-    const anchorEl = triggerRef.current;
-    const isControlled = typeof open === 'boolean';
-    useEffect(() => {
-        setInternalOpen(open ?? false);
-    }, [open]);
-    return (jsx(DropdownMenuContext.Provider, { value: {
-            anchorEl,
-            triggerRef,
-            size,
-            portal,
-            placement,
-            internalOpen,
-            isControlled,
-            onClose,
-            setInternalOpen,
-        }, children: children }));
-};
-const DropdownMenuContext = createContext({
-    triggerRef: { current: null },
-    size: 'md',
-    anchorEl: null,
-    internalOpen: false,
-    setInternalOpen: () => { },
-});
-DropdownMenuRoot.displayName = 'DropdownMenuRoot';
-
-export { DropdownMenuContext, DropdownMenuRoot };

package/dist/esm/components/DropdownMenu/DropdownMenuTrigger.js

@@ -1,20 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { forwardRef, useContext } from 'react';
-import { DropdownMenuContext } from './DropdownMenuRoot.js';
-import { Button } from '../Button/Button.js';
-
-const DropdownMenuTrigger = forwardRef(({ asChild, ...rest }, ref) => {
-    const { triggerRef, internalOpen, setInternalOpen, isControlled } = useContext(DropdownMenuContext);
-    const mergedRefs = useMergeRefs([ref, triggerRef]);
-    const Component = asChild ? Slot : Button;
-    return (jsx(Component, { ref: mergedRefs, onClick: () => {
-            if (!isControlled)
-                setInternalOpen(!internalOpen);
-        }, "aria-haspopup": 'menu', "aria-expanded": internalOpen, ...rest }));
-});
-DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
-
-export { DropdownMenuTrigger };

package/dist/esm/components/DropdownMenu/index.js

@@ -1,31 +0,0 @@
-'use client';
-import { DropdownMenuContent } from './DropdownMenuContent.js';
-import { DropdownMenuGroup } from './DropdownMenuGroup.js';
-import { DropdownMenuItem } from './DropdownMenuItem.js';
-import { DropdownMenuRoot } from './DropdownMenuRoot.js';
-import { DropdownMenuTrigger } from './DropdownMenuTrigger.js';
-
-/**
- * @example
- * <DropdownMenu.Root>
- *  <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
- *  <DropdownMenu.Content>
- *    <DropdownMenu.Group heading='Heading'>
- *      <DropdownMenu.Item>Button 1</DropdownMenu.Item>
- *    </DropdownMenu.Group>
- *  </DropdownMenu.Content>
- * </DropdownMenu.Root>
- */
-const DropdownMenu = {};
-DropdownMenu.Root = DropdownMenuRoot;
-DropdownMenu.Content = DropdownMenuContent;
-DropdownMenu.Group = DropdownMenuGroup;
-DropdownMenu.Item = DropdownMenuItem;
-DropdownMenu.Trigger = DropdownMenuTrigger;
-DropdownMenu.Root.displayName = 'DropdownMenu.Root';
-DropdownMenu.Content.displayName = 'DropdownMenu.Content';
-DropdownMenu.Group.displayName = 'DropdownMenu.Group';
-DropdownMenu.Item.displayName = 'DropdownMenu.Item';
-DropdownMenu.Trigger.displayName = 'DropdownMenu.Trigger';
-
-export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuRoot, DropdownMenuTrigger };

package/dist/esm/components/ErrorSummary/ErrorSummaryRoot.js

@@ -1,18 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { createContext, forwardRef, useId, useState } from 'react';
-
-const ErrorSummaryContext = createContext({
-    size: 'md',
-    headingId: 'heading',
-    setHeadingId: () => { },
-});
-const ErrorSummaryRoot = forwardRef(({ className, size = 'md', role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', ...rest }, ref) => {
-    const randomId = useId();
-    const [headingId, setHeadingId] = useState(randomId);
-    return (jsx(ErrorSummaryContext.Provider, { value: { size, headingId, setHeadingId }, children: jsx("div", { className: clsx('ds-error-summary', className), ref: ref, role: role, "aria-live": ariaLive, "aria-relevant": ariaRelevant, "aria-labelledby": headingId, ...rest }) }));
-});
-ErrorSummaryRoot.displayName = 'ErrorSummaryRoot';
-
-export { ErrorSummaryContext, ErrorSummaryRoot };

package/dist/esm/components/HelpText/HelpTextIcon.js

@@ -1,12 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-
-const HelpTextIcon = ({ className, filled = false, openState, }) => {
-    const d = filled
-        ? 'M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 16a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-11c2.205 0 4 1.657 4 3.693 0 .986-.416 1.914-1.172 2.612l-.593.54-.294.28c-.477.466-.869.94-.936 1.417l-.01.144v.814h-1.991v-.814c0-1.254.84-2.214 1.675-3.002l.74-.68c.38-.35.59-.816.59-1.31 0-1.024-.901-1.856-2.01-1.856-1.054 0-1.922.755-2.002 1.71l-.006.145H8C8 6.657 9.794 5 12 5Z'
-        : 'M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 14a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-11c2.205 0 4 1.657 4 3.693 0 .986-.416 1.914-1.172 2.612l-.593.54-.294.28c-.477.466-.869.94-.936 1.417l-.01.144v.814h-1.991v-.814c0-1.254.84-2.214 1.675-3.002l.74-.68c.38-.35.59-.816.59-1.31 0-1.024-.901-1.856-2.01-1.856-1.054 0-1.922.755-2.002 1.71l-.006.145H8C8 6.657 9.794 5 12 5Z';
-    return (jsx("svg", { "aria-hidden": true, className: className, "data-state": openState ? 'open' : 'closed', fill: 'none', role: 'img', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', children: jsx("path", { clipRule: 'evenodd', d: d, fill: 'currentColor', fillRule: 'evenodd' }) }));
-};
-HelpTextIcon.displayName = 'HelpText.Icon';
-
-export { HelpTextIcon };

package/dist/esm/components/Tabs/Tab.js

@@ -1,21 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { forwardRef } from 'react';
-import { RovingFocusItem } from '../../utilities/RovingFocus/RovingFocusItem.js';
-import { useTabItem } from './useTab.js';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
-
-/**
- * A single item in a Tabs component.
- * @example
- * <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
- */
-const Tab = forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    const { size, ...useTabRest } = useTabItem(props);
-    return (jsx(RovingFocusItem, { ...rest, asChild: true, children: jsx(Paragraph, { asChild: true, variant: 'short', size: size, children: jsx("button", { ...useTabRest, type: 'button', className: clsx('ds-tabs__tab', 'ds-focus', className), ref: ref, children: children }) }) }));
-});
-Tab.displayName = 'Tab';
-
-export { Tab };

package/dist/esm/components/Tabs/TabContent.js

@@ -1,22 +0,0 @@
-'use client';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { forwardRef, useContext } from 'react';
-import { TabsContext } from './TabsRoot.js';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
-
-/**
- * A single content item in a Tabs component.
- * @example
- * ```tsx
- * <Tabs.Content value='1'>content 1</Tabs.Content>
- * ```
- */
-const TabContent = forwardRef(({ children, value, className, ...rest }, ref) => {
-    const { value: tabsValue, size } = useContext(TabsContext);
-    const active = value === tabsValue;
-    return (jsx(Fragment, { children: active && (jsx(Paragraph, { asChild: true, variant: 'short', size: size, children: jsx("div", { className: clsx('ds-tabs__content', className), ref: ref, ...rest, children: children }) })) }));
-});
-TabContent.displayName = 'TabContent';
-
-export { TabContent };

package/dist/esm/components/Tabs/useTab.js

@@ -1,22 +0,0 @@
-'use client';
-import { useContext, useId } from 'react';
-import { TabsContext } from './TabsRoot.js';
-
-/** Handles props for `Tab` in context with `Tabs` */
-const useTabItem = (props) => {
-    const { value, ...rest } = props;
-    const tabs = useContext(TabsContext);
-    const buttonId = `tab-${useId()}`;
-    return {
-        ...rest,
-        id: buttonId,
-        'aria-selected': tabs.value === value,
-        role: 'tab',
-        size: tabs.size,
-        onClick: () => {
-            tabs.onChange?.(value);
-        },
-    };
-};
-
-export { useTabItem };

package/dist/esm/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.js

@@ -1,19 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
-import { forwardRef } from 'react';
-import { RovingFocusItem } from '../../../utilities/RovingFocus/RovingFocusItem.js';
-import { useToggleGroupItem } from './useToggleGroupitem.js';
-import { Button } from '../../Button/Button.js';
-
-/**
- * A single item in a ToggleGroup.
- * @example
- * <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
- */
-const ToggleGroupItem = forwardRef(function ToggleGroupItem({ className, ...rest }, ref) {
-    const { active, size = 'md', buttonProps, value } = useToggleGroupItem(rest);
-    return (jsx(RovingFocusItem, { asChild: true, value: value, children: jsx(Button, { className: clsx('ds-togglegroup__item', className), variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps }) }));
-});
-
-export { ToggleGroupItem };

package/dist/esm/components/ToggleGroup/ToggleGroupRoot.js

@@ -1,39 +0,0 @@
-'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { createContext, forwardRef, useId, useState } from 'react';
-import { RovingFocusRoot } from '../../utilities/RovingFocus/RovingFocusRoot.js';
-
-const ToggleGroupContext = createContext({});
-/**
- * Display a group of buttons that can be toggled between.
- * @example
- * <ToggleGroup.Root onChange={(value) => console.log(value)}>
- *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
- *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
- *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
- * </ToggleGroup.Root>
- */
-const ToggleGroupRoot = forwardRef(({ size = 'md', children, value, defaultValue, onChange, name, className, ...rest }, ref) => {
-    const nameId = useId();
-    const isControlled = value !== undefined;
-    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-    let onValueChange = onChange;
-    if (!isControlled) {
-        onValueChange = (newValue) => {
-            setUncontrolledValue(newValue);
-            onChange?.(newValue);
-        };
-        value = uncontrolledValue;
-    }
-    return (jsx("div", { className: clsx('ds-togglegroup', className), ref: ref, ...rest, children: jsxs(ToggleGroupContext.Provider, { value: {
-                value,
-                defaultValue,
-                name: name ?? `togglegroup-name-${nameId}`,
-                onChange: onValueChange,
-                size,
-            }, children: [name && (jsx("input", { className: 'ds-togglegroup__input', name: name, value: value })), jsx(RovingFocusRoot, { asChild: true, activeValue: value, orientation: 'ambiguous', children: jsx("div", { className: 'ds-togglegroup__content', role: 'radiogroup', children: children }) })] }) }));
-});
-ToggleGroupRoot.displayName = 'ToggleGroupRoot';
-
-export { ToggleGroupContext, ToggleGroupRoot };

package/dist/esm/components/Typography/ErrorMessage/ErrorMessage.js

@@ -1,14 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
-import { forwardRef } from 'react';
-
-/** Use `ErrorMessage` to display text as error message. */
-const ErrorMessage = forwardRef(({ size = 'md', className, spacing, asChild, error = true, ...rest }, ref) => {
-    const Component = asChild ? Slot : 'div';
-    return (jsx(Component, { ref: ref, className: clsx('ds-error-message', `ds-error_message--${size}`, spacing && 'ds-error-message--spacing', error && 'ds-error-message--error', className), ...rest }));
-});
-ErrorMessage.displayName = 'ErrorMessage';
-
-export { ErrorMessage };

package/dist/esm/components/form/Fieldset/useFieldset.js

@@ -1,17 +0,0 @@
-'use client';
-import { useFormField } from '../useFormField.js';
-
-/** Handles fieldset props and state */
-const useFieldset = (props) => {
-    const formField = useFormField(props, 'fieldset');
-    const { inputProps } = formField;
-    return {
-        ...formField,
-        fieldsetProps: {
-            'aria-invalid': inputProps['aria-invalid'],
-            'aria-describedby': inputProps['aria-describedby'],
-        },
-    };
-};
-
-export { useFieldset };

package/dist/esm/components/loaders/Skeleton/Circle/Circle.js

@@ -1,13 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
-import { useSynchronizedAnimation } from '../../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
-
-/**  Skeleton component used for indicating loading elements of circular shape */
-const Circle = ({ width, height, className, children, style, ...rest }) => {
-    const ref = useSynchronizedAnimation('ds-skeleton-opacity-fade');
-    return (jsx("div", { ref: ref, className: clsx('ds-skeleton', 'ds-skeleton--circle', Boolean(children) && 'ds-skeleton--has-children', className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
-};
-Circle.displayName = 'SkeletonCircle';
-
-export { Circle };

package/dist/esm/components/loaders/Skeleton/Rectangle/Rectangle.js

@@ -1,13 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
-import { useSynchronizedAnimation } from '../../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
-
-/**  Skeleton component used for indicating loading elements of rectangle shape */
-const Rectangle = ({ width, height, className, children, style, ...rest }) => {
-    const ref = useSynchronizedAnimation('ds-skeleton-opacity-fade');
-    return (jsx("div", { ref: ref, className: clsx('ds-skeleton', 'ds-skeleton--rectangle', Boolean(children) && 'ds-skeleton--has-children', className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
-};
-Rectangle.displayName = 'SkeletonRectangle';
-
-export { Rectangle };

package/dist/esm/components/loaders/Skeleton/Text/Text.js

@@ -1,13 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
-import { useSynchronizedAnimation } from '../../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
-
-/**  Skeleton component used for indicating loading elements of text */
-const Text = ({ width, height, className, style, children, ...rest }) => {
-    const ref = useSynchronizedAnimation('ds-skeleton-opacity-fade');
-    return (jsx("div", { ref: ref, className: clsx('ds-skeleton', 'ds-skeleton--text', Boolean(children) && 'ds-skeleton--has-children', className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
-};
-Text.displayName = 'SkeletonText';
-
-export { Text };

package/dist/esm/components/loaders/Skeleton/index.js

@@ -1,15 +0,0 @@
-'use client';
-import { Circle } from './Circle/Circle.js';
-import { Rectangle } from './Rectangle/Rectangle.js';
-import { Text } from './Text/Text.js';
-
-const Skeleton = {
-    Circle: Circle,
-    Rectangle: Rectangle,
-    Text: Text,
-};
-Skeleton.Circle.displayName = 'Skeleton.Circle';
-Skeleton.Rectangle.displayName = 'Skeleton.Rectangle';
-Skeleton.Text.displayName = 'Skeleton.Text';
-
-export { Skeleton, Circle as SkeletonCircle, Rectangle as SkeletonRectangle, Text as SkeletonText };