@bloomreach/react-banana-ui 1.32.2 → 1.34.0

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

@@ -1,4 +1,5 @@
 export * from './autocomplete';
+export * from './autocomplete-field';
 export * from './checkbox';
 export * from './checkbox-field';
 export * from './checkbox-group';

package/dist/components/inputs/input-field/input-field.stories.d.ts

@@ -14,6 +14,7 @@ export declare const CompleteField: Story;
 export declare const Disabled: Story;
 export declare const ReadOnly: Story;
 export declare const Error: Story;
+export declare const Required: Story;
 export declare const FullWidth: Story;
 export declare const CompleteFieldFullWidth: Story;
 export declare const Controlled: Story;

package/dist/components/inputs/internal.d.ts

@@ -1,3 +1,4 @@
+export * from './autocomplete';
 export * from './base-field';
 export * from './base-input';
 export * from './checkbox';

package/dist/components/inputs/select-field/select-field.stories.d.ts

@@ -8,6 +8,7 @@ export declare const WithLabel: Story;
 export declare const WithTooltip: Story;
 export declare const WithHelperText: Story;
 export declare const CompleteField: Story;
+export declare const Required: Story;
 export declare const FullWidth: Story;
 export declare const ControlledSingleSelect: Story;
 export declare const Multiple: Story<string, true>;

package/dist/components/inputs/text-field/text-field.stories.d.ts

@@ -12,6 +12,7 @@ export declare const CompleteField: Story;
 export declare const Disabled: Story;
 export declare const ReadOnly: Story;
 export declare const Error: Story;
+export declare const Required: Story;
 export declare const ManuallyResizable: Story;
 export declare const MinRows: Story;
 export declare const AutoSize: Story;

package/dist/components/lists/listbox-item/listbox-item.types.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
 export interface ListboxItemProps {
     /**
      * The type of the check mark icon.
@@ -21,6 +21,10 @@ export interface ListboxItemProps {
      * If `true`, the item will be highlighted.
      */
     highlighted?: boolean;
+    /**
+     * The onClick handler for the list box item.
+     */
+    onClick?: MouseEventHandler<HTMLLIElement>;
     /**
      * The role of the list box item.
      * @default 'option'
@@ -30,4 +34,8 @@ export interface ListboxItemProps {
      * If `true`, the item will be selected.
      */
     selected?: boolean;
+    /**
+     * Icon displayed at the start of the item (before the content).
+     */
+    startIcon?: ReactNode;
 }

package/dist/components/lists/listbox-separator/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ListboxSeparator } from './listbox-separator';
+export type { ListboxSeparatorProps } from './listbox-separator.types';

package/dist/components/lists/listbox-separator/listbox-separator.d.ts

@@ -0,0 +1,24 @@
+import { ListboxSeparatorProps } from './listbox-separator.types';
+/**
+ * @internal
+ * The `ListboxSeparator` component is used to display a separator between list items.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { Listbox, ListboxItem, ListboxSeparator } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyList() {
+ *   return (
+ *      <Listbox>
+ *        <ListboxItem>Item 1</ListboxItem>
+ *        <ListboxItem>Item 2</ListboxItem>
+ *        <ListboxSeparator />
+ *        <ListboxItem>Item 3</ListboxItem>
+ *      </Listbox>
+ *   );
+ * }
+ * ```
+ */
+declare const ListboxSeparator: import('react').ForwardRefExoticComponent<ListboxSeparatorProps & import('react').RefAttributes<HTMLLIElement>>;
+export default ListboxSeparator;

package/dist/components/lists/listbox-separator/listbox-separator.types.d.ts

@@ -0,0 +1,6 @@
+export interface ListboxSeparatorProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+}

package/dist/components/popovers/tooltip/tooltip.qa.stories.d.ts

@@ -3,6 +3,12 @@ import { Meta } from '@storybook/react-vite';
 import { Story } from './tooltip.stories';
 declare const meta: Meta<typeof Tooltip>;
 export default meta;
