@noya-app/noya-designsystem 0.1.62 → 0.1.64

package/src/components/GradientPicker.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Alpha,
   ColorModel,

package/src/components/Grid.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   forwardRefGeneric,
   memoGeneric,
@@ -70,6 +72,7 @@ export const Grid = memoGeneric(
       items,
       getId,
       getName,
+      getHref,
       //   expandable,
       //   getExpanded,
       getRenamable,
@@ -84,7 +87,7 @@ export const Grid = memoGeneric(
       onSelectionChange,
       selectedIds = emptyArray,
       //   itemRoleDescription = "clickable item",
-      //   detailPosition = "end",
+      detailPosition = "below",
       size = "medium",
       testHoveredId,
       testRenamingId,
@@ -169,6 +172,7 @@ export const Grid = memoGeneric(
           <GridView.Section>
             {items.map((item) => {
               const id = getId(item);
+              const href = getHref?.(item);
               const isDropdownOpen = dropdownOpenId === id;
               const isHovered =
                 testHoveredId === id ||
@@ -206,9 +210,18 @@ export const Grid = memoGeneric(
                       />
                     ));
 
+              const subtitle = (
+                <span
+                  className={cx(isSelected && "text-selected-list-item-text")}
+                >
+                  {renderDetail?.(item, isSelected)}
+                </span>
+              );
+
               return (
                 <GridView.Item<M>
                   key={id}
+                  href={href}
                   id={id}
                   role="option"
                   aria-selected={isSelected}
@@ -219,44 +232,40 @@ export const Grid = memoGeneric(
                     setHoveredId(isHovering ? id : undefined);
                   }}
                   title={
-                    <EditableText
-                      tabIndex={isRenaming ? undefined : -1}
-                      value={getName(item)}
-                      focused={isRenaming}
-                      testFocused={isTestingRenaming}
-                      readOnly={!itemIsRenamable || !onRename}
-                      onSubmit={(value) => {
-                        onRename?.(item, value);
-                        setRenamingId(undefined);
-                      }}
-                      onBlur={() => {
-                        setRenamingId(undefined);
-                      }}
-                      // max height ensures preview text and input are one line
-                      textClassName="bg-listview-editing-background max-h-input-height"
-                    >
-                      {(props) => (
-                        <span
-                          {...props}
-                          className={cx(
-                            isSelected
-                              ? "text-selected-list-item-text"
-                              : "text-text",
-                            "truncate select-none"
-                          )}
-                        />
-                      )}
-                    </EditableText>
-                  }
-                  subtitle={
-                    <span
-                      className={cx(
-                        isSelected && "text-selected-list-item-text"
-                      )}
-                    >
-                      {renderDetail?.(item, isSelected)}
-                    </span>
+                    <div className="flex items-center gap-2 flex-row">
+                      <EditableText
+                        className={cx(detailPosition === "end" && "flex-1")}
+                        tabIndex={isRenaming ? undefined : -1}
+                        value={getName(item)}
+                        focused={isRenaming}
+                        testFocused={isTestingRenaming}
+                        readOnly={!itemIsRenamable || !onRename}
+                        onSubmit={(value) => {
+                          onRename?.(item, value);
+                          setRenamingId(undefined);
+                        }}
+                        onBlur={() => {
+                          setRenamingId(undefined);
+                        }}
+                        // max height ensures preview text and input are one line
+                        textClassName="bg-listview-editing-background max-h-input-height"
+                      >
+                        {(props) => (
+                          <span
+                            {...props}
+                            className={cx(
+                              isSelected
+                                ? "text-selected-list-item-text"
+                                : "text-text",
+                              "truncate select-none"
+                            )}
+                          />
+                        )}
+                      </EditableText>
+                      {detailPosition === "end" && subtitle}
+                    </div>
                   }
+                  subtitle={detailPosition === "below" && subtitle}
                   loading={false}
                   selected={isSelected}
                   onClick={() => {

package/src/components/GridView.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { KeyModifiers } from "@noya-app/noya-keymap";
 import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
 import React, {
@@ -11,6 +13,7 @@ import React, {
   useContext,
   useMemo,
 } from "react";
+import { useLinkComponent } from "../contexts/LinkComponentContext";
 import { useHover } from "../hooks/useHover";
 import { cx, mergeConflictingClassNames } from "../utils/classNames";
 import withSeparatorElements from "../utils/withSeparatorElements";
@@ -79,6 +82,7 @@ const SectionTitle = ({
 
 interface ItemProps<MenuItemType extends string = string> {
   id: string;
+  href?: string;
   title?: ReactNode;
   subtitle?: ReactNode;
   loading?: boolean;
@@ -105,6 +109,7 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
 >(
   {
     id,
+    href,
     title,
     subtitle,
     loading,
@@ -125,23 +130,27 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     testShowInsideDropIndicator: showInsideDropIndicator = false,
     ...props
   }: ItemProps<MenuItemType>,
-  forwardedRef: ForwardedRef<HTMLDivElement>
+  forwardedRef: ForwardedRef<HTMLElement>
 ) {
   const { hoverProps } = useHover({
     onHoverChange,
   });
 
-  const { textPosition, bordered, disabled } = useContext(GridViewContext);
+  const { textPosition, bordered, disabled, alwaysShowSubtitles } =
+    useContext(GridViewContext);
 
   const handleClick = useCallback(
     (event: React.MouseEvent) => {
       event.stopPropagation();
-      event.preventDefault();
+
+      if (!href) {
+        event.preventDefault();
+      }
 
       onClick?.(event);
       onSelect?.(event);
     },
-    [onClick, onSelect]
+    [href, onClick, onSelect]
   );
 
   const handleKeyDown = useCallback(
@@ -159,8 +168,11 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     [onSelect, onKeyDown]
   );
 
+  const LinkComponent = useLinkComponent();
+  const Component = typeof href === "string" ? LinkComponent : "div";
+
   let element = (
-    <div
+    <Component
       {...props}
       className={cx(
         "flex flex-col relative rounded p-2 -m-2 text-text",
@@ -173,7 +185,8 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
         "focus:ring-2 focus:ring-primary focus:ring-inset focus:outline-none"
       )}
       id={id}
-      ref={forwardedRef}
+      href={href}
+      ref={forwardedRef as ForwardedRef<HTMLAnchorElement & HTMLDivElement>}
       {...hoverProps}
       tabIndex={disabled ? undefined : 0}
       onKeyDown={handleKeyDown}
@@ -194,8 +207,12 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
         <>
           <Spacer.Vertical size={8} />
           <ItemTitle>{title || " "}</ItemTitle>
-          <Spacer.Vertical size={2} />
-          <ItemDescription>{subtitle || " "}</ItemDescription>
+          {(alwaysShowSubtitles || subtitle) && (
+            <>
+              <Spacer.Vertical size={2} />
+              <ItemDescription>{subtitle || " "}</ItemDescription>
+            </>
+          )}
         </>
       )}
       {textPosition === "overlay" && hovered && (title || subtitle) && (
@@ -216,7 +233,7 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
           <ActivityIndicator opacity={0.5} size={13} />
         </div>
       )}
-    </div>
+    </Component>
   );
 
   if (menuItems && onSelectMenuItem) {
@@ -255,6 +272,7 @@ type GridViewContextValue = {
   bordered: boolean;
   disabled: boolean;
   gap: number;
+  alwaysShowSubtitles: boolean;
 };
 
 const GridViewContext = createContext<GridViewContextValue>({
@@ -263,6 +281,7 @@ const GridViewContext = createContext<GridViewContextValue>({
   bordered: false,
   disabled: false,
   gap: 0,
+  alwaysShowSubtitles: false,
 });
 
 interface GridViewRootProps extends Partial<GridViewContextValue> {
@@ -277,6 +296,7 @@ interface GridViewRootProps extends Partial<GridViewContextValue> {
   role?: string;
   renderEmptyState?: () => ReactNode;
   contentClassName?: string;
+  alwaysShowSubtitles?: boolean;
 }
 
 const GridViewRoot = forwardRef(function GridViewRoot(
@@ -291,6 +311,7 @@ const GridViewRoot = forwardRef(function GridViewRoot(
     disabled = false,
     className,
     contentClassName,
+    alwaysShowSubtitles = false,
     ...props
   }: GridViewRootProps,
   forwardedRef: ForwardedRef<HTMLDivElement>
@@ -306,14 +327,15 @@ const GridViewRoot = forwardRef(function GridViewRoot(
   );
 
   const contextValue = useMemo(
-    () => ({
+    (): GridViewContextValue => ({
       minColumnWidth,
       textPosition,
       bordered,
       disabled,
       gap,
+      alwaysShowSubtitles,
     }),
-    [bordered, disabled, gap, minColumnWidth, textPosition]
+    [bordered, disabled, gap, minColumnWidth, textPosition, alwaysShowSubtitles]
   );
 
   const mergedClassName = useMemo(() => {

package/src/components/IconButton.tsx

@@ -1,9 +1,11 @@
+"use client";
+
 import * as React from "react";
 import { cssVars } from "../theme";
-import { Button, ButtonRootProps } from "./Button";
+import { Button, ButtonProps } from "./Button";
 import { IconName, Icons } from "./Icons";
 
-type Props = Omit<ButtonRootProps, "children" | "variant" | "flex" | "size"> & {
+type Props = Omit<ButtonProps, "children" | "variant" | "flex" | "size"> & {
   iconName: IconName;
   className?: string;
   style?: React.CSSProperties;

package/src/components/Icons.tsx

@@ -11,7 +11,7 @@ export function renderIcon(
   if (typeof iconName === "string") {
     const Icon = Icons[iconName as IconName];
 
-    return <Icon />;
+    return <Icon className="min-h-[15px]" />;
   }
 
   return iconName;

package/src/components/InputField.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import { memoGeneric, useMergeRefs, useSize } from "@noya-app/react-utils";
 import { Property } from "csstype";
@@ -14,11 +16,11 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { useLabel, useLabelPosition } from "../hooks/useLabel";
+import { useLabel, useLabelType } from "../hooks/useLabel";
 import { cx, mergeConflictingClassNames } from "../utils/classNames";
 import handleNudge from "../utils/handleNudge";
 import { getInsetEndStyles, InputSize, startBaseStyles } from "../utils/inputs";
-import { Button, ButtonRootProps } from "./Button";
+import { Button, ButtonProps } from "./Button";
 import { DropdownMenu } from "./DropdownMenu";
 import { MenuItem } from "./internal/Menu";
 import TextInput, { TextInputProps } from "./internal/TextInput";
@@ -101,7 +103,7 @@ const InputFieldDropdownMenu = memoGeneric(function InputFieldDropdownMenu<
 const InputFieldButton = memo(
   forwardRef(function InputFieldButton(
     props: React.ButtonHTMLAttributes<HTMLButtonElement> &
-      ButtonRootProps & {
+      ButtonProps & {
         variant?: "floating" | "normal";
       },
     forwardedRef: ForwardedRef<HTMLButtonElement>
@@ -537,7 +539,7 @@ function InputFieldRoot({
   const measuredInputSize = useSize(inputRef, "width");
   const measuredStartSize = useSize(startRef, "width");
   const measuredEndSize = useSize(endRef, "width");
-  const labelPosition = useLabelPosition();
+  const labelType = useLabelType();
   const { label } = useLabel({ fieldId: id });
 
   const endStyles = getInsetEndStyles(size);
@@ -592,7 +594,7 @@ function InputFieldRoot({
         >
           {labelProp
             ? insetLabel
-            : label && labelPosition === "inset" && insetLabel}
+            : label && labelType === "inset" && insetLabel}
           {end}
         </span>
       )}

package/src/components/Label.tsx

@@ -1,13 +1,11 @@
 import React, { LabelHTMLAttributes, forwardRef, memo } from "react";
 import { mergeConflictingClassNames } from "../utils/classNames";
 
-export type LabelPosition = "inset" | "start" | "end" | "above";
-
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {}
 
 const labelStyles = "flex items-center select-none z-label relative";
 const labelTextStyles =
-  "font-sans text-label uppercase leading-3 font-bold text-text-muted";
+  "font-sans text-label uppercase leading-none font-bold text-text-muted";
 
 export const Label = memo(
   forwardRef<HTMLLabelElement, LabelProps>(function Label(

package/src/components/LabeledElementView.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as kiwi from "kiwi.js";
 import * as React from "react";
 
@@ -13,11 +15,13 @@ export const LabeledElementView = React.memo(function LabeledElementView({
   const elementIds: string[] = React.Children.toArray(children)
     .flatMap((child) =>
       React.isValidElement(child) && child.type === React.Fragment
-        ? (child.props.children as React.ReactNode[])
+        ? ((child as any).props.children as React.ReactNode[])
         : [child]
     )
     .map((child) =>
-      React.isValidElement(child) && "id" in child.props ? child.props.id : null
+      React.isValidElement(child) && "id" in (child as any).props
+        ? (child as any).props.id
+        : null
     )
     .filter((id) => !!id);
   const serializedIds = elementIds.join(",");

package/src/components/LabeledField.tsx

@@ -1,30 +1,33 @@
+"use client";
+
 import React, { memo, useMemo } from "react";
 import { useIndent } from "../hooks/useIndent";
 import {
   LabelContext,
-  LabelPositionContext,
-  LabelPositionContextValue,
-  useLabelPosition,
+  LabelType,
+  LabelTypeContext,
+  LabelTypeContextValue,
+  useLabelType,
   useLabelWidth,
 } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
-import { Label, LabelPosition } from "./Label";
+import { Label } from "./Label";
 
-export const labeledFieldStyles = (labelPosition?: LabelPosition) =>
+export const labeledFieldStyles = (labelType?: LabelType) =>
   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"
+    labelType === "end" && "flex-row-reverse justify-end",
+    labelType === "above" && "flex-col items-stretch justify-start"
   );
 
-const labelPositionInset: LabelPositionContextValue = {
-  position: "inset",
+const labelTypeInset: LabelTypeContextValue = {
+  type: "inset",
 };
 
 export const LabeledField = memo(function LabeledField({
   children,
   label,
-  labelPosition: labelPositionProp,
+  labelType: labelTypeProp,
   fieldId,
   minWidth = 100,
   className,
@@ -34,7 +37,7 @@ export const LabeledField = memo(function LabeledField({
 }: {
   children: React.ReactNode;
   label: React.ReactNode;
-  labelPosition?: LabelPosition;
+  labelType?: LabelType;
   labelStyle?: React.CSSProperties;
   /** Used for both the `id` of the field and the `htmlFor` of the label, unless `id` and `htmlFor` are explicitly provided */
   fieldId?: string;
@@ -47,13 +50,12 @@ export const LabeledField = memo(function LabeledField({
   const labelWidthFromContext = useLabelWidth();
   const labelWidth = labelWidthFromContext ?? minWidth;
 
-  const labelPositionFromContext = useLabelPosition();
-  const labelPosition =
-    labelPositionProp ?? labelPositionFromContext ?? "start";
+  const labelTypeFromContext = useLabelType();
+  const labelType = labelTypeProp ?? labelTypeFromContext;
 
   const labeledFieldClasses = useMemo(
-    () => labeledFieldStyles(labelPosition),
-    [labelPosition]
+    () => labeledFieldStyles(labelType),
+    [labelType]
   );
 
   const labelContextValue = useMemo(
@@ -89,29 +91,31 @@ export const LabeledField = memo(function LabeledField({
   return (
     <LabelContext.Provider value={labelContextValue}>
       {/* let components individually handle inset labels using info from context*/}
-      {labelPosition === "inset" ? (
-        <LabelPositionContext.Provider value={labelPositionInset}>
+      {labelType === "inset" ? (
+        <LabelTypeContext.Provider value={labelTypeInset}>
           {children}
-        </LabelPositionContext.Provider>
+        </LabelTypeContext.Provider>
       ) : (
         <div className={cx("flex relative flex-1", className)} style={style}>
           {Boolean(indentLevel) && <div style={indentStyle} />}
           <div className={labeledFieldClasses}>
-            <Label
-              htmlFor={fieldId}
-              // 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}
-            >
-              {label}
-            </Label>
-            {labelPosition === "start" ? (
+            {labelType !== "none" && (
+              <Label
+                htmlFor={fieldId}
+                // 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={
+                  labelType === "start" || labelType === "end"
+                    ? "self-start"
+                    : undefined
+                }
+                style={labelStyle}
+                {...props}
+              >
+                {label}
+              </Label>
+            )}
+            {labelType === "start" ? (
               <div className="flex-auto flex" style={fieldStyle}>
                 {children}
               </div>

package/src/components/List.tsx

@@ -1,9 +1,12 @@
+"use client";
+
 import {
   forwardRefGeneric,
   memoGeneric,
   useFileDropTarget,
 } from "@noya-app/react-utils";
 import React, { memo, useImperativeHandle, useRef, useState } from "react";
+import { useLinkComponent } from "../contexts/LinkComponentContext";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { updateSelection } from "../utils/selection";
@@ -32,6 +35,7 @@ export const List = memoGeneric(
       items,
       getId,
       getName,
+      getHref,
       expandable,
       getExpanded,
       getRenamable,
@@ -101,8 +105,9 @@ export const List = memoGeneric(
     };
 
     const ViewComponent = expandable ? TreeView : ListView;
+    const LinkComponent = useLinkComponent();
 
-    const fileDropTargetRef = useRef<HTMLDivElement>(null);
+    const fileDropTargetRef = useRef<HTMLDivElement | null>(null);
     const { isDropTargetActive, dropTargetProps } = useFileDropTarget(
       fileDropTargetRef,
       onFilesDrop
@@ -144,6 +149,7 @@ export const List = memoGeneric(
           { isDragOverlay }: ListViewItemInfo
         ) => {
           const id = getId(item);
+          const href = getHref?.(item);
           const isDropdownOpen = dropdownOpenId === id;
           const isHovered =
             (hoveredId === id || isDropdownOpen) && !isDragOverlay;
@@ -197,6 +203,8 @@ export const List = memoGeneric(
 
           return (
             <ViewComponent.Row
+              as={typeof href === "string" ? LinkComponent : undefined}
+              href={href}
               id={id}
               key={id}
               role="option"
@@ -355,7 +363,7 @@ const rowGapMap: Record<CollectionItemSize, string> = {
   xxs: "gap-2",
   xs: "gap-2",
   small: "gap-2",
-  medium: "gap-3",
+  medium: "gap-2",
   mediumLarge: "gap-3",
   large: "gap-3",
   xl: "gap-4",