alinea 2.0.0-preview.11 → 2.0.0-preview.13

package/dist/components/SortableList.js

@@ -1,12 +1,3 @@
-import "../chunks/chunk-NUFRM6SI.js";
-import {
-  $5d3a17cc2564e64f$export$905ab40ac2179daa,
-  $74812c42150b3de8$export$7941f8aafa4b6021,
-  $bbaa08b3cd72f041$export$9d1611c77c2fe928,
-  $f302ef02e940a6f8$export$ccdee5eaf73cf661
-} from "../chunks/chunk-RE523BQ7.js";
-import "../chunks/chunk-RKDPDEF7.js";
-import "../chunks/chunk-PSSMQKAH.js";
 import {
   dist_default
 } from "../chunks/chunk-I4OYYAX5.js";
@@ -17,314 +8,246 @@ import {
   createContext,
   useContext,
   useMemo,
-  useRef,
-  useState
+  useRef
 } from "react";
+import { flushSync } from "react-dom";
+import {
+  IcRoundAdd,
+  IcRoundMoreHoriz,
+  IcRoundUnfoldLess,
+  IcRoundUnfoldMore
+} from "alinea/dashboard/icons";
 import { Button } from "./Button.js";
-import { FoldIcon } from "./FoldIcon.js";
 import { Icon } from "./Icon.js";
+import { pressSortableItem } from "./internal/sortableDrag.js";
 
 // src/components/SortableList.module.css
 var SortableList_default = {
-  "SortableListItemTitle": "alinea-SortableListItemTitle",
-  "SortableListItemSettings": "alinea-SortableListItemSettings",
-  "SortableListHandle": "alinea-SortableListHandle",
-  "SortableListItemDescription": "alinea-SortableListItemDescription",
-  "SortableListItemFooter": "alinea-SortableListItemFooter",
-  "SortableListDragPreview-title": "alinea-SortableListDragPreview-title",
-  "SortableListDragPreviewTitle": "alinea-SortableListDragPreview-title",
-  "SortableListItem": "alinea-SortableListItem",
+  "SortableListAdd-inner": "alinea-SortableListAdd-inner",
+  "SortableListAddInner": "alinea-SortableListAdd-inner",
+  "SortableListItemContent": "alinea-SortableListItemContent",
+  "SortableListItemTrigger": "alinea-SortableListItemTrigger",
+  "SortableListItemTrigger-more": "alinea-SortableListItemTrigger-more",
+  "SortableListItemTriggerMore": "alinea-SortableListItemTrigger-more",
   "SortableListItemActions": "alinea-SortableListItemActions",
-  "SortableListDragPreview": "alinea-SortableListDragPreview",
   "SortableListItemHeader": "alinea-SortableListItemHeader",
-  "SortableListItemContent": "alinea-SortableListItemContent",
-  "SortableListDragPreview-icon": "alinea-SortableListDragPreview-icon",
-  "SortableListDragPreviewIcon": "alinea-SortableListDragPreview-icon",
-  "SortableListItem-dropTarget": "alinea-SortableListItem-dropTarget",
-  "SortableListItemDropTarget": "alinea-SortableListItem-dropTarget",
+  "SortableListItemSettings": "alinea-SortableListItemSettings",
   "SortableListItemToggle": "alinea-SortableListItemToggle",
+  "SortableListItemTitle": "alinea-SortableListItemTitle",
+  "SortableListItemInsert-button": "alinea-SortableListItemInsert-button",
+  "SortableListItemInsertButton": "alinea-SortableListItemInsert-button",
+  "SortableListItemFooter": "alinea-SortableListItemFooter",
+  "SortableListItemInsert": "alinea-SortableListItemInsert",
+  "SortableListItem": "alinea-SortableListItem",
   "SortableListAdd": "alinea-SortableListAdd",
-  "SortableListItem-dropIndicator": "alinea-SortableListItem-dropIndicator",
-  "SortableListItemDropIndicator": "alinea-SortableListItem-dropIndicator",
-  "SortableListAdd-inner": "alinea-SortableListAdd-inner",
-  "SortableListAddInner": "alinea-SortableListAdd-inner",
-  "SortableListItemToggle-icon": "alinea-SortableListItemToggle-icon",
-  "SortableListItemToggleIcon": "alinea-SortableListItemToggle-icon",
-  "SortableListDragPreview-body": "alinea-SortableListDragPreview-body",
-  "SortableListDragPreviewBody": "alinea-SortableListDragPreview-body"
+  "SortableListItemDescription": "alinea-SortableListItemDescription",
+  "SortableList": "alinea-SortableList"
 };
 
 // src/components/SortableList.tsx
