@inera/ids-react 8.1.0 → 9.0.0

package/components/global-alert/global-alert.js

@@ -1,26 +0,0 @@
-"use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
-import '@inera/ids-design/components/global-alert/global-alert.css';
-import clsx from 'clsx';
-import { useElementId } from '../utils/hooks/useElementId.js';
-
-const IDSGlobalAlert = ({ agent = false, srExpandText = "Visa meddelande", srCollapseText = "Dölj meddelande", collapsed = false, noRole = false, onCollapsedChange, actions, headline = "", children, className, ...props }) => {
-    const [isCollapsed, setIsCollapsed] = useState(collapsed);
-    useEffect(() => {
-        setIsCollapsed(collapsed);
-    }, [collapsed]);
-    const handleToggleCollapse = () => {
-        setIsCollapsed(!isCollapsed);
-        onCollapsedChange?.(!isCollapsed);
-    };
-    const contentId = useElementId();
-    return (jsx("div", { role: noRole ? null : "alert", className: clsx("ids-global-alert", {
-            "ids-global-alert--collapsed": isCollapsed,
-            "ids-global-alert--agent": agent
-        }, className), ...props, children: jsxs("div", { className: "ids-global-alert__inner", children: [jsx("div", { className: "ids-global-alert__header", children: jsx("button", { className: clsx("ids-global-alert__button", {
-                            "ids-global-alert__button--expanded": !isCollapsed
-                        }), "aria-controls": contentId, "aria-expanded": !isCollapsed, onClick: handleToggleCollapse, children: jsxs("div", { className: "ids-global-alert__icon-headline", children: [jsx("div", { className: "ids-global-alert__headline", children: headline }), jsx("span", { className: "ids-global-alert__sr-only", children: isCollapsed ? srExpandText : srCollapseText })] }) }) }), jsxs("div", { id: contentId, className: "ids-global-alert__content", children: [children, actions && jsx("div", { className: "ids-global-alert__sub-content", children: actions })] })] }) }));
-};
-
-export { IDSGlobalAlert };

package/components/mobile/menu/item/mobile-item.d.ts

@@ -1,15 +0,0 @@
-import React, { ReactNode } from "react";
-import "@inera/ids-design/components/mobile-menu/mobile-menu.css";
-export interface IDSMobileMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
-    level?: number;
-    secondary?: boolean;
-    expanded?: boolean;
-    headline?: string;
-    link?: ReactNode;
-    active?: boolean;
-    showText?: string;
-    hideText?: string;
-    children?: ReactNode;
-    onToggleExpansion?: (isExpanded: boolean) => void;
-}
-export declare const IDSMobileMenuItem: React.FC<IDSMobileMenuItemProps>;

package/components/mobile/menu/item/mobile-item.js

@@ -1,61 +0,0 @@
-"use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useState, useRef, useEffect } from 'react';
-import '@inera/ids-design/components/mobile-menu/mobile-menu.css';
-import clsx from 'clsx';
-import { useElementId } from '../../../utils/hooks/useElementId.js';
-
-const IDSMobileMenuItem = ({ level = 1, secondary = false, expanded = false, headline = "", link, active = false, showText = "Expandera", hideText = "Minimera", children, onToggleExpansion, ...props }) => {
-    const [isExpanded, setIsExpanded] = useState(expanded);
-    const subItemId = useRef(useElementId());
-    const contentRef = useRef(null);
-    useEffect(() => {
-        setIsExpanded(expanded);
-    }, [expanded]);
-    const toggleExpanded = () => {
-        if (!!children || headline) {
-            const newExpanded = !isExpanded;
-            setIsExpanded(newExpanded);
-            onToggleExpansion?.(newExpanded);
-        }
-    };
-    const getItemLevelClass = () => {
-        switch (level) {
-            case 2:
-                return "ids-mobile-menu-item--2";
-            case 3:
-                return "ids-mobile-menu-item--3";
-            default:
-                return "ids-mobile-menu-item";
-        }
-    };
-    const renderItem = () => {
-        const commonProps = {
-            "aria-label": isExpanded ? hideText : showText,
-            onClick: toggleExpanded,
-            "aria-expanded": isExpanded,
-            "aria-controls": subItemId.current,
-            className: clsx("ids-mobile-menu-item__expand-btn", !!level && `ids-mobile-menu-item__expand-btn--level-${level}`, {
-                "ids-mobile-menu-item__expand-btn--headline": headline,
-                "ids-mobile-menu__chevron--expanded": isExpanded
-            })
-        };
-        if (headline) {
-            return jsx("button", { ...commonProps, children: headline });
-        }
-        else if (link && !!children) {
-            return (jsxs(Fragment, { children: [link, jsx("button", { ...commonProps })] }));
-        }
-        else {
-            return link;
-        }
-    };
-    return (jsxs("div", { ref: contentRef, className: clsx(getItemLevelClass(), isExpanded && "ids-mobile-menu-item--expanded", active && "ids-mobile-menu-item--active", secondary && "ids-mobile-menu-item--secondary"), ...props, children: [jsx("div", { className: `ids-mobile-menu-item__inner ${level && "ids-mobile-menu-item__inner--level-" + level}`, children: renderItem() }), jsx("div", { id: subItemId.current, className: "ids-mobile-menu-item__sub-items", children: React.Children.map(children, child => React.isValidElement(child)
-                    ? React.cloneElement(child, {
-                        "data-ids-sub-item": true,
-                        level: level + 1
-                    })
-                    : child) })] }));
-};
-
-export { IDSMobileMenuItem };

