@equinor/eds-core-react 0.15.0 → 0.16.0

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

@@ -0,0 +1,202 @@
+import { forwardRef, useState } from 'react';
+import { useMultipleSelection, useCombobox } from 'downshift';
+import { Icon } from '../../Icon/index.js';
+import { CheckboxInput } from '../../Checkbox/Input.js';
+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 { 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) {
+  const isControlled = selectedOptions ? true : false;
+  const [inputValue, setInputValue] = useState('');
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, multiSelect);
+  let multipleSelectionProps = {
+    initialSelectedItems: initialSelectedItems,
+    onSelectedItemsChange: changes => {
+      if (handleSelectedItemsChange) {
+        handleSelectedItemsChange(changes);
+      }
+    }
+  };
+
+  if (isControlled) {
+    multipleSelectionProps = { ...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,
+    selectedItem: null,
+    items: getFilteredItems(items),
+    stateReducer: (state, actionAndChanges) => {
+      const {
+        changes,
+        type
+      } = actionAndChanges;
+
+      switch (type) {
+        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;
+      }
+    },
+    onStateChange: ({
+      inputValue,
+      type,
+      selectedItem
+    }) => {
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputChange:
+          setInputValue(inputValue);
+          break;
+
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+        case useCombobox.stateChangeTypes.InputBlur:
+          if (selectedItem) {
+            setInputValue('');
+            selectedItems.includes(selectedItem) ? removeSelectedItem(selectedItem) : addSelectedItem(selectedItem);
+          }
+
+          break;
+      }
+    }
+  });
+  const placeholderText = items.length > 0 ? "".concat(selectedItems.length, "/").concat(items.length, " selected") : '';
+
+  const openSelect = () => {
+    if (!isOpen && !(disabled || readOnly)) {
+      openMenu();
+    }
+  };
+
+  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(StyledInputWrapper, { ...getComboboxProps(),
+        children: [/*#__PURE__*/jsx(PaddedInput, { ...getInputProps(getDropdownProps({
+            preventKeyAction: isOpen,
+            disabled: disabled
+          })),
+          placeholder: placeholderText,
+          readOnly: readOnly,
+          onFocus: openSelect,
+          ...other
+        }), Boolean(selectedItems.length || inputValue) && /*#__PURE__*/jsx(StyledButton, {
+          variant: "ghost_icon",
+          disabled: disabled || readOnly,
+          "aria-label": 'clear options',
+          title: "clear",
+          onClick: reset,
+          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: /*#__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,
+            disabled: disabled
+          }),
+          children: [/*#__PURE__*/jsx(CheckboxInput, {
+            checked: selectedItems.includes(item),
+            value: item,
+            onChange: () => {
+              return null;
+            }
+          }), /*#__PURE__*/jsx("span", {
+            children: item
+          })]
+        }, "".concat(item)))
+      })]
+    })
+  });
+});
+
+export { MultiSelect };

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

@@ -0,0 +1,66 @@
+import { forwardRef } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { nativeselect } from './NativeSelect.tokens.js';
+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({
+  displayName: "NativeSelect__Container",
+  componentId: "sc-1c1ogya-0"
+})(["min-width:100px;width:100%;"]);
+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) {
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, nativeselect);
+  const containerProps = {
+    ref,
+    className
+  };
+  const selectProps = {
+    ref: selectRef,
+    id,
+    disabled,
+    multiple,
+    ...other
+  };
+  const labelProps = {
+    htmlFor: id,
+    label,
+    meta
+  };
+  const 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: children
+      })]
+    })
+  });
+});
+
+export { NativeSelect };

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

@@ -0,0 +1,66 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors,
+  spacings: {
+    comfortable: {
+      small,
+      x_small
+    }
+  },
+  typography,
+  shape
+} = tokens;
+const nativeselect = {
+  background: colors.ui.background__light.rgba,
+  typography: { ...typography.input.text,
+    color: colors.text.static_icons__default.rgba
+  },
+  entities: {
+    input: {
+      spacings: {
+        left: small,
+        right: small,
+        top: '6px',
+        bottom: '6px'
+      }
+    },
+    icon: {
+      width: '24px'
+    }
+  },
+  boxShadow: 'inset 0 -1px 0 0 ' + colors.text.static_icons__tertiary.rgba,
+  states: {
+    focus: {
+      outline: {
+        type: 'outline',
+        width: '2px',
+        color: colors.interactive.primary__resting.rgba,
+        style: 'solid',
+        offset: '0px'
+      }
+    },
+    disabled: {
+      typography: {
+        color: colors.interactive.disabled__text.rgba
+      }
+    }
+  },
+  modes: {
+    compact: {
+      minHeight: shape._modes.compact.straight.minHeight,
+      entities: {
+        input: {
+          spacings: {
+            left: x_small,
+            right: x_small,
+            top: '0',
+            bottom: '0'
+          }
+        }
+      }
+    }
+  }
+};
+
+export { nativeselect };

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

