@equinor/eds-core-react 2.4.1 → 2.5.0-beta.0

package/dist/eds-core-react.cjs

@@ -3318,7 +3318,6 @@ const StyledPath$2 = styled__default.default.path.attrs(({
   componentId: "sc-6evbi1-1"
 })([""]);
 const findIcon = (name, data, size) => {
-  // eslint-disable-next-line prefer-const
   const icon = data ?? get(name);
   if (size < 24) {
     // fallback to normal icon if small is not made yet
@@ -3335,7 +3334,6 @@ const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon({
   data,
   ...rest
 }, ref) {
-  // eslint-disable-next-line prefer-const
   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?`);
@@ -4133,7 +4131,6 @@ const Tabs$1 = /*#__PURE__*/react.forwardRef(function Tabs({
     return () => {
       if (tabs) tabs.removeEventListener('keyup', checkIfTabWasPressed);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const {
     density
@@ -6888,7 +6885,6 @@ Popover.Content.displayName = 'Popover.Content';
 Popover.Header.displayName = 'Popover.Header';
 Popover.Actions.displayName = 'Popover.Actions';
 
-/* eslint-disable camelcase */
 const {
   typography: {
     paragraph: {
@@ -8459,7 +8455,6 @@ const Pagination = /*#__PURE__*/react.forwardRef(function Pagination({
       setActivePage(1);
       onChange?.(null, 1);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [itemsPerPage]);
   const props = {
     ref,
@@ -9577,6 +9572,7 @@ const MultipleInput = () => {
     hideClearButton,
     restHtmlProps,
     consolidatedEvents,
+    chipCount,
     inputRef
   } = useAutocompleteContext();
   const chipRefs = react.useRef(new Map());
@@ -9584,7 +9580,9 @@ const MultipleInput = () => {
     if (isKeyboardEvent && selectedItems.length > 1) {
       const isLastChip = index === selectedItems.length - 1;
       const nextItem = selectedItems[isLastChip ? index - 1 : index + 1];
-      chipRefs.current.get(getLabel(nextItem))?.focus();
+      const nextRef = chipRefs.current.get(getLabel(nextItem));
+      // Fall back to input when next chip is hidden (beyond chipCount)
+      if (nextRef) nextRef.focus();else inputRef.current?.focus();
     } else if (!isKeyboardEvent) {
       inputRef.current?.focus();
     }
@@ -9613,7 +9611,7 @@ const MultipleInput = () => {
     "data-density": density,
     children: /*#__PURE__*/jsxRuntime.jsxs(ChipContainer, {
       $density: density,
-      children: [selectionDisplay === 'chips' && selectedItems.map((item, index) => /*#__PURE__*/jsxRuntime.jsx(Chip, {
+      children: [selectionDisplay === 'chips' && selectedItems.slice(0, chipCount > 0 ? chipCount : undefined).map((item, index) => /*#__PURE__*/jsxRuntime.jsx(Chip, {
         ref: el => {
           if (el) chipRefs.current.set(getLabel(item), el);else chipRefs.current.delete(getLabel(item));
         },
@@ -9629,7 +9627,18 @@ const MultipleInput = () => {
         onClick: handleChipClick(item, index),
         disabled: readOnly,
         children: getLabel(item)
-      }, getLabel(item))), /*#__PURE__*/jsxRuntime.jsx(UnstyledInput, {
+      }, getLabel(item))), selectionDisplay === 'chips' && chipCount && selectedItems.length > chipCount && /*#__PURE__*/jsxRuntime.jsxs(Chip, {
+        style: {
+          outline: '1px solid var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1))',
+          ...(density === 'compact' && {
+            height: '16px',
+            fontSize: '12px',
+            gridGap: '0px'
+          })
+        },
+        disabled: readOnly,
+        children: ["+", selectedItems.length - chipCount, " more"]
+      }), /*#__PURE__*/jsxRuntime.jsx(UnstyledInput, {
         ...restHtmlProps,
         ...inputProps,
         ...consolidatedEvents,
@@ -10245,6 +10254,7 @@ const useAutocomplete = ({
   onInputChange,
   selectedOptions: _selectedOptions,
   selectionDisplay = 'summary',
+  chipCount,
   multiple,
   itemToKey: _itemToKey,
   itemCompare: _itemCompare,
@@ -10402,7 +10412,6 @@ const useAutocomplete = ({
       return item;
     }
     try {
-      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       return item?.toString();
     } catch {
       throw new Error('Unable to find label, make sure your are using options as documented');
@@ -10817,6 +10826,7 @@ const useAutocomplete = ({
     onInputChange,
     selectedOptions,
     selectionDisplay,
+    chipCount,
     itemToKey,
     itemCompare,
     allowSelectAll,

package/dist/esm/components/Autocomplete/MultipleInput.js

@@ -35,6 +35,7 @@ const MultipleInput = () => {
     hideClearButton,
     restHtmlProps,
     consolidatedEvents,
+    chipCount,
     inputRef
   } = useAutocompleteContext();
   const chipRefs = useRef(new Map());
@@ -42,7 +43,9 @@ const MultipleInput = () => {
     if (isKeyboardEvent && selectedItems.length > 1) {
       const isLastChip = index === selectedItems.length - 1;
       const nextItem = selectedItems[isLastChip ? index - 1 : index + 1];
-      chipRefs.current.get(getLabel(nextItem))?.focus();
+      const nextRef = chipRefs.current.get(getLabel(nextItem));
+      // Fall back to input when next chip is hidden (beyond chipCount)
+      if (nextRef) nextRef.focus();else inputRef.current?.focus();
     } else if (!isKeyboardEvent) {
       inputRef.current?.focus();
     }
@@ -71,7 +74,7 @@ const MultipleInput = () => {
     "data-density": density,
     children: /*#__PURE__*/jsxs(ChipContainer, {
       $density: density,
-      children: [selectionDisplay === 'chips' && selectedItems.map((item, index) => /*#__PURE__*/jsx(Chip, {
+      children: [selectionDisplay === 'chips' && selectedItems.slice(0, chipCount > 0 ? chipCount : undefined).map((item, index) => /*#__PURE__*/jsx(Chip, {
         ref: el => {
           if (el) chipRefs.current.set(getLabel(item), el);else chipRefs.current.delete(getLabel(item));
         },
@@ -87,7 +90,18 @@ const MultipleInput = () => {
         onClick: handleChipClick(item, index),
         disabled: readOnly,
         children: getLabel(item)
-      }, getLabel(item))), /*#__PURE__*/jsx(UnstyledInput, {
+      }, getLabel(item))), selectionDisplay === 'chips' && chipCount && selectedItems.length > chipCount && /*#__PURE__*/jsxs(Chip, {
+        style: {
+          outline: '1px solid var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1))',
+          ...(density === 'compact' && {
+            height: '16px',
+            fontSize: '12px',
+            gridGap: '0px'
+          })
+        },
+        disabled: readOnly,
+        children: ["+", selectedItems.length - chipCount, " more"]
+      }), /*#__PURE__*/jsx(UnstyledInput, {
         ...restHtmlProps,
         ...inputProps,
         ...consolidatedEvents,

package/dist/esm/components/Autocomplete/useAutocomplete.js

@@ -23,6 +23,7 @@ const useAutocomplete = ({
   onInputChange,
   selectedOptions: _selectedOptions,
   selectionDisplay = 'summary',
+  chipCount,
   multiple,
   itemToKey: _itemToKey,
   itemCompare: _itemCompare,
@@ -180,7 +181,6 @@ const useAutocomplete = ({
       return item;
     }
     try {
-      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       return item?.toString();
     } catch {
       throw new Error('Unable to find label, make sure your are using options as documented');
@@ -595,6 +595,7 @@ const useAutocomplete = ({
     onInputChange,
     selectedOptions,
     selectionDisplay,
+    chipCount,
     itemToKey,
     itemCompare,
     allowSelectAll,

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

@@ -1,6 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
 
-/* eslint-disable camelcase */
 const {
   typography: {
     paragraph: {

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

@@ -32,7 +32,6 @@ const StyledPath = styled.path.attrs(({
   componentId: "sc-6evbi1-1"
 })([""]);
 const findIcon = (name, data, size) => {
-  // eslint-disable-next-line prefer-const
   const icon = data ?? get(name);
   if (size < 24) {
     // fallback to normal icon if small is not made yet
@@ -49,7 +48,6 @@ const Icon = /*#__PURE__*/forwardRef(function Icon({
   data,
   ...rest
 }, ref) {
-  // eslint-disable-next-line prefer-const
   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?`);

package/dist/esm/components/Pagination/Pagination.js

@@ -76,7 +76,6 @@ const Pagination = /*#__PURE__*/forwardRef(function Pagination({
       setActivePage(1);
       onChange?.(null, 1);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [itemsPerPage]);
   const props = {
     ref,

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

@@ -63,7 +63,6 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs({
     return () => {
       if (tabs) tabs.removeEventListener('keyup', checkIfTabWasPressed);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const {
     density

package/dist/esm-next/components/next/Button/Button.js

@@ -1,13 +1,11 @@
-import { forwardRef } from 'react';
+import { forwardRef, Children, isValidElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
-import { TypographyNext } from '../../Typography/Typography.new.js';
+import { Slot } from '../Slot/Slot.js';
 
 const SIZE_MAPPING = {
   small: 'sm',
-  default: 'md',
-  large: 'lg'
+  default: 'md'
 };
-const sizeToTypography = SIZE_MAPPING;
 const sizeToSelectableSpace = SIZE_MAPPING;
 const Button = /*#__PURE__*/forwardRef(function Button({
   variant = 'primary',
@@ -15,6 +13,8 @@ const Button = /*#__PURE__*/forwardRef(function Button({
   tone = 'accent',
   icon = false,
   round = false,
+  multiline = false,
+  asChild,
   children,
   className,
   disabled,
@@ -22,29 +22,56 @@ const Button = /*#__PURE__*/forwardRef(function Button({
   ...rest
 }, ref) {
   const classes = ['eds-button', className].filter(Boolean).join(' ');
-  const typographySize = sizeToTypography[size];
   const selectableSpace = sizeToSelectableSpace[size];
-  return /*#__PURE__*/jsx("button", {
-    ref: ref,
-    type: type,
+  const sharedProps = {
+    ref,
     className: classes,
-    disabled: disabled,
-    "data-variant": variant,
-    "data-selectable-space": selectableSpace,
-    "data-space-proportions": "squished",
-    "data-color-appearance": disabled ? 'neutral' : tone,
-    "data-icon-only": icon || undefined,
-    "data-round": icon && round ? true : undefined,
-    ...rest,
-    children: icon ? children : /*#__PURE__*/jsx(TypographyNext, {
-      as: "span",
-      className: "eds-button__label",
-      family: "ui",
-      size: typographySize,
-      lineHeight: "squished",
-      baseline: "center",
+    disabled,
+    'data-variant': variant,
+    'data-selectable-space': selectableSpace,
+    'data-space-proportions': 'squished',
+    'data-color-appearance': disabled ? 'neutral' : tone,
+    'data-icon-only': icon || undefined,
+    'data-round': icon && round ? true : undefined,
+    'data-multiline': multiline || undefined,
+    ...rest
+  };
+  if (asChild) {
+    return /*#__PURE__*/jsx(Slot, {
+      ...sharedProps,
       children: children
-    })
+    });
+  }
+  return /*#__PURE__*/jsx("button", {
+    type: type,
+    ...sharedProps,
+    children: (() => {
+      const out = [];
+      let buf = [];
+      let labelGroupIndex = 0;
+      Children.toArray(children).forEach(child => {
+        const isLabelNode = typeof child === 'string' || typeof child === 'number' || /*#__PURE__*/isValidElement(child) && child.type === 'br';
+        if (isLabelNode) {
+          buf.push(child);
+        } else {
+          if (buf.length) {
+            out.push(/*#__PURE__*/jsx("span", {
+              className: "label",
+              children: buf
+            }, `label-${labelGroupIndex++}`));
+            buf = [];
+          }
+          out.push(child);
+        }
+      });
+      if (buf.length) {
+        out.push(/*#__PURE__*/jsx("span", {
+          className: "label",
+          children: buf
+        }, "label-end"));
+      }
+      return out;
+    })()
   });
 });
 Button.displayName = 'Button';

package/dist/esm-next/components/next/Chip/Chip.js

@@ -0,0 +1,77 @@
+import { forwardRef } from 'react';
+import { check, close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../Icon/Icon.js';
+import { TypographyNext } from '../../Typography/Typography.new.js';
+
+const Chip = /*#__PURE__*/forwardRef(function Chip({
+  tone = 'neutral',
+  variant = 'default',
+  selected = false,
+  onDelete,
+  dropdown = false,
+  onClick,
+  children,
+  className,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const classes = ['eds-chip', className].filter(Boolean).join(' ');
+  const deletable = typeof onDelete === 'function';
+  const toggleable = !deletable && !dropdown;
+  const handleClick = event => {
+    if (deletable) {
+      onDelete?.(event);
+    } else {
+      onClick?.(event);
+    }
+  };
+  const handleKeyDown = event => {
+    if (deletable && (event.key === 'Backspace' || event.key === 'Delete')) {
+      event.preventDefault();
+      onDelete?.(event);
+    }
+    onKeyDown?.(event);
+  };
+  return /*#__PURE__*/jsxs("button", {
+    ref: ref,
+    type: "button",
+    className: classes,
+    "data-variant": variant,
+    "data-color-appearance": tone,
+    "data-font-family": "ui",
+    "data-font-size": "md",
+    "data-selectable-space": "sm",
+    "data-space-proportions": "squished",
+    "data-selected": selected || undefined,
+    "aria-pressed": toggleable ? selected : undefined,
+    "aria-expanded": dropdown ? selected : undefined,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ...rest,
+    children: [selected && !dropdown && !deletable && /*#__PURE__*/jsx(Icon, {
+      data: check,
+      "aria-hidden": true,
+      className: "icon"
+    }), /*#__PURE__*/jsx(TypographyNext, {
+      as: "span",
+      className: "label",
+      family: "ui",
+      size: "md",
+      lineHeight: "squished",
+      baseline: "center",
+      children: children
+    }), deletable && /*#__PURE__*/jsx(Icon, {
+      data: close,
+      title: "Remove",
+      className: "icon"
+    }), !deletable && dropdown && /*#__PURE__*/jsx(Icon, {
+      data: selected ? arrow_drop_up : arrow_drop_down,
+      "aria-hidden": true,
+      className: "icon"
+    })]
+  });
+});
+Chip.displayName = 'Chip';
+
+export { Chip };

package/dist/esm-next/components/next/Link/Link.js

@@ -1,21 +1,33 @@
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
+import { Slot } from '../Slot/Slot.js';
 
 const Link = /*#__PURE__*/forwardRef(function Link({
   variant = 'inline',
+  asChild,
   className,
   children,
   ...rest
 }, ref) {
   const classes = ['eds-link', className].filter(Boolean).join(' ');
-  return /*#__PURE__*/jsx("a", {
-    ref: ref,
+  const sharedProps = {
+    ref,
     className: classes,
-    "data-variant": variant,
-    "data-font-family": variant === 'standalone' ? 'ui' : undefined,
-    "data-font-size": variant === 'standalone' ? 'md' : undefined,
-    "data-line-height": variant === 'standalone' ? 'squished' : undefined,
-    ...rest,
+    'data-variant': variant,
+    'data-color-appearance': 'info',
+    'data-font-family': variant === 'standalone' ? 'ui' : undefined,
+    'data-font-size': variant === 'standalone' ? 'md' : undefined,
+    'data-line-height': variant === 'standalone' ? 'squished' : undefined,
+    ...rest
+  };
+  if (asChild) {
+    return /*#__PURE__*/jsx(Slot, {
+      ...sharedProps,
+      children: children
+    });
+  }
+  return /*#__PURE__*/jsx("a", {
+    ...sharedProps,
     children: children
   });
 });

package/dist/esm-next/components/next/Slot/Slot.js

@@ -0,0 +1,47 @@
+import { forwardRef, isValidElement, cloneElement } from 'react';
+
+function mergeClassNames(...classNames) {
+  return classNames.filter(Boolean).join(' ');
+}
+function mergeProps(slotProps, childProps) {
+  const merged = {
+    ...childProps
+  };
+  for (const key of Object.keys(slotProps)) {
+    const slotValue = slotProps[key];
+    const childValue = childProps[key];
+    if (key === 'className') {
+      merged[key] = mergeClassNames(slotValue, childValue);
+    } else if (key === 'style') {
+      merged[key] = {
+        ...slotValue,
+        ...childValue
+      };
+    } else if (typeof slotValue === 'function' && typeof childValue === 'function') {
+      merged[key] = (...args) => {
+        childValue(...args);
+        slotValue(...args);
+      };
+    } else if (slotValue !== undefined) {
+      merged[key] = slotValue;
+    }
+  }
+  return merged;
+}
+const Slot = /*#__PURE__*/forwardRef(function Slot({
+  children,
+  ...slotProps
+}, ref) {
+  if (! /*#__PURE__*/isValidElement(children)) {
+    return null;
+  }
+  const child = children;
+  const merged = mergeProps(slotProps, child.props);
+  return /*#__PURE__*/cloneElement(child, {
+    ...merged,
+    ref
+  });
+});
+Slot.displayName = 'Slot';
+
+export { Slot };

package/dist/esm-next/index.next.js

@@ -1,12 +1,14 @@
 export { Banner } from './components/next/Banner/Banner.js';
 export { Button } from './components/next/Button/Button.js';
 export { Checkbox } from './components/next/Checkbox/Checkbox.js';
+export { Chip } from './components/next/Chip/Chip.js';
 export { Field } from './components/next/Field/Field.js';
 export { Icon } from './components/next/Icon/Icon.js';
 export { Input } from './components/next/Input/Input.js';
 export { Link } from './components/next/Link/Link.js';
 export { Radio } from './components/next/Radio/Radio.js';
 export { Search } from './components/next/Search/Search.js';
+export { Slot } from './components/next/Slot/Slot.js';
 export { Switch } from './components/next/Switch/Switch.js';
 export { TextArea } from './components/next/TextArea/TextArea.js';
 export { TextField } from './components/next/TextField/TextField.js';