@inera/ids-react 9.0.4 → 9.1.0

package/components/tabs/tabs.d.ts

@@ -9,4 +9,4 @@ export interface IDSTabsProps extends React.HTMLAttributes<HTMLDivElement> {
     breakpoint?: "m" | "s";
     selectLabel?: string;
 }
-export declare function IDSTabs({ tabs, selectLabel, light, compact, breakpoint, children, onTabChange, ...props }: IDSTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSTabs({ tabs, selectLabel, light, compact, breakpoint, children, className, onTabChange, ...props }: IDSTabsProps): import("react/jsx-runtime").JSX.Element;

package/components/tabs/tabs.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import React, { useId, useState } from 'react';
+import React, { useId, useState, useRef } from 'react';
 import { IDSTabsBase } from './tabs-base.js';
 import { IDSSelect } from '../form/select/select.js';
+import { useHasFocusableChildren } from '../utils/hooks/useHasFocusableChildren.js';
 
-function IDSTabs({ tabs = [], selectLabel, light, compact, breakpoint, children, onTabChange, ...props }) {
+function IDSTabs({ tabs = [], selectLabel, light, compact, breakpoint, children, className, onTabChange, ...props }) {
     const reactId = useId();
     const getTabId = (index) => `tab-${reactId}-${index}`;
     const getTabPanelId = (index) => `tab-panel-${reactId}-${index}`;
@@ -57,7 +58,7 @@ function IDSTabs({ tabs = [], selectLabel, light, compact, breakpoint, children,
             id: getTabId?.(idx),
             panelId: getTabPanelId?.(idx),
             index: `${idx}`,
-            label: tab.props.label,
+            label: tab.props.label || "Välj flik",
             selected: activeTab === idx,
             onTabClick: () => handleTabChange?.(idx),
             onKeyDown: (e) => handleKeydown(e, idx)
@@ -66,6 +67,7 @@ function IDSTabs({ tabs = [], selectLabel, light, compact, breakpoint, children,
     const enhancedTabPanels = React.Children.map(children, (panel, idx) => {
         if (!React.isValidElement(panel))
             return panel;
+        const panelRef = useRef(null);
         return React.cloneElement(panel, {
             key: `tab-panel-key-${idx}`,
             id: getTabPanelId?.(idx),
@@ -73,10 +75,12 @@ function IDSTabs({ tabs = [], selectLabel, light, compact, breakpoint, children,
             role: "tabpanel",
             hidden: activeTab !== idx,
             selected: activeTab === idx,
+            ref: panelRef,
+            noFocus: panel.props.noFocus || useHasFocusableChildren(panelRef),
             compact
         });
     });
-    return (jsx(IDSTabsBase, { ...props, tabs: enhancedTabs, breakpoint: breakpoint, select: jsx(IDSSelect, { label: selectLabel, onChange: tabChangedFromSelect, value: activeTab, light: light, children: renderTabOptions() }), children: enhancedTabPanels }));
+    return (jsx(IDSTabsBase, { ...props, tabs: enhancedTabs, breakpoint: breakpoint, className: className, select: jsx(IDSSelect, { label: selectLabel, onChange: tabChangedFromSelect, value: activeTab, light: light, children: renderTabOptions() }), children: enhancedTabPanels }));
 }
 
 export { IDSTabs };

package/components/utils/hooks/useClickOutside.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from "react";
+/**
+ * useClickOutside
+ * Calls handler when a click occurs outside the provided ref(s)
+ *
+ * @param refs - one or more refs to consider "inside"
+ * @param handler - callback when a click outside occurs
+ * @param enabled - optional, defaults to true; disable the listener when false
+ */
+export declare function useClickOutside(refs: RefObject<HTMLElement> | RefObject<HTMLElement>[], handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean): void;

package/components/utils/hooks/useClickOutside.js

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+
+/**
+ * useClickOutside
+ * Calls handler when a click occurs outside the provided ref(s)
+ *
+ * @param refs - one or more refs to consider "inside"
+ * @param handler - callback when a click outside occurs
+ * @param enabled - optional, defaults to true; disable the listener when false
+ */
+function useClickOutside(refs, handler, enabled = true) {
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const elements = Array.isArray(refs) ? refs.map(r => r.current) : [refs.current];
+        const listener = (event) => {
+            // If any element contains the click, do nothing
+            if (elements.some(el => el && el.contains(event.target)))
+                return;
+            handler(event);
+        };
+        document.addEventListener("mousedown", listener);
+        document.addEventListener("touchstart", listener);
+        return () => {
+            document.removeEventListener("mousedown", listener);
+            document.removeEventListener("touchstart", listener);
+        };
+    }, [refs, handler, enabled]);
+}
+
+export { useClickOutside };

package/components/utils/hooks/useEsc.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from "react";
+/**
+ * useEsc
+ * Calls the provided callback when Escape is pressed and optionally focuses a ref
+ *
+ * @param callback - function to call when Escape is pressed
+ * @param focusRef - optional ref to focus when Escape is pressed
+ * @param enabled - optional, defaults to true; disables listener when false
+ */
+export declare function useEsc(callback: () => void, focusRef?: RefObject<HTMLElement>, enabled?: boolean): void;

package/components/utils/hooks/useEsc.js

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+
+/**
+ * useEsc
+ * Calls the provided callback when Escape is pressed and optionally focuses a ref
+ *
+ * @param callback - function to call when Escape is pressed
+ * @param focusRef - optional ref to focus when Escape is pressed
+ * @param enabled - optional, defaults to true; disables listener when false
+ */
+function useEsc(callback, focusRef, enabled = true) {
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                callback();
+                focusRef?.current?.focus();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [callback, focusRef, enabled]);
+}
+
+export { useEsc };

package/components/utils/hooks/useHasFocusableChildren.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+export declare function useHasFocusableChildren<T extends HTMLElement>(ref: RefObject<T>): boolean;

package/components/utils/hooks/useHasFocusableChildren.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+const FOCUSABLE_SELECTORS = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    "[tabindex]:not([tabindex='-1'])",
+];
+function useHasFocusableChildren(ref) {
+    const [hasFocusable, setHasFocusable] = useState(false);
+    useEffect(() => {
+        if (!ref.current) {
+            setHasFocusable(false);
+            return;
+        }
+        // Query for any focusable elements inside the ref
+        const focusable = ref.current.querySelectorAll(FOCUSABLE_SELECTORS.join(","));
+        setHasFocusable(focusable.length > 0);
+    }, [ref.current]);
+    return hasFocusable;
+}
+
+export { useHasFocusableChildren };

package/index.d.ts

@@ -39,8 +39,8 @@ export * from "./components/accordion/accordion-base";
 export * from "./components/link/action-link";
 export * from "./components/alert/alert";
 export * from "./components/alert/alert-base";
-export * from "./components/alert/global-alert";
-export * from "./components/alert/global-alert-base";
+export * from "./components/global-alert/global-alert";
+export * from "./components/global-alert/global-alert-base";
 export * from "./components/mobile-menu/mobile-item";
 export * from "./components/mobile-menu/mobile-item-base";
 export * from "./components/mobile-menu/mobile-menu";

package/index.js

@@ -39,8 +39,8 @@ export { IDSAccordionBase } from './components/accordion/accordion-base.js';
 export { IDSActionLink } from './components/link/action-link.js';
 export { IDSAlert } from './components/alert/alert.js';
 export { IDSAlertBase } from './components/alert/alert-base.js';
-export { IDSGlobalAlert } from './components/alert/global-alert.js';
-export { IDSGlobalAlertBase } from './components/alert/global-alert-base.js';
+export { IDSGlobalAlert } from './components/global-alert/global-alert.js';
+export { IDSGlobalAlertBase } from './components/global-alert/global-alert-base.js';
 export { IDSMobileMenuItem } from './components/mobile-menu/mobile-item.js';
 export { IDSMobileMenuItemBase } from './components/mobile-menu/mobile-item-base.js';
 export { IDSMobileMenu } from './components/mobile-menu/mobile-menu.js';

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@inera/ids-react",
-  "version": "9.0.4",
+  "version": "9.1.0",
   "type": "module",
   "peerDependencies": {
     "react": "*",
     "react-day-picker": "^9.11.3"
   },
   "dependencies": {
-    "@inera/ids-design": "9.0.x",
+    "@inera/ids-design": "9.1.x",
     "clsx": "*"
   },
   "types": "index.d.ts",