@norges-domstoler/dds-components 5.4.0 → 5.4.1

package/dist/cjs/components/Datepicker/Datepicker.d.ts

@@ -1,9 +1,11 @@
 import { InputProps } from '../../helpers';
-import { Property } from 'csstype';
-export declare type DatepickerProps = InputProps;
-export declare const Datepicker: import("react").ForwardRefExoticComponent<{
-    label?: string | undefined;
-    width?: Property.Width<string> | undefined;
-    tip?: string | undefined;
-    errorMessage?: string | undefined;
-} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+declare type DatepickerType = 'date' | 'datetime-local';
+export declare type DatepickerProps = Modify<InputProps, {
+    /** Angi dato-input med eller uten klokkeslett. */
+    type?: DatepickerType;
+}>;
+export declare const Datepicker: import("react").ForwardRefExoticComponent<Omit<InputProps, "type"> & {
+    /** Angi dato-input med eller uten klokkeslett. */
+    type?: DatepickerType | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/cjs/components/Datepicker/Datepicker.stories.d.ts

@@ -1,12 +1,9 @@
 import { DatepickerProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<{
-        label?: string | undefined;
-        width?: import("csstype").Property.Width<string> | undefined;
-        tip?: string | undefined;
-        errorMessage?: string | undefined;
-    } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+    component: import("react").ForwardRefExoticComponent<Omit<import("../../helpers").InputProps, "type"> & {
+        type?: ("date" | "datetime-local") | undefined;
+    } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {
             control: {

package/dist/cjs/components/InternalHeader/InternalHeader.stories.d.ts

@@ -8,6 +8,11 @@ declare const _default: {
                 type: string;
             };
         };
+        applicationDesc: {
+            control: {
+                type: string;
+            };
+        };
         currentPageHref: {
             control: {
                 type: string;
@@ -30,10 +35,10 @@ export declare const Overview: () => JSX.Element;
 export declare const Default: (args: InternalHeaderProps) => JSX.Element;
 export declare const WithNavigationAndContextMenu: (args: InternalHeaderProps) => JSX.Element;
 export declare const WithCurrentPage: (args: InternalHeaderProps) => JSX.Element;
-export declare const SmallScreenWithNavigation: () => JSX.Element;
+export declare const SmallScreenWithNavigation: (args: InternalHeaderProps) => JSX.Element;
 export declare const SmallScreenWithContextMenu: (args: InternalHeaderProps) => JSX.Element;
-export declare const SmallScreenWithNavigationAndContextMenu: () => JSX.Element;
+export declare const SmallScreenWithNavigationAndContextMenu: (args: InternalHeaderProps) => JSX.Element;
 export declare const NoStoryHeading: (args: InternalHeaderProps) => JSX.Element;
-export declare const NoStoryHeadingSmallScreen: () => JSX.Element;
-export declare const NoStoryHeadingSmallScreenLong: () => JSX.Element;
-export declare const NonInteractiveUserOnly: () => JSX.Element;
+export declare const NoStoryHeadingSmallScreen: (args: InternalHeaderProps) => JSX.Element;
+export declare const NoStoryHeadingSmallScreenLong: (args: InternalHeaderProps) => JSX.Element;
+export declare const NonInteractiveUserOnly: (args: InternalHeaderProps) => JSX.Element;

package/dist/cjs/components/InternalHeader/InternalHeader.types.d.ts

@@ -18,6 +18,8 @@ declare type InternaHeaderUserProps = {
 export declare type InternalHeaderProps = BaseComponentProps<HTMLDivElement, {
     /**Navn på applikasjonen. */
     applicationName?: string;
+    /**Beskrivelse på applikasjonen ellen tittel på en underside. Tilgjengelig fram til Lovisa Next kommer. */
+    applicationDesc?: string;
     /**Indikerer om versjonen for små skjermer skal vises. */
     smallScreen?: boolean;
     /**Info om brukeren. Dukker opp som punkt på toppen av kontekstmenyen med tekst oppgitt i name. Blir en lenke hvis href er oppgitt. */

package/dist/cjs/components/Select/Select.styles.d.ts

@@ -12,5 +12,6 @@ export declare const Container: import("styled-components").StyledComponent<"div
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
     width?: string | number | undefined;
 }, never>;
+export declare const InnerSingleValue: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const getCustomStyles: <TOption>() => Partial<StylesConfig<TOption, boolean, GroupBase<TOption>>>;
 export {};

package/dist/cjs/index.js

@@ -5392,8 +5392,6 @@ var Scrollbar = function Scrollbar(props) {
     }
   }, [thumbHeight]);
   var handleThumbPositioning = React.useCallback(function () {
-    console.log('positioning');
-
     if (!(contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) || !trackRef.current || !thumbRef.current) {
       return;
     }
@@ -5823,6 +5821,7 @@ var optionBase = Object.assign(Object.assign({
   color: textDefault$4.textColor
 });
 var optionHoverBase = {
+  color: textDefault$4.textColor,
   backgroundColor: Colors$c.DdsColorInteractiveLightest
 };
 var optionSelectedBase = Object.assign({
@@ -6036,6 +6035,10 @@ var Wrapper$6 = styled__default["default"].div.withConfig({
   var width = _ref5.width;
   return width;
 });
+var InnerSingleValue = styled__default["default"].div.withConfig({
+  displayName: "Selectstyles__InnerSingleValue",
+  componentId: "sc-19jkd5s-3"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;max-width:100%;"]);
 var getCustomStyles = function getCustomStyles() {
   return {
     control: function control() {
@@ -6073,10 +6076,12 @@ var getCustomStyles = function getCustomStyles() {
         padding: 0
       });
     },
-    singleValue: function singleValue(provided) {
-      return Object.assign(Object.assign({}, provided), {
-        margin: 0
-      });
+    singleValue: function singleValue() {
+      return {
+        gridArea: '1/1/2/3',
+        overflow: 'hidden',
+        boxSizing: 'border-box'
+      };
     },
     multiValue: function multiValue(provided, state) {
       return Object.assign(Object.assign(Object.assign({}, provided), selectTokens.multiValue.base), state.selectProps.isDisabled ? selectTokens.multiValue.disabled.base : selectTokens.multiValue.enabled.base);
@@ -6115,13 +6120,13 @@ var getCustomStyles = function getCustomStyles() {
       });
     },
     option: function option(provided, state) {
-      return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
+      return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
         '@media (prefers-reduced-motion: no-preference)': {
           transition: 'color 0.2s, background-color 0.2s'
         }
       }), selectTokens.option.base), {
         '&:hover': Object.assign({}, selectTokens.option.hover.base)
-      }), state.isSelected || state.isFocused ? selectTokens.option.selected.base : {});
+      }), state.isSelected ? selectTokens.option.selected.base : {}), state.isFocused ? focusVisibleLink : {});
     },
     noOptionsMessage: function noOptionsMessage() {
       return Object.assign({}, selectTokens.noOptionsMessage.base);
@@ -6177,9 +6182,13 @@ var CustomOption = function CustomOption(props, Element) {
   }));
 };
 
-var CustomSingleValue = function CustomSingleValue(props, Element) {
+var CustomSingleValue = function CustomSingleValue(props, id, Element) {
   return jsxRuntime.jsx(SingleValue, Object.assign({}, props, {
-    children: jsxRuntime.jsx(Element, Object.assign({}, props))
+    children: jsxRuntime.jsx(InnerSingleValue, Object.assign({
+      id: id
+    }, {
+      children: Element ? jsxRuntime.jsx(Element, Object.assign({}, props)) : props.children
+    }))
   }));
 };
 
@@ -6216,6 +6225,13 @@ var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
   }));
 };
 
