@equinor/eds-core-react 0.19.0-dev.202205096 → 0.20.1-dev.20220609

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

@@ -0,0 +1,481 @@
+import { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useMultipleSelection, useCombobox } from 'downshift';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { Button } from '../Button/Button.js';
+import { List } from '../List/index.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { Label } from '../Label/Label.js';
+import { Icon } from '../Icon/index.js';
+import { Input } from '../Input/Input.js';
+import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
+import { multiSelect, selectTokens } from './Autocomplete.tokens.js';
+import { bordersTemplate, useIsMounted, useToken, usePopper } from '@equinor/eds-utils';
+import { AutocompleteOption } from './Option.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const Container = styled.div.withConfig({
+  displayName: "Autocomplete__Container",
+  componentId: "sc-yvif0e-0"
+})(["position:relative;"]);
+const StyledInput = styled(Input).withConfig({
+  displayName: "Autocomplete__StyledInput",
+  componentId: "sc-yvif0e-1"
+})(_ref => {
+  let {
+    theme: {
+      entities: {
+        button
+      }
+    }
+  } = _ref;
+  return css(["padding-right:calc( ", " + ", " + (", " * 2) );"], button.spacings.left, button.spacings.right, button.height);
+});
+const StyledList = styled(List).withConfig({
+  displayName: "Autocomplete__StyledList",
+  componentId: "sc-yvif0e-2"
+})(_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;position:absolute;right:0;left:0;z-index:50;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
+});
+const StyledButton = styled(Button).withConfig({
+  displayName: "Autocomplete__StyledButton",
+  componentId: "sc-yvif0e-3"
+})(_ref3 => {
+  let {
+    theme: {
+      entities: {
+        button
+      }
+    }
+  } = _ref3;
+  return css(["position:absolute;height:", ";width:", ";right:", ";top:", ";"], button.height, button.height, button.spacings.right, button.spacings.top);
+});
+
+const findIndex = _ref4 => {
+  let {
+    calc,
+    index,
+    optionDisabled,
+    availableItems
+  } = _ref4;
+  const nextItem = availableItems[index];
+
+  if (optionDisabled(nextItem)) {
+    const nextIndex = calc(index);
+    return findIndex({
+      calc,
+      index: nextIndex,
+      availableItems,
+      optionDisabled
+    });
+  }
+
+  return index;
+};
+
+const findNextIndex = _ref5 => {
+  let {
+    index,
+    optionDisabled,
+    availableItems
+  } = _ref5;
+  const options = {
+    index,
+    optionDisabled,
+    availableItems,
+    calc: num => num + 1
+  };
+  const nextIndex = findIndex(options);
+
+  if (nextIndex > availableItems.length - 1) {
+    // jump to start of list
+    return findIndex({ ...options,
+      index: 0
+    });
+  }
+
+  return nextIndex;
+};
+
+const findPrevIndex = _ref6 => {
+  let {
+    index,
+    optionDisabled,
+    availableItems
+  } = _ref6;
+  const options = {
+    index,
+    optionDisabled,
+    availableItems,
+    calc: num => num - 1
+  };
+  const prevIndex = findIndex(options);
+
+  if (prevIndex < 0) {
+    // jump to end of list
+    return findIndex({ ...options,
+      index: availableItems.length - 1
+    });
+  }
+
+  return prevIndex;
+};
+
+function AutocompleteInner(props, ref) {
+  const {
+    options = [],
+    label,
+    meta,
+    className,
+    disabled = false,
+    readOnly = false,
+    onOptionsChange,
+    selectedOptions,
+    multiple,
+    initialSelectedOptions = [],
+    disablePortal,
+    optionDisabled = () => false,
+    optionsFilter,
+    autoWidth,
+    placeholder,
+    optionLabel,
+    ...other
+  } = props;
+  const anchorRef = useRef();
+  const [anchorEl, setAnchorEl] = useState();
+  const [containerEl, setContainerEl] = useState();
+  const isMounted = useIsMounted();
+  const isControlled = Boolean(selectedOptions);
+  const [availableItems, setAvailableItems] = useState(options);
+  const disabledItems = useMemo(() => options.filter(optionDisabled), [options, optionDisabled]);
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, multiple ? multiSelect : selectTokens);
+  let placeholderText = placeholder;
+  let multipleSelectionProps = {
+    initialSelectedItems: multiple ? initialSelectedOptions : initialSelectedOptions[0] ? [initialSelectedOptions[0]] : [],
+    onSelectedItemsChange: changes => {
+      if (onOptionsChange) {
+        onOptionsChange(changes);
+      }
+    }
+  };
+
+  if (isControlled) {
+    multipleSelectionProps = { ...multipleSelectionProps,
+      selectedItems: selectedOptions
+    };
+  }
+
+  const {
+    getDropdownProps,
+    addSelectedItem,
+    removeSelectedItem,
+    selectedItems,
+    reset: resetSelection,
+    setSelectedItems
+  } = useMultipleSelection(multipleSelectionProps);
+  const getLabel = useCallback(item => {
+    if (!item) {
+      return '';
+    }
+
+    if (typeof item === 'object') {
+      if (optionLabel) {
+        return optionLabel(item);
+      } else {
+        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]);
+  let comboBoxProps = {
+    items: availableItems,
+    initialSelectedItem: initialSelectedOptions[0],
+    itemToString: getLabel,
+    onInputValueChange: _ref7 => {
+      let {
+        inputValue
+      } = _ref7;
+      setAvailableItems(options.filter(item => {
+        if (optionsFilter) {
+          return optionsFilter(item, inputValue);
+        }
+
+        return getLabel(item).toLowerCase().includes(inputValue.toLowerCase());
+      }));
+    },
+    onIsOpenChange: _ref8 => {
+      let {
+        selectedItem
+      } = _ref8;
+
+      // Show all options when single select is reopened with a selected item
+      if (availableItems.length === 1 && selectedItem === availableItems[0]) {
+        setAvailableItems(options);
+      }
+    },
+    onStateChange: _ref9 => {
+      let {
+        type,
+        selectedItem
+      } = _ref9;
+
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputChange:
+          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);
+            } else {
+              setSelectedItems([selectedItem]);
+            }
+          }
+
+          break;
+      }
+    },
+    stateReducer: (_, actionAndChanges) => {
+      const {
+        changes,
+        type
+      } = actionAndChanges;
+
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputKeyDownArrowDown:
+        case useCombobox.stateChangeTypes.InputKeyDownHome:
+          return { ...changes,
+            highlightedIndex: findNextIndex({
+              index: changes.highlightedIndex,
+              availableItems,
+              optionDisabled
+            })
+          };
+
+        case useCombobox.stateChangeTypes.InputKeyDownArrowUp:
+        case useCombobox.stateChangeTypes.InputKeyDownEnd:
+          return { ...changes,
+            highlightedIndex: findPrevIndex({
+              index: changes.highlightedIndex,
+              availableItems,
+              optionDisabled
+            })
+          };
+
+        default:
+          return changes;
+      }
+    }
+  };
+
+  if (isControlled && !multiple) {
+    comboBoxProps = { ...comboBoxProps,
+      selectedItem: selectedOptions[0]
+    };
+  }
+
+  if (multiple) {
+    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : "".concat(selectedItems.length, "/").concat(options.length - disabledItems.length, " selected");
+    comboBoxProps = { ...comboBoxProps,
+      selectedItem: null,
+      stateReducer: (state, actionAndChanges) => {
+        const {
+          changes,
+          type
+        } = actionAndChanges;
+
+        switch (type) {
+          case useCombobox.stateChangeTypes.InputKeyDownArrowDown:
+          case useCombobox.stateChangeTypes.InputKeyDownHome:
+            return { ...changes,
+              highlightedIndex: findNextIndex({
+                index: changes.highlightedIndex,
+                availableItems,
+                optionDisabled
+              })
+            };
+
+          case useCombobox.stateChangeTypes.InputKeyDownArrowUp:
+          case useCombobox.stateChangeTypes.InputKeyDownEnd:
+            return { ...changes,
+              highlightedIndex: findPrevIndex({
+                index: changes.highlightedIndex,
+                availableItems,
+                optionDisabled
+              })
+            };
+
+          case useCombobox.stateChangeTypes.InputKeyDownEnter:
+          case useCombobox.stateChangeTypes.ItemClick:
+            return { ...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,
+              inputValue: '' // don't add the item string as input value at selection.
+
+            };
+
+          default:
+            return changes;
+        }
+      }
+    };
+  }
+
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    getComboboxProps,
+    highlightedIndex,
+    getItemProps,
+    openMenu,
+    inputValue,
+    reset: resetCombobox
+  } = useCombobox(comboBoxProps);
+  useEffect(() => {
+    if (anchorRef.current) {
+      setAnchorEl(anchorRef.current);
+    }
+
+    if (isControlled) {
+      setSelectedItems(selectedOptions);
+    }
+
+    return () => {
+      setAnchorEl(null);
+      setContainerEl(null);
+    };
+  }, [anchorRef, isControlled, isOpen, selectedOptions, setSelectedItems]);
+  const {
+    styles,
+    attributes
+  } = usePopper({
+    anchorEl,
+    popperEl: containerEl,
+    placement: 'bottom-start',
+    offset: 4,
+    autoWidth
+  });
+
+  const openSelect = () => {
+    if (!isOpen && !(disabled || readOnly)) {
+      openMenu();
+    }
+  };
+
+  const clear = () => {
+    resetCombobox();
+    resetSelection();
+  };
+
+  const showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly;
+  const selectedItemsLabels = useMemo(() => selectedItems.map(getLabel), [selectedItems, getLabel]);
+
+  const optionsList = /*#__PURE__*/jsx(StyledList, { ...getMenuProps({
+      ref: setContainerEl,
+      style: styles.popper,
+      'aria-multiselectable': multiple ? 'true' : null,
+      ...attributes.popper
+    }, {
+      suppressRefError: true
+    }),
+    children: !isOpen ? null : availableItems.map((item, index) => {
+      const label = getLabel(item);
+      const isDisabled = optionDisabled(item);
+      const isSelected = selectedItemsLabels.includes(label);
+      return /*#__PURE__*/jsx(AutocompleteOption, {
+        value: label,
+        multiple: multiple,
+        highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
+        isSelected: isSelected,
+        isDisabled: isDisabled,
+        ...getItemProps({
+          item,
+          index,
+          disabled
+        })
+      }, label);
+    })
+  });
+
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxs(Container, {
+      className: className,
+      ref: ref,
+      children: [/*#__PURE__*/jsx(Label, { ...getLabelProps(),
+        label: label,
+        meta: meta,
+        disabled: disabled
+      }), /*#__PURE__*/jsxs(Container, { ...getComboboxProps(),
+        children: [/*#__PURE__*/jsx(StyledInput, { ...getInputProps( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          getDropdownProps({
+            preventKeyAction: multiple ? isOpen : undefined,
+            disabled,
+            ref: anchorRef
+          })),
+          placeholder: placeholderText,
+          readOnly: readOnly,
+          onFocus: openSelect,
+          onClick: openSelect,
+          ...other
+        }), showClearButton && /*#__PURE__*/jsx(StyledButton, {
+          variant: "ghost_icon",
+          disabled: disabled || readOnly,
+          "aria-label": 'clear options',
+          title: "clear",
+          onClick: clear,
+          style: {
+            right: 32
+          },
+          children: /*#__PURE__*/jsx(Icon, {
+            data: close,
+            size: 16
+          })
+        }), /*#__PURE__*/jsx(StyledButton, {
+          variant: "ghost_icon",
+          ...getToggleButtonProps({
+            disabled: disabled || readOnly
+          }),
+          "aria-label": 'toggle options',
+          title: "open",
+          children: !readOnly && /*#__PURE__*/jsx(Icon, {
+            data: isOpen ? arrow_drop_up : arrow_drop_down
+          })
+        })]
+      }), disablePortal ? optionsList : !isMounted ? null : /*#__PURE__*/createPortal(optionsList, document.body)]
+    })
+  });
+}
+
+const Autocomplete = /*#__PURE__*/forwardRef(AutocompleteInner);
+
+export { Autocomplete };

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

