@noya-app/noya-designsystem 0.1.48 → 0.1.50

package/src/components/InputField.tsx

@@ -6,7 +6,6 @@ import React, {
   FocusEventHandler,
   ForwardedRef,
   forwardRef,
-  LabelHTMLAttributes,
   memo,
   ReactNode,
   useCallback,
@@ -16,45 +15,35 @@ import React, {
   useState,
 } from "react";
 import { useLabel, useLabelPosition } from "../hooks/useLabel";
-import { cx } from "../utils/classNames";
+import { cx, mergeConflictingClassNames } from "../utils/classNames";
 import handleNudge from "../utils/handleNudge";
+import { getInsetEndStyles, InputSize, startBaseStyles } from "../utils/inputs";
 import { Button, ButtonRootProps } from "./Button";
 import { DropdownMenu } from "./DropdownMenu";
 import { MenuItem } from "./internal/Menu";
 import TextInput, { TextInputProps } from "./internal/TextInput";
-import { InsetLabel, LabelPosition } from "./Label";
+import { Label } from "./Label";
 import { Popover } from "./Popover";
 
 export type InputFieldSize = "small" | "medium" | "large";
 
 type InputFieldContextValue = {
-  labelWidth?: number;
-  buttonWidth?: number;
-  startWidth?: number;
-  /** @default medium */
-  size: InputFieldSize;
   isFocused: boolean;
   onFocusChange: (isFocused: boolean) => void;
   inputRef: ForwardedRef<HTMLInputElement>;
-  buttonRef: ForwardedRef<HTMLButtonElement>;
-  labelRef: ForwardedRef<HTMLLabelElement>;
   startRef: ForwardedRef<HTMLSpanElement>;
-  id?: string;
-  label?: ReactNode;
-  labelPosition?: LabelPosition;
-};
+  endRef: ForwardedRef<HTMLSpanElement>;
+  endWidth?: number;
+} & Pick<InputFieldRootProps, "endWidth" | "startWidth" | "size" | "id">;
 
 const InputFieldContext = createContext<InputFieldContextValue>({
-  labelWidth: undefined,
-  buttonWidth: undefined,
   startWidth: undefined,
   size: "medium",
   isFocused: false,
   onFocusChange: () => {},
   inputRef: null,
-  buttonRef: null,
-  labelRef: null,
   startRef: null,
+  endRef: null,
 });
 
 export const useInputFieldContext = () => useContext(InputFieldContext);
@@ -62,68 +51,22 @@ export const useInputFieldContext = () => useContext(InputFieldContext);
 const noop = () => {};
 
 export const getFieldSpacing = ({
-  buttonWidth = 0,
-  labelWidth = 0,
-  startWidth,
+  endWidth = 0,
+  startWidth = 0,
   variant,
 }: {
-  buttonWidth?: number;
-  labelWidth?: number;
+  endWidth?: number;
   startWidth?: number;
   variant?: InputFieldVariant;
 }) => ({
   paddingLeft: `${variant === "bare" ? startWidth : startWidth ? startWidth + 12 : 6}px`,
-  paddingRight: `${variant === "bare" ? 0 : labelWidth + buttonWidth + (labelWidth || buttonWidth ? 12 : 6)}px`,
+  paddingRight: `${variant === "bare" ? endWidth : endWidth ? endWidth + 12 : 6}px`,
 });
 
-/* ----------------------------------------------------------------------------
- * Label
- * ------------------------------------------------------------------------- */
-
-/**
- * Inserts a Label at the end of the input, unless overridden by LabeledField.
- */
-const InputFieldLabel = memo(
-  forwardRef(function InputFieldLabel(
-    props: LabelHTMLAttributes<HTMLLabelElement>,
-    forwardedRef: ForwardedRef<HTMLLabelElement>
-  ) {
-    const { labelRef, size, buttonWidth, label, id, labelPosition } =
-      useInputFieldContext();
-
-    const ref = useMergeRefs(labelRef, forwardedRef);
-
-    if (labelPosition !== "inset") return null;
-
-    return (
-      <InsetLabel
-        ref={ref}
-        size={size}
-        buttonWidth={buttonWidth}
-        htmlFor={id}
-        {...props}
-      >
-        {label}
-      </InsetLabel>
-    );
-  })
-);
-
 /* ----------------------------------------------------------------------------
  * Dropdown
  * ------------------------------------------------------------------------- */
 
