@equinor/eds-core-react 0.26.0 → 0.28.0-dev12052022

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

@@ -4,6 +4,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { forwardRef, useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { useMultipleSelection, useCombobox } from 'downshift';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { Button } from '../Button/index.js';
 import { List } from '../List/index.js';
@@ -28,7 +29,7 @@ var StyledList = styled(List).withConfig({
   componentId: "sc-yvif0e-1"
 })(function (_ref) {
   var theme = _ref.theme;
-  return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
+  return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;max-height:300px;padding:0;display:grid;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
 });
 var StyledButton = styled(Button).withConfig({
   displayName: "Autocomplete__StyledButton",
@@ -37,14 +38,12 @@ var StyledButton = styled(Button).withConfig({
   var button = _ref2.theme.entities.button;
   return css(["height:", ";width:", ";"], button.height, button.height);
 });
-
 var findIndex = function findIndex(_ref3) {
   var calc = _ref3.calc,
-      index = _ref3.index,
-      optionDisabled = _ref3.optionDisabled,
-      availableItems = _ref3.availableItems;
+    index = _ref3.index,
+    optionDisabled = _ref3.optionDisabled,
+    availableItems = _ref3.availableItems;
   var nextItem = availableItems[index];
-
   if (optionDisabled(nextItem)) {
     var nextIndex = calc(index);
     return findIndex({
@@ -54,14 +53,12 @@ var findIndex = function findIndex(_ref3) {
       optionDisabled: optionDisabled
     });
   }
-
   return index;
 };
-
 var findNextIndex = function findNextIndex(_ref4) {
   var index = _ref4.index,
-      optionDisabled = _ref4.optionDisabled,
-      availableItems = _ref4.availableItems;
+    optionDisabled = _ref4.optionDisabled,
+    availableItems = _ref4.availableItems;
   var options = {
     index: index,
     optionDisabled: optionDisabled,
@@ -71,21 +68,18 @@ var findNextIndex = function findNextIndex(_ref4) {
     }
   };
   var nextIndex = findIndex(options);
-
   if (nextIndex > availableItems.length - 1) {
     // jump to start of list
     return findIndex(_objectSpread(_objectSpread({}, options), {}, {
       index: 0
     }));
   }
-
   return nextIndex;
 };
-
 var findPrevIndex = function findPrevIndex(_ref5) {
   var index = _ref5.index,
-      optionDisabled = _ref5.optionDisabled,
-      availableItems = _ref5.availableItems;
+    optionDisabled = _ref5.optionDisabled,
+    availableItems = _ref5.availableItems;
   var options = {
     index: index,
     optionDisabled: optionDisabled,
@@ -95,70 +89,61 @@ var findPrevIndex = function findPrevIndex(_ref5) {
     }
   };
   var prevIndex = findIndex(options);
-
   if (prevIndex < 0) {
     // jump to end of list
     return findIndex(_objectSpread(_objectSpread({}, options), {}, {
       index: availableItems.length - 1
     }));
   }
-
   return prevIndex;
 };
-
 function AutocompleteInner(props, ref) {
   var _props$options = props.options,
-      options = _props$options === void 0 ? [] : _props$options,
-      label = props.label,
-      meta = props.meta,
-      className = props.className,
-      style = props.style,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      _props$readOnly = props.readOnly,
-      readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
-      _props$hideClearButto = props.hideClearButton,
-      hideClearButton = _props$hideClearButto === void 0 ? false : _props$hideClearButto,
-      onOptionsChange = props.onOptionsChange,
-      selectedOptions = props.selectedOptions,
-      multiple = props.multiple,
-      _props$initialSelecte = props.initialSelectedOptions,
-      initialSelectedOptions = _props$initialSelecte === void 0 ? [] : _props$initialSelecte,
-      disablePortal = props.disablePortal,
-      _props$optionDisabled = props.optionDisabled,
-      optionDisabled = _props$optionDisabled === void 0 ? function () {
-    return false;
-  } : _props$optionDisabled,
-      optionsFilter = props.optionsFilter,
-      autoWidth = props.autoWidth,
-      placeholder = props.placeholder,
-      optionLabel = props.optionLabel,
-      _props$clearSearchOnC = props.clearSearchOnChange,
-      clearSearchOnChange = _props$clearSearchOnC === void 0 ? true : _props$clearSearchOnC,
-      other = _objectWithoutProperties(props, _excluded);
-
+    options = _props$options === void 0 ? [] : _props$options,
+    label = props.label,
+    meta = props.meta,
+    className = props.className,
+    style = props.style,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$readOnly = props.readOnly,
+    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    _props$hideClearButto = props.hideClearButton,
+    hideClearButton = _props$hideClearButto === void 0 ? false : _props$hideClearButto,
+    onOptionsChange = props.onOptionsChange,
+    selectedOptions = props.selectedOptions,
+    multiple = props.multiple,
+    _props$initialSelecte = props.initialSelectedOptions,
+    initialSelectedOptions = _props$initialSelecte === void 0 ? [] : _props$initialSelecte,
+    disablePortal = props.disablePortal,
+    _props$optionDisabled = props.optionDisabled,
+    optionDisabled = _props$optionDisabled === void 0 ? function () {
+      return false;
+    } : _props$optionDisabled,
+    optionsFilter = props.optionsFilter,
+    autoWidth = props.autoWidth,
+    placeholder = props.placeholder,
+    optionLabel = props.optionLabel,
+    _props$clearSearchOnC = props.clearSearchOnChange,
+    clearSearchOnChange = _props$clearSearchOnC === void 0 ? true : _props$clearSearchOnC,
+    other = _objectWithoutProperties(props, _excluded);
   var anchorRef = useRef(null);
   var isControlled = Boolean(selectedOptions);
-
   var _useState = useState(options),
-      _useState2 = _slicedToArray(_useState, 2),
-      inputOptions = _useState2[0],
-      setInputOptions = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    inputOptions = _useState2[0],
+    setInputOptions = _useState2[1];
   var _useState3 = useState(inputOptions),
-      _useState4 = _slicedToArray(_useState3, 2),
-      availableItems = _useState4[0],
-      setAvailableItems = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    availableItems = _useState4[0],
+    setAvailableItems = _useState4[1];
   var _useState5 = useState(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      typedInputValue = _useState6[0],
-      setTypedInputValue = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    typedInputValue = _useState6[0],
+    setTypedInputValue = _useState6[1];
   useEffect(function () {
     var availableHash = JSON.stringify(inputOptions);
     var optionsHash = JSON.stringify(options);
-
     if (availableHash !== optionsHash) {
       setInputOptions(options);
     }
@@ -169,10 +154,8 @@ function AutocompleteInner(props, ref) {
   var disabledItems = useMemo(function () {
     return options.filter(optionDisabled);
   }, [options, optionDisabled]);
-
   var _useEds = useEds(),
-      density = _useEds.density;
-
+    density = _useEds.density;
   var token = useToken({
     density: density
   }, multiple ? multiSelect : selectTokens);
@@ -180,7 +163,6 @@ function AutocompleteInner(props, ref) {
   var multipleSelectionProps = {
     initialSelectedItems: multiple ? initialSelectedOptions : initialSelectedOptions[0] ? [initialSelectedOptions[0]] : []
   };
-
   if (multiple) {
     multipleSelectionProps = _objectSpread(_objectSpread({}, multipleSelectionProps), {}, {
       onSelectedItemsChange: function onSelectedItemsChange(changes) {
@@ -192,27 +174,23 @@ function AutocompleteInner(props, ref) {
         }
       }
     });
-
     if (isControlled) {
       multipleSelectionProps = _objectSpread(_objectSpread({}, multipleSelectionProps), {}, {
         selectedItems: selectedOptions
       });
     }
   }
-
   var _useMultipleSelection = useMultipleSelection(multipleSelectionProps),
-      getDropdownProps = _useMultipleSelection.getDropdownProps,
-      addSelectedItem = _useMultipleSelection.addSelectedItem,
-      removeSelectedItem = _useMultipleSelection.removeSelectedItem,
-      selectedItems = _useMultipleSelection.selectedItems,
-      resetSelection = _useMultipleSelection.reset,
-      setSelectedItems = _useMultipleSelection.setSelectedItems;
-
+    getDropdownProps = _useMultipleSelection.getDropdownProps,
+    addSelectedItem = _useMultipleSelection.addSelectedItem,
+    removeSelectedItem = _useMultipleSelection.removeSelectedItem,
+    selectedItems = _useMultipleSelection.selectedItems,
+    resetSelection = _useMultipleSelection.reset,
+    setSelectedItems = _useMultipleSelection.setSelectedItems;
   var getLabel = useCallback(function (item) {
     if (!item) {
       return '';
     }
-
     if (_typeof(item) === 'object') {
       if (optionLabel) {
         return optionLabel(item);
@@ -220,17 +198,26 @@ function AutocompleteInner(props, ref) {
         throw new Error('Missing label. When using objects for options make sure to define the `optionLabel` property');
       }
     }
-
     if (typeof item === 'string') {
       return item;
     }
-
     try {
       return item === null || item === void 0 ? void 0 : item.toString();
     } catch (error) {
       throw new Error('Unable to find label, make sure your are using options as documented');
     }
   }, [optionLabel]);
+  var scrollContainer = useRef(null);
+  var rowVirtualizer = useVirtualizer({
+    count: availableItems.length,
+    getScrollElement: function getScrollElement() {
+      return scrollContainer.current;
+    },
+    estimateSize: useCallback(function () {
+      return 48;
+    }, []),
+    overscan: 10
+  });
   var comboBoxProps = {
     items: availableItems,
     initialSelectedItem: initialSelectedOptions[0],
@@ -241,28 +228,31 @@ function AutocompleteInner(props, ref) {
         if (optionsFilter) {
           return optionsFilter(item, inputValue);
         }
-
         return getLabel(item).toLowerCase().includes(inputValue.toLowerCase());
       }));
     },
-    onIsOpenChange: function onIsOpenChange(_ref7) {
-      var selectedItem = _ref7.selectedItem;
-
+    onHighlightedIndexChange: function onHighlightedIndexChange(_ref7) {
+      var highlightedIndex = _ref7.highlightedIndex,
+        type = _ref7.type;
+      if (type !== useCombobox.stateChangeTypes.ItemMouseMove && type !== useCombobox.stateChangeTypes.MenuMouseLeave && highlightedIndex >= 0) {
+        rowVirtualizer.scrollToIndex(highlightedIndex);
+      }
+    },
+    onIsOpenChange: function onIsOpenChange(_ref8) {
+      var selectedItem = _ref8.selectedItem;
       if (!multiple && selectedItem !== null) {
         setAvailableItems(options);
       }
     },
-    onStateChange: function onStateChange(_ref8) {
-      var type = _ref8.type,
-          selectedItem = _ref8.selectedItem;
-
+    onStateChange: function onStateChange(_ref9) {
+      var type = _ref9.type,
+        selectedItem = _ref9.selectedItem;
       switch (type) {
         case useCombobox.stateChangeTypes.InputChange:
+        case useCombobox.stateChangeTypes.InputBlur:
           break;
-
         case useCombobox.stateChangeTypes.InputKeyDownEnter:
         case useCombobox.stateChangeTypes.ItemClick:
-        case useCombobox.stateChangeTypes.InputBlur:
           if (selectedItem && !optionDisabled(selectedItem)) {
             if (multiple) {
               selectedItems.includes(selectedItem) ? removeSelectedItem(selectedItem) : addSelectedItem(selectedItem);
@@ -270,14 +260,12 @@ function AutocompleteInner(props, ref) {
               setSelectedItems([selectedItem]);
             }
           }
-
           break;
       }
     },
     stateReducer: function stateReducer(_, actionAndChanges) {
       var changes = actionAndChanges.changes,
-          type = actionAndChanges.type;
-
+        type = actionAndChanges.type;
       switch (type) {
         case useCombobox.stateChangeTypes.InputKeyDownArrowDown:
         case useCombobox.stateChangeTypes.InputKeyDownHome:
@@ -288,7 +276,6 @@ function AutocompleteInner(props, ref) {
               optionDisabled: optionDisabled
             })
           });
-
         case useCombobox.stateChangeTypes.InputKeyDownArrowUp:
         case useCombobox.stateChangeTypes.InputKeyDownEnd:
           return _objectSpread(_objectSpread({}, changes), {}, {
@@ -298,13 +285,11 @@ function AutocompleteInner(props, ref) {
               optionDisabled: optionDisabled
             })
           });
-
         default:
           return changes;
       }
     }
   };
-
   if (!multiple) {
     comboBoxProps = _objectSpread(_objectSpread({}, comboBoxProps), {}, {
       onSelectedItemChange: function onSelectedItemChange(changes) {
@@ -316,22 +301,19 @@ function AutocompleteInner(props, ref) {
         }
       }
     });
-
     if (isControlled) {
       comboBoxProps = _objectSpread(_objectSpread({}, comboBoxProps), {}, {
         selectedItem: selectedOptions[0] || null
       });
     }
   }
-
   if (multiple) {
     placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : "".concat(selectedItems.length, "/").concat(options.length - disabledItems.length, " selected");
     comboBoxProps = _objectSpread(_objectSpread({}, comboBoxProps), {}, {
       selectedItem: null,
       stateReducer: function stateReducer(state, actionAndChanges) {
         var changes = actionAndChanges.changes,
-            type = actionAndChanges.type;
-
+          type = actionAndChanges.type;
         switch (type) {
           case useCombobox.stateChangeTypes.InputKeyDownArrowDown:
           case useCombobox.stateChangeTypes.InputKeyDownHome:
@@ -342,7 +324,6 @@ function AutocompleteInner(props, ref) {
                 optionDisabled: optionDisabled
               })
             });
-
           case useCombobox.stateChangeTypes.InputKeyDownArrowUp:
           case useCombobox.stateChangeTypes.InputKeyDownEnd:
             return _objectSpread(_objectSpread({}, changes), {}, {
@@ -352,7 +333,6 @@ function AutocompleteInner(props, ref) {
                 optionDisabled: optionDisabled
               })
             });
-
           case useCombobox.stateChangeTypes.InputKeyDownEnter:
           case useCombobox.stateChangeTypes.ItemClick:
             return _objectSpread(_objectSpread({}, changes), {}, {
@@ -361,79 +341,69 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: state.highlightedIndex,
               inputValue: !clearSearchOnChange ? typedInputValue : ''
             });
-
           case useCombobox.stateChangeTypes.InputBlur:
             setTypedInputValue('');
             return _objectSpread(_objectSpread({}, changes), {}, {
               inputValue: ''
             });
-
           case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
             return _objectSpread(_objectSpread({}, changes), {}, {
               inputValue: !clearSearchOnChange ? typedInputValue : changes.inputValue
             });
-
           default:
             return changes;
         }
       }
     });
   }
-
   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,
-      inputValue = _useCombobox.inputValue,
-      resetCombobox = _useCombobox.reset;
-
+    isOpen = _useCombobox.isOpen,
+    getToggleButtonProps = _useCombobox.getToggleButtonProps,
+    getLabelProps = _useCombobox.getLabelProps,
+    getMenuProps = _useCombobox.getMenuProps,
+    getInputProps = _useCombobox.getInputProps,
+    highlightedIndex = _useCombobox.highlightedIndex,
+    getItemProps = _useCombobox.getItemProps,
+    openMenu = _useCombobox.openMenu,
+    inputValue = _useCombobox.inputValue,
+    resetCombobox = _useCombobox.reset;
   useEffect(function () {
     if (isControlled) {
       setSelectedItems(selectedOptions);
     }
   }, [isControlled, selectedOptions, setSelectedItems]);
-
   var openSelect = function openSelect() {
     if (!isOpen && !(disabled || readOnly)) {
       openMenu();
     }
   };
-
   var _useFloating = useFloating({
-    placement: 'bottom-start',
-    middleware: [offset(4), flip(), shift({
-      padding: 8
-    }), size({
-      apply: function apply(_ref9) {
-        var rects = _ref9.rects,
-            availableHeight = _ref9.availableHeight,
-            elements = _ref9.elements;
-        var anchorWidth = "".concat(rects.reference.width, "px");
-        Object.assign(elements.floating.style, {
-          width: "".concat(autoWidth ? anchorWidth : 'auto'),
-          maxHeight: "".concat(availableHeight, "px")
-        });
-      },
-      padding: 10
-    })]
-  }),
-      x = _useFloating.x,
-      y = _useFloating.y,
-      refs = _useFloating.refs,
-      update = _useFloating.update,
-      reference = _useFloating.reference,
-      floating = _useFloating.floating,
-      strategy = _useFloating.strategy;
-
+      placement: 'bottom-start',
+      middleware: [offset(4), flip(), shift({
+        padding: 8
+      }), size({
+        apply: function apply(_ref10) {
+          var rects = _ref10.rects,
+            availableHeight = _ref10.availableHeight,
+            elements = _ref10.elements;
+          var anchorWidth = "".concat(rects.reference.width, "px");
+          Object.assign(elements.floating.style, {
+            width: "".concat(autoWidth ? anchorWidth : 'auto'),
+            maxHeight: "".concat(availableHeight, "px")
+          });
+        },
+        padding: 10
+      })]
+    }),
+    x = _useFloating.x,
+    y = _useFloating.y,
+    refs = _useFloating.refs,
+    update = _useFloating.update,
+    reference = _useFloating.reference,
+    floating = _useFloating.floating,
+    strategy = _useFloating.strategy;
   var _useInteractions = useInteractions([]),
-      getFloatingProps = _useInteractions.getFloatingProps;
-
+    getFloatingProps = _useInteractions.getFloatingProps;
   useEffect(function () {
     reference(anchorRef.current);
   }, [anchorRef, reference]);
@@ -442,18 +412,15 @@ function AutocompleteInner(props, ref) {
       return autoUpdate(refs.reference.current, refs.floating.current, update);
     }
   }, [refs.reference, refs.floating, update, isOpen]);
