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

package/dist/cjs/components/Textfield/Textfield.js

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var index = require('../Field/index.js');
+var Label = require('../Label/Label.js');
+var FieldDescription = require('../Field/FieldDescription.js');
+var FieldAffix = require('../Field/FieldAffix.js');
+var Textarea = require('../Textarea/Textarea.js');
+var Input = require('../Input/Input.js');
+var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
+
+/**
+ *  Composed text input component using `Field`
+ *
+ * `classname` & `style` are passed to the wrapper elements.
+ *
+ * Rest props are passed to the `Input` or `Textarea` component.
+ * @example
+ * <Textfield label="Textfield label">
+ */
+const Textfield = react.forwardRef(function Textfield({ label, description, error, multiline, prefix, suffix, 'data-size': size, counter, style, className, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { className: className, "data-size": size, style: style, children: [!!label && jsxRuntime.jsx(Label.Label, { children: label }), !!description && jsxRuntime.jsx(FieldDescription.FieldDescription, { children: description }), jsxRuntime.jsxs(FieldAffix.FieldAffixes, { children: [prefix === undefined || jsxRuntime.jsx(FieldAffix.FieldAffix, { children: prefix }), multiline === true ? (jsxRuntime.jsx(Textarea.Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsxRuntime.jsx(Input.Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsxRuntime.jsx(FieldAffix.FieldAffix, { children: suffix })] }), !!error && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { children: error }), !!counter && (jsxRuntime.jsx(index.Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) }))] }));
+});
+
+exports.Textfield = Textfield;

package/dist/cjs/components/ToggleGroup/ToggleGroup.js

@@ -2,25 +2,25 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var RovingTabindexRoot = require('../../utilities/RovingTabIndex/RovingTabindexRoot.js');
+var cl = require('clsx/lite');
+var react = require('react');
+var RovingFocusRoot = require('../../utilities/RovingFocus/RovingFocusRoot.js');
 
-const ToggleGroupContext = React.createContext({});
-/** `ToggleGroup` component.
+const ToggleGroupContext = react.createContext({});
+/**
+ * Display a group of buttons that can be toggled between.
+ *
  * @example
- * ```tsx
  * <ToggleGroup 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>
- * ```
  */
