@digdir/designsystemet-react 1.0.0-rc.8 → 1.0.0

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

@@ -1,12 +1,18 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
-import { PaginationContext } from './PaginationRoot.js';
+import { forwardRef } from 'react';
 import { Button } from '../Button/Button.js';
 
-const PaginationButton = forwardRef(({ isActive, ...rest }, ref) => {
-    const { size } = useContext(PaginationContext);
-    return (jsx(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 = forwardRef(function PaginationButton(rest, ref) {
+    return jsx(Button, { ref: ref, ...rest });
 });
 
 export { PaginationButton };

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

@@ -1,15 +1,21 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { forwardRef, useContext } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { PaginationContext } from './PaginationRoot.js';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
 
-const PaginationItem = forwardRef(({ asChild, className, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'li';
-    const { size, compact } = useContext(PaginationContext);
-    return (jsx(Component, { ref: ref, className: 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 = forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'li';
+    return jsx(Component, { ref: ref, ...rest });
 });
-var PaginationItem$1 = PaginationItem;
 
-export { PaginationItem, PaginationItem$1 as default };
+export { PaginationItem };

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from '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 = forwardRef(function PaginationList({ asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'ul';
+    return jsx(Component, { ref: ref, ...rest });
+});
+
+export { PaginationList };

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

@@ -1,26 +1,34 @@
 'use client';
 import { Pagination as Pagination$1 } from './Pagination.js';
-import { PaginationContent } from './PaginationContent.js';
-import PaginationEllipsis from './PaginationEllipsis.js';
-import PaginationItem from './PaginationItem.js';
 import { PaginationButton } from './PaginationButton.js';
-import { PaginationPrevious, PaginationNext } from './PaginationNextPrev.js';
-import PaginationRoot from './PaginationRoot.js';
+import { PaginationItem } from './PaginationItem.js';
+import { PaginationList } from './PaginationList.js';
 
-const Pagination = Pagination$1;
-Pagination.Root = PaginationRoot;
-Pagination.Content = PaginationContent;
-Pagination.Item = PaginationItem;
-Pagination.Button = PaginationButton;
-Pagination.Ellipsis = PaginationEllipsis;
-Pagination.Previous = PaginationPrevious;
-Pagination.Next = 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, {
+    List: PaginationList,
+    Item: PaginationItem,
+    Button: 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';
 
-export { Pagination, PaginationButton, PaginationContent, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PaginationRoot };
+export { Pagination, PaginationButton, PaginationItem, PaginationList };

package/dist/esm/components/Paragraph/Paragraph.js

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

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

@@ -1,47 +1,133 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { useRef, useState, useId } from 'react';
+import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
+import { useMergeRefs } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useRef, useContext, useState, useEffect } from 'react';
+import { Context } from './PopoverTriggerContext.js';
 
-const Popover = ({ 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: () => { },
+/**
+ * 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 = forwardRef(function Popover({ id, className, onClose, onOpen, open, variant = 'default', placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
+    const Component = asChild ? Slot : 'div';
+    const popoverRef = useRef(null);
+    const mergedRefs = useMergeRefs([popoverRef, ref]);
+    const { popoverId, setPopoverId } = useContext(Context);
+    const [internalOpen, setInternalOpen] = useState(false);
+    const controlledOpen = open ?? internalOpen;
+    // NOTE: This code is purely to add React controlled component ability to Popover API
+    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?.();
+            }
+            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
+    useEffect(() => {
+        const popover = popoverRef.current;
+        const trigger = document.querySelector(`[popovertarget="${popover?.id}"]`);
+        if (popover && trigger && controlledOpen)
+            return autoUpdate(trigger, popover, () => {
+                computePosition(trigger, popover, {
+                    placement,
+                    strategy: 'fixed',
+                    middleware: [
+                        offset((data) => {
+                            // get pseudo element arrow size
+                            const styles = getComputedStyle(data.elements.floating, '::before');
+                            return parseFloat(styles.height);
+                        }),
+                        ...(autoPlacement
+                            ? [flip({ fallbackAxisSideDirection: 'start' }), shift()]
+                            : []),
+                        arrowPseudoElement,
+                    ],
+                }).then(({ x, y }) => {
+                    popover.style.translate = `${x}px ${y}px`;
+                });
+            });
+    }, [controlledOpen, placement, id, autoPlacement]);
+    // Update context with id
+    useEffect(() => {
+        if (id)
+            setPopoverId?.(id);
+    }, [id]);
+    return (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;
+    },
+};
 
-export { Popover, PopoverContext };
+export { Popover };

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

@@ -1,23 +1,43 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useEffect } from 'react';
-import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { PopoverContext } from './Popover.js';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef, useContext, version } from 'react';
 import { Button } from '../Button/Button.js';
+import { Context } from './PopoverTriggerContext.js';
 
-const PopoverTrigger = forwardRef(({ id, asChild, ...rest }, ref) => {
-    const { triggerRef, internalOpen, setInternalOpen, isControlled, popoverId, triggerId, setTriggerId, } = useContext(PopoverContext);
-    const mergedRefs = useMergeRefs([ref, triggerRef]);
-    useEffect(() => {
-        id && setTriggerId?.(id);
-    }, [id, setTriggerId]);
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : Button;
-    return (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 = forwardRef(function PopoverTrigger({ id, inline, asChild, ...rest }, ref) {
+    const { popoverId } = useContext(Context);
+    const Component = asChild ? Slot : inline ? 'button' : Button;
+    const popoverProps = Object.assign({
+        [version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: popoverId,
+        ...(inline
+            ? {
+                'data-popover': 'inline',
+            }
+            : {}),
+    }, rest);
+    return jsx(Component, { ref: ref, ...popoverProps });
 });
-PopoverTrigger.displayName = 'PopoverTrigger';
 
 export { PopoverTrigger };

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

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useId, useState, createContext } from '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 = useId();
+    const [popoverId, setPopoverId] = useState(randomPopoverId);
+    return (jsx(Context.Provider, { value: { popoverId, setPopoverId }, children: children }));
+};
+PopoverTriggerContext.displayName = 'PopoverTriggerContext';
+const Context = createContext({});
+
+export { Context, PopoverTriggerContext };

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

@@ -1,12 +1,24 @@
 'use client';
 import { Popover as Popover$1 } from './Popover.js';
-import { PopoverContent } from './PopoverContent.js';
 import { PopoverTrigger } from './PopoverTrigger.js';
+import { PopoverTriggerContext } from './PopoverTriggerContext.js';
 
-const Popover = Popover$1;
-Popover.Content = PopoverContent;
-Popover.Trigger = 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, {
+    TriggerContext: PopoverTriggerContext,
+    Trigger: PopoverTrigger,
+});
+Popover.TriggerContext.displayName = 'Popover.TriggerContext';
 Popover.Trigger.displayName = 'Popover.Trigger';
 
-export { Popover, PopoverContent, PopoverTrigger };
+export { Popover, PopoverTrigger, PopoverTriggerContext };

package/dist/esm/components/Radio/Radio.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Field } from '../Field/index.js';
+import { Input } from '../Input/Input.js';
+import { Label } from '../Label/Label.js';
+import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
+
+/**
+ * Radio used to select multiple options.
+ *
+ * @example
+ * <Radio label="I agree" value="agree" />
+ */
+const Radio = forwardRef(function Radio({ 'data-size': size, className, style, children, label, description, error, ...rest }, ref) {
+    return (jsxs(Field, { "data-size": size, className: className, style: style, children: [jsx(Input, { type: 'radio', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!error && jsx(ValidationMessage, { children: error })] }));
+});
+
+export { Radio };

package/dist/esm/components/Search/Search.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Search component, use to display different variations of a search input
+ *
+ * @example with button
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ *   <Search.Button />
+ * </Search>
+ *
+ * @example with icon
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ * </Search>
+ */
+const Search = forwardRef(function Search({ className, ...rest }, ref) {
+    return jsx("div", { ref: ref, className: cl('ds-search', className), ...rest });
+});
+
+export { Search };

package/dist/esm/components/Search/SearchButton.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../Button/Button.js';
+
+/**
+ * SearchButton component, used to display a search button within a Search component.
+ *
+ * @example
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Button>Søk</Search.Button>
+ * </Search>
+ */
+const SearchButton = forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {
+    return (jsx(Button, { ref: ref, type: 'submit', ...rest, children: children }));
+});
+
+export { SearchButton };

package/dist/esm/components/Search/SearchClear.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { setReactInputValue } from '../Combobox/utilities.js';
+import { Button } from '../Button/Button.js';
+
+/**
+ * SearchClear component, used to display a clear buttun when the search input is not empty.
+ *
+ * @example
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ * </Search>
+ */
+const SearchClear = forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
+    const handleClear = (e) => {
+        const target = e.target;
+        let input = null;
+        if (target instanceof HTMLElement)
+            input = target.closest('.ds-search')?.querySelector('input');
+        if (!input)
+            throw new Error('Input is missing');
+        /* narrow type to make TS happy */
+        if (!(input instanceof HTMLInputElement))
+            throw new Error('Input is not an input element');
+        e.preventDefault();
+        setReactInputValue(input, '');
+        input.focus();
+        onClick?.(e);
+    };
+    return (jsx(Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
+});
+
+export { SearchClear };

package/dist/esm/components/Search/SearchInput.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Input } from '../Input/Input.js';
+
+/**
+ * SearchInput component, used to display a search input within the Search component.
+ *
+ * @example
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ * </Search>
+ */
+const SearchInput = forwardRef(function SearchInput({ ...rest }, ref) {
+    return (jsx(Input, { ref: ref, type: 'search', 
+        /* We need an empty placeholder for the clear button to be able to show/hide */
+        placeholder: '', ...rest }));
+});
+
+export { SearchInput };

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

@@ -0,0 +1,32 @@
+'use client';
+import { Search as Search$1 } from './Search.js';
+import { SearchButton } from './SearchButton.js';
+import { SearchClear } from './SearchClear.js';
+import { SearchInput } from './SearchInput.js';
+
+/**
+ * Search component, use to display different variations of a search input
+ *
+ * @example with button
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ *   <Search.Button />
+ * </Search>
+ *
+ * @example with icon
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ * </Search>
+ */
+const Search = Object.assign(Search$1, {
+    Clear: SearchClear,
+    Button: SearchButton,
+    Input: SearchInput,
+});
+Search.Clear.displayName = 'Search.Clear';
+Search.Button.displayName = 'Search.Button';
+Search.Input.displayName = 'Search.Input';
+
+export { Search, SearchButton, SearchClear, SearchInput };

package/dist/esm/components/Select/Select.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Select component, used to display a native select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
+const Select = forwardRef(function Select({ className, onKeyDown, onMouseDown, width, ...rest }, ref) {
+    return (jsx("select", { className: cl('ds-input', className), "data-width": width, ref: ref, onKeyDown: (event) => {
+            if (event.key === 'Tab')
+                return;
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for select
+            onKeyDown?.(event);
+        }, onMouseDown: (event) => {
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for select
+            onMouseDown?.(event);
+        }, ...rest }));
+});
+
+export { Select };