@equinor/eds-core-react 0.18.0-envis.1 → 0.19.0-dev.20220404

package/dist/esm/components/Scrim/Scrim.js

@@ -1,9 +1,8 @@
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import styled from 'styled-components';
 import { scrim } from './Scrim.tokens.js';
+import { useCombinedRefs, useHideBodyScroll, useGlobalKeyPress } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { useHideBodyScroll } from '../../hooks/useHideBodyScroll.js';
-import { useGlobalKeyPress } from '../../hooks/useGlobalKeyPress.js';
 
 const {
   height,
@@ -13,22 +12,24 @@ const {
 const StyledScrim = styled.div.withConfig({
   displayName: "Scrim__StyledScrim",
   componentId: "sc-1fr7uvy-0"
-})(["width:", ";height:", ";background:", ";position:fixed;z-index:500;top:0;left:0;align-items:center;justify-content:center;display:flex;"], width, height, background);
+})(["width:", ";height:", ";background:", ";position:fixed;z-index:1300;top:0;left:0;align-items:center;justify-content:center;display:flex;"], width, height, background);
 const ScrimContent = styled.div.withConfig({
   displayName: "Scrim__ScrimContent",
   componentId: "sc-1fr7uvy-1"
 })(["width:auto;height:auto;"]);
-const Scrim = /*#__PURE__*/forwardRef(function Scrim({
-  children,
-  onClose,
-  open,
-  isDismissable = false,
-  ...rest
-}, ref) {
+const Scrim = /*#__PURE__*/forwardRef(function Scrim(_ref, ref) {
+  let {
+    children,
+    onClose,
+    open,
+    isDismissable = false,
+    ...rest
+  } = _ref;
+  const scrimRef = useRef(null);
+  const combinedScrimRef = useCombinedRefs(scrimRef, ref);
   const props = { ...rest,
     open,
-    isDismissable,
-    ref
+    isDismissable
   };
   useHideBodyScroll(open);
   useGlobalKeyPress('Escape', () => {
@@ -38,27 +39,22 @@ const Scrim = /*#__PURE__*/forwardRef(function Scrim({
   });
 
   const handleMouseClose = event => {
-    if (event) {
+    if (event && event.target === scrimRef.current) {
       if (event.type === 'click' && isDismissable && open) {
         onClose && onClose();
       }
     }
   };
 
-  const handleContentClick = event => {
-    // Avoid event bubbling inside dialog/content inside scrim
-    event.stopPropagation();
-  };
-
   if (!open) {
     return null;
   }
 
   return /*#__PURE__*/jsx(StyledScrim, {
     onClick: handleMouseClose,
+    ref: combinedScrimRef,
     ...props,
     children: /*#__PURE__*/jsx(ScrimContent, {
-      onClick: handleContentClick,
       children: children
     })
   });

package/dist/esm/components/Search/Search.js

@@ -3,24 +3,21 @@ import styled, { css, ThemeProvider } from 'styled-components';
 import { search as search$1, close } from '@equinor/eds-icons';
 import { search } from './Search.tokens.js';
 import { Icon } from '../Icon/index.js';
+import { bordersTemplate, spacingsTemplate, typographyTemplate, useToken, useCombinedRefs, setReactInputValue } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
-import { setReactInputValue } from '../../utils/setReactInputValue.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
 import { Input } from '../Input/Input.js';
 import { Button } from '../Button/Button.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 const Container = styled.span.withConfig({
   displayName: "Search__Container",
   componentId: "sc-v8l23u-0"
-})(({
-  disabled,
-  isFocused,
-  theme
-}) => {
+})(_ref => {
+  let {
+    disabled,
+    isFocused,
+    theme
+  } = _ref;
   const {
     height,
     spacings,
@@ -38,19 +35,21 @@ const Container = styled.span.withConfig({
 const SearchInput = styled(Input).withConfig({
   displayName: "Search__SearchInput",
   componentId: "sc-v8l23u-1"
-})(({
-  theme,
-  disabled
-}) => {
+})(_ref2 => {
+  let {
+    theme,
+    disabled
+  } = _ref2;
   return css(["height:calc(", " - 2px);align-self:start;box-shadow:unset;&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " &:focus{outline:none;}", ""], theme.height, typographyTemplate(theme.typography), disabled && css(["cursor:not-allowed;"]));
 });
 const InsideButton = styled(Button).withConfig({
   displayName: "Search__InsideButton",
   componentId: "sc-v8l23u-2"
-})(({
-  theme,
-  isActive
-}) => {
+})(_ref3 => {
+  let {
+    theme,
+    isActive
+  } = _ref3;
   const {
     entities: {
       button
@@ -58,16 +57,17 @@ const InsideButton = styled(Button).withConfig({
   } = theme;
   return css(["visibility:hidden;position:absolute;right:", ";height:", ";width:", ";", ""], button.spacings.right, button.height, button.width, isActive && css(["visibility:visible;"]));
 });
-const Search = /*#__PURE__*/forwardRef(function Search({
-  onChange,
-  defaultValue = '',
-  value,
-  className = '',
-  disabled = false,
-  onBlur,
-  onFocus,
-  ...rest
-}, ref) {
+const Search = /*#__PURE__*/forwardRef(function Search(_ref4, ref) {
+  let {
+    onChange,
+    defaultValue = '',
+    value,
+    className = '',
+    disabled = false,
+    onBlur,
+    onFocus,
+    ...rest
+  } = _ref4;
   const {
     density
   } = useEds();

package/dist/esm/components/Select/MultiSelect/MultiSelect.js

@@ -6,30 +6,33 @@ import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
 import styled, { ThemeProvider } from 'styled-components';
 import { multiSelect } from '../Select.tokens.js';
 import { StyledListItem, Container, StyledInputWrapper, PaddedInput, StyledButton, StyledList } from '../commonStyles.js';
+import { spacingsTemplate, useToken } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { spacingsTemplate } from '../../../utils/templates/index.js';
 import { useEds } from '../../EdsProvider/eds.context.js';
-import { useToken } from '../../../hooks/useToken.js';
 import { Label } from '../../Label/Label.js';
 
 const PaddedStyledListItem = styled(StyledListItem).withConfig({
   displayName: "MultiSelect__PaddedStyledListItem",
   componentId: "sc-69ntfg-0"
-})(["display:flex;align-items:center;", ""], ({
-  theme
-}) => spacingsTemplate(theme.spacings));
-const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect({
-  items = [],
-  initialSelectedItems = [],
-  label,
-  meta,
-  className,
-  disabled = false,
-  readOnly = false,
-  selectedOptions,
-  handleSelectedItemsChange,
-  ...other
-}, ref) {
+})(["display:flex;align-items:center;", ""], _ref => {
+  let {
+    theme
+  } = _ref;
+  return spacingsTemplate(theme.spacings);
+});
+const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect(_ref2, ref) {
+  let {
+    items = [],
+    initialSelectedItems = [],
+    label,
+    meta,
+    className,
+    disabled = false,
+    readOnly = false,
+    selectedOptions,
+    handleSelectedItemsChange,
+    ...other
+  } = _ref2;
   const isControlled = selectedOptions ? true : false;
   const [inputValue, setInputValue] = useState('');
   const {
@@ -104,11 +107,13 @@ const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect({
           return changes;
       }
     },
-    onStateChange: ({
-      inputValue,
-      type,
-      selectedItem
-    }) => {
+    onStateChange: _ref3 => {
+      let {
+        inputValue,
+        type,
+        selectedItem
+      } = _ref3;
+
       switch (type) {
         case useCombobox.stateChangeTypes.InputChange:
           setInputValue(inputValue);

package/dist/esm/components/Select/NativeSelect/NativeSelect.js

@@ -1,11 +1,9 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { nativeselect } from './NativeSelect.tokens.js';
+import { typographyTemplate, spacingsTemplate, outlineTemplate, useToken } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { typographyTemplate, spacingsTemplate } from '../../../utils/templates/index.js';
-import { outlineTemplate } from '../../../utils/templates/focus.js';
 import { useEds } from '../../EdsProvider/eds.context.js';
-import { useToken } from '../../../hooks/useToken.js';
 import { Label } from '../../Label/Label.js';
 
 const Container = styled.div.withConfig({
@@ -15,20 +13,24 @@ const Container = styled.div.withConfig({
 const StyledSelect = styled.select.withConfig({
   displayName: "NativeSelect__StyledSelect",
   componentId: "sc-1c1ogya-1"
-})(["border:none;border-radius:0;box-shadow:", ";", " ", " padding-right:calc(", " *2 + ", ");display:block;margin:0;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );background-repeat:no-repeat,repeat;background-position:right ", " top 50%;width:100%;&:active,&:focus{box-shadow:none;", "}&:disabled{color:", ";background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );cursor:not-allowed;box-shadow:none;outline:none;.arrow-icon{fill:red;}&:focus,&:active{outline:none;}}"], nativeselect.boxShadow, typographyTemplate(nativeselect.typography), ({
-  theme
-}) => css(["height:", ";", ""], theme.minHeight, spacingsTemplate(theme.entities.input.spacings)), nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
-const NativeSelect = /*#__PURE__*/forwardRef(function NativeSelect({
-  label,
-  children,
-  className,
-  selectRef,
-  id,
-  meta,
-  disabled = false,
-  multiple = false,
-  ...other
-}, ref) {
+})(["border:none;border-radius:0;box-shadow:", ";", " ", " padding-right:calc(", " *2 + ", ");display:block;margin:0;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );background-repeat:no-repeat,repeat;background-position:right ", " top 50%;width:100%;&:active,&:focus{box-shadow:none;", "}&:disabled{color:", ";background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );cursor:not-allowed;box-shadow:none;outline:none;.arrow-icon{fill:red;}&:focus,&:active{outline:none;}}"], nativeselect.boxShadow, typographyTemplate(nativeselect.typography), _ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["height:", ";", ""], theme.minHeight, spacingsTemplate(theme.entities.input.spacings));
+}, nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
+const NativeSelect = /*#__PURE__*/forwardRef(function NativeSelect(_ref2, ref) {
+  let {
+    label,
+    children,
+    className,
+    selectRef,
+    id,
+    meta,
+    disabled = false,
+    multiple = false,
+    ...other
+  } = _ref2;
   const {
     density
   } = useEds();

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

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight_1 from '../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
 
 const {
   typography,
@@ -81,7 +81,7 @@ const select = {
     }
   }
 };
-const multiSelect = mergeDeepRight_1(select, {
+const multiSelect = mergeDeepRight(select, {
   spacings: {
     top: '0',
     bottom: '0',

package/dist/esm/components/Select/SingleSelect/SingleSelect.js

@@ -3,32 +3,35 @@ import { useCombobox } from 'downshift';
 import styled, { ThemeProvider } from 'styled-components';
 import { Icon } from '../../Icon/index.js';
 import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
+import { spacingsTemplate, useToken } from '@equinor/eds-utils';
 import { select } from '../Select.tokens.js';
 import { StyledListItem, Container, StyledInputWrapper, PaddedInput, StyledButton, StyledList } from '../commonStyles.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { spacingsTemplate } from '../../../utils/templates/index.js';
 import { useEds } from '../../EdsProvider/eds.context.js';
-import { useToken } from '../../../hooks/useToken.js';
 import { Label } from '../../Label/Label.js';
 
 const PaddedStyledListItem = styled(StyledListItem).withConfig({
   displayName: "SingleSelect__PaddedStyledListItem",
   componentId: "sc-rh1yw2-0"
-})(["", ""], ({
-  theme
-}) => spacingsTemplate(theme.spacings));
-const SingleSelect = /*#__PURE__*/forwardRef(function SingleSelect({
-  items = [],
-  label,
-  meta,
-  className,
-  disabled = false,
-  readOnly = false,
-  initialSelectedItem,
-  selectedOption,
-  handleSelectedItemChange,
-  ...other
-}, ref) {
+})(["", ""], _ref => {
+  let {
+    theme
+  } = _ref;
+  return spacingsTemplate(theme.spacings);
+});
+const SingleSelect = /*#__PURE__*/forwardRef(function SingleSelect(_ref2, ref) {
+  let {
+    items = [],
+    label,
+    meta,
+    className,
+    disabled = false,
+    readOnly = false,
+    initialSelectedItem,
+    selectedOption,
+    handleSelectedItemChange,
+    ...other
+  } = _ref2;
   const [inputItems, setInputItems] = useState(items);
   const isControlled = selectedOption !== undefined ? true : false;
   const {
@@ -43,14 +46,17 @@ const SingleSelect = /*#__PURE__*/forwardRef(function SingleSelect({
   let comboboxProps = {
     items: inputItems,
     onSelectedItemChange: handleSelectedItemChange,
-    onInputValueChange: ({
-      inputValue
-    }) => {
+    onInputValueChange: _ref3 => {
+      let {
+        inputValue
+      } = _ref3;
       setInputItems(items.filter(item => item.toLowerCase().includes(inputValue.toLowerCase())));
     },
-    onIsOpenChange: ({
-      selectedItem
-    }) => {
+    onIsOpenChange: _ref4 => {
+      let {
+        selectedItem
+      } = _ref4;
+
       if (inputItems.length === 1 && selectedItem === inputItems[0]) {
         setInputItems(items);
       }

package/dist/esm/components/Select/commonStyles.js

@@ -1,9 +1,8 @@
 import { List } from '../List/index.js';
 import styled, { css } from 'styled-components';
 import { select } from './Select.tokens.js';
+import { bordersTemplate, typographyTemplate } from '@equinor/eds-utils';
 import { Input } from '../Input/Input.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { typographyTemplate } from '../../utils/templates/index.js';
 import { Button } from '../Button/Button.js';
 
 const {
@@ -26,24 +25,26 @@ const StyledList = styled(List).withConfig({
 const StyledListItem = styled(List.Item).withConfig({
   displayName: "commonStyles__StyledListItem",
   componentId: "sc-v98ajk-3"
-})(({
-  theme,
-  highlighted,
-  active
-}) => {
+})(_ref => {
+  let {
+    theme,
+    highlighted,
+    active
+  } = _ref;
   const backgroundColor = highlighted === 'true' ? theme.states.hover.background : active === 'true' ? theme.states.active.background : theme.background;
   return css(["margin:0;list-style:none;background-color:", ";", ";cursor:", ";"], backgroundColor, typographyTemplate(theme.typography), highlighted === 'true' ? 'pointer' : 'default');
 });
 const StyledButton = styled(Button).withConfig({
   displayName: "commonStyles__StyledButton",
   componentId: "sc-v98ajk-4"
-})(({
-  theme: {
-    entities: {
-      button
+})(_ref2 => {
+  let {
+    theme: {
+      entities: {
+        button
+      }
     }
-  }
-}) => {
+  } = _ref2;
   return css(["position:absolute;right:", ";height:", ";width:", ";top:", ";color:", ";"], button.spacings.right, button.height, button.height, button.spacings.top, button.typography.color);
 });
 const StyledInputWrapper = styled.div.withConfig({

package/dist/esm/components/SideSheet/SideSheet.js

@@ -1,12 +1,11 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { clear } from '@equinor/eds-icons';
+import { bordersTemplate, spacingsTemplate } from '@equinor/eds-utils';
 import { Icon } from '../Icon/index.js';
 import { comfortable, variants } from './SideSheet.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Button } from '../Button/Button.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { spacingsTemplate } from '../../utils/templates/index.js';
 import { Typography } from '../Typography/Typography.js';
 
 const {
@@ -17,21 +16,25 @@ const {
 const StyledSideSheet = styled.div.withConfig({
   displayName: "SideSheet__StyledSideSheet",
   componentId: "sc-wkzlnn-0"
-})(["height:100%;position:absolute;z-index:200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";"], background, ({
-  width
-}) => width, bordersTemplate(border), spacingsTemplate(spacings));
+})(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";"], background, _ref => {
+  let {
+    width
+  } = _ref;
+  return width;
+}, bordersTemplate(border), spacingsTemplate(spacings));
 const Header = styled.div.withConfig({
   displayName: "SideSheet__Header",
   componentId: "sc-wkzlnn-1"
 })(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;"]);
-const SideSheet = /*#__PURE__*/forwardRef(function SideSheet({
-  variant = 'medium',
-  title = '',
-  children,
-  open = true,
-  onClose,
-  ...rest
-}, ref) {
+const SideSheet = /*#__PURE__*/forwardRef(function SideSheet(_ref2, ref) {
+  let {
+    variant = 'medium',
+    title = '',
+    children,
+    open = true,
+    onClose,
+    ...rest
+  } = _ref2;
   const props = { ...rest,
     ref,
     width: variants[variant]

package/dist/esm/components/Slider/MinMax.js

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
+import { typographyTemplate } from '@equinor/eds-utils';
 import { slider } from './Slider.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { typographyTemplate } from '../../utils/templates/index.js';
 
 const {
   entities: {
@@ -14,9 +14,10 @@ const StyledMinMax = styled.span.withConfig({
   displayName: "MinMax__StyledMinMax",
   componentId: "sc-lxmlid-0"
 })(["grid-row:2;", " position:absolute;left:2px;top:", ";pointer-events:none;text-align:left;transform:translate(calc(-1 * calc((100% - 8px) / 2)));&:last-child{left:auto;right:2px;transform:translate(calc((100% - 8px) / 2));}"], typographyTemplate(output.typography), track.spacings.top);
-const MinMax = /*#__PURE__*/forwardRef(function MinMax({
-  children
-}, ref) {
+const MinMax = /*#__PURE__*/forwardRef(function MinMax(_ref, ref) {
+  let {
+    children
+  } = _ref;
   return /*#__PURE__*/jsx(StyledMinMax, {
     ref: ref,
     children: children

package/dist/esm/components/Slider/Output.js

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
+import { typographyTemplate } from '@equinor/eds-utils';
 import { slider } from './Slider.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { typographyTemplate } from '../../utils/templates/index.js';
 
 const {
   entities: {
@@ -13,14 +13,18 @@ const {
 const StyledOutput = styled.output.withConfig({
   displayName: "Output__StyledOutput",
   componentId: "sc-1dy945x-0"
-})(["--val:", ";--realWidth:calc(100% - 12px);width:fit-content;position:relative;z-index:1;", " background:", ";padding:0 5px;top:", ";pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;"], ({
-  value
-}) => value, typographyTemplate(output.typography), slider.background, track.spacings.top);
-const Output = /*#__PURE__*/forwardRef(function Output({
-  children,
-  value,
-  htmlFor
-}, ref) {
+})(["--val:", ";--realWidth:calc(100% - 12px);width:fit-content;position:relative;z-index:1;", " background:", ";padding:0 5px;top:", ";pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;"], _ref => {
+  let {
+    value
+  } = _ref;
+  return value;
+}, typographyTemplate(output.typography), slider.background, track.spacings.top);
+const Output = /*#__PURE__*/forwardRef(function Output(_ref2, ref) {
+  let {
+    children,
+    value,
+    htmlFor
+  } = _ref2;
   return /*#__PURE__*/jsx(StyledOutput, {
     ref: ref,
     value: value,