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

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

@@ -1,3 +1,6 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useState, useEffect } from 'react';
 import { useCombobox } from 'downshift';
 import styled, { ThemeProvider } from 'styled-components';
@@ -10,84 +13,87 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEds } from '../../EdsProvider/eds.context.js';
 import { Label } from '../../Label/Label.js';
 
-const PaddedStyledListItem = styled(StyledListItem).withConfig({
+var _excluded = ["items", "label", "meta", "className", "disabled", "readOnly", "initialSelectedItem", "selectedOption", "handleSelectedItemChange"];
+var PaddedStyledListItem = styled(StyledListItem).withConfig({
   displayName: "SingleSelect__PaddedStyledListItem",
   componentId: "sc-rh1yw2-0"
-})(["", ""], _ref => {
-  let {
-    theme
-  } = _ref;
+})(["", ""], function (_ref) {
+  var theme = _ref.theme;
   return spacingsTemplate(theme.spacings);
 });
 /** @deprecated Use `<Autocomplete />` instead */
 
-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 {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+var SingleSelect = /*#__PURE__*/forwardRef(function SingleSelect(_ref2, ref) {
+  var _ref2$items = _ref2.items,
+      items = _ref2$items === void 0 ? [] : _ref2$items,
+      label = _ref2.label,
+      meta = _ref2.meta,
+      className = _ref2.className,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      _ref2$readOnly = _ref2.readOnly,
+      readOnly = _ref2$readOnly === void 0 ? false : _ref2$readOnly,
+      initialSelectedItem = _ref2.initialSelectedItem,
+      selectedOption = _ref2.selectedOption,
+      handleSelectedItemChange = _ref2.handleSelectedItemChange,
+      other = _objectWithoutProperties(_ref2, _excluded);
+
+  var _useState = useState(items),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputItems = _useState2[0],
+      setInputItems = _useState2[1];
+
+  var isControlled = selectedOption !== undefined ? true : false;
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, select);
-  useEffect(() => {
+  useEffect(function () {
     setInputItems(items);
   }, [items]);
-  let comboboxProps = {
+  var comboboxProps = {
     items: inputItems,
     onSelectedItemChange: handleSelectedItemChange,
-    onInputValueChange: _ref3 => {
-      let {
-        inputValue
-      } = _ref3;
-      setInputItems(items.filter(item => item.toLowerCase().includes(inputValue.toLowerCase())));
+    onInputValueChange: function onInputValueChange(_ref3) {
+      var inputValue = _ref3.inputValue;
+      setInputItems(items.filter(function (item) {
+        return item.toLowerCase().includes(inputValue.toLowerCase());
+      }));
     },
-    onIsOpenChange: _ref4 => {
-      let {
-        selectedItem
-      } = _ref4;
+    onIsOpenChange: function onIsOpenChange(_ref4) {
+      var selectedItem = _ref4.selectedItem;
 
       if (inputItems.length === 1 && selectedItem === inputItems[0]) {
         setInputItems(items);
       }
     },
-    initialSelectedItem
+    initialSelectedItem: initialSelectedItem
   };
 
   if (isControlled) {
-    comboboxProps = { ...comboboxProps,
+    comboboxProps = _objectSpread(_objectSpread({}, comboboxProps), {}, {
       selectedItem: selectedOption
-    };
+    });
   }
 
-  const {
-    isOpen,
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    getInputProps,
-    getComboboxProps,
-    highlightedIndex,
-    getItemProps,
-    openMenu,
-    selectedItem,
-    reset,
-    inputValue
-  } = useCombobox(comboboxProps);
+  var _useCombobox = useCombobox(comboboxProps),
+      isOpen = _useCombobox.isOpen,
+      getToggleButtonProps = _useCombobox.getToggleButtonProps,
+      getLabelProps = _useCombobox.getLabelProps,
+      getMenuProps = _useCombobox.getMenuProps,
+      getInputProps = _useCombobox.getInputProps,
+      getComboboxProps = _useCombobox.getComboboxProps,
+      highlightedIndex = _useCombobox.highlightedIndex,
+      getItemProps = _useCombobox.getItemProps,
+      openMenu = _useCombobox.openMenu,
+      selectedItem = _useCombobox.selectedItem,
+      reset = _useCombobox.reset,
+      inputValue = _useCombobox.inputValue;
 
-  const openSelect = () => {
+  var openSelect = function openSelect() {
     if (!isOpen && !(disabled || readOnly)) {
       openMenu();
     }
@@ -98,19 +104,18 @@ const SingleSelect = /*#__PURE__*/forwardRef(function SingleSelect(_ref2, ref) {
     children: /*#__PURE__*/jsxs(Container, {
       className: className,
       ref: ref,
-      children: [/*#__PURE__*/jsx(Label, { ...getLabelProps(),
+      children: [/*#__PURE__*/jsx(Label, _objectSpread(_objectSpread({}, getLabelProps()), {}, {
         label: label,
         meta: meta,
         disabled: disabled
-      }), /*#__PURE__*/jsxs(StyledInputWrapper, { ...getComboboxProps(),
-        children: [/*#__PURE__*/jsx(PaddedInput, { ...getInputProps({
-            disabled: disabled
-          }),
+      })), /*#__PURE__*/jsxs(StyledInputWrapper, _objectSpread(_objectSpread({}, getComboboxProps()), {}, {
+        children: [/*#__PURE__*/jsx(PaddedInput, _objectSpread(_objectSpread({}, getInputProps({
+          disabled: disabled
+        })), {}, {
           readOnly: readOnly,
           onFocus: openSelect,
-          onClick: openSelect,
-          ...other
-        }), Boolean(inputValue) && /*#__PURE__*/jsx(StyledButton, {
+          onClick: openSelect
+        }, other)), Boolean(inputValue) && /*#__PURE__*/jsx(StyledButton, {
           variant: "ghost_icon",
           disabled: disabled || readOnly,
           "aria-label": 'clear options',
@@ -123,29 +128,31 @@ const SingleSelect = /*#__PURE__*/forwardRef(function SingleSelect(_ref2, ref) {
             data: close,
             size: 16
           })
-        }), /*#__PURE__*/jsx(StyledButton, {
-          variant: "ghost_icon",
-          ...getToggleButtonProps({
-            disabled: disabled || readOnly
-          }),
+        }), /*#__PURE__*/jsx(StyledButton, _objectSpread(_objectSpread({
+          variant: "ghost_icon"
+        }, getToggleButtonProps({
+          disabled: disabled || readOnly
+        })), {}, {
           "aria-label": 'toggle options',
           title: "open",
           children: /*#__PURE__*/jsx(Icon, {
             data: isOpen ? arrow_drop_up : arrow_drop_down
           })
-        })]
-      }), /*#__PURE__*/jsx(StyledList, { ...getMenuProps(),
-        children: isOpen && inputItems.map((item, index) => /*#__PURE__*/jsx(PaddedStyledListItem, {
-          highlighted: highlightedIndex === index ? 'true' : 'false',
-          active: selectedItem === item ? 'true' : 'false',
-          ...getItemProps({
-            item,
-            index,
+        }))]
+      })), /*#__PURE__*/jsx(StyledList, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+        children: isOpen && inputItems.map(function (item, index) {
+          return /*#__PURE__*/jsx(PaddedStyledListItem, _objectSpread(_objectSpread({
+            highlighted: highlightedIndex === index ? 'true' : 'false',
+            active: selectedItem === item ? 'true' : 'false'
+          }, getItemProps({
+            item: item,
+            index: index,
             disabled: disabled
-          }),
-          children: item
-        }, `${item}`))
-      })]
+          })), {}, {
+            children: item
+          }), "".concat(item));
+        })
+      }))]
     })
   });
 });

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

@@ -5,49 +5,37 @@ import { select } from './Select.tokens.js';
 import { bordersTemplate, typographyTemplate } from '@equinor/eds-utils';
 import { Input } from '../Input/Input.js';
 
-const {
-  entities: {
-    button: buttonToken
-  }
-} = select;
-const Container = styled.div.withConfig({
+var buttonToken = select.entities.button;
+var Container = styled.div.withConfig({
   displayName: "commonStyles__Container",
   componentId: "sc-v98ajk-0"
 })(["position:relative;"]);
-const PaddedInput = styled(Input).withConfig({
+var PaddedInput = styled(Input).withConfig({
   displayName: "commonStyles__PaddedInput",
   componentId: "sc-v98ajk-1"
 })(["padding-right:calc( ", " + ", " + ", " + 0px );"], buttonToken.height, buttonToken.spacings.left, buttonToken.spacings.right);
-const StyledList = styled(List).withConfig({
+var StyledList = styled(List).withConfig({
   displayName: "commonStyles__StyledList",
   componentId: "sc-v98ajk-2"
 })(["background-color:", ";box-shadow:", ";overflow-y:scroll;max-height:300px;padding:0;", " margin-top:4px;position:absolute;right:0;left:0;z-index:50;"], select.background, select.boxShadow, bordersTemplate(select.border));
-const StyledListItem = styled(List.Item).withConfig({
+var StyledListItem = styled(List.Item).withConfig({
   displayName: "commonStyles__StyledListItem",
   componentId: "sc-v98ajk-3"
-})(_ref => {
-  let {
-    theme,
-    highlighted,
-    active
-  } = _ref;
-  const backgroundColor = highlighted === 'true' ? theme.states.hover.background : active === 'true' ? theme.states.active.background : theme.background;
+})(function (_ref) {
+  var theme = _ref.theme,
+      highlighted = _ref.highlighted,
+      active = _ref.active;
+  var 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({
+var StyledButton = styled(Button).withConfig({
   displayName: "commonStyles__StyledButton",
   componentId: "sc-v98ajk-4"
-})(_ref2 => {
-  let {
-    theme: {
-      entities: {
-        button
-      }
-    }
-  } = _ref2;
+})(function (_ref2) {
+  var button = _ref2.theme.entities.button;
   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({
+var StyledInputWrapper = styled.div.withConfig({
   displayName: "commonStyles__StyledInputWrapper",
   componentId: "sc-v98ajk-5"
 })(["position:relative;"]);

package/dist/esm/components/SideSheet/SideSheet.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 from 'styled-components';
 import { clear } from '@equinor/eds-icons';
@@ -8,41 +10,41 @@ import { comfortable, variants } from './SideSheet.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 
-const {
-  background,
-  spacings,
-  border,
-  typography
-} = comfortable;
-const StyledSideSheet = styled.div.withConfig({
+var _excluded = ["variant", "width", "title", "children", "open", "onClose"];
+var background = comfortable.background,
+    spacings = comfortable.spacings,
+    border = comfortable.border,
+    typography = comfortable.typography;
+var StyledSideSheet = styled.div.withConfig({
   displayName: "SideSheet__StyledSideSheet",
   componentId: "sc-wkzlnn-0"
-})(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background, _ref => {
-  let {
-    width
-  } = _ref;
+})(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background, function (_ref) {
+  var width = _ref.width;
   return width;
 }, bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography));
-const Header = styled.div.withConfig({
+var 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(_ref2, ref) {
-  let {
-    variant = 'medium',
-    width,
-    title = '',
-    children,
-    open = true,
-    onClose,
-    ...rest
-  } = _ref2;
-  const props = { ...rest,
-    ref,
+var SideSheet = /*#__PURE__*/forwardRef(function SideSheet(_ref2, ref) {
+  var _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'medium' : _ref2$variant,
+      width = _ref2.width,
+      _ref2$title = _ref2.title,
+      title = _ref2$title === void 0 ? '' : _ref2$title,
+      children = _ref2.children,
+      _ref2$open = _ref2.open,
+      open = _ref2$open === void 0 ? true : _ref2$open,
+      onClose = _ref2.onClose,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var props = _objectSpread(_objectSpread({}, rest), {}, {
+    ref: ref,
     width: width || variants[variant]
-  }; // Controller must set open={false} when pressing the close button
+  }); // Controller must set open={false} when pressing the close button
+
 
-  return open && /*#__PURE__*/jsxs(StyledSideSheet, { ...props,
+  return open && /*#__PURE__*/jsxs(StyledSideSheet, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsxs(Header, {
       children: [/*#__PURE__*/jsx(Typography, {
         variant: "h2",
@@ -58,7 +60,7 @@ const SideSheet = /*#__PURE__*/forwardRef(function SideSheet(_ref2, ref) {
         })
       })]
     }), children]
-  });
+  }));
 });
 
 export { SideSheet };

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

@@ -1,30 +1,15 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors: {
-    ui: {
-      background__default: {
-        rgba: background
-      },
-      background__light: {
-        rgba: borderColor
-      }
-    }
-  },
-  spacings: {
-    comfortable: {
-      xx_small: spacingXXS,
-      medium: spacingMedium
-    }
-  },
-  typography: {
-    paragraph: {
-      body_short
-    }
-  }
-} = tokens;
-const comfortable = {
-  background,
+var _tokens$colors$ui = tokens.colors.ui,
+    background = _tokens$colors$ui.background__default.rgba,
+    borderColor = _tokens$colors$ui.background__light.rgba,
+    _tokens$spacings$comf = tokens.spacings.comfortable,
+    spacingXXS = _tokens$spacings$comf.xx_small,
+    spacingMedium = _tokens$spacings$comf.medium,
+    body_short = tokens.typography.paragraph.body_short;
+var comfortable = {
+  background: background,
   spacings: {
     left: '14px',
     // padding left is 14px, because of border-left 'steals' 2px of the padding
@@ -39,10 +24,9 @@ const comfortable = {
       style: 'solid'
     }
   },
-  typography: { ...body_short
-  }
+  typography: _objectSpread({}, body_short)
 };
-const variants = {
+var variants = {
   small: '240px',
   medium: '320px',
   large: '480px',

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

@@ -4,20 +4,15 @@ import { typographyTemplate } from '@equinor/eds-utils';
 import { slider } from './Slider.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-const {
-  entities: {
-    track,
-    output
-  }
-} = slider;
-const StyledMinMax = styled.span.withConfig({
+var _tokens$entities = slider.entities,
+    track = _tokens$entities.track,
+    output = _tokens$entities.output;
+var 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(_ref, ref) {
-  let {
-    children
-  } = _ref;
+var MinMax = /*#__PURE__*/forwardRef(function MinMax(_ref, ref) {
+  var children = _ref.children;
   return /*#__PURE__*/jsx(StyledMinMax, {
     ref: ref,
     children: children

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

@@ -4,27 +4,20 @@ import { typographyTemplate } from '@equinor/eds-utils';
 import { slider } from './Slider.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-const {
-  entities: {
-    track,
-    output
-  }
-} = slider;
-const StyledOutput = styled.output.withConfig({
+var _tokens$entities = slider.entities,
+    track = _tokens$entities.track,
+    output = _tokens$entities.output;
+var 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;"], _ref => {
-  let {
-    value
-  } = _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;"], function (_ref) {
+  var value = _ref.value;
   return value;
 }, typographyTemplate(output.typography), slider.background, track.spacings.top);
-const Output = /*#__PURE__*/forwardRef(function Output(_ref2, ref) {
-  let {
-    children,
-    value,
-    htmlFor
-  } = _ref2;
+var Output = /*#__PURE__*/forwardRef(function Output(_ref2, ref) {
+  var children = _ref2.children,
+      value = _ref2.value,
+      htmlFor = _ref2.htmlFor;
   return /*#__PURE__*/jsx(StyledOutput, {
     ref: ref,
     value: value,