Compare commits
2 commits
f196f98317
...
23d0ab147b
Author | SHA1 | Date | |
---|---|---|---|
23d0ab147b | |||
72a3b9b9d2 |
4 changed files with 75 additions and 59 deletions
|
@ -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>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version": "1.3.2",
|
||||
"version": "1.3.3",
|
||||
"name": "@kernelui/core",
|
||||
"description": "Kernel UI Core.",
|
||||
"scripts": {
|
||||
|
|
|
@ -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("");
|
||||
|
||||
|
|
|
@ -1,7 +1,10 @@
|
|||
.floating.suggestions
|
||||
{
|
||||
max-height: ~"min(90vh, 18em)";
|
||||
padding: 0.5em 0;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
.suggestion
|
||||
{
|
||||
transition: background 0.2s ease;
|
||||
|
|
Loading…
Reference in a new issue