+var CustomInput = function CustomInput(props, ariaInvalid, ariaDescribedby) {
+  return jsxRuntime.jsx(Input$1, Object.assign({}, props, {
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedby
+  }));
+};
+
 function escapeRegexCharacters(text) {
   return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 }
@@ -6253,17 +6269,11 @@ var SelectInner = function SelectInner(_a, ref) {
 
   var generatedId = React.useId();
   var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-select");
+  var singleValueId = !isMulti ? "".concat(uniqueId, "-singleValue") : undefined;
   var hasLabel = !!label;
   var hasErrorMessage = !!errorMessage;
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
-
-  var CustomInput = function CustomInput(props) {
-    return jsxRuntime.jsx(Input$1, Object.assign({}, props, {
-      "aria-describedby": spaceSeparatedIdListGenerator([tipId, errorMessageId])
-    }));
-  };
-
   var wrapperProps = {
     width: width
   };
@@ -6298,10 +6308,12 @@ var SelectInner = function SelectInner(_a, ref) {
         return CustomOption(props, customOptionElement);
       } : IconOption,
       NoOptionsMessage: NoOptionsMessageCustom,
-      Input: CustomInput,
-      SingleValue: customSingleValueElement ? function (props) {
-        return CustomSingleValue(props, customSingleValueElement);
-      } : SingleValue,
+      Input: function Input(props) {
+        return CustomInput(props, hasErrorMessage, spaceSeparatedIdListGenerator([singleValueId, tipId, errorMessageId]));
+      },
+      SingleValue: function SingleValue(props) {
+        return CustomSingleValue(props, singleValueId, customSingleValueElement);
+      },
       ClearIndicator: CustomClearIndicator,
       DropdownIndicator: CustomDropdownIndicator,
       MultiValueRemove: CustomMultiValueRemove
@@ -9015,7 +9027,8 @@ var InternalHeaderListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 });
 
 var InternalHeader = function InternalHeader(props) {
-  var applicationName = props.applicationName,
+  var applicationDesc = props.applicationDesc,
+      applicationName = props.applicationName,
       smallScreen = props.smallScreen,
       navigationElements = props.navigationElements,
       contextMenuElements = props.contextMenuElements,
@@ -9025,7 +9038,7 @@ var InternalHeader = function InternalHeader(props) {
       id = props.id,
       className = props.className,
       htmlProps = props.htmlProps,
-      rest = tslib.__rest(props, ["applicationName", "smallScreen", "navigationElements", "contextMenuElements", "currentPageHref", "userProps", "onCurrentPageChange", "id", "className", "htmlProps"]);
+      rest = tslib.__rest(props, ["applicationDesc", "applicationName", "smallScreen", "navigationElements", "contextMenuElements", "currentPageHref", "userProps", "onCurrentPageChange", "id", "className", "htmlProps"]);
 
   var _useState = React.useState(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -9089,14 +9102,14 @@ var InternalHeader = function InternalHeader(props) {
             bold: true,
             as: "span"
           }, {
-            children: "Lovisa Next"
+            children: applicationName
           }))
         }), jsxRuntime.jsx(ApplicationNameWrapper, {
           children: jsxRuntime.jsx(Typography, Object.assign({
             typographyType: "bodySans02",
             as: "span"
           }, {
-            children: applicationName
+            children: applicationDesc
           }))
         })]
       })
