@digdir/designsystemet-react 1.19.1 → 1.20.1

package/dist/esm/components/suggestion/suggestion-list.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 { HTMLAttributes } from "react";
+//#region src/components/suggestion/suggestion-list.d.ts
+type SuggestionListProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDataListElement>, {
+  /**
+   * The screen reader announcement for singular Suggestion, where %d is the number of Suggestions
+   * @default '%d forslag'
+   */
+  singular?: string;
+  /**
+   * The screen reader announcement for plural Suggestions, where %d is the number of Suggestions
+   * @default '%d forslag'
+   */
+  plural?: string;
+  /**
+   * Whether to enable auto placement.
+   * @default true
+   */
+  autoPlacement?: boolean;
+}>;
+/**
+ * Component that provides a Suggestion list.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+declare const SuggestionList: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDataListElement>, "autoPlacement" | "singular" | "plural"> & {
+  /**
+   * The screen reader announcement for singular Suggestion, where %d is the number of Suggestions
+   * @default '%d forslag'
+   */
+  singular?: string;
+  /**
+   * The screen reader announcement for plural Suggestions, where %d is the number of Suggestions
+   * @default '%d forslag'
+   */
+  plural?: string;
+  /**
+   * Whether to enable auto placement.
+   * @default true
+   */
+  autoPlacement?: boolean;
+} & import("react").RefAttributes<HTMLDataListElement>>;
+//#endregion
+export { SuggestionList, SuggestionListProps };

package/dist/esm/components/suggestion/suggestion-list.js

