@bento/listbox 0.2.1 → 0.2.2

package/dist/index.d.ts

@@ -1,264 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Slots } from '@bento/slots';
-import { LinkDOMProps, HoverEvents, Key } from '@react-types/shared';
-import { SelectionBehavior, ListState, Orientation } from 'react-stately';
-import { AriaListBoxProps } from '@react-types/listbox';
-export { Collection } from '@react-aria/collections';
-
-/**
- * Props for the Header component.
- * @interface HeaderProps
- */
-interface HeaderProps extends Slots, React.ComponentProps<'header'> {
-    /**
-     * The children of the header.
-     */
-    readonly children?: React.ReactNode;
-}
-/**
- * Context value structure for Header components.
- * Extends HTML attributes to support all standard header element properties.
- * @interface HeaderContextValue
- */
-interface HeaderContextValue extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * Reference to the header element for forwarding.
-     */
-    readonly ref?: React.RefObject<HTMLDivElement>;
-}
-/**
- * React context for providing header-related attributes and refs to Header components.
- * Used internally by ListBoxSection to pass heading props to Header elements.
- * @public
- */
-declare const HeaderContext: React.Context<HeaderContextValue>;
-/**
- * A Header component for section headings within a ListBox.
- * Provides semantic header structure with proper accessibility attributes
- * and integrates with React Aria's collection system for automatic handling.
- *
- * This is the main public interface for creating headers in ListBox sections.
- * It automatically receives heading props from the parent ListBoxSection via HeaderContext.
- *
- * @component
- * @example
- * ```tsx
- * <ListBoxSection>
- *   <Header>Fruits</Header>
- *   <ListBoxItem>Apple</ListBoxItem>
- *   <ListBoxItem>Banana</ListBoxItem>
- * </ListBoxSection>
- * ```
- * @public
- */
-declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
-
-/**
- * Render props provided to ListBoxItem render functions.
- * @interface ListBoxItemRenderProps
- */
-interface ListBoxItemRenderProps {
-    /**
-     * Whether the item is currently hovered.
-     * @selector [data-hovered]
-     */
-    readonly isHovered: boolean;
-    /**
-     * Whether the item is currently pressed.
-     * @selector [data-pressed]
-     */
-    readonly isPressed: boolean;
-    /**
-     * Whether the item is currently selected.
-     * @selector [data-selected]
-     */
-    readonly isSelected: boolean;
-    /**
-     * Whether the item is currently focused.
-     * @selector [data-focused]
-     */
-    readonly isFocused: boolean;
-    /**
-     * Whether the item is currently keyboard focused.
-     * @selector [data-focus-visible]
-     */
-    readonly isFocusVisible: boolean;
-    /**
-     * Whether the item is disabled.
-     * @selector [data-disabled]
-     */
-    readonly isDisabled: boolean;
-    /**
-     * The type of selection that is allowed in the collection.
-     * @selector [data-selection-mode="none | single | multiple"]
-     */
-    readonly selectionMode: 'none' | 'single' | 'multiple';
-    /**
-     * The selection behavior for the collection.
-     * @selector [data-selection-behavior="toggle | replace"]
-     */
-    readonly selectionBehavior: 'toggle' | 'replace';
-}
-/**
- * Props for the ListBoxItem component.
- * @interface ListBoxItemProps
- * @template T The type of the item value
- */
-interface ListBoxItemProps<T = object> extends LinkDOMProps, HoverEvents, Omit<React.HTMLAttributes<HTMLElement>, keyof LinkDOMProps | keyof HoverEvents | 'id' | 'children'> {
-    /** The unique id of the item. If not provided, React Aria will auto-generate one. */
-    readonly id?: Key;
-    /** The object value that this item represents. When using dynamic collections, this is set automatically. */
-    readonly value?: T;
-    /** A string representation of the item's contents, used for features like typeahead. If not provided, React Aria will derive it from children automatically. */
-    readonly textValue?: string;
-    /**
-     * 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.
-     */
-    readonly onAction?: () => void;
-    /** The contents of the item. Can be a render function that receives render props. */
-    readonly children?: ReactNode | ((values: ListBoxItemRenderProps) => ReactNode);
-    /**
-     * A slot name for the component. Used by Bento's slot system.
-     */
-    readonly slot?: string;
-    /** Whether the item is disabled. */
-    readonly isDisabled?: boolean;
-}
-/**
- * A single item within a ListBox component.
- * Handles user interactions, accessibility, and state management for individual options.
- *
- * @component
- * @template T The type of the item value
- * @example
- * ```tsx
- * <ListBoxItem>Simple option</ListBoxItem>
- * ```
- * @public
- */
-declare const ListBoxItem: <T extends object>(props: ListBoxItemProps<T> & React.RefAttributes<T>) => React.ReactElement | null;
-
-/**
- * Render props provided to ListBox render functions and empty state renderers.
- * @interface ListBoxRenderProps
- */
-interface ListBoxRenderProps {
-    /**
-     * Whether the listbox has no items and should display its empty state.
-     * @selector [data-empty]
-     */
-    readonly isEmpty: boolean;
-    /**
-     * Whether the listbox is currently focused.
-     * @selector [data-focused]
-     */
-    readonly isFocused: boolean;
-    /**
-     * Whether the listbox is currently keyboard focused.
-     * @selector [data-focus-visible]
-     */
-    readonly isFocusVisible: boolean;
-    /**
-     * Whether the listbox is currently the active drop target.
-     * @selector [data-drop-target]
-     */
-    readonly isDropTarget: boolean;
-    /**
-     * Whether the items are arranged in a stack or grid.
-     * @selector [data-layout="stack | grid"]
-     */
-    readonly layout?: 'stack' | 'grid';
-    /**
-     * State of the listbox.
-     */
-    readonly state: ListState<unknown>;
-    /**
-     * The items array when using dynamic collections.
-     */
-    readonly items?: Iterable<unknown>;
-}
-/**
- * Props for the ListBox component.
- * @interface ListBoxProps
- * @template T The type of items in the collection
- */
-interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'label' | 'children'>, Omit<React.ComponentProps<'div'>, keyof AriaListBoxProps<T> | 'children'>, Slots {
-    /**
-     * How multiple selection should behave in the collection.
-     */
-    readonly selectionBehavior?: SelectionBehavior;
-    /**
-     * Provides content to display when there are no items in the list.
-     */
-    readonly renderEmptyState?: (props: ListBoxRenderProps) => React.ReactNode;
-    /**
-     * Whether the items are arranged in a stack layout.
-     * @default 'stack'
-     */
-    readonly layout?: 'stack';
-    /**
-     * The primary orientation of the items. Usually this is the direction that the collection scrolls.
-     * @default 'vertical'
-     */
-    readonly orientation?: Orientation;
-    /**
-     * Static children or render function for the ListBox.
-     * When items prop is provided, children receives individual items for React Aria compatibility.
-     * When no items prop is provided, children receives Bento render props { isEmpty, isFocused, state, etc. }.
-     */
-    readonly children?: React.ReactNode | ((item: T) => React.ReactNode) | ((props: ListBoxRenderProps) => React.ReactNode);
-}
-/**
- * A complete ListBox component providing accessible selection lists with keyboard navigation.
- * Supports both static children and dynamic collections, with single/multiple selection modes.
- * Built on React Aria with full ARIA compliance and keyboard accessibility.
- *
- * @component
- * @example
- * ```tsx
- * <ListBox aria-label="Fruits" selectionMode="single">
- *   <ListBoxItem id="apple" textValue="Apple">Apple</ListBoxItem>
- *   <ListBoxItem id="banana" textValue="Banana">Banana</ListBoxItem>
- * </ListBox>
- * ```
- * @public
- */
-declare const ListBox: React.MemoExoticComponent<React.ComponentType<ListBoxProps<unknown> & Slots>>;
-
-/**
- * Props for the ListBoxSection component.
- * @interface ListBoxSectionProps
- */
-interface ListBoxSectionProps extends Omit<React.ComponentProps<'section'>, 'title'> {
-    /**
-     * A slot name for the component. Used by Bento's slot system.
-     */
-    readonly slot?: string;
-    /**
-     * The title of the section.
-     */
-    readonly title?: React.ReactNode;
-    /**
-     * The children of the section.
-     */
-    readonly children?: React.ReactNode;
-}
-/**
- * A section component for organizing related items within a ListBox.
- *
- * @component
- * @example
- * ```tsx
- * <ListBoxSection title="Fruits">
- *   <ListBoxItem>Apple</ListBoxItem>
- *   <ListBoxItem>Banana</ListBoxItem>
- * </ListBoxSection>
- * ```
- * @public
- */
-declare const ListBoxSection: <_T extends object>(props: ListBoxSectionProps & {
-    children?: React.ReactNode;
-}) => React.ReactElement;
-
-export { Header, HeaderContext, type HeaderProps, ListBox, ListBoxItem, type ListBoxItemProps, type ListBoxItemRenderProps, type ListBoxProps, type ListBoxRenderProps, ListBoxSection, type ListBoxSectionProps };

