@noya-app/noya-designsystem 0.1.73 → 0.1.75

package/dist/index.mjs

@@ -3801,11 +3801,14 @@ function Icon({
 // src/components/Spacer.tsx
 import * as React8 from "react";
 var SpacerVertical = React8.forwardRef(
-  ({ size, inline, ...props }, ref) => {
+  ({ size, inline, className, ...props }, ref) => {
     return /* @__PURE__ */ React8.createElement(
       "span",
       {
-        className: `${inline ? "n-inline-block" : "n-block"} ${size === void 0 ? "n-flex n-flex-1" : ""}`,
+        className: cx(
+          `${inline ? "n-inline-block" : "n-block"} ${size === void 0 ? "n-flex n-flex-1" : ""}`,
+          className
+        ),
         style: size ? {
           minHeight: `${size}px`
         } : void 0,
@@ -3816,11 +3819,14 @@ var SpacerVertical = React8.forwardRef(
   }
 );
 var SpacerHorizontal = React8.forwardRef(
-  ({ size, inline, ...props }, ref) => {
+  ({ size, inline, className, ...props }, ref) => {
     return /* @__PURE__ */ React8.createElement(
       "span",
       {
-        className: `${inline ? "n-inline-block" : "n-block"} ${size === void 0 ? "n-flex n-flex-1" : ""}`,
+        className: cx(
+          `${inline ? "n-inline-block" : "n-block"} ${size === void 0 ? "n-flex n-flex-1" : ""}`,
+          className
+        ),
         style: size ? {
           minWidth: `${size}px`
         } : void 0,
@@ -4854,10 +4860,14 @@ var InputElement = forwardRef9(
     onSubmit,
     as = "input",
     style: style2,
+    attachInputRef = true,
     ...props
   }, forwardedRef) => {
     const { endWidth, inputRef, size, id, startWidth } = useInputFieldContext();
-    const ref = useMergeRefs(inputRef, forwardedRef);
+    const ref = useMergeRefs(
+      attachInputRef ? inputRef : null,
+      forwardedRef
+    );
     const spacingStyles = getFieldSpacing({
       endWidth,
       variant: $variant,
@@ -4929,6 +4939,7 @@ var InputFieldTypeahead = (props) => {
     InputElement,
     {
       as: "span",
+      attachInputRef: false,
       style: useMemo8(
         () => ({
           position: "absolute",
@@ -5059,7 +5070,9 @@ function InputFieldRoot({
   const startRef = React20.useRef(null);
   const inputRef = React20.useRef(null);
   const endRef = React20.useRef(null);
+  const rootRef = React20.useRef(null);
   const measuredInputSize = useSize(inputRef, "width");
+  const measuredRootSize = useSize(rootRef, "width");
   const measuredStartSize = useSize(startRef, "width");
   const measuredEndSize = useSize(endRef, "width");
   const labelType = useLabelType();
@@ -5092,18 +5105,34 @@ function InputFieldRoot({
     () => /* @__PURE__ */ React20.createElement(Label, { htmlFor: id, className: "!n-text-text-disabled" }, labelProp ?? label),
     [id, labelProp, label]
   );
-  const rootElement = /* @__PURE__ */ React20.createElement(RootContainer, { $width: width, style: style2, className }, children, start && /* @__PURE__ */ React20.createElement("span", { ref: startRef, className: cx(startBaseStyles, startClassName) }, start), (end || label) && /* @__PURE__ */ React20.createElement(
-    "span",
+  const rootElement = /* @__PURE__ */ React20.createElement(
+    RootContainer,
     {
-      ref: endRef,
-      className: cx(endStyles, label && end && "n-gap-1.5", endClassName)
+      ref: rootRef,
+      $width: width,
+      style: style2,
+      className
     },
-    labelProp ? insetLabel : label && labelType === "inset" && insetLabel,
-    end
-  ));
+    children,
+    start && /* @__PURE__ */ React20.createElement("span", { ref: startRef, className: cx(startBaseStyles, startClassName) }, start),
+    (end || label) && /* @__PURE__ */ React20.createElement(
+      "span",
+      {
+        ref: endRef,
+        className: cx(endStyles, label && end && "n-gap-1.5", endClassName)
+      },
+      labelProp ? insetLabel : label && labelType === "inset" && insetLabel,
+      end
+    )
+  );
+  const measuredWidth = useMemo8(() => {
+    const inputWidth = measuredInputSize && measuredInputSize.width > 0 ? measuredInputSize.width : void 0;
+    const rootWidth = measuredRootSize && measuredRootSize.width > 0 ? measuredRootSize.width : void 0;
+    return inputWidth ?? rootWidth ?? width;
+  }, [measuredInputSize, measuredRootSize, width]);
   const measuredWidthObject = useMemo8(
-    () => measuredInputSize ? { width: measuredInputSize.width + 4 } : void 0,
-    [measuredInputSize]
+    () => measuredWidth && measuredWidth > 0 ? { width: measuredWidth + 4 } : void 0,
+    [measuredWidth]
   );
   return /* @__PURE__ */ React20.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ React20.createElement(
     Popover,
@@ -10932,9 +10961,28 @@ var ComboboxState = class {
     this.filter = this.lastSubmittedValue.itemName;
     this.notifyChange();
   }
-  reset(newFilter = "") {
+  reset(newFilter = "", options) {
     this.filter = newFilter;
-    this.selectedIndex = 0;
+    const filteredItems = this.getFilteredItems();
+    const normalizedTitle = options?.selectedItemTitle ? options.selectedItemTitle.toString().toLowerCase() : void 0;
+    const normalizedValue = options?.selectedItemValue ? options.selectedItemValue.toString().toLowerCase() : void 0;
+    const matchedIndex = normalizedTitle || normalizedValue ? filteredItems.findIndex((item) => {
+      if (!isSelectableMenuItem(item)) return false;
+      const title = item.title?.toString().toLowerCase();
+      const value = item.value?.toString().toLowerCase();
+      if (normalizedValue && value === normalizedValue) return true;
+      if (normalizedTitle && title === normalizedTitle) return true;
+      return false;
+    }) : -1;
+    if (matchedIndex !== -1) {
+      this.selectedIndex = matchedIndex;
+      this.notifyChange();
+      return;
+    }
+    const firstSelectableIndex = filteredItems.findIndex(
+      (item) => isSelectableMenuItem(item)
+    );
+    this.selectedIndex = firstSelectableIndex === -1 ? 0 : firstSelectableIndex;
     this.notifyChange();
   }
   getSelectedItem() {
@@ -11218,6 +11266,13 @@ var Combobox = memoGeneric(
       }
     }
     const initialValueString = getInitialValueString();
+    const resetSelectionOptions = useMemo28(
+      () => props.mode === "string" ? { selectedItemTitle: initialValueString } : {
+        selectedItemTitle: initialValueString,
+        selectedItemValue: props.value?.value?.toString()
+      },
+      [initialValueString, props.mode, props.value]
+    );
     const [comboboxState] = useState27(
       () => new ComboboxState(
         items,
@@ -11228,6 +11283,7 @@ var Combobox = memoGeneric(
     const state = useComboboxState(comboboxState);
     const [isFocused, setIsFocused] = useState27(false);
     const listRef = useRef21(null);
+    const menuOpenedRef = useRef21(false);
     const [shouldBlur, setShouldBlur] = useState27(false);
     const { fieldId: id } = useLabel({
       fieldId: rest.id
@@ -11245,9 +11301,20 @@ var Combobox = memoGeneric(
         listRef.current.scrollToIndex(selectedIndex);
       }
     }, [selectedIndex]);
+    useEffect20(() => {
+      if (!shouldShowMenu) {
+        menuOpenedRef.current = false;
+        return;
+      }
+      if (menuOpenedRef.current) return;
+      menuOpenedRef.current = true;
+      if (listRef.current) {
+        listRef.current.scrollToIndex(selectedIndex);
+      }
+    }, [shouldShowMenu, selectedIndex]);
     const handleBlur = useCallback28(() => {
       ref.current?.blur();
-      comboboxState.reset(initialValueString);
+      comboboxState.reset(initialValueString, resetSelectionOptions);
       if (props.mode === "string") {
         props.onBlur?.(
           state.filter === state.lastSubmittedValue.filter,
@@ -11263,12 +11330,20 @@ var Combobox = memoGeneric(
         }
       }
       setIsFocused(false);
-    }, [filter, initialValueString, props, state, comboboxState]);
+    }, [
+      filter,
+      initialValueString,
+      props,
+      resetSelectionOptions,
+      state,
+      comboboxState
+    ]);
     const handleFocus = useCallback28(
       (event) => {
         setIsFocused(true);
         comboboxState.reset(
-          openMenuBehavior === "showAllItems" ? "" : initialValueString
+          openMenuBehavior === "showAllItems" ? "" : initialValueString,
+          resetSelectionOptions
         );
         if (ref.current) {
           const length = ref.current.value.length;
@@ -11276,7 +11351,13 @@ var Combobox = memoGeneric(
         }
         onFocus?.(event);
       },
-      [initialValueString, onFocus, openMenuBehavior, comboboxState]
+      [
+        initialValueString,
+        onFocus,
+        openMenuBehavior,
+        resetSelectionOptions,
+        comboboxState
+      ]
     );
     const handleUpdateSelection = useCallback28(
       (item) => {
@@ -11441,7 +11522,8 @@ var Combobox = memoGeneric(
           return;
         }
         comboboxState.reset(
-          openMenuBehavior === "showAllItems" ? "" : initialValueString
+          openMenuBehavior === "showAllItems" ? "" : initialValueString,
+          resetSelectionOptions
         );
         ref.current?.focus();
       },
@@ -11450,6 +11532,7 @@ var Combobox = memoGeneric(
         openMenuBehavior,
         initialValueString,
         handleBlur,
+        resetSelectionOptions,
         comboboxState
       ]
     );
@@ -15373,6 +15456,12 @@ function BaseToolbar({
   innerClassName,
   enableAbsoluteBreakpoint = true
 }) {
+  const childrenContainerClassName = cx(
+    "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none n-inset-0 n-pl-1 n-pr-1 n-min-w-0",
+    "@xl/toolbar:!n-absolute @xl/toolbar:!n-pl-0 @xl/toolbar:!n-pr-0"
+  );
+  const childrenElement = children && /* @__PURE__ */ React85.createElement("div", { className: childrenContainerClassName }, /* @__PURE__ */ React85.createElement("div", { className: "n-flex n-items-center n-justify-center n-pointer-events-auto" }, children));
+  const leftElement = left && /* @__PURE__ */ React85.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, left);
   return /* @__PURE__ */ React85.createElement(
     BaseToolbarContainer,
     {
@@ -15383,14 +15472,8 @@ function BaseToolbar({
     },
     logo && /* @__PURE__ */ React85.createElement(React85.Fragment, null, logo, /* @__PURE__ */ React85.createElement(DividerVertical, null)),
     /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 }),
-    left && /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, left), /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 })),
-    children && /* @__PURE__ */ React85.createElement(
-      "div",
-      {
-        className: "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none @xl/toolbar:!n-absolute n-inset-0"
-      },
-      /* @__PURE__ */ React85.createElement("div", { className: "n-flex n-items-center n-justify-center n-pointer-events-auto" }, children)
-    ),
+    childrenElement,
+    leftElement && /* @__PURE__ */ React85.createElement(React85.Fragment, null, childrenElement && /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10, className: "@xl/toolbar:!n-hidden" }), /* @__PURE__ */ React85.createElement(DividerVertical, { className: "@xl/toolbar:!n-hidden" })), /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10, className: "@xl/toolbar:!n-hidden" }), leftElement, /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 })),
     /* @__PURE__ */ React85.createElement(Spacer.Horizontal, null),
     /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 }),
     /* @__PURE__ */ React85.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, right),