@bloomreach/react-banana-ui 1.37.0 → 1.39.0

package/dist/components/inputs/autocomplete/autocomplete.stories.d.ts

@@ -6,12 +6,22 @@ export default meta;
 export type Story<Value extends NonNullable<unknown> = string, Multiple extends boolean = false, FreeSolo extends boolean = false> = StoryObj<typeof Autocomplete<Value, Multiple, FreeSolo>>;
 declare const fruits: string[];
 export declare const Basic: Story;
+export declare const CustomWidth: Story;
 export declare const AutoSelect: Story;
 export declare const AutoSelectFreeSoloMultiple: Story<string, true, true>;
 export declare const DefaultValue: Story;
 export declare const ControlledSingleValue: Story;
 export declare const Multiple: Story<(typeof fruits)[0], true>;
+export declare const SelectAll: Story<(typeof fruits)[0], true>;
+export declare const SelectAllWithDisabledOptions: Story<{
+    id: number;
+    label: string;
+}, true>;
 export declare const DefaultValueMultiple: Story<(typeof fruits)[0], true>;
+export declare const LimitTags: Story<(typeof fruits)[0], true>;
+export declare const LimitTagsCustomText: Story<(typeof fruits)[0], true>;
+export declare const MaxRows: Story<(typeof fruits)[0], true>;
+export declare const LimitTagsWithMaxRows: Story<(typeof fruits)[0], true>;
 export declare const ControlledMultipleValue: Story<(typeof fruits)[0], true>;
 export declare const Disabled: Story;
 export declare const DisabledMultiple: Story<(typeof fruits)[0], true>;

package/dist/components/inputs/autocomplete/autocomplete.types.d.ts

@@ -49,6 +49,13 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
      * If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
      */
     freeSolo?: FreeSolo;
+    /**
+     * Customize the overflow text shown when tags are truncated by `limitTags`.
+     * @param more The number of hidden tags
+     * @returns Content to render as the overflow indicator
+     * @default (more) => `+${more}`
+     */
+    getLimitTagsText?: (more: number) => ReactNode;
     /**
      * Used to determine if an option is disabled.
      */
@@ -81,6 +88,12 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
      * Icon or any element displayed at the start of the input.
      */
     leftElement?: ReactNode;
+    /**
+     * The maximum number of tags visible when the popup is closed.
+     * Set to `-1` to show all tags. Only works when `multiple` is `true`.
+     * @default -1
+     */
+    limitTags?: number;
     /**
      * If `true`, the component is in a loading state.
      * @default false
@@ -91,6 +104,11 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
      * @default "Loading..."
      */
     loadingText?: string;
+    /**
+     * The maximum number of visible tag rows before the tag area becomes scrollable while the popup is closed.
+     * Only works when `multiple` is `true`.
+     */
+    maxRows?: number;
     /**
      * If `true`, the component allows multiple selections.
      * @default false
@@ -179,12 +197,30 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
      * Icon or any element displayed at the end of the input, before the clear button and chevron.
      */
     rightElement?: ReactNode;
+    /**
+     * If `true`, a "Select all" checkbox is shown at the top of the listbox
+     * that toggles all currently visible (filtered) enabled options.
+     * Only works when `multiple` is `true`.
+     * @default false
+     */
+    selectAll?: boolean;
+    /**
+     * The label for the select all checkbox.
+     * Only applicable when both `selectAll` and `multiple` are `true`.
+     * @default "Select all"
+     */
+    selectAllLabel?: string;
     /**
      * The selected value.
      * Set to `null` in case of single select and `[]` in case of multiple select to clear the selection.
      * If the value is an object it must have reference equality with the option in order to be selected.
      */
     value?: AutocompleteValue<AutocompleteOption, Multiple, FreeSolo>;
+    /**
+     * The width of the autocomplete input. Accepts any valid CSS width value.
+     * @example '100%', '400px', 'auto'
+     */
+    width?: number | string;
 }
 export interface AutocompleteRenderGroupParams extends AutocompleteGroupedOption<object> {
     children: ReactNode;

package/dist/components/navigation/pagination/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Pagination } from './pagination';
-export type { PaginationProps } from './pagination.types';
+export { Pagination } from './pagination';
+export type { PaginationProps } from './pagination';