@@ -9147,10 +9160,6 @@ var datepickerTokens = {
   }
 };
 
-var getWidth = function getWidth(type) {
-  return type === 'date' ? '205px' : type === 'datetime-local' ? '235px' : '320px';
-};
-
 var StyledInput = styled__default["default"](StatefulInput).withConfig({
   displayName: "Datepicker__StyledInput",
   componentId: "sc-1ijxhje-0"
@@ -9192,7 +9201,7 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     type: type,
     'aria-describedby': spaceSeparatedIdListGenerator([tipId, errorMessageId, ariaDescribedby]),
     'aria-invalid': hasErrorMessage ? true : undefined,
-    max: max || '9999-12-31'
+    max: getMax(type, max)
   }, rest);
   var outerInputContainerProps = {
     width: componentWidth,
@@ -9223,6 +9232,33 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
+var getWidth = function getWidth(type) {
+  if (type === 'date') {
+    return '205px';
+  }
+
+  if (type === 'datetime-local') {
+    return '235px';
+  }
+
+  return '320px';
+};
+
+var getMax = function getMax(type, max) {
+  if (max !== undefined) {
+    return max;
+  } // Limit the year-part to only four digits by default
+
+
+  if (type === 'datetime-local') {
+    return '9999-12-31T23:59';
+  }
+
+  if (type === 'date') {
+    return '9999-12-31';
+  }
+};
+
 var Colors$5 = ddsDesignTokens.ddsBaseTokens.colors,
     Spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing,
     FontPackages$1 = ddsDesignTokens.ddsBaseTokens.fontPackages,

package/dist/components/Datepicker/Datepicker.d.ts

@@ -1,9 +1,11 @@
 import { InputProps } from '../../helpers';
-import { Property } from 'csstype';
-export declare type DatepickerProps = InputProps;
-export declare const Datepicker: import("react").ForwardRefExoticComponent<{
-    label?: string | undefined;
-    width?: Property.Width<string> | undefined;
-    tip?: string | undefined;
-    errorMessage?: string | undefined;
-} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+declare type DatepickerType = 'date' | 'datetime-local';
+export declare type DatepickerProps = Modify<InputProps, {
+    /** Angi dato-input med eller uten klokkeslett. */
+    type?: DatepickerType;
+}>;
+export declare const Datepicker: import("react").ForwardRefExoticComponent<Omit<InputProps, "type"> & {
+    /** Angi dato-input med eller uten klokkeslett. */
+    type?: DatepickerType | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/Datepicker/Datepicker.js

@@ -10,10 +10,6 @@ import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../util
 import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
 import { InputMessage } from '../InputMessage/InputMessage.js';
 
-var getWidth = function getWidth(type) {
-  return type === 'date' ? '205px' : type === 'datetime-local' ? '235px' : '320px';
-};
-
 var StyledInput = styled(StatefulInput).withConfig({
   displayName: "Datepicker__StyledInput",
   componentId: "sc-1ijxhje-0"
@@ -55,7 +51,7 @@ var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     type: type,
     'aria-describedby': spaceSeparatedIdListGenerator([tipId, errorMessageId, ariaDescribedby]),
     'aria-invalid': hasErrorMessage ? true : undefined,
-    max: max || '9999-12-31'
+    max: getMax(type, max)
   }, rest);
   var outerInputContainerProps = {
     width: componentWidth,
@@ -86,4 +82,31 @@ var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
   }));
 });
 
