@digdir/designsystemet-react 1.20.0 → 1.20.1

package/dist/cjs/components/paragraph/paragraph.d.cts

@@ -0,0 +1,44 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/paragraph/paragraph.d.ts
+type ParagraphProps = {
+  /**
+   * Changes text sizing
+   */
+  'data-size'?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /**
+   *  Adjusts styling for paragraph length
+   *  @default 'default'
+   */
+  variant?: 'long' | 'default' | 'short';
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & HTMLAttributes<HTMLParagraphElement>;
+/**
+ * Use `Paragraph` to display text with paragraph text styles.
+ * Renders a native `p` element.
+ *
+ * @example
+ * <Paragraph data-size='lg'>Paragraph</Paragraph>
+ */
+declare const Paragraph: import("react").ForwardRefExoticComponent<{
+  /**
+   * Changes text sizing
+   */
+  'data-size'?: "xs" | "sm" | "md" | "lg" | "xl";
+  /**
+   *  Adjusts styling for paragraph length
+   *  @default 'default'
+   */
+  variant?: "long" | "default" | "short";
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { Paragraph, ParagraphProps };

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

@@ -0,0 +1,26 @@
+'use client';
+const require_popover_trigger_context = require("./popover-trigger-context.cjs");
+const require_popover = require("./popover.cjs");
+const require_popover_trigger = require("./popover-trigger.cjs");
+//#region src/components/popover/index.ts
+/**
+* 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(require_popover.Popover, {
+	TriggerContext: require_popover_trigger_context.PopoverTriggerContext,
+	Trigger: require_popover_trigger.PopoverTrigger
+});
+PopoverComponent.TriggerContext.displayName = "Popover.TriggerContext";
+PopoverComponent.Trigger.displayName = "Popover.Trigger";
+//#endregion
+exports.Popover = PopoverComponent;
+exports.PopoverTrigger = require_popover_trigger.PopoverTrigger;
+exports.PopoverTriggerContext = require_popover_trigger_context.PopoverTriggerContext;

package/dist/cjs/components/popover/index.d.cts

@@ -0,0 +1,55 @@
+
+import { Popover as Popover$1, PopoverProps } from "./popover.cjs";
+import { PopoverTrigger, PopoverTriggerProps } from "./popover-trigger.cjs";
+import { PopoverTriggerContext, PopoverTriggerContextProps } from "./popover-trigger-context.cjs";
+//#region src/components/popover/index.d.ts
+type Popover = typeof Popover$1 & {
+  /**
+   * Popover.TriggerContext component, use to wrap a Popover.Trigger and Popover.
+   *
+   * @example
+   * <Popover.TriggerContext>
+   *   <Popover.Trigger>Open Popover</Popover.Trigger>
+   *   <Popover>
+   *     Content
+   *   </Popover>
+   * </Popover.TriggerContext>
+   */
+  TriggerContext: typeof PopoverTriggerContext;
+  /**
+   * 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>
+   */
+  Trigger: typeof PopoverTrigger;
+};
+/**
+ * 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>
+ */
+declare const PopoverComponent: Popover;
+//#endregion
+export { PopoverComponent as Popover, type PopoverProps, PopoverTrigger, PopoverTriggerContext, type PopoverTriggerContextProps, type PopoverTriggerProps };

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

@@ -0,0 +1,30 @@
+'use client';
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/popover/popover-trigger-context.tsx
+/**
+* PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
+*
+* @example
+* <PopoverTriggerContext>
+*   <PopoverTrigger>Open Popover</PopoverTrigger>
+*   <Popover>
+*     Content
+*   </Popover>
+* </PopoverTriggerContext>
+*/
+const PopoverTriggerContext = ({ children }) => {
+	const [popoverId, setPopoverId] = (0, react.useState)((0, react.useId)());
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Context.Provider, {
+		value: {
+			popoverId,
+			setPopoverId
+		},
+		children
+	});
+};
+PopoverTriggerContext.displayName = "PopoverTriggerContext";
+const Context = (0, react.createContext)({});
+//#endregion
+exports.Context = Context;
+exports.PopoverTriggerContext = PopoverTriggerContext;

package/dist/cjs/components/popover/popover-trigger-context.d.cts

