@norges-domstoler/dds-components 8.0.1 → 9.0.0

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

@@ -1,14 +1,8 @@
 import React from 'react';
 import { InputSize } from '../../helpers';
-import { Property } from 'csstype';
-export declare const TextInput: React.ForwardRefExoticComponent<{
-    multiline?: boolean | undefined;
+export declare const TextInput: React.ForwardRefExoticComponent<import("../../helpers").CommonInputProps & {
+    componentSize?: InputSize | undefined;
+} & React.InputHTMLAttributes<HTMLInputElement> & {
     withCharacterCounter?: boolean | undefined;
     icon?: import("../../icons/utils").SvgIcon | undefined;
-} & {
-    label?: string | undefined;
-    componentSize?: InputSize | undefined;
-    width?: Property.Width<string> | undefined;
-    tip?: string | undefined;
-    errorMessage?: string | undefined;
-} & React.InputHTMLAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLInputElement>>;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/components/TextInput/TextInput.js

@@ -1,18 +1,17 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useEffect, useId } from 'react';
-import { InputMessage } from '../InputMessage/InputMessage.js';
+import { forwardRef, useState, useId } from 'react';
 import CharCounter from './CharCounter.js';
 import '../../helpers/Backdrop/Backdrop.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import { OuterInputContainer, InputContainer, StatefulInput } from '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
-import { getFormInputIconSize } from '../../helpers/Input/Input.utils.js';
+import { getDefaultText, getFormInputIconSize, renderInputMessage } from '../../helpers/Input/Input.utils.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
-import { TextArea, StyledIcon, StyledInput, MessageContainer } from './TextInput.styles.js';
+import { StyledIcon, StyledInput, MessageContainer } from './TextInput.styles.js';
 import '../Typography/Typography/Typography.js';
 import { Label } from '../Typography/Label/Label.js';
 import '../Typography/Link/Link.js';
@@ -40,7 +39,6 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
       tip = _a.tip,
       required = _a.required,
       maxLength = _a.maxLength,
-      multiline = _a.multiline,
       onChange = _a.onChange,
       id = _a.id,
       width = _a.width,
@@ -57,21 +55,13 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
       ariaRequired = _a['aria-required'],
       ariaDescribedby = _a['aria-describedby'],
       icon = _a.icon,
-      rest = __rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "multiline", "onChange", "id", "width", "componentSize", "type", "withCharacterCounter", "className", "style", "value", "defaultValue", 'aria-required', 'aria-describedby', "icon"]);
-
-  var textAreaRef = useRef(null);
+      rest = __rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "onChange", "id", "width", "componentSize", "type", "withCharacterCounter", "className", "style", "value", "defaultValue", 'aria-required', 'aria-describedby', "icon"]);
 
   var _useState = useState(getDefaultText(value, defaultValue)),
       _useState2 = _slicedToArray(_useState, 2),
       text = _useState2[0],
       setText = _useState2[1];
 
-  useEffect(function () {
-    if (textAreaRef && textAreaRef.current) {
-      textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight + 2, "px");
-    }
-  }, [text]);
-
   var onChangeHandler = function onChangeHandler(event) {
     setText(event.target.value);
 
@@ -80,14 +70,6 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
   };
 
-  var onChangeHandlerMultiline = function onChangeHandlerMultiline(event) {
-    setText(event.target.value);
-
-    if (onChange) {
-      onChange(event);
-    }
-  };
-
   var generatedId = useId();
   var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-textInput");
   var hasErrorMessage = !!errorMessage;
