@digdir/designsystemet-react 1.20.0 → 1.21.0

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

@@ -1,19 +1,25 @@
 '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-clear.tsx
 /**
- * SearchClear component, used to display a clear button when the search input is not empty.
- *
- * @example
- * <Search>
- *   <SearchInput aria-label='Søk' />
- *   <SearchClear />
- * </Search>
- */
-const SearchClear = forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', ...rest }, ref) {
-    return (jsx(Button, { "aria-label": label, ref: ref, type: 'reset', variant: 'tertiary', ...rest }));
+* SearchClear component, used to display a clear button when the search input is not empty.
+*
+* @example
+* <Search>
+*   <SearchInput aria-label='Søk' />
+*   <SearchClear />
+* </Search>
+*/
+const SearchClear = forwardRef(function SearchClear({ "aria-label": label = "Tøm", ...rest }, ref) {
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": label,
+		ref,
+		type: "reset",
+		variant: "tertiary",
+		...rest
+	});
 });
-
+//#endregion
 export { SearchClear };

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

@@ -0,0 +1,28 @@
+
+import { DefaultProps } from "../../types.js";
+import { InputHTMLAttributes } from "react";
+//#region src/components/search/search-input.d.ts
+type SearchInputProps = DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'type'> & {
+  /**
+   * Type of input, affects if magnifying glass is shown or not. Use 'text' to hide magnifying glass.
+   * @default 'search'
+   */
+  type?: 'text' | 'search';
+};
+/**
+ * SearchInput component, used to display a search input within the Search component.
+ *
+ * @example
+ * <Search>
+ *   <SearchInput aria-label='Søk' />
+ * </Search>
+ */
+declare const SearchInput: import("react").ForwardRefExoticComponent<DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "readOnly"> & {
+  /**
+   * Type of input, affects if magnifying glass is shown or not. Use 'text' to hide magnifying glass.
+   * @default 'search'
+   */
+  type?: "text" | "search";
+} & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+export { SearchInput, SearchInputProps };

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

@@ -1,18 +1,22 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Input } from '../input/input.js';
-
+import { Input } from "../input/input.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/search/search-input.tsx
 /**
- * SearchInput component, used to display a search input within the Search component.
- *
- * @example
- * <Search>
- *   <SearchInput aria-label='Søk' />
- * </Search>
- */
-const SearchInput = forwardRef(function SearchInput({ type = 'search', ...rest }, ref) {
-    return jsx(Input, { ref: ref, type: type, ...rest });
+* SearchInput component, used to display a search input within the Search component.
+*
+* @example
+* <Search>
+*   <SearchInput aria-label='Søk' />
+* </Search>
+*/
+const SearchInput = forwardRef(function SearchInput({ type = "search", ...rest }, ref) {
+	return /* @__PURE__ */ jsx(Input, {
+		ref,
+		type,
+		...rest
+	});
 });
-
+//#endregion
 export { SearchInput };

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

@@ -0,0 +1,25 @@
+
+import { DefaultProps } from "../../types.js";
+import { DSSuggestionElement } from "@digdir/designsystemet-web";
+import { HTMLAttributes } from "react";
+//#region src/components/search/search.d.ts
+type SearchProps = DefaultProps & HTMLAttributes<DSSuggestionElement>;
+/**
+ * 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 Search: import("react").ForwardRefExoticComponent<DefaultProps & HTMLAttributes<DSSuggestionElement> & import("react").RefAttributes<DSSuggestionElement>>;
+//#endregion
+export { Search, SearchProps };

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

@@ -1,28 +1,31 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import '@digdir/designsystemet-web';
-import cl from 'clsx/lite';
-import { forwardRef } from 'react';
-
+import "@digdir/designsystemet-web";
+import cl from "clsx/lite";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/search/search.tsx
 /**
- * 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 Search = forwardRef(function Search({ className, ...rest }, ref) {
-    // Using "class" since React does not translate className on custom elements
-    return (jsx("ds-suggestion", { ref: ref, class: cl('ds-search', className), ...rest }));
+	return /* @__PURE__ */ jsx("ds-suggestion", {
+		ref,
+		class: cl("ds-search", className),
+		...rest
+	});
 });
