@equinor/eds-core-react 0.49.0 → 1.0.0

package/dist/eds-core-react.cjs

@@ -3422,16 +3422,17 @@ const AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem({
   ...props
 }, ref) {
   const [expanded, setExpanded] = react.useState(isExpanded);
-  const controlled = onExpandedChange != undefined;
+  const controlled = onExpandedChange !== undefined;
   const activeExpandedState = controlled ? isExpanded : expanded;
   const toggleExpanded = () => {
+    if (disabled) return;
     if (controlled) {
-      onExpandedChange(!isExpanded);
+      onExpandedChange?.(!isExpanded);
     } else {
       setExpanded(!expanded);
     }
   };
-  const Children = react.Children.map(children, (child, childIndex) => {
+  const processedChildren = react.Children.map(children, (child, childIndex) => {
     const headerId = `${accordionId}-header-${index + 1}`;
     const panelId = `${accordionId}-panel-${index + 1}`;
     return childIndex === 0 ? /*#__PURE__*/react.cloneElement(child, {
@@ -3457,7 +3458,7 @@ const AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem({
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     ...props,
     ref: ref,
-    children: Children
+    children: processedChildren
   });
 });
 
@@ -3996,7 +3997,7 @@ const TabList = /*#__PURE__*/react.forwardRef(function TabsList({
     scrollable = false,
     tabsFocused
   } = react.useContext(TabsContext);
-  const currentTab = react.useRef();
+  const currentTab = react.useRef(0);
   const [arrowNavigating, setArrowNavigating] = react.useState(false);
   const selectedTabRef = react.useCallback(node => {
     if (node !== null && tabsFocused || node !== null && arrowNavigating) {
@@ -4008,13 +4009,13 @@ const TabList = /*#__PURE__*/react.forwardRef(function TabsList({
     if (! /*#__PURE__*/react.isValidElement(child)) {
       return null;
     }
-    const tabChild = child;
-    const childProps = tabChild.props;
+    const childProps = child.props;
     const controlledActive = childProps.value;
     const isActive = controlledActive ? controlledActive === activeTab : $index === activeTab;
-    const tabRef = isActive ? edsUtils.mergeRefs(tabChild.ref, selectedTabRef) : tabChild.ref;
+    const childRef = childProps?.ref || null;
+    const tabRef = isActive && childRef ? edsUtils.mergeRefs(childRef, selectedTabRef) : isActive ? selectedTabRef : childRef;
     if (isActive) currentTab.current = $index;
-    return /*#__PURE__*/react.cloneElement(tabChild, {
+    return /*#__PURE__*/react.cloneElement(child, {
       id: `${tabsId}-tab-${$index + 1}`,
       'aria-controls': `${tabsId}-panel-${$index + 1}`,
       active: isActive,
@@ -6272,7 +6273,7 @@ const Snackbar$1 = /*#__PURE__*/react.forwardRef(function Snackbar({
   ...rest
 }, ref) {
   const [visible, setVisible] = react.useState(open);
-  const timer = react.useRef();
+  const timer = react.useRef(null);
   react.useEffect(() => {
     setVisible(open);
     if (open) {
@@ -6301,7 +6302,9 @@ const Snackbar$1 = /*#__PURE__*/react.forwardRef(function Snackbar({
     children: visible && /*#__PURE__*/jsxRuntime.jsx(PopoverDiv, {
       popover: "manual",
       $placement: placement,
-      ref: el => el?.showPopover(),
+      ref: el => {
+        el?.showPopover();
+      },
       children: /*#__PURE__*/jsxRuntime.jsx(StyledSnackbar, {
         role: "alert",
         elevation: "overlay",
@@ -7503,7 +7506,12 @@ const Breadcrumb = /*#__PURE__*/react.forwardRef(function Breadcrumb({
   return showTooltip ? /*#__PURE__*/jsxRuntime.jsx(Tooltip$2, {
     title: children,
     placement: "top",
-    children: crumb
+    children: /*#__PURE__*/jsxRuntime.jsx("span", {
+      style: {
+        display: 'inline-block'
+      },
+      children: crumb
+    })
   }) : crumb;
 });
 
@@ -11163,10 +11171,9 @@ const SideBarAccordion = /*#__PURE__*/react.forwardRef(function SideBarAccordion
       onClose: closeMenu,
       anchorEl: anchorEl,
       children: react.Children.map(children, child => {
-        const item = child;
         return /*#__PURE__*/jsxRuntime.jsx(Menu.Item, {
           ...child.props,
-          children: item.props.label
+          children: child.props.label
         });
       })
     })]
@@ -11432,7 +11439,7 @@ const GridFocusManager = ({
   setYearPickerPage
 }) => {
   const focusManager = reactAria.useFocusManager();
-  const prevYear = react.useRef();
+  const prevYear = react.useRef(null);
   const navByKeyboard = react.useRef(false);
   const years = getPageYears(selectedYear, yearPickerPage);
   react.useEffect(() => {

package/dist/esm/components/Accordion/AccordionItem.js

@@ -13,16 +13,17 @@ const AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem({
   ...props
 }, ref) {
   const [expanded, setExpanded] = useState(isExpanded);
-  const controlled = onExpandedChange != undefined;
+  const controlled = onExpandedChange !== undefined;
   const activeExpandedState = controlled ? isExpanded : expanded;
   const toggleExpanded = () => {
+    if (disabled) return;
     if (controlled) {
-      onExpandedChange(!isExpanded);
+      onExpandedChange?.(!isExpanded);
     } else {
       setExpanded(!expanded);
     }
   };
-  const Children$1 = Children.map(children, (child, childIndex) => {
+  const processedChildren = Children.map(children, (child, childIndex) => {
     const headerId = `${accordionId}-header-${index + 1}`;
     const panelId = `${accordionId}-panel-${index + 1}`;
     return childIndex === 0 ? /*#__PURE__*/cloneElement(child, {
@@ -48,7 +49,7 @@ const AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem({
   return /*#__PURE__*/jsx("div", {
     ...props,
     ref: ref,
-    children: Children$1
+    children: processedChildren
   });
 });
 

package/dist/esm/components/Breadcrumbs/Breadcrumb.js

@@ -44,7 +44,12 @@ const Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb({
   return showTooltip ? /*#__PURE__*/jsx(Tooltip, {
     title: children,
     placement: "top",
-    children: crumb
+    children: /*#__PURE__*/jsx("span", {
+      style: {
+        display: 'inline-block'
+      },
+      children: crumb
+    })
   }) : crumb;
 });
 

package/dist/esm/components/Datepicker/calendars/YearGrid.js

@@ -24,7 +24,7 @@ const GridFocusManager = ({
   setYearPickerPage
 }) => {
   const focusManager = useFocusManager();
-  const prevYear = useRef();
+  const prevYear = useRef(null);
   const navByKeyboard = useRef(false);
   const years = getPageYears(selectedYear, yearPickerPage);
   useEffect(() => {

package/dist/esm/components/SideBar/SideBarAccordion/index.js

@@ -222,10 +222,9 @@ const SideBarAccordion = /*#__PURE__*/forwardRef(function SideBarAccordion({
       onClose: closeMenu,
       anchorEl: anchorEl,
       children: Children.map(children, child => {
-        const item = child;
         return /*#__PURE__*/jsx(Menu.Item, {
           ...child.props,
-          children: item.props.label
+          children: child.props.label
         });
       })
     })]

package/dist/esm/components/Snackbar/Snackbar.js

@@ -40,7 +40,7 @@ const Snackbar = /*#__PURE__*/forwardRef(function Snackbar({
   ...rest
 }, ref) {
   const [visible, setVisible] = useState(open);
-  const timer = useRef();
+  const timer = useRef(null);
   useEffect(() => {
     setVisible(open);
     if (open) {
@@ -69,7 +69,9 @@ const Snackbar = /*#__PURE__*/forwardRef(function Snackbar({
     children: visible && /*#__PURE__*/jsx(PopoverDiv, {
       popover: "manual",
       $placement: placement,
-      ref: el => el?.showPopover(),
+      ref: el => {
+        el?.showPopover();
+      },
       children: /*#__PURE__*/jsx(StyledSnackbar, {
         role: "alert",
         elevation: "overlay",

package/dist/esm/components/Tabs/TabList.js

@@ -30,7 +30,7 @@ const TabList = /*#__PURE__*/forwardRef(function TabsList({
     scrollable = false,
     tabsFocused
   } = useContext(TabsContext);
-  const currentTab = useRef();
+  const currentTab = useRef(0);
   const [arrowNavigating, setArrowNavigating] = useState(false);
   const selectedTabRef = useCallback(node => {
     if (node !== null && tabsFocused || node !== null && arrowNavigating) {
@@ -42,13 +42,13 @@ const TabList = /*#__PURE__*/forwardRef(function TabsList({
     if (! /*#__PURE__*/isValidElement(child)) {
       return null;
     }
-    const tabChild = child;
-    const childProps = tabChild.props;
+    const childProps = child.props;
     const controlledActive = childProps.value;
     const isActive = controlledActive ? controlledActive === activeTab : $index === activeTab;
-    const tabRef = isActive ? mergeRefs(tabChild.ref, selectedTabRef) : tabChild.ref;
+    const childRef = childProps?.ref || null;
+    const tabRef = isActive && childRef ? mergeRefs(childRef, selectedTabRef) : isActive ? selectedTabRef : childRef;
     if (isActive) currentTab.current = $index;
-    return /*#__PURE__*/cloneElement(tabChild, {
+    return /*#__PURE__*/cloneElement(child, {
       id: `${tabsId}-tab-${$index + 1}`,
       'aria-controls': `${tabsId}-panel-${$index + 1}`,
       active: isActive,

package/dist/types/components/Chip/Icon.d.ts

@@ -2,7 +2,7 @@ type IconProps = {
     $variant: 'active' | 'error' | 'default';
     $disabled: boolean;
 };
-export declare const Icon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Omit<{
+export declare const Icon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<{
     title?: string;
     color?: string;
     size?: 16 | 18 | 24 | 32 | 40 | 48;
@@ -10,9 +10,7 @@ export declare const Icon: import("styled-components/dist/types").IStyledCompone
     name: import("../Icon/Icon.types").Name;
     data?: import("@equinor/eds-icons").IconData;
     ref?: import("react").Ref<SVGSVGElement>;
-} & import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>, "ref"> & {
-    ref?: import("react").Ref<SVGSVGElement>;
-}) | (Omit<Omit<{
+} & import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>) | (Omit<{
     title?: string;
     color?: string;
     size?: 16 | 18 | 24 | 32 | 40 | 48;
@@ -20,7 +18,5 @@ export declare const Icon: import("styled-components/dist/types").IStyledCompone
     name?: import("../Icon/Icon.types").Name;
     data: import("@equinor/eds-icons").IconData;
     ref?: import("react").Ref<SVGSVGElement>;
-} & import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>, "ref"> & {
-    ref?: import("react").Ref<SVGSVGElement>;
-}), IconProps>> & string & Omit<import("../Icon/Icon.types").IconType, keyof import("react").Component<any, {}, any>>;
+} & import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>), IconProps>> & string & Omit<import("../Icon/Icon.types").IconType, keyof import("react").Component<any, {}, any>>;
 export {};

package/dist/types/components/Datepicker/fields/FieldWrapper.d.ts

@@ -16,7 +16,7 @@ export declare const FieldWrapper: import("react").ForwardRefExoticComponent<{
     setIsOpen: (open: boolean) => void;
     label?: string;
     calendar: ReactNode;
-    pickerRef: RefObject<HTMLDivElement>;
+    pickerRef: RefObject<HTMLDivElement | null>;
     readonly: boolean;
     extraProps?: GroupDOMAttributes;
 } & {

package/dist/types/components/Menu/Menu.context.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, MouseEvent } from 'react';
+import { ReactNode, MouseEvent, type JSX } from 'react';
 import type { FocusTarget } from './Menu.types';
 export type State = {
     focusedIndex: number;

package/dist/types/components/SideBar/SideBarButton/index.d.ts

@@ -7,4 +7,4 @@ export type SideBarButtonProps = {
 export declare const SideBarButton: import("react").ForwardRefExoticComponent<{
     label: string;
     icon: IconData;
-} & Omit<ButtonProps, "type" | "href" | "variant" | "fullWidth"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & Omit<ButtonProps, "type" | "variant" | "href" | "fullWidth"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Switch/Switch.styles.d.ts

@@ -1,5 +1,3 @@
 export declare const BaseInputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const BaseInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLInputElement>;
-}>, never>, never>> & string;
+export declare const BaseInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>, never>, never>> & string;
 export declare const GridWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/types/components/Tabs/TabList.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, RefAttributes } from 'react';
+import { HTMLAttributes } from 'react';
 export type TabListProps = HTMLAttributes<HTMLDivElement>;
-declare const TabList: import("react").ForwardRefExoticComponent<TabListProps & RefAttributes<HTMLDivElement>>;
+declare const TabList: import("react").ForwardRefExoticComponent<TabListProps & import("react").RefAttributes<HTMLDivElement>>;
 export { TabList };

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -8,7 +8,7 @@ export type TooltipProps = {
     /** Disable the tooltip */
     disabled?: boolean;
     /** Tooltip anchor element */
-    children: React.ReactElement & React.RefAttributes<HTMLElement>;
+    children: React.ReactElement<HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>;
     /** Delay in ms, default 100 */
     enterDelay?: number;
     /** Portal container
@@ -24,7 +24,7 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     /** Disable the tooltip */
     disabled?: boolean;
     /** Tooltip anchor element */
-    children: React.ReactElement & React.RefAttributes<HTMLElement>;
+    children: React.ReactElement<HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>;
     /** Delay in ms, default 100 */
     enterDelay?: number;
     /** Portal container

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.49.0",
+  "version": "1.0.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -45,17 +45,18 @@
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "^29.5.14",
     "@types/ramda": "^0.30.2",
-    "@types/react": "^18.3.24",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "babel-plugin-styled-components": "^2.1.4",
+    "eslint-plugin-storybook": "9.1.5",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.2.0",
     "js-file-download": "^0.4.12",
     "postcss": "^8.5.6",
     "ramda": "^0.31.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "react-hook-form": "^7.62.0",
     "react-router-dom": "^6.30.1",
     "rollup": "^4.50.0",
@@ -65,11 +66,10 @@
     "storybook": "^9.1.5",
     "styled-components": "6.1.19",
     "tsc-watch": "^6.3.1",
-    "typescript": "^5.9.2",
-    "eslint-plugin-storybook": "9.1.5"
+    "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "react": ">=16.8",
+    "react": ">=19.0.0",
     "react-dom": ">=16.8",
     "styled-components": ">=5.1"
   },
@@ -84,9 +84,9 @@
     "@tanstack/react-virtual": "3.13.12",
     "downshift": "9.0.8",
     "react-aria": "^3.43.1",
-    "@equinor/eds-icons": "^0.22.0",
-    "@equinor/eds-utils": "0.9.0",
-    "@equinor/eds-tokens": "0.10.0"
+    "@equinor/eds-icons": "^1.0.0",
+    "@equinor/eds-tokens": "1.0.0",
+    "@equinor/eds-utils": "1.0.0"
   },
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs && tsc -p tsconfig.build.json",