@koobiq/react-components 0.24.0 → 0.25.0

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

@@ -0,0 +1 @@
+export * from './SelectList';

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

@@ -0,0 +1,37 @@
+import type { Key, ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type SelectOptionProps<T = object> = ExtendableComponentPropsWithRef<{
+    className?: string;
+    /** The unique id of the item. */
+    id?: Key;
+    /** The object value that this item represents. When using dynamic collections, this is set automatically. */
+    value?: T;
+    /** A string representation of the item's contents, used for features like typeahead. */
+    textValue?: string;
+    /** An accessibility label for this item. */
+    'aria-label'?: string;
+    /** Whether the item is disabled. */
+    isDisabled?: boolean;
+    /**
+     * Handler that is called when a user performs an action on the item. The exact user event depends on
+     * the collection's `selectionBehavior` prop and the interaction modality.
+     */
+    onAction?: () => void;
+}, 'a'>;
+export declare const SelectOption: <T extends object>(props: Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "value" | "className" | "id" | "aria-label" | "isDisabled" | "textValue" | "onAction"> & {
+    className?: string;
+    /** The unique id of the item. */
+    id?: Key;
+    /** The object value that this item represents. When using dynamic collections, this is set automatically. */
+    value?: object | undefined;
+    /** A string representation of the item's contents, used for features like typeahead. */
+    textValue?: string;
+    /** An accessibility label for this item. */
+    'aria-label'?: string;
+    /** Whether the item is disabled. */
+    isDisabled?: boolean;
+    /**
+     * Handler that is called when a user performs an action on the item. The exact user event depends on
+     * the collection's `selectionBehavior` prop and the interaction modality.
+     */
+    onAction?: () => void;
+} & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;

package/dist/components/SelectNext/components/SelectOption/SelectOption.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useContext } from "react";
+import { useMultiRef, useHover, usePress, filterDOMProps, clsx, mergeProps } from "@koobiq/react-core";
+import { createLeafComponent, ItemNode, useOption } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import { SelectContext } from "../../SelectContext.js";
+import { Checkbox } from "../../../Checkbox/Checkbox.js";
+const textVariant = utilClasses.typography;
+const { listItem } = utilClasses;
+const SelectOption = createLeafComponent(ItemNode, function SelectItem(props, forwardedRef, item) {
+  const { href, className, style } = props;
+  const domRef = useRef(null);
+  const ref = useMultiRef([forwardedRef, domRef]);
+  const state = useContext(SelectContext);
+  const { optionProps, isSelected, isDisabled, isFocusVisible } = useOption(
+    { key: item.key },
+    state,
+    domRef
+  );
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const { isPressed, pressProps } = usePress({ isDisabled });
+  const Tag = href ? "a" : "li";
+  const DOMProps = filterDOMProps(props, { global: true });
+  delete DOMProps.id;
+  delete DOMProps.onClick;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref,
+      style,
+      "data-hovered": isHovered || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-selected": isSelected || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
+      ...mergeProps(optionProps, hoverProps, pressProps),
+      className: clsx(listItem, textVariant["text-normal"], className),
+      children: [
+        state.selectionManager.selectionMode === "multiple" && /* @__PURE__ */ jsx(Checkbox, { isDisabled, isSelected, isReadOnly: true }),
+        item.rendered
+      ]
+    }
+  );
+});
+export {
+  SelectOption
+};

package/dist/components/SelectNext/components/SelectOption/index.d.ts

@@ -0,0 +1 @@
+export * from './SelectOption';

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

@@ -0,0 +1,9 @@
+import type { Key, SectionProps, ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type SelectSectionProps<T> = ExtendableComponentPropsWithRef<SectionProps<T> & {
+    /** The unique id of the item. */
+    id?: Key;
+}, 'section'>;
+export declare const SelectSection: <T extends object>(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "id" | keyof SectionProps<T_1>> & SectionProps<T> & {
+    /** The unique id of the item. */
+    id?: Key;
+} & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;

package/dist/components/SelectNext/components/SelectSection/SelectSection.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { filterDOMProps, mergeProps } from "@koobiq/react-core";
+import { createBranchComponent, SectionNode, useListBoxSection } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import { SelectContext } from "../../SelectContext.js";
+import { CollectionBranch } from "../../utils.js";
+import { Typography } from "../../../Typography/Typography.js";
+const { listHeading } = utilClasses;
+function SelectSectionInner(props, ref, section) {
+  const state = useContext(SelectContext);
+  const { className, style } = props;
+  const { headingProps, groupProps } = useListBoxSection({
+    heading: section.rendered,
+    "aria-label": props["aria-label"] ?? void 0
+  });
+  const DOMProps = filterDOMProps(props, { global: true });
+  delete DOMProps.id;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ...mergeProps(DOMProps, groupProps),
+      className,
+      style,
+      ref,
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            as: "span",
+            display: "block",
+            variant: "caps-compact-strong",
+            color: "contrast-secondary",
+            className: listHeading,
+            ...headingProps,
+            children: props.title
+          }
+        ),
+        /* @__PURE__ */ jsx(CollectionBranch, { collection: state.collection, parent: section })
+      ]
+    }
+  );
+}
+const SelectSection = createBranchComponent(
+  SectionNode,
+  SelectSectionInner
+);
+export {
+  SelectSection
+};

