@digdir/designsystemet-react 0.52.0-alpha.0

package/dist/esm/components/form/Switch/Switch.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"switch":"fds-switch-switch-72679bdc","label":"fds-switch-label-72679bdc","track":"fds-switch-track-72679bdc","description":"fds-switch-description-72679bdc","padlock":"fds-switch-padlock-72679bdc","right":"fds-switch-right-72679bdc","input":"fds-switch-input-72679bdc","readonly":"fds-switch-readonly-72679bdc","disabled":"fds-switch-disabled-72679bdc","small":"fds-switch-small-72679bdc","medium":"fds-switch-medium-72679bdc","large":"fds-switch-large-72679bdc","thumb":"fds-switch-thumb-72679bdc"};
+
+export { classes as default };

package/dist/esm/components/form/Switch/useSwitch.js

@@ -0,0 +1,43 @@
+'use client';
+import { useContext } from 'react';
+import { useFormField } from '../useFormField.js';
+import { CheckboxGroupContext } from '../Checkbox/Group/Group.js';
+
+/** Handles props for `Switch` in context with `Checkbox.Group` (and `Fieldset`) */
+const useSwitch = (props) => {
+    const checkboxGroup = useContext(CheckboxGroupContext);
+    const { inputProps, readOnly, ...rest } = useFormField(props, 'switch');
+    const propsValue = props.value || '';
+    return {
+        ...rest,
+        readOnly,
+        inputProps: {
+            ...inputProps,
+            readOnly,
+            type: 'checkbox',
+            defaultChecked: checkboxGroup?.defaultValue
+                ? checkboxGroup?.defaultValue.includes(propsValue)
+                : props.defaultChecked,
+            checked: checkboxGroup?.value
+                ? checkboxGroup?.value.includes(propsValue)
+                : props.checked,
+            onClick: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onClick?.(e);
+            },
+            onChange: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onChange?.(e);
+                checkboxGroup?.toggleValue(propsValue);
+            },
+        },
+    };
+};
+
+export { useSwitch };

package/dist/esm/components/form/Textarea/Textarea.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
+import { CharacterCounter } from '../CharacterCounter.js';
+import { useTextarea } from './useTextarea.js';
+import classes from './Textarea.module.css.js';
+import utilityClasses from '../../../utilities/utility.module.css.js';
+import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+import { Label } from '../../Typography/Label/Label.js';
+import { omit } from '../../../utilities/objectUtils.js';
+import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
+
+/** Textarea field
+ *
+ * @example
+ * ```tsx
+ * <Textarea label="Textarea label">
+ * ```
+ */
+const Textarea = forwardRef((props, ref) => {
+    const { label, description, style, characterLimit, hideLabel, className, ...rest } = props;
+    const { textareaProps, descriptionId, hasError, errorId, size = 'medium', readOnly, } = useTextarea(props);
+    const [value, setValue] = useState(props.defaultValue);
+    const characterLimitId = `${textareaProps.id}-charactercount}`;
+    const hasCharacterLimit = characterLimit != null;
+    const describedBy = clsx(textareaProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { style: style, className: clsx(classes.formField, textareaProps.disabled && classes.disabled, readOnly && classes.readonly, className), children: [label && (jsxs(Label, { size: size, weight: 'medium', htmlFor: textareaProps.id, className: clsx(classes.label, hideLabel && utilityClasses.visuallyHidden), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: classes.padlock })), jsx("span", { children: label })] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: clsx(classes.description, hideLabel && utilityClasses.visuallyHidden), children: description }) })), jsx("textarea", { className: clsx(classes.textarea, utilityClasses.focusable, classes[size]), ref: ref, "aria-describedby": describedBy, ...omit(['size', 'error', 'errorId'], rest), ...textareaProps, onChange: (e) => {
+                        textareaProps?.onChange?.(e);
+                        setValue(e.target.value);
+                    } }), hasCharacterLimit && (jsx(CharacterCounter, { size: size, value: value ? value.toString() : '', id: characterLimitId, ...characterLimit })), jsx("div", { className: classes.errorMessage, id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsx(ErrorMessage, { size: size, children: props.error }) })] }) }));
+});
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/dist/esm/components/form/Textarea/Textarea.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"formField":"fds-textarea-formField-16c1b1dc","padlock":"fds-textarea-padlock-16c1b1dc","errorMessage":"fds-textarea-errorMessage-16c1b1dc","label":"fds-textarea-label-16c1b1dc","description":"fds-textarea-description-16c1b1dc","textarea":"fds-textarea-textarea-16c1b1dc","small":"fds-textarea-small-16c1b1dc","medium":"fds-textarea-medium-16c1b1dc","large":"fds-textarea-large-16c1b1dc","disabled":"fds-textarea-disabled-16c1b1dc","readonly":"fds-textarea-readonly-16c1b1dc","error":"fds-textarea-error-16c1b1dc"};
+
+export { classes as default };

