@bloomreach/react-banana-ui 1.27.0 → 1.27.1

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

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 export interface ListboxGroupProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
 }

package/dist/components/lists/listbox-group-label/listbox-group-label.types.d.ts

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 export interface ListboxGroupLabelProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
 }

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

@@ -1,9 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export interface ListboxItemProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The type of the check mark icon.
      * @default null
@@ -13,6 +9,10 @@ export interface ListboxItemProps {
      * The content of the component.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
     /**
      * If `true`, the item will be disabled.
      */
@@ -21,13 +21,13 @@ export interface ListboxItemProps {
      * If `true`, the item will be highlighted.
      */
     highlighted?: boolean;
-    /**
-     * If `true`, the item will be selected.
-     */
-    selected?: boolean;
     /**
      * The role of the list box item.
      * @default 'option'
      */
     role?: HTMLAttributes<Element>['role'];
+    /**
+     * If `true`, the item will be selected.
+     */
+    selected?: boolean;
 }

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

@@ -1,4 +1,4 @@
 import { PaginationProps } from './pagination.types';
 declare const PaginationContext: import('react').Context<PaginationProps | null>;
-export declare function usePaginationContext(): PaginationProps | null;
+export declare function usePaginationContext(): null | PaginationProps;
 export default PaginationContext;

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

@@ -1,11 +1,11 @@
 import { PageNavigationItemsListType } from './pagination.types';
 export declare const SEPARATOR = "...";
-export declare function range(from: number, count: number): Array<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
+ * @param currentPageIndex index of the current page
+ * @param totalPages total number of pages
  */
 export declare function getNavItems(currentPageIndex: number, totalPages: number): PageNavigationItemsListType;
+export declare function range(from: number, count: number): Array<number>;

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

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

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

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

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

@@ -3,8 +3,8 @@ export type ItemsPerPageOptionsType = Array<number | {
     label: string;
     value: number;
 }>;
-export type PageNavigationItemType = number | '...';
 export type PageNavigationItemsListType = Array<PageNavigationItemType>;
+export type PageNavigationItemType = '...' | number;
 export interface PaginationProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Custom class name for the container of this component
@@ -14,18 +14,10 @@ export interface PaginationProps extends HTMLAttributes<HTMLDivElement> {
      * Total number of items
      */
     count: number;
-    /**
-     * Zero-based index of the current page
-     */
-    page: number;
     /**
      * Number of items per page.
      */
     itemsPerPage: number;
-    /**
-     * Callback fired when the page is changed.
-     */
-    onPageChange?: (page: number) => void;
     /**
      * Customizes the options of the items per page select field.
      * If less than two options are available, no select field will be displayed
@@ -35,4 +27,12 @@ export interface PaginationProps extends HTMLAttributes<HTMLDivElement> {
      * Callback fired when the number of items per page is changed
      */
     onItemsPerPageChange?: (itemsPerPage: number) => void;
+    /**
+     * Callback fired when the page is changed.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Zero-based index of the current page
+     */
+    page: number;
 }

package/dist/components/navigation/tabs/tab/tab.types.d.ts

@@ -1,22 +1,17 @@
 import { ReactNode } from 'react';
 export interface TabProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children?: ReactNode;
     /**
-     * If true, the tab is disabled.
+     * Custom class name for the container of the component.
      */
-    disabled?: boolean;
+    className?: string;
     /**
-     * You can provide your own value.
-     * Otherwise, it falls back to the child position index.
+     * If true, the tab is disabled.
      */
-    value?: number | string;
+    disabled?: boolean;
     /**
      * Callback fired when the tab is clicked.
      */
@@ -25,4 +20,9 @@ export interface TabProps {
      * Icon displayed before the content
      */
     startIcon?: ReactNode;
+    /**
+     * You can provide your own value.
+     * Otherwise, it falls back to the child position index.
+     */
+    value?: number | string;
 }

package/dist/components/navigation/tabs/tab-list/tab-list.types.d.ts

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react';
 export interface TabListProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
     /**
      * Variant of tab.
      * @default 'primary'

package/dist/components/navigation/tabs/tab-panel/tab-panel.types.d.ts

@@ -1,19 +1,13 @@
 import { ReactNode } from 'react';
 export interface TabPanelProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children?: ReactNode;
     /**
-     * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
-     * If not provided, it will fall back to the index of the panel.
-     * It is recommended to explicitly provide it, as it's required for the tab panel to be rendered.
+     * Custom class name for the container of the component.
      */
-    value?: number | string;
+    className?: string;
     /**
      * Whether to mount the tab panel in the DOM even when it is not currently selected.
      * Inactive tab panels are inert and cannot be interacted with.
@@ -22,4 +16,10 @@ export interface TabPanelProps {
      * @default false
      */
     keepMounted?: boolean;
+    /**
+     * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
+     * If not provided, it will fall back to the index of the panel.
+     * It is recommended to explicitly provide it, as it's required for the tab panel to be rendered.
+     */
+    value?: number | string;
 }

