@noya-app/noya-designsystem 0.1.73 → 0.1.75

package/dist/index.js

@@ -4024,11 +4024,14 @@ function Icon({
 // src/components/Spacer.tsx
 var React8 = __toESM(require("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,
@@ -4039,11 +4042,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,
@@ -5045,10 +5051,14 @@ var InputElement = (0, import_react29.forwardRef)(
     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,
@@ -5120,6 +5130,7 @@ var InputFieldTypeahead = (props) => {
     InputElement,
     {
       as: "span",
+      attachInputRef: false,
       style: (0, import_react29.useMemo)(
         () => ({
           position: "absolute",
@@ -5250,7 +5261,9 @@ function InputFieldRoot({
   const startRef = import_react29.default.useRef(null);
   const inputRef = import_react29.default.useRef(null);
   const endRef = import_react29.default.useRef(null);
+  const rootRef = import_react29.default.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();
@@ -5283,18 +5296,34 @@ function InputFieldRoot({
     () => /* @__PURE__ */ import_react29.default.createElement(Label, { htmlFor: id, className: "!n-text-text-disabled" }, labelProp ?? label),
     [id, labelProp, label]
   );
-  const rootElement = /* @__PURE__ */ import_react29.default.createElement(RootContainer, { $width: width, style: style2, className }, children, start && /* @__PURE__ */ import_react29.default.createElement("span", { ref: startRef, className: cx(startBaseStyles, startClassName) }, start), (end || label) && /* @__PURE__ */ import_react29.default.createElement(
-    "span",
+  const rootElement = /* @__PURE__ */ import_react29.default.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__ */ import_react29.default.createElement("span", { ref: startRef, className: cx(startBaseStyles, startClassName) }, start),
+    (end || label) && /* @__PURE__ */ import_react29.default.createElement(
+      "span",
+      {
+        ref: endRef,
+        className: cx(endStyles, label && end && "n-gap-1.5", endClassName)
+      },
+      labelProp ? insetLabel : label && labelType === "inset" && insetLabel,
+      end
+    )
+  );
+  const measuredWidth = (0, import_react29.useMemo)(() => {
+    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 = (0, import_react29.useMemo)(
-    () => measuredInputSize ? { width: measuredInputSize.width + 4 } : void 0,
-    [measuredInputSize]
+    () => measuredWidth && measuredWidth > 0 ? { width: measuredWidth + 4 } : void 0,
+    [measuredWidth]
   );
   return /* @__PURE__ */ import_react29.default.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ import_react29.default.createElement(
     Popover,
@@ -11040,9 +11069,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() {
@@ -11326,6 +11374,13 @@ var Combobox = memoGeneric(
       }
     }
     const initialValueString = getInitialValueString();
+    const resetSelectionOptions = (0, import_react73.useMemo)(
+      () => props.mode === "string" ? { selectedItemTitle: initialValueString } : {
+        selectedItemTitle: initialValueString,
+        selectedItemValue: props.value?.value?.toString()
+      },
+      [initialValueString, props.mode, props.value]
+    );
     const [comboboxState] = (0, import_react73.useState)(
       () => new ComboboxState(
         items,
@@ -11336,6 +11391,7 @@ var Combobox = memoGeneric(
     const state = useComboboxState(comboboxState);
     const [isFocused, setIsFocused] = (0, import_react73.useState)(false);
     const listRef = (0, import_react73.useRef)(null);
+    const menuOpenedRef = (0, import_react73.useRef)(false);
     const [shouldBlur, setShouldBlur] = (0, import_react73.useState)(false);
     const { fieldId: id } = useLabel({
       fieldId: rest.id
@@ -11353,9 +11409,20 @@ var Combobox = memoGeneric(
         listRef.current.scrollToIndex(selectedIndex);
       }
     }, [selectedIndex]);
+    (0, import_react73.useEffect)(() => {
+      if (!shouldShowMenu) {
+        menuOpenedRef.current = false;
+        return;
+      }
+      if (menuOpenedRef.current) return;
+      menuOpenedRef.current = true;
+      if (listRef.current) {
+        listRef.current.scrollToIndex(selectedIndex);
+      }
+    }, [shouldShowMenu, selectedIndex]);
     const handleBlur = (0, import_react73.useCallback)(() => {
       ref.current?.blur();
-      comboboxState.reset(initialValueString);
+      comboboxState.reset(initialValueString, resetSelectionOptions);
       if (props.mode === "string") {
         props.onBlur?.(
           state.filter === state.lastSubmittedValue.filter,
@@ -11371,12 +11438,20 @@ var Combobox = memoGeneric(
         }
       }
       setIsFocused(false);
-    }, [filter, initialValueString, props, state, comboboxState]);
+    }, [
+      filter,
+      initialValueString,
+      props,
+      resetSelectionOptions,
+      state,
+      comboboxState
+    ]);
     const handleFocus = (0, import_react73.useCallback)(
       (event) => {
         setIsFocused(true);
         comboboxState.reset(
-          openMenuBehavior === "showAllItems" ? "" : initialValueString
+          openMenuBehavior === "showAllItems" ? "" : initialValueString,
+          resetSelectionOptions
         );
         if (ref.current) {
           const length = ref.current.value.length;
@@ -11384,7 +11459,13 @@ var Combobox = memoGeneric(
         }
         onFocus?.(event);
       },
-      [initialValueString, onFocus, openMenuBehavior, comboboxState]
+      [
+        initialValueString,
+        onFocus,
+        openMenuBehavior,
+        resetSelectionOptions,
+        comboboxState
+      ]
     );
     const handleUpdateSelection = (0, import_react73.useCallback)(
       (item) => {
@@ -11549,7 +11630,8 @@ var Combobox = memoGeneric(
           return;
         }
         comboboxState.reset(
-          openMenuBehavior === "showAllItems" ? "" : initialValueString
+          openMenuBehavior === "showAllItems" ? "" : initialValueString,
+          resetSelectionOptions
         );
         ref.current?.focus();
       },
@@ -11558,6 +11640,7 @@ var Combobox = memoGeneric(
         openMenuBehavior,
         initialValueString,
         handleBlur,
+        resetSelectionOptions,
         comboboxState
       ]
     );
@@ -15454,6 +15537,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__ */ import_react88.default.createElement("div", { className: childrenContainerClassName }, /* @__PURE__ */ import_react88.default.createElement("div", { className: "n-flex n-items-center n-justify-center n-pointer-events-auto" }, children));
+  const leftElement = left && /* @__PURE__ */ import_react88.default.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, left);
   return /* @__PURE__ */ import_react88.default.createElement(
     BaseToolbarContainer,
     {
@@ -15464,14 +15553,8 @@ function BaseToolbar({
     },
     logo && /* @__PURE__ */ import_react88.default.createElement(import_react88.default.Fragment, null, logo, /* @__PURE__ */ import_react88.default.createElement(DividerVertical, null)),
     /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, { size: 10 }),
-    left && /* @__PURE__ */ import_react88.default.createElement(import_react88.default.Fragment, null, /* @__PURE__ */ import_react88.default.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, left), /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, { size: 10 })),
-    children && /* @__PURE__ */ import_react88.default.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__ */ import_react88.default.createElement("div", { className: "n-flex n-items-center n-justify-center n-pointer-events-auto" }, children)
-    ),
+    childrenElement,
+    leftElement && /* @__PURE__ */ import_react88.default.createElement(import_react88.default.Fragment, null, childrenElement && /* @__PURE__ */ import_react88.default.createElement(import_react88.default.Fragment, null, /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, { size: 10, className: "@xl/toolbar:!n-hidden" }), /* @__PURE__ */ import_react88.default.createElement(DividerVertical, { className: "@xl/toolbar:!n-hidden" })), /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, { size: 10, className: "@xl/toolbar:!n-hidden" }), leftElement, /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, { size: 10 })),
     /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, null),
     /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, { size: 10 }),
     /* @__PURE__ */ import_react88.default.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, right),