@startupjs-ui/auto-suggest 0.1.14 → 0.1.16

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
+
+**Note:** Version bump only for package @startupjs-ui/auto-suggest
+
+
+
+
+
+## [0.1.15](https://github.com/startupjs/startupjs-ui/compare/v0.1.14...v0.1.15) (2026-02-06)
+
+**Note:** Version bump only for package @startupjs-ui/auto-suggest
+
+
+
+
+
 ## [0.1.14](https://github.com/startupjs/startupjs-ui/compare/v0.1.13...v0.1.14) (2026-02-06)
 
 

package/README.mdx

@@ -6,7 +6,12 @@ import Span from '@startupjs-ui/span'
 import { Sandbox } from '@startupjs-ui/docs'
 
 # AutoSuggest
-A text field with a pop-up list of options.
+
+AutoSuggest is a text input with a pop-up list of filterable options. As the user types, the options are filtered to match the input text.
+
+Use the `options` prop to provide the list of options (strings, numbers, or objects with `value` and `label` keys), `value` for the currently selected value, and `onChange` to handle selection. The component also supports `placeholder` (defaults to `'Select value'`), `size` (`'s'`, `'m'`, `'l'`, defaults to `'m'`), `disabled`, `readonly`, and `isLoading` to show a loader while fetching options.
+
+For custom styling, use `style` for the suggestion list container, `captionStyle` for the input wrapper, `inputStyle` for the input field, `iconStyle` for the clear icon, and `inputIcon` for a custom input icon. Use `testID` for testing.
 
 ```jsx
 import { AutoSuggest } from 'startupjs-ui'
@@ -14,9 +19,10 @@ import { AutoSuggest } from 'startupjs-ui'
 
 ## Initialization
 
-Before use you need to configure [Portal](/docs/components/Portal)
+Before using AutoSuggest, you need to configure [Portal](/docs/components/Portal).
 
 ## Simple example
+
 ```jsx example
 const [value, setValue] = useState()
 
@@ -36,11 +42,14 @@ return (
 ```
 
 ## 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
+
+- `options` -- an array of options, each being a string, number, or object with `value` and `label` keys.
+- `value` -- the currently selected value.
+- `placeholder` -- placeholder text displayed when no value is selected.
+- `onChange` -- callback called when the user selects a value, receiving the selected value as its argument.
+- `onChangeText` -- callback called when the user types in the input, receiving the current text.
+- `onDismiss` -- callback called when the suggestion list closes.
+- `onScrollEnd` -- callback called when the list is scrolled to the end (useful for loading more options).
 
 ```jsx example
 const [value, setValue] = useState()
@@ -67,7 +76,8 @@ return (
 ```
 
 ## 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.
+
+Use the `renderItem` prop to customize how each option is rendered. The function receives three arguments: the current item, its index, and the currently highlighted index.
 
 ```jsx example
 const [value, setValue] = useState()
@@ -114,13 +124,6 @@ return (
 )
 ```
 
-## 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

package/index.cssx.styl

@@ -6,7 +6,6 @@
   right 0
   bottom 0
 
-
 .loaderCase
   justify-content center
   align-items center
@@ -18,7 +17,6 @@
 .content
   width 100%
   height 100%
-  background-color var(--color-bg-main)
 
 .contentCase
   border-radius 1u
@@ -28,3 +26,9 @@
 
 .selectMenu
   background-color var(--AutoSuggest-itemBg)
+
+.attachment
+  background-color var(--color-bg-main-strong)
+  radius()
+  shadow(3)
+  overflow hidden

package/index.d.ts

@@ -26,6 +26,8 @@ export interface AutoSuggestProps {
     options?: AutoSuggestOption[];
     /** Current selected value */
     value?: AutoSuggestValue;
+    /** Size preset @default 'm' */
+    size?: 'l' | 'm' | 's';
     /** Placeholder text @default 'Select value' */
     placeholder?: string | number;
     /** Custom item renderer (item, index, highlightedIndex) */

package/index.tsx

@@ -233,7 +233,7 @@ function AutoSuggest ({
       testID=testID
     )
 
-    AbstractPopover(
+    AbstractPopover.attachment(
       visible=(isShow || isLoading)
       anchorRef=inputRef
       matchAnchorWidth=matchAnchorWidth

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/auto-suggest",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "publishConfig": {
     "access": "public"
   },
@@ -8,17 +8,17 @@
   "types": "index.d.ts",
   "type": "module",
   "dependencies": {
-    "@startupjs-ui/abstract-popover": "^0.1.11",
+    "@startupjs-ui/abstract-popover": "^0.1.16",
     "@startupjs-ui/core": "^0.1.11",
-    "@startupjs-ui/flat-list": "^0.1.11",
-    "@startupjs-ui/loader": "^0.1.11",
-    "@startupjs-ui/menu": "^0.1.13",
-    "@startupjs-ui/text-input": "^0.1.13"
+    "@startupjs-ui/flat-list": "^0.1.16",
+    "@startupjs-ui/loader": "^0.1.16",
+    "@startupjs-ui/menu": "^0.1.16",
+    "@startupjs-ui/text-input": "^0.1.16"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "f6c2eb24b758f5e3de16bba9397aeb8f5585e260"
+  "gitHead": "9943aa3566d5d80f5b404473906eb3c0611f9ee5"
 }