@startupjs-ui/auto-suggest 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/auto-suggest
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **auto-suggest:** refactor AutoSuggest component ([4602b67](https://github.com/startupjs/startupjs-ui/commit/4602b677b27b11c0cb31185bcaaf3cc40d3b1a87))

package/README.mdx

@@ -0,0 +1,139 @@
+import { useState } from 'react'
+import AutoSuggest, { _PropsJsonSchema as AutoSuggestPropsJsonSchema } from './index'
+import Avatar from '@startupjs-ui/avatar'
+import Div from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# AutoSuggest
+A text field with a pop-up list of options.
+
+```jsx
+import { AutoSuggest } from 'startupjs-ui'
+```
+
+## Initialization
+
+Before use you need to configure [Portal](/docs/components/Portal)
+
+## Simple example
+```jsx example
+const [value, setValue] = useState()
+
+const options = [
+  { value: '1', label: 'Harry' },
+  { value: '2', label: 'Alfie' },
+  { value: '3', label: 'Jacob' },
+]
+
+return (
+  <AutoSuggest
+    options={options}
+    value={value}
+    onChange={v => setValue(v)}
+  />
+)
+```
+
+## Props
+- options: array of objects for options, each option has a value and a label
+- value: active value
+- maxHeight: maximum height of the popup list
+- placeholder: the title of the field
+- onChange: callback function, called after selecting a value, takes the selected value as the first parameter
+
+```jsx example
+const [value, setValue] = useState()
+
+const options = [
+  { value: '1', label: 'Harry' },
+  { value: '2', label: 'Alfie' },
+  { value: '3', label: 'Jacob' },
+  { value: '4', label: 'Oscar' },
+  { value: '5', label: 'Charlie' },
+  { value: '6', label: 'James' },
+  { value: '7', label: 'William' }
+]
+
+return (
+  <AutoSuggest
+    options={options}
+    value={value}
+    style={{ maxHeight: 160 }}
+    placeholder="Select value"
+    onChange={v=> setValue(v)}
+  />
+)
+```
+
+## Customization
+- renderItem: a function that is called when rendering each element of the array. Gets 3 arguments - the current element (item), its index, and the selected index.
+
+```jsx example
+const [value, setValue] = useState()
+
+const options = [
+  { value: '1', label: 'Harry' },
+  { value: '2', label: 'Alfie' },
+  { value: '3', label: 'Jacob' },
+  { value: '4', label: 'Oscar' },
+  { value: '5', label: 'Charlie' },
+  { value: '6', label: 'James' },
+  { value: '7', label: 'William' }
+]
+
+const renderItem = (item, index, selectIndexValue)=> {
+  const style = { padding: 8 }
+
+  if (selectIndexValue === index) {
+    style.backgroundColor = "#eee"
+  }
+
+  return (
+    <Div
+      key={index}
+      vAlign='center'
+      style={style}
+      row
+    >
+      <Avatar size='s'>{item.label}</Avatar>
+      <Span style={{ marginLeft: 8 }}>{item.label}</Span>
+    </Div>
+  )
+}
+
+return (
+  <AutoSuggest
+    options={options}
+    value={value}
+    style={{ maxHeight: 160 }}
+    placeholder="Select value"
+    renderItem={renderItem}
+    onChange={v=> setValue(v)}
+  />
+)
+```
+
+## Also
+- style: responsible for styled hidden content
+- captionStyle: responsible for heading styles (input)
+- onDismiss: callback, called when the list is closed
+- onChangeText: callback, called when entering text, accepts 1 argument text
+- onScrollEnd: callback, called at the end of the scroll
+
+## Sandbox
+
+<Sandbox
+  Component={AutoSuggest}
+  propsJsonSchema={AutoSuggestPropsJsonSchema}
+  props={{
+    options: [
+      { value: '1', label: 'Harry' },
+      { value: '2', label: 'Alfie' },
+      { value: '3', label: 'Jacob' }
+    ],
+    value: '1',
+    placeholder: 'Select value',
+    onChange: value => alert(`Selected: ${value}`)
+  }}
+/>

package/index.cssx.styl

@@ -0,0 +1,30 @@
+.root
+.overlay
+  position absolute
+  top 0
+  left 0
+  right 0
+  bottom 0
+
+
+.loaderCase
+  justify-content center
+  align-items center
+  min-height 8u
+
+.item
+  width 100%
+
+.content
+  width 100%
+  height 100%
+  background-color var(--color-bg-main)
+
+.contentCase
+  border-radius 1u
+  width 100%
+  height 100%
+  overflow hidden
+
+.selectMenu
+  background-color var(--AutoSuggest-itemBg)

package/index.d.ts

@@ -0,0 +1,51 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode } from 'react';
+import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import './index.cssx.styl';
+interface AutoSuggestOptionObject {
+    value?: any;
+    label?: string | number;
+}
+type AutoSuggestOption = string | number | AutoSuggestOptionObject;
+type AutoSuggestValue = AutoSuggestOption | null | undefined;
+export declare const _PropsJsonSchema: {};
+export interface AutoSuggestProps {
+    /** Custom styles for the suggestion list container */
+    style?: StyleProp<ViewStyle>;
+    /** Custom styles for the TextInput wrapper */
+    captionStyle?: StyleProp<ViewStyle>;
+    /** Custom styles for the TextInput input field */
+    inputStyle?: StyleProp<TextStyle>;
+    /** Custom styles for the clear icon */
+    iconStyle?: StyleProp<TextStyle>;
+    /** Custom icon for the input */
+    inputIcon?: any;
+    /** Options list (strings, numbers, or objects with value/label) @default [] */
+    options?: AutoSuggestOption[];
+    /** Current selected value */
+    value?: AutoSuggestValue;
+    /** Placeholder text @default 'Select value' */
+    placeholder?: string | number;
+    /** Custom item renderer (item, index, highlightedIndex) */
+    renderItem?: (item: AutoSuggestOption, index: number, selectIndexValue: number) => ReactNode;
+    /** Show loader in the list @default false */
+    isLoading?: boolean;
+    /** Disable input interactions */
+    disabled?: boolean;
+    /** Render as non-interactive */
+    readonly?: boolean;
+    /** Change handler for selected value */
+    onChange?: (value?: any) => void | Promise<void>;
+    /** Called after the list is closed */
+    onDismiss?: () => void;
+    /** Change handler for input text */
+    onChangeText?: (text: string) => void;
+    /** Called when list scroll reaches the end */
+    onScrollEnd?: () => void;
+    /** Test identifier */
+    testID?: string;
+}
+declare const _default: import("react").ComponentType<AutoSuggestProps>;
+export default _default;

package/index.tsx

@@ -0,0 +1,261 @@
+import { useState, useRef, useEffect, useMemo, type ReactNode } from 'react'
+import {
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle
+} from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import AbstractPopover from '@startupjs-ui/abstract-popover'
+import FlatList from '@startupjs-ui/flat-list'
+import Loader from '@startupjs-ui/loader'
+import Menu from '@startupjs-ui/menu'
+import TextInput from '@startupjs-ui/text-input'
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes'
+import escapeRegExp from 'lodash/escapeRegExp'
+import useKeyboard from './useKeyboard'
+import './index.cssx.styl'
+
+const SUPPORT_PLACEMENTS = [
+  'bottom-start',
+  'bottom-center',
+  'bottom-end',
+  'top-start',
+  'top-center',
+  'top-end'
+] as const
+
+interface AutoSuggestOptionObject {
+  value?: any
+  label?: string | number
+}
+
+type AutoSuggestOption = string | number | AutoSuggestOptionObject
+
+type AutoSuggestValue = AutoSuggestOption | null | undefined
+
+export const _PropsJsonSchema = {/* AutoSuggestProps */}
+
+export interface AutoSuggestProps {
+  /** Custom styles for the suggestion list container */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles for the TextInput wrapper */
+  captionStyle?: StyleProp<ViewStyle>
+  /** Custom styles for the TextInput input field */
+  inputStyle?: StyleProp<TextStyle>
+  /** Custom styles for the clear icon */
+  iconStyle?: StyleProp<TextStyle>
+  /** Custom icon for the input */
+  inputIcon?: any
+  /** Options list (strings, numbers, or objects with value/label) @default [] */
+  options?: AutoSuggestOption[]
+  /** Current selected value */
+  value?: AutoSuggestValue
+  /** Placeholder text @default 'Select value' */
+  placeholder?: string | number
+  /** Custom item renderer (item, index, highlightedIndex) */
+  renderItem?: (item: AutoSuggestOption, index: number, selectIndexValue: number) => ReactNode
+  /** Show loader in the list @default false */
+  isLoading?: boolean
+  /** Disable input interactions */
+  disabled?: boolean
+  /** Render as non-interactive */
+  readonly?: boolean
+  /** Change handler for selected value */
+  onChange?: (value?: any) => void | Promise<void>
+  /** Called after the list is closed */
+  onDismiss?: () => void
+  /** Change handler for input text */
+  onChangeText?: (text: string) => void
+  /** Called when list scroll reaches the end */
+  onScrollEnd?: () => void
+  /** Test identifier */
+  testID?: string
+}
+
+function getOptionLabel (option: AutoSuggestOption): any {
+  return (option as AutoSuggestOptionObject)?.label ?? option
+}
+
+function stringifyValue (option: AutoSuggestValue): string {
+  return JSON.stringify((option as AutoSuggestOptionObject)?.value ?? option)
+}
+
+function parseValue (value: string): any {
+  return JSON.parse(value)
+}
+
+function getLabelFromValue (value: AutoSuggestValue, options: AutoSuggestOption[]): any {
+  for (const option of options) {
+    if (stringifyValue(value) === stringifyValue(option)) {
+      return getOptionLabel(option)
+    }
+  }
+}
+
+function AutoSuggest ({
+  style = {},
+  captionStyle,
+  inputStyle,
+  iconStyle,
+  options = [],
+  value,
+  placeholder = 'Select value',
+  renderItem,
+  isLoading = false,
+  disabled,
+  readonly,
+  onChange,
+  onDismiss,
+  onChangeText,
+  onScrollEnd,
+  testID
+}: AutoSuggestProps): ReactNode {
+  const inputRef = useRef<any>(null)
+  const [isShow, setIsShow] = useState(false)
+  const [inputValue, setInputValue] = useState('')
+  const [wrapperHeight, setWrapperHeight] = useState<number | null>(null)
+  const [scrollHeightContent, setScrollHeightContent] = useState<number | null>(null)
+  const [textToFilter, setTextToFilter] = useState<string | undefined>()
+  const _options = useMemo(() => {
+    const escapedText = escapeRegExp(textToFilter ?? '')
+    return options.filter(option => {
+      return new RegExp(escapedText, 'gi')
+        .test(getLabelFromValue(option, options))
+    })
+  }, [options, textToFilter])
+
+  const [selectIndexValue, setSelectIndexValue, onKeyPress] = useKeyboard({
+    options: _options,
+    onChange,
+    onChangeShow: v => { setIsShow(v) }
+  })
+
+  const selectedLabel = useMemo(() => {
+    return getLabelFromValue(value, options)
+  }, [options, value])
+
+  useEffect(() => {
+    setInputValue(selectedLabel)
+  }, [selectedLabel])
+
+  function onClose () {
+    setIsShow(false)
+    setSelectIndexValue(-1)
+    inputRef.current.blur()
+    onDismiss?.()
+  }
+
+  function _onChangeText (text: string) {
+    setInputValue(text)
+    setTextToFilter(text)
+    if (!text) onChange?.()
+    setSelectIndexValue(-1)
+    onChangeText?.(text)
+  }
+
+  async function _onPress (item: AutoSuggestOption) {
+    onChange && await onChange(parseValue(stringifyValue(item)))
+    onClose()
+  }
+
+  function _renderItem ({ item, index }: { item: AutoSuggestOption, index: number }): ReactNode {
+    if (renderItem) {
+      return pug`
+        TouchableOpacity(
+          key=index
+          onPress=() => { void _onPress(item) }
+        )= renderItem(item, index, selectIndexValue)
+      `
+    }
+
+    return pug`
+      Menu.Item.item(
+        key=index
+        styleName={ selectMenu: selectIndexValue === index }
+        onPress=() => { void _onPress(item) }
+        active=stringifyValue(item) === stringifyValue(value)
+      )= getLabelFromValue(item, options)
+    `
+  }
+
+  function onScroll ({ nativeEvent }: any) {
+    if (nativeEvent.contentOffset.y + wrapperHeight === scrollHeightContent) {
+      onScrollEnd?.()
+    }
+  }
+
+  function onLayoutWrapper ({ nativeEvent }: any) {
+    setWrapperHeight(nativeEvent.layout.height)
+  }
+
+  function onChangeSizeScroll (width: number, height: number) {
+    setScrollHeightContent(height)
+  }
+
+  function renderWrapper (children: ReactNode): ReactNode {
+    return pug`
+      View.root
+        TouchableWithoutFeedback(onPress=() => {
+          setInputValue(selectedLabel)
+          onClose()
+        })
+          View.overlay
+        = children
+    `
+  }
+
+  const matchAnchorWidth = !(style as ViewStyle)?.width && !(style as ViewStyle)?.maxWidth
+
+  return pug`
+    TextInput(
+      ref=inputRef
+      style=captionStyle
+      inputStyle=inputStyle
+      icon=value && !disabled ? faTimes : undefined
+      iconPosition='right'
+      iconStyle=iconStyle
+      value=inputValue
+      placeholder=placeholder
+      disabled=disabled
+      readonly=readonly
+      onChangeText=_onChangeText
+      onFocus=() => setIsShow(true)
+      onKeyPress=onKeyPress
+      onIconPress=() => { void onChange?.() }
+      testID=testID
+    )
+
+    AbstractPopover(
+      visible=(isShow || isLoading)
+      anchorRef=inputRef
+      matchAnchorWidth=matchAnchorWidth
+      placements=SUPPORT_PLACEMENTS
+      durationOpen=200
+      durationClose=200
+      renderWrapper=renderWrapper
+      onCloseComplete=() => setTextToFilter()
+    )
+      if isLoading
+        View.loaderCase
+          Loader(size='s')
+      else
+        View.contentCase
+          FlatList.content(
+            style=style
+            data=_options
+            renderItem=_renderItem
+            keyExtractor=item => stringifyValue(item)
+            scrollEventThrottle=500
+            keyboardShouldPersistTaps='always'
+            onScroll=onScroll
+            onLayout=onLayoutWrapper
+            onContentSizeChange=onChangeSizeScroll
+          )
+  `
+}
+
+export default observer(themed('AutoSuggest', AutoSuggest))

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@startupjs-ui/auto-suggest",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/abstract-popover": "^0.1.3",
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/flat-list": "^0.1.3",
+    "@startupjs-ui/loader": "^0.1.3",
+    "@startupjs-ui/menu": "^0.1.3",
+    "@startupjs-ui/text-input": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}