-const DropdownContainer = forwardRef<
-  HTMLSpanElement,
-  { className?: string; children?: React.ReactNode }
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    className={cx("absolute inset-y-0 right-0 flex flex-col", className)}
-    {...props}
-  />
-));
-
 interface InputFieldDropdownProps<T extends string> {
   id?: string;
   items: MenuItem<T>[];
@@ -135,20 +78,18 @@ const InputFieldDropdownMenu = memoGeneric(function InputFieldDropdownMenu<
   T extends string,
 >({ id, items, onSelect, children }: InputFieldDropdownProps<T>) {
   return (
-    <DropdownContainer>
-      <DropdownMenu<T>
-        items={items}
-        onSelect={onSelect}
-        align="end"
-        sideOffset={8}
-      >
-        {children || (
-          <InputFieldButton variant="floating" id={id}>
-            <DropdownChevronIcon />
-          </InputFieldButton>
-        )}
-      </DropdownMenu>
-    </DropdownContainer>
+    <DropdownMenu<T>
+      items={items}
+      onSelect={onSelect}
+      align="end"
+      sideOffset={8}
+    >
+      {children || (
+        <InputFieldButton variant="floating" id={id}>
+          <DropdownChevronIcon />
+        </InputFieldButton>
+      )}
+    </DropdownMenu>
   );
 });
 
@@ -161,8 +102,6 @@ const InputFieldButton = memo(
   forwardRef(function InputFieldButton(
     props: React.ButtonHTMLAttributes<HTMLButtonElement> &
       ButtonRootProps & {
-        buttonClassName?: string;
-        buttonStyle?: React.CSSProperties;
         variant?: "floating" | "normal";
       },
     forwardedRef: ForwardedRef<HTMLButtonElement>
@@ -172,15 +111,11 @@ const InputFieldButton = memo(
       onClick,
       className,
       style,
-      buttonClassName,
-      buttonStyle,
       variant = "normal",
       as = "button",
       ...rest
     } = props;
-    const { size, inputRef, buttonRef } = useInputFieldContext();
-
-    const ref = useMergeRefs(buttonRef, forwardedRef);
+    const { size, inputRef } = useInputFieldContext();
 
     const defaultHandleClick = useCallback(
       (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -204,41 +139,35 @@ const InputFieldButton = memo(
       []
     );
 
+    const memoizedStyle = useMemo(
+      () => ({
+        ...(variant === "floating" && {
+          paddingLeft: "0px",
+          paddingRight: "0px",
+        }),
+        ...style,
+      }),
+      [style, variant]
+    );
+
     return (
-      <span
-        style={style}
+      <Button
+        as={as}
+        style={memoizedStyle}
+        ref={forwardedRef}
+        variant="floating"
+        onClick={onClick ?? defaultHandleClick}
+        onPointerDown={handlePointerDown}
+        tabIndex={-1}
+        size={size === "medium" ? "normal" : size}
         className={cx(
-          "absolute",
-          size === "large"
-            ? "right-1 top-2.5"
-            : size === "medium"
-              ? "right-1 top-1"
-              : size === "small"
-                ? "right-0.5 top-0.5"
-                : "",
-          "z-label",
-          variant === "floating" && "right-0",
-          className
+          className,
+          variant === "floating" && "bg-transparent shadow-none"
         )}
+        {...rest}
       >
-        <Button
-          as={as}
-          ref={ref}
-          variant="floating"
-          onClick={onClick ?? defaultHandleClick}
-          onPointerDown={handlePointerDown}
-          tabIndex={-1}
-          size={size === "medium" ? "normal" : size}
-          className={cx(
-            buttonClassName,
-            variant === "floating" && "bg-transparent shadow-none"
-          )}
-          style={buttonStyle}
-          {...rest}
-        >
-          {children}
-        </Button>
-      </span>
+        {children}
+      </Button>
     );
   })
 );
@@ -286,14 +215,12 @@ const InputElement = forwardRef(
     }: InputElementProps,
     forwardedRef: ForwardedRef<any>
   ) => {
-    const { buttonWidth, inputRef, labelWidth, size, id, startWidth } =
-      useInputFieldContext();
+    const { endWidth, inputRef, size, id, startWidth } = useInputFieldContext();
 
     const ref = useMergeRefs(inputRef, forwardedRef);
 
     const spacingStyles = getFieldSpacing({
-      buttonWidth,
-      labelWidth,
+      endWidth,
       variant: $variant,
       startWidth,
     });
@@ -317,12 +244,20 @@ const InputElement = forwardRef(
       className
     );
 
+    const mergedClassName = useMemo(
+      () =>
+        mergeConflictingClassNames(inputClassName, {
+          categories: ["text"],
+        }),
+      [inputClassName]
+    );
+
     if (as === "span") {
       return (
         <span
           ref={ref}
           {...props}
-          className={inputClassName}
+          className={mergedClassName}
           style={{ ...spacingStyles, ...style }}
         >
           {children}
@@ -337,7 +272,7 @@ const InputElement = forwardRef(
         id={id}
         onSubmit={onSubmit ?? (() => {})}
         {...props}
-        className={inputClassName}
+        className={mergedClassName}
         style={{ ...spacingStyles, ...style }}
       />
     );
@@ -549,16 +484,17 @@ const RootContainer = forwardRef<
   />
 ));
 
-const startStyles = "absolute left-1.5 inset-y-0 flex items-center";
-
 interface InputFieldRootProps {
   id?: string;
   children?: ReactNode;
+  start?: ReactNode;
+  end?: ReactNode;
+  label?: ReactNode;
   width?: number;
-  labelWidth?: number;
   startWidth?: number;
+  endWidth?: number;
   /** @default medium */
-  size?: InputFieldSize;
+  size?: InputSize;
   renderPopoverContent?: (options: { width: number }) => ReactNode;
   /**
    * if there is a popover, this is the offset from the trigger
@@ -568,38 +504,39 @@ interface InputFieldRootProps {
   onFocusChange?: (isFocused: boolean) => void;
   style?: React.CSSProperties;
   className?: string;
-  start?: ReactNode;
 }
 
 function InputFieldRoot({
-  id: idProp,
+  id,
   children,
   width,
   sideOffset = 3,
-  labelWidth,
-  startWidth,
+  startWidth: startWidthProp,
+  endWidth: endWidthProp,
   size = "medium",
   renderPopoverContent,
   onFocusChange,
   style,
   className,
   start,
+  end,
+  label: labelProp,
 }: InputFieldRootProps) {
-  const { fieldId: id, label } = useLabel({ fieldId: idProp });
   const randomId = useId();
-  const labelPosition = useLabelPosition();
 
   const [isFocused, setIsFocused] = React.useState(false);
 
   const startRef = React.useRef<HTMLSpanElement>(null);
-  const labelRef = React.useRef<HTMLLabelElement>(null);
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
   const inputRef = React.useRef<HTMLInputElement>(null);
+  const endRef = React.useRef<HTMLSpanElement>(null);
 
-  const measuredLabelSize = useSize(labelRef, "width");
-  const measuredButtonSize = useSize(buttonRef, "width");
   const measuredInputSize = useSize(inputRef, "width");
   const measuredStartSize = useSize(startRef, "width");
+  const measuredEndSize = useSize(endRef, "width");
+  const labelPosition = useLabelPosition();
+  const { label } = useLabel({ fieldId: id });
+
+  const endStyles = getInsetEndStyles(size);
 
   const handleFocusChange = useCallback(
     (isFocused: boolean) => {
@@ -609,48 +546,49 @@ function InputFieldRoot({
     [onFocusChange]
   );
 
+  const startWidth = measuredStartSize?.width ?? startWidthProp;
+  const endWidth = measuredEndSize?.width ?? endWidthProp;
+
   const contextValue = useMemo(
     (): InputFieldContextValue => ({
-      labelWidth: measuredLabelSize?.width ?? labelWidth,
-      buttonWidth: measuredButtonSize?.width,
-      startWidth: measuredStartSize?.width ?? startWidth,
+      startWidth,
+      endWidth,
       inputRef,
-      buttonRef,
-      labelRef,
       startRef,
+      endRef,
       size,
       isFocused,
       onFocusChange: handleFocusChange,
       id: id ?? randomId,
-      label,
-      labelPosition,
     }),
-    [
-      measuredLabelSize,
-      labelWidth,
-      measuredButtonSize,
-      size,
-      isFocused,
-      handleFocusChange,
-      inputRef,
-      id,
-      randomId,
-      label,
-      labelPosition,
-      measuredStartSize,
-      startWidth,
-    ]
+    [startWidth, endWidth, size, isFocused, handleFocusChange, id, randomId]
+  );
+
+  const insetLabel = useMemo(
+    () => (
+      <Label htmlFor={id} className="!text-text-disabled">
+        {labelProp ?? label}
+      </Label>
+    ),
+    [id, labelProp, label]
   );
 
   const rootElement = (
     <RootContainer $width={width} style={style} className={className}>
       {children}
       {start && (
-        <span ref={startRef} className={startStyles}>
+        <span ref={startRef} className={startBaseStyles}>
           {start}
         </span>
       )}
-      {label && <InputFieldLabel />}
+      {(end || label) && (
+        <span ref={endRef} className={cx(endStyles, label && end && "gap-1.5")}>
+          {labelProp
+            ? insetLabel
+            : label && labelPosition === "inset" && insetLabel}
+          {end}
+        </span>
+      )}
     </RootContainer>
   );
 
@@ -706,11 +644,10 @@ const PrimitiveInputField = ({
   React.InputHTMLAttributes<HTMLInputElement>,
   HTMLInputElement
 >) => {
-  const { id, labelWidth, buttonWidth } = useInputFieldContext();
+  const { id, endWidth } = useInputFieldContext();
 
   const spacingStyles = getFieldSpacing({
-    buttonWidth,
-    labelWidth,
+    endWidth,
   });
   const memoizedStyles = useMemo(
     () => ({ ...spacingStyles, ...style }),
@@ -745,16 +682,20 @@ const InputFieldSubcomponents = {
   NumberInput: memo(InputFieldNumberInput),
   DropdownMenu: InputFieldDropdownMenu,
   Button: InputFieldButton,
-  Label: InputFieldLabel,
   PrimitiveElement: PrimitiveInputField,
 } as const;
 
 // Create the main InputField component
 const InputFieldComponent = forwardRef<HTMLInputElement, InputFieldProps>(
-  function InputField({ children, ...props }: InputFieldProps, ref) {
+  function InputField(props: InputFieldProps, ref) {
     const {
+      children,
       width,
-      labelWidth,
+      endWidth,
+      startWidth,
+      label,
+      start,
+      end,
       size,
       renderPopoverContent,
       sideOffset,
@@ -767,7 +708,11 @@ const InputFieldComponent = forwardRef<HTMLInputElement, InputFieldProps>(
     return (
       <InputFieldSubcomponents.Root
         width={width}
-        labelWidth={labelWidth}
+        endWidth={endWidth}
+        startWidth={startWidth}
+        label={label}
+        start={start}
+        end={end}
         size={size}
         renderPopoverContent={renderPopoverContent}
         sideOffset={sideOffset}

package/src/components/Label.tsx

@@ -1,72 +1,9 @@
-import React, {
-  CSSProperties,
-  LabelHTMLAttributes,
-  forwardRef,
-  memo,
-  useMemo,
-} from "react";
-import { cx } from "../utils/classNames";
-import { InputFieldSize } from "./InputField";
+import React, { LabelHTMLAttributes, forwardRef, memo } from "react";
+import { mergeConflictingClassNames } from "../utils/classNames";
 
 export type LabelPosition = "inset" | "start" | "end" | "above";
 
-export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
-  /** @default start */
-  position?: Exclude<LabelPosition, "inset">;
-}
-
-export type InsetLabelProps = {
-  /** @default medium */
-  size?: InputFieldSize;
-  /** when used with an InputField.Root and label position is inset, it will add padding to the right of the label to account for the button */
-  buttonWidth?: number;
-} & LabelHTMLAttributes<HTMLLabelElement>;
-
-// apply to <label
-export const insetLabelTextStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] truncate pointer-events-none text-right`;
-
-// InsetLabelContainer
-export const insetLabelStyles = `flex items-center absolute top-0 bottom-0 z-label`;
-const getInsetLabelPosition = ({
-  buttonWidth,
-}: {
-  buttonWidth?: number;
-}): CSSProperties => ({
-  right: `${6 + (buttonWidth ?? 0)}px`,
-});
-
-export const InsetLabel = memo(
-  forwardRef<HTMLLabelElement, InsetLabelProps>(function InsetLabel(
-    { children, buttonWidth, size = "medium", className, style, ...props },
-    ref
-  ) {
-    const styles = useMemo(
-      () => ({
-        ...getInsetLabelPosition({
-          buttonWidth,
-        }),
-        ...style,
-      }),
-      [buttonWidth, style]
-    );
-
-    return (
-      <label
-        ref={ref}
-        style={styles}
-        className={cx(
-          insetLabelStyles,
-          insetLabelTextStyles,
-          size === "small" ? "min-h-[19px]" : "min-h-[27px]",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </label>
-    );
-  })
-);
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {}
 
 const labelStyles = "flex items-center select-none z-label relative";
 const labelTextStyles =
@@ -74,18 +11,22 @@ const labelTextStyles =
 
 export const Label = memo(
   forwardRef<HTMLLabelElement, LabelProps>(function Label(
-    { className, position = "start", children, ...props },
+    { className, children, ...props },
     ref
   ) {
     return (
       <label
         ref={ref}
-        className={cx(
-          labelStyles,
-          labelTextStyles,
-          "text-left min-h-[27px]",
-          (position === "start" || position === "end") && "self-start",
-          className
+        className={mergeConflictingClassNames(
+          [
+            labelStyles,
+            labelTextStyles,
+            "text-left min-h-input-height",
+            className,
+          ],
+          {
+            categories: ["color", "font"],
+          }
         )}
         {...props}
       >

package/src/components/LabeledField.tsx

@@ -4,6 +4,7 @@ import {
   LabelContext,
   LabelPositionContext,
   LabelPositionContextValue,
+  useLabelPosition,
   useLabelWidth,
 } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
@@ -23,7 +24,7 @@ const labelPositionInset: LabelPositionContextValue = {
 export const LabeledField = memo(function LabeledField({
   children,
   label,
-  labelPosition = "start",
+  labelPosition: labelPositionProp,
   fieldId,
   minWidth = 100,
   className,
@@ -44,6 +45,10 @@ export const LabeledField = memo(function LabeledField({
   const labelWidthFromContext = useLabelWidth();
   const labelWidth = labelWidthFromContext ?? minWidth;
 
+  const labelPositionFromContext = useLabelPosition();
+  const labelPosition =
+    labelPositionProp ?? labelPositionFromContext ?? "start";
+
   const labeledFieldClasses = useMemo(
     () => labeledFieldStyles(labelPosition),
     [labelPosition]
@@ -91,7 +96,13 @@ export const LabeledField = memo(function LabeledField({
           <div className={labeledFieldClasses}>
             <Label
               htmlFor={fieldId}
-              position={labelPosition}
+              // we do this so presence avatars are aligned to the right when position is above
+              // and when start/end position with textarea it aligns label to the top of the field
+              className={
+                labelPosition === "start" || labelPosition === "end"
+                  ? "self-start"
+                  : undefined
+              }
               style={labelStyle}
               {...props}
             >