@inera/ids-react 9.2.1 → 9.2.2

package/components/accordion/accordion-base.d.ts

@@ -9,12 +9,13 @@ interface IDSAccordionBaseProps extends HTMLAttributes<HTMLDivElement> {
     headlineSize?: "m" | "s" | "xs";
     lean?: boolean;
     noBorder?: boolean;
+    hasChildren?: boolean;
     children?: ReactNode;
     onToggleAccordion?: () => void;
     client?: boolean;
     accordionRef?: React.Ref<HTMLDivElement>;
 }
-export declare function IDSAccordionBase({ headline, subtitle, expanded, level, headlineSize, lean, noBorder, onToggleAccordion, client, children, className, accordionRef, ...props }: IDSAccordionBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSAccordionBase({ headline, subtitle, expanded, level, headlineSize, lean, noBorder, onToggleAccordion, client, hasChildren, children, className, accordionRef, ...props }: IDSAccordionBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSAccordionBase {
     var displayName: string;
 }

package/components/accordion/accordion-base.js

@@ -1,13 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React, { useId } from 'react';
+import { useId } from 'react';
 import '@inera/ids-design/components/accordion/accordion.css';
 
-function IDSAccordionBase({ headline, subtitle, expanded = false, level = 1, headlineSize = "m", lean = false, noBorder, onToggleAccordion, client = false, children, className, accordionRef, ...props }) {
+function IDSAccordionBase({ headline, subtitle, expanded = false, level = 1, headlineSize = "m", lean = false, noBorder, onToggleAccordion, client = false, hasChildren = false, children, className, accordionRef, ...props }) {
     const reactId = useId();
     const headerId = `accordion-header-${reactId}`;
     const contentId = `accordion-content-${reactId}`;
-    const hasChildren = !!React.Children.toArray(children).length;
     const handleKeyDown = (e) => {
         if (!onToggleAccordion)
             return;
@@ -52,7 +51,7 @@ function IDSAccordionBase({ headline, subtitle, expanded = false, level = 1, hea
             "ids-accordion--lean": lean,
             "ids-accordion--has-children": !!hasChildren,
             "ids-accordion--is-child": level === 2
-        }, className), children: [jsx("div", { className: clsx("ids-accordion__button", `ids-accordion__button--${headlineSize}`), role: "button", tabIndex: 0, "data-accordion-header": true, "aria-expanded": expanded, "aria-controls": contentId, ...toggleHandlers, children: jsxs("div", { id: headerId, className: clsx("ids-accordion__headline", `ids-accordion__headline-${level}`, `ids-accordion__headline--${headlineSize}`, expanded && "ids-accordion__headline--expanded"), children: [headline, !!subtitle && jsx("div", { className: "ids-accordion__subtitle", children: subtitle })] }) }), jsx("div", { "aria-hidden": !expanded, id: contentId, "aria-labelledby": headerId, role: "region", className: "ids-accordion__content", children: jsx("div", { "data-accordion-root": true, children: children }) })] }));
+        }, className), children: [jsx("button", { className: clsx("ids-accordion__button", `ids-accordion__button--${headlineSize}`), type: "button", "data-accordion-header": true, "aria-expanded": expanded, "aria-controls": contentId, ...toggleHandlers, children: jsxs("div", { id: headerId, className: clsx("ids-accordion__headline", `ids-accordion__headline-${level}`, `ids-accordion__headline--${headlineSize}`, expanded && "ids-accordion__headline--expanded"), children: [headline, !!subtitle && jsx("div", { className: "ids-accordion__subtitle", children: subtitle })] }) }), jsx("div", { "aria-hidden": !expanded, id: contentId, "aria-labelledby": headerId, role: "region", className: "ids-accordion__content", children: jsx("div", { "data-accordion-root": true, children: children }) })] }));
 }
 IDSAccordionBase.displayName = "IDSAccordionBase";
 