@@ -0,0 +1,103 @@
+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 selectTokens = {
+  background: colors.ui.background__default.rgba,
+  boxShadow,
+  minHeight: straight.minHeight,
+  spacings: {
+    top: spacingMedium,
+    right: spacingLarge,
+    bottom: spacingMedium,
+    left: spacingLarge
+  },
+  typography: { ...typography.navigation.menu_title,
+    color: colors.text.static_icons__default.rgba
+  },
+  border: {
+    type: 'border',
+    radius: borderRadius
+  },
+  states: {
+    hover: {
+      background: colors.ui.background__medium.rgba
+    },
+    active: {
+      background: colors.interactive.primary__selected_highlight.rgba
+    },
+    disabled: {
+      typography: {
+        color: colors.interactive.disabled__text.rgba
+      }
+    }
+  },
+  entities: {
+    button: {
+      height: '24px',
+      spacings: {
+        left: spacingSmall,
+        right: spacingSmall,
+        top: '6px'
+      }
+    }
+  },
+  modes: {
+    compact: {
+      spacings: {
+        left: spacingSmall,
+        right: spacingSmall,
+        top: spacingSmall,
+        bottom: spacingSmall
+      },
+      entities: {
+        button: {
+          spacings: {
+            left: spacingSmall,
+            right: spacingSmall,
+            top: '0'
+          }
+        }
+      }
+    }
+  }
+};
+const multiSelect = mergeDeepRight(selectTokens, {
+  spacings: {
+    top: '0',
+    bottom: '0',
+    left: spacingMediumSmall,
+    right: spacingLarge
+  },
+  modes: {
+    compact: {
+      spacings: {
+        top: xx_small,
+        bottom: '0'
+      }
+    }
+  }
+});
+
+export { multiSelect, selectTokens };

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

