@digdir/designsystemet-react 1.20.0 → 1.21.0

package/dist/cjs/utilities/roving-focus/roving-focus-item.cjs

@@ -0,0 +1,59 @@
+'use client';
+const require_use_merge_refs = require("../hooks/use-merge-refs/use-merge-refs.cjs");
+require("../hooks/index.cjs");
+const require_use_roving_focus = require("./use-roving-focus.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/utilities/roving-focus/roving-focus-item.tsx
+/** Get the next focusable RovingFocusItem */
+function getNextFocusableValue(items, value) {
+	const currIndex = items.findIndex((item) => item.value === value);
+	return items.at(currIndex === items.length - 1 ? 0 : currIndex + 1);
+}
+/** Get the previous focusable RovingFocusItem */
+function getPrevFocusableValue(items, value) {
+	const currIndex = items.findIndex((item) => item.value === value);
+	return items.at(currIndex === 0 ? -1 : currIndex - 1);
+}
+/** @deprecated RovingFocusItem is deprecated.*/
+const RovingFocusItem = (0, react.forwardRef)(({ value, asChild, ...rest }, ref) => {
+	const Component = asChild ? _radix_ui_react_slot.Slot : "div";
+	const focusValue = value ?? (typeof rest.children === "string" ? rest.children : "");
+	const { getOrderedItems, getRovingProps, orientation } = require_use_roving_focus.useRovingFocus(focusValue);
+	const rovingProps = getRovingProps({ onKeyDown: (e) => {
+		rest?.onKeyDown?.(e);
+		const items = getOrderedItems();
+		let nextItem;
+		switch (orientation) {
+			case "horizontal":
+				if (e.key === "ArrowRight") nextItem = getNextFocusableValue(items, focusValue);
+				if (e.key === "ArrowLeft") nextItem = getPrevFocusableValue(items, focusValue);
+				break;
+			case "vertical":
+				if (e.key === "ArrowDown") nextItem = getNextFocusableValue(items, focusValue);
+				if (e.key === "ArrowUp") nextItem = getPrevFocusableValue(items, focusValue);
+				break;
+			case "ambiguous":
+				if (["ArrowRight", "ArrowDown"].includes(e.key)) nextItem = getNextFocusableValue(items, focusValue);
+				if (["ArrowLeft", "ArrowUp"].includes(e.key)) nextItem = getPrevFocusableValue(items, focusValue);
+		}
+		if (e.key === "Home") nextItem = items[0];
+		if (e.key === "End") nextItem = items[items.length - 1];
+		if (nextItem) {
+			e.preventDefault();
+			nextItem.element.focus();
+		}
+	} });
+	const mergedRefs = require_use_merge_refs.useMergeRefs([ref, rovingProps.ref]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		...rest,
+		...rovingProps,
+		ref: mergedRefs,
+		children: rest.children
+	});
+});
+//#endregion
+exports.RovingFocusItem = RovingFocusItem;
+exports.getNextFocusableValue = getNextFocusableValue;
+exports.getPrevFocusableValue = getPrevFocusableValue;

package/dist/cjs/utilities/roving-focus/roving-focus-item.d.cts

@@ -0,0 +1,16 @@
+
+import "./roving-focus-root.cjs";
+import { HTMLAttributes } from "react";
+//#region src/utilities/roving-focus/roving-focus-item.d.ts
+/** @deprecated RovingFocusItem is deprecated.*/
+declare const RovingFocusItem: import("react").ForwardRefExoticComponent<{
+  /** The value of the `RovingFocusItem` used to determine which item should have focus. */
+  value?: string;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { RovingFocusItem };

package/dist/cjs/utilities/roving-focus/roving-focus-root.cjs

@@ -0,0 +1,72 @@
+'use client';
+const require_use_merge_refs = require("../hooks/use-merge-refs/use-merge-refs.cjs");
+require("../hooks/index.cjs");
+const require_index$1 = require("../index.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/utilities/roving-focus/roving-focus-root.tsx
+const RovingFocusContext = (0, react.createContext)({
+	elements: { current: /* @__PURE__ */ new Map() },
+	getOrderedItems: () => [],
+	setFocusableValue: () => {},
+	onShiftTab: () => {},
+	focusableValue: null,
+	orientation: "horizontal"
+});
+/** @deprecated RovingFocusRoot is deprecated. */
+const RovingFocusRoot = (0, react.forwardRef)(({ activeValue, asChild, orientation = "horizontal", onBlur, onFocus, ...rest }, ref) => {
+	const Component = asChild ? _radix_ui_react_slot.Slot : "div";
+	const activeValueOrNull = activeValue ?? null;
+	const [focusableValue, setFocusableValue] = (0, react.useState)(activeValueOrNull);
+	const [isShiftTabbing, setIsShiftTabbing] = (0, react.useState)(false);
+	const elements = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const myRef = (0, react.useRef)(null);
+	const refs = require_use_merge_refs.useMergeRefs([ref, myRef]);
+	const getOrderedItems = () => {
+		if (!myRef.current) return [];
+		const elementsFromDOM = Array.from(myRef.current.querySelectorAll("[data-roving-tabindex-item]"));
+		return Array.from(elements.current).sort((a, b) => elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1])).map(([value, element]) => ({
+			value,
+			element
+		}));
+	};
+	(0, react.useEffect)(() => {
+		setFocusableValue(activeValueOrNull);
+	}, [activeValueOrNull]);
+	require_index$1.warn("RovingFocusRoot is deprecated.");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RovingFocusContext.Provider, {
+		value: {
+			elements,
+			getOrderedItems,
+			focusableValue,
+			setFocusableValue,
+			onShiftTab: () => {
+				setIsShiftTabbing(true);
+			},
+			orientation
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+			...rest,
+			tabIndex: isShiftTabbing ? -1 : 0,
+			onBlur: (e) => {
+				onBlur?.(e);
+				setIsShiftTabbing(false);
+				setFocusableValue(activeValue ?? null);
+			},
+			onFocus: (e) => {
+				onFocus?.(e);
+				if (e.target !== e.currentTarget) return;
+				const orderedItems = getOrderedItems();
+				if (orderedItems.length === 0) return;
+				if (focusableValue != null) elements.current.get(focusableValue)?.focus();
+				else if (activeValue != null) elements.current.get(activeValue)?.focus();
+				else orderedItems.at(0)?.element.focus();
+			},
+			ref: refs
+		})
+	});
+});
+//#endregion
+exports.RovingFocusContext = RovingFocusContext;
+exports.RovingFocusRoot = RovingFocusRoot;

