@noya-app/noya-designsystem 0.1.73 → 0.1.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.73",
+  "version": "0.1.74",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -23,7 +23,7 @@
     "@base-ui-components/react": "1.0.0-beta.4",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.30",
+    "@noya-app/noya-colorpicker": "0.1.31",
     "@noya-app/noya-utils": "0.1.9",
     "@noya-app/noya-geometry": "0.1.16",
     "@noya-app/noya-icons": "0.1.16",

package/src/components/BaseToolbar.tsx

@@ -62,6 +62,23 @@ export function BaseToolbar({
   innerClassName,
   enableAbsoluteBreakpoint = true,
 }: BaseToolbarProps) {
+  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 && (
+    <div className={childrenContainerClassName}>
+      <div className="n-flex n-items-center n-justify-center n-pointer-events-auto">
+        {children}
+      </div>
+    </div>
+  );
+
+  const leftElement = left && (
+    <div className="n-flex n-gap-toolbar-separator">{left}</div>
+  );
+
   return (
     <BaseToolbarContainer
       showDivider={showDivider}
@@ -76,23 +93,20 @@ export function BaseToolbar({
         </>
       )}
       <Spacer.Horizontal size={10} />
-      {left && (
+      {childrenElement}
+      {leftElement && (
         <>
-          <div className="n-flex n-gap-toolbar-separator">{left}</div>
+          {childrenElement && (
+            <>
+              <Spacer.Horizontal size={10} className="@xl/toolbar:!n-hidden" />
+              <DividerVertical className="@xl/toolbar:!n-hidden" />
+            </>
+          )}
+          <Spacer.Horizontal size={10} className="@xl/toolbar:!n-hidden" />
+          {leftElement}
           <Spacer.Horizontal size={10} />
         </>
       )}
-      {children && (
-        <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"
-          }
-        >
-          <div className="n-flex n-items-center n-justify-center n-pointer-events-auto">
-            {children}
-          </div>
-        </div>
-      )}
       <Spacer.Horizontal />
       <Spacer.Horizontal size={10} />
       <div className="n-flex n-gap-toolbar-separator">{right}</div>

package/src/components/InputField.tsx

@@ -198,6 +198,11 @@ type InputElementProps = {
   value?: string;
   onSubmit?: (value: string) => void;
   as?: "input" | "span";
+  /**
+   * If false, don't attach the shared inputRef to this element.
+   * Useful for decorative elements like the typeahead overlay.
+   */
+  attachInputRef?: boolean;
 };
 
 const InputElement = forwardRef(
@@ -213,13 +218,17 @@ const InputElement = forwardRef(
       onSubmit,
       as = "input",
       style,
+      attachInputRef = true,
       ...props
     }: InputElementProps,
     forwardedRef: ForwardedRef<any>
   ) => {
     const { endWidth, inputRef, size, id, startWidth } = useInputFieldContext();
 
-    const ref = useMergeRefs(inputRef, forwardedRef);
+    const ref = useMergeRefs(
+      attachInputRef ? inputRef : null,
+      forwardedRef
+    );
 
     const spacingStyles = getFieldSpacing({
       endWidth,
@@ -322,6 +331,7 @@ const InputFieldTypeahead = (props: {
   return (
     <InputElement
       as="span"
+      attachInputRef={false}
       style={useMemo(
         () => ({
           position: "absolute",
@@ -551,8 +561,10 @@ function InputFieldRoot({
   const startRef = React.useRef<HTMLSpanElement>(null);
   const inputRef = React.useRef<HTMLInputElement>(null);
   const endRef = React.useRef<HTMLSpanElement>(null);
+  const rootRef = React.useRef<HTMLDivElement>(null);
 
   const measuredInputSize = useSize(inputRef, "width");
+  const measuredRootSize = useSize(rootRef, "width");
   const measuredStartSize = useSize(startRef, "width");
   const measuredEndSize = useSize(endRef, "width");
   const labelType = useLabelType();
@@ -596,7 +608,12 @@ function InputFieldRoot({
   );
 
   const rootElement = (
-    <RootContainer $width={width} style={style} className={className}>
+    <RootContainer
+      ref={rootRef}
+      $width={width}
+      style={style}
+      className={className}
+    >
       {children}
       {start && (
         <span ref={startRef} className={cx(startBaseStyles, startClassName)}>
@@ -617,10 +634,25 @@ function InputFieldRoot({
     </RootContainer>
   );
 
+  const measuredWidth = useMemo(() => {
+    const inputWidth =
+      measuredInputSize && measuredInputSize.width > 0
+        ? measuredInputSize.width
+        : undefined;
+    const rootWidth =
+      measuredRootSize && measuredRootSize.width > 0
+        ? measuredRootSize.width
+        : undefined;
+
+    return inputWidth ?? rootWidth ?? width;
+  }, [measuredInputSize, measuredRootSize, width]);
+
   const measuredWidthObject = useMemo(
     () =>
-      measuredInputSize ? { width: measuredInputSize.width + 4 } : undefined,
-    [measuredInputSize]
+      measuredWidth && measuredWidth > 0
+        ? { width: measuredWidth + 4 }
+        : undefined,
+    [measuredWidth]
   );
 
   return (

package/src/components/Spacer.tsx

@@ -1,9 +1,11 @@
 import type { ForwardedRef } from "react";
 import * as React from "react";
+import { cx } from "../utils/classNames";
 
 interface Props {
   size?: number | string;
   inline?: boolean;
+  className?: string;
 }
 
 /* ----------------------------------------------------------------------------
@@ -11,10 +13,16 @@ interface Props {
  * ------------------------------------------------------------------------- */
 
 const SpacerVertical = React.forwardRef<HTMLSpanElement, Props>(
-  ({ size, inline, ...props }, ref: ForwardedRef<HTMLSpanElement>) => {
+  (
+    { size, inline, className, ...props },
+    ref: ForwardedRef<HTMLSpanElement>
+  ) => {
     return (
       <span
-        className={`${inline ? "n-inline-block" : "n-block"} ${size === undefined ? "n-flex n-flex-1" : ""}`}
+        className={cx(
+          `${inline ? "n-inline-block" : "n-block"} ${size === undefined ? "n-flex n-flex-1" : ""}`,
+          className
+        )}
         style={
           size
             ? {
@@ -34,10 +42,16 @@ const SpacerVertical = React.forwardRef<HTMLSpanElement, Props>(
  * ------------------------------------------------------------------------- */
 
 const SpacerHorizontal = React.forwardRef<HTMLSpanElement, Props>(
-  ({ size, inline, ...props }, ref: ForwardedRef<HTMLSpanElement>) => {
+  (
+    { size, inline, className, ...props },
+    ref: ForwardedRef<HTMLSpanElement>
+  ) => {
     return (
       <span
-        className={`${inline ? "n-inline-block" : "n-block"} ${size === undefined ? "n-flex n-flex-1" : ""}`}
+        className={cx(
+          `${inline ? "n-inline-block" : "n-block"} ${size === undefined ? "n-flex n-flex-1" : ""}`,
+          className
+        )}
         style={
           size
             ? {