-import { Surface } from "./Surface.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var styles = dist_default(SortableList_default);
-var DEFAULT_DRAG_TYPE = "alinea/sortable-list-item";
 var SortableListContext = createContext(null);
 var SortableListItemContext = createContext(null);
 function SortableList({
   className,
   role = "list",
   onReorder,
-  dragType = DEFAULT_DRAG_TYPE,
   ...props
 }) {
-  const [draggingKey, setDraggingKey] = useState(null);
-  const [dropTarget, setDropTargetState] = useState(null);
-  const pointerDrag = useRef(false);
-  const source = useRef(null);
-  const dragged = useRef(null);
+  const ref = useRef(null);
+  const keys = useRef(/* @__PURE__ */ new Map());
   const reorderRef = useRef(onReorder);
   reorderRef.current = onReorder;
   const reorderable = Boolean(onReorder);
   const context = useMemo(() => {
+    if (!reorderable) return null;
+    function items() {
+      const list = ref.current;
+      if (!list) return [];
+      return Array.from(list.children).filter(
+        (child) => child instanceof HTMLElement && keys.current.has(child)
+      );
+    }
+    function element(key) {
+      for (const [element2, current] of keys.current)
+        if (current === key) return element2;
+    }
+    function move(item, target, position) {
+      const key = keys.current.get(item);
+      const targetKey = keys.current.get(target);
+      if (key === void 0 || targetKey === void 0) return;
+      flushSync(
+        () => reorderRef.current?.({
+          keys: /* @__PURE__ */ new Set([key]),
+          target: { key: targetKey, position }
+        })
+      );
+    }
     return {
-      reorderable,
-      dragType,
-      draggingKey,
-      dropTarget,
-      pointerDrag,
-      source,
-      startDrag(key, item, pointer) {
-        dragged.current = key;
-        source.current = item;
-        pointerDrag.current = pointer;
-        setDraggingKey(key);
-      },
-      endDrag() {
-        dragged.current = null;
-        source.current = null;
-        pointerDrag.current = false;
-        setDraggingKey(null);
-        setDropTargetState(null);
+      register(key, element2) {
+        for (const [current, value] of keys.current)
+          if (value === key) keys.current.delete(current);
+        if (element2) keys.current.set(element2, key);
       },
-      setDropTarget(target, exit) {
-        setDropTargetState((current) => {
-          if (!exit) return target;
-          return current && target && current.key !== target.key ? current : null;
+      press(key, event) {
+        const list = ref.current;
+        const item = element(key);
+        if (!list || !item) return;
+        pressSortableItem({
+          event: event.nativeEvent,
+          list,
+          item,
+          items,
+          onDrop: move
         });
       },
-      drop(target) {
-        const key = dragged.current;
-        setDropTargetState(null);
-        if (key === null || key === target.key) return;
-        reorderRef.current?.({ keys: /* @__PURE__ */ new Set([key]), target });
+      step(key, direction) {
+        const item = element(key);
+        if (!item) return false;
+        const elements = items();
+        const from = elements.indexOf(item);
+        const to = from + direction;
+        if (from === -1 || to < 0 || to >= elements.length) return false;
+        const focused = document.activeElement;
+        move(item, elements[to], direction > 0 ? "after" : "before");
+        if (focused instanceof HTMLElement && focused !== document.activeElement)
+          focused.focus();
+        return true;
       }
     };
-  }, [reorderable, dragType, draggingKey, dropTarget]);
+  }, [reorderable]);
   return /* @__PURE__ */ jsx(SortableListContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
-    Surface,
+    "div",
     {
       "data-slot": "sortable-list",
       ...props,
-      className,
+      className: styles.SortableList(dist_default.merge({ className })),
+      "data-reorderable": reorderable || void 0,
+      ref,
       role
     }
   ) });
 }
 function SortableListItem({
   id,
-  dragPreview,
-  ...props
-}) {
-  const list = useContext(SortableListContext);
-  if (list && id !== void 0)
-    return /* @__PURE__ */ jsx(
-      ReorderableItem,
-      {
-        ...props,
-        dragPreview,
-        id,
-        list
-      }
-    );
-  return /* @__PURE__ */ jsx(SortableListItemContext.Provider, { value: null, children: /* @__PURE__ */ jsx(SortableListItemElement, { ...props }) });
-}
-function SortableListItemElement({
   className,
-  dragging,
+  current,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  const list = useContext(SortableListContext);
+  const key = list && id !== void 0 ? id : null;
+  return /* @__PURE__ */ jsx(SortableListItemContext.Provider, { value: key, children: /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "sortable-list-item",
       role: "listitem",
       ...props,
+      "aria-current": current || void 0,
+      "aria-keyshortcuts": key === null ? void 0 : "Alt+ArrowUp Alt+ArrowDown",
       className: styles.SortableListItem(dist_default.merge({ className })),
-      "data-dragging": dragging || void 0
+      ref: key === null ? void 0 : (element) => list?.register(key, element)
     }
-  );
+  ) });
 }
