@equinor/eds-core-react 0.20.4 → 0.20.5-dev.20220701

package/dist/eds-core-react.cjs.js

@@ -75,8 +75,8 @@ const {
     focused: outline
   },
   clickbounds: {
-    default__base: clicboundHeight$1,
-    compact__standard: compactClickboundHeight$1
+    default__base: clicboundHeight$2,
+    compact__standard: compactClickboundHeight$2
   }
 } = edsTokens.tokens;
 const button = {
@@ -100,10 +100,10 @@ const button = {
     right: "var(--eds_button__padding_x, ".concat(medium$6, ")")
   },
   clickbound: {
-    height: clicboundHeight$1,
+    height: clicboundHeight$2,
     width: '100%',
     offset: {
-      top: "".concat((parseInt(clicboundHeight$1) - parseInt(buttonHeight)) / 2 + 1, "px"),
+      top: "".concat((parseInt(clicboundHeight$2) - parseInt(buttonHeight)) / 2 + 1, "px"),
       left: '0'
     }
   },
@@ -154,10 +154,10 @@ const button = {
         bottom: 'var(--eds_button__padding_y_compact, 0)'
       },
       clickbound: {
-        height: compactClickboundHeight$1,
+        height: compactClickboundHeight$2,
         width: '100%',
         offset: {
-          top: "".concat((parseInt(compactClickboundHeight$1) - parseInt(compactButtonHeight)) / 2 + 1, "px"),
+          top: "".concat((parseInt(compactClickboundHeight$2) - parseInt(compactButtonHeight)) / 2 + 1, "px"),
           left: '0'
         }
       }
@@ -419,7 +419,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$9 = mergeDeepRight(button, {
+const primary$a = mergeDeepRight(button, {
   background: primaryColor$8,
   typography: {
     color: primaryWhite
@@ -437,7 +437,7 @@ const primary$9 = mergeDeepRight(button, {
     }
   }
 });
-const secondary$4 = mergeDeepRight(primary$9, {
+const secondary$5 = mergeDeepRight(primary$a, {
   background: secondaryColor$3,
   border: {
     color: secondaryColor$3
@@ -451,7 +451,7 @@ const secondary$4 = mergeDeepRight(primary$9, {
     }
   }
 });
-const danger$5 = mergeDeepRight(primary$9, {
+const danger$6 = mergeDeepRight(primary$a, {
   background: dangerColor$3,
   border: {
     color: dangerColor$3
@@ -504,7 +504,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$8 = mergeDeepRight(button, {
+const primary$9 = mergeDeepRight(button, {
   typography: {
     color: primaryColor$7
   },
@@ -533,7 +533,7 @@ const primary$8 = mergeDeepRight(button, {
     }
   }
 });
-const secondary$3 = mergeDeepRight(primary$8, {
+const secondary$4 = mergeDeepRight(primary$9, {
   typography: {
     color: secondaryColor$2
   },
@@ -552,7 +552,7 @@ const secondary$3 = mergeDeepRight(primary$8, {
     }
   }
 });
-const danger$4 = mergeDeepRight(primary$8, {
+const danger$5 = mergeDeepRight(primary$9, {
   typography: {
     color: dangerColor$2
   },
@@ -605,7 +605,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$7 = mergeDeepRight(button, {
+const primary$8 = mergeDeepRight(button, {
   typography: {
     color: primaryColor$6
   },
@@ -624,7 +624,7 @@ const primary$7 = mergeDeepRight(button, {
     }
   }
 });
-const secondary$2 = mergeDeepRight(primary$7, {
+const secondary$3 = mergeDeepRight(primary$8, {
   typography: {
     color: secondaryColor$1
   },
@@ -637,7 +637,7 @@ const secondary$2 = mergeDeepRight(primary$7, {
     }
   }
 });
-const danger$3 = mergeDeepRight(primary$7, {
+const danger$4 = mergeDeepRight(primary$8, {
   typography: {
     color: dangerColor$1
   },
@@ -681,19 +681,19 @@ const {
     }
   },
   clickbounds: {
-    default__base: clicboundHeight,
-    compact__standard: compactClickboundHeight
+    default__base: clicboundHeight$1,
+    compact__standard: compactClickboundHeight$1
   },
-  shape: shape$3,
+  shape: shape$4,
   interactions: {
     focused: {
       width: focusOutlineWidth$8
     }
   }
 } = edsTokens.tokens;
-const primary$6 = mergeDeepRight(button, {
-  height: shape$3.icon_button.minHeight,
-  width: shape$3.icon_button.minWidth,
+const primary$7 = mergeDeepRight(button, {
+  height: shape$4.icon_button.minHeight,
+  width: shape$4.icon_button.minWidth,
   typography: {
     color: primaryColor$5
   },
@@ -707,10 +707,10 @@ const primary$6 = mergeDeepRight(button, {
     right: '0'
   },
   clickbound: {
-    width: clicboundHeight,
+    width: clicboundHeight$1,
     offset: {
       top: '0',
-      left: "".concat((parseInt(clicboundHeight) - parseInt(shape$3.icon_button.minWidth)) / 2, "px")
+      left: "".concat((parseInt(clicboundHeight$1) - parseInt(shape$4.icon_button.minWidth)) / 2, "px")
     }
   },
   states: {
@@ -735,19 +735,19 @@ const primary$6 = mergeDeepRight(button, {
   },
   modes: {
     compact: {
-      height: shape$3._modes.compact.icon_button.minHeight,
-      width: shape$3._modes.compact.icon_button.minWidth,
+      height: shape$4._modes.compact.icon_button.minHeight,
+      width: shape$4._modes.compact.icon_button.minWidth,
       clickbound: {
-        width: compactClickboundHeight,
+        width: compactClickboundHeight$1,
         offset: {
           top: '0',
-          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape$3._modes.compact.icon_button.minWidth)) / 2, "px")
+          left: "".concat((parseInt(compactClickboundHeight$1) - parseInt(shape$4._modes.compact.icon_button.minWidth)) / 2, "px")
         }
       }
     }
   }
 });
-const secondary$1 = mergeDeepRight(primary$6, {
+const secondary$2 = mergeDeepRight(primary$7, {
   typography: {
     color: secondaryColor
   },
@@ -760,7 +760,7 @@ const secondary$1 = mergeDeepRight(primary$6, {
     }
   }
 });
-const danger$2 = mergeDeepRight(primary$6, {
+const danger$3 = mergeDeepRight(primary$7, {
   typography: {
     color: dangerColor
   },
@@ -774,24 +774,78 @@ const danger$2 = mergeDeepRight(primary$6, {
   }
 });
 
+const {
+  clickbounds: {
+    default__base: clicboundHeight,
+    compact__standard: compactClickboundHeight
+  },
+  shape: shape$3
+} = edsTokens.tokens;
+const contained_icon = {
+  height: shape$3.icon_button.minHeight,
+  width: shape$3.icon_button.minWidth,
+  border: {
+    width: '0px',
+    radius: '50%'
+  },
+  spacings: {
+    left: '0',
+    right: '0'
+  },
+  clickbound: {
+    width: clicboundHeight,
+    offset: {
+      top: '0',
+      left: "".concat((parseInt(clicboundHeight) - parseInt('40px')) / 2, "px")
+    }
+  },
+  states: {
+    hover: {
+      border: {
+        width: '0px',
+        radius: '50%'
+      }
+    }
+  },
+  modes: {
+    compact: {
+      height: shape$3._modes.compact.icon_button.minHeight,
+      width: shape$3._modes.compact.icon_button.minWidth,
+      clickbound: {
+        width: compactClickboundHeight,
+        offset: {
+          top: '0',
+          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape$3._modes.compact.icon_button.minWidth)) / 2, "px")
+        }
+      }
+    }
+  }
+};
+const primary$6 = mergeDeepRight(primary$a, contained_icon);
+const secondary$1 = mergeDeepRight(secondary$5, contained_icon);
+const danger$2 = mergeDeepRight(danger$6, contained_icon);
+
 const token$5 = {
   primary: {
-    contained: primary$9,
-    outlined: primary$8,
-    ghost: primary$7,
-    ghost_icon: primary$6
+    contained: primary$a,
+    outlined: primary$9,
+    ghost: primary$8,
+    ghost_icon: primary$7,
+    contained_icon: primary$6
   },
   secondary: {
-    contained: secondary$4,
-    outlined: secondary$3,
-    ghost: secondary$2,
-    ghost_icon: secondary$1
+    contained: secondary$5,
+    outlined: secondary$4,
+    ghost: secondary$3,
+    ghost_icon: secondary$2,
+    contained_icon: secondary$1
   },
   danger: {
-    contained: danger$5,
-    outlined: danger$4,
-    ghost: danger$3,
-    ghost_icon: danger$2
+    contained: danger$6,
+    outlined: danger$5,
+    ghost: danger$4,
+    ghost_icon: danger$3,
+    contained_icon: danger$2
   }
 };
 
@@ -860,6 +914,9 @@ const getVariant = (tokenSet, variant) => {
     case 'outlined':
       return tokenSet.outlined;
 
+    case 'contained_icon':
+      return tokenSet.contained_icon;
+
     case 'contained':
     default:
       return tokenSet.contained;
@@ -10258,7 +10315,7 @@ function AutocompleteInner(props, ref) {
       const selectedsHash = JSON.stringify(selectedItem);
 
       if (availableItems.length === 1 && selectedsHash === availableHash) {
-        setAvailableItems(options);
+        setAvailableItems(inputOptions);
       }
     },
     onStateChange: _ref9 => {

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

@@ -251,7 +251,7 @@ function AutocompleteInner(props, ref) {
       const selectedsHash = JSON.stringify(selectedItem);
 
       if (availableItems.length === 1 && selectedsHash === availableHash) {
-        setAvailableItems(options);
+        setAvailableItems(inputOptions);
       }
     },
     onStateChange: _ref9 => {

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

@@ -17,6 +17,9 @@ const getVariant = (tokenSet, variant) => {
     case 'outlined':
       return tokenSet.outlined;
 
+    case 'contained_icon':
+      return tokenSet.contained_icon;
+
     case 'contained':
     default:
       return tokenSet.contained;

package/dist/esm/components/Button/tokens/contained_icon.js

@@ -0,0 +1,56 @@
+import { tokens } from '@equinor/eds-tokens';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
+import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './contained.js';
+
+const {
+  clickbounds: {
+    default__base: clicboundHeight,
+    compact__standard: compactClickboundHeight
+  },
+  shape
+} = tokens;
+const contained_icon = {
+  height: shape.icon_button.minHeight,
+  width: shape.icon_button.minWidth,
+  border: {
+    width: '0px',
+    radius: '50%'
+  },
+  spacings: {
+    left: '0',
+    right: '0'
+  },
+  clickbound: {
+    width: clicboundHeight,
+    offset: {
+      top: '0',
+      left: "".concat((parseInt(clicboundHeight) - parseInt('40px')) / 2, "px")
+    }
+  },
+  states: {
+    hover: {
+      border: {
+        width: '0px',
+        radius: '50%'
+      }
+    }
+  },
+  modes: {
+    compact: {
+      height: shape._modes.compact.icon_button.minHeight,
+      width: shape._modes.compact.icon_button.minWidth,
+      clickbound: {
+        width: compactClickboundHeight,
+        offset: {
+          top: '0',
+          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2, "px")
+        }
+      }
+    }
+  }
+};
+const primary = mergeDeepRight(primary$1, contained_icon);
+const secondary = mergeDeepRight(secondary$1, contained_icon);
+const danger = mergeDeepRight(danger$1, contained_icon);
+
+export { danger, primary, secondary };

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

@@ -2,25 +2,29 @@ import { primary, secondary, danger } from './contained.js';
 import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './outlined.js';
 import { primary as primary$2, secondary as secondary$2, danger as danger$2 } from './ghost.js';
 import { primary as primary$3, secondary as secondary$3, danger as danger$3 } from './icon.js';
+import { primary as primary$4, secondary as secondary$4, danger as danger$4 } from './contained_icon.js';
 
 const token = {
   primary: {
     contained: primary,
     outlined: primary$1,
     ghost: primary$2,
-    ghost_icon: primary$3
+    ghost_icon: primary$3,
+    contained_icon: primary$4
   },
   secondary: {
     contained: secondary,
     outlined: secondary$1,
     ghost: secondary$2,
-    ghost_icon: secondary$3
+    ghost_icon: secondary$3,
+    contained_icon: secondary$4
   },
   danger: {
     contained: danger,
     outlined: danger$1,
     ghost: danger$2,
-    ghost_icon: danger$3
+    ghost_icon: danger$3,
+    contained_icon: danger$4
   }
 };
 

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

@@ -1,9 +1,11 @@
 import { ElementType, ButtonHTMLAttributes } from 'react';
+declare type Colors = 'primary' | 'secondary' | 'danger';
+declare type Variants = 'contained' | 'contained_icon' | 'outlined' | 'ghost' | 'ghost_icon';
 export declare type ButtonProps = {
     /**  Specifies color */
-    color?: 'primary' | 'secondary' | 'danger';
+    color?: Colors;
     /** Specifies which variant to use */
-    variant?: 'contained' | 'outlined' | 'ghost' | 'ghost_icon';
+    variant?: Variants;
     /**
      * URL link destination
      * If defined, an 'a' element is used as root instead of 'button'
@@ -22,9 +24,9 @@ export declare type ButtonProps = {
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 export declare const Button: import("react").ForwardRefExoticComponent<{
     /**  Specifies color */
-    color?: 'primary' | 'secondary' | 'danger';
+    color?: Colors;
     /** Specifies which variant to use */
-    variant?: 'contained' | 'outlined' | 'ghost' | 'ghost_icon';
+    variant?: Variants;
     /**
      * URL link destination
      * If defined, an 'a' element is used as root instead of 'button'
@@ -41,3 +43,4 @@ export declare const Button: import("react").ForwardRefExoticComponent<{
     /** FullWidth (stretched) button  */
     fullWidth?: boolean;
 } & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -6,6 +6,7 @@ export declare type ButtonToken = ComponentToken & {
 };
 export declare type ButtonTokenSet = {
     contained: ButtonToken;
+    contained_icon: ButtonToken;
     outlined: ButtonToken;
     ghost: ButtonToken;
     ghost_icon: ButtonToken;

package/dist/types/components/Button/tokens/contained_icon.d.ts

@@ -0,0 +1,4 @@
+import { ButtonToken } from '../Button.types';
+export declare const primary: ButtonToken;
+export declare const secondary: Partial<ButtonToken>;
+export declare const danger: Partial<ButtonToken>;

package/dist/types/components/Select/commonStyles.d.ts

@@ -21,7 +21,7 @@ export declare const StyledList: import("styled-components").StyledComponent<imp
 export declare const StyledListItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../List").ListItemProps & import("react").RefAttributes<HTMLLIElement>>, import("styled-components").DefaultTheme, StyledListItemType, never>;
 export declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     color?: "primary" | "secondary" | "danger";
-    variant?: "contained" | "outlined" | "ghost" | "ghost_icon";
+    variant?: "contained" | "contained_icon" | "outlined" | "ghost" | "ghost_icon";
     href?: string;
     disabled?: boolean;
     as?: import("react").ElementType<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.20.4",
+  "version": "0.20.5-dev.20220701",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -86,7 +86,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "@equinor/eds-icons": "0.11.0",
+    "@equinor/eds-icons": "0.12.0",
     "@equinor/eds-tokens": "0.7.1",
     "@equinor/eds-utils": "0.2.3",
     "@popperjs/core": "2.9.2",