@noya-app/noya-designsystem 0.1.46 → 0.1.48

package/src/components/InputField.tsx

@@ -1,5 +1,5 @@
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
-import { assignRef, memoGeneric } from "@noya-app/react-utils";
+import { memoGeneric, useMergeRefs, useSize } from "@noya-app/react-utils";
 import { Property } from "csstype";
 import React, {
   createContext,
@@ -11,11 +11,8 @@ import React, {
   ReactNode,
   useCallback,
   useContext,
-  useEffect,
   useId,
-  useLayoutEffect,
   useMemo,
-  useRef,
   useState,
 } from "react";
 import { useLabel, useLabelPosition } from "../hooks/useLabel";
@@ -31,27 +28,33 @@ import { Popover } from "./Popover";
 export type InputFieldSize = "small" | "medium" | "large";
 
 type InputFieldContextValue = {
-  labelSize?: number;
-  buttonSize?: number;
+  labelWidth?: number;
+  buttonWidth?: number;
+  startWidth?: number;
   /** @default medium */
   size: InputFieldSize;
   isFocused: boolean;
   onFocusChange: (isFocused: boolean) => void;
-  inputRef?: ForwardedRef<HTMLInputElement>;
-  setInputRef?: (ref: ForwardedRef<HTMLInputElement>) => void;
-  setLabelWidth?: (width: number) => void;
-  setButtonWidth?: (width: number) => void;
+  inputRef: ForwardedRef<HTMLInputElement>;
+  buttonRef: ForwardedRef<HTMLButtonElement>;
+  labelRef: ForwardedRef<HTMLLabelElement>;
+  startRef: ForwardedRef<HTMLSpanElement>;
   id?: string;
   label?: ReactNode;
   labelPosition?: LabelPosition;
 };
 
 const InputFieldContext = createContext<InputFieldContextValue>({
-  labelSize: undefined,
-  buttonSize: undefined,
+  labelWidth: undefined,
+  buttonWidth: undefined,
+  startWidth: undefined,
   size: "medium",
   isFocused: false,
   onFocusChange: () => {},
+  inputRef: null,
+  buttonRef: null,
+  labelRef: null,
+  startRef: null,
 });
 
 export const useInputFieldContext = () => useContext(InputFieldContext);
@@ -59,16 +62,18 @@ export const useInputFieldContext = () => useContext(InputFieldContext);
 const noop = () => {};
 
 export const getFieldSpacing = ({
-  buttonSize = 0,
-  labelSize = 0,
+  buttonWidth = 0,
+  labelWidth = 0,
+  startWidth,
   variant,
 }: {
-  buttonSize?: number;
-  labelSize?: number;
+  buttonWidth?: number;
+  labelWidth?: number;
+  startWidth?: number;
   variant?: InputFieldVariant;
 }) => ({
-  paddingLeft: variant === "bare" ? "0px" : "6px",
-  paddingRight: `${variant === "bare" ? 0 : labelSize + buttonSize + (labelSize || buttonSize ? 12 : 6)}px`,
+  paddingLeft: `${variant === "bare" ? startWidth : startWidth ? startWidth + 12 : 6}px`,
+  paddingRight: `${variant === "bare" ? 0 : labelWidth + buttonWidth + (labelWidth || buttonWidth ? 12 : 6)}px`,
 });
 
 /* ----------------------------------------------------------------------------
@@ -83,31 +88,18 @@ const InputFieldLabel = memo(
     props: LabelHTMLAttributes<HTMLLabelElement>,
     forwardedRef: ForwardedRef<HTMLLabelElement>
   ) {
-    const { setLabelWidth, size, buttonSize, label, id, labelPosition } =
+    const { labelRef, size, buttonWidth, label, id, labelPosition } =
       useInputFieldContext();
 
-    const ref = useRef<HTMLLabelElement | null>(null);
-
-    useLayoutEffect(() => {
-      if (!setLabelWidth) return;
-
-      const width = ref.current?.getBoundingClientRect().width;
-
-      if (!width) return;
-
-      setLabelWidth(width);
-    }, [setLabelWidth]);
+    const ref = useMergeRefs(labelRef, forwardedRef);
 
     if (labelPosition !== "inset") return null;
 
     return (
       <InsetLabel
-        ref={(element) => {
-          ref.current = element;
-          assignRef(forwardedRef, element);
-        }}
+        ref={ref}
         size={size}
-        buttonSize={buttonSize}
+        buttonWidth={buttonWidth}
         htmlFor={id}
         {...props}
       >
@@ -170,6 +162,7 @@ const InputFieldButton = memo(
     props: React.ButtonHTMLAttributes<HTMLButtonElement> &
       ButtonRootProps & {
         buttonClassName?: string;
+        buttonStyle?: React.CSSProperties;
         variant?: "floating" | "normal";
       },
     forwardedRef: ForwardedRef<HTMLButtonElement>
@@ -178,24 +171,16 @@ const InputFieldButton = memo(
       children,
       onClick,
       className,
+      style,
       buttonClassName,
+      buttonStyle,
       variant = "normal",
       as = "button",
       ...rest
     } = props;
-    const { size, inputRef, setButtonWidth } = useInputFieldContext();
-
-    const ref = useRef<HTMLButtonElement | null>(null);
+    const { size, inputRef, buttonRef } = useInputFieldContext();
 
-    useLayoutEffect(() => {
-      if (!setButtonWidth) return;
-
-      const width = ref.current?.getBoundingClientRect().width;
-
-      if (!width) return;
-
-      setButtonWidth(width);
-    }, [setButtonWidth]);
+    const ref = useMergeRefs(buttonRef, forwardedRef);
 
     const defaultHandleClick = useCallback(
       (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -221,6 +206,7 @@ const InputFieldButton = memo(
 
     return (
       <span
+        style={style}
         className={cx(
           "absolute",
           size === "large"
@@ -237,10 +223,7 @@ const InputFieldButton = memo(
       >
         <Button
           as={as}
-          ref={(element) => {
-            ref.current = element;
-            assignRef(forwardedRef, element);
-          }}
+          ref={ref}
           variant="floating"
           onClick={onClick ?? defaultHandleClick}
           onPointerDown={handlePointerDown}
@@ -250,6 +233,7 @@ const InputFieldButton = memo(
             buttonClassName,
             variant === "floating" && "bg-transparent shadow-none"
           )}
+          style={buttonStyle}
           {...rest}
         >
           {children}
@@ -300,14 +284,18 @@ const InputElement = forwardRef(
       style,
       ...props
     }: InputElementProps,
-    ref: ForwardedRef<any>
+    forwardedRef: ForwardedRef<any>
   ) => {
-    const { buttonSize, labelSize, size, id } = useInputFieldContext();
+    const { buttonWidth, inputRef, labelWidth, size, id, startWidth } =
+      useInputFieldContext();
+
+    const ref = useMergeRefs(inputRef, forwardedRef);
 
     const spacingStyles = getFieldSpacing({
-      buttonSize,
-      labelSize,
+      buttonWidth,
+      labelWidth,
       variant: $variant,
+      startWidth,
     });
 
     const inputClassName = cx(
@@ -367,7 +355,9 @@ const InputFieldInput = forwardRef(function InputFieldInput(
   { textAlign, variant, ...rest }: InputFieldInputProps,
   forwardedRef: ForwardedRef<HTMLInputElement>
 ) {
-  const { onFocusChange, setInputRef } = useInputFieldContext();
+  const { onFocusChange, inputRef } = useInputFieldContext();
+
+  const ref = useMergeRefs(inputRef, forwardedRef);
 
   const handleFocusChange = useCallback(
     (isFocused: boolean) => {
@@ -376,13 +366,9 @@ const InputFieldInput = forwardRef(function InputFieldInput(
     [onFocusChange]
   );
 
-  useLayoutEffect(() => {
-    setInputRef?.(forwardedRef);
-  }, [forwardedRef, setInputRef]);
-
   return (
     <InputElement
-      ref={forwardedRef}
+      ref={ref}
       $variant={variant}
       $textAlign={textAlign}
       onFocusChange={handleFocusChange}
@@ -563,11 +549,14 @@ const RootContainer = forwardRef<
   />
 ));
 
+const startStyles = "absolute left-1.5 inset-y-0 flex items-center";
+
 interface InputFieldRootProps {
   id?: string;
   children?: ReactNode;
   width?: number;
-  labelSize?: number;
+  labelWidth?: number;
+  startWidth?: number;
   /** @default medium */
   size?: InputFieldSize;
   renderPopoverContent?: (options: { width: number }) => ReactNode;
@@ -579,6 +568,7 @@ interface InputFieldRootProps {
   onFocusChange?: (isFocused: boolean) => void;
   style?: React.CSSProperties;
   className?: string;
+  start?: ReactNode;
 }
 
 function InputFieldRoot({
@@ -586,12 +576,14 @@ function InputFieldRoot({
   children,
   width,
   sideOffset = 3,
-  labelSize,
+  labelWidth,
+  startWidth,
   size = "medium",
   renderPopoverContent,
   onFocusChange,
   style,
   className,
+  start,
 }: InputFieldRootProps) {
   const { fieldId: id, label } = useLabel({ fieldId: idProp });
   const randomId = useId();
@@ -599,9 +591,15 @@ function InputFieldRoot({
 
   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 startRef = React.useRef<HTMLSpanElement>(null);
+  const labelRef = React.useRef<HTMLLabelElement>(null);
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const measuredLabelSize = useSize(labelRef, "width");
+  const measuredButtonSize = useSize(buttonRef, "width");
+  const measuredInputSize = useSize(inputRef, "width");
+  const measuredStartSize = useSize(startRef, "width");
 
   const handleFocusChange = useCallback(
     (isFocused: boolean) => {
@@ -611,36 +609,25 @@ function InputFieldRoot({
     [onFocusChange]
   );
 
-  const [inputRef, setInputRef] =
-    React.useState<ForwardedRef<HTMLInputElement>>();
-
-  // eslint-disable-next-line @shopify/prefer-early-return
-  useEffect(() => {
-    if (inputRef && typeof inputRef !== "function") {
-      setMeasuredWidth?.(
-        isFocused ? inputRef?.current?.getBoundingClientRect().width : undefined
-      );
-    }
-  }, [inputRef, isFocused]);
-
   const contextValue = useMemo(
     (): InputFieldContextValue => ({
-      labelSize: measuredLabelSize ?? labelSize,
-      buttonSize: measuredButtonSize,
+      labelWidth: measuredLabelSize?.width ?? labelWidth,
+      buttonWidth: measuredButtonSize?.width,
+      startWidth: measuredStartSize?.width ?? startWidth,
+      inputRef,
+      buttonRef,
+      labelRef,
+      startRef,
       size,
       isFocused,
       onFocusChange: handleFocusChange,
-      inputRef,
-      setInputRef,
-      setLabelWidth: setMeasuredLabelSize,
-      setButtonWidth: setMeasuredButtonSize,
       id: id ?? randomId,
       label,
       labelPosition,
     }),
     [
       measuredLabelSize,
-      labelSize,
+      labelWidth,
       measuredButtonSize,
       size,
       isFocused,
@@ -650,19 +637,27 @@ function InputFieldRoot({
       randomId,
       label,
       labelPosition,
+      measuredStartSize,
+      startWidth,
     ]
   );
 
   const rootElement = (
     <RootContainer $width={width} style={style} className={className}>
       {children}
+      {start && (
+        <span ref={startRef} className={startStyles}>
+          {start}
+        </span>
+      )}
       {label && <InputFieldLabel />}
     </RootContainer>
   );
 
   const measuredWidthObject = useMemo(
-    () => (measuredWidth ? { width: measuredWidth + 4 } : undefined),
-    [measuredWidth]
+    () =>
+      measuredInputSize ? { width: measuredInputSize.width + 4 } : undefined,
+    [measuredInputSize]
   );
 
   return (
@@ -711,11 +706,11 @@ const PrimitiveInputField = ({
   React.InputHTMLAttributes<HTMLInputElement>,
   HTMLInputElement
 >) => {
-  const { id, labelSize, buttonSize } = useInputFieldContext();
+  const { id, labelWidth, buttonWidth } = useInputFieldContext();
 
   const spacingStyles = getFieldSpacing({
-    buttonSize,
-    labelSize,
+    buttonWidth,
+    labelWidth,
   });
   const memoizedStyles = useMemo(
     () => ({ ...spacingStyles, ...style }),
@@ -759,7 +754,7 @@ const InputFieldComponent = forwardRef<HTMLInputElement, InputFieldProps>(
   function InputField({ children, ...props }: InputFieldProps, ref) {
     const {
       width,
-      labelSize,
+      labelWidth,
       size,
       renderPopoverContent,
       sideOffset,
@@ -772,7 +767,7 @@ const InputFieldComponent = forwardRef<HTMLInputElement, InputFieldProps>(
     return (
       <InputFieldSubcomponents.Root
         width={width}
-        labelSize={labelSize}
+        labelWidth={labelWidth}
         size={size}
         renderPopoverContent={renderPopoverContent}
         sideOffset={sideOffset}

package/src/components/Label.tsx

@@ -19,7 +19,7 @@ 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;
+  buttonWidth?: number;
 } & LabelHTMLAttributes<HTMLLabelElement>;
 
 // apply to <label
@@ -28,26 +28,26 @@ export const insetLabelTextStyles = `font-sans text-label uppercase text-text-di
 // InsetLabelContainer
 export const insetLabelStyles = `flex items-center absolute top-0 bottom-0 z-label`;
 const getInsetLabelPosition = ({
-  buttonSize,
+  buttonWidth,
 }: {
-  buttonSize?: number;
+  buttonWidth?: number;
 }): CSSProperties => ({
-  right: `${6 + (buttonSize ?? 0)}px`,
+  right: `${6 + (buttonWidth ?? 0)}px`,
 });
 
 export const InsetLabel = memo(
   forwardRef<HTMLLabelElement, InsetLabelProps>(function InsetLabel(
-    { children, buttonSize, size = "medium", className, style, ...props },
+    { children, buttonWidth, size = "medium", className, style, ...props },
     ref
   ) {
     const styles = useMemo(
       () => ({
         ...getInsetLabelPosition({
-          buttonSize,
+          buttonWidth,
         }),
         ...style,
       }),
-      [buttonSize, style]
+      [buttonWidth, style]
     );
 
     return (

package/src/components/List.tsx

@@ -7,10 +7,10 @@ import React, { useImperativeHandle, useRef, useState } from "react";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { updateSelection } from "../utils/selection";
+import { ActionMenu } from "./ActionMenu";
 import { CollectionProps, CollectionRef } from "./Collection";
 import { ListView } from "./ListView";
 import { TreeView } from "./TreeView";
-
 const cssVarOverrides = {
   "--icon-selected": cssVars.colors.primary,
 };
@@ -19,7 +19,7 @@ const emptyArray: string[] = [];
 
 export const List = memoGeneric(
   forwardRefGeneric(function List<T, M extends string = string>(
-    props: CollectionProps<T, M> & { ref?: React.ForwardedRef<CollectionRef> },
+    props: CollectionProps<T, M>,
     ref: React.ForwardedRef<CollectionRef>
   ) {
     const {
@@ -51,11 +51,12 @@ export const List = memoGeneric(
       onDoubleClickItem,
       renamable,
       selectedIds = emptyArray,
+      renderEmptyState,
     } = props;
 
     const [internalHoveredId, setHoveredId] = useState<string>();
     const [internalRenamingId, setRenamingId] = useState<string>();
-
+    const [dropdownOpenId, setDropdownOpenId] = useState<string>();
     const hoveredId = internalHoveredId ?? testHoveredId;
     const renamingId = testRenamingId ?? internalRenamingId;
 
@@ -72,13 +73,17 @@ export const List = memoGeneric(
       onSelectionChange(newSelectedIds, event);
     };
 
-    const handleMenuAction = (action: M) => {
+    const handleMenuAction = (action: M, actionItem: T) => {
       if (!onSelectMenuItem) return;
 
       const selectedItems = items.filter((item) =>
         selectedIds.includes(getId(item))
       );
-      onSelectMenuItem(action, selectedItems);
+
+      onSelectMenuItem(
+        action,
+        selectedItems.length === 0 ? [actionItem] : selectedItems
+      );
     };
 
     const ViewComponent = expandable ? TreeView : ListView;
@@ -98,7 +103,11 @@ export const List = memoGeneric(
     return (
       <ViewComponent.Root
         variant="bare"
-        className={cx(className, isDropTargetActive && "bg-primary-pastel")}
+        className={cx(
+          className,
+          isDropTargetActive && "bg-primary-pastel",
+          scrollable && "basis-0 min-h-0"
+        )}
         containerRef={fileDropTargetRef}
         scrollable={scrollable}
         data={items}
@@ -110,6 +119,7 @@ export const List = memoGeneric(
         sortable={expandable}
         acceptsDrop={acceptsDrop}
         onMoveItem={onMoveItem}
+        renderEmptyState={renderEmptyState}
         {...dropTargetProps}
         renderItem={(
           item: T,
@@ -117,18 +127,39 @@ export const List = memoGeneric(
           { isDragging }: { isDragging: boolean }
         ) => {
           const id = getId(item);
-          const isHovered = hoveredId === id && !isDragging;
+          const isDropdownOpen = dropdownOpenId === id;
+          const isHovered = (hoveredId === id || isDropdownOpen) && !isDragging;
           const expanded = getExpanded?.(item);
           const itemIsRenamable = getRenamable?.(item) ?? renamable;
           const isSelected = selectedIds.includes(id);
           const isRenaming = itemIsRenamable && onRename && renamingId === id;
           const isTestingRenaming = testRenamingId === id;
 
-          const thumbnail = renderThumbnail?.(item, isSelected);
+          const thumbnail = renderThumbnail?.({
+            item,
+            selected: isSelected,
+          });
           const action =
             (isHovered || isSelected) &&
             !isRenaming &&
-            renderAction?.(item, isSelected);
+            (typeof renderAction === "function"
+              ? renderAction(item, isSelected)
+              : renderAction === "menu" &&
+                menuItems && (
+                  <ActionMenu
+                    menuItems={menuItems}
+                    onSelect={(action) => handleMenuAction(action, item)}
+                    selected={isSelected}
+                    onOpenChange={(open) => {
+                      setDropdownOpenId(open ? id : undefined);
+
+                      if (open && !isSelected) {
+                        handleSelect(id);
+                      }
+                    }}
+                  />
+                ));
+
           const end =
             action ||
             (detailPosition === "end" && renderDetail?.(item, isSelected));
@@ -172,15 +203,10 @@ export const List = memoGeneric(
                 }
               }}
               menuItems={menuItems}
-              onSelectMenuItem={handleMenuAction}
+              onSelectMenuItem={(action) => handleMenuAction(action, item)}
               onContextMenu={() => {
                 if (!isSelected) {
-                  handleSelect(id, {
-                    shiftKey: false,
-                    altKey: false,
-                    metaKey: false,
-                    ctrlKey: false,
-                  });
+                  handleSelect(id);
                 }
               }}
               tabIndex={0}

package/src/components/ListView.tsx

@@ -778,6 +778,7 @@ export type ListViewRootProps = {
   onDragEnter?: React.DragEventHandler<HTMLDivElement>;
   onDragLeave?: React.DragEventHandler<HTMLDivElement>;
   onDrop?: React.DragEventHandler<HTMLDivElement>;
+  renderEmptyState?: () => ReactNode;
 };
 
 const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
@@ -811,6 +812,7 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
     onDragEnter,
     onDragLeave,
     onDrop,
+    renderEmptyState,
   }: RenderProps<T> & ListViewRootProps,
   forwardedRef: ForwardedRef<IVirtualizedList>
 ) {
@@ -1040,23 +1042,25 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
         onDragLeave={onDragLeave}
         onDrop={onDrop}
       >
-        {withScrollable((scrollElementRef: HTMLDivElement | null) =>
-          withSortable(
-            virtualized ? (
-              <VirtualizedList<T>
-                ref={forwardedRef}
-                scrollElement={scrollElementRef!}
-                items={data}
-                size={virtualized}
-                getItemHeight={getItemHeight}
-                keyExtractor={getKey}
-                renderItem={renderWrappedChild}
-              />
-            ) : (
-              range(0, data.length).map(renderWrappedChild)
-            )
-          )
-        )}
+        {data.length === 0 && renderEmptyState
+          ? renderEmptyState()
+          : withScrollable((scrollElementRef: HTMLDivElement | null) =>
+              withSortable(
+                virtualized ? (
+                  <VirtualizedList<T>
+                    ref={forwardedRef}
+                    scrollElement={scrollElementRef!}
+                    items={data}
+                    size={virtualized}
+                    getItemHeight={getItemHeight}
+                    keyExtractor={getKey}
+                    renderItem={renderWrappedChild}
+                  />
+                ) : (
+                  range(0, data.length).map(renderWrappedChild)
+                )
+              )
+            )}
       </div>
     </ListViewDraggingContext.Provider>
   );