package/dist/components/navigation/pagination/pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Pagination } from './pagination';
+export type { ItemsPerPageOptionsType, PageNavigationItemsListType, PageNavigationItemType, PaginationProps, } from './pagination.types';

package/dist/components/navigation/pagination/{pagination.types.d.ts → pagination/pagination.types.d.ts}

@@ -1,10 +1,11 @@
 import { HTMLAttributes } from 'react';
-export type ItemsPerPageOptionsType = Array<number | {
+import { SEPARATOR } from '../pagination-config';
+export type ItemsPerPageOptionsType = (number | {
     label: string;
     value: number;
-}>;
-export type PageNavigationItemsListType = Array<PageNavigationItemType>;
-export type PageNavigationItemType = '...' | number;
+})[];
+export type PageNavigationItemsListType = PageNavigationItemType[];
+export type PageNavigationItemType = number | typeof SEPARATOR;
 export interface PaginationProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Custom class name for the container of this component

package/dist/components/navigation/pagination/pagination-config.d.ts

@@ -1,4 +1,6 @@
-import { ItemsPerPageOptionsType } from './pagination.types';
+import { ItemsPerPageOptionsType } from './pagination/pagination.types';
 export declare const DEFAULT_ITEMS_PER_PAGE_OPTIONS: ItemsPerPageOptionsType;
 export declare const PAGINATION_PAGES_LIMIT = 9;
 export declare const PAGINATION_PAGES_BUFFER = 2;
+/** Separator string displayed between page numbers when truncating */
+export declare const SEPARATOR = "...";

package/dist/components/navigation/pagination/pagination-context.d.ts

@@ -1,4 +1,8 @@
-import { PaginationProps } from './pagination.types';
-declare const PaginationContext: import('react').Context<PaginationProps | null>;
-export declare function usePaginationContext(): null | PaginationProps;
+import { PaginationProps } from './pagination/pagination.types';
+/**
+ * Context value for Pagination components to share state
+ */
+export type PaginationContextValue = Pick<PaginationProps, 'count' | 'itemsPerPage' | 'itemsPerPageOptions' | 'onItemsPerPageChange' | 'onPageChange' | 'page'>;
+declare const PaginationContext: import('react').Context<PaginationContextValue | null>;
+export declare const usePaginationContext: () => null | PaginationContextValue;
 export default PaginationContext;

package/dist/components/navigation/pagination/pagination-items-per-page-selector/index.d.ts

@@ -0,0 +1 @@
+export { PaginationItemsPerPageSelector } from './pagination-items-per-page-selector';

package/dist/components/navigation/pagination/pagination-items-per-page-selector/pagination-items-per-page-selector.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+declare const PaginationItemsPerPageSelector: {
+    (): null | ReactElement;
+    displayName: string;
+};
+export { PaginationItemsPerPageSelector };

package/dist/components/navigation/pagination/pagination-navigation/index.d.ts

@@ -0,0 +1 @@
+export { PaginationNavigation } from './pagination-navigation';

package/dist/components/navigation/pagination/pagination-navigation/pagination-navigation-helpers.d.ts

@@ -0,0 +1,17 @@
+import { PageNavigationItemsListType } from '../pagination/pagination.types';
+/**
+ * Generates an array of consecutive numbers starting from a given value
+ * @param from - The starting number
+ * @param count - How many numbers to generate
+ * @returns Array of numbers from `from` to `from + count - 1`
+ * @example range(5, 3) => [5, 6, 7]
+ */
+export declare const range: (from: number, count: number) => number[];
+/**
+ * This function generates the pagination navigation links and separators.
+ * The output is an array of numbers and separators
+ * Eg., [1, 2, 3, 4, 5, 6, 7, '...', 10]
+ * @param currentPageIndex index of the current page
+ * @param totalPages total number of pages
+ */
+export declare const getNavItems: (currentPageIndex: number, totalPages: number) => PageNavigationItemsListType;