-const ToggleGroup = React.forwardRef(({ size = 'md', children, value, defaultValue, onChange, name, className, ...rest }, ref) => {
-    const nameId = React.useId();
+const ToggleGroup = react.forwardRef(function ToggleGroup({ children, value, defaultValue, onChange, name, className, ...rest }, ref) {
+    const nameId = react.useId();
     const isControlled = value !== undefined;
-    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
     let onValueChange = onChange;
     if (!isControlled) {
         onValueChange = (newValue) => {
@@ -29,15 +29,13 @@ const ToggleGroup = React.forwardRef(({ size = 'md', children, value, defaultVal
         };
         value = uncontrolledValue;
     }
-    return (jsxRuntime.jsx("div", { className: lite.clsx('ds-togglegroup', className), ref: ref, ...rest, children: jsxRuntime.jsxs(ToggleGroupContext.Provider, { value: {
-                value,
-                defaultValue,
-                name: name ?? `togglegroup-name-${nameId}`,
-                onChange: onValueChange,
-                size,
-            }, children: [name && (jsxRuntime.jsx("input", { className: 'ds-togglegroup__input', name: name, value: value })), jsxRuntime.jsx(RovingTabindexRoot.RovingTabindexRoot, { asChild: true, valueId: value, children: jsxRuntime.jsx("div", { className: 'ds-togglegroup__content', role: 'radiogroup', children: children }) })] }) }));
+    return (jsxRuntime.jsx(ToggleGroupContext.Provider, { value: {
+            value,
+            defaultValue,
+            name: name ?? `togglegroup-name-${nameId}`,
+            onChange: onValueChange,
+        }, children: jsxRuntime.jsx(RovingFocusRoot.RovingFocusRoot, { asChild: true, activeValue: value, orientation: 'ambiguous', children: jsxRuntime.jsxs("div", { className: cl('ds-togglegroup', className), role: 'radiogroup', ref: ref, ...rest, children: [name && jsxRuntime.jsx("input", { type: 'hidden', name: name, value: value }), children] }) }) }));
 });
-ToggleGroup.displayName = 'ToggleGroup';
 
 exports.ToggleGroup = ToggleGroup;
 exports.ToggleGroupContext = ToggleGroupContext;

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var RovingFocusItem = require('../../utilities/RovingFocus/RovingFocusItem.js');
+var Button = require('../Button/Button.js');
+var useToggleGroupitem = require('./useToggleGroupitem.js');
+
+/**
+ * A single item in a ToggleGroup.
+ * @example
+ * <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ */
+const ToggleGroupItem = react.forwardRef(function ToggleGroupItem(rest, ref) {
+    const { active, buttonProps, value } = useToggleGroupitem.useToggleGroupItem(rest);
+    return (jsxRuntime.jsx(RovingFocusItem.RovingFocusItem, { asChild: true, value: value, children: jsxRuntime.jsx(Button.Button, { variant: active ? 'primary' : 'tertiary', ref: ref, ...rest, ...buttonProps }) }));
+});
+
+exports.ToggleGroupItem = ToggleGroupItem;

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

@@ -2,10 +2,21 @@
 'use strict';
 
 var ToggleGroup$1 = require('./ToggleGroup.js');
-var ToggleGroupItem = require('./ToggleGroupItem/ToggleGroupItem.js');
+var ToggleGroupItem = require('./ToggleGroupItem.js');
 
-const ToggleGroup = ToggleGroup$1.ToggleGroup;
-ToggleGroup.Item = ToggleGroupItem.ToggleGroupItem;
+/**
+ * Display a group of buttons that can be toggled between.
+ *
+ * @example
+ * <ToggleGroup 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>
+ */
+const ToggleGroup = Object.assign(ToggleGroup$1.ToggleGroup, {
+    Item: ToggleGroupItem.ToggleGroupItem,
+});
 ToggleGroup.Item.displayName = 'ToggleGroup.Item';
 
 exports.ToggleGroupItem = ToggleGroupItem.ToggleGroupItem;

package/dist/cjs/components/ToggleGroup/useToggleGroupitem.js

@@ -0,0 +1,32 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var ToggleGroup = require('./ToggleGroup.js');
+
+/** Handles props for `ToggleGroup.Item` in context with `ToggleGroup` and `RovingFocus` */
+const useToggleGroupItem = (props) => {
+    const { ...rest } = props;
+    const genValue = react.useId();
+    const toggleGroup = react.useContext(ToggleGroup.ToggleGroupContext);
+    const value = props.value ?? genValue;
+    const active = toggleGroup.value === value;
+    const buttonId = `togglegroup-item-${react.useId()}`;
+    return {
+        ...rest,
+        active: active,
+        value,
+        buttonProps: {
+            id: buttonId,
+            'aria-checked': active,
+            'aria-current': active,
+            role: 'radio',
+            name: toggleGroup.name,
+            onClick: () => {
+                toggleGroup.onChange?.(value);
+            },
+        },
+    };
+};
+
+exports.useToggleGroupItem = useToggleGroupItem;

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -2,87 +2,121 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
-var floatingUi_dom = require('../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
-var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
-var floatingUi_reactDom = require('../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
+var dom = require('@floating-ui/dom');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var react$1 = require('@floating-ui/react');
 
-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]; }
+/**
+ * Tooltip component that displays a small piece of information when hovering or focusing on an element.
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  Hover me
+ * </Tooltip>
+ */
+const Tooltip = react.forwardRef(function Tooltip({ id, children, content, placement = 'top', open, className, ...rest }, ref) {
+    const randomTooltipId = react.useId();
+    const [internalOpen, setInternalOpen] = react.useState(false);
+    const triggerRef = react.useRef(null);
+    const tooltipRef = react.useRef(null);
+    const mergedRefs = react$1.useMergeRefs([tooltipRef, ref]);
+    const controlledOpen = open ?? internalOpen;
+    const setOpen = () => {
+        setInternalOpen(true);
+    };
+    const setClose = () => {
+        setInternalOpen(false);
+    };
+    // Position with floating-ui
+    react.useEffect(() => {
+        const tooltip = tooltipRef.current;
+        const trigger = triggerRef.current;
+        tooltip?.togglePopover?.(controlledOpen);
+        if (tooltip)
+            tooltip.style.opacity = controlledOpen ? '1' : '0';
+        if (tooltip && trigger && controlledOpen) {
+            return dom.autoUpdate(trigger, tooltip, () => {
+                dom.computePosition(trigger, tooltip, {
+                    placement,
+                    strategy: 'fixed',
+                    middleware: [
+                        dom.offset((data) => {
+                            // get pseudo element arrow size
+                            const styles = getComputedStyle(data.elements.floating, '::before');
+                            return parseFloat(styles.height);
+                        }),
+                        dom.flip({
+                            fallbackAxisSideDirection: 'start',
+                        }),
+                        dom.shift(),
+                        arrowPseudoElement,
+                    ],
+                }).then(({ x, y }) => {
+                    tooltip.style.translate = `${x}px ${y}px`;
                 });
+            });
+        }
+    }, [controlledOpen, placement]);
+    /* Add listener for ESC to dismiss */
+    react.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                setInternalOpen(false);
             }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-const ARROW_HEIGHT = 7;
-const ARROW_GAP = 4;
-const Tooltip = React.forwardRef(({ children, content, placement = 'top', delay = 150, open: userOpen, defaultOpen = false, portal = false, className, style, ...rest }, ref) => {
-    const [isOpen, setIsOpen] = React.useState(defaultOpen);
-    const Container = portal ? floatingUi_react.FloatingPortal : React__namespace.Fragment;
-    const arrowRef = React__namespace.useRef(null);
-    const internalOpen = userOpen ?? isOpen;
-    const { refs, floatingStyles, context } = floatingUi_react.useFloating({
-        open: internalOpen,
-        onOpenChange: setIsOpen,
-        placement,
-        whileElementsMounted: floatingUi_dom.autoUpdate,
-        middleware: [
-            floatingUi_core.offset(ARROW_HEIGHT + ARROW_GAP),
-            floatingUi_dom.flip({
-                fallbackAxisSideDirection: 'start',
-            }),
-            floatingUi_dom.shift(),
-            floatingUi_reactDom.arrow({
-                element: arrowRef,
-            }),
-        ],
-    });
-    const { styles: animationStyles } = floatingUi_react.useTransitionStyles(context, {
-        initial: {
-            opacity: 0,
-        },
-    });
-    const { getReferenceProps, getFloatingProps } = floatingUi_react.useInteractions([
-        // Event listeners to change the open state
-        floatingUi_react.useHover(context, { move: false, delay }),
-        floatingUi_react.useFocus(context),
-        floatingUi_react.useDismiss(context),
-        floatingUi_react.useRole(context, { role: 'tooltip' }),
-    ]);
-    const mergedRef = floatingUi_react.useMergeRefs([ref, refs.setFloating]);
-    const childMergedRef = floatingUi_react.useMergeRefs([
-        children
-            .ref,
-        refs.setReference,
-    ]);
-    if (!children ||
-        children?.type === React__namespace.Fragment ||
-        children === React__namespace.Fragment) {
-        console.error('<Tooltip> children needs to be a single ReactElement and not: <React.Fragment/> | <></>');
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+    /* If children is only a string, make a span */
+    const ChildContainer = typeof children === 'string' ? 'span' : reactSlot.Slot;
+    /* Make sure it is valid */
+    if (typeof children !== 'string' && children.type === react.Fragment) {
+        console.error('<Tooltip> children needs to be a single ReactElement that can receive a ref and not: <Fragment/> | <></>');
         return null;
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [React.cloneElement(children, getReferenceProps({
-                ref: childMergedRef,
-            })), internalOpen && (jsxRuntime.jsx(Container, { children: jsxRuntime.jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
-                        className: lite.clsx('ds-tooltip', 'ds-paragraph--xs', className),
-                        ref: mergedRef,
-                        ...rest,
-                    }), children: [content, jsxRuntime.jsx(floatingUi_react.FloatingArrow, { ref: arrowRef, context: context, className: 'ds-tooltip__arrow', height: ARROW_HEIGHT })] }) }))] }));
+    const popoverProps = {
+        [react.version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: id ?? randomTooltipId,
+        [react.version.startsWith('19')
+            ? 'popoverTargetAction'
+            : 'popovertargetaction']: 'show',
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsxRuntime.jsx("div", { ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, 
+                // @ts-ignore @types/react-dom does not understand popover yet
+                popover: 'manual', ...rest, children: content })] }));
 });
-Tooltip.displayName = 'Tooltip';
+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`;
+        switch (placement) {
+            case 'top':
+                arrowY = '100%';
+                break;
+            case 'right':
+                arrowX = '0';
+                break;
+            case 'bottom':
+                arrowY = '0';
+                break;
+            case 'left':
+                arrowX = '100%';
+                break;
+        }
+        elements.floating.style.setProperty('--dsc-tooltip-arrow-x', arrowX);
+        elements.floating.style.setProperty('--dsc-tooltip-arrow-y', arrowY);
+        return data;
+    },
+};
 
 exports.Tooltip = Tooltip;

package/dist/cjs/components/ValidationMessage/ValidationMessage.js

@@ -0,0 +1,20 @@
+'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 `ValidationMessage` to display validation text
+ *
+ * @example
+ * <ValidationMessage>This is a danger validation message</ValidationMessage>
+ */
+const ValidationMessage = react.forwardRef(function ValidationMessage({ className, asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'p';
+    return (jsxRuntime.jsx(Component, { className: cl('ds-validation-message', className), "data-field": 'validation', ref: ref, ...rest }));
+});
+
+exports.ValidationMessage = ValidationMessage;