@@ -0,0 +1,52 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { List } from '../List/index.js';
+import { Checkbox } from '../Checkbox/Checkbox.js';
+import { typographyTemplate, spacingsTemplate } from '@equinor/eds-utils';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const StyledListItem = styled(List.Item).withConfig({
+  displayName: "Option__StyledListItem",
+  componentId: "sc-1ly11zu-0"
+})(_ref => {
+  let {
+    theme,
+    highlighted,
+    active,
+    isdisabled
+  } = _ref;
+  const backgroundColor = highlighted === 'true' ? theme.states.hover.background : active === 'true' ? theme.states.active.background : theme.background;
+  return css(["display:flex;align-items:center;margin:0;list-style:none;background-color:", ";user-select:none;cursor:", ";", " ", " ", ""], backgroundColor, highlighted === 'true' ? 'pointer' : 'default', typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), isdisabled === 'true' ? css(["color:", ";"], theme.states.disabled.typography.color) : '');
+});
+const AutocompleteOption = /*#__PURE__*/forwardRef(function AutocompleteOption(_ref2, ref) {
+  let {
+    value,
+    multiple,
+    isSelected,
+    isDisabled,
+    onClick,
+    'aria-selected': ariaSelected,
+    ...other
+  } = _ref2;
+  return /*#__PURE__*/jsxs(StyledListItem, {
+    ref: ref,
+    isdisabled: isDisabled ? 'true' : 'false',
+    "aria-hidden": isDisabled,
+    active: !multiple && isSelected ? 'true' : 'false',
+    onClick: e => !isDisabled && onClick(e),
+    "aria-selected": multiple ? isSelected : ariaSelected,
+    ...other,
+    children: [multiple && /*#__PURE__*/jsx(Checkbox, {
+      disabled: isDisabled,
+      checked: isSelected,
+      value: value,
+      onChange: () => {
+        return null;
+      }
+    }), /*#__PURE__*/jsx("span", {
+      children: value
+    })]
+  });
+});
+
+export { AutocompleteOption };