+var getWidth = function getWidth(type) {
+  if (type === 'date') {
+    return '205px';
+  }
+
+  if (type === 'datetime-local') {
+    return '235px';
+  }
+
+  return '320px';
+};
+
+var getMax = function getMax(type, max) {
+  if (max !== undefined) {
+    return max;
+  } // Limit the year-part to only four digits by default
+
+
+  if (type === 'datetime-local') {
+    return '9999-12-31T23:59';
+  }
+
+  if (type === 'date') {
+    return '9999-12-31';
+  }
+};
+
 export { Datepicker };

package/dist/components/Datepicker/Datepicker.stories.d.ts

@@ -1,12 +1,9 @@
 import { DatepickerProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<{
-        label?: string | undefined;
-        width?: import("csstype").Property.Width<string> | undefined;
-        tip?: string | undefined;
-        errorMessage?: string | undefined;
-    } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+    component: import("react").ForwardRefExoticComponent<Omit<import("../../helpers").InputProps, "type"> & {
+        type?: ("date" | "datetime-local") | undefined;
+    } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {
             control: {

package/dist/components/InternalHeader/InternalHeader.js

@@ -12,7 +12,8 @@ import { Typography } from '../Typography/Typography.js';
 import { Button } from '../Button/Button.js';
 
 var InternalHeader = function InternalHeader(props) {
-  var applicationName = props.applicationName,
+  var applicationDesc = props.applicationDesc,
+      applicationName = props.applicationName,
       smallScreen = props.smallScreen,
       navigationElements = props.navigationElements,
       contextMenuElements = props.contextMenuElements,
@@ -22,7 +23,7 @@ var InternalHeader = function InternalHeader(props) {
       id = props.id,
       className = props.className,
       htmlProps = props.htmlProps,
-      rest = __rest(props, ["applicationName", "smallScreen", "navigationElements", "contextMenuElements", "currentPageHref", "userProps", "onCurrentPageChange", "id", "className", "htmlProps"]);
+      rest = __rest(props, ["applicationDesc", "applicationName", "smallScreen", "navigationElements", "contextMenuElements", "currentPageHref", "userProps", "onCurrentPageChange", "id", "className", "htmlProps"]);
 
   var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -86,14 +87,14 @@ var InternalHeader = function InternalHeader(props) {
             bold: true,
             as: "span"
           }, {
-            children: "Lovisa Next"
+            children: applicationName
           }))
         }), jsx(ApplicationNameWrapper, {
           children: jsx(Typography, Object.assign({
             typographyType: "bodySans02",
             as: "span"
           }, {
-            children: applicationName
+            children: applicationDesc
           }))
         })]
       })

package/dist/components/InternalHeader/InternalHeader.stories.d.ts

@@ -8,6 +8,11 @@ declare const _default: {
                 type: string;
             };
         };
