@norges-domstoler/dds-components 24.2.2 → 24.3.0

package/dist/index.d.cts

@@ -16675,7 +16675,7 @@ type SelectProps<Option = unknown, IsMulti extends boolean = false> = {
   customOptionElement?: (props: OptionProps<Option, IsMulti, GroupBase<Option>>) => JSX.Element;
   /** Custom element som vises i listen over alternativer. */
   customSingleValueElement?: (props: SingleValueProps<Option, IsMulti, GroupBase<Option>>) => JSX.Element;
-  /** Testid. Legges på control-div med suffiks "control". */
+  /** Testid. Legges på control-div med suffiks "control", samt alternativene på formen `"<data-testid>-option-<option.value>"`. */
   'data-testid'?: string;
   /**Ref til komponenten. */
   ref?: SelectForwardRefType<Option, IsMulti>;

package/dist/index.d.mts

@@ -16674,7 +16674,7 @@ type SelectProps<Option = unknown, IsMulti extends boolean = false> = {
   customOptionElement?: (props: OptionProps<Option, IsMulti, GroupBase<Option>>) => JSX.Element;
   /** Custom element som vises i listen over alternativer. */
   customSingleValueElement?: (props: SingleValueProps<Option, IsMulti, GroupBase<Option>>) => JSX.Element;
-  /** Testid. Legges på control-div med suffiks "control". */
+  /** Testid. Legges på control-div med suffiks "control", samt alternativene på formen `"<data-testid>-option-<option.value>"`. */
   'data-testid'?: string;
   /**Ref til komponenten. */
   ref?: SelectForwardRefType<Option, IsMulti>;

package/dist/index.mjs

@@ -9475,15 +9475,23 @@ const getCustomStyles = (size, hasError, isReadOnly) => ({
 //#endregion
 //#region src/components/Select/SelectComponents.tsx
 const { Option, NoOptionsMessage, Input, SingleValue, ClearIndicator, DropdownIndicator, MultiValueRemove, Control } = components;
-const DDSOption = ({ ...props }) => /* @__PURE__ */ jsxs(Option, {
+const DDSOption = ({ testId, ...props }) => /* @__PURE__ */ jsxs(Option, {
 	...props,
+	innerProps: {
+		...props.innerProps,
+		"data-testid": testId
+	},
 	children: [props.isSelected && /* @__PURE__ */ jsx(Icon, {
 		icon: CheckIcon,
 		iconSize: "small"
 	}), props.children]
 });
-const CustomOption = (props) => /* @__PURE__ */ jsx(Option, {
+const CustomOption = ({ testId, ...props }) => /* @__PURE__ */ jsx(Option, {
 	...props,
+	innerProps: {
+		...props.innerProps,
+		"data-testid": testId
+	},
 	children: React.createElement(props.customElement, props)
 });
 const CustomSingleValue = ({ id, Element, ...props }) => /* @__PURE__ */ jsx(SingleValue, {
@@ -9596,12 +9604,21 @@ function Select({ id, label, componentSize = "medium", errorMessage, tip, "aria-
 		dataTestId
 	]);
 	const customOptionComponent = useCallback((props) => {
+		const optionTestId = dataTestId ? `${dataTestId}-option-${String(rest.getOptionValue?.(props.data) ?? props.data.value)}` : void 0;
 		if (customOptionElement) return /* @__PURE__ */ jsx(CustomOption, {
 			...props,
-			customElement: customOptionElement
+			customElement: customOptionElement,
+			testId: optionTestId
+		});
+		else return /* @__PURE__ */ jsx(DDSOption, {
+			...props,
+			testId: optionTestId
 		});
-		else return /* @__PURE__ */ jsx(DDSOption, { ...props });
-	}, [customOptionElement, componentSize]);
+	}, [
+		customOptionElement,
+		dataTestId,
+		rest.getOptionValue
+	]);
 	const reactSelectProps = {
 		options,
 		value,