package/dist/esm/components/form/Textarea/useTextarea.js

@@ -0,0 +1,35 @@
+'use client';
+import { useContext } from 'react';
+import { useFormField } from '../useFormField.js';
+import { FieldsetContext } from '../Fieldset/Fieldset.js';
+
+/** Handles props for `Textarea` in context with `Fieldset` */
+const useTextarea = (props) => {
+    const fieldset = useContext(FieldsetContext);
+    const { inputProps, readOnly, ...rest } = useFormField(props, 'textarea');
+    return {
+        ...rest,
+        readOnly,
+        size: fieldset?.size ?? props.size,
+        textareaProps: {
+            ...inputProps,
+            readOnly,
+            onClick: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onClick?.(e);
+            },
+            onChange: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onChange?.(e);
+            },
+        },
+    };
+};
+
+export { useTextarea };

package/dist/esm/components/form/Textfield/Textfield.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, useId } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
+import { CharacterCounter } from '../CharacterCounter.js';
+import { useTextfield } from './useTextfield.js';
+import textFieldClasses from './Textfield.module.css.js';
+import utilityClasses from '../../../utilities/utility.module.css.js';
+import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+import { Label } from '../../Typography/Label/Label.js';
+import { omit } from '../../../utilities/objectUtils.js';
+import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
+
+/** Text input field
+ *
+ * @example
+ * ```tsx
+ * <Textfield label="Textfield label">
+ * ```
+ */
+const Textfield = forwardRef((props, ref) => {
+    const { label, description, suffix, prefix, style, characterLimit, hideLabel, type = 'text', htmlSize = 20, className, ...rest } = props;
+    const { inputProps, descriptionId, hasError, errorId, size = 'medium', readOnly, } = useTextfield(props);
+    const [inputValue, setInputValue] = useState(props.defaultValue);
+    const characterLimitId = `textfield-charactercount-${useId()}`;
+    const hasCharacterLimit = characterLimit != null;
+    const describedBy = clsx(inputProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { style: style, className: clsx(textFieldClasses.formField, textFieldClasses[size], inputProps.disabled && textFieldClasses.disabled, readOnly && textFieldClasses.readonly, className), children: [label && (jsxs(Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: clsx(textFieldClasses.label, hideLabel && utilityClasses.visuallyHidden), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: textFieldClasses.padlock })), jsx("span", { children: label })] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: clsx(textFieldClasses.description, hideLabel && utilityClasses.visuallyHidden), children: description }) })), jsxs("div", { className: clsx(textFieldClasses.field, hasError && textFieldClasses.error), children: [prefix && (jsx(Paragraph, { asChild: true, size: size, short: true, children: jsx("div", { className: clsx(textFieldClasses.adornment, textFieldClasses.prefix), "aria-hidden": 'true', children: prefix }) })), jsx("input", { className: clsx(textFieldClasses.input, textFieldClasses[size], utilityClasses.focusable, prefix && textFieldClasses.inputPrefix, suffix && textFieldClasses.inputSuffix), ref: ref, type: type, "aria-describedby": describedBy, size: htmlSize, ...omit(['size', 'error', 'errorId'], rest), ...inputProps, onChange: (e) => {
+                                inputProps?.onChange?.(e);
+                                setInputValue(e.target.value);
+                            } }), suffix && (jsx(Paragraph, { asChild: true, size: size, short: true, children: jsx("div", { className: clsx(textFieldClasses.adornment, textFieldClasses.suffix), "aria-hidden": 'true', children: suffix }) }))] }), hasCharacterLimit && (jsx(CharacterCounter, { size: size, value: inputValue ? inputValue.toString() : '', id: characterLimitId, ...characterLimit })), jsx("div", { className: textFieldClasses.errorMessage, id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsx(ErrorMessage, { size: size, children: props.error }) })] }) }));
+});
+Textfield.displayName = 'Textfield';
+
+export { Textfield };