package/dist/components/navigation/pagination/pagination-navigation/pagination-navigation.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+declare const PaginationNavigation: {
+    (): null | ReactElement;
+    displayName: string;
+};
+export { PaginationNavigation };

package/dist/components/navigation/pagination/pagination-navigation-item/index.d.ts

@@ -0,0 +1,2 @@
+export { PaginationNavigationItem } from './pagination-navigation-item';
+export type { PaginationNavigationItemProps } from './pagination-navigation-item.types';

package/dist/components/navigation/pagination/pagination-navigation-item/pagination-navigation-item.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { PaginationNavigationItemProps } from './pagination-navigation-item.types';
+declare const PaginationNavigationItem: {
+    (props: PaginationNavigationItemProps): ReactElement;
+    displayName: string;
+};
+export { PaginationNavigationItem };

package/dist/components/navigation/pagination/pagination-navigation-item/pagination-navigation-item.types.d.ts

@@ -0,0 +1,10 @@
+import { PageNavigationItemType } from '../pagination/pagination.types';
+/**
+ * Props for the PaginationNavigationItem component
+ */
+export interface PaginationNavigationItemProps {
+    /**
+     * The value to display - either a page number (0-based index) or separator string ('...')
+     */
+    value: PageNavigationItemType;
+}

package/dist/components/navigation/pagination/pagination-summary/index.d.ts

@@ -0,0 +1 @@
+export { PaginationSummary } from './pagination-summary';

package/dist/components/navigation/pagination/pagination-summary/pagination-summary.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+declare const PaginationSummary: {
+    (): ReactElement;
+    displayName: string;
+};
+export { PaginationSummary };

package/dist/components/navigation/pagination/pagination.qa.stories.d.ts

@@ -1,4 +1,4 @@
-import { default as Pagination } from './pagination';
+import { Pagination } from './pagination';
 import { Meta } from '@storybook/react-vite';
 import { Story } from './pagination.stories';
 declare const meta: Meta<typeof Pagination>;

package/dist/components/navigation/pagination/pagination.stories.d.ts

@@ -1,4 +1,4 @@
-import { default as Pagination } from './pagination';
+import { Pagination } from './pagination';
 import { Meta, StoryObj } from '@storybook/react-vite';
 declare const meta: Meta<typeof Pagination>;
 export default meta;

package/dist/components/popovers/modal/index.d.ts

@@ -1,8 +1,14 @@
-export { default as Modal } from './modal';
-export { default as ModalBody } from './modal-body';
-export { default as ModalCloseButton } from './modal-close-button';
-export { default as ModalFooter } from './modal-footer';
-export { default as ModalFooterActions } from './modal-footer-actions';
-export { default as ModalHeader } from './modal-header';
-export { default as ModalHeaderTitle } from './modal-header-title';
-export type { ModalBodyProps, ModalChildProps, ModalProps } from './modal.types';
+export { Modal } from './modal';
+export type { ModalProps, ModalWidth } from './modal';
+export { ModalBody } from './modal-body';
+export type { ModalBodyProps } from './modal-body';
+export { ModalCloseButton } from './modal-close-button';
+export type { ModalCloseButtonProps } from './modal-close-button';
+export { ModalFooter } from './modal-footer';
+export type { ModalFooterProps } from './modal-footer';
+export { ModalFooterActions } from './modal-footer-actions';
+export type { ModalFooterActionsProps } from './modal-footer-actions';
+export { ModalHeader } from './modal-header';
+export type { ModalHeaderProps } from './modal-header';
+export { ModalHeaderTitle } from './modal-header-title';
+export type { ModalHeaderTitleProps } from './modal-header-title';

package/dist/components/popovers/modal/modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Modal } from './modal';
+export type { ModalProps, ModalWidth } from './modal.types';

package/dist/components/popovers/modal/{modal.types.d.ts → modal/modal.types.d.ts}

@@ -1,29 +1,4 @@
 import { ReactNode } from 'react';