package/useKeyboard.ts

@@ -0,0 +1,59 @@
+import { useState, type Dispatch, type SetStateAction } from 'react'
+
+interface UseKeyboardOptions {
+  options: any[]
+  onChange?: (value: any) => void
+  onChangeShow: (visible: boolean) => void
+}
+
+export default function useKeyboard ({
+  options,
+  onChange,
+  onChangeShow
+}: UseKeyboardOptions): [number, Dispatch<SetStateAction<number>>, (e: any) => void] {
+  const [selectIndexValue, setSelectIndexValue] = useState(-1)
+
+  function onKeyPress (e: any) {
+    const keyName = e.key
+
+    switch (keyName) {
+      case 'ArrowUp': {
+        e.preventDefault()
+
+        const nextIndex = selectIndexValue - 1
+
+        if (nextIndex < 0) {
+          setSelectIndexValue(options.length - 1)
+          return
+        }
+
+        setSelectIndexValue(nextIndex)
+        break
+      }
+      case 'ArrowDown': {
+        e.preventDefault()
+
+        const nextIndex = selectIndexValue + 1
+
+        if (nextIndex === options.length) {
+          setSelectIndexValue(0)
+          return
+        }
+
+        setSelectIndexValue(nextIndex)
+        break
+      }
+      case 'Enter': {
+        e.preventDefault()
+        if (selectIndexValue === -1) return
+        const item = options.find((_: any, i: number) => i === selectIndexValue)
+        onChangeShow(false)
+        onChange && onChange(item)
+        setSelectIndexValue(-1)
+        break
+      }
+    }
+  }
+
+  return [selectIndexValue, setSelectIndexValue, onKeyPress]
+}