package/dist/components/SelectNext/components/SelectSection/index.d.ts

@@ -0,0 +1 @@
+export * from './SelectSection';

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

@@ -0,0 +1,18 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { TagGroupPropVariant } from '../../../TagGroup';
+type TagProps = ExtendableComponentPropsWithRef<{
+    /**
+     * The variant to use.
+     * @default 'theme-fade'
+     */
+    variant?: TagGroupPropVariant;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    icon?: ReactNode;
+    isDisabled?: boolean;
+    onRemove?: () => void;
+}, 'div'>;
+export declare const Tag: import("react").ForwardRefExoticComponent<Omit<TagProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/SelectNext/components/Tag/Tag.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useLocalizedStringFormatter, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { IconXmarkS16 } from "@koobiq/react-icons";
+import { utilClasses } from "../../../../styles/utility.js";
+import s from "../../../TagGroup/components/Tag/Tag.module.css.js";
+import intlMessages from "./intl.json.js";
+import { matchVariantToCloseButton } from "./utils.js";
+import { IconButton } from "../../../IconButton/IconButton.js";
+const textNormalMedium = utilClasses.typography["text-normal-medium"];
+const Tag = forwardRef((props, ref) => {
+  const {
+    variant = "theme-fade",
+    icon,
+    className,
+    style,
+    isDisabled,
+    children,
+    onRemove,
+    ...other
+  } = props;
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const rootProps = mergeProps({
+    className: clsx(
+      s.base,
+      s[variant],
+      isDisabled && s.disabled,
+      textNormalMedium,
+      className
+    ),
+    ...other,
+    style
+  });
+  const removeButtonProps = {
+    isCompact: true,
+    isDisabled,
+    className: s.cancelIcon,
+    variant: matchVariantToCloseButton[variant],
+    "aria-label": stringFormatter.format("remove")
+  };
+  const contentProps = mergeProps({
+    className: s.content
+  });
+  const iconProps = mergeProps({
+    className: s.icon
+  });
+  return /* @__PURE__ */ jsxs("div", { ref, ...rootProps, children: [
+    isNotNil(icon) && /* @__PURE__ */ jsx("span", { ...iconProps, children: icon }),
+    isNotNil(children) && /* @__PURE__ */ jsx("span", { ...contentProps, children }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        as: "div",
+        size: "l",
+        ...removeButtonProps,
+        tabIndex: void 0,
+        onPress: onRemove,
+        children: /* @__PURE__ */ jsx(IconXmarkS16, {})
+      }
+    )
+  ] });
+});
+Tag.displayName = "SelectTag";
+export {
+  Tag
+};

package/dist/components/SelectNext/components/Tag/index.d.ts

@@ -0,0 +1 @@
+export * from './Tag';

package/dist/components/SelectNext/components/Tag/intl.json.js

@@ -0,0 +1,7 @@
+const intlMessages = {
+  "ru-RU": { "remove": "Удалить" },
+  "en-US": { "remove": "Remove" }
+};
+export {
+  intlMessages as default
+};

package/dist/components/SelectNext/components/Tag/utils.d.ts

@@ -0,0 +1,3 @@
+import type { IconButtonPropVariant } from '../../../IconButton';
+import type { TagGroupPropVariant } from '../../../TagGroup';
+export declare const matchVariantToCloseButton: Record<TagGroupPropVariant, IconButtonPropVariant>;

package/dist/components/SelectNext/components/Tag/utils.js

@@ -0,0 +1,9 @@
+const matchVariantToCloseButton = {
+  "theme-fade": "theme",
+  "contrast-fade": "fade-contrast",
+  "error-fade": "error",
+  "warning-fade": "warning"
+};
+export {
+  matchVariantToCloseButton
+};

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

