@digdir/designsystemet-react 1.20.0 → 1.20.1

package/dist/esm/components/popover/popover.d.ts

@@ -0,0 +1,106 @@
+
+import { DefaultProps, Placement } from "../../types.js";
+import { MergeRight } from "../../utilities/types.js";
+import "../../utilities/index.js";
+import "@digdir/designsystemet-web";
+import { HTMLAttributes } from "react";
+//#region src/components/popover/popover.d.ts
+type PopoverProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
+  /**
+   * id to connect the trigger with the popover - required when not using Popover.Context.
+   */
+  id?: string;
+  /**
+   * Placement of the popover on the trigger.
+   * @default 'top'
+   */
+  placement?: Placement;
+  /**
+   * When a boolean is provided, the popover will be controlled.
+   * @default undefined
+   */
+  open?: boolean;
+  /**
+   * Change the background color of the popover.
+   *
+   * @default 'default'
+   */
+  variant?: 'default' | 'tinted';
+  /**
+   * Callback when the popover wants to open.
+   */
+  onOpen?: () => void;
+  /**
+   * Callback when the popover wants to close.
+   */
+  onClose?: () => void;
+  /**
+   * Whether to enable auto placement.
+   * @default true
+   */
+  autoPlacement?: boolean;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+}>;
+/**
+ * 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>
+ */
+declare const Popover: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "asChild" | "id" | "variant" | "placement" | "onClose" | "open" | "onOpen" | "autoPlacement"> & {
+  /**
+   * id to connect the trigger with the popover - required when not using Popover.Context.
+   */
+  id?: string;
+  /**
+   * Placement of the popover on the trigger.
+   * @default 'top'
+   */
+  placement?: Placement;
+  /**
+   * When a boolean is provided, the popover will be controlled.
+   * @default undefined
+   */
+  open?: boolean;
+  /**
+   * Change the background color of the popover.
+   *
+   * @default 'default'
+   */
+  variant?: "default" | "tinted";
+  /**
+   * Callback when the popover wants to open.
+   */
+  onOpen?: () => void;
+  /**
+   * Callback when the popover wants to close.
+   */
+  onClose?: () => void;
+  /**
+   * Whether to enable auto placement.
+   * @default true
+   */
+  autoPlacement?: boolean;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Popover, PopoverProps };

package/dist/esm/components/popover/popover.js

@@ -1,107 +1,100 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import cl from 'clsx/lite';
-import { forwardRef, useRef, useContext, useState, useEffect } from 'react';
-import '@digdir/designsystemet-web';
-import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
-import { Context } from './popover-trigger-context.js';
-
+import { useMergeRefs } from "../../utilities/hooks/use-merge-refs/use-merge-refs.js";
+import "../../utilities/hooks/index.js";
+import { Context } from "./popover-trigger-context.js";
+import "@digdir/designsystemet-web";
+import cl from "clsx/lite";
+import { forwardRef, useContext, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/popover/popover.tsx
 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 = forwardRef(function Popover({ id, className = '', onClose, onOpen, open, variant, 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 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
-    useEffect(() => {
-        if (id)
-            setPopoverId?.(id);
-    }, [id]);
-    return (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 }));
+* 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, 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;
+	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();
+			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();
+				document.querySelector(trigger)?.focus?.();
+				setInternalOpen(false);
+				onClose?.();
+			}
+		};
+		popover?.togglePopover?.(controlledOpen);
+		if (controlledOpen) popover?.dispatchEvent(new CustomEvent("ds-toggle-source", {
+			bubbles: true,
+			composed: true,
+			detail: document.querySelector(trigger)
+		}));
+		document.addEventListener("click", handleClick, true);
+		document.addEventListener("keydown", handleKeydown);
+		return () => {
+			document.removeEventListener("click", handleClick, true);
+			document.removeEventListener("keydown", handleKeydown);
+		};
+	}, [controlledOpen]);
+	useEffect(() => {
+		if (id) setPopoverId?.(id);
+	}, [id]);
+	return /* @__PURE__ */ jsx(Component, {
+		className: cl(IS_DROPDOWN.test(className) ? void 0 : "ds-popover", className),
+		id: id || popoverId,
+		popover: "manual",
+		"data-placement": placement,
+		"data-variant": variant,
+		ref: mergedRefs,
+		suppressHydrationWarning: 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;
+	if (!checkElement) return false;
+	const { x, y, width, height } = checkElement.getBoundingClientRect();
+	const topElement = document.elementFromPoint(x + width / 2, y + height / 2);
+	for (let el = topElement; el; el = el.parentElement) {
+		if (checkElement === el) return true;
+		if (el instanceof HTMLDialogElement && el.open) return false;
+		if (el.classList.contains(":popover-open")) return false;
+		if (el.matches(":popover-open")) return false;
+	}
+	return false;
 };
-
+//#endregion
 export { Popover };

package/dist/esm/components/radio/radio.d.ts

@@ -0,0 +1,49 @@
+
+import { DefaultProps, LabelRequired } from "../../types.js";
+import { MergeRight } from "../../utilities/types.js";
+import "../../utilities/index.js";
+import { FieldProps } from "../field/field.js";
+import "../field/index.js";
+import { InputProps } from "../input/input.js";
+import { ReactNode } from "react";
+//#region src/components/radio/radio.d.ts
+type RadioProps = MergeRight<DefaultProps & Omit<InputProps, 'type' | 'role' | 'size'>, {
+  /**
+   * Optional aria-label
+   **/
+  'aria-label'?: string;
+  /**
+   * Radio label
+   */
+  label?: ReactNode;
+  /**
+   * Description for field
+   */
+  description?: ReactNode;
+  /**
+   * Value of the `input` element
+   */
+  value?: InputProps['value'];
+  /**
+   * Error message for field
+   */
+  error?: ReactNode;
+  /**
+   * If outline, the radio will have a border.
+   */
+  variant?: 'outline';
+  /**
+   * Position of radio
+   * @default start
+   */
+  position?: FieldProps['position'];
+} & LabelRequired>;
+/**
+ * Radio used to select multiple options.
+ *
+ * @example
+ * <Radio label="I agree" value="agree" />
+ */
+declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Radio, RadioProps };

