@bloomreach/react-banana-ui 1.3.0 → 1.5.0

package/dist/components/buttons/button/button.d.ts

@@ -1,4 +1,5 @@
-import { ButtonHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
+import { ButtonHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import './button.scss';
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
     /**
      * The content of the component.
@@ -40,7 +41,7 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
     /**
      * Callback fired when the component is clicked.
      */
-    onClick?: (event: SyntheticEvent<HTMLButtonElement>) => void;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Icon displayed before the children.
      */

package/dist/components/buttons/button/button.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Meta, StoryObj } from '@storybook/react';
 import { Button } from '..';
 declare const meta: Meta<typeof Button>;

package/dist/components/buttons/button-group/button-group.d.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { ButtonProps } from '../button/button';
+import './button-group.scss';
 export interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**
      * The content of the component.

package/dist/components/buttons/toggle-button/toggle-button.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement, ForwardedRef, ReactNode, SyntheticEvent } from 'react';
 import { ButtonProps } from '../button/button';
+import './toggle-button.scss';
 export interface ToggleButtonProps<T extends string | number = string> extends Omit<ButtonProps, 'onClick'> {
     /**
      * The content of the component.

package/dist/components/containers/dropdown/dropdown.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { DOMRectBounds } from '../../../utils';
+import './dropdown.scss';
 export interface IDropdown {
     /** Allows children */
     children?: React.ReactNode;

package/dist/components/containers/scroll-region/scroll-region.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { DOMRectBounds, INestedChildren } from '../../../utils';
+import './scroll-region.scss';
 export declare const ScrollRegionMode: {
     readonly LIGHT: "ScrollRegion--light";
     readonly DARK: "ScrollRegion--dark";

package/dist/components/containers/scroll-view/scroll-view.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { DOMRectBounds, INestedChildren } from '../../../utils';
+import './scroll-view.scss';
 export declare enum ScrollBarSide {
     RIGHT = 0,
     LEFT = 1

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

@@ -0,0 +1 @@
+export * from './menu';

package/dist/components/dropdowns/menu/index.d.ts

@@ -0,0 +1,13 @@
+export { Menu } from './menu';
+export { MenuButton } from './menu-button';
+export { MenuContent } from './menu-content';
+export { MenuGroup } from './menu-group';
+export { MenuGroupLabel } from './menu-group-label';
+export { MenuItem } from './menu-item';
+export { MenuSeparator } from './menu-separator';
+export type { MenuProps } from './menu';
+export type { MenuButtonProps } from './menu-button';
+export type { MenuContentProps } from './menu-content';
+export type { MenuGroupProps } from './menu-group';
+export type { MenuGroupLabelProps } from './menu-group-label';
+export type { MenuItemProps } from './menu-item';

package/dist/components/dropdowns/menu/menu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Menu } from './menu';
+export type { MenuProps } from './menu.types';

package/dist/components/dropdowns/menu/menu/menu.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { MenuProps } from './menu.types';
+declare function Menu(props: React.PropsWithChildren<MenuProps>): JSX.Element;
+declare namespace Menu {
+    var displayName: string;
+}
+export default Menu;

package/dist/components/dropdowns/menu/menu/menu.stories.d.ts

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

package/dist/components/dropdowns/menu/menu/menu.types.d.ts

@@ -0,0 +1,11 @@
+import { SyntheticEvent } from 'react';
+export interface MenuProps {
+    /**
+     * Allows to control whether the dropdown is open.
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the component requests to be opened or closed.
+     */
+    onOpenChange?: (event: SyntheticEvent | null, open: boolean) => void;
+}

package/dist/components/dropdowns/menu/menu-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuButton } from './menu-button';
+export type { MenuButtonProps } from './menu-button.types';

package/dist/components/dropdowns/menu/menu-button/menu-button.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { MenuButtonProps } from './menu-button.types';
+declare const MenuButton: import("react").ForwardRefExoticComponent<MenuButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default MenuButton;

package/dist/components/dropdowns/menu/menu-button/menu-button.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import MenuButton from './menu-button';
+declare const meta: Meta;
+export default meta;
+export type Story = StoryObj<typeof MenuButton>;
+export declare const MenuButtonStory: Story;

package/dist/components/dropdowns/menu/menu-button/menu-button.types.d.ts

@@ -0,0 +1,3 @@
+import type { ButtonProps } from '../../../buttons';
+export interface MenuButtonProps extends ButtonProps {
+}

package/dist/components/dropdowns/menu/menu-content/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuContent } from './menu-content';
+export type { MenuContentProps } from './menu-content.types';

