@noya-app/noya-designsystem 0.1.47 → 0.1.49

package/src/components/InputField.tsx

@@ -1,57 +1,49 @@
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
-import { assignRef, memoGeneric } from "@noya-app/react-utils";
+import { memoGeneric, useMergeRefs, useSize } from "@noya-app/react-utils";
 import { Property } from "csstype";
 import React, {
   createContext,
   FocusEventHandler,
   ForwardedRef,
   forwardRef,
-  LabelHTMLAttributes,
   memo,
   ReactNode,
   useCallback,
   useContext,
-  useEffect,
   useId,
-  useLayoutEffect,
   useMemo,
-  useRef,
   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 = {
-  labelSize?: number;
-  buttonSize?: number;
-  /** @default medium */
-  size: InputFieldSize;
   isFocused: boolean;
   onFocusChange: (isFocused: boolean) => void;
-  inputRef?: ForwardedRef<HTMLInputElement>;
-  setInputRef?: (ref: ForwardedRef<HTMLInputElement>) => void;
-  setLabelWidth?: (width: number) => void;
-  setButtonWidth?: (width: number) => void;
-  id?: string;
-  label?: ReactNode;
-  labelPosition?: LabelPosition;
-};
+  inputRef: ForwardedRef<HTMLInputElement>;
+  startRef: ForwardedRef<HTMLSpanElement>;
+  endRef: ForwardedRef<HTMLSpanElement>;
+  endWidth?: number;
+} & Pick<InputFieldRootProps, "endWidth" | "startWidth" | "size" | "id">;
 
 const InputFieldContext = createContext<InputFieldContextValue>({
-  labelSize: undefined,
-  buttonSize: undefined,
+  startWidth: undefined,
   size: "medium",
   isFocused: false,
   onFocusChange: () => {},
+  inputRef: null,
+  startRef: null,
+  endRef: null,
 });
 
 export const useInputFieldContext = () => useContext(InputFieldContext);