package/components/mobile/menu/mobile-menu.d.ts

@@ -1,7 +0,0 @@
-import React, { ReactNode } from "react";
-import "@inera/ids-design/components/mobile-menu/mobile-menu.css";
-export interface IDSMobileMenuProps extends React.HTMLAttributes<HTMLDivElement> {
-    variation?: number;
-    children: ReactNode;
-}
-export declare const IDSMobileMenu: React.FC<IDSMobileMenuProps>;

package/components/mobile/menu/mobile-menu.js

@@ -1,12 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import '@inera/ids-design/components/mobile-menu/mobile-menu.css';
-import clsx from 'clsx';
-
-const IDSMobileMenu = ({ variation = 1, children, className, ...props }) => {
-    return (jsx("div", { className: clsx("ids-mobile-menu", {
-            "ids-mobile-menu--variation-2": variation === 2
-        }, className), ...props, children: children }));
-};
-
-export { IDSMobileMenu };

package/components/notification/badge/notification-badge.js

@@ -1,9 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import '@inera/ids-design/components/notification-badge/notification-badge.css';
-import clsx from 'clsx';
-
-function IDSNotificationBadge({ type = "primary", icon = "", onClick, className, children, ...props }) {
-    return (jsxs("div", { className: clsx("ids-notification-badge", `ids-notification-badge--${type}`, className), onClick: onClick, ...props, children: [icon && jsx("span", { className: `ids-icon-${icon}` }), children] }));
-}
-
-export { IDSNotificationBadge };

package/components/pagination/data-pagination/data-pagination.js

@@ -1,16 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useImperativeHandle } from 'react';
-import '@inera/ids-design/components/pagination/data-pagination/data-pagination.css';
-import clsx from 'clsx';
-import { useElementId } from '../../utils/hooks/useElementId.js';
-
-const IDSDataPagination = forwardRef(({ label = "Rader per sida", from, to, of = "av", total, defaultValue = "", selectId = "", firstPageButton, previousButton, nextButton, lastPageButton, light = false, noSelect = false, onSelectChange, className, children, ...props }, ref) => {
-    const summaryText = `${from} - ${to} ${of} ${total}`;
-    const selectElementId = useElementId(selectId);
-    const internalSelectRef = useRef(null);
-    useImperativeHandle(ref, () => internalSelectRef.current);
-    return (jsxs("div", { className: clsx("ids-data-pagination", { "ids-data-pagination--light": light }, className), ...props, children: [!noSelect && (jsxs("div", { className: "ids-data-pagination__select", children: [jsx("label", { htmlFor: selectElementId, children: label }), jsx("select", { id: selectElementId, ref: internalSelectRef, name: "data-pagination-select-options", defaultValue: defaultValue, onChange: onSelectChange, children: children })] })), jsx("div", { className: "ids-data-pagination__summary", children: summaryText }), jsxs("div", { className: "ids-data-pagination__buttons", children: [firstPageButton && jsx("div", { className: "ids-data-pagination__first-page-button", children: firstPageButton }), previousButton && jsx("div", { className: "ids-data-pagination__prev-button", children: previousButton }), nextButton && jsx("div", { className: "ids-data-pagination__next-button", children: nextButton }), lastPageButton && jsx("div", { className: "ids-data-pagination__last-page-button", children: lastPageButton })] })] }));
-});
-IDSDataPagination.displayName = "IDSDataPagination";
-
-export { IDSDataPagination };

package/components/puff-list/puff-list-item/puff-list-item-header.js

@@ -1,11 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-
-function IDSPuffListItemHeader({ headlineLevel = 2, headlineExtra, noMargin = false, className, children, ...props }) {
-    const Tag = `h${headlineLevel}`;
-    const headerClass = clsx("ids-puff-list-item-header__headline", { "ids-puff-list-item-header__headline--no-margin": noMargin }, className);
-    return (jsxs(Tag, { className: headerClass, ...props, children: [children, headlineExtra && jsx("span", { className: "ids-puff-list-item-header__extra-content", children: headlineExtra })] }));
-}
-IDSPuffListItemHeader.displayName = "IDSPuffListItemHeader";
-
-export { IDSPuffListItemHeader };

package/components/puff-list/puff-list-item/puff-list-item-info.js

@@ -1,10 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import '@inera/ids-design/components/puff-list/puff-list.css';
-import clsx from 'clsx';
-
-function IDSPuffListItemInfo({ bottom = false, children, className, ...props }) {
-    const classes = clsx("ids-puff-list-item__info", { "ids-puff-list-item__info--bottom": bottom }, className);
-    return (jsx("div", { className: classes, ...props, children: children }));
-}
-
-export { IDSPuffListItemInfo };

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

@@ -1,5 +0,0 @@
-/**
- * Generates a unique ID to associate form elements like input and label.
- * Optionally takes an `id` to use directly (e.g., passed from props).
- */
-export declare const useElementId: (explicitId?: string) => string;

package/components/utils/hooks/useElementId.js

@@ -1,12 +0,0 @@
-import { useId } from 'react';
-
-/**
- * Generates a unique ID to associate form elements like input and label.
- * Optionally takes an `id` to use directly (e.g., passed from props).
- */
-const useElementId = (explicitId) => {
-    const generatedId = useId(); // uses React 18+ built-in hook
-    return explicitId || generatedId;
-};
-
-export { useElementId };