@@ -0,0 +1,98 @@
+import { tokens } from '@equinor/eds-tokens';
+import * as R from 'ramda';
+
+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 = {
+  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
+    }
+  },
+  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 = R.mergeDeepRight(select, {
+  spacings: {
+    top: '0',
+    bottom: '0',
+    left: spacingMediumSmall,
+    right: spacingLarge
+  },
+  modes: {
+    compact: {
+      spacings: {
+        top: xx_small,
+        bottom: '0'
+      }
+    }
+  }
+});
+
+export { multiSelect, select };

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

@@ -0,0 +1,145 @@
+import { forwardRef, useState, useEffect } from 'react';
+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 { 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) {
+  const [inputItems, setInputItems] = useState(items);
+  const isControlled = selectedOption !== undefined ? true : false;
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, select);
+  useEffect(() => {
+    setInputItems(items);
+  }, [items]);
+  let comboboxProps = {
+    items: inputItems,
+    onSelectedItemChange: handleSelectedItemChange,
+    onInputValueChange: ({
+      inputValue
+    }) => {
+      setInputItems(items.filter(item => item.toLowerCase().includes(inputValue.toLowerCase())));
+    },
+    onIsOpenChange: ({
+      selectedItem
+    }) => {
+      if (inputItems.length === 1 && selectedItem === inputItems[0]) {
+        setInputItems(items);
+      }
+    },
+    initialSelectedItem
+  };
+
+  if (isControlled) {
+    comboboxProps = { ...comboboxProps,
+      selectedItem: selectedOption
+    };
+  }
+
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    getComboboxProps,
+    highlightedIndex,
+    getItemProps,
+    openMenu,
+    selectedItem,
+    reset,
+    inputValue
+  } = useCombobox(comboboxProps);
+
+  const openSelect = () => {
+    if (!isOpen && !(disabled || readOnly)) {
+      openMenu();
+    }
+  };
+
+  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(StyledInputWrapper, { ...getComboboxProps(),
+        children: [/*#__PURE__*/jsx(PaddedInput, { ...getInputProps({
+            disabled: disabled
+          }),
+          readOnly: readOnly,
+          onFocus: openSelect,
+          onClick: openSelect,
+          ...other
+        }), Boolean(inputValue) && /*#__PURE__*/jsx(StyledButton, {
+          variant: "ghost_icon",
+          disabled: disabled || readOnly,
+          "aria-label": 'clear options',
+          title: "clear",
+          onClick: reset,
+          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: /*#__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,
+            disabled: disabled
+          }),
+          children: item
+        }, "".concat(item)))
+      })]
+    })
+  });
+});
+
+export { SingleSelect };

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

@@ -0,0 +1,54 @@
+import { List } from '../List/index.js';
+import styled, { css } from 'styled-components';
+import { select } from './Select.tokens.js';
+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 {
+  entities: {
+    button: buttonToken
+  }
+} = select;
+const Container = styled.div.withConfig({
+  displayName: "commonStyles__Container",
+  componentId: "sc-v98ajk-0"
+})(["position:relative;"]);
+const 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({
+  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({
+  displayName: "commonStyles__StyledListItem",
+  componentId: "sc-v98ajk-3"
+})(({
+  theme,
+  highlighted,
+  active
+}) => {
+  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
+    }
+  }
+}) => {
+  return css(["position:absolute;right:", ";height:", ";width:", ";top:", ";"], button.spacings.right, button.height, button.height, button.spacings.top);
+});
+const StyledInputWrapper = styled.div.withConfig({
+  displayName: "commonStyles__StyledInputWrapper",
+  componentId: "sc-v98ajk-5"
+})(["position:relative;"]);
+
+export { Container, PaddedInput, StyledButton, StyledInputWrapper, StyledList, StyledListItem };

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

@@ -0,0 +1,60 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { clear } from '@equinor/eds-icons';
+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 {
+  background,
+  spacings,
+  border
+} = comfortable;
+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));
+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 props = { ...rest,
+    ref,
+    width: variants[variant]
+  }; // Controller must set open={false} when pressing the close button
+
+  return open && /*#__PURE__*/jsxs(StyledSideSheet, { ...props,
+    id: "side-sheet",
+    children: [/*#__PURE__*/jsxs(Header, {
+      children: [/*#__PURE__*/jsx(Typography, {
+        variant: "h2",
+        children: title
+      }), /*#__PURE__*/jsx(Button, {
+        variant: "ghost_icon",
+        onClick: onClose,
+        title: "Close",
+        "aria-label": "Close sidesheet",
+        children: /*#__PURE__*/jsx(Icon, {
+          name: "clear",
+          data: clear
+        })
+      })]
+    }), children]
+  });
+});
+
+export { SideSheet };