@inera/ids-react 8.0.0 → 8.2.0

package/components/stepper/stepper.d.ts

@@ -5,5 +5,5 @@ interface IDSStepperProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactElement<IDSStepProps>[] | ReactElement<IDSStepProps>;
     onToggleExpansion?: (step: number, expanded: boolean) => void;
 }
-export declare const IDSStepper: React.FC<IDSStepperProps>;
+export declare function IDSStepper({ children, onToggleExpansion, className, ...props }: IDSStepperProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/stepper/stepper.js

@@ -4,7 +4,7 @@ import React, { isValidElement, cloneElement } from 'react';
 import '@inera/ids-design/components/stepper/stepper.css';
 import clsx from 'clsx';
 
-const IDSStepper = ({ children, onToggleExpansion, className, ...props }) => {
+function IDSStepper({ children, onToggleExpansion, className, ...props }) {
     const stepsArray = React.Children.toArray(children).filter(isValidElement);
     const handleExpansion = (step, expanded) => {
         onToggleExpansion?.(step, expanded);
@@ -18,6 +18,6 @@ const IDSStepper = ({ children, onToggleExpansion, className, ...props }) => {
         });
     });
     return (jsx("div", { className: clsx("ids-stepper", className), ...props, children: enhancedSteps }));
-};
+}
 
 export { IDSStepper };

package/components/tabs/tab.js

@@ -13,7 +13,7 @@ const IDSTab = ({ label, index, id = "", panelId = "", selected = false, icon =
     };
     return (jsx("div", { id: id, ref: tabRef, role: "tab", tabIndex: 0, onClick: handleClick, onKeyDown: onKeyDown, className: clsx("ids-tab", {
             "ids-tab--selected": selected
-        }, className), "aria-selected": selected, "aria-controls": panelId, ...props, children: jsxs("div", { className: "ids-tab__label", children: [icon && jsx("span", { className: `ids-icon-${icon} ids-icon--m`, "aria-hidden": "true" }), label, notification] }) }));
+        }, className), "aria-selected": selected, "aria-controls": panelId, ...props, children: jsxs("div", { className: "ids-tab__label", children: [icon && jsx("span", { className: `ids-tab-icon ids-icon-${icon} ids-icon--m`, "aria-hidden": "true" }), label, notification && jsx("span", { className: "ids-tab-extra", children: notification })] }) }));
 };
 
 export { IDSTab };

package/components/tag/tag.d.ts

@@ -1,10 +1,17 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/tag/tag.css";
-interface IDSTagProps extends React.HTMLAttributes<HTMLButtonElement> {
+type ButtonTagProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    onClick: () => void;
+    onClose?: () => void;
     srCloseLabel?: string;
+    children?: ReactNode;
+};
+type SpanTagProps = React.HTMLAttributes<HTMLSpanElement> & {
+    onClick?: undefined;
     onClose?: () => void;
-    onClick?: () => void;
+    srCloseLabel?: string;
     children?: ReactNode;
-}
-export declare const IDSTag: React.FC<IDSTagProps>;
+};
+type IDSTagProps = ButtonTagProps | SpanTagProps;
+export declare const IDSTag: React.ForwardRefExoticComponent<IDSTagProps & React.RefAttributes<HTMLButtonElement | HTMLSpanElement>>;
 export {};

package/components/tag/tag.js

@@ -1,16 +1,16 @@
-"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import '@inera/ids-design/components/tag/tag.css';
 import clsx from 'clsx';
 
