@digdir/designsystemet-react 1.20.0 → 1.21.0

package/dist/esm/components/skip-link/skip-link.d.ts

@@ -0,0 +1,35 @@
+
+import { DefaultProps } from "../../types.js";
+import { MergeRight } from "../../utilities/types.js";
+import "../../utilities/index.js";
+import { AnchorHTMLAttributes, ReactNode } from "react";
+//#region src/components/skip-link/skip-link.d.ts
+type SkipLinkProps = MergeRight<DefaultProps & AnchorHTMLAttributes<HTMLAnchorElement>, {
+  /**
+   * The content to display inside the skiplink.
+   */
+  children: ReactNode;
+  /**
+   * Href of an element in the DOM the skiplink should skip to. E.g #main-content
+   */
+  href: string;
+}>;
+/**
+ * SkipLink component, used to display a skip link within the page.
+ * Place it at the top of the page to allow users to skip to the main content.
+ *
+ * @example
+ * <SkipLink href='#main-content'>Skip to main content</SkipLink>
+ */
+declare const SkipLink: import("react").ForwardRefExoticComponent<Omit<DefaultProps & AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "href"> & {
+  /**
+   * The content to display inside the skiplink.
+   */
+  children: ReactNode;
+  /**
+   * Href of an element in the DOM the skiplink should skip to. E.g #main-content
+   */
+  href: string;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { SkipLink, SkipLinkProps };

package/dist/esm/components/skip-link/skip-link.js

@@ -1,17 +1,22 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { forwardRef } from 'react';
-
+import cl from "clsx/lite";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/skip-link/skip-link.tsx
 /**
- * SkipLink component, used to display a skip link within the page.
- * Place it at the top of the page to allow users to skip to the main content.
- *
- * @example
- * <SkipLink href='#main-content'>Skip to main content</SkipLink>
- */
+* SkipLink component, used to display a skip link within the page.
+* Place it at the top of the page to allow users to skip to the main content.
+*
+* @example
+* <SkipLink href='#main-content'>Skip to main content</SkipLink>
+*/
 const SkipLink = forwardRef(function SkipLink({ children, className, ...rest }, ref) {
-    return (jsx("a", { className: cl('ds-skip-link', className), ...rest, ref: ref, children: children }));
+	return /* @__PURE__ */ jsx("a", {
+		className: cl("ds-skip-link", className),
+		...rest,
+		ref,
+		children
+	});
 });
-
+//#endregion
 export { SkipLink };

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

@@ -0,0 +1,27 @@
+
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/spinner/spinner.d.ts
+type SpinnerProps = {
+  /**
+   * Accessibile label
+   */
+  'aria-label'?: string;
+  /**
+   * Spinner size
+   */
+  'data-size'?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+} & ComponentPropsWithoutRef<'svg'> & ({
+  'aria-label': string;
+} | {
+  'aria-label'?: string;
+  'aria-hidden': true | 'true';
+});
+/**
+ * Spinner component used for indicating busy or indeterminate loading.
+ *
+ * @example
+ * <Spinner aria-label='Loading users...' />
+ */
+declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<SVGSVGElement>>;
+//#endregion
+export { Spinner, SpinnerProps };

package/dist/esm/components/spinner/spinner.js

@@ -1,24 +1,46 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { forwardRef } from 'react';
-import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
-import '@digdir/designsystemet-web';
-import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
-import '../../utilities/roving-focus/roving-focus-item.js';
-import '../../utilities/roving-focus/roving-focus-root.js';
-
+import { useMergeRefs } from "../../utilities/hooks/use-merge-refs/use-merge-refs.js";
+import { useSynchronizedAnimation } from "../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js";
+import "../../utilities/hooks/index.js";
+import "../../utilities/index.js";
+import cl from "clsx/lite";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/spinner/spinner.tsx
 /**
- * Spinner component used for indicating busy or indeterminate loading.
- *
- * @example
- * <Spinner aria-label='Loading users...' />
- */
-const Spinner = forwardRef(function Spinner({ 'aria-label': ariaLabel, className, ...rest }, ref) {
-    const svgRef = useSynchronizedAnimation('ds-spinner-rotate-animation');
-    const strokeRef = useSynchronizedAnimation('ds-spinner-stroke-animation');
-    const mergedRefs = useMergeRefs([svgRef, ref]);
-    return (jsxs("svg", { "aria-label": ariaLabel, className: cl('ds-spinner', className), ref: mergedRefs, role: 'img', viewBox: '0 0 50 50', ...rest, children: [jsx("circle", { className: cl('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsx("circle", { className: cl(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
+* Spinner component used for indicating busy or indeterminate loading.
+*
+* @example
+* <Spinner aria-label='Loading users...' />
+*/
+const Spinner = forwardRef(function Spinner({ "aria-label": ariaLabel, className, ...rest }, ref) {
+	const svgRef = useSynchronizedAnimation("ds-spinner-rotate-animation");
+	const strokeRef = useSynchronizedAnimation("ds-spinner-stroke-animation");
+	const mergedRefs = useMergeRefs([svgRef, ref]);
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-label": ariaLabel,
+		className: cl("ds-spinner", className),
+		ref: mergedRefs,
+		role: "img",
+		viewBox: "0 0 50 50",
+		...rest,
+		children: [/* @__PURE__ */ jsx("circle", {
+			className: cl("ds-spinner__background"),
+			cx: "25",
+			cy: "25",
+			r: "20",
+			fill: "none",
+			strokeWidth: "5"
+		}), /* @__PURE__ */ jsx("circle", {
+			className: cl(`ds-spinner__circle`),
+			cx: "25",
+			cy: "25",
+			r: "20",
+			fill: "none",
+			strokeWidth: "5",
+			ref: strokeRef
+		})]
+	});
 });
-
+//#endregion
 export { Spinner };

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

@@ -0,0 +1,111 @@
+
+import { Suggestion as Suggestion$1, SuggestionItem, SuggestionMultipleProps, SuggestionProps, SuggestionSingleProps } from "./suggestion.js";
+import { SuggestionClear, SuggestionClearProps } from "./suggestion-clear.js";
+import { SuggestionEmpty, SuggestionEmptyProps } from "./suggestion-empty.js";
+import { SuggestionInput, SuggestionInputProps } from "./suggestion-input.js";
+import { SuggestionList, SuggestionListProps } from "./suggestion-list.js";
+import { SuggestionOption, SuggestionOptionProps } from "./suggestion-option.js";
+import { SuggestionToggle, SuggestionToggleProps } from "./suggestion-toggle.js";
+//#region src/components/suggestion/index.d.ts
+type Suggestion = typeof Suggestion$1 & {
+  /**
+   * Component that provides a Suggestion list.
+   *
+   * Place as a descendant of `Suggestion`
+   *
+   * @example
+   * <Suggestion>
+   *   <Suggestion.Input />
+   *   <Suggestion.Toggle />
+   *   <Suggestion.Clear />
+   *   <Suggestion.List />
+   * </Suggestion>
+   */
+  List: typeof SuggestionList;
+  /**
+   * Component that provides an input field for the Suggestion list.
+   *
+   * Place as a descendant of `Suggestion`
+   *
+   * @example
+   * <Suggestion>
+   *   <Suggestion.Input />
+   *   <Suggestion.Toggle />
+   *   <Suggestion.Clear />
+   *   <Suggestion.List />
+   * </Suggestion>
+   */
+  Input: typeof SuggestionInput;
+  /**
+   * Component that provides an empty Suggestion list.
+   *
+   * Place as a descendant of `Suggestion.List`
+   *
+   * @example
+   * <Suggestion.List>
+   *   <Suggestion.Empty>Tomt</Suggestion.Empty>
+   * </Suggestion.List>
+   */
+  Empty: typeof SuggestionEmpty;
+  /**
+   * A component for rendering individual options in the Suggestion list.
+   *
+   * @example
+   * <Suggestion>
+   *   <Suggestion.Input />
+   *   <Suggestion.Toggle />
+   *   <Suggestion.Clear />
+   *   <Suggestion.List>
+   *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+   *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+   *   </Suggestion.List>
+   * </Suggestion>
+   */
+  Option: typeof SuggestionOption;
+  /**
+   * Component that provides a clear button for the Suggestion input.
+   *
+   * Place as a descendant of `Suggestion`
+   *
+   * @example
+   * <Suggestion>
+   *   <Suggestion.Input />
+   *   <Suggestion.Toggle />
+   *   <Suggestion.Clear />
+   *   <Suggestion.List />
+   * </Suggestion>
+   */
+  Clear: typeof SuggestionClear;
+  /**
+   * 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>
+   */
+  Toggle: typeof SuggestionToggle;
+};
+/**
+ * A component that provides a suggestion list for an input field.
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.Toggle />
+ *   <Suggestion.Clear />
+ *   <Suggestion.List>
+ *     <Suggestion.Empty>Tomt</Suggestion.Empty>
+ *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+ *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+ *   </Suggestion.List>
+ * </Suggestion>
+ */
+declare const EXPERIMENTAL_Suggestion: Suggestion;
+//#endregion
+export { EXPERIMENTAL_Suggestion, SuggestionClear as EXPERIMENTAL_SuggestionClear, SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty, SuggestionInput as EXPERIMENTAL_SuggestionInput, SuggestionList as EXPERIMENTAL_SuggestionList, SuggestionOption as EXPERIMENTAL_SuggestionOption, SuggestionToggle as EXPERIMENTAL_SuggestionToggle, type SuggestionClearProps, type SuggestionEmptyProps, type SuggestionInputProps, type SuggestionItem, type SuggestionListProps, type SuggestionMultipleProps, type SuggestionOptionProps, type SuggestionProps, type SuggestionSingleProps, type SuggestionToggleProps };

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

@@ -1,41 +1,41 @@
 'use client';
-import { Suggestion } from './suggestion.js';
-import { SuggestionClear } from './suggestion-clear.js';
-import { SuggestionEmpty } from './suggestion-empty.js';
-import { SuggestionInput } from './suggestion-input.js';
-import { SuggestionList } from './suggestion-list.js';
-import { SuggestionOption } from './suggestion-option.js';
-import { SuggestionToggle } from './suggestion-toggle.js';
-
+import { Suggestion } from "./suggestion.js";
+import { SuggestionClear } from "./suggestion-clear.js";
+import { SuggestionEmpty } from "./suggestion-empty.js";
+import { SuggestionInput } from "./suggestion-input.js";
+import { SuggestionList } from "./suggestion-list.js";
+import { SuggestionOption } from "./suggestion-option.js";
+import { SuggestionToggle } from "./suggestion-toggle.js";
+//#region src/components/suggestion/index.ts
 /**
- * A component that provides a suggestion list for an input field.
- *
- * @example
- * <Suggestion>
- *   <Suggestion.Input />
- *   <Suggestion.Toggle />
- *   <Suggestion.Clear />
- *   <Suggestion.List>
- *     <Suggestion.Empty>Tomt</Suggestion.Empty>
- *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
- *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
- *   </Suggestion.List>
- * </Suggestion>
- */
+* A component that provides a suggestion list for an input field.
+*
+* @example
+* <Suggestion>
+*   <Suggestion.Input />
+*   <Suggestion.Toggle />
+*   <Suggestion.Clear />
+*   <Suggestion.List>
+*     <Suggestion.Empty>Tomt</Suggestion.Empty>
+*     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+*     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+*   </Suggestion.List>
+* </Suggestion>
+*/
 const EXPERIMENTAL_Suggestion = Object.assign(Suggestion, {
-    List: SuggestionList,
-    Input: SuggestionInput,
-    Empty: SuggestionEmpty,
-    Option: SuggestionOption,
-    Toggle: SuggestionToggle,
-    Clear: SuggestionClear,
+	List: SuggestionList,
+	Input: SuggestionInput,
+	Empty: SuggestionEmpty,
+	Option: SuggestionOption,
+	Toggle: SuggestionToggle,
+	Clear: SuggestionClear
 });
-EXPERIMENTAL_Suggestion.displayName = 'EXPERIMENTAL_Suggestion';
-EXPERIMENTAL_Suggestion.List.displayName = 'EXPERIMENTAL_Suggestion.List';
-EXPERIMENTAL_Suggestion.Input.displayName = 'EXPERIMENTAL_Suggestion.Input';
-EXPERIMENTAL_Suggestion.Empty.displayName = 'EXPERIMENTAL_Suggestion.Empty';
-EXPERIMENTAL_Suggestion.Option.displayName = 'EXPERIMENTAL_Suggestion.Option';
-EXPERIMENTAL_Suggestion.Toggle.displayName = 'EXPERIMENTAL_Suggestion.Toggle';
-EXPERIMENTAL_Suggestion.Clear.displayName = 'EXPERIMENTAL_Suggestion.Clear';
-
+EXPERIMENTAL_Suggestion.displayName = "EXPERIMENTAL_Suggestion";
+EXPERIMENTAL_Suggestion.List.displayName = "EXPERIMENTAL_Suggestion.List";
+EXPERIMENTAL_Suggestion.Input.displayName = "EXPERIMENTAL_Suggestion.Input";
+EXPERIMENTAL_Suggestion.Empty.displayName = "EXPERIMENTAL_Suggestion.Empty";
+EXPERIMENTAL_Suggestion.Option.displayName = "EXPERIMENTAL_Suggestion.Option";
+EXPERIMENTAL_Suggestion.Toggle.displayName = "EXPERIMENTAL_Suggestion.Toggle";
+EXPERIMENTAL_Suggestion.Clear.displayName = "EXPERIMENTAL_Suggestion.Clear";
+//#endregion
 export { EXPERIMENTAL_Suggestion, SuggestionClear as EXPERIMENTAL_SuggestionClear, SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty, SuggestionInput as EXPERIMENTAL_SuggestionInput, SuggestionList as EXPERIMENTAL_SuggestionList, SuggestionOption as EXPERIMENTAL_SuggestionOption, SuggestionToggle as EXPERIMENTAL_SuggestionToggle };

package/dist/esm/components/suggestion/suggestion-clear.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-clear.d.ts
+type SuggestionClearProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, {
+  /**
+   * Aria label for the clear button
+   * @default 'Tøm'
+   */
+  'aria-label'?: string;
+}>;
+/**
+ * Component that provides a clear button for the Suggestion input.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.Toggle />
+ *   <Suggestion.Clear />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+declare const SuggestionClear: import("react").ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & {
+  /**
+   * Aria label for the clear button
+   * @default 'Tøm'
+   */
+  'aria-label'?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { SuggestionClear, SuggestionClearProps };

package/dist/esm/components/suggestion/suggestion-clear.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-clear.tsx
 /**
- * Component that provides a clear button for the Suggestion input.
- *
- * Place as a descendant of `Suggestion`
- *
- * @example
- * <Suggestion>
- *   <Suggestion.Input />
- *   <Suggestion.Toggle />
- *   <Suggestion.Clear />
- *   <Suggestion.List />
- * </Suggestion>
- */
-const SuggestionClear = forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', ...rest }, ref) {
-    return (jsx("button", { "aria-label": label, hidden: true, ref: ref, suppressHydrationWarning // Since <ds-suggestion> adds attributes
-        : true, type: 'reset', ...rest }));
+* Component that provides a clear button for the Suggestion input.
+*
+* Place as a descendant of `Suggestion`
+*
+* @example
+* <Suggestion>
+*   <Suggestion.Input />
+*   <Suggestion.Toggle />
+*   <Suggestion.Clear />
+*   <Suggestion.List />
+* </Suggestion>
+*/
+const SuggestionClear = forwardRef(function SuggestionClear({ "aria-label": label = "Tøm", ...rest }, ref) {
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": label,
+		hidden: true,
+		ref,
+		suppressHydrationWarning: true,
+		type: "reset",
+		...rest
+	});
 });
-
+//#endregion
 export { SuggestionClear };

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

@@ -0,0 +1,31 @@
+
+import { DefaultProps } from "../../types.js";
+import "@digdir/designsystemet-web";
+import { OptionHTMLAttributes } from "react";
+//#region src/components/suggestion/suggestion-empty.d.ts
+type SuggestionEmptyProps = DefaultProps & OptionHTMLAttributes<HTMLOptionElement> & {
+  /**
+   * Optionally the text to display when the suggestion list is empty.
+   * If <Suggestion> has `data-creatable`, use `{value}` to replace with the current input value.
+   **/
+  'data-empty'?: string;
+};
+/**
+ * Component that provides an empty Suggestion list.
+ *
+ * Place as a descendant of `Suggestion.List`
+ *
+ * @example
+ * <Suggestion.List>
+ *   <Suggestion.Empty>Tomt</Suggestion.Empty>
+ * </Suggestion.List>
+ */
+declare const SuggestionEmpty: import("react").ForwardRefExoticComponent<DefaultProps & OptionHTMLAttributes<HTMLOptionElement> & {
+  /**
+   * Optionally the text to display when the suggestion list is empty.
+   * If <Suggestion> has `data-creatable`, use `{value}` to replace with the current input value.
+   **/
+  'data-empty'?: string;
+} & import("react").RefAttributes<HTMLOptionElement>>;
+//#endregion
+export { SuggestionEmpty, SuggestionEmptyProps };

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

@@ -1,21 +1,25 @@
 '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-empty.tsx
 /**
- * Component that provides an empty Suggestion list.
- *
- * Place as a descendant of `Suggestion.List`
- *
- * @example
- * <Suggestion.List>
- *   <Suggestion.Empty>Tomt</Suggestion.Empty>
- * </Suggestion.List>
- */
+* Component that provides an empty Suggestion list.
+*
+* Place as a descendant of `Suggestion.List`
+*
+* @example
+* <Suggestion.List>
+*   <Suggestion.Empty>Tomt</Suggestion.Empty>
+* </Suggestion.List>
+*/
 const SuggestionEmpty = forwardRef(function SuggestionEmpty(rest, ref) {
-    return (jsx("u-option", { "data-empty": true, ref: ref, suppressHydrationWarning // Since <u-option> adds attributes
-        : true, ...rest }));
+	return /* @__PURE__ */ jsx("u-option", {
+		"data-empty": true,
+		ref,
+		suppressHydrationWarning: true,
+		...rest
+	});
 });
-
+//#endregion
 export { SuggestionEmpty };

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

@@ -0,0 +1,30 @@
+
+import { InputProps } from "../input/input.js";
+//#region src/components/suggestion/suggestion-input.d.ts
+type SuggestionInputProps = Omit<InputProps, 'role' | 'data-indeterminate'>;
+declare global {
+  namespace React.JSX {
+    interface IntrinsicAttributes {
+      popovertarget?: string;
+    }
+  }
+  namespace React {
+    interface HTMLAttributes<T> {
+      popovertarget?: string;
+    }
+  }
+}
+/**
+ * Component that provides an input field for the Suggestion list.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+declare const SuggestionInput: import("react").ForwardRefExoticComponent<SuggestionInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+export { SuggestionInput, SuggestionInputProps };

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

@@ -1,33 +1,35 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useEffect } from 'react';
-import { Input } from '../input/input.js';
-import { SuggestionContext } from './suggestion.js';
-
+import { Input } from "../input/input.js";
+import { SuggestionContext } from "./suggestion.js";
+import { forwardRef, useContext, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/suggestion/suggestion-input.tsx
 /**
- * Component that provides an input field for the Suggestion list.
- *
- * Place as a descendant of `Suggestion`
- *
- * @example
- * <Suggestion>
- *   <Suggestion.Input />
- *   <Suggestion.List />
- * </Suggestion>
- */
+* Component that provides an input field for the Suggestion list.
+*
+* Place as a descendant of `Suggestion`
+*
+* @example
+* <Suggestion>
+*   <Suggestion.Input />
+*   <Suggestion.List />
+* </Suggestion>
+*/
 const SuggestionInput = forwardRef(function SuggestionList({ value, onInput, onChange, ...rest }, ref) {
-    const { handleFilter } = useContext(SuggestionContext);
-    useEffect(handleFilter, [value]); // Filter if controlled value
-    if (onChange)
-        console.warn('SuggestionInput: Avoid using onChange, as Suggestion controls the Input. Use onSelectedChange on Suggestion instead, or onInput if fetching API results');
-    if (value)
-        console.warn('SuggestionInput: Avoid using value, as Suggestion controls the Input. Use selected on Suggestion instead.');
-    return (jsx(Input, { placeholder: '' // We need an empty placeholder for the clear button to be able to show/hide
-        , ref: ref, onInput: (event) => {
-            onInput?.(event); // Should run first
-            handleFilter?.(); // Filter if uncontrolled value
-        }, suppressHydrationWarning // Since <ds-suggestion> adds attributes
-        : true, ...rest }));
+	const { handleFilter } = useContext(SuggestionContext);
+	useEffect(handleFilter, [value]);
+	if (onChange) console.warn("SuggestionInput: Avoid using onChange, as Suggestion controls the Input. Use onSelectedChange on Suggestion instead, or onInput if fetching API results");
+	if (value) console.warn("SuggestionInput: Avoid using value, as Suggestion controls the Input. Use selected on Suggestion instead.");
+	return /* @__PURE__ */ jsx(Input, {
+		placeholder: "",
+		ref,
+		onInput: (event) => {
+			onInput?.(event);
+			handleFilter?.();
+		},
+		suppressHydrationWarning: true,
+		...rest
+	});
 });
-
+//#endregion
 export { SuggestionInput };