-function ReorderableItem({
-  id,
-  list,
-  dragPreview,
-  children,
+function SortableListItemHeader({
+  className,
+  onPointerDownCapture,
+  onKeyDown,
+  onDragStart,
   ...props
 }) {
-  const ref = useRef(null);
-  const handle = useRef(null);
-  const preview = useRef(null);
-  const nativeDrag = useRef(false);
-  const { reorderable, dragType, draggingKey, dropTarget } = list;
-  const { dragProps, isDragging } = $74812c42150b3de8$export$7941f8aafa4b6021({
-    isDisabled: !reorderable,
-    getItems() {
-      return [{ "text/plain": String(id), [dragType]: String(id) }];
-    },
-    getAllowedDropOperations() {
-      return ["move"];
-    },
-    onDragStart() {
-      list.startDrag(id, ref.current, nativeDrag.current);
-    },
-    onDragEnd() {
-      const keyboard = !nativeDrag.current;
-      nativeDrag.current = false;
-      list.endDrag();
-      if (keyboard)
-        requestAnimationFrame(() => {
-          if (handle.current?.isConnected) handle.current.focus();
-        });
-    },
-    preview: dragPreview ? preview : void 0
-  });
-  const handleDragProps = useMemo(
-    () => ({
-      ...dragProps,
-      onDragStart(event) {
-        nativeDrag.current = true;
-        dragProps.onDragStart?.(event);
-      }
-    }),
-    [dragProps]
-  );
-  function dropPosition(y) {
-    const item = ref.current;
-    if (!item) return "after";
-    if (!list.pointerDrag.current) {
-      const source = list.source.current;
-      if (!source || source === item) return "after";
-      const sourceFollows = item.compareDocumentPosition(source) & Node.DOCUMENT_POSITION_FOLLOWING;
-      return sourceFollows ? "before" : "after";
-    }
-    return y < item.offsetHeight / 2 ? "before" : "after";
-  }
-  function acceptDrop(types, allowedOperations) {
-    return types.has(dragType) && allowedOperations.includes("move") ? "move" : "cancel";
-  }
-  const { dropProps } = $f302ef02e940a6f8$export$ccdee5eaf73cf661({
-    ref,
-    isDisabled: draggingKey === null,
-    getDropOperation: acceptDrop,
-    getDropOperationForPoint: acceptDrop,
-    onDropEnter(event) {
-      list.setDropTarget({ key: id, position: dropPosition(event.y) });
-    },
-    onDropMove(event) {
-      list.setDropTarget({ key: id, position: dropPosition(event.y) });
-    },
-    onDropExit() {
-      list.setDropTarget({ key: id, position: "after" }, true);
-    },
-    onDrop(event) {
-      list.drop({ key: id, position: dropPosition(event.y) });
-    }
-  });
-  const active = dropTarget?.key === id ? dropTarget.position : void 0;
-  const itemContext = useMemo(
-    () => reorderable ? { dragProps: handleDragProps, dragging: isDragging, handle } : null,
-    [reorderable, handleDragProps, isDragging]
-  );
-  return /* @__PURE__ */ jsx(SortableListItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsxs(
+  const list = useContext(SortableListContext);
+  const key = useContext(SortableListItemContext);
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ...dropProps,
-      className: styles.SortableListItem.dropTarget(),
-      "data-slot": "sortable-list-item-drop-target",
-      ref,
-      tabIndex: draggingKey !== null ? -1 : void 0,
-      children: [
-        /* @__PURE__ */ jsxs(SortableListItemElement, { ...props, dragging: isDragging, children: [
-          dragPreview && /* @__PURE__ */ jsx($5d3a17cc2564e64f$export$905ab40ac2179daa, { ref: preview, children: () => /* @__PURE__ */ jsx(Fragment, { children: dragPreview }) }),
-          children
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-hidden": true,
-            className: styles.SortableListItem.dropIndicator(),
-            "data-active": active === "before" || void 0,
-            "data-position": "before",
-            "data-slot": "sortable-list-drop-indicator"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-hidden": true,
-            className: styles.SortableListItem.dropIndicator(),
-            "data-active": active === "after" || void 0,
-            "data-position": "after",
-            "data-slot": "sortable-list-drop-indicator"
-          }
-        )
-      ]
+      "data-slot": "sortable-list-item-header",
+      ...props,
+      className: styles.SortableListItemHeader(dist_default.merge({ className })),
+      "data-reorderable": list !== null && key !== null || void 0,
+      onPointerDownCapture: (event) => {
+        onPointerDownCapture?.(event);
+        if (!list || key === null) return;
+        if (event.button !== 0 || event.pointerType === "touch") return;
+        const target = event.target;
+        if (target.closest('[aria-haspopup="menu"], [aria-haspopup="listbox"]'))
+          return;
+        list.press(key, event);
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!list || key === null || event.defaultPrevented) return;
+        if (!event.altKey) return;
+        const direction = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : 0;
+        if (direction && list.step(key, direction)) event.preventDefault();
+      },
+      onDragStart: (event) => {
+        onDragStart?.(event);
+        if (list && key !== null) event.preventDefault();
+      }
     }
-  ) });
+  );
 }