-
   var clear = function clear() {
     resetCombobox();
     resetSelection();
     setTypedInputValue('');
   };
-
   var showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly && !hideClearButton;
   var selectedItemsLabels = useMemo(function () {
     return selectedItems.map(getLabel);
   }, [selectedItems, getLabel]);
-
   var optionsList = /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, getFloatingProps({
     ref: floating,
     style: {
@@ -463,30 +430,46 @@ function AutocompleteInner(props, ref) {
       zIndex: 1500
     }
   })), {}, {
-    children: /*#__PURE__*/jsx(StyledList, _objectSpread(_objectSpread({}, getMenuProps({
-      'aria-multiselectable': multiple ? 'true' : null
+    children: /*#__PURE__*/jsxs(StyledList, _objectSpread(_objectSpread({}, getMenuProps({
+      'aria-multiselectable': multiple ? 'true' : null,
+      ref: scrollContainer
     }, {
       suppressRefError: true
     })), {}, {
-      children: !isOpen ? null : availableItems.map(function (item, index) {
+      children: [isOpen && /*#__PURE__*/jsx("li", {
+        role: "presentation",
+        style: {
+          height: "".concat(rowVirtualizer.getTotalSize(), "px"),
+          margin: '0',
+          gridArea: '1 / -1'
+        }
+      }, "total-size"), !isOpen ? null : rowVirtualizer.getVirtualItems().map(function (virtualItem) {
+        var index = virtualItem.index;
+        var item = availableItems[index];
         var label = getLabel(item);
         var isDisabled = optionDisabled(item);
         var isSelected = selectedItemsLabels.includes(label);
         return /*#__PURE__*/jsx(AutocompleteOption, _objectSpread({
+          "data-index": virtualItem.index,
+          "aria-setsize": availableItems.length,
+          "aria-posinset": index + 1,
           value: label,
           multiple: multiple,
           highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
           isSelected: isSelected,
           isDisabled: isDisabled
         }, getItemProps({
+          ref: rowVirtualizer.measureElement,
           item: item,
           index: index,
-          disabled: disabled
-        })), label);
-      })
+          disabled: disabled,
+          style: {
+            transform: "translateY(".concat(virtualItem.start, "px)")
+          }
+        })), virtualItem.key);
+      })]
     }))
   }));