-
+//#endregion
 export { Search };

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

@@ -0,0 +1,41 @@
+
+import { Select as Select$1, SelectProps } from "./select.js";
+import { SelectOptgroup, SelectOptgroupProps } from "./select-optgroup.js";
+import { SelectOption, SelectOptionProps } from "./select-option.js";
+//#region src/components/select/index.d.ts
+type Select = typeof Select$1 & {
+  /**
+   * Select.Option component, used to display a native option within a select.
+   *
+   * @example
+   * <Select>
+   *   <Select.Option value='1'>Option 1</Select.Option>
+   *   <Select.Option value='2'>Option 2</Select.Option>
+   * </Select>
+   */
+  Option: typeof SelectOption;
+  /**
+   * Select.Optgroup component, used to display a native optgroup within a select.
+   *
+   * @example
+   * <Select>
+   *   <Select.Optgroup label='Group 1'>
+   *     <Select.Option value='1'>Option 1</Select.Option>
+   *     <Select.Option value='2'>Option 2</Select.Option>
+   *   </Select.Optgroup>
+   * </Select>
+   */
+  Optgroup: typeof SelectOptgroup;
+};
+/**
+ * Select component, used to display a native select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
+declare const SelectComponent: Select;
+//#endregion
+export { SelectComponent as Select, SelectOptgroup, type SelectOptgroupProps, SelectOption, type SelectOptionProps, type SelectProps };

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

@@ -1,22 +1,22 @@
 'use client';
-import { Select } from './select.js';
-import { SelectOptgroup } from './select-optgroup.js';
-import { SelectOption } from './select-option.js';
-
+import { Select } from "./select.js";
+import { SelectOptgroup } from "./select-optgroup.js";
+import { SelectOption } from "./select-option.js";
+//#region src/components/select/index.ts
 /**
- * Select component, used to display a native select.
- *
- * @example
- * <Select>
- *   <Select.Option value='1'>Option 1</Select.Option>
- *   <Select.Option value='2'>Option 2</Select.Option>
- * </Select>
- */
+* Select component, used to display a native select.
+*
+* @example
+* <Select>
+*   <Select.Option value='1'>Option 1</Select.Option>
+*   <Select.Option value='2'>Option 2</Select.Option>
+* </Select>
+*/
 const SelectComponent = Object.assign(Select, {
-    Option: SelectOption,
-    Optgroup: SelectOptgroup,
+	Option: SelectOption,
+	Optgroup: SelectOptgroup
 });
-SelectComponent.Option.displayName = 'Select.Option';
-SelectComponent.Optgroup.displayName = 'Select.Optgroup';
-
+SelectComponent.Option.displayName = "Select.Option";
+SelectComponent.Optgroup.displayName = "Select.Optgroup";
+//#endregion
 export { SelectComponent as Select, SelectOptgroup, SelectOption };

package/dist/esm/components/select/select-optgroup.d.ts

