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

package/README.md

@@ -129,8 +129,19 @@ npm install cetec-design-system
 
 ### Panda CSS Configuration
 
-Copy `/panda.config.ts` and adjust the import paths to point to the package in `node_modules`.
-Set up the `include` option to contain the paths where Panda should look when building `styled-system` and `styles.css`.
+Import the Panda preset from its build-time-only entrypoint:
+
+```typescript
+import { defineConfig } from '@pandacss/dev';
+import { cetecPreset } from 'cetec-design-system/preset';
+
+export default defineConfig({
+  presets: [cetecPreset],
+});
+```
+
+Set up the `include` option to contain the paths where Panda should look when
+building `styled-system` and `styles.css`.
 
 ### Using in Your Project
 

package/dist/containerSizes-nJuD-1Ap.js

@@ -0,0 +1,47 @@
+const breakpoints = {
+  xs: "30rem",
+  // 480px
+  sm: "40rem",
+  // 640px
+  md: "48rem",
+  // 768px
+  lg: "64rem",
+  // 1024px
+  xl: "80rem",
+  // 1280px
+  "2xl": "96rem"
+  // 1536px
+};
+const containerSizes = {
+  "2xs": "16rem",
+  // 256px
+  xs: "20rem",
+  // 320px
+  sm: "24rem",
+  // 384px
+  md: "28rem",
+  // 448px
+  lg: "32rem",
+  // 512px
+  xl: "36rem",
+  // 576px
+  "2xl": "42rem",
+  // 672px
+  "3xl": "48rem",
+  // 768px
+  "4xl": "56rem",
+  // 896px
+  "5xl": "64rem",
+  // 1024px
+  "6xl": "72rem",
+  // 1152px
+  "7xl": "80rem",
+  // 1280px
+  "8xl": "90rem"
+  // 1440px
+};
+export {
+  breakpoints as b,
+  containerSizes as c
+};
+//# sourceMappingURL=containerSizes-nJuD-1Ap.js.map

package/dist/containerSizes-nJuD-1Ap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"containerSizes-nJuD-1Ap.js","sources":["../src/styles/utilities/breakpoints.ts","../src/styles/utilities/containerSizes.ts"],"sourcesContent":["export const breakpoints = {\n  xs: '30rem', // 480px\n  sm: '40rem', // 640px\n  md: '48rem', // 768px\n  lg: '64rem', // 1024px\n  xl: '80rem', // 1280px\n  '2xl': '96rem', // 1536px\n};\n","// Raw values for Panda containerSizes config (no value wrappers)\n// Panda's setupContainers() expects raw strings it can call .match() on\nexport const containerSizes = {\n  '2xs': '16rem', // 256px\n  xs: '20rem', // 320px\n  sm: '24rem', // 384px\n  md: '28rem', // 448px\n  lg: '32rem', // 512px\n  xl: '36rem', // 576px\n  '2xl': '42rem', // 672px\n  '3xl': '48rem', // 768px\n  '4xl': '56rem', // 896px\n  '5xl': '64rem', // 1024px\n  '6xl': '72rem', // 1152px\n  '7xl': '80rem', // 1280px\n  '8xl': '90rem', // 1440px\n};\n"],"names":[],"mappings":"AAAO,MAAM,cAAc;AAAA,EACzB,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,OAAO;AAAA;AACT;ACLO,MAAM,iBAAiB;AAAA,EAC5B,OAAO;AAAA;AAAA,EACP,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,OAAO;AAAA;AAAA,EACP,OAAO;AAAA;AAAA,EACP,OAAO;AAAA;AAAA,EACP,OAAO;AAAA;AAAA,EACP,OAAO;AAAA;AAAA,EACP,OAAO;AAAA;AAAA,EACP,OAAO;AAAA;AACT;"}

package/dist/index.js

@@ -2,8 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { createContext, useContext, useMemo, forwardRef, createElement, useState, useLayoutEffect, useRef, useSyncExternalStore, useCallback, useEffect, useId as useId$1, isValidElement, Children, cloneElement, useReducer } from "react";
 import * as ReactDOM from "react-dom";
