@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
71 lines (70 loc) • 3.19 kB
TypeScript
import { default as React } from 'react';
import { ComboboxRootProps } from '@ark-ui/react';
import { RecipeVariantProps } from '../../../styled-system/css';
export declare const SearchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "input" | "combobox" | "control" | "comboboxItem" | "iconBox" | "clearTrigger", {
size: {
medium: {
iconBox: {
w: "40px";
};
control: {
height: number;
gap: "sd.system.dimension.spacing.extraSmall";
textStyle: "sd.system.typography.body.medium_compact";
paddingTop: "sd.system.dimension.spacing.small";
paddingRight: "sd.system.dimension.spacing.extraSmall";
paddingBottom: "sd.system.dimension.spacing.small";
paddingLeft: "sd.system.dimension.spacing.twoExtraSmall";
};
comboboxItem: {
paddingRight: "sd.system.dimension.spacing.medium";
paddingLeft: "sd.system.dimension.spacing.medium";
paddingBottom: "sd.system.dimension.spacing.extraSmall";
paddingTop: "sd.system.dimension.spacing.extraSmall";
};
};
small: {
iconBox: {
w: "20px";
};
control: {
height: number;
gap: "sd.system.dimension.spacing.twoExtraSmall";
textStyle: "sd.system.typography.body.small_compact";
paddingTop: "sd.system.dimension.spacing.twoExtraSmall";
paddingLeft: "sd.system.dimension.spacing.extraSmall";
paddingRight: "sd.system.dimension.spacing.extraSmall";
paddingBottom: "sd.system.dimension.spacing.twoExtraSmall";
scrollPaddingLeft: "sd.system.dimension.spacing.twoExtraSmall";
};
comboboxItem: {
gap: "sd.system.dimension.spacing.twoExtraSmall";
paddingTop: "sd.system.dimension.spacing.extraSmall";
paddingRight: "sd.system.dimension.spacing.extraSmall";
paddingBottom: "sd.system.dimension.spacing.extraSmall";
paddingLeft: "sd.system.dimension.spacing.extraSmall";
};
};
};
}>;
type SearchStyleProps = ComboboxRootProps<string> & RecipeVariantProps<typeof SearchStyle> & {
items?: string[];
/**
* Portalを使用するかどうか
* - `true` (デフォルト): body直下にポータルする。ModalDialog/Drawer内にある場合は自動的にそのコンテンツ内にポータルされる
* - `false`: ポータルを使用せず、その場にレンダリングする
* @default true
*/
portalled?: boolean;
/**
* 候補リストにない値（フリーテキスト）での検索を許可するかどうか
* @default true
*/
allowCustomValue?: boolean;
/**
* 検索実行時のコールバック（Enterキー押下時・候補選択時）
*/
onSearch?: (value: string) => void;
};
export declare const Search: React.FC<SearchStyleProps>;
export {};