@bloomreach/react-banana-ui 1.8.5 → 1.9.1

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

@@ -1,4 +1,4 @@
-import { SelectComponentType } from './select.types';
+import type { SelectComponentType } from './select.types';
 import './select.scss';
 /**
  * @internal

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

@@ -1,4 +1,4 @@
-import { SelectFieldComponentType } from './select-field.types';
+import type { SelectFieldComponentType } from './select-field.types';
 /**
  * The `SelectField` component is meant to optimize user interaction and experience.
  * It is a customizable dropdown list that allows users to choose one or more options from a list.

package/dist/components/inputs/select-option/select-option.d.ts

@@ -1,4 +1,4 @@
-import { SelectOptionComponentType } from './select-option.types';
+import type { SelectOptionComponentType } from './select-option.types';
 import './select-option.scss';
 declare const _default: SelectOptionComponentType;
 export default _default;

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

@@ -1,2 +1,2 @@
 export { default as TextField } from './text-field';
-export type { TextFieldProps } from './text-field';
+export type { TextFieldProps } from './text-field.types';

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

@@ -1,110 +1,6 @@
-import { ChangeEventHandler, FocusEventHandler, ReactNode, TextareaHTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { TextFieldProps } from './text-field.types';
 import './text-field.scss';
-export interface TextFieldProps {
-    /**
-     * Automatically adjusts `textarea` height to match the length of the content within.
-     */
-    autoSize?: boolean;
-    /**
-     * Custom class name for the container of this component.
-     */
-    className?: string;
-    /**
-     * If `true`, the field will display a character counter.
-     * When the `maxCount` is also specified, the counter will be displayed like `x/y`,
-     * where `x` is the current number of characters entered and `y` is the maximum number of characters allowed.
-     */
-    counter?: boolean;
-    /**
-     * The default value. Use when the component is not controlled.
-     */
-    defaultValue?: string;
-    /**
-     * If `true`, the `field is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the ``field` will indicate an error and set the `aria-invalid` attribute for `textarea`.
-     */
-    error?: boolean;
-    /**
-     * If `true`, the `field will take up the full width of its container.
-     */
-    fullWidth?: boolean;
-    /**
-     * The helper text content.
-     */
-    helperText?: ReactNode;
-    /**
-     * The `id` of the `textarea` element.
-     */
-    id?: string;
-    /**
-     * The label content.
-     */
-    label?: ReactNode;
-    /**
-     * The maximum number of characters allowed in the field to display in the counter.
-     * It doesn't prevent the user from typing more characters.
-     * To do that, set the `maxLength` attribute via `textareaProps`.
-     */
-    maxCount?: number;
-    /**
-     * The maximum number of text lines to grow when `autoSize` is `true`.
-     */
-    maxRows?: number;
-    /**
-     * The number of visible text lines for the field.
-     * When `autoSize` is `false`, this prop behaves as `rows` for `textarea`.
-     * @default 3
-     */
-    minRows?: number;
-    /**
-     * The `name` attribute of the `textarea` element.
-     */
-    name?: string;
-    /**
-     * Callback fired when the `textarea` is blurred.
-     */
-    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
-    /**
-     * Callback fired when the value is changed.
-     */
-    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
-    /**
-     * Callback fired when the `textarea` is focused.
-     */
-    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
-    /**
-     * The short hint displayed in the `textarea` before the user enters a value.
-     */
-    placeholder?: string;
-    /**
-     * If `true`, the `textarea` will be read-only.
-     */
-    readOnly?: boolean;
-    /**
-     * If `true`, the `textarea` is required.
-     */
-    required?: boolean;
-    /**
-     * If `true`, the `textarea` will be manually resizable.
-     */
-    resizable?: boolean;
-    /**
-     * Attributes applied to the `textarea` element, check the link below for more details.
-     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes
-     */
-    textareaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;
-    /**
-     * Tooltip to display when the field has label.
-     */
-    tooltip?: ReactNode;
-    /**
-     * The `value` of the `textarea` element, required for a controlled component.
-     */
-    value?: string;
-}
 /**
  * The text field includes a label, a helper text and a textarea field where users can type multiline of text.
  * The text field component typically appears in forms and dialogs.

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

@@ -0,0 +1,106 @@
+import { ChangeEventHandler, FocusEventHandler, ReactNode, TextareaHTMLAttributes } from 'react';
+export interface TextFieldProps {
+    /**
+     * Automatically adjusts `textarea` height to match the length of the content within.
+     */
+    autoSize?: boolean;
+    /**
+     * Custom class name for the container of this component.
+     */
+    className?: string;
+    /**
+     * If `true`, the field will display a character counter.
+     * When the `maxCount` is also specified, the counter will be displayed like `x/y`,
+     * where `x` is the current number of characters entered and `y` is the maximum number of characters allowed.
+     */
+    counter?: boolean;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: string;
+    /**
+     * If `true`, the `field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the ``field` will indicate an error and set the `aria-invalid` attribute for `textarea`.
+     */
+    error?: boolean;
+    /**
+     * If `true`, the `field will take up the full width of its container.
+     */
+    fullWidth?: boolean;
+    /**
+     * The helper text content.
+     */
+    helperText?: ReactNode;
+    /**
+     * The `id` of the `textarea` element.
+     */
+    id?: string;
+    /**
+     * The label content.
+     */
+    label?: ReactNode;
+    /**
+     * The maximum number of characters allowed in the field to display in the counter.
+     * It doesn't prevent the user from typing more characters.
+     * To do that, set the `maxLength` attribute via `textareaProps`.
+     */
+    maxCount?: number;
+    /**
+     * The maximum number of text lines to grow when `autoSize` is `true`.
+     */
+    maxRows?: number;
+    /**
+     * The number of visible text lines for the field.
+     * When `autoSize` is `false`, this prop behaves as `rows` for `textarea`.
+     * @default 3
+     */
+    minRows?: number;
+    /**
+     * The `name` attribute of the `textarea` element.
+     */
+    name?: string;
+    /**
+     * Callback fired when the `textarea` is blurred.
+     */
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+    /**
+     * Callback fired when the value is changed.
+     */
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    /**
+     * Callback fired when the `textarea` is focused.
+     */
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    /**
+     * The short hint displayed in the `textarea` before the user enters a value.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the `textarea` will be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * If `true`, the `textarea` is required.
+     */
+    required?: boolean;
+    /**
+     * If `true`, the `textarea` will be manually resizable.
+     */
+    resizable?: boolean;
+    /**
+     * Attributes applied to the `textarea` element, check the link below for more details.
+     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes
+     */
+    textareaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;
+    /**
+     * Tooltip to display when the field has label.
+     */
+    tooltip?: ReactNode;
+    /**
+     * The `value` of the `textarea` element, required for a controlled component.
+     */
+    value?: string;
+}

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

