@inera/ids-react 8.2.0 → 9.0.0

package/components/form/textarea/textarea-base.d.ts

@@ -0,0 +1,24 @@
+import { CSSProperties } from "react";
+export interface IDSTextareaBaseProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    id?: string;
+    label?: string;
+    hint?: React.ReactNode;
+    errorMsg?: string;
+    invalid?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    light?: boolean;
+    block?: boolean;
+    autoSize?: boolean;
+    noResize?: boolean;
+    focusAnchor?: boolean;
+    tooltip?: React.ReactNode;
+    textareaRef?: React.Ref<HTMLTextAreaElement>;
+    hintId?: string;
+    errorMsgId?: string;
+    dataTestId?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function IDSTextareaBase({ id, label, hint, hintId, errorMsg, errorMsgId, invalid, required, disabled, readOnly, light, block, autoSize, noResize, focusAnchor, tooltip, textareaRef, dataTestId, className, style, ...props }: IDSTextareaBaseProps): import("react/jsx-runtime").JSX.Element;

package/components/form/textarea/textarea-base.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { IDSErrorMessage } from '../error-message/error-message.js';
+import { useId } from 'react';
+
+function IDSTextareaBase({ id, label, hint, hintId, errorMsg, errorMsgId, invalid, required, disabled, readOnly, light, block, autoSize, noResize, focusAnchor, tooltip, textareaRef, dataTestId, className, style, ...props }) {
+    const reactId = useId();
+    const inputId = !!id ? id : `textarea-base-${reactId}`;
+    const baseHintId = !!hintId ? hintId : `textarea-base-hint-${reactId}`;
+    const baseErrorMsgId = !!errorMsgId ? errorMsgId : `textarea-base-error-${reactId}`;
+    const showErrorMsg = invalid && !!errorMsg;
+    const ariaHandler = showErrorMsg
+        ? {
+            "aria-describedby": baseErrorMsgId
+        }
+        : !!hint
+            ? {
+                "aria-describedby": baseHintId
+            }
+            : {};
+    return (jsxs("div", { className: clsx("ids-textarea", {
+            "ids-textarea--block": block,
+            "ids-textarea--autosize": autoSize,
+            "ids-textarea--no-resize": noResize
+        }, className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: inputId, className: clsx("ids-label", {
+                            "ids-label--disabled": disabled || readOnly
+                        }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("textarea", { ref: textareaRef, id: inputId, className: clsx("ids-textarea__textarea", {
+                    "ids-input--light": light,
+                    "ids-input--invalid": invalid,
+                    "ids-focus-anchor": focusAnchor
+                }), "aria-invalid": invalid, "aria-required": required, "aria-disabled": disabled, required: required, disabled: disabled, readOnly: readOnly, ...ariaHandler, ...props }), hint && (jsx("div", { id: baseHintId, className: "ids-input__hint", children: hint })), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
+}
+
+export { IDSTextareaBase };

package/components/form/textarea/textarea.d.ts

@@ -1,20 +1,19 @@
-import { ReactNode, TextareaHTMLAttributes } from "react";
-interface IDSTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface IDSTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     label?: string;
-    hint?: string | ReactNode;
+    hint?: React.ReactNode;
     errorMsg?: string;
     disabled?: boolean;
     invalid?: boolean;
     required?: boolean;
     noValidation?: boolean;
+    validatesOnBlur?: boolean;
     autoSize?: boolean;
     noResize?: boolean;
     block?: boolean;
     light?: boolean;
     focusAnchor?: boolean;
     readOnly?: boolean;
-    tooltip?: ReactNode;
+    tooltip?: React.ReactNode;
     dataTestId?: string;
 }
 export declare const IDSTextarea: import("react").ForwardRefExoticComponent<IDSTextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
-export {};

package/components/form/textarea/textarea.js

@@ -1,31 +1,15 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useElementId } from '../../utils/hooks/useElementId.js';
-import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
-import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
-import clsx from 'clsx';
+import { IDSTextareaBase } from './textarea-base.js';
 
-const IDSTextarea = forwardRef(({ label = "", hint, errorMsg = "", dataTestId = "", disabled = false, invalid = false, required = false, noValidation = false, autoSize = false, noResize = false, block = false, light = false, readOnly = false, focusAnchor = false, id, tooltip, className, ...props }, ref) => {
-    const fieldId = useElementId(id);
-    const errorMsgId = useElementId();
-    const hintId = useElementId();
+const IDSTextarea = forwardRef(({ id, label, hint, errorMsg, disabled = false, invalid = false, required = false, noValidation = false, validatesOnBlur = false, autoSize = false, noResize = false, block = false, light = false, readOnly = false, focusAnchor = false, dataTestId = "", tooltip, className, children, style, ...props }, ref) => {
     const textareaRef = useRef(null);
     useImperativeHandle(ref, () => textareaRef.current);
-    const hasValidValue = useInputValidity(textareaRef);
-    const isInvalid = (invalid || !hasValidValue) && !noValidation;
-    useAriaDescribedBy(textareaRef, errorMsgId, isInvalid, !!errorMsg, !!hint, hintId);
-    return (jsxs("div", { className: clsx("ids-textarea", {
-            "ids-textarea--block": block,
-            "ids-textarea--autosize": autoSize,
-            "ids-textarea--no-resize": noResize
-        }, className), "data-testid": dataTestId, children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { className: clsx("ids-label", {
-                            "ids-label--disabled": disabled || readOnly
-                        }), htmlFor: fieldId, children: label }), tooltip && tooltip] }), jsx("textarea", { ref: textareaRef, id: fieldId, className: clsx("ids-textarea__textarea", {
-                    "ids-input--light": light,
-                    "ids-focus-anchor": focusAnchor
-                }), "aria-invalid": isInvalid, required: required, "aria-required": required, disabled: disabled, "aria-disabled": disabled, readOnly: readOnly, ...props }), hint && (jsx("div", { id: hintId, className: "ids-input__hint", children: hint })), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
+    const isValid = useInputValidity(textareaRef, validatesOnBlur);
+    const isInvalid = (invalid || !isValid) && !noValidation;
+    return (jsx(IDSTextareaBase, { id: id, label: label, hint: hint, errorMsg: errorMsg, invalid: isInvalid, required: required, disabled: disabled, readOnly: readOnly, light: light, autoSize: autoSize, noResize: noResize, block: block, focusAnchor: focusAnchor, tooltip: tooltip, className: className, textareaRef: textareaRef, dataTestId: dataTestId, style: style, ...props }));
 });
 IDSTextarea.displayName = "IDSTextarea";
 

package/components/form/time/time-base.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from "react";
+export interface IDSTimeBaseProps {
+    id?: string;
+    label?: string;
+    errorMsg?: string;
+    invalid?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    light?: boolean;
+    focusAnchor?: boolean;
+    tooltip?: React.ReactNode;
+    errorMsgId?: string;
+    dataTestId?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+    style?: CSSProperties;
+}
+export declare function IDSTimeBase({ id, label, tooltip, errorMsg, errorMsgId, disabled, invalid, required, light, focusAnchor, dataTestId, className, inputRef, style, ...props }: IDSTimeBaseProps & React.InputHTMLAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;

package/components/form/time/time-base.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { IDSErrorMessage } from '../error-message/error-message.js';
+import { useId } from 'react';
+
+function IDSTimeBase({ id, label, tooltip, errorMsg, errorMsgId, disabled = false, invalid = false, required = false, light, focusAnchor, dataTestId, className, inputRef, style, ...props }) {
+    const reactId = useId();
+    const inputId = !!id ? id : `time-base-${reactId}`;
+    const baseErrorMsgId = !!errorMsgId ? errorMsgId : `time-base-error-${reactId}`;
+    const showErrorMsg = invalid && !!errorMsg;
+    const ariaHandler = showErrorMsg
+        ? {
+            "aria-describedby": baseErrorMsgId
+        }
+        : {};
+    return (jsxs("div", { className: clsx("ids-time", className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { className: clsx("ids-label", {
+                            "ids-label--disabled": disabled
+                        }), htmlFor: inputId, children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("div", { className: "ids-time__input-wrapper", children: jsx("input", { ref: inputRef, id: inputId, type: "time", className: clsx("ids-time__input", {
+                        "ids-input--light": light,
+                        "ids-focus-anchor": focusAnchor
+                    }), "aria-invalid": invalid, "aria-required": required, "aria-disabled": disabled, required: required, disabled: disabled, ...ariaHandler, ...props }) }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
+}
+
+export { IDSTimeBase };

package/components/form/time/time.d.ts

@@ -1,15 +1,16 @@
-import { ReactNode, InputHTMLAttributes } from "react";
-interface IDSTimeProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface IDSTimeProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    id?: string;
     label?: string;
     errorMsg?: string;
-    disabled?: boolean;
     invalid?: boolean;
     required?: boolean;
-    noValidation?: boolean;
-    focusAnchor?: boolean;
+    disabled?: boolean;
     light?: boolean;
-    tooltip?: ReactNode;
+    focusAnchor?: boolean;
+    tooltip?: React.ReactNode;
+    errorMsgId?: string;
     dataTestId?: string;
+    noValidation?: boolean;
+    validatesOnBlur?: boolean;
 }
 export declare const IDSTime: import("react").ForwardRefExoticComponent<IDSTimeProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};

package/components/form/time/time.js

@@ -1,26 +1,15 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useElementId } from '../../utils/hooks/useElementId.js';
-import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
-import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
-import clsx from 'clsx';
+import { IDSTimeBase } from './time-base.js';
 
-const IDSTime = forwardRef(({ label = "", errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, light = false, focusAnchor = false, dataTestId = "", id, tooltip, className, ...props }, ref) => {
-    const fieldId = useElementId(id);
-    const errorMsgId = useElementId();
+const IDSTime = forwardRef(({ invalid = false, noValidation = false, validatesOnBlur = false, style, ...props }, ref) => {
     const inputRef = useRef(null);
     useImperativeHandle(ref, () => inputRef.current);
-    const hasValidValue = useInputValidity(inputRef);
+    const hasValidValue = useInputValidity(inputRef, validatesOnBlur);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
-    useAriaDescribedBy(inputRef, errorMsgId, isInvalid, !!errorMsg);
-    return (jsxs("div", { className: clsx("ids-time", className), "data-testid": dataTestId, children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { className: clsx("ids-label", {
-                            "ids-label--disabled": disabled
-                        }), htmlFor: fieldId, children: label }), tooltip] }), jsx("div", { className: "ids-time__input-wrapper", children: jsx("input", { ref: inputRef, id: fieldId, type: "time", className: clsx("ids-time__input", {
-                        "ids-input--light": light,
-                        "ids-focus-anchor": focusAnchor
-                    }), "aria-invalid": isInvalid, required: required, "aria-required": required, disabled: disabled, "aria-disabled": disabled, ...props }) }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
+    return jsx(IDSTimeBase, { invalid: isInvalid, inputRef: inputRef, ...props, style: style });
 });
 IDSTime.displayName = "IDSTime";
 

package/components/form/toggle/toggle.d.ts

@@ -1,9 +1,8 @@
-import { ReactNode, InputHTMLAttributes } from "react";
+import { InputHTMLAttributes, ReactNode } from "react";
 interface IDSToggleProps extends InputHTMLAttributes<HTMLInputElement> {
     disabled?: boolean;
     tooltip?: ReactNode;
     focusAnchor?: boolean;
-    children?: ReactNode;
     dataTestId?: string;
 }
 export declare const IDSToggle: import("react").ForwardRefExoticComponent<IDSToggleProps & import("react").RefAttributes<HTMLInputElement>>;

package/components/form/toggle/toggle.js

@@ -1,16 +1,13 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useElementId } from '../../utils/hooks/useElementId.js';
+import { forwardRef, useId } from 'react';
 import clsx from 'clsx';
 
-const IDSToggle = forwardRef(({ disabled = false, focusAnchor = false, tooltip, id, children, dataTestId = "", className, ...props }, ref) => {
-    const fieldId = useElementId(id);
-    const toggleRef = useRef(null);
-    useImperativeHandle(ref, () => toggleRef.current);
-    return (jsxs("div", { className: clsx("ids-toggle", className), "data-testid": dataTestId, children: [jsx("input", { id: fieldId, ref: toggleRef, className: clsx("ids-toggle__input", {
+const IDSToggle = forwardRef(({ id, dataTestId, disabled, tooltip, focusAnchor, children, className, ...props }, ref) => {
+    const inputId = !!id ? id : useId();
+    return (jsxs("div", { className: clsx("ids-toggle", className), "data-testid": dataTestId, children: [jsx("input", { ref: ref, id: inputId, className: clsx("ids-toggle__input", {
                     "ids-focus-anchor": focusAnchor
-                }), type: "checkbox", disabled: disabled, ...props }), jsxs("div", { className: "ids-label-tooltip-wrapper ids-label-tooltip-wrapper--inline", children: [jsx("label", { htmlFor: fieldId, className: "ids-toggle__label ids-label ids-label--clickable", children: children }), tooltip] })] }));
+                }), type: "checkbox", role: "switch", "aria-checked": props.defaultChecked || props.checked, disabled: disabled, ...props }), jsxs("div", { className: "ids-label-wrapper", children: [jsx("label", { htmlFor: inputId, className: "ids-toggle__label ids-label ids-label--clickable", children: children }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })] }));
 });
 IDSToggle.displayName = "IDSToggle";
 

package/components/grid/column.d.ts

@@ -12,4 +12,4 @@ export interface IDSColumnProps extends React.HTMLAttributes<HTMLDivElement> {
     alignSelf?: "start" | "center" | "end" | "auto" | "baseline" | "stretch";
     children?: ReactNode;
 }
-export declare function IDSColumn({ cols, s, m, offset, sOffset, mOffset, alignSelf, className, children, style, ...props }: IDSColumnProps): import("react/jsx-runtime").JSX.Element;
+export declare const IDSColumn: React.ForwardRefExoticComponent<IDSColumnProps & React.RefAttributes<HTMLDivElement>>;

package/components/grid/column.js

@@ -1,12 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { useRef } from 'react';
-import '@inera/ids-design/components/grid/column/column.css';
+import { forwardRef } from 'react';
 import clsx from 'clsx';
+import '@inera/ids-design/components/grid/column/column.css';
 
-function IDSColumn({ cols, s, m, offset, sOffset, mOffset, alignSelf, className, children, style, ...props }) {
-    const colRef = useRef(null);
-    const classNames = clsx("ids-col", cols && `ids-col--${cols}`, s && `ids-col--s-${s}`, m && `ids-col--m-${m}`, offset && `ids-col--offset-${offset}`, sOffset && `ids-col--s-offset-${sOffset}`, mOffset && `ids-col--m-offset-${mOffset}`, alignSelf && `ids-col--align-${alignSelf}`, className);
-    return (jsx("div", { ref: colRef, className: classNames, style: { ...style }, ...props, children: children }));
-}
+const IDSColumn = forwardRef(({ cols, s, m, offset, sOffset, mOffset, alignSelf, className, children, style, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: clsx("ids-col", cols && `ids-col--${cols}`, s && `ids-col--s-${s}`, m && `ids-col--m-${m}`, offset && `ids-col--offset-${offset}`, sOffset && `ids-col--s-offset-${sOffset}`, mOffset && `ids-col--m-offset-${mOffset}`, alignSelf && `ids-col--align-${alignSelf}`, className), style: { ...style }, ...props, children: children }));
+});
+IDSColumn.displayName = "IDSColumn";
 
 export { IDSColumn };

package/components/grid/container.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import '@inera/ids-design/components/grid/container/container.css';
 import clsx from 'clsx';
+import '@inera/ids-design/components/grid/container/container.css';
 
 const IDSContainer = forwardRef(({ gutterless = false, width, maxWidth, rowGap, children, className, style, ...props }, ref) => {
     const mergedStyle = {

package/components/grid/row.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import '@inera/ids-design/components/grid/row/row.css';
 import clsx from 'clsx';
+import '@inera/ids-design/components/grid/row/row.css';
 
 const IDSRow = forwardRef(({ gap, align, justify, children, className, style, ...props }, ref) => {
     const classNames = clsx("ids-row", align && `ids-row--align-${align}`, justify && `ids-row--justify-${justify}`, className);

package/components/grid-layout/grid-column.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/grid-layout/grid-column/grid-column.css";
+export type GridColSize = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "auto";
+export type GridOffsetSize = Exclude<GridColSize, "auto">;
+export type GridOrder = "-1" | "1" | "2" | "3" | "4" | undefined;
+export interface IDSGridColumnProps extends React.HTMLAttributes<HTMLDivElement> {
+    cols?: GridColSize;
+    s?: GridColSize;
+    m?: GridColSize;
+    start?: GridOffsetSize;
+    sStart?: GridOffsetSize | "none";
+    mStart?: GridOffsetSize | "none";
+    order?: GridOrder | "none";
+    mOrder?: GridOrder | "none";
+    sOrder?: GridOrder | "none";
+    alignSelf?: "start" | "center" | "end" | "auto" | "baseline" | "stretch";
+    children?: ReactNode;
+}
+export declare const IDSGridColumn: React.ForwardRefExoticComponent<IDSGridColumnProps & React.RefAttributes<HTMLDivElement>>;

package/components/grid-layout/grid-column.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/grid-layout/grid-column/grid-column.css';
+
+const IDSGridColumn = forwardRef(({ cols = "12", s, m, start, sStart, mStart, alignSelf, order, mOrder, sOrder, className, children, style, ...props }, ref) => {
+    const internalOrder = `${order}`;
+    const internalMOrder = `${mOrder}`;
+    const internalSOrder = `${sOrder}`;
+    return (jsx("div", { ref: ref, className: clsx("ids-grid-column", cols && `ids-grid-column--${cols}`, s && `ids-grid-column--s-${s}`, m && `ids-grid-column--m-${m}`, internalOrder !== "undefined" && `ids-grid-column--order-${order}`, internalMOrder !== "undefined" && `ids-grid-column--m-order-${mOrder}`, internalSOrder !== "undefined" && `ids-grid-column--s-order-${sOrder}`, start && `ids-grid-column--start-${start}`, sStart && `ids-grid-column--s-start-${sStart}`, mStart && `ids-grid-column--m-start-${mStart}`, alignSelf && `ids-grid-column--align-${alignSelf}`, className), ...props, style: { ...style }, children: children }));
+});
+IDSGridColumn.displayName = "IDSGridColumn";
+
+export { IDSGridColumn };

package/components/grid-layout/grid-container.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode, HTMLAttributes } from "react";
+import "@inera/ids-design/components/grid-layout/grid-container/grid-container.css";
+export interface IDSGridContainerProps extends HTMLAttributes<HTMLDivElement> {
+    width?: string;
+    maxWidth?: string;
+    gutterless?: boolean;
+    rowGap?: string;
+    children?: ReactNode;
+}
+export declare const IDSGridContainer: import("react").ForwardRefExoticComponent<IDSGridContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/grid-layout/grid-container.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/grid-layout/grid-container/grid-container.css';
+
+const IDSGridContainer = forwardRef(({ gutterless = false, width, maxWidth, rowGap, children, className, style, ...props }, ref) => {
+    const mergedStyle = {
+        width: width ?? style?.width,
+        maxWidth: maxWidth ?? style?.maxWidth,
+        rowGap: rowGap ?? style?.rowGap,
+        ...style
+    };
+    return (jsx("div", { ref: ref, className: clsx("ids-grid-container", { "ids-grid-container--gutterless": gutterless }, className), ...props, style: mergedStyle, children: children }));
+});
+IDSGridContainer.displayName = "IDSGridContainer";
+
+export { IDSGridContainer };

package/components/grid-layout/grid-row.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode, HTMLAttributes } from "react";
+import "@inera/ids-design/components/grid-layout/grid-row/grid-row.css";
+export interface IDSGridRowProps extends HTMLAttributes<HTMLDivElement> {
+    noGap?: boolean;
+    rowAlign?: "start" | "center" | "end" | "baseline" | "stretch";
+    children?: ReactNode;
+}
+export declare const IDSGridRow: import("react").ForwardRefExoticComponent<IDSGridRowProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/grid-layout/grid-row.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/grid-layout/grid-row/grid-row.css';
+
+const IDSGridRow = forwardRef(({ noGap, rowAlign, children, className, style, ...props }, ref) => {
+    const classNames = clsx("ids-grid-row", rowAlign && `ids-grid-row--align-${rowAlign}`, { "ids-grid-row--no-gap": noGap }, className);
+    return (jsx("div", { ref: ref, className: classNames, style: style, ...props, children: children }));
+});
+IDSGridRow.displayName = "IDSGridRow";
+
+export { IDSGridRow };

package/components/header-1177/header-1177-avatar-base.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode, HTMLAttributes } from "react";
+interface IDSHeader1177AvatarBaseProps extends HTMLAttributes<HTMLDivElement> {
+    username?: string;
+    agent?: ReactNode;
+    children?: ReactNode;
+    unresponsive?: boolean;
+    expanded?: boolean;
+    noMobileMenu?: boolean;
+    hide?: boolean;
+    client?: boolean;
+    onToggle?: () => void;
+    componentRef?: React.RefObject<HTMLDivElement>;
+    menuRef?: React.RefObject<HTMLDivElement>;
+}
+export declare function IDSHeader1177AvatarBase({ username, agent, children, unresponsive, expanded, hide, noMobileMenu, client, onToggle, componentRef, menuRef, ...props }: IDSHeader1177AvatarBaseProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/header-1177/header-1177-avatar-base.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId } from 'react';
+import clsx from 'clsx';
+
+function IDSHeader1177AvatarBase({ username, agent, children, unresponsive = false, expanded = false, hide = false, noMobileMenu = false, client = false, onToggle, componentRef, menuRef, ...props }) {
+    if (hide)
+        return null;
+    const menuId = `header-1177-avatar-menu${useId()}`;
+    const toggleHandler = client && onToggle
+        ? {
+            onClick: onToggle
+        }
+        : {};
+    return (jsx("div", { ref: componentRef, className: clsx("ids-header-1177-avatar", {
+            "ids-header-1177-avatar--unresponsive": unresponsive
+        }), style: { flexGrow: username ? "1" : "0" }, ...props, children: username && (jsx("div", { className: "ids-header-1177-avatar__avatar", children: jsxs("div", { className: "ids-header-1177-avatar__menu-wrapper", children: [jsx("button", { className: clsx("ids-header-1177-avatar__button", {
+                            "ids-header-1177-avatar__button--expanded": expanded
+                        }), ...toggleHandler, "aria-controls": menuId, "aria-expanded": expanded, children: jsx("div", { className: "ids-header-1177-avatar__name", title: username, children: username }) }), jsxs("div", { ref: menuRef, id: menuId, className: clsx("ids-header-1177-avatar__menu", {
+                            "ids-header-1177-avatar__menu--expanded": expanded,
+                            "ids-header-1177-avatar__menu--no-mobile-menu": noMobileMenu
+                        }), children: [agent && jsx("div", { className: "ids-header-1177-avatar__agent", children: agent }), agent && children && jsx("hr", {}), children && jsx("div", { className: "ids-header-1177-avatar__menu-links", children: children })] })] }) })) }));
+}
+
+export { IDSHeader1177AvatarBase };

package/components/header-1177/header-1177-avatar.d.ts

@@ -1,13 +1,10 @@
-import React, { ReactNode } from "react";
-import "@inera/ids-design/components/header-1177/header-1177-avatar.css";
-interface IDSHeader1177AvatarProps {
+import React, { HTMLAttributes } from "react";
+interface IDSHeader1177AvatarProps extends HTMLAttributes<HTMLDivElement> {
     username?: string;
     expanded?: boolean;
-    agent?: ReactNode;
-    children?: ReactNode;
+    agent?: React.ReactNode;
     persistent?: boolean;
     noMobileMenu?: boolean;
-    mobileMenu?: ReactNode;
 }
-export declare const IDSHeader1177Avatar: React.FC<IDSHeader1177AvatarProps>;
+export declare function IDSHeader1177Avatar({ expanded, persistent, children, ...props }: IDSHeader1177AvatarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/header-1177/header-1177-avatar.js

@@ -1,57 +1,50 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId, useState, useRef, useEffect } from 'react';
-import '@inera/ids-design/components/header-1177/header-1177-avatar.css';
-import clsx from 'clsx';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import { IDSHeader1177AvatarBase } from './header-1177-avatar-base.js';
 
-const IDSHeader1177Avatar = ({ username, expanded = false, agent, children, persistent = false, noMobileMenu = false, mobileMenu, ...props }) => {
-    const dropdownId = useId();
-    const [isExpanded, setIsExpanded] = useState(expanded);
+function IDSHeader1177Avatar({ expanded = false, persistent = false, children, ...props }) {
     const headerContext = useHeaderContext();
-    const containerRef = useRef(null);
-    const dropdownRef = useRef(null);
-    const toggleExpanded = () => setIsExpanded(prev => !prev);
-    const handleClickOutside = (event) => {
-        if (!persistent && containerRef.current && !containerRef.current.contains(event.target)) {
-            setIsExpanded(false);
-        }
-    };
+    if (headerContext?.hideAvatar)
+        return null;
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const componentRef = useRef(null);
+    const menuRef = useRef(null);
+    const toggleAvatar = () => setIsExpanded(prev => !prev);
+    // Close when clicking outside
     useEffect(() => {
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
+        const handleClickOutside = (event) => {
+            if (!persistent && componentRef.current && !componentRef.current.contains(event.target)) {
+                setIsExpanded(false);
+            }
         };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [persistent]);
+    // Escape should also close
     useEffect(() => {
-        if (!persistent && isExpanded) {
-            const links = dropdownRef.current?.querySelectorAll("a") || [];
-            links.forEach(link => link.addEventListener("click", handleLinkClick));
-            return () => {
-                links.forEach(link => link.removeEventListener("click", handleLinkClick));
-            };
-        }
+        if (!isExpanded || persistent)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                setIsExpanded(false);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
     }, [isExpanded, persistent]);
-    const handleLinkClick = () => {
-        setIsExpanded(false);
-    };
+    // Clicking a link inside dropdown closes it
     useEffect(() => {
         if (!persistent && isExpanded) {
-            const links = dropdownRef.current?.querySelectorAll("a") || [];
-            links.forEach(link => link.addEventListener("click", handleLinkClick));
-            return () => {
-                links.forEach(link => link.removeEventListener("click", handleLinkClick));
-            };
+            const links = menuRef.current?.querySelectorAll("a") || [];
+            links.forEach(link => link.addEventListener("click", closeOnClick));
+            return () => links.forEach(link => link.removeEventListener("click", closeOnClick));
         }
     }, [isExpanded, persistent]);
-    return (jsxs("div", { ref: containerRef, className: clsx("ids-header-1177-avatar", {
-            "ids-header-1177-avatar--unresponsive": headerContext?.unresponsive
-        }), style: { flexGrow: username ? "1" : "0" }, ...props, children: [username && (jsx("div", { className: "ids-header-1177-avatar__avatar", children: jsxs("div", { className: "ids-header-1177-avatar__menu-wrapper", children: [jsx("button", { className: clsx("ids-header-1177-avatar__button", {
-                                "ids-header-1177-avatar__button--expanded": isExpanded
-                            }), onClick: toggleExpanded, "aria-controls": dropdownId, "aria-expanded": isExpanded, children: jsx("div", { className: "ids-header-1177-avatar__name", title: username, children: username }) }), jsxs("div", { ref: dropdownRef, id: dropdownId, className: clsx("ids-header-1177-avatar__menu", {
-                                "ids-header-1177-avatar__menu--expanded": isExpanded,
-                                "ids-header-1177-avatar__menu--mobile-menu": !noMobileMenu
-                            }), children: [agent && jsx("div", { className: "ids-header-1177-avatar__agent", children: agent }), agent && children && jsx("hr", {}), children && jsx("div", { className: "ids-header-1177-avatar__menu-links", children: children })] })] }) })), mobileMenu] }));
-};
+    const closeOnClick = () => setIsExpanded(false);
+    return (jsx(IDSHeader1177AvatarBase, { ...props, client: true, expanded: isExpanded, onToggle: toggleAvatar, componentRef: componentRef, menuRef: menuRef, unresponsive: headerContext?.unresponsive ?? false, children: children }));
+}
 
 export { IDSHeader1177Avatar };

package/components/header-1177/header-1177-base.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode, AnchorHTMLAttributes } from "react";
+import "@inera/ids-design/components/header-1177/composite-header-1177.css";
+interface IDSHeader1177BaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    hideRegionPicker?: boolean;
+    unresponsive?: boolean;
+    logoHref?: string;
+    logoProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
+    logo?: ReactNode;
+    srLogoText?: string;
+    regionPicker?: ReactNode;
+    skipToContentLink?: ReactNode;
+    items?: ReactNode;
+    avatar?: ReactNode;
+    mobileMenu?: ReactNode;
+    children?: ReactNode;
+}
+export declare function IDSHeader1177Base({ srLogoText, hideRegionPicker, unresponsive, logoHref, logoProps, logo, regionPicker, skipToContentLink, items, avatar, mobileMenu, className, children, ...props }: IDSHeader1177BaseProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/header-1177/header-1177-base.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import '@inera/ids-design/components/header-1177/composite-header-1177.css';
+
+function IDSHeader1177Base({ srLogoText = "Logotyp", hideRegionPicker = false, unresponsive = false, logoHref = "", logoProps = {}, logo, regionPicker, skipToContentLink, items, avatar, mobileMenu, className, children, ...props }) {
+    const renderLogo = () => {
+        return (jsx("div", { className: "ids-header-1177__logo-wrapper", children: jsx("div", { className: "ids-header-1177__logo", children: logo ? (jsx("span", { className: "ids-header-1177__link", children: logo })) : (jsx("a", { className: "ids-header-1177__logo-link", href: logoHref, "aria-label": srLogoText, ...logoProps })) }) }));
+    };
+    return (jsxs("header", { ...props, className: clsx("ids-header-1177", {
+            "ids-header-1177--unresponsive": unresponsive
+        }, className), children: [skipToContentLink && jsx("div", { className: "ids-header-1177__skip-to-content", children: skipToContentLink }), jsxs("div", { className: "ids-header-1177__container", children: [jsx("div", { className: "ids-header-1177__left" }), jsxs("div", { className: "ids-header-1177__inner", children: [jsxs("div", { className: "ids-header-1177__inner-left", children: [renderLogo(), !hideRegionPicker && regionPicker && jsx("div", { className: "ids-header-1177__region-picker", children: regionPicker })] }), jsxs("div", { className: "ids-header-1177__inner-right", children: [items, " ", avatar, " ", mobileMenu] })] }), jsx("div", { className: "ids-header-1177__right" })] }), children] }));
+}
+
+export { IDSHeader1177Base };

package/components/header-1177/header-1177-item-base.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+interface IDSHeader1177ItemBaseProps extends HTMLAttributes<HTMLElement> {
+    mobile?: boolean;
+    keepTextOnMobile?: boolean;
+    icon?: string;
+    unresponsive?: boolean;
+}
+export declare function IDSHeader1177ItemBase({ mobile, keepTextOnMobile, icon, children, unresponsive, ...props }: IDSHeader1177ItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export {};