@noya-app/noya-designsystem 0.1.30 → 0.1.32

package/src/components/InputField.tsx

@@ -17,14 +17,12 @@ import React, {
   useRef,
   useState,
 } from "react";
-import styled from "styled-components";
 import handleNudge from "../utils/handleNudge";
 import { Button } from "./Button";
 import { DropdownMenu } from "./DropdownMenu";
 import { MenuItem } from "./internal/Menu";
 import TextInput, { TextInputProps } from "./internal/TextInput";
 import { Popover } from "./Popover";
-import { Stack } from "./Stack";
 
 type LabelPosition = "start" | "end";
 
@@ -32,8 +30,8 @@ export type InputFieldSize = "small" | "medium" | "large";
 
 type InputFieldContextValue = {
   labelPosition: LabelPosition;
-  labelSize: number;
-  hasLabel: boolean;
+  labelSize?: number;
+  buttonSize?: number;
   hasDropdown: boolean;
   /** @default medium */
   size: InputFieldSize;
@@ -42,12 +40,13 @@ type InputFieldContextValue = {
   inputRef?: ForwardedRef<HTMLInputElement>;
   setInputRef?: (ref: ForwardedRef<HTMLInputElement>) => void;
   setLabelWidth?: (width: number) => void;
+  setButtonWidth?: (width: number) => void;
 };
 
 const InputFieldContext = createContext<InputFieldContextValue>({
   labelPosition: "end",
-  labelSize: 6,
-  hasLabel: false,
+  labelSize: undefined,
+  buttonSize: undefined,
   hasDropdown: false,
   size: "medium",
   isFocused: false,
@@ -58,43 +57,63 @@ const InputFieldContext = createContext<InputFieldContextValue>({
  * Label
  * ------------------------------------------------------------------------- */
 
-const LabelContainer = styled.label<{
-  pointerEvents: Property.PointerEvents;
-  $labelPosition: LabelPosition;
-  $hasDropdown: boolean;
-}>(({ theme, $labelPosition, $hasDropdown, pointerEvents }) => ({
-  ...theme.textStyles.label,
-  fontWeight: "bold",
-  color: theme.colors.textDisabled,
-  position: "absolute",
-  top: 0,
-  right: $labelPosition === "end" ? 0 : undefined,
-  bottom: 0,
-  left: $labelPosition === "start" ? 0 : undefined,
-  display: "flex",
-  alignItems: "center",
-  pointerEvents,
-  userSelect: "none",
-  ...($labelPosition === "start"
-    ? { justifyContent: "flex-start", paddingLeft: "6px" }
-    : {
-        justifyContent: "flex-end",
-        paddingRight: $hasDropdown ? "16px" : "6px",
-      }),
-}));
+const LabelContainer = forwardRef<
+  HTMLLabelElement,
+  {
+    pointerEvents: Property.PointerEvents;
+    $labelPosition: LabelPosition;
+    $hasDropdown: boolean;
+    $size: InputFieldSize;
+    className?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+  }
+>(
+  (
+    { pointerEvents, $labelPosition, $hasDropdown, $size, className, style, ...props },
+    ref
+  ) => {
+      const memoizedStyles = useMemo(() => ({
+        left: $labelPosition === "start" ? $size === "large" ? "6px" : $size === "medium" ? "2px" : "0px" : "",
+        right: $labelPosition === "end" ? $size === "large" ? "6px" : $size === "medium" ? "2px" : "0px" : "",
+      }), [$labelPosition, $size])
+
+    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 ${
+          $labelPosition === "start"
+            ? `justify-start pl-[6px]`
+            : $labelPosition === "end"
+              ? `justify-end ${$hasDropdown ? "pr-[16px]" : "pr-[6px]"}`
+              : ""
+        } ${pointerEvents === "none" ? "pointer-events-none" : ""} ${className ?? ""}`}
+        style={{...memoizedStyles, ...style}}
+        {...props}
+      />
+    );
+  }
+);
 
 interface InputFieldLabelProps {
   children?: ReactNode;
   pointerEvents?: Property.PointerEvents;
   style?: React.CSSProperties;
+  className?: string;
 }
 
+/** 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(
-    { children = false, pointerEvents = "none", style }: InputFieldLabelProps,
+    {
+      children = false,
+      pointerEvents = "none",
+      style,
+      className,
+    }: InputFieldLabelProps,
     forwardedRef: ForwardedRef<HTMLLabelElement>
   ) {
-    const { labelPosition, hasDropdown, setLabelWidth } =
+    const { labelPosition, hasDropdown, setLabelWidth, size } =
       useContext(InputFieldContext);
 
     const ref = useRef<HTMLLabelElement | null>(null);
@@ -111,6 +130,7 @@ const InputFieldLabel = memo(
 
     return (
       <LabelContainer
+        $size={size}
         ref={(element) => {
           ref.current = element;
           assignRef(forwardedRef, element);
@@ -119,6 +139,7 @@ const InputFieldLabel = memo(
         $labelPosition={labelPosition}
         $hasDropdown={hasDropdown}
         style={style}
+        className={className}
       >
         {children}
       </LabelContainer>
@@ -130,14 +151,16 @@ const InputFieldLabel = memo(
  * Dropdown
  * ------------------------------------------------------------------------- */
 
-const DropdownContainer = styled.span(({ theme }) => ({
-  position: "absolute",
-  top: 0,
-  right: 0,
-  bottom: 0,
-  display: "flex",
-  flexDirection: "column",
-}));
+const DropdownContainer = forwardRef<
+  HTMLSpanElement,
+  { className?: string; children?: React.ReactNode }
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    className={`absolute inset-y-0 right-0 flex flex-col ${className ?? ""}`}
+    {...props}
+  />
+));
 
 interface InputFieldDropdownProps<T extends string> {
   id?: string;
@@ -163,7 +186,12 @@ const InputFieldDropdownMenu = memo(function InputFieldDropdownMenu<
     <DropdownContainer>
       <DropdownMenu<T> items={items} onSelect={onSelect}>
         {children || (
-          <Button id={id} variant="thin" flex="1" contentStyle={contentStyle}>
+          <Button
+            id={id}
+            variant="thin"
+            className="flex flex-1"
+            contentStyle={contentStyle}
+          >
             <CaretDownIcon />
           </Button>
         )}
@@ -176,55 +204,82 @@ const InputFieldDropdownMenu = memo(function InputFieldDropdownMenu<
  * Button
  * ------------------------------------------------------------------------- */
 
-const ButtonContainer = styled.span<{ $size: InputFieldSize }>(
-  ({ theme, $size }) => ({
-    position: "absolute",
-    right: $size === "large" ? "9px" : $size === "medium" ? "4px" : "2px",
-    top: $size === "large" ? "8px" : $size === "medium" ? "4px" : "2px",
-  })
-);
+const ButtonContainer = forwardRef<
+  HTMLSpanElement,
+  { $size: InputFieldSize; className?: string; children?: React.ReactNode }
+>(({ $size, className, ...props }, ref) => (
+  <span
+    ref={ref}
+    className={`absolute ${$size === "large" ? "right-[9px] top-[10px]" :
+      $size === "medium" ? "right-[4px] top-[4px]" :
+      $size === "small" ? "right-[2px] top-[2px]" : ""} ${className ?? ""}`}
+    {...props}
+  />
+));
+
+/** Inserts a Button at the end of the input. Should not be used with an InputField.Label */
+const InputFieldButton = memo(
+  forwardRef(function InputFieldButton(
+    props: React.ButtonHTMLAttributes<HTMLButtonElement>,
+    forwardedRef: ForwardedRef<HTMLButtonElement>
+  ) {
+    const { children, onClick, ...rest } = props;
+    const { size, inputRef, setButtonWidth } = useContext(InputFieldContext);
 
-const InputFieldButton = memo(function InputFieldButton({
-  children,
-  onClick,
-}: {
-  children?: ReactNode;
-  onClick?: () => void;
-}) {
-  const { size, inputRef } = useContext(InputFieldContext);
-
-  const defaultHandleClick = useCallback(
-    (event: React.MouseEvent) => {
-      if (inputRef && typeof inputRef !== "function") {
-        inputRef.current?.focus();
-        // Select all text
-        inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
-      }
+    const ref = useRef<HTMLButtonElement | null>(null);
 
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    [inputRef]
-  );
+    useLayoutEffect(() => {
+      if (!setButtonWidth) return;
 
-  const handlePointerDown = useCallback((event: React.PointerEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-  }, []);
+      const width = ref.current?.getBoundingClientRect().width;
 
-  return (
-    <ButtonContainer $size={size}>
-      <Button
-        variant="floating"
-        onClick={onClick ?? defaultHandleClick}
-        onPointerDown={handlePointerDown}
-        tabIndex={-1}
-      >
-        {children}
-      </Button>
-    </ButtonContainer>
-  );
-});
+      if (!width) return;
+
+      setButtonWidth(width);
+    }, [setButtonWidth]);
+
+    const defaultHandleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (inputRef && typeof inputRef !== "function") {
+          inputRef.current?.focus();
+          // Select all text
+          inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      [inputRef]
+    );
+
+    const handlePointerDown = useCallback(
+      (event: React.PointerEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      []
+    );
+
+    return (
+      <ButtonContainer $size={size}>
+        <Button
+          ref={(element) => {
+            ref.current = element;
+            assignRef(forwardedRef, element);
+          }}
+          variant="floating"
+          onClick={onClick ?? defaultHandleClick}
+          onPointerDown={handlePointerDown}
+          tabIndex={-1}
+          size={size === "medium" ? "normal" : size}
+          {...rest}
+        >
+          {children}
+        </Button>
+      </ButtonContainer>
+    );
+  })
+);
 
 /* ----------------------------------------------------------------------------
  * Input
@@ -239,106 +294,91 @@ const InputFieldButton = memo(function InputFieldButton({
 
 type InputFieldVariant = "normal" | "bare";
 
-export const InputElement = styled(TextInput)<{
+type InputElementProps = {
   disabled?: boolean;
   readOnly?: boolean;
   $labelPosition: LabelPosition;
-  $labelSize: number;
-  $hasLabel: boolean;
+  $labelSize?: number;
   $hasDropdown: boolean;
   $textAlign?: Property.TextAlign;
   $variant?: InputFieldVariant;
   $size: InputFieldSize;
-}>(({
-  theme,
-  $labelPosition,
-  $labelSize,
-  $hasDropdown,
-  $textAlign,
-  disabled,
-  $hasLabel,
-  readOnly,
-  $variant = "normal",
-  $size,
-}) => {
-  return {
-    // placeholder
-    "&::placeholder": {
-      color: theme.colors.textDisabled,
-    },
-    ...theme.textStyles.small,
-    color: readOnly
-      ? theme.colors.textMuted
-      : disabled
-        ? theme.colors.textDisabled
-        : theme.colors.text,
-    ...($size === "small" && {
-      fontSize: "11px",
-    }),
-    width: "0px", // Reset intrinsic width
-    flex: "1 1 0px",
-    position: "relative",
-    border: "0",
-    outline: "none",
-    minWidth: "0",
-    textAlign: $textAlign ?? "left",
-    alignSelf: "stretch",
-    borderRadius: "4px",
-    paddingTop: $size === "large" ? "10px" : $size === "medium" ? "4px" : "1px",
-    paddingBottom:
-      $size === "large" ? "10px" : $size === "medium" ? "4px" : "1px",
-    paddingLeft:
-      ($size === "large" ? 10 : $size === "medium" ? 6 : 4) +
-      ($hasLabel && $labelPosition === "start" ? 6 + $labelSize : 0) +
-      "px",
-    paddingRight:
+  children?: React.ReactNode;
+  className?: string;
+  value?: string;
+  onSubmit?: (value: string) => void;
+};
+
+const InputElement = forwardRef(
+  (
+    {
+      disabled,
+      readOnly,
+      $labelPosition,
+      $labelSize,
+      $hasDropdown,
+      $textAlign,
+      $variant = "normal",
+      $size,
+      className,
+      children,
+      value,
+      onSubmit,
+      ...props
+    }: InputElementProps,
+    ref: ForwardedRef<any>
+  ) => {
+    const paddingLeft =
       ($size === "large" ? 10 : $size === "medium" ? 6 : 4) +
-      ($hasLabel && $labelPosition === "end" ? 6 + $labelSize : 0) +
-      ($hasDropdown ? 11 : 0) +
-      "px",
-    background: theme.colors.inputBackground,
-    "&:focus": {
-      boxShadow: `0 0 0 2px ${theme.colors.primary}`,
-    },
-    ...($variant === "bare" && {
-      paddingTop: "4px",
-      paddingRight: "4px",
-      paddingBottom: "4px",
-      paddingLeft: "4px",
-      marginTop: "-4px",
-      marginRight: "-4px",
-      marginBottom: "-4px",
-      marginLeft: "-4px",
-    }),
+      ($labelSize && $labelPosition === "start" ? 6 + $labelSize : 0);
 
-    // '&[type="search"]::-webkit-search-cancel-button': {
-    //   appearance: "none",
-    //   height: "15px",
-    //   width: "15px",
-    //   background: `url("data:image/svg+xml;utf8,${createCrossSVGString(
-    //     theme.colors.icon
-    //   )}") no-repeat`,
-    // },
-  };
-});
+    const paddingRight =
+      ($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`,
+      }), [paddingLeft, paddingRight])
+
+    return (
+      <TextInput
+        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 focus:z-10 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}
+      />
+    );
+  }
+);
+
+export type InputFieldInputProps = TextInputProps & {
+  textAlign?: Property.TextAlign;
+  variant?: "bare";
+};
+
+/** Should always be wrapped in InputField.Root */
 const InputFieldInput = forwardRef(function InputFieldInput(
   // onFocusChange should only be passed from the root, never directly
-  {
-    textAlign,
-    variant,
-    ...rest
-  }: TextInputProps & {
-    textAlign?: Property.TextAlign;
-    variant?: "bare";
-  },
+  { textAlign, variant, ...rest }: InputFieldInputProps,
   forwardedRef: ForwardedRef<HTMLInputElement>
 ) {
   const {
     labelPosition,
     labelSize,
     hasDropdown,
-    hasLabel,
+    buttonSize,
     size,
     onFocusChange,
     setInputRef,
@@ -359,8 +399,7 @@ const InputFieldInput = forwardRef(function InputFieldInput(
     <InputElement
       ref={forwardedRef}
       $labelPosition={labelPosition}
-      $labelSize={labelSize}
-      $hasLabel={hasLabel}
+      $labelSize={labelSize || buttonSize}
       $hasDropdown={hasDropdown}
       $size={size}
       $variant={variant}
@@ -376,35 +415,22 @@ const InputFieldTypeahead = (props: { prefix: string; value: string }) => {
     labelPosition,
     labelSize,
     hasDropdown,
-    hasLabel,
     size,
     // onFocusChange,
   } = useContext(InputFieldContext);
 
   return (
     <InputElement
-      as="span"
       $labelPosition={labelPosition}
       $labelSize={labelSize}
-      $hasLabel={hasLabel}
       $hasDropdown={hasDropdown}
       $size={size}
       // onFocusChange={onFocusChange}
       // readOnly
       // placeholder={props.value}
+      {...props}
       value=""
-      style={{
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        width: "100%",
-        height: "100%",
-        pointerEvents: "none",
-        background: "transparent",
-        boxShadow: "none",
-      }}
+      className="absolute inset-0 w-full h-full pointer-events-none bg-transparent shadow-none"
     >
       <span style={{ opacity: 0 }}>{props.prefix}</span>
       <span style={{ opacity: 0.5 }}>
@@ -529,15 +555,23 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
  * Root
  * ------------------------------------------------------------------------- */
 
-const RootContainer = styled.div<{ $width?: number; $flex?: string }>(
-  ({ theme, $flex, $width }) => ({
-    flex: $flex ?? "1",
-    display: "flex",
-    flexDirection: "row",
-    position: "relative",
-    maxWidth: typeof $width === "number" ? `${$width}px` : undefined,
-  })
-);
+const RootContainer = forwardRef<
+  HTMLDivElement,
+  {
+    $width?: number;
+    $flex?: string;
+    className?: string;
+    children?: React.ReactNode;
+    id?: string;
+    style?: React.CSSProperties;
+  }
+>(({ $width, $flex, className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`flex flex-row relative ${$flex ? `flex-[${$flex}]` : "flex-1"} ${$width || $width === 0 ? `max-w-[${$width}px]` : ""} ${className ?? ""}`}
+    {...props}
+  />
+));
 
 interface InputFieldRootProps {
   id?: string;
@@ -574,13 +608,11 @@ function InputFieldRoot({
   const hasDropdown = childrenArray.some(
     (child) => isValidElement(child) && child.type === InputFieldDropdownMenu
   );
-  const hasLabel = childrenArray.some(
-    (child) => isValidElement(child) && child.type === InputFieldLabel
-  );
 
   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 handleFocusChange = useCallback(
@@ -606,22 +638,23 @@ function InputFieldRoot({
   const contextValue = useMemo(
     (): InputFieldContextValue => ({
       labelPosition,
-      labelSize: measuredLabelSize ?? labelSize ?? 6,
+      labelSize: measuredLabelSize ?? labelSize,
+      buttonSize: measuredButtonSize,
       hasDropdown,
-      hasLabel,
       size,
       isFocused,
       onFocusChange: handleFocusChange,
       inputRef,
       setInputRef,
       setLabelWidth: setMeasuredLabelSize,
+      setButtonWidth: setMeasuredButtonSize,
     }),
     [
       labelPosition,
       measuredLabelSize,
       labelSize,
+      measuredButtonSize,
       hasDropdown,
-      hasLabel,
       size,
       isFocused,
       handleFocusChange,
@@ -659,9 +692,9 @@ function InputFieldRoot({
           }}
         >
           {measuredWidth && (
-            <Stack.V width={measuredWidth} overflow="hidden">
+            <div className={`flex flex-col w-[${measuredWidth}] hidden`}>
               {renderPopoverContent({ width: measuredWidth })}
-            </Stack.V>
+            </div>
           )}
         </Popover>
       ) : (
@@ -671,38 +704,29 @@ function InputFieldRoot({
   );
 }
 
-const PrimitiveInputField = styled.input(({ theme, readOnly, disabled }) => {
-  return {
-    // placeholder
-    "&::placeholder": {
-      color: theme.colors.textDisabled,
-    },
-    ...theme.textStyles.small,
-    color: readOnly
-      ? theme.colors.textMuted
-      : disabled
-        ? theme.colors.textDisabled
-        : theme.colors.text,
-    width: "0px", // Reset intrinsic width
-    flex: "1 1 0px",
-    position: "relative",
-    border: "0",
-    outline: "none",
-    minWidth: "0",
-    alignSelf: "stretch",
-    borderRadius: "4px",
-    paddingTop: "4px",
-    paddingBottom: "4px",
-    paddingLeft: "6px",
-    paddingRight: "6px",
-    background: theme.colors.inputBackground,
-    "&:focus": {
-      boxShadow: `0 0 0 2px ${theme.colors.primary}`,
-    },
-    userSelect: "all",
-    pointerEvents: "all",
-  };
-});
+const PrimitiveInputField = ({
+  readOnly,
+  disabled,
+  className,
+  ...props
+}: {
+  readOnly?: boolean;
+  disabled?: boolean;
+} & 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 focus:z-10 font-sans font-normal text-heading5 placeholder:text-text-disabled ${
+      readOnly
+        ? "text-text-muted"
+        : disabled
+          ? "text-text-disabled"
+          : "text-text"
+    } ${className ?? ""}`}
+    {...props}
+  />
+);
 
 export namespace InputField {
   export const Root = memo(InputFieldRoot);