@inera/ids-react 9.2.1 → 9.3.0

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,9 @@ 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: clsx("ids-side-panel__panel", {
+                "ids-side-panel__panel--no-close-button": noCloseButton
+            }), 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/components/stepper/step-base.d.ts

@@ -12,4 +12,4 @@ export interface IDSStepBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     onToggleStep?: (step: string, expanded: boolean) => void;
     client?: boolean;
 }
-export declare const IDSStepBase: React.ForwardRefExoticComponent<IDSStepBaseProps & React.RefAttributes<HTMLDivElement>>;
+export declare const IDSStepBase: React.ForwardRefExoticComponent<IDSStepBaseProps & React.RefAttributes<HTMLButtonElement>>;

package/components/stepper/step-base.js

@@ -23,7 +23,7 @@ const IDSStepBase = forwardRef(({ state = "", headline, label = "", stepNumber =
             onKeyDown: handleKeyPress
         }
         : {};
-    return (jsxs("div", { className: clsx("ids-step", className), ...props, children: [jsx("div", { ref: ref, role: "button", tabIndex: disabled ? -1 : 0, className: clsx("ids-step__button", {
+    return (jsxs("div", { className: clsx("ids-step", className), ...props, children: [jsx("button", { ref: ref, type: "button", disabled: disabled, className: clsx("ids-step__button", {
                     "ids-step__button--disabled": disabled
                 }), "aria-expanded": expanded, ...toggleHandlers, children: jsxs("div", { className: "ids-step__button-inner", children: [jsx("div", { className: "ids-step__indicator-wrapper", children: jsx("div", { "aria-label": srIndicatorText || stepNumber, role: "img", className: `ids-step__indicator ids-step__indicator--${state}`, children: renderStepIndicator() }) }), jsxs("div", { className: "ids-step__button-text", children: [jsxs("div", { className: "ids-step__headline-label", children: [headline && jsx("div", { className: "ids-step__headline", children: headline }), label && jsx("div", { className: "ids-step__subtitle", children: label })] }), jsx("div", { className: clsx("ids-step__chevron", {
                                         "ids-step__chevron--expanded": expanded

package/components/stepper/step.d.ts

@@ -12,4 +12,4 @@ export interface IDSStepProps extends React.HTMLAttributes<HTMLDivElement> {
     onExpanded?: () => void;
     onClosed?: () => void;
 }
-export declare const IDSStep: React.ForwardRefExoticComponent<IDSStepProps & React.RefAttributes<HTMLDivElement>>;
+export declare const IDSStep: React.ForwardRefExoticComponent<IDSStepProps & React.RefAttributes<HTMLButtonElement>>;

package/components/stepper/step.js

@@ -1,22 +1,13 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import React, { forwardRef, useState, useEffect } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import { IDSStepBase } from './step-base.js';
 
 const IDSStep = forwardRef(({ state = "", headline, label, stepNumber = "", srIndicatorText = "", expanded = false, disabled = false, onToggleStep, onExpanded, onClosed, className, ...props }, ref) => {
     const [isExpanded, setIsExpanded] = useState(expanded);
-    const stepRef = React.useRef(null);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
-    // Merge forwarded + local ref
-    const mergedRef = (node) => {
-        stepRef.current = node;
-        if (typeof ref === "function")
-            ref(node);
-        else if (ref)
-            ref.current = node;
-    };
     const handleToggleStep = () => {
         if (disabled)
             return;
@@ -27,7 +18,7 @@ const IDSStep = forwardRef(({ state = "", headline, label, stepNumber = "", srIn
             return next;
         });
     };
-    return (jsx(IDSStepBase, { client: true, ref: mergedRef, state: state, headline: headline, label: label, stepNumber: stepNumber, srIndicatorText: srIndicatorText, expanded: isExpanded, disabled: disabled, onToggleStep: handleToggleStep, className: className, ...props }));
+    return (jsx(IDSStepBase, { client: true, ref: ref, state: state, headline: headline, label: label, stepNumber: stepNumber, srIndicatorText: srIndicatorText, expanded: isExpanded, disabled: disabled, onToggleStep: handleToggleStep, className: className, ...props }));
 });
 IDSStep.displayName = "IDSStep";
 

package/components/tag/tag.js

@@ -1,10 +1,16 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, memo } from 'react';
+import { forwardRef, isValidElement, cloneElement, memo } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/tag/tag.css';
 
 const IDSTagMemo = forwardRef(({ clickable, closeButton, className, children, ...props }, ref) => {
-    return (jsx("span", { ref: ref, ...props, className: clsx("ids-tag", { "ids-tag--clickable": clickable }, className), children: jsxs("div", { className: "ids-tag__content", children: [children, !!closeButton && jsx("span", { className: "ids-tag__close-btn", children: closeButton })] }) }));
+    // TODO remove ids-tag__close-btn and let the user supply a IDSControlButton in 10.0
+    const closeButtonElement = isValidElement(closeButton)
+        ? cloneElement(closeButton, {
+            className: clsx("ids-tag__close-btn", closeButton.props.className)
+        })
+        : closeButton;
+    return (jsx("span", { ref: ref, ...props, className: clsx("ids-tag", { "ids-tag--clickable": clickable }, className), children: jsxs("div", { className: "ids-tag__content", children: [children, !!closeButton && closeButtonElement] }) }));
 });
 IDSTagMemo.displayName = "IDSTag";
 const IDSTag = memo(IDSTagMemo);

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

@@ -7,12 +7,10 @@ export interface IDSTooltipBaseProps extends React.HTMLAttributes<HTMLSpanElemen
     translateX?: string;
     translateY?: string;
     trigger: ReactNode;
-    triggerIsIcon?: boolean;
     triggerRef?: React.Ref<HTMLSpanElement>;
     tooltipContentRef?: React.Ref<HTMLSpanElement>;
-    isHidden?: boolean;
 }
-export declare function IDSTooltipBase({ position, maxWidth, translateX, translateY, trigger, triggerIsIcon, triggerRef, tooltipContentRef, isHidden, className, children, ...props }: IDSTooltipBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSTooltipBase({ position, maxWidth, translateX, translateY, trigger, triggerRef, tooltipContentRef, className, children, ...props }: IDSTooltipBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSTooltipBase {
     var displayName: string;
 }

package/components/tooltip/tooltip-base.js

@@ -1,18 +1,22 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId } from 'react';
+import { useId, isValidElement, cloneElement } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/tooltip/tooltip.css';
 
-function IDSTooltipBase({ position = "top", maxWidth = "20rem", translateX = position === "top" || position === "bottom" ? "-50%" : "0", translateY = position.includes("top") ? "-100%" : "100%", trigger, triggerIsIcon, triggerRef, tooltipContentRef, isHidden, className, children, ...props }) {
+function IDSTooltipBase({ position = "top", maxWidth = "20rem", translateX = position === "top" || position === "bottom" ? "-50%" : "0", translateY = position.includes("top") ? "-100%" : "100%", trigger, triggerRef, tooltipContentRef, className, children, ...props }) {
     const tooltipId = `tooltip-${useId()}`;
-    const ariaHandler = triggerIsIcon
-        ? {
-            "aria-labelledby": tooltipId
-        }
-        : {
-            "aria-describedby": tooltipId
-        };
-    return (jsxs("span", { className: clsx("ids-tooltip", className), ...props, children: [jsx("span", { className: "ids-tooltip__trigger", ...ariaHandler, ref: triggerRef, children: trigger }), jsx("span", { className: clsx("ids-tooltip__content", `ids-tooltip__content--${position}`), ref: tooltipContentRef, role: "tooltip", hidden: isHidden, id: tooltipId, style: { transform: `translate(${translateX}, ${translateY})`, maxWidth }, children: children })] }));
+    const ariaHandler = {
+        "aria-describedby": tooltipId
+    };
+    const triggerElement = isValidElement(trigger)
+        ? (() => {
+            const element = trigger;
+            return cloneElement(element, {
+                "aria-describedby": clsx(element.props["aria-describedby"], tooltipId)
+            });
+        })()
+        : trigger;
+    return (jsxs("span", { className: clsx("ids-tooltip", className), ...props, children: [jsx("span", { className: "ids-tooltip__trigger", ...(!isValidElement(trigger) ? ariaHandler : {}), ref: triggerRef, children: triggerElement }), jsx("span", { className: clsx("ids-tooltip__content", `ids-tooltip__content--${position}`), ref: tooltipContentRef, role: "tooltip", id: tooltipId, style: { transform: `translate(${translateX}, ${translateY})`, maxWidth }, children: children })] }));
 }
 IDSTooltipBase.displayName = "IDSTooltipBase";
 

package/components/tooltip/tooltip.js

@@ -5,17 +5,9 @@ import { IDSTooltipBase } from './tooltip-base.js';
 
 function IDSTooltip({ position = "top", maxWidth, trigger, className, ...props }) {
     const [internalMaxWidth, setInternalMaxWidth] = useState(maxWidth);
-    const [triggerIsIcon, setTriggerIsIcon] = useState(false);
-    const [isVisible, setIsVisible] = useState(false);
     const tooltipContentRef = useRef(null);
     const triggerRef = useRef(null);
     const hasUpdatedMaxWidthRef = useRef(false);
-    const getFirstFocusableContent = () => {
-        const wrapper = triggerRef.current?.parentElement;
-        if (!wrapper)
-            return null;
-        return wrapper.querySelector('ids-button button, button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-    };
     const handleXOverflow = () => {
         const tooltipContent = tooltipContentRef.current;
         const trigger = triggerRef.current;
@@ -56,15 +48,6 @@ function IDSTooltip({ position = "top", maxWidth, trigger, className, ...props }
             document.activeElement?.blur();
         }
     };
-    useEffect(() => {
-        const tooltipContent = tooltipContentRef.current;
-        if (!tooltipContent)
-            return;
-        const focusable = getFirstFocusableContent();
-        if (focusable) {
-            setTriggerIsIcon(!!triggerRef.current?.querySelector('[class^="ids-icon-"]'));
-        }
-    }, []);
     useEffect(() => {
         const tooltipContent = tooltipContentRef.current;
         if (!tooltipContent)
@@ -94,30 +77,7 @@ function IDSTooltip({ position = "top", maxWidth, trigger, className, ...props }
             triggerWrapper.removeEventListener("focusin", handleXOverflow);
         };
     }, [triggerRef]);
-    const isTooltipVisible = () => {
-        const tooltip = tooltipContentRef.current;
-        if (!tooltip)
-            return false;
-        const style = getComputedStyle(tooltip);
-        return style.visibility !== "hidden" && style.display !== "none" && style.opacity !== "0";
-    };
-    useEffect(() => {
-        const triggerEl = triggerRef.current;
-        if (!triggerEl)
-            return;
-        const updateVisibility = () => setIsVisible(isTooltipVisible());
-        triggerEl.addEventListener("mouseenter", updateVisibility);
-        triggerEl.addEventListener("mouseleave", updateVisibility);
-        triggerEl.addEventListener("focusin", updateVisibility); // <-- replaces focus
-        triggerEl.addEventListener("focusout", updateVisibility); // <-- replaces blur
-        return () => {
-            triggerEl.removeEventListener("mouseenter", updateVisibility);
-            triggerEl.removeEventListener("mouseleave", updateVisibility);
-            triggerEl.removeEventListener("focusin", updateVisibility);
-            triggerEl.removeEventListener("focusout", updateVisibility);
-        };
-    }, [triggerRef.current]);
-    return (jsx(IDSTooltipBase, { ...props, position: position, maxWidth: internalMaxWidth, trigger: trigger, triggerIsIcon: triggerIsIcon, className: className, triggerRef: triggerRef, isHidden: !isVisible, tooltipContentRef: tooltipContentRef }));
+    return (jsx(IDSTooltipBase, { ...props, position: position, maxWidth: internalMaxWidth, trigger: trigger, className: className, triggerRef: triggerRef, tooltipContentRef: tooltipContentRef }));
 }
 IDSTooltip.displayName = "IDSTooltip";
 

package/index.d.ts

@@ -27,6 +27,7 @@ export * from "./components/form/toggle/toggle";
 export * from "./components/form/darkmode-toggle/darkmode-toggle";
 export * from "./components/form/spinner/spinner";
 export * from "./components/button/button";
+export * from "./components/button/control-button";
 export * from "./components/button/button-group";
 export * from "./components/grid/container";
 export * from "./components/grid/row";

package/index.js

@@ -27,6 +27,7 @@ export { IDSToggle } from './components/form/toggle/toggle.js';
 export { IDSDarkmodeToggle } from './components/form/darkmode-toggle/darkmode-toggle.js';
 export { IDSSpinner } from './components/form/spinner/spinner.js';
 export { IDSButton } from './components/button/button.js';
+export { IDSControlButton } from './components/button/control-button.js';
 export { IDSButtonGroup } from './components/button/button-group.js';
 export { IDSContainer } from './components/grid/container.js';
 export { IDSRow } from './components/grid/row.js';

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@inera/ids-react",
-  "version": "9.2.1",
+  "version": "9.3.0",
   "type": "module",
   "peerDependencies": {
     "react": "*",
-    "react-day-picker": "^9.11.3"
+    "react-day-picker": "^9.11.3",
+    "react-dom": "*"
   },
   "dependencies": {
-    "@inera/ids-design": "9.2.x",
+    "@inera/ids-design": "9.3.x",
     "clsx": "*"
   },
   "types": "index.d.ts",