@noya-app/noya-designsystem 0.1.43 → 0.1.45

package/src/components/InputField.tsx

@@ -18,20 +18,19 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { useLabel, useLabelPosition } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 import handleNudge from "../utils/handleNudge";
-import { Button } from "./Button";
+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 { Popover } from "./Popover";
 
-type LabelPosition = "start" | "end";
-
 export type InputFieldSize = "small" | "medium" | "large";
 
 type InputFieldContextValue = {
-  labelPosition: LabelPosition;
   labelSize?: number;
   buttonSize?: number;
   /** @default medium */
@@ -43,51 +42,11 @@ type InputFieldContextValue = {
   setLabelWidth?: (width: number) => void;
   setButtonWidth?: (width: number) => void;
   id?: string;
+  label?: ReactNode;
+  labelPosition?: LabelPosition;
 };
 
-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,
   size: "medium",
@@ -95,69 +54,37 @@ const InputFieldContext = createContext<InputFieldContextValue>({
   onFocusChange: () => {},
 });
 
+export const useInputFieldContext = () => useContext(InputFieldContext);
+
 const noop = () => {};
 
+export const getFieldSpacing = ({
+  buttonSize = 0,
+  labelSize = 0,
+  variant,
+}: {
+  buttonSize?: number;
+  labelSize?: number;
+  variant?: InputFieldVariant;
+}) => ({
+  paddingLeft: variant === "bare" ? "0px" : "6px",
+  paddingRight: `${variant === "bare" ? 0 : labelSize + buttonSize + (labelSize || buttonSize ? 12 : 6)}px`,
+});
+
 /* ----------------------------------------------------------------------------
  * Label
  * ------------------------------------------------------------------------- */
 
-interface LabelContainerProps {
-  labelPosition: LabelPosition;
-  size: InputFieldSize;
-  className?: string;
-  children?: React.ReactNode;
-  style?: React.CSSProperties;
-  htmlFor?: string;
-}
-
-const LabelContainer = forwardRef(function LabelContainer(
-  {
-    labelPosition: $labelPosition,
-    size: $size,
-    className,
-    style,
-    ...props
-  }: LabelContainerProps,
-  ref: ForwardedRef<HTMLLabelElement>
-) {
-  const { buttonSize } = useContext(InputFieldContext);
-  const spacingStyles = getLabelPosition({
-    labelPosition: $labelPosition,
-    size: $size,
-    buttonSize,
-  });
-
-  const memoizedStyles = useMemo(
-    () => ({ ...spacingStyles, ...style }),
-    [spacingStyles, style]
-  );
-
-  return (
-    <label
-      ref={ref}
-      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-1.5`
-          : $labelPosition === "end" && "justify-end pr-1.5",
-        className
-      )}
-      style={memoizedStyles}
-      {...props}
-    />
-  );
-});
-
 /**
- * Inserts a Label at the start or end of the input given a `labelPosition`on InputField.Root.
+ * 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 { labelPosition, setLabelWidth, size, id } =
-      useContext(InputFieldContext);
+    const { setLabelWidth, size, buttonSize, label, id, labelPosition } =
+      useInputFieldContext();
 
     const ref = useRef<HTMLLabelElement | null>(null);
 
@@ -171,17 +98,21 @@ const InputFieldLabel = memo(
       setLabelWidth(width);
     }, [setLabelWidth]);
 
+    if (labelPosition !== "inset") return null;
+
     return (
-      <LabelContainer
+      <InsetLabel
         ref={(element) => {
           ref.current = element;
           assignRef(forwardedRef, element);
         }}
         size={size}
-        labelPosition={labelPosition}
+        buttonSize={buttonSize}
         htmlFor={id}
         {...props}
-      />
+      >
+        {label}
+      </InsetLabel>
     );
   })
 );
@@ -236,10 +167,11 @@ const InputFieldDropdownMenu = memoGeneric(function InputFieldDropdownMenu<
 /** 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> & {
-      buttonClassName?: string;
-      variant?: "floating" | "normal";
-    },
+    props: React.ButtonHTMLAttributes<HTMLButtonElement> &
+      ButtonRootProps & {
+        buttonClassName?: string;
+        variant?: "floating" | "normal";
+      },
     forwardedRef: ForwardedRef<HTMLButtonElement>
   ) {
     const {
@@ -248,9 +180,10 @@ const InputFieldButton = memo(
       className,
       buttonClassName,
       variant = "normal",
+      as = "button",
       ...rest
     } = props;
-    const { size, inputRef, setButtonWidth } = useContext(InputFieldContext);
+    const { size, inputRef, setButtonWidth } = useInputFieldContext();
 
     const ref = useRef<HTMLButtonElement | null>(null);
 
@@ -291,7 +224,7 @@ const InputFieldButton = memo(
         className={cx(
           "absolute",
           size === "large"
-            ? "right-[9px] top-2.5"
+            ? "right-1 top-2.5"
             : size === "medium"
               ? "right-1 top-1"
               : size === "small"
@@ -303,6 +236,7 @@ const InputFieldButton = memo(
         )}
       >
         <Button
+          as={as}
           ref={(element) => {
             ref.current = element;
             assignRef(forwardedRef, element);
@@ -314,7 +248,7 @@ const InputFieldButton = memo(
           size={size === "medium" ? "normal" : size}
           className={cx(
             buttonClassName,
-            variant === "floating" && "bg-transparent shadow-none !px-0.5"
+            variant === "floating" && "bg-transparent shadow-none"
           )}
           {...rest}
         >
@@ -368,14 +302,12 @@ const InputElement = forwardRef(
     }: InputElementProps,
     ref: ForwardedRef<any>
   ) => {
-    const { buttonSize, labelSize, labelPosition, size } =
-      useContext(InputFieldContext);
+    const { buttonSize, labelSize, size, id } = useInputFieldContext();
 
-    const spacingStyles = getInputFieldSpacing({
-      labelPosition,
-      size,
+    const spacingStyles = getFieldSpacing({
       buttonSize,
       labelSize,
+      variant: $variant,
     });
 
     const inputClassName = cx(
@@ -414,6 +346,7 @@ const InputElement = forwardRef(
       <TextInput
         ref={ref}
         value={value ?? ""}
+        id={id}
         onSubmit={onSubmit ?? (() => {})}
         {...props}
         className={inputClassName}
@@ -434,7 +367,7 @@ const InputFieldInput = forwardRef(function InputFieldInput(
   { textAlign, variant, ...rest }: InputFieldInputProps,
   forwardedRef: ForwardedRef<HTMLInputElement>
 ) {
-  const { onFocusChange, setInputRef, id } = useContext(InputFieldContext);
+  const { onFocusChange, setInputRef } = useInputFieldContext();
 
   const handleFocusChange = useCallback(
     (isFocused: boolean) => {
@@ -453,7 +386,6 @@ const InputFieldInput = forwardRef(function InputFieldInput(
       $variant={variant}
       $textAlign={textAlign}
       onFocusChange={handleFocusChange}
-      id={id}
       {...rest}
     />
   );
@@ -505,6 +437,7 @@ type InputFieldNumberInputProps = Omit<
   onFocus?: FocusEventHandler;
   onBlur?: FocusEventHandler;
   readOnly?: boolean;
+  className?: string;
 } & (
     | {
         onChange: (value: number) => void;
@@ -634,8 +567,6 @@ interface InputFieldRootProps {
   id?: string;
   children?: ReactNode;
   width?: number;
-  /** @default end */
-  labelPosition?: LabelPosition;
   labelSize?: number;
   /** @default medium */
   size?: InputFieldSize;
@@ -651,10 +582,9 @@ interface InputFieldRootProps {
 }
 
 function InputFieldRoot({
-  id,
+  id: idProp,
   children,
   width,
-  labelPosition = "end",
   sideOffset = 3,
   labelSize,
   size = "medium",
@@ -663,7 +593,9 @@ function InputFieldRoot({
   style,
   className,
 }: InputFieldRootProps) {
+  const { fieldId: id, label } = useLabel({ fieldId: idProp });
   const randomId = useId();
+  const labelPosition = useLabelPosition();
 
   const [isFocused, setIsFocused] = React.useState(false);
 
@@ -693,7 +625,6 @@ function InputFieldRoot({
 
   const contextValue = useMemo(
     (): InputFieldContextValue => ({
-      labelPosition,
       labelSize: measuredLabelSize ?? labelSize,
       buttonSize: measuredButtonSize,
       size,
@@ -704,9 +635,10 @@ function InputFieldRoot({
       setLabelWidth: setMeasuredLabelSize,
       setButtonWidth: setMeasuredButtonSize,
       id: id ?? randomId,
+      label,
+      labelPosition,
     }),
     [
-      labelPosition,
       measuredLabelSize,
       labelSize,
       measuredButtonSize,
@@ -716,12 +648,15 @@ function InputFieldRoot({
       inputRef,
       id,
       randomId,
+      label,
+      labelPosition,
     ]
   );
 
   const rootElement = (
     <RootContainer $width={width} style={style} className={className}>
       {children}
+      {label && <InputFieldLabel />}
     </RootContainer>
   );
 
@@ -776,11 +711,9 @@ const PrimitiveInputField = ({
   React.InputHTMLAttributes<HTMLInputElement>,
   HTMLInputElement
 >) => {
-  const { labelSize, labelPosition, buttonSize } =
-    useContext(InputFieldContext);
+  const { id, labelSize, buttonSize } = useInputFieldContext();
 
-  const spacingStyles = getInputFieldSpacing({
-    labelPosition,
+  const spacingStyles = getFieldSpacing({
     buttonSize,
     labelSize,
   });
@@ -791,6 +724,7 @@ const PrimitiveInputField = ({
   return (
     <input
       style={memoizedStyles}
+      id={id}
       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 transition-all",
         readOnly
@@ -805,13 +739,55 @@ const PrimitiveInputField = ({
   );
 };
 
-export namespace InputField {
-  export const Root = memo(InputFieldRoot);
-  export const Input = memo(InputFieldInput);
-  export const Typeahead = memo(InputFieldTypeahead);
-  export const NumberInput = memo(InputFieldNumberInput);
-  export const DropdownMenu = InputFieldDropdownMenu;
-  export const Button = InputFieldButton;
-  export const Label = InputFieldLabel;
-  export const PrimitiveElement = PrimitiveInputField;
-}
+// Create a type for the main InputField component that combines Root and Input props
+export type InputFieldProps = InputFieldRootProps & InputFieldInputProps;
+
+// Create a map of all subcomponents
+const InputFieldSubcomponents = {
+  Root: memo(InputFieldRoot),
+  Input: memo(InputFieldInput),
+  Typeahead: memo(InputFieldTypeahead),
+  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) {
+    const {
+      width,
+      labelSize,
+      size,
+      renderPopoverContent,
+      sideOffset,
+      onFocusChange,
+      style,
+      className,
+      ...inputProps
+    } = props;
+
+    return (
+      <InputFieldSubcomponents.Root
+        width={width}
+        labelSize={labelSize}
+        size={size}
+        renderPopoverContent={renderPopoverContent}
+        sideOffset={sideOffset}
+        onFocusChange={onFocusChange}
+        style={style}
+        className={className}
+      >
+        <InputFieldSubcomponents.Input ref={ref} {...inputProps} />
+        {children}
+      </InputFieldSubcomponents.Root>
+    );
+  }
+);
+
+// Export both the namespace and the component
+const InputField = Object.assign(InputFieldComponent, InputFieldSubcomponents);
+
+export { InputField };

package/src/components/Label.tsx

@@ -1,22 +1,96 @@
-import * as React from "react";
+import React, {
+  CSSProperties,
+  LabelHTMLAttributes,
+  forwardRef,
+  memo,
+  useMemo,
+} from "react";
 import { cx } from "../utils/classNames";
+import { InputFieldSize } from "./InputField";
 
-interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+export type LabelPosition = "inset" | "start" | "end" | "above";
 
-export const Label = React.memo(
-  React.forwardRef<HTMLLabelElement, LabelProps>(function Label(
-    { className, ...props },
+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>
+    );
+  })
+);
+
+const labelStyles = "flex items-center select-none z-label relative";
+const labelTextStyles =
+  "font-sans text-label uppercase leading-3 font-bold text-text-muted";
+
+export const Label = memo(
+  forwardRef<HTMLLabelElement, LabelProps>(function Label(
+    { className, position = "start", children, ...props },
     ref
   ) {
     return (
       <label
         ref={ref}
         className={cx(
-          `font-sans text-label uppercase flex items-center leading-[19px] select-none font-bold text-text-muted z-label `,
+          labelStyles,
+          labelTextStyles,
+          "text-left min-h-[27px]",
+          (position === "start" || position === "end") && "self-start",
           className
         )}
         {...props}
-      />
+      >
+        {children}
+      </label>
     );
   })
 );

package/src/components/LabeledField.tsx

@@ -0,0 +1,112 @@
+import React, { memo, useMemo } from "react";
+import { useIndent } from "../hooks/useIndent";
+import {
+  LabelContext,
+  LabelPositionContext,
+  LabelPositionContextValue,
+  useLabelWidth,
+} from "../hooks/useLabel";
+import { cx } from "../utils/classNames";
+import { Label, LabelPosition } from "./Label";
+
+export const labeledFieldStyles = (labelPosition?: LabelPosition) =>
+  cx(
+    "flex flex-row flex-1 flex-wrap items-center gap-x-1.5",
+    labelPosition === "end" && "flex-row-reverse justify-end",
+    labelPosition === "above" && "flex-col items-stretch justify-start"
+  );
+
+const labelPositionInset: LabelPositionContextValue = {
+  position: "inset",
+};
+
+export const LabeledField = memo(function LabeledField({
+  children,
+  label,
+  labelPosition = "start",
+  fieldId,
+  minWidth = 100,
+  className,
+  style,
+  ...props
+}: {
+  children: React.ReactNode;
+  label: React.ReactNode;
+  labelPosition?: LabelPosition;
+  /** Used for both the `id` of the field and the `htmlFor` of the label, unless `id` and `htmlFor` are explicitly provided */
+  fieldId?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  /** @default 100 */
+  minWidth?: number;
+}) {
+  const indentLevel = useIndent();
+  const labelWidthFromContext = useLabelWidth();
+  const labelWidth = labelWidthFromContext ?? minWidth;
+
+  const labeledFieldClasses = useMemo(
+    () => labeledFieldStyles(labelPosition),
+    [labelPosition]
+  );
+
+  const labelContextValue = useMemo(
+    () => ({ fieldId, label }),
+    [fieldId, label]
+  );
+
+  const indentStyle = useMemo(
+    () => ({
+      width: indentLevel * 8,
+      flexBasis: indentLevel * 8,
+      flexShrink: 0,
+      flexGrow: 0,
+    }),
+    [indentLevel]
+  );
+
+  const fieldStyle = useMemo(
+    () => ({
+      minWidth: `calc(100% - ${labelWidth + indentLevel * 8 + 6}px)`,
+    }),
+    [labelWidth, indentLevel]
+  );
+
+  const labelStyle = useMemo(
+    () => ({
+      minWidth: `calc(${labelWidth}px - ${indentLevel * 8}px)`,
+    }),
+    [labelWidth, indentLevel]
+  );
+
+  return (
+    <LabelContext.Provider value={labelContextValue}>
+      {/* let components individually handle inset labels using info from context*/}
+      {labelPosition === "inset" ? (
+        <LabelPositionContext.Provider value={labelPositionInset}>
+          {children}
+        </LabelPositionContext.Provider>
+      ) : (
+        <div className={cx("flex relative flex-1", className)} style={style}>
+          {Boolean(indentLevel) && <div style={indentStyle} />}
+          <div className={labeledFieldClasses}>
+            <Label
+              htmlFor={fieldId}
+              position={labelPosition}
+              style={labelStyle}
+              {...props}
+            >
+              {label}
+            </Label>
+            {labelPosition === "start" ? (
+              <div className="flex-auto flex" style={fieldStyle}>
+                {children}
+              </div>
+            ) : (
+              children
+            )}
+          </div>
+        </div>
+      )}
+    </LabelContext.Provider>
+  );
+});