@equinor/eds-core-react 2.1.0 → 2.2.0-beta.0

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

@@ -0,0 +1,12 @@
+import { createContext, use } from 'react';
+
+const AutocompleteContext = /*#__PURE__*/createContext(null);
+const useAutocompleteContext = () => {
+  const context = use(AutocompleteContext);
+  if (!context) {
+    throw new Error('Autocomplete compound components must be used within an Autocomplete component');
+  }
+  return context;
+};
+
+export { AutocompleteContext, useAutocompleteContext };

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

@@ -0,0 +1,21 @@
+import { useAutocompleteContext } from './AutocompleteContext.js';
+import { StyledListItem, AutocompleteOptionLabel } from './Option.js';
+import { jsx } from 'react/jsx-runtime';
+
+function EmptyOption() {
+  const {
+    noOptionsText
+  } = useAutocompleteContext();
+  return /*#__PURE__*/jsx(StyledListItem, {
+    $isdisabled: "true",
+    $highlighted: "false",
+    "aria-hidden": true,
+    $active: "false",
+    children: /*#__PURE__*/jsx(AutocompleteOptionLabel, {
+      $multiline: false,
+      children: noOptionsText
+    })
+  });
+}
+
+export { EmptyOption };

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

@@ -0,0 +1,85 @@
+import { useRef } from 'react';
+import styled from 'styled-components';
+import { useAutocompleteContext } from './AutocompleteContext.js';
+import { RightAdornments } from './RightAdornments.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Chip } from '../Chip/Chip.js';
+import { Input } from '../Input/Input.js';
+
+const UnstyledInput = styled.input.withConfig({
+  displayName: "MultipleInput__UnstyledInput",
+  componentId: "sc-1evc1aa-0"
+})(["flex:1;min-width:6rem;font-size:1rem;border:none;padding:0;background:inherit;&:focus-visible{outline:none;}"]);
+const ChipContainer = styled.div.withConfig({
+  displayName: "MultipleInput__ChipContainer",
+  componentId: "sc-1evc1aa-1"
+})(["display:flex;flex-wrap:wrap;gap:0.5rem;height:100%;"]);
+const MultipleInput = () => {
+  const {
+    selectedItems,
+    selectionDisplay,
+    getLabel,
+    removeSelectedItem,
+    readOnly,
+    inputProps,
+    placeholderText,
+    variant,
+    hideClearButton,
+    restHtmlProps,
+    consolidatedEvents,
+    inputRef
+  } = useAutocompleteContext();
+  const chipRefs = useRef(new Map());
+  const handleChipRemove = (item, index, isKeyboardEvent) => {
+    if (isKeyboardEvent && selectedItems.length > 1) {
+      const isLastChip = index === selectedItems.length - 1;
+      const nextItem = selectedItems[isLastChip ? index - 1 : index + 1];
+      chipRefs.current.get(getLabel(nextItem))?.focus();
+    } else if (!isKeyboardEvent) {
+      inputRef.current?.focus();
+    }
+    removeSelectedItem(item);
+  };
+  const handleChipDelete = (item, index) => e => {
+    const isKeyboard = 'key' in e && e.key === 'Enter';
+    handleChipRemove(item, index, isKeyboard);
+  };
+  const handleChipClick = (item, index) => e => {
+    e.preventDefault();
+    e.stopPropagation();
+    handleChipRemove(item, index, false);
+  };
+  return /*#__PURE__*/jsx(Input, {
+    as: 'div',
+    variant: variant,
+    rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
+    rightAdornments: /*#__PURE__*/jsx(RightAdornments, {}),
+    readOnly: readOnly,
+    style: {
+      height: 'auto',
+      minHeight: '36px'
+    },
+    children: /*#__PURE__*/jsxs(ChipContainer, {
+      children: [selectionDisplay === 'chips' && selectedItems.map((item, index) => /*#__PURE__*/jsx(Chip, {
+        ref: el => {
+          if (el) chipRefs.current.set(getLabel(item), el);else chipRefs.current.delete(getLabel(item));
+        },
+        style: {
+          outline: '1px solid var(--eds-color-accent-12)'
+        },
+        onDelete: handleChipDelete(item, index),
+        onClick: handleChipClick(item, index),
+        disabled: readOnly,
+        children: getLabel(item)
+      }, getLabel(item))), /*#__PURE__*/jsx(UnstyledInput, {
+        ...restHtmlProps,
+        ...inputProps,
+        ...consolidatedEvents,
+        placeholder: placeholderText,
+        readOnly: readOnly
+      })]
+    })
+  });
+};
+
+export { MultipleInput };

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

