@digdir/designsystemet-react 1.20.0 → 1.21.0

package/dist/cjs/components/list/list-item.js

@@ -1,19 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var react = require('react');
-
-/**
- * Component that provides a list item.
- *
- * @example
- * <List.Item>Item</List.Item>
- */
-const ListItem = react.forwardRef(function ListItem({ asChild, ...rest }, ref) {
-    const Component = asChild ? reactSlot.Slot : 'li';
-    return jsxRuntime.jsx(Component, { ...rest, ref: ref });
-});
-
-exports.ListItem = ListItem;

package/dist/cjs/components/list/lists.js

@@ -1,39 +0,0 @@
-'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');
-
-/**
- * ListUnordered component, used to display a list of items.
- * Renders a native `ul` element.
- *
- * @example
- * <ListUnordered>
- *   <ListItem>Item 1</ListItem>
- *   <ListItem>Item 2</ListItem>
- * </ListUnordered>
- */
-const ListUnordered = react.forwardRef(function ListUnordered({ asChild, className, ...rest }, ref) {
-    const Component = asChild ? reactSlot.Slot : 'ul';
-    return (jsxRuntime.jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest }));
-});
-/**
- * ListOrdered component, used to display a list of items.
- * Renders a native `ol` element.
- *
- * @example
- * <ListOrdered>
- *   <ListItem>Item 1</ListItem>
- *   <ListItem>Item 2</ListItem>
- * </ListOrdered>
- */
-const ListOrdered = react.forwardRef(function ListOrdered({ asChild, className, ...rest }, ref) {
-    const Component = asChild ? reactSlot.Slot : 'ol';
-    return (jsxRuntime.jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest }));
-});
-
-exports.ListOrdered = ListOrdered;
-exports.ListUnordered = ListUnordered;

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

@@ -1,39 +0,0 @@
-'use client';
-'use strict';
-
-var pagination = require('./pagination.js');
-var paginationButton = require('./pagination-button.js');
-var paginationItem = require('./pagination-item.js');
-var paginationList = require('./pagination-list.js');
-
-/**
- * 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 PaginationComponent = Object.assign(pagination.Pagination, {
-    List: paginationList.PaginationList,
-    Item: paginationItem.PaginationItem,
-    Button: paginationButton.PaginationButton,
-});
-PaginationComponent.List.displayName = 'Pagination.List';
-PaginationComponent.Item.displayName = 'Pagination.Item';
-PaginationComponent.Button.displayName = 'Pagination.Button';
-
-exports.PaginationButton = paginationButton.PaginationButton;
-exports.PaginationItem = paginationItem.PaginationItem;
-exports.PaginationList = paginationList.PaginationList;
-exports.Pagination = PaginationComponent;

package/dist/cjs/components/pagination/pagination-button.js

@@ -1,20 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var button = require('../button/button.js');
-
-/**
- * PaginationButton component, use within a Pagination.Item.
- *
- * @example
- * <PaginationItem>
- *   <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
- * </PaginationItem>
- */
-const PaginationButton = react.forwardRef(function PaginationButton(rest, ref) {
-    return jsxRuntime.jsx(button.Button, { ref: ref, ...rest });
-});
-
-exports.PaginationButton = PaginationButton;

package/dist/cjs/components/pagination/pagination-item.js

@@ -1,23 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var react = require('react');
-
-/**
- * PaginationItem component, use within a Pagination.List.
- *
- * @example
- * <PaginationList>
- *   <PaginationItem>
- *     <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
- *   </PaginationItem>
- * </PaginationList>
- */
-const PaginationItem = react.forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
-    const Component = asChild ? reactSlot.Slot : 'li';
-    return jsxRuntime.jsx(Component, { ref: ref, ...rest });
-});
-
-exports.PaginationItem = PaginationItem;

package/dist/cjs/components/pagination/pagination-list.js

@@ -1,25 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var react = require('react');
-
-/**
- * PaginationList component, use within a Pagination.
- *
- * @example
- * <Pagination>
- *   <PaginationList>
- *     <PaginationItem>
- *       <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
- *     </PaginationItem>
- *   </PaginationList>
- * </Pagination>
- */
-const PaginationList = react.forwardRef(function PaginationList({ asChild, ...rest }, ref) {
-    const Component = asChild ? reactSlot.Slot : 'ul';
-    return jsxRuntime.jsx(Component, { ref: ref, ...rest });
-});
-
-exports.PaginationList = PaginationList;

package/dist/cjs/components/pagination/pagination.js

