@jakubmazanec/cli 0.1.0-5f6d70c → 0.1.0-7dbb232

package/dist/ui/form/SelectInput.d.ts

@@ -9,7 +9,7 @@ type SelectInputProps = BoxProps & {
     label: string;
     /** Items to display in a list. */
     items: SelectInputItem[];
-    /** Should component listen to Listen to user's input? Useful in case there are multiple input components at the same time and input must be "routed" to a specific component. */
+    /** Should component listen to user's input? Useful in case there are multiple input components at the same time and input must be handled only by a specific component. */
     focus?: boolean | undefined;
     /** Index of initially selected item. */
     initialIndex?: number | undefined;
@@ -25,5 +25,5 @@ type SelectInputProps = BoxProps & {
 /**
  * Select input component.
  */
-export declare function SelectInput({ label, items, focus, initialIndex, limit: customLimit, onSelect, onHighlight, isComplete, ...boxProps }: SelectInputProps): JSX.Element;
+export declare function SelectInput({ label, items, focus, initialIndex, limit: userDefinedLimit, onSelect, onHighlight, isComplete, ...boxProps }: SelectInputProps): JSX.Element;
 export {};

package/dist/ui/form/SelectInput.js

@@ -1,38 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text, useInput } from 'ink';
 import _ from 'lodash';
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import * as colors from '../colors.js';
 import * as icons from '../icons.js';
 import { rotate } from '../internals.js';
 /**
  * Select input component.
- */ export function SelectInput({ label, items = [], focus = true, initialIndex = 0, limit: customLimit, onSelect, onHighlight, isComplete, ...boxProps }) {
+ */ export function SelectInput({ label, items = [], focus = true, initialIndex = 0, limit: userDefinedLimit, onSelect, onHighlight, isComplete, ...boxProps }) {
     var _items_selectedIndex, _items_selectedIndex1;
-    let [rotateIndex, setRotateIndex] = useState(0);
+    let [rotatedIndex, setRotatedIndex] = useState(0);
     let [selectedIndex, setSelectedIndex] = useState(initialIndex);
-    let hasLimit = typeof customLimit === 'number' && items.length > customLimit;
-    let limit = hasLimit ? Math.min(customLimit, items.length) : items.length;
+    let hasLimit = typeof userDefinedLimit === 'number' && items.length > userDefinedLimit;
+    let limit = hasLimit ? Math.min(userDefinedLimit, items.length) : items.length;
     let previousItems = useRef(items);
     useEffect(()=>{
         if (!_.isEqual(previousItems.current.map((item)=>item.value), items.map((item)=>item.value))) {
-            setRotateIndex(0);
+            setRotatedIndex(0);
             setSelectedIndex(0);
         }
         previousItems.current = items;
     }, [
         items
     ]);
-    let inputHandler = useCallback((input, key)=>{
+    useInput((input, key)=>{
         if (input === 'k' || key.upArrow) {
             let lastIndex = (hasLimit ? limit : items.length) - 1;
-            let atFirstIndex = selectedIndex === 0;
+            let isAtFirstIndex = selectedIndex === 0;
             let nextIndex = hasLimit ? selectedIndex : lastIndex;
-            let nextRotateIndex = atFirstIndex ? rotateIndex + 1 : rotateIndex;
-            let nextSelectedIndex = atFirstIndex ? nextIndex : selectedIndex - 1;
-            setRotateIndex(nextRotateIndex);
+            let nextRotatedIndex = isAtFirstIndex ? rotatedIndex + 1 : rotatedIndex;
+            let nextSelectedIndex = isAtFirstIndex ? nextIndex : selectedIndex - 1;
+            setRotatedIndex(nextRotatedIndex);
             setSelectedIndex(nextSelectedIndex);
-            let slicedItems = hasLimit ? rotate(items, nextRotateIndex).slice(0, limit) : items;
+            let slicedItems = hasLimit ? rotate(items, nextRotatedIndex).slice(0, limit) : items;
             if (typeof onHighlight === 'function') {
                 onHighlight(slicedItems[nextSelectedIndex]);
             }
@@ -40,34 +40,25 @@ import { rotate } from '../internals.js';
         if (input === 'j' || key.downArrow) {
             let isAtLastIndex = selectedIndex === (hasLimit ? limit : items.length) - 1;
             let nextIndex = hasLimit ? selectedIndex : 0;
-            let nextRotateIndex = isAtLastIndex ? rotateIndex - 1 : rotateIndex;
+            let nextRotatedIndex = isAtLastIndex ? rotatedIndex - 1 : rotatedIndex;
             let nextSelectedIndex = isAtLastIndex ? nextIndex : selectedIndex + 1;
-            setRotateIndex(nextRotateIndex);
+            setRotatedIndex(nextRotatedIndex);
             setSelectedIndex(nextSelectedIndex);
-            let slicedItems = hasLimit ? rotate(items, nextRotateIndex).slice(0, limit) : items;
+            let slicedItems = hasLimit ? rotate(items, nextRotatedIndex).slice(0, limit) : items;
             if (typeof onHighlight === 'function') {
                 onHighlight(slicedItems[nextSelectedIndex]);
             }
         }
         if (key.return) {
-            let slicedItems = hasLimit ? rotate(items, rotateIndex).slice(0, limit) : items;
+            let slicedItems = hasLimit ? rotate(items, rotatedIndex).slice(0, limit) : items;
             if (typeof onSelect === 'function') {
                 onSelect(slicedItems[selectedIndex]);
             }
         }
-    }, [
-        hasLimit,
-        limit,
-        rotateIndex,
-        selectedIndex,
-        items,
-        onSelect,
-        onHighlight
-    ]);
-    useInput(inputHandler, {
+    }, {
         isActive: focus
     });
-    let visibleItem = hasLimit ? rotate(items, rotateIndex).slice(0, limit) : items;
+    let visibleItems = hasLimit ? rotate(items, rotatedIndex).slice(0, limit) : items;
     return /*#__PURE__*/ _jsxs(Box, {
         ...boxProps,
         children: [
@@ -92,7 +83,7 @@ import { rotate } from '../internals.js';
                         children: ((_items_selectedIndex = items[selectedIndex]) === null || _items_selectedIndex === void 0 ? void 0 : _items_selectedIndex.label) ?? String((_items_selectedIndex1 = items[selectedIndex]) === null || _items_selectedIndex1 === void 0 ? void 0 : _items_selectedIndex1.value)
                     }) : /*#__PURE__*/ _jsx(Box, {
                         flexDirection: "column",
-                        children: visibleItem.map((item, index)=>{
+                        children: visibleItems.map((item, index)=>{
                             let isSelected = index === selectedIndex;
                             return /*#__PURE__*/ _jsxs(Box, {
                                 children: [

package/dist/ui/form/SelectInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/form/SelectInput.tsx"],"sourcesContent":["import {Box, type BoxProps, Text, useInput, type Key} from 'ink';\nimport _ from 'lodash';\nimport {useState, useEffect, useRef, useCallback} from 'react';\n\nimport {type SelectInputItem} from './SelectInputItem.js';\nimport * as colors from '../colors.js';\nimport * as icons from '../icons.js';\nimport {rotate} from '../internals.js';\n\n/**\n * Select input component props.\n */\ntype SelectInputProps = BoxProps & {\n  /** Text to display as a label. */\n  label: string;\n\n  /** Items to display in a list. */\n  items: SelectInputItem[];\n\n  /** Should component listen to Listen to user's input? Useful in case there are multiple input components at the same time and input must be \"routed\" to a specific component. */\n  focus?: boolean | undefined;\n\n  /** Index of initially selected item. */\n  initialIndex?: number | undefined;\n\n  /** Number of items to display. */\n  limit?: number | undefined;\n\n  /** Handler function that is called when item is selected. */\n  onSelect?: ((item: SelectInputItem) => void) | undefined;\n\n  /** Handler function that is called when item is highlighted. */\n  onHighlight?: ((item: SelectInputItem) => void) | undefined;\n\n  /** Indicates whether value has been accepted. Component then doesn't accept more input. */\n  isComplete?: boolean | undefined;\n};\n\n/**\n * Select input component.\n */\nexport function SelectInput({\n  label,\n  items = [],\n  focus = true,\n  initialIndex = 0,\n  limit: customLimit,\n  onSelect,\n  onHighlight,\n  isComplete,\n  ...boxProps\n}: SelectInputProps): JSX.Element {\n  let [rotateIndex, setRotateIndex] = useState(0);\n  let [selectedIndex, setSelectedIndex] = useState(initialIndex);\n  let hasLimit = typeof customLimit === 'number' && items.length > customLimit;\n  let limit = hasLimit ? Math.min(customLimit as number, items.length) : items.length;\n  let previousItems = useRef<SelectInputItem[]>(items);\n\n  useEffect(() => {\n    if (\n      !_.isEqual(\n        previousItems.current.map((item) => item.value),\n        items.map((item) => item.value),\n      )\n    ) {\n      setRotateIndex(0);\n      setSelectedIndex(0);\n    }\n\n    previousItems.current = items;\n  }, [items]);\n\n  let inputHandler = useCallback(\n    (input: string, key: Key) => {\n      if (input === 'k' || key.upArrow) {\n        let lastIndex = (hasLimit ? limit : items.length) - 1;\n        let atFirstIndex = selectedIndex === 0;\n        let nextIndex = hasLimit ? selectedIndex : lastIndex;\n        let nextRotateIndex = atFirstIndex ? rotateIndex + 1 : rotateIndex;\n        let nextSelectedIndex = atFirstIndex ? nextIndex : selectedIndex - 1;\n\n        setRotateIndex(nextRotateIndex);\n        setSelectedIndex(nextSelectedIndex);\n\n        let slicedItems = hasLimit ? rotate(items, nextRotateIndex).slice(0, limit) : items;\n\n        if (typeof onHighlight === 'function') {\n          onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);\n        }\n      }\n\n      if (input === 'j' || key.downArrow) {\n        let isAtLastIndex = selectedIndex === (hasLimit ? limit : items.length) - 1;\n        let nextIndex = hasLimit ? selectedIndex : 0;\n        let nextRotateIndex = isAtLastIndex ? rotateIndex - 1 : rotateIndex;\n        let nextSelectedIndex = isAtLastIndex ? nextIndex : selectedIndex + 1;\n\n        setRotateIndex(nextRotateIndex);\n        setSelectedIndex(nextSelectedIndex);\n\n        let slicedItems = hasLimit ? rotate(items, nextRotateIndex).slice(0, limit) : items;\n\n        if (typeof onHighlight === 'function') {\n          onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);\n        }\n      }\n\n      if (key.return) {\n        let slicedItems = hasLimit ? rotate(items, rotateIndex).slice(0, limit) : items;\n\n        if (typeof onSelect === 'function') {\n          onSelect(slicedItems[selectedIndex] as SelectInputItem);\n        }\n      }\n    },\n    [hasLimit, limit, rotateIndex, selectedIndex, items, onSelect, onHighlight],\n  );\n\n  useInput(inputHandler, {isActive: focus});\n\n  let visibleItem: SelectInputItem[] = hasLimit\n    ? rotate(items, rotateIndex).slice(0, limit)\n    : items;\n\n  return (\n    <Box {...boxProps}>\n      <Box marginRight={1}>\n        <Text>{isComplete ? icons.success : icons.question}</Text>\n      </Box>\n\n      <Box flexDirection=\"column\">\n        <Box marginRight={1}>\n          <Text color={colors.highlighted}>{label}</Text>\n        </Box>\n        {isComplete ? (\n          <Text color={colors.body}>\n            {items[selectedIndex]?.label ?? String(items[selectedIndex]?.value)}\n          </Text>\n        ) : (\n          <Box flexDirection=\"column\">\n            {visibleItem.map((item, index) => {\n              let isSelected = index === selectedIndex;\n\n              return (\n                <Box key={item.value}>\n                  <Box marginRight={1}>\n                    {isSelected ? (\n                      <Text color={colors.selected}>{icons.selectedCircle}</Text>\n                    ) : (\n                      <Text color={colors.unselected}>{icons.unselectedCircle}</Text>\n                    )}\n                  </Box>\n                  <Text color={isSelected ? colors.highlighted : colors.muted}>{item.label}</Text>\n                </Box>\n              );\n            })}\n          </Box>\n        )}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","Text","useInput","_","useState","useEffect","useRef","useCallback","colors","icons","rotate","SelectInput","label","items","focus","initialIndex","limit","customLimit","onSelect","onHighlight","isComplete","boxProps","rotateIndex","setRotateIndex","selectedIndex","setSelectedIndex","hasLimit","length","Math","min","previousItems","isEqual","current","map","item","value","inputHandler","input","key","upArrow","lastIndex","atFirstIndex","nextIndex","nextRotateIndex","nextSelectedIndex","slicedItems","slice","downArrow","isAtLastIndex","return","isActive","visibleItem","marginRight","success","question","flexDirection","color","highlighted","body","String","index","isSelected","selected","selectedCircle","unselected","unselectedCircle","muted"],"mappings":"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"}
+{"version":3,"sources":["../../../src/ui/form/SelectInput.tsx"],"sourcesContent":["import {Box, type BoxProps, Text, useInput, type Key} from 'ink';\nimport _ from 'lodash';\nimport {useState, useEffect, useRef} from 'react';\n\nimport {type SelectInputItem} from './SelectInputItem.js';\nimport * as colors from '../colors.js';\nimport * as icons from '../icons.js';\nimport {rotate} from '../internals.js';\n\n/**\n * Select input component props.\n */\ntype SelectInputProps = BoxProps & {\n  /** Text to display as a label. */\n  label: string;\n\n  /** Items to display in a list. */\n  items: SelectInputItem[];\n\n  /** Should component listen to user's input? Useful in case there are multiple input components at the same time and input must be handled only by a specific component. */\n  focus?: boolean | undefined;\n\n  /** Index of initially selected item. */\n  initialIndex?: number | undefined;\n\n  /** Number of items to display. */\n  limit?: number | undefined;\n\n  /** Handler function that is called when item is selected. */\n  onSelect?: ((item: SelectInputItem) => void) | undefined;\n\n  /** Handler function that is called when item is highlighted. */\n  onHighlight?: ((item: SelectInputItem) => void) | undefined;\n\n  /** Indicates whether value has been accepted. Component then doesn't accept more input. */\n  isComplete?: boolean | undefined;\n};\n\n/**\n * Select input component.\n */\nexport function SelectInput({\n  label,\n  items = [],\n  focus = true,\n  initialIndex = 0,\n  limit: userDefinedLimit,\n  onSelect,\n  onHighlight,\n  isComplete,\n  ...boxProps\n}: SelectInputProps): JSX.Element {\n  let [rotatedIndex, setRotatedIndex] = useState(0);\n  let [selectedIndex, setSelectedIndex] = useState(initialIndex);\n  let hasLimit = typeof userDefinedLimit === 'number' && items.length > userDefinedLimit;\n  let limit = hasLimit ? Math.min(userDefinedLimit as number, items.length) : items.length;\n  let previousItems = useRef<SelectInputItem[]>(items);\n\n  useEffect(() => {\n    if (\n      !_.isEqual(\n        previousItems.current.map((item) => item.value),\n        items.map((item) => item.value),\n      )\n    ) {\n      setRotatedIndex(0);\n      setSelectedIndex(0);\n    }\n\n    previousItems.current = items;\n  }, [items]);\n\n  useInput(\n    (input: string, key: Key) => {\n      if (input === 'k' || key.upArrow) {\n        let lastIndex = (hasLimit ? limit : items.length) - 1;\n        let isAtFirstIndex = selectedIndex === 0;\n        let nextIndex = hasLimit ? selectedIndex : lastIndex;\n        let nextRotatedIndex = isAtFirstIndex ? rotatedIndex + 1 : rotatedIndex;\n        let nextSelectedIndex = isAtFirstIndex ? nextIndex : selectedIndex - 1;\n\n        setRotatedIndex(nextRotatedIndex);\n        setSelectedIndex(nextSelectedIndex);\n\n        let slicedItems = hasLimit ? rotate(items, nextRotatedIndex).slice(0, limit) : items;\n\n        if (typeof onHighlight === 'function') {\n          onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);\n        }\n      }\n\n      if (input === 'j' || key.downArrow) {\n        let isAtLastIndex = selectedIndex === (hasLimit ? limit : items.length) - 1;\n        let nextIndex = hasLimit ? selectedIndex : 0;\n        let nextRotatedIndex = isAtLastIndex ? rotatedIndex - 1 : rotatedIndex;\n        let nextSelectedIndex = isAtLastIndex ? nextIndex : selectedIndex + 1;\n\n        setRotatedIndex(nextRotatedIndex);\n        setSelectedIndex(nextSelectedIndex);\n\n        let slicedItems = hasLimit ? rotate(items, nextRotatedIndex).slice(0, limit) : items;\n\n        if (typeof onHighlight === 'function') {\n          onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);\n        }\n      }\n\n      if (key.return) {\n        let slicedItems = hasLimit ? rotate(items, rotatedIndex).slice(0, limit) : items;\n\n        if (typeof onSelect === 'function') {\n          onSelect(slicedItems[selectedIndex] as SelectInputItem);\n        }\n      }\n    },\n    {isActive: focus},\n  );\n\n  let visibleItems: SelectInputItem[] = hasLimit\n    ? rotate(items, rotatedIndex).slice(0, limit)\n    : items;\n\n  return (\n    <Box {...boxProps}>\n      <Box marginRight={1}>\n        <Text>{isComplete ? icons.success : icons.question}</Text>\n      </Box>\n\n      <Box flexDirection=\"column\">\n        <Box marginRight={1}>\n          <Text color={colors.highlighted}>{label}</Text>\n        </Box>\n        {isComplete ? (\n          <Text color={colors.body}>\n            {items[selectedIndex]?.label ?? String(items[selectedIndex]?.value)}\n          </Text>\n        ) : (\n          <Box flexDirection=\"column\">\n            {visibleItems.map((item, index) => {\n              let isSelected = index === selectedIndex;\n\n              return (\n                <Box key={item.value}>\n                  <Box marginRight={1}>\n                    {isSelected ? (\n                      <Text color={colors.selected}>{icons.selectedCircle}</Text>\n                    ) : (\n                      <Text color={colors.unselected}>{icons.unselectedCircle}</Text>\n                    )}\n                  </Box>\n                  <Text color={isSelected ? colors.highlighted : colors.muted}>{item.label}</Text>\n                </Box>\n              );\n            })}\n          </Box>\n        )}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","Text","useInput","_","useState","useEffect","useRef","colors","icons","rotate","SelectInput","label","items","focus","initialIndex","limit","userDefinedLimit","onSelect","onHighlight","isComplete","boxProps","rotatedIndex","setRotatedIndex","selectedIndex","setSelectedIndex","hasLimit","length","Math","min","previousItems","isEqual","current","map","item","value","input","key","upArrow","lastIndex","isAtFirstIndex","nextIndex","nextRotatedIndex","nextSelectedIndex","slicedItems","slice","downArrow","isAtLastIndex","return","isActive","visibleItems","marginRight","success","question","flexDirection","color","highlighted","body","String","index","isSelected","selected","selectedCircle","unselected","unselectedCircle","muted"],"mappings":"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"}

package/dist/ui/form/TextInput.d.ts

@@ -9,7 +9,7 @@ export type TextInputProps = BoxProps & {
     placeholder?: string | undefined;
     /** Value. */
     value: string;
-    /** Should component listen to Listen to user's input? Useful in case there are multiple input components at the same time and input must be "routed" to a specific component. */
+    /** Should component listen to Listen to user's input? Useful in case there are multiple input components at the same time and input must be handled only by a specific component. */
     focus?: boolean | undefined;
     /** Replace all chars and mask the value. Useful for password inputs. */
     mask?: string | undefined;

package/dist/ui/form/TextInput.js

@@ -35,18 +35,15 @@ import * as icons from '../icons.js';
     let value = mask ? mask.repeat(originalValue.length) : originalValue;
     let renderedValue = value;
     let renderedPlaceholder = placeholder ? chalk[colors.muted](placeholder) : undefined;
-    // fake mouse cursor; dealing with with actual cursor and ANSI escape codes is inconvinient
     if (showCursor && focus) {
         renderedPlaceholder = placeholder.length > 0 ? chalk.inverse(placeholder[0]) + chalk[colors.muted](placeholder.slice(1)) : chalk.inverse(' ');
         renderedValue = value.length > 0 ? '' : chalk.inverse(' ');
-        let i = 0;
-        for (let char of value){
-            if (i >= state.cursorOffset && i <= state.cursorOffset) {
-                renderedValue += chalk.inverse(char);
+        for (let [i, character] of Object.entries(value)){
+            if (Number(i) >= state.cursorOffset && Number(i) <= state.cursorOffset) {
+                renderedValue += chalk.inverse(character);
             } else {
-                renderedValue += char;
+                renderedValue += character;
             }
-            i += 1;
         }
         if (value.length > 0 && state.cursorOffset === value.length) {
             renderedValue += chalk.inverse(' ');

package/dist/ui/form/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/form/TextInput.tsx"],"sourcesContent":["// TODO: resolve\n/* eslint-disable complexity -- TODO */\nimport chalk from 'chalk';\nimport {Box, type BoxProps, Text, useInput} from 'ink';\nimport {useEffect, useState} from 'react';\n\nimport * as colors from '../colors.js';\nimport * as icons from '../icons.js';\n\n/**\n * Text input component props.\n */\nexport type TextInputProps = BoxProps & {\n  /** Text to display as a label. */\n  label: string;\n\n  /** Text to display when `value` is empty. */\n  placeholder?: string | undefined;\n\n  /** Value. */\n  value: string;\n\n  /** Should component listen to Listen to user's input? Useful in case there are multiple input components at the same time and input must be \"routed\" to a specific component. */\n  focus?: boolean | undefined;\n\n  /** Replace all chars and mask the value. Useful for password inputs. */\n  mask?: string | undefined;\n\n  /** Show cursor and allow navigation using arrow keys. */\n  showCursor?: boolean | undefined;\n\n  /** Validation function that is called when value changes. If this function throws an error*/\n  validate?: ((value: string) => void) | undefined;\n\n  /** Handler function that is called when value changes. */\n  onChange: (value: string) => void;\n\n  /** Handler function that is called when enter is pressed. */\n  onSubmit?: ((value: string) => void) | undefined;\n\n  /** Indicates whether value has been accepted. Component then doesn't accept more input. */\n  isComplete?: boolean | undefined;\n};\n\n/**\n * Text input component.\n */\nexport function TextInput({\n  label,\n  validate,\n  isComplete,\n  value: originalValue,\n  placeholder = '',\n  focus = true,\n  mask,\n  showCursor = true,\n  onChange,\n  onSubmit,\n  ...boxProps\n}: TextInputProps) {\n  let [validationError, setValidationError] = useState('');\n  let [state, setState] = useState({\n    cursorOffset: (originalValue || '').length,\n    cursorWidth: 0,\n  });\n\n  useEffect(() => {\n    setState((previousState) => {\n      if (!focus || !showCursor) {\n        return previousState;\n      }\n\n      let newValue = originalValue || '';\n\n      if (previousState.cursorOffset > newValue.length - 1) {\n        return {\n          cursorOffset: newValue.length,\n          cursorWidth: 0,\n        };\n      }\n\n      return previousState;\n    });\n  }, [originalValue, focus, showCursor]);\n\n  let value = mask ? mask.repeat(originalValue.length) : originalValue;\n  let renderedValue = value;\n  let renderedPlaceholder = placeholder ? chalk[colors.muted](placeholder) : undefined;\n\n  // fake mouse cursor; dealing with with actual cursor and ANSI escape codes is inconvinient\n  if (showCursor && focus) {\n    renderedPlaceholder =\n      placeholder.length > 0\n        ? chalk.inverse(placeholder[0]) + chalk[colors.muted](placeholder.slice(1))\n        : chalk.inverse(' ');\n\n    renderedValue = value.length > 0 ? '' : chalk.inverse(' ');\n\n    let i = 0;\n\n    for (let char of value) {\n      if (i >= state.cursorOffset && i <= state.cursorOffset) {\n        renderedValue += chalk.inverse(char);\n      } else {\n        renderedValue += char;\n      }\n\n      i += 1;\n    }\n\n    if (value.length > 0 && state.cursorOffset === value.length) {\n      renderedValue += chalk.inverse(' ');\n    }\n  }\n\n  useInput(\n    (input, key) => {\n      if (\n        key.upArrow ||\n        key.downArrow ||\n        (key.ctrl && input === 'c') ||\n        (key.shift && key.tab) ||\n        key.tab\n      ) {\n        return;\n      }\n\n      if (key.return) {\n        if (onSubmit) {\n          if (validate) {\n            try {\n              validate(originalValue);\n            } catch (error: unknown) {\n              setValidationError((error as Error).message);\n\n              return;\n            }\n          }\n\n          if (validationError) {\n            setValidationError('');\n          } else {\n            onSubmit(originalValue);\n          }\n        }\n\n        return;\n      }\n\n      let nextCursorOffset = state.cursorOffset;\n      let nextValue = originalValue;\n      let nextCursorWidth = 0;\n\n      if (key.leftArrow) {\n        if (showCursor) {\n          nextCursorOffset -= 1;\n        }\n      } else if (key.rightArrow) {\n        if (showCursor) {\n          nextCursorOffset += 1;\n        }\n      } else if (key.backspace || key.delete) {\n        if (state.cursorOffset > 0) {\n          nextValue =\n            originalValue.slice(0, state.cursorOffset - 1) +\n            originalValue.slice(state.cursorOffset, originalValue.length);\n\n          nextCursorOffset -= 1;\n        }\n      } else {\n        nextValue =\n          originalValue.slice(0, state.cursorOffset) +\n          input +\n          originalValue.slice(state.cursorOffset, originalValue.length);\n\n        nextCursorOffset += input.length;\n\n        if (input.length > 1) {\n          nextCursorWidth = input.length;\n        }\n      }\n\n      if (state.cursorOffset < 0) {\n        nextCursorOffset = 0;\n      }\n\n      if (state.cursorOffset > originalValue.length) {\n        nextCursorOffset = originalValue.length;\n      }\n\n      setState({\n        cursorOffset: nextCursorOffset,\n        cursorWidth: nextCursorWidth,\n      });\n\n      if (nextValue !== originalValue) {\n        onChange(nextValue);\n      }\n    },\n    {isActive: focus},\n  );\n\n  return (\n    <Box {...boxProps}>\n      <Box marginRight={1}>\n        <Text>{isComplete ? icons.success : icons.question}</Text>\n      </Box>\n\n      <Box flexDirection=\"column\">\n        <Box marginRight={1}>\n          <Text color={colors.highlighted}>{label}</Text>\n        </Box>\n        {isComplete ? (\n          <Text color={colors.body}>{value}</Text>\n        ) : (\n          <Text color={colors.highlighted}>\n            {placeholder ? (value.length > 0 ? renderedValue : renderedPlaceholder) : renderedValue}\n          </Text>\n        )}\n        {validationError ? (\n          <Box marginTop={0}>\n            <Text color={colors.warning}>{validationError}</Text>\n          </Box>\n        ) : null}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["chalk","Box","Text","useInput","useEffect","useState","colors","icons","TextInput","label","validate","isComplete","value","originalValue","placeholder","focus","mask","showCursor","onChange","onSubmit","boxProps","validationError","setValidationError","state","setState","cursorOffset","length","cursorWidth","previousState","newValue","repeat","renderedValue","renderedPlaceholder","muted","undefined","inverse","slice","i","char","input","key","upArrow","downArrow","ctrl","shift","tab","return","error","message","nextCursorOffset","nextValue","nextCursorWidth","leftArrow","rightArrow","backspace","delete","isActive","marginRight","success","question","flexDirection","color","highlighted","body","marginTop","warning"],"mappings":"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"}
+{"version":3,"sources":["../../../src/ui/form/TextInput.tsx"],"sourcesContent":["// TODO: resolve\n/* eslint-disable complexity -- TODO */\nimport chalk from 'chalk';\nimport {Box, type BoxProps, Text, useInput} from 'ink';\nimport {useEffect, useState} from 'react';\n\nimport * as colors from '../colors.js';\nimport * as icons from '../icons.js';\n\n/**\n * Text input component props.\n */\nexport type TextInputProps = BoxProps & {\n  /** Text to display as a label. */\n  label: string;\n\n  /** Text to display when `value` is empty. */\n  placeholder?: string | undefined;\n\n  /** Value. */\n  value: string;\n\n  /** Should component listen to Listen to user's input? Useful in case there are multiple input components at the same time and input must be handled only by a specific component. */\n  focus?: boolean | undefined;\n\n  /** Replace all chars and mask the value. Useful for password inputs. */\n  mask?: string | undefined;\n\n  /** Show cursor and allow navigation using arrow keys. */\n  showCursor?: boolean | undefined;\n\n  /** Validation function that is called when value changes. If this function throws an error*/\n  validate?: ((value: string) => void) | undefined;\n\n  /** Handler function that is called when value changes. */\n  onChange: (value: string) => void;\n\n  /** Handler function that is called when enter is pressed. */\n  onSubmit?: ((value: string) => void) | undefined;\n\n  /** Indicates whether value has been accepted. Component then doesn't accept more input. */\n  isComplete?: boolean | undefined;\n};\n\n/**\n * Text input component.\n */\nexport function TextInput({\n  label,\n  validate,\n  isComplete,\n  value: originalValue,\n  placeholder = '',\n  focus = true,\n  mask,\n  showCursor = true,\n  onChange,\n  onSubmit,\n  ...boxProps\n}: TextInputProps) {\n  let [validationError, setValidationError] = useState('');\n  let [state, setState] = useState({\n    cursorOffset: (originalValue || '').length,\n    cursorWidth: 0,\n  });\n\n  useEffect(() => {\n    setState((previousState) => {\n      if (!focus || !showCursor) {\n        return previousState;\n      }\n\n      let newValue = originalValue || '';\n\n      if (previousState.cursorOffset > newValue.length - 1) {\n        return {\n          cursorOffset: newValue.length,\n          cursorWidth: 0,\n        };\n      }\n\n      return previousState;\n    });\n  }, [originalValue, focus, showCursor]);\n\n  let value = mask ? mask.repeat(originalValue.length) : originalValue;\n  let renderedValue = value;\n  let renderedPlaceholder = placeholder ? chalk[colors.muted](placeholder) : undefined;\n\n  if (showCursor && focus) {\n    renderedPlaceholder =\n      placeholder.length > 0\n        ? chalk.inverse(placeholder[0]) + chalk[colors.muted](placeholder.slice(1))\n        : chalk.inverse(' ');\n\n    renderedValue = value.length > 0 ? '' : chalk.inverse(' ');\n\n    for (let [i, character] of Object.entries(value)) {\n      if (Number(i) >= state.cursorOffset && Number(i) <= state.cursorOffset) {\n        renderedValue += chalk.inverse(character);\n      } else {\n        renderedValue += character;\n      }\n    }\n\n    if (value.length > 0 && state.cursorOffset === value.length) {\n      renderedValue += chalk.inverse(' ');\n    }\n  }\n\n  useInput(\n    (input, key) => {\n      if (\n        key.upArrow ||\n        key.downArrow ||\n        (key.ctrl && input === 'c') ||\n        (key.shift && key.tab) ||\n        key.tab\n      ) {\n        return;\n      }\n\n      if (key.return) {\n        if (onSubmit) {\n          if (validate) {\n            try {\n              validate(originalValue);\n            } catch (error: unknown) {\n              setValidationError((error as Error).message);\n\n              return;\n            }\n          }\n\n          if (validationError) {\n            setValidationError('');\n          } else {\n            onSubmit(originalValue);\n          }\n        }\n\n        return;\n      }\n\n      let nextCursorOffset = state.cursorOffset;\n      let nextValue = originalValue;\n      let nextCursorWidth = 0;\n\n      if (key.leftArrow) {\n        if (showCursor) {\n          nextCursorOffset -= 1;\n        }\n      } else if (key.rightArrow) {\n        if (showCursor) {\n          nextCursorOffset += 1;\n        }\n      } else if (key.backspace || key.delete) {\n        if (state.cursorOffset > 0) {\n          nextValue =\n            originalValue.slice(0, state.cursorOffset - 1) +\n            originalValue.slice(state.cursorOffset, originalValue.length);\n\n          nextCursorOffset -= 1;\n        }\n      } else {\n        nextValue =\n          originalValue.slice(0, state.cursorOffset) +\n          input +\n          originalValue.slice(state.cursorOffset, originalValue.length);\n\n        nextCursorOffset += input.length;\n\n        if (input.length > 1) {\n          nextCursorWidth = input.length;\n        }\n      }\n\n      if (state.cursorOffset < 0) {\n        nextCursorOffset = 0;\n      }\n\n      if (state.cursorOffset > originalValue.length) {\n        nextCursorOffset = originalValue.length;\n      }\n\n      setState({\n        cursorOffset: nextCursorOffset,\n        cursorWidth: nextCursorWidth,\n      });\n\n      if (nextValue !== originalValue) {\n        onChange(nextValue);\n      }\n    },\n    {isActive: focus},\n  );\n\n  return (\n    <Box {...boxProps}>\n      <Box marginRight={1}>\n        <Text>{isComplete ? icons.success : icons.question}</Text>\n      </Box>\n\n      <Box flexDirection=\"column\">\n        <Box marginRight={1}>\n          <Text color={colors.highlighted}>{label}</Text>\n        </Box>\n        {isComplete ? (\n          <Text color={colors.body}>{value}</Text>\n        ) : (\n          <Text color={colors.highlighted}>\n            {placeholder ? (value.length > 0 ? renderedValue : renderedPlaceholder) : renderedValue}\n          </Text>\n        )}\n        {validationError ? (\n          <Box marginTop={0}>\n            <Text color={colors.warning}>{validationError}</Text>\n          </Box>\n        ) : null}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["chalk","Box","Text","useInput","useEffect","useState","colors","icons","TextInput","label","validate","isComplete","value","originalValue","placeholder","focus","mask","showCursor","onChange","onSubmit","boxProps","validationError","setValidationError","state","setState","cursorOffset","length","cursorWidth","previousState","newValue","repeat","renderedValue","renderedPlaceholder","muted","undefined","inverse","slice","i","character","Object","entries","Number","input","key","upArrow","downArrow","ctrl","shift","tab","return","error","message","nextCursorOffset","nextValue","nextCursorWidth","leftArrow","rightArrow","backspace","delete","isActive","marginRight","success","question","flexDirection","color","highlighted","body","marginTop","warning"],"mappings":"AAAA,gBAAgB;AAChB,qCAAqC;AACrC,OAAOA,WAAW,QAAQ;AAC1B,SAAQC,GAAG,EAAiBC,IAAI,EAAEC,QAAQ,QAAO,MAAM;AACvD,SAAQC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAE1C,YAAYC,YAAY,eAAe;AACvC,YAAYC,WAAW,cAAc;AAqCrC;;CAEC,GACD,OAAO,SAASC,UAAU,EACxBC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,OAAOC,aAAa,EACpBC,cAAc,EAAE,EAChBC,QAAQ,IAAI,EACZC,IAAI,EACJC,aAAa,IAAI,EACjBC,QAAQ,EACRC,QAAQ,EACR,GAAGC,UACY;IACf,IAAI,CAACC,iBAAiBC,mBAAmB,GAAGjB,SAAS;IACrD,IAAI,CAACkB,OAAOC,SAAS,GAAGnB,SAAS;QAC/BoB,cAAc,AAACZ,CAAAA,iBAAiB,EAAC,EAAGa,MAAM;QAC1CC,aAAa;IACf;IAEAvB,UAAU;QACRoB,SAAS,CAACI;YACR,IAAI,CAACb,SAAS,CAACE,YAAY;gBACzB,OAAOW;YACT;YAEA,IAAIC,WAAWhB,iBAAiB;YAEhC,IAAIe,cAAcH,YAAY,GAAGI,SAASH,MAAM,GAAG,GAAG;gBACpD,OAAO;oBACLD,cAAcI,SAASH,MAAM;oBAC7BC,aAAa;gBACf;YACF;YAEA,OAAOC;QACT;IACF,GAAG;QAACf;QAAeE;QAAOE;KAAW;IAErC,IAAIL,QAAQI,OAAOA,KAAKc,MAAM,CAACjB,cAAca,MAAM,IAAIb;IACvD,IAAIkB,gBAAgBnB;IACpB,IAAIoB,sBAAsBlB,cAAcd,KAAK,CAACM,OAAO2B,KAAK,CAAC,CAACnB,eAAeoB;IAE3E,IAAIjB,cAAcF,OAAO;QACvBiB,sBACElB,YAAYY,MAAM,GAAG,IACjB1B,MAAMmC,OAAO,CAACrB,WAAW,CAAC,EAAE,IAAId,KAAK,CAACM,OAAO2B,KAAK,CAAC,CAACnB,YAAYsB,KAAK,CAAC,MACtEpC,MAAMmC,OAAO,CAAC;QAEpBJ,gBAAgBnB,MAAMc,MAAM,GAAG,IAAI,KAAK1B,MAAMmC,OAAO,CAAC;QAEtD,KAAK,IAAI,CAACE,GAAGC,UAAU,IAAIC,OAAOC,OAAO,CAAC5B,OAAQ;YAChD,IAAI6B,OAAOJ,MAAMd,MAAME,YAAY,IAAIgB,OAAOJ,MAAMd,MAAME,YAAY,EAAE;gBACtEM,iBAAiB/B,MAAMmC,OAAO,CAACG;YACjC,OAAO;gBACLP,iBAAiBO;YACnB;QACF;QAEA,IAAI1B,MAAMc,MAAM,GAAG,KAAKH,MAAME,YAAY,KAAKb,MAAMc,MAAM,EAAE;YAC3DK,iBAAiB/B,MAAMmC,OAAO,CAAC;QACjC;IACF;IAEAhC,SACE,CAACuC,OAAOC;QACN,IACEA,IAAIC,OAAO,IACXD,IAAIE,SAAS,IACZF,IAAIG,IAAI,IAAIJ,UAAU,OACtBC,IAAII,KAAK,IAAIJ,IAAIK,GAAG,IACrBL,IAAIK,GAAG,EACP;YACA;QACF;QAEA,IAAIL,IAAIM,MAAM,EAAE;YACd,IAAI9B,UAAU;gBACZ,IAAIT,UAAU;oBACZ,IAAI;wBACFA,SAASG;oBACX,EAAE,OAAOqC,OAAgB;wBACvB5B,mBAAmB,AAAC4B,MAAgBC,OAAO;wBAE3C;oBACF;gBACF;gBAEA,IAAI9B,iBAAiB;oBACnBC,mBAAmB;gBACrB,OAAO;oBACLH,SAASN;gBACX;YACF;YAEA;QACF;QAEA,IAAIuC,mBAAmB7B,MAAME,YAAY;QACzC,IAAI4B,YAAYxC;QAChB,IAAIyC,kBAAkB;QAEtB,IAAIX,IAAIY,SAAS,EAAE;YACjB,IAAItC,YAAY;gBACdmC,oBAAoB;YACtB;QACF,OAAO,IAAIT,IAAIa,UAAU,EAAE;YACzB,IAAIvC,YAAY;gBACdmC,oBAAoB;YACtB;QACF,OAAO,IAAIT,IAAIc,SAAS,IAAId,IAAIe,MAAM,EAAE;YACtC,IAAInC,MAAME,YAAY,GAAG,GAAG;gBAC1B4B,YACExC,cAAcuB,KAAK,CAAC,GAAGb,MAAME,YAAY,GAAG,KAC5CZ,cAAcuB,KAAK,CAACb,MAAME,YAAY,EAAEZ,cAAca,MAAM;gBAE9D0B,oBAAoB;YACtB;QACF,OAAO;YACLC,YACExC,cAAcuB,KAAK,CAAC,GAAGb,MAAME,YAAY,IACzCiB,QACA7B,cAAcuB,KAAK,CAACb,MAAME,YAAY,EAAEZ,cAAca,MAAM;YAE9D0B,oBAAoBV,MAAMhB,MAAM;YAEhC,IAAIgB,MAAMhB,MAAM,GAAG,GAAG;gBACpB4B,kBAAkBZ,MAAMhB,MAAM;YAChC;QACF;QAEA,IAAIH,MAAME,YAAY,GAAG,GAAG;YAC1B2B,mBAAmB;QACrB;QAEA,IAAI7B,MAAME,YAAY,GAAGZ,cAAca,MAAM,EAAE;YAC7C0B,mBAAmBvC,cAAca,MAAM;QACzC;QAEAF,SAAS;YACPC,cAAc2B;YACdzB,aAAa2B;QACf;QAEA,IAAID,cAAcxC,eAAe;YAC/BK,SAASmC;QACX;IACF,GACA;QAACM,UAAU5C;IAAK;IAGlB,qBACE,MAACd;QAAK,GAAGmB,QAAQ;;0BACf,KAACnB;gBAAI2D,aAAa;0BAChB,cAAA,KAAC1D;8BAAMS,aAAaJ,MAAMsD,OAAO,GAAGtD,MAAMuD,QAAQ;;;0BAGpD,MAAC7D;gBAAI8D,eAAc;;kCACjB,KAAC9D;wBAAI2D,aAAa;kCAChB,cAAA,KAAC1D;4BAAK8D,OAAO1D,OAAO2D,WAAW;sCAAGxD;;;oBAEnCE,2BACC,KAACT;wBAAK8D,OAAO1D,OAAO4D,IAAI;kCAAGtD;uCAE3B,KAACV;wBAAK8D,OAAO1D,OAAO2D,WAAW;kCAC5BnD,cAAeF,MAAMc,MAAM,GAAG,IAAIK,gBAAgBC,sBAAuBD;;oBAG7EV,gCACC,KAACpB;wBAAIkE,WAAW;kCACd,cAAA,KAACjE;4BAAK8D,OAAO1D,OAAO8D,OAAO;sCAAG/C;;yBAE9B;;;;;AAIZ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jakubmazanec/cli",
-  "version": "0.1.0-5f6d70c",
+  "version": "0.1.0-7dbb232",
   "description": "TypeScript-first library for building CLIs.",
   "repository": {
     "type": "git",
@@ -27,10 +27,10 @@
     "typecheck": "tsc --project tsconfig.typecheck.json"
   },
   "dependencies": {
-    "@jakubmazanec/args": "1.0.1-5f6d70c",
-    "@jakubmazanec/error": "2.0.1-5f6d70c",
-    "@jakubmazanec/ts-utils": "2.1.0-5f6d70c",
-    "@jakubmazanec/zod-utils": "1.0.0-5f6d70c",
+    "@jakubmazanec/args": "1.0.1-7dbb232",
+    "@jakubmazanec/error": "2.0.1-7dbb232",
+    "@jakubmazanec/ts-utils": "2.1.0-7dbb232",
+    "@jakubmazanec/zod-utils": "1.0.0-7dbb232",
     "chalk": "^5.2.0",
     "lodash": "^4.17.21",
     "react-error-boundary": "^4.0.7",

package/src/ui/form/SelectInput.tsx

@@ -1,6 +1,6 @@
 import {Box, type BoxProps, Text, useInput, type Key} from 'ink';
 import _ from 'lodash';
-import {useState, useEffect, useRef, useCallback} from 'react';
+import {useState, useEffect, useRef} from 'react';
 
 import {type SelectInputItem} from './SelectInputItem.js';
 import * as colors from '../colors.js';
@@ -17,7 +17,7 @@ type SelectInputProps = BoxProps & {
   /** Items to display in a list. */
   items: SelectInputItem[];
 
-  /** Should component listen to Listen to user's input? Useful in case there are multiple input components at the same time and input must be "routed" to a specific component. */
+  /** Should component listen to user's input? Useful in case there are multiple input components at the same time and input must be handled only by a specific component. */
   focus?: boolean | undefined;
 
   /** Index of initially selected item. */
@@ -44,16 +44,16 @@ export function SelectInput({
   items = [],
   focus = true,
   initialIndex = 0,
-  limit: customLimit,
+  limit: userDefinedLimit,
   onSelect,
   onHighlight,
   isComplete,
   ...boxProps
 }: SelectInputProps): JSX.Element {
-  let [rotateIndex, setRotateIndex] = useState(0);
+  let [rotatedIndex, setRotatedIndex] = useState(0);
   let [selectedIndex, setSelectedIndex] = useState(initialIndex);
-  let hasLimit = typeof customLimit === 'number' && items.length > customLimit;
-  let limit = hasLimit ? Math.min(customLimit as number, items.length) : items.length;
+  let hasLimit = typeof userDefinedLimit === 'number' && items.length > userDefinedLimit;
+  let limit = hasLimit ? Math.min(userDefinedLimit as number, items.length) : items.length;
   let previousItems = useRef<SelectInputItem[]>(items);
 
   useEffect(() => {
@@ -63,26 +63,26 @@ export function SelectInput({
         items.map((item) => item.value),
       )
     ) {
-      setRotateIndex(0);
+      setRotatedIndex(0);
       setSelectedIndex(0);
     }
 
     previousItems.current = items;
   }, [items]);
 
-  let inputHandler = useCallback(
+  useInput(
     (input: string, key: Key) => {
       if (input === 'k' || key.upArrow) {
         let lastIndex = (hasLimit ? limit : items.length) - 1;
-        let atFirstIndex = selectedIndex === 0;
+        let isAtFirstIndex = selectedIndex === 0;
         let nextIndex = hasLimit ? selectedIndex : lastIndex;
-        let nextRotateIndex = atFirstIndex ? rotateIndex + 1 : rotateIndex;
-        let nextSelectedIndex = atFirstIndex ? nextIndex : selectedIndex - 1;
+        let nextRotatedIndex = isAtFirstIndex ? rotatedIndex + 1 : rotatedIndex;
+        let nextSelectedIndex = isAtFirstIndex ? nextIndex : selectedIndex - 1;
 
-        setRotateIndex(nextRotateIndex);
+        setRotatedIndex(nextRotatedIndex);
         setSelectedIndex(nextSelectedIndex);
 
-        let slicedItems = hasLimit ? rotate(items, nextRotateIndex).slice(0, limit) : items;
+        let slicedItems = hasLimit ? rotate(items, nextRotatedIndex).slice(0, limit) : items;
 
         if (typeof onHighlight === 'function') {
           onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);
@@ -92,13 +92,13 @@ export function SelectInput({
       if (input === 'j' || key.downArrow) {
         let isAtLastIndex = selectedIndex === (hasLimit ? limit : items.length) - 1;
         let nextIndex = hasLimit ? selectedIndex : 0;
-        let nextRotateIndex = isAtLastIndex ? rotateIndex - 1 : rotateIndex;
+        let nextRotatedIndex = isAtLastIndex ? rotatedIndex - 1 : rotatedIndex;
         let nextSelectedIndex = isAtLastIndex ? nextIndex : selectedIndex + 1;
 
-        setRotateIndex(nextRotateIndex);
+        setRotatedIndex(nextRotatedIndex);
         setSelectedIndex(nextSelectedIndex);
 
-        let slicedItems = hasLimit ? rotate(items, nextRotateIndex).slice(0, limit) : items;
+        let slicedItems = hasLimit ? rotate(items, nextRotatedIndex).slice(0, limit) : items;
 
         if (typeof onHighlight === 'function') {
           onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);
@@ -106,20 +106,18 @@ export function SelectInput({
       }
 
       if (key.return) {
-        let slicedItems = hasLimit ? rotate(items, rotateIndex).slice(0, limit) : items;
+        let slicedItems = hasLimit ? rotate(items, rotatedIndex).slice(0, limit) : items;
 
         if (typeof onSelect === 'function') {
           onSelect(slicedItems[selectedIndex] as SelectInputItem);
         }
       }
     },
-    [hasLimit, limit, rotateIndex, selectedIndex, items, onSelect, onHighlight],
+    {isActive: focus},
   );
 
-  useInput(inputHandler, {isActive: focus});
-
-  let visibleItem: SelectInputItem[] = hasLimit
-    ? rotate(items, rotateIndex).slice(0, limit)
+  let visibleItems: SelectInputItem[] = hasLimit
+    ? rotate(items, rotatedIndex).slice(0, limit)
     : items;
 
   return (
@@ -138,7 +136,7 @@ export function SelectInput({
           </Text>
         ) : (
           <Box flexDirection="column">
-            {visibleItem.map((item, index) => {
+            {visibleItems.map((item, index) => {
               let isSelected = index === selectedIndex;
 
               return (

package/src/ui/form/TextInput.tsx

@@ -20,7 +20,7 @@ export type TextInputProps = BoxProps & {
   /** Value. */
   value: string;
 
-  /** Should component listen to Listen to user's input? Useful in case there are multiple input components at the same time and input must be "routed" to a specific component. */
+  /** Should component listen to Listen to user's input? Useful in case there are multiple input components at the same time and input must be handled only by a specific component. */
   focus?: boolean | undefined;
 
   /** Replace all chars and mask the value. Useful for password inputs. */
@@ -87,7 +87,6 @@ export function TextInput({
   let renderedValue = value;
   let renderedPlaceholder = placeholder ? chalk[colors.muted](placeholder) : undefined;
 
-  // fake mouse cursor; dealing with with actual cursor and ANSI escape codes is inconvinient
   if (showCursor && focus) {
     renderedPlaceholder =
       placeholder.length > 0
@@ -96,16 +95,12 @@ export function TextInput({
 
     renderedValue = value.length > 0 ? '' : chalk.inverse(' ');
 
-    let i = 0;
-
-    for (let char of value) {
-      if (i >= state.cursorOffset && i <= state.cursorOffset) {
-        renderedValue += chalk.inverse(char);
+    for (let [i, character] of Object.entries(value)) {
+      if (Number(i) >= state.cursorOffset && Number(i) <= state.cursorOffset) {
+        renderedValue += chalk.inverse(character);
       } else {
-        renderedValue += char;
+        renderedValue += character;
       }
-
-      i += 1;
     }
 
     if (value.length > 0 && state.cursorOffset === value.length) {