package/dist/components/dropdowns/menu/menu-content/menu-content.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { MenuContentProps } from './menu-content.types';
+import './menu-content.scss';
+declare const MenuContent: import("react").ForwardRefExoticComponent<MenuContentProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default MenuContent;

package/dist/components/dropdowns/menu/menu-content/menu-content.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import MenuContent from './menu-content';
+declare const meta: Meta;
+export default meta;
+export type Story = StoryObj<typeof MenuContent>;
+export declare const MenuContentStory: Story;
+export declare const MenuContentTopPlacement: Story;
+export declare const MenuContentRightPlacement: Story;
+export declare const MenuContentBottomPlacement: Story;
+export declare const MenuContentLeftPlacement: Story;

package/dist/components/dropdowns/menu/menu-content/menu-content.types.d.ts

@@ -0,0 +1,12 @@
+import { Placement } from '@floating-ui/react';
+export interface MenuContentProps {
+    /**
+     * Custom class for the component
+     */
+    className?: string;
+    /**
+     * Placement position of the menu dropdownn wrt to trigger.
+     * @default 'bottom-end'
+     */
+    placement?: Placement;
+}

package/dist/components/dropdowns/menu/menu-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuGroup } from './menu-group';
+export type { MenuGroupProps } from './menu-group.types';

package/dist/components/dropdowns/menu/menu-group/menu-group.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import type { MenuGroupProps } from './menu-group.types';
+import './menu-group.scss';
+declare function MenuGroup(props: PropsWithChildren<MenuGroupProps>): JSX.Element;
+declare namespace MenuGroup {
+    var displayName: string;
+}
+export default MenuGroup;

package/dist/components/dropdowns/menu/menu-group/menu-group.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import MenuGroup from './menu-group';
+declare const meta: Meta;
+export default meta;
+export type Story = StoryObj<typeof MenuGroup>;
+export declare const MenuGroupStory: Story;

package/dist/components/dropdowns/menu/menu-group/menu-group.types.d.ts

@@ -0,0 +1,6 @@
+export interface MenuGroupProps {
+    /**
+     * Custom class for the component
+     */
+    className?: string;
+}

package/dist/components/dropdowns/menu/menu-group-label/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuGroupLabel } from './menu-group-label';
+export type { MenuGroupLabelProps } from './menu-group-label.types';

package/dist/components/dropdowns/menu/menu-group-label/menu-group-label.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import type { MenuGroupLabelProps } from './menu-group-label.types';
+import './menu-group-label.scss';
+declare function MenuGroupLabel(props: PropsWithChildren<MenuGroupLabelProps>): JSX.Element;
+declare namespace MenuGroupLabel {
+    var displayName: string;
+}
+export default MenuGroupLabel;

package/dist/components/dropdowns/menu/menu-group-label/menu-group-label.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import MenuGroupLabel from './menu-group-label';
+declare const meta: Meta;
+export default meta;
+export type Story = StoryObj<typeof MenuGroupLabel>;
+export declare const MenuGroupLabelStory: Story;

package/dist/components/dropdowns/menu/menu-group-label/menu-group-label.types.d.ts

@@ -0,0 +1,6 @@
+export interface MenuGroupLabelProps {
+    /**
+     * Custom class for the component
+     */
+    className?: string;
+}

