@koobiq/react-components 0.24.0 → 0.26.0

package/dist/components/ActionsPanel/types.d.ts

@@ -0,0 +1,47 @@
+import type { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import type { DataAttributeProps, ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { TransitionProps } from 'react-transition-group/Transition';
+import type { Key } from '../../index';
+import type { ActionsPanelActionProps, ActionsPanelCounterProps } from './components';
+import type { ActionsPanelMoreActionProps } from './components/ActionsPanelMoreAction';
+export type ActionsPanelActionRenderItem = {
+    /** React element. */
+    element: ReactElement<ActionsPanelActionProps>;
+    /** Index in the `children` list. */
+    index: number;
+    /** Key. */
+    key: Key | null;
+    /** Convenient access to the element's children. */
+    children: ReactNode;
+    /** Optional link target extracted from props. */
+    href?: string;
+    /** Element props shortcut. */
+    props: ActionsPanelActionProps;
+};
+export type ActionsPanelProps = ExtendableComponentPropsWithRef<{
+    /** If `true`, the content panel won't close when the ESC key is pressed. */
+    disableExitOnEscapeKeyDown?: boolean;
+    /** The number of selected items that the ActionsPanel is currently linked to. */
+    selectedItemCount?: number | 'all';
+    /** Optional secondary counter displayed next to `selectedItemCount`. */
+    selectedExtraCount?: number;
+    /** The contents of the collection. */
+    children?: ReactElement<ActionsPanelActionProps> | Array<ReactElement<ActionsPanelActionProps>>;
+    /** Handler that is called when the ActionsPanel clear button is pressed. */
+    onClearSelection?: () => void;
+    /** Handler called when any breadcrumb item is pressed. It returns the item key. */
+    onAction?: (key: Key) => void;
+    /**
+     * The container element in which the component portal will be placed.
+     * @default document.body
+     */
+    portalContainer?: HTMLElement | null;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        transition?: Partial<TransitionProps<HTMLElement>>;
+        container?: ComponentPropsWithRef<'div'> & DataAttributeProps;
+        actions?: ComponentPropsWithRef<'div'> & DataAttributeProps;
+        counter?: ActionsPanelCounterProps;
+        more?: Partial<ActionsPanelMoreActionProps>;
+    };
+}, 'div'>;

package/dist/components/Breadcrumbs/components/BreadcrumbsCollapse/BreadcrumbsCollapse.js

@@ -1,24 +1,26 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Children, isValidElement, cloneElement } from "react";
-import { useHideOverflowItems, mergeProps, isString, isNotNil } from "@koobiq/react-core";
+import { useLocalizedStringFormatter, useHideOverflowItems, mergeProps, isString, isNotNil } from "@koobiq/react-core";
 import { IconEllipsisHorizontal16 } from "@koobiq/react-icons";
 import { Button } from "@koobiq/react-primitives";
 import s from "../../Breadcrumbs.module.css.js";
