@k2b/ui 0.16.0 → 0.18.0

package/dist/browser/layout/AppWorkspace.js

@@ -44,7 +44,7 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspac
   _tmpl$24 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-meta>`),
   _tmpl$25 = /*#__PURE__*/_$template(`<a class=k2b-app-workspace__sidebar-item-action>`),
   _tmpl$26 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-item-action>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon aria-hidden=true><i>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon><i>`),
   _tmpl$28 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text>`),
   _tmpl$29 = /*#__PURE__*/_$template(`<span>`),
   _tmpl$30 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__nav-tree-toggle data-k2b-nav-tree-toggle aria-hidden=true><i>`),
@@ -55,7 +55,7 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspac
   _tmpl$35 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
   _tmpl$36 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace>`);
 import { Link } from "@k2b/ssr/nav";
-import { children, createContext, createMemo, createSignal, createUniqueId, For, mergeProps, onCleanup, onMount, Show, useContext } from "solid-js";
+import { children, createContext, createEffect, createMemo, createSignal, createUniqueId, For, mergeProps, onCleanup, onMount, Show, useContext } from "solid-js";
 import { useUiMessages } from "../intl/messages";
 import { APP_WORKSPACE_SIDEBAR_HIDE_EVENT, installAppWorkspaceController } from "./app-workspace-controller";
 import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspaceLayoutStyle, appWorkspacePanelVariable } from "./app-workspace-state";
@@ -84,10 +84,11 @@ const sidebarChildSlot = value => Boolean(value && typeof value === "object" &&
 const sidebarItemSlot = value => Boolean(value && typeof value === "object" && "kind" in value && [SIDEBAR_ITEM_ICON, SIDEBAR_ITEM_LABEL, SIDEBAR_ITEM_META, SIDEBAR_ITEM_ACTION].includes(value.kind));
 const navTreeItemSlot = value => Boolean(value && typeof value === "object" && "kind" in value && value.kind === NAV_TREE_ITEM);
 function ResizeHandle(props) {
+  const messages = useUiMessages();
   return (() => {
     var _el$ = _$getNextElement(_tmpl$);
     _$effect(_p$ => {
-      var _v$ = props.label ?? (props.kind === "sidebar" ? "Resize navigation" : props.kind === "pane" ? "Resize workspace pane" : props.kind === "detail" ? "Resize detail panel" : "Resize bottom drawer"),
+      var _v$ = props.label ?? (props.kind === "sidebar" ? messages().resizeNavigation : props.kind === "pane" ? messages().resizeWorkspacePane : props.kind === "detail" ? messages().resizeDetailPanel : messages().resizeBottomDrawer),
         _v$2 = props.controls,
         _v$3 = props.kind === "drawer" ? "horizontal" : "vertical",
         _v$4 = props.minSize,
@@ -135,6 +136,9 @@ function ResizeHandle(props) {
     return _el$;
   })();
 }
+
+/** One requested place for an item among its unchanged siblings. */
+
 const modeAttrs = mode => mode && mode !== "always" ? {
   "data-sidebar-mode": mode
 } : {};
@@ -146,6 +150,13 @@ const scrollAttrs = key => key ? {
   "data-scroll-preserve": key
 } : {};
 const iconClass = (icon, fallback = "ti-circle") => icon?.startsWith("ti ") ? icon : `ti ${icon || fallback}`;
+/** A named icon is an image screen readers announce; any other icon is decoration. */
+const iconAccessibility = label => label ? {
+  role: "img",
+  "aria-label": label
+} : {
+  "aria-hidden": true
+};
 function AppWorkspaceMainPane(props) {
   return {
     kind: MAIN_PANE,
@@ -1153,6 +1164,27 @@ const AppWorkspaceNavTreeItem = props => ({
   kind: NAV_TREE_ITEM,
   ...props
 });
+const NAV_TREE_DRAG_TYPE = "application/x-k2b-nav-tree-item";
+const callDragHandler = (handler, event) => {
+  if (typeof handler === "function") handler(event);else handler?.[0](handler[1], event);
+};
+
+/**
+ * The move that puts the sibling at `from` into the gap before `slot`
+ * (`siblings.length` is the gap after the last one), or `null` when its place
+ * would not change or it would pass an item that is not movable.
+ */
+const navTreeMove = (siblings, from, slot, parentId) => {
+  if (from < 0 || slot < 0 || slot > siblings.length || slot === from || slot === from + 1) return null;
+  const passed = slot < from ? siblings.slice(slot, from) : siblings.slice(from + 1, slot);
+  if (passed.some(sibling => !sibling.movable)) return null;
+  return {
+    id: siblings[from].id,
+    parentId,
+    beforeId: siblings[slot]?.id ?? null,
+    afterId: siblings[slot - 1]?.id ?? null
+  };
+};
 const AppWorkspaceNavTree = props => {
   let root;
   const resolved = children(() => props.children);
@@ -1197,16 +1229,48 @@ const AppWorkspaceNavTree = props => {
     });
   };
 
+  // Reordering: the dragged item and the gap the pointer marks. The application renders the new
+  // order; the item moved by keyboard takes focus back when its row mounts or changes place.
+  const [dragged, setDragged] = createSignal(null);
+  const [dropTarget, setDropTarget] = createSignal(null);
+  let claimedDragOver = null;
+  let refocusId = null;
+  const endDrag = () => {
+    setDragged(null);
+    setDropTarget(null);
+  };
+  const requestMove = (move, keepFocus) => {
+    if (!move || !props.onMove) return;
+    refocusId = keepFocus ? move.id : null;
+    props.onMove(move);
+  };
+
   // Items arrive through an accessor so a changed nested list reconciles rows by identity instead of rebuilding the list.
-  const renderItems = (value, depth, parentId) => _$createComponent(For, {
+  const renderItems = (siblings, depth, parentId) => _$createComponent(For, {
     get each() {
-      return navTreeItems(value());
+      return siblings();
     },
-    children: item => {
+    children: (item, place) => {
       const nested = createMemo(() => navTreeItems(item.children));
       const hasChildren = () => nested().length > 0;
       const selected = () => props.selectedId === item.id;
+      const siblingIndex = id => siblings().findIndex(sibling => sibling.id === id);
+      const movable = () => Boolean(props.onMove && item.movable && !item.disabled);
       let treeItem;
+      const ownRow = () => treeItem?.firstElementChild;
+
+      // A new row for the moved item, or the same row at its new place: moving a focused row drops its focus.
+      createEffect(() => {
+        place();
+        if (refocusId !== item.id) return;
+        queueMicrotask(() => {
+          if (refocusId !== item.id || !treeItem?.isConnected) return;
+          const active = treeItem.ownerDocument.activeElement;
+          if (!active || active === treeItem.ownerDocument.body) treeItem.focus({
+            preventScroll: true
+          });
+        });
+      });
       const activate = event => {
         if (item.disabled) return;
         treeItem?.focus({
@@ -1239,6 +1303,13 @@ const AppWorkspaceNavTree = props => {
       };
       const onKeyDown = event => {
         if (event.target !== event.currentTarget) return;
+        if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
+          if (!movable()) return;
+          event.preventDefault();
+          const from = siblingIndex(item.id);
+          requestMove(navTreeMove(siblings(), from, event.key === "ArrowUp" ? from - 1 : from + 2, parentId ?? null), true);
+          return;
+        }
         if (event.altKey || event.ctrlKey || event.metaKey) return;
         const items = treeItemElements();
         const index = items.indexOf(event.currentTarget);
@@ -1294,16 +1365,13 @@ const AppWorkspaceNavTree = props => {
         get children() {
           var _el$55 = _$getNextElement(_tmpl$27),
             _el$56 = _el$55.firstChild;
-          _$effect(_p$ => {
-            var _v$55 = usesIconDisclosure() ? "" : undefined,
-              _v$56 = iconClass(rowIcon());
-            _v$55 !== _p$.e && _$setAttribute(_el$55, "data-k2b-nav-tree-toggle", _p$.e = _v$55);
-            _v$56 !== _p$.t && _$className(_el$56, _p$.t = _v$56);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
+          _$spread(_el$55, _$mergeProps({
+            get ["data-k2b-nav-tree-toggle"]() {
+              return usesIconDisclosure() ? "" : undefined;
+            }
+          }, () => iconAccessibility(item.iconLabel)), false, true);
+          _$effect(() => _$className(_el$56, iconClass(rowIcon())));
+          _$runHydrationEvents();
           return _el$55;
         }
       }), (() => {
@@ -1319,10 +1387,10 @@ const AppWorkspaceNavTree = props => {
           var _el$59 = _$getNextElement(_tmpl$29);
           _$insert(_el$59, () => item.meta);
           _$effect(_p$ => {
-            var _v$57 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
-              _v$58 = item.metaVisibility === "hover" ? "hover" : undefined;
-            _v$57 !== _p$.e && _$className(_el$59, _p$.e = _v$57);
-            _v$58 !== _p$.t && _$setAttribute(_el$59, "data-visibility", _p$.t = _v$58);
+            var _v$55 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
+              _v$56 = item.metaVisibility === "hover" ? "hover" : undefined;
+            _v$55 !== _p$.e && _$className(_el$59, _p$.e = _v$55);
+            _v$56 !== _p$.t && _$setAttribute(_el$59, "data-visibility", _p$.t = _v$56);
             return _p$;
           }, {
             e: undefined,
@@ -1393,16 +1461,68 @@ const AppWorkspaceNavTree = props => {
         },
         children: rowContent
       });
+
+      // A gap is offered only next to a sibling's own row, never over its sub-items.
+      const dropMove = event => {
+        const drag = dragged();
+        const row = ownRow();
+        if (!drag || !event.dataTransfer?.types.includes(NAV_TREE_DRAG_TYPE)) return null;
+        if (drag.parentId !== (parentId ?? null) || drag.id === item.id || !row?.contains(event.target)) return null;
+        const rect = row.getBoundingClientRect();
+        const side = event.clientY < rect.top + rect.height / 2 ? "before" : "after";
+        const slot = siblingIndex(item.id) + (side === "after" ? 1 : 0);
+        const move = navTreeMove(siblings(), siblingIndex(drag.id), slot, parentId ?? null);
+        return move ? {
+          side,
+          move
+        } : null;
+      };
+      const onDragStart = event => {
+        const row = ownRow();
+        if (!movable() || !row?.contains(event.target)) return;
+        event.stopPropagation();
+        setDragged({
+          id: item.id,
+          parentId: parentId ?? null
+        });
+        if (!event.dataTransfer) return;
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData(NAV_TREE_DRAG_TYPE, item.id);
+        const rect = row.getBoundingClientRect();
+        event.dataTransfer.setDragImage(row, event.clientX - rect.left, event.clientY - rect.top);
+      };
+      const onDragOver = event => {
+        callDragHandler(item.onDragOver, event);
+        const target = dropMove(event);
+        if (!target) return;
+        event.preventDefault();
+        if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+        claimedDragOver = event;
+        setDropTarget({
+          id: item.id,
+          side: target.side
+        });
+      };
+      const onDrop = event => {
+        callDragHandler(item.onDrop, event);
+        const target = dropMove(event);
+        if (!target) return;
+        event.preventDefault();
+        event.stopPropagation();
+        endDrag();
+        requestMove(target.move, false);
+      };
       return (() => {
         var _el$62 = _$getNextElement(_tmpl$32),
           _el$64 = _el$62.firstChild,
           [_el$65, _co$0] = _$getNextMarker(_el$64.nextSibling),
           _el$66 = _el$65.nextSibling,
           [_el$67, _co$1] = _$getNextMarker(_el$66.nextSibling);
-        _$addEventListener(_el$62, "drop", item.onDrop);
+        _el$62.addEventListener("drop", onDrop);
         _$addEventListener(_el$62, "dragleave", item.onDragLeave);
-        _$addEventListener(_el$62, "dragover", item.onDragOver);
+        _el$62.addEventListener("dragover", onDragOver);
         _$addEventListener(_el$62, "dragenter", item.onDragEnter);
+        _el$62.addEventListener("dragstart", onDragStart);
         _el$62.$$keydown = onKeyDown;
         _el$62.addEventListener("focus", () => setFocusedId(item.id));
         var _ref$3 = treeItem;
@@ -1421,39 +1541,85 @@ const AppWorkspaceNavTree = props => {
           }
         }), _el$67, _co$1);
         _$effect(_p$ => {
-          var _v$59 = selected(),
+          var _v$57 = siblings().length,
+            _v$58 = place() + 1,
+            _v$59 = selected(),
             _v$60 = hasChildren() ? isExpanded(item.id) : undefined,
             _v$61 = item.disabled ? "true" : undefined,
             _v$62 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
-            _v$63 = item.id;
-          _v$59 !== _p$.e && _$setAttribute(_el$62, "aria-selected", _p$.e = _v$59);
-          _v$60 !== _p$.t && _$setAttribute(_el$62, "aria-expanded", _p$.t = _v$60);
-          _v$61 !== _p$.a && _$setAttribute(_el$62, "aria-disabled", _p$.a = _v$61);
-          _v$62 !== _p$.o && _$setAttribute(_el$62, "tabindex", _p$.o = _v$62);
-          _v$63 !== _p$.i && _$setAttribute(_el$62, "data-k2b-nav-tree-id", _p$.i = _v$63);
+            _v$63 = movable() ? true : undefined,
+            _v$64 = item.id,
+            _v$65 = dragged()?.id === item.id ? "" : undefined,
+            _v$66 = dropTarget()?.id === item.id ? dropTarget().side : undefined,
+            _v$67 = String(props.indented === false ? 0 : depth);
+          _v$57 !== _p$.e && _$setAttribute(_el$62, "aria-setsize", _p$.e = _v$57);
+          _v$58 !== _p$.t && _$setAttribute(_el$62, "aria-posinset", _p$.t = _v$58);
+          _v$59 !== _p$.a && _$setAttribute(_el$62, "aria-selected", _p$.a = _v$59);
+          _v$60 !== _p$.o && _$setAttribute(_el$62, "aria-expanded", _p$.o = _v$60);
+          _v$61 !== _p$.i && _$setAttribute(_el$62, "aria-disabled", _p$.i = _v$61);
+          _v$62 !== _p$.n && _$setAttribute(_el$62, "tabindex", _p$.n = _v$62);
+          _v$63 !== _p$.s && _$setAttribute(_el$62, "draggable", _p$.s = _v$63);
+          _v$64 !== _p$.h && _$setAttribute(_el$62, "data-k2b-nav-tree-id", _p$.h = _v$64);
+          _v$65 !== _p$.r && _$setAttribute(_el$62, "data-k2b-nav-tree-dragging", _p$.r = _v$65);
+          _v$66 !== _p$.d && _$setAttribute(_el$62, "data-k2b-nav-tree-drop", _p$.d = _v$66);
+          _v$67 !== _p$.l && _$setStyleProperty(_el$62, "--k2b-nav-tree-depth", _p$.l = _v$67);
           return _p$;
         }, {
           e: undefined,
           t: undefined,
           a: undefined,
           o: undefined,
-          i: undefined
+          i: undefined,
+          n: undefined,
+          s: undefined,
+          h: undefined,
+          r: undefined,
+          d: undefined,
+          l: undefined
         });
         _$runHydrationEvents();
         return _el$62;
       })();
     }
   });
+
+  // Any other click or focus is the person's choice; only the moved item itself keeps its claim.
+  const forgetRefocus = event => {
+    if (event.type === "pointerdown" || event.target?.dataset?.k2bNavTreeId !== refocusId) refocusId = null;
+  };
+  // A row replaced during a drag never receives its dragend; the next pointer movement means the drag is over.
+  const forgetDrag = () => {
+    if (dragged()) endDrag();
+  };
+  onMount(() => {
+    const doc = root?.ownerDocument;
+    doc?.addEventListener("pointerdown", forgetRefocus, true);
+    doc?.addEventListener("focusin", forgetRefocus, true);
+    doc?.addEventListener("pointermove", forgetDrag, true);
+    onCleanup(() => {
+      doc?.removeEventListener("pointerdown", forgetRefocus, true);
+      doc?.removeEventListener("focusin", forgetRefocus, true);
+      doc?.removeEventListener("pointermove", forgetDrag, true);
+    });
+  });
   return (() => {
     var _el$68 = _$getNextElement(_tmpl$33);
+    _el$68.addEventListener("dragend", endDrag);
+    _el$68.addEventListener("dragleave", event => {
+      if (!root?.contains(event.relatedTarget)) setDropTarget(null);
+    });
+    _el$68.addEventListener("dragover", event => {
+      // Runs after the rows: a position no row claimed shows no gap.
+      if (claimedDragOver !== event) setDropTarget(null);
+    });
     var _ref$4 = root;
     typeof _ref$4 === "function" ? _$use(_ref$4, _el$68) : root = _el$68;
     _$insert(_el$68, () => renderItems(roots, 0));
     _$effect(_p$ => {
-      var _v$64 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
-        _v$65 = props.ariaLabel;
-      _v$64 !== _p$.e && _$className(_el$68, _p$.e = _v$64);
-      _v$65 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$65);
+      var _v$68 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
+        _v$69 = props.ariaLabel;
+      _v$68 !== _p$.e && _$className(_el$68, _p$.e = _v$68);
+      _v$69 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$69);
       return _p$;
     }, {
       e: undefined,
@@ -1581,16 +1747,16 @@ const AppWorkspace = props => {
       typeof _ref$5 === "function" ? _$use(_ref$5, _el$77) : root = _el$77;
       _$insert(_el$77, () => props.children);
       _$effect(_p$ => {
-        var _v$66 = `k2b-app-workspace ${props.class ?? ""}`,
-          _v$67 = props.mobileSurface,
-          _v$68 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
-          _v$69 = props.resizable === false ? "false" : "true",
-          _v$70 = appWorkspaceLayoutStyle(initialLayoutState());
-        _v$66 !== _p$.e && _$className(_el$77, _p$.e = _v$66);
-        _v$67 !== _p$.t && _$setAttribute(_el$77, "data-mobile-surface", _p$.t = _v$67);
-        _v$68 !== _p$.a && _$setAttribute(_el$77, "data-sidebar-collapsed", _p$.a = _v$68);
-        _v$69 !== _p$.o && _$setAttribute(_el$77, "data-workspace-resizable", _p$.o = _v$69);
-        _p$.i = _$style(_el$77, _v$70, _p$.i);
+        var _v$70 = `k2b-app-workspace ${props.class ?? ""}`,
+          _v$71 = props.mobileSurface,
+          _v$72 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
+          _v$73 = props.resizable === false ? "false" : "true",
+          _v$74 = appWorkspaceLayoutStyle(initialLayoutState());
+        _v$70 !== _p$.e && _$className(_el$77, _p$.e = _v$70);
+        _v$71 !== _p$.t && _$setAttribute(_el$77, "data-mobile-surface", _p$.t = _v$71);
+        _v$72 !== _p$.a && _$setAttribute(_el$77, "data-sidebar-collapsed", _p$.a = _v$72);
+        _v$73 !== _p$.o && _$setAttribute(_el$77, "data-workspace-resizable", _p$.o = _v$73);
+        _p$.i = _$style(_el$77, _v$74, _p$.i);
         return _p$;
       }, {
         e: undefined,