package/dist/esm/components/radio/radio.js

@@ -1,19 +1,41 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Field as FieldComponent } from '../field/index.js';
-import { Input } from '../input/input.js';
-import { Label } from '../label/label.js';
-import { ValidationMessage } from '../validation-message/validation-message.js';
-
+import { Label } from "../label/label.js";
+import { ValidationMessage } from "../validation-message/validation-message.js";
+import { Input } from "../input/input.js";
+import { Field as FieldComponent } from "../field/index.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/radio/radio.tsx
 /**
- * Radio used to select multiple options.
- *
- * @example
- * <Radio label="I agree" value="agree" />
- */
-const Radio = forwardRef(function Radio({ 'data-size': size, children, className, description, error, label, position, style, variant, ...rest }, ref) {
-    return (jsxs(FieldComponent, { "data-size": size, "data-variant": variant, "data-position": position, 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 })] }));
+* Radio used to select multiple options.
+*
+* @example
+* <Radio label="I agree" value="agree" />
+*/
+const Radio = forwardRef(function Radio({ "data-size": size, children, className, description, error, label, position, style, variant, ...rest }, ref) {
+	return /* @__PURE__ */ jsxs(FieldComponent, {
+		"data-size": size,
+		"data-variant": variant,
+		"data-position": position,
+		className,
+		style,
+		children: [
+			/* @__PURE__ */ jsx(Input, {
+				type: "radio",
+				ref,
+				...rest
+			}),
+			!!label && /* @__PURE__ */ jsx(Label, {
+				weight: "regular",
+				children: label
+			}),
+			!!description && /* @__PURE__ */ jsx("div", {
+				"data-field": "description",
+				children: description
+			}),
+			!!error && /* @__PURE__ */ jsx(ValidationMessage, { children: error })
+		]
+	});
 });
-
+//#endregion
 export { Radio };

package/dist/esm/components/search/index.d.ts

@@ -0,0 +1,56 @@
+
+import { Search as Search$1, SearchProps } from "./search.js";
+import { SearchButton, SearchButtonProps } from "./search-button.js";
+import { SearchClear, SearchClearProps } from "./search-clear.js";
+import { SearchInput, SearchInputProps } from "./search-input.js";
+//#region src/components/search/index.d.ts
+type Search = typeof Search$1 & {
+  /**
+   * Search.Clear component, used to display a clear button when the search input is not empty.
+   *
+   * @example
+   * <Search>
+   *   <Search.Input aria-label='Søk' />
+   *   <Search.Clear />
+   * </Search>
+   */
+  Clear: typeof SearchClear;
+  /**
+   * Search.Button 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>
+   */
+  Button: typeof SearchButton;
+  /**
+   * Search.Input component, used to display a search input within the Search component.
+   *
+   * @example
+   * <Search>
+   *   <Search.Input aria-label='Søk' />
+   * </Search>
+   */
+  Input: typeof SearchInput;
+};
+/**
+ * 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>
+ */
+declare const SearchComponent: Search;
+//#endregion
+export { SearchComponent as Search, SearchButton, type SearchButtonProps, SearchClear, type SearchClearProps, SearchInput, type SearchInputProps, type SearchProps };

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