package/dist/index.js

@@ -1,367 +0,0 @@
-import React4, { createContext, useContext, useRef, useMemo, useEffect } from 'react';
-import { createLeafComponent, createBranchComponent, CollectionBuilder, Collection } from '@react-aria/collections';
-export { Collection } from '@react-aria/collections';
-import { useProps } from '@bento/use-props';
-import { withSlots } from '@bento/slots';
-import { useListBoxSection, mergeProps, useOption, useHover, useLocale, useCollator, useListBox, useFocusRing, FocusScope, ListKeyboardDelegate } from 'react-aria';
-import { useDataAttributes } from '@bento/use-data-attributes';
-import { useListState } from 'react-stately';
-import { CollectionRendererContext } from 'react-aria-components';
-
-// src/header.tsx
-var HeaderContext = createContext({});
-var BentoHeaderImpl = withSlots(
-  "BentoHeader",
-  function BentoHeader(props, ref) {
-    const { props: processedProps, apply } = useProps(props);
-    const contextProps = useContext(HeaderContext);
-    const appliedUserProps = apply(processedProps);
-    const composed = {
-      ...contextProps,
-      ...appliedUserProps
-      // User props take precedence over context
-    };
-    return /* @__PURE__ */ React4.createElement("header", { ...composed, ref: contextProps.ref || ref }, processedProps.children);
-  }
-);
-function HeaderWrapper(props, ref) {
-  return /* @__PURE__ */ React4.createElement(BentoHeaderImpl, { ...props, ref });
-}
-var HeaderBase = createLeafComponent("header", HeaderWrapper);
-var Header = HeaderBase;
-var BentoListBoxSectionImpl = withSlots("BentoListBoxSection", function BentoListBoxSectionImpl2({ __node, children, title: titleProp, ...rest }, ref) {
-  const { props, apply } = useProps(rest);
-  const data = useDataAttributes({ level: __node?.level });
-  const headingRef = useRef(null);
-  const title = titleProp ?? props.title ?? __node?.rendered;
-  const { groupProps, headingProps } = useListBoxSection({
-    heading: title,
-    "aria-label": props["aria-label"]
-  });
-  const composed = mergeProps(apply({ ...data, ...props }, ["children", "title", "slot"]), groupProps);
-  const sectionContent = children || props.children;
-  return /* @__PURE__ */ React4.createElement("section", { ...composed, ref }, /* @__PURE__ */ React4.createElement(HeaderContext.Provider, { value: { ...headingProps, ref: headingRef } }, title && /* @__PURE__ */ React4.createElement("div", { ...headingProps }, title), sectionContent));
-});
-function ListBoxSectionWrapper(props, ref, section) {
-  return /* @__PURE__ */ React4.createElement(BentoListBoxSectionImpl, { ...props, __node: section, ref });
-}
-var ListBoxSectionBase = createBranchComponent("section", ListBoxSectionWrapper);
-var ListBoxSectionInner = function ListBoxSectionInner2({ section }) {
-  const state = useContext(ListStateContext);
-  const { CollectionBranch } = useContext(CollectionRendererContext);
-  return /* @__PURE__ */ React4.createElement(BentoListBoxSectionImpl, { ...section.props, __node: section }, CollectionBranch && state?.collection ? /* @__PURE__ */ React4.createElement(CollectionBranch, { collection: state.collection, parent: section }) : null);
-};
-var ListBoxSection = ListBoxSectionBase;
-function useSafeObjectRef(ref) {
-  const internalRef = useRef(null);
-  useEffect(function updateForwardedRef() {
-    const current = internalRef.current;
-    if (typeof ref === "function") {
-      ref(current);
-    } else if (ref && "current" in ref) {
-      try {
-        ref.current = current;
-      } catch {
-      }
-    }
-  });
-  return internalRef;
-}
-
-// src/listbox.tsx
-var ListStateContext = createContext(null);
-function useListBoxState(props) {
-  const contextState = useContext(ListStateContext);
-  const stateProps = {
-    ...props,
-    children: void 0,
-    items: void 0
-  };
-  const state = contextState ?? useListState(stateProps);
-  return { state, contextState };
-}
-function renderWithOptionalContext(content, state, contextState) {
-  return contextState ? content : /* @__PURE__ */ React4.createElement(ListStateContext.Provider, { value: state }, content);
-}
-function useKeyboardDelegate({
-  collection,
-  collator,
-  listBoxRef,
-  selectionManager,
-  layout,
-  orientation,
-  direction,
-  keyboardDelegate: providedDelegate
-}) {
-  const { disabledBehavior, disabledKeys } = selectionManager;
-  return useMemo(
-    function createKeyboardDelegate() {
-      return providedDelegate || new ListKeyboardDelegate({
-        collection,
-        collator,
-        ref: listBoxRef,
-        disabledKeys,
-        disabledBehavior,
-        layout,
-        orientation,
-        direction
-      });
-    },
-    [collection, collator, listBoxRef, selectionManager, orientation, direction, layout, providedDelegate]
-  );
-}
-function useListBoxDataAttributes({
-  isEmpty,
-  isFocused,
-  isFocusVisible,
-  layout,
-  orientation,
-  selectionManager,
-  allowsTabNavigation,
-  shouldFocusWrap,
-  originalSelectionBehavior
-}) {
-  return useDataAttributes({
-    empty: isEmpty,
-    focused: isFocused,
-    "focus-visible": isFocusVisible,
-    layout,
-    orientation,
-    "selection-mode": selectionManager.selectionMode !== "none" ? selectionManager.selectionMode : void 0,
-    "selection-behavior": originalSelectionBehavior !== void 0 ? selectionManager.selectionBehavior : void 0,
-    "allows-tab-navigation": allowsTabNavigation,
-    "focus-wrap": shouldFocusWrap
-  });
-}
-function useComposedProps({
-  otherProps,
-  renderValues,
-  listBoxProps,
-  focusProps,
-  dataAttributes,
-  selectionManager,
-  listBoxRef
-}) {
-  const { apply } = useProps(otherProps, renderValues);
-  const propsToExclude = [
-    "renderEmptyState",
-    "selectionMode",
-    "defaultSelectedKeys",
-    "disabledKeys",
-    "disallowEmptySelection",
-    "shouldFocusWrap",
-    "items",
-    "children",
-    "selectionBehavior",
-    "keyboardDelegate"
-  ];
-  const appliedUserProps = apply(otherProps, propsToExclude);
-  const baseProps = {
-    ...mergeProps(listBoxProps, focusProps),
-    ...dataAttributes,
-    ...selectionManager.selectionMode !== "none" && {
-      "aria-multiselectable": selectionManager.selectionMode === "multiple"
-    }
-  };
-  const finalProps = {
-    ...baseProps,
-    ...appliedUserProps,
-    ref: listBoxRef
-    // Set ref directly to avoid extensibility issues
-  };
-  return finalProps;
-}
-function renderEmptyState(renderEmptyStateFn, renderValues) {
-  if (typeof renderEmptyStateFn === "function") {
-    return renderEmptyStateFn(renderValues);
-  }
-  return renderEmptyStateFn;
-}
-function renderCollectionItems(collection) {
-  return [...collection].map(function renderCollectionItem(item) {
-    return item.type === "section" ? /* @__PURE__ */ React4.createElement(ListBoxSectionInner, { key: item.key, section: item }) : /* @__PURE__ */ React4.createElement(ListBoxItemImpl, { key: item.key, __node: item }, item.rendered);
-  });
-}
-function renderListBoxContent({
-  children,
-  items,
-  isEmpty,
-  renderEmptyStateProp,
-  renderValues,
-  collection
-}) {
-  const hasRenderChildren = typeof children === "function" && !items;
-  if (hasRenderChildren) {
-    return children(renderValues);
-  }
-  if (isEmpty && renderEmptyStateProp) {
-    return renderEmptyState(renderEmptyStateProp, renderValues);
-  }
-  return renderCollectionItems(collection);
-}
-var ListBoxInner = function ListBoxInner2({
-  state,
-  renderEmptyState: renderEmptyStateProp,
-  children,
-  items,
-  listBoxRef,
-  ...otherProps
-}) {
-  const { layout = "stack", orientation = "vertical", shouldSelectOnPressUp, selectionBehavior } = otherProps;
-  const { collection, selectionManager } = state;
-  const { direction } = useLocale();
-  const collator = useCollator({ usage: "search", sensitivity: "base" });
-  const keyboardDelegate = useKeyboardDelegate({
-    collection,
-    collator,
-    listBoxRef,
-    selectionManager,
-    layout,
-    orientation,
-    direction,
-    keyboardDelegate: otherProps.keyboardDelegate
-  });
-  const { listBoxProps } = useListBox(
-    {
-      ...otherProps,
-      shouldSelectOnPressUp,
-      keyboardDelegate
-    },
-    state,
-    listBoxRef
-  );
-  const { focusProps, isFocused, isFocusVisible } = useFocusRing();
-  const isEmpty = state.collection.size === 0;
-  const renderValues = {
-    isEmpty,
-    isFocused,
-    isFocusVisible,
-    isDropTarget: false,
-    layout,
-    state,
-    items
-  };
-  const dataAttributes = useListBoxDataAttributes({
-    isEmpty,
-    isFocused,
-    isFocusVisible,
-    layout,
-    orientation,
-    selectionManager,
-    allowsTabNavigation: otherProps.allowsTabNavigation,
-    shouldFocusWrap: otherProps.shouldFocusWrap,
-    originalSelectionBehavior: selectionBehavior
-  });
-  const composedProps = useComposedProps({
-    otherProps,
-    renderValues,
-    listBoxProps,
-    focusProps,
-    dataAttributes,
-    selectionManager,
-    listBoxRef
-  });
-  return /* @__PURE__ */ React4.createElement(FocusScope, null, /* @__PURE__ */ React4.createElement("div", { ...composedProps }, renderListBoxContent({
-    children,
-    items,
-    isEmpty,
-    renderEmptyStateProp,
-    renderValues,
-    collection
-  })));
-};
-function ListBoxComponent(args, ref) {
-  return /* @__PURE__ */ React4.createElement(CollectionBuilder, { content: /* @__PURE__ */ React4.createElement(Collection, { ...args }) }, function buildCollection(collection) {
-    return /* @__PURE__ */ React4.createElement(StandaloneListBox, { props: args, listBoxRef: ref, collection });
-  });
-}
-var StandaloneListBox = function StandaloneListBox2({ props, listBoxRef, collection }) {
-  const originalRenderEmptyState = props.renderEmptyState;
-  const { props: processedProps } = useProps(props);
-  const processedRef = useSafeObjectRef(listBoxRef);
-  const { state, contextState } = useListBoxState({ ...processedProps, collection });
-  const { renderEmptyState: _, ...cleanProcessedProps } = processedProps;
-  const content = /* @__PURE__ */ React4.createElement(
-    ListBoxInner,
-    {
-      state,
-      listBoxRef: processedRef,
-      renderEmptyState: originalRenderEmptyState,
-      ...cleanProcessedProps
-    }
-  );
-  return renderWithOptionalContext(content, state, contextState);
-};
-var ListBox = withSlots("BentoListBox", ListBoxComponent);
-var TextContext = createContext({ slots: {} });
-var ListBoxItemImplComponent = function ListBoxItemImplComponent2({ __node, ...props }, ref) {
-  const state = useContext(ListStateContext);
-  const safeRef = useSafeObjectRef(ref);
-  const { optionProps, labelProps, descriptionProps, ...states } = useOption(
-    {
-      key: __node.key,
-      "aria-label": props["aria-label"],
-      isDisabled: props.isDisabled
-    },
-    state,
-    safeRef
-  );
-  const { hoverProps, isHovered } = useHover({
-    isDisabled: states.isDisabled,
-    onHoverStart: props.onHoverStart,
-    onHoverChange: props.onHoverChange,
-    onHoverEnd: props.onHoverEnd
-  });
-  const renderValues = {
-    ...states,
-    isHovered,
-    selectionMode: state.selectionManager.selectionMode,
-    selectionBehavior: state.selectionManager.selectionBehavior
-  };
-  const content = typeof props.children === "function" ? props.children(renderValues) : props.children;
-  const { apply } = useProps(props, renderValues);
-  const dataAttributes = useDataAttributes({
-    selected: states.isSelected,
-    disabled: states.isDisabled,
-    hovered: isHovered,
-    focused: states.isFocused,
-    "focus-visible": states.isFocusVisible,
-    pressed: states.isPressed,
-    level: __node.level,
-    "selection-mode": state.selectionManager.selectionMode,
-    "selection-behavior": state.selectionManager.selectionBehavior
-  });
-  const textContext = useMemo(
-    function createTextContext() {
-      return {
-        slots: {
-          label: labelProps,
-          description: descriptionProps
-        }
-      };
-    },
-    [labelProps, descriptionProps]
-  );
-  const ElementType = __node.props.href ? "a" : "div";
-  const appliedUserProps = apply(__node.props, ["ref"]);
-  const finalAttributes = {
-    ...mergeProps(optionProps, hoverProps),
-    // React Aria props
-    ...dataAttributes,
-    // Bento data attributes
-    ...appliedUserProps,
-    ref: safeRef,
-    "data-text-value": __node.textValue
-  };
-  return /* @__PURE__ */ React4.createElement(TextContext.Provider, { value: textContext }, React4.createElement(ElementType, finalAttributes, content));
-};
-var ListBoxItemImpl = withSlots("BentoListBoxItem", ListBoxItemImplComponent);
-function ListBoxItemComponent(props, forwardedRef, item) {
-  return /* @__PURE__ */ React4.createElement(ListBoxItemImpl, { ...props, ref: forwardedRef, __node: item });
-}
-var ListBoxItemBase = createLeafComponent("item", ListBoxItemComponent);
-var ListBoxItem = ListBoxItemBase;
-
-export { Header, HeaderContext, ListBox, ListBoxItem, ListBoxSection };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map