@digdir/designsystemet-react 1.19.1 → 1.20.1

package/dist/esm/components/chip/chips.js

@@ -1,47 +1,68 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Slot, Slottable } from '@radix-ui/react-slot';
-import cl from 'clsx/lite';
-import { forwardRef } from 'react';
-import { Input } from '../input/input.js';
-
+import { Input } from "../input/input.js";
+import cl from "clsx/lite";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+//#region src/components/chip/chips.tsx
 /**
- * Chip.Button used for interaction
- *
- * @example
- * <Chip.Button>Click me</Chip.Button>
- */
+* Chip.Button used for interaction
+*
+* @example
+* <Chip.Button>Click me</Chip.Button>
+*/
 const ChipButton = forwardRef(function ChipButton({ asChild, className, ...rest }, ref) {
-    const Component = asChild ? Slot : 'button';
-    return (jsx(Component, { className: cl('ds-chip', className), type: asChild ? undefined : 'button', ref: ref, ...rest }));
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		className: cl("ds-chip", className),
+		type: asChild ? void 0 : "button",
+		ref,
+		...rest
+	});
 });
 /**
- * Chip.Removable used for interaction
- * @example
- * <Chip.Removable>Click to remove me</Chip.Removable>
- */
+* Chip.Removable used for interaction
+* @example
+* <Chip.Removable>Click to remove me</Chip.Removable>
+*/
 const ChipRemovable = forwardRef(function ChipRemovable(props, ref) {
-    return jsx(ChipButton, { "data-removable": true, ref: ref, ...props });
+	return /* @__PURE__ */ jsx(ChipButton, {
+		"data-removable": true,
+		ref,
+		...props
+	});
 });
 /**
- * Chip.Checkbox used for multiselection
- * @example
- * <Chip.Checkbox name="language" value="nynorsk">Nynorsk</Chip.Checkbox>
- * <Chip.Checkbox name="language" value="bokmål">Bokmål</Chip.Checkbox>
- */
-const ChipCheckbox = forwardRef(function ChipCheckbox({ asChild, children, className, 'data-color': color, 'data-size': size, 'data-wrap': wrap, ...rest }, ref) {
-    const inputType = rest.type ?? 'checkbox';
-    const Component = asChild ? Slot : 'label';
-    return (jsxs(Component, { className: cl('ds-chip', className), "data-color": color, "data-size": size, "data-wrap": wrap, ref: ref, children: [jsx(Input, { ...rest, type: inputType }), jsx(Slottable, { children: children })] }));
+* Chip.Checkbox used for multiselection
+* @example
+* <Chip.Checkbox name="language" value="nynorsk">Nynorsk</Chip.Checkbox>
+* <Chip.Checkbox name="language" value="bokmål">Bokmål</Chip.Checkbox>
+*/
+const ChipCheckbox = forwardRef(function ChipCheckbox({ asChild, children, className, "data-color": color, "data-size": size, "data-wrap": wrap, ...rest }, ref) {
+	const inputType = rest.type ?? "checkbox";
+	return /* @__PURE__ */ jsxs(asChild ? Slot : "label", {
+		className: cl("ds-chip", className),
+		"data-color": color,
+		"data-size": size,
+		"data-wrap": wrap,
+		ref,
+		children: [/* @__PURE__ */ jsx(Input, {
+			...rest,
+			type: inputType
+		}), /* @__PURE__ */ jsx(Slottable, { children })]
+	});
 });
 /**
- * Chip.Radio used for single selection
- * @example
- * <Chip.Radio name="language" value="nynorsk">Nynorsk</Chip.Radio>
- * <Chip.Radio name="language" value="bokmål">Bokmål</Chip.Radio>
- */
+* Chip.Radio used for single selection
+* @example
+* <Chip.Radio name="language" value="nynorsk">Nynorsk</Chip.Radio>
+* <Chip.Radio name="language" value="bokmål">Bokmål</Chip.Radio>
+*/
 const ChipRadio = forwardRef(function ChipRadio(props, ref) {
-    return jsx(ChipCheckbox, { ref, type: 'radio', ...props });
+	return /* @__PURE__ */ jsx(ChipCheckbox, {
+		ref,
+		type: "radio",
+		...props
+	});
 });
-
+//#endregion
 export { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable };

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

@@ -0,0 +1,38 @@
+
+import { ChipButton, ChipButtonProps, ChipCheckbox, ChipCheckboxProps, ChipRadio, ChipRadioProps, ChipRemovable, ChipRemovableProps } from "./chips.js";
+//#region src/components/chip/index.d.ts
+type Chip = {
+  /**
+   * Chip.Button used for interaction
+   *
+   * @example
+   * <Chip.Button>Click me</Chip.Button>
+   */
+  Button: typeof ChipButton;
+  /**
+   * Chip.Checkbox used for multiselection
+   *
+   * @example
+   * <Chip.Checkbox name="language" value="nynorsk">Nynorsk</Chip.Checkbox>
+   * <Chip.Checkbox name="language" value="bokmål">Bokmål</Chip.Checkbox>
+   */
+  Checkbox: typeof ChipCheckbox;
+  /**
+   * Chip.Radio used for single selection
+   *
+   * @example
+   * <Chip.Radio name="language" value="nynorsk">Nynorsk</Chip.Radio>
+   * <Chip.Radio name="language" value="bokmål">Bokmål</Chip.Radio>
+   */
+  Radio: typeof ChipRadio;
+  /**
+   * Chip.Removable used for interaction
+   *
+   * @example
+   * <Chip.Removable>Click to remove me</Chip.Removable>
+   */
+  Removable: typeof ChipRemovable;
+};
+declare const ChipComponent: Chip;
+//#endregion
+export { ChipComponent as Chip, ChipButton, type ChipButtonProps, ChipCheckbox, type ChipCheckboxProps, ChipRadio, type ChipRadioProps, ChipRemovable, type ChipRemovableProps };

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

@@ -1,15 +1,15 @@
 'use client';
-import { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './chips.js';
-
+import { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from "./chips.js";
+//#region src/components/chip/index.ts
 const ChipComponent = {
-    Button: ChipButton,
-    Checkbox: ChipCheckbox,
-    Radio: ChipRadio,
-    Removable: ChipRemovable,
+	Button: ChipButton,
+	Checkbox: ChipCheckbox,
+	Radio: ChipRadio,
+	Removable: ChipRemovable
 };
-ChipComponent.Button.displayName = 'Chip.Button';
-ChipComponent.Checkbox.displayName = 'Chip.Checkbox';
-ChipComponent.Radio.displayName = 'Chip.Radio';
-ChipComponent.Removable.displayName = 'Chip.Removable';
-
+ChipComponent.Button.displayName = "Chip.Button";
+ChipComponent.Checkbox.displayName = "Chip.Checkbox";
+ChipComponent.Radio.displayName = "Chip.Radio";
+ChipComponent.Removable.displayName = "Chip.Removable";
+//#endregion
 export { ChipComponent as Chip, ChipButton, ChipCheckbox, ChipRadio, ChipRemovable };

package/dist/esm/components/details/details-content.d.ts

@@ -0,0 +1,13 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/details/details-content.d.ts
+type DetailsContentProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Details content component, contains the content of the details item.
+ *
+ * @example
+ * <DetailsContent>Content</DetailsContent>
+ */
+declare const DetailsContent: import("react").ForwardRefExoticComponent<DetailsContentProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DetailsContent, DetailsContentProps };

package/dist/esm/components/details/details-content.js

@@ -1,15 +1,18 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/details/details-content.tsx
 /**
- * Details content component, contains the content of the details item.
- *
- * @example
- * <DetailsContent>Content</DetailsContent>
- */
+* Details content component, contains the content of the details item.
+*
+* @example
+* <DetailsContent>Content</DetailsContent>
+*/
 const DetailsContent = forwardRef(function DetailsContent(rest, ref) {
-    return jsx("div", { ref: ref, ...rest });
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { DetailsContent };

package/dist/esm/components/details/details-summary.d.ts

@@ -0,0 +1,19 @@
+
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/details/details-summary.d.ts
+type DetailsSummaryProps = {
+  /** Heading text */
+  children?: ReactNode;
+} & HTMLAttributes<HTMLElement>;
+/**
+ * Details summary component, contains a the heading to toggle the content.
+ *
+ * @example
+ * <Details.Summary>Heading</Details.Summary>
+ */
+declare const DetailsSummary: import("react").ForwardRefExoticComponent<{
+  /** Heading text */
+  children?: ReactNode;
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { DetailsSummary, DetailsSummaryProps };

package/dist/esm/components/details/details-summary.js

@@ -1,16 +1,19 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/details/details-summary.tsx
 /**
- * Details summary component, contains a the heading to toggle the content.
- *
- * @example
- * <Details.Summary>Heading</Details.Summary>
- */
+* Details summary component, contains a the heading to toggle the content.
+*
+* @example
+* <Details.Summary>Heading</Details.Summary>
+*/
 const DetailsSummary = forwardRef(function DetailsSummary(rest, ref) {
-    return (jsx("summary", { suppressHydrationWarning // Since <details> polyfill adds attributes
-        : true, ref: ref, ...rest }));
+	return /* @__PURE__ */ jsx("summary", {
+		suppressHydrationWarning: true,
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { DetailsSummary };

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

@@ -0,0 +1,54 @@
+
+import { DefaultProps } from "../../types.js";
+import { MergeRight } from "../../utilities/types.js";
+import "../../utilities/index.js";
+import "@digdir/designsystemet-web";
+import { DetailsHTMLAttributes, ReactNode } from "react";
+//#region src/components/details/details.d.ts
+type DetailsProps = MergeRight<DefaultProps & DetailsHTMLAttributes<HTMLDetailsElement>, {
+  /**
+   * Change the background color of the details.
+   *
+   * @default 'default'
+   */
+  variant?: 'default' | 'tinted';
+  /**
+   * Controls open-state.
+   *
+   * Using this removes automatic control of open-state
+   *
+   * @default undefined
+   */
+  open?: boolean;
+  /**
+   * Defaults the details to open if not controlled
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Callback function when Details toggles due to click on summary or find in page-search
+   */
+  onToggle?: (event: Event) => void;
+  /**
+   * Content should be one `<Details.Summary>` and `<Details.Content>`
+   */
+  children?: ReactNode;
+}> & ({
+  open: boolean;
+  onToggle: (event: Event) => void;
+} | {
+  open?: never;
+  onToggle?: (event: Event) => void;
+});
+/**
+ * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
+ * @example
+ * <Details>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
+ * </Details>
+ */
+declare const Details: import("react").ForwardRefExoticComponent<DetailsProps & import("react").RefAttributes<HTMLDetailsElement>>;
+//#endregion
+export { Details, DetailsProps };

package/dist/esm/components/details/details.js

@@ -1,41 +1,45 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { forwardRef, useRef, useEffect } from 'react';
-import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
-import '@digdir/designsystemet-web';
-
+import { useMergeRefs } from "../../utilities/hooks/use-merge-refs/use-merge-refs.js";
+import "../../utilities/hooks/index.js";
+import "@digdir/designsystemet-web";
+import cl from "clsx/lite";
+import { forwardRef, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/details/details.tsx
 /**
- * Details component, contains `Details.Summary` and `Details.Content` components.
- *
- * @example
- * <Details>
- *  <Details.Summary>Header</Details.Summary>
- *  <Details.Content>Content</Details.Content>
- * </Details>
- */
+* Details component, contains `Details.Summary` and `Details.Content` components.
+*
+* @example
+* <Details>
+*  <Details.Summary>Header</Details.Summary>
+*  <Details.Content>Content</Details.Content>
+* </Details>
+*/
 const Details = forwardRef(function Details({ className, open, defaultOpen = false, variant, onToggle, ...rest }, ref) {
-    const detailsRef = useRef(null);
-    const initialOpen = useRef(defaultOpen); // Allow rendering defaultOpen on server, but only render once on client
-    const mergedRefs = useMergeRefs([detailsRef, ref]);
-    const onToggleRef = useRef(onToggle); // Using ref to enable access inside useEffect without re-binding event listeners
-    const openRef = useRef(open);
-    onToggleRef.current = onToggle;
-    openRef.current = open;
-    // Provide onToggle event and controlled state
-    useEffect(() => {
-        const details = detailsRef.current;
-        const handleToggle = (event) => {
-            if (!details || details?.open === openRef.current)
-                return;
-            onToggleRef.current?.(event);
-            if (openRef.current !== undefined)
-                details.open = openRef.current; // Don't update DOM unless controlled state changes
-        };
-        details?.addEventListener('toggle', handleToggle, true);
-        return () => details?.removeEventListener('toggle', handleToggle, true);
-    }, []);
-    return (jsx("details", { className: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, "data-variant": variant, ref: mergedRefs, ...rest }));
+	const detailsRef = useRef(null);
+	const initialOpen = useRef(defaultOpen);
+	const mergedRefs = useMergeRefs([detailsRef, ref]);
+	const onToggleRef = useRef(onToggle);
+	const openRef = useRef(open);
+	onToggleRef.current = onToggle;
+	openRef.current = open;
+	useEffect(() => {
+		const details = detailsRef.current;
+		const handleToggle = (event) => {
+			if (!details || details?.open === openRef.current) return;
+			onToggleRef.current?.(event);
+			if (openRef.current !== void 0) details.open = openRef.current;
+		};
+		details?.addEventListener("toggle", handleToggle, true);
+		return () => details?.removeEventListener("toggle", handleToggle, true);
+	}, []);
+	return /* @__PURE__ */ jsx("details", {
+		className: cl("ds-details", className),
+		open: (open ?? initialOpen.current) || void 0,
+		"data-variant": variant,
+		ref: mergedRefs,
+		...rest
+	});
 });
-
+//#endregion
 export { Details };

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

@@ -0,0 +1,33 @@
+
+import { Details as Details$1, DetailsProps } from "./details.js";
+import { DetailsContent, DetailsContentProps } from "./details-content.js";
+import { DetailsSummary, DetailsSummaryProps } from "./details-summary.js";
+//#region src/components/details/index.d.ts
+type Details = typeof Details$1 & {
+  /**
+   * Details summary component, contains a the heading to toggle the content.
+   *
+   * @example
+   * <Details.Summary>Heading</Details.Summary>
+   */
+  Summary: typeof DetailsSummary;
+  /**
+   * Details content component, contains the content of the details item.
+   *
+   * @example
+   * <DetailsContent>Content</DetailsContent>
+   */
+  Content: typeof DetailsContent;
+};
+/**
+ * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
+ * @example
+ * <Details>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
+ * </Details>
+ */
+declare const DetailsComponent: Details;
+//#endregion
+export { DetailsComponent as Details, DetailsContent, type DetailsContentProps, type DetailsProps, DetailsSummary, type DetailsSummaryProps };

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

@@ -1,22 +1,22 @@
 'use client';
-import { Details } from './details.js';
-import { DetailsContent } from './details-content.js';
-import { DetailsSummary } from './details-summary.js';
-
+import { Details } from "./details.js";
+import { DetailsContent } from "./details-content.js";
+import { DetailsSummary } from "./details-summary.js";
+//#region src/components/details/index.ts
 /**
- * Details component, contains `Details.Summary` and `Details.Content` components.
- *
- * @example
- * <Details>
- *  <Details.Summary>Header</Details.Summary>
- *  <Details.Content>Content</Details.Content>
- * </Details>
- */
+* Details component, contains `Details.Summary` and `Details.Content` components.
+*
+* @example
+* <Details>
+*  <Details.Summary>Header</Details.Summary>
+*  <Details.Content>Content</Details.Content>
+* </Details>
+*/
 const DetailsComponent = Object.assign(Details, {
-    Summary: DetailsSummary,
-    Content: DetailsContent,
+	Summary: DetailsSummary,
+	Content: DetailsContent
 });
-DetailsComponent.Summary.displayName = 'Details.Summary';
-DetailsComponent.Content.displayName = 'Details.Content';
-
+DetailsComponent.Summary.displayName = "Details.Summary";
+DetailsComponent.Content.displayName = "Details.Content";
+//#endregion
 export { DetailsComponent as Details, DetailsContent, DetailsSummary };

package/dist/esm/components/dialog/dialog-block.d.ts

@@ -0,0 +1,35 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/dialog/dialog-block.d.ts
+type DialogBlockProps = {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * DialogBlock component, used to separate content in a Dialog.
+ *
+ * @example
+ * <Dialog>
+ *   <Dialog.Block>
+ *     Header
+ *   </Dialog.Block>
+ *   <Dialog.Block>
+ *     Content
+ *   </Dialog.Block>
+ *   <Dialog.Block>
+ *     Footer
+ *   </Dialog.Block>
+ * </Dialog>
+ */
+declare const DialogBlock: import("react").ForwardRefExoticComponent<{
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DialogBlock, DialogBlockProps };

package/dist/esm/components/dialog/dialog-block.js

@@ -1,28 +1,31 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import cl from 'clsx/lite';
-import { forwardRef } from 'react';
-
+import cl from "clsx/lite";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/dialog/dialog-block.tsx
 /**
- * DialogBlock component, used to separate content in a Dialog.
- *
- * @example
- * <Dialog>
- *   <Dialog.Block>
- *     Header
- *   </Dialog.Block>
- *   <Dialog.Block>
- *     Content
- *   </Dialog.Block>
- *   <Dialog.Block>
- *     Footer
- *   </Dialog.Block>
- * </Dialog>
- */
+* DialogBlock component, used to separate content in a Dialog.
+*
+* @example
+* <Dialog>
+*   <Dialog.Block>
+*     Header
+*   </Dialog.Block>
+*   <Dialog.Block>
+*     Content
+*   </Dialog.Block>
+*   <Dialog.Block>
+*     Footer
+*   </Dialog.Block>
+* </Dialog>
+*/
 const DialogBlock = forwardRef(function DialogBlock({ asChild, className, ...rest }, ref) {
-    const Component = asChild ? Slot : 'div';
-    return (jsx(Component, { className: cl('ds-dialog__block', className), ref: ref, ...rest }));
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		className: cl("ds-dialog__block", className),
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { DialogBlock };

package/dist/esm/components/dialog/dialog-trigger-context.d.ts

@@ -0,0 +1,23 @@
+
+import { ReactNode } from "react";
+//#region src/components/dialog/dialog-trigger-context.d.ts
+type DialogTriggerContextProps = {
+  children: ReactNode;
+};
+/**
+ * DialogTriggerContext component, used to provide a context for a dialog trigger.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     Content
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+declare const DialogTriggerContext: {
+  (rest: DialogTriggerContextProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { DialogTriggerContext, DialogTriggerContextProps };

package/dist/esm/components/dialog/dialog-trigger-context.js

@@ -1,25 +1,26 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useRef } from 'react';
-
-const Context = createContext({
-    current: null,
-});
+import { createContext, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/dialog/dialog-trigger-context.tsx
+const Context = createContext({ current: null });
 /**
- * DialogTriggerContext component, used to provide a context for a dialog trigger.
- *
- * @example
- * <Dialog.TriggerContext>
- *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
- *   <Dialog>
- *     Content
- *   </Dialog>
- * </Dialog.TriggerContext>
- */
+* DialogTriggerContext component, used to provide a context for a dialog trigger.
+*
+* @example
+* <Dialog.TriggerContext>
+*   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+*   <Dialog>
+*     Content
+*   </Dialog>
+* </Dialog.TriggerContext>
+*/
 const DialogTriggerContext = (rest) => {
-    const contextRef = useRef(null);
-    return jsx(Context.Provider, { value: contextRef, ...rest });
+	const contextRef = useRef(null);
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: contextRef,
+		...rest
+	});
 };
-DialogTriggerContext.displayName = 'DialogTriggerContext';
-
+DialogTriggerContext.displayName = "DialogTriggerContext";
+//#endregion
 export { Context, DialogTriggerContext };