+        applicationDesc: {
+            control: {
+                type: string;
+            };
+        };
         currentPageHref: {
             control: {
                 type: string;
@@ -30,10 +35,10 @@ export declare const Overview: () => JSX.Element;
 export declare const Default: (args: InternalHeaderProps) => JSX.Element;
 export declare const WithNavigationAndContextMenu: (args: InternalHeaderProps) => JSX.Element;
 export declare const WithCurrentPage: (args: InternalHeaderProps) => JSX.Element;
-export declare const SmallScreenWithNavigation: () => JSX.Element;
+export declare const SmallScreenWithNavigation: (args: InternalHeaderProps) => JSX.Element;
 export declare const SmallScreenWithContextMenu: (args: InternalHeaderProps) => JSX.Element;
-export declare const SmallScreenWithNavigationAndContextMenu: () => JSX.Element;
+export declare const SmallScreenWithNavigationAndContextMenu: (args: InternalHeaderProps) => JSX.Element;
 export declare const NoStoryHeading: (args: InternalHeaderProps) => JSX.Element;
-export declare const NoStoryHeadingSmallScreen: () => JSX.Element;
-export declare const NoStoryHeadingSmallScreenLong: () => JSX.Element;
-export declare const NonInteractiveUserOnly: () => JSX.Element;
+export declare const NoStoryHeadingSmallScreen: (args: InternalHeaderProps) => JSX.Element;
+export declare const NoStoryHeadingSmallScreenLong: (args: InternalHeaderProps) => JSX.Element;
+export declare const NonInteractiveUserOnly: (args: InternalHeaderProps) => JSX.Element;

package/dist/components/InternalHeader/InternalHeader.types.d.ts

@@ -18,6 +18,8 @@ declare type InternaHeaderUserProps = {
 export declare type InternalHeaderProps = BaseComponentProps<HTMLDivElement, {
     /**Navn på applikasjonen. */
     applicationName?: string;
+    /**Beskrivelse på applikasjonen ellen tittel på en underside. Tilgjengelig fram til Lovisa Next kommer. */
+    applicationDesc?: string;
     /**Indikerer om versjonen for små skjermer skal vises. */
     smallScreen?: boolean;
     /**Info om brukeren. Dukker opp som punkt på toppen av kontekstmenyen med tekst oppgitt i name. Blir en lenke hvis href er oppgitt. */

package/dist/components/ScrollableContainer/Scrollbar.js

@@ -95,8 +95,6 @@ var Scrollbar = function Scrollbar(props) {
     }
   }, [thumbHeight]);
   var handleThumbPositioning = useCallback(function () {
-    console.log('positioning');
-
     if (!(contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) || !trackRef.current || !thumbRef.current) {
       return;
     }

package/dist/components/Select/Select.js

@@ -2,15 +2,15 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useId } from 'react';
 import ReactSelect, { components } from 'react-select';
-import { prefix, getCustomStyles, Wrapper, Container, Label } from './Select.styles.js';
+import { prefix, getCustomStyles, Wrapper, Container, Label, InnerSingleValue } from './Select.styles.js';
 import { selectTokens } from './Select.tokens.js';
 import { CheckIcon } from '../../icons/tsx/check.js';
 import { CloseSmallIcon } from '../../icons/tsx/closeSmall.js';
 import { ChevronDownIcon } from '../../icons/tsx/chevronDown.js';
+import { spaceSeparatedIdListGenerator, derivativeIdGenerator } from '../../utils/idGenerator.js';
 import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
 import { InputMessage } from '../InputMessage/InputMessage.js';
 import { Icon } from '../Icon/Icon.js';
-import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../utils/idGenerator.js';
 
 var DdsOption = components.Option,
     NoOptionsMessage = components.NoOptionsMessage,
@@ -47,9 +47,13 @@ var CustomOption = function CustomOption(props, Element) {
   }));
 };
 
-var CustomSingleValue = function CustomSingleValue(props, Element) {
+var CustomSingleValue = function CustomSingleValue(props, id, Element) {
   return jsx(SingleValue, Object.assign({}, props, {
-    children: jsx(Element, Object.assign({}, props))
+    children: jsx(InnerSingleValue, Object.assign({
+      id: id
+    }, {
+      children: Element ? jsx(Element, Object.assign({}, props)) : props.children
+    }))
   }));
 };
 
@@ -86,6 +90,13 @@ var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
   }));
 };
 
+var CustomInput = function CustomInput(props, ariaInvalid, ariaDescribedby) {
+  return jsx(Input, Object.assign({}, props, {
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedby
+  }));
+};
+
 function escapeRegexCharacters(text) {
   return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 }