@@ -1,2 +1,2 @@
 export { default as Toggle } from './toggle';
-export type { ToggleProps } from './toggle';
+export type { ToggleProps } from './toggle.types';

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

@@ -1,43 +1,6 @@
 /// <reference types="react" />
+import type { ToggleProps } from './toggle.types';
 import './toggle.scss';
-export interface ToggleProps {
-    /**
-     * If `true`, the toggle is checked.
-     */
-    checked?: boolean;
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
-    /**
-     * The state of the toggle when it is initially rendered. Use when you do not need to control its state.
-     */
-    defaultChecked?: boolean;
-    /**
-     * When `true`, prevents the user from interacting with the switch.
-     */
-    disabled?: boolean;
-    /**
-     * The props applied to the input element.
-     */
-    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-    /**
-     * The `name` of the `input` element.
-     */
-    name?: string;
-    /**
-     * Callback fired when the state is changed.
-     */
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    /**
-     * If `true`, the component is read only and prevent user to change value.
-     */
-    readOnly?: boolean;
-    /**
-     * If `true`, the `input` element is required.
-     */
-    required?: boolean;
-}
 /**
  * Toggle represents an action that changes a state by clicking on it.
  * They are usually used for actions or options that have an immediate effect on the UI.

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

@@ -0,0 +1,39 @@
+import { ChangeEventHandler, InputHTMLAttributes } from 'react';
+export interface ToggleProps {
+    /**
+     * If `true`, the toggle is checked.
+     */
+    checked?: boolean;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The state of the toggle when it is initially rendered. Use when you do not need to control its state.
+     */
+    defaultChecked?: boolean;
+    /**
+     * When `true`, prevents the user from interacting with the switch.
+     */
+    disabled?: boolean;
+    /**
+     * The props applied to the input element.
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * The `name` of the `input` element.
+     */
+    name?: string;
+    /**
+     * Callback fired when the state is changed.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * If `true`, the component is read only and prevent user to change value.
+     */
+    readOnly?: boolean;
+    /**
+     * If `true`, the `input` element is required.
+     */
+    required?: boolean;
+}

package/dist/components/inputs/toggle-field/index.d.ts

@@ -1,2 +1,2 @@
 export { default as ToggleField } from './toggle-field';