@@ -0,0 +1,23 @@
+
+import { ReactNode } from "react";
+//#region src/components/popover/popover-trigger-context.d.ts
+type PopoverTriggerContextProps = {
+  children: ReactNode;
+};
+/**
+ * PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
+ *
+ * @example
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </PopoverTriggerContext>
+ */
+declare const PopoverTriggerContext: {
+  ({ children }: PopoverTriggerContextProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { PopoverTriggerContext, PopoverTriggerContextProps };

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

@@ -0,0 +1,42 @@
+'use client';
+const require_button = require("../button/button.cjs");
+const require_popover_trigger_context = require("./popover-trigger-context.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+//#region src/components/popover/popover-trigger.tsx
+/**
+* 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 = (0, react.forwardRef)(function PopoverTrigger({ id, inline, asChild, popovertarget, popoverTarget, ...rest }, ref) {
+	const { popoverId } = (0, react.useContext)(require_popover_trigger_context.Context);
+	const Component = asChild ? _radix_ui_react_slot.Slot : inline ? "button" : require_button.Button;
+	const popoverVal = popoverTarget ?? popovertarget ?? popoverId;
+	const popoverKey = react.version.startsWith("19") ? "popoverTarget" : "popovertarget";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		ref,
+		"data-popover": inline ? "inline" : void 0,
+		[popoverKey]: popoverVal,
+		...rest
+	});
+});
+//#endregion
+exports.PopoverTrigger = PopoverTrigger;

package/dist/cjs/components/popover/popover-trigger.d.cts

@@ -0,0 +1,47 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { ButtonProps } from "../button/button.cjs";
+import { ButtonHTMLAttributes } from "react";
+//#region src/components/popover/popover-trigger.d.ts
+type PopoverTriggerProps = ({
+  /**
+   * Will render the trigger as inline text.
+   * @default false
+   */
+  inline?: true;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement> & DefaultProps) | ({
+  /**
+   * Will render the trigger as inline text.
+   * @default false
+   */
+  inline?: false;
+} & ButtonProps);
+/**
+ * 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>
+ */
+declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { PopoverTrigger, PopoverTriggerProps };

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

@@ -0,0 +1,102 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_use_merge_refs = require("../../utilities/hooks/use-merge-refs/use-merge-refs.cjs");
+require("../../utilities/hooks/index.cjs");
+const require_popover_trigger_context = require("./popover-trigger-context.cjs");
+require("@digdir/designsystemet-web");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_slot = require("@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 = (0, react.forwardRef)(function Popover({ id, className = "", onClose, onOpen, open, variant, placement = "top", autoPlacement = true, asChild = false, ...rest }, ref) {
+	const Component = asChild ? _radix_ui_react_slot.Slot : "div";
+	const popoverRef = (0, react.useRef)(null);
+	const mergedRefs = require_use_merge_refs.useMergeRefs([popoverRef, ref]);
+	const { popoverId, setPopoverId } = (0, react.useContext)(require_popover_trigger_context.Context);
+	const [internalOpen, setInternalOpen] = (0, react.useState)(false);
+	const controlledOpen = open ?? internalOpen;
+	(0, 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();
+			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]);
+	(0, react.useEffect)(() => {
+		if (id) setPopoverId?.(id);
+	}, [id]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		className: (0, clsx_lite.default)(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
+	});
+});
+const isTopLayer = (checkElement) => {
+	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
+exports.Popover = Popover;

package/dist/cjs/components/popover/popover.d.cts

@@ -0,0 +1,106 @@
+
+import { DefaultProps, Placement } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+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/cjs/components/radio/radio.cjs

@@ -0,0 +1,41 @@
+'use client';
+const require_label = require("../label/label.cjs");
+const require_validation_message = require("../validation-message/validation-message.cjs");
+const require_input = require("../input/input.cjs");
+const require_index = require("../field/index.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/radio/radio.tsx
+/**
+* Radio used to select multiple options.
+*
+* @example
+* <Radio label="I agree" value="agree" />
+*/
+const Radio = (0, react.forwardRef)(function Radio({ "data-size": size, children, className, description, error, label, position, style, variant, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index.Field, {
+		"data-size": size,
+		"data-variant": variant,
+		"data-position": position,
+		className,
+		style,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+				type: "radio",
+				ref,
+				...rest
+			}),
+			!!label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_label.Label, {
+				weight: "regular",
+				children: label
+			}),
+			!!description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-field": "description",
+				children: description
+			}),
+			!!error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_validation_message.ValidationMessage, { children: error })
+		]
+	});
+});
+//#endregion
+exports.Radio = Radio;

package/dist/cjs/components/radio/radio.d.cts

@@ -0,0 +1,49 @@
+
+import { DefaultProps, LabelRequired } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { FieldProps } from "../field/field.cjs";
+import "../field/index.cjs";
+import { InputProps } from "../input/input.cjs";
+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/cjs/components/search/index.cjs

@@ -0,0 +1,35 @@
+'use client';
+const require_search = require("./search.cjs");
+const require_search_button = require("./search-button.cjs");
+const require_search_clear = require("./search-clear.cjs");
+const require_search_input = require("./search-input.cjs");
+//#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>
+*/
+const SearchComponent = Object.assign(require_search.Search, {
+	Clear: require_search_clear.SearchClear,
+	Button: require_search_button.SearchButton,
+	Input: require_search_input.SearchInput
+});
+SearchComponent.Clear.displayName = "Search.Clear";
+SearchComponent.Button.displayName = "Search.Button";
+SearchComponent.Input.displayName = "Search.Input";
+//#endregion
+exports.Search = SearchComponent;
+exports.SearchButton = require_search_button.SearchButton;
+exports.SearchClear = require_search_clear.SearchClear;
+exports.SearchInput = require_search_input.SearchInput;

package/dist/cjs/components/search/index.d.cts

@@ -0,0 +1,56 @@
+
+import { Search as Search$1, SearchProps } from "./search.cjs";
+import { SearchButton, SearchButtonProps } from "./search-button.cjs";
+import { SearchClear, SearchClearProps } from "./search-clear.cjs";
+import { SearchInput, SearchInputProps } from "./search-input.cjs";
+//#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 };