@bloomreach/react-banana-ui 1.1.0-next.1

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

@@ -0,0 +1,71 @@
+import { ButtonHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
+export interface BrButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Custom class name for the container of this component.
+     */
+    className?: string;
+    /**
+     * The color of the component.
+     * @default 'default'
+     */
+    color?: 'default' | 'alternative' | 'danger';
+    /**
+     * If `true`, the button will be disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Icon displayed after the children.
+     */
+    endIcon?: ReactNode;
+    /**
+     * Set the original html type of button,
+     * see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
+     * @default 'button'
+     */
+    htmlType?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    /**
+     * If `true`, the button will be in a loading state.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Text to display when the button is in a loading state.
+     */
+    loadingText?: string;
+    /**
+     * Callback fired when the component is clicked.
+     */
+    onClick?: (event: SyntheticEvent<HTMLButtonElement>) => void;
+    /**
+     * Icon displayed before the children.
+     */
+    startIcon?: ReactNode;
+    /**
+     * Tooltip to display when the button is hovered or focused.
+     */
+    tooltip?: ReactNode;
+    /**
+     * The button type.
+     * @default 'secondary'
+     */
+    type?: 'primary' | 'secondary' | 'tertiary';
+}
+/**
+ * The button allow users to take actions, and make choices, with a single tap.
+ *
+ * ## Usage
+ * ```jsx
+ * import { BrButton } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyComponent() {
+ *   return <BrButton onClick={() => console.log('click')}>Button</BrButton>;
+ * }
+ * ```
+ */
+declare const BrButton: import("react").ForwardRefExoticComponent<BrButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default BrButton;

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

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/react';
+import { type Story } from './button.stories';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: Story;
+export declare const Loading: Story;
+export declare const Icons: Story;
+export declare const WithTooltip: Story;

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

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { BrButton } from '..';
+declare const meta: Meta<typeof BrButton>;
+export default meta;
+export type Story = StoryObj<typeof BrButton>;
+export declare const Wrapper: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const Basic: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;
+export declare const IconStart: Story;
+export declare const IconBoth: Story;
+export declare const IconEnd: Story;
+export declare const WithTooltip: Story;
+export declare const NativeButton: Story;

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

@@ -0,0 +1 @@
+export { default as BrButton } from './button';

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

@@ -0,0 +1,41 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BrButtonProps } from '../button/button';
+export interface BrButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * The content of the component.
+     */
+    children: ReactNode;
+    /**
+     * Custom class name for the container of this component.
+     */
+    className?: string;
+    /**
+     * If `true`, the group and all children will be disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The button type.
+     * @default 'secondary'
+     */
+    type?: BrButtonProps['type'];
+}
+/**
+ * The button group component can be used to group related buttons.
+ *
+ * ## Usage
+ * ```jsx
+ * import { BrButton, BrButtonGroup } from '@bloomreach/react-banana-ui';
+ *
+ * function MyButtonGroup() {
+ *   return (
+ *     <BrButtonGroup>
+ *       <BrButton>One</BrButton>
+ *       <BrButton>Two</BrButton>
+ *     </BrButtonGroup>
+ *   );
+ * }
+ * ```
+ */
+declare const BrButtonGroup: import("react").ForwardRefExoticComponent<BrButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default BrButtonGroup;

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { BrButtonGroup } from '..';
+declare const meta: Meta<typeof BrButtonGroup>;
+export default meta;
+type Story = StoryObj<typeof BrButtonGroup>;
+export declare const Basic: Story;
+export declare const Icons: Story;
+export declare const OneDisabledButton: Story;
+export declare const OneButton: Story;

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

@@ -0,0 +1,2 @@
+export { default as BrButtonGroup } from './button-group';
+export type { BrButtonGroupProps } from './button-group';

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

@@ -0,0 +1,4 @@
+export * from './button';
+export * from './button-group';
+export * from './toggle-button';
+export * from './toggle-button-group';

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

@@ -0,0 +1,2 @@
+export { default as BrToggleButton } from './toggle-button';
+export type { BrToggleButtonProps } from './toggle-button';

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