package/dist/cjs/utilities/roving-focus/roving-focus-root.d.cts

@@ -0,0 +1,24 @@
+
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/utilities/roving-focus/roving-focus-root.d.ts
+/** @deprecated RovingFocusRoot is deprecated. */
+declare const RovingFocusRoot: import("react").ForwardRefExoticComponent<{
+  /** The children of the `RovingFocusRoot`. The children should get their roving-relevant props from the `useRovingFocus` hook. */
+  children: ReactNode;
+  /** The value of the element that should be focused when the `RovingFocusRoot` receives focus. */
+  activeValue?: string;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+  /**
+   * Changes what arrow keys are used to navigate the roving focus.
+   * Sets correct `aria-orientation` attribute, if `vertical` or `horizontal`.
+   *
+   * @default 'horizontal'
+   */
+  orientation?: "vertical" | "horizontal" | "ambiguous";
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { RovingFocusRoot };

package/dist/cjs/utilities/roving-focus/use-roving-focus.cjs

@@ -0,0 +1,37 @@
+'use client';
+const require_roving_focus_root = require("./roving-focus-root.cjs");
+let react = require("react");
+//#region src/utilities/roving-focus/use-roving-focus.ts
+/**
+@deprecated useRovingFocus is deprecated.
+Handles props for `RovingFocus` in context with `RovingFocusRoot` */
+const useRovingFocus = (value) => {
+	const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, orientation } = (0, react.useContext)(require_roving_focus_root.RovingFocusContext);
+	return {
+		getOrderedItems,
+		isFocusable: focusableValue === value,
+		orientation,
+		getRovingProps: (props) => ({
+			...props,
+			ref: (element) => {
+				if (element) elements.current.set(value, element);
+				else elements.current.delete(value);
+			},
+			onKeyDown: (e) => {
+				props?.onKeyDown?.(e);
+				if (e.shiftKey && e.key === "Tab") {
+					onShiftTab();
+					return;
+				}
+			},
+			onFocus: (e) => {
+				props?.onFocus?.(e);
+				setFocusableValue(value);
+			},
+			"data-roving-tabindex-item": true,
+			tabIndex: focusableValue === value ? 0 : -1
+		})
+	};
+};
+//#endregion
+exports.useRovingFocus = useRovingFocus;

package/dist/cjs/utilities/roving-focus/use-roving-focus.d.cts

@@ -0,0 +1,4 @@
+
+import "./roving-focus-root.cjs";
+import "../../index.cjs";
+import { HTMLAttributes } from "react";

package/dist/cjs/utilities/types.d.cts

@@ -0,0 +1,9 @@
+
+//#region src/utilities/types.d.ts
+/**
+ * Create a new type with the properties of the first type merged with the properties of the second type.
+ * If a key exists in both types, the property from the *second* type will be used.
+ */
+type MergeRight<T1, T2> = Omit<T1, keyof T2> & T2;
+//#endregion
+export { MergeRight };

package/dist/esm/colors.d.ts

@@ -0,0 +1,3 @@
+
+import { Color, SeverityColors } from "@digdir/designsystemet-types";
+export type { Color, SeverityColors };

package/dist/esm/colors.js

@@ -0,0 +1 @@
+'use client';

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