-
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxs(Container, {
@@ -497,15 +480,15 @@ function AutocompleteInner(props, ref) {
         label: label,
         meta: meta,
         disabled: disabled
-      })), /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({}, getComboboxProps()), {}, {
-        children: /*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({}, getInputProps( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      })), /*#__PURE__*/jsx(Container, {
+        children: /*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({}, getInputProps(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         getDropdownProps({
           preventKeyAction: multiple ? isOpen : undefined,
           disabled: disabled,
           ref: refs.reference,
           onChange: function onChange(e) {
             var _e$currentTarget;
-
             return setTypedInputValue(e === null || e === void 0 ? void 0 : (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.value);
           }
         }))), {}, {
@@ -538,14 +521,13 @@ function AutocompleteInner(props, ref) {
             }))]
           })
         }, other))
-      })), disablePortal ? optionsList : /*#__PURE__*/jsx(FloatingPortal, {
+      }), disablePortal ? optionsList : /*#__PURE__*/jsx(FloatingPortal, {
         id: "eds-autocomplete-container",
         children: optionsList
       })]
     })
   });
 }
-
 var Autocomplete = /*#__PURE__*/forwardRef(AutocompleteInner);
 
 export { Autocomplete };

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

@@ -3,25 +3,25 @@ import { tokens } from '@equinor/eds-tokens';
 import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
 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;
