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

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

@@ -1,68 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('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]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-const PopoverRoot = ({ 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: () => { },
-});
-PopoverRoot.displayName = 'PopoverRoot';
-
-exports.PopoverContext = PopoverContext;
-exports.PopoverRoot = PopoverRoot;

package/dist/cjs/components/Spinner/Spinner.js

@@ -1,24 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var useSynchronizedAnimation = require('../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
-
-const sizeMap = {
-    '2xs': 13,
-    xs: 20,
-    sm: 27,
-    md: 40,
-    lg: 56,
-    xl: 79,
-};
-/**  Spinner component used for indicating busy or indeterminate loading */
-const Spinner = ({ title, color = 'neutral', size = 'md', className, style, ...rest }) => {
-    const svgRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-spinner-rotate-animation');
-    const strokeRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-spinner-stroke-animation');
-    return (jsxRuntime.jsxs("svg", { className: lite.clsx('ds-spinner', `ds-spinner--${color}`, className), style: { width: sizeMap[size], height: sizeMap[size], ...style }, viewBox: '0 0 50 50', ref: svgRef, ...rest, children: [jsxRuntime.jsx("title", { children: title }), jsxRuntime.jsx("circle", { className: lite.clsx('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsxRuntime.jsx("circle", { className: lite.clsx(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
-};
-Spinner.displayName = 'Spinner';
-
-exports.Spinner = Spinner;

package/dist/cjs/components/form/NativeSelect/NativeSelect.js

@@ -1,21 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var React = require('react');
-var useNativeSelect = require('./useNativeSelect.js');
-var Label = require('../../Typography/Label/Label.js');
-var omit = require('../../../utilities/omit/omit.js');
-var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-
-const NativeSelect = React.forwardRef((props, ref) => {
-    const { children, disabled = false, label, description, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
-    const { selectProps, descriptionId, errorId, readOnly, size = 'md', } = useNativeSelect.useNativeSelect(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: lite.clsx('ds-native-select--container', readOnly && 'ds-native-select--readonly', error && 'ds-native-select--error'), children: [label && (jsxRuntime.jsxs(Label.Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: lite.clsx('ds-native-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-native-select__readonly__icon' })), label] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: lite.clsx(`ds-native-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsx("div", { className: 'ds-native-select__wrapper', children: jsxRuntime.jsx("select", { disabled: disabled, ref: ref, size: htmlSize, className: lite.clsx('ds-native-select', `ds-native-select--${size}`, `ds-focus`, props.multiple && 'ds-native-select--multiple', className), ...omit.omit(['size', 'error', 'errorId'], rest), ...omit.omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsxRuntime.jsx("div", { id: errorId, className: 'ds-native-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) }))] }) }));
-});
-NativeSelect.displayName = 'NativeSelect';
-
-exports.NativeSelect = NativeSelect;

package/dist/cjs/components/form/NativeSelect/useNativeSelect.js

@@ -1,55 +0,0 @@
-'use client';
-'use strict';
-
-var React = require('react');
-var FieldsetContext = require('../Fieldset/FieldsetContext.js');
-var useFormField = require('../useFormField.js');
-
-/** Handles props for `NativeSelect` in context with `Fieldset` */
-const useNativeSelect = (props) => {
-    const fieldset = React.useContext(FieldsetContext.FieldsetContext);
-    const { inputProps: selectProps, readOnly = false, size = fieldset?.size ?? 'md', ...rest } = useFormField.useFormField(props, 'select');
-    return {
-        ...rest,
-        readOnly,
-        size,
-        selectProps: {
-            ...selectProps,
-            readOnly,
-            onClick: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onClick?.(e);
-            },
-            onKeyDown: (e) => {
-                if (readOnly) {
-                    if (e.key === 'Tab')
-                        return;
-                    e.preventDefault();
-                    return;
-                }
-                props?.onKeyDown?.(e);
-            },
-            onMouseDown: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    if (e.target instanceof HTMLElement)
-                        e.target.focus();
-                    return;
-                }
-                props?.onMouseDown?.(e);
-            },
-            onChange: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onChange?.(e);
-            },
-        },
-    };
-};
-
-exports.useNativeSelect = useNativeSelect;

package/dist/cjs/utilities/AnimateHeight/AnimateHeight.js

@@ -1,46 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var React = require('react');
-var usePrevious = require('../hooks/usePrevious.js');
-var useMediaQuery = require('../hooks/useMediaQuery/useMediaQuery.js');
-
-const transitionDurationInMilliseconds = 250;
-/**
- * AnimateHeight is a component that animates its height when the `open` prop changes.
- */
-const AnimateHeight = ({ children, className, open = false, style, ...rest }) => {
-    /* We don't know the initial height we want to start with.
-    It depends on if it should start open or not, therefore we set height to `undefined`,
-    so we don't get any layoutshift on first render */
-    const [height, setHeight] = React.useState(undefined);
-    const prevOpen = usePrevious.usePrevious(open);
-    const openOrClosed = open ? 'open' : 'closed';
-    const [state, setState] = React.useState(openOrClosed);
-    const timeoutRef = React.useRef(null);
-    const shouldAnimate = !useMediaQuery.useMediaQuery('(prefers-reduced-motion)');
-    const contentRef = React.useCallback((node) => {
-        if (node) {
-            const resizeObserver = new ResizeObserver(() => {
-                setHeight(open ? node.getBoundingClientRect().height : 0);
-            });
-            resizeObserver.observe(node);
-        }
-        if (prevOpen !== undefined && prevOpen !== open) {
-            // Opening or closing
-            setState(shouldAnimate ? 'openingOrClosing' : openOrClosed);
-            timeoutRef.current && clearTimeout(timeoutRef.current); // Reset timeout if already active (i.e. if the user closes the component before it finishes opening)
-            timeoutRef.current = setTimeout(() => {
-                setState(openOrClosed);
-            }, transitionDurationInMilliseconds);
-        }
-    }, [open, openOrClosed, prevOpen, shouldAnimate]);
-    const transition = state === 'openingOrClosing'
-        ? `height ${transitionDurationInMilliseconds}ms ease-in-out`
-        : undefined;
-    return (jsxRuntime.jsx("div", { ...rest, className: lite.clsx('ds-animate-height', `ds-animate-height--${state}`, className), style: { height, transition, ...style }, children: jsxRuntime.jsx("div", { ref: contentRef, className: 'ds-animate-height__content', children: children }) }));
-};
-
-exports.AnimateHeight = AnimateHeight;

package/dist/cjs/utilities/hooks/useMediaQuery/useMediaQuery.js

@@ -1,49 +0,0 @@
-'use client';
-'use strict';
-
-var React = require('react');
-var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
-
-// from https://usehooks-ts.com/react-hook/use-media-query
-const IS_SERVER = typeof window === 'undefined';
-function useMediaQuery(query, { defaultValue = false, initializeWithValue = true, } = {}) {
-    const getMatches = (query) => {
-        if (IS_SERVER) {
-            return defaultValue;
-        }
-        return window.matchMedia(query).matches;
-    };
-    const [matches, setMatches] = React.useState(() => {
-        if (initializeWithValue) {
-            return getMatches(query);
-        }
-        return defaultValue;
-    });
-    // Handles the change event of the media query.
-    function handleChange() {
-        setMatches(getMatches(query));
-    }
-    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-        const matchMedia = window.matchMedia(query);
-        // Triggered at the first client-side load and if query changes
-        handleChange();
-        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
-        if (matchMedia.addListener) {
-            matchMedia.addListener(handleChange);
-        }
-        else {
-            matchMedia.addEventListener('change', handleChange);
-        }
-        return () => {
-            if (matchMedia.removeListener) {
-                matchMedia.removeListener(handleChange);
-            }
-            else {
-                matchMedia.removeEventListener('change', handleChange);
-            }
-        };
-    }, [query]);
-    return matches;
-}
-
-exports.useMediaQuery = useMediaQuery;

package/dist/cjs/utilities/hooks/usePrevious.js

@@ -1,14 +0,0 @@
-'use client';
-'use strict';
-
-var React = require('react');
-
-function usePrevious(value) {
-    const ref = React.useRef();
-    React.useEffect(() => {
-        ref.current = value;
-    }, [value]);
-    return ref.current;
-}
-
-exports.usePrevious = usePrevious;

package/dist/esm/components/Accordion/AccordionRoot.js

@@ -1,14 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { forwardRef } from 'react';
-
-/**
- * Accordion root component, contains `Accordion.Item` components.
- */
-const AccordionRoot = forwardRef(({ border = false, color = 'neutral', className, ...rest }, ref) => {
-    return (jsx("div", { className: clsx('ds-accordion', border && 'ds-accordion--border', color && `ds-accordion--${color}`, className), ref: ref, ...rest }));
-});
-AccordionRoot.displayName = 'AccordionRoot';
-
-export { AccordionRoot };

package/dist/esm/components/Box/Box.js

@@ -1,13 +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';
-
-const Box = forwardRef(({ shadow, borderColor, borderRadius, background = 'default', children, asChild = false, className, ...rest }, ref) => {
-    const Component = asChild ? Slot : 'div';
-    return (jsx(Component, { ref: ref, className: clsx(shadow && `ds-box--${shadow}-shadow`, borderColor && `ds-box--${borderColor}-border-color`, borderRadius && `ds-box--${borderRadius}-border-radius`, `ds-box--${background}-background`, className), ...rest, children: children }));
-});
-Box.displayName = 'Box';
-
-export { Box };

package/dist/esm/components/List/ListHeading.js

@@ -1,26 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useId, useMemo, useEffect } from 'react';
-import { ListContext } from './ListRoot.js';
-import { Heading } from '../Typography/Heading/Heading.js';
-
-const HEADING_SIZE_MAP = {
-    sm: '2xs',
-    md: 'xs',
-    lg: 'sm',
-};
-const ListHeading = forwardRef(({ level = 2, id, ...rest }, ref) => {
-    const { size, headingId, setHeadingId } = useContext(ListContext);
-    const randomId = useId();
-    const headingId_ = id ?? randomId;
-    const headingSize = useMemo(() => HEADING_SIZE_MAP[size], [size]);
-    useEffect(() => {
-        if (headingId !== headingId_) {
-            setHeadingId(headingId_);
-        }
-    }, [headingId, id, setHeadingId, headingId_]);
-    return (jsx(Heading, { ref: ref, size: headingSize, id: headingId, level: level, spacing: true, ...rest }));
-});
-ListHeading.displayName = 'ListHeading';
-
-export { ListHeading };

package/dist/esm/components/List/ListRoot.js

@@ -1,18 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { createContext, forwardRef, useState } from 'react';
-
-const ListContext = createContext({
-    size: 'md',
-    headingId: 'heading',
-    setHeadingId: () => { },
-});
-const ListRoot = forwardRef(({ size = 'md', asChild, ...rest }, ref) => {
-    const [headingId, setHeadingId] = useState();
-    const Component = asChild ? Slot : 'div';
-    return (jsx(ListContext.Provider, { value: { size, headingId, setHeadingId }, children: jsx(Component, { ref: ref, ...rest }) }));
-});
-ListRoot.displayName = 'ListRoot';
-
-export { ListContext, ListRoot };

package/dist/esm/components/Popover/PopoverContent.js

@@ -1,85 +0,0 @@
-'use client';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useFloating, useInteractions, useFocus, useClick, useDismiss, useRole, useMergeRefs, FloatingPortal } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import * as React from 'react';
-import { forwardRef, useContext, useRef, useEffect, useMemo } from 'react';
-import { PopoverContext } from './PopoverRoot.js';
-import { autoUpdate } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
-import { offset, flip, shift, arrow } from '../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
-import { useIsomorphicLayoutEffect } from '../../utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
-
-const ARROW_HEIGHT = 7;
-const ARROW_GAP = 4;
-const ARROW_PLACEMENT = {
-    top: 'bottom',
-    right: 'left',
-    bottom: 'top',
-    left: 'right',
-};
-const PopoverContent = forwardRef(({ className, children, style, id, ...rest }, ref) => {
-    const { portal, internalOpen, size, isControlled, variant, placement, setInternalOpen, onClose, onOpenChange, anchorEl, popoverId, setPopoverId, triggerId, } = useContext(PopoverContext);
-    const Container = portal ? FloatingPortal : React.Fragment;
-    const floatingEl = useRef(null);
-    const arrowRef = useRef(null);
-    useEffect(() => {
-        id && setPopoverId?.(id);
-    }, [id, setPopoverId]);
-    const { context, update, refs, floatingStyles, placement: flPlacement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, }, } = useFloating({
-        placement,
-        open: internalOpen,
-        onOpenChange: (localOpen) => {
-            onOpenChange?.(localOpen);
-            if (!localOpen)
-                onClose?.();
-            if (!isControlled)
-                setInternalOpen(localOpen);
-        },
-        whileElementsMounted: autoUpdate,
-        elements: {
-            reference: anchorEl ?? undefined,
-            floating: floatingEl.current,
-        },
-        middleware: [
-            offset(ARROW_HEIGHT + ARROW_GAP),
-            flip({
-                fallbackAxisSideDirection: 'start',
-            }),
-            shift(),
-            arrow({
-                element: arrowRef,
-            }),
-        ],
-    });
-    const { getFloatingProps } = useInteractions([
-        useFocus(context),
-        useClick(context),
-        useDismiss(context),
-        useRole(context),
-    ]);
-    const floatingRef = useMergeRefs([refs.setFloating, ref]);
-    useIsomorphicLayoutEffect(() => {
-        refs.setReference(anchorEl);
-        if (!refs.reference.current || !refs.floating.current || !internalOpen)
-            return;
-        const cleanup = autoUpdate(refs.reference.current, refs.floating.current, update);
-        return () => cleanup();
-    }, [refs.floating, refs.reference, update, anchorEl, refs, internalOpen]);
-    const arrowPlacement = useMemo(() => {
-        return ARROW_PLACEMENT[flPlacement.split('-')[0]];
-    }, [flPlacement]);
-    return (jsx(Fragment, { children: internalOpen && (jsx(Container, { children: jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { ref: floatingEl, className: clsx('ds-popover', `ds-popover--${variant}`, `ds-popover--${size}`, className), "data-placement": flPlacement, ...getFloatingProps({
-                        ref: floatingRef,
-                        tabIndex: undefined,
-                    }), style: { ...floatingStyles, ...style }, id: popoverId, "aria-labelledby": triggerId, ...rest, children: [children, jsx("div", { ref: arrowRef, className: clsx('ds-popover__arrow', `ds-popover__arrow--${arrowPlacement}`), style: {
-                                height: ARROW_HEIGHT,
-                                width: ARROW_HEIGHT,
-                                ...(arrowX != null ? { left: arrowX } : {}),
-                                ...(arrowY != null ? { top: arrowY } : {}),
-                                ...(arrowPlacement ? { [arrowPlacement]: -4.5 } : {}),
-                            } })] }) }) })) }));
-});
-PopoverContent.displayName = 'Popover.Content';
-
-export { PopoverContent };

package/dist/esm/components/Popover/PopoverRoot.js

@@ -1,47 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { useRef, useState, useId } from 'react';
-
-const PopoverRoot = ({ children, placement = 'top', open, variant = 'default', portal, size = 'md', onOpenChange, onClose, }) => {
-    const triggerRef = useRef(null);
-    const [internalOpen, setInternalOpen] = useState(open ?? false);
-    const randomPopoverId = useId();
-    const [popoverId, setPopoverId] = useState(randomPopoverId);
-    const randomTriggerId = useId();
-    const [triggerId, setTriggerId] = useState(randomTriggerId);
-    const isControlled = typeof open === 'boolean';
-    React.useEffect(() => {
-        setInternalOpen(open ?? false);
-    }, [open]);
-    const anchorEl = triggerRef.current;
-    return (jsx(PopoverContext.Provider, { value: {
-            triggerRef,
-            anchorEl,
-            portal,
-            internalOpen,
-            isControlled,
-            setInternalOpen,
-            size,
-            variant,
-            placement,
-            onOpenChange,
-            onClose,
-            popoverId,
-            setPopoverId,
-            triggerId,
-            setTriggerId,
-        }, children: children }));
-};
-const PopoverContext = React.createContext({
-    size: 'sm',
-    variant: 'default',
-    anchorEl: null,
-    placement: 'top',
-    triggerRef: { current: null },
-    internalOpen: false,
-    setInternalOpen: () => { },
-});
-PopoverRoot.displayName = 'PopoverRoot';
-
-export { PopoverContext, PopoverRoot };

package/dist/esm/components/Spinner/Spinner.js

@@ -1,22 +0,0 @@
-'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { useSynchronizedAnimation } from '../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
-
-const sizeMap = {
-    '2xs': 13,
-    xs: 20,
-    sm: 27,
-    md: 40,
-    lg: 56,
-    xl: 79,
-};
-/**  Spinner component used for indicating busy or indeterminate loading */
-const Spinner = ({ title, color = 'neutral', size = 'md', className, style, ...rest }) => {
-    const svgRef = useSynchronizedAnimation('ds-spinner-rotate-animation');
-    const strokeRef = useSynchronizedAnimation('ds-spinner-stroke-animation');
-    return (jsxs("svg", { className: clsx('ds-spinner', `ds-spinner--${color}`, className), style: { width: sizeMap[size], height: sizeMap[size], ...style }, viewBox: '0 0 50 50', ref: svgRef, ...rest, children: [jsx("title", { children: title }), jsx("circle", { className: clsx('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsx("circle", { className: clsx(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
-};
-Spinner.displayName = 'Spinner';
-
-export { Spinner };

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

@@ -1,19 +0,0 @@
-'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
-import { forwardRef } from 'react';
-import { useNativeSelect } from './useNativeSelect.js';
-import { Label } from '../../Typography/Label/Label.js';
-import { omit } from '../../../utilities/omit/omit.js';
-import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
-import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
-
-const NativeSelect = forwardRef((props, ref) => {
-    const { children, disabled = false, label, description, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
-    const { selectProps, descriptionId, errorId, readOnly, size = 'md', } = useNativeSelect(props);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('ds-native-select--container', readOnly && 'ds-native-select--readonly', error && 'ds-native-select--error'), children: [label && (jsxs(Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: clsx('ds-native-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-native-select__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: clsx(`ds-native-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsx("div", { className: 'ds-native-select__wrapper', children: jsx("select", { disabled: disabled, ref: ref, size: htmlSize, className: clsx('ds-native-select', `ds-native-select--${size}`, `ds-focus`, props.multiple && 'ds-native-select--multiple', className), ...omit(['size', 'error', 'errorId'], rest), ...omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsx("div", { id: errorId, className: 'ds-native-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsx(ErrorMessage, { size: size, children: error }) }))] }) }));
-});
-NativeSelect.displayName = 'NativeSelect';
-
-export { NativeSelect };

package/dist/esm/components/form/NativeSelect/useNativeSelect.js

@@ -1,53 +0,0 @@
-'use client';
-import { useContext } from 'react';
-import { FieldsetContext } from '../Fieldset/FieldsetContext.js';
-import { useFormField } from '../useFormField.js';
-
-/** Handles props for `NativeSelect` in context with `Fieldset` */
-const useNativeSelect = (props) => {
-    const fieldset = useContext(FieldsetContext);
-    const { inputProps: selectProps, readOnly = false, size = fieldset?.size ?? 'md', ...rest } = useFormField(props, 'select');
-    return {
-        ...rest,
-        readOnly,
-        size,
-        selectProps: {
-            ...selectProps,
-            readOnly,
-            onClick: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onClick?.(e);
-            },
-            onKeyDown: (e) => {
-                if (readOnly) {
-                    if (e.key === 'Tab')
-                        return;
-                    e.preventDefault();
-                    return;
-                }
-                props?.onKeyDown?.(e);
-            },
-            onMouseDown: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    if (e.target instanceof HTMLElement)
-                        e.target.focus();
-                    return;
-                }
-                props?.onMouseDown?.(e);
-            },
-            onChange: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onChange?.(e);
-            },
-        },
-    };
-};
-
-export { useNativeSelect };

package/dist/esm/utilities/AnimateHeight/AnimateHeight.js

@@ -1,44 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { useState, useRef, useCallback } from 'react';
-import { usePrevious } from '../hooks/usePrevious.js';
-import { useMediaQuery } from '../hooks/useMediaQuery/useMediaQuery.js';
-
-const transitionDurationInMilliseconds = 250;
-/**
- * AnimateHeight is a component that animates its height when the `open` prop changes.
- */
-const AnimateHeight = ({ children, className, open = false, style, ...rest }) => {
-    /* We don't know the initial height we want to start with.
-    It depends on if it should start open or not, therefore we set height to `undefined`,
-    so we don't get any layoutshift on first render */
-    const [height, setHeight] = useState(undefined);
-    const prevOpen = usePrevious(open);
-    const openOrClosed = open ? 'open' : 'closed';
-    const [state, setState] = useState(openOrClosed);
-    const timeoutRef = useRef(null);
-    const shouldAnimate = !useMediaQuery('(prefers-reduced-motion)');
-    const contentRef = useCallback((node) => {
-        if (node) {
-            const resizeObserver = new ResizeObserver(() => {
-                setHeight(open ? node.getBoundingClientRect().height : 0);
-            });
-            resizeObserver.observe(node);
-        }
-        if (prevOpen !== undefined && prevOpen !== open) {
-            // Opening or closing
-            setState(shouldAnimate ? 'openingOrClosing' : openOrClosed);
-            timeoutRef.current && clearTimeout(timeoutRef.current); // Reset timeout if already active (i.e. if the user closes the component before it finishes opening)
-            timeoutRef.current = setTimeout(() => {
-                setState(openOrClosed);
-            }, transitionDurationInMilliseconds);
-        }
-    }, [open, openOrClosed, prevOpen, shouldAnimate]);
-    const transition = state === 'openingOrClosing'
-        ? `height ${transitionDurationInMilliseconds}ms ease-in-out`
-        : undefined;
-    return (jsx("div", { ...rest, className: clsx('ds-animate-height', `ds-animate-height--${state}`, className), style: { height, transition, ...style }, children: jsx("div", { ref: contentRef, className: 'ds-animate-height__content', children: children }) }));
-};
-
-export { AnimateHeight };