@noya-app/noya-designsystem 0.1.41 → 0.1.43

package/src/components/InputField.tsx

@@ -1,13 +1,11 @@
-import { CaretDownIcon } from "@noya-app/noya-icons";
+import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import { assignRef, memoGeneric } from "@noya-app/react-utils";
 import { Property } from "csstype";
 import React, {
-  Children,
   createContext,
   FocusEventHandler,
   ForwardedRef,
   forwardRef,
-  isValidElement,
   LabelHTMLAttributes,
   memo,
   ReactNode,
@@ -36,7 +34,6 @@ type InputFieldContextValue = {
   labelPosition: LabelPosition;
   labelSize?: number;
   buttonSize?: number;
-  hasDropdown: boolean;
   /** @default medium */
   size: InputFieldSize;
   isFocused: boolean;
@@ -48,23 +45,64 @@ type InputFieldContextValue = {
   id?: string;
 };
 
+const getLabelPosition = ({
+  labelPosition,
+  size,
+  buttonSize,
+}: {
+  labelPosition: LabelPosition;
+  size: InputFieldSize;
+  buttonSize?: number;
+}) => ({
+  left:
+    labelPosition === "start"
+      ? size === "large"
+        ? "6px"
+        : size === "medium"
+          ? "2px"
+          : "0px"
+      : "",
+  right:
+    labelPosition === "end"
+      ? size === "large"
+        ? `${6 + (buttonSize ?? 0)}px`
+        : size === "medium"
+          ? `${2 + (buttonSize ?? 0)}px`
+          : `${buttonSize ?? 0}px`
+      : "",
+});
+
+const getInputFieldSpacing = ({
+  labelPosition,
+  buttonSize,
+  labelSize,
+}: {
+  labelPosition: LabelPosition;
+  size?: InputFieldSize;
+  buttonSize?: number;
+  labelSize?: number;
+}) => ({
+  paddingLeft: `${labelSize && labelPosition === "start" ? 6 + labelSize : 6}px`,
+  paddingRight: `${labelPosition === "end" ? 6 + (labelSize ?? 0) + (buttonSize ? buttonSize + 6 : 0) : 6}px`,
+});
+
 const InputFieldContext = createContext<InputFieldContextValue>({
   labelPosition: "end",
   labelSize: undefined,
   buttonSize: undefined,
-  hasDropdown: false,
   size: "medium",
   isFocused: false,
   onFocusChange: () => {},
 });
 
+const noop = () => {};
+
 /* ----------------------------------------------------------------------------
  * Label
  * ------------------------------------------------------------------------- */
 
 interface LabelContainerProps {
   labelPosition: LabelPosition;
-  hasDropdown: boolean;
   size: InputFieldSize;
   className?: string;
   children?: React.ReactNode;
@@ -75,7 +113,6 @@ interface LabelContainerProps {
 const LabelContainer = forwardRef(function LabelContainer(
   {
     labelPosition: $labelPosition,
-    hasDropdown: $hasDropdown,
     size: $size,
     className,
     style,
@@ -84,27 +121,15 @@ const LabelContainer = forwardRef(function LabelContainer(
   ref: ForwardedRef<HTMLLabelElement>
 ) {
   const { buttonSize } = useContext(InputFieldContext);
+  const spacingStyles = getLabelPosition({
+    labelPosition: $labelPosition,
+    size: $size,
+    buttonSize,
+  });
+
   const memoizedStyles = useMemo(
-    () => ({
-      left:
-        $labelPosition === "start"
-          ? $size === "large"
-            ? "6px"
-            : $size === "medium"
-              ? "2px"
-              : "0px"
-          : "",
-      right:
-        $labelPosition === "end"
-          ? $size === "large"
-            ? `${6 + (buttonSize ?? 0)}px`
-            : $size === "medium"
-              ? `${2 + (buttonSize ?? 0)}px`
-              : `${buttonSize ?? 0}px`
-          : "",
-      ...style,
-    }),
-    [$labelPosition, $size, buttonSize, style]
+    () => ({ ...spacingStyles, ...style }),
+    [spacingStyles, style]
   );
 
   return (
@@ -114,8 +139,7 @@ const LabelContainer = forwardRef(function LabelContainer(
         "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-1.5`
-          : $labelPosition === "end" &&
-              `justify-end ${$hasDropdown ? "pr-4" : "pr-1.5"}`,
+          : $labelPosition === "end" && "justify-end pr-1.5",
         className
       )}
       style={memoizedStyles}
@@ -132,7 +156,7 @@ const InputFieldLabel = memo(
     props: LabelHTMLAttributes<HTMLLabelElement>,
     forwardedRef: ForwardedRef<HTMLLabelElement>
   ) {
-    const { labelPosition, hasDropdown, setLabelWidth, size, id } =
+    const { labelPosition, setLabelWidth, size, id } =
       useContext(InputFieldContext);
 
     const ref = useRef<HTMLLabelElement | null>(null);
@@ -155,7 +179,6 @@ const InputFieldLabel = memo(
         }}
         size={size}
         labelPosition={labelPosition}
-        hasDropdown={hasDropdown}
         htmlFor={id}
         {...props}
       />
@@ -188,28 +211,18 @@ interface InputFieldDropdownProps<T extends string> {
 const InputFieldDropdownMenu = memoGeneric(function InputFieldDropdownMenu<
   T extends string,
 >({ id, items, onSelect, children }: InputFieldDropdownProps<T>) {
-  const { size } = useContext(InputFieldContext);
-
-  const contentStyle = useMemo(
-    () => ({
-      margin: "-4px 0",
-      minHeight: size === "small" ? "15px" : undefined,
-    }),
-    [size]
-  );
-
   return (
     <DropdownContainer>
-      <DropdownMenu<T> items={items} onSelect={onSelect}>
+      <DropdownMenu<T>
+        items={items}
+        onSelect={onSelect}
+        align="end"
+        sideOffset={8}
+      >
         {children || (
-          <Button
-            id={id}
-            variant="thin"
-            className="flex flex-1"
-            contentStyle={contentStyle}
-          >
-            <CaretDownIcon />
-          </Button>
+          <InputFieldButton variant="floating" id={id}>
+            <DropdownChevronIcon />
+          </InputFieldButton>
         )}
       </DropdownMenu>
     </DropdownContainer>
@@ -220,35 +233,23 @@ const InputFieldDropdownMenu = memoGeneric(function InputFieldDropdownMenu<
  * Button
  * ------------------------------------------------------------------------- */
 
-const ButtonContainer = forwardRef<
-  HTMLSpanElement,
-  { $size: InputFieldSize; className?: string; children?: React.ReactNode }
->(({ $size, className, ...props }, ref) => (
-  <span
-    ref={ref}
-    className={cx(
-      "absolute",
-      $size === "large"
-        ? "right-[9px] top-2.5"
-        : $size === "medium"
-          ? "right-1 top-1"
-          : $size === "small"
-            ? "right-0.5 top-0.5"
-            : "",
-      "z-label",
-      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>,
+    props: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+      buttonClassName?: string;
+      variant?: "floating" | "normal";
+    },
     forwardedRef: ForwardedRef<HTMLButtonElement>
   ) {
-    const { children, onClick, ...rest } = props;
+    const {
+      children,
+      onClick,
+      className,
+      buttonClassName,
+      variant = "normal",
+      ...rest
+    } = props;
     const { size, inputRef, setButtonWidth } = useContext(InputFieldContext);
 
     const ref = useRef<HTMLButtonElement | null>(null);
@@ -286,7 +287,21 @@ const InputFieldButton = memo(
     );
 
     return (
-      <ButtonContainer $size={size}>
+      <span
+        className={cx(
+          "absolute",
+          size === "large"
+            ? "right-[9px] top-2.5"
+            : size === "medium"
+              ? "right-1 top-1"
+              : size === "small"
+                ? "right-0.5 top-0.5"
+                : "",
+          "z-label",
+          variant === "floating" && "right-0",
+          className
+        )}
+      >
         <Button
           ref={(element) => {
             ref.current = element;
@@ -297,11 +312,15 @@ const InputFieldButton = memo(
           onPointerDown={handlePointerDown}
           tabIndex={-1}
           size={size === "medium" ? "normal" : size}
+          className={cx(
+            buttonClassName,
+            variant === "floating" && "bg-transparent shadow-none !px-0.5"
+          )}
           {...rest}
         >
           {children}
         </Button>
-      </ButtonContainer>
+      </span>
     );
   })
 );
@@ -322,12 +341,8 @@ type InputFieldVariant = "normal" | "bare";
 type InputElementProps = {
   disabled?: boolean;
   readOnly?: boolean;
-  $labelPosition: LabelPosition;
-  $labelSize?: number;
-  $hasDropdown: boolean;
   $textAlign?: Property.TextAlign;
   $variant?: InputFieldVariant;
-  $size: InputFieldSize;
   children?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
@@ -341,45 +356,30 @@ const InputElement = forwardRef(
     {
       disabled,
       readOnly,
-      $labelPosition,
-      $labelSize,
-      $hasDropdown,
       $textAlign,
       $variant = "normal",
-      $size,
       className,
       children,
       value,
       onSubmit,
       as = "input",
+      style,
       ...props
     }: InputElementProps,
     ref: ForwardedRef<any>
   ) => {
-    const paddingLeft =
-      $variant === "bare"
-        ? 0
-        : ($size === "large" ? 10 : $size === "medium" ? 6 : 4) +
-          ($labelSize && $labelPosition === "start" ? 6 + $labelSize : 0);
-
-    const paddingRight =
-      $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, props.style]
-    );
+    const { buttonSize, labelSize, labelPosition, size } =
+      useContext(InputFieldContext);
+
+    const spacingStyles = getInputFieldSpacing({
+      labelPosition,
+      size,
+      buttonSize,
+      labelSize,
+    });
 
     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",
+      "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 transition-all",
       readOnly
         ? "text-text-muted"
         : disabled
@@ -387,11 +387,11 @@ const InputElement = forwardRef(
           : "text-text",
       "font-sans font-normal",
       $textAlign && `text-${$textAlign}`,
-      $size === "small"
+      size === "small"
         ? "text-[11px] leading-[19px] py-[1px]"
-        : $size === "large"
+        : size === "large"
           ? "py-2.5 text-heading5"
-          : $size === "medium"
+          : size === "medium"
             ? "py-1  text-heading5"
             : $variant === "bare" && "py-1 -m-1",
       className
@@ -403,7 +403,7 @@ const InputElement = forwardRef(
           ref={ref}
           {...props}
           className={inputClassName}
-          style={memoizedStyles}
+          style={{ ...spacingStyles, ...style }}
         >
           {children}
         </span>
@@ -417,7 +417,7 @@ const InputElement = forwardRef(
         onSubmit={onSubmit ?? (() => {})}
         {...props}
         className={inputClassName}
-        style={memoizedStyles}
+        style={{ ...spacingStyles, ...style }}
       />
     );
   }
@@ -434,16 +434,7 @@ const InputFieldInput = forwardRef(function InputFieldInput(
   { textAlign, variant, ...rest }: InputFieldInputProps,
   forwardedRef: ForwardedRef<HTMLInputElement>
 ) {
-  const {
-    labelPosition,
-    labelSize,
-    hasDropdown,
-    buttonSize,
-    size,
-    onFocusChange,
-    setInputRef,
-    id,
-  } = useContext(InputFieldContext);
+  const { onFocusChange, setInputRef, id } = useContext(InputFieldContext);
 
   const handleFocusChange = useCallback(
     (isFocused: boolean) => {
@@ -459,10 +450,6 @@ const InputFieldInput = forwardRef(function InputFieldInput(
   return (
     <InputElement
       ref={forwardedRef}
-      $labelPosition={labelPosition}
-      $labelSize={labelSize || buttonSize}
-      $hasDropdown={hasDropdown}
-      $size={size}
       $variant={variant}
       $textAlign={textAlign}
       onFocusChange={handleFocusChange}
@@ -472,17 +459,14 @@ const InputFieldInput = forwardRef(function InputFieldInput(
   );
 });
 
-const InputFieldTypeahead = (props: { prefix: string; value: string }) => {
-  const { labelPosition, labelSize, hasDropdown, size } =
-    useContext(InputFieldContext);
-
+const InputFieldTypeahead = (props: {
+  prefix: string;
+  value: string;
+  isFocused: boolean;
+}) => {
   return (
     <InputElement
       as="span"
-      $labelPosition={labelPosition}
-      $labelSize={labelSize}
-      $hasDropdown={hasDropdown}
-      $size={size}
       style={useMemo(
         () => ({
           position: "absolute",
@@ -498,9 +482,11 @@ const InputFieldTypeahead = (props: { prefix: string; value: string }) => {
       )}
     >
       <span style={{ opacity: 0 }}>{props.prefix}</span>
-      <span style={{ opacity: 0.5 }}>
-        {props.value.slice(props.prefix.length)}
-      </span>
+      {props.isFocused && (
+        <span style={{ opacity: 0.5 }}>
+          {props.value.slice(props.prefix.length)}
+        </span>
+      )}
     </InputElement>
   );
 };
@@ -511,13 +497,14 @@ const InputFieldTypeahead = (props: { prefix: string; value: string }) => {
 
 type InputFieldNumberInputProps = Omit<
   TextInputProps,
-  "value" | "onChange" | "onKeyDown" | "onSubmit"
+  "value" | "onChange" | "onKeyDown" | "onSubmit" | "readOnly"
 > & {
   value: number | undefined;
   onNudge?: (value: number) => void;
   variant?: "bare";
   onFocus?: FocusEventHandler;
   onBlur?: FocusEventHandler;
+  readOnly?: boolean;
 } & (
     | {
         onChange: (value: number) => void;
@@ -532,7 +519,7 @@ function parseNumber(value: string) {
 }
 
 function InputFieldNumberInput(props: InputFieldNumberInputProps) {
-  const { value, placeholder, onNudge, onBlur, ...rest } = props;
+  const { value, placeholder, onNudge, onBlur, readOnly, ...rest } = props;
   const onSubmit = "onSubmit" in props ? props.onSubmit : undefined;
   const onChange = "onChange" in props ? props.onChange : undefined;
 
@@ -609,11 +596,12 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
             : String(value)
       }
       placeholder={placeholder}
-      onKeyDown={handleKeyDown}
+      onKeyDown={!readOnly ? handleKeyDown : undefined}
       onBlur={handleBlur}
+      {...(readOnly ? { readOnly: true } : {})}
       {...("onChange" in props
-        ? { onChange: handleChange }
-        : { onSubmit: handleSubmit })}
+        ? { onChange: readOnly ? noop : handleChange }
+        : { onSubmit: readOnly ? noop : handleSubmit })}
     />
   );
 }
@@ -644,16 +632,19 @@ const RootContainer = forwardRef<
 
 interface InputFieldRootProps {
   id?: string;
-  flex?: string;
   children?: ReactNode;
   width?: number;
   /** @default end */
   labelPosition?: LabelPosition;
   labelSize?: number;
-  hasDropdown?: boolean;
   /** @default medium */
   size?: InputFieldSize;
   renderPopoverContent?: (options: { width: number }) => ReactNode;
+  /**
+   * if there is a popover, this is the offset from the trigger
+   * @default 3
+   */
+  sideOffset?: number;
   onFocusChange?: (isFocused: boolean) => void;
   style?: React.CSSProperties;
   className?: string;
@@ -661,10 +652,10 @@ interface InputFieldRootProps {
 
 function InputFieldRoot({
   id,
-  flex,
   children,
   width,
   labelPosition = "end",
+  sideOffset = 3,
   labelSize,
   size = "medium",
   renderPopoverContent,
@@ -672,13 +663,8 @@ function InputFieldRoot({
   style,
   className,
 }: InputFieldRootProps) {
-  const childrenArray = Children.toArray(children);
   const randomId = useId();
 
-  const hasDropdown = childrenArray.some(
-    (child) => isValidElement(child) && child.type === InputFieldDropdownMenu
-  );
-
   const [isFocused, setIsFocused] = React.useState(false);
 
   const [measuredLabelSize, setMeasuredLabelSize] = React.useState<number>();
@@ -710,7 +696,6 @@ function InputFieldRoot({
       labelPosition,
       labelSize: measuredLabelSize ?? labelSize,
       buttonSize: measuredButtonSize,
-      hasDropdown,
       size,
       isFocused,
       onFocusChange: handleFocusChange,
@@ -725,7 +710,6 @@ function InputFieldRoot({
       measuredLabelSize,
       labelSize,
       measuredButtonSize,
-      hasDropdown,
       size,
       isFocused,
       handleFocusChange,
@@ -742,7 +726,7 @@ function InputFieldRoot({
   );
 
   const measuredWidthObject = useMemo(
-    () => (measuredWidth ? { width: measuredWidth + 12 } : undefined),
+    () => (measuredWidth ? { width: measuredWidth + 4 } : undefined),
     [measuredWidth]
   );
 
@@ -752,7 +736,7 @@ function InputFieldRoot({
         <Popover
           open={true}
           trigger={rootElement}
-          sideOffset={3}
+          sideOffset={sideOffset}
           showArrow={false}
           onOpenAutoFocus={(event) => {
             event.preventDefault();
@@ -795,19 +779,20 @@ const PrimitiveInputField = ({
   const { labelSize, labelPosition, buttonSize } =
     useContext(InputFieldContext);
 
+  const spacingStyles = getInputFieldSpacing({
+    labelPosition,
+    buttonSize,
+    labelSize,
+  });
   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]
+    () => ({ ...spacingStyles, ...style }),
+    [spacingStyles, 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",
+        "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 transition-all",
         readOnly
           ? "text-text-muted"
           : disabled

package/src/components/Label.tsx

@@ -1,10 +1,10 @@
-import React, { forwardRef, LabelHTMLAttributes, memo } from "react";
+import * as React from "react";
 import { cx } from "../utils/classNames";
 
-interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {}
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}
 
-export const Label = memo(
-  forwardRef<HTMLLabelElement, LabelProps>(function Label(
+export const Label = React.memo(
+  React.forwardRef<HTMLLabelElement, LabelProps>(function Label(
     { className, ...props },
     ref
   ) {