@@ -1,36 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-require('@digdir/designsystemet-web');
-var reactSlot = require('@radix-ui/react-slot');
-var cl = require('clsx/lite');
-var react = require('react');
-
-/**
- * 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 = react.forwardRef(function Pagination({ asChild, className, ...rest }, ref) {
-    const Component = asChild ? reactSlot.Slot : 'ds-pagination';
-    return (jsxRuntime.jsx(Component, { ...(asChild
-            ? { className: cl('ds-pagination', className) }
-            : { class: cl('ds-pagination', className) }), suppressHydrationWarning // Since ds-pagination will change aria-label and role after hydration
-        : true, ref: ref, ...rest }));
-});
-
-exports.Pagination = Pagination;

package/dist/cjs/components/paragraph/paragraph.js

@@ -1,21 +0,0 @@
-'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 `Paragraph` to display text with paragraph text styles.
- * Renders a native `p` element.
- *
- * @example
- * <Paragraph data-size='lg'>Paragraph</Paragraph>
- */
-const Paragraph = react.forwardRef(function Paragraph({ className, asChild, variant, ...rest }, ref) {
-    const Component = asChild ? reactSlot.Slot : 'p';
-    return (jsxRuntime.jsx(Component, { ref: ref, className: cl(`ds-paragraph`, className), "data-variant": variant, ...rest }));
-});
-
-exports.Paragraph = Paragraph;

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

@@ -1,28 +0,0 @@
-'use client';
-'use strict';
-
-var popover = require('./popover.js');
-var popoverTrigger = require('./popover-trigger.js');
-var popoverTriggerContext = require('./popover-trigger-context.js');
-
-/**
- * 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 PopoverComponent = Object.assign(popover.Popover, {
-    TriggerContext: popoverTriggerContext.PopoverTriggerContext,
-    Trigger: popoverTrigger.PopoverTrigger,
-});
-PopoverComponent.TriggerContext.displayName = 'Popover.TriggerContext';
-PopoverComponent.Trigger.displayName = 'Popover.Trigger';
-
-exports.PopoverTrigger = popoverTrigger.PopoverTrigger;
-exports.PopoverTriggerContext = popoverTriggerContext.PopoverTriggerContext;
-exports.Popover = PopoverComponent;

package/dist/cjs/components/popover/popover-trigger-context.js

@@ -1,27 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-
-/**
- * PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
- *
- * @example
- * <PopoverTriggerContext>
- *   <PopoverTrigger>Open Popover</PopoverTrigger>
- *   <Popover>
- *     Content
- *   </Popover>
- * </PopoverTriggerContext>
- */
-const PopoverTriggerContext = ({ children, }) => {
-    const randomPopoverId = react.useId();
-    const [popoverId, setPopoverId] = react.useState(randomPopoverId);
-    return (jsxRuntime.jsx(Context.Provider, { value: { popoverId, setPopoverId }, children: children }));
-};
-PopoverTriggerContext.displayName = 'PopoverTriggerContext';
-const Context = react.createContext({});
-
-exports.Context = Context;
-exports.PopoverTriggerContext = PopoverTriggerContext;

package/dist/cjs/components/popover/popover-trigger.js

@@ -1,41 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var react = require('react');
-var button = require('../button/button.js');
-var popoverTriggerContext = require('./popover-trigger-context.js');
-
-/**
- * PopoverTrigger component, used to trigger a popover.
- *
- * @example
- * <PopoverTriggerContext>
- *   <PopoverTrigger>Open Popover</PopoverTrigger>
- *   <Popover>
- *     Content
- *   </Popover>
- * </PopoverTriggerContext>
- *
- * @example inline
- * <PopoverTriggerContext>
- *   <Paragraph>
- *    We can use it <PopoverTrigger inline={true}>inline</PopoverTrigger>.
- *   </Paragraph>
- *   <Popover>
- *     Content
- *   </Popover>
- * </PopoverTriggerContext>
- */
-const PopoverTrigger = react.forwardRef(function PopoverTrigger({ id, inline, asChild, popovertarget, popoverTarget, ...rest }, ref) {
-    const { popoverId } = react.useContext(popoverTriggerContext.Context);
-    const Component = asChild ? reactSlot.Slot : inline ? 'button' : button.Button;
-    const popoverVal = popoverTarget ?? popovertarget ?? popoverId;
-    const popoverKey = react.version.startsWith('19')
-        ? 'popoverTarget'
-        : 'popovertarget';
-    return (jsxRuntime.jsx(Component, { ref: ref, "data-popover": inline ? 'inline' : undefined, [popoverKey]: popoverVal, ...rest }));
-});
-
-exports.PopoverTrigger = PopoverTrigger;

