@equinor/eds-core-react 0.15.0 → 0.17.0

package/dist/esm/components/Search/Search.js

@@ -0,0 +1,205 @@
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { search as search$1, close } from '@equinor/eds-icons';
+import { search } from './Search.tokens.js';
+import { Icon } from '../Icon/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
+import { setReactInputValue } from '../../utils/setReactInputValue.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
+import { Input } from '../Input/Input.js';
+import { Button } from '../Button/Button.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { useToken } from '../../hooks/useToken.js';
+
+const Container = styled.span.withConfig({
+  displayName: "Search__Container",
+  componentId: "sc-v8l23u-0"
+})(({
+  disabled,
+  isFocused,
+  theme
+}) => {
+  const {
+    height,
+    spacings,
+    background,
+    border,
+    clickbound,
+    entities: {
+      icon,
+      placeholder
+    },
+    states
+  } = theme;
+  return css(["position:relative;background:", ";width:100%;height:", ";display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;box-sizing:border-box;", " z-index:0;svg{fill:", ";}", " ", " &::placeholder{color:", ";}", " &::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}"], background, height, bordersTemplate(border), icon.typography.color, spacingsTemplate(spacings), isFocused && bordersTemplate(states.focus.border), placeholder.typography.color, disabled ? css(["cursor:not-allowed;"]) : css(["@media (hover:hover) and (pointer:fine){&:hover{", " cursor:text;}}"], bordersTemplate(states.focus.border)), clickbound.offset, clickbound.height);
+});
+const SearchInput = styled(Input).withConfig({
+  displayName: "Search__SearchInput",
+  componentId: "sc-v8l23u-1"
+})(({
+  theme,
+  disabled
+}) => {
+  return css(["height:calc(", " - 2px);align-self:start;box-shadow:unset;&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " &:focus{outline:none;}", ""], theme.height, typographyTemplate(theme.typography), disabled && css(["cursor:not-allowed;"]));
+});
+const InsideButton = styled(Button).withConfig({
+  displayName: "Search__InsideButton",
+  componentId: "sc-v8l23u-2"
+})(({
+  theme,
+  isActive
+}) => {
+  const {
+    entities: {
+      button
+    }
+  } = theme;
+  return css(["visibility:hidden;position:absolute;right:", ";height:", ";width:", ";", ""], button.spacings.right, button.height, button.width, isActive && css(["visibility:visible;"]));
+});
+const Search = /*#__PURE__*/forwardRef(function Search({
+  onChange,
+  defaultValue = '',
+  value,
+  className = '',
+  disabled = false,
+  onBlur,
+  onFocus,
+  ...rest
+}, ref) {
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, search);
+  const isControlled = typeof value !== 'undefined';
+  const isActive = isControlled && value !== '' || defaultValue !== '';
+  const inputRef = useRef(null);
+  const [state, setState] = useState({
+    isActive,
+    isFocused: false
+  });
+  useEffect(() => {
+    setState(prevState => ({ ...prevState,
+      isActive
+    }));
+  }, [value, defaultValue, isActive]);
+
+  const handleOnClick = () => {
+    const inputEl = inputRef.current;
+    inputEl.focus();
+  };
+
+  const handleFocus = () => setState(prevState => ({ ...prevState,
+    isFocused: true
+  }));
+
+  const handleBlur = () => setState(prevState => ({ ...prevState,
+    isFocused: false
+  }));
+
+  const handleOnChange = event => {
+    setIsActive(event.target.value);
+  };
+
+  const handleOnDelete = () => {
+    const input = inputRef.current;
+    const clearedValue = '';
+    setReactInputValue(input, clearedValue);
+    setState(prevState => ({ ...prevState,
+      isActive: false
+    }));
+  };
+
+  const setIsActive = newValue => setState(prevState => ({ ...prevState,
+    isActive: newValue !== ''
+  }));
+  /** Applying props for controlled vs. uncontrolled scnarios */
+
+
+  const applyControllingProps = (props, value, defaultValue) => {
+    if (isControlled) {
+      return { ...props,
+        value
+      };
+    }
+
+    return { ...props,
+      defaultValue
+    };
+  };
+
+  const {
+    isFocused
+  } = state;
+  const size = 24;
+  const containerProps = {
+    isFocused,
+    className,
+    disabled,
+    role: 'search',
+    'aria-label': rest['aria-label'],
+    onClick: handleOnClick
+  };
+  const inputProps = applyControllingProps({ ...rest,
+    disabled,
+    ref: useCombinedRefs(inputRef, ref),
+    type: 'search',
+    role: 'searchbox',
+    'aria-label': 'search input',
+    onBlur: e => {
+      handleBlur();
+
+      if (onBlur) {
+        onBlur(e);
+      }
+    },
+    onFocus: e => {
+      handleFocus();
+
+      if (onFocus) {
+        onFocus(e);
+      }
+    },
+    onChange: e => {
+      handleOnChange(e);
+
+      if (onChange) {
+        onChange(e);
+      }
+    }
+  }, value, defaultValue);
+  const clearButtonProps = {
+    isActive: state.isActive,
+    onClick: e => {
+      e.stopPropagation();
+
+      if (state.isActive) {
+        handleOnDelete();
+      }
+    }
+  };
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxs(Container, { ...containerProps,
+      children: [/*#__PURE__*/jsx(Icon, {
+        data: search$1,
+        "aria-hidden": true,
+        size: size
+      }), /*#__PURE__*/jsx(SearchInput, { ...inputProps
+      }), /*#__PURE__*/jsx(InsideButton, { ...clearButtonProps,
+        "aria-label": 'clear search',
+        title: "clear",
+        variant: "ghost_icon",
+        children: /*#__PURE__*/jsx(Icon, {
+          data: close,
+          size: 16
+        })
+      })]
+    })
+  });
+}); // Search.displayName = 'eds-search'
+
+export { Search };

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