package/components/accordion/accordion.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { IDSAccordionBase } from './accordion-base.js';
 
 function IDSAccordion({ headline, subtitle, accordions, level = 1, headlineSize = level === 2 ? "s" : "m", expanded, defaultExpanded = false, lean = false, noBorder = false, onCollapsed, onExpanded, onExpandedChange, children, ...props }) {
@@ -9,6 +9,9 @@ function IDSAccordion({ headline, subtitle, accordions, level = 1, headlineSize
     const [isLean, setIsLean] = useState(lean);
     const accordionRef = useRef(null);
     const isExpanded = isControlled ? expanded : internalExpanded;
+    const hasChildren = React.Children.toArray(children).some(child => {
+        return React.isValidElement(child) && child.type === IDSAccordion;
+    });
     useEffect(() => {
         if (level === 1 && accordionRef.current?.closest(".ids-card") && !accordions) {
             setIsLean(true);
@@ -25,7 +28,7 @@ function IDSAccordion({ headline, subtitle, accordions, level = 1, headlineSize
         else
             onCollapsed?.();
     };
-    return (jsx(IDSAccordionBase, { ...props, client: true, accordionRef: accordionRef, headline: headline, subtitle: subtitle, level: level, headlineSize: headlineSize, expanded: isExpanded, lean: isLean, noBorder: noBorder, onToggleAccordion: toggleExpanded, children: children }));
+    return (jsx(IDSAccordionBase, { ...props, client: true, accordionRef: accordionRef, headline: headline, subtitle: subtitle, level: level, headlineSize: headlineSize, hasChildren: hasChildren, expanded: isExpanded, lean: isLean, noBorder: noBorder, onToggleAccordion: toggleExpanded, children: children }));
 }
 IDSAccordion.displayName = "IDSAccordion";
 

package/components/side-panel/side-panel-base.d.ts

@@ -18,6 +18,7 @@ export interface IDSSidePanelBaseProps extends React.HTMLAttributes<HTMLDivEleme
     client?: boolean;
     srClose?: string;
     srOpen?: string;
+    noCloseButton?: boolean;
     noScrollAreaFocus?: boolean;
     hamburgerRef?: React.Ref<HTMLButtonElement>;
     componentRef?: React.Ref<HTMLDivElement>;

package/components/side-panel/side-panel-base.js

@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/side-panel/side-panel.css';
 
-const IDSSidePanelBase = forwardRef(({ visible = false, left = false, elevated = false, menu = false, footer = false, noScrollAreaFocus = false, footerDarkmodeToggle, size = "m", srLabel = "Sidopanel", onTogglePanel, onClosePanel, srClose, srOpen, client, headline, footerLinks, footerText, hamburgerRef, componentRef, className, children, ...props }, ref) => {
+const IDSSidePanelBase = forwardRef(({ visible = false, left = false, elevated = false, menu = false, footer = false, noCloseButton = false, noScrollAreaFocus = false, footerDarkmodeToggle, size = "m", srLabel = "Sidopanel", onTogglePanel, onClosePanel, srClose, srOpen, client, headline, footerLinks, footerText, hamburgerRef, componentRef, className, children, ...props }, ref) => {
     const [ready, setReady] = React.useState(false);
     React.useEffect(() => {
         setReady(true);
@@ -30,7 +30,7 @@ const IDSSidePanelBase = forwardRef(({ visible = false, left = false, elevated =
         return null;
     };
     const renderContent = () => (jsxs("div", { className: "ids-side-panel__content", tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsxs("div", { className: "ids-side-panel__inner", children: [headline, children] }), renderFooter()] }));
-    return (jsx("div", { className: classNames, ref: ref, ...props, children: jsxs("div", { className: "ids-side-panel__panel", children: [jsx("div", { className: "ids-side-panel__actions", children: menu ? (jsx("button", { "aria-label": visible ? srClose : srOpen, className: "ids-side-panel__hamburger", "aria-expanded": visible, ...toggleHandler, ref: hamburgerRef, children: jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) }) })) : (jsx("button", { "aria-label": srClose, "aria-expanded": visible, className: "ids-side-panel__close-button", ...closeHandler })) }), renderContent()] }) }));
+    return (jsx("div", { className: classNames, ref: ref, ...props, children: jsxs("div", { className: "ids-side-panel__panel", children: [!noCloseButton && (jsx("div", { className: "ids-side-panel__actions", children: menu ? (jsx("button", { "aria-label": visible ? srClose : srOpen, className: "ids-side-panel__hamburger", "aria-expanded": visible, ...toggleHandler, ref: hamburgerRef, children: jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) }) })) : (jsx("button", { "aria-label": srClose, "aria-expanded": visible, className: "ids-side-panel__close-button", ...closeHandler })) })), renderContent()] }) }));
 });
 IDSSidePanelBase.displayName = "IDSSidePanelBase";
 

package/components/side-panel/side-panel.d.ts

@@ -18,8 +18,9 @@ export interface IDSSidePanelProps extends React.HTMLAttributes<HTMLDivElement>
     footerLinks?: ReactNode;
     footerText?: ReactNode;
     noScrollAreaFocus?: boolean;
+    noCloseButton?: boolean;
 }
-export declare function IDSSidePanel({ show, menu, noScrollAreaFocus, srLabel, onVisibilityChange, srClose, srOpen, onOpen, onClose, className, children, ...props }: IDSSidePanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSSidePanel({ show, menu, noScrollAreaFocus, noCloseButton, srLabel, onVisibilityChange, srClose, srOpen, onOpen, onClose, className, children, ...props }: IDSSidePanelProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSSidePanel {
     var displayName: string;
 }

package/components/side-panel/side-panel.js

@@ -4,7 +4,7 @@ import { useRef, useState, useEffect } from 'react';
 import { IDSSidePanelBase } from './side-panel-base.js';
 import { useEsc } from '../utils/hooks/useEsc.js';
 
-function IDSSidePanel({ show, menu = false, noScrollAreaFocus = false, srLabel = "Sidopanel", onVisibilityChange, srClose = "Stäng", srOpen = "Öppna", onOpen, onClose, className, children, ...props }) {
+function IDSSidePanel({ show, menu = false, noScrollAreaFocus = false, noCloseButton = false, srLabel = "Sidopanel", onVisibilityChange, srClose = "Stäng", srOpen = "Öppna", onOpen, onClose, className, children, ...props }) {
     const componentRef = useRef(null);
     const hamburgerRef = useRef(null);
     const isControlled = show !== undefined;
@@ -96,7 +96,7 @@ function IDSSidePanel({ show, menu = false, noScrollAreaFocus = false, srLabel =
             document.body.style.overflow = ""; // cleanup on unmount
         };
     }, [visible]);
-    return (jsx(IDSSidePanelBase, { ...props, ref: componentRef, client: true, menu: menu, className: className, srClose: srClose, srOpen: srOpen, noScrollAreaFocus: noScrollAreaFocus, visible: visible, onClosePanel: closePanel, onTogglePanel: togglePanel, hamburgerRef: hamburgerRef, children: children }));
+    return (jsx(IDSSidePanelBase, { ...props, ref: componentRef, client: true, menu: menu, className: className, srClose: srClose, srOpen: srOpen, noCloseButton: noCloseButton, noScrollAreaFocus: noScrollAreaFocus, visible: visible, onClosePanel: closePanel, onTogglePanel: togglePanel, hamburgerRef: hamburgerRef, children: children }));
 }
 IDSSidePanel.displayName = "IDSSidePanel";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inera/ids-react",
-  "version": "9.2.1",
+  "version": "9.2.2",
   "type": "module",
   "peerDependencies": {
     "react": "*",