+  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 selectTokens = {
   background: colors.ui.background__default.rgba,
   boxShadow: boxShadow,
   minHeight: straight.minHeight,
   spacings: {
-    top: spacingMedium,
+    top: '0',
     right: spacingLarge,
-    bottom: spacingMedium,
+    bottom: '0',
     left: spacingLarge
   },
   typography: _objectSpread(_objectSpread({}, typography.navigation.menu_title), {}, {
@@ -53,6 +53,14 @@ var selectTokens = {
         right: spacingSmall,
         top: '6px'
       }
+    },
+    label: {
+      spacings: {
+        left: '0',
+        right: '0',
+        top: spacingMedium,
+        bottom: spacingMedium
+      }
     }
   },
   modes: {
@@ -60,8 +68,8 @@ var selectTokens = {
       spacings: {
         left: spacingSmall,
         right: spacingSmall,
-        top: spacingSmall,
-        bottom: spacingSmall
+        top: '0',
+        bottom: '0'
       },
       entities: {
         button: {
@@ -70,6 +78,14 @@ var selectTokens = {
             right: spacingSmall,
             top: '0'
           }
+        },
+        label: {
+          spacings: {
+            left: '0',
+            right: '0',
+            top: spacingSmall,
+            bottom: spacingSmall
+          }
         }
       }
     }