@norges-domstoler/dds-components 4.1.0 → 4.3.0

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const Checkbox: import("react").ForwardRefExoticComponent<{
-    htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "onChange"> | undefined;
-} & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "onChange">, "id" | "className"> & {
+    htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "defaultChecked" | "value" | "defaultValue" | "onChange" | "onBlur"> | undefined;
+} & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "defaultChecked" | "value" | "defaultValue" | "onChange" | "onBlur">, "id" | "className"> & {
     label?: string | undefined;
     error?: boolean | undefined;
     disabled?: boolean | undefined;
@@ -11,5 +11,9 @@ export declare const Checkbox: import("react").ForwardRefExoticComponent<{
     'aria-describedby'?: string | undefined;
     name?: string | undefined;
     checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    value?: string | number | readonly string[] | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
     onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -3,17 +3,21 @@ import { CheckboxProps } from '.';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
-        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "checked"> | undefined;
-    } & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "checked">, "id" | "className"> & {
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked"> | undefined;
+    } & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked">, "id" | "className"> & {
         label?: string | undefined;
         error?: boolean | undefined;
         disabled?: boolean | undefined;
         readOnly?: boolean | undefined;
         indeterminate?: boolean | undefined;
     } & {
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
         'aria-describedby'?: string | undefined;
+        onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
         onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
         name?: string | undefined;
+        value?: string | number | readonly string[] | undefined;
         checked?: boolean | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {

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

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 import { BaseComponentProps } from '../../types';
-declare type PickedHTMLAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'checked' | 'onChange'>;
+declare type PickedHTMLAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'checked' | 'defaultChecked' | 'value' | 'defaultValue' | 'onChange' | 'onBlur'>;
 export declare type CheckboxProps = BaseComponentProps<HTMLInputElement, {
     /** Ledetekst for inputelementet. */
     label?: string;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const TextInput: React.ForwardRefExoticComponent<{
     multiline?: boolean | undefined;
+    withCharacterCounter?: boolean | undefined;
 } & {
     label?: string | undefined;
     width?: import("csstype").Property.Width<string> | undefined;

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

@@ -4,6 +4,7 @@ declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
         multiline?: boolean | undefined;
+        withCharacterCounter?: boolean | undefined;
     } & {
         label?: string | undefined;
         width?: import("csstype").Property.Width<string> | undefined;

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

@@ -3,4 +3,6 @@ import { InputProps } from '../../helpers';
 export declare type TextInputProps = {
     /**Gjør inputfeltet om til `<textarea>`. */
     multiline?: boolean;
+    /** Spesifiserer om tegntelleren skal vises. */
+    withCharacterCounter?: boolean;
 } & InputProps & InputHTMLAttributes<HTMLTextAreaElement>;

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

@@ -2,6 +2,7 @@ import { ElementType, PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes }
 import { CSSObject } from 'styled-components';
 import { TextColor, OtherTypographyType, AnchorTypographyType, LabelTypographyType } from './Typography.types';
 import { BaseComponentProps } from '../../types';
+export declare const inlineElements: ElementType[];
 export declare function isTextColor(color: string): color is TextColor;
 export declare const getTextColor: (color: TextColor | string) => string;
 export declare type TypographyInteractionProps = {

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

@@ -47,6 +47,11 @@ declare const _default: {
                 type: string;
             };
         };
+        as: {
+            control: {
+                type: string;
+            };
+        };
     };
     parameters: {
         controls: {

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

@@ -9,4 +9,5 @@ export declare type LabelTypographyType = 'supportingStyleLabel01';
 export declare type OtherTypographyType = TypographyHeadingType | TypographyBodyType | TypographyLeadType | TypographySupportingType;
 export declare type TypographyType = AnchorTypographyType | LabelTypographyType | OtherTypographyType;
 export declare type TextColor = 'interactive' | 'primary' | 'danger' | 'warning' | 'success' | 'onLight' | 'onDark' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'gray7' | 'gray8' | 'gray9';
+export declare type InlineElement = 'a' | 'abbr' | 'audio' | 'b' | 'bdi' | 'bdo' | 'big' | 'br' | 'button' | 'canvas' | 'cite' | 'code' | 'data' | 'datalist' | 'del' | 'dfn' | 'em' | 'embed' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'map' | 'mark' | 'meter' | 'noscript' | 'object' | 'output' | 'picture' | 'progress' | 'q' | 'ruby' | 's' | 'samp' | 'script' | 'select' | 'slot' | 'small' | 'span' | 'strong' | 'sub' | 'sup' | 'svg' | 'template' | 'textarea' | 'time' | 'u' | 'var' | 'video' | 'wbr';
 export {};

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BaseComponentPropsWithChildren } from '../../types';
+declare type VisuallyHiddenDivProps = BaseComponentPropsWithChildren<HTMLDivElement, {
+    as: 'div';
+}>;
+declare type VisuallyHiddenSpanProps = BaseComponentPropsWithChildren<HTMLSpanElement, {
+    /**Spesifiserer hvilken HTML tag skal returneres. */
+    as: 'span';
+}>;
+export declare type VisuallyHiddenProps = VisuallyHiddenSpanProps | VisuallyHiddenDivProps;
+export declare const VisuallyHidden: (props: VisuallyHiddenProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { VisuallyHiddenProps } from '.';
+declare const _default: {
+    title: string;
+    component: (props: VisuallyHiddenProps) => JSX.Element;
+    argTypes: {
+        as: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: VisuallyHiddenProps) => JSX.Element;
+export declare const Link: () => JSX.Element;
+export declare const TableButtons: () => JSX.Element;

package/dist/cjs/components/VisuallyHidden/index.d.ts

@@ -0,0 +1 @@
+export * from './VisuallyHidden';

package/dist/cjs/hooks/useFloatPosition.d.ts

@@ -2,10 +2,10 @@
 import { Strategy } from '@floating-ui/react-dom';
 export declare type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
 export declare const useFloatPosition: (arrowRef: HTMLElement | null, placement?: Placement, offset?: number) => {
-    reference: (node: (Element | import("@floating-ui/core").VirtualElement) | null) => void;
+    reference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
     floating: (node: HTMLElement | null) => void;
     refs: {
-        reference: import("react").MutableRefObject<(Element | import("@floating-ui/core").VirtualElement) | null>;
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
         floating: import("react").MutableRefObject<HTMLElement | null>;
     };
     styles: {

package/dist/cjs/index.d.ts

@@ -32,3 +32,4 @@ export * from './components/ToggleButton';
 export * from './components/Tabs';
 export * from './components/Tag';
 export * from './components/Chip';
+export * from './components/VisuallyHidden';

package/dist/cjs/index.js

@@ -912,6 +912,12 @@ var getElementType = function getElementType(element) {
   }
 };
 
+var inlineElements = ['a', 'abbr', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button', 'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress', 'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'sub', 'sup', 'svg', 'template', 'textarea', 'time', 'u', 'var', 'video', 'wbr'];
+
+var isInlineElement = function isInlineElement(as) {
+  return inlineElements.indexOf(as) !== -1;
+};
+
 function isTextColor(color) {
   return textColorsArray.indexOf(color) !== -1;
 }
@@ -946,8 +952,9 @@ var StyledTypography = styled__default["default"].p.withConfig({
   return interactionProps && interactionProps.active && styled.css(["&:active{", "}"], interactionProps.active);
 }, function (_ref5) {
   var withMargins = _ref5.withMargins,
-      typographyType = _ref5.typographyType;
-  return withMargins && typographyType ? styled.css(["", ""], typographyTokens.typographyType[typographyType].margins.base) : styled.css(["margin:0;"]);
+      typographyType = _ref5.typographyType,
+      as = _ref5.as;
+  return withMargins && typographyType && isInlineElement(as) ? styled.css(["", " display:block;"], typographyTokens.typographyType[typographyType].margins.base) : withMargins && typographyType ? styled.css(["", ""], typographyTokens.typographyType[typographyType].margins.base) : styled.css(["margin:0;"]);
 }, function (_ref6) {
   var color = _ref6.color;
   return color && styled.css(["color:", ";"], getTextColor(color));
@@ -2721,7 +2728,7 @@ var charCounterTokens = {
   base: charCounterBase
 };
 
-var Wrapper$7 = styled__default["default"](Typography).withConfig({
+var Wrapper$8 = styled__default["default"](Typography).withConfig({
   displayName: "CharCounter__Wrapper",
   componentId: "sc-qty1z2-0"
 })(["margin-left:auto;", ""], charCounterTokens.base);
@@ -2739,7 +2746,7 @@ function CharCounter(props) {
       _useState2 = _slicedToArray(_useState, 1),
       uniqueId = _useState2[0];
 
-  return jsxRuntime.jsxs(Wrapper$7, Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest), {
+  return jsxRuntime.jsxs(Wrapper$8, Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest), {
     forwardedAs: "div",
     typographyType: "supportingStyleHelperText01",
     "aria-label": "".concat(current, " av ").concat(max, " tegn skrevet")
@@ -2791,10 +2798,12 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       width = _a$width === void 0 ? textInputTokens.wrapper.defaultWidth : _a$width,
       _a$type = _a.type,
       type = _a$type === void 0 ? 'text' : _a$type,
+      _a$withCharacterCount = _a.withCharacterCounter,
+      withCharacterCounter = _a$withCharacterCount === void 0 ? true : _a$withCharacterCount,
       className = _a.className,
       style = _a.style,
       ariaDescribedby = _a['aria-describedby'],
-      rest = tslib.__rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "multiline", "onChange", "id", "width", "type", "className", "style", 'aria-describedby']);
+      rest = tslib.__rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "multiline", "onChange", "id", "width", "type", "withCharacterCounter", "className", "style", 'aria-describedby']);
 
   var textAreaRef = React.useRef(null);
 
@@ -2834,7 +2843,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var hasLabel = !!label;
   var labelPresence = hasLabel ? 'hasLabel' : 'noLabel';
   var hasMessage = hasErrorMessage || hasTip || !!maxLength;
-  var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter', maxLength);
+  var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter', maxLength && withCharacterCounter);
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
   var generalInputProps = Object.assign({
@@ -2890,7 +2899,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         message: tip,
         messageType: "tip",
         id: tipId
-      }), maxLength && Number.isInteger(maxLength) && maxLength > 0 && jsxRuntime.jsx(CharCounter, {
+      }), maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && jsxRuntime.jsx(CharCounter, {
         id: characterCounterId,
         current: text.length,
         max: maxLength
@@ -3228,7 +3237,7 @@ var Container$f = styled__default["default"].div.withConfig({
   var readOnly = _ref5.readOnly;
   return readOnly && styled.css(["", " &:hover{box-shadow:none;", " ", "{", "}}.", "__dropdown-indicator,&:hover .", "__dropdown-indicator{", "}"], selectTokens.container.readOnly.base, selectTokens.container.readOnly.base, Label, selectTokens.label.base, prefix, prefix, selectTokens.dropdownIndicator.readOnly.base);
 });
-var Wrapper$6 = styled__default["default"].div.withConfig({
+var Wrapper$7 = styled__default["default"].div.withConfig({
   displayName: "Selectstyles__Wrapper",
   componentId: "sc-19jkd5s-2"
 })(["margin:0;width:", ";"], function (_ref6) {
@@ -3460,7 +3469,7 @@ var SelectInner = function SelectInner(_a, ref) {
     },
     'aria-invalid': hasErrorMessage ? true : undefined
   }, rest);
-  return jsxRuntime.jsxs(Wrapper$6, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsxs(Wrapper$7, Object.assign({}, wrapperProps, {
     children: [jsxRuntime.jsxs(Container$f, Object.assign({}, containerProps, {
       children: [label && jsxRuntime.jsxs(Label, Object.assign({
         htmlFor: uniqueId,
@@ -4358,7 +4367,7 @@ var Foot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var Wrapper$5 = styled__default["default"].div.withConfig({
+var Wrapper$6 = styled__default["default"].div.withConfig({
   displayName: "TableWrapper__Wrapper",
   componentId: "sc-eb384b-0"
 })(["", " ", ""], function (_ref) {
@@ -4406,7 +4415,7 @@ var TableWrapper = function TableWrapper(_a) {
     ref: wrapperRef,
     overflowX: overflowX
   }, rest);
-  return jsxRuntime.jsx(Wrapper$5, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsx(Wrapper$6, Object.assign({}, wrapperProps, {
     children: children
   }));
 };
@@ -5182,7 +5191,7 @@ var Card = function Card(props) {
   }));
 };
 
-var Wrapper$4 = styled__default["default"].div.withConfig({
+var Wrapper$5 = styled__default["default"].div.withConfig({
   displayName: "CardAccordion__Wrapper",
   componentId: "sc-1ctxrby-0"
 })([""]);
@@ -5232,7 +5241,7 @@ var CardAccordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var wrapperProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     ref: ref
   });
-  return jsxRuntime.jsx(Wrapper$4, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsx(Wrapper$5, Object.assign({}, wrapperProps, {
     children: Children
   }));
 });
@@ -6098,7 +6107,7 @@ var OverflowMenuGroup = function OverflowMenuGroup(_ref) {
   });
 };
 
-var Wrapper$3 = styled__default["default"].div.withConfig({
+var Wrapper$4 = styled__default["default"].div.withConfig({
   displayName: "InternalHeaderstyles__Wrapper",
   componentId: "sc-91bnca-0"
 })(["position:relative;*::selection{", "}", ""], typographyTokens.selection.base, internalHeaderTokens.wrapper.base);
@@ -6244,7 +6253,7 @@ var InternalHeader = function InternalHeader(props) {
     })
   })) : null;
   var hasContextMenu = hasContextMenuElements || !!userProps || hasNavInContextMenu;
-  return jsxRuntime.jsxs(Wrapper$3, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+  return jsxRuntime.jsxs(Wrapper$4, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
     children: [jsxRuntime.jsx(BannerWrapper, Object.assign({
       hasContextMenu: hasContextMenu
     }, {
@@ -6335,8 +6344,9 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       tip = _a.tip,
       style = _a.style,
       className = _a.className,
+      max = _a.max,
       ariaDescribedby = _a['aria-describedby'],
-      rest = tslib.__rest(_a, ["id", "type", "required", "readOnly", "disabled", "label", "width", "errorMessage", "tip", "style", "className", 'aria-describedby']);
+      rest = tslib.__rest(_a, ["id", "type", "required", "readOnly", "disabled", "label", "width", "errorMessage", "tip", "style", "className", "max", 'aria-describedby']);
 
   var _useState = React.useState(id !== null && id !== void 0 ? id : "datepickerInput-".concat(nextUniqueId$8++)),
       _useState2 = _slicedToArray(_useState, 1),
@@ -6359,7 +6369,8 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     disabled: disabled,
     type: type,
     'aria-describedby': spaceSeparatedIdListGenerator([tipId, errorMessageId, ariaDescribedby]),
-    'aria-invalid': hasErrorMessage ? true : undefined
+    'aria-invalid': hasErrorMessage ? true : undefined,
+    max: max || '9999-12-31'
   }, rest);
   var outerInputContainerProps = {
     width: componentWidth,
@@ -6426,7 +6437,7 @@ var skipToContentTokens = {
   }
 };
 
-var Wrapper$2 = styled__default["default"].div.withConfig({
+var Wrapper$3 = styled__default["default"].div.withConfig({
   displayName: "SkipToContent__Wrapper",
   componentId: "sc-57o1qv-0"
 })(["box-sizing:border-box;position:absolute;top:", ";text-align:center;opacity:0;@media (prefers-reduced-motion:no-preference){transition:opacity 0.2s;}overflow:hidden;clip:rect(1px,1px,1px,1px);height:1px;width:1px;white-space:nowrap;", " &:focus-within{clip:auto;height:auto;overflow:auto;width:100%;z-index:200;opacity:1;}"], function (_ref) {
@@ -6457,7 +6468,7 @@ var SkipToContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: joinClassNames(className, htmlPropsClassName),
     style: style
   };
-  return jsxRuntime.jsx(Wrapper$2, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsx(Wrapper$3, Object.assign({}, wrapperProps, {
     children: jsxRuntime.jsx(Link, Object.assign({}, getBaseHTMLProps(id, restHtmlProps, rest), {
       ref: ref
     }, {
@@ -7024,7 +7035,7 @@ var popoverTokens = {
 };
 
 var Spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing;
-var Wrapper$1 = styled__default["default"].div.withConfig({
+var Wrapper$2 = styled__default["default"].div.withConfig({
   displayName: "Popover__Wrapper",
   componentId: "sc-1fecd7e-0"
 })(["", " box-sizing:border-box;position:absolute;width:fit-content;z-index:20;", " ", ""], function (_ref) {
@@ -7088,7 +7099,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: Object.assign(Object.assign({}, htmlProps.style), styles.floating),
     role: 'dialog'
   });
-  return jsxRuntime.jsxs(Wrapper$1, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsxs(Wrapper$2, Object.assign({}, wrapperProps, {
     children: [title && jsxRuntime.jsx(TitleContainer, {
       children: typeof title === 'string' ? jsxRuntime.jsx(Typography, Object.assign({
         typographyType: "headingSans02"
@@ -7769,7 +7780,7 @@ var tagTokens = {
   }
 };
 
-var Wrapper = styled__default["default"](Typography).withConfig({
+var Wrapper$1 = styled__default["default"](Typography).withConfig({
   displayName: "Tag__Wrapper",
   componentId: "sc-rdxtch-0"
 })(["", " ", ""], tagTokens.wrapper.base, function (_ref) {
@@ -7789,7 +7800,7 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
       htmlProps = props.htmlProps,
       rest = tslib.__rest(props, ["text", "purpose", "id", "className", "htmlProps"]);
 
-  return jsxRuntime.jsx(Wrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+  return jsxRuntime.jsx(Wrapper$1, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
     forwardedAs: "span",
     typographyType: "bodySans01",
     ref: ref,
@@ -7910,6 +7921,31 @@ var ChipGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
+var Wrapper = styled__default["default"].span.withConfig({
+  displayName: "VisuallyHidden__Wrapper",
+  componentId: "sc-ciubxt-0"
+})(["width:1px;height:1px;margin:0px;padding:0px;top:0px;inset-inline-start:0px;overflow:hidden;clip:rect(0px,0px,0px,0px);border:0px;"]);
+var VisuallyHidden = function VisuallyHidden(props) {
+  var children = props.children,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      as = props.as,
+      rest = tslib.__rest(props, ["children", "id", "className", "htmlProps", "as"]);
+
+  if (as === 'div') {
+    return jsxRuntime.jsx(Wrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+      as: as
+    }, {
+      children: children
+    }));
+  }
+
+  return jsxRuntime.jsx(Wrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    children: children
+  }));
+};
+
 exports.Body = Body$1;
 exports.Breadcrumb = Breadcrumb;
 exports.Breadcrumbs = Breadcrumbs;
@@ -7971,7 +8007,9 @@ exports.ToggleButton = ToggleButton;
 exports.ToggleButtonGroup = ToggleButtonGroup;
 exports.Tooltip = Tooltip;
 exports.Typography = Typography;
+exports.VisuallyHidden = VisuallyHidden;
 exports.createSelectOptions = createSelectOptions;
 exports.getTextColor = getTextColor;
+exports.inlineElements = inlineElements;
 exports.isTextColor = isTextColor;
 exports.searchFilter = searchFilter;

package/dist/cjs/utils/idGenerator.d.ts

@@ -1,3 +1,3 @@
-export declare const derivativeIdGenerator: (prefix: string, suffix: string, value?: string | number) => string | undefined;
+export declare const derivativeIdGenerator: (prefix: string, suffix: string, value?: string | number | boolean) => string | undefined;
 export declare const idArrayGenerator: (values: (string | undefined)[]) => string[] | undefined;
 export declare const spaceSeparatedIdListGenerator: (values: (string | undefined)[]) => string | undefined;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const Checkbox: import("react").ForwardRefExoticComponent<{
-    htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "onChange"> | undefined;
-} & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "onChange">, "id" | "className"> & {
+    htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "defaultChecked" | "value" | "defaultValue" | "onChange" | "onBlur"> | undefined;
+} & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "defaultChecked" | "value" | "defaultValue" | "onChange" | "onBlur">, "id" | "className"> & {
     label?: string | undefined;
     error?: boolean | undefined;
     disabled?: boolean | undefined;
@@ -11,5 +11,9 @@ export declare const Checkbox: import("react").ForwardRefExoticComponent<{
     'aria-describedby'?: string | undefined;
     name?: string | undefined;
     checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    value?: string | number | readonly string[] | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
     onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -3,17 +3,21 @@ import { CheckboxProps } from '.';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
-        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "checked"> | undefined;
-    } & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "checked">, "id" | "className"> & {
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked"> | undefined;
+    } & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked">, "id" | "className"> & {
         label?: string | undefined;
         error?: boolean | undefined;
         disabled?: boolean | undefined;
         readOnly?: boolean | undefined;
         indeterminate?: boolean | undefined;
     } & {
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
         'aria-describedby'?: string | undefined;
+        onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
         onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
         name?: string | undefined;
+        value?: string | number | readonly string[] | undefined;
         checked?: boolean | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {

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

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 import { BaseComponentProps } from '../../types';
-declare type PickedHTMLAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'checked' | 'onChange'>;
+declare type PickedHTMLAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'checked' | 'defaultChecked' | 'value' | 'defaultValue' | 'onChange' | 'onBlur'>;
 export declare type CheckboxProps = BaseComponentProps<HTMLInputElement, {
     /** Ledetekst for inputelementet. */
     label?: string;

package/dist/components/Datepicker/Datepicker.js

@@ -33,8 +33,9 @@ var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       tip = _a.tip,
       style = _a.style,
       className = _a.className,
+      max = _a.max,
       ariaDescribedby = _a['aria-describedby'],
-      rest = __rest(_a, ["id", "type", "required", "readOnly", "disabled", "label", "width", "errorMessage", "tip", "style", "className", 'aria-describedby']);
+      rest = __rest(_a, ["id", "type", "required", "readOnly", "disabled", "label", "width", "errorMessage", "tip", "style", "className", "max", 'aria-describedby']);
 
   var _useState = useState(id !== null && id !== void 0 ? id : "datepickerInput-".concat(nextUniqueId++)),
       _useState2 = _slicedToArray(_useState, 1),
@@ -57,7 +58,8 @@ var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     disabled: disabled,
     type: type,
     'aria-describedby': spaceSeparatedIdListGenerator([tipId, errorMessageId, ariaDescribedby]),
-    'aria-invalid': hasErrorMessage ? true : undefined
+    'aria-invalid': hasErrorMessage ? true : undefined,
+    max: max || '9999-12-31'
   }, rest);
   var outerInputContainerProps = {
     width: componentWidth,

package/dist/components/TextInput/TextInput.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const TextInput: React.ForwardRefExoticComponent<{
     multiline?: boolean | undefined;
+    withCharacterCounter?: boolean | undefined;
 } & {
     label?: string | undefined;
     width?: import("csstype").Property.Width<string> | undefined;

package/dist/components/TextInput/TextInput.js

@@ -26,10 +26,12 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
       width = _a$width === void 0 ? textInputTokens.wrapper.defaultWidth : _a$width,
       _a$type = _a.type,
       type = _a$type === void 0 ? 'text' : _a$type,
+      _a$withCharacterCount = _a.withCharacterCounter,
+      withCharacterCounter = _a$withCharacterCount === void 0 ? true : _a$withCharacterCount,
       className = _a.className,
       style = _a.style,
       ariaDescribedby = _a['aria-describedby'],
-      rest = __rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "multiline", "onChange", "id", "width", "type", "className", "style", 'aria-describedby']);
+      rest = __rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "multiline", "onChange", "id", "width", "type", "withCharacterCounter", "className", "style", 'aria-describedby']);
 
   var textAreaRef = useRef(null);
 
@@ -69,7 +71,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var hasLabel = !!label;
   var labelPresence = hasLabel ? 'hasLabel' : 'noLabel';
   var hasMessage = hasErrorMessage || hasTip || !!maxLength;
-  var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter', maxLength);
+  var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter', maxLength && withCharacterCounter);
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
   var generalInputProps = Object.assign({
@@ -125,7 +127,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
         message: tip,
         messageType: "tip",
         id: tipId
-      }), maxLength && Number.isInteger(maxLength) && maxLength > 0 && jsx(CharCounter, {
+      }), maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && jsx(CharCounter, {
         id: characterCounterId,
         current: text.length,
         max: maxLength

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

@@ -4,6 +4,7 @@ declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
         multiline?: boolean | undefined;
+        withCharacterCounter?: boolean | undefined;
     } & {
         label?: string | undefined;
         width?: import("csstype").Property.Width<string> | undefined;

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

@@ -3,4 +3,6 @@ import { InputProps } from '../../helpers';
 export declare type TextInputProps = {
     /**Gjør inputfeltet om til `<textarea>`. */
     multiline?: boolean;
+    /** Spesifiserer om tegntelleren skal vises. */
+    withCharacterCounter?: boolean;
 } & InputProps & InputHTMLAttributes<HTMLTextAreaElement>;

package/dist/components/Typography/Typography.d.ts

@@ -2,6 +2,7 @@ import { ElementType, PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes }
 import { CSSObject } from 'styled-components';
 import { TextColor, OtherTypographyType, AnchorTypographyType, LabelTypographyType } from './Typography.types';
 import { BaseComponentProps } from '../../types';
+export declare const inlineElements: ElementType[];
 export declare function isTextColor(color: string): color is TextColor;
 export declare const getTextColor: (color: TextColor | string) => string;
 export declare type TypographyInteractionProps = {

package/dist/components/Typography/Typography.js

@@ -61,6 +61,12 @@ var getElementType = function getElementType(element) {
   }
 };
 
+var inlineElements = ['a', 'abbr', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button', 'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress', 'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'sub', 'sup', 'svg', 'template', 'textarea', 'time', 'u', 'var', 'video', 'wbr'];
+
+var isInlineElement = function isInlineElement(as) {
+  return inlineElements.indexOf(as) !== -1;
+};
+
 function isTextColor(color) {
   return textColorsArray.indexOf(color) !== -1;
 }
@@ -95,8 +101,9 @@ var StyledTypography = styled.p.withConfig({
   return interactionProps && interactionProps.active && css(["&:active{", "}"], interactionProps.active);
 }, function (_ref5) {
   var withMargins = _ref5.withMargins,
-      typographyType = _ref5.typographyType;
-  return withMargins && typographyType ? css(["", ""], typographyTokens.typographyType[typographyType].margins.base) : css(["margin:0;"]);
+      typographyType = _ref5.typographyType,
+      as = _ref5.as;
+  return withMargins && typographyType && isInlineElement(as) ? css(["", " display:block;"], typographyTokens.typographyType[typographyType].margins.base) : withMargins && typographyType ? css(["", ""], typographyTokens.typographyType[typographyType].margins.base) : css(["margin:0;"]);
 }, function (_ref6) {
   var color = _ref6.color;
   return color && css(["color:", ";"], getTextColor(color));
@@ -162,4 +169,4 @@ var Typography = /*#__PURE__*/forwardRef(function (props, ref) {
   }));
 });
 
-export { Typography, getTextColor, isTextColor };
+export { Typography, getTextColor, inlineElements, isTextColor };

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

@@ -47,6 +47,11 @@ declare const _default: {
                 type: string;
             };
         };
+        as: {
+            control: {
+                type: string;
+            };
+        };
     };
     parameters: {
         controls: {

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

@@ -9,4 +9,5 @@ export declare type LabelTypographyType = 'supportingStyleLabel01';
 export declare type OtherTypographyType = TypographyHeadingType | TypographyBodyType | TypographyLeadType | TypographySupportingType;
 export declare type TypographyType = AnchorTypographyType | LabelTypographyType | OtherTypographyType;
 export declare type TextColor = 'interactive' | 'primary' | 'danger' | 'warning' | 'success' | 'onLight' | 'onDark' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'gray7' | 'gray8' | 'gray9';
+export declare type InlineElement = 'a' | 'abbr' | 'audio' | 'b' | 'bdi' | 'bdo' | 'big' | 'br' | 'button' | 'canvas' | 'cite' | 'code' | 'data' | 'datalist' | 'del' | 'dfn' | 'em' | 'embed' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'map' | 'mark' | 'meter' | 'noscript' | 'object' | 'output' | 'picture' | 'progress' | 'q' | 'ruby' | 's' | 'samp' | 'script' | 'select' | 'slot' | 'small' | 'span' | 'strong' | 'sub' | 'sup' | 'svg' | 'template' | 'textarea' | 'time' | 'u' | 'var' | 'video' | 'wbr';
 export {};

package/dist/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BaseComponentPropsWithChildren } from '../../types';
+declare type VisuallyHiddenDivProps = BaseComponentPropsWithChildren<HTMLDivElement, {
+    as: 'div';
+}>;
+declare type VisuallyHiddenSpanProps = BaseComponentPropsWithChildren<HTMLSpanElement, {
+    /**Spesifiserer hvilken HTML tag skal returneres. */
+    as: 'span';
+}>;
+export declare type VisuallyHiddenProps = VisuallyHiddenSpanProps | VisuallyHiddenDivProps;
+export declare const VisuallyHidden: (props: VisuallyHiddenProps) => JSX.Element;
+export {};

package/dist/components/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,31 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var Wrapper = styled.span.withConfig({
+  displayName: "VisuallyHidden__Wrapper",
+  componentId: "sc-ciubxt-0"
+})(["width:1px;height:1px;margin:0px;padding:0px;top:0px;inset-inline-start:0px;overflow:hidden;clip:rect(0px,0px,0px,0px);border:0px;"]);
+var VisuallyHidden = function VisuallyHidden(props) {
+  var children = props.children,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      as = props.as,
+      rest = __rest(props, ["children", "id", "className", "htmlProps", "as"]);
+
+  if (as === 'div') {
+    return jsx(Wrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+      as: as
+    }, {
+      children: children
+    }));
+  }
+
+  return jsx(Wrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    children: children
+  }));
+};
+
+export { VisuallyHidden };

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { VisuallyHiddenProps } from '.';
+declare const _default: {
+    title: string;
+    component: (props: VisuallyHiddenProps) => JSX.Element;
+    argTypes: {
+        as: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: VisuallyHiddenProps) => JSX.Element;
+export declare const Link: () => JSX.Element;
+export declare const TableButtons: () => JSX.Element;

package/dist/components/VisuallyHidden/index.d.ts

@@ -0,0 +1 @@
+export * from './VisuallyHidden';

package/dist/hooks/useFloatPosition.d.ts

@@ -2,10 +2,10 @@
 import { Strategy } from '@floating-ui/react-dom';
 export declare type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
 export declare const useFloatPosition: (arrowRef: HTMLElement | null, placement?: Placement, offset?: number) => {
-    reference: (node: (Element | import("@floating-ui/core").VirtualElement) | null) => void;
+    reference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
     floating: (node: HTMLElement | null) => void;
     refs: {
-        reference: import("react").MutableRefObject<(Element | import("@floating-ui/core").VirtualElement) | null>;
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
         floating: import("react").MutableRefObject<HTMLElement | null>;
     };
     styles: {

package/dist/index.d.ts

@@ -32,3 +32,4 @@ export * from './components/ToggleButton';
 export * from './components/Tabs';
 export * from './components/Tag';
 export * from './components/Chip';
+export * from './components/VisuallyHidden';

package/dist/index.js

@@ -9,7 +9,7 @@ export { Select, createSelectOptions, searchFilter } from './components/Select/S
 export { GlobalMessage } from './components/GlobalMessage/GlobalMessage.js';
 export { LocalMessage } from './components/LocalMessage/LocalMessage.js';
 export { Search } from './components/Search/Search.js';
-export { Typography, getTextColor, isTextColor } from './components/Typography/Typography.js';
+export { Typography, getTextColor, inlineElements, isTextColor } from './components/Typography/Typography.js';
 export { Table } from './components/Table/Table.js';
 export { Body } from './components/Table/Body.js';
 export { Head } from './components/Table/Head.js';
@@ -58,3 +58,4 @@ export { TabPanels } from './components/Tabs/TabPanels.js';
 export { Tag } from './components/Tag/Tag.js';
 export { Chip } from './components/Chip/Chip.js';
 export { ChipGroup } from './components/Chip/ChipGroup.js';
+export { VisuallyHidden } from './components/VisuallyHidden/VisuallyHidden.js';

package/dist/utils/idGenerator.d.ts

@@ -1,3 +1,3 @@
-export declare const derivativeIdGenerator: (prefix: string, suffix: string, value?: string | number) => string | undefined;
+export declare const derivativeIdGenerator: (prefix: string, suffix: string, value?: string | number | boolean) => string | undefined;
 export declare const idArrayGenerator: (values: (string | undefined)[]) => string[] | undefined;
 export declare const spaceSeparatedIdListGenerator: (values: (string | undefined)[]) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -62,7 +62,7 @@
     "@testing-library/user-event": "^14.1.0",
     "@types/jest": "^27.4.1",
     "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
+    "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.9",
     "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@typescript-eslint/parser": "^5.19.0",
@@ -72,7 +72,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-storybook": "^0.5.13",
+    "eslint-plugin-storybook": "^0.6.1",
     "jest": "^27.5.1 ",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -80,7 +80,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-import-css": "^3.0.3",
     "rollup-plugin-sass": "^1.2.12",
-    "rollup-plugin-typescript2": "^0.31.2",
+    "rollup-plugin-typescript2": "^0.32.1",
     "ts-jest": "^27.1.4",
     "typescript": "^4.6.3"
   },
@@ -111,7 +111,7 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@floating-ui/react-dom": "^0.6.3",
+    "@floating-ui/react-dom": "^0.7.2",
     "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.6.3",
     "focus-visible": "^5.2.0",