cetec-design-system 3.0.1-next.0 → 3.1.0-next.0

package/dist/index.js

@@ -21409,7 +21409,6 @@ const dsPart = (part) => ({
   [DS_PART_ATTRIBUTE]: part
 });
 const AutocompleteListbox = (props) => {
-  const floatingLayer = useFloatingLayer();
   const {
     activeIndex,
     baseId,
@@ -21430,11 +21429,11 @@ const AutocompleteListbox = (props) => {
     onSelect,
     query,
     selectedValues,
+    selectionIsCreated = false,
     setItemRef,
     statusClassName,
     value
   } = props;
-  const menuClasses = menu({ density, layer: floatingLayer });
   const showInitialLoading = loading && items.length === 0;
   const showNoOptions = !loading && items.length === 0;
   const selectedValueSet = new Set(selectedValues);
@@ -21450,13 +21449,14 @@ const AutocompleteListbox = (props) => {
       density,
       query,
       highlightMatches: true,
-      className: cx(menuClasses.wrapper, listboxClassName),
+      className: listboxClassName,
       style: floatingStyles,
       onScroll,
       ...floatingProps,
       children: [
         items.map((option, index2) => {
-          const selected = multiple ? selectedValueSet.has(option.value) : value === option.value;
+          const valueSelected = multiple ? selectedValueSet.has(option.value) : value === option.value;
+          const selected = option.created ? valueSelected && selectionIsCreated : valueSelected && (multiple || !selectionIsCreated);
           return /* @__PURE__ */ jsx(
             ListItem,
             {
@@ -21601,6 +21601,12 @@ const useAutocompleteState = ({
       value
     ]
   );
+  const clearInputValue = useCallback(() => {
+    if (isInteractionBlocked) {
+      return;
+    }
+    commitInputValue("", "clear");
+  }, [commitInputValue, isInteractionBlocked]);
   const selectOption = useCallback(
     (option, reason = "select-option") => {
       if (isInteractionBlocked || option.disabled) {
@@ -21690,6 +21696,7 @@ const useAutocompleteState = ({
     inputValue,
     open,
     setInputValue,
+    clearInputValue,
     selectOption,
     createOption,
     removeOption,
@@ -21699,13 +21706,6 @@ const useAutocompleteState = ({
 };
 const optionComponentTypeKey = "__autocompleteComponentType";
 const normalizeAutocompleteText = (value) => value.trim().toLowerCase();
-const isAutocompleteExactMatch = (option, query) => {
-  const normalizedQuery = normalizeAutocompleteText(query);
-  if (!normalizedQuery) {
-    return false;
-  }
-  return normalizeAutocompleteText(option.value) === normalizedQuery || normalizeAutocompleteText(option.label) === normalizedQuery;
-};
 const isAutocompleteOptionMatch = (option, query) => {
   const normalizedQuery = normalizeAutocompleteText(query);
   if (!normalizedQuery) {
@@ -21735,23 +21735,37 @@ const normalizeAutocompleteOptions = (children) => {
     []
   );
 };
-const mergeAutocompleteOptions = (...optionGroups) => {
-  const optionByValue = /* @__PURE__ */ new Map();
-  optionGroups.forEach((options) => {
-    options.forEach((option) => {
-      if (!optionByValue.has(option.value)) {
-        optionByValue.set(option.value, option);
-      }
-    });
-  });
-  return Array.from(optionByValue.values());
-};
 const getAutocompleteValueArray = (value, multiple) => {
   if (multiple) {
     return Array.isArray(value) ? value : value ? [value] : [];
   }
   return typeof value === "string" ? [value] : [];
 };
+const resolveSelectedAutocompleteOption = (selectedValue, childOptionByValue, optionByValue, allowCustomValue, isCustomValue) => {
+  if (allowCustomValue && isCustomValue === true) {
+    return {
+      value: selectedValue,
+      label: selectedValue,
+      created: true
+    };
+  }
+  const childOption = childOptionByValue.get(selectedValue);
+  if (childOption) {
+    return childOption;
+  }
+  const mergedOption = optionByValue.get(selectedValue);
+  if (mergedOption == null ? void 0 : mergedOption.created) {
+    return mergedOption;
+  }
+  if (allowCustomValue) {
+    return {
+      value: selectedValue,
+      label: selectedValue,
+      created: true
+    };
+  }
+  return mergedOption;
+};
 const getFirstEnabledOptionIndex = (options) => options.findIndex((option) => !option.disabled);
 const LOAD_MORE_THRESHOLD_PX = 32;
 const defaultGetCreateOptionLabel = (inputValue) => `Add “${inputValue}”`;
@@ -21775,6 +21789,7 @@ const getDismissReason = (reason) => {
   return reason === "escape-key" ? "escape" : "outside-press";
 };
 const useAutocompleteController = (props) => {
+  var _a;
   const floatingLayer = useFloatingLayer();
   const fieldContext = useFieldContext();
   const {
@@ -21791,6 +21806,7 @@ const useAutocompleteController = (props) => {
     onOpenChange,
     multiple = false,
     allowCustomValue = false,
+    isCustomValue,
     getCreateOptionLabel = defaultGetCreateOptionLabel,
     limitTags,
     placeholder = "Select...",
@@ -21832,22 +21848,20 @@ const useAutocompleteController = (props) => {
   const inputRef = useRef(null);
   const itemRefs = useRef([]);
   const tokenRefs = useRef([]);
+  const suppressCreateCommitRef = useRef(false);
   const [activeIndex, setActiveIndex] = useState(null);
   const [focusedWithin, setFocusedWithin] = useState(false);
-  const [createdOptions, setCreatedOptions] = useState([]);
   const [announcement, setAnnouncement] = useState("");
   const baseOptions = useMemo(
     () => normalizeAutocompleteOptions(children),
     [children]
   );
-  const options = useMemo(
-    () => mergeAutocompleteOptions(baseOptions, createdOptions),
-    [baseOptions, createdOptions]
-  );
-  const optionByValue = useMemo(
-    () => new Map(options.map((option) => [option.value, option])),
-    [options]
+  const options = baseOptions;
+  const childOptionByValue = useMemo(
+    () => new Map(baseOptions.map((option) => [option.value, option])),
+    [baseOptions]
   );
+  const optionByValue = childOptionByValue;
   const handleValueChange = useCallback(
     (nextValue, reason) => {
       if (multiple) {
@@ -21900,14 +21914,30 @@ const useAutocompleteController = (props) => {
     [currentValue, multiple]
   );
   const selectedOptions = useMemo(
-    () => selectedValues.map((selectedValue) => optionByValue.get(selectedValue)),
-    [optionByValue, selectedValues]
+    () => selectedValues.map(
+      (selectedValue) => resolveSelectedAutocompleteOption(
+        selectedValue,
+        childOptionByValue,
+        optionByValue,
+        allowCustomValue,
+        multiple ? void 0 : isCustomValue
+      )
+    ),
+    [
+      allowCustomValue,
+      childOptionByValue,
+      isCustomValue,
+      multiple,
+      optionByValue,
+      selectedValues
+    ]
   );
+  const selectionIsCreated = Boolean(!multiple && ((_a = selectedOptions[0]) == null ? void 0 : _a.created));
   const selectedLabels = useMemo(
     () => selectedValues.map(
       (selectedValue, index2) => {
-        var _a;
-        return ((_a = selectedOptions[index2]) == null ? void 0 : _a.label) ?? selectedValue;
+        var _a2;
+        return ((_a2 = selectedOptions[index2]) == null ? void 0 : _a2.label) ?? selectedValue;
       }
     ),
     [selectedOptions, selectedValues]
@@ -21921,10 +21951,7 @@ const useAutocompleteController = (props) => {
   }, [currentInputValue, options]);
   const createOption = useMemo(() => {
     const query = currentInputValue.trim();
-    const hasExactMatch = options.some(
-      (option) => isAutocompleteExactMatch(option, query)
-    );
-    if (!allowCustomValue || !query || hasExactMatch) {
+    if (!allowCustomValue || !query) {
       return null;
     }
     return {
@@ -21932,7 +21959,7 @@ const useAutocompleteController = (props) => {
       label: getCreateOptionLabel(query),
       created: true
     };
-  }, [allowCustomValue, currentInputValue, getCreateOptionLabel, options]);
+  }, [allowCustomValue, currentInputValue, getCreateOptionLabel]);
   const navigationItems = useMemo(
     () => createOption ? [createOption, ...visibleOptions] : visibleOptions,
     [createOption, visibleOptions]
@@ -21945,6 +21972,37 @@ const useAutocompleteController = (props) => {
   );
   const firstEnabledIndex = getFirstEnabledOptionIndex(navigationItems);
   const resolvedActiveIndex = isOpen ? activeIndex ?? (firstEnabledIndex >= 0 ? firstEnabledIndex : null) : null;
+  const focusInput = useCallback(() => {
+    var _a2;
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+  }, []);
+  const handleOptionSelect = useCallback(
+    (option, { restoreFocus = true } = {}) => {
+      if (option.disabled) {
+        return;
+      }
+      if (option.created) {
+        const createdOption = { ...option, label: option.value };
+        state.selectOption(createdOption, "create-option");
+        setAnnouncement(`${option.value} created and selected.`);
+      } else {
+        state.selectOption(option);
+        setAnnouncement(`${option.label} selected.`);
+      }
+      setActiveIndex(null);
+      if (restoreFocus) {
+        requestAnimationFrame(focusInput);
+      }
+    },
+    [focusInput, state]
+  );
+  const tryCommitCreateOption = useCallback(() => {
+    if (!createOption || disabled || readOnly || suppressCreateCommitRef.current) {
+      return false;
+    }
+    handleOptionSelect(createOption, { restoreFocus: false });
+    return true;
+  }, [createOption, disabled, handleOptionSelect, readOnly]);
   const handleFloatingOpenChange = useCallback(
     (nextOpen, _event, reason) => {
       if (nextOpen) {
@@ -21952,9 +22010,27 @@ const useAutocompleteController = (props) => {
         return;
       }
       setActiveIndex(null);
-      state.closePopup(getDismissReason(reason));
+      const dismissReason = getDismissReason(reason);
+      if (dismissReason === "escape") {
+        suppressCreateCommitRef.current = true;
+        if (allowCustomValue) {
+          state.clearInputValue();
+        }
+        state.closePopup(dismissReason);
+        return;
+      }
+      if (dismissReason === "outside-press") {
+        const committed = tryCommitCreateOption();
+        if (committed) {
+          if (multiple) {
+            state.closePopup("outside-press");
+          }
+          return;
+        }
+      }
+      state.closePopup(dismissReason);
     },
-    [state]
+    [allowCustomValue, multiple, state, tryCommitCreateOption]
   );
   const floating = useOverlayFloating({
     open: isOpen,
@@ -21993,35 +22069,10 @@ const useAutocompleteController = (props) => {
   const visibleTagCount = shouldLimitTags ? limitTags : selectedValues.length;
   const visibleSelectedValues = selectedValues.slice(0, visibleTagCount);
   const hiddenTagCount = selectedValues.length - visibleSelectedValues.length;
-  const focusInput = useCallback(() => {
-    var _a;
-    (_a = inputRef.current) == null ? void 0 : _a.focus();
-  }, []);
   const focusToken = useCallback((index2) => {
-    var _a;
-    (_a = tokenRefs.current[index2]) == null ? void 0 : _a.focus();
+    var _a2;
+    (_a2 = tokenRefs.current[index2]) == null ? void 0 : _a2.focus();
   }, []);
-  const handleOptionSelect = useCallback(
-    (option) => {
-      if (option.disabled) {
-        return;
-      }
-      if (option.created) {
-        const createdOption = { ...option, label: option.value };
-        setCreatedOptions(
-          (currentOptions) => mergeAutocompleteOptions(currentOptions, [createdOption])
-        );
-        state.selectOption(createdOption, "create-option");
-        setAnnouncement(`${option.value} created and selected.`);
-      } else {
-        state.selectOption(option);
-        setAnnouncement(`${option.label} selected.`);
-      }
-      setActiveIndex(null);
-      requestAnimationFrame(focusInput);
-    },
-    [focusInput, state]
-  );
   const removeSelectedValue = useCallback(
     (selectedValue, label2) => {
       state.removeOption(selectedValue);
@@ -22073,6 +22124,7 @@ const useAutocompleteController = (props) => {
   );
   const handleInputChange = useCallback(
     (event) => {
+      suppressCreateCommitRef.current = false;
       setActiveIndex(null);
       state.setInputValue(event.target.value);
     },
@@ -22132,18 +22184,22 @@ const useAutocompleteController = (props) => {
     (event) => {
       const nextTarget = event.relatedTarget;
       requestAnimationFrame(() => {
-        var _a, _b, _c, _d;
+        var _a2, _b, _c, _d;
         const activeElement2 = document.activeElement;
-        const isInsideRoot = nextTarget && ((_a = rootRef.current) == null ? void 0 : _a.contains(nextTarget)) || activeElement2 && ((_b = rootRef.current) == null ? void 0 : _b.contains(activeElement2));
+        const isInsideRoot = nextTarget && ((_a2 = rootRef.current) == null ? void 0 : _a2.contains(nextTarget)) || activeElement2 && ((_b = rootRef.current) == null ? void 0 : _b.contains(activeElement2));
         const isInsideFloating = nextTarget && ((_c = floatingElementRef.current) == null ? void 0 : _c.contains(nextTarget)) || activeElement2 && ((_d = floatingElementRef.current) == null ? void 0 : _d.contains(activeElement2));
         if (!isInsideRoot && !isInsideFloating) {
           setFocusedWithin(false);
           setActiveIndex(null);
+          const committed = tryCommitCreateOption();
+          if (committed && !multiple) {
+            return;
+          }
           state.closePopup("outside-press");
         }
       });
     },
-    [state]
+    [multiple, state, tryCommitCreateOption]
   );
   const handleFocusCapture = useCallback(() => {
     setFocusedWithin(true);
@@ -22238,6 +22294,7 @@ const useAutocompleteController = (props) => {
     selectedLabels,
     selectedOptions,
     selectedValues,
+    selectionIsCreated,
     setFloatingRef,
     setItemRef,
     setTokenRef,
@@ -22297,6 +22354,7 @@ const Autocomplete = (props) => {
     selectedLabels,
     selectedOptions,
     selectedValues,
+    selectionIsCreated,
     setFloatingRef,
     setItemRef,
     setTokenRef,
@@ -22443,6 +22501,7 @@ const Autocomplete = (props) => {
                 onSelect: handleOptionSelect,
                 query: currentInputValue.trim(),
                 selectedValues,
+                selectionIsCreated,
                 setItemRef,
                 statusClassName: classes.status,
                 value: currentValue