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

package/dist/esm/components/Select/MultiSelect/MultiSelect.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 } from 'react';
 import { useMultipleSelection, useCombobox } from 'downshift';
 import { Icon } from '../../Icon/index.js';
@@ -11,41 +14,48 @@ 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", "initialSelectedItems", "label", "meta", "className", "disabled", "readOnly", "selectedOptions", "handleSelectedItemsChange"];
+var PaddedStyledListItem = styled(StyledListItem).withConfig({
   displayName: "MultiSelect__PaddedStyledListItem",
   componentId: "sc-69ntfg-0"
-})(["display:flex;align-items:center;", ""], _ref => {
-  let {
-    theme
-  } = _ref;
+})(["display:flex;align-items:center;", ""], function (_ref) {
+  var theme = _ref.theme;
   return spacingsTemplate(theme.spacings);
 });
 
 /** @deprecated Use `<Autocomplete multiple />` instead. */
-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 {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+var MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect(_ref2, ref) {
+  var _ref2$items = _ref2.items,
+      items = _ref2$items === void 0 ? [] : _ref2$items,
+      _ref2$initialSelected = _ref2.initialSelectedItems,
+      initialSelectedItems = _ref2$initialSelected === void 0 ? [] : _ref2$initialSelected,
+      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,
+      selectedOptions = _ref2.selectedOptions,
+      handleSelectedItemsChange = _ref2.handleSelectedItemsChange,
+      other = _objectWithoutProperties(_ref2, _excluded);
+
+  var isControlled = selectedOptions ? true : false;
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, multiSelect);
-  let multipleSelectionProps = {
+  var multipleSelectionProps = {
     initialSelectedItems: initialSelectedItems,
-    onSelectedItemsChange: changes => {
+    onSelectedItemsChange: function onSelectedItemsChange(changes) {
       if (handleSelectedItemsChange) {
         handleSelectedItemsChange(changes);
       }
@@ -53,68 +63,57 @@ const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect(_ref2, ref) {
   };
 
   if (isControlled) {
-    multipleSelectionProps = { ...multipleSelectionProps,
+    multipleSelectionProps = _objectSpread(_objectSpread({}, multipleSelectionProps), {}, {
       selectedItems: selectedOptions
-    };
+    });
   }
 
-  const {
-    getDropdownProps,
-    addSelectedItem,
-    removeSelectedItem,
-    selectedItems,
-    reset
-  } = useMultipleSelection(multipleSelectionProps);
-
-  const getFilteredItems = items => items.filter(item => item.toLowerCase().includes(inputValue.toLowerCase()));
-
-  const {
-    isOpen,
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    getInputProps,
-    getComboboxProps,
-    highlightedIndex,
-    getItemProps,
-    openMenu
-  } = useCombobox({
-    inputValue,
+  var _useMultipleSelection = useMultipleSelection(multipleSelectionProps),
+      getDropdownProps = _useMultipleSelection.getDropdownProps,
+      addSelectedItem = _useMultipleSelection.addSelectedItem,
+      removeSelectedItem = _useMultipleSelection.removeSelectedItem,
+      selectedItems = _useMultipleSelection.selectedItems,
+      reset = _useMultipleSelection.reset;
+
+  var getFilteredItems = function getFilteredItems(items) {
+    return items.filter(function (item) {
+      return item.toLowerCase().includes(inputValue.toLowerCase());
+    });
+  };
+
+  var _useCombobox = useCombobox({
+    inputValue: inputValue,
     selectedItem: null,
     items: getFilteredItems(items),
-    stateReducer: (state, actionAndChanges) => {
-      const {
-        changes,
-        type
-      } = actionAndChanges;
+    stateReducer: function stateReducer(state, actionAndChanges) {
+      var changes = actionAndChanges.changes,
+          type = actionAndChanges.type;
 
       switch (type) {
         case useCombobox.stateChangeTypes.InputKeyDownEnter:
         case useCombobox.stateChangeTypes.ItemClick:
-          return { ...changes,
+          return _objectSpread(_objectSpread({}, changes), {}, {
             isOpen: true,
             // keep menu open after selection.
             highlightedIndex: state.highlightedIndex,
             inputValue: '' // don't add the item string as input value at selection. */
 
-          };
+          });
 
         case useCombobox.stateChangeTypes.InputBlur:
-          return { ...changes,
+          return _objectSpread(_objectSpread({}, changes), {}, {
             inputValue: '' // don't add the item string as input value at selection.
 
-          };
+          });
 
         default:
           return changes;
       }
     },
-    onStateChange: _ref3 => {
-      let {
-        inputValue,
-        type,
-        selectedItem
-      } = _ref3;
+    onStateChange: function onStateChange(_ref3) {
+      var inputValue = _ref3.inputValue,
+          type = _ref3.type,
+          selectedItem = _ref3.selectedItem;
 
       switch (type) {
         case useCombobox.stateChangeTypes.InputChange:
@@ -133,16 +132,26 @@ const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect(_ref2, ref) {
           break;
       }
     }
-  });
-  const placeholderText = items.length > 0 ? `${selectedItems.length}/${items.length} selected` : '';
-
-  const openSelect = () => {
+  }),
+      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;
+
+  var placeholderText = items.length > 0 ? "".concat(selectedItems.length, "/").concat(items.length, " selected") : '';
+
+  var openSelect = function openSelect() {
     if (!isOpen && !(disabled || readOnly)) {
       openMenu();
     }
   };
 
-  const handleClear = () => {
+  var handleClear = function handleClear() {
     reset();
     setInputValue('');
   };
@@ -152,21 +161,20 @@ const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect(_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( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-          getDropdownProps({
-            preventKeyAction: isOpen,
-            disabled: disabled
-          })),
+      })), /*#__PURE__*/jsxs(StyledInputWrapper, _objectSpread(_objectSpread({}, getComboboxProps()), {}, {
+        children: [/*#__PURE__*/jsx(PaddedInput, _objectSpread(_objectSpread({}, getInputProps( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        getDropdownProps({
+          preventKeyAction: isOpen,
+          disabled: disabled
+        }))), {}, {
           placeholder: placeholderText,
           readOnly: readOnly,
-          onFocus: openSelect,
-          ...other
-        }), Boolean(selectedItems.length || inputValue) && /*#__PURE__*/jsx(StyledButton, {
+          onFocus: openSelect
+        }, other)), Boolean(selectedItems.length || inputValue) && /*#__PURE__*/jsx(StyledButton, {
           variant: "ghost_icon",
           disabled: disabled || readOnly,
           "aria-label": 'clear options',
@@ -179,36 +187,38 @@ const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect(_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 && getFilteredItems(items).map((item, index) => /*#__PURE__*/jsxs(PaddedStyledListItem, {
-          highlighted: highlightedIndex === index ? 'true' : 'false',
-          ...getItemProps({
-            item,
-            index,
+        }))]
+      })), /*#__PURE__*/jsx(StyledList, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+        children: isOpen && getFilteredItems(items).map(function (item, index) {
+          return /*#__PURE__*/jsxs(PaddedStyledListItem, _objectSpread(_objectSpread({
+            highlighted: highlightedIndex === index ? 'true' : 'false'
+          }, getItemProps({
+            item: item,
+            index: index,
             disabled: disabled
-          }),
-          children: [/*#__PURE__*/jsx(CheckboxInput, {
-            checked: selectedItems.includes(item),
-            value: item,
-            onChange: () => {
-              return null;
-            }
-          }), /*#__PURE__*/jsx("span", {
-            children: item
-          })]
-        }, `${item}`))
-      })]
+          })), {}, {
+            children: [/*#__PURE__*/jsx(CheckboxInput, {
+              checked: selectedItems.includes(item),
+              value: item,
+              onChange: function onChange() {
+                return null;
+              }
+            }), /*#__PURE__*/jsx("span", {
+              children: item
+            })]
+          }), "".concat(item));
+        })
+      }))]
     })
   });
 });