@@ -0,0 +1,75 @@
+import { ReactElement, ForwardedRef, ReactNode, SyntheticEvent } from 'react';
+import { BrButtonProps } from '../button/button';
+export interface BrToggleButtonProps<T extends string | number = string> extends Omit<BrButtonProps, 'onClick'> {
+    /**
+     * The content of the component.
+     */
+    children: ReactNode;
+    /**
+     * Custom class name for the container of this component.
+     */
+    className?: string;
+    /**
+     * If `true`, the button will be disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback fired when the button is clicked.
+     */
+    onClick?: (event: SyntheticEvent<HTMLButtonElement>, value: T) => void;
+    /**
+     * If `true`, the button will be selected.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * The value to associate with the button when selected in a toggle button group.
+     */
+    value: T;
+}
+/**
+ * The current component is used as an argument for the `forwardRef` function to forward ref.
+ * However, to keep the generic interface of the `BrToggleButton` component we have to cast type
+ * after wrapping this component with the `forwardRef` function.
+ */
+declare function BrToggleButtonInner<T extends string | number = string>(props: BrToggleButtonProps<T>, forwardedRef: ForwardedRef<HTMLButtonElement>): ReactElement;
+/**
+ * The `BrToggleButton` component can be used to group related options.
+ *
+ * ## Usage
+ *
+ * ### Basic
+ * ```tsx
+ *  import { BrToggleButton, BrToggleButtonGroup } from '@bloomreach/react-banana-ui`;
+ *
+ *  export default BasicToggleGroup() {
+ *    const [value, setValue] = useState('mobile');
+ *
+ *    return (
+ *      <BrToggleButtonGroup
+ *        value={value}
+ *        onChange={(event, value) => { setValue(value); }}
+ *      >
+ *        <BrToggleButton value="web">Web</BrToggleButton>
+ *        <BrToggleButton value="mobile">Mobile</BrToggleButton>
+ *        <BrToggleButton value="desktop">Desktop</BrToggleButton>
+ *      </BrToggleButtonGroup>
+ *    );
+ *  };
+ * ```
+ *
+ * ### Defined value type
+ * The `BrToggleButton` is generic component and determinate value type
+ * based on `value` or it might be explicitly defined like
+ *
+ * ```tsx
+ * type MyValue = 'one' | 'two' | 'three';
+ * <BrToggleButton<MyValue> value="two">...</BrToggleButton>
+ * ```
+ * by default `value` has a `string` type.
+ */
+declare const _default: <T extends string | number = string>(props: BrToggleButtonProps<T> & {
+    ref?: ForwardedRef<HTMLButtonElement> | undefined;
+}) => ReturnType<typeof BrToggleButtonInner>;
+export default _default;

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { BrToggleButton } from '..';
+declare const meta: Meta<typeof BrToggleButton>;
+export default meta;
+type Story<T extends string | number = string> = StoryObj<typeof BrToggleButton<T>>;
+export declare const Basic: Story;
+export declare const Selectable: Story<number>;

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

@@ -0,0 +1,2 @@
+export { default as BrToggleButtonGroup } from './toggle-button-group';
+export type { BrToggleButtonGroupMultipleProps, BrToggleButtonGroupSingleProps } from './toggle-button-group';

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