-export declare const Simple: Story;
-export declare const LongHtmlContent: Story;
+export declare const Basic: Story;
+export declare const RichContent: Story;
+export declare const Placement: Story;
+export declare const IconTooltips: Story;
+export declare const RenderOnIcon: Story;
+export declare const RenderOnCustomIcon: Story;
 export declare const AutoPlacement: Story;
+export declare const OverflowContainer: Story;
+export declare const ScrollContainer: Story;

package/dist/components/popovers/tooltip/tooltip.stories.d.ts

@@ -3,23 +3,53 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 declare const meta: Meta<typeof Tooltip>;
 export default meta;
 export type Story = StoryObj<typeof Tooltip>;
-export declare const Simple: Story;
-export declare const LongHtmlContent: Story;
 /**
- * Automatically place the tooltip in the most appropriate place. This example also shows how you can pass a
- * reference to a custom portal(container where the tooltip is rendered and used to calculate the tooltip position)
- * using id. You can also pass a ref or a HTML element to the portalRoot prop
+ * Basic tooltip with simple text content on hover.
  */
-export declare const AutoPlacement: Story;
-export declare const InsideContainerWithOverflowHidden: Story;
-export declare const InsideContainerWithCustomScroll: Story;
+export declare const Basic: Story;
+/**
+ * Tooltips can contain rich HTML content including bold, italic, and other formatting.
+ */
+export declare const RichContent: Story;
+/**
+ * Control tooltip placement with the `placement` prop. Placement automatically adjusts if there isn't enough space.
+ */
+export declare const Placement: Story;
 /**
- * Story to check that the refs are being passed properly in the icons component
+ * Tooltips can be attached to icon components. All icon types are supported.
  */
 export declare const IconTooltips: Story;
-export declare const EmptyTitleNoTooltip: Story;
 /**
- * If you want to show a tooltip over an element that can be disabled, wrap it in another HTML element like a
- * \<span\> or a \<div\>, since disabled elements do not trigger the hover and focus events
+ * When `renderOnIcon` is `true`, the tooltip is triggered by an info icon next to the content.
+ * This is useful for labels, form fields, and informational text.
+ */
+export declare const RenderOnIcon: Story;
+/**
+ * Provide a custom icon to `renderOnIcon` instead of the default info icon.
+ */
+export declare const RenderOnCustomIcon: Story;
+/**
+ * Tooltips automatically adjust position when constrained by container boundaries.
+ * The arrow position updates accordingly to maintain visual connection to the trigger.
+ */
+export declare const AutoPlacement: Story;
+/**
+ * Tooltips render in a portal by default, making them visible outside containers with `overflow: hidden`.
+ */
+export declare const OverflowContainer: Story;
+/**
+ * Tooltips stay attached to their trigger element when scrolling inside custom scroll containers.
+ */
+export declare const ScrollContainer: Story;
+/**
+ * When title is empty, no tooltip is rendered and the child element is returned as-is.
+ */
+export declare const EmptyTitle: Story;
+/**
+ * Real-world usage examples showing tooltips in common UI patterns.
+ */
+export declare const RealWorldExamples: Story;
+/**
+ * Complex layout demonstrating multiple tooltips working together in a card-based interface.
  */
-export declare const DisabledTriggerShouldShowTooltip: Story;
+export declare const ComplexLayout: Story;

package/dist/components/popovers/tooltip/tooltip.types.d.ts

@@ -24,6 +24,12 @@ export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'titl
      * determine the placement of the tooltip
      */
     portalRoot?: HTMLElement | React.MutableRefObject<HTMLElement | null> | string;
+    /**
+     * If `true`, the tooltip will be rendered on the info-small icon after the children.
+     * Allows rendering on a different icon by passing the appropriate icon element.
+     * @default false
+     */
+    renderOnIcon?: boolean | ReactElement;
     /**
      * The tooltip message, it can be string or any valid React node
      */