@@ -1,32 +1,32 @@
 'use client';
-import { Search } from './search.js';
-import { SearchButton } from './search-button.js';
-import { SearchClear } from './search-clear.js';
-import { SearchInput } from './search-input.js';
-
+import { Search } from "./search.js";
+import { SearchButton } from "./search-button.js";
+import { SearchClear } from "./search-clear.js";
+import { SearchInput } from "./search-input.js";
+//#region src/components/search/index.ts
 /**
- * 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>
- */
+* 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, {
-    Clear: SearchClear,
-    Button: SearchButton,
-    Input: SearchInput,
+	Clear: SearchClear,
+	Button: SearchButton,
+	Input: SearchInput
 });
-SearchComponent.Clear.displayName = 'Search.Clear';
-SearchComponent.Button.displayName = 'Search.Button';
-SearchComponent.Input.displayName = 'Search.Input';
-
+SearchComponent.Clear.displayName = "Search.Clear";
+SearchComponent.Button.displayName = "Search.Button";
+SearchComponent.Input.displayName = "Search.Input";
+//#endregion
 export { SearchComponent as Search, SearchButton, SearchClear, SearchInput };

package/dist/esm/components/search/search-button.d.ts

@@ -0,0 +1,41 @@
+
+import { DefaultProps } from "../../types.js";
+import { MergeRight } from "../../utilities/types.js";
+import "../../utilities/index.js";
+import { ButtonProps } from "../button/button.js";
+import "../../index.js";
+import { ReactNode } from "react";
+//#region src/components/search/search-button.d.ts
+type SearchButtonProps = MergeRight<ButtonProps, {
+  /**
+   * Variant of the button
+   * @default 'primary'
+   */
+  variant?: 'primary' | 'secondary';
+  /**
+   * Children of the button
+   * @default 'Søk'
+   */
+  children?: ReactNode;
+}>;
+/**
+ * SearchButton component, used to display a search button within a Search component.
+ *
+ * @example
+ * <Search>
+ *   <SearchInput aria-label='Søk' />
+ *   <SearchButton>Søk</SearchButton>
+ * </Search>
+ */
+declare const SearchButton: import("react").ForwardRefExoticComponent<Omit<DefaultProps & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "command" | "commandfor" | "commandFor">, "asChild" | "command" | "commandfor" | "commandFor" | "type" | "variant" | "icon" | "loading"> & {
+  variant?: "primary" | "secondary" | "tertiary";
+  icon?: boolean;
+  loading?: boolean | ReactNode;
+  asChild?: boolean;
+  type?: import("react").ButtonHTMLAttributes<HTMLButtonElement>["type"];
+  command?: string;
+  commandfor?: string;
+  commandFor?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { SearchButton, SearchButtonProps };

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

@@ -1,19 +1,24 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Button } from '../button/button.js';
-
+import { Button } from "../button/button.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/search/search-button.tsx
 /**
- * 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 = forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {
-    return (jsx(Button, { ref: ref, type: 'submit', ...rest, children: children }));
+* 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 = forwardRef(function SearchButton({ children = "Søk", ...rest }, ref) {
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		type: "submit",
+		...rest,
+		children
+	});
 });
-
+//#endregion
 export { SearchButton };

package/dist/esm/components/search/search-clear.d.ts

@@ -0,0 +1,28 @@
+
+import { ButtonProps } from "../button/button.js";
+//#region src/components/search/search-clear.d.ts
+type SearchClearProps = Omit<ButtonProps, 'variant' | 'children'> & {
+  /**
+   * Aria label for the clear button
+   * @default 'Tøm'
+   */
+  'aria-label'?: string;
+};
+/**
+ * SearchClear component, used to display a clear button when the search input is not empty.
+ *
+ * @example
+ * <Search>
+ *   <SearchInput aria-label='Søk' />
+ *   <SearchClear />
+ * </Search>
+ */
+declare const SearchClear: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "children" | "variant"> & {
+  /**
+   * Aria label for the clear button
+   * @default 'Tøm'
+   */
+  'aria-label'?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { SearchClear, SearchClearProps };