@@ -0,0 +1,94 @@
+import { ForwardedRef, ReactElement, SyntheticEvent } from 'react';
+import { type BrButtonGroupProps } from '../button-group/button-group';
+interface BrToggleButtonGroupBaseProps extends Omit<BrButtonGroupProps, 'onChange'> {
+    /**
+     * If `true`, allow multiple items to be selected (checkbox behavior).
+     */
+    multiple?: boolean;
+}
+export interface BrToggleButtonGroupSingleProps<T extends string | number = string> extends BrToggleButtonGroupBaseProps {
+    multiple?: false;
+    /**
+     * Callback fired when the component is clicked. Value is a single value of the toggle button.
+     * If no value is selected the value is a `null`.
+     */
+    onChange?: (event: SyntheticEvent<HTMLButtonElement>, value: T) => void;
+    /**
+     * The currently selected value within the group is an array of selected values.
+     * The value must have reference equality with the option in order to be selected.
+     */
+    value?: T;
+}
+export interface BrToggleButtonGroupMultipleProps<T extends string | number = string> extends BrToggleButtonGroupBaseProps {
+    multiple: true;
+    /**
+     * Callback fired when the component is clicked. Value is an array of selected values.
+     * If no value is selected the value is an empty array.
+     */
+    onChange?: (event: SyntheticEvent<HTMLButtonElement>, value: T[]) => void;
+    /**
+     * The currently selected an array of values.
+     * The value must have reference equality with the option in order to be selected.
+     */
+    value?: T[];
+}
+/**
+ * The current component is used as an argument for the `forwardRef` function to forward ref.
+ * However, to keep the generic interface of the `BrToggleButtonGroup` component we have to cast type
+ * after wrapping this component with the `forwardRef` function.
+ */
+declare function BrToggleButtonGroupInner<T extends string | number = string>(props: BrToggleButtonGroupSingleProps<T>, forwardedRef: ForwardedRef<HTMLDivElement>): ReactElement;
+declare function BrToggleButtonGroupInner<T extends string | number = string>(props: BrToggleButtonGroupMultipleProps<T>, forwardedRef: ForwardedRef<HTMLDivElement>): ReactElement;
+/**
+ * The `BrToggleButtonGroup` controls the selected state of its child buttons when given its own `value` prop.
+ * To emphasize groups of related toggle buttons, a group should share a common container.
+ *
+ * ## Usage
+ *
+ * ### Basic
+ *  ```tsx
+ *  import { BrToggleButton, BrToggleButtonGroup } from '@bloomreach/react-banana-ui`;
+ *
+ *  export default BasicToggleGroup() {
+ *    const [value, setValue] = useState('mobile');
+ *
+ *    return (
+ *      <BrToggleButtonGroup
+ *        value={value}
+ *        onChange={(event, value) => { setValue(value); }}
+ *      >
+ *        <BrToggleButton value="web">Web</BrToggleButton>
+ *        <BrToggleButton value="mobile">Mobile</BrToggleButton>
+ *        <BrToggleButton value="desktop">Desktop</BrToggleButton>
+ *      </BrToggleButtonGroup>
+ *    );
+ *  };
+ *  ```
+ * The toggle group might be used as a radio button when selecting one option deselects any other
+ * it is the default behavior also as multiple selections by passing the `multiple` prop
+ * it allows to have multiple options selected.
+ *
+ * The toggle button group `value` is the currently selected value within the group or
+ * an array of selected values when `multiple` is `true`.
+ * The value must have reference equality with the option in order to be selected.
+ *
+ * The `onChange` callback is fired on the value change and has a different signature for the `value` argument.
+ * When `multiple` is `true` this is an array of selected values; when `false` is a single value.
+ * If no value is selected and  `multiple` is `true` the value is an empty array.
+ * In case when `multiple` is `false` then `onChange` the callback doesn't fire
+ * if the user clicks on the already selected value.
+ *
+ * The `BrToggleButtonGroup` is generic component and determinate value type
+ * based on `value` or it might be explicitly defined like
+ *
+ * ### Defined value type
+ * ```tsx
+ * type MyValue = 'one' | 'two' | 'three';
+ * <BrToggleButtonGroup<MyValue>>...</BrToggleButtonGroup>
+ * ```
+ * by default `value` has a `string` type and `string[]` for `multiple` mode.
+ */
+declare const _default: <T extends string | number = string>(props: BrToggleButtonGroupSingleProps<T> | (BrToggleButtonGroupMultipleProps<T> & {
+    ref?: ForwardedRef<HTMLDivElement> | undefined;
+})) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default _default;

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { BrToggleButtonGroup, BrToggleButtonGroupMultipleProps, BrToggleButtonGroupSingleProps } from '..';
+declare const meta: Meta<typeof BrToggleButtonGroup>;
+export default meta;
+type Story = StoryObj<BrToggleButtonGroupSingleProps>;
+export declare const Basic: Story;
+export declare const Multiple: StoryObj<BrToggleButtonGroupMultipleProps<number>>;
+export declare const IndividuallyToggleButtonStates: Story;

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

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { DOMRectBounds } from '../../../utils';
+export interface IDropdown {
+    /** Allows children */
+    children?: React.ReactNode;
+    /**
+     * When this is provided, it will open the menu relative to these provided
+     * bounds
+     */
+    bounds?: DOMRectBounds | null;
+    /** Provides a custom class name to the container of this component. */
+    className?: string;
+    /** Props to apply directly to the container div of this component */
+    containerProps?: React.HTMLProps<HTMLDivElement>;
+    /**
+     * If there is already a modal root in the document, you can specify one here.
+     * Otherwise, one will automatically be made
+     */
+    customModalRoot?: HTMLElement;
+    /**
+     * Provide a custom modal root by ID instead of element so this component will
+     * ensure the modal itself
+     */
+    customModalRootId?: string;
+    /**
+     * Will inline the contents of this dropdown if there are no bounds provided
+     */
+    showWithNoBounds?: boolean;
+    /**
+     * This makes the dropdown region cover the reference bounds IFF the dropdown
+     * can fit dropping down
+     */
+    coverBounds?: boolean;
+    /**
+     * When set, this renders this dropdown inline in the DOM where it is
+     * rendered. This lets you render the dropdown in a "relative" context easily.
+     */
+    inline?: boolean;
+    /**
+     * This is the suggested height of the region. This may not always be the true
+     * height as this region positions itself as good as possible relative to the
+     * reference bounds.
+     *
+     * If this is omitted, the height of the region is allowed to flex, but may
+     * cause a slight flicker while the region gets computed.
+     */
+    height?: number;
+    /**
+     * When provided this sets a manual width for the menu instead of utilizing
+     * the reference bound;
+     */
+    width?: number;
+    /**
+     * Does not let the modal's width exceed this amount.
+     */
+    maxWidth?: number;
+    /**
+     * If this is set, this will prioritize positioning itself above the bounds
+     * instead of below the bounds.
+     */
+    dropUp?: boolean;
+    /**
+     * If this is set, this will prioritize positioning itself left of the bounds
+     * instead of below the bounds.
+     */
+    dropLeft?: boolean;
+    /**
+     * If this is set, this will prioritize positioning itself right of the bounds
+     * instead of below the bounds.
+     */
+    dropRight?: boolean;
+    /**
+     * If this is set, this will prioritize positioning itself center of the bounds
+     * instead of below the bounds. Mainly used to center the tooltip component.
+     */
+    dropCenter?: boolean;
+    /**
+     * If this is set, this will perform a middling procedure to attempt to align
+     * the middle of the dropdown to its reference. This is specifically NOT
+     * called "centering" because it "can" be used to center the dropdown if the
+     * reference space is sufficiently small, but otherwise will NOT actually
+     * center the dropdown.
+     */
+    shiftToMiddle?: boolean;
+    /**
+     * Populates a ref object that points to this object
+     */
+    ref?: React.RefObject<Dropdown>;
+    /**
+     * This is a very advanced usage of the dropdown to help resolve overlapping
+     * drop down dismissals. When this is set, the dropdown will test to see if
+     * the event happened on the container instead of the modal root. This helps
+     * resolve nuances when dropdowns share the same modal root.
+     */
+    dismissTestOnContainer?: boolean;
+    /**
+     * Event fires when there is a typical user interaction that suggests this
+     * dropdown should be dismissed, such as clicking outside of these dropdowns
+     * rendered region.
+     */
+    onClose?(e: MouseEvent): void;
+}
+interface IState {
+    dropdownWidth?: number;
+    dropdownHeight?: number;
+}
+/**
+ * @internal This component exist to keep Pagination component works as before.
+ * @deprecated Replace this component as new aligned with design will be added.
+ * Less opinionated dropdown region that offers a region to render within but
+ * does not have contents of its own.
+ */
+export declare class Dropdown extends React.Component<IDropdown> {
+    container: React.RefObject<HTMLDivElement>;
+    state: IState;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    get isOpen(): boolean;
+    private get modalId();
+    private get topQueuedItem();
+    private get isTopQueuedId();
+    private get isTopQueued();
+    private get isQueued();
+    addQueueId: () => void;
+    removeQueueId: () => void;
+    private handleDocumentDown;
+    renderContent(style?: React.CSSProperties): JSX.Element;
+    render(): JSX.Element | null;
+}
+export {};

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

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { DOMRectBounds, INestedChildren } from '../../../utils';
+export declare const ScrollRegionMode: {
+    readonly LIGHT: "ScrollRegion--light";
+    readonly DARK: "ScrollRegion--dark";
+};
+export type ScrollRegionModeType = (typeof ScrollRegionMode)[keyof typeof ScrollRegionMode];
+export interface IScrollRegion extends INestedChildren<React.ReactNode> {
+    /** When set, the scroll will have some inertia for touch controls */
+    allowTouchInertia?: boolean;
+    /** Provides a custom class name to the container of this component */
+    className?: string;
+    /** Applies a custom class to the content portion of the scroll region */
+    contentClassName?: string;
+    /** Rendering mode of this scrollRegion */
+    mode?: ScrollRegionModeType;
+    /** Props to apply directly to the container div of this component */
+    containerProps?: React.HTMLProps<HTMLDivElement>;
+    /** Props to apply directly to the scrollRegion content panel container */
+    contentProps?: React.HTMLProps<HTMLDivElement>;
+    /**
+     * When true, scroll events will stop being absorbed by this scroll region when
+     * the user tries to scroll beyond the max bounds of the scroll region.
+     */
+    allowScrollFlowThrough?: boolean;
+    /** This forces a maximum amount of scroll room */
+    scrollHeight?: number;
+    /** Sets this scroll region to the given scroll location */
+    scrollToOnce?: [number, number];
+    /**
+     * Sets how quick the scrollTopOnce settles to the new position. Set to 1 to
+     * be essentially instant.
+     */
+    autoScrollDuration?: number;
+    /**
+     * When set to true, this will always show the scroll bar as visible as long
+     * as the space can be scrolled. If the space is not scrollable, the scroll
+     * bar will be hidden.
+     */
+    alwaysShowScroll?: boolean;
+    /**
+     * Disables using the wheel to scroll this view.
+     */
+    preventWheel?: boolean;
+    /**
+     * When this view changes the scroll top or left value it provides it in this
+     * callback
+     *
+     * isAutomated is true when the system is scrolling the view and not the user.
+     */
+    onScroll?(scroll: [number, number], scrollMax: [number, number], viewBounds: DOMRectBounds, contentBounds: DOMRectBounds, isAutomated?: boolean): void;
+}
+interface IState {
+    isOpen: boolean;
+    isDragging: boolean;
+    top: [number, number];
+    bounds?: DOMRectBounds;
+    contentBounds?: DOMRectBounds;
+    /**
+     * This is the computed region width by examining all immediate children of
+     * the content wrapper.
+     */
+    regionWidth?: number;
+    /**
+     * This is set to true when the scroll is supposed to self animate. This will
+     * only happen temporarily for automation and can not remain active while the
+     * user interacts with the scrolling manually.
+     */
+    animating?: boolean;
+}
+/**
+ * @internal This component exist to keep Pagination component works as before.
+ * @deprecated Replace this component as new aligned with design will be added.
+ * This is a custom scroller for rendering a custom scrollbar for an X and Y
+ * axis scrolling.
+ */
+export declare class ScrollRegion extends React.Component<IScrollRegion, IState> {
+    state: IState;
+    container: React.RefObject<HTMLDivElement>;
+    private wrapper;
+    private content;
+    private scrolledToOnce?;
+    private currentScrollHeight?;
+    private initialized;
+    private childrenChanged;
+    private isUpdatingChildren;
+    private animateScrollId;
+    private touch;
+    getSnapshotBeforeUpdate(prevProps: Readonly<IScrollRegion>): null;
+    init: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    private updateRegionWidth;
+    private animateScrollOnce;
+    private getScrollMetrics;
+    handleResize: () => void;
+    handleTouchStart: (e: TouchEvent) => void;
+    handleTouchEnd: (e: TouchEvent) => void;
+    handleTouchMove: (e: TouchEvent) => void;
+    handleWheel: (e: WheelEvent) => boolean;
+    handleHorizontalBarDown: (e: React.PointerEvent<HTMLDivElement>) => void;
+    handleVerticalBarDown: (e: React.PointerEvent<HTMLDivElement>) => void;
+    render(): JSX.Element;
+}
+export {};