package/dist/esm/components/Select/NativeSelect/NativeSelect.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 { nativeselect } from './NativeSelect.tokens.js';
@@ -6,64 +8,64 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEds } from '../../EdsProvider/eds.context.js';
 import { Label } from '../../Label/Label.js';
 
-const Container = styled.div.withConfig({
+var _excluded = ["label", "children", "className", "style", "selectRef", "id", "meta", "disabled", "multiple"];
+var Container = styled.div.withConfig({
   displayName: "NativeSelect__Container",
   componentId: "sc-1c1ogya-0"
 })(["min-width:100px;width:100%;"]);
-const StyledSelect = styled.select.withConfig({
+var 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), _ref => {
-  let {
-    theme
-  } = _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), function (_ref) {
+  var theme = _ref.theme;
   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,
-    style,
-    selectRef,
-    id,
-    meta,
-    disabled = false,
-    multiple = false,
-    ...other
-  } = _ref2;
-  const {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+var NativeSelect = /*#__PURE__*/forwardRef(function NativeSelect(_ref2, ref) {
+  var label = _ref2.label,
+      children = _ref2.children,
+      className = _ref2.className,
+      style = _ref2.style,
+      selectRef = _ref2.selectRef,
+      id = _ref2.id,
+      meta = _ref2.meta,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      _ref2$multiple = _ref2.multiple,
+      multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
+      other = _objectWithoutProperties(_ref2, _excluded);
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, nativeselect);
-  const containerProps = {
-    ref,
-    className,
-    style
+  var containerProps = {
+    ref: ref,
+    className: className,
+    style: style
   };
-  const selectProps = {
+
+  var selectProps = _objectSpread({
     ref: selectRef,
-    id,
-    disabled,
-    multiple,
-    ...other
-  };
-  const labelProps = {
+    id: id,
+    disabled: disabled,
+    multiple: multiple
+  }, other);
+
+  var labelProps = {
     htmlFor: id,
-    label,
-    meta
+    label: label,
+    meta: meta
   };
-  const showLabel = label || meta;
+  var showLabel = label || meta;
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxs(Container, { ...containerProps,
-      children: [showLabel && /*#__PURE__*/jsx(Label, { ...labelProps
-      }), /*#__PURE__*/jsx(StyledSelect, { ...selectProps,
+    children: /*#__PURE__*/jsxs(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
+      children: [showLabel && /*#__PURE__*/jsx(Label, _objectSpread({}, labelProps)), /*#__PURE__*/jsx(StyledSelect, _objectSpread(_objectSpread({}, selectProps), {}, {
         children: children
-      })]
-    })
+      }))]
+    }))
   });
 });
 

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

@@ -1,21 +1,17 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors,
-  spacings: {
-    comfortable: {
-      small,
-      x_small
-    }
-  },
-  typography,
-  shape
-} = tokens;
-const nativeselect = {
+var colors = tokens.colors,
+    _tokens$spacings$comf = tokens.spacings.comfortable,
+    small = _tokens$spacings$comf.small,
+    x_small = _tokens$spacings$comf.x_small,
+    typography = tokens.typography,
+    shape = tokens.shape;
+var nativeselect = {
   background: colors.ui.background__light.rgba,
-  typography: { ...typography.input.text,
+  typography: _objectSpread(_objectSpread({}, typography.input.text), {}, {
     color: colors.text.static_icons__default.rgba
-  },
+  }),
   entities: {
     input: {
       spacings: {

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

@@ -1,31 +1,22 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
-const {
-  typography,
-  colors,
-  shape: {
-    straight,
-    corners: {
-      borderRadius
-    }
-  },
-  spacings: {
-    comfortable: {
-      small: spacingSmall,
-      medium_small: spacingMediumSmall,
-      medium: spacingMedium,
-      large: spacingLarge,
-      xx_small
-    }
-  },
-  elevation: {
-    temporary_nav: boxShadow
-  }
-} = tokens;
-const select = {
+var typography = tokens.typography,
+    colors = tokens.colors,
+    _tokens$shape = tokens.shape,
+    straight = _tokens$shape.straight,
+    borderRadius = _tokens$shape.corners.borderRadius,
+    _tokens$spacings$comf = tokens.spacings.comfortable,
+    spacingSmall = _tokens$spacings$comf.small,
+    spacingMediumSmall = _tokens$spacings$comf.medium_small,
+    spacingMedium = _tokens$spacings$comf.medium,
+    spacingLarge = _tokens$spacings$comf.large,
+    xx_small = _tokens$spacings$comf.xx_small,
+    boxShadow = tokens.elevation.temporary_nav;
+var select = {
   background: colors.ui.background__default.rgba,
-  boxShadow,
+  boxShadow: boxShadow,
   minHeight: straight.minHeight,
   spacings: {
     top: spacingMedium,
@@ -33,9 +24,9 @@ const select = {
     bottom: spacingMedium,
     left: spacingLarge
   },
-  typography: { ...typography.navigation.menu_title,
+  typography: _objectSpread(_objectSpread({}, typography.navigation.menu_title), {}, {
     color: colors.text.static_icons__default.rgba
-  },
+  }),
   border: {
     type: 'border',
     radius: borderRadius
@@ -81,7 +72,7 @@ const select = {
     }
   }
 };
-const multiSelect = mergeDeepRight(select, {
+var multiSelect = mergeDeepRight(select, {
   spacings: {
     top: '0',
     bottom: '0',