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

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

@@ -0,0 +1,233 @@
+import * as React from 'react';
+import { DOMRectBounds, DOMRectPadding } from '../../../utils';
+/**
+ * Builds a selection's options from an object style enum.
+ */
+export declare function selectionOptionsFromEnum(obj: Record<string, any>): ISelection['options'];
+/**
+ * Available preformatted render modes
+ */
+export declare const SelectionMode: {
+    /**
+     * Render mode for the selection being placed within an existing field (such
+     * as within a TextInput on the right).
+     */
+    readonly FIELD_INLINE: "Selection--field-inline";
+    /**
+     * Same as field_inline but with toned down colors.
+     */
+    readonly FIELD_INLINE_SUBTLE: "Selection--field-inline-subtle";
+    /**
+     * Style that typically shows up at the top of a page spanning table to filter
+     * its contents.
+     */
+    readonly FILTER_HEADER: "Selection--filter-header";
+    /**
+     * Common style when the selection is within a table setting
+     */
+    readonly TABLE: "Selection-table";
+    /**
+     * Renders this mode as disabled. This mode is automatically used when the
+     * disabled flag is set for this component.
+     */
+    readonly DISABLED: "Selection--disabled";
+};
+/**
+ * Available preformatted render sizes
+ */
+export declare const SelectionSize: {
+    readonly HEIGHT_30: "Selection--height-30";
+    readonly HEIGHT_32: "Selection--height-32";
+    readonly HEIGHT_36: "Selection--height-36";
+    readonly HEIGHT_40: "Selection--height-40";
+    readonly HEIGHT_60: "Selection--height-60";
+};
+export type SelectionSizeType = (typeof SelectionSize)[keyof typeof SelectionSize];
+export declare const SelectionDropdownMode: {
+    PLAIN: string;
+};
+export type SelectionModeType = (typeof SelectionMode)[keyof typeof SelectionMode];
+/**
+ * Selection Props
+ */
+export interface ISelection {
+    /** Allows children */
+    children?: React.ReactNode;
+    /** 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>;
+    /**
+     * This causes the selection to display a customized dropdown menu. This
+     * essentially bypasses any "options" provided and will NOT manage any of the
+     * values or callbacks.
+     *
+     * You can pass a <Dropdown> component to this prop, or you can pass a
+     * component with a <Dropdown> as it's top level container and has a
+     * containerProps: IDropdown prop.
+     */
+    customDropdown?: React.ReactNode;
+    /** Optional decal to be injected on the left of displayed value */
+    decal?: React.ReactNode;
+    /**
+     * When true, the drop arrow decal will render up instead of down
+     */
+    decalUp?: boolean;
+    /** The initial displayed value within the selection menu */
+    defaultValue?: any;
+    /** Set to true to render this component as disabled and eliminate handlers */
+    disabled?: boolean;
+    /**
+     * Set this to force a displayed value instead of the user selected value.
+     * NOTE: This sets the display WITHOUT affecting the selection value in any
+     * way.
+     */
+    displayValue?: React.ReactNode;
+    /**
+     * Provide this to force render the dropdown of the selection with custom
+     * bounds.
+     */
+    dropdownBounds?: DOMRectBounds;
+    /**
+     * Pads the dropdown reference box with the provided padding to allow for a
+     * larger dropdown region than just the width of the value box. This also
+     * makes it easier to gap the dropdown from the value box.
+     */
+    dropdownPadding?: DOMRectPadding;
+    /** Placeholder message if no value is selected yet */
+    placeholder?: string;
+    /** Error message */
+    error?: string;
+    /**
+     * Indicate if the dropdown should include a Quick Search.
+     *
+     * NOTE: The quick search will ONLY work on options that have a string for
+     * its label OR is provided a search term to compare against. A React Element
+     * can not be searched against.
+     */
+    hasSearch?: boolean;
+    /**
+     * Set to true to indicate there are more options that can be loaded in when
+     * the user scrolls to the bottom of the list.
+     */
+    hasMore?: boolean;
+    /**
+     * Set to true to indicate the dropdown items are being loaded.
+     */
+    isLoading?: boolean;
+    /**
+     * Displays a label adjacent to this dropdown.
+     */
+    label?: React.ReactNode;
+    /** Render mode of the selection input */
+    mode?: SelectionModeType;
+    /** The options to offer in the selection menu */
+    options: {
+        /**
+         * The label of the selection in the dropdown menu (and displayed as the
+         * value when selected).
+         */
+        label: React.ReactNode;
+        /** Value paired with the option */
+        value: any;
+        /** Provides the string the search compares against to find options */
+        search?: string;
+        /** When true, places a divider between this item and the next item */
+        divider?: boolean;
+    }[];
+    /** Indicates how many rows for the dropdown should render at max */
+    rowDisplayCount?: number;
+    /** Render size of the selection input */
+    size?: SelectionSizeType;
+    /** Props to configure the select element to help work with forms */
+    selectProps?: React.HTMLProps<HTMLSelectElement>;
+    /** When set, this does a controlled component pattern. */
+    value?: any;
+    /** A label to display next to the current displayed value */
+    valueLabel?: string;
+    /**
+     * Executes when the user changes the value of this field.
+     */
+    onChange?(value: any): void;
+    /**
+     * If hasMore is true and the user reaches the end of the list, this will
+     * execute to indicate more data needs to be loaded for the user to view.
+     */
+    onLoadMore?(options: this['options']): Promise<void>;
+    /**
+     * Executes when the user opens the dropdown.
+     */
+    onOpen?(): void;
+    /**
+     * Executes when the dropdown is closed. Return false to prevent the dropdown
+     * from closing.
+     */
+    onClose?(): boolean;
+    /**
+     * This executes when the user types in a search in the QuickSearch field.
+     */
+    onSearch?(searchTerm: string): void;
+    /**
+     * This hijacks the click event for the decal arrow. In some cases, the arrow
+     * may cause a differing behavior, such as sort direction control.
+     */
+    onArrowClick?(e: React.MouseEvent): void;
+}
+interface IState {
+    dropdownBounds: DOMRectBounds | null;
+    hovered: boolean;
+    focused: boolean;
+    internalValue: any;
+    /** The current search term applied to the selection. */
+    searchValue?: string;
+}
+/**
+ * @internal This component exist to keep Pagination component works as before.
+ * @deprecated Replace this component as new aligned with design will be added.
+ * Displays a dropdown where the user picks an item from a list of items
+ *
+ * When this component has children, it will skip rendering the header default
+ * header component and allow for a customized header which will be the
+ * children; HOWEVER, this will still provide the dropdown for rendering for a
+ * selection style dropdown menu that will render.
+ */
+export declare class Selection extends React.Component<ISelection, IState> {
+    state: IState;
+    container: React.RefObject<HTMLDivElement>;
+    private selectRef;
+    private headerRef;
+    private searchRef;
+    private stopBlur;
+    private preventRefocus;
+    private willLoadMore;
+    private windowBlurred;
+    componentDidMount(): void;
+    componentDidUpdate(_prevProps: this['props'], prevState: IState): void;
+    componentWillUnmount(): void;
+    get valueLabel(): React.ReactNode | string;
+    get valueIndex(): number;
+    /**
+     * Retrieves the list of options that should be displayed. This takes into
+     * account the current search term the user may have entered.
+     */
+    get options(): ISelection['options'];
+    handleWindowBlur: () => void;
+    handleClick: (e: React.SyntheticEvent) => void;
+    handleOpen: () => void;
+    handleClose: () => void;
+    handleFocus: (e: FocusEvent) => void;
+    handleBlur: (e: FocusEvent) => void;
+    handleSelect: (option: ISelection['options'][0]) => () => void;
+    /**
+     * Handles the user's input into the Quick Search bar
+     */
+    handleSearch: (e: React.ChangeEvent) => void;
+    preventBlur: () => void;
+    handleRange: (_start: number, _end: number, _total: number, isEnd: boolean) => Promise<void>;
+    handleMouseDown: (e: React.MouseEvent) => void;
+    renderHeader(): JSX.Element;
+    renderDropdown(): JSX.Element | null | undefined;
+    renderSearch(): JSX.Element;
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,2 @@
+export { default as BrTextField } from './text-field';
+export type { BrTextFieldProps } from './text-field';

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

@@ -0,0 +1,138 @@
+import { ChangeEventHandler, FocusEventHandler, ReactNode, TextareaHTMLAttributes } from 'react';
+export interface BrTextFieldProps {
+    /**
+     * 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.
+ *
+ * ## Usage
+ *
+ * ### Basic
+ *
+ * ```jsx
+ * import { BrTextField } from '@bloomreach/react-banana-ui';
+ *
+ * export default function TextFieldExample() {
+ *   return <BrTextField placeholder="Placeholder..." />;
+ * }
+ * ```
+ *
+ * ### With label and helper text
+ * ```jsx
+ * import { BrTextField } from '@bloomreach/react-banana-ui';
+ *
+ * export default function TextFieldExample() {
+ *   return (
+ *     <BrTextField
+ *       label="Field with a label"
+ *       helperText="This is helper text"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare const BrTextField: import("react").ForwardRefExoticComponent<BrTextFieldProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default BrTextField;

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

@@ -0,0 +1,14 @@
+import { Meta } from '@storybook/react';
+import { type Story } from './text-field.stories';
+declare const meta: Meta;
+export default meta;
+export declare const DifferentStates: Story;
+export declare const FieldsInRow: Story;
+export declare const WithTooltip: Story;
+export declare const CompleteField: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const CompleteFieldFullWidth: Story;
+export declare const Controlled: Story;
+export declare const SetError: Story;
+export declare const WithCounter: Story;

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

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+import BrTextField from './text-field';
+declare const meta: Meta<typeof BrTextField>;
+export default meta;
+export type Story = StoryObj<typeof BrTextField>;
+export declare const Basic: Story;
+export declare const WithLabel: Story;
+export declare const WithTooltip: Story;
+export declare const WithHelperText: Story;
+export declare const WithCounter: Story;
+export declare const CompleteField: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Error: Story;
+export declare const ManuallyResizable: Story;
+export declare const MinRows: Story;
+export declare const AutoSize: Story;
+export declare const AutoSizeWithMaxRows: Story;
+export declare const FullWidth: Story;
+export declare const CompleteFieldFullWidth: Story;
+export declare const Controlled: Story;
+export declare const SetFocus: Story;
+export declare const SetError: Story;
+export declare const FieldsInColumn: Story;
+export declare const FieldsInRow: Story;

package/dist/components/internal.d.ts

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

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

@@ -0,0 +1,149 @@
+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';
+export interface IRowProps {
+    /** The index of the row to be rendered. */
+    index: number;
+    /** A fairly mandatory style object you should apply to the top level item */
+    style?: React.CSSProperties;
+    /** Indicates this row is the last element to be rendered */
+    isEnd: boolean;
+    /**
+     * Gives an opportunity to modify/override the style properties applied to
+     * the generated row item
+     */
+    rowStyle: React.CSSProperties;
+}
+export interface IListView extends INestedChildren<React.FunctionComponent<IRowProps>> {
+    /** When set, causes inertia to occur with touch swiping */
+    allowTouchInertia?: boolean;
+    /**
+     * A base size to associate with a list item. This helps give a realistic
+     * scroll range. Use a negative value to indicate the row should be measured
+     * to have a more dynamic row size. The absolute value of the negative value
+     * provided will be the minimum size of the row. Use the rowGap property to
+     * ensure spacing is provided between the row and it's next row if needed.
+     */
+    rowSize: number | ((index: number, isEnd: boolean) => number);
+    /**
+     * Place an incrementing number here. If the rows need recomputing due to a
+     * size change, this value should change.
+     */
+    rowUpdate?: any;
+    /** This is ONLY used for rows that get measured and automatically adjusted */
+    rowGap?: number;
+    /** Applies a class to the top level container of the pane */
+    className?: string;
+    /** Props to apply to the container of this component */
+    containerProps?: React.HTMLProps<HTMLDivElement>;
+    /** WHen the list is empty, this will render a centered label in it's place */
+    emptyLabel?: string;
+    /** Total number of items to render */
+    total: number;
+    /**
+     * Scrolls to the provided location a single time for the given value. A
+     * different value must be provided to trigger this a second time.
+     */
+    scrollToOnce?: number;
+    /**
+     * Sets how quick the scrollToOnce settles to the new position. Set to 1 to
+     * be essentially instant.
+     */
+    autoScrollDuration?: number;
+    /**
+     * This limits the list to only display so many rows before forcing scroll.
+     * NOTE: When rowSize is a method for varying row sizes, this will means
+     * rowDisplayCount will display the number of rows with THE LARGEST AVAILABLE
+     * SIZE. So, do not expect this to auto adjust for the varying row sizes
+     * available and be super magical.
+     */
+    rowDisplayCount?: number;
+    /**
+     * When set to true, this will render the list within a ScrollRegion instead
+     * of a ScrollView.
+     */
+    useScrollRegion?: boolean;
+    /** Executes when the range of visible rows has changed */
+    onRange?(start: number, end: number, total: number, isEnd: boolean): void;
+    /** Executes on scroll events */
+    onScroll?(scrollTop: number, maxScroll: number, viewBounds: DOMRectBounds, contentBounds: DOMRectBounds, isAutomated?: boolean): void;
+}
+/**
+ * @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 specialized scroll view that aids in recycling and rendering items
+ */
+export declare class ListView extends React.Component<IListView> {
+    state: {
+        startIndex: number;
+        endIndex: number;
+    };
+    /**
+     * This is the scrollview container this list uses for creating the scroll
+     * space of the list.
+     */
+    container: React.RefObject<ScrollRegion | ScrollView>;
+    /**
+     * When rowSize is a method, this is used to store the calculated row values.
+     * This helps optimize the list to prevent deep looping in really large lists
+     * of items.
+     */
+    rowTop: number[];
+    /**
+     * This is a helper optimization. It stores the last row's most recently known
+     * height. This helps speed up determining the total scroll area of the list.
+     */
+    lastRowHeight: number;
+    /** This tracks what row size is the largest row size */
+    maxRowSize: number;
+    /**
+     * This is the last row update context utilized to compute the row tops. If
+     * this is different from the props rowUpdate value then it should trigger a
+     * recalculation.
+     */
+    rowUpdateContext?: any;
+    /** Used to indicate if this has been intiialized correctly yet. */
+    mounted: boolean;
+    /** Tracks the rows that will be measured when rendered */
+    willMeasure: Set<number>;
+    /** Tracks the rows that are rendered and need immediate measuring for re-rendering */
+    measuring: Map<number, React.RefObject<HTMLDivElement> | undefined>;
+    /**
+     * This is set when the list detects rows that are auto calculated. Some
+     * initialization behaviors need to be aware of this in order to perform the
+     * initial render properly.
+     */
+    hasAutoHeightRows: boolean;
+    /** Helps watch for mutations in the DOM to aid in dynamically sized rows */
+    observer?: MutationObserver;
+    constructor(props: IListView);
+    componentDidMount(): void;
+    /**
+     *
+     * We will use this to process incoming props to determine if the row tops
+     * should be recalculated.
+     */
+    shouldComponentUpdate(nextProps: IListView): boolean;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    /**
+     * Gets the computed scroll height
+     */
+    get scrollHeight(): number;
+    /**
+     * Applies a calculated style object for the scroll view. This keeps the
+     * integrity of the containerProps
+     */
+    get scrollStyle(): React.CSSProperties;
+    handleResize: () => void;
+    handleScrollRegion: (scrollTop: [number, number], maxScroll: [number, number], viewBounds: DOMRectBounds, contentBounds: DOMRectBounds) => void;
+    handleScroll: (scrollTop: number, maxScroll: number, viewBounds: DOMRectBounds, contentBounds: DOMRectBounds) => void;
+    /**
+     * Resets all rowTop calculation assumptions and queues all rows for
+     * recalculating.
+     */
+    queueRemeasure(props: IListView): void;
+    private renderListItems;
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export declare const LoaderSize: {
+    readonly NORMAL: "Loader--medium";
+    readonly SMALL: "Loader--small";
+    readonly TINY: "Loader--tiny";
+};
+export type LoaderSizeType = (typeof LoaderSize)[keyof typeof LoaderSize];
+/**
+ * Loader Props
+ */
+export interface ILoader {
+    /** 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>;
+    /** Rendering sie of the standard loader */
+    size?: LoaderSizeType;
+}
+/**
+ * @internal This component exist to keep Pagination component works as before.
+ * @deprecated Replace this component as new aligned with design will be added.
+ * Displays the common loader found throughout the application.
+ */
+export declare function Loader(props: ILoader): React.ReactElement;

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

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

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

@@ -0,0 +1,2 @@
+export { default as BrPagination } from './pagination';
+export type { BrPaginationProps } from './pagination-types';

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

@@ -0,0 +1,4 @@
+import { 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

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

package/dist/components/navigation/pagination/pagination-items-per-page-selector.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function BrPaginationItemsPerPageSelector(): JSX.Element | null;

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

@@ -0,0 +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
+ */
+export declare function getNavItems(currentPageIndex: number, totalPages: number): PageNavigationItemsListType;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { PageNavigationItemType } from './pagination-types';
+export interface BrPaginationNavigationItemProps {
+    value: PageNavigationItemType;
+}
+export declare function BrPaginationNavigationItem({ value }: BrPaginationNavigationItemProps): JSX.Element;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function BrPaginationNavigation(): JSX.Element | null;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function BrPaginationSummary(): JSX.Element;