@@ -0,0 +1,211 @@
+
+import { Option } from "./useCombobox.js";
+import { FormFieldProps } from "./useFormField/useFormField.js";
+import { InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/Combobox/Combobox.d.ts
+type ComboboxProps = {
+  /**
+   * Label for the combobox.
+   *
+   * Passed label will be encapsulated by a `label` element.
+   */
+  label?: ReactNode;
+  /**
+   * Visually hides `label` and `description` (still available for screen readers)
+   * @default false
+   */
+  hideLabel?: boolean;
+  /**
+   * String array of selected options. Contains only one option during single selection mode.
+   */
+  value?: string[];
+  /**
+   * String array of initial selected options. Contains only one option during single selection mode.
+   */
+  initialValue?: string[];
+  /**
+   * Callback function that is called when the value changes
+   */
+  onValueChange?: (value: string[]) => void;
+  /**
+   * Multiple options can be selected
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * Name of the value when used in a formPuse
+   */
+  name?: string;
+  /**
+   * Exposes the HTML `size` attribute.
+   * @default 0
+   */
+  htmlSize?: number;
+  /**
+   * Hides chips when multiple options are selected
+   * @default false
+   */
+  hideChips?: boolean;
+  /**
+   * Hides the clear button
+   * @default false
+   */
+  hideClearButton?: boolean;
+  /**
+   * Label for the clear button
+   * @default 'Fjern alt'
+   */
+  clearButtonLabel?: string;
+  /**
+   * Enables virtualizing of options list.
+   * @see https://tanstack.com/virtual
+   * @default false
+   */
+  virtual?: boolean;
+  /**
+   * Value of the input field
+   */
+  inputValue?: string;
+  /**
+   * Adds `aria-busy` and displays loading state for the Combobox
+   * All options will be hidden and replaced with a loading message.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Text to display when the combobox is loading
+   * @default 'Laster...'
+   */
+  loadingLabel?: string;
+  /**
+   * Filter function for filtering the list of options. Return `true` to show option, `false` to hide option.
+   * @param inputValue
+   * @param option
+   * @returns boolean
+   *
+   * @default (inputValue, option) => option.value.toLowerCase().startsWith(inputValue.toLowerCase())
+   */
+  filter?: (inputValue: string, option: Option) => boolean;
+  /**
+   * Add a screen reader label to the chips
+   * @param option
+   * @returns string
+   *
+   * @default (option) => 'Slett ' + option.label,
+   */
+  chipSrLabel?: (option: Option) => string;
+  /**
+   * Portals the floating element outside of the app root and into the body.
+   * @see https://floating-ui.com/docs/floatingportal
+   * @default false
+   */
+  portal?: boolean;
+} & FormFieldProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+declare const Combobox: import("react").ForwardRefExoticComponent<{
+  /**
+   * Label for the combobox.
+   *
+   * Passed label will be encapsulated by a `label` element.
+   */
+  label?: ReactNode;
+  /**
+   * Visually hides `label` and `description` (still available for screen readers)
+   * @default false
+   */
+  hideLabel?: boolean;
+  /**
+   * String array of selected options. Contains only one option during single selection mode.
+   */
+  value?: string[];
+  /**
+   * String array of initial selected options. Contains only one option during single selection mode.
+   */
+  initialValue?: string[];
+  /**
+   * Callback function that is called when the value changes
+   */
+  onValueChange?: (value: string[]) => void;
+  /**
+   * Multiple options can be selected
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * Name of the value when used in a formPuse
+   */
+  name?: string;
+  /**
+   * Exposes the HTML `size` attribute.
+   * @default 0
+   */
+  htmlSize?: number;
+  /**
+   * Hides chips when multiple options are selected
+   * @default false
+   */
+  hideChips?: boolean;
+  /**
+   * Hides the clear button
+   * @default false
+   */
+  hideClearButton?: boolean;
+  /**
+   * Label for the clear button
+   * @default 'Fjern alt'
+   */
+  clearButtonLabel?: string;
+  /**
+   * Enables virtualizing of options list.
+   * @see https://tanstack.com/virtual
+   * @default false
+   */
+  virtual?: boolean;
+  /**
+   * Value of the input field
+   */
+  inputValue?: string;
+  /**
+   * Adds `aria-busy` and displays loading state for the Combobox
+   * All options will be hidden and replaced with a loading message.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Text to display when the combobox is loading
+   * @default 'Laster...'
+   */
+  loadingLabel?: string;
+  /**
+   * Filter function for filtering the list of options. Return `true` to show option, `false` to hide option.
+   * @param inputValue
+   * @param option
+   * @returns boolean
+   *
+   * @default (inputValue, option) => option.value.toLowerCase().startsWith(inputValue.toLowerCase())
+   */
+  filter?: (inputValue: string, option: Option) => boolean;
+  /**
+   * Add a screen reader label to the chips
+   * @param option
+   * @returns string
+   *
+   * @default (option) => 'Slett ' + option.label,
+   */
+  chipSrLabel?: (option: Option) => string;
+  /**
+   * Portals the floating element outside of the app root and into the body.
+   * @see https://floating-ui.com/docs/floatingportal
+   * @default false
+   */
+  portal?: boolean;
+} & {
+  error?: ReactNode;
+  errorId?: string;
+  disabled?: boolean;
+  description?: ReactNode;
+  id?: string;
+  readOnly?: boolean;
+  size?: import("@digdir/designsystemet-types").Size;
+} & Pick<import("react").HTMLAttributes<HTMLElement>, "aria-describedby"> & Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Combobox, ComboboxProps };