package/dist/esm/components/Card/Card.js

@@ -10,7 +10,7 @@ const {
 const StyledCard = styled.div.withConfig({
   displayName: "Card__StyledCard",
   componentId: "sc-bjucjn-0"
-})(["height:fit-content;width:100%;position:relative;background-color:", ";box-sizing:border-box;display:grid;grid-gap:16px;grid-auto-columns:auto;align-items:center;align-content:start;cursor:", ";", ";"], _ref => {
+})(["width:100%;position:relative;background-color:", ";box-sizing:border-box;display:flex;flex-direction:column;grid-gap:16px;cursor:", ";", ";"], _ref => {
   let {
     background
   } = _ref;

package/dist/esm/components/Card/CardActions.js

@@ -10,7 +10,7 @@ const {
 const StyledCardActions = styled.div.withConfig({
   displayName: "CardActions__StyledCardActions",
   componentId: "sc-1d5vskp-0"
-})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], _ref => {
+})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";margin-top:auto;:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], _ref => {
   let {
     justifyContent
   } = _ref;

package/dist/esm/components/Popover/Popover.js

@@ -59,12 +59,12 @@ const Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
   const [arrowRef, setArrowRef] = useState(null);
   const popoverRef = useCombinedRefs(ref, setPopperEl);
   useOutsideClick(popperEl, e => {
-    if (open && onClose !== null && anchorEl && !anchorEl.contains(e.target)) {
+    if (open && onClose && anchorEl && !anchorEl.contains(e.target)) {
       onClose();
     }
   });
   useGlobalKeyPress('Escape', () => {
-    if (onClose !== null && open) {
+    if (onClose && open) {
       onClose();
     }
   });