@noya-app/noya-designsystem 0.1.38 → 0.1.40

package/src/components/FillInputField.tsx

@@ -2,6 +2,7 @@ import { Sketch } from "@noya-app/noya-file-format";
 import React, { forwardRef, memo } from "react";
 import { SketchPattern } from "../utils/sketchPattern";
 import { FillPreviewBackground } from "./FillPreviewBackground";
+import { cx } from "../utils/classNames";
 
 const FillButton = forwardRef<
   HTMLButtonElement,
@@ -9,7 +10,10 @@ const FillButton = forwardRef<
 >(({ className, ...props }, ref) => (
   <button
     ref={ref}
-    className={`outline-none p-0 w-[50px] h-[27px] rounded overflow-hidden border-none shadow-[0_0_0_1px_var(--divider)_inset] bg-transparent relative focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_var(--primary)] ${className ?? ""}`}
+    className={cx(
+      `outline-none p-0 w-[50px] h-[27px] rounded overflow-hidden border-none shadow-[0_0_0_1px_var(--divider)_inset] bg-transparent relative focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_var(--primary)] `,
+      className
+    )}
     {...props}
   />
 ));

package/src/components/FillPreviewBackground.tsx

@@ -7,7 +7,6 @@ import { cssVars } from "../theme";
 import { getGradientBackground } from "../utils/getGradientBackground";
 import { sketchColorToRgbaString } from "../utils/sketchColor";
 import { SketchPattern } from "../utils/sketchPattern";