package/dist/cjs/components/popover/popover.js

@@ -1,109 +0,0 @@
-'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');
-require('@digdir/designsystemet-web');
-var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
-var popoverTriggerContext = require('./popover-trigger-context.js');
-
-const IS_DROPDOWN = /(?:^|\s)ds-dropdown(?:\s|$)/;
-/**
- * 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 = react.forwardRef(function Popover({ id, className = '', onClose, onOpen, open, variant, placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
-    const Component = asChild ? reactSlot.Slot : 'div';
-    const popoverRef = react.useRef(null);
-    const mergedRefs = useMergeRefs.useMergeRefs([popoverRef, ref]);
-    const { popoverId, setPopoverId } = react.useContext(popoverTriggerContext.Context);
-    const [internalOpen, setInternalOpen] = react.useState(false);
-    const controlledOpen = open ?? internalOpen;
-    // NOTE: This code is purely to add React controlled component ability to Popover API
-    react.useEffect(() => {
-        const popover = popoverRef.current;
-        const trigger = `[popovertarget="${popover?.id}"],[commandfor="${popover?.id}"]`;
-        const handleClick = (event) => {
-            const el = event.target;
-            const isTrigger = el?.closest?.(trigger);
-            const isOutside = !isTrigger && !popover?.contains(el);
-            if (isTrigger)
-                event.preventDefault(); // Prevent native Popover API
-            if (controlledOpen && (isTrigger || isOutside)) {
-                setInternalOpen(false);
-                onClose?.();
-            }
-            else if (!controlledOpen && isTrigger) {
-                setInternalOpen(true);
-                onOpen?.();
-            }
-        };
-        const handleKeydown = (event) => {
-            if (event.key === 'Escape' && controlledOpen && isTopLayer(popover)) {
-                event.preventDefault(); // Prevent closing fullscreen in Safari
-                document.querySelector(trigger)?.focus?.(); // Move focus back to trigger since `popover="manual"` doesn't do this
-                setInternalOpen(false);
-                onClose?.();
-            }
-        };
-        popover?.togglePopover?.(controlledOpen);
-        if (controlledOpen)
-            popover?.dispatchEvent(new CustomEvent('ds-toggle-source', {
-                bubbles: true,
-                composed: true, // Enable bubbling out of shadow DOM boundaries
-                detail: document.querySelector(trigger), // Since togglePopover({ source }) is not supported in all browsers yet
-            }));
-        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]);
-    // Update context with id
-    react.useEffect(() => {
-        if (id)
-            setPopoverId?.(id);
-    }, [id]);
-    return (jsxRuntime.jsx(Component, { className: 
-        // Prevent double className when using Dropdown component
-        cl(IS_DROPDOWN.test(className) ? undefined : 'ds-popover', className), id: id || popoverId, popover: 'manual', "data-placement": placement, "data-variant": variant, ref: mergedRefs, suppressHydrationWarning // Since _ds-floating adds attributes
-        : true, ...rest }));
-});
-// NOTE: This is not able to check if the popover is the most recently added #topLayer,
-// so we need another method in time, or remove the controlled popover="manual" in a v2
-const isTopLayer = (checkElement) => {
-    if (!checkElement)
-        return false;
-    const { x, y, width, height } = checkElement.getBoundingClientRect();
-    const topElement = document.elementFromPoint(x + width / 2, y + height / 2);
-    // If the element on top is on browser #top-layer but not same as provided element, then provided element is not on top
-    for (let el = topElement; el; el = el.parentElement) {
-        if (checkElement === el)
-            return true; // If the topElement is same as provided element, it's on top
-        if (el instanceof HTMLDialogElement && el.open)
-            return false; // Check for open dialog
-        if (el.classList.contains(':popover-open'))
-            return false; // Polyfill support
-        if (el.matches(':popover-open'))
-            return false; // Native support
-    }
-    return false;
-};
-
-exports.Popover = Popover;

package/dist/cjs/components/radio/radio.js

@@ -1,21 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var index = require('../field/index.js');
-var input = require('../input/input.js');
-var label = require('../label/label.js');
-var validationMessage = require('../validation-message/validation-message.js');
-
-/**
- * Radio used to select multiple options.
- *
- * @example
- * <Radio label="I agree" value="agree" />
- */
-const Radio = react.forwardRef(function Radio({ 'data-size': size, children, className, description, error, label: label$1, position, style, variant, ...rest }, ref) {
-    return (jsxRuntime.jsxs(index.Field, { "data-size": size, "data-variant": variant, "data-position": position, className: className, style: style, children: [jsxRuntime.jsx(input.Input, { type: 'radio', ref: ref, ...rest }), !!label$1 && jsxRuntime.jsx(label.Label, { weight: 'regular', children: label$1 }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description }), !!error && jsxRuntime.jsx(validationMessage.ValidationMessage, { children: error })] }));
-});
-
-exports.Radio = Radio;

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