package/dist/components/dropdowns/menu/menu-item/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuItem } from './menu-item';
+export type { MenuItemProps } from './menu-item.types';

package/dist/components/dropdowns/menu/menu-item/menu-item.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { MenuItemProps } from './menu-item.types';
+import './menu-item.scss';
+declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLUListElement>>;
+export default MenuItem;

package/dist/components/dropdowns/menu/menu-item/menu-item.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import MenuItem from './menu-item';
+declare const meta: Meta;
+export default meta;
+export type Story = StoryObj<typeof MenuItem>;
+export declare const MenuItemStory: Story;

package/dist/components/dropdowns/menu/menu-item/menu-item.types.d.ts

@@ -0,0 +1,20 @@
+import { MouseEventHandler, ReactNode } from 'react';
+export interface MenuItemProps {
+    /**
+     * Custom class for the component
+     */
+    className?: string;
+    /**
+     * Event fired on click or selection of an item
+     */
+    onClick?: MouseEventHandler<HTMLElement>;
+    /**
+     * If `true`, the menu item will be disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Icon displayed before the content
+     */
+    startIcon?: ReactNode;
+}

package/dist/components/dropdowns/menu/menu-separator/index.d.ts

@@ -0,0 +1 @@
+export { default as MenuSeparator } from './menu-separator';

package/dist/components/dropdowns/menu/menu-separator/menu-separator.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './menu-separator.scss';
+declare function MenuSeparator(): JSX.Element;
+declare namespace MenuSeparator {
+    var displayName: string;
+}
+export default MenuSeparator;

package/dist/components/dropdowns/menu/menu-separator/menu-separator.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import MenuSeparator from './menu-separator';
+declare const meta: Meta;
+export default meta;
+export type Story = StoryObj<typeof MenuSeparator>;
+export declare const MenuSeparatorStory: Story;

package/dist/components/dropdowns/menu/menu.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare function SplitButton(): JSX.Element;
+export declare function GlobalRankingRule(): JSX.Element;