@@ -0,0 +1,13 @@
+import type { SelectState } from '@koobiq/react-primitives';
+import type { SelectionMode } from '@react-types/select';
+import type { SelectNextPropSelectedTagsOverflow } from '../../types';
+export type TagGroupProps<T extends object, M extends SelectionMode = 'single'> = {
+    state: SelectState<T, M>;
+    states: {
+        isInvalid?: boolean;
+        isDisabled?: boolean;
+        isRequired?: boolean;
+    };
+    selectedTagsOverflow?: SelectNextPropSelectedTagsOverflow;
+};
+export declare function TagGroup<T extends object, M extends SelectionMode = 'single'>({ selectedTagsOverflow, ...rest }: TagGroupProps<T, M>): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SelectNext/components/TagGroup/TagGroup.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { logger } from "@koobiq/logger";
+import { TagGroupMultiline } from "./TagGroupMultiline.js";
+import { TagGroupResponsive } from "./TagGroupResponsive.js";
+function assertNever(x) {
+  logger.error(`Unhandled selectedTagsOverflow variant: ${x}`);
+  return null;
+}
+function TagGroup({
+  selectedTagsOverflow = "responsive",
+  ...rest
+}) {
+  switch (selectedTagsOverflow) {
+    case "responsive":
+      return /* @__PURE__ */ jsx(TagGroupResponsive, { ...rest });
+    case "multiline":
+      return /* @__PURE__ */ jsx(TagGroupMultiline, { ...rest });
+    default:
+      return assertNever(selectedTagsOverflow);
+  }
+}
+export {
+  TagGroup
+};

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

@@ -0,0 +1,20 @@
+const container = "kbq-taggroup-container-5d455a";
+const hasStartAddon = "kbq-taggroup-hasStartAddon-eb7d88";
+const base = "kbq-taggroup-b97495";
+const tag = "kbq-taggroup-tag-262753";
+const more = "kbq-taggroup-more-db5a34";
+const s = {
+  container,
+  hasStartAddon,
+  base,
+  tag,
+  more
+};
+export {
+  base,
+  container,
+  s as default,
+  hasStartAddon,
+  more,
+  tag
+};

package/dist/components/SelectNext/components/TagGroup/TagGroupMultiline.d.ts

@@ -0,0 +1,3 @@
+import type { SelectionMode } from '@react-types/select';
+import type { TagGroupProps } from './TagGroup';
+export declare function TagGroupMultiline<T extends object, M extends SelectionMode = 'single'>({ state, states }: TagGroupProps<T, M>): import("react/jsx-runtime").JSX.Element;

package/dist/components/SelectNext/components/TagGroup/TagGroupMultiline.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { useLocalizedStringFormatter, clsx } from "@koobiq/react-core";
+import intlMessages from "../../intl.js";
+import s from "./TagGroup.module.css.js";
+import { Tag } from "../Tag/Tag.js";
+import { useFormFieldControlGroup } from "../../../FormField/FormFieldControlGroup/FormFieldControlGroupContext.js";
+function TagGroupMultiline({ state, states }) {
+  const { isDisabled, isInvalid } = states;
+  const t = useLocalizedStringFormatter(intlMessages);
+  const { hasStartAddon } = useFormFieldControlGroup();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(s.container, hasStartAddon && s.hasStartAddon),
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: s.base,
+          "data-limit-tags": "multiline",
+          "aria-label": t.format("selected items"),
+          children: state.selectedItems?.map((item) => /* @__PURE__ */ jsx(
+            Tag,
+            {
+              className: s.tag,
+              isDisabled,
+              variant: isInvalid ? "error-fade" : "contrast-fade",
+              onRemove: () => {
+                if (state.selectionManager.isSelected(item.key)) {
+                  state.selectionManager.toggleSelection(item.key);
+                }
+              },
+              children: item.textValue
+            },
+            item.key
+          ))
+        }
+      )
+    }
+  );
+}
+export {
+  TagGroupMultiline
+};

package/dist/components/SelectNext/components/TagGroup/TagGroupResponsive.d.ts

@@ -0,0 +1,3 @@
+import type { SelectionMode } from '@react-types/select';
+import type { TagGroupProps } from './TagGroup';
+export declare function TagGroupResponsive<T extends object, M extends SelectionMode = 'single'>({ state, states }: TagGroupProps<T, M>): import("react/jsx-runtime").JSX.Element;