package/dist/esm/components/form/Textfield/Textfield.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var textFieldClasses = {"formField":"fds-textfield-formField-147467c0","adornment":"fds-textfield-adornment-147467c0","input":"fds-textfield-input-147467c0","disabled":"fds-textfield-disabled-147467c0","readonly":"fds-textfield-readonly-147467c0","field":"fds-textfield-field-147467c0","small":"fds-textfield-small-147467c0","medium":"fds-textfield-medium-147467c0","large":"fds-textfield-large-147467c0","label":"fds-textfield-label-147467c0","description":"fds-textfield-description-147467c0","error":"fds-textfield-error-147467c0","inputPrefix":"fds-textfield-inputPrefix-147467c0","inputSuffix":"fds-textfield-inputSuffix-147467c0","prefix":"fds-textfield-prefix-147467c0","suffix":"fds-textfield-suffix-147467c0","padlock":"fds-textfield-padlock-147467c0","errorMessage":"fds-textfield-errorMessage-147467c0"};
+
+export { textFieldClasses as default };

package/dist/esm/components/form/Textfield/useTextfield.js

@@ -0,0 +1,35 @@
+'use client';
+import { useContext } from 'react';
+import { useFormField } from '../useFormField.js';
+import { FieldsetContext } from '../Fieldset/Fieldset.js';
+
+/** Handles props for `Textfield` in context with `Fieldset` */
+const useTextfield = (props) => {
+    const fieldset = useContext(FieldsetContext);
+    const { inputProps, readOnly, ...rest } = useFormField(props, 'textfield');
+    return {
+        ...rest,
+        readOnly,
+        size: fieldset?.size ?? props.size,
+        inputProps: {
+            ...inputProps,
+            readOnly,
+            onClick: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onClick?.(e);
+            },
+            onChange: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onChange?.(e);
+            },
+        },
+    };
+};
+
+export { useTextfield };

package/dist/esm/components/form/useFormField.js

@@ -0,0 +1,37 @@
+'use client';
+import { useContext, useId } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { FieldsetContext } from './Fieldset/Fieldset.js';
+
+/**
+ * Handles props and their state for various form-fields in context with Fieldset
+ */
+const useFormField = (props, prefix) => {
+    const fieldset = useContext(FieldsetContext);
+    const randomId = useId();
+    const id = props.id ?? `${prefix}-${randomId}`;
+    const errorId = props.errorId ?? `${prefix}-error-${randomId}`;
+    const descriptionId = `${prefix}-description-${randomId}`;
+    const disabled = fieldset?.disabled || props?.disabled;
+    const readOnly = ((fieldset?.readOnly || props?.readOnly) && !disabled) || undefined;
+    const hasError = !disabled && !readOnly && !!(props.error || fieldset?.error);
+    return {
+        readOnly,
+        hasError,
+        errorId,
+        descriptionId,
+        size: props?.size ?? fieldset?.size ?? 'medium',
+        inputProps: {
+            id,
+            disabled,
+            'aria-invalid': hasError ? true : undefined,
+            'aria-describedby': clsx(props['aria-describedby'], {
+                [descriptionId]: !!props?.description && typeof props?.description === 'string',
+                [errorId]: hasError && !fieldset?.error,
+                [fieldset?.errorId ?? '']: hasError && !!fieldset?.error,
+            }) || undefined,
+        },
+    };
+};
+
+export { useFormField };

package/dist/esm/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,6 @@
+'use client';
+import { useLayoutEffect, useEffect } from 'react';
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export { useIsomorphicLayoutEffect };

package/dist/esm/hooks/useMediaQuery.js

