@noya-app/noya-designsystem 0.1.48 → 0.1.49

package/src/components/GridView.tsx

@@ -12,7 +12,7 @@ import React, {
   useMemo,
 } from "react";
 import { useHover } from "../hooks/useHover";
-import { cx } from "../utils/classNames";
+import { cx, mergeConflictingClassNames } from "../utils/classNames";
 import withSeparatorElements from "../utils/withSeparatorElements";
 import { ActivityIndicator } from "./ActivityIndicator";
 import { ContextMenu } from "./ContextMenu";
@@ -96,6 +96,8 @@ interface ItemProps<MenuItemType extends string = string> {
   action?: ReactNode;
   onKeyDown?: (event: React.KeyboardEvent) => void;
   hovered?: boolean;
+  testShowInsideDropIndicator?: boolean;
+  role?: string;
 }
 
 const GridViewItem = forwardRefGeneric(function GridViewItem<
@@ -120,6 +122,8 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     action,
     onKeyDown,
     hovered = false,
+    testShowInsideDropIndicator: showInsideDropIndicator = false,
+    ...props
   }: ItemProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLDivElement>
 ) {
@@ -157,13 +161,16 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
 
   let element = (
     <div
+      {...props}
       className={cx(
-        "flex flex-col relative focus:shadow-[0px_0px_0px_1px_var(--sidebar-background),_0px_0px_0px_3px_var(--primary)] focus:outline-none rounded p-2 -m-2",
+        "flex flex-col relative rounded p-2 -m-2 text-text",
         "cursor-pointer",
         "active:opacity-70",
         selected && "bg-primary-pastel",
+        hovered && "bg-list-view-hover-background",
         disabled && "opacity-50",
-        hovered && "ring-1 ring-primary ring-inset opacity-85"
+        showInsideDropIndicator && "ring-2 ring-primary ring-inset",
+        "focus:ring-2 focus:ring-primary focus:ring-inset focus:outline-none"
       )}
       id={id}
       ref={forwardedRef}
@@ -177,8 +184,7 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
       <div
         className={cx(
           "flex items-center justify-center rounded",
-          bordered ? "border border-divider" : "border border-transparent",
-          selected ? "bg-primary-pastel" : "bg-input-background text-text"
+          bordered ? "border border-divider" : "border border-transparent"
         )}
         style={style}
       >
@@ -267,6 +273,9 @@ interface GridViewRootProps extends Partial<GridViewContextValue> {
   onDragEnter?: React.DragEventHandler<HTMLDivElement>;
   onDragLeave?: React.DragEventHandler<HTMLDivElement>;
   onDrop?: React.DragEventHandler<HTMLDivElement>;
+  role?: string;
+  renderEmptyState?: () => ReactNode;
+  contentClassName?: string;
 }
 
 const GridViewRoot = forwardRef(function GridViewRoot(
@@ -280,6 +289,7 @@ const GridViewRoot = forwardRef(function GridViewRoot(
     bordered = false,
     disabled = false,
     className,
+    contentClassName,
     ...props
   }: GridViewRootProps,
   forwardedRef: ForwardedRef<HTMLDivElement>
@@ -305,25 +315,29 @@ const GridViewRoot = forwardRef(function GridViewRoot(
     [bordered, disabled, gap, minColumnWidth, textPosition]
   );
 
+  const mergedClassName = useMemo(() => {
+    const baseClassName = cx(
+      "flex flex-col -mx-3",
+      scrollable ? "basis-0 min-h-0" : "flex-none",
+      className
+    );
+
+    return mergeConflictingClassNames([baseClassName, className], {
+      categories: ["flex"],
+    });
+  }, [className, scrollable]);
+
+  const content = <div className={cx("p-3", contentClassName)}>{children}</div>;
+
   return (
     <GridViewContext.Provider value={contextValue}>
       <div
         onClick={handleClick}
-        className={cx(
-          "flex flex-col -mx-3 -mb-1",
-          scrollable ? "basis-0 min-h-0" : "flex-none",
-          className
-        )}
+        className={mergedClassName}
         {...props}
         ref={forwardedRef}
       >
-        {scrollable ? (
-          <ScrollArea>
-            <div className="p-3">{children}</div>
-          </ScrollArea>
-        ) : (
-          <div className="p-3">{children}</div>
-        )}
+        {scrollable ? <ScrollArea>{content}</ScrollArea> : content}
       </div>
     </GridViewContext.Provider>
   );
@@ -350,7 +364,11 @@ function GridViewSection({
   return isEmpty && renderEmptyState ? (
     renderEmptyState()
   ) : (
-    <div className={cx("grid text-text", className)} style={styles}>
+    <div
+      role="presentation"
+      className={cx("grid text-text", className)}
+      style={styles}
+    >
       {children}
     </div>
   );

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}