@norges-domstoler/dds-components 21.18.0 → 21.19.1

package/dist/index.d.mts

@@ -693,6 +693,8 @@ interface PrimitiveLayoutProps {
     rowGap?: ResponsiveProp<Property.RowGap | SpacingScale>;
     /** CSS `column-gap`. Støtter standardverdier og dds spacing tokens skala, per brekkpunkt eller samme for alle skjermstørrelser. */
     columnGap?: ResponsiveProp<Property.ColumnGap | SpacingScale>;
+    /** CSS `word-break`. Støtter verdi per brekkpunkt eller samme for alle skjermstørrelser. */
+    wordBreak?: ResponsiveProp<Property.WordBreak>;
 }
 type ResponsiveProps = PrimitiveDisplayProps & PrimitiveLayoutProps;
 type ResponsiveStackProps = Omit<ResponsiveProps, 'display' | 'flexDirection'>;
@@ -2306,6 +2308,25 @@ declare const Typography: {
     displayName: string;
 };
 
+declare const ICON_SIZES: ["small", "medium", "large", "inherit"];
+type IconSize = (typeof ICON_SIZES)[number];
+type IconProps = BaseComponentProps<SVGSVGElement, {
+    /**Ikonet importert fra `@norges-domstoler/dds-components`. */
+    icon: SvgIcon;
+    /**Størrelsen på ikonet.
+     * @default "medium"
+     */
+    iconSize?: IconSize;
+    /**Fargen på ikonet.
+     * @default "currentcolor"
+     */
+    color?: TextColor;
+}, Omit<HTMLAttributes<SVGSVGElement>, 'color'>>;
+declare function Icon(props: IconProps): react.JSX.Element;
+declare namespace Icon {
+    var displayName: string;
+}
+
 interface CommonInputProps {
     /**Ledetekst. */
     label?: string;
@@ -2326,6 +2347,10 @@ type InputProps = CommonInputProps & {
      */
     componentSize?: InputSize;
 } & Omit<ComponentPropsWithRef<'input'>, 'width' | 'height'>;
+interface InputIconProps {
+    /** Ikonet som vises i komponenten. */
+    icon?: SvgIcon;
+}
 
 declare const defaultTypographyType: TypographyBodyType;
 declare const defaultTypographyTypeClassName: HyphenTypographyType;
@@ -2726,6 +2751,8 @@ type DateFieldProps<T extends DateValue$1 = CalendarDate> = AriaDateFieldOptions
     groupProps?: ReturnType<typeof useDatePicker>['groupProps'];
     ref?: Ref<HTMLDivElement>;
     clearable?: boolean;
+    tipId?: string;
+    errorMessageId?: string;
 } & Pick<InputProps, 'componentSize' | 'errorMessage' | 'tip' | 'disabled' | 'style' | 'width' | 'className'>;
 
 interface DatePickerProps extends Omit<AriaDatePickerProps<CalendarDate>, 'granularity'>, Pick<DateFieldProps<CalendarDate>, 'componentSize' | 'tip' | 'style'>, Pick<ResponsiveProps, 'width'> {
@@ -3136,12 +3163,19 @@ type InputMessageProps = BaseComponentProps<HTMLDivElement, {
      * @default "error"
      */
     messageType: InputMessageType;
-}>;
+} & Pick<ResponsiveProps, 'margin' | 'marginInline' | 'marginBlock'>>;
 declare const InputMessage: {
     ({ message, messageType, id, className, htmlProps, children, ...rest }: InputMessageProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
-declare const renderInputMessage: (tip?: string, tipId?: string, errorMessage?: string, errorMessageId?: string) => react_jsx_runtime.JSX.Element;
+interface RenderInputMessageProps {
+    tip?: string;
+    tipId?: string;
+    errorMessage?: string;
+    errorMessageId?: string;
+    noSpacing?: boolean;
+}
+declare const renderInputMessage: ({ tip, tipId, errorMessage, errorMessageId, noSpacing, }: RenderInputMessageProps) => react_jsx_runtime.JSX.Element;
 
 type FormSummaryHeaderProps = ComponentPropsWithRef<'div'>;
 declare function FormSummaryHeader({ ...props }: FormSummaryHeaderProps): react_jsx_runtime.JSX.Element;
@@ -3170,25 +3204,6 @@ declare function FormSummaryEmptyValue(): react_jsx_runtime.JSX.Element;
 type FormSummaryErrorProps = Omit<InputMessageProps, 'messageType' | 'message'>;
 declare function FormSummaryError({ ...props }: FormSummaryErrorProps): react_jsx_runtime.JSX.Element;
 
-declare const ICON_SIZES: ["small", "medium", "large", "inherit"];
-type IconSize = (typeof ICON_SIZES)[number];
-type IconProps = BaseComponentProps<SVGSVGElement, {
-    /**Ikonet importert fra `@norges-domstoler/dds-components`. */
-    icon: SvgIcon;
-    /**Størrelsen på ikonet.
-     * @default "medium"
-     */
-    iconSize?: IconSize;
-    /**Fargen på ikonet.
-     * @default "currentcolor"
-     */
-    color?: TextColor;
-}, Omit<HTMLAttributes<SVGSVGElement>, 'color'>>;
-declare function Icon(props: IconProps): react.JSX.Element;
-declare namespace Icon {
-    var displayName: string;
-}
-
 type GlobalMessagePurpose = 'info' | 'warning' | 'danger';
 type GlobalMessageProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     /**Meldingen som vises til brukeren. Brukes kun når meldingen er en `string`. */
@@ -3799,8 +3814,6 @@ type SelectProps<Option = unknown, IsMulti extends boolean = false> = {
      * @default "medium"
      */
     componentSize?: InputSize;
-    /**Ikonet som vises i komponenten. */
-    icon?: SvgIcon;
     /**Nedtrekkslisten blir `readonly` og får readOnly styling. */
     readOnly?: boolean;
     /** CSS klassenavn. */
@@ -3815,7 +3828,7 @@ type SelectProps<Option = unknown, IsMulti extends boolean = false> = {
     'data-testid'?: string;
     /**Ref til komponenten. */
     ref?: SelectForwardRefType<Option, IsMulti>;
-} & CommonInputProps & Pick<HTMLAttributes<HTMLInputElement>, 'aria-required'> & WrappedReactSelectProps<Option, IsMulti, GroupBase<Option>>;
+} & CommonInputProps & InputIconProps & Pick<HTMLAttributes<HTMLInputElement>, 'aria-required'> & WrappedReactSelectProps<Option, IsMulti, GroupBase<Option>>;
 type SelectForwardRefType<Option, IsMulti extends boolean> = Ref<SelectInstance<Option, IsMulti, GroupBase<Option>>>;
 declare function Select<Option = unknown, IsMulti extends boolean = false>({ id, label, componentSize, errorMessage, tip, 'aria-required': ariaRequired, readOnly, options, isMulti, value, icon, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, menuPortalTarget, customOptionElement, customSingleValueElement, 'data-testid': dataTestId, onKeyDown, openMenuOnClick, ref, instanceId, afterLabelContent, ...rest }: SelectProps<Option, IsMulti>): react_jsx_runtime.JSX.Element;
 declare namespace Select {
@@ -3827,8 +3840,8 @@ type NativeSelectProps = {
     clearable?: boolean;
     /** Implementerer `readOnly` oppførsel etter standard for `<input>` og setter `readOnly` styling. */
     readOnly?: InputProps['readOnly'];
-} & CommonInputProps & Pick<InputProps, 'componentSize'> & ComponentPropsWithRef<'select'>;
-declare const NativeSelect: ({ ref, id, children, componentSize, label, multiple, readOnly, errorMessage, tip, required, "aria-required": ariaRequired, "aria-describedby": ariaDescribedby, width, className, style, onKeyDown, onMouseDown, clearable, afterLabelContent, onChange, ...rest }: NativeSelectProps) => react_jsx_runtime.JSX.Element;
+} & CommonInputProps & Pick<InputProps, 'componentSize'> & InputIconProps & ComponentPropsWithRef<'select'>;
+declare const NativeSelect: ({ ref, id, children, componentSize, label, multiple, readOnly, errorMessage, tip, required, "aria-required": ariaRequired, "aria-describedby": ariaDescribedby, width, className, style, onKeyDown, onMouseDown, clearable, afterLabelContent, onChange, icon, ...rest }: NativeSelectProps) => react_jsx_runtime.JSX.Element;
 type NativeSelectPlaceholderProps = ComponentPropsWithRef<'option'>;
 declare const NativeSelectPlaceholder: {
     ({ children, value, ...rest }: NativeSelectPlaceholderProps): react_jsx_runtime.JSX.Element;
@@ -4195,11 +4208,9 @@ declare const TextArea: {
     displayName: string;
 };
 
-type TextInputProps = Omit<InputProps, 'prefix'> & {
+type TextInputProps = Omit<InputProps, 'prefix'> & InputIconProps & {
     /** Spesifiserer om tegntelleren skal vises ved bruk av `maxLength` attributt. */
     withCharacterCounter?: boolean;
-    /** Ikonet som vises i komponenten. */
-    icon?: SvgIcon;
     /**
      * Prefiks som vises før inputfeltet. **OBS!** Prefiks leses ikke av skjermleser og skal derfor ikke brukes som en erstatter for en beskrivende label.
      * */

package/dist/index.d.ts

@@ -693,6 +693,8 @@ interface PrimitiveLayoutProps {
     rowGap?: ResponsiveProp<Property.RowGap | SpacingScale>;
     /** CSS `column-gap`. Støtter standardverdier og dds spacing tokens skala, per brekkpunkt eller samme for alle skjermstørrelser. */
     columnGap?: ResponsiveProp<Property.ColumnGap | SpacingScale>;
+    /** CSS `word-break`. Støtter verdi per brekkpunkt eller samme for alle skjermstørrelser. */
+    wordBreak?: ResponsiveProp<Property.WordBreak>;
 }
 type ResponsiveProps = PrimitiveDisplayProps & PrimitiveLayoutProps;
 type ResponsiveStackProps = Omit<ResponsiveProps, 'display' | 'flexDirection'>;
@@ -2306,6 +2308,25 @@ declare const Typography: {
     displayName: string;
 };
 
+declare const ICON_SIZES: ["small", "medium", "large", "inherit"];
+type IconSize = (typeof ICON_SIZES)[number];
+type IconProps = BaseComponentProps<SVGSVGElement, {
+    /**Ikonet importert fra `@norges-domstoler/dds-components`. */
+    icon: SvgIcon;
+    /**Størrelsen på ikonet.
+     * @default "medium"
+     */
+    iconSize?: IconSize;
+    /**Fargen på ikonet.
+     * @default "currentcolor"
+     */
+    color?: TextColor;
+}, Omit<HTMLAttributes<SVGSVGElement>, 'color'>>;
+declare function Icon(props: IconProps): react.JSX.Element;
+declare namespace Icon {
+    var displayName: string;
+}
+
 interface CommonInputProps {
     /**Ledetekst. */
     label?: string;
@@ -2326,6 +2347,10 @@ type InputProps = CommonInputProps & {
      */
     componentSize?: InputSize;
 } & Omit<ComponentPropsWithRef<'input'>, 'width' | 'height'>;
+interface InputIconProps {
+    /** Ikonet som vises i komponenten. */
+    icon?: SvgIcon;
+}
 
 declare const defaultTypographyType: TypographyBodyType;
 declare const defaultTypographyTypeClassName: HyphenTypographyType;
@@ -2726,6 +2751,8 @@ type DateFieldProps<T extends DateValue$1 = CalendarDate> = AriaDateFieldOptions
     groupProps?: ReturnType<typeof useDatePicker>['groupProps'];
     ref?: Ref<HTMLDivElement>;
     clearable?: boolean;
+    tipId?: string;
+    errorMessageId?: string;
 } & Pick<InputProps, 'componentSize' | 'errorMessage' | 'tip' | 'disabled' | 'style' | 'width' | 'className'>;
 
 interface DatePickerProps extends Omit<AriaDatePickerProps<CalendarDate>, 'granularity'>, Pick<DateFieldProps<CalendarDate>, 'componentSize' | 'tip' | 'style'>, Pick<ResponsiveProps, 'width'> {
@@ -3136,12 +3163,19 @@ type InputMessageProps = BaseComponentProps<HTMLDivElement, {
      * @default "error"
      */
     messageType: InputMessageType;
-}>;
+} & Pick<ResponsiveProps, 'margin' | 'marginInline' | 'marginBlock'>>;
 declare const InputMessage: {
     ({ message, messageType, id, className, htmlProps, children, ...rest }: InputMessageProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
-declare const renderInputMessage: (tip?: string, tipId?: string, errorMessage?: string, errorMessageId?: string) => react_jsx_runtime.JSX.Element;
+interface RenderInputMessageProps {
+    tip?: string;
+    tipId?: string;
+    errorMessage?: string;
+    errorMessageId?: string;
+    noSpacing?: boolean;
+}
+declare const renderInputMessage: ({ tip, tipId, errorMessage, errorMessageId, noSpacing, }: RenderInputMessageProps) => react_jsx_runtime.JSX.Element;
 
 type FormSummaryHeaderProps = ComponentPropsWithRef<'div'>;
 declare function FormSummaryHeader({ ...props }: FormSummaryHeaderProps): react_jsx_runtime.JSX.Element;
@@ -3170,25 +3204,6 @@ declare function FormSummaryEmptyValue(): react_jsx_runtime.JSX.Element;
 type FormSummaryErrorProps = Omit<InputMessageProps, 'messageType' | 'message'>;
 declare function FormSummaryError({ ...props }: FormSummaryErrorProps): react_jsx_runtime.JSX.Element;
 
-declare const ICON_SIZES: ["small", "medium", "large", "inherit"];
-type IconSize = (typeof ICON_SIZES)[number];
-type IconProps = BaseComponentProps<SVGSVGElement, {
-    /**Ikonet importert fra `@norges-domstoler/dds-components`. */
-    icon: SvgIcon;
-    /**Størrelsen på ikonet.
-     * @default "medium"
-     */
-    iconSize?: IconSize;
-    /**Fargen på ikonet.
-     * @default "currentcolor"
-     */
-    color?: TextColor;
-}, Omit<HTMLAttributes<SVGSVGElement>, 'color'>>;
-declare function Icon(props: IconProps): react.JSX.Element;
-declare namespace Icon {
-    var displayName: string;
-}
-
 type GlobalMessagePurpose = 'info' | 'warning' | 'danger';
 type GlobalMessageProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     /**Meldingen som vises til brukeren. Brukes kun når meldingen er en `string`. */
@@ -3799,8 +3814,6 @@ type SelectProps<Option = unknown, IsMulti extends boolean = false> = {
      * @default "medium"
      */
     componentSize?: InputSize;
-    /**Ikonet som vises i komponenten. */
-    icon?: SvgIcon;
     /**Nedtrekkslisten blir `readonly` og får readOnly styling. */
     readOnly?: boolean;
     /** CSS klassenavn. */
@@ -3815,7 +3828,7 @@ type SelectProps<Option = unknown, IsMulti extends boolean = false> = {
     'data-testid'?: string;
     /**Ref til komponenten. */
     ref?: SelectForwardRefType<Option, IsMulti>;
-} & CommonInputProps & Pick<HTMLAttributes<HTMLInputElement>, 'aria-required'> & WrappedReactSelectProps<Option, IsMulti, GroupBase<Option>>;
+} & CommonInputProps & InputIconProps & Pick<HTMLAttributes<HTMLInputElement>, 'aria-required'> & WrappedReactSelectProps<Option, IsMulti, GroupBase<Option>>;
 type SelectForwardRefType<Option, IsMulti extends boolean> = Ref<SelectInstance<Option, IsMulti, GroupBase<Option>>>;
 declare function Select<Option = unknown, IsMulti extends boolean = false>({ id, label, componentSize, errorMessage, tip, 'aria-required': ariaRequired, readOnly, options, isMulti, value, icon, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, menuPortalTarget, customOptionElement, customSingleValueElement, 'data-testid': dataTestId, onKeyDown, openMenuOnClick, ref, instanceId, afterLabelContent, ...rest }: SelectProps<Option, IsMulti>): react_jsx_runtime.JSX.Element;
 declare namespace Select {
@@ -3827,8 +3840,8 @@ type NativeSelectProps = {
     clearable?: boolean;
     /** Implementerer `readOnly` oppførsel etter standard for `<input>` og setter `readOnly` styling. */
     readOnly?: InputProps['readOnly'];
-} & CommonInputProps & Pick<InputProps, 'componentSize'> & ComponentPropsWithRef<'select'>;
-declare const NativeSelect: ({ ref, id, children, componentSize, label, multiple, readOnly, errorMessage, tip, required, "aria-required": ariaRequired, "aria-describedby": ariaDescribedby, width, className, style, onKeyDown, onMouseDown, clearable, afterLabelContent, onChange, ...rest }: NativeSelectProps) => react_jsx_runtime.JSX.Element;
+} & CommonInputProps & Pick<InputProps, 'componentSize'> & InputIconProps & ComponentPropsWithRef<'select'>;
+declare const NativeSelect: ({ ref, id, children, componentSize, label, multiple, readOnly, errorMessage, tip, required, "aria-required": ariaRequired, "aria-describedby": ariaDescribedby, width, className, style, onKeyDown, onMouseDown, clearable, afterLabelContent, onChange, icon, ...rest }: NativeSelectProps) => react_jsx_runtime.JSX.Element;
 type NativeSelectPlaceholderProps = ComponentPropsWithRef<'option'>;
 declare const NativeSelectPlaceholder: {
     ({ children, value, ...rest }: NativeSelectPlaceholderProps): react_jsx_runtime.JSX.Element;
@@ -4195,11 +4208,9 @@ declare const TextArea: {
     displayName: string;
 };
 
-type TextInputProps = Omit<InputProps, 'prefix'> & {
+type TextInputProps = Omit<InputProps, 'prefix'> & InputIconProps & {
     /** Spesifiserer om tegntelleren skal vises ved bruk av `maxLength` attributt. */
     withCharacterCounter?: boolean;
-    /** Ikonet som vises i komponenten. */
-    icon?: SvgIcon;
     /**
      * Prefiks som vises før inputfeltet. **OBS!** Prefiks leses ikke av skjermleser og skal derfor ikke brukes som en erstatter for en beskrivende label.
      * */