@bloomreach/react-banana-ui 1.38.0 → 1.39.0

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>;