-import { cn } from "../utils/tailwind";
 
 const dotsHorizontalSvg = (fillColor: string) => `
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='${fillColor}'>
@@ -22,10 +21,7 @@ const Background = memo(function Background({
 }) {
   return (
     <span
-      className={cn(
-        "absolute inset-0",
-        background ? `bg-[${background}]` : "bg-input-background"
-      )}
+      className={`${background ? `bg-[${background}]` : "bg-input-background"} absolute inset-0`}
     />
   );
 });

package/src/components/GridView.tsx

@@ -1,9 +1,9 @@
 import { KeyModifiers } from "@noya-app/noya-keymap";
+import { forwardRefGeneric } from "@noya-app/react-utils";
 import React, {
   createContext,
   CSSProperties,
   ForwardedRef,
-  forwardRef,
   memo,
   ReactNode,
   useCallback,
@@ -11,6 +11,7 @@ import React, {
   useMemo,
 } from "react";
 import { useHover } from "../hooks/useHover";
+import { cx } from "../utils/classNames";
 import withSeparatorElements from "../utils/withSeparatorElements";
 import { ActivityIndicator } from "./ActivityIndicator";
 import { ContextMenu } from "./ContextMenu";
@@ -18,7 +19,6 @@ import { MenuItem } from "./internal/Menu";
 import { ScrollArea } from "./ScrollArea";
 import { Spacer } from "./Spacer";
 import { Tooltip } from "./Tooltip";
-import { cn } from "../utils/tailwind";
 
 export type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
 
@@ -62,34 +62,51 @@ const sizes: Record<
   },
 };
 
-const ItemTitle = ({showBackground, children}: {showBackground?: boolean, children?: React.ReactNode}) => {
-    return (
-      <span
-        className={`font-sans text-heading5 leading-[1] text-text font-medium select-none whitespace-pre overflow-hidden text-ellipsis ${
-          showBackground &&
-          "bg-sidebar-background border border-dividerSubtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"
-        }`}
-      >
-        {children}
-      </span>
-    );
-
-}
+const ItemTitle = ({
+  showBackground,
+  children,
+}: {
+  showBackground?: boolean;
+  children?: React.ReactNode;
+}) => {
+  return (
+    <span
+      className={`font-sans text-heading5 leading-[1] text-text font-medium select-none whitespace-pre overflow-hidden text-ellipsis ${
+        showBackground &&
+        "bg-sidebar-background border border-dividerSubtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"
+      }`}
+    >
+      {children}
+    </span>
+  );
+};
 
-const ItemDescription = ({showBackground, children}: {showBackground?: boolean, children?: React.ReactNode}) => {
-    return (
-      <span
-        className={`font-sans text-heading5 font-normal leading-[1] text-[0.7rem] text-text-muted select-none whitespace-pre overflow-hidden text-ellipsis ${
-          showBackground &&
-          "bg-sidebar-background border border-dividerSubtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"
-        }`}
-      >
-        {children}
-      </span>
-    );
-  };
+const ItemDescription = ({
+  showBackground,
+  children,
+}: {
+  showBackground?: boolean;
+  children?: React.ReactNode;
+}) => {
+  return (
+    <span
+      className={`font-sans text-heading5 font-normal leading-[1] text-[0.7rem] text-text-muted select-none whitespace-pre overflow-hidden text-ellipsis ${
+        showBackground &&
+        "bg-sidebar-background border border-dividerSubtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"
+      }`}
+    >
+      {children}
+    </span>
+  );
+};
 
-const SectionTitle = ({last = false, children}: { last?: boolean; children?: React.ReactNode }) => {
+const SectionTitle = ({
+  last = false,
+  children,
+}: {
+  last?: boolean;
+  children?: React.ReactNode;
+}) => {
   return (
     <span
       className={`font-sans text-heading3 font-medium user-select-none whitespace-pre overflow-hidden text-ellipsis ${last ? "text-text" : "text-text-muted"}`}
@@ -116,7 +133,7 @@ interface ItemProps<MenuItemType extends string = string> {
   style?: CSSProperties;
 }
 
-const GridViewItem = forwardRef(function GridViewItem<
+const GridViewItem = forwardRefGeneric(function GridViewItem<
   MenuItemType extends string,
 >(
   {
@@ -183,17 +200,18 @@ const GridViewItem = forwardRef(function GridViewItem<
       onKeyDown={handleKeyDown}
     >
       <div
-        className={cn(
-          "flex flex-1 items-center justify-center",
-          "bg-sidebar-background rounded-[2px] overflow-hidden",
-          "cursor-pointer",
-          selected
-            ? "border border-primary"
-            : bordered
-              ? "border border-divider"
-              : "border border-transparent",
-          disabled ? "opacity-50" : "hover:opacity-85 active:opacity-70"
-        )}
+        className={`flex flex-1 items-center justify-center
+          bg-sidebar-background rounded-[2px] overflow-hidden
+          cursor-pointer
+          ${
+            selected
+              ? "border border-primary"
+              : bordered
+                ? "border border-divider"
+                : "border border-transparent"
+          }
+          ${disabled ? "opacity-50" : "hover:opacity-85 active:opacity-70"}
+        `}
         onClick={handleClick}
         onDoubleClick={onDoubleClick}
         onContextMenu={onContextMenu}
@@ -237,10 +255,8 @@ const GridViewItem = forwardRef(function GridViewItem<
       <Tooltip
         content={
           <div className="flex flex-col gap-0.5">
-            <ItemTitle >{title}</ItemTitle>
-            <ItemDescription>
-              {subtitle}
-            </ItemDescription>
+            <ItemTitle>{title}</ItemTitle>
+            <ItemDescription>{subtitle}</ItemDescription>
           </div>
         }
       >
@@ -303,7 +319,10 @@ function GridViewRoot({
 
   return (
     <GridViewContext.Provider value={contextValue}>
-      <div onClick={handleClick} className={`flex flex-col ${scrollable ? "flex-1" : "flex-[0_0_auto]"}`}>
+      <div
+        onClick={handleClick}
+        className={`flex flex-col ${scrollable ? "flex-1" : "flex-[0_0_auto]"}`}
+      >
         {scrollable ? <ScrollArea>{children}</ScrollArea> : children}
       </div>
     </GridViewContext.Provider>
@@ -321,7 +340,13 @@ function GridViewSection({
   const gapStyle = { gap: `${sizes[size].gap}px` };
 
   return (
-    <div className={cn(className, "text-text grid", `grid-cols-[auto-fill,_minmax(${sizes[size].itemWidth}px,_1fr)]`)} style={gapStyle}>
+    <div
+      className={cx(
+        `grid-cols-[auto-fill,_minmax(${sizes[size].itemWidth}px,_1fr)] text-text grid `,
+        className
+      )}
+      style={gapStyle}
+    >
       {children}
     </div>
   );

package/src/components/InputField.tsx

@@ -1,9 +1,10 @@
 import { CaretDownIcon } from "@noya-app/noya-icons";
-import { assignRef } from "@noya-app/react-utils";
+import { assignRef, memoGeneric } from "@noya-app/react-utils";
 import { Property } from "csstype";
 import React, {
   Children,
   createContext,
+  FocusEventHandler,
   ForwardedRef,
   forwardRef,
   isValidElement,
@@ -19,6 +20,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { cx } from "../utils/classNames";
 import handleNudge from "../utils/handleNudge";
 import { Button } from "./Button";
 import { DropdownMenu } from "./DropdownMenu";
@@ -81,6 +83,7 @@ const LabelContainer = forwardRef(function LabelContainer(
   }: LabelContainerProps,
   ref: ForwardedRef<HTMLLabelElement>
 ) {
+  const { buttonSize } = useContext(InputFieldContext);
   const memoizedStyles = useMemo(
     () => ({
       left:
@@ -94,26 +97,27 @@ const LabelContainer = forwardRef(function LabelContainer(
       right:
         $labelPosition === "end"
           ? $size === "large"
-            ? "6px"
+            ? `${6 + (buttonSize ?? 0)}px`
             : $size === "medium"
-              ? "2px"
-              : "0px"
+              ? `${2 + (buttonSize ?? 0)}px`
+              : `${buttonSize ?? 0}px`
           : "",
       ...style,
     }),
-    [$labelPosition, $size, style]
+    [$labelPosition, $size, buttonSize, style]
   );
 
   return (
     <label
       ref={ref}
-      className={`absolute top-0 bottom-0 flex items-center font-sans text-label font-bold uppercase text-text-disabled select-none z-label pointer-events-none ${
+      className={cx(
+        "absolute top-0 bottom-0 flex items-center font-sans text-label font-bold uppercase text-text-disabled select-none z-label pointer-events-none",
         $labelPosition === "start"
-          ? `justify-start pl-[6px]`
-          : $labelPosition === "end"
-            ? `justify-end ${$hasDropdown ? "pr-[16px]" : "pr-[6px]"}`
-            : ""
-      } ${className ?? ""}`}
+          ? `justify-start pl-1.5`
+          : $labelPosition === "end" &&
+              `justify-end ${$hasDropdown ? "pr-4" : "pr-1.5"}`,
+        className
+      )}
       style={memoizedStyles}
       {...props}
     />
@@ -122,8 +126,6 @@ const LabelContainer = forwardRef(function LabelContainer(
 
 /**
  * Inserts a Label at the start or end of the input given a `labelPosition`on InputField.Root.
- *
- * Should not be used with an InputField.Button.
  */
 const InputFieldLabel = memo(
   forwardRef(function InputFieldLabel(
@@ -171,7 +173,7 @@ const DropdownContainer = forwardRef<
 >(({ className, ...props }, ref) => (
   <span
     ref={ref}
-    className={`absolute inset-y-0 right-0 flex flex-col ${className ?? ""}`}
+    className={cx("absolute inset-y-0 right-0 flex flex-col", className)}
     {...props}
   />
 ));
@@ -183,7 +185,7 @@ interface InputFieldDropdownProps<T extends string> {
   children?: ReactNode;
 }
 
-const InputFieldDropdownMenu = memo(function InputFieldDropdownMenu<
+const InputFieldDropdownMenu = memoGeneric(function InputFieldDropdownMenu<
   T extends string,
 >({ id, items, onSelect, children }: InputFieldDropdownProps<T>) {
   const { size } = useContext(InputFieldContext);
@@ -224,15 +226,18 @@ const ButtonContainer = forwardRef<
 >(({ $size, className, ...props }, ref) => (
   <span
     ref={ref}
-    className={`absolute ${
+    className={cx(
+      "absolute",
       $size === "large"
-        ? "right-[9px] top-[10px]"
+        ? "right-[9px] top-2.5"
         : $size === "medium"
-          ? "right-[4px] top-[4px]"
+          ? "right-1 top-1"
           : $size === "small"
-            ? "right-[2px] top-[2px]"
-            : ""
-    } ${className ?? ""}`}
+            ? "right-0.5 top-0.5"
+            : "",
+      "z-label",
+      className
+    )}
     {...props}
   />
 ));
@@ -325,8 +330,10 @@ type InputElementProps = {
   $size: InputFieldSize;
   children?: React.ReactNode;
   className?: string;
+  style?: React.CSSProperties;
   value?: string;
   onSubmit?: (value: string) => void;
+  as?: "input" | "span";
 };
 
 const InputElement = forwardRef(
@@ -344,43 +351,73 @@ const InputElement = forwardRef(
       children,
       value,
       onSubmit,
+      as = "input",
       ...props
     }: InputElementProps,
     ref: ForwardedRef<any>
   ) => {
     const paddingLeft =
-      ($size === "large" ? 10 : $size === "medium" ? 6 : 4) +
-      ($labelSize && $labelPosition === "start" ? 6 + $labelSize : 0);
+      $variant === "bare"
+        ? 0
+        : ($size === "large" ? 10 : $size === "medium" ? 6 : 4) +
+          ($labelSize && $labelPosition === "start" ? 6 + $labelSize : 0);
 
     const paddingRight =
-      ($size === "large" ? 10 : $size === "medium" ? 6 : 1) +
-      ($labelSize && $labelPosition === "end" ? 6 + $labelSize : 0) +
-      ($hasDropdown ? 11 : 0);
+      $variant === "bare"
+        ? 0
+        : ($size === "large" ? 10 : $size === "medium" ? 6 : 1) +
+          ($labelSize && $labelPosition === "end" ? 6 + $labelSize : 0) +
+          ($hasDropdown ? 11 : 0);
 
     const memoizedStyles = useMemo(
       () => ({
         paddingLeft: `${paddingLeft}px`,
         paddingRight: `${paddingRight}px`,
+        ...props.style,
       }),
-      [paddingLeft, paddingRight]
+      [paddingLeft, paddingRight, props.style]
     );
 
+    const inputClassName = cx(
+      "flex w-0 flex-1 relative border-0 outline-none min-w-0 self-stretch rounded bg-input-background focus:ring-2 focus:ring-primary placeholder:text-text-disabled",
+      readOnly
+        ? "text-text-muted"
+        : disabled
+          ? "text-text-disabled"
+          : "text-text",
+      "font-sans font-normal",
+      $textAlign && `text-${$textAlign}`,
+      $size === "small"
+        ? "text-[11px] leading-[19px] py-[1px]"
+        : $size === "large"
+          ? "py-2.5 text-heading5"
+          : $size === "medium"
+            ? "py-1  text-heading5"
+            : $variant === "bare" && "py-1 -m-1",
+      className
+    );
+
+    if (as === "span") {
+      return (
+        <span
+          ref={ref}
+          {...props}
+          className={inputClassName}
+          style={memoizedStyles}
+        >
+          {children}
+        </span>
+      );
+    }
+
     return (
       <TextInput
+        ref={ref}
         value={value ?? ""}
         onSubmit={onSubmit ?? (() => {})}
-        ref={ref}
-        className={`flex w-0 flex-[1_1_0px] relative border-0 outline-none min-w-0 self-stretch rounded bg-input-background focus:ring-2 focus:ring-primary placeholder:text-text-disabled ${readOnly ? "text-text-muted" : disabled ? "text-text-disabled" : "text-text"} font-sans font-normal ${$textAlign && `text-${$textAlign}`} ${
-          $size === "small"
-            ? "text-[11px] leading-[19px] py-[1px]"
-            : $size === "large"
-              ? "py-[10px] text-heading5"
-              : $size === "medium"
-                ? "py-1  text-heading5"
-                : $variant === "bare" && "p-1 -m-1"
-        } ${className ?? ""}`}
-        style={memoizedStyles}
         {...props}
+        className={inputClassName}
+        style={memoizedStyles}
       />
     );
   }
@@ -436,26 +473,29 @@ const InputFieldInput = forwardRef(function InputFieldInput(
 });
 
 const InputFieldTypeahead = (props: { prefix: string; value: string }) => {
-  const {
-    labelPosition,
-    labelSize,
-    hasDropdown,
-    size,
-    // onFocusChange,
-  } = useContext(InputFieldContext);
+  const { labelPosition, labelSize, hasDropdown, size } =
+    useContext(InputFieldContext);
 
   return (
     <InputElement
+      as="span"
       $labelPosition={labelPosition}
       $labelSize={labelSize}
       $hasDropdown={hasDropdown}
       $size={size}
-      // onFocusChange={onFocusChange}
-      // readOnly
-      // placeholder={props.value}
-      {...props}
-      value=""
-      className="absolute inset-0 w-full h-full pointer-events-none bg-transparent shadow-none"
+      style={useMemo(
+        () => ({
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          pointerEvents: "none",
+          background: "transparent",
+          boxShadow: "none",
+          whiteSpace: "pre",
+        }),
+        []
+      )}
     >
       <span style={{ opacity: 0 }}>{props.prefix}</span>
       <span style={{ opacity: 0.5 }}>
@@ -476,6 +516,8 @@ type InputFieldNumberInputProps = Omit<
   value: number | undefined;
   onNudge?: (value: number) => void;
   variant?: "bare";
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
 } & (
     | {
         onChange: (value: number) => void;
@@ -584,15 +626,18 @@ const RootContainer = forwardRef<
   HTMLDivElement,
   {
     $width?: number;
-    $flex?: string;
     className?: string;
     children?: React.ReactNode;
     style?: React.CSSProperties;
   }
->(({ $width, $flex, className, ...props }, ref) => (
+>(({ $width, className, ...props }, ref) => (
   <div
     ref={ref}
-    className={`flex flex-row relative ${$flex ? `flex-[${$flex}]` : "flex-1"} ${$width || $width === 0 ? `max-w-[${$width}px]` : ""} ${className ?? ""}`}
+    className={cx("flex flex-row relative flex-1", className)}
+    style={{
+      maxWidth: $width || $width === 0 ? `${$width}px` : undefined,
+      ...props.style,
+    }}
     {...props}
   />
 ));
@@ -691,16 +736,16 @@ function InputFieldRoot({
   );
 
   const rootElement = (
-    <RootContainer
-      $width={width}
-      $flex={flex}
-      style={style}
-      className={className}
-    >
+    <RootContainer $width={width} style={style} className={className}>
       {children}
     </RootContainer>
   );
 
+  const measuredWidthObject = useMemo(
+    () => (measuredWidth ? { width: measuredWidth + 12 } : undefined),
+    [measuredWidth]
+  );
+
   return (
     <InputFieldContext.Provider value={contextValue}>
       {renderPopoverContent ? (
@@ -718,9 +763,12 @@ function InputFieldRoot({
             event.stopPropagation();
           }}
         >
-          {measuredWidth && (
-            <div className={`flex flex-col w-[${measuredWidth}] hidden`}>
-              {renderPopoverContent({ width: measuredWidth })}
+          {measuredWidthObject && (
+            <div
+              className="flex flex-col overflow-hidden"
+              style={measuredWidthObject}
+            >
+              {renderPopoverContent(measuredWidthObject)}
             </div>
           )}
         </Popover>
@@ -735,6 +783,7 @@ const PrimitiveInputField = ({
   readOnly,
   disabled,
   className,
+  style,
   ...props
 }: {
   readOnly?: boolean;
@@ -742,18 +791,34 @@ const PrimitiveInputField = ({
 } & React.DetailedHTMLProps<
   React.InputHTMLAttributes<HTMLInputElement>,
   HTMLInputElement
->) => (
-  <input
-    className={`flex w-0 flex-1 relative border-none outline-none min-w-0 self-stretch rounded py-1 px-1.5 bg-input-background select-all pointer-events-[all] focus:ring-2 focus:ring-primary font-sans font-normal text-heading5 placeholder:text-text-disabled focus:z-interactable ${
-      readOnly
-        ? "text-text-muted"
-        : disabled
-          ? "text-text-disabled"
-          : "text-text"
-    } ${className ?? ""}`}
-    {...props}
-  />
-);
+>) => {
+  const { labelSize, labelPosition, buttonSize } =
+    useContext(InputFieldContext);
+
+  const memoizedStyles = useMemo(
+    () => ({
+      paddingLeft: `${labelSize && labelPosition === "start" ? 6 + labelSize : 6}px`,
+      paddingRight: `${labelPosition === "end" ? 6 + (labelSize ?? 0) + (buttonSize ?? 0) : 6}px`,
+      ...style,
+    }),
+    [labelSize, labelPosition, buttonSize, style]
+  );
+  return (
+    <input
+      style={memoizedStyles}
+      className={cx(
+        "flex w-0 flex-1 relative border-none outline-none min-w-0 self-stretch rounded py-1 bg-input-background select-all pointer-events-[all] focus:ring-2 focus:ring-primary font-sans font-normal text-heading5 placeholder:text-text-disabled focus:z-interactable",
+        readOnly
+          ? "text-text-muted"
+          : disabled
+            ? "text-text-disabled"
+            : "text-text",
+        className
+      )}
+      {...props}
+    />
+  );
+};
 
 export namespace InputField {
   export const Root = memo(InputFieldRoot);