package/dist/components/feedback/alert/alert-title.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import './alert-title.scss';
 export interface AlertTitleProps {
     /**
      * The content of the component.

package/dist/components/feedback/alert/alert.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import './alert.scss';
 export type AlertType = 'error' | 'info' | 'success' | 'warning';
 export interface AlertProps {
     /**

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './buttons';
+export * from './dropdowns';
 export * from './feedback';
 export * from './foundations';
 export * from './inputs';

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import './base-field.scss';
 export interface BaseFieldProps {
     /**
      * Custom class name for the container of this component.
@@ -8,10 +9,6 @@ export interface BaseFieldProps {
      * The control element to render as the main content of the field.
      */
     control: ReactNode;
-    /**
-     * The `id` of the `control` element to connect it with `label` in the field.
-     */
-    controlId: string;
     /**
      * If `true`, the field will indicate an error.
      */
@@ -28,6 +25,11 @@ export interface BaseFieldProps {
      * The label content.
      */
     label?: ReactNode;
+    /**
+     * The position of the label.
+     * @default 'block-start'
+     */
+    labelPosition?: 'block-start' | 'inline-start' | 'inline-end';
     /**
      * The metadata content.
      */
@@ -37,6 +39,7 @@ export interface BaseFieldProps {
      */
     tooltip?: ReactNode;
 }
+export declare const getZeroSpace: () => JSX.Element;
 /**
  * @internal
  * Base component provides the layout for the field which includes:

package/dist/components/inputs/base-input/base-input.d.ts

@@ -1,4 +1,5 @@
 import React, { ChangeEventHandler, FocusEventHandler, InputHTMLAttributes, ReactNode } from 'react';
+import './base-input.scss';
 export interface BaseInputProps {
     /**
      * Automatically adjusts textarea height to match the length of the content within.

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

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import './field-label.scss';
+export interface FieldLabelProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The content of the component.
+     */
+    children: ReactNode;
+    /**
+     * The `id` of the element the label is associated with.
+     */
+    htmlFor?: string;
+    /**
+     * The size of the label.
+     * @default 'bold'
+     */
+    view?: 'normal' | 'bold';
+}
+/**
+ * @internal
+ * The `FieldLabel` component renders a label for a form field like `input`, `select`, `textarea`, etc.
+ * It has a default bold view and can be changed to a normal view for checkbox, radio or toggle fields.
+ * Internally used with the `BaseField` component to render a label for a field.
+ * Might be used as a standalone component for custom form fields, check the usage example.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { FieldLabel } from '@bloomreach/react-banana-ui';
+ * import { FieldInput } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomLabel() {
+ *   return (
+ *     <>
+ *      <FieldInput id="input" />
+  *      <FieldLabel htmlFor="input">Write an example of component usage</FieldLabel>
+  *    </>
+ *   );
+ * }
+ * ```
+ */
+declare const FieldLabel: import("react").ForwardRefExoticComponent<FieldLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+export default FieldLabel;

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

@@ -0,0 +1,2 @@
+export { default as FieldLabel } from './field-label';
+export type { FieldLabelProps } from './field-label';

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

@@ -1,2 +1,3 @@
 export * from './input-field';
 export * from './text-field';
+export * from './toggle-field';

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

@@ -1,2 +1,4 @@
 export * from './base-field';
 export * from './base-input';
+export * from './field-label';
+export * from './toggle';

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { DOMRectBounds, DOMRectPadding } from '../../../utils';
+import './selection.scss';
 /**
  * Builds a selection's options from an object style enum.
  */

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

@@ -1,4 +1,5 @@
 import { ChangeEventHandler, FocusEventHandler, ReactNode, TextareaHTMLAttributes } from 'react';
+import './text-field.scss';
 export interface TextFieldProps {
     /**
      * Automatically adjusts `textarea` height to match the length of the content within.

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

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

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

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+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.
+ * They usually do not need to be confirmed or reviewed.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { Toggle } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomToggle() {
+ *   return <Toggle name="fieldName" />;
+ * }
+ * ```
+ */
+declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;
+export default Toggle;

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

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

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

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { ToggleProps } from '../../internal';
+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
+ * do not need to be confirmed or reviewed.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { ToggleField } from '@bloomreach/react-banana-ui';
+ * import { useState } from 'react';
+ *
+ * export default function AppTheme() {
+ *   const [isDark, setIsDark] = useState(false);
+ *
+ *   return (
+ *     <ToggleField
+ *       label="Dark mode"
+ *       checked={isDark}
+ *       onChange={() => setIsDark(!isDark)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare const ToggleField: import("react").ForwardRefExoticComponent<ToggleFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export default ToggleField;

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

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

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import ToggleField from './toggle-field';
+declare const meta: Meta<typeof ToggleField>;
+export default meta;
+export type Story = StoryObj<typeof ToggleField>;
+export declare const Basic: Story;
+export declare const WithTooltip: Story;
+export declare const WithoutLabel: Story;
+export declare const Controlled: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;

package/dist/components/lists/list-view/list-view.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { DOMRectBounds, INestedChildren } from '../../../utils';
 import { ScrollRegion } from '../../containers/scroll-region/scroll-region';
 import { ScrollView } from '../../containers/scroll-view/scroll-view';
+import './list-view.scss';
 export interface IRowProps {
     /** The index of the row to be rendered. */
     index: number;

package/dist/components/loaders/loader/loader.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import './loader.scss';
 export declare const LoaderSize: {
     readonly NORMAL: "Loader--medium";
     readonly SMALL: "Loader--small";

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { 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/modal-body.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ModalBodyProps } from './modal-types';
+import './modal.scss';
 /**
  * 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.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { 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/tooltip/tooltip.d.ts

@@ -1,5 +1,6 @@
 import { Placement } from '@floating-ui/react';
 import React, { ReactNode, ReactElement, HTMLAttributes } from 'react';
+import './tooltip.scss';
 export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     /**
      * Custom class name for the tooltip container