-const IDSTag = ({ srCloseLabel = "", onClose, onClick, children, className, ...props }) => {
-    const TagWrapper = !!onClick ? "button" : "span";
-    return (jsx(TagWrapper, { className: clsx("ids-tag", {
-            "ids-tag--clickable": !!onClick
-        }, className), onClick: !!onClick ? onClick : undefined, ...props, children: jsxs("div", { className: "ids-tag__content", children: [children, !onClick && !!onClose && (jsx("button", { className: "ids-tag__close-btn", "aria-label": srCloseLabel, onClick: e => {
+const IDSTag = forwardRef(({ srCloseLabel = "", onClose, onClick, className, children, ...props }, ref) => {
+    const isClickable = !!onClick;
+    const TagWrapper = isClickable ? "button" : "span";
+    return (jsx(TagWrapper, { ref: ref, ...props, className: clsx("ids-tag", { "ids-tag--clickable": isClickable }, className), onClick: isClickable ? onClick : undefined, children: jsxs("div", { className: "ids-tag__content", children: [children, !isClickable && !!onClose && (jsx("button", { type: "button", className: "ids-tag__close-btn", "aria-label": srCloseLabel, onClick: e => {
                         e.stopPropagation();
                         onClose?.();
                     } }))] }) }));
-};
+});
+IDSTag.displayName = "IDSTag";
 
 export { IDSTag };

package/components/tooltip/tooltip.d.ts

@@ -3,6 +3,7 @@ import "@inera/ids-design/components/tooltip/tooltip.css";
 export type TooltipPosition = "top-left" | "top" | "top-right" | "bottom-left" | "bottom" | "bottom-right";
 interface IDSTooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     position?: TooltipPosition;
+    maxWidth?: string;
     trigger: ReactNode;
     children?: ReactNode;
 }

package/components/tooltip/tooltip.js

@@ -5,7 +5,7 @@ import '@inera/ids-design/components/tooltip/tooltip.css';
 import { useElementId } from '../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSTooltip = ({ position = "top", trigger, children, className, ...props }) => {
+const IDSTooltip = ({ position = "top", maxWidth = "20rem", trigger, children, className, ...props }) => {
     const [translateX, setTranslateX] = useState(position === "top" || position === "bottom" ? "-50%" : "0");
     const [translateY, setTranslateY] = useState(position.includes("top") ? "-100%" : "100%");
     const tooltipContentRef = useRef(null);
@@ -19,9 +19,11 @@ const IDSTooltip = ({ position = "top", trigger, children, className, ...props }
     };
     const handleOverflow = () => {
         const tooltipContent = tooltipContentRef.current;
-        if (!tooltipContent)
+        const trigger = triggerRef.current;
+        if (!tooltipContent || !trigger)
             return;
         const rect = tooltipContent.getBoundingClientRect();
+        const triggerHeight = trigger.getBoundingClientRect().height;
         const vw = window.innerWidth;
         const vh = window.innerHeight;
         if (rect.right > vw) {
@@ -35,10 +37,10 @@ const IDSTooltip = ({ position = "top", trigger, children, className, ...props }
             setTranslateX("0");
         }
         if (rect.bottom > vh) {
-            setTranslateY("-100%");
+            setTranslateY(`-${triggerHeight + 16}px`);
         }
         if (rect.top < 0) {
-            setTranslateY("100%");
+            setTranslateY(`${triggerHeight + 16}px`);
         }
     };
     const checkKey = (e) => {
@@ -53,8 +55,7 @@ const IDSTooltip = ({ position = "top", trigger, children, className, ...props }
         tooltipContent.setAttribute("role", "tooltip");
         const focusable = getFirstFocusableContent();
         if (focusable) {
-            if (triggerRef.current?.querySelector('[class^="ids-icon-"]') ||
-                triggerRef.current?.querySelector("ids-icon")) {
+            if (triggerRef.current?.querySelector('[class^="ids-icon-"]') || triggerRef.current?.querySelector("ids-icon")) {
                 focusable.setAttribute("role", "img");
                 focusable.setAttribute("aria-labelledby", tooltipId);
             }
@@ -76,7 +77,7 @@ const IDSTooltip = ({ position = "top", trigger, children, className, ...props }
             triggerWrapper.removeEventListener("focusin", handleOverflow);
         };
     }, [triggerRef]);
-    return (jsxs("span", { className: clsx("ids-tooltip", className), ...props, children: [jsx("span", { className: "ids-tooltip__trigger", ref: triggerRef, children: trigger }), jsx("span", { className: clsx("ids-tooltip__content", `ids-tooltip__content--${position}`), ref: tooltipContentRef, id: tooltipId, style: { transform: `translate(${translateX}, ${translateY})` }, children: children })] }));
+    return (jsxs("span", { className: clsx("ids-tooltip", className), ...props, children: [jsx("span", { className: "ids-tooltip__trigger", ref: triggerRef, children: trigger }), jsx("span", { className: clsx("ids-tooltip__content", `ids-tooltip__content--${position}`), ref: tooltipContentRef, id: tooltipId, style: { transform: `translate(${translateX}, ${translateY})`, maxWidth }, children: children })] }));
 };
 
 export { IDSTooltip };

package/components/utils/hooks/useFocusTrap.js

@@ -6,9 +6,10 @@ function useFocusTrap(container, active) {
             return;
         const focusableSelectors = [
             "a[href]",
-            "button:not([disabled])",
+            'button:not([disabled]):not([tabindex="-1"])',
             "textarea:not([disabled])",
-            "input:not([disabled])",
+            "input:not([disabled]):not([type='radio'])",
+            ".ids-focus-anchor",
             "select:not([disabled])",
             '[tabindex]:not([tabindex="-1"])'
         ];

package/index.d.ts

@@ -19,6 +19,7 @@ export * from "./components/grid/container";
 export * from "./components/grid/row";
 export * from "./components/grid/column";
 export * from "./components/accordion/accordion";
+export * from "./components/action-link/action-link";
 export * from "./components/alert/alert";
 export * from "./components/global-alert/global-alert";
 export * from "./components/mobile/menu/item/mobile-item";
@@ -30,9 +31,12 @@ export * from "./components/tabs/tab";
 export * from "./components/tabs/tab-panel";
 export * from "./components/puff-list/puff-list";
 export * from "./components/puff-list/puff-list-item/puff-list-item";
+export * from "./components/puff-list/puff-list-item/puff-list-item-date";
+export * from "./components/puff-list/puff-list-item/puff-list-item-header";
 export * from "./components/puff-list/puff-list-item/puff-list-item-info";
 export * from "./components/date-label/date-label";
 export * from "./components/breadcrumbs/breadcrumbs";
+export * from "./components/form/datepicker/datepicker";
 export * from "./components/dialog/dialog";
 export * from "./components/dropdown/dropdown";
 export * from "./components/dropdown/dropdown-content-link";

package/index.js

@@ -19,6 +19,7 @@ export { IDSContainer } from './components/grid/container.js';
 export { IDSRow } from './components/grid/row.js';
 export { IDSColumn } from './components/grid/column.js';
 export { IDSAccordion } from './components/accordion/accordion.js';
+export { IDSActionLink } from './components/action-link/action-link.js';
 export { IDSAlert } from './components/alert/alert.js';
 export { IDSGlobalAlert } from './components/global-alert/global-alert.js';
 export { IDSMobileMenuItem } from './components/mobile/menu/item/mobile-item.js';
@@ -30,9 +31,12 @@ export { IDSTab } from './components/tabs/tab.js';
 export { IDSTabPanel } from './components/tabs/tab-panel.js';
 export { IDSPuffList } from './components/puff-list/puff-list.js';
 export { IDSPuffListItem } from './components/puff-list/puff-list-item/puff-list-item.js';
+export { IDSPuffListItemDate } from './components/puff-list/puff-list-item/puff-list-item-date.js';
+export { IDSPuffListItemHeader } from './components/puff-list/puff-list-item/puff-list-item-header.js';
 export { IDSPuffListItemInfo } from './components/puff-list/puff-list-item/puff-list-item-info.js';
 export { IDSDateLabel } from './components/date-label/date-label.js';
 export { IDSBreadcrumbs } from './components/breadcrumbs/breadcrumbs.js';
+export { IDSDatePicker } from './components/form/datepicker/datepicker.js';
 export { IDSDialog } from './components/dialog/dialog.js';
 export { IDSDropdown } from './components/dropdown/dropdown.js';
 export { IDSDropdownContentLink } from './components/dropdown/dropdown-content-link.js';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@inera/ids-react",
-  "version": "8.0.0",
+  "version": "8.2.0",
   "type": "module",
   "peerDependencies": {
     "react": "*"
   },
   "dependencies": {
-    "@inera/ids-design": "8.0.x",
+    "@inera/ids-design": "8.2.x",
     "clsx": "*"
   },
   "types": "index.d.ts",