@noya-app/noya-designsystem 0.0.15 → 0.1.0

package/src/components/InputFieldWithCompletions.tsx

@@ -7,6 +7,7 @@ import React, {
   memo,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -163,6 +164,12 @@ type Props = {
   hideMenuWhenEmptyValue?: boolean;
 };
 
+export interface IInputFieldWithCompletions {
+  focus(): void;
+  setValue(value: string): void;
+  selectAllInputText(): void;
+}
+
 export const InputFieldWithCompletions = memo(
   forwardRef(function InputFieldWithCompletions(
     {
@@ -183,10 +190,9 @@ export const InputFieldWithCompletions = memo(
       hideChildrenWhenFocused = false,
       hideMenuWhenEmptyValue = false,
     }: Props,
-    forwardedRef: ForwardedRef<HTMLInputElement>
+    forwardedRef: ForwardedRef<IInputFieldWithCompletions>
   ) {
-    const defaultRef = useRef<HTMLInputElement>(null);
-    const ref = forwardedRef || defaultRef;
+    const ref = useRef<HTMLInputElement>(null);
 
     const [isFocused, setIsFocused] = useState(false);
     const [state, _setState] = useState({
@@ -338,12 +344,25 @@ export const InputFieldWithCompletions = memo(
 
             handled = true;
             break;
-          case "Enter":
+          case "Enter": {
             const item = filteredItems[selectedIndex];
-            selectItem(item);
+            if (item) {
+              selectItem(item);
+            }
+
+            handled = true;
+            break;
+          }
+          case "Tab": {
+            // Update the filter to the selected item
+            const item = filteredItems[selectedIndex];
+            if (item) {
+              handleChange(item.name);
+            }
 
             handled = true;
             break;
+          }
           case "Escape":
             if (ref && typeof ref === "object") {
               ref.current?.blur();
@@ -370,8 +389,9 @@ export const InputFieldWithCompletions = memo(
         handleIndexChange,
         filteredItems,
         selectedIndex,
-        selectItem,
         ref,
+        selectItem,
+        handleChange,
         filter,
         onDeleteWhenEmpty,
       ]
@@ -379,6 +399,20 @@ export const InputFieldWithCompletions = memo(
 
     const display = !filter && hideMenuWhenEmptyValue ? "none" : "flex";
 
+    const typeaheadValue = filteredItems[selectedIndex]?.name;
+
+    useImperativeHandle(forwardedRef, () => ({
+      focus: () => {
+        ref.current?.focus();
+      },
+      setValue: (value: string) => {
+        handleChange(value);
+      },
+      selectAllInputText: () => {
+        ref.current?.setSelectionRange(0, ref.current.value.length);
+      },
+    }));
+
     return (
       <InputField.Root
         size={size}
@@ -434,6 +468,9 @@ export const InputFieldWithCompletions = memo(
           aria-expanded={isFocused && display !== "none"}
           aria-controls="component-listbox"
         />
+        {filter && typeaheadValue && typeaheadValue.startsWith(filter) && (
+          <InputField.Typeahead value={typeaheadValue} />
+        )}
         {(!isFocused || !hideChildrenWhenFocused) && children}
         {loading && isFocused && (
           <InputField.Label>

package/src/components/InspectorPrimitives.tsx

@@ -102,7 +102,7 @@ export const LabeledRow = memo(function LabeledRow({
 }: {
   id?: string;
   children: ReactNode;
-  label: string;
+  label: ReactNode;
   labelTextStyle?: "small" | "heading5" | "heading4" | "heading3";
   gap?: CSSProperties["gap"];
   right?: ReactNode;

package/src/components/ListView.tsx

@@ -31,7 +31,7 @@ import { MenuItem } from "./internal/Menu";
 import { ScrollArea } from "./ScrollArea";
 import {
   DropValidator,
-  normalizeListIndex,
+  normalizeListDestinationIndex,
   RelativeDropPosition,
   Sortable,
 } from "./Sortable";
@@ -47,6 +47,9 @@ type ListColorScheme = "primary" | "secondary";
 
 type PressEventName = "onClick" | "onPointerDown";
 
+// TODO: Some of these could be passed in a single context value that's
+// the same for all rows. But doing this seems to cause an infinite loop and
+// prevents drag and drop from working.
 type ListRowContextValue = {
   marginType: ListRowMarginType;
   selectedPosition: ListRowPosition;
@@ -56,12 +59,23 @@ type ListRowContextValue = {
   gap: number;
   variant: ListViewVariant;
   sectionHeaderVariant: ListViewSectionHeaderVariant;
-  indentation: number;
   pressEventName: PressEventName;
   isSectionHeader: boolean;
   colorScheme: ListColorScheme;
 };
 
+// The dragged item isn't passed a context value (doing so causes an infinite loop),
+// so we pass this separately. Rows need the indentation to look correct when dragging,
+// and the dragged row doesn't have a ListRowContextValue.
+type DraggingContextValue = {
+  indentation: number;
+  isDragging?: boolean;
+};
+
+const DraggingContext = createContext<DraggingContextValue>({
+  indentation: 12,
+});
+
 const ListRowContext = createContext<ListRowContextValue>({
   marginType: "none",
   selectedPosition: "only",
@@ -71,7 +85,6 @@ const ListRowContext = createContext<ListRowContextValue>({
   gap: 0,
   variant: "normal",
   sectionHeaderVariant: "normal",
-  indentation: 12,
   pressEventName: "onClick",
   isSectionHeader: false,
   colorScheme: "primary",
@@ -305,7 +318,7 @@ interface ListViewRowProps<MenuItemType extends string = string> {
   selected?: boolean;
   depth?: number;
   disabled?: boolean;
-  draggable?: boolean;
+  // draggable?: boolean;
   hovered?: boolean;
   sortable?: boolean;
   gap?: number;
@@ -348,11 +361,12 @@ const ListViewRow = forwardRef(function ListViewRow<
   }: ListViewRowProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
+  depth = Math.max(0, depth);
+
   const {
     marginType,
     selectedPosition,
     sortable,
-    indentation,
     pressEventName,
     variant,
     sectionHeaderVariant,
@@ -363,6 +377,7 @@ const ListViewRow = forwardRef(function ListViewRow<
   const { hoverProps } = useHover({
     onHoverChange,
   });
+  const { indentation, isDragging } = useContext(DraggingContext);
 
   const handlePress = useCallback(
     (event: React.MouseEvent) => {
@@ -387,6 +402,16 @@ const ListViewRow = forwardRef(function ListViewRow<
     [onDoubleClick]
   );
 
+  const isDraggingStyle = useMemo(() => {
+    return isDragging
+      ? {
+          // TODO: Where do these offsets actually come from?
+          transform: `translate3d(-36px, -6px, 0)`,
+          width: `calc(100% + 48px)`,
+        }
+      : undefined;
+  }, [isDragging]);
+
   const renderContent = (
     {
       relativeDropPosition,
@@ -416,8 +441,9 @@ const ListViewRow = forwardRef(function ListViewRow<
         selectedPosition={selectedPosition}
         showsActiveState={pressEventName === "onClick"}
         aria-selected={selected}
-        divider={divider}
+        divider={!isDragging && divider}
         onKeyDown={onKeyDown}
+        style={isDraggingStyle}
         {...renderProps}
         {...mergeEventHandlers(
           { onPointerDown: renderProps.onPointerDown },
@@ -702,11 +728,6 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
     [data, renderItem]
   );
 
-  const renderOverlay = useCallback(
-    (index: number) => renderItem(data[index], index, { isDragging: true }),
-    [renderItem, data]
-  );
-
   const getItemContextValue = useCallback(
     (i: number): ListRowContextValue | undefined => {
       const current = renderChild(i);
@@ -765,7 +786,6 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
         sortable,
         expandable,
         divider,
-        indentation,
         pressEventName,
         variant,
         sectionHeaderVariant,
@@ -780,7 +800,6 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
       sortable,
       expandable,
       divider,
-      indentation,
       pressEventName,
       variant,
       sectionHeaderVariant,
@@ -788,6 +807,22 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
     ]
   );
 
+  const draggingContextOverlayValue = useMemo(
+    () => ({ indentation, isDragging: true }),
+    [indentation]
+  );
+
+  const renderOverlay = useCallback(
+    (index: number) => (
+      <div style={{ opacity: 0.25 }}>
+        <DraggingContext.Provider value={draggingContextOverlayValue}>
+          {renderItem(data[index], index, { isDragging: true })}
+        </DraggingContext.Provider>
+      </div>
+    ),
+    [draggingContextOverlayValue, renderItem, data]
+  );
+
   const renderWrappedChild = useCallback(
     (index: number) => {
       const contextValue = getItemContextValue(index);
@@ -845,32 +880,36 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
     [data, keyExtractor]
   );
 
+  const draggingContextValue = useMemo(() => ({ indentation }), [indentation]);
+
   return (
-    <RootContainer
-      {...{
-        [pressEventName]: handleClick,
-      }}
-      gap={gap}
-      scrollable={scrollable}
-    >
-      {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)
+    <DraggingContext.Provider value={draggingContextValue}>
+      <RootContainer
+        {...{
+          [pressEventName]: handleClick,
+        }}
+        gap={gap}
+        scrollable={scrollable}
+      >
+        {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)
+            )
           )
-        )
-      )}
-    </RootContainer>
+        )}
+      </RootContainer>
+    </DraggingContext.Provider>
   );
 });
 
@@ -946,5 +985,5 @@ export namespace ListView {
         (headerVariant === "label" ? sectionHeaderLabelHeight : rowHeight)
     );
   };
-  export const normalizeIndex = normalizeListIndex;
+  export const normalizeDestinationIndex = normalizeListDestinationIndex;
 }

package/src/components/Select.tsx

@@ -56,6 +56,7 @@ const SelectElement = styled.select<{ flex: CSSProperties["flex"] }>(
     appearance: "none",
     ...theme.textStyles.small,
     color: theme.colors.text,
+    lineHeight: "19px",
     width: "0px", // Reset intrinsic width
     flex: flex ?? "1 1 0px",
     position: "relative",
@@ -144,6 +145,7 @@ export const Select = memo(function Select<T extends string>({
             listeners.current.get(event.target.value)?.(),
           [listeners]
         )}
+        onPointerDown={(event) => event.stopPropagation()}
       >
         {optionElements}
       </SelectElement>

package/src/components/Sortable.tsx

@@ -9,12 +9,12 @@ import {
   Translate,
   useSensor,
   useSensors,
-} from '@dnd-kit/core';
+} from "@dnd-kit/core";
 import {
   SortableContext,
   useSortable,
   verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
+} from "@dnd-kit/sortable";
 import React, {
   createContext,
   memo,
@@ -25,32 +25,32 @@ import React, {
   useMemo,
   useRef,
   useState,
-} from 'react';
-import { createPortal } from 'react-dom';
+} from "react";
+import { createPortal } from "react-dom";
 
-export type RelativeDropPosition = 'above' | 'below' | 'inside';
+export type RelativeDropPosition = "above" | "below" | "inside";
 
 export type DropValidator = (
   sourceIndex: number,
   destinationIndex: number,
-  position: RelativeDropPosition,
+  position: RelativeDropPosition
 ) => boolean;
 
-export const normalizeListIndex = (
+export const normalizeListDestinationIndex = (
   index: number,
-  position: 'above' | 'below',
+  position: "above" | "below"
 ): number => {
-  return position === 'above' ? index : index + 1;
+  return position === "above" ? index : index + 1;
 };
 
 const defaultAcceptsDrop: DropValidator = (
   sourceIndex,
   destinationIndex,
-  position,
+  position
 ) => {
-  if (position === 'inside') return false;
+  if (position === "inside") return false;
 
-  const normalized = normalizeListIndex(destinationIndex, position);
+  const normalized = normalizeListDestinationIndex(destinationIndex, position);
 
   if (sourceIndex === normalized || sourceIndex + 1 === normalized) {
     return false;
@@ -64,11 +64,13 @@ const SortableItemContext = createContext<{
   position: Translate;
   acceptsDrop: DropValidator;
   setActivatorEvent: (event: PointerEvent) => void;
+  axis: "x" | "y";
 }>({
   keys: [],
   position: { x: 0, y: 0 },
   acceptsDrop: defaultAcceptsDrop,
   setActivatorEvent: () => {},
+  axis: "y",
 });
 
 function validateDropIndicator(
@@ -76,33 +78,33 @@ function validateDropIndicator(
   keys: string[],
   activeId: string,
   overId: string,
-  offsetTop: number,
-  elementTop: number,
-  elementHeight: number,
+  offsetStart: number,
+  elementStart: number,
+  elementSize: number
 ): RelativeDropPosition | undefined {
   const activeIndex = keys.indexOf(activeId);
   const overIndex = keys.indexOf(overId);
 
-  const acceptsDropInside = acceptsDrop(activeIndex, overIndex, 'inside');
+  const acceptsDropInside = acceptsDrop(activeIndex, overIndex, "inside");
 
   // If we're in the center of the element, prefer dropping inside
   if (
-    offsetTop >= elementTop + elementHeight / 3 &&
-    offsetTop <= elementTop + (elementHeight * 2) / 3 &&
+    offsetStart >= elementStart + elementSize / 3 &&
+    offsetStart <= elementStart + (elementSize * 2) / 3 &&
     acceptsDropInside
   )
-    return 'inside';
+    return "inside";
 
   // Are we over the top or bottom half of the element?
   const indicator =
-    offsetTop < elementTop + elementHeight / 2 ? 'above' : 'below';
+    offsetStart < elementStart + elementSize / 2 ? "above" : "below";
 
   // Drop above or below if possible, falling back to inside
   return acceptsDrop(activeIndex, overIndex, indicator)
     ? indicator
     : acceptsDropInside
-    ? 'inside'
-    : undefined;
+      ? "inside"
+      : undefined;
 }
 
 /* ----------------------------------------------------------------------------
@@ -119,7 +121,7 @@ interface ItemProps<T> {
       ref: Ref<T>;
       relativeDropPosition?: RelativeDropPosition;
       [key: string]: any;
-    } & UseSortableReturnType['attributes'],
+    } & UseSortableReturnType["attributes"]
   ) => JSX.Element;
 }
 
@@ -128,7 +130,7 @@ function SortableItem<T extends HTMLElement>({
   disabled,
   children,
 }: ItemProps<T>) {
-  const { keys, position, acceptsDrop, setActivatorEvent } =
+  const { keys, position, acceptsDrop, setActivatorEvent, axis } =
     useContext(SortableItemContext);
   const sortable = useSortable({ id, disabled });
 
@@ -148,7 +150,9 @@ function SortableItem<T extends HTMLElement>({
     setActivatorEvent(activatorEvent as PointerEvent);
   }
 
+  const eventX = (activatorEvent as PointerEvent | null)?.clientX ?? 0;
   const eventY = (activatorEvent as PointerEvent | null)?.clientY ?? 0;
+  const offsetLeft = eventX + position.x;
   const offsetTop = eventY + position.y;
 
   const ref = useCallback((node: T) => setNodeRef(node), [setNodeRef]);
@@ -164,9 +168,9 @@ function SortableItem<T extends HTMLElement>({
             keys,
             active.id,
             over.id,
-            offsetTop,
-            over.rect.offsetTop,
-            over.rect.height,
+            axis === "x" ? offsetLeft : offsetTop,
+            axis === "x" ? over.rect.offsetLeft : over.rect.offsetTop,
+            axis === "x" ? over.rect.width : over.rect.height
           )
         : undefined,
   });
@@ -183,9 +187,10 @@ interface RootProps {
   onMoveItem?: (
     sourceIndex: number,
     destinationIndex: number,
-    position: RelativeDropPosition,
+    position: RelativeDropPosition
   ) => void;
   acceptsDrop?: DropValidator;
+  axis?: "x" | "y";
 }
 
 function SortableRoot({
@@ -194,13 +199,14 @@ function SortableRoot({
   onMoveItem,
   renderOverlay,
   acceptsDrop = defaultAcceptsDrop,
+  axis = "y",
 }: RootProps) {
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
         distance: 4,
       },
-    }),
+    })
   );
 
   const [activeIndex, setActiveIndex] = useState<number | undefined>();
@@ -216,7 +222,7 @@ function SortableRoot({
     (event: DragStartEvent) => {
       setActiveIndex(keys.indexOf(event.active.id));
     },
-    [keys],
+    [keys]
   );
 
   const handleDragMove = useCallback((event: DragMoveEvent) => {
@@ -233,7 +239,9 @@ function SortableRoot({
         const oldIndex = keys.indexOf(active.id);
         const newIndex = keys.indexOf(over.id);
 
+        const eventX = activatorEvent.current?.clientX ?? 0;
         const eventY = activatorEvent.current?.clientY ?? 0;
+        const offsetLeft = eventX + position.x;
         const offsetTop = eventY + position.y;
 
         const indicator = validateDropIndicator(
@@ -241,9 +249,9 @@ function SortableRoot({
           keys,
           active.id,
           over.id,
-          offsetTop,
-          over.rect.offsetTop,
-          over.rect.height,
+          axis === "x" ? offsetLeft : offsetTop,
+          axis === "x" ? over.rect.offsetLeft : over.rect.offsetTop,
+          axis === "x" ? over.rect.width : over.rect.height
         );
 
         if (!indicator) return;
@@ -251,7 +259,7 @@ function SortableRoot({
         onMoveItem?.(oldIndex, newIndex, indicator);
       }
     },
-    [acceptsDrop, keys, onMoveItem, position.y],
+    [acceptsDrop, axis, keys, onMoveItem, position.x, position.y]
   );
 
   return (
@@ -262,8 +270,9 @@ function SortableRoot({
           acceptsDrop,
           position,
           setActivatorEvent,
+          axis,
         }),
-        [acceptsDrop, keys, position, setActivatorEvent],
+        [acceptsDrop, axis, keys, position, setActivatorEvent]
       )}
     >
       <DndContext
@@ -283,7 +292,7 @@ function SortableRoot({
                 activeIndex >= 0 &&
                 renderOverlay(activeIndex)}
             </DragOverlay>,
-            document.body,
+            document.body
           )}
       </DndContext>
     </SortableItemContext.Provider>