@@ -1,37 +0,0 @@
-'use client';
-'use strict';
-
-var search = require('./search.js');
-var searchButton = require('./search-button.js');
-var searchClear = require('./search-clear.js');
-var searchInput = require('./search-input.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 SearchComponent = Object.assign(search.Search, {
-    Clear: searchClear.SearchClear,
-    Button: searchButton.SearchButton,
-    Input: searchInput.SearchInput,
-});
-SearchComponent.Clear.displayName = 'Search.Clear';
-SearchComponent.Button.displayName = 'Search.Button';
-SearchComponent.Input.displayName = 'Search.Input';
-
-exports.SearchButton = searchButton.SearchButton;
-exports.SearchClear = searchClear.SearchClear;
-exports.SearchInput = searchInput.SearchInput;
-exports.Search = SearchComponent;

package/dist/cjs/components/search/search-button.js

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

package/dist/cjs/components/search/search-clear.js

@@ -1,21 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var button = require('../button/button.js');
-
-/**
- * SearchClear component, used to display a clear button when the search input is not empty.
- *
- * @example
- * <Search>
- *   <SearchInput aria-label='Søk' />
- *   <SearchClear />
- * </Search>
- */
-const SearchClear = react.forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', ...rest }, ref) {
-    return (jsxRuntime.jsx(button.Button, { "aria-label": label, ref: ref, type: 'reset', variant: 'tertiary', ...rest }));
-});
-
-exports.SearchClear = SearchClear;

package/dist/cjs/components/search/search-input.js

@@ -1,20 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var input = require('../input/input.js');
-
-/**
- * SearchInput component, used to display a search input within the Search component.
- *
- * @example
- * <Search>
- *   <SearchInput aria-label='Søk' />
- * </Search>
- */
-const SearchInput = react.forwardRef(function SearchInput({ type = 'search', ...rest }, ref) {
-    return jsxRuntime.jsx(input.Input, { ref: ref, type: type, ...rest });
-});
-
-exports.SearchInput = SearchInput;

package/dist/cjs/components/search/search.js

@@ -1,30 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-require('@digdir/designsystemet-web');
-var cl = require('clsx/lite');
-var react = require('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 = react.forwardRef(function Search({ className, ...rest }, ref) {
-    // Using "class" since React does not translate className on custom elements
-    return (jsxRuntime.jsx("ds-suggestion", { ref: ref, class: cl('ds-search', className), ...rest }));
-});
-
-exports.Search = Search;

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

@@ -1,26 +0,0 @@
-'use client';
-'use strict';
-
-var select = require('./select.js');
-var selectOptgroup = require('./select-optgroup.js');
-var selectOption = require('./select-option.js');
-
-/**
- * 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 SelectComponent = Object.assign(select.Select, {
-    Option: selectOption.SelectOption,
-    Optgroup: selectOptgroup.SelectOptgroup,
-});
-SelectComponent.Option.displayName = 'Select.Option';
-SelectComponent.Optgroup.displayName = 'Select.Optgroup';
-
-exports.SelectOptgroup = selectOptgroup.SelectOptgroup;
-exports.SelectOption = selectOption.SelectOption;
-exports.Select = SelectComponent;

package/dist/cjs/components/select/select-optgroup.js

@@ -1,24 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var react = require('react');
-
-/**
- * SelectOptgroup component, used to display a native optgroup within a select.
- *
- * @example
- * <Select>
- *   <SelectOptgroup label='Group 1'>
- *     <SelectOption value='1'>Option 1</SelectOption>
- *     <SelectOption value='2'>Option 2</SelectOption>
- *   </SelectOptgroup>
- * </Select>
- */
-const SelectOptgroup = react.forwardRef(function SelectOptgroup({ asChild, ...rest }, ref) {
-    const Component = asChild ? reactSlot.Slot : 'optgroup';
-    return jsxRuntime.jsx(Component, { ...rest, ref: ref });
-});
-
-exports.SelectOptgroup = SelectOptgroup;