@@ -123,17 +134,11 @@ var SelectInner = function SelectInner(_a, ref) {
 
   var generatedId = useId();
   var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-select");
+  var singleValueId = !isMulti ? "".concat(uniqueId, "-singleValue") : undefined;
   var hasLabel = !!label;
   var hasErrorMessage = !!errorMessage;
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
-
-  var CustomInput = function CustomInput(props) {
-    return jsx(Input, Object.assign({}, props, {
-      "aria-describedby": spaceSeparatedIdListGenerator([tipId, errorMessageId])
-    }));
-  };
-
   var wrapperProps = {
     width: width
   };
@@ -168,10 +173,12 @@ var SelectInner = function SelectInner(_a, ref) {
         return CustomOption(props, customOptionElement);
       } : IconOption,
       NoOptionsMessage: NoOptionsMessageCustom,
-      Input: CustomInput,
-      SingleValue: customSingleValueElement ? function (props) {
-        return CustomSingleValue(props, customSingleValueElement);
-      } : SingleValue,
+      Input: function Input(props) {
+        return CustomInput(props, hasErrorMessage, spaceSeparatedIdListGenerator([singleValueId, tipId, errorMessageId]));
+      },
+      SingleValue: function SingleValue(props) {
+        return CustomSingleValue(props, singleValueId, customSingleValueElement);
+      },
       ClearIndicator: CustomClearIndicator,
       DropdownIndicator: CustomDropdownIndicator,
       MultiValueRemove: CustomMultiValueRemove

package/dist/components/Select/Select.styles.d.ts

@@ -12,5 +12,6 @@ export declare const Container: import("styled-components").StyledComponent<"div
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
     width?: string | number | undefined;
 }, never>;
+export declare const InnerSingleValue: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const getCustomStyles: <TOption>() => Partial<StylesConfig<TOption, boolean, GroupBase<TOption>>>;
 export {};

package/dist/components/Select/Select.styles.js

@@ -3,6 +3,7 @@ import { typographyTokens } from '../Typography/Typography.tokens.js';
 import { selectTokens } from './Select.tokens.js';
 import { Typography } from '../Typography/Typography.js';
 import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
+import { focusVisibleLink } from '../../helpers/styling/focusVisible.js';
 
 var prefix = 'dds-select';
 var Label = styled(Typography).withConfig({
@@ -33,6 +34,10 @@ var Wrapper = styled.div.withConfig({
   var width = _ref5.width;
   return width;
 });
+var InnerSingleValue = styled.div.withConfig({
+  displayName: "Selectstyles__InnerSingleValue",
+  componentId: "sc-19jkd5s-3"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;max-width:100%;"]);
 var getCustomStyles = function getCustomStyles() {
   return {
     control: function control() {
@@ -70,10 +75,12 @@ var getCustomStyles = function getCustomStyles() {
         padding: 0
       });
     },
-    singleValue: function singleValue(provided) {
-      return Object.assign(Object.assign({}, provided), {
-        margin: 0
-      });
+    singleValue: function singleValue() {
+      return {
+        gridArea: '1/1/2/3',
+        overflow: 'hidden',
+        boxSizing: 'border-box'
+      };
     },
     multiValue: function multiValue(provided, state) {
       return Object.assign(Object.assign(Object.assign({}, provided), selectTokens.multiValue.base), state.selectProps.isDisabled ? selectTokens.multiValue.disabled.base : selectTokens.multiValue.enabled.base);
@@ -112,13 +119,13 @@ var getCustomStyles = function getCustomStyles() {
       });
     },
     option: function option(provided, state) {
-      return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
+      return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
         '@media (prefers-reduced-motion: no-preference)': {
           transition: 'color 0.2s, background-color 0.2s'
         }
       }), selectTokens.option.base), {
         '&:hover': Object.assign({}, selectTokens.option.hover.base)
-      }), state.isSelected || state.isFocused ? selectTokens.option.selected.base : {});
+      }), state.isSelected ? selectTokens.option.selected.base : {}), state.isFocused ? focusVisibleLink : {});
     },
     noOptionsMessage: function noOptionsMessage() {
       return Object.assign({}, selectTokens.noOptionsMessage.base);
@@ -139,4 +146,4 @@ var getCustomStyles = function getCustomStyles() {
   };
 };
 
-export { Container, Label, Wrapper, getCustomStyles, prefix };
+export { Container, InnerSingleValue, Label, Wrapper, getCustomStyles, prefix };

package/dist/components/Select/Select.tokens.js

@@ -115,6 +115,7 @@ var optionBase = Object.assign(Object.assign({
   color: textDefault.textColor
 });
 var optionHoverBase = {
+  color: textDefault.textColor,
   backgroundColor: Colors.DdsColorInteractiveLightest
 };
 var optionSelectedBase = Object.assign({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",