-import { b as breakpoints, c as containerSizes } from "./cetec-preset-D23KFUx3.js";
-import { a } from "./cetec-preset-D23KFUx3.js";
+import { b as breakpoints, c as containerSizes } from "./containerSizes-nJuD-1Ap.js";
 import { useForm } from "@tanstack/react-form";
 import { useForm as useForm2 } from "@tanstack/react-form";
 function isObject(value) {
@@ -262,8 +261,8 @@ function finalizeConditions(paths) {
   });
 }
 function sortConditions(paths) {
-  return paths.sort((a2, b) => {
-    const aa = isCondition(a2);
+  return paths.sort((a, b) => {
+    const aa = isCondition(a);
     const bb = isCondition(b);
     if (aa && !bb) return 1;
     if (!aa && bb) return -1;
@@ -4246,8 +4245,8 @@ var getSortOrderTabIndex = function getSortOrderTabIndex2(node, isScope) {
   }
   return tabIndex;
 };
-var sortOrderedTabbables = function sortOrderedTabbables2(a2, b) {
-  return a2.tabIndex === b.tabIndex ? a2.documentOrder - b.documentOrder : a2.tabIndex - b.tabIndex;
+var sortOrderedTabbables = function sortOrderedTabbables2(a, b) {
+  return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
 };
 var isInput = function isInput2(node) {
   return node.tagName === "INPUT";
@@ -5294,7 +5293,7 @@ const flip$2 = function(options) {
             };
           }
         }
-        let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a2, b) => a2.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+        let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
         if (!resetPlacement) {
           switch (fallbackStrategy) {
             case "bestFit": {
@@ -5307,7 +5306,7 @@ const flip$2 = function(options) {
                   currentSideAxis === "y";
                 }
                 return true;
-              }).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a2, b) => a2[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
+              }).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
               if (placement2) {
                 resetPlacement = placement2;
               }
@@ -5991,8 +5990,8 @@ const platform = {
   isElement,
   isRTL
 };
-function rectsAreEqual(a2, b) {
-  return a2.x === b.x && a2.y === b.y && a2.width === b.width && a2.height === b.height;
+function rectsAreEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 }
 function observeMove(element, onMove) {
   let io = null;
@@ -6160,31 +6159,31 @@ var isClient = typeof document !== "undefined";
 var noop$1 = function noop2() {
 };
 var index = isClient ? useLayoutEffect : noop$1;
-function deepEqual(a2, b) {
-  if (a2 === b) {
+function deepEqual(a, b) {
+  if (a === b) {
     return true;
   }
-  if (typeof a2 !== typeof b) {
+  if (typeof a !== typeof b) {
     return false;
   }
-  if (typeof a2 === "function" && a2.toString() === b.toString()) {
+  if (typeof a === "function" && a.toString() === b.toString()) {
     return true;
   }
   let length;
   let i;
   let keys;
-  if (a2 && b && typeof a2 === "object") {
-    if (Array.isArray(a2)) {
-      length = a2.length;
+  if (a && b && typeof a === "object") {
+    if (Array.isArray(a)) {
+      length = a.length;
       if (length !== b.length) return false;
       for (i = length; i-- !== 0; ) {
-        if (!deepEqual(a2[i], b[i])) {
+        if (!deepEqual(a[i], b[i])) {
           return false;
         }
       }
       return true;
     }
-    keys = Object.keys(a2);
+    keys = Object.keys(a);
     length = keys.length;
     if (length !== Object.keys(b).length) {
       return false;
@@ -6196,16 +6195,16 @@ function deepEqual(a2, b) {
     }
     for (i = length; i-- !== 0; ) {
       const key = keys[i];
-      if (key === "_owner" && a2.$$typeof) {
+      if (key === "_owner" && a.$$typeof) {
         continue;
       }
-      if (!deepEqual(a2[key], b[key])) {
+      if (!deepEqual(a[key], b[key])) {
         return false;
       }
     }
     return true;
   }
-  return a2 !== a2 && b !== b;
+  return a !== a && b !== b;
 }
 function getDPR(element) {
   if (typeof window === "undefined") {
@@ -6465,8 +6464,8 @@ function useMergeRefs(refs) {
     };
   }, refs);
 }
-function sortByDocumentPosition(a2, b) {
-  const position = a2.compareDocumentPosition(b);
+function sortByDocumentPosition(a, b) {
+  const position = a.compareDocumentPosition(b);
   if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
     return -1;
   }
@@ -15486,13 +15485,13 @@ function shiftMonth(year, month, delta) {
   const rolledMonth = (zeroBased % 12 + 12) % 12;
   return { year: rolledYear, month: rolledMonth + 1 };
 }
-function compareDates(a2, b) {
-  if (a2.year !== b.year) return a2.year - b.year;
-  if (a2.month !== b.month) return a2.month - b.month;
-  return a2.day - b.day;
+function compareDates(a, b) {
+  if (a.year !== b.year) return a.year - b.year;
+  if (a.month !== b.month) return a.month - b.month;
+  return a.day - b.day;
 }
-function isSameDate(a2, b) {
-  return compareDates(a2, b) === 0;
+function isSameDate(a, b) {
+  return compareDates(a, b) === 0;
 }
 function isDateBefore(date, bound) {
   return bound !== void 0 && compareDates(date, bound) < 0;
@@ -19330,7 +19329,7 @@ const DateMenu = (props) => {
   );
 };
 const EMPTY_RANGE$4 = { start: null, end: null };
-const sameMonth = (a2, b) => a2.year === b.year && a2.month === b.month;
+const sameMonth = (a, b) => a.year === b.year && a.month === b.month;
 const DateRangeMenu = (props) => {
   const {
     trigger,
@@ -21410,7 +21409,6 @@ const dsPart = (part) => ({
   [DS_PART_ATTRIBUTE]: part
 });
 const AutocompleteListbox = (props) => {
-  const floatingLayer = useFloatingLayer();
   const {
     activeIndex,
     baseId,
@@ -21431,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);
@@ -21451,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,
             {
@@ -21602,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) {
@@ -21691,6 +21696,7 @@ const useAutocompleteState = ({
     inputValue,
     open,
     setInputValue,
+    clearInputValue,
     selectOption,
     createOption,
     removeOption,
@@ -21700,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) {
@@ -21736,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}”`;
@@ -21776,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 {
@@ -21792,6 +21806,7 @@ const useAutocompleteController = (props) => {
     onOpenChange,
     multiple = false,
     allowCustomValue = false,
+    isCustomValue,
     getCreateOptionLabel = defaultGetCreateOptionLabel,
     limitTags,
     placeholder = "Select...",
@@ -21833,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) {
@@ -21901,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]
@@ -21922,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 {
@@ -21933,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]
@@ -21946,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) {
@@ -21953,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,
@@ -21994,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);
@@ -22074,6 +22124,7 @@ const useAutocompleteController = (props) => {
   );
   const handleInputChange = useCallback(
     (event) => {
+      suppressCreateCommitRef.current = false;
       setActiveIndex(null);
       state.setInputValue(event.target.value);
     },
@@ -22133,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);
@@ -22239,6 +22294,7 @@ const useAutocompleteController = (props) => {
     selectedLabels,
     selectedOptions,
     selectedValues,
+    selectionIsCreated,
     setFloatingRef,
     setItemRef,
     setTokenRef,
@@ -22298,6 +22354,7 @@ const Autocomplete = (props) => {
     selectedLabels,
     selectedOptions,
     selectedValues,
+    selectionIsCreated,
     setFloatingRef,
     setItemRef,
     setTokenRef,
@@ -22444,6 +22501,7 @@ const Autocomplete = (props) => {
                 onSelect: handleOptionSelect,
                 query: currentInputValue.trim(),
                 selectedValues,
+                selectionIsCreated,
                 setItemRef,
                 statusClassName: classes.status,
                 value: currentValue
@@ -23179,7 +23237,6 @@ export {
   Toggle,
   ToggleInput,
   Tooltip,
-  a as cetecPreset,
   deriveItemTextValue,
   getComponentType,
   getHighlightedTextParts,