@@ -0,0 +1,30 @@
+
+import { OptgroupHTMLAttributes } from "react";
+//#region src/components/select/select-optgroup.d.ts
+type SelectOptgroupProps = {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & OptgroupHTMLAttributes<HTMLOptGroupElement>;
+/**
+ * SelectOptgroup component, used to display a native optgroup within a select.
+ *
+ * @example
+ * <Select>
+ *   <SelectOptgroup label='Group 1'>
+ *     <SelectOption value='1'>Option 1</SelectOption>
+ *     <SelectOption value='2'>Option 2</SelectOption>
+ *   </SelectOptgroup>
+ * </Select>
+ */
+declare const SelectOptgroup: import("react").ForwardRefExoticComponent<{
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & OptgroupHTMLAttributes<HTMLOptGroupElement> & import("react").RefAttributes<HTMLOptGroupElement>>;
+//#endregion
+export { SelectOptgroup, SelectOptgroupProps };

package/dist/esm/components/select/select-optgroup.js

@@ -1,22 +1,24 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import { forwardRef } from 'react';
-
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/select/select-optgroup.tsx
 /**
- * SelectOptgroup component, used to display a native optgroup within a select.
- *
- * @example
- * <Select>
- *   <SelectOptgroup label='Group 1'>
- *     <SelectOption value='1'>Option 1</SelectOption>
- *     <SelectOption value='2'>Option 2</SelectOption>
- *   </SelectOptgroup>
- * </Select>
- */
+* SelectOptgroup component, used to display a native optgroup within a select.
+*
+* @example
+* <Select>
+*   <SelectOptgroup label='Group 1'>
+*     <SelectOption value='1'>Option 1</SelectOption>
+*     <SelectOption value='2'>Option 2</SelectOption>
+*   </SelectOptgroup>
+* </Select>
+*/
 const SelectOptgroup = forwardRef(function SelectOptgroup({ asChild, ...rest }, ref) {
-    const Component = asChild ? Slot : 'optgroup';
-    return jsx(Component, { ...rest, ref: ref });
+	return /* @__PURE__ */ jsx(asChild ? Slot : "optgroup", {
+		...rest,
+		ref
+	});
 });
-
+//#endregion
 export { SelectOptgroup };

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

@@ -0,0 +1,28 @@
+
+import { OptionHTMLAttributes } from "react";
+//#region src/components/select/select-option.d.ts
+type SelectOptionProps = {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & OptionHTMLAttributes<HTMLOptionElement>;
+/**
+ * SelectOption component, used to display a native option within a select.
+ *
+ * @example
+ * <Select>
+ *   <SelectOption value='1'>Option 1</SelectOption>
+ *   <SelectOption value='2'>Option 2</SelectOption>
+ * </Select>
+ */
+declare const SelectOption: import("react").ForwardRefExoticComponent<{
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & OptionHTMLAttributes<HTMLOptionElement> & import("react").RefAttributes<HTMLOptionElement>>;
+//#endregion
+export { SelectOption, SelectOptionProps };

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

@@ -1,20 +1,22 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import { forwardRef } from 'react';
-
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/select/select-option.tsx
 /**
- * SelectOption component, used to display a native option within a select.
- *
- * @example
- * <Select>
- *   <SelectOption value='1'>Option 1</SelectOption>
- *   <SelectOption value='2'>Option 2</SelectOption>
- * </Select>
- */
+* SelectOption component, used to display a native option within a select.
+*
+* @example
+* <Select>
+*   <SelectOption value='1'>Option 1</SelectOption>
+*   <SelectOption value='2'>Option 2</SelectOption>
+* </Select>
+*/
 const SelectOption = forwardRef(function SelectOption({ asChild, ...rest }, ref) {
-    const Component = asChild ? Slot : 'option';
-    return jsx(Component, { ...rest, ref: ref });
+	return /* @__PURE__ */ jsx(asChild ? Slot : "option", {
+		...rest,
+		ref
+	});
 });
-
+//#endregion
 export { SelectOption };

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

@@ -0,0 +1,44 @@
+
+import { DefaultProps } from "../../types.js";
+import { MergeRight } from "../../utilities/types.js";
+import "../../utilities/index.js";
+import { SelectHTMLAttributes } from "react";
+//#region src/components/select/select.d.ts
+type SelectProps = MergeRight<DefaultProps & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'multiple' | 'size'> // Also Omit size as this sets amount of visible options in multiselect
+, {
+  /**
+   * Defines if the select is readOnly
+   * @deprecated Use `aria-readonly` instead.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * Defines the width of Select, where "auto" matches the content width.
+   * @default full
+   */
+  width?: 'full' | 'auto';
+}>;
+/**
+ * Select component, used to display a native select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
+declare const Select: import("react").ForwardRefExoticComponent<Omit<DefaultProps & Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "multiple">, "readOnly" | "width"> & {
+  /**
+   * Defines if the select is readOnly
+   * @deprecated Use `aria-readonly` instead.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * Defines the width of Select, where "auto" matches the content width.
+   * @default full
+   */
+  width?: "full" | "auto";
+} & import("react").RefAttributes<HTMLSelectElement>>;
+//#endregion
+export { Select, SelectProps };

package/dist/esm/components/select/select.js

@@ -1,20 +1,26 @@
 '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/select/select.tsx
 /**
- * Select component, used to display a native select.
- *
- * @example
- * <Select>
- *   <Select.Option value='1'>Option 1</Select.Option>
- *   <Select.Option value='2'>Option 2</Select.Option>
- * </Select>
- */
+* Select component, used to display a native select.
+*
+* @example
+* <Select>
+*   <Select.Option value='1'>Option 1</Select.Option>
+*   <Select.Option value='2'>Option 2</Select.Option>
+* </Select>
+*/
 const Select = forwardRef(function Select({ className, onKeyDown, onMouseDown, width, readOnly, ...rest }, ref) {
-    return (jsx("select", { className: cl('ds-input', className), "aria-readonly": rest['aria-readonly'] ?? readOnly, suppressHydrationWarning // Since <ds-field> adds attributes
-        : true, "data-width": width, ref: ref, ...rest }));
+	return /* @__PURE__ */ jsx("select", {
+		className: cl("ds-input", className),
+		"aria-readonly": rest["aria-readonly"] ?? readOnly,
+		suppressHydrationWarning: true,
+		"data-width": width,
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { Select };

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

@@ -0,0 +1,57 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/skeleton/skeleton.d.ts
+type SkeletonProps = {
+  /**
+   * The width of the component
+   */
+  width?: string | number;
+  /**
+   * The height of the component
+   */
+  height?: string | number;
+  /**
+   * The shape variant
+   * @default 'rectangle'
+   */
+  variant?: 'rectangle' | 'circle' | 'text';
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+  /** @deprecated This prop has no effect. Use `width` or supply text as children instead */
+  characters?: number;
+} & HTMLAttributes<HTMLSpanElement>;
+/**
+ * Skeleton is used to represent a draft of page while the content loads.
+ *
+ * @example
+ * <Skeleton variant="circle" />
+ * <Skeleton variant="text" />
+ * <Skeleton variant="rectangle" />
+ */
+declare const Skeleton: import("react").ForwardRefExoticComponent<{
+  /**
+   * The width of the component
+   */
+  width?: string | number;
+  /**
+   * The height of the component
+   */
+  height?: string | number;
+  /**
+   * The shape variant
+   * @default 'rectangle'
+   */
+  variant?: "rectangle" | "circle" | "text";
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+  /** @deprecated This prop has no effect. Use `width` or supply text as children instead */
+  characters?: number;
+} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Skeleton, SkeletonProps };

package/dist/esm/components/skeleton/skeleton.js

@@ -1,28 +1,38 @@
 '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 { 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 } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/skeleton/skeleton.tsx
 /**
- * Skeleton is used to represent a draft of page while the content loads.
- *
- * @example
- * <Skeleton variant="circle" />
- * <Skeleton variant="text" />
- * <Skeleton variant="rectangle" />
- */
+* Skeleton is used to represent a draft of page while the content loads.
+*
+* @example
+* <Skeleton variant="circle" />
+* <Skeleton variant="text" />
+* <Skeleton variant="rectangle" />
+*/
 const Skeleton = forwardRef(function Skeleton({ asChild, className, height, style, variant, width, ...rest }, ref) {
-    const Component = asChild ? Slot : 'span';
-    const isText = variant === 'text';
-    const animationRef = useSynchronizedAnimation('ds-skeleton-opacity-fade');
-    const mergedRefs = useMergeRefs([animationRef, ref]);
-    return (jsx(Component, { "aria-hidden": 'true', className: cl('ds-skeleton', className), "data-text": isText ? '-'.repeat(Number(width) || 1) : undefined, "data-variant": variant, ref: mergedRefs, style: isText ? style : { width, height, ...style }, ...rest }));
+	const Component = asChild ? Slot : "span";
+	const isText = variant === "text";
+	const mergedRefs = useMergeRefs([useSynchronizedAnimation("ds-skeleton-opacity-fade"), ref]);
+	return /* @__PURE__ */ jsx(Component, {
+		"aria-hidden": "true",
+		className: cl("ds-skeleton", className),
+		"data-text": isText ? "-".repeat(Number(width) || 1) : void 0,
+		"data-variant": variant,
+		ref: mergedRefs,
+		style: isText ? style : {
+			width,
+			height,
+			...style
+		},
+		...rest
+	});
 });
-
+//#endregion
 export { Skeleton };