package/dist/components/SelectNext/components/TagGroup/TagGroupResponsive.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useHideOverflowItems, useLocalizedStringFormatter, clsx } from "@koobiq/react-core";
+import intlMessages from "../../intl.js";
+import s from "./TagGroup.module.css.js";
+import { getHiddenCount } from "./utils.js";
+import { useFormFieldControlGroup } from "../../../FormField/FormFieldControlGroup/FormFieldControlGroupContext.js";
+import { Tag } from "../Tag/Tag.js";
+function TagGroupResponsive({ state, states }) {
+  const { isDisabled, isInvalid } = states;
+  const length = state?.selectedItems?.length || 0;
+  const { parentRef, visibleMap, itemsRefs } = useHideOverflowItems({
+    length: length + 1,
+    pinnedIndex: 0
+  });
+  const hiddenCount = getHiddenCount(visibleMap);
+  const t = useLocalizedStringFormatter(intlMessages);
+  const { hasStartAddon } = useFormFieldControlGroup();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(s.container, hasStartAddon && s.hasStartAddon),
+      ref: parentRef,
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: s.base,
+            "data-limit-tags": "responsive",
+            "aria-label": t.format("selected items"),
+            children: state.selectedItems?.map((item, i) => /* @__PURE__ */ jsx(
+              Tag,
+              {
+                className: s.tag,
+                ref: itemsRefs[i],
+                isDisabled,
+                "aria-hidden": !visibleMap[i] || void 0,
+                variant: isInvalid ? "error-fade" : "contrast-fade",
+                onRemove: () => {
+                  if (state.selectionManager.isSelected(item.key)) {
+                    state.selectionManager.toggleSelection(item.key);
+                  }
+                },
+                children: item.textValue
+              },
+              item.key
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: s.more,
+            ref: itemsRefs[itemsRefs.length - 1],
+            "aria-hidden": !visibleMap[length] || void 0,
+            children: t.format("more", { count: hiddenCount })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  TagGroupResponsive
+};

package/dist/components/SelectNext/components/TagGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './TagGroup';

package/dist/components/SelectNext/components/TagGroup/utils.d.ts

@@ -0,0 +1 @@
+export declare const getHiddenCount: (map: boolean[]) => number;

package/dist/components/SelectNext/components/TagGroup/utils.js

@@ -0,0 +1,4 @@
+const getHiddenCount = (map) => map.filter((item) => !item).length;
+export {
+  getHiddenCount
+};

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

@@ -0,0 +1,5 @@
+export * from './SelectList';
+export * from './Tag';
+export * from './SelectOption';
+export * from './SelectSection';
+export * from './TagGroup';

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

@@ -0,0 +1,2 @@
+export * from './Select';
+export * from './types';

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

@@ -0,0 +1,2 @@
+declare const _default: Record<string, Record<string, string>>;
+export default _default;

package/dist/components/SelectNext/intl.js

@@ -0,0 +1,21 @@
+const intlMessages = {
+  "ru-RU": {
+    "empty items": "Нет вариантов выбора",
+    "nothing found": "Ничего не найдено",
+    loading: "Загрузка…",
+    "selected items": "Выбранные элементы",
+    search: "Поиск",
+    more: ({ count }) => `+${count}`
+  },
+  "en-US": {
+    "empty items": "No options available",
+    "nothing found": "Nothing found",
+    "selected items": "Selected items",
+    loading: "Loading…",
+    search: "Search",
+    more: ({ count }) => `+${count}`
+  }
+};
+export {
+  intlMessages as default
+};

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

@@ -0,0 +1,99 @@
+import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { AriaSelectProps, SelectState } from '@koobiq/react-primitives';
+import type { SelectionMode } from '@react-types/select';
+import type { FormFieldLabelProps, FormFieldErrorProps, FormFieldSelectProps, FormFieldCaptionProps, FormFieldPropLabelAlign, FormFieldControlGroupProps, FormFieldPropLabelPlacement } from '../FormField';
+import type { IconButtonProps } from '../IconButton';
+import type { PopoverProps } from '../Popover';
+import type { SearchInputProps } from '../SearchInput';
+import type { SelectListProps } from './components';
+export declare const selectNextPropSelectedTagsOverflow: readonly ["multiline", "responsive"];
+export type SelectNextPropSelectedTagsOverflow = (typeof selectNextPropSelectedTagsOverflow)[number];
+export declare const selectNextPropLabelPlacement: readonly ["top", "side"];
+export type SelectNextPropLabelPlacement = FormFieldPropLabelPlacement;
+export declare const selectNextPropLabelAlign: readonly ["start", "end"];
+export type SelectNextPropLabelAlign = FormFieldPropLabelAlign;
+export type SelectNextProps<T extends object, M extends SelectionMode = 'single'> = ExtendableProps<{
+    /**
+     * Defines how selected tags are displayed when they exceed the available space.
+     *
+     *- `"multiline"` — tags wrap to multiple lines.
+     *- `"responsive"` — tags collapse into a summary (e.g., "3 more").
+     * @default 'responsive'
+     */
+    selectedTagsOverflow?: SelectNextPropSelectedTagsOverflow;
+    /** Handler that is called when the clear button is clicked. */
+    onClear?: () => void;
+    /** Sets the CSS [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. */
+    className?: string;
+    /** Whether the field can be emptied. */
+    isClearable?: boolean;
+    /** Addon placed before the children. */
+    startAddon?: ReactNode;
+    /** Addon placed after the children. */
+    endAddon?: ReactNode;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     */
+    isLabelHidden?: boolean;
+    /**
+     * The label's overall position relative to the element it is labeling.
+     * @default 'top'
+     */
+    labelPlacement?: SelectNextPropLabelPlacement;
+    /**
+     * The label's horizontal alignment relative to the element it is labeling.
+     * @default 'start'
+     */
+    labelAlign?: SelectNextPropLabelAlign;
+    /** The helper text content. */
+    caption?: ReactNode;
+    /**
+     * If true, the input will take up the full width of its container.
+     */
+    fullWidth?: boolean;
+    /** 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;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Ref to the control */
+    ref?: Ref<HTMLDivElement>;
+    /** A render function for displaying the selected value. */
+    renderValue?: (state: SelectState<T, M>, states: {
+        isInvalid?: boolean;
+        isDisabled?: boolean;
+        isRequired?: boolean;
+    }) => ReactNode;
+    /** 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 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;
+    /** The filter function used to determine if an option should be included in the Select list. */
+    defaultFilter?: (textValue: string, inputValue: string) => boolean;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        popover?: PopoverProps;
+        label?: FormFieldLabelProps;
+        clearButton?: IconButtonProps;
+        control?: FormFieldSelectProps;
+        caption?: FormFieldCaptionProps;
+        group?: FormFieldControlGroupProps;
+        errorMessage?: FormFieldErrorProps;
+        list?: Omit<SelectListProps<T, M>, 'state'>;
+        'search-input'?: SearchInputProps;
+    };
+}, Omit<AriaSelectProps<T, M>, 'description' | 'validationState' | 'selectedKey' | 'onSelectionChange' | 'defaultSelectedKey'>>;
+export type SelectNextComponent = <T extends object, M extends SelectionMode = 'single'>(props: SelectNextProps<T, M>) => ReactElement | null;
+export type SelectNextRef = ComponentRef<'div'>;

package/dist/components/SelectNext/types.js

@@ -0,0 +1,12 @@
+import { formFieldPropLabelPlacement, formFieldPropLabelAlign } from "../FormField/types.js";
+const selectNextPropSelectedTagsOverflow = [
+  "multiline",
+  "responsive"
+];
+const selectNextPropLabelPlacement = formFieldPropLabelPlacement;
+const selectNextPropLabelAlign = formFieldPropLabelAlign;
+export {
+  selectNextPropLabelAlign,
+  selectNextPropLabelPlacement,
+  selectNextPropSelectedTagsOverflow
+};

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

@@ -0,0 +1,9 @@
+import type { Collection, Node } from '@react-types/shared';
+export declare function useCollectionRender<T>(collection: Collection<Node<T>>, parent: Node<T> | null): import("react").ReactNode;
+export declare function CollectionRoot<T>({ collection, }: {
+    collection: Collection<Node<T>>;
+}): import("react").ReactNode;
+export declare function CollectionBranch<T>({ collection, parent, }: {
+    collection: Collection<Node<T>>;
+    parent: Node<T>;
+}): import("react").ReactNode;

package/dist/components/SelectNext/utils.js

@@ -0,0 +1,26 @@
+import { useCachedChildren } from "@koobiq/react-primitives";
+function useCollectionRender(collection, parent) {
+  return useCachedChildren({
+    items: parent ? collection.getChildren(parent.key) : collection,
+    dependencies: [],
+    children(node) {
+      return node.render(node);
+    }
+  });
+}
+function CollectionRoot({
+  collection
+}) {
+  return useCollectionRender(collection, null);
+}
+function CollectionBranch({
+  collection,
+  parent
+}) {
+  return useCollectionRender(collection, parent);
+}
+export {
+  CollectionBranch,
+  CollectionRoot,
+  useCollectionRender
+};