-export type { ToggleFieldProps } from './toggle-field';
+export type { ToggleFieldProps } from './toggle-field.types';

package/dist/components/inputs/toggle-field/toggle-field.d.ts

@@ -1,20 +1,6 @@
-import { ReactNode } from 'react';
-import { ToggleProps } from '../../internal';
+/// <reference types="react" />
+import type { ToggleFieldProps } from './toggle-field.types';
 import './toggle-field.scss';
-export interface ToggleFieldProps extends ToggleProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
-    /**
-     * The label content.
-    */
-    label?: ReactNode;
-    /**
-     * Tooltip to display when the field has label.
-     */
-    tooltip?: ReactNode;
-}
 /**
  * The toggle field represents an action that changes a state by clicking on it.
  * Usually used for actions or options that have an immediate effect on the UI and

package/dist/components/inputs/toggle-field/toggle-field.types.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import type { ToggleProps } from '../../internal';
+export interface ToggleFieldProps extends ToggleProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The label content.
+    */
+    label?: ReactNode;
+    /**
+     * Tooltip to display when the field has label.
+     */
+    tooltip?: ReactNode;
+}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ListboxProps } from './listbox.types';
+import type { ListboxProps } from './listbox.types';
 import './listbox.scss';
 /**
  * @internal

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ListboxItemProps } from './listbox-item.types';
+import type { ListboxItemProps } from './listbox-item.types';
 import './listbox-item.scss';
 /**
  * @internal

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 type { PaginationProps } from './pagination.types';

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

@@ -1,4 +1,4 @@
-import { ItemsPerPageOptionsType } from './pagination-types';
+import type { ItemsPerPageOptionsType } from './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;

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

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

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

@@ -1,4 +1,4 @@
-import { PageNavigationItemsListType } from './pagination-types';
+import type { PageNavigationItemsListType } from './pagination.types';
 export declare const SEPARATOR = "...";
 export declare function range(from: number, count: number): Array<number>;
 /**

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PageNavigationItemType } from './pagination-types';
+import type { PageNavigationItemType } from './pagination.types';
 export interface PaginationNavigationItemProps {
     value: PageNavigationItemType;
 }

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PaginationProps } from './pagination-types';
+import type { PaginationProps } from './pagination.types';
 import './pagination.scss';
 /**
  * Pagination component to display pagination links and manage the number of items per page

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

@@ -5,4 +5,4 @@ export { default as ModalBody } from './modal-body';
 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 type { ModalProps, ModalChildProps, ModalBodyProps } from './modal.types';

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ModalBodyProps } from './modal-types';
+import type { ModalBodyProps } from './modal.types';
 import './modal.scss';
 /**
  * Modal body component is used to render the body section of the modal dialog.

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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { ButtonProps } from '../../buttons/button/button';
+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

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ModalProps } from './modal-types';
+import type { ModalProps } from './modal.types';
 declare const ModalContext: import("react").Context<ModalProps | null>;
 export declare function useModalContext(): ModalProps | null;
 export default ModalContext;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ModalChildProps } from './modal-types';
+import type { ModalChildProps } from './modal.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.

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ModalChildProps } from './modal-types';
+import type { ModalChildProps } from './modal.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.

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ModalChildProps } from './modal-types';
+import type { ModalChildProps } from './modal.types';
 /**
  * Modal header title is used to render the title in the header section of the modal dialog.
  */

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ModalChildProps } from './modal-types';
+import type { ModalChildProps } from './modal.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.

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ModalProps } from './modal-types';
+import type { ModalProps } from './modal.types';
 import './modal.scss';
 /**
  * Modal component lets you create dialogs that force the user to take action before continuing

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

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

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

@@ -1,2 +1,2 @@
 export { default as Tooltip } from './tooltip';
-export type { TooltipProps } from './tooltip';
+export type { TooltipProps } from './tooltip.types';

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

@@ -1,35 +1,6 @@
-import { Placement } from '@floating-ui/react';
-import React, { ReactNode, ReactElement, HTMLAttributes } from 'react';
+import React from 'react';
+import type { TooltipProps } from './tooltip.types';
 import './tooltip.scss';
-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
-     */
-    placement?: Placement;
-    /**
-     * 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;
-    /**
-     * 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>;
-}
 /**
  * The tooltip component is supposed to display informative text when users hover over or tap an element
  *

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

@@ -0,0 +1,31 @@
+import { Placement } from '@floating-ui/react';
+import React, { ReactNode, ReactElement, HTMLAttributes } 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
+     */
+    placement?: Placement;
+    /**
+     * 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;
+    /**
+     * 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>;
+}