package/dist/components/navigation/tabs/tabs/tabs.types.d.ts

@@ -1,31 +1,31 @@
 import { ReactNode } from 'react';
 export interface TabsProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children?: ReactNode;
     /**
-     * The default value. Use when the component is not controlled.
+     * Custom class name for the container of the component.
      */
-    defaultValue?: number | string;
+    className?: string;
     /**
-     * The value of the currently selected Tab.
-     * Use when the component is controlled.
-     * If you don't want any selected Tab, you can set this prop to null.
+     * The default value. Use when the component is not controlled.
      */
-    value?: number | string | null;
+    defaultValue?: number | string;
     /**
      * Callback invoked when new value is being set.
      */
-    onChange?: (event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element> | React.FocusEvent<Element, Element> | React.SyntheticEvent<Element, Event> | null, value: string | number | null) => void;
+    onChange?: (event: null | React.FocusEvent<Element, Element> | React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent> | React.SyntheticEvent<Element, Event>, value: null | number | string) => void;
     /**
      * If true the selected tab changes on focus.
      * Otherwise it only changes on activation.
      * @default false
      */
     selectionFollowsFocus?: boolean;
+    /**
+     * The value of the currently selected Tab.
+     * Use when the component is controlled.
+     * If you don't want any selected Tab, you can set this prop to null.
+     */
+    value?: null | number | string;
 }

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

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './tabs.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Basic: Story;

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

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

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

@@ -1,8 +1,8 @@
 export { default as Modal } from './modal';
-export { default as ModalHeader } from './modal-header';
-export { default as ModalHeaderTitle } from './modal-header-title';
 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 ModalCloseButton } from './modal-close-button';
-export type { ModalProps, ModalChildProps, ModalBodyProps } from './modal.types';
+export { default as ModalHeader } from './modal-header';
+export { default as ModalHeaderTitle } from './modal-header-title';
+export type { ModalBodyProps, ModalChildProps, ModalProps } from './modal.types';

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

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

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

@@ -1,37 +1,43 @@
 import { ReactNode } from 'react';