@@ -1,26 +1,34 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useEffect } from 'react';
-import '@digdir/designsystemet-web';
-import { SuggestionContext } from './suggestion.js';
-
+import { SuggestionContext } from "./suggestion.js";
+import "@digdir/designsystemet-web";
+import { forwardRef, useContext, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/suggestion/suggestion-list.tsx
 /**
- * Component that provides a Suggestion list.
- *
- * Place as a descendant of `Suggestion`
- *
- * @example
- * <Suggestion>
- *   <Suggestion.Input />
- *   <Suggestion.List />
- * </Suggestion>
- */
-const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, autoPlacement = true, ...rest }, ref) {
-    const { handleFilter } = useContext(SuggestionContext);
-    useEffect(handleFilter); // Must run on every render
-    return (jsx("u-datalist", { class: className, "data-nofilter": true, "data-sr-plural": plural, "data-sr-singular": singular, popover: 'manual', ref: ref, role: 'listbox' // Is also set by <ds-suggestion> but nice to have to please tests
-        , suppressHydrationWarning // Since <u-datalist> adds attributes
-        : true, ...rest }));
+* Component that provides a Suggestion list.
+*
+* Place as a descendant of `Suggestion`
+*
+* @example
+* <Suggestion>
+*   <Suggestion.Input />
+*   <Suggestion.List />
+* </Suggestion>
+*/
+const SuggestionList = forwardRef(function SuggestionList({ singular = "%d forslag", plural = "%d forslag", className, id, autoPlacement = true, ...rest }, ref) {
+	const { handleFilter } = useContext(SuggestionContext);
+	useEffect(handleFilter);
+	return /* @__PURE__ */ jsx("u-datalist", {
+		class: className,
+		"data-nofilter": true,
+		"data-sr-plural": plural,
+		"data-sr-singular": singular,
+		popover: "manual",
+		ref,
+		role: "listbox",
+		suppressHydrationWarning: true,
+		...rest
+	});
 });
-
+//#endregion
 export { SuggestionList };

package/dist/esm/components/suggestion/suggestion-option.d.ts

@@ -0,0 +1,21 @@
+
+import { DefaultProps } from "../../types.js";
+import "@digdir/designsystemet-web";
+import { OptionHTMLAttributes } from "react";
+//#region src/components/suggestion/suggestion-option.d.ts
+type SuggestionOptionProps = OptionHTMLAttributes<HTMLOptionElement> & DefaultProps;
+/**
+ * A component for rendering individual options in the Suggestion list.
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List>
+ *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+ *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+ *   </Suggestion.List>
+ * </Suggestion>
+ */
+declare const SuggestionOption: import("react").ForwardRefExoticComponent<OptionHTMLAttributes<HTMLOptionElement> & DefaultProps & import("react").RefAttributes<HTMLOptionElement>>;
+//#endregion
+export { SuggestionOption, SuggestionOptionProps };

package/dist/esm/components/suggestion/suggestion-option.js

@@ -1,23 +1,27 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import '@digdir/designsystemet-web';
-
+import "@digdir/designsystemet-web";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/suggestion/suggestion-option.tsx
 /**
- * A component for rendering individual options in the Suggestion list.
- *
- * @example
- * <Suggestion>
- *   <Suggestion.Input />
- *   <Suggestion.List>
- *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
- *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
- *   </Suggestion.List>
- * </Suggestion>
- */
+* A component for rendering individual options in the Suggestion list.
+*
+* @example
+* <Suggestion>
+*   <Suggestion.Input />
+*   <Suggestion.List>
+*     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+*     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+*   </Suggestion.List>
+* </Suggestion>
+*/
 const SuggestionOption = forwardRef(function SuggestionOption({ className, ...rest }, ref) {
-    return (jsx("u-option", { class: className, ref: ref, suppressHydrationWarning // Since <u-option> adds attributes
-        : true, ...rest }));
+	return /* @__PURE__ */ jsx("u-option", {
+		class: className,
+		ref,
+		suppressHydrationWarning: true,
+		...rest
+	});
 });
-
+//#endregion
 export { SuggestionOption };

package/dist/esm/components/suggestion/suggestion-toggle.d.ts

@@ -0,0 +1,35 @@
+
+import { DefaultProps } from "../../types.js";
+import { MergeRight } from "../../utilities/types.js";
+import "../../utilities/index.js";
+import { ButtonHTMLAttributes } from "react";
+//#region src/components/suggestion/suggestion-toggle.d.ts
+type SuggestionToggleProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, {
+  /**
+   * Aria label for the toggle button
+   * @default 'Valg'
+   */
+  'aria-label'?: string;
+}>;
+/**
+ * Component that provides a toggle button for the Suggestion list.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.Toggle />
+ *   <Suggestion.Clear />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+declare const SuggestionToggle: import("react").ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & {
+  /**
+   * Aria label for the toggle button
+   * @default 'Valg'
+   */
+  'aria-label'?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { SuggestionToggle, SuggestionToggleProps };

package/dist/esm/components/suggestion/suggestion-toggle.js

@@ -1,23 +1,29 @@
 '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/suggestion/suggestion-toggle.tsx
 /**
- * Component that provides a toggle button for the Suggestion list.
- *
- * Place as a descendant of `Suggestion`
- *
- * @example
- * <Suggestion>
- *   <Suggestion.Input />
- *   <Suggestion.Toggle />
- *   <Suggestion.Clear />
- *   <Suggestion.List />
- * </Suggestion>
- */
-const SuggestionToggle = forwardRef(function SuggestionToggle({ 'aria-label': label = 'Valg', ...rest }, ref) {
-    return (jsx("button", { "aria-expanded": 'false', "aria-label": label, ref: ref, suppressHydrationWarning // Since <ds-suggestion> adds attributes
-        : true, type: 'button', ...rest }));
+* Component that provides a toggle button for the Suggestion list.
+*
+* Place as a descendant of `Suggestion`
+*
+* @example
+* <Suggestion>
+*   <Suggestion.Input />
+*   <Suggestion.Toggle />
+*   <Suggestion.Clear />
+*   <Suggestion.List />
+* </Suggestion>
+*/
+const SuggestionToggle = forwardRef(function SuggestionToggle({ "aria-label": label = "Valg", ...rest }, ref) {
+	return /* @__PURE__ */ jsx("button", {
+		"aria-expanded": "false",
+		"aria-label": label,
+		ref,
+		suppressHydrationWarning: true,
+		type: "button",
+		...rest
+	});
 });
-
+//#endregion
 export { SuggestionToggle };

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

@@ -0,0 +1,113 @@
+
+import { DSSuggestionElement } from "@digdir/designsystemet-web";
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/suggestion/suggestion.d.ts
+type SuggestionItem = {
+  label: string;
+  value: string;
+};
+type EventBeforeMatch = Omit<CustomEvent<HTMLOptionElement | undefined>, 'currentTarget'> & {
+  currentTarget: DSSuggestionElement;
+};
+type Filter = (args: {
+  /**
+   * Index of the `option`
+   */
+  index: number;
+  /**
+   * Label content of the `option`
+   */
+  label: string;
+  /**
+   * Text content of the `option`
+   */
+  text: string;
+  /**
+   * Value of the `option`
+   */
+  value: string;
+  /**
+   * The DOM element of the `option`
+   */
+  optionElement: HTMLOptionElement;
+  /**
+   * The DOM element of the `input`
+   */
+  input: HTMLInputElement;
+}) => boolean;
+type SuggestionValue<T extends {
+  multiple: boolean;
+}> = T['multiple'] extends true ? Array<string | SuggestionItem> : string | SuggestionItem;
+type SuggestionBaseProps = {
+  /**
+   * Filter options; boolean or a custom callback.
+   *
+   * See {@link Filter} for the callback signature.
+   *
+   * @default true
+   */
+  filter?: boolean | Filter;
+  /**
+   * Allows the user to create new items
+   *
+   * @default false
+   */
+  creatable?: boolean;
+  /**
+   * Callback when matching input value against options
+   */
+  onBeforeMatch?: (event: EventBeforeMatch) => void;
+  /**
+   * The name of the associated form control
+   *
+   * @default undefined
+   */
+  name?: string;
+  /**
+   * Change how the selected options are rendered inside the `Chip`.
+   *
+   * @default ({ label }) => label
+   */
+  renderSelected?: (args: {
+    label: string;
+    value: string;
+  }) => ReactNode;
+} & Omit<HTMLAttributes<DSSuggestionElement>, 'defaultValue'>;
+type SuggestionValueProps<T extends {
+  multiple: boolean;
+}> = {
+  /**
+   * Allows the user to select multiple items
+   *
+   * @default false
+   */
+  multiple?: T['multiple'];
+  /**
+   * The selected item of the Suggestion.
+   *
+   * If `label` and `value` are the same, each item can be a `string`. Otherwise, each item must be a `SuggestionItem`.
+   *
+   * Using this makes the component controlled and it must be used in combination with `onSelectedChange`.
+   */
+  selected?: SuggestionValue<T> | null;
+  /**
+   * Default selected item when uncontrolled
+   */
+  defaultSelected?: SuggestionValue<T>;
+  /**
+   * Callback when selected items changes
+   */
+  onSelectedChange?: (value: T['multiple'] extends true ? SuggestionItem[] : SuggestionItem | null) => void;
+};
+type SuggestionSingleProps = SuggestionBaseProps & SuggestionValueProps<{
+  multiple: false;
+}>;
+type SuggestionMultipleProps = SuggestionBaseProps & SuggestionValueProps<{
+  multiple: true;
+}> & {
+  multiple: true;
+};
+type SuggestionProps = SuggestionSingleProps | SuggestionMultipleProps;
+declare const Suggestion: import("react").ForwardRefExoticComponent<SuggestionProps & import("react").RefAttributes<DSSuggestionElement>>;
+//#endregion
+export { Suggestion, SuggestionItem, SuggestionMultipleProps, SuggestionProps, SuggestionSingleProps };

package/dist/esm/components/suggestion/suggestion.js

@@ -1,94 +1,111 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { forwardRef, useRef, useId, useState, useEffect, useCallback, createContext } from 'react';
-import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
-import '@digdir/designsystemet-web';
-
-const text = (el) => el.textContent?.trim() || '';
-const sanitizeItems = (values = []) => typeof values === 'string'
-    ? [{ label: values, value: values }]
-    : !Array.isArray(values)
-        ? [values]
-        : values.map((value) => typeof value === 'string' ? { label: value, value } : value);
+import { useMergeRefs } from "../../utilities/hooks/use-merge-refs/use-merge-refs.js";
+import "../../utilities/hooks/index.js";
+import cl from "clsx/lite";
+import { createContext, forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/suggestion/suggestion.tsx
+const text = (el) => el.textContent?.trim() || "";
+const sanitizeItems = (values = []) => typeof values === "string" ? [{
+	label: values,
+	value: values
+}] : !Array.isArray(values) ? [values] : values.map((value) => typeof value === "string" ? {
+	label: value,
+	value
+} : value);
 const nextItems = (data, prev, multiple) => {
-    const item = { label: text(data), value: data.value };
-    if (!multiple)
-        return data.isConnected ? undefined : item;
-    return data.isConnected
-        ? sanitizeItems(prev).filter(({ value }) => value !== item.value)
-        : [...sanitizeItems(prev), item];
+	const item = {
+		label: text(data),
+		value: data.value
+	};
+	if (!multiple) return data.isConnected ? void 0 : item;
+	return data.isConnected ? sanitizeItems(prev).filter(({ value }) => value !== item.value) : [...sanitizeItems(prev), item];
 };
 const defaultFilter = ({ label, input }) => label.toLowerCase().includes(input.value.trim().toLowerCase());
 const Suggestion = forwardRef(function Suggestion({ children, className, creatable = false, defaultSelected, filter = true, multiple = false, name, onBeforeMatch, onSelectedChange, renderSelected = ({ label }) => label, selected, ...rest }, ref) {
-    const dsSuggestionRef = useRef(null);
-    const genId = useId();
-    const selectId = rest.id ? `${rest.id}-select` : genId;
-    const isControlled = selected !== undefined;
-    const mergedRefs = useMergeRefs([ref, dsSuggestionRef]);
-    const [defaultItems, setDefaultItems] = useState(sanitizeItems(defaultSelected));
-    const selectedItems = selected ? sanitizeItems(selected) : defaultItems;
-    const onSelectedChangeRef = useRef(onSelectedChange);
-    const selectedItemsRef = useRef(selectedItems);
-    // Keep the ref updated with the latest callback
-    useEffect(() => {
-        onSelectedChangeRef.current = onSelectedChange;
-    }, [onSelectedChange]);
-    useEffect(() => {
-        selectedItemsRef.current = selectedItems;
-    }, [selectedItems]);
-    /**
-     * Listerners and handling of adding/removing
-     */
-    useEffect(() => {
-        const combobox = dsSuggestionRef.current;
-        const beforeChange = (event) => {
-            event.preventDefault();
-            const multiple = combobox?.multiple;
-            const input = combobox?.control;
-            const data = event.detail;
-            const nextItem = nextItems(data, selectedItemsRef.current, multiple);
-            if (!multiple && input)
-                input.value = data?.textContent || ''; // Sync input value for single selection
-            onSelectedChangeRef.current?.(nextItem || null);
-            if (!isControlled)
-                setDefaultItems(sanitizeItems(nextItem));
-        };
-        combobox?.addEventListener('comboboxbeforeselect', beforeChange);
-        return () => combobox?.removeEventListener('comboboxbeforeselect', beforeChange);
-    }, [isControlled]);
-    // Before match event listener
-    useEffect(() => {
-        const combobox = dsSuggestionRef.current;
-        const beforeMatch = (e) => onBeforeMatch?.(e);
-        combobox?.addEventListener('comboboxbeforematch', beforeMatch);
-        return () => combobox?.removeEventListener('comboboxbeforematch', beforeMatch);
-    }, [onBeforeMatch]);
-    const handleFilter = useCallback(() => {
-        const { control: input, options = [] } = dsSuggestionRef?.current || {};
-        const filterFn = filter === true ? defaultFilter : filter;
-        let disabled = 0;
-        let index = 0;
-        for (const option of Array.from(options))
-            if (!option.hasAttribute('data-empty')) {
-                if (filterFn && input)
-                    option.disabled =
-                        !filterFn({
-                            index,
-                            input,
-                            label: option.label,
-                            optionElement: option,
-                            text: option.text,
-                            value: option.value,
-                        }) && Boolean(++disabled);
-                index++; // Increment index for each <option>
-            }
-    }, [filter]);
-    return (jsx(SuggestionContext.Provider, { value: { handleFilter, dsSuggestionRef }, children: jsxs("ds-suggestion", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, suppressHydrationWarning // Since <ds-suggestion> adds attributes
-            : true, ...rest, children: [selectedItems.map((item) => (jsx("data", { value: item.value, children: renderSelected(item) }, item.value))), children, !!name && (jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
+	const dsSuggestionRef = useRef(null);
+	const genId = useId();
+	const selectId = rest.id ? `${rest.id}-select` : genId;
+	const isControlled = selected !== void 0;
+	const mergedRefs = useMergeRefs([ref, dsSuggestionRef]);
+	const [defaultItems, setDefaultItems] = useState(sanitizeItems(defaultSelected));
+	const selectedItems = selected ? sanitizeItems(selected) : defaultItems;
+	const onSelectedChangeRef = useRef(onSelectedChange);
+	const selectedItemsRef = useRef(selectedItems);
+	useEffect(() => {
+		onSelectedChangeRef.current = onSelectedChange;
+	}, [onSelectedChange]);
+	useEffect(() => {
+		selectedItemsRef.current = selectedItems;
+	}, [selectedItems]);
+	/**
+	* Listerners and handling of adding/removing
+	*/
+	useEffect(() => {
+		const combobox = dsSuggestionRef.current;
+		const beforeChange = (event) => {
+			event.preventDefault();
+			const multiple = combobox?.multiple;
+			const data = event.detail;
+			const nextItem = nextItems(data, selectedItemsRef.current, multiple);
+			onSelectedChangeRef.current?.(nextItem || null);
+			if (!isControlled) setDefaultItems(sanitizeItems(nextItem));
+		};
+		combobox?.addEventListener("comboboxbeforeselect", beforeChange);
+		return () => combobox?.removeEventListener("comboboxbeforeselect", beforeChange);
+	}, [isControlled]);
+	useEffect(() => {
+		const combobox = dsSuggestionRef.current;
+		const beforeMatch = (e) => onBeforeMatch?.(e);
+		combobox?.addEventListener("comboboxbeforematch", beforeMatch);
+		return () => combobox?.removeEventListener("comboboxbeforematch", beforeMatch);
+	}, [onBeforeMatch]);
+	const handleFilter = useCallback(() => {
+		const { control: input, options = [] } = dsSuggestionRef?.current || {};
+		const filterFn = filter === true ? defaultFilter : filter;
+		let disabled = 0;
+		let index = 0;
+		for (const option of Array.from(options)) if (!option.hasAttribute("data-empty")) {
+			if (filterFn && input) option.disabled = !filterFn({
+				index,
+				input,
+				label: option.label,
+				optionElement: option,
+				text: option.text,
+				value: option.value
+			}) && Boolean(++disabled);
+			index++;
+		}
+	}, [filter]);
+	return /* @__PURE__ */ jsx(SuggestionContext.Provider, {
+		value: {
+			handleFilter,
+			dsSuggestionRef
+		},
+		children: /* @__PURE__ */ jsxs("ds-suggestion", {
+			"data-multiple": multiple || void 0,
+			"data-creatable": creatable || void 0,
+			class: cl("ds-suggestion", className),
+			ref: mergedRefs,
+			suppressHydrationWarning: true,
+			...rest,
+			children: [
+				selectedItems.map((item) => /* @__PURE__ */ jsx("data", {
+					value: item.value,
+					suppressHydrationWarning: true,
+					children: renderSelected(item)
+				}, item.value)),
+				children,
+				!!name && /* @__PURE__ */ jsx("select", {
+					name,
+					multiple: true,
+					hidden: true,
+					id: selectId
+				})
+			]
+		})
+	});
 });
-const SuggestionContext = createContext({
-    handleFilter: () => undefined,
-});
-
+const SuggestionContext = createContext({ handleFilter: () => void 0 });
+//#endregion
 export { Suggestion, SuggestionContext };

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

@@ -0,0 +1,45 @@
+
+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 { InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/switch/switch.d.ts
+type SwitchProps = MergeRight<DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, {
+  /**
+   * Optional aria-label
+   */
+  'aria-label'?: string;
+  /**
+   * Switch label
+   */
+  label?: ReactNode;
+  /**
+   * Description for field
+   */
+  description?: ReactNode;
+  /**
+   * Value of the `input` element
+   */
+  value?: InputProps['value'];
+  /**
+   * Position of switch
+   * @default start
+   */
+  position?: FieldProps['position'];
+  /**
+   * If outline, the switch will have a border.
+   */
+  variant?: 'outline';
+} & LabelRequired>;
+/**
+ * Switch used to toggle options.
+ *
+ * @example
+ * <Switch label="I agree" value="agree" />
+ */
+declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Switch, SwitchProps };