@@ -1,6 +1,6 @@
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
 import { typographyTemplate, spacingsTemplate } from '@equinor/eds-utils';
+import styled, { css } from 'styled-components';
+import { useAutocompleteContext } from './AutocompleteContext.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 
@@ -25,36 +25,56 @@ const AutocompleteOptionLabel = styled.span.withConfig({
 }) => {
   return css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;@supports (-moz-appearance:none){overflow:", ";}"], spacingsTemplate(theme.entities.label.spacings), $multiline ? 'normal' : 'nowrap', $multiline ? 'initial' : 'hidden', $multiline ? 'initial' : 'clip');
 });
-function AutocompleteOptionInner(props, ref) {
+function Option({
+  indeterminate,
+  index,
+  item,
+  virtualItem
+}) {
   const {
-    value,
-    optionComponent,
     multiple,
-    isSelected,
-    indeterminate,
-    isDisabled,
+    availableItems,
+    highlightedIndex,
     multiline,
-    highlighted,
-    onClick,
-    'aria-selected': ariaSelected,
-    ...other
-  } = props;
+    optionDisabled,
+    selectedItemsLabels,
+    getLabel,
+    getItemProps,
+    optionComponent: _optionComponent,
+    rowVirtualizer
+  } = useAutocompleteContext();
+  const isDisabled = optionDisabled(item);
+  const label = getLabel(item);
+  const isSelected = selectedItemsLabels.includes(label);
+  const optionComponent = _optionComponent?.(item, isSelected);
+  const highlighted = highlightedIndex === index && !isDisabled ? 'true' : 'false';
+  const itemProps = getItemProps({
+    ...(multiline && {
+      ref: rowVirtualizer.measureElement
+    }),
+    item,
+    index,
+    style: {
+      transform: `translateY(${virtualItem.start}px)`,
+      ...(!multiline && {
+        height: `${virtualItem.size}px`
+      })
+    }
+  });
   return /*#__PURE__*/jsxs(StyledListItem, {
-    ref: ref,
     $isdisabled: isDisabled ? 'true' : 'false',
     $highlighted: highlighted,
     "aria-hidden": isDisabled,
     $active: !multiple && isSelected ? 'true' : 'false',
-    onClick: e => {
-      !isDisabled && onClick(e);
-    },
-    "aria-selected": multiple ? isSelected : ariaSelected,
-    ...other,
+    "aria-setsize": availableItems.length,
+    "data-index": index,
+    "aria-posinset": index + 1,
+    ...itemProps,
     children: [multiple && /*#__PURE__*/jsx(Checkbox, {
       disabled: isDisabled,
       checked: isSelected,
       indeterminate: indeterminate,
-      value: value,
+      value: label,
       onChange: () => {
         return null;
       }
@@ -62,10 +82,9 @@ function AutocompleteOptionInner(props, ref) {
       children: optionComponent
     }) : /*#__PURE__*/jsx(AutocompleteOptionLabel, {
       $multiline: multiline,
-      children: value
+      children: label
     })]
   });
 }
-const AutocompleteOption = /*#__PURE__*/forwardRef(AutocompleteOptionInner);
 
-export { AutocompleteOption, AutocompleteOptionLabel, StyledListItem };
+export { AutocompleteOptionLabel, Option, StyledListItem };

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

@@ -0,0 +1,124 @@
+import { useIsomorphicLayoutEffect, bordersTemplate } from '@equinor/eds-utils';
+import { useInteractions, autoUpdate } from '@floating-ui/react';
+import { useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { List } from '../List/index.js';
+import { AddNewOption } from './AddNewOption.js';
+import { AllSymbol, AddSymbol } from './Autocomplete.js';
+import { useAutocompleteContext } from './AutocompleteContext.js';
+import { Option } from './Option.js';
+import { SelectAllOption } from './SelectAllOption.js';
+import { handleListFocus } from './utils.js';
+import { EmptyOption } from './EmptyOption.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const OptionList = ({
+  refs,
+  strategy,
+  x,
+  y,
+  update
+}) => {
+  const {
+    getFloatingProps
+  } = useInteractions([]);
+  const {
+    isOpen,
+    getMenuProps,
+    multiple,
+    scrollContainer,
+    dropdownHeight,
+    availableItems,
+    noOptionsText,
+    rowVirtualizer,
+    onAddNewOption
+  } = useAutocompleteContext();
+  useEffect(() => {
+    if (refs.reference.current && refs.floating.current && isOpen) {
+      return autoUpdate(refs.reference.current, refs.floating.current, update);
+    }
+  }, [refs.reference, refs.floating, update, isOpen]);
+
+  // MARK: popover toggle
+  useIsomorphicLayoutEffect(() => {
+    if (isOpen) {
+      refs.floating.current?.showPopover();
+    } else {
+      refs.floating.current?.hidePopover();
+    }
+  }, [isOpen, refs.floating]);
+  const showNoOptions = isOpen && !availableItems.length && noOptionsText.length > 0;
+  const floatingProps = getFloatingProps({
+    ref: refs.setFloating,
+    onFocus: handleListFocus,
+    style: {
+      position: strategy,
+      top: y || 0,
+      left: x || 0
+    }
+  });
+  const menuProps = getMenuProps({
+    'aria-multiselectable': multiple ? 'true' : null,
+    ref: scrollContainer,
+    style: {
+      maxHeight: `${dropdownHeight}px`
+    }
+  }, {
+    suppressRefError: true
+  });
+  return /*#__PURE__*/jsx(StyledPopover, {
+    popover: "manual",
+    ...floatingProps,
+    children: /*#__PURE__*/jsxs(StyledList, {
+      ...menuProps,
+      children: [showNoOptions && /*#__PURE__*/jsx(AutocompleteNoOptions, {}), isOpen && /*#__PURE__*/jsx("li", {
+        role: "presentation",
+        style: {
+          height: `${rowVirtualizer.getTotalSize()}px`,
+          margin: '0',
+          gridArea: '1 / -1'
+        }
+      }, "total-size"), !isOpen ? null : rowVirtualizer.getVirtualItems().map(virtualItem => {
+        const index = virtualItem.index;
+        const item = availableItems[index];
+        if (item === AllSymbol) {
+          return /*#__PURE__*/jsx(SelectAllOption, {
+            item: item,
+            index: index
+          }, "select-all");
+        }
+        if (item === AddSymbol && onAddNewOption) {
+          return /*#__PURE__*/jsx(AddNewOption, {
+            item: item,
+            index: index
+          }, "add-item");
+        }
+        return /*#__PURE__*/jsx(Option, {
+          item: item,
+          virtualItem: virtualItem,
+          index: index
+        }, virtualItem.key);
+      })]
+    })
+  });
+};
+const StyledPopover = styled('div').withConfig({
+  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
+}).withConfig({
+  displayName: "OptionList__StyledPopover",
+  componentId: "sc-t6tp7k-0"
+})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;&::backdrop{background-color:transparent;}"]);
+const StyledList = styled(List).withConfig({
+  displayName: "OptionList__StyledList",
+  componentId: "sc-t6tp7k-1"
+})(({
+  theme
+}) => css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;@supports (-moz-appearance:none){scrollbar-width:thin;}"], theme.background, theme.boxShadow, bordersTemplate(theme.border)));
+const AutocompleteNoOptions = styled(EmptyOption).withConfig({
+  displayName: "OptionList__AutocompleteNoOptions",
+  componentId: "sc-t6tp7k-2"
+})(({
+  theme
+}) => css(["color:", ";"], theme.entities.noOptions.typography.color));
+
+export { OptionList };

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

@@ -0,0 +1,48 @@
+import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
+import { Icon } from '../Icon/index.js';
+import { Progress } from '../Progress/index.js';
+import { useAutocompleteContext } from './AutocompleteContext.js';
+import { StyledButton } from './Autocomplete.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+const RightAdornments = () => {
+  const {
+    readOnly,
+    selectedItems,
+    inputValue,
+    loading,
+    disabled,
+    getToggleButtonProps,
+    hideClearButton,
+    isOpen,
+    clear
+  } = useAutocompleteContext();
+  const showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly && !hideClearButton;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [loading && /*#__PURE__*/jsx(Progress.Circular, {
+      size: 16
+    }), showClearButton && /*#__PURE__*/jsx(StyledButton, {
+      variant: "ghost_icon",
+      disabled: disabled || readOnly,
+      "aria-label": 'clear options',
+      title: "clear",
+      onClick: clear,
+      children: /*#__PURE__*/jsx(Icon, {
+        data: close,
+        size: 16
+      })
+    }), !readOnly && /*#__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
+      })
+    })]
+  });
+};
+
+export { RightAdornments };

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

@@ -0,0 +1,63 @@
+import { useAutocompleteContext } from './AutocompleteContext.js';
+import { StyledListItem, AutocompleteOptionLabel } from './Option.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Checkbox } from '../Checkbox/Checkbox.js';
+
+function SelectAllOption({
+  item,
+  index,
+  ref
+}) {
+  const {
+    availableItems,
+    allSelectedState,
+    highlightedIndex,
+    optionDisabled,
+    multiline,
+    getItemProps,
+    rowVirtualizer
+  } = useAutocompleteContext();
+  const value = 'Select all';
+  const isSelected = allSelectedState === 'ALL';
+  const isDisabled = optionDisabled(item);
+  const indeterminate = allSelectedState === 'SOME';
+  const highlighted = highlightedIndex === index && !isDisabled ? 'true' : 'false';
+  const itemProps = getItemProps({
+    ...(multiline && {
+      ref: rowVirtualizer.measureElement
+    }),
+    item,
+    index: index
+  });
+  return /*#__PURE__*/jsxs(StyledListItem, {
+    ref: ref,
+    $isdisabled: isDisabled ? 'true' : 'false',
+    $highlighted: highlighted,
+    "aria-hidden": isDisabled,
+    $active: "false",
+    "aria-selected": isSelected,
+    "data-index": 0,
+    "data-testid": 'select-all',
+    "aria-setsize": availableItems.length,
+    style: {
+      position: 'sticky',
+      top: 0,
+      zIndex: 99
+    },
+    ...itemProps,
+    children: [/*#__PURE__*/jsx(Checkbox, {
+      disabled: isDisabled,
+      checked: isSelected,
+      indeterminate: indeterminate,
+      value: value,
+      onChange: () => {
+        return null;
+      }
+    }), /*#__PURE__*/jsx(AutocompleteOptionLabel, {
+      $multiline: multiline,
+      children: value
+    })]
+  });
+}
+
+export { SelectAllOption };

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

@@ -0,0 +1,28 @@
+import { useAutocompleteContext } from './AutocompleteContext.js';
+import { RightAdornments } from './RightAdornments.js';
+import { jsx } from 'react/jsx-runtime';
+import { Input } from '../Input/Input.js';
+
+const SingleInput = () => {
+  const {
+    consolidatedEvents,
+    inputProps,
+    variant,
+    hideClearButton,
+    restHtmlProps,
+    placeholder,
+    readOnly
+  } = useAutocompleteContext();
+  return /*#__PURE__*/jsx(Input, {
+    variant: variant,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
+    rightAdornments: /*#__PURE__*/jsx(RightAdornments, {}),
+    ...restHtmlProps,
+    ...consolidatedEvents,
+    ...inputProps
+  });
+};
+
+export { SingleInput };