@@ -0,0 +1,19 @@
+'use client';
+import { useState, useEffect } from 'react';
+
+function useMediaQuery(query) {
+    const getMatches = (query) => window?.matchMedia(query).matches ?? false;
+    const [matches, setMatches] = useState(getMatches(query));
+    const eventListener = () => {
+        setMatches(getMatches(query));
+    };
+    useEffect(() => {
+        const matchMedia = window.matchMedia(query);
+        eventListener();
+        matchMedia.addEventListener('change', eventListener);
+        return () => matchMedia.removeEventListener('change', eventListener);
+    }, [query]); // eslint-disable-line react-hooks/exhaustive-deps
+    return matches;
+}
+
+export { useMediaQuery };

package/dist/esm/hooks/usePrevious.js

@@ -0,0 +1,12 @@
+'use client';
+import { useRef, useEffect } from 'react';
+
+function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+
+export { usePrevious };

package/dist/esm/hooks/useSynchronizedAnimation.js

@@ -0,0 +1,31 @@
+'use client';
+import { useRef } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+
+const stashedTime = {};
+function useSynchronizedAnimation(animationName) {
+    const ref = useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        const animations = document
+            .getAnimations()
+            .filter((animation) => 'animationName' in animation &&
+            animation.animationName === animationName);
+        const myAnimation = animations.find((animation) => animation.effect?.target === ref.current);
+        if (myAnimation &&
+            myAnimation === animations[0] &&
+            stashedTime[animationName]) {
+            myAnimation.currentTime = stashedTime[animationName];
+        }
+        if (myAnimation && myAnimation !== animations[0]) {
+            myAnimation.currentTime = animations[0].currentTime;
+        }
+        return () => {
+            if (myAnimation && myAnimation === animations[0]) {
+                stashedTime[animationName] = myAnimation.currentTime;
+            }
+        };
+    }, [animationName]);
+    return ref;
+}
+
+export { useSynchronizedAnimation };

package/dist/esm/index.js