-export interface ModalBodyProps {
-    /**
-     * The content to be rendered in the body section of the modal.
-     */
-    children: ReactNode;
-    /**
-     * Custom css class name.
-     */
-    className?: string;
-    /**
-     * Padding around the content in the body of the modal.
-     * @default 'narrow'
-     */
-    padding?: 'narrow' | 'none' | 'wide';
-}
-export interface ModalChildProps {
-    /**
-     * Children to be rendered inside the component
-     */
-    children: ReactNode;
-    /**
-     * Custom css class name.
-     */
-    className?: string;
-}
 export interface ModalProps {
     /**
      * The content inside the modal

package/dist/components/popovers/modal/modal-body/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ModalBody } from './modal-body';
+export type { ModalBodyProps } from './modal-body.types';

package/dist/components/popovers/modal/{modal-body.d.ts → modal-body/modal-body.d.ts}

@@ -1,4 +1,4 @@
-import { ModalBodyProps } from './modal.types';
+import { ModalBodyProps } from './modal-body.types';
 /**
  * Modal body component is used to render the body section of the modal dialog.
  * Use the `padding` prop to control the padding of the body section, the default is `narrow`.

package/dist/components/popovers/modal/modal-body/modal-body.types.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content to be rendered in the body section of the modal.
+     */
+    children: ReactNode;
+    /**
+     * Custom css class name.
+     */
+    className?: string;
+    /**
+     * Padding around the content in the body of the modal.
+     * @default 'narrow'
+     */
+    padding?: 'narrow' | 'none' | 'wide';
+}

package/dist/components/popovers/modal/modal-close-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ModalCloseButton } from './modal-close-button';
+export type { ModalCloseButtonProps } from './modal-close-button.types';

package/dist/components/popovers/modal/{modal-close-button.d.ts → modal-close-button/modal-close-button.d.ts}

@@ -1,13 +1,8 @@
-import { ReactElement } from 'react';
-import { ButtonProps } from '../../buttons';
 /**
  * This button is a convenience component that applies the recommended styling for the Cancel button in the
  * modal footer. It wraps the BrButton and sets the type to tertiary and attaches the Modal's onClose handler
  * to the button's onClick event handler, so the developer does not have to manually attach the modal dialog close
  * handler to the onClose handler of the Modal and again to the BrButton for the cancel button in the footer.
  */
-declare function ModalCloseButton(props: ButtonProps): ReactElement;
-declare namespace ModalCloseButton {
-    var displayName: string;
-}
+declare const ModalCloseButton: import('react').ForwardRefExoticComponent<import('../../..').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 export default ModalCloseButton;

package/dist/components/popovers/modal/modal-close-button/modal-close-button.types.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from '../../../buttons';
+export type ModalCloseButtonProps = ButtonProps;

package/dist/components/popovers/modal/modal-context.d.ts

@@ -1,4 +1,6 @@
-import { ModalProps } from './modal.types';
-declare const ModalContext: import('react').Context<ModalProps | null>;
-export declare function useModalContext(): ModalProps | null;
+interface ModalContextValue {
+    onClose?: () => void;
+}
+declare const ModalContext: import('react').Context<ModalContextValue | null>;
+export declare const useModalContext: () => ModalContextValue | null;
 export default ModalContext;

package/dist/components/popovers/modal/modal-footer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ModalFooter } from './modal-footer';
+export type { ModalFooterProps } from './modal-footer.types';

package/dist/components/popovers/modal/{modal-footer.d.ts → modal-footer/modal-footer.d.ts}

@@ -1,9 +1,9 @@
-import { ModalChildProps } from './modal.types';
+import { ModalFooterProps } from './modal-footer.types';
 /**
  * Modal footer component is used to render the footer section of the modal dialog and it is recommended to use
  * the `ModalFooterActions` component to render the actions in the footer section.
  * All content inside the `ModalFooter` component is justified to the left. The `ModalFooterActions`
  * component is justified to the right.
  */
-declare const ModalFooter: import('react').ForwardRefExoticComponent<ModalChildProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const ModalFooter: import('react').ForwardRefExoticComponent<ModalFooterProps & import('react').RefAttributes<HTMLDivElement>>;
 export default ModalFooter;