@@ -59,79 +51,22 @@ export const useInputFieldContext = () => useContext(InputFieldContext);
 const noop = () => {};
 
 export const getFieldSpacing = ({
-  buttonSize = 0,
-  labelSize = 0,
+  endWidth = 0,
+  startWidth = 0,
   variant,
 }: {
-  buttonSize?: number;
-  labelSize?: number;
+  endWidth?: number;
+  startWidth?: number;
   variant?: InputFieldVariant;
 }) => ({
-  paddingLeft: variant === "bare" ? "0px" : "6px",
-  paddingRight: `${variant === "bare" ? 0 : labelSize + buttonSize + (labelSize || buttonSize ? 12 : 6)}px`,
+  paddingLeft: `${variant === "bare" ? startWidth : startWidth ? startWidth + 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 { setLabelWidth, size, buttonSize, label, id, labelPosition } =
-      useInputFieldContext();
-
-    const ref = useRef<HTMLLabelElement | null>(null);
-
-    useLayoutEffect(() => {
-      if (!setLabelWidth) return;
-
-      const width = ref.current?.getBoundingClientRect().width;
-
-      if (!width) return;
-
-      setLabelWidth(width);
-    }, [setLabelWidth]);
-
-    if (labelPosition !== "inset") return null;
-
-    return (
-      <InsetLabel
-        ref={(element) => {
-          ref.current = element;
-          assignRef(forwardedRef, element);
-        }}
-        size={size}
-        buttonSize={buttonSize}
-        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>[];
@@ -143,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>
   );
 });
 
@@ -169,7 +102,6 @@ const InputFieldButton = memo(
   forwardRef(function InputFieldButton(
     props: React.ButtonHTMLAttributes<HTMLButtonElement> &
       ButtonRootProps & {
-        buttonClassName?: string;
         variant?: "floating" | "normal";
       },
     forwardedRef: ForwardedRef<HTMLButtonElement>
@@ -178,24 +110,12 @@ const InputFieldButton = memo(
       children,
       onClick,
       className,
-      buttonClassName,
+      style,
       variant = "normal",
       as = "button",
       ...rest
     } = props;
-    const { size, inputRef, setButtonWidth } = useInputFieldContext();
-
-    const ref = useRef<HTMLButtonElement | null>(null);
-
-    useLayoutEffect(() => {
-      if (!setButtonWidth) return;
-
-      const width = ref.current?.getBoundingClientRect().width;
-
-      if (!width) return;
-
-      setButtonWidth(width);
-    }, [setButtonWidth]);
+    const { size, inputRef } = useInputFieldContext();
 
     const defaultHandleClick = useCallback(
       (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -219,42 +139,35 @@ const InputFieldButton = memo(
       []
     );
 
+    const memoizedStyle = useMemo(
+      () => ({
+        ...(variant === "floating" && {
+          paddingLeft: "0px",
+          paddingRight: "0px",
+        }),
+        ...style,
+      }),
+      [style, variant]
+    );
+
     return (
-      <span
+      <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={(element) => {
-            ref.current = element;
-            assignRef(forwardedRef, element);
-          }}
-          variant="floating"
-          onClick={onClick ?? defaultHandleClick}
-          onPointerDown={handlePointerDown}
-          tabIndex={-1}
-          size={size === "medium" ? "normal" : size}
-          className={cx(
-            buttonClassName,
-            variant === "floating" && "bg-transparent shadow-none"
-          )}
-          {...rest}
-        >
-          {children}
-        </Button>
-      </span>
+        {children}
+      </Button>
     );
   })
 );
@@ -300,14 +213,16 @@ const InputElement = forwardRef(
       style,
       ...props
     }: InputElementProps,
-    ref: ForwardedRef<any>
+    forwardedRef: ForwardedRef<any>
   ) => {
-    const { buttonSize, labelSize, size, id } = useInputFieldContext();
+    const { endWidth, inputRef, size, id, startWidth } = useInputFieldContext();
+
+    const ref = useMergeRefs(inputRef, forwardedRef);
 
     const spacingStyles = getFieldSpacing({
-      buttonSize,
-      labelSize,
+      endWidth,
       variant: $variant,
+      startWidth,
     });
 
     const inputClassName = cx(
@@ -329,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}
@@ -349,7 +272,7 @@ const InputElement = forwardRef(
         id={id}
         onSubmit={onSubmit ?? (() => {})}
         {...props}
-        className={inputClassName}
+        className={mergedClassName}
         style={{ ...spacingStyles, ...style }}
       />
     );
@@ -367,7 +290,9 @@ const InputFieldInput = forwardRef(function InputFieldInput(
   { textAlign, variant, ...rest }: InputFieldInputProps,
   forwardedRef: ForwardedRef<HTMLInputElement>
 ) {
-  const { onFocusChange, setInputRef } = useInputFieldContext();
+  const { onFocusChange, inputRef } = useInputFieldContext();
+
+  const ref = useMergeRefs(inputRef, forwardedRef);
 
   const handleFocusChange = useCallback(
     (isFocused: boolean) => {
@@ -376,13 +301,9 @@ const InputFieldInput = forwardRef(function InputFieldInput(
     [onFocusChange]
   );
 
-  useLayoutEffect(() => {
-    setInputRef?.(forwardedRef);
-  }, [forwardedRef, setInputRef]);
-
   return (
     <InputElement
-      ref={forwardedRef}
+      ref={ref}
       $variant={variant}
       $textAlign={textAlign}
       onFocusChange={handleFocusChange}
@@ -566,10 +487,14 @@ const RootContainer = forwardRef<
 interface InputFieldRootProps {
   id?: string;
   children?: ReactNode;
+  start?: ReactNode;
+  end?: ReactNode;
+  label?: ReactNode;
   width?: number;
-  labelSize?: 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
@@ -582,26 +507,36 @@ interface InputFieldRootProps {
 }
 
 function InputFieldRoot({
-  id: idProp,
+  id,
   children,
   width,
   sideOffset = 3,
-  labelSize,
+  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 [measuredLabelSize, setMeasuredLabelSize] = React.useState<number>();
-  const [measuredButtonSize, setMeasuredButtonSize] = React.useState<number>();
-  const [measuredWidth, setMeasuredWidth] = React.useState<number>();
+  const startRef = React.useRef<HTMLSpanElement>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const endRef = React.useRef<HTMLSpanElement>(null);
+
+  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) => {
@@ -611,58 +546,56 @@ function InputFieldRoot({
     [onFocusChange]
   );
 
-  const [inputRef, setInputRef] =
-    React.useState<ForwardedRef<HTMLInputElement>>();
-
-  // eslint-disable-next-line @shopify/prefer-early-return
-  useEffect(() => {
-    if (inputRef && typeof inputRef !== "function") {
-      setMeasuredWidth?.(
-        isFocused ? inputRef?.current?.getBoundingClientRect().width : undefined
-      );
-    }
-  }, [inputRef, isFocused]);
+  const startWidth = measuredStartSize?.width ?? startWidthProp;
+  const endWidth = measuredEndSize?.width ?? endWidthProp;
 
   const contextValue = useMemo(
     (): InputFieldContextValue => ({
-      labelSize: measuredLabelSize ?? labelSize,
-      buttonSize: measuredButtonSize,
+      startWidth,
+      endWidth,
+      inputRef,
+      startRef,
+      endRef,
       size,
       isFocused,
       onFocusChange: handleFocusChange,
-      inputRef,
-      setInputRef,
-      setLabelWidth: setMeasuredLabelSize,
-      setButtonWidth: setMeasuredButtonSize,
       id: id ?? randomId,
-      label,
-      labelPosition,
     }),
-    [
-      measuredLabelSize,
-      labelSize,
-      measuredButtonSize,
-      size,
-      isFocused,
-      handleFocusChange,
-      inputRef,
-      id,
-      randomId,
-      label,
-      labelPosition,
-    ]
+    [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}
-      {label && <InputFieldLabel />}
+      {start && (
+        <span ref={startRef} className={startBaseStyles}>
+          {start}
+        </span>
+      )}
+      {(end || label) && (
+        <span ref={endRef} className={cx(endStyles, label && end && "gap-1.5")}>
+          {labelProp
+            ? insetLabel
+            : label && labelPosition === "inset" && insetLabel}
+          {end}
+        </span>
+      )}
     </RootContainer>
   );
 
   const measuredWidthObject = useMemo(
-    () => (measuredWidth ? { width: measuredWidth + 4 } : undefined),
-    [measuredWidth]
+    () =>
+      measuredInputSize ? { width: measuredInputSize.width + 4 } : undefined,
+    [measuredInputSize]
   );
 
   return (
@@ -711,11 +644,10 @@ const PrimitiveInputField = ({
   React.InputHTMLAttributes<HTMLInputElement>,
   HTMLInputElement
 >) => {
-  const { id, labelSize, buttonSize } = useInputFieldContext();
+  const { id, endWidth } = useInputFieldContext();
 
   const spacingStyles = getFieldSpacing({
-    buttonSize,
-    labelSize,
+    endWidth,
   });
   const memoizedStyles = useMemo(
     () => ({ ...spacingStyles, ...style }),
@@ -750,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,
-      labelSize,
+      endWidth,
+      startWidth,
+      label,
+      start,
+      end,
       size,
       renderPopoverContent,
       sideOffset,
@@ -772,7 +708,11 @@ const InputFieldComponent = forwardRef<HTMLInputElement, InputFieldProps>(
     return (
       <InputFieldSubcomponents.Root
         width={width}
-        labelSize={labelSize}
+        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 React, { LabelHTMLAttributes, forwardRef, memo } from "react";
 import { cx } from "../utils/classNames";
-import { InputFieldSize } from "./InputField";
 
 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 */
-  buttonSize?: 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 = ({
-  buttonSize,
-}: {
-  buttonSize?: number;
-}): CSSProperties => ({
-  right: `${6 + (buttonSize ?? 0)}px`,
-});
-
-export const InsetLabel = memo(
-  forwardRef<HTMLLabelElement, InsetLabelProps>(function InsetLabel(
-    { children, buttonSize, size = "medium", className, style, ...props },
-    ref
-  ) {
-    const styles = useMemo(
-      () => ({
-        ...getInsetLabelPosition({
-          buttonSize,
-        }),
-        ...style,
-      }),
-      [buttonSize, 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,7 +11,7 @@ const labelTextStyles =
 
 export const Label = memo(
   forwardRef<HTMLLabelElement, LabelProps>(function Label(
-    { className, position = "start", children, ...props },
+    { className, children, ...props },
     ref
   ) {
     return (
@@ -83,8 +20,7 @@ export const Label = memo(
         className={cx(
           labelStyles,
           labelTextStyles,
-          "text-left min-h-[27px]",
-          (position === "start" || position === "end") && "self-start",
+          "text-left min-h-input-height",
           className
         )}
         {...props}

package/src/components/LabeledField.tsx

@@ -91,7 +91,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}
             >