-export type ModalWidth = 'sm' | 'md' | 'lg' | 'full';
-export interface ModalProps {
+export interface ModalBodyProps {
     /**
-     * If true, the component is shown.
+     * The content to be rendered in the body section of the modal.
      */
-    open: boolean;
+    children: ReactNode;
     /**
-     * The content inside the modal
+     * Custom css class name.
      */
-    children: ReactNode;
+    className?: string;
     /**
-     * Total width of the modal.
-     * @default 'sm'
+     * Padding around the content in the body of the modal.
+     * @default 'narrow'
      */
-    width?: ModalWidth;
+    padding?: 'narrow' | 'none' | 'wide';
+}
+export interface ModalChildProps {
     /**
-     * The ARIA role attribute of the element.
-     * @default 'dialog'
+     * Children to be rendered inside the component
      */
-    role?: string;
+    children: ReactNode;
     /**
      * Custom css class name.
      */
     className?: string;
+}
+export interface ModalProps {
     /**
-     * Callback fired when the component requests to be closed.
+     * The content inside the modal
      */
-    onClose?: () => void;
+    children: ReactNode;
+    /**
+     * Custom css class name.
+     */
+    className?: string;
     /**
      * An HTML element or function that returns one. The container will have the portal children appended to it.
      * By default, it uses the body of the top-level document object, so it's simply document.body most of the time.
      */
-    container?: HTMLElement | (() => HTMLElement);
+    container?: (() => HTMLElement) | HTMLElement;
     /**
      * If true, the modal will not automatically shift focus to itself when it opens, and replace it to the last
      * focused element when it closes. This also works correctly with any modal children that have the disableAutoFocus
@@ -66,29 +72,23 @@ export interface ModalProps {
      * the responsiveness of the Modal.
      */
     keepMounted?: boolean;
-}
-export interface ModalChildProps {
     /**
-     * Custom css class name.
-     */
-    className?: string;
-    /**
-     * Children to be rendered inside the component
+     * Callback fired when the component requests to be closed.
      */
-    children: ReactNode;
-}
-export interface ModalBodyProps {
+    onClose?: () => void;
     /**
-     * The content to be rendered in the body section of the modal.
+     * If true, the component is shown.
      */
-    children: ReactNode;
+    open: boolean;
     /**
-     * Padding around the content in the body of the modal.
-     * @default 'narrow'
+     * The ARIA role attribute of the element.
+     * @default 'dialog'
      */
-    padding?: 'narrow' | 'wide' | 'none';
+    role?: string;
     /**
-     * Custom css class name.
+     * Total width of the modal.
+     * @default 'sm'
      */
-    className?: string;
+    width?: ModalWidth;
 }
+export type ModalWidth = 'full' | 'lg' | 'md' | 'sm';

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

@@ -1,4 +1,4 @@
 export { default as Popup } from './popup';
 export { PopupContext, usePopupContext } from './popup-context';
-export type { PopupContextProps, PopupProps, UsePopupOptions } from './popup.types';
 export { default as usePopup } from './use-popup';
+export type { PopupContextProps, PopupProps, UsePopupOptions } from './popup.types';

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

@@ -1,6 +1,7 @@
 import { Placement } from '@floating-ui/react';
 import { ReactNode } from 'react';
 import { default as usePopup } from './use-popup';
+export type PopupContextProps = null | ReturnType<typeof usePopup>;
 export interface PopupProps {
     /**
      * The content of the component.
@@ -11,21 +12,19 @@ export interface PopupProps {
      * @default false
      */
     defaultOpen?: boolean;
+    /**
+     * Callback fired when popup requests to be open or closed.
+     */
+    onOpenChange?: (open: boolean, event?: Event) => void;
     /**
      * Allows to control whether the popup is open.
      * This is a controlled counterpart of `defaultOpen`
      */
     open?: boolean;
-    /**
-     * Callback fired when popup requests to be open or closed.
-     */
-    onOpenChange?: (open: boolean, event?: Event) => void;
     /**
      * Placement position of the popup dropdownn wrt to trigger.
      * @default 'bottom-start'
      */
     placement?: Placement;
 }
-export interface UsePopupOptions extends PopupProps {
-}
-export type PopupContextProps = ReturnType<typeof usePopup> | null;
+export type UsePopupOptions = PopupProps;

package/dist/components/popovers/popup/popup/use-popup.d.ts

@@ -1,13 +1,5 @@
 import { UsePopupOptions } from './popup.types';
 declare const usePopup: (props: UsePopupOptions) => {
-    isOpen: boolean;
-    setIsOpen: (o: boolean, e?: Event) => void;
-    refs: {
-        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
-        floating: React.MutableRefObject<HTMLElement | null>;
-        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
-        setFloating: (node: HTMLElement | null) => void;
-    } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
     context: {
         x: number;
         y: number;
@@ -27,5 +19,13 @@ declare const usePopup: (props: UsePopupOptions) => {
         elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
     };
     interactions: import('@floating-ui/react').UseInteractionsReturn;
+    isOpen: boolean;
+    refs: {
+        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+    setIsOpen: (o: boolean, e?: Event) => void;
 };
 export default usePopup;

package/dist/components/popovers/popup/popup-content/popup-content.types.d.ts

@@ -1,19 +1,24 @@
 import { ReactNode } from 'react';
 export interface PopupContentProps {
     /**
-     * Custom class name for the container of the component.
+     * Change the default rendered element for the one passed as a child,
+     * merging their props and behavior.
+     * @default false
      */
-    className?: string;
+    asChild?: boolean;
     /**
      * The content of the component.
      */
     children?: ReactNode;
     /**
-     * Change the default rendered element for the one passed as a child,
-     * merging their props and behavior.
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * If `true`, the popup will always be mounted in the DOM.
      * @default false
      */
-    asChild?: boolean;
+    keepMounted?: boolean;
     /**
      * Determines if focus is `modal`, meaning focus is fully trapped inside
      * the floating element and outside content cannot be accessed.
@@ -24,9 +29,4 @@ export interface PopupContentProps {
      * Custom position of popup.
      */
     positionElement?: HTMLElement | null;
-    /**
-     * If `true`, the popup will always be mounted in the DOM.
-     * @default false
-     */
-    keepMounted?: boolean;
 }

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

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

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

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/react';
 import { default as Tooltip } from './tooltip';
 import { Story } from './tooltip.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta<typeof Tooltip>;
 export default meta;
 export declare const Simple: Story;

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

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as Tooltip } from './tooltip';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof Tooltip>;
 export default meta;
 export type Story = StoryObj<typeof Tooltip>;

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

@@ -1,31 +1,31 @@
 import { Placement } from '@floating-ui/react';
-import { default as React, HTMLAttributes, ReactElement, ReactNode } from 'react';
+import { HTMLAttributes, ReactElement, ReactNode, default as React } from 'react';
 export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-    /**
-     * Custom class name for the tooltip container
-     */
-    className?: string;
     /**
      * The tooltip child has to be a valid React element
      */
     children: ReactElement;
     /**
-     * The tooltip message, it can be string or any valid React node
-     */
-    title: ReactNode;
-    /**
-     * Location of the tooltip, default is 'top'. The placement automatically adjusts if there is not enough space
-     * to render in the specified direction
+     * Custom class name for the tooltip container
      */
-    placement?: Placement;
+    className?: string;
     /**
      * By default the tooltip container is attached to the body, turning on this flag will attach it to the container
      * where the tooltip component is used
      */
     disablePortal?: boolean;
+    /**
+     * Location of the tooltip, default is 'top'. The placement automatically adjusts if there is not enough space
+     * to render in the specified direction
+     */
+    placement?: Placement;
     /**
      * Specify a custom container (using id or ref) to attach the tooltip to. The tooltip will also use this container to
      * determine the placement of the tooltip
      */
-    portalRoot?: string | HTMLElement | React.MutableRefObject<HTMLElement | null>;
+    portalRoot?: HTMLElement | React.MutableRefObject<HTMLElement | null> | string;
+    /**
+     * The tooltip message, it can be string or any valid React node
+     */
+    title: ReactNode;
 }

package/dist/components/surfaces/accordion/accordion/accordion.types.d.ts

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react';
 export interface AccordionProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
     /**
      * A unique value for the item.
      */

package/dist/components/surfaces/accordion/accordion-content/accordion-content.types.d.ts

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react';
 export interface AccordionContentProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
     /**
      * Used to force mounting when more control is needed.
      * @default false