+import intlMessages from "../../intl.json.js";
 import { clampEllipsisIndex, getSlotIndex } from "./utils.js";
 import { BreadcrumbItem } from "../BreadcrumbItem/BreadcrumbItem.js";
 import { Menu } from "../../../Menu/Menu.js";
 const renderEllipsisDefault = ({
   ellipsisIcon,
   onAction,
-  items
+  items,
+  "aria-label": label
 }) => {
   if (items.length === 0) return null;
   return /* @__PURE__ */ jsx(
     Menu,
     {
       onAction,
-      control: (props) => /* @__PURE__ */ jsx(BreadcrumbItem, { ...props, as: Button, children: ellipsisIcon }),
+      control: (props) => /* @__PURE__ */ jsx(BreadcrumbItem, { "aria-label": label, ...props, as: Button, children: ellipsisIcon }),
       children: items.map((item, index) => /* @__PURE__ */ jsx(
         Menu.Item,
         {
@@ -40,6 +42,7 @@ const BreadcrumbsCollapse = (props) => {
     slotProps,
     children
   } = props;
+  const t = useLocalizedStringFormatter(intlMessages);
   const ellipsisIcon = /* @__PURE__ */ jsx(IconEllipsisHorizontal16, {});
   const elements = Children.toArray(children);
   const { length } = elements;
@@ -77,10 +80,11 @@ const BreadcrumbsCollapse = (props) => {
     if (isEllipsis) {
       const defaultEllipsis = /* @__PURE__ */ jsx(BreadcrumbItem, { as: "span", children: ellipsisIcon });
       const customEllipsis = renderEllipsis?.({
+        onAction,
         ellipsisIcon,
-        ellipsisIndex: slotIndex,
         items: collapsedItems,
-        onAction
+        ellipsisIndex: slotIndex,
+        "aria-label": t.format("show more")
       });
       return /* @__PURE__ */ jsxs(
         "li",

package/dist/components/Breadcrumbs/intl.json.js

@@ -0,0 +1,7 @@
+const intlMessages = {
+  "ru-RU": { "show more": "Показать остальные" },
+  "en-US": { "show more": "Show more" }
+};
+export {
+  intlMessages as default
+};

package/dist/components/Breadcrumbs/types.d.ts

@@ -29,6 +29,8 @@ export type RenderEllipsisParams = {
     ellipsisIndex: number;
     /** Handler called when any breadcrumb item is pressed. It returns the item key. */
     onAction?: (key: Key) => void;
+    /** Defines a string value that labels the current element. */
+    'aria-label'?: string;
 };
 export type BreadcrumbsPropRenderEllipsis = (params: RenderEllipsisParams) => ReactNode;
 export type BreadcrumbsProps = ExtendableComponentPropsWithRef<AriaBreadcrumbsProps & {

package/dist/components/ContenPanel/ContentPanel.d.ts

@@ -1,5 +1,6 @@
-import { type ComponentPropsWithRef, type CSSProperties } from 'react';
-import { DialogBody, DialogFooter, DialogHeader, type DialogProps } from '../Dialog';
+import type { CSSProperties, ComponentPropsWithRef } from 'react';
+import { DialogBody, DialogFooter, DialogHeader } from '../Dialog';
+import type { DialogProps } from '../Dialog';
 declare const ContentPanelComponent: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;
     width?: import("./types").ContentPanelSize | null;

package/dist/components/ContenPanel/ContentPanel.js

@@ -26,23 +26,23 @@ const ContentPanelComponent = forwardRef(
     );
     const {
       defaultWidth: defaultWidthProp,
+      disableExitOnEscapeKeyDown,
       minWidth: minWidthProp,
       maxWidth: maxWidthProp,
-      disableExitOnEscapeKeyDown,
-      onResetResize,
       isResizable = false,
-      width,
-      onResize,
-      onResizeEnd,
+      hideCloseButton,
       onResizeStart,
-      isOpen,
+      onResetResize,
       onOpenChange,
       defaultOpen,
+      onResizeEnd,
+      slotProps,
       className,
-      style,
       children,
-      slotProps,
-      hideCloseButton,
+      onResize,
+      isOpen,
+      width,
+      style,
       ...other
     } = panelProps;
     const {

package/dist/components/Divider/Divider.d.ts

@@ -1,4 +1,14 @@
-import type { ComponentPropsWithRef, ElementType } from 'react';
-import type { DividerBaseProps } from './index';
-export declare const Divider: import("@koobiq/react-core").PolyForwardComponent<"div", DividerBaseProps, ElementType>;
-export type DividerProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof Divider<As>>;
+import type { ElementType } from 'react';
+import type { BaseCollection } from '@koobiq/react-primitives';
+import { CollectionNode } from '@koobiq/react-primitives';
+export declare class DividerNode extends CollectionNode<any> {
+    static readonly type = "separator";
+    filter(collection: BaseCollection<any>, newCollection: BaseCollection<any>): CollectionNode<any> | null;
+}
+export declare const Divider: (props: {
+    className?: string;
+    display?: import("./types").DividerPropDisplay;
+    flexItem?: boolean;
+    disablePaddings?: boolean;
+    as?: ElementType;
+} & Omit<import("@react-aria/separator").SeparatorProps, "elementType"> & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;

package/dist/components/Divider/Divider.js

@@ -1,13 +1,27 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
-import { useSeparator } from "@koobiq/react-primitives";
+import { clsx } from "@koobiq/react-core";
+import { createLeafComponent, CollectionNode, useSeparator } from "@koobiq/react-primitives";
 import s from "./Divider.module.css.js";
-const Divider = polymorphicForwardRef(
-  (props, ref) => {
+const _DividerNode = class _DividerNode extends CollectionNode {
+  filter(collection, newCollection) {
+    const prevItem = newCollection.getItem(this.prevKey);
+    if (prevItem && prevItem.type !== "separator") {
+      const clone = this.clone();
+      newCollection.addDescendants(clone, collection);
+      return clone;
+    }
+    return null;
+  }
+};
+_DividerNode.type = "separator";
+let DividerNode = _DividerNode;
+const Divider = createLeafComponent(
+  DividerNode,
+  function Separator(props, ref) {
     const {
-      as: Tag = "div",
       orientation = "horizontal",
+      as = "div",
       disablePaddings,
       flexItem,
       display,
@@ -17,9 +31,10 @@ const Divider = polymorphicForwardRef(
     const { separatorProps } = useSeparator({
       ...other,
       orientation,
-      elementType: Tag
+      elementType: `${as}`
     });
     const hasPaddings = !disablePaddings;
+    const Tag = as;
     return /* @__PURE__ */ jsx(
       Tag,
       {
@@ -42,7 +57,7 @@ const Divider = polymorphicForwardRef(
     );
   }
 );
-Divider.displayName = "Divider";
 export {
-  Divider
+  Divider,
+  DividerNode
 };

package/dist/components/Divider/types.d.ts

@@ -1,8 +1,8 @@
-import type { ExtendableProps } from '@koobiq/react-core';
+import type { ElementType, HTMLAttributes } from 'react';
 import type { SeparatorProps } from '@koobiq/react-primitives';
 export declare const dividerPropDisplay: readonly ["block", "inline", "inlineBlock"];
 export type DividerPropDisplay = (typeof dividerPropDisplay)[number];
-export type DividerBaseProps = ExtendableProps<{
+export type DividerProps = {
     /** Additional CSS-classes. */
     className?: string;
     /** Set the display for the component. */
@@ -17,4 +17,5 @@ export type DividerBaseProps = ExtendableProps<{
      * If `true`, it disables the default paddings.
      */
     disablePaddings?: boolean;
-}, Omit<SeparatorProps, 'elementType'>>;
+    as?: ElementType;
+} & Omit<SeparatorProps, 'elementType'> & HTMLAttributes<HTMLElement>;

package/dist/components/Navbar/components/NavbarItem.d.ts

@@ -1,6 +1,10 @@
 import type { ReactNode } from 'react';
 import { type LinkBaseProps } from '@koobiq/react-primitives';
 export type NavbarItemProps = {
+    /**
+     * Whether the item is active.
+     */
+    isActive?: boolean;
     /**
      * Whether the item is a menu trigger.
      */

package/dist/components/Navbar/components/NavbarItem.js

@@ -9,7 +9,16 @@ import { useNavbarState } from "../NavbarContext.js";
 import { Tooltip } from "../../Tooltip/Tooltip.js";
 const { listItem, typography } = utilClasses;
 const NavbarItem = polymorphicForwardRef(
-  ({ as, className, isMenu = false, icon, badge, children, ...other }, inRef) => {
+  ({
+    as,
+    className,
+    isActive,
+    isMenu = false,
+    icon,
+    badge,
+    children,
+    ...other
+  }, inRef) => {
     const { isCollapsed } = useNavbarState();
     return /* @__PURE__ */ jsx(
       Tooltip,
@@ -28,6 +37,7 @@ const NavbarItem = polymorphicForwardRef(
               s.item,
               className
             ),
+            "data-selected": isActive || void 0,
             ...mergeProps(props, other),
             ref: mergeRefs(props.ref, inRef),
             children: [

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,5 +1,5 @@
 import type { FormFieldProps, FormFieldLabelProps, FormFieldInputProps, FormFieldErrorProps, FormFieldCaptionProps, FormFieldControlGroupProps } from '../FormField';
-export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/searchfield").AriaSearchFieldProps, "description" | "validationState">, "caption" | "style" | "className" | `data-${string}` | "startAddon" | "endAddon" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isLabelHidden"> & {
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").AriaSearchFieldProps, "description" | "validationState">, "caption" | "style" | "className" | `data-${string}` | "startAddon" | "endAddon" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isLabelHidden"> & {
     className?: string;
     style?: import("react").CSSProperties;
     isLabelHidden?: boolean;

package/dist/components/Select/Select.d.ts

@@ -8,5 +8,9 @@ type CompoundedComponent = typeof SelectComponent & {
     Divider: typeof Divider;
     ItemText: typeof ListItemText;
 };
+/**
+ * @deprecated
+ * This component has been deprecated, please use SelectNext instead.
+ */
 export declare const Select: CompoundedComponent;
 export {};

package/dist/components/SelectNext/Select.d.ts

@@ -0,0 +1,13 @@
+import { Divider } from '../Divider';
+import type { ListItemText } from '../List';
+import { SelectOption, SelectSection } from './components';
+import { type SelectNextComponent } from './index';
+declare const SelectComponent: SelectNextComponent;
+type CompoundedComponent = typeof SelectComponent & {
+    Item: typeof SelectOption;
+    Section: typeof SelectSection;
+    Divider: typeof Divider;
+    ItemText: typeof ListItemText;
+};
+export declare const SelectNext: CompoundedComponent;
+export {};

package/dist/components/SelectNext/Select.js

@@ -0,0 +1,258 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback } from "react";
+import { useDOMRef, useElementSize, mergeProps } from "@koobiq/react-core";
+import { IconChevronDownS16 } from "@koobiq/react-icons";
+import { CollectionBuilder, Collection, useSelectState, removeDataAttributes, useSlottedContext, FormContext, useSelect, FieldErrorContext } from "@koobiq/react-primitives";
+import { PopoverInner } from "../Popover/PopoverInner.js";
+import s from "./Select.module.css.js";
+import { SelectList } from "./components/SelectList/SelectList.js";
+import { TagGroup } from "./components/TagGroup/TagGroup.js";
+import { SelectOption } from "./components/SelectOption/SelectOption.js";
+import { SelectSection } from "./components/SelectSection/SelectSection.js";
+import { useForm } from "../Form/FormContext.js";
+import { FormFieldClearButton } from "../FormField/FormFieldClearButton/FormFieldClearButton.js";
+import { FormField } from "../FormField/FormField.js";
+import { Divider } from "../Divider/Divider.js";
+import { List } from "../List/List.js";
+function SelectInner({
+  state: inState,
+  props,
+  listBoxRef
+}) {
+  const {
+    selectedTagsOverflow = "responsive",
+    renderValue: renderValueProp,
+    "data-testid": testId,
+    defaultInputValue,
+    labelPlacement,
+    onInputChange,
+    selectionMode,
+    defaultFilter,
+    isLabelHidden,
+    isSearchable,
+    errorMessage,
+    placeholder,
+    loadingText,
+    isClearable,
+    noItemsText,
+    inputValue,
+    labelAlign,
+    startAddon,
+    isRequired,
+    onLoadMore,
+    isDisabled,
+    fullWidth,
+    className,
+    isLoading,
+    slotProps,
+    endAddon,
+    caption,
+    onClear,
+    style,
+    label
+  } = props;
+  const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+  const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
+  const clearButtonIsHidden = isDisabled || !inState.selectedItems.length;
+  const handleClear = useCallback(() => {
+    inState.selectionManager.setSelectedKeys(/* @__PURE__ */ new Set());
+    onClear?.();
+  }, [onClear, inState]);
+  const {
+    menuProps,
+    valueProps,
+    triggerProps,
+    descriptionProps,
+    errorMessageProps,
+    labelProps: labelPropsAria,
+    ...validation
+  } = useSelect(
+    removeDataAttributes({
+      ...props,
+      isDisabled,
+      selectionMode,
+      validationBehavior,
+      allowsEmptyCollection: true
+    }),
+    inState,
+    listBoxRef
+  );
+  const { isInvalid } = validation;
+  const { ref: containerRef, width } = useElementSize();
+  const rootProps = mergeProps({
+    "data-testid": testId,
+    "data-invalid": isInvalid || void 0,
+    "data-disabled": isDisabled || void 0,
+    "data-required": isRequired || void 0,
+    className,
+    fullWidth,
+    labelPlacement,
+    labelAlign,
+    style
+  });
+  const listProps = mergeProps(
+    {
+      isLoading,
+      inputValue,
+      onLoadMore,
+      noItemsText,
+      loadingText,
+      isSearchable,
+      defaultFilter,
+      state: inState,
+      onInputChange,
+      className: s.list,
+      defaultInputValue
+    },
+    slotProps?.list,
+    menuProps
+  );
+  const labelProps = mergeProps(
+    { isHidden: isLabelHidden, children: label, isRequired },
+    labelPropsAria,
+    slotProps?.label
+  );
+  const clearButtonProps = mergeProps(
+    {
+      isClearable,
+      onPress: handleClear,
+      className: s.clearButton,
+      isHidden: clearButtonIsHidden
+    },
+    slotProps?.clearButton
+  );
+  const { slotProps: groupSlotProps, ...otherGroup } = slotProps?.group || {};
+  const groupProps = mergeProps(
+    {
+      slotProps: mergeProps(
+        {
+          endAddon: { className: s.addon },
+          startAddon: { className: s.addon }
+        },
+        groupSlotProps
+      ),
+      startAddon,
+      onMouseDown: (e) => {
+        if (e.currentTarget !== e.target || isDisabled) return;
+        e.preventDefault();
+        listBoxRef?.current?.focus();
+        inState.open();
+      },
+      endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+        endAddon,
+        /* @__PURE__ */ jsx(FormFieldClearButton, { ...clearButtonProps }),
+        /* @__PURE__ */ jsx("span", { className: s.chevron, children: /* @__PURE__ */ jsx(IconChevronDownS16, {}) })
+      ] }),
+      isInvalid,
+      isDisabled,
+      ref: containerRef
+    },
+    otherGroup
+  );
+  const controlProps = mergeProps(
+    {
+      ref: listBoxRef,
+      placeholder
+    },
+    valueProps,
+    triggerProps,
+    slotProps?.control
+  );
+  const popoverProps = mergeProps(
+    {
+      offset: 4,
+      state: inState,
+      hideArrow: true,
+      type: "listbox",
+      maxBlockSize: 256,
+      className: s.popover,
+      anchorRef: containerRef,
+      placement: "bottom start",
+      size: Math.max(width, 200)
+    },
+    slotProps?.popover
+  );
+  const captionProps = mergeProps(
+    { children: caption },
+    descriptionProps,
+    slotProps?.caption
+  );
+  const errorProps = mergeProps(
+    { children: errorMessage },
+    errorMessageProps,
+    slotProps?.errorMessage
+  );
+  const renderDefaultValue = (state, states) => {
+    if (!state.selectedItems?.length) return null;
+    if (selectionMode === "multiple")
+      return /* @__PURE__ */ jsx(
+        TagGroup,
+        {
+          state,
+          states,
+          selectedTagsOverflow
+        }
+      );
+    return state.selectedItems[0].textValue;
+  };
+  const renderValue = renderValueProp || renderDefaultValue;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
+      /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
+      /* @__PURE__ */ jsxs("div", { className: s.body, children: [
+        /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Select, { ...controlProps, children: renderValue(inState, {
+          isInvalid,
+          isDisabled: props.isDisabled,
+          isRequired: props.isRequired
+        }) }) }),
+        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
+        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })
+  ] });
+}
+function StandaloneSelect({
+  props: inProps,
+  listBoxRef,
+  collection
+}) {
+  const props = { ...inProps, collection, children: null, items: null };
+  const { isDisabled: formIsDisabled } = useForm();
+  const isDisabled = inProps?.isDisabled ?? formIsDisabled;
+  const state = useSelectState(
+    removeDataAttributes({
+      ...props,
+      isDisabled
+    })
+  );
+  return /* @__PURE__ */ jsx(
+    SelectInner,
+    {
+      state,
+      listBoxRef,
+      props: { ...props, isDisabled }
+    }
+  );
+}
+function SelectRender(props, ref) {
+  const listBoxRef = useDOMRef(ref);
+  return /* @__PURE__ */ jsx(CollectionBuilder, { content: /* @__PURE__ */ jsx(Collection, { ...props }), children: (collection) => /* @__PURE__ */ jsx(
+    StandaloneSelect,
+    {
+      props,
+      collection,
+      listBoxRef
+    }
+  ) });
+}
+const SelectComponent = forwardRef(SelectRender);
+const SelectNext = SelectComponent;
+SelectNext.Item = SelectOption;
+SelectNext.Section = SelectSection;
+SelectNext.Divider = Divider;
+SelectNext.ItemText = List.ItemText;
+export {
+  SelectNext
+};

package/dist/components/SelectNext/Select.module.css.js

@@ -0,0 +1,23 @@
+const addon = "kbq-select-addon-1077d8";
+const chevron = "kbq-select-chevron-5918a1";
+const body = "kbq-select-body-698617";
+const list = "kbq-select-list-51ca7a";
+const popover = "kbq-select-popover-756d4e";
+const clearButton = "kbq-select-clearButton-8498d2";
+const s = {
+  addon,
+  chevron,
+  body,
+  list,
+  popover,
+  clearButton
+};
+export {
+  addon,
+  body,
+  chevron,
+  clearButton,
+  s as default,
+  list,
+  popover
+};

package/dist/components/SelectNext/SelectContext.d.ts

@@ -0,0 +1,2 @@
+import type { ListState } from '@koobiq/react-primitives';
+export declare const SelectContext: import("react").Context<ListState<object> | null>;

package/dist/components/SelectNext/SelectContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const SelectContext = createContext(null);
+export {
+  SelectContext
+};

package/dist/components/SelectNext/components/SelectList/SelectList.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
+import type { SelectState, AriaListBoxProps } from '@koobiq/react-primitives';
+import type { SelectionMode } from '@react-types/select';
+import { type DividerProps } from '../../../Divider';
+import { type SearchInputProps } from '../../../SearchInput';
+export type SelectListProps<T extends object, M extends SelectionMode = 'single'> = {
+    state: SelectState<T, M>;
+    /** The filter function used to determine if a option should be included in the Select list. */
+    defaultFilter?: (textValue: string, inputValue: string) => boolean;
+    /** The value of the Select search input (controlled). */
+    inputValue?: string;
+    /** The default value of the Select search input (uncontrolled). */
+    defaultInputValue?: string;
+    /** Handler that is called when the Select search input value changes. */
+    onInputChange?: (value: string) => void;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** The load more spinner to render when loading additional items. */
+    isLoading?: boolean;
+    /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
+    onLoadMore?: () => void;
+    /** Content to display when no items are available. */
+    noItemsText?: ReactNode;
+    /** Content to display when items are loading. */
+    loadingText?: ReactNode;
+    /** Enables search input for filtering items in the list. */
+    isSearchable?: boolean;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        divider?: DividerProps;
+        root?: ComponentPropsWithRef<'div'>;
+        'search-input'?: SearchInputProps;
+    };
+} & Omit<AriaListBoxProps<T>, 'children'>;
+export declare function SelectList<T extends object, M extends SelectionMode = 'single'>(props: SelectListProps<T, M>): import("react/jsx-runtime").JSX.Element;