@@ -0,0 +1,90 @@
+'use client';
+export { default as ErrorSummaryList } from './components/ErrorSummary/ErrorSummaryList.js';
+export { Button } from './components/Button/Button.js';
+export { HelpText } from './components/HelpText/HelpText.js';
+export { Spinner } from './components/Spinner/Spinner.js';
+export { Link } from './components/Link/Link.js';
+export { List } from './components/List/index.js';
+export { ListRoot } from './components/List/ListRoot.js';
+export { ListItem } from './components/List/ListItem.js';
+export { ListHeading } from './components/List/ListHeading.js';
+export { Ordered as ListOrdered, Unordered as ListUnordered } from './components/List/Lists.js';
+export { Paragraph } from './components/Typography/Paragraph/Paragraph.js';
+export { Heading } from './components/Typography/Heading/Heading.js';
+export { Ingress } from './components/Typography/Ingress/Ingress.js';
+export { Label } from './components/Typography/Label/Label.js';
+export { ErrorMessage } from './components/Typography/ErrorMessage/ErrorMessage.js';
+export { Accordion } from './components/Accordion/index.js';
+export { AccordionItem } from './components/Accordion/AccordionItem/AccordionItem.js';
+export { AccordionContent } from './components/Accordion/AccordionContent/AccordionContent.js';
+export { AccordionHeader } from './components/Accordion/AccordionHeader/AccordionHeader.js';
+export { NativeSelect } from './components/form/NativeSelect/NativeSelect.js';
+export { Alert } from './components/Alert/Alert.js';
+export { Tag } from './components/Tag/Tag.js';
+export { Chip } from './components/Chip/index.js';
+export { Group as ChipGroup } from './components/Chip/Group/Group.js';
+export { RemovableChip as ChipRemovable } from './components/Chip/Removable/Removable.js';
+export { ToggleChip as ChipToggle } from './components/Chip/Toggle/Toggle.js';
+export { usePagination } from './components/Pagination/usePagination.js';
+export { Pagination } from './components/Pagination/index.js';
+export { default as PaginationRoot } from './components/Pagination/PaginationRoot.js';
+export { PaginationContent } from './components/Pagination/PaginationContent.js';
+export { default as PaginationItem } from './components/Pagination/PaginationItem.js';
+export { PaginationButton } from './components/Pagination/PaginationButton.js';
+export { default as PaginationEllipsis } from './components/Pagination/PaginationEllipsis.js';
+export { PaginationNext, PaginationPrevious } from './components/Pagination/PaginationNextPrev.js';
+export { SkipLink } from './components/SkipLink/SkipLink.js';
+export { Tooltip } from './components/Tooltip/Tooltip.js';
+export { Checkbox } from './components/form/Checkbox/index.js';
+export { CheckboxGroup } from './components/form/Checkbox/Group/Group.js';
+export { Radio } from './components/form/Radio/index.js';
+export { RadioGroup } from './components/form/Radio/Group/Group.js';
+export { Fieldset, FieldsetContext } from './components/form/Fieldset/Fieldset.js';
+export { Switch } from './components/form/Switch/Switch.js';
+export { Textfield } from './components/form/Textfield/Textfield.js';
+export { Textarea } from './components/form/Textarea/Textarea.js';
+export { Tabs } from './components/Tabs/index.js';
+export { Tab } from './components/Tabs/Tab/Tab.js';
+export { TabList } from './components/Tabs/TabList/TabList.js';
+export { TabContent } from './components/Tabs/TabContent/TabContent.js';
+export { ToggleGroup } from './components/ToggleGroup/index.js';
+export { ToggleGroupItem } from './components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.js';
+export { Popover } from './components/Popover/index.js';
+export { PopoverContent } from './components/Popover/PopoverContent.js';
+export { PopoverTrigger } from './components/Popover/PopoverTrigger.js';
+export { Divider } from './components/Divider/Divider.js';
+export { Modal } from './components/Modal/index.js';
+export { ModalContent } from './components/Modal/ModalContent/ModaContent.js';
+export { ModalFooter } from './components/Modal/ModalFooter/ModalFooter.js';
+export { ModalHeader } from './components/Modal/ModalHeader/ModalHeader.js';
+export { ModalTrigger } from './components/Modal/ModalTrigger/ModalTrigger.js';
+export { ModalDialog } from './components/Modal/ModalDialog.js';
+export { DropdownMenu } from './components/DropdownMenu/index.js';
+export { DropdownMenuContent } from './components/DropdownMenu/DropdownMenuContent.js';
+export { DropdownMenuGroup } from './components/DropdownMenu/DropdownMenuGroup/DropdownMenuGroup.js';
+export { DropdownMenuItem } from './components/DropdownMenu/DropdownMenuItem/DropdownMenuItem.js';
+export { DropdownMenuTrigger } from './components/DropdownMenu/DropdownMenuTrigger.js';
+export { Search } from './components/form/Search/Search.js';
+export { Skeleton } from './components/Skeleton/index.js';
+export { Circle as SkeletonCircle } from './components/Skeleton/Circle/Circle.js';
+export { Rectangle as SkeletonRectangle } from './components/Skeleton/Rectangle/Rectangle.js';
+export { Text as SkeletonText } from './components/Skeleton/Text/Text.js';
+export { Box } from './components/Box/Box.js';
+export { Card } from './components/Card/index.js';
+export { CardHeader } from './components/Card/CardHeader.js';
+export { CardContent } from './components/Card/CardContent.js';
+export { CardFooter } from './components/Card/CardFooter.js';
+export { CardMedia } from './components/Card/CardMedia.js';
+export { Combobox } from './components/form/Combobox/index.js';
+export { ComboboxOption } from './components/form/Combobox/Option/Option.js';
+export { ComboboxEmpty } from './components/form/Combobox/Empty/Empty.js';
+export { Table } from './components/Table/index.js';
+export { TableHead } from './components/Table/TableHead.js';
+export { TableBody } from './components/Table/TableBody.js';
+export { TableRow } from './components/Table/TableRow.js';
+export { TableCell } from './components/Table/TableCell.js';
+export { TableHeaderCell } from './components/Table/TableHeaderCell.js';
+export { ErrorSummary } from './components/ErrorSummary/index.js';
+export { ErrorSummaryRoot } from './components/ErrorSummary/ErrorSummaryRoot.js';
+export { ErrorSummaryItem } from './components/ErrorSummary/ErrorSummaryItem.js';
+export { ErrorSummaryHeading } from './components/ErrorSummary/ErrorSummaryHeading.js';

package/dist/esm/node_modules/@babel/runtime/helpers/esm/extends.js

@@ -0,0 +1,17 @@
+'use client';
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+export { _extends as default };