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

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

@@ -1,10 +1,10 @@
 import { add_box } from '@equinor/eds-icons';
 import { tokens } from '@equinor/eds-tokens';
-import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { Icon } from '../Icon/index.js';
-import { StyledListItem, AutocompleteOptionLabel } from './Option.js';
 import { input } from '../Input/Input.tokens.js';
+import { useAutocompleteContext } from './AutocompleteContext.js';
+import { StyledListItem, AutocompleteOptionLabel } from './Option.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const StyledAddItemIcon = styled(Icon).withConfig({
@@ -19,25 +19,43 @@ const StyledPlaceholder = styled.span.withConfig({
   displayName: "AddNewOption__StyledPlaceholder",
   componentId: "sc-8xtrxx-1"
 })(["color:", ";"], input.entities.placeholder.typography.color);
-function AddNewOptionInner(props, ref) {
+function AddNewOption({
+  index,
+  item
+}) {
   const {
-    value,
-    multiline,
+    availableItems,
     multiple,
-    highlighted,
-    onClick,
-    ...other
-  } = props;
+    typedInputValue,
+    highlightedIndex,
+    multiline,
+    rowVirtualizer,
+    getItemProps
+  } = useAutocompleteContext();
+  const value = typedInputValue.trim();
+  const isDisabled = !typedInputValue.trim();
+  const highlighted = highlightedIndex === index && !isDisabled ? 'true' : 'false';
+  const itemProps = getItemProps({
+    ...(multiline && {
+      ref: rowVirtualizer.measureElement
+    }),
+    item,
+    index: index
+  });
   return /*#__PURE__*/jsxs(StyledListItem, {
-    ref: ref,
     $highlighted: highlighted,
-    onClick: e => {
-      onClick(e);
+    style: {
+      position: 'sticky',
+      top: 0,
+      zIndex: 99
     },
-    ...other,
+    ...itemProps,
     "aria-label": `Add new option: ${value}`,
+    "data-index": 0,
+    "data-testid": 'add-item',
     "aria-live": "polite",
     "aria-selected": false,
+    "aria-setsize": availableItems.length,
     children: [/*#__PURE__*/jsx(StyledAddItemIcon, {
       multiple: multiple,
       data: add_box
@@ -49,6 +67,5 @@ function AddNewOptionInner(props, ref) {
     })]
   });
 }
-const AddNewOption = /*#__PURE__*/forwardRef(AddNewOptionInner);
 
 export { AddNewOption };