Compare commits

...

2 commits

Author SHA1 Message Date
f196f98317
Export SelectProperties type.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/tag/woodpecker Pipeline was successful
2024-09-24 19:50:38 +02:00
9edbc97d61
Fix max size of select suggestions.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/tag/woodpecker Pipeline was successful
2024-09-24 19:49:04 +02:00
4 changed files with 75 additions and 59 deletions

View file

@ -153,6 +153,14 @@ export function DemoApp()
"d": "DDDDDD",
"e": "EEEEEE",
"f": "FFFFFF",
"g": "GGGGGG",
"h": "HHHHHH",
"i": "IIIIII",
"j": "JJJJJJ",
"k": "KKKKKK",
"l": "LLLLLL",
"m": "MMMMMM",
"n": "NNNNNN",
}} value={selected} onChange={setSelected} selectibleMaxCount={3} placeholder={"Simple test"}>
Simple select test
</Select>

View file

@ -1,5 +1,5 @@
{
"version": "1.3.2",
"version": "1.3.3",
"name": "@kernelui/core",
"description": "Kernel UI Core.",
"scripts": {

View file

@ -5,22 +5,9 @@ import {classes, Modify, normalizeString} from "../../Utils";
import {CaretDown, Check, X} from "@phosphor-icons/react";
/**
* Generic select component.
* Generic select component properties.
*/
export function Select<OptionKey extends keyof any, Option>(
{
className,
value, onChange,
options, renderOption, match,
selectibleMaxCount, multiple,
blurOnSelect, blurWhenMaxCountSelected,
// Properties to pass down.
onKeyDown,
// Already set properties.
type, role,
children,
...props
}: React.PropsWithChildren<Modify<React.InputHTMLAttributes<HTMLInputElement>, {
export type SelectProperties<OptionKey extends keyof any, Option> = React.PropsWithChildren<Modify<React.InputHTMLAttributes<HTMLInputElement>, {
/**
* The currently selected option(s).
*/
@ -77,7 +64,25 @@ export function Select<OptionKey extends keyof any, Option>(
// Already set properties.
type?: never;
role?: never;
}>>): React.ReactElement
}>>;
/**
* Generic select component.
*/
export function Select<OptionKey extends keyof any, Option>(
{
className,
value, onChange,
options, renderOption, match,
selectibleMaxCount, multiple,
blurOnSelect, blurWhenMaxCountSelected,
// Properties to pass down.
onKeyDown,
// Already set properties.
type, role,
children,
...props
}: SelectProperties<OptionKey, Option>): React.ReactElement
{
const [search, setSearch] = React.useState("");

View file

@ -1,7 +1,10 @@
.floating.suggestions
{
height: ~"min(90vh, 18em)";
padding: 0.5em 0;
overflow-y: auto;
.suggestion
{
transition: background 0.2s ease;