@dbcdk/react-components 0.0.168 → 0.0.170

package/dist/components/forms/typeahead/Typeahead.cjs

@@ -115,6 +115,8 @@ function Typeahead({
   onClear,
   emptyMessage = "Ingen resultater",
   filterOptions,
+  maxVisibleOptions,
+  allowCustomValue = false,
   inputProps,
   inputSize,
   width,
@@ -128,7 +130,7 @@ function Typeahead({
   fitContent = false,
   enableHotkey = false
 }) {
-  var _a, _b;
+  var _a;
   const rootRef = React.useRef(null);
   const triggerWrapperRef = React.useRef(null);
   const inputRef = React.useRef(null);
@@ -156,10 +158,14 @@ function Typeahead({
     if (mode !== "multi" || !Array.isArray(selectedValue)) return [];
     return options.filter((option) => selectedValue.includes(option.value));
   }, [options, selectedValue, mode]);
+  const selectedSingleText = React.useMemo(() => {
+    if (mode !== "single") return "";
+    if (selectedOption) return selectedOption.label;
+    if (allowCustomValue && selectedValue != null) return String(selectedValue);
+    return "";
+  }, [mode, selectedOption, allowCustomValue, selectedValue]);
   const [open, setOpen] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState(
-    mode === "multi" ? "" : (_a = selectedOption == null ? void 0 : selectedOption.label) != null ? _a : ""
-  );
+  const [inputValue, setInputValue] = React.useState(mode === "multi" ? "" : selectedSingleText);
   const [query, setQuery] = React.useState("");
   const [activeIndex, setActiveIndex] = React.useState(-1);
   const [hideSelectedHighlight, setHideSelectedHighlight] = React.useState(false);
@@ -195,9 +201,12 @@ function Typeahead({
       );
     }
   }
+  if (typeof maxVisibleOptions === "number" && Number.isFinite(maxVisibleOptions)) {
+    filteredOptions = filteredOptions.slice(0, Math.max(0, maxVisibleOptions));
+  }
   const commitSelection = React__namespace.useCallback(
     (option) => {
-      var _a2, _b2;
+      var _a2, _b;
       locallyClearedRef.current = false;
       setHideSelectedHighlight(false);
       if (mode === "multi") {
@@ -218,7 +227,7 @@ function Typeahead({
         return;
       }
       onChange((_a2 = option == null ? void 0 : option.value) != null ? _a2 : null);
-      setInputValue((_b2 = option == null ? void 0 : option.label) != null ? _b2 : "");
+      setInputValue((_b = option == null ? void 0 : option.label) != null ? _b : "");
       setQuery("");
       setOpen(false);
       setActiveIndex(-1);
@@ -251,13 +260,13 @@ function Typeahead({
     ] });
   })() : void 0;
   const usesCountAdornment = mode === "multi" && multiValueDisplayMode === "count" && selectedOptions.length > 0;
-  const resolvedInputSize = (_b = inputSize != null ? inputSize : inputProps == null ? void 0 : inputProps.inputSize) != null ? _b : "md";
+  const resolvedInputSize = (_a = inputSize != null ? inputSize : inputProps == null ? void 0 : inputProps.inputSize) != null ? _a : "md";
   const shouldFitContent = fitContent && mode === "single";
   const [fittedWidthPx, setFittedWidthPx] = React.useState(null);
   const visibleSingleValueText = React.useMemo(() => {
     if (!shouldFitContent) return "";
-    return inputValue || (selectedOption == null ? void 0 : selectedOption.label) || placeholder || "";
-  }, [shouldFitContent, inputValue, selectedOption, placeholder]);
+    return inputValue || selectedSingleText || placeholder || "";
+  }, [shouldFitContent, inputValue, selectedSingleText, placeholder]);
   React.useLayoutEffect(() => {
     if (!shouldFitContent) return;
     const input = inputRef.current;
@@ -311,15 +320,18 @@ function Typeahead({
     return () => window.removeEventListener("keydown", handleKeyDown2);
   }, [enableHotkey]);
   React.useEffect(() => {
-    var _a2;
+    if (selectedOption) {
+      locallyClearedRef.current = false;
+      setHideSelectedHighlight(false);
+    }
     if (justClearedRef.current || locallyClearedRef.current) return;
     if (mode === "multi") {
       setInputValue("");
       setQuery("");
     } else {
-      setInputValue((_a2 = selectedOption == null ? void 0 : selectedOption.label) != null ? _a2 : "");
+      setInputValue(selectedSingleText);
     }
-  }, [selectedOption, mode]);
+  }, [selectedOption, selectedSingleText, mode]);
   const getSelectedIndex = React__namespace.useCallback(
     (items) => {
       if (items.length === 0) return -1;
@@ -343,10 +355,10 @@ function Typeahead({
     });
   }, [filteredOptions, getSelectedIndex]);
   React.useEffect(() => {
-    var _a2, _b2;
+    var _a2, _b;
     if (!open || activeIndex < 0) return;
     const activeEl = (_a2 = document.getElementById(listboxId)) == null ? void 0 : _a2.querySelector(`#${CSS.escape(`${listboxId}-option-${activeIndex}`)}`);
-    (_b2 = activeEl == null ? void 0 : activeEl.scrollIntoView) == null ? void 0 : _b2.call(activeEl, { block: "nearest" });
+    (_b = activeEl == null ? void 0 : activeEl.scrollIntoView) == null ? void 0 : _b.call(activeEl, { block: "nearest" });
   }, [open, activeIndex, filteredOptions, listboxId]);
   const getFocusableElements = React__namespace.useCallback(() => {
     const selector = [
@@ -373,13 +385,13 @@ function Typeahead({
     return focusables;
   }, []);
   const isFocusWithinTypeahead = React__namespace.useCallback((target) => {
-    var _a2, _b2;
+    var _a2, _b;
     if (!(target instanceof Node)) return false;
-    return Boolean(((_a2 = rootRef.current) == null ? void 0 : _a2.contains(target)) || ((_b2 = popoverContentRef.current) == null ? void 0 : _b2.contains(target)));
+    return Boolean(((_a2 = rootRef.current) == null ? void 0 : _a2.contains(target)) || ((_b = popoverContentRef.current) == null ? void 0 : _b.contains(target)));
   }, []);
   const handleTabKeyDown = React__namespace.useCallback(
     (event) => {
-      var _a2, _b2, _c;
+      var _a2, _b, _c;
       if (event.key !== "Tab" || !open) return;
       const focusables = getFocusableElements();
       if (focusables.length === 0) return;
@@ -389,7 +401,7 @@ function Typeahead({
       if (mode === "multi") {
         if (activeIndexInScope === -1) {
           event.preventDefault();
-          (_b2 = focusables[0]) == null ? void 0 : _b2.focus();
+          (_b = focusables[0]) == null ? void 0 : _b.focus();
           return;
         }
         event.preventDefault();
@@ -410,6 +422,7 @@ function Typeahead({
     setQuery(nextValue);
     if (!open) setOpen(true);
     if (mode === "multi") return;
+    if (allowCustomValue) return;
     const exactMatch = options.find((option) => option.label === nextValue);
     if (!exactMatch && selectedValue !== null) {
       onChange(null);
@@ -442,6 +455,22 @@ function Typeahead({
       commitSelection(exactLabelMatch);
       return;
     }
+    if (allowCustomValue) {
+      const customValue = inputValue.trim();
+      if (customValue) {
+        onChange(customValue);
+        setInputValue(customValue);
+      } else {
+        if (selectedValue !== null) {
+          onChange(null);
+        }
+        setInputValue("");
+      }
+      setQuery("");
+      setOpen(false);
+      setActiveIndex(-1);
+      return;
+    }
     if (selectedOption) {
       setInputValue(selectedOption.label);
     } else {
@@ -478,7 +507,6 @@ function Typeahead({
   }, [mode, selectedOption, prepareSingleSearchInput, openWithAllOptions, openWithCurrentFilter]);
   const handleTriggerMouseDown = React__namespace.useCallback(
     (e) => {
-      var _a2;
       inputPropsOnMouseDown == null ? void 0 : inputPropsOnMouseDown(e);
       if (e.defaultPrevented) return;
       if (justClearedRef.current) {
@@ -492,9 +520,7 @@ function Typeahead({
         setOpen(false);
         setActiveIndex(-1);
         setQuery("");
-        setInputValue(
-          mode === "single" && !locallyClearedRef.current ? (_a2 = selectedOption == null ? void 0 : selectedOption.label) != null ? _a2 : "" : ""
-        );
+        setInputValue(mode === "single" && !locallyClearedRef.current ? selectedSingleText : "");
         return;
       }
       if (isAlreadyFocused && mode === "single" && selectedOption && !locallyClearedRef.current) {
@@ -511,6 +537,7 @@ function Typeahead({
       open,
       mode,
       selectedOption,
+      selectedSingleText,
       prepareSingleSearchInput,
       getSelectedIndex,
       options,
@@ -519,7 +546,7 @@ function Typeahead({
   );
   const handleChevronMouseDown = React__namespace.useCallback(
     (e) => {
-      var _a2, _b2;
+      var _a2;
       e.preventDefault();
       e.stopPropagation();
       if (justClearedRef.current) return;
@@ -528,14 +555,12 @@ function Typeahead({
         setOpen(false);
         setActiveIndex(-1);
         setQuery("");
-        setInputValue(
-          mode === "single" && !locallyClearedRef.current ? (_b2 = selectedOption == null ? void 0 : selectedOption.label) != null ? _b2 : "" : ""
-        );
+        setInputValue(mode === "single" && !locallyClearedRef.current ? selectedSingleText : "");
         return;
       }
       handleOpen();
     },
-    [open, mode, selectedOption, handleOpen]
+    [open, mode, selectedSingleText, handleOpen]
   );
   const handleKeyDown = (e) => {
     switch (e.key) {
@@ -586,9 +611,7 @@ function Typeahead({
         setOpen(false);
         setActiveIndex(-1);
         setQuery("");
-        setInputValue(
-          mode === "single" && selectedOption && !locallyClearedRef.current ? selectedOption.label : ""
-        );
+        setInputValue(mode === "single" && !locallyClearedRef.current ? selectedSingleText : "");
         return;
     }
   };
@@ -599,7 +622,9 @@ function Typeahead({
       style: {
         display: "flex",
         flexDirection: "column",
+        justifyContent: mode === "multi" && multiSelectedValuesDisplayMode === "below-input" && selectedOptions.length > 0 ? "flex-start" : "center",
         gap: mode === "multi" && multiSelectedValuesDisplayMode === "below-input" && selectedOptions.length > 0 ? 8 : 0,
+        height: "100%",
         width: width != null ? width : fullWidth ? "100%" : shouldFitContent ? measuredRootWidth : void 0,
         flex: width ? "0 0 auto" : fullWidth || shouldFitContent ? "1 1 auto" : void 0,
         minWidth: width ? void 0 : shouldFitContent ? measuredRootWidth : 0,
@@ -637,11 +662,18 @@ function Typeahead({
             returnFocus: false,
             overlayRef: popoverContentRef,
             trigger: (openPopover, icon) => {
-              var _a2, _b2, _c, _d;
+              var _a2, _b, _c, _d;
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   ref: triggerWrapperRef,
+                  style: {
+                    display: "flex",
+                    alignItems: "stretch",
+                    minWidth: 0,
+                    width: "100%",
+                    height: "100%"
+                  },
                   onMouseDown: (e) => {
                     const target = e.target;
                     if (justClearedRef.current) {
@@ -692,7 +724,7 @@ function Typeahead({
                       inputSize: resolvedInputSize,
                       width: width != null ? width : shouldFitContent ? void 0 : inputProps == null ? void 0 : inputProps.width,
                       autoComplete: (_a2 = autoComplete != null ? autoComplete : inputProps == null ? void 0 : inputProps.autoComplete) != null ? _a2 : "off",
-                      autoCorrect: (_b2 = autoCorrect != null ? autoCorrect : inputProps == null ? void 0 : inputProps.autoCorrect) != null ? _b2 : "off",
+                      autoCorrect: (_b = autoCorrect != null ? autoCorrect : inputProps == null ? void 0 : inputProps.autoCorrect) != null ? _b : "off",
                       autoCapitalize: (_c = autoCapitalize != null ? autoCapitalize : inputProps == null ? void 0 : inputProps.autoCapitalize) != null ? _c : "none",
                       spellCheck: (_d = spellCheck != null ? spellCheck : inputProps == null ? void 0 : inputProps.spellCheck) != null ? _d : false,
                       disabled,
@@ -703,9 +735,9 @@ function Typeahead({
                         usesCountAdornment ? styles__default.default.inputWithoutStartPadding : ""
                       ].filter(Boolean).join(" "),
                       onClear: (event) => {
-                        var _a3, _b3;
+                        var _a3, _b2;
                         (_a3 = event == null ? void 0 : event.preventDefault) == null ? void 0 : _a3.call(event);
-                        (_b3 = event == null ? void 0 : event.stopPropagation) == null ? void 0 : _b3.call(event);
+                        (_b2 = event == null ? void 0 : event.stopPropagation) == null ? void 0 : _b2.call(event);
                         justClearedRef.current = true;
                         locallyClearedRef.current = true;
                         setHideSelectedHighlight(true);

package/dist/components/forms/typeahead/Typeahead.d.ts

@@ -22,6 +22,12 @@ interface TypeaheadProps<T> {
     onClear?: () => void;
     emptyMessage?: string;
     filterOptions?: (options: TypeaheadOption<T>[], query: string) => TypeaheadOption<T>[];
+    maxVisibleOptions?: number;
+    /**
+     * Allows a single-select typeahead to commit a freeform value that does not
+     * match one of the provided options. Intended primarily for string values.
+     */
+    allowCustomValue?: boolean;
     inputProps?: Omit<InputProps, 'onChange' | 'value'>;
     inputSize?: InputProps['inputSize'];
     /** Explicit width; takes precedence over `fullWidth` and `fitContent` when set. */
@@ -36,5 +42,5 @@ interface TypeaheadProps<T> {
     fitContent?: boolean;
     enableHotkey?: boolean;
 }
-export declare function Typeahead<T extends string | number>({ options, mode, multiValueDisplayMode, multiSelectedValuesDisplayMode, multiSelectedValueChipContent, selectedValue, onChange, placeholder, variant, disabled, fullWidth, onClear, emptyMessage, filterOptions, inputProps, inputSize, width, minWidth, popoverWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, popoverAnchorRef, fitContent, enableHotkey, }: TypeaheadProps<T>): React.ReactElement;
+export declare function Typeahead<T extends string | number>({ options, mode, multiValueDisplayMode, multiSelectedValuesDisplayMode, multiSelectedValueChipContent, selectedValue, onChange, placeholder, variant, disabled, fullWidth, onClear, emptyMessage, filterOptions, maxVisibleOptions, allowCustomValue, inputProps, inputSize, width, minWidth, popoverWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, popoverAnchorRef, fitContent, enableHotkey, }: TypeaheadProps<T>): React.ReactElement;
 export {};

package/dist/components/forms/typeahead/Typeahead.js

@@ -91,6 +91,8 @@ function Typeahead({
   onClear,
   emptyMessage = "Ingen resultater",
   filterOptions,
+  maxVisibleOptions,
+  allowCustomValue = false,
   inputProps,
   inputSize,
   width,
@@ -104,7 +106,7 @@ function Typeahead({
   fitContent = false,
   enableHotkey = false
 }) {
-  var _a, _b;
+  var _a;
   const rootRef = useRef(null);
   const triggerWrapperRef = useRef(null);
   const inputRef = useRef(null);
@@ -132,10 +134,14 @@ function Typeahead({
     if (mode !== "multi" || !Array.isArray(selectedValue)) return [];
     return options.filter((option) => selectedValue.includes(option.value));
   }, [options, selectedValue, mode]);
+  const selectedSingleText = useMemo(() => {
+    if (mode !== "single") return "";
+    if (selectedOption) return selectedOption.label;
+    if (allowCustomValue && selectedValue != null) return String(selectedValue);
+    return "";
+  }, [mode, selectedOption, allowCustomValue, selectedValue]);
   const [open, setOpen] = useState(false);
-  const [inputValue, setInputValue] = useState(
-    mode === "multi" ? "" : (_a = selectedOption == null ? void 0 : selectedOption.label) != null ? _a : ""
-  );
+  const [inputValue, setInputValue] = useState(mode === "multi" ? "" : selectedSingleText);
   const [query, setQuery] = useState("");
   const [activeIndex, setActiveIndex] = useState(-1);
   const [hideSelectedHighlight, setHideSelectedHighlight] = useState(false);
@@ -171,9 +177,12 @@ function Typeahead({
       );
     }
   }
+  if (typeof maxVisibleOptions === "number" && Number.isFinite(maxVisibleOptions)) {
+    filteredOptions = filteredOptions.slice(0, Math.max(0, maxVisibleOptions));
+  }
   const commitSelection = React.useCallback(
     (option) => {
-      var _a2, _b2;
+      var _a2, _b;
       locallyClearedRef.current = false;
       setHideSelectedHighlight(false);
       if (mode === "multi") {
@@ -194,7 +203,7 @@ function Typeahead({
         return;
       }
       onChange((_a2 = option == null ? void 0 : option.value) != null ? _a2 : null);
-      setInputValue((_b2 = option == null ? void 0 : option.label) != null ? _b2 : "");
+      setInputValue((_b = option == null ? void 0 : option.label) != null ? _b : "");
       setQuery("");
       setOpen(false);
       setActiveIndex(-1);
@@ -227,13 +236,13 @@ function Typeahead({
     ] });
   })() : void 0;
   const usesCountAdornment = mode === "multi" && multiValueDisplayMode === "count" && selectedOptions.length > 0;
-  const resolvedInputSize = (_b = inputSize != null ? inputSize : inputProps == null ? void 0 : inputProps.inputSize) != null ? _b : "md";
+  const resolvedInputSize = (_a = inputSize != null ? inputSize : inputProps == null ? void 0 : inputProps.inputSize) != null ? _a : "md";
   const shouldFitContent = fitContent && mode === "single";
   const [fittedWidthPx, setFittedWidthPx] = useState(null);
   const visibleSingleValueText = useMemo(() => {
     if (!shouldFitContent) return "";
-    return inputValue || (selectedOption == null ? void 0 : selectedOption.label) || placeholder || "";
-  }, [shouldFitContent, inputValue, selectedOption, placeholder]);
+    return inputValue || selectedSingleText || placeholder || "";
+  }, [shouldFitContent, inputValue, selectedSingleText, placeholder]);
   useLayoutEffect(() => {
     if (!shouldFitContent) return;
     const input = inputRef.current;
@@ -287,15 +296,18 @@ function Typeahead({
     return () => window.removeEventListener("keydown", handleKeyDown2);
   }, [enableHotkey]);
   useEffect(() => {
-    var _a2;
+    if (selectedOption) {
+      locallyClearedRef.current = false;
+      setHideSelectedHighlight(false);
+    }
     if (justClearedRef.current || locallyClearedRef.current) return;
     if (mode === "multi") {
       setInputValue("");
       setQuery("");
     } else {
-      setInputValue((_a2 = selectedOption == null ? void 0 : selectedOption.label) != null ? _a2 : "");
+      setInputValue(selectedSingleText);
     }
-  }, [selectedOption, mode]);
+  }, [selectedOption, selectedSingleText, mode]);
   const getSelectedIndex = React.useCallback(
     (items) => {
       if (items.length === 0) return -1;
@@ -319,10 +331,10 @@ function Typeahead({
     });
   }, [filteredOptions, getSelectedIndex]);
   useEffect(() => {
-    var _a2, _b2;
+    var _a2, _b;
     if (!open || activeIndex < 0) return;
     const activeEl = (_a2 = document.getElementById(listboxId)) == null ? void 0 : _a2.querySelector(`#${CSS.escape(`${listboxId}-option-${activeIndex}`)}`);
-    (_b2 = activeEl == null ? void 0 : activeEl.scrollIntoView) == null ? void 0 : _b2.call(activeEl, { block: "nearest" });
+    (_b = activeEl == null ? void 0 : activeEl.scrollIntoView) == null ? void 0 : _b.call(activeEl, { block: "nearest" });
   }, [open, activeIndex, filteredOptions, listboxId]);
   const getFocusableElements = React.useCallback(() => {
     const selector = [
@@ -349,13 +361,13 @@ function Typeahead({
     return focusables;
   }, []);
   const isFocusWithinTypeahead = React.useCallback((target) => {
-    var _a2, _b2;
+    var _a2, _b;
     if (!(target instanceof Node)) return false;
-    return Boolean(((_a2 = rootRef.current) == null ? void 0 : _a2.contains(target)) || ((_b2 = popoverContentRef.current) == null ? void 0 : _b2.contains(target)));
+    return Boolean(((_a2 = rootRef.current) == null ? void 0 : _a2.contains(target)) || ((_b = popoverContentRef.current) == null ? void 0 : _b.contains(target)));
   }, []);
   const handleTabKeyDown = React.useCallback(
     (event) => {
-      var _a2, _b2, _c;
+      var _a2, _b, _c;
       if (event.key !== "Tab" || !open) return;
       const focusables = getFocusableElements();
       if (focusables.length === 0) return;
@@ -365,7 +377,7 @@ function Typeahead({
       if (mode === "multi") {
         if (activeIndexInScope === -1) {
           event.preventDefault();
-          (_b2 = focusables[0]) == null ? void 0 : _b2.focus();
+          (_b = focusables[0]) == null ? void 0 : _b.focus();
           return;
         }
         event.preventDefault();
@@ -386,6 +398,7 @@ function Typeahead({
     setQuery(nextValue);
     if (!open) setOpen(true);
     if (mode === "multi") return;
+    if (allowCustomValue) return;
     const exactMatch = options.find((option) => option.label === nextValue);
     if (!exactMatch && selectedValue !== null) {
       onChange(null);
@@ -418,6 +431,22 @@ function Typeahead({
       commitSelection(exactLabelMatch);
       return;
     }
+    if (allowCustomValue) {
+      const customValue = inputValue.trim();
+      if (customValue) {
+        onChange(customValue);
+        setInputValue(customValue);
+      } else {
+        if (selectedValue !== null) {
+          onChange(null);
+        }
+        setInputValue("");
+      }
+      setQuery("");
+      setOpen(false);
+      setActiveIndex(-1);
+      return;
+    }
     if (selectedOption) {
       setInputValue(selectedOption.label);
     } else {
@@ -454,7 +483,6 @@ function Typeahead({
   }, [mode, selectedOption, prepareSingleSearchInput, openWithAllOptions, openWithCurrentFilter]);
   const handleTriggerMouseDown = React.useCallback(
     (e) => {
-      var _a2;
       inputPropsOnMouseDown == null ? void 0 : inputPropsOnMouseDown(e);
       if (e.defaultPrevented) return;
       if (justClearedRef.current) {
@@ -468,9 +496,7 @@ function Typeahead({
         setOpen(false);
         setActiveIndex(-1);
         setQuery("");
-        setInputValue(
-          mode === "single" && !locallyClearedRef.current ? (_a2 = selectedOption == null ? void 0 : selectedOption.label) != null ? _a2 : "" : ""
-        );
+        setInputValue(mode === "single" && !locallyClearedRef.current ? selectedSingleText : "");
         return;
       }
       if (isAlreadyFocused && mode === "single" && selectedOption && !locallyClearedRef.current) {
@@ -487,6 +513,7 @@ function Typeahead({
       open,
       mode,
       selectedOption,
+      selectedSingleText,
       prepareSingleSearchInput,
       getSelectedIndex,
       options,
@@ -495,7 +522,7 @@ function Typeahead({
   );
   const handleChevronMouseDown = React.useCallback(
     (e) => {
-      var _a2, _b2;
+      var _a2;
       e.preventDefault();
       e.stopPropagation();
       if (justClearedRef.current) return;
@@ -504,14 +531,12 @@ function Typeahead({
         setOpen(false);
         setActiveIndex(-1);
         setQuery("");
-        setInputValue(
-          mode === "single" && !locallyClearedRef.current ? (_b2 = selectedOption == null ? void 0 : selectedOption.label) != null ? _b2 : "" : ""
-        );
+        setInputValue(mode === "single" && !locallyClearedRef.current ? selectedSingleText : "");
         return;
       }
       handleOpen();
     },
-    [open, mode, selectedOption, handleOpen]
+    [open, mode, selectedSingleText, handleOpen]
   );
   const handleKeyDown = (e) => {
     switch (e.key) {
@@ -562,9 +587,7 @@ function Typeahead({
         setOpen(false);
         setActiveIndex(-1);
         setQuery("");
-        setInputValue(
-          mode === "single" && selectedOption && !locallyClearedRef.current ? selectedOption.label : ""
-        );
+        setInputValue(mode === "single" && !locallyClearedRef.current ? selectedSingleText : "");
         return;
     }
   };
@@ -575,7 +598,9 @@ function Typeahead({
       style: {
         display: "flex",
         flexDirection: "column",
+        justifyContent: mode === "multi" && multiSelectedValuesDisplayMode === "below-input" && selectedOptions.length > 0 ? "flex-start" : "center",
         gap: mode === "multi" && multiSelectedValuesDisplayMode === "below-input" && selectedOptions.length > 0 ? 8 : 0,
+        height: "100%",
         width: width != null ? width : fullWidth ? "100%" : shouldFitContent ? measuredRootWidth : void 0,
         flex: width ? "0 0 auto" : fullWidth || shouldFitContent ? "1 1 auto" : void 0,
         minWidth: width ? void 0 : shouldFitContent ? measuredRootWidth : 0,
@@ -613,11 +638,18 @@ function Typeahead({
             returnFocus: false,
             overlayRef: popoverContentRef,
             trigger: (openPopover, icon) => {
-              var _a2, _b2, _c, _d;
+              var _a2, _b, _c, _d;
               return /* @__PURE__ */ jsx(
                 "div",
                 {
                   ref: triggerWrapperRef,
+                  style: {
+                    display: "flex",
+                    alignItems: "stretch",
+                    minWidth: 0,
+                    width: "100%",
+                    height: "100%"
+                  },
                   onMouseDown: (e) => {
                     const target = e.target;
                     if (justClearedRef.current) {
@@ -668,7 +700,7 @@ function Typeahead({
                       inputSize: resolvedInputSize,
                       width: width != null ? width : shouldFitContent ? void 0 : inputProps == null ? void 0 : inputProps.width,
                       autoComplete: (_a2 = autoComplete != null ? autoComplete : inputProps == null ? void 0 : inputProps.autoComplete) != null ? _a2 : "off",
-                      autoCorrect: (_b2 = autoCorrect != null ? autoCorrect : inputProps == null ? void 0 : inputProps.autoCorrect) != null ? _b2 : "off",
+                      autoCorrect: (_b = autoCorrect != null ? autoCorrect : inputProps == null ? void 0 : inputProps.autoCorrect) != null ? _b : "off",
                       autoCapitalize: (_c = autoCapitalize != null ? autoCapitalize : inputProps == null ? void 0 : inputProps.autoCapitalize) != null ? _c : "none",
                       spellCheck: (_d = spellCheck != null ? spellCheck : inputProps == null ? void 0 : inputProps.spellCheck) != null ? _d : false,
                       disabled,
@@ -679,9 +711,9 @@ function Typeahead({
                         usesCountAdornment ? styles.inputWithoutStartPadding : ""
                       ].filter(Boolean).join(" "),
                       onClear: (event) => {
-                        var _a3, _b3;
+                        var _a3, _b2;
                         (_a3 = event == null ? void 0 : event.preventDefault) == null ? void 0 : _a3.call(event);
-                        (_b3 = event == null ? void 0 : event.stopPropagation) == null ? void 0 : _b3.call(event);
+                        (_b2 = event == null ? void 0 : event.stopPropagation) == null ? void 0 : _b2.call(event);
                         justClearedRef.current = true;
                         locallyClearedRef.current = true;
                         setHideSelectedHighlight(true);

package/dist/components/nav-bar/NavBar.module.css

@@ -172,7 +172,7 @@
   gap: var(--spacing-xs);
   color: var(--color-fg-muted);
   font-family: var(--font-family);
-  font-size: var(--font-size-md);
+  font-size: var(--font-size-sm);
   text-decoration: none;
   border-radius: var(--border-radius-default);
   padding-block: var(--spacing-xs);

package/dist/components/overlay/modal/Modal.cjs

@@ -162,18 +162,27 @@ function Modal({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.body, children: body }),
           shouldRenderFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.footer, children: [
-            resolvedSecondaryAction && /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { type: "button", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [
-              resolvedSecondaryAction.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: resolvedSecondaryAction.icon }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: resolvedSecondaryAction.label })
-            ] }),
+            resolvedSecondaryAction && /* @__PURE__ */ jsxRuntime.jsxs(
+              Button.Button,
+              {
+                type: "button",
+                onClick: resolvedSecondaryAction.onClick,
+                disabled: resolvedSecondaryAction.disabled || resolvedSecondaryAction.loading || isLoading,
+                loading: resolvedSecondaryAction.loading,
+                children: [
+                  resolvedSecondaryAction.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: resolvedSecondaryAction.icon }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: resolvedSecondaryAction.label })
+                ]
+              }
+            ),
             primaryAction && /* @__PURE__ */ jsxRuntime.jsxs(
               Button.Button,
               {
                 type: "button",
                 variant: primaryAction.severity || "primary",
                 onClick: primaryAction.onClick,
-                disabled: primaryAction.disabled || isLoading,
-                loading: isLoading,
+                disabled: primaryAction.disabled || primaryAction.loading || isLoading,
+                loading: primaryAction.loading || isLoading,
                 children: [
                   primaryAction.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: primaryAction.icon }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { children: primaryAction.label })

package/dist/components/overlay/modal/Modal.d.ts

@@ -7,6 +7,7 @@ export type ModalActionConfig = {
     onClick?: () => void;
     icon?: ReactNode;
     disabled?: boolean;
+    loading?: boolean;
 };
 export type ModalProps = {
     isLoading?: boolean;

package/dist/components/overlay/modal/Modal.js

@@ -156,18 +156,27 @@ function Modal({
           ] }),
           /* @__PURE__ */ jsx("div", { className: styles.body, children: body }),
           shouldRenderFooter && /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
-            resolvedSecondaryAction && /* @__PURE__ */ jsxs(Button, { type: "button", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [
-              resolvedSecondaryAction.icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon }),
-              /* @__PURE__ */ jsx("span", { children: resolvedSecondaryAction.label })
-            ] }),
+            resolvedSecondaryAction && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                onClick: resolvedSecondaryAction.onClick,
+                disabled: resolvedSecondaryAction.disabled || resolvedSecondaryAction.loading || isLoading,
+                loading: resolvedSecondaryAction.loading,
+                children: [
+                  resolvedSecondaryAction.icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon }),
+                  /* @__PURE__ */ jsx("span", { children: resolvedSecondaryAction.label })
+                ]
+              }
+            ),
             primaryAction && /* @__PURE__ */ jsxs(
               Button,
               {
                 type: "button",
                 variant: primaryAction.severity || "primary",
                 onClick: primaryAction.onClick,
-                disabled: primaryAction.disabled || isLoading,
-                loading: isLoading,
+                disabled: primaryAction.disabled || primaryAction.loading || isLoading,
+                loading: primaryAction.loading || isLoading,
                 children: [
                   primaryAction.icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: primaryAction.icon }),
                   /* @__PURE__ */ jsx("span", { children: primaryAction.label })