@@ -0,0 +1,107 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    ui: {
+      background__light: {
+        rgba: background
+      }
+    },
+    interactive: {
+      primary__hover_alt: {
+        rgba: primaryHoverAlt
+      },
+      primary__resting: {
+        rgba: primaryColor
+      }
+    },
+    text: {
+      static_icons__tertiary: {
+        rgba: placeholderColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      small
+    }
+  },
+  typography: {
+    input: {
+      text: typography
+    }
+  },
+  shape
+} = tokens;
+const search = {
+  background,
+  typography,
+  height: '36px',
+  clickbound: {
+    offset: {
+      top: '6px'
+    },
+    height: '48px'
+  },
+  spacings: {
+    left: small,
+    right: small
+  },
+  border: {
+    type: 'border',
+    width: '1px',
+    style: 'solid',
+    color: 'transparent'
+  },
+  states: {
+    focus: {
+      border: {
+        type: 'border',
+        width: '1px',
+        style: 'solid',
+        color: primaryColor
+      }
+    }
+  },
+  entities: {
+    placeholder: {
+      typography: {
+        color: placeholderColor
+      }
+    },
+    icon: {
+      typography: {
+        color: placeholderColor
+      },
+      border: {
+        type: 'border',
+        radius: '50%'
+      },
+      states: {
+        hover: {
+          background: primaryHoverAlt
+        }
+      },
+      clickbound: {
+        offset: {
+          top: '6px'
+        },
+        height: '36px'
+      }
+    },
+    button: {
+      height: '24px',
+      width: '24px',
+      spacings: {
+        right: small
+      }
+    }
+  },
+  modes: {
+    compact: {
+      height: shape._modes.compact.straight.minHeight
+    }
+  }
+};
+
+export { search };

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

@@ -0,0 +1,208 @@
+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:
+          setInputValue('');
+
+          if (selectedItem) {
+            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();
+    }
+  };
+
+  const handleClear = () => {
+    reset();
+    setInputValue('');
+  };
+
+  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: handleClear,
+          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 };