@equinor/eds-core-react 0.23.0 → 0.24.0-dev.20221006

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

@@ -1,21 +1,23 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledCustomContent = styled.div.withConfig({
+var _excluded = ["children"];
+var StyledCustomContent = styled.div.withConfig({
   displayName: "CustomContent__StyledCustomContent",
   componentId: "sc-d0e83a-0"
 })(["grid-area:center;"]);
-const CustomContent = /*#__PURE__*/forwardRef(function CustomContent(_ref, ref) {
-  let {
-    children,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/jsx(StyledCustomContent, {
-    ref: ref,
-    ...props,
+var CustomContent = /*#__PURE__*/forwardRef(function CustomContent(_ref, ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(StyledCustomContent, _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
     children: children
-  });
+  }));
 }); // CustomContent.displayName = 'eds-topbar-customcontent'
 
 export { CustomContent };

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

@@ -1,21 +1,23 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledHeader = styled.div.withConfig({
+var _excluded = ["children"];
+var StyledHeader = styled.div.withConfig({
   displayName: "Header__StyledHeader",
   componentId: "sc-1fpllve-0"
 })(["grid-area:left;display:grid;grid-template-columns:auto auto;grid-gap:24px;align-items:center;"]);
-const Header = /*#__PURE__*/forwardRef(function Header(_ref, ref) {
-  let {
-    children,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/jsx(StyledHeader, {
-    ref: ref,
-    ...props,
+var Header = /*#__PURE__*/forwardRef(function Header(_ref, ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(StyledHeader, _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
     children: children
-  });
+  }));
 }); // Header.displayName = 'eds-topbar-header'
 
 export { Header };

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

@@ -1,3 +1,5 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { bordersTemplate, spacingsTemplate, typographyTemplate, useToken } from '@equinor/eds-utils';
@@ -6,41 +8,43 @@ import { jsx } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-const StyledTopBar = styled(Paper).withConfig({
+var _excluded = ["children", "elevation", "sticky"];
+var StyledTopBar = styled(Paper).withConfig({
   displayName: "TopBar__StyledTopBar",
   componentId: "sc-1yj236q-0"
-})(_ref => {
-  let {
-    theme,
-    sticky
-  } = _ref;
+})(function (_ref) {
+  var theme = _ref.theme,
+      sticky = _ref.sticky;
   return css(["height:", ";background:", ";box-sizing:border-box;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", " ", ""], theme.height, theme.background, theme.spacings.left, bordersTemplate(theme.border), spacingsTemplate(theme.spacings), typographyTemplate(theme.typography), sticky && css(["position:sticky;top:0;z-index:1100;"]));
 });
-const TopBar = /*#__PURE__*/forwardRef(function TopBar(_ref2, ref) {
-  let {
-    children,
-    elevation = 'none',
-    sticky = true,
-    ...props
-  } = _ref2;
-  const {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+var TopBar = /*#__PURE__*/forwardRef(function TopBar(_ref2, ref) {
+  var children = _ref2.children,
+      _ref2$elevation = _ref2.elevation,
+      elevation = _ref2$elevation === void 0 ? 'none' : _ref2$elevation,
+      _ref2$sticky = _ref2.sticky,
+      sticky = _ref2$sticky === void 0 ? true : _ref2$sticky,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, topbar);
-  const rest = { ...props,
-    ref
-  };
+
+  var rest = _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref
+  });
+
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsx(StyledTopBar, {
+    children: /*#__PURE__*/jsx(StyledTopBar, _objectSpread(_objectSpread({
       forwardedAs: 'header',
       elevation: elevation,
-      sticky: sticky,
-      ...rest,
+      sticky: sticky
+    }, rest), {}, {
       children: children
-    })
+    }))
   });
 }); // TopBar.displayName = 'eds-topbar'
 

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

@@ -1,15 +1,9 @@
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors,
-  spacings: {
-    comfortable
-  },
-  typography: {
-    navigation
-  }
-} = tokens;
-const topbar = {
+var colors = tokens.colors,
+    comfortable = tokens.spacings.comfortable,
+    navigation = tokens.typography.navigation;
+var topbar = {
   height: '64px',
   background: colors.ui.background__default.rgba,
   typography: navigation.menu_title,

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

@@ -3,7 +3,7 @@ import { Actions } from './Actions.js';
 import { Header } from './Header.js';
 import { CustomContent } from './CustomContent.js';
 
-const TopBar = TopBar$1;
+var TopBar = TopBar$1;
 TopBar.Actions = Actions;
 TopBar.Header = Header;
 TopBar.CustomContent = CustomContent;

package/dist/esm/components/Typography/Typography.js

@@ -1,10 +1,14 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { link, quickVariants, typography, colors } from './Typography.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-const getElementType = (variant, link) => {
+var _excluded = ["variant", "children", "bold", "italic", "link", "group", "token", "as"];
+
+var getElementType = function getElementType(variant, link) {
   if (link) {
     return 'a';
   }
@@ -29,7 +33,7 @@ const getElementType = (variant, link) => {
   }
 };
 
-const findTypography = (variantName, group) => {
+var findTypography = function findTypography(variantName, group) {
   // For quick use when using paragraphs and headings we can skip group
   if (!group && quickVariants[variantName]) {
     return quickVariants[variantName];
@@ -38,77 +42,67 @@ const findTypography = (variantName, group) => {
   return typography[group][variantName];
 };
 
-const findColor = function () {
-  let inputColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+var findColor = function findColor() {
+  var inputColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   return typeof colors[inputColor] === 'undefined' ? inputColor : colors[inputColor];
 };
 
-const toVariantName = function (variant) {
-  let bold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  let italic = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  let link = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  return `${variant}${bold ? '_bold' : ''}${italic ? '_italic' : ''}${link ? '_link' : ''}`;
+var toVariantName = function toVariantName(variant) {
+  var bold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var italic = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var link = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  return "".concat(variant).concat(bold ? '_bold' : '').concat(italic ? '_italic' : '').concat(link ? '_link' : '');
 };
 
-const StyledTypography = styled.p.withConfig({
+var StyledTypography = styled.p.withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "sc-179guof-0"
-})(["", " ", " ", " ", ""], _ref => {
-  let {
-    typography,
-    $link
-  } = _ref;
+})(["", " ", " ", " ", ""], function (_ref) {
+  var typography = _ref.typography,
+      $link = _ref.$link;
   return typographyTemplate(typography, $link);
-}, _ref2 => {
-  let {
-    color
-  } = _ref2;
+}, function (_ref2) {
+  var color = _ref2.color;
   return css({
     color: findColor(color)
   });
-}, _ref3 => {
-  let {
-    lines
-  } = _ref3;
+}, function (_ref3) {
+  var lines = _ref3.lines;
   return (//https://caniuse.com/#feat=css-line-clamp
     lines > 0 && css(["&{display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}"], lines)
   );
-}, _ref4 => {
-  let {
-    $link
-  } = _ref4;
+}, function (_ref4) {
+  var $link = _ref4.$link;
   return $link && css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], outlineTemplate(link.states.focus.outline), outlineTemplate(link.states.focus.outline));
 });
-const Typography = /*#__PURE__*/forwardRef(function Typography(_ref5, ref) {
-  let {
-    variant = 'body_short',
-    children,
-    bold,
-    italic,
-    link,
-    group,
-    token,
-    as: providedAs,
-    ...other
-  } = _ref5;
-  const as = providedAs ? providedAs : getElementType(variant, link);
-  const variantName = toVariantName(variant, bold, italic, link);
-  const typography = findTypography(variantName, group);
+var Typography = /*#__PURE__*/forwardRef(function Typography(_ref5, ref) {
+  var _ref5$variant = _ref5.variant,
+      variant = _ref5$variant === void 0 ? 'body_short' : _ref5$variant,
+      children = _ref5.children,
+      bold = _ref5.bold,
+      italic = _ref5.italic,
+      link = _ref5.link,
+      group = _ref5.group,
+      token = _ref5.token,
+      providedAs = _ref5.as,
+      other = _objectWithoutProperties(_ref5, _excluded);
+
+  var as = providedAs ? providedAs : getElementType(variant, link);
+  var variantName = toVariantName(variant, bold, italic, link);
+  var typography = findTypography(variantName, group);
 
   if (typeof typography === 'undefined') {
-    throw new Error(`Typography variant not found for variant "${variantName}" ("${variant}") & group "${group || ''}"`);
+    throw new Error("Typography variant not found for variant \"".concat(variantName, "\" (\"").concat(variant, "\") & group \"").concat(group || '', "\""));
   }
 
-  return /*#__PURE__*/jsx(StyledTypography, {
+  return /*#__PURE__*/jsx(StyledTypography, _objectSpread(_objectSpread({
     as: as,
-    typography: { ...typography,
-      ...token
-    },
+    typography: _objectSpread(_objectSpread({}, typography), token),
     $link: link,
-    ref: ref,
-    ...other,
+    ref: ref
+  }, other), {}, {
     children: children
-  });
+  }));
 }); // Typography.displayName = 'EdsTypography'
 
 export { Typography };

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

@@ -1,55 +1,31 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  typography,
-  colors: colorsToken,
-  interactions: {
-    focused: {
-      width: focusOutlineWidth
-    }
-  }
-} = tokens;
-const {
-  heading,
-  paragraph
-} = typography;
-const {
-  interactive: {
-    primary__resting: {
-      rgba: primary
-    },
-    secondary__resting: {
-      rgba: secondary
-    },
-    danger__resting: {
-      rgba: danger
-    },
-    warning__resting: {
-      rgba: warning
-    },
-    success__resting: {
-      rgba: success
-    },
-    disabled__text: {
-      rgba: disabled
-    },
-    focus: {
-      rgba: focus
-    }
-  }
-} = colorsToken;
-const colors = {
-  primary,
-  secondary,
-  danger,
-  warning,
-  success,
-  disabled
-};
-const quickVariants = { ...heading,
-  ...paragraph
+var typography = tokens.typography,
+    colorsToken = tokens.colors,
+    focusOutlineWidth = tokens.interactions.focused.width;
+var heading = typography.heading,
+    paragraph = typography.paragraph;
+var _colorsToken$interact = colorsToken.interactive,
+    primary = _colorsToken$interact.primary__resting.rgba,
+    secondary = _colorsToken$interact.secondary__resting.rgba,
+    danger = _colorsToken$interact.danger__resting.rgba,
+    warning = _colorsToken$interact.warning__resting.rgba,
+    success = _colorsToken$interact.success__resting.rgba,
+    disabled = _colorsToken$interact.disabled__text.rgba,
+    focus = _colorsToken$interact.focus.rgba;
+var colors = {
+  primary: primary,
+  secondary: secondary,
+  danger: danger,
+  warning: warning,
+  success: success,
+  disabled: disabled
 };
-const link = {
+
+var quickVariants = _objectSpread(_objectSpread({}, heading), paragraph);
+
+var link = {
   states: {
     focus: {
       outline: {

package/dist/esm/node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/internal/_isPlaceholder.js

@@ -1,5 +1,7 @@
+import _typeof from '@babel/runtime/helpers/typeof';
+
 function _isPlaceholder(a) {
-  return a != null && typeof a === 'object' && a['@@functional/placeholder'] === true;
+  return a != null && _typeof(a) === 'object' && a['@@functional/placeholder'] === true;
 }
 
 export { _isPlaceholder as default };

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

@@ -40,6 +40,8 @@ export declare type AutocompleteProps<T> = {
     autoWidth?: boolean;
     /** Descriptive text for whats selected or about to be selected */
     placeholder?: string;
+    /** Toggle if input is cleared when an options is selected when `multiple` is `true`*/
+    clearSearchOnChange?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 declare function AutocompleteInner<T>(props: AutocompleteProps<T>, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element;
 export declare const Autocomplete: <T>(props: {
@@ -80,6 +82,8 @@ export declare const Autocomplete: <T>(props: {
     autoWidth?: boolean;
     /** Descriptive text for whats selected or about to be selected */
     placeholder?: string;
+    /** Toggle if input is cleared when an options is selected when `multiple` is `true`*/
+    clearSearchOnChange?: boolean;
 } & HTMLAttributes<HTMLDivElement> & {
     ref?: React.ForwardedRef<HTMLDivElement>;
     displayName?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.23.0",
+  "version": "0.24.0-dev.20221006",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -31,12 +31,6 @@
     "react"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.19.1",
-    "@babel/preset-env": "^7.19.1",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
     "@mdx-js/react": "1.6.22",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.2",
@@ -85,10 +79,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.19.0",
-    "@equinor/eds-icons": "0.14.0",
-    "@equinor/eds-tokens": "0.7.1",
+    "@equinor/eds-icons": "0.15.0-dev.20221005",
+    "@equinor/eds-tokens": "0.8.0-dev.20221005",
     "@equinor/eds-utils": "0.4.0",
-    "@floating-ui/react-dom-interactions": "^0.6.6",
+    "@floating-ui/react-dom-interactions": "^0.10.1",
     "downshift": "^6.1.12"
   },
   "engines": {