-function SortableListItemHeader({
+function SortableListItemTitle({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-slot": "sortable-list-item-header",
+      "data-slot": "sortable-list-item-title",
       ...props,
-      className: styles.SortableListItemHeader(dist_default.merge({ className }))
+      className: styles.SortableListItemTitle(dist_default.merge({ className }))
     }
   );
 }
-function SortableListHandle({
+function SortableListItemTrigger({
   className,
+  more = true,
+  children,
   ...props
 }) {
-  const item = useContext(SortableListItemContext);
-  if (!item)
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        "data-slot": "sortable-list-handle",
-        ...props,
-        className: styles.SortableListHandle(dist_default.merge({ className }))
-      }
-    );
-  return /* @__PURE__ */ jsx(
-    "span",
+  return /* @__PURE__ */ jsxs(
+    Button,
     {
-      "data-slot": "sortable-list-handle",
-      role: "button",
-      tabIndex: 0,
-      ...$bbaa08b3cd72f041$export$9d1611c77c2fe928(props, item.dragProps),
-      className: styles.SortableListHandle(dist_default.merge({ className })),
-      "data-dragging": item.dragging || void 0,
-      ref: item.handle
+      "data-slot": "sortable-list-item-trigger",
+      ...props,
+      variant: "ghost",
+      className: styles.SortableListItemTrigger(dist_default.merge({ className })),
+      children: [
+        children,
+        more && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "sortable-list-item-more",
+            className: styles.SortableListItemTrigger.more(),
+            children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, icon: IcRoundMoreHoriz })
+          }
+        )
+      ]
     }
   );
 }
-function SortableListItemTitle({
+function SortableListItemInsert({
   className,
   ...props
 }) {
-  const item = useContext(SortableListItemContext);
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-slot": "sortable-list-item-title",
-      ...props,
-      className: styles.SortableListItemTitle(dist_default.merge({ className })),
-      "data-dragging": item?.dragging || void 0
+      "data-slot": "sortable-list-item-insert",
+      className: styles.SortableListItemInsert(dist_default.merge({ className })),
+      children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "data-slot": "sortable-list-item-insert-button",
+          ...props,
+          className: styles.SortableListItemInsert.button(),
+          children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, icon: IcRoundAdd })
+        }
+      )
     }
   );
 }
@@ -368,14 +291,7 @@ function SortableListItemToggle({
       variant: "ghost",
       className: styles.SortableListItemToggle(dist_default.merge({ className })),
       size: "icon-sm",
-      children: /* @__PURE__ */ jsx(
-        FoldIcon,
-        {
-          "aria-hidden": true,
-          className: styles.SortableListItemToggle.icon(),
-          expanded
-        }
-      )
+      icon: expanded ? IcRoundUnfoldLess : IcRoundUnfoldMore
     }
   );
 }
@@ -420,25 +336,6 @@ function SortableListItemSettings({
     }
   );
 }
