@equinor/eds-core-react 0.43.0-dev-12102024 → 0.43.0-dev-01062025

package/dist/eds-core-react.cjs

@@ -1285,7 +1285,7 @@ const ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton({
   }, [selectedIndexes]);
   function updateProps(child, isSelected, index) {
     const childElement = child;
-    if ( /*#__PURE__*/react.isValidElement(child)) {
+    if (/*#__PURE__*/react.isValidElement(child)) {
       const buttonProps = {
         'aria-pressed': isSelected ? true : undefined,
         variant: isSelected ? 'contained' : 'outlined',
@@ -1307,7 +1307,7 @@ const ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton({
   const updatedChildren = react.Children.map(children, (child, index) => {
     const isSelected = pickedIndexes.includes(index);
     const childElement = child;
-    if ( /*#__PURE__*/react.isValidElement(child) && child.type === Tooltip$2) {
+    if (/*#__PURE__*/react.isValidElement(child) && child.type === Tooltip$2) {
       const updatedGrandChildren = react.Children.map(childElement.props.children, grandChild => {
         return updateProps(grandChild, isSelected, index);
       });
@@ -2291,20 +2291,16 @@ const Label$3 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
     disabled = false,
     ...other
   } = props;
-  return (
-    /*#__PURE__*/
-    /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */
-    jsxRuntime.jsxs(LabelBase, {
-      ref: ref,
-      $disabledText: disabled,
-      ...other,
-      children: [/*#__PURE__*/jsxRuntime.jsx(Text$3, {
-        children: label
-      }), meta && /*#__PURE__*/jsxRuntime.jsx(Text$3, {
-        children: meta
-      })]
-    })
-  );
+  return /*#__PURE__*/ /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */jsxRuntime.jsxs(LabelBase, {
+    ref: ref,
+    $disabledText: disabled,
+    ...other,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Text$3, {
+      children: label
+    }), meta && /*#__PURE__*/jsxRuntime.jsx(Text$3, {
+      children: meta
+    })]
+  });
 });
 
 // Label.displayName = 'eds-text-field-label'
@@ -3094,7 +3090,6 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField({
 });
 
 let _icons = {};
-let count = 0;
 /** Add icons to library to be used for rendering using name.
 This needs to be done lonly once */
 const add = icons => {
@@ -3104,11 +3099,7 @@ const add = icons => {
   };
 };
 const get = name => {
-  count += 1;
-  return {
-    icon: _icons[name],
-    count
-  };
+  return _icons[name];
 };
 
 const StyledSvg = styled__default.default.svg.attrs(({
@@ -3139,24 +3130,14 @@ const StyledPath$2 = styled__default.default.path.attrs(({
   displayName: "Icon__StyledPath",
   componentId: "sc-6evbi1-1"
 })([""]);
-const customIcon = icon => ({
-  icon,
-  count: Math.floor(Math.random() * 1000)
-});
 const findIcon = (name, data, size) => {
   // eslint-disable-next-line prefer-const
-  let {
-    icon,
-    count
-  } = data ? customIcon(data) : get(name);
+  const icon = data ?? get(name);
   if (size < 24) {
     // fallback to normal icon if small is not made yet
-    icon = icon.sizes?.small || icon;
+    return icon.sizes?.small || icon;
   }
-  return {
-    icon,
-    count
-  };
+  return icon;
 };
 const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon({
   size,
@@ -3168,10 +3149,7 @@ const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon({
   ...rest
 }, ref) {
   // eslint-disable-next-line prefer-const
-  const {
-    icon,
-    count
-  } = findIcon(name, data, size);
+  const icon = findIcon(name, data, size);
   if (typeof icon === 'undefined') {
     throw Error(`Icon "${name}" not found. Have you added it using Icon.add() or using data props?`);
   }
@@ -3192,9 +3170,8 @@ const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon({
   };
 
   // Accessibility
-  let titleId = '';
+  const titleId = edsUtils.useId(null, `${icon.prefix}-${icon.name}`);
   if (title) {
-    titleId = `${icon.prefix}-${icon.name}-${count}`;
     svgProps = {
       ...svgProps,
       title,
@@ -3667,7 +3644,7 @@ const AccordionHeader$1 = /*#__PURE__*/react.forwardRef(function AccordionHeader
         children: child
       });
     }
-    if ( /*#__PURE__*/react.isValidElement(child) && child.type === AccordionHeaderTitle) {
+    if (/*#__PURE__*/react.isValidElement(child) && child.type === AccordionHeaderTitle) {
       return /*#__PURE__*/react.cloneElement(child, {
         isExpanded,
         disabled
@@ -3679,7 +3656,7 @@ const AccordionHeader$1 = /*#__PURE__*/react.forwardRef(function AccordionHeader
     return child;
   });
   const headerActions = react.Children.map(children, child => {
-    if ( /*#__PURE__*/react.isValidElement(child) && child.type === AccordionHeaderActions) {
+    if (/*#__PURE__*/react.isValidElement(child) && child.type === AccordionHeaderActions) {
       return /*#__PURE__*/react.cloneElement(child, {
         isExpanded,
         disabled
@@ -7842,11 +7819,11 @@ const List = styled__default.default.div.withConfig({
   componentId: "sc-104rzof-0"
 })(["position:relative;list-style:none;display:flex;flex-direction:column;margin:0;", " li:first-child{z-index:3;}"], edsUtils.spacingsTemplate(menu.spacings));
 function isIndexable(item) {
-  if ( /*#__PURE__*/react.isValidElement(item) && !item.props.disabled && item.type === MenuItem$1) return true;
+  if (/*#__PURE__*/react.isValidElement(item) && !item.props.disabled && item.type === MenuItem$1) return true;
   return false;
 }
 function closeMenuOnClick(item) {
-  if ( /*#__PURE__*/react.isValidElement(item) && item.type === MenuItem$1 && item.props.closeMenuOnClick !== false) return true;
+  if (/*#__PURE__*/react.isValidElement(item) && item.type === MenuItem$1 && item.props.closeMenuOnClick !== false) return true;
   return false;
 }
 const MenuList = /*#__PURE__*/react.forwardRef(function MenuList({

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

@@ -123,7 +123,7 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader({
         children: child
       });
     }
-    if ( /*#__PURE__*/isValidElement(child) && child.type === AccordionHeaderTitle) {
+    if (/*#__PURE__*/isValidElement(child) && child.type === AccordionHeaderTitle) {
       return /*#__PURE__*/cloneElement(child, {
         isExpanded,
         disabled
@@ -135,7 +135,7 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader({
     return child;
   });
   const headerActions = Children.map(children, child => {
-    if ( /*#__PURE__*/isValidElement(child) && child.type === AccordionHeaderActions) {
+    if (/*#__PURE__*/isValidElement(child) && child.type === AccordionHeaderActions) {
       return /*#__PURE__*/cloneElement(child, {
         isExpanded,
         disabled

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

@@ -1,3 +1,4 @@
+'use client';
 import { Accordion as Accordion$1 } from './Accordion.js';
 import { AccordionItem } from './AccordionItem.js';
 import { AccordionHeader } from './AccordionHeader.js';

package/dist/esm/components/Banner/index.js

@@ -1,3 +1,4 @@
+'use client';
 import { Banner as Banner$1 } from './Banner.js';
 import { BannerIcon } from './BannerIcon.js';
 import { BannerMessage } from './BannerMessage.js';

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

@@ -1,3 +1,4 @@
+'use client';
 import { Breadcrumbs as Breadcrumbs$1 } from './Breadcrumbs.js';
 import { Breadcrumb } from './Breadcrumb.js';
 

package/dist/esm/components/Button/ToggleButton/ToggleButton.js

@@ -18,7 +18,7 @@ const ToggleButton = /*#__PURE__*/forwardRef(function ToggleButton({
   }, [selectedIndexes]);
   function updateProps(child, isSelected, index) {
     const childElement = child;
-    if ( /*#__PURE__*/isValidElement(child)) {
+    if (/*#__PURE__*/isValidElement(child)) {
       const buttonProps = {
         'aria-pressed': isSelected ? true : undefined,
         variant: isSelected ? 'contained' : 'outlined',
@@ -40,7 +40,7 @@ const ToggleButton = /*#__PURE__*/forwardRef(function ToggleButton({
   const updatedChildren = Children.map(children, (child, index) => {
     const isSelected = pickedIndexes.includes(index);
     const childElement = child;
-    if ( /*#__PURE__*/isValidElement(child) && child.type === Tooltip) {
+    if (/*#__PURE__*/isValidElement(child) && child.type === Tooltip) {
       const updatedGrandChildren = Children.map(childElement.props.children, grandChild => {
         return updateProps(grandChild, isSelected, index);
       });

package/dist/esm/components/Button/index.js

@@ -1,3 +1,4 @@
+'use client';
 import { Button as Button$1 } from './Button.js';
 import { ButtonGroup } from './ButtonGroup/ButtonGroup.js';
 import { ToggleButton } from './ToggleButton/ToggleButton.js';

package/dist/esm/components/Card/index.js

@@ -1,3 +1,4 @@
+'use client';
 import { Card as Card$1 } from './Card.js';
 import { CardActions } from './CardActions.js';
 import { CardContent } from './CardContent.js';

package/dist/esm/components/Dialog/index.js

@@ -1,3 +1,4 @@
+'use client';
 import { Dialog as Dialog$1 } from './Dialog.js';
 import { DialogActions } from './DialogActions.js';
 import { DialogTitle } from './DialogTitle.js';

package/dist/esm/components/Icon/Icon.js

@@ -1,3 +1,4 @@
+import { useId } from '@equinor/eds-utils';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { get } from './library.js';
@@ -31,24 +32,14 @@ const StyledPath = styled.path.attrs(({
   displayName: "Icon__StyledPath",
   componentId: "sc-6evbi1-1"
 })([""]);
-const customIcon = icon => ({
-  icon,
-  count: Math.floor(Math.random() * 1000)
-});
 const findIcon = (name, data, size) => {
   // eslint-disable-next-line prefer-const
-  let {
-    icon,
-    count
-  } = data ? customIcon(data) : get(name);
+  const icon = data ?? get(name);
   if (size < 24) {
     // fallback to normal icon if small is not made yet
-    icon = icon.sizes?.small || icon;
+    return icon.sizes?.small || icon;
   }
-  return {
-    icon,
-    count
-  };
+  return icon;
 };
 const Icon = /*#__PURE__*/forwardRef(function Icon({
   size,
@@ -60,10 +51,7 @@ const Icon = /*#__PURE__*/forwardRef(function Icon({
   ...rest
 }, ref) {
   // eslint-disable-next-line prefer-const
-  const {
-    icon,
-    count
-  } = findIcon(name, data, size);
+  const icon = findIcon(name, data, size);
   if (typeof icon === 'undefined') {
     throw Error(`Icon "${name}" not found. Have you added it using Icon.add() or using data props?`);
   }
@@ -84,9 +72,8 @@ const Icon = /*#__PURE__*/forwardRef(function Icon({
   };
 
   // Accessibility
-  let titleId = '';
+  const titleId = useId(null, `${icon.prefix}-${icon.name}`);
   if (title) {
-    titleId = `${icon.prefix}-${icon.name}-${count}`;
     svgProps = {
       ...svgProps,
       title,

package/dist/esm/components/Icon/library.js

@@ -1,5 +1,4 @@
 let _icons = {};
-let count = 0;
 /** Add icons to library to be used for rendering using name.
 This needs to be done lonly once */
 const add = icons => {
@@ -9,11 +8,7 @@ const add = icons => {
   };
 };
 const get = name => {
-  count += 1;
-  return {
-    icon: _icons[name],
-    count
-  };
+  return _icons[name];
 };
 
 export { add, get };

package/dist/esm/components/Label/Label.js

@@ -21,20 +21,16 @@ const Label = /*#__PURE__*/forwardRef(function Label(props, ref) {
     disabled = false,
     ...other
   } = props;
-  return (
-    /*#__PURE__*/
-    /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */
-    jsxs(LabelBase, {
-      ref: ref,
-      $disabledText: disabled,
-      ...other,
-      children: [/*#__PURE__*/jsx(Text, {
-        children: label
-      }), meta && /*#__PURE__*/jsx(Text, {
-        children: meta
-      })]
-    })
-  );
+  return /*#__PURE__*/ /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */jsxs(LabelBase, {
+    ref: ref,
+    $disabledText: disabled,
+    ...other,
+    children: [/*#__PURE__*/jsx(Text, {
+      children: label
+    }), meta && /*#__PURE__*/jsx(Text, {
+      children: meta
+    })]
+  });
 });
 
 // Label.displayName = 'eds-text-field-label'

package/dist/esm/components/List/index.js

@@ -1,3 +1,4 @@
+'use client';
 import { List as List$1 } from './List.js';
 import { ListItem } from './ListItem.js';
 

package/dist/esm/components/Menu/MenuList.js

@@ -12,11 +12,11 @@ const List = styled.div.withConfig({
   componentId: "sc-104rzof-0"
 })(["position:relative;list-style:none;display:flex;flex-direction:column;margin:0;", " li:first-child{z-index:3;}"], spacingsTemplate(menu.spacings));
 function isIndexable(item) {
-  if ( /*#__PURE__*/isValidElement(item) && !item.props.disabled && item.type === MenuItem) return true;
+  if (/*#__PURE__*/isValidElement(item) && !item.props.disabled && item.type === MenuItem) return true;
   return false;
 }
 function closeMenuOnClick(item) {
-  if ( /*#__PURE__*/isValidElement(item) && item.type === MenuItem && item.props.closeMenuOnClick !== false) return true;
+  if (/*#__PURE__*/isValidElement(item) && item.type === MenuItem && item.props.closeMenuOnClick !== false) return true;
   return false;
 }
 const MenuList = /*#__PURE__*/forwardRef(function MenuList({

package/dist/esm/components/Menu/index.js

@@ -1,3 +1,4 @@
+'use client';
 import { Menu as Menu$1 } from './Menu.js';
 import { MenuItem } from './MenuItem.js';
 import { MenuSection } from './MenuSection.js';

package/dist/esm/components/Popover/index.js

@@ -1,3 +1,4 @@
+'use client';
 import { Popover as Popover$1 } from './Popover.js';
 import { PopoverTitle } from './PopoverTitle.js';
 import { PopoverContent } from './PopoverContent.js';

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

@@ -1,3 +1,4 @@
+'use client';
 import { SideBar as SideBar$1 } from './SideBar.js';
 import { SidebarLink } from './SidebarLink/index.js';
 import { SideBarContent } from './SideBarContent.js';

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

@@ -1,3 +1,4 @@
+'use client';
 import { SnackbarAction } from './SnackbarAction.js';
 import { Snackbar as Snackbar$1 } from './Snackbar.js';
 

package/dist/esm/components/Table/index.js

@@ -1,3 +1,4 @@
+'use client';
 import { Table as Table$1 } from './Table.js';
 import { Body } from './Body.js';
 import { Cell } from './Cell.js';

package/dist/esm/components/TableOfContents/index.js

@@ -1,3 +1,4 @@
+'use client';
 import { TableOfContents as TableOfContents$1 } from './TableOfContents.js';
 import { LinkItem } from './LinkItem.js';
 

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

@@ -1,3 +1,4 @@
+'use client';
 import { Tabs as Tabs$1 } from './Tabs.js';
 import { TabList } from './TabList.js';
 import { Tab } from './Tab.js';

package/dist/esm/components/TopBar/index.js

@@ -1,3 +1,4 @@
+'use client';
 import { TopBar as TopBar$1 } from './TopBar.js';
 import { Actions } from './Actions.js';
 import { Header } from './Header.js';

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

@@ -1,5 +1,5 @@
-import { Ref, SVGProps } from 'react';
 import type { IconData } from '@equinor/eds-icons';
+import { Ref, SVGProps } from 'react';
 import type { Name } from './Icon.types';
 export type IconProps = ({
     /** Title for icon when used semantically */

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

@@ -1,10 +1,6 @@
-import type { IconData, IconName } from '@equinor/eds-icons';
+import type { IconName } from '@equinor/eds-icons';
 import { Icon } from './Icon';
 import { add } from './library';
-export type IconBasket = {
-    icon?: IconData;
-    count: number;
-};
 export type Name = IconName;
 export type IconType = typeof Icon & {
     add: typeof add;

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

@@ -1,8 +1,8 @@
 import type { IconData } from '@equinor/eds-icons';
-import type { IconBasket, Name } from './Icon.types';
+import type { Name } from './Icon.types';
 type IconRecord = Record<Name, IconData>;
 /** Add icons to library to be used for rendering using name.
 This needs to be done lonly once */
 export declare const add: (icons: IconRecord) => void;
-export declare const get: (name: Name) => IconBasket;
+export declare const get: (name: Name) => IconData | undefined;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.43.0-dev-12102024",
+  "version": "0.43.0-dev-01062025",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -33,23 +33,23 @@
   ],
   "devDependencies": {
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^27.0.0",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@storybook/addon-a11y": "^8.3.4",
-    "@storybook/addon-actions": "^8.3.4",
-    "@storybook/addon-docs": "^8.3.4",
-    "@storybook/addon-essentials": "^8.3.4",
-    "@storybook/addon-links": "^8.3.4",
-    "@storybook/blocks": "^8.3.4",
-    "@storybook/preview-api": "^8.3.4",
-    "@storybook/react": "^8.3.4",
-    "@storybook/react-vite": "^8.3.4",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/preview-api": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "16.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "14.5.2",
-    "@types/jest": "^29.5.12",
-    "@types/ramda": "^0.30.1",
+    "@types/jest": "^29.5.14",
+    "@types/ramda": "^0.30.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "babel-plugin-styled-components": "^2.1.4",
@@ -57,20 +57,20 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.2.0",
     "js-file-download": "^0.4.12",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.49",
     "ramda": "^0.30.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.52.2",
+    "react-hook-form": "^7.54.2",
     "react-router-dom": "^6.26.0",
-    "rollup": "^4.22.5",
+    "rollup": "^4.29.1",
     "rollup-plugin-delete": "^2.1.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^8.3.4",
-    "styled-components": "6.1.12",
-    "tsc-watch": "^6.2.0",
-    "typescript": "^5.5.4"
+    "storybook": "^8.4.7",
+    "styled-components": "6.1.13",
+    "tsc-watch": "^6.2.1",
+    "typescript": "^5.7.2"
   },
   "peerDependencies": {
     "react": ">=16.8",
@@ -78,19 +78,19 @@
     "styled-components": ">=5.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.0",
-    "@floating-ui/react": "^0.26.22",
-    "@internationalized/date": "^3.5.5",
-    "@react-aria/utils": "^3.25.1",
-    "@react-stately/calendar": "^3.5.3",
-    "@react-stately/datepicker": "^3.10.1",
-    "@react-types/shared": "^3.24.1",
-    "@tanstack/react-virtual": "3.11.1",
+    "@babel/runtime": "^7.26.0",
+    "@floating-ui/react": "^0.27.2",
+    "@internationalized/date": "^3.6.0",
+    "@react-aria/utils": "^3.26.0",
+    "@react-stately/calendar": "^3.6.0",
+    "@react-stately/datepicker": "^3.11.0",
+    "@react-types/shared": "^3.26.0",
+    "@tanstack/react-virtual": "3.11.2",
     "downshift": "9.0.8",
-    "react-aria": "^3.34.1",
+    "react-aria": "^3.36.0",
     "@equinor/eds-icons": "^0.21.0",
-    "@equinor/eds-tokens": "0.9.2",
-    "@equinor/eds-utils": "0.8.5"
+    "@equinor/eds-utils": "0.8.5",
+    "@equinor/eds-tokens": "0.9.2"
   },
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs && tsc -p tsconfig.build.json",