@@ -114,7 +96,6 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     'aria-invalid': hasErrorMessage ? true : undefined
   }, rest);
   var outerInputContainerProps = {
-    multiline: multiline,
     className: className,
     style: style,
     width: getWidth(componentSize, width)
@@ -126,11 +107,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
       showRequiredStyling: showRequiredStyling
     }, {
       children: label
-    })), multiline ? jsx(TextArea, Object.assign({
-      ref: textAreaRef,
-      as: "textarea",
-      onChange: onChangeHandlerMultiline
-    }, generalInputProps)) : hasIcon ? jsxs(InputContainer, {
+    })), hasIcon ? jsxs(InputContainer, {
       children: [jsx(StyledIcon, {
         icon: icon,
         iconSize: getFormInputIconSize(componentSize),
@@ -148,15 +125,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
       type: type,
       componentSize: componentSize
     }, generalInputProps)), hasMessage && jsxs(MessageContainer, {
-      children: [hasErrorMessage && jsx(InputMessage, {
-        message: errorMessage,
-        messageType: "error",
-        id: errorMessageId
-      }), hasTip && !errorMessage && jsx(InputMessage, {
-        message: tip,
-        messageType: "tip",
-        id: tipId
-      }), maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && jsx(CharCounter, {
+      children: [renderInputMessage(tip, tipId, errorMessage, errorMessageId), maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && jsx(CharCounter, {
         id: characterCounterId,
         current: text.length,
         max: maxLength
@@ -165,16 +134,4 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   }));
 });
 
-function getDefaultText(value, defaultValue) {
-  if (typeof value === 'string') {
-    return value;
-  }
-
-  if (typeof defaultValue === 'string') {
-    return defaultValue;
-  }
-
-  return '';
-}
-
 export { TextInput };

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

@@ -1,17 +1,12 @@
 import { TextInputProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<{
-        multiline?: boolean | undefined;
+    component: import("react").ForwardRefExoticComponent<import("../../helpers").CommonInputProps & {
+        componentSize?: import("../../helpers").InputSize | undefined;
+    } & import("react").InputHTMLAttributes<HTMLInputElement> & {
         withCharacterCounter?: boolean | undefined;
         icon?: import("../../icons/utils").SvgIcon | undefined;
-    } & {
-        label?: string | undefined;
-        componentSize?: import("../../helpers").InputSize | undefined;
-        width?: import("csstype").Property.Width<string> | undefined;
-        tip?: string | undefined;
-        errorMessage?: string | undefined;
-    } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLInputElement>>;
+    } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {
             control: {
@@ -33,11 +28,6 @@ declare const _default: {
                 type: string;
             };
         };
-        multiline: {
-            control: {
-                type: string;
-            };
-        };
         required: {
             control: {
                 type: string;
@@ -63,9 +53,6 @@ declare const _default: {
 export default _default;
 export declare const TextInputOverview: (args: TextInputProps) => JSX.Element;
 export declare const TextInputOverviewSizes: () => JSX.Element;
-export declare const TextareaOverview: (args: TextInputProps) => JSX.Element;
 export declare const Default: (args: TextInputProps) => JSX.Element;
 export declare const WithLabel: (args: TextInputProps) => JSX.Element;
 export declare const WithCharacterCount: (args: TextInputProps) => JSX.Element;
-export declare const Textarea: (args: TextInputProps) => JSX.Element;
-export declare const TextareaWithLabel: (args: TextInputProps) => JSX.Element;

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

@@ -1,8 +1,5 @@
 import { InputSize } from '../../helpers';
 import { Icon } from '../Icon';
-export declare const TextArea: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly" | "componentSize"> & {
-    hasErrorMessage: boolean;
-} & StyledInputProps, never>;
 export declare const MessageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type StyledIconProps = {
     size: InputSize;
@@ -11,7 +8,7 @@ export declare const StyledIcon: import("styled-components").StyledComponent<typ
 declare type StyledInputProps = {
     hasIcon?: boolean;
 };
-export declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly" | "componentSize"> & {
+export declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
-} & StyledInputProps, never>;
+} & Pick<import("../../helpers").InputProps, "componentSize"> & StyledInputProps, never>;
 export {};

package/dist/components/TextInput/TextInput.styles.js

@@ -5,29 +5,23 @@ import 'react/jsx-runtime';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import { StatefulInput } from '../../helpers/Input/Input.styles.js';
-import { inputTokens } from '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
-import '../ScrollableContainer/Scrollbar.js';
-import '../ScrollableContainer/ScrollableContainer.js';
-import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
 import { Icon } from '../Icon/Icon.js';
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
 var iconSizes = ddsBaseTokens.iconSizes;
 var input = textInputTokens.input,
     icon = textInputTokens.icon;
-var TextArea = styled(StatefulInput).withConfig({
-  displayName: "TextInputstyles__TextArea",
-  componentId: "sc-165zflr-0"
-})(["", " ", " height:auto;resize:vertical;vertical-align:bottom;padding-bottom:", ";", ""], scrollbarStyling.webkit, scrollbarStyling.firefox, input.multiline.paddingBottom, inputTokens.input.sizes.medium.font);
 var MessageContainer = styled.div.withConfig({
   displayName: "TextInputstyles__MessageContainer",
-  componentId: "sc-165zflr-1"
+  componentId: "sc-165zflr-0"
 })(["display:flex;justify-content:space-between;"]);
 var StyledIcon = styled(Icon).withConfig({
   displayName: "TextInputstyles__StyledIcon",
-  componentId: "sc-165zflr-2"
+  componentId: "sc-165zflr-1"
 })(["position:absolute;color:", ";", " z-index:1;"], icon.color, function (_ref) {
   var size = _ref.size,
       iconSize = _ref.iconSize;
@@ -35,11 +29,11 @@ var StyledIcon = styled(Icon).withConfig({
 });
 var StyledInput = styled(StatefulInput).withConfig({
   displayName: "TextInputstyles__StyledInput",
-  componentId: "sc-165zflr-3"
+  componentId: "sc-165zflr-2"
 })(["", ""], function (_ref2) {
   var componentSize = _ref2.componentSize,
       hasIcon = _ref2.hasIcon;
   return hasIcon && componentSize && css(["padding-left:", ";"], input.withIcon[componentSize].paddingLeft);
 });
 
-export { MessageContainer, StyledIcon, StyledInput, TextArea };
+export { MessageContainer, StyledIcon, StyledInput };

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

@@ -1,11 +1,8 @@
-import { InputHTMLAttributes } from 'react';
 import { InputProps } from '../../helpers';
 import { SvgIcon } from '../../icons/utils';
-export declare type TextInputProps = {
-    /**Gjør inputfeltet om til `<textarea>`. */
-    multiline?: boolean;
-    /** Spesifiserer om tegntelleren skal vises. */
+export declare type TextInputProps = InputProps & {
+    /** Spesifiserer om tegntelleren skal vises ved bruk av `maxLength` attributt. */
     withCharacterCounter?: boolean;
     /** Ikonet som vises i komponenten. */
     icon?: SvgIcon;
-} & InputProps & InputHTMLAttributes<HTMLTextAreaElement>;
+};

package/dist/components/ToggleBar/ToggleBar.js

@@ -17,6 +17,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import '../Typography/Link/Link.js';

package/dist/components/ToggleBar/ToggleRadio.js

@@ -6,6 +6,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import { HiddenInput } from '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';

package/dist/components/ToggleBar/ToggleRadio.styles.js

@@ -11,6 +11,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import { HiddenInput } from '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -1,17 +1,6 @@
-import { InputHTMLAttributes } from 'react';
-import { BaseComponentProps } from '../../types';
-import { SvgIcon } from '../../icons/utils';
-export declare type ToggleButtonProps = BaseComponentProps<HTMLInputElement, {
-    /**Ledetekst for inputelementet. */
-    label?: string;
-    /** Ikon. */
-    icon?: SvgIcon;
-}, InputHTMLAttributes<HTMLInputElement>>;
-export declare const ToggleButton: import("react").ForwardRefExoticComponent<Pick<InputHTMLAttributes<HTMLInputElement>, "className" | "id"> & {
-    /**Ledetekst for inputelementet. */
+export declare const ToggleButton: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "checked" | "value">, "className" | "id"> & {
     label?: string | undefined;
-    /** Ikon. */
-    icon?: SvgIcon | undefined;
-} & {
-    htmlProps?: InputHTMLAttributes<HTMLInputElement> | undefined;
+    icon?: import("../../icons/utils").SvgIcon | undefined;
+} & import("../../types").CheckboxPickedHTMLAttributes & {
+    htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "checked" | "value"> | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/ToggleButton/ToggleButton.js

@@ -16,6 +16,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import { HiddenInput } from '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 

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

@@ -1,11 +1,11 @@
 import { ToggleButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked">, "id" | "className"> & {
         label?: string | undefined;
         icon?: import("../../icons/utils").SvgIcon | undefined;
-    } & {
-        htmlProps?: import("react").InputHTMLAttributes<HTMLInputElement> | undefined;
+    } & import("../../types").CheckboxPickedHTMLAttributes & {
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked"> | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {

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

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from 'react';
+import { SvgIcon } from '../../icons/utils';
+import { BaseComponentProps } from '../../types';
+import { CheckboxPickedHTMLAttributes } from '../../types/CheckboxPickedHTMLAttributes';
+export declare type ToggleButtonProps = BaseComponentProps<HTMLInputElement, {
+    /**Ledetekst for inputelementet. */
+    label?: string;
+    /** Ikon. */
+    icon?: SvgIcon;
+} & CheckboxPickedHTMLAttributes, Omit<InputHTMLAttributes<HTMLInputElement>, keyof CheckboxPickedHTMLAttributes>>;

package/dist/components/ToggleButton/ToggleButtonGroup.js

@@ -9,6 +9,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import '../Typography/Link/Link.js';

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

@@ -1,2 +1,3 @@
 export * from './ToggleButton';
 export * from './ToggleButtonGroup';
+export * from './ToggleButton.types';

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

@@ -1,7 +1,7 @@
 import { TooltipProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "style" | "children" | "onMouseLeave" | "onMouseOver">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver">, "id" | "className"> & {
         text: string;
         placement?: import("../..").Placement | undefined;
         children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> & import("react").RefAttributes<HTMLElement>;
@@ -12,7 +12,7 @@ declare const _default: {
         onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
     } & {
-        htmlProps?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "style" | "children" | "onMouseLeave" | "onMouseOver"> | undefined;
+        htmlProps?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver"> | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     argTypes: {
         text: {

package/dist/components/Typography/Label/Label.js

@@ -6,6 +6,7 @@ import '../../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../../helpers/HiddenInput/HiddenInput.js';
 import '../../../helpers/Input/Input.styles.js';
 import '../../../helpers/Input/Input.tokens.js';
+import '../../InputMessage/InputMessage.js';
 import '../../../helpers/Paper/Paper.js';
 import { RequiredMarker } from '../../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';

package/dist/helpers/Backdrop/Backdrop.utils.js

@@ -4,13 +4,18 @@ var isVerticalScrollbarDisplayed = function isVerticalScrollbarDisplayed(contain
 
 function handleElementWithBackdropMount(container) {
   if (isVerticalScrollbarDisplayed(container)) {
-    container.style.position = 'fixed';
+    var scrollY = Math.round(window.scrollY);
     container.style.overflowY = 'scroll';
+    container.style.position = 'fixed';
+    container.style.top = "-".concat(scrollY, "px");
   }
 }
 function handleElementWithBackdropUnmount(container) {
-  container.style.removeProperty('position');
+  var scrollY = parseInt(document.body.style.top) || 0;
   container.style.removeProperty('overflow-y');
+  container.style.removeProperty('position');
+  container.style.removeProperty('top');
+  window.scrollTo(0, scrollY * -1);
 }
 
 export { handleElementWithBackdropMount, handleElementWithBackdropUnmount };

package/dist/helpers/Input/Input.styles.d.ts

@@ -1,8 +1,8 @@
 import { Property } from 'csstype';
 export declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const StatefulInput: import("styled-components").StyledComponent<"input", any, Pick<import("./Input.types").InputProps, "disabled" | "readOnly" | "componentSize"> & {
+export declare const StatefulInput: import("styled-components").StyledComponent<"input", any, Pick<import("./Input.types").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
-}, never>;
+} & Pick<import("./Input.types").InputProps, "componentSize">, never>;
 declare type OuterInputContainerProps = {
     width?: Property.Width<string>;
 };

package/dist/helpers/Input/Input.types.d.ts

@@ -1,18 +1,21 @@
 import { InputHTMLAttributes } from 'react';
 import { Property } from 'csstype';
-export declare type InputSize = 'medium' | 'small' | 'tiny';
-export declare type InputProps = {
+export declare type CommonInputProps = {
     /**Ledetekst for input. */
     label?: string;
-    /**Størrelse på inputfeltet. */
-    componentSize?: InputSize;
     /**Bredde for inputfeltet. */
     width?: Property.Width<string>;
     /**Hjelpetekst. */
     tip?: string;
     /**Feilmelding. Setter også error state. */
     errorMessage?: string;
+};
+export declare type InputSize = 'medium' | 'small' | 'tiny';
+export declare type InputProps = CommonInputProps & {
+    /**Størrelse på inputfeltet. */
+    componentSize?: InputSize;
 } & InputHTMLAttributes<HTMLInputElement>;
-export declare type StyledInputProps = Pick<InputProps, 'readOnly' | 'disabled' | 'componentSize'> & {
+export declare type StyledCommonInputProps = Pick<InputProps, 'readOnly' | 'disabled'> & {
     hasErrorMessage: boolean;
 };
+export declare type StyledInputProps = StyledCommonInputProps & Pick<InputProps, 'componentSize'>;

package/dist/helpers/Input/Input.utils.d.ts

@@ -1,3 +1,5 @@
 import { IconSize } from '../../components/Icon';
 import { InputSize } from './Input.types';
 export declare const getFormInputIconSize: (componentSize: InputSize) => IconSize;
+export declare function getDefaultText(value?: string | number | readonly string[], defaultValue?: string | number | readonly string[]): string;
+export declare const renderInputMessage: (tip?: string, tipId?: string, errorMessage?: string, errorMessageId?: string) => JSX.Element;

package/dist/helpers/Input/Input.utils.js

@@ -1,3 +1,6 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { InputMessage } from '../../components/InputMessage/InputMessage.js';
+
 var getFormInputIconSize = function getFormInputIconSize(componentSize) {
   switch (componentSize) {
     case 'medium':
@@ -10,5 +13,29 @@ var getFormInputIconSize = function getFormInputIconSize(componentSize) {
       return 'small';
   }
 };
+function getDefaultText(value, defaultValue) {
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  if (typeof defaultValue === 'string') {
+    return defaultValue;
+  }
+
+  return '';
+}
+var renderInputMessage = function renderInputMessage(tip, tipId, errorMessage, errorMessageId) {
+  return jsxs(Fragment, {
+    children: [errorMessage && errorMessageId && jsx(InputMessage, {
+      message: errorMessage,
+      messageType: "error",
+      id: errorMessageId
+    }), tip && tipId && !errorMessage && jsx(InputMessage, {
+      message: tip,
+      messageType: "tip",
+      id: tipId
+    })]
+  });
+};
 
-export { getFormInputIconSize };
+export { getDefaultText, getFormInputIconSize, renderInputMessage };

package/dist/index.d.ts

@@ -39,3 +39,4 @@ export * from './components/ToggleBar';
 export * from './components/Grid';
 export * from './components/ProgressTracker';
 export * from './hooks';
+export * from './components/TextArea';

package/dist/index.js

@@ -210,3 +210,4 @@ export { useFocusTrap } from './hooks/useFocusTrap.js';
 export { useMountTransition } from './hooks/useMountTransition.js';
 export { ScreenSize, useScreenSize } from './hooks/useScreenSize.js';
 export { useReturnFocusOnBlur } from './hooks/useReturnFocusOnBlur.js';
+export { StyledTextArea, TextArea } from './components/TextArea/TextArea.js';

package/dist/types/CheckboxPickedHTMLAttributes.d.ts

@@ -0,0 +1,2 @@
+import { InputHTMLAttributes } from 'react';
+export declare type CheckboxPickedHTMLAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'checked' | 'defaultChecked' | 'value' | 'defaultValue' | 'onChange' | 'onBlur'>;

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Direction';
 export * from './BaseComponentProps';
+export * from './CheckboxPickedHTMLAttributes';

package/package.json

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