package/dist/components/popovers/modal/modal-footer/modal-footer.types.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Children to be rendered inside the component
+     */
+    children: ReactNode;
+    /**
+     * Custom css class name.
+     */
+    className?: string;
+}

package/dist/components/popovers/modal/modal-footer-actions/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ModalFooterActions } from './modal-footer-actions';
+export type { ModalFooterActionsProps } from './modal-footer-actions.types';

package/dist/components/popovers/modal/{modal-footer-actions.d.ts → modal-footer-actions/modal-footer-actions.d.ts}

@@ -1,7 +1,7 @@
-import { ModalChildProps } from './modal.types';
+import { ModalFooterActionsProps } from './modal-footer-actions.types';
 /**
  * Modal footer actions component is used to render the actions section of the modal dialog footer.
  * You can use `ModalCloseButton` component to render the cancel button which is call `onClose` by default.
  */
-declare const ModalFooterActions: import('react').ForwardRefExoticComponent<ModalChildProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const ModalFooterActions: import('react').ForwardRefExoticComponent<ModalFooterActionsProps & import('react').RefAttributes<HTMLDivElement>>;
 export default ModalFooterActions;

package/dist/components/popovers/modal/modal-footer-actions/modal-footer-actions.types.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ModalFooterActionsProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Children to be rendered inside the component
+     */
+    children: ReactNode;
+    /**
+     * Custom css class name.
+     */
+    className?: string;
+}

package/dist/components/popovers/modal/modal-header/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ModalHeader } from './modal-header';
+export type { ModalHeaderProps } from './modal-header.types';

package/dist/components/popovers/modal/{modal-header.d.ts → modal-header/modal-header.d.ts}

@@ -1,8 +1,8 @@
-import { ModalChildProps } from './modal.types';
+import { ModalHeaderProps } from './modal-header.types';
 /**
  * Modal header component is used to render the header section of the modal dialog.
  * If `onClose` is provided to the `Modal` component, then a close button is rendered in the header section.
  * Use `ModalHeaderTitle` component to render the title in the header section.
  */
-declare const ModalHeader: import('react').ForwardRefExoticComponent<ModalChildProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const ModalHeader: import('react').ForwardRefExoticComponent<ModalHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
 export default ModalHeader;

package/dist/components/popovers/modal/modal-header/modal-header.types.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Children to be rendered inside the component
+     */
+    children: ReactNode;
+    /**
+     * Custom css class name.
+     */
+    className?: string;
+}

package/dist/components/popovers/modal/modal-header-title/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ModalHeaderTitle } from './modal-header-title';
+export type { ModalHeaderTitleProps } from './modal-header-title.types';

package/dist/components/popovers/modal/{modal-header-title.d.ts → modal-header-title/modal-header-title.d.ts}

@@ -1,6 +1,6 @@
-import { ModalChildProps } from './modal.types';
+import { ModalHeaderTitleProps } from './modal-header-title.types';
 /**
  * Modal header title is used to render the title in the header section of the modal dialog.
  */
-declare const ModalHeaderTitle: import('react').ForwardRefExoticComponent<ModalChildProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const ModalHeaderTitle: import('react').ForwardRefExoticComponent<ModalHeaderTitleProps & import('react').RefAttributes<HTMLDivElement>>;
 export default ModalHeaderTitle;

package/dist/components/popovers/modal/modal-header-title/modal-header-title.types.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ModalHeaderTitleProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Children to be rendered inside the component
+     */
+    children: ReactNode;
+    /**
+     * Custom css class name.
+     */
+    className?: string;
+}

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

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react-vite';
+import { ModalProps } from './modal';
 import { Story } from './modal.stories';
-import { ModalProps } from './modal.types';
 declare const meta: Meta<ModalProps>;
 export default meta;
 export declare const Basic: Story;

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

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { ModalProps } from './modal.types';
+import { ModalProps } from './modal';
 declare const meta: Meta<ModalProps>;
 export default meta;
 export type Story = StoryObj<ModalProps>;