@keyfunc/keybricks-ds 2.4.2 → 2.4.6

package/components/_cards/tree.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x2110" name="Tree" subtitle="Cascading checkboxes · disabled nodes · lines · async load · search · drag · keyboard" -->
+<!-- @dsCard group="Components" viewport="700x2820" name="Tree" subtitle="Cascading checkboxes · disabled nodes · lines · async load · search · drag · reorder · keyboard" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
@@ -94,6 +94,52 @@ function Draggable(){
   </div>;
 }
 
+const REORDER=[
+  {key:"recon",title:"Reconciliation",isLeaf:false,children:[
+    {key:"bank",title:"Bank statements.xlsx",hue:"green"},
+    {key:"ic",title:"Intercompany balances.xlsx",hue:"green"},
+    {key:"ar",title:"AR aging.csv",hue:"blue"},
+    {key:"ap",title:"AP aging.csv",hue:"blue"}]},
+  {key:"adj",title:"Adjustments.docx",hue:"purple"},
+  {key:"memo",title:"Close memo.docx",hue:"purple"},
+];
+function Reorderable(){
+  const [last,setLast]=React.useState(null);
+  return <div>
+    <span className="lbl">Reorder — leaf rows are insert targets too</span>
+    <Tree items={REORDER} draggable reorder defaultExpanded={["recon"]} onDrop={(i)=>setLast(i.dragKey+" → "+i.position+" "+i.dropKey)}/>
+    <div className="hint">{last ? <>Moved <code>{last}</code></> : <>With <code>reorder</code>, drag <em>Bank statements</em> below <em>AR aging</em>: a file’s top half means before, its bottom half after. The insert marker — a 2px line with a dot — sits on the gap between rows and starts at the target’s indent. Folders keep their 20% / 60% / 20% split (before / inside / after).</>}</div>
+  </div>;
+}
+
+/* Frozen drop states for reference: each tree gets a synthetic dragstart + dragover after mount, so the real component draws its own indicator. */
+const DS_ITEMS=[{key:"recon",title:"Reconciliation",isLeaf:false,children:[{key:"bank",title:"Bank statements.xlsx",hue:"green"},{key:"ic",title:"Intercompany.xlsx",hue:"green"},{key:"ar",title:"AR aging.csv",hue:"blue"}]},{key:"memo",title:"Close memo.docx",hue:"purple"}];
+function FrozenDrop({from,to,ratio,label,note}){
+  const ref=React.useRef(null);
+  React.useEffect(()=>{
+    const row=(t)=>[...ref.current.querySelectorAll("[role=treeitem]")].find(r=>r.textContent.trim().startsWith(t));
+    const fire=(el,type,y)=>{const r=el.getBoundingClientRect();const e=new Event(type,{bubbles:true,cancelable:true});Object.defineProperty(e,"dataTransfer",{value:{effectAllowed:"move",dropEffect:"move",setData(){},getData(){return "";}}});Object.defineProperty(e,"clientY",{value:r.top+r.height*y});el.dispatchEvent(e);};
+    const t1=setTimeout(()=>{fire(row(from),"dragstart",.5);},80);
+    const t2=setTimeout(()=>{fire(row(to),"dragover",ratio);},200);
+    return ()=>{clearTimeout(t1);clearTimeout(t2);};
+  },[]);
+  return <div ref={ref}>
+    <span className="lbl">{label}</span>
+    <Tree items={DS_ITEMS} draggable reorder defaultExpanded={["recon"]} defaultSelected={["ic"]}/>
+    <div className="hint">{note}</div>
+  </div>;
+}
+function DropStates(){
+  return <div style={{gridColumn:"1/-1"}}>
+    <span className="lbl" style={{color:"var(--text-heading)",fontWeight:"var(--weight-medium)"}}>Drop states — dragging <em>Close memo</em> (frozen for reference)</span>
+    <div style={{display:"grid",gridTemplateColumns:"repeat(3,minmax(0,1fr))",gap:20}}>
+      <FrozenDrop from="Close memo" to="Intercompany" ratio={.25} label="Before — top half of a file" note="2px line with a 6px dot, between Bank statements above and this row, starting at the file's indent. The selected row keeps its fill."/>
+      <FrozenDrop from="Close memo" to="Intercompany" ratio={.75} label="After — bottom half of a file" note="The same marker on the gap below. Its left end at the child indent says the item lands inside Reconciliation."/>
+      <FrozenDrop from="Close memo" to="Reconciliation" ratio={.5} label="Inside — middle 60% of a folder" note="Only “inside” fills the row: --soft-bg with a 2px outline. A folder’s outer 20% draws the before / after marker at the folder’s own indent."/>
+    </div>
+  </div>;
+}
+
 function AsyncLoad(){
   const [log,setLog]=React.useState(0);
   const load=(node)=>new Promise(res=>setTimeout(()=>{
@@ -136,13 +182,13 @@ function Sheet(){return <div className="g">
   <Basic/><Checkable/>
   <Strict/><DisabledCase/>
   <Lines/><Multi/>
-  <Draggable/><AsyncLoad/>
+  <Draggable/><Reorderable/><DropStates/><AsyncLoad/>
   <Searchable/><WithActions/>
   <div className="note">
     <strong>Keyboard.</strong> The tree is a single tab stop. <code>↑ ↓</code> move between visible rows, <code>→</code> opens a branch (or steps into it), <code>←</code> closes it (or jumps to the parent), <code>Enter</code> selects, <code>Space</code> toggles the checkbox. Focus draws the global 2px <code>--focus-ring</code>, never a new colour.
     <br/><br/><strong>Checkbox semantics.</strong> A parent is checked only when every <em>enabled</em> descendant is checked, and indeterminate when some are — so <code>disabled</code> and <code>disableCheckbox</code> rows never block a parent from completing. Use <code>checkStrictly</code> when a branch is a real selectable value rather than a roll-up of its children.
     <br/><br/><strong>Selection vs. expansion.</strong> With <code>selectable={"{false}"}</code> a row click only expands — the right default for a checkbox picker. Otherwise a click both selects and expands, matching the file-tree pattern used in the product sidebar.
-    <br/><br/><strong>Dragging moves a node into a folder.</strong> Files are not drop targets — hovering one shows nothing rather than an indicator for a move that can’t happen — and neither is a folder inside the dragged node’s own subtree. Pass <code>reorder</code> when order matters: a folder’s outer 20% then becomes a thin insert rule above or below it.
+    <br/><br/><strong>Dragging moves a node into a folder.</strong> Files are not drop targets — hovering one shows nothing rather than an indicator for a move that can’t happen — and neither is a folder inside the dragged node’s own subtree. Pass <code>reorder</code> when order matters: a folder’s outer 20% and either half of a file then draw an insert marker — a 2px line with a 6px dot on the gap between rows, starting at the target’s indent so the landing level is visible.
   </div>
 </div>;}
 ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);