@inera/ids-react 7.1.0 → 7.2.0

package/components/form/checkbox/checkbox-group.d.ts

@@ -5,6 +5,7 @@ interface IDSCheckboxGroupProps extends InputHTMLAttributes<HTMLInputElement> {
     compact?: boolean;
     tooltip?: ReactNode;
     block?: boolean;
+    noValidation?: boolean;
     children?: ReactNode;
     onValidityChange?: (isValid: boolean) => void;
     setCheckedBoxesCount?: Dispatch<SetStateAction<number>>;

package/components/form/checkbox/checkbox-group.js

@@ -6,42 +6,31 @@ import { useElementId } from '../../utils/hooks/useElementId.js';
 import { useGroupValidity } from '../form-hooks/useGroupValidity.js';
 import clsx from 'clsx';
 
-const IDSCheckboxGroup = ({ legend = "", errorMsg = "", compact = false, block = false, tooltip, children, className, onValidityChange, setCheckedBoxesCount }) => {
+const IDSCheckboxGroup = ({ legend = "", errorMsg = "", compact = false, block = false, noValidation = false, tooltip, children, className, onValidityChange, setCheckedBoxesCount }) => {
     const groupRef = useRef(null);
-    const isValid = useGroupValidity(groupRef, "checkbox");
+    const isValid = useGroupValidity(groupRef, "checkbox", () => {
+        onValidityChange?.(false);
+    });
     const errorMsgId = useElementId();
     useEffect(() => {
-        if (onValidityChange) {
-            onValidityChange(isValid);
-        }
-    }, [isValid, onValidityChange]);
-    useEffect(() => {
-        const checkboxes = groupRef.current?.querySelectorAll(`input[type="checkbox"]`);
-        if (!checkboxes.length)
-            return;
-        const count = () => {
-            const checkedCount = groupRef.current?.querySelectorAll('input[type="checkbox"]:checked')?.length ?? 0;
-            if (setCheckedBoxesCount) {
-                setCheckedBoxesCount(checkedCount);
-            }
-        };
-        count();
-        checkboxes.forEach(cb => {
-            cb.addEventListener("change", count);
-        });
-        return () => {
-            checkboxes.forEach(cb => {
-                cb.removeEventListener("change", count);
-            });
-        };
+        const checkedCount = groupRef.current?.querySelectorAll('input[type="checkbox"]:checked')?.length ?? 0;
+        setCheckedBoxesCount?.(checkedCount);
     }, [groupRef]);
+    useEffect(() => {
+        onValidityChange?.(isValid);
+    }, [isValid, onValidityChange]);
     const clonedChildren = React__default.Children.map(children, child => {
-        if (React__default.isValidElement(child) &&
-            child.type.displayName === "IDSCheckbox") {
+        if (React__default.isValidElement(child) && child.type.displayName === "IDSCheckbox") {
             return React__default.cloneElement(child, {
                 key: child.props.id,
                 groupErrorMsgId: errorMsg && errorMsgId,
-                block: block
+                block: block,
+                noValidation: noValidation,
+                onChange: (e) => {
+                    child.props.onChange?.(e);
+                    const checkedCount = groupRef.current?.querySelectorAll('input[type="checkbox"]:checked')?.length ?? 0;
+                    setCheckedBoxesCount?.(checkedCount);
+                }
             });
         }
         return child;

package/components/form/checkbox/checkbox.js

@@ -44,7 +44,7 @@ const IDSCheckbox = forwardRef(({ invalid = false, disabled = false, required =
                     "ids-checkbox--compact": compact
                 }), children: [jsx("input", { id: fieldId, ref: checkboxRef, type: "checkbox", className: clsx("ids-checkbox__input", {
                             "ids-focus-anchor": focusAnchor
-                        }), "aria-invalid": isInvalid, disabled: disabled, "aria-disabled": disabled, required: required, "aria-required": required, ...props }), jsxs("div", { className: clsx("ids-label-tooltip-wrapper", {
+                        }), "aria-invalid": isInvalid, disabled: disabled, "aria-disabled": disabled, required: !noValidation && required, "aria-required": !noValidation && required, ...props }), jsxs("div", { className: clsx("ids-label-tooltip-wrapper", {
                             "ids-label-tooltip-wrapper--block": block,
                             "ids-label-tooltip-wrapper--inline": tooltip
                         }), children: [jsx("label", { htmlFor: fieldId, className: clsx("ds-checkbox__label", {

package/components/form/form-hooks/useGroupValidity.d.ts

@@ -1 +1 @@
-export declare function useGroupValidity(ref: React.RefObject<HTMLFieldSetElement>, type: "checkbox" | "radio"): boolean;
+export declare function useGroupValidity(ref: React.RefObject<HTMLFieldSetElement>, type: "checkbox" | "radio", onInvalid?: () => void): boolean;

package/components/form/form-hooks/useGroupValidity.js

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from 'react';
 
-function useGroupValidity(ref, type) {
+function useGroupValidity(ref, type, onInvalid) {
     const [isValid, setIsValid] = useState(true);
     const [hasInteracted, setHasInteracted] = useState(false);
     const initialized = useRef(false);
@@ -29,6 +29,7 @@ function useGroupValidity(ref, type) {
             initialized.current = true;
         }
         const handleInteraction = () => {
+            onInvalid?.();
             setHasInteracted(true);
             validate();
         };
@@ -38,7 +39,7 @@ function useGroupValidity(ref, type) {
         };
         inputs.forEach(cb => {
             cb.addEventListener("invalid", handleInteraction);
-            cb.addEventListener("change", handleChange);
+            cb.addEventListener("input", handleChange);
         });
         const form = fieldset.closest("form");
         const handleSubmit = () => {
@@ -49,11 +50,11 @@ function useGroupValidity(ref, type) {
         return () => {
             inputs.forEach(cb => {
                 cb.removeEventListener("invalid", handleInteraction);
-                cb.removeEventListener("change", handleChange);
+                cb.removeEventListener("input", handleChange);
             });
             form?.removeEventListener("submit", handleSubmit);
         };
-    }, [ref]);
+    }, [ref, onInvalid]);
     return isValid || !hasInteracted;
 }
 

package/components/form/select-multiple/select-multiple.js

@@ -56,7 +56,10 @@ const IDSSelectMultiple = ({ label = "", selectedLabel = "vald", selectedLabelPl
                         "ids-focus-anchor": focusAnchor
                     }), "aria-expanded": isExpanded, "aria-invalid": invalid || checkboxListInvalid, placeholder: placeholder, value: value, onClick: () => setIsExpanded(!isExpanded), ...props }) }), jsx("div", { className: "ids-select-multiple__dropdown__wrapper", children: jsx("div", { className: clsx("ids-select-multiple__dropdown", {
                         "ids-select-multiple__dropdown--show": isExpanded
-                    }), children: jsx("div", { className: "ids-select-multiple__dropdown__inner", style: { maxHeight: maxHeight }, children: jsx(IDSCheckboxGroup, { block: true, errorMsg: errorMsg, setCheckedBoxesCount: setCheckedBoxesCount, onValidityChange: (isValid) => {
+                    }), children: jsx("div", { className: "ids-select-multiple__dropdown__inner", style: { maxHeight: maxHeight }, children: jsx(IDSCheckboxGroup, { block: true, noValidation: noValidation, errorMsg: errorMsg, setCheckedBoxesCount: setCheckedBoxesCount, onValidityChange: (isValid) => {
+                                if (!isValid) {
+                                    setIsExpanded(true);
+                                }
                                 setCheckboxListInvalid(!isValid);
                             }, children: children }) }) }) })] }));
 };

package/components/header-inera-admin/header-inera-admin.d.ts

@@ -5,6 +5,7 @@ export interface IDSHeaderIneraAdminProps extends React.HTMLAttributes<HTMLDivEl
     serviceName?: string;
     fluid?: boolean;
     unresponsive?: boolean;
+    showLogo?: boolean;
     items?: ReactNode;
     avatar?: ReactNode;
     skipToContent?: ReactNode;

package/components/header-inera-admin/header-inera-admin.js

@@ -5,23 +5,19 @@ import '@inera/ids-design/components/header-inera-admin/header-inera-admin.css';
 import clsx from 'clsx';
 import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeaderIneraAdmin = ({ brandText = "", fluid = false, unresponsive = false, items, avatar, skipToContent, brandLink, serviceName = "EN TJÄNST FRÅN INERA", mobileMenu, className, children }) => {
+const IDSHeaderIneraAdmin = ({ brandText = "", fluid = false, unresponsive = false, showLogo = false, items, avatar, skipToContent, brandLink, serviceName = "EN TJÄNST FRÅN INERA", mobileMenu, className, children }) => {
     const renderBrandText = () => {
         if (brandLink && isValidElement(brandLink)) {
-            return (jsx("span", { className: "ids-header-inera-admin__brand-text-link", children: cloneElement(brandLink, {
-                    ...brandLink.props,
-                    children: brandText
+            return (jsx("span", { className: "ids-header-inera-admin__brand-link", children: cloneElement(brandLink, {
+                    ...brandLink.props
                 }) }));
         }
-        if (brandText) {
-            return jsx("h1", { className: "ids-header-inera-admin__brand-text", children: brandText });
-        }
         return null;
     };
     return (jsx(HeaderProvider, { value: { unresponsive, fluid, hideRegionPicker: true, regionPickerText: "" }, children: jsxs("header", { className: clsx("ids-header-inera-admin", {
                 "ids-header-inera-admin--unresponsive": unresponsive,
                 "ids-header-inera-admin--fluid": fluid
-            }, className), children: [skipToContent && (jsx("div", { className: "ids-header-inera-admin__skip-to-content", children: skipToContent })), jsxs("div", { className: "ids-header-inera-admin__inner", children: [jsxs("div", { className: "ids-header-inera-admin__service-wrapper", children: [renderBrandText(), jsx("h2", { className: "ids-header-inera-admin__service-name", children: serviceName })] }), jsxs("div", { className: "ids-header-inera-admin__items", children: [items, " ", avatar, " ", mobileMenu] })] }), children] }) }));
+            }, className), children: [skipToContent && jsx("div", { className: "ids-header-inera-admin__skip-to-content", children: skipToContent }), jsxs("div", { className: "ids-header-inera-admin__inner", children: [jsx("div", { className: "ids-header-inera-admin__service-wrapper", children: jsxs("div", { className: "ids-header-inera-admin__brand", children: [showLogo && jsx("div", { className: "ids-header-inera-admin__logo", "aria-label": "Logotyp inera" }), jsxs("div", { className: "ids-header-inera-admin__brand-inner", children: [renderBrandText(), jsx("h1", { className: "ids-header-inera-admin__brand-text", children: brandText }), jsx("h2", { className: "ids-header-inera-admin__service-name", children: serviceName })] })] }) }), jsxs("div", { className: "ids-header-inera-admin__items", children: [items, " ", avatar, " ", mobileMenu] })] }), children] }) }));
 };
 
 export { IDSHeaderIneraAdmin };

package/components/tabs/tabs.d.ts

@@ -3,6 +3,7 @@ import "@inera/ids-design/components/tabs/tabs.css";
 import { IDSTabProps } from "./tab";
 interface IDSTabsProps extends React.HTMLAttributes<HTMLDivElement> {
     unresponsive?: boolean;
+    light?: boolean;
     compact?: boolean;
     breakpoint?: "m" | "s";
     selectLabel?: string;

package/components/tabs/tabs.js

@@ -6,7 +6,7 @@ import '@inera/ids-design/components/tabs/tabs.css';
 import { useElementId } from '../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSTabs = ({ unresponsive = false, compact = false, breakpoint = "m", selectLabel = "", tabs = [], children, className, onTabChange }) => {
+const IDSTabs = ({ unresponsive = false, light = false, compact = false, breakpoint = "m", selectLabel = "", tabs = [], children, className, onTabChange }) => {
     const tabsId = useElementId();
     const initialSelectedIndex = tabs.findIndex(tab => React__default.isValidElement(tab) && tab.props.selected === true);
     const [activeTab, setActiveTab] = useState(initialSelectedIndex !== -1 ? initialSelectedIndex : 0);
@@ -68,14 +68,28 @@ const IDSTabs = ({ unresponsive = false, compact = false, breakpoint = "m", sele
         handleSelect(index);
     };
     const renderTabOptions = () => tabs?.map((tab, i) => {
-        const label = React__default.isValidElement(tab) ? tab.props.label || `Tab ${i + 1}` : `Tab ${i + 1}`;
-        return (jsx("option", { value: i, children: label }, i));
+        if (!React__default.isValidElement(tab))
+            return null;
+        const { label, notification } = tab.props;
+        let notificationText = "";
+        if (typeof notification === "string" || typeof notification === "number") {
+            notificationText = String(notification);
+        }
+        else if (React__default.isValidElement(notification)) {
+            const badge = notification;
+            const childTexts = React__default.Children.toArray(badge.props.children)
+                .map(child => (typeof child === "string" || typeof child === "number" ? child : ""))
+                .join("");
+            notificationText = childTexts.trim();
+        }
+        const optionLabel = notificationText ? `${label} (${notificationText})` : label;
+        return (jsx("option", { value: i, children: optionLabel }, i));
     });
     return (jsxs("div", { className: clsx("ids-tabs", {
             "ids-tabs--unresponsive": unresponsive,
             "ids-tabs--responsive-on-m": responsiveOnM,
             "ids-tabs--responsive-on-s": responsiveOnS
-        }, className), children: [jsx("div", { className: "ids-tabs__select", children: jsx(IDSSelect, { label: selectLabel, onChange: tabChangedFromSelect, value: activeTab, children: renderTabOptions() }) }), jsx("div", { className: "ids-tabs__tabs", role: "tablist", children: enhancedTabs }), jsx("div", { className: "ids-tabs__panels", children: enhancedTabPanels })] }));
+        }, className), children: [jsx("div", { className: "ids-tabs__select", children: jsx(IDSSelect, { label: selectLabel, onChange: tabChangedFromSelect, value: activeTab, light: light, children: renderTabOptions() }) }), jsx("div", { className: "ids-tabs__tabs", role: "tablist", children: enhancedTabs }), jsx("div", { className: "ids-tabs__panels", children: enhancedTabPanels })] }));
 };
 
 export { IDSTabs };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@inera/ids-react",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "type": "module",
   "peerDependencies": {
     "react": "*"
   },
   "dependencies": {
-    "@inera/ids-core": "7.1.x",
+    "@inera/ids-core": "7.2.x",
     "@lit-labs/react": "^1.1.0",
     "clsx": "*"
   },