-function SortableListDragPreview({
-  className,
-  icon,
-  label,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "sortable-list-drag-preview",
-      ...props,
-      className: styles.SortableListDragPreview(dist_default.merge({ className })),
-      children: [
-        icon && /* @__PURE__ */ jsx("div", { className: styles.SortableListDragPreview.icon(), children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, icon }) }),
-        /* @__PURE__ */ jsx("div", { className: styles.SortableListDragPreview.body(), children: /* @__PURE__ */ jsx("strong", { className: styles.SortableListDragPreview.title(), children: label }) })
-      ]
-    }
-  );
-}
 function SortableListAdd({
   children,
   className,
@@ -457,15 +354,15 @@ function SortableListAdd({
 export {
   SortableList,
   SortableListAdd,
-  SortableListDragPreview,
-  SortableListHandle,
   SortableListItem,
   SortableListItemActions,
   SortableListItemContent,
   SortableListItemDescription,
   SortableListItemFooter,
   SortableListItemHeader,
+  SortableListItemInsert,
   SortableListItemSettings,
   SortableListItemTitle,
-  SortableListItemToggle
+  SortableListItemToggle,
+  SortableListItemTrigger
 };

package/dist/components/Spinner.js

@@ -5,11 +5,11 @@ import "../chunks/chunk-CQ52GEHY.js";
 
 // src/components/Spinner.module.css
 var Spinner_default = {
+  "Spinner": "alinea-Spinner",
   "Spinner-indicator": "alinea-Spinner-indicator",
   "SpinnerIndicator": "alinea-Spinner-indicator",
   "Spinner-icon": "alinea-Spinner-icon",
   "SpinnerIcon": "alinea-Spinner-icon",
-  "Spinner": "alinea-Spinner",
   "Spinner-spin": "alinea-Spinner-spin",
   "SpinnerSpin": "alinea-Spinner-spin"
 };

package/dist/components/Surface.js

@@ -5,9 +5,9 @@ import "../chunks/chunk-CQ52GEHY.js";
 
 // src/components/Surface.module.css
 var Surface_default = {
-  "Surface": "alinea-Surface",
-  "SurfaceRow": "alinea-SurfaceRow",
   "SurfaceContent": "alinea-SurfaceContent",
+  "SurfaceRow": "alinea-SurfaceRow",
+  "Surface": "alinea-Surface",
   "SurfaceHeader": "alinea-SurfaceHeader"
 };
 

package/dist/components/Switch.js

@@ -1,8 +1,8 @@
 import {
   $24585aa46d6ffdff$export$b5d5cf8927ab7262
-} from "../chunks/chunk-JOF663EG.js";
+} from "../chunks/chunk-QHHMKJUO.js";
 import "../chunks/chunk-NUFRM6SI.js";
-import "../chunks/chunk-RE523BQ7.js";
+import "../chunks/chunk-HOETF6HN.js";
 import "../chunks/chunk-RKDPDEF7.js";
 import "../chunks/chunk-PSSMQKAH.js";
 import {
@@ -12,15 +12,15 @@ import "../chunks/chunk-CQ52GEHY.js";
 
 // src/components/Switch.module.css
 var Switch_default = {
-  "Switch-label": "alinea-Switch-label",
-  "SwitchLabel": "alinea-Switch-label",
   "Switch-track": "alinea-Switch-track",
   "SwitchTrack": "alinea-Switch-track",
-  "Switch-thumb": "alinea-Switch-thumb",
-  "SwitchThumb": "alinea-Switch-thumb",
   "Switch": "alinea-Switch",
+  "Switch-label": "alinea-Switch-label",
+  "SwitchLabel": "alinea-Switch-label",
   "is-focusVisible": "alinea-is-focusVisible",
-  "isFocusVisible": "alinea-is-focusVisible"
+  "isFocusVisible": "alinea-is-focusVisible",
+  "Switch-thumb": "alinea-Switch-thumb",
+  "SwitchThumb": "alinea-Switch-thumb"
 };
 
 // src/components/Switch.tsx

package/dist/components/Table.d.ts

@@ -103,5 +103,7 @@ export interface TableTitleProps extends StyleProps {
     title: ReactNode;
     /** A small caption above the title, eg. the parent path */
     label?: ReactNode;
+    /** Shown right after the title, eg. a status icon */
+    suffix?: ReactNode;
 }
-export declare function TableTitle({ icon, title, label, className, style }: TableTitleProps): import("react").JSX.Element;
+export declare function TableTitle({ icon, title, label, suffix, className, style }: TableTitleProps): import("react").JSX.Element;