@nmakarov/cli-toolkit 0.18.0 → 0.23.0

package/dist/screen.js

@@ -1,12 +1,12 @@
-// src/screen/index.ts
-import React5, { useState as useState3, useEffect as useEffect3, useRef as useRef3, useMemo, useCallback, createElement as createElement2 } from "react";
-import { Box as Box5, Text as Text5, useInput as useInput2 } from "ink";
+// src/screen/index.js
+import React2, { useState as useState3, useEffect as useEffect2, useLayoutEffect, useRef as useRef2, useMemo, useCallback, memo, createElement as createElement2 } from "react";
+import { Box as Box4, Text as Text5, useInput as useInput2 } from "ink";
 
-// src/screen/screens.ts
+// src/screen/screens.js
 import { useState as useState2, createElement as h3 } from "react";
 import { render, useInput, Text as Text3 } from "ink";
 
-// src/screen/components.ts
+// src/screen/components.js
 import { createElement as h } from "react";
 import { Box, Text } from "ink";
 function getScreenWidth(maxWidth = null) {
@@ -81,8 +81,8 @@ function ScreenFooter({ lines, textStyle }) {
   );
 }
 
-// src/screen/list-components.ts
-import React2, { useState, useEffect, useRef, createElement } from "react";
+// src/screen/list-components.js
+import React, { useState, useEffect, useRef, createElement } from "react";
 import { Box as Box2, Text as Text2 } from "ink";
 var h2 = createElement;
 function MultiColumnListComponent({ items, ctx, selectedIndexRef }) {
@@ -219,11 +219,11 @@ function MultiColumnListWithPreviewComponent({
   const previewRows = [];
   if (typeof previewContent === "string") {
     previewRows.push(h2(ScreenRow, { key: "preview-string", children: h2(Text2, { bold: true }, previewContent) }));
-  } else if (typeof previewContent === "object" && !React2.isValidElement(previewContent) && previewContent !== null) {
+  } else if (typeof previewContent === "object" && !React.isValidElement(previewContent) && previewContent !== null) {
     Object.entries(previewContent).forEach(([key, value], idx) => {
       previewRows.push(h2(ScreenRow, { key: `preview-${key}-${idx}`, children: h2(Text2, {}, `${key}: ${value}`) }));
     });
-  } else if (React2.isValidElement(previewContent)) {
+  } else if (React.isValidElement(previewContent)) {
     previewRows.push(h2(ScreenRow, { key: "preview-element", children: previewContent }));
   }
   return h2(
@@ -236,11 +236,13 @@ function MultiColumnListWithPreviewComponent({
     ...previewRows
   );
 }
-function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sortable = false, maxHeight, sortHighlightStyle, selectionMarker = " " }) {
+function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sortable = false, maxHeight, sortHighlightStyle, selectionMarker = " ", onSelectionChange }) {
   const [, forceUpdate] = useState({});
   const [sortOrder, setSortOrder] = useState("none");
   const [scrollOffset, setScrollOffset] = useState(0);
   const scrollStateRef = useRef({ scrollOffset: 0, maxHeight: 0, totalItems: 0 });
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
   const defaultGetTitle = (item) => {
     return getTitle ? getTitle(item) : typeof item.value === "string" ? item.value : item.value?.title || item.name;
   };
@@ -254,18 +256,24 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
       return titleA > titleB ? -1 : titleA < titleB ? 1 : 0;
     }
   }) : items;
+  const displayItemsRef = useRef(displayItems);
+  displayItemsRef.current = displayItems;
   const effectiveMaxHeight = maxHeight || displayItems.length;
-  const canScroll = displayItems.length > effectiveMaxHeight;
+  const _canScroll = displayItems.length > effectiveMaxHeight;
   const maxScrollOffset = Math.max(0, displayItems.length - effectiveMaxHeight);
   const clampedScrollOffset = Math.min(Math.max(0, scrollOffset), maxScrollOffset);
   const visibleItems = displayItems.slice(clampedScrollOffset, clampedScrollOffset + effectiveMaxHeight);
   const canScrollUp = clampedScrollOffset > 0;
   const canScrollDown = clampedScrollOffset < maxScrollOffset;
   scrollStateRef.current = { scrollOffset, maxHeight: effectiveMaxHeight, totalItems: displayItems.length };
+  const onSelectionChangeRef = useRef(onSelectionChange);
+  onSelectionChangeRef.current = onSelectionChange;
   useEffect(() => {
     ctx.setAction("moveUp", () => {
       const newIndex = Math.max(0, selectedIndexRef.current - 1);
       selectedIndexRef.current = newIndex;
+      const list = displayItemsRef.current;
+      onSelectionChangeRef.current?.(newIndex, list[newIndex]);
       const { scrollOffset: currentScrollOffset, maxHeight: currentMaxHeight, totalItems } = scrollStateRef.current;
       const currentMaxScrollOffset = Math.max(0, totalItems - currentMaxHeight);
       const currentClampedScrollOffset = Math.min(Math.max(0, currentScrollOffset), currentMaxScrollOffset);
@@ -275,18 +283,11 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
       forceUpdate({});
     });
     ctx.setAction("moveDown", () => {
-      const currentItems = sortable && sortOrder !== "none" ? [...items].sort((a, b) => {
-        const titleA = titleGetter(a).toLowerCase();
-        const titleB = titleGetter(b).toLowerCase();
-        if (sortOrder === "asc") {
-          return titleA < titleB ? -1 : titleA > titleB ? 1 : 0;
-        } else {
-          return titleA > titleB ? -1 : titleA < titleB ? 1 : 0;
-        }
-      }) : items;
-      const maxIndex = currentItems.length - 1;
+      const currentItems = displayItemsRef.current;
+      const maxIndex = Math.max(0, currentItems.length - 1);
       const newIndex = Math.min(maxIndex, selectedIndexRef.current + 1);
       selectedIndexRef.current = newIndex;
+      onSelectionChangeRef.current?.(newIndex, currentItems[newIndex]);
       const { scrollOffset: currentScrollOffset, maxHeight: currentMaxHeight, totalItems } = scrollStateRef.current;
       const currentMaxScrollOffset = Math.max(0, totalItems - currentMaxHeight);
       const currentClampedScrollOffset = Math.min(Math.max(0, currentScrollOffset), currentMaxScrollOffset);
@@ -296,8 +297,7 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
       forceUpdate({});
     });
     ctx.setAction("scrollUp", () => {
-      const { scrollOffset: currentScrollOffset, maxHeight: currentMaxHeight, totalItems } = scrollStateRef.current;
-      const currentMaxScrollOffset = Math.max(0, totalItems - currentMaxHeight);
+      const { scrollOffset: currentScrollOffset } = scrollStateRef.current;
       const newScrollOffset = Math.max(0, currentScrollOffset - 1);
       setScrollOffset(newScrollOffset);
       forceUpdate({});
@@ -312,9 +312,9 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
     if (sortable) {
       ctx.setAction("toggleSort", () => {
         const nextSort = sortOrder === "none" ? "asc" : sortOrder === "asc" ? "desc" : "none";
-        const currentSelectedItem = displayItems[selectedIndexRef.current];
+        const currentSelectedItem = displayItemsRef.current[selectedIndexRef.current];
         setSortOrder(nextSort);
-        const newSortedItems = nextSort !== "none" ? [...items].sort((a, b) => {
+        const newSortedItems = nextSort !== "none" ? [...itemsRef.current].sort((a, b) => {
           const titleA = titleGetter(a).toLowerCase();
           const titleB = titleGetter(b).toLowerCase();
           if (nextSort === "asc") {
@@ -322,7 +322,7 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
           } else {
             return titleA > titleB ? -1 : titleA < titleB ? 1 : 0;
           }
-        }) : items;
+        }) : itemsRef.current;
         const newIndex = newSortedItems.findIndex((item) => item === currentSelectedItem);
         if (newIndex !== -1) {
           selectedIndexRef.current = newIndex;
@@ -459,7 +459,7 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
   );
 }
 
-// src/screen/screens.ts
+// src/screen/screens.js
 function groupKeyBindings(bindings) {
   const groups = {};
   const enabledBindings = bindings.filter((b) => b.enabled !== false);
@@ -535,7 +535,7 @@ async function showScreen(config) {
     let renderResult = null;
     let initialized = false;
     const Screen = () => {
-      const [updateCounter, setUpdateCounter] = useState2(0);
+      const [, setUpdateCounter] = useState2(0);
       if (!initialized) {
         const defaultBindings = [
           { key: "escape", caption: "go back", action: "back", protected: true, order: 1 },
@@ -654,7 +654,7 @@ async function showScreen(config) {
           }
         }
         if (matchedBinding && actions[matchedBinding.action]) {
-          const actionResult = actions[matchedBinding.action]({
+          actions[matchedBinding.action]({
             input,
             key,
             binding: matchedBinding
@@ -785,9 +785,9 @@ async function showMultiColumnListWithPreviewScreen(config) {
 var showMenuScreen = showListScreen;
 var showWordGridScreen = showMultiColumnListScreen;
 
-// src/screen/ui-elements.ts
+// src/screen/ui-elements.js
 import { createElement as h4 } from "react";
-import { Box as Box4, Text as Text4 } from "ink";
+import { Box as Box3, Text as Text4 } from "ink";
 function ListItem({
   children,
   isSelected = false,
@@ -797,7 +797,7 @@ function ListItem({
   dimColor = false
 }) {
   return h4(
-    Box4,
+    Box3,
     {},
     h4(Text4, {
       color: isSelected ? backgroundColor || "green" : color,
@@ -812,10 +812,10 @@ function TextBlock({
   color = "white",
   dimmed = false,
   bold = false,
-  maxWidth
+  maxWidth: _maxWidth
 }) {
   return h4(
-    Box4,
+    Box3,
     {},
     h4(Text4, {
       color,
@@ -826,7 +826,7 @@ function TextBlock({
 }
 function Divider({ character = "\u2500", width = 80 }) {
   return h4(
-    Box4,
+    Box3,
     { marginY: 1 },
     h4(Text4, { dimColor: true }, character.repeat(width))
   );
@@ -841,7 +841,7 @@ function GridCell({
   align = "left"
 }) {
   return h4(
-    Box4,
+    Box3,
     { width },
     h4(Text4, {
       color,
@@ -852,20 +852,20 @@ function GridCell({
     }, children)
   );
 }
-function InputField({ prompt, value, onChange, onSubmit }) {
+function InputField({ prompt, value, onChange: _onChange, onSubmit: _onSubmit }) {
   return h4(
-    Box4,
+    Box3,
     { flexDirection: "column" },
     h4(Text4, {}, prompt),
     h4(
-      Box4,
+      Box3,
       { marginTop: 1 },
       h4(Text4, { color: "cyan" }, " > ", value, "_")
     )
   );
 }
 
-// src/screen/utils.ts
+// src/screen/utils.js
 function buildBreadcrumb(parts) {
   if (parts.length === 0) return "";
   if (parts.length === 1) return parts[0];
@@ -879,7 +879,7 @@ function buildDetailBreadcrumb(path, suffix = "") {
   return suffix ? `${breadcrumb} ${suffix}` : breadcrumb;
 }
 
-// src/screen/footer-builder.ts
+// src/screen/footer-builder.js
 function buildFooter(config = {}) {
   const {
     navigation = null,
@@ -984,7 +984,7 @@ function organizeFooterMessages(messages) {
   return lines;
 }
 
-// src/screen/index.ts
+// src/screen/index.js
 var loadPromise = null;
 async function load() {
   if (loadPromise) return loadPromise;
@@ -1000,7 +1000,7 @@ if (typeof window === "undefined") {
   });
 }
 export {
-  Box5 as Box,
+  Box4 as Box,
   Divider,
   FooterPresets,
   GridCell,
@@ -1009,7 +1009,7 @@ export {
   ListItem,
   MultiColumnListComponent,
   MultiColumnListWithPreviewComponent,
-  React5 as React,
+  React2 as React,
   ScreenBody,
   ScreenContainer,
   ScreenDivider,
@@ -1023,6 +1023,7 @@ export {
   buildFooter,
   createElement2 as h,
   load,
+  memo,
   organizeFooterMessages,
   showListScreen,
   showMenuScreen,
@@ -1031,10 +1032,11 @@ export {
   showScreen,
   showWordGridScreen,
   useCallback,
-  useEffect3 as useEffect,
+  useEffect2 as useEffect,
   useInput2 as useInput,
+  useLayoutEffect,
   useMemo,
-  useRef3 as useRef,
+  useRef